/* The Challenge Studio — creator layer styles (extends Locked In tokens) */
:root{ --studio:#702D46; --studio-deep:#4F1F33; --studio-soft:#F1E3E8; --studio-ink:#321322; }
.topbar .wordmark .lock{background:var(--studio)}
.topbar .wordmark-img img{display:block;height:42px;width:auto}
.welcome-logo{display:block;width:min(420px,88%);height:auto;margin:0 0 14px}
.welcome-art{display:block;width:min(760px,100%);height:auto;margin:0 0 18px;border-radius:18px}
.topnav button.on{background:var(--studio-soft);color:var(--studio-deep)}
/* Challenge Studio buttons: solid plum with ivory text */
.btn-primary{background:var(--studio);color:var(--tle-ivory)} .btn-primary:hover{background:var(--studio-deep)} .btn-soft{background:var(--studio-soft);color:var(--studio-deep)}
.eyebrow{color:var(--studio)} :focus-visible{outline-color:var(--studio)}
.tag-lock{background:var(--studio-soft);color:var(--studio-deep)}
.step .bar i{background:var(--studio)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--studio);box-shadow:0 0 0 3px var(--studio-soft)}
.chip.on{background:var(--studio);border-color:var(--studio)}
.goal.on,.dur.on{border-color:var(--studio);background:var(--studio-soft)} .goal:hover,.dur:hover{border-color:var(--studio)}
.dur .n{color:var(--studio-deep)} .goal svg{stroke:var(--studio)}
.switch input:checked + i{background:var(--studio)}
.stat .v{color:var(--studio-deep)}
.progressbar i{background:linear-gradient(90deg,var(--studio),var(--amber))}

.shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 53px);min-width:0}
@media (max-width:860px){.shell{grid-template-columns:1fr}.side{display:none}}
.side{border-right:1px solid var(--line);padding:18px 12px;background:var(--card)}
.side button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;padding:10px 12px;border-radius:9px;font-weight:600;font-size:14px;color:var(--ink-2)}
.side button:hover{background:var(--paper-2)} .side button.on{background:var(--studio-soft);color:var(--studio-deep)}
.side .sec{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:14px 12px 6px}
.main{padding:28px 24px 64px;max-width:1080px;min-width:0;width:100%}
@media (max-width:640px){.main{padding:20px 14px 56px}.mod-row{grid-template-columns:auto 1fr}.mod-row > :nth-child(3),.mod-row > :nth-child(4){grid-column:span 2}.day-edit .act{grid-template-columns:auto 1fr}.day-edit .act > :nth-child(3){grid-column:span 2}.metrics{grid-template-columns:repeat(2,1fr)}}
code{word-break:break-all}
.phases-nav{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 18px}
.phases-nav button{background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:700;font-size:12.5px;color:var(--ink-2);display:flex;gap:8px;align-items:center}
.phases-nav button.on{background:var(--studio);border-color:var(--studio);color:#fff}
.phases-nav button.done::before{content:"✓";font-size:11px}
.bp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.bp-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.bp-grid{grid-template-columns:1fr}}
.bp{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px}
.bp:hover{border-color:var(--studio)} .bp.launch{border-color:var(--amber)}
.bp b{font-family:var(--display);font-size:16px} .bp .row{display:flex;gap:6px;flex-wrap:wrap}
.bp .d{font-size:12.5px;color:var(--ink-2)} .bp .btns{display:flex;gap:6px;margin-top:auto;padding-top:6px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:760px){.cards3{grid-template-columns:1fr}}
.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.metric .v{font-family:var(--mono);font-size:24px;font-weight:600;color:var(--studio-deep)} .metric .l{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:2px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} @media (max-width:760px){.metrics{grid-template-columns:repeat(2,1fr)}}
.alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--amber-soft);border:1px solid #f1dcae;font-size:13.5px;margin-top:8px}
.alert.ok{background:var(--ok-soft);border-color:#bfe3d0} .alert.bad{background:var(--warn-soft);border-color:#f1c8bf}
.alert .act{margin-left:auto;white-space:nowrap}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:left;padding:10px 12px;background:var(--card-2);border-bottom:1px solid var(--line)}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle} tr:last-child td{border-bottom:none}
.day-edit{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:10px}
.day-edit.locked{border-color:#bfe3d0;background:var(--ok-soft)}
.day-edit .hd{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.day-edit .hd b{font-family:var(--display);font-size:16px}
.day-edit .acts{display:grid;gap:6px;margin-top:10px}
.day-edit .act{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:8px 10px;background:var(--card-2);border:1px solid var(--line);border-radius:8px;font-size:13px}
.day-edit .act input[type=text],.day-edit textarea{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:13px}
.day-edit textarea{min-height:44px;resize:vertical}
.day-edit .ctl{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.mod-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);margin-bottom:8px}
.mod-row.off{opacity:.6} .mod-row input[type=text]{padding:6px 8px;border:1px solid var(--line);border-radius:6px;width:100%;font-size:13px}
.swatch{width:36px;height:36px;border-radius:9px;border:2px solid var(--line);cursor:pointer}
.swatch.on{border-color:var(--ink)}
.preview-wrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg)}
.preview-wrap iframe{width:100%;height:78vh;border:none;display:block}
.preview-bar{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--card-2);border-bottom:1px solid var(--line);font-size:12.5px}
.deliv{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px} .deliv b{font-family:var(--display);font-size:16px}
.deliv pre{white-space:pre-wrap;font-family:var(--mono);font-size:12px;line-height:1.55;background:var(--card-2);border:1px solid var(--line);border-radius:8px;padding:12px;max-height:340px;overflow:auto;margin-top:8px}
.pill-status{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:999px;font-weight:600}
.s-published{background:var(--ok-soft);color:var(--ok)} .s-draft{background:var(--amber-soft);color:var(--amber-ink)} .s-archived{background:var(--paper-2);color:var(--mute)}
.s-active{background:var(--ok-soft);color:var(--ok)} .s-at-risk{background:var(--warn-soft);color:var(--warn)} .s-not-started{background:var(--amber-soft);color:var(--amber-ink)} .s-completed{background:var(--studio-soft);color:var(--studio-deep)} .s-enrolled{background:var(--info-soft);color:var(--info)} .s-paused{background:var(--paper-2);color:var(--mute)} .s-left{background:var(--paper-2);color:var(--mute)}
.money-move{background:linear-gradient(135deg,var(--studio-ink),var(--studio-deep));color:#fff;border-radius:var(--r-lg);padding:28px}
.money-move .eyebrow{color:#EAD3DB} .money-move h2{color:#fff;font-size:clamp(24px,4vw,34px)}
.money-move .btn-amber{margin-top:14px}
.detail{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:12px}

.two-col{display:grid;grid-template-columns:1fr 2fr;gap:12px} @media (max-width:760px){.two-col{grid-template-columns:1fr}}

/* ============================================================
   The Ask dock: the Studio's AI sits at the top of every page.
   Sticky under the top bar, in flow, so it never covers the controls
   underneath it on a phone.
   ============================================================ */
.askdock{position:sticky;top:var(--topbar-h,53px);z-index:35;background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 8px 18px rgba(50,19,34,.06)}
.askdock[hidden]{display:none}
.askbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 24px;max-width:1360px;margin:0 auto}
.askbar .askl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--studio-deep);white-space:nowrap}
.askbar input[type=text]{flex:1 1 240px;min-width:0;padding:9px 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--card-2);font-size:13.5px;font-family:inherit;color:var(--ink)}
.askbar input[type=text]:focus{border-color:var(--studio);box-shadow:0 0 0 3px var(--studio-soft);outline:none}
.askbtns{display:flex;gap:6px;flex-wrap:wrap}
.asksug{display:flex;gap:6px;flex-wrap:wrap;padding:0 24px 10px;max-width:1360px;margin:0 auto}
.asksug button{background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--ink-2);text-align:left}
.asksug button:hover{border-color:var(--studio);color:var(--studio-deep)}
.askout{padding:0 24px 14px;max-width:1360px;margin:0 auto;max-height:52vh;overflow:auto}
.askout .aibody{white-space:pre-wrap;line-height:1.6;font-size:13.5px;background:var(--card-2);border:1px solid var(--line);border-left:3px solid var(--studio);border-radius:10px;padding:12px 14px;color:var(--ink)}
.askout .aihd{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--studio-deep);margin:0 0 6px}
.askout .aiacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
@media (max-width:640px){
  /* On a phone the dock stays one input and one row of buttons, so it never eats the screen. */
  .askbar,.asksug,.askout{padding-left:14px;padding-right:14px}
  .askbar{gap:6px;padding-top:8px;padding-bottom:8px}
  .askbar .askl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .askbar input[type=text]{flex:1 0 100%;padding:8px 12px}
  .askbtns{flex:1 1 auto;gap:5px}
  .askbtns .btn{padding:7px 10px;font-size:10.5px;letter-spacing:.04em}
  .asksug{display:none}
  .askout{max-height:44vh}
}

