/* Trilly. A bright neighbourhood market: white ground, colour-blocked stalls, real faces, plain words.
   Brand locked 2026-10-10: Navy #0D2C54 + Marigold #FFC24D. Light only by design. Rules: docs/BRAND.md */
/* Brand fonts, self-hosted (SIL OFL; licences in /fonts). Latin subsets built by tools/fonts/build_fonts.py.
   Lexend and Gabarito are preloaded in _Layout. The "fallback" faces are local system fonts resized to the brand fonts'
   metrics, so text doesn't jump when the brand font arrives (CLS). Bump -v1 when the files change (immutable cache). */
@font-face{font-family:"Lexend";src:url("/fonts/lexend-latin-v1.woff2") format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:"Gabarito";src:url("/fonts/gabarito-latin-v1.woff2") format("woff2");font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("/fonts/caveat-latin-700-v1.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lexend fallback";src:local("Arial"),local("ArialMT"),local("Roboto"),local("Helvetica Neue");font-weight:300 600;size-adjust:110.82%;ascent-override:90.24%;descent-override:22.56%;line-gap-override:0%}
@font-face{font-family:"Gabarito fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Arial");font-weight:600 900;size-adjust:94.73%;ascent-override:99.23%;descent-override:27.45%;line-gap-override:0%}
@font-face{font-family:"Caveat fallback";src:local("Comic Sans MS"),local("Chalkboard SE"),local("Bradley Hand");font-weight:700;size-adjust:73.22%;ascent-override:131.12%;descent-override:40.97%;line-gap-override:0%}
:root{
  color-scheme:light;
  --white:#FFFFFF; --ink:#0D2C54; --soft:#5B6A80; --line:#E3E8EF;
  --navy:#0D2C54; --navy-2:#16406F; --marigold:#FFC24D; --gold:#F09A00; --gold-text:#B86E00;
  --cream:#FFF2CC; --ice:#E1EDFF; --apricot:#FFE8D6; --mint:#E2F4E4; --mist:#EEF0F4;
  --cream-soft:#FFFBEF; --mint-soft:#F6FBF7;   /* the pale backgrounds of new and accepted items (UX audit Y-16, c1) */
  --apricot-line:#E8935A; --apricot-deep:#C2611F; --apricot-soft:#F2A877; --mint-line:#6FD39B;   /* lines on the apricot and mint tints (skill maps) */
  --good:#1C7C4A; --warn:#9A5B00; --bad:#B42318;
  --on-navy-soft:#C9D6EA;   /* quieter text on navy (the launch-day card, the clock tile; G12c) */
  --display:"Gabarito","Gabarito fallback","Trebuchet MS",system-ui,sans-serif;
  --body:"Lexend","Lexend fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Caveat","Caveat fallback","Comic Sans MS",cursive;
  --r:24px; --r-sm:14px;
  --shadow:0 18px 40px -26px rgba(13,44,84,.45);
  /* #129 (audit Y-04, Y-05): the edge of every input, select, textarea and unselected choice (3.6:1 on white, WCAG 1.4.11;
     --line stays for cards and dividers), and the one focus ring: a navy line with a marigold halo. */
  --field:#7A889E;
  --ring-line:3px solid var(--navy);
  --ring:0 0 0 6px var(--marigold);
  /* Layout fixes batch 1 (#154). One reading width for every block of text (pattern C), and one type scale (pattern K): inner
     pages' H1, the H2 of a section inside a page or an article, and the title of a card, step or panel. The home's hero keeps
     its big H1, and the full-width bands of the home and landing pages keep the big H2. */
  --measure:44rem;
  /* The one type scale (#171: CALM-14, front rule 6), the mockups v2's since calm batch G (the lead's ruling on the home's design
     review: calm-show-mockups-v2\site\shared.css is the one source of truth): every font-size in every sheet is one of these
     (CssCoverageTests holds it). H1 72/38, a section's H2 50/30, H3 24/20, the lead 21/18, body 17, small 14 (desktop/phone). */
  --h1:clamp(2.375rem,1.5rem + 3.6vw,4.5rem);
  --h1-hero:clamp(2.375rem,1.5rem + 3.6vw,4.5rem);
  --h2:clamp(1.875rem,1.3rem + 2.2vw,3.125rem);
  --h3:clamp(1.25rem,1.15rem + .4vw,1.5rem);
  --fs-lead:clamp(1.125rem,1.04rem + .35vw,1.3125rem);
  /* A number: a price, a use number, a total, a KPI (the code re-check's N-M1, design r2 item 5): the mockups v2's 2rem at every
     width, 30 to 32 px, never bigger than the heading of the section it's in (--h2, 30 to 50). */
  --fs-num:clamp(1.875rem,1.6rem + .5vw,2rem);
  /* The mockups v2's spacing between sections and a big panel's corner (calm batch G; the trust and company pages use them). */
  --sec:clamp(80px,4rem + 5vw,152px);
  --r-panel:40px;
  --r-lg:28px;   /* the mockups v2's card and window corner (calm-g-trust's design r2) */
  --fs-body:1.0625rem;
  --fs-small:.875rem;
  /* The seventh size (calm batch G, #176; the lead's decision, #104): the ONE big proof number a page has ("9 of 9"), on
     .display-number only, Gabarito 900 (72 px on phones to 128 px on desktop). CssCoverageTests allows it nowhere else. */
  --t-display:clamp(4.5rem,2.6rem + 6vw,8rem);
}
*{box-sizing:border-box}
/* Hidden means hidden: .btn's display:inline-flex beat the browser's own [hidden] rule, so buttons only JavaScript uses ("Keep
   it", Copy) showed, and did nothing, without it (the batch 4 review, L5). */
[hidden]{display:none!important}
/* 2.4.11 Focus not obscured: focused and linked-to elements stay clear of the sticky header. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
/* An icon from Icons.Svg carries only a viewBox; in a box with no size rule it would draw at the box's width (Y-17).
   Zero specificity, so every class rule still wins. */
:where(svg[viewBox="0 0 32 32"]){width:1.5em;height:1.5em}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
/* The v2 weights (calm batch G v2, #190; the mockups v2 and the skill page's design review): h1 700, h2 and h3 600, at -.02em, so
   headings speak, not shout. 900 is the one display number's and the logo's. */
h1,h2,h3{font-family:var(--display);color:var(--navy);margin:0;text-wrap:balance;letter-spacing:-.02em}
h2,h3{line-height:1.1}
/* A long name or email in a title wraps instead of pushing the page sideways on a phone (G-29). */
h1{font-size:var(--h1);font-weight:700;line-height:1.02;overflow-wrap:anywhere}
/* One heading scale (the calm-site review, #171, CALM-1): a section's H2 is --h2 everywhere, the bands included, now that --h2 is
   the mockups v2's 50 px section heading (calm batch G). */
h2{font-size:var(--h2);font-weight:600}
.fd-head h2,.h2-band{font-family:var(--display);font-size:var(--h2);font-weight:600}
h3{font-size:var(--h3);font-weight:600}
button{font:inherit;color:inherit;cursor:pointer}
/* No monospace anywhere (docs/BRAND.md): inline code reads in the body font on a soft tile. */
code{font-family:var(--body);font-size:.92em;background:var(--mist);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}
/* Landscape iPhones: content stays clear of the notch (the viewport is viewport-fit=cover). */
.wrap{max-width:1160px;margin:0 auto;padding-left:max(clamp(16px,4vw,32px),env(safe-area-inset-left,0px));padding-right:max(clamp(16px,4vw,32px),env(safe-area-inset-right,0px))}
.muted{color:var(--soft)}
/* Regular weight, not light: light grey text at 300 read as faint fine print (#171, front #4). */
.lead{font-size:var(--fs-lead);color:var(--soft);max-width:52ch;font-weight:400;line-height:1.5;text-wrap:pretty}
/* A page's one big proof number (#176): the seventh size, nowhere else (BRAND.md, "Type"). */
.display-number{display:block;font-family:var(--display);font-weight:900;font-size:var(--t-display);line-height:.86;letter-spacing:-.045em;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
/* What the big number counts, small under it ("runs"), so "9 of 9" never reads as nine skills (the lead's ruling, #197 re-review). */
.display-unit{display:block;margin:10px 0 0;font-family:var(--body);font-weight:500;font-size:var(--fs-lead);line-height:1.2;color:var(--soft)}
.night .display-unit{color:var(--on-navy-soft)}
.kicker{display:block;font-family:var(--hand);font-weight:700;font-size:var(--h2);line-height:1;color:var(--gold-text);margin-bottom:8px}
.section{padding-block:clamp(56px,8vw,104px)}
.section-tight{padding-block:clamp(36px,5vw,64px)}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px 40px;margin-bottom:32px}
.head .lead{max-width:44ch}
.mark{position:relative;white-space:nowrap;z-index:0}
.mark::after{content:"";position:absolute;left:-.08em;right:-.08em;bottom:.06em;height:.32em;background:var(--marigold);border-radius:.2em;z-index:-1;transform:rotate(-1.2deg)}
/* Phones: a long highlighted phrase may wrap; each line keeps its own marigold stroke. */
@media (max-width:600px){
  .mark{white-space:normal;background:linear-gradient(transparent 64%,var(--marigold) 64%,var(--marigold) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .mark::after{display:none}
}

/* buttons */
/* Long button labels wrap on small screens instead of running off the edge (max-width, and the phone rule below). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:13px 24px;font-weight:500;font-size:var(--fs-body);border:2px solid var(--navy);background:var(--white);color:var(--navy);text-decoration:none;white-space:nowrap;transition:transform .15s;max-width:100%}
.btn:not(.btn-go):not(.btn-sun):not(.btn-danger):not(.btn-danger-quiet):not(.btn-quiet):hover{border-color:var(--field)}
.btn-go:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn-go{background:var(--navy);color:var(--white)}
/* A navy button keeps its white words inside any box whose links are navy (".co-facts a" and the like): /enterprise's
   "Find your company to start" was navy on navy (the G11 re-check, 18 Oct). Two classes beat "box a"; later two-class rules still win. */
.btn.btn-go{color:var(--white)}
.btn-sun{background:var(--marigold);border-color:var(--marigold);color:var(--navy)}
.btn-sun:hover{border-color:var(--navy)}
.btn-sm{padding:8px 16px;font-size:var(--fs-small)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
@media (max-width:600px){
  .btn{white-space:normal;text-align:center;line-height:1.3}
}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;gap:36px;height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{width:34px;height:34px;flex:none}
.logo span{font-family:var(--display);font-weight:900;font-size:1.6rem;color:var(--navy);letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:2px;font-size:var(--fs-body)}
.nav-links>a,.nav-item>a{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 14px;border-radius:999px;text-decoration:none;color:var(--soft);transition:background-color .15s}
.nav-links>a:hover,.nav-item>a:hover{background:var(--mist);color:var(--navy)}
.nav-links .nav-browse{color:var(--navy)}
.nav-browse .ui-ico{width:16px;height:16px;transform:rotate(90deg);transition:transform .25s}
.nav-browse[aria-expanded="true"] .ui-ico{transform:rotate(-90deg)}
.nav-right{margin-left:auto;display:flex;gap:20px;align-items:center}
/* The "Browse skills" panel under the header (calm batch G v2; the mockups v2's menu): js/site.js opens it from the link, and
   Escape, a click outside or the link again closes it. Wide screens only: from 1200 px down, the menu has the same tiles. */
.nav-item{display:inline-flex}
.nav-panel{position:absolute;left:0;right:0;top:100%;padding-top:12px;z-index:1}
.nav-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100vh - 72px);z-index:-1;background:rgba(13,44,84,.38);animation:fade-in .15s ease-out}
.nav-panel .bm{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 30px 60px -30px rgba(13,44,84,.35);padding:32px}
.nav-panel .bm:has(> .bm-side){grid-template-columns:minmax(0,1fr) 300px}
.bm-areas{min-width:0}
.bm-h{margin:0 0 16px;font-size:var(--fs-small);font-weight:500;color:var(--soft)}
.bm-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bm-tile{display:flex;flex-direction:column;gap:2px;height:100%;padding:18px 18px 20px;border-radius:22px;text-decoration:none;color:var(--navy);border:1px solid transparent;transition:border-color .15s}
.bm-tile:hover,.bm-tile:focus-visible{border-color:var(--navy)}
.bm-tile>svg{width:48px;height:48px;margin:0 0 10px -2px;flex:none}   /* the tile's own icon, never one in its name (the home's doors' arrow) */
.bm-name{font-family:var(--display);font-weight:600;font-size:var(--fs-body);line-height:1.2}
.bm-line{font-size:var(--fs-small);color:var(--soft);line-height:1.35;margin-top:2px}
.bm-all{margin:18px 0 0}
.bm-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;color:var(--navy);text-decoration:none}
.bm-go span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.bm-go .ui-ico{width:18px;height:18px}
.bm-side{display:flex;flex-direction:column;gap:22px;border-left:1px solid var(--line);padding-left:32px}
.bm-tested{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--navy);line-height:1.35;text-wrap:pretty}
.bm-tested svg{width:36px;height:36px;flex:none}
.bm-tested b{display:block;font-weight:500}
.bm-tested span span{font-size:var(--fs-small);color:var(--soft)}
.bm-new ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bm-new ul a{color:var(--navy);display:inline-flex;align-items:center;min-height:32px}
.bm-feature{display:grid;gap:10px;margin:0 0 10px;text-decoration:none;color:var(--navy)}
.bm-feature .card-pic{border-radius:16px;box-shadow:0 0 0 1px var(--line)}
.bm-feature-name{font-weight:500}
.bm-feature:hover .bm-feature-name{text-decoration:underline;text-underline-offset:3px}
/* The phone menu's tiles: two to a row, after Join free and Log in. */
.bm-sheet{margin:20px 0 8px}
.bm-sheet .bm-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bm-sheet .bm-tile{padding:14px 14px 16px;border-radius:18px}
.bm-sheet .bm-tile>svg{width:40px;height:40px;margin-bottom:6px}
.bm-sheet .bm-all{margin-top:10px}
/* "Join free" never wraps to two lines on a phone, the first thing on every page (layout review P0-3: G2-01, G4-01, G5-01,
   G6-01). It doesn't shrink; the Menu button drops its word below 420 px to make room (the burger keeps "Menu" for screen readers). */
.nav-right>.btn{white-space:nowrap;flex:none;font-size:var(--fs-body);min-height:44px;padding:0 20px}
.nav-login{text-decoration:none;color:var(--navy);font-weight:500;padding:8px 10px;white-space:nowrap;flex:none}   /* one line at every width it shows (it wrapped at 768: the for-companies-film-3 review) */
@media (max-width:440px){
  .nav-login{display:none}
}
@media (min-width:441px) and (max-width:480px){
  .nav-right>.btn{padding:0 14px}   /* Log in joins the row at 441 px; "Join free" gives it the room (6.8 px over: header-320) */
}

/* hero */
.hero{padding-block:clamp(28px,5vw,64px) clamp(48px,7vw,88px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr}
}
.hero .lead{margin-top:20px}
/* The search pill. The field covers the whole pill but the button, so a tap anywhere on it types (UX audit D-24): the icon sits
   over the field and lets taps through. */
.search{position:relative;margin-top:28px;display:flex;align-items:center;gap:10px;background:var(--white);border:2px solid var(--navy);border-radius:999px;padding:7px;max-width:580px;box-shadow:var(--shadow)}
.search svg{position:absolute;left:22px;top:50%;width:22px;height:22px;margin-top:-11px;color:var(--soft);pointer-events:none}
.search input{flex:1;min-width:0;align-self:stretch;margin:-7px 0 -7px -7px;padding:17px 0 17px 59px;border:0;border-radius:999px 0 0 999px;background:transparent;font:inherit;font-size:var(--fs-body);color:var(--ink);outline:none}
/* Search suggestions as you type (#226 (3), site.js): a list under the box, grouped, the typed letters marked; 44 px rows for a thumb. */
.sg-host{position:relative}
.sg-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:6px;max-height:min(70vh,460px);overflow-y:auto;text-align:left}
.sg-head{margin:8px 10px 2px;font-size:var(--fs-small);font-weight:600;color:var(--soft)}
.sg-opt{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-height:44px;padding:9px 12px;border-radius:10px;color:var(--ink);text-decoration:none}
.sg-opt.sg-on,.sg-opt:hover{background:var(--cream)}
/* The chosen row has a line a keyboard user can see (3:1 and more; the review's M4), and in Windows' high-contrast mode too. */
.sg-opt.sg-on{outline:2px solid var(--navy);outline-offset:-2px}
@media (forced-colors:active){.sg-opt.sg-on{outline-color:Highlight}}
/* A phone with the keyboard up has less screen: the list stays above it (L3). */
@media (max-width:520px){.sg-list{max-height:min(45dvh,360px)}}
.sg-title{font-weight:600}
.sg-title mark{background:var(--cream);color:inherit;box-shadow:inset 0 -2px 0 var(--marigold);padding:0}
.sg-opt.sg-on .sg-title mark,.sg-opt:hover .sg-title mark{background:var(--marigold)}
.sg-sub{flex-basis:100%;font-size:var(--fs-small);color:var(--soft)}
.sg-tested{font-size:var(--fs-small);font-weight:600;color:var(--navy);background:var(--mint);border-radius:999px;padding:1px 8px}
.sg-search{border-top:1px solid var(--line);margin-top:4px;border-radius:0 0 10px 10px;font-weight:600}
/* On a phone the pill stays one row, the button inside the field (the calm site's fix 6): it stacked into a 130 px block with a
   full-width navy button. */
@media (max-width:520px){
  .search{gap:6px;padding:5px}
  .search input{margin:-5px 0 -5px -5px;padding:13px 0 13px 46px;font-size:var(--fs-body)}
  .search svg{left:16px;width:20px;height:20px;margin-top:-10px}
  .search .btn{padding:10px 16px;min-height:44px}
}
.try{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;font-size:var(--fs-small);color:var(--soft)}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:7px 14px;font-size:var(--fs-small);color:var(--navy);text-decoration:none}

/* skill cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:960px){
  .grid3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .grid3{grid-template-columns:1fr}
}
.card{border-radius:var(--r);background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .15s;text-decoration:none;color:inherit;min-width:0;container-type:inline-size}
a.card:hover{border-color:var(--field)}
.ic{width:56px;height:56px;border-radius:17px;background:var(--white);display:grid;place-items:center;flex:none}
.ic svg{width:34px;height:34px}
/* The card's one price line, beside its tile (the calm card, CALM-2): words, not a sticker. A paid skill that can't be bought
   yet says so on the same line (#129, D-01): "A$49 a month · not on sale yet". */
.price{font-weight:600;font-size:var(--fs-body);color:var(--navy);line-height:1.35}
.price-soon{font-weight:500;color:var(--soft)}
.price-soon b{font-weight:600;color:var(--navy)}
.card-body{padding:22px 24px;display:flex;flex-direction:column;gap:4px;flex:1}
.card-body h3{font-family:var(--body);font-weight:500;font-size:var(--h3);line-height:1.35;letter-spacing:0;overflow-wrap:anywhere}
.promise{color:var(--soft);font-size:var(--fs-body)}
.maker{display:flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--soft)}
.maker b{color:var(--ink);font-weight:500}
.avatar{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--navy);background:var(--cream);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
/* Trilly's own mark as an avatar (K-15): the skill header and the feed's Originals posts, shared partials (the calm-skill-b review, L4). */
.avatar-logo{background:none}
.avatar-logo .logo-mark{width:100%;height:100%}
.star{color:var(--gold);white-space:nowrap}
.star .ui-ico{display:inline-block;width:1em;height:1em;vertical-align:-.125em}   /* drawn stars (Icons.Stars; G-24: never typed) */
.badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:var(--fs-small);font-weight:500;border-radius:999px;padding:3px 10px;background:var(--mint);color:var(--navy)}
.badge-official{background:var(--navy);color:var(--white)}
.badge-endorsed{background:var(--ice)}
.badge-unclaimed{background:var(--mist);color:var(--soft)}
/* tints: modifiers, so they come after the components they tint (.ic, .badge); a tint written before its base lost and the tile
   or badge rendered white or mint (layout review pattern A: G1-10, G2-03, G3-14, G6-11). */
.t-cream{background:var(--cream)} .t-ice{background:var(--ice)} .t-apricot{background:var(--apricot)} .t-mint{background:var(--mint)} .t-mist{background:var(--mist)}
.t-peach{background:var(--apricot)} .t-sky{background:var(--ice)} .t-butter{background:var(--cream)} .t-lilac{background:var(--mist)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){
  .tiles{grid-template-columns:repeat(2,1fr)}
}
.tile{border:1px solid transparent;border-radius:22px;padding:20px;text-decoration:none;display:flex;flex-direction:column;gap:4px;min-height:148px;transition:transform .15s}
.tile:hover{border-color:var(--field)}
.tile svg{width:44px;height:44px;margin-bottom:auto}
.tile b{font-family:var(--display);font-size:var(--h3);color:var(--navy);font-weight:700;line-height:1.15;margin-top:16px}
.tile span{font-size:var(--fs-small);color:var(--soft)}
/* Three tiles with a sentence each (home: what Trilly does, #109). */
.tiles.tiles-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){
  .tiles.tiles-3{grid-template-columns:1fr}
}
.tiles-3 .tile{min-height:0}
.tiles-3 .tile span{font-size:var(--fs-small)}

/* breadcrumbs */
.crumbs{font-size:var(--fs-small);color:var(--soft);padding-top:20px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"›";content:"›" / "";margin-right:6px}   /* the arrow is never read out (UX audit G-19) */
.crumbs a{color:var(--soft)}

.skill-title{display:flex;gap:18px;align-items:flex-start}
.skill-title .ic{width:76px;height:76px;border-radius:22px}
.skill-title .ic svg{width:46px;height:46px}

.answer-first{font-size:var(--fs-body);margin-top:14px;max-width:60ch}

.connector-list{display:grid;gap:10px;margin:0;padding-left:18px}
.connector-list li{overflow-wrap:anywhere}
.connector-list .sub{display:block;color:var(--soft);font-size:var(--fs-body);font-weight:400}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
@media (max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr)}
}
/* Tablets: four stats are two by two, not three and one alone (layout review L3). */
@media (min-width:761px) and (max-width:900px){
  .stats:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
}
.stat{border-radius:18px;padding:16px 18px;background:var(--mist)}
.stat b{display:block;font-family:var(--display);font-size:var(--fs-num);font-weight:700;color:var(--navy);line-height:1.1}
.stat span{display:block;margin-top:4px;line-height:1.4;font-size:var(--fs-small);color:var(--soft)}
.stat-quiet b{font-size:var(--h3);line-height:1.25}   /* words instead of a number ("New", "No reviews yet") */
.note{font-size:var(--fs-body);color:var(--soft);margin-top:12px;max-width:var(--measure);overflow-wrap:anywhere}   /* a note can name a web address, even in a grid or flex cell ("creativecommons.org/licenses/by/4.0" laid /for/schools out 335 px wide at 320) */
.note a{color:var(--navy)}
.chat{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:820px){
  .chat{grid-template-columns:1fr}
}
.phone{border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
/* Both answers on the same colours, so the demo doesn't look rigged (G11, AI-04): the labels say which is which. */
.phone.plain,.phone.with{background:var(--ice)}
.phone-top{font-size:var(--fs-small);color:var(--soft)}
.bubble{border-radius:20px;padding:13px 17px;font-size:var(--fs-body);max-width:94%;white-space:pre-line}
.bubble.me{align-self:flex-end;background:var(--navy);color:var(--white);border-bottom-right-radius:6px}
.bubble.ai{align-self:flex-start;background:var(--white);border-bottom-left-radius:6px}

.review{border:1px solid var(--line);border-radius:20px;padding:18px 20px;display:grid;gap:8px}

.review-meta{font-size:var(--fs-small);color:var(--soft)}
.reply{background:var(--mist);border-radius:14px;padding:10px 14px;font-size:var(--fs-small)}

.versions{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.versions>li{border-left:3px solid var(--marigold);padding-left:14px}
/* Skills that work together (REMAINING 9.14): a skill's "Often added with this" and a job's "A starter set", each with one quiet button that adds
   the set. The button never takes the page's main place, and the note says once what it does with free and paid skills. */
.set-band{margin-block:48px}
.set-rows{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:760px}
.set-rows>li{display:grid}   /* each row as tall as the tallest beside it, three across */
.set-row{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 18px;border:1px solid var(--line);border-radius:var(--r-lg,20px);background:var(--white);color:var(--navy);text-decoration:none}
.set-row .ic{width:48px;height:48px;border-radius:15px}
.set-row .ic svg{width:30px;height:30px}
.set-row b{font-weight:600}
.set-row-main{display:grid;gap:2px;min-width:0}
.set-row-soon{display:inline-block;white-space:nowrap}   /* the price under the name; "· not on sale yet" is one piece: it moves to its own line whole, never word by word */
@media (hover:hover){.set-row:hover{border-color:var(--navy)}}
@media (min-width:941px){.set-rows{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}.set-row{align-items:flex-start}}
.set-add{margin-top:24px;display:grid;gap:8px;justify-items:start}
.set-add-go{margin:0}
.set-add-note{margin:0;max-width:var(--measure)}
@media (max-width:760px){.set-add{margin-top:20px;justify-items:stretch}.set-add-go .btn{width:100%}}
.disclaimer{border-radius:16px;background:var(--cream);padding:14px 18px;font-size:var(--fs-body)}
/* The betting age question (before sales 2, 9.1), on Add to my AI and at checkout: a marigold edge, so it reads as the one next step. */
.age-check{border-left:4px solid var(--marigold);padding-left:18px}
.age-check h2{margin:0}
/* Inside a panel too: the panel's own border came later and took the marigold edge away (layout review G5-24). */
.panel.age-check{border-left:5px solid var(--marigold)}
.panel.keep-copy{border-left:5px solid var(--marigold)}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:12px}
.tabs-nav{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);margin-bottom:24px}
.tabs-nav a{padding:10px 14px;text-decoration:none;color:var(--soft);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs-nav a[aria-current="page"]{color:var(--navy);border-color:var(--marigold);font-weight:500}

/* profiles */
/* The photo sits level with the name, not centred on the whole block (layout review G6-10). */
.profile-head{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;padding-block:24px}
.profile-head .avatar{width:112px;height:112px;font-size:2.2rem}

/* footer */
/* The navy footer (calm batch G v2, #190; the mockups v2's .site-foot): the blurb, then four groups; three across with the blurb
   above them on a tablet, and two across on a phone with every link showing. */
.footer{background:var(--navy);color:var(--on-navy-soft);margin-top:clamp(56px,6vw,96px);padding-block:72px 36px;font-size:var(--fs-small)}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:32px}
@media (max-width:1080px){
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:760px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
}
.footer .logo span{color:var(--white)}
.footer-blurb{max-width:20em;margin-top:16px;line-height:1.55}
.footer h2.footer-h{font-family:var(--body);font-size:var(--fs-small);font-weight:600;letter-spacing:0;line-height:1.4;color:var(--white);margin:0 0 12px}
.footer-col a{display:flex;align-items:center;min-height:32px;text-decoration:none;color:var(--on-navy-soft)}
.footer-col a:hover,.footer-links a:hover{color:var(--white);text-decoration:underline}
.footer-base{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.footer-legal{white-space:nowrap}
.footer-region{white-space:nowrap;color:var(--on-navy-soft)}
a.footer-region:hover{color:var(--white)}
[data-about-aud][hidden]{display:none}
.footer-links{display:inline-flex;gap:8px 22px;flex-wrap:wrap;align-items:center}
.footer-links a{color:var(--on-navy-soft);text-decoration:none}
.footer-made{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:var(--white)}
.footer-made .ui-ico{width:20px;height:20px;flex:none;color:var(--marigold)}
.footer :focus-visible{outline-color:var(--white)}
@media (max-width:760px){
  .footer-made{margin-left:0}
  .footer-links{display:grid;grid-template-columns:repeat(3,auto);justify-content:start}
}
/* contact: mailboxes and address */
.contact-list{margin:0;display:grid;gap:10px;max-width:52ch}
.contact-list div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.contact-list dt{color:var(--soft)}
.contact-list dd{margin:0;font-weight:500;overflow-wrap:anywhere}
@media (max-width:560px){
  .contact-list div{flex-direction:column;justify-content:flex-start}
}

.empty{border:1px solid var(--line);border-radius:var(--r);padding:28px;text-align:center;color:var(--soft);max-width:var(--measure)}
/* The 8-digit code from an email (G10, SIMP-01 and SIMP-05): big spaced digits, the button beside it. The box's size is the
   .input.email-code rule in design sweep group F, so it beats .input's body size on every page that has it. */
.code-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.email-code{letter-spacing:.12em;font-variant-numeric:tabular-nums}
/* Steps inside an empty state read left to right like every other list of steps (My skills, #136 batch 7, B-14). */
.empty ol.steps{text-align:left;margin-inline:auto;color:var(--ink)}
/* Phones: less padding, so tiles inside keep their names on one line (G5-18). */
@media (max-width:600px){
  .empty{padding:20px 14px}
}
/* Reduced motion: no transitions, animations or smooth scrolling, chevrons and other ::before/::after parts included (G-30). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes ic-lift{0%,100%{translate:0 0}40%{translate:0 -5px}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@media (prefers-reduced-motion:no-preference){
  .bm-tile:hover>svg,.bm-tile:focus-visible>svg{animation:ic-lift .6s cubic-bezier(.3,1.45,.55,1)}
}
/* A card glides into its skill page (the mockups v2's motion; the home's design review, item 12): a page change on this site
   cross-fades, and the pressed card's picture and name (named by site.js for that one change) move into the skill page's picture
   and title. A browser without view transitions just loads the page; reduced motion turns them off. */
@view-transition{navigation:auto}
.vt-pic-skill,.sk-top .sk-pic{view-transition-name:skill-pic}
.vt-name-skill,.sk-top .sk-name{view-transition-name:skill-name}
html.vt-card .sk-top .sk-pic,html.vt-card .sk-top .sk-name{view-transition-name:none}
::view-transition-group(*){animation-duration:.3s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}
/* ---------- The navy band, its scoreboard and the closing ask (calm batch G): one version for the home and the trust pages, from
   the home's and calm-g-trust's, the mockups v2's shape. _Scoreboard draws the tiles, _ClosingAsk the closing block. ---------- */
/* Positioned, so its screen-reader-only words (.vh, at left 0 of their containing block) sit inside the band at every width, never
   on the page's edge outside it (the lead's note on design r2 item 1). */
.night{position:relative;background:var(--navy);color:var(--white);border-radius:var(--r-panel);padding:clamp(40px,5vw,72px) clamp(20px,4.5vw,64px) clamp(36px,4.5vw,64px)}
.night h2{color:var(--white)}
.night .display-number{color:var(--marigold);margin:0}
.night a:focus-visible{outline:3px solid var(--white);outline-offset:3px;box-shadow:none}
.board{list-style:none;margin:clamp(28px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;border-radius:24px;overflow:hidden}
.board:has(>li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
/* Exactly four tiles (the home: passed, every run added up, refused, use numbers; the mockups v2's board) sit four across, two by
   two where four would squeeze "153 of 153". Six (/trust) keep three across. */
.board:has(>li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){
  .board:has(>li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
.board li{background:var(--navy-2)}
.board a{display:block;height:100%;padding:24px 22px 26px;color:var(--white);text-decoration:none}
.board a:hover>span{text-decoration:underline;text-underline-offset:3px}
.board b{display:block;font-family:var(--display);font-weight:700;font-size:var(--fs-num);line-height:1;font-variant-numeric:tabular-nums}
.board b.board-y{color:var(--marigold)}
.board b.board-nd{font-size:var(--h3);line-height:1.15}
.board a>span{display:block;margin-top:10px;color:var(--on-navy-soft);font-size:var(--fs-small);line-height:1.4}
.closing{padding-bottom:clamp(56px,7vw,96px)}
.closing-box{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 32px 64px;border-radius:var(--r-panel);background:var(--cream)}
.closing-art{display:block;width:240px;height:auto;margin-bottom:-4px}
.closing-box h2{margin:16px 0 24px;max-width:14em}
.closing-box .search{width:100%;max-width:560px;margin-top:0}
.closing-also{margin:16px 0 0}
/* The arrow link (calm batch G): a link's words underlined in gold, then our arrow, which nudges on hover; one for every page (the
   trust pages' own, from the home's .hm-go, which the home can use in its place). A full tap's height, so a link on its own line is
   easy to press. */
.go{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--navy);font-weight:500;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.go .ui-ico{width:18px;height:18px;flex:none;transition:transform .15s}
.go:hover .ui-ico{transform:translateX(4px)}
@media (max-width:760px){
  .night{border-radius:24px}
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board a{padding:18px 16px 20px}
  .board b.board-nd{font-size:var(--fs-body)}
  .board li:last-child:nth-child(odd){grid-column:1/-1}
  /* A long number has a row of its own (ScoreTile.Full), the others fill round it, and a tile left alone at the end spans. */
  .board:has(>.board-full){grid-auto-flow:dense}
  .board li.board-full,.board:has(>.board-full) li:last-child:nth-child(even){grid-column:1/-1}
  .board-wide{display:none}
  .closing-box{padding:40px 20px 48px;border-radius:24px}
  .closing-art{width:200px}
}
@media (max-width:380px){.closing:not(.hm-sec) .closing-box{padding-left:12px;padding-right:12px}}   /* "What job needs doing?" fits its box at 360 (design-b2-9 review, L4); the home widens its own search past 20px of padding (design-b2-9b review, M1) */
@media (forced-colors:active){
  .night,.closing-box{border:1px solid CanvasText}
}
/* ---------- The scenes' light motion (calm batch G): a scene drawn into the page (Infrastructure/Scenes) marks its layers with
   data-anim, and they move with the scroll as the scene comes into view: "in" rises in, "tick" draws its stroke (a path with
   pathLength="1"), "path" flows its dotted lines. Tied to the scroll, so nothing moves on its own; none with reduced motion, and
   where the browser can't tie motion to the scroll the drawing just stands. ---------- */
.scene{display:block;max-width:100%;height:auto}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes flow{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .scene{view-timeline:--scene}
    .scene [data-anim="in"]{animation:rise linear both;animation-timeline:--scene;animation-range:entry 10% entry 70%}
    .scene [data-anim="tick"] path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw linear both;animation-timeline:--scene;animation-range:entry 60% cover 50%}
    .scene [data-anim="path"] path{animation:flow linear both;animation-timeline:--scene;animation-range:entry 0% exit 100%}
  }
}
/* ---------- accessibility (WCAG 2.2 AA): docs/ACCESSIBILITY.md ---------- */
/* Focus: one ring everywhere, a navy line with a marigold halo (--ring-line, --ring). Marigold alone is 1.6:1 on white (fails
   1.4.11); navy is 14:1 on white and the halo keeps it visible on navy buttons and tints. */
:focus-visible{outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}
.search:focus-within{outline:var(--ring-line);outline-offset:3px}
.search input:focus-visible{outline:none;box-shadow:none}
@media (forced-colors:active){
  :focus-visible{outline:3px solid Highlight;box-shadow:none}
}
/* Screen-reader-only text that never causes sideways scrolling: pinned to the left of its box, so one inside a row that scrolls
   sideways never sits at its place in the row, past the page's right edge (calm batch G v2; the skill page's design review). Its
   height stays where it is in the page, so a touch screen reader moving onto it never jumps the page to the top (calm-g-home's
   code review, L5); rows that scroll sideways are positioned boxes too (CssCoverageTests). */
.vh{position:absolute!important;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-200px;z-index:100;background:var(--navy);color:var(--white);padding:12px 18px;border-radius:12px;font-weight:500}
.skip:focus{top:16px;left:16px}
/* 2.5.8 Target size: links and buttons in lists are at least 24px tall; the main controls are 44px on phones. */
.crumbs a,.tabs-nav a,.pill,.link-list a,.mesh-grid a,.hit-list a,.contact-list a{display:inline-flex;align-items:center;min-height:24px}
@media (pointer:coarse){
  .btn,.btn-sm,.nav-login,.vote-btn,.pager a{min-height:44px}
}
/* Phones and small tablets: the main links move into a Menu. It's a <details>, so it opens and closes without JavaScript;
   a tap on the dimmed page taps the summary's backdrop and closes it, and :has() locks the page behind. js/site.js adds
   Escape, a focus trap and closing when the screen widens (where the page can carry it: see PublicPagePolicy.MayBeCached).
   The header is one slim 64px row, sticky so the Menu is always in reach. */
.nav-links>a[aria-current="page"],.nav-item>a[aria-current="page"]{color:var(--navy);font-weight:500}
.nav-menu{display:none}
/* The menu button up to 1200px: the four links at body size (calm batch G v2) don't fit beside the account menu below it. */
@media (max-width:1200px){
  .nav{background:var(--white);backdrop-filter:none;border-bottom-color:var(--line)}
  html{scroll-padding-top:80px}
  .nav-row{height:64px;gap:12px;background:var(--white)}
  .nav-links,.nav-panel{display:none!important}
  .nav-right{gap:8px}
  .nav-menu{display:block}
  .nav-menu-btn{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--navy);cursor:pointer}
  .nav-menu-btn::-webkit-details-marker{display:none}
  .nav-menu-btn:hover,.nav-menu[open]>.nav-menu-btn{background:var(--mist)}
  .burger{position:relative;display:block;width:18px;height:14px;flex:none}
  .burger i{position:absolute;left:0;width:18px;height:2.5px;border-radius:2px;background:var(--navy);transition:transform .2s,opacity .2s}
  .burger i:nth-child(1){top:0}
  .burger i:nth-child(2){top:5.75px}
  .burger i:nth-child(3){top:11.5px}
  .nav-menu[open] .burger i:nth-child(1){transform:translateY(5.75px) rotate(45deg)}
  .nav-menu[open] .burger i:nth-child(2){opacity:0}
  .nav-menu[open] .burger i:nth-child(3){transform:translateY(-5.75px) rotate(-45deg)}
  .nav-menu[open]>.nav-menu-btn::after{content:"";position:fixed;left:0;right:0;bottom:0;top:calc(64px + env(safe-area-inset-top,0px));background:rgba(13,44,84,.38);cursor:default;animation:fade-in .15s ease-out}
  .nav-sheet{position:absolute;z-index:1;left:0;right:0;top:100%;animation:fade-in .15s ease-out}
  .nav-sheet-body:focus{outline:none;box-shadow:none}
  .nav-sheet-body{background:var(--white);box-shadow:0 24px 40px -24px rgba(13,44,84,.5);max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;padding:6px max(clamp(16px,4vw,32px),env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(clamp(16px,4vw,32px),env(safe-area-inset-left,0px));animation:sheet-in .18s ease-out}
  .nav-sheet ul{list-style:none;margin:0;padding:0}
  .nav-sheet a{text-decoration:none}
  .nav-sheet-main a{display:flex;align-items:center;gap:10px;min-height:58px;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:var(--h3);color:var(--navy)}
  .nav-sheet-more{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;padding-top:8px}
  .nav-sheet-more a{display:flex;align-items:center;min-height:48px;color:var(--soft)}
  .nav-sheet a[aria-current="page"]{color:var(--navy)}
  .nav-sheet-more a[aria-current="page"]{font-weight:600}
  .nav-sheet a[aria-current="page"]::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none}
  .nav-sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;margin-bottom:6px}
  html:has(.nav-menu[open]),html.menu-open{overflow:hidden}
}
/* Small phones: the header's gaps and "Join free"'s padding shrink so the logo, search, "Join free" and the menu fit inside the
   content edge (P0-3), down to 320 px (layout review L5; WCAG 1.4.10). At 320 the row was 16 + 85.6 + 8 + 214.5 px against a 304 px
   edge, so the page scrolled sideways by 4 px (the gpt-guide-film-2 review, 28 Oct); from 340 to 359 the full logo overflowed too.
   Below 340 px search is the menu sheet's first line instead, so "Join free" and the menu keep 8 px apart.
   After the 1200 px block, which sets its own gap. HeaderFitTests measures the row at each of these widths. */
@media (max-width:379px){
  .nav-right{gap:6px}
  .nav-right>.btn{padding:0 14px}
}
@media (max-width:359px){
  .nav-row{gap:8px}
  .logo{gap:6px}
  .logo span{font-size:1.35rem}
}
@media (max-width:339px){
  .nav-right>.nav-search{display:none}   /* the menu sheet opens with search; the two left keep a thumb's 8 px apart (they were 2: header-320 review L3) */
  .nav-right{gap:8px}
}
@keyframes sheet-in{from{opacity:0;transform:translateY(-6px)}}
/* Every tap shows: a soft navy flash instead of the browser's grey box, and buttons press in. */
a,button,summary,label,[role=button]{-webkit-tap-highlight-color:rgba(13,44,84,.12)}
.btn:active{transform:scale(.98)}

/* ---------- phones (docs/ACCESSIBILITY.md): edges, sideways scrollers, tables as cards, thumb-sized targets ---------- */
/* Anything that scrolls sideways shows a soft shadow on the edge that has more (no JavaScript: background-attachment). */
.table-wrap,.scroll-x{-webkit-overflow-scrolling:touch;background:linear-gradient(90deg,var(--white) 30%,rgba(255,255,255,0)) 0 0/28px 100% no-repeat local,linear-gradient(270deg,var(--white) 30%,rgba(255,255,255,0)) 100% 0/28px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(13,44,84,.2),rgba(13,44,84,0)) 0 0/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(13,44,84,.2),rgba(13,44,84,0)) 100% 0/12px 100% no-repeat scroll;background-color:var(--white)}
@media (max-width:760px){
  .tabs-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0;margin-inline:calc(-1 * clamp(16px,4vw,32px));padding-inline:clamp(10px,3vw,26px)}
  .tabs-nav::-webkit-scrollbar{display:none}
  .tabs-nav a{flex:none;white-space:nowrap}
}
/* <table stack-cards> and content tables: on phones each row is a small card, every value labelled by its column. */
@media (max-width:640px){
  .table-wrap:has(>.stack-table){border:0;border-radius:0;overflow:visible;background:none}
  .stack-table{min-width:0!important;border-collapse:separate}
  .stack-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .stack-table,.stack-table tbody,.stack-table tr{display:block;width:auto}
  .stack-table tr{border:1px solid var(--line);border-radius:18px;padding:4px 16px;background:var(--white)}
  .stack-table tr+tr{margin-top:10px}
  /* A caption stays a line across the cards; as a table caption in a block table it shrank to one word a line (#173). */
  .stack-table caption{display:block}
  .stack-table td,.stack-table tbody th{display:flow-root;width:auto;border:0!important;border-top:1px solid var(--line)!important;padding:9px 0 9px 128px!important;text-align:left!important;background:none;white-space:normal!important}
  .stack-table td::before{content:attr(data-label);float:left;width:116px;margin-left:-128px;padding-top:1px;color:var(--soft);font-size:var(--fs-small);font-weight:500;line-height:1.4}
  .stack-table tr>:first-child{border-top:0!important;padding-left:0!important;font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy)}
  .stack-table tr>:first-child::before{display:none}
  .prose .stack-table td,.prose .stack-table tbody th{padding-left:0!important}
  .prose .stack-table td::before{float:none;display:block;width:auto;margin:0 0 2px}
  /* The card's title needs no column label above it (layout review G4-22: Privacy's cards said "What" over each title). */
  .prose .stack-table tr>:first-child::before{display:none}
  /* In an article, rows divided by a rule, not 18 bordered cards: about a screen shorter on Privacy (G4-23). */
  .prose .stack-table tr{border:0;border-radius:0;border-bottom:1px solid var(--line);padding:6px 0}
  .prose .stack-table tr+tr{margin-top:0}
}
/* Small phones: every stacked card puts the label above its value, so a value has the card's whole width and a long phone
   number or name never runs out of the card (pattern O, G3-24). */
