/* ==========================================================================
   Avincity — site styles
   Loaded after motion.css, which owns the reveal/parallax/button primitives.
   ========================================================================== */

:root {
  --bg:            #0A0B0A;
  --surface:       #101311;
  --surface-2:     #161A17;
  --section-bg:    #0A0B0A;   /* motion.css reads this for [data-overlap] */

  --ink:           #F2F1ED;
  --ink-2:         #B6B9B3;
  --ink-dim:       #7E837C;

  --line:          rgba(242, 241, 237, 0.10);
  --line-soft:     rgba(242, 241, 237, 0.06);

  --accent:        #12A98A;   /* validated: in-band, >=3:1 on this surface */
  --accent-bright: #2FD9AC;   /* large display text only */
  --before:        #4A4A48;   /* neutral baseline — always directly labelled */

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wrap: 1240px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sect: clamp(5rem, 12vw, 11rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dim  { color: var(--ink-dim); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 50%; translate: -50% -120%;
  background: var(--accent); color: #04150F; padding: 0.75rem 1.25rem;
  border-radius: 0 0 8px 8px; z-index: 100; font-weight: 500;
}
.skip:focus { translate: -50% 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ type */

.eyebrow {
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 1.5rem; display: flex;
  align-items: center; gap: 0.75rem; font-weight: 500;
}
.eyebrow__idx { color: var(--accent); font-family: var(--mono); }

.h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.9vw, 3.25rem);
  line-height: 1.08; letter-spacing: -0.03em; font-weight: 600;
  margin: 0; text-wrap: balance;
}
.h2--lead { max-width: 20ch; margin-bottom: 3.5rem; }

.prose p { margin: 0 0 1.4rem; color: var(--ink-2); max-width: 56ch; }
.prose p:last-child { margin-bottom: 0; }

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

.section { padding-block: var(--sect); position: relative; }
.section--tight { padding-block: clamp(3rem, 7vw, 5rem); }

.grid-2 { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: 1fr; }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------ nav */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.nav__inner { display: flex; align-items: center; gap: 2rem; height: 66px; }
.nav__logo { font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.6rem; }
/* The logo mark. Sized in em so it tracks whatever text it sits beside,
   at the same mark-to-wordmark ratio as the lockup artwork (32:22). */
.mark { width: 1.45em; height: 1.45em; display: block; flex: 0 0 auto; }
.nav__links { display: none; gap: 2rem; margin-left: auto; font-size: 0.9rem; color: var(--ink-2); }
.nav__links a:hover { color: var(--ink); }
@media (min-width: 860px) { .nav__links { display: flex; } }
.nav .btn { margin-left: auto; }
@media (min-width: 860px) { .nav .btn { margin-left: 0; } }

/* --------------------------------------------------------------- button */

.btn {
  --char-stagger: 0.018s;
  --btn-h: 48px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: var(--btn-h); padding: 0 1.6rem; border-radius: 999px;
  font-weight: 500; font-size: 0.95rem;
  border: 1px solid var(--line); overflow: clip; cursor: pointer;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn--sm { --btn-h: 38px; padding-inline: 1.15rem; font-size: 0.85rem; }
.btn--lg { --btn-h: 58px; padding-inline: 2.2rem; font-size: 1.05rem; }

/* The char box must be as tall as the button, or translateY(100%) parks the
   glyph inside the button's own padding instead of clearing it. */
.btn .btn__content { height: 100%; align-items: center; }
.btn .btn__char { line-height: var(--btn-h); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #04150F; }
.btn--primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
.btn--ghost:hover { border-color: var(--ink-2); }

/* ----------------------------------------------------------- scrub lines */

.hero__lines, .case__lines {
  position: absolute; inset: 0; display: flex; justify-content: space-between;
  padding-inline: var(--gut); pointer-events: none; z-index: 0;
  max-width: var(--wrap); margin-inline: auto;
}
.bg-line { width: 1px; height: 0; background: var(--ink); opacity: 0.09; }

/* ----------------------------------------------------------------- hero */

.hero { position: relative; padding-block: clamp(8rem, 18vh, 13rem) var(--sect); overflow: clip; }
.hero__inner { position: relative; z-index: 1; }

.hero__title {
  font-size: clamp(2.4rem, 1.1rem + 5.9vw, 5.5rem);
  line-height: 1.02; letter-spacing: -0.04em; font-weight: 600;
  margin: 0 0 2rem; max-width: 17ch; text-wrap: balance;
}
.hero__lede { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem); color: var(--ink-2); max-width: 52ch; margin: 0 0 2.75rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.headline {
  margin-top: clamp(4rem, 9vw, 7rem); padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  display: grid; gap: clamp(2rem, 5vw, 3.5rem); position: relative; z-index: 1;
}
@media (min-width: 900px) { .headline { grid-template-columns: 1.1fr 1fr; align-items: start; } }

.headline__val {
  font-size: clamp(2.75rem, 1.2rem + 6.5vw, 5.5rem); line-height: 1;
  color: var(--accent-bright); margin: 0 0 0.6rem; font-weight: 500;
}
.headline__key { margin: 0; color: var(--ink-2); max-width: 30ch; }
.headline__side { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2rem; }
.headline__sval { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin: 0 0 0.35rem; font-weight: 500; }
.headline__skey { margin: 0; font-size: 0.85rem; color: var(--ink-dim); line-height: 1.45; }

/* --------------------------------------------------------------- roster */

.roster { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.roster__row { border-bottom: 1px solid var(--line); }
.roster__row a {
  display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1.5rem;
  padding: 1.4rem 0; align-items: baseline;
  transition: padding-inline-start 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.roster__row a:hover { padding-inline-start: 1rem; }
.roster__name { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); font-weight: 500; letter-spacing: -0.02em; }
.roster__cat { color: var(--ink-dim); font-size: 0.85rem; }
.roster__lift { color: var(--ink-2); text-align: right; font-size: 0.9rem; }
/* Revenue is the headline claim, so it gets the accent — not the lift. */
.roster__rev { color: var(--accent-bright); text-align: right; }

/* Every cell is placed explicitly. Mixing explicit grid-row with auto-placement
   lets the placer pull later items into earlier columns and scrambles the row. */
.roster__name { grid-column: 1; grid-row: 1; }
.roster__rev  { grid-column: 2; grid-row: 1; }
.roster__cat  { grid-column: 1; grid-row: 2; }
.roster__lift { grid-column: 2; grid-row: 2; }

@media (min-width: 760px) {
  .roster__row a { grid-template-columns: 1.7fr 1fr auto auto; gap: 2rem; }
  .roster__name { grid-column: 1; grid-row: 1; }
  .roster__cat  { grid-column: 2; grid-row: 1; }
  .roster__lift { grid-column: 3; grid-row: 1; min-width: 5rem; }
  .roster__rev  { grid-column: 4; grid-row: 1; min-width: 9.5rem; }
}

/* ------------------------------------------------------------ case study */

.case { position: relative; padding-block: var(--sect); overflow: clip; background: var(--section-bg); }
.case::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line);
}
.case__head { position: relative; z-index: 1; margin-bottom: clamp(3rem, 7vw, 5rem); }
.case__figure {
  font-size: clamp(2.75rem, 0.9rem + 8vw, 7rem); line-height: 0.95; letter-spacing: -0.045em;
  font-weight: 600; margin: 0 0 0.75rem; font-family: var(--mono);
  font-variant-numeric: tabular-nums; color: var(--accent-bright);
}
.case__figure-sub { margin: 0; color: var(--ink-dim); font-size: 0.95rem; letter-spacing: 0.02em; }

.case__body { display: grid; gap: clamp(2.5rem, 6vw, 4rem); position: relative; z-index: 1; }
@media (min-width: 940px) { .case__body { grid-template-columns: 0.85fr 1.15fr; align-items: center; } }

.case__note { font-size: clamp(1.1rem, 1rem + 0.7vw, 1.5rem); line-height: 1.35; letter-spacing: -0.02em; margin: 0 0 2.5rem; max-width: 34ch; }

.meta { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
.meta__row { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line-soft); }
.meta dt { color: var(--ink-dim); font-size: 0.85rem; margin: 0; }
/* min-width:0 — a flex item defaults to min-width:auto and refuses to shrink
   below its content, which clips the long mono pricing string. */
.meta dd { margin: 0; font-size: 0.85rem; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.meta dt { flex: 0 0 auto; }
.meta dd.mono { font-size: 0.78rem; line-height: 1.5; }

/* phone screens */
.case__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 2vw, 1.5rem); align-items: center; }
.shot { overflow: visible; border-radius: 14px; }
.shot img { height: auto; object-fit: contain; border-radius: 14px; }
.shot--1 { margin-top: 3rem; }
.shot--3 { margin-top: 5rem; }
@media (max-width: 939px) {
  .case__shots {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
    padding-bottom: 1rem; scrollbar-width: none;
  }
  .case__shots::-webkit-scrollbar { display: none; }
  .shot { flex: 0 0 62%; max-width: 260px; scroll-snap-align: center; margin-top: 0 !important; }
}

/* ------------------------------------------------------- metrics panel */

.panel {
  margin-top: clamp(3rem, 7vw, 5rem); position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: clamp(1.5rem, 4vw, 2.75rem);
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 940px) { .panel { grid-template-columns: minmax(240px, 0.8fr) 1.2fr; align-items: end; } }

/* bar chart — two marks: neutral baseline + accent, both directly labelled */
.chart { margin: 0; }
.chart__title { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 1.5rem; }
.bars { display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: flex-end; max-width: 320px; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 116px; }
.bar__val { margin: 0 0 0.6rem; font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem); font-weight: 500; }
.bar__val--up { color: var(--accent-bright); }
.bar__track { width: 100%; height: clamp(150px, 26vw, 210px); display: flex; align-items: flex-end; }
.bar__fill {
  width: 100%; height: var(--h); border-radius: 4px 4px 0 0;
  transform: scaleY(0); transform-origin: bottom center;
}
.bar__fill--before { background: var(--before); }
.bar__fill--after  { background: var(--accent); }
.bar__label { margin: 0.7rem 0 0; font-size: 0.8rem; color: var(--ink-dim); }

