/* ═══════════════════════════════════════════════════════════════════════
   tulir.systems — shared stylesheet.

   TARGET: assets/reference_v8_latest_overlapping_composition_NOT_PIXEL_FINAL.png
   (1774 x 887). Every proportion below was MEASURED off that file rather than
   eyeballed, and the measurements are recorded inline so the next person can
   check them instead of trusting me:

     content gutter    x=77 and x=1696        -> 4.34% of 1774
     content width     1619                   -> 91.3%
     header            0..72, wash starts 73  -> 73px at that width
     hero wash ends    y=529  (laptops overrun to ~575)
     section heading   y~570
     product cards     y 626..751, x 77..882 and 891..1695  (gap 9px)
     benefit dividers  x=428, 875, 1289
     footer rule       y=826
     card fills        #eef6fe (blue)  #f0f9f5 (sage)   sampled
     page background   #fdfdfe                          sampled

   WHY THIS FILE AND NOT reference_v8_approved_composition.png: the package
   README calls this one "optional composition context ... known overlap
   imperfections, not a pixel-accurate spec", so the first build targeted the
   other reference. That was the wrong call — this is the composition Raj
   wants. The written constraints in CLAUDE_HANDOFF.md still win over this
   image wherever the two disagree, and each such case is commented where it
   occurs.

   CONTRAST. Every colour pairing that carries text is checked by
   test/contrast.mjs against WCAG AA. Change a token and run it.
   ═══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* §3 style tokens. The mockup's own pixels sample slightly more saturated
     (its card link blue reads near #0034f7); the handoff's written values win. */
  --navy:#092448;
  --navy-700:#0d3160;
  --forest:#125b45;
  --ink:#354d61;
  --ink-soft:#5a7083;

  --xray-blue:#1769c2;
  --pulse-green:#0f7959;

  --white:#ffffff;
  --page:#fdfdfe;
  --pale-blue:#eef6fe;
  --pale-sage:#f0f9f5;
  --line:#e3e9f0;
  --line-soft:#edf1f6;

  --r:10px;--r-sm:8px;
  --shadow-sm:0 1px 2px rgba(9,36,72,.06);
  --shadow-md:0 8px 24px -10px rgba(9,36,72,.18);
  --shadow-lap:0 26px 46px -18px rgba(9,36,72,.42),0 6px 14px rgba(9,36,72,.10);

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* 1619/1774 of the reference. The handoff says "1480px (or comparable)";
     this is the comparable figure that reproduces the mockup's proportions. */
  --wrap:1620px;
  --gutter:clamp(18px,4.34vw,78px);
  --header-h:80px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}
body{background:var(--page);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:16px;top:16px;z-index:300;background:var(--navy);color:#fff;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none}

a{color:var(--xray-blue);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--xray-blue);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:820px;margin:0 auto;padding:0 var(--gutter)}

h1,h2,h3,.serif{font-family:var(--serif)}
strong{font-weight:600;color:var(--navy)}

/* ═══ HEADER ══════════════════════════════════════════════════════════ */
.site-header{position:sticky;top:0;z-index:200;background:var(--white);border-bottom:1px solid var(--line-soft)}
.header-inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
  height:var(--header-h);display:flex;align-items:center;gap:clamp(14px,2vw,34px)}
.logo-link{flex-shrink:0;display:block;line-height:0}
/* Reference lockup: x 88..240, y 14..64 -> 152 x 50, ink aspect 2.10. */
.logo-link img{width:152px;height:auto}

.main-nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,34px);margin:0 auto}
.main-nav>a,.menu-btn{font-family:var(--sans);font-size:16px;font-weight:500;color:var(--navy);
  background:none;border:none;cursor:pointer;text-decoration:none;padding:10px 2px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:color .15s}
.main-nav>a:hover,.menu-btn:hover{color:var(--xray-blue)}
.menu-btn .caret{width:10px;height:6px;flex-shrink:0;transition:transform .18s}
.menu-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}

.menu{position:relative}
.menu-list{position:absolute;top:calc(100% + 10px);left:0;min-width:256px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-md);padding:8px;
  list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s}
.menu-list.right{left:auto;right:0}
.menu[data-open="true"] .menu-list{opacity:1;visibility:visible;transform:translateY(0)}
.menu-list a{display:block;padding:10px 12px;border-radius:var(--r-sm);font-size:14.5px;
  font-weight:500;color:var(--navy);text-decoration:none}
.menu-list a:hover{background:var(--pale-blue);color:var(--xray-blue)}
.menu-list a .mi{display:block;font-size:12.5px;font-weight:400;color:var(--ink-soft);margin-top:2px}

