/*
 * solutions.css: the solution pages (public/solutions/*.html), on base.css (tokens, type, buttons, hairlines, motion)
 * and app-ui.css (the app's components the demos are made of). solutions.js drives what moves; without it every demo
 * shows its first state. Mobile first: 641px, 1000px and 1100px add.
 *
 * Shared
 *   .sol-hero (.sol-hero--split: the headline beside a picture)  .sol-ctas  .sol-for (who it is for, a row of tags)
 *   .sc (a scenario: .sc-steps of .sc-step buttons beside a .win, one .sc-panel a step; data-scenario on it)
 *   .win (the app drawn: .win-bar with .win-crumb, .win-body with .win-side, an .ui-sidebar, and .win-main)
 *   .p-head .p-title .p-sub (a page's header in the app)  .ui-rows (the app's bordered list)  .sw (a color swatch)
 *   .diff (+ and - lines)  .term (a terminal)  .made (the "made up" note under a demo)
 *   .feats (a hairline grid of .feat, each with a .feat-art drawing)  .sol-cta (the closing call, on the accent)
 *   .pics (a gapless picture grid, square corners)  .ph (a drawn photo: --trail --lake --ridge --portrait --window)
 *   .can (a drawn can)  .sprite (an inline SVG of <symbol>s)
 * Each page's own parts follow, prefixed: .bt- brand teams, .mo- marketing ops, .ag- agencies, .pt- product teams,
 * .os- open source, .md- media, .rt- retail.
 */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.night-muted{color:var(--night-muted)}
.hide-sm{display:none}
@media (min-width:641px){.hide-sm{display:revert}}

/* Hero */
.sol-hero{padding-block:56px 48px}
.sol-hero .text-lede{margin-top:24px}
.sol-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.sol-for{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:28px;font-size:.875rem;color:var(--muted)}
.sol-hero--split{display:grid;gap:40px}
@media (min-width:1000px){
  .sol-hero{padding-block:88px 64px}
  .sol-hero--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:56px}
}