/* stat tiles */
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
@media (min-width: 620px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--surface-2); padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.stat__val { margin: 0 0 0.5rem; font-size: clamp(1.3rem, 1.05rem + 1.2vw, 2rem); font-weight: 500; line-height: 1; }
.stat--hi .stat__val { color: var(--accent-bright); }
.stat__key { margin: 0 0 0.25rem; font-size: 0.85rem; }
.stat__sub { margin: 0; font-size: 0.78rem; color: var(--ink-dim); line-height: 1.4; }

/* --------------------------------------------------------------- method */

.steps { list-style: none; margin: 0 0 clamp(3rem, 7vw, 5rem); padding: 0; display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--bg); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem); }
.step__n { color: var(--accent); margin: 0 0 1.25rem; font-size: 0.85rem; }
.step__t { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.step__d { margin: 0; color: var(--ink-2); font-size: 0.92rem; }

.timeline { overflow-x: auto; }
.timeline table { width: 100%; border-collapse: collapse; min-width: 460px; }
.timeline th, .timeline td { text-align: left; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; }
.timeline th { color: var(--ink-dim); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.timeline td:last-child, .timeline th:last-child { text-align: right; padding-right: 0; }

/* -------------------------------------------------------------- pricing */

.price { display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-bottom: clamp(3rem, 7vw, 5rem); }
@media (min-width: 900px) { .price { grid-template-columns: 0.9fr 1.1fr; align-items: start; } }
.price__val { font-size: clamp(3rem, 1.5rem + 7vw, 6rem); line-height: 1; margin: 0 0 1.25rem; font-weight: 500; letter-spacing: -0.04em; }
.price__desc { color: var(--ink-2); max-width: 40ch; margin: 0 0 2rem; }

.addons { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.addon { background: var(--surface); padding: clamp(1.25rem, 3vw, 1.75rem); }
.addon__val { margin: 0 0 0.4rem; font-family: var(--mono); font-size: 1.15rem; color: var(--accent-bright); font-variant-numeric: tabular-nums; }
.addon__k { margin: 0 0 0.5rem; font-weight: 500; }
.addon__d { margin: 0; color: var(--ink-2); font-size: 0.88rem; }

.honest { border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--surface); }
.honest__t { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; }
.honest__d { margin: 0; color: var(--ink-2); max-width: 68ch; font-size: 0.95rem; }

/* ------------------------------------------------------------------ cta */

.cta { border-top: 1px solid var(--line); text-align: center; }
.cta__inner { display: flex; flex-direction: column; align-items: center; }
.cta__t { font-size: clamp(2rem, 1.1rem + 4.2vw, 4rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; margin: 0 0 1.5rem; max-width: 18ch; text-wrap: balance; }
.cta__d { color: var(--ink-2); max-width: 46ch; margin: 0 0 2.5rem; }

/* ----------------------------------------------------------------- foot */

.foot { border-top: 1px solid var(--line); padding-block: 3rem; }
.foot__inner { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .foot__inner { grid-template-columns: auto 1fr auto; align-items: start; gap: 3rem; } }
.foot__logo { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; margin: 0; }
.foot__note { margin: 0; font-size: 0.78rem; color: var(--ink-dim); max-width: 62ch; line-height: 1.6; }
.foot__copy { margin: 0; font-size: 0.78rem; color: var(--ink-dim); }

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .bar__fill { transform: scaleY(1); }
  .roster__row a { transition: none; }
}

/* ==========================================================================
   Preloader
   Display is opt-in on .js-motion, so a visitor without JavaScript never sees
   a cover that has no script to lift it.
   ========================================================================== */

.loader { display: none; }

.js-motion .loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--bg);
  will-change: transform;
}

