/* ============================================================
   TrueRead — website stylesheet
   Chrome accent: Instrument Cyan (chrome only, never on data)
   Status colors: product/data only
   ============================================================ */
:root{
  --horizon:#1F3A5F; --horizon-deep:#15283F;
  --ink:#0E1B24; --paper:#F4F1EC; --slate:#2A3B47;
  --panel:#EDE8DE; --rule:#C8C2B6; --muted:#6B7680;
  --cyan:#0F5866; --cyan-deep:#0c4753;
  --positive:#3F6E4A; --caution:#B57B1F; --critical:#9B3A2A;
  --sans:"Inter","Söhne","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4","Source Serif Pro","Iowan Old Style",Georgia,serif;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,Menlo,monospace;
  --maxw:1200px; --pad:64px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--slate);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 0; line-height:1.5;
}
.num,table,.kpi .value,.pricing-num,.tabular{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--ink);}
p{margin:0;}
img{max-width:100%;display:block;}
h1,h2,h3,h4,h5{margin:0;color:var(--ink);font-weight:500;letter-spacing:-.01em;line-height:1.05;}
h1{font-size:84px;line-height:.98;letter-spacing:-.025em;}
h2{font-size:56px;line-height:1;letter-spacing:-.02em;}
h3{font-size:32px;line-height:1.1;letter-spacing:-.015em;}
h4{font-size:20px;line-height:1.2;}

.lede{font-family:var(--serif);color:var(--slate);font-size:22px;line-height:1.45;}
.body{font-family:var(--serif);color:var(--slate);font-size:17px;line-height:1.55;}
.smallbody{font-family:var(--serif);color:var(--slate);font-size:15px;line-height:1.55;}
.eyebrow{font-family:var(--sans);color:var(--cyan);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;}
.muted{color:var(--muted);font-family:var(--sans);font-size:13px;letter-spacing:.01em;}
.caption{font-family:var(--sans);color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
.serif-italic{font-family:var(--serif);font-style:italic;color:var(--ink);font-weight:400;letter-spacing:-.015em;}

/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 var(--pad);}
.rule{height:1px;background:var(--rule);width:100%;}
.rule-ink{height:1px;background:var(--ink);width:100%;}
.section{padding:120px 0;}

/* buttons */
.btn-primary{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:14px;font-weight:500;
  padding:12px 22px;border-radius:2px;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  transition:background .15s ease;text-decoration:none;}
.btn-primary:hover{background:var(--horizon);color:var(--paper);}
.btn-primary:active{background:var(--ink);filter:brightness(.7);}
.btn-text{color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;background:transparent;
  border:0;padding:0;position:relative;text-decoration:none;display:inline-flex;align-items:center;gap:8px;}
.btn-text .arw{transition:transform .15s ease;}
.btn-text::after{content:"";position:absolute;left:0;right:22px;bottom:-3px;height:1px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease;}
.btn-text:hover{color:var(--ink);}
.btn-text:hover::after{transform:scaleX(1);}
.btn-text:hover .arw{transform:translateX(3px);}

/* ---- The Reading wordmark lockup ---- */
.reading{display:inline-flex;flex-direction:column;align-items:stretch;color:var(--ink);text-decoration:none;}
.reading .word{font-family:var(--sans);font-weight:600;letter-spacing:-.025em;line-height:1;color:inherit;font-size:var(--wm,21px);}
.reading .needle-rule{position:relative;height:calc(var(--wm,21px)*.42);margin-top:calc(var(--wm,21px)*.22);}
.reading .needle-rule::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule);}
.reading .needle-rule::after{content:"";position:absolute;left:41%;top:0;bottom:0;width:1.5px;background:var(--cyan);}
.on-dark .reading .word{color:var(--paper);}
.on-dark .reading .needle-rule::before{background:rgba(244,241,236,.28);}

/* needle motif */
.needle{position:relative;height:22px;width:100%;}
.needle::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:var(--rule);}
.needle::after{content:"";position:absolute;left:50%;top:2px;width:1.5px;height:18px;background:var(--cyan);transform:translateX(-.75px);}
.needle.left::after{left:16%;} .needle.right::after{left:78%;} .needle.q1::after{left:33%;}

