/* Business operator — builds on campaign.css tokens.
   Calm by design: open sections instead of boxes, hairlines instead of borders, one accent
   ("cue", blue) reserved for "act here" and "live". At most one level of container anywhere.
   Kinds of knowledge keep fixed colors: known (ink), inference (violet), hypothesis (amber), assumption (grey). */
:root{--k-known:#0b1b33;--k-inference:#6a3fd4;--k-hypothesis:#b45309;--k-assumption:#6c778b;--surface-2:#fafafb;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px}
:root[data-theme="dark"]{--k-known:#e9eef7;--k-inference:#b69dff;--k-hypothesis:#f3b45c;--k-assumption:#98a1b3;--surface-2:#141419}
.operator-page{--page:1040px}
.operator-page #workspace{padding-bottom:150px}
.operator-page #toast{bottom:92px}
/* Helpers the operator page relies on even when it is styled on its own. */
.sr-only{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}
[hidden]{display:none!important}

/* Memory: what Saygo remembers, as one quiet list grouped by area. */
.memory-main{min-width:0}
.memory-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.memory-toolbar .seg{flex-wrap:wrap}
.memory-tools{display:flex;align-items:center;gap:10px;min-width:0;margin-left:auto}
.memory-search{position:relative;display:flex;align-items:center;min-width:180px}
.memory-search input{width:100%;min-width:0;height:30px;padding:0 10px 0 29px;background:var(--input);border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:12.5px}
.memory-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.memory-search-icon{position:absolute;left:9px;display:grid;place-items:center;color:var(--text-4);pointer-events:none}
.memory-search-icon .icon{width:14px;height:14px}
.memory-more>summary{display:inline-flex;align-items:center;gap:3px;height:30px;padding:0 8px;border-radius:var(--r-sm);color:var(--text-3);font-size:12px;font-weight:500;list-style:none;cursor:pointer;transition:color .15s,background .15s}
.memory-more>summary::-webkit-details-marker{display:none}
.memory-more>summary:hover{color:var(--text)}
.memory-more>summary.on{color:var(--text)}
.memory-more>summary .icon{width:13px;height:13px;transition:transform .15s}
.memory-more[open]>summary{color:var(--text)}
.memory-more[open]>summary .icon{transform:rotate(180deg)}
.memory-more .menu-list .button[aria-current="true"]{background:var(--bg-3);color:var(--text)}
.memory-scope-note{font-size:12px;line-height:1.6;color:var(--text-3);margin:12px 0 4px}
.memory-group{margin:30px 0 4px;font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.memory-group:first-child{margin-top:20px}
.memory-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:0 16px;align-items:start;border-top:1px solid var(--line);padding:12px 0}
.memory-record{display:grid;grid-template-columns:minmax(150px,250px) minmax(0,1fr);gap:2px 24px;align-items:baseline;min-width:0}
.memory-row h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 8px;margin:0;font-size:13.5px;font-weight:500;letter-spacing:-.01em}
.memory-row h3 .memory-flag{font-size:11px;font-weight:400;color:var(--text-4)}
.memory-value{font-size:13px;line-height:1.6;color:var(--text-2);margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.memory-record .more{grid-column:1/-1;margin-top:2px}
.memory-row-actions{display:flex;gap:2px;flex:none;align-self:center;opacity:0;pointer-events:none;transition:opacity .15s}
.memory-row:hover .memory-row-actions,.memory-row:focus-within .memory-row-actions{opacity:1;pointer-events:auto}
.memory-row-actions .button{font-size:11.5px;padding:4px 7px}
/* 'Source' is the row's quiet disclosure: it sits with the actions, appears on hover or focus,
   and its content opens under the row. The details element stays for open state and keyboard. */
.memory-source{grid-column:3;grid-row:1;align-self:center;min-width:0}
.memory-source[open]{grid-column:1/-1;grid-row:auto;margin-top:6px}
.memory-source[open]>summary{margin-bottom:-2px}
.memory-row .memory-source>summary{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 7px;border-radius:var(--r-sm);font-size:11.5px;font-weight:500;color:var(--text-2);opacity:0;pointer-events:none;transition:opacity .15s,background .15s,color .15s}
.memory-row:hover .memory-source>summary,.memory-row:focus-within .memory-source>summary,.memory-row .memory-source[open]>summary{opacity:1;pointer-events:auto}
.memory-row .memory-source>summary:hover{background:var(--bg-3);color:var(--text)}
.memory-row .memory-source>summary::before{width:4px;height:4px}
.memory-source .memory-provenance,.memory-source .memory-evidence{margin-top:8px}
.memory-inactive .memory-record,.memory-inactive .memory-source{opacity:.62}
.memory-provenance{display:grid;grid-template-columns:56px minmax(0,1fr);gap:5px 12px;font-size:12px;color:var(--text-2)}
.memory-provenance dt{color:var(--text-3)}
.memory-provenance dd{margin:0;overflow-wrap:anywhere}
.memory-evidence{font-size:12px;overflow-wrap:anywhere}
.memory-evidence a{text-decoration-color:var(--line-3);text-underline-offset:3px}
.memory-pagination{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 0;border-top:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-3)}
.memory-pagination>div{display:flex;gap:5px}
.memory-context{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.7 var(--mono);color:var(--text-2);max-height:55vh;overflow:auto;padding:16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm)}
.memory-empty{padding:34px 0 6px;border-top:1px solid var(--line)}
.memory-empty h2{font-size:18px;font-weight:500;letter-spacing:-.02em;margin:10px 0}
.memory-empty p{max-width:45ch;font-size:13px;color:var(--text-2);line-height:1.7}

/* Journal rows keep the same one-line look; their small meta sits under the title. */
.journal-row .memory-record{grid-template-columns:1fr}
.journal-row h3{flex-direction:column;align-items:flex-start;gap:2px}
.journal-row h3 .memory-kind{font-size:11.5px;font-weight:400;color:var(--text-3)}
.journal-row mark{background:var(--cue-soft);color:var(--text);border-radius:2px;padding:0 1px}
.journal-body{margin-top:8px;max-height:340px;overflow:auto}

/* Actions stay reachable without hovering: always shown on touch devices. */
@media(hover:none){.memory-row-actions{opacity:1;pointer-events:auto}.memory-row .memory-source>summary{opacity:1;pointer-events:auto}}
@media(max-width:760px){.memory-row-actions .button{min-height:40px}.memory-row .memory-source>summary{min-height:40px}.memory-search input{font-size:16px}}
@media(max-width:640px){
 .memory-row{grid-template-columns:1fr;gap:6px}
 .memory-record{grid-template-columns:1fr;gap:3px}
 .memory-row-actions{margin-left:-7px}
 .memory-source{grid-column:1/-1;grid-row:auto;margin-left:-7px}
}

/* ── Header & tabs ── */
.project-title strong{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.operator-page #biz-line{font-size:12px;color:var(--text-3)}
.operator-page .demo-label{display:inline-flex}
.stage-chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:8px;border:0;background:transparent;color:var(--text-2);font-size:12.5px;font-weight:500}
.stage-chip:hover{background:var(--bg-2);color:var(--text)}
.lvl{display:inline-block;width:14px;height:6px;border-radius:2px;background:linear-gradient(90deg,var(--cue) 0 33%,var(--line-3) 33% 36%,var(--line-2) 36% 66%,var(--line-3) 66% 69%,var(--line-2) 69%)}
.lvl-2{background:linear-gradient(90deg,var(--cue) 0 66%,var(--line-3) 66% 69%,var(--line-2) 69%)}
.lvl-3{background:var(--cue)}
.biz-tabs{position:sticky;top:var(--header);z-index:3;display:flex;gap:2px;padding:0 20px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);overflow-x:auto;scrollbar-width:none}
.biz-tabs::-webkit-scrollbar{display:none}
.biz-tabs button{position:relative;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 12px;border:0;background:none;color:var(--text-3);font-size:13px;font-weight:500;white-space:nowrap;transition:color .15s}
.biz-tabs button:hover{color:var(--text)}
.biz-tabs button.active{color:var(--text)}
.biz-tabs button.active::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:var(--cue)}
.biz-tabs .icon{width:15px;height:15px}
.biz-tabs .tab-end{margin-left:auto}
/* On desktop the sidebar holds every section, so the top tabs stay hidden; phones keep them. */
@media(min-width:761px){.operator-page .biz-tabs{display:none}}

/* ── Page scaffolding ── */
.page{max-width:var(--page);margin:0 auto;padding:32px 32px 40px}
/* Website keeps its wider stage; every other page column stays centred at 1040px. */
.page-website{max-width:1380px}
/* Every page starts 40px below the header on desktop, Website and Videos included; phones
   keep their own tighter top spacing. */
@media(min-width:761px){#workspace .page{padding-top:40px}}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px}
.page-head .eyebrow{font-size:12px;color:var(--text-3);margin-bottom:6px}
.page-head h1{font-size:28px;line-height:1.1;font-weight:500;letter-spacing:-.035em}
.lede{margin-top:8px;font-size:14px;line-height:1.55;color:var(--text-2);max-width:64ch}
/* The More pages get Home's editorial head: serif title, one-line lede, small uppercase eyebrow. */
#workspace .page-head .eyebrow{font:500 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase}
#workspace .page-head h1{font:600 clamp(24px,2.6vw,30px)/1.15 var(--sans);letter-spacing:-.025em;color:inherit}
#workspace .lede{margin-top:8px;font-size:16px;line-height:1.5;max-width:66ch}
.page-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:none}
/* Centre the buttons on the h1's first line on desktop; phones keep their stacked layout. */
@media(min-width:761px){.page-actions{margin-top:1px}}
/* One muted practice-data line, directly under the header, replacing the old chip. */
#workspace .page-practice{margin:-14px 0 16px;font-size:12.5px;line-height:1.6;color:var(--text-3)}
/* Every control on a page keeps Home's visible focus ring. */
#workspace .page button:focus-visible,#workspace .page a:focus-visible,#workspace .page summary:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
/* Tables on the More pages: quiet labels, hairline rows, tabular numbers. The Videos table
   keeps its own styling — another task owns that page. */
.operator-page .page:not(.page-growth) .list-table th{font:500 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);background:transparent;padding:12px 14px}
.operator-page .page:not(.page-growth) .list-table td{padding:12px 14px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.sec{margin-top:40px;min-width:0}
.sec-head{display:flex;align-items:center;gap:10px;min-height:32px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sec-head h2{display:flex;align-items:center;font-size:13.5px;font-weight:500;letter-spacing:-.01em;color:var(--text)}
.sec-meta{font-size:12px;color:var(--text-3)}
.sec-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
#approvals .sec-meta{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--cue-fill);color:var(--cue-ink);font:600 11px/20px var(--mono);text-align:center}
.split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:0 56px;align-items:start}
.stack{display:flex;flex-direction:column;min-width:0}
.none{display:flex;align-items:center;gap:8px;padding:16px 0;margin:0;font-size:13px;line-height:1.6;color:var(--text-3)}
.none .icon{color:var(--cue)}
.sub-label{display:block;margin:18px 0 2px;font-size:12px;font-weight:500;color:var(--text-3)}
.prose{font-size:14px;line-height:1.65;color:var(--text-2);max-width:72ch;margin:14px 0 0}
.plain{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.65;color:var(--text-2)}
.plain.two{columns:2;column-gap:32px}
.plain.mono{font-size:11.5px}
.plain a{color:var(--cue)}
.empty-page{padding:80px 0;text-align:center;color:var(--text-2)}
.callout{margin-top:18px}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cue);margin-right:9px;animation:pulse 1.4s ease-in-out infinite}
.sim-dot{color:var(--k-inference)}.src-dot{color:var(--cue);font-weight:600}
.small{font-size:12px}
.block-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--text-3);margin-bottom:6px}

/* Disclosure: one quiet style for every "show more". */
details.more>summary,details.measure>summary,details.results-more>summary{display:inline-flex;align-items:center;gap:7px;padding:8px 0;list-style:none;cursor:pointer;font-size:12.5px;font-weight:500;color:var(--text-3);transition:color .15s}
details.more>summary::-webkit-details-marker,details.measure>summary::-webkit-details-marker,details.results-more>summary::-webkit-details-marker{display:none}
details.more>summary::before,details.measure>summary::before,details.results-more>summary::before{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details.more[open]>summary::before,details.measure[open]>summary::before,details.results-more[open]>summary::before{transform:rotate(45deg) translate(-1px,-1px)}
details.more>summary:hover,details.measure>summary:hover,details.results-more>summary:hover{color:var(--text)}
details.more>summary .icon{width:13px;height:13px}
details summary{cursor:pointer}

/* Hairline rows: the basic list everywhere. */
.rows{list-style:none;margin:0;padding:0}
.row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row>div{min-width:0}
.row strong{display:block;font-size:13.5px;font-weight:500;line-height:1.4}
.row small{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.row>.spinner{margin:3px 0 0;width:12px;height:12px;flex:none}
.row>.icon{width:14px;height:14px;margin-top:3px;color:var(--cue)}
.dot{width:7px;height:7px;margin-top:6px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px var(--text-4)}
.st-waiting_data .dot{background:var(--k-inference);box-shadow:none}
.st-waiting_approval .dot{background:var(--warn);box-shadow:none}
.st-failed .dot{background:var(--danger);box-shadow:none}
.st-failed strong{color:var(--danger)}
/* Status as text + dot (no pills). */
.state{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text-3);white-space:nowrap}
.state i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.state.st-approved,.state.st-connected,.state.st-concluded,.state.st-available{color:var(--cue)}
.state.st-draft,.state.st-running,.state.st-error{color:var(--warn)}
.state.st-planned,.state.st-superseded,.state.st-not_connected,.state.st-not_configured,.state.st-disconnected{color:var(--text-3)}
/* Kinds of knowledge: one pill per kind, the same mapping as .kind; .k-dot stays a plain dot. */
.k-tag{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;font:500 11px/1 var(--sans);white-space:nowrap;background:var(--bg-2);color:var(--text-3)}
.k-tag i{display:none}
.k-tag.k-known{background:var(--good-soft);color:var(--good)}
.k-tag.k-inference{background:var(--cue-soft);color:var(--cue)}
.k-tag.k-hypothesis{background:var(--violet-soft);color:var(--violet)}
.k-tag.k-assumption{background:var(--bg-2);color:var(--text-3)}
.k-tag.k-proven{background:var(--good-soft);color:var(--good);font-weight:600}
.k-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;background:var(--k-assumption)}
.k-known i,.k-dot.k-known{background:var(--k-known)}
.k-inference i,.k-dot.k-inference{background:var(--k-inference)}
.k-hypothesis i,.k-dot.k-hypothesis{background:var(--k-hypothesis)}
.k-assumption i,.k-dot.k-assumption{background:transparent;box-shadow:inset 0 0 0 1.5px var(--k-assumption)}
.proven{color:var(--cue);font-weight:500}
.ok{color:var(--cue)}
.seg,.seg-nav{display:inline-flex;padding:2px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line)}
.seg button,.seg-nav button{height:26px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--text-3);font-size:12px;font-weight:500;transition:color .15s,background .15s}
.seg button:hover,.seg-nav button:hover{color:var(--text)}
.seg button.on,.seg-nav button.on{background:var(--bg-4);color:var(--text)}
.seg-nav{margin:-8px 0 12px}

