/* ==========================================================================
   Adperva design system
   Violet-grounded editorial. Deep violet carries brand moments (hero, proof,
   CTA); paper carries reading. Magenta is the single accent and never appears
   as a large field.
   Radius: 14px on surfaces, 10px on controls. One scale, no pills.
   ========================================================================== */

:root{
  /* Brand */
  --violet-900:#170A3D;
  --violet-800:#241058;
  --violet-700:#3A1D8A;
  --violet-500:#7B4DFF;
  --violet-300:#A797E8;
  --accent:#FF3D8B;
  --accent-deep:#E02C76;
  --grad:linear-gradient(90deg,#7B4DFF,#FF3D8B);

  /* Neutrals, biased cool-violet so they sit with the brand */
  --background:#FBFAFD;
  --surface:#FFFFFF;
  --sunk:#F3F1F8;
  --text:#140F26;
  --text-muted:#4E4863;
  --faint:#7A7490;
  --border:#E4E1EE;

  /* On-violet */
  --on-violet:#F4F1FC;
  --on-violet-dim:#B6ACD9;
  --violet-line:#3B2A72;

  --focus:var(--accent);

  --font:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --r:14px;
  --r-sm:10px;
  --gutter:20px;
  --max:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --background:#0F0B1C;
    --surface:#171128;
    --sunk:#1B1433;
    --text:#F2EFFA;
    --text-muted:#B3ABCC;
    --faint:#8A82A6;
    --border:#2A2145;
    --violet-700:#4A27AE;
    --violet-800:#1B0E45;
    --violet-900:#120828;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --background:#0F0B1C; --surface:#171128; --sunk:#1B1433;
  --text:#F2EFFA; --text-muted:#B3ABCC; --faint:#8A82A6; --border:#2A2145;
  --violet-700:#4A27AE; --violet-800:#1B0E45; --violet-900:#120828;
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--background);color:var(--text);
  font-family:var(--font);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.08;letter-spacing:-0.035em;text-wrap:balance;font-weight:600}
h1{font-size:clamp(2.2rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.6rem)}
h3{font-size:clamp(1.1rem,1.9vw,1.32rem);letter-spacing:-0.022em}
p{margin:0 0 1rem;color:var(--text-muted)}
ul,ol{margin:0 0 1rem;padding-left:1.15rem}
li{margin-bottom:.45rem;color:var(--text-muted)}
strong{color:var(--text);font-weight:600}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section--sunk{background:var(--sunk)}
.section--violet{background:var(--violet-800);color:var(--on-violet)}
.section--violet h2,.section--violet h3{color:var(--on-violet)}
.section--violet p,.section--violet li{color:var(--on-violet-dim)}
.lede{font-size:clamp(1.03rem,1.8vw,1.17rem);max-width:62ch;color:var(--text-muted)}
.section--violet .lede{color:var(--on-violet-dim)}
.eyebrow{
  font-family:var(--mono);font-size:.73rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.9rem;font-weight:500;
}
.hero .eyebrow{color:var(--violet-300)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.3rem;border-radius:var(--r-sm);
  font-size:.96rem;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease);
}
.btn--sm{padding:.6rem 1rem;font-size:.9rem}
.btn--lg{padding:.95rem 1.6rem;font-size:1rem}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--primary{
  background:var(--grad);color:#fff;background-size:160% 100%;background-position:0 0;
  transition:transform .18s var(--ease),background-position .4s var(--ease);
}
.btn--primary:hover{background-position:100% 0}
.btn--line{background:transparent;color:var(--text);border-color:var(--border)}
.btn--line:hover{border-color:var(--faint)}
.section--violet .btn--line,.hero .btn--line{color:var(--on-violet);border-color:var(--violet-line)}
.section--violet .btn--line:hover,.hero .btn--line:hover{border-color:var(--violet-300)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--background) 86%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--text)}
.brand svg{flex:none}
.brand span{font-weight:600;font-size:1.2rem;letter-spacing:-0.04em}
.nav-links{display:none;gap:1.5rem;list-style:none;margin:0;padding:0}
.nav-links li{margin:0}
.nav-links a{text-decoration:none;font-size:.93rem;color:var(--text-muted);font-weight:500;white-space:nowrap;transition:color .15s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-cta{display:none}
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:11px;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .2s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;border-top:1px solid var(--border);padding-block:.5rem 1.5rem}
.mobile-menu.open{display:block}
.mobile-menu ul{list-style:none;margin:0 0 1rem;padding:0}
.mobile-menu li{margin:0;border-bottom:1px solid var(--border)}
.mobile-menu a{display:block;padding:1rem 0;text-decoration:none;font-weight:500;font-size:1.05rem}
@media(min-width:1000px){
  .nav-links,.nav-cta{display:flex}
  .nav-toggle{display:none}
  .mobile-menu{display:none!important}
}