/* ---- NAV ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(244,241,236,.9);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .2s;}
.nav.scrolled{border-bottom-color:var(--rule);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);max-width:var(--maxw);margin:0 auto;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-link{font-family:var(--sans);font-size:14px;color:var(--slate);font-weight:500;cursor:pointer;position:relative;padding:4px 0;transition:color .15s;}
.nav-link:hover{color:var(--ink);}
.nav-link.active{color:var(--ink);}
.nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--cyan);}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;}
.nav-toggle span{width:22px;height:1.5px;background:var(--ink);display:block;transition:transform .2s;}
.mobile-menu{display:none;}

/* ---- FOOTER ---- */
.footer{background:var(--paper);border-top:1px solid var(--rule);}
.footer .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px;padding:64px 0 28px;}
.footer h5{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:18px;}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.footer li a{font-family:var(--sans);font-size:14px;color:var(--slate);transition:color .15s;}
.footer li a:hover{color:var(--ink);}
.footer .tagline{font-family:var(--serif);font-style:italic;color:var(--cyan);font-size:18px;padding:28px 0;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;}
.footer .copy-row{display:flex;justify-content:space-between;padding:22px 0 40px;}
.footer .copy{font-family:var(--sans);font-size:12px;color:var(--muted);}
.monogram{display:inline-flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink);}
.monogram .frame{border:1px solid currentColor;padding:4px 7px;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.04em;line-height:1;}
.monogram .tick{width:1.5px;height:8px;background:var(--cyan);}

/* ---- closing CTA ---- */
.cta-panel{background:var(--horizon);color:var(--paper);padding:90px 80px;display:flex;align-items:center;justify-content:space-between;gap:60px;margin-top:120px;}
.cta-panel h2{color:var(--paper);font-size:52px;max-width:600px;}
.cta-panel .cta-btn{background:var(--cyan);color:var(--paper);font-family:var(--sans);font-size:14px;font-weight:500;padding:14px 26px;border-radius:2px;cursor:pointer;border:0;text-decoration:none;transition:background .15s;white-space:nowrap;}
.cta-panel .cta-btn:hover{background:var(--cyan-deep);color:var(--paper);}
.cta-panel .needle-block{display:flex;flex-direction:column;align-items:center;gap:14px;}
.cta-panel .needle-block .horiz{width:80px;height:1px;background:rgba(244,241,236,.3);}
.cta-panel .needle-block .tick{width:1.5px;height:22px;background:var(--cyan);}

/* ---- KPI ---- */
.kpi{padding:22px 0 20px;border-top:1px solid var(--rule);}
.kpi .label{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.kpi .value{font-family:var(--sans);font-size:30px;font-weight:500;letter-spacing:-.015em;color:var(--ink);font-variant-numeric:tabular-nums;}
.kpi .value .unit{font-size:18px;color:var(--muted);font-weight:400;margin-left:2px;}
.kpi .delta{font-family:var(--sans);font-size:12px;letter-spacing:.02em;color:var(--muted);margin-top:8px;font-variant-numeric:tabular-nums;}
.kpi.critical .label,.kpi.critical .delta{color:var(--critical);}
.kpi.caution .label,.kpi.caution .delta{color:var(--caution);}
.kpi.positive .delta{color:var(--positive);}

/* ---- dashboard mock ---- */
.dash{background:var(--paper);border:1px solid var(--rule);padding:36px;}
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--rule);}
.dash-head .co{font-family:var(--sans);font-size:20px;color:var(--ink);font-weight:500;letter-spacing:-.01em;}
.dash-controls{display:flex;gap:24px;align-items:center;font-family:var(--sans);font-size:12px;color:var(--muted);letter-spacing:.02em;}
.dash-controls .cur{color:var(--ink);}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;}
.chart-strip{margin-top:36px;padding-top:28px;border-top:1px solid var(--rule);}
.chart-legend{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;}
.chart-axis text{font-family:var(--sans);font-size:9px;fill:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.chart-grid line{stroke:var(--rule);stroke-width:.5;}
.chart-caption{margin-top:14px;display:flex;align-items:center;gap:12px;}
.chart-caption .tk{width:1.5px;height:14px;background:var(--cyan);}
.chart-caption .tx{font-family:var(--sans);font-size:12px;color:var(--cyan);letter-spacing:.01em;font-weight:500;}

/* ---- tables ---- */
table.tr-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px;color:var(--ink);}
table.tr-table th,table.tr-table td{text-align:left;padding:14px 0;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;}
table.tr-table th{font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:10px;}
table.tr-table td.r,table.tr-table th.r{text-align:right;}
td.critical{color:var(--critical);} td.caution{color:var(--caution);} td.positive{color:var(--positive);}

/* ---- image placeholder ---- */
.img-placeholder{background:repeating-linear-gradient(135deg,var(--panel) 0,var(--panel) 10px,#e3ddd0 10px,#e3ddd0 20px);
  display:flex;align-items:center;justify-content:center;position:relative;border:1px solid var(--rule);}
.img-placeholder .ph-label{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--paper);padding:6px 10px;letter-spacing:.04em;border:1px solid var(--rule);}

