/* ============================================================================
   Madar OS design system
   One file. Every public surface imports it, so a change here changes them all.
   Built 2026-08-24 after an expert review found the sites read as generated:
   local system fonts, one hover state, and the same section rhythm four times
   a page. The fixes are structural, not decorative.

   Rules carried from docs/os/DESIGN-STANDARD.md:
     copper = the human side (attention, approvals, the active thing)
     ice    = the machine side (data, orbits, system voice)
     never both on one element, and never copper on everything
   ========================================================================= */

:root {
  /* ground.
     --void settled at #07090D on 2026-08-29: five of seven pages already
     rendered it and it is the value in the brand record. The old #06080C
     survived only here and on workspace, which meant the ground shifted by
     a luminance step between pages, the kind of drift nobody can name but
     everyone feels. One value now, and the page-level :root forks that
     caused it are gone. */
  --void:#07090D; --deep:#080B11; --panel:#0D111A; --panel-2:#151A23; --raise:#171D2C;
  --line:rgba(155,193,224,0.11); --line-2:rgba(155,193,224,0.2); --line-3:rgba(155,193,224,0.34);

  /* meaning.
     --warn settled at #D9B36A, the brand-record value: it marks the held
     and waiting states, and a warning that changes hue between the demo
     and the workspace is two warnings. */
  --copper:#F2926B; --copper-dim:rgba(242,146,107,0.13); --copper-deep:#B4643F;
  --ice:#9BC1E0; --ice-dim:rgba(155,193,224,0.12);
  --ok:#7FBF8E; --warn:#D9B36A; --stop:#E08585;

  /* text
     Three tiers, all of which have to be readable. --faint was #525C6E, which
     measured 2.97:1 on --void and 2.65:1 on --panel-2 and was the single
     largest source of contrast failures on every page. It is now 5.32:1 on
     --void and 4.75:1 on --panel-2, so it passes AA on every ground in this
     system while still sitting a clear step below --dim (6.64:1). Moving the
     failing elements to --dim instead would have collapsed the scale to two
     tiers, which the dense surfaces need. */
  --text:#EAEEF6; --dim:#8B95A8; --faint:#7A8497;

  /* type */
  --display:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;

  /* a real scale, not arbitrary numbers */
  --t-hero:clamp(38px,6.6vw,78px);
  --t-h2:clamp(26px,3.7vw,42px);
  --t-h3:19px;
  --t-lede:clamp(16px,1.5vw,19px);
  --t-body:15px;
  --t-small:13px;
  /* The uppercase mono kicker above a heading is read, not glanced at, so it
     sits on the 12px floor rather than below it. Tracking and case carry the
     hierarchy that the missing 1.5px used to. */
  --t-label:12px;

  --r:16px; --r-s:10px; --r-pill:100px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --gut:clamp(20px,4vw,34px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--text);font-family:var(--body);font-size:var(--t-body);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.num,td,.price,.plan .price,.vrow span{font-variant-numeric:tabular-nums}
::selection{background:var(--copper);color:#1A0E08}
input,textarea,select{caret-color:var(--copper)}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:4px}

/* The scrollbar was themed on exactly one page, workspace, and the other
   six rendered the OS default against near-black. Promoted here so every
   surface gets it. */
html{scrollbar-color:var(--line-2) var(--void);scrollbar-width:thin}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px;border:2px solid var(--void)}
::-webkit-scrollbar-thumb:hover{background:var(--line-3)}

.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:880px}

/* ------------------------------------------------------------------ type */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.018em;line-height:1.08;text-wrap:balance}
h1{font-size:var(--t-hero)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.01em}
.soft{color:var(--faint)}
/* In a headline .soft carries the differentiating claim, and --faint sits at
   2.97:1 which fails the 3:1 floor even for large text. Headings get the
   readable tone; --faint stays for genuine small print. */
h1 .soft,h2 .soft,.hero h1 .soft{color:var(--dim)}
.lede{font-size:var(--t-lede);color:var(--dim);line-height:1.7;max-width:60ch}
.lede b,.lede strong{color:var(--text);font-weight:500}
/* Eyebrows are machine-side by default. Copper is reserved for the ring
   and the active thing, which is the product's thesis expressed as colour:
   on any screen, the one copper object is the thing that needs you. A
   reader used to pass seven copper eyebrows before reaching one copper
   thing that meant anything. */
