/* site.css - generated by build.py from css/ in filename-sorted order. */
/* cascade order is load order. build_id: bc-front-v1 */
/* layers in order: 00-tokens.css, 10-base.css, 15-background.css, 20-layout.css, 30-components.css, 40-forms.css, 50-placeholders.css, 60-header-footer.css, 70-skin-ll.css, 90-utilities.css */

/* --- 00-tokens.css --- */
/* ==========================================================================
   00-tokens.css - layer 00 of DESIGN_SYSTEM.md section 8.

   THE ONLY FILE IN css/ WHERE A LITERAL VALUE BELONGS. Every other layer
   references var(--ll-*). The gate in selftest.py section [12] enforces both
   halves of section 8's rule: (1) no literal outside this file duplicates a
   token's value in the same category, and (2) every other literal carries a
   "literal-ok:" comment on its own line and a row in css/LITERALS.md.

   VALUES CORRECTED BY DESIGN_SYSTEM_ERRATA.md, WHICH OVERRIDES DESIGN_SYSTEM.md:
     E1 - --ll-radius is 18px (content surfaces), not 14px. 14px is the HEADER
          radius and becomes --ll-radius-header.
     E2 - --ll-shadow is 0 10px 30px rgba(0,0,0,.35) (content surfaces), not
          0 10px 28px rgba(0,0,0,.28). The header value becomes
          --ll-shadow-header. --ll-shadow-hi composes the SURFACE value.
     E3 - --ll-glass-bd stays rgba(255,255,255,.15) as a deliberate
          standardisation across the shipped .14-.18 range, not a transcription.
     E4 - #ff5a1f (Liquid Link Header.txt) is a THIRD shipped orange,
          deliberately discarded. --ll-accent stays #ff6600.

   FONTS: v1 ships the fallback stack. No woff2 for Inter or IBM Plex Mono
   exists anywhere on disk, section 6 rule 1 forbids a CDN, and downloading font
   files is a network fetch this build may not perform. NO @font-face, NO
   network. A decision, not a gap - DESIGN_SYSTEM.md section 1 records the
   one-line wave-3 upgrade path (drop woff2 into assets/fonts/, set
   site.config.json webfonts:true).

   STATUS: REVIEW. [grok / bc-style-rebuild]
   ========================================================================== */

:root{
  /* ---- Surface ---------------------------------------------------- */
  --ll-bg:            #242424;
  --ll-bg-deep:       #1b1b1b;
  --ll-glass:         linear-gradient(135deg, rgba(38,38,38,.82), rgba(18,18,18,.58));
  --ll-glass-bd:      rgba(255,255,255,.15);
  --ll-glass-hi:      rgba(255,255,255,.06);

  /* ---- Ink -------------------------------------------------------- */
  --ll-text:          #ffffff;
  --ll-text-2:        #eaeaea;
  --ll-muted:         #cbd5e1;
  --ll-muted-2:       #d8dbe3;

  /* ---- Accent ----------------------------------------------------- */
  --ll-accent:        #ff6600;
  --ll-accent-2:      #ff8844;
  --ll-accent-3:      #ff9966;
  --ll-accent-ink:    #111111;

  /* ---- Geometry ---------------------------------------------------- */
  --ll-radius:        18px;
  --ll-radius-header: 14px;
  --ll-radius-lg:     16px;
  --ll-radius-sm:     12px;
  --ll-radius-xs:     10px;
  --ll-radius-pill:   999px;
  --ll-header-h:      78px;
  --ll-max:           1080px;
  --ll-max-wide:      1280px;
  --ll-pad-x:         clamp(28px, 5.5vw, 64px);

  /* ---- Elevation --------------------------------------------------- */
  --ll-shadow:        0 10px 30px rgba(0,0,0,.35);
  --ll-shadow-header: 0 10px 28px rgba(0,0,0,.28);
  --ll-shadow-hi:     inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35);

  /* ---- Type -------------------------------------------------------- */
  --ll-font:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ll-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ll-display: var(--ll-font);
  --ll-h1:      clamp(52px, 7.5vw, 88px);
  --ll-h2:      clamp(32px, 4.4vw, 48px);
  --ll-h3:      clamp(20px, 2.4vw, 26px);
  --ll-lead:    clamp(18px, 2.4vw, 22px);

  /* ---- Motion ------------------------------------------------------ */
  --ll-t:      .25s;
  --ll-t-fast: .2s;
}

/* --- 10-base.css --- */
/* ==========================================================================
   10-base.css - reset, body, type scale, links, focus-visible, motion safety.
   DESIGN_SYSTEM.md section 8 layer 10. [claude-code-opus-5 / bc-front-v1]
   ========================================================================== */

*,*::before,*::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;        /* literal-ok: iOS text-inflation reset - a percentage, not a design value */
  scrollbar-gutter: stable;              /* reserve scrollbar track so content never jumps / kisses the rail */
  overflow-x: hidden;                    /* kill horizontal scroll from full-bleed chrome next to the vertical scrollbar */
}

body{
  margin: 0;
  background: var(--ll-bg);
  color: var(--ll-text);
  font-family: var(--ll-font);
  font-size: 16px;                       /* literal-ok: root body size - the base the rem scale is measured from; no type token names it */
  line-height: 1.55;                     /* unitless ratio */
  min-height: 100vh;                     /* literal-ok: full-viewport minimum so the fixed topo layer always has a page to sit behind */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                    /* belt-and-suspenders with html - no 100vw bleed past the orange pill rail */
}

img,svg,video{ max-width: 100%; }        /* literal-ok: fluid-media reset - a percentage, not a design value */
img{ height: auto; }

h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin: 0 0 .75rem; }  /* literal-ok: vertical rhythm unit - three quarters of the body line, no token */
ul,ol{ padding-left: 1.2rem; }           /* literal-ok: list indent */

h1{ font-size: var(--ll-h1); line-height: 1.02; font-weight: 800; letter-spacing: -.04em; } /* literal-ok: display tracking - cinematic tight tracking under v2 leap h1 */
h2{ font-size: var(--ll-h2); line-height: 1.15; font-weight: 800; }
h3{ font-size: var(--ll-h3); line-height: 1.25; font-weight: 700; }

.ll-lead{ font-size: var(--ll-lead); color: var(--ll-muted); max-width: 62ch; }  /* literal-ok: measure cap in ch - tighter Tesla readability under larger lead */

/* Link ink is --ll-accent-3, not --ll-accent, and that is a MEASURED choice.
   DESIGN_SYSTEM.md section 6 rule 6 requires body text at >= 4.5:1 against
   --ll-bg AND against a bubble, and says to measure rather than assume.
   Measured (sRGB relative luminance, WCAG 2.x):
     --ll-accent   #ff6600 on a bubble (about #3f3f3f composited) = 3.59:1  FAIL
     --ll-accent-3 #ff9966 on a bubble                            = 5.02:1  pass
     --ll-accent-3 #ff9966 on --ll-bg #242424                     = 7.39:1  pass
   Section 5 does not specify a link colour, so this is a free choice and the
   measurement makes it. Where section 5 DOES specify accent ink - .ll-btn
   --outline - it is transcribed as written; see the note there. */
a{ color: var(--ll-accent-3); text-decoration: none; }
a:hover{ text-decoration: underline; }

:focus-visible{
  outline: 2px solid var(--ll-accent-3);   /* literal-ok: focus ring width - 2px is the visible-focus minimum; --ll-glass-bd's 1px hairline is a border, not a ring */
  outline-offset: 2px;                     /* literal-ok: focus ring offset */
}

code,kbd,samp,pre{ font-family: var(--ll-mono); font-size: .92em; }  /* literal-ok: monospace optical size correction */

hr{ border: 0; border-top: 1px solid var(--ll-glass-bd); margin: 1.25rem 0; }  /* literal-ok: 1px hairline width (section 3 rule 1 "one hairline, always") + rule spacing */

/* Motion safety, site-wide. DESIGN_SYSTEM.md section 6 rule 5 requires
   prefers-reduced-motion on EVERY animation, not only the background, so the
   theme starter's global blanket (liquidlink-theme-starter/css/ll-theme.css,
   "10) Motion safety") is carried here in addition to the targeted clause
   15-background.css keeps for the three topo layers (errata E11). */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .001ms !important;        /* literal-ok: near-zero duration from the theme starter's global blanket - kills motion without breaking animationend listeners */
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;       /* literal-ok: near-zero duration from the theme starter's global blanket */
    scroll-behavior: auto !important;
  }
}