/* ── Business pages (r4b): cards, empty states, skeleton bars, row boxes, kind pills ── */
/* The sub-navigation is Home's segmented control. */
.sub-nav{display:inline-flex;padding:3px;margin:0 0 22px;border-radius:11px;background:var(--bg-3);border:0;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.sub-nav::-webkit-scrollbar{display:none}
.sub-nav button{height:32px;padding:0 16px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font:500 13px var(--sans);white-space:nowrap;cursor:pointer;transition:color .18s var(--ease),background .18s var(--ease)}
.sub-nav button:hover{color:var(--text)}
.sub-nav button.on{background:var(--card);color:var(--text);box-shadow:var(--shadow-card)}
.sub-nav button:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
.sub-nav .seg-count{margin-left:7px;font:10.5px var(--mono);color:var(--text-4)}
.sub-nav button.on .seg-count{color:var(--text-3)}
/* Card header actions sit in one line on the right. */
.hcard-head .button{flex:none}
/* A section title between groups of cards. */
.biz-sec-title{margin:0 0 12px;font:600 15px/1.3 var(--sans);letter-spacing:-.01em;color:var(--home-ink)}
/* Empty states: a 36px soft tile, a title, one muted line and at most one action, centred. */
.biz-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 16px}
.biz-empty-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--cue-soft);color:var(--cue);flex:none}
.biz-empty-ic .icon{width:18px;height:18px}
.biz-empty strong{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--home-ink)}
.biz-empty p{margin:0;max-width:46ch;font-size:13px;line-height:1.55;color:var(--text-3)}
.biz-empty .button{margin-top:6px}
/* Skeleton bars for a page still loading. */
.biz-skel{display:flex;flex-direction:column;gap:12px}
.biz-skel span{display:block;height:12px;border-radius:6px;background:var(--bg-3)}
.biz-skel .sk-h{width:40%;height:18px}
@media(prefers-reduced-motion:no-preference){
 .biz-skel span{background:linear-gradient(100deg,var(--bg-3) 30%,var(--bg-2) 50%,var(--bg-3) 70%);background-size:220% 100%;animation:sk-shimmer 2.4s ease-in-out infinite}
}
/* The first paint, before the owner's own page is known: a neutral page skeleton, no words. */
.boot-skel{max-width:var(--page);margin:0 auto;padding:40px 32px}
.boot-skel-head{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.boot-skel-head .boot-h{width:36%;height:28px;border-radius:8px}
.boot-skel-head .boot-l{width:55%;height:12px;border-radius:6px}
.boot-skel-cards{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
.boot-card{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow-card)}
.boot-skel .boot-h,.boot-skel .boot-l,.boot-card span{display:block;background:var(--bg-3)}
.boot-card span{height:12px;border-radius:6px}
.boot-card span:nth-child(1){width:72%}
.boot-card span:nth-child(2){width:94%}
.boot-card span:nth-child(3){width:48%}
@media(prefers-reduced-motion:no-preference){
 .boot-skel .boot-h,.boot-skel .boot-l,.boot-card span{background:linear-gradient(100deg,var(--bg-3) 30%,var(--bg-2) 50%,var(--bg-3) 70%);background-size:220% 100%;animation:sk-shimmer 2.4s ease-in-out infinite}
}
@media(max-width:760px){
 .boot-skel{padding:24px 16px}
 .boot-skel-cards{grid-template-columns:1fr}
}
/* A row box with an icon tile, as Home's 'Needs you'. */
.biz-row{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.biz-row:first-child{border-top:0}
.biz-row-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none}
.biz-row-ic .icon{width:19px;height:19px}
.biz-row-ic.b{background:var(--cue-soft);color:var(--cue)}
.biz-row-ic.v{background:var(--violet-soft);color:var(--violet)}
.biz-row-ic.w{background:var(--warn-soft);color:var(--warn)}
.biz-row-ic.good{background:var(--good-soft);color:var(--good)}
.biz-row-main{flex:1;min-width:0}
.biz-row-main strong{display:block;font-size:13.5px;font-weight:500;line-height:1.4}
.biz-row-main small{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.biz-row-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px;flex:none}
/* Kind of knowledge as a pill: Fact good, My read brand, Worth testing violet, Assumed neutral. */
.kind{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;background:var(--bg-2);color:var(--text-2);font:500 11px/1 var(--sans);white-space:nowrap;vertical-align:middle}
.kind-known{background:var(--good-soft);color:var(--good)}
.kind-inference{background:var(--cue-soft);color:var(--cue)}
.kind-hypothesis{background:var(--violet-soft);color:var(--violet)}
.kind-assumption{background:var(--bg-2);color:var(--text-3)}

/* Your plan: one card per section; kind pills beside each label. */
.plan-cards-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:1100px){
 .plan-cards-grid{display:block;columns:2;column-gap:16px}
 .plan-cards-grid>.hcard{break-inside:avoid;display:block;width:100%;margin:0 0 16px}
}
.plan-card .plan-facts{display:grid;gap:0}
.plan-body .fact dt{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--text-2)}
.plan-body .fact dt strong{font-size:13.5px;font-weight:600;color:var(--home-ink)}
/* Launch checklist: a card per section with a progress bar in the header. */
.launch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.launch-card .hcard-head{margin-bottom:12px}
.lbar{height:6px;border-radius:9px;background:var(--bg-3);overflow:hidden;margin:0 0 6px}
.lbar i{display:block;height:100%;border-radius:9px;background:var(--cue);transition:width .4s var(--ease)}
.checklist .lrow{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.checklist .lrow:last-child{border-bottom:0}
.lchk{width:18px;height:18px;margin-top:1px;border-radius:50%;border:1.5px solid var(--line-3);display:grid;place-items:center;flex:none}
.lchk.done{background:var(--good);border-color:var(--good);color:#fff}
.lchk.done .icon{width:11px;height:11px;stroke-width:3}
.lrow-main{flex:1;min-width:0}
.lrow-main strong{display:block;font-size:13.5px;font-weight:500}
.lrow.done .lrow-main strong{color:var(--text-2)}
.lrow-main small{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.lrow-actions{display:flex;gap:6px;flex:none}

/* What I know: one card per area, a compact row per fact; actions appear on hover or focus. */
.memory-area{margin-bottom:0}
.memory-area+.memory-area{margin-top:28px}
.mem-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:1100px){.mem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mem-card{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow-card);min-width:0}
.hcard.mem-list{padding:4px 20px}
.mem-row{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) auto auto;gap:4px 20px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line)}
.mem-row:first-child{border-top:0}
.mem-key{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.mem-key h3{margin:0;font-size:13.5px;font-weight:600}
.mem-row .memory-value{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere}
.mem-row-actions{display:flex;gap:2px;opacity:0;pointer-events:none;transition:opacity .15s}
.mem-row:hover .mem-row-actions,.mem-row:focus-within .mem-row-actions{opacity:1;pointer-events:auto}
.mem-row-actions .button{font-size:11.5px;padding:4px 7px}
.mem-row .memory-source{grid-column:4;grid-row:1;align-self:center;margin:0}
.mem-row .memory-source[open]{grid-column:1/-1;grid-row:auto;margin-top:6px}
.mem-row .memory-source>summary{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0;margin-left:0;font-size:12px;color:var(--text-3);list-style:none;cursor:pointer;transition:color .15s}
.mem-row .memory-source>summary:hover{color:var(--text)}
.mem-row.memory-inactive{opacity:.62}
@media(hover:none){.mem-row-actions{opacity:1;pointer-events:auto}}
@media(max-width:640px){.mem-row{grid-template-columns:minmax(0,1fr) auto;gap:4px}.mem-key,.mem-row .memory-value{grid-column:1/-1}.mem-row-actions{grid-column:1;grid-row:3;opacity:1;pointer-events:auto}.mem-row-actions .button{min-height:40px}.mem-row .memory-source{grid-column:2;grid-row:3;margin:0}.mem-row .memory-source[open]{grid-column:1/-1;grid-row:auto}.mem-row .memory-source>summary{min-height:40px}}
.memory-search input{height:40px;padding:0 12px 0 34px;font-size:13px}
.memory-search-icon{left:11px}
.memory-search-icon .icon{width:16px;height:16px}
.memory-main .memory-search{width:min(320px,100%)}
/* The journal's rows stay rows inside one card. */
.journal-card{display:flex;flex-direction:column}

/* AI team: request card, selectable 'who' pills, suggestion pills, member cards. */
.composer-row{flex-wrap:wrap;row-gap:8px}
.who-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.who-pill{height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--text-2);font-size:12.5px;font-weight:500;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.who-pill:hover{border-color:var(--line-3);color:var(--text)}
.who-pill.on{background:var(--cue-soft);border-color:var(--cue-line);color:var(--cue)}
.team-card-wrap .mem-grid{margin-top:2px}
/* Team members are compact row cards: a tile, the name and title, then Ask at the right. */
.team-card-wrap .mem-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1099px){.team-card-wrap .mem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.team-card-wrap .mem-grid{grid-template-columns:1fr}}
.team-card{flex-direction:row;align-items:center;gap:12px;padding:14px}
.team-card .member-glyph{width:36px;height:36px;border-radius:10px}
.team-card .member-glyph .icon{width:18px;height:18px}
.team-card .team-card-main{flex:1;min-width:0}
.team-card .team-card-main h3{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--home-ink)}
.team-card .memory-value{margin:2px 0 0;font-size:12.5px;color:var(--text-3)}
.team-card>.button{flex:none;margin-left:auto}
.jobs-card{min-width:0}
/* Drafts keep their quiet disclosure rows inside the card. */
.drafts-body .draft>summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:12px 0}
.drafts-body .draft>summary .draft-kind{flex-basis:100%;grid-row:auto;padding-top:0;font-size:11.5px;color:var(--text-3)}
.drafts-body .draft>summary strong{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drafts-body .draft>summary .pill{flex:none;margin-left:0}
.drafts-body .draft>summary small{flex-basis:100%;margin-top:0;margin-left:0;font-size:12px;color:var(--text-3)}

/* Results: KPI-strip numbers, not-tracked pills, charts inside cards. */
.funnel-card,.daily-card,.areas-card,.decisions-card,.lead-card,.worked-card,.testing-card,.competitors-card,.metrics-card,.brief-card,.inprogress-card,.learned-card,.approvals-card{min-width:0}
.page-health .sec{margin:0}
.funnel{margin-top:2px}
.areas-card .areas{margin-top:2px;row-gap:0}
/* No hairline under the items in the last grid row. */
.areas-card .area:last-child{border-bottom:0}
@media(min-width:1100px){.areas-card .area:nth-last-child(2):nth-child(odd){border-bottom:0}}
/* Cards hold the numbers and charts directly, so drop the old section rules. */
.metrics-card .nums{margin-top:0;border-top:0}
.page-today .stack{gap:16px}
.page-agents .split,.page-today .split{gap:16px;align-items:start}
.page-agents .split>.hcard,.page-today .split>.hcard{min-width:0}
/* Presenters: the setup rows and the gallery sit in cards. */
.share-card .cast-grid,.share-card .vid-grid{margin-top:2px}
.setup-card .setup-rows{margin-top:2px;border-top:0}
.setup-card .setup-line{padding:12px 0;border-bottom:1px solid var(--line)}
.setup-card .setup-line:last-child{border-bottom:0}
.setup-card .setup-line .biz-row-main strong{display:block;font-size:13.5px;font-weight:500}
.setup-card .setup-line .biz-row-main small{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.setup-card details.setup-way{display:block}
.setup-card details.setup-way>summary{display:flex;align-items:center;gap:14px;list-style:none;cursor:pointer;width:100%;flex-wrap:wrap}
.setup-card details.setup-way>summary::-webkit-details-marker{display:none}
.setup-card details.setup-way>summary .biz-row-main{flex:1;min-width:0}
.setup-card .setup-alt{flex-basis:100%;padding-left:52px}
.setup-card .setup-way-body{padding:0 0 14px 52px}
.setup-card .setup-ready{margin:2px 0 0}

.theme-seg button{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 14px}
.theme-seg .icon{width:14px;height:14px}
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:900px){.plan-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.plan-cell{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-1)}
.plan-cell span{font-size:12px;color:var(--text-3)}
.plan-cell strong{font:600 22px/1.1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan-cell strong small{font:12px var(--sans);color:var(--text-3)}
.plan-bar{display:block;height:4px;border-radius:2px;background:var(--bg-3);overflow:hidden}
.plan-bar i{display:block;height:100%;background:var(--cue)}
/* Settings → Plan: the cards, the usage grid's home and the limits each plan gives. */
.plan-cards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:4px}
@media(min-width:900px){.plan-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:20px;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow-card);transition:border-color .2s,box-shadow .2s}
.plan-card.current{border-color:var(--cue-line);box-shadow:0 0 0 3px var(--cue-soft)}
.plan-card h3{margin:0;font:500 16px/1.2 var(--sans);letter-spacing:-.01em;color:var(--home-ink)}
.plan-price{margin-top:5px;font:13px/1.4 var(--sans);color:var(--text-3)}
.plan-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.plan-lines li{font-size:12.5px;line-height:1.5;color:var(--text-3);overflow-wrap:anywhere}
.plan-actions{margin-top:auto}
.plan-cards .button{max-width:100%;white-space:normal;height:auto;min-height:32px;padding:6px 10px;line-height:1.2;text-align:center}
.plan-badge{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:12px;background:var(--cue-soft);color:var(--cue);font:600 11px/1 var(--sans);white-space:nowrap}
.plan-renew{margin:0 0 10px;font-size:13px;color:var(--text-2)}
.settings-body>.callout{margin:0 0 16px}
.notice-link{margin-left:6px;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.account-menu>summary{list-style:none;cursor:pointer}
.account-menu>summary::-webkit-details-marker{display:none}
.account-chip{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;overflow:hidden;background:var(--cue-soft);color:var(--cue);font-weight:600;font-size:13px;border:1px solid var(--line-2)}
.account-chip img{width:100%;height:100%;object-fit:cover}
.account-who{padding:6px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.account-who strong{display:block;font-size:13px;font-weight:500}
.account-who small{display:block;font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis}
.account-legal{display:flex;gap:12px;padding:8px 10px 4px;border-top:1px solid var(--line);margin-top:4px}
.account-legal a{font-size:12px;color:var(--text-3);text-decoration:none}
.account-legal a:hover{color:var(--text)}
/* Settings → AI: one plain status line first; the model picker and everything technical sit
   behind closed details elements. */
#ai-model-picker>.or-models{margin-top:12px}
.or-models{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:18px}
.or-family h3{font-size:12px;font-weight:500;color:var(--text-3);margin-bottom:8px}
.or-family .choice{width:100%;margin-bottom:6px;overflow-wrap:anywhere}
.or-free{margin-left:auto;padding:1px 7px;border-radius:6px;background:var(--cue-soft);color:var(--cue);font:600 10px var(--mono)}
.or-best{margin-left:6px;padding:1px 7px;border-radius:6px;background:var(--good-soft);color:var(--good);font:600 10px var(--mono);white-space:nowrap}
.or-best.or-push{margin-left:auto}
.ai-advanced{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.ai-advanced>details.more{margin-top:14px}
.ai-advanced .choice-grid{margin-top:4px}
@media(max-width:640px){.or-models{grid-template-columns:1fr}}
.seg-nav button{height:30px;padding:0 16px;font-size:12.5px}

/* ── Details ── */
.brief{max-width:760px}
.brief-lead{font:600 clamp(17px,2.55vw,23px)/1.3 var(--sans);letter-spacing:-.025em;color:var(--home-ink)}
.brief-lines{list-style:none;margin:12px 0 0;padding:0}
.brief-lines li{position:relative;padding-left:18px;font-size:14px;line-height:1.75;color:var(--text-2)}
.brief-lines li::before{content:'';position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--text-4)}
.focus{display:flex;align-items:flex-start;gap:14px;margin-top:22px;padding:14px 16px;border-radius:12px;background:var(--bg-1);box-shadow:inset 2px 0 0 var(--warn)}
.focus-tag{flex:none;margin-top:2px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--warn)}
.focus strong{display:block;font-size:14px;font-weight:500;line-height:1.45}
.focus span:not(.focus-tag){display:flex;align-items:center;gap:6px;margin-top:4px;font-size:13px;color:var(--text-2)}
.focus span .icon{width:14px;height:14px;color:var(--cue)}
.metrics{margin-top:36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.metric-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.metric{display:flex;flex-direction:column;gap:4px;min-width:0;padding:18px 16px 16px 20px;border-left:1px solid var(--line)}
.metric:first-child{padding-left:0;border-left:0}
.metric-label{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric-value{font:500 25px/1.15 var(--mono);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric-sub{font-size:11.5px;color:var(--text-3);display:flex;flex-wrap:wrap;gap:4px 8px;min-height:16px}
.metric .src{font-size:11px;color:var(--text-4)}
.metric .src.sim,.metric-foot .sim{color:var(--k-inference)}
.metric .partial{color:var(--warn)}
.delta{font-weight:500}
.delta.good{color:var(--good)}.delta.bad{color:var(--danger)}.delta.neutral{color:var(--text-3)}
.metric-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;padding:10px 0;border-top:1px solid var(--line);font-size:12px;color:var(--text-3)}
.metric-foot .measure{margin-left:auto}
.metric-foot .measure[open]{flex-basis:100%;margin-left:0}
.measure .measurement-panel{margin:6px 0 10px}
.approval{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.approval:last-child{border-bottom:0}
.approval-meta{font-size:12px;color:var(--text-3)}
.approval-meta b{color:var(--warn);font-weight:500}
.approval h3{margin-top:4px;font-size:15px;line-height:1.4;font-weight:500;letter-spacing:-.015em}
.approval-main p{margin-top:4px;font-size:13px;line-height:1.55;color:var(--text-2)}
.approval-actions{display:flex;align-items:flex-start;gap:4px;padding-top:2px}
.approval-more{grid-column:1/-1;margin-top:4px}
/* Needs you rows: the icon tile, the text, then the buttons, wrapping under the text. */
.approval.biz-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 14px;padding:14px 0}
.approval.biz-row>.biz-row-ic{flex:none}
.approval.biz-row .approval-main{flex:1 1 240px;min-width:0}
.approval.biz-row .approval-actions{flex:none;display:flex;align-items:center;gap:6px;padding-top:0;margin-top:0}
.approval.biz-row .approval-more{flex-basis:100%;padding-left:52px}
@media(max-width:640px){.approval.biz-row .approval-actions{flex-basis:100%;padding-left:52px}}
.approval-more>p{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--text-2)}
.approval-more>.button{margin-top:10px}
.approval-facts{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:8px 0 0;padding:12px 14px;border-radius:10px;background:var(--bg-1);font-size:12.5px}
.approval-facts dt{color:var(--text-3)}.approval-facts dd{margin:0;font-family:var(--mono);color:var(--text)}
.why-asking{display:flex;gap:7px;align-items:flex-start;font-size:12px!important;color:var(--text-3)!important}
.why-asking .icon{width:13px;height:13px;margin-top:2px;flex:none}
.approvals .approval:first-child{padding-top:14px}
.learning{padding:14px 0;border-bottom:1px solid var(--line)}
.learning:last-child{border-bottom:0}
.learning p{font-size:14.5px;line-height:1.55;letter-spacing:-.01em;color:var(--text)}
.learning-meta{display:block;margin-top:6px;font-size:12px;color:var(--text-3)}
.learning-meta .sim{color:var(--k-inference)}

/* Measurement evidence (coverage per metric). */
.measurement-panel{border:1px solid var(--line);border-radius:12px;background:var(--bg-1);overflow:hidden;margin-bottom:8px}
.measurement-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px}
.measurement-heading .eyebrow{font-size:11.5px;color:var(--text-3);margin-bottom:4px}
.measurement-heading h2{font-size:15px;font-weight:500;letter-spacing:-.02em}
.measurement-period{font-size:12px;color:var(--text-2);white-space:nowrap}
.measurement-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line)}
.measurement-cell{padding:14px 18px;border-right:1px solid var(--line);min-width:0}
.measurement-cell:last-child{border-right:0}
.measurement-cell>span{display:block;font-size:12px;color:var(--text-2)}
.measurement-cell strong{display:block;font-size:13.5px;font-weight:500;margin:4px 0 10px}
.measurement-cell.partial strong{color:var(--warn)}
.measurement-cell.missing strong{color:var(--text-3)}
.measurement-cell small{display:block;color:var(--text-3);font-size:11px;line-height:1.5;margin-top:8px;overflow-wrap:anywhere}
.coverage-ticks{display:flex;gap:4px;max-width:150px}
.coverage-ticks i{flex:1;height:3px;background:var(--line-3);border-radius:1px}
.coverage-ticks i.filled{background:var(--cue)}
.measurement-cell.partial .coverage-ticks i.filled{background:var(--warn)}
.measurement-explain{padding:0 18px;border-bottom:1px solid var(--line)}
.measurement-explain summary{display:flex;align-items:center;gap:8px;list-style:none;min-height:44px;padding:10px 0;color:var(--text);font-size:12.5px}
.measurement-explain summary::-webkit-details-marker{display:none}
.measurement-explain summary .icon{width:14px;height:14px;color:var(--cue)}
.measurement-explain[open] summary .icon{transform:rotate(45deg)}
.measurement-detail{padding:0 0 16px;max-width:900px}
.measurement-detail p{font-size:12.5px;color:var(--text-2);line-height:1.65;margin-bottom:12px}
.measurement-detail p:first-child{color:var(--text)}
.measurement-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.measurement-foot{padding:12px 18px;font-size:11.5px;line-height:1.65;color:var(--text-3);max-width:110ch}
.contribution-formula{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:4px 0 18px}
.contribution-formula>span{font:500 20px/1.4 var(--mono);color:var(--text)}
.contribution-formula small{display:block;font:11px/1.5 var(--sans);color:var(--text-3);max-width:180px;margin-top:5px}
.contribution-formula>b{color:var(--text-3);font-weight:400}
.contribution-formula>span:last-child{color:var(--cue)}
.measurement-empty{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:170px;gap:10px}
.measurement-empty>.icon{color:var(--text-3);width:24px;height:24px}
.measurement-empty strong{font-size:15px;font-weight:500}
.measurement-empty p{font-size:12.5px;line-height:1.65;color:var(--text-2);max-width:45ch}

/* ── Details: one hairline list of numbers in Home's voice ── */
.page-today{--home-gap:28px}
.page-today .sec{margin-top:var(--home-gap)}
.page-today .sec-head h2{font:500 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.nums{margin-top:var(--home-gap);border-top:1px solid var(--line)}
.nums-list{margin:0;padding:0;max-width:680px}
.metrics-card .nums-list{max-width:none}
.num-row{display:grid;grid-template-columns:minmax(140px,1fr) auto;align-items:baseline;gap:4px 20px;padding:14px 0;border-bottom:1px solid var(--line)}
.num-row dt{margin:0;font-size:13.5px;color:var(--text-2)}
.num-row dd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:4px 14px;margin:0;text-align:right}
.num-row dd strong{font:500 26px/1.15 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--home-ink)}
.num-change{font-size:12.5px;color:var(--text-3)}
.num-note{flex-basis:100%;font-size:12px;color:var(--text-3)}
.nums-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;padding:10px 0;font-size:12px;color:var(--text-3)}
.nums-foot .sim{color:var(--k-inference)}
.nums-foot .measure{margin-left:auto}
.nums-foot .measure[open]{flex-basis:100%;margin-left:0}
.nums-foot .measurement-panel{margin:6px 0 10px}
@media(max-width:640px){
 .num-row{grid-template-columns:1fr;gap:2px}
 .num-row dd{justify-content:flex-start;text-align:left}
 .num-row dd .num-change{flex-basis:100%}
}

/* ── Agents ── */
.composer{border:1px solid var(--line-2);border-radius:16px;background:var(--bg-1);padding:4px;transition:border-color .2s,box-shadow .2s}
.composer:focus-within{border-color:var(--cue-line);box-shadow:0 0 0 5px var(--cue-soft)}
.composer-input{display:flex;align-items:flex-end;gap:10px;padding:2px 6px 0 2px}
.composer textarea{display:block;flex:1;min-width:0;min-height:92px;resize:vertical;border:0;background:transparent;color:var(--text);font-size:16px;line-height:1.5;padding:12px 14px;outline:none;letter-spacing:-.01em}
.composer textarea::placeholder{color:var(--text-4)}
.composer-row{display:flex;align-items:center;gap:8px;padding:2px 10px 4px}
.composer-pick{font-size:12.5px;color:var(--text-3)}
.composer-row .select-wrap.small select{border-color:transparent;background:transparent;padding:4px 24px 4px 0;color:var(--text-2)}
.composer-row .select-wrap.small:hover select{color:var(--text)}
.composer-input .button.primary{height:36px;padding:0 14px;border-radius:10px;flex:none}
.composer-note{margin:10px 2px 0;font-size:12.5px;line-height:1.6;color:var(--text-3)}
.suggest-row{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.suggest-row button{height:30px;padding:0 12px;border-radius:15px;border:1px solid var(--line);background:transparent;color:var(--text-2);font-size:12.5px;transition:border-color .15s,color .15s,background .15s}
.suggest-row button:hover{border-color:var(--line-3);color:var(--text);background:var(--bg-1)}
.team{margin-top:28px}
.team-list{list-style:none;margin:0;padding:0}
.team-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.team-row:last-child{border-bottom:0}
.member-glyph{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--bg-2);border:1px solid var(--line);color:var(--text-2);flex:none}
.member-glyph .icon{width:16px;height:16px}
.team-who{flex:1;min-width:0}
.team-who strong{display:block;font-size:13px;font-weight:500;line-height:1.3}
.team-who small{display:block;font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-row .live-dot{margin-right:0}
.team-row .button{flex:none;margin-left:auto}
/* The two lists get Home's small uppercase labels and closer spacing. */
.page-agents .sec{margin-top:28px}
.page-agents .sec-head h2{font:500 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.page-agents .split{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
@media(max-width:1099px){.page-agents .split{grid-template-columns:1fr}}
/* Business pages: every vertical neighbour gets 16px, and side-by-side cards stretch to match. */
:is(.page-plan,.page-memory,.page-agents,.page-learnings,.page-health,.page-decisions,.page-today,.page-avatars)>:is(.hcard,.split,.plan-cards-grid,.launch-grid,.suggest-row)+:is(.hcard,.split,.plan-cards-grid,.launch-grid){margin-top:16px}
#workspace .page>.hcard+.hcard{margin-top:16px}
:is(.page-plan,.page-memory,.page-learnings,.page-health,.page-decisions,.page-avatars) .split{gap:16px;align-items:stretch}
.run{border-bottom:1px solid var(--line)}
.run:last-child{border-bottom:0}
.run>summary{display:flex;align-items:center;gap:12px;padding:12px 0;list-style:none;cursor:pointer}
.run>summary::-webkit-details-marker{display:none}
.run-icon{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--bg-2);color:var(--text-3);flex:none}
.run-icon .icon{width:11px;height:11px}
.run-icon .spinner{margin:0;width:11px;height:11px;border-width:1.5px}
.run-completed .run-icon{color:var(--cue)}
.run-failed .run-icon{background:var(--danger-soft);color:var(--danger)}
.run-main{min-width:0;flex:1}
.run-main strong{display:block;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.run-main small{display:block;margin-top:2px;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.run-body{display:grid;gap:12px;padding:0 0 18px 32px}
.run-body .callout{margin:0}
.run-body .micro-note{margin:0}
.run-summary{font-size:13.5px;line-height:1.65;color:var(--text);white-space:pre-line}
.run-steps{list-style:none;margin:0;padding:0}
.run-steps li{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--text-2)}
.run-steps li:first-child{border-top:0}
.run-steps li>.icon{width:13px;height:13px;margin-top:2px;flex:none;color:var(--cue)}
.run-steps li.bad>.icon{color:var(--danger)}
.run-steps li.bad span{color:var(--text-3)}
.run-steps li b{margin-left:8px;font:500 10.5px var(--mono);color:var(--text-3)}
.run-steps li small{display:block;font-size:12px;color:var(--text-3)}
.run-sources{display:flex!important;flex-wrap:wrap;gap:2px 12px}
.run-sources a{color:var(--cue);text-decoration:none}
.run-sources a:hover{text-decoration:underline}
.run-drafts{display:flex;flex-wrap:wrap;gap:6px}
.run-drafts button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-1);color:var(--text);font-size:12px}
.run-drafts button:hover{border-color:var(--line-3)}
.run-drafts .icon{width:13px;height:13px;color:var(--text-3)}
.run-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:11.5px;line-height:1.5;color:var(--text-3)}
.run-meta .button{margin-left:auto}
.draft{border-bottom:1px solid var(--line)}
.draft:last-of-type{border-bottom:0}
.draft>summary{display:grid;grid-template-columns:92px minmax(0,1fr);column-gap:12px;padding:12px 0;list-style:none;cursor:pointer}
.draft>summary::-webkit-details-marker{display:none}
.draft-kind{grid-row:1/3;padding-top:1px;font-size:12px;color:var(--text-3)}
.draft>summary strong{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.draft>summary small{margin-top:2px;font-size:12px;color:var(--text-3)}
.draft.d-used>summary strong{color:var(--text-2)}
.draft-body{margin:0 0 0 104px;padding:14px 16px;max-height:380px;overflow:auto;border-radius:10px;background:var(--bg-1);border:1px solid var(--line);font:13px/1.65 var(--sans);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.draft-actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:10px 0 16px 104px}
.draft-actions .micro-note{margin:0 0 0 auto}
.draft.flash>summary strong{animation:flash 1.4s var(--ease)}
@keyframes flash{0%,40%{color:var(--cue)}}
.drafts>.button{margin-top:10px}

/* ── Business (plan) ── */
.page-plan .sec:first-of-type{margin-top:8px}
/* The plan page uses the full page column, like every other business page. */
.plan-note{margin:0 0 4px;font-size:12.5px;line-height:1.6;color:var(--text-3)}
.plan-block{margin-top:30px}
.plan-block h3{margin:0 0 6px;font:500 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.plan-body .fact dt small{font-size:11.5px;color:var(--text-3)}
.plan-body .fact dd{margin-left:0;font-size:15px;line-height:1.55;color:var(--text)}
.plan-more{margin-top:10px}
.fact-check{padding-top:0}
details.fact-check>summary{padding:2px 0}
.fact-check p{margin:2px 0 0;font-size:13px;line-height:1.6;color:var(--text-2)}
.meter{height:4px;margin:16px 0 4px;border-radius:2px;background:var(--bg-3);overflow:hidden}
.meter i{display:block;height:100%;border-radius:2px;background:var(--cue);transition:width .4s var(--ease)}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.checklist li:last-child{border-bottom:0}
.checklist li>i{width:14px;height:14px;margin-top:2px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--line-3);flex:none}
.checklist li>.icon{width:14px;height:14px;margin-top:2px;color:var(--cue);flex:none}
.checklist li div{flex:1;min-width:0}
.checklist strong{display:block;font-size:13px;font-weight:500}
.checklist small{display:block;font-size:12px;color:var(--text-3);line-height:1.5;margin-top:1px}
.checklist li.done strong{color:var(--text-2)}
.checklist .button{flex:none}
.checklist .lrow-actions{flex:none;margin-left:auto}
.launch>details{margin-top:6px}
.facts{margin:0}
.fact{padding:10px 0;border-top:1px solid var(--line)}
.fact dt{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3)}
.fact dd{margin:3px 0 0 15px;font-size:13.5px;line-height:1.55;color:var(--text)}
.fact dd>small{display:block;margin-top:3px;font-size:12px;line-height:1.5;color:var(--text-3)}
.fact dd details{margin-top:2px}

