/* ---------------------------------------------------------------------------
   Scope Request - the marketing site stylesheet.

   Shape lifted from the product's own design system
   (app/resources/views/partials/design.blade.php in the requests-board repo),
   so the site and the software read as the same thing: the same token names
   (--bg, --surface, --ink, --line, --accent), the same 4px spacing scale, the
   same type scale, the same --shell and --gutter, cards and panels for
   records, colour carrying meaning and nothing else.

   The palette is NOT the product's. Deep navy ink, a mid blue accent and one
   warm amber for highlights, so the site has its own identity.

   TINTS ARE rgba(var(--accent-rgb), x), NEVER a flat hex. A hex tint is
   computed against one assumed background and breaks the moment the theme
   underneath it changes; this estate has been bitten by exactly that.

   No build step, no framework, no JavaScript. This is deployed to ordinary
   hosting and must never need patching.
--------------------------------------------------------------------------- */

:root{
  /* Spacing scale. Everything is a multiple of 4px. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* Type scale. */
  --t-xs:12.5px; --t-sm:14px; --t-md:16px; --t-lg:19px; --t-xl:24px;
  --t-2xl:32px; --t-3xl:42px; --t-4xl:56px;

  --radius:10px; --radius-sm:7px; --radius-lg:16px; --radius-pill:999px;

  /* ------------------------------------------------------------- palette
     Deep navy for text, a mid blue accent, one warm amber.

     The -rgb triplets exist so every tint can be written as
     rgba(var(--accent-rgb), x). They are comma-separated deliberately: that
     is the form rgba() takes, and the dark block below restates both halves
     together so a colour can never be redefined without its triplet. */
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-2:#eaf0f8;
  --ink:#0f1e38;          /* deep navy, body text */
  --ink-2:#44546e;
  --ink-3:#5d6b83;
  --line:#dbe3ee;
  --line-2:#9aa8bd;

  /* THE DARK BAND'S GROUND IS ITS OWN TOKEN, not --ink.
     `.band-ink{background:var(--ink)}` is correct in light mode and a disaster
     in dark, where --ink is near white: the band turned white and its white
     headings measured 1.17:1 against it. Nine findings on one page, found by
     measuring the rendered page in a dark browser. A band that is dark in
     both schemes needs a colour that is dark in both schemes. */
  --band:#0f1e38;

  --accent:#1f5fd0;       /* mid blue. 5.9:1 on white, both ways */
  --accent-rgb:31, 95, 208;
  --accent-ink:#ffffff;   /* what sits on top of a solid accent fill */
  --accent-deep:#143f8c;

  /* Warm amber dark enough to BE TEXT. #b26a00 measured 4.27:1 on white and
     4.47:1 on its own 14% tint, which is below AA both times; this is 6.4:1
     on white and 4.9:1 on the tint. Measured in a browser, not estimated. */
  --amber:#8a5100;
  --amber-rgb:138, 81, 0;
  --amber-bright:#e59a2b; /* the same hue where it is a fill or a rule */

  --shadow-sm:0 1px 2px rgba(15,30,56,.06);
  --shadow:0 1px 3px rgba(15,30,56,.08), 0 8px 20px -10px rgba(15,30,56,.10);
  --shadow-lg:0 2px 6px rgba(15,30,56,.08), 0 24px 48px -20px rgba(15,30,56,.18);

  /* THE SHELL, and the gutter that scales with the viewport. Same values and
     same reasoning as the product: a cap past every ordinary monitor, so in
     practice this is "the whole screen, less a gutter". Content is laid out
     in columns inside it rather than as one running paragraph, which is what
     keeps a line length sane without capping prose in `ch`. */
  --shell:2200px;
  --gutter:clamp(16px, 3vw, 44px);
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#080d16;
    --surface:#101828;
    --surface-2:#18212f;
    --ink:#e7eef9;
    --ink-2:#a8b6ca;
    --ink-3:#8d9cb2;
    --line:#222c3c;
    --line-2:#5b6a80;

    /* Still dark, but lifted off --bg so the band still reads as a band. */
    --band:#141f36;

    --accent:#74a8f8;     /* 8.0:1 on the dark ground */
    --accent-rgb:116, 168, 248;
    --accent-ink:#071020;
    --accent-deep:#a8c8fb;

    --amber:#f0b45f;
    --amber-rgb:240, 180, 95;
    --amber-bright:#f0b45f;

    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 1px 3px rgba(0,0,0,.5), 0 8px 20px -10px rgba(0,0,0,.45);
    --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 24px 48px -20px rgba(0,0,0,.6);
  }
}