/* --- 15-background.css --- */
/* ==========================================================================
   15-background.css - the animated topo background, LIFTED WHOLE.

   Source: BH26/liquidlink.net/HTML/Page Background.txt (2,752 B, 56 lines; size
   verified by the operator, RECON.md section 1.0). Its markup half is
   _partials/topo-bg.html; this is its <style> half, transcribed rule for rule.
   DESIGN_SYSTEM.md section 2: "Transcribe ... verbatim ... It is self-contained
   and dependency-free." One page, one instance - the partial is included in the
   base layout, never per-section.

   DESIGN_SYSTEM_ERRATA.md E11 lists five load-bearing values section 2's prose
   omits. All five are here and none may be "simplified" out:
     1. pointer-events:none on the fixed layer.
     2. type="fractalNoise" and stitchTiles="stitch" on the feTurbulence
        (in _partials/topo-bg.html's grain data URI, below).
     3. the <linearGradient id="tline"> stop-opacity .18 -> .06 that EVERY
        contour stroke references (in the partial).
     4. per-layer stroke-width 1.2 / 1 / 0.9 (in the partial) and
        transform:translateZ(0) on .layer (here).
     5. the three keyframe translate distances +20px / -24px / +18px. l2 pans
        the OPPOSITE direction; that opposition is what produces the parallax.
        Also viewBox="0 0 1200 800" preserveAspectRatio="none" (in the partial).

   ONE TRANSCRIPTION CHANGE, AND IT CHANGES NO RENDERED VALUE. The source's
   second radial wash stop is the literal rgba(255,255,255,.06), which is
   exactly --ll-glass-hi's value; DESIGN_SYSTEM.md section 8 rule 1 says a
   literal that duplicates a token's value "fails - use the var()". The token is
   substituted and resolves to the identical colour. Recorded in
   css/LITERALS.md under "Token substitutions".

   REDUCED MOTION: the file's own targeted clause is kept verbatim at the foot,
   AND 10-base.css carries the theme starter's global blanket, because section 6
   rule 5 requires reduced-motion on every animation site-wide (errata E11).

   [claude-code-opus-5 / bc-front-v1]
   ========================================================================== */

/* Full-bleed across the entire viewport, behind everything */
.ll-topo-bg{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 10% -20%, rgba(255,102,0,.22), transparent 58%),   /* literal-ok: orange topo wash v2 leap - source geometry 120%/80% at 10%/-20% with hotter .22 accent alpha, no token */
    radial-gradient(90% 70% at 85% 110%, rgba(255,102,0,.10), transparent 55%),   /* literal-ok: secondary orange bloom v2 - mesh feel without a new surface class */
    radial-gradient(120% 80% at 110% 0%, var(--ll-glass-hi), transparent 55%),     /* literal-ok: white topo wash - source geometry 120%/80% at 110%/0%; the colour stop is the token, not a literal */
    radial-gradient(140% 100% at 50% 50%, transparent 40%, rgba(0,0,0,.45) 100%); /* literal-ok: vignette v2 leap - dark edge falloff on the fixed topo layer, not a surface */
}
.ll-topo-bg .topo{ position: absolute; inset: 0; width: 100%; height: 100%; }      /* literal-ok: the SVG fills its fixed parent exactly */
.ll-topo-bg .layer{ transform: translateZ(0); }                                    /* errata E11(4): promotes each contour group to its own compositor layer */
.ll-topo-bg .l1{ animation: ll-pan1 30s ease-in-out infinite; }                    /* literal-ok: layer-1 pan period, source value */
.ll-topo-bg .l2{ animation: ll-pan2 38s ease-in-out infinite; }                    /* literal-ok: layer-2 pan period, source value */
.ll-topo-bg .l3{ animation: ll-pan3 48s ease-in-out infinite; }                    /* literal-ok: layer-3 pan period, source value */
@keyframes ll-pan1{ 0%,100%{ transform: translateX(0) }   50%{ transform: translateX(20px) } }    /* literal-ok: errata E11(5) pan distance +20px, keyframe stops */
@keyframes ll-pan2{ 0%,100%{ transform: translateX(0) }   50%{ transform: translateX(-24px) } }   /* literal-ok: errata E11(5) pan distance -24px - l2 pans the OPPOSITE way; that is the parallax */
@keyframes ll-pan3{ 0%,100%{ transform: translateX(0) }   50%{ transform: translateX(18px) } }    /* literal-ok: errata E11(5) pan distance +18px, keyframe stops */

/* Subtle film grain */
.ll-topo-bg .grain{
  position: absolute; inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.03"/></svg>');  /* literal-ok: the grain tile, transcribed whole. The scheme-carrying string inside it is the SVG XML namespace, a string constant no browser fetches and without which the SVG does not parse - the ONE exemption errata E10 grants, and nothing broader. 80x80 tile, 100% rect, .03 opacity are source values. */
  mix-blend-mode: overlay;
}

/* Make sure content sits above it */
body{ position: relative; z-index: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ll-topo-bg .l1,.ll-topo-bg .l2,.ll-topo-bg .l3{ animation: none; }
}

/* --- 20-layout.css --- */
/* ==========================================================================
   20-layout.css - .ll-container, .ll-section, .ll-grid, spacing rhythm.
   DESIGN_SYSTEM.md section 8 layer 20.

   LAYOUT IS NOT A SURFACE. DESIGN_SYSTEM.md section 3 hard rule 3, quoted:
   ".ll-section, .ll-container and .ll-grid are layout, not surfaces, and may
   contain any of them. So .ll-ph inside .ll-section is correct; .ll-ph inside
   .ll-card is a violation." Nothing in this file declares a background, an
   enclosing border, a border-radius or a box-shadow, which is what makes that
   sentence true mechanically rather than by convention.

   [claude-code-opus-5 / bc-front-v1]
   ========================================================================== */

.ll-container{
  width: 100%;                       /* literal-ok: fill the available column before the max-width cap applies */
  max-width: var(--ll-max);
  margin-inline: auto;
  padding-inline: var(--ll-pad-x);
}
.ll-container--wide{ max-width: var(--ll-max-wide); }

.ll-section{ padding-block: clamp(64px, 11vw, 120px); }   /* literal-ok: section rhythm - Tesla denser-airier whitespace (Grok rebuild); no token names a block rhythm */
.ll-hero{
  position: relative;
  text-align: center;
  padding-block: clamp(40px, 7vw, 88px);  /* literal-ok: hero rhythm - tighter launch stack, kills empty void (Grok v2) */
  isolation: isolate;
}
.ll-hero::before{
  content: "";
  position: absolute;
  left: 50%; top: 8%;                    /* literal-ok: hero bloom anchor - centered horizontally, slightly below top of hero */
  width: min(920px, 110%); height: 280px;   /* literal-ok: hero bloom geometry - soft orange wash behind display type, not a surface */
  transform: translateX(-50%);           /* literal-ok: center the hero bloom on the h1 axis */
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,102,0,.28), transparent 62%),   /* literal-ok: hero accent bloom - one-off orange alpha for cinematic wash */
    radial-gradient(ellipse at 50% 0%, rgba(255,136,68,.12), transparent 55%);  /* literal-ok: hero secondary bloom - lighter accent halo */
  pointer-events: none;
  z-index: -1;
  filter: blur(2px);                         /* literal-ok: soft bloom diffusion */
}
.ll-hero h1{
  text-shadow: 0 0 40px rgba(255,102,0,.18); /* literal-ok: display glow under hero bloom */
}
.ll-hero .ll-eyebrow{
  color: var(--ll-accent-3);
  text-shadow: 0 0 18px rgba(255,102,0,.35); /* literal-ok: eyebrow glow - launch-page accent cue */
  margin-bottom: .85rem;                     /* literal-ok: eyebrow-to-h1 stand-off in hero */
}
.ll-hero .ll-lead{ margin-inline: auto; }
.ll-hero .ll-cta{ justify-content: center; margin-top: 1.1rem; margin-bottom: 1.25rem; }  /* literal-ok: hero CTA row centering and stand-off above media */
.ll-hero .ll-frame{ margin-inline: auto; max-width: 100%; text-align: left; }  /* literal-ok: framed hero media stays full column width inside the centered hero */
.ll-section > h2{
  position: relative;
  padding-left: 1rem;                        /* literal-ok: room for the accent bar beside section titles */
  margin: 0 0 1.5rem;                        /* literal-ok: heading-to-body gap inside a section - opener hierarchy under larger type */
}
.ll-section > h2::before{
  content: "";
  position: absolute;
  left: 0; top: .15em;                   /* literal-ok: accent-bar vertical align against section title cap-height */
  width: 4px; height: 1.05em;                /* literal-ok: orange accent bar on section titles - typography cue, not a surface */
  border-radius: 2px;                        /* literal-ok: accent-bar cap - smaller than every radius token */
  background: linear-gradient(180deg, var(--ll-accent), var(--ll-accent-3));  /* literal-ok: 180deg accent bar direction; stops are tokens */
  box-shadow: 0 0 12px rgba(255,102,0,.45);  /* literal-ok: accent-bar glow */
}

/* Grid - DESIGN_SYSTEM.md section 5: "12-column at > 900px, 6 at <= 900px,
   4 at <= 600px. Gap clamp(12px, 1.8vw, 18px)." Items span the full track count
   by default so a grid with no span helper still reads as a single column
   stack rather than a 1/12-wide sliver. */
.ll-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));   /* literal-ok: 12 equal tracks; minmax(0,1fr) stops long words widening a track */
  gap: clamp(18px, 2.4vw, 28px);                       /* literal-ok: section 5 grid gap - card breathing room under Tesla rhythm */
}
.ll-grid > *{ grid-column: span 12; }
.ll-span-3{ grid-column: span 3; }
.ll-span-4{ grid-column: span 4; }
.ll-span-6{ grid-column: span 6; }