/* ── Website ── */
/* Home's card look: white cards on the cool canvas, one preview card, status only in colour. */
.site-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}
.site-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.site-title-row h1{margin:0}
.site-pills{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.site-scope{font-size:13px;color:var(--text-3)}
.site-status{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--text-2);max-width:70ch}
.site-status a{color:var(--cue);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--cue-line)}
.site-status a:hover{text-decoration-color:currentColor}
.site-head-actions{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px;justify-content:flex-end;flex:none}
#site-menu-btn{width:34px;padding:0;font-size:17px;line-height:1}
.site-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:5;display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:250px;padding:6px;border:1px solid var(--line-2);border-radius:12px;background:var(--raised);box-shadow:var(--shadow-pop)}
.site-menu a{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:8px;color:var(--text-2);font-size:13px;text-decoration:none}
.site-menu a:hover{background:var(--bg-3);color:var(--text)}
.site-menu .icon{width:14px;height:14px}
.site-ask{margin:0 0 12px}
.site-ask .home-card-actions .button{height:28px;padding:0 10px;font-size:12px;border-radius:var(--r-sm)}
/* The two slim banners above the preview: title and one line on the left, button on the right. */
.site-ask .home-card.site-nudge{display:flex;align-items:center;gap:16px;padding:14px 16px}
.site-nudge-text{flex:1;min-width:0}
.site-ask .site-nudge h3{font-size:14px;font-weight:600}
.site-ask .site-nudge p{margin-top:2px;font-size:13px;line-height:1.45}
.site-ask .site-nudge .home-card-actions{flex:none;margin-top:0}
.site-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;margin-top:4px}
.site-stage{min-width:0}
/* The preview card: a card title row, the segmented device switch, then the scaled page. */
.site-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.site-tools h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--home-ink)}
.site-tools .device-toggle{margin-left:0}
.site-preview-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.site-preview-foot .site-tip{margin:0}
.device-toggle{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--bg-3)}
.device-toggle button{display:grid;place-items:center;width:30px;height:26px;border:0;border-radius:6px;background:none;color:var(--text-3)}
.device-toggle button:hover{color:var(--text)}
.device-toggle button.on{background:var(--bg-4);color:var(--text)}
.site-revise-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.site-revise-row select{flex:none;height:40px;padding:0 30px 0 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--input);color:var(--text);font:14px var(--sans)}
.site-revise input{flex:1;min-width:200px;height:40px;padding:0 13px;border:1px solid var(--line-2);border-radius:10px;background:var(--input);color:var(--text);font:14px var(--sans)}
.site-revise input::placeholder{color:var(--text-4)}
.site-revise .button{height:40px;padding:0 16px;border-radius:10px}
.site-revise .form-error{margin:8px 0 0;font-size:12px;color:var(--danger)}
.site-revise .form-error:empty{display:none}
/* The proposal sheet ("Here's the change"): the same rows as Review changes, plus its own notes. */
.cs-note{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-3)}
.site-revise .micro-note,.site-revise .cs-note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.cs-refused{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--text-3)}
.cs-refused summary{cursor:pointer;font-weight:500}
.cs-refused ul{margin:8px 0 0;padding-left:18px}
.cs-error{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--danger)}
.cs-error:empty{display:none}
/* A page shown at its real desktop size and scaled to fit: the chrome is ours, the page is not. */
.scaled-preview{position:relative;width:100%;overflow:hidden;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow-card)}
.scaled-chrome{display:flex;align-items:center;gap:10px;height:28px;padding:0 10px;background:var(--bg-3);border-bottom:1px solid var(--line-2)}
.scaled-dots{display:flex;gap:5px;flex:none}
.scaled-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-3)}
.scaled-address{flex:1;min-width:0;height:16px;display:flex;align-items:center;padding:0 10px;border-radius:8px;background:var(--bg-1);color:var(--text-4);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scaled-body{position:relative;overflow:hidden}
/* A quiet skeleton under the frame until it has content; the slow shimmer is off for reduced motion. */
.scaled-skeleton{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;gap:12px;padding:26px;background:var(--card)}
.scaled-skeleton span{display:block;border-radius:6px;background:var(--bg-3)}
.scaled-skeleton .sk-h{width:40%;height:22px}
.scaled-skeleton .sk-l{height:11px}
.scaled-skeleton .sk-l:nth-child(3){width:82%}
.scaled-skeleton .sk-p{width:104px;height:30px;border-radius:999px;margin-top:6px}
@media(prefers-reduced-motion:no-preference){
 .scaled-skeleton span{background:linear-gradient(100deg,var(--bg-3) 30%,var(--bg-2) 50%,var(--bg-3) 70%);background-size:220% 100%;animation:sk-shimmer 2.4s ease-in-out infinite}
 @keyframes sk-shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
}
.scaled-device{transform:scale(var(--k,.5));transform-origin:top left;box-sizing:border-box}
.scaled-device iframe{display:block;width:var(--dw,1280px);height:var(--dh,820px);border:0;background:#fbfaf7;pointer-events:auto}
.scaled-preview.phone{display:flex;justify-content:center;background:transparent;border:0;border-radius:0}
.scaled-preview.phone .scaled-chrome{display:none}
.scaled-preview.phone .scaled-body{overflow:visible}
.scaled-preview.phone .scaled-device{width:390px;height:780px;padding:8px;border-radius:28px;background:#1c2130;box-shadow:0 0 0 1px var(--line-3)}
.scaled-preview.phone .scaled-device iframe{border-radius:20px}
.site-tip{margin:0;font-size:13px;line-height:1.55;color:var(--text-3)}
.site-tip a{color:var(--cue);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--cue-line)}
.site-tip a:hover{text-decoration-color:currentColor}
.site-side{display:flex;flex-direction:column;gap:16px;min-width:0}
/* The inspector's tab list: one full-width segmented row above its panel. */
.site-side-tabs{display:flex}
.site-side-tabs button{flex:1;height:32px;font-size:13px}
.site-side-panel{display:flex;flex-direction:column;gap:16px}
.site-card{margin:0}
/* The Look card: the fitting styles as tile buttons, then the describe box and the full gallery. */
.look-note{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.look-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.look-tile{position:relative;display:flex;flex-direction:column;gap:3px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);text-align:left;cursor:pointer;transition:border-color .15s}
.look-tile:hover{border-color:var(--cue)}
.look-tile:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
.look-tile strong{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.look-tile .look-tagline{font-size:12px;line-height:1.4;color:var(--text-3)}
.look-tile .look-now{margin-top:5px;align-self:flex-start;height:20px;padding:0 8px;font-size:11px}
.look-dots{display:flex;gap:4px;margin-bottom:8px}
.look-dots i{width:14px;height:14px;border-radius:50%;border:1px solid var(--line)}
.look-describe{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.look-describe input{flex:1;min-width:140px;height:34px;padding:0 11px;border:1px solid var(--line-2);border-radius:10px;background:var(--input);color:var(--text);font:13px var(--sans)}
.look-describe input::placeholder{color:var(--text-4)}
.look-describe input:focus{outline:none;border-color:var(--cue-line);box-shadow:0 0 0 3px var(--cue-soft)}
.look-issues{margin-top:12px}
.look-issues .plain{margin-top:4px}
.look-meta{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--text-3)}
.look-current{margin:0 0 2px;align-self:center;font-size:13px;color:var(--text-3)}
@media(max-width:420px){.look-tiles{grid-template-columns:1fr}}
/* Your page online + share links (Website side column). */
.button.small.icon-only{width:32px}
.online-note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.switch-row{position:relative;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text);cursor:pointer}
.switch-row input{position:absolute;opacity:0;width:34px;height:20px;margin:0;cursor:pointer}
.switch{position:relative;flex:none;width:34px;height:20px;border-radius:10px;background:var(--bg-4);transition:background .18s var(--ease)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s var(--ease)}
.switch-row input:checked+.switch{background:var(--cue)}
.switch-row input:checked+.switch::after{transform:translateX(14px)}
.switch-row input:focus-visible+.switch{outline:2px solid var(--cue);outline-offset:2px}
.switch-row input:disabled+.switch{opacity:.6}
.url-row{display:flex;align-items:center;gap:6px;margin-top:12px;min-width:0}
.url-pill{flex:1;min-width:0;display:block;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);font:12.5px/1.4 var(--mono);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-list{display:flex;flex-direction:column}
.link-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.link-row:first-child{border-top:0;padding-top:2px}
.link-main{display:flex;flex-direction:column;min-width:0}
.link-main strong{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-stats{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.link-actions{display:flex;gap:2px}
.link-archive{opacity:0;transition:opacity .15s}
.link-row:hover .link-archive,.link-row:focus-within .link-archive{opacity:1}
@media(hover:none){.link-archive{opacity:1}}
.ch-badge{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;font:700 10px/1 var(--sans);letter-spacing:-.02em;background:var(--bg-3);color:var(--text-2)}
.ch-tiktok{background:var(--bg-4);color:var(--text)}
.ch-instagram{background:var(--violet-soft);color:var(--violet)}
.ch-youtube{background:var(--danger-soft);color:var(--danger)}
.ch-facebook{background:var(--cue-soft);color:var(--cue)}
.ch-email{background:var(--good-soft);color:var(--good)}
.ch-video{background:var(--warn-soft);color:var(--warn-text)}
.link-new{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.link-new input{flex:1;min-width:140px;height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--input);color:var(--text);font:13px var(--sans)}
.link-new select{height:32px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--input);color:var(--text);font:13px var(--sans)}
.links-card>.button{margin-top:12px}
/* Ways to sell more (Website side column). */
.sell-row{padding:12px 0;border-top:1px solid var(--line)}
.sell-row:first-of-type{border-top:0}
.sell-row h3{font-size:15px;margin:2px 0 4px}
.sell-row p{margin:0 0 6px}
.sell-tag{display:inline-block;font-size:11px;padding:1px 8px;border-radius:999px;background:var(--bg-1)}
.sell-steps summary{cursor:pointer;font-size:13px}
.sell-steps ol{margin:6px 0 0;padding-left:18px;font-size:13px}
.sell-more{margin-top:14px}
.vid-link{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:0}
.vid-link .micro-note{flex-basis:100%;margin:2px 0 0}
/* Results → Website. */
.range-seg button{font-variant-numeric:tabular-nums}
.tkpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.tkpi{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-card);box-shadow:var(--shadow-card);min-width:0}
.tkpi-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.tkpi-value{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--home-ink);font-variant-numeric:tabular-nums}
.tkpi-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:18px}
.tkpi-delta{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:5px;font:600 11px/1 var(--sans);font-variant-numeric:tabular-nums;background:var(--bg-3);color:var(--text-2)}
.tkpi-delta.up{background:var(--good-soft);color:var(--good)}
.tkpi-delta.down{background:var(--danger-soft);color:var(--danger)}
.tkpi-delta.new{background:var(--cue-soft);color:var(--cue)}
.tkpi-sub{font-size:11.5px;color:var(--text-3)}
.chart-card .hcard-head{margin-bottom:4px}
.chart-legend{display:flex;gap:16px;margin:0 0 10px;font-size:12px;color:var(--text-3)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:3px}
.lg-visits{background:var(--cue)}.lg-signups{background:var(--good);border-radius:50%!important}
.traffic-svg{display:block;width:100%;height:200px;overflow:visible}
.chart-area{fill:var(--cue-soft)}
.chart-line{fill:none;stroke:var(--cue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart-grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.chart-dot{fill:var(--good);stroke:var(--card);stroke-width:2;vector-effect:non-scaling-stroke}
.chart-hit{fill:transparent}
.chart-hit:hover{fill:color-mix(in srgb,var(--cue) 6%,transparent)}
.tchart-dates{display:flex;justify-content:space-between;margin-top:6px;font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.traffic-split{gap:0 16px;margin-top:16px}
.bar-list{display:grid;grid-template-columns:minmax(80px,max-content) minmax(0,1fr) max-content;align-items:center;gap:11px 14px;font-size:13px}
.bar-row{display:contents}
.bar-label{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:8px;border-radius:4px;background:var(--bg-3);overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:4px;background:var(--cue)}
.bar-num{font-variant-numeric:tabular-nums;color:var(--text-2);text-align:right;white-space:nowrap}
.bar-num small{color:var(--text-3)}
.device-split{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.device-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--bg-3)}
.device-bar i{display:block;height:100%}
.device-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.device-legend span{display:inline-flex;align-items:center;gap:6px}
.device-legend i{display:inline-block;width:8px;height:8px;border-radius:2px}
.dev-mobile{background:var(--cue)}.dev-desktop{background:var(--violet)}.dev-tablet{background:var(--warn)}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{padding:0 12px 10px 0;text-align:left;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--line)}
.data-table td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);color:var(--text);vertical-align:middle}
.data-table tr:last-child td{border-bottom:0}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}
.cell-link{display:inline-flex;align-items:center;gap:8px}
.links-table-card{margin-top:16px}
/* Customers. */
.cust-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:14px}
.cust-tools input{flex:1;min-width:200px;max-width:360px;height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--input);color:var(--text);font:13.5px var(--sans)}
.cust-tools input:focus{outline:none;border-color:var(--cue-line);box-shadow:0 0 0 3px var(--cue-soft)}
.cust-summary{font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.hcard.cust-card .table-wrap{border:0;background:transparent;border-radius:0}
.cust-table td small{display:block;font-size:11.5px;color:var(--text-3)}
.cust-email strong{font-weight:600}
.cust-table .row-act{width:40px;text-align:right}
.cust-table .row-act .button{opacity:.55}
.cust-table tr:hover .row-act .button,.cust-table .row-act .button:focus-visible{opacity:1}
.cust-more{display:flex;justify-content:center;margin-top:12px}
@media(max-width:900px){.tkpis{grid-template-columns:repeat(2,minmax(0,1fr))}.traffic-split{grid-template-columns:1fr}.traffic-split>.hcard+.hcard{margin-top:16px}}
@media(max-width:720px){
 .cust-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .cust-table,.cust-table tbody,.cust-table tr,.cust-table td{display:block;width:100%}
 .cust-table tr{position:relative;padding:12px 40px 12px 0;border-bottom:1px solid var(--line)}
 .cust-table tr:last-child{border-bottom:0}
 .cust-table td{padding:2px 0;border:0;font-size:12.5px;color:var(--text-2)}
 .cust-table td.cust-email{font-size:13.5px;color:var(--text)}
 .cust-table .row-act{position:absolute;top:10px;right:0;width:auto}
}
@media(prefers-reduced-motion:reduce){.switch,.switch::after,.link-archive{transition:none}}
.site-share-go{margin-top:16px}
.site-detail-block{padding:12px 0;border-top:1px solid var(--line)}
.site-detail-block:first-of-type{border-top:0;padding-top:0}
.site-detail-block h3{font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--text-3);margin:0 0 8px}
.site-detail-block>p{font-size:13px;line-height:1.6;color:var(--text-2)}
.site-detail-block .plain{margin-top:0}
/* Each version is a row: name, a status pill, and the note in 12.5px. The picked row gets a brand edge. */
.version-list{display:flex;flex-direction:column;gap:4px}
.version-pick{display:flex;flex-direction:column;gap:3px;width:100%;padding:10px 12px;border:0;border-left:2px solid transparent;border-radius:var(--r-ctl);background:none;color:var(--text-2);text-align:left;transition:background .15s,box-shadow .15s}
.version-pick:hover{background:var(--bg-2)}
.version-pick.on{background:var(--cue-soft);border-left-color:var(--cue)}
.version-top{display:flex;align-items:center;gap:9px}
.version-name{font-size:13.5px;font-weight:500;color:var(--text)}
.version-pick .pill{height:20px;padding:0 8px;font-size:11px}
.version-note{font-size:12.5px;line-height:1.5;color:var(--text-3);overflow-wrap:anywhere}
.site-details>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--home-ink);transition:color .15s}
.site-details>summary::-webkit-details-marker{display:none}
.site-details>summary::before{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.site-details[open]>summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.site-details>summary:hover{color:var(--cue)}
.site-details .site-detail-block:first-of-type{border-top:1px solid var(--line);margin-top:12px;padding-top:14px}
.site-detail-block .site-note-line{margin-top:8px;font-size:12.5px;color:var(--text-3)}
.site-checklist{list-style:none;margin:0;padding:0}
.site-checklist li{position:relative;padding:9px 0 9px 24px;border-bottom:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--text-2)}
.site-checklist li:last-child{border-bottom:0}
.site-checklist li::before{content:'';position:absolute;left:0;top:15px;width:12px;height:12px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--line-3)}
.serp{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.serp-title{color:#1a0dab;font-size:15px;line-height:1.3;font-family:arial,sans-serif}
.serp-desc{color:#4d5156;font-size:12.5px;line-height:1.45;font-family:arial,sans-serif}
@media(max-width:999px){
 .site-layout{grid-template-columns:1fr;gap:24px}
}
@media(min-width:1000px){
 /* The preview stays in view while the inspector scrolls; a taller page scrolls inside its card. */
 .site-stage{position:sticky;top:calc(var(--header,60px) + 16px);max-height:calc(100vh - var(--header,60px) - 32px);overflow:auto}
}
@media(max-width:760px){
 .site-head{flex-direction:column;align-items:flex-start;gap:16px}
 .site-head-actions{justify-content:flex-start}
 .site-revise-row{flex-direction:column;align-items:stretch}
 .site-revise input{font-size:16px;min-height:44px}
 .site-revise .button{width:100%}
 .site-menu{min-width:min(280px,calc(100vw - 32px))}
 .site-tools{margin-top:0}
 .site-preview-foot{flex-direction:column;align-items:flex-start;gap:8px}
 .site-ask .home-card.site-nudge{flex-direction:column;align-items:stretch}
 .site-ask .site-nudge .home-card-actions .button{width:100%}
}
@media(max-width:420px){
 .site-side-tabs .seg-count{display:none}
}
@media(max-width:560px){
 .site-revise-row select{width:100%}
}
/* Every control on Website keeps a visible focus ring, like Home. */
.page-website button:focus-visible,.page-website a:focus-visible,.page-website summary:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
/* "Put it online": a quiet link-style action in the status line. */
.link-button{padding:0;border:0;background:none;color:var(--cue);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--cue-line)}
.link-button:hover{text-decoration-color:currentColor}
/* The guide: numbered hairline rows in Home's style, one small button under each step's text. */
.online-steps{list-style:none;margin:0;padding:0}
.online-step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;padding:16px 2px;border-bottom:1px solid var(--line)}
.online-steps li:last-child{border-bottom:0}
.online-step-num{display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--cue-soft);color:var(--cue);font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums}
.online-step-body{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.online-step-title{font-size:14px;font-weight:600;line-height:1.4;color:var(--text);overflow-wrap:anywhere}
.online-step-text{font-size:13px;line-height:1.55;color:var(--text-3);overflow-wrap:anywhere}
.online-step-body .button{margin-top:4px}
.online-note{margin:18px 0 0;font-size:12.5px;line-height:1.6;color:var(--text-3)}
/* The guide's warning reuses .callout.warning from campaign.css; only its spacing is tightened here. */
#modal .callout.warning{margin:0 0 6px}
#modal .callout.warning a{color:inherit;font-weight:500}
@media(max-width:760px){
 .online-step{grid-template-columns:24px minmax(0,1fr);gap:12px;padding:14px 2px}
}

/* ── Videos: the owner's videos as Home's card dashboard ── */
.page-growth{max-width:1280px;margin:0 auto;padding:32px 0 40px}
.videos-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}
.videos-head h1{margin:0;font:600 clamp(24px,2.6vw,30px)/1.15 var(--sans);letter-spacing:-.025em;color:var(--home-ink)}
.videos-status{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--text-2);max-width:52ch}
.videos-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px;justify-content:flex-end;flex:none}
/* Testing now: the question sits directly above the video cards, as open content, not a card. */
.videos-current{margin-top:24px}
.videos-current-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.hcard.videos-current{background:none;border:0;box-shadow:none;padding:0}
.videos-question{margin:0;font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.02em;color:var(--home-ink)}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:0;align-items:stretch}
.video-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow-card)}
.video-card.is-winner{border-color:var(--cue-line);box-shadow:0 0 0 1px var(--cue-soft)}
.video-card.is-retired{opacity:.62}
/* The footer block is pinned to the bottom, so cards in one row end level. */
.vcard-foot{display:flex;flex-direction:column;gap:8px;margin-top:auto;min-width:0}
.video-card .vid-media{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.video-card .vid-media video{display:block;width:100%;height:100%;max-height:70vh;object-fit:cover;background:#000}
/* Without a video the 9:16 box is a tall empty grey slab, so it shrinks to a short placeholder. */
.video-card .vid-media:not(:has(video)){aspect-ratio:auto;height:260px;max-height:260px}
/* A filming card fills the box at its natural height and blends in (no double border). */
.video-card .vid-media.film{aspect-ratio:auto;height:auto;max-height:none;background:transparent;border:0}
.video-card .vid-media:has(.film-card){height:auto}
.video-card .vid-media:has(video){max-height:70vh}
@media(max-width:760px){.video-card .vid-media:not(:has(video)){height:200px;max-height:200px}}
.video-card .vid-media .ai-badge{position:absolute;top:8px;left:8px;margin:0}
.vid-media-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.vid-media-empty>span{font-size:12.5px;color:var(--text-3)}
/* Filming card: what to say and shoot, for a variant that has no video yet. On the card surface,
   with the label and tags as small soft pills. */
.film-card{display:flex;flex-direction:column;gap:10px;height:auto;padding:14px;border-radius:12px;background:var(--surface-2);border:0;color:var(--home-ink)}
.film-pill{display:inline-flex;align-items:center;align-self:flex-start;height:20px;padding:0 8px;border-radius:999px;background:var(--bg-2);color:var(--text-2);font-size:11px;font-weight:500}
.film-pill.brand{background:var(--cue-soft);color:var(--cue)}
.film-say{margin:0;font:600 16px/1.35 var(--sans);letter-spacing:-.015em;color:var(--home-ink)}
.film-screen{margin:0;font-size:14px;line-height:1.5;color:var(--text-2)}
.film-tag{display:inline-flex;align-items:center;height:18px;padding:0 7px;margin-right:5px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.02em;vertical-align:middle}
.film-tag.brand{background:var(--cue-soft);color:var(--cue)}
.film-tag.violet{background:var(--violet-soft);color:var(--violet)}
.vid-play{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.4;color:var(--text-4)}
.vid-play path{fill:currentColor;stroke:none}
.vid-kind{font:600 12px/1 var(--sans);letter-spacing:normal;text-transform:none;color:var(--text-3)}
.vid-line{margin:0;font-size:16px;line-height:1.4;font-weight:600;color:var(--home-ink)}
.vid-different{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.vid-result{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;color:var(--text-2)}
.wait-dot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none}
.vid-best{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cue);white-space:nowrap}
.vid-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px 8px}
.vid-actions .button{font-size:12.5px;padding:0 10px}
.card-script,.card-more{margin-right:2px}
.card-script>summary,.card-more>summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--text-2);font-size:12.5px;font-weight:500;white-space:nowrap;transition:background .15s,color .15s}
.card-script>summary::-webkit-details-marker,.card-more>summary::-webkit-details-marker{display:none}
.card-script>summary::before,.card-more>summary::before{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s;flex:none}
.card-script[open]>summary,.card-more[open]>summary{background:var(--bg-3);color:var(--text)}
.card-script[open]>summary::before,.card-more[open]>summary::before{transform:rotate(45deg) translate(-1px,-1px)}
/* The script fold is part of the card's surface: a tint, no second border. */
.card-script-body{margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:12px;color:var(--text-2)}
.card-script-body ol{margin:0 0 4px;padding-left:16px;line-height:1.6}
/* More actions: results, AI script edits and the video's own link, folded away per card. */
.card-more-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--surface-2)}
.card-more-body .vid-link{width:100%}
.video-card .pubs{margin:0}
.videos-foot{margin-top:24px}
.videos-result{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:15px;line-height:1.55;color:var(--text-2)}
.videos-result .wait-dot{margin-top:8px}
.videos-next{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--text-3)}
.videos-empty{margin:30px 0 0;font-size:16.5px;line-height:1.55;color:var(--text-3)}
/* Concluded tests are cards too: the question and a good 'Winner' pill head each fold. */
.videos-earlier{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.videos-earlier-label{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--home-ink)}
.earlier-test{padding:20px}
.earlier-test>summary{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:3px;list-style:none;cursor:pointer}
.earlier-test>summary::-webkit-details-marker{display:none}
.earlier-test>summary::before{content:'';position:absolute;right:0;top:6px;width:6px;height:6px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:rotate(45deg);transition:transform .15s}
.earlier-test[open]>summary::before{transform:rotate(-135deg) translate(-2px,-2px)}
.earlier-sum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-right:20px}
.earlier-q{font-size:15.5px;font-weight:600;letter-spacing:-.015em;color:var(--home-ink)}
.earlier-hook{font-size:13.5px;line-height:1.5;color:var(--text-2)}
.earlier-line{font-size:12.5px;color:var(--text-3)}
.earlier-test[open]>summary{margin-bottom:16px}
.earlier-test .video-grid{margin:0 0 4px}
.numbers{margin-top:20px}
.numbers>summary{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;list-style:none;cursor:pointer;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--card);color:var(--text-2);font-size:13px;font-weight:500;transition:background .15s,color .15s,border-color .15s}
.numbers>summary::-webkit-details-marker{display:none}
.numbers>summary::before{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.numbers[open]>summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.numbers>summary:hover{color:var(--text);border-color:var(--line-3);background:var(--bg-3)}
.numbers-how{margin-top:10px}
.numbers-sure .sub-label{margin-top:0}
.numbers-sure p{font-size:13px;line-height:1.55;color:var(--text-2)}
.numbers-p{margin-top:4px;color:var(--text-3)}
.numbers-sure .plain{margin-top:6px}
.operator-page .table-wrap{border-radius:12px;background:transparent}
.variants td{vertical-align:top}
.hook-cell{display:flex;gap:10px;align-items:baseline}
.hook-cell b{color:var(--text-3);font-size:11px;min-width:22px}
.hook-cell span{color:var(--text);font-size:13px;line-height:1.45}
.hook-details{margin:6px 0 0 32px;font-size:12px;color:var(--text-2)}
.hook-details summary{color:var(--text-3);font-size:12px}
.hook-details ol{margin:6px 0;padding-left:18px;line-height:1.6}
.caption{font-size:12px;color:var(--text-3);margin:6px 0;line-height:1.5}
.variants tr.is-winner td{background:color-mix(in srgb,var(--cue) 5%,transparent)}
.variants tr.is-winner .hook-cell b{color:var(--cue)}
.variants tr.is-retired td{opacity:.55}
.variants td.muted{font-size:12px;max-width:260px;line-height:1.5}
.page-growth button:focus-visible,.page-growth a:focus-visible,.page-growth summary:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
@media(max-width:639px){
 .videos-actions{gap:8px}
 .videos-actions .button.quiet:not(.icon-only){border-color:var(--line-2);background:var(--card)}
}
@media(max-width:900px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .page-growth{padding:22px 0 32px}
 .videos-head{flex-direction:column;align-items:flex-start;gap:16px}
 .videos-actions{justify-content:flex-start}
 .videos-head h1{font-size:28px}
 .video-grid{grid-template-columns:1fr;gap:20px}
 .vid-actions .button,.card-script>summary,.card-more>summary,.videos-actions .button,.videos-actions .menu>summary{min-height:44px;padding:0 14px;font-size:13px}
 .videos-actions .menu>summary{width:44px;justify-content:center}
 .page-growth .home-label{font-size:12.5px}
 .numbers>summary{min-height:44px}
}
.menu{position:relative}
.menu>summary{list-style:none}
.menu>summary::-webkit-details-marker{display:none}
.menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:5;display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:230px;padding:6px;border-radius:12px;border:1px solid var(--line-2);background:var(--raised);box-shadow:var(--shadow-pop)}
.menu-list .button{justify-content:flex-start}

