/* /studio/: the Doza Assist Studio page (Doza Assist + Share), loaded after home.css, which brings
   the page layout, the tokens and the app replica pieces.

   The hero figure (#sx) plays Share on May Babcock's interview: the editor makes a link in Doza
   Assist, a client, a producer and a co-editor each open it in a browser and drag across the line
   they want, and each pick lands in the editor's Clips tab with their name on it. studio.js plays
   it while it is on screen; with no JS it rests on the result.

   Copied from the real UI (keep in step when it changes):
     the share page   pro/share/static/cloud_review.css (its tokens are the app's, the --app-* ones)
     Studio panel     pro/share/static/studio-panel.js and copy/studio-strings.json
     clip cards       core templates/project.html (renderClips) + studio-clips.js (author pills)
   Owner pill colours are the app's own: hsl(hash(name) % 360, 55%, 45%), the editor in accent blue. */

/* ---------- hero: the copy above, the figure across the whole column ---------- */
.stu-hero{position:relative}
.stu-hero .wrap{position:relative;padding-block:clamp(40px,5vw,84px) clamp(56px,6vw,96px)}
.stu-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end}
.stu-lead{display:grid;gap:26px;align-content:start;justify-items:start;min-width:0}
.stu-top .h1{font-size:clamp(44px,4.9vw,74px)}
.stu-act{display:grid;gap:22px;align-content:end;min-width:0}
.stu-top .hero-sub{max-width:52ch}
@media (max-width:1080px){
  .stu-top{grid-template-columns:minmax(0,1fr);align-items:start}
  .stu-top .h1{font-size:clamp(40px,7vw,72px)}
}
.prod-id .app-ico.d-ico{border-radius:22.5%}
.prod-id .fine{display:block;margin-top:2px}
.stu-fig{margin:clamp(36px,4.4vw,60px) 0 0;min-width:0}
.stu-fig .credit{margin-top:16px}

/* ---------- the figure: their browser, the link, your Doza Assist ---------- */
.sx{position:relative;font-family:var(--app-font);color:var(--app-ink);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;min-width:0}
.sx-stage{display:grid;grid-template-columns:minmax(0,1fr) clamp(56px,6vw,104px) minmax(0,1fr);height:560px;min-width:0}
.sx-pane{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border-radius:12px;background:var(--app-bg);border:1px solid var(--app-border);box-shadow:0 50px 140px -40px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.7);transition:opacity .45s ease, visibility 0s linear .45s}
.sx-pane.dz{container-type:inline-size;container-name:dz}
.sx-web{container-type:inline-size;container-name:sxweb}
.sx .gone{display:none!important}
.sx [data-k]{transition:opacity .4s ease, transform .4s ease}
.sx .off{opacity:0!important;transform:translateY(8px);pointer-events:none}
.sx .sx-panel.off,.sx .sp-ask.off,.sx .sp.off{transform:none}
.sx .press{transform:scale(.95);filter:brightness(1.15)}

