/* ontiqo.com — one stylesheet for every page.
 *
 * The app's colour tokens are carried verbatim (docs/DESIGN_GUIDE.md §2) so the site
 * and the program never disagree about what gold is. Beyond the tokens, this file is
 * free to be a marketing site: the app's "gold means activity" discipline is an app
 * rule, and the owner has said the website may break out of it. What stays absolute:
 * the lockup, Poppins, both themes hand-tuned, reduced motion honoured, and no claim
 * in any visual that the product would not make in words.
 *
 * App-window mockups (.frame) are ALWAYS dark, whatever the site theme. The screens
 * are synthesised, not screenshots, so no real collection ever leaks onto the page —
 * and a charcoal screen on a light page is the brand's own contrast.
 *
 * CSP note: every page but /buy is served with style-src 'self', so there are no
 * inline styles anywhere. Anything a page needs lives here, as a class.
 */

@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../webfonts/poppins-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../webfonts/poppins-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../webfonts/poppins-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../webfonts/poppins-latin-700-normal.woff2') format('woff2')}

/* ------------------------------------------------------------------ tokens */
/* One deliberate divergence from the app's tokens: --ink-3 is lifted (dark #767C86 ->
   #858B95, light #83888F -> #6A6F77) so the smallest site text clears WCAG AA 4.5:1
   on both bg and panel (measured 3.8-4.3 at the app values; the app uses that tier
   at larger sizes and beside icons, the site uses it for 12-13px fineprint). */
:root{
  --bg:#141518; --bg-raise:#1B1D21; --panel:#1F2126; --panel-2:#24262C;
  --line:#2E3138; --line-soft:#282B31;
  --ink:#EDEEF0; --ink-2:#A9AEB6; --ink-3:#858B95;
  --gold:#FFC72C; --gold-deep:#E8B000; --accent-text:#FFC72C; --track:#2A2D33;
  --ok:#3FB950; --bad:#F85149; --info:#6AA8FF;
  --ontiqo-brand:var(--gold); --ontiqo-text:var(--ink);
  --k-document:#9C8CE0; --k-image:#46BFC0; --k-media:#DE7FB4;
  --k-web:#57B8DE; --k-archive:#C09062; --k-executable:#8A93A8; --k-other:var(--ink-3);
  --shadow-frame:0 30px 80px rgba(0,0,0,.5), 0 4px 18px rgba(0,0,0,.35);
  --shadow-card:0 10px 34px rgba(0,0,0,.28);
  --hero-glow:radial-gradient(52% 44% at 50% 0%, rgba(255,199,44,.09), transparent 70%);
}
:root[data-theme="light"]{
  --bg:#F3F4F6; --bg-raise:#FFFFFF; --panel:#FFFFFF; --panel-2:#F7F8FA;
  --line:#E2E4E9; --line-soft:#EBEDF1;
  --ink:#1B1C1F; --ink-2:#565B63; --ink-3:#6A6F77;
  --gold:#F5BB00; --gold-deep:#D9A600; --accent-text:#8A6D00; --track:#E7E9ED;
  --ok:#1F8A3B; --bad:#C93C34; --info:#3B6FD4;
  --k-document:#6D5BC7; --k-image:#12868C; --k-media:#B33C86;
  --k-web:#1C7FA8; --k-archive:#8A5F2E; --k-executable:#5A6478;
  --shadow-frame:0 26px 64px rgba(23,26,31,.18), 0 4px 16px rgba(23,26,31,.10);
  --shadow-card:0 10px 30px rgba(23,26,31,.08);
  --hero-glow:radial-gradient(52% 44% at 50% 0%, rgba(217,166,0,.10), transparent 70%);
}
/* The synthesised app screens keep the program's dark palette in BOTH site themes. */
.frame{
  --f-bg:#141518; --f-raise:#1B1D21; --f-panel:#1F2126; --f-panel2:#24262C;
  --f-line:#2E3138; --f-line-soft:#282B31; --f-track:#2A2D33;
  --f-ink:#EDEEF0; --f-ink2:#A9AEB6; --f-ink3:#767C86;
  --f-gold:#FFC72C; --f-ok:#3FB950; --f-bad:#F85149; --f-info:#6AA8FF;
  --fk-document:#9C8CE0; --fk-image:#46BFC0; --fk-media:#DE7FB4;
  --fk-web:#57B8DE; --fk-archive:#C09062; --fk-executable:#8A93A8; --fk-other:#767C86;
}

/* ------------------------------------------------------------------- base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400; line-height:1.65; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg{display:block; max-width:100%}
a{color:var(--accent-text); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
b,strong{font-weight:600; color:var(--ink)}
::selection{background:var(--gold); color:#141518}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 22px}
.wrap.narrow{max-width:820px}

/* Pre-launch strip, above the header on every page. Calm, not a klaxon — the site's
   own register. REMOVE THIS BLOCK AND ITS MARKUP AT RELEASE (see docs/SITE.md). */
.prelaunch{background:var(--bg-raise); border-bottom:1px solid var(--line-soft);
           font-size:12.5px; color:var(--ink-2)}
.prelaunch .wrap{display:flex; gap:6px 14px; flex-wrap:wrap; align-items:center;
                 padding-top:9px; padding-bottom:9px}
