/* ==========================================================================
   Fixate — shared design system
   ========================================================================== */

:root{
  --bg:            #0c0d10;
  --bg-raised:     #15171c;
  --bg-raised-2:   #1b1e24;
  --bg-elevated:   #1f2229;
  --hairline:      #2a2d34;
  --hairline-soft: #202329;

  --ink:           #e9e8e3;
  --ink-dim:       #9a9ca4;
  --ink-faint:     #5c5e66;

  --focal:         #ff5a4a;
  --focal-dim:     #7a2e28;
  --focal-wash:    rgba(255,90,74,.09);

  --signal:        #55d6c2;
  --signal-dim:    #1c3934;
  --signal-wash:   rgba(85,214,194,.08);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;

  --serif: 'Literata', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --container: 1080px;
  --container-narrow: 760px;

  /* ---- spacing scale: every margin/padding/gap in this file is one of these ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;

  /* ---- type scale ---- */
  --text-xs:   11px;
  --text-sm:   12.5px;
  --text-base: 14px;
  --text-md:   15.5px;
  --text-lg:   17px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background: var(--bg); overscroll-behavior-y: none; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overscroll-behavior-y: none;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background: var(--signal-dim); color: var(--ink); }

.container{ max-width: var(--container); margin:0 auto; padding-left: var(--sp-6); padding-right: var(--sp-6); }
.container-narrow{ max-width: var(--container-narrow); margin:0 auto; padding-left: var(--sp-6); padding-right: var(--sp-6); }

h1,h2,h3,h4{ font-family: var(--serif); font-weight:600; margin:0; letter-spacing:.1px; }
p{ margin:0; }

.eyebrow{
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--focal);
  display:flex; align-items:center; gap: var(--sp-2);
}
.eyebrow::before{
  content:''; width:14px; height:1px; background: var(--focal);
}
.inline-link{ color: var(--signal); border-bottom:1px solid var(--signal-dim); transition: border-color .15s; }
.inline-link:hover{ border-color: var(--signal); }

/* ---------- Buttons ---------- */
.btn{
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--hairline);
  background: var(--bg-raised-2);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  line-height: 1;
  transition: border-color .15s, transform .1s, background .15s;
}
.btn:hover{ border-color:#454852; }
.btn:active{ transform: scale(.97); }
.btn:focus-visible{ outline: 2px solid var(--signal); outline-offset: 2px; }
.btn.primary{
  background: var(--focal);
  border-color: var(--focal);
  color: #1a0a08;
}
.btn.primary:hover{ filter: brightness(1.08); }
.btn.ghost{ background: transparent; }
.btn.small{ padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); }
.btn.icon{ width:40px; height:40px; padding:0; font-size: 15px; flex: 0 0 auto; }
.btn:disabled{ opacity:.35; cursor:not-allowed; }