/* ---- pricing ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);}
.tier{padding:56px 48px 48px;background:var(--paper);border-right:1px solid var(--rule);display:flex;flex-direction:column;}
.tier:last-child{border-right:0;}
.tier.center{background:var(--panel);}
.tier h3{font-size:26px;font-weight:500;margin-bottom:6px;}
.tier .band{font-family:var(--sans);font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:40px;font-variant-numeric:tabular-nums;}
.tier .price{font-family:var(--sans);font-size:56px;font-weight:500;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;}
.tier .price-unit{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:10px;}
.tier ul.includes{list-style:none;padding:22px 0 0;margin:36px 0 40px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--rule);flex:1;}
.tier ul.includes li{font-family:var(--serif);font-size:15px;color:var(--slate);display:flex;gap:14px;line-height:1.45;}
.tier ul.includes li::before{content:"";display:block;flex-shrink:0;width:14px;height:1px;background:var(--ink);margin-top:11px;}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;}
.faq-item{border-top:1px solid var(--rule);padding:32px 0;}
.faq-item h3{font-size:19px;font-weight:500;margin-bottom:14px;}

/* ---- forms ---- */
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-family:var(--sans);font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:500;}
.field input,.field select{background:transparent;border:0;border-bottom:1px solid var(--rule);font-family:var(--sans);font-size:18px;color:var(--ink);padding:10px 0 12px;border-radius:0;outline:none;transition:border-color .15s;appearance:none;width:100%;}
.field input:focus,.field select:focus{border-bottom-color:var(--ink);}
.field input::placeholder{color:var(--muted);}
.field.err input,.field.err select{border-bottom-color:var(--critical);}
.field .err-msg{font-family:var(--sans);font-size:12px;color:var(--critical);display:none;}
.field.err .err-msg{display:block;}
.form-success{border:1px solid var(--cyan);padding:40px 44px;background:var(--panel);}

/* ---- customers ---- */
.story{border-top:1px solid var(--rule);padding:80px 0;display:grid;grid-template-columns:320px 1fr;gap:80px;align-items:flex-start;}
.story-meta{display:flex;gap:28px;font-family:var(--sans);font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;flex-wrap:wrap;}
.story-grid{display:grid;grid-template-columns:100px 1fr;gap:28px 32px;border-top:1px solid var(--rule);padding-top:32px;}

/* ---- product surfaces ---- */
.surface{border-top:1px solid var(--rule);padding:100px 0;display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:flex-start;}
.surface>div{min-width:0;}
.surface .surface-copy{position:sticky;top:100px;}
.surface ul.bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;}
.surface ul.bullets li{font-family:var(--sans);font-size:14px;color:var(--ink);display:flex;gap:14px;line-height:1.4;}
.surface ul.bullets li .n{flex-shrink:0;font-family:var(--mono);color:var(--cyan);font-size:11px;padding-top:3px;}
.integrations-row{display:grid;grid-template-columns:180px 1fr;padding:28px 0;gap:40px;border-top:1px solid var(--rule);align-items:center;}
.integrations-row .names{display:flex;flex-wrap:wrap;gap:36px;}
.integrations-row .names span{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--muted);}

/* ---- about ---- */
.about-block{display:grid;grid-template-columns:220px 1fr;gap:80px;border-top:1px solid var(--rule);padding-top:80px;margin-top:80px;}
.about-block:first-of-type{margin-top:0;}
.about-block .col{max-width:680px;display:flex;flex-direction:column;gap:22px;}

/* ---- logos strip ---- */
.logos-strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.logos-strip .inner{padding:52px var(--pad);display:flex;justify-content:space-between;align-items:center;max-width:var(--maxw);margin:0 auto;}
.logos-strip .brand{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--muted);opacity:.7;}