/* ---------- hero ---------- */
.hero{
  background:var(--violet-800);color:var(--on-violet);
  padding-block:clamp(2.75rem,5vw,4.5rem) clamp(3.5rem,7vw,6rem);
  position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-20%;top:-35%;width:72%;aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(123,77,255,.42),transparent 64%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:920px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:3.5rem}}
/* Capped so the second line holds on one row in the narrower hero column.
   A three-line hero headline is a font-size error, not a copy-length error. */
.hero h1{color:#fff;font-size:clamp(2rem,3.6vw,2.95rem)}
.hero p{color:var(--on-violet-dim);font-size:clamp(1.02rem,1.8vw,1.18rem);max-width:44ch;margin-bottom:1.9rem}

/* hero visual: Adperva's own graphic language, not a product screenshot */
.hero-fig{position:relative;min-height:300px;display:grid;place-items:center}
.hv{position:relative;width:min(400px,100%);aspect-ratio:1/.92}
.hv__glow{
  position:absolute;inset:8% 6%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,61,139,.26),transparent 62%);filter:blur(22px);
}
.hv__panel{
  position:absolute;border-radius:var(--r);
  background:rgba(23,14,56,.72);border:1px solid rgba(167,151,232,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(8,4,24,.45);
}
.hv__panel--main{left:0;right:14%;top:12%;padding:1.1rem 1.2rem 1.2rem}
.hv__k{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-300)}
.hv__v{display:block;font-size:.88rem;font-weight:600;color:#fff;margin-top:.2rem}
.hv__v--win{color:#7BE8B4}
.hv__v--down{color:#7BE8B4}
.hv__big{
  font-size:2.5rem;font-weight:600;letter-spacing:-0.045em;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1.05;margin:.25rem 0 .5rem;
}
.hv__chart{width:100%;height:76px;display:block}
.hv__split{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.85rem;padding-top:.85rem;border-top:1px solid rgba(167,151,232,.18)}
.hv__panel--a{right:0;top:0;padding:.7rem .9rem;min-width:150px}
.hv__panel--b{left:8%;bottom:0;padding:.7rem .9rem;min-width:170px}

@media (prefers-reduced-motion: no-preference){
  /* Motivated motion: the line draws once to say "this is performance over
     time", the cards drift to make the composition feel live rather than flat.
     Nothing loops fast enough to pull attention off the headline. */
  .hv__line{stroke-dasharray:420;stroke-dashoffset:420;animation:hv-draw 1.6s var(--ease) .35s forwards}
  .hv__area{opacity:0;animation:hv-fade .9s ease 1.5s forwards}
  .hv__float{animation:hv-drift 7s ease-in-out infinite}
  .hv__float--slow{animation-duration:9s;animation-delay:-3s}
}
@keyframes hv-draw{to{stroke-dashoffset:0}}
@keyframes hv-fade{to{opacity:1}}
@keyframes hv-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.page-head{background:var(--violet-800);color:var(--on-violet);padding-block:clamp(2.75rem,6vw,4.5rem)}
.page-head h1{color:#fff}
.page-head p{color:var(--on-violet-dim);max-width:60ch;margin-bottom:0}
.page-head--case h1{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.case-hero__metric{
  font-size:clamp(2.2rem,5vw,3.4rem);font-weight:600;color:#fff;
  letter-spacing:-0.045em;font-variant-numeric:tabular-nums;margin:.75rem 0 .35rem;
}
.case-hero__metric span{display:block;font-size:.9rem;font-weight:500;letter-spacing:.01em;color:var(--violet-300);font-family:var(--mono)}

/* ---------- stat strip ---------- */
.stats{border-bottom:1px solid var(--border);background:var(--surface)}
.stats--card{border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem 1rem;padding-block:2.1rem;margin:0}
@media(min-width:760px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.stat dd{margin:.3rem 0 0;font-size:clamp(1.35rem,2.6vw,1.85rem);font-weight:600;letter-spacing:-0.04em;font-variant-numeric:tabular-nums;color:var(--text)}
.stats-note{font-size:.86rem;color:var(--faint);max-width:70ch;padding-bottom:2rem;margin:0}

/* ---------- industry band ---------- */
.band__head{max-width:56ch;margin-bottom:1.75rem}
.pills{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0 0 .9rem}
.pills li{
  margin:0;padding:.5rem 1rem;border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:.92rem;color:var(--text);background:var(--surface);
}
.pills--plain li{background:transparent;color:var(--faint);font-family:var(--mono);font-size:.82rem;letter-spacing:.04em}

/* ---------- comparison ---------- */
.compare{
  display:grid;gap:1rem;margin-block:2.25rem;align-items:stretch;
  grid-template-columns:1fr;
}
@media(min-width:820px){.compare{grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center}}
.compare__col{border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;background:var(--surface)}
.compare__col h3{margin-bottom:.9rem;font-size:.78rem;font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:500}
.compare__col ul{list-style:none;padding:0;margin:0}
.compare__col li{padding:.5rem 0;border-bottom:1px solid var(--border);font-size:1.02rem}
.compare__col li:last-child{border-bottom:0}
.compare__col--old li{color:var(--faint);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--faint) 80%,transparent)}
.compare__col--new{border-color:color-mix(in srgb,var(--accent) 38%,var(--border))}
.compare__col--new li{color:var(--text);font-weight:500}
.compare__arrow{display:grid;place-items:center;color:var(--accent)}
.compare__arrow svg{width:48px;height:24px}
@media(max-width:819px){.compare__arrow svg{transform:rotate(90deg)}}

.problem-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:720px){.problem-grid{grid-template-columns:repeat(2,1fr);gap:1.75rem 2.5rem}}
.problem-grid h3{margin-bottom:.35rem}
.problem-grid p{margin:0;font-size:.97rem}

/* ---------- service bento ---------- */
.tier{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin:2.5rem 0 1rem;
}
.tier--lg{font-size:.8rem;margin-top:3rem}
.bento{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:720px){.bento{grid-template-columns:repeat(2,1fr)}}
/* Five cells over three columns: 2+1 then 1+1. Spans total exactly 6 on the
   first two rows, so no cell is ever left orphaned. */
@media(min-width:1000px){
  .bento{grid-template-columns:repeat(3,1fr)}
  .bento > :first-child{grid-column:span 2}
  .bento--four{grid-template-columns:repeat(4,1fr)}
  .bento--four > :first-child{grid-column:span 1}
}
.cell{
  border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;
  background:var(--surface);display:flex;flex-direction:column;
  min-width:0;transition:border-color .18s var(--ease),transform .18s var(--ease);
  text-decoration:none;
}
.cell:hover{border-color:var(--violet-300);transform:translateY(-3px)}
.cell h3{margin-bottom:.4rem;color:var(--text)}
.cell p{margin-bottom:0;font-size:.96rem}
.svc-outcome{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;
  color:var(--faint);margin-top:.75rem!important;
}
.cell__go{margin-top:auto;padding-top:1.1rem;color:var(--accent);font-weight:600;font-size:.92rem}
.cell--violet{
  background:linear-gradient(150deg,var(--violet-800),var(--violet-700) 85%);
  border-color:var(--violet-700);color:var(--on-violet);
}
.cell--violet h3{color:#fff}
.cell--violet p,.cell--violet li{color:var(--on-violet-dim)}
.cell--violet .svc-outcome{color:var(--violet-300)}
.cell--violet .cell__go{color:#fff}

/* ---------- case cards ---------- */
.proof{display:grid;gap:16px}
@media(min-width:880px){
  .proof{grid-template-columns:repeat(3,1fr);align-items:start}
  .proof > :nth-child(2){margin-top:2.5rem}
  .proof > :nth-child(3){margin-top:5rem}
}
.case{
  display:flex;flex-direction:column;text-decoration:none;border-radius:var(--r);
  border:1px solid var(--violet-line);background:var(--violet-700);
  padding:1.6rem;color:var(--on-violet);min-width:0;
  transition:transform .2s var(--ease),border-color .2s var(--ease);
}
.case:hover{transform:translateY(-5px);border-color:var(--accent)}
.case__tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--violet-300)}
.case__metric{
  font-size:clamp(1.9rem,3.4vw,2.4rem);font-weight:600;letter-spacing:-0.045em;
  color:#fff;margin:.65rem 0 .1rem;font-variant-numeric:tabular-nums;line-height:1;
}
.case__label{font-size:.98rem;color:#fff;font-weight:500}
.case__sub{font-family:var(--mono);font-size:.8rem;color:var(--on-violet-dim);margin-top:.5rem;font-variant-numeric:tabular-nums}
.case__go{margin-top:1.25rem;color:var(--accent);font-weight:600;font-size:.91rem}
.case:hover .case__go{color:#fff}

/* ---------- split ---------- */
.split{display:grid;gap:2.25rem}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:3.25rem}}
@media(min-width:900px){.split--rev > :first-child{order:2}.split--rev > :last-child{order:1}}

/* ---------- ticks ---------- */
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:1.6rem;margin-bottom:.7rem;font-size:.98rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.52em;width:9px;height:5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.cell--violet .ticks li::before{border-color:#7BE8B4}
.ticks--boxed{border:1px solid var(--border);border-radius:var(--r);padding:1.4rem 1.5rem;background:var(--surface)}
.ticks--boxed li:last-child{margin-bottom:0}
.webcard{border:1px solid var(--border);border-radius:var(--r);padding:1.75rem;background:var(--sunk)}
.section--sunk .webcard{background:var(--surface)}

/* ---------- creative pipeline ---------- */
.pipeline{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:12px;counter-reset:p}
@media(min-width:900px){.pipeline{grid-template-columns:repeat(5,1fr);gap:10px}}
.pipeline li{
  position:relative;margin:0;padding:1.25rem 1.1rem;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);
}
.pipeline__n{
  display:block;font-weight:600;font-size:1.02rem;color:var(--text);margin-bottom:.3rem;
}
.pipeline li p{margin:0;font-size:.9rem}
@media(min-width:900px){
  .pipeline li::after{
    content:"";position:absolute;right:-7px;top:50%;width:10px;height:10px;
    border-top:2px solid var(--violet-300);border-right:2px solid var(--violet-300);
    transform:translateY(-50%) rotate(45deg);z-index:1;
  }
  .pipeline li:last-child::after{display:none}
  /* Intensity rises along the chain, so the eye reads it left to right as a
     progression toward scale rather than five equal boxes. */
  .pipeline li:nth-child(4){border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
  .pipeline li:nth-child(5){
    background:linear-gradient(150deg,var(--violet-800),var(--violet-700));
    border-color:var(--violet-700);
  }
  .pipeline li:nth-child(5) .pipeline__n{color:#fff}
  .pipeline li:nth-child(5) p{color:var(--on-violet-dim)}
}

/* ---------- steps ---------- */
.steps{list-style:none;padding:0;margin:1.75rem 0 2rem;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding-block:1.4rem;border-top:1px solid var(--border);align-items:start}
.steps li:last-child{border-bottom:1px solid var(--border)}
.steps .n{font-family:var(--mono);font-size:.85rem;color:var(--accent);padding-top:.25rem;font-weight:500}
.steps strong{display:block;margin-bottom:.25rem;font-size:1.1rem}
.steps p{margin:0 0 .6rem;font-size:.97rem}
.steps p:last-child{margin-bottom:0}
.steps--lg li{padding-block:2rem}

/* ---------- audit block ---------- */
.audit{
  display:grid;gap:2rem;padding:clamp(1.75rem,4vw,2.75rem);
  border-radius:var(--r);background:var(--sunk);border:1px solid var(--border);
}
@media(min-width:900px){.audit{grid-template-columns:1fr 1fr;gap:3rem;align-items:center}}
.audit h2{margin-bottom:.5rem}
.audit .ticks--boxed{background:var(--surface)}

/* ---------- FAQ ---------- */
.faq{margin-top:1.75rem;border-top:1px solid var(--border)}
.faq__item{border-bottom:1px solid var(--border)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.15rem 0;cursor:pointer;list-style:none;
  font-weight:600;font-size:1.04rem;color:var(--text);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--accent)}
.faq__icon{width:20px;height:20px;flex:none;color:var(--accent);transition:transform .25s var(--ease)}
.faq__item[open] .faq__icon{transform:rotate(45deg)}
.faq__body{padding:0 0 1.2rem;max-width:68ch}
.faq__body p{margin:0;font-size:.98rem}
@media (prefers-reduced-motion: no-preference){
  /* Feedback: the panel grows from the summary so the open state reads as
     caused by the click rather than appearing from nowhere. */
  .faq__item[open] .faq__body{animation:faq-open .3s var(--ease)}
}
@keyframes faq-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;margin-block:1.5rem;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:440px}
th,td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
th{font-family:var(--mono);font-weight:500;font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
td:last-child{font-weight:600;color:var(--text)}
.source-line{font-size:.84rem;color:var(--faint)}
.note-card{
  margin-top:2rem;padding:1.4rem 1.5rem;border-radius:var(--r);
  background:var(--sunk);border:1px solid var(--border);border-left:3px solid var(--accent);
}
.note-card p{margin:0;font-size:.95rem}

/* ---------- services page ---------- */
.svc{padding-block:2.4rem;border-top:1px solid var(--border);scroll-margin-top:96px}
.svc-grid{display:grid;gap:1.5rem}
@media(min-width:880px){.svc-grid{grid-template-columns:.85fr 1.15fr;gap:2.75rem}}
.svc h3{font-size:clamp(1.3rem,2.3vw,1.6rem)}
.svc dl{margin:0}
.svc dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:1.1rem}
.svc dt:first-child{margin-top:0}
.svc dd{margin:.35rem 0 0;color:var(--text-muted)}
.svc dd.mono{font-size:.88rem;color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin-bottom:1rem}
.chips li{margin:0}
.chips a{display:inline-block;padding:.45rem .95rem;border:1px solid var(--border);border-radius:var(--r-sm);font-size:.89rem;text-decoration:none;color:var(--text-muted);transition:border-color .15s,color .15s}
.chips a:hover{border-color:var(--violet-500);color:var(--text)}

/* ---------- forms ---------- */
.form{display:grid;gap:1.1rem;max-width:520px}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.4rem;color:var(--text)}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem .9rem;font:inherit;font-size:1rem;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--violet-500);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--violet-500) 22%,transparent);
}
.field textarea{min-height:130px;resize:vertical}
.help{font-size:.87rem;color:var(--text-muted);margin:0}
.form-warning{color:var(--text);font-weight:500}

