/* Hegemonic Growth — design system.

   Two rules drove this rewrite.

   1. It must not read as Meridian. Meridian is a merchant bank: near-black
      canvas, gold, serif display. Sharing that palette made two separate
      businesses look like one company, which is the opposite of what the brand
      separation exists to do. Hegemonic builds operating systems, so it should
      read as precision engineering — light, spacious, structural, system type,
      one restrained accent that is emphatically not gold.

   2. Apple's design principles applied properly rather than decoratively:
      optically-sized type with size-specific tracking; translucent chrome that
      content scrolls beneath; feedback on pointer-down rather than release;
      motion that is short, interruptible and compositor-only; and independent
      responses to reduced-motion, reduced-transparency and increased-contrast.

   No external fonts, no CDN, no trackers. */

:root{
  color-scheme: light dark;

  --canvas:#fbfbfd;
  --canvas-2:#f4f5f9;
  --panel:#ffffff;
  --ink:#16181d;
  --text:#33363e;
  --muted:#5f636e;
  --dim:#8b909c;
  --line:#e4e6ed;
  --line-2:#d2d6e0;

  /* one accent, deliberately cool — the counterweight to Meridian's gold */
  --accent:#2247d8;
  --accent-hi:#3a5ff0;
  --accent-soft:rgba(34,71,216,.08);

  --max:1120px;

  /* a spacing scale, so nothing is nudged by eye */
  --s1:.5rem; --s2:.875rem; --s3:1.375rem; --s4:2rem;
  --s5:3rem;  --s6:4.5rem;

  --radius:14px;
  --radius-sm:9px;

  /* Apple's own stack first: it carries optical sizing and legibility tuning */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,
         Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  /* critically damped: reaches the target without overshoot, and short enough
     that a user can interrupt it without ever feeling locked out */
  --spring:cubic-bezier(.32,.72,0,1);
  --t-fast:140ms;
  --t-base:280ms;
}

@media (prefers-color-scheme: dark){
  :root{
    --canvas:#0e1013; --canvas-2:#14171c; --panel:#171a20;
    --ink:#f2f3f6; --text:#c8ccd6; --muted:#969ba8; --dim:#6d7280;
    --line:#242830; --line-2:#31363f;
    --accent:#7d95ff; --accent-hi:#98abff; --accent-soft:rgba(125,149,255,.12);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text);
  /* rem-based so the reader's own text-size setting is respected */
  font:400 1.0625rem/1.6 var(--sans);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--accent-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.25rem,4vw,2rem)}

/* ---------- type scale ----------------------------------------------------
   Tracking is size-specific: display text tightens, body sits at zero. Leading
   moves inversely to size. Hierarchy comes from weight + size + leading as a
   set, never from size alone. */

h1{
  margin:0 0 var(--s3);
  font-size:clamp(2.25rem,5.4vw,4.125rem);
  line-height:1.04;letter-spacing:-.028em;font-weight:640;
  color:var(--ink);max-width:17ch;
}
h2{
  margin:0 0 var(--s2);
  font-size:clamp(1.625rem,3vw,2.5rem);
  line-height:1.14;letter-spacing:-.021em;font-weight:620;
  color:var(--ink);max-width:24ch;
}
h3{
  margin:0 0 .5rem;
  font-size:1.0625rem;line-height:1.35;letter-spacing:-.008em;
  font-weight:620;color:var(--ink);
}
p{margin:0 0 var(--s2)}

.eyebrow{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:660;color:var(--accent);margin-bottom:var(--s3);
}
.lede{
  font-size:clamp(1.0625rem,1.8vw,1.3125rem);
  line-height:1.5;letter-spacing:-.008em;
  color:var(--muted);max-width:58ch;margin:0 0 var(--s4);
}
.sub{color:var(--muted);max-width:62ch;margin:0 0 var(--s4)}

/* ---------- chrome --------------------------------------------------------
   Translucent, with the page scrolling underneath. Material weight encodes
   hierarchy: this is structural, so it is the thickest surface on the page. */

.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--canvas) 72%,transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.nav .wrap{display:flex;align-items:center;gap:var(--s4);height:60px}

.brand{
  display:flex;align-items:center;gap:.625rem;text-decoration:none;
  color:var(--ink);font-weight:640;font-size:1.0625rem;letter-spacing:-.015em;
}
.brand img{width:26px;height:26px;border-radius:6px}
.brand span{letter-spacing:-.015em}

.navlinks{margin-left:auto;display:flex;gap:var(--s3);align-items:center}
.navlinks a{
  color:var(--muted);text-decoration:none;
  font-size:.9375rem;font-weight:500;letter-spacing:-.005em;
  transition:color var(--t-fast) var(--spring);
}
.navlinks a:hover{color:var(--ink)}
/* wayfinding — every page states where you are */
.navlinks a[aria-current="page"]{color:var(--ink);font-weight:620}
.navlinks a.cta{
  background:var(--accent);color:#fff;font-weight:590;
  padding:.5rem 1rem;border-radius:var(--radius-sm);
  transition:background var(--t-fast) var(--spring),
             transform var(--t-fast) var(--spring);
}
.navlinks a.cta:hover{background:var(--accent-hi);color:#fff}
.navlinks a.cta:active{transform:scale(.97)}

/* ---------- controls ------------------------------------------------------
   Feedback lands on pointer-down, not release: :active fires immediately, and
   the transform is compositor-only so it cannot drop a frame. */

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.375rem;border-radius:var(--radius-sm);
  text-decoration:none;border:1px solid transparent;
  font-size:.9375rem;font-weight:590;letter-spacing:-.008em;
  transition:background var(--t-fast) var(--spring),
             border-color var(--t-fast) var(--spring),
             color var(--t-fast) var(--spring),
             transform var(--t-fast) var(--spring);
  will-change:transform;
}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hi)}
.btn-ghost{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btns{display:flex;gap:.75rem;flex-wrap:wrap}

/* ---------- layout -------------------------------------------------------- */

.hero{padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,5rem)}
section{padding:clamp(3rem,7vw,5.5rem) 0}
.sec-line{border-top:1px solid var(--line)}