/* ---- Write with AI: one quiet control next to a single field ---- */
.ai-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.aiw{background:none;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600;line-height:1.7;color:var(--studio-deep);display:inline-flex;gap:5px;align-items:center;max-width:100%}
.aiw:hover{border-color:var(--studio);background:var(--studio-soft)}
.aiw[disabled]{opacity:.55}
.aiprop{flex:1 0 100%;margin-top:6px;border:1px solid var(--studio-soft);border-left:3px solid var(--studio);border-radius:8px;background:var(--card-2);padding:10px 12px;min-width:0}
.aiprop .aihd{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--studio-deep);margin-bottom:6px}
.aiprop .aitext{white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.55;color:var(--ink)}
.aiprop .aimsg{font-size:13px;line-height:1.55;color:var(--ink-2)}
.aiprop .aiacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* ---- The key handoff: a state that stays until she adds her key ---- */
.keybanner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 24px;background:var(--warn-soft);border-bottom:1px solid #f1c8bf;font-size:13px;line-height:1.5}
.keybanner .kb-badge{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--warn);color:#fff;padding:3px 8px;border-radius:999px;white-space:nowrap}
.keybanner .kb-t{flex:1 1 320px;min-width:0}
/* The way on from the handover, beside the ask, never instead of it. */
.keybanner .kb-lab{flex:none;white-space:nowrap;font-size:12.5px;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.keybanner .kb-lab:hover{color:var(--studio)}
@media (max-width:640px){.keybanner{padding:10px 14px}}
.side button .dot,.phases-nav button .dot,.topnav .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warn);margin-left:6px;vertical-align:middle}
.keycard{border-color:var(--warn)!important}
/* Whether a published link actually works for anyone but the creator. */
.syncrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.syncchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--paper-2);color:var(--ink-2);white-space:nowrap}
.syncchip i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.syncchip.s-synced{background:var(--ok-soft);color:var(--ok)}
.syncchip.s-local{background:var(--warn-soft);color:var(--warn)}
.syncchip.s-syncing{background:var(--info-soft);color:var(--info)}
.syncchip.s-standalone{background:var(--amber-soft);color:var(--amber-ink)}
/* Where a day's words came from, said on the day itself. */
.daysrc{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;padding:2px 7px;border-radius:999px;vertical-align:middle;margin-left:4px}
.daysrc.s-template{background:var(--amber-soft);color:var(--amber-ink)}
.daysrc.s-ai,.daysrc.s-manual{background:var(--ok-soft);color:var(--ok)}
/* Test mode reads as information, not as a fault: standalone behaving exactly as designed. */
.keybanner.kb-test{background:var(--info-soft);border-bottom-color:#c7d9ea}
.keybanner.kb-test .kb-badge{background:var(--info)}

/* ---- Her voice, in her own words ---- */
.voicecard{border-color:var(--studio)!important;background:linear-gradient(180deg,var(--studio-soft),var(--card) 55%)}
.voicecard textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);font-family:inherit;font-size:14px;line-height:1.55;color:var(--ink);resize:vertical}
.voicecard textarea:focus{border-color:var(--studio);box-shadow:0 0 0 3px var(--studio-soft);outline:none}
.voice-starters{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.voice-starters button{background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--ink-2)}
.voice-starters button:hover{border-color:var(--studio);color:var(--studio-deep)}

