/* Mentat Ledger — shared brand tokens and shared components.
 *
 * Loaded by index.html, compass.html and horizon.html BEFORE their own
 * <style> block, so page-specific rules still win.
 *
 * Everything in here is shared on purpose. If a rule only applies to one
 * page, it belongs in that page, not here. */

:root{
  /* Editorial brand layer — hero and narrative sections */
  --cream:#F8F5F0;
  --offwhite:#FDFBF8;
  --sand:#EDE8E0;
  --charcoal:#1A1914;
  --mid:#5C5850;
  --warm:#91877C;
  --bronze:#7D6B52;
  --safe:#3E7D5A;
  --amber:#9B7A2E;
  --line:rgba(26,25,20,.12);
  --line-light:rgba(255,255,255,.13);
  --serif:"Iowan Old Style","Baskerville","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Avenir Next","Segoe UI",Arial,sans-serif;
  --shadow:0 32px 90px rgba(26,25,20,.15),0 8px 24px rgba(26,25,20,.08);

  /* Application layer — product and technical sections */
  --software-bg:#F3F5F6;
  --software-paper:#FFFFFF;
  --software-line:#DCE1E5;
  --software-muted:#667884;
  --software-shadow:0 12px 36px rgba(36,43,48,.075);
}

/* ------------------------------------------------------------------ */
/* Product tour                                                        */
/*                                                                     */
/* The frame never crops a screenshot. Product screenshots have very    */
/* different shapes - a full decision page is 1500x1975, a scenario     */
/* comparison is 1500x1062 - so a fixed frame with object-fit:cover     */
/* hid up to 41% of the image. The image keeps its own height and the   */
/* frame scrolls instead, with a click to open it full size.            */
/* ------------------------------------------------------------------ */

.tour-grid{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:5vw;align-items:start}
.tour-copy{position:sticky;top:118px}
.tour-list{margin-top:2.3rem;border-top:1px solid var(--software-line)}
.tour-step{width:100%;text-align:left;padding:1.05rem 0;border-bottom:1px solid var(--software-line);
  display:grid;grid-template-columns:24px 1fr;gap:.8rem;opacity:.52;transition:opacity .25s ease;
  background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;font:inherit;color:inherit}
.tour-step.active{opacity:1}
.tour-no{font-family:var(--serif);color:var(--bronze)}
.tour-step b{display:block;font-size:.83rem}
/* Deliberately broad, and kept broad. It covers the wrapper span, the step
   number, the subtitle and the progress bar, and the rendering of all four
   depends on it - including display:block on the progress bar, without
   which its animating child paints as a grey block over the next step.
   `.tour-sub` below only names the subtitle; it does not restyle it. */
