/* =========================================================================
   exactmatching.com — global stylesheet
   Design resolution:
     • Amex   → premium base: generous whitespace, refined type, restraint
     • Sixt   → oversized bold headlines, one aggressive accent, confident copy
     • Ahrefs → data-forward sections, functional tables, dense cards
   ========================================================================= */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Space+Mono:wght@400;700&display=swap');

/* ---- Design tokens ---- */
:root{
  /* Palette — subtly-toned neutrals + one aggressive accent */
  --ink:        oklch(0.22 0.012 260);   /* near-black text            */
  --ink-soft:   oklch(0.44 0.010 260);   /* secondary text            */
  --ink-faint:  oklch(0.60 0.008 260);   /* captions / meta           */
  --paper:      oklch(0.985 0.004 250);  /* page background           */
  --paper-2:    oklch(0.965 0.006 250);  /* alt band                  */
  --line:       oklch(0.90 0.006 260);   /* hairlines                 */
  --line-2:     oklch(0.83 0.007 260);   /* stronger borders          */
  --navy:       oklch(0.26 0.028 262);   /* deep trust surface        */
  --navy-2:     oklch(0.21 0.026 262);   /* footer                    */
  --accent:     oklch(0.66 0.205 40);    /* aggressive orange (Sixt)  */
  --accent-ink: oklch(0.99 0.01 60);     /* text on accent            */
  --accent-hi:  oklch(0.72 0.19 42);     /* hover                     */

  --maxw: 1200px;
  --gap: clamp(1rem, 2.4vw, 2rem);

  --ff-display: "Space Grotesk", system-ui, sans-serif;
  --ff-body:    "Instrument Sans", system-ui, sans-serif;
  --ff-mono:    "Space Mono", ui-monospace, monospace;

  --step-hero: clamp(2.6rem, 6.6vw, 5.6rem);
  --step-h1:   clamp(2.2rem, 4.6vw, 3.6rem);
  --step-h2:   clamp(1.7rem, 3vw, 2.5rem);
  --step-h3:   clamp(1.25rem, 1.7vw, 1.5rem);
  --step-lead: clamp(1.1rem, 1.5vw, 1.35rem);
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:700; line-height:1.04; letter-spacing:-0.02em; margin:0; }
p{ margin:0; }
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--accent); }
ul{ margin:0; padding:0; list-style:none; }

/* ---- Layout helpers ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.5rem); }
.section{ padding-block:clamp(3.5rem,7vw,6.5rem); }
.section--tight{ padding-block:clamp(2.5rem,4vw,3.5rem); }
.band-alt{ background:var(--paper-2); border-block:1px solid var(--line); }
.band-navy{ background:var(--navy); color:oklch(0.94 0.01 260); }
.band-navy h1,.band-navy h2,.band-navy h3{ color:oklch(0.98 0.01 260); }

/* eyebrow / mono label (Ahrefs data-label vocabulary) */
.eyebrow{
  font-family:var(--ff-mono);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  display:inline-flex;
  align-items:center;
  gap:0.6ch;
  margin:0 0 1.1rem;
}
.eyebrow::before{ content:""; width:1.6rem; height:1px; background:var(--accent); }
.band-navy .eyebrow{ color:oklch(0.72 0.02 260); }

.lead{ font-size:var(--step-lead); color:var(--ink-soft); line-height:1.5; max-width:60ch; }