@media (max-width: 900px){                             /* literal-ok: section 5 grid breakpoint - 12 tracks become 6 */
  .ll-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* literal-ok: 6 equal tracks */
  .ll-grid > *{ grid-column: span 6; }
  .ll-span-3{ grid-column: span 3; }
  .ll-span-4{ grid-column: span 6; }
  .ll-span-6{ grid-column: span 6; }
}
@media (max-width: 600px){                             /* literal-ok: section 5 grid breakpoint - 6 tracks become 4 */
  .ll-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* literal-ok: 4 equal tracks */
  .ll-grid > *,
  .ll-span-3,.ll-span-4,.ll-span-6{ grid-column: span 4; }
}

.ll-stack > * + *{ margin-top: .75rem; }   /* literal-ok: vertical rhythm unit, same as 10-base.css's block margin */
.ll-cta{ display: flex; gap: .75rem; flex-wrap: wrap; }   /* literal-ok: button row gap, ll-theme.css "6) Hero" .ll-cta */

/* --- 30-components.css --- */
/* ==========================================================================
   30-components.css - the bubble family, buttons, pills, nums, points, social.
   DESIGN_SYSTEM.md section 8 layer 30.

   THE BUBBLE FAMILY IS SIX CLASSES PLUS .ll-ph, AND THAT IS THE WHOLE SET.
   DESIGN_SYSTEM.md section 3, quoted: "Bubble family - the complete set. Do not
   invent a seventh." Five members are here; .ll-ph is layer 50, because
   section 8 gives placeholders their own file.

     bubble-family: ll-bubble ll-bubble--brand ll-card ll-frame ll-step ll-pill ll-ph

   The line above is the manifest selftest.py section [12] reads. The MECHANICAL
   gate is not that comment though: [12] collects every class whose rule declares
   border-radius: var(--ll-radius) or var(--ll-radius-lg) - the two SURFACE radii
   of section 3 rule 4 - and asserts that set is exactly the six surfaces. A
   seventh surface cannot be added without taking a surface radius, and taking
   one fails the gate. .ll-pill is the one family member on --ll-radius-pill and
   [12] asserts that separately.

   Section 3's hard rules, implemented and not reinterpreted:
     1. One hairline, always: 1px solid var(--ll-glass-bd). Never 2px, never a
        coloured border, never outline as a substitute for it.
     2. The gradient runs 180deg, light at top. .ll-bubble--brand is the only
        exception and its extra layer is a corner radial, not a direction change.
     3. Never nest a surface directly inside a surface. Inside a bubble use
        .ll-points, .ll-bullets or a plain <div>.
     4. --ll-radius for surfaces, --ll-radius-sm for controls. A button inside a
        bubble is 12px inside 18px (18px per errata E1). Do not match them.
     5. Hover belongs to interactive bubbles only - a surface that is itself a
        link. A static content bubble does not move.

   BUTTONS ARE THREE VARIANTS, PERMANENTLY: --accent, --outline, bare .ll-btn.
   Errata E5: --outline is a deliberate BEM rename of the shipped single-hyphen
   -outline, not shipped naming, and the theme starter's own five modifiers are
   not the set. A fourth variant is a design change, not an implementation
   detail. [12] asserts the modifier SET equals exactly {accent, outline}.

   [claude-code-opus-5 / bc-front-v1]
   ========================================================================== */

/* ---- Surface 1/6 - .ll-bubble: content panel, callout, section body ------ */
.ll-bubble{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));  /* literal-ok: section 3 bubble fill - higher contrast glass vs bg (Grok v2) */
  border: 1px solid var(--ll-glass-bd);   /* literal-ok: 1px hairline width, section 3 rule 1 */
  border-radius: var(--ll-radius);
  padding: 28px;                          /* literal-ok: section 3 bubble padding - Tesla inset, no edge kiss */
  box-shadow: var(--ll-shadow);
}

/* ---- Surface 2/6 - .ll-bubble--brand: hero block, footer brand block ----- */
.ll-bubble--brand{
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.08), transparent 60%),     /* literal-ok: section 3 corner light source - source geometry 120%/120% at 20%/0% and a one-off .08 white alpha */
    var(--ll-glass);
  border: 1px solid var(--ll-glass-bd);   /* literal-ok: 1px hairline width, section 3 rule 1 */
  border-radius: var(--ll-radius);
  box-shadow: var(--ll-shadow-hi);
  padding: 18px 20px 32px;                /* literal-ok: section 3 brand-block padding, deeper at the foot */
  width: 100%;                            /* literal-ok: the brand block always fills its layout column */
}

/* ---- Surface 3/6 - .ll-card: grid item, teaser, person, article ---------- */
.ll-card{
  overflow: hidden;                      /* clip card media to surface radius - no corner bleed */
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));  /* literal-ok: .ll-card extends .ll-bubble - higher contrast glass vs bg (Grok v2) */
  border: 1px solid var(--ll-glass-bd);   /* literal-ok: 1px hairline width, section 3 rule 1 */
  border-radius: var(--ll-radius);
  padding: 24px;                          /* literal-ok: section 3 card padding - inset so media/text do not kiss edges */
  box-shadow: var(--ll-shadow);
}
.ll-card > img{
  display: block;
  width: 100%;                            /* literal-ok: card media fills the card width */
  height: 280px;                          /* literal-ok: cinematic card-media height (Grok v2 leap) */
  object-fit: cover;
  border-radius: var(--ll-radius-sm);
}

/* ---- Surface 4/6 - .ll-frame: image or chart wrapper -------------------- */
.ll-frame{
  overflow: hidden;                      /* clip media to radius - no edge bleed past the mat */
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));  /* literal-ok: section 3 frame fill - stronger cinematic mat (Grok v2) */
  border: 1px solid var(--ll-glass-bd);   /* literal-ok: 1px hairline width, section 3 rule 1 */
  border-radius: var(--ll-radius-lg);
  padding: 20px;                          /* literal-ok: section 3 frame padding - stronger cinematic mat around media */
  box-shadow: var(--ll-shadow);
}
.ll-frame > img{ display: block; width: 100%; height: auto; border-radius: var(--ll-radius-sm); }  /* literal-ok: framed media fills the mat */

/* ---- Surface 5/6 - .ll-step: numbered process item ---------------------- */
.ll-step{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));  /* literal-ok: .ll-step is .ll-bubble plus .ll-num - higher contrast glass (Grok v2) */
  border: 1px solid var(--ll-glass-bd);   /* literal-ok: 1px hairline width, section 3 rule 1 */
  border-radius: var(--ll-radius);
  padding: 18px;                          /* literal-ok: step padding - airier than before, still tighter than a bubble */
  box-shadow: var(--ll-shadow);
}

/* ---- Surface 6/6 - .ll-pill: inline tag -------------------------------- */
.ll-pill{
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255,102,0,.35);   /* literal-ok: pill accent hairline - accent moment, still 1px */
  border-radius: var(--ll-radius-pill);
  padding: .35rem .7rem;                 /* literal-ok: section 3 pill padding */
  font-size: .8rem;                      /* literal-ok: section 3 pill type size */
  color: var(--ll-accent-3);
  background: rgba(255,102,0,.10);       /* literal-ok: pill accent wash - one-off orange alpha */
  letter-spacing: .04em;                 /* literal-ok: pill tracking for accent moments */
  text-transform: uppercase;
  font-weight: 600;
}

/* ---- Hover: interactive surfaces only (section 3 rule 5) ---------------- */
a.ll-bubble,a.ll-card,a.ll-step{ display: block; color: inherit; text-decoration: none; }
a.ll-bubble:hover,a.ll-card:hover,a.ll-step:hover{
  transform: translateY(-4px);                        /* literal-ok: section 3 rule 5 hover lift - stronger cinematic lift (Grok v2) */
  outline: 1px solid rgba(255,140,74,.85);            /* literal-ok: section 3 rule 5 hover highlight - hotter warm alpha; hover state only */
  box-shadow: 0 16px 40px rgba(255,102,0,.38);        /* literal-ok: section 3 rule 5 hover elevation - louder accent glow (Grok v2) */
  text-decoration: none;
}

/* ---- Glass utility surface treatment (section 5) ----------------------- */
.ll-glass{
  background: var(--ll-glass);
  border: 1px solid var(--ll-glass-bd);   /* literal-ok: 1px hairline width, section 3 rule 1 */
  backdrop-filter: blur(8px);             /* literal-ok: section 5 glass blur radius */
  -webkit-backdrop-filter: blur(8px);     /* literal-ok: section 5 glass blur radius, WebKit prefix */
}