/* ── Hook ideas: the researched lines, filled in for this business ── */
.hook-chips,.trend-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 16px}
.hook-chip,.trend-chip{height:32px;padding:0 13px;border-radius:16px;border:1px solid var(--line-2);background:transparent;color:var(--text-3);font-size:12.5px;font-weight:500;transition:color .15s,border-color .15s,background .15s}
.hook-chip:hover,.trend-chip:hover{color:var(--text);border-color:var(--line-3)}
.hook-chip.on,.trend-chip.on{color:var(--text);background:var(--bg-3);border-color:var(--line-3)}
.hook-chip:focus-visible,.trend-chip:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
/* Hook ideas: two calm columns on wide dialogs, one on phones. */
.hook-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.hook-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hook-card{display:flex;flex-direction:column;min-width:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.hook-line{margin:0;font-size:16px;line-height:1.5;color:var(--home-ink);overflow-wrap:anywhere}
.hook-notes{margin-top:10px;font-size:13px;line-height:1.55;color:var(--text-2)}
.hook-notes>summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--text-2);font-size:12.5px;font-weight:500;transition:background .15s,color .15s}
.hook-notes>summary::-webkit-details-marker{display:none}
.hook-notes>summary::before{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s;flex:none}
.hook-notes[open]>summary{background:var(--bg-3);color:var(--text)}
.hook-notes[open]>summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.hook-onscreen,.hook-why,.hook-visual{margin:10px 0 0;overflow-wrap:anywhere}
.hook-why b,.hook-visual b{font-weight:500;color:var(--text-3)}
.hook-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px}
.hook-more-row{display:flex;align-items:center;gap:12px;margin-top:16px}
.hook-count{font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.hook-rules{margin-top:16px;padding-top:10px;border-top:1px solid var(--line)}
/* The hook dialog stays 840px on desktop, not the 1100px the wide flag gives other dialogs. */
@media(min-width:761px){#modal:has(#modal-form[data-kind="hook-ideas"]){width:min(840px,calc(100vw - 24px));max-width:min(840px,calc(100vw - 24px))}}
.hook-notes>summary:focus-visible,.card-more>summary:focus-visible,.trend-details>summary:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
@media(max-width:760px){
 #modal .hook-chip,#modal .hook-notes>summary,#modal .hook-card-actions .button,#modal .hook-more-row .button{min-height:44px}
 #workspace .card-more-body .button{min-height:44px}
 #workspace .trend-details>summary,#workspace .trend-actions .button{min-height:44px}
}

/* ── Video ideas: the trend radar and the ways to make a video ── */
.ideas-status{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--text-3)}
.ideas-section{margin-top:28px}
.ideas-section h2{margin:0;font-size:17px;font-weight:600}
.ideas-section>h3{margin:18px 0 10px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ideas-lede{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.trend-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.style-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.trend-card{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-card);box-shadow:var(--shadow-card);min-width:0}
.trend-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.trend-status{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;font:500 11px/1 var(--sans);white-space:nowrap;background:var(--bg-2);color:var(--text-3)}
.st-rising{background:var(--violet-soft);color:var(--violet)}
.st-peaking{background:var(--cue-soft);color:var(--cue)}
.st-evergreen{background:var(--good-soft);color:var(--good)}
.st-fading{background:var(--bg-2);color:var(--text-3)}
.trend-origin{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;font:500 11px/1 var(--sans);white-space:nowrap;background:var(--bg-2);color:var(--text-3)}
.trend-origin.won{background:var(--good-soft);color:var(--good)}
.trend-card h3{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--home-ink);overflow-wrap:anywhere}
/* Details keeps the summary and “Made as” a tap away, so the card front stays small. */
.trend-details{margin-top:2px;font-size:13.5px;line-height:1.55;color:var(--text-2)}
.trend-details>summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;height:30px;font-size:12.5px;font-weight:500;color:var(--text-3);transition:color .15s}
.trend-details>summary::-webkit-details-marker{display:none}
.trend-details>summary::before{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.trend-details[open]>summary{color:var(--text)}
.trend-details[open]>summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.trend-summary{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-2);overflow-wrap:anywhere}
.trend-hook{margin:0;padding:8px 10px;border-radius:10px;background:var(--bg-2);font-size:14px;line-height:1.5;color:var(--text);overflow-wrap:anywhere}
.trend-hook span{display:block;margin-bottom:2px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.trend-made{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.trend-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.ideas-more{margin-top:14px}
.trends-more{margin-top:14px}
.trend-detail p{margin:0 0 10px}
.trend-detail p:last-child{margin-bottom:0}
/* Ways to make a video: filter chips over compact, clickable style tiles. */
.style-filters{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:4px 0 14px}
.style-chips{display:flex;gap:6px;flex-wrap:wrap}
.style-chips .style-chip{flex:none;white-space:nowrap}
.style-count{margin-left:4px;color:var(--text-4);font-variant-numeric:tabular-nums}
.style-free{flex:none;white-space:nowrap}
.style-free .icon{display:none}
.style-free[aria-pressed="true"] .icon{display:inline-block;width:12px;height:12px}
.style-tile{display:grid;grid-template-columns:36px 1fr 16px;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:left;background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-card);color:var(--text);cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.style-tile:hover{border-color:var(--cue-line);transform:translateY(-1px);box-shadow:var(--shadow-card)}
.style-tile:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.style-tile{transition:border-color .15s,box-shadow .15s}.style-tile:hover{transform:none}}
.style-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.style-icon .icon{width:17px;height:17px}
.style-icon-people{background:var(--cue-soft);color:var(--cue)}
.style-icon-product{background:var(--warn-soft);color:var(--warn)}
.style-icon-animated{background:var(--violet-soft);color:var(--violet)}
.style-icon-simple{background:var(--good-soft);color:var(--good)}
.style-icon-you{background:var(--bg-3);color:var(--text-2)}
.style-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.style-name{font-size:14px;font-weight:600;color:var(--home-ink)}
.style-name .pill{margin-left:6px;vertical-align:middle}
.style-tag{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.45;color:var(--text-2)}
.style-meta{margin-top:2px;font-size:12px;color:var(--text-3)}
.cost-dot{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;vertical-align:1px}
.cost-dot.cost-free{background:var(--good)}
.cost-dot.cost-low{background:var(--cue)}
.cost-dot.cost-medium{background:var(--warn)}
.cost-dot.cost-high{background:var(--violet)}
.style-go{width:16px;height:16px;color:var(--text-4);transform:rotate(-90deg)}
.style-tile:hover .style-go{color:var(--cue)}
@media(max-width:640px){
 .style-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
 .style-chips::-webkit-scrollbar{display:none}
}
.cost{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;font:500 11px/1 var(--sans);white-space:nowrap;flex:none;background:var(--bg-2);color:var(--text-3)}
.cost-free{background:var(--good-soft);color:var(--good)}
.cost-low{background:var(--cue-soft);color:var(--cue)}
.cost-medium{background:var(--warn-soft);color:var(--warn)}
.cost-high{background:var(--violet-soft);color:var(--violet)}
/* A saved plan as one hairline row: title and its parts left, the quality pill right. */
.plan-rows{display:flex;flex-direction:column}
.plan-row{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line)}
.plan-row:first-child{border-top:0}
.plan-open{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;padding:0;border:0;background:none;text-align:left;font:inherit}
.plan-open strong{font-size:13.5px;font-weight:500;letter-spacing:-.01em;color:var(--text);overflow-wrap:anywhere}
.plan-open span{font-size:12.5px;line-height:1.5;color:var(--text-3);overflow-wrap:anywhere}
.plan-open:hover strong{color:var(--cue)}
/* Tick 2–5 drafts and test them: the bar sits under the list, the box in front of each row. */
.plan-test-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:var(--text-3)}
.plan-pick{width:18px;height:18px;flex:none;accent-color:var(--cue)}
.plan-stack{display:grid;gap:16px}
.plan-source{margin:0 0 14px}
.plan-in-test{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.plan-won{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 14px;padding:10px 12px;border-radius:12px;background:var(--good-soft);font-size:14px}
/* The storyboard in the example dialog, and the trend's steps. */
.style-looks{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.style-made{margin:0 0 12px;font-size:12.5px;color:var(--text-3)}
.storyboard{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.storyboard li{padding:12px 0;border-bottom:1px solid var(--line)}
.sb-time{display:inline-block;padding:2px 7px;border-radius:6px;background:var(--bg-2);font:500 12px/1.4 var(--mono);color:var(--text-3)}
.sb-shot{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-2)}
.sb-say{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--text)}
.sb-screen{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.sb-caption{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--text-2)}
.trend-steps{margin:8px 0 14px;padding-left:20px;font-size:14px;line-height:1.5;color:var(--text-2)}
.fit-reasons li{font-size:13.5px;color:var(--text-2)}
.modal-sub{margin:0;font-size:13px;font-weight:500}
.trend-sources{font-size:12.5px;line-height:1.6}
.trend-sources a{color:var(--cue)}

/* ── One plan: the storyboard, the quality check and how to make it ── */
.back-link{display:inline-flex;align-items:center;gap:5px;margin:0 0 8px;font-size:13.5px;font-weight:500;color:var(--text-2);text-decoration:none}
.back-link:hover{color:var(--text)}
.back-link .icon{width:14px;height:14px}
/* 'How it's made': one bordered option card per production path, the checked one marked in cue. */
.made-by{margin:14px 0;border:0;padding:0}
.made-by legend{padding:0;font-size:12px;font-weight:500;color:var(--text-2)}
.made-by .choice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;margin-top:8px;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;background:transparent;cursor:pointer;transition:border-color .15s,background .15s}
.made-by .choice:hover{border-color:var(--line-3)}
.made-by .choice:has(input:checked){border-color:var(--cue);background:var(--cue-soft)}
.made-by .choice input{position:static;grid-row:span 2;margin:2px 0 0;opacity:1;pointer-events:auto;accent-color:var(--cue)}
.made-by .choice b{font-size:13.5px;font-weight:500;color:var(--text)}
.made-by .choice span{font-size:12.5px;line-height:1.5;color:var(--text-3)}
/* Tone and length: radio rows drawn as a segmented control; the radio stays focusable. */
.field-label{display:block;margin-bottom:6px}
.field .seg-choice{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%}
.seg-choice{display:inline-flex;flex-wrap:wrap;gap:3px;margin-top:6px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2)}
.seg-choice label{position:relative;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--text-3);cursor:pointer;transition:color .15s,background .15s}
.seg-choice label:hover{color:var(--text)}
.seg-choice label:has(input:checked){background:var(--card);color:var(--text);box-shadow:var(--shadow-card)}
.seg-choice label:has(input:focus-visible){outline:2px solid var(--cue);outline-offset:2px}
.seg-choice input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* The quality check: blocks need fixing first, warnings are advice, ok says what is right. */
.issue{display:flex;flex-wrap:wrap;gap:8px;margin:0;font-size:13.5px;line-height:1.55}
.issue+.issue{margin-top:8px}
.issue.block{padding:8px 10px;border-radius:10px;background:var(--warn-soft);color:var(--warn-text)}
.issue.block .icon{width:15px;height:15px;flex:none;margin-top:2px}
.issue.block>span:last-child{flex-basis:100%;font-size:12.5px;color:var(--text-3)}
.issue.warn{color:var(--text-2)}
.issue.ok{color:var(--good)}
/* The hook as a boxed line: the spoken words first, the on-screen caption in a pill. */
.plan-hook{padding:10px 12px;border-radius:10px;background:var(--bg-2);font-size:15px;line-height:1.5;color:var(--text);overflow-wrap:anywhere}
.plan-hook span{display:block;margin-bottom:2px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.plan-hook em{display:inline-block;max-width:100%;margin-left:4px;padding:2px 9px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line-2);font-size:12px;font-style:normal;color:var(--text-2);vertical-align:2px}
.plan-board{margin:12px 0 0}
.sb-sound{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.plan-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.plan-tag{padding:2px 9px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line-2);font-size:11px;color:var(--text-3)}
.plan-board~button{margin-top:10px}
/* Edit mode: one scene per fieldset, the same hairlines as the read-only board. */
.plan-edit-scene{margin:16px 0 0;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px}
.plan-edit-scene legend{padding:0 6px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.plan-edit-actions{display:flex;gap:8px;margin-top:16px}
/* Film it yourself: a numbered shot list with the say and on-screen text under each shot. */
.shot-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.shot-list li{padding:12px 0;border-bottom:1px solid var(--line)}
/* The presenter script, and the slides: photos with their on-screen words. */
.plan-script{margin:0;padding-left:12px;border-left:3px solid var(--cue);font-size:15px;line-height:1.6;color:var(--text)}
.plan-actions-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.plan-slides{list-style:none;margin:0;padding:0}
.plan-slides li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.plan-slides li:last-child{border-bottom:0}
.plan-slides .icon{width:14px;height:14px;flex:none;margin-top:3px;color:var(--cue)}
.plan-slides strong{display:block;font-size:13.5px;font-weight:500;color:var(--text)}
.plan-slides span{display:block;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--text-3)}
/* Prompts for an AI video tool: one folded row per scene, the prompt in a monospace block. */
.prompt-row{border-bottom:1px solid var(--line)}
.prompt-row:last-child{border-bottom:0}
.prompt-row>summary{padding:12px 0;list-style:none;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--text)}
.prompt-row>summary::-webkit-details-marker{display:none}
.prompt-row>summary::before{content:'▸';display:inline-block;width:16px;color:var(--text-3);transition:transform .15s}
.prompt-row[open]>summary::before{transform:rotate(90deg)}
.prompt-row>summary:hover{color:var(--cue)}
.prompt-row .micro-note{margin:8px 0 0}
.prompt-row .button{margin-top:10px}
.prompt-text{margin:10px 0 0;padding:10px;border-radius:10px;background:var(--bg-2);font:12.5px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;color:var(--text-2)}
/* Make it with AI video: the model pick, the photo tiles, then one row per scene. */
.render-models .choice b{margin:0}
.render-sound{margin:14px 0 4px}
.render-scenes{margin-top:2px}
.render-scene{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:4px 12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.render-scene:last-child{border-bottom:0}
.render-check{display:flex;align-items:center;padding-top:2px}
.render-check input{width:16px;height:16px;accent-color:var(--cue)}
.render-scene-name{font-weight:500;color:var(--text);white-space:nowrap}
.render-scene-secs{color:var(--text-3);font-variant-numeric:tabular-nums}
.render-scene-cost{color:var(--text-2);font-variant-numeric:tabular-nums;text-align:right}
.render-scene-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px;justify-content:flex-end;text-align:right}
.render-scene-status .micro-note{flex-basis:100%;margin:0}
.render-scene-status .render-video{flex-basis:100%;margin-left:auto}
.render-scene-status .button{flex:none}
.render-total{margin:14px 0 0;font-size:13.5px;font-weight:500;color:var(--text)}
.render-video{display:block;max-width:180px;aspect-ratio:9/16;border-radius:10px;background:#000;margin-top:8px}
/* The plan's joined video: the full story, one clip, captions burned in. */
.final-video{display:block;max-width:280px;aspect-ratio:9/16;border-radius:14px;background:#000}
.photo-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.photo-pick label{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:10px;border:2px solid transparent;background:var(--bg-2);cursor:pointer;overflow:hidden}
.photo-pick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.photo-pick label:has(input:focus-visible){outline:2px solid var(--cue);outline-offset:2px}
.photo-pick label:has(input:checked){border-color:var(--cue)}
.photo-pick label:has(input:checked)::after{content:'';position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 0 1px var(--cue-line)}
.photo-pick img{width:100%;height:100%;object-fit:cover}
.photo-pick .photo-none{font-size:12px;color:var(--text-2);text-align:center;line-height:1.3;padding:4px}

@media(min-width:600px){
 .plan-board li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 14px;align-items:start}
 .plan-board li>*{grid-column:2;margin-top:0}
 .plan-board li>.sb-time{grid-column:1;grid-row:1}
}
@media(max-width:640px){
 .render-scene{grid-template-columns:auto minmax(0,1fr) auto auto}
 .render-scene-status{grid-column:2/-1;justify-content:flex-start;text-align:left;margin-top:2px}
 .render-scene-status .render-video{margin-left:0}
}
@media(max-width:520px){
 .seg-choice{display:grid;grid-template-columns:1fr 1fr}
 .seg-choice label{justify-content:center;height:34px}
 .plan-hook{font-size:14px}
 .modal-footer .button{flex:1}
}

/* ── Insights: learnings, health, decisions ── */
/* One column for every Results tab: What worked, Shop health and Decisions share the page width.
   Home's labels and hairlines, with technical detail folded into details. */
.page-learnings .home-label,.page-health .home-label,.page-decisions .home-label{display:block;margin:0 0 12px;font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.page-learnings .home-practice,.page-health .home-practice,.page-decisions .home-practice{margin:-16px 0 20px;font-size:12.5px;line-height:1.6;color:var(--text-3)}
.results-sec>.home-label{margin-top:0}
.results-lead{margin:0 0 34px;font:600 clamp(17px,2.55vw,23px)/1.3 var(--sans);letter-spacing:-.025em;color:var(--home-ink);max-width:62ch}
/* The lead is the first learning: its meta line and its 'Why it might have worked' sit with it. */
.results-lead-block{margin:0 0 34px}
.results-lead-block .results-lead{margin:0}
.results-lead-block .learning-meta{margin-top:8px}
.results-sec{margin-top:var(--home-gap);padding-top:var(--home-gap);border-top:1px solid var(--line)}
.results-sec:first-of-type{margin-top:0;padding-top:0;border-top:0}
.hcard .results-sec{margin-top:0;padding-top:0;border-top:0}
.hcard .learning:last-child{border-bottom:0}
.page-learnings .settings-nav,.page-health .settings-nav,.page-decisions .settings-nav{margin-bottom:26px}
.results-sub{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--text-2)}
.results-meta{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.results-meta .sim{color:var(--k-inference)}
.results-defs{display:grid;grid-template-columns:auto 1fr;gap:7px 20px;margin:14px 0 0;font-size:13.5px}
.results-defs dt{color:var(--text-3)}
.results-defs dd{margin:0;color:var(--text);line-height:1.55}
.results-list{list-style:none;margin:0;padding:0}
.results-list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.55}
.results-list li:last-child{border-bottom:0}
.results-list .muted{color:var(--text-3)}
.results-area{margin-top:22px}
.results-area:first-child{margin-top:6px}
.results-area>h3{margin:0 0 2px;font:500 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.results-facts{padding-top:0}
.results-foot{margin:var(--home-gap) 0 0;padding-top:var(--home-gap);border-top:1px solid var(--line)}
@media(max-width:560px){
 .results-defs{grid-template-columns:1fr;gap:2px}
 .results-defs dt{margin-top:10px}
}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px;border-block:1px solid var(--line)}
.stats div{padding:16px 0 16px 20px;border-left:1px solid var(--line)}
.stats div:first-child{padding-left:0;border-left:0}
.stats strong{display:block;font:500 26px/1.15 var(--mono);letter-spacing:-.03em}
.stats span{font-size:12px;color:var(--text-3)}
.funnel-row{display:grid;grid-template-columns:minmax(104px,132px) minmax(20px,1fr) 52px minmax(112px,auto);align-items:center;gap:10px;padding:7px 0;font-size:12.5px}
.funnel .funnel-row:first-of-type{margin-top:8px}
.funnel-label{color:var(--text-2)}
.funnel-bar{height:8px;border-radius:4px;background:var(--bg-2);overflow:hidden}
.funnel-bar i{display:block;height:100%;border-radius:4px;background:var(--text-3)}
.funnel-row.worst .funnel-bar i{background:var(--warn)}
.funnel-row.worst .funnel-label,.funnel-row.worst .funnel-rate{color:var(--warn)}
.funnel-row.unmeasured .funnel-bar{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--line-3) 4px 5px)}
.funnel-row.unmeasured .funnel-label,.funnel-row.unmeasured .funnel-n{color:var(--text-3)}
.funnel-n{text-align:right;color:var(--text)}
.funnel-rate{text-align:right;color:var(--text-3);font-size:11.5px;line-height:1.35}
.bars{display:flex;align-items:flex-end;gap:4px;height:150px;padding-top:22px}
.bar{position:relative;flex:1;height:100%;display:flex;align-items:flex-end}
.bar i{display:block;width:100%;border-radius:3px 3px 1px 1px;background:var(--line-3);min-height:2px}
.bar:last-child i{background:var(--cue)}
.bar-missing{align-items:center!important;justify-content:center;border-bottom:1px dashed var(--line-3);color:var(--text-3)}
.chart-dates{display:flex;justify-content:space-between;gap:10px;color:var(--text-3);font:10.5px/1.6 var(--mono);margin-top:10px}
.chart-records{font-size:12px;margin-top:10px;color:var(--text-2)}
.chart-records summary{min-height:32px;padding:6px 0;color:var(--text-3)}
.chart-records dl{display:grid;grid-template-columns:1fr auto;gap:6px;font-family:var(--mono);font-size:11px}
.chart-records dd{margin:0;text-align:right}
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:0 40px}
.area{padding:16px 0;border-bottom:1px solid var(--line)}
.area-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.area-top h3{font-size:14px;font-weight:500}
.area-status{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;background:var(--bg-2);font-size:11.5px;font-weight:500;color:var(--text-3);white-space:nowrap}
.area.st-healthy .area-status{color:var(--cue);background:var(--cue-soft)}
.area.st-needs_attention .area-status{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.area.st-watch .area-status{color:var(--k-inference);background:color-mix(in srgb,var(--k-inference) 10%,transparent)}
.area>p{margin-top:6px;font-size:13px;line-height:1.55;color:var(--text-2)}
.area .area-action{display:flex;gap:7px;align-items:flex-start;color:var(--text)}
.area-action .icon{width:13px;height:13px;margin-top:3px;color:var(--cue);flex:none}
.timeline{list-style:none;margin:8px 0 0;padding:0}
.decision{padding:22px 0;border-bottom:1px solid var(--line)}
.timeline .decision:last-child{border-bottom:0;padding-bottom:4px}
.decision-meta{font-size:12px;color:var(--text-3)}
.decision h3{margin-top:6px;font-size:16px;font-weight:500;letter-spacing:-.02em;line-height:1.4}
.decision-why{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--text-2);max-width:80ch}
.decision-result{display:flex;gap:10px;margin-top:10px;font-size:13px;color:var(--text)}
.decision-result>span:first-child{color:var(--text-3);flex:none}
.decision-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.assumptions{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.assumptions li{display:flex;gap:10px;align-items:baseline;font-size:13px;color:var(--text-2);line-height:1.55}
.decision-outcome{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:14px 0 0;font-size:13px}
.decision-outcome dt{color:var(--text-3)}
.decision-outcome dd{margin:0;color:var(--text);line-height:1.55}

/* ── Settings ── */
.settings{display:flex;flex-direction:column}
.set{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px 48px;padding:28px 0;border-top:1px solid var(--line)}
.set:first-child{border-top:0;padding-top:0}
.set-label h2{font-size:14px;font-weight:500;letter-spacing:-.01em}
.set-label p{margin-top:6px;font-size:12.5px;line-height:1.6;color:var(--text-3)}
.set-body{min-width:0}
.set-body>.micro-note{margin-top:12px}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.choice-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:var(--text);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.choice:hover:not(:disabled){border-color:var(--line-3)}
.choice.on{border-color:var(--cue-line);background:var(--cue-soft)}
.choice:disabled{opacity:.5;cursor:not-allowed}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice:has(input:focus-visible){outline:2px solid var(--cue);outline-offset:2px}
.choice strong{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500}
.choice small{font-size:12px;color:var(--text-3);line-height:1.5}
.agent-ai{display:grid}
.agent-ai-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(180px,230px) minmax(0,1fr);align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.agent-ai-row:first-child{padding-top:0}
.agent-ai-row:last-child{border-bottom:0}
.agent-ai-row>label{display:flex;align-items:center;gap:9px}
.agent-ai-row>label .icon{width:15px;height:15px;color:var(--text-3)}
.agent-ai-row .select-wrap{width:100%}.agent-ai-row .select-wrap select{width:100%}
.agent-ai-row small{font-size:11px;color:var(--text-3);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-input{display:flex;align-items:center;margin-top:6px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--input);padding-left:10px}
.unit-input b{color:var(--text-3);font-weight:500;font-size:13px}
.field .unit-input input{margin:0;border:0;background:transparent;padding-left:6px}
.field.readonly .mono{display:block;margin-top:10px;font-size:15px;color:var(--text)}
.field.readonly .plan-ai-line{display:block;margin-top:10px;font:500 15px/1.4 var(--sans);color:var(--home-ink)}
.field.readonly small{display:block;margin-top:4px;color:var(--text-3)}
.set .checkbox-grid{margin:0}
.checkbox-grid.three{grid-template-columns:repeat(3,1fr)}
.set details.more{margin-top:10px}
.connect{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.connect-top{display:flex;align-items:center;gap:12px}
.connect-top strong{font-size:14px;font-weight:500}
.connect-main>p{margin-top:4px;font-size:13px;color:var(--text-2);line-height:1.55}
.connect-main .micro-note{margin-top:6px}
.connect-actions{display:flex;gap:4px;flex:none}
.integrations{list-style:none;margin:0;padding:0}
.integrations li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.integrations li:last-child{border-bottom:0}
.integrations strong{display:block;font-size:13px;font-weight:500}
.integrations small{display:block;font-size:12px;color:var(--text-3)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}

/* ── Onboarding: a centred card on the canvas. ── */
.onboard{display:block;padding:0}
.ob-card{max-width:640px;margin:0 auto;padding:32px;border:1px solid var(--card-line);border-radius:16px;background:var(--card);box-shadow:var(--shadow-float)}
.onboard .onboard-inner h1{margin:14px 0 12px;font:600 clamp(26px,6vw,30px)/1.15 var(--sans);letter-spacing:-.03em;color:var(--home-ink)}
.onboard-inner .onboard-lede{max-width:52ch;margin-bottom:26px;font-size:15px;line-height:1.55;color:var(--text-2)}
.build-form{display:block}
/* 3 rows tall at rest, growing to 8; 16px+ on phones so iOS never zooms. */
.build-form textarea{display:block;width:100%;min-height:96px;max-height:calc(12.4em + 38px);resize:none;overflow-y:auto;border:1px solid var(--line-2);border-radius:12px;background:var(--raised);color:var(--home-ink);font-size:15px;line-height:1.55;padding:14px 16px;outline:none;transition:border-color .2s,box-shadow .2s}
.build-form textarea::placeholder{color:var(--text-4)}
.build-form textarea:focus{border-color:var(--cue-line);box-shadow:0 0 0 4px var(--cue-soft)}
.onboard-inner .examples{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--text-3)}
.examples button{padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text-2);font-size:12.5px;transition:background .15s,border-color .15s,color .15s}
.examples button:hover{background:var(--cue-soft);border-color:var(--cue-line);color:var(--cue)}
.budget-field{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;font-size:14px;color:var(--text-2)}
.budget-input{display:inline-flex;align-items:center;height:44px;border:1px solid var(--line-2);border-radius:12px;background:var(--raised);padding:0 12px}
.budget-input b{color:var(--text-3);font-weight:500;font-size:15px}
.budget-input input{width:110px;border:0;background:transparent;color:var(--home-ink);font-size:15px;padding:0 5px;outline:none}
.budget-input:focus-within{border-color:var(--cue-line);box-shadow:0 0 0 4px var(--cue-soft)}
.onboard-inner .mode-heading{margin:34px 0 8px;font:600 15px/1.2 var(--sans);letter-spacing:-.01em;color:var(--home-ink)}
/* Three selectable cards: a radio dot, the name, then one line. The chosen card is unmistakable. */
.mode-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mode-rows button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--text-2);text-align:left;transition:background .15s,border-color .15s}
.mode-rows button::before{content:'';box-sizing:border-box;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-3);background:transparent;transition:border-color .15s,background .15s}
.mode-rows button:hover{background:var(--bg-2)}
.mode-rows button b{font-size:14px;font-weight:600;color:var(--text-2)}
.mode-rows button small{font-size:12.5px;line-height:1.5;color:var(--text-3)}
.mode-rows button.on{border:1.5px solid var(--cue);background:var(--cue-soft)}
:root[data-theme="dark"] .mode-rows button.on{background:color-mix(in srgb,var(--cue) 12%,transparent)}
/* Filled accent circle with a white inner dot. */
.mode-rows button.on::before{border-color:var(--cue);background:radial-gradient(circle,var(--cue-ink) 0 3.2px,var(--cue) 3.2px)}
.mode-rows button.on b{color:var(--home-ink)}
.mode-rows button.on small{color:var(--text-2)}
.onboard-inner .mode-note{margin:8px 2px 0;font-size:12.5px;line-height:1.6;color:var(--text-3)}
.build-go{margin-top:26px;width:100%;height:44px;padding:0 26px;border-radius:12px;font-size:14.5px}
.onboard-inner .build-hint{margin-top:10px;font-size:13px;color:var(--text-3)}
.onboard-inner .build-error{margin-top:10px;font-size:13px;line-height:1.5;color:var(--danger)}
.onboard-inner .onboard-note{margin-top:14px;max-width:66ch;font-size:12.5px;line-height:1.6;color:var(--text-3)}
.onboard-inner .onboard-back{margin:0 0 12px}
.onboard-back .button{height:auto;padding:0;color:var(--text-2);font-size:13px;white-space:normal;text-align:left}
.build-bar{margin-top:26px;height:2px;border-radius:1px;background:var(--line-2);overflow:hidden}
.onboard-inner .build-head{margin-top:38px}
.build-bar i{display:block;width:34%;height:100%;background:var(--cue);animation:build-slide 1.15s linear infinite}
.build-list{list-style:none;margin:8px 0 0;padding:0}
.build-list li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--text-2)}
.build-list li:last-child{border-bottom:0}
.bchk{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-3);display:grid;place-items:center;flex:none}
.bchk .spinner{width:11px;height:11px;margin:0;border-width:1.5px}
@keyframes build-slide{from{transform:translateX(-110%)}to{transform:translateX(310%)}}
@media(prefers-reduced-motion:reduce){.build-bar i{width:100%;animation:none;opacity:.6}}
@media(max-width:760px){
 /* Stronger selectors than the shared `#workspace`/`.onboard-inner` rules further down. */
 .operator-page #workspace.onboard-page{padding:0 16px 80px}
 .onboard .onboard-inner{padding:28px 0 0}
 .ob-card{padding:22px}
 .mode-rows{grid-template-columns:1fr}
 .mode-rows button{flex-direction:row;align-items:center;flex-wrap:wrap}
 .mode-rows button b{flex:1}
 .mode-rows button small{flex-basis:100%;padding-left:28px}
 .budget-field{flex-direction:column;align-items:flex-start;gap:8px}
 .build-form textarea{font-size:16px}
 .st-switch{width:100%}
 .st-switch button{flex:1;padding:0 10px}
}