@media (max-width:420px){
  .stack-table td,.stack-table tbody th{padding-left:0!important}
  .stack-table td::before{float:none;display:block;width:auto;margin:0 0 2px}
}
/* Thumbs: list links, tabs and small controls get 44px on touch screens. */
@media (pointer:coarse){
  .logo{min-height:44px}
  .footer-col a{min-height:44px}
  .footer-links a,.crumbs a,.tabs-nav a,.side-nav a,.filters a,.az a,.links a,.chip,.pill,.mesh-grid a,.link-list a,.hit-list a,.task-list a{display:inline-flex;align-items:center;min-height:44px}
  .mesh-grid ul,.link-list,.hit-list{gap:0}
  .pw-toggle{min-height:40px;padding:8px 14px}
}

/* spacing utilities: inline style attributes are blocked by the CSP, so spacing lives here */
/* Spacing utilities do one job, so they win (layout review pattern B: a component's margin:0, a more specific reset such as
   ol.steps, or a sheet that loads later used to beat them, and headings sat on their lists). A component never sets its own
   outer margin to fight them. */
.mt-1{margin-top:8px!important}.mt-2{margin-top:14px!important}.mt-3{margin-top:24px!important}.mt-4{margin-top:40px!important}

/* bar widths in 5% steps (CSP blocks inline style attributes) */
.w-0{width:0%}.w-5{width:5%}.w-10{width:10%}.w-15{width:15%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-35{width:35%}.w-40{width:40%}.w-45{width:45%}.w-50{width:50%}.w-55{width:55%}.w-60{width:60%}.w-65{width:65%}.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-85{width:85%}.w-90{width:90%}.w-95{width:95%}.w-100{width:100%}

/* ---------- accounts: sign-in pages, forms, member area, settings, maker pages ---------- */
.auth{max-width:500px;margin:0 auto;padding-block:clamp(32px,6vw,72px)}
.member-head h1{font-size:var(--h1)}
/* A sign-in form's one heading at the section size: 72 px over a 436 px form outweighed the form (the calm-g-home re-check, N-M1). */
.auth h1{font-size:var(--h2)}
.auth .lead{margin-top:10px}
/* The sign-in pages in v2 (calm batch G, the account group: /login, /signup, /login/code, /login/2fa): the form on white and, from
   941 px, beside it on a tinted field the screen the page leads to, drawn and tagged Example (Pages/Account/AccountPictures.cs, with
   pictures.css's pieces). A phone or tablet shows the form alone, so the action leads (the 70/80 budget). The other ways in (a
   passkey, a code by email) sit together under the email form, after a 1 px line. */
.auth-wrap{display:grid;grid-template-columns:minmax(0,500px);justify-content:center;gap:clamp(40px,6vw,96px);padding-block:clamp(32px,5vw,72px) clamp(48px,6vw,96px)}
.auth-wrap>.auth{max-width:none;margin:0;padding-block:0}
.auth-side{display:none}
@media (min-width:941px){
  .auth-wrap:has(>.auth-side){grid-template-columns:minmax(0,460px) minmax(0,600px);justify-content:space-between;align-items:start}
  .auth-side{display:block;position:sticky;top:112px;margin-top:56px}
}
.auth-other{display:grid;gap:12px;margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.auth-passkey{display:grid;gap:6px;margin:0}
.panel{border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,3vw,28px);background:var(--white)}

.panel h2{font-size:var(--h3)}
/* Forms: one .form and one .field everywhere (#129, Y-02; until 16 Oct 2026 three .form rules and two .field systems disagreed). */
.form{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);max-width:560px;margin-top:28px}
.field{display:grid;gap:6px;min-width:0}
.field>label,.label{font-weight:500;font-size:var(--fs-body)}
.hint{font-size:var(--fs-body);color:var(--soft)}
.input{width:100%;font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--white);border:2px solid var(--field);border-radius:var(--r-sm);padding:11px 14px;min-height:48px}
.input:focus{border-color:var(--navy);outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}
.input.input-validation-error{border-color:var(--bad)}
textarea.input{min-height:120px;resize:vertical;line-height:1.5}
.input-code{font-size:var(--h3);letter-spacing:.3em;text-align:center;max-width:220px}
.field-error,.field-validation-error{color:var(--bad);font-size:var(--fs-body)}
.field-validation-valid,.validation-summary-valid{display:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-body)}
.check input{width:20px;height:20px;margin-top:3px;accent-color:var(--navy);flex:none}
/* What a tick box agrees to is read in full, its details in brackets too (the lead's decision, #104). */
.check .meta{font-size:var(--fs-body)}
.pw{position:relative}
.pw .input{padding-right:78px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:var(--mist);border:0;border-radius:999px;padding:5px 12px;font-size:var(--fs-small);color:var(--navy)}
/* Messages: one .alert (#129, Y-02). Text is always ink on the tint, the left edge says what kind it is. */
.alert{border-radius:var(--r-sm);padding:14px 18px;font-size:var(--fs-body);border-left:5px solid var(--navy);background:var(--ice);color:var(--ink)}
.alert ul{margin:8px 0 0;padding-left:20px}
.alert-bad{background:var(--apricot);border-color:var(--bad)}
.alert-good{background:var(--mint);border-color:var(--good)}
.alert-warn{background:var(--cream);border-color:var(--gold)}
.alert-info{background:var(--ice);border-color:var(--navy)}
.alert-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}   /* buttons under an alert's words (the licence page's remove-seats confirmation) */
/* The free review queue's line (0266; the free-pending-limit-2 review's design): front first, a place for each version ahead,
   then this version in marigold, inside the amber "In line" message. Drawn only: the words beside it say the number. */
.queue-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.queue-front{font-size:var(--fs-small);color:var(--soft);margin-right:2px}
.queue-place{display:inline-block;width:22px;height:22px;border-radius:6px;border:2px solid var(--navy);background:var(--white)}
.queue-place.queue-you{width:auto;height:auto;padding:1px 10px;background:var(--marigold);color:var(--navy);font-size:var(--fs-small);font-weight:600}
.queue-more{font-size:var(--fs-small);color:var(--soft)}
.form-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;font-size:var(--fs-body)}
.link{color:var(--navy);font-weight:500}
.link-btn{background:none;border:0;padding:0;color:var(--navy);font-weight:500;text-decoration:underline;cursor:pointer;font-size:inherit}
.btn-block{width:100%}
/* Danger: filled red for the final, confirmed destructive press; the red outline for the first step (Y-02, section c2). */
.btn-danger{background:var(--bad);border-color:var(--bad);color:var(--white)}
.btn-danger:hover{border-color:var(--navy)}
.btn-danger-quiet{background:var(--white);border-color:var(--bad);color:var(--bad)}
.btn-danger-quiet:hover{background:var(--bad);color:var(--white)}
.btn-quiet{border-color:var(--line)}
.btn-quiet:hover{border-color:var(--navy)}
.inline-form{display:inline}
/* "Report use for this skill" (truth batch 2, #104; _ReportSwitch): a real button with aria-pressed, so it works with no script. The
   word On or Off shows the state as well as the knob, never colour alone. */
.report-switch{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:4px 0 0}
.report-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font-family:inherit;font-size:inherit;font-weight:500;text-align:left;cursor:pointer}
.report-track{flex:none;position:relative;width:40px;height:24px;border-radius:999px;border:1px solid var(--soft);background:var(--mist)}
.report-knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--soft)}
.report-toggle[aria-pressed="true"] .report-track{background:var(--marigold);border-color:var(--navy)}
.report-toggle[aria-pressed="true"] .report-knob{left:19px;background:var(--navy)}
.report-state{flex:none;white-space:nowrap;color:var(--soft)}
.report-line{margin:4px 0 0}
/* "Tell me when" wherever a buyer is turned away (G9, BY-02; _TellMeWhen): the button, the words agreed to, the waiting line. */
.tmw{display:grid;gap:8px;margin:12px 0 0;justify-items:start}
.tmw .hint{margin:0}
.tmw-on{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--fs-body);color:var(--ink)}
.tmw-on svg{width:22px;height:22px;flex:none}
.tmw-pick{display:grid;gap:4px;font-weight:500}
.tmw-pick select{font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--white);border:2px solid var(--field);border-radius:var(--r-sm);padding:9px 12px;min-height:44px;max-width:100%}
.tmw-login{white-space:normal;text-align:center;margin-top:12px}
/* "Not in Australia?" (G9 review, M1): the country picker folded, so someone where it's sold reads past it. */
.tmw-fold{margin-top:12px}
.tmw-fold>summary{min-height:44px;font-weight:500;color:var(--navy)}

/* external logins: "Continue with Google / Microsoft". Each button follows its provider's branding rules, not Trilly's:
   Google (Identity branding, light theme): white fill, #747775 1px stroke, #1F1F1F text, Roboto Medium 14/20, standard G mark,
   pill shape allowed. Microsoft (identity platform branding, light theme): white fill, #8C8C8C 1px stroke, #5E5E5E text,
   Segoe UI Semibold 15px, four-square logo. Both buttons are the same size so neither is more prominent. */
.ext-logins{display:grid;gap:12px}
.ext-form{margin:0}
.btn-provider{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border-radius:999px;background:#FFFFFF;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .2s,box-shadow .2s}
.btn-provider-inline{width:auto;padding:0 20px}
.provider-mark{width:20px;height:20px;flex:none}
.btn-provider-google{border:1px solid #747775;color:#1F1F1F;font-family:Roboto,Arial,sans-serif;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.25px}
.btn-provider-google:hover{background:#F8F9FA;box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15)}
.btn-provider-microsoft{border:1px solid #8C8C8C;color:#5E5E5E;font-family:"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:15px;line-height:20px}
.btn-provider-microsoft:hover{background:#F3F3F3}
.btn-provider-microsoft .provider-mark{width:21px;height:21px}
.or-divider{display:flex;align-items:center;gap:14px;margin:22px 0 0;color:var(--soft);font-size:var(--fs-small)}
.stack>.or-divider{margin-top:0}
.or-divider::before,.or-divider::after{content:"";flex:1;border-top:1px solid var(--line)}

.handle-input{display:flex;align-items:stretch;border:2px solid var(--field);border-radius:var(--r-sm);background:var(--white)}
.handle-input:focus-within{border-color:var(--navy);outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}
.handle-prefix{display:flex;align-items:center;padding:0 2px 0 14px;color:var(--soft);white-space:nowrap}
.handle-input .input{border:0;box-shadow:none;padding-left:0;min-width:0}
.handle-input .input:focus{box-shadow:none;outline:none}

/* member area */
.member{padding-block:8px 40px}
.member-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 24px;margin:16px 0 28px}
.member-head .lead{margin-top:8px}

.stack{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
/* Member pages (settings, work, purchases): section headings a step smaller than marketing pages, with room under them. */
.member section:not(.panel)>h2:not(.vh):not(.h3){font-size:var(--h2)}
.member section:not(.panel)>h2+*{margin-top:12px}
.member section:not(.panel)>h2.h-sm:not(.vh):not(.h3){font-size:var(--h3)}   /* an empty group's heading: it has to out-weigh the rule above, which carries the same two :not()s (the design review of 28 Oct, M1) */
/* "Your team" on /work/{slug} (E11): its parts side by side where they fit, one column on a phone. */
.team-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.team-grid h3{font-size:var(--fs-body)}
/* Team questions (E11): tools in a row that wraps, and each reply in its own box; the one marked as the answer in marigold. */
.team-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.team-replies{list-style:none;padding:0;display:grid;gap:12px}
.team-reply{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;background:var(--white)}
.team-reply.is-answer{border-color:var(--marigold);background:var(--cream)}
.champions{display:flex;flex-wrap:wrap;gap:8px}

.rows{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.row{border:1px solid var(--line);border-radius:20px;padding:16px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.row .ic{width:52px;height:52px;border-radius:16px}
.row .ic svg{width:30px;height:30px}
.row-main{flex:1 1 190px;min-width:0;display:grid;gap:4px}
.row-main *{overflow-wrap:anywhere}   /* long names and emails wrap on phones (G-29) */
.row-title{font-family:var(--display);font-size:var(--fs-body);color:var(--navy);font-weight:700;overflow-wrap:anywhere}
a.row-title{text-decoration:none}
a.row-title:hover{text-decoration:underline}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.meta{font-size:var(--fs-small);color:var(--soft)}
.badge-update{background:var(--marigold)}
.badge-warn{background:var(--cream);color:var(--warn)}

/* Key and value: one .kv (#129, Y-02), stacked on phones. */
.kv{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:8px 16px;font-size:var(--fs-body);margin:0}
.kv dt{color:var(--soft)}
.kv dd{margin:0;font-weight:400;min-width:0;overflow-wrap:anywhere}
.kv .quote-step{grid-column:1/-1;margin-top:4px;color:var(--soft)}   /* the buy page's step line: a note under the total, never a second line of it (e6-volume-discount-2 r4, L4) */
@media (max-width:640px){
  .kv{grid-template-columns:1fr}
}

/* A state word. One .status (#129, Y-02). */
.status{display:inline-flex;align-items:center;border-radius:999px;padding:3px 12px;font-size:var(--fs-small);font-weight:500;white-space:nowrap;background:var(--mist)}
.status-good{background:var(--mint);color:var(--good)}
.status-warn{background:var(--cream);color:var(--warn)}
.status-bad{background:var(--apricot);color:var(--bad)}
fieldset.group{border:1px solid var(--line);border-radius:20px;padding:16px 18px 18px;margin:0;display:grid;gap:12px}
fieldset.group legend{font-family:var(--display);font-weight:700;color:var(--navy);padding:0 6px;font-size:var(--fs-body)}
/* The AI app cards on /link and onboarding's last step (UX audit A-16 put them both on one step). */
ul.link-apps{list-style:none;margin:0;padding:0}
.link-apps>li{display:grid}
/* Claude, ChatGPT, Gemini and Copilot two by two, then "Another AI app" across the row as the catch-all (layout review G4-03). */
@media (min-width:601px){
  .link-apps{grid-template-columns:repeat(2,1fr)}
  .link-apps>li:last-child:nth-child(odd){grid-column:1 / -1}
}

/* Onboarding (UX audit A-14, A-16): eight colours to start from, and skipping one step or the rest. */
.colour-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.colour-preset{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--white);cursor:pointer;padding:0}
.colour-preset svg{width:26px;height:26px}
.colour-preset[aria-pressed="true"]{border-color:var(--navy)}
.ob-skips{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.ob-kit-add{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ob-kit-add li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px;border:1px solid var(--line);border-radius:16px;padding:12px 14px}
button.ob-skip{background:none;border:0;padding:0;font:inherit;cursor:pointer}
/* The identity provider folds on /help/for-your-it-team (moved from /enterprise, so they live here, not in companies.css). */
.idp-guide>summary{display:flex;align-items:center;min-height:44px;color:var(--navy);font-family:var(--display);font-weight:700;font-size:var(--h3)}
@media (min-width:761px){.idp-guides code{overflow-wrap:normal}}
/* The IT admin pack's AI apps on the same page (REMAINING 3.29n): a row each, the app and the plans it's about, then what an admin
   does, with a rule between rows so a printed page reads as a table. */
.it-apps{border-top:1px solid var(--line)}
.it-app{padding:12px 0;border-bottom:1px solid var(--line)}
/* A plan line that doesn't fit beside the app's name moves whole to the next line (the print-guides-2 review's L6: a phone left "A"
   at the end of the name's line and "Trilly Enterprise workspace" under it). */
.it-app dt{display:flex;flex-wrap:wrap;gap:0 10px;font-weight:600;color:var(--navy)}
.it-app dt .muted{font-weight:400}
.it-app dd{margin:4px 0 0}
.it-app-go{display:block;margin-top:8px}
/* "Two ways to add skills to {app}" on an app's guide (UX audit M-15): the easy way first, in a box above the steps. */
.two-ways{border:1px solid var(--line);border-radius:18px;padding:14px 18px;background:var(--white)}
@media print{
  /* Every page prints at rest (REMAINING 3.29n): a section that rises in as it scrolls into view (animation-timeline:view())
     never scrolls on paper, so it printed at its starting opacity, blank (the /link guide's "What you need" and troubles). */
  *,*::before,*::after{animation:none!important}
  .nav,.footer,.no-print,.side-nav,.crumbs{display:none!important}
  /* UX audit M-30: the contents list, the phone bar and the email notice aren't part of what's printed. */
  .toc,.toc-jump,.phone-bar,.phone-bar-space,.delivery-bar,.link-mesh{display:none!important}
  .article.has-toc{display:block}
  .article-body a[href]::after{content:" (" attr(href) ")";font-size:var(--fs-small);overflow-wrap:anywhere}
  .article-body a[href^="#"]::after{content:""}
}
/* Guides that print as files (REMAINING 3.29n): each AI app's set-up guide and the IT admin pack. The masthead is paper's only
   (what it is, and where the latest version lives); "Print or save as PDF" ends the guide on screen. */
.print-only{display:none}
.print-row{margin-top:18px}
@media print{
  .print-only{display:block}
  .print-head{border-bottom:2px solid var(--navy);padding-bottom:8px;margin-bottom:18px}
  .print-kind{font-family:var(--display);font-weight:600;font-size:var(--h3);color:var(--navy)}
  /* "Trilly" a step up from what it is, at Gabarito's 700: a plain <b> asked for 900, the wordmark's alone (review L1). */
  .print-kind b{font-family:var(--display);font-weight:700}
  .print-src{font-size:var(--fs-small);color:var(--navy)}
  /* On paper a guide is its steps, what you need and what to do if something goes wrong, every fold open (js/site.js opens
     them; ::details-content where the script can't). The drawings, the other apps, the skills block, the buttons and a linked
     person's own note stay on screen; Trilly's address prints whole; a web address prints after its link. */
  [data-print-folds] .lk-side,[data-print-folds] .lk-pic-step,[data-print-folds] .lk-pic-consent,[data-print-folds] .lk-others,
  [data-print-folds] .gd-pic,[data-print-folds] .gd-demo,[data-print-folds] .gd-tested,[data-print-folds] .hp-article-pic,
  [data-print-folds] .copy-btn,[data-print-folds] .btn-go,[data-print-folds] [data-link-state]{display:none!important}
  [data-print-folds] .lk-grid,[data-print-folds] .gd-head{display:block}
  [data-print-folds] details::details-content{content-visibility:visible}
  [data-print-folds] summary .ui-ico,[data-print-folds] summary::after{display:none!important}
  [data-print-folds] .copy-text.copy-long{max-height:none;overflow:visible}
  [data-print-folds] li,[data-print-folds] .faq details,[data-print-folds] .sk-fold,[data-print-folds] .it-app,
  [data-print-folds] p.note{break-inside:avoid}
  [data-print-folds] h2,[data-print-folds] h3,[data-print-folds] summary{break-after:avoid}
  /* A step led by its button prints its by-hand way alone: "Add it by hand instead" is instead of nothing on paper (review M1). */
  [data-print-folds] .lk-step-body > .disclose > summary{display:none!important}
  /* Someone already linked prints the same guide as anyone, to hand on: "Link Claude again" is about nothing on paper, and the lead, off their screen, prints. */
  [data-print-folds] .lk-again > summary{display:none!important}
  [data-print-folds] .lk-lead{display:block}
  /* Tighter on paper, so a guide doesn't end on a page of two lines (review M2, Grok's). */
  [data-print-folds] .lk-trouble{margin-top:32px}
  [data-print-folds] .sk-fold > summary{min-height:44px}
  [data-print-folds] .sk-fold-body{padding-bottom:16px}
  /* The pack's last section moves whole, and no paragraph breaks after a line or two: the print-guides-2 review's M1 (its last
     page was two lines, and "Ask us" split a link from its address). */
  [data-print-folds] section[aria-labelledby="more-title"]{break-inside:avoid}
  [data-print-folds] p{orphans:3;widows:3}
  /* A works-with guide (the same review's L2): the block above the questions stays on screen, so they keep a gap of their own;
     answers print as dark as the steps; a step's number sits on its title's line. */
  [data-print-folds] section[aria-labelledby="faq-title"]{margin-top:32px}
  [data-print-folds] .faq p{color:var(--ink)}
  [data-print-folds] ol.steps>li::before{top:16px}
  /* An address in the text has no box on paper, so no gap before the comma after it (review L4). */
  [data-print-folds] code{padding-inline:0!important}
  /* Paper can't be clicked: a link prints its address, a page of Trilly's as trilly.io and its path. */
  [data-print-folds] a[href^="http"]:not(.btn)::after{content:" (" attr(href) ")";font-size:var(--fs-small);overflow-wrap:anywhere}
  [data-print-folds] a[href^="/"]:not(.btn)::after{content:" (trilly.io" attr(href) ")";font-size:var(--fs-small);overflow-wrap:anywhere}
}

/* account menu (header) */
.acct{position:relative}
.acct>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid var(--line);background:var(--white);position:relative}
.acct>summary::-webkit-details-marker{display:none}
.acct>summary:hover,.acct[open]>summary{border-color:var(--navy)}
.acct .avatar{width:34px;height:34px}
.acct-name{font-weight:500;max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-small)}
.acct-caret{width:9px;height:9px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg) translateY(-3px)}
@media (max-width:560px){
  .acct-caret{display:none}
  /* The name stays the button's name for screen readers and voice control (the UX-C1 review, L2), just not on screen. */
  .acct-name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .acct>summary{padding:4px}
}
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:250px;background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:8px;display:grid;z-index:40}
.acct-menu a,.acct-menu button{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--navy);background:none;border:0;text-align:left;font-size:var(--fs-small);width:100%}
.acct-menu a:hover,.acct-menu button:hover{background:var(--mist)}
.acct-menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.acct-who{padding:8px 12px 10px;font-size:var(--fs-small);color:var(--soft);overflow-wrap:anywhere}
.acct-who b{display:block;color:var(--navy);font-size:var(--fs-body)}
.count{background:var(--marigold);color:var(--navy);border-radius:999px;font-size:var(--fs-small);font-weight:600;padding:1px 8px;min-width:22px;text-align:center}
.acct-dot{position:absolute;top:2px;left:30px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid var(--white)}
/* Phones: the account menu is a full-width panel under the sticky header, never hanging off the screen's edge. */
@media (max-width:560px){
  .acct-menu{position:fixed;top:calc(72px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));min-width:0;max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain}
  .acct-menu a,.acct-menu button{min-height:48px}
}
/* ---------- social gaps: header bell (0031; the rest of the social styles are in social.css) ---------- */
.bell{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:999px;background:var(--white);text-decoration:none}
.bell:hover,.bell[aria-current="page"]{border-color:var(--navy)}
.bell-ic{display:grid;place-items:center}
.bell-ic svg{width:24px;height:24px}
.bell-count{position:absolute;top:-5px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--marigold);color:var(--navy);border:2px solid var(--white);font-size:var(--fs-small);font-weight:600;line-height:18px;text-align:center}
/* ---------- end social gaps: header bell ---------- */

/* maker pages */
.profile-head .avatar img{width:100%;height:100%;object-fit:cover}
.profile-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.links{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.links a{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 14px;font-size:var(--fs-small);background:var(--mist);color:var(--navy);text-decoration:none}
.links a:hover{background:var(--ice)}
.makers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:960px){
  .makers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .makers{grid-template-columns:1fr}
}
.maker-card{border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:10px;align-content:start;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.maker-card:hover{border-color:var(--field)}
.maker-card-top{display:flex;gap:14px;align-items:center}
.maker-card .avatar{width:56px;height:56px;font-size:1.1rem}
.maker-card b{font-family:var(--display);font-size:var(--h3);color:var(--navy);display:block;line-height:1.15;font-weight:700}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filters a{border-radius:999px;padding:7px 14px;font-size:var(--fs-small);color:var(--navy);text-decoration:none;background:var(--mist)}
.filters a[aria-current="page"]{background:var(--navy);color:var(--white)}

/* content pages: learn, help, legal, install guides, trust (docs/SEO_AEO.md) */
.article{max-width:760px}
/* An article's tables use the article's whole column, so labels don't wrap to three lines; its text keeps the reading width (G4-21). */
.article .prose{max-width:none}
.article .prose>*{max-width:var(--measure)}
.article .prose>table{max-width:none}
.article .prose>.table-wrap{max-width:none}
.article-head h1{font-size:var(--h1)}
.answer-box{border-left:6px solid var(--marigold);background:var(--cream);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:18px 22px;font-size:var(--fs-body);max-width:var(--measure)}
.answer-box p+p{margin-top:10px}
.paid-soon{max-width:var(--measure)}
.fresh{font-size:var(--fs-small);color:var(--soft)}
.fresh a{color:var(--navy)}
/* A row of related links, each on its own, without "·" between them (G11, AI-34). */
.link-row{display:flex;flex-wrap:wrap;gap:6px 22px}
.link-row a{color:var(--navy)}

.prose h2{font-size:var(--h2);margin-top:40px}

.prose h3{margin-top:24px}
.prose h2+p,.prose h3+p,.prose h2+ul,.prose h3+ul,.prose h2+ol,.prose h3+ol{margin-top:12px}
.prose ul,.prose ol{padding-left:22px;margin:12px 0 0;display:grid;gap:6px}
.prose a{color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:3px}
.prose strong,.prose b{font-weight:600}
.prose code{font-family:var(--body);background:var(--mist);border-radius:6px;padding:1px 4px;font-size:.92em;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* A block keeps each line whole and scrolls sideways in its box, so a command never breaks at a hyphen (layout batch 2 review, L6;
   its re-check, M1). A list item can shrink below a wide block inside it, so the page never scrolls sideways. */
.prose pre{font-family:var(--body);background:var(--mist);border-radius:var(--r-sm);padding:14px 16px;overflow-x:auto;white-space:pre}
.prose pre code{overflow-wrap:normal}
/* Copy-ready samples on help pages (the audit log API guide): the body font, as BRAND asks, scrolling inside the tile, never the page. */
.code-sample{font-family:var(--body);font-size:var(--fs-small);background:var(--mist);border-radius:var(--r-sm);padding:14px 16px;overflow-x:auto;white-space:pre;max-width:100%;margin-top:10px}
.code-sample code{padding:0;background:none;border-radius:0;font-size:inherit;overflow-wrap:normal}
.prose li{min-width:0}
/* A table is read, not skimmed: terms, prices, what each skill does, help lines. Body size (the lead's decision, #104). */
.prose table{width:100%;border-collapse:collapse;margin-top:16px;font-size:var(--fs-body)}
.data-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:var(--fs-body)}
.prose th,.prose td,.data-table th,.data-table td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose th,.data-table th{font-weight:600;color:var(--navy);background:var(--mist)}
.prose blockquote{margin:16px 0 0;border-left:4px solid var(--line);padding-left:16px;color:var(--soft)}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:960px){
  .guide-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .guide-grid{grid-template-columns:1fr}
}
.guide-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:20px;padding:18px 20px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.guide-card:hover{border-color:var(--field)}
.guide-card b{font-family:var(--display);font-size:var(--h3);color:var(--navy);line-height:1.2;font-weight:700}
.guide-card span{font-size:var(--fs-small);color:var(--soft)}

/* Steps: an <ol class="steps"> is numbered step cards (guides, set-up, claiming); a <ul class="steps"> is a plain list of
   points. The Studio upload progress uses .progress-steps. */
ol.steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:14px;max-width:var(--measure)}
/* A step's number is a navy numeral in the display face, with no disc (the calm site, CALM-6, V-5: navy fill means "press
   here"); every line of the step starts at one edge beside it. */
ol.steps>li{counter-increment:step;position:relative;padding:16px 18px 16px 56px;border:1px solid var(--line);border-radius:20px;min-width:0;overflow-wrap:break-word}
ol.steps>li::before{content:counter(step);position:absolute;left:20px;top:13px;font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1.25;color:var(--navy)}
ol.steps>li>b:has(+p){display:block;font-family:var(--display);font-size:var(--h3);line-height:1.25;color:var(--navy);font-weight:700}
ol.steps>li p{margin-top:4px;color:var(--ink)}
ol.steps ul{margin:8px 0 0;padding-left:20px;display:grid;gap:6px;list-style:disc}
ul.steps{margin:0;padding-left:22px;display:grid;gap:8px;max-width:var(--measure)}
/* Small phones: a narrower gutter (G4-10: the text had a 30-character column beside 58 px). Every line starts at the same edge:
   the number used to float beside the first line only, which indented that line and no other (the calm-site review, #171).
   The ranked-list tabs fit 390 px without scrolling (G4-35). */
@media (max-width:420px){
  ol.steps>li{padding:14px 14px 14px 44px}
  ol.steps>li::before{left:14px;top:11px}
  .tabs-nav a{padding-inline:10px}
}
.plain-steps{padding-left:22px;display:grid;gap:8px;max-width:var(--measure)}
.link-mesh h3{font-size:var(--fs-body);margin-bottom:8px}
.mesh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:760px){
  .mesh-grid{grid-template-columns:1fr}
}
.mesh-grid ul,.link-list,.hit-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mesh-grid a,.link-list a,.hit-list a{color:var(--navy)}
.pill-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
/* Two columns, by intent (#129, Y-01): .split-2 halves for marketing and help sections, .split-aside a 320px side column
   for admin and studio pages. Until 16 Oct 2026 one bare .split meant both, and the later rule squeezed every half. */
.split-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:start}
@media (max-width:820px){
  /* Stacked halves keep a section's distance, so two halves don't read as one (G6-17). */
  .split-2{grid-template-columns:minmax(0,1fr);row-gap:48px}
}
.split-aside{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:960px){
  .split-aside{grid-template-columns:minmax(0,1fr)}
}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:4px;top:.45em;width:14px;height:8px;border-left:3px solid var(--good);border-bottom:3px solid var(--good);transform:rotate(-45deg)}
.ticks a{color:var(--navy)}

