/* bands.css — the marketing site's stylesheet (2026-09-14 redesign).
   Used by the six public pages: home, services, about, beta, faqs, security.
   The tool pages (annotate, account, signin, forgot, reset) and the demo keep
   site.css — their forms and results panels are built on it, and the tool
   is deliberately a different-looking place (SPEC §10, 2026-09-14: logged
   in, you are in the tool; logged out, you are on the site).

   The system, in one paragraph: the page is sand; content sits in
   full-width coloured bands with undulating seams between them; headlines
   are Public Sans 800; the palette comes from the hero scene (sand, sea,
   the gator's yellow) plus Territorial's coral-and-royal-blue and two pale
   tile colours. Every text/background pair here was checked against WCAG
   AA when it was chosen; the two exceptions are noted where they occur.
   Design decisions of record: a_PROJECT Z/SPEC.md §10 row of 2026-09-14;
   the mocks in scripts/gen/ are what this file was built from. */

/* ---------- tokens ---------- */
:root {
  --sand:   #f6f1e7;   /* the page */
  --ink:    #2b2118;   /* the gator's outline brown, as body text */
  --sea:    #157a75;   /* the scene's water, deepened so white text passes (5.2:1) */
  --coral:  #ff7b69;   /* Territorial's coral, sampled */
  --royal:  #0034bb;   /* Territorial's blue, sampled. 3.8:1 on coral — headline-scale only */
  --yellow: #ffe600;   /* bright, no orange in it; the gator head and the Why heading */
  --navy:   #1d3557;   /* on yellow, 9.8:1 */
  --lilac:  #d9c8f0;   /* Lite tile; with --purple 7.2:1 */
  --purple: #4a1f8c;
  --peach:  #ffc9a8;   /* Pro tile; with --navy 8.3:1 */
  --palm:   #a9dcc1;   /* the Beta band; with --ink 10.3:1 */
  --red:    #d62828;   /* the vs-AI body; on sand 4.4:1, a hair under — accepted 2026-09-14 */
  --orange: #ff7300;   /* the About copy over the clouds: chosen to pop on both blue sky and white cloud, not for AA (2.6:1 on white) — Stephen, 2026-09-16 */
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "Public Sans", "Helvetica Neue", Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sand); color: var(--ink); font-family: var(--sans); line-height: 1.5; }
img, video { max-width: 100%; }

.skip { position: absolute; left: -999px; top: 0; background: var(--yellow); color: var(--navy); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }

/* ---------- header ----------
   The nav sits right of the gator icon (Bushell-style), leaving the right
   half empty so the home page's scene can run behind it. On the home page
   it is absolutely positioned over the scene; elsewhere it is a plain row
   on sand. */