/* The app, drawn */
.win{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--ui-background);box-shadow:0 30px 60px -40px rgb(22 21 42 / .45);font-family:var(--sans);color:var(--ui-foreground);text-align:left}
.win-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:1px solid var(--ui-border);background:#fbfbfd;font-size:.75rem;color:var(--ui-muted-foreground)}
.win-dots{display:flex;gap:6px;flex:none}
.win-dots i{width:10px;height:10px;border-radius:50%;background:#e4e2ea}
.win-crumb{flex:1;min-width:0;overflow:hidden;font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap}
.win-body{display:grid;min-height:460px}
.win-side{display:none}
.win-main{min-width:0;padding:18px}
.win-org{display:flex;align-items:center;gap:8px;height:40px;padding:0 8px;margin-bottom:6px;font-size:.875rem;font-weight:600}
.win-org .app-icon{--s:22px;border-radius:6px}
.win-mark{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:6px;background:var(--ink);color:#fff;font:700 .6875rem var(--sans)}
.win-side .ui-sidebar-item svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:641px){
  .win-body{grid-template-columns:184px minmax(0,1fr)}
  .win-side{display:flex}
  .win-main{padding:24px}
}

/* Panels inside the app */
.p-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:16px}
.p-title{display:flex;align-items:center;gap:10px;margin:0;font-size:1.125rem;line-height:1.3;font-weight:600}
.p-sub{margin:4px 0 0;font-size:.8125rem;color:var(--ui-muted-foreground)}
.p-actions{display:flex;flex-wrap:wrap;gap:8px}
.p-tabs{margin-bottom:18px;max-width:100%;overflow-x:auto;justify-content:flex-start}
.p-tabs .ui-tabs-trigger{flex:none}
.p-grid{display:grid;gap:16px}
.p-label{display:block;margin:0 0 6px;font-size:.75rem;font-weight:500;color:var(--ui-muted-foreground)}
.ui-rows{display:grid;margin:0;padding:0;list-style:none;border:1px solid var(--ui-border);border-radius:var(--ui-radius);overflow:hidden;font-size:.875rem;background:var(--ui-background)}
.ui-rows>*{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:9px 12px}
.ui-rows>*+*{border-top:1px solid var(--ui-border)}
.ui-rows .mono{font-size:.75rem;color:var(--ui-muted-foreground)}
.ui-rows .end{display:flex;align-items:center;gap:8px;margin-left:auto;text-align:right}
.row-main{display:flex;align-items:center;gap:10px;min-width:0}
.row-main small{display:block;font-size:.75rem;color:var(--ui-muted-foreground)}
.sw{display:inline-block;flex:none;width:20px;height:20px;border-radius:6px;background:var(--c);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .08)}
.sw--lg{width:36px;height:36px;border-radius:9px}
.arrow{color:var(--ui-muted-foreground)}
.diff{margin:0;padding:12px 0;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:#fbfbfd;font:400 .8125rem/1.7 var(--mono);overflow-x:auto}
.diff span{display:block;padding:0 14px;white-space:pre}
.diff .del{background:#fdecec;color:#9b1c1c}
.diff .add{background:#e8f6ec;color:#155d2c}
.diff .ln{color:var(--ui-muted-foreground)}
.term{margin:0;padding:16px 18px;border-radius:12px;background:var(--night);color:var(--night-ink);font:400 .8125rem/1.75 var(--mono);overflow-x:auto;white-space:pre}
.term .c{color:var(--night-muted)}
.term .ok{color:#5fd39b}
.term .no{color:#ff8a80}
.made{margin:14px 0 0;font-size:.8125rem;color:var(--muted)}
.ok-text{color:var(--ui-success)}
.no-text{color:var(--ui-destructive)}
.bars{display:grid;gap:10px}
.bars>div{display:grid;grid-template-columns:110px minmax(0,1fr) 32px;align-items:center;gap:10px;font-size:.8125rem}
.bars i{display:block;height:10px;width:var(--w);border-radius:999px;background:var(--ui-primary)}
.bars b{font-weight:500;text-align:right;font-family:var(--mono);font-size:.75rem}
.field{display:grid;gap:6px}
.fields{display:grid;gap:14px}
@media (min-width:641px){.fields--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fake-input{display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px;border:1px solid var(--ui-input);border-radius:calc(var(--ui-radius) - 2px);box-shadow:var(--ui-shadow-xs);font-size:.875rem;background:var(--ui-background)}
.fake-input .ui-badge{font-size:.6875rem}
.opt{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:.875rem}
.opt small{display:block;color:var(--ui-muted-foreground);font-size:.75rem}
.opt.is-on{border-color:var(--ui-primary-ink);box-shadow:0 0 0 1px var(--ui-primary-ink)}
.radio{flex:none;width:16px;height:16px;margin-top:2px;border:1px solid var(--ui-input);border-radius:50%}
.is-on .radio{border:5px solid var(--ui-primary-ink)}

/* The scenario: steps beside the app, a step every 5s while on screen, held on hover (solutions.js) */
.sc{display:grid;gap:20px}
.sc-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.sc-step{position:relative;display:flex;flex-direction:column;gap:6px;width:100%;height:100%;padding:14px 14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);font:inherit;text-align:left;overflow:hidden;transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.sc-step:hover{background:var(--panel)}
.sc-step[aria-selected=true]{background:var(--panel);border-color:var(--ink)}
.sc-head{display:flex;align-items:center;gap:10px}
.sc-head b{font-size:.9375rem;line-height:1.25}
.sc-n{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--line);color:var(--muted);font-size:.75rem;font-weight:600;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.sc-step[aria-selected=true] .sc-n,.sc-step.is-done .sc-n{background:var(--accent);color:var(--on-accent)}
.sc-line{display:none;font-size:.9375rem;line-height:1.5;color:var(--muted)}
.sc-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.sc-bar i{display:block;width:0;height:100%;background:var(--accent)}
.sc-step.is-run .sc-bar i{animation:sc-fill 5s linear forwards}
.sc.is-paused .sc-step.is-run .sc-bar i{animation-play-state:paused}
@keyframes sc-fill{from{width:0}to{width:100%}}
.win-main:has(.sc-panel){display:grid}
.sc-panel{grid-area:1/1;min-width:0}
.sc-panel.is-off{visibility:hidden}
@media (prefers-reduced-motion:no-preference){.motion .sc-panel:not(.is-off){animation:sc-in var(--reveal) var(--ease) both}}
@keyframes sc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:1000px){
  .sc{grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:start}
  .sc-steps{grid-template-columns:minmax(0,1fr);gap:0;position:sticky;top:120px}
  .sc-step{gap:8px;padding:20px 0 22px 22px;border:0;border-left:2px solid var(--line);border-radius:0;background:transparent}
  .sc-step:hover,.sc-step[aria-selected=true]{background:transparent}
  .sc-step[aria-selected=true] .sc-line{display:block}
  .sc-bar{left:-2px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .sc-bar i{width:100%;height:0}
  .sc-step.is-done .sc-bar i,.sc-step[aria-selected=true]:not(.is-run) .sc-bar i{height:100%}
  .sc-step.is-run .sc-bar i{animation-name:sc-grow}
}
.sc-step.is-done .sc-bar i,.sc-step[aria-selected=true]:not(.is-run) .sc-bar i{width:100%}
@media (min-width:1000px){.sc-step.is-done .sc-bar i,.sc-step[aria-selected=true]:not(.is-run) .sc-bar i{width:100%;height:100%}}
@keyframes sc-grow{from{height:0}to{height:100%}}

/* Features */
.feats{grid-template-columns:minmax(0,1fr)}
.feat{display:flex;flex-direction:column;gap:10px;padding:0 0 28px}
.feat-art{display:grid;place-items:center;height:168px;margin-bottom:12px;overflow:hidden;background:var(--panel);border-bottom:1px solid var(--line)}
.feat h3,.feat p{margin:0;padding:0 24px}
.feat h3{font:600 1.1875rem/1.25 var(--display);letter-spacing:-.01em}
.feat p{font-size:.9375rem;line-height:1.55;color:var(--muted)}
.feat .text-link{margin:4px 24px 0;font-size:.875rem}
.feat-art .ui-rows{width:min(82%,280px);font-size:.75rem}
.feat-art .ui-rows>*{min-height:34px;padding:6px 10px}
.feats-note{margin:18px 0 0;font-size:.875rem;color:var(--muted)}
@media (min-width:641px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.feats--4{grid-template-columns:repeat(4,minmax(0,1fr))}.feats--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* The call to action, on the accent */
.sol-cta{display:flex;flex-direction:column;gap:28px;padding:48px 24px;border-radius:var(--radius-lg);background:var(--accent);color:var(--on-accent)}
.sol-cta h2 span{opacity:.6}
.sol-cta p{margin:0;max-width:560px;font-size:1.125rem;opacity:.85}
.sol-cta .sol-ctas{margin-top:0}
.sol-cta :focus-visible{outline-color:var(--on-accent)}
.sec-tight{padding-top:24px}
@media (min-width:1000px){.sol-cta{padding:88px 64px}}

/* Pictures: gapless, square corners */
.pics{display:grid;gap:2px}
.pic{position:relative;overflow:hidden;margin:0;background:var(--panel)}
.pic img{width:100%;height:100%;object-fit:cover}

/* A drawn photo: sky, sun, two ridges. Variants set the colors. */
.ph{position:relative;overflow:hidden;width:100%;height:100%;background:linear-gradient(var(--sky1),var(--sky2))}
.ph::before,.ph::after{content:"";position:absolute;left:0;right:0;bottom:0}
.ph::before{height:58%;background:var(--m1);clip-path:polygon(0 55%,14% 30%,30% 52%,48% 8%,66% 46%,82% 24%,100% 50%,100% 100%,0 100%)}
.ph::after{height:34%;background:var(--m2);clip-path:polygon(0 38%,22% 12%,42% 44%,64% 16%,84% 40%,100% 22%,100% 100%,0 100%)}
.ph-sun{position:absolute;left:60%;top:20%;width:20%;aspect-ratio:1;border-radius:50%;background:var(--sun)}
.ph--trail{--sky1:#cfe8e1;--sky2:#f6f0d8;--sun:#fff3c4;--m1:#6d9c84;--m2:#2f5d4a}
.ph--lake{--sky1:#9cc9f0;--sky2:#e3f1fb;--sun:#fffaf0;--m1:#4f7ea8;--m2:#1d4f7a}
.ph--lake::after{height:30%;background:linear-gradient(#5d97c7,#2b6a9e);clip-path:none}
.ph--ridge{--sky1:#f7c59f;--sky2:#fbe7cf;--sun:#ff8c42;--m1:#b5543a;--m2:#5c2a1f}
.ph--portrait{background:radial-gradient(circle at 70% 25%,#ffe0b8 0 18%,transparent 19%),linear-gradient(#f3d9c4,#e7b896)}
.ph--portrait::before{left:28%;right:28%;bottom:0;height:46%;border-radius:46% 46% 0 0;background:#2f5d4a;clip-path:none}
.ph--portrait::after{left:39%;right:39%;bottom:40%;height:auto;aspect-ratio:1;border-radius:50%;background:#8a5a3c;clip-path:none}
.ph--window{background:linear-gradient(#e9e4da,#d8d1c3)}
.ph--window::before{left:14%;right:14%;top:12%;bottom:18%;height:auto;background:linear-gradient(#cfe8e1 0 55%,#2f5d4a 55%);clip-path:none;box-shadow:0 0 0 8px #1f2a24}
.ph--window::after{left:0;right:0;height:18%;background:#b8ad99;clip-path:none}
.ph-word{position:absolute;z-index:1;left:0;right:0;text-align:center;font:600 clamp(.875rem,.6rem + .9vw,1.375rem)/1 var(--display);letter-spacing:-.02em;color:#fff}

/* A drawn can */
.can{position:relative;flex:none;width:var(--w,72px);aspect-ratio:1/2;border-radius:16px/10px;background:linear-gradient(90deg,rgb(0 0 0 / .18),transparent 18%,rgb(255 255 255 / .35) 34%,transparent 46%,rgb(0 0 0 / .14) 92%),var(--can);box-shadow:0 18px 28px -18px rgb(0 0 0 / .45)}
.can::before{content:"";position:absolute;left:6%;right:6%;top:-4%;height:8%;border-radius:50%;background:linear-gradient(#e8e8ea,#b9bbc1)}
.can::after{content:"oda";position:absolute;left:0;right:0;top:36%;text-align:center;font:700 calc(var(--w,72px) * .32)/1 var(--display);letter-spacing:-.04em;color:var(--can-ink,#fff)}
.can i{position:absolute;left:0;right:0;bottom:22%;height:12%;background:var(--can-ink,#fff);opacity:.9}
.can--yuzu{--can:#ffd23f;--can-ink:#0f4c47}.can--berry{--can:#e0457b;--can-ink:#fff6ea}.can--mint{--can:#2ec4a6;--can-ink:#0f3d38}

/* ===================== Brand teams ===================== */
/* The Acme wall: every surface reads --b-* from the release picked (data-release on .bt-wall). */
.bt-wall{--b-primary:#1e3a8a;--b-second:#93c5fd;--b-ink:#0f172a;--b-paper:#ffffff;--b-font:Georgia,'Times New Roman',serif;--b-track:0;--b-round:4px}
.bt-wall[data-release="12"]{--b-primary:#ff5a36;--b-second:#ffd166;--b-ink:#1b1530;--b-paper:#fff7f0;--b-font:var(--display);--b-track:-.035em;--b-round:999px}
.bt-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:20px}
.bt-bar .text-small{margin:0;color:var(--muted)}
.bt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--line)}
.bt-tile{position:relative;display:flex;flex-direction:column;min-height:200px;padding:20px 20px 34px;overflow:hidden;background:var(--b-paper);color:var(--b-ink)}
.bt-tile,.bt-tile *{transition:background-color .6s ease,color .6s ease,border-color .6s ease,border-radius .6s ease,letter-spacing .6s ease}
.bt-label{position:absolute;right:12px;bottom:10px;font:500 .6875rem var(--mono);color:color-mix(in srgb,var(--b-ink) 55%,transparent)}
.bt-logo{display:inline-flex;align-items:center;gap:8px;font:600 1.0625rem/1 var(--b-font);letter-spacing:var(--b-track)}
.bt-logo svg{width:24px;height:24px;color:var(--b-primary)}
.m-new{display:none}
.bt-wall[data-release="12"] .m-old{display:none}
.bt-wall[data-release="12"] .m-new{display:block}
.bt-site{grid-column:1/-1;gap:18px;min-height:300px}
.bt-site-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.8125rem}
.bt-site-nav span:last-child{display:none;gap:16px;opacity:.7}
.bt-site h3{margin:auto 0 0;font:500 clamp(2rem,1.2rem + 3vw,3.75rem)/.98 var(--b-font);letter-spacing:var(--b-track)}
.bt-site h3 span{color:var(--b-primary)}
.bt-pill{align-self:flex-start;padding:10px 18px;border-radius:var(--b-round);background:var(--b-primary);color:var(--b-paper);font-size:.875rem;font-weight:600}
.bt-icon{align-items:center;justify-content:center;background:var(--b-second)}
.bt-icon>span:first-child{display:grid;place-items:center;width:46%;aspect-ratio:1;border-radius:24%;background:var(--b-primary);color:var(--b-paper)}
.bt-icon svg{width:62%;height:62%}
.bt-post{justify-content:space-between;background:var(--b-primary);color:var(--b-paper)}
.bt-post .bt-logo svg{color:var(--b-paper)}
.bt-post p{margin:0;font:500 clamp(1.375rem,1rem + 1.4vw,2rem)/1 var(--b-font);letter-spacing:var(--b-track)}
.bt-post .bt-label{color:color-mix(in srgb,var(--b-paper) 70%,transparent)}
.bt-card{justify-content:center;background:var(--b-second)}
.bt-card>div{display:flex;flex-direction:column;justify-content:space-between;gap:24px;aspect-ratio:1.7;padding:16px;border-radius:6px;background:var(--b-paper);box-shadow:0 14px 30px -18px rgb(0 0 0 / .45);font-size:.6875rem}
.bt-card b{display:block;font:600 .875rem var(--b-font);letter-spacing:var(--b-track)}
.bt-slide{justify-content:center;background:var(--b-ink)}
.bt-slide>div{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;aspect-ratio:16/9;padding:16px;border-radius:4px;background:var(--b-paper);overflow:hidden}
.bt-slide>div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--b-primary)}
.bt-slide b{font:500 1.375rem/1 var(--b-font);letter-spacing:var(--b-track)}
.bt-slide small{font-size:.6875rem;opacity:.7}
.bt-slide .bt-label{color:rgb(255 255 255 / .6)}
.bt-portal{gap:14px}
.bt-portal-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:.6875rem}
.bt-portal-top .mono{opacity:.65}
.bt-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:auto}
.bt-chips i{height:52px;border-radius:6px;background:var(--b-primary)}
.bt-chips i:nth-child(2){background:var(--b-second)}
.bt-chips i:nth-child(3){background:var(--b-ink)}
.bt-ai{gap:10px;justify-content:flex-end;background:#f5f4f8;color:#16152a}
.bt-ai .ask{align-self:flex-end;max-width:85%;padding:8px 10px;border-radius:12px;background:#e6e5ee;font-size:.75rem}
.bt-ai .ans{padding:10px;border-radius:12px;background:#fff;font-size:.75rem;line-height:1.45;box-shadow:var(--ui-shadow-sm)}
.bt-ai .ans b{color:var(--b-primary)}
.bt-ai .bt-label{color:var(--muted)}
.bt-portal,.bt-ai{grid-column:span 2}
.bt-v12{display:none}
.bt-wall[data-release="12"] .bt-v11{display:none}
.bt-wall[data-release="12"] .bt-v12{display:inline}
@media (min-width:641px){
  .bt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bt-site{grid-column:span 2}
  .bt-ai{grid-column:auto}
  .bt-site-nav span:last-child{display:flex}
  .bt-tile{min-height:240px}
}
@media (min-width:1100px){
  .bt-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bt-site{grid-row:span 2}
  .bt-ai{grid-column:span 2}
}
/* The rules table inside the app */
.rule-val{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.75rem}
.rule-val s{color:var(--ui-muted-foreground)}
.rule-val .old{display:none;align-items:center;gap:8px}
@media (min-width:641px){.rule-val .old{display:inline-flex}}
.mark-tile{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--c,#ff5a36);color:#fff}
.mark-tile svg{width:18px;height:18px}
.comment{display:grid;gap:6px;padding:12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:.8125rem;background:#fbfbfd}
.comment b{font-weight:600}
.avatar{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--c,#e6e5ee);color:#fff;font-size:.6875rem;font-weight:600}
.score{display:flex;align-items:baseline;gap:8px;font:440 2rem/1 var(--display);letter-spacing:-.03em}
.score small{font:500 .75rem var(--sans);color:var(--ui-muted-foreground);letter-spacing:0}

/* ===================== Marketing ops ===================== */
.mo-board{padding-block:48px 56px}
.mo-check{display:grid;gap:16px;margin-bottom:24px}
.mo-check .pick-label{display:block;margin:0 0 8px;font-size:.8125rem;color:var(--night-muted)}
.mo-check .choice{background:transparent;color:var(--night-ink);border-color:var(--night-line)}
.mo-check .choice:hover{background:var(--night-panel)}
.mo-check .choice[aria-pressed=true]{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.mo-sum{display:flex;align-items:baseline;gap:12px;margin:0;font:440 clamp(1.5rem,1.2rem + 1.2vw,2.25rem)/1.1 var(--display);letter-spacing:-.03em}
.mo-sum .night-muted{font:400 .875rem var(--sans);letter-spacing:0}
.mo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mo-tile{aspect-ratio:4/5;background:var(--night-panel)}
.mo-tile .ph,.mo-tile .mo-logo{transition:filter var(--reveal) var(--ease),opacity var(--reveal) var(--ease)}
.mo-tile.is-no .ph,.mo-tile.is-no .mo-logo{filter:grayscale(1);opacity:.35}
.mo-cap{position:absolute;z-index:2;left:10px;right:10px;bottom:10px;display:grid;gap:6px;padding:10px 12px;border-radius:10px;background:rgb(15 14 28 / .78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--night-ink);font-size:.8125rem;line-height:1.35}
.mo-cap b{font-weight:600}
.mo-cap .chk{justify-self:start}
.mo-cap .why{color:var(--night-muted);font-size:.75rem}
.chk.is-ok{background:#5fd39b;color:#0f2a1c}
.chk.is-no{background:#ff8a80;color:#3a0d0a}
.mo-logo{display:grid;place-items:center;width:100%;height:100%;background:#f4f1ea;color:#1f4d3a}
.mo-logo span{display:inline-flex;align-items:center;gap:8px;font:600 1.5rem var(--display);letter-spacing:-.03em}
.mo-logo svg{width:30px;height:30px}
.mo-note{margin:16px 0 0;font-size:.8125rem;color:var(--night-muted)}
@media (min-width:641px){.mo-check{grid-template-columns:repeat(3,auto);justify-content:start;gap:24px 40px}.mo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.mo-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.mo-board{padding-block:64px 72px}}
.asset-pane{display:grid;gap:16px}
.asset-pic{aspect-ratio:4/3;border-radius:var(--ui-radius);overflow:hidden}
@media (min-width:1100px){.asset-pane{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.verdict{display:grid;gap:10px;padding:14px;border-radius:var(--ui-radius);background:color-mix(in srgb,var(--ui-destructive) 8%,transparent);font-size:.875rem}
.verdict-head{display:flex;align-items:center;gap:10px;font-weight:600}
.instead{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-background)}
.instead .thumb{flex:none;width:44px;height:44px;border-radius:6px;overflow:hidden}

/* ===================== Agencies ===================== */
/* The client's portal: every part reads --c-* from the client picked (data-client on .ag-portal). */
.ag-stage{display:grid;gap:16px}
.ag-clients{display:grid;gap:8px}
.ag-client{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);font:inherit;text-align:left;color:var(--ink);transition:border-color var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.ag-client:hover{background:var(--panel)}
.ag-client[aria-pressed=true]{border-color:var(--ink);background:var(--panel)}
.ag-client small{display:block;font-size:.75rem;color:var(--muted)}
.ag-client .ag-mk{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--c);color:var(--on)}
.ag-client .ag-mk svg{width:20px;height:20px}
.ag-portal{--c-primary:#ff5a36;--c-second:#ffd166;--c-ink:#1b1530;--c-paper:#fff7f0;--c-font:var(--display);--c-track:-.035em;--c-round:999px;--c-tile:16px}
.ag-portal[data-client=kestrel]{--c-primary:#1f4d3a;--c-second:#e9b949;--c-ink:#18241e;--c-paper:#f4f1ea;--c-font:Georgia,'Times New Roman',serif;--c-track:-.01em;--c-round:4px;--c-tile:2px}
.ag-portal[data-client=oda]{--c-primary:#0f766e;--c-second:#ffd23f;--c-ink:#0f2e2b;--c-paper:#fff8e7;--c-font:var(--sans);--c-track:-.02em;--c-round:14px;--c-tile:24px}
.ag-site{display:flex;flex-direction:column;gap:22px;padding:22px;background:var(--c-paper);color:var(--c-ink);font-family:var(--sans)}
.ag-site,.ag-site *{transition:background-color .5s ease,color .5s ease,border-radius .5s ease}
.ag-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.8125rem}
.ag-nav nav{display:none;gap:16px;opacity:.75}
.ag-brand{display:inline-flex;align-items:center;gap:8px;font:600 1.0625rem var(--c-font);letter-spacing:var(--c-track)}
.ag-brand svg{width:24px;height:24px;color:var(--c-primary)}
.ag-portal [data-for]{display:none}
.ag-portal[data-client=acme] [data-for=acme],.ag-portal[data-client=kestrel] [data-for=kestrel],.ag-portal[data-client=oda] [data-for=oda]{display:inline}
.ag-portal[data-client=acme] .blk[data-for=acme],.ag-portal[data-client=kestrel] .blk[data-for=kestrel],.ag-portal[data-client=oda] .blk[data-for=oda]{display:block}
.ag-site h3{margin:0;font:500 clamp(1.875rem,1.3rem + 2vw,3rem)/1 var(--c-font);letter-spacing:var(--c-track)}
.ag-site h3 em{font-style:normal;color:var(--c-primary)}
.ag-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ag-logos>div{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--c-tile);background:#fff;color:var(--c-primary)}
.ag-logos>div:nth-child(2){background:var(--c-primary);color:var(--c-paper)}
.ag-logos>div:nth-child(3){background:var(--c-ink);color:var(--c-second)}
.ag-logos svg{width:36%;height:36%}
.ag-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.ag-sws{display:flex;gap:6px}
.ag-sws i{width:28px;height:28px;border-radius:50%;background:var(--c-primary)}
.ag-sws i:nth-child(2){background:var(--c-second)}
.ag-sws i:nth-child(3){background:var(--c-ink)}
.ag-btn{padding:10px 16px;border-radius:var(--c-round);background:var(--c-primary);color:var(--c-paper);font-size:.8125rem;font-weight:600}
.ag-studio{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--muted)}
.ag-studio b{color:var(--ink)}
@media (min-width:641px){.ag-nav nav{display:flex}}
@media (min-width:1000px){.ag-stage{grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}}

/* ===================== Product teams ===================== */
.pt-band{padding-block:56px}
.pt-grid{display:grid;gap:20px}
.pt-code{overflow:hidden;border:1px solid var(--night-line);border-radius:var(--radius-md);background:var(--night-panel)}
.pt-tabs{display:flex;gap:4px;overflow-x:auto;padding:10px;border-bottom:1px solid var(--night-line)}
.pt-tabs button{flex:none;padding:6px 12px;border:0;border-radius:8px;background:transparent;color:var(--night-muted);font:500 .8125rem var(--sans)}
.pt-tabs button:hover{color:var(--night-ink)}
.pt-tabs button[aria-pressed=true]{background:var(--night-line);color:var(--night-ink)}
.pt-url{padding:12px 16px 0;font:400 .75rem var(--mono);color:var(--night-muted);overflow-wrap:anywhere}
.pt-pre{display:none;margin:0;padding:14px 16px 20px;font:400 .8125rem/1.75 var(--mono);color:var(--night-ink);overflow-x:auto;white-space:pre}
.pt-code[data-format=css] .pt-pre[data-f=css],.pt-code[data-format=tailwind] .pt-pre[data-f=tailwind],.pt-code[data-format=shadcn] .pt-pre[data-f=shadcn],.pt-code[data-format=ts] .pt-pre[data-f=ts],.pt-code[data-format=json] .pt-pre[data-f=json],.pt-code[data-format=md] .pt-pre[data-f=md]{display:block}
.pt-url [data-f]{display:none}
.pt-code[data-format=css] .pt-url [data-f=css],.pt-code[data-format=tailwind] .pt-url [data-f=tailwind],.pt-code[data-format=shadcn] .pt-url [data-f=shadcn],.pt-code[data-format=ts] .pt-url [data-f=ts],.pt-code[data-format=json] .pt-url [data-f=json],.pt-code[data-format=md] .pt-url [data-f=md]{display:inline}
.pt-pre .k{color:#9db4ff}.pt-pre .s{color:#ffd29a}.pt-pre .c{color:var(--night-muted)}
.pt-hex{display:inline-flex;align-items:center;gap:6px}
.pt-hex::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--a-primary)}
.pt-demo{--a-primary:#1f6feb;--a-on:#ffffff;--a-second:#f0f6ff}
.pt-demo[data-release="13"]{--a-primary:#ff5a36;--a-on:#ffffff;--a-second:#fff1ea}
.pt-demo .v13{display:none}
.pt-demo[data-release="13"] .v13{display:inline}
.pt-demo[data-release="13"] .v12{display:none}
.pt-ui{display:grid;align-content:center;gap:16px;padding:24px;border-radius:var(--radius-md);background:var(--paper);color:var(--ink);--ui-primary:var(--a-primary);--ui-primary-foreground:var(--a-on);--ui-primary-ink:var(--a-primary)}
.pt-ui,.pt-ui *{transition:background-color .5s ease,color .5s ease,border-color .5s ease}
.pt-ui .ui-card{gap:16px;padding:20px 0}
.pt-ui .ui-card-header{grid-template-columns:auto 1fr;align-items:center;column-gap:12px}
.pt-ui .ui-card-header .mark-tile{grid-row:span 2;--c:var(--a-primary)}
.pt-row{display:flex;flex-wrap:wrap;gap:8px}
.pt-meter{height:8px;border-radius:999px;background:var(--a-second)}
.pt-meter i{display:block;width:64%;height:100%;border-radius:inherit;background:var(--a-primary)}
.pt-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.pt-head .choices .choice{background:transparent;color:var(--night-ink);border-color:var(--night-line)}
.pt-head .choices .choice[aria-pressed=true]{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
@media (min-width:1000px){.pt-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}.pt-band{padding-block:72px}}
.pr{display:grid;gap:12px}
.pr-check{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:.875rem}
.pr-check small{display:block;color:var(--ui-muted-foreground);font-size:.75rem}
.pr-dot{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--ui-success);position:relative}
.pr-dot::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pt-buttons{display:flex;flex-wrap:wrap;gap:8px;padding:16px;border:1px dashed var(--ui-border);border-radius:var(--ui-radius);--ui-primary:#ff5a36;--ui-primary-foreground:#fff}

/* ===================== Open source ===================== */
.os-art{position:relative;display:grid;gap:14px}
.os-kite{--k1:#5b5bd6;--k2:#8ecae6;--k-ink:#17163a}
.os-site{overflow:hidden;border-radius:var(--radius-md);background:#f6f6ff;color:var(--k-ink);box-shadow:0 30px 60px -40px rgb(22 21 42 / .5)}
.os-site-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid #e3e3f4;font-size:.75rem}
.os-site-bar .mono{color:#6b6a8f}
.os-site-hero{display:grid;gap:18px;padding:26px 22px}
.os-site-hero h3{margin:0;font:500 clamp(2rem,1.4rem + 2vw,3rem)/.98 var(--display);letter-spacing:-.04em}
.os-site-hero h3 span{color:var(--k1)}
.os-marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.os-marks>div{display:grid;place-items:center;aspect-ratio:1.25;background:#fff;color:var(--k1)}
.os-marks>div:nth-child(2){background:var(--k1);color:#fff}
.os-marks>div:nth-child(3){background:var(--k-ink);color:var(--k2)}
.os-marks svg{width:48%;height:48%}
.os-chip-row{display:flex;flex-wrap:wrap;gap:8px;font-size:.75rem}
.os-chip-row span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:#fff;border:1px solid #e3e3f4}
.os-chip-row i{width:16px;height:16px;border-radius:50%;background:var(--c)}
.os-readme{display:grid;gap:10px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper);box-shadow:0 20px 40px -32px rgb(22 21 42 / .4);font-size:.8125rem}
.os-readme .mono{color:var(--muted);font-size:.75rem}
.os-readme b{font:600 1.25rem var(--display);letter-spacing:-.02em}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{display:inline-flex;height:20px;overflow:hidden;border-radius:4px;font:600 .6875rem/20px var(--sans);color:#fff}
.badge span{padding:0 7px;background:#555}
.badge span+span{background:var(--b,#4c1)}
.badge--brand span+span{background:#5b5bd6}
.os-hub{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:var(--radius-md);background:var(--night);color:var(--night-ink);font-size:.8125rem}
.os-hub .mono{color:var(--night-muted);font-size:.75rem}
@media (min-width:1000px){
  .os-art{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:stretch}
  .os-site{grid-row:span 2}
  .os-site-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:28px;padding:40px 36px}
  .os-site-hero h3{grid-row:span 2;font-size:clamp(3rem,1.6rem + 3vw,4.5rem)}
  .os-readme{padding:28px;font-size:.9375rem;align-content:start}
  .os-readme b{font-size:1.75rem}
  .os-hub{padding:24px 28px}
}
.os-show{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.cov{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:3/4;padding:20px;text-decoration:none}
.cov-kicker{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.cov-title{font:440 clamp(1.125rem,.8rem + 1.2vw,1.5rem)/1 var(--display);letter-spacing:-.03em;overflow-wrap:anywhere}
.cov-title span{opacity:.62}
.strip{display:flex;height:10px;border-radius:var(--radius-pill);overflow:hidden}
.strip i{flex:1;background:var(--c)}
.cov-firefox{background:#ff7139;color:#20123a}.cov-svelte{background:#ff3e00;color:#1a1a1a}.cov-deno{background:#70ffaf;color:#0b0b0b}
.cov-rust{background:#a72145;color:#f6e1e7}.cov-zed{background:#084ccf;color:#f2f5ff}.cov-bun{background:#f472b6;color:#14151a}
@media (min-width:641px){.os-show{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.os-show{grid-template-columns:repeat(6,minmax(0,1fr))}}
.file-list{display:grid;gap:8px}
.file-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font:400 .8125rem var(--mono)}
.file-list small{font-family:var(--sans);color:var(--ui-muted-foreground)}

/* ===================== Media ===================== */
.md-reel{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.md-tile{display:flex;flex-direction:column;background:var(--night-panel)}
.md-img{display:block;overflow:hidden}
.md-tile img{width:100%;object-fit:cover;aspect-ratio:2.2/1;height:auto;transition:filter var(--reveal) var(--ease),opacity var(--reveal) var(--ease)}
.md-tile:first-child img{aspect-ratio:2.6/1}
.md-tile.is-wait img{filter:blur(12px) grayscale(.5) brightness(.7)}
.md-tile.is-no img{filter:grayscale(1);opacity:.25}
.md-cap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;flex:1;padding:14px 16px;color:var(--night-ink);font-size:.875rem;line-height:1.35}
.md-cap b{font-weight:600}
.md-cap .why{flex-basis:100%;font:400 .75rem var(--mono);color:var(--night-muted)}
.chk.is-wait{background:#ffd29a;color:#3a2405}
.md-ver{position:absolute;right:12px;top:12px;padding:4px 10px;border-radius:999px;background:rgb(15 14 28 / .72);color:var(--night-ink);font:500 .6875rem var(--mono)}
@media (min-width:641px){.md-reel{grid-template-columns:repeat(3,minmax(0,1fr))}.md-tile:first-child{grid-column:1/-1}.md-tile:first-child .md-cap{padding:18px 20px}}
.md-time{display:grid;gap:14px;margin-bottom:24px}
.md-time label{font-size:.875rem;font-weight:600}
.md-range{width:100%;accent-color:var(--accent)}
.md-ticks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));font-size:.75rem;color:var(--muted)}
.md-ticks span:nth-child(n+2){text-align:center}
.md-ticks span:last-child{text-align:right}
.md-day{font:440 clamp(1.5rem,1.2rem + 1.2vw,2.25rem)/1.1 var(--display);letter-spacing:-.03em;margin:0}
.md-credit{margin:14px 0 0;font-size:.8125rem;color:var(--muted)}
.thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.thumbs figure{margin:0;display:grid;gap:6px;font-size:.75rem}
.thumbs img{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:6px}
.thumbs figcaption{display:flex;justify-content:space-between;gap:6px;color:var(--ui-muted-foreground)}
@media (min-width:641px){.thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.search{display:flex;align-items:center;gap:10px}
.search .ui-input{flex:1}
.facets{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 16px}
.formats{display:grid;grid-template-columns:repeat(4,36px);gap:10px}
.formats img{width:36px;height:auto}

/* ===================== Retail ===================== */
.rt-stage{display:grid;gap:20px}
.rt-presets .choice{min-width:0}
.rt-frame{display:grid;place-items:center;height:440px;padding:20px;border-radius:var(--radius-lg);background:var(--panel)}
.rt-shot{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:4%;width:100%;max-width:640px;aspect-ratio:16/9;max-height:100%;overflow:hidden;padding-bottom:9%;background:radial-gradient(circle at 78% 22%,#fff1c2 0 9%,transparent 9.5%),radial-gradient(circle at 18% 30%,rgb(255 255 255 / .45) 0 4%,transparent 4.5%),linear-gradient(#ffe0cc 0 70%,#ffcfb0 70%);box-shadow:0 30px 50px -36px rgb(0 0 0 / .5);transition:aspect-ratio var(--reveal) var(--ease),max-width var(--reveal) var(--ease)}
.rt-shot{container-type:inline-size}
.rt-shot .can{--w:14cqw}
.rt-shot .can:nth-child(3){--w:17cqw}
.rt-shot-word{position:absolute;left:6%;top:8%;font:600 clamp(1rem,7cqw,2.5rem)/1 var(--display);letter-spacing:-.03em;color:#0f4c47}
.rt-shot-word small{display:block;margin-top:6px;font:500 .75rem var(--sans);letter-spacing:0;opacity:.75}
.rt-frame[data-preset=social] .rt-shot{aspect-ratio:1;max-width:400px}
.rt-frame[data-preset=story] .rt-shot{aspect-ratio:9/16;max-width:230px}
.rt-frame[data-preset=story] .rt-shot .can{--w:24cqw}
.rt-frame[data-preset=story] .rt-shot .can:nth-child(3){--w:29cqw}
.rt-frame[data-preset=print] .rt-shot{aspect-ratio:3/4;max-width:320px}
.rt-spec{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.875rem;color:var(--muted)}
.rt-spec [data-for]{display:none}
.rt-frame[data-preset=web]~.rt-spec [data-for=web],.rt-frame[data-preset=social]~.rt-spec [data-for=social],.rt-frame[data-preset=story]~.rt-spec [data-for=story],.rt-frame[data-preset=print]~.rt-spec [data-for=print]{display:inline}
@media (min-width:1000px){.rt-frame{height:520px}}
.can-thumb{display:flex;align-items:flex-end;justify-content:center;gap:6%;aspect-ratio:4/3;padding-bottom:10%;border-radius:6px;background:#ffe0cc;overflow:hidden}
.can-thumb .can{--w:22%;border-radius:8px/5px}
.can-thumb .can::after{font-size:.5625rem}
.can-thumb.is-old{background:#e6e5ee;filter:grayscale(.6)}
.presets{display:flex;flex-wrap:wrap;gap:6px}
.portal-card{display:grid;gap:12px;padding:14px;border:1px solid var(--ui-border);border-radius:var(--ui-radius)}
.pick-label{display:block;margin:0 0 8px;font-size:.8125rem;color:var(--muted)}
.win-body--solo{min-height:380px}
@media (min-width:641px){.win-body--solo{grid-template-columns:minmax(0,1fr)}}
.gh::before{content:"";display:inline-block;width:1em;height:1em;margin-right:.4em;vertical-align:-.14em;background:url(/logos/github.svg) center/contain no-repeat}
@media (min-width:641px){.thumbs--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.row-main{flex:1 1 auto}
.row-main>span{min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){.ui-rows>*{flex-wrap:wrap}.ui-rows .end{margin-left:auto}}
@media (min-width:641px){.ag-site{min-height:420px}}