/* ---------- Nav ---------- */
.site-nav{
  position: sticky; top:0; z-index: 40;
  background: rgba(12,13,16,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline-soft);
}
.site-nav .bar{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-7);
}
.brand{
  display:flex; align-items:center; gap: var(--sp-2);
  font-family: var(--serif);
  font-weight:600;
  font-size: 19px;
  color: var(--ink);
  margin-right: auto;
}
.brand .mark{ width:20px; height:20px; flex:0 0 auto; }
.brand.small{ font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.brand.small .mark{ width:16px; height:16px; }

.nav-links{
  display:flex; align-items:center; gap: var(--sp-6);
  font-size: var(--text-base);
  color: var(--ink-dim);
}
.nav-pages{ display:flex; align-items:center; gap: var(--sp-6); }
.nav-links a{ padding: var(--sp-1) 2px; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.nav-links a:hover{ color: var(--ink); }
.nav-links a.active{ color: var(--ink); border-color: var(--focal); }
.nav-divider{ width:1px; height:18px; background: var(--hairline); flex: 0 0 auto; }
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--hairline); color:var(--ink);
  border-radius: var(--radius-sm); width:38px; height:38px; font-size:16px; cursor:pointer;
}
@media (max-width: 760px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background: var(--bg-raised);
    border-bottom:1px solid var(--hairline);
    flex-direction:column; align-items:flex-start;
    padding: var(--sp-4) var(--sp-6) var(--sp-5);
    gap: var(--sp-5);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-pages{ flex-direction:column; align-items:flex-start; gap: var(--sp-4); }
  .nav-divider{ display:none; }
  .nav-toggle{ display:block; }
  .site-nav .bar .btn.primary.small{ display:none; }
  .nav-links .btn.primary.small{ display:inline-flex; }
}

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid var(--hairline-soft);
  margin-top: var(--sp-12);
  padding: var(--sp-9) 0 var(--sp-10);
  color: var(--ink-faint);
}
.site-footer .bar{
  max-width: var(--container);
  margin:0 auto; padding: 0 var(--sp-6);
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap: var(--sp-6);
}
.site-footer .tag{ font-size: var(--text-sm); color: var(--ink-faint); max-width:280px; line-height:1.6; }
.site-footer nav{ display:flex; gap: var(--sp-5); font-size: var(--text-sm); }
.site-footer nav a:hover{ color: var(--ink-dim); }
.site-footer .fine{ font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-faint); margin-top: var(--sp-4); }

/* ---------- Hero ---------- */
.hero{
  padding: var(--sp-9) 0 var(--sp-10);
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:'';
  position:absolute; left:-10%; right:-10%; top:-15%; height: 480px;
  background: radial-gradient(ellipse 700px 380px at 50% 0%, rgba(255,90,74,.10), transparent 65%);
  pointer-events:none;
}
.hero .grid{
  position:relative;
  display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-10); align-items:center;
}
.hero h1{
  font-size: clamp(38px, 5.4vw, 66px);
  line-height: 1.06;
  letter-spacing: -.5px;
  margin: var(--sp-5) 0 var(--sp-5);
}
.hero h1 em{ font-style:normal; color: var(--focal); }
.hero .lede{
  font-size: var(--text-lg);
  color: var(--ink-dim);
  max-width: 480px;
  line-height: 1.65;
  margin-bottom: var(--sp-7);
}
.hero .cta-row{ display:flex; gap: var(--sp-4); align-items:center; flex-wrap:wrap; }
.hero .formats{ margin-top: var(--sp-6); }

/* Hero live demo card */
.demo-card{
  background: linear-gradient(180deg, var(--bg-raised) 0%, #121317 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.65);
}
.demo-caption{
  text-align:center; margin-top: var(--sp-6); font-family: var(--mono);
  font-size: var(--text-xs); color: var(--ink-faint); letter-spacing:.4px;
}

/* ==========================================================================
   ORP word component — one canonical implementation, reused on every page.
   The tick marks are pseudo-elements on the focal letter itself (em-sized),
   so they always hug that exact glyph no matter the surrounding box metrics.
   ========================================================================== */
.orp-rail{
  position: relative;
  padding: var(--sp-2) 6% var(--sp-6);
  border-bottom: 1px solid var(--hairline);
  transition: border-color .2s;
}
.orp-rail.is-idle{ border-bottom-color: transparent; }
.orp-rail.is-idle .orp-word{ display:none; }
.orp-placeholder{
  display:none;
  text-align:center;
  font-family: var(--sans);
  font-size: var(--text-base);
  color: var(--ink-faint);
  padding: var(--sp-4) 0;
}
.orp-rail.is-idle .orp-placeholder{ display:block; }

.orp-word{
  display:flex; align-items:center; justify-content:center;
  font-family: var(--serif); font-weight:500;
  font-size: clamp(30px,6vw,58px);
  line-height:1.15;
  user-select:none; letter-spacing:.2px;
}
.orp-word.size-md{ font-size: clamp(26px,3.4vw,38px); }
.orp-word .side{ flex:1 1 0; white-space:pre; overflow:hidden; }
.orp-word .left{ text-align:right; }
.orp-word .right{ text-align:left; }
.orp-word .focal{
  position:relative;
  color: var(--focal); font-weight:700; flex:0 0 auto;
}
.orp-word .focal::before,
.orp-word .focal::after{
  content:''; position:absolute; left:50%; width:2px;
  background: var(--focal-dim); transform: translateX(-1px);
}
.orp-word .focal::before{ top:-.5em; height:.32em; }
.orp-word .focal::after{  bottom:-.5em; height:.32em; }

.stage.focus-mode .orp-word{ font-size: clamp(32px,7vw,84px); }

/* ---------- Sections ---------- */
section{ padding: var(--sp-9) 0; }
.section-head{ max-width: 620px; margin-bottom: var(--sp-8); }
.section-head h2{ font-size: clamp(26px, 3.4vw, 36px); margin: var(--sp-3) 0 var(--sp-3); letter-spacing:-.2px; }
.section-head p{ color: var(--ink-dim); font-size: var(--text-md); line-height:1.65; }

/* Steps */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
.step{
  background: var(--bg-raised);
  border:1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--sp-6);
}
.step .n{
  font-family: var(--mono); color: var(--focal); font-size: var(--text-base);
  border:1px solid var(--focal-dim); background: var(--focal-wash);
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: var(--sp-4);
}
.step h3{ font-size:17px; margin-bottom: var(--sp-2); }
.step p{ font-size: var(--text-sm); color: var(--ink-dim); line-height:1.6; }