/* forms (the .form and .field base are with the accounts styles above) */
.form-error{color:var(--bad);font-size:var(--fs-body)}
.form-error ul{margin:0;padding-left:18px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.co-logo img{width:100%;height:100%;object-fit:contain;background:var(--white)}

.co-facts a{color:var(--navy)}
/* "A product of Intuit" under a product page's name, and "Works in Claude: yes, ..." lines (requirement #113) */
.co-parent{margin-top:4px;color:var(--soft)}
.co-parent a{color:var(--navy);font-weight:500}
.works-in{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:72ch}
.works-in li{border-left:4px solid var(--marigold);padding:4px 0 4px 14px}
.works-in b{color:var(--navy)}
.works-in a{color:var(--navy)}

.claim-banner{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-top:24px;border-radius:var(--r);padding:18px 22px;background:var(--cream)}
.claim-banner p{max-width:62ch}

.az{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.az a{min-width:36px;text-align:center;border-radius:10px;padding:6px 8px;text-decoration:none;background:var(--mist);color:var(--navy);font-weight:500}
.az a[aria-current="page"]{background:var(--navy);color:var(--white)}
/* One .pager (#129, Y-02). */
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px}
.pager span{color:var(--soft);font-size:var(--fs-small)}
.hub-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.hub-tiles a{border-radius:18px;padding:16px 18px;text-decoration:none;background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.hub-tiles b{font-family:var(--display);color:var(--navy);font-size:var(--fs-body);overflow-wrap:anywhere;font-weight:700}
.hub-tiles span{font-size:var(--fs-small);color:var(--soft)}
.claim-box{border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:12px;max-width:760px}
.claim-box h2{font-size:var(--h3)}
.claim-box label{font-weight:500;color:var(--navy)}
.claim-box input[type=email],.claim-box input[type=text],.claim-box textarea{font:inherit;width:100%;border:2px solid var(--field);border-radius:14px;padding:10px 14px;color:var(--ink)}
.claim-box textarea{min-height:110px}
.claim-box input:focus,.claim-box textarea:focus{border-color:var(--navy);outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}

.token{display:block;font-size:var(--fs-small);background:var(--mist);border-radius:12px;padding:12px 14px;overflow-wrap:anywhere;user-select:all}
/* One .notice (#129, Y-02: payments.css had its own). Both spellings of the kinds work: notice-ok and good, and so on. */
.notice{border-radius:18px;padding:16px 20px;font-size:var(--fs-body);background:var(--mist);display:grid;gap:6px;max-width:var(--measure)}
.notice b{font-family:var(--display);font-size:var(--fs-body);color:var(--navy);font-weight:700}
.notice-ok,.notice.good{background:var(--mint)}
.notice-bad,.notice.bad{background:var(--apricot);color:var(--ink)}
.notice-info{background:var(--ice)}
.notice.warn{background:var(--cream)}
/* Back from logging in to join a community: one press finishes it (UX audit C-13). */
.join-finish{margin:0 0 20px;align-items:start}
/* ---------- skill pipeline: studio, review queue, get page, feedback (docs/SKILL_PIPELINE.md) ---------- */
.page-narrow{padding-bottom:clamp(36px,5vw,64px)}
.h3{font-family:var(--display);font-size:var(--h3);font-weight:600}
.page-head{padding-block:24px 8px}
.page-head h1{font-size:var(--h1)}
.decide-head h1{font-size:var(--h2)}
/* A pasted copy compared by fingerprint in the browser (3.29v part 2, site.js): same words or not. */
.fp-line{min-height:1.5em;font-weight:600}
.fp-same{color:var(--good)}
.fp-different{color:var(--bad)}
.ws-ai-line{border-left:3px solid var(--line);padding-left:12px;margin-top:8px}
.page-head .lead{margin-top:12px}
/* A page's head in the mockups v2's shape (calm batch G; the requests board's scene proof): a small kicker naming the place, the
   page's one idea as its h1, one lead line and at most one action, and a drawing or product picture beside it on a wide screen
   (under it on a phone, after the action). Without a picture it's one column at the reading width. */
.pg-head{display:grid;grid-template-columns:minmax(0,1fr);gap:28px 64px;align-items:center;padding:clamp(16px,3vw,40px) 0 clamp(8px,2vw,24px)}
.pg-head.has-art{grid-template-columns:minmax(0,1fr) minmax(0,32rem)}
.pg-kicker{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:var(--fs-small);font-weight:500;color:var(--soft)}
.pg-kicker svg{width:22px;height:22px;flex:none}
.pg-head h1{max-width:14em;text-wrap:balance}
.pg-head .lead{margin-top:16px;max-width:36em;text-wrap:pretty}
.pg-meta{margin-top:12px;color:var(--soft);font-size:var(--fs-small)}
.pg-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
.pg-acts form{display:contents}
.pg-art{display:block;width:100%;height:auto;justify-self:end}
/* A section of such a page: the v2 spacing between sections, its h2 at the section size with one line under it. */
.pg-sec{padding-top:clamp(48px,3rem + 3vw,96px)}
.pg-sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 32px;margin-bottom:24px}
.pg-sec-head h2{margin:0}
.pg-sec-head p{margin:8px 0 0;color:var(--soft);max-width:40em}
/* Drawn pictures (the mockups v2's line art): the empty state's clipboard (_ArtEmpty), on any page that has an empty state, so in
   site.css since the community pages took it up (calm batch G). */
.art{display:block;height:auto;overflow:visible}
.art .o{stroke:var(--navy);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.art .o.thin{stroke-width:2.2}
.art .ln{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round}
.art .ln.sw8{stroke-width:8}
.art .ln.dash-bar{stroke:color-mix(in oklab,var(--navy) 22%,var(--white));stroke-width:12;stroke-dasharray:.1 17}
.art .fill-n{fill:var(--navy)}
.art .fill-m{fill:var(--marigold)}
.art .fill-w{fill:var(--white)}
.art .fill-i{fill:var(--ice)}
.art .shade{fill:color-mix(in oklab,var(--navy) 10%,transparent)}
/* An honest empty state, drawn (the mockups v2's browse empty state): a drawing, what isn't here yet in plain words, and the one
   thing to do about it. Never a made-up person, post or number. */
.pg-empty{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:24px 40px;align-items:center;padding:clamp(24px,3vw,44px);border-radius:var(--r-lg);background:var(--mist)}
.pg-empty .art-empty,.pg-empty .pg-empty-art{width:100%;max-width:180px;height:auto}
.pg-empty h2,.pg-empty h3{font-size:var(--h3);margin:0}
.pg-empty p{margin:8px 0 0;color:var(--soft);max-width:36em}
.pg-empty .pg-acts{margin-top:18px}
@media (max-width:900px){
  .pg-head.has-art{grid-template-columns:minmax(0,1fr)}
  .pg-art{justify-self:start;max-width:30rem}
}
@media (max-width:760px){
  .pg-head{gap:20px}
  .pg-acts .btn{flex:1 1 auto}
  .pg-empty{grid-template-columns:minmax(0,1fr);gap:12px;padding:24px 20px}
  .pg-empty .art-empty,.pg-empty .pg-empty-art{max-width:132px}
}

.fieldset{border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:18px;margin:0;min-width:0}
.fieldset legend{font-family:var(--display);font-weight:700;font-size:var(--h3);color:var(--navy);padding:0 8px}
.field label,.field .label{font-weight:500;color:var(--navy)}
.field .hint{font-size:var(--fs-body);color:var(--soft)}
.field input:where(:not([type=checkbox],[type=radio],[type=hidden])),.field textarea,.field select{font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--white);border:2px solid var(--field);border-radius:var(--r-sm);padding:11px 14px;width:100%;min-width:0}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--navy);outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}

/* A bordered radio or checkbox row (one .choice, #129 Y-02). */
.choice{display:flex;align-items:center;gap:10px;border:2px solid var(--field);border-radius:999px;padding:7px 14px;cursor:pointer;font-size:var(--fs-body)}
.choice input{accent-color:var(--navy);width:18px;height:18px;flex:none}
.tick{display:flex;gap:10px;align-items:flex-start}
.tick input{accent-color:var(--navy);width:20px;height:20px;margin-top:3px;flex:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.status-draft,.status-pending{background:var(--mist);color:var(--navy)}
.status-needs_human,.status-in_review{background:var(--cream);color:var(--warn)}
.status-approved,.status-published{background:var(--mint);color:var(--good)}
.status-rejected,.status-removed{background:var(--apricot);color:var(--bad)}
.status-paused{background:var(--ice);color:var(--navy)}
/* Past a promised time (before sales 2: 2 working days for a review, 24 hours for a report of an unsafe skill). */
.status-late{background:var(--apricot);color:var(--bad);font-weight:600}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.table th,.table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.table th{font-weight:500;color:var(--soft);background:var(--mist)}
.table tr:last-child td,.table tbody tr:last-child th{border-bottom:0}
.mono{font-variant-numeric:tabular-nums;font-size:var(--fs-small);word-break:break-all}   /* addresses and codes in the body font (BRAND: no monospace; audit Y-06) */

/* findings, radio rows and the review queue live in studio.css (studio and admin pages only) */

.feedback-kinds{display:flex;flex-wrap:wrap;gap:8px}
.kind-count{border-radius:999px;padding:6px 14px;background:var(--mist);font-size:var(--fs-small)}
.kind-count b{font-weight:600;color:var(--navy)}
.fb-list{display:grid;gap:14px}
.fb-item{border:1px solid var(--line);border-radius:20px;padding:16px 18px;display:grid;gap:8px}
.fb-meta{font-size:var(--fs-small);color:var(--soft);display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- community: communities, threads, replies, feed, reviews (requirement #27) ---------- */
.d-block{display:block}
.narrow{max-width:860px}
.h-page{font-size:var(--h1)}
.h-md{font-size:var(--h2)}
.h-sm{font-size:var(--fs-body)}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;margin-bottom:8px}
.head-row .filters{margin-bottom:0}
/* .ugc marks people's own posts only (questions, answers, comments, results, reviews): the pre-check's --ugc-free leaves them out
   of a thread or post page's word budget (the lead, 21 Oct), and UgcTests holds every .ugc to a stored post field. Anything else
   that keeps its line breaks is .pre-line. */
.ugc,.pre-line{white-space:pre-line;overflow-wrap:anywhere}
.link-quiet{color:var(--soft);font-size:var(--fs-small)}
.link-danger{color:var(--bad)}
.status-note{background:var(--cream);border-left:5px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:10px 14px;font-size:var(--fs-body)}

.stars-input{display:flex;flex-wrap:wrap;gap:8px 18px}
.kind-picker{display:flex;flex-wrap:wrap;gap:8px}

.mini-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.mini-list a{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
.mini-list .ic{width:40px;height:40px;border-radius:12px}
.mini-list .ic svg{width:24px;height:24px}
.mini-list b{color:var(--navy);font-weight:600;overflow-wrap:anywhere}
.threads{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.thread-row{border:1px solid var(--line);border-radius:20px;padding:14px 16px;display:flex;gap:14px;align-items:flex-start}
.thread-score{flex:none;order:-1;width:56px;border-radius:14px;background:var(--mist);text-align:center;padding:6px 4px;line-height:1.1}
.thread-score:empty{display:none}   /* no score, no column: it left a 56 px hole before each new thread (calm batch G, #190) */
.thread-score b{display:block;font-family:var(--display);font-size:var(--h3);color:var(--navy);font-weight:700}
.thread-score span{font-size:var(--fs-small);color:var(--soft)}
.thread-tags{display:flex;flex-wrap:wrap;gap:6px}
.thread-tags .badge{align-self:auto}
.thread-excerpt{color:var(--soft);font-size:var(--fs-small);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}

.mod-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;padding:10px 14px;border:1px solid var(--line);border-radius:16px}
.mod-reason{flex:1 1 220px;width:auto;min-height:40px;padding:8px 12px}   /* the rule a "didn't work" result breaks: the post page and both report queues */

.report>summary,.reply-to>summary,.maker-reply>summary{cursor:pointer;list-style:none}
.report>summary,.reply-to>summary{color:var(--soft)}
.report>summary::-webkit-details-marker,.reply-to>summary::-webkit-details-marker,.maker-reply>summary::-webkit-details-marker{display:none}

.maker-reply>summary{color:var(--navy);font-weight:500}

.reply-hidden{background:var(--mist)}

.composer .form{max-width:none}

.community-links{display:flex;flex-wrap:wrap;gap:8px}
.maker-tools{border-color:var(--marigold)}
.community-callout{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;background:var(--cream);border-color:var(--cream)}
.community-callout>div{flex:1 1 320px}
/* ---------- Social on phones (feed, posts, communities, threads). Kept in its own block. ---------- */
@media (pointer:coarse){
  .report>summary,.reply-to>summary,.maker-reply>summary{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:600px){
  .thread-row{padding:12px 14px;gap:12px}
  .thread-score{width:48px}
}
/* ---------- end social on phones ---------- */

.consent{max-width:640px}
@media (max-width:560px){
  .consent .actions .btn{flex:1 1 100%}
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--navy);text-decoration:none;font-size:var(--fs-small)}
.chip:hover{border-color:var(--navy)}
/* Trilly Originals (#24): made by Trilly, distinct from Official (navy) */
.badge-original{background:var(--marigold);color:var(--navy);text-decoration:none}
/* A Trilly team character (#110): never mistaken for a person, so the label is loud and the same everywhere. */
.badge-team{background:var(--navy);color:var(--marigold);text-decoration:none}
.badge-team:hover,.badge-team:focus-visible{text-decoration:underline}
/* A reply on a Trilly Original, written by a person at Trilly in the team inbox (G2): plainly staff, never a character. */
.badge-staff{background:var(--white);color:var(--navy);border:1.5px solid var(--navy);text-decoration:none}
.badge-staff:hover,.badge-staff:focus-visible{text-decoration:underline}
/* An Original's country editions (0035): "Written for Australia. Also for: US · UK" */
.also-for{font-size:var(--fs-small);color:var(--soft)}
.also-for a{color:var(--navy);font-weight:500}
/* /help-lines: a number never breaks across lines, but only the number: what's said after it wraps, so nothing runs out of its
   card or off a phone screen (layout review P0, G3-24). On phones each line is a row between 1 px rules (calm batch G): the
   country, the service, then its number and when it's open, with no labels, so someone in a hard moment finds a number fast. On
   wide screens the four tables share their column widths (G3-26). */
.help-line-number{white-space:nowrap;font-weight:600}
@media (max-width:640px){
  .help-lines .stack-table tr{border:0;border-radius:0;border-bottom:1px solid var(--line);padding:14px 0}
  .help-lines .stack-table tr+tr{margin-top:0}
  .help-lines .stack-table td,.help-lines .stack-table tbody th{padding:2px 0!important;border-top:0!important}
  .help-lines .stack-table td::before{display:none}
  .help-lines .stack-table td[data-label="When"]{color:var(--soft)}
}
@media (min-width:641px){
  .help-lines .table{table-layout:fixed}
  .help-lines .table thead th:nth-child(1){width:18%}
  .help-lines .table thead th:nth-child(2){width:30%}
  .help-lines .table thead th:nth-child(3){width:22%}
}
.skill-source{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--body);font-size:var(--fs-small);background:var(--mist);border-radius:var(--r-sm);padding:12px 14px;max-height:520px;overflow:auto;margin:8px 0 0}
.bubble.skill-source{background:transparent;padding:0;max-height:none}
/* ---- Discovery (requirement #32): search, ranked lists, tasks / best / compare, collections, onboarding ---- */
/* Skill cards: the name is the link, stretched over the card, so Save and "Made by Trilly" sit above it as their own controls. */
.card-linked{position:relative}
.card-linked:hover{border-color:var(--field)}
.card-linked:has(.card-link:focus-visible){outline:var(--ring-line);outline-offset:3px;box-shadow:var(--ring)}   /* not for Save, nor a click (layout batch 3 re-check, L2) */
.card-link{color:inherit;text-decoration:none}
.card-link:focus-visible{outline:none}
.card-link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0}
/* Ranked lists: numbered cards with the one line that explains each place. */
.ranked{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px}
@media (max-width:960px){
  .ranked{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .ranked{grid-template-columns:1fr}
}
.ranked>li{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
.ranked>li>.card{flex:1}
.rank-no{position:absolute;top:-10px;left:-8px;z-index:2;background:var(--navy);color:var(--white);font-family:var(--display);font-weight:700;border-radius:999px;min-width:34px;height:34px;display:grid;place-items:center;padding-inline:8px;box-shadow:0 0 0 3px var(--white)}
.why{font-size:var(--fs-small);color:var(--soft);padding-inline:6px}
/* /new: the date a run of cards shares, said once above them (layout review G4-29). */
.ranked-when{font-family:var(--body);font-size:var(--fs-small);font-weight:600;color:var(--soft);margin:0 0 14px}
.ranked+.ranked-when{margin-top:36px}
.list-links{font-size:var(--fs-small);color:var(--soft)}
.list-links a{color:var(--navy)}
/* Home: ranked list strip and communities strip */
.list-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
@media (max-width:960px){
  .list-strip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .list-strip{grid-template-columns:1fr}
}
/* Four lists between tablet and wide: two by two, not three and one alone (layout review L3). */
@media (min-width:961px) and (max-width:1100px){
  .list-strip:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
}
.list-col{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.list-col h3 a{text-decoration:none}
.mini-ranked{margin:0;padding-left:1.2em;display:grid;gap:10px}
.mini-ranked li a{color:var(--navy);text-decoration:none}
.mini-ranked li span{display:block;font-size:var(--fs-small);color:var(--soft)}
.see-all{margin-top:auto;font-size:var(--fs-small);color:var(--navy)}
.community-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
@media (max-width:760px){
  .community-strip{grid-template-columns:1fr}
}
.community-tile{border-radius:22px;padding:18px 20px;text-decoration:none;display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:center}
.community-tile svg{width:40px;height:40px;grid-row:span 2}
.community-tile b{font-family:var(--display);color:var(--navy);font-size:var(--fs-body);font-weight:700}
.community-tile span{font-size:var(--fs-small);color:var(--soft)}
/* No member count yet: the name sits level with the middle of its icon (G3-10). */
.community-tile>b:last-child{grid-row:1 / span 2;align-self:center}
/* Tasks hub */
.task-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px}
@media (max-width:640px){
  .task-list{grid-template-columns:1fr}
}
.task-list a{color:var(--navy)}
.task-list .muted{font-size:var(--fs-small)}
/* Search */
.did-you-mean{font-size:var(--fs-body)}
.did-you-mean a{color:var(--navy)}
.zero{text-align:left;margin-top:8px}
.zero h3{font-size:var(--fs-body)}
.tell-us-box{border-top:1px solid var(--line)}
/* Inside the dashed "no results" box: a solid rule with room under it, not a dashed line in a dashed box (G5-16). */
.zero .tell-us-box{border-top-style:solid;padding-top:20px}
.tell-us{display:grid;gap:8px;max-width:560px}
.tell-us label{font-weight:500;color:var(--navy)}
.tell-us textarea{font:inherit;border:2px solid var(--field);border-radius:var(--r-sm);padding:10px 12px;width:100%;resize:vertical}
.tell-us textarea:focus{border-color:var(--navy);outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}
.tell-us .btn{justify-self:start}
/* "Add my vote to it, and tell me here when there's a skill for it" (G12g): a member's own tick, unticked by default. */
.tell-us-follow,.tell-us .tell-us-follow{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:var(--fs-body);color:var(--ink)}
.tell-us-follow input{margin-top:4px;width:18px;height:18px;flex:none}
/* "Skills people want" (G12g): the rail on community pages and the home page's section. Links and counts only, no forms. */
.req-list{list-style:none;margin:12px 0 0;padding:0;display:grid}
.req-row{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.req-row:first-child{border-top:0}
.req-row a{color:var(--navy);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.req-row a:hover{text-decoration:underline}
.req-row .meta{font-size:var(--fs-small)}
.req-rail .req-ask{margin-top:12px}
.req-list-home{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:0 28px;border-top:1px solid var(--line)}
.req-home .head{margin-bottom:12px}
/* Compare */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:700px){
  .grid2{grid-template-columns:1fr}
}
.compare-table th[scope=row]{width:32%;font-weight:500}
.compare-table thead th a{color:var(--navy)}
/* Collections */
.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){
  .collection-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .collection-grid{grid-template-columns:1fr}
}
.collection-card{border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:transform .15s}
.collection-card:hover{border-color:var(--field)}
.collection-card b{font-family:var(--display);color:var(--navy);font-size:var(--h3);font-weight:700}
.collection-card .badge{align-self:flex-start}
.collection-desc{color:var(--ink);font-size:var(--fs-small)}
.collection-card .muted{font-size:var(--fs-small);margin-top:auto}

.ob-other>summary{cursor:pointer;color:var(--navy);font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.ob-other[open]>summary{margin-bottom:8px}

/* ---------- Home and discovery on phones ---------- */
/* .swipe: on phones a row of cards becomes a sideways shelf that snaps card by card, the next card peeking in, instead
   of a page-long stack. Tabbing to a card's link scrolls it into view. The row is the containing block for anything placed
   absolutely inside it (a screen-reader label in a card), so nothing escapes its clipping and widens the page (calm batch G v2). */
@media (max-width:600px){
  .swipe{position:relative;display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(16px,4vw,32px);margin-inline:calc(-1 * clamp(16px,4vw,32px));padding:6px clamp(16px,4vw,32px) 16px;border-radius:0;scrollbar-width:none}
  .swipe::-webkit-scrollbar{display:none}
  .swipe>*{scroll-snap-align:start;min-width:0}
  /* The icon sits above the name, so the name, maker line, promise and price share one left edge (layout review G5-28). */
  .skill-title{flex-direction:column;gap:10px}
  .skill-title .ic{width:48px;height:48px;border-radius:15px}
  .skill-title .ic svg{width:30px;height:30px}
}

@media (max-width:600px){
  .profile-head{gap:16px}
  .profile-head .avatar{width:80px;height:80px;font-size:1.6rem}
}
/* Phones: a form's main button stays at the bottom of the screen while the form is in view (.sticky-actions on a direct
   child of .wrap), and a fieldset's legend sits inside its box instead of straddling the border when it wraps. */
@media (max-width:600px){
  .sticky-actions{position:sticky;bottom:0;z-index:5;margin-inline:calc(-1 * clamp(16px,4vw,32px));padding:12px clamp(16px,4vw,32px) calc(12px + env(safe-area-inset-bottom,0px));background:var(--white);border-top:1px solid var(--line)}
  .fieldset>legend,fieldset.group>legend{float:left;width:100%;padding:0}
}
/* Long rows of filter pills (who it's for, A to Z, a skill map's "Show it as") stay on one swipeable line on phones instead of
   wrapped rows (G5-35). The fade is a fixed 24 px over end padding at least as wide, so the last pill is clear once you reach it
   (layout review L16). */
@media (max-width:760px){
  .scroll-row,.az,.filters,.map-switcher .map-switch{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(16px,4vw,32px));padding:2px max(28px,clamp(16px,4vw,32px)) 6px clamp(16px,4vw,32px);white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .scroll-row::-webkit-scrollbar,.az::-webkit-scrollbar,.filters::-webkit-scrollbar,.map-switcher .map-switch::-webkit-scrollbar{display:none}
  .scroll-row>*,.az>*,.filters>*,.map-switcher .map-switch>*{flex:none}
}
/* The phone bar: the page's main action ("Add to my AI") stays at the bottom of the screen, in thumb reach. A spacer after
   the footer keeps it from ever covering the last of the page. Pages opt in with @section PhoneBar. */
.phone-bar,.phone-bar-space{display:none}
@media (max-width:900px){
  .phone-bar-space{display:block;height:calc(76px + env(safe-area-inset-bottom,0px))}
  .phone-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px max(clamp(16px,4vw,32px),env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(clamp(16px,4vw,32px),env(safe-area-inset-left,0px));background:var(--white);border-top:1px solid var(--line);box-shadow:0 -12px 24px -20px rgba(13,44,84,.45)}
  .phone-bar .btn{flex:1 1 auto;max-width:320px;margin-left:auto}
  .phone-bar.is-waiting{transform:translateY(110%);visibility:hidden}
  .phone-bar-price{font-family:var(--display);font-weight:700;font-size:var(--h3);color:var(--navy);line-height:1.1;white-space:nowrap}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .phone-bar[data-after].is-ready{transition:transform .25s ease,visibility .25s}
}
/* Small links that stand alone get a bigger invisible tap area on touch screens, without moving anything. */
@media (pointer:coarse){
  .tap,.see-all,.list-col h3 a,.link-quiet,a.badge,.fresh a,.why a,.form-foot a,.contact-list a,.skill-chip,.prose li>a:only-child,h2>a:only-child:not(.card-link),h3>a:only-child:not(.card-link),.co-facts a,a.row-title,.kv dd>a:only-child,.actions>a:not(.btn),.inbox-title,.meta>a:only-child,td>a:only-child,th>a:only-child,.kicker>a:only-child,.card-box li>a:only-child,.cap-list li>a{position:relative}
  .tap::after,.see-all::after,.list-col h3 a::after,.link-quiet::after,a.badge::after,.fresh a::after,.why a::after,.form-foot a::after,.contact-list a::after,.skill-chip::after,.prose li>a:only-child::after,h2>a:only-child:not(.card-link)::after,h3>a:only-child:not(.card-link)::after,.co-facts a::after,a.row-title::after,.kv dd>a:only-child::after,.actions>a:not(.btn)::after,.inbox-title::after,.meta>a:only-child::after,td>a:only-child::after,th>a:only-child::after,.kicker>a:only-child::after,.card-box li>a:only-child::after,.cap-list li>a::after{content:"";position:absolute;inset:-11px -6px}
  .maths summary,.numbers summary,.ob-other>summary{display:flex;align-items:center;min-height:44px}
}

/* Feedback v2, company insights and performance goals (requirement #40) */
.fg-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.goal-met{background:var(--mint);color:var(--good)}
.goal-close{background:var(--cream);color:var(--warn)}
.goal-below,.goal-far-below{background:var(--apricot);color:var(--bad)}
.goal-not-enough{background:var(--mist);color:var(--soft)}

.works-with{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.goal-rows{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.goal-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:12px 16px}
.goal-row span{font-size:var(--fs-small);color:var(--soft)}
.goal-row b{color:var(--navy)}
@media (max-width:640px){
  .goal-row{grid-template-columns:1fr 1fr}
}

.trend-up{color:var(--good)}
.trend-down{color:var(--bad)}
/* Company intel pages (requirement #37) */
.intel-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:80ch}
.intel-list li{border:1px solid var(--line);border-radius:18px;padding:14px 18px}
.intel-list code,.section-tight code{font-size:var(--fs-small);overflow-wrap:anywhere;background:var(--mist);border-radius:6px;padding:1px 6px}
/* Email delivery problems (SES bounces and complaints): the banner under the header, on every page for signed-in members
   whose address bounced (Pages/Shared/_EmailDeliveryBanner.cshtml). The /settings/email-delivery steps are in account.css. */
.delivery-bar{background:var(--cream);border-bottom:2px solid var(--marigold)}
.delivery-bar-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding-block:12px}
.delivery-bar-row p{margin:0;font-size:var(--fs-small);max-width:70ch}
.delivery-bar-row .btn{min-height:44px}
@media (max-width:520px){.delivery-bar-row .btn{width:100%}}
/* The demo bar (#237): on every page of the demo, in navy so it's never mistaken for the real thing. On paper it's navy words on white
   under a navy rule: a browser leaves backgrounds out by default, which would print white words on white. The links mean nothing there. */
.demo-bar{background:var(--navy);color:var(--white)}
.demo-bar-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding-block:10px}
.demo-bar-row p{margin:0;font-size:var(--fs-small)}
.demo-bar-row b{color:var(--marigold);font-weight:600}
.demo-bar-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.demo-bar-links a{color:var(--white);font-size:var(--fs-small);text-underline-offset:3px}
.demo-bar-links form{margin:0}
.demo-bar-links .btn{min-height:44px}
@media (max-width:520px){.demo-bar-links{width:100%}.demo-bar-links form{margin-left:auto}}
@media print{
  .demo-bar{background:none;color:var(--navy);border-bottom:2px solid var(--navy)}
  .demo-bar-row b{color:var(--navy)}
  .demo-bar-links{display:none}
}
/* An email the demo kept, as it was written (/demo/outbox): its line breaks stay, and a long word or address wraps only when it must. */
.demo-mail{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-body);max-width:var(--measure);margin:8px 0 0}
/* /demo and /admin/demo: room above each part, and between a heading and its list. */
.demo-page h2{margin:32px 0 8px}
.demo-page h3{margin:20px 0 0;font-size:var(--fs-body)}
.demo-page .rows,.demo-page .notice{margin-top:12px}

/* ========== Anti-sharing (requirement #62), shared part: the licence seal on /licence, /skills/{slug}/get and Settings.
   The /licence page is in content.css, the connector-first "Add to my AI" block and the offline copy in skill.css, the
   step-up check and paid licences in account.css, Studio and admin parts in studio.css (same marker). ========== */
.licence-seal{flex:none;display:inline-grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--cream)}
.licence-seal svg{width:36px;height:36px}
.licence-seal-sm{width:36px;height:36px;border-radius:12px}
.licence-seal-sm svg{width:24px;height:24px}
/* ========== end anti-sharing ========== */

/* ========== Skill lifecycle (requirement #78, migration 0040), shared part: where a skill works on every card, the
   "Works in" / "Made for" filters on /explore and /search, and the review prompt (library and skill page). The other
   skill-page parts (Try asking, the owner box, feedback and report pages) are in skill.css (same marker). ========== */
.market-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin-top:20px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm)}
.market-filter-field{display:grid;gap:4px;min-width:0}
.market-filter label{font-size:var(--fs-small);font-weight:600;color:var(--navy)}
.market-filter .input{width:auto;max-width:100%;min-height:44px;padding:8px 12px}
.market-filter .btn{min-height:44px}
.market-note{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:var(--fs-small);color:var(--soft)}
.market-note svg{width:22px;height:22px;flex:none}
.market-note a{color:var(--navy);font-weight:500}
@media (max-width:600px){
  /* Two to a row (layout review G2-35): who it's for and the order, then Free now and Show skills, then More filters, so the
     first skill shows on a phone's first screen. That's the source order too, so focus follows it (review L14). The hint is still
     read out with Free now; it isn't drawn. */
  .market-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .market-filter .input,.market-filter .btn{width:100%}
}
/* "Your month" at the top of /library (AUD-15): the person's own jobs with each skill, their estimate and their notes. */
.your-month{scroll-margin-top:88px}
.month-list{list-style:none;margin:12px 0 0;padding:0}
.month-skill{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
.month-body{min-width:0;flex:1}
.month-body>p{margin:2px 0 0}
.month-name{font-weight:600}
.month-sub{font-size:var(--h3);margin-top:22px}
/* "Include the skills I use for work" sits under "Email me my month", as a part of it (/settings/notifications). */
.month-work{margin-left:28px}
.month-back{color:var(--ink);font-weight:600}
.month-ask{margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--cream)}
.month-ask-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.month-minutes{width:6.5em}
.month-more{margin-top:10px}
.month-notes{list-style:none;margin:10px 0 0;padding:0}
.month-notes>li{padding:8px 0;border-bottom:1px solid var(--line)}
.month-note{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.month-note-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:4px}
/* "What your AI told Trilly" on /library (E8a): the details the person said yes to sending, each with Delete. */
.sent-details{scroll-margin-top:88px}
.sent-list{list-style:none;margin:12px 0 0;padding:0}
.sent-list>li{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.sent-body{min-width:0;flex:1 1 240px}
.sent-body>p{margin:2px 0 0;overflow-wrap:anywhere}
/* "How's it going?": the one review prompt per skill, on /library (full) and in the skill page's owner box (small). */
.review-nudge{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;background:var(--cream)}
.review-nudge h2{font-size:var(--h3);margin:0}
.review-nudge p{margin:4px 0 0}
.review-nudge .actions{margin-top:12px}
.review-nudge-body{min-width:0}
.review-nudge-sm{display:grid;gap:4px;padding:12px 14px;border-radius:var(--r-sm);margin-top:6px}
.review-nudge-sm .actions{margin-top:6px;gap:8px}
@media (max-width:600px){
  .review-nudge{flex-direction:column}
  .review-nudge .actions .btn,.review-nudge .actions .inline-form{width:100%}
}
/* ========== end skill lifecycle ========== */
/* ========== Shared parts (#129, batch 2: audit Y-03, K-20, C-03). Partials that render on many routes carry their styles
   here, never only in an area sheet: the FAQ accordion (_Faq), reactions (_Reactions), Save (_SaveToggle), the comment
   link on post cards (_PostCard) and reputation badges (_RepBadge). They used to live in payments.css and social.css, so
   on skill pages, communities, compare pages and the studio inbox they drew as plain browser buttons and bare text. ========== */
/* FAQ: a question per row, the answer opens under it. 52px rows, a chevron that turns. */
.faq{display:grid;gap:12px;max-width:var(--measure)}
.faq details{border:1px solid var(--line);border-radius:18px}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;min-height:52px;padding:12px 18px;font-weight:500;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
/* "More questions": the rest of a long list, folded (_Faq's FaqFirst); its questions sit inside, framed as the others. */
.faq-more>.faq{padding:0 12px 12px}
.faq summary::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.faq details[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq details p{padding:0 18px 16px;color:var(--soft)}
/* Reactions: helpful, love, insightful, funny. */
.rx{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;position:relative}
.rx-form{display:inline-flex;flex-wrap:wrap;gap:6px;margin:0}
.rx-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;padding:3px 11px 3px 6px;min-height:36px;background:var(--white);color:var(--navy);font-size:var(--fs-small);font-weight:500;line-height:1;text-decoration:none;cursor:pointer;transition:border-color .15s,background-color .15s}
.rx-btn:hover{border-color:var(--navy)}
.rx-btn[aria-pressed="true"]{background:var(--cream);border-color:var(--gold)}
.rx-btn[disabled]{opacity:.6;cursor:progress}
.rx-static{cursor:default}
.rx-static:hover{border-color:var(--line)}
.rx-ic{display:inline-grid;place-items:center;width:22px;height:22px;flex:none}
.rx-ic svg{width:22px;height:22px}
.rx-n{font-weight:600;min-width:.6em}
.rx-n:empty{display:none}
.rx-who{font-size:var(--fs-small);color:var(--soft)}
.rx-who.is-empty{display:none}
.rx-who-list{flex-basis:100%;border:1px solid var(--line);border-radius:16px;padding:10px 14px;background:var(--white);font-size:var(--fs-small)}
.rx-who-list ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px}
.rx-who-list b{color:var(--navy)}
/* How a reaction, save or vote went (UX audit C-07): kept in the page, read by screen readers, takes no room while empty. */
.act-note{font-size:var(--fs-small);color:var(--soft);align-self:center}
.act-note:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Phones: icon and count only; the word stays for screen readers (clip pattern, no sideways scroll). */
@media (max-width:519px){
  .rx-label{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  /* The one you pressed keeps its word (UX audit C-08). */
  .rx-btn[aria-pressed="true"] .rx-label{position:static!important;width:auto;height:auto;margin:0;overflow:visible;clip-path:none}
  .rx-btn{padding:3px 10px 3px 7px}
}
/* Save (bookmark). */
.save-form{display:inline;margin:0}
.save-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 14px 4px 8px;min-height:36px;background:var(--white);color:var(--navy);font-size:var(--fs-small);font-weight:500;text-decoration:none;cursor:pointer}
.save-btn:hover{border-color:var(--navy)}
.save-btn[aria-pressed="true"]{background:var(--cream);border-color:var(--gold)}
.save-ic{display:inline-grid;place-items:center;width:20px;height:20px}
.save-ic svg{width:20px;height:20px}
/* Share on a skill (REMAINING 3.34, package 5; Pages/Skills/_SkillShare), as a post's Share: a quiet button beside the crumb that
   opens, on the line below, the address with Copy and the phone's share sheet. In the flow, never a floating panel, so a phone never
   scrolls sideways. */
.sk-crumbs-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;width:100%;justify-self:stretch}
.sk-share>summary{list-style:none}
.sk-share>summary::-webkit-details-marker{display:none}
.sk-share[open]{flex-basis:100%}
.sk-share-body{margin:10px 0 12px;display:grid;gap:8px;max-width:30rem;border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--white)}
.save-btn[aria-pressed="false"] .save-ic svg path,a.save-btn .save-ic svg path{fill:var(--white)}
.comment-link{white-space:nowrap}
/* Touch screens: 44px targets. After the Save rules, so .save-btn's own min-height doesn't win. */
@media (pointer:coarse){
  .rx-btn,.save-btn,.rx-who,.comment-link{min-height:44px}
  .rx-who,.comment-link{display:inline-flex;align-items:center}
}
/* Reputation: a level badge after a name, its dot coloured by level. */
.rep{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;font-size:var(--fs-small);font-weight:600;background:var(--ice);color:var(--navy);vertical-align:middle;margin-left:4px;white-space:nowrap;line-height:1.5}
.rep-dot{width:8px;height:8px;border-radius:50%;background:var(--navy);flex:none}
.rep-1{background:var(--mist)}
.rep-1 .rep-dot{background:var(--soft)}
.rep-2{background:var(--mint)}
.rep-2 .rep-dot{background:var(--good)}
.rep-3{background:var(--ice)}
.rep-4{background:var(--cream)}
.rep-4 .rep-dot{background:var(--gold)}
.rep-5{background:var(--navy);color:var(--white)}
.rep-5 .rep-dot{background:var(--marigold)}
/* ========== end shared parts ========== */
/* ========== Errors and forms that forgive (#129, batch 3) ==========
   The error summary at the top of a form sent back with problems (_ErrorSummary: a link to each field, focused when the
   page opens), confirm panels for money and destructive actions (details.confirm: the consequence in real numbers, the
   red button, "Keep it"), and the busy state of a form that's sending (js/site.js sets aria-busy). */
.error-summary{border:2px solid var(--bad);border-left-width:6px;border-radius:var(--r-sm);padding:14px 18px;background:var(--white);display:grid;gap:8px}
.error-summary h2,.error-summary h3{font-size:var(--fs-body);color:var(--ink)}
.error-summary ul{margin:0;padding-left:20px;display:grid;gap:4px}
.error-summary a{color:var(--bad);font-weight:500}
details.confirm{max-width:560px}
/* AUD-21: a small team's "More settings" fold (groups, keeping seats, how renewals are charged). */
details.more-settings>summary{cursor:pointer;font-weight:600}
details.more-settings[open]>summary{margin-bottom:8px}
details.confirm>summary{list-style:none;cursor:pointer;display:inline-flex}
details.confirm>summary::-webkit-details-marker{display:none}
details.confirm[open]>summary{border-color:var(--navy)}
.confirm-panel{margin-top:12px;border:2px solid var(--bad);border-radius:var(--r-sm);padding:14px 16px;background:var(--white);display:grid;gap:10px}
.confirm-panel p{margin:0}
.confirm-panel .actions{gap:10px}
/* A choice that destroys nothing (keeping someone's seats while they're away, E6b): the same panel in a calm frame, never the red one. */
.choice-panel{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;background:var(--white);display:grid;gap:10px}
.choice-panel p{margin:0}
.choice-panel .actions{gap:10px}
form[aria-busy="true"] button[disabled]{cursor:progress}
.typed-confirm{display:grid;gap:6px;max-width:420px}
/* "This page was open a while": what the person typed, kept so it isn't lost (Pages/Shared/_FormExpired.cshtml). */
.kept-field{display:grid;gap:6px}
.kept-field textarea{min-height:120px}
/* ========== end errors and forms ========== */
/* ========== Add to my AI (#136, batch 4) ==========
   Text to copy into an AI app, alone in its box with Copy (_CopyBox: Trilly's address on /link, a command, what to say on
   /skills/{slug}/get), in the body font with nothing after it (audit A-08). */
.copy-box{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;max-width:640px;background:var(--ice);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px 10px 16px}
.copy-text{flex:1 1 220px;min-width:0;font-weight:600;color:var(--navy);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all;cursor:text;font-variant-numeric:tabular-nums}
/* The quote marks are for the eye only: the empty alt text after "/" keeps screen readers from saying "left double quotation
   mark" (the batch 4 review, L7). The first line is for browsers without alt text for generated content. */
.copy-quote::before{content:"\201C";content:"\201C" / ""}
.copy-quote::after{content:"\201D";content:"\201D" / ""}
/* Many lines (a skill's instructions to paste, AUD-6): as written, scrolled in the box, which takes focus (the AUD-6 review, L4). */
.copy-text.copy-long{flex-basis:100%;white-space:pre-wrap;font-weight:400;max-height:18rem;overflow:auto}
.copy-btn{flex:none;min-width:88px;min-height:44px}
/* ========== end add to my AI ========== */
/* ========== What it can do for you (requirement #98) ==========
   The "Does it for me" and "Works with my apps" filters (/explore, /search) and the block on the skill page and the review
   queue (cards say "Does it for you" in words since the calm card, CALM-2). Tints: connected mint, done for you ice, remembers
   apricot, over days cream. */
