/* Side Quest Booking — the public site.
 *
 * Separate from app/public/shell.css on purpose: that one dresses a dense
 * operator tool, this one has to be readable by somebody deciding whether to
 * trust us with their bookings. THE PALETTE IS THE SAME, deliberately, so the
 * product does not look like a different company once you sign in.
 *
 * No build step, no framework, no CDN. One stylesheet and hand-written HTML,
 * for the same reason the app vendors its own pdf.js: a marketing site that
 * cannot be edited without `npm install` is a marketing site that goes stale.
 */

:root {
  --ink:#11181c; --muted:#5c6b73; --line:#dfe5e8; --bg:#f7f9fa;
  --accent:#1f6f8b; --accent-deep:#12232b; --ok:#1b7f4f; --warn:#8a5a00;
  /* Ink that sits ON the accent. NOT hard-coded white: in dark mode the
     accent is a LIGHT blue, and white-on-light-blue is unreadable — which is
     exactly what shipped in the first draft and was caught by looking at the
     rendered page rather than the stylesheet. It flips with the theme. */
  --on-accent:#fff;
  --surface:#fff; --surface-2:#eef2f4; --shadow:rgba(16,32,40,.08);
  --measure: 34rem;          /* ~68 characters. Longer lines lose the reader. */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#e6edf0; --muted:#93a4ab; --line:#27333b; --bg:#0f1417;
    --surface:#171f24; --surface-2:#1d272d; --shadow:rgba(0,0,0,.4);
    --accent:#5cb3d1; --accent-deep:#0b1114; --ok:#54cf94; --warn:#e8bc4e;
    --on-accent:#0b1114;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink:#e6edf0; --muted:#93a4ab; --line:#27333b; --bg:#0f1417;
  --surface:#171f24; --surface-2:#1d272d; --shadow:rgba(0,0,0,.4);
  --accent:#5cb3d1; --accent-deep:#0b1114; --ok:#54cf94; --warn:#e8bc4e;
  --on-accent:#0b1114;
  color-scheme: dark;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; }
a { color:var(--accent); }

.wrap { max-width:1060px; margin:0 auto; padding:0 20px; }
.narrow { max-width:var(--measure); }

/* ------------------------------------------------------------------ nav -- */
header.top {
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.top .wrap { display:flex; align-items:center; gap:22px; height:62px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:700;
         letter-spacing:-.02em; color:var(--ink); text-decoration:none;
         font-size:18px; }
.mark { width:22px; height:22px; flex:none; }
.top nav { margin-left:auto; display:flex; align-items:center; gap:20px; }
/* :not(.btn) matters. `.top nav a` is (0,1,2) and `.btn` is (0,1,0), so
   without this the nav's call-to-action button inherits the muted link
   colour and its label all but disappears — which is precisely what the
   first draft shipped, invisible in light mode and unreadable in dark. */
.top nav a:not(.btn) { color:var(--muted); text-decoration:none; font-size:15px; }
.top nav a:not(.btn):hover { color:var(--ink); }
@media (max-width:720px) { .top nav a.hide-sm { display:none; } }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display:inline-block; padding:12px 20px; border-radius:9px;
  background:var(--accent); color:var(--on-accent); text-decoration:none;
  font-weight:600; font-size:16px; border:1px solid transparent;
}
.btn:hover { filter:brightness(1.08); }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn.sm { padding:9px 15px; font-size:15px; }

/* ------------------------------------------------------------------ hero -- */
.hero { padding:76px 0 12px; }
.hero h1 {
  font-size:clamp(34px, 5.4vw, 54px); line-height:1.08;
  letter-spacing:-.03em; margin:0 0 18px; max-width:18ch;
}
.hero .lede { font-size:19px; color:var(--muted); max-width:var(--measure);
              margin:0 0 28px; }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero .cta .fine { font-size:14px; color:var(--muted); }

/* A plain statement of what this is, rather than a stock photo of a boat. */
.eyebrow { text-transform:uppercase; letter-spacing:.09em; font-size:12.5px;
           font-weight:700; color:var(--accent); margin:0 0 14px; }

