:root{
  --ink:#10151F;
  --ink-soft:#4A5265;
  --ink-faint:#8A93A6;
  --paper:#F2F4F7;
  --paper-raised:#FFFFFF;
  --line:#DCE1E8;
  --line-soft:#EAEDF2;
  --gold:#E0A72E;
  --gold-deep:#B5821E;
  --teal:#1F6F63;
  --teal-deep:#154F46;
  --danger:#B4432F;
  --tenant-primary:#4B88C8;
  --tenant-accent:#E0A72E;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --shadow-card:0 1px 2px rgba(16,21,31,0.04), 0 8px 24px rgba(16,21,31,0.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:600;margin:0;color:var(--ink);}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;}
.mono{font-family:'IBM Plex Mono',monospace;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

/* ---------- shell / nav ---------- */
.shell{max-width:1080px;margin:0 auto;padding:0 24px;}
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(242,244,247,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1080px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto;}
.brand-mark{
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:26px;color:var(--teal-deep);line-height:1;
}
.brand-word{font-family:'Fraunces',serif;font-weight:600;font-size:19px;letter-spacing:-0.01em;}
.tabs{display:flex;gap:4px;flex-wrap:wrap;}
.tab-btn{
  background:none;border:1px solid transparent;color:var(--ink-soft);
  font-size:13.5px;font-weight:500;padding:8px 14px;border-radius:100px;
  transition:background .15s, color .15s;
}
.tab-btn:hover{background:var(--line-soft);color:var(--ink);}
.tab-btn.active{background:var(--ink);color:#fff;}
.proto-badge{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;
  background:var(--gold);color:var(--ink);padding:5px 10px;border-radius:100px;
  font-weight:500;white-space:nowrap;
}

.view{display:none;padding:56px 0 96px;}
.view.active{display:block;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:100px;padding:12px 22px;font-size:14px;font-weight:600;
  border:1px solid transparent;transition:transform .12s, box-shadow .12s, background .15s;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--ink);color:#fff;}
.btn-primary:hover{background:#000;}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-gold:hover{background:var(--gold-deep);color:#fff;}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink);}
.btn-outline:hover{border-color:var(--ink);}
.btn-teal{background:var(--teal);color:#fff;}
.btn-teal:hover{background:var(--teal-deep);}
.btn:disabled{opacity:0.45;cursor:not-allowed;}
.btn-sm{padding:8px 14px;font-size:12.5px;}

/* ---------- OVERVIEW ---------- */
.hero{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;}
.hero h1{font-size:46px;line-height:1.08;letter-spacing:-0.01em;}
.hero h1 em{font-style:italic;color:var(--teal-deep);}
.hero p.lede{margin-top:18px;font-size:16.5px;color:var(--ink-soft);max-width:46ch;}
.hero-cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;}
.vertical-row{margin-top:34px;display:flex;gap:10px;flex-wrap:wrap;}
.v-pill{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;
  padding:6px 12px;border-radius:100px;border:1px solid var(--line);
}
.v-pill.live{background:var(--teal);color:#fff;border-color:var(--teal);}
.v-pill.soon{color:var(--ink-faint);}

/* transformer signature element */
.transformer{position:relative;height:340px;}
.t-card{
  position:absolute;width:270px;border-radius:var(--radius-lg);padding:22px;
  box-shadow:var(--shadow-card);
}
.t-raw{
  top:0;left:0;background:var(--paper-raised);border:1px dashed var(--line);
  color:var(--ink-soft);font-size:14px;
}
.t-raw .eyebrow{margin-bottom:8px;}
.t-polished{
  bottom:0;right:0;background:var(--ink);color:#fff;
  border:1px solid var(--ink);
}
.t-polished .eyebrow{color:rgba(255,255,255,0.55);margin-bottom:10px;}
.t-polished blockquote{
  font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:19px;
  line-height:1.35;margin:0 0 14px;
}
.t-polished .stars{color:var(--gold);letter-spacing:2px;font-size:14px;margin-bottom:10px;}
.t-arrow{
  position:absolute;top:150px;left:210px;width:100px;height:60px;
  display:flex;align-items:center;justify-content:center;
}
.t-arrow svg{width:100%;height:100%;}
@media (prefers-reduced-motion: no-preference){
  .t-polished{animation:riseIn .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:.25s;}
  .t-raw{animation:fadeIn .6s ease both;}
}
@keyframes riseIn{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.steps-row{margin-top:100px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.step-card{border-top:2px solid var(--ink);padding-top:16px;}
.step-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-faint);}
.step-card h3{font-size:19px;margin-top:8px;}
.step-card p{margin-top:8px;color:var(--ink-soft);font-size:14px;}

@media (max-width:800px){
  .hero{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
  .transformer{height:auto;position:static;display:flex;flex-direction:column;gap:16px;margin-top:12px;}
  .t-card{position:static;width:100%;}
  .t-arrow{display:none;}
  .steps-row{grid-template-columns:1fr;}
}

/* ---------- STUDIO (Build Your Page) ---------- */
.studio-head{margin-bottom:36px;max-width:60ch;}
.studio-grid{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start;}
@media (max-width:900px){.studio-grid{grid-template-columns:1fr;}}

.studio-step{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 26px 30px;margin-bottom:20px;
}
.studio-step h3{font-size:16px;display:flex;align-items:center;gap:10px;}
.studio-step h3 .n{
  font-family:'IBM Plex Mono',monospace;font-size:12px;background:var(--ink);color:#fff;
  width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
}
.studio-step .sub{color:var(--ink-soft);font-size:13px;margin-top:6px;margin-bottom:18px;}

.field-label{font-size:12.5px;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:6px;}
input[type=text], input[type=number], input[type=email], input[type=password]{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:inherit;font-size:14px;background:var(--paper);color:var(--ink);
}
input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,input[type=password]:focus{border-color:var(--teal);}
.field{margin-bottom:16px;}
.field-row{display:flex;gap:14px;flex-wrap:wrap;}
.field-row .field{flex:1;min-width:140px;}

.dropzone{
  border:1.5px dashed var(--line);border-radius:var(--radius-md);padding:20px;
  display:flex;align-items:center;gap:14px;background:var(--paper);
}
.logo-preview-box{
  width:56px;height:56px;border-radius:12px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;
}
.logo-preview-box img{width:100%;height:100%;object-fit:contain;padding:4px;}
.logo-preview-box .initial{font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:var(--ink-faint);}
.dz-actions{display:flex;gap:8px;flex-wrap:wrap;}
.file-input-wrap{position:relative;overflow:hidden;display:inline-block;}
.file-input-wrap input[type=file]{
  position:absolute;inset:0;opacity:0;cursor:pointer;
}

.swatch-row-label{font-size:12px;font-weight:600;color:var(--ink-soft);margin:16px 0 8px;}
.swatch-strip{display:flex;gap:8px;flex-wrap:wrap;}
.swatch{
  width:34px;height:34px;border-radius:9px;border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(16,21,31,0.08);
  position:relative;transition:transform .1s;
}
.swatch:hover{transform:scale(1.08);}
.swatch.selected{border-color:var(--ink);}
.swatch.selected::after{
  content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.4);
}

.vertical-cards{display:flex;gap:14px;flex-wrap:wrap;}
.vcard{
  border:1.5px solid var(--line);border-radius:var(--radius-md);padding:16px 18px;flex:1;min-width:170px;
  cursor:pointer;transition:border-color .15s, background .15s;
}
.vcard.selected{border-color:var(--teal);background:rgba(31,111,99,0.06);}
.vcard.disabled{opacity:0.55;cursor:not-allowed;}
.vcard h4{font-size:14.5px;}
.vcard .tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;margin-top:6px;display:inline-block;color:var(--ink-faint);}
.vcard.selected .tag{color:var(--teal-deep);}

.qbank-cat{margin-bottom:14px;}
.qbank-cat .cat-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;display:block;}
.qitem{
  display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line-soft);
}
.qitem input{margin-top:3px;flex-shrink:0;accent-color:var(--teal);width:16px;height:16px;}
.qitem label{font-size:13.5px;color:var(--ink);cursor:pointer;}
.qbank-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;}
.qcount{font-size:12.5px;color:var(--ink-soft);}

.toggle-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.switch{position:relative;width:42px;height:24px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:var(--line);border-radius:100px;transition:.15s;cursor:pointer;}
.slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;}
input:checked + .slider{background:var(--teal);}
input:checked + .slider::before{transform:translateX(18px);}
.handle-warn{font-size:11.5px;color:var(--danger);margin:5px 0 0;line-height:1.4;}
.disclosure-preview{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:12.5px;color:var(--ink-soft);line-height:1.5;
}
.fine-note{font-size:11.5px;color:var(--ink-faint);margin-top:8px;}