/* ── Starting from a business you already have ── */
.st-switch{display:inline-flex;gap:2px;margin:14px 0 0;padding:2px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2)}
.st-switch button{height:26px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--text-3);font-size:12px;font-weight:500;transition:color .15s,background .15s}
.st-switch button:hover{color:var(--text)}
.st-switch button.on{background:var(--bg-4);color:var(--text)}
.st-label{display:block;margin:18px 0 6px;font-size:13px;font-weight:500;color:var(--text-2)}
#start-url{display:block;width:100%;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--raised);color:var(--home-ink);font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s}
#start-url::placeholder{color:var(--text-4)}
#start-url:focus{border-color:var(--cue-line);box-shadow:0 0 0 4px var(--cue-soft)}
.st-form .build-go{margin-top:16px}
.st-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--text-3);font-size:12px}
.st-or::before,.st-or::after{content:'';flex:1;height:1px;background:var(--line)}
.st-shopify{width:100%}
.st-preview{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.st-field{display:block;font-size:13px;font-weight:500;color:var(--text-2)}
.st-field input,.st-field textarea{display:block;width:100%;margin-top:6px;padding:11px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--raised);color:var(--home-ink);font-size:15px;line-height:1.55;outline:none;transition:border-color .2s,box-shadow .2s}
.st-field textarea{resize:none;overflow-y:auto}
.st-field input::placeholder,.st-field textarea::placeholder{color:var(--text-4)}
.st-field input:focus,.st-field textarea:focus{border-color:var(--cue-line);box-shadow:0 0 0 4px var(--cue-soft)}
.st-sec{display:block;margin:0 0 4px;font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.st-products{display:flex;flex-direction:column;margin-top:4px}
.st-product{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--text-2)}
.st-product:last-child{border-bottom:0}
.st-product b{margin-left:auto;color:var(--text-3);font-weight:500}
.st-photos{display:flex;flex-wrap:wrap;gap:8px}
.st-photos img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.st-photos-note{margin-top:4px;font-size:13px;color:var(--text-3)}
.st-check{display:flex;align-items:flex-start;gap:9px;margin-top:10px;font-size:13px;line-height:1.5;color:var(--text-2)}
.st-check input{margin:2px 0 0;accent-color:var(--cue)}
.st-facts{margin:0}
.st-facts summary{padding:8px 0}
.st-facts ul{list-style:none;margin:4px 0 0;padding:0}
.st-facts li{display:flex;flex-wrap:wrap;gap:4px 10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--text-2)}
.st-facts li:last-child{border-bottom:0}
.st-facts li span{color:var(--text-3)}
.st-preview .build-go{margin-top:0}
.st-reset{align-self:center;margin-top:2px}

/* ── Import (modal) ── */
.import-rows{display:grid;gap:6px;max-height:50vh;overflow-y:auto;margin-top:10px}
.import-row{display:grid;grid-template-columns:minmax(0,1fr) 190px 130px;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg-1)}
.import-title strong{display:block;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.import-title small{display:block;font-size:10.5px;color:var(--text-3);margin-top:2px}
.import-title .match{color:var(--cue);font-family:var(--sans)}
.import-row select,.import-row input{width:100%;padding:6px 8px;border:1px solid var(--line-2);border-radius:8px;background:var(--input);color:var(--text);font-size:12px}
#modal:has(.import-rows){width:min(760px,calc(100vw - 24px))}
#modal.wide{width:min(1100px,96vw);max-width:min(1100px,96vw);max-height:calc(100vh - 24px)}

/* ── Operator dock & drawer ── */
.operator-dock{position:fixed;left:calc(var(--rail) + (100vw - var(--rail)) / 2);bottom:18px;z-index:6;transform:translateX(-50%);width:min(680px,calc(100vw - var(--rail) - 32px));display:flex;flex-direction:column;gap:8px}
.dock-suggest{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.operator-dock:focus-within .dock-suggest{opacity:1;transform:none;pointer-events:auto}
.dock-suggest button,.reply-suggest button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:14px;border:1px solid var(--line-2);background:var(--float-bg);backdrop-filter:blur(10px);color:var(--text-2);font-size:12px}
.dock-suggest button:hover,.reply-suggest button:hover{color:var(--text);border-color:var(--line-3)}
.reply-suggest button .icon{width:13px;height:13px;color:var(--cue)}
.dock-input{display:flex;align-items:center;gap:10px;min-height:52px;padding:3px 3px 3px 12px;border-radius:16px;background:var(--card);border:1px solid var(--card-line);box-shadow:var(--shadow-float)}
.dock-input:focus-within{border-color:var(--cue-line);box-shadow:var(--shadow-float),0 0 0 4px var(--cue-soft)}
.dock-input>.icon{color:var(--cue)}
.dock-spark{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#2f5bff,#12b3a8);color:#fff}
.dock-spark .icon{width:16px;height:16px}
.dock-input input{flex:1;min-width:0;height:36px;border:0;background:transparent;color:var(--text);font-size:14px;outline:none}
.dock-input input::placeholder{color:var(--text-3)}
.dock-input .button{width:36px;height:36px;border-radius:10px}
.operator-drawer{position:fixed;top:0;right:0;bottom:0;z-index:8;width:min(440px,100vw);display:flex;flex-direction:column;background:var(--bg-1);border-left:1px solid var(--line-2);box-shadow:var(--shadow-side);animation:drawer-in .25s var(--ease)}
@keyframes drawer-in{from{transform:translateX(24px);opacity:0}}
.drawer-head{display:flex;align-items:flex-start;gap:12px;padding:16px 16px 14px 18px;border-bottom:1px solid var(--line)}
.drawer-head div{flex:1}
.drawer-head strong{font-size:14px;font-weight:500}
.drawer-head small{display:block;font-size:11.5px;color:var(--text-3);margin-top:3px;line-height:1.5}
.drawer-body{flex:1;overflow-y:auto;padding:16px 16px 120px;display:flex;flex-direction:column;gap:12px}
body.drawer-open .operator-dock{left:calc(var(--rail) + (100vw - var(--rail) - min(440px,100vw)) / 2);width:min(640px,calc(100vw - var(--rail) - min(440px,100vw) - 32px))}
.msg{max-width:92%;font-size:13px;line-height:1.55}
.msg.owner{align-self:flex-end;padding:9px 13px;border-radius:14px 14px 4px 14px;background:var(--bg-4);color:var(--text)}
.msg.operator{align-self:flex-start;padding:12px 14px;border-radius:14px 14px 14px 4px;background:var(--bg-2);border:1px solid var(--line-2)}
.msg.thinking{display:flex;align-items:center;color:var(--text-3)}
.msg-error{border-color:color-mix(in srgb,var(--danger) 35%,transparent)!important}
.reply-summary{font-size:14px;color:var(--text);margin-bottom:8px!important}
.reply-text{white-space:pre-line;font-size:13.5px;line-height:1.6;color:var(--text)}
.reply-meta{display:block;margin-top:8px;font-size:10.5px;color:var(--text-4)}
.reply-block{margin-top:8px;padding-left:10px;border-left:2px solid var(--line-3)}
.reply-block ul{margin:0;padding-left:16px;color:var(--text-2);font-size:12.5px;line-height:1.55}
.rb-known{border-left-color:var(--k-known)}.rb-known .block-label{color:var(--k-known)}
.rb-inference{border-left-color:var(--k-inference)}.rb-inference .block-label{color:var(--k-inference)}
.rb-hypothesis{border-left-color:var(--k-hypothesis)}.rb-hypothesis .block-label{color:var(--k-hypothesis)}
.rb-assumption{border-left-color:var(--k-assumption)}.rb-assumption .block-label{color:var(--k-assumption)}
.rb-action{border-left-color:var(--cue)}.rb-action .block-label{color:var(--cue)}
.act-failed b{color:var(--danger)}
.reply-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* ── Motion: only when the view changes, never on refresh ── */
@media(prefers-reduced-motion:no-preference){
 .enter .page-head,.enter .brief,.enter .composer{animation:rise .35s var(--ease) both}
 .enter .metrics,.enter .nums,.enter .suggest-row,.enter .seg-nav{animation:rise .4s .04s var(--ease) both}
 .enter .split,.enter .team,.enter .plan-body,.enter .exp-list,.enter .settings-frame,.enter .setup,.enter .cast-grid,.enter .cast-empty,.enter .np-layout,.enter .launch-page,.enter .memory-main,.enter .vid-grid,.enter .site-layout{animation:rise .45s .08s var(--ease) both}
}

/* ── Responsive ── */
@media(max-width:1180px){
 .metric-row{grid-template-columns:repeat(3,minmax(0,1fr))}
 .metric:nth-child(4){padding-left:0;border-left:0}
 .metric:nth-child(-n+3){border-bottom:1px solid var(--line)}
 .split{grid-template-columns:1fr}
 .set{grid-template-columns:200px minmax(0,1fr);gap:16px 32px}
}
@media(max-width:980px){.choice-grid.three,.checkbox-grid.three{grid-template-columns:1fr 1fr}.decision-cols{grid-template-columns:1fr}}
.operator-page .crumbs{flex:1;min-width:0}
.operator-page .project-title strong,#biz-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){
 .operator-page #workspace{padding-bottom:170px}
 .operator-page #workspace.growth-page{padding:0 16px 168px}
 .operator-page .demo-label{display:none}
 .operator-page .button,.operator-page .biz-tabs button{min-height:40px}
 .biz-tabs{top:var(--header);padding:0 8px}
 .biz-tabs button{padding:0 10px}
 .biz-tabs .tab-label{display:none}
 .page{padding:22px 16px 32px}
 #workspace .page:not(.page-website):not(.page-growth){padding:24px 16px 32px}
 .page-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:22px}
 #workspace .page-head{margin-bottom:28px}
 .page-head h1{font-size:24px}
 .page-actions{justify-content:flex-start}
 .brief-lead{font-size:18px}
 .focus{flex-direction:column;gap:6px}
 .metric-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .metric,.metric:nth-child(4){padding:14px 0 14px 16px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
 .metric:nth-child(odd){padding-left:0;border-left:0}
 .metric:nth-child(n+5){border-bottom:0}
 .metric-value{font-size:21px}
 .metric-foot .measure{margin-left:0}
 .approval{grid-template-columns:1fr}
 .approval-actions{margin-top:10px}
 .measurement-heading{align-items:flex-start;flex-direction:column;gap:6px;padding:14px}
 .measurement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .measurement-cell{padding:12px 14px}
 .measurement-cell:nth-child(2){border-right:0}
 .measurement-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .measurement-explain{padding:0 14px}
 .measurement-foot{padding:12px 14px}
 .composer textarea{min-height:88px;font-size:15px}
 .composer-input{flex-direction:column;align-items:stretch}
 .composer-input .button.primary{width:100%}
 .run-body{padding-left:0}
 .draft>summary{grid-template-columns:1fr}
 .draft-kind{grid-row:auto}
 .draft-body,.draft-actions{margin-left:0}
 .stats{grid-template-columns:1fr 1fr}
 .stats div:nth-child(3){padding-left:0;border-left:0}
 .stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .funnel-row{grid-template-columns:minmax(84px,1fr) minmax(8px,56px) 28px auto;gap:6px;font-size:11.5px}
 .funnel-rate{font-size:10.5px}
 .set{grid-template-columns:1fr;gap:14px;padding:24px 0}
 .choice-grid.three,.checkbox-grid.three{grid-template-columns:1fr}
 .agent-ai-row{grid-template-columns:1fr;gap:6px}
 .agent-ai-row small{text-align:left}
 .connect{flex-direction:column}
 .plain.two{columns:1}
 .operator-dock{left:50%;bottom:calc(70px + env(safe-area-inset-bottom));width:calc(100vw - 20px)}
 body.drawer-open .operator-dock{left:50%;width:calc(100vw - 20px)}
 .operator-drawer{width:100vw;z-index:9}
 .form-grid{grid-template-columns:1fr}
 .import-row{grid-template-columns:1fr}
 .variants th:nth-child(2),.variants td:nth-child(2){display:none}
}
@media(max-width:480px){
 .operator-page #autonomy-chip{display:none}
 .operator-page .app-header{gap:6px;padding-inline:12px}
 .operator-page .header-right{gap:6px;flex:none}
 .operator-page #biz-line{font-size:10px}
 .sub-nav button{padding:0 11px;font-size:12.5px}
}
@media(max-width:639px){
 .composer{display:flex;flex-direction:column}
 .composer-input{display:contents}
 .composer-input>textarea{order:1}
 .composer .composer-row{order:2}
 .composer-input>.button{order:3;width:100%}
}

/* ── Platform connections, posting, recorded history ── */
.connect+.connect{padding-top:16px}
.connect-main{flex:1;min-width:0}
.connect+.integrations{margin-top:6px}
.link-card .callout{margin-top:10px}
.link-card code,.set-label code{font:11.5px var(--mono);color:var(--text-2);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-xs);padding:1px 5px;white-space:nowrap}
.conn-how{margin-top:8px}
.conn-how p{font-size:12.5px;line-height:1.65;color:var(--text-2);max-width:62ch;margin-top:6px}
.conn-target{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;color:var(--text);cursor:pointer}
.conn-target input{accent-color:var(--cue);width:14px;height:14px}
.pubs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0 32px}
.pub{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:11px;border:1px solid var(--line-2);font-size:11px;font-weight:500;color:var(--text-2);text-decoration:none;white-space:nowrap}
.pub .icon{width:11px;height:11px}
a.pub:hover{border-color:var(--line-3);color:var(--text)}
.pub-published{color:var(--cue);border-color:var(--cue-line)}
.pub-processing,.pub-uploading,.pub-queued{color:var(--k-inference)}
.pub-failed{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.pub-uncertain{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.pub-stats{font-size:11px;color:var(--text-3)}
.pubs .button{height:22px;padding:0 8px;font-size:11px}
.journal-kinds{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.journal-kinds button{height:26px;padding:0 10px;border-radius:13px;border:1px solid var(--line-2);background:transparent;color:var(--text-3);font-size:11.5px;font-weight:500;transition:color .15s,border-color .15s,background .15s}
.journal-kinds button span{margin-left:4px;font:10.5px var(--mono);color:var(--text-4)}
.journal-kinds button:hover{color:var(--text);border-color:var(--line-3)}
.journal-kinds button.on{color:var(--text);background:var(--bg-3);border-color:var(--line-3)}
.journal-row mark{background:var(--cue-soft);color:var(--text);border-radius:2px;padding:0 1px}
.journal-body{margin-top:8px;max-height:340px;overflow:auto}
@media(max-width:640px){.pubs{margin-left:0}.connect{flex-direction:column}.connect-actions{flex-wrap:wrap}}

/* ── Keys typed in the app (saved to .env on this computer) ── */
.settings-form{display:flex;flex-direction:column}
.keys-form{margin-top:12px}
.keys-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 14px}
.keys-grid .field{margin:8px 0}
.key-label{display:flex;align-items:center;justify-content:space-between;gap:8px}
.key-saved{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--cue)}
.key-saved .icon{width:12px;height:12px}
.key-saved .mono{color:var(--text-3);font-size:10.5px}
.key-field input[type=password]{letter-spacing:.08em}
.key-field input::placeholder{letter-spacing:0}
.keys-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px}
.keys-where{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:11px;color:var(--text-4)}
.keys-where .icon{width:12px;height:12px}
.keys-form .form-error:empty,.meta-connect .form-error:empty{display:none}
.keys-form .form-error,.meta-connect .form-error{margin-top:8px;font-size:12px;color:var(--danger)}
.signin-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px}
.signin-row .micro-note{margin:0}
.conn-keys{margin-top:10px}
.conn-keys>summary{font-size:12px}
.meta-connect{margin-top:10px}
.meta-choose{margin-top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.radio-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer}
.radio-row input{accent-color:var(--cue)}
.link-card .micro-note .icon{width:12px;height:12px;vertical-align:-2px;color:var(--cue)}
.all-keys{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:1100px){
 .all-keys{display:block;columns:2;column-gap:16px}
 .all-keys>.hcard{break-inside:avoid;display:block;width:100%;margin:0 0 16px}
}
.all-keys-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.all-keys-row:last-child{border-bottom:0}
.all-keys-label{min-width:0;font-size:13.5px;font-weight:500;color:var(--text)}
.all-keys-label code{display:block;margin-top:2px;font:11.5px var(--mono);color:var(--text-3);background:none;border:0;padding:0;overflow-wrap:anywhere}
.all-keys-status{display:inline-flex;align-items:center;gap:8px;min-width:0}
.all-keys-preview{font:12px var(--mono);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.all-keys-row .button{justify-self:end}

/* ── Avatars ── */
.av-form{padding-top:4px}
.av-presets{border:0;margin:14px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.av-presets legend{font-size:12px;font-weight:500;color:var(--text-2);margin-bottom:8px}
.av-preset{position:relative;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s}
.av-preset:hover{border-color:var(--line-3)}
.av-preset.on{border-color:var(--cue-line);background:var(--cue-soft)}
.av-preset input{position:absolute;opacity:0;pointer-events:none}
.av-preset:has(input:focus-visible){outline:2px solid var(--cue);outline-offset:2px}
.av-preset strong{font-size:12.5px;font-weight:500}
.av-preset small{font-size:11px;line-height:1.45;color:var(--text-3)}
.av-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 92px;gap:0 12px}
.av-row .select-wrap{width:100%}.av-row .select-wrap select{width:100%}
.av-color input[type=color]{height:38px;padding:3px;cursor:pointer}
.av-brief{white-space:pre-wrap;font:11.5px/1.65 var(--mono);color:var(--text-3);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-top:8px;max-height:220px;overflow:auto}
.av-form .keys-actions{margin-top:14px}
.av-form .keys-actions .micro-note{margin:0;flex:1;min-width:200px}
.av-jobs{display:flex;flex-direction:column}
.av-job{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.av-job-face{width:44px;height:66px;border-radius:8px;object-fit:cover;background:var(--bg-2)}
.av-job-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.av-job-top strong{font-size:13px;font-weight:500}
.av-job .state.st-running{color:var(--k-inference)}
.av-job-hook{margin-top:3px;font-size:12.5px;color:var(--text-2)}
.av-job-script{font-size:12px;line-height:1.6;color:var(--text-2);margin-top:6px;max-width:70ch}
.av-job .callout{margin-top:8px}
.av-job-video{width:120px;aspect-ratio:9/16;border-radius:10px;background:#000;object-fit:cover}
.ai-badge{display:inline-flex;align-items:center;margin:6px 0 0 6px;padding:1px 6px;border-radius:5px;background:var(--cue-soft);color:var(--cue);font:600 10px var(--mono);letter-spacing:.04em;vertical-align:top}
.video-cell .button+.button{margin-top:4px}
/* Make-videos dialog */
.av-modal-grid{display:grid;grid-template-columns:minmax(0,1fr) auto 150px;gap:0 12px;align-items:end}
.av-modal-grid .select-wrap{width:100%}.av-modal-grid .select-wrap select{width:100%}
.av-voice-play{padding-bottom:14px}
.av-hooks{border:0;padding:0;margin:10px 0 0}
.av-hooks legend{font-size:12px;font-weight:500;color:var(--text-2);margin-bottom:6px}
.av-hook{padding:10px 0;border-top:1px solid var(--line)}
.av-hook-pick{display:flex;align-items:baseline;gap:8px;font-size:13px;cursor:pointer}
.av-hook-pick input{accent-color:var(--cue);transform:translateY(2px)}
.av-hook-pick b{color:var(--text-3);font-size:11px}
.av-hook-pick small{margin-left:auto;font-size:11px;color:var(--text-3);white-space:nowrap}
.av-hook textarea{display:block;width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--input);color:var(--text);font:12.5px/1.55 inherit;resize:vertical;min-height:62px}
.av-hook textarea:disabled{opacity:.5}
/* Structure picker inside the Make-videos dialog */
.av-structure{margin:6px 0 14px}
.av-structure select{display:block;width:100%;margin-top:6px;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--input);color:var(--text);font-size:13px}
.av-structure select:focus{border-color:var(--cue-line);box-shadow:0 0 0 3px var(--cue-soft);outline:none}
.av-structure .micro-note{margin:8px 0 0}
/* Style picker inside the Make-videos dialog */
.av-style{margin:6px 0 14px}
.av-style h3{font-size:12px;font-weight:500;color:var(--text-2);margin-bottom:5px}
.av-style-lede{margin-bottom:10px;font-size:12.5px;line-height:1.55;color:var(--text-3)}
.av-themes{display:grid;grid-auto-flow:column;grid-auto-columns:180px;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:thin}
.av-theme{display:flex;flex-direction:column;gap:4px;min-width:0;padding:11px 12px;border:1px solid var(--line-2);border-radius:10px;background:transparent;color:var(--text);text-align:left;font:inherit;cursor:pointer;scroll-snap-align:start;transition:border-color .15s,background .15s}
.av-theme:hover:not(:disabled){border-color:var(--line-3)}
.av-theme.on{border-color:var(--cue-line);background:var(--cue-soft)}
.av-theme:disabled{opacity:.5;cursor:not-allowed}
.av-theme:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
.av-theme strong{font-size:12.5px;font-weight:500;overflow-wrap:anywhere}
.av-theme-tag{font-size:11.5px;line-height:1.45;color:var(--text-3);overflow-wrap:anywhere}
.av-theme-secs{font:10.5px var(--mono);color:var(--text-4)}
.av-theme-note{font-size:11px;color:var(--cue);min-height:0;overflow-wrap:anywhere}
.av-theme-note:empty{display:none}
.av-theme-result{margin-top:10px}
.av-theme-status{margin:0;font-size:12.5px;color:var(--text-3)}
.av-theme-written,.av-theme-warn,.av-theme-rec{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-2);overflow-wrap:anywhere}
.av-theme-written{color:var(--text)}
.av-theme-warn{color:var(--warn)}
.av-theme-rec{color:var(--text-3)}
@media(min-width:700px){.av-themes{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));overflow:visible;scroll-snap-type:none}}
@media(max-width:640px){.av-presets{grid-template-columns:1fr}.av-row{grid-template-columns:1fr 1fr}.av-color{grid-column:span 2}.av-job{grid-template-columns:44px minmax(0,1fr)}.av-job-video{grid-column:2;width:140px}.av-modal-grid{grid-template-columns:1fr}.keys-where{margin-left:0}.all-keys-row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}.all-keys-label{grid-column:1;grid-row:1}.all-keys-row .button{grid-column:2;grid-row:1}.all-keys-status{grid-column:1/-1;grid-row:2}}

