/* Controlled visual correction for the public Companion. The tool logic remains separate. */
:root {
  --accent: #9b4d37;
  --accent-d: #813823;
  --accent-light: #e5a38f;
  --green: #17674d;
}
.btn { border-radius: 2px; box-shadow: none; }
.btn:hover { transform: none; box-shadow: none; }
.hero { background: var(--ink); }
.hero h1 { max-width: 830px; font-size: clamp(54px, 8vw, 96px); line-height: 0.92; letter-spacing: -0.045em; }
.hero-lead { max-width: 750px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-secondary { color: var(--cream); border-color: rgba(250,247,242,.35); }
.preview-label { max-width: 180px; overflow: hidden; color: var(--muted); font-size: 9.5px; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.how-section { padding-top: 20px; }
.hero-stats { border-top: 1px solid rgba(250,247,242,.28); border-bottom: 1px solid rgba(250,247,242,.14); }
.hstat { border-right: 1px solid rgba(250,247,242,.14); }
.hstat:last-child { border-right: 0; }
.tool { border-radius: 0; box-shadow: none; }
.tool-tabs, .preview-head, .out-head { border-radius: 0; }
.tool-tab, .chip, .shuffle-btn, .share-btn, .pmode, .pmode button, .dl-btn, .copy, .tag, .live-badge, .a11y-badge { border-radius: 2px; }
.pmode button { transition: none; }
.pmode button, .share-btn, .shuffle-btn, .otab, .dl-btn, .copy { min-height: 28px; }
.preview-head svg, .shuffle-btn svg, .share-btn svg, .a11y-badge svg { display: none; }
.canvas { background: var(--base); }
.frame { border-radius: 0; box-shadow: none; }
.steps { display: block; border-top: 1px solid var(--rule); }
.step { display: grid; grid-template-columns: 65px minmax(0,1fr); gap: 25px; padding: 24px 0; border-bottom: 1px solid var(--rule); background: transparent; border-radius: 0; }
.step-num { width: auto; height: auto; border: 0; border-radius: 0; background: transparent; color: var(--accent-d); font: 700 11px/1 var(--font-mono); }
.kbd-legend { border-radius: 0; }
.kbd-item { border-radius: 0; }
.perks { border-top: 1px solid rgba(250,247,242,.24); }
.perk { padding: 13px 0; border-bottom: 1px solid rgba(250,247,242,.14); }
.perk::before { content: none; }
.price .per { color: rgba(250,247,242,.58); }
.faq { border-top: 1px solid var(--rule); }
.qa { border-radius: 0; box-shadow: none; border-width: 0 0 1px; background: transparent; }
.lock-ic { width: auto; height: auto; padding: 5px 8px; border-radius: 0; font: 700 9px/1 var(--font-mono); letter-spacing: .08em; }
footer { border-top: 1px solid rgba(250,247,242,.16); }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 9px 13px;
  color: var(--cream);
  background: var(--structure);
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }

/* Keyboard focus must remain visible on both paper and ink surfaces. */
:focus-visible,
.tune input[type="range"]:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--accent-d);
}

/* Contrast corrections for light paper and dark ink surfaces. */
.btn.gold { color: #fff; background: var(--accent-d); }
.btn.gold:hover { color: #fff; background: #6d2f1e; }
.hero-e, .pro-e, .peek-card .lock-ic, .peek-card .gprice {
  color: var(--accent-light);
}
.hstat span { color: rgba(250,247,242,.74); }
.chip.locked { opacity: 1; background: #eee9df; }
.fbar .furl { opacity: .86; }
.live-badge { color: var(--green); }
.pro .price .per, .pro .meta-note, footer, footer p {
  color: rgba(250,247,242,.74);
}
.pro .perk.dim { opacity: .88; }
footer a { color: var(--accent-light); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media(max-width:700px){
  .step{grid-template-columns:40px 1fr}
  .hero h1{font-size:50px}
  #phero{padding:24px !important;gap:18px !important}
  #phero>div{grid-template-columns:1fr !important;gap:22px !important}
  #phero .visual{min-height:112px !important}
  #phero .rail{display:none !important}
  .pp-rich-content{grid-template-columns:1fr !important;gap:18px !important}
  .phero.rich>div{padding:22px !important}
  .pp-rich-copy,.pp-rich-visual{min-width:0;width:100%}
}