.header-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.header-divider{width:1px;height:30px;background:var(--line);flex-shrink:0}
/* Reference: outlined button x 1356..1545 (189 x 42), solid x 1553..1697. */
.btn-outline,.btn-solid{display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);font-size:15.5px;font-weight:600;padding:11px 22px;
  text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn-outline{background:var(--white);color:var(--navy);border:1.5px solid var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-solid{background:var(--forest);color:#fff;border:1.5px solid var(--forest)}
.btn-solid:hover{background:#0e4a38;border-color:#0e4a38}
.btn-solid:focus-visible{outline-color:var(--forest)}

.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 11px;cursor:pointer;color:var(--navy);margin-left:auto}

/* ═══ HERO ════════════════════════════════════════════════════════════
   The wash ends at y=529 while the laptops run to ~575, so the machines
   deliberately break out of the band and sit on the white below it. That
   overhang is the signature of this composition; it is reproduced with a
   negative margin on the stage rather than by faking a taller band. */
.hero{position:relative;background:
    linear-gradient(104deg,
      #ffffff 0%, #fbfdfc 20%, #f3f9f4 42%, #e8f3e6 62%, #dfeedb 78%, #d8ead3 100%);
  border-bottom:1px solid rgba(9,36,72,.05)}
/* The approved production foliage asset is NOT in the package (§8 item 5).
   This is the only unoccluded foliage in the mockup, lifted at native size so
   it is never upscaled at or below a 1774px viewport, and feathered on its
   left and bottom edges so it dissolves into the wash instead of ending on a
   seam. Replace the url() with the real art when it arrives — nothing else
   needs to change. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("assets/hero-foliage.png") no-repeat right top;
  background-size:auto 46%;opacity:.95}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,#ffffff 0%,rgba(255,255,255,.92) 26%,rgba(255,255,255,0) 52%)}
.hero-inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  padding:clamp(18px,1.52vw,30px) var(--gutter) 0;
  display:grid;grid-template-columns:minmax(0,41fr) minmax(0,59fr);
  gap:clamp(18px,2vw,34px);align-items:center}

.hero h1{font-size:clamp(34px,3.72vw,66px);font-weight:700;line-height:1.04;
  letter-spacing:-.015em;color:var(--navy)}
.hero h1 .nline{display:block}
.hero h1 .gline{display:block;color:var(--forest)}
.hero-sub{font-size:clamp(16px,1.2vw,22px);line-height:1.38;color:var(--ink);
  margin:18px 0 14px;max-width:25em}
.hero-diff{font-size:clamp(16px,1.18vw,21px);font-weight:700;color:var(--navy);
  line-height:1.35;margin-bottom:22px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px}
.cta{display:inline-flex;align-items:center;gap:10px;border-radius:var(--r);
  font-size:clamp(15px,1vw,18px);font-weight:600;padding:15px 26px;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s}
.cta-primary{background:var(--navy);color:#fff;border:1.5px solid var(--navy)}
.cta-primary:hover{background:var(--navy-700);border-color:var(--navy-700)}
.cta-primary:focus-visible{outline-color:var(--forest)}
.cta-secondary{background:rgba(255,255,255,.72);color:var(--navy);border:1.5px solid #c3cdd8}
.cta-secondary:hover{border-color:var(--navy);background:#fff}
.cta .arw{transition:transform .15s}
.cta:hover .arw{transform:translateX(4px)}

/* ── Laptops ──────────────────────────────────────────────────────────
   Reference geometry: left machine screen ~500x405 (1.23 — the XRay capture's
   own 964x785 ratio), right machine ~605x345, the right one in front, lower
   and further right. Device chrome is drawn in CSS; nothing is painted over
   the captures themselves. */
.stage{position:relative;min-width:0;margin-bottom:-4.5%;
  margin-right:calc(var(--gutter) * -1)}
.laptop{position:absolute;filter:drop-shadow(0 22px 26px rgba(9,36,72,.16))}
.laptop-screen{background:#161d27;border-radius:12px 12px 3px 3px;padding:9px 9px 10px;
  box-shadow:var(--shadow-lap),inset 0 0 0 1px rgba(255,255,255,.08)}
.laptop-screen img{width:100%;height:100%;object-fit:cover;object-position:top left;
  border-radius:4px;background:#0b1220}
.laptop-base{position:relative;height:13px;width:116%;margin-left:-8%;
  background:linear-gradient(180deg,#e7eaee 0%,#ccd2d9 46%,#aab2bc 100%);
  border-radius:0 0 11px 11px;box-shadow:0 2px 5px rgba(9,36,72,.2)}
.laptop-base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:13%;height:5px;background:#b6bdc6;border-radius:0 0 7px 7px}

.laptop--xray{left:0;top:0;width:49.4%;z-index:1}
.laptop--xray .laptop-screen{aspect-ratio:964 / 785}
.laptop--pulse{right:0;top:21%;width:59.8%;z-index:2}
.laptop--pulse .laptop-screen{aspect-ratio:605 / 345}
/* The stage has no intrinsic height because both machines are absolute; this
   spacer gives it one in the right proportion (reference: the composition is
   ~502 tall against a 1619 content width). */
.stage-spacer{display:block;width:100%;padding-top:46.9%}

/* ═══ PRODUCTS ════════════════════════════════════════════════════════ */
.section{position:relative;z-index:3;padding:clamp(34px,2.9vw,52px) 0 clamp(22px,2.2vw,38px)}
.section-head{text-align:center;margin:0 auto clamp(18px,1.7vw,30px)}
.section-head h2{font-size:clamp(26px,2.05vw,38px);font-weight:700;letter-spacing:-.012em;
  line-height:1.16;color:var(--navy)}
.section-head p{font-size:clamp(15px,1vw,17.5px);color:var(--ink);margin:9px auto 0;max-width:72ch}

/* Reference: cards 805 wide in a 1619 content box, 9px apart. */
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.pcard{border-radius:var(--r);padding:clamp(18px,1.5vw,26px) clamp(20px,1.7vw,30px);
  display:flex;align-items:flex-start;gap:clamp(18px,1.9vw,34px)}
.pcard-xray{background:var(--pale-blue)}
.pcard-pulse{background:var(--pale-sage)}
.pcard-icon{width:clamp(44px,3.1vw,56px);aspect-ratio:1;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center}
.pcard-xray .pcard-icon{background:#dceaf8}
.pcard-pulse .pcard-icon{background:var(--pulse-green)}
.pcard-body{min-width:0}
.pcard h3{font-size:clamp(19px,1.35vw,25px);font-weight:700;line-height:1.2;margin-bottom:5px}
.pcard-xray h3{color:var(--navy)}
.pcard-pulse h3{color:var(--forest)}
.pcard-intro{font-size:clamp(15px,1.02vw,18px);font-weight:700;color:var(--navy);margin-bottom:5px}
.pcard-pulse .pcard-intro{color:var(--forest)}
.pcard-text{font-size:clamp(14px,.92vw,16px);color:var(--ink);margin-bottom:8px;line-height:1.5}
.pcard-link{display:inline-flex;align-items:center;gap:8px;font-size:clamp(14px,.92vw,16px);
  font-weight:600;text-decoration:none}
.pcard-xray .pcard-link{color:var(--xray-blue)}
.pcard-pulse .pcard-link{color:var(--pulse-green)}
.pcard-link:hover{text-decoration:underline}
.pcard-link .arw{transition:transform .15s}
.pcard-link:hover .arw{transform:translateX(4px)}

/* ═══ BENEFITS ════════════════════════════════════════════════════════
   Reference dividers at x=428, 875, 1289 across a 77..1696 content box: four
   columns, icon to the LEFT of the text rather than above it. */
.benefits{position:relative;z-index:3;padding:clamp(20px,2vw,34px) 0 clamp(20px,2vw,36px)}
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.benefit{display:flex;align-items:flex-start;gap:clamp(12px,1.1vw,20px);
  padding:0 clamp(14px,1.5vw,28px);border-left:1px solid var(--line)}
.benefit:first-child{border-left:0;padding-left:0}
.benefit-icon{width:clamp(28px,2.1vw,38px);flex-shrink:0;color:var(--navy);margin-top:1px}
.benefit h3{font-size:clamp(15px,1.07vw,19px);font-weight:700;line-height:1.2;
  color:var(--navy);margin-bottom:5px}
.benefit p{font-size:clamp(13px,.88vw,15.5px);color:var(--ink);line-height:1.45}

/* ═══ LEGAL / PROSE PAGES ═════════════════════════════════════════════ */
.doc{padding:clamp(40px,4vw,64px) 0 clamp(50px,5.5vw,84px)}
.doc .eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:14px}
.doc h1{font-family:var(--serif);font-size:clamp(32px,3.4vw,46px);font-weight:700;
  color:var(--navy);line-height:1.1;margin-bottom:10px}
.doc .updated{font-size:13.5px;color:var(--ink-soft);margin-bottom:32px}
.doc h2{font-family:var(--serif);font-size:23px;font-weight:700;color:var(--navy);
  margin:36px 0 12px;scroll-margin-top:100px}
.doc h3{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--navy);margin:26px 0 8px}
.doc p,.doc li{font-size:16px;color:var(--ink);line-height:1.65}
.doc p{margin-bottom:16px}
.doc ul,.doc ol{margin:0 0 16px 0;padding-left:22px}
.doc li{margin-bottom:9px}
.doc a{text-decoration:underline}
.divider{height:1px;background:var(--line-soft);margin:42px 0}
.callout{background:var(--pale-blue);border:1px solid #d7e6f6;border-radius:var(--r);
  padding:20px 24px;margin:26px 0}
.callout .ct{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--xray-blue);margin-bottom:9px}
.callout p{margin-bottom:0;font-size:15.5px}
.callout.warn{background:#fdf4f1;border-color:#f0cfc4}
.callout.warn .ct{color:#a6401f}
.callout.green{background:var(--pale-sage);border-color:#cfe6da}
.callout.green .ct{color:var(--forest)}

/* ═══ FOOTER ══════════════════════════════════════════════════════════
   Reference: a single hairline at y=826 and a compact 61px band under it. */
.site-footer{border-top:1px solid var(--line);padding:clamp(20px,2vw,34px) 0 clamp(18px,1.8vw,30px)}
.footer-grid{display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.86fr) minmax(0,.78fr) minmax(0,.86fr) minmax(0,1.5fr);
  gap:clamp(16px,2vw,40px);align-items:start}
.footer-brand{display:flex;align-items:flex-start;gap:clamp(12px,1.2vw,22px)}
.footer-brand img{width:clamp(92px,7vw,118px);height:auto;flex-shrink:0}
.footer-diff{font-size:clamp(12px,.82vw,14px);color:var(--ink);line-height:1.45;max-width:22ch}
.footer-col h4{font-family:var(--sans);font-size:clamp(12px,.82vw,14px);font-weight:700;
  color:var(--navy);margin-bottom:7px}
.footer-col a{display:block;font-size:clamp(12px,.82vw,14px);color:var(--ink);
  text-decoration:none;margin-bottom:5px}
.footer-col a:hover{color:var(--xray-blue);text-decoration:underline}
.footer-entity h4{font-family:var(--sans);font-size:clamp(12px,.82vw,14px);font-weight:700;
  color:var(--navy);margin-bottom:7px}
.footer-entity p{font-size:clamp(11.5px,.78vw,13px);color:var(--ink-soft);line-height:1.5;margin-bottom:5px}
.footer-entity p:last-child{margin-bottom:0}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════ */
@media (max-width:1199px){
  :root{--header-h:74px}
  .logo-link img{width:140px}
  .main-nav>a,.menu-btn{font-size:14.5px}
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:0}
  .hero-sub,.hero-diff{max-width:56ch}
  .stage{margin-bottom:-4%}
  .benefit-grid{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .benefit:nth-child(3){border-left:0;padding-left:0}
  .footer-grid{grid-template-columns:repeat(3,1fr);gap:26px}
  .footer-brand{grid-column:1/-1}
  .footer-entity{grid-column:1/-1}
}
@media (max-width:959px){
  .header-actions .btn-outline,.header-actions .btn-solid,.header-divider{display:none}
  .product-grid{grid-template-columns:1fr;gap:12px}
}
@media (max-width:767px){
  .main-nav{display:none;margin:0}
  .main-nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:var(--header-h);left:0;right:0;background:var(--white);
    border-bottom:1px solid var(--line);padding:10px var(--gutter) 18px;box-shadow:var(--shadow-md)}
  .main-nav.open>a,.main-nav.open .menu-btn{padding:13px 0;width:100%;
    justify-content:space-between;min-height:44px}
  .main-nav.open .menu{width:100%}
  .main-nav.open .menu-list{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;
    padding:0 0 0 12px;margin:0 0 8px;display:none}
  .main-nav.open .menu[data-open="true"] .menu-list{display:block}
  .main-nav.open .menu-list a{min-height:44px;display:flex;flex-direction:column;justify-content:center}
  .nav-toggle{display:block;min-height:44px;min-width:44px}
  /* §5: stacked on a phone, never overlaid, never clipped. The machines stop
     being a composition and become two plain blocks. */
  .stage{margin-bottom:0}
  .stage-spacer{display:none}
  .laptop{position:static;width:100%!important;margin-bottom:22px}
  /* The base is 116% wide with a negative margin so it reads as a laptop foot
     wider than the lid. That overhang lives inside the stage on desktop, but
     once the machine is full-width it breaks the viewport: measured 404px of
     content against a 375px screen. Flush at this size. */
  .laptop-base{width:100%;margin-left:0}
  .laptop--pulse .laptop-screen{aspect-ratio:1863 / 1150}
  .benefit-grid{grid-template-columns:1fr;gap:22px}
  .benefit{border-left:0;padding:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cta{width:100%;justify-content:center}
}