.ab-connected .for-you-ic{background:var(--mint)}
.ab-done-for-you .for-you-ic{background:var(--ice)}
.ab-remembers .for-you-ic{background:var(--apricot)}
.ab-over-days .for-you-ic{background:var(--cream)}
.ab-ask .for-you-ic{background:var(--mist)}   /* "Ask": every skill works in the chat (Y-18) */
.ability-filter{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;min-width:0;margin:0;padding:0;border:0}
.ability-filter legend{float:left;width:100%;padding:0;margin:0 0 2px;font-size:var(--fs-small);font-weight:600;color:var(--navy)}
.ability-toggle{position:relative;display:flex;max-width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ability-toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ability-toggle-face{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px 6px 8px;border:2px solid var(--field);border-radius:999px;background:var(--white);color:var(--navy);font-size:var(--fs-small);font-weight:500;line-height:1.25}
.ability-toggle-face svg{width:28px;height:28px;flex:none}
.ability-toggle:hover .ability-toggle-face{border-color:var(--navy)}
.ability-toggle input:checked+.ability-toggle-face{background:var(--marigold);border-color:var(--navy)}
.ability-toggle input:focus-visible+.ability-toggle-face{outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}
.ability-hint{flex-basis:100%;font-size:var(--fs-body);color:var(--soft);line-height:1.45}
.ability-hint b{color:var(--navy);font-weight:600}
.ability-hint a{color:var(--navy)}
.for-you-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:var(--measure)}
.for-you-item{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white)}
.for-you-ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--mist)}
.for-you-ic svg{width:32px;height:32px}
.for-you-body{min-width:0}
.for-you-body>p>b{font-family:var(--display);font-weight:700;color:var(--navy)}
.for-you-points{margin:8px 0 0;padding-left:20px;display:grid;gap:6px;font-size:var(--fs-body);list-style:disc}
.for-you-link{margin-top:6px;font-size:var(--fs-small)}
.for-you-link a,.for-you-never a{color:var(--navy);font-weight:500}
.for-you-never{font-size:var(--fs-body);color:var(--soft)}
.for-you-never b{color:var(--ink);font-weight:500}
.app-reach td[class^="reach-"]{font-weight:500}
.app-reach td.reach-no,.app-reach td.reach-notchecked{color:var(--soft);font-weight:400}
.for-you-compact .for-you-item{padding:12px 14px}
/* A phone fold (the G5 review's M5, the lead's decision on 18 Oct 2026): long parts of the skill page ("What you get" after two,
   the reviews after the first (K-09), the map in words) are closed on phones and open on wider screens, where there's room
   (every safety check folds on every screen since #171). Nothing is removed:
   the words stay in the page for search engines and screen readers. A browser without ::details-content keeps the fold on every
   screen, with its "open" line, so nothing is ever out of reach. The chevron is the FAQ's (layout pattern P). */
/* Its chevron is the one fold sign, .disclose (layout review L17). */
.phone-fold>summary{display:flex;align-items:center;gap:12px;min-height:44px;font-weight:600;color:var(--navy)}
.phone-fold .for-you-list{margin-top:12px}
/* The skill page's proof panel (E8): plain bullets, not ticks, because a line can be bad news. */
.sure-lines{margin-top:10px;padding-left:1.25em;list-style:disc;display:grid;gap:6px;max-width:var(--measure);color:var(--soft)}
/* The reviews after the first: below the first card on phones, and 16 px apart like the cards themselves where it's open (L4). */
.reviews-more{margin-top:14px}
.reviews-more>.reviews{margin-top:16px}
@media (min-width:901px){
  @supports selector(::details-content){
    .phone-fold:not([open])::details-content{content-visibility:visible}
    .phone-fold>summary{cursor:default;pointer-events:none}
    .phone-fold.disclose>summary::after{display:none}
    .phone-fold.phone-fold-more>summary{display:none}
    .reviews-more{margin-top:0}
  }
}
/* "Safety: what it can reach" in three lines, before every check (SafetyShort). */
.safety-short{margin:0;padding-left:20px;display:grid;gap:4px;max-width:var(--measure)}
@media (max-width:600px){
  .for-you-item{grid-template-columns:38px minmax(0,1fr);gap:12px;padding:14px}
  .for-you-ic{width:38px;height:38px;border-radius:12px}
  .for-you-ic svg{width:26px;height:26px}
  .ability-toggle,.ability-toggle-face{width:100%}
}
/* ========== end what it can do for you ========== */
/* ===== Commerce go-live ===== */
/* #130: where a monthly or yearly plan stands (Settings, Billing, the library, receipts) and the Original's money box at checkout. */
.badge-bad{background:var(--apricot);color:var(--bad)}
.billing-alert{margin-bottom:16px;background:var(--cream);display:grid;gap:6px}
.billing-alert b{font-family:var(--display);font-size:var(--fs-body);color:var(--navy);font-weight:700}
.billing-alert p{margin:0}
.row-needs{border-color:var(--warn);background:var(--cream)}
.plan-line{font-size:var(--fs-body);line-height:1.45;color:var(--ink)}
.plan-actions{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px}
.split-own .split-note{margin:0;padding:12px 18px;border-top:1px solid var(--line);font-size:var(--fs-body);line-height:1.45}
@media (max-width:600px){
  .plan-actions .btn,.plan-actions form,.plan-actions .inline-form{width:100%}
  .plan-actions .btn{justify-content:center}
}
/* ===== end commerce go-live ===== */
/* ===== Skill maps P1: proof badge and panel ===== */
/* "Beats a well-prompted AI" and "How Trilly tested it" (requirement #127, docs/plans/SKILL_MAPS_PLAN.md P1, mockup 3).
   Brand tokens only, Trilly's own seal glyph (Icons.cs "seal"), no colour alone: every state says itself in words. */
.badge-proof{background:var(--navy);color:var(--white);font-weight:600;padding:3px 12px 3px 4px;text-decoration:none}
.badge-proof svg{width:20px;height:20px;flex:none}
a.badge-proof{min-height:28px}
a.badge-proof:hover{background:var(--navy-2);text-decoration:underline;text-underline-offset:3px}
.proof-inline{vertical-align:middle;margin-left:4px}
.proof-panel{max-width:72rem}
.proof-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.proof-seal{display:inline-flex;align-items:center;gap:8px;margin:0;border-radius:999px;padding:4px 14px 4px 5px;background:var(--navy);color:var(--white);font-weight:600;font-size:var(--fs-small)}
.proof-seal svg{width:24px;height:24px;flex:none}
.proof-line{margin-top:14px;max-width:var(--measure);border-left:6px solid var(--marigold);background:var(--cream);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 18px;font-size:var(--fs-body);font-weight:500;color:var(--navy);text-wrap:pretty}
.proof-tie,.proof-method{margin-top:12px;max-width:var(--measure)}
.proof-table caption{caption-side:top;text-align:left;padding:12px 12px 8px;font-size:var(--fs-small);font-weight:500;color:var(--soft)}
.proof-table .table tbody th{background:none;color:var(--ink);font-weight:400}
.proof-task{display:block;font-family:var(--display);font-weight:700;color:var(--navy)}
.proof-task::first-letter{text-transform:uppercase}
.proof-rule{display:block;margin-top:4px;font-size:var(--fs-small);color:var(--soft);max-width:60ch}
.proof-rule b{font-weight:500;color:var(--ink)}
.proof-skill,.proof-plain{white-space:nowrap;font-weight:600}
.proof-skill{color:var(--good)}
.proof-plain{color:var(--soft)}
.proof-notes{margin:12px 0 0;padding-left:20px;display:grid;gap:6px;font-size:var(--fs-body);color:var(--soft);max-width:var(--measure)}
.proof-none{margin-top:14px;max-width:var(--measure);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--mist);padding:14px 18px;color:var(--ink)}
.proof-rules{display:grid;gap:8px}
.proof-admin .status{white-space:nowrap}
.proof-admin form{display:grid;gap:6px;min-width:14rem}
.proof-admin input[type="text"]{width:100%;min-height:36px}
@media (max-width:640px){
  .proof-line{font-size:var(--fs-body);padding:12px 14px}
  .proof-table .stack-table tbody th{padding-left:0!important}
  .proof-skill,.proof-plain{white-space:normal}
}
@media (pointer:coarse){
  a.badge-proof{min-height:44px;padding-right:16px}
}
@media (forced-colors:active){
  .badge-proof,.proof-seal{border:1px solid CanvasText}
}
/* ===== end skill maps P1 ===== */
/* ===== Skill maps P2: shared and storyboard ===== */
/* "How it works, step by step" (requirement #132, docs/plans/SKILL_MAPS_PLAN.md P2, mockup 1E). The shared container
   (.skill-map: the tray, .map-looks, the map in words) that P3's four other looks slot into, and the storyboard look
   (.sb-*). Brand tokens only, our own glyphs (Icons.cs), classes only (no inline or SVG style attributes), nothing
   animates, and no colour alone: a copy-ready step has a dashed edge and says "copy-ready", every stop is a word. */
.skill-map{max-width:72rem}
.map-head{display:grid;gap:6px}
.map-shown{color:var(--soft);max-width:var(--measure)}
.map-note-hidden{margin-top:14px;max-width:var(--measure);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--mist);padding:14px 18px;color:var(--ink)}
.map-tray{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:10px}
.map-tile{display:grid;gap:4px;align-content:start;min-width:0;border-radius:var(--r-sm);background:var(--mist);padding:12px 14px}
.map-tile-kind{font-size:var(--fs-small);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--soft)}
.map-tile-app{display:flex;align-items:center;gap:10px;min-width:0;font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy);line-height:1.2}
.map-tile-app svg{width:30px;height:30px;flex:none}
.map-tile-app b{min-width:0;overflow-wrap:anywhere}
.map-tile-any .map-tile-app b{font-family:var(--display);font-weight:700}
.map-tile-note,.map-tile-also{font-size:var(--fs-small);color:var(--soft);line-height:1.4}
.map-looks{margin-top:16px}
/* "Swipe sideways" over a storyboard that scrolls (the skill page on phones, skill.css); hidden everywhere else. */
.sb-swipe{display:none}
.sb-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sb-cols-1{grid-template-columns:minmax(0,26rem)}
.sb-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sb-card{display:grid;grid-template-rows:auto 1fr;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--white)}
/* Tall enough for a scene with its tag row, so titles line up across a row (layout review G5-31; phones keep min-height 0). */
.sb-scene{display:grid;gap:8px;align-content:start;min-height:132px;padding:10px 12px 12px;background:var(--ice)}
.sb-tone-app .sb-scene{background:var(--cream)}
.sb-tone-copy{border:2px dashed var(--soft)}
.sb-tone-copy .sb-scene{background:var(--mist)}
.sb-tone-you .sb-scene{background:var(--mint)}
.sb-tone-other .sb-scene{background:var(--apricot)}
/* Three to a row: a last step alone on its row spans it, its scene beside its words, not one card and two empty slots (7, 10 or
   13 steps; layout review G5-30). */
@media (min-width:901px){
  .sb-cols-3>.sb-card:last-child:nth-child(3n+1){grid-column:1 / -1;grid-template-columns:minmax(0,1fr) 2fr;grid-template-rows:none}
}
.sb-top{display:flex;align-items:flex-start;gap:8px;min-height:26px}
.sb-day{font-family:var(--hand);font-weight:700;font-size:var(--h3);line-height:1;color:var(--gold-text)}
.sb-num{flex:none;margin-left:auto;font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1;color:var(--navy)}
.sb-icons{display:flex;align-items:center;justify-content:center;gap:10px}
.sb-icons svg{width:42px;height:42px;flex:none}
.sb-arrow{display:flex;align-items:center;color:var(--navy)}
.sb-arrow .ui-ico{width:22px;height:22px}
.sb-tags{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.sb-app{min-width:0;max-width:100%;overflow-wrap:anywhere;border:1.5px solid var(--navy);border-radius:999px;background:var(--white);padding:2px 9px;color:var(--navy);font-size:var(--fs-small);font-weight:600;line-height:1.35}
.sb-tone-copy .sb-app{border-style:dashed}
.sb-stop{margin-left:auto;border-radius:6px;background:var(--bad);padding:2px 8px;color:var(--white);font-size:var(--fs-small);font-weight:600;line-height:1.35;transform:rotate(-3deg)}
.sb-cap{display:grid;gap:4px;align-content:start;min-width:0;padding:10px 14px 14px;font-size:var(--fs-small);line-height:1.45}
.sb-title{font-family:var(--display);font-size:var(--fs-body);color:var(--navy);overflow-wrap:anywhere;font-weight:700}
.sb-does{color:var(--ink);overflow-wrap:anywhere}
.map-key{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px;max-width:72ch;font-size:var(--fs-small);color:var(--soft)}
.map-words{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.map-words h3,.map-words h5{font-size:var(--fs-body)}
.map-words-list{margin:10px 0 0;padding-left:1.4em;display:grid;gap:10px;max-width:72ch;font-size:var(--fs-small);line-height:1.55}
.map-words-title{font-family:var(--display);color:var(--navy);font-weight:700}
.map-who{display:inline-block;margin-inline:4px;border-radius:999px;background:var(--mist);padding:0 8px;color:var(--navy);font-size:var(--fs-small);font-weight:600}
.map-foot{margin-top:14px;max-width:72ch;font-size:var(--fs-small);color:var(--soft)}
.map-actions{margin-top:14px}
.maps-admin-preview{border:1px solid var(--line);border-radius:var(--r);padding:0 clamp(12px,3vw,20px)}
.maps-admin-preview-label{margin-top:14px;font-weight:600;color:var(--navy)}
.maps-admin-warnings{list-style:none;padding:0;display:grid;gap:6px;max-width:72ch}
.maps-admin-decide{display:grid;gap:8px;max-width:44rem}
.maps-admin-decide textarea{width:100%}
.maps-admin-decide .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media (max-width:900px){
  .sb-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-cols-1{grid-template-columns:minmax(0,26rem)}
}
@media (max-width:600px){
  .sb-board,.sb-cols-1,.sb-cols-2{grid-template-columns:minmax(0,1fr)}
  .sb-scene{min-height:0}
  .sb-icons svg{width:36px;height:36px}
  .map-words-list{padding-left:1.2em}
}
@media (forced-colors:active){
  .map-tile,.sb-card,.sb-app,.sb-stop,.map-who{border:1px solid CanvasText}
  .sb-tone-copy,.sb-tone-copy .sb-app{border-style:dashed}
}
/* ===== end skill maps P2 ===== */
/* ===== Skill maps P3: five looks ===== */
/* "Show it as" (requirement #133, docs/plans/SKILL_MAPS_PLAN.md 1.6 and P3, mockups 1A to 1D). Every look the map suits is
   on the page; the radio buttons pick one with CSS :has(), so switching works with no JavaScript and on cached pages.
   Without :has() the look the server chose shows and each name is a ?look= link instead. Brand tokens only, our own
   glyphs, classes and SVG presentation attributes only (no inline or SVG style attributes), nothing animates, and no colour
   alone: copy-ready is dashed and says "copy-ready", every stop is a word. The wide looks scroll sideways in .map-scroll. */
.map-switcher{margin-top:16px;display:grid;gap:8px}
.map-switch{display:none;flex-wrap:wrap;align-items:center;gap:6px;margin:0;border:0;padding:0;min-width:0}
.map-switch legend{float:left;margin-right:6px;padding:0;font-size:var(--fs-small);font-weight:600;color:var(--soft)}
.map-switch-input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.map-switch-label{display:inline-flex;align-items:center;min-height:40px;border:1px solid var(--line);border-radius:999px;background:var(--white);padding:6px 14px;color:var(--navy);font-size:var(--fs-small);font-weight:600;cursor:pointer}
.map-switch-label:hover{border-color:var(--navy)}
.map-switch-input:checked+.map-switch-label{border-color:var(--navy);background:var(--navy);color:var(--white)}
.map-switch-input:focus-visible+.map-switch-label{outline:3px solid var(--navy);outline-offset:3px;box-shadow:0 0 0 6px var(--marigold)}
.map-switch-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;font-size:var(--fs-small)}
.map-switch-links span{color:var(--soft);font-weight:600}
.map-switch-links .is-open{font-weight:600;text-decoration:none}
.map-keeps{margin:0;font-size:var(--fs-small)}
.map-keep{display:none;align-items:center;min-height:32px;color:var(--navy);font-weight:600}
.map-keep.is-open{display:inline-flex}
.map-look{display:none;min-width:0}
.map-look.is-open{display:block}
@supports selector(:has(*)){
  .map-switch{display:flex}
  .map-switch-links{display:none}
  .map-look.is-open,.map-keep.is-open{display:none}
  .skill-map:has(.map-switch-input[value="storyboard"]:checked) .map-look-storyboard,
  .skill-map:has(.map-switch-input[value="swimlanes"]:checked) .map-look-swimlanes,
  .skill-map:has(.map-switch-input[value="transit"]:checked) .map-look-transit,
  .skill-map:has(.map-switch-input[value="timeline"]:checked) .map-look-timeline,
  .skill-map:has(.map-switch-input[value="hub"]:checked) .map-look-hub{display:block}
  .skill-map:has(.map-switch-input[value="storyboard"]:checked) .map-keep-storyboard,
  .skill-map:has(.map-switch-input[value="swimlanes"]:checked) .map-keep-swimlanes,
  .skill-map:has(.map-switch-input[value="transit"]:checked) .map-keep-transit,
  .skill-map:has(.map-switch-input[value="timeline"]:checked) .map-keep-timeline,
  .skill-map:has(.map-switch-input[value="hub"]:checked) .map-keep-hub{display:inline-flex}
}
.map-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--white);padding:12px;
  background-image:linear-gradient(to right,var(--white),var(--white)),linear-gradient(to left,var(--white),var(--white)),linear-gradient(to right,rgba(13,44,84,.14),transparent),linear-gradient(to left,rgba(13,44,84,.14),transparent);
  background-position:left center,right center,left center,right center;background-repeat:no-repeat;background-size:24px 100%,24px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
.map-scroll:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.map-scroll-hub{background-color:var(--navy);background-image:none;border-color:var(--navy)}
.map-as-list{margin:8px 0 0;font-size:var(--fs-small)}

/* Swimlanes (1A): a grid, one column per step, one lane per who */
.sw-grid{display:grid;grid-template-columns:9.5rem;grid-auto-columns:minmax(11.5rem,1fr);grid-template-rows:auto;grid-auto-rows:minmax(92px,auto);gap:10px 12px;min-width:min-content}
.sw-head{align-self:end;font-family:var(--display);font-weight:700;font-size:var(--fs-small);color:var(--navy);line-height:1.25;overflow-wrap:anywhere}
.sw-lane{grid-column:1;display:flex;align-items:center;gap:8px;border-radius:12px;background:var(--mist);padding:10px;font-weight:600;font-size:var(--fs-small);color:var(--navy);line-height:1.25}
.sw-lane svg{width:28px;height:28px;flex:none}
.sw-rail{border-radius:12px}
.sw-rail-you{background:var(--mint)}
.sw-rail-ai{background:var(--ice)}
.sw-rail-apps{background:var(--cream)}
.sw-rail-other{background:var(--apricot)}
.sw-wire{justify-self:center;width:3px;margin:30px 0;background:var(--navy);border-radius:2px}
.sw-wire-dashed{background:repeating-linear-gradient(to bottom,var(--navy) 0 6px,transparent 6px 11px)}
.sw-span-2{grid-row-end:span 2}
.sw-span-3{grid-row-end:span 3}
.sw-span-4{grid-row-end:span 4}
.sw-node{position:relative;z-index:1;align-self:center;display:grid;gap:4px;margin:8px;border:1.5px solid var(--navy);border-radius:12px;background:var(--white);padding:10px 12px;font-size:var(--fs-small);line-height:1.4;min-width:0}
.sw-node b{font-family:var(--display);font-size:var(--fs-small);color:var(--navy);overflow-wrap:anywhere;font-weight:700}
.sw-text{color:var(--ink);overflow-wrap:anywhere}
.sw-tone-you{border-color:var(--good)}
.sw-tone-copy{border-style:dashed;background:var(--mist)}
.sw-tone-other{border-color:var(--gold-text)}
.sw-how{justify-self:start;border-radius:999px;background:var(--mist);padding:0 8px;font-size:var(--fs-small);font-weight:600;color:var(--navy)}
.sw-tone-copy .sw-how{background:var(--white)}
.sw-stop{justify-self:start;border-radius:6px;background:var(--bad);padding:1px 8px;color:var(--white);font-size:var(--fs-small);font-weight:600}
.map-col-2{grid-column:2}.map-col-3{grid-column:3}.map-col-4{grid-column:4}.map-col-5{grid-column:5}.map-col-6{grid-column:6}.map-col-7{grid-column:7}
.map-col-8{grid-column:8}.map-col-9{grid-column:9}.map-col-10{grid-column:10}.map-col-11{grid-column:11}.map-col-12{grid-column:12}.map-col-13{grid-column:13}
.map-span-1{grid-column-end:span 1}.map-span-2{grid-column-end:span 2}.map-span-3{grid-column-end:span 3}.map-span-4{grid-column-end:span 4}.map-span-5{grid-column-end:span 5}.map-span-6{grid-column-end:span 6}
.map-span-7{grid-column-end:span 7}.map-span-8{grid-column-end:span 8}.map-span-9{grid-column-end:span 9}.map-span-10{grid-column-end:span 10}.map-span-11{grid-column-end:span 11}.map-span-12{grid-column-end:span 12}
.map-row-1{grid-row-start:1}.map-row-2{grid-row-start:2}.map-row-3{grid-row-start:3}.map-row-4{grid-row-start:4}.map-row-5{grid-row-start:5}

/* Transit map (1B): one line, every stop (SVG; sizes and colours by class) */
.tr-svg{display:block;max-width:none;height:auto;font-family:var(--body)}
.tr-line{fill:none;stroke:var(--navy);stroke-width:12;stroke-linecap:round}
.tr-branch{fill:none;stroke-width:9;stroke-linecap:round}
.tr-branch-app,.tr-branch-file{stroke:var(--marigold)}
.tr-branch-copy{stroke:var(--marigold);stroke-dasharray:10 8}
.tr-branch-people{stroke:var(--apricot-line)}
.tr-station{fill:var(--white);stroke:var(--navy);stroke-width:5}
.tr-you{fill:var(--mint);stroke:var(--good);stroke-width:5}
.tr-title{fill:var(--navy);font-family:var(--display);font-weight:700;font-size:14px}
.tr-sticker{fill:var(--bad)}
.tr-sticker-text{fill:var(--white);font-weight:600;font-size:11.5px}
.tr-pill{stroke:var(--navy);stroke-width:2}
.tr-pill-app,.tr-pill-file{fill:var(--marigold)}
.tr-pill-copy{fill:var(--white);stroke-dasharray:6 5}
.tr-pill-people{fill:var(--apricot);stroke:var(--apricot-deep)}
.tr-pill-text{fill:var(--navy);font-weight:600;font-size:13px}
.tr-pill-small{font-weight:400;font-size:11px}
.tr-day-bracket{fill:none;stroke:var(--line);stroke-width:3}
.tr-day{fill:var(--gold-text);font-family:var(--hand);font-weight:700;font-size:20px}

/* Timeline (1C): what happens, and when */
.tl-list{list-style:none;margin:0;padding:0;display:grid;max-width:56rem}
.tl-row{display:grid;grid-template-columns:7rem 28px minmax(0,1fr);column-gap:14px}
.tl-when{padding-top:10px;text-align:right;font-family:var(--hand);font-weight:700;font-size:var(--h3);line-height:1.1;color:var(--gold-text)}
.tl-rail{position:relative}
.tl-rail::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;background:var(--line);transform:translateX(-50%)}
.tl-row:first-child .tl-rail::before{top:20px}
.tl-row:last-child .tl-rail::before{bottom:calc(100% - 20px)}
.tl-dot{position:relative;display:block;width:18px;height:18px;margin:13px auto 0;border-radius:50%;background:var(--navy);box-shadow:0 0 0 3px var(--white),0 0 0 5px var(--navy)}
.tl-yours .tl-dot{background:var(--good);box-shadow:0 0 0 3px var(--white),0 0 0 5px var(--good)}
.tl-card{display:grid;gap:6px;margin-bottom:14px;border:1px solid var(--line);border-radius:14px;background:var(--white);padding:12px 14px;min-width:0}
.tl-yours .tl-card{border-color:transparent;background:var(--mint)}
.tl-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.tl-title b{font-family:var(--display);color:var(--navy);overflow-wrap:anywhere;font-weight:700}
.tl-ribbon{border-radius:6px;background:var(--bad);padding:1px 8px;color:var(--white);font-size:var(--fs-small);font-weight:600}
.tl-does{margin:0;font-size:var(--fs-small);line-height:1.5}
.tl-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.tl-chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:var(--mist);padding:2px 10px 2px 4px;color:var(--navy);font-size:var(--fs-small);font-weight:600}
.tl-chip svg{width:20px;height:20px;flex:none}
.tl-chip small{margin-left:4px;font-size:inherit;font-weight:400;color:var(--soft)}
.tl-app{background:var(--cream)}
.tl-copy{border:1.5px dashed var(--soft);background:var(--white)}
.tl-people{background:var(--apricot)}

/* Hub and spoke (1D): the skill at the centre of your apps (SVG on navy) */
.hub-svg{display:block;max-width:none;height:auto;margin:0 auto;font-family:var(--body)}
.hub-spoke{fill:none;stroke-width:4}
.hub-spoke-you{stroke:var(--mint-line)}
.hub-spoke-app,.hub-spoke-file{stroke:var(--marigold)}
.hub-spoke-copy{stroke:var(--marigold)}
.hub-spoke-people{stroke:var(--apricot-soft)}
.hub-spoke-dashed{stroke-dasharray:10 8}
.hub-centre{fill:var(--marigold);stroke:var(--white);stroke-width:4}
.hub-centre-text{fill:var(--navy);font-family:var(--display);font-weight:700;font-size:17px}
.hub-spoke-label{fill:var(--white);font-weight:600;font-size:13px;paint-order:stroke;stroke:var(--navy);stroke-width:5px;stroke-linejoin:round}
.hub-box{stroke-width:2.5}
.hub-box-you{fill:var(--mint);stroke:var(--mint-line)}
.hub-box-app,.hub-box-file{fill:var(--cream);stroke:var(--marigold)}
.hub-box-copy{fill:var(--white);stroke:var(--marigold);stroke-dasharray:8 6}
.hub-box-people{fill:var(--apricot);stroke:var(--apricot-soft)}
.hub-box-title{fill:var(--navy);font-family:var(--display);font-weight:700;font-size:15px}
.hub-box-sub{fill:var(--soft);font-size:12px}

@media (max-width:600px){
  .map-switch-label{min-height:44px}
  .tl-row{grid-template-columns:4.5rem 24px minmax(0,1fr);column-gap:10px}
  .tl-when{font-size:var(--fs-body);color:var(--navy)}
  .map-scroll{padding:8px}
}
@media (pointer:coarse){.map-switch-label{min-height:44px}}
@media (forced-colors:active){
  .map-switch-label,.sw-node,.sw-lane,.tl-card,.tl-chip{border:1px solid CanvasText}
  .map-switch-input:checked+.map-switch-label{outline:3px solid Highlight}
  .sw-tone-copy,.tl-copy{border-style:dashed}
}
/* ===== end skill maps P3 ===== */
/* ===== Skill maps P4: my apps ===== */
/* My apps, set once, fills every map (requirement #135, docs/plans/SKILL_MAPS_PLAN.md 1.7 and P4, mockup 2). The tray's
   "where it came from" tag and copy-ready tiles, "Choose your apps" under the tray, each step's drawer on the map in words,
   "Your version" on /get and the library, the card's "Works with" line, and My apps on /settings/apps. Brand tokens only,
   our own glyphs, classes only (no inline or SVG style attributes), fields edged with --field, nothing animates, and no
   colour alone: copy-ready is dashed and says "copy-ready". The name box for "Another app" shows only when it's picked
   where :has() works, and always where it doesn't. */
.map-ai-note{max-width:var(--measure);color:var(--warn);font-weight:600}
.map-tile-copy{border:2px dashed var(--soft);background:var(--white)}
.map-tile-from{justify-self:start;border-radius:6px;background:var(--cream);padding:1px 7px;color:var(--navy);font-size:var(--fs-small);font-weight:600;line-height:1.4}
.map-apps{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white)}
.map-apps-summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:44px;padding:10px 16px;cursor:pointer}
.map-apps-title{font-family:var(--display);font-weight:700;color:var(--navy)}
.map-apps-version{font-size:var(--fs-small);color:var(--soft);overflow-wrap:anywhere}
.map-apps-form{display:grid;gap:12px;padding:0 16px 16px}
.map-apps-intro{margin:0;max-width:72ch;font-size:var(--fs-small)}
.map-apps-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:10px}
.map-apps-row{display:grid;gap:6px;align-content:start;min-width:0;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.map-apps-label{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--navy)}
.map-apps-label svg{width:26px;height:26px;flex:none}
.map-apps-select,.myapps-pick select,.myapps-other input{width:100%;min-width:0;min-height:44px;border:2px solid var(--field);border-radius:10px;background:var(--white);padding:8px 10px;color:var(--ink);font:inherit;font-size:var(--fs-body)}
/* A kind of app the person's company locked (P8): shown, never offered */
.map-apps-row-locked{background:var(--cream-soft)}
.map-apps-locked{min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--ink)}
.map-apps-lockedby{color:var(--soft);font-size:var(--fs-small)}
.map-apps-from{justify-self:start;border-radius:6px;background:var(--cream);padding:1px 7px;color:var(--navy);font-size:var(--fs-small);font-weight:600}
.map-apps-every{font-size:var(--fs-small)}
.map-apps-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0}
.map-drawer{margin-top:6px}
.map-drawer>summary{display:inline-flex;align-items:center;min-height:32px;color:var(--navy);font-size:var(--fs-small);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (pointer:coarse){.map-drawer>summary{min-height:44px}}
.map-drawer-body{display:grid;gap:8px;margin-top:6px;border-left:4px solid var(--gold);border-radius:4px;background:var(--mist);padding:10px 14px;font-size:var(--fs-small)}
.map-drawer-n{justify-self:start;margin:0;border-radius:999px;background:var(--ice);padding:0 10px;color:var(--navy);font-size:var(--fs-small);font-weight:600}
.map-drawer-kv{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:4px 12px;margin:0}
.map-drawer-kv dt{color:var(--soft)}
.map-drawer-kv dd{margin:0;overflow-wrap:anywhere}
.map-drawer-h{margin:4px 0 0;font-family:var(--display);font-weight:700;color:var(--navy)}
.map-drawer-apps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.map-drawer-app{display:grid;gap:2px;border:1px solid var(--line);border-radius:10px;background:var(--white);padding:8px 10px}
.map-drawer-app.is-current{border:2px solid var(--navy)}
.map-drawer-app.is-copy{border-style:dashed}
.map-drawer-app-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.map-drawer-pill{border-radius:999px;background:var(--mist);padding:0 8px;color:var(--navy);font-size:var(--fs-small);font-weight:600}
.map-drawer-tag{border-radius:6px;background:var(--cream);padding:0 7px;color:var(--navy);font-size:var(--fs-small);font-weight:600}
.map-drawer-line{color:var(--ink);overflow-wrap:anywhere}
.your-version{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--cream);padding:14px 18px}
.your-version-line{margin:4px 0;font-family:var(--display);font-weight:700;color:var(--navy);overflow-wrap:anywhere}
.library-apps{overflow-wrap:anywhere}
.myapps-rows{display:grid;gap:8px}
.myapps-row{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,15rem);gap:6px 12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.myapps-icon svg{width:30px;height:30px}
.myapps-what{display:grid;min-width:0}
.myapps-pick{display:grid;gap:6px;min-width:0}
.myapps-other{display:grid;gap:4px;font-size:var(--fs-small)}
.myapps-names{display:flex;gap:8px;align-items:flex-start;margin:0;border-radius:10px;background:var(--mint);padding:8px 12px;font-size:var(--fs-small)}
.myapps-names svg{width:24px;height:24px;flex:none}
@supports selector(:has(*)){
  .myapps-other{display:none}
  .myapps-row:has(option[value="other"]:checked) .myapps-other,.myapps-row.is-other .myapps-other{display:grid}
}
@media (max-width:600px){
  .map-drawer-kv{grid-template-columns:minmax(0,1fr)}
  .myapps-row{grid-template-columns:30px minmax(0,1fr)}
  .myapps-pick{grid-column:1 / -1}
  .map-apps-form{padding:0 12px 12px}
}
@media (forced-colors:active){
  .map-tile-from,.map-apps-from,.map-drawer-tag,.map-drawer-pill,.map-drawer-n{border:1px solid CanvasText}
  .map-tile-copy,.map-drawer-app.is-copy{border-style:dashed}
}
/* ===== end skill maps P4 ===== */
/* G5 (#148): a skill's question rows say when its maker answered, and show the accepted answer under the question. They show
   wherever threads are listed, so they live here. */
.badge-maker{background:var(--cream)}
.thread-answer{display:block;margin-top:6px;border-left:4px solid var(--gold);padding:2px 0 2px 10px;font-size:var(--fs-small);color:var(--ink)}
/* ===== Search-first home (G4, the site plan's 3d and 3g; UX batch 6). Brand colours, fonts and the tilted-card motif only. ===== */
.hero-search-first h1{max-width:18ch;font-size:var(--h1-hero)}
.search-cap{display:block;margin-top:24px;font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy)}
.search-cap+.search{margin-top:10px}
.search-hero{max-width:760px;min-height:64px}
.search-hero input{font-size:var(--fs-body)}
.hero-search-first .lead{margin-top:18px;max-width:62ch}
.pop-pills{margin-top:18px}
.pop-pills-title{margin:0 0 8px;font-family:var(--body);font-size:var(--fs-small);font-weight:600;color:var(--soft)}
.pop-pills-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pop-pill{min-height:44px;font-size:var(--fs-small);border:1px solid var(--line);background:var(--white)}
.pop-pill:hover{border-color:var(--navy)}
@media (max-width:600px){
  .pop-pills-list{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:4px}
  .pop-pills-list::-webkit-scrollbar{display:none}
  .pop-pills-list>li{flex:none;scroll-snap-align:start}
}
/* ===== The front door (G12d: concept C, with A's Today strip and B's stories; docs/plans/COMMUNITY_VIBE_G12.md 1c and 4.3).
   The mockup's layout (landing-C.html) in the site's tokens. Every live part has a fixed shape, so nothing moves as it loads
   (CLS), and on a phone the rows stack or swipe so the page stays under seven screens (audit D-27). ===== */