/* the browser around the share page */
.sx-chrome{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;background:#18181d;border-bottom:1px solid #25252b;flex:none;min-width:0}
.sx-lights{display:flex;gap:7px;flex:none}
.sx-lights i{width:11px;height:11px;border-radius:50%;background:#3a3a42}
.sx-url{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:7px;background:#0f0f12;border:1px solid #232329;color:var(--app-ink-2);font-size:12px;white-space:nowrap;overflow:hidden}
.sx-url svg{width:11px;height:11px;flex:none;color:var(--app-ink-2)}
.sx-url-t{overflow:hidden;text-overflow:ellipsis;min-width:0}
.sx-url-t b{font-weight:400;color:var(--app-ink)}
.sx-url .ph{color:var(--app-muted)}
.sx-who{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--app-ink-2);white-space:nowrap;flex:none}
.sx-who i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--c,#555)}
.sx-who b{color:var(--app-ink);font-weight:600}
.sx-who small{font-size:11.5px;color:var(--app-ink-2)}
.sx-who small::before{content:"·";margin-right:6px;color:var(--app-muted)}
.sx-blank{flex:1;display:grid;place-items:center;align-content:center;gap:6px;color:var(--app-muted);font-size:12.5px;text-align:center;padding:24px}
.sx-blank svg{width:28px;height:28px;color:var(--app-border-l)}
.sx .sx-cursor{position:absolute;left:0;top:0;z-index:20;width:20px;height:20px;pointer-events:none;transform:translate(-40px,-40px);transition:transform .55s cubic-bezier(.3,.7,.2,1), opacity .3s ease;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.sx-cursor svg{display:block;width:100%;height:100%;transform-origin:3px 2px;transition:transform .12s ease}
.sx-cursor.down svg{transform:scale(.86)}
.sx .sx-cursor.drag{transition-timing-function:linear}

/* ---------- the share page (cloud_review.css, the narrow layout: player pinned at the bottom) ---------- */
.sp{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;transition:opacity .35s ease}
.sp.swap{opacity:0}
.sp-head{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid var(--app-border);flex:none;min-width:0}
.sp-logo{width:24px;height:24px;border-radius:6px;border:1.5px solid var(--app-accent);color:var(--app-accent);display:grid;place-items:center;font-size:12.5px;font-weight:500;flex:none}
.sp-head b{font-size:14px;font-weight:700;white-space:nowrap}
.sp-head small{font-size:10.5px;color:var(--app-ink-2);white-space:nowrap}
.sp-hsp{flex:1}
.sp-get{font-size:11.5px;font-weight:500;color:#fff;background:var(--app-accent);border-radius:6px;padding:4px 10px;white-space:nowrap}
.sp-main{flex:1;display:flex;flex-direction:column;min-height:0;padding:12px 16px 0}
.sp-title h4{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.sp-title p{font-size:11.5px;color:var(--app-ink-2);margin-top:3px}
.sp-title p + p{margin-top:1px}
.sp-tabs{display:flex;gap:2px;margin-top:10px;border-bottom:1px solid var(--app-border);white-space:nowrap;overflow:hidden;flex:none}
.sp-tabs span{font-size:12.5px;color:var(--app-ink-2);padding:7px 10px;border-bottom:2px solid transparent;margin-bottom:-1px}
.sp-tabs span.on{color:var(--app-accent);border-bottom-color:var(--app-accent)}
.sp-hint{font-size:11.5px;color:var(--app-ink-2);margin-top:10px}
.sp-brush{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin-top:8px;padding:4px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-2);flex:none}
.sp-brush span{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:7px;border:2px solid transparent;font-size:11.5px;font-weight:500;color:var(--app-ink-2);transition:border-color .2s, background .2s, color .2s, transform .12s}
.sp-brush span i{width:9px;height:9px;border-radius:50%;flex:none}
.sp-brush span.on{border-color:var(--app-accent);background:var(--app-accent-dim);color:var(--app-ink)}
.sp-brush .sp-undo{margin-left:auto;color:#1a1206;background:var(--app-orange);border-radius:6px;padding:3px 10px;border:0}
.sp-tx{position:relative;flex:1;min-height:0;overflow:hidden;margin-top:10px}
.sp-tx.scrolled{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px);mask-image:linear-gradient(180deg,transparent 0,#000 22px)}
.sp-region{display:grid;gap:12px;padding-bottom:16px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sp-ph{display:flex;align-items:baseline;gap:7px;margin-bottom:3px}
.sp-spk{font-size:13px;font-weight:700;color:var(--app-purple)}
.sp-sep{color:var(--app-border);font-size:10.5px}
.sp-tc{font-family:var(--app-mono);font-size:10.5px;color:var(--app-muted)}
.sp-p{font-size:13px;line-height:1.72;color:var(--app-ink)}
/* while dragging: each word carries its trailing space, so the paint runs on without seams */
.sp-p .tw{transition:background .1s}
.sp-p .tw.on{background:var(--hl)}
/* a saved clip: the whole line, one highlight per line box */
.sp-p [data-pick].saved,.hl-g{background:var(--hl);box-shadow:3px 0 0 var(--hl),-3px 0 0 var(--hl),inset 0 -1.5px 0 var(--hl-edge);-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background .3s ease, box-shadow .3s ease}
.hl-g{--hl:rgba(110,231,183,.38);--hl-edge:rgba(110,231,183,.9)}
.sp-region[data-r="sarah"]{--hl:rgba(96,165,250,.42);--hl-edge:rgba(96,165,250,.9)}
.sp-region[data-r="marcus"]{--hl:rgba(110,231,183,.38);--hl-edge:rgba(110,231,183,.9)}
.sp-region[data-r="nora"]{--hl:rgba(196,181,253,.42);--hl-edge:rgba(196,181,253,.95)}
/* the inline composer under the paragraph: "Why this moment?", the time, Cancel, Save clip */
.sp-comp{display:grid;gap:8px;padding:10px;border:1px solid var(--app-border-l);border-radius:10px;background:var(--app-2);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.sp-note{min-height:34px;border:1px solid var(--app-accent);border-radius:8px;background:var(--app-input);padding:7px 10px;font-size:12.5px;color:var(--app-ink);white-space:nowrap;overflow:hidden}
.sp-note .ph{color:var(--app-muted)}
.sp-note.has .ph{display:none}
.sp-note.typing .typed::after{content:"";display:inline-block;width:1px;height:1.1em;background:var(--app-ink);margin-left:1px;vertical-align:-3px;animation:blink 1s steps(1) infinite}
.sp-crow{display:flex;align-items:center;gap:8px}
.sp-crow .t{font-family:var(--app-mono);font-size:11px;color:var(--app-ink-2);flex:1}
.sp-btn{font-size:11.5px;font-weight:500;border:1px solid var(--app-border);border-radius:7px;padding:4px 10px;color:var(--app-ink);background:var(--app-card);white-space:nowrap;transition:transform .12s, filter .2s}
.sp-btn.pri{background:var(--app-accent);border-color:var(--app-accent);color:#000;font-weight:600}
/* the player, pinned at the bottom on a narrow page */
.sp-player{display:flex;align-items:center;gap:10px;padding:9px 16px;border-top:1px solid var(--app-border);background:#0d0d10;flex:none;font-family:var(--app-mono);font-size:10.5px;color:var(--app-ink-2)}
.sp-play{width:28px;height:28px;border-radius:50%;background:var(--app-accent);display:grid;place-items:center;flex:none}
.sp-play svg{width:10px;height:10px;margin-left:2px;color:#000}
.sp-trk{flex:1;height:4px;border-radius:2px;background:var(--app-border);position:relative;min-width:20px}
.sp-trk i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--app-accent);border-radius:2px;transition:width .5s ease}
.sp-x{border:1px solid var(--app-border);border-radius:5px;padding:1px 6px}
.sp-toast{position:absolute;left:50%;bottom:60px;z-index:6;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;background:var(--app-card);border:1px solid var(--app-border-l);border-radius:8px;padding:9px 16px;font-size:12.5px;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.sp-toast u{color:var(--app-accent);text-decoration:none;font-weight:500}
.sx .sp-toast.off{transform:translate(-50%,8px)}
/* first visit: the name prompt */
.sp-ask{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.62)}
.sp-askbox{width:min(100%,320px);display:grid;gap:10px;background:var(--app-card);border:1px solid var(--app-border);border-radius:12px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.sp-askbox h5{font-size:15px;font-weight:600}
.sp-askbox p{font-size:12px;color:var(--app-ink-2);margin-top:-6px}
.sp-in{border:1px solid var(--app-border);border-radius:8px;background:var(--app-input);padding:7px 10px;font-size:12.5px;color:var(--app-ink);min-height:34px;white-space:nowrap;overflow:hidden}
.sp-in.focus{border-color:var(--app-accent)}
.sp-in .ph{color:var(--app-muted)}
.sp-in.has .ph{display:none}
.sp-in.typing .typed::after{content:"";display:inline-block;width:1px;height:1.1em;background:var(--app-ink);margin-left:1px;vertical-align:-3px;animation:blink 1s steps(1) infinite}
.sp-askact{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}

/* ---------- the link between them: the share link goes out, each pick comes back ---------- */
.sx-link{position:relative;display:grid;align-content:center;justify-items:center;min-width:0}
.sx-wire{position:absolute;left:-6px;right:-6px;top:50%;height:0;border-top:1.5px dashed rgba(244,241,234,.18)}
.sx-dot{position:absolute;top:50%;left:-6px;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--accent-bright);box-shadow:0 0 0 4px rgba(83,136,196,.22),0 0 22px 4px rgba(83,136,196,.55);opacity:0}
.sx-dot.go{opacity:1}
.sx-dot.rtl{left:calc(100% - 6px)}
.sx-dot.run{transition:left .75s cubic-bezier(.45,0,.2,1), opacity .2s ease}
.sx-cap{position:absolute;top:calc(50% + 16px);left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.sx-cap.lit{color:var(--accent-badge)}

/* ---------- your Doza Assist: the Studio panel, then the Clips tab ---------- */
.sx-app .dz-header{padding:10px 16px;gap:9px}
.sx-app .dz-logo{width:24px;height:24px;font-size:13px}
.sx-app .dz-name{font-size:15px}
.sx-share{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--app-ink);background:var(--app-card);border:1px solid var(--app-border);border-radius:7px;padding:4px 10px;white-space:nowrap;transition:transform .12s}
.sx-sdot{width:8px;height:8px;border-radius:50%;background:var(--app-red);box-shadow:0 0 0 3px rgba(248,113,113,.18);transition:background .3s, box-shadow .3s}
.sx-sdot.on{background:var(--app-green);box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.sx-appmain{flex:1;display:flex;flex-direction:column;min-height:0;padding:14px 16px 0}
.sx-app .dz-proj h3{font-size:19px}
.sx-app .dz-editin b{font-size:11.5px;padding:2px 9px}
.sx-app .dz-editin span{font-size:10px}
.sx-app .dz-tabs{margin-top:10px;flex:none}
.sx-app .dz-tabs span{font-size:12.5px;padding:7px 10px}
.sx-clipbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:12px 0 10px;flex:none}
.sx-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:3px 10px;border-radius:999px;border:1px solid var(--app-border);background:var(--app-2);color:var(--app-ink-2);white-space:nowrap;transition:opacity .35s ease, transform .35s ease}
.sx-chip.on{border-color:var(--app-accent);color:var(--app-ink);background:rgba(74,158,255,.14)}
.sx-chip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.sx-chip em{font-style:normal;opacity:.7}
.sx-sort{margin-left:auto;font-size:11.5px;color:var(--app-ink-2);border:1px solid var(--app-border);border-radius:7px;padding:3px 10px;background:var(--app-input);white-space:nowrap}
.sx-cards{position:relative;flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;padding-bottom:12px;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
.sx-card{display:grid;gap:5px;min-width:0;background:var(--app-card);border:1px solid var(--app-border);border-left:3px solid var(--cc,var(--app-accent));border-radius:8px;padding:9px 11px;transition:transform .55s cubic-bezier(.2,.7,.2,1), opacity .45s ease, box-shadow .7s ease}
.sx-card.enter{opacity:0;transform:translateY(-12px) scale(.98)}
.sx-card.flash{box-shadow:0 0 0 1px var(--glow),0 0 30px -4px var(--glow)}
.sx-card[data-c="blue"]{--cc:var(--app-accent);--glow:rgba(74,158,255,.6)}
.sx-card[data-c="green"]{--cc:var(--app-green);--glow:rgba(52,211,153,.55)}
.sx-card[data-c="purple"]{--cc:var(--app-purple);--glow:rgba(167,139,250,.6)}
.sx-chead{display:flex;align-items:center;gap:8px;min-width:0}
.sx-grip{width:7px;height:12px;flex:none;color:var(--app-muted)}
.sx-check{width:13px;height:13px;border:1.5px solid var(--app-border-l);border-radius:3px;flex:none}
.sx-ttl{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-ttl .pend{display:none;color:var(--app-ink-2);font-weight:400;font-style:italic}
.sx-card.naming .sx-ttl .pend{display:inline}
.sx-card.naming .sx-ttl .nm{display:none}
.sx-dur{font-family:var(--app-mono);font-size:11px;color:var(--app-muted);flex:none}
.sx-author{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 8px 2px 2px;border-radius:999px;background:var(--app-hover);color:var(--app-ink-2);white-space:nowrap;flex:none}
.sx-author i{font-style:normal;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:700;color:#fff;background:var(--c)}
.sx-author.me{background:rgba(74,158,255,.16);color:var(--app-accent)}
.sx-lead{font-size:12px;color:var(--app-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-meta{display:flex;align-items:center;gap:8px;min-width:0}
.sx-meta .d{width:6px;height:6px;border-radius:50%;background:var(--cc);flex:none}
.sx-meta .tc{font-family:var(--app-mono);font-size:11px;color:var(--app-muted);flex:1;white-space:nowrap}
.sx-meta .st{font-size:11px;color:var(--app-ink-2);border:1px solid var(--app-border);border-radius:5px;padding:1px 8px;white-space:nowrap}
.sx-thread{font-size:12px;line-height:1.4;color:var(--app-ink);padding-top:6px;border-top:1px solid var(--app-border)}
.sx-thread b{font-weight:600;margin-right:4px}
.sx-toast{position:absolute;left:50%;bottom:16px;z-index:6;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);text-align:center;background:var(--app-card);border:1px solid var(--app-border-l);border-radius:8px;padding:10px 18px;font-size:12.5px;color:var(--app-ink);box-shadow:0 18px 50px rgba(0,0,0,.65)}
.sx .sx-toast.off{transform:translate(-50%,8px)}
/* the Studio panel (a modal over the project) */
.sx-panel{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.7)}
.sx-modal{width:min(100%,440px);display:grid;gap:12px;background:var(--app-card);border:1px solid var(--app-border);border-radius:12px;padding:22px}
.sx-modal h5{font-size:18px;font-weight:600}
.sx-intro{display:grid;gap:3px;font-size:12px;color:var(--app-ink-2);line-height:1.5}
.sx-row{display:flex;align-items:center;gap:8px;min-width:0}
.sx-field{flex:1;min-width:0;border:1px solid var(--app-border);border-radius:8px;background:var(--app-input);padding:7px 10px;font-size:12.5px;color:var(--app-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-field.url{font-family:var(--app-mono);font-size:11px;color:var(--app-ink)}
.sx-btn{font-size:12px;font-weight:500;border:1px solid var(--app-border);border-radius:8px;padding:6px 12px;color:var(--app-ink);background:var(--app-card);white-space:nowrap;transition:transform .12s, filter .2s}
.sx-btn.pri{background:var(--app-accent);border-color:var(--app-accent);color:#000}
.sx-muted{font-size:11.5px;color:var(--app-ink-2);white-space:nowrap}
.sx-sync{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;padding-top:10px;border-top:1px solid var(--app-border)}
.sx-sync .tg{width:28px;height:16px}
.sx-sync .tg::after{width:12px;height:12px}
.sx-sync .tg.on::after{left:14px}
.sx-foot{display:flex;justify-content:flex-end}

/* ---------- the app and the share page lay themselves out by their own width ---------- */
@container dz (max-width:560px){
  .sx-app .dz-tabs .lo{display:none}
  .sx-sort{display:none}
  .sx-app .dz-editin{display:none}
}
@container dz (max-width:400px){
  .sx-app .dz-studio{display:none}
  .sx-author{padding-right:2px}
  .sx-author span{display:none}
}
@container sxweb (max-width:520px){
  .sx-lights{display:none}
  .sp-head small{display:none}
  .sp-tabs .lo{display:none}
}
@container sxweb (max-width:400px){
  .sp-brush span:not(.sp-undo){font-size:0;gap:0;padding:5px 7px}
  .sp-brush span i{width:11px;height:11px}
  .sx-who small{display:none}
  .sp-get{display:none}
}

/* ---------- narrow screens: one window at a time, the one that is acting ---------- */
@media (max-width:900px){
  .sx-stage{grid-template-columns:minmax(0,1fr);height:560px}
  .sx-pane{grid-area:1/1}
  .sx-link{display:none}
  .sx[data-focus="web"] .sx-app,.sx[data-focus="app"] .sx-web{opacity:0;visibility:hidden}
  .sx[data-focus="web"] .sx-web,.sx[data-focus="app"] .sx-app{transition:opacity .45s ease}
}
@media (max-width:520px){.sx-stage{height:540px}}

@media (prefers-reduced-motion:reduce){
  .sx .off,.sx-card.enter{transform:none}
  .sx .sx-cursor{transition:opacity .2s ease}
  .sp-region,.sx-card{transition:opacity .3s ease}
  .sp-note.typing .typed::after,.sp-in.typing .typed::after{animation:none}
}

/* ---------- "New to Doza Assist?" under the hero (borders and tint from home.css .proof, one line of text) ---------- */
.stu-what .wrap{display:block;padding-block:22px}
.stu-what p{margin:0;color:var(--ink-soft);font-size:clamp(15.5px,1.2vw,17px);line-height:1.6}
.stu-what b,.stu-what strong{color:var(--ink);font-weight:600}
.stu-what .tlink{white-space:nowrap}

/* ---------- who you send it to ---------- */
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.roles{grid-template-columns:minmax(0,1fr)}}
.role{display:grid;gap:12px;align-content:start;padding:24px;border:1px solid var(--rule);border-radius:18px;background:linear-gradient(180deg,rgba(244,241,234,.035),rgba(244,241,234,.01));min-width:0}
.role-who{display:flex;align-items:center;gap:10px}
.role-who i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--app-font);font-size:12px;font-weight:700;color:#fff;background:var(--c)}
.role-who b{display:block;font-size:19px;font-weight:500;line-height:1.2}
.role-who span{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-faint)}
.role p{font-size:15px;color:var(--ink-soft);max-width:40ch}
.role q{display:block;quotes:none;font-family:var(--font-display);font-size:17px;line-height:1.45;color:var(--ink);padding-left:14px;border-left:2px solid var(--qc)}
.role .pick{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-faint)}

/* ---------- privacy: what goes on the link ---------- */
.stu-priv{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:960px){.stu-priv{grid-template-columns:minmax(0,1fr)}}
.stu-priv .head{margin-bottom:0}
.stu-priv .lede{margin-top:4px}
.stu-priv .bt-link{margin-top:4px}
.stu-priv .facts2{padding-top:6px}

/* ---------- the small app pieces in the how-it-works cards ---------- */
#how .vig{grid-template-columns:minmax(0,1fr)}
.stu-vp{margin:0}
.stu-vapp .sx-clipbar{margin:0}

/* ---------- pricing: one Studio card ---------- */
.stu-price .tiers.one{grid-template-columns:minmax(0,600px)}