/* live mini preview */
.preview-shell{position:sticky;top:90px;}
.preview-frame{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-card);
}
.preview-frame .pf-label{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);padding:12px 18px 0;
}
.pf-body{padding:14px 18px 20px;}
.pf-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.pf-logo{width:38px;height:38px;border-radius:9px;overflow:hidden;flex-shrink:0;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.pf-logo img{width:100%;height:100%;object-fit:contain;padding:3px;}
.pf-bizname{font-family:'Fraunces',serif;font-weight:600;font-size:15px;}
.pf-disclosure{
  font-size:10.5px;color:var(--ink-faint);background:var(--paper);border-left:3px solid var(--tenant-primary);
  padding:8px 10px;border-radius:4px;margin-bottom:12px;line-height:1.4;
}
.pf-stars{color:var(--gold);letter-spacing:3px;margin-bottom:10px;}
.pf-qcount{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-soft);
  background:var(--paper);padding:5px 10px;border-radius:100px;
}
.pf-btn{
  margin-top:14px;width:100%;padding:11px;border-radius:100px;border:none;
  background:var(--tenant-primary);color:#fff;font-weight:600;font-size:13px;
}
.studio-continue{display:flex;justify-content:flex-end;margin-top:8px;gap:10px;}

/* ---------- CLIENT PREVIEW ---------- */
.cp-wrap{max-width:640px;margin:0 auto;}
.cp-card{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:36px 34px;box-shadow:var(--shadow-card);
}
.cp-header{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.cp-logo{width:54px;height:54px;border-radius:13px;overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cp-logo img{width:100%;height:100%;object-fit:contain;padding:5px;}
.cp-header h2{font-size:21px;}
.cp-header .sub{font-size:12.5px;color:var(--ink-soft);margin-top:3px;}
.cp-disclosure{
  font-size:12px;color:var(--ink-soft);background:var(--paper);border-left:3px solid var(--tenant-primary);
  padding:12px 14px;border-radius:6px;margin-bottom:24px;line-height:1.5;
}
.star-picker{display:flex;gap:8px;margin-bottom:26px;}
.star-picker button{
  background:none;border:none;font-size:30px;color:var(--line);line-height:1;padding:0;transition:color .1s, transform .1s;
}
.star-picker button.on{color:var(--gold);}
.star-picker button:hover{transform:scale(1.1);}
.cp-field{margin-bottom:20px;}
.cp-field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;}
.agent-helper{font-size:11.5px;color:var(--ink-faint);margin-top:6px;display:none;}
input.locked{background:var(--paper);color:var(--ink-soft);cursor:not-allowed;}
.name-row{display:flex;gap:10px;flex-wrap:wrap;}
.name-row input{flex:1;min-width:140px;}
.choice-row{display:flex;gap:10px;flex-wrap:wrap;}
.cp-field label.choice{
  display:inline-flex;align-items:center;gap:8px;font-weight:500;margin:0;
  padding:9px 16px;border:1px solid var(--line);border-radius:100px;background:var(--paper-raised);cursor:pointer;
}
.cp-field label.choice:has(input:checked){border-color:var(--tenant-primary);}
.cp-field label.choice input{accent-color:var(--tenant-primary);margin:0;}
.cp-field label.choice.consent{
  display:flex;align-items:flex-start;border:none;border-radius:0;background:none;padding:0;margin-top:10px;
  font-size:12.5px;color:var(--ink-soft);line-height:1.45;
}
.cp-field label.choice.consent input{margin-top:2px;flex-shrink:0;}

.demo-link-bar{
  max-width:640px;margin:0 auto 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;color:var(--ink-faint);
}
.demo-link-bar select{
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;padding:7px 10px;border:1px solid var(--line);
  border-radius:100px;background:var(--paper-raised);color:var(--ink);
}
.consultant-strip{
  display:none;align-items:center;gap:11px;background:var(--paper);border-radius:var(--radius-md);
  padding:10px 14px;margin-bottom:20px;
}
.consultant-strip img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--line);}
.consultant-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);}
.consultant-name{font-weight:600;font-size:13.5px;}

