/* MANGo preview, round 3. Built on the UMG Design System (ds/tokens.css, ds/bundle.css): man-* tokens,
   status-* tokens, man-btn, man-pill, man-field, man-stamp. Seven type sizes: 12 13 14 15 16 20 28 (phone: 19 and 24). */

/* Proposed token change, flagged to the design system: man-line-strong #C4CDE0 measures 1.5:1 as an input edge.
   WCAG 1.4.11 needs 3:1, so the preview overrides it. */
:root,[data-theme="light"]{--man-line-strong:#7D8AA8}
[data-theme="dark"]{--man-line-strong:#66748F}
:root{
  --ground:var(--man-surface); --raised:var(--man-surface-raised); --sunken:var(--man-surface-sunken);
  --ink:var(--man-ink); --ink2:var(--man-ink-secondary); --mut:var(--man-ink-muted); --line:var(--man-line); --line2:var(--man-line-strong);
  --act:var(--man-action); --act-ink:var(--on-man-action); --bar:var(--man-chart); --f:var(--font-man);
  --t12:12px; --t13:13px; --t14:14px; --t15:15px; --t16:16px; --t20:19px; --t28:24px;
}
@media (min-width:768px){:root{--t20:20px;--t28:28px}}

body.man-scope{margin:0;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;text-wrap:balance;color:var(--ink)}
h1{font-size:var(--t28);line-height:1.22}
h2{font-size:var(--t20);line-height:1.4}
h3{font-size:var(--t16);line-height:22px}
h4{font-size:var(--t14);line-height:20px}
p{margin:0;text-wrap:pretty}
a{color:inherit}
button,input,select,textarea{font-family:inherit}
.num,table,.big{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--focus,var(--man-focus));outline-offset:2px}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic.s{width:16px;height:16px}
.man-pill .ic{width:13px;height:13px;stroke-width:2.2}
.muted{color:var(--mut)} .ink2{color:var(--ink2)}
.small{font-size:var(--t13);line-height:18px}
.lead{font-size:var(--t16);line-height:24px;color:var(--ink2)}
.stack>*+*{margin-top:12px}
.stack-m>*+*{margin-top:20px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.between{justify-content:space-between}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- strip, top bar ---------- */
.strip{height:32px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--sunken);color:var(--ink2);font-size:var(--t13);border-bottom:1px solid var(--line)}
.top{position:sticky;top:0;z-index:30;height:56px;background:var(--raised);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 12px 0 16px;gap:12px}
.mark{display:flex;align-items:center;gap:10px;min-height:44px;background:none;border:0;color:var(--ink);cursor:pointer;padding:0;font:inherit}
.mark .wm{font-weight:700;font-size:var(--t20);letter-spacing:-.01em}
.mark .by{font-size:var(--t12);color:var(--mut);font-weight:500;display:none}
@media (min-width:560px){.mark .by{display:inline}}
.top .sp{flex:1}
.biz{display:none;align-items:center;gap:8px;font-size:var(--t14);color:var(--ink2);padding:0 8px}
.biz .av{width:28px;height:28px;border-radius:50%;background:var(--sunken);display:grid;place-items:center;font-weight:600;font-size:var(--t12);color:var(--ink)}
@media (min-width:768px){.biz{display:flex}}
.iconbtn{min-width:44px;min-height:44px;display:inline-grid;place-items:center;border-radius:var(--radius-md);border:0;background:none;color:var(--ink);cursor:pointer}
.iconbtn:hover{background:var(--sunken)}
.pub{display:none;align-items:center}
.pub button{font:500 var(--t14)/1 var(--f);color:var(--ink2);padding:0 10px;min-height:44px;background:none;border:0;cursor:pointer}
@media (min-width:900px){.pub{display:flex}}

/* ---------- shell ---------- */
.nav{display:none}
@media (min-width:1024px){
  .shell.app{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:calc(100vh - 88px)}
  .shell.app.slim{grid-template-columns:minmax(0,1fr)}
  .slim .nav{display:none!important}
  .nav{display:flex;flex-direction:column;gap:2px;padding:16px 12px;border-right:1px solid var(--line);background:var(--raised);position:sticky;top:56px;height:calc(100vh - 56px)}
  .nav .grow{flex:1}
  .nav button{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--radius-md);border:0;background:none;color:var(--ink2);font:500 var(--t15)/1 var(--f);cursor:pointer;text-align:left;width:100%}
  .nav button:hover{background:var(--sunken);color:var(--ink)}
  .nav button[aria-current="page"]{background:var(--sunken);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--act)}
}
.page{padding:20px 16px 112px;min-width:0}
@media (min-width:768px){.page{padding:28px 28px 112px}}
@media (min-width:1024px){.page{padding:28px 32px 40px}}
.pg-w{max-width:1180px}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.ph .sub{margin-top:4px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:28;height:64px;background:var(--raised);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:0;color:var(--mut);font:500 var(--t12)/1.2 var(--f);cursor:pointer;min-height:44px}
.tabbar button[aria-current="page"]{color:var(--ink);font-weight:600}
@media (min-width:1024px){.tabbar{display:none}}
.exit{display:none}
@media (min-width:1024px){.slim .exit{display:inline-flex}}

/* ---------- surfaces ---------- */
.card{background:var(--raised);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--man-shadow-sm)}
.man-card{border-radius:var(--radius-md)}
.flat{box-shadow:none}
.sec-t{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.call{border-radius:var(--radius-md);padding:12px 14px;background:var(--sunken);font-size:var(--t14);line-height:20px;color:var(--ink)}
.call.info{background:var(--status-info-bg)}
.call.good{background:var(--status-live-bg)}
.call.warn{background:var(--status-warning-bg)}
.call b{font-weight:600}
.call .ic{vertical-align:-3px;margin-right:4px}
.lnk{background:none;border:0;padding:0;color:var(--ink);font-family:var(--f);font-weight:600;font-size:inherit;line-height:inherit;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;gap:6px}
.lnk:hover{text-decoration-color:var(--ink)}
.lnk.in{min-height:0;display:inline}
.man-btn .ic{width:16px;height:16px}
.man-btn[aria-disabled="true"]{opacity:.5}
.man-pill .ic{margin:0}

/* ---------- builder ---------- */
.builder{display:block}
@media (min-width:1024px){.builder{display:grid;grid-template-columns:168px minmax(0,1fr) 344px;gap:24px;align-items:start}}
@media (min-width:1280px){.builder{grid-template-columns:200px minmax(0,600px) 380px;gap:32px;justify-content:center}}
.rail{display:none}
@media (min-width:1024px){
  .rail{display:block;position:sticky;top:84px}
  .rail ol{list-style:none;margin:0;padding:0}
  .rail li+li{margin-top:2px}
  .rail button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:var(--radius-md);background:none;font:500 var(--t14)/1.2 var(--f);color:var(--mut);text-align:left;cursor:default}
  .rail button.done{color:var(--ink);cursor:pointer}
  .rail button.done:hover{background:var(--sunken)}
  .rail button.cur{background:var(--raised);color:var(--ink);font-weight:600;box-shadow:var(--man-shadow-sm);border:1px solid var(--line)}
  .rail .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line2);font-size:var(--t12);font-weight:600;flex:none}
  .rail .done .dot{background:var(--act);border-color:var(--act);color:var(--act-ink)}
  .rail .cur .dot{border-color:var(--act);color:var(--ink)}
  .rail .rl{font-size:var(--t12);color:var(--mut);margin:16px 10px 0;line-height:17px}
  .rail .exit{margin:0 0 12px}
}
.mstep{margin-bottom:16px}
.mstep .row{justify-content:space-between}
.segs{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:8px}
.segs i{height:4px;border-radius:2px;background:var(--line)}
.segs i.on{background:var(--act)}
@media (min-width:1024px){.mstep{display:none}}
.form{min-width:0}
.form .head{margin-bottom:20px}
.form .head .lead{margin-top:6px}
.fa{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:28px}
.fa .primary{display:none}
.phone-only{display:block}
@media (min-width:1024px){.phone-only{display:none}}