.fd-hero{text-align:center;padding-bottom:clamp(20px,3vw,32px)}
.fd-hero h1{max-width:14ch;margin-inline:auto}
.fd-hero .search-hero{margin-inline:auto}
.fd-hero .lead{margin:12px auto 0}
.fd-cap{display:block;font-size:var(--fs-small);font-weight:600;color:var(--soft);margin-bottom:4px}
.fd-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:var(--fs-small);line-height:1.4;color:var(--navy);background:var(--white);text-decoration:none}
.fd-chip svg{width:18px;height:18px;flex:none}
.fd-chip-proof{background:var(--mint);border-color:var(--mint)}
.fd-chip-asked{background:var(--cream);border-color:var(--cream)}
/* One alignment rule (the calm site, #171, front fix 15): sections read from the left; only the hero and the closing ask are centred. */
.fd-head{max-width:var(--measure);margin:0 0 clamp(16px,2.4vw,28px)}
.fd-head p,.fd-explain{color:var(--soft);font-size:var(--fs-body);margin-top:10px}
/* The front door's step-by-step band (skill maps plan P5), where a page still draws it. */
.fd-steps-list{max-width:var(--measure);margin:12px 0 0}
.fd-story-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.fd-story{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;background:var(--white)}
.fd-story-top{height:56px;display:flex;justify-content:flex-end;align-items:flex-end;padding:0 22px 10px}
.fd-story-top svg{width:60px;height:60px}
.fd-story-body{padding:20px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.fd-quote{margin:0}
.fd-quote p{font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1.3;color:var(--navy);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.fd-who{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fd-story .fd-chip{align-self:flex-start}
.fd-stories-note{margin-top:14px;font-size:var(--fs-small);color:var(--soft)}
.fd-stories .fd-story-list{margin-top:4px}
.fd-story-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-small)}
/* How it works: the shared "In your AI" steps (.iya), then one link. */
.fd-links{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:16px}
/* See it work (the calm home, #171; the audience audit's 3.1 c): the measured line, the request beside the skill we find, then
   the two answers side by side, on a phone as on a wide screen. */
.fd-see .fd-measured{color:var(--navy);font-weight:600}
.fd-see-ask{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-bottom:16px}
.fd-demo-q{flex:1 1 360px;max-width:var(--measure);margin:0;font-size:var(--fs-body);display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.fd-see-skill{display:inline-flex;align-items:center;gap:12px;max-width:100%}
.fd-see-skill .ic{width:44px;height:44px;border-radius:14px}
.fd-see-skill .ic svg{width:26px;height:26px}
.fd-see-name{display:block;font-family:var(--display);font-weight:700;font-size:var(--fs-body);line-height:1.25;color:var(--navy);text-decoration:none;overflow-wrap:anywhere}
.fd-see-name:hover{text-decoration:underline}
/* Trilly's own skill says so beside its name (the calm-c review, M2), as its card's maker line does. */
.fd-see-by{display:inline-block;margin-top:2px;font-size:var(--fs-small);color:var(--soft)}
@media (pointer:coarse){
  .fd-see-name,.fd-see-by{display:flex;align-items:center;min-height:44px}
}
.fd-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.fd-vs-col{border-radius:var(--r-lg);padding:22px 24px}
.fd-vs-col h3{font-size:var(--fs-body);margin-bottom:12px}
.fd-vs-plain{background:var(--mist)}
.fd-vs-with{background:var(--cream)}
.fd-ans{background:var(--white);border-radius:18px;padding:14px 16px;font-size:var(--fs-body);line-height:1.6;max-height:21em;overflow:hidden;overflow-wrap:anywhere}
.fd-ans>*+*{margin-top:8px}
.fd-ans ul,.fd-ans ol{margin-bottom:0;padding-left:20px}
.fd-vs-plain .fd-ans{color:var(--soft)}
/* An answer the panel can't hold fades at the bottom, as a cut answer does (the G12 open items, D3). */
.fd-ans-cut{-webkit-mask-image:linear-gradient(#000 calc(100% - 3em),transparent);mask-image:linear-gradient(#000 calc(100% - 3em),transparent)}
.fd-note{font-size:var(--fs-body);color:var(--soft);margin:16px 0 0;max-width:var(--measure)}
.fd-cut-note{white-space:nowrap}
.fd-cut-phone{display:none}
.fd-passed{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-weight:500}
.fd-passed svg{width:22px;height:22px;flex:none}
/* A registered charity's workspace (AUD-9), under the charities' skills on /for/nonprofits */
.charity-band{margin-block:clamp(32px,5vw,56px);padding-block:clamp(32px,5vw,56px) 0;border-top:1px solid var(--line)}
.charity-band h2{margin-bottom:12px}
.charity-band .lead,.charity-band .ticks{max-width:var(--measure)}
/* The hub's one line to the band: wide screens only, so a phone's first screen keeps its skills (the pre-check: 70 words, budget 65) */
@media (max-width:760px){.charity-line{display:none}}
/* Ask people who've done it: one question and one line to the communities (the lead's decision, #171). */
.fd-qa{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;max-width:760px}
.fd-qa h3{font-size:var(--h3);margin:12px 0 4px}
.fd-qa h3 a{color:var(--navy);text-decoration:none}
.fd-qa h3 a:hover{text-decoration:underline}
.fd-ansbox{margin-top:14px;background:var(--mint);border-left:4px solid var(--mint-line);border-radius:0 18px 18px 0;padding:14px 16px}
.fd-ans-text{font-size:var(--fs-body);margin-top:8px;overflow-wrap:anywhere}
.fd-more{margin-top:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:var(--fs-small)}
.fd-people .fd-people-line{margin-top:16px;max-width:var(--measure)}
/* At "Happening on Trilly"'s foot, when the live slot drew it (the lead's decision on the calm-c review). */
.fd-people-foot{margin-top:-12px;padding-bottom:clamp(24px,4vw,40px)}
.happening+.fd-people-foot{margin-top:24px}
.fd-people-foot .fd-people-line{max-width:var(--measure)}
.fd-people-line .link{font-weight:500}
.fd-closing{text-align:center;background:var(--cream);border-radius:34px;padding:clamp(24px,4vw,40px) clamp(20px,4vw,30px)}
/* The home keeps to its length with every live part drawn (the lead's decision on the calm-c review: desktop cap 5.5 screens,
   phone 6; HomeLengthTests). Its bands sit a little closer than other pages' sections; batch E's spacing tokens do the rest. */
.fd-see,.fd-situ,.fd-stories,.happening,.tstrip,.req-home,.fd-people,.fd-closing-band{padding-bottom:clamp(28px,4vw,44px)}
.fd-see{padding-top:clamp(20px,3vw,32px)}
.fd-see .fd-head{max-width:none}
/* The people line sits at the live block's foot, so the next band starts right under it; the FAQ band and the closing ask sit
   closer on the home than elsewhere (the length caps above). */
.fd-people-foot+.section-tight{padding-top:0}
.fd-closing h2{font-size:var(--h2)}
.fd-closing .fd-links{justify-content:center;margin-top:22px}
@media (max-width:600px){
  /* The search stays inside the first 300 px of a phone (G4; FirstScreenTests). Nothing is hidden on a phone that a wide screen
     shows (calm rule 19): the page is short because it has fewer sections, not because a phone loses some. */
  .fd-hero h1{max-width:none}
  .fd-hero .lead{margin-top:8px;font-size:var(--fs-body)}
  .fd-head,.fd-shelf .head{margin-bottom:14px}
  .fd-quote p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--fs-body)}
  .fd-explain{font-size:var(--fs-small)}
  .fd-demo-q{font-size:var(--fs-body);-webkit-line-clamp:3;line-clamp:3}
  .fd-vs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fd-vs-col{padding:12px 10px;border-radius:20px}
  .fd-vs-col h3{font-size:var(--fs-small);margin-bottom:8px}
  .fd-cut-phone{display:inline}
  .fd-ans{font-size:var(--fs-body);line-height:1.5;padding:10px;max-height:8em;-webkit-mask-image:linear-gradient(#000 calc(100% - 3em),transparent);mask-image:linear-gradient(#000 calc(100% - 3em),transparent)}
  .fd-story-body{padding:16px 18px;gap:10px}
  .fd-stories-note{margin-top:4px}
  .fd-qa{padding:18px}
  .fd-qa h3{font-size:var(--fs-body);margin:8px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .fd-ansbox{margin-top:10px;padding:10px 12px}
  .fd-ans-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .fd-trust-item:first-child{font-size:var(--fs-body)}
  .fd-closing{padding:24px 16px;border-radius:24px}
  .fd-closing h2{font-size:var(--h2)}
  .fd-closing .fd-links{margin-top:14px}
}
.happening-list{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px}
/* Items keep their own height on a wide screen; on a phone the row swipes, so they stretch and leave no blank gap (the calm-c review, L1). */
@media (min-width:601px){.happening-list{align-items:stretch}}
.happening-more{margin-top:14px}
@media (min-width:1100px){.happening-list:has(>li:nth-child(3)){grid-template-columns:repeat(3,1fr)}}   /* two stay halves (r3, item 4) */
.happening-item{display:flex;gap:12px;align-items:flex-start;min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white)}
.happening-body{min-width:0}
.happening-what{margin:0}
.happening-what a{color:var(--navy)}
.happening-stars{margin-left:6px;letter-spacing:1px}   /* the stars are the site's .star (gold, a picture); the words are in .vh */
.happening-quote{margin:4px 0 0;color:var(--ink);overflow-wrap:anywhere}
.happening .meta{margin-top:4px;font-size:var(--fs-small)}   /* who and when, at 14px or more (the G4 review, L4; Y-07) */

/* Today on Trilly (G12c): the small one-colour glyphs (Icons.Ui), the theme shelves as tabs (/today, /explore, the home strip)
   and the home page's strip of today's launches. The board itself is in today.css. */
.ui-ico{width:16px;height:16px;flex:none;display:block}
.shelf-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:6px 0 4px;margin-top:14px}
.shelf-tab{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:7px 16px 7px 8px;font-weight:500;font-size:var(--fs-small);white-space:nowrap;color:var(--navy);background:var(--white);text-decoration:none;min-height:44px}
.shelf-tab svg{width:26px;height:26px;padding:2px;border-radius:50%;background:var(--white);flex:none}
.shelf-tab:hover{border-color:var(--navy)}
.shelf-tab.is-on{background:var(--navy);border-color:var(--navy);color:var(--white)}
.tstrip .shelf-tabs{margin-top:18px}
.tstrip-head{display:flex;justify-content:space-between;align-items:end;gap:12px 24px;flex-wrap:wrap;margin-bottom:16px}
.tstrip-date{display:flex;align-items:center;gap:9px;font-weight:500;color:var(--navy);font-size:var(--fs-small);margin-bottom:6px}
.tstrip-date svg{width:26px;height:26px}
.tstrip-date span{color:var(--soft);font-weight:400}
.tstrip-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
.tstrip-row{display:grid;grid-template-columns:28px 52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}
.tstrip-row:first-child{border-top:0}
.tstrip-rk{font-family:var(--display);font-weight:700;font-size:var(--h3);color:var(--soft);text-align:center}
.tstrip-tile{width:52px;height:52px;border-radius:16px;display:grid;place-items:center}
.tstrip-tile svg{width:30px;height:30px}
.tstrip-body{min-width:0}
.tstrip-name{font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy);text-decoration:none}
.tstrip-name:hover{text-decoration:underline}
.tstrip-pr{color:var(--soft);font-size:var(--fs-small);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.tstrip-by{font-size:var(--fs-small);color:var(--soft)}
.tstrip-n{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:var(--fs-small);color:var(--navy)}
.tstrip-more{margin-top:12px;font-size:var(--fs-small);color:var(--soft)}
/* Trilly's own launches today (G12d): one line, never ranked, under the makers' board or on its own. */
.tstrip-team{margin-top:12px;font-size:var(--fs-small)}
.tstrip-team span{color:var(--soft)}
@media (max-width:600px){
  .tstrip-row{grid-template-columns:44px minmax(0,1fr) auto;padding:12px 14px}
  .tstrip-rk,.tstrip-pr{display:none}
  .tstrip-tile{width:44px;height:44px;border-radius:14px}
  .tstrip-tile svg{width:26px;height:26px}
}
.hub-maker-line{font-size:var(--fs-small)}
.h-wrap{overflow-wrap:anywhere}
/* Search from the header on every page (UX audit G-12), and the menu sheet: search, then Join free and Log in (G-17). */
.nav-search{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border-radius:999px;color:var(--navy);font-weight:500;text-decoration:none}
.nav-search svg{width:20px;height:20px;flex:none}
.nav-search:hover,.nav-search[aria-current="page"]{background:var(--mist)}
@media (max-width:640px){
  .nav-search{min-width:44px;justify-content:center;padding:0}
  .nav-search-word{display:none}
}
.nav-sheet-search .search{margin-top:10px;max-width:none}
/* Region, currency and language (home N v2, #220): what's true for everyone, in the header, where it has room: from 761 to 1200 px,
   with the links in the menu. From 1201 px the four links fill the row (the page is 1,096 px wide however wide the screen; even its
   globe alone put them on two lines at 1440, and HeaderWidthTests' long name at 1240), and phones have no room. */
.nav-region{position:relative}
.nav-region>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px 0 8px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--navy);font-size:var(--fs-small);cursor:pointer;list-style:none;white-space:nowrap}
.nav-region>summary::-webkit-details-marker{display:none}
.nav-region>summary:hover{border-color:var(--navy)}
.nav-region>summary:focus-visible{outline:var(--ring-line);box-shadow:var(--ring)}
.nav-region-ic{display:inline-grid;width:22px;height:22px}
.nav-region-ic svg{width:100%;height:100%}
.nav-region-t{line-height:1}
.nav-region .ui-ico{width:14px;height:14px;transform:rotate(90deg)}
.nav-region[open] .ui-ico{transform:rotate(-90deg)}
.nav-region-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:300px;padding:14px 16px;border-radius:var(--r-sm);background:var(--white);border:1px solid var(--line);box-shadow:0 20px 40px -24px rgba(13,44,84,.45);font-size:var(--fs-small);color:var(--soft)}
.nav-region-pop p{margin:0}
.nav-region-pop p+p{margin-top:8px}
.nav-region-pop b{color:var(--navy);font-weight:600}
@media (max-width:760px),(min-width:1201px){
  .nav-region{display:none}
}
@media (min-width:761px) and (max-width:860px){
  /* The region line joins the row at 761 px. Its globe and the search's word give it the room for its longest line ("Worldwide ·
     about KRW · English") in either font (it ran 19.5 px wider in some test runs, and 15 to 20 px over with a long line: header-320). */
  .nav-region-ic,.nav-search-word{display:none}
  .nav-search{min-width:44px;justify-content:center;padding:0}
}
@media (max-width:1200px){
  .nav-right:has(.nav-menu[open])>.nav-login,.nav-right:has(.nav-menu[open])>.btn{display:none}
}
/* From 1201 to 1320 px the v2 header's gaps narrow, so the four links stay on one line beside a long account name. */
@media (min-width:1201px) and (max-width:1320px){
  .nav-row{gap:24px}
  .nav-links>a,.nav-item>a{padding:0 11px}
  .nav-right{gap:14px}
}
/* Breadcrumbs (UX audit G-19): a phone shows only the way back up, "‹ Parent", and the arrows are never read out. */
@media (max-width:600px){
  .crumbs li{display:none}
  .crumbs li:nth-last-child(2){display:inline-flex}
  .crumbs li:nth-last-child(2)::before{content:"‹";content:"‹" / "";margin-right:6px}
}
/* /explore and /search filters (UX audit D-05): the first two choices, then "More filters" folded with a count of what's on. */
.more-filters{flex-basis:100%;min-width:0}
.more-filters>summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600;color:var(--navy)}
.more-filters-body{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;padding:6px 0 4px}
@media (max-width:600px){
  .more-filters-body{display:grid;grid-template-columns:1fr}
  .more-filters-go{justify-self:start}
}
.list-links-below{margin-top:28px}
/* The skill card, the mockups v2's shape (calm batch G, #176, #190; C:\TrillyOps\plans\calm-show-mockups-v2\site\card.html): a
   picture of what it does on top (a crop of its real first example answer, on its own tint, tagged; Trilly.Web.Discovery.
   CardPicture), the name (first in the page's order) and who made it, the promise in two lines at most, then one mark to trust
   above the price line. The picture is 16:10 and ends on a whole line: the key line in two lines at most, then up to three rows
   (two on a narrow card). Save sits on the picture, above the stretched link. Nothing lifts on hover; the edge darkens. */
.card-linked>.card-pic{order:-1}
/* The pills sit in the picture's flow above its paper, so the paper always starts under the last one, one row or two (a country
   too) (the home's design review r2, item 3). The paper takes what's left of the 16:10 picture and ends on a whole line: a row
   that doesn't fit wraps into a second column outside the paper, hidden whole, never cut through its letters (r3, item 1). */
.card-pic{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;padding:14px 16px 16px;display:grid;grid-template-rows:auto minmax(0,1fr);align-content:start;min-width:0}
.card-pic-icon{padding:0;grid-template-rows:none;place-items:center;align-content:center}
.card-pic-icon svg{width:72px;height:72px}
.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 52px 10px 0;flex:none}
.card-tag{display:inline-flex;align-items:center;white-space:nowrap;font-size:var(--fs-small);font-weight:500;line-height:1.2;color:var(--navy);background:var(--white);border-radius:999px;padding:5px 11px;box-shadow:0 0 0 1px var(--line)}
.card-paper{grid-row:2;align-self:start;background:var(--white);border-radius:var(--r-sm);box-shadow:0 18px 32px -24px rgba(13,44,84,.45),0 1px 3px rgba(13,44,84,.06);padding:12px 14px;display:flex;flex-flow:column wrap;align-content:flex-start;gap:4px 40px;color:var(--navy);line-height:1.35;min-width:0;max-height:100%;overflow:hidden}
.card-paper>*{width:100%}
.card-key{margin:0;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0;padding-top:4px;border-top:1px solid var(--line);font-size:var(--fs-small);min-width:0}
/* The row's label keeps its words (up to half the row) and a long value ends in "…": in a narrow card a long value once
   squeezed its label to nothing (the 28 Oct sweep: "Help text" half a pixel wide on the feed's release card at 1440). */
.card-row span{flex:none;max-width:50%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-row b{min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-row span:only-child{flex:1 1 auto;max-width:none}   /* a row with only text takes the whole width (the half was cut at nothing: design-b4-9d review H1) */
@container (max-width:300px){
  .card-paper .card-row:nth-child(n+4){display:none}
}
.card-save-form{position:absolute;right:12px;top:12px;z-index:2;margin:0}
.card-save{position:absolute;right:12px;top:12px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;color:var(--navy);cursor:pointer;transition:border-color .15s,background-color .15s}
.card-save-form .card-save{position:static}
.card-save svg{width:22px;height:22px}
.card-save:hover{border-color:var(--navy)}
.card-save[aria-pressed="true"]{background:var(--marigold);border-color:var(--navy)}
.card .promise{margin:6px 0 18px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:4px}
.card-price{margin:0}
/* One small line under a not-yet-on-sale price, for a signed-in member (G9, L2): a text link, not a button, above the stretched link. */
.card-tell{position:relative;z-index:1;margin:0;width:fit-content;max-width:100%;font-size:var(--fs-small);line-height:1.4;color:var(--soft)}
.card-tell .link-btn{min-height:24px;text-align:left}
.card-tell-on{display:flex;align-items:center;gap:6px}
.card-tell-on[hidden]{display:none}
.card-tell-on svg{width:16px;height:16px;flex:none}
@media (pointer:coarse){
  .card-tell .link-btn{min-height:44px}
}
@media (forced-colors:active){
  .card-tag,.card-paper,.card-save{border:1px solid CanvasText}
}
.card-trust{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin:0;font-size:var(--fs-small);font-weight:500;color:var(--ink);line-height:1.4}
.card-trust>svg{width:20px;height:20px;flex:none}
.card-proof{color:var(--navy);font-weight:600}
/* "Helps you learn: you do the work" (AUD-4 (c)): on cards, a trust line with the books icon; elsewhere a quiet badge. */
.card-learn{color:var(--navy)}
.badge-learn{background:var(--ice);color:var(--navy);text-decoration:none}
/* Its links get the test badge's affordances (the review's L2): an underline on hover, a 44px tap on touch screens and an edge in
   forced colours. In the skill page's trust line it's words, like the test badge (skill.css). */
a.badge-learn{min-height:28px}
a.badge-learn:hover{text-decoration:underline;text-underline-offset:3px}
@media (pointer:coarse){
  a.badge-learn{min-height:44px;padding-inline:14px}
}
@media (forced-colors:active){
  .badge-learn{border:1px solid CanvasText}
}
.card-by{position:relative;z-index:1;margin:0;font-size:var(--fs-small);color:var(--soft);line-height:1.4;min-width:0;overflow-wrap:anywhere}
.card-by-link{color:var(--navy);font-weight:500}
.card-handle{font-weight:400;color:var(--soft)}
/* A listing's marketplace signals (#228, _SkillSignals): stars and their count, the people who added it, its questions, a dot between. */
.sig{display:flex;flex-wrap:wrap;align-items:center;margin:0;font-size:var(--fs-small);color:var(--soft);line-height:1.4}
.sig-i{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.sig-i+.sig-i::before{content:"\00B7";margin:0 6px;color:var(--soft)}
.sig-rate{color:var(--ink)}
.sig-rate b{font-weight:600}
.sig-at{min-height:44px;color:var(--soft);text-decoration:none}
.sig-at:hover{color:var(--navy);text-decoration:underline}
.sig-at:focus-visible{outline:var(--ring-line);box-shadow:var(--ring);border-radius:8px}
.avatar .logo-mark{width:100%;height:100%}
@media (pointer:coarse){
  .card-by-link{display:inline-flex;align-items:center;min-height:44px}
}
/* ===== end search-first home ===== */

/* ===== Layout fixes, batch 1 (#154, docs/plans/LAYOUT_FIXES_1.md). Each block names its pattern and the review findings. ===== */
/* B. Vertical rhythm. Two white sections in a row share one gap, not two paddings stacked (G1-25, G2-31, G3-08, G5-05,
   G6-05); a tinted band keeps its own. The same after an article, whose FAQ sits inside it (G4-18). */
.section:not([class*=" t-"])+.section:not([class*=" t-"]),.section:not([class*=" t-"])+.section-tight:not([class*=" t-"]):not(.tell-us-box),
.section-tight:not([class*=" t-"])+.section:not([class*=" t-"]),.section-tight:not([class*=" t-"])+.section-tight:not([class*=" t-"]):not(.tell-us-box){padding-top:0}
.article+.section-tight{padding-top:0}
/* The summary box and the article under it read as one (G1-01, G6-26); a byline sits with its answer box (G6-18). */
.section-tight+.prose>:first-child{margin-top:0}
.article-head.section-tight{padding-bottom:24px}
/* A paragraph after a list, a code box or a table has the gap two paragraphs have (G1-03, G4-25, G6-21). */
.prose ul+p,.prose ol+p,.prose pre+p,.prose table+p,.prose blockquote+p,.prose .table-wrap+p{margin-top:12px}
/* A panel's heading has room above its text (G1-19). Tabs that close a section don't add its bottom padding (G4-30). */
.panel h2+*{margin-top:10px}
.section-tight:has(>.tabs-nav:last-child){padding-bottom:0}
/* C. One reading width (--measure). A section's own paragraphs stop where the text above them does (G2-30, G5-06, G6-29). A
   narrow page sits on the site's left edge like every other page, its blocks at the one width (G4-06, G5-23). */
.section-tight>p,.section-tight>.wrap>p,.section>.wrap>p{max-width:var(--measure)}
.page-narrow>*{max-width:var(--measure)}
/* O. Tables read as tables. A row's own header is text, not a second column header (G2-26, G3-26); a table inside its bordered
   wrap has no empty band above it and no doubled line under it (G2-08). */
.table tbody th,.data-table tbody th,.prose tbody th{background:none;color:var(--ink);font-weight:500}
.table-wrap>.data-table{margin-top:0}
.data-table tr:last-child>*{border-bottom:0}
/* I. Short things that must stay together: a price, a phone number, an app's name in a row of links (G1-20, G4-12, G4-26). */
.nowrap{white-space:nowrap}
/* Phones: a row of page buttons stacks at one width, not ragged (G2-40). */
@media (max-width:600px){
  .actions>.btn,.badges>.btn,.profile-actions>.btn{flex:1 1 100%}
}
/* J. No orphan word at the end of a paragraph, an item or an empty box (G2-42, G3-33, G6-32, G6-37). Browsers without it ignore it. */
p,li,dd,.lead,.empty{text-wrap:pretty}
/* F. Rules that leaked into what's nested in them. Code inside a code box has no chip of its own, so the first line isn't
   indented (G1-04, G6-24); a path or command in a table cell stays on one line, so it never breaks at a hyphen (G6-23). */
pre code{padding:0;background:none;border-radius:0;font-size:inherit}
@media (min-width:900px){.prose td code,.prose th code{white-space:nowrap}}
/* What it can reach, as a list with the page's own indent (G5-37). */
.reach-list{margin:0;padding-left:18px;display:grid;gap:6px}
/* P. A fold says it opens: the FAQ's chevron on every summary that dropped the browser's marker (G2-39, G5-13, G6-20). */
.disclose>summary{list-style:none;cursor:pointer;display:flex;align-items:center}
.disclose>summary::-webkit-details-marker{display:none}
.disclose>summary::after{content:"";flex:none;margin-left:10px;width:9px;height:9px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.disclose[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
/* D. Grids that fit what's in them, so no card sits alone on a row with empty slots beside it. Four skill cards are 2 × 2 and a
   lone card keeps a card's width (G3-15, G5-14, G6-05); the area tiles' last row fills (G3-05); a fourth or seventh feature card
   spans the row (G2-22); the letter bar is one row (G1-23). */
@media (min-width:961px){
  .grid3:has(>:last-child:nth-child(4)){grid-template-columns:repeat(2,1fr)}
  .tiles:not(.tiles-3){display:flex;flex-wrap:wrap}
  .tiles:not(.tiles-3)>.tile{flex:1 1 230px}
}
@media (min-width:1100px){
  .az a{flex:1 1 0;min-width:30px;padding-inline:0}
}
.grid3:has(>:only-child){grid-template-columns:minmax(0,520px)}
.ranked:has(>li:only-child){grid-template-columns:minmax(0,420px)}
/* Two cards take two columns, not two thirds of three (a job page with two skills; the 29 Oct design sweep, group B). */
@media (min-width:961px){.ranked:has(>li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,420px))}}
.community-card .row-actions{margin-top:auto;position:relative;z-index:1}
.hub-tiles a:hover{background:var(--ice)}
/* Phones: long lists of tiles, industries and end-of-page links are compact, not one tall box per row (G1-26, G3-12, G4-19,
   G2-14, G6-27): two industries a row, smaller area tiles, and "Where to next" as wrapped chips. */
@media (max-width:600px){
  .hub-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{min-height:0;padding:14px 16px}
  .tile svg{width:32px;height:32px}
  .tile b{margin-top:10px;font-size:var(--fs-body)}
}
@media (max-width:760px){
  .mesh-grid ul{display:flex;flex-wrap:wrap;gap:8px}
  .mesh-grid a{padding:0 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none}
}
/* G. Thin data drawn at its own size. With only a few makers, /creators shows them beside the invitation to join (P0-2, G2-02). */
.makers-few .makers{grid-template-columns:minmax(0,1fr)}
.makers-few .maker-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
/* /creators while there are few makers (calm batch G, #190): the invitation on a cream panel with the maker's own drawing (scene
   05) above its heading, one button and how it works as a link. */
.makers-invite{display:grid;gap:12px;align-content:start;padding:clamp(24px,3vw,40px);border-radius:var(--r-lg);background:var(--cream)}
.makers-invite-art{width:100%;max-width:22rem;margin:-8px 0 4px}
.makers-invite h2{font-size:var(--h3);margin:0}
.makers-invite p{margin:0;max-width:34em}
.makers-invite-copy{display:grid;gap:12px}
.makers-invite .pg-acts{margin-top:8px}
/* N. Skills before the controls (G2-35, G5-11). On a wide screen the filters are one row: who it's for, the order, Free now,
   "More filters" and "Show skills"; the hint sits under the row. On a phone (and on a search with only a few results) they
   fold under "Filters". */
.filter-fold>summary{display:flex;align-items:center;min-height:44px;margin-top:16px;font-weight:600;color:var(--navy)}
.market-filter>.ability-filter{flex-basis:auto}
.more-filters:not([open]){flex-basis:auto}
@media (max-width:600px){
  .market-filter>.more-filters{grid-column:1 / -1}
}
/* /explore (the calm site's fix 6): on a wide screen the fold is always open and has no summary; a browser that can't open a
   closed fold from CSS (no ::details-content) shows the "Filters" summary instead, which still works. */
@media (min-width:601px){
  /* Only where the browser can open a closed fold from CSS, so the filters never vanish (iPadOS 17; the calm-c review, M4). */
  @supports selector(::details-content){
    .filter-fold-phone>summary{display:none}
    .filter-fold-phone::details-content{content-visibility:visible;display:block}
  }
}
/* The v2 page head's top space and a lead on one line where it fits, so the first cards' names are on a desktop's first screen with
   live-like data (they were at 864 px of 860, calm batch G). */
.explore-sec{padding-top:clamp(16px,3vw,40px)}
.explore-lead{max-width:none}
.explore-find{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:28px}
.explore-find .search{margin-top:0;flex:1 1 420px;min-width:0}
.explore-alt{margin:0;font-size:var(--fs-small)}
.list-note{margin-top:20px;color:var(--soft)}
@media (max-width:760px){ .list-note{margin:12px 0 -8px} }   /* closer to the cards it's about: the first one's name on a phone's first screen */
/* /contact: the email addresses and the postal address sit under the form, not before it on a phone (G2-18). */
.contact-more{padding-bottom:clamp(36px,5vw,64px)}
/* K. One type scale (--h1, --h2, --h3). Every H2 in an article, and in the sections after one (questions, skills to try, where
   to next), is the article's size (G4-17, G6-19). A step's hint is quieter than its text (G4-07). The log-in page has one edge:
   the providers' buttons and the email form share it, at one height (G4-13). */
.article h2,.article~.section-tight>h2{font-size:var(--h2)}
/* The home's questions: the one FAQ (_Faq) inside the grey band (G3-13). */
.faq-band{padding-block:clamp(8px,2vw,24px)}
ol.steps>li p.meta{color:var(--soft);margin-top:8px;padding-left:10px;border-left:1px solid var(--line)}
.auth .form.panel{border:0;padding:0;background:none}
.auth .btn-provider{min-height:52px}
/* L. A long sales or explainer page ends on its next step: a cream band after the FAQ (G2-24, G3-28). It keeps its own padding
   (it's a band), with the reading width inside. */
.closing-cta{background:var(--cream);border-radius:var(--r);padding:clamp(24px,4vw,40px);margin-bottom:clamp(36px,5vw,64px)}
.closing-cta>p{max-width:var(--measure)}
/* A card that opens a page says so at its foot (G4-04). */
.guide-card .guide-go{margin-top:auto;padding-top:6px;font-weight:500;color:var(--navy);font-size:var(--fs-small)}
/* A card's own date sits at its foot, so dates line up across a row (G3-31). */
.guide-card .fresh{margin-top:auto;padding-top:6px}
/* Phones: the AI app guides are compact rows, the name alone, not 12 full cards (G3-32). */
@media (max-width:600px){
  .guide-apps{gap:8px}
  .guide-apps .guide-card{padding:12px 16px}
  .guide-apps .guide-card span{display:none}
}
/* A promise under a section heading is never louder than the heading (G2-32, G5-02). */
.promise-line{font-family:var(--display);font-weight:700;font-size:var(--h2);color:var(--navy);line-height:1.2;max-width:var(--measure)}


/* ===== G12a: the result composer (docs/plans/COMMUNITY_VIBE_G12.md 4.1, member-home mockup). On /feed, skill pages and the
   home page, so it lives here; the result card and post page are in community.css. Brand tokens only, no new colours. The
   chips are .choice radio rows (#129 Y-02) laid out in a wrapping row, the chosen one on cream. ===== */
.result-home{padding-block:clamp(20px,3vw,32px) 0}
.result-composer{border:2px solid var(--navy);border-radius:var(--r);padding:clamp(16px,2.4vw,22px);background:var(--white);display:grid;gap:12px;max-width:860px;scroll-margin-top:96px}
.result-composer .result-composer-h{font-family:var(--display);font-size:var(--h3);font-weight:600;color:var(--navy)}   /* beats .skill-page h2 on the Results tab */
.result-form{display:grid;gap:16px}
.result-pick,.result-how{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
.result-pick>legend,.result-how>legend{font-weight:500;font-size:var(--fs-body);color:var(--navy);padding:0;margin-bottom:8px}
.result-optional{font-weight:400;color:var(--soft)}
.result-chips{display:flex;flex-wrap:wrap;gap:8px}
.result-chip{gap:8px;padding:5px 14px 5px 8px;font-size:var(--fs-small);color:var(--navy);min-height:44px;background:var(--white)}
.result-chip:has(input:checked){border-color:var(--navy);background:var(--cream)}
.result-chip:has(input:focus-visible){outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}
.result-chip b{font-weight:500}
.result-chip-ic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;flex:none}
.result-chip-ic svg{width:19px;height:19px}
.result-chip-meta{color:var(--soft);font-size:var(--fs-small);white-space:nowrap}
.result-proof-line{margin:0}
.result-more{border-top:1px solid var(--line);padding-top:12px}
.result-more>summary{cursor:pointer;color:var(--navy);font-weight:500;min-height:44px;display:flex;align-items:center}
.result-more-body{display:grid;gap:14px;margin-top:8px}
.result-ba-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.result-details-ok{background:var(--cream);border-radius:var(--r-sm);padding:12px 14px}
.result-challenge{background:var(--mist);border-radius:var(--r-sm);padding:12px 14px}   /* "Part of this month's challenge" (G12b) */
.result-public{margin:0;background:var(--ice);border-radius:var(--r-sm);padding:10px 14px;font-size:var(--fs-body);color:var(--navy)}   /* every result is public: said before they type */
.result-composer-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:12px}
.result-composer-foot .hint{flex:1 1 280px;margin:0}
@media (max-width:600px){
  .result-composer-foot{flex-direction:column;align-items:stretch}
  .result-composer-foot .btn{width:100%}
}
/* ===== end G12a composer ===== */
/* ===== G12f: My AI kit, badges and the ladder (docs/plans/COMMUNITY_VIBE_G12.md section 4.5; mockup profile-kit). Brand tokens,
   our own glyphs, a person's note in the hand font. ===== */
.kit-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px}
.kit-head p{max-width:var(--measure)}
/* auto-fit: one or two skills fill the row instead of sitting at a third of it (the G12f review, L9). */
.kit-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:16px}
.kit-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white);min-width:0}
.kit-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:14px 14px 18px}
.kit-ic{flex:none;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px}
.kit-top .kit-ic{background:var(--white)}
.kit-ic svg{width:30px;height:30px}
.kit-maker{border-radius:999px;background:var(--white);padding:3px 11px;font-size:var(--fs-small);color:var(--navy);font-weight:500;max-width:60%;overflow-wrap:anywhere}
.kit-body{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;flex:1;min-width:0}
.kit-name{font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy);text-decoration:none;overflow-wrap:anywhere}
a.kit-name:hover{text-decoration:underline}
.kit-note{font-family:var(--hand);font-weight:700;font-size:var(--h3);line-height:1.25;color:var(--navy);overflow-wrap:anywhere}
.kit-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.kit-used{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:var(--mint);padding:3px 10px 3px 4px;font-size:var(--fs-small);color:var(--ink)}
.kit-used svg{width:18px;height:18px}
.kit-tried-title{display:flex;align-items:center;gap:10px}
.kit-tried-title svg{width:26px;height:26px;flex:none}
.kit-tried{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:var(--measure)}
.kit-tried-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px}
.kit-tried-body{display:grid;gap:4px;min-width:0;flex:1 1 14rem}
.kit-tried-see{flex:none;align-self:center}
.kit-what{max-width:var(--measure);background:var(--cream);border-color:var(--cream)}
.kit-what h3{display:flex;align-items:center;gap:10px;font-size:var(--fs-body)}
.kit-what h3 svg{width:26px;height:26px;flex:none}
.kit-what ul{padding-left:20px;display:grid;gap:6px}
.badge-strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.badge-card{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;min-width:0}
.badge-card b{font-size:var(--fs-small);color:var(--navy)}
.badge-ic{flex:none;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px}
.badge-ic svg{width:26px;height:26px}
/* The ladder (/community/levels; calm batch G, #190): on a wide screen the five levels rise left to right, each step a little
   higher and warmer, the words under each step, so the climb shows before it's read. Each level is a column of the list's two
   rows (subgrid), so the steps stand on one line. On a phone, one level a row with its number beside it. */
.levels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto;gap:16px}
.level-row{display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:16px;min-width:0}
.level-row b{font-family:var(--display);font-size:var(--fs-body);color:var(--navy);font-weight:700}
.level-row p{margin-top:2px}
.level-n{align-self:end;display:flex;align-items:flex-end;height:64px;padding:12px 16px;border-radius:20px;background:var(--mist);font-family:var(--display);font-weight:700;font-size:var(--h2);line-height:1;color:var(--navy)}
.level-row:nth-child(2) .level-n{height:96px;background:var(--ice)}
.level-row:nth-child(3) .level-n{height:128px;background:var(--mint)}
.level-row:nth-child(4) .level-n{height:160px;background:var(--cream)}
.level-row:nth-child(5) .level-n{height:192px;background:var(--marigold)}
/* What each level adds: a card a level, its number as a small step beside its name. */
.level-perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:16px;margin:0}
.level-perks>div{padding:20px 22px 22px;border:1px solid var(--line);border-radius:22px;min-width:0}
.level-perks dt{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;color:var(--navy)}
.level-chip{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--mist);font-size:var(--fs-small)}
.level-perks dd{margin:10px 0 0}
.level-perks ul{margin:0;padding-left:20px;display:grid;gap:4px}
/* How points add up: each kind of point as its number, on a tile (calm batch G). */
.points-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.points-tiles li{display:grid;align-content:start;gap:8px;padding:22px 20px 24px;border-radius:22px;background:var(--mist)}
.points-n{font-family:var(--display);font-weight:700;font-size:var(--h2);line-height:1;color:var(--navy)}
.points-tiles p{margin:0}
.points-tiles b{font-weight:500;color:var(--navy)}
.points-rules{margin:20px 0 0;max-width:var(--measure);color:var(--soft)}
@media (max-width:900px){
  .levels{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:12px}
  .level-row{grid-row:auto;grid-template-rows:none;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:start}
  .levels .level-row .level-n{height:56px;justify-content:center;align-items:center;align-self:start;padding:0;border-radius:16px;font-size:var(--h3)}
  .points-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .points-tiles li{padding:16px 16px 18px}
}
@media (max-width:600px){
  .level-row p{display:none}   /* a phone's ladder is the climb: number, name and points; each level's line is on a wider screen */
  .kit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kit-top{padding:10px 10px 12px}
  .kit-ic{width:40px;height:40px;border-radius:12px}
  .kit-maker{display:none}
  .kit-body{padding:10px 12px 12px}
  .kit-note{font-size:var(--fs-body)}
  /* One sideways row on a profile, fading at the edge so it reads as more to see (the G12f review, L9). */
  .badge-strip{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(16px,4vw,32px));padding:2px clamp(16px,4vw,32px) 6px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .badge-card{flex:none}
  /* The levels page lists every badge: it wraps instead (L9). */
  .badge-strip-all{flex-wrap:wrap;overflow-x:visible;margin-inline:0;padding:0;-webkit-mask-image:none;mask-image:none}
  .badge-strip-all .badge-card{flex:1 1 100%}
}
/* ===== G12e: the card and the list of places shared by the member home (community.css has the rest) and a member's profile, which
   has no area sheet. ===== */
.mh-card{padding:18px}
.mh-card-title{display:flex;align-items:center;gap:10px;font-size:var(--fs-body)}
.mh-card-title svg{width:24px;height:24px;flex:none}
.mh-nav-title{font-size:var(--fs-small);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
.mh-nav-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mh-nav-list a{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px;border-radius:var(--r-sm);text-decoration:none;color:var(--navy)}
.mh-nav-list a:hover{background:var(--mist)}
.mh-nav-ic{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px}
.mh-nav-ic svg{width:22px;height:22px}
.mh-nav-name{flex:1;min-width:0;font-weight:500;overflow-wrap:anywhere}
/* ===== G12e: a member's profile (4.5; mockup profile-kit): their words, their record, tabs, and "Helping on Trilly" week by week
   from public acts only. ===== */
.pf-who{flex:1 1 20rem;min-width:0}
.pf-bio{color:var(--ink);overflow-wrap:anywhere}
.pf-stats{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px;color:var(--soft)}
.pf-stats b{font-family:var(--display);font-size:var(--h3);color:var(--navy);margin-right:4px;font-weight:700}
.pf-cols{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);padding-bottom:clamp(28px,5vw,56px)}
.pf-main,.pf-rail{min-width:0}
.pf-rail{display:grid;gap:16px;align-content:start}
.pf-list{list-style:none;margin:0;padding:0;display:grid}
.pf-item{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.pf-excerpt{color:var(--ink);max-width:var(--measure);overflow-wrap:anywhere}
.pf-result{display:flex;align-items:center;gap:14px}
.pf-date{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-sm);background:var(--mist);line-height:1.1}
.pf-date b{font-family:var(--display);font-size:var(--h3);color:var(--navy);font-weight:700}
.pf-date span{font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.06em;color:var(--soft)}
.pf-result-text{flex:1;min-width:0}
.pf-score{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-weight:600;color:var(--navy)}
.pf-score svg{width:18px;height:18px}
.pf-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.pf-week{aspect-ratio:1;border-radius:6px}
.pf-shade-0{background:var(--mist)}
.pf-shade-1{background:var(--cream)}
.pf-shade-2{background:var(--marigold)}
.pf-shade-3{background:var(--gold)}
.pf-shade-4{background:var(--gold-text)}
.pf-strip-ends{display:flex;justify-content:space-between;margin-top:6px}
@media (min-width:900px){
  .pf-cols{grid-template-columns:minmax(0,1fr) minmax(0,19rem);align-items:start}
}
/* ===== end G12e profile ===== */
/* G10, SIMP-10: the quick start on an empty Settings > Linked AI apps. */
.link-quickstart{border:1px solid var(--line);border-radius:var(--r);padding:clamp(14px,2.4vw,22px);background:var(--white)}