/* ── Pages inside a tab ── */
.sub-nav{margin:-10px 0 20px}
/* The plan's sub-navigation borrows the Settings underline tabs; give them the page's breathing room. */
.page-plan .settings-nav{margin:-14px 0 26px}
.seg-count{margin-left:7px;font:10.5px var(--mono);color:var(--text-4)}
.seg-nav button.on .seg-count{color:var(--text-3)}
.settings-nav button.on .seg-count{color:var(--text-3)}
.icon.back{transform:rotate(180deg)}
.back-link{margin:0 0 14px -10px}

/* ── Settings: one calm 680px column, like Home ── */
/* Underline tabs are still used by the Results (insights) and Plan pages. */
.settings-nav{display:flex;gap:2px;margin:0 0 4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.settings-nav::-webkit-scrollbar{display:none}
.settings-nav button{position:relative;display:inline-flex;align-items:center;height:42px;padding:0 12px;border:0;background:none;color:var(--text-3);font:500 13px/1 var(--sans);white-space:nowrap;cursor:pointer;transition:color .15s}
.settings-nav button:hover{color:var(--text)}
.settings-nav button.on{color:var(--text)}
.settings-nav button.on::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:var(--cue)}
.settings-nav button:focus-visible{outline:2px solid var(--cue);outline-offset:-2px;border-radius:0}
.settings-frame{max-width:none;margin:0}
.settings-head{margin:0 0 20px}
.settings-head h1{margin:0;font:600 clamp(24px,2.6vw,30px)/1.15 var(--sans);letter-spacing:-.025em;color:var(--home-ink)}
.site-title h1{margin:0;font:600 clamp(24px,2.6vw,30px)/1.15 var(--sans);letter-spacing:-.03em;color:var(--home-ink)}
/* Settings sub-tabs: the segmented control from Home. */
.settings-tabs{display:inline-flex;padding:3px;margin:0 0 20px;border-radius:11px;background:var(--bg-3);gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.settings-tabs::-webkit-scrollbar{display:none}
.settings-tabs button{height:32px;padding:0 16px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font:500 13px var(--sans);white-space:nowrap;cursor:pointer;transition:color .18s var(--ease),background .18s var(--ease)}
.settings-tabs button:hover{color:var(--text)}
.settings-tabs button.on{background:var(--card);color:var(--text);box-shadow:var(--shadow-card)}
.settings-tabs button:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
.settings-body{min-width:0}
/* Each settings section is a card: title and question left, controls right. */
.settings-frame .set{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px 32px;align-items:start;padding:20px;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow-card)}
.settings-frame .set.set-wide{grid-template-columns:minmax(0,1fr)}
.settings-frame .set+.set{margin-top:12px}
.settings-frame .set-label h2{font:600 15px/1.3 var(--sans);letter-spacing:-.01em;color:var(--home-ink)}
.settings-frame .set-label p{margin-top:4px;font-size:13px;line-height:1.5;color:var(--text-2)}
.settings-frame .set-body{min-width:0;max-width:640px}
.settings-frame .set.set-wide .set-body{max-width:none}
.settings-frame :focus-visible{outline:2px solid var(--cue);outline-offset:2px}
.money-fields{display:grid;gap:18px;margin-top:6px}
.money-field{display:flex;flex-direction:column;gap:8px}
.money-label{font-size:15px;color:var(--home-ink)}
.money-input{display:flex;align-items:center;width:100%;max-width:420px;height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--raised);transition:border-color .2s,box-shadow .2s}
.money-input:focus-within{border-color:var(--cue-line);box-shadow:0 0 0 4px var(--cue-soft)}
.money-input b{color:var(--text-3);font-weight:500;font-size:15px}
.money-input input{flex:1;min-width:0;padding:0 6px;border:0;background:transparent;color:var(--home-ink);font-size:16px;font-variant-numeric:tabular-nums;outline:none}
.settings-frame .unit-input{height:40px;border-radius:10px}
.settings-frame .unit-input input{height:38px;padding:0 6px}
.settings-frame .field-help{display:block;font-size:12.5px;line-height:1.55;color:var(--text-3)}
.field-error{display:block;margin-top:5px;font-size:12px;color:var(--danger)}
.field-error:empty{display:none}
.fine-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 24px;margin-top:4px}
.fine-fields .field{margin:0 0 16px;font-size:13px;color:var(--text)}
.fine-fields .field small{font-size:12px;line-height:1.5;color:var(--text-3)}
.unit-input.suffix{padding-right:10px}
.unit-input.suffix b{margin-left:2px}
.heads-up{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.heads-up-title{display:block;margin-bottom:9px;font-size:13px;color:var(--text-2)}
.heads-up .seg{flex-wrap:wrap}
.heads-up .field-help{margin-top:10px}
.settings-frame .checkbox-grid{gap:4px 32px;margin:4px 0 0}
.settings-frame .checkbox-grid label{padding:8px 0;border:0;background:transparent;font-size:14px;color:var(--text)}
.settings-frame .checkbox-grid label:hover{border:0}
.settings-frame .checkbox-grid label:has(input:checked){background:transparent;border:0}
.settings-frame .checkbox-grid input{width:15px;height:15px}
.always-note{margin:18px 0 0;font-size:12.5px;color:var(--text-3)}
.always-list{margin:6px 0 0;font-size:12.5px}
.settings-end{margin-top:12px}
.settings-end .prose{font-size:13px;line-height:1.55;color:var(--text-2)}
.settings-end .button{margin-top:12px}
.save-bar{position:sticky;bottom:100px;z-index:2;display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:16px 0 0;padding:12px 18px;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow-float)}
.save-note{margin:0;font-size:13px;color:var(--text-2)}
.save-actions{display:flex;gap:8px;margin-left:auto}
.save-error{flex-basis:100%;margin:0;font-size:12px;color:var(--danger)}
.save-error:empty{display:none}
.keys-lede{display:block;font-size:12.5px;color:var(--text-3);margin-bottom:16px}
.keys-lede .icon{width:14px;height:14px;color:var(--cue);vertical-align:-2px;margin-right:6px}
.keys-lede code{font:11.5px var(--mono);color:var(--text-2)}

/* ── Connections: tiles, then one page per platform ── */
.conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:10px}
.conn-tile{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;align-items:center;padding:14px;border:1px solid var(--line-2);border-radius:14px;background:var(--bg-1);color:var(--text);font:inherit;text-align:left;cursor:pointer;overflow:hidden;isolation:isolate;transition:border-color .2s,background .2s,transform .25s var(--ease)}
.conn-tile::after{content:'';position:absolute;z-index:-1;right:-50px;bottom:-70px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tint) 24%,transparent),transparent 70%);opacity:0;transition:opacity .3s}
.conn-tile:hover{border-color:var(--line-3);background:var(--bg-2);transform:translateY(-1px)}
.conn-tile:hover::after,.conn-tile.st-connected::after{opacity:1}
.conn-tile:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
.conn-tile .conn-mark{grid-row:span 2}
.conn-tile-text{min-width:0}
.conn-tile-text strong{display:block;font-size:13.5px;font-weight:500}
.conn-tile-text small{display:block;font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conn-tile .state{grid-column:2}
.conn-tile.st-connected{border-color:color-mix(in srgb,var(--tint) 32%,var(--line-2))}
.conn-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:color-mix(in srgb,var(--tint) 15%,var(--bg-2));border:1px solid color-mix(in srgb,var(--tint) 35%,transparent);color:color-mix(in srgb,var(--tint) var(--tint-mix),var(--text));font:600 13px var(--sans);letter-spacing:-.02em}
.conn-mark.big{width:56px;height:56px;border-radius:16px;font-size:18px}
.conn-foot{margin-top:22px}
.conn-foot .icon{width:12px;height:12px;vertical-align:-2px;margin-right:4px}
.conn-page{max-width:720px}
.conn-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:20px;border:1px solid var(--line-2);border-radius:18px;background:radial-gradient(110% 150% at 0% 0%,color-mix(in srgb,var(--tint) 16%,transparent),transparent 62%),var(--bg-1)}
.conn-hero h2{font-size:20px;font-weight:500;letter-spacing:-.025em}
.conn-hero p{margin-top:4px;font-size:13px;line-height:1.5;color:var(--text-2)}
.conn-body{padding:20px 2px 0}
.conn-facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin-bottom:16px;font-size:11.5px;color:var(--text-3)}
.conn-facts b{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--text)}
.conn-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.conn-actions .micro-note{margin:0}
.conn-body .keys-form{margin-top:4px}
.conn-body .conn-target{margin:0 0 14px}

/* ── Avatars: setup card ── */
.setup{margin:-6px 0 0;padding:20px;border:1px solid var(--line-2);border-radius:14px;background:var(--bg-1)}
.setup-title{margin:0;font:500 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.setup-rows{margin-top:14px;border-top:1px solid var(--line)}
.setup-row{border-bottom:1px solid var(--line)}
.setup-row:last-child{border-bottom:0}
.setup-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;flex-wrap:wrap}
.setup-row>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;list-style:none;cursor:pointer}
.setup-row>summary::-webkit-details-marker{display:none}
.setup-row-main{min-width:0}
.setup-row-main strong{display:block;font-size:13.5px;font-weight:500}
.setup-row-main small{display:block;margin-top:3px;font-size:11.5px;line-height:1.5;color:var(--text-3)}
.setup-row-main .setup-problem{margin-top:4px;color:var(--warn)}
.setup-done{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--cue);white-space:nowrap}
.setup-done .icon{width:14px;height:14px;stroke-width:2.4}
.setup-off{font-size:12px;color:var(--text-3);white-space:nowrap}
.setup-note{margin:10px 0 24px;font-size:12px;line-height:1.6;color:var(--text-3)}
.setup-ready{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;color:var(--text)}
.setup-ready .icon{width:15px;height:15px;stroke-width:2.4;color:var(--cue)}
.setup-alt{margin:0 0 12px}
.setup-alt .keys-form{margin:0}
.setup-way-body{padding-bottom:14px}
.setup-way-body .keys-form{margin:0}
@media(max-width:760px){.setup-line,.setup-row>summary{gap:10px}.setup-line .button{min-height:40px}}

/* ── Avatars: presenters ── */
.cast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,210px));gap:18px;align-items:start}
.cast-card{display:flex;flex-direction:column;gap:8px;min-width:0}
.cast-media{position:relative;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line-2)}
.cast-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cast-card:hover .cast-media img{transform:scale(1.035)}
.cast-over{position:absolute;inset:auto 0 0;padding:44px 14px 14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8))}
.cast-over strong{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em;color:#fff}
.cast-over small{font-size:11px;color:rgba(255,255,255,.7)}
.cast-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;color:var(--text-2)}
.cast-state strong{font-size:12.5px;font-weight:500;color:var(--text)}
.cast-state small{font-size:11px;line-height:1.5;color:var(--text-3)}
.cast-state .spinner{margin:0;width:20px;height:20px}
.cast-state .icon{width:18px;height:18px;color:var(--warn)}
.cast-actions{display:flex;align-items:center;gap:4px}
.cast-card .cast-actions .button.primary{flex:1}
.cast-actions .cast-wait{flex:1;padding:0 4px}
.cast-actions .button.small{height:28px}
.cast-add{aspect-ratio:2/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed var(--line-3);border-radius:16px;background:transparent;color:var(--text-3);font:inherit;font-size:12.5px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.cast-add:hover{color:var(--text);border-color:var(--text-3);background:var(--bg-1)}
.cast-add .icon{width:20px;height:20px}
.cast-empty{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:52px 20px;border:1px dashed var(--line-3);border-radius:18px;background:radial-gradient(55% 90% at 50% 0%,var(--cue-soft),transparent 70%);color:var(--text);font:inherit;cursor:pointer;transition:border-color .2s}
.cast-empty:hover{border-color:var(--cue-line)}
.cast-empty-art svg{width:64px;height:80px;fill:var(--cue);opacity:.85}
.cast-empty strong{font-size:16px;font-weight:500;letter-spacing:-.01em}
.cast-empty small{font-size:12px;color:var(--text-3)}
.av-job-meta{margin-top:3px;font-size:11.5px;color:var(--text-3)}
.av-job-top .state .spinner{width:10px;height:10px;margin:0 2px 0 0;border-width:1.5px}

/* ── Avatars: new presenter, with a live preview ── */
.np-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.np-layout .av-form{max-width:620px}
.np-preview{position:sticky;top:124px;display:flex;flex-direction:column;gap:10px}
.np-card{position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);background:radial-gradient(90% 70% at 50% 16%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 72%),linear-gradient(180deg,#1a2233,#0a0e17);transition:background .4s var(--ease)}
.np-art{position:absolute;inset:16% 16% 0}
.np-art svg{width:100%;height:100%;fill:color-mix(in srgb,var(--accent) 78%,#fff);opacity:.92;filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));transition:fill .4s var(--ease)}
.np-meta{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:2px;padding:72px 18px 18px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.66) 45%,rgba(0,0,0,.9))}
.np-meta strong{font-size:19px;font-weight:500;letter-spacing:-.025em;color:#fff;overflow-wrap:anywhere}
.np-meta span{font-size:12px;color:rgba(255,255,255,.82)}
.np-meta small{font-size:11px;color:rgba(255,255,255,.55)}
.np-create{width:100%;height:40px}
.np-quota{display:block;text-align:center;font-size:11px;color:var(--text-4)}
.np-key{padding:14px;border:1px solid var(--line-2);border-radius:14px;background:var(--bg-1)}
.np-key strong{font-size:13px;font-weight:500}
.np-key .keys-grid .field{margin:6px 0}

/* ── Business: launch page ── */
.launch-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin:4px 0 26px}
.launch-count{margin:0;font-size:15px;font-weight:500;color:var(--text)}
.launch-ready{font-size:13px;font-weight:500;color:var(--cue)}
.launch-top .meter{flex-basis:100%;margin:6px 0 0}
.launch-page .launch-grid .sub-label{display:block;margin:6px 0 2px}

/* ── Memory: one column ── */
.memory-main .memory-search{width:min(280px,100%)}
.page-memory .menu-list{min-width:250px}
.page-memory .memory-more .menu-list{min-width:170px}

@media(prefers-reduced-motion:no-preference){
 .enter .conn-tile{animation:rise .45s var(--ease) both}
 .enter .conn-grid>.conn-tile:nth-child(2){animation-delay:.03s}
 .enter .conn-grid>.conn-tile:nth-child(3){animation-delay:.06s}
 .enter .conn-grid>.conn-tile:nth-child(4){animation-delay:.09s}
 .enter .conn-grid>.conn-tile:nth-child(5){animation-delay:.12s}
 .enter .conn-grid>.conn-tile:nth-child(n+6){animation-delay:.15s}
 .enter .cast-card:nth-child(2){animation-delay:.04s}
}
@media(max-width:900px){
 .settings-frame .set{grid-template-columns:1fr;gap:12px}
 .np-layout{grid-template-columns:1fr;gap:20px}
 .np-preview{position:static;max-width:320px}
}
@media(max-width:520px){
 .conn-hero{grid-template-columns:auto minmax(0,1fr)}
 .conn-hero .state{grid-column:1/-1}
 .cast-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .memory-tools{width:100%}
 .memory-main .memory-search{width:auto;flex:1}
}

/* ── Avatars: video gallery ── */
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,210px));gap:22px 16px;align-items:start}
.vid-card{display:flex;flex-direction:column;gap:10px;min-width:0}
.vid-media{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line-2)}
.vid-media video{display:block;width:100%;height:100%;max-height:70vh;object-fit:cover;background:#000}
/* Without a video the 9:16 box is a tall empty grey slab, so it shrinks to a short placeholder. */
.vid-media:not(:has(video)){aspect-ratio:auto;height:260px;max-height:260px}
.vid-media:has(video){max-height:70vh}
@media(max-width:760px){.vid-media:not(:has(video)){height:200px;max-height:200px}}
.vid-badge{position:absolute;top:10px;left:10px;padding:3px 8px;border-radius:7px;background:rgba(9,9,10,.72);backdrop-filter:blur(6px);font:500 11px var(--mono);color:#fff;pointer-events:none}
.vid-card.st-completed .vid-badge{color:var(--cue-media)}
.vid-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center}
.vid-state strong{font-size:12.5px;font-weight:500}
.vid-state small{font-size:11px;color:var(--text-3)}
.vid-state .spinner{margin:0;width:20px;height:20px}
.vid-state .icon{width:18px;height:18px;color:var(--warn)}
.vid-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.vid-hook{font-size:13px;line-height:1.45;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vid-body>small{font-size:11px;color:var(--text-3)}
.vid-body .callout{margin:2px 0 0;font-size:11.5px}
.vid-body .cast-actions:empty{display:none}

/* Journal chips sit directly under the toolbar. */
.memory-toolbar+.journal-kinds{margin-top:20px}
/* The first area title sits 20px below the toolbar, not the 12px it carries. */
.memory-toolbar+#memory-results{margin-top:20px}

/* ── Sign in (hosted) ── */
.login-page{min-height:100vh;background:radial-gradient(70% 55% at 50% 0%,color-mix(in srgb,var(--cue) 12%,transparent),transparent 70%),var(--bg)}
.login{position:relative;min-height:100vh;display:grid;place-items:center;padding:32px 16px}
.login-card{width:min(400px,100%);padding:36px 32px 30px;border:1px solid var(--line-2);border-radius:22px;background:var(--raised);box-shadow:var(--shadow-lg);text-align:center}
.login-mark{display:block;margin:0 auto 14px;width:72px;height:55px;object-fit:contain;filter:none}
.login-card h1{font-size:28px;font-weight:600;letter-spacing:-.04em}
.login-tag{margin:6px 0 26px;color:var(--text-2);font-size:14px}
.login-google{width:100%;height:46px;gap:12px;font-size:14.5px;border-radius:12px}
.login-google svg{width:20px;height:20px}
.login-note{margin-top:12px;font-size:12px;color:var(--text-3)}
.login-note a{color:inherit;text-decoration:underline}
.login-badge{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--cue-soft);color:var(--cue);font-size:12px;font-weight:600}
#login-wait p{margin:12px 0 18px;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.login-card .callout{margin-top:16px;text-align:left}
.login-theme{position:absolute;top:16px;right:16px}
.delete-card #delete-question{display:flex;flex-direction:column;gap:10px}
.delete-card #delete-question .login-tag{margin:0 0 8px}
.delete-card #delete-done .micro-note{margin:6px 0 18px;color:var(--text-3)}
.legal-page{min-height:100vh;background:radial-gradient(70% 55% at 50% 0%,color-mix(in srgb,var(--cue) 12%,transparent),transparent 70%),var(--bg)}
.legal{max-width:680px;margin:0 auto;padding:48px 20px 64px;overflow-wrap:anywhere}
.legal-head{display:flex;align-items:center;gap:8px}
.legal-head a{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--text);text-decoration:none}
.legal-body h1{font-size:30px;font-weight:600;letter-spacing:-.03em;margin-top:28px}
.legal-updated{font-size:13px;color:var(--text-3)}
.legal-body h2{font-size:17px;font-weight:600;margin:28px 0 8px}
.legal-body p,.legal-body li{font-size:15px;line-height:1.65;color:var(--text-2)}
.legal-body p{margin-top:10px}
.legal-body ul{margin:10px 0;padding-left:20px}
.legal-body li{margin-top:6px}
.legal-body a{color:var(--cue)}
.legal-foot{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:16px;font-size:14px}
.legal-foot a{color:var(--text-2)}
@media(max-width:520px){.legal-body h1{font-size:25px}}

/* ── Admin (hosted) ── */
.admin-page{min-height:100vh;background:var(--home-bg);color:var(--home-ink);--page:1180px}
.admin-head{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 20px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--home-bg) 90%,transparent);backdrop-filter:blur(12px)}
.admin-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.admin-brand img{width:40px;height:31px;object-fit:contain;flex-shrink:0}
.admin-brand strong{font-size:15px;font-weight:600;letter-spacing:-.02em}
.admin-brand span{padding:2px 8px;border-radius:6px;background:var(--cue-soft);color:var(--cue);font-size:11px;font-weight:600}
.admin-actions{display:flex;align-items:center;gap:6px}
/* The page keeps Home's column width and header. Cards are spaced by the containers' gap only, so
   stacked cards are 16px apart on phones as well as in the grid. */
.admin-page .page-head{margin-bottom:0}
.admin-page .admin{display:flex;flex-direction:column;gap:16px}
.admin-grid{display:grid;grid-template-columns:1fr;gap:16px}
.admin-grid>div{display:flex;flex-direction:column;gap:16px}
@media(min-width:980px){.admin-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.admin-stats{margin:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media(max-width:640px){.admin-stats{grid-template-columns:1fr 1fr}}
/* The four numbers wear Home's KPI look, scoped so other .stats strips keep theirs. */
.admin-page .admin-stats strong{display:block;font:600 26px/1.15 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.admin-page .admin-stats span{display:block;margin-top:2px;font-size:12.5px;color:var(--text-3)}
.admin-platform{display:grid;grid-template-columns:1fr;gap:20px;padding-top:0}
@media(min-width:900px){.admin-platform{grid-template-columns:repeat(2,minmax(0,1fr))}}
.admin-platform .sub-label{margin:0 0 2px}
.admin-platform p{font-size:13px;line-height:1.6;color:var(--text-2);margin-top:4px}
.admin-keys{display:flex;flex-wrap:wrap;gap:6px}
.admin-invite{display:flex;gap:8px;max-width:460px;margin-top:14px;flex-wrap:wrap}
.admin-invite input{flex:1;min-width:180px;height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--input);color:var(--text);font-size:13px;transition:border-color .15s,box-shadow .15s}
.admin-invite input:focus{outline:none;border-color:var(--cue-line);box-shadow:0 0 0 3px var(--cue-soft)}
.admin-table-wrap{overflow:auto;max-height:72vh;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card)}
.admin-users{font-size:13px}
.admin-users thead th{position:sticky;top:0;z-index:1;background:var(--card);border-bottom:1px solid var(--card-line)}
.admin-users td{vertical-align:middle}
.admin-users td small{display:block}
.admin-use{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:12.5px}
.admin-limit{width:64px;padding:5px 6px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--input);color:var(--text);font:12px var(--mono)}
.admin-limit:focus{outline:none;border-color:var(--cue-line);box-shadow:0 0 0 3px var(--cue-soft)}
.admin-users .plan-bar{margin-top:6px;max-width:150px}
/* Status as a pill; the native select keeps the value changeable in place. */
.admin-page select.admin-status{appearance:auto;-webkit-appearance:auto;height:auto;min-height:26px;padding:3px 26px 3px 10px;line-height:1.3;border:1px solid var(--line-2);border-radius:999px;background-color:var(--bg-3);color:var(--text-2);font:500 12px/1.3 var(--sans);cursor:pointer}
.admin-page .admin-status.admin-st-active{background-color:var(--good-soft);border-color:color-mix(in srgb,var(--good) 30%,transparent);color:var(--good)}
.admin-page .admin-status.admin-st-pending{background-color:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn)}
.admin-page .admin-status.admin-st-blocked{background-color:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,transparent);color:var(--danger)}
.admin-pill.active{background:var(--good-soft);color:var(--good)}
.admin-pill.pending{background:var(--warn-soft);color:var(--warn)}
.admin-pill.blocked{background:var(--danger-soft);color:var(--danger)}