.tour-step span{display:block;font-size:.74rem;color:var(--mid);margin-top:.18rem;line-height:1.5}
.tour-step .tour-sub{display:block}
.tour-progress{height:2px;background:#E3E6E9;grid-column:2;margin-top:.55rem;overflow:hidden}
.tour-progress i{display:block;height:100%;width:0;background:var(--software-muted)}
.tour-step.active .tour-progress i.running{animation:tourProgress var(--tour-ms,6000ms) linear forwards}
@keyframes tourProgress{from{width:0}to{width:100%}}

.tour-controls{display:flex;align-items:center;gap:1rem;margin-top:1.2rem;flex-wrap:wrap}
.tour-controls button{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:0;cursor:pointer;color:inherit;padding:0}
.tour-controls span{font-size:.68rem;color:var(--warm)}

.tour-stage{background:var(--charcoal);padding:12px;border-radius:12px;box-shadow:var(--shadow);position:relative}
.browser-bar{height:40px;background:#25231E;display:flex;align-items:center;gap:.75rem;padding:0 1rem;
  color:rgba(255,255,255,.58);font-size:.57rem;letter-spacing:.1em;text-transform:uppercase}
.dots{display:flex;gap:6px}
.dots i{width:8px;height:8px;border-radius:50%;background:#806E61}
.dots i:nth-child(2){background:#9D895A}
.dots i:nth-child(3){background:#5E886D}
.browser-bar .version{margin-left:auto;color:rgba(255,255,255,.35)}

/* position:relative only, to anchor the scroll hint. Everything else about
   this frame is exactly as it was. */
.tour-screen{height:min(76vh,760px);overflow:auto;background:#EEF1F3;cursor:zoom-in;position:relative}
.tour-screen img{width:100%;height:auto;display:block;transition:opacity .25s ease}
.tour-scroll-hint{position:absolute;right:14px;bottom:12px;background:rgba(26,25,20,.72);color:#fff;
  font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;padding:.4rem .6rem;border-radius:3px;
  pointer-events:none;opacity:0;transition:opacity .3s ease}
.tour-screen.is-scrollable .tour-scroll-hint{opacity:1}
.tour-screen.is-scrollable:hover .tour-scroll-hint,.tour-screen.at-end .tour-scroll-hint{opacity:0}

.tour-caption{background:var(--offwhite);border:1px solid var(--line);border-top:0;padding:1.35rem 1.45rem;
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}
.tour-caption b{font-family:var(--serif);font-size:1.35rem;font-weight:400}
.tour-caption p{font-size:.76rem;color:var(--mid);margin-top:.2rem;max-width:600px}
.sample-pill{font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--warm);
  border:1px solid var(--line);padding:.45rem .6rem;white-space:nowrap}

/* Full-size image overlay */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(20,19,16,.88);display:none;
  align-items:flex-start;justify-content:center;padding:3.5rem 1rem 1rem;backdrop-filter:blur(8px);overflow:auto}
.lightbox.open{display:flex}
.lightbox img{max-width:94vw;box-shadow:var(--shadow);height:auto}
.lightbox .modal-close{position:fixed;color:#fff;right:2rem;top:1.2rem;font-size:2rem;background:none;
  border:0;cursor:pointer;line-height:1;z-index:301}

@media(max-width:1050px){
  .tour-grid{grid-template-columns:1fr}
  .tour-copy{position:static}
  .tour-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--software-line);
    border:1px solid var(--software-line);margin-top:1.6rem}
  .tour-step{background:var(--cream);border:0;padding:1rem}
  .tour-progress{display:none}
}
@media(max-width:760px){
  .tour-list{grid-template-columns:1fr 1fr}
  .tour-screen{height:435px}
  .tour-caption{grid-template-columns:1fr}
  .browser-bar{padding:0 .65rem;gap:.45rem}
  .browser-bar .example-label{display:none}
  .sample-pill{justify-self:start}
}
@media(max-width:480px){
  .tour-list{grid-template-columns:1fr}
  .tour-screen{height:390px}
}
@media(prefers-reduced-motion:reduce){
  .tour-step.active .tour-progress i.running{animation:none!important}
  .tour-screen img{transition:none}
}

/* ------------------------------------------------------------------ */
/* Purchase card                                                       */
/*                                                                     */
/* Shared so both products present the offer the same way. Horizon      */
/* previously had a single paragraph and a button where Compass had a   */
/* full card, which made the cheaper-looking page the business product. */
/* ------------------------------------------------------------------ */

.pricing{background:var(--charcoal);color:var(--offwhite)}
.pricing .eyebrow{color:#B8A88F}
.pricing h2 em,.pricing .section-title em{color:#C1AF93}
.pricing .section-intro{color:rgba(255,255,255,.6)}
.pricing-grid{display:grid;grid-template-columns:1fr .74fr;gap:6vw;align-items:center}
.price-card{background:var(--software-paper);color:var(--charcoal);padding:2.2rem;border-radius:20px;
  box-shadow:0 20px 70px rgba(0,0,0,.23)}
.price-top{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.price-name{font-family:var(--sans);font-weight:720;letter-spacing:-.025em;font-size:1.45rem}
.price-note{font-size:.68rem;color:var(--warm)}
.launch-pill{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--safe);
  border:1px solid rgba(62,125,90,.35);padding:.38rem .55rem;white-space:nowrap}
.price{font-family:var(--sans);font-weight:720;letter-spacing:-.025em;font-size:4.9rem;line-height:1;margin:2rem 0 .2rem}
.price-list{list-style:none;margin:1.6rem 0;padding:0}
.price-list li{font-size:.76rem;padding:.65rem 0;border-bottom:1px solid var(--line);display:flex;gap:.7rem}
.price-list li::before{content:"\2713";color:var(--safe);font-weight:700}
.price-card .btn{width:100%}
.payment-note{text-align:center;font-size:.62rem;color:var(--warm);margin-top:.75rem}
.pricing-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.12);margin-top:2.5rem}
.pricing-proof div{background:var(--charcoal);padding:1.15rem}
.pricing-proof b{display:block;font-size:.72rem}
.pricing-proof span{display:block;font-size:.67rem;color:rgba(255,255,255,.5);margin-top:.2rem}

/* The other product — the same band on both pages, so neither product
   is a dead end. */
.cross-sell{background:var(--software-bg);border-top:1px solid var(--software-line)}
.cross-row{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cross-copy b{display:block;font-family:var(--sans);font-weight:720;letter-spacing:-.02em;font-size:1.5rem;margin:.35rem 0 .4rem}
.cross-copy p{font-size:.82rem;color:var(--mid);max-width:52ch}
.product-status{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--software-muted)}

@media(max-width:1050px){
  .pricing-grid{grid-template-columns:1fr;gap:3rem}
}
@media(max-width:760px){
  .pricing-proof{grid-template-columns:1fr}
  .price{font-size:4rem}
}