/* G10, SIMP-26: notes only for small screens. */
.only-small{display:none}
@media (max-width:600px){.only-small{display:block}}

/* ===== "In your AI" (#173, the site audit's item #4; Pages/Shared/_InYourAi): Link, Add, Ask, the same three lines on every page
   that explains adding a skill. Calm: 1 px lines, small numbers, one line a step and its detail folded; the app links look like
   the market pills. A shared partial, so its rules live here (#129). ===== */
.iya{max-width:var(--measure)}
.iya-apps{margin-bottom:14px}
.iya-body .iya-apps{margin:10px 0 0}   /* the pills inside step 1 (InYourAiView.AppsInLink, /get) */
.iya-apps .pill{border:1px solid var(--line);background:var(--white);min-height:40px}
.iya-apps .pill[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.iya-steps{list-style:none;margin:0;padding:0;counter-reset:iya;border-top:1px solid var(--line)}
.iya-steps>li{counter-increment:iya;display:grid;grid-template-columns:1.75rem 3.5rem minmax(0,1fr);column-gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.iya-steps>li::before{content:counter(iya);align-self:start;font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1.25;color:var(--navy)}
.iya-word{font-family:var(--display);font-size:var(--fs-body);font-weight:700;color:var(--navy)}
.iya-body{min-width:0;overflow-wrap:break-word}
.iya-more{margin-top:6px;font-size:var(--fs-small)}
.iya-more>summary{color:var(--navy);font-weight:500;min-height:32px}
.iya-more ul{margin:6px 0 0;padding-left:20px;display:grid;gap:6px}
@media (max-width:600px){
  .iya-steps>li{grid-template-columns:1.75rem minmax(0,1fr)}
  .iya-steps>li::before{grid-row:span 2}
  .iya-body{grid-column:2}
}
/* ===== end "In your AI" ===== */

/* ===== The hero search box on a phone (_SearchBox, Hero: true; calm batch G, #176): the button is a round arrow, its name still
   "Search" for screen readers. The v1 home's pictures (the chat, the marked test, the situations, the marks band) left with v2
   (#190): the home's own rules are in css/home.css and the product pictures in css/pictures.css. ===== */
.search-hero .btn .ui-ico{display:none;position:static;width:20px;height:20px;margin:0;color:inherit}
@media (max-width:600px){
  .search-hero .btn{width:48px;min-height:48px;padding:0;flex:none}
  .search-hero .search-go-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .search-hero .btn .ui-ico{display:block}
}
/* ===== end the hero search box ===== */
/* ===== G-A "Trust, published true" (REMAINING 3.27): /trust/security's "For your security review" box, its data-flow picture
   (drawn in HTML so it reads in order and stacks on a phone; the arrows are our own inline SVG), and /contact's reply times.
   Calm (calm-e; the G-A review's H1 and L6): the six sizes, Gabarito at 800, 1 px solid lines and white surfaces, so the
   answer box stays the page's one highlight. ===== */
.review-box{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);padding:clamp(18px,3vw,28px) clamp(16px,3vw,28px);max-width:60rem}
.review-list{margin:0;display:grid;gap:0}
.review-list>div{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:4px 20px;padding:10px 0;border-top:1px solid var(--line)}
.review-list dt{font-weight:600;color:var(--navy)}
.review-list dd{margin:0;min-width:0;overflow-wrap:break-word}
.review-list dd a{color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:3px;white-space:nowrap}
@media (max-width:640px){
  .review-list>div{grid-template-columns:minmax(0,1fr)}
  .review-list dd a{white-space:normal}
}
.flow{margin:0;max-width:60rem}
.flow-cap{margin:0 0 12px}
.flow-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:12px}
.flow-node{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;background:var(--white);min-width:0;overflow-wrap:break-word}
.flow-node p+p{margin-top:6px}
.flow-main{border-color:var(--navy)}
.flow-name{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy)}
.flow-name svg{width:24px;height:24px;flex:none}
.flow-where{color:var(--soft)}
.flow-zone{border:1px solid var(--navy);border-radius:var(--r);padding:clamp(14px,2.4vw,20px);background:var(--white)}
.flow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:12px}
.flow-link{display:grid;grid-template-columns:16px minmax(0,1fr);gap:14px;align-items:center;margin:0;padding:10px 0 10px 18px;max-width:var(--measure)}
.flow-arrow{width:16px;height:64px;color:var(--navy)}
.reply-times{max-width:60rem}
/* ===== end G-A ===== */
/* ===== calm batch G, the trust and company pages (#190; lead-g-trust): /trust and its pages, /about, /contact, /accessibility,
   /status, /changelog, the legal pages and the error page, in the mockups v2's shape (C:\TrillyOps\plans\calm-show-mockups-v2\site\
   trust.html and notfound.html) on site.css's tokens: type only through the shared sizes (h1, h2 and .lead take the v2 scale from
   :root), one display number a page, 1 px lines, white surfaces with one cream highlight. The navy band and its scoreboard (.night,
   _Scoreboard), the closing ask (_ClosingAsk), the entrance (.reveal), the scenes' motion (.scene, data-anim), the arrow link
   (.go), the white tag (.card-tag) and the one fold (.faq) are the shared ones; what's here is only these pages' own. Every class
   starts tc-. ===== */
/* A page's head: the crumbs, the H1 and its answer, and one picture beside them on a wide screen. */
.tc-hero{padding:clamp(24px,4vw,48px) 0 0}
.tc-hero-grid,.tc-head-grid{display:grid;gap:32px 64px;align-items:center}
.tc-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,34rem)}
.tc-head-grid{grid-template-columns:minmax(0,1fr) minmax(0,26rem)}
.tc-hero h1{max-width:11em}
.tc-hero .lead,.tc-head .lead{margin-top:20px;color:var(--navy);max-width:34em}
.tc-hero-scene{justify-self:end;width:min(100%,32rem)}
.tc-head{padding:clamp(24px,4vw,48px) 0 0}
.tc-head h1{max-width:18em}
.tc-head .go{margin-top:12px}
.tc-head .answer-box{margin-top:20px}
.tc-head-art{display:block;width:100%;height:auto}
.tc-meta{margin-top:12px;color:var(--soft);font-size:var(--fs-small)}
.tc-meta a{color:var(--soft)}
.tc-hero .go{margin-top:16px}
/* The proof: what it is (Trilly's own test), the one display number, its runs as dots (a column a skill) and what they count; the
   whole card opens how we test. */
.tc-score{position:relative;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;justify-items:start;padding:32px;border-radius:var(--r-panel);background:var(--cream);width:min(100%,34rem)}
.tc-score-n,.tc-total-n{font-size:var(--h1-hero);line-height:1}
.tc-score-n .display-number,.tc-total-n .display-number{font-size:1.375em;line-height:.9;white-space:normal}
.tc-matrix{display:flex;gap:5px}
.tc-matrix span{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:5px;width:12px}
.tc-matrix i{display:block;width:12px;height:12px;border-radius:50%;background:var(--marigold);box-shadow:inset 0 0 0 1.5px var(--navy)}
.tc-matrix i.tc-miss{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--soft)}
.tc-score-label{line-height:1.35;max-width:24em;text-wrap:balance}
.tc-score-label .go{display:inline;min-height:0}
.tc-score-label .go .ui-ico{display:inline-block;vertical-align:-3px;margin-left:6px}
.tc-score-k{color:var(--navy);max-width:22em}
.tc-score-off{display:flex;align-items:center;gap:10px;color:var(--soft)}
.tc-score-off i{flex:none;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--soft)}
.tc-score-go::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tc-score:hover .tc-score-go .ui-ico{transform:translateX(4px)}
.tc-score-art{padding:24px}
.tc-score-art img{display:block;width:100%;height:auto}
/* Sections: one idea each, the heading's second sentence quieter, and one picture. */
.tc-sec{padding-top:var(--sec)}
.tc-sec.tc-last{padding-bottom:var(--sec)}
.tc-sec-head{display:grid;gap:24px 56px;margin-bottom:clamp(24px,3vw,40px)}
.tc-sec-art{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.tc-sec-art .tc-art{justify-self:end}
.tc-big{max-width:16em}
.tc-tt{display:block;color:var(--soft)}
.tc-art{display:block;width:min(100%,460px);height:auto}
.tc-narrow,.tc-measure{max-width:var(--measure)}
.tc-narrow>p,.tc-sec-head .tc-measure{margin-top:16px}
.tc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 72px;align-items:center}
.tc-split.tc-top{align-items:start}
.tc-split-copy{display:grid;gap:16px;align-content:start;max-width:var(--measure)}
.tc-answers h3{margin-top:4px}
.tc-original{max-width:22rem}
/* The scoreboard's head inside the shared navy band: the heading, and "This quarter, since ..." on its right. */
.tc-board-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px}
.tc-board-head .tc-tt,.tc-board-head p{color:var(--on-navy-soft)}
/* One version's checks as a receipt (an example), tilted like a slip on the counter. */
.tc-rcpt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:center}
.tc-rcpt-copy{display:grid;gap:18px}
.tc-receipt{margin:0;justify-self:center;width:100%;max-width:460px;transform:rotate(-1.4deg);filter:drop-shadow(0 2px 3px rgba(13,44,84,.1)) drop-shadow(0 24px 28px rgba(13,44,84,.16))}
.tc-paper{background:var(--white);padding:24px 26px 14px;border-radius:18px 18px 0 0;color:var(--navy)}
.tc-zig{display:block;width:100%;height:14px;margin-top:-1px}
.tc-r-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.tc-r-head svg{width:32px;height:32px;flex:none}
.tc-r-head>span:not(.card-tag){flex:1;min-width:0;line-height:1.3}
.tc-r-head b{display:block;font-weight:500}
.tc-r-head span span{display:block;color:var(--soft);font-size:var(--fs-small)}
.tc-r-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.tc-r-line:last-child{border-bottom:0}
.tc-r-line b{font-weight:500;white-space:nowrap}
/* /trust's film (#235, film 2) in the receipt's place: the copy above, then the film at the page's width (its smallest words 12 px and
   up: a 1024 px frame at 1440, 888 at 1024), its four chapters in a row under it from 1024 px, where the wide cut starts and the row
   is as wide as the film; under that a list as wide as the card (the trust-film review's Medium: from 761 the row ran 168 px past the
   536 px card). 561 to 1023 px: the 536 px card from the text's left edge, never centred under it. A phone (to 560 px): the card is its column's width with no
   padding inside, so the 4:5 frame lines up with the text at the full 16 px gutter (343 px at 375, 328 at 360, 310 at 342: 12.1 px and
   up); only under 342 px it's pinned at 310 px and centred on the column (11 px into each gutter at 320, under 1 at 341). The column's 100%, never 100vw. As /link's (content.css). */
.tc-film{display:grid;gap:32px}
/* The lines under the heading keep a reading width while the film takes the page's (they ran about 140 characters at 1440). */
.tc-film .tc-rcpt-copy .muted{max-width:var(--measure)}
.tc-film-play{display:grid;gap:16px}
@media (min-width:1024px){.tc-film-play .film-ch{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:561px) and (max-width:1023px){.tc-film-play .film-ch{max-width:536px}}
@media (min-width:561px) and (max-width:1023px){.tc-film-play .film-card{margin-inline:0}}
@media (max-width:560px){
  .tc-film-play .film-card{padding:0;border-radius:16px}
  .tc-film-play .film-mat{padding:0}
}
@media (max-width:341px){.tc-film-play .film-card{width:310px;max-width:none;margin-inline:calc((100% - 310px)/2) 0}}
/* /trust/how-stats-work's film (#235, film 4) in its example picture's place: a tall film (the 4:5 cut in a card at most 440 px, its
   smallest words 17 px there; 416 px on a phone, 310 under 342: the shared .film-tall rules), its four chapters beside it from 900 px,
   centred on it, and under it below that, never wider than the card. */
.hs-film{display:grid;gap:16px}
.hs-film .film-ch{max-width:440px}
@media (min-width:900px){.hs-film{grid-template-columns:440px minmax(0,1fr);align-items:center;gap:32px}}
@media (max-width:560px){.hs-film .film-ch{max-width:416px}}
.tc-ok{color:var(--good)}
/* What we check: a tile a check (our icon, its name, one line), the person's tile in cream; every word in full in the fold. */
.tc-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tc-checks li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:22px;border-radius:var(--r-lg);background:var(--mist)}
.tc-checks li.tc-person{background:var(--cream)}
.tc-checks svg{width:44px;height:44px}
.tc-checks b,.tc-rows b,.tc-promises b{font-weight:500;color:var(--navy)}
.tc-checks b,.tc-rows p>b{display:block;line-height:1.35}
.tc-checks span,.tc-rows p>span{display:block;margin-top:4px;color:var(--soft)}
.tc-study{margin-top:24px}
.tc-badges{max-width:68rem}
/* What's inside the one fold (.faq): its own padding, the words in full. */
.tc-fold-body{display:grid;gap:12px;padding:0 18px 18px}
.faq .tc-fold-body p{padding:0}
.tc-fold-body h3{margin-top:12px}
.tc-fold-body b,.tc-list b,.tc-read section>p>b{font-weight:500;color:var(--navy)}
.tc-fold-body a,.tc-rows a,.tc-promises a:not(.go),.tc-hero .lead a,.tc-head .lead a,.tc-head .tc-meta a,.tc-sec-head .tc-measure a,.tc-read section>p a,.tc-split-copy a:not(.go){color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:3px}
/* The feedback loop: four steps of one example, its tag before the first, joined by a short line on a wide screen. */
.tc-loop{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tc-loop li{position:relative;display:grid;gap:10px;align-content:start;padding:22px;border-radius:var(--r);background:var(--white);border:1px solid var(--line)}
.tc-loop li:not(:last-child)::after{content:"";position:absolute;right:-17px;top:50%;width:14px;height:2px;background:var(--navy)}
.tc-who{display:flex;align-items:center;gap:10px;color:var(--soft);font-size:var(--fs-small);line-height:1.35}
.tc-who svg{width:26px;height:26px;flex:none}
.tc-say{color:var(--navy);font-weight:500;line-height:1.4}
.tc-sub{color:var(--soft);font-size:var(--fs-small)}
.tc-loop-note{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px;color:var(--soft)}
/* Rows: our icon (or a small drawn mark), a name and what it means, between 1 px lines; two to a row where .tc-two says so. */
.tc-rows{list-style:none;margin:0;padding:0;display:grid;max-width:var(--measure)}
.tc-rows.tc-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;max-width:68rem}
.tc-rows li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start;padding:16px 0;border-top:1px solid var(--line);scroll-margin-top:96px}
.tc-rows li>p:only-child{grid-column:1/-1}
.tc-rows li>svg{width:32px;height:32px}
.tc-rows li>.ui-ico{width:20px;height:20px;margin:4px 0 0 6px;color:var(--navy)}
.tc-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 32px}
/* /trust's report links on a phone: 24 px between their rows, so the next section's questions start on the next screen (trust-film:
   the film is shorter on a phone than the receipt it replaced, and that screen held 83 words, over CalmPageTests' 80; measured 75). */
@media (max-width:560px){.tc-report-links{row-gap:24px}}
/* A list in the body: a small marigold dot, every line starting at one edge. */
.tc-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:var(--measure)}
.tc-list li{position:relative;padding-left:26px}
.tc-list li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--marigold);box-shadow:inset 0 0 0 1.5px var(--navy)}
/* Promises: three tiles, our icon above a short line and its link. */
.tc-promises{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tc-promises>li{display:grid;gap:14px;align-content:start;padding:28px;border-radius:var(--r-lg);background:var(--mist)}
.tc-promises>li>svg{width:48px;height:48px}
.tc-promises .go{justify-self:start}
.tc-promises-sm{grid-template-columns:minmax(0,1fr);gap:12px}
.tc-promises-sm>li{grid-template-columns:40px minmax(0,1fr);padding:22px}
.tc-promises-sm>li>svg{width:40px;height:40px}
.tc-promises-sm>li>:not(svg){grid-column:2}
/* Know-how as recipe cards (docs/BRAND.md): three packs, tilted like products on a table. */
.tc-packs{margin:0;display:grid;justify-items:center;gap:16px}
/* The cards as flat, slightly tilted rows at every width (the live design review, learn item 6: three across in /learn's 26rem
   column wrapped each label to five lines), one line or two a label. */
.tc-packs ul{list-style:none;margin:0;padding:12px 0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%;max-width:24rem}
.tc-packs li{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:20px;border:1px solid var(--line)}
.tc-packs li:nth-child(1){transform:rotate(-1.5deg)}
.tc-packs li:nth-child(2){transform:rotate(1deg)}
.tc-packs li:nth-child(3){transform:rotate(-1deg)}
.tc-packs li svg{flex:none;width:36px;height:36px}
.tc-packs b{font-family:var(--display);font-weight:700;font-size:var(--fs-body);line-height:1.25;color:var(--navy)}
/* A product picture on its tint: the label as its tag, then a white card with the thing itself (an example). */
.tc-pic{margin:0;padding:28px;border-radius:32px;background:var(--ice)}
.tc-pic-cap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:16px;color:var(--navy)}
.tc-pic-card{background:var(--white);border-radius:18px;padding:18px 20px 20px;box-shadow:0 1px 3px rgba(13,44,84,.12),0 30px 60px -36px rgba(13,44,84,.34)}
.tc-pic-title{font-weight:500;color:var(--navy);margin-bottom:12px}
.tc-pic .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.tc-pic-foot{margin-top:12px;font-size:var(--fs-small);color:var(--soft)}
/* /me/family before a list (3.29c): a family list drawn as an example, its rows and its one button, inert. */
.fam-start{display:grid;gap:32px;align-items:start}
@media (min-width:960px){.fam-start{grid-template-columns:minmax(0,1fr) minmax(0,28rem)}}
.fam-pic{max-width:30rem}
.fam-pic-rows{list-style:none;margin:0;padding:0}
.fam-pic-rows li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:10px 0;border-top:1px solid var(--line)}
.fam-pic-rows b{font-weight:500;color:var(--navy)}
.fam-pic-rows span{color:var(--soft);font-size:var(--fs-small)}
.fam-pic-btn{display:inline-block;margin:12px 0 0;padding:8px 16px;border-radius:999px;background:var(--marigold);color:var(--navy);font-weight:600}
.tc-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:var(--measure);margin-top:24px}
.tc-why p{display:grid;gap:8px;align-content:start}
.tc-why p+p{margin-top:0}
.tc-why svg{width:36px;height:36px}
.tc-why b{display:block;font-weight:500;color:var(--navy)}
/* /trust/how-we-rank (REMAINING 3.34, package 1): what a skill's rank is made of, in its real weights (StatsFormulas.RankScore): one bar
   in three parts with its key, then the two things it's multiplied by. Navy, marigold and the apricot line; no text on marigold. */
.rk-bar{display:flex;height:18px;margin:0;border-radius:999px;overflow:hidden;background:var(--mist)}
.rk-seg{display:block;height:100%}
.rk-p50{flex:50 0 0;background:var(--navy)}
.rk-p35{flex:35 0 0;background:var(--marigold)}
.rk-p15{flex:15 0 0;background:var(--apricot-line)}
.rk-p75{flex:75 0 0;background:var(--navy)}   /* search's split: how well it matches, then how well it works */
.rk-p25{flex:25 0 0;background:var(--marigold)}
.rk-pic-search{max-width:34rem}
.rk-strip{grid-template-columns:repeat(3,minmax(0,1fr))}   /* browse as a strip of three, the trust page's .tc-loop */
.rk-key{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.rk-key li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:center}
.rk-dot{display:block;width:12px;height:12px;border-radius:999px}
.rk-key b{font-family:var(--display);font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.rk-times{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:8px}
.rk-times li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start}
.rk-x{font-family:var(--display);font-weight:700;color:var(--navy)}
.rk-times b,.rk-rule{font-weight:500;color:var(--navy)}
.rk-signals{margin:0;padding-left:1.4em;display:grid;gap:6px;max-width:var(--measure)}
/* On a phone the tag says the caption, and the rule above says the foot (the first screen's reading budget); the strip stacks. */
@media (max-width:900px){.tc-loop.rk-strip{grid-template-columns:minmax(0,1fr);gap:12px}}
@media (max-width:760px){.rk-cap,.rk-foot{display:none}}
/* The region chooser (REMAINING 3.34, package 2; Pages/Region): a real price at the latest rate beside the head, the form in the
   contact page's card, the language said as a line. */
.rg-pic{max-width:24rem}
.rg-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0;color:var(--navy)}
.rg-big b{font-family:var(--display);font-weight:700;font-size:var(--h2)}
.rg-big span{font-size:var(--fs-lead);color:var(--soft)}
.rg-form{margin-top:24px;max-width:36rem;gap:16px}
/* The country storefronts (package 3; Pages/Countries): the drawing beside the head, the cards' sections in the page's width,
   the country's search words as pills, and /in's countries as a list of cards. */
.in-pic{padding:20px}
.in-pic img,.in-pic svg{display:block;width:100%;height:auto}
@media (max-width:600px){.in-scene #s10-tags{display:none}}
.in-lone .card-pic{aspect-ratio:auto}
.in-countries .in-n{font-family:var(--display);font-weight:700;font-size:var(--fs-num);line-height:1.1;color:var(--navy)}
.in-made{justify-self:start;margin-top:4px;padding:2px 10px;border-radius:999px;background:var(--marigold);color:var(--navy);font-size:var(--fs-small)}
.in-part{padding-top:clamp(48px,2rem + 3vw,88px)}
.in-part>h2{margin-bottom:20px}
.in-part>p{max-width:var(--measure)}
/* /in only: the cards come up under the head, under a section's heading, as the cards are the picture (the 30 Oct design sweep,
   group B round 2; the round's review, L1: never a country page's sections) */
.in-pick{padding-top:clamp(28px,1.25rem + 1.5vw,48px)}
.in-pick>h2{font-size:var(--h3)}
.in-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.in-pills .pill{background:var(--ice);border:1px solid var(--line)}
.in-pills .pill:hover{border-color:var(--navy)}
.in-countries{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.in-countries a{display:grid;align-content:start;gap:6px;height:100%;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--soft);text-decoration:none}
.in-countries a:hover{border-color:var(--navy)}
.in-countries b{font-family:var(--display);font-weight:700;font-size:var(--h3);color:var(--navy)}
.in-else a{background:var(--ice)}
@media (max-width:900px){.in-countries{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.in-countries{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
/* Buying safely (package 6; Pages/BuyingSafely): the promise as three steps in the head's picture, the trust pages' icon rows. */
.bs-steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.bs-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0}
.bs-steps li+li{border-top:1px solid var(--line)}
.bs-steps li>svg{width:32px;height:32px}
.bs-steps b{display:block;font-weight:500;color:var(--navy);line-height:1.35}
.bs-steps span{display:block;margin-top:4px;color:var(--soft);font-size:var(--fs-small)}
/* Report a problem and "Ask us to look again" (package 8; Pages/Trust/Report, Pages/Admin/SecondLooks): the form in the contact
   page's card, the person's own requests as a quiet list with our answer on cream, the admin queue as panels. */
.rp-card{margin-top:24px;max-width:40rem}
.rp-mine-h{margin-top:32px;font-size:var(--h3)}
.rp-mine,.rp-queue{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;max-width:var(--measure)}
.rp-mine li{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white)}
.rp-mine li p+p,.rp-queue li p+p{margin-top:6px}
.rp-reply{padding:10px 12px;border-radius:var(--r-sm);background:var(--ice);color:var(--ink)}
.rp-why{white-space:pre-line}
/* The six kinds of report as the head's picture (the design review): a tile each, our icon and three words, each to its form. */
.rp-tiles-pic{padding:24px}
.rp-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rp-tiles a{display:flex;align-items:center;gap:12px;min-height:64px;height:100%;padding:12px 16px;border-radius:18px;background:var(--white);color:var(--navy);font-weight:500;line-height:1.3;text-decoration:none;box-shadow:0 1px 3px rgba(13,44,84,.12)}
.rp-tiles a:hover{box-shadow:0 0 0 2px var(--navy)}
.rp-tiles svg{width:32px;height:32px;flex:none}
/* A second look: the words beside its three steps, on ice. */
.rp-again{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:20px 48px;align-items:start}
.rp-again>p{max-width:var(--measure)}
.rp-again-steps{padding:6px 20px;border-radius:18px;background:var(--ice)}
@media (max-width:900px){.rp-again{grid-template-columns:minmax(0,1fr)}}
/* Trilly for developers (package 10; Pages/Developers): the jump list under the answer, the connector's settings as an app shows
   them, the tools' names as code. */
.dv-jump{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.dv-jump a{color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:3px}
.dv-settings{margin:0;display:grid;gap:12px}
.dv-settings div{display:grid;gap:2px}
.dv-settings dt{font-size:var(--fs-small);color:var(--soft)}
.dv-settings dd{margin:0;color:var(--navy);overflow-wrap:anywhere}
.dv-tools{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tc-article code,.dv-settings code{font-size:.92em;overflow-wrap:anywhere}
.dv-groups{margin:12px 0 0;display:grid;gap:12px}
.dv-groups dt{font-size:var(--fs-small);color:var(--soft)}
.dv-groups dd{margin:0}
.dv-groups .dv-tools{margin-top:4px}
/* An address never breaks inside a word ("versions.xm" / "l"; the design review): its column is as wide as the longest. */
.dv-files div{grid-template-columns:minmax(0,19rem) minmax(0,1fr)}
.dv-files dt code{white-space:nowrap;overflow-wrap:normal}
@media (max-width:760px){.dv-jump{display:none}.dv-files div{grid-template-columns:minmax(0,1fr)}}
/* The design review of 25 Oct, shared: a list's first row never touches its heading; the head's words start level with its picture. */
.tc-part>.number-list{margin-top:20px}
.tc-head-grid.tc-head-top{align-items:start}
.tc-head-top .tc-pic{margin-top:8px}
/* The maker handbook (package 7; Pages/Learn/Makers): a live skill's test as the bar beside the head; the eight steps as
   numbered cards, the number in marigold, the step's icon, its pages as links. */
.mk-bar{margin:0;display:grid;gap:10px}
.mk-bar div{display:grid;gap:2px}
.mk-bar dt{font-size:var(--fs-small);color:var(--soft)}
.mk-bar dd{margin:0}
.mk-bar b{font-family:var(--display);font-weight:700;color:var(--navy)}
.mk-steps{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;gap:0 56px}
@media (min-width:1100px){.mk-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mk-step{display:grid;grid-template-columns:36px 32px minmax(0,1fr);gap:14px;align-items:start;padding:24px 0;border-top:1px solid var(--line);scroll-margin-top:96px}
.mk-step>svg{width:32px;height:32px}
/* BRAND.md: a step's number stands alone in navy, with no disc. */
.mk-n{margin:0;color:var(--navy);font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1.6}
.mk-step h2{font-size:var(--h3);margin:0}
.mk-step p{margin-top:6px;max-width:var(--measure)}
.mk-links{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
@media (max-width:560px){.mk-step{grid-template-columns:28px minmax(0,1fr)}.mk-step>svg{display:none}}
/* The maker earnings calculator (REMAINING 3.34, package 4; Pages/Shared/_EarningsCalculator, on /for-creators#earnings and
   /pricing#makers): the maker's choices in a quiet card beside what a sale leaves them, on cream, as the money band's figure was.
   One form style (.field, .choice), 1 px lines, the chosen choice on cream; stacked on phones, the result after the choices. */
.earn-lead{max-width:var(--measure);margin-top:16px}
.earn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27rem);gap:24px 40px;align-items:start;margin-top:28px;scroll-margin-top:96px}
.earn-in{display:grid;gap:20px;align-content:start;min-width:0;padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white)}
.earn-h{font-family:var(--display);font-weight:600;font-size:var(--h3);line-height:1.25;color:var(--navy)}
.earn-fields{display:grid;gap:20px}
.earn-in-fold .earn-fields{margin-top:16px}
.earn-fold>summary{font-family:var(--display);font-weight:600;font-size:var(--h3)}
.earn-fold[open] .earn{margin-top:16px}
.earn-in .field input{max-width:14rem}
.earn-set{border:0;margin:0;padding:0;min-width:0}
.earn-set legend{padding:0;margin-bottom:10px;font-weight:500;color:var(--navy)}
.earn-choices{display:flex;flex-wrap:wrap;gap:8px}
.earn-choices .choice{min-height:44px;background:var(--white);color:var(--navy)}
.earn-choices .choice:has(input:checked){border-color:var(--navy);background:var(--cream)}
.earn-choices .choice:has(input:focus-visible){outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}
.earn-rate{font-weight:500}
.earn-out{display:grid;gap:14px;align-content:start;min-width:0;padding:28px;border-radius:var(--r-lg);background:var(--cream);color:var(--navy)}
.earn-out[aria-busy=true]{opacity:.72}
.earn-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.earn-opens{font-weight:500}
.earn-problem{color:var(--bad)}
.earn-big{display:grid;gap:8px}
.earn-out .display-number{font-size:var(--h1-hero);white-space:normal;overflow-wrap:anywhere}   /* a figure of seven characters or more fits */
.earn-num{display:block;font-family:var(--display);font-weight:700;font-size:var(--fs-num);line-height:1.1;font-variant-numeric:tabular-nums}
.earn-lines{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.earn-lines div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.earn-lines dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.earn-month b{font-weight:600}
.earn-note{color:var(--soft)}
@media (max-width:900px){
  .earn{grid-template-columns:minmax(0,1fr)}
  .earn-out{order:-1}   /* the figure first on a phone, the choices folded under it (.phone-fold) */
}
/* Phones: the choices are a fold under the figure, so no card round them, and the figure's box is tighter (the phone budgets,
   FilmPagePhoneTests). */
@media (max-width:760px){
  .earn{margin-top:12px;gap:12px}
  .earn-in{padding:0;border:0;border-radius:0}
  .earn-out{padding:16px;gap:8px}
  .earn-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}   /* the figure and "you get from each sale" on one line where they fit */
  .earn-lines div{padding:5px 0}
}
/* Reading pages: the body at reading width, a part a section under its own heading, tables and the one fold. */
.tc-read{padding-bottom:clamp(56px,7vw,96px)}
.tc-read>section,.tc-read>.tc-pair>section{padding-top:clamp(64px,2rem + 4vw,104px)}
.tc-read>.tc-part:first-child{padding-top:clamp(32px,2rem + 1vw,48px)}
.tc-read>section>p{max-width:var(--measure)}
.tc-part>*+*{margin-top:16px}
.tc-article{padding-bottom:clamp(56px,7vw,96px)}
.tc-article>section{padding-top:clamp(64px,2rem + 4vw,104px)}
.tc-article>.tc-method{padding-top:clamp(32px,4vw,48px)}
.tc-article .maths pre{margin:0 18px 18px}
.tc-head-in{padding:clamp(24px,4vw,48px) 0 24px}
.tc-total-n{display:grid;gap:12px;justify-items:start;margin-top:20px}
.tc-total-k{font-size:var(--fs-body);line-height:1.5;color:var(--navy);max-width:var(--measure)}
/* /trust/how-we-test: the results wide enough for a date on one line, the words around them at reading width. */
.tc-article.tc-results{max-width:68rem}
.tc-results .proof-results{max-width:none}
.tc-results .proof-results>p{max-width:var(--measure)}
.tc-results>.steps,.tc-results>.tc-meta,.tc-results>.tc-back{max-width:var(--measure)}
.tc-back{margin-top:32px}
/* On a phone each tested skill is a row, not a tall card: its name, "Tested on" and the date on one line, then both results side by
   side, each labelled. */
@media (max-width:640px){
  .tc-results .proof-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:14px 0}
  .tc-results .proof-table tr+tr{margin-top:0}
  .tc-results .proof-table tr>:first-child,.tc-results .proof-table td:nth-child(2){grid-column:1/-1}
  .tc-results .proof-table td{border-top:0!important;padding:0!important}
  .tc-results .proof-table td::before{float:none;display:block;width:auto;margin:0 0 2px}
  .tc-results .proof-table td:nth-child(2)::before{display:inline;margin:0 6px 0 0}
}
/* /changelog: a day at a time, its date beside its change sets on a wide screen (and staying in view while they scroll by). */
.tc-read>.tc-day{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:8px 48px;align-items:start;max-width:62rem;padding-top:clamp(28px,2rem + 1vw,44px)}
.tc-day-h{font-size:var(--h3);line-height:1.3;position:sticky;top:96px;padding-top:14px}
.tc-article .number-list dt{font-family:var(--display);font-weight:700}
.tc-tally{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-width:60rem}
.tc-tally li{background:var(--white);padding:20px 20px 22px}
.tc-tally-h{margin:28px 0 0;font-size:var(--fs-small);font-weight:500;color:var(--navy)}
.tc-tally-h+.tc-tally{margin-top:10px}
.tc-tally b{display:block;font-family:var(--display);font-weight:700;font-size:var(--h2);line-height:1;font-variant-numeric:tabular-nums}
.tc-tally b.tc-nd{font-size:var(--h3);line-height:1.15}
.tc-tally span{display:block;margin-top:8px;color:var(--soft);font-size:var(--fs-small);line-height:1.4}
.tc-empty{display:flex;align-items:center;gap:16px;padding:24px;border:1px solid var(--line);border-radius:var(--r);max-width:var(--measure)}
.tc-empty svg{flex:none;width:44px;height:44px}
.tc-read>.tc-review{border-radius:var(--r-lg);margin-top:clamp(56px,2rem + 4vw,96px);padding-top:clamp(18px,3vw,28px)}
.tc-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
/* /contact: the form in its card, "Other ways to get help" beside it; who we are, every address one press away. */
.tc-contact{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px 64px;align-items:start}
.tc-form-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,36px)}
.tc-before h2{margin-bottom:4px}
.tc-more{padding-top:clamp(40px,5vw,64px)}
.tc-read>.tc-contact{padding-top:clamp(28px,3vw,40px)}
/* /status: the answer as the picture, our icon beside it. */
.tc-status{display:flex;align-items:center;gap:20px;max-width:var(--measure);margin-top:24px;padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-lg)}
.tc-status>svg{flex:none;width:56px;height:56px}
.tc-status .notice{margin-top:0;padding:0;background:none}
.tc-status .notice b{font-size:1.2em}
/* Status alerts (0284): an open incident under the answer, with a marigold edge (the words say where it stands, never the colour
   alone); the updates of a past or open incident as a plain numbered list. */
.st-open{max-width:var(--measure);margin-top:16px;padding:18px 24px;border:1px solid var(--line);border-left:4px solid var(--marigold);border-radius:var(--r-lg);background:var(--cream-soft)}
.st-open h2{margin:0}
.st-state{margin-top:8px}
.st-others{max-width:var(--measure);margin-top:16px}   /* notices past the two that show, under one fold (the status-lows review, M1) */
.st-when{white-space:nowrap}   /* a time never splits ("3:46 / am UTC"); the day before it may wrap (320 px, the r4 re-check's L2) */
.st-updates{margin:6px 0 0;padding-left:1.2em}
.st-updates li+li{margin-top:6px}
.st-day{display:block;margin-top:4px;font-family:var(--body);font-weight:400}   /* the history's day and time under what people saw (L3) */
/* "On this page" on /trust/security: a list first on a phone; from 1100 px a sticky column beside the text, as the legal pages have
   it (content.css lays out .toc and .toc-list). */
.tc-toc{align-self:start}
.tc-toc .toc-list{margin-inline:0;padding-inline:0}
/* A reading document (.tc-doc: the legal pages, a system pass, and /learn's guides): the v2 head, about 65 characters a line with the
   summary as wide, and the contents as Stripe has them: on a wide screen the title, date and summary as the document's head, then a
   column beside the text (content.css's sticky list, at the page's right edge, the part you're reading marked); a plain list under
   the summary on a phone. A guide's one picture follows its summary, in the text's column, the contents starting beside it on a
   wide screen (as a help article's picture sits, so the first screen is the head and the picture). The words are the database's. */
.tc-doc .article-head h1{max-width:18em}
.tc-doc .article .prose>*,.tc-doc .answer-box{max-width:39rem}
.tc-doc .toc-list,.tc-toc-scope .toc-list{scroll-target-group:auto}
.tc-doc .toc-list a:target-current,.tc-toc-scope .toc-list a:target-current{color:var(--navy);background:var(--mist)}
.tc-doc .article-pic{margin-top:28px;max-width:39rem}
.tc-doc .article-scene{display:block;width:100%;max-width:30rem;height:auto}
.tc-doc .article.has-toc>.answer-box:has(+.article-pic){margin-bottom:0}
/* Under a guide the stats picture keeps its tag; its note is the guide's own subject, said there. */
.tc-doc .article-pic .tc-pic-cap span{display:none}
/* The "Contents" button on a phone (/trust/security and the legal pages; content.css draws it): shown only once the list has
   scrolled away, never over the first screen, whether or not js/site.js runs. Not motion: the same with reduced motion. */
@keyframes tc-toc-off{from,to{visibility:hidden}}
@supports (timeline-scope:--tc-toc){
  .tc-doc .article,.tc-toc-scope{timeline-scope:--tc-toc}
  .tc-doc .toc,.tc-toc-scope .toc{view-timeline:--tc-toc}
  .tc-doc .toc-jump,.tc-toc-scope .toc-jump{animation:tc-toc-off linear backwards!important;animation-timeline:--tc-toc!important;animation-range:cover 0% cover 100%!important}
}
.tc-docs{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;max-width:var(--measure);border-top:1px solid var(--line)}
.tc-docs.tc-two{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;max-width:60rem}
.tc-docs li{border-bottom:1px solid var(--line)}
.tc-docs a{display:grid;grid-template-columns:32px minmax(0,1fr) 18px;gap:16px;align-items:center;padding:18px 4px;text-decoration:none;color:var(--ink)}
.tc-docs a>svg:first-child{width:32px;height:32px}
.tc-docs a>.ui-ico{width:18px;height:18px;color:var(--navy);transition:transform .15s}
.tc-docs a:hover>.ui-ico{transform:translateX(4px)}
.tc-docs a:hover b{text-decoration:underline;text-underline-offset:3px}
.tc-docs b{display:block;font-weight:500;color:var(--navy)}
.tc-who-runs{margin-top:32px}
/* /help-lines: each kind of help a row that jumps to its lines; the tables the wrap's full width, the words above them at reading
   width (the live design review, learn item 7: at 48rem, "When" wrapped to three or four lines). */