.prelaunch b{color:var(--ink); font-weight:600}
.prelaunch a{white-space:nowrap}
.top{top:0}

/* ----------------------------------------------------------------- header */
.top{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.topin{display:flex; align-items:center; gap:26px; height:64px}
.brand{display:inline-flex; align-items:center; flex:none}
.brand svg{height:30px; width:auto}
.nav{display:flex; align-items:center; gap:24px; margin-left:8px}
.nav a{color:var(--ink-2); font-size:13.5px; font-weight:500}
.nav a:hover{color:var(--ink); text-decoration:none}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a.btn{color:#141518}
.nav a.btn:hover{color:#141518}
.topright{margin-left:auto; display:flex; align-items:center; gap:12px}

.iconbtn{
  background:none; border:1px solid var(--line); color:var(--ink-2);
  width:36px; height:36px; border-radius:9px; cursor:pointer; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition:border-color .15s, color .15s; padding:0; font-family:inherit;
}
.iconbtn:hover{border-color:var(--ink-3); color:var(--ink)}

/* Mobile menu: the checkbox is the state so the menu works before site.js runs. */
.navtoggle{display:none}
#navstate{position:absolute; opacity:0; pointer-events:none}
@media (max-width:840px){
  .topin{gap:14px}
  .navtoggle{display:inline-flex}
  .nav{
    display:none; position:absolute; top:64px; left:0; right:0;
    background:var(--bg-raise); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 22px 14px;
  }
  .nav a{padding:11px 0; font-size:15px; width:100%}
  #navstate:checked ~ .nav{display:flex}
  .nav .btn{margin-top:8px}
}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:999px; border:1.5px solid var(--gold);
  background:var(--gold); color:#141518; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:600; text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover,.btn:focus-visible{
  text-decoration:none; transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(255,199,44,.25); background:var(--gold);
}
:root[data-theme="light"] .btn:hover{box-shadow:0 8px 22px rgba(217,166,0,.28)}
.btn.ghost{background:none; color:var(--accent-text)}
.btn.ghost:hover{background:var(--gold); color:#141518}
.btn.quiet{background:none; border-color:var(--line); color:var(--ink-2)}
.btn.quiet:hover{background:var(--panel-2); color:var(--ink); box-shadow:none}
.btn.sm{padding:9px 18px; font-size:13px}
.btnrow{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.btnrow.roomy{margin-top:40px}

/* --------------------------------------------------------------- sections */
.section{padding:96px 0}
.section.tight{padding:64px 0}
.kicker{
  font-size:12px; font-weight:600; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px;
}
.kicker.gold{color:var(--accent-text)}
h1{font-size:clamp(34px,6vw,60px); line-height:1.07; font-weight:600;
   letter-spacing:-0.02em; margin:0 0 22px}
h2{font-size:clamp(26px,3.4vw,38px); line-height:1.15; font-weight:600;
   letter-spacing:-0.015em; margin:0 0 16px}
h3{font-size:18px; font-weight:600; margin:0 0 8px}
.lede{font-size:clamp(16px,2vw,18.5px); color:var(--ink-2); max-width:62ch; margin:0 0 30px}
.center{text-align:center}
.center .lede{margin-left:auto; margin-right:auto}
/* text-align cannot centre flex rows: any button row or icon row inside a centered
   section centres as a flex container, or it silently packs left (owner caught the
   final CTA doing exactly that). */
.center .btnrow,.btnrow.center,.center .trustline{justify-content:center}
p{margin:0 0 16px; color:var(--ink-2); font-size:15.5px}
p.small,.small{font-size:13px; color:var(--ink-3)}
.divider{border:none; border-top:1px solid var(--line-soft); margin:0}

/* ------------------------------------------------------------------- hero */
.hero{position:relative; padding:92px 0 70px; overflow:hidden}
.hero::before{content:''; position:absolute; inset:0; background:var(--hero-glow);
              pointer-events:none}
.hero .wrap{position:relative}
.hero h1 .accent{color:var(--accent-text); white-space:nowrap}
.trustline{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:22px;
           font-size:13px; color:var(--ink-3); align-items:center}
.trustline span{display:inline-flex; align-items:center; gap:8px}
.trustline .hx{width:12px; height:13px; flex:none}

/* Faint hex lattice behind the hero frame — decoration, kept near-invisible. */
.heroframe{position:relative; margin-top:54px}
.heroframe::before{
  content:''; position:absolute; inset:-70px -40px auto; height:120%; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16Z' fill='none' stroke='%23808690' stroke-opacity='.13' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(60% 70% at 50% 30%, #000 30%, transparent 75%);
  mask-image:radial-gradient(60% 70% at 50% 30%, #000 30%, transparent 75%);
  pointer-events:none;
}

/* --------------------------------------------------- the app-window mockup */
.frame{
  position:relative; z-index:1;
  background:var(--f-bg); border:1px solid var(--f-line); border-radius:14px;
  box-shadow:var(--shadow-frame); overflow:hidden; color:var(--f-ink);
  font-size:13px; line-height:1.5;
}
.fbar{
  display:flex; align-items:center; gap:18px; height:46px; padding:0 16px;
  border-bottom:1px solid var(--f-line); background:var(--f-bg);
}
.fbar .fmark{height:22px; width:auto; flex:none}
.ftabs{display:flex; gap:16px; font-size:12px; color:var(--f-ink3); font-weight:500}
.ftabs .on{color:var(--f-ink)}
.fbar .fright{margin-left:auto; display:flex; align-items:center; gap:10px}
.fpausechip{border:1px solid var(--f-gold); color:var(--f-gold); border-radius:999px;
            padding:3px 12px; font-size:11px; font-weight:600}
.fdot{width:26px; height:26px; border:1px solid var(--f-line); border-radius:7px;
      color:var(--f-ink3); display:inline-flex; align-items:center; justify-content:center;
      font-size:11px}
.fbody{padding:18px}
@media (max-width:640px){ .ftabs span:nth-child(n+4){display:none} }

/* mode strip: the Now ⇄ Organised switch */
.fmode{display:flex; align-items:center; justify-content:center; gap:14px;
       padding:4px 0 16px; flex-wrap:wrap}
.fmodenote{font-size:11px; color:var(--f-ink3)}
.fswitch{position:relative; display:inline-flex; border:1px solid var(--f-line);
         border-radius:999px; background:var(--f-raise); padding:3px}
.fswitch span{position:relative; z-index:1; padding:5px 16px; font-size:11.5px;
              font-weight:600; color:var(--f-ink3); transition:color .35s ease}
.fswitch::before{
  content:''; position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px);
  border-radius:999px; background:var(--f-panel2); border:1px solid var(--f-line);
  transition:transform .45s cubic-bezier(.3,.8,.3,1);
}
.frame[data-state="before"] .fswitch span:first-child{color:var(--f-ink)}
.frame[data-state="after"] .fswitch::before{transform:translateX(100%);
  background:color-mix(in srgb, var(--f-gold) 16%, var(--f-panel2));
  border-color:color-mix(in srgb, var(--f-gold) 45%, var(--f-line))}
.frame[data-state="after"] .fswitch span:last-child{color:var(--f-gold)}

/* two-pane files scene. The narrow-screen overrides carry .fcols specificity because
   the base .fcards/.ftree rules are declared later in the file and would win a tie. */
.fcols{display:grid; grid-template-columns:280px 1fr; gap:16px; min-height:330px}
.fcols > *{min-width:0}
@media (max-width:760px){
  .fcols{grid-template-columns:1fr; min-height:0}
  .fcols .fcards{display:none}
  .fcols .ftree li{white-space:normal}
}
.ftree{background:var(--f-panel); border:1px solid var(--f-line-soft);
       border-radius:10px; padding:10px 8px; position:relative; overflow:hidden}
.ftree ul{list-style:none; margin:0; padding:0}
.ftree li{display:flex; align-items:center; gap:8px; padding:5.5px 8px;
          border-radius:7px; font-size:12.5px; color:var(--f-ink2); white-space:nowrap}
.ftree li.sel{background:var(--f-panel2); color:var(--f-ink)}
.ftree li .n{margin-left:auto; color:var(--f-ink3); font-size:11px;
             font-variant-numeric:tabular-nums}
.ftree li.sub{padding-left:26px}
.ftree li.sub2{padding-left:44px}
.ffold{width:14px; height:12px; flex:none; stroke:var(--f-ink3); fill:none;
       stroke-width:1.5}
li.sel .ffold{stroke:var(--f-gold)}
.fshelves{border-top:1px solid var(--f-line-soft); margin-top:8px; padding-top:8px}
.fshelves li{opacity:.66}
.fshelves .ffold{stroke-dasharray:3 2.4}
.ftag{font-size:9.5px; border:1px solid var(--f-line); color:var(--f-ink3);
      border-radius:999px; padding:1px 7px; margin-left:auto}
.fshelves li .ftag{margin-left:auto}
.fshelves li .n{margin-left:6px}

/* the two tree states crossfade inside one panel; the shelves belong to the
   organised proposal, so the mess state fades them out with it */
.ftree .state{transition:opacity .5s ease}
.ftree .state.before{position:absolute; inset:10px 8px}
.frame[data-state="after"] .state.before{opacity:0; pointer-events:none}
.frame[data-state="before"] .state.after{opacity:0; pointer-events:none}
.fshelves{transition:opacity .5s ease}
.frame[data-state="before"] .fshelves{opacity:0}

/* file cards column */
.fcards{display:flex; flex-direction:column; gap:10px}
.fgridhead{font-size:11px; color:var(--f-ink3); letter-spacing:1.6px;
           text-transform:uppercase; font-weight:600; padding:2px 2px 0}
.fcard{display:flex; gap:12px; align-items:flex-start; background:var(--f-panel);
       border:1px solid var(--f-line-soft); border-radius:12px; padding:12px 14px}
.fcard > div{min-width:0}
.fcard .hx{width:30px; height:31px; flex:none; margin-top:2px}
.fcard .fname{font-size:13px; font-weight:500; color:var(--f-ink);
              margin:0 0 2px; overflow-wrap:anywhere}
.fcard .fdesc{font-size:12px; color:var(--f-ink2); margin:0}
.fcard .fwhere{font-size:11px; color:var(--f-ink3); margin:3px 0 0;
               font-variant-numeric:tabular-nums}

/* kind hexagons — the app's own shape and glyphs (filecards.js), re-inlined */
.hx{display:block}
.hx .shape{fill:color-mix(in srgb, var(--kc) 13%, var(--f-panel2, var(--panel-2)));
           stroke:color-mix(in srgb, var(--kc) 55%, var(--f-line, var(--line)));
           stroke-width:2}
.hx .glyph{stroke:var(--kc); fill:none; stroke-width:1.6;
           stroke-linecap:round; stroke-linejoin:round}
.hx.doc{--kc:var(--fk-document,var(--k-document))}
.hx.img{--kc:var(--fk-image,var(--k-image))}
.hx.med{--kc:var(--fk-media,var(--k-media))}
.hx.web{--kc:var(--fk-web,var(--k-web))}
.hx.arc{--kc:var(--fk-archive,var(--k-archive))}
.hx.exe{--kc:var(--fk-executable,var(--k-executable))}
.hx.oth{--kc:var(--fk-other,var(--k-other))}
.hx.gold{--kc:var(--gold)}

/* processing scene */
.fproc{padding:6px 4px 2px}
.fprockick{font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
           color:var(--f-ink3); font-weight:600; margin:0 0 6px}
.fprocnum{font-size:46px; font-weight:600; color:var(--f-ink); line-height:1;
          font-variant-numeric:tabular-nums; margin:0 0 6px}
.fprocnum small{font-size:20px; color:var(--f-ink2); font-weight:500}
.fprocline{font-size:12px; color:var(--f-ink2); margin:0 0 12px}
.fprocline b{color:var(--f-ink); font-variant-numeric:tabular-nums}
.fbar-meter{height:8px; border-radius:5px; background:var(--f-track); overflow:hidden;
            margin:0 0 8px}
.fbar-meter i{display:block; height:100%; border-radius:5px; background:var(--f-gold)}
.ffine{font-size:11px; color:var(--f-ink3); margin:0}
.fstages{display:flex; gap:10px; margin:18px 0 4px; flex-wrap:wrap}
.fstage{flex:1; min-width:86px; text-align:center; padding:10px 6px 8px;
        border:1px solid var(--f-line-soft); border-radius:10px; background:var(--f-panel)}
.fstage .hxs{width:26px; height:27px; margin:0 auto 6px}
.fstage .hxs .shape{fill:none; stroke:var(--f-ink3); stroke-width:2.2}
.fstage.live .hxs .shape{stroke:var(--f-gold);
        filter:drop-shadow(0 0 6px rgba(255,199,44,.55))}
.fstage .sl{font-size:10.5px; color:var(--f-ink3); font-weight:500}
.fstage.live .sl{color:var(--f-ink)}
.fstage .sn{font-size:13px; color:var(--f-ink); font-weight:600;
            font-variant-numeric:tabular-nums}
.fstatcards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
@media (max-width:640px){ .fstatcards{grid-template-columns:1fr} }
.fstat{background:var(--f-panel); border:1px solid var(--f-line-soft);
       border-radius:12px; padding:12px 14px}
.fstat .lab{display:flex; align-items:center; gap:7px; font-size:11.5px;
            color:var(--f-ink2); font-weight:500; margin-bottom:6px}
.fstat .lab .dot{width:6px; height:6px; border-radius:50%; background:var(--f-gold)}
.fstat .cnt{font-size:24px; font-weight:600; color:var(--f-ink); line-height:1.1;
            font-variant-numeric:tabular-nums}
.fstat .cnt small{font-size:12px; color:var(--f-ink3); font-weight:400}
.fstat .meter{height:5px; border-radius:3px; background:var(--f-track); margin:8px 0 6px}
.fstat .meter i{display:block; height:100%; border-radius:3px; background:var(--f-gold)}
.fstat .foot{font-size:10.5px; color:var(--f-ink3);
             font-variant-numeric:tabular-nums}
.fstat.attn{border-color:color-mix(in srgb, var(--f-bad) 45%, var(--f-line))}
.fstat.attn .cnt{color:var(--f-bad)}
.fstat.ok .cnt{color:var(--f-ok); font-size:15px; font-weight:500; padding:6px 0}
.w15{width:15%}.w32{width:32%}.w41{width:41%}.w55{width:55%}
.w68{width:68%}.w80{width:80%}.w93{width:93%}.w100{width:100%}

/* search scene */
.fsearch{display:flex; flex-direction:column; gap:10px}
.fquery{display:flex; align-items:center; gap:10px; background:var(--f-raise);
        border:1px solid var(--f-line); border-radius:10px; padding:11px 14px;
        font-size:13.5px; color:var(--f-ink)}
.fquery span{min-width:0; overflow-wrap:anywhere}
.fquery svg{width:15px; height:15px; stroke:var(--f-ink3); fill:none; stroke-width:2;
            flex:none}
.fquery .cursor{display:inline-block; width:1.5px; height:16px; background:var(--f-gold);
                margin-left:1px; animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.fresult{display:flex; gap:12px; align-items:flex-start; background:var(--f-panel);
         border:1px solid var(--f-line-soft); border-radius:12px; padding:11px 14px}
.fresult > div{min-width:0}
.fresult .hx{width:26px; height:27px; flex:none; margin-top:1px}
.fresult .rn{font-size:12.5px; font-weight:500; color:var(--f-ink); margin:0;
             overflow-wrap:anywhere}
.fresult .rd{font-size:11.5px; color:var(--f-ink2); margin:1px 0 0}
.fresult .rd b{color:var(--f-ink); font-weight:500}
.fresult .rt{margin-left:auto; flex:none; font-size:10.5px; color:var(--f-ink3);
             border:1px solid var(--f-line); border-radius:999px; padding:2px 9px;
             font-variant-numeric:tabular-nums; white-space:nowrap}
.fresult.top{border-color:color-mix(in srgb, var(--f-gold) 35%, var(--f-line))}

/* views scene bits */
.flenses{display:flex; gap:8px; flex-wrap:wrap; padding:0 0 12px}
.flens{font-size:11px; color:var(--f-ink2); border:1px solid var(--f-line);
       border-radius:999px; padding:4px 12px}
.flens.on{color:var(--f-info); border-color:color-mix(in srgb, var(--f-info) 55%, var(--f-line));
          background:color-mix(in srgb, var(--f-info) 12%, transparent)}
.fviewnote{font-size:11px; color:var(--f-ink3); padding:0 0 10px}
.fviewnote b{color:var(--f-info); font-weight:600}
.frame.views{box-shadow:inset 3px 0 0 var(--f-info), var(--shadow-frame)}
.fgroup{display:inline-flex; align-items:center; gap:8px; border:1.5px dashed
        color-mix(in srgb, var(--f-info) 50%, var(--f-line)); color:var(--f-ink2);
        border-radius:11px; padding:9px 14px; font-size:12px; margin:0 8px 8px 0}
.fgroup .n{color:var(--f-ink3); font-size:10.5px; font-variant-numeric:tabular-nums}

/* commit sheet scene */
.fsheet{max-width:430px; margin:0 auto; background:var(--f-raise);
        border:1px solid var(--f-line); border-radius:14px; padding:20px 22px}
.fsheet h4{margin:0 0 4px; font-size:15px; color:var(--f-ink); font-weight:600}
.fsheet .blast{font-size:12.5px; color:var(--f-ink2); margin:0 0 12px;
               font-variant-numeric:tabular-nums}
.fsheet ul{list-style:none; margin:0 0 14px; padding:10px 12px;
           border:1px dashed var(--f-line); border-radius:9px}
.fsheet li{display:flex; justify-content:space-between; font-size:11.5px;
           color:var(--f-ink3); padding:2px 0; font-variant-numeric:tabular-nums}
.fsheet .fbtns{display:flex; gap:10px; margin:0 0 10px}
.fsheet .fb{flex:1; text-align:center; border-radius:999px; padding:9px 0;
            font-size:12.5px; font-weight:600}
.fsheet .fb.primary{background:var(--f-gold); color:#141518}
.fsheet .fb.outline{border:1.5px solid var(--f-line); color:var(--f-ink2)}
.fsheet .fine{font-size:11px; color:var(--f-ink3); text-align:center; margin:0}
.fsheet .fine b{color:var(--f-ok); font-weight:500}

/* chat / ask scene */
.fchat{display:flex; flex-direction:column; gap:10px; max-width:560px; margin:0 auto}
.fq{align-self:flex-end; background:var(--f-panel2); border:1px solid var(--f-line);
    color:var(--f-ink); border-radius:14px 14px 4px 14px; padding:9px 14px;
    font-size:12.5px; max-width:85%}
.fa{align-self:flex-start; background:var(--f-panel); border:1px solid var(--f-line-soft);
    color:var(--f-ink2); border-radius:14px 14px 14px 4px; padding:11px 14px;
    font-size:12.5px; max-width:92%}
.fa .cite{display:flex; gap:8px; align-items:center; margin-top:8px; color:var(--f-ink2);
          font-size:11.5px}
.fa .cite .hx{width:18px; height:19px; flex:none}
.fa .note{font-size:10.5px; color:var(--f-ink3); margin-top:8px}

/* window chrome under-glow for standalone frames */
.framewrap{position:relative}
.framecap{font-size:12.5px; color:var(--ink-3); text-align:center; margin:14px 0 0}

/* ---------------------------------------------------------------- cards etc */
.grid{display:grid; gap:18px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){ .grid.c4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:860px){ .grid.c3{grid-template-columns:1fr} .grid.c2{grid-template-columns:1fr} }
@media (max-width:560px){ .grid.c4{grid-template-columns:1fr} }

.card{background:var(--panel); border:1px solid var(--line-soft); border-radius:16px;
      padding:26px 26px 24px}
.card .hx{width:34px; height:35px; margin-bottom:14px}
.card .hx .shape{fill:color-mix(in srgb, var(--kc) 13%, var(--panel-2));
                 stroke:color-mix(in srgb, var(--kc) 55%, var(--line))}
.card h3{font-size:16.5px}
.card p{font-size:14px; margin-bottom:0}
.card.lift{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card.lift:hover{transform:translateY(-3px); box-shadow:var(--shadow-card);
                 border-color:var(--line)}
a.card{color:var(--ink-2)}
a.card:hover{text-decoration:none}
a.card h3{color:var(--ink)}
a.card:hover h3{color:var(--accent-text)}

.installnote{margin:16px 0 0; padding-top:14px; border-top:1px dashed var(--line);
             max-width:70ch}

/* Pre-launch email capture. REMOVED AT RELEASE with the banner (docs/SITE.md). */
.notify{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:4px 0 0}
.notify input{flex:1 1 260px; min-width:0; border-radius:999px; padding:12px 20px}
.notify .btn{flex:none}
.center .notify{justify-content:center}
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
                 overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* comparison by CATEGORY, never by brand — three kinds of tool, the last one ours */
.cmp{display:grid; gap:14px; margin:8px 0 0}
.cmprow{display:grid; grid-template-columns:230px 1fr; gap:22px; align-items:start;
        padding:22px 0; border-top:1px solid var(--line-soft)}
.cmprow:last-child{border-bottom:1px solid var(--line-soft)}
@media (max-width:700px){ .cmprow{grid-template-columns:1fr; gap:6px; padding:18px 0} }
.cmprow h3{margin:0 0 4px; font-size:16.5px}
.cmprow .kind{font-size:12px; color:var(--ink-3); margin:0}
.cmprow p{margin:0 0 10px; font-size:14.5px}
.cmprow p:last-child{margin-bottom:0}
.cmprow.ours h3{color:var(--accent-text)}
.cmprow.ours{border-top-color:color-mix(in srgb, var(--gold) 40%, var(--line))}

/* spec cards (download requirements) */
.spec h3{margin-bottom:2px}
.spec .tagline{font-size:13px; color:var(--ink-3); margin:0 0 14px}
.spec dl{margin:0}
.spec .row{display:grid; grid-template-columns:104px 1fr; gap:14px; padding:11px 0;
           border-top:1px solid var(--line-soft)}
.spec dt{font-size:11px; letter-spacing:1.4px; text-transform:uppercase; font-weight:600;
         color:var(--ink-3); padding-top:3px}
.spec dd{margin:0; font-size:14px; color:var(--ink-2)}
.spec dd b{font-size:15px}
@media (max-width:480px){ .spec .row{grid-template-columns:1fr; gap:2px; padding:9px 0} }
.specnotes{margin-top:26px; max-width:75ch}
.specnotes p{font-size:13.5px; color:var(--ink-2)}

/* numbered steps (how it works) */
.step{display:grid; grid-template-columns:64px 1fr; gap:26px; padding:34px 0;
      border-top:1px solid var(--line-soft)}
.step:last-of-type{border-bottom:1px solid var(--line-soft)}
.stepnum{position:relative; width:52px; height:57px; flex:none}
.stepnum svg{position:absolute; inset:0}
.stepnum .shape{fill:none; stroke:var(--line); stroke-width:2}
.stepnum b{position:absolute; inset:0; display:flex; align-items:center;
           justify-content:center; font-size:19px; color:var(--accent-text)}
.step h3{font-size:20px}
/* Prose width caps bind PROSE only — as `.step p` this leaked into every paragraph
   inside a mocked-up frame, and narrowed the frame caption off-centre. */
.step > div > p{max-width:70ch}
@media (max-width:640px){ .step{grid-template-columns:1fr; gap:12px} }

/* big claim band */
.band{background:var(--bg-raise); border-top:1px solid var(--line-soft);
      border-bottom:1px solid var(--line-soft)}
:root[data-theme="light"] .band{background:var(--panel)}
.bigclaim{font-size:clamp(24px,3.4vw,40px); font-weight:600; letter-spacing:-0.015em;
          line-height:1.2; margin:0 0 14px; max-width:22ch}
.bigclaim .accent{color:var(--accent-text)}
.center .bigclaim{margin-left:auto; margin-right:auto}

/* persona / story styles */
.persona{display:grid; grid-template-columns:300px 1fr; gap:44px; padding:64px 0;
         border-top:1px solid var(--line-soft); align-items:start}
.persona:first-of-type{border-top:none}
@media (max-width:880px){ .persona{grid-template-columns:1fr; gap:26px} }
.pcard{position:sticky; top:92px; background:var(--panel); border:1px solid var(--line-soft);
       border-radius:16px; padding:24px}
@media (max-width:880px){ .pcard{position:static} }
.pcard .pwho{font-size:19px; font-weight:600; color:var(--ink); margin:0 0 2px}
.pcard .prole{font-size:13px; color:var(--accent-text); margin:0 0 14px; font-weight:500}
.pcard dl{margin:0; font-size:13px}
.pcard dt{color:var(--ink-3); font-size:10.5px; letter-spacing:1.6px;
          text-transform:uppercase; font-weight:600; margin-top:12px}
.pcard dd{margin:3px 0 0; color:var(--ink-2)}
.pcard .usecase{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);
                font-size:12px; color:var(--ink-3)}
.pcard .usecase b{color:var(--ink-2); font-weight:600}
/* The pre-release disclosure on /stories: it must survive a scanner, so it gets a
   visible edge rather than sitting inside a paragraph nobody reads. */
.disclose{max-width:62ch; margin:0 auto; padding:12px 18px; text-align:left;
          border:1px dashed var(--line); border-radius:10px}

.beats{display:flex; flex-direction:column; gap:26px}
.beat > p{max-width:66ch}
.beat .frame{margin-top:14px; font-size:12.5px}
.outcome{border-left:3px solid var(--gold); padding:4px 0 4px 18px; margin-top:6px}
.outcome p{font-size:15.5px; color:var(--ink); margin:0; max-width:60ch}
.alsorow{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px}
@media (max-width:860px){ .alsorow{grid-template-columns:1fr} }
.also{border:1px dashed var(--line); border-radius:12px; padding:16px 18px;
      font-size:13px; color:var(--ink-2)}
.also b{display:block; margin-bottom:3px}

/* ------------------------------------------------------------------ pricing */
.pricing{display:grid; grid-template-columns:1.1fr 1fr; gap:18px; align-items:stretch}
@media (max-width:860px){ .pricing{grid-template-columns:1fr} }
.price{background:var(--panel); border:1px solid var(--line-soft); border-radius:16px;
       padding:28px}
.price.free{border-color:color-mix(in srgb, var(--gold) 40%, var(--line))}
.price .amount{font-size:32px; font-weight:600; color:var(--ink); margin:6px 0 2px}
.price .amount small{font-size:14px; color:var(--ink-3); font-weight:400}
.price ul{list-style:none; margin:14px 0 0; padding:0; font-size:13.5px; color:var(--ink-2)}
.price li{padding:5px 0 5px 22px; position:relative}
.price li::before{content:''; position:absolute; left:0; top:11px; width:11px; height:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M7 1 13 4.5v7L7 15 1 11.5v-7Z' fill='none' stroke='%23FFC72C' stroke-width='1.8'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat}
:root[data-theme="light"] .price li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M7 1 13 4.5v7L7 15 1 11.5v-7Z' fill='none' stroke='%23B08800' stroke-width='1.8'/%3E%3C/svg%3E")}

/* --------------------------------------------------------------------- FAQ */
.faqgroup{margin:0 0 34px}
.faq{border-bottom:1px solid var(--line-soft)}
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:14px;
  padding:17px 2px; font-size:15.5px; font-weight:500; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; margin-left:auto; color:var(--ink-3); font-size:19px;
                    font-weight:400; transition:transform .2s ease}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 2px 18px; max-width:75ch}
.faq .a p{font-size:14px}
.faq .a p:last-child{margin-bottom:0}

/* ------------------------------------------------------------- support form */
.form{display:grid; gap:16px}
.field{display:grid; gap:6px}
.field label{font-size:13px; font-weight:500; color:var(--ink);
             display:inline-flex; align-items:center}
.field .hint{font-size:12px; color:var(--ink-3)}

/* ONE control treatment, shared by every text input on the site. */
.field input,.field select,.field textarea,.notify input{
  font-family:inherit; font-size:14.5px; color:var(--ink);
  background:var(--bg-raise); border:1px solid var(--line); border-radius:10px;
  padding:11px 14px; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{min-height:150px; resize:vertical; line-height:1.55}
/* The placeholder was never given a colour, so each browser and theme picked its own.
   ink-3 is the site's quietest text and clears AA at this size. */
.field input::placeholder,.field textarea::placeholder,.notify input::placeholder{
  color:var(--ink-3); opacity:1}
/* Focus: the border alone is too quiet to satisfy anyone tabbing through, and
   `outline:none` on its own removed the site's global ring. Replace, do not delete. */
.field input:focus,.field select:focus,.field textarea:focus,.notify input:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent)}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23858B95' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center}
:root[data-theme="light"] .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236A6F77' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}

/* Tooltip: CSS only, no script. The marker carries the text in data-tip for the
   visual tooltip and in aria-label for a screen reader, and is focusable so it works
   from the keyboard as well as the mouse. */
.tip{position:relative; display:inline-flex; align-items:center; justify-content:center;
     width:16px; height:16px; margin-left:7px; flex:none;
     border:1px solid var(--line); border-radius:50%;
     font-size:10.5px; font-weight:600; color:var(--ink-3); cursor:help;
     transition:border-color .15s, color .15s}
.tip:hover,.tip:focus-visible{border-color:var(--gold); color:var(--accent-text)}
/* Anchored to the marker's LEFT, not centred on it: every marker on the site sits a
   few characters in from the left edge of its card, so a centred tooltip hangs off
   that edge and clips — which it did. */
.tip::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:-8px;
  width:max-content; max-width:min(300px, 74vw);
  background:var(--bg-raise); border:1px solid var(--line); border-radius:9px;
  padding:9px 12px; font-size:12px; font-weight:400; line-height:1.5;
  color:var(--ink-2); text-align:left; box-shadow:var(--shadow-card);
  opacity:0; visibility:hidden; transition:opacity .15s ease;
  pointer-events:none; z-index:30}
.tip:hover::after,.tip:focus-visible::after{opacity:1; visibility:visible}
@media (max-width:560px){ .tip::after{left:-8px; max-width:min(280px, 78vw)} }
@media (prefers-reduced-motion:reduce){ .tip::after{transition:none} }
.formnote{font-size:12.5px; color:var(--ink-3)}
.ticketout{display:none}
.ticketout.show{display:block}
.ticketout pre{
  white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,'Cascadia Mono',
  Consolas,monospace; font-size:12.5px; color:var(--ink-2); background:var(--bg-raise);
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:0 0 12px;
}
.statusline{font-size:13.5px; margin:4px 0 0}
.statusline.ok{color:var(--ok)}
.statusline.err{color:var(--bad)}

/* -------------------------------------------------------------- legal pages */
.legal h2{font-size:19px; margin:34px 0 8px}
.legal h2:first-of-type{margin-top:22px}
.legal p,.legal li{font-size:14.5px; color:var(--ink-2)}
.legal ul{padding-left:20px; margin:0 0 16px}
.legal li{margin:0 0 8px}
.legal li b,.legal p b{color:var(--ink)}
.legal .small{color:var(--ink-3)}
.legal a{text-decoration:underline; text-underline-offset:3px}

/* ------------------------------------------------------------------ footer */
footer.site{border-top:1px solid var(--line-soft); padding:46px 0 40px; margin-top:40px}
.footgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:26px}
@media (max-width:860px){ .footgrid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .footgrid{grid-template-columns:1fr} }
.footbrand svg{height:26px; width:auto; margin-bottom:12px}
.footbrand p{font-size:12.5px; color:var(--ink-3); max-width:30ch; margin:0}
footer.site h5{font-size:11px; letter-spacing:1.8px; text-transform:uppercase;
               color:var(--ink-3); margin:0 0 12px; font-weight:600}
footer.site ul{list-style:none; margin:0; padding:0}
footer.site li{margin:0 0 9px}
footer.site a{color:var(--ink-2); font-size:13px}
footer.site a:hover{color:var(--ink); text-decoration:none}
.footline{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
          margin-top:36px; padding-top:20px; border-top:1px solid var(--line-soft);
          font-size:12px; color:var(--ink-3)}
.footline .spacer{flex:1}
/* Chrome-less pages (activation, 404) have no footgrid, so the footline's own rule
   would draw a second hairline under the footer's border with dead space between. */
.footline.bare{margin-top:0; padding-top:0; border-top:none}

/* ------------------------------------------------------------------ reveals */
.rv{opacity:1; transform:none}
body.js .rv{opacity:0; transform:translateY(16px);
            transition:opacity .6s ease, transform .6s cubic-bezier(.3,.8,.3,1)}
body.js .rv.in{opacity:1; transform:none}

/* chrome-less pages (activation, 404): centred lockup + pinned theme toggle */
.lockup-md{height:56px; width:auto; margin:0 auto 30px}
.themefix{position:fixed; top:18px; right:18px; z-index:50}
.wrap.narrow .card{margin-bottom:18px}

/* --------------------------------------------------------------- 404 shelf */
.lost{min-height:58vh; display:flex; flex-direction:column; align-items:center;
      justify-content:center; text-align:center; padding:60px 0}
.lostshelf{display:flex; align-items:center; gap:10px; border:1.5px dashed var(--line);
           border-radius:12px; padding:14px 22px; color:var(--ink-2); font-size:14px;
           margin:26px 0}
.lostshelf .ffold{stroke:var(--ink-3); stroke-dasharray:3 2.4; width:16px; height:14px}
.lostshelf .ftag{border-color:var(--line); color:var(--ink-3); margin-left:8px;
                 font-size:10px; padding:2px 8px}

/* ------------------------------------- keybox (activation page) */
.keybox{display:block; width:100%; margin:0 0 16px; padding:14px 16px;
        background:var(--bg-raise); border:1px solid var(--line); border-radius:10px;
        font-family:ui-monospace,'Cascadia Mono','Consolas',monospace;
        font-size:14px; color:var(--ink); word-break:break-all; user-select:all}

/* THE CHECKOUT MODAL RULES WERE REMOVED 2026-08-17 with the payment provider. They are
 * in git history if a hosted overlay is used again, and the finding that justified them
 * is written up in docs/history/BUY_FLOW.md — briefly: a cross-origin checkout iframe
 * paints an opaque base surface that the embedding page cannot make transparent, so the
 * only way to show a backdrop of your own is to size the iframe smaller than the
 * viewport. Do not re-derive that; it took a morning. */

/* plan rows on the buy page: a third grid column that collapses to nothing when unused,
 * so a per-plan button can sit beside the plan it buys when there is something to buy */
.points{list-style:none; padding:0; margin:0 0 40px; width:100%;
        display:grid; gap:20px; text-align:left}
.points li{display:grid; grid-template-columns:22px 1fr auto; gap:14px; align-items:start}
.points .buy{align-self:center; white-space:nowrap}
/* Pre-launch: the plan rows show what a licence will cost, with no way to buy one.
   A disabled span, not a styled link — there is nothing to click and nothing to
   keyboard-focus. Restore the anchors (git history) on the day the store goes live. */
.points .soon{align-self:center; white-space:nowrap; font-size:12px; color:var(--ink-3);
              border:1px dashed var(--line); border-radius:999px; padding:7px 14px}
@media (max-width:560px){
  .points li{grid-template-columns:22px 1fr}
  .points .buy{grid-column:2; justify-self:start; margin-top:10px}
}
.points .hex{width:14px; height:16px; margin-top:5px; flex:none}
.points b{display:block; font-size:14.5px; font-weight:600; color:var(--ink);
          margin-bottom:2px}
.points span{font-size:13.5px; color:var(--ink-2)}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  body.js .rv{opacity:1; transform:none}
}