/* Fact / stat cards */
.facts{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); }
.fact{ background: var(--bg-raised); border:1px solid var(--hairline); border-radius: var(--radius); padding: var(--sp-6) var(--sp-5); }
.fact .num{ font-family: var(--mono); font-size: 26px; font-weight:600; color: var(--ink); }
.fact .num span{ color: var(--focal); }
.fact .lbl{ font-size: var(--text-sm); color: var(--ink-dim); margin-top: var(--sp-2); line-height:1.5; }

/* Format row */
.formats{ display:flex; gap: var(--sp-3); flex-wrap:wrap; }
.format-tag{
  font-family: var(--mono); font-size: var(--text-sm); color: var(--ink-dim);
  border:1px solid var(--hairline); background: var(--bg-raised);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm);
}

/* CTA band */
.cta-band{
  background: linear-gradient(135deg, var(--bg-raised) 0%, #191313 100%);
  border:1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-9) var(--sp-8);
  text-align:center;
}
.cta-band h2{ font-size: clamp(24px,3.4vw,34px); margin-bottom: var(--sp-3); }
.cta-band p{ color: var(--ink-dim); font-size: var(--text-md); margin-bottom: var(--sp-6); }

/* ---------- Cards / generic ---------- */
.card{
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--sp-6);
}

/* ---------- About page specifics ---------- */
.article{ max-width: var(--container-narrow); margin: 0 auto; }
.article .kicker{ margin-bottom: var(--sp-4); }
.article h1{ font-size: clamp(32px,5vw,50px); line-height:1.1; margin-bottom: var(--sp-5); }
.article .lede{ font-size: var(--text-lg); color: var(--ink-dim); line-height:1.65; margin-bottom: var(--sp-10); }
.article h2{ font-size: 24px; margin: var(--sp-9) 0 var(--sp-3); }
.article h3{ font-size: var(--text-lg); margin: var(--sp-6) 0 var(--sp-2); font-family: var(--sans); font-weight:700; }
.article p{ font-size: var(--text-md); color: var(--ink-dim); line-height: 1.75; margin-bottom: var(--sp-4); }
.article p b, .article p strong{ color: var(--ink); font-weight: 600; }
.article .callout{
  border-left: 2px solid var(--focal);
  background: var(--focal-wash);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  color: var(--ink-dim);
  margin: var(--sp-5) 0;
}
.article .callout b{ color: var(--ink); }