/* ---- Buttons - three variants, permanently (section 5, errata E5) ------- */
.ll-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px;                     /* literal-ok: section 5 button padding */
  border-radius: var(--ll-radius-sm);
  border: 1px solid var(--ll-glass-bd);   /* literal-ok: 1px hairline width, section 3 rule 1 */
  background: var(--ll-glass);
  backdrop-filter: blur(8px);             /* literal-ok: section 5 glass blur radius */
  -webkit-backdrop-filter: blur(8px);     /* literal-ok: section 5 glass blur radius, WebKit prefix */
  box-shadow: var(--ll-shadow);
  font: inherit; font-weight: 600;
  text-decoration: none;
  color: var(--ll-text);
  cursor: pointer;
  transition: var(--ll-t);
}
.ll-btn--accent{
  background: linear-gradient(90deg, var(--ll-accent), var(--ll-accent-3));   /* literal-ok: section 1 "accent is a warm two-stop gradient run left-to-right" - 90deg is the direction, both stops are tokens */
  border-color: var(--ll-accent-3);
  color: var(--ll-accent-ink);
}
/* MEASURED, FLAGGED, AND TRANSCRIBED AS SECTION 5 WRITES IT. --ll-accent
   #ff6600 as text measures 5.28:1 against --ll-bg (passes section 6 rule 6) but
   3.59:1 against a composited bubble (fails the 4.5:1 body-text floor). Section
   5 specifies this colour and this item does not restyle section 5. Sean's
   licence says colours are not strict, so the fix is one token -
   `color: var(--ll-accent-3)`, measured at 5.02:1 on a bubble - and it is
   recorded in LANDING.md as an operator call rather than taken here. */
.ll-btn--outline{ background: transparent; border-color: var(--ll-accent); color: var(--ll-accent); }
.ll-btn--outline:hover{
  background: var(--ll-accent);
  color: var(--ll-accent-ink);
  box-shadow: 0 6px 18px rgba(255,102,0,.35);   /* literal-ok: outline-button fill-in elevation, lifted from ---about.txt .ll-btn-outline:hover */
}
.ll-btn:hover{ transform: translateY(-1px); text-decoration: none; }   /* literal-ok: section 5 button hover lift */

/* ---- Numbered marker (section 5) --------------------------------------- */
.ll-num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;              /* literal-ok: section 5 number-marker box */
  border-radius: var(--ll-radius-pill);
  background: linear-gradient(90deg, var(--ll-accent), var(--ll-accent-3));   /* literal-ok: 90deg accent gradient direction; both stops are tokens */
  color: var(--ll-accent-ink);
  font-weight: 700;
}

/* ---- Lists inside a bubble - section 3 rule 3's sanctioned alternatives -- */
.ll-points{ list-style: none; margin: .5rem 0 .8rem; padding: 0; }   /* literal-ok: points-list rhythm */
.ll-points li{ position: relative; padding-left: 1.1rem; margin: .3rem 0; color: var(--ll-muted-2); }   /* literal-ok: room for the ::before dot, and the row rhythm */
.ll-points li::before{
  content: ""; position: absolute; left: 0; top: .55rem;   /* literal-ok: section 5 dot vertical alignment against the first text line */
  width: .5rem; height: .5rem;                             /* literal-ok: section 5 dot size */
  border-radius: 50%;                                      /* literal-ok: a circle - a shape, not a surface radius; no radius token is a percentage */
  background: linear-gradient(90deg, var(--ll-accent), var(--ll-accent-2));   /* literal-ok: 90deg accent gradient direction; both stops are tokens */
  box-shadow: 0 0 0 3px rgba(255,102,0,.12);               /* literal-ok: section 5 dot halo - a one-off accent alpha at 3px */
}
.ll-bullets{ margin: .5rem 0 .8rem 1.2rem; color: var(--ll-muted-2); }   /* literal-ok: bullets-list rhythm and indent, lifted from ---how-it-works.txt .ll-bullets */

/* ---- Social row (section 5) -------------------------------------------- */
.ll-social{ display: flex; gap: .45rem; }   /* literal-ok: social-row gap */
.ll-social a{
  display: grid; place-items: center;
  width: 30px; height: 30px;              /* literal-ok: section 5 social-icon box */
  border-radius: 9px;                     /* literal-ok: section 5 names this radius explicitly as a known one-off; it is smaller than every radius token and is the one place the system uses it */
  color: #ffd9c2;                         /* literal-ok: section 5 social-icon ink - a warm tint that is not one of the three oranges and is used nowhere else */
  background: rgba(255,255,255,.08);      /* literal-ok: one-off white alpha for the icon well */
  border: 1px solid rgba(255,255,255,.22);/* literal-ok: 1px hairline width; .22 is the control-border alpha errata E7 keeps distinct from --ll-glass-bd */
  backdrop-filter: blur(8px);             /* literal-ok: section 5 glass blur radius */
  transition: var(--ll-t-fast);
}
.ll-social a:hover{ transform: translateY(-1px); color: var(--ll-text); }   /* literal-ok: social-icon hover lift */

/* ---- Eyebrow and stat figure - the two things the ll skin re-types ------ */
/* DESIGN_SYSTEM.md section 1: the Liquid Link skin "swaps display type to
   --ll-mono for eyebrows and stat figures". 70-skin-ll.css does that by
   re-pointing --ll-display; these two classes are what read the token. A figure
   rendered in .ll-stat__n still needs an HTML comment naming its source path
   (BUILD_PACKET.md section 8) - this is type treatment and asserts nothing. */
.ll-eyebrow{
  font-family: var(--ll-display);
  font-size: .78rem;                       /* literal-ok: eyebrow type size */
  letter-spacing: .14em;                  /* literal-ok: eyebrow tracking - louder launch cue */
  text-transform: uppercase;
  color: var(--ll-accent-3);
  font-weight: 700;
}
.ll-stat__n{ font-family: var(--ll-display); font-size: var(--ll-h2); font-weight: 800; }
.ll-stat__t{ color: var(--ll-muted); font-size: .95rem; }   /* literal-ok: stat-label type size, lifted from ----global footer.txt .ll-footer__tag */

/* --- 40-forms.css --- */
/* ==========================================================================
   40-forms.css - .ll-field, select, .ll-news, placeholder + focus, and the
   seven form classes DESIGN_SYSTEM.md does not define.
   DESIGN_SYSTEM.md section 8 layer 40 + section 4.1, as corrected by
   DESIGN_SYSTEM_ERRATA.md E6, E7 and E9.

   E9 - THE SECTION-3-RULE-3 COLLISION, RESOLVED, AND HOW IT IS IMPLEMENTED.
   In the source (BH26/liquidlink.net/HTML/functions.php) .ll-form is a glass
   surface and .ll-fieldset is ANOTHER bordered, backgrounded, radiused surface
   directly inside it - exactly the double-hairline pattern section 3 hard rule 3
   forbids. E9's resolution: ".ll-form IS the bubble ... .ll-fieldset is NOT a
   surface. No background, no enclosing border, no radius, no shadow."

   Implemented by COMPOSITION, not by a seventh surface class: the form element
   carries class="ll-bubble ll-form", .ll-bubble supplies the one surface
   (var(--ll-radius) = 18px per E1, var(--ll-shadow) per E2), and .ll-form below
   adds only width and inner rhythm. Declaring the bubble geometry a second time
   under .ll-form would have made a SEVENTH surface class, which section 3
   forbids in the same breath as rule 3. W1-forms: the markup contract is
   <form class="ll-bubble ll-form">.

   .ll-fieldset is a group, not a shape: a styled legend plus a single
   border-top divider, first-child exempt. E9: "A border-top is a rule, not a
   surface - it does not enclose, has no fill and no radius, so it cannot read
   as a second hairline around a shape."

   E7 - select IS A SEPARATE RULE and keeps three properties section 4.1 drops:
   a darker well (rgba(0,0,0,.55) vs .28), a stronger border (.28 vs .22) and
   the whole custom dropdown-arrow treatment built from background-image
   gradients. Transcribing section 4.1 as written would ship visibly wrong
   selects.

   E6 - the ::placeholder rule is a DELIBERATE ADDITION, not a transcription: an
   unbounded grep for ::placeholder across BH26/liquidlink.net/HTML/ returns
   zero matches. The values are right and the Firefox opacity reset is genuinely
   needed; the provenance claim is what was wrong. Same for width:100% and
   font:inherit, which are in neither source rule.

   Placeholder text is a FORMAT HINT, NEVER A LABEL (section 4.1): every field
   keeps a visible <span> label inside its .ll-field. The focus ring is a
   box-shadow, never an outline and never a width change - the field must not
   move on focus.

   [claude-code-opus-5 / bc-front-v1]
   ========================================================================== */

/* ---- The form itself - layout only; .ll-bubble is the surface (E9) ------ */
.ll-form{
  display: grid;
  gap: .4rem;                             /* literal-ok: form row rhythm, matching .ll-field's own gap */
  max-width: 920px;                       /* literal-ok: form measure, lifted from functions.php .ll-form; narrower than --ll-max because a form is read in one column */
  margin-inline: auto;
}

/* ---- A fieldset is a GROUP, not a surface (E9) -------------------------- */
.ll-fieldset{
  border: 0;
  margin: 0;
  padding: 1rem 0 .5rem;                  /* literal-ok: group rhythm above and below the divider */
  border-top: 1px solid var(--ll-glass-bd);   /* literal-ok: 1px divider width - a rule, not a surface: it does not enclose, has no fill and no radius */
}
.ll-fieldset:first-of-type{ border-top: 0; padding-top: 0; }
.ll-fieldset > legend{
  padding: 0 8px;                         /* literal-ok: legend gutter, lifted from functions.php .ll-fieldset>legend */
  color: var(--ll-accent-3);
  font-weight: 800;
  letter-spacing: .3px;                   /* literal-ok: legend tracking, lifted from functions.php */
}

