/* ==========================================================================
   Diamond Data PRO — design system
   Navy structural / slate-navy body / cream light / gold accent
   Barlow display · DM Sans body
   ========================================================================== */

:root{
  /* structural navy — header, footer, high-contrast moments only */
  --navy:        #071D2A;
  /* body navy — large dark page areas, keeps the page off near-black */
  --slate:       #102C3B;
  --slate-2:     #16394C;
  --cream:       #F6F1E8;
  --cream-2:     #FBF8F2;
  --gold:        #D8B77F;
  --gold-deep:   #B9975F;
  --insight:     #4FA3FF;
  --success:     #39C16C;

  --ink:         #0B1620;
  --ink-2:       #40525F;
  --ink-3:       #6B7B87;
  --on-dark:     #E9EEF2;
  --on-dark-2:   #9FB2C0;
  --on-dark-3:   #6F8492;

  --hair-dark:   rgba(216,183,127,.18);
  --hair-light:  rgba(7,29,42,.11);

  --gut:  clamp(20px, 5vw, 80px);
  --max:  1240px;
  --nav-h: 76px;

  --r-card: 16px;
  --r-btn:  12px;

  --f-display: Barlow, "DM Sans", system-ui, sans-serif;
  --f-body:    "DM Sans", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px) }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

img,svg,video{ max-width:100%; display:block; height:auto }
a{ color:inherit }

h1,h2,h3,h4,h5{
  font-family:var(--f-display); font-weight:700; line-height:.99;
  letter-spacing:-.01em; margin:0; text-wrap:balance;
}

.num{ font-variant-numeric:tabular-nums lining-nums }

/* ---------- layout ---------------------------------------------------- */
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gut) }
.wrap-narrow{ max-width:860px; margin-inline:auto; padding-inline:var(--gut) }
.sec{ padding-block:clamp(68px,10vw,140px) }
.sec-tight{ padding-block:clamp(52px,7vw,96px) }

