/*
 * The product pages: /booking-system/, /quote-generator/, /booking-diary/,
 * /invoice-generator/ and /guesthouse-software/.
 *
 * Plain HTML, generated by scripts/seo-pages.mjs, so every search engine reads
 * them whole without running a line of JavaScript. The pictures of the app on
 * them are drawn here in CSS rather than shipped as screenshots: nothing to
 * download, sharp on every screen, and right in dark mode too.
 */

:root {
  color-scheme: light dark;
  --canvas: light-dark(#f6f8fa, #0a0e15);
  --panel: light-dark(#ffffff, #121824);
  --panel-2: light-dark(#f8fafc, #161d2a);
  --panel-3: light-dark(#f1f5f9, #1e2634);
  --ink: light-dark(#0f172a, #e9eef6);
  --ink-2: light-dark(#334155, #c3ccda);
  --muted: light-dark(#64748b, #8e9cb0);
  --faint: light-dark(#94a3b8, #6b7a8f);
  --line: light-dark(#e4e9ef, #222c3b);
  --line-soft: light-dark(#eef2f7, #1a2330);
  --accent: light-dark(#0d7d64, #2fbf9b);
  --accent-2: light-dark(#0a6552, #45d2ae);
  --accent-soft: light-dark(#e7f4f0, #0e2620);
  --accent-line: light-dark(#bfe0d7, #1e4739);
  --accent-ink: light-dark(#0a5a49, #7fe0c6);
  --on-accent: light-dark(#ffffff, #04201a);
  --q: light-dark(#7c6df2, #a396ff);
  --q-soft: light-dark(#efedfe, #221f3d);
  --b: light-dark(#2563eb, #6ba5ff);
  --b-soft: light-dark(#e8f0fe, #14223b);
  --i: light-dark(#d97706, #f0b252);
  --i-soft: light-dark(#fdf3e3, #2a2011);
  --danger: light-dark(#be123c, #f2637f);
  --danger-soft: light-dark(#fdf1f3, #251218);
  --shadow: 0 18px 50px light-dark(rgba(15, 23, 42, 0.12), rgba(0, 0, 0, 0.6)), 0 3px 10px light-dark(rgba(15, 23, 42, 0.05), rgba(0, 0, 0, 0.4));
  --sans: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --r: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); }
h1, h2, h3 { color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--panel); padding: 8px 12px; border-radius: 8px; z-index: 10; }

/* -- top bar -- */
.bar { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }
.logo { font-weight: 760; font-size: 18px; color: var(--ink); text-decoration: none; letter-spacing: -0.03em; }
.logo i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 3px; background: var(--accent); vertical-align: 1px; }
.bar nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.bar nav a { padding: 6px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 14px; white-space: nowrap; }
.bar nav a:hover { background: var(--panel-3); color: var(--ink); }
.bar nav a[aria-current="page"] { color: var(--accent-ink); background: var(--accent-soft); font-weight: 600; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-weight: 620;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 120ms, background 120ms;
}
.btn:hover { transform: translateY(-1px); border-color: var(--faint); }
.btn.go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn.go:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.small { padding: 8px 14px; font-size: 14px; }

/* -- hero -- */
.hero { padding: 64px 0 40px; background: radial-gradient(1100px 420px at 85% -10%, var(--accent-soft), transparent 70%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-ink); font-size: 13px; font-weight: 640; }
.hero h1 { font-size: clamp(32px, 4.6vw, 52px); margin: 0 0 16px; font-weight: 780; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { font-size: 18.5px; color: var(--ink-2); margin: 0 0 26px; max-width: 34em; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reassure { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--muted); }
.reassure li::before { content: "✓"; color: var(--accent); font-weight: 800; margin-right: 6px; }

/* -- the drawn app -- */
.shot {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-size: 12.5px;
  transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
}
.shot-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.shot-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.shot-top b { margin-left: 8px; color: var(--ink); font-size: 12.5px; }
.shot-body { padding: 14px; }

.mgrid { display: grid; grid-template-columns: 74px repeat(7, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mgrid > span { height: 34px; border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft); }
.mgrid .h { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10.5px; color: var(--muted); border-top: 0; line-height: 1.1; }
.mgrid .h b { color: var(--ink); font-size: 13px; }
.mgrid .h.t { background: var(--accent-soft); color: var(--accent-ink); }
.mgrid .r { display: flex; align-items: center; padding: 0 8px; font-weight: 620; color: var(--ink); border-left: 0; }
.mgrid .c { position: relative; }
.mgrid .bar-b, .mgrid .bar-q, .mgrid .bar-i, .mgrid .bar-in {
  position: absolute; top: 5px; bottom: 5px; left: 3px; z-index: 1; font-style: normal;
  display: flex; align-items: center; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden;
}
.mgrid .bar-b { background: var(--b-soft); border: 1px solid var(--b); border-left-width: 4px; }
.mgrid .bar-in { background: var(--b); border: 1px solid var(--b); color: #fff; }
.mgrid .bar-q { border: 1px dashed var(--q); color: var(--ink-2); }
.mgrid .bar-i { background: var(--i-soft); border: 1px solid var(--i); border-left-width: 4px; }
.w2 { width: calc(200% - 6px); } .w3 { width: calc(300% - 6px); } .w4 { width: calc(400% - 6px); }
.toast { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); color: var(--ink); font-size: 12.5px; }
.toast b { color: var(--danger); }

.mdoc { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: #fff; color: #1e293b; }
.mdoc-h { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.mdoc-h b { font-size: 15px; color: #0f172a; }
.mdoc-h small { display: block; color: #64748b; }
.mdoc-logo { width: 34px; height: 34px; border-radius: 9px; background: #0d7d64; }
.mdoc table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mdoc th { text-align: left; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; border-bottom: 1px solid #e2e8f0; padding: 4px 0; }
.mdoc td { padding: 6px 0; border-bottom: 1px solid #f1f5f9; }
.mdoc td small { display: block; color: #64748b; font-size: 10.5px; }
.mdoc .n { text-align: right; font-variant-numeric: tabular-nums; }
.mdoc-t { margin-top: 10px; margin-left: auto; width: 60%; font-size: 12px; }
.mdoc-t div { display: flex; justify-content: space-between; padding: 2px 0; color: #475569; }
.mdoc-t .g { border-top: 1px solid #e2e8f0; margin-top: 4px; padding-top: 6px; font-weight: 750; font-size: 14px; color: #0f172a; }
.mdoc-dep { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #e7f4f0; color: #0a5a49; font-size: 12px; font-weight: 600; }
.stamp { display: inline-block; padding: 3px 10px; border: 2px solid #0d7d64; border-radius: 6px; color: #0d7d64; font-weight: 800; letter-spacing: 0.1em; transform: rotate(-6deg); }
.qr { width: 54px; height: 54px; background:
  conic-gradient(#0f172a 25%, transparent 0 50%, #0f172a 0 75%, transparent 0) 0 0 / 12px 12px; border: 4px solid #fff; outline: 1px solid #e2e8f0; }

.mtoday { display: grid; gap: 8px; }
.mrow { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.mrow i { width: 8px; height: 30px; border-radius: 4px; background: var(--b); }
.mrow.out i { background: var(--i); }
.mrow.q i { background: var(--q); }
.mrow span { flex: 1; color: var(--ink); font-weight: 600; }
.mrow small { display: block; color: var(--muted); font-weight: 400; }
.chip { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 650; background: var(--accent-soft); color: var(--accent-ink); }
.chip.warn { background: var(--i-soft); color: light-dark(#7c3f06, #f0c78d); }

/* -- sections -- */
section { padding: 56px 0; }
section.alt { background: var(--panel); border-block: 1px solid var(--line); }
.kicker { color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 8px; }
section h2 { font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 12px; font-weight: 760; }
.intro { font-size: 17.5px; max-width: 46em; margin: 0 0 30px; }

.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 8px; }
.proof div { padding: 16px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.proof b { display: block; font-size: 24px; color: var(--ink); letter-spacing: -0.02em; }
.proof span { color: var(--muted); font-size: 14px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
section.alt .card { background: var(--panel-2); }
.card .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); font-size: 20px; margin-bottom: 12px; }
.card h3 { font-size: 18px; margin: 0 0 6px; }
.card p { margin: 0; font-size: 15px; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: s; }
.steps li { counter-increment: s; padding: 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--c, var(--accent)); }
.steps li::before { content: counter(s); display: block; font-weight: 800; font-size: 13px; color: var(--c, var(--accent)); }
.steps b { display: block; color: var(--ink); font-size: 16.5px; margin: 2px 0 4px; }
.steps small { color: var(--muted); font-size: 14px; }
.steps .s1 { --c: var(--q); } .steps .s2 { --c: var(--b); } .steps .s3 { --c: var(--i); } .steps .s4 { --c: var(--accent); }

.ticks { columns: 2; column-gap: 32px; padding: 0; margin: 0; list-style: none; }
.ticks li { break-inside: avoid; padding: 0 0 12px 30px; position: relative; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.ticks b { color: var(--ink); }

.vs { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); font-size: 15px; }
.vs th, .vs td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.vs th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--panel-2); }
.vs tr:last-child td { border-bottom: 0; }
.vs td:first-child { color: var(--ink); font-weight: 600; }
.vs .yes { color: var(--accent-ink); font-weight: 650; }
.vs .no { color: var(--muted); }

.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 16px 18px; font-weight: 650; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 18px 16px; }

.related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.related a { display: block; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; color: var(--ink-2); }
.related a:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.related b { display: block; color: var(--ink); margin-bottom: 4px; }
.related small { font-size: 14px; }

.band { margin: 0 20px 56px; border-radius: 22px; padding: 44px 24px; text-align: center; background: linear-gradient(135deg, #0d7d64, #0a5a49); color: #e7f4f0; }
.band h2 { color: #fff; font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 10px; }
.band p { margin: 0 auto 22px; max-width: 36em; font-size: 17px; }
.band .btn.go { background: #fff; color: #0a5a49; border-color: #fff; box-shadow: none; }

footer { border-top: 1px solid var(--line); background: var(--panel); font-size: 14px; color: var(--muted); }
footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; padding-block: 32px; }
footer h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
footer a { display: block; color: var(--ink-2); text-decoration: none; margin-bottom: 6px; }
footer a:hover { color: var(--accent); }
footer p { margin: 0 0 8px; }

@media (max-width: 920px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 32px; }
  .shot { transform: none; }
  .cards, .related { grid-template-columns: 1fr 1fr; }
  .steps, .proof { grid-template-columns: 1fr 1fr; }
  footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .hero { padding-top: 36px; }
  .bar nav { display: none; }
  .bar .wrap { justify-content: space-between; }
  .cards, .related, .steps { grid-template-columns: 1fr; }
  .ticks { columns: 1; }
  .mgrid { grid-template-columns: 58px repeat(7, 1fr); font-size: 11px; }
  .mgrid .r { padding: 0 5px; }
  .vs { font-size: 14px; }
  .vs th, .vs td { padding: 10px; }
  .band { margin: 0 12px 40px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn:hover { transform: none; } }