.roster-row{display:flex;flex-direction:column;gap:10px;padding:12px 0;border-bottom:1px solid var(--line-soft);}
.roster-row:last-child{border-bottom:none;}
.roster-row-top{display:flex;align-items:center;gap:12px;}
.roster-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;border:1px solid var(--line);}
.roster-avatar img{width:100%;height:100%;object-fit:cover;}
.roster-fields{flex:1;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.roster-fields input[type=text], .roster-fields input[type=email]{flex:1;min-width:140px;}
.roster-remove{background:none;border:none;color:var(--ink-faint);font-size:19px;line-height:1;padding:5px 9px;border-radius:6px;flex-shrink:0;}
.roster-remove:hover{color:var(--danger);background:var(--paper);}
.roster-link-row{display:flex;align-items:center;gap:10px;margin-left:56px;background:var(--paper);border:1px solid var(--line-soft);border-radius:8px;padding:8px 10px;}
.roster-qr{width:52px;height:52px;flex-shrink:0;background:#fff;border-radius:4px;padding:3px;border:1px solid var(--line-soft);}
.roster-qr svg{width:100%;height:100%;display:block;}
.roster-link-text{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-soft);flex:1;min-width:0;word-break:break-all;}
.roster-link-pending{margin-left:56px;font-size:12px;color:var(--ink-faint);font-style:italic;}
textarea{
  width:100%;min-height:66px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--paper);resize:vertical;
}
textarea:focus{border-color:var(--teal);}
.generate-bar{display:flex;justify-content:center;margin:8px 0 6px;}
.btn-generate{
  background:var(--tenant-primary);color:#fff;padding:14px 30px;border-radius:100px;font-weight:600;font-size:14.5px;
  display:inline-flex;align-items:center;gap:10px;border:none;
}
.btn-generate:disabled{opacity:.6;}
/* inline-block: an inline span ignores width/height and can't be rotated,
   so the spinner used to be invisible and static inside the button label. */