/* ------------------------------------------------------------------- base */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:var(--t-md)/1.62 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
:focus:not(:focus-visible){outline:none}

h1,h2,h3,h4{margin:0;line-height:1.16;letter-spacing:-.022em;font-weight:660}
h1{font-size:var(--t-3xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-lg)}
h4{font-size:var(--t-md)}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 var(--s4);padding-inline-start:var(--s5)}
li{margin-bottom:var(--s2)}
li:last-child{margin-bottom:0}
strong{font-weight:640;color:var(--ink)}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em;background:var(--surface-2);
  padding:2px 6px;border-radius:var(--radius-sm);color:var(--ink);
}
hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}

.muted{color:var(--ink-2)}
.small{font-size:var(--t-sm);color:var(--ink-2)}
.tiny{font-size:var(--t-xs);color:var(--ink-3)}
.lead{font-size:var(--t-lg);line-height:1.52;color:var(--ink-2)}
.nowrap{white-space:nowrap}

/* ------------------------------------------------------------------ shell */

.shell{width:min(100% - 2 * var(--gutter), var(--shell));margin-inline:auto}

/* -------------------------------------------------------------- the topbar
   Sticky, one row, and it WRAPS rather than collapsing into a script-driven
   sheet. Five destinations fit on a phone across two lines, which costs 30px
   and saves a JavaScript file this site would then have to keep patched. */
.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.topbar-inner{
  width:min(100% - 2 * var(--gutter), var(--shell));margin-inline:auto;
  display:flex;align-items:center;gap:var(--s4);
  min-height:62px;flex-wrap:wrap;padding-block:var(--s2);
}
.brand{
  display:inline-flex;align-items:center;gap:var(--s3);
  font-weight:680;letter-spacing:-.028em;font-size:var(--t-lg);color:var(--ink);
}
.brand:hover{text-decoration:none}
.brand svg{flex:none;display:block}
.brand b{font-weight:680}
.brand .mark-amber{color:var(--amber-bright)}

.topnav{display:flex;flex-wrap:wrap;gap:2px;margin-inline-start:auto;align-items:center}
.topnav a{
  padding:7px var(--s3);border-radius:var(--radius-sm);
  color:var(--ink-2);font-weight:520;font-size:var(--t-sm);
  transition:background .12s ease,color .12s ease;
}
.topnav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.topnav a.on{background:rgba(var(--accent-rgb), .10);color:var(--accent);font-weight:620}
.topnav a.out::after{
  content:"";width:6px;height:6px;flex:none;display:inline-block;
  margin-inline-start:6px;vertical-align:1px;
  border-top:1.4px solid currentColor;border-inline-end:1.4px solid currentColor;
  transform:rotate(45deg);opacity:.6;
}
.topnav .cta{
  background:var(--accent);color:var(--accent-ink);font-weight:620;
  padding:7px var(--s4);
}
.topnav .cta:hover{background:var(--accent-deep);color:var(--accent-ink);text-decoration:none}

/* ------------------------------------------------------------------ layout
   Bands, not one column. A band is a full-width stripe; .shell inside it
   holds the grid. Text sits in grid columns, so no paragraph has to be
   capped in `ch` to keep a sane line and no column sits in half a screen. */

main{display:block}