/* =========== RESPONSIVE =========== */
@media(max-width:1080px){
  :root{--pad:40px;}
  h1{font-size:60px;} h2{font-size:44px;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:24px;}
  .surface{grid-template-columns:1fr;gap:40px;}
  .surface .surface-copy{position:static;}
  .footer .cols{grid-template-columns:1fr 1fr 1fr;gap:32px;}
}
@media(max-width:760px){
  :root{--pad:24px;}
  h1{font-size:40px;} h2{font-size:30px;} h3{font-size:24px;}
  .lede{font-size:17px;} .section{padding:60px 0;}
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav.open .mobile-menu{display:flex;flex-direction:column;gap:0;padding:8px var(--pad) 24px;border-top:1px solid var(--rule);}
  .mobile-menu a{font-family:var(--sans);font-size:16px;color:var(--slate);font-weight:500;padding:16px 0;border-bottom:1px solid var(--rule);}
  .mobile-menu .btn-primary{margin-top:20px;justify-content:center;border-bottom:0;}
  .cta-panel{flex-direction:column;align-items:flex-start;gap:32px;padding:52px 24px;}
  .cta-panel h2{font-size:30px;}
  .cta-panel .needle-block{flex-direction:row;}
  .cta-panel .needle-block .horiz{width:1px;height:40px;} .cta-panel .needle-block .tick{width:22px;height:1.5px;}
  .kpi-grid{grid-template-columns:1fr;gap:0;}
  .dash{padding:20px;}
  .dash-head{flex-direction:column;align-items:flex-start;gap:16px;}
  .dash-controls{display:none;}
  .tiers{grid-template-columns:1fr;}
  .tier{border-right:0;border-bottom:1px solid var(--rule);}
  .tier:last-child{border-bottom:0;}
  .faq-grid{grid-template-columns:1fr;}
  .story{grid-template-columns:1fr;gap:32px;}
  .story .img-placeholder{width:100% !important;max-width:320px;}
  .story-grid{grid-template-columns:1fr;gap:6px 0;}
  .story-grid .caption{margin-top:20px;}
  .about-block{grid-template-columns:1fr;gap:24px;}
  .footer .cols{grid-template-columns:1fr 1fr;gap:28px;}
  .logos-strip .inner{flex-wrap:wrap;gap:20px 32px;justify-content:flex-start;}
  .demo-grid{grid-template-columns:1fr !important;gap:48px !important;}
  .chart-caption{padding-left:0 !important;}

  /* --- beat inline styles from the page markup --- */
  section.wrap,section > .wrap,section > .wrap-narrow{padding-left:24px !important;padding-right:24px !important;}
  section[style]{padding-top:64px !important;padding-bottom:64px !important;}
  section[style]{padding-left:0 !important;padding-right:0 !important;}
  section.wrap[style]{padding-left:24px !important;padding-right:24px !important;}
  h1[style]{font-size:40px !important;}
  h2[style]{font-size:30px !important;}
  h3[style]{font-size:22px !important;}
  /* problem trio + any inline 3-up grid collapses */
  [style*="repeat(3,1fr)"]{grid-template-columns:1fr !important;gap:36px !important;}
  [style*="repeat(3, 1fr)"]{grid-template-columns:1fr !important;gap:36px !important;}
  /* wide inline 2-col grids (faq header, founder) collapse */
  [style*="320px 1fr"],[style*="420px 1fr"]{grid-template-columns:1fr !important;gap:32px !important;}
  /* wide data tables scroll instead of squishing */
  .surface>div,.surface>div>div{min-width:0;}
  .surface > div > div,.dash{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table.tr-table{min-width:420px;}
  .dash table.tr-table,.dash .kpi-grid{min-width:0;}
  /* integrations header stacks */
  .integrations-row{grid-template-columns:1fr !important;gap:12px !important;}
  /* keep the closing headline from colliding */
  .cta-panel h2{font-size:26px !important;line-height:1.15;}
}
@media(max-width:400px){
  h1[style],h1{font-size:34px !important;}
  h2[style],h2{font-size:26px !important;}
  .lede{font-size:16px;}
  .tier{padding:40px 28px 36px;}
  .dash{padding:16px;}
  .kpi .value{font-size:26px;}
}

/* --- product-aligned additions --- */
.report-row{display:grid;grid-template-columns:64px 260px 1fr 190px;gap:32px;padding:26px 0;border-bottom:1px solid var(--rule);align-items:baseline;}
.report-row h4{font-size:18px;margin:0;}
.tiers.four{grid-template-columns:repeat(4,1fr);}
.tiers.four .tier{padding:44px 30px 40px;}
.tiers.four .tier .price{font-size:46px;}
@media(max-width:1080px){
  .tiers.four{grid-template-columns:repeat(2,1fr);}
  .tiers.four .tier{border-bottom:1px solid var(--rule);}
  .report-row{grid-template-columns:64px 1fr;gap:8px 24px;}
  .report-row .caption{grid-column:2;}
}
@media(max-width:760px){
  .tiers.four{grid-template-columns:1fr !important;}
  .report-row{grid-template-columns:1fr !important;gap:8px !important;}
  .report-row .caption{grid-column:auto !important;}
}