/* ---- Built for the Bag integration ---- */
.modal{position:fixed;inset:0;background:rgba(20,18,15,.55);display:grid;place-items:center;z-index:100;padding:20px}
.modal[hidden]{display:none}
.modal-card{background:var(--card);border-radius:var(--r-lg,16px);padding:24px;max-width:560px;width:100%;box-shadow:var(--shadow-lg)}
.modal-card ul li{line-height:1.5}
.hand-row{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.hand-row .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.hand-row .v{color:var(--ink)} .hand-row .v i{font-style:normal}
@media (max-width:560px){.hand-row{grid-template-columns:1fr;gap:2px}}
.card.bftb{border-color:var(--studio);background:linear-gradient(180deg,var(--studio-soft),var(--card) 60%);margin-bottom:14px}
.bs-not-started,.bs-onboarding{background:var(--paper-2);color:var(--mute)} .bs-ai-recommendation-ready,.bs-building,.bs-draft-ready{background:var(--amber-soft);color:var(--amber-ink)}
.bs-needs-review{background:var(--warn-soft);color:var(--warn)} .bs-approved,.bs-published{background:var(--ok-soft);color:var(--ok)} .bs-paused{background:var(--info-soft);color:var(--info)} .bs-expired{background:var(--warn-soft);color:var(--warn)}
#topnav a.btn{text-decoration:none}

/* ============================================================
   Landing — Hero-Led Editorial ("Build the experience they finish.")
   Scoped to #s-welcome.st; the studio shell keeps its look.
   Textures: paper (signature, supporting sections only), grain (supporting, over plum blocks).
   Gold only for rules, numbers, borders and the featured example / current step.
   ============================================================ */
#s-welcome.st{background:var(--tle-ivory);color:var(--tle-ink)}
#s-welcome.st .st-wrap{max-width:1120px;margin:0 auto;padding:0 24px;position:relative}
#s-welcome.st h1,#s-welcome.st h2{letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
#s-welcome.st h2{font-size:clamp(30px,4.4vw,50px);color:var(--tle-ink)}
#s-welcome.st .st-head{max-width:760px;margin-bottom:44px}
#s-welcome.st .eyebrow{margin-bottom:14px;color:var(--studio)}
#s-welcome.st .welcome-logo{display:none} /* the hero art carries the wordmark; the top bar keeps the logo */
#s-welcome.st .lead{max-width:52ch}
#s-welcome.st .btn-row{gap:14px}
#s-welcome.st .btn{padding:16px 26px;font-size:14px;letter-spacing:.06em}
#s-welcome.st #btnStart,#s-welcome.st [data-proxy]{padding:20px 36px;font-size:15px}
#s-welcome.st figure{margin:0;min-width:0}
#s-welcome.st figcaption{margin-top:16px;padding-top:12px;border-top:1px solid var(--tle-gold)}
#s-welcome.st figcaption b{display:block;font-family:var(--display);font-size:18px;letter-spacing:-.01em;margin-bottom:4px}
#s-welcome.st figcaption span{display:block;font-size:13.5px;line-height:1.55;color:var(--tle-ink-2)}
#s-welcome.st .st-browser{border:1px solid rgba(50,19,34,.18);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 24px 50px rgba(50,19,34,.14)}
#s-welcome.st .st-browser::before{content:"";display:block;height:22px;border-bottom:1px solid rgba(50,19,34,.1);background:radial-gradient(circle at 13px 11px,var(--tle-gold) 3px,transparent 4px),radial-gradient(circle at 27px 11px,var(--studio) 3px,transparent 4px),radial-gradient(circle at 41px 11px,var(--tle-plum-deep) 3px,transparent 4px),var(--paper-2)}
#s-welcome.st .st-browser img{display:block;width:100%;height:auto}

/* 1. Hero: clean ivory, the art framed by a thin gold rule */
#s-welcome.st .st-hero{padding:28px 0 84px;background:var(--tle-ivory)}
#s-welcome.st .st-art{padding:6px;border:1px solid rgba(198,161,91,.7);background:#fff;box-shadow:0 30px 70px rgba(50,19,34,.16)}
#s-welcome.st .st-art img{display:block;width:100%;height:auto;border-radius:0;margin:0}
#s-welcome.st .st-hero-copy{display:grid;grid-template-columns:1.15fr .85fr;gap:28px 56px;align-items:end;margin-top:52px}
#s-welcome.st .st-hero h1{font-size:clamp(38px,5.4vw,66px);max-width:15ch;color:var(--tle-ink)}
#s-welcome.st .st-hero .lead{font-size:18px;margin-top:0;color:var(--tle-ink-2)}
#s-welcome.st .st-hero .btn-row{margin-top:30px}
#s-welcome.st .st-hero .st-hero-uses{margin-top:14px;font-size:16px}
#s-welcome.st .st-price-line{margin:14px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--studio-deep)}
#s-welcome.st .st-intro{margin-top:18px;font-size:16px;color:var(--tle-ink-2)}

/* 2. Challenge examples: quiet white surface, gold marks the featured example */
#s-welcome.st .st-examples{padding:88px 0 96px;background:#fff;border-top:1px solid var(--tle-gold)}
#s-welcome.st .st-ex-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:start}
#s-welcome.st .st-featured .st-browser{border:2px solid var(--tle-gold);box-shadow:0 30px 60px rgba(50,19,34,.18)}
#s-welcome.st .st-tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tle-gold);border:1px solid var(--tle-gold);padding:3px 8px;margin-bottom:10px;border-radius:0}
#s-welcome.st .st-ex-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--tle-gold)}
#s-welcome.st .st-ex-list li{padding:20px 0;border-bottom:1px solid var(--tle-hair)}
#s-welcome.st .st-ex-list b{display:block;font-family:var(--display);font-size:19px;letter-spacing:-.01em;color:var(--tle-ink)}
#s-welcome.st .st-ex-list span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--studio);margin:4px 0 6px}
#s-welcome.st .st-ex-list em{display:block;font-style:normal;font-size:14px;color:var(--tle-ink-2);line-height:1.5}

/* 3. What creators can customize: ivory with a plum block edge */
#s-welcome.st .st-custom{padding:96px 0;background:var(--tle-ivory);position:relative}
#s-welcome.st .st-custom::before{content:"";position:absolute;left:0;top:0;width:min(22vw,300px);height:56px;background:var(--studio)}
#s-welcome.st .st-custom::after{content:"";position:absolute;left:min(22vw,300px);top:0;width:min(9vw,120px);height:28px;background:var(--studio)}
#s-welcome.st .st-two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
#s-welcome.st .st-custom-copy{position:sticky;top:90px}
#s-welcome.st .st-checks{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--tle-gold)}
#s-welcome.st .st-checks li{position:relative;padding:16px 0 16px 34px;border-bottom:1px solid var(--tle-hair);font-size:16px;font-weight:500;color:var(--tle-ink)}
#s-welcome.st .st-checks li::before{content:"";position:absolute;left:4px;top:23px;width:12px;height:12px;background:var(--studio)}
#s-welcome.st .st-checks li b{display:block;font-family:var(--display);font-size:18px;letter-spacing:-.01em;color:var(--tle-ink)}
#s-welcome.st .st-checks li span{display:block;margin-top:4px;font-size:14px;font-weight:400;line-height:1.55;color:var(--tle-ink-2)}
#s-welcome.st .st-shots{display:grid;gap:40px}
#s-welcome.st .st-shots.three{grid-template-columns:repeat(3,1fr);gap:32px}

/* 4. Participant experience: subtle paper grain, screens read easily */
#s-welcome.st .st-participant{padding:92px 0 96px;background:url(assets/textures/paper.svg);background-color:var(--tle-ivory);background-size:400px 400px;border-top:1px solid var(--tle-hair)}
#s-welcome.st .proof{max-width:none;margin:0 0 48px;padding:0;gap:0;grid-template-columns:1fr 1fr;border-top:1px solid var(--tle-gold)}
#s-welcome.st .proof .p{background:transparent;border:0;border-radius:0;padding:24px 32px 0 0;border-right:1px solid var(--tle-hair)}
#s-welcome.st .proof .p + .p{padding-left:32px}
#s-welcome.st .proof .p:last-child{border-right:0;padding-right:0}
#s-welcome.st .proof .p b{font-size:20px;letter-spacing:-.01em;color:var(--studio);margin-bottom:8px}
#s-welcome.st .proof .p span{font-size:14px;color:var(--tle-ink-2);line-height:1.6}

/* 5. Creation process: plum block with stepped edges, numbered milestones on a rising gold path */
#s-welcome.st .st-process{position:relative;padding:150px 0 150px;color:var(--tle-ivory);background:url(assets/textures/grain.svg),var(--studio);background-size:300px 300px,auto;
  clip-path:polygon(0 96px,25% 96px,25% 64px,50% 64px,50% 32px,75% 32px,75% 0,100% 0,100% calc(100% - 96px),75% calc(100% - 96px),75% calc(100% - 64px),50% calc(100% - 64px),50% calc(100% - 32px),25% calc(100% - 32px),25% 100%,0 100%)}
