/* Shared by index.html and about.html.
   It was inline while this was one page -- one request, nothing to cache-bust.
   With a second page that stops being the better trade: a copy in each file is a
   copy that drifts, and the second page gets it from cache anyway. */
/* The app's own palette, so the site and the product look like one thing.
       --ink and --green come from public/style.css; --splash is the solid green at
       the bottom of the designer's splash artwork, which is also the app's launch
       screen, so arriving at the app from here is a continuous colour. */
    :root {
      --splash:  #264f3a;
      --green:   #2e7d32;
      --green-d: #1b5e20;
      --ink:     #1b2b26;
      --slate:   #4a5a54;
      --rule:    #dfe4e1;
      --paper:   #fbfcfb;
      --wash:    #eef3ef;   /* the values surface: a green-grey, not a grey */
      /* 1240, not 1040. The cap exists because a line of text wider than ~75
         characters is hard to read -- the eye loses the return sweep -- but 1040 left
         375px of empty background on each side of a 1790px screen. The individual
         text blocks keep their own ch-based limits, so widening the container gives
         the LAYOUT room without ever giving a paragraph an unreadable measure. */
      --wrap:    1240px;
    }

    /* LIGHT ONLY, to match the app, which has no dark theme. A marketing page that
       flipped to dark while the product it links to stayed light would read as a bug. */
    * { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      color: var(--ink);
      background: #fff;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
    a { color: var(--green-d); }

    /* ---------- header ---------- */
    header {
      border-bottom: 1px solid var(--rule);
      background: #fff;
      position: sticky; top: 0; z-index: 10;
    }
    /* FULL-BLEED, unlike everything else on the page. The bar carries the mark and
       the one button, not reading material, so the ~75-character line-length argument
       that caps .wrap at 1240px does not apply to it -- and pulling the logo 275px in
       from the edge of a wide screen just looked like a mistake. Content keeps its
       measure; chrome spans the window. */
    .bar {
      display: flex; align-items: center; gap: 12px; height: 64px;
      max-width: none; padding: 0 24px;
    }
    @media (min-width: 1080px) { .bar { padding: 0 32px; } }
    .mark { width: 34px; height: 34px; border-radius: 9px; display: block; }
    .word { font-weight: 650; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; }
    /* The brand is a link home. `.nav` takes the auto margin that used to sit on the
       button, so the two right-hand items stay together. */
    .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
    .nav {
      margin-left: auto;
      color: var(--ink); text-decoration: none; font-weight: 600;
      padding: 12px 6px;
    }
    .nav:hover { color: var(--green-d); }
    .nav[aria-current="page"] { color: var(--green); }
    .bar .btn { margin-left: 16px; }

    .btn {
      display: inline-block;
      background: var(--green);
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      padding: 10px 18px;
      border-radius: 8px;
      border: 1px solid var(--green-d);
      white-space: nowrap;
    }
    .btn:hover { background: var(--green-d); }
    .btn-lg { font-size: 1.05rem; padding: 14px 26px; }

    /* ---------- hero ---------- */
    /* `display: flow-root` is load-bearing. The hero has no bottom padding, so the
       phone's negative bottom margin would COLLAPSE out of this element and pull the
       next section up instead of shrinking the green band -- measured, and the phone
       sat flush with the boundary rather than crossing it. A block formatting context
       keeps the margin inside, so the green ends 96px above the phone's bottom edge
       and the screenshot genuinely overhangs onto the white. */
    .hero {
      /* The photograph, behind the same scrim the about band uses -- see .band for why
         white type never goes on a raw photo. --splash stays as the colour under it so
         a failed or slow image leaves the old green hero, not unreadable white on white.
         The scrim is HEAVIER here than on the about band: this band carries a lede, a
         white button and the fineprint, not one headline. */
      background: var(--splash) url("img/river.jpg") center / cover no-repeat;
      color: #fff;
      padding: 72px 0 0; text-align: center;
      display: flow-root;
      position: relative;
    }
    .hero::before {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg,
                  rgba(14, 30, 22, 0.60) 0%,
                  rgba(14, 30, 22, 0.82) 100%);
    }
    /* Above the scrim, or the whole hero is painted over. The phone lives in here too,
       so its overhang still sits on top of the section below. */
    .hero .wrap { position: relative; }
    .hero h1 {
      text-shadow: 0 1px 18px rgba(0, 0, 0, 0.40);
      font-size: clamp(2rem, 5.2vw, 3.1rem);
      line-height: 1.12;
      letter-spacing: -0.02em;
      margin: 0 auto 18px;
      /* MEASURED at 1280px: 18ch breaks to three lines and orphans the last word;
         20ch is the narrowest that gives two. Phones are clamped by the viewport long
         before this, so it only affects wide screens. */
      max-width: 20ch;
      font-weight: 700;
    }
    /* WHERE, WHEN and HOW are the three questions the product answers, so they are set
       apart rather than merely capitalised in the source -- letter-spacing stops caps
       from looking cramped, and a slightly smaller size stops them from shouting over
       the rest of the line. */
    .q { font-size: 0.86em; letter-spacing: 0.04em; }
    /* Caps inside a HEADING, as opposed to .q in the hero. .q shrinks to 0.86em, which
       works at the hero's ~50px but at a 28px h2 the word visibly changes size and
       reads as a different typeface. Here the size is left alone and only the tracking
       is opened up, which is what caps need to sit comfortably in sentence case. */
    .caps { letter-spacing: 0.03em; }

    .hero p.lede {
      font-size: clamp(1.02rem, 2.1vw, 1.2rem);
      color: #d7e3db;
      max-width: 54ch;
      margin: 0 auto 30px;
    }
    /* The lede sits at #d7e3db so it reads as secondary to the headline. Bold alone
       would barely register against that; the emphasis goes to full white as well, or
       it is bold text nobody notices on a photograph. */
    .hero .lede strong { color: #fff; font-weight: 700; }

    .hero .btn { background: #fff; color: var(--splash); border-color: #fff; }
    .hero .btn:hover { background: #e9f0ec; }
    .fineprint { color: #bdd0c4; font-size: 0.88rem; margin: 14px 0 0; }

    /* The phone overlaps the section boundary, so the green band reads as being behind
       the screenshot rather than merely above it. The negative margin is paid back by
       padding-top on the section below. */
    .hero .shot-hero { margin: 46px auto -96px; }

    /* ---------- the phone frame ---------- */
    /* The screenshots are 560px wide for a 280px slot, so they stay sharp on a retina
       screen. The bezel is deliberately thin: a photoreal phone mock-up dates faster
       than the app inside it. */
    /* A DEVICE BEZEL, not a white card. The screenshots are phone captures and the
       dark frame says so at a glance -- it also separates them from the white page
       behind and from the green hero, which a pale 1px border did not.
       The colour is this palette's own near-black green rather than pure black, so it
       belongs to the brand; the inset hairline is the highlight a real bezel catches. */
    .phone {
      max-width: 280px;
      margin: 0 auto;
      background: #12241d;
      border-radius: 34px;
      padding: 8px;
      box-shadow: 0 18px 44px rgba(16, 38, 28, 0.28),
                  inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    }
    .phone img {
      display: block; width: 100%; height: auto;
      border-radius: 26px; background: #eceff1;
    }

    /* THE iOS STATUS BAR IS CLIPPED OFF. The clock, signal and battery are noise on a
       marketing page and they date a screenshot -- a visitor should see the app, not
       that it was captured at 12:52 on 86% battery.
       Done in CSS, not by cutting the files: the originals stay whole, and the amount
       is one number here rather than a re-crop of seven images. `sips --cropOffset`
       was tried first and does not anchor where its man page implies.
       118 of the source's 2000 rows. aspect-ratio reserves the CLIPPED box so nothing
       reflows as it loads, and object-position pins the bottom so only the top is lost. */
    .screen {
      display: block; overflow: hidden;
      border-radius: 26px;
      aspect-ratio: 924 / 1882;
    }
    .screen img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: 50% 100%;
      border-radius: 0;
    }

    /* A section whose title names TWO things shows two phones. Side by side only
       from 700px: on a 375px screen two phones share 335px and land at ~160px each,
       where the hatch table's fly names render about 5px tall. Stacked they stay
       readable, at the cost of a longer page -- the right trade on the screen this
       product is actually used on. */
    .pair { display: grid; gap: 18px; }
    .pair .phone { max-width: 272px; }
    @media (min-width: 700px) { .pair { grid-template-columns: 1fr 1fr; } }

    /* ---------- features ---------- */
    .features { padding: 140px 0 20px; }
    .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
      margin-bottom: 84px;
    }
    /* Alternating sides. On one-column layouts the image is forced back under its
       text by order:2, or every other block would read image-then-heading. */
    .row:nth-child(even) .copy { order: 2; }
    .row h2 {
      font-size: clamp(1.4rem, 3vw, 1.75rem);
      line-height: 1.2; letter-spacing: -0.015em;
      margin: 0 0 12px;
    }
    .row p { color: var(--slate); margin: 0 0 12px; }
    /* Fine print inside a section. Smaller and quieter than the body copy so it reads
       as a footnote to the claim above it rather than as another sentence of pitch --
       the wording is identical to the footer's, which is the point: one sentence of
       law, one wording, everywhere it appears. */
    .note { font-size: 0.86rem; margin-top: 18px; }

    .kicker {
      text-transform: uppercase; letter-spacing: 0.09em;
      font-size: 0.74rem; font-weight: 700; color: var(--green);
      margin: 0 0 8px;
    }

    /* ---------- also-in-there ---------- */
    .also { background: var(--paper); border-top: 1px solid var(--rule); padding: 56px 0; }
    .also h2 { font-size: 1.25rem; margin: 0 0 20px; }
    .also ul {
      list-style: none; margin: 0; padding: 0;
      display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 32px;
    }
    .also li { color: var(--slate); }
    .also b { color: var(--ink); display: block; font-weight: 650; }

    /* ---------- close ---------- */
    .close {
      background: var(--splash); color: #fff;
      text-align: center; padding: 78px 0;
    }
    .close h2 {
      font-size: clamp(1.5rem, 3.4vw, 2rem);
      margin: 0 0 24px; letter-spacing: -0.02em;
    }
    .close .btn { background: #fff; color: var(--splash); border-color: #fff; }
    .close .btn:hover { background: #e9f0ec; }

    footer { border-top: 1px solid var(--rule); background: var(--paper); padding: 30px 0 44px; }
    footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; }
    footer p { margin: 0; color: var(--slate); font-size: 0.88rem; }
    /* A thumb needs ~44px; this link rendered 17px tall, which is a miss waiting to
       happen on a phone. inline-block plus vertical padding grows the HIT AREA without
       moving the text, and the negative margin keeps the footer's own spacing. The
       CDFW link in the disclaimer is excluded, and that was MEASURED rather than
       assumed: inline-block stops "CDFW regulations" breaking across lines, which took
       the disclaimer from 3 rendered lines to 4. It stays ~17px and that is accepted --
       it sits mid-sentence and is a reference, not an action. */
    footer .wrap > p:not(.disclaimer) > a {
      display: inline-block; padding: 13px 4px; margin: -13px -4px;
    }
    .disclaimer {
      /* WORD FOR WORD the line on every regulation popup in the app. One sentence of
         law, in one wording, in both places -- a marketing paraphrase of a legal
         disclaimer is how the two drift apart. */
      border-top: 1px solid var(--rule);
      padding-top: 22px; margin-top: 22px;
      color: var(--slate); font-size: 0.9rem; max-width: 62ch;
    }

    /* ---------- phones ---------- */
    @media (max-width: 820px) {
      .hero { padding-top: 52px; }
      .hero .shot-hero { margin: 36px auto -72px; }
      .features { padding-top: 110px; }
      .row { grid-template-columns: 1fr; gap: 28px; margin-bottom: 64px; }
      .row:nth-child(even) .copy { order: 0; }
      .word { font-size: 1rem; }
      .bar .btn { padding: 9px 14px; }
    }
    /* ---------- wide screens ---------- */
    /* Below this the hero is a centred column, which is right on a phone and fine on a
       laptop. Above it that layout leaves the headline stranded in a sea of green and
       pushes the screenshot off the bottom of the window -- measured at 1790x1000, the
       hero alone was 954px tall. Side by side uses the width AND puts the product
       above the fold. */
    @media (min-width: 1080px) {
      .hero { text-align: left; padding-top: 96px; }
      .hero .wrap {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 72px;
        align-items: center;
      }
      .hero h1 {
      text-shadow: 0 1px 18px rgba(0, 0, 0, 0.40); margin: 0 0 20px; max-width: 16ch; }
      .hero p.lede { margin: 0 0 32px; max-width: 46ch; }
      .hero .fineprint { margin-top: 16px; }
      /* align-self: end keeps the phone's bottom edge where the negative margin can
         still pull it over the boundary; centring it would leave the overhang behind. */
      .hero .shot-hero { max-width: 324px; margin: 0 auto -96px; align-self: end; }
    }

    /* MEASURED, and re-measured when the About link joined the bar: brand 141 + nav 58
       + button 136 + gaps + padding = 411px minimum. Below that the bar overflows, so
       the wordmark goes and the mark alone carries the brand -- which saves 107px and
       brings the minimum to ~304. The earlier 349px breakpoint was correct for a bar
       with no nav link in it and is wrong now; a header with three items needs more
       room than one with two. */
    @media (max-width: 410px) {
      .word { display: none; }
    }

    /* ---------- the about page ---------- */
    /* The photograph sits UNDER a scrim, not raw. White type on an unmodified photo
       is a coin toss -- the whitewater in this one is near-white and the forest is
       near-black -- so a dark gradient over the whole band keeps the headline legible
       wherever the image happens to crop at a given width.
       --splash stays as the background COLOUR behind the image: if the photo fails or
       is still loading, the band is the old green and the text is still readable. */
    .band {
      background: var(--splash) url("img/river.jpg") center / cover no-repeat;
      color: #fff;
      padding: 76px 0 68px;
      position: relative;
      min-height: 380px;
      display: flex;
      align-items: flex-end;
    }
    .band::before {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg,
                  rgba(14, 30, 22, 0.42) 0%,
                  rgba(14, 30, 22, 0.78) 100%);
    }
    /* Two fixes in one rule. position:relative lifts the wrap above the scrim, or the
       headline is painted underneath it. width:100% is needed because .band is a flex
       container, which makes .wrap a flex ITEM -- and a flex item shrinks to its
       content, so `margin: 0 auto` was centring a 20ch-wide box instead of holding the
       1240px column. The headline sat in the middle of the photo rather than at the
       page's left margin like everything else. */
    .band .wrap { position: relative; width: 100%; }
    .band h1 {
      text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
      font-size: clamp(1.75rem, 4.2vw, 2.5rem);
      line-height: 1.16; letter-spacing: -0.02em;
      margin: 0; max-width: 20ch; font-weight: 700;
    }
    .prose { padding: 54px 0 68px; }
    /* ~62ch, the same readable measure the rest of the page is built on. */
    .prose p { max-width: 62ch; margin: 0 0 20px; color: var(--slate); }
    .prose p.lead { color: var(--ink); font-size: 1.14rem; }
    .prose p.turn { color: var(--ink); font-weight: 650; font-size: 1.2rem; margin: 28px 0; }

    /* The about band's own breakpoint, and it has to live HERE. The page's other
       media queries are declared above the .band rule, so an override written up
       there loses to it on source order and does nothing -- which is exactly what
       happened: the band stayed 380px tall on a phone. Any later addition to this
       stylesheet needs its responsive rules below it, not in the block up top. */
    @media (max-width: 820px) {
      .band { min-height: 290px; padding: 52px 0 40px; }
    }

    /* The about page's two columns. Single column by default -- the values read as a
       postscript to the story on a phone, which is the right order. */
    /* Icon, name, sentence -- stacked, three times. No card and no hairlines: a
       bordered panel with rules between the items is the default shape every template
       reaches for, and it reads as filler rather than as something written. */
    /* The values sit on their own surface so they read as a separate thing from the
       story rather than as more of it. A tint with no border and no rules between the
       items -- a bordered box with hairlines is the shape that looked like filler. */
    .values {
      margin: 44px 0 0;
      display: grid; gap: 34px;
      background: var(--wash);
      border-radius: 16px;
      padding: 30px 26px 34px;
    }
    .values .kicker { margin: 0; }
    .values svg {
      width: 32px; height: 32px; display: block;
      color: var(--green); margin-bottom: 14px;
    }
    .values h2 { font-size: 1.08rem; margin: 0 0 7px; letter-spacing: -0.01em; }
    .values p { margin: 0; color: var(--slate); font-size: 0.95rem; }

    @media (min-width: 1080px) {
      .prose .wrap {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 72px;
        align-items: start;
      }
      /* The story keeps its own 62ch measure; the grid only decides how much room the
         column gets, not how wide a line of text may run. */
      .values { margin: 0; padding: 34px 34px 38px; }
    }