/* ---------- surfaces -------------------------------------------------- */
.s-navy  { background:var(--navy);   color:var(--on-dark) }
.s-slate { background:var(--slate);  color:var(--on-dark) }
.s-cream { background:var(--cream);  color:var(--ink) }
.s-white { background:var(--cream-2);color:var(--ink) }
.s-navy h1,.s-navy h2,.s-navy h3,.s-navy h4,
.s-slate h1,.s-slate h2,.s-slate h3,.s-slate h4{ color:#fff }

/* hairline divider between stacked dark sections */
.s-slate + .s-slate{ border-top:1px solid rgba(255,255,255,.06) }

/* ---------- type utilities -------------------------------------------- */
.eyebrow{
  font-family:var(--f-body); font-size:12.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 18px;
}
.s-navy .eyebrow,.s-slate .eyebrow{ color:var(--gold) }

.h-xl{ font-size:clamp(34px,5.1vw,64px); text-transform:uppercase; letter-spacing:-.005em }
.h-lg{ font-size:clamp(28px,4.1vw,50px); text-transform:uppercase; letter-spacing:-.005em }
.h-md{ font-size:clamp(23px,2.9vw,34px) }
.h-sm{ font-size:clamp(19px,2.1vw,23px) }

.lede{ font-size:clamp(17px,1.9vw,20.5px); color:var(--ink-2); max-width:64ch; margin:0 }
.s-navy .lede,.s-slate .lede{ color:var(--on-dark-2) }
.small{ font-size:14.5px; color:var(--ink-3) }
.s-navy .small,.s-slate .small{ color:var(--on-dark-3) }

.gi{ color:var(--gold-deep); font-style:italic; font-weight:500 }
.s-navy .gi,.s-slate .gi{ color:var(--gold) }

.shead{ max-width:820px; margin-bottom:clamp(38px,5vw,64px) }
.shead .lede{ margin-top:18px }

/* ---------- buttons --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-body); font-size:13.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  padding:15px 26px; border-radius:var(--r-btn);
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }
.btn:hover{ transform:translateY(-2px) }
@media (prefers-reduced-motion:reduce){ .btn:hover{ transform:none } }

.btn-gold{ background:var(--gold); color:var(--navy) }
.btn-gold:hover{ background:#E6CB99 }
.btn-navy{ background:var(--navy); color:#fff }
.btn-navy:hover{ background:var(--slate) }
.btn-line{ border-color:var(--hair-dark); color:var(--on-dark) }
.btn-line:hover{ border-color:var(--gold); color:var(--gold) }
.btn-line-dark{ border-color:var(--hair-light); color:var(--ink) }
.btn-line-dark:hover{ border-color:var(--navy) }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px }

/* ---------- gold ticker strip ----------------------------------------- */
.strip{
  background:var(--gold); color:var(--navy);
  font-size:11.5px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; text-align:center; padding:9px var(--gut);
}
.strip i{ font-style:normal; opacity:.55; margin-inline:7px }

/* ---------- header ---------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:60; background:var(--navy);
  border-bottom:1px solid var(--hair-dark);
}
.nav{ display:flex; align-items:center; gap:28px; height:var(--nav-h) }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto }
.brand img{ width:30px }
.brand b{
  font-family:var(--f-display); font-weight:700; font-size:19px;
  color:#fff; letter-spacing:-.01em; white-space:nowrap;
}
.brand b span{ font-weight:800; color:var(--gold); letter-spacing:.02em }

.nav-links{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0 }
.nav-links a{
  font-size:14.5px; font-weight:500; color:var(--on-dark-2);
  text-decoration:none; transition:color .18s ease;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--gold) }
.nav .btn{ padding:11px 19px; font-size:12.5px }

.burger{
  display:none; background:none; border:1px solid var(--hair-dark);
  border-radius:10px; padding:9px 10px; cursor:pointer;
}
.burger span{ display:block; width:19px; height:2px; background:var(--gold); margin:3.5px 0 }

/* Mobile drawer: hidden at every width by default. Only the small-screen
   media query is allowed to reveal it, so it can never leak onto desktop. */
.mobile-nav{
  display:none; background:var(--navy);
  border-top:1px solid var(--hair-dark); padding:10px var(--gut) 26px;
}
.mobile-nav ul{ list-style:none; margin:0; padding:0 }
.mobile-nav a{
  display:block; padding:14px 0; text-decoration:none; color:var(--on-dark);
  font-size:16px; font-weight:500; border-bottom:1px solid rgba(255,255,255,.07);
}
.mobile-nav .btn{ width:100%; margin-top:18px }

@media (max-width:1000px){
  .nav-links{ display:none }
  .burger{ display:block }
  .nav > .btn-gold{ display:none }
  .mobile-nav[data-open="true"]{ display:block }
}

/* ---------- hero ------------------------------------------------------ */
.hero{ padding-block:clamp(56px,8vw,104px) clamp(48px,7vw,88px); overflow:hidden }
.hero-grid{
  display:grid; grid-template-columns:1.04fr .96fr;
  gap:clamp(30px,5vw,68px); align-items:center;
}
.hero h1{ font-size:clamp(32px,4.7vw,58px); font-weight:800;
  text-transform:uppercase; letter-spacing:-.005em }
.hero h1 em{ font-style:normal; color:var(--gold) }
.hero h1 span{ display:block }
.hero .lede{ margin:24px 0 32px }
@media (max-width:880px){ .hero-grid{ grid-template-columns:1fr } }

.metrics{
  margin-top:32px; padding-top:24px; border-top:1px solid var(--hair-dark);
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,44px);
}
.metrics div{ font-size:13px; color:var(--on-dark-3); line-height:1.45 }
.metrics b{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:26px; color:var(--gold); letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

/* ---------- device frames --------------------------------------------- */
.devices{ display:flex; justify-content:center; gap:clamp(10px,2.2vw,24px); padding-bottom:26px }
.device{
  background:#04121C; padding:9px; border-radius:40px;
  border:1px solid rgba(216,183,127,.24); width:100%; max-width:246px;
}
.device img{ border-radius:32px }
.dev-col.device-up{ transform:translateY(-20px) rotate(-2deg) }
.dev-col.device-dn{ transform:translateY(20px)  rotate(2deg) }
.device-cap{
  text-align:center; font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep); margin-top:13px;
}
.s-navy .device-cap,.s-slate .device-cap{ color:var(--gold) }
@media (max-width:560px){
  .dev-col.device-up,.dev-col.device-dn{ transform:none }
  .devices{ gap:9px }
}
.fig{ display:flex; justify-content:center }
.fig .device{ max-width:280px }

