/* Hallmark · genre: modern-minimal · macrostructure: Split Studio · theme: custom "Sentinel" · accent-hue: 32 (orange) · fingerprint: half-screen heading / alternating diptych body / gutter divider / outlined-chip CTA / image-anchored-opposite / cross-fade stagger · nav: N6 masthead sticky · footer: Ft2 stacked lines · slop: pass · contrast: AA · mobile: stack-diptych · layout: boxed */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 */

:root{
  --color-ink:        oklch(24% 0.02 260);
  --color-ink-soft:   oklch(42% 0.02 260);
  --color-paper:      oklch(98.5% 0.004 90);
  --color-paper-warm: oklch(96% 0.012 75);
  --color-panel:      oklch(20% 0.03 262);
  --color-panel-ink:  oklch(94% 0.01 90);
  --color-accent:     oklch(68% 0.19 42);
  --color-accent-deep:oklch(56% 0.19 40);
  --color-line:       oklch(85% 0.01 90);
  --color-ok:         oklch(62% 0.15 150);

  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, sans-serif;

  --space-s: .75rem;
  --space-m: 1.5rem;
  --space-l: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7rem;

  --measure: 58ch;
  --radius: 10px;
  --gutter: clamp(1.5rem, 4vw, 3.5rem);
  --box: 1200px;
  --nav-h: 68px;
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--color-ink);
  background:var(--color-paper-warm);
  line-height:1.65;
  font-size:1.0625rem;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

/* ---------- Boxed wrapper ---------- */
.wrap{
  max-width:var(--box);
  margin-inline:auto;
  background:var(--color-paper);
  box-shadow:0 0 0 1px var(--color-line), 0 30px 80px -50px oklch(30% 0.03 260 / .5);
}

/* ---------- Nav · N6 masthead, sticky ---------- */
.masthead{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-m);
  padding:.6rem var(--gutter);min-height:var(--nav-h);
  background:oklch(98.5% 0.004 90 / .88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-line);
  flex-wrap:wrap;
}
.masthead__brand{display:flex;align-items:center;text-decoration:none}
.masthead__brand img{height:40px;width:auto}
.masthead__links{display:flex;gap:var(--space-m);flex-wrap:wrap;align-items:center;font-size:.92rem}
.masthead__links a{text-decoration:none;color:var(--color-ink-soft)}
.masthead__links a:hover,.masthead__links a:focus-visible{color:var(--color-accent-deep);text-decoration:underline;text-underline-offset:4px}
.masthead__phone{font-weight:600;color:var(--color-ink)}

/* ---------- Diptych rows ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gutter);
  align-items:center;
  padding:var(--space-2xl) var(--gutter);
}
.split--flip .split__text{order:2}
.split--flip .split__media{order:1}
.split__text{max-width:var(--measure)}
.split--flip .split__text{justify-self:end}

.eyebrow{
  font-family:var(--font-display);
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-accent-deep);
  display:block;margin-bottom:var(--space-s);
}
h1,h2{font-family:var(--font-display);line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:700}
h2{font-size:clamp(1.5rem,2.8vw,2.15rem);font-weight:700;margin-bottom:var(--space-m)}
.split__text p{color:var(--color-ink-soft);margin-bottom:var(--space-m)}
.split__text p strong{color:var(--color-ink)}

.media-note{font-size:.85rem;color:var(--color-ink-soft);margin-top:var(--space-s)}
.split__media img{border-radius:var(--radius);box-shadow:0 24px 60px -24px oklch(30% 0.03 260 / .35)}
.split__media--flat img{box-shadow:none}

/* ---------- Buttons: outlined chip ---------- */
.chip{
  display:inline-block;
  font-family:var(--font-display);font-weight:500;font-size:.95rem;
  padding:.7em 1.6em;border-radius:999px;
  border:1.5px solid var(--color-ink);
  background:transparent;color:var(--color-ink);
  text-decoration:none;cursor:pointer;
  transition:background .18s var(--ease-out),color .18s var(--ease-out),border-color .18s var(--ease-out);
}
.chip:hover{background:var(--color-ink);color:var(--color-paper)}
.chip:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}
.chip:active{transform:translateY(1px)}
.chip--accent{border-color:var(--color-accent-deep);color:var(--color-accent-deep)}
.chip--accent:hover{background:var(--color-accent-deep);color:var(--color-paper)}
.chip[aria-disabled="true"]{opacity:.5;pointer-events:none;cursor:not-allowed}
.chip__soon{font-family:var(--font-body);font-weight:400;font-size:.72em;opacity:.8}
.cta-row{display:flex;gap:var(--space-s);flex-wrap:wrap;margin-top:var(--space-m)}

