/* ninetyplan — app.css
   View-specific styles layered on top of styles.css design system.
*/

/* ---------------- App shell / nav ---------------- */
.app-nav{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11,15,20,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.app-nav-inner{
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.app-nav-links{
  display: flex;
  gap: var(--space-2);
  flex: 1;
}
.app-nav-link{
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.app-nav-link:hover{ color: var(--text); background: var(--surface-2); }
.app-nav-link.is-active{ color: var(--primary-contrast); background: var(--primary); }
.app-nav-user{
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.app-nav-username{
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 600;
}
.app-main{
  padding: var(--space-7) var(--space-5) var(--space-9);
  min-height: calc(100vh - 64px);
}

/* ---------------- Generic view bits ---------------- */
.view-narrow{ max-width: var(--container-narrow); margin: 0 auto; }
.page-title{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  margin: 0 0 var(--space-1);
  /* Explicit ink: inherited color is the variant landing's near-black when
     the app booted inside a cream A/B shell — invisible on dark surfaces. */
  color: var(--text);
}
.page-sub{ color: var(--text-dim); font-size: 15px; margin: 0 0 var(--space-6); }

.form-card{ display: flex; flex-direction: column; gap: var(--space-4); }
.form-actions{ display: flex; gap: var(--space-3); justify-content: flex-end; }

.spinner-row{ display: flex; align-items: center; gap: var(--space-3); color: var(--text-dim); padding: var(--space-5) 0; }
.spinner, .spinner-lg{
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
.spinner{ width: 18px; height: 18px; }
.spinner-lg{ width: 44px; height: 44px; border-width: 4px; margin: 0 auto var(--space-4); }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Toast */
.toast{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity var(--transition-med), transform var(--transition-med);
  z-index: 2000;
}
.toast.is-visible{ opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-error{ border-color: var(--danger-dim); color: var(--danger); }

/* ---------------- Dashboard ---------------- */
.dashboard-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.stat-card{
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.stat-value{ font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--primary); }
.stat-label{ font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.dashboard-filters{ display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.dashboard-filters .input{ flex: 1; min-width: 180px; }
.dashboard-filters select.input{ flex: 0 0 180px; }
.plan-row{ display: flex; }
.plan-row-main{ flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.plan-row-title-line{ display: flex; align-items: baseline; gap: var(--space-2); }
.plan-row-title{ font-weight: 700; font-size: 16px; color: var(--text); }
.plan-row-company{ color: var(--text-dim); font-size: 14px; }
.plan-row-meta{ display: flex; align-items: center; gap: var(--space-3); }
.plan-row-updated{ font-size: 13px; color: var(--text-faint); }
.plan-row-actions{ display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* ---------------- New Plan: posting ---------------- */
.confirm-block{ display: flex; flex-direction: column; gap: var(--space-3); border-top: 1px solid var(--border-soft); padding-top: var(--space-4); }
.detected-seniority{ margin: 0; }
.sample-link-btn{ align-self: flex-start; }

/* ---------------- Guided walkthrough stepper ---------------- */
.intake-stepper{ display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); flex-wrap: wrap; }
.intake-step{ display: flex; align-items: center; gap: 8px; }
.intake-step-num{
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--surface-2); color: var(--text-faint);
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.intake-step.is-active .intake-step-num{ background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); }
.intake-step.is-done .intake-step-num{ background: var(--accent); color: #06211C; border-color: var(--accent); }
.intake-step-label{ font-size: 13px; font-weight: 600; color: var(--text-faint); white-space: nowrap; }
.intake-step.is-active .intake-step-label{ color: var(--text); }
.intake-step.is-done .intake-step-label{ color: var(--text-dim); }
.intake-step-connector{ width: 22px; height: 1px; background: var(--border-soft); flex-shrink: 0; }

/* ---------------- Guided hints (why-we-ask / examples / tips) ---------------- */
.hint-callout{ background: var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.hint-callout-label{ font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin: 0; }
.hint-callout-text{ font-size: 13.5px; color: var(--text-dim); margin: 0; line-height: 1.5; }
.hint-callout-example{ font-size: 13px; color: var(--text-faint); font-style: italic; margin: 0; }
.example-toggle-btn{ align-self: flex-start; background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.example-toggle-btn:hover{ color: var(--text); }

/* ---------------- Wizard ---------------- */
.wizard-progress{ display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.wizard-progress > span{ font-size: 13px; color: var(--text-dim); font-weight: 600; }
.wizard-progress-bar{ height: 6px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.wizard-progress-fill{ height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width var(--transition-med); }
.wizard-card{ gap: var(--space-4); }
.wizard-question{ font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 0; color: var(--text); }
.wizard-hint{ font-size: 12.5px; color: var(--text-faint); margin: -6px 0 0; }

/* ---------------- Resume Snapshot slide ---------------- */
.skill-assessment .badge{ align-self: flex-start; }
/* The experience-level line is a full sentence, not a chip — as a pill its
   rounded corners clipped the wrapped text against the edges. Render it as
   a padded, left-aligned block so the text breathes. */
.skill-assessment .badge-gold{
  display: block; align-self: stretch;
  padding: 12px 16px; border-radius: var(--radius-md);
  line-height: 1.5; text-align: left; white-space: normal;
}
.skill-assessment .one-pager-list{ background: var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.skill-assessment .one-pager-list li{ color: var(--text); }

/* ---------------- Generating ---------------- */
.view-generating{ display: flex; align-items: center; justify-content: center; min-height: 50vh; }
.generating-card{ text-align: center; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.generating-message{ color: var(--text-dim); font-size: 15px; min-height: 22px; }

/* ---------------- Plan viewer ---------------- */
.view-plan{ max-width: 1040px; margin: 0 auto; }
.plan-header{ display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
.plan-header-top{ display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.field-inline{ min-width: 200px; flex: 1; margin: 0; }
.editable-input{ font-family: var(--font-display); font-weight: 700; font-size: 18px; }
#company-name.editable-input, .plan-company-input{ font-weight: 500; font-size: 15px; }
#plan-title-name-input.editable-input{ font-weight: 700; font-size: 15px; color: var(--primary); }
.save-indicator{ font-size: 12.5px; color: var(--text-faint); margin-left: auto; align-self: center; }
.save-indicator.is-error{ color: var(--danger); }
.plan-header-actions{ display: flex; gap: var(--space-2); flex-wrap: wrap; }

.phases-grid{ display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.phase-card{ display: flex; flex-direction: column; gap: var(--space-4); }
.phase-card-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.phase-title{ font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 0; }
.phase-sub{ font-size: 13px; color: var(--text-dim); margin: 2px 0 0; }

/* ── Free-preview paywall teaser (locked phase / talking points) ────────
   Placeholder bars only — never real goal text — so ~80% of a freshly
   generated plan reads as "generated, ready, locked" instead of leaking
   content that a screenshot or copy-paste could lift for free. */
.phase-card-locked{ position: relative; }
.phase-locked-blur{ display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px; }
.phase-locked-lines{ display: flex; flex-direction: column; gap: 8px; margin: 0 0 6px; }
.phase-locked-lines span{ display: block; height: 13px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--bg-raised)); opacity: .8; }
.phase-locked-lines span:nth-child(1){ width: 92%; }
.phase-locked-lines span:nth-child(2){ width: 78%; }
.phase-locked-lines span:nth-child(3){ width: 62%; }
.phase-locked-cta{ display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding-top: var(--space-3); margin-top: var(--space-2); border-top: 1px solid var(--border-soft); }
.phase-locked-msg{ font-size: 13.5px; color: var(--text-dim); margin: 0; max-width: 420px; line-height: 1.5; }
.phase-section{ display: flex; flex-direction: column; gap: var(--space-2); }
.phase-section-title{ font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0; }
.editable-list{ display: flex; flex-direction: column; gap: var(--space-2); }
.editable-list-item{ display: flex; align-items: flex-start; gap: var(--space-2); background: var(--bg-raised); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 8px 10px; }
.editable-block{ flex: 1; font-size: 14px; line-height: 1.5; color: var(--text); outline: none; min-height: 20px; word-break: break-word; }
.editable-block:focus{ box-shadow: 0 0 0 2px rgba(31,186,160,0.25); border-radius: var(--radius-sm); }
.editable-block:empty::before{ content: "Click to edit…"; color: var(--text-faint); }
.list-remove-btn{ background: transparent; border: none; color: var(--text-faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; flex-shrink: 0; }
.list-remove-btn:hover{ color: var(--danger); }
.add-item-btn{ align-self: flex-start; }

/* ---------------- Talking points card ---------------- */
.talking-points-card{ margin-top: var(--space-5); }

/* ---------------- Feedback banner ---------------- */
.feedback-banner{ margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.feedback-question{ font-weight: 600; font-size: 15px; margin: 0; }

/* ---------------- Share modal ---------------- */
.share-modal-body{ display: flex; flex-direction: column; gap: var(--space-4); }
.share-link-row{ display: flex; gap: var(--space-2); flex-wrap: wrap; }
.share-link-row .input{ flex: 1; }
.modal-actions{ display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-2); }

/* ---------------- Export / one-pager ---------------- */
.view-export{ max-width: 860px; margin: 0 auto; }
.export-toolbar{ display: flex; justify-content: space-between; margin-bottom: var(--space-5); }
.one-pager{ background: #10151C; color: var(--text); padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-6); }
.one-pager-head h1{ font-family: var(--font-display); font-size: 26px; margin: 0 0 4px; }
.one-pager-company{ color: var(--text-dim); font-size: 15px; margin: 0; }
.one-pager-tag{ color: var(--primary); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 6px 0 0; }
.one-pager-phase{ border-top: 1px solid var(--border-soft); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.one-pager-phase h2{ font-family: var(--font-display); font-size: 18px; margin: 0; }
.one-pager-list h3{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin: 0 0 6px; }
.one-pager-list ul{ display: flex; flex-direction: column; gap: 4px; padding-left: 18px; list-style: disc; }
.one-pager-list li{ font-size: 14px; color: var(--text-dim); line-height: 1.5; }

@media print{
  body{ background: #fff; }
  .no-print, .app-nav{ display: none !important; }
  .one-pager{ background: #fff; color: #111; box-shadow: none; border: none; }
  .one-pager-company{ color: #444; }
  .one-pager-list li{ color: #222; }
  .one-pager-phase{ border-top-color: #ddd; }
  /* Watermark must survive the print — that's the whole conversion lever. */
  .one-pager-watermark{ -webkit-print-color-adjust: exact; print-color-adjust: exact; opacity: .16 !important; }
  .one-pager-watermark span{ color: #b8933a !important; }
}

/* ── Free watermarked export (conversion) ────────────────────────────── */
.one-pager--watermarked{ position: relative; overflow: hidden; }
.one-pager-watermark{
  position: absolute; inset: -20%; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center; gap: 46px;
  transform: rotate(-24deg); opacity: .12;
}
.one-pager-watermark span{ white-space: nowrap; font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: 2px; color: var(--primary); text-align: center; }
.one-pager--watermarked > *:not(.one-pager-watermark){ position: relative; z-index: 1; }
.export-unlock-banner{
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(245,158,11,.14), rgba(16,185,129,.10));
  border: 1px solid var(--accent); border-radius: var(--radius-md);
  padding: 12px 16px; margin-bottom: 14px; font-size: 14px; line-height: 1.4;
}

/* ---------------- Present mode ---------------- */
.present-overlay{
  position: fixed; inset: 0; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 500; padding: var(--space-8);
}
.present-slide{ max-width: 900px; width: 100%; display: flex; flex-direction: column; gap: var(--space-4); text-align: left; }
.present-slide-title{ text-align: center; align-items: center; }
.present-eyebrow{ color: var(--accent); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; margin: 0; }
.present-slide h1{ font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 2vw, 3rem); margin: 0; }
.present-company{ color: var(--text-dim); font-size:18px; margin: 0; }
.present-candidate{ color: var(--text-faint); font-size: 14px; margin-top: var(--space-3); }
.present-col{ margin-top: var(--space-2); }
.present-col h3{ font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); margin: 0 0 6px; }
.present-col ul{ display: flex; flex-direction: column; gap: 6px; padding-left: 20px; list-style: disc; }
.present-col li{ font-size: 16px; color: var(--text); line-height: 1.5; }
.present-controls{ position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border-soft); padding: 10px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); }
.present-counter{ font-size: 13px; color: var(--text-dim); font-weight: 600; }

/* ---------------- Shared (public) view ---------------- */
.shared-main{ max-width: 900px; }
.shared-banner{ display: flex; align-items: center; gap: var(--space-2); color: var(--text-dim); font-size: 14px; font-weight: 600; margin-bottom: var(--space-5); }

/* ---------------- Blog ---------------- */
.blog-main{ max-width: 880px; }
.blog-hero{ display:flex; flex-direction:column; gap:var(--space-3); margin-bottom: var(--space-7); }
.blog-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--space-5); }
.blog-card{ display:flex; flex-direction:column; gap:var(--space-2); text-decoration:none; transition: border-color var(--transition-fast), transform var(--transition-fast); }
.blog-card:hover{ border-color: var(--text-faint); transform: translateY(-2px); }
.blog-tag{ align-self:flex-start; }
.blog-card-title{ font-family: var(--font-display); font-size:18px; font-weight:700; margin:0; }
.blog-card-dek{ font-size:14px; color:var(--text-dim); line-height:1.6; margin:0; }
.blog-meta{ font-size:12.5px; color:var(--text-faint); font-weight:600; }

.blog-post{ display:flex; flex-direction:column; gap:var(--space-4); }
.blog-back-link{ font-size:14px; font-weight:600; color:var(--accent); align-self:flex-start; }
.blog-back-link:hover{ text-decoration:underline; }
.blog-post-title{ font-family: var(--font-display); font-size:clamp(1.6rem,1.3rem + 1.3vw,2.2rem); font-weight:700; margin:0; }
.blog-post-body{ display:flex; flex-direction:column; gap:var(--space-4); margin-top: var(--space-2); }
.blog-post-body h2{ font-family: var(--font-display); font-size:20px; font-weight:700; margin: var(--space-2) 0 0; }
.blog-post-body p{ font-size:15.5px; line-height:1.75; color: var(--text-dim); }
.blog-list{ display:flex; flex-direction:column; gap: var(--space-2); padding-left: 20px; list-style: disc; }
.blog-list li{ font-size:15.5px; line-height:1.7; color: var(--text-dim); }
.blog-cta-box{ margin-top: var(--space-5); display:flex; flex-direction:column; gap: var(--space-3); align-items:flex-start; background: var(--bg-raised); }
.blog-cta-box h3{ font-family: var(--font-display); font-size:19px; font-weight:700; margin:0; }
.blog-cta-box p{ font-size:14.5px; color: var(--text-dim); margin:0; }

/* ---------------- Copy protection ---------------- */
.no-copy{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.no-copy img{ -webkit-user-drag: none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 960px){
  .phases-grid{ grid-template-columns: 1fr; }
  .app-nav-links{ display: none; }
  .dashboard-stats{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .app-main{ padding: var(--space-5) var(--space-3) var(--space-8); }
  .plan-header-top{ flex-direction: column; align-items: stretch; }
  .save-indicator{ margin-left: 0; }
  .present-controls{ flex-wrap: wrap; justify-content: center; }
  .dashboard-filters{ flex-direction: column; }
  .dashboard-filters select.input{ flex: 1; }
  .plan-row{ flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .plan-row-actions{ justify-content: flex-end; }
  .dashboard-stats{ grid-template-columns: 1fr 1fr; }
}
/* ── Plan progress & check-off (super sprint) ─────────────────────────── */
.item-check{ width:16px; height:16px; margin:3px 8px 0 0; accent-color: var(--accent); flex:none; cursor:pointer; }
.item-check-tap{ display:inline-flex; align-items:flex-start; flex:none; cursor:pointer; }
.editable-list-item{ display:flex; align-items:flex-start; }
.editable-list-item.is-done .editable-block{ text-decoration: line-through; opacity:.55; }
.plan-progress-card{ margin-bottom:14px; }
.plan-progress-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.plan-progress-title{ margin:0; font-size:1.02rem; }
.plan-progress-meta{ display:flex; gap:10px; align-items:center; }
.plan-day-chip{ background: var(--primary); color: var(--primary-contrast); border-radius:999px; padding:2px 10px; font-size:.78rem; font-weight:700; white-space:nowrap; }
.plan-progress-count{ font-size:.84rem; opacity:.72; white-space:nowrap; }
.progress-bar{ height:8px; border-radius:999px; background: rgba(127,127,127,.18); overflow:hidden; margin:10px 0 12px; }
.progress-fill{ height:100%; border-radius:999px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .3s ease; }
.upnext-list{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:7px; }
.upnext-item{ display:flex; align-items:flex-start; gap:8px; }
.upnext-text{ flex:1; min-width:0; }
.upnext-tag{ font-size:.72rem; opacity:.6; border:1px solid currentColor; border-radius:999px; padding:1px 8px; flex:none; margin-top:2px; white-space:nowrap; }
.upnext-dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); flex:none; margin-top:7px; }
.upnext-card{ margin-bottom:14px; }
.plan-progress-foot{ margin:4px 0 0; font-size:.82rem; opacity:.85; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.plan-start-input{ max-width:180px; }
.plan-progress-donetext{ margin:0 0 8px; font-weight:600; }
.phase-progress-chip{ font-size:.72rem; font-weight:700; border-radius:999px; padding:2px 9px; background: rgba(127,127,127,.16); vertical-align:middle; display:inline-block; }
.phase-progress-chip.is-complete{ background: var(--accent); color:#fff; }
.phase-head-actions{ display:flex; gap:6px; align-items:center; flex:none; flex-wrap:wrap; justify-content:flex-end; }

/* Wizard escape hatch */
.wizard-jump-row{ text-align:center; margin-top:10px; }
.wizard-jump{ font-size:.9rem; }

/* New-plan example filler */
.example-fill-btn{ margin-top:6px; align-self:flex-start; }

/* Offer preview email actions */
.mz-email-actions{ margin-top:8px; }

/* Auth modal: Google-first slot */
.gsi-slot .gsi-wrap{ margin: 2px 0 14px; }
.gsi-slot .gsi-divider{ margin-top:12px; }

/* ── Hero sprint: value-first CTA, auth UX, urgency, wait theater ─────── */
.input-error{ border-color: #dc2626 !important; box-shadow: 0 0 0 2px rgba(220,38,38,.18) !important; }
.auth-context{ margin: 0 0 14px; font-size: .9rem; line-height: 1.4; color: var(--text-dim); background: rgba(127,127,127,.08); border-left: 3px solid var(--accent); border-radius: 6px; padding: 9px 12px; }
.plan-interview-chip{ background: rgba(245,158,11,.16); color: var(--accent); border: 1px solid var(--accent); border-radius:999px; padding:2px 10px; font-size:.78rem; font-weight:700; white-space:nowrap; }
.generating-bar{ width: 100%; max-width: 320px; margin: 6px auto 0; }

/* ── Mobile tap-target ergonomics (QA: iPhone-class) ─────────────────── */
@media (max-width: 560px){
  /* Check-off boxes are the core super-sprint interaction — 16px is too
     small for a thumb. The label wrapper gives a full 44px HIG tap zone
     around a visually compact box; rows center so text aligns to it. */
  .item-check-tap{ min-width: 44px; min-height: 44px; align-items: center; justify-content: center; margin: 0 2px 0 -9px; }
  .item-check{ width: 24px; height: 24px; margin: 0; }
  .editable-list-item{ padding: 3px 8px; align-items: center; }
  .upnext-item{ padding: 2px 0; align-items: center; }
  /* Small buttons meet the 44px HIG minimum on touch — the plan toolbar
     holds the Offer Pack + Export entry points, so comfort here converts. */
  .btn-sm{ min-height: 44px; }
  .phase-head-actions .btn-sm, .plan-header-actions .btn-sm{ min-height: 44px; }
  /* Landing nav CTA — the first touch a Meta-ad visitor makes. */
  .nav .btn, .app-nav .btn{ min-height: 44px; }
}

/* ── Conversion + retention (hero hour) ──────────────────────────────── */
.mz-urgency{ font-weight: 700; color: var(--accent); margin: 0 0 8px; font-size: .96rem; line-height: 1.35; }
.mz-unlock .mz-urgency{ text-align: center; }
.streak-chip{
  display: inline-flex; align-items: center; gap: 4px; align-self: center;
  background: rgba(245,158,11,.16); color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 700; white-space: nowrap;
}
.export-unlock-banner .btn{ white-space: nowrap; }

/* ================= Presentation deck (unified output) =================
   Editorial-premium template: warm paper, serif headings, generous space,
   an accent that picks up the company brand when detected (--deck-accent). */
.deck{ --deck-accent: #215e5a; }
.deck-slide{ position: relative; }
.deck--editorial .deck-slide{
  background: #FAF9F5; color: #23262B;
  border: 1px solid #ECE8DE; border-radius: 14px;
  padding: 44px 52px; overflow: hidden;
}
.deck--editorial .deck-slide::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--deck-accent);
}
.deck--editorial .deck-slide-inner{ display: flex; flex-direction: column; gap: 14px; }
.deck--editorial .deck-eyebrow{ margin: 0; color: var(--deck-accent); letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; font-weight: 800; }
.deck--editorial .deck-title{ margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1.15; color: #1b1e22; }
.deck--editorial .deck-subtitle{ margin: 0; color: #6B7078; font-size: 1.02rem; }
.deck--editorial .deck-block{ margin-top: 8px; }
.deck--editorial .deck-block-head{ margin: 0 0 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--deck-accent); font-weight: 800; }
.deck--editorial .deck-bullets{ margin: 0; padding-left: 20px; }
.deck--editorial .deck-bullets li{ margin: 4px 0; line-height: 1.5; font-size: 1rem; color: #2c3037; }
.deck--editorial .deck-footer{ margin: 14px 0 0; color: #8A8F98; font-size: .82rem; }
/* Cover slide — centered, hero title, accent rule. */
.deck--editorial .deck-slide--cover{ display: flex; align-items: center; justify-content: center; text-align: center; min-height: 320px; }
.deck--editorial .deck-slide--cover::before{ display: none; }
.deck--editorial .deck-slide--cover .deck-slide-inner{ align-items: center; gap: 12px; max-width: 80%; }
.deck--editorial .deck-slide--cover .deck-title{ font-size: 2.6rem; }
.deck--editorial .deck-slide--cover .deck-title::after{ content: ""; display: block; width: 64px; height: 3px; background: var(--deck-accent); margin: 18px auto 4px; }

/* ── Editor ── */
.view-deck{ max-width: 1180px; margin: 0 auto; }
.deck-toolbar{ display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 5;
  background: var(--bg); padding: 10px 0 12px; border-bottom: 1px solid var(--border-soft); margin-bottom: 16px; }
.deck-toolbar-title{ flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-toolbar-actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.deck-editor{ display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.deck-rail{ display: flex; flex-direction: column; gap: 8px; position: sticky; top: 78px; }
.deck-thumb{ display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 10px;
  background: var(--bg-raised); border: 1px solid var(--border-soft); color: var(--text-dim); cursor: pointer; font: inherit; }
.deck-thumb:hover{ border-color: var(--text-faint); color: var(--text); }
.deck-thumb.is-active{ border-color: var(--accent); background: rgba(31,186,160,.08); color: var(--text); }
.deck-thumb-n{ flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 700; }
.deck-thumb-t{ font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-stage{ min-width: 0; }
.deck-stage .deck{ box-shadow: var(--shadow-md); border-radius: 14px; }
/* contenteditable fields inherit the slide look; show a subtle affordance */
.deck-edit{ outline: none; border-radius: 4px; transition: box-shadow .12s ease, background .12s ease; }
.deck-edit:hover{ box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.deck-edit:focus{ box-shadow: 0 0 0 2px var(--deck-accent); }
.deck-edit:empty::before{ content: attr(data-ph); opacity: .4; }
.deck--edit .deck-bullets li{ display: flex; align-items: flex-start; gap: 8px; }
.deck--edit .deck-bullet-text{ flex: 1; }
.deck-x{ flex: none; border: none; background: none; color: #B0433E; cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 4px; opacity: .55; }
.deck-x:hover{ opacity: 1; }
.deck-x-block{ font-size: .7rem; margin-top: 4px; }
.deck-add{ margin-top: 6px; border: 1px dashed #CFC9BC; background: none; color: #7A7568; border-radius: 6px; padding: 3px 10px; font-size: .78rem; cursor: pointer; }
.deck-add:hover{ border-color: var(--deck-accent); color: var(--deck-accent); }
.deck-slide-tools{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.deck-ai-prompt{ flex: 1; min-width: 220px; }
.deck-hint{ color: var(--text-faint); font-size: .8rem; margin: 14px 0 0; }

/* ── Present mode (deck) ── */
.deck-present{ display: flex; align-items: center; justify-content: center; }
.deck-present .deck{ width: min(1120px, 92vw); }
.deck-present .deck-slide{ min-height: min(60vw, 78vh); display: flex; }
.deck-present .deck-slide-inner{ margin: auto 0; width: 100%; }
.deck-present.present-overlay .present-controls{ position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); }

/* ── Shared (read-only, stacked slides) ── */
.shared-deck-actions{ display: flex; justify-content: center; margin: 8px 0 16px; }
.deck--shared{ display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin: 0 auto; }
.deck--shared .deck-slide{ box-shadow: var(--shadow-sm); }

/* ── Print (each slide = one landscape page) ── */
@media print{
  @page{ size: landscape; margin: 0; }
  body.deck-printing > *:not(.deck-print-host){ display: none !important; }
  .deck-print-host{ display: block !important; position: static !important; visibility: visible !important; width: auto !important; }
  .deck-print-host .deck{ display: block; }
  .deck-print-host .deck-slide{ box-shadow: none; border: none; border-radius: 0; break-after: page; page-break-after: always;
    min-height: 100vh; display: flex; }
  .deck-print-host .deck-slide-inner{ margin: auto 0; width: 100%; }
}
/* On screen the print host stays laid out (offscreen, hidden) so autofit
   can measure each page before the print dialog opens. Slides take a 16:9
   shape at print width — proportionally SHORTER than a landscape page, so
   anything that fits here is guaranteed to fit the printed page. */
.deck-print-host{ position: fixed; left: -12000px; top: 0; width: 1056px; visibility: hidden; pointer-events: none; }
.deck-print-host .deck-slide{ aspect-ratio: 16 / 9; overflow: hidden; }

/* Rotate nudge — the deck is a landscape artifact; portrait phones get a
   tip (shown only in portrait, never landscape). */
.deck-rotate-hint{ display: none; }
@media (max-width: 820px) and (orientation: portrait){
  .deck-rotate-hint{
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    background: rgba(201,162,39,.10); border: 1px solid rgba(201,162,39,.35);
    color: var(--primary); border-radius: 10px; padding: 8px 12px; font-size: .82rem; font-weight: 600;
  }
}

@media (max-width: 720px){
  .deck-editor{ grid-template-columns: 1fr; }
  .deck-rail-col{ position: static; top: auto; min-width: 0; }
  .deck-rail{ position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .deck-thumb{ flex: 0 0 auto; max-width: 220px; }
  /* Nothing may exceed the viewport width. */
  .deck-stage, .deck-stage .deck, .deck-slide{ min-width: 0; max-width: 100%; }
  /* Scale EVERY template's slide down so it fits a phone (overrides the
     per-template desktop sizes). */
  .deck-slide{ padding: 22px 18px !important; }
  .deck-title{ font-size: 1.5rem !important; line-height: 1.15 !important; }
  .deck-slide--cover .deck-title{ font-size: 1.85rem !important; }
  .deck-subtitle{ font-size: .92rem !important; }
  .deck-bullets li{ font-size: .92rem !important; }
  .deck-eyebrow{ font-size: .62rem !important; }
  .deck-block-head{ font-size: .68rem !important; }
  .deck-slide--cover{ min-height: 220px !important; }
  .deck-toolbar{ flex-wrap: wrap; gap: 8px; }
  .deck-toolbar-title{ order: -1; flex: 1 0 100%; }
  .deck-slide-tools{ flex-direction: column; align-items: stretch; }
  .deck-ai-prompt{ min-width: 0; }
}

/* ── Deck template picker ── */
.deck-rail-col{ position: sticky; top: 78px; display: flex; flex-direction: column; gap: 10px; }
.deck-template-picker .label{ display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 4px; }
.deck-template-select{ width: 100%; }
.deck-rail-col .deck-rail{ position: static; top: auto; }

/* Colored/dark template backgrounds must survive PDF export. */
.deck-slide{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* ================= Futuristic minimal ================= */
.deck--futuristic .deck-slide{
  background: #0E141C; color: #E9EEF5;
  border: 1px solid #223042; border-radius: 14px; padding: 48px 56px; overflow: hidden;
}
.deck--futuristic .deck-slide::before{ content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--deck-accent), transparent 72%); }
.deck--futuristic .deck-slide-inner{ display: flex; flex-direction: column; gap: 16px; }
.deck--futuristic .deck-eyebrow{ margin: 0; color: var(--deck-accent); letter-spacing: .32em; text-transform: uppercase; font-size: .68rem; font-weight: 600; }
.deck--futuristic .deck-title{ margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 2.1rem; line-height: 1.12; letter-spacing: -.01em; color: #F4F7FB; }
.deck--futuristic .deck-subtitle{ margin: 0; color: #93A2B4; font-size: 1.02rem; font-weight: 300; }
.deck--futuristic .deck-block{ border-top: 1px solid #1E2A38; padding-top: 12px; margin-top: 6px; }
.deck--futuristic .deck-block-head{ margin: 0 0 6px; font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; color: var(--deck-accent); font-weight: 600; }
.deck--futuristic .deck-bullets{ margin: 0; padding-left: 0; list-style: none; }
.deck--futuristic .deck-bullets li{ margin: 6px 0; line-height: 1.5; font-size: 1rem; color: #C7D2DE; font-weight: 300; padding-left: 18px; position: relative; }
.deck--futuristic .deck-bullets li::before{ content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background: var(--deck-accent); }
.deck--futuristic .deck-footer{ margin: 14px 0 0; color: #5F7186; font-size: .8rem; letter-spacing: .04em; }
.deck--futuristic .deck-slide--cover{ display: flex; align-items: center; justify-content: center; text-align: center; min-height: 320px; }
.deck--futuristic .deck-slide--cover::before{ display: none; }
.deck--futuristic .deck-slide--cover .deck-slide-inner{ align-items: center; }
.deck--futuristic .deck-slide--cover .deck-title{ font-size: 2.9rem; font-weight: 200; }
.deck--futuristic .deck-slide--cover .deck-title::after{ content: ""; display: block; width: 80px; height: 1px; background: var(--deck-accent); margin: 22px auto 4px; }

/* ================= Bold modern ================= */
.deck--bold .deck-slide{
  background: #FFFFFF; color: #16181D;
  border: 1px solid #ECECEF; border-radius: 14px; padding: 46px 52px; overflow: hidden;
}
.deck--bold .deck-slide::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--deck-accent); }
.deck--bold .deck-slide-inner{ display: flex; flex-direction: column; gap: 14px; padding-left: 8px; align-items: flex-start; }
.deck--bold .deck-eyebrow{ margin: 0; align-self: flex-start; background: var(--deck-accent); color: #fff; padding: 4px 12px; border-radius: 6px; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; font-weight: 800; }
.deck--bold .deck-title{ margin: 0; font-family: var(--font-body); font-weight: 800; font-size: 2.5rem; line-height: 1.05; letter-spacing: -.02em; color: #111318; }
.deck--bold .deck-subtitle{ margin: 0; color: #5A5F6A; font-size: 1.05rem; font-weight: 600; }
.deck--bold .deck-block-head{ margin: 0 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--deck-accent); font-weight: 800; }
.deck--bold .deck-bullets{ margin: 0; padding-left: 20px; }
.deck--bold .deck-bullets li{ margin: 5px 0; line-height: 1.45; font-size: 1.05rem; color: #23262D; font-weight: 500; }
.deck--bold .deck-footer{ margin: 14px 0 0; color: #8A8F98; font-size: .82rem; font-weight: 600; }
.deck--bold .deck-slide--cover{ background: var(--deck-accent); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 340px; }
.deck--bold .deck-slide--cover::before{ display: none; }
.deck--bold .deck-slide--cover .deck-slide-inner{ align-items: center; padding-left: 0; }
.deck--bold .deck-slide--cover .deck-eyebrow{ background: rgba(255,255,255,.22); color: #fff; align-self: center; }
.deck--bold .deck-slide--cover .deck-title{ color: #fff; font-size: 3rem; }
.deck--bold .deck-slide--cover .deck-subtitle{ color: rgba(255,255,255,.9); }
.deck--bold .deck-slide--cover .deck-footer{ color: rgba(255,255,255,.75); }

/* ── Cover title length steps ──────────────────────────────────────────
   Cover title sizes above assume "<Role> — 90-Day Plan" ≈ 30 chars; real
   role titles run to 50+ (often pasted in CAPS) and swallowed the slide,
   worst on phones. app.js stamps deck-slide--titlelong (>32 chars) /
   deck-slide--titlexl (>50) on the slide; these step the display size
   down per template. fitDeckSlide can't do this: covers are auto-grow,
   so an oversized title never overflows — it just grows the slide. */
.deck--editorial .deck-slide--cover.deck-slide--titlelong .deck-title{ font-size: 2.05rem; }
.deck--editorial .deck-slide--cover.deck-slide--titlexl .deck-title{ font-size: 1.7rem; }
.deck--futuristic .deck-slide--cover.deck-slide--titlelong .deck-title{ font-size: 2.25rem; }
.deck--futuristic .deck-slide--cover.deck-slide--titlexl .deck-title{ font-size: 1.85rem; }
.deck--bold .deck-slide--cover.deck-slide--titlelong .deck-title{ font-size: 2.35rem; }
.deck--bold .deck-slide--cover.deck-slide--titlexl .deck-title{ font-size: 1.95rem; }
/* Non-cover slides keep their (smaller) title but still step when long —
   the 16:9 canvas + fitDeckSlide handle the rest. */
.deck-slide--titlelong:not(.deck-slide--cover) .deck-title{ font-size: 1.7rem; }
.deck-slide--titlexl:not(.deck-slide--cover) .deck-title{ font-size: 1.45rem; }
/* Phone steps must out-rank the mobile !important clamps above. */
@media (max-width: 720px){
  .deck-slide--cover.deck-slide--titlelong .deck-title{ font-size: 1.45rem !important; }
  .deck-slide--cover.deck-slide--titlexl .deck-title{ font-size: 1.25rem !important; }
  .deck-slide--titlelong:not(.deck-slide--cover) .deck-title{ font-size: 1.3rem !important; }
  .deck-slide--titlexl:not(.deck-slide--cover) .deck-title{ font-size: 1.15rem !important; }
}

/* ── Plan header: condensed title (role · company as a quiet subline, not
   three exposed boxes stacked together) ── */
.plan-title-block{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-title-main .input{
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text);
  border-color: transparent; background: transparent; padding: 4px 6px; height: auto;
}
.plan-title-main .input:hover{ border-color: var(--border-soft); }
.plan-title-main .input:focus{ border-color: var(--accent); background: var(--bg-raised); }
.plan-title-meta{ display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; padding-left: 6px; }
.plan-title-meta .input{
  font-family: var(--font-body); font-size: .92rem; color: var(--text-dim); font-weight: 500;
  border-color: transparent; background: transparent; padding: 2px 4px; height: auto;
  /* size the field to its text so "Role · Company" reads as one tight
     subline instead of two full-width boxes (progressive: falls back to
     default width where unsupported). */
  field-sizing: content; width: auto; min-width: 40px; max-width: 100%; flex: 0 1 auto;
}
.plan-title-meta .input:hover{ border-color: var(--border-soft); }
.plan-title-meta .input:focus{ border-color: var(--accent); background: var(--bg-raised); color: var(--text); }
.plan-meta-sep{ color: var(--text-faint); }

/* ── Emails modal: the email cards were styled for the white paper sheet;
   in the dark modal their ink text went invisible. Recolor for dark. ── */
.emails-modal-body .mz-email{ border-color: var(--border); background: var(--bg-raised); }
.emails-modal-body .mz-email h3{ color: var(--text); }
.emails-modal-body .mz-email pre{ color: var(--text-dim); }

/* ── Phase cards: collapsible (30 open, 60/90 collapsed) ── */
.phase-title-block{ cursor: pointer; flex: 1; min-width: 0; user-select: none; }
.phase-title-block:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.phase-caret{ display: inline-block; color: var(--text-faint); font-size: .8em; transition: transform .15s ease; }
.phase-card:not(.is-collapsed) .phase-caret{ transform: rotate(90deg); }
.phase-card.is-collapsed .phase-body{ display: none; }
.phase-body{ display: flex; flex-direction: column; gap: var(--space-4); }

/* ── Deck: optional section icons ── */
.deck-icons-toggle{ display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .82rem; color: var(--text-dim); cursor: pointer; }
.deck-icons-toggle input{ accent-color: var(--accent); }
.deck-bi{ font-size: .95em; }
.deck-block-headrow{ display: flex; align-items: center; gap: 7px; }
.deck-block-headrow .deck-block-head{ margin: 0; }
.deck--editorial .deck-slide--icons .deck-block-head,
.deck--bold .deck-slide--icons .deck-block-head{ display: inline-flex; align-items: center; gap: 7px; }

/* ── PDF: every template's COVER centered on its own full page (futuristic
   & bold covers were pinned to the top because their min-height won over
   the print rule) ── */
@media print{
  .deck-print-host .deck-slide{ min-height: 100vh !important; display: flex; align-items: center; }
  .deck-print-host .deck-slide--cover{ min-height: 100vh !important; align-items: center; justify-content: center; }
  .deck-print-host .deck-slide-inner{ margin: auto 0; width: 100%; }
}

/* ================= Deck mega-upgrade ================= */
/* Blocks compose as columns — a real deck layout, not one long list. */
.deck-blocks{ display: grid; gap: 22px; align-items: start; margin-top: 10px; }
.deck-blocks--1{ grid-template-columns: 1fr; }
.deck-blocks--2{ grid-template-columns: 1fr 1fr; }
.deck-blocks--3{ grid-template-columns: 1fr 1fr 1fr; }
.deck-blocks .deck-block{ min-width: 0; margin-top: 0; }
/* Template-specific column chrome */
.deck--editorial .deck-blocks .deck-block{ border-top: 2px solid var(--deck-accent); padding-top: 10px; }
.deck--futuristic .deck-blocks .deck-block{ border-top: 1px solid #1E2A38; padding-top: 12px; margin-top: 0; }
.deck--bold .deck-blocks .deck-block{ background: rgba(17,19,24,.035); border-radius: 10px; padding: 14px 16px; }
/* Bullets breathe a bit more inside columns */
.deck-blocks .deck-bullets li{ font-size: .95rem; }

/* Cover logo — the company mark on the title slide */
.deck-cover-logo{ display: flex; justify-content: center; margin-bottom: 6px; }
.deck-cover-logo .mz-logo{ width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.deck-cover-logo .mz-logo-img{ width: 46px; height: 46px; }
.deck--futuristic .deck-cover-logo .mz-logo{ background: #16202B; box-shadow: 0 0 0 1px #223042, 0 4px 18px rgba(0,0,0,.4); }
.deck--futuristic .deck-cover-logo .mz-logo-mono{ color: var(--deck-accent); }
.deck--bold .deck-slide--cover .deck-cover-logo .mz-logo{ background: #fff; }

/* Slide meta footer — role · company + page number, like a real deck */
.deck-slide--meta .deck-slide-inner{ padding-bottom: 30px; }
.deck-slide-meta{
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 28px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  pointer-events: none;
}
.deck--editorial .deck-slide-meta{ color: #A39E92; border-top: 1px solid #ECE8DE; margin: 0 24px; padding: 8px 4px; }
.deck--futuristic .deck-slide-meta{ color: #5F7186; border-top: 1px solid #1E2A38; margin: 0 26px; padding: 8px 2px; }
.deck--bold .deck-slide-meta{ color: #9AA0AB; padding-left: 32px; }
.deck-meta-page{ font-variant-numeric: tabular-nums; }

/* ── Present mode polish ── */
.deck-present .deck-slide{ animation: deckSlideIn .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes deckSlideIn{ from{ opacity: 0; transform: translateY(10px) scale(.985); } to{ opacity: 1; transform: none; } }
.deck-present{ cursor: pointer; }
.deck-present .present-controls{ cursor: default; }
.present-dots{ display: inline-flex; gap: 7px; align-items: center; margin: 0 4px; }
.present-dot{
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(232,236,241,.25); transition: transform .15s ease, background .15s ease;
}
.present-dot:hover{ background: rgba(232,236,241,.55); }
.present-dot.is-on{ background: var(--deck-accent, var(--accent)); transform: scale(1.25); }
.present-hint{
  position: fixed; bottom: 74px; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: .78rem; color: rgba(232,236,241,.65); pointer-events: none;
  animation: hintFade 5s ease forwards;
}
@keyframes hintFade{ 0%{ opacity: 0; } 12%{ opacity: 1; } 75%{ opacity: 1; } 100%{ opacity: 0; } }

/* ── Locked deck paywall — see the artifact, want the artifact ── */
.deck-paywall .mz-urgency{ text-align: center; margin: 2px 0 14px; }
.deck-locked-wrap{ position: relative; }
.deck-locked-wrap .deck-slide{ filter: blur(7px) saturate(.85); pointer-events: none; user-select: none; }
.deck-locked-veil{
  position: absolute; inset: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(11,15,20,.14), rgba(11,15,20,.42));
}
.deck-locked-badge{
  background: rgba(11,15,20,.88); color: var(--text);
  border: 1px solid var(--primary); border-radius: 999px;
  padding: 10px 18px; font-size: .85rem; font-weight: 700;
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
  max-width: 86%; text-align: center;
}
.deck-paywall-bar{
  position: sticky; bottom: 0; z-index: 30; margin: 18px -8px 0; 
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(11,15,20,0), var(--bg) 26%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.deck-paywall-bar .mz-buybar-trust{ color: var(--text-faint); }
.deck-paywall-bar .link-btn{ background: none; border: none; cursor: pointer; color: var(--accent); font-size: .82rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; padding: 2px; }
.deck-unlock-cta{
  width: 100%; max-width: 460px; min-height: 54px;
  font-weight: 800; font-size: 1.02rem; letter-spacing: .01em;
  border: none; border-radius: 12px;
  background: linear-gradient(180deg, #E6C452 0%, #D4A82C 52%, var(--primary) 100%);
  color: #1c1608;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 22px rgba(201,162,39,.42), 0 2px 6px rgba(0,0,0,.18);
  transition: transform .08s ease, box-shadow .18s ease, filter .18s ease;
}
.deck-unlock-cta:hover{ filter: brightness(1.04); }
.deck-unlock-cta:active{ transform: translateY(1px); }

/* ── Deck inside the Offer Pack preview panel — compact showcase ── */
#mz-overlay .deck--pack{ gap: 14px; margin: 0 0 6px; max-width: none; }
#mz-overlay .deck--pack .deck-slide{ padding: 30px 34px; }
#mz-overlay .deck--pack .deck-title{ font-size: 1.55rem; }
#mz-overlay .deck--pack .deck-slide--cover .deck-title{ font-size: 1.95rem; }
#mz-overlay .deck--pack .deck-slide--cover{ min-height: 240px; }
#mz-overlay .deck--pack .deck-bullets li, #mz-overlay .deck--pack .deck-blocks .deck-bullets li{ font-size: .85rem; }

/* Columns collapse on phones (portrait) — readability first */
@media (max-width: 720px){
  .deck-blocks--2, .deck-blocks--3{ grid-template-columns: 1fr; }
  .deck-blocks{ gap: 14px; }
  .deck-slide-meta{ padding: 8px 18px; font-size: .6rem; }
  #mz-overlay .deck--pack .deck-slide{ padding: 22px 18px; }
}

/* ================= Tabbed Offer Pack popup ================= */
.mz-tabs{ display: flex; gap: 6px; margin: 2px 0 14px; flex-wrap: wrap; }
.mz-tab{
  border: 1px solid #d8d5cc; background: #faf9f5; color: #3a3f47;
  border-radius: 999px; padding: 8px 14px; font-size: .85rem; font-weight: 700; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.mz-tab:hover{ background: #f1efe9; }
.mz-tab.is-active{ background: #20242c; color: #fff; border-color: #20242c; }
.mz-tab-body{ min-height: 200px; }

/* Presentation tab — a real 16:9 stage, one slide at a time */
.mz-decktab-controls{ display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.mz-decktab-note{ font-size: .85rem; font-weight: 700; color: #20242c; }
#mz-overlay .mz-tpl-select{
  width: auto; min-width: 150px; background: #fff; color: #20242c;
  border: 1px solid #d8d5cc; border-radius: 8px; padding: 8px 10px; font-size: .88rem;
}
.mz-deck-stagewrap{ position: relative; }
#mz-overlay .deck--carousel{ max-width: none; gap: 0; }
#mz-overlay .deck--carousel .deck-slide{
  aspect-ratio: 16 / 9; overflow-y: auto; display: flex;
  padding: 32px 44px; min-height: 0 !important;
}
#mz-overlay .deck--carousel .deck-slide-inner{ margin: auto 0; width: 100%; }
#mz-overlay .deck--carousel .deck-title{ font-size: 1.5rem; }
#mz-overlay .deck--carousel .deck-slide--cover .deck-title{ font-size: 2rem; }
#mz-overlay .deck--carousel .deck-subtitle{ font-size: .92rem; }
#mz-overlay .deck--carousel .deck-bullets li{ font-size: .85rem; }
.mz-stage-nav{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #d8d5cc; background: rgba(255,255,255,.94); color: #20242c;
  font-size: 1.35rem; line-height: 1; cursor: pointer; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.mz-stage-prev{ left: -8px; }
.mz-stage-next{ right: -8px; }
.mz-stage-nav[disabled]{ opacity: .3; cursor: default; }
.mz-stage-dots{ display: flex; gap: 7px; justify-content: center; margin: 12px 0 0; }
.mz-stage-dot{ width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; background: #d8d5cc; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.mz-stage-dot.is-on{ background: #20242c; transform: scale(1.25); }
.mz-edit-hint{ text-align: center; font-size: .78rem; color: #6b7078; margin: 10px 0 0; }
.mz-decktab-owned{ display: flex; justify-content: center; margin-top: 12px; }
.mz-moretab{ text-align: center; padding: 8px 4px 4px; }
.mz-moretab .mz-locks{ justify-content: center; }

/* The paywall stack gets uniform 16:9 pages too — every page the same
   size, exactly like the final output. */
.deck--paywall .deck-slide{ aspect-ratio: 16 / 9; overflow: hidden; display: flex; min-height: 0 !important; }
.deck--paywall .deck-slide-inner{ margin: auto 0; width: 100%; }

@media (max-width: 640px){
  #mz-overlay .deck--carousel .deck-slide{ aspect-ratio: 4 / 3; padding: 18px 16px; }
  .mz-stage-prev{ left: 2px; }
  .mz-stage-next{ right: 2px; }
  .mz-tab{ padding: 7px 11px; font-size: .78rem; }
  .deck--paywall .deck-slide{ aspect-ratio: auto; }
}

/* Full-screen from the popup must stack ABOVE the popup (z 1400). */
.deck-present{ z-index: 1600; }
/* Pinned unlock chip inside full-screen preview for locked users */
.mz-fs-unlock{
  position: fixed; top: 14px; right: 14px; z-index: 8;
  border: none; border-radius: 999px; padding: 10px 18px;
  font-weight: 800; font-size: .88rem; cursor: pointer;
  background: linear-gradient(180deg, #E6C452 0%, #D4A82C 52%, var(--primary) 100%);
  color: #1c1608;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 22px rgba(201,162,39,.42);
}
.mz-fs-unlock:hover{ filter: brightness(1.05); }
@media (max-width: 640px){
  .mz-fs-unlock{ top: auto; bottom: 76px; right: 12px; font-size: .8rem; padding: 9px 14px; }
}

/* ================= Format correctness pass ================= */
/* Slide meta footer lives IN FLOW at the bottom (flex column), never
   overlapping scrolling content — fixes the strip-across-content bug. */
.deck-slide{ display: flex; flex-direction: column; }
.deck-slide-inner{ flex: 1 1 auto; min-height: 0; }
.deck-slide-meta{ position: static; margin-top: auto; pointer-events: none; }
.deck-slide--meta .deck-slide-inner{ padding-bottom: 0; }

/* Editor slides render in the same true 16:9 stage as everywhere else. */
.deck--edit .deck-slide{ aspect-ratio: 16 / 9; min-height: 0 !important; overflow: hidden; }
.deck--edit .deck-slide-inner{ overflow-y: auto; }

/* Present mode: exact 16:9 sized to the viewport — the cover fills the
   stage instead of floating as a small card. */
.deck-present .deck{ width: min(94vw, calc((100vh - 150px) * 1.7778)); }
.deck-present .deck-slide{ aspect-ratio: 16 / 9; min-height: 0 !important; overflow-y: auto; width: 100%; }

/* Carousel + paywall already 16:9; let content scroll above the footer. */
#mz-overlay .deck--carousel .deck-slide-inner{ overflow-y: auto; margin: 0; }

/* Print: one slide per page, EXACT page height, no trailing blank page. */
@media print{
  .deck-print-host .deck{ gap: 0 !important; }
  .deck-print-host .deck-slide{
    height: 100vh !important; min-height: 0 !important; aspect-ratio: auto !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important;
    overflow: hidden;
  }
  .deck-print-host .deck-slide:last-child{ break-after: auto !important; page-break-after: auto !important; }
}

/* ── Locked protections ── */
/* Diagonal watermark on locked previews (screen + print). */
/* ONE diagonal watermark per slide, low opacity (was six repeated stamps —
   the slide should read as a slide, with a whisper of "preview"). */
.deck-wm{
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.deck-wm span{
  transform: rotate(-24deg); white-space: nowrap;
  font-size: 1.4rem; font-weight: 800; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(120,120,120,.10); text-align: center;
}
.deck--futuristic .deck-wm span, .deck--stage .deck-wm span{ color: rgba(200,220,240,.09); }
/* Locked email bodies: veiled tease, not a readable leak. */
.mz-email-veilwrap{ position: relative; }
.mz-email-veilwrap pre{ filter: blur(5px); user-select: none; pointer-events: none; }
.mz-email-veil{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* What's-included tab: ink on the white panel (chips were ghost text). */
#mz-overlay .mz-included-label{ color: #20242c; font-size: .9rem; }
#mz-overlay .mz-lock-chip{ color: #2a2f38; background: rgba(201,162,39,.14); border-color: rgba(201,162,39,.5); }

/* Popup AI row */
.mz-ai-host{ margin-top: 10px; }
.mz-ai-row{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center; }
#mz-overlay .mz-ai-prompt{
  flex: 1; min-width: 220px; background: #fff; color: #20242c;
  border: 1px solid #d8d5cc; border-radius: 8px; padding: 8px 10px; font-size: .85rem;
}
@media (max-width: 640px){ .mz-ai-row{ flex-direction: column; align-items: stretch; } }

/* Cover slide: center content vertically in every context (editor, popup
   carousel, present, print). The base format block stretches .deck-slide-inner
   to fill the 16:9 slide, so the templates' align-items centering alone leaves
   cover content pinned to the top — and looked different between the carousel
   (margin:0) and fullscreen (margin:auto). justify-content centers the inner
   flex column itself, which is consistent everywhere. */
.deck-slide--cover .deck-slide-inner{ justify-content: center; }

/* Locked editor: empty fields show NO placeholder ghosts ("Subtitle
   (optional)") — you can't type there, so the hint is just noise on an
   otherwise-finished-looking slide. */
.deck-paywall .deck-edit:empty{ display: none; }

/* ================= Template glow-up v2 =================
   The global ul reset (styles.css) ate the default list markers, so only
   Futuristic — which draws its own — showed bullets. Every template now
   draws real markers in its own voice, plus a design pass per theme. */

/* — Markers — */
.deck--editorial .deck-bullets, .deck--bold .deck-bullets{ padding-left: 0; list-style: none; }
.deck--editorial .deck-bullets li, .deck--bold .deck-bullets li{ position: relative; padding-left: 20px; }
.deck--editorial .deck-bullets li::before{
  content: ""; position: absolute; left: 2px; top: .64em;
  width: 10px; height: 2px; border-radius: 1px; background: var(--deck-accent);
}
.deck--bold .deck-bullets li::before{
  content: ""; position: absolute; left: 2px; top: .46em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--deck-accent);
}
.deck--futuristic .deck-bullets li::before{ width: 10px; height: 2px; border-radius: 1px; box-shadow: 0 0 8px var(--deck-accent); }

/* — Editorial: warm paper depth, ruled eyebrow, stronger block rules — */
.deck--editorial .deck-slide{ background: linear-gradient(165deg, #FBFAF7 0%, #F5F1E8 100%); }
.deck--editorial .deck-eyebrow{ display: flex; align-items: center; gap: 10px; }
.deck--editorial .deck-eyebrow:not(:empty)::before{ content: ""; flex: none; width: 26px; height: 2px; background: var(--deck-accent); }
.deck--editorial .deck-slide--cover .deck-eyebrow:not(:empty)::before{ display: none; }
.deck--editorial .deck-title{ letter-spacing: -.01em; }
.deck--editorial .deck-blocks .deck-block{ border-top-width: 3px; }

/* — Futuristic: ambient accent glow, glass block cards, corner bracket — */
.deck--futuristic .deck-slide{
  background:
    radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--deck-accent) 13%, transparent) 0%, transparent 55%),
    radial-gradient(100% 80% at -10% 110%, color-mix(in srgb, var(--deck-accent) 7%, transparent) 0%, transparent 50%),
    #0E141C;
}
.deck--futuristic .deck-title{ text-shadow: 0 0 28px color-mix(in srgb, var(--deck-accent) 30%, transparent); }
.deck--futuristic .deck-blocks .deck-block{
  border: 1px solid color-mix(in srgb, var(--deck-accent) 20%, #1E2A38);
  border-radius: 12px; background: rgba(255,255,255,.02); padding: 14px 16px;
}
.deck--futuristic .deck-slide::after{
  content: ""; position: absolute; right: 16px; bottom: 12px; width: 30px; height: 30px;
  border-right: 2px solid var(--deck-accent); border-bottom: 2px solid var(--deck-accent);
  border-radius: 0 0 10px 0; opacity: .5; pointer-events: none;
}

/* — Bold: block cards with accent spine + ghost numerals, title underline — */
.deck--bold .deck-blocks{ counter-reset: bblk; }
.deck--bold .deck-blocks .deck-block{
  counter-increment: bblk; position: relative; overflow: hidden;
  background: #F5F5F8; border-radius: 12px; padding: 16px 18px 14px;
  border-left: 4px solid var(--deck-accent);
}
.deck--bold .deck-blocks .deck-block::after{
  content: counter(bblk, decimal-leading-zero);
  position: absolute; top: -8px; right: 6px; font-size: 2.7rem; font-weight: 900;
  letter-spacing: -.04em; color: rgba(17,19,24,.07); pointer-events: none;
}
.deck--bold .deck-slide:not(.deck-slide--cover) .deck-title::after{
  content: ""; display: block; width: 52px; height: 5px; border-radius: 3px;
  background: var(--deck-accent); margin-top: 10px;
}

@media (max-width: 640px){
  .deck--bold .deck-blocks .deck-block{ padding: 12px 12px 10px; }
  .deck--futuristic .deck-blocks .deck-block{ padding: 10px 12px; }
  .deck--bold .deck-blocks .deck-block::after{ font-size: 2rem; }
}

/* ============ Mobile sweep fixes ============ */
/* Present mode: scroll lives on the INNER, not the slide — otherwise
   overflowing content painted over the in-flow footer meta. */
.deck-present .deck-slide-inner{ overflow-y: auto; }

/* Portrait phones: a strict 16:9 canvas at 390px is ~200px tall — hopeless
   for 3 stacked sections. Give present + editor the same 4:3 the popup
   carousel already uses; landscape keeps true 16:9 (rotate hint shows). */
@media (max-width: 640px) and (orientation: portrait){
  .deck-present .deck{ width: 94vw; }
  .deck-present .deck-slide{ aspect-ratio: 4 / 3; }
  .deck--edit .deck-slide{ aspect-ratio: 4 / 3; }
}

/* Locked editor on phones: the unlock bar was below the fold. Pin it. */
@media (max-width: 640px){
  .deck-paywall .deck-paywall-bar{
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60;
    margin: 0; box-shadow: 0 -8px 28px rgba(0,0,0,.35);
  }
  .view-deck.deck-paywall{ padding-bottom: 150px; }
}

/* Wide modal variant (emails): .modal-wide only *looked* wide before via a
   buggy injected max-width override that blew EVERY modal to viewport
   width on desktop; now that that's scoped to mobile, give it a real cap. */
.modal.modal-wide{ max-width: 860px; }

/* ── Deck content gate (paywall tease) ──────────────────────────────────
   Non-owners read the cover + 30-day slide; deeper slides render as locked
   teasers everywhere the deck shows (editor stage, rail, Offer Pack
   carousel). Same discipline as the plan view's phase teasers: structure
   and placeholder bars only — the real text never reaches the DOM. */
.deck-slide--locked .deck-locked-inner{ align-items: flex-start; justify-content: center; gap: 10px; }
.deck-slide--locked .deck-eyebrow{ color: var(--primary); }
.deck-locked-title{ opacity: .85; }
.deck-locked-lines{ display: flex; flex-direction: column; gap: 9px; width: 78%; margin: 6px 0 2px; }
.deck-locked-lines span{ display: block; height: 13px; border-radius: 6px; background: linear-gradient(90deg, rgba(120,130,145,.28), rgba(120,130,145,.12)); }
.deck-locked-lines span:nth-child(1){ width: 94%; }
.deck-locked-lines span:nth-child(2){ width: 82%; }
.deck-locked-lines span:nth-child(3){ width: 88%; }
.deck-locked-lines-short{ width: 60%; }
.deck-locked-msg{ font-size: .82rem; opacity: .75; margin: 8px 0 2px; max-width: 34rem; }
/* Tappable at every width — and immune to any ancestor zoom the deck
   canvas applies (the teaser itself is never autofit-zoomed). */
.deck-locked-btn{ margin-top: 4px; min-height: 44px; padding-left: 20px; padding-right: 20px; }
/* The teaser flows at its natural height on small canvases instead of
   forcing the 16:9 min-height that triggered autofit shrinking. */
.deck-slide--locked{ min-height: 0 !important; }
/* The editor aspect-locks slides to 16:9 (874) — on mid widths (~721-990px)
   that canvas is shorter than the flowing teaser and the centered inner
   clips BOTH edges (title unreachable above the scroll start, button below).
   The teaser is a placeholder card, not a real slide: let it size to its
   content everywhere and the whole class of clipping disappears. */
.deck--edit .deck-slide--locked{ aspect-ratio: auto !important; }

/* Small-phone toolbar fit. Without wrapping, space-between squeezes the
   back link into a tall multi-line pill (reads as a giant circle at
   radius 999) and pushes the widest unlock button past the right edge. */
@media (max-width: 560px){
  .export-toolbar{ flex-wrap: wrap; gap: 8px; }
  .toolbar-group{ display: flex; flex-wrap: wrap; gap: 8px; }
}
/* ≤380px the app header can't seat greeting + Account + Log out — the
   greeting is chrome (the name lives on the Account page), drop it and
   tighten the row so both buttons stay on-screen. */
@media (max-width: 380px){
  .app-nav-inner{ gap: var(--space-3); justify-content: space-between; }
  .app-nav-username{ display: none; }
}
/* Dark templates need the bars/msg readable on their own canvas. */
.deck--futuristic .deck-locked-lines span{ background: linear-gradient(90deg, rgba(233,238,245,.22), rgba(233,238,245,.08)); }
.deck-thumb--locked{ opacity: .62; }
.deck-thumb--locked .deck-thumb-t{ font-style: italic; }

/* One-pager locked phases (free watermarked export shows 30-day only). */
.one-pager-phase--locked h2{ opacity: .75; }
.one-pager-locked-note{ font-size: .85rem; opacity: .7; font-style: italic; margin: 4px 0 0; }

/* Fixed-aspect surfaces (popup carousel + present overlay) use a COMPACT
   centered teaser: the flowing version clips against the 16:9 stage on
   phones (title cropped top, button cut bottom), and the popup's pinned
   "Unlock it all" band already carries the CTA inches below the stage. */
.deck--carousel .deck-slide--locked .deck-locked-inner{ align-items: center; text-align: center; justify-content: center; gap: 8px; }
.deck--carousel .deck-slide--locked .deck-locked-msg,
.deck--carousel .deck-slide--locked .deck-locked-btn,
.deck--carousel .deck-slide--locked .deck-locked-lines-short{ display: none; }
.deck--carousel .deck-slide--locked .deck-locked-title{ font-size: 1.15rem !important; margin: 0; }
.deck--carousel .deck-slide--locked .deck-eyebrow{ font-size: .6rem; }
.deck--carousel .deck-slide--locked .deck-locked-lines{ width: 62%; margin: 4px auto 0; }
/* Present overlay: roomy canvas — keep the CTA, center the composition,
   and drop the prose on short (landscape-phone) viewports. */
.deck--present .deck-slide--locked .deck-locked-inner{ align-items: center; text-align: center; justify-content: center; }
.deck--present .deck-slide--locked .deck-locked-lines{ margin-left: auto; margin-right: auto; }
@media (max-height: 500px){
  .deck--present .deck-slide--locked .deck-locked-msg{ display: none; }
}
/* Present overlay on PHONES has the same fixed-canvas math as the carousel
   (~205px tall at portrait width) — compact the teaser but KEEP the button:
   it's the only unlock CTA on the present surface. */
@media (max-width: 640px){
  .deck--present .deck-slide--locked .deck-locked-msg,
  .deck--present .deck-slide--locked .deck-locked-lines-short{ display: none; }
  .deck--present .deck-slide--locked .deck-locked-title{ font-size: 1.1rem !important; margin: 0; }
  .deck--present .deck-slide--locked .deck-eyebrow{ font-size: .6rem; margin: 0; }
  .deck--present .deck-slide--locked .deck-locked-lines{ width: 58%; margin: 2px auto; }
  .deck--present .deck-slide--locked .deck-locked-lines span{ height: 9px; }
  .deck--present .deck-slide--locked .deck-locked-btn{ min-height: 38px; font-size: 12.5px; padding: 6px 16px; }
  .deck--present .deck-slide--locked .deck-locked-inner{ gap: 6px; }
}
/* Editor stage on PHONES: same fixed-canvas math again — compact the
   teaser and lean on the pinned "Unlock my presentation" band right below
   for the CTA (it's always on screen there). Desktop keeps the full teaser. */
@media (max-width: 720px){
  .deck--edit .deck-slide--locked .deck-locked-msg,
  .deck--edit .deck-slide--locked .deck-locked-btn,
  .deck--edit .deck-slide--locked .deck-locked-lines-short{ display: none; }
  .deck--edit .deck-slide--locked .deck-locked-inner{ align-items: center; text-align: center; justify-content: flex-start; padding-top: 14px; gap: 7px; }
  .deck--edit .deck-slide--locked .deck-locked-title{ font-size: 1.1rem !important; margin: 0; }
  .deck--edit .deck-slide--locked .deck-eyebrow{ font-size: .6rem; margin: 0; }
  .deck--edit .deck-slide--locked .deck-locked-lines{ width: 60%; margin: 2px auto; }
  .deck--edit .deck-slide--locked .deck-locked-lines span{ height: 9px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Conversion overhaul (ninetyplanadjustments_3): blurred-real paywall veil,
   sharpen row, scorecard strip, kit tools, signup build-log, Defense Sheet,
   mock interview, and the "Stage" deck template.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Blurred-real veil on locked deck slides ─────────────────────────── */
.deck-slide--veiled > .deck-slide-inner{
  filter: blur(9px) saturate(.85);
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
.deck-veil{
  position: absolute; inset: 0; z-index: 4; /* above wm (3), below sticky toolbar (5) */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 8% 10%;
  background: linear-gradient(180deg, rgba(10,13,18,.18), rgba(10,13,18,.38));
}
.deck-veil-title{ margin: 0; font-size: 1.25rem; font-weight: 800; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.65); }
.deck-veil-sub{ margin: 0; max-width: 46ch; font-size: .92rem; line-height: 1.5; color: #E8ECF1; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.deck-veil-btn{ margin-top: 4px; box-shadow: 0 8px 26px rgba(0,0,0,.4); }
.deck-slide--veiled .deck-slide-meta{ visibility: hidden; }
@media (max-width: 640px){
  .deck-veil-title{ font-size: 1.05rem; }
  .deck-veil-sub{ font-size: .82rem; }
}

/* ── Plan-page phase veil: real lists, blurred ───────────────────────── */
.phase-veil-content{ filter: blur(7px); user-select: none; -webkit-user-select: none; pointer-events: none; }
.phase-veil-list{ margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.phase-veil-list li{ font-size: .93rem; line-height: 1.5; color: var(--text-dim); }

/* ── Sharpen row (post-draft, free) ──────────────────────────────────── */
.sharpen{ margin: 0 0 var(--space-5); padding: 14px 18px; }
.sharpen-head{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sharpen-head h3{ margin: 0; font-size: .95rem; }
.sharpen-head span{ font-size: .8rem; color: var(--accent); }
.sharpen-chips{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sharpen-chip{
  border: 1px solid var(--border); border-radius: 999px; background: none;
  color: var(--text-dim); font: inherit; font-size: .85rem; padding: 7px 15px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.sharpen-chip:hover{ color: var(--text); border-color: var(--text-faint); }
.sharpen-crumb{ margin: 0 0 10px; font-size: .82rem; color: var(--accent); }
.view-deck .sharpen{ margin-top: var(--space-4); }

/* ── 5/5 scorecard strip above the deck ──────────────────────────────── */
.deck-scorecard{
  display: flex; align-items: stretch; overflow-x: auto;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-raised);
  margin: var(--space-4) 0;
}
.deck-score-lead{
  flex: none; min-width: 128px; padding: 12px 16px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
}
.deck-score-big{ font-size: 1.3rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.deck-score-sub{ font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; }
.deck-score-item{ flex: 1; min-width: 150px; padding: 10px 14px; border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 2px; }
.deck-score-item:last-child{ border-right: 0; }
.deck-score-crit{ font-size: .84rem; font-weight: 600; }
.deck-score-tick{ color: var(--accent); font-weight: 800; }
.deck-score-how{ font-size: .74rem; color: var(--text-dim); }

/* ── Kit tools row (deck page) ───────────────────────────────────────── */
.kit-tools{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 var(--space-3); }
.kit-tools-label{ font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }

/* ── Signup-while-it-builds: live build log in the auth modal ────────── */
.modal-buildgate{ max-width: 460px; }
.auth-buildlog{ align-self: start; }
.auth-buildlog-head{ margin: 0 0 14px; display: flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 700; color: var(--text); }
.auth-buildlog-line{
  margin: 0 0 8px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .76rem; line-height: 1.55; color: var(--text-dim);
  opacity: .32; transition: opacity .4s;
}
.auth-buildlog-line.is-on{ opacity: 1; }
.auth-buildlog-note{ opacity: .8; }

/* ── Unlock modal: headline + anchor ─────────────────────────────────── */
.mz-unlock-head{ margin: 0 0 6px; font-size: 1.02rem; font-weight: 700; color: var(--text); }
.mz-unlock-sub b{ color: var(--text); }

/* ── Defense Sheet ───────────────────────────────────────────────────── */
.defense-list{ margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 14px; max-height: 56vh; overflow-y: auto; }
.defense-q{ margin: 0; font-weight: 700; font-size: .95rem; }
.defense-a{ margin: 4px 0 0; font-size: .88rem; line-height: 1.55; color: var(--text-dim); }
.defense-print-host{ display: none; }
@media print{
  body.defense-printing > *:not(.defense-print-host){ display: none !important; }
  body.defense-printing .defense-print-host{ display: block; color: #111; }
  body.defense-printing .defense-print-host h1{ font-size: 18px; margin: 0 0 14px; }
  body.defense-printing .defense-print-host .defense-list{ max-height: none; overflow: visible; }
  body.defense-printing .defense-print-host .defense-q{ color: #111; }
  body.defense-printing .defense-print-host .defense-a{ color: #333; }
}

/* ── Mock interview ──────────────────────────────────────────────────── */
.mock-log{
  display: flex; flex-direction: column; gap: 10px; max-height: 46vh; min-height: 180px;
  overflow-y: auto; padding: 4px 2px; margin-bottom: 10px;
}
.mock-bubble{ max-width: 88%; border-radius: 12px; padding: 9px 13px; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; }
.mock-bubble-ai{ align-self: flex-start; background: var(--bg-raised); border: 1px solid var(--border); color: var(--text); }
.mock-bubble-me{ align-self: flex-end; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.mock-bubble-score{ align-self: stretch; background: var(--bg-raised); border: 1px solid var(--primary-dim); border-radius: 12px; padding: 12px 14px; font-size: .88rem; }
.mock-score-head{ margin: 0 0 6px; font-weight: 700; }
.mock-score-row{ margin: 2px 0; color: var(--text-dim); font-size: .85rem; }
.mock-score-locked{ color: var(--text-faint); }
.mock-bubble-score .btn{ margin-top: 10px; }
.mock-controls{ display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.mock-controls .mock-input{ flex: 1; min-width: 200px; resize: vertical; }

/* ══ "Stage" v2 — the operating brief ════════════════════════════════════
   Paper-white slides that read like a strategy memo and print exactly as
   they present. Serif display, grotesk data, hairline rules, oversized
   phase numerals, the 1-30-60-90 day-rail on every slide. The accent
   inherits --deck-accent, so company brand sampling still personalises. */
.deck--stage{
  --stg-paper: #FBFAF7; --stg-ink: #17181A; --stg-muted: #5D6066;
  --stg-faint: #8F9196; --stg-hair: #E6E2D7;
  --stg-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
}
.deck--stage .deck-slide{
  background: var(--stg-paper); color: var(--stg-ink);
  border: 1px solid var(--stg-hair); border-radius: 12px; overflow: hidden;
  container-type: size;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.deck--stage .stg-inner{ position: absolute; inset: 0; padding: 7cqh 7.5cqw; display: flex; flex-direction: column; gap: 2.4cqh; }
.deck--stage .stg-sc{
  margin: 0; font-size: 1.7cqh; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--stg-faint);
}
.deck--stage .stg-right{ margin-left: auto; text-align: right; }
.deck--stage .stg-kickrow, .deck--stage .stg-cover-top{ display: flex; gap: 2cqw; align-items: baseline; }
.deck--stage .stg-kickrow .stg-sc:first-child, .deck--stage .stg-cover-top .stg-sc:first-child{ color: var(--deck-accent, #8C6D1E); }
.deck--stage .stg-display{
  margin: 4cqh 0 0; font-family: var(--stg-serif); font-weight: 500;
  font-size: 9.4cqh; line-height: 1.05; letter-spacing: -.015em; text-wrap: balance; max-width: 78cqw;
}
.deck--stage .stg-rule{ width: 7cqw; height: .7cqh; background: var(--deck-accent, #8C6D1E); margin-top: 3cqh; }
.deck--stage .stg-byline{ margin: 2.4cqh 0 0; font-size: 2.3cqh; color: var(--stg-muted); }
.deck--stage .stg-byline b{ color: var(--stg-ink); font-weight: 600; }
.deck--stage .stg-spacer{ flex: 1; }
.deck--stage .stg-h1{
  margin: 0; font-family: var(--stg-serif); font-weight: 500;
  font-size: 5.6cqh; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance;
}
/* day-rail */
.deck--stage .stg-rail-wrap{ margin-top: .6cqh; }
.deck--stage .stg-rail{ display: flex; gap: .6cqw; height: .55cqh; }
.deck--stage .stg-rail-seg{ flex: 1; background: var(--stg-hair); }
.deck--stage .stg-rail-seg.is-on{ background: var(--deck-accent, #8C6D1E); }
.deck--stage .stg-rail-labels{ display: flex; justify-content: space-between; margin-top: 1cqh;
  font-size: 1.5cqh; letter-spacing: .18em; color: var(--stg-faint); }
/* mandate quotes */
.deck--stage .stg-quotes{ display: flex; flex-direction: column; gap: 2.6cqh; margin-top: 1.4cqh; }
.deck--stage .stg-q{ border-left: .5cqw solid var(--deck-accent, #8C6D1E); padding-left: 2.4cqw; }
.deck--stage .stg-qt{ margin: 0; font-family: var(--stg-serif); font-style: italic; font-size: 2.9cqh; line-height: 1.4; color: var(--stg-ink); }
.deck--stage .stg-re{ margin: .9cqh 0 0; font-size: 2.15cqh; line-height: 1.4; color: var(--stg-muted); }
.deck--stage .stg-re-day{ color: var(--deck-accent, #8C6D1E); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 1.9cqh; }
/* phase */
.deck--stage .stg-ph-head{ display: grid; grid-template-columns: auto 1fr; gap: 3.4cqw; align-items: end; }
.deck--stage .stg-ph-n{ display: block; font-family: var(--stg-serif); font-size: 12.5cqh; line-height: .82; font-weight: 500;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--stg-ink); }
.deck--stage .stg-ph-r{ display: block; margin-top: 1cqh; font-size: 1.6cqh; letter-spacing: .2em; text-transform: uppercase; color: var(--deck-accent, #8C6D1E); font-weight: 600; }
.deck--stage .stg-ph-title{ padding-bottom: .6cqh; }
.deck--stage .stg-goals{ list-style: none; margin: .8cqh 0 0; padding: 0; }
.deck--stage .stg-goals li{ display: grid; grid-template-columns: auto 1fr; gap: 2.2cqw; align-items: baseline;
  border-top: 1px solid var(--stg-hair); padding: 1.35cqh 0; }
.deck--stage .stg-g-n{ font-size: 1.9cqh; font-variant-numeric: tabular-nums; color: var(--deck-accent, #8C6D1E); font-weight: 600; }
.deck--stage .stg-g-t{ font-size: 2.5cqh; line-height: 1.42; color: var(--stg-ink); }
.deck--stage .stg-band{ margin-top: auto; border-top: 1px solid var(--stg-ink); padding-top: 2cqh;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 4cqw; }
.deck--stage .stg-dash{ margin: 1.1cqh 0 0; font-size: 2.1cqh; line-height: 1.45; color: var(--stg-ink); }
.deck--stage .stg-dash::before{ content: "—  "; color: var(--deck-accent, #8C6D1E); }
.deck--stage .stg-meas-row{ display: grid; grid-template-columns: auto 1fr; gap: 2cqw; align-items: baseline; margin-top: 1.1cqh; }
.deck--stage .stg-mv{ font-size: 3.3cqh; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--stg-ink); min-width: 7cqw; }
.deck--stage .stg-ml{ font-size: 1.85cqh; line-height: 1.35; color: var(--stg-muted); }
/* closing */
.deck--stage .stg-checks{ margin-top: .6cqh; }
.deck--stage .stg-close-line{ margin: auto 0 0; border-left: .5cqw solid var(--deck-accent, #8C6D1E);
  padding-left: 2.6cqw; font-family: var(--stg-serif); font-style: italic; font-size: 3.5cqh; line-height: 1.4; color: var(--stg-ink); max-width: 74cqw; }
.deck--stage .stg-sig{ margin: 1.6cqh 0 0; font-size: 1.8cqh; letter-spacing: .14em; text-transform: uppercase; color: var(--stg-muted); }
/* footer */
.deck--stage .stg-foot{ display: flex; justify-content: space-between; gap: 2cqw; margin-top: 2cqh;
  border-top: 1px solid var(--stg-hair); padding-top: 1.4cqh;
  font-size: 1.55cqh; letter-spacing: .16em; text-transform: uppercase; color: var(--stg-faint); }
.deck--stage .stg-foot-n{ font-variant-numeric: tabular-nums; }
/* motion: one quiet fade, nothing else */
.deck--stage .stg-rv{ animation: stgRv .5s ease backwards; }
.deck--stage .stg-rv:nth-child(2){ animation-delay: .06s; }
.deck--stage .stg-rv:nth-child(3){ animation-delay: .12s; }
.deck--stage .stg-rv:nth-child(4){ animation-delay: .18s; }
.deck--stage .stg-rv:nth-child(5){ animation-delay: .24s; }
@keyframes stgRv{ from{ opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce){ .deck--stage .stg-rv{ animation: none; } }
@media print{ .deck--stage .stg-rv{ animation: none !important; } }
.deck--mini .stg-rv{ animation: none; }
/* watermark legible on paper */
.deck--stage .deck-wm span{ color: rgba(23, 24, 26, .07); }
/* definite dimensions everywhere (container-type: size) */
.deck--stage.deck--shared .deck-slide, .deck--stage.deck--download .deck-slide{ aspect-ratio: 16 / 9; overflow: hidden; }
/* veil text floors on small slides */
.deck--stage .deck-slide--veiled .deck-veil-title{ font-size: max(3.6cqh, .95rem); }
.deck--stage .deck-slide--veiled .deck-veil-sub{ font-size: max(2.5cqh, .78rem); }
/* the generic edit canvas under the Stage skin: same paper, structured form */
.deck--stage.deck--edit .deck-slide:not(.deck-slide--veiled){ container-type: normal; }
.deck--stage.deck--edit .deck-slide:not(.deck-slide--veiled) > .deck-slide-inner{ position: static; display: flex; flex-direction: column; gap: 12px; padding: 34px 40px; }
.deck--stage.deck--edit .deck-eyebrow{ margin: 0; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--deck-accent, #8C6D1E); font-weight: 600; }
.deck--stage.deck--edit .deck-title{ margin: 0; font-family: Georgia, "Iowan Old Style", serif; font-size: 1.9rem; font-weight: 500; letter-spacing: -.01em; color: #17181A; }
.deck--stage.deck--edit .deck-subtitle{ margin: 0; color: #5D6066; }
.deck--stage.deck--edit .deck-block-head{ color: #8F9196; text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; }
.deck--stage.deck--edit .deck-bullets li{ color: #17181A; }
.deck--stage.deck--edit .deck-footer{ color: #8F9196; }

/* ── Deck page, prototype parity: chip, filmstrip, viewer, notes, offer ── */
.deck-chip{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .68rem; color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.deck-chip::first-letter{ color: var(--accent); }

.deck-strip{ display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; }
.deck-thumbm{
  flex: none; width: 172px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-raised); overflow: hidden; cursor: pointer; padding: 0;
  font: inherit; color: inherit; text-align: left; transition: border-color .15s;
  position: relative;
}
.deck-thumbm:hover{ border-color: var(--text-faint); }
.deck-thumbm[aria-current="true"]{ border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.deck-mini-box{ aspect-ratio: 16 / 9; overflow: hidden; pointer-events: none; background: var(--bg); position: relative; }
.deck-mini-scale{ width: 400%; transform: scale(.25); transform-origin: 0 0; }
.deck-mini-scale .deck-slide{ aspect-ratio: 16 / 9; overflow: hidden; }
.deck--mini{ pointer-events: none; }
.deck--mini .stg-rv{ animation: none; }
.deck-thumbm.is-locked .deck-mini-scale{ filter: blur(7px) saturate(.8); opacity: .75; }
.deck-thumbm.is-locked .deck-mini-box::after{
  content: "In the kit"; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(10, 14, 19, .85); border: 1px solid var(--border); color: var(--primary);
  font-size: .68rem; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.deck-mini-cap{
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 9px; border-top: 1px solid var(--border-soft);
  font-size: .7rem; color: var(--text-dim);
}
.deck-mini-cap span:first-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-mini-n{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--text-faint); }

.deck-viewer{ display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; align-items: center; }
.deck-arrow{
  height: 88px; border: 1px solid var(--border); border-radius: 8px; background: none;
  color: var(--text-dim); font-size: 20px; cursor: pointer; transition: border-color .15s, color .15s;
}
.deck-arrow:hover{ border-color: var(--text-faint); color: var(--text); }
.deck-stage-shell{ border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg-raised); box-shadow: var(--shadow-md); min-width: 0; }
.deck-vhead{ display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.deck-vhead .deck-template-picker{ display: flex; align-items: center; gap: 10px; margin: 0; }
.deck-vhead .deck-template-picker .label{ font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); margin: 0; }
.deck-vhead .deck-template-select{ width: auto; padding: 4px 10px; font-size: .82rem; }
.deck-progress{ display: flex; gap: 5px; flex: 1; max-width: 300px; margin-left: auto; }
.deck-progress .seg{ height: 3px; flex: 1; border-radius: 2px; background: var(--border); transition: background .3s; }
.deck-progress .seg.on{ background: var(--primary); }
.deck-pos{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .78rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.deck-stage-shell .deck-stage{ padding: 14px; }

.deck-notes{ border-top: 1px solid var(--border-soft); padding: 12px 16px 14px; }
.deck-notes-head{
  margin: 0 0 6px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim);
}
.deck-notes-lockhint{ color: var(--primary); letter-spacing: .06em; }
.deck-notes-text{ margin: 0; font-size: .86rem; line-height: 1.55; color: var(--text-dim); max-width: 80ch; }
.deck-notes-blur{ filter: blur(4px); user-select: none; cursor: pointer; }

.deck-offer{
  margin-top: 26px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(201, 162, 39, .07), transparent 45%), var(--bg-raised);
  display: grid; grid-template-columns: 1.15fr .85fr;
}
.deck-offer-copy{ padding: 26px 30px; }
.deck-offer-h{ margin: 0 0 8px; font-size: 1.35rem; letter-spacing: -.01em; text-wrap: balance; }
.deck-offer-anchor{ margin: 0 0 18px; color: var(--text-dim); font-size: .88rem; max-width: 52ch; }
.deck-offer-anchor b{ color: var(--text); }
.deck-inc{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.deck-inc li{ font-size: .84rem; display: flex; gap: 8px; align-items: baseline; }
.deck-inc-new{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .58rem;
  color: var(--primary); border: 1px solid var(--primary-dim); border-radius: 4px;
  padding: 0 4px; letter-spacing: .06em; margin-left: 4px; align-self: center;
}
.deck-offer-buy{
  border-left: 1px solid var(--border-soft); padding: 26px 30px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px; text-align: center;
}
.deck-price-now{ display: block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 2.6rem; font-weight: 700; }
.deck-price-terms{ display: block; font-size: .72rem; color: var(--text-dim); margin-top: 2px; }
.deck-buy-btn{ font-size: 1rem; font-weight: 800; padding: 14px 18px; }
@media (max-width: 860px){
  .deck-offer{ grid-template-columns: 1fr; }
  .deck-offer-buy{ border-left: 0; border-top: 1px solid var(--border-soft); }
  .deck-inc{ grid-template-columns: 1fr; }
  .deck-viewer{ grid-template-columns: 1fr; }
  .deck-arrow{ display: none; }
}

/* ── Deck design demo (#/demo/deck) ── */
.demo-deck{ padding-top: 4px; padding-bottom: 60px; }
.demo-toggle{ display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.demo-tg{ background: none; border: 0; color: var(--text-dim); font: inherit; font-size: .78rem; padding: 6px 14px; cursor: pointer; }
.demo-tg[aria-pressed="true"]{ background: var(--bg-raised); color: var(--text); font-weight: 700; }
.demo-deck .deck-stage{ padding: 14px; }

/* ── Rebuilt pipeline chrome: stepper, seniority pills, build gate ──
   (restored — an earlier block replacement swallowed this section) */
.np-pipesteps{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 2px 0 12px; font-size: .72rem; letter-spacing: .06em;
}
.np-pipestep{ color: var(--text-faint); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.np-pipestep.is-done{ color: var(--accent); }
.np-pipestep.is-current{ background: var(--bg-raised); color: var(--primary); font-weight: 700; }
.np-pipesep{ color: var(--border); font-size: .68rem; }

.qs-senrow{ display: flex; gap: 8px; flex-wrap: wrap; }
.qs-pill{
  border: 1px solid var(--border); border-radius: 999px; background: none;
  color: var(--text-dim); font: inherit; font-size: .86rem; padding: 8px 16px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.qs-pill[aria-pressed="true"]{ border-color: var(--primary); color: var(--primary); font-weight: 600; }
.qs-pill:hover{ color: var(--text); }

/* Full-page takeover screens (Role, Save-while-it-builds) */
.modal-takeover{
  max-width: none; width: 100%; min-height: 100vh; margin: 0;
  border-radius: 0; border: 0; box-shadow: none; background: var(--bg);
  padding: 0 22px 70px; position: relative; display: block;
}
.np-takeover-close{ position: absolute; top: 14px; right: 20px; z-index: 5; }
.np-topbar{
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  max-width: 1100px; margin: 0 auto 40px; padding: 15px 0;
  border-bottom: 1px solid var(--border-soft);
}
.np-topbar-brand{ display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .01em; }
.np-topbar .np-pipesteps{ margin: 0; }
.np-center{ max-width: 620px; margin: 0 auto; }
.np-panel{ background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px; padding: 30px 34px; }
.np-kicker{
  margin: 0 0 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .68rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--primary);
}
.np-h1{ margin: 0 0 10px; font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.18; text-wrap: balance; }
.np-sub{ margin: 0 0 20px; color: var(--text-dim); font-size: .92rem; line-height: 1.55; }
.np-teal{ color: var(--accent); font-weight: 700; }
.modal-takeover .label{ text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; font-weight: 700; color: var(--text-dim); }
.np-opt{ text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-faint); }
.np-fill{ color: var(--accent); }
.np-prow{ display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.np-prow-note{ font-size: .78rem; color: var(--text-faint); }
.np-fine{ font-size: .75rem; color: var(--text-faint); margin: 12px 0 0; }
.np-tk{ color: var(--accent); font-weight: 700; }
.modal-takeover .modal-foot{ text-align: left; margin-top: 14px; }
.buildgate-cols{
  display: grid; grid-template-columns: minmax(320px, 440px) minmax(300px, 420px);
  gap: 22px; justify-content: center; align-items: start;
  max-width: 1100px; margin: 0 auto;
}
@media (max-width: 760px){ .buildgate-cols{ grid-template-columns: 1fr; } }
.modal-buildgate.is-building .buildgate-left{ display: none; }
.modal-buildgate.is-building .buildgate-cols{ grid-template-columns: minmax(320px, 540px); }
.buildgate-openrow{ margin-top: 16px; }
.auth-buildlog{ align-self: start; }
.auth-buildlog-head{ margin: 0 0 14px; display: flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 700; color: var(--text); }
.auth-buildlog-line{
  margin: 0 0 8px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .76rem; line-height: 1.55; color: var(--text-dim);
  opacity: .32; transition: opacity .4s;
}
.auth-buildlog-line.is-on{ opacity: 1; }
.auth-buildlog-note{ opacity: .8; }

/* ── Plan strength meter (Role screen) ──────────────────────────────────
   Not a gate and not a score to chase — it makes the payoff of each
   optional field visible, since skipping the posting silently costs the
   candidate the slide that quotes it back. */
.qs-strength{ margin: 18px 0 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-raised); }
.qs-strength-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.qs-strength-cap{ font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); }
.qs-strength-label{ font-size: .84rem; font-weight: 700; color: var(--text-dim); }
.qs-strength[data-level="specific"] .qs-strength-label{ color: var(--primary); }
.qs-strength[data-level="sharp"] .qs-strength-label{ color: var(--accent); }
.qs-strength-bar{ height: 4px; border-radius: 99px; background: var(--border); margin: 9px 0 9px; overflow: hidden; }
.qs-strength-bar > span{ display: block; height: 100%; width: 0; border-radius: 99px; background: var(--text-faint); transition: width .35s ease, background .35s ease; }
.qs-strength[data-level="tailored"] .qs-strength-bar > span{ background: var(--text-dim); }
.qs-strength[data-level="specific"] .qs-strength-bar > span{ background: var(--primary); }
.qs-strength[data-level="sharp"] .qs-strength-bar > span{ background: var(--accent); }
.qs-strength-hint{ margin: 0; font-size: .78rem; line-height: 1.5; color: var(--text-dim); }

/* ── Stage v2: intro + conclusion slides ── */
.deck--stage .stg-intro-cols{ display: grid; grid-template-columns: 1fr 1.05fr; gap: 4cqw; margin-top: 1.2cqh; }
.deck--stage .stg-intro-col{ min-width: 0; }
.deck--stage .stg-agenda-row{ display: grid; grid-template-columns: auto 1fr; gap: 2cqw; align-items: baseline;
  border-top: 1px solid var(--stg-hair); padding: 1.25cqh 0; }
.deck--stage .stg-agenda-d{ font-size: 1.75cqh; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--deck-accent, #8C6D1E); white-space: nowrap; }
.deck--stage .stg-agenda-t{ font-size: 2.25cqh; line-height: 1.4; color: var(--stg-ink); }
.deck--stage .stg-commits{ margin-top: 1.6cqh; }
.deck--stage .stg-commit{ display: grid; grid-template-columns: 14cqw 1fr; gap: 2.4cqw; align-items: baseline;
  border-top: 1px solid var(--stg-hair); padding: 1.7cqh 0; }
.deck--stage .stg-commit-d{ font-size: 1.8cqh; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--deck-accent, #8C6D1E); }
.deck--stage .stg-commit-t{ font-size: 2.7cqh; line-height: 1.38; color: var(--stg-ink); }

/* ── Optional resume on the Role screen ── */
.qs-resume{ margin-top: 4px; }
.qs-resume-toggle{ font-size: .84rem; }
.qs-resume-body{ margin-top: 10px; display: flex; flex-direction: column; gap: 9px; }
/* an author display: rule beats the UA [hidden] rule — restore it */
.qs-resume-body[hidden]{ display: none; }
.qs-resume-note{ margin: 0; font-size: .76rem; line-height: 1.5; color: var(--text-faint); }

/* ── The candidate's own goal: set as a statement, not a bullet ── */
.qs-goal-field{ border-left: 2px solid var(--primary-dim); padding-left: 14px; }
.qs-goal-note{ margin: 7px 0 0; font-size: .76rem; line-height: 1.5; color: var(--accent); }
.deck--stage .stg-goal{
  margin: 1.4cqh 0 0; border-left: .45cqw solid var(--deck-accent, #8C6D1E); padding-left: 2.2cqw;
  font-family: var(--stg-serif); font-style: italic; font-size: 3cqh; line-height: 1.38;
  color: var(--stg-ink); max-width: 74cqw;
}

/* ── Tall modals must be reachable ─────────────────────────────────────
   .modal-backdrop is position:fixed with align-items:center and no
   overflow, so any modal taller than the viewport had its lower half
   unreachable — on a 1440x900 laptop the Role screen's "Build my plan"
   button sat below the fold with nothing to scroll. The flex-safe fix:
   scroll the backdrop, start-align, and let auto margins keep short
   modals centred. */
.modal-backdrop{ overflow-y: auto; align-items: flex-start; -webkit-overflow-scrolling: touch; }
.modal-backdrop > *{ margin: auto; }
/* The takeover screens supply their own full-bleed padding. */
.modal-backdrop:has(> .modal-takeover){ padding: 0; }
.modal-backdrop > .modal-takeover{ margin: 0; }

/* ── Intake: the two inputs that actually change the output ─────────────
   Job description and resume carry the plan. They used to read as
   afterthoughts — one labelled "or extra details (optional)", the other
   folded behind a link — so they went unfilled. Give them a panel so the
   eye lands there, and keep the note above the control where it is read
   before the box rather than after it. */
.np-field-major{
  padding: 14px 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}
.np-field-note{
  margin: 3px 0 9px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--text-faint);
}
.np-field-major .qs-resume-body{ margin-top: 0; }

/* ── Generating loader: the plan assembling itself ─────────────────────
   A spinner says "wait"; this says "here is what is being made." A 16:9
   stage stands in for the slide they are about to get: the 1-30-60-90 rail
   draws across, then each phase column writes its lines in as the model
   reaches that phase. Driven by the real stage index, so it never claims
   progress that has not happened. */
.npl{ width: 100%; max-width: 360px; margin: 0 auto var(--space-3); }
.npl-stage{
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(31,186,160,.07), transparent 62%),
    linear-gradient(#10151C, #0D1218);
  overflow: hidden;
  padding: 13% 9% 9%;
  display: flex;
  flex-direction: column;
  gap: 9%;
}

/* the day rail */
.npl-rail{ position: relative; height: 1px; flex: none; }
.npl-rail-line{ position: absolute; inset: 0; background: var(--border); }
.npl-rail-fill{
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .9s cubic-bezier(.4,0,.2,1);
}
.npl-tick{
  position: absolute; top: 0; transform: translate(-50%, -50%);
  font: 600 8px/1 var(--font-body); letter-spacing: .06em;
  color: var(--text-faint); background: #0D1218; padding: 2px 4px; border-radius: 3px;
}
.npl-tick-end{ transform: translate(-70%, -50%); }

/* phase columns */
.npl-cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 7%; flex: 1; }
.npl-col{ position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.npl-num{
  font: 700 20px/1 var(--font-display);
  color: var(--text-faint); opacity: .22;
  transition: opacity .5s ease, color .5s ease, transform .5s ease;
  transform: translateY(3px);
}
.npl-cap{
  font: 600 7px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint); opacity: 0; transition: opacity .5s ease .1s;
}
/* Skeleton lines. The empty track is always visible so the card reads as a
   slide waiting to be written rather than a blank box; the fill writes in
   left to right when that phase is reached. */
.npl-col i{
  display: block; position: relative; height: 3px; border-radius: 2px;
  background: rgba(232,236,241,.07);
}
.npl-col i::after{
  content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, rgba(232,236,241,.34), rgba(232,236,241,.12));
  transition: width .55s cubic-bezier(.4,0,.2,1);
}
.npl-col i:nth-of-type(1){ width: 100%; }
.npl-col i:nth-of-type(2){ width: 82%; }
.npl-col i:nth-of-type(3){ width: 61%; }
.npl-col i:nth-of-type(4){ width: 88%; }
.npl-col i:nth-of-type(1)::after{ transition-delay: .05s; }
.npl-col i:nth-of-type(2)::after{ transition-delay: .18s; }
.npl-col i:nth-of-type(3)::after{ transition-delay: .31s; }
.npl-col i:nth-of-type(4)::after{ transition-delay: .44s; }
.npl-col.is-on .npl-num{ opacity: .95; color: var(--primary); transform: translateY(0); }
.npl-col.is-on .npl-cap{ opacity: .75; }
.npl-col.is-on i::after{ width: 100%; }

/* Reading phase: nothing to fill yet, so the rail scans the role instead. */
.npl-scan{
  position: absolute; top: 50%; left: 0; width: 22%; height: 1px;
  transform: translateY(-50%); opacity: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.npl.is-reading .npl-scan{ opacity: .9; animation: npl-scan 1.9s ease-in-out infinite; }
@keyframes npl-scan{
  0%   { left: -22%; }
  100% { left: 100%; }
}

/* the column currently being written keeps a soft pulse on its numeral */
.npl-col.is-on:last-of-type .npl-num{ color: var(--accent); }

/* a slow sheen so the card never looks frozen between stages */
.npl-sweep{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.045) 50%, transparent 58%);
  background-size: 240% 100%;
  animation: npl-sheen 2.9s ease-in-out infinite;
}
@keyframes npl-sheen{
  0%   { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce){
  .npl-sweep, .npl.is-reading .npl-scan{ animation: none; }
  .npl-rail-fill, .npl-col i::after, .npl-num, .npl-cap{ transition: none; }
}

/* ── Takeover immunity from the landing shell ──────────────────────────
   The app boots inside whichever landing page the visitor arrived on. The
   cream A/B variants (B and C) restyle the app's modal to match their own
   palette — `.modal h1, .modal label, .modal p, .modal span { color:
   var(--np-ink) !important }`, plus cream inputs and rust buttons. Those
   were written when the modal was a small auth dialog sitting on a cream
   page. The buildgate is now a full-page dark takeover that is ALSO a
   `.modal`, so the shell painted near-black text onto the dark panel: the
   heading, every field label and every note went invisible, and the inputs
   came back cream. Variant A is dark, which is why it never showed.

   Win it back on specificity — `.modal.modal-takeover x` (0,2,1) outranks
   `.modal x` (0,1,1) — so the takeover renders the same under any shell.
   Every value below is the app's own token, so this is a no-op on the dark
   shell and needs no matching change in the landing pages. */
/* The shell also repaints `.modal` itself, which left a cream page behind
   the dark panel. Set both here so direct text nodes (the topbar brand)
   inherit the right ink too. */
.modal.modal-takeover{ background: var(--bg) !important; color: var(--text) !important; }

.modal.modal-takeover h1,
.modal.modal-takeover h2,
.modal.modal-takeover h3,
.modal.modal-takeover label,
.modal.modal-takeover p,
.modal.modal-takeover span{ color: var(--text) !important; }

.modal.modal-takeover .np-sub,
.modal.modal-takeover .label,
.modal.modal-takeover .modal-foot,
.modal.modal-takeover .qs-strength-hint{ color: var(--text-dim) !important; }

.modal.modal-takeover .np-opt,
.modal.modal-takeover .np-prow-note,
.modal.modal-takeover .np-fine,
.modal.modal-takeover .np-field-note,
.modal.modal-takeover .qs-resume-note,
.modal.modal-takeover .bx-trust{ color: var(--text-faint) !important; }

.modal.modal-takeover .np-kicker{ color: var(--primary) !important; }

.modal.modal-takeover .np-teal,
.modal.modal-takeover .np-tk,
.modal.modal-takeover .np-fill,
.modal.modal-takeover .qs-goal-note,
.modal.modal-takeover a,
.modal.modal-takeover .link-btn{ color: var(--accent) !important; }

.modal.modal-takeover .input,
.modal.modal-takeover input,
.modal.modal-takeover textarea,
.modal.modal-takeover select{
  background: var(--bg-raised) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.modal.modal-takeover .input::placeholder{ color: var(--text-faint) !important; }

.modal.modal-takeover .btn-primary{
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  border: none !important;
}
.modal.modal-takeover .btn-ghost,
.modal.modal-takeover .btn-secondary{
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.modal.modal-takeover .qs-pill[aria-pressed="true"]{ color: var(--primary) !important; border-color: var(--primary) !important; }

/* ── Unlock modal: a decision, not a catalogue ─────────────────────────
   It had nine outcome chips, two motivational lines and a price anchor,
   which on a laptop pushed the buy button below the fold — the one thing
   the dialog exists to show. Tighter type, five grouped chips, and a hard
   ceiling so it never scrolls: the primary action stays visible. */
.mz-unlock{ max-width: 460px; }
.mz-unlock .modal-title{ font-size: 1.12rem; line-height: 1.25; }
.mz-unlock-head{
  margin: 0 0 10px !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  line-height: 1.45;
  color: var(--text-dim) !important;
}
.mz-unlock-price{
  margin: 0 0 14px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .01em;
}
/* styles.css centres the chips, which is right for the wide pack preview
   but leaves a ragged left edge here, where five near-full-width lines
   should read as a list. */
.mz-locks-tight{ gap: 6px; margin: 0 0 4px; justify-content: flex-start; }
.mz-locks-tight .mz-lock-chip{
  font-size: .8rem;
  padding: 6px 11px;
  line-height: 1.3;
}
.mz-unlock-actions{ margin-top: 16px; }
.mz-unlock-fine{ margin-top: 10px; font-size: .74rem; }

/* Never let the dialog outgrow the viewport — scroll the chips, never the
   buttons. */
@media (min-height: 520px){
  .mz-unlock{ max-height: min(92vh, 640px); display: flex; flex-direction: column; }
  .mz-unlock .mz-locks-tight{ overflow-y: auto; min-height: 0; }
}