/* Homepage styles 4/5: section system, thesis band, features, two-column blocks, the three section panels, the Team & Studio showcase and the lit bands. */
/* ─── SECTION SYSTEM ──────────────────── */
section{padding:5rem 0;position:relative}
@media(max-width:600px){section{padding:3.4rem 0}}   /* phones: the sections sit closer */
.section-divider{max-width:1080px;margin:0 auto;border-top:1px solid var(--border)}
h2.sect{font-size:1.8rem;font-weight:700;color:var(--text-bright);line-height:1.18;letter-spacing:-0.02em;margin-bottom:.9rem;max-width:22em}
h2 .hl{color:var(--accent)}
.sect-sub{color:var(--text-dim);font-size:.98rem;margin-bottom:2.4rem;max-width:38em}
.sect-sub strong{color:var(--text-bright);font-weight:600}
.sect-sub a{color:var(--accent);font-weight:600;text-decoration:none}
.sect-sub a:hover{text-decoration:underline}

/* ─── THESIS BAND (bridge into the own-your-storage half) ─── */
.thesis{padding:5.5rem 2rem;text-align:center}
@media(max-width:600px){.thesis{padding:3.6rem .5rem}}
.thesis h2{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;color:var(--text-bright);line-height:1.25;letter-spacing:-0.02em;max-width:19em;margin:0 auto}
.thesis h2 span{color:var(--accent)}
.thesis-compare{margin-top:1.4rem;font-size:.88rem;color:var(--text-dim)}
.thesis-compare a{color:var(--accent);text-decoration:none}
.thesis-compare a:hover{color:var(--accent-hover)}
.thesis-compare .dot-sep{margin:0 .5rem}