/* ---------- split routing -------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr }
.split > div{ padding:clamp(52px,6.5vw,96px) clamp(24px,4.2vw,64px) }
.split .mark{ width:42px; margin-bottom:24px }
.split h3{ margin-bottom:7px }
.split .q{
  font-family:var(--f-display); font-weight:600; font-size:15px;
  color:var(--gold-deep); margin:0 0 20px;
}
.s-navy .q,.s-slate .q{ color:var(--gold) }
@media (max-width:820px){ .split{ grid-template-columns:1fr } }

/* ---------- lists ----------------------------------------------------- */
.ticks{ list-style:none; margin:0 0 30px; padding:0 }
.ticks li{ position:relative; padding-left:25px; margin-bottom:10px; font-size:15.5px }
.ticks li::before{
  content:""; position:absolute; left:0; top:9px;
  width:9px; height:9px; border-radius:2px; background:var(--gold);
}

/* ---------- combinatorics ladder ------------------------------------- */
.ladder{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--hair-light);
}
.s-navy .ladder,.s-slate .ladder{ border-color:var(--hair-dark) }
.ladder div{ padding:24px 12px 0; border-right:1px solid var(--hair-light) }
.s-navy .ladder div,.s-slate .ladder div{ border-color:var(--hair-dark) }
.ladder div:last-child{ border-right:0 }
.ladder b{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:clamp(16px,1.9vw,26px); letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.s-navy .ladder b,.s-slate .ladder b{ color:#fff }
.ladder div:last-child b{ color:var(--gold-deep) }
.s-navy .ladder div:last-child b,.s-slate .ladder div:last-child b{ color:var(--gold) }
.ladder span{ display:block; font-size:11.5px; color:var(--ink-3); margin-top:6px; line-height:1.4 }
.s-navy .ladder span,.s-slate .ladder span{ color:var(--on-dark-3) }
@media (max-width:760px){
  .ladder{ grid-template-columns:repeat(2,1fr) }
  .ladder div{ border-bottom:1px solid var(--hair-light); padding-bottom:16px }
}

/* ---------- spec strip ----------------------------------------------- */
.specs{
  text-align:center; border-block:1px solid var(--hair-light);
  padding:20px var(--gut); margin-top:44px;
  font-size:12.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold-deep);
}
.s-navy .specs,.s-slate .specs{ border-color:var(--hair-dark); color:var(--gold) }
.specs i{ font-style:normal; opacity:.45; margin-inline:9px }

/* ---------- feature rows --------------------------------------------- */
.frow{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,5.5vw,80px); align-items:center;
}
.frow + .frow{ margin-top:clamp(52px,7.5vw,104px) }
.frow.rev > .fig{ order:-1 }
@media (max-width:860px){
  .frow{ grid-template-columns:1fr }
  .frow.rev > .fig{ order:0 }
}

.callout{ border-left:3px solid var(--gold); padding:5px 0 5px 20px; margin:26px 0 }
.callout b{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:clamp(28px,4vw,44px); letter-spacing:-.02em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.s-navy .callout b,.s-slate .callout b{ color:var(--gold) }
.callout span{ font-size:14.5px; color:var(--ink-2) }
.s-navy .callout span,.s-slate .callout span{ color:var(--on-dark-2) }

/* ---------- cards ----------------------------------------------------- */
.cards{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(236px,1fr)) }
.card{
  background:var(--cream-2); border:1px solid var(--hair-light);
  border-radius:var(--r-card); padding:28px 24px;
}
.s-navy .card,.s-slate .card{
  background:rgba(255,255,255,.035); border-color:var(--hair-dark);
}
.card .n{
  display:block; font-family:var(--f-display); font-weight:700; font-size:12.5px;
  letter-spacing:.1em; color:var(--gold-deep); margin-bottom:12px;
}
.s-navy .card .n,.s-slate .card .n{ color:var(--gold) }
.card h4{ font-size:19.5px; margin-bottom:8px }
.card p{ margin:0; font-size:15px; color:var(--ink-2) }
.s-navy .card p,.s-slate .card p{ color:var(--on-dark-2) }