/* -------------------------------------------------------------- sections -- */
section { padding:64px 0; }
section.tint { background:var(--surface-2); }
h2 { font-size:clamp(25px, 3.2vw, 33px); line-height:1.2; letter-spacing:-.02em;
     margin:0 0 14px; }
h3 { font-size:19px; margin:0 0 7px; letter-spacing:-.01em; }
.sub { color:var(--muted); max-width:var(--measure); margin:0 0 34px; }

.grid { display:grid; gap:18px;
        grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); }
.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:13px; padding:22px;
}
.card p { color:var(--muted); font-size:15.5px; margin:0; }
.card .ico { color:var(--accent); margin-bottom:12px; display:block; }

/* Feature rows: text one side, a picture of the actual screen the other. */
.row { display:grid; gap:38px; align-items:center;
       grid-template-columns:1fr 1fr; }
.row + .row { margin-top:60px; }
@media (max-width:860px) { .row { grid-template-columns:1fr; } }
.row.flip .txt { order:2; }
@media (max-width:860px) { .row.flip .txt { order:0; } }
.shot { border:1px solid var(--line); border-radius:12px; overflow:hidden;
        background:var(--surface); box-shadow:0 8px 30px var(--shadow); }
.shot img { display:block; }
/* Until there are real screenshots, a labelled placeholder that is honest
   about being one. Better than a stock image that implies a screen exists. */
.shot.todo { display:grid; place-items:center; min-height:230px;
             border-style:dashed; color:var(--muted); font-size:14px;
             text-align:center; padding:26px; }

ul.ticks { list-style:none; padding:0; margin:18px 0 0; }
ul.ticks li { position:relative; padding-left:26px; margin-bottom:9px;
              color:var(--muted); font-size:15.5px; }
ul.ticks li::before { content:"✓"; position:absolute; left:0; top:0;
                      color:var(--ok); font-weight:700; }

/* --------------------------------------------------------------- compare -- */
table.cmp { width:100%; border-collapse:collapse; font-size:15.5px;
            background:var(--surface); border:1px solid var(--line);
            border-radius:13px; overflow:hidden; }
table.cmp th, table.cmp td { padding:13px 16px; text-align:left;
                             border-bottom:1px solid var(--line);
                             vertical-align:top; }
table.cmp tr:last-child td { border-bottom:0; }
table.cmp th { font-size:13px; text-transform:uppercase; letter-spacing:.06em;
               color:var(--muted); font-weight:700; }
table.cmp td.yes { color:var(--ok); font-weight:600; }
table.cmp td.no  { color:var(--muted); }

/* ------------------------------------------------------------------- kb --- */
.kb-hero { padding:56px 0 30px; }
.kb-search { width:100%; max-width:var(--measure); padding:13px 15px;
             font-size:16px; border:1px solid var(--line); border-radius:10px;
             background:var(--surface); color:var(--ink); }
.kb-sec { margin-bottom:34px; }
.kb-list { list-style:none; padding:0; margin:0;
           border:1px solid var(--line); border-radius:12px;
           background:var(--surface); overflow:hidden; }
.kb-list li { border-bottom:1px solid var(--line); }
.kb-list li:last-child { border-bottom:0; }
.kb-list a { display:flex; justify-content:space-between; gap:14px;
             padding:14px 17px; text-decoration:none; color:var(--ink);
             font-size:15.5px; }
.kb-list a:hover { background:var(--surface-2); }
.kb-list .why { color:var(--muted); font-size:14px; }
/* An article that is not written yet SAYS SO rather than 404ing. A knowledge
   base whose links are a coin flip is worse than a short one. */
.tag { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
       font-weight:700; padding:3px 7px; border-radius:5px; flex:none;
       align-self:center; }
.tag.draft { background:color-mix(in srgb, var(--warn) 18%, transparent);
             color:var(--warn); }
.tag.soon  { background:var(--surface-2); color:var(--muted); }

/* ----------------------------------------------------------- kb article --- */
article.doc { max-width:var(--measure); padding:44px 0 70px; }
article.doc h1 { font-size:32px; line-height:1.15; letter-spacing:-.02em;
                 margin:0 0 10px; }