/* ---- Buttons (Sixt-style confident block) ---- */
.btn{
  display:inline-flex; align-items:center; gap:0.6ch;
  font-family:var(--ff-display); font-weight:600; font-size:0.98rem;
  letter-spacing:0.01em;
  padding:0.85rem 1.4rem;
  border:1px solid transparent; border-radius:2px;
  white-space:nowrap;
  cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn--accent{ background:var(--accent); color:var(--accent-ink); }
.btn--accent:hover{ background:var(--accent-hi); color:var(--accent-ink); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink); }
.band-navy .btn--ghost{ color:oklch(0.95 0.01 260); border-color:oklch(0.45 0.02 262); }
.band-navy .btn--ghost:hover{ border-color:oklch(0.85 0.01 260); color:#fff; }

/* inquiry address — always plain text, never a link/button */
.inquiry{
  font-family:var(--ff-mono); font-weight:700;
  color:var(--accent); font-size:1.05rem;
  letter-spacing:-0.01em; white-space:nowrap;
}
.band-navy .inquiry{ color:oklch(0.8 0.14 48); }

/* =========================================================================
   Header / nav
   ========================================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:oklch(0.985 0.004 250 / 0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; gap:1.5rem; height:72px; }
.brand{
  font-family:var(--ff-display); font-weight:700; font-size:1.18rem;
  letter-spacing:-0.03em; color:var(--ink); display:flex; align-items:center; gap:0.55ch;
  white-space:nowrap;
}
.brand:hover{ color:var(--ink); }
.brand .dot{ width:9px; height:9px; background:var(--accent); border-radius:1px; }
.nav-links{ display:flex; gap:0.35rem; margin-left:auto; align-items:center; flex-wrap:wrap; }
.nav-links a{
  font-size:0.9rem; font-weight:500; color:var(--ink-soft);
  padding:0.5rem 0.7rem; border-radius:2px; transition:color .15s, background .15s;
}
.nav-links a:hover{ color:var(--ink); background:var(--paper-2); }
.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a[aria-current="page"]::after{
  content:""; display:block; height:2px; background:var(--accent); margin-top:3px;
}
.nav-cta{ margin-left:0.4rem; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero{ padding-block:clamp(3.5rem,8vw,7rem); }
.hero h1{ font-size:var(--step-hero); max-width:16ch; }
.hero .accent-word{ color:var(--accent); }
.hero .lead{ margin-top:1.6rem; font-size:clamp(1.15rem,1.7vw,1.5rem); max-width:52ch; }
.hero-actions{ display:flex; gap:0.8rem; flex-wrap:wrap; margin-top:2.2rem; align-items:center; }
.hero-inquiry-note{ font-size:0.9rem; color:var(--ink-faint); }

/* stat strip (Ahrefs density) */
.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:var(--paper); margin-top:3rem;
}
.stat{ padding:1.4rem 1.5rem; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat .k{ font-family:var(--ff-display); font-weight:700; font-size:1.9rem; letter-spacing:-0.03em; }
.stat .l{ font-family:var(--ff-mono); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:0.3rem; }

/* =========================================================================
   Section heads
   ========================================================================= */
.sec-head{ max-width:64ch; margin-bottom:clamp(2rem,4vw,3.2rem); }
.sec-head h2{ font-size:var(--step-h2); }
.sec-head .lead{ margin-top:1.1rem; }

/* =========================================================================
   Pillar grid (home)
   ========================================================================= */
.pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.pillar{ background:var(--paper); padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; min-height:280px; transition:background .15s; }
.pillar:hover{ background:var(--paper-2); }
.pillar .tag{ font-family:var(--ff-mono); font-size:0.72rem; letter-spacing:0.16em; color:var(--accent); text-transform:uppercase; }
.pillar h3{ font-size:var(--step-h3); margin-top:0.9rem; max-width:20ch; }
.pillar p{ color:var(--ink-soft); margin-top:0.8rem; font-size:0.98rem; }
.pillar .go{ margin-top:auto; padding-top:1.4rem; font-family:var(--ff-display); font-weight:600; font-size:0.92rem; color:var(--ink); display:inline-flex; align-items:center; gap:0.5ch; }
.pillar:hover .go{ color:var(--accent); }
.pillar .go .arw{ transition:transform .15s; }
.pillar:hover .go .arw{ transform:translateX(4px); }

/* =========================================================================
   Content cards / feature grid
   ========================================================================= */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:clamp(1.4rem,2.4vw,2rem);
}
.band-navy .card{ background:oklch(0.30 0.028 262); border-color:oklch(0.36 0.03 262); }
.card .num{ font-family:var(--ff-mono); font-size:0.72rem; color:var(--accent); letter-spacing:0.14em; }
.card h3{ font-size:1.2rem; margin-top:0.7rem; }
.card p{ color:var(--ink-soft); margin-top:0.7rem; font-size:0.97rem; }
.band-navy .card p{ color:oklch(0.8 0.012 260); }

/* definition / query examples list */
.query-list{ display:grid; gap:0.75rem; }
.query-item{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;
  border:1px solid var(--line); border-radius:4px; padding:1rem 1.2rem; background:var(--paper);
}
.query-item .q-mark{ font-family:var(--ff-mono); color:var(--accent); font-weight:700; }
.query-item .q-text{ font-size:1.02rem; }
.query-item .q-text em{ font-style:normal; color:var(--ink-faint); font-family:var(--ff-mono); font-size:0.82rem; display:block; margin-top:0.25rem; letter-spacing:0.04em; }

/* =========================================================================
   Data table (Ahrefs)
   ========================================================================= */