/* ---------- comparison table ----------------------------------------- */
.vs{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--hair-dark); border-radius:var(--r-card); overflow:hidden }
.vs > div{ padding:clamp(26px,3.4vw,40px) }
.vs > div:first-child{ border-right:1px solid var(--hair-dark) }
.vs h4{ font-size:19px; margin-bottom:14px }
.vs .tag{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}
.vs ul{ list-style:none; margin:0; padding:0 }
.vs li{ font-size:15px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.06) }
.vs li:last-child{ border-bottom:0 }
@media (max-width:760px){
  .vs{ grid-template-columns:1fr }
  .vs > div:first-child{ border-right:0; border-bottom:1px solid var(--hair-dark) }
}

/* ---------- process / cycle ------------------------------------------ */
.cycle{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) }
.step{
  border-top:2px solid var(--gold); padding-top:18px;
}
.step .n{
  font-family:var(--f-display); font-weight:700; font-size:12.5px;
  letter-spacing:.1em; color:var(--gold-deep); display:block; margin-bottom:9px;
}
.s-navy .step .n,.s-slate .step .n{ color:var(--gold) }
.step h4{ font-size:18px; margin-bottom:7px }
.step p{ margin:0; font-size:14.5px; color:var(--ink-2) }
.s-navy .step p,.s-slate .step p{ color:var(--on-dark-2) }

/* ---------- pricing --------------------------------------------------- */
.plans{ display:grid; gap:20px; grid-template-columns:repeat(3,1fr); align-items:start }
.plan{
  background:rgba(255,255,255,.04); border:1px solid var(--hair-dark);
  border-radius:var(--r-card); padding:32px 28px;
}
.plan.feat{ background:var(--cream); color:var(--ink); border-color:var(--gold) }
.plan .tag{
  display:block; font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
.plan.feat .tag{ color:var(--gold-deep) }
.plan h3{ font-size:22px; color:#fff; margin-bottom:6px }
.plan.feat h3{ color:var(--navy) }
.plan .sub{ font-size:14px; color:var(--on-dark-2); margin:0 0 22px; min-height:44px }
.plan.feat .sub{ color:var(--ink-2) }
.was{ font-size:13.5px; color:var(--on-dark-3); text-decoration:line-through }
.plan.feat .was{ color:var(--ink-3) }
.now{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(36px,4.4vw,50px); line-height:1; color:var(--gold);
  font-variant-numeric:tabular-nums; margin:3px 0 2px;
}
.plan.feat .now{ color:var(--navy) }
.per{ font-size:13px; color:var(--on-dark-2) }
.plan.feat .per{ color:var(--ink-2) }
.yr{
  font-size:13.5px; margin-top:13px; padding-top:13px;
  border-top:1px solid var(--hair-dark); color:var(--on-dark-2);
}
.plan.feat .yr{ border-color:var(--hair-light); color:var(--ink-2) }
.yr b{ color:#fff; font-variant-numeric:tabular-nums }
.plan.feat .yr b{ color:var(--navy) }
.lock{
  display:inline-flex; align-items:center; gap:6px; margin-top:20px;
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--hair-dark); border-radius:999px; padding:6px 12px;
}
.plan.feat .lock{ color:var(--gold-deep); border-color:rgba(7,29,42,.16) }
.plan .btn{ width:100%; margin-top:22px }
@media (max-width:880px){ .plans{ grid-template-columns:1fr } }

/* ---------- FAQ ------------------------------------------------------- */
.faq{ border-top:1px solid var(--hair-light) }
.s-navy .faq,.s-slate .faq{ border-color:var(--hair-dark) }
.faq details{ border-bottom:1px solid var(--hair-light) }
.s-navy .faq details,.s-slate .faq details{ border-color:var(--hair-dark) }
.faq summary{
  cursor:pointer; padding:20px 34px 20px 0; position:relative;
  font-family:var(--f-display); font-weight:700; font-size:18px; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; position:absolute; right:4px; top:17px;
  font-size:22px; color:var(--gold); font-weight:400;
}
.faq details[open] summary::after{ content:"–" }
.faq p{ margin:0 0 20px; font-size:15.5px; color:var(--ink-2); max-width:74ch }
.s-navy .faq p,.s-slate .faq p{ color:var(--on-dark-2) }

/* ---------- posts ----------------------------------------------------- */
.posts{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.post-card{
  background:var(--cream-2); border:1px solid var(--hair-light);
  border-radius:var(--r-card); padding:26px; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:10px;
  transition:border-color .18s ease, transform .18s ease;
}
.post-card:hover{ border-color:var(--gold); transform:translateY(-3px) }
.post-card .meta{ font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-deep); font-weight:700 }
.post-card h3{ font-size:21px }
.post-card p{ margin:0; font-size:15px; color:var(--ink-2) }

.prose{ max-width:72ch }
.prose h2{ font-size:clamp(24px,3vw,34px); margin:44px 0 14px; text-transform:none }
.prose h3{ font-size:21px; margin:32px 0 10px }
.prose p{ margin:0 0 18px }
.prose ul,.prose ol{ margin:0 0 20px; padding-left:22px }
.prose li{ margin-bottom:8px }
.prose blockquote{
  margin:26px 0; padding:4px 0 4px 22px; border-left:3px solid var(--gold);
  font-size:19px; font-style:italic; color:var(--ink-2);
}

/* ---------- contact form --------------------------------------------- */
.field{ margin-bottom:18px }
.field label{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold); margin-bottom:8px;
}
.field input,.field textarea,.field select{
  width:100%; background:rgba(255,255,255,.05); color:#fff;
  border:1px solid var(--hair-dark); border-radius:var(--r-btn);
  padding:14px 16px; font-family:var(--f-body); font-size:16px;
}
.field textarea{ min-height:150px; resize:vertical }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--gold);
}