/* ---------- footer ---------- */
.site-footer{background:var(--violet-900);color:var(--on-violet-dim);padding-block:3.5rem 2rem;font-size:.95rem}
.site-footer a{color:var(--on-violet);text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;gap:2rem;margin-bottom:2.5rem}
@media(min-width:760px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.footer-grid{grid-template-columns:1.7fr 1fr 1.1fr 1fr}}
.site-footer h4{color:#fff;font-family:var(--mono);font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.9rem;font-weight:500}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.55rem;color:var(--on-violet-dim)}
.site-footer p{color:var(--on-violet-dim)}
.site-footer .brand span{color:#fff}
.footer-bottom{border-top:1px solid var(--violet-line);padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;font-size:.86rem}

/* ---------- motion ---------- */
/* Storytelling: sections arrive in reading order so the page reads as one
   sequence. Reveal only engages once JS can undo it, so a failed script never
   leaves content hidden. */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
  .js .reveal.in{opacity:1;transform:none}
  .js .reveal[data-d="1"]{transition-delay:.07s}
  .js .reveal[data-d="2"]{transition-delay:.14s}
  .js .reveal[data-d="3"]{transition-delay:.21s}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hv__line{stroke-dashoffset:0}
  .hv__area{opacity:1}
}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.75rem 1.1rem;z-index:100;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip:focus{left:0}

/* ==========================================================================
   Motion system and components added in the refinement pass.
   Rule held throughout: animate transform and opacity only, drive everything
   from IntersectionObserver or CSS, and collapse to static under
   prefers-reduced-motion.
   ========================================================================== */

/* ---------- navbar scroll state ----------
   Driven by an IntersectionObserver sentinel at the top of the document, so no
   scroll listener runs. Feedback: the bar gains weight once content is behind it. */
#top-sentinel{position:absolute;top:0;height:1px;width:100%;pointer-events:none}
.site-header{transition:box-shadow .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease)}
.site-header.is-stuck{
  background:color-mix(in srgb,var(--background) 94%,transparent);
  box-shadow:0 6px 24px color-mix(in srgb,var(--violet-900) 12%,transparent);
  border-bottom-color:var(--border);
}
.site-header.is-stuck .nav{height:64px}
.nav{transition:height .25s var(--ease)}

