/* ============================================================================
   ValiantAge V1 — ADDITIONS ONLY
   Loaded after va-core.css (v0.5's stylesheet). Everything here exists because
   going LIVE requires it and a local tablet kiosk did not (D-021).

   1. The full-bleed emotional hero + welcome video      (D-018, D-019)
   2. Two spaces — the doors, and the door back          (D-017)
   3. The video page — where forwarded links land        (D-016)
   4. The library bar and the send moment                (D-007)
   5. Responsive behaviour v0.5 never needed             (D-016 phone gate)
   ============================================================================ */

/* ---------- 1 · THE HERO + OVERLAY HEADER -------------------------------- */
/* The emotional lead (D-018). Full-bleed image, logo overlaid top-left in
   white, the persistent My Resources button top-right, and the approved copy.
   No utility strip, no strapline, no play button — all dropped 18 Sept.
   Deliberately NOT 100vh: the doors below must peek, so the visitor knows
   there is more without being told. */
.vhero{
  position:relative;display:flex;align-items:flex-end;
  background:#0C1620;overflow:hidden;
  /* Near-full-screen. The 8% that is left shows the top edge of the doors,
     so the visitor knows there is more without being told. dvh first so a
     phone's address bar does not cut the image short. */
  /* Near-full-screen MINUS the banner above it, so the doors still peek by
     the same amount they did before the banner existed (D-029, D-044). */
  min-height:calc(92vh - var(--banner-h));
  min-height:calc(92dvh - var(--banner-h));
}
.vhero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Phone: the couple sits right-of-centre in the frame, so bias right to
     keep both faces. Desktop: centre, because the sky on the left is where
     the words go. */
  object-position:68% center;
}
/* THE SCRIM (D-033). Back to a full-frame dark gradient, as it was originally,
   at slightly lower intensity than the first build. Two layers on one
   pseudo-element, so there is no box and therefore no visible edge:

     · horizontal — strongest at the left where the words are, clearing to
       nothing by 88% so the couple is never dimmed;
     · vertical — a gentle lift from the bottom, which seats the copy.

   The numbers were set by measuring white-on-background contrast, not by eye.
   They are the lightest values that still clear AA with room to spare. */
.vhero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(8,18,26,.62) 0%,
      rgba(8,18,26,.56) 30%,
      rgba(8,18,26,.44) 50%,
      rgba(8,18,26,.17) 70%,
      rgba(8,18,26,0)   88%),
    linear-gradient(0deg,
      rgba(8,18,26,.28) 0%,
      rgba(8,18,26,0)   48%);
}