.label{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ice)}
.label.cold{color:var(--ice)}
.label.mute{color:var(--faint)}
.label.warm{color:var(--copper)}
.small{font-size:var(--t-small);color:var(--dim);line-height:1.65}
.mono{font-family:var(--mono)}

/* --------------------------------------------------------------- section */
/* Rhythm varies on purpose. Identical spacing on every band is what made the
   old pages read as generated. */
.band{padding:clamp(56px,8vw,104px) 0;position:relative}
.band-tight{padding:clamp(38px,5vw,64px) 0}
.band-line{border-top:1px solid var(--line)}
.band-deep{background:var(--deep)}
.band-glow::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(760px 340px at 76% 0%,rgba(242,146,107,.055),transparent 62%)}
.band > .wrap{position:relative;z-index:1}
.head{max-width:64ch;margin-bottom:clamp(28px,4vw,46px)}
.head h2{margin-top:13px}
.head .lede{margin-top:16px}

/* ------------------------------------------------------------------- nav */
.nav{display:flex;align-items:center;gap:16px;padding:20px 0;position:sticky;top:0;z-index:50;background:rgba(7,9,13,.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.stuck{border-bottom-color:var(--line)}
.nav .mark{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.wordmark{font-family:var(--display);font-size:12.5px;letter-spacing:.4em;text-transform:uppercase;font-weight:600}
.wordmark em{font-style:normal;color:var(--copper)}
.nav .by{font-family:var(--mono);font-size:12px;color:var(--faint);flex:none}
.nav .gap{flex:1}
.nav .lk{font-family:var(--mono);font-size:12px;color:var(--dim);text-decoration:none;padding:6px 0;position:relative;transition:color .18s}
.nav .lk::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--copper);transition:right .28s var(--ease)}
.nav .lk:hover{color:var(--text)}
.nav .lk:hover::after{right:0}
.nav .lk[aria-current="page"]{color:var(--text)}
.nav .lk[aria-current="page"]::after{right:0}
/* The one way to start, on every page with the nav: copper, because starting is the thing that needs the reader. */
.nav .cta{font-family:var(--body);font-size:13px;font-weight:600;color:#1A0E08;background:var(--copper);text-decoration:none;padding:8px 14px;border-radius:999px;white-space:nowrap;transition:filter .18s,transform .12s}
.nav .cta:hover{filter:brightness(1.06)}
.nav .cta:active{transform:scale(.97)}
#plans{scroll-margin-top:96px}
.nav .lk{white-space:nowrap}
/* A phone keeps the price and the way to start; the hero carries the demo. */
@media(max-width:440px){.nav .lk.demo{display:none}.nav .cta{padding:7px 12px;font-size:12.5px}}
@media(max-width:720px){.nav .by{display:none}.nav{gap:12px;font-size:11px}}
@media(max-width:520px){.nav .lk.opt{display:none}}

/* ---------------------------------------------------------------- button */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;border-radius:var(--r-s);padding:15px 26px;transition:transform .2s var(--ease),box-shadow .2s,filter .2s;white-space:nowrap}
.btn.primary{color:#1A0E08;background:var(--copper);box-shadow:0 0 0 rgba(242,146,107,0)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(242,146,107,.26);filter:brightness(1.06)}
.btn.ghost{color:var(--dim);border:1px solid var(--line-2)}
.btn.ghost:hover{color:var(--text);border-color:var(--line-3);transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;
  transform:none;pointer-events:none}
.btns{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}
.under{margin-top:15px;font-family:var(--mono);font-size:12px;color:var(--faint)}

/* ----------------------------------------------------------------- panel */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:border-color .24s,transform .24s var(--ease)}
.panel:hover{border-color:var(--line-2)}
.panel h3{margin-bottom:10px}
.panel p{color:var(--dim);font-size:var(--t-small);line-height:1.7}
.panel p b{color:var(--text);font-weight:500}

/* Asymmetric by default. A page of equal boxes is the template look. */
.cols{display:grid;gap:16px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-lead{grid-template-columns:1.5fr 1fr}
.cols-trail{grid-template-columns:1fr 1.5fr}
.span-2{grid-column:span 2}
@media(max-width:900px){.cols-3{grid-template-columns:repeat(2,1fr)}.cols-lead,.cols-trail{grid-template-columns:1fr}}
@media(max-width:620px){.cols-2,.cols-3{grid-template-columns:1fr}.span-2{grid-column:auto}}

/* ------------------------------------------------------------------ misc */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;padding:4px 11px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--dim)}
.pill.live{color:var(--copper);border-color:rgba(242,146,107,.34)}
.pill i{width:5px;height:5px;border-radius:50%;background:currentColor}
/* Static on purpose. This dot sits over sample data on the homepage, and a
   pulse over a hardcoded array is fake telemetry: the exact tell the review
   named. A state is a colour, not a heartbeat. */
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--ice)}