/* ---------- Hero specifics (compact) ---------- */
.hero{background:var(--color-paper-warm);padding-block:var(--space-xl)}
.hero .price-tag{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  color:var(--color-accent-deep);
  margin-top:var(--space-m);
}
.hero .price-tag small{display:block;font-family:var(--font-body);font-weight:400;font-size:.82rem;color:var(--color-ink-soft);letter-spacing:0}

/* ---------- Kit list ---------- */
.kit{list-style:none;padding:0;margin:var(--space-m) 0}
.kit li{
  display:flex;gap:.75rem;align-items:baseline;
  padding:.6rem 0;border-bottom:1px solid var(--color-line);
}
.kit li::before{content:"✓";color:var(--color-ok);font-weight:700;flex:none}
.kit li span b{font-weight:600}

/* ---------- Dark panel row (software) ---------- */
.split--panel{background:var(--color-panel);color:var(--color-panel-ink)}
.split--panel .split__text p{color:oklch(78% 0.015 260)}
.split--panel .split__text p strong{color:var(--color-panel-ink)}
.split--panel .eyebrow{color:var(--color-accent)}
.split--panel .chip{border-color:var(--color-panel-ink);color:var(--color-panel-ink)}
.split--panel .chip:hover{background:var(--color-panel-ink);color:var(--color-panel)}
.split--panel .kit li{border-color:oklch(34% 0.03 262)}

/* ---------- Spec table ---------- */
.spec{width:100%;border-collapse:collapse;font-size:.95rem}
.spec th,.spec td{text-align:left;padding:.55rem .75rem;border-bottom:1px solid var(--color-line);vertical-align:top}
.spec th{font-weight:600;white-space:nowrap;color:var(--color-ink);width:34%}
.spec td{color:var(--color-ink-soft)}

/* ---------- Price band ---------- */
.band{
  padding:var(--space-xl) var(--gutter);
  background:var(--color-paper-warm);
  border-top:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:center;
}
.band__price{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,5.5vw,3.8rem);letter-spacing:-.02em}
.band__price small{display:block;font-family:var(--font-body);font-weight:400;font-size:1rem;color:var(--color-ink-soft);letter-spacing:0}
.band ul{list-style:none;padding:0;margin:0 0 var(--space-m)}
.band ul li{padding:.3rem 0;color:var(--color-ink-soft)}
.band ul li b{color:var(--color-ink);font-weight:600}

/* ---------- FAQ ---------- */
.faq{padding:var(--space-2xl) var(--gutter);max-width:72ch}
.faq h2{margin-bottom:var(--space-l)}
.faq details{border-bottom:1px solid var(--color-line);padding:var(--space-s) 0}
.faq summary{font-weight:600;cursor:pointer;padding:.4rem 0;font-size:1.02rem}
.faq summary:hover{color:var(--color-accent-deep)}
.faq summary:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.faq details p{color:var(--color-ink-soft);padding:.5rem 0 .75rem;max-width:var(--measure)}

/* ---------- Footer · Ft2 stacked ---------- */
.foot{
  padding:var(--space-l) var(--gutter);
  font-size:.9rem;color:var(--color-ink-soft);
  border-top:1px solid var(--color-line);
  display:flex;flex-direction:column;gap:.4rem;
}
.foot a{color:var(--color-ink);text-decoration:none}
.foot a:hover,.foot a:focus-visible{color:var(--color-accent-deep);text-decoration:underline;text-underline-offset:3px}

/* ---------- Reveal: cross-fade halves ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
  .reveal.is-in{opacity:1;transform:none}
  .split__media.reveal{transition-delay:.12s}
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .split,.band{grid-template-columns:1fr;padding-block:var(--space-xl)}
  .split--flip .split__text{order:1;justify-self:start}
  .split--flip .split__media{order:2}
  .masthead__links{gap:var(--space-s) var(--space-m)}
}