article.doc .meta { color:var(--muted); font-size:14px; margin-bottom:30px; }
article.doc h2 { font-size:22px; margin:34px 0 10px; }
article.doc h3 { font-size:17.5px; margin:24px 0 6px; }
article.doc p, article.doc li { color:var(--ink); }
article.doc code { background:var(--surface-2); padding:2px 6px;
                   border-radius:5px; font-size:.9em; }
.callout { border-left:3px solid var(--accent); background:var(--surface);
           padding:14px 16px; border-radius:0 9px 9px 0; margin:22px 0;
           font-size:15.5px; }
.callout.unwritten { border-left-color:var(--warn); color:var(--muted); }

/* ---------------------------------------------------------------- footer -- */
footer.foot { border-top:1px solid var(--line); padding:44px 0 56px;
              color:var(--muted); font-size:14.5px; }
.foot .cols { display:grid; gap:26px;
              grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); }
.foot h4 { font-size:13px; text-transform:uppercase; letter-spacing:.06em;
           color:var(--ink); margin:0 0 10px; }
.foot a { display:block; color:var(--muted); text-decoration:none;
          margin-bottom:7px; }
.foot a:hover { color:var(--ink); }
.foot .legal { margin-top:34px; padding-top:20px;
               border-top:1px solid var(--line); font-size:13.5px; }

/* Side Quest Booking text logo (same as the dashboard's .sq-logo): SIDE QUEST
   with a much smaller BOOKING under it. A drawn logo can replace it later. */
.brand .sq-logo { display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1; }
.brand .sq-logo .sq-1 { font-weight:800; letter-spacing:-0.015em; font-size:17px; }
.brand .sq-logo .sq-2 { font-size:7.5px; font-weight:600; letter-spacing:0.34em; text-transform:uppercase; margin-top:0.35em; opacity:0.75; }

/* Demo request form (1 Oct 2026). */
.demo-form{display:grid;gap:12px;margin:18px 0}
.demo-form label{display:grid;gap:6px;font-weight:600;font-size:14.5px}
.demo-form input,.demo-form textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line,#d6dde1);border-radius:10px;background:#fff;color:inherit}
.demo-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.demo-form .btn{justify-self:start}
.demo-msg{min-height:1.4em;margin:0;font-size:14.5px}
.shot { margin:0; }
.shot img { width:100%; height:auto; }
.shot figcaption { padding:10px 14px; font-size:13.5px; color:var(--muted); border-top:1px solid var(--line); background:#fff; }

/* The logo's pixel treasure-map mark (1 Oct 2026). */
.brand .sq-logo { display:inline-grid; grid-template-columns:auto auto; column-gap:8px; align-items:center; justify-items:start; }
.brand .sq-logo::before { content:""; grid-row:1 / 3; width:32px; height:28px; background:url(/assets/sq-logo-mark.svg) center/contain no-repeat; image-rendering:pixelated; }
.brand .sq-logo .sq-1, .brand .sq-logo .sq-2 { grid-column:2; }

/* Logo B (1 Oct 2026): same as the dashboard's (shell.css). */
@font-face { font-family:"SQ Logo"; font-weight:800; font-display:swap; src:url(/assets/sq-logo-800.woff2) format("woff2"); }
:root { --sq-quest:#16708c; }
.brand .sq-logo .sq-1 { font-family:"SQ Logo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-weight:800; letter-spacing:-0.015em; white-space:nowrap; }
.brand .sq-logo .sq-q { display:inline-block; width:2.9102em; height:0.864em; vertical-align:-0.0909em; overflow:hidden; color:transparent; text-indent:100%; white-space:nowrap; background:var(--sq-quest); -webkit-mask:url(/assets/sq-quest.svg) 0 0/100% 100% no-repeat; mask:url(/assets/sq-quest.svg) 0 0/100% 100% no-repeat; }
.brand .sq-logo::before { width:34px; height:34px; }

/* Logo B final (1 Oct 2026): BOOKING spread across the full width. */
.brand .sq-logo .sq-2 { justify-self:stretch; display:flex; justify-content:space-between; letter-spacing:0; padding:0 0.05em; font-size:6px; font-weight:700; margin-top:0.45em; }
.brand .sq-logo .sq-2 > span { display:block; }