/* LAOS friendly theme (6 Nov 2026): the welcoming sign-in's language across the whole public site.
   A light ground with white panels; photographs in soft frames with the words set over them; teal actions;
   labels in Manrope, not mono; softer corners. Loaded last, it re-themes the blueprint layer and changes
   no content: every section, figure, film and note stays where it was.
   Values follow the LAOS Design System (claude.ai/artifact/Srq2oqZH1eofMCQkwXPuXr): paper, sheet, band, ink,
   line; the label style; the Card rule; radius-l for cards and frames; ease-settle for motion. */
body[data-public-site]{
  --f-ground:#f5f1e8;--f-raised:#ffffff;--f-sage:#ece5d6;--f-ink:#0b1b1f;--f-soft:#24383d;--f-muted:#44595d;--f-faint:#6a7f83;
  --f-rule:#ddd6c8;--f-teal:#055f5b;--f-teal-deep:#044a47;--f-mint:#8fd0c6;--f-mint-light:#b5e3dc;--f-wash:rgb(5 95 91 / .07);
  --f-radius:16px;--f-radius-s:10px;--f-shadow:0 28px 64px -36px rgb(11 27 31 / .38);--f-ease:cubic-bezier(.2,.8,.2,1);
  --paper:var(--f-ground);--chalk:var(--f-raised);--sage:var(--f-sage);--ink:var(--f-ink);--muted:var(--f-muted);--rule:var(--f-rule);--teal:var(--f-teal);
  --bp-ground:var(--f-ground);--bp-raised:var(--f-raised);--bp-line:var(--f-rule);--bp-line-strong:var(--f-faint);
  --bp-text:var(--f-ink);--bp-soft:var(--f-muted);--bp-muted:var(--f-muted);--bp-mint:var(--f-teal);
  background:var(--f-ground);color:var(--f-ink);
}

/* Labels: the brand's label style. Manrope 13/18 SemiBold, sentence case, no letter-spacing. */
body[data-public-site] :is(.eyebrow,.nav-kicker,.section-index>span:first-child,.row-number,.hero-caption span,.sample-pill,.journey-marker span,.journey-index a>span,.tour-kicker,.tour-kicker span,.tour-figure figcaption,.relay-chain em,.phone figcaption,.workflow-number,.trust-point>span,.film-transcript li span){
  font-family:Manrope,Arial,sans-serif;font-size:13px;line-height:18px;font-weight:600;letter-spacing:0;text-transform:none}
body[data-public-site] .eyebrow{color:var(--f-teal)}