/* ── More menu (tab bar) ── */
.biz-tabs .more-btn{position:relative;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:0;background:none;color:var(--text-3);font-size:13px;font-weight:500;white-space:nowrap;transition:color .15s}
.biz-tabs .more-btn .icon{width:14px;height:14px;transition:transform .15s}
.biz-tabs .more-btn[aria-expanded="true"]{color:var(--text)}
.biz-tabs .more-btn[aria-expanded="true"] .icon{transform:rotate(180deg)}
/* ── Sidebar: the Video studio label toggles its links ── */
.app-rail.sidebar .side-toggle{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.app-rail.sidebar .side-toggle .icon{width:13px;height:13px;stroke-width:1.8;transition:transform .15s var(--ease)}
.app-rail.sidebar .side-toggle[aria-expanded="true"] .icon{transform:rotate(180deg)}
.app-rail.sidebar #side-studio-links:not([hidden]){display:flex;flex-direction:column;gap:2px}
/* On the icon-width sidebar the labels become divider lines; the toggle stays a small button. */
@media(min-width:761px) and (max-width:1099px){
 .app-rail.sidebar .side-label.side-toggle{height:auto;width:36px;margin:4px auto;padding:4px 0;line-height:0;letter-spacing:normal;background:none;overflow:visible;justify-content:center}
}
.more-menu{position:fixed;z-index:7;top:calc(var(--header) + 46px);left:22px;display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:230px;padding:6px;border:1px solid var(--line-2);border-radius:12px;background:var(--raised);box-shadow:var(--shadow-pop)}
.more-menu>button,.more-menu>a{display:flex;align-items:center;height:34px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--text-2);font:inherit;font-size:13px;text-align:left;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.more-menu>button:hover,.more-menu>a:hover{background:var(--bg-3);color:var(--text)}
.more-menu>a{margin-top:4px;padding-top:6px;border-top:1px solid var(--line);border-radius:0 0 8px 8px;color:var(--text-3);font-size:12.5px}
.more-menu>a:hover{color:var(--cue)}

/* ── Home: a calm editorial note in one column ── */
/* Home-scoped tokens: the warm paper, ink and amber live in campaign.css :root, so every page shares them. */
.home-view,.home-page,.onboard-page,.settings-page,.website-page,.growth-page,.reveal-page,.operator-page{--home-gap:28px}
/* The workspace carries the paper and the gutters, so dividers span the full 680px column.
   The bottom padding = dock offset (18) + dock height (82) + the 48px fade + 32px, so the
   last line always ends above the fade at first view. */
#workspace.home-page,#workspace.onboard-page,#workspace.settings-page,#workspace.growth-page,#workspace.reveal-page{background:var(--home-bg);color:var(--home-ink)}
/* Every business page on the same paper, so More pages match Home, Settings and Website. */
.operator-page #workspace{background:var(--home-bg);color:var(--home-ink)}
#workspace.home-page{padding:0 28px 180px}
#workspace.growth-page{padding:0 32px 180px}
#workspace.reveal-page{padding:0 32px 140px}
#workspace.settings-page{padding:0 32px 120px}
/* The dock is hidden while starting a business, so the column needs less room below it. */
#workspace.onboard-page{padding:0 32px 110px}
.page-home{max-width:1280px;margin:0 auto;padding:8px 0 40px}
.onboard-inner{max-width:672px;margin:0 auto;padding:44px 0 0}
.page-settings{max-width:976px;margin:0 auto;padding:40px 0 0}
/* The reveal fills the workspace, with the preview given room to breathe. */
.page-reveal{max-width:920px;margin:0 auto;padding:28px 0 0}
.page-reveal h1,.page-reveal h2,.page-reveal h3{font-weight:inherit;letter-spacing:normal;color:inherit}
.page-reveal .hcard-head h2{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--home-ink)}
.page-reveal .hcard-head{flex-wrap:wrap;row-gap:8px}
.page-reveal p{margin:0}
.page-home h1,.page-home h2,.page-home h3,.onboard-inner h1,.onboard-inner h2,.onboard-inner h3{font-weight:inherit;letter-spacing:normal;color:inherit}
.page-home p,.onboard-inner p{margin:0}
.page-home .hsub{margin:4px 0 0}
.page-home .home-label,.page-website .home-label,.page-reveal .home-label{display:block;margin:0 0 12px;font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
/* ── Home: a bento dashboard of cards on the 12-column grid ── */
.home-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:12px 0 22px}
@media(min-width:761px){.home-head{margin-top:0}}
.home-head-main{min-width:0}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:var(--bg-2);color:var(--text-2);font-size:12px;font-weight:500;white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.violet{background:var(--violet-soft);color:var(--violet)}
.pill.brand{background:var(--cue-soft);color:var(--cue)}
.count-pill{height:20px;padding:0 8px}
.home-head .headline{margin:0;font:600 28px/1.15 var(--sans);letter-spacing:-.03em;color:var(--home-ink)}
.home-head .subline{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--text-2)}
.mode{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;min-width:0}
.mode-switch{display:inline-flex;padding:3px;border-radius:11px;background:var(--bg-3);gap:2px}
.mode-switch button{height:30px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font:500 13px var(--sans);cursor:pointer;transition:color .18s var(--ease),background .18s var(--ease)}
.mode-switch button:hover{color:var(--text)}
.mode-switch button.on{background:var(--card);color:var(--text);box-shadow:var(--shadow-card)}
.mode-summary{margin:0;max-width:100%;font-size:12px;line-height:1.5;color:var(--text-3)}
/* Coming up: a slim warn banner, not a card, under the header. */
.home-up{margin:0 0 16px}
.home-up>ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.home-up-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--warn) 28%,transparent);border-radius:12px;background:var(--warn-soft)}
.home-amber{width:8px;height:8px;border-radius:50%;background:var(--warn);align-self:center}
.home-up-text{font-size:13.5px;line-height:1.5;color:var(--warn-text)}
.home-up-when{font-size:12.5px;color:var(--warn-text);white-space:nowrap;font-variant-numeric:tabular-nums}
.home-stop{height:28px;padding:0 8px;font-size:12px}
.home-up-row.leaving,.hask.leaving{opacity:0}
/* Home's two columns with 16px gaps: a wide main column and a narrow side column, each stacking
   its own cards independently; below 1100px the cards become one ordered column (see media rule). */
.hgrid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:16px;align-items:start}
.hcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.hcard{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:20px;min-width:0}
.hcard.s8{grid-column:span 8}
.hcard.s7{grid-column:span 7}
.hcard.s5{grid-column:span 5}
.hcard.s4{grid-column:span 4}
.hcard.s12{grid-column:span 12}
.hcard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.hcard h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--home-ink);display:flex;align-items:center;gap:8px}
.hsub{margin:4px 0 0;color:var(--text-3);font-size:13px;line-height:1.5}
.hlink{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:var(--cue);font:500 13px var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap}
.hlink:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:currentColor}
.hlink .icon{width:14px;height:14px}
.hlink.see-all{margin-top:14px}
.hnone{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-3)}
/* Needs you: each question is a row box with a 40px icon tile. */
.hask-list{display:flex;flex-direction:column;gap:10px}
.hask{display:flex;gap:14px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);transition:opacity .2s var(--ease)}
.hask-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none}
.hask-ic .icon{width:20px;height:20px}
.hask-ic.b{background:var(--cue-soft);color:var(--cue)}
.hask-ic.v{background:var(--violet-soft);color:var(--violet)}
.hask-ic.w{background:var(--warn-soft);color:var(--warn)}
.hask-ic.good{background:var(--good-soft);color:var(--good)}
.hask-body{flex:1;min-width:0}
.hask h3{margin:0;font-size:14.5px;font-weight:600;color:var(--home-ink)}
.hask p{margin:3px 0 12px;color:var(--text-2);font-size:13.5px;line-height:1.5}
.hask-actions{display:flex;gap:8px;flex-wrap:wrap}
.hask-empty{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.hask-empty strong{font-size:14.5px;font-weight:600;color:var(--home-ink)}
.hask-empty p{margin:3px 0 0;font-size:13.5px;line-height:1.5;color:var(--text-2)}
/* Launch checklist: a conic-gradient ring and the next steps. */
.ring-wrap{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.ring{--p:0;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--cue) calc(var(--p)*1%),var(--cue-soft) 0);display:grid;place-items:center;flex:none}
.ring::before{content:'';width:66px;height:66px;border-radius:50%;background:var(--card);grid-area:1/1}
.ring b{grid-area:1/1;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--home-ink)}
.ring-text{font-size:13px;line-height:1.5;color:var(--text-2)}
.ring-text b{display:block;color:var(--home-ink);font-size:15px;font-weight:600;margin-bottom:2px}
.launch-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.hstep{display:flex;align-items:center;gap:10px;width:100%;padding:9px 8px;border:0;border-radius:9px;background:none;font:inherit;font-size:13.5px;color:var(--text);text-align:left;cursor:pointer;transition:background .15s var(--ease)}
.hstep:hover{background:var(--bg-2)}
.hchk{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-3);flex:none;display:grid;place-items:center}
.hchk.done{background:var(--good);border-color:var(--good);color:#fff}
.hchk.done .icon{width:11px;height:11px;stroke-width:3}
.hstep-text{min-width:0;overflow-wrap:anywhere}
.hstep .go{margin-left:auto;color:var(--text-3);flex:none}
/* Your homepage: a non-interactive thumbnail and what is left to do. */
.home-thumb{aspect-ratio:16/10;overflow:hidden;border-radius:12px}
.home-thumb .scaled-preview iframe{pointer-events:none}
.hready{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.hready-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2)}
.hready-row .hchk{width:16px;height:16px}
.hready-row .hlink{margin-left:auto}
.hready-row.ready{color:var(--text)}
/* Your first videos: poster tiles with a glass label and the hook. */
.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vid{border-radius:12px;border:1px solid var(--line);overflow:hidden;background:var(--card)}
.poster{position:relative;aspect-ratio:9/12;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden}
.poster.a{background:linear-gradient(160deg,#1f2a44,var(--cue))}
.poster.b{background:linear-gradient(160deg,#20303a,#12b3a8)}
.poster.c{background:linear-gradient(160deg,#2a2140,var(--violet))}
.poster video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster .lbl{position:absolute;top:10px;left:10px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.poster q{position:relative;margin:0;font-size:14px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.poster-diff{position:relative;display:inline-flex;align-self:flex-start;margin-top:8px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;font:500 11.5px/1.3 var(--sans);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vid-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;font-size:12.5px;color:var(--text-3)}
.filmed{display:inline-flex;align-items:center;gap:6px}
.good-dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none}
/* This week: a KPI strip with dividers. */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{padding:4px 18px;min-width:0}
.kpi:first-child{padding-left:0}
.kpi+.kpi{border-left:1px solid var(--line)}
.kpi span{font-size:12.5px;color:var(--text-3)}
.kpi b{display:block;font-size:26px;font-weight:600;letter-spacing:-.03em;margin:4px 0 2px;font-variant-numeric:tabular-nums;color:var(--home-ink);overflow-wrap:anywhere}
.kpi small{font-size:12px;color:var(--text-3)}
.page-home .home-practice{margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--text-3)}
.page-home .home-connect{display:inline;height:auto;padding:0;border:0;background:none;vertical-align:baseline;font-size:12.5px;color:var(--cue);box-shadow:none;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--cue-line)}
.page-home .home-connect:hover:not(:disabled){background:none;color:var(--cue);text-decoration-color:currentColor}
/* What I did: a feed of finished steps. */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.feed li:first-child{border-top:0;padding-top:0}
.feed-dot{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--bg-2);border:1px solid var(--line);color:var(--text-2)}
.feed-dot .icon{width:14px;height:14px}
.feed p{margin:0;font-size:13.5px;line-height:1.45;color:var(--text)}
.feed time{font-size:12px;color:var(--text-3)}
/* Shared card used by the Website tab and its approval cards. */
.home-card{padding:20px;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow-card);transition:opacity .2s var(--ease)}
.home-card h3{margin:0;font-size:20px;line-height:1.35;font-weight:500;letter-spacing:-.015em;color:var(--home-ink)}
.home-card p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--text-3)}
.home-card-actions{display:flex;gap:8px;margin-top:18px}
.home-card-actions .button{height:38px;padding:0 18px;border-radius:10px;font-size:13.5px}
/* Every control on Home keeps a visible focus ring. */
.page-home button:focus-visible,.page-home a:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
/* On Home the dock is lighter, opaque paper, with a 48px fade above it so text never looks cut. */
.home-view .operator-dock{width:min(560px,calc(100vw - var(--rail) - 32px));gap:6px}
.home-view .operator-dock::before{content:'';position:absolute;left:50%;bottom:100%;transform:translateX(-50%);width:100vw;height:48px;background:linear-gradient(0deg,var(--home-bg),transparent);pointer-events:none}
.home-view .dock-suggest button{background:var(--home-bg);border-color:transparent;box-shadow:var(--shadow-sm)}
.home-view .dock-suggest button:hover{background:var(--bg-2);border-color:transparent}
.home-view .dock-input{background:var(--card);box-shadow:var(--shadow-float)}
.home-view .dock-input:focus-within{box-shadow:var(--shadow-float),0 0 0 4px var(--cue-soft)}
/* On Home the chips are in the layout only when the field is focused or holds text, so the
   dock is just the input the rest of the time and covers far less of the page. */
.home-view .operator-dock .dock-suggest{display:none}
.home-view .operator-dock:focus-within .dock-suggest,.home-view .operator-dock:has(#operator-input:not(:placeholder-shown)) .dock-suggest{display:flex;opacity:1;transform:none;pointer-events:auto}
/* One staggered load reveal on entering Home; nothing else animates except button state. */
@media(prefers-reduced-motion:no-preference){
 .enter .page-home>.home-reveal,.enter .page-home .hcol>.home-reveal{animation:home-rise .32s var(--ease) both}
 .enter .page-home>.home-reveal:nth-child(2){animation-delay:40ms}
 .enter .page-home .hcol>.home-reveal:nth-child(1){animation-delay:80ms}
 .enter .page-home .hcol>.home-reveal:nth-child(2){animation-delay:120ms}
 .enter .page-home .hcol>.home-reveal:nth-child(3){animation-delay:160ms}
 .enter .page-home .hcol>.home-reveal:nth-child(4){animation-delay:200ms}
}
@keyframes home-rise{from{opacity:0;transform:translateY(8px)}}
/* ── The reveal: the first look at the new business ── */
.reveal-head{margin-top:4px}
.reveal-head h1{margin:14px 0 0;font:600 clamp(30px,5vw,40px)/1.15 var(--sans);letter-spacing:-.03em;color:var(--home-ink);outline:none}
.reveal-lede{margin-top:14px;font-size:15px;line-height:1.55;color:var(--text-2)}
.reveal-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.reveal-grid{margin-top:var(--home-gap)}
.reveal-grid{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.reveal-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:calc(var(--home-gap) + 8px)}
.reveal-actions .button{height:44px;padding:0 20px;border-radius:10px;font-size:14px}
.reveal-actions .button{height:42px;padding:0 20px;border-radius:10px;font-size:14px}
.reveal-page button:focus-visible,.reveal-page a:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
@media(prefers-reduced-motion:no-preference){
 .enter .page-reveal>.reveal>.home-reveal{animation:home-rise .32s var(--ease) both}
 .enter .page-reveal>.reveal>.home-reveal:nth-child(2){animation-delay:60ms}
 .enter .page-reveal>.reveal>.home-reveal:nth-child(3){animation-delay:120ms}
 .enter .page-reveal>.reveal>.home-reveal:nth-child(4){animation-delay:180ms}
 .enter .page-reveal>.reveal>.home-reveal:nth-child(5){animation-delay:240ms}
 .enter .page-reveal .reveal-grid>.home-reveal{animation:home-rise .32s var(--ease) both}
 .enter .page-reveal .reveal-grid>.home-reveal:nth-child(1){animation-delay:120ms}
 .enter .page-reveal .reveal-grid>.home-reveal:nth-child(2){animation-delay:180ms}
}
@media(max-width:760px){
 .home-page{--home-gap:20px}
 /* 14 + 82 + 48 + 24, so the last line clears the dock and its fade at first view. */
 #workspace.home-page{padding:0 16px 168px}
 #workspace.settings-page{padding:0 16px 168px}
 #workspace.settings-page .page.page-settings{padding-left:0;padding-right:0}
 .page-home{padding:28px 0 0}
 .page-reveal{padding:28px 0 0}
 #workspace.reveal-page{padding:0 16px 168px}
 .reveal-actions{flex-direction:column;align-items:stretch}
 .reveal-actions .button{width:100%;height:46px}
 .settings-head{margin-bottom:14px}
 .settings-tabs{margin-bottom:16px}
 .settings-frame .set{padding:18px}
 .save-bar{bottom:96px}
 .heads-up .seg button{height:40px}
 .money-input{max-width:none}
 .money-input input{font-size:16px}
 .settings-frame .field input,.settings-frame .field select{font-size:16px}
 .settings-frame .unit-input input{flex:1;min-width:0;height:100%}
 .agent-ai-row select{min-height:40px}
 #look-describe-input{min-height:40px;font-size:16px}
 .fine-fields{grid-template-columns:1fr}
 .mode{align-items:flex-start;text-align:left}
 .mode-switch{width:100%}
 .mode-switch button{flex:1;height:44px;padding:0 8px}
 .home-head{flex-direction:column;align-items:stretch;gap:22px}
 .home-head .subline{font-size:15px}
 .home-up-row{grid-template-columns:auto minmax(0,1fr);gap:10px 12px}
 .home-up-when{grid-column:2}
 .home-stop{grid-column:2;justify-self:start;height:40px;padding:0 12px}
 .home-card-actions{flex-direction:column}
 .home-card-actions .button{width:100%;height:44px}
 .hask-actions .button{flex:1;min-height:40px}
 .page-home .home-connect{font-size:13px}
 .more-menu{left:12px;right:12px;min-width:0}
 .operator-dock{bottom:calc(14px + env(safe-area-inset-bottom))}
}
/* Below 1100px Home is one column; display:contents drops the two wrappers so the cards can be
   ordered Needs you, Launch checklist, Your homepage, Your videos, This week, Watching, What I did. */
@media(max-width:1099px){
 .hgrid{display:flex;flex-direction:column;gap:16px;align-items:stretch}
 .hgrid .hcard{min-width:0;max-width:100%}
 .hcol{display:contents}
 .home-needs{order:1}
 .home-launch{order:2}
 .home-site{order:3}
 .home-videos{order:4}
 .home-week{order:5}
 .watch-card{order:6}
 .home-did{order:7}
}
@media(max-width:899px){
 .vids{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Below 640px the poster tiles become one horizontal strip, so the page stays short. The strip
   scrolls on its own; the page itself never scrolls sideways. */
@media(max-width:639px){
 .vids{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;-ms-overflow-style:none}
 .vids::-webkit-scrollbar{display:none}
 .vids .vid{flex:0 0 64%;max-width:240px;scroll-snap-align:start}
}
/* On the reveal, shorter posters keep 'Approve my homepage' closer to the fold. */
@media(min-width:640px){
 .page-reveal .vids .poster{aspect-ratio:auto;height:240px}
}
@media(max-width:760px){
 .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0}
 .kpi{padding:0 14px}
 .kpi:nth-child(odd){padding-left:0}
 .kpi:nth-child(3){border-left:0;padding-left:0}
}
@media(max-width:560px){
 .hask{flex-direction:column;gap:12px}
 .hask-ic{width:36px;height:36px}
}
/* The bottom rail duplicates the top tabs on phones, so it only shows on wider screens. */
@media(max-width:760px){
 .operator-page .app-rail{display:none}
 .operator-page .application{padding-bottom:0}
}
@media(max-width:480px){.home-head .headline{font-size:24px}}

/* Home watch rules use the same surfaces and spacing as the rest of Home. */
.watch-alerts{display:grid;gap:10px;margin:0 0 20px}
.watch-alerts-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-2);font-size:12.5px;font-weight:500}
.watch-alert{--tone:var(--cue);display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 20px;border:1px solid var(--card-line);border-left:3px solid var(--tone);border-radius:var(--r-card);background:var(--card)}
.watch-alert.tone-good{--tone:var(--good)}
.watch-alert.tone-warn{--tone:var(--warn)}
.watch-alert p{margin:6px 0;overflow-wrap:anywhere}
.watch-alert small,.watch-rules small{display:block;color:var(--text-3);font-size:12px;line-height:1.6}
.watch-actions{display:flex;align-items:center;gap:6px;flex:none}
.watch-rules{list-style:none;padding:0;margin:0}
.watch-rules li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--card-line)}
.watch-rules li:last-child{border-bottom:0}
.watch-rules .switch-row{flex:1;min-width:0;align-items:flex-start}
.watch-rules .switch{margin-top:2px}
.watch-rule-text{min-width:0}
.watch-rules strong{display:block;font-size:13px;font-weight:500;line-height:1.6;overflow-wrap:anywhere}
.watch-rules li.off strong{color:var(--text-2)}
.watch-custom{border:0;padding:0;margin:4px 0 0;min-width:0}
.watch-hint:empty{display:none}
.watch-input{position:relative;display:flex;align-items:center}
.watch-input input{flex:1;min-width:0}
.watch-unit{position:absolute;left:12px;color:var(--text-3);font-size:13px;pointer-events:none}
.watch-unit:not(:empty):not(.after)+input{padding-left:28px}
.watch-unit.after{left:auto;right:34px}
.watch-unit.after:not(:empty)+input{padding-right:52px}
.watch-card.s12{grid-column:1/-1}
@media(max-width:600px){.watch-alert{padding:14px;gap:8px}.watch-card .hcard-head{flex-wrap:wrap;gap:12px}}
.launch-schedule{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0 24px}
.launch-schedule>div{flex:1;min-width:200px}
.weekly-report{line-height:1.7}
.weekly-report h3{margin-top:24px;font-size:14px}
.weekly-report li{margin:6px 0}
.weekly-report .tkpis strong{font-size:32px;letter-spacing:-.04em}
@media print{body:has(.weekly-report) {background:white!important;color:black!important}body:has(.weekly-report)>:not(#modal){display:none!important}body:has(.weekly-report) #modal{position:static!important;max-width:none!important;max-height:none!important;width:100%!important;margin:0!important;border:0!important;box-shadow:none!important;background:white!important;color:black!important;overflow:visible!important}body:has(.weekly-report) #modal::backdrop{display:none}body:has(.weekly-report) .modal-footer,body:has(.weekly-report) .modal-close,body:has(.weekly-report) #form-error{display:none!important}.weekly-report{break-inside:avoid}}
/* Customers › Email */
.email-note{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 16px;border-radius:var(--r-card);background:var(--bg-2);color:var(--text-2);font-size:13px;line-height:1.55}
.email-note .icon{flex:none;margin-top:2px}
.hcard.email-cap{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:0;padding:0;margin-bottom:20px}
.email-cap-cell{display:flex;flex-direction:column;gap:6px;min-width:0;padding:18px 20px}
.email-cap-cell+.email-cap-cell{border-left:1px solid var(--card-line)}
.email-cap-cell>span:first-child{color:var(--text-2);font-size:12px;font-weight:500}
.email-cap-cell b{font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.email-cap-cell b small{font-size:13px;font-weight:500;color:var(--text-2)}
.email-cap-cell small{color:var(--text-3);font-size:12px;line-height:1.5}
.email-cap-cell .lbar{margin:2px 0 0}
.email-sender p{margin:0;font-size:13px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-line}
.email-sender .button{align-self:flex-start;margin-top:4px}
.email-list{display:grid;gap:12px}
.email-item{padding:18px 20px;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow-card);min-width:0}
.email-item-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.email-item-head>div{min-width:0}
.email-item h3{margin:0;font-size:15px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.email-item-head small{color:var(--text-3);font-size:12px}
.email-item-head .pill{flex:none}
.email-body{margin:12px 0 0}
.email-body>summary{cursor:pointer;color:var(--text-2);font-size:12.5px;font-weight:500;width:max-content}
.email-body>summary:focus-visible{outline:2px solid var(--cue);outline-offset:2px;border-radius:4px}
.email-letter{margin-top:10px;padding:16px 18px;border-radius:10px;background:var(--bg-2);font-size:13.5px;line-height:1.65}
.email-letter-subject{margin:0 0 10px;font-weight:600}
.email-letter-text{white-space:pre-wrap;overflow-wrap:anywhere}
.email-letter-foot{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--text-3);font-size:12px;white-space:pre-line}
.email-letter-foot span{text-decoration:underline}
.email-line{margin:12px 0 0;color:var(--text-2);font-size:13px;line-height:1.55}
.email-progress{display:block;margin-top:8px}
.email-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.email-why{color:var(--text-3);font-size:12px}
.email-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;counter-reset:step;margin:4px 0 0;padding:16px 0 0;border-top:1px solid var(--card-line)}
.email-steps li{counter-increment:step;display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--text-2);line-height:1.5}
.email-steps b{color:var(--text);font-size:13px}
.email-steps b::before{content:counter(step) ". ";color:var(--text-3)}
.email-facts{display:grid;gap:10px;margin:0 0 16px}
.email-facts div{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.email-facts dt{color:var(--text-2);font-size:13px}
.email-facts dd{margin:0;font-size:13px;font-weight:500;text-align:right}
.check-row{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;cursor:pointer}
.check-row input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--cue)}
@media(max-width:760px){.hcard.email-cap{grid-template-columns:1fr}.email-cap-cell+.email-cap-cell{border-left:0;border-top:1px solid var(--card-line)}.email-steps{grid-template-columns:1fr}}
@media(max-width:600px){.email-item{padding:16px}}
/* Settings › Team */
.team-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;color:var(--text-2);font-size:13px;font-weight:500}
.team-list{list-style:none;margin:0;padding:0;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card)}
.team-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 16px}
.team-row+.team-row{border-top:1px solid var(--card-line)}
.team-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bg-3);color:var(--text-2);font-size:13px;font-weight:600}
.team-avatar.owner{background:var(--cue);color:#fff}
.team-who{min-width:0}
.team-who strong{display:block;font-size:13.5px;font-weight:500;overflow-wrap:anywhere}
.team-who small{display:block;color:var(--text-3);font-size:12px;line-height:1.5}
.team-expired{color:var(--warn)}
.team-role{height:32px;padding:0 28px 0 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--card);color:var(--text);font:inherit;font-size:13px}
.team-role:disabled{opacity:.6}
.team-actions{display:flex;gap:4px;justify-content:flex-end;min-width:32px}
.team-legend{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.team-legend li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;font-size:13px;line-height:1.55}
.team-legend span{color:var(--text-2)}
.team-pick{border:0;padding:0;margin:16px 0 0;display:grid;gap:8px}
.team-pick legend{font-size:13px;font-weight:500;margin-bottom:8px}
.team-pick .choice b{display:block;font-size:13.5px}
.team-pick .choice small{display:block;color:var(--text-2);font-size:12.5px;line-height:1.5}
.copy-field{display:flex;gap:8px}
.copy-field input{flex:1;min-width:0;font-family:var(--mono,ui-monospace,monospace);font-size:12px}
.role-note{color:var(--text-3);font-size:12px;line-height:1.5}
@media(max-width:600px){.team-row{grid-template-columns:auto minmax(0,1fr) auto;row-gap:8px}.team-row .team-role,.team-row>.pill{grid-column:2}.team-actions{grid-column:3;grid-row:1}.team-legend li{grid-template-columns:1fr;gap:2px}}