/* ---------- buttons ---------- */
.btn--arrow .arw,.cell__go .arw,.case__go .arw{
  display:inline-block;transition:transform .2s var(--ease);
}
.btn--arrow::after{content:"\2192";display:inline-block;transition:transform .2s var(--ease)}
.btn--arrow:hover::after{transform:translateX(4px)}
.cell:hover .arw,.case:hover .arw{transform:translateX(4px)}
.btn__spin{display:none;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff}
.btn.is-busy{pointer-events:none;opacity:.85}
.btn.is-busy .btn__spin{display:inline-block}
@media (prefers-reduced-motion: no-preference){
  .btn.is-busy .btn__spin{animation:spin .7s linear infinite}
}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---------- hero entrance ----------
   Storytelling: the headline arrives line by line, then the supporting copy,
   then the actions. It reads in the order a person would say it. */
.hero-in{opacity:1}
.hero h1 .hero-line{display:block}
@media (prefers-reduced-motion: no-preference){
  .js .hero-in{opacity:0;transform:translateY(16px);
    animation:hero-up .75s var(--ease) var(--hd,0s) forwards}
  .js .hv__in{opacity:0;transform:translateY(14px) scale(.98);
    animation:hero-up .8s var(--ease) var(--hd,0s) forwards}
  .hv__line{stroke-dasharray:420;stroke-dashoffset:420;animation:hv-draw 1.5s var(--ease) .9s forwards}
  .hv__area{opacity:0;animation:hv-fade .8s ease 1.9s forwards}
  .hv__dot{opacity:0;animation:hv-fade .5s ease 2.2s forwards}
  .hv__float{animation:hero-up .8s var(--ease) var(--hd,0s) forwards,
                       hv-drift 7s ease-in-out 2.4s infinite}
  .hv__float--slow{animation-duration:.8s,9s}
}
@keyframes hero-up{to{opacity:1;transform:none}}
@keyframes hv-draw{to{stroke-dashoffset:0}}
@keyframes hv-fade{to{opacity:1}}
@keyframes hv-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- brand marquee ----------
   Breadth without asking for individual attention. Two identical runs so the
   loop seam never shows. */