.band{padding-block:var(--s9)}
.band-tight{padding-block:var(--s8)}
.band-2{background:var(--surface)}
.band-ink{background:var(--band);color:#eef3fb}
.band-ink h1,.band-ink h2,.band-ink h3{color:#ffffff}
.band-ink .muted,.band-ink .small,.band-ink .lead{color:#c3cfe0}
.band-ink a:not(.btn){color:#a9c9fb}
/* `strong` is pinned to --ink, which IS the dark band's background. Measured
   at 1:1 - navy on navy, eight lines of it, invisible. Restated here rather
   than weakened at source, because on a light ground --ink is the right
   answer. This is the fault class that has shipped on this estate before. */
.band-ink strong{color:#ffffff}
.band-ink code{background:rgba(255,255,255,.13);color:#eef3fb}
.band-line{border-top:1px solid var(--line)}

/* A band's heading and its introduction, SIDE BY SIDE rather than one narrow
   column in the middle of a wide screen. Two grid columns fill the shell and
   each line still lands around 140 characters, which is the house measure.
   There is no max-width in `ch` anywhere in this file, deliberately. */
.band-head{
  display:grid;gap:var(--s5) var(--s8);align-items:start;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  margin-bottom:var(--s7);
}
.band-head h2{margin-bottom:var(--s4)}
.band-head > div > :last-child,.band-head p:last-child{margin-bottom:0}
.band-head.single{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){
  .band-head{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
}

.eyebrow{
  display:inline-block;margin-bottom:var(--s3);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--amber);
}
.band-ink .eyebrow{color:var(--amber-bright)}

/* Grids. `auto-fit` with a floor, so a band fills whatever width it is given
   and never leaves a lane empty. */
.grid{display:grid;gap:var(--s5)}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.gap-lg{gap:var(--s6)}

/* ------------------------------------------------------------------- hero */

.hero{
  padding-block:var(--s9) var(--s8);
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(var(--accent-rgb), .09) 0%, rgba(var(--accent-rgb), 0) 60%),
    radial-gradient(90% 80% at 100% 10%, rgba(var(--amber-rgb), .07) 0%, rgba(var(--amber-rgb), 0) 55%);
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;gap:var(--s8);align-items:start;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
}
.hero h1{font-size:clamp(34px, 4.4vw, var(--t-4xl));margin-bottom:var(--s5)}
.hero .lead{font-size:clamp(18px, 1.35vw, 21px);margin-bottom:var(--s6)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-bottom:var(--s5)}

.hero-facts{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,195px),1fr));
  margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line);
}
.hero-fact strong{display:block;font-size:var(--t-sm);margin-bottom:2px}
.hero-fact span{font-size:var(--t-sm);color:var(--ink-2)}

/* --------------------------------------------------------------- controls */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:11px var(--s5);font:inherit;font-weight:600;font-size:var(--t-sm);
  line-height:1.25;border:1px solid transparent;border-radius:var(--radius-sm);
  background:var(--accent);color:var(--accent-ink);cursor:pointer;
  transition:background .12s ease,box-shadow .12s ease;
}
.btn:hover{background:var(--accent-deep);color:var(--accent-ink);text-decoration:none}
.btn.ghost{
  background:var(--surface);color:var(--ink);border-color:var(--line-2);
}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.band-ink .btn.ghost{background:transparent;color:#ffffff;border-color:rgba(255,255,255,.45)}
.band-ink .btn.ghost:hover{background:rgba(255,255,255,.10);color:#ffffff}
.btn.lg{padding:14px var(--s6);font-size:var(--t-md)}
.btn.block{width:100%}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-xs);font-weight:650;padding:4px 11px;
  border-radius:var(--radius-pill);
  background:rgba(var(--accent-rgb), .10);color:var(--accent);
  letter-spacing:.01em;white-space:nowrap;
}
.tag.amber{background:rgba(var(--amber-rgb), .13);color:var(--amber)}
.tag.plain{background:var(--surface-2);color:var(--ink-2)}
.band-ink .tag{background:rgba(255,255,255,.13);color:#ffffff}

/* ------------------------------------------------------------------ cards */

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s6);box-shadow:var(--shadow);
}
.band-2 .card{background:var(--bg)}
.band-ink .card{
  background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16);
  box-shadow:none;color:#eef3fb;
}
.card h3{margin-bottom:var(--s3)}
.card > :last-child{margin-bottom:0}
.card-flush{padding:0;overflow:hidden}

.card-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius-sm);
  background:rgba(var(--accent-rgb), .11);color:var(--accent);
  margin-bottom:var(--s4);
}
.card-mark.amber{background:rgba(var(--amber-rgb), .14);color:var(--amber)}
/* A step number inside the mark. `strong` would otherwise pull it back to
   --ink and lose the accent it is drawn in. */