.vhero-in{position:relative;z-index:2;width:100%;max-width:1060px;margin:0 auto;
  padding:0 20px 44px;color:#fff}
.vhero .vh-thanks{font-size:16px;font-weight:700;color:#fff;margin:0 0 10px;
  letter-spacing:.01em;text-shadow:0 1px 3px rgba(8,18,26,.55)}
.vhero h1{font-size:34px;line-height:1.12;margin:0 0 14px;color:#fff;
  letter-spacing:-.015em;text-wrap:pretty;text-shadow:0 1px 4px rgba(8,18,26,.42)}
.vhero .vh-lede{font-size:18px;line-height:1.5;margin:0;color:rgba(255,255,255,.95);
  max-width:42ch;text-shadow:0 1px 3px rgba(8,18,26,.55)}

/* ---------- THE CREDIBILITY BANNER (D-044) ------------------------------- */
/* A thin strip above everything, carrying the one fact that answers "who are
   these people?" before a visitor has to go looking for it.

   Same ink as the footer, so the page opens and closes on the same colour.
   Deliberately not sticky and not a nav: it is a line of type, and nothing in
   it moves or can be clicked. That is what keeps it "tight and lightweight"
   rather than the utility strip that was dropped in D-027.

   Wording is lifted from the About page's own documented sentence, not
   paraphrased — see D-044. */
/* --banner-h is what the hero subtracts. These are the no-JavaScript
   fallbacks; script measures the banner on load and on resize and overwrites
   them, so the number can never drift from the real height when the copy
   changes — which it has done twice in two days (D-044, D-052). */
:root{--banner-h:38px}
@media (max-width:760px){:root{--banner-h:34px}}
.vbanner{
  background:#18222C;color:#D8E0E6;
  font-size:13.5px;line-height:1.45;letter-spacing:.01em;
  padding:9px 0;text-align:center
}
.vbanner .wrap{padding-left:18px;padding-right:18px}
.vbanner b{color:#fff;font-weight:700}
@media (max-width:760px){
  .vbanner{font-size:12.5px;padding:8px 0}
}

/* ---------- THE HEADER ---------------------------------------------------- */
/* Two variants of one component. `.overlay` floats over the hero on the home
   page; the solid one sits above the content everywhere else. */
.head-in{display:flex;align-items:center;justify-content:space-between;gap:14px;
  max-width:1060px;margin:0 auto;padding:0 20px}
header.overlay{
  position:absolute;top:0;left:0;right:0;z-index:20;
  background:transparent;border-bottom:0;padding:34px 0 0
}
header.overlay .head-in{padding-top:0;padding-bottom:0}
/* Sits a little outside the text column, so the mark reads as part of the
   image rather than as the first item of the copy. */
header.overlay .head-in > a{margin-left:-30px}
/* White on the hero, over the scrim (D-033). Enlarged a notch from 62px.
   `valiantage-logo-dark.png` is kept in assets but no longer referenced — if
   the light hero ever returns, the mark is already made. */
.logo-white{height:70px;width:auto;max-width:min(340px,66vw);display:block}
.logo-dark{height:40px;width:auto;max-width:min(260px,58vw);display:block}

/* ---------- MY RESOURCES — the persistent CTA ----------------------------- */
/* The only element that follows you, and the site's call to action: save
   something, then send it to yourself or to someone who needs it.
   It is fixed, and it MOVES. On the home page it begins top-right over the
   hero; scroll past the image and it drops to bottom-right. On every other
   page it is bottom-right from the start. The bottom bar is gone. */
.reslink{
  position:fixed;right:20px;z-index:80;
  /* Docked is the default — every page except the top of the home page. */
  top:calc(100vh - 88px);
  top:calc(100dvh - 88px);
  display:inline-flex;align-items:center;gap:10px;height:52px;padding:4px;
  border-radius:999px;border:2px solid transparent;background:#fff;color:#1F2A37;
  font:inherit;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;
  box-shadow:0 4px 18px rgba(8,18,26,.26);
  transition:top .4s cubic-bezier(.4,0,.2,1), background .15s, box-shadow .2s;
}
/* Home page: starts up in the hero, alongside the logo. `.docked` is added
   by script once the image has scrolled past. */
body.is-home .reslink{top:calc(43px + var(--banner-h));
  background:rgba(255,255,255,.94)}
body.is-home .reslink.docked{top:calc(100vh - 88px);top:calc(100dvh - 88px);background:#fff}
.reslink:hover{box-shadow:0 6px 22px rgba(8,18,26,.34)}
/* Brand blue, both states (D-041). Unlike the green, this blue is usable
   everywhere: white on it measures 7.03:1, so the icon AND the number clear
   their thresholds without a deepened variant. */
.reslink .rl-circle{
  width:42px;height:42px;border-radius:50%;background:#2F5D7E;color:#fff;
  display:flex;align-items:center;justify-content:center;position:relative;flex:0 0 auto
}
/* The count is TEXT, so it needs 4.5:1. A deeper blue carries the number at
   10.87 and sets the badge apart from the circle; the 2px white ring does the
   rest, since the two blues only contrast 1.55 with each other. */
.reslink .rl-count{
  position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;padding:0 5px;
  border-radius:999px;background:#1F4058;color:#fff;font-size:12px;font-weight:700;
  display:none;align-items:center;justify-content:center;border:2px solid #fff;
  line-height:1
}
.reslink.has-items .rl-count{display:flex}
/* One colour in both states — the badge appearing is the state change, not a
   colour swap. */
.reslink .rl-label{padding-right:16px;white-space:nowrap}

/* One quiet acknowledgement when something is saved. No bar, no popup —
   the button itself answers. Respects reduced-motion. */
@keyframes rl-ack{
  0%{transform:scale(1)} 35%{transform:scale(1.12)} 100%{transform:scale(1)}
}
.reslink.ack .rl-circle{animation:rl-ack .45s ease}

/* ---------- THE SCROLL CUE ------------------------------------------------ */
/* Bottom-centre of the image. It says "there is more below" without spending
   a sentence on it, and it jumps to the two doors. Bobs gently; the global
   reduced-motion rule stops that for anyone who asks. */
.scrollcue{
  position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:3;
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.72);
  color:#fff;text-decoration:none;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:background .18s,border-color .18s
}
.scrollcue:hover{background:rgba(255,255,255,.3);border-color:#fff}
.scrollcue svg{width:26px;height:26px;animation:cue-bob 2.4s ease-in-out infinite}
@keyframes cue-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

/* ---------- 2 · THE TWO DOORS ------------------------------------------- */
/* Two rooms in one house (D-017). Situation, never the label (Finding 2).
   These are the ONLY next step from the home page, so they are given the room
   to look like it: generous section, big cards, a real photograph on each. */

/* SECTION RHYTHM (D-036). Below the hero the page is three bands, and each one
   gets its own ground as well as its own space — colour does the separating
   that a rule or a gap alone cannot:

     doors            the page's cream, so the white cards lift off it
     what we do       a quieter stone plate
     footer           dark ink, an unmistakable end of page

   Space alone was not enough: three cream sections running together is why
   the bottom of the page read as one long scroll. */
.doorsec{padding:82px 0 90px;background:var(--bg,#F7F5F0)}
.aboutsec{padding:78px 0 84px;background:#EFECE4;
  border-top:1px solid rgba(31,42,55,.07)}
/* ---------- THE GESTALT MARK (D-042) ------------------------------------- */
/* v0.5's map of a person's world, rebuilt as a still, wordless mark: same
   geometry, same icon paths, same web of connections — labels off, icons up to
   fill the circles the labels used to share.

   ⚠️ It deliberately does NOT reuse `.node` / `.spoke` / `.web` from
   va-core.css. Those are seams 3 and 4, held for the real interactive gestalt
   in V3, and they carry hover, cursor and active states this must not have.
   Own prefix, own rules, seam untouched.

   It is decoration, not a tool: `aria-hidden`, not focusable, nothing to click.
   Inline SVG, so it costs no request — 3.9 KB in the page. */
.aboutsec .wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:48px;align-items:center
}
.aboutsec .about-text{min-width:0}
.vgestalt{width:100%;max-width:340px;justify-self:end}
.vg-svg{display:block;width:100%;height:auto}
/* The three rings. `vg-inner` must match the section it sits on — it is the
   clearing the centre sits in, and any mismatch reads as a stray pale disc. */
.vg-halo{fill:rgba(94,140,97,.07);stroke:rgba(94,140,97,.16);stroke-width:1.5}
.vg-ring{fill:none;stroke:rgba(94,140,97,.30);stroke-width:26}
.vg-inner{fill:#EFECE4;stroke:rgba(94,140,97,.16);stroke-width:1.5}
.vg-face{fill:#fff;stroke:rgba(31,42,55,.22);stroke-width:2.4}
.vg-centre{fill:var(--green-soft,#DDE8DB);stroke:var(--green,#5E8C61);stroke-width:3.4}
.vg-spoke{stroke:rgba(94,140,97,.5);stroke-width:2.6;stroke-linecap:round}
/* In v0.5 the web is transparent until a node is lit. Here it stays faintly
   visible, because "interconnected" is the whole reason the mark is on the
   page. */
.vg-web{stroke:rgba(47,93,126,.22);stroke-width:3.4;stroke-dasharray:9 7;
  stroke-linecap:round}
.vg-icon path{fill:none;stroke:#5E8C61;stroke-width:1.7;stroke-linecap:round;
  stroke-linejoin:round}

.aboutsec .pickline{font-size:22px;margin-bottom:14px}
.aboutsec .about-copy{max-width:62ch;margin:0}
.aboutsec .about-copy + .about-copy{margin-top:16px}
.aboutsec .about-more{margin:24px 0 0}
/* This link was inheriting the browser default — bright blue, on a warm cream
   plate. Caught on screen, not in the markup. */
.aboutsec .about-more a{font-weight:700;font-size:17.5px;color:#2F5D7E;
  text-decoration:underline;text-underline-offset:3px}
.aboutsec .about-more a:hover{color:#1F4058}
/* Centred over the pair (D-037). It is a statement of who this is for, not a
   question about what the visitor prefers — so it sits over both cards rather
   than leaning against the left one. */
.doorsec .pickline{font-size:24px;line-height:1.35;margin:0 auto 26px;
  text-align:center;max-width:54ch;text-wrap:balance}
/* grid-auto-rows:1fr matters only when the two cards stack. Side by side they
   already stretch to the taller of the pair; stacked they did not, and at 390
   and 375px "Successful Aging in Place" wraps to two lines while "Support for
   Caregiving" does not — leaving one card 27px taller than the other. That was
   invisible while the two green lines were different lengths. Now that both
   read the same, it would have looked like a mistake (D-058). */
.doors{display:grid;gap:20px;margin:0;grid-auto-rows:1fr}
.door{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid rgba(31,42,55,.14);border-radius:20px;
  text-decoration:none;color:#1F2A37;
  box-shadow:0 3px 16px rgba(31,42,55,.10);
  transition:border-color .16s,transform .16s,box-shadow .16s
}
.door:hover{border-color:#5E8C61;transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(31,42,55,.18)}
/* The photograph leads (D-035). It is most of the card; the title is a single
   line under it. The eyebrow, the sub-copy and "Start here" are all gone —
   Management: "i dont need titles and subtitles and start heres". */
.door-img{display:block;width:100%;height:300px;object-fit:cover;object-position:center 42%}
/* The title sits on clean ground rather than over the picture. The brief was
   "image leads, but the text easy to read as well" — type over a photograph is
   always a negotiation, and here it does not have to be one. */
.door-body{padding:20px 24px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.d-stack{display:flex;flex-direction:column;gap:5px;min-width:0}
.door b{display:block;font-size:27px;line-height:1.2;letter-spacing:-.015em;
  font-weight:700}
/* One short line saying what is actually behind the door (D-037). It puts back
   the only job the old sub-copy was doing — helping someone decide which of the
   two is theirs — in five words instead of two sentences.

   NOTE THE GREEN. The brand green #5E8C61 measures 3.89:1 on white and does
   NOT clear the 4.5:1 requirement for text this size; the old eyebrow used it
   and was failing. #4F7752 is the same green deepened until it passes (5.13:1)
   and is indistinguishable as a brand colour at this size. */
.door .d-kicker{display:block;font-size:15.5px;line-height:1.4;font-weight:600;
  color:#4F7752;letter-spacing:.005em}
/* Wordless affordance. On a phone there is no hover, so the card needs to say
   "this goes somewhere" without spending a word on it. */
.door .d-go{flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#EFEDE7;color:#2F5D7E;transition:background .16s,transform .16s}
.door .d-go svg{width:19px;height:19px}
.door:hover .d-go{background:#5E8C61;color:#fff;transform:translateX(3px)}

/* The green "door back" panel that used to close each space page is gone
   (D-059, Management). Crossing between the two spaces is still available in
   two places on every page — the header nav and the footer nav — so neither
   room is sealed; it just no longer ends with a button. */

/* ---------- 2g · THE PAGE STATEMENT ON THE TWO SPACES (D-062) -----------
   These two lines are the only place on the site that says what we believe
   rather than what we have. They replaced a feature line ("Straight answers,
   in under a minute each") and a reassurance ("You don't have to work this out
   alone"), and a principle wants different typography from either: centred,
   larger, short measure, and room around it.

   Centred works here ONLY because everything in the block is short. The lede
   was cut to one line for exactly that reason — long centred paragraphs are
   harder to read, and this audience is the last one to do that to. */
.spacetop{padding:36px 0 30px;text-align:center}
/* The brand green again: var(--green) is #5E8C61 at 3.89:1, which fails at
   14px. #4F7752 is the same green at 5.13:1. Fifth place it has been caught. */
.spacetop .st-kicker{
  display:inline-block;margin:0 0 16px;
  font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#4F7752}
.spacetop .st-line{
  margin:0 auto 16px;max-width:24ch;
  font-size:clamp(29px,3.7vw,43px);line-height:1.14;letter-spacing:-.015em;
  font-weight:700;color:#1F2A37;text-wrap:balance}
.spacetop .st-lede{
  margin:0 auto;max-width:46ch;font-size:18px;line-height:1.5;color:#53616F}
@media (max-width:760px){
  .spacetop{padding:26px 0 22px}
  .spacetop .st-line{max-width:20ch}
  .spacetop .st-lede{font-size:17px}
}

/* ---------- 2f · THE CAROUSEL NAVIGATOR (D-059) -------------------------
   Management: "I need there to be a navigation bar at the bottom of the
   carousels to help show how many videos and illustrate the slider."

   Two jobs in one strip. The count answers "how much is in here?" before
   anyone starts swiping — a carousel with no edge in sight gives no sense of
   its own size. The bar answers "where am I in it?" and is draggable, so it is
   a control and not only a readout. The arrows stay: this is an addition, not
   a replacement, and on a phone where the arrows are hidden the bar is the
   only thing that shows there is more to the right. */
.vnav{display:flex;align-items:center;gap:16px;margin:10px 2px 30px}
.vnav-n{
  flex:0 0 auto;font-size:14.5px;font-weight:700;color:#53616F;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.vnav-bar{
  position:relative;flex:1 1 auto;height:22px;cursor:pointer;
  touch-action:none;   /* so a drag on the bar scrolls the row, not the page */
  -webkit-tap-highlight-color:transparent}
/* The rail is a fill AND an edge. On a cream page no rail fill can reach the
   3:1 that WCAG asks of a UI component — it would have to be near-charcoal and
   would read as a heavy bar. The thumb is the part that carries the
   information and it measures 5.05:1 against the rail; the hairline gives the
   rail's extent a border to be found by, which is easier to see than a pale
   fill. Measured, not guessed: rail on page is 1.28:1 on its own. */
.vnav-bar::before{
  content:"";position:absolute;left:0;right:0;top:7px;height:8px;
  border-radius:999px;background:#E0DACE;
  box-shadow:inset 0 0 0 1px rgba(31,42,55,.16)}
.vnav-bar:focus-visible{outline:3px solid #2F5D7E;outline-offset:4px;border-radius:6px}
.vnav-thumb{
  position:absolute;top:7px;height:8px;left:0;width:30%;
  border-radius:999px;background:#2F5D7E;
  transition:left .14s linear,width .14s linear}
.vnav-bar:hover .vnav-thumb{background:#24485F}
.vnav.dragging .vnav-thumb{transition:none;background:#24485F}
/* A row that already fits keeps its count and loses the bar — a full-width
   thumb that cannot move is a control that lies about being one. */
.vnav.nooverflow .vnav-bar{display:none}
@media (prefers-reduced-motion:reduce){.vnav-thumb{transition:none}}

/* ---------- 3 · THE VIDEO PAGE ------------------------------------------ */
.vpage{padding:26px 0 8px}
.vp-player{background:#000;border-radius:18px;overflow:hidden;max-width:400px}
.vp-player video{width:100%;aspect-ratio:9/16;display:block}
.vpage h1{font-size:28px;line-height:1.2;margin:0 0 6px}
.vp-meta{color:#53616F;font-size:16px;margin:0 0 20px}
.vp-meta .vp-badge{display:inline-block;background:#1F2A37;color:#fff;font-size:12px;
  font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:99px;margin-right:8px}
/* #4F7752, not the brand #5E8C61: white text on the brand green is 3.89:1 and
   fails AA at 12px. Same deepened green the badge on the shadow box uses. */
.vp-meta .vp-badge.molly{background:#4F7752}
.goodtoknow{background:#DDE8DB;border-radius:14px;padding:16px 18px;margin:0 0 16px}
.goodtoknow b,.nextstep b{display:block;font-size:13px;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:5px}
.goodtoknow b{color:#436546}
.goodtoknow p,.nextstep p{margin:0;font-size:17px;line-height:1.55}
.nextstep{border-left:4px solid #2F5D7E;padding:2px 0 2px 15px;margin:0 0 20px}
.nextstep b{color:#2F5D7E}
.vp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
details.transcript{border:1px solid #E2DDD3;border-radius:14px;background:#fff;margin:0 0 8px}
details.transcript summary{padding:15px 18px;font-weight:600;cursor:pointer;
  min-height:52px;display:flex;align-items:center}
details.transcript .tbody{padding:0 18px 18px;color:#53616F;line-height:1.65}
.crumb{display:inline-block;margin:18px 0 0;font-weight:700;text-decoration:none;color:#2F5D7E}
/* No dead ends: every video page is somebody's first page. */
.nodeadend{background:#fff;border:1px solid #E2DDD3;border-radius:18px;padding:22px;margin:28px 0 0}
.searchrow{display:flex;gap:10px;margin-top:14px}
.searchrow input{flex:1;min-height:52px;padding:12px 16px;font:inherit;font-size:17px;
  border:2px solid #E2DDD3;border-radius:12px;background:#F7F5F0;color:#1F2A37}
.searchrow input:focus{border-color:#5E8C61;outline:none}

/* ---------- 4 · THE LIBRARY BAR + SEND ---------------------------------- */
.libbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#1F2A37;color:#fff;
  transform:translateY(110%);transition:transform .25s}
.libbar.show{transform:none}
.libbar-in{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 20px;max-width:1060px;margin:0 auto}
.libbar .lc{font-weight:700;font-size:17px;line-height:1.25}
.libbar .lc small{display:block;font-weight:400;font-size:14px;opacity:.82;margin-top:2px}
/* ⚠️ DEAD RULE — the library bar was removed in D-028 and renders on no page
   (verified: zero `.libbar` elements on all five). Kept as a seam, but DO NOT
   reuse this pairing: white text on the brand green measures 3.89:1, under the
   4.5:1 required for text. If the bar ever returns, deepen it to #4F7752. */
.libbar button{min-height:46px;padding:10px 20px;border-radius:999px;border:none;
  background:#5E8C61;color:#fff;font:inherit;font-weight:700;font-size:16px;cursor:pointer;
  white-space:nowrap}
.libbar button:hover{background:#436546}
.savebtn-v1{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:12px 20px;
  border-radius:999px;border:2px solid #E2DDD3;background:#fff;font:inherit;font-weight:600;
  font-size:16px;cursor:pointer;color:#1F2A37}
.savebtn-v1:hover{border-color:#5E8C61}
.savebtn-v1.on{background:#DDE8DB;border-color:#5E8C61;color:#436546}

/* The send sheet. No urgency, no countdown, nothing that resembles a scam
   (Finding 3). One address, asked once, in v0.5's own words. */
.sendwrap{position:fixed;inset:0;z-index:120;background:rgba(18,33,44,.7);
  display:none;align-items:center;justify-content:center;padding:18px}
.sendwrap.open{display:flex}
.sendbox{background:#F7F5F0;border-radius:20px;max-width:460px;width:100%;padding:26px;
  /* Safety net: whatever the list does, the sheet never exceeds the screen. */
  max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);overflow-y:auto}
.sendbox h3{margin:0 0 6px;font-size:22px}
/* The send step, inside the sheet. v0.5's "See what's next" survives here as
   the heading for that step rather than for the whole sheet — which is what it
   actually names now the list sits above it (D-022, D-041). */
.sendbox .sb-sub{margin:0 0 6px;font-size:17px;font-weight:700;color:#1F2A37}
.sendbox p{margin:0 0 16px;color:#53616F;font-size:16px}
.sendbox label{display:block;font-weight:600;margin:0 0 6px;font-size:16px}
.sendbox input{width:100%;min-height:52px;padding:12px 14px;font:inherit;font-size:17px;
  border:2px solid #E2DDD3;border-radius:12px;background:#fff;margin-bottom:14px}
.sendbox input:focus{border-color:#5E8C61;outline:none}
.sendbox .sb-actions{display:flex;gap:10px;flex-wrap:wrap}
.sendbox .sb-go{min-height:52px;padding:12px 24px;border-radius:999px;border:none;
  background:#2F5D7E;color:#fff;font:inherit;font-weight:700;font-size:17px;cursor:pointer}
.sendbox .sb-cancel{min-height:52px;padding:12px 20px;border-radius:999px;
  border:2px solid #E2DDD3;background:transparent;font:inherit;font-size:16px;cursor:pointer}
.sendbox .sb-fine{font-size:14px;color:#53616F;margin:14px 0 0;line-height:1.55}
.sendbox .sb-fine b{color:#3F4B58}
/* THE EMPTY STATE (D-040, rebuilt D-057). Someone who opens My Resources with
   nothing in it has asked a question — "what is this?" — and the honest answer
   is to show them where things are, not to explain the button.

   It used to answer with two small outline pills of unequal width, under names
   that appear nowhere else on the site, while a fully-drawn "Close" sat beneath
   them — so the heaviest control in the panel was the way out. The hierarchy is
   now the right way up: the two doors are the subject, Close is a quiet link. */

/* The header wears the same mark as the button that opened it, so the panel is
   visibly the inside of the thing you just tapped. */
.sendbox .sb-head{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.sendbox .sb-head h3{margin:0}
.sendbox .sb-mark{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  background:#2F5D7E;color:#fff;display:grid;place-items:center}
.sendbox .sb-mark svg{width:18px;height:18px}
.sendbox .sb-intro{margin:0 0 16px}

/* The two doors, echoing the home page: the name the site uses everywhere and
   nothing else. Management removed the green sub-line here (D-058) — in a panel
   this size the name IS the whole message, and the second line was noise around
   it. Full width and equal, because the choice between them is not weighted.
   grid-auto-rows:1fr keeps them level if "For Caregivers" ever wraps. */
.sendbox .sb-doors{display:grid;gap:10px;margin:0 0 18px;grid-auto-rows:1fr}
.sendbox .sb-door{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:62px;padding:12px 14px 12px 18px;
  border:2px solid #DFD8CB;border-radius:14px;background:#fff;
  color:#1F2A37;text-decoration:none;
  transition:border-color .15s,background .15s,box-shadow .15s
}
.sendbox .sb-door:hover,.sendbox .sb-door:focus-visible{
  border-color:#5E8C61;background:#F3F7F2;box-shadow:0 2px 10px rgba(31,42,55,.07)}
.sendbox .sb-door b{font-size:18.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.sendbox .sbd-go{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:#ECF1F5;color:#2F5D7E;
  transition:background .15s,color .15s}
.sendbox .sb-door:hover .sbd-go,.sendbox .sb-door:focus-visible .sbd-go{
  background:#E4EDE3;color:#3C5E41}
.sendbox .sbd-go svg{width:17px;height:17px}

/* THE OPT-IN (D-068). The whole row is the target, not the 22px box — these
   are older hands. The global .sendbox input rule sizes text fields at 52px
   tall and full width, so the checkbox has to opt out of all of it. */
.sendbox .sb-opt{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  margin:0 0 14px;padding:12px 13px;min-height:48px;
  border-radius:12px;background:#F1EEE7;
  font-size:15.5px;line-height:1.45;color:#3F4B58}
.sendbox .sb-opt:hover{background:#EAE5DB}
.sendbox .sb-opt:focus-within{outline:3px solid #2F5D7E;outline-offset:2px}
.sendbox .sb-opt input[type="checkbox"]{
  width:22px;height:22px;min-height:0;flex:0 0 auto;
  margin:1px 0 0;padding:0;border:0;border-radius:0;background:none;
  accent-color:#2F5D7E;cursor:pointer}

/* The way out, deliberately light. Still a labelled control rather than an ×,
   and still a 44px target. */
.sendbox .sb-quiet{margin-top:16px}
.sendbox .sb-close-link{
  border:0;background:none;padding:10px 2px;min-height:44px;
  font:inherit;font-size:15.5px;font-weight:600;color:#53616F;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sendbox .sb-close-link:hover{color:#1F2A37}

/* ---------- THE SAVED LIST (D-041) --------------------------------------- */
/* The charter asks for a library people can REFERENCE, and until now you could
   only see a number. The list lives inside the sheet, not on the button:
   Management was clear the bubble must not gain weight, and it gains none —
   it is still a circle with a count.

   Text only. No thumbnails: recognition comes from the titles, which are
   descriptive, and 44 extra image requests is exactly the weight we are
   avoiding. The whole block scrolls after about five rows so the sheet can
   never grow taller than the screen. */
.sb-listwrap{margin:0 0 18px}
.sb-listhead{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 8px
}
.sb-listhead .sb-n{font-size:15px;font-weight:700;color:#3F4B58;margin:0}
.sb-listhead .sb-clear{
  background:none;border:none;padding:6px 2px;font:inherit;font-size:14px;
  color:#53616F;text-decoration:underline;cursor:pointer
}
.sb-listhead .sb-clear:hover{color:#1F2A37}
.sb-list{
  list-style:none;margin:0;padding:0;
  border:1px solid #E4DFD5;border-radius:14px;background:#fff;
  max-height:232px;overflow-y:auto;overscroll-behavior:contain
}
.sb-list li{display:flex;align-items:stretch;border-bottom:1px solid #EFEBE3}
.sb-list li:last-child{border-bottom:0}
/* The row is a link — tapping it reopens that video. That is what "reference"
   means: not just a receipt, a way back in. */
.sb-list .sb-item{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;
  padding:13px 4px 13px 14px;text-decoration:none;color:#1F2A37;font-size:16px;
  line-height:1.3;min-height:50px
}
.sb-list .sb-item:hover,.sb-list .sb-item:focus-visible{background:#F4F1EA}
/* Two lines rather than an ellipsis. The title is the only thing identifying
   the row, so cutting it at "Mild Cognitive Impairm…" defeats the purpose of
   having a list at all. */
.sb-list .sb-t{
  flex:1 1 auto;min-width:0;font-weight:600;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  line-clamp:2
}
.sb-list .sb-d{flex:0 0 auto;font-size:14px;color:#53616F;font-variant-numeric:tabular-nums}
.sb-list .sb-x{
  flex:0 0 auto;width:48px;min-height:50px;display:flex;align-items:center;
  justify-content:center;background:none;border:none;cursor:pointer;
  color:#6A7784;border-radius:0 13px 13px 0
}
.sb-list .sb-x:hover,.sb-list .sb-x:focus-visible{background:#F0E7E4;color:#8E3B2F}
.sb-list .sb-x svg{width:17px;height:17px}

/* ---------- THE SKIP LINK ------------------------------------------------ */
/* Only ever seen by someone navigating with a keyboard. v0.5 dropped it into
   the flow on focus, which shoved the hero down the page, and it inherited the
   browser's default blue. Now it floats over the top-left as a proper control.
   Found by sweeping every page for links still rendering in default blue —
   a thing that can only be caught on screen. */
.skip:focus{
  position:fixed;left:16px;top:16px;z-index:200;
  padding:12px 18px;border-radius:10px;
  background:#1F2A37;color:#fff;font-weight:700;font-size:16px;
  text-decoration:none;box-shadow:0 6px 20px rgba(8,18,26,.35)
}

/* ---------- 4b · THE FOOTER (D-036) -------------------------------------- */
/* One footer, identical on all five pages, and unmistakably the end of the
   page. Before this it was legal text on the same cream as everything above
   it, with no edge — which is why the bottom of the home page read as one
   long scroll rather than three sections.

   Dark ground does three jobs at once: it separates, it ends the page, and it
   lets required boilerplate recede without becoming hard to read. Every colour
   below is measured, not chosen by eye. */
footer{
  background:#18222C;color:#C3CDD6;
  padding:60px 0 68px;font-size:15px;line-height:1.7;
  /* The bubble is fixed bottom-right; the footer keeps clear of it. */
  padding-bottom:96px;
}
/* The identity row. The home page has no nav by design (D-027) — the doors
   are the navigation — so the footer is the one place a visitor at the bottom
   can go somewhere without scrolling back up. */
.foot-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px 32px;flex-wrap:wrap;
  padding-bottom:26px;margin-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.16)
}
.foot-logo{height:48px;width:auto;display:block;max-width:min(260px,60vw)}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:16px;font-weight:600}
.foot-nav a{color:#DFE6EC;text-decoration:none}
.foot-nav a:hover,.foot-nav a:focus-visible{color:#fff;text-decoration:underline}
footer h4{
  font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#9FB1BE;margin:0 0 8px;font-weight:700
}
footer .foot-legal > h4 + .legal{margin-bottom:22px}
/* 14.5px, matching v0.5 — boilerplate should recede, but not shrink. */
footer .legal{max-width:88ch;font-size:14.5px;line-height:1.68;color:#AFBCC6;margin:0}
footer .foot-legal > h4:not(:first-child){margin-top:22px}
footer .legal strong{color:#EAEFF3}
footer .legal + .legal{margin-top:22px}

/* ---------- 5 · RESPONSIVE ---------------------------------------------- */
/* v0.5 was a 2880x1920 kiosk in one orientation. A live site is not.
   The phone gate (D-016) is enforced here. */
@media (max-width:760px){
  .wrap{padding-left:18px;padding-right:18px}
  /* Phone: the button becomes the small circle. Label is carried by the
     accessible name, and the icon plus count does the visible work. */
  .reslink .rl-label{display:none}
  /* Phone header: logo and the CTA hold the top line; the nav wraps to its
     own row underneath rather than being squeezed off the screen. About must
     stay reachable — hiding it would be a dead end. */
  .head-in{flex-wrap:wrap;row-gap:10px}
  .head-in .mainnav{order:3;flex:1 0 100%;gap:18px;font-size:15px}
  .head-in > a{flex:0 0 auto}
  header.overlay .head-in .mainnav{display:none}
  .reslink{height:auto;padding:3px;box-shadow:0 2px 10px rgba(8,18,26,.22)}
  /* PHONE: the copy is back ON the photograph (D-033), which the scrim makes
     possible again. A phone crop has no open sky beside the words — they sit
     over the couple — so the scrim has to start earlier and end darker than
     the desktop's. Vertical rather than horizontal, because on a narrow
     screen there is no "left" to shade. */
  .vhero::after{
    background:
      /* A short band at the top so the white wordmark and the bubble have
         ground of their own — on a phone the sky behind them is bright, and
         the desktop's left-hand shade does not reach up here. */
      linear-gradient(180deg,
        rgba(8,18,26,.44) 0%,
        rgba(8,18,26,.16) 14%,
        rgba(8,18,26,0)   26%),
      /* D-055. The two stops in the middle carry more weight than they did:
         .58 at 46% and .40 pushed out to 60%. That is the band the hero copy
         actually sits in on a phone, and the thank-you line was measuring
         below AA there — at 360, 375 and 390px. The 74% and 100% stops are
         untouched on purpose: that is where the couple's faces are, and
         D-033 asked for a LIGHTER scrim, not a heavier one. */
      linear-gradient(0deg,
        rgba(8,18,26,.80) 0%,
        rgba(8,18,26,.70) 26%,
        rgba(8,18,26,.58) 46%,
        rgba(8,18,26,.40) 60%,
        rgba(8,18,26,.16) 74%,
        rgba(8,18,26,.06) 100%);
  }
  /* Bottom padding leaves the cue its own room beneath the copy. On a phone
     the copy runs the full width, so unlike the desktop it cannot simply sit
     beside a centred arrow. */
  .vhero-in{padding:0 18px 86px;max-width:none}
  .vhero h1{font-size:30px}
  .vhero .vh-lede{font-size:17px}
  .logo-white{height:52px}
  .logo-dark{height:34px}
  header.overlay{padding-top:24px}
  header.overlay .head-in > a{margin-left:-6px}
  body.is-home .reslink{top:calc(24px + var(--banner-h))}
  .doorsec{padding:34px 0 40px}
  .doorsec .pickline{font-size:20px;margin-bottom:20px;max-width:26ch}
  .doors{gap:16px}
  .door-img{height:220px}
  .door-body{padding:18px 20px 20px}
  .door b{font-size:23px}
  .door .d-kicker{font-size:14.5px}
  .scrollcue{width:48px;height:48px;bottom:18px}
  .scrollcue svg{width:23px;height:23px}
  /* Arrow gutters are a mouse affordance. On a phone you swipe, so the
     56px side padding and the arrows both go — that reclaims 112px of
     width, which on a 390px screen is a quarter of the row. */
  .vwrap{padding:0 !important}
  .varrow{display:none !important}
  .vscrub{margin-left:0 !important;margin-right:0 !important}
  /* Search: the button drops under the field rather than off the screen. */
  .searchrow{flex-wrap:wrap}
  .searchrow input{flex:1 1 100%}
  .searchrow .sbox{flex:1 1 100%}
  .searchrow .savebtn-v1{width:100%;justify-content:center}
  .vp-actions .savebtn-v1{flex:1 1 auto;justify-content:center}
  .topicgrid{grid-template-columns:1fr 1fr !important;gap:12px !important}
  .topicgrid .topic img{height:96px !important}
  .topicgrid .tbody{padding:12px 13px !important}
  .topicgrid h3{font-size:16px !important;line-height:1.28 !important}
  .topicgrid p{font-size:14px !important;line-height:1.45 !important}
  .vtrack .vcard,.vcard{flex-basis:70% !important;max-width:250px !important}
  .crow-title{font-size:20px !important}
  /* Phone: the bands stay distinct but give back some of their height. */
  .doorsec{padding:48px 0 54px}
  .aboutsec{padding:46px 0 50px}
  .aboutsec .wrap{grid-template-columns:1fr;gap:26px}
  .vgestalt{justify-self:center;max-width:210px}
  footer{padding:44px 0 92px}
  .foot-top{padding-bottom:20px;margin-bottom:24px}
  .foot-logo{height:40px}
  .foot-nav{gap:8px 20px;font-size:15.5px}
}
@media (min-width:761px){
  /* Desktop: the couple is right-of-frame and the sky is left, so the words
     sit in the open sky and nothing covers a face. */
  .vhero{align-items:center;
    min-height:calc(92vh - var(--banner-h));
    min-height:calc(92dvh - var(--banner-h))}
  .vhero-img{object-position:center center}
  .vhero-in{padding:88px 20px 40px}
  /* No overlay anywhere. On desktop the copy sits on the open sky, which is
     the LIGHTEST part of the frame (measured 0.33-0.61 luminance), so the
     words are set in brand ink instead of white. That clears AA on the
     photograph untouched — no scrim, no gradient, no plate. */
  /* (type colour is now set on the base rules — it applies at every width) */
  /* Hold the words inside the open sky on the left. The faces begin around
     60% of the frame — nothing should cross them. */
  .vhero .vh-thanks{font-size:18px;max-width:470px}
  .vhero h1{font-size:50px;max-width:520px}
  .vhero .vh-lede{font-size:20px;max-width:400px}
  .doors{grid-template-columns:1fr 1fr;gap:26px}
  .door-img{height:340px}
  .door-body{padding:22px 28px 24px}
  .door b{font-size:30px}
  .door .d-kicker{font-size:16px}
  .vpage{display:grid;grid-template-columns:400px 1fr;gap:40px;align-items:start;padding:40px 0 16px}
  .vpage h1{font-size:34px}
}
@media (min-width:1100px){
  .vhero h1{font-size:58px;max-width:600px}
  .vhero .vh-thanks{max-width:540px}
  .vhero .vh-lede{max-width:440px}
}

/* Focus visible everywhere. Keyboard users are not an afterthought. */
:focus-visible{outline:3px solid #2F5D7E;outline-offset:3px;border-radius:6px}
.vhero :focus-visible{outline-color:#fff}

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

/* Print: the page a person takes to an appointment. */
/* ---------- 2h · THE PRIVACY PAGE + FOOTER COPYRIGHT (D-067) ------------ */
.foot-copy{margin:18px 0 0;font-size:13.5px;color:#9AA7B2}
/* A privacy policy nobody can read is not a privacy policy. Longer measure
   than the rest of the site would allow, but bigger type than a policy
   usually gets — this audience is the reason. */
.a-narrow h2{font-size:23px;margin:30px 0 10px}
.a-narrow h3{font-size:18.5px;font-weight:700;margin:22px 0 6px;color:#1F2A37}
.a-narrow p{font-size:18px;line-height:1.62;margin:0 0 14px;max-width:66ch}
.p-list{margin:0 0 16px;padding-left:22px;max-width:66ch}
.p-list li{font-size:18px;line-height:1.55;margin:0 0 9px}
.a-narrow .goodtoknow p{margin:0;max-width:none}
/* Links in body copy, because an unstyled mailto renders in the browser's
   default blue — off-brand, and the sweep catches it every time. */
.a-narrow a{color:#2F5D7E;font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
.a-narrow a:hover{color:#1F4058}

/* ---------- 3b · SHARE THIS VIDEO (D-064) -------------------------------
   Reuses .sendwrap / .sendbox wholesale. The site asks for an email address
   in exactly one visual language, and this is it. */
.sh-copyrow{display:flex;gap:8px;align-items:stretch;margin:0 0 4px}
.sh-copyrow input{
  flex:1 1 auto;min-width:0;margin:0;
  font-size:15.5px;color:#3F4B58;background:#F1EEE7}
.sendbox .sh-copy{flex:0 0 auto;min-height:52px;padding:12px 20px;font-size:16px}
.sh-done{min-height:22px;margin:0 0 14px;font-size:14.5px;font-weight:600;color:#3C5E41}

/* ---------- 3c · THE TYPEAHEAD (D-065) ----------------------------------
   Suggestions as you type. Sized for the audience, not for a dense app: rows
   are 56px minimum, the type is 17px, and the panel never gets so tall that
   it hides the page behind it. */
.sbox{position:relative;flex:1;min-width:0}
.searchrow .sbox input{width:100%}
.ssuggest{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  margin:0;padding:6px;list-style:none;
  background:#fff;border:2px solid #DFD8CB;border-radius:14px;
  box-shadow:0 14px 34px rgba(31,42,55,.18);
  max-height:min(56vh,420px);overflow-y:auto}
.ssuggest li{
  min-height:56px;padding:11px 12px;border-radius:10px;cursor:pointer;
  display:flex;flex-direction:column;gap:2px}
.ssuggest li + li{margin-top:2px}
.ssuggest li:hover,.ssuggest li.is-active{background:#EEF3ED}
.ssuggest li.is-active{box-shadow:inset 0 0 0 2px #5E8C61}
.ssuggest .ss-t{font-size:17px;font-weight:700;color:#1F2A37;line-height:1.25}
.ssuggest .ss-m{font-size:13.5px;color:#53616F}
.ssuggest .ss-s{font-size:14.5px;color:#3F4B58;line-height:1.4;font-style:italic}
.ssuggest .ss-none{
  min-height:0;padding:12px;color:#53616F;font-size:16px;cursor:default}
.ssuggest .ss-none:hover{background:none}
/* One highlight style for the suggestions and the full list. Not the brand
   green behind text — this is #FCEFB8, and ink on it measures 13.6:1. */
.ssuggest mark,.s-list mark{background:#FCEFB8;color:#1F2A37;padding:0 1px;border-radius:2px}

/* ---------- 3c · SEARCH RESULTS (D-064) --------------------------------- */
.sresults{margin:14px 0 0}
.sresults .s-count{margin:0 0 10px;font-size:15px;font-weight:700;color:#3F4B58}
.sresults .s-none{margin:0;font-size:16px;color:#53616F}
.sresults .s-none b{color:#3F4B58}
.s-list{list-style:none;margin:0;padding:0;border-top:1px solid #E6E1D7}
.s-list li{border-bottom:1px solid #E6E1D7}
.s-list a{
  display:block;padding:13px 6px;text-decoration:none;color:#1F2A37;
  min-height:44px}
.s-list a:hover,.s-list a:focus-visible{background:#F1EEE7}
.s-list b{display:block;font-size:17px;line-height:1.3}
.s-list .s-meta{display:block;margin-top:3px;font-size:14px;color:#53616F}
.s-list .s-snip{display:block;margin-top:5px;font-size:15px;line-height:1.45;
  color:#3F4B58;font-style:italic}

/* A transcript we do not have yet says so. */
.transcript .t-none{color:#53616F;font-style:italic}

/* ---------- 3d · PRINT (D-064) ------------------------------------------
   Management: "print should harvest the info from the page and make a very
   simple PDF: title, good to know, ask your doctor, and the transcript."
   Every browser's print dialog offers Save as PDF, so the printout IS the
   PDF — no library, no weight, and it works with the page open offline.
   The rule is subtractive: keep those four things, drop the rest. */
@media print{
  header,footer,.libbar,.vhero,.nodeadend,.vnav,
  .vp-actions,.vp-player,.reslink,.sendwrap,.vmodal,.vbanner,
  .crumb,.scrollcue,#rows,.sresults,.ssuggest{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .wrap,.vpage{max-width:none;padding:0;margin:0;display:block}
  .vpage h1{font-size:20pt;line-height:1.2;margin:0 0 4pt}
  .vp-meta{margin:0 0 12pt;font-size:10pt;color:#333}
  .vp-meta .vp-badge{background:none!important;color:#000!important;
    border:1pt solid #666;padding:1pt 5pt}
  .goodtoknow,.nextstep{border:1pt solid #999;background:#fff;
    padding:8pt 10pt;margin:0 0 10pt;break-inside:avoid}
  .goodtoknow b,.nextstep b{color:#000}
  /* The transcript prints whether or not it was open on screen — the handler
     in video.html opens the <details> for the print and closes it after. */
  .transcript{border:0;padding:0;margin:14pt 0 0}
  .transcript summary{list-style:none;font-size:13pt;font-weight:700;margin:0 0 6pt}
  .transcript summary::-webkit-details-marker{display:none}
  .transcript .tbody{display:block!important}
  .transcript p{margin:0 0 8pt;line-height:1.45;orphans:3;widows:3}
  /* Where it came from, so a printed page can be traced back. */
  .vpage::after{
    /* No domain: it is not registered on Kinsta yet, and a printed page that
       names a URL that does not resolve is worse than one that does not. The
       browser's own print footer carries the address. */
    content:"ValiantAge";
    display:block;margin-top:16pt;padding-top:6pt;
    border-top:1pt solid #999;font-size:9pt;color:#444}
}

/* ---------- the shadow box (V1 additions) ----------
   v0.5's .vbox is a fixed 9:16 box — correct, and kept (D-021). Everything
   here sits around it without touching it. */

/* Visible to the eye, spoken to a screen reader. */
.vhide{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* THE PRESENTER BADGE (D-060) — v0.5's, restored. It sat on the top edge of
   the shadow box, left of the close button, and said AI or E-Doc Molly.
   Two departures from v0.5, both deliberate:
     · the colours follow video.html's badge, not v0.5's, so the same fact
       looks the same in both places — ink for AI, green for Molly;
     · v0.5's green was #5E8C61, which gives white text 3.89:1 and fails AA at
       this size. #4F7752 is the same green deepened to 5.13:1. */
.vbox .vbadge{
  /* top:-22px on a 44px pill puts exactly half of it above the frame's edge
     (D-061). Sitting mostly inside, it read as a control — a filled pill beside
     a filled close button. Straddling the edge it reads as a marker stuck on
     the corner of the frame, which is what it is. */
  position:absolute;top:-22px;right:44px;z-index:2;pointer-events:none;
  height:44px;min-width:44px;padding:0 10px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
  background:#1F2A37;color:#fff;
  font-weight:700;font-size:15px;letter-spacing:.04em;line-height:1.05;
  /* ⚠️ The ring is not decoration. Once the pill straddles the frame edge, its
     top half sits on the modal scrim — and the ink fill measures 1.06:1 against
     that scrim, which is invisible (sampled, D-061). The fill cannot simply be
     lightened without turning it back into something button-shaped, and even
     v0.5's green is only 2.87:1 there. A light ring defines the pill against
     whatever is behind it, dark frame or dark scrim, and reads as a marker
     stuck on the corner rather than a control. */
  box-shadow:0 0 0 2px rgba(255,255,255,.72), 0 6px 18px rgba(0,0,0,.45)}
.vbox .vbadge.molly{background:#4F7752;padding:0 16px;font-size:13.5px;letter-spacing:.02em}
@media(max-width:600px){.vbox .vbadge{top:8px;right:62px}}

/* Stacked by default: video, then title and controls beneath it. This is the
   phone layout and the fallback. */
.vmwrap{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:92vw}

/* ⚠️ Stacked, the frame has to leave room for what sits under it. v0.5's box is
   88vh, which was right when nothing followed it; with a title and two buttons
   beneath, 88vh + ~110px overruns a 812px phone and a short desktop window —
   and the first thing off the bottom of the screen is "Save this". Found by
   measuring, at 375x812 and 899x700 (D-060). dvh so a phone's address bar
   cannot reintroduce it. */
@media (max-width:899px){
  .vbox{height:min(88vh,920px);height:min(calc(100dvh - 160px),88vh,920px)}
}
.vmfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.vmfoot .vmtitle{color:#fff;font-weight:700;font-size:16px;text-align:center;
  width:100%;line-height:1.35}
.vmfoot .savebtn-v1{background:rgba(255,255,255,.94);border-color:transparent;text-decoration:none}
.vmfoot .savebtn-v1.on{background:#DDE8DB}

/* ON A WIDE SCREEN the controls move beside the video instead of under it
   (D-060, Management). The video is 9:16 — tall and narrow — so the space to
   its right was empty while the buttons sat below the fold of a tall frame.

   900px, not the site's usual 760: at 768 the frame is nearly a full portrait
   screen tall and a 260px column beside it does not fit. The max-width on the
   box is the guarantee — the video gives up width before the column is ever
   pushed off the screen. */
@media (min-width:900px){
  .vmwrap{flex-direction:row;align-items:flex-start;gap:30px;max-width:min(92vw,980px)}
  .vbox{max-width:min(calc(92vw - 300px),470px)}
  /* The column is stretched to the height of the video, and an empty flex
     spacer pushes its contents a quarter of the way down it (D-061). A
     percentage flex-basis in a COLUMN resolves against the container's height,
     which is the only way to say "a quarter down the video" when the video's
     height is min(88vh,920px) and changes with the window. */
  .vmfoot{
    flex:0 0 260px;width:260px;align-self:stretch;
    flex-direction:column;align-items:stretch;
    flex-wrap:nowrap;justify-content:flex-start;gap:12px;padding-top:0}
  /* minus the 12px gap that follows it, so the title lands ON the quarter
     rather than a gap's width past it. */
  .vmfoot::before{content:"";flex:0 0 calc(25% - 12px);min-height:0}
  .vmfoot .vmtitle{text-align:left;font-size:18px;line-height:1.35;margin:0 0 4px}
  .vmfoot .savebtn-v1{width:100%;justify-content:center}
}
.topic.soon{opacity:.72}
.topic.soon img{filter:saturate(.55)}

/* ---------- 6 · THE ABOUT PAGE (D-045) ----------------------------------- */
/* ⚠️ Read this before changing anything here.
   v0.5's About page already CONTAINS a two-column desktop design. It is then
   cancelled, three lines later, by a portrait-tablet override — in va-core.css:

       .a-two{grid-template-columns:1fr 1fr; …}
       .a-two{grid-template-columns:1fr; …}            ← flattens it

       .member{grid-template-columns:136px 1fr; …}
       .member > .mphoto{grid-column:1; grid-row:1 / span 20}
       .member{grid-template-columns:1fr}              ← flattens it
       .member > *{grid-column:1}

   The tablet was one portrait screen, so flattening was right there. A laptop
   is not a portrait tablet, and the flattened version is what shipped: bios
   running 124 characters to the line and a photo stranded above a 1012px band
   of nothing.

   So this is NOT a redesign. It restores v0.5's own desktop layout above the
   phone breakpoint and leaves the flattened version exactly as-is below it.
   Nothing in va-core.css is edited — seams and all (D-021). */

@media (min-width:761px){

  /* Commitments: three parallel statements want to be three columns, not
     three full-width bars. The promise sits under them, full width, because
     it summarises rather than parallels. */
  #a-serve .a-two{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  #a-serve .commit{margin-top:0;height:100%}
  /* The promise is not a fourth commitment — it summarises the three, so it
     runs the full width beneath them. */
  #a-serve .commit.promise{grid-column:1 / -1;height:auto;margin-top:6px}
  #a-mission .a-two{grid-template-columns:1fr 1fr;gap:40px}

  /* The member card, as v0.5 drew it: photo in a left rail, everything else
     beside it. */
  .member{
    grid-template-columns:152px minmax(0,1fr);
    column-gap:36px;row-gap:0;padding:26px 30px
  }
  .member > *{grid-column:2}
  .member > .mphoto{grid-column:1;grid-row:1 / span 20;align-self:start}

  /* THE MEASURE. v0.5 set `max-width:none` on the bios because on the tablet
     the column was already narrow. On a laptop that produced a 124-character
     line — roughly double what is comfortable — on the page carrying the most
     words on the site.

     Rather than cap the paragraph and leave 200px of dead space beside it,
     the CARD is capped so the column IS the measure. Nothing is stranded. */
  .team{max-width:790px}
  .leadstat{max-width:790px}
  .a-band p{max-width:70ch}
  #a-hero .lede{max-width:48ch}
  /* Belt and braces: if the card ever gets wider, the line still will not. */
  .member .mprose p{max-width:72ch}

  /* Rhythm. 44px between bands reads cramped once the bands are wide. */
  .a-band{padding:64px 0}
  #a-hero{padding:80px 0 52px}
  .team{gap:22px;margin-top:30px}
  .leadstat{margin-top:22px;padding:22px 30px}
  .valuelist li{padding-top:12px;padding-bottom:12px}
}

@media (min-width:1100px){
  .member{grid-template-columns:172px minmax(0,1fr);column-gap:44px}
  .a-band{padding:74px 0}
}

/* ---------- 7 · TOPIC-FILTERED BROWSING (D-047) -------------------------- */
/* The grid is the menu. Pick one topic and only that topic's videos appear
   below; a control above them goes back to the grid. Before this, every
   carousel for the space rendered at once no matter what you clicked, so the
   grid looked like navigation and behaved like decoration. */

/* A topic is a button now, not a link. It must not inherit button chrome. */
.topicgrid button.topic{
  appearance:none;-webkit-appearance:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  border:1px solid rgba(31,42,55,.14);background:#fff;padding:0;width:100%
}
/* The chosen one has to be unmistakable — this audience should never have to
   hunt for which card is active. Ring, lift, and a green foot. */
.topicgrid .topic.chosen{
  border-color:#4F7752;
  box-shadow:0 0 0 3px rgba(94,140,97,.38),0 10px 26px rgba(31,42,55,.16);
  transform:translateY(-2px)
}
.topicgrid .topic.chosen .tstat.on{color:#fff;background:#4F7752;border-radius:999px;
  padding:3px 10px;display:inline-block}

.pickhint{margin:18px 0 0;font-size:17px;color:#53616F}

/* The panel that holds the chosen topic's carousels. */
.vpanel-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px 24px;flex-wrap:wrap;margin:0 0 6px
}
.vpanel-title{font-size:26px;line-height:1.2;margin:0;letter-spacing:-.01em}
.topicsback{
  display:inline-flex;align-items:center;gap:9px;
  min-height:48px;padding:11px 20px;border-radius:999px;
  border:2px solid #CFE0CE;background:#fff;color:#2C4632;
  font:inherit;font-weight:700;font-size:16px;cursor:pointer;
  transition:background .15s,border-color .15s
}
.topicsback:hover,.topicsback:focus-visible{background:#EDF4EC;border-color:#5E8C61}
.topicsback svg{width:17px;height:17px;flex:0 0 auto;color:#4F7752}

@media (max-width:760px){
  .vpanel-title{font-size:22px}
  .topicsback{width:100%;justify-content:center}
  .pickhint{font-size:16px;margin-top:14px}
}