#s-welcome.st .st-process .eyebrow{color:var(--tle-gold)}
#s-welcome.st .st-process h2{color:var(--tle-ivory);max-width:14ch}
#s-welcome.st .journey{max-width:none;margin:0;padding:0}
#s-welcome.st .journey .eyebrow{text-align:left}
#s-welcome.st .journey ol{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:64px;padding-top:48px;counter-reset:j;list-style:none}
#s-welcome.st .journey ol::before{content:"";position:absolute;left:0;right:0;top:80px;height:1px;background:linear-gradient(90deg,var(--tle-gold),rgba(198,161,91,.35));transform:rotate(-3.3deg);transform-origin:50% 50%}
#s-welcome.st .journey li{position:relative;background:none;border:0;border-top:1px solid rgba(247,241,231,.28);border-radius:0;padding:18px 0 0;font-family:var(--display);font-weight:500;font-size:17px;line-height:1.3;color:var(--tle-ivory);counter-increment:j;margin:0}
#s-welcome.st .journey li:nth-child(1){transform:translateY(64px)}
#s-welcome.st .journey li:nth-child(2){transform:translateY(48px)}
#s-welcome.st .journey li:nth-child(3){transform:translateY(32px)}
#s-welcome.st .journey li:nth-child(4){transform:translateY(16px)}
#s-welcome.st .journey li::before{content:counter(j,decimal-leading-zero);display:block;font-family:var(--display);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.04em;color:rgba(247,241,231,.55);margin:0 0 12px}
#s-welcome.st .journey li::after{content:"";position:absolute;left:0;top:-6px;width:11px;height:11px;background:var(--studio);border:1px solid rgba(247,241,231,.7)}
#s-welcome.st .journey li:first-child{border-top-color:var(--tle-gold)}
#s-welcome.st .journey li:first-child::before{color:var(--tle-gold)} /* gold marks the current step */
#s-welcome.st .journey li:first-child::after{background:var(--tle-gold);border-color:var(--tle-gold)}