/* side panel: estimate and total first, the action pinned at the bottom */
.side{display:none}
@media (min-width:1024px){.side{display:flex;flex-direction:column;position:sticky;top:76px;max-height:calc(100vh - 92px)}}
.side .card{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.side .scroll{overflow:auto;min-height:0;scrollbar-width:thin}
.side section{padding:16px}
.side section+section{border-top:1px solid var(--line)}
.sfoot{border-top:1px solid var(--line);padding:12px 16px 16px;background:var(--raised)}
.sfoot .tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-size:var(--t15)}
.sfoot .tot b{font-size:var(--t20);font-weight:600}
.big{font-size:var(--t28);line-height:1.15;font-weight:600;letter-spacing:-.02em}
.big small{font-size:var(--t16);font-weight:500;color:var(--ink2);letter-spacing:0;margin-left:6px}
.est-sub{font-size:var(--t14);color:var(--ink2);margin-top:4px}
.est-note{font-size:var(--t13);color:var(--mut);margin-top:10px;line-height:18px}
.est-range{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:var(--radius-md);background:var(--sunken);font-size:var(--t13);line-height:18px;color:var(--ink2)}
.lines{width:100%;border-collapse:collapse;font-size:var(--t14)}
.lines td{padding:6px 0;vertical-align:top}
.lines td:last-child{text-align:right;font-weight:600;white-space:nowrap;padding-left:12px}
.lines tr.tot td{border-top:1px solid var(--line);padding-top:10px;font-size:var(--t16);font-weight:700}
.lines .sub{display:block;font-size:var(--t12);color:var(--mut);font-weight:400}

/* phone action bar */
.fbar{position:fixed;left:0;right:0;bottom:0;z-index:29;background:var(--raised);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(11,18,32,.08);padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
.fbar .in{display:flex;align-items:center;gap:10px;max-width:720px;margin:0 auto}
.fbar .fx{flex:1;min-width:0;text-align:left;background:none;border:0;color:var(--ink);font:inherit;cursor:pointer;min-height:44px;padding:0 4px;display:flex;flex-direction:column;justify-content:center}
.fbar .fx b{display:block;font-size:var(--t16);line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbar .fx b span{display:inline;font-size:inherit}
.fbar .fx > span{display:flex;align-items:center;gap:4px;font-size:var(--t12);line-height:16px;color:var(--ink2);white-space:nowrap}
.fbar .man-btn{flex:none}
@media (min-width:1024px){.fbar{display:none}}

/* sheet and modal */
.scrim{position:fixed;inset:0;background:var(--man-scrim);z-index:50}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;max-height:88vh;overflow:auto;background:var(--raised);border-radius:16px 16px 0 0;box-shadow:var(--man-shadow-lg)}
.sheet .grab{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 0 16px}
.sheet section{padding:16px}
.sheet section+section{border-top:1px solid var(--line)}
@media (min-width:768px){.sheet{left:50%;right:auto;width:min(1080px,calc(100vw - 48px));transform:translateX(-50%);bottom:24px;border-radius:16px}}

/* ---------- options ---------- */
.opts{display:grid;gap:10px}
@media (min-width:640px){.opts.c2{grid-template-columns:1fr 1fr}}
.opt{position:relative;display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:var(--raised);border:1px solid var(--line2);border-radius:var(--radius-md);padding:14px;cursor:pointer;font:inherit;color:inherit;transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}
.opt:hover{border-color:var(--ink2)}
.opt[aria-checked="true"],.opt[aria-pressed="true"]{border-color:var(--act);box-shadow:0 0 0 1px var(--act)}
.opt .oi{width:36px;height:36px;border-radius:var(--radius-md);background:var(--sunken);display:grid;place-items:center;flex:none;color:var(--ink)}
.opt[aria-checked="true"] .oi,.opt[aria-pressed="true"] .oi{background:var(--act);color:var(--act-ink)}
.opt .ob{flex:1;min-width:0}
.opt .ob p{font-size:var(--t14);color:var(--ink2);margin-top:2px}
.opt .tick{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line2);flex:none;margin-top:2px;display:grid;place-items:center}
.opt .tick .ic{width:13px;height:13px;stroke-width:2.4}
.opt[aria-checked="true"] .tick,.opt[aria-pressed="true"] .tick{background:var(--act);border-color:var(--act);color:var(--act-ink)}
.opt.sq .tick{border-radius:5px}
.opt .man-pill{margin-top:8px}
.buds{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bud{flex-direction:column;gap:2px;padding:14px 14px 12px}
.bud .amt{font-size:var(--t20);line-height:26px;font-weight:600}
.bud .bl{font-size:var(--t13);color:var(--mut);font-weight:500}
.bud .br{font-size:var(--t14);margin-top:6px}
.bud .tick{position:absolute;right:12px;top:12px}

/* ---------- fields (man-field from the system; these only add spacing) ---------- */
.man-field .opt-t{font-weight:400;color:var(--mut)}
.man-field .lab{display:block;font:600 var(--t14)/20px var(--f);margin-bottom:6px}
.man-input{font-size:var(--t16)}
textarea.man-input{min-height:88px;resize:vertical}
select.man-input{appearance:auto}
.g2{display:grid;gap:14px}
@media (min-width:640px){.g2{grid-template-columns:1fr 1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--line2);background:var(--raised);color:var(--ink);font:500 var(--t14)/1 var(--f);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip[aria-pressed="true"]{background:var(--act);color:var(--act-ink);border-color:var(--act)}
.chip .ct{opacity:.85}
details.dis{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--raised)}
details.dis>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 14px;cursor:pointer;font-weight:600;font-size:var(--t14)}
details.dis>summary::-webkit-details-marker{display:none}
details.dis>summary .chev{transition:transform var(--duration-fast) ease}
details.dis[open]>summary .chev{transform:rotate(180deg)}
details.dis .db{padding:0 14px 14px}