/* ─── FEATURES ────────────────────────── */
.feature-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.2rem}
@media(max-width:760px){.feature-grid{grid-template-columns:1fr 1fr}}
.feature-item{padding:1.4rem;background:var(--bg2);border:1px solid var(--border);border-radius:10px;transition:border-color .2s}
.feature-item:hover{border-color:#3a3d40}
.feature-item h3{font-size:.98rem;font-weight:600;color:var(--text-bright);margin-bottom:.45rem}
.feature-item p{font-size:.86rem;color:var(--text-dim);line-height:1.6}
.feature-item .f-short{display:none}
/* phones: compact tiles two across, each carrying its short line instead of the full sentence */
@media(max-width:560px){
  .feature-grid{gap:.6rem}
  .feature-item{padding:.85rem .9rem;border-radius:9px}
  .feature-item h3{font-size:.86rem;line-height:1.3;margin-bottom:.3rem}
  .feature-item p{display:none}
  .feature-item p.f-short{display:block;font-size:.78rem;line-height:1.5}
}
@media(max-width:350px){.feature-grid{grid-template-columns:1fr}}

/* ─── TWO-COLUMN BLOCKS ───────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:2rem}.split.flip>div:first-child{order:2}}
.split h2{font-size:1.7rem;font-weight:700;color:var(--text-bright);line-height:1.16;margin-bottom:1rem;letter-spacing:-0.02em}
.split p{color:var(--text-dim);font-size:1rem;margin-bottom:1rem;max-width:34em}
.split ul{list-style:none;margin:1.4rem 0 0}
.split li{padding:.8rem 0 .8rem 1.5rem;position:relative;color:var(--text);font-size:.92rem;border-top:1px solid var(--border)}
.split li:first-child{border-top:none}
.split li::before{content:'';position:absolute;left:2px;top:1.15rem;width:7px;height:7px;border-radius:2px;background:var(--accent)}
.split li span{color:var(--text-dim)}
.storage{margin-top:1.2rem!important;font-size:.86rem;color:var(--text-dim);border-left:2px solid var(--border);padding-left:.9rem;max-width:34em}
.plink{color:var(--accent);text-decoration:none}
.plink:hover{color:var(--accent-hover);text-decoration:underline}

/* diagram card */
.panel{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:1.6rem}
@media(max-width:420px){.panel:not(.is-mini){padding:1.1rem}}
/* phones: an element marked data-mini keeps the layout of the width it names and is scaled down
   to fit (script: "shrink to fit"); the slot around it holds the scaled height */
.mini-slot{min-width:0}
.mini-slot > .is-mini{transform-origin:0 0;margin:0}
.drive{display:flex;align-items:center;gap:12px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:16px}
.drive .di{width:34px;height:34px;border-radius:8px;background:var(--accent-soft);border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:16px;flex:0 0 auto}
.drive b{font-size:.88rem;color:var(--text-bright);overflow-wrap:anywhere}   /* a long file name wraps before it widens the page */
.drive small{display:block;color:var(--text-dim);font-family:var(--mono);font-size:11px}

/* sendbox */
.zip{background:var(--bg3);border:1px solid var(--border);border-radius:11px;overflow:hidden}
.ziphead{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.ziphead .zipic{width:34px;height:34px;border-radius:8px;background:var(--accent-soft);border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:16px;flex:0 0 auto}
.ziphead b{font-size:.88rem;color:var(--text-bright);overflow-wrap:anywhere}
.ziphead small{display:block;color:var(--text-dim);font-family:var(--mono);font-size:11px}
.zipbody{padding:8px 16px 14px}
.zline{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:.85rem;border-top:1px solid var(--border)}
.zline:first-child{border-top:none}
.zline .zi{color:var(--accent);width:16px;text-align:center;font-size:12px}
.zline .zt{color:var(--text-dim);font-size:11px;margin-left:auto;font-family:var(--mono)}

/* ─── THE THREE SECTION PANELS: shared drive, cloud drive, sending ───
   Small animated replicas beside the copy (the /team page's demo pattern): each plays while on
   screen, reduced motion shows its finished frame, and every element holds its space from the
   first frame - things fade, draw and travel, nothing changes size - so a panel never moves the
   page. Person colours match the reviewer palette the library replica uses. */
.sv{container:sv/inline-size;position:relative;overflow:hidden}   /* narrow layouts follow the panel's own width (see data-mini) */
.sv-cap{text-align:center;color:var(--text-dim);font-size:11px;font-family:var(--mono);margin:12px 0}
.sv .sv-swap{display:grid}   /* two classes deep: a host rule like .ziphead small{display:block} must not win */
.sv .sv-swap > *{grid-area:1/1;visibility:hidden}
.sv .sv-swap > .on{visibility:inherit}

/* shared drive: the folder on the NAS, then one timeline in the app */
.fx{border:1px solid var(--border);border-radius:10px;background:var(--bg3);overflow:hidden}
.fx-bar{display:flex;align-items:center;gap:11px;padding:10px 12px;border-bottom:1px solid var(--border);background:#23272a}
.fx-ic{width:28px;height:28px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:7px;background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent);font-size:13px}
.fx-bar b{display:block;font-size:.84rem;color:var(--text-bright)}
.fx-bar small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--text-dim)}
.fx-tree{padding:7px 0;font-family:var(--mono);font-size:11px;color:var(--text-dim)}
.fx-r{display:flex;align-items:center;gap:7px;height:22px;padding:0 12px 0 calc(12px + var(--d,0) * 14px);white-space:nowrap;overflow:hidden;transition:background-color .35s}
.fx-r > span{overflow:hidden;text-overflow:ellipsis}
.fx-r i{position:relative;flex:0 0 auto}
.fx-r i.fo{width:12px;height:9px;margin-top:2px;border-radius:2px;background:#5b6068}
.fx-r i.fo::before{content:"";position:absolute;left:0;top:-2px;width:5px;height:3px;border-radius:1px 1px 0 0;background:#5b6068}
.fx-r i.fl{width:9px;height:11px;border:1.2px solid #5b6068;border-radius:1.5px}
.fx-r .fm{flex:0 0 auto;margin-left:auto;padding-left:10px;font-size:10px}
.fx-r.nf .fn{color:var(--text);transition:color .35s}
.fx-r.nf.hot{background:var(--cs)}
.fx-r.nf.hot .fn,.fx-r.nf.hot .fm{color:var(--c)}
.tl{margin-top:2px;padding:11px 12px 12px;border:1px solid #292b2f;border-radius:10px;background:#17181b;color:#e6e8ec}
.tl-head{display:flex;align-items:center;gap:8px;font-size:12.5px;white-space:nowrap}
.tl-head b{font-weight:600}
.tl-v{padding:0 6px;border:1px solid #292b2f;border-radius:5px;font-size:10.5px;color:#8a909c}
.tl-env{min-width:0;overflow:hidden;text-overflow:ellipsis;margin-left:auto;padding:2px 8px;border:1px solid #292b2f;border-radius:6px;background:#1d1e22;font-size:10.5px;color:#8a909c}
.tl-track{position:relative;height:6px;margin:38px 0 13px;border-radius:3px;background:#222428}
.tl-played{position:absolute;left:0;top:0;bottom:0;width:42%;border-radius:3px;background:#6d4250}
.tl-mk{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--c);border:2px solid #0b0c0d;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.tl-mk.on{transform:scale(1)}
.tl-tip{position:absolute;left:0;bottom:15px;max-width:100%;padding:5px 9px;border:1px solid #292b2f;border-left:3px solid var(--c,#d98fa6);border-radius:7px;background:#222428;font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;pointer-events:none}
.tl-tip.on{opacity:1;transform:none}
.tl-tip b{margin-right:5px;color:var(--c,#d98fa6);font-weight:600}
.tl-foot{display:flex;align-items:center;gap:6px 13px;flex-wrap:wrap;font-size:11.5px;color:#8a909c}
.tl-who{display:flex;align-items:center;gap:6px;transition:color .3s}
.tl-who i{width:20px;height:20px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--c);color:#241016;font-style:normal;font-size:8.5px;font-weight:700;transition:box-shadow .3s}
.tl-who.hot{color:#e6e8ec}
.tl-who.hot i{box-shadow:0 0 0 3px var(--cs)}
.tl-ct{margin-left:auto;font-family:var(--mono);font-size:10.5px}

/* cloud drive: two ReviewDeck windows in two cities, one synced folder above them */
.cl-cloud{display:flex;align-items:center;gap:11px;width:fit-content;max-width:100%;margin:0 auto;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg3)}
.cl-ic{width:28px;height:28px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:7px;background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent)}
.cl-ic svg{width:16px;height:16px}
.cl-id{min-width:0}
.cl-id b{display:block;font-size:.84rem;color:var(--text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* one line whatever the cloud: the name changes each loop */
.cl-id small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-state{flex:0 0 auto;padding:2px 9px;border:1px solid rgba(127,184,154,.45);border-radius:20px;font-size:10.5px;color:var(--green);white-space:nowrap;transition:color .3s,border-color .3s}
.cl-state.busy{border-color:var(--accent);color:var(--accent)}
@container sv (max-width:262px){.cl-cloud{gap:6px;padding:9px}.cl-ic{width:22px;height:22px}.cl-ic svg{width:13px;height:13px}.cl-state{padding:2px 7px}}   /* every cloud's name still fits */
.cl-wires{position:relative;height:40px}
.cl-wires i{position:absolute;border:0 dashed #3d4247}
.cl-wires .cl-stem{left:50%;top:0;height:16px;border-left-width:1.5px}
.cl-wires .cl-arm{top:16px;bottom:0;left:calc((100% - 14px) / 4);right:calc((100% - 14px) / 4);border-width:1.5px 1.5px 0;border-radius:10px 10px 0 0}   /* legs land on the two windows' centres (14px = the .cl-macs gap) */
.cl-tok,.sd-tok{position:absolute;left:0;top:0;z-index:4;padding:3px 9px;border-radius:20px;background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-size:10.5px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.cl-macs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.cl-mac{min-width:0;overflow:hidden;border:1px solid #292b2f;border-radius:10px;background:#0b0c0d;color:#e6e8ec;font-size:11px}
.cl-mbar{display:flex;align-items:baseline;gap:6px;padding:7px 9px;border-bottom:1px solid #292b2f;background:#17181b;white-space:nowrap}
.cl-mbar b{font-size:11.5px;font-weight:600}
.cl-mbar small{overflow:hidden;text-overflow:ellipsis;color:#8a909c;font-size:10px}
.cl-mbody{padding:8px 9px 10px}
.cl-ttl{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;font-weight:600;white-space:nowrap}
.cl-ttl > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cl-track{position:relative;height:5px;margin:11px 0 9px;border-radius:3px;background:#222428}
.cl-track .mk{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--c);border:2px solid #0b0c0d}
.cl-track .mk.new{transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.cl-track .mk.new.on{transform:scale(1)}
.cl-n{display:flex;gap:6px;margin-top:5px;padding:4px 0 4px 7px;border-left:2px solid var(--c);border-radius:0 5px 5px 0;white-space:nowrap;overflow:hidden;color:#c9ccd2;transition:opacity .35s,transform .35s,background-color .8s}
.cl-n b{flex:0 0 auto;color:var(--c);font-weight:600}
.cl-n span{overflow:hidden;text-overflow:ellipsis}
.cl-n.new{opacity:0;transform:translateX(-6px)}
.cl-n.new.on{opacity:1;transform:none}
.cl-n.fresh{background:rgba(121,200,121,.13)}
/* each machine's synced folder, between the cloud and the app that reads it: the notes are files */
.cl-fold{padding:6px 8px 4px;border-bottom:1px solid #292b2f;background:#101113;font-family:var(--mono);font-size:10px;color:#8a909c}
.cl-fpath{display:flex;align-items:center;gap:6px;margin:0 0 3px 2px;font-size:9px;color:#5a606c;white-space:nowrap;overflow:hidden}
.cl-fpath span{overflow:hidden;text-overflow:ellipsis}
.cl-fpath i{position:relative;flex:0 0 auto;width:11px;height:8px;margin-top:2px;border-radius:2px;background:#5b6068}
.cl-fpath i::before{content:"";position:absolute;left:0;top:-2px;width:5px;height:3px;border-radius:1px 1px 0 0;background:#5b6068}
.cl-f{display:flex;align-items:center;gap:6px;height:17px;padding:0 4px 0 17px;transition:color .4s}
.cl-f span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-fg{border-radius:4px;transition:background-color .4s}                  /* sam.json and the change inside it */
.cl-fg.hot{background:rgba(121,200,121,.12)}
.cl-fg.hot .cl-f{color:#e6e8ec}
.cl-f .st{position:relative;flex:0 0 auto;width:10px;height:10px}
.cl-f .st.ok::after{content:"";position:absolute;left:3px;top:0;width:3px;height:6.5px;border:solid #5FB87A;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.cl-f .st.sync{border:1.5px solid var(--accent);border-right-color:transparent;border-radius:50%;animation:cl-spin .8s linear infinite}
@keyframes cl-spin{to{transform:rotate(360deg)}}
/* the change inside sam.json, shown while the file is written and synced (its line is always reserved,
   last in the folder, so showing it never changes the panel's height) */
.cl-chg{display:flex;align-items:center;gap:5px;height:14px;padding:0 4px 1px 21px;font-size:9.5px;color:#79C879;white-space:nowrap;overflow:hidden;opacity:0;transform:translateY(-3px);transition:opacity .3s,transform .3s}
.cl-chg span{overflow:hidden;text-overflow:ellipsis}
.cl-chg.on{opacity:1;transform:none}
.cl-f .st.edited::after{content:"";position:absolute;left:2.5px;top:2.5px;width:5px;height:5px;border-radius:50%;background:var(--accent)}   /* changed, not yet synced */
.cl-app{margin-bottom:5px;font-size:9px;font-weight:700;letter-spacing:.2px;color:#8a909c}
.cl-app span{color:var(--accent)}
.cl .sv-cap{margin-bottom:0}
/* a narrow panel: the two windows are narrow, so the folder strip drops its indent and the change
   lines up under the file name, its + in the gutter */
@container sv (max-width:321px){
  .cl-fold{padding:6px 5px 4px}
  .cl-f{padding:0 3px 0 9px}
  .cl-chg{gap:3px;padding:0 3px 1px 0}
  .cl-chg b{flex:0 0 6px}
}

/* sending: the .rdeck packs, travels to a phone on the portal, and the feedback file comes back */
.sd{--rd-b:#0b0c0d;--rd-p:#17181b;--rd-p2:#1d1e22;--rd-p3:#222428;--rd-ln:#292b2f;--rd-tx:#e6e8ec;--rd-mu:#8a909c;--rd-ft:#5a606c;--rd-ac:#d98fa6;--rd-on:#241016;--rd-rose:#6d4250;
  position:relative;display:flex;align-items:center;gap:18px}
.sd-l{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:12px}
.sd-r{flex:0 0 auto}
.sd-pack .zline{opacity:.2;transition:opacity .3s}
.sd-pack .zline.in{opacity:1}
.sd-bar{height:4px;margin-top:10px;overflow:hidden;border-radius:2px;background:var(--border)}
.sd-bar i{display:block;height:100%;background:var(--accent);transform-origin:0 50%}
.sd .drive{margin:0}
.sd .ziphead b,.sd .drive b{font-size:.84rem;overflow-wrap:normal}   /* file names break only at their <wbr> joins */
.sd-back{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.sd-back.on,.sd-toast.on{opacity:1;transform:none}
.sd-back .di{border-color:var(--green);background:rgba(127,184,154,.12);color:var(--green)}
.sd-toast{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border:1px solid #292b2f;border-left:3px solid #5fb87a;border-radius:9px;background:#222428;color:#e6e8ec;font-size:11.5px;line-height:1.4;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.ph.ph-sm{width:168px;padding:3px;border-radius:25px}
.ph.ph-sm::before{top:8px;width:52px;height:15px;margin-left:-26px;border-radius:8px}
.ph-sm .ph-screen{height:357px;border-radius:22px}
.ph-sm .ph-inner{transform:scale(.432);transition:opacity .45s}   /* 162px screen / the portal's 375px phone layout */
.ph-sm .ph-inner.hide{opacity:0}
.sl-card{padding:92px 30px 0;text-align:center}
.sl-brand{font-size:22px;font-weight:700;letter-spacing:-.01em}
.sl-brand small{margin-left:7px;color:var(--rd-mu);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.6px}
.sl-card h5{margin:44px 0 14px;font-size:27px;font-weight:700;letter-spacing:-.02em}
.sl-card p{color:var(--rd-mu);font-size:16px;line-height:1.5}
.sl-card p b{font-family:var(--mono);font-weight:500;color:var(--rd-tx)}
.sl-btn{display:inline-block;margin:26px 0 30px;padding:13px 24px;border-radius:9px;background:var(--rd-ac);color:var(--rd-on);font-size:16px;font-weight:600}
.sl-card .sl-priv{font-size:14px}
.sl-priv i{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#7fb89a}
.sd .pt-btn{transition:transform .15s,filter .15s}
.sd .pt-btn.press{transform:scale(.94);filter:brightness(1.15)}
.sd-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sd-ring ellipse{fill:none;stroke:#FF3B30;stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.sd .pt-note.ctx .tc{color:var(--rd-mu)}
.sd .pt-note.ctx small{display:block;margin-bottom:2px;color:#d98fa6;font-size:12px;font-weight:600}
.sd .pt-note.new{opacity:0;transform:translateY(-10px);transition:opacity .4s,transform .4s}
.sd .pt-note.new.on{opacity:1;transform:none}
.sd .pt-mk.new{transform:translateX(-4px) scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.sd .pt-mk.new.on{transform:translateX(-4px) scale(1)}
.sd-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:18px;color:var(--text-dim);font-size:.8rem}
.sd-steps span{display:inline-flex;align-items:center;gap:7px;transition:color .3s}
.sd-steps b{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:var(--bg3);font-size:.66rem;transition:background-color .3s,border-color .3s,color .3s}
.sd-steps span.on{color:var(--text-bright)}
.sd-steps span.on b{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
@container sv (max-width:400px){
  .sd{flex-direction:column;align-items:stretch;gap:12px}
  .sd-l{display:contents}
  .sd-pack{order:1}.sd-r{order:2;display:flex;justify-content:center}.sd-back{order:3}.sd-toast{order:4}
}
/* Team & Studio showcase: ReviewDeck worn by four made-up game studios, cycling on its own - the
   app, two reviewers' phones (the web portal, each copy with its own burned-in mark), then the PDF
   notes. The app is the same .rd-app replica as the demos above; the phones copy the portal's
   phone layout (ReviewDeck_Portal/src/portal.css at max-width 900px + touch); the PDF copies
   exportNotes.js. Colours = full Team brand themes (every token, text included, as the Branding
   window allows), each passing its contrast check. The script sets the --rd-* tokens. */
.bshow-stage{container:bstage/inline-size;display:grid;align-items:center}
.bslide{grid-area:1/1;min-width:0;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .6s}
.bslide.out-right{opacity:0;transform:translateX(6%);pointer-events:none}
.bslide.out-left{opacity:0;transform:translateX(-6%);pointer-events:none}
.bshow-cap{text-align:center;margin-top:1.2rem;font-size:.86rem;color:var(--text-dim);min-height:1.5em;transition:opacity .25s}
.bshow-cap b{color:var(--text-bright);font-weight:600}
.bshow .rd-app,.bshow .rd-app *,.ph,.ph *,.bpdf .band,.bpdf .band *,.bpdf .num{transition:background-color .6s,border-color .6s,color .6s}
/* two phones: the web portal as each reviewer opens their own copy. Each screen is built at a
   real phone's 375px width with the portal's own phone + touch sizes (48px play, 44px tool
   buttons, 15px timecode), then scaled to the frame, so it reads exactly like the portal. */
.phones{display:flex;justify-content:center;align-items:flex-start;gap:48px}
.ph{flex:0 0 auto;width:276px;padding:4px;border-radius:37px;background:#060607;position:relative;box-shadow:0 0 0 1px #34373c,0 30px 70px rgba(0,0,0,.6)}   /* a thin modern bezel: the screen runs nearly edge to edge */
.ph + .ph{margin-top:40px}
.ph::before{content:"";position:absolute;top:14px;left:50%;width:84px;height:23px;margin-left:-42px;border-radius:13px;background:#000;z-index:5}
.ph-screen{position:relative;height:590px;border-radius:33px;overflow:hidden;background:var(--rd-b)}
.ph-inner{position:absolute;left:0;top:0;width:375px;height:826px;transform:scale(.7147);transform-origin:0 0;color:var(--rd-tx);font-size:14px;line-height:1.4}
.ph-status{display:flex;justify-content:space-between;align-items:center;height:47px;padding:0 32px;font-size:15px;font-weight:600;background:var(--rd-p)}
.ph-status i{position:relative;width:25px;height:12px;border:1.5px solid currentColor;border-radius:4px;opacity:.85}
.ph-status i::after{content:"";position:absolute;top:2px;bottom:2px;left:2px;right:6px;border-radius:1px;background:currentColor}
.pt-hdr{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--rd-p);border-bottom:1px solid var(--rd-ln)}
.pt-brand{display:flex;align-items:center;gap:8px;min-width:0;font-weight:600}
.pt-brand svg{height:20px;width:auto;display:block;flex:0 0 auto}
.pt-brand small{color:var(--rd-mu);font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.6px}
.pt-btn{flex:1 1 auto;min-height:44px;display:flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:7px;background:var(--rd-ac);color:var(--rd-on);font-weight:600;white-space:nowrap}
.pt-view{position:relative;height:211px;background:#000;overflow:hidden}
.pt-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pt-wm{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:rgba(255,255,255,.42);text-shadow:0 1px 3px rgba(0,0,0,.35);pointer-events:none}
.pt-wm b{font-size:25px;font-weight:800;line-height:1.1}
.pt-wm > span{font-family:var(--mono);font-size:10.5px;margin-top:4px;white-space:nowrap}
.pt-tr{padding:8px 12px 12px;background:var(--rd-p);border-top:1px solid var(--rd-ln)}
.pt-scrubwrap{height:34px;display:flex;align-items:flex-end}
.pt-scrub{position:relative;width:100%;height:6px;border-radius:3px;background:var(--rd-p2)}
.pt-played{position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:3px;background:var(--rd-rose)}
.pt-mk{position:absolute;top:-2px;width:9px;height:9px;border-radius:50%;background:var(--rd-ac);border:2px solid var(--rd-b);transform:translateX(-4px)}
.pt-head{position:absolute;left:38%;top:-5px;width:3px;height:16px;border-radius:2px;background:var(--rd-ac);transform:translateX(-1px)}
.pt-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.pt-row > span,.pt-step > span{display:flex;align-items:center;justify-content:center;background:var(--rd-p2);border:1px solid var(--rd-ln);border-radius:8px}
.pt-row svg{width:16px;height:16px;display:block}
.pt-row > .pt-play{width:48px;height:48px;border-radius:50%}
.pt-play svg{width:15px;height:15px;margin-left:2px}
.pt-row > .pt-step{display:inline-flex;overflow:hidden}
.pt-step > span{width:48px;height:44px;border:0;border-radius:0;background:none}
.pt-step > span + span{border-left:1px solid var(--rd-ln)}
.pt-row > .pt-tc{background:none;border:0;font-family:var(--mono);font-size:15px;letter-spacing:.5px;white-space:nowrap}
.pt-tc small{font-size:11px;color:var(--rd-mu);margin-left:6px}
.pt-ctl > span{width:44px;height:44px}
.pt-tools{gap:6px}
.pt-tools > span{flex:1 1 0;min-width:0;height:44px;border-radius:7px}
.pt-tools > span.on{background:var(--rd-ac);border-color:var(--rd-ac);color:var(--rd-on)}
.pt-tools b{font-size:14px}
.pt-tools i{width:16px;height:16px;border-radius:4px;background:#FF3B30;border:1px solid rgba(255,255,255,.25)}
.pt-aside{background:var(--rd-p);border-top:1px solid var(--rd-ln)}
.pt-phead{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--rd-ln);font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--rd-mu)}
.pt-phead b{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:0}
.pt-rbar{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--rd-ln)}
.pt-field{flex:1 1 0;min-width:0}
.pt-field small{display:block;margin-bottom:3px;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--rd-mu)}
.pt-field span{display:block;padding:6px 9px;border-radius:7px;background:var(--rd-p2);border:1px solid var(--rd-ln);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-note{padding:11px 16px;border-bottom:1px solid var(--rd-ln)}
.pt-note .tc{display:block;margin-bottom:2px;font-family:var(--mono);font-size:12px;color:var(--rd-ac)}
.tb-studio{display:inline-flex;align-items:center;gap:7px;min-width:0}
.tb-studio svg{height:18px;width:auto;display:block;flex:0 0 auto}
.bshow .rd-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bshow .rd-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.bshow .rd-viewer{position:absolute;right:5%;bottom:8%;font-size:clamp(10px,1.3vw,14px);font-weight:700;color:rgba(255,255,255,.22);pointer-events:none;white-space:nowrap}
.bshow .rd-compbox{background:var(--rd-p2);border:1px solid var(--rd-ln);color:var(--rd-ft);border-radius:8px;padding:9px 10px;font-size:12.5px;line-height:1.5}
.bshow .rd-add{display:block;text-align:center;background:var(--rd-rose);color:var(--rd-tx);cursor:default}
.bshow .rd-list{max-height:none}
/* a note that mentions the viewer: the app's .mnote.mentions-me + .mention-pill.me (attention) */
.bshow .rd-note.me{background:var(--rd-att-soft)}
.bshow .rd-note .mp{display:inline-flex;align-items:center;padding:0 7px;border-radius:20px;border:1px solid var(--rd-att);color:var(--rd-att);font-size:10px}
/* the PDF page at exportNotes.js's own sizes */
.bpdf{max-width:780px;margin:0 auto;background:#fff;color:#17181B;border-radius:4px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55);font:12px/1.5 'Plus Jakarta Sans',system-ui,sans-serif}
.bpdf .band{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--rd-p);color:var(--rd-tx);border-bottom:2px solid var(--rd-ac)}
.bpdf .band svg{height:34px;width:auto;display:block;flex:0 0 auto}
.bpdf .meta{margin-left:auto;text-align:right;font-size:10.5px;line-height:1.4;color:var(--rd-mu)}
.bpdf .summary{padding:13px 16px;border-bottom:1px solid #E4E6EA}
.bpdf .ttl{font-size:16px;font-weight:700;margin-bottom:4px}
.bpdf .sub{font-size:11px;color:#6A707C}
.bpdf .legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.bpdf .chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px}
.bpdf .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.bpdf .ext{color:#6A707C}
.bpdf .notes{padding:4px 16px 6px}
.bpdf .note{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid #E4E6EA}
.bpdf .note:last-child{border-bottom:0}
.bpdf .num{flex:0 0 24px;font-weight:800;color:var(--rd-ac);font-size:13px}
.bpdf .body{flex:1 1 auto;min-width:0;border-left:3px solid var(--rail);padding-left:11px}
.bpdf .tcline{font-family:var(--mono);font-size:11px;font-weight:500}
.bpdf .tcline .fr{color:#8A909C;margin-left:6px}
.bpdf .who{font-size:11px;color:#6A707C;margin-left:8px}
.bpdf .tag{display:inline-block;font-size:9.5px;padding:1px 7px;border-radius:9px;border:1px solid #E4E6EA;color:#6A707C;margin-top:3px}
.bpdf .text{margin-top:6px;font-size:12px}
.bpdf .thumb{flex:0 0 46%;position:relative;aspect-ratio:16/9;border-radius:6px;border:1px solid #E4E6EA;background:#000;overflow:hidden}
.bpdf .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bpdf .foot{display:flex;justify-content:space-between;gap:10px;padding:8px 16px 10px;font-size:8px;color:#9aa0aa}
@container bstage (max-width:640px){.ph + .ph{display:none}}
@container bstage (max-width:490px){
  .bshow .rd-hd .rd-pill,.bshow .rd-hd .rd-hbtn:first-child{display:none}
  .bshow .rd-tb .win svg:not(:last-child){display:none}
  .bpdf .band{padding:12px;flex-wrap:wrap}
  .bpdf .band svg{height:26px}
  .bpdf .note{flex-wrap:wrap}
  .bpdf .thumb{flex:1 1 100%}
  .bpdf .meta{display:none}
}
/* the paid layer, and the maker's note after the answers, stand apart from the rest: a framed,
   lit band - the pricing card's pro treatment (accent border + glow), at section size */
.studio-band,.maker-band{position:relative;border-radius:22px;padding:3.2rem 3rem;border:1px solid rgba(217,143,166,.3);
  box-shadow:0 0 0 1px rgba(217,143,166,.05),0 30px 80px rgba(0,0,0,.45)}
/* the lit background, worn by the Team & Studio pricing card too */
.studio-band,.maker-band,.dl-card.pro{background:radial-gradient(110% 90% at 100% 0%,rgba(217,143,166,.15),transparent 55%),radial-gradient(80% 70% at 0% 100%,rgba(217,143,166,.06),transparent 60%),linear-gradient(180deg,#1c1f22,#151719)}
.studio-band::before,.maker-band::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(217,143,166,.75),transparent)}
.studio-head{text-align:center;max-width:44rem;margin:0 auto 2.6rem}
.studio-head h2{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:700;color:var(--text-bright);line-height:1.12;letter-spacing:-0.02em;margin-bottom:.9rem;text-wrap:balance}
.studio-head p{color:var(--text-dim);font-size:1rem;text-wrap:balance}
.studio-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 2.2rem;margin-top:2.8rem;padding-top:2.4rem;border-top:1px solid rgba(255,255,255,.07)}
.studio-points h3{font-size:.98rem;font-weight:600;color:var(--text-bright);margin-bottom:.45rem}
.studio-points p{font-size:.9rem;color:var(--text-dim);line-height:1.6}
.studio-tag{display:inline-block;margin-bottom:1rem;font-size:.68rem;padding:.3rem .7rem;border-radius:20px}
.studio-more{margin-top:1.8rem;text-align:center}
.studio-more .dl-btn{display:inline-block;padding-inline:1.8rem}
.studio-note{margin-top:2rem;text-align:center;font-size:.9rem;color:var(--text-dim)}
.studio-note b{color:var(--text-bright);font-weight:600}
@media(max-width:820px){.studio-points{grid-template-columns:1fr}}
@media(max-width:820px){.studio-band,.maker-band{padding:2.2rem 1.4rem;border-radius:16px}}
@media(max-width:480px){.studio-band,.maker-band{padding:1.8rem .9rem}}