/* 6. Offer: clean ivory framed by gold rules, plum button */
#s-welcome.st .st-offer{padding:104px 0 112px;background:var(--tle-ivory);border-top:1px solid var(--tle-gold)}
#s-welcome.st .st-offer .st-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
#s-welcome.st .proof.one{display:block;margin:0;border:0}
#s-welcome.st .proof.one .p{background:var(--studio);color:var(--tle-ivory);padding:32px;border:0;border-left:4px solid var(--tle-gold)}
#s-welcome.st .proof.one .p b{color:var(--tle-ivory);font-size:24px}
#s-welcome.st .proof.one .p span{color:rgba(247,241,231,.85);font-size:15px}
#s-welcome.st .st-offer h2{font-size:clamp(38px,5.4vw,66px);color:var(--tle-ink);max-width:12ch}
#s-welcome.st .st-offer .btn-row{margin-top:32px}
#s-welcome.st .st-uses{list-style:none;margin:14px 0 0;padding:0}
#s-welcome.st .st-uses li{position:relative;padding:9px 0 9px 20px;border-top:1px solid rgba(247,241,231,.18);font-size:15px;line-height:1.45;color:rgba(247,241,231,.9)}
#s-welcome.st .st-uses li::before{content:"";position:absolute;left:2px;top:16px;width:8px;height:8px;background:var(--tle-gold)}
#s-welcome.st .st-pricing{margin-top:24px;padding-top:18px;border-top:1px solid var(--tle-gold);max-width:52ch}
#s-welcome.st .st-pricing p{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--tle-ink-2)}
#s-welcome.st .st-pricing p b{font-family:var(--display);font-size:20px;letter-spacing:-.01em;color:var(--tle-ink)}

/* 7. Straight answers: white surface, gold rules between questions */
#s-welcome.st .st-faq{padding:88px 0 96px;background:#fff;border-top:1px solid var(--tle-gold)}
#s-welcome.st .st-qa{margin:0;border-top:1px solid var(--tle-gold);max-width:820px}
#s-welcome.st .st-qa > div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px 40px;padding:22px 0;border-bottom:1px solid var(--tle-hair)}
#s-welcome.st .st-qa dt{font-family:var(--display);font-size:19px;letter-spacing:-.01em;line-height:1.25;color:var(--tle-ink)}
#s-welcome.st .st-qa dd{margin:0;font-size:15px;line-height:1.6;color:var(--tle-ink-2)}