.orp-diagram{
  background: var(--bg-raised); border:1px solid var(--hairline); border-radius: var(--radius);
  padding: var(--sp-8) var(--sp-6); margin: var(--sp-6) 0;
}
.orp-diagram .orp-rail{ border-bottom:none; padding: 0; max-width: 320px; margin: 0 auto; }
.orp-diagram .orp-word{ font-size: clamp(30px,4vw,42px); }
.orp-diagram-caption{
  text-align:center; margin-top: var(--sp-6); font-family: var(--mono);
  font-size: var(--text-xs); color: var(--ink-faint); letter-spacing:.3px; line-height:1.7;
}

.source-list{ list-style:none; padding:0; margin: 0; font-size: var(--text-sm); color: var(--ink-faint); line-height:2; }
.source-list li::before{ content:'—'; margin-right: var(--sp-2); color: var(--hairline); }

.faq-item{ border-bottom: 1px solid var(--hairline-soft); padding: var(--sp-5) 0; }
.faq-item summary{ cursor:pointer; font-family: var(--sans); font-weight:600; font-size: var(--text-md); color: var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; gap: var(--sp-4); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; color: var(--ink-faint); font-size:18px; font-weight:400; flex: 0 0 auto; }
.faq-item[open] summary::after{ content:'–'; }
.faq-item p{ margin-top: var(--sp-3); font-size: var(--text-sm); color: var(--ink-dim); line-height:1.7; }

/* ---------- Reader stage (app.html) ---------- */
.app-head{ padding: var(--sp-8) 0 var(--sp-1); }
.app-head .eyebrow{ margin-bottom: var(--sp-4); }
.app-head h1{ font-size: clamp(28px,4vw,40px); margin-bottom: var(--sp-3); }
.app-head p{ color: var(--ink-dim); font-size: var(--text-md); max-width:560px; line-height:1.6; }

.stage{
  background: linear-gradient(180deg, var(--bg-raised) 0%, #121317 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px -24px rgba(0,0,0,.6);
  margin-top: var(--sp-7);
}
.stage.focus-mode{ position: fixed; inset: 0; z-index: 999; border-radius: 0; display:flex; flex-direction:column; justify-content:center; }
.stage.focus-mode .stage-inner{ min-height:0; padding: 0 var(--sp-6); }
.stage.focus-mode .orp-rail{ padding: 0 8vw var(--sp-8); }

.stage-inner{
  display:flex; flex-direction:column; justify-content:center;
  min-height: 220px; padding: var(--sp-8) var(--sp-6); position:relative;
}
.exit-focus{
  position:absolute; top: var(--sp-4); right: var(--sp-4);
  background: var(--bg-raised-2); border:1px solid var(--hairline);
  color: var(--ink-dim); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
  font-family: var(--mono); font-size: var(--text-sm); cursor:pointer; display:none;
}
.stage.focus-mode .exit-focus{ display:block; }

.progress-track{ position:relative; height:4px; background: var(--hairline); border-radius:4px; margin: 0 6%; }
.progress-track{ cursor:pointer; }
.progress-fill{ position:absolute; left:0; top:0; bottom:0; background: var(--signal); border-radius:4px; width:0%; }
.progress-meta{ display:flex; justify-content:space-between; margin: var(--sp-2) 6% 0; font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-faint); }
.stage-inner + .progress-track{ margin-top: calc(var(--sp-6) * -1 + var(--sp-3)); }

.transport{
  display:flex; align-items:center; justify-content:center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border-top:1px solid var(--hairline);
  flex-wrap:wrap;
}
.stage.focus-mode .transport{ display:none; }
.transport-group{ display:flex; align-items:center; gap: var(--sp-3); }
.transport-divider{ width:1px; height:28px; background: var(--hairline); flex: 0 0 auto; }

.wpm-control{ display:flex; align-items:center; gap: var(--sp-3); font-family: var(--mono); font-size: var(--text-sm); color: var(--ink-dim); }
.wpm-control input[type=range]{ width:130px; accent-color: var(--signal); }
.wpm-value{ color: var(--ink); font-weight:600; min-width:60px; text-align:right; }