/* Scroll is held only while the cover is up. */
.is-loading, .is-loading body { overflow: hidden; }

.loader__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 2.25rem);
  padding-inline: var(--gut);
}

/* `color` is what the area gradient reads through currentColor. */
.loader__chart {
  width: clamp(240px, 46vw, 400px);
  height: auto;
  overflow: visible;
  color: var(--accent);
}

/* Grid and axis stay recessive — the series is the only thing with weight. */
.loader__grid line { stroke: var(--line-soft); stroke-width: 1; }
.loader__axis { stroke: var(--line); stroke-width: 1; }

.loader__area { fill: url(#loaderFill); }
.loader__series {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.loader__marker { fill: var(--accent-bright); }

.loader__xlabels text {
  fill: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.loader__word {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* The mask is what makes the lockup rise into place rather than slide across.
   Clip margin kept tight: the mark is taller than the text line, so a generous
   bleed would show a sliver of it before the rise begins. */
.loader__word-mask { display: block; overflow: clip; overflow-clip-margin: 0.06em; }
/* flex so the mark and wordmark leave the mask as one unit */
.loader__word-mask > span { display: inline-flex; align-items: center; gap: 0.7rem; }

/* Held back from the lockup ratio here — at 3rem the wordmark is already
   large, and a full-ratio mark would compete with the chart above it. */
.loader__word .mark { width: 1.05em; height: 1.05em; }

.loader__count {
  position: absolute;
  right: var(--gut);
  bottom: calc(var(--gut) + 1rem);
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.loader__track { position: absolute; inset: auto 0 0 0; height: 1px; background: var(--line); }
.loader__bar {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .loader { display: none; }
}