.routes{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.route{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s4);
  transition:border-color var(--t-base) var(--spring),
             transform var(--t-base) var(--spring),
             box-shadow var(--t-base) var(--spring);
  will-change:transform;
}
.route:hover{
  border-color:var(--line-2);transform:translateY(-2px);
  box-shadow:0 12px 32px -12px rgba(20,25,45,.16);
}
.route:active{transform:translateY(0) scale(.995)}
.route .tag{
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:660;color:var(--accent);margin-bottom:.75rem;
}
.route h3{font-size:1.375rem;letter-spacing:-.018em;margin-bottom:.625rem}
.route p{color:var(--muted);font-size:.9375rem;flex:1}
.route .who{
  margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--dim);line-height:1.65;
}
.route .go{margin-top:var(--s3);color:var(--accent);font-weight:590;font-size:.9375rem}

.callout{
  font-size:clamp(1.25rem,2.4vw,1.75rem);
  line-height:1.35;letter-spacing:-.018em;
  color:var(--ink);font-weight:560;max-width:36ch;
  border-left:3px solid var(--accent);padding-left:var(--s3);
}

.grid{display:grid;gap:var(--s3)}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s3);
}
.card .n{
  display:inline-block;margin-bottom:.75rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;
  color:var(--accent);text-transform:lowercase;
}
.card p{color:var(--muted);font-size:.9375rem;margin:0}

.steps{display:grid;gap:0;counter-reset:step}
.step{display:flex;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .num{flex:0 0 2.25rem}
.step .num:before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--mono);font-size:.8125rem;color:var(--accent);font-weight:600;
}
.step p{color:var(--muted);font-size:.9375rem;margin:0;max-width:64ch}

.tiers{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tier{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s4);
  display:flex;flex-direction:column;
}
.tier.feature{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tier .name{font-weight:620;color:var(--ink);letter-spacing:-.01em}
.tier .price{
  margin:.375rem 0 var(--s3);
  font-size:1.375rem;font-weight:640;letter-spacing:-.02em;color:var(--ink);
}
.tier ul{margin:0 0 var(--s3);padding:0;list-style:none;flex:1}
.tier li{
  padding:.4375rem 0 .4375rem 1.375rem;position:relative;
  font-size:.9375rem;color:var(--muted);border-bottom:1px solid var(--line);
}
.tier li:last-child{border-bottom:0}
.tier li:before{
  content:"";position:absolute;left:0;top:1.0625rem;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}

.faq details{border-top:1px solid var(--line);padding:var(--s3) 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;font-weight:590;color:var(--ink);
  letter-spacing:-.01em;display:flex;align-items:center;gap:.75rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{
  content:"+";color:var(--accent);font-weight:600;display:inline-block;
  transition:transform var(--t-base) var(--spring);
}
.faq details[open] summary:before{transform:rotate(45deg)}
.faq details p{margin:.75rem 0 0 1.5rem;color:var(--muted);max-width:66ch;font-size:.9375rem}

.final{text-align:center;max-width:52ch;margin:0 auto}
.final h2{margin-inline:auto}
.final .sub{margin-inline:auto}
.final .btns{justify-content:center}

footer{border-top:1px solid var(--line);padding:var(--s5) 0 var(--s4);background:var(--canvas-2)}
.fgrid{display:flex;flex-wrap:wrap;gap:var(--s5)}
.fgrid .col{min-width:170px}
.fgrid p,.fgrid a{font-size:.9375rem;color:var(--muted);text-decoration:none}
.fgrid a:hover{color:var(--ink)}
.fgrid h4{
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);margin:0 0 .75rem;font-weight:660;
}
.fgrid .col a{display:block;padding:.25rem 0}
.fbot,.legal{
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--dim);
  display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
}

/* ---------- accessibility signals, answered independently ----------------- */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .route:hover,.route:active,.btn:active,.navlinks a.cta:active{transform:none !important}
}

@media (prefers-reduced-transparency: reduce){
  .nav{background:var(--canvas);backdrop-filter:none;-webkit-backdrop-filter:none}
}

@media (prefers-contrast: more){
  :root{--line:#9aa0ad;--line-2:#6f7684;--muted:#3c4049;--dim:#4a4f59}
  .nav{background:var(--canvas);backdrop-filter:none}
  .btn-ghost{border-width:2px}
}

/* The brand and the links must never wrap onto a second line — a two-line
   masthead reads as broken before it reads as responsive. */
.brand,.navlinks a{white-space:nowrap}

@media (max-width:940px){
  .nav .wrap{gap:var(--s3)}
  .navlinks{gap:var(--s3)}
  .navlinks a{font-size:.875rem}
  .navlinks a.cta{display:none}   /* the page ends in the same call to action */
}

@media (max-width:720px){
  .nav .wrap{gap:var(--s2);height:56px}
  .navlinks{gap:var(--s2)}
  .navlinks a{font-size:.8125rem}
  .brand span{font-size:.9375rem}
  h1{max-width:none}
  .fgrid{gap:var(--s4)}
}

@media (max-width:520px){
  /* below this the links cannot fit at a legible size; the home page is the
     wayfinding surface, so keep the brand as the way back and drop the rest */
  .navlinks a:not(.cta){display:none}
  .navlinks a.cta{display:inline-flex;padding:.4375rem .875rem;font-size:.8125rem}
}