/* ---------- footer ---------------------------------------------------- */
.site-foot{ background:var(--navy); border-top:1px solid var(--hair-dark); padding:54px 0 36px }
.foot-grid{ display:flex; flex-wrap:wrap; gap:38px; justify-content:space-between }
.foot-col h5{
  font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold); margin:0 0 13px;
}
.foot-col a{ display:block; font-size:14.5px; color:var(--on-dark-2); text-decoration:none; margin-bottom:9px }
.foot-col a:hover{ color:var(--gold) }
.socials{ display:flex; gap:9px; margin-top:16px }
.socials a{
  width:34px; height:34px; border-radius:9px; border:1px solid var(--hair-dark);
  display:grid; place-items:center; color:var(--on-dark-2);
  font-size:13px; font-weight:700; text-decoration:none; margin:0;
}
.socials a:hover{ border-color:var(--gold); color:var(--gold) }
.foot-bot{
  margin-top:42px; padding-top:22px; border-top:1px solid var(--hair-dark);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:12.5px; color:var(--on-dark-3);
}
.stores{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px }
.stores a{
  border:1px solid var(--hair-dark); border-radius:10px; padding:9px 14px;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--on-dark); text-decoration:none; margin:0;
}
.stores a:hover{ border-color:var(--gold); color:var(--gold) }

/* ---------- skip link ------------------------------------------------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--navy); padding:12px 18px;
  font-weight:700; border-radius:0 0 10px 0;
}
.skip:focus{ left:0 }

/* ---------- reveal (fails visible) ----------------------------------- */
.rv{ opacity:1; transform:none }
.js-rv .rv{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease }
.js-rv .rv.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .js-rv .rv{ opacity:1; transform:none; transition:none }
}

/* ---------- print ----------------------------------------------------- */
@media print{
  .site-head,.site-foot,.strip{ display:none }
  body{ background:#fff; color:#000 }
}