/* ---------- channels ---------- */
.chan{display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.chan+.chan{border-top:1px solid var(--line)}
.chan .ci{width:32px;height:32px;border-radius:var(--radius-md);background:var(--sunken);display:grid;place-items:center;flex:none}
.chan .cb{flex:1;min-width:0}
.chan .cb p{font-size:var(--t13);color:var(--ink2);margin-top:2px}
.chan .cp{font-weight:600;white-space:nowrap}

/* ---------- tiles, chart, tables ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:1024px){.tiles{grid-template-columns:repeat(5,1fr);gap:14px}}
.tile{padding:14px}
.tile .tk{display:flex;align-items:center;gap:6px;font-size:var(--t13);color:var(--ink2);font-weight:500}
.tile .tv{display:block;font-size:var(--t28);line-height:1.15;font-weight:600;letter-spacing:-.02em;margin-top:6px}
.tile .ts{font-size:var(--t12);color:var(--mut);margin-top:4px;line-height:16px}
.hc{position:relative;padding-left:32px;margin-top:8px}
.hc-plot{position:relative;height:190px;border-bottom:1px solid var(--line2)}
.hc-g{position:absolute;left:0;right:0;border-top:1px solid var(--line)}
.hc-g span{position:absolute;left:-32px;top:-8px;width:26px;text-align:right;font-size:var(--t12);color:var(--mut)}
.hc-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px}
.hc-bars i{flex:1;min-width:0;background:var(--bar);border-radius:2px 2px 0 0;position:relative}
.hc-bars i.f{background:repeating-linear-gradient(135deg,var(--sunken) 0 4px,transparent 4px 8px);height:100%;border-radius:0}
.hc-pace{position:absolute;left:0;right:0;border-top:2px dashed var(--man-gold)}
.hc-pace span{position:absolute;right:0;top:-20px;font-size:var(--t12);color:var(--man-gold-text);background:var(--raised);padding:0 4px;border-radius:4px}
.hc-today{position:absolute;top:0;bottom:0;border-left:2px solid var(--ink)}
.hc-today span{position:absolute;top:0;left:6px;font-size:var(--t12);font-weight:600;white-space:nowrap;background:var(--raised);padding:0 4px;border-radius:4px}
.hc-x{position:relative;height:18px;margin-top:6px;font-size:var(--t12);color:var(--mut)}
.hc-x span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.hc-x span:first-child{transform:none}
.hc-x span:last-child{transform:translateX(-100%)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--t13);color:var(--ink2);margin-top:10px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend i.ln{height:0;border-top:2px dashed var(--man-gold);border-radius:0;vertical-align:3px;width:16px}
.legend i.fu{background:repeating-linear-gradient(135deg,var(--line2) 0 3px,transparent 3px 6px)}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--radius-md);overflow:hidden}
.seg button{min-height:44px;min-width:44px;padding:0 12px;border:0;background:var(--raised);color:var(--ink2);font:500 var(--t13)/1 var(--f);cursor:pointer}
.seg button+button{border-left:1px solid var(--line2)}
.seg button[aria-pressed="true"]{background:var(--act);color:var(--act-ink)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.tbl{width:100%;border-collapse:collapse;font-size:var(--t14)}
.tbl th{font-size:var(--t12);font-weight:600;color:var(--mut);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right;white-space:nowrap}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--sunken) 55%,transparent)}
.tbl .grp td{background:var(--sunken);font-size:var(--t12);font-weight:600;color:var(--ink2);padding:8px 12px}
.cname{display:flex;align-items:center;gap:10px;min-width:180px}
.thumb{width:44px;height:37px;border-radius:4px;overflow:hidden;flex:none;border:1px solid var(--line);position:relative}
.prog{min-width:120px}
.bar{height:6px;border-radius:3px;background:var(--sunken);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--bar);border-radius:3px}
.tbl.desk{display:none}
@media (min-width:900px){.tbl.desk{display:table}.cards-m{display:none}}
.cards-m>*+*{border-top:1px solid var(--line)}
.cm{padding:14px 16px}
.cm dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:12px 0 0;font-size:var(--t13)}
.cm dt{color:var(--mut)} .cm dd{margin:0;font-weight:600}

/* ---------- timeline ---------- */
.now{display:flex;gap:14px;align-items:flex-start}
.now .ni{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none}
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 14px 34px;font-size:var(--t14)}
.tl li::before{content:"";position:absolute;left:10px;top:24px;bottom:2px;width:2px;background:var(--line)}
.tl li:last-child::before{display:none}
.tl .pt{position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line2);background:var(--raised)}
.tl .pt .ic{width:13px;height:13px;stroke-width:2.4}
.tl li.done .pt{background:var(--status-success);border-color:var(--status-success);color:var(--raised)}
.tl li.cur .pt{border:2px solid var(--status-info);background:var(--status-info-bg)}
.tl li.cur.ac .pt{border-color:var(--status-warning);background:var(--status-warning-bg)}
.tl .tt{font-weight:600}
.tl .td{color:var(--ink2);font-size:var(--t13)}
.tl li.done .td{display:none}
.tl li.done{padding-bottom:10px}
.tl .branch{margin:8px 0 0;padding:10px 12px;border-radius:var(--radius-md);border:1px dashed var(--line2);font-size:var(--t13);color:var(--ink2)}