.table-wrap{ border:1px solid var(--line); border-radius:4px; overflow:hidden; overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:0.95rem; min-width:560px; }
table.data th, table.data td{ text-align:left; padding:0.9rem 1.1rem; border-bottom:1px solid var(--line); }
table.data thead th{
  font-family:var(--ff-mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--paper-2); font-weight:700;
}
table.data tbody tr:last-child td{ border-bottom:none; }
table.data tbody tr:hover{ background:var(--paper-2); }
table.data .mono{ font-family:var(--ff-mono); font-size:0.86rem; }

/* pill / status */
.pill{ display:inline-block; font-family:var(--ff-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; padding:0.25rem 0.6rem; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-soft); }
.pill--accent{ color:var(--accent); border-color:var(--accent); }
.pill--live{ color:oklch(0.55 0.14 150); border-color:oklch(0.55 0.14 150); }

/* =========================================================================
   Asset showcase
   ========================================================================= */
.asset-hero{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.asset-domain{ font-family:var(--ff-mono); font-weight:700; color:var(--accent); font-size:clamp(1.1rem,2vw,1.5rem); letter-spacing:-0.02em; }

/* placeholder imagery — striped SVG bg + mono explainer, never hand-drawn art */
.ph{
  position:relative; border:1px solid var(--line-2); border-radius:4px;
  background-color:var(--paper-2);
  background-image:repeating-linear-gradient(135deg, transparent 0 11px, oklch(0.90 0.006 260 / 0.55) 11px 12px);
  display:flex; align-items:center; justify-content:center; min-height:240px; overflow:hidden;
}
.ph span{
  font-family:var(--ff-mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--paper); padding:0.4rem 0.8rem; border:1px solid var(--line); border-radius:2px;
}
.ph--tall{ min-height:360px; }
.ph--wide{ min-height:300px; }

/* =========================================================================
   CTA band
   ========================================================================= */
.cta-band{ text-align:left; }
.cta-band h2{ font-size:var(--step-h1); max-width:18ch; }
.cta-band .lead{ margin-top:1.1rem; }
.cta-row{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:2rem; }
.cta-row .inquiry{ font-size:1.2rem; }

/* =========================================================================
   Footer (Amex restraint)
   ========================================================================= */
.site-footer{ background:var(--navy-2); color:oklch(0.8 0.012 260); }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:2rem; padding-block:clamp(3rem,5vw,4rem); }
.footer-brand{ font-family:var(--ff-display); font-weight:700; color:#fff; font-size:1.2rem; letter-spacing:-0.03em; display:flex; align-items:center; gap:0.55ch; }
.footer-brand .dot{ width:9px; height:9px; background:var(--accent); border-radius:1px; }
.footer-top p{ margin-top:1rem; font-size:0.92rem; color:oklch(0.72 0.012 260); max-width:34ch; }
.footer-col h4{ font-family:var(--ff-mono); font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:oklch(0.68 0.02 262); font-weight:700; margin-bottom:1rem; }
.footer-col ul{ display:grid; gap:0.6rem; }
.footer-col a{ color:oklch(0.82 0.012 260); font-size:0.93rem; }
.footer-col a:hover{ color:#fff; }
.footer-inquiry{ margin-top:1.4rem; font-size:0.92rem; color:oklch(0.72 0.012 260); }
.footer-bottom{
  border-top:1px solid oklch(0.32 0.02 262);
  padding-block:1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:0.82rem; color:oklch(0.6 0.012 260); font-family:var(--ff-mono); letter-spacing:0.03em;
}

/* =========================================================================
   Misc
   ========================================================================= */
.rule{ height:1px; background:var(--line); border:none; margin:0; }
.prose > * + *{ margin-top:1.1rem; }
.prose h3{ font-size:var(--step-h3); margin-top:2rem; }
.note{ font-size:0.9rem; color:var(--ink-faint); }
.escrow-note{
  border-left:3px solid var(--accent); padding:1rem 1.3rem; background:var(--paper-2);
  border-radius:0 4px 4px 0; font-size:0.97rem; color:var(--ink-soft);
}
.escrow-note strong{ color:var(--ink); }
.breadcrumb{ font-family:var(--ff-mono); font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1.4rem; display:flex; gap:0.6ch; flex-wrap:wrap; }
.breadcrumb a{ color:var(--ink-faint); }
.breadcrumb a:hover{ color:var(--accent); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px){
  .stat-strip{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:none; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line); }
  .pillars{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .asset-hero{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .nav{ height:auto; padding-block:0.8rem; flex-wrap:wrap; gap:0.5rem 1rem; }
  .nav-links{ width:100%; margin-left:0; justify-content:flex-start; gap:0.1rem; }
  .nav-cta{ display:none; }
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:1.6rem; }
  .stat-strip{ grid-template-columns:1fr 1fr; }
}