/* 8. Close: plum block, ivory type, gold rule */
#s-welcome.st .st-close{padding:96px 0 104px;background:url(assets/textures/grain.svg),var(--studio);background-size:300px 300px,auto;color:var(--tle-ivory)}
#s-welcome.st .st-close .st-wrap{max-width:820px;margin:0 auto}
#s-welcome.st .st-close h2{color:var(--tle-ivory);max-width:18ch}
#s-welcome.st .st-close .lead{margin-top:20px;font-size:18px;color:rgba(247,241,231,.85);border-top:1px solid var(--tle-gold);padding-top:20px}
#s-welcome.st .st-close .btn-row{margin-top:30px}
#s-welcome.st .st-close .btn-primary{background:var(--tle-ivory);color:var(--studio-deep)} #s-welcome.st .st-close .btn-primary:hover{background:#fff}
#s-welcome.st footer{margin:0;padding:40px 24px 56px;background:var(--tle-plum-deep);color:rgba(247,241,231,.68);border-top:1px solid rgba(198,161,91,.35)}
#s-welcome.st footer b{color:var(--tle-ivory)}

@media (max-width:900px){
  #s-welcome.st .st-hero-copy,#s-welcome.st .st-ex-grid,#s-welcome.st .st-two,#s-welcome.st .st-offer .st-wrap{grid-template-columns:1fr;gap:36px}
  #s-welcome.st .st-custom-copy{position:static}
  #s-welcome.st .st-shots.three{grid-template-columns:1fr;gap:36px}
  #s-welcome.st .st-qa > div{grid-template-columns:1fr;gap:8px}
  #s-welcome.st .journey ol{grid-template-columns:1fr;gap:0;margin-top:40px;padding:0 0 0 40px}
  #s-welcome.st .journey ol::before{left:9px;right:auto;top:8px;bottom:8px;width:1px;height:auto;transform:none;background:linear-gradient(180deg,var(--tle-gold),rgba(198,161,91,.35))}
  #s-welcome.st .journey li:nth-child(n){transform:none;border-top:0;border-bottom:1px solid rgba(247,241,231,.22);padding:18px 0 22px;display:grid;grid-template-columns:52px 1fr;align-items:center;gap:10px}
  #s-welcome.st .journey li::before{margin:0;font-size:34px}
  #s-welcome.st .journey li::after{left:-35px;top:50%;margin-top:-5px}
  #s-welcome.st .st-process{padding:110px 0;clip-path:polygon(0 40px,33.4% 40px,33.4% 20px,66.7% 20px,66.7% 0,100% 0,100% calc(100% - 40px),66.7% calc(100% - 40px),66.7% calc(100% - 20px),33.4% calc(100% - 20px),33.4% 100%,0 100%)}
}
@media (max-width:720px){
  #s-welcome.st .st-wrap{padding:0 18px}
  #s-welcome.st .st-hero{padding:16px 0 56px}
  #s-welcome.st .st-art{padding:4px}
  #s-welcome.st .st-examples,#s-welcome.st .st-custom,#s-welcome.st .st-participant{padding:64px 0 72px}
  #s-welcome.st .st-offer{padding:72px 0 80px}
  #s-welcome.st .st-faq{padding:64px 0 72px} #s-welcome.st .st-close{padding:72px 0 80px}
  #s-welcome.st .st-head{margin-bottom:28px}
  #s-welcome.st .st-custom::before{width:34vw;height:36px} #s-welcome.st .st-custom::after{left:34vw;width:12vw;height:18px}
  #s-welcome.st .proof{grid-template-columns:1fr;margin-bottom:36px}
  #s-welcome.st .proof .p{border-right:0;padding:22px 0 0}
  #s-welcome.st .proof .p + .p{padding-left:0}
  #s-welcome.st .btn-row{flex-direction:column;align-items:stretch}
}

/* ---------- Ask: put it away, bring it back ------------------------------- */
.askbar .askclose{flex:none;margin-left:auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);
  background:var(--card-2);color:var(--ink-2);font-size:17px;line-height:1;cursor:pointer;padding:0}