/* ---------- banner grid ---------- */
.bg{display:grid;gap:14px;align-items:start}
@media (min-width:768px){.bg{grid-template-columns:1fr 1fr}.bg .wide{grid-column:1/-1}}
.bc{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--sunken);padding:10px}
.bc .cap{font-size:var(--t12);color:var(--mut);font-weight:600;margin-bottom:8px;display:flex;justify-content:space-between}
.bfit{position:relative;width:100%;overflow:hidden}
.bfit>*{position:absolute;left:0;top:0;transform-origin:0 0}
.pv-cap{display:flex;justify-content:space-between;gap:8px;font-size:var(--t12);color:var(--mut);margin-top:8px}
.sz{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.sz button,.tabs button{min-height:44px;padding:0 10px;border-radius:var(--radius-md);border:1px solid var(--line2);background:var(--raised);color:var(--ink2);font:500 var(--t13)/1 var(--f);cursor:pointer}
.sz button[aria-pressed="true"],.tabs button[aria-pressed="true"]{background:var(--act);color:var(--act-ink);border-color:var(--act)}
.tabs{display:flex;gap:6px}

/* ---------- landing ---------- */
.hero{display:grid;gap:28px;padding:8px 0}
@media (min-width:1024px){.hero{grid-template-columns:minmax(0,1fr) 420px;gap:56px;align-items:center;padding:24px 0}}
.hero .lead{max-width:56ch;margin-top:14px}
.plans{display:grid;gap:12px}
@media (min-width:640px){.plans{grid-template-columns:1fr 1fr}}
.plan .price{font-size:var(--t28);line-height:1.15;font-weight:600;margin-top:8px;letter-spacing:-.02em}
.plan .price small{font-size:var(--t14);font-weight:500;color:var(--ink2);letter-spacing:0}
.flow{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--raised);overflow:hidden}
@media (min-width:900px){.flow{grid-template-columns:1fr 1.25fr 1fr}}
.flow .fs{padding:18px;position:relative}
.flow .fs+.fs{border-top:1px solid var(--line)}
@media (min-width:900px){.flow .fs+.fs{border-top:0;border-left:1px solid var(--line)}}
.flow .demo{margin-top:12px;padding:12px;border-radius:var(--radius-md);background:var(--sunken)}
.foot{border-top:1px solid var(--line);margin-top:40px;padding:12px 0 0;display:flex;flex-wrap:wrap;gap:0 16px;align-items:center;font-size:var(--t13);color:var(--mut)}
.foot button{min-width:44px;background:none;border:0;padding:0;color:var(--ink2);font:500 var(--t13)/1 var(--f);cursor:pointer;min-height:44px;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.foot .cp{margin-left:auto;min-height:44px;display:flex;align-items:center}

/* ---------- help ---------- */
.helpg{display:block}
@media (min-width:1024px){.helpg{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start}}
.helpidx{display:none}
@media (min-width:1024px){.helpidx{display:block;position:sticky;top:84px}}
.helpidx button{display:flex;align-items:center;width:100%;text-align:left;min-height:44px;padding:0 10px;border:0;background:none;border-radius:6px;font:500 var(--t14)/1.2 var(--f);color:var(--ink2);cursor:pointer}
.helpidx button:hover{background:var(--sunken);color:var(--ink)}
.helpsec{scroll-margin-top:80px}
.helpsec ul{margin:8px 0 0;padding-left:20px;line-height:24px;font-size:var(--t14)}
.helpsec[hidden]{display:none}

/* ---------- gear ---------- */
.gear{position:fixed;right:12px;bottom:84px;z-index:40;width:48px;height:48px;border-radius:50%;background:var(--raised);color:var(--ink);border:1px solid var(--line2);box-shadow:var(--man-shadow-lg);display:grid;place-items:center;cursor:pointer}
.gear .gl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (min-width:1024px){.gear{bottom:auto;top:44px;right:72px;width:auto;height:44px;border-radius:999px;padding:0 14px;display:flex;gap:8px;font:600 var(--t13)/1 var(--f);box-shadow:none}.gear .gl{position:static;width:auto;height:auto;clip:auto}}
.gp{position:fixed;right:12px;left:12px;bottom:140px;top:100px;z-index:41;overflow:auto;background:var(--raised);color:var(--ink);border:1px solid var(--line2);border-radius:var(--radius-lg);box-shadow:var(--man-shadow-lg);padding:16px}
@media (min-width:560px){.gp{left:auto;width:400px}}
@media (min-width:1024px){.gp{bottom:24px;top:96px}}
.gp .grp{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.gp .lab{font-weight:600;font-size:var(--t13)}
.gp .why{font-size:var(--t13);color:var(--ink2);margin:2px 0 8px;line-height:18px}
.gp ul{margin:6px 0 0;padding-left:18px;font-size:var(--t13);line-height:19px;color:var(--ink2)}
.gp ul li+li{margin-top:6px}
.gp .seg{display:flex;flex-wrap:wrap;border:0;gap:6px}
.gp .seg button{border:1px solid var(--line2);border-radius:var(--radius-md)}
.shot .gear,.shot .gp{display:none!important}
.shot .top{position:static}
.shot .fbar,.shot .tabbar{position:static}
.shot .rail,.shot .side,.shot .nav,.shot .helpidx{position:static;height:auto;max-height:none}

/* ---------- reading state, empty ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--act);animation:spin .8s linear infinite;flex:none}
.reading{list-style:none;margin:10px 0 0;padding:0}
.reading li{display:flex;align-items:center;gap:10px;min-height:28px;font-size:var(--t14)}
.empty{text-align:center;padding:40px 16px}
.empty .ei{width:56px;height:56px;border-radius:14px;background:var(--sunken);display:grid;place-items:center;margin:0 auto 14px}
.empty .lead{margin:8px auto 18px;max-width:44ch}

/* ---------- motion (r2654): under 300 ms, transform and opacity, never blocks a click ---------- */
::view-transition{pointer-events:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:170ms;animation-timing-function:ease-out}
.side{view-transition-name:side}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.hc.anim .hc-bars i:not(.f){transform-origin:bottom;animation:grow 260ms var(--ease-out) both}
@keyframes pop{from{transform:scale(.55);opacity:.3}to{transform:none;opacity:1}}
.tl.anim li.cur .pt{animation:pop 220ms var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tl.anim li.cur .td{animation:rise 220ms var(--ease-out) both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}::view-transition-old(root),::view-transition-new(root){animation:none}}
/* the gear lives in the top bar: it never floats over content */
.gear{position:static;width:auto;height:auto;min-width:44px;min-height:44px;border-radius:var(--radius-pill);padding:0 12px;display:inline-flex;align-items:center;gap:8px;box-shadow:none;border:1px dashed var(--line2);background:var(--raised);color:var(--ink2);font:600 var(--t13)/1 var(--f)}
.gear .gl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (min-width:1024px){.gear .gl{position:static;width:auto;height:auto;clip:auto}}
.shot .gear{display:inline-flex!important}
.bfit>.ad,.bfit>.frame,.bfit>.phonef{position:absolute;left:0;top:0;transform-origin:0 0}
@media (min-width:1024px){.side{max-height:calc(100vh - 140px)}}
.bstrip{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.bstrip .bc{flex:none;max-width:100%}

/* ---------- round 4 ---------- */
/* the signature: the campaign ticket. One plan, one approval, a perforated stub that carries the money */
.ticket{position:relative;background:var(--raised);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--man-shadow-sm)}
.ticket .tk-head{display:flex;gap:14px;align-items:flex-start;padding:20px 20px 8px}
.seal{width:52px;height:52px;flex:none;border-radius:50%;background:var(--man-action);display:grid;place-items:center;box-shadow:0 0 0 4px var(--raised),0 0 0 5px var(--line2)}
.seal svg{width:30px;height:30px}
.ticket .rows{padding:4px 20px 12px}
.prow{display:grid;grid-template-columns:minmax(96px,30%) 1fr auto;gap:4px 12px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.prow:first-child{border-top:0}
.prow .pk{color:var(--mut);font-size:var(--t14);padding-top:2px}
.prow .pv{min-width:0}
.prow .pv .small{display:block}
.stub{position:relative;border-top:2px dashed var(--line2);padding:20px;background:color-mix(in srgb,var(--sunken) 55%,var(--raised));border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.stub::before,.stub::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--ground);border:1px solid var(--line)}
.stub::before{left:-12px;clip-path:inset(0 0 0 50%)}
.stub::after{right:-12px;clip-path:inset(0 50% 0 0)}
.stub .tot{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t16);font-weight:600}
.stub .tot b{font-size:var(--t28);letter-spacing:-.02em}
.draft-line{display:flex;gap:8px;align-items:flex-start;border:1px dashed var(--man-gold);background:var(--man-gold-soft);color:var(--ink);border-radius:var(--radius-md);padding:10px 12px;font-size:var(--t13);line-height:18px}
/* horizontal scroll at true size (the 728 x 90 on a phone) */
.bfit.hs{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.bfit.hs>.ad{position:relative!important;transform:none!important}
.hs-note{font-size:var(--t12);color:var(--mut);margin-top:6px}
/* studio */
.studio{display:grid;gap:16px}
.imgs{display:flex;gap:8px;flex-wrap:wrap}
.imgs button{width:72px;height:56px;border-radius:var(--radius-md);border:2px solid transparent;padding:0;cursor:pointer;overflow:hidden;position:relative;background:var(--sunken)}
.imgs button[aria-pressed="true"]{border-color:var(--act);box-shadow:0 0 0 2px var(--raised) inset}
.imgs .up{display:grid;place-items:center;color:var(--ink2);font:600 var(--t12)/1.2 var(--f);border:1px dashed var(--line2)}
/* reporting tables */
.rt{width:100%;border-collapse:collapse;font-size:var(--t14)}
.rt th{font-size:var(--t12);font-weight:600;color:var(--mut);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.rt td{padding:10px;border-bottom:1px solid var(--line)}
.rt tr:last-child td{border-bottom:0}
.rt .r{text-align:right;white-space:nowrap}
.g3{display:grid;gap:16px}
@media (min-width:1024px){.g3{grid-template-columns:1.4fr 1fr 1fr}}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--t13);background:var(--sunken);border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px;overflow-x:auto;white-space:pre}
.skel{display:grid;gap:10px}
.skel i{display:block;height:12px;border-radius:6px;background:var(--sunken)}
.prow .lnk{min-width:44px;justify-content:flex-end}
.bg>*{min-width:0}
.bfit.hs{max-width:100%}
/* round 5 */
.freepage{max-width:600px;margin:24px auto;padding:0 16px 48px}
.freepage .card{padding:24px}
@media (max-width:479px){.prow{grid-template-columns:1fr auto}.prow .pv{grid-column:1/-1;grid-row:2}.prow>:last-child{grid-column:2;grid-row:1}}
.man-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ======================= round 6 ======================= */
/* banner faces, self-hosted (OFL): the buyer's own type, read from the site */
@font-face{font-family:"Ad Instrument Serif";src:url("ds/fonts/ad/instrument-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Ad DM Serif Display";src:url("ds/fonts/ad/dm-serif-display-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Ad Bricolage";src:url("ds/fonts/ad/bricolage-grotesque-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:"Ad Bricolage";src:url("ds/fonts/ad/bricolage-grotesque-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:"Ad Young Serif";src:url("ds/fonts/ad/young-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Ad Jakarta";src:url("ds/fonts/ad/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:"Ad Jakarta";src:url("ds/fonts/ad/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:"Ad Literata";src:url("ds/fonts/ad/literata-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:"Ad DM Sans";src:url("ds/fonts/ad/dm-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:"Ad DM Sans";src:url("ds/fonts/ad/dm-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:block}

/* the units */
.ad{position:relative;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--fb);font-weight:500;line-height:1.2;text-align:left;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal}
.ad *{box-sizing:border-box}
.ad .phot{position:absolute;overflow:hidden;background:var(--scrim-a)}
.ad .phot .art,.ad .phot .pic{position:absolute;inset:0;width:100%;height:100%;display:block}
.ad .shade{position:absolute;inset:0}
.ad .hd{font-family:var(--fd);font-weight:var(--fw);letter-spacing:var(--fls);line-height:var(--flh);color:var(--fg);overflow:hidden}
.ad .hd .tx{display:block;text-wrap-style:balance}
.s728x90 .hd .tx,.s320x50 .hd .tx{white-space:nowrap}
.ad:not(.vC) .phot{background:var(--bg)}
.ad .sb{color:var(--sub);font-weight:500;line-height:1.3;letter-spacing:.005em}
.ad .ct{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;background:var(--cta);color:var(--cta-ink);border-radius:var(--rad);font-family:var(--fb);font-weight:600;white-space:nowrap;line-height:1;letter-spacing:.01em}
.ad.caps .ct{text-transform:uppercase;letter-spacing:.12em;font-size:.86em}
.ad .ft{position:absolute;left:0;right:0;bottom:0;background:var(--ft);border-top:1px solid var(--rule)}
.ad .hd.flag{outline:2px dashed #E1A23B;outline-offset:2px}
/* the stamp: one line inside one ground. The link is a 44px-tall tap area; the line sits at its foot */
.ad .man-stamp{position:absolute;z-index:3;display:flex;align-items:flex-end;min-height:44px;min-width:44px;padding:0;margin:0;background:none;box-shadow:none;border-radius:0;color:var(--ft-ink);font:500 8.5px/1 var(--font-man);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer}
.ad .man-stamp .st{display:inline-flex;align-items:center;gap:4px}
.ad .man-stamp .ss{width:7px;height:7px;flex:none}
.ad .man-stamp .dot{opacity:.7}
.ad .man-stamp .st.two{align-items:flex-start;gap:4px}
.ad .man-stamp .tl2{display:flex;flex-direction:column;gap:3px}
/* logos */
.blogo{display:inline-flex;align-items:center;gap:.42em;white-space:nowrap;line-height:1;color:inherit}
.blogo .mk{width:1.35em;height:1.35em;flex:none}
.blogo .wm{font-family:var(--fb);font-weight:600}
.lg-thread .wm{font-family:var(--fd);font-weight:400;font-size:1.32em;letter-spacing:-.005em}
.lg-arch .wm{text-transform:uppercase;letter-spacing:.2em;font-size:.86em}
.lg-collar .wm{font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.88em}
.lg-leaf .wm{font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:1.05em}
.lg-sun .wm{font-family:var(--fd);font-weight:400;font-size:1.18em}
.lg-app .wm{font-weight:800;letter-spacing:-.01em;font-size:1.05em}
.lg-mono .wm{text-transform:uppercase;letter-spacing:.12em;font-size:.9em}
.ad .lg{color:var(--fg)}

/* 300 x 250: message bottom-left, brand top-left, picture right, the stamp line on its own foot */
.s300x250 .phot{left:166px;top:0;width:134px;height:230px}
.s300x250.vC .phot{left:0;width:300px}
.s300x250 .shade{background:linear-gradient(90deg,var(--scrim-a) 0%,var(--scrim-a) 46%,var(--scrim-b) 66%,var(--scrim-c) 100%)}
.s300x250 .pn{position:absolute;left:0;top:0;width:166px;height:230px;padding:15px 12px 24px 16px;display:flex;flex-direction:column}
.s300x250.vC .pn{width:214px}
.s300x250 .lg{font-size:11.5px}
.s300x250 .gr{margin-top:auto;display:flex;flex-direction:column;gap:7px}
.ad .gr>*,.s300x600 .pn>*,.s160x600 .pn>*{flex:none}
.s300x250 .hd{font-size:30px}
.s300x250 .sb{font-size:11.5px}
.s300x250 .ct{font-size:12px;padding:9px 14px;margin-top:5px}
.s300x250 .ft{height:20px}
.s300x250 .man-stamp{left:0;bottom:0;padding:0 0 6px 16px}
/* 728 x 90 */
.s728x90 .phot{left:0;top:0;width:172px;height:90px}
.s728x90.vC .phot{width:728px}
.s728x90 .shade{background:linear-gradient(90deg,var(--scrim-a) 0%,var(--scrim-a) 58%,var(--scrim-b) 76%,var(--scrim-c) 100%)}
.s728x90 .pn{position:absolute;left:190px;right:18px;top:0;bottom:0;display:flex;align-items:center;gap:20px}
.s728x90.vC .pn{left:24px}
.s728x90 .tcol{flex:1;min-width:0;align-self:stretch;padding-top:12px;display:flex;flex-direction:column;align-items:flex-start}
.s728x90 .lg{font-size:11px}
.s728x90 .hd{font-size:25px;white-space:nowrap;margin-top:6px;width:100%}
.s728x90 .ct{font-size:13px;padding:12px 20px;flex:none}
.s728x90 .man-stamp{left:190px;bottom:0;padding-bottom:9px}
.s728x90.vC .man-stamp{left:24px}
/* 320 x 50 */
.s320x50 .phot{inset:0;width:320px;height:50px}
.s320x50 .shade{background:linear-gradient(90deg,var(--scrim-a) 0%,var(--scrim-a) 62%,var(--scrim-b) 100%)}
.s320x50 .tile{position:absolute;left:0;top:0;width:50px;height:50px;display:grid;place-items:center;background:var(--cta);color:var(--cta-ink);z-index:1}
.s320x50 .tile .mk{width:26px;height:26px}
.s320x50 .pn{position:absolute;left:60px;right:7px;top:0;bottom:0;display:flex;align-items:center;gap:10px}
.s320x50 .tcol{flex:1;min-width:0;align-self:flex-start;padding-top:8px}
.s320x50 .hd{font-size:17px;white-space:nowrap}
.s320x50 .ct{font-size:11px;padding:9px 12px;flex:none}
.s320x50.caps .ct{font-size:9.5px}
.s320x50 .man-stamp{left:60px;bottom:0;min-height:24px;padding-bottom:6px;font-size:8px}
/* tall sizes: words on top, the picture takes every pixel that is left */
.s300x600,.s160x600{display:flex;flex-direction:column}
.s300x600 .pn,.s160x600 .pn{position:relative;z-index:1;flex:none;display:flex;flex-direction:column}
.s300x600 .phot,.s160x600 .phot{position:relative;flex:1 1 auto;min-height:0}
.s300x600.vC .phot,.s160x600.vC .phot{position:absolute;inset:0;bottom:0}
.s300x600 .sp,.s160x600 .sp{flex:1}
.s300x600 .ft,.s160x600 .ft{position:relative;flex:none;z-index:1}
.s300x600 .shade,.s160x600 .shade{background:linear-gradient(180deg,var(--scrim-a) 0%,var(--scrim-a) 44%,var(--scrim-b) 58%,var(--scrim-c) 82%)}
.s300x600 .pn{padding:26px 24px 0;gap:13px}
.s300x600 .lg{font-size:14px;margin-bottom:8px}
.s300x600 .hd{font-size:48px}
.s300x600 .sb{font-size:15px}
.s300x600 .ct{font-size:14px;padding:13px 22px;margin-top:4px}
.s300x600 .phot{margin-top:26px;min-height:200px}
.s300x600 .ft{height:22px}
.s300x600 .man-stamp{left:0;bottom:0;padding:0 0 7px 24px}
.s160x600 .pn{padding:20px 14px 0;gap:11px}
.s160x600 .lg{font-size:10.5px;margin-bottom:6px}
.s160x600 .hd{font-size:32px}
.s160x600 .sb{font-size:13px}
.s160x600 .ct{font-size:12px;padding:11px 14px;margin-top:2px}
.s160x600 .phot{margin-top:22px;min-height:200px}
.s160x600 .ft{height:36px}
.s160x600 .man-stamp{left:0;right:0;bottom:0;justify-content:center;padding-bottom:8px;font-size:8px}
.s160x600 .man-stamp .tl2{align-items:flex-start}

/* "From your site": the kit we read, shown on the plan and in the studio */
.kitrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kitlogo{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);font-size:14px}
.sws{display:inline-flex}
.sws i{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 2px var(--raised),0 0 0 3px var(--line2);margin-right:-3px}
.prow .pv .kitrow+.small{margin-top:6px}
.fys{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--man-gold-text);margin-right:6px;white-space:nowrap}
.fys .ic{width:14px;height:14px}
.fys.ed{color:var(--ink2)}
[data-theme="dark"] .fys{color:#E3B25C}
[data-theme="dark"] .fys.ed{color:var(--ink2)}
.opt .ob p .fys{display:flex;margin:0 0 2px}
.wline{display:block;margin-top:8px}
.need{font-weight:600}
.kitline{display:flex;align-items:center;gap:12px;margin-top:12px}
.heroc{padding:18px}
.hero-ads{display:grid;gap:12px;margin-top:12px;justify-items:start}
.imgs .ithumb{position:absolute;inset:0;display:block}
.imgs .ithumb svg{width:100%;height:100%;display:block}
.imgs .up{width:72px;height:56px;border-radius:var(--radius-md);cursor:pointer;border:1px dashed var(--line2);text-align:center}
.studio .kitrow{padding-bottom:4px}

/* the host page for "See it on a page": an example article, not a grey skeleton */
.frame{background:#FFFFFF;color:#1C2230;font-family:"Ad DM Sans",Arial,sans-serif;border:1px solid #D5DAE3;border-radius:8px;overflow:hidden}
.frame .hh,.phonef .hh{display:flex;align-items:center;gap:20px;padding:14px 28px;border-bottom:1px solid #E4E7EE}
.frame .hm,.phonef .hm{font:600 22px/1 "Ad Literata",Georgia,serif;letter-spacing:-.01em;color:#1C2230}
.frame .hn{display:flex;gap:16px;align-items:center;font-size:13px;color:#4B5468}
.frame .hn i{display:none}
.frame .hx,.phonef .hx{margin-left:auto;font-size:11px;font-weight:600;color:#5A6378;border:1px solid #D5DAE3;border-radius:999px;padding:4px 9px}
.frame .lb{display:flex;flex-direction:column;align-items:center;padding:12px 0;background:#F6F7F9;border-bottom:1px solid #E4E7EE}
.frame .adl,.phonef .adl{display:block;font-size:9px;letter-spacing:.06em;color:#6B7385;margin-bottom:4px;text-align:center}
.frame .site{display:grid;grid-template-columns:1fr 300px;gap:36px;padding:24px 28px}
.frame article .kick{font-size:12px;font-weight:600;color:#9A5B2E;margin-bottom:6px}
.frame article h3{font:600 30px/1.15 "Ad Literata",Georgia,serif;letter-spacing:-.015em;color:#1C2230;margin:0}
.frame article .by{font-size:12px;color:#5A6378;margin:8px 0 14px}
.frame .hero-img{position:relative;height:230px;border-radius:6px;overflow:hidden;margin-bottom:14px}
.frame .hero-img svg{position:absolute;inset:0;width:100%;height:100%}
.frame article p{font-size:15px;line-height:1.6;color:#2A3142;margin:0 0 10px}
.frame aside .adslot{display:flex;flex-direction:column;align-items:center}
.frame aside .more{margin-top:18px;border-top:1px solid #E4E7EE;padding-top:12px}
.frame aside .more h4{font:600 14px/1.3 "Ad Literata",Georgia,serif;color:#1C2230;margin:0 0 8px}
.frame aside .more p{font-size:13px;line-height:1.4;color:#2A3142;padding:8px 0;border-top:1px solid #EEF0F4;margin:0}
.phonef{width:344px;height:640px;border:8px solid #1F2937;border-radius:28px;overflow:hidden;background:#fff;color:#1C2230;font-family:"Ad DM Sans",Arial,sans-serif;position:relative}
.phonef .notch{height:16px;background:#1F2937;width:110px;margin:0 auto;border-radius:0 0 10px 10px}
.phonef .site{padding:0 0 60px;height:600px;overflow:hidden}
.phonef .hh{padding:10px 14px;gap:10px}
.phonef .hm{font-size:17px}
.phonef h3{font:600 20px/1.2 "Ad Literata",Georgia,serif;color:#1C2230;margin:12px 14px 4px}
.phonef .by{font-size:11px;color:#5A6378;margin:0 14px 8px}
.phonef p{font-size:13px;line-height:1.55;color:#2A3142;margin:0 14px 10px}
.phonef .adslot{display:flex;flex-direction:column;align-items:center;margin:6px 0 12px}
.phonef .stick{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:5px 0;background:#F6F7F9;border-top:1px solid #E4E7EE}

/* phone: Sign in on the landing, Start a campaign from 560px (the hero form is right there) */
.pubm{font:600 var(--t14)/1 var(--f);color:var(--ink);background:none;border:0;min-height:44px;min-width:44px;padding:0 6px;cursor:pointer}
@media (min-width:900px){.pubm{display:none}}
@media (max-width:559px){.top .start{display:none}}
/* the summary bar never clips, the caret stays in view */
.fbar .fx>span{overflow:visible}
.fbar .man-btn[disabled]{opacity:1;cursor:progress}
.spin.inv{border-color:rgba(255,255,255,.35);border-top-color:#fff;margin-right:8px}
/* swipe cue for the 728 x 90 at true size */
.hs-note{display:flex;align-items:center;gap:4px;font-size:var(--t12);color:var(--ink2);margin-top:6px}
.bfit.hs{-webkit-mask-image:linear-gradient(90deg,#000 82%,rgba(0,0,0,.35));mask-image:linear-gradient(90deg,#000 82%,rgba(0,0,0,.35))}
/* report tables at 1440: sites full width, size and country side by side, size labels on one line */
@media (min-width:1024px){.g3{grid-template-columns:1fr 1fr}.g3 .span2{grid-column:1/-1}}
.nw .rt td:first-child{white-space:nowrap}
.hc .cn,.sec-t .cn{font-weight:500;color:var(--ink2)}
/* the trust promise: three plain lines, no badge glyphs */
.promise{list-style:none;margin:4px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:grid;gap:6px 20px;font-size:var(--t14);font-weight:600}
@media (min-width:640px){.promise{grid-template-columns:repeat(3,auto);justify-content:start}}
.promise li{display:flex;align-items:center;gap:8px}
.promise li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--man-gold);flex:none}
/* save draft sits in its own row, not floating */
.fa{border-top:1px solid var(--line);padding-top:16px}
.fa [data-save]::before{content:"";display:none}
/* skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--raised);color:var(--ink);padding:10px 14px;border-radius:var(--radius-md);box-shadow:var(--man-shadow-lg);font-weight:600}
.skip:focus{top:8px}
/* editorial headings in Literata, the estate's face; the interface stays in the MAN face */
h1,.ticket .tk-head h2{font-family:"Literata",Georgia,serif;font-weight:600;letter-spacing:-.015em}
.mail{word-break:break-all}
.ad .hd,.blogo .wm{word-spacing:.05em}
.s728x90 .ct,.s320x50 .ct{align-self:center}
.s728x90 .hd{font-size:30px}
.ad .hd{padding-bottom:.12em;margin-bottom:-.12em}
.phonef .hn{display:none}.phonef .hm{white-space:nowrap}
.s300x250 .lg{margin-bottom:9px}
/* r6b: the fresh seats R and S */
.nav button{font:500 var(--t15)/1 var(--f)}
.helpsec p,.helpsec li,.card p.ink2,.card p.small,.stack>p.small,.pub p.lead{max-width:70ch}
.todo{color:var(--ink2);padding:10px 12px;border-radius:var(--radius-md);background:var(--sunken)}
.todo .lnk{min-height:0}
.pvtop{display:block}
@media (min-width:1024px){.pvtop{display:none}}
.hs-note .lnk{min-height:0;font-size:inherit}
/* r2721, V3 "The Community Broadsheet": square corners, the masthead double rule, the gold money voice */
.man-scope{--radius-sm:2px;--radius-md:2px;--radius-lg:2px;--radius-xl:3px;--radius-2xl:4px}
.top{border-bottom:2px solid var(--ink);box-shadow:0 3px 0 0 var(--raised),0 4px 0 0 var(--ink)}
.tot b.num,.price,.big.num{color:var(--man-gold-text)}

/* ---------- r7 (Oct 28 2026): the V3 composition, "The Community Broadsheet" ----------
   Masthead in Literata with the double rule, a dateline, the ledger voice (label, dotted leader, figure in gold),
   numbered how-it-works rows (the sequence is real), the docket stamps, the buyer's own mark on the ticket.
   Type stays on the seven tokens; no uppercase; corners 2px (set above). */
h1,h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.012em}
h1{line-height:1.18}
.mark .wm{font-family:var(--font-display);font-weight:600;letter-spacing:0}
.mark .by{font-weight:500}
.dateline{display:flex;justify-content:space-between;gap:12px;padding:6px 16px;font-size:var(--t12);line-height:16px;color:var(--mut);border-bottom:1px solid var(--line);background:var(--ground)}
.dateline span+span{text-align:right}
.dateline.dl-app{display:none}
@media (min-width:768px){.dateline{padding:6px 28px}.dateline.dl-app{display:flex}}
@media (min-width:1024px){.dateline{padding:6px 32px}}
/* the ledger */
.ledger{background:var(--raised);border:1px solid var(--line);border-radius:var(--radius-md);padding:4px 16px}
.ledger.ledger-flat{border:0;padding:0;background:none;border-radius:0}
.ledger.ledger-stub{border:0;padding:0;background:none}
.lrow{display:flex;align-items:baseline;gap:8px;padding:9px 0;font-size:var(--t14);line-height:20px;color:var(--ink)}
.lrow+.lrow{border-top:1px solid var(--line)}
.ledger-flat .lrow+.lrow,.ledger-stub .lrow+.lrow{border-top:0;padding-top:4px}
.ledger-flat .lrow,.ledger-stub .lrow{padding:4px 0}
.lrow .lk{min-width:0;color:var(--ink2)}
.lrow .lk .sub{display:block;color:var(--mut);font-size:var(--t13)}
.lrow .dots{flex:1;min-width:14px;border-bottom:1px dotted var(--line2);transform:translateY(-5px)}
.lrow .val{font-weight:600;text-align:right;white-space:nowrap;flex:none;color:var(--ink)}
.lrow .val.money{color:var(--man-gold-text)}
.lrow .val small{font-size:var(--t13);font-weight:500;color:var(--ink2)}
.lrow.tot{padding-top:12px;margin-top:6px;border-top:1px solid var(--ink)!important;font-size:var(--t16);font-weight:600}
.lrow.tot .lk{color:var(--ink);max-width:62%}
.lrow.tot .val{font-size:var(--t28);line-height:1.1;letter-spacing:-.02em;font-family:var(--font-display);font-weight:600}
.ledger-stub .lrow.tot{border-top:2px solid var(--ink)!important}
.lrow.sfoot-tot{margin-bottom:10px;padding-top:0;border-top:0!important}
.lrow.sfoot-tot .val{font-size:var(--t20)}
.lnote{font-size:var(--t13);line-height:18px;color:var(--mut);padding:8px 0 6px;max-width:70ch}
/* the rate card on the landing */
.rate-card .lrow{padding:14px 0;align-items:flex-start}
.rate-card .lrow .lk{display:flex;flex-direction:column;gap:2px;max-width:34ch}
.rate-card .plan-n{font-family:var(--font-display);font-size:var(--t20);font-weight:600;line-height:1.3;color:var(--ink)}
.rate-card .lrow .dots{transform:translateY(16px)}
.rate-card .val{font-size:var(--t20);line-height:1.3}
.rate-card .val small{display:block;text-align:right;font-size:var(--t13)}
@media (max-width:479px){.rate-card .lrow{flex-wrap:wrap}.rate-card .lrow .dots{display:none}.rate-card .lrow .lk{max-width:none;flex:1 1 100%}.rate-card .val{text-align:left;white-space:normal}.rate-card .val small{text-align:left}}
/* how it works: a real sequence, numbered in the serif */
.flow .fs{display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 12px;align-items:start}
.flow .fs .hn{font-family:var(--font-display);font-size:var(--t28);line-height:1;color:var(--man-gold-text);grid-row:1/span 3;padding-top:2px;font-variant-numeric:tabular-nums}
.flow .fs h3,.flow .fs p,.flow .fs .demo{grid-column:2}
.flow .fs .demo{margin-top:12px}
/* the docket: stamped status words */
.tl li{padding-left:96px}
.tl li::before{left:41px;top:36px}
.tl .pt{width:84px;height:auto;min-height:28px;border-radius:var(--radius-sm);border:1px solid var(--line2);background:var(--raised);display:flex;align-items:center;justify-content:center;padding:5px 6px;text-align:center;font:600 var(--t12)/1.2 var(--f);letter-spacing:.02em;color:var(--mut)}
.tl li.done .pt{background:var(--act);border-color:var(--act);color:var(--act-ink)}
.tl li.cur .pt{border:1px dashed var(--man-gold-text);background:none;color:var(--man-gold-text)}
.tl li.cur.ac .pt{border-color:var(--status-warning);color:var(--status-warning)}
.flow .tl li{padding-left:96px}
/* the ticket seal is the buyer's mark */
.seal{border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.seal .mk{width:30px;height:30px}
/* the buyer's own ad in the phone plan fold */
.plan-strip{margin:0 0 16px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--raised)}
.plan-strip .bfit{flex:1;max-width:320px}
.plan-strip .lnk{min-height:44px;flex:none}
/* the sticky bar never cuts the number */
.fbar .fx b{overflow:visible;text-overflow:clip}
/* KPI tiles: four, labelled */
@media (min-width:1024px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tiles-lab{margin-bottom:8px}
/* the stamp: 9px on the big sizes, 8.5 on the 320 x 50; scaled previews are not tap targets, the full size is one tap away */
.ad .man-stamp{font-size:9px}
.s320x50 .man-stamp{font-size:8.5px}
.bfit[data-maxh] .man-stamp,.thumb .man-stamp{pointer-events:none}
/* the 160 x 600 headline takes a smaller step so it sets in three or four lines */
.s160x600 .hd{font-size:28px}
/* preview chrome is quiet: the gear is a plain control, the product reads as a product */
.gear{border:1px solid transparent;background:none;color:var(--mut);font-weight:500}
.gear:hover{border-color:var(--line2);color:var(--ink)}
/* r7 walk fixes: the 320 x 50 stamp stays under 0.7 of a shrunk headline; report cards never widen the page */
.s320x50 .man-stamp{font-size:8px}
.g3>*{min-width:0}
.nw{overflow-x:auto}
@media (max-width:479px){.nw .rt{font-size:var(--t13)}.nw .rt td,.nw .rt th{padding:8px 6px}}
/* footer links are real pages (privacy, terms) */
.foot a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;color:var(--ink2);font:500 var(--t13)/1 var(--f);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
/* phone dateline: one line, the promise, not the date */
@media (max-width:479px){.dateline span:first-child{display:none}.dateline span+span{text-align:left}.rate-card .val small{display:inline;margin-left:4px}}