.rule{height:1px;background:linear-gradient(90deg,var(--line-2),transparent);margin:0}
/* A rule above the block, not a stripe beside it: the side stripe is the
   most recognisable template tell there is, and .rule is already this
   system's own device for exactly this signal. */
.note{border-top:1px solid color-mix(in srgb,var(--copper) 40%,transparent);
  padding-top:16px;color:var(--dim);font-size:var(--t-small);line-height:1.75;max-width:76ch}
.note b{color:var(--text);font-weight:500}

.stats{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,54px);padding:26px 0}
.stat .v{font-family:var(--display);font-size:clamp(26px,3.4vw,38px);font-weight:600;letter-spacing:-.02em}
.stat .v em{font-style:normal;color:var(--faint);font-size:.56em}
.stat .k{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:6px;max-width:22ch;line-height:1.5}

footer{border-top:1px solid var(--line);padding:40px 0 56px;font-family:var(--mono);font-size:12px;color:var(--faint)}
footer .row{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer a{color:var(--dim);text-decoration:none;transition:color .18s}
footer a:hover{color:var(--text)}
footer .gap{flex:1}

/* --------------------------------------------------------------- reveal
   One deliberate focal entrance per page, not a page-wide curtain. This
   class used to sit on roughly twenty elements a page at 700ms each, which
   is the "same fade and rise on every section" the design standard bans.
   The 620ms is the focal-entrance budget, spent once. */
.rise{opacity:0;transform:translateY(10px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.rise.seen{opacity:1;transform:none}
/* The card stagger that survives: first three cards, opacity only, 55ms. */
.cap.rise{transform:none}

/* Reduced motion strips the spatial part and keeps the informative part.
   The old blanket kill also removed every hover and focus transition, which
   left an interface where nothing acknowledges input. Colour and opacity
   carry meaning about what changed; they stay. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-property:color,background-color,border-color,opacity,
      box-shadow,outline-color!important;
    transition-duration:.16s!important;animation:none!important}
  .rise{opacity:1;transform:none}
  .btn:hover,.btn:active,.panel:hover{transform:none}
}

/* ============================================================================
   Phone readability. A measurement, not a preference: ninety seven elements on
   the homepage rendered below 12px at 375px wide, most of them the mono labels
   and captions that carry the actual proof. Small type reads as precise on a
   27 inch display and as unreadable in one hand.

   The floor here is 12px for anything a visitor must read, and the body copy
   climbs rather than shrinks, because a phone is held closer but glanced at
   for less time.
   ========================================================================= */
@media (max-width: 640px) {
  :root{
    --t-label: 12px;
    --t-small: 14.5px;
    --t-body: 15.5px;
  }
  body{font-size:15.5px;line-height:1.65}
  .lede{font-size:16.5px;line-height:1.72}
  .label{font-size:12px;letter-spacing:.16em}
  .small,.note,.panel p,.cap p,.pl p{font-size:14.5px;line-height:1.72}
  .under,.stat .k,.chip,.glyph{font-size:12px}
  .nav .lk{font-size:12.5px}
  .wordmark{font-size:12px;letter-spacing:.3em}
  .frow .k{font-size:12px}
  .frow .v{font-size:14.5px}
  .integ h4{font-size:12px}
  footer{font-size:12px}
  .btn{font-size:12.5px;padding:15px 22px}
  /* the live panel in the hero is a proof surface, not decoration, so its rows
     have to be legible rather than merely present */
  .live .lh .t,.live .lf{font-size:12px}
  .lr{font-size:12.5px;grid-template-columns:78px 1fr;gap:9px}
  .lr .a{font-size:12px}
}