.section--tight{padding-block:clamp(2.5rem,5vw,3.75rem)}
.mq__head{font-size:clamp(1.1rem,2vw,1.35rem);color:var(--text-muted);font-weight:500;
  letter-spacing:-0.015em;margin-bottom:1.75rem;max-width:40ch}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq+.mq{margin-top:.9rem}
.mq__track{display:flex;width:max-content}
.mq__run{display:flex;list-style:none;margin:0;padding:0}
.mq__run li{
  margin:0;padding:0 1.75rem;white-space:nowrap;
  font-size:clamp(1.05rem,2vw,1.45rem);font-weight:600;letter-spacing:-0.03em;
  color:var(--text);display:flex;align-items:center;
}
.mq__run li::after{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent);margin-left:1.75rem;opacity:.55}
.mq--quiet .mq__run li{font-family:var(--mono);font-size:.84rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.mq--quiet .mq__run li::after{background:var(--faint);opacity:.4;width:4px;height:4px}
@media (prefers-reduced-motion: no-preference){
  .mq__track{animation:mq-run 46s linear infinite}
  .mq--rev .mq__track{animation-direction:reverse;animation-duration:38s}
  .mq:hover .mq__track{animation-play-state:paused}
}
@keyframes mq-run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
@media(max-width:700px){
  .mq__track{animation-duration:60s}
  .mq--rev .mq__track{animation-duration:52s}
}

/* ---------- case stack ----------
   Desktop: cards pin and the next one rides over the last, so each result gets
   the viewport to itself. Mobile: plain cards, because sticky stacking on a
   small screen costs more than it gives. */
.casework{padding-bottom:clamp(2.5rem,5vw,4rem)}
.stack{display:grid;gap:16px;margin-block:2rem}
.case--stack{padding:1.75rem}
@media(min-width:900px){
  .stack{display:block}
  .case--stack{
    position:sticky;top:104px;margin-bottom:1.25rem;
    padding:2.25rem 2.5rem;min-height:300px;
    display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;
  }
  .case--stack .case__tag{grid-column:1;align-self:end}
  .case--stack .case__metric{grid-column:1;grid-row:2;font-size:clamp(2.4rem,4.4vw,3.4rem)}
  .case--stack .case__label{grid-column:1;grid-row:3}
  .case--stack .case__sub{grid-column:1;grid-row:4}
  .case--stack .case__blurb{grid-column:2;grid-row:1/4;align-self:center;margin:0;font-size:1.02rem}
  .case--stack .case__meta{grid-column:2;grid-row:4}
  .case--stack .case__go{grid-column:2;grid-row:5;margin-top:.75rem}
  .case--stack:nth-child(1){top:104px}
  .case--stack:nth-child(2){top:128px}
  .case--stack:nth-child(3){top:152px}
}
.case__blurb{color:var(--on-violet-dim);margin:.9rem 0 0;font-size:.97rem}
.case__meta{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--violet-300);margin-top:.9rem}
.case--flat{cursor:default}
.case--flat:hover{transform:none;border-color:var(--violet-line)}