.nav {
  display: flex; align-items: center; gap: 1.5rem; padding: 1.1rem 2rem;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
}
.nav .home img { height: 2.1rem; width: auto; display: block; margin-right: .5rem; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { border-bottom: 2px solid var(--coral); padding-bottom: 2px; }
/* Beta was a pill; now a plain link like the others (Stephen, 2026-09-14) */
/* the phone menu: a native <details>, no script, keyboard- and screen-reader-ready */
.nav .menu { display: none; }
/* the handle is a sand pill in the panel's own style: on the home page it sits over the scene, where
   plain ink text got lost in the deck (2026-09-16), and a pill survives whatever art is under it */
.nav .menu summary { list-style: none; cursor: pointer; font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; padding: .4rem .9rem; background: var(--sand); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; }
.nav .menu summary::-webkit-details-marker { display: none; }
@media (max-width: 800px) {
  .nav { padding: .9rem 1.25rem; gap: 1rem; flex-wrap: wrap; }
  .nav > a:not(.beta):not(.home) { display: none; }
  .nav .menu { display: block; margin-left: auto; position: relative; }
  .nav .menu > div {
    position: absolute; right: 0; top: 2.4rem; z-index: 20;
    background: var(--sand); border: 2px solid var(--ink); border-radius: .75rem;
    display: grid; gap: .6rem; padding: 1rem 1.25rem; min-width: 10rem;
  }
}

/* ---------- home page hero: the scene as one shape, with the nav in it ----------
   The scene is a plain rectangle cut by an SVG clipPath in objectBoundingBox
   units, so the shape is numbers rather than art and recrops per width.
   The H1 sits on sand under the shape's curve. */
.hero { position: relative; min-height: 640px; overflow: hidden; }
.hero .scene {
  position: absolute; inset: 0;
  background: url("/images/hero-scene.jpg") right top / cover no-repeat;
  clip-path: url(#blob);
}
.hero .nav { position: absolute; top: 0; left: 0; right: 0; }
.hero .copy { position: absolute; left: 3%; top: 250px; max-width: 40%; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; margin: 0 0 1rem; }
.hero .sub { font-size: 1.15rem; line-height: 1.5; margin: 0 0 1.5rem; }
@media (max-width: 800px) {
  .hero { min-height: 0; }
  .hero .scene { position: relative; height: 62vw; clip-path: url(#blob-phone); }
  .hero .copy { position: static; max-width: none; padding: 1.5rem 1.25rem 2.5rem; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--yellow); color: var(--navy);
  text-decoration: none; padding: .8rem 1.4rem; border-radius: 999px;
  font-family: var(--mono); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}
.btn-coral { background: var(--coral); color: var(--royal); }
/* the hero's pair: no fill, so two buttons don't shout over the scene (Stephen, 2026-09-16) */
.btn-outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: calc(.8rem - 2px) calc(1.4rem - 2px); }
.btn-outline + .btn-outline { margin-left: .5rem; }

/* ---------- bands ----------
   Each band draws its own undulating top edge (.lake) in its own colour,
   over the bottom of whatever is above it, so seams are colour into colour
   with nothing between. Three long, low swells; a lake surface, not waves. */
/* less on top than below: the wave adds ~4rem of the band's colour above
   the box, so equal padding reads as content sitting low */
.band { position: relative; padding: 3rem 6% 5rem; }
.band .lake { position: absolute; top: -4.2rem; left: 0; width: 100%; height: 4.25rem; display: block; z-index: 1; }
.band + .band, .page-head + .band { margin-top: 0; }
.band h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; margin: 0; }
.band p { font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.5; margin: 0; }
.band p + p { margin-top: 1rem; }
.band a { color: inherit; }
/* two-column bands: heading one side, copy the other; .flip swaps them */
.band-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.band-2.flip h2 { order: 2; } .band-2.flip > div, .band-2.flip > p { order: 1; }
@media (max-width: 800px) {
  .band { padding: 3rem 1.25rem 3.5rem; }
  .band-2 { grid-template-columns: 1fr; gap: 1.25rem; }
  .band-2.flip h2 { order: 1; } .band-2.flip > div, .band-2.flip > p { order: 2; }
}
.band-sea    { background: var(--sea);    color: #fff; }          .band-sea .lake path    { fill: var(--sea); }
.band-coral  { background: var(--coral);  color: var(--royal); }  .band-coral .lake path  { fill: var(--coral); }
.band-yellow { background: var(--yellow); color: var(--navy); }   .band-yellow .lake path { fill: var(--yellow); }
.band-lilac  { background: var(--lilac);  color: var(--purple); } .band-lilac .lake path  { fill: var(--lilac); }
.band-palm   { background: var(--palm);   color: var(--ink); }    .band-palm .lake path   { fill: var(--palm); }
.band-coral .btn { background: var(--yellow); color: var(--royal); margin-top: 1rem; }
.band-palm .btn { margin-top: 1.5rem; }
/* a band's points as a list, each with the red poodle for a bullet (the
   vs-AI band's bullet, at body scale) */
.band .points { list-style: none; padding: 0; margin: 0; }
.band .points li {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.5; padding-left: 2.4em; min-height: 1.9em;
  background: url("/images/poodle-red.png") left .1em / auto 1.7em no-repeat;
}
.band .points li + li { margin-top: 1rem; }
/* a band's stacked offers: an h3 over each paragraph (the beta page, 2026-09-16) */
.band .offers h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 800; line-height: 1.2; margin: 0 0 .35rem; }
.band .offers p + h3 { margin-top: 1.5rem; }

/* ---------- home: the Why band (coral), the gator head and the poodle ----------
   The copy is one all-caps paragraph at headline scale; the head rises out
   of the seam below, jaws open, with the poodle in the air above. The band
   paints above the one below it so the neck reaches into the water band.
   .neck is a full-width box the exact size and place of the water band's
   coral seam (.band-water .lake: top -1px, 4.25rem tall), clipped by that
   seam's own path (#neck-clip), so the neck's bottom contour is the wave —
   no coral under it where the wave dips, no yellow over the water where it
   rises.

   THE HEAD'S SIZE HAS TWO MASTERS, AND THAT WAS THE BUG (fixed 2026-09-27
   after eight passes that each tuned one constant at one window width).
   Sized by width alone (8.8% of the band), the head grows as the window
   widens — while the band SHRINKS, because the copy wraps to fewer lines.
   Measured live: 1440px wide, band 431 / head 301, fits; 1920, 382 / 402,
   fits by 47px; 2560, 320 / 537, the jaws 150px INTO THE HERO; 3200,
   320 / 672, taller than his clip box, so the snout was cut off flat.
   Narrow the window and it "fixes itself" — the two curves cross back.

   So the head keeps its width-based size as the preference and gets a
   CEILING that follows the band: never taller than 80% of the band-plus-seam,
   whatever the window does. Three boxes, each with one job:
     .neck      the WINDOW — exactly the band's box plus the 4.25rem the neck
                hangs below it into the water seam. overflow:hidden, so nothing
                can paint above the band ever again (structural, not arithmetic).
                container-type:size, so the head can measure it (cqh).
     .neck-box  the CLIP box — 40rem tall, bottom-anchored in the window: the
                same page geometry the old .neck had, so #neck-clip (generated
                for a 40rem box, parts.NECK_CLIP) is untouched and still meets
                .band-water .lake exactly. Do not change its height without
                regenerating the clip.
     .head      height: min(width-based, 80cqh, 40rem). Unchanged at 1440;
                shrinks only where he used to overflow. 80% leaves the top fifth
                of the band for the poodle. 40rem keeps him inside the clip box.
   Sized by HEIGHT with width:auto, because an <img> with a set width and a
   max-height squashes; with height set and width auto the ratio holds.
   21.113cqw = 8.8cqw × the image's 1166/486; 57.58cqw = 24cqw × the same. */
.band-why { z-index: 3; padding-top: 6rem; padding-bottom: 2.5rem; overflow: visible; }
.band-why .shout { position: relative; z-index: 1; margin-left: 6%; max-width: 54%; }
.band-why .shout p {
  font-size: clamp(1.6rem, 3.2vw, 3rem); font-weight: 800; line-height: 1.28;
  letter-spacing: -.01em; text-transform: uppercase; max-width: 40ch; margin: 0;
}
.band-why .shout .white { color: #fff; }   /* the second sentence; 2.6:1 on coral at headline scale, accepted 2026-09-15 */
.band-why .neck { position: absolute; left: 0; width: 100%; top: 0; bottom: calc(1px - 4.25rem); overflow: hidden; container-type: size; pointer-events: none; }
.band-why .neck-box { position: absolute; left: 0; width: 100%; bottom: 0; height: 40rem; clip-path: url(#neck-clip); }
.band-why .head { position: absolute; right: 13%; bottom: 0; width: auto; height: min(21.113cqw, 80cqh, 40rem); display: block; }
.band-why .poodle { position: absolute; right: 12%; top: 9%; height: 16%; width: auto; }
@media (max-width: 800px) {
  .band-why .shout { margin-left: 0; max-width: none; }
  .band-why .shout { padding-right: 22%; }   /* the last lines wrap clear of the head */
  .band-why .head { height: min(57.58cqw, 80cqh, 40rem); right: 2%; }  /* 24% wide; 15% showed only the jaw tips above the wave (2026-09-16) */
  .band-why .poodle { height: 12.6%; right: 6%; top: 6%; }  /* 9% × 1.4 */
}

/* ---------- home: the Lite/Pro tiles over the water ----------
   A muted looping clip behind two amoeba tiles (SVG clip paths). The clip
   is the Hausfrau services-page recipe: muted autoplay loop playsinline.
   Anyone with "reduce motion" on gets the sea colour instead. */
.band-water { position: relative; overflow: hidden; color: var(--ink); min-height: 40rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.band-water video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.band-water .lake { top: -1px; }
.band-water .lake path { fill: var(--coral); }   /* the Why band's coral runs down into the water */
.tiers { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 62rem; width: 100%; margin: 0 auto; }
.tier { padding: 5rem 5.5rem; min-height: 32rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.tier h3 { margin: 0 0 .5rem; font-size: 1.4rem; font-weight: 800; }
.tier p { margin: 0; font-size: 1.1rem; line-height: 1.6; }
.tier h3, .tier p { max-width: 62%; }
.tier-lite { background: var(--lilac); color: var(--purple); clip-path: url(#amoeba-a); }
.tier-pro  { background: var(--peach); color: var(--navy);   clip-path: url(#amoeba-b); }
.tier-lite h3, .tier-lite p { transform: translate(-6%, -6%); max-width: 58%; }  /* the three-armed shape's centre */
.tier-pro  h3, .tier-pro  p { transform: translate(0, -4%); }                      /* the bean's centre sits a little high */
.band-water .band-link { position: relative; z-index: 1; display: block; margin: 2rem auto 0; width: max-content; color: #fff; text-decoration: none; font-weight: 800; font-size: 3rem; line-height: 1; transition: transform .15s ease; }
.band-water .band-link:hover { transform: translateX(6px); }
@media (max-width: 800px) { .tiers { grid-template-columns: 1fr; } .tier { padding: 3.5rem 3rem; min-height: 24rem; } }
@media (prefers-reduced-motion: reduce) { .band-water video { display: none; } .band-water { background: var(--sea); } }

/* ---------- home: the vs-AI band ----------
   Two cells: the subhead on yellow, the points on cream, with an undulating
   vertical seam. Each animates once when the band scrolls into view (a
   script adds .in-view); "reduce motion" gets the settled state. */
.band-vs { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.band-vs .cell { padding: 4rem 3rem; overflow: hidden; }
.band-vs .cell-head { background: var(--yellow); color: var(--navy); display: flex; align-items: center; }
.band-vs .cell-body { background: var(--sand); color: var(--red); position: relative; padding-left: 5rem; }
.band-vs h2 { font-size: clamp(1.84rem, 3.68vw, 3.31rem); }
.band-vs .seam { position: absolute; top: 0; left: -1px; height: 100%; width: 3.5rem; display: block; z-index: 0; }
.band-vs ul { list-style: none; padding: 0; margin: 0; position: relative; z-index: 1; }
.band-vs li {
  font-size: 1.5rem; line-height: 1.45; margin-bottom: 1.1rem; padding-left: 2.6em; min-height: 2em;
  background: url("/images/poodle-red.png") left top / auto 1.9em no-repeat;
}
.band-vs h2 { transform: translateY(-140%); }
.band-vs ul { transform: translateX(45%) scale(.6); opacity: 0; }
@keyframes drop-bounce {
  0% { transform: translateY(-140%); } 50% { transform: translateY(0); } 66% { transform: translateY(-16%); }
  80% { transform: translateY(0); } 90% { transform: translateY(-5%); } 100% { transform: translateY(0); }
}
@keyframes zoom-from-right {
  from { transform: translateX(45%) scale(.6); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; }
}
.band-vs.in-view h2 { animation: drop-bounce 1.2s cubic-bezier(.3,.7,.4,1) forwards; }
.band-vs.in-view ul { animation: zoom-from-right .8s cubic-bezier(.2,.8,.3,1) .25s forwards; }
@media (max-width: 800px) {
  .band-vs { grid-template-columns: 1fr; }
  .band-vs .cell { padding: 2.5rem 1.25rem; }
  .band-vs .cell-body { padding-left: 1.25rem; }
  .band-vs .seam { display: none; }
}
@media (prefers-reduced-motion: reduce) { .band-vs h2, .band-vs ul { transform: none; opacity: 1; animation: none; } }

/* ---------- inner pages: the gator at the top, then bands ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: flex-end; gap: 2rem; padding: 1rem 3% 0; }
.page-head img { width: min(34%, 26rem); height: auto; display: block; position: relative; z-index: 2; }
.page-head + .band { margin-top: 3.5rem; }
@media (max-width: 800px) { .page-head img { width: 70%; margin-left: auto; } }
/* the scene pages (services, free trial; about until its clouds arrive): the
   gator in a place, bleeding to the top of the window with the header over
   its sky, as on the home page. Whole image at desktop widths so nothing
   depends on the window; the first band's wave rolls over its bottom edge
   (the bands sit in <main> right after it). On the phone the strip is a
   crop centred on the character (--focus, set per page), top-anchored so
   the added sky stays under the header. */
.scene-top { position: relative; }
.scene-top .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.page-scene { line-height: 0; }
.page-scene img { width: 100%; height: auto; display: block; }
@media (max-width: 800px) {
  .page-scene { height: 62vw; overflow: hidden; }
  .page-scene img { height: 100%; object-fit: cover; object-position: var(--focus, 70%) top; }
}

/* ---------- About: clouds drifting behind the copy ----------
   A muted Pexels clip (licence in scripts/gen/band-art/clouds-CREDIT.txt) as
   the band's background. No wave here: the seam with the scene above is a
   straight lilac rule (Stephen chose it over a wavy one, 2026-09-16), so the
   clip simply fills the band's box. Bright orange copy, one all-caps
   paragraph, centred, no H2: picked to read on both the blue and the white
   of the clouds. The pill is an orange outline. "Reduce motion" gets the
   poster frame. */
.band-clouds { color: var(--orange); padding-top: 5rem; padding-bottom: 5rem; text-align: center; border-top: 5px solid var(--lilac); }
.band-clouds p {
  font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 800; line-height: 1.35; letter-spacing: .01em;
  text-transform: uppercase; max-width: 46ch; margin: 0 auto;
}
.band-clouds .btn { background: transparent; color: var(--orange); border: 2px solid var(--orange); padding: calc(.8rem - 2px) calc(1.4rem - 2px); }
.band-clouds .sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: 0; }
.band-clouds > div { position: relative; z-index: 1; }
.band-clouds .btn { margin-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) {
  .band-clouds .sky { display: none; }
  .band-clouds { background: url("/images/clouds-sky-poster.jpg") center / cover no-repeat; }
}

/* the drawers on FAQs and Security: native <details>, a plus that turns to a minus */
.qa { border-top: 2px solid currentColor; padding: 1rem 0; }
.qa:last-of-type { border-bottom: 2px solid currentColor; }
.qa summary { cursor: pointer; list-style: none; font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.45rem); display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 1.4em; line-height: 1; flex: none; }
.qa[open] summary::after { content: "\2212"; }
.qa > div { font-size: 1.1rem; line-height: 1.6; padding-top: .75rem; max-width: 60ch; }
.qa p { margin: 0; font-size: 1.1rem; }            /* a multi-paragraph answer reads as body copy */
.qa p + p { margin-top: .75rem; }
.facts { margin: 0; padding-left: 1.2em; font-size: 1.1rem; line-height: 1.6; }
.facts li { margin-bottom: .5rem; }
.band .foot { margin-top: 1.5rem; font-size: 1.1rem; }
.band .lede { margin-bottom: 1.5rem; }

/* ---------- the ask, and the footer ---------- */
.ask { padding: 5rem 6%; text-align: center; }
.colophon { padding: 2.5rem 6%; font-family: var(--mono); font-size: .78rem; letter-spacing: .03em; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.colophon a { color: var(--ink); text-decoration: none; }
.colophon nav { display: flex; gap: 1.5rem; }