.tc-kinds{margin-bottom:4px}
.tc-kinds a{font-weight:500}
/* The error page (the mockups v2's notfound.html): the words on a cream field, the drawing beside them for a page that isn't there;
   without a drawing the field is only as wide as its words. */
.tc-lost{padding:clamp(16px,3vw,32px) 0 clamp(56px,7vw,96px)}
.tc-lost-field{display:grid;grid-template-columns:minmax(0,1fr);padding:clamp(32px,5vw,72px) clamp(20px,5vw,64px);border-radius:var(--r-panel);background:var(--cream);overflow:hidden}
.tc-lost-field:not(.tc-lost-art){max-width:44rem;margin-inline:auto}
.tc-lost-field.tc-lost-art{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px;align-items:end;padding-bottom:0;padding-right:0}
.tc-lost-art .tc-lost-copy{padding-bottom:clamp(32px,5vw,72px)}
.tc-lost-copy{max-width:36rem}
.tc-lost-k{color:var(--soft);font-size:var(--fs-small)}
.tc-lost h1{margin-top:10px}
.tc-lost .lead{color:var(--navy)}
.tc-lost .search{margin-top:24px;max-width:none}
.tc-lost .actions{margin-top:24px}
.tc-lost-copy>p:not(.lead):not(.tc-lost-k){max-width:var(--measure)}
.tc-lost-links{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px}
.tc-lost-links .link{display:inline-flex;align-items:center;min-height:44px}
.tc-lost-img{display:block;width:100%;height:auto;margin-bottom:-4px}
@media (min-width:1100px){
  .tc-toc-scope .tc-read{display:grid;grid-template-columns:minmax(0,44rem) 15rem;justify-content:space-between;column-gap:clamp(56px,6vw,112px);align-items:start}
  .tc-toc-scope .tc-read>*{grid-column:1}
  .tc-toc-scope .tc-read>.toc{grid-column:2;grid-row:1 / span 40;position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;margin-top:clamp(56px,2rem + 4vw,96px);padding-left:14px;border-left:1px solid var(--line)}
  .tc-doc .article.has-toc{grid-template-columns:minmax(0,39rem) 15rem;justify-content:space-between;column-gap:clamp(56px,6vw,112px);max-width:none}
  .tc-doc .article.has-toc>.answer-box{margin-bottom:clamp(48px,6vw,96px)}
  .tc-doc .article.has-toc>.toc{grid-row:3 / span 20;margin-top:24px}
  .tc-doc .article.has-toc:not(:has(>.answer-box))>.toc{grid-row:2 / span 20}
  /* A guide's contents start level with its title, so the right column isn't empty for the first screen (the live design review,
     learn item 4); the legal pages keep theirs under the summary. */
  .tc-doc.tc-learn .article.has-toc>.toc{grid-row:1 / span 20;margin-top:clamp(36px,5vw,64px)}
  .tc-doc .article.has-toc>.article-pic{margin-bottom:clamp(32px,4vw,64px)}
}
@media (max-width:1099px){
  .tc-doc .toc{margin-top:24px}
  .tc-doc .toc-list,.tc-toc .toc-list{display:grid;gap:0;overflow:visible;margin-inline:0;padding:0}
  .tc-doc .toc-list a,.tc-toc .toc-list a{display:flex;min-height:44px;padding:10px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;white-space:normal;font-size:var(--fs-body)}
  .tc-doc .toc-list a:target-current,.tc-toc-scope .toc-list a:target-current{background:none}
  .tc-learn .article{display:flex;flex-direction:column}
  .tc-learn .article-head{display:contents}
  .tc-learn .article-head>h1{padding-top:clamp(36px,5vw,64px);margin-bottom:24px}
  .tc-learn .article-head .fresh{order:1;margin:32px 0 clamp(36px,5vw,64px)}
}
/* ===== design sweep group F (the legal documents, the account steps, the error page) ===== */
/* A legal document (.tc-legal, Legal/Document.cshtml only): on a wide screen its contents start level with the title, so the first screen
   is the title, the date, the summary and the contents, with no empty half beside them (the first scores' legal pattern); on a phone
   the summary is slimmer, so "On this page" starts on the first screen; "More in legal" has the air of a section, not 10 px. The words
   are the database's. A table keyed by a name in code (the cookies) gets set columns at 900 px and up: every name but one fits its
   column on one line, the 38-letter TempData name wraps after its dots and between its words (CodeBreaks) instead of taking 360 px
   or breaking mid-word. Round 2 (the review's L3): the table is 45rem, past the text's 39rem into the space before the contents (a
   wide data table as wide reading pages draw one), so "How long" is 30% and its longest cell runs five lines, not seven; the name
   column (32%) still holds "__Host-trilly-map-look" on one line. */
@media (min-width:1100px){.tc-doc.tc-legal .article.has-toc>.toc{grid-row:1 / span 20;margin-top:clamp(36px,5vw,64px)}}
.tc-legal .article+.section-tight{padding-top:clamp(40px,5vw,64px)}
@media (min-width:900px){
  .tc-legal .prose table:has(td:first-child>code){table-layout:fixed;width:45rem;max-width:none}
  .tc-legal .prose table:has(td:first-child>code) th:first-child{width:32%}
  .tc-legal .prose table:has(td:first-child>code) th:last-child{width:30%}
  .tc-legal .prose td:first-child>code{white-space:normal}
}
@media (max-width:600px){.tc-legal .answer-box{padding:12px 14px 12px 16px;line-height:1.45}}
/* The error page on a phone: the three links sit on one row (the first scores, /error 404); its placeholder is short (ErrorModel). */
@media (max-width:600px){.tc-lost-links{column-gap:16px}}
/* /account-closed and /verify-email/sent: the error page's cream field, a glyph on a white disc (done, or the email), one line, then the
   facts as short rows with Trilly's glyphs, or the code box with "Can't see it?" folded under it on white. The address is a line of
   its own at the lead's size, breaking after its @ and dots (CodeBreaks.Address), anywhere only as a last resort. Round 2: the same
   field for a link that works on /verify-email, /reset-password and /unsubscribe; one that no longer works gets the 404 page's shape
   (.tc-lost-art and Shared/_LostArt). */
.tc-done-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--white);margin-bottom:20px}
.tc-done-mark svg{width:36px;height:36px}
.tc-done-rows{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.tc-done-rows li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;color:var(--navy)}
.tc-done-rows svg{width:28px;height:28px}
.tc-lost .tc-addr{margin-top:4px;font-size:var(--fs-lead);font-weight:600;line-height:1.4;color:var(--navy);overflow-wrap:anywhere}
.tc-code{display:grid;gap:10px}
/* The code box (the review's M1, then f2-auth's M1): wide enough for "1234 5678" at the h3 size (.input sets the body size after
   .email-code, which left 11 body-size characters, about six digits on show). It belongs to the box, not the page: the sent page
   and /login/code both have it. On a phone the box and its button each take the row, the code first. */
.input.email-code{width:calc(9ch + 1.1em + 32px);max-width:100%;font-size:var(--h3)}
@media (max-width:520px){.code-row>.email-code,.code-row>.btn{flex:1 1 100%}}
.tc-lost .faq details{background:var(--white)}
/* The sent page's "Log in" sits apart from the fold above it, not touching it. */
.tc-lost .faq+.form-foot{margin-top:20px}
/* ===== end design sweep group F ===== */
@media (max-width:1080px){
  .tc-hero-grid,.tc-head-grid,.tc-rcpt,.tc-split,.tc-contact{grid-template-columns:minmax(0,1fr)}
  .tc-checks,.tc-loop,.tc-promises{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tc-promises-sm{grid-template-columns:minmax(0,1fr)}
  .tc-loop li::after{display:none}
  .tc-receipt{justify-self:start}
  .tc-hero-scene{justify-self:start}
  .tc-lost-field.tc-lost-art{grid-template-columns:minmax(0,1fr);gap:8px}
  .tc-lost-art .tc-lost-copy{padding-bottom:0;padding-right:clamp(20px,5vw,64px)}
  .tc-lost-art .tc-lost-img{width:calc(100% + clamp(20px,5vw,64px));max-width:none;margin-left:calc(-1 * clamp(20px,5vw,64px))}
}
@media (max-width:760px){
  .tc-answers{margin-top:40px;padding-top:40px;border-top:1px solid var(--line)}   /* /about: Who answers apart from the card */
  .tc-wide{display:none}
  .tc-hero,.tc-head{padding-top:12px}
  .tc-hero:has(.tc-score){min-height:calc(100svh - 120px)}   /* /trust: the proof alone on the first screen, however many skills */
  .tc-hero .lead,.tc-head .lead{margin-top:14px}
  .tc-hero-scene{width:100%}
  .tc-score{padding:22px 18px;border-radius:var(--r);width:100%}
  .tc-matrix{gap:4px;width:100%}
  .tc-matrix span{flex:0 1 12px;width:auto;gap:4px}
  .tc-matrix i{width:100%;height:auto;aspect-ratio:1}
  .tc-sec-art{grid-template-columns:minmax(0,1fr)}
  .tc-pic-first>figure{order:-1}
  .tc-read>.tc-day{grid-template-columns:minmax(0,1fr)}
  .tc-day-h{position:static;padding-top:0}
  .tc-receipt{transform:none}
  .tc-paper{padding:18px 18px 10px}
  .tc-checks,.tc-loop,.tc-rows.tc-two,.tc-docs.tc-two,.tc-promises,.tc-why,.tc-pair{grid-template-columns:minmax(0,1fr)}
  .tc-checks{gap:12px}
  .tc-checks li{padding:18px;border-radius:var(--r)}
  .tc-promises>li{padding:22px;border-radius:var(--r)}
  .tc-packs ul{gap:10px}
  .tc-packs li{gap:14px;padding:14px 18px;border-radius:18px}
  .tc-packs li svg{width:32px;height:32px}
  .tc-tally{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tc-tally li:last-child:nth-child(odd){grid-column:1/-1}
  .tc-pic{padding:18px 14px;border-radius:var(--r)}
  .tc-pic .stats{grid-template-columns:minmax(0,1fr)}
  .tc-status{padding:16px 18px;gap:14px}
  .tc-status>svg{width:44px;height:44px}
  .st-open{padding:14px 18px}
  .tc-lost-field{border-radius:var(--r)}
}
@media (forced-colors:active){
  .tc-score,.tc-paper,.tc-checks li,.tc-loop li,.tc-promises>li,.tc-pic,.tc-lost-field{border:1px solid CanvasText}
}
/* ===== end calm batch G, the trust and company pages ===== */
/* ===== The design sweep, batch 2 (25 Oct): browse, search and the lists. One block, so the batches' merges don't collide. ===== */
/* The skill card's picture sizes to what it holds (design-b2 r2: a one-line example sat in a tall grey slab on /best/{area}, /explore, /new,
   /search and a task's list): its tint is the paper's frame, with a floor so a card with little still has a picture. An icon-only picture
   keeps its 16:10. The first-card crop that stood in for this on /best/{area} is gone. */
.br-short .card-paper .card-row:nth-child(n+3){display:none}   /* /best/[area] with nothing ranked: a phone's two rows at every width (the design-sweep-b review, M1) */
.br-fit .card-pic{aspect-ratio:auto;height:13rem}   /* one height a list, icon-only cards too, so a row's names start level (r3's M1); only the lists of batch 2 (br-fit) */
@media (max-width:760px){
  .br-fit .card-paper .card-row:nth-child(n+3){display:none}   /* on a phone a listed card's picture holds its key line and one row */
}
/* /what-trilly-does: each group's scene under its heading, and its fold of the rest under its first four things. */
.wtd-art{display:block;width:100%;max-width:340px;height:auto;margin-top:8px}
.wtd-more{margin-top:14px}
.wtd-more>summary{min-height:44px;font-weight:500;color:var(--navy)}
@media (max-width:760px){
  .wtd-art{max-width:260px}
}
/* A door with its example picture: a phone's first screen is the heading, its button and the picture (the review, M4); its line comes
   under the picture there (never gone: it can carry "not financial advice", r2's H1). */
.br-door-lead-narrow,.br-door-advice{display:none}
@media (max-width:760px){
  .br-door-lead{display:none}
  .br-door-advice{display:block;margin:12px 0 0;max-width:var(--measure);font-size:var(--fs-body);color:var(--ink)}   /* "General information, not financial advice." stays on the first phone screen, at body size (r3's M4, r4's M3) */
  .br-door-lead-narrow{display:block;margin-top:64px;max-width:var(--measure)}   /* the line comes after the first screen: the picture, its score and note are the first screen */
}
/* ===== end the design sweep, batch 2 ===== */

/* ================= Design batch 3 (the design sweep of 25 Oct: companies, apps and guides) ================= */
/* /help-lines: the emergency numbers as the head's card, four big call buttons, two a row on a phone. Each country sits over its
   button in a shared row (subgrid), so the buttons stay level when a name wraps ("United States and Canada"; the design review's L2). */
.hl-answer{max-width:none}   /* as wide as the row of kinds under it (the sweep E review, L1) */
.hl-emergency{margin:16px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hl-emergency div{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:6px;align-items:end}
.hl-emergency dt{font-size:var(--fs-body);color:var(--soft)}
.hl-emergency dd{margin:0}
@media (max-width:760px){.hl-emergency{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}}
.hl-emergency a.hl-call{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);font-family:var(--display);font-weight:700;font-size:var(--fs-num);line-height:1.1;color:var(--navy);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.hl-emergency a.hl-call:hover{border-color:var(--navy);box-shadow:0 12px 24px -16px rgba(13,44,84,.35)}
.hl-call-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--marigold);color:var(--navy)}
.hl-call-ic .ui-ico{width:18px;height:18px}
@media (max-width:400px){.hl-emergency a.hl-call{gap:10px;padding:10px 12px}.hl-call-ic{width:32px;height:32px}}
/* /learn: the head's picture leaves a phone's first screen. /link: "by Trilly" is the page's own to say once, on a wide screen. */
@media (max-width:760px){.ln-pic,.lk-by{display:none}}
.ww-link{max-width:var(--measure);font-size:var(--fs-body)}

/* ===== design-b6 (batch 6 of the design sweep, 25 Oct): the member's work page; the console's own rules are in consoles.css ===== */
/* What the organisation sees, one press under the person's own use line: a thumb-sized summary in the site's one fold sign. */
.ws-sees>summary{min-height:44px;color:var(--navy);font-weight:500}
/* A member's work pages title at the console's size (the design-b6 review, shared fix 1): their sections are 24 px, so a 72 px title shouted. */
.work-page h1:not(.h3){font-size:var(--h2)}
/* The work page's search: its button beside its field, the field taking the room. */
.ws-ask-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.ws-ask-row .field{flex:1 1 16rem;margin:0}
/* ===== end design-b6 ===== */

/* ===== design-b1 (batch 1 of the design sweep, 25 Oct: the skill page, its tabs, and the trust and legal pages at 9+) ===== */
/* /bot: the three things a site owner asks, as tiles that lead to their sections; the User-Agent wraps, so no box scrolls sideways. */
.bot-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:820px}
.bot-tiles a{display:grid;gap:2px;align-content:start;height:100%;padding:16px 18px;border-radius:var(--r);background:var(--white);border:1px solid var(--line);color:inherit;text-decoration:none;transition:border-color .15s}
.bot-tiles a:hover{border-color:var(--field)}
.bot-tiles span{font-size:var(--fs-small);color:var(--soft)}
.bot-tiles small{font-size:var(--fs-body);color:var(--soft)}
.bot-tiles b{font-family:var(--display);font-size:var(--h3);font-weight:700;line-height:1.25;color:var(--navy)}
@media (max-width:640px){.bot-tiles{grid-template-columns:minmax(0,1fr)}.bot-tiles small{display:none}}
.bot-page pre{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:visible}
.bot-page pre code{overflow-wrap:anywhere}
/* /licence (layout only): the check as one v2 panel with the seal at its side; what a licence means in one column under it. */
.licence-try{position:relative;background:var(--mist);border-radius:var(--r-lg);padding:clamp(20px,4vw,32px)}
.licence-try:has(.licence-try-seal){padding-right:clamp(20px,16vw,150px)}
.licence-try-seal{position:absolute;right:clamp(16px,3vw,32px);top:clamp(16px,3vw,28px);width:clamp(48px,9vw,96px);height:clamp(48px,9vw,96px)}
.licence-try-seal svg{width:100%;height:100%}
@media (max-width:520px){.licence-try:has(.licence-try-seal){padding-right:20px;padding-top:84px}.licence-try-seal{left:20px;right:auto;top:20px}}
.licence-more>*+*{margin-top:28px}
/* /licence's two parts fold under their headings on a phone (design-b4-9d r2), open from 901 px (.phone-fold). */
.licence-fold>summary .h3{margin:0}
@media (max-width:900px){.licence-more>.licence-fold+.licence-fold{margin-top:4px}}
.licence-page .licence-try+.licence-more{padding-top:clamp(56px,7vw,80px)}
/* /legal (layout only): the safety-check scene beside the head; on a phone a small picture above the list. */
@media (max-width:1080px){.legal-hub-art{max-width:26rem;justify-self:start}}
@media (max-width:760px){.legal-hub-art{max-height:150px;width:auto;max-width:100%}}
/* A skill tab on a phone: the way back ("‹ Invoice and Get Paid") already names the skill, so its name isn't said twice above the tabs. */
@media (max-width:600px){.sk-tabpage .hub-head .hub-name{display:none}}
/* A skill tab's side card (Questions' "Talk about it with others"): its heading at the cards' size, not the page's 50 px h2 (skill.css), and a
   gap above it where it starts under the tabs (the design-b1 review, M5). */
.skill-page .community-side h2{font-size:var(--h3)}
.skill-page .community-side{margin-top:16px}
/* ===== end design-b1 ===== */

/* ===== design batch 4: community and profiles (design-b4; the design sweep, 25 Oct 2026): /communities, /c/<community>, /community/levels,
   /creators, a maker's page, /requests, /challenges/<slug>, /feed. Only what these pages add: the shared v2 parts (.pg-head, .closing,
   .reveal) are as they are, and every page keeps its first phone screen to one idea. ===== */
.community-side .only-small{margin:0}
.community-skills-more{margin:16px 0 0}
/* A step's number is drawn from its data-n, not written as text. */
.level-n::before{content:attr(data-n)}
/* A level's points sit under its name, so the name and the number never wrap into each other. */
.level-row .meta{display:block}
/* A section whose heading is only for screen readers (the ladder) has no gap where it would have been. */
.pg-sec-head:has(>.vh:only-child){margin-bottom:0}
@media (max-width:600px){
  /* The head's own meta line (who looks after it, the counts) moves to the side column on a phone, under the head's one question. */
  .community-head .pg-meta:not(:has(a)){display:none}
  /* The feed's skill chips show the name; when it was last used is on a wider screen. */
  /* An empty community's skills are one row to swipe: the first card in view, the rest a swipe away. */
  .grid3.community-skills-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(16px,4vw,32px);scrollbar-width:none;margin-inline:calc(-1 * clamp(16px,4vw,32px));padding:2px clamp(16px,4vw,32px) 8px}
  .grid3.community-skills-row::-webkit-scrollbar{display:none}
  .grid3.community-skills-row>*{flex:0 0 84%;scroll-snap-align:start;min-width:0}
}
/* ===== end design batch 4 ===== */
.ln-docs .tc-docs.tc-two{max-width:none}
/* ===== design batches 1 and 6, round 2 (the design sweep, 26 Oct: both batches to 9+, #190) ===== */
/* A skill's tab pages (Questions, Changes, Results, Reviews, Report): the page title leads; the sections under it are the cards' size, and an
   empty state is a slim line with its drawing, not a slab. */
.sk-tabpage section h2:not(.h-page),.sk-tabpage aside h2:not(.h-page){font-size:var(--h3);font-weight:600;line-height:1.25}
@media (max-width:600px){.sk-tabpage .sk-lead-desk{display:none}}
.sk-tabpage .sk-empty{grid-template-columns:72px minmax(0,1fr);gap:20px}
.sk-tabpage .sk-empty-art{width:72px}
/* Reports on a phone: a person, a seat or a renewal is a name and a two-by-two of figures, not five rows (the design-b6 review, "still open"). */
@media (max-width:640px){
  /* Foot of the cell: a label on two lines doesn't push its value out of line with the one beside it. */
  .ws-table.ws-table-grid.stack-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;padding:12px 16px}
  .ws-table.ws-table-foot.stack-table tbody tr{align-items:end}
  .ws-table.ws-table-grid.stack-table tr>:first-child{grid-column:1/-1;padding:0 0 8px!important}
  .ws-table.ws-table-grid.stack-table td[data-label]{display:block;border-top:0!important;padding:6px 0!important;text-align:left!important}
  .ws-table.ws-table-grid.stack-table td[data-label]::before{display:block;float:none;width:auto;margin:0 0 2px}
}
/* Company sign-in: the form shows the protocol that is picked, one at a time (the design-b6 review, "still open"); without :has() both show. */
.sso-form:has(input[name="Protocol"][value="saml"]:checked) .sso-oidc,.sso-form:has(input[name="Protocol"][value="oidc"]:checked) .sso-saml{display:none}
.sso-oidc,.sso-saml{display:grid;gap:22px}
/* A file box on a phone takes the row and is smaller, so "No file chosen" isn't cut off (the design-b6 review, "still open"). */
.ws-air input[type=file]{display:block;width:100%;min-width:0;padding:8px 10px}
.ws-air input[type=file]::file-selector-button{margin-right:8px;padding:6px 12px;min-height:36px}
/* The trust pages' longer lists: the first two points, the rest one press away (the design-b1 review, "still open"). */
.tc-rest{margin-top:10px;max-width:var(--measure)}
.tc-rest>summary{font-weight:500;color:var(--navy)}
.tc-rest[open]>summary{margin-bottom:10px}
/* The trust pages and /bot: a section's heading is a step under the page's title, so the title leads (the design-b1 review, "still open"). */
.tc-read.tc-air section:not(.tc-review) h2,.bot-page .prose h2{font-size:var(--h3);line-height:1.2}
.bot-page .prose h2{margin-top:48px}
.tc-head.tc-air{padding-bottom:clamp(32px,6vw,56px)}
@media (max-width:760px){.tc-read.tc-air .review-list>div{padding:20px 0}.tc-read.tc-air>.tc-review{padding-top:28px}}
.console-head.console-head-biz{margin:24px 0 24px}
.ws-air .ws-head{margin:32px 0 36px}
.ws-air .ws-cols{gap:32px;margin-top:32px}
.ws-air .ws-stack{gap:32px}
.ws-air .ws-panel{padding:28px 30px}
/* /trust/security and /trust/ip on a phone or tablet: the summary card first, then the contents, then the sections (the design-b16-9 review, M3). */
@media (max-width:1099px){.tc-toc-scope .tc-read{display:flex;flex-direction:column}.tc-toc-scope .tc-read>*{order:3}.tc-toc-scope .tc-read>.tc-review{order:1}.tc-toc-scope .tc-read>.tc-toc{order:2;margin-top:24px}}
/* On a phone the answer comes first on /trust/security and /trust/ip: the card under the title, no lead between (the design-b16-9 review, N2). */
@media (max-width:760px){.tc-toc-scope .tc-head .lead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}}
/* The summary card on the trust pages: its title is a section title (not larger than the others) and it sits nearer the lead (the design-b16-9 review, L8 and N4). */
.tc-read.tc-air>.tc-review{margin-top:clamp(24px,1rem + 3vw,48px)}
.tc-read.tc-air .tc-review h2{font-size:var(--h3);line-height:1.2}
/* ===== end design batches 1 and 6, round 2 ===== */
/* ===== design-b16-9b (the design-b16-lows review of 27 Oct) ===== */
/* /trust/security and /trust/ip: the card holds three answers and "More answers" opens the rest, so the first screen is the title and the answers
   (M1); the gap under the lead is about 80 px at 1440, not 105 (N4). */
.tc-review>.tc-rest{margin-top:16px}
@media (min-width:761px){.tc-toc-scope .tc-head.tc-air{padding-bottom:32px}}
/* Company sign-in: a row with a menu in it is one column, so the menu's words aren't cut (L3). */
.sso-form .field-row:has(select){grid-template-columns:minmax(0,1fr)}
/* ===== end design-b16-9b ===== */
/* ===== design batch 3c ===== */
/* The guide pages' "Three ways" heading reads as a section heading (.article h2 beat .h-sm; the design review of 26 Oct, M2). */
.article .two-ways h2.h-sm{font-size:var(--h3)}
/* On a phone the date line keeps the date and the link; whom it was checked against stays in the page for everyone else. */
@media (max-width:600px){.ww-against,.ww-then{display:none}.article .two-ways.mt-3{margin-top:56px!important}}
/* ===== end design batch 3c ===== */

/* ===== the design sweep, batch 5: a member's and a maker's own pages (design-b5, 25 Oct 2026) ===== */
/* The studio's menu: its groups' names for screen readers only (the links say it); a line between the groups on a wide screen. */
.st-nav .ws-nav-label{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (min-width:1024px){.st-nav .ws-nav-group+.ws-nav-group{margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}}
/* ===== end the design sweep, batch 5 ===== */

/* ===== global-lows ===== */
/* /region: both choices are selects, so the whole form with Save is on the first screen; the language line sits under Save. */
.rg-form .field select{width:100%}
/* /learn/makers: the track uses the page's full width; a link keeps its arrow on its last word. */
.mk-page.article{max-width:none}
.mk-links .go{display:inline;min-height:0;padding:10px 0}
.mk-links .go .ui-ico{display:inline-block;vertical-align:-3px;margin-left:6px}
/* /developers: the rest of the page is one fold. */
.dv-more{margin-top:clamp(32px,2rem + 2vw,56px);border-top:1px solid var(--line)}
.dv-more>summary{min-height:56px;font-family:var(--display);font-size:var(--h3);font-weight:600;color:var(--navy)}
.dv-more[open]>summary{margin-bottom:8px}
/* /in and /in/<country>: three worldwide cards on a phone (the link under them shows the rest); the four facts fold; two countries a row. */
@media (max-width:760px){.in-ww>*:nth-child(n+4){display:none}}
@media (max-width:900px){.in-today-h{display:none}}
@media (max-width:900px){.in-today{margin:0}}   /* only where its heading is hidden (global-lows review M1) */
@media (max-width:560px){.in-countries a{padding:16px}}
.mk-page .mk-steps{margin-top:clamp(24px,3vw,40px)}
/* ===== end global-lows ===== */
/* ===== global-lows-2 ===== */
/* A country's own search word typed in, and the skill a real search puts first. */
.in-find{display:grid;gap:10px;max-width:22rem;margin-bottom:20px}
.in-find-box{display:flex;align-items:center;gap:12px;margin:0;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--navy);font-weight:500;text-decoration:none}
.in-find-box:hover{border-color:var(--navy)}
.in-find-box svg{width:22px;height:22px;flex:none}
/* The hub's country names wrap to two lines on a phone: the numbers still start level. */
@media (max-width:560px){.in-countries b{line-height:1.3;min-height:2.6em}}
/* ===== end global-lows-2 ===== */

/* ===== Film loops (#228, #232; Pages/Shared/_FilmLoop and _FilmChapters, js/film.js): a Remotion render in a mist mat (24 px) inside a
   white card (24 px corners, console-film-v2-brief.md's e2 shadow), and its chapter buttons in monday.com's tab layout: only the one
   showing says its line, which fills over its chapter, in the room of the longest line (film.js, --film-line). Up to 1023 px the
   4:5 cut. ===== */
.film-card{position:relative;margin:0;padding:12px;border-radius:24px;background:var(--white);box-shadow:0 1px 1px rgba(13,44,84,.05),0 2px 2px rgba(13,44,84,.05),0 4px 4px rgba(13,44,84,.05),0 8px 8px rgba(13,44,84,.05),0 16px 16px rgba(13,44,84,.05),0 32px 48px -8px rgba(13,44,84,.12)}
.film-mat{position:relative;padding:24px;border-radius:16px;background:var(--mist)}
.film-frame{position:relative;border-radius:10px;overflow:hidden;background:var(--mist)}
.film-video{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:16/9;background:transparent;object-fit:cover}
.film-poster{position:absolute;inset:0;z-index:0}
.film-poster img{display:block;width:100%;height:100%;object-fit:cover}
/* The film's own control (WCAG 2.2.2; the lead's ruling on the film-v2 review, H1): pause, play, play again, on the film's corner. */
.film-ctl{position:absolute;left:16px;bottom:16px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--white);color:var(--navy);cursor:pointer;box-shadow:0 1px 1px rgba(13,44,84,.08),0 2px 2px rgba(13,44,84,.08),0 4px 8px rgba(13,44,84,.12)}
.film-ctl:hover{background:var(--cream)}
.film-ctl:focus-visible{outline:var(--ring-line);box-shadow:var(--ring)}
.film-ctl[hidden],.film-ctl-ic[hidden]{display:none}
.film-ctl-ic{display:inline-grid}
.film-ctl .ui-ico{width:16px;height:16px}
/* Nothing is drawn on a playing film (Eddie's #226; the film-v2 r2 review, H1): a tap or click on the film pauses it and plays it
   again (js/film.js), and the control stays for the keyboard and screen readers, drawn only when focused. Paused or resting, it shows. */
.film-card[data-film-state="playing"] .film-ctl:not(:focus-visible){opacity:0}
.film-card[data-film-state] .film-frame{cursor:pointer}
.film-tab:disabled{cursor:default}
.film-ch{display:grid;gap:4px;width:100%;margin:0;padding:0;list-style:none}
.film-tab{position:relative;display:grid;gap:2px;width:100%;min-height:44px;padding:10px 16px;overflow:hidden;border:0;border-radius:14px;background:transparent;color:var(--soft);font:inherit;text-align:left;cursor:pointer;transition:background-color .25s,color .25s,box-shadow .25s}
.film-tab:hover{color:var(--navy)}
.film-tab:focus-visible{outline:var(--ring-line);box-shadow:var(--ring)}
.film-tab[aria-pressed="true"]{background:var(--white);color:var(--navy);box-shadow:0 1px 1px rgba(13,44,84,.05),0 2px 2px rgba(13,44,84,.05),0 4px 4px rgba(13,44,84,.05)}
.film-tab-name{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600}
.film-tab-line{display:none;font-size:var(--fs-small);color:var(--soft)}
.film-tab[aria-pressed="true"] .film-tab-line{display:block;min-height:var(--film-line,3.2em)}   /* two lines until film.js measures (r3, L4) */
.film-ch.film-measure .film-tab-line{display:block;min-height:0}
.film-tab-fill{position:absolute;left:16px;right:16px;bottom:0;height:3px;border-radius:3px;background:var(--marigold);transform:scaleX(0);transform-origin:left center}
.film-soon{padding:2px 9px;border-radius:999px;background:var(--cream);color:var(--warn);font-family:var(--body);font-size:var(--fs-small);font-weight:500}   /* a label, never bold body text (#176) */
/* The 4:5 cut up to 1023 px (film.js and the poster's source say the same; builder-film's L4 and the r2 review's M2: the wide cut's
   words drew under 12 px there). From 561 px its card keeps a large phone's width (536 px), centred, never the 4:5 cut 900 px tall
   (the r3 review, L5). */
@media (max-width:1023px){
  .film-video{aspect-ratio:4/5}
}
/* A tall film (FilmLoopView.Tall; #235, A2): the 4:5 cut at every width, in a card at most 440 px wide and on the left at every width,
   for a slot too narrow for the wide cut's words (a learn guide's picture): its smallest words 14 px at 440 px. Two classes, so the
   tablet rule below (one class, later) never widens or centres it (the gpt-guide-film review, M1: 536 px and centred at 561 to 1023). */
.film-card.film-tall{max-width:440px;margin-inline:0}
.film-tall .film-video{aspect-ratio:4/5}
/* A phone (to 560 px): the tall card is its column's width with no padding inside, so its frame lines up with the text at the page's
   full 16 px gutter (the gpt-guide-film-3 review: 8 px from the edge was half a gutter), at most 416 px, the frame it has from 561 px
   (a 440 px card, card and mat 6 px each), so it never jumps there: 343 px at 375, 328 at 360 and 310 at 342, its smallest words
   13.3, 12.8 and 12.1 px. Below 342 px the column is under 310, so only there the frame is pinned at 310 px and centred on the column
   (12.1 px words; into each gutter by 11 px at 320, by under 1 at 341, so a smaller phone never gets a bigger film; the gpt-guide-film-3
   r2 review, L1). 320 px is the floor: under it the words would drop under 12 px, and the page's header overflows there anyway.
   The column's 100%, never 100vw, which counts a scrollbar. */
@media (max-width:560px){
  .film-card.film-tall{max-width:416px;padding:0;border-radius:16px}
  .film-tall .film-mat{padding:0}
}
@media (max-width:341px){
  .film-card.film-tall{width:310px;max-width:none;margin-inline:calc((100% - 310px)/2) 0}
}
@media (min-width:561px) and (max-width:1023px){
  .film-card{width:100%;max-width:536px;margin-inline:auto}
}
@media (max-width:760px){
  .film-card{padding:6px}
  .film-mat{padding:6px}   /* the frame as wide as a phone allows: the 4:5 cut's smallest words 12 px from 360 px up (M2) */
  .film-ctl{left:10px;bottom:10px}
  .film-tab{padding:8px 12px}
}
@media (forced-colors:active){
  .film-tab[aria-pressed="true"],.film-soon,.film-ctl{border:1px solid CanvasText}
}
/* ===== end film loops ===== */
/* ===== design batch 4, round 2 (design-b4-9; the 9+ bar, 26 Oct 2026): /c/<community>, /feed, /creators, /community/levels, /communities,
   /requests, a result's page, a challenge, a new thread. Only what these pages add. ===== */
/* A community: its own mark beside its name, column headings at the --h3 size, and its skills across the full width under the page
   (a phone: after the threads, before the side column). */