/* ---------- work grid and filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.75rem}
.filter{
  padding:.5rem 1.05rem;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text-muted);font:inherit;font-size:.9rem;
  font-weight:500;cursor:pointer;transition:border-color .18s,color .18s,background-color .18s;
}
.filter:hover{border-color:var(--violet-500);color:var(--text)}
.filter.is-on{background:var(--grad);border-color:transparent;color:#fff}
.grid-cases{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:680px){.grid-cases{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.grid-cases{grid-template-columns:repeat(3,1fr)}}
.grid-cases .case{background:var(--violet-700);border-color:var(--violet-line)}
.grid-cases .case[hidden]{display:none}
.grid-note{font-size:.88rem;color:var(--faint);margin-top:1.5rem;max-width:70ch}

/* ---------- illustrative dashboard ----------
   Storytelling: rows populate in order so the eye reads it as a report being
   assembled, which is the claim the section is making. */
.dash{
  margin:0;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);padding:1.4rem 1.5rem 1.2rem;
}
.dash__row{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--border)}
.dash__k{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.dash__v{display:block;font-weight:600;font-size:1.02rem;color:var(--text);margin-top:.2rem}
.dash__bars{padding-top:1.1rem;display:grid;gap:.8rem}
.dash__bar{display:grid;grid-template-columns:5.5rem 1fr;gap:.9rem;align-items:center}
.dash__bar span{font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.dash__bar i{display:block;height:9px;border-radius:5px;background:var(--grad);
  transform-origin:left center;width:var(--w)}
.dash figcaption{margin-top:1.2rem;padding-top:.9rem;border-top:1px solid var(--border);
  font-size:.8rem;color:var(--faint);line-height:1.5}
@media (prefers-reduced-motion: no-preference){
  .js .dash__kpi,.js .dash__bar{opacity:0;transform:translateY(8px)}
  .js .dash.in .dash__kpi,.js .dash.in .dash__bar{
    opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .js .dash__bar i{transform:scaleX(0)}
  .js .dash.in .dash__bar i{transform:scaleX(1);transition:transform .8s var(--ease)}
  .js .dash.in .dash__kpi:nth-child(1){transition-delay:.05s}
  .js .dash.in .dash__kpi:nth-child(2){transition-delay:.12s}
  .js .dash.in .dash__kpi:nth-child(3){transition-delay:.19s}
  .js .dash.in .dash__kpi:nth-child(4){transition-delay:.26s}
  .js .dash.in .dash__bar:nth-child(1),.js .dash.in .dash__bar:nth-child(1) i{transition-delay:.34s}
  .js .dash.in .dash__bar:nth-child(2),.js .dash.in .dash__bar:nth-child(2) i{transition-delay:.44s}
  .js .dash.in .dash__bar:nth-child(3),.js .dash.in .dash__bar:nth-child(3) i{transition-delay:.54s}
  .js .dash.in .dash__bar:nth-child(4),.js .dash.in .dash__bar:nth-child(4) i{transition-delay:.64s}
}

/* ---------- browser mockup ---------- */
.bw{position:relative;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);overflow:visible;box-shadow:0 18px 50px color-mix(in srgb,var(--violet-900) 10%,transparent)}
.bw__chrome{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;
  border-bottom:1px solid var(--border);background:var(--sunk);border-radius:var(--r) var(--r) 0 0}
.bw__chrome i{width:9px;height:9px;border-radius:50%;background:var(--border)}
.bw__url{margin-left:.6rem;font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.bw__body{padding:1.5rem;display:grid;gap:.75rem}
.bw__hero{height:74px;border-radius:var(--r-sm);background:linear-gradient(120deg,var(--violet-800),var(--violet-700))}
.bw__line{height:9px;border-radius:5px;background:var(--border)}
.bw__line--a{width:82%}
.bw__line--b{width:58%}
.bw__cta{height:30px;width:140px;border-radius:var(--r-sm);background:var(--grad);margin-top:.35rem}
.bw__tag{
  position:absolute;font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;padding:.4rem .7rem;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  box-shadow:0 6px 18px color-mix(in srgb,var(--violet-900) 12%,transparent);white-space:nowrap;
}
.bw__tag--1{top:12%;right:14px}
.bw__tag--2{top:46%;left:-14px}
.bw__tag--3{bottom:26%;right:14px}
.bw__tag--4{bottom:-14px;left:16%}
@media(max-width:640px){
  .bw__tag--2{left:-6px}
  .bw__tag{font-size:.62rem;padding:.3rem .55rem}
}
@media (prefers-reduced-motion: no-preference){
  .js .bw__tag{opacity:0;transform:translateY(8px) scale(.96)}
  .js .bw.in .bw__tag{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .js .bw.in .bw__tag--1{transition-delay:.25s}
  .js .bw.in .bw__tag--2{transition-delay:.38s}
  .js .bw.in .bw__tag--3{transition-delay:.51s}
  .js .bw.in .bw__tag--4{transition-delay:.64s}
  .js .bw__cta{transform:scaleX(.4);transform-origin:left}
  .js .bw.in .bw__cta{transform:none;transition:transform .7s var(--ease) .15s}
}

/* ---------- how we work, sticky rail ----------
   Hierarchy: the heading and the progress rail hold still while the steps move,
   so the reader always knows where they are in the sequence. */
.hww__grid{display:grid;gap:2rem}
@media(min-width:960px){
  .hww__grid{grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start}
  .hww__side{position:sticky;top:112px}
}
.hww__rail{list-style:none;padding:0;margin:2rem 0 0;display:none}
@media(min-width:960px){.hww__rail{display:grid;gap:0}}
.hww__rail li{
  display:flex;align-items:center;gap:.9rem;margin:0;padding:.7rem 0 .7rem 0;
  font-weight:600;color:var(--faint);font-size:1rem;
  border-left:2px solid var(--border);padding-left:1.1rem;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.hww__rail li span{font-family:var(--mono);font-size:.78rem;font-weight:500}
.hww__rail li.is-on{color:var(--text);border-left-color:var(--accent)}
.hww__steps{list-style:none;padding:0;margin:0;display:grid;gap:0}
.hww__step{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  padding-block:1.6rem;border-top:1px solid var(--border);
  opacity:.55;transition:opacity .35s var(--ease);
}
.hww__step:last-child{border-bottom:1px solid var(--border)}
.hww__step.is-on{opacity:1}
.hww__step .n{font-family:var(--mono);font-size:.85rem;color:var(--accent);padding-top:.25rem;font-weight:500}
.hww__step strong{display:block;margin-bottom:.25rem;font-size:1.1rem}
.hww__step p{margin:0;font-size:.97rem}
@media(max-width:959px){.hww__step{opacity:1}}
@media (prefers-reduced-motion: reduce){.hww__step{opacity:1}}

/* ---------- pipeline winner ---------- */
.pipeline__win{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))!important}
@media(min-width:900px){
  .pipeline{grid-template-columns:repeat(6,1fr)}
  .pipeline__win{transform:scale(1.04);z-index:2;position:relative}
}

/* ---------- form states ---------- */
.field__err{margin:.35rem 0 0;font-size:.84rem;color:#C4123F;min-height:0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .field__err{color:#FF8FB0}}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#C4123F}
.form-status{font-size:.92rem;margin:0}
.form-status.is-ok{color:#0E7A4F;font-weight:500}
.form-status.is-err{color:#C4123F;font-weight:500}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .form-status.is-ok{color:#5FD6A0}
  :root:not([data-theme="light"]) .form-status.is-err{color:#FF8FB0}
}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--mono);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--violet-300);margin-bottom:.9rem}
.crumb a{text-decoration:none}
.crumb a:hover{color:#fff}
.crumb span{opacity:.5;margin:0 .35rem}

/* ---------- final CTA background ----------
   Slow, low-contrast drift. It gives the closing panel depth without competing
   with the button for attention. */
.cta-final{position:relative;overflow:hidden}
.cta-final__bg{
  position:absolute;inset:-40%;pointer-events:none;
  background:radial-gradient(circle at 30% 40%,rgba(123,77,255,.38),transparent 48%),
             radial-gradient(circle at 72% 60%,rgba(255,61,139,.26),transparent 46%);
}
@media (prefers-reduced-motion: no-preference){
  .cta-final__bg{animation:cta-drift 24s ease-in-out infinite}
}
@keyframes cta-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3%,-2%,0) scale(1.06)}
}

/* ---------- honeypot ----------
   Off-screen rather than display:none, because some bots skip hidden inputs.
   Humans never see it; anything that fills it is discarded server side. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- submitted state ----------
   Feedback: the form is replaced in place by what happens next, so there is no
   doubt the submission landed. */
.form-done{
  max-width:520px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);padding:1.75rem;outline:none;
  /* Focus moves here on submit, so leave room for the sticky header. */
  scroll-margin-top:110px;
}
.form-done__tick{
  width:38px;height:38px;color:var(--accent);margin-bottom:.9rem;
  padding:7px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
}
.form-done h3{margin-bottom:.5rem}
.form-done p{margin-bottom:.75rem;font-size:.97rem}
.form-done__alt{font-size:.88rem;color:var(--faint);margin-bottom:0}
.form-done:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (prefers-reduced-motion: no-preference){
  .form-done{animation:done-in .4s var(--ease)}
  .form-done__tick path{stroke-dasharray:30;stroke-dashoffset:30;animation:tick .5s var(--ease) .15s forwards}
}
@keyframes done-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tick{to{stroke-dashoffset:0}}