/* ---- Field wrapper and its controls (section 4.1) ---------------------- */
.ll-field{ display: flex; flex-direction: column; gap: .4rem; margin: 10px 0; }   /* literal-ok: section 4.1 field stack gap and row rhythm */

.ll-field input,
.ll-field textarea{
  background: rgba(0,0,0,.28);            /* literal-ok: section 4.1 dark field well - a one-off black alpha; the .28 in --ll-shadow-header is a shadow ingredient, not this */
  border: 1px solid rgba(255,255,255,.22);/* literal-ok: 1px hairline width; .22 is the form-control border alpha errata E3/E7 keep distinct from --ll-glass-bd */
  border-radius: var(--ll-radius-sm);
  padding: .75rem 1rem;                   /* literal-ok: section 4.1 field padding */
  color: var(--ll-text-2);
  outline: none;
  font: inherit;
  width: 100%;                            /* literal-ok: fields fill their .ll-field column */
}

/* select keeps its own rule - errata E7 */
.ll-field select{
  background: rgba(0,0,0,.55);            /* literal-ok: errata E7 - select's well is deliberately DARKER than input's .28 */
  border: 1px solid rgba(255,255,255,.28);/* literal-ok: 1px hairline width; errata E7 - select's border is deliberately STRONGER than input's .22 */
  border-radius: var(--ll-radius-sm);
  padding: .75rem 1rem;                   /* literal-ok: section 4.1 field padding */
  color: var(--ll-text-2);
  outline: none;
  font: inherit;
  width: 100%;                            /* literal-ok: fields fill their .ll-field column */
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ll-text-2) 50%),                       /* literal-ok: errata E7 custom dropdown arrow, left half - 45deg and the 50% hard stop are the arrow's geometry; the colour is the token */
    linear-gradient(135deg, var(--ll-text-2) 50%, transparent 50%),                      /* literal-ok: errata E7 custom dropdown arrow, right half */
    linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,.55));                         /* literal-ok: errata E7 arrow gutter - the same darker well drawn as a flat strip */
  background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 15px) calc(50% - 3px), 100% 0;   /* literal-ok: errata E7 arrow placement, source values */
  background-size: 5px 5px, 5px 5px, 2.5rem 100%;                                        /* literal-ok: errata E7 arrow size and gutter width, source values */
  background-repeat: no-repeat;
}
.ll-field select option{ background: var(--ll-bg-deep); color: var(--ll-text-2); }

/* The placeholder itself - errata E6: a deliberate addition, values correct */
.ll-field input::placeholder,
.ll-field textarea::placeholder{
  color: rgba(234,234,234,.45);           /* literal-ok: section 4.1 placeholder ink - --ll-text-2 at 45%, a one-off alpha no token carries */
  opacity: 1;                             /* Firefox dims placeholders by default - undo it */
}

/* Focus - orange, 3px, no layout shift (section 4.1) */
.ll-field input:focus,
.ll-field select:focus,
.ll-field textarea:focus{
  border-color: rgba(255,153,102,.7);            /* literal-ok: section 4.1 focus border - --ll-accent-3 at 70%, a one-off alpha */
  box-shadow: 0 0 0 3px rgba(255,153,102,.22);   /* literal-ok: section 4.1 focus ring - 3px spread, --ll-accent-3 at 22%; a box-shadow so the field does not move */
}

/* ---- Inline newsletter field - the second and last field skin ---------- */
.ll-news{ display: flex; gap: .6rem; align-items: center; }   /* literal-ok: newsletter row gap, lifted from ----global footer.txt .ll-news */
.ll-news input{
  height: 38px;                           /* literal-ok: section 4.1 inline-field height */
  width: 260px; max-width: 62vw;          /* literal-ok: section 4.1 inline-field width and its viewport cap */
  border-radius: var(--ll-radius-xs);
  border: 1px solid rgba(255,255,255,.25);/* literal-ok: 1px hairline width; .25 is the light-glass control border of the shipped .ll-news input */
  background: rgba(255,255,255,.08);      /* literal-ok: section 4.1 light-glass field well */
  padding: 0 .8rem;                       /* literal-ok: section 4.1 inline-field padding */
  color: var(--ll-text);
}

/* ---- The remaining E9 classes: choice, check, hint, alert -------------- */
/* .ll-choice is .ll-pill plus an input, so it takes the pill radius and the
   pill border - NOT a new surface type (E9). */
.ll-choice{
  display: flex; align-items: center;
  gap: 8px;                               /* literal-ok: gap between a choice's control and its label */
  background: var(--ll-glass-hi);
  border: 1px solid var(--ll-glass-bd);   /* literal-ok: 1px hairline width, section 3 rule 1 */
  padding: .5rem .7rem;                   /* literal-ok: choice padding, lifted from functions.php .ll-choice */
  border-radius: var(--ll-radius-pill);
}
.ll-choices{ display: flex; gap: 14px; margin: 10px 0; flex-wrap: wrap; }   /* literal-ok: choice-row gap and rhythm, lifted from functions.php .ll-choices */
.ll-check{ display: flex; align-items: flex-start; gap: .6rem; margin: 12px 0; }   /* literal-ok: checkbox row gap and rhythm, lifted from functions.php .ll-check */
.ll-hint{ color: var(--ll-muted); font-size: .9rem; margin: .25rem 0 0; }   /* literal-ok: hint type size and rhythm; the source's #bfc4cc is replaced by --ll-muted rather than inventing a fourth grey */
.ll-alert{ padding: .8rem 1rem; border-radius: var(--ll-radius-sm); margin: 0 0 12px; }   /* literal-ok: alert padding and rhythm, lifted from functions.php .ll-alert */
.ll-alert--success{ background: rgba(0,255,120,.08); border: 1px solid rgba(0,255,120,.25); }   /* literal-ok: status green - a state colour deliberately outside the brand palette, so it is not confusable with an accent */
.ll-alert--error{ background: rgba(255,0,0,.08); border: 1px solid rgba(255,0,0,.25); }         /* literal-ok: status red - a state colour deliberately outside the brand palette */

/* --- 50-placeholders.css --- */
/* ==========================================================================
   50-placeholders.css - .ll-ph, the content placeholder.
   DESIGN_SYSTEM.md section 8 layer 50 + section 4.2, which Sean marked STRICT.

   .ll-ph IS A SURFACE. Section 3 hard rule 3, quoted: the six family classes
   "plus .ll-ph, which borrows .ll-frame's geometry and counts as a surface for
   this rule ... So .ll-ph inside .ll-section is correct; .ll-ph inside .ll-card
   is a violation. This sentence is what the self-test implements - do not
   re-interpret it." It takes --ll-radius-lg, .ll-frame's radius, which is what
   puts it in selftest.py section [12]'s surface set.

   DASHED BORDER, AND THAT IS THE POINT. It is the one place in the system a
   border is not solid: a placeholder must be unmistakable at a glance. Never a
   grey box, never lorem ipsum, never a fake chart, never a stock photo standing
   in for a real asset.

   ITS LABEL STATES WHAT GOES HERE AND WHAT IT WAITS ON - e.g.
   "PORTFOLIO - NO INVESTMENTS MADE", "TEAM PHOTO - PENDING". Errata E14:
   build.py generates the OPEN_SLOTS.md row for every .ll-ph in the build and
   selftest.py asserts set equality in both directions, so an unlisted
   placeholder and an empty label are both build failures. WAVE 0 SHIPS NO
   .ll-ph; this layer is the styling those waves will select.

   [claude-code-opus-5 / bc-front-v1]
   ========================================================================== */

.ll-ph{
  display: grid; place-items: center;
  min-height: 140px;                      /* literal-ok: section 4.2 placeholder minimum height - reserved slot, not a gap */
  background:
    linear-gradient(180deg, var(--ll-glass-hi), rgba(255,255,255,.02)),               /* literal-ok: section 4.2 placeholder fill - top stop is glass-hi token; bottom .02 is a one-off quieter alpha */
    radial-gradient(120% 80% at 10% 0%, rgba(255,102,0,.08), transparent 55%);          /* literal-ok: reserved-slot accent wash - signals unfinished without ugly hatch trash */
  border: 1px solid rgba(255,102,0,.28);  /* literal-ok: 1px reserved-slot accent edge - still unmistakably a placeholder, not content */
  border-radius: var(--ll-radius-lg);
  color: var(--ll-muted);
  font-family: var(--ll-mono);
  font-size: .78rem;                       /* literal-ok: section 4.2 placeholder label size */
  letter-spacing: .06em;                  /* literal-ok: section 4.2 placeholder label tracking */
  text-transform: uppercase;
  text-align: center;
  padding: 22px;                          /* literal-ok: keeps a long label off the edge */
  box-shadow: var(--ll-shadow);
}