.kbd-hints{ display:flex; gap: var(--sp-5); flex-wrap:wrap; justify-content:center; margin-top: var(--sp-5); font-size: var(--text-xs); color: var(--ink-faint); font-family: var(--mono); }
.kbd-hints kbd{ background: var(--bg-raised-2); border:1px solid var(--hairline); border-radius:4px; padding: 1px var(--sp-2); color: var(--ink-dim); font-family: var(--mono); }

.panel{ margin-top: var(--sp-9); background: var(--bg-raised); border:1px solid var(--hairline); border-radius: var(--radius); padding: var(--sp-6); }
.panel h2{ font-family: var(--sans); font-size: var(--text-sm); text-transform:uppercase; letter-spacing:1px; color: var(--ink-faint); margin: 0 0 var(--sp-4); font-weight:700; }
.dropzone{ border:1.5px dashed var(--hairline); border-radius: var(--radius-sm); padding: var(--sp-6); text-align:center; color: var(--ink-dim); font-size: var(--text-base); cursor:pointer; transition: border-color .15s, background .15s; }
.dropzone.drag{ border-color: var(--signal); background: var(--signal-wash); color: var(--ink); }
.dropzone strong{ color: var(--ink); }
.dropzone .hint{ font-size: var(--text-xs); color: var(--ink-faint); margin-top: var(--sp-1); font-family: var(--mono); }
#fileInput{ display:none; }

.or-div{ display:flex; align-items:center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--ink-faint); font-size: var(--text-xs); font-family: var(--mono); }
.or-div::before, .or-div::after{ content:''; flex:1; height:1px; background: var(--hairline); }

textarea{
  width:100%; min-height:110px; background: var(--bg-raised-2); border:1px solid var(--hairline);
  border-radius: var(--radius-sm); color: var(--ink); font-family: var(--sans); font-size: var(--text-base); line-height:1.5;
  padding: var(--sp-3) var(--sp-4); resize:vertical;
}
textarea:focus-visible, .dropzone:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; }

.panel-footer{ display:flex; align-items:center; justify-content:space-between; margin-top: var(--sp-4); gap: var(--sp-4); flex-wrap:wrap; }
.file-name{ font-size: var(--text-sm); color: var(--ink-dim); font-family: var(--mono); }

.settings-row{ display:flex; gap: var(--sp-6); flex-wrap:wrap; margin-top: var(--sp-5); padding-top: var(--sp-5); border-top:1px solid var(--hairline); }
.setting{ display:flex; flex-direction:column; gap: var(--sp-2); }
.setting label{ font-size: var(--text-xs); color: var(--ink-faint); font-family: var(--mono); text-transform:uppercase; letter-spacing:.5px; }
select{ background: var(--bg-raised-2); color: var(--ink); border:1px solid var(--hairline); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font-size: var(--text-base); font-family: var(--sans); }

.stats-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--hairline); border:1px solid var(--hairline); border-radius: var(--radius); overflow:hidden; margin-top: var(--sp-6); }
.stat-box{ background: var(--bg-raised); padding: var(--sp-4); }
.stat-box .num{ font-family: var(--mono); font-size: 18px; font-weight:600; }
.stat-box .lbl{ font-size: var(--text-xs); color: var(--ink-faint); text-transform:uppercase; letter-spacing:.5px; margin-top: var(--sp-1); }

.app-footnote{ margin-top: var(--sp-6); font-size: var(--text-base); color: var(--ink-faint); text-align:center; }
.app-footnote a{ color: var(--signal); border-bottom:1px solid transparent; }
.app-footnote a:hover{ border-color: var(--signal); }

.error-toast{
  position:fixed; bottom: var(--sp-6); left:50%; transform:translateX(-50%);
  background:#241213; border:1px solid #4a2020; color:#ffb4ab;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-sm); font-size: var(--text-base); font-family: var(--sans);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); z-index:200; display:none;
}

@media (max-width: 860px){
  .hero .grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .facts{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .stats-strip{ grid-template-columns: repeat(2,1fr); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}