.spinner{display:inline-block;flex-shrink:0;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
#gen-btn-label{display:inline-flex;align-items:center;gap:10px;}
.gen-wait-note{text-align:center;font-size:12.5px;color:var(--ink-soft);margin:8px 0 0;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Placeholder cards where the drafts will appear (r.html, while generating). */
.draft-skeleton{display:flex;flex-direction:column;gap:16px;}
.skeleton-card{display:flex;flex-direction:column;gap:10px;}
.sk-line{
  display:block;height:11px;border-radius:6px;
  background:linear-gradient(90deg,var(--line-soft) 0%,var(--line) 50%,var(--line-soft) 100%);
  background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;
}
.sk-line.sk-tall{height:18px;margin-bottom:4px;}
@keyframes shimmer{from{background-position:100% 0;}to{background-position:-100% 0;}}
/* Reduced motion: nothing spins or shimmers; the changing status text
   still shows progress. */
@media (prefers-reduced-motion: reduce){
  .spinner{animation:none;border-color:rgba(255,255,255,.85);}
  .sk-line{animation:none;}
}

.gen-error{
  background:#FBEDEA;border:1px solid #EBC5BB;color:var(--danger);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:13px;margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;
}

.options-wrap{margin-top:26px;display:flex;flex-direction:column;gap:16px;}
.option-card{
  border:1.5px solid var(--line);border-radius:var(--radius-md);padding:20px 22px;background:var(--paper);
}
.option-card.chosen{border-color:var(--tenant-primary);background:var(--paper-raised);}
.option-card blockquote{
  font-family:'Fraunces',serif;font-style:italic;font-size:17px;line-height:1.4;margin:0 0 12px;
  border-left:3px solid var(--tenant-accent);padding-left:14px;
}
.option-body{font-size:13px;color:var(--ink-soft);white-space:pre-wrap;margin-bottom:8px;}
.option-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase;margin-bottom:8px;display:block;}
.option-actions{display:flex;gap:8px;margin-top:10px;}

.final-edit{margin-top:22px;}
.final-edit textarea{min-height:130px;}

.share-row{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;}
.notify-row{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.notify-row button:disabled{opacity:.7;cursor:default;}
.notify-note{font-size:12.5px;color:var(--ink-soft);flex:1;min-width:180px;}
.share-btn{
  border:1px solid var(--line);border-radius:100px;padding:9px 16px;font-size:12.5px;font-weight:600;
  background:var(--paper-raised);display:inline-flex;align-items:center;gap:7px;position:relative;
}
.share-btn:hover{border-color:var(--ink);}
.share-btn .dot{width:7px;height:7px;border-radius:50%;}
.share-btn.review .dot{background:var(--teal);}
.share-btn.share .dot{background:var(--tenant-accent);}
.share-tip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:11px;padding:6px 10px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .12s;
}
.share-btn:hover .share-tip{opacity:1;}

.favor-banner{
  margin-top:26px;background:linear-gradient(135deg,var(--teal-deep) 0%,var(--ink) 100%);
  border-radius:var(--radius-md);padding:26px 26px 22px;color:#fff;position:relative;overflow:hidden;
}
.favor-banner::before{
  content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;
  background:rgba(224,167,46,0.14);border-radius:50%;pointer-events:none;
}
.favor-eyebrow{
  display:inline-flex;align-items:center;gap:6px;background:rgba(224,167,46,0.18);
  border:1px solid rgba(224,167,46,0.35);color:var(--gold);font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 12px;border-radius:100px;margin-bottom:14px;
}
.favor-banner h3{font-size:19px;color:#fff;margin-bottom:10px;}
.favor-banner p{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,0.85);position:relative;}
.favor-note{
  margin-top:16px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);
  border-radius:var(--radius-sm);padding:13px 15px;font-size:12.5px;color:rgba(255,255,255,0.8);line-height:1.6;position:relative;
}
.favor-note strong{color:#fff;}

.cp-footer{margin-top:28px;padding-top:18px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.lo-preview-bar{margin-top:18px;padding-top:18px;border-top:1px dashed var(--line);text-align:center;}

/* ---------- LO EMAIL MODAL ---------- */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(16,21,31,0.55);z-index:80;
  align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;
}
.modal-overlay.show{display:flex;}
.modal-email{
  position:relative;background:var(--paper-raised);border-radius:var(--radius-lg);max-width:520px;width:100%;
  box-shadow:0 20px 60px rgba(16,21,31,0.35);overflow:hidden;
}
.modal-close{
  position:absolute;top:14px;right:16px;background:none;border:none;font-size:24px;line-height:1;
  color:var(--ink-faint);z-index:2;padding:4px 8px;border-radius:6px;
}
.modal-close:hover{color:var(--ink);background:var(--paper);}
.email-chrome{
  background:var(--paper);padding:16px 24px;font-size:12px;color:var(--ink-soft);
  border-bottom:1px solid var(--line);line-height:1.8;
}
.mono-label{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);display:inline-block;width:52px;
}
.email-body{padding:26px 26px 30px;}
.email-hero{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.email-hero img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:1px solid var(--line);}
.email-hero h3{font-size:18px;}
.email-hero .sub{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.email-section{margin-bottom:22px;}
.email-section .sec-label{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:10px;display:block;
}
.email-quote{
  font-family:'Fraunces',serif;font-style:italic;font-size:15.5px;line-height:1.45;
  border-left:3px solid var(--tenant-accent, var(--gold));padding-left:13px;color:var(--ink);
}
.email-stars{color:var(--gold);letter-spacing:2px;font-size:14px;margin-bottom:8px;}
.lo-caption-box{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 15px;font-size:13px;color:var(--ink);white-space:pre-wrap;margin-bottom:10px;
}
.lo-caption-box textarea{width:100%;border:none;background:none;font-family:inherit;font-size:13px;color:var(--ink);resize:vertical;min-height:110px;padding:0;}
.copy-row{display:flex;justify-content:flex-end;gap:8px;margin-bottom:4px;}
.copy-btn{
  font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:100px;border:1px solid var(--line);
  background:var(--paper-raised);color:var(--ink-soft);
}
.copy-btn:hover{border-color:var(--ink);color:var(--ink);}
.copy-btn.copied{background:var(--teal);color:#fff;border-color:var(--teal);}
.email-loading{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:13px;padding:20px 0;}
.powered-badge{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);display:flex;align-items:center;gap:6px;}
.powered-badge .mark{font-family:'Fraunces',serif;font-style:italic;color:var(--teal-deep);}

/* ---------- PRICING ---------- */
.pricing-wrap{max-width:900px;margin:0 auto;text-align:center;}
.pricing-wrap h1{font-size:36px;}
.pricing-wrap .sub{color:var(--ink-soft);margin-top:12px;font-size:15px;}
.billing-toggle{
  display:inline-flex;align-items:center;gap:2px;margin-top:28px;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:100px;padding:4px;
}
.billing-toggle button{
  border:none;background:none;padding:9px 18px;border-radius:100px;font-size:13px;font-weight:600;
  color:var(--ink-soft);display:inline-flex;align-items:center;gap:8px;transition:background .15s,color .15s;
}
.billing-toggle button.active{background:var(--ink);color:#fff;}
.save-chip{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.03em;
  background:var(--gold);color:var(--ink);padding:2px 7px;border-radius:100px;font-weight:600;
}
.billing-toggle button:not(.active) .save-chip{background:rgba(224,167,46,0.25);color:var(--gold-deep);}
.price-card{
  max-width:380px;margin:24px auto 0;background:var(--paper-raised);border:1.5px solid var(--ink);
  border-radius:var(--radius-lg);padding:36px 34px;text-align:left;box-shadow:var(--shadow-card);
}
.price-card .plan-name{font-family:'Fraunces',serif;font-weight:600;font-size:19px;}
.price-amount{font-family:'Fraunces',serif;font-size:44px;font-weight:600;margin:14px 0 2px;}
.price-amount span{font-family:'Space Grotesk',sans-serif;font-size:15px;color:var(--ink-soft);font-weight:500;}
.price-note{font-size:11.5px;color:var(--ink-faint);margin-bottom:22px;}
.price-features{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:10px;}
.price-features li{font-size:13.5px;color:var(--ink-soft);display:flex;gap:9px;align-items:flex-start;}
.price-features li::before{content:'✓';color:var(--teal);font-weight:700;flex-shrink:0;}
.stripe-note{
  display:none;margin-top:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:12.5px;color:var(--ink-soft);
}
.stripe-note.show{display:block;}

/* ---------- AUTH PAGES (signup/login) ---------- */
.auth-wrap{max-width:420px;margin:64px auto;padding:0 20px;}
.auth-card{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:36px 32px;box-shadow:var(--shadow-card);
}
.auth-card h1{font-size:24px;margin-bottom:8px;}
.auth-card .sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:26px;}
.auth-error{
  background:#FBEDEA;border:1px solid #EBC5BB;color:var(--danger);border-radius:var(--radius-sm);
  padding:11px 13px;font-size:13px;margin-bottom:16px;display:none;
}
.auth-error.show{display:block;}
.auth-success{
  background:#EAF4F2;border:1px solid #BFE0D9;color:var(--teal-deep);border-radius:var(--radius-sm);
  padding:11px 13px;font-size:13px;margin-bottom:16px;display:none;
}
.auth-success.show{display:block;}
.auth-submit{width:100%;justify-content:center;margin-top:6px;}
.auth-switch{text-align:center;margin-top:20px;font-size:13px;color:var(--ink-soft);}
.auth-switch a{color:var(--teal-deep);font-weight:600;text-decoration:none;}
.auth-switch a:hover{text-decoration:underline;}
.auth-terms{text-align:center;margin-top:12px;font-size:12px;line-height:1.5;color:var(--ink-soft);}
.auth-terms a{color:inherit;text-decoration:underline;}
.auth-forgot{display:inline-block;margin-top:8px;font-size:12.5px;color:var(--teal-deep);font-weight:600;text-decoration:none;}
.auth-forgot:hover{text-decoration:underline;}
.auth-error a{color:inherit;font-weight:600;}

@media (max-width:600px){
  .shell{padding:0 16px;}
  .topbar-inner{padding:12px 16px;}
  .cp-card{padding:26px 20px;}
  .studio-step{padding:20px 18px 24px;}
}