/* --- 60-header-footer.css --- */
/* ==========================================================================
   60-header-footer.css - page chrome.
   DESIGN_SYSTEM.md section 8 layer 60.

   THE HEADER IS THE ONE PLACE THAT USES THE HEADER GEOMETRY TOKENS. Errata E1
   and E2, quoted: ".ll-header uses var(--ll-radius-header)" and ".ll-header
   uses var(--ll-shadow-header)". Everything that is a content SURFACE uses
   --ll-radius (18px) and --ll-shadow (0 10px 30px rgba(0,0,0,.35)). Conflating
   the two is the exact error E1/E2 correct, so the two tokens exist and each
   has one caller.

   SCOPE, AND WHOSE FILE THIS IS. Errata E8 gives W1-chrome the header ELEMENT:
   it builds a <header> from ---global header.txt and carries no <head>, no
   meta, no canonical, no robots and no og/twitter tag out of either header
   source, and its nav items come from BUILD_PACKET.md section 5, never from
   either shipped header. This layer is the chrome's CSS only. W1-chrome may
   extend it; it should not need to restate any of it.

   STICKY, NOT FIXED, AND THAT IS DELIBERATE. Errata E8 records that
   Liquid Link Header.txt is position:fixed at 78px with NO padding-top on body,
   so content renders underneath it. ---global header.txt compensates with
   body{ padding-top: var(--ll-header-h) }. position:sticky needs neither
   compensator and cannot desynchronise from it, so the failure mode E8 names
   cannot recur.

   [claude-code-opus-5 / bc-front-v1]
   ========================================================================== */

/* ---- Skip link - _layouts/base.html emits <a class="ll-skip" href="#main"> */
.ll-skip{
  position: absolute; left: -9999px;      /* literal-ok: off-canvas until focused - the standard skip-link park position */
  top: 0;
  background: var(--ll-bg-deep);
  color: var(--ll-text);
  padding: .6rem 1rem;                    /* literal-ok: skip-link padding */
  border-radius: var(--ll-radius-sm);
  z-index: 3;
}
.ll-skip:focus{ left: var(--ll-pad-x); }

/* ---- Header chrome ----------------------------------------------------- */
.ll-header{
  position: sticky; top: 0;
  z-index: 2;
  min-height: var(--ll-header-h);
  display: flex; align-items: center;
  gap: 20px;                              /* literal-ok: gap between the logo, the nav and the header's trailing action - not cramped */
  padding-inline: var(--ll-pad-x);
  background: var(--ll-glass);
  border-bottom: 1px solid rgba(255,102,0,.35);   /* literal-ok: accent hairline under sticky header - premium chrome cue, not a surface border substitute for content bubbles */
  border-radius: var(--ll-radius-header);
  box-shadow: var(--ll-shadow-header);
  backdrop-filter: blur(16px);             /* literal-ok: stronger glass blur on sticky header - premium chrome */
  -webkit-backdrop-filter: blur(16px);     /* literal-ok: stronger glass blur on sticky header, WebKit prefix */
}
.ll-header__nav{ display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }   /* literal-ok: nav item spacing - single-row desktop, never orphan CTA wrap */
.ll-header__nav a{ color: var(--ll-text); text-decoration: none; font-weight: 600; }
.ll-header__nav a:hover,
.ll-header__nav a[aria-current="page"]{ color: var(--ll-accent); }

/* ---- Footer ------------------------------------------------------------ */
.ll-footer{
  background: var(--ll-bg-deep);
  border-top: 1px solid var(--ll-glass-bd);   /* literal-ok: 1px hairline width, section 3 rule 1 */
  color: var(--ll-muted);
  margin-top: clamp(64px, 11vw, 120px);       /* literal-ok: footer stand-off, matching .ll-section's block rhythm */
}
.ll-footer__inner{
  max-width: var(--ll-max-wide);
  margin-inline: auto;
  padding: 32px var(--ll-pad-x);              /* literal-ok: footer block padding - taller with increased page inset */
  display: flex; flex-direction: column;
  gap: 32px;                                  /* literal-ok: gap between the footer's brand block and its column row */
}
.ll-footer__cols{ display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }   /* literal-ok: footer column gutter, lifted from ----global footer.txt */
.ll-footer__col{ flex: 1 1 240px; min-width: 220px; }   /* literal-ok: footer column basis and floor, lifted from ----global footer.txt */
.ll-footer__col h3{
  margin: 0 0 .4rem;                          /* literal-ok: footer heading rhythm */
  color: var(--ll-text);
  font-size: 1rem;                            /* literal-ok: footer heading size - a column head, not a page heading, so no type token applies */
  font-weight: 800;
  border-bottom: 2px solid rgba(255,102,0,.4);/* literal-ok: section 5 footer heading underscore - 2px is a rule under text, not the section 3 rule 1 surface hairline; the tint is a one-off accent alpha */
  padding-bottom: 2px;                        /* literal-ok: section 5 footer heading underscore offset */
}
.ll-footer__col ul{ list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }   /* literal-ok: footer link list rhythm, lifted from ----global footer.txt */
.ll-footer__col a{ color: var(--ll-muted); text-decoration: none; font-size: .95rem; transition: var(--ll-t-fast); }   /* literal-ok: footer link size, lifted from ----global footer.txt */
.ll-footer__col a:hover{ color: var(--ll-accent); }

/* ==========================================================================
   W1-chrome EXTENSION - the header element's own parts, the drawer, and the
   two footer blocks the chrome partials introduce.

   THIS SECTION ONLY APPENDS. Every rule W0-css landed above is untouched: the
   header's geometry, the skip link, the footer inner/cols/col rules, the
   -header radius and shadow tokens, and the two nav rules `.ll-header__nav a`
   and `.ll-header__nav a:hover, .ll-header__nav a[aria-current="page"]` are all
   still exactly as that item wrote them, and this file's own header comment
   ("W1-chrome may extend it; it should not need to restate any of it") is the
   contract being kept. Departure 5 below is how this extension outranks those
   last two rules WITHOUT editing them, and it is checked rather than asserted.

   THE SOURCE IS BH26/liquidlink.net/HTML/---global header.txt, and nothing comes
   from Liquid Link Header.txt (DESIGN_SYSTEM_ERRATA.md E8). The whole .ll-glass
   rule and the whole .ll-sheen::before rule, .ll-link's padding / 10px radius /
   uppercase / .02em tracking / hover lift, the max-width:900px breakpoint and
   the label-plus-checkbox drawer toggle are the parts RECON.md section 5 marks
   byte-identical in both files and therefore safe to lift uncontested.

   FIVE DELIBERATE DEPARTURES, each with its reason. The first four are
   departures from the SOURCE header; the fifth is a departure from the naive
   selector, forced by the cascade rather than by the source:

   1. THE SOURCE'S .ll-cta CLASS NAME IS NOT AVAILABLE. 20-layout.css already
      binds .ll-cta to the hero button row (display:flex; gap:.75rem). Reusing
      the name would have made every header CTA a flex container. The nav CTA is
      .ll-link--cta, a BEM modifier of the class it actually extends.

   2. THE SOURCE'S HARDER BORDER ALPHAS ARE NOT LIFTED. ---global header.txt
      gives .ll-cta and .ll-hamburger a 1px solid rgba(255,255,255,.25) border.
      DESIGN_SYSTEM.md section 3 hard rule 1 is "one hairline, always: 1px solid
      var(--ll-glass-bd)", and errata E3 standardises the shipped .14-.18 range
      onto that one token. Both controls take var(--ll-glass-bd). The white well
      behind each is what distinguishes them, and it is lifted unchanged.

   3. NAV HOVER INK IS --ll-accent-3, NOT --ll-accent, AND THAT IS MEASURED -
      AND, SINCE THE REPAIR BELOW, IT IS ALSO WHAT THE BROWSER RESOLVES.
      DESIGN_SYSTEM.md section 6 rule 6 requires body text at >= 4.5:1 against
      --ll-bg AND against a composited surface, and says to measure. Measured
      (WCAG 2.x sRGB relative luminance) against the header glass composited
      over --ll-bg, and against the two washes composited over that:
        --ll-accent   #ff6600 on the CTA well  rgba(255,255,255,.12) = 3.46:1 FAIL
        --ll-accent   #ff6600 on the hover wash rgba(255,102,0,.10)  = 4.45:1 FAIL
        --ll-accent-2 #ff8844 on the CTA well                        = 4.29:1 FAIL
        --ll-accent-3 #ff9966 on the CTA well                        = 4.84:1 pass
        --ll-accent-3 #ff9966 on the hover wash                      = 6.22:1 pass
        --ll-accent-3 #ff9966 on the header glass                    = 7.08:1 pass
      A nav link is 0.92rem - body text, not large text - so 4.5:1 binds. This is
      the same measurement and the same conclusion 10-base.css records for link
      ink, reached independently for the chrome's own composited backgrounds.
      The LOGO keeps --ll-accent: it is 900 weight at a minimum of 1.25rem =
      20px, which is large text, and it measures 5.06:1 on the header glass and
      4.03:1 on the footer brand bubble against a 3:1 large-text floor.

      THESE FIGURES ARE THE bc SKIN'S TOKEN VALUES. On a /liquidlink/** route
      70-skin-ll.css re-declares --ll-accent-3: var(--ll-accent-2), so the hover
      ink there resolves to #ff8844. Re-measured on that skin, every combination
      the markup can actually reach still clears 4.5:1: a plain nav link hovers
      to #ff8844 on the hover wash = 5.51:1, and a CTA hovers to #ff8844 on the
      CTA HOVER FILL - not on the well, because background REPLACES it - =
      5.11:1. The one sub-threshold pair, #ff8844 on the un-hovered CTA well at
      4.29:1, is not reachable: the un-hovered CTA's ink is --ll-text at
      10.16:1. That token override is 70-skin-ll.css's call and this layer does
      not touch it; it is recorded here so this comment is not narrower than the
      bundle it describes. Every ratio in this block is re-derived by
      .mac11/runs/2026-08-30_bc-front-v1/W1-chrome-repair/contrast.py.

   4. THE CHECKBOX IS NOT display:none INSIDE THE BREAKPOINT. The source hides it
      outright, which makes it unfocusable - so a keyboard user with JavaScript
      off could never open the drawer, and the CSS-only toggle that exists to
      make the nav work without JavaScript would work only with a mouse. It is
      visually hidden and still focusable inside the breakpoint, hidden outright
      outside it (where the full nav is visible and an invisible tab stop would
      be a trap), and the focus ring is drawn on the hamburger beside it.

   5. THREE SELECTORS ARE SCOPED WITH `.ll-header ` SO THEY WIN THE CASCADE, AND
      THIS IS THE REPAIR THIS FILE'S PREVIOUS VERSION FAILED REVIEW FOR.
      Written unscoped, `.ll-link:hover`, `.ll-link--cta:hover` and
      `.ll-link--up` have specificity (0,2,0), (0,2,0) and (0,1,0). W0-css's
      already-landed pair above - `.ll-header__nav a:hover` and
      `.ll-header__nav a` - are (0,2,1) and (0,1,1) and match the same anchors,
      so W0 won on specificity regardless of source order and the ink measured
      in departure 3 never reached a browser. Scoped, the three are (0,3,0),
      (0,3,0) and (0,2,0) and each beats its W0 competitor: at equal id count a
      class outranks any number of types, so 3 classes beat 2 classes + 1 type,
      and 2 classes beat 1 class + 1 type.

      WHY SCOPING RATHER THAN EDITING W0's RULE. The reviewer offered both
      routes. The alternative - retokening W0's `.ll-header__nav a:hover` line
      in place - is smaller by one selector but not smaller in effect. It fixes
      only the hover pair: `.ll-link--up` at (0,1,0) would still lose to
      `.ll-header__nav a` at (0,1,1), so a second edit to a W0 rule would be
      needed anyway. It would also retoken
      `.ll-header__nav a[aria-current="page"]`, which is grouped with that
      selector and is a state no partial in this bundle emits - change this item
      was not asked for. Scoping instead keeps every rule W0-css landed
      byte-identical, which is what this file's own header comment above
      promises ("W1-chrome may extend it; it should not need to restate any of
      it"). Both W0 rules stay live and stay correct: they still decide the
      PLAIN ink for a header nav link, and they and the scoped `.ll-link` rule
      all name --ll-text there, so the two layers agree rather than compete.

      THE CTA HOVER IS SCOPED FOR A SECOND REASON. Scoping the generic hover to
      (0,3,0) while leaving `.ll-link--cta:hover` at (0,2,0) would have let the
      generic rule outrank the CTA's own and replace the CTA's .15 hover fill
      with the plain .10 wash. Scoped, both are (0,3,0), and the tie is broken
      by source order in the CTA's favour - which is the third pair selftest.py
      [15r] asserts.

      NONE OF THIS IS VISIBLE IN A DIFF, so it is not left to inspection.
      selftest.py [15s] parses EVERY rule in dist/css/site.css, computes each
      one's (id, class, type) specificity, resolves the winner over the whole
      matching set by specificity and then source order, and asserts the winning
      `color` declaration for each header nav link class in each state.

   STATUS: REVIEW. [claude-code-opus-5 / bc-front-v1]
   ========================================================================== */