.community-title{display:flex;align-items:center;gap:16px}
.community-title h1{margin:0}
.community-mark{width:64px;height:64px;border-radius:20px;flex:none}
.community-mark svg{width:40px;height:40px}
.community-head~.community-layout .head-row h2,.community-skills-head h2{font-size:var(--h3)}
.community-skills{grid-column:1/-1;min-width:0;margin-top:-16px}
@media (min-width:901px){.community-layout:has(>.community-skills){row-gap:0}}   /* two columns only: on a phone the skills keep their gap above "Live this week" (design-b4-lows review, M1) */
.community-skills-head{margin-bottom:16px}
@media (min-width:901px){
  .community-layout>.community-side{grid-column:2;grid-row:1}
  .community-layout>.community-skills{grid-row:2}
}
@media (max-width:600px){.community-mark{width:48px;height:48px;border-radius:16px}.community-mark svg{width:30px;height:30px}}
/* The feed's composer is one slim bar on every screen: "What did your AI do for you this week?" opens the form. */
@media (min-width:901px){
  @supports selector(::details-content){
    .phone-fold.rc-slim:not([open])::details-content{content-visibility:hidden}
    .phone-fold.rc-slim>summary{cursor:pointer;pointer-events:auto}
    .phone-fold.rc-slim.disclose>summary::after{display:block}
  }
}
.phone-fold.rc-slim>summary{justify-content:space-between}
.phone-fold.rc-slim .result-composer-h{margin:0}
/* /creators with a few makers: the card, then the invitation under it across the width (a half-empty column beside one card left 500 px of white). */
.split-2.makers-few{grid-template-columns:minmax(0,1fr)}
@media (min-width:901px){
  .makers-few .makers-invite{grid-template-columns:minmax(0,22rem) minmax(0,1fr);column-gap:clamp(24px,4vw,48px);align-items:center}
  .makers-few .makers-invite-art{grid-column:1;grid-row:1/span 3;margin:0}
  .makers-few .makers-invite>.makers-invite-copy{grid-column:2;grid-row:1/span 3;align-self:center}
}
/* /requests: the form starts under a shorter picture. */
.req-page .pg-head{padding-bottom:0}
.req-page .req-art{max-height:240px}
.req-page .co-ask{margin-top:16px}
/* /community/levels: badges as one grid of equal cards, the point rules as a short list, the FAQ across the width. */
.badge-strip-all{display:grid;gap:12px}
@media (min-width:901px){.badge-strip-all{grid-template-columns:repeat(3,minmax(0,1fr))}}
.badge-strip-all .badge-card{flex:none;height:100%}
@media (min-width:601px) and (max-width:900px){.badge-strip-all{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.points-tiles{grid-template-columns:minmax(0,1fr)}}   /* a tile's words get the width, not seven lines */
.level-perks-note{margin:12px 0 0;color:var(--soft)}
.points-fold{margin-top:8px;max-width:var(--measure)}
.levels-faq .faq{max-width:none}
.levels-faq .faq details p,.community-how .ticks{max-width:var(--measure)}
/* A result's page: the skill's header is one row (the name, the price, the button) so the post starts near the top. */
@media (min-width:761px){
  .result-wrap>.hub-head{grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center;padding:8px 0}
  .result-wrap>.hub-head .hub-apps,.result-wrap>.hub-head .hub-social{display:none}
  .result-wrap>.hub-head .hub-promise{grid-column:1;grid-row:2;margin:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .result-wrap>.hub-head .skill-title{grid-column:1;grid-row:1}
  .result-wrap>.hub-head .hub-primary{grid-column:2;grid-row:1/span 2}
  .result-wrap>.hub-head~.result-page .result-try:not(.result-try-own){display:none}   /* the header's button is the way in; the rail doesn't say it again (unless the skill is already in the viewer's AI) */
}
/* A challenge: its host on the date's line from a tablet up, under the entries on a phone; the first result right under the head, a title that fits
   one line on a wide screen and the no-prizes note clear of the card (design-sweep-d4, the 30 Oct first scores: the first result started at y 667). */
.host-head{display:none}
.challenge-entries{padding-top:clamp(20px,3vw,28px)}
.challenge-note{margin-top:8px}
@media (min-width:601px){.host-head{display:inline}.host-foot{display:none}.challenge-note{margin-top:28px}}
@media (min-width:901px){.challenge-head h1{font-size:var(--h2);max-width:none}}
/* A new thread's kinds: the chosen chip filled navy at every width (the radio stays for a keyboard and a screen reader, at 1 px). From 601 px
   the form takes the page's column, so the five sit on one row from about 720 px (they wrapped 3 + 2 in a 560 px form: design-b4-9d). On a
   phone they sit two across, so the title shows without scrolling; their words wrap inside the chip, never out of it. */
@media (min-width:601px){.form.thread-form{max-width:none}}
.kind-picker .choice{justify-content:center;text-align:center}
@supports selector(:has(*)){
  .kind-picker .choice{position:relative}
  .kind-picker .choice input{position:absolute;opacity:0;width:1px;height:1px}
  .kind-picker .choice:has(input:checked){background:var(--navy);border-color:var(--navy);color:var(--white)}
  .kind-picker .choice:has(input:focus-visible){outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}
  @media (forced-colors:active){ .kind-picker .choice:has(input:checked){outline:2px solid Highlight;outline-offset:2px} }   /* the fill is dropped and the radio hidden (review L3) */
}
@media (max-width:600px){
  .kind-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .kind-picker .choice{min-width:0;padding:10px 12px;border-radius:18px;line-height:1.25}
  .kind-picker .choice:last-child:nth-child(odd){grid-column:1/-1}   /* an odd last kind takes the row ("Problem with a skill" took two lines in half of it: r2) */
}
/* The replies and comments counts head a column of cards, not a section: the --h3 size. */
#comments-h.h-md,#replies.h-sm{font-size:var(--fs-body);font-weight:600}   /* one small heading over a column of cards: a thread's replies, a post's comments (design-b4-9c review, L5) */
/* A maker's few facts stay tile-sized instead of one tile across the whole page. */
.profile-head~.stats{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
@media (max-width:760px){.profile-head~.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.h-md#popular{font-size:var(--h3)}

/* /requests with nothing on the board: the form beside the drawing, in the head's column. */
.req-ask-head{max-width:34rem}
/* A result's page: the last crumb is the post's own title, which the heading under it says (the page's first screen was 159 words). */
.result-wrap .crumbs li[aria-current]{display:none}
/* A running challenge's phone drops its kicker: the "Until" line under the title says it is on. */
.challenge-kicker .kick-short{display:none}
.challenge-more{margin-top:8px}   /* a long lead's rest (ChallengeRules.Lead): folded on a phone, open from 901 px */
.challenge-more>.lead{margin-top:0}
@media (max-width:600px){.challenge-kicker .kick-long{display:none}.challenge-kicker .kick-short{display:inline}.proof-real,.when-wide{display:none}}
/* A result's ask card keeps its heading and button; the service sentence is on the Questions tab. */
.result-ask .ask-line{display:none}
/* Levels: the long lists fold on a phone (site.css .phone-fold); their summaries say what is inside. */
.level-fold>summary{min-height:48px}
/* ===== end design batch 4, round 2 ===== */

/* ===== global-markets-3 ===== */
/* /explore/a-z: the letters with their counts, and a letter's plain list of names. */
.az-letters{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.az-letters a{display:grid;justify-items:center;min-width:48px;min-height:48px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--navy);text-decoration:none}
.az-letters a:hover,.az-letters a[aria-current]{border-color:var(--navy)}
.az-letters b{font-family:var(--display);font-weight:700}
.az-head{padding-bottom:clamp(24px,3vw,48px)}
.az-article{max-width:none}
.az-all{align-items:stretch}
.az-cell{min-width:0;scroll-margin-top:96px}
.az-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.az-row{display:grid;align-content:start;gap:2px;padding:12px 0;border-top:1px solid var(--line);scroll-margin-top:96px}
.az-row-name{font-weight:500;color:var(--navy)}
.az-row-by,.az-row-meta{color:var(--soft);font-size:var(--fs-small)}
.az-row-meta{display:flex;flex-wrap:wrap;gap:4px 14px}
.az-row-meta svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
@media (max-width:900px){.az-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.az-rows{grid-template-columns:minmax(0,1fr)}}
.az-cell>.card{height:100%}
@media (max-width:600px){.az-letters a{min-width:44px}}
.az-map{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:4px 24px}
.az-map a{display:inline-flex;align-items:center;min-height:44px;color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:3px}
/* /live: each hour with its Remind me. */
.lv-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lv-card{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.lv-date{display:grid;justify-items:center;align-content:center;gap:2px;min-height:64px;margin:0;border-radius:14px;background:var(--ice);color:var(--navy);text-align:center}
.lv-date b{font-family:var(--display);font-weight:700}
.lv-date span{font-size:var(--fs-small);text-align:center;line-height:1.2}
.lv-main{display:grid;gap:2px;min-width:0}
.lv-main a{color:var(--navy)}
.lv-kind{justify-self:start;padding:1px 10px;border-radius:999px;background:var(--marigold);color:var(--navy);font-size:var(--fs-small)}
@media (max-width:600px){.lv-card{grid-template-columns:64px minmax(0,1fr);padding:16px}.lv-card>form,.lv-card>.badge{grid-column:1/-1}.lv-in{display:none}}
/* ===== end global-markets-3 ===== */
/* ===== design-global-9 (the A to Z, /live, /sitemap and /app to 9+) ===== */
.lv-login{margin:0 0 16px}
.lv-login a{white-space:nowrap}   /* "Log in" stays on one line: split across two it measured as 2.5 px text at 360 px (the pre-check) */
/* The hours sit under the head with the air of a small gap, not a part's 64 to 104 px, which left a void under a title with its lead hidden
   (the global-9 review, L4). */
.tc-article>.lv-hours{padding-top:clamp(24px,3vw,40px)}
.lv-zone{display:none}
.lv-staff{color:var(--navy)}
/* The empty /live is a box, not a part: it gets the air a part has under its heading (the global-9 review, M2). */
.tc-article>.pg-empty{margin-top:clamp(32px,4vw,56px)}
.lv-line{display:flex;align-items:center;gap:8px;min-width:0}
.lv-line>span:last-child{min-width:0}
.lv-av.avatar{width:24px;height:24px;font-size:.8rem}
/* A phone's first screen within the card directory's 60/65 words (the pre-check): /live's line goes (the heading says it), as does each row's
   converted time (the tile has the time and its zone, and a screen reader hears the whole time in the line's .vh;
   all are on a tablet and up; the kind chip is drawn at every width when the title does not already start with it; "Hosted by" is read aloud, the avatar and the name say it), its rows a little roomier; "from the Trilly team" stays (a staff host is never passed off as a member:
   the global-9 review, M3); the A to Z's "and more" and each row's @handle go (the row still names its maker) and its rows are roomier to touch. */
@media (max-width:600px){.lv-lead,.lv-when,.lv-hosted{display:none}.lv-zone{display:inline}.lv-list{gap:16px}.az-more,.az-row .card-handle{display:none}.az-row{padding:24px 0}}
.sm-article{max-width:none}
/* The groups pack into columns by height (four at 1440, so "Around the world" doesn't sit alone in a third row); a phone's lists are two a row
   (the global-9 review, L3). */
.sm-groups{columns:15rem;column-gap:32px;padding-top:clamp(32px,4vw,56px)}
.sm-group{break-inside:avoid;margin-bottom:40px}
.sm-group h2{font-size:var(--h3);line-height:1.2}
.sm-group .az-map{grid-template-columns:minmax(0,1fr)}
@media (max-width:600px){.sm-groups{columns:1}.sm-group .az-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}}
/* /app: the scene is centred under the answer while the head is one column, and sits at the right beside it from 1081 px (the global-9 review, L6b). */
.app-scene{justify-self:center;width:min(100%,26rem);height:auto}
@media (min-width:1081px){.app-scene{justify-self:end}}   /* the head is one column until 1080 px (the global-9d review, M1) */
/* ===== end design-global-9 ===== */
/* ===== design-b3-9 (batch 3 to 9+) ===== */
/* A company's AI pages (/companies/<slug>/ai, /claude, /alternatives ...): the head is the answer beside what Trilly checked, section
   headings read as sections (the design review of 25 Oct: the h2s were nearly the h1's size), and each part comes in (.reveal). */
.co-ih{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:32px 64px;align-items:start;padding:clamp(8px,2vw,24px) 0 clamp(16px,3vw,32px)}
.co-ih-main .answer-box{max-width:42rem}
.co-ih-pic{margin:0}
/* The connector picture on a company's /claude and /chatgpt pages sits at the top of its column beside the answer (design-sweep-d review, M1). */
.co-conn-pic{align-self:start}
.co-ready-list{list-style:none;margin:0;padding:0;display:grid}
.co-ready-list li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);color:var(--soft)}
.co-ready-list li.is-found{color:var(--navy)}
.co-ready-list svg{width:16px;height:16px}
.co-ready-list li.is-found svg{color:var(--navy)}
.co-ready-list b{font-weight:500;font-size:var(--fs-small)}
@media (min-width:901px){.article.co-intent h2,.co-intent~.link-mesh>h2{font-size:var(--h3)}}
/* No picture (the readiness card, or an app page's connector form) on a page without one: the answer takes the head's width. */
.co-ih:not(:has(.co-ih-pic)){grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){.co-ih{grid-template-columns:minmax(0,1fr);padding-bottom:32px}.co-ih-pic{display:none}}
/* An app page's picture (design-sweep-d): the connector the steps add, as two filled fields and the app's button, drawn (tagged Example). */
.co-conn-form{display:grid;gap:12px;margin:0}
.co-conn-form dt{font-size:var(--fs-small);font-weight:500;color:var(--soft)}
.co-conn-form dd{margin:4px 0 0;border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--navy);overflow-wrap:anywhere}
/* The connector steps drawn (design-sweep-d2, the design-sweep-d review's M2): a small picture in each step the words draw, under the words on a
   phone and beside them from 901 px, where the list takes the column's width so the pictures fill the side the text lists left empty. */
ol.steps:has(>li.has-pic){max-width:54rem}
ol.steps>li.has-pic{display:grid;grid-template-columns:minmax(0,1fr);gap:0 28px}
.step-pic{margin:12px 0 0;padding:12px;border-radius:16px;background:var(--ice);max-width:20rem}
.step-pic-cap{margin-bottom:8px}
.step-pic-card{background:var(--white);border-radius:12px;padding:12px 14px;box-shadow:0 1px 3px rgba(13,44,84,.12),0 18px 36px -28px rgba(13,44,84,.34)}
.step-pic-card .co-conn-form{gap:8px}
.step-pic .step-pic-head+.co-conn-form{margin-top:10px}
.step-pic .step-pic-head{margin:0;font-weight:600;color:var(--navy);font-size:var(--fs-small)}
/* Scoped under .step-pic: the steps' own rules for a p or a ul inside a step (ol.steps>li p, ol.steps ul) would win otherwise. */
.step-pic .step-pic-menu{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}
.step-pic .step-pic-menu li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 10px;border-radius:8px;color:var(--soft);font-size:var(--fs-small)}
.step-pic .step-pic-menu li.is-on{background:var(--ice);color:var(--navy);font-weight:600}
.step-pic .step-pic-menu li.step-pic-sub{color:var(--navy);font-weight:600}
.step-pic .step-pic-pop{border:1px solid var(--line);border-radius:12px;padding:4px}
.step-pic-btn{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border:1px solid var(--line);border-radius:999px;color:var(--navy);font-weight:600;font-size:var(--fs-small)}
.step-pic-plus{display:inline-grid;place-items:center;width:32px;height:32px;margin-top:10px;border:1px solid var(--line);border-radius:50%;color:var(--navy);font-weight:600}
.step-pic-toggle{position:relative;flex:none;width:30px;height:18px;border-radius:999px;background:var(--navy)}
.step-pic-toggle::after{content:"";position:absolute;top:3px;right:3px;width:12px;height:12px;border-radius:50%;background:var(--white)}
.step-pic .step-pic-path{margin:0;font-size:var(--fs-small);color:var(--soft)}
.step-pic .step-pic-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--ice);color:var(--navy);font-weight:600;font-size:var(--fs-small)}
.step-pic-box{display:flex;align-items:flex-end;min-height:64px;padding:10px;border:1px solid var(--line);border-radius:14px}
.step-pic-chip{display:inline-flex;padding:4px 10px;border-radius:999px;background:var(--ice);color:var(--navy);font-weight:600;font-size:var(--fs-small)}
@media (min-width:901px){
  ol.steps>li.has-pic{grid-template-columns:minmax(0,1fr) 17rem;grid-template-rows:auto 1fr}   /* the title keeps its height; the words sit under it */
  ol.steps>li.has-pic>.step-pic{grid-column:2;grid-row:1 / span 2;margin:0;align-self:start}
  ol.steps>li.has-pic>p{align-self:start}
}
/* The skill steps under the connector steps (design-sweep-d2): one fold with their heading, so the page is one list; an h2's weight, not the fold title's. */
.co-alt-steps>summary>h2{margin:0;font-weight:600}
/* An app's guide (/works-with/<app>): the answer beside the guide's own steps as a picture; the heading under "Related guides" gets its room. */
.gd-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:24px 56px;align-items:start;padding-bottom:clamp(16px,3vw,48px)}
.gd-head-main{max-width:46rem}
.gd-pic{margin:clamp(8px,2vw,24px) 0 0}
.gd-steps{list-style:none;margin:0;padding:0;counter-reset:gd;display:grid}
.gd-steps li{counter-increment:gd;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.gd-steps li:first-child{border-top:0}
.gd-steps li::before{content:counter(gd);font-family:var(--display);font-weight:700;color:var(--navy)}
.gd-steps a{color:var(--navy);text-decoration:none;font-weight:500}
.gd-steps a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.gd-tested{margin-top:clamp(32px,4vw,56px)}
/* A guide that is only a picture and its steps (Microsoft Copilot): the drawing of a skill's text pasted into a chat under the answer, where the head had
   about 170 px of nothing at 1440. */
.gd-demo{margin:clamp(20px,2.5vw,32px) 0 0;max-width:28rem}
.gd-demo img{display:block;width:100%;height:auto}
/* A guide only has nothing between its head and its steps, and no skills block under its questions: the head's own space is the gap (not 64 px more of
   the steps' padding, 175 px in all at 1440), and the questions get room above them (the copilot-guide-2 review, M1 and M2). */
@media (min-width:901px){.gd-solo>.section-tight:first-child{padding-top:0}}   /* a phone and a tablet keep the steps' own gap (58 px, not 23) */
.gd-solo{padding-bottom:clamp(36px,5vw,64px)}
.gd-demo figcaption{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:8px;color:var(--soft);font-size:var(--fs-small)}
/* On a phone the steps are a rail of numbered stops, each opening its step: a small picture, no extra words. A guide of four steps or fewer says
   each stop's name under its number (a rail of bare circles said nothing: the copilot-guide review, d). */
@media (max-width:900px){
  .gd-head{grid-template-columns:minmax(0,1fr)}
  .gd-pic{margin:0;padding:12px 14px;border-radius:var(--r)}
  .gd-pic .gd-cap{margin-bottom:8px}
  .gd-pic .rk-cap{display:none}
  .gd-pic .tc-pic-card{padding:10px 12px}
  .gd-steps{grid-auto-flow:column;grid-auto-columns:1fr;gap:0;position:relative}
  .gd-steps li{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;padding:0;border:0}
  .gd-steps li+li{border:0}
  .gd-steps li::before{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--navy);color:var(--white)}
  .gd-steps a{display:grid;place-items:center;min-height:44px;margin-top:-40px;width:44px;overflow:hidden;position:relative}
  .gd-steps .gd-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .gd-steps-named{align-items:start;gap:0 4px}
  .gd-steps-named li{align-content:start;gap:6px}
  .gd-steps-named a{display:block;margin-top:0;width:100%;min-height:44px;overflow:visible;text-align:center;font-size:var(--fs-small);line-height:1.25}
  .gd-steps-named .gd-t{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;overflow-wrap:break-word}
}
/* Under 400 px four stops in a row are 59 to 85 px each and a name breaks mid-word ("downlo/ad", "Perplexi/ty"): two by two, each name on whole words
   (the copilot-guide-2 re-check, M1). */
@media (max-width:399px){
  .gd-steps-named{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 8px}
}
/* /about: "Why we built it": the two paragraphs start level with the cards beside them, not floating mid-height (the design review: it read as a bug). */
.about-why{align-items:start}
/* The company pages' section headings at section size on wide screens, as the AI pages' (the hub, the lists, the tabs). */
@media (min-width:901px){.co-page .section-tight>h2,.co-tabpage .section-tight>h2{font-size:var(--h3)}}
/* A company's AI pages on a phone: the answer at lead size with room round it, so the first screen is the answer and what you need before the steps.
   The room under the answer is an ordinary section's (the design-b3-9 and 9i reviews: a larger gap there read as empty); the first steps start a
   little further down instead, after "What you need" and its fold; the pre-check keeps the words near each page's budget. Never straight under a
   heading: /automate's "How to do it" is its own heading over its steps, and 64 px there read as an empty band (design-sweep-d3, the d2 review's L3). */
@media (max-width:600px){
  .co-ih .answer-box{font-size:var(--fs-lead);line-height:1.5;padding:22px 20px}
  .co-ih{padding-bottom:32px}
  .co-intent>.section-tight:first-child{padding-top:32px}
  .co-intent>.section-tight:first-child>:not(h2)+.steps.mt-3{margin-top:64px!important}
}
/* White space under the heads (design-b3-9c, d). A guide's answer is at lead size on wide screens and has a 64 px margin under it; with the head's own
   43 px of padding the "Three ways" card starts about 107 px below the answer, which is what keeps the first screen under its word budget at 1440
   (with the padding alone the guides ran about 30 words over). The pre-check holds the count; it is not repeated here, as it moves with the copy.
   A company AI page's head has room under it where a card sits beside it, and 24 px where it has none. */
@media (min-width:901px){
  .gd-head{margin-bottom:clamp(24px,4.5vw,64px)}
  .gd-head .answer-box{font-size:var(--fs-lead);line-height:1.5}
  .co-ih{padding-bottom:clamp(32px,4.5vw,64px)}
  .co-ih:not(:has(.co-ih-pic)){padding-bottom:24px}
  /* Beside the readiness card (/ai, /alternatives; the design-b3-9i and 9j reviews' L8 and L9: a hole on the left under the answer): the card's rows a
     little closer and half the head's room under it, so the checklist follows the card; the pre-check keeps the 1440 count under its budget. */
  .co-ready-pic .co-ready-list li{padding-block:6px}
  .co-ih:has(.co-ready-pic){padding-bottom:32px}
}
/* /explore/a-z: the letters carry no counts. The first card follows them closely, the head's own padding and a little here (a larger gap read as
   empty in the design-b3-9h review); the pre-check holds its words under the card directory's budget, and the gap costs none. */
.az-article>section{padding-top:16px}
@media (min-width:901px){.az-article>section{padding-top:clamp(16px,2vw,32px)}}
/* The readiness card's first row has no line above it. */
.co-ready-list li:first-child{border-top:0}
/* design-b3-9b: the headline keeps its distance from the answer; the empty updates card has room under its lead and a width that fits it. */
.co-ih-main h1{margin-bottom:24px}
.co-sub-head+.pg-empty{margin-top:20px;max-width:44rem}
/* ===== end design-b3-9 ===== */
/* ===== Skill maps P9: what changed ===== */
/* The version history's "How it works changed" lines, and My skills' "What changed for you" (from the approved files and the person's own apps). */
.map-changes{list-style:disc;margin:6px 0 0;padding-left:20px;display:grid;gap:4px;max-width:var(--measure);font-size:var(--fs-small);color:var(--ink)}
.map-changes-h{margin-top:8px;font-family:var(--body);font-size:var(--fs-small);font-weight:600;line-height:1.3;letter-spacing:normal;color:var(--navy)}
/* A heading for screen readers, the small label it was to the eye: the tab page's own h2 size (0,2,2) would draw it bigger than its version (the P11b review's M1). */
.sk-tabpage section h2.map-changes-h{font-size:var(--fs-small);line-height:1.3}
.map-changes-more{margin-top:4px}
.map-changes-more>summary{font-size:var(--fs-small);font-weight:600;color:var(--navy);min-height:44px}
.lib-changed{margin-top:8px;padding:0 14px;border-left:3px solid var(--marigold);background:var(--cream-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;max-width:var(--measure)}
.lib-changed .map-changes-h{margin-top:0}
.lib-changed>summary{min-height:44px}
.lib-changed[open]{padding-bottom:10px}
.lib-changed .map-changes{margin-top:4px}
/* ===== end Skill maps P9 ===== */
/* ===== Skill maps P11: insights ===== */
/* /admin/maps "What people do with maps": the apps lists, one a line. */
.maps-insights{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:var(--fs-small)}
/* ===== end Skill maps P11 ===== */
/* ===== design sweep A (29 Oct; REMAINING 1b): the marketing, trust and static pages to 9. Each page's first screen gains one
   picture of the thing itself, drawn with the trust pages' tinted picture (.tc-pic): one real test on /trust/how-we-test, an example
   removal on /trust/removed, this quarter's checks on /trust/transparency, how the site is built on /accessibility; /changelog's
   change sets are cards. Bars are SVG widths (CSP allows no inline style). Every class starts sa-. ===== */
/* A bar out of 100 (an SVG rect's width): navy on mist; the split bar's rest is marigold. */
.sa-bar{display:block;width:100%;height:12px;border-radius:999px;overflow:hidden;background:var(--mist)}
.sa-bar-on{fill:var(--navy)}
.sa-split{background:var(--marigold)}
/* /trust/how-we-test: one real test, the skill's runs over the well-prompted AI's. */
.sa-test .tc-pic-title,.sa-removal .tc-pic-title{font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1.25;margin-bottom:4px}
.sa-quarter .tc-pic-title{margin-bottom:6px}
.sa-test-date{color:var(--soft);font-size:var(--fs-small)}
.sa-run{display:grid;gap:6px;margin-top:18px}
.sa-run-k{font-weight:500;color:var(--navy)}
.sa-run-n{color:var(--soft);font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.sa-run-on .sa-run-n{color:var(--navy);font-weight:500}
/* /trust/removed: one listed removal, drawn as an example. */
.sa-removal-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:12px}
.sa-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 6px;border-radius:999px;background:var(--apricot);color:var(--navy);font-size:var(--fs-small);font-weight:500}
.sa-chip svg{width:22px;height:22px;flex:none}
.sa-removal-date{color:var(--soft);font-size:var(--fs-small)}
.sa-removal-rows{margin:0;display:grid}
.sa-removal-rows>div{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.sa-removal-rows dt{color:var(--soft);font-size:var(--fs-small)}
.sa-removal-rows dd{margin:0;color:var(--navy)}
.sa-loop{max-width:68rem}
/* /trust/transparency: this quarter's new versions, approved against refused. */
.sa-big{font-family:var(--display);font-weight:700;font-size:var(--fs-num);line-height:1;color:var(--navy);margin-bottom:14px;font-variant-numeric:tabular-nums}
.sa-key{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.sa-key li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;align-items:center;color:var(--navy)}
.sa-key b{font-weight:600;font-variant-numeric:tabular-nums}
.sa-dot{display:block;width:12px;height:12px;border-radius:50%}
.sa-dot-on{background:var(--navy)}
.sa-dot-off{background:var(--marigold);box-shadow:inset 0 0 0 1.5px var(--navy)}
/* /changelog: a change set a card, its icon as its picture, its first change in view and the rest in a fold. */
.sa-rels{display:grid;gap:12px}
.sa-rel{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;align-items:start;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);scroll-margin-top:96px}
.sa-rel-pic{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-sm);background:var(--ice)}
.sa-rel-pic svg{width:32px;height:32px}
.sa-rel-body{display:grid;gap:8px;max-width:var(--measure)}
.sa-rel-body h3{font-size:var(--h3);line-height:1.3}
.sa-rel-more summary,.sa-rows-more summary,.sa-built-more summary{cursor:pointer;list-style:none;color:var(--navy);font-weight:500;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;min-height:44px;display:flex;align-items:center;gap:10px}
.sa-rel-more summary::-webkit-details-marker,.sa-rows-more summary::-webkit-details-marker,.sa-built-more summary::-webkit-details-marker{display:none}
/* Round 6 (the review's L3): the site's fold chevron, as .faq's, so a fold says it opens. */
.sa-rel-more summary::after,.sa-rows-more summary::after,.sa-built-more summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.sa-rel-more[open]>summary::after,.sa-rows-more[open]>summary::after,.sa-built-more[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.sa-rel-more .tc-list{margin-top:6px}
/* /accessibility: how the site is built, each way drawn as it really looks. */
.sa-built h2{font-size:var(--h3);line-height:1.25;margin-bottom:16px}
.sa-built-rows{list-style:none;margin:0;display:grid}
.sa-built-rows li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.sa-built-rows li:first-child{border-top:0;padding-top:0}
.sa-built-rows b{display:block;font-weight:500;color:var(--navy);line-height:1.35}
.sa-built-rows p>span{display:block;margin-top:2px;color:var(--soft);font-size:var(--fs-small)}
.sa-sample{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-sm);background:var(--ice);color:var(--navy);font-weight:600}
.sa-sample svg{width:30px;height:30px}
.sa-sample-aa{background:var(--white);border:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:var(--h3)}
.sa-sample-ring{background:var(--white);outline:var(--ring-line);box-shadow:var(--ring);width:40px;height:40px;margin:4px;font-size:var(--fs-small)}
.sa-sample-type{background:var(--white);border:1px solid var(--line);font-family:var(--body);font-weight:400;font-size:var(--h3)}
@media (max-width:760px){
  .sa-rel{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px}
  .sa-rel-pic{width:44px;height:44px}
  .sa-rel-pic svg{width:26px;height:26px}
  .sa-built-rows p>span{display:none}   /* on a phone each way is its sample and its bold line; the detail is the wide screen's */
}
@media (forced-colors:active){.sa-bar,.sa-rel,.sa-sample{border:1px solid CanvasText}.sa-bar-on{fill:CanvasText}}
/* Round 2. /region: the example's about amounts in three currencies, one line. */
.sa-fx{list-style:none;margin:12px 0 0;padding:0;display:grid}
.sa-fx li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.sa-fx li[hidden]{display:none}
.sa-fx span{color:var(--soft)}
.sa-fx b{font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums}
/* /buying-safely: "Bought the wrong one" as a receipt under the answer, level with the promise card beside it. */
.sa-receipt{max-width:34rem}
.sa-receipt h2{font-size:var(--h3);line-height:1.25}
.sa-receipt>p{margin-top:12px}
.sa-rcpt{margin-top:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);box-shadow:0 1px 3px rgba(13,44,84,.12)}
.sa-rcpt-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--soft);font-size:var(--fs-small)}
.sa-rcpt-row{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--navy);font-weight:500}
.sa-rcpt-row b{font-weight:600;font-variant-numeric:tabular-nums}
.sa-rcpt-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:12px}
.sa-rcpt-btn{display:inline-block;padding:6px 14px;border-radius:999px;border:1px solid var(--navy);color:var(--navy);font-size:var(--fs-small);font-weight:500}
.sa-rcpt-time{display:inline-flex;align-items:center;gap:6px;color:var(--soft);font-size:var(--fs-small)}
.sa-rcpt-time svg{width:22px;height:22px;flex:none}
/* /developers: a call and its answer under the connector's settings. */
.sa-call{margin-top:14px}
.sa-call-k{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--soft);font-size:var(--fs-small)}
.sa-call-k:first-child{margin-top:0}
.sa-code{margin:6px 0 0;padding:10px 12px;border-radius:12px;background:var(--mist);color:var(--navy);font-size:var(--fs-small);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
/* /trust/report-a-vulnerability: a good report, drawn as an email (hidden on a phone, where the sentence under "How to report it" says it). */
.sa-mail .tc-pic-card{padding-top:10px}
.sa-mail-to{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--fs-small)}
.sa-mail-to span{color:var(--soft)}
.sa-mail-to b{font-weight:500;color:var(--navy);overflow-wrap:anywhere}
.sa-mail-rows{margin:12px 0 0;display:grid;gap:10px}
.sa-mail-rows dt{display:flex;align-items:center;gap:8px;color:var(--soft);font-size:var(--fs-small)}
.sa-mail-rows dt svg{width:20px;height:20px;flex:none}
.sa-mail-rows dd{margin:2px 0 0 28px;color:var(--navy)}
@media (max-width:760px){.sa-mail{display:none}}
/* Round 3. /for-creators: the film section's left edge is the page's (its 1360 px wrap drew the heading and chapters 100 px left of every
   other section at 1440); the film keeps its size by reaching right, its column a little wider. */
@media (min-width:1081px){
  .wrap.biz-wrap-film{padding-left:calc(max(0px, min(100px, (100% - 1160px) / 2)) + clamp(16px,4vw,32px))}
  .biz-wrap-film .biz-two-film{grid-template-columns:minmax(0,.44fr) minmax(0,1.56fr)}
}
/* Round 4 (the pre-check on r1 to r3). /buying-safely's receipt under the answer on a wide screen, after the promise card on a phone.
   The reading pages' first phone screen holds the answer: the example pictures of /trust/how-we-test and /trust/removed are the wide
   screen's (a phone has the list right under the answer). */
@media (min-width:1081px){
  .sa-bs-head{grid-template-rows:auto 1fr;align-items:start}
  .sa-bs-head>figure{grid-column:2;grid-row:1 / span 2}
  .sa-bs-head>.sa-receipt{grid-column:1;grid-row:2}
}
@media (max-width:760px){.sa-test,.sa-removal{display:none}}
/* /trust/report on a phone: "Something else" sat 2 px from its tile's edge at 375 (the global-batch2 r2 review, item 3). */
@media (max-width:420px){.rp-tiles{gap:10px}.rp-tiles a{gap:10px;padding:12px}.rp-tiles svg{width:28px;height:28px}}
/* Round 5. /changelog's one fold a card: the rest on a wide screen, every change on a phone (where a card is its title and its fold).
   /trust/how-we-test's scene 07 is the phone's picture. */
.sa-rel-again,.sa-rel-all,.sa-narrow{display:none}
@media (min-width:761px){.sa-rel-one{display:none}}
@media (max-width:760px){
  .sa-rel-first,.sa-rel-n{display:none}
  .sa-rel-again,.sa-narrow{display:block}
  .sa-rel-all{display:inline}
  .sa-rel-body{gap:4px}
}
/* Round 6 (the review's findings). M3: /trust/transparency's quarter with nothing checked says so. M4: /accessibility's details,
   one fold under the card on a phone. M6: /for/schools' split hero on a phone keeps the lead's own size and the unsplit gaps, so the
   picture is where it was. L5: /about's "Why we built it" heading sits over its words, the cards beside both. */
.sa-none{color:var(--soft);margin-top:4px}
.sa-built-more{display:none}
.sa-built-more .tc-list{margin-top:4px}
.sa-built-more li b{font-weight:500;color:var(--navy)}
.sa-rows-more .proof-table{margin-top:4px}
@media (max-width:760px){
  .sa-built-more{display:block;margin-top:8px}
  .sa-sch-copy,.sa-sch-copy .biz-cta{gap:18px}
  .sa-sch-copy .biz-cta .lead{font-size:var(--fs-lead);line-height:1.5}
}
@media (min-width:1081px){
  .sa-why>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:72px}
  .sa-why .tc-sec-head{grid-column:1;grid-row:1;margin-bottom:16px}
  .sa-why .about-why{display:contents}
  .sa-why .tc-split-copy{grid-column:1;grid-row:2}
  .sa-why .tc-packs{grid-column:2;grid-row:1 / span 2;align-self:center}
}
/* ===== end design sweep A ===== */

/* ===== design sweep E (group E: /help-lines, /learn/makers, /help, /learn; 29 Oct 2026, #190) ===== */
/* /help-lines: the four kinds of help as one row of tiles on a wide screen, two a row on a phone; what a line is for at body size
   under its name (the help-lines-canada review: it was small grey text where it matters most); the page ends on its own card. */
.tc-rows.tc-kinds{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;max-width:none}
@media (max-width:900px){.tc-rows.tc-kinds{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}}
@media (max-width:400px){.tc-rows.tc-kinds li{grid-template-columns:28px minmax(0,1fr);gap:10px}.tc-rows.tc-kinds li>svg{width:28px;height:28px}}
.hl-note{display:block;margin-top:6px;font-size:var(--fs-body);color:var(--ink)}
.help-lines .hl-checked{margin-top:24px}
.tc-read>.hl-close{margin:clamp(48px,2rem + 3vw,80px) 0 0;padding:clamp(24px,4vw,40px)}
.hl-close h2{font-size:var(--h3)}
.hl-close>p{margin-top:10px}
/* /learn/makers: the head's one action under the lede; the bar as two big numbers side by side, the skill's in navy and the well-prompted
   AI's in grey; from 1,100 px the steps are one track beside the bar, which stays in view as they scroll (the design review of 25 Oct:
   "run the track beside the card in the first screen"; global-lows' 160 px gap above them is gone); on a phone the bar comes first;
   the closing card across the page. */
.mk-start{margin-top:28px}
.mk-proof .mk-bar{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;align-items:start}
.mk-proof .mk-bar b{display:block;font-size:var(--fs-num);line-height:1.1;margin-bottom:4px}
.mk-proof .mk-bar dd{font-size:var(--fs-small);color:var(--soft)}
.mk-proof .mk-bar-base b{color:var(--soft)}
.mk-layout{display:grid;gap:8px}
.mk-aside{margin-top:clamp(24px,3vw,40px)}
@media (min-width:1100px){
  .mk-layout:not(.mk-solo){grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:0 64px;align-items:start}
  .mk-layout:not(.mk-solo) .mk-aside{grid-column:2;grid-row:1;position:sticky;top:96px}
  .mk-layout:not(.mk-solo) .mk-page{grid-column:1;grid-row:1}
  .mk-layout:not(.mk-solo) .mk-steps{grid-template-columns:minmax(0,1fr)}
}
.mk-end>.mk-close{margin-top:clamp(32px,1.5rem + 1.5vw,48px)}   /* half the old margin after step 8 (the sweep E review, L3); from 761 px the article's bottom padding is 24 px (design sweep E3, M1) */
.mk-close h2{font-size:var(--h2)}
.mk-close-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:20px}
/* /learn: the maker handbook as a card of its own under the guides (its icon on white, the line, the arrow); the jobs' fold under the
   first dozen chips. */
.ln-maker{display:grid;grid-template-columns:56px minmax(0,1fr) 20px;gap:18px;align-items:center;margin-top:24px;padding:20px 24px;border-radius:var(--r-lg);background:var(--cream);color:var(--ink);text-decoration:none;transition:box-shadow .15s}
.ln-maker:hover{box-shadow:0 12px 24px -16px rgba(13,44,84,.35)}
.ln-maker:hover b{text-decoration:underline;text-underline-offset:3px}
.ln-maker-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--white)}
.ln-maker-ic svg{width:32px;height:32px}
.ln-maker b{display:block;font-weight:600;color:var(--navy)}
.ln-maker b+span{display:block;margin-top:2px;color:var(--soft)}
.ln-maker>.ui-ico{width:20px;height:20px;color:var(--navy)}
@media (max-width:560px){.ln-maker{grid-template-columns:44px minmax(0,1fr) 18px;gap:14px;padding:16px}.ln-maker-ic{width:44px;height:44px;border-radius:12px}.ln-maker-ic svg{width:28px;height:28px}}
.ln-jobs-more{margin-top:16px}
/* On a phone each guide's icon sits on its own tile and the rows are thumb-tall, so the list reads as pictures, not a wall of titles. */
@media (max-width:760px){.ln-docs .tc-docs a{grid-template-columns:44px minmax(0,1fr) 18px;padding:20px 4px}.ln-docs .tc-docs a>svg:first-child{width:44px;height:44px;padding:8px;border-radius:12px;background:var(--mist)}}
.ln-jobs-more .pill-list{margin:0}
/* ===== end design sweep E ===== */

/* ===== design sweep E2 (the sweep E review's M2, M3 and Lows; 30 Oct 2026, #190) ===== */
/* /learn/makers: the test's day in the card under the numbers, small (hidden on a phone, as the caption was). */
.mk-tested{margin-top:14px;font-size:var(--fs-small);color:var(--soft)}
/* /learn: "Start here" as picture tiles from 761 px (M3): each guide's own icon large on its own white tile with the arrow level with it
   on the right, the title under them at the cards' size (E3, the E2 review's L3: the arrow sat at the foot, under an empty band in the
   shorter tiles); four a row from 1,024 px, two below; every tile in a row as tall as the tallest; the help centre's mist tile, so the
   two hubs share one look. A phone keeps the thumb-tall rows with their icon tiles. */
@media (min-width:761px){
  .ln-docs .tc-docs.tc-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border-top:0}
  .ln-docs .tc-docs li{border-bottom:0}
  .ln-docs .tc-docs a{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;align-items:start;gap:16px;height:100%;padding:24px;border-radius:var(--r-lg);background:var(--mist);transition:box-shadow .15s}
  .ln-docs .tc-docs a:hover{box-shadow:0 12px 24px -16px rgba(13,44,84,.35)}
  .ln-docs .tc-docs a>svg:first-child{width:64px;height:64px;padding:12px;border-radius:18px;background:var(--white)}
  .ln-docs .tc-docs b{grid-column:1/-1;font-size:var(--h3);font-weight:600;line-height:1.3}
  .ln-docs .tc-docs a>.ui-ico{grid-row:1;grid-column:2;align-self:center}
}
@media (min-width:1024px){.ln-docs .tc-docs.tc-two{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ===== end design sweep E2 ===== */

/* ===== design sweep E3 (the sweep E2 review's M1, L2 and L3; 30 Oct 2026, #190) ===== */
/* /learn/makers: from 761 px the gap after step 8 is the closing card's own margin; the article's bottom padding (96 px at 1440) made
   most of it (M1). A phone keeps its padding (the review: its gap is fine). */
@media (min-width:761px){.mk-page.tc-article{padding-bottom:24px}}
/* /learn: the closing ask's own top spacing (pg-sec) is the gap after the jobs; the reading column's bottom padding doubled it (L2). */
.tc-read.ln-read{padding-bottom:0}
/* ===== end design sweep E3 ===== */