.card-mark strong{color:inherit;font-weight:700;font-size:var(--t-lg);line-height:1}
.band-ink .card-mark{background:rgba(255,255,255,.14);color:#ffffff}

/* A numbered argument. The number is the only decoration on the page. */
.arg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5);align-items:start}
.arg-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;border-radius:var(--radius-pill);
  background:rgba(var(--accent-rgb), .11);color:var(--accent);
  font-weight:700;font-size:var(--t-lg);letter-spacing:-.02em;
}
.arg h3{margin-bottom:var(--s3)}

/* --------------------------------------------------------------- the list
   A ticked list is not prose: each line is its own short item. It is never
   width-capped and it fills its column. */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3)}
.ticks li{
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s3);
  margin:0;align-items:start;
}
.ticks li::before{
  content:"";width:18px;height:18px;margin-top:3px;border-radius:50%;
  background:rgba(var(--accent-rgb), .12);
  /* The tick itself, drawn in the accent, so the shape survives any theme. */
  background-image:linear-gradient(transparent,transparent);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb), .25);
  position:relative;
}
.ticks li > span.t{display:block}
.ticks.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));column-gap:var(--s6)}

/* The tick glyph, as a background image so no markup carries it. */
.ticks li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.6 9 10 3.2' fill='none' stroke='%231f5fd0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
@media (prefers-color-scheme:dark){
  .ticks li::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.6 9 10 3.2' fill='none' stroke='%2374a8f8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* A LINE THAT SAYS "NO" MUST NOT CARRY A TICK. On the free licence card,
   "No connectors, no API, no webhooks" was rendering beside the same accent
   tick as every included feature, so the glyph and the colour both said the
   opposite of the words. A dash, in the muted ink, with no accent anywhere. */
.ticks li.no{color:var(--ink-2)}
.ticks li.no::before{
  background-color:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%235d6b83' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  .ticks li.no::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%238d9cb2' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

/* A dark band in LIGHT mode is the case the media query above does not cover,
   and it is the one that bites: the accent tick is drawn for a white ground.
   Stated for both schemes, because .band-ink is dark in either. */
.band-ink .ticks li::before{
  background-color:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.6 9 10 3.2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ table */

.tablewrap{
  overflow-x:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
th,td{text-align:start;padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface-2);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr.ours{background:rgba(var(--accent-rgb), .055)}
tbody tr.ours td{font-weight:520}
td strong,th strong{font-weight:650}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------------------------------------------------------- pricing */

.prices{
  display:grid;gap:var(--s5);align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.price{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--s6);box-shadow:var(--shadow);
}
.price.pick{
  border-color:var(--accent);
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(var(--accent-rgb), .35);
}
.price-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.price h3{margin:0}
.price-fig{
  display:flex;align-items:baseline;gap:6px;margin-bottom:var(--s2);
  font-size:var(--t-3xl);font-weight:700;letter-spacing:-.035em;line-height:1;
}
.price-fig span{font-size:var(--t-sm);font-weight:560;color:var(--ink-2);letter-spacing:0}
.price-who{color:var(--ink-2);font-size:var(--t-sm);margin-bottom:var(--s5);min-height:3em}
.price .ticks{margin-bottom:var(--s6)}
.price .btn{margin-top:auto}

/* ------------------------------------------------------------------- misc */

.strip{
  display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
.strip div strong{display:block;margin-bottom:var(--s1)}

/* Notes go in PAIRS, in a grid, and that is not decoration. A single note
   spanning the shell measured 318 characters a line at a 2560px viewport,
   which is a paragraph that has escaped its column. Two side by side fill the
   same width at about 150 characters each. The fix is a second column, never
   a max-width in `ch`. */
.notes{
  display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));
}

.note{
  border-inline-start:3px solid var(--amber-bright);
  background:rgba(var(--amber-rgb), .07);
  padding:var(--s4) var(--s5);border-radius:0 var(--radius) var(--radius) 0;
  font-size:var(--t-sm);color:var(--ink-2);
}
.note strong{color:var(--ink)}

.spec{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.spec > div{padding:var(--s4) 0;border-bottom:1px solid var(--line);padding-inline-end:var(--s6)}
.spec dt{font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s1)}
.spec dd{margin:0}

.cta-band{text-align:start}
.cta-grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:center}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ----------------------------------------------------------------- footer */

.foot{background:var(--surface);border-top:1px solid var(--line);padding-block:var(--s7) var(--s6)}
.foot-grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.foot h4{font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s3);font-weight:700}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
.foot li{margin:0;font-size:var(--t-sm)}
.foot-strap{font-size:var(--t-sm);color:var(--ink-2)}
.foot-base{
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
  font-size:var(--t-xs);color:var(--ink-3);
}

/* ------------------------------------------------------------ the mock-up
   A plain drawing of a board row, built from the same tokens, so the hero
   shows the product rather than a stock photograph of a laptop. */
.mock{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;
}
.mock-bar{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s5);background:var(--surface-2);
  border-bottom:1px solid var(--line);font-size:var(--t-xs);color:var(--ink-3);
}
.mock-bar .dot{width:9px;height:9px;border-radius:50%;background:var(--line-2);flex:none}
.mock-bar code{background:transparent;padding:0;color:var(--ink-2);font-size:var(--t-xs)}
.mock-body{padding:var(--s5)}
.mock-row{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--line);align-items:start;
}
.mock-row:last-child{border-bottom:0;padding-bottom:0}
.mock-row:first-child{padding-top:0}
.mock-vote{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:6px 0;background:var(--surface);
}
.mock-vote.voted{border-color:var(--accent);background:rgba(var(--accent-rgb), .10);color:var(--accent)}
.mock-vote b{font-size:var(--t-md);font-weight:680;line-height:1}
.mock-vote i{font-size:10px;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.mock-vote.voted i{color:var(--accent)}
.mock-title{font-weight:600;margin-bottom:var(--s2);display:block}
.mock-meta{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;font-size:var(--t-xs);color:var(--ink-3)}
.mock-pill{
  font-size:var(--t-xs);font-weight:650;padding:2px 9px;border-radius:var(--radius-pill);
  background:rgba(var(--accent-rgb), .11);color:var(--accent);
}
.mock-pill.amber{background:rgba(var(--amber-rgb), .14);color:var(--amber)}
.mock-pill.plain{background:var(--surface-2);color:var(--ink-2)}
.mock-ctx{
  margin-top:var(--s2);padding:var(--s2) var(--s3);
  border:1px dashed rgba(var(--accent-rgb), .40);border-radius:var(--radius-sm);
  background:rgba(var(--accent-rgb), .05);
  font-size:var(--t-xs);color:var(--ink-2);
}

/* ----------------------------------------------------------- narrow screens
   Checked at 375px in a browser, not reasoned about. */

@media (max-width:1080px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .band{padding-block:var(--s8)}
}

@media (max-width:720px){
  :root{--t-3xl:34px; --t-2xl:27px; --t-xl:21px}
  .band,.hero{padding-block:var(--s7)}
  .band-head{margin-bottom:var(--s6)}
  .card,.price{padding:var(--s5)}
  /* A WRAPPED NAV THAT IS ALSO STICKY EATS A THIRD OF A PHONE SCREEN.
     Measured at 375px: brand, two rows of links and the call to action came
     to about 330px of a 812px viewport, parked over the content for the whole
     page. Seven destinations in two rows is the right answer; pinning them
     there is not, so the bar scrolls away like everything else. */
  .topbar{position:static}
  .topbar-inner{min-height:52px;gap:var(--s2);padding-block:var(--s2)}
  .topnav{margin-inline-start:0;width:100%;gap:1px}
  .topnav a{padding:5px var(--s2);font-size:var(--t-xs)}
  .topnav .cta{padding:6px var(--s3)}
  .brand{font-size:var(--t-md)}
  .arg{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  th,td{padding:var(--s3) var(--s4)}
  .foot-base{flex-direction:column;gap:var(--s2)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

@media print{
  .topbar,.hero{position:static}
  body{background:#fff}
}