/* Small text never falls under 13px; links and quiet notes read at 14px. */
body[data-public-site] :is(.text-link,.login-link,.menu-toggle,.button-small,.footer-links a,.workflow li>span:not(.workflow-number),.journey-handover,.vision-boundary,.film-hero figcaption,.film-hero figcaption span,.film-play-text span,.journey-index a,.dialog-actions .button,.waitlist-form-panel summary,.pilot-form-panel summary){font-size:14px;line-height:20px}
body[data-public-site] :is(.footer-top p,.footer-bottom,.footer-bottom a,.waitlist-small-print,.pilot-processing-note,.waitlist-note,.field-guide-copy span,.field-guide-copy p,.precision-row small,.audience-dropdown span,.article-back,.waitlist-optional>summary>span){font-size:13px;line-height:20px}
body[data-public-site] :is(#waitlist-form,#pilot-form) label{font-size:14px}
body[data-public-site] :is(#waitlist-form,#pilot-form) .consent-label{font-size:13px}
body[data-public-site] :is(#waitlist-form,#pilot-form) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-color:var(--f-faint);border-radius:var(--f-radius-s)}

/* Softer corners: radius-m for controls, radius-l for cards, panels and frames. */
body[data-public-site] :is(.button,.button-small,.text-link.button,input,select,textarea,.audience-dropdown){border-radius:var(--f-radius-s)}
body[data-public-site] :is(.pilot-form-panel,.waitlist-form-panel,.controls-list article,.tour-figure,.relay-chain,.film-transcript,.film-hero,.loop-figure){border-radius:var(--f-radius)}
body[data-public-site] .relay-chain{overflow:hidden}

/* Actions: teal, the one accent. A white button stays only where it sits on a photograph. */
body[data-public-site] :is(.button,.button-chalk,.header-enquiry){background:var(--f-teal);border-color:var(--f-teal);color:#fff}
body[data-public-site] :is(.button,.button-chalk,.header-enquiry):hover{background:var(--f-teal-deep);border-color:var(--f-teal-deep);color:#fff}
body[data-public-site] .hero-a .button-chalk{background:#fff;border-color:#fff;color:var(--f-ink)}
body[data-public-site] .hero-a .button-chalk:hover{background:var(--f-sage);border-color:var(--f-sage);color:var(--f-ink)}
body[data-public-site] .text-link{color:var(--f-teal)}

/* The header. At rest it sits on the page in paper, the mark in ink and teal. Once the page moves it turns to
   ink, the mark in white and mint, in one settled fade. header.mjs sets data-tone, and data-tone-ready only after
   the first frame, so a page opened halfway down starts dark without fading in. The page you are on keeps its green
   underline in both tones: teal on paper, mint on ink. */
body[data-public-site] .site-header{background:rgb(245 241 232 / .9);color:var(--f-ink);border-bottom:1px solid transparent;backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px)}
body[data-public-site] .site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgb(11 27 31 / .96);opacity:0;pointer-events:none}
body[data-public-site] .site-header :is(.desktop-nav>a,.audience-menu>summary,.login-link,.menu-toggle,.wordmark){color:var(--f-ink)}
body[data-public-site] .site-header .desktop-nav>a[aria-current="page"]{color:var(--f-teal);border-bottom-color:var(--f-teal)}
body[data-public-site] .wordmark{--brand-mob:var(--f-teal)}
body[data-public-site] .mobile-panel-heading .wordmark{--brand-mob:var(--f-mint)}
body[data-public-site] .site-header[data-tone="dark"]{color:#fff;border-bottom-color:rgb(255 255 255 / .06)}
body[data-public-site] .site-header[data-tone="dark"]::before{opacity:1}
body[data-public-site] .site-header[data-tone="dark"] :is(.desktop-nav>a,.audience-menu>summary,.login-link,.menu-toggle,.wordmark){color:#fff}
body[data-public-site] .site-header[data-tone="dark"] .desktop-nav>a[aria-current="page"]{color:var(--f-mint);border-bottom-color:#b7f2df}
body[data-public-site] .site-header[data-tone="dark"] .wordmark{--brand-mob:var(--f-mint)}
body[data-public-site] .site-header[data-tone="dark"] .header-enquiry{background:var(--f-mint);border-color:var(--f-mint);color:var(--f-ink)}
body[data-public-site] .site-header[data-tone="dark"] .header-enquiry:hover{background:var(--f-mint-light);border-color:var(--f-mint-light);color:var(--f-ink)}
body[data-public-site] .site-header :is(.wordmark,.desktop-nav>a,.audience-menu>summary,.header-actions>a,.header-actions>button):focus-visible{outline:2px solid var(--f-teal);outline-offset:4px;border-radius:6px}
body[data-public-site] .site-header[data-tone="dark"] :is(.wordmark,.desktop-nav>a,.audience-menu>summary,.header-actions>a,.header-actions>button):focus-visible{outline-color:var(--f-mint)}
body[data-public-site] .site-header[data-tone-ready]{transition:color .45s var(--f-ease),border-color .45s var(--f-ease)}
body[data-public-site] .site-header[data-tone-ready]::before{transition:opacity .45s var(--f-ease)}
body[data-public-site] .site-header[data-tone-ready] :is(.desktop-nav>a,.audience-menu>summary,.login-link,.menu-toggle,.wordmark){transition:color .45s var(--f-ease),border-color .45s var(--f-ease)}
body[data-public-site] .site-header[data-tone-ready] .brand-mob{transition:fill .45s var(--f-ease),stroke .45s var(--f-ease)}
body[data-public-site] .site-header[data-tone-ready] .header-enquiry{transition:background-color .45s var(--f-ease),border-color .45s var(--f-ease),color .45s var(--f-ease)}
body[data-public-site] .site-header[data-tone-ready] .header-enquiry:hover{transition-duration:.16s}

/* The home hero: the pasture in a soft frame, the words over it, as on the sign-in screen. */
body[data-public-site] .hero-a{margin:0 16px;border-radius:var(--f-radius);overflow:hidden}
body[data-public-site] .hero-a :is(.eyebrow,.hero-eyebrow){color:var(--f-mint)}
body[data-public-site] .hero-a .text-link{color:#fff}
body[data-public-site] .hero-mobile-title{background:var(--f-ground);color:var(--f-ink)}
body[data-public-site] .hero-mobile-title :is(h1,h1 span){color:var(--f-ink)}

/* Page heroes on the light ground, the photograph framed beside the words, its caption inside the frame. */
body[data-public-site] :is(.subpage-hero,.waitlist-hero){background:var(--f-ground);color:var(--f-ink)}
body[data-public-site] :is(.subpage-hero,.waitlist-hero) :is(h1,h2,h3){color:var(--f-ink)}
body[data-public-site] :is(.subpage-hero,.waitlist-hero) :is(p,li,.subpage-intro){color:var(--f-muted)}
body[data-public-site] :is(.subpage-hero,.waitlist-hero) figure{border-radius:var(--f-radius);overflow:hidden;box-shadow:var(--f-shadow);background:var(--f-raised)}
body[data-public-site] :is(.subpage-hero,.waitlist-hero) figure img{display:block}
body[data-public-site] :is(.subpage-hero,.waitlist-hero) figcaption{margin:0;padding:12px 20px 14px;font-size:13px;line-height:18px;color:var(--f-muted);background:var(--f-raised)}

/* The bands that were dark: light panels, one tone apart, so the rhythm of the page stays. */
body[data-public-site] :is(.trust-section,.controls-section,.chapters){background:var(--f-sage);color:var(--f-ink)}
body[data-public-site] .closing{background:var(--f-raised);color:var(--f-ink);border-top:1px solid var(--f-rule)}
body[data-public-site] .tour:not(.film-story){background:var(--f-raised);color:var(--f-ink)}
body[data-public-site] :is(.trust-section,.controls-section,.chapters,.closing,.tour) :is(h1,h2,h3,h4,strong,b,dt){color:var(--f-ink)}
body[data-public-site] :is(.trust-section,.controls-section,.chapters,.closing,.tour) :is(p,li,dd,figcaption,small,.tour-note){color:var(--f-muted)}
body[data-public-site] .tour .tour-points li{color:var(--f-ink)}
body[data-public-site] .tour .tour-points li::before{background:var(--f-teal)}
body[data-public-site] .tour .tour-item{border-top-color:var(--f-rule)}

/* Framed screens and films: the frame holds its caption with room on every side. */
body[data-public-site] .tour-figure{border-color:var(--f-rule);background:var(--f-raised);box-shadow:var(--f-shadow)}
body[data-public-site] .tour-figure figcaption{padding:14px 20px;color:var(--f-muted)}
body[data-public-site] .phone figcaption{padding:14px 8px 8px;color:#c7d4d2}
body[data-public-site] .film-hero figcaption{padding:14px 20px}
body[data-public-site] :is(.film-hero,.loop-figure,.phone){box-shadow:var(--f-shadow)}
/* The film: the whole still is the Play button, at every width, with one round mark and a ring that flows outward.
   The length and size sit in the caption. Jacob asked for the flowing mark (6 Nov 2026); it rests for reduced motion. */
body[data-public-site] .film-play,body[data-public-site] .film-play:hover{left:0;top:0;transform:none;width:100%;height:auto;aspect-ratio:16 / 9;display:grid;place-items:center;padding:0;border-radius:0;background:transparent;box-shadow:none}
body[data-public-site] .film-play[hidden]{display:none}
body[data-public-site] .film-play:focus-visible{outline-offset:-4px}
body[data-public-site] .film-play:not([disabled]) .film-play-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body[data-public-site] .film-play-icon{position:relative;z-index:1;width:76px;height:76px;padding:0;border-radius:50%;background:var(--f-teal);color:#fff;box-shadow:0 12px 32px -12px rgb(11 27 31 / .28);transition:transform .45s var(--f-ease),background-color .16s}
body[data-public-site] .film-play:hover .film-play-icon{transform:scale(1.06);background:var(--f-teal-deep)}
body[data-public-site] .film-play:active .film-play-icon{transform:scale(.96)}
body[data-public-site] .film-play:not([disabled])::before,body[data-public-site] .film-play:not([disabled])::after{content:"";position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:2px solid var(--f-teal);opacity:0;pointer-events:none;animation:laos-play-flow 2.8s var(--f-ease) infinite}
body[data-public-site] .film-play:not([disabled])::after{animation-delay:1.4s}
@keyframes laos-play-flow{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.9);opacity:0}}
/* If the film cannot load, the still stays, veiled, with a quiet mark and the reason on a sheet beneath it. */
body[data-public-site] .film-play[disabled]{background:rgb(245 241 232 / .72);cursor:default}
body[data-public-site] .film-play[disabled] .film-play-icon{opacity:.4;transform:none}
body[data-public-site] .film-play[disabled] .film-play-text{position:absolute;left:50%;top:calc(50% + 54px);transform:translateX(-50%);padding:8px 14px;border:1px solid var(--f-rule);border-radius:var(--f-radius-s);background:var(--f-raised);white-space:nowrap}
body[data-public-site] .film-play[disabled] .film-play-text b{color:var(--f-ink);font-size:14px;font-weight:700}
body[data-public-site] .film-play[disabled] .film-play-text span{display:none}
body[data-public-site] .film-play .film-play-text b{color:#fff}
body[data-public-site] .loop-control{min-height:44px;padding:8px 16px 8px 10px}

/* Cards: one group of facts on a sheet, set on the band. 1px line, radius-l, 24px inside, 16px apart, no shadow.
   Siblings share one height, and an action sits at the foot of its card. */
body[data-public-site] .controls-list{display:grid;gap:16px;align-items:stretch}
body[data-public-site] .controls-list article{display:flex;flex-direction:column;margin:0;padding:24px;background:var(--f-raised);border:1px solid var(--f-rule)}
body[data-public-site] .controls-list article h3{margin:0}
body[data-public-site] .controls-list article p{margin:12px 0 0}
body[data-public-site] .controls-list article>.button{margin-top:auto;align-self:flex-start}
body[data-public-site] .controls-list article>p:not(:last-child){margin-bottom:24px}
body[data-public-site] #questionnaires .controls-list{grid-template-columns:repeat(2,minmax(0,1fr))}
@container site (max-width:760px){
  body[data-public-site] .controls-list,body[data-public-site] #questionnaires .controls-list{grid-template-columns:minmax(0,1fr)}
  body[data-public-site] .controls-list article{padding:20px}
}

/* The footer: white at every width. */
body[data-public-site] .site-footer{background:var(--f-raised);color:var(--f-ink);border-top:1px solid var(--f-rule)}
body[data-public-site] .site-footer :is(a,p,span,small){color:var(--f-muted)}
body[data-public-site] .site-footer .wordmark{color:var(--f-ink)}

/* The waitlist: the herd photograph in a soft frame, the words in white over it, the form on its white panel.
   The panel is a card: a line, not a shadow. */
body[data-public-site] .waitlist-hero{background:var(--f-ground)}
body[data-public-site] .waitlist-hero:before{inset:16px;border-radius:var(--f-radius);background:linear-gradient(90deg,rgb(11 27 31 / .84) 0%,rgb(11 27 31 / .62) 55%,rgb(11 27 31 / .3) 100%),url('pasture-herd-wide.webp') center/cover}
body[data-public-site] .waitlist-story :is(h1,p,.subpage-intro,.waitlist-note){color:#fff}
body[data-public-site] .waitlist-story .eyebrow{color:var(--f-mint)}
body[data-public-site] .waitlist-story .text-link{color:#fff}
body[data-public-site] .waitlist-form-panel{background:var(--f-raised);border:1px solid var(--f-rule);border-radius:var(--f-radius);box-shadow:none}
body[data-public-site] .pilot-form-panel{border-color:var(--f-rule)}

/* The closing band: teal action and links on white. */
body[data-public-site] .closing .eyebrow{margin-left:auto;margin-right:auto}
body[data-public-site] .closing :is(.button,.button-chalk){background:var(--f-teal);border-color:var(--f-teal);color:#fff}
body[data-public-site] .closing .text-link,body[data-public-site] .closing a:not(.button){color:var(--f-teal)}

/* Phones: the words sit on the light ground; only the photograph is framed. */
@media (max-width:760px){
  body[data-public-site] .hero-a{margin:0;border-radius:0;overflow:visible;background:var(--f-ground)}
  body[data-public-site] .hero-a .hero-landscape{margin-inline:16px;width:calc(100% - 32px);border-radius:var(--f-radius);overflow:hidden}
  body[data-public-site] .hero-a .hero-a-content{background:var(--f-ground);color:var(--f-ink)}
  body[data-public-site] .hero-a .hero-a-content :is(h1,p,.hero-support){color:var(--f-ink)}
  body[data-public-site] .hero-a .hero-a-content :is(.button,.button-chalk){background:var(--f-teal);border-color:var(--f-teal);color:#fff}
  body[data-public-site] .hero-a .hero-a-content .text-link{color:var(--f-teal)}
  body[data-public-site] .hero-mobile-title .eyebrow{color:var(--f-teal)}
}

/* What LAOS is: the statement over the film carries the teal label, as every other section does. */
body[data-public-site] .film-story .tour-head .eyebrow{color:var(--f-teal)}

/* The home hero fits one screen at every window size: the header, the hero, and nothing below the fold.
   Desktop: the pasture framed with a 16px gutter on three sides, the words set low on the left over the grass where
   the shade is deepest, the sky left clear, a hairline over the caption. Type follows the window's height as well
   as its width, so a short laptop screen gets a smaller headline, not a cropped one.
   Phone: the headline holds two lines, the photograph takes whatever height is left, the actions sit above the fold. */
@container site (min-width:761px){
  body[data-public-site] .hero-a{--hero-head:88px;margin:0 16px;padding:0;align-items:flex-end;
    min-height:calc(100vh - var(--hero-head) - 16px);min-height:max(540px,calc(100svh - var(--hero-head) - 16px))}
  body[data-public-site] .hero-a .hero-scrim{background:
    linear-gradient(90deg,rgb(7 30 39 / .74) 0%,rgb(7 30 39 / .46) 42%,rgb(7 30 39 / .08) 78%),
    linear-gradient(0deg,rgb(7 30 39 / .7) 0%,rgb(7 30 39 / .3) 40%,rgb(7 30 39 / 0) 66%)}
  body[data-public-site] .hero-a .hero-a-content{width:100%;padding-top:clamp(40px,8svh,96px);
    padding-bottom:calc(clamp(20px,3.2svh,30px) + 33px + clamp(32px,6svh,64px))}
  body[data-public-site] .hero-a .hero-eyebrow{margin-bottom:clamp(14px,2.4svh,24px)}
  body[data-public-site] .hero-a #hero-a-title{max-width:none;font-size:clamp(48px,min(6.2vw,9.2svh),96px);line-height:1.02;letter-spacing:-.034em}
  body[data-public-site] .hero-a .hero-desktop-support{max-width:34em;text-wrap:pretty;margin-top:clamp(16px,2.6svh,28px);font-size:clamp(16px,2.1svh,19px);line-height:1.6}
  body[data-public-site] .hero-a .hero-actions{margin-top:clamp(22px,3.8svh,40px)}
  body[data-public-site] .hero-a .hero-caption{bottom:clamp(20px,3.2svh,30px);padding-top:14px;border-top:1px solid rgb(255 255 255 / .18);color:rgb(255 255 255 / .82)}
}
@container site (min-width:761px) and (max-width:1000px){
  body[data-public-site] .hero-a{--hero-head:68px}
}
@container site (max-width:760px){
  body[data-public-site] .direction-a .hero-a{display:flex;flex-direction:column;min-height:calc(100vh - 68px);min-height:calc(100svh - 68px)}
  body[data-public-site] .direction-a .hero-mobile-title{padding-top:clamp(20px,3.6svh,34px);padding-bottom:clamp(18px,3svh,28px)}
  body[data-public-site] .direction-a .hero-mobile-title .eyebrow{margin-bottom:clamp(10px,2svh,18px)}
  body[data-public-site] .direction-a .hero-mobile-title h1{font-size:clamp(30px,calc((100cqw - 40px) / 8.9),58px);line-height:1.06;letter-spacing:-.045em}
  body[data-public-site] .direction-a .hero-a .hero-landscape{flex:1 1 0;height:auto;min-height:190px;aspect-ratio:auto}
  body[data-public-site] .direction-a .hero-a .hero-landscape picture{position:absolute;inset:0}
  body[data-public-site] .direction-a .hero-a .hero-landscape :is(.landscape-poster,.landscape-video){object-position:center 72%}
  body[data-public-site] .direction-a .hero-a .hero-mobile-support{text-wrap:balance}
  body[data-public-site] .direction-a .hero-a .hero-a-content{padding-top:clamp(16px,2.8svh,26px);padding-bottom:clamp(18px,3.2svh,30px)}
  body[data-public-site] .direction-a .hero-a .hero-actions{margin-top:clamp(14px,2.6svh,24px);gap:clamp(8px,1.6svh,14px)}
}

/* Plain links: no decorative arrows beside words. Only the two menus keep a fine chevron, so they still read as menus. */
body[data-public-site] .workflow li+li:before,body[data-public-site] .product-notes span:before{content:none}
body[data-public-site] .audience-menu summary::after{content:"";width:7px;height:7px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--bp-ease)}
body[data-public-site] .audience-menu[open] summary::after{transform:translateY(2px) rotate(-135deg)}
body[data-public-site] .mobile-audience-directory>summary>span:after,body[data-public-site] .mobile-audience-directory:not([open])>summary>span:after{content:"";display:inline-block;width:9px;height:9px;margin-left:10px;font-size:0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-4px) rotate(45deg);transition:transform .2s var(--bp-ease)}
body[data-public-site] .mobile-audience-directory[open]>summary>span:after{transform:translateY(1px) rotate(-135deg)}

/* The mobile menu: one left edge for every top-level line. A link that lost its arrow keeps its words on the left. */
body[data-public-site] .ivory-directory :is(.nav-kicker,.mobile-audience-directory>summary){padding-left:12px;padding-right:12px}
body[data-public-site] .mobile-menu-option nav a>span:only-child{margin-left:0}
body[data-public-site] :is(.mobile-menu-option a,.mobile-menu-option summary,.desktop-menu-option a):focus-visible{outline-color:var(--f-teal)}

/* Play and pause marks are drawn, not typed: a typed triangle turns into a coloured emoji on some phones. */
body[data-public-site] :is(.loop-icon,.film-play-icon){font-size:0}
body[data-public-site] :is(.loop-icon,.film-play-icon)::before{content:"";display:block;width:8px;height:9px;margin-left:2px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
body[data-public-site] .film-play-icon::before{width:20px;height:23px;margin-left:5px}
body[data-public-site] .loop-control[aria-pressed="true"] .loop-icon::before{width:8px;margin-left:0;clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}

@media (prefers-reduced-motion:reduce){
  body[data-public-site] .film-play::before,body[data-public-site] .film-play::after{animation:none;display:none}
  body[data-public-site] .film-play-icon{transition:none}
  body[data-public-site] :is(.audience-menu summary,.mobile-audience-directory>summary>span):after{transition:none}
  body[data-public-site] .site-header[data-tone-ready],body[data-public-site] .site-header[data-tone-ready]::before,
  body[data-public-site] .site-header[data-tone-ready] :is(.desktop-nav>a,.audience-menu>summary,.login-link,.menu-toggle,.wordmark,.brand-mob,.header-enquiry){transition:none}
}