/* ---------- blog index ---------- */
.posts{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:820px){.posts{grid-template-columns:repeat(3,1fr)}}
.post{
  display:flex;flex-direction:column;text-decoration:none;
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);padding:1.6rem;min-width:0;
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.post:hover{border-color:var(--violet-300);transform:translateY(-3px)}
.post__meta{
  display:flex;gap:.5rem;align-items:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.8rem;
}
.post h3{margin-bottom:.5rem;color:var(--text)}
.post p{font-size:.95rem;margin-bottom:0}
.post__go{margin-top:auto;padding-top:1.15rem;color:var(--accent);font-weight:600;font-size:.92rem}

/* ---------- article ----------
   Measure capped for reading. One column, no sidebar, nothing competing. */
.article{max-width:680px}
.article h2{font-size:clamp(1.35rem,2.4vw,1.72rem);margin-top:2.4rem;margin-bottom:.7rem}
.article p{font-size:1.05rem;line-height:1.72;margin-bottom:1.2rem}
.article ul{margin-bottom:1.4rem;padding-left:1.3rem}
.article li{font-size:1.03rem;line-height:1.68;margin-bottom:.6rem}
.article > :first-child{margin-top:0}
.post__dek{
  font-size:clamp(1.05rem,2vw,1.22rem);color:var(--on-violet-dim);
  max-width:52ch;margin-bottom:0;
}
.article__aside{
  margin-top:2.75rem;padding:1.35rem 1.5rem;border-radius:var(--r);
  background:var(--sunk);border:1px solid var(--border);border-left:3px solid var(--accent);
}
.article__aside-k{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.35rem!important;
}
.article__aside p{margin-bottom:0;font-size:.97rem}
.article__aside a{color:var(--accent);font-weight:600}