/* ── Review changes (modal sheet) ── */
.rc{display:flex;flex-direction:column;gap:18px;max-height:min(60vh,640px);overflow:auto;padding-right:4px}
.rc-sec h3{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:0 0 8px}
.rc-row{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.rc-label{font-size:13px;color:var(--text-2)}
.rc-tag{display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;font-size:11px;background:var(--bg-1);color:var(--text-3)}
.rc-text{margin:0;font-size:14px;line-height:1.55;color:var(--text);white-space:pre-wrap;word-break:break-word}
.rc-text ins{background:var(--good-soft);color:var(--good);text-decoration:none;border-radius:3px;padding:0 1px}
.rc-text del{background:var(--danger-soft);color:var(--danger);text-decoration:line-through;border-radius:3px;padding:0 1px}
.rc-text .rc-block{display:block;width:fit-content;max-width:100%}
.rc-text .rc-block+.rc-block{margin-top:4px}
.rc-open{margin-right:auto;display:inline-flex;align-items:center;gap:4px}
.rc-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px}
.modal-footer .rc-open+.button,.modal-footer .rc-open~.button{flex:0 0 auto}
@media (max-width:640px){.rc-row{grid-template-columns:1fr;gap:4px}}
@media (max-width:640px),(max-height:720px){.rc{max-height:none;overflow:visible;padding-right:0}}

.changes-card .cp-row .icon{width:16px;height:16px;color:var(--text-3);flex:none}
.cp-undone strong{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--line)}
.toast-undo{margin-left:12px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
#toast:has(.toast-undo){display:flex;align-items:center}

/* ── Command bar (Ctrl/⌘ K) ── */
#cmdk.cmdk{width:min(640px,calc(100vw - 24px));padding:0;margin-top:12vh;overflow:hidden}
.cmdk-input{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cmdk-input input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--text)}
#cmdk-list{list-style:none;margin:0;padding:6px;max-height:min(56vh,440px);overflow:auto}
.cmdk-group{padding:10px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:14px;color:var(--text);cursor:pointer}
.cmdk-item .icon{width:16px;height:16px;color:var(--text-3)}
.cmdk-item.on{background:var(--bg-1)}
.cmdk-item.on .icon{color:var(--text)}
.cmdk-empty{padding:18px 10px;color:var(--text-3);font-size:14px}
.cmdk-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3)}
.cmdk kbd,.cmdk-open kbd,.shortcut-list kbd{font:500 11px/1 var(--mono,ui-monospace,monospace);padding:1px 5px;border:1px solid var(--line);border-radius:5px;color:var(--text-2);background:transparent}
.cmdk-open{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;margin:0 0 10px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--text-3);font:inherit;font-size:13px;cursor:pointer}
.cmdk-open:hover{color:var(--text);border-color:var(--text-3)}
.cmdk-open kbd{margin-left:auto}
@media(min-width:761px) and (max-width:1099px){
 .cmdk-open{justify-content:center;width:36px;height:36px;margin:0 auto 10px;padding:0;gap:0;border:0}
 .cmdk-open span,.cmdk-open kbd{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}
}
@media(max-width:760px){.operator-page .cmdk-open{display:none}}
@media(max-width:640px){#cmdk.cmdk{margin-top:8px}}

/* ── Approval preview ("What changes if you approve") ── */
.hask:focus-visible{outline:2px solid var(--cue);outline-offset:2px;border-radius:12px}
.pv{display:flex;flex-direction:column;gap:14px}
.pv-rows{display:flex;flex-direction:column}
.pv-row{display:grid;grid-template-columns:150px 1fr auto 1fr;align-items:baseline;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.pv-label{font-size:13px;color:var(--text-2)}
.pv-before{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--line);font-variant-numeric:tabular-nums}
.pv-arrow{color:var(--text-3)}
.pv-after{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.pv-items{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text)}
.pv-items b{font-weight:600}
@media (max-width:640px){.pv-row{grid-template-columns:1fr auto 1fr}.pv-label{grid-column:1/-1}}

/* ── Phone search button (the sidebar search is hidden on phones) ── */
.cmdk-phone{display:none}
@media(max-width:760px){.operator-page .cmdk-phone{display:inline-flex}}

/* ── Photos (Website side card + the Photos window) ── */
.ph-row-sm{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.ph-row-sm:first-child{border-top:0;padding-top:2px}
.ph-thumb-sm{width:44px;height:44px;flex:none;border-radius:10px;object-fit:cover;border:1px solid var(--line-2);background:var(--bg-2)}
.ph-thumb-sm.ph-empty-sm{display:grid;place-items:center;border-style:dashed;background:transparent;color:var(--text-4)}
.ph-thumb-sm.ph-empty-sm .icon{width:20px;height:20px}
.ph-row-text{min-width:0;display:flex;flex-direction:column}
.ph-row-text strong{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-row-text small{font-size:12px;color:var(--text-3)}
.ph-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.ph-row:first-child{border-top:0;padding-top:2px}
.ph-preview{display:block;max-width:100%;max-height:360px;border-radius:12px;object-fit:contain;border:1px solid var(--line-2);background:var(--bg-2)}
.ph-thumb{width:96px;height:96px;border-radius:12px;object-fit:cover;border:1px solid var(--line-2);background:var(--bg-2)}
.ph-thumb.ph-empty{display:grid;place-items:center;border-style:dashed;background:transparent;color:var(--text-4)}
.ph-thumb.ph-empty .icon{width:20px;height:20px}
.ph-fields{min-width:0;display:flex;flex-direction:column;gap:8px}
.ph-fields>strong{font-size:14px;font-weight:600;color:var(--text)}
.ph-alt{width:100%;height:34px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--input);color:var(--text);font:13px var(--sans)}
.ph-alt::placeholder{color:var(--text-4)}
.ph-alt:focus{outline:none;border-color:var(--cue-line);box-shadow:0 0 0 3px var(--cue-soft)}
.ph-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ph-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ph-status{margin:0;min-height:16px;font-size:12px;color:var(--text-3)}
.ph-enhance{display:flex;align-items:center;gap:8px;margin:14px 0 4px;font-size:12.5px;line-height:1.5;color:var(--text-2);cursor:pointer}
.ph-enhance input{flex:none;accent-color:var(--cue)}
@media(max-width:560px){
 .ph-row{grid-template-columns:1fr}
 .ph-thumb{width:100%;height:180px}
}
/* Free photos and the AI choices: the sub-view swaps #ph-body, the modal stays put. */
.ph-sub{display:flex;flex-direction:column;gap:12px}
.ph-sub>.back-link{align-self:flex-start}
.ph-sub>.button{align-self:flex-start}
.ph-search{display:flex;flex-wrap:wrap;gap:6px}
.ph-search input{flex:1;min-width:180px;height:34px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--input);color:var(--text);font:13px var(--sans)}
.ph-search input::placeholder{color:var(--text-4)}
.ph-credit{margin:0;font-size:12px;color:var(--text-3)}
.ph-credit a{color:inherit;text-decoration:none}
.ph-credit a:hover{text-decoration:underline}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.ph-cell{display:flex;flex-direction:column;gap:4px;min-width:0}
.ph-pick{position:relative;display:block;padding:0;border:2px solid transparent;border-radius:var(--r-card);background:var(--bg-2);cursor:pointer;overflow:hidden}
.ph-pick img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.ph-pick.on{border-color:var(--cue);box-shadow:0 0 0 2px var(--cue-soft)}
.ph-pick:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
.ph-badge{position:absolute;top:6px;left:6px;padding:2px 8px;border-radius:999px;background:var(--cue-fill);color:var(--cue-ink);font:600 10.5px/1.6 var(--sans);letter-spacing:.02em}
.ph-by{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-by a{color:var(--text-3);text-decoration:none}
.ph-by a:hover{text-decoration:underline}
.ph-panel{display:flex;flex-direction:column;gap:8px}
.ph-panel>strong{font-size:13.5px;font-weight:600}
.ph-panel p{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.ph-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ph-compare figure{margin:0;display:flex;flex-direction:column;gap:6px}
.ph-compare figcaption{font-size:12px;color:var(--text-3)}
.ph-busy{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--text-2)}
@media(max-width:560px){
 .ph-compare{grid-template-columns:1fr}
}

/* ── "Change with AI": the inline email ask and Undo links ── */
.cx-inline{display:flex;align-items:center;gap:8px;margin:10px 0 0}
.cx-inline input{flex:1;min-width:0;height:34px;padding:0 11px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--input);color:var(--text);font:13px var(--sans)}
.cx-inline input::placeholder{color:var(--text-4)}
.cx-inline input:focus{outline:none;border-color:var(--cue-line);box-shadow:0 0 0 3px var(--cue-soft)}
.cx-out{margin-top:8px;font-size:12.5px;color:var(--text-2)}
.cx-undo{margin-left:6px}
.cx-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
@media(max-width:480px){.cx-inline{flex-wrap:wrap}.cx-inline input{flex-basis:100%}}

/* ── Tiny help: Ideas chips for an email subject, and the Page check Fix buttons ── */
.ix-out{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2)}
.ix-chip{max-width:100%;padding:5px 10px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--text);font-size:12.5px;line-height:1.3;text-align:left;cursor:pointer}
.ix-chip:hover{border-color:var(--cue-line);background:var(--cue-soft);color:var(--cue)}
.ix-chip:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
.ix-note{font-size:11.5px;color:var(--text-3)}
.ix-fix{margin-left:6px}

/* ── Check with AI: the paid verdict under each finished AI clip ── */
.vc-block{margin-top:8px;font-size:12px;line-height:1.6;color:var(--text-2)}
.vc-verdict{margin:0;font-size:13px;font-weight:500;color:var(--text)}
.vc-ok{color:var(--good)}
.vc-warn{color:var(--warn-text)}
.vc-summary{margin:2px 0 0;color:var(--text-2)}
.vc-issues{padding-left:18px;margin:6px 0}
.vc-error{margin:0 0 4px;color:var(--warn-text)}

/* ── Home ask box: one instruction, a few one-tap starters ── */
.hq{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:20px 24px;margin:0 0 20px}
.hq-label{display:block;margin:0 0 10px;font-size:1.25rem;font-weight:650;letter-spacing:-.02em;color:var(--home-ink)}
.hq-row{display:flex;align-items:center;gap:10px}
.hq-row input{flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--input);color:var(--text);font:14px var(--sans)}
.hq-row input::placeholder{color:var(--text-4)}
.hq-row input:focus{outline:none;border-color:var(--cue-line);box-shadow:0 0 0 3px var(--cue-soft)}
.hq-row .button{flex:none;height:44px;padding:0 18px;border-radius:var(--r-ctl)}
.hq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hq-chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface-2);color:var(--text-2);font-size:.875rem;cursor:pointer;transition:border-color .15s,color .15s}
.hq-chip:hover{border-color:var(--cue-line);color:var(--text)}
.hq-chip:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
@media(max-width:560px){.hq{padding:16px}.hq-chip{padding:0 10px;font-size:13px}.hq-row{flex-direction:column;align-items:stretch}.hq-row input{flex:none;width:100%;height:44px;font-size:16px}.hq-row .button{width:100%}}

/* ── Home's next step: one action toward launch or learning, above the ask box ── */
.home-next{display:flex;align-items:center;gap:16px;min-width:0;padding:16px 20px;margin:0 0 20px;border:1px solid var(--card-line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow-card)}
.home-next-body{flex:1;min-width:0}
.home-next .eyebrow{display:block;margin:0 0 4px;font:500 12px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.home-next h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--home-ink);overflow-wrap:anywhere}
.home-next p{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:var(--text-2);overflow-wrap:anywhere;min-width:0}
.home-next .button{flex:none;height:44px;padding:0 18px}
@media(max-width:760px){.home-next{flex-direction:column;align-items:stretch;gap:8px}.home-next .eyebrow{align-self:flex-start}.home-next .button{width:100%}}

/* ── Netlify: the automatic way to put the homepage online (local app) ── */
.nl-auto{padding:16px;margin-bottom:16px;border-radius:14px;background:var(--cue-soft)}
.nl-auto h3{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--text)}
.nl-auto p{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--text-2)}
.nl-auto p:last-child,.nl-auto>*:last-child{margin-bottom:0}
.nl-manual summary{cursor:pointer;font-weight:600}

/* ── Store product changes: the Change dialog's variant and price pair ── */
.sp-variant-row{display:flex;gap:8px;align-items:flex-start}
.sp-variant-row .field{flex:1;min-width:0}
.sp-variant-row .unit-input{width:100%}
@media(max-width:480px){.sp-variant-row{flex-wrap:wrap}.sp-variant-row .field{flex-basis:100%}}

/* ── Checkout: each offer and whether its button goes to a checkout ── */
.co-rows{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;padding:9px 0;border-top:1px solid var(--line)}
.co-rows:first-child{border-top:0;padding-top:2px}
.co-name{display:flex;flex-direction:column;min-width:0}
.co-name strong{font-size:13.5px;font-weight:600;color:var(--text)}
.co-name small{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.co-ok{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--good)}
.co-ok .icon{width:13px;height:13px;stroke-width:2.2}
.co-none{font-size:12.5px;color:var(--text-3)}
.co-error{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--danger)}

/* ── One customer's timeline: signed up, bought, emailed, unsubscribed ── */
.tl{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.tl-item{position:relative;display:flex;gap:9px;padding:0 0 16px 18px}
.tl-item:last-child{padding-bottom:2px}
.tl-item::before{content:'';position:absolute;left:-4px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--line-3)}
.tl-item .icon{width:15px;height:15px;flex:none;margin-top:1px;color:var(--text-3)}
.tl-item strong{display:block;font-size:13.5px;font-weight:500;line-height:1.45;color:var(--text)}
.tl-item time{display:block;margin-top:2px;font-size:11.5px;color:var(--text-3)}
/* ── Automatic emails: two scheduled series on Customers › Email ── */
.es-card .email-note{margin:0 0 14px}
.es-series{padding:16px 0}
.es-series+.es-series{border-top:1px solid var(--line)}
.es-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.es-head h3{margin:0;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.es-head .pill{flex:none}
.es-none{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--text-2)}
.es-steps{margin:12px 0 0;display:grid;gap:4px}
.es-step{border-top:1px solid var(--line)}
.es-step:first-child{border-top:0}
.es-step>summary{display:flex;align-items:baseline;gap:6px;padding:7px 0;list-style:none;cursor:pointer;font-size:13px;line-height:1.45;color:var(--text-2);overflow-wrap:anywhere}
.es-step>summary::-webkit-details-marker{display:none}
.es-step>summary b{flex:none;font-size:12px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.es-step>summary:hover{color:var(--text)}
.es-body{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:var(--bg-2);color:var(--text-2);font:12px/1.6 var(--sans);white-space:pre-wrap;overflow-wrap:anywhere}
.es-warn{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--warn-text)}
.es-stats{margin:10px 0 0;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.es-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.es-tested{margin-left:auto;font-size:12px;color:var(--text-3)}
.es-step-fieldset{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;display:grid;gap:10px}
.es-step-fieldset legend{padding:0 6px;font-size:12px;font-weight:500;color:var(--text-3)}
.es-step-fieldset .field{margin:0}
.es-step-actions{display:flex;justify-content:flex-end}
.es-step-add{margin-top:14px}
.es-facts{display:grid;gap:10px;margin:0 0 16px}
.es-facts div{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.es-facts dt{color:var(--text-2);font-size:13px;white-space:nowrap}
.es-facts dd{margin:0;font-size:13px;line-height:1.5;text-align:right}
@media(max-width:600px){.es-tested{margin-left:0;flex-basis:100%}.es-facts div{flex-direction:column;gap:4px}.es-facts dd{text-align:left}}

/* ── Settings › Connect (hosted): one row per store connection ── */
.cn-form{display:grid;gap:10px;max-width:520px}
.cn-form .field{margin:0}
.cn-help{margin:0;font-size:12px;line-height:1.5;color:var(--text-3);overflow-wrap:anywhere}
.cn-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.cn-status>*{max-width:100%}
.cn-status .muted{min-width:0;overflow-wrap:anywhere}
.cn-attention{font-size:12px;font-weight:500;color:var(--warn-text)}
.cn-error{overflow-wrap:anywhere}
.cn-lede{margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--text-2)}
.cn-setup,.cn-instructions{border:1px solid var(--line-2);border-radius:12px;background:var(--bg-2)}
.cn-setup{margin-top:12px}
.cn-instructions{margin-top:4px}
.cn-setup>summary,.cn-instructions>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;list-style:none;cursor:pointer;font-size:13px;font-weight:500;color:var(--text)}
.cn-setup>summary::-webkit-details-marker,.cn-instructions>summary::-webkit-details-marker{display:none}
.cn-setup>summary::before,.cn-instructions>summary::before{content:'';flex:none;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.cn-setup[open]>summary::before,.cn-instructions[open]>summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.cn-setup>summary:hover,.cn-instructions>summary:hover{color:var(--cue)}
.cn-setup>summary:focus-visible,.cn-instructions>summary:focus-visible{outline:2px solid var(--cue);outline-offset:2px}
.cn-setup>.cn-form{padding:0 14px 14px}
.cn-instructions>.cn-help{padding:0 14px 12px}
.cn-replace-form{margin-top:12px}
body.brand-accent-violet{--cue:#6d28d9;--cue-fill:#6d28d9;--cue-fill-hover:#5b21b6;--cue-soft:#f3effe;--cue-line:rgba(109,40,217,.32)}
:root[data-theme="dark"] body.brand-accent-violet{--cue:#b69dff;--cue-fill:#7c3aed;--cue-fill-hover:#6d28d9;--cue-soft:rgba(182,157,255,.12);--cue-line:rgba(182,157,255,.40)}
body.brand-accent-green{--cue:#15803d;--cue-fill:#15803d;--cue-fill-hover:#166534;--cue-soft:#ecfdf3;--cue-line:rgba(21,128,61,.32)}
:root[data-theme="dark"] body.brand-accent-green{--cue:#4ade80;--cue-fill:#15803d;--cue-fill-hover:#166534;--cue-soft:rgba(74,222,128,.12);--cue-line:rgba(74,222,128,.38)}
body.brand-accent-teal{--cue:#0f766e;--cue-fill:#0f766e;--cue-fill-hover:#115e59;--cue-soft:#e9faf7;--cue-line:rgba(15,118,110,.32)}
:root[data-theme="dark"] body.brand-accent-teal{--cue:#2dd4bf;--cue-fill:#0f766e;--cue-fill-hover:#115e59;--cue-soft:rgba(45,212,191,.12);--cue-line:rgba(45,212,191,.38)}
body.brand-accent-orange{--cue:#c2410c;--cue-fill:#c2410c;--cue-fill-hover:#9a3412;--cue-soft:#fff3ec;--cue-line:rgba(194,65,12,.32)}
:root[data-theme="dark"] body.brand-accent-orange{--cue:#fb923c;--cue-fill:#c2410c;--cue-fill-hover:#9a3412;--cue-soft:rgba(251,146,60,.12);--cue-line:rgba(251,146,60,.38)}
body.brand-accent-pink{--cue:#be185d;--cue-fill:#be185d;--cue-fill-hover:#9d174d;--cue-soft:#fdf0f6;--cue-line:rgba(190,24,93,.30)}
:root[data-theme="dark"] body.brand-accent-pink{--cue:#f472b6;--cue-fill:#be185d;--cue-fill-hover:#9d174d;--cue-soft:rgba(244,114,182,.12);--cue-line:rgba(244,114,182,.38)}
body.brand-accent-slate{--cue:#334155;--cue-fill:#334155;--cue-fill-hover:#1e293b;--cue-soft:#f1f5f9;--cue-line:rgba(51,65,85,.30)}
:root[data-theme="dark"] body.brand-accent-slate{--cue:#cbd5e1;--cue-fill:#475569;--cue-fill-hover:#334155;--cue-soft:rgba(203,213,225,.10);--cue-line:rgba(203,213,225,.32)}
.brand-powered{display:block;font-size:11px;font-weight:500;color:var(--text-3);letter-spacing:0;line-height:1.2}
@media(min-width:761px) and (max-width:1099px){
 .app-rail.sidebar .brand-powered{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}
}

/* ── Clients: the reseller's list of every business they run ── */
.cl-rows{list-style:none;margin:0;padding:0}
.cl-row{display:grid;grid-template-columns:minmax(0,2fr) 168px 128px minmax(0,1.4fr) 190px;gap:12px 16px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.cl-row:first-child{border-top:0}
.cl-who strong{display:block}
.cl-meta{font-size:12.5px;color:var(--text-3)}
.cl-status{display:flex;gap:6px;flex-wrap:wrap}
.cl-num b{display:block;font-variant-numeric:tabular-nums}
.cl-num small{font-size:12px;color:var(--text-3)}
.cl-contact{font-size:13px;overflow-wrap:anywhere;min-width:0}
.cl-actions{display:flex;gap:6px;justify-content:flex-end}
.cl-count{margin:0 0 12px;font-size:13px;color:var(--text-3)}
@media(max-width:760px){
 .cl-row{grid-template-columns:1fr auto}
 .cl-who,.cl-contact,.cl-actions{grid-column:1/-1}
 .cl-actions{justify-content:flex-start}
}

/* ── Your brand: the reseller's name and colour for their clients ── */
.brand-form{display:grid;gap:12px;max-width:420px}
.brand-swatches{display:flex;flex-wrap:wrap;gap:10px;border:0;padding:0;margin:0}
.brand-swatches legend{float:left;width:100%;margin:0 0 4px;flex-basis:100%;padding:0;font-size:12px;font-weight:500;color:var(--text-2)}
.brand-swatch{position:relative;display:inline-flex;cursor:pointer}
.brand-swatch input{position:absolute;opacity:0;inset:0;margin:0}
.brand-swatch span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bg-2)}
.brand-sw- span{width:auto;height:24px;padding:0 10px;border-radius:999px;background:none;border:1px solid var(--line);font-size:12px;color:var(--text-2)}
.brand-sw-blue span{background:#2f5bff}
.brand-sw-violet span{background:#6d28d9}
.brand-sw-green span{background:#15803d}
.brand-sw-teal span{background:#0f766e}
.brand-sw-orange span{background:#c2410c}
.brand-sw-pink span{background:#be185d}
.brand-sw-slate span{background:#334155}
.brand-swatch input:checked + span{box-shadow:0 0 0 2px var(--bg, #fff),0 0 0 4px var(--cue)}
.brand-swatch input:focus-visible + span{outline:2px solid var(--cue);outline-offset:3px}
.brand-initial{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--cue-fill);color:var(--cue-ink,#fff);font-weight:700;font-size:16px;flex:none}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-text .brand-word{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:761px) and (max-width:1099px){
 .app-rail.sidebar .brand-text{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}
}

/* On phones the approval row's text stays beside its icon and the buttons line up under it. */
@media(max-width:640px){.approval.biz-row .approval-main{flex-basis:0}}

/* Final polish: the brand row sits right under the settings form with no gap, and the Save brand
   button keeps its own width. */
.settings-frame .settings-form+.set{margin-top:12px}
.brand-form button[type=submit]{justify-self:start}
/* Final screen check: the dock fade stops at the rail instead of spilling over the sidebar,
   and the admin note under the plan cards gets its own gap. */
.home-view .operator-dock::before{width:calc(100vw - var(--rail, 0px))}
.plan-cards+.micro-note{margin-top:14px}
@media(max-width:640px){.hready-row .hlink,.hcard-head .hlink{min-height:32px;padding:0 6px;margin:0 -6px}.dock-suggest button,.reply-suggest button{height:32px}}
.build-list li{transition:opacity .3s}
.build-list li.past{opacity:.55}
.build-list li.on span:last-child{font-weight:600}
.build-time{margin:8px 0 0;font:500 12.5px var(--sans);color:var(--text-3);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){.build-list li{transition:none}}
.weekly-preview-link{margin-top:8px;font-size:13px}
.weekly-subject{margin:0 0 10px;font-size:14px;color:var(--text)}