/* ai:ing, set from its own brand book: nine tokens, Albert Sans at 400 and 500, one tinted surface for what
   waits for you, no gradients or shadows. The colour on this page comes from our brands' own posts:
   ai:ing stays quiet around them, the way it does in the product. */
@font-face{font-family:"Albert Sans";src:url("/fonts/albert-sans.woff2") format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"aiing figures";src:url("/fonts/aiing-figures-400.woff2") format("woff2");font-weight:400;unicode-range:U+0030-0039;font-display:swap}
@font-face{font-family:"aiing figures";src:url("/fonts/aiing-figures-500.woff2") format("woff2");font-weight:500;unicode-range:U+0030-0039;font-display:swap}
/* our brands' own type, open fonts (css/fonts/brands/OFL.txt), served from here, under /css/ where the front door sends this site's files */
@font-face{font-family:"Genos";src:url("/css/fonts/brands/genos-latin-200-normal.woff2") format("woff2");font-weight:200;font-display:swap}
@font-face{font-family:"Jost";src:url("/css/fonts/brands/jost-latin-300-normal.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Jost";src:url("/css/fonts/brands/jost-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/css/fonts/brands/instrument-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/css/fonts/brands/instrument-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/css/fonts/brands/instrument-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --paper:#ffffff; --paper-sunk:#f7f7f6; --ink:#161210; --muted:#767069;
  --rule:#ece8e4; --rule-strong:#9a938b; --wash:#ffefe4; --wash-soft:#fff7f1; --wash-edge:#eaa87d;
  --confirm:#5e7748; --caution:#8e2f22;
  --sans:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --figures:"aiing figures",var(--sans);
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --rounded:ui-rounded,"SF Pro Rounded","Albert Sans",system-ui,sans-serif;
  --gutter:20px; --measure:40rem; --wide:76rem;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0f0f10; --paper-sunk:#181716; --ink:#f2efec; --muted:#9a948c;
  --rule:#2a2725; --rule-strong:#6b645d; --wash:#211f1e; --wash-soft:#191817; --wash-edge:#eaa87d;
  --confirm:#a3bf8a; --caution:#ec8a76;
  color-scheme:dark;
}}
/* The wash on dark (owner, 2026-10-30): orange mixed into black turns brown, and the light page's pale orange glares
   across a large area. Small marks keep that pale orange, solid, with dark type; larger surfaces are a raised
   neutral, the cards with the brand orange (#eaa87d, as on white) as their edge. */
@media (prefers-color-scheme:dark){
  :root :is(.s-wait,.src-card mark,.ck-back mark){background:#ffefe4;color:#161210;--ink:#161210;--muted:#6f6962}
  :root .ck-back mark.never{background:#ffefe4;color:#161210}
  :root .ck-back mark.ok{background:none;color:#f2efec;--ink:#f2efec}
  :root .s-wait.none{color:#9a948c;background:none;--ink:#f2efec;--muted:#9a948c}
  :root :is(.s-queue li,.m-card){box-shadow:inset 2px 0 0 var(--wash-edge)}
  :root .s-queue li:hover{box-shadow:inset 2px 0 0 var(--wash-edge),inset 0 0 0 1px var(--rule-strong)}
  :root .s-queue li[aria-current="true"]{box-shadow:inset 2px 0 0 var(--wash-edge),inset 0 0 0 1px var(--ink)}
}
/* The muted grey on the pale wash: #767069 is 4.36:1 there, under the 4.5:1 floor; this one is 4.8:1. */
@media not (prefers-color-scheme:dark){:root :is(.morning,.s-wait,.s-queue li,.rp.mine,.src-card mark,.m-card,.ck-back mark){--muted:#6f6962}}
@media (min-width:760px){:root{--gutter:40px}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;font-synthesis-weight:none;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.needs-js{display:none!important}
.js .needs-js{display:revert!important}
.js .nojs{display:none}
.nojs{color:var(--muted);font-size:.9375rem}

/* buttons: an ink fill for the one thing to do, a ruled outline for the rest */
.btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:500;font-size:1rem;
  color:var(--paper);background:var(--ink);border:1px solid var(--ink);border-radius:0;padding:10px 20px;min-height:44px;
  cursor:pointer;text-decoration:none}
.btn:hover{opacity:.88}
.ghost{font:inherit;font-size:14px;font-weight:500;color:var(--ink);background:var(--paper);border:1px solid var(--rule-strong);
  border-radius:0;padding:7px 14px;min-height:38px;cursor:pointer;transition:background .15s,border-color .15s}
.ghost:hover{border-color:var(--ink);background:var(--paper-sunk)}

/* top */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:26px;padding-bottom:26px}
.mark{display:block;line-height:0;color:var(--ink)}
.wm{height:30px;width:auto;aspect-ratio:2256.4/707;fill:currentColor}
.wm .dot,.s-wm .dot{fill:currentColor;transform-box:fill-box;transform-origin:center}
.top-note{font-size:.875rem;color:var(--muted);text-decoration:none}
.top-note:hover{color:var(--ink)}
.top-links{display:flex;align-items:center;gap:22px}

/* the morning: ai:ing's own home band, the one tinted surface, full width. The headline goes through ai:ing inside it
   before it may stand, and the morning's posts wait beside it. */
.morning{background:var(--wash);padding:clamp(36px,6vw,72px) 0 clamp(32px,5vw,56px)}
.morning-in{display:grid;gap:32px}
.morning-words{container-type:inline-size;min-width:0}
.morning-posts{min-width:0}
.hello{font-size:.9375rem;font-weight:500;margin-bottom:14px}
.morning h1{font-size:min(5rem,calc(100cqi / 12.4))}
.mp-k{font-size:.9375rem;margin-bottom:12px}
.mp-k b{font-family:var(--figures);font-weight:500}
.mp-k span{color:var(--muted)}
.hero-posts{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.hero-posts::-webkit-scrollbar{display:none}
.hero-posts .hp-t{flex:0 0 clamp(128px,34vw,150px);min-width:0}
.mp-go{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding:10px 20px;background:var(--ink);color:var(--paper);
  font-weight:500;font-size:1rem;text-decoration:none}
.mp-go:hover{opacity:.88}
@media (min-width:1100px){
  /* The posts' column has a fixed width: three tiles of 142px and two gaps. Sized by its content, Safari widened it
     each time a tile's line changed from "Waiting for you" to "Approved: …", and the headline beside it, sized by
     the room left, shrank in three steps after looking too big while it played. */
  .morning-in{grid-template-columns:minmax(0,1fr) calc(3 * 142px + 2 * 14px);gap:56px;align-items:start}
  .hello{margin-bottom:12px}
  .hero-vis{min-height:calc(142px * 5 / 4)}
  .hero-posts{overflow:visible}
  .hero-posts .hp-t{flex-basis:142px;width:142px}
}
/* below the band: what it is, in one paragraph, and the one thing to do */
.intro{padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(40px,6vw,80px);display:grid;gap:8px 64px;align-items:end}
.intro .lede{margin-top:0}
@media (min-width:1000px){.intro{grid-template-columns:minmax(0,1fr) auto}.intro .soon{margin-top:0;flex-direction:column;align-items:flex-start}}
.hp-t{display:block;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);transition:opacity .45s,transform .55s var(--ease)}
.hp-t.pending{opacity:0;transform:translateY(10px)}
.hp-t .pv{display:block;aspect-ratio:4/5;width:100%;transition:transform .3s var(--ease)}
.hp-t:hover .pv{transform:translateY(-3px)}
.hp-s{display:flex;align-items:flex-start;gap:7px;min-width:0;font-size:12.5px;line-height:1.3;margin-top:7px;height:2.6em;overflow:hidden;color:var(--muted)}
.hp-s::before{content:"";width:7px;height:7px;margin-top:.28em;border-radius:50%;background:var(--wash-edge);flex:none}
.hp-t.ok .hp-s{color:var(--confirm)}
.hp-t.ok .hp-s::before{background:var(--confirm)}
.hp-t.ok .pv{animation:press .5s var(--ease)}
h1{font-size:clamp(2.1rem,7.4vw,5.25rem);font-weight:500;letter-spacing:-.025em;line-height:1.03}
/* Two readings of the headline share one cell, so the taller one holds the space and neither paints a box.
   The draft is ordinary inline text: the wave's room is there from the first frame, and it only gains its line
   once the flat phrase is held. The finished lines stay on one line each. */
.js .hero-vis{display:grid;align-items:start}
.js .hero-vis>.pane{grid-area:1/1;opacity:0;transition:opacity .4s var(--ease)}
.js .hero-vis>.pane.on{opacity:1}
.hero-vis .l{display:block;white-space:nowrap}
.hero-vis .draft .l{white-space:normal;line-height:1.32}
.hero-vis .w{opacity:0;transition:opacity .4s var(--ease)}
.hero-vis .w.on{opacity:1}
.hero-vis .draft .w{color:var(--muted);transition:opacity .4s var(--ease),color .4s var(--ease)}
.hero-vis .weak{padding-bottom:5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-vis .weak.show .w{color:var(--ink)}
.hero-vis .weak.show{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='6' viewBox='0 0 14 6'><path d='M0 3Q3.5 1.2 7 3T14 3' fill='none' stroke='%238e2f22' stroke-width='1.25'/></svg>") left bottom / 14px 6px repeat-x}
@media (prefers-color-scheme:dark){
  .hero-vis .weak.show{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='6' viewBox='0 0 14 6'><path d='M0 3Q3.5 1.2 7 3T14 3' fill='none' stroke='%23ec8a76' stroke-width='1.25'/></svg>")}
}
.hero-note{display:grid;grid-template-columns:7px minmax(0,1fr);column-gap:9px;align-items:start;
  min-height:1.6em;margin-top:22px;font-size:.9375rem;color:var(--muted)}
.hero-note:not(.busy):not(.edit):not(.ok){visibility:hidden}
.hero-note::before{content:"";width:7px;height:7px;margin-top:calc((1.6em - 7px) / 2);border-radius:50%;background:currentColor;grid-column:1;grid-row:1}
.hero-note>span{grid-column:2;grid-row:1}
.hero-note>span:first-child{visibility:hidden}
.hero-note.edit{color:var(--ink)}
.hero-note.edit::before{background:var(--wash-edge)}
.hero-note.ok{color:var(--confirm)}
.hero-note.busy::before{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.lede{font-size:clamp(1.125rem,1.9vw,1.375rem);line-height:1.55;max-width:var(--measure);margin-top:24px}
.soon{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:32px}
.soon span{font-size:.9375rem;color:var(--muted)}

/* section labels: a colon, then what follows (cue:ing's device, the same family) */
h2{font-size:.875rem;font-weight:500;color:var(--muted);letter-spacing:0}
h2::before{content:":";color:var(--wash-edge);margin-right:6px}
h2.big{font-size:clamp(1.9rem,4.2vw,3rem);color:var(--ink);letter-spacing:-.02em;line-height:1.1;max-width:20ch}
h2.big::before{content:none}
.s-h{font-size:12px;font-weight:500;color:var(--muted);margin:0 0 9px}
.s-h::before{content:":";color:var(--wash-edge);margin-right:5px}

/* ---------- the businesses' own looks: their colours, their type ---------- */
.look-luna{--bg:#1f3a2d;--fg:#efe9da;--ac:#c4dba9;--face:var(--serif);--style:italic;--wt:400;--case:none;--track:-.01em}
.look-roast{--bg:#2a1b14;--fg:#f3e6d3;--ac:#a9c8ea;--face:var(--serif);--style:normal;--wt:400;--case:none;--track:-.005em}
/* our own brands, as ai:ing reads their websites: their paper and ink, their headline type */
.look-bha{--bg:#f9f9f5;--fg:#3d3d3d;--ac:#a99f97;--face:"Genos","Arial Narrow",sans-serif;--style:normal;--wt:200;--case:none;--track:0em}
.look-fg{--bg:#b1b1aa;--fg:#3c3c3c;--ac:#ecebe9;--face:"Jost",Arial,sans-serif;--style:normal;--wt:300;--case:uppercase;--track:.18em}
.look-cw{--bg:#f0e7df;--fg:#2a211c;--ac:#501411;--face:"Instrument Serif",Georgia,serif;--style:normal;--wt:400;--case:none;--track:-.015em}


/* ---------- the stage: ai:ing's home page, rebuilt in the page ---------- */
.stage-wrap{max-width:calc(var(--wide) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.stage-wrap .wrap{padding-left:0;padding-right:0}
/* the sample businesses, as ai:ing's own brand switch: each one's mark in its colours, the open one ringed, how far
   its posts have got as a line under it */
.biz{display:flex;align-items:center;gap:8px;padding-left:16px;border-left:1px solid var(--rule);height:30px}
.biz button{position:relative;display:block;width:30px;height:30px;padding:0;border:0;border-radius:0;background:none;cursor:pointer;flex:none}
.biz .b-mark{width:30px;height:30px;display:grid;place-items:center;background:var(--bg);color:var(--fg);transition:transform .2s var(--ease)}
.biz .b-t,.biz .b-s{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.biz .b-bar{position:absolute;left:0;bottom:-5px;height:2px;width:0;background:var(--wash-edge);transition:width .7s var(--ease)}
.biz button:hover .b-mark{transform:translateY(-2px)}
.biz button[aria-pressed="true"] .b-mark{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}

.stage{position:relative;border:1px solid var(--rule);background:var(--paper);font-size:14px;line-height:1.45;
  height:clamp(640px,52vw,720px);flex-direction:column;overflow:hidden}
.js .stage.needs-js{display:flex!important}
.s-band{display:flex;align-items:center;gap:16px;padding:0 18px;height:56px;flex:none;border-bottom:1px solid var(--rule);white-space:nowrap}
.s-wm{height:21px;width:auto;aspect-ratio:2256.4/707;color:var(--ink);flex:none}
.s-wm.ping .dot{animation:ping .8s var(--ease)}
.s-wm.ping .dot.hi{animation-delay:.08s}
@keyframes ping{0%{transform:none}35%{transform:translateY(-150px) scale(1.3)}100%{transform:none}}
.s-brand{display:flex;align-items:center;padding-left:16px;border-left:1px solid var(--rule);height:24px;font-size:18px;min-width:0}
.s-time{font-family:var(--figures);font-size:13px;color:var(--muted)}
.s-wait{margin-left:auto;font-size:13px;font-weight:500;background:var(--wash);padding:5px 10px;transition:background .3s}
.s-wait.none{background:none;font-weight:400;color:var(--muted)}
.s-wait b{font-family:var(--figures);font-weight:500}
.s-stop{font-size:13px;font-weight:500;color:var(--caution);background:var(--paper);border:1px solid var(--rule-strong);border-radius:0;
  padding:5px 12px;min-height:32px;cursor:pointer}
.s-stop:hover{border-color:var(--caution)}
.s-body{flex:1;display:grid;grid-template-columns:minmax(196px,.6fr) minmax(0,1.55fr) minmax(0,1fr);min-height:0}

/* the rail: what waits for you (the one tinted surface), then what is going out */
.s-rail{padding:18px 14px 18px 18px;border-right:1px solid var(--rule);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.s-queue,.s-out{list-style:none}
.s-queue{display:grid;gap:4px;margin-bottom:22px}
.s-queue li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;background:var(--wash);padding:6px 8px 6px 6px;
  cursor:pointer;transition:opacity .35s,transform .45s var(--ease),box-shadow .2s;border:0}
.s-queue li:hover{box-shadow:inset 0 0 0 1px var(--rule-strong)}
.s-queue li[aria-current="true"]{box-shadow:inset 0 0 0 1px var(--ink)}
.s-queue li.leaving{opacity:0;transform:translateX(10px)}
.q-t{min-width:0}
.q-k{display:block;font-size:11px;color:var(--muted);line-height:1.3}
.q-w{display:block;font-size:13px;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-out li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--rule);font-size:13px}
.s-out li:first-child{border-top:0}
.s-out li.appear{animation:appear .45s var(--ease) backwards}
.s-out .o-when{display:block;font-size:11px;color:var(--muted);font-family:var(--figures)}
.s-out .o-w{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-out .s-none,.s-queue .s-none{display:block;background:none;color:var(--muted);font-size:13px;padding:0;border:0;cursor:default}
.s-out.held li:not(.s-none){opacity:.45;text-decoration:line-through}
.s-h-out{margin-top:2px}

/* a post in miniature: its own ground and first words */
.th{width:34px;height:42px;background:var(--bg);color:var(--fg);overflow:hidden;padding:4px;display:flex;flex-direction:column;justify-content:flex-end;
  font:var(--style) var(--wt) 6.5px/1.1 var(--face);letter-spacing:var(--track)}
.th.tall{height:48px;width:28px;margin-left:3px}
.th.pic{padding:0;background:var(--paper-sunk)}
.th.pic img{width:100%;height:100%;object-fit:cover;display:block}
.th.pic.sq{height:34px}
.th.pic.tall{position:relative}
.th.pic.tall b{position:absolute;inset:auto 3px 4px;font-weight:inherit;color:var(--fg)}
.th.mail,.th.text{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-strong);font-family:var(--sans);font-style:normal;justify-content:flex-start;padding-top:9px;position:relative}
.th.mail::before,.th.text::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--bg)}
.th.reply{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-strong);font-family:var(--sans);font-style:normal;justify-content:center}


/* the strip of small posts, where the rail doesn't fit */
.s-strip{display:none;gap:8px;margin-bottom:12px;align-items:flex-end}
.s-strip button{padding:0;border:0;background:none;position:relative;cursor:pointer;line-height:0}
.s-strip button[aria-current="true"] .th{outline:2px solid var(--ink);outline-offset:2px}
.s-strip button.done::after{content:"";position:absolute;right:-4px;bottom:-4px;width:12px;height:12px;border-radius:50%;background:var(--confirm);box-shadow:0 0 0 2px var(--paper)}
.s-strip button.skip .th{opacity:.3}
@media (max-width:1060px){.s-strip{display:flex}}

/* the open item */
.s-main{padding:16px 24px 18px;display:flex;flex-direction:column;min-width:0;min-height:0}
.s-ih{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin-bottom:10px}
.s-ih b{font-weight:500;color:var(--ink)}
.s-pv{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;container-type:size}
.s-cap{font-size:13.5px;line-height:1.45;margin-top:12px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.s-cap b{font-weight:500}
.s-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
.s-acts .yes{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.s-acts .yes:hover{background:var(--ink);opacity:.86}
.s-acts .yes.pressed{animation:press .5s var(--ease)}
@keyframes press{40%{transform:scale(.95)}}
.s-acts .ver{font-size:12px;color:var(--muted);margin-left:auto;font-family:var(--figures)}
.s-main.swap .s-pv,.s-main.swap .s-cap{animation:appear .4s var(--ease)}
.s-main.out .s-pv{animation:send .5s var(--ease) forwards}
@keyframes send{to{opacity:0;transform:translate(-30px,10px) scale(.92)}}
.appear{animation:appear .45s var(--ease) backwards}
@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* nothing needs you */
.s-done{margin:auto 0;padding:10px 0 20px}
.s-done-h{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.s-done p{margin-top:10px;color:var(--muted);max-width:30rem}
.s-done .s-done-h{margin-top:0;color:var(--ink)}
.s-done .s-acts{margin-top:22px}

/* the side: why this one, how it was checked, when it goes */
.s-side{padding:18px 20px;border-left:1px solid var(--rule);overflow:hidden;min-width:0;display:flex;flex-direction:column;gap:18px}
.s-side > div{opacity:0}
.s-side > div.on{opacity:1;animation:appear .45s var(--ease) backwards}
.why-q{font-size:17px;font-weight:500;line-height:1.34;letter-spacing:-.01em}
.why-s{font-size:12px;color:var(--muted);margin-top:6px}
.ck-list{list-style:none;display:grid;gap:6px}
.ck-list li{display:grid;grid-template-columns:16px 1fr;gap:6px;font-size:13px;line-height:1.4}
.ck-list li::before{content:"";width:9px;height:9px;margin-top:5px;border-radius:50%;border:1.5px solid var(--confirm)}
.ck-list li.ok::before{background:var(--confirm)}
.ck-list li.fix::before{border-color:var(--wash-edge);background:var(--wash-edge)}
.goes{font-size:13px;line-height:1.45}
.goes b{font-weight:500;display:block;font-size:14px}

/* stopped */
.s-halt{position:absolute;inset:56px 0 0 0;background:color-mix(in srgb,var(--paper) 88%,transparent);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 24px;animation:appear .3s var(--ease)}
.s-halt[hidden]{display:none}
.s-halt-h{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:500;letter-spacing:-.02em;color:var(--caution)}
.s-halt p + p{margin-top:8px;max-width:30rem}
.s-halt .btn{margin-top:22px}
.stage.halted .s-wait{background:none;color:var(--caution);font-weight:500}

.stage-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-top:12px;font-size:13px;color:var(--muted)}

/* ---------- previews: each post shaped like where it goes ---------- */
.pv{background:var(--bg);color:var(--fg);position:relative;overflow:hidden;container-type:inline-size}
/* a post as ai:ing drew it: the picture itself */
.pv-pic img{display:block;width:100%;height:100%;object-fit:cover}
.pv-ads .sq.pv-pic{aspect-ratio:1/1}
/* a brand's own logo file, its size set by the logo rule (site.js).
   The file is the brand's own dark ink. On a light ground (its square, an email band, a pale card) that ink stays.
   On the page's dark paper it disappears, so there it is drawn in white. A two-colour mark, such as Callwell's plate, is left as drawn. */
.lg-img{display:block;max-width:100%;height:auto;user-select:none}
@media (prefers-color-scheme:dark){
  .s-brand .lg-img:not(.mark){filter:brightness(0) invert(1)}
}
.lg-txt{font:300 11px/1 "Jost",Arial,sans-serif;letter-spacing:.12em;color:var(--fg)}
.pv-post{height:min(100cqh,400px,125cqw);aspect-ratio:4/5}
.pv-post .art{position:absolute;inset:0;padding:8.5cqw;display:flex;flex-direction:column;justify-content:flex-end}
.pv .big{font-family:var(--face);font-style:var(--style);font-weight:var(--wt);letter-spacing:var(--track);text-transform:var(--case);font-size:12.5cqw;line-height:1.02}
.pv .small{font-family:var(--face);font-size:4.6cqw;line-height:1.3;margin-top:3.5cqw;opacity:.9;max-width:80%}
.pv .lgw{position:absolute;left:8.5cqw;top:7.5cqw;font-size:5.4cqw}

.pv-reel{height:min(100cqh,420px,177cqw);aspect-ratio:9/16}
.pv-reel .segs{position:absolute;left:5cqw;right:5cqw;top:4cqw;display:flex;gap:1.5cqw}
.pv-reel .segs i{flex:1;height:.9cqw;min-height:2px;background:color-mix(in srgb,var(--fg) 30%,transparent);position:relative;overflow:hidden}
.pv-reel .segs i b{position:absolute;inset:0;background:var(--fg);transform:scaleX(0);transform-origin:left}
.pv-reel .segs i.done b{transform:none}
.pv-reel .segs i.now b{animation:seg var(--dur,1.7s) linear forwards}
@keyframes seg{to{transform:none}}
.pv-reel .lines{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:10cqw;text-align:center}
.pv-reel .line{font-family:var(--face);font-style:var(--style);font-weight:var(--wt);letter-spacing:var(--track);text-transform:var(--case);font-size:10.5cqw;line-height:1.08;animation:appear .35s var(--ease)}
.pv-reel .line.hi{color:var(--ac)}
.pv-reel .lgw{top:auto;bottom:7cqw;left:7cqw}
.pv-reel .reel-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv-reel .segs,.pv-reel .lines,.pv-reel .lgw,.pv-reel .snd{z-index:1}
.pv-reel .snd{position:absolute;right:6cqw;bottom:7cqw;font:400 4.2cqw/1 var(--sans);opacity:.7}

.pv-mail,.pv-li,.pv-reply,.pv-search{background:var(--paper);color:var(--ink);border:1px solid var(--rule-strong);width:100%;max-width:480px;
  max-height:100%;overflow:hidden;font-size:13.5px;line-height:1.5}
.pv-mail .mh{display:grid;grid-template-columns:4.6em 1fr;gap:2px 8px;padding:10px 14px;border-bottom:1px solid var(--rule);font-size:12.5px}
.pv-mail .mh > span:nth-child(odd){color:var(--muted)}
.pv-mail .mh .subj{display:block;font-weight:500;font-size:14px;color:var(--ink)}
.pv-mail .mh .pre{display:block;color:var(--muted)}
.pv-mail .strip{background:var(--bg);color:var(--fg);padding:10px 16px;font-size:17px}
.pv-mail .mb{padding:14px 16px 16px}
.pv-mail .mb p + p{margin-top:9px}
.pv-mail .cta{display:inline-block;margin-top:12px;background:var(--bg);color:var(--fg);font-weight:500;padding:7px 14px;font-size:13px}
.pv-li{padding:14px 16px}
.pv-li .who{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;margin-bottom:10px}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--fg);font-weight:500;font-size:14px;overflow:hidden}
.pv-li .nm{font-weight:500;line-height:1.25}
.pv-li .rl{font-size:12px;color:var(--muted)}
.pv-li .tx{white-space:pre-line}
.li-card{margin:12px -16px -14px;aspect-ratio:1.91/1;padding:5.5cqw 6cqw;display:flex;flex-direction:column;justify-content:flex-end}
.li-card .big{font-size:6.6cqw;line-height:1.1}
.li-card .small{font-size:3.2cqw;margin-top:2cqw}
.pv-reply{padding:14px 16px;display:grid;gap:12px}
.rp{display:grid;grid-template-columns:32px 1fr;gap:10px}
.rp .av{width:32px;height:32px;font-size:12px;background:var(--paper-sunk);color:var(--muted)}
.rp .nm{font-weight:500;font-size:13px}
.rp .nm .stars{color:var(--wash-edge);letter-spacing:1px;margin-left:6px;font-weight:400}
.rp .where{font-size:11.5px;color:var(--muted)}
.rp.mine{margin-left:22px;background:var(--wash-soft);padding:10px;margin-right:-6px}
.rp.mine .av{background:var(--bg);color:var(--fg)}
.pv-search{padding:6px 16px}
.sr{padding:12px 0;border-top:1px solid var(--rule)}
.sr:first-child{border-top:0}
.sr .ab{font-size:11px;font-weight:500;color:var(--muted);float:right}
.sr .sp{font-size:11.5px;color:var(--muted)}
.sr .hl{font-size:17px;font-weight:500;line-height:1.3;margin:2px 0;text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:3px}
.sr .ds{font-size:13px;color:var(--muted)}
.pv-ads{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:480px}
.ad .ab{font-size:11px;font-weight:500;color:var(--muted);margin-bottom:5px;display:flex;justify-content:space-between}
.ad .pt{font-size:13px;font-weight:500;line-height:1.35;margin-bottom:7px;min-height:2.7em}
.ad .sq{aspect-ratio:1;background:var(--bg);color:var(--fg);position:relative;overflow:hidden;container-type:inline-size}
.ad .sq .art{position:absolute;inset:0;padding:9cqw;display:flex;flex-direction:column;justify-content:flex-end}
.ad .sq .big{font-size:11cqw}
.ad .bt{font-size:12px;border:1px solid var(--rule-strong);padding:5px 8px;margin-top:7px;display:flex;justify-content:space-between}
.ad .bt b{font-weight:500}
.pv-ads .terms{grid-column:1 / -1;font-size:12px;color:var(--muted);border-top:1px solid var(--rule);padding-top:8px}

/* ---------- a week with ai:ing, left to right ---------- */
.week{border-top:1px solid var(--rule);margin-top:clamp(80px,11vw,140px);padding-top:clamp(64px,9vw,112px);padding-bottom:clamp(56px,8vw,96px)}
.wk{margin-top:44px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:8px}
.wk-days{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;font-size:13px;color:var(--muted);font-weight:500}
.wk-track{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:relative;height:22px;align-items:center;margin:6px 0 4px}
.wk-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule-strong)}
.wk-fill{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:0;background:var(--ink);transition:width .6s var(--ease)}
.wk-dot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--rule-strong);transition:background .3s,box-shadow .3s,transform .3s var(--ease)}
.wk-dot.on{background:var(--wash-edge);box-shadow:none;transform:scale(1.35)}
.wk-moments{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;margin-top:10px}
.flow-step{text-align:left;background:none;border:0;border-top:2px solid transparent;border-radius:0;padding:10px 8px 10px 0;cursor:pointer;
  font:inherit;color:var(--muted);transition:color .25s,border-color .25s}
.flow-step:hover{color:var(--ink)}
.flow-step[aria-selected="true"]{color:var(--ink);border-top-color:var(--ink)}
.flow-step[data-i="0"]{grid-column:1}
.flow-step[data-i="1"]{grid-column:2}
.flow-step[data-i="2"]{grid-column:3 / span 4}
.flow-step[data-i="3"]{grid-column:7}
.wk-t{display:block;font-size:12.5px;line-height:1.35}
.wk-n{display:block;font-size:1.0625rem;font-weight:500;line-height:1.3;margin-top:3px;letter-spacing:-.01em}
.flow-in{display:grid;gap:28px;margin-top:36px}
.flow-copy{font-size:clamp(1.125rem,1.7vw,1.3125rem);line-height:1.55;max-width:34rem}
.js .flow-copy:not(.on){display:none}
@media (max-width:899px){
  .wk{column-gap:0}
  .wk-moments{grid-template-columns:1fr 1fr;gap:6px 14px}
  .flow-step[data-i]{grid-column:auto}
  .wk-t{font-size:12px}
  .wk-n{font-size:1rem}
}
.m-ui{border:1px solid var(--rule);padding:20px;font-size:14px;line-height:1.45;background:var(--paper)}
.m-k{font-size:12px;font-weight:500;color:var(--muted)}
.chip{display:inline-block;font-size:12.5px;border:1px solid var(--rule-strong);padding:2px 9px;line-height:1.5}
.m-listen{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;min-height:330px}
.m-src{display:flex;flex-direction:column;gap:8px;overflow:hidden;justify-content:flex-end}
.src-card{border:1px solid var(--rule);padding:9px 11px;font-size:13px;line-height:1.4;animation:appear .45s var(--ease) backwards}
.src-card .sk{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.src-card mark{background:var(--wash);color:inherit;padding:0 2px}
.m-tally ol{list-style:none}
.m-tally li{display:grid;grid-template-columns:1fr auto;gap:10px;padding:7px 0;border-top:1px solid var(--rule);font-size:13.5px;align-items:baseline}
.m-tally li:first-child{border-top:0}
.m-tally li b{font-family:var(--figures);font-weight:500;font-size:15px}
.m-tally li.bump b{animation:bump .5s var(--ease)}
@keyframes bump{30%{color:var(--wash-edge);transform:scale(1.18)}}
.m-tally .bar{grid-column:1 / -1;height:2px;background:var(--rule);position:relative}
.m-tally .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);width:0;transition:width .5s var(--ease)}
.m-write .m-from{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:10px}
.m-write .m-from .m-k{width:3.6em}
.m-n{font-size:12px;color:var(--muted)}
.m-draft{margin-top:14px;min-height:3.2em;font:italic 400 clamp(1.3rem,2.2vw,1.65rem)/1.25 var(--serif);background:#1f3a2d;color:#efe9da;padding:18px 20px}
.m-draft::after{content:"";display:inline-block;width:1px;height:1em;background:currentColor;vertical-align:-3px;margin-left:2px;animation:blink 1s steps(1) infinite}
.m-draft.done::after{display:none}
.m-checks{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:13px}
.m-checks li{display:flex;align-items:center;gap:6px}
.m-checks li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--confirm)}
.m-push{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;border:1px solid var(--rule);padding:10px 12px;font-size:13px;line-height:1.35}
.m-push b{font-weight:500}
.m-dots{width:30px;height:30px;background:#161210;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.m-dots i{width:5px;height:5px;border-radius:50%;background:#f2efec}
.m-when{font-size:12px;color:var(--muted)}
.m-card{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:end;margin-top:12px;background:var(--wash);padding:12px}
.m-tile{aspect-ratio:4/5;padding:9px;display:flex;align-items:flex-end;font:italic 400 15px/1.05 var(--serif)}
.luna-tile{background:#1f3a2d;color:#efe9da}
.m-cap{font-size:12px;color:var(--muted);margin-bottom:10px}
.m-yes{display:inline-block;background:var(--ink);color:var(--paper);font-weight:500;font-size:13px;padding:7px 16px;transition:background .3s,color .3s}
.m-yes.done{background:none;color:var(--confirm);padding-left:0}
.m-rule{margin-top:14px;border-top:1px solid var(--rule);padding-top:12px}
.m-rule p{margin-top:4px}
.m-ledger{display:grid;grid-template-columns:1fr auto;font-family:var(--figures)}
.m-ledger dt,.m-ledger dd{padding:5px 0;border-top:1px solid var(--rule);font-size:13.5px}
.m-ledger dt{font-family:var(--sans);color:var(--muted)}
.m-ledger dd{text-align:right}
.m-ledger dt:first-of-type,.m-ledger dd:first-of-type{border-top:0}
.m-ledger .tot{border-top:1px solid var(--ink);font-weight:500;font-size:17px;color:var(--ink);padding-top:8px}
.m-ledger dt.tot{font-family:var(--sans)}
.js .m-ledger > *{opacity:0;transition:opacity .35s}
.js .m-ledger > .in{opacity:1}
.m-next{margin-top:16px;background:var(--paper-sunk);padding:12px 14px}
.m-next p{margin-top:3px}
/* the open moment: its words beside its screen; without script, all four in turn */
.flow-ui .m-ui + .m-ui{margin-top:16px}
.js .flow-ui .m-ui:not(.on){display:none}
.js .flow-ui .m-ui.on{animation:appear .45s var(--ease)}
@media (min-width:900px){
  .flow-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
  .js .flow-ui{min-height:420px}
  .flow-ui .m-ui{padding:24px}
}
@media (max-width:899px){
  .m-listen{grid-template-columns:1fr;min-height:0}
  .m-src{min-height:250px}
}

/* ---------- sounds like you ---------- */
.voice,.check,.sold{border-top:1px solid var(--rule);padding-top:clamp(64px,9vw,112px);padding-bottom:clamp(56px,8vw,96px)}
.voice{margin-top:clamp(40px,6vw,80px)}
.vz{margin-top:40px;grid-template-columns:1fr;gap:28px}
.js .vz.needs-js{display:grid!important}
@media (min-width:860px){.vz{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
.vz-k{font-size:13px;color:var(--muted);margin-bottom:10px}
.vz-card{position:relative;min-height:168px;border:1px solid var(--rule-strong);padding:26px 26px 22px;background:var(--paper);
  font-size:clamp(1.3rem,2.3vw,1.7rem);font-weight:500;line-height:1.28;letter-spacing:-.015em;touch-action:pan-y;user-select:none;
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;cursor:grab;transition:transform .25s var(--ease)}
.vz-card .vz-n{font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0;font-family:var(--figures)}
.vz-card.say-out{animation:sayOut .38s var(--ease) forwards}
.vz-card.never-out{animation:neverOut .38s var(--ease) forwards}
.vz-card.in{animation:appear .35s var(--ease)}
@keyframes sayOut{to{opacity:0;transform:translateX(60px) rotate(3deg)}}
@keyframes neverOut{to{opacity:0;transform:translateX(-60px) rotate(-3deg)}}
.vz-card.lean-say{box-shadow:inset 0 0 0 1px var(--confirm)}
.vz-card.lean-never{box-shadow:inset 0 0 0 1px var(--caution)}
.vz-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.vz-btns button{font-size:15px;font-weight:500;background:var(--paper);border:1px solid var(--rule-strong);border-radius:0;padding:11px 14px;min-height:46px;cursor:pointer}
.vz-btns button:hover{border-color:var(--ink)}
.vz-btns button:disabled{opacity:.4;cursor:default}
#vzSay{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.vz-hint{font-size:13px;color:var(--muted);margin-top:10px}
@media (hover:none){.vz-hint{display:none}}
/* what any AI writes: small, grey, flat; what the visitor rules out is crossed out in it */
.vz-generic{font-size:15px;line-height:1.5;color:var(--muted);background:var(--paper-sunk);padding:12px 16px;margin-bottom:10px}
.vz-generic span{transition:color .3s,text-decoration-color .3s}
.vz-generic .x{color:var(--rule-strong);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--caution)}
/* what ai:ing writes from the bank: large, in the brand's own paper, ink and type */
.vz-mine{margin-top:22px}
.vz-mine::before{content:"↓";color:var(--wash-edge);margin-right:6px}
.vz-draft{font:var(--style) var(--wt) clamp(1.6rem,2.9vw,2.15rem)/1.2 var(--face);letter-spacing:var(--track);background:var(--bg);color:var(--fg);
  border:1px solid var(--rule);box-shadow:inset 4px 0 0 var(--wash-edge);padding:24px 26px 24px 30px;min-height:4.4em;transition:opacity .25s}
.vz-draft.fade{opacity:0}
.vz-bank{display:flex;gap:18px;font-size:13px;color:var(--muted);margin-top:10px}
.vz-bank b{font-family:var(--figures);font-weight:500;color:var(--ink);margin-right:4px}
.vz-bank b.bump{display:inline-block;animation:bump .5s var(--ease)}
.vz-why{font-size:14px;color:var(--muted);margin-top:8px;min-height:2.8em;max-width:34rem}
.vz-again{margin-top:6px;font-size:14px;font-weight:500;background:var(--paper);border:1px solid var(--rule-strong);border-radius:0;padding:7px 14px;min-height:38px;cursor:pointer}

/* ---------- the wording check ---------- */
.ck{margin-top:40px;max-width:58rem}
.ck-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:12px}
.ck-kind,.pf-sort{display:inline-flex;border:1px solid var(--rule-strong)}
.ck-kind button,.pf-sort button{font-size:14px;font-weight:500;background:var(--paper);border:0;border-radius:0;padding:8px 14px;min-height:40px;cursor:pointer}
.ck-kind button + button,.pf-sort button + button{border-left:1px solid var(--rule-strong)}
.ck-kind button[aria-pressed="true"],.pf-sort button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.ck-verdict{font-weight:500;font-size:15px;display:flex;align-items:center;gap:8px}
.ck-verdict::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.ck-verdict.held{color:var(--caution)}
.ck-verdict.pass{color:var(--confirm)}
.ck-field{position:relative;border:1px solid var(--rule-strong);background:var(--paper)}
.ck-field:focus-within{outline:2px solid var(--ink);outline-offset:-1px}
.ck-back,.ck-field textarea{font:400 clamp(1.1rem,2vw,1.35rem)/1.55 var(--sans);letter-spacing:0;padding:16px 18px;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal}
.ck-back{position:absolute;inset:0;color:var(--ink);overflow:hidden;pointer-events:none}
.ck-back mark{color:inherit;background:var(--wash);text-decoration:underline wavy var(--caution);text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-skip-ink:none}
.ck-back mark.never{background:color-mix(in srgb,var(--caution) 18%,var(--paper))}
.ck-back mark.ok{background:none;color:inherit;text-decoration:underline solid var(--confirm);text-decoration-thickness:2px}
.ck-field textarea{position:relative;display:block;width:100%;min-height:6.2em;background:transparent;color:transparent;border:0;outline:0;resize:none;overflow:hidden;caret-color:var(--ink)}
.ck-field textarea::selection{background:color-mix(in srgb,var(--ink) 18%,transparent);color:transparent}
.ck-hint{font-size:13px;color:var(--muted);margin-top:10px}
.ck-hits{list-style:none;margin-top:18px;display:grid;gap:0}
.ck-hits li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:12px 0;border-top:1px solid var(--rule)}
.ck-hits li.appear{animation:appear .35s var(--ease) backwards}
.ck-hits .ph{font-weight:500}
.ck-hits .tp{display:block;font-size:13px;color:var(--muted);font-weight:400}
.ck-hits .tp.never{color:var(--caution)}
.ck-hits button{font-size:13px;font-weight:500;background:var(--paper);border:1px solid var(--rule-strong);border-radius:0;padding:6px 12px;min-height:36px;cursor:pointer;text-align:left;max-width:20rem}
.ck-hits button:hover{border-color:var(--ink)}
.ck-hits li.okay .ph{color:var(--confirm)}
@media (max-width:620px){.ck-hits li{grid-template-columns:1fr}.ck-hits button{justify-self:start}}

/* ---------- what sold: the page's centrepiece, the claim on the left, the proof beside it ---------- */
.pf{margin-top:40px}
@media (min-width:1200px){
  .sold{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);grid-template-rows:auto 1fr;gap:0 64px;align-items:start}
  .sold h2,.sold .lede{grid-column:1}
  .sold .pf{grid-column:2;grid-row:1 / span 2;margin-top:6px}
  .sold h2.big{font-size:clamp(2.2rem,3.6vw,3.25rem)}
}
.pf-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:16px}
.pf-k{font-size:13px;color:var(--muted)}
.pf-list{list-style:none;border-top:1px solid var(--rule)}
.pf-list > li{border-bottom:1px solid var(--rule);position:relative;background:var(--paper)}
.pf-row{display:grid;grid-template-columns:40px minmax(0,1fr) 6.5rem 4.5rem 7.5rem 20px;gap:14px;align-items:center;width:100%;background:none;border:0;
  border-radius:0;padding:12px 4px;text-align:left;cursor:pointer}
.pf-row:hover{background:var(--paper-sunk)}
.pf-row .th{width:40px;height:50px;font-size:7.5px}
.pf-row .th.tall{width:32px;height:56px;margin-left:4px}
.pf-t b{display:block;font-weight:500;font-size:15px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-t span{font-size:12.5px;color:var(--muted)}
.pf-n{text-align:right;font-family:var(--figures);font-size:15px}
.pf-n small{display:block;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.pf-n.kept{font-weight:500}
.pf-n.loss{color:var(--caution)}
.pf-row .chev{width:9px;height:9px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .25s}
.pf-row[aria-expanded="true"] .chev{transform:rotate(225deg)}
.pf-bar{position:absolute;left:58px;bottom:-1px;height:3px;background:var(--rule-strong);transition:width .6s var(--ease),background .3s}
.pf-list:not(.by-likes) .pf-bar{background:var(--ink)}
.pf-list .pf-bar.loss{background:var(--caution)}
.pf-cost{display:none;padding:4px 4px 16px 58px}
.pf-row[aria-expanded="true"] + .pf-cost{display:block;animation:appear .35s var(--ease)}
.pf-cost dl{display:grid;grid-template-columns:1fr auto;max-width:26rem;font-size:13.5px}
.pf-cost dt,.pf-cost dd{padding:4px 0;border-top:1px solid var(--rule)}
.pf-cost dt{color:var(--muted)}
.pf-cost dd{text-align:right;font-family:var(--figures)}
.pf-cost dt:first-of-type,.pf-cost dd:first-of-type{border-top:0}
.pf-cost .tot{border-top:1px solid var(--ink);font-weight:500;color:var(--ink)}
.pf-next{margin-top:20px;background:var(--paper-sunk);padding:16px 18px;max-width:46rem}
.pf-next .m-k{display:block;margin-bottom:3px}
@media (max-width:700px){
  .pf-row{grid-template-columns:34px minmax(0,1fr) 5.4rem 16px;gap:10px}
  .pf-row .th{width:34px;height:42px}
  .pf-row .th.tall{width:28px;height:48px;margin-left:3px}
  .pf-n.likes-n,.pf-n.orders-n{display:none}
  .pf-list.by-likes .pf-n.likes-n{display:block}
  .pf-list.by-likes .pf-n.kept{display:none}
  .pf-bar{left:48px}
  .pf-cost{padding-left:48px}
}

/* ---------- what it will never do ---------- */
.wont{border-top:1px solid var(--rule);padding-top:clamp(64px,9vw,112px);padding-bottom:clamp(56px,8vw,96px)}
.nv{list-style:none;margin-top:36px;max-width:58rem;counter-reset:nv}
.nv li{position:relative;padding:18px 0 18px 3.2rem;border-top:1px solid var(--rule);color:var(--muted);counter-increment:nv}
.nv li:last-child{border-bottom:1px solid var(--rule)}
.nv li::before{content:counter(nv,decimal-leading-zero);position:absolute;left:0;top:21px;font:500 .875rem/1 var(--figures);color:var(--wash-edge)}
.nv b{display:block;font-size:clamp(1.25rem,2.2vw,1.625rem);font-weight:500;letter-spacing:-.015em;line-height:1.25;color:var(--ink);margin-bottom:6px}
.covers{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:36px;max-width:58rem;font-size:.875rem;color:var(--muted)}
.covers span{white-space:nowrap}
.covers span + span::before{content:"·";margin:0 10px;color:var(--rule-strong)}
@media (max-width:620px){.covers span{white-space:normal}.nv li{padding-left:2.4rem}}

/* ---------- the last band: the price, the other way round ---------- */
.join{--jb:#161210;--jt:#ffffff;--jf:#ffffff;--jft:#161210;--jbtn:var(--wash);--jbtnt:#161210;--jline:#ffffff;
  background:var(--jb);color:var(--jt);padding:clamp(64px,9vw,120px) 0 clamp(64px,9vw,112px)}
@media (prefers-color-scheme:dark){.join{--jb:#1d1a18;--jt:#f2efec;--jf:#0f0f10;--jft:#f2efec;--jbtn:#eaa87d;--jbtnt:#161210;--jline:#6b645d}}
.join h2.big{color:var(--jt);max-width:16ch}
.join .btn{color:var(--jbtnt);background:var(--jbtn);border-color:var(--jbtn)}
.join .lede{color:color-mix(in srgb,var(--jt) 78%,transparent)}
.join-form,.join-done{margin-top:32px;max-width:40rem}
.join-line{display:flex;gap:0}
.join-line input{flex:1;min-width:0;font:inherit;font-size:1.0625rem;color:var(--jft);background:var(--jf);border:1px solid var(--jline);
  border-radius:0;padding:12px 14px;min-height:52px}
.join-line button{flex:none;font:inherit;font-weight:500;font-size:1rem;color:var(--jbtnt);background:var(--jbtn);border:1px solid var(--jline);
  border-left:0;border-radius:0;padding:12px 22px;min-height:52px;cursor:pointer}
.join-line button:hover{opacity:.9}
.join-line button:disabled{opacity:.6;cursor:default}
.join-line input:focus-visible,.join-line button:focus-visible{outline:2px solid var(--wash-edge);outline-offset:2px}
@media (max-width:520px){.join-line{flex-direction:column;gap:8px}.join-line button{border-left:1px solid var(--jline)}}
.join-msg{min-height:1.5em;margin-top:10px;font-size:.9375rem;color:color-mix(in srgb,var(--jt) 78%,transparent)}
.join-msg.err{color:var(--wash-edge)}
.join-more{margin-top:8px;max-width:40rem}
.join-more summary{cursor:pointer;font-size:.9375rem;font-weight:500;list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.join-more summary::-webkit-details-marker{display:none}
.join-more summary::before{content:"+";font:500 1.125rem/1 var(--figures);width:1em;text-align:center}
.join-more[open] summary::before{content:"−"}
.join-more summary span{font-weight:400;color:color-mix(in srgb,var(--jt) 65%,transparent)}
.join-more label{display:block;font-size:.875rem;font-weight:500;margin:10px 0 6px}
.join-row{display:grid;gap:0 16px}
@media (min-width:640px){.join-row{grid-template-columns:1fr 1fr}}
.join-more input,.join-more textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:1rem;font-weight:400;color:var(--jft);
  background:var(--jf);border:1px solid var(--jline);border-radius:0;padding:10px 12px}
.join-more textarea{resize:vertical;min-height:3.4em;line-height:1.45}
.join-more input:focus-visible,.join-more textarea:focus-visible{outline:2px solid var(--wash-edge);outline-offset:2px}
.join-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.join-fine{font-size:.8125rem;margin-top:18px;color:color-mix(in srgb,var(--jt) 65%,transparent)}
.join-fine a{color:inherit;text-decoration-color:currentColor}
.join-done{font-size:1.125rem}
.join-done-h{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:500;letter-spacing:-.02em;color:var(--jt)}
.join-done p + p{margin-top:6px;color:color-mix(in srgb,var(--jt) 78%,transparent)}

/* footer, legal pages */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:28px;padding-bottom:40px;
  border-top:1px solid var(--rule);font-size:.875rem;color:var(--muted)}
.join + .foot,main:has(> .join:last-child) + .foot{border-top:0}
.foot nav{display:flex;gap:20px}
.legal{padding-top:clamp(40px,7vw,88px);padding-bottom:88px}
.legal > *{max-width:46rem}
.legal h1{font-size:clamp(2rem,4.5vw,2.75rem);max-width:none}
.legal h2{margin-top:36px;font-size:1.0625rem;color:var(--ink)}
.legal h2::before{content:none}
.legal p,.legal li{margin-top:12px}
.legal ul,.legal ol{padding-left:1.1em}
.legal h3{margin-top:24px;font-size:1rem;color:var(--ink)}
.legal .stamp{margin-top:8px;color:var(--muted)}
.legal .keys{margin-top:28px;padding:20px 24px 24px;border:1px solid var(--rule-strong);border-radius:12px}
.legal .keys h2{margin-top:0}
.legal .keys li{margin-top:10px}
.legal .n{font-variant-numeric:tabular-nums;color:var(--muted);margin-right:.35em}

/* ---------- the stage on narrow screens: the open item first, the rail as a strip ---------- */
@media (max-width:1060px){
  .s-body{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .s-rail{display:none}
  .s-main{border-left:0}
}
@media (max-width:720px){
  .stage{height:auto}
  .s-band{gap:10px;padding:0 12px;height:52px}
  .s-time{display:none}
  .s-brand{padding-left:10px;font-size:16px}
  .s-body{grid-template-columns:1fr;grid-template-rows:auto auto}
  .s-main{padding:14px 14px 16px}
  .s-pv{flex:none;container-type:inline-size}
  .pv-post{height:min(420px,112cqw)}
  .pv-reel{height:min(470px,150cqw)}
  .pv-mail,.pv-li,.pv-reply,.pv-search{max-height:none}
  .s-wait .long{display:none}
  :root .s-wait.none{display:none}
  .s-brand{display:none}
  .biz{padding-left:10px;gap:6px}
  .biz button,.biz .b-mark{width:26px;height:26px}
  .s-stop{flex:none}
  .s-side{border-left:0;border-top:1px solid var(--rule);padding:16px 14px 18px;min-height:300px}
  .s-halt{inset:52px 0 0 0}
  .pv-ads{gap:10px}
  .ad .pt{font-size:12px}
}
@media (max-width:420px){.s-wm{height:18px}.s-wait{padding:4px 8px}.s-wait .mid{display:none}.s-band{gap:8px}.biz{padding-left:8px;gap:5px}.biz button,.biz .b-mark{width:24px;height:24px}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}