.askbar .askclose:hover{border-color:var(--studio);color:var(--studio)}
.askshut{padding:6px 24px 8px;max-width:1360px;margin:0 auto}
.askshut .askopen{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--studio-deep);background:var(--card-2);border:1px dashed var(--line);border-radius:999px;
  padding:6px 14px;cursor:pointer}
.askshut .askopen:hover{border-color:var(--studio);border-style:solid}
@media (max-width:640px){.askshut{padding-left:14px;padding-right:14px}}

/* ---------- Live brand sample: what the buyer sees, as they type ----------- */
.bp-wrap{margin:0 0 18px}
.bp-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:8px}
.bp-frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;max-width:520px}
.bp-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);
  background:var(--card-2);min-width:0}
.bp-chip{font-size:12px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-you{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
.bp-banner{position:relative;padding:18px 16px 16px;background:var(--bp);background-size:cover;
  background-position:center;color:#fff}
.bp-logo{position:absolute;top:14px;right:14px;width:34px;height:34px;object-fit:contain;
  background:rgba(255,255,255,.9);border-radius:6px;padding:3px}
.bp-eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.bp-name{margin:5px 0 0;font-size:21px;line-height:1.15;font-weight:600;max-width:82%;word-break:break-word}
.bp-day{font-size:12px;opacity:.9;margin-top:5px}
.bp-dots{display:flex;gap:3px;flex-wrap:wrap;margin-top:9px}
.bp-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.32);flex:none}
.bp-dot.on{background:#fff}
.bp-tag{margin-top:11px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  opacity:.92;border-top:1px solid rgba(255,255,255,.28);padding-top:8px;word-break:break-word}
.bp-body{padding:14px 16px 16px}
.bp-h{font-size:15px;font-weight:600;color:var(--ink)}
.bp-week{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);margin-top:4px;word-break:break-word}
.bp-days{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.bp-wd{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  font-size:11px;color:var(--ink-2);flex:none}
.bp-wd.on{background:var(--bp);border-color:var(--bp);color:#fff}
.bp-cta{margin-top:13px;width:100%;padding:10px;border:0;border-radius:8px;background:var(--bp);color:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:default;
  word-break:break-word}
.bp-hash{margin-top:8px;font-size:11px;color:var(--ink-2);word-break:break-word}
@media (max-width:560px){.bp-frame{max-width:100%}.bp-name{max-width:100%;font-size:19px}}

/* ---------- The page menu always clears the sticky Ask dock ----------------
   The dock pins under the top bar, so the menu below it used to scroll
   straight underneath: still on screen for a moment, then covered — and a
   covered button swallows the click instead of answering it. The menu now
   pins directly beneath the dock, whatever height the dock happens to be
   (--askdock-h is measured in renderAsk and on resize), so it is reachable
   at every scroll position. Only the page menu sticks; the phase pills
   inside a build scroll with their panel as before. */
.phases-nav.studio-pagenav{position:sticky;top:calc(var(--topbar-h,63px) + var(--askdock-h,0px));
  z-index:20;background:var(--paper);padding:10px 0 8px;margin:0 0 12px}
@media (max-width:640px){.phases-nav.studio-pagenav{padding:8px 0 6px}}

/* ---------- Back to the Money Move Generator ------------------------------ */
.genback{margin-top:14px}
.genback-links{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.genback-link{display:block;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--card-2);text-decoration:none;color:var(--ink);min-width:0}
.genback-link:hover{border-color:var(--studio);background:var(--studio-soft)}
.genback-link b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.genback-link b::after{content:" \2197";color:var(--studio);font-weight:400}
.genback-link span{display:block;margin-top:3px;font-size:12px;color:var(--ink-2);line-height:1.45}

/* ---------- Brand image slots: show the whole image ------------------------
   Every slot used to be a 120px band with object-fit:cover, so a 1536×1024
   hero arrived cropped to a strip and a creator could not tell what had been
   generated. Each slot now holds its real shape and the image is contained,
   never cropped; the checkerboard shows transparency honestly. */
.imgslot{width:100%;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;overflow:hidden;
  background:var(--paper-2);
  background-image:linear-gradient(45deg,rgba(0,0,0,.035) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.035) 75%),
                   linear-gradient(45deg,rgba(0,0,0,.035) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.035) 75%);
  background-size:14px 14px;background-position:0 0,7px 7px;
  display:grid;place-items:center;max-height:190px}
.imgslot img{width:100%;height:100%;object-fit:contain;display:block}