/* ---- The corner light lift, lifted whole from ---global header.txt ------
   No position:relative here on purpose. The source pairs .ll-sheen{position:
   relative} with the ::before, but both of this file's users are already
   positioned - .ll-header is sticky, .ll-drawer is absolute - and a bare
   .ll-sheen{position:relative} would tie with .ll-header on specificity and
   turn the sticky header static depending only on source order. */
.ll-sheen::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to bottom right, rgba(255,255,255,.25), transparent 45%);  /* literal-ok: the sheen ramp, lifted whole from ---global header.txt .ll-sheen::before - a one-off white alpha and the 45% stop where it dies out */
  mix-blend-mode: soft-light;
}

/* ---- The text logo (---global header.txt "HTML/CSS LOGO (text-based)") --- */
.ll-logo{
  display: inline-flex; align-items: center;
  gap: .25rem;                            /* literal-ok: the word gap inside the two-span text lockup, lifted from ---global header.txt .ll-logo; it is what puts the space in "Build Capital" */
  font-family: var(--ll-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);  /* literal-ok: text-logo size ramp, lifted from ---global header.txt .ll-logo; no type token names a wordmark */
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ll-text);
}
.ll-logo__accent{ color: var(--ll-accent); }
.ll-logo:hover .ll-logo__accent,
.ll-logo:focus-visible .ll-logo__accent{ color: var(--ll-accent-2); }

/* ---- Logo: no underline, a glow instead  [cowork-opus-5 / bc-logo-glow] ----
   `.ll-logo` already sets text-decoration:none, but 10-base.css carries the
   site-wide `a:hover{ text-decoration: underline }`, which has higher
   specificity than a bare class and so re-underlined the wordmark on hover.
   These rules restate none at `.ll-logo:hover` (0,2,0 beats 0,1,1) and put a
   glow where the underline was. The resting glow is deliberately faint so the
   wordmark reads as lit rather than neon on a finance front; hover and
   keyboard focus raise it. */
.ll-logo{
  transition: text-shadow var(--ll-t-fast);
}
.ll-logo__accent{
  text-shadow: 0 0 10px rgba(255, 102, 0, .55), 0 0 28px rgba(255, 102, 0, .28);   /* literal-ok: louder resting glow on the accent word; rgba of --ll-accent #ff6600 */
}
.ll-logo:hover,
.ll-logo:focus-visible{
  text-decoration: none;                          /* kills the 10-base.css a:hover underline on the wordmark only */
}
.ll-logo:hover .ll-logo__accent,
.ll-logo:focus-visible .ll-logo__accent{
  text-shadow: 0 0 14px rgba(255, 102, 0, .85), 0 0 36px rgba(255, 102, 0, .45);  /* literal-ok: raised glow, same accent hue at two radii - v2 louder */
}
@media (prefers-reduced-motion: reduce){
  .ll-logo{ transition: none; }                   /* the glow still applies; only the fade is dropped */
}

/* ---- Nav sets - one fragment, spliced into the bar and into the drawer -- */
.ll-header__nav{ margin-inline-start: auto; }
.ll-navset{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .25rem;                            /* literal-ok: nav item gap, lifted from ---global header.txt .ll-nav */
}

/* ---- Nav links, lifted from ---global header.txt .ll-link --------------- */
.ll-link{
  color: var(--ll-text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .02em;                  /* literal-ok: nav-link tracking, lifted from ---global header.txt .ll-link */
  padding: .45rem .55rem;                  /* literal-ok: nav-link padding - tightened so desktop nav stays one row */
  border-radius: var(--ll-radius-xs);
  font-weight: 600;
  font-size: .78rem;                      /* literal-ok: nav-link type size - slightly smaller for single-row desktop chrome */
  transition: var(--ll-t-fast);
}
/* The next three selectors carry a `.ll-header ` prefix that the source header
   does not have, and it is load-bearing, not decorative - see departure 5. Each
   one sets a colour that W0-css's `.ll-header__nav a` / `.ll-header__nav a:hover`
   pair above would otherwise outrank on specificity, so unscoped they would
   parse, validate and never paint. The prefix takes them from (0,2,0)/(0,1,0) to
   (0,3,0)/(0,2,0), which is what makes them bind. Do not remove it, and do not
   add a rule for these classes at lower specificity expecting it to win.
   selftest.py [15s] resolves the whole matching rule set and will go red if this
   changes; its mutation control lowers exactly this prefix back off again. */
.ll-header .ll-link:hover{
  color: var(--ll-accent-3);
  background: rgba(255,102,0,.10);        /* literal-ok: nav-link hover wash - a one-off accent alpha lifted from ---global header.txt .ll-link:hover */
  transform: translateY(-1px);            /* literal-ok: nav-link hover lift, lifted from ---global header.txt .ll-link:hover */
}
/* The link out of the Liquid Link section and back to the top level reads as
   secondary, so it takes the muted ink - 10.01:1 on the header glass. */
.ll-header .ll-link--up{ color: var(--ll-muted); }
.ll-link--cta{
  border: 1px solid var(--ll-glass-bd);   /* literal-ok: 1px hairline width, section 3 rule 1 - the source's .25 alpha is NOT lifted, see departure 2 above */
  background: rgba(255,255,255,.12);      /* literal-ok: header CTA well - a one-off white alpha lifted from ---global header.txt .ll-cta */
}
.ll-header .ll-link--cta:hover{
  color: var(--ll-accent-3);
  background: rgba(255,102,0,.15);        /* literal-ok: header CTA hover fill - a one-off accent alpha lifted from ---global header.txt .ll-cta:hover. background REPLACES the well rather than stacking on it, which is why the measured 5.77:1 is better than the well's own 4.84:1 */
}

/* ---- One header partial, two sections. The data-skin attribute
   _layouts/base.html emits (errata E17) decides which nav SET is shown, which
   is how /liquidlink/** gets the section nav without a second header partial.
   These two rules come after .ll-drawer .ll-navset below on purpose: they tie
   with it on specificity and must win. --------------------------------- */

/* ---- The mobile drawer, CSS-only. Lifted from ---global header.txt ------
   Right-flush, scrolling (max-height + overflow:auto - the abandoned header's
   drawer has neither), rounded on the left edge only, and its :checked toggle
   works at any width. position:absolute against the sticky header rather than
   the source's position:fixed, so top:100% follows the header's real height
   instead of assuming --ll-header-h. */
.ll-drawer{
  display: none;
  position: absolute;
  top: 100%; right: 0;                    /* literal-ok: the drawer hangs off the bottom edge of the header box, flush to its right */
  width: min(92vw, 420px);                /* literal-ok: drawer width - viewport share and hard cap, lifted from ---global header.txt .ll-drawer */
  max-height: calc(100vh - var(--ll-header-h) - 12px);   /* literal-ok: the 12px is the breathing gap under a full-height drawer, lifted from ---global header.txt .ll-drawer */
  overflow: auto;
  border-radius: var(--ll-radius-header) 0 0 var(--ll-radius-header);
  box-shadow: var(--ll-shadow-header);
  padding: 12px;                          /* literal-ok: drawer padding, lifted from ---global header.txt .ll-drawer */
  text-align: right;
}
.ll-drawer .ll-navset{ display: block; }
.ll-drawer .ll-link{
  display: block;
  margin: 6px 0;                          /* literal-ok: drawer row rhythm, lifted from ---global header.txt .ll-drawer .ll-link */
  padding: .8rem 1rem;                    /* literal-ok: drawer row padding - a full-width touch target, lifted from ---global header.txt .ll-drawer .ll-link */
  font-size: 1rem;                        /* literal-ok: drawer row type size, lifted from ---global header.txt .ll-drawer .ll-link; no type token names a nav row */
}
.ll-menu-toggle:checked ~ .ll-drawer{ display: block; }

[data-skin="bc"] .ll-navset--ll{ display: none; }
[data-skin="ll"] .ll-navset--bc{ display: none; }

/* ---- The hamburger: a label the checkbox is bound to, three bars -------- */
.ll-menu-toggle{ display: none; }
.ll-hamburger{
  display: none;
  margin-inline-start: auto;
  cursor: pointer;
  padding: .5rem .6rem;                   /* literal-ok: hamburger hit area, lifted from ---global header.txt .ll-hamburger */
  border-radius: var(--ll-radius-xs);
  border: 1px solid var(--ll-glass-bd);   /* literal-ok: 1px hairline width, section 3 rule 1 - the source's .25 alpha is NOT lifted, see departure 2 above */
  background: rgba(255,255,255,.10);      /* literal-ok: hamburger well - a one-off white alpha lifted from ---global header.txt .ll-hamburger */
}
.ll-hamburger span{
  display: block;
  width: 22px; height: 2px;               /* literal-ok: hamburger bar box, lifted from ---global header.txt .ll-hamburger span */
  margin: 5px 0;                          /* literal-ok: hamburger bar spacing, lifted from ---global header.txt .ll-hamburger span */
  border-radius: 2px;                     /* literal-ok: hamburger bar cap - the rounded bars RECON.md section 5 names as one of this header's advantages; smaller than every radius token */
  background: var(--ll-text);
}
/* The checkbox carries the focus, the label carries the ring. */
.ll-menu-toggle:focus-visible ~ .ll-hamburger{
  outline: 2px solid var(--ll-accent-3);  /* literal-ok: focus ring width, matching 10-base.css's :focus-visible */
  outline-offset: 2px;                    /* literal-ok: focus ring offset, matching 10-base.css's :focus-visible */
}

@media (max-width: 1180px){               /* literal-ok: header breakpoint raised so nav never wraps to an orphan CONTACT row before hamburger */
  .ll-header__nav{ display: none; }
  .ll-hamburger{ display: block; }
  /* Visually hidden and STILL FOCUSABLE - see departure 4 above. */
  .ll-menu-toggle{
    display: block;
    position: absolute;
    width: 1px; height: 1px;              /* literal-ok: 1px visually-hidden box - the control is the label beside it */
    opacity: 0;
    margin: 0;
    pointer-events: none;
  }
}

/* ---- Footer brand block ------------------------------------------------ */
.ll-footer__brand{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px;                              /* literal-ok: gap between the footer logo, its line and the social row, lifted from ----global footer.txt .ll-brandbubble */
}
.ll-footer__tag{
  margin: 0;
  flex: 1 1 240px;                        /* literal-ok: the brand line takes the remaining row and wraps below the logo under it, on the same basis as a footer column */
}

/* --- 70-skin-ll.css --- */
/* ==========================================================================
   70-skin-ll.css - the Liquid Link section skin. TOKEN OVERRIDES ONLY.
   DESIGN_SYSTEM.md section 8 layer 70.

   DESIGN_SYSTEM.md section 1, quoted: the skin "is expressed ONLY by adding
   data-skin="ll" on <body> for /liquidlink/**, which re-declares --ll-accent*
   and swaps display type to --ll-mono for eyebrows and stat figures. No second
   stylesheet, no second component set. One system, two skins."

   THE HOOK EXISTS. Errata E17 found that nothing emitted the attribute this
   layer selects on, which would have made the whole layer unreachable CSS.
   W0-scaffold-repair adds it: _layouts/base.html emits
   <body data-build="..." data-skin="{{ var: skin }}">, front matter may set
   "skin": "ll", everything else defaults to "bc", and build.py fails the build
   on any value outside {bc, ll}. selftest.py section [12] asserts that this
   layer's attribute selector names an attribute base.html actually emits, so
   this layer can never silently go dead again.

   ZERO LITERALS, AND THAT IS A DECISION. Every override below is expressed
   through an existing token, so the skin cannot introduce a fourth orange -
   which is the stated point of section 8's gate. Sean's licence
   ("colors are not strict") permits a distinct Liquid Link hue, and
   MASTER_PLAN_BIBLE.md section 28 asks for "related but more
   aggressive/digital"; picking that hue is a colour decision for Sean, not one
   to invent inside a CSS layer. Recorded in LANDING.md as the one open colour
   call this item deliberately did not take. Note also that
   Liquid Link Header.txt:36 carries a THIRD shipped orange, #ff5a1f, which
   errata E4 discards on the record - it is not revived here.

   [claude-code-opus-5 / bc-front-v1]
   ========================================================================== */

[data-skin="ll"]{
  /* The two-stop accent gradient closes up: the tail moves from --ll-accent-3
     to --ll-accent-2, which is the tighter, hotter run of the same hue family.
     Section 1's colour licence: "If the accent moves, --ll-accent-3 and the
     focus ring move with it and stay the same hue family." */
  --ll-accent-3: var(--ll-accent-2);

  /* Display type for eyebrows and stat figures becomes the mono face.
     .ll-eyebrow and .ll-stat__n in 30-components.css read --ll-display; on the
     default bc skin 00-tokens.css points it at --ll-font. */
  --ll-display: var(--ll-mono);
}

/* --- 90-utilities.css --- */
/* ==========================================================================
   90-utilities.css - .ll-muted, .ll-center, .ll-grad, .ll-hide.
   DESIGN_SYSTEM.md section 8 layer 90 - last in the cascade, so a utility wins
   over the component it is put on, which is the only reason a utility exists.
   [claude-code-opus-5 / bc-front-v1]
   ========================================================================== */

.ll-muted{ color: var(--ll-muted); }
.ll-center{ text-align: center; }

/* Section 5's gradient text. The two outer stops are the design system's three
   named gradient hexes; the middle stop is the accent token at its 60% run. */
.ll-grad{
  background: linear-gradient(90deg, #ffb78a, var(--ll-accent) 60%, #ffd2be);   /* literal-ok: section 5 gradient-text stops - #ffb78a and #ffd2be are two of the three one-off gradient hexes section 8 names at authoring time; 90deg and the 60% run are the gradient's geometry */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ll-hide{ display: none !important; }

/* ---- Brand scrollbar: thin rail, fully-rounded pill thumb --------------
   Sean's brief: an iPhone-style scrollbar - thin and capsule, not a fat
   Windows bar. Every colour and the pill radius come from tokens, so this
   block adds exactly ONE literal to section 8's gate: the rail thickness.
   `transparent` and `thin` are CSS keywords, not literal atoms, and
   border-radius uses --ll-radius-pill rather than writing 999px, which would
   duplicate a token value and fail [12c].
   [grok / bc-style-rebuild] */
html{
  scrollbar-width: thin;
  scrollbar-color: var(--ll-accent) transparent;
}
::-webkit-scrollbar{ width: 6px; height: 6px; }   /* literal-ok: scrollbar rail thickness - a 6px rail is the thin iPhone-style capsule; no token names a scrollbar thickness, the --ll-radius-* tokens are radii and --ll-max* are page measures */
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: var(--ll-accent);
  border-radius: var(--ll-radius-pill);
}
::-webkit-scrollbar-thumb:hover{ background: var(--ll-accent-2); }
::-webkit-scrollbar-corner{ background: transparent; }