/* agence-efficads.com · inner pages. Same tokens as site.css, page components below. */

/* ------------------------------------------------------------ title page -- */
.title--inner { grid-template-columns: minmax(0, 1fr) auto; }
.title--inner .title__copy { max-width: 52rem; }
.title--inner .title__h { font-size: clamp(2.2rem, 1rem + 3.3vw, 4.25rem); line-height: 1.02; }
.title__h .hl, .hl { color: var(--sc-accent); }
.title__meta { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.title__meta strong { color: var(--sc-ink); font-weight: 500; }
.title__tags--inner { max-width: 15rem; }
.title__tags--inner .tag { font-size: var(--sc-t-sm); font-weight: 500; }
.crumbs ol { list-style: none; margin: 0 0 var(--sc-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sc-2); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.crumbs li + li::before { content: "/"; margin-right: var(--sc-2); opacity: 0.5; }
.crumbs a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--sc-ink); text-decoration: underline; } }
@media (max-width: 860px) {
  .title--inner { grid-template-columns: 1fr; }
  .title--inner .title__h { font-size: clamp(2rem, 1.1rem + 4.6vw, 2.9rem); }
  .title__tags--inner { max-width: none; grid-template-columns: repeat(2, auto); }
}

/* --------------------------------------------------------- what's included -- */
.ch--inc { padding-block: var(--sc-section); }
.inc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-8) var(--sc-9); align-items: start; }
.inc__head { position: sticky; top: var(--sc-9); }
.inc__list { list-style: none; margin: 0; padding: 0; counter-reset: inc; }
.inc__row {
  position: relative; padding: var(--sc-5) 0 var(--sc-5) 3.2rem;
  border-top: 1px solid var(--paper-line);
}
.inc__row:last-child { border-bottom: 1px solid var(--paper-line); }
/* A small accent mark that fills in as the row enters: a checklist being ticked. */
.inc__row::before {
  content: ""; position: absolute; left: 0; top: calc(var(--sc-5) + 0.35rem);
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  border: 1.5px solid var(--sc-accent);
  background: radial-gradient(circle, var(--sc-accent) 0 38%, transparent 40%);
  transform: scale(0.6); opacity: 0.4;
  transition: transform 520ms var(--sc-ease-out), opacity 520ms var(--sc-ease-out);
}
.inc__row.sc-in::before { transform: scale(1); opacity: 1; transition-delay: 260ms; }
.inc__name { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; }
.inc__desc { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); max-width: 58ch; text-wrap: pretty; }
@media (max-width: 960px) {
  .inc { grid-template-columns: 1fr; gap: var(--sc-6); }
  .inc__head { position: static; }
  .inc__row { padding-left: 2.6rem; }
  .inc__name { font-size: var(--sc-t-lg); }
}

/* -------------------------------------------------------------- claims -- */
.ch--claims { padding-block: var(--sc-section); overflow: clip; }
.claims__h { max-width: 16ch; }
.claims__list { list-style: none; margin: var(--sc-8) 0 0; padding: 0; display: grid; gap: var(--sc-8); }
.claim { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-4) var(--sc-8); align-items: baseline; }
.claim:nth-child(2) { margin-left: 8vw; }
.claim:nth-child(3) { margin-left: 16vw; }
.claim__t {
  margin: 0; font-family: var(--sc-font-display); font-variation-settings: "opsz" 96;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1;
}
.claim__d { margin: 0; color: var(--sc-ink-soft); max-width: 44ch; text-wrap: pretty; }
@media (max-width: 860px) {
  .claims__list { gap: var(--sc-6); margin-top: var(--sc-6); }
  .claim, .claim:nth-child(n) { grid-template-columns: 1fr; margin-left: 0; }
  .claim__t { font-size: var(--sc-t-2xl); }
}

/* ----------------------------------------------------------------- faq -- */
.ch--faq { padding-block: var(--sc-section); }
.faq { max-width: 60rem; }
.faq__list { margin-top: var(--sc-7); border-top: 1px solid var(--paper-line); }
.faq__item { border-bottom: 1px solid var(--paper-line); }
.faq__q {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: var(--sc-5); align-items: center;
  padding: var(--sc-5) 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25;
  border-radius: var(--sc-r-sm);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; width: 1.1rem; height: 1.1rem; flex: none;
  background:
    linear-gradient(var(--sc-accent), var(--sc-accent)) center / 100% 2px no-repeat,
    linear-gradient(var(--sc-accent), var(--sc-accent)) center / 2px 100% no-repeat;
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.faq__item[open] .faq__q::after { transform: rotate(135deg); }
@media (hover: hover) and (pointer: fine) { .faq__q:hover { color: var(--sc-accent); } }
.faq__a { padding: 0 0 var(--sc-6); max-width: 64ch; color: var(--sc-ink-soft); }
.faq__a p { margin: 0; text-wrap: pretty; }
.faq__item[open] .faq__a { animation: faq-in 420ms var(--sc-ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .faq__q { font-size: var(--sc-t-base); padding: var(--sc-4) 0; } }

/* ------------------------------------------------------------ colophon -- */
.colophon__h { max-width: 18ch; }
.colophon__run { margin-top: var(--sc-5); }
.colophon__run--small { font-size: var(--sc-t-base); color: var(--sc-ink-soft); }

/* ---------------------------------------------- signature: tracking path --
   The stage holds while a line runs through the seven steps a conversion takes,
   each node lighting as the line reaches it. Driven by --sc-p from the engine. */
.path { background: var(--sc-canvas); display: flex; align-items: center; }
.path__inner { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: 0 var(--sc-gutter); }
.path__head { max-width: 44rem; margin-bottom: clamp(3rem, 9vh, 5.5rem); }
.path__head .sc-body { margin-top: var(--sc-5); }
.path__nodes { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--count), minmax(0, 1fr)); gap: var(--sc-4); }
.path__line { position: absolute; left: 0; right: 0; top: 0.55rem; width: 100%; height: 2px; }
.path__line line { stroke: var(--sc-accent); stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: calc(1000 * (1 - clamp(0, (var(--sc-p) - 0.05) / 0.8, 1))); vector-effect: non-scaling-stroke; }
.node { --on: clamp(0, (var(--sc-p) - 0.05 - var(--n) / var(--count) * 0.8) / 0.06, 1); position: relative; }
.node__dot {
  display: block; width: 1.1rem; height: 1.1rem; border-radius: 50%; position: relative; z-index: 1;
  background: color-mix(in oklab, var(--sc-accent) calc(var(--on) * 100%), var(--sc-canvas));
  border: 2px solid color-mix(in oklab, var(--sc-accent) calc(40% + var(--on) * 60%), transparent);
  transform: scale(calc(0.8 + 0.4 * var(--on)));
  transition: transform 180ms var(--sc-ease-out);
}
.node__t { display: block; margin-top: var(--sc-4); font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-base); letter-spacing: -0.01em; line-height: 1.2;
  opacity: calc(0.35 + 0.65 * var(--on)); }
.node__d { display: block; margin-top: var(--sc-2); font-size: var(--sc-t-xs); line-height: 1.45; color: var(--sc-ink-soft);
  opacity: var(--on); transform: translateY(calc((1 - var(--on)) * 6px)); }
@media (max-width: 860px) {
  .path { align-items: start; }
  .path__inner { padding-top: 4.6rem; }
  .path__head { margin-bottom: var(--sc-5); }
  .path__head h2 { font-size: var(--sc-t-xl); }
  .path__head .sc-body { font-size: var(--sc-t-sm); margin-top: var(--sc-3); }
  .path__nodes { grid-template-columns: 1fr; gap: 0.9rem; }
  .path__line { left: 0.5rem; right: auto; top: 0; bottom: 0; width: 2px; height: 100%; }
  .node { display: grid; grid-template-columns: 1.1rem 1fr; column-gap: var(--sc-4); align-items: baseline; }
  .node__t { margin-top: 0; font-size: var(--sc-t-sm); }
  .node__d { grid-column: 2; margin-top: 0.1rem; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .path__head .sc-body { display: none; }
  .path__nodes { gap: 0.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .node { --on: 1; }
  .path__line line { stroke-dashoffset: 0; }
}
html:not(.js) .node { --on: 1; }
html:not(.js) .path__line line { stroke-dashoffset: 0; }
html:not(.js) .path { padding-block: var(--sc-8); }

/* ------------------------------------------------ signature: audit leaks --
   Five leaks arrive one by one; a moment later each is stamped as checked. */
.leaks { background: var(--sc-canvas); display: flex; align-items: center; }
.leaks__inner { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: 0 var(--sc-gutter);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sc-8); align-items: center; }
.leaks__head .sc-body { margin-top: var(--sc-5); }
.leaks__more { margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); }
.leaks__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.leak {
  --in: clamp(0, (var(--sc-p) - 0.06 - var(--n) * 0.15) / 0.07, 1);
  --ok: clamp(0, (var(--sc-p) - 0.14 - var(--n) * 0.15) / 0.05, 1);
  position: relative; padding: var(--sc-4) 7.5rem var(--sc-4) var(--sc-5);
  background: var(--sc-surface); border-radius: var(--sc-r-md); border: 1px solid var(--paper-line);
  box-shadow: var(--sc-e2), var(--sc-edge);
  opacity: calc(0.2 + 0.8 * var(--in)); transform: translateX(calc((1 - var(--in)) * 28px));
}
.leak__t { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); letter-spacing: -0.015em; line-height: 1.2; }
.leak__d { margin: var(--sc-1) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; text-wrap: pretty; }
.leak__stamp {
  position: absolute; right: var(--sc-4); top: 50%; translate: 0 -50%;
  padding: 0.3rem 0.65rem; border-radius: var(--sc-r-pill); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.02em;
  color: var(--sc-accent-ink); background: var(--sc-accent);
  opacity: var(--ok); transform: scale(calc(0.7 + 0.3 * var(--ok))) rotate(calc((1 - var(--ok)) * -8deg));
}
@media (max-width: 960px) {
  .leaks { align-items: start; }
  .leaks__inner { grid-template-columns: 1fr; gap: var(--sc-5); padding-top: 4.6rem; }
  .leaks__head h2 { font-size: var(--sc-t-xl); }
  .leaks__head .sc-body { font-size: var(--sc-t-sm); margin-top: var(--sc-3); }
  .leaks__more { margin-top: var(--sc-3); }
  .leak { padding: var(--sc-3) 5.6rem var(--sc-3) var(--sc-4); }
  .leak__t { font-size: var(--sc-t-sm); }
  .leak__d { font-size: var(--sc-t-xs); }
  .leak__stamp { right: var(--sc-3); font-size: 0.66rem; }
}
@media (max-width: 960px) and (max-height: 900px) { .leaks__head .sc-body { display: none; } }
@media (max-width: 960px) and (max-height: 700px) { .leak__d { display: none; } }
@media (prefers-reduced-motion: reduce) { .leak { --in: 1; --ok: 1; transform: none; } }
html:not(.js) .leak { --in: 1; --ok: 1; }
html:not(.js) .leaks { padding-block: var(--sc-8); }

/* ------------------------------------------------ signature: formats --
   One frame, four ratios. pages.js drives --fx/--fy from the act's progress;
   the box scales, the face on top of it never distorts. */
.formats { background: var(--sc-canvas); display: flex; align-items: center; }
.formats__inner { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: 0 var(--sc-gutter);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sc-8); align-items: center; }
.formats__head .sc-body { margin-top: var(--sc-5); }
.formats__list { list-style: none; margin: var(--sc-7) 0 0; padding: 0; border-top: 1px solid var(--paper-line); }
.fmt { display: grid; grid-template-columns: 4.2rem 7rem 1fr; gap: var(--sc-4); align-items: baseline; padding: 0.7rem 0;
  border-bottom: 1px solid var(--paper-line); color: var(--sc-ink-soft); transition: color var(--sc-d-base) var(--sc-ease-out); }
.fmt__r { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fmt__n { font-weight: 500; }
.fmt__u { font-size: var(--sc-t-sm); }
.fmt.is-on { color: var(--sc-ink); }
.fmt.is-on .fmt__r { color: var(--sc-accent); }
.frame { --fx: 1; --fy: 1; position: relative; width: min(24rem, 30vw); aspect-ratio: 1; justify-self: center; }
.frame__box {
  position: absolute; inset: 0; border-radius: var(--sc-r-lg);
  background: var(--sc-surface); border: 1px solid var(--paper-line); box-shadow: var(--sc-e3), var(--sc-edge);
  transform: scale(var(--fx), var(--fy)); will-change: transform;
}
.frame__face { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--sc-4); }
.frame__face img { width: 4.5rem; height: 4.5rem; }
.frame__ratio { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-3xl); letter-spacing: -0.04em; line-height: 1; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
  .formats { align-items: start; }
  .formats__inner { grid-template-columns: 1fr; gap: var(--sc-5); padding-top: 4.6rem; }
  .formats__head h2 { font-size: var(--sc-t-xl); }
  .formats__head .sc-body { font-size: var(--sc-t-sm); margin-top: var(--sc-3); }
  .formats__list { margin-top: var(--sc-4); }
  .fmt { grid-template-columns: 3.2rem 5.5rem 1fr; gap: var(--sc-3); padding: 0.45rem 0; }
  .fmt__r { font-size: var(--sc-t-base); }
  .fmt__u, .fmt__n { font-size: var(--sc-t-xs); }
  .frame { width: min(12rem, 46vw); order: -1; }
  .frame__face img { width: 2.6rem; height: 2.6rem; }
  .frame__ratio { font-size: var(--sc-t-2xl); }
}
@media (max-width: 960px) and (max-height: 700px) { .formats__head .sc-body { display: none; } .frame { width: 9rem; } }
html:not(.js) .formats { padding-block: var(--sc-8); }

/* ------------------------------------------------ signature: roles split --
   Two columns share the stage; as the act resolves the divider leans toward
   "us", the guidance recedes and "you" keeps the floor. */
.split { background: var(--sc-canvas); display: flex; align-items: center; }
.split__inner { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: 0 var(--sc-gutter); }
.split__h { margin-bottom: var(--sc-7); }
.split__cols { --r: clamp(0, (var(--sc-p) - 0.55) / 0.3, 1); position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-9); }
.split__divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--sc-accent);
  transform: translateX(calc(var(--r) * 5vw)) scaleY(calc(0.4 + 0.6 * clamp(0, var(--sc-p) / 0.3, 1))); transform-origin: top; }
.split__label { margin: 0 0 var(--sc-4); font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); font-weight: 600; letter-spacing: -0.03em; }
.split__col--you .split__label { color: var(--sc-accent); }
.split__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.split__items li { --in: clamp(0, (var(--sc-p) - 0.05 - var(--k) * 0.06) / 0.1, 1);
  font-size: var(--sc-t-lg); line-height: 1.35; letter-spacing: -0.01em; opacity: var(--in); transform: translateY(calc((1 - var(--in)) * 10px)); }
.split__col--us .split__items li { font-size: var(--sc-t-base); color: var(--sc-ink-soft); padding-left: 1.1rem; position: relative; }
.split__col--us .split__items li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45rem; height: 1.5px; background: currentColor; }
.split__col--us { opacity: calc(1 - 0.45 * var(--r)); transform: translateX(calc(var(--r) * 5vw)) scale(calc(1 - 0.1 * var(--r))); transform-origin: left center; }
.split__resolve { margin: var(--sc-7) 0 0; max-width: 26ch; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2;
  opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 14px)); }
@media (max-width: 860px) {
  .split { align-items: start; }
  .split__inner { padding-top: 4.6rem; }
  .split__h { margin-bottom: var(--sc-5); font-size: var(--sc-t-xl); }
  .split__cols { grid-template-columns: 1fr; gap: var(--sc-5); }
  .split__divider { display: none; }
  .split__col--us { transform: none; opacity: calc(1 - 0.35 * var(--r)); }
  .split__label { font-size: var(--sc-t-xl); margin-bottom: var(--sc-2); }
  .split__items li { font-size: var(--sc-t-sm); }
  .split__col--us .split__items li { font-size: var(--sc-t-xs); }
  .split__resolve { margin-top: var(--sc-4); font-size: var(--sc-t-base); }
}
@media (prefers-reduced-motion: reduce) {
  .split__col--us, .split__divider { transform: none; }
  .split__items li { --in: 1; transform: none; }
  .split__cols { --r: 1; }
  .split__resolve { transform: none; }
}
html:not(.js) .split__items li, html:not(.js) .split__resolve { --in: 1; opacity: 1; transform: none; }
html:not(.js) .split { padding-block: var(--sc-8); }

/* ------------------------------------------------ signature: platform stack --
   Sticky cards that pile on each other as the reader scrolls: depth by overlap. */
.ch--stackp { padding-block: var(--sc-section); }
.stackp__h { max-width: 20ch; margin-bottom: var(--sc-8); }
.stackp__list { list-style: none; margin: 0; padding: 0; }
.pcard {
  position: sticky; top: calc(6.5rem + var(--i) * 1.6rem);
  min-height: 17rem; margin-bottom: 30vh; padding: var(--sc-7);
  background: var(--sc-surface); border: 1px solid var(--paper-line); border-radius: var(--sc-r-lg);
  box-shadow: 0 -1px 0 color-mix(in oklab, var(--sc-ink) 4%, transparent), var(--sc-e3), var(--sc-edge);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-4) var(--sc-8); align-content: start;
}
.pcard:last-child { margin-bottom: 0; }
.pcard__n { margin: 0; font-family: var(--sc-font-display); font-variation-settings: "opsz" 96; font-size: var(--sc-t-3xl); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; }
.pcard__d { margin: 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); text-wrap: pretty; }
.pcard__more { grid-column: 2; font-size: var(--sc-t-sm); justify-self: start; }
@media (max-width: 860px) {
  .pcard { grid-template-columns: 1fr; padding: var(--sc-5); min-height: 0; margin-bottom: 20vh; top: calc(4.8rem + var(--i) * 1rem); }
  .pcard__n { font-size: var(--sc-t-2xl); }
  .pcard__d { font-size: var(--sc-t-base); }
  .pcard__more { grid-column: 1; }
}

/* ---------------------------------------------------------- stats (platforms) -- */
.ch--stats { padding-block: var(--sc-section); }
.stats__head { max-width: 44rem; }
.stats__list { list-style: none; margin: var(--sc-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-5); }
.stat { padding-top: var(--sc-4); border-top: 2px solid var(--sc-ink); }
.stat__v { margin: 0; display: flex; align-items: baseline; gap: 0.06em; font-family: var(--sc-font-display); font-variation-settings: "opsz" 96;
  font-size: clamp(2.4rem, 1.4rem + 2.6vw, 4.2rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.stat__u { font-size: 0.42em; font-weight: 500; letter-spacing: -0.01em; color: var(--sc-ink); margin-left: 0.12em; }
.stat__s { font-weight: 500; }
.stat__l { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.stats__note { margin: var(--sc-6) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 70ch; }
@media (max-width: 960px) { .stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-6) var(--sc-5); } }

/* Real Ads Manager rows, in a staggered pile of sheets. */
.proofgrid { margin-top: var(--sc-9); }
.proofgrid__head { margin: 0 0 var(--sc-5); font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.proofgrid__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5); align-items: start; }
.proof--grid:nth-child(2) { margin-top: var(--sc-8); }
.proof--grid:nth-child(3) { margin-top: calc(var(--sc-6) * -1); }
.proofgrid__note { margin: var(--sc-5) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .proofgrid__list { grid-template-columns: 1fr; }
  .proof--grid:nth-child(n) { margin-top: 0; }
  .proof--grid .proof__head { flex-direction: column; gap: 0.15rem; white-space: normal; }
}

/* -------------------------------------------------------------- essay -- */
.ch--essay { padding-block: var(--sc-section); }
.essay { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-7) var(--sc-9); align-items: start; }
.essay__h { grid-column: 1 / -1; max-width: 22ch; }
.essay__body p { margin: 0 0 var(--sc-5); font-size: var(--sc-t-lg); line-height: 1.55; color: var(--sc-ink); max-width: 62ch; text-wrap: pretty; }
.essay__body p:first-child::first-letter { font-family: var(--sc-font-display); font-weight: 600; color: var(--sc-accent); }
.essay__pillars { list-style: none; margin: 0; padding: 0; position: sticky; top: var(--sc-9); }
.pillar { position: relative; padding: var(--sc-5) var(--sc-6); background: var(--sc-surface); border: 1px solid var(--paper-line); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2), var(--sc-edge); translate: calc(var(--k) * 1.2rem) 0; }
.pillar + .pillar { margin-top: -0.35rem; }
.pillar__t { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.pillar__d { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.55; text-wrap: pretty; }
@media (max-width: 960px) {
  .essay { grid-template-columns: 1fr; }
  .essay__pillars { position: static; }
  .pillar { translate: none; }
  .pillar + .pillar { margin-top: var(--sc-3); }
  .essay__body p { font-size: var(--sc-t-base); }
}

/* ---------------------------------------------------------- scrollspy -- */
.ch--spy { padding-block: var(--sc-section); }
.spy__head { max-width: 44rem; }
.spy__grid { margin-top: var(--sc-8); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sc-9); align-items: start; }
.spy__nav { position: sticky; top: var(--sc-9); }
.spy__nav ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--paper-line); }
.spy__nav a { display: block; padding: 0.55rem 0 0.55rem var(--sc-5); margin-left: -1px; border-left: 2px solid transparent; text-decoration: none;
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500; letter-spacing: -0.015em; color: var(--sc-ink-soft);
  transition: color var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out); }
.spy__nav a.is-on { color: var(--sc-ink); border-left-color: var(--sc-accent); transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) { .spy__nav a:hover { color: var(--sc-ink); } }
.spy__panel { padding: var(--sc-7) 0; border-top: 1px solid var(--paper-line); scroll-margin-top: var(--sc-9); }
.spy__panel:first-child { border-top: 0; padding-top: 0; }
.spy__t { margin: 0; font-family: var(--sc-font-display); font-variation-settings: "opsz" 96; font-size: var(--sc-t-2xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.spy__d { margin: var(--sc-4) 0 0; font-size: var(--sc-t-lg); line-height: 1.55; max-width: 60ch; text-wrap: pretty; }
@media (max-width: 960px) {
  .spy__grid { grid-template-columns: 1fr; gap: var(--sc-5); }
  .spy__nav { position: static; }
  .spy__nav ol { display: flex; flex-wrap: wrap; gap: var(--sc-2); border: 0; }
  .spy__nav a { padding: 0.35rem 0.75rem; border: 1px solid var(--paper-line); border-radius: var(--sc-r-pill); font-size: var(--sc-t-sm); margin: 0; }
  .spy__nav a.is-on { transform: none; border-color: var(--sc-accent); }
  .spy__t { font-size: var(--sc-t-xl); }
  .spy__d { font-size: var(--sc-t-base); }
}

/* ------------------------------------------------------------- market -- */
.ch--market { padding-block: var(--sc-section); }
.market__head { max-width: 44rem; }
.market__list { list-style: none; margin: var(--sc-8) 0 0; padding: 0; display: grid; gap: var(--sc-8); }
.mk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-4) var(--sc-8); padding-top: var(--sc-6); border-top: 1px solid var(--paper-line); }
.mk:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mk:nth-child(even) .mk__t { order: 2; text-align: right; }
.mk__t { margin: 0; font-family: var(--sc-font-display); font-variation-settings: "opsz" 96; font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.mk__d { margin: 0; font-size: var(--sc-t-base); line-height: 1.65; color: var(--sc-ink); max-width: 60ch; text-wrap: pretty; }
.market__close { margin: var(--sc-8) 0 0; padding: var(--sc-6) var(--sc-7); max-width: 62rem; font-size: var(--sc-t-lg); line-height: 1.5;
  background: var(--sc-surface); border-radius: var(--sc-r-md); border: 1px solid var(--paper-line); box-shadow: var(--sc-e1), var(--sc-edge); }
@media (max-width: 860px) {
  .mk, .mk:nth-child(even) { grid-template-columns: 1fr; }
  .mk:nth-child(even) .mk__t { order: 0; text-align: left; }
  .mk__t { font-size: var(--sc-t-xl); }
  .market__close { padding: var(--sc-5); font-size: var(--sc-t-base); }
}

/* -------------------------------------------------------- testimonial -- */
.ch--tq { padding-block: var(--sc-section); overflow: clip; }
.tq { position: relative; }
.tq__far { position: absolute; right: -2vw; top: -10vh; pointer-events: none; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(16rem, 38vw, 34rem); line-height: 0.7;
  color: color-mix(in oklab, var(--sc-accent) 9%, transparent); }
.tq__q { position: relative; margin: 0; max-width: 58rem; }
.tq__pull { margin: 0; }
.tq__text { margin: var(--sc-6) 0 0; max-width: 62ch; text-wrap: pretty; }
.tq__more { margin: var(--sc-6) 0 0; font-size: var(--sc-t-sm); position: relative; }

/* ----------------------------------------------------------- pricing -- */
.ch--calc { padding-block: var(--sc-section); }
.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-7) var(--sc-9); align-items: start; }
.calc__head { grid-column: 1 / -1; max-width: 44rem; }
.calc__panel { position: sticky; top: var(--sc-9); padding: var(--sc-6); background: var(--sc-surface); border-radius: var(--sc-r-lg); border: 1px solid var(--paper-line); box-shadow: var(--sc-e3), var(--sc-edge); }
.calc__cur { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-1); padding: var(--sc-1); background: var(--sc-canvas); border-radius: var(--sc-r-pill); }
.calc__cur button { padding: 0.55rem 0.75rem; border: 0; border-radius: var(--sc-r-pill); background: transparent; font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); cursor: pointer;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); }
.calc__cur button[aria-checked="true"] { background: var(--sc-ink); color: var(--sc-canvas); }
.calc__label { display: block; margin-top: var(--sc-6); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.calc__budget { display: block; margin-top: var(--sc-2); font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.calc__range { width: 100%; margin: var(--sc-4) 0 0; accent-color: var(--sc-accent); height: 1.6rem; cursor: pointer; }
.calc__result { margin-top: var(--sc-6); padding-top: var(--sc-5); border-top: 1px solid var(--paper-line); }
.calc__feelabel { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.calc__fee { margin: var(--sc-1) 0 0; font-family: var(--sc-font-display); font-variation-settings: "opsz" 96; font-size: clamp(2.4rem, 1.6rem + 2vw, 3.6rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.calc__formula { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink); }
.calc__fee.is-gap { font-size: var(--sc-t-xl); letter-spacing: -0.02em; line-height: 1.15; }
html:not(.js) .calc__panel { display: none; }
html:not(.js) .calc { grid-template-columns: 1fr; }
.calc__per { margin: var(--sc-1) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.calc__ladderh { margin: 0 0 var(--sc-4); font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.tiers[hidden] { display: none; }
.tier { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sc-1) var(--sc-5); padding: var(--sc-5); border-radius: var(--sc-r-md); border: 1px solid var(--paper-line); background: transparent;
  transition: background-color var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out), opacity var(--sc-d-base) var(--sc-ease-out); }
.tier__range { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.tier__mode { margin: 0; grid-row: 1; grid-column: 2; align-self: center; font-size: var(--sc-t-xs); font-weight: 500; padding: 0.2rem 0.6rem; border-radius: var(--sc-r-pill); border: 1px solid var(--paper-line); color: var(--sc-ink-soft); }
.tier__formula { margin: 0; grid-column: 1 / -1; font-weight: 500; color: var(--sc-accent); }
.tier__desc { margin: var(--sc-2) 0 0; grid-column: 1 / -1; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.tier__feats { grid-column: 1 / -1; margin: var(--sc-2) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.tier__feats li { font-size: var(--sc-t-xs); padding: 0.2rem 0.55rem; border-radius: var(--sc-r-pill); background: var(--sc-canvas); color: var(--sc-ink); }
.js .calc .tier { opacity: 0.55; }
.js .calc .tier.is-on { opacity: 1; background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge); transform: translateX(-6px); border-color: color-mix(in oklab, var(--sc-accent) 45%, transparent); }
.js .calc .tier.is-on .tier__mode { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); }
.calc__gap { margin: var(--sc-4) 0 0; padding: var(--sc-4) var(--sc-5); border: 1px dashed color-mix(in oklab, var(--sc-accent) 55%, transparent); border-radius: var(--sc-r-md); font-size: var(--sc-t-sm); }
@media (max-width: 960px) {
  .calc { grid-template-columns: 1fr; }
  /* Stacked, the panel sits in the flow: pinned, it covered the grid below. */
  .calc__panel { position: static; padding: var(--sc-5); }
  .calc__label { margin-top: var(--sc-3); }
  .calc__budget { font-size: var(--sc-t-xl); }
  .calc__result { margin-top: var(--sc-3); padding-top: var(--sc-3); display: grid; grid-template-columns: auto 1fr; gap: 0 var(--sc-4); align-items: baseline; }
  .calc__feelabel { grid-column: 1 / -1; }
  .calc__fee { font-size: var(--sc-t-2xl); }
  .calc__formula { margin: 0; font-size: var(--sc-t-xs); }
  .calc__per { grid-column: 1 / -1; }
  .tier { padding: var(--sc-4); }
}

.ch--notes { padding-block: var(--sc-8); }
.notes__list { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-7) var(--sc-8); }
.note { padding-top: var(--sc-4); border-top: 2px solid var(--sc-accent); }
.note__t { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: -0.02em; }
.note__d { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); max-width: 48ch; text-wrap: pretty; }
@media (max-width: 860px) { .notes__list { grid-template-columns: 1fr; gap: var(--sc-5); } .note__t { font-size: var(--sc-t-lg); } }

/* The two ways in: choosing one carries into the inquiry. */
.options { margin-top: var(--sc-7); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5); max-width: 60rem; }
.option { text-align: left; font: inherit; color: inherit; cursor: pointer; display: grid; gap: var(--sc-2); align-content: start; padding: var(--sc-6); border-radius: var(--sc-r-lg);
  background: var(--sc-surface); border: 1.5px solid var(--paper-line); box-shadow: var(--sc-e1), var(--sc-edge);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .option:hover { box-shadow: var(--sc-e2), var(--sc-edge); transform: translateY(-2px); } }
.option:active { transform: translateY(1px); }
.option[aria-pressed="true"] { border-color: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 18%, transparent), var(--sc-e2); }
.option__k { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.option__t { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.option__d { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.option__l { margin: var(--sc-2) 0 0; padding-left: 1.1rem; font-size: var(--sc-t-sm); }
.option__b { justify-self: start; margin-top: var(--sc-3); padding: 0.45rem 0.9rem; border-radius: var(--sc-r-sm); background: var(--sc-ink); color: var(--sc-canvas); font-size: var(--sc-t-sm); font-weight: 500; }
.option[aria-pressed="true"] .option__b { background: var(--sc-accent); color: var(--sc-accent-ink); }
@media (max-width: 860px) { .options { grid-template-columns: 1fr; } .option { padding: var(--sc-5); } }

/* -------------------------------------------------------------- blog -- */
.prose-wrap { max-width: calc(46rem + var(--sc-gutter) * 2); }
@media (min-width: 1100px) { .ch .prose-wrap { max-width: calc(46rem + var(--sc-gutter) * 2 + var(--folio-w) + var(--sc-6)); } }
.ch--prose { padding-block: var(--sc-6); }
.ch--intro { padding-top: 0; }
.prose__h { margin: 0 0 var(--sc-5); font-family: var(--sc-font-display); font-variation-settings: "opsz" 96; font-size: var(--sc-t-2xl); font-weight: 500; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.prose { font-size: 1.1rem; line-height: 1.72; color: var(--sc-ink); }
.prose p { margin: 0 0 1.15em; text-wrap: pretty; }
.prose h3 { margin: 1.8em 0 0.5em; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.prose ol, .prose ul { margin: 0 0 1.2em; padding-left: 1.3rem; }
.prose li { margin: 0 0 0.6em; padding-left: 0.3rem; }
.prose li::marker { color: var(--sc-accent); font-weight: 600; }
.prose strong { font-weight: 600; }
.prose a { color: var(--sc-accent); }
.prose blockquote { margin: 1.4em 0; padding: var(--sc-4) var(--sc-5); border-left: 3px solid var(--sc-accent); background: var(--sc-surface); border-radius: 0 var(--sc-r-md) var(--sc-r-md) 0; }
.prose--lead { font-size: var(--sc-t-lg); }
.page--article .mesure__chapters a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.page--article .mesure__chapters a::before { display: inline-block; vertical-align: middle; margin-right: var(--sc-2); }
.page--article .title--inner .title__h { font-size: clamp(2.1rem, 1rem + 3vw, 3.8rem); }
.author { display: flex; gap: var(--sc-4); align-items: center; padding: var(--sc-5); background: var(--sc-surface); border-radius: var(--sc-r-md); border: 1px solid var(--paper-line); }
.author img { width: 3rem; height: 3rem; flex: none; }
.author__n { margin: 0; font-weight: 600; }
.author__r { margin: var(--sc-1) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (max-width: 860px) { .prose { font-size: 1.02rem; } .prose__h { font-size: var(--sc-t-xl); } }

.ch--posts, .ch--related { padding-block: var(--sc-section); }
.postlist > .sc-body { margin-top: var(--sc-4); }
.posts { list-style: none; margin: var(--sc-7) 0 0; padding: 0; border-top: 1px solid var(--paper-line); }
.post { position: relative; display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto; gap: var(--sc-2) var(--sc-7); padding: var(--sc-6) 0; border-bottom: 1px solid var(--paper-line); }
.post__tag { margin: 0; grid-row: 1 / 3; font-size: var(--sc-t-sm); color: var(--sc-accent); font-weight: 500; }
.post__t { margin: 0; font-family: var(--sc-font-display); font-variation-settings: "opsz" 96; font-size: var(--sc-t-2xl); font-weight: 500; letter-spacing: -0.03em; line-height: 1.08; }
.post__t a { text-decoration: none; color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size var(--sc-d-slow) var(--sc-ease-out); }
.post__t a::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) and (pointer: fine) { .post:hover .post__t a { background-size: 100% 2px; } .post:hover .post__t { color: var(--sc-accent); } }
.post__x { margin: 0; grid-column: 2; color: var(--sc-ink-soft); max-width: 62ch; text-wrap: pretty; }
.post__d { margin: 0; grid-column: 3; grid-row: 1; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); white-space: nowrap; }
.posts--small .post { grid-template-columns: 8rem minmax(0, 1fr); }
.posts--small .post__t { font-size: var(--sc-t-xl); }
@media (max-width: 860px) {
  .post, .posts--small .post { grid-template-columns: 1fr; gap: var(--sc-2); padding: var(--sc-5) 0; }
  .post__tag, .post__x, .post__d { grid-column: 1; grid-row: auto; }
  .post__t { font-size: var(--sc-t-xl); }
}

/* Pinned stages clear the folio on wide screens, like the home's process.
   Last in the file on purpose: every stage above sets its padding with the
   shorthand, which would otherwise reset this. */
@media (min-width: 1100px) {
  .path__inner, .leaks__inner, .formats__inner, .split__inner, .calc__inner {
    padding-left: calc(var(--sc-gutter) + var(--folio-w) + var(--sc-6));
  }
}

/* ------------------------------------------------------------ en bref -- */
/* A signed, dated, self-contained answer, then one comparison table: the
   passage an answer engine can lift whole. */
.ch--brief { padding-block: var(--sc-8); }
.brief { max-width: 60rem; }
.brief__meta { margin: 0 0 var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.brief__meta a { color: var(--sc-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 0.2em; }
.brief__q { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.brief__a { margin: var(--sc-4) 0 0; font-size: var(--sc-t-lg); line-height: 1.55; max-width: 62ch; text-wrap: pretty; }
.brief__cmp { margin-top: var(--sc-7); }
.brief__th { margin: 0 0 var(--sc-4); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500; letter-spacing: -0.015em; }
.brief__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--paper-line); border-radius: var(--sc-r-md); background: var(--sc-surface); }
.brief__table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: var(--sc-t-sm); line-height: 1.45; }
.brief__table th, .brief__table td { padding: 0.8rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--paper-line); }
.brief__table thead th { border-top: 0; font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; }
.brief__table tbody th { font-weight: 600; color: var(--sc-ink); white-space: nowrap; }
.brief__table td { color: var(--sc-ink); }
.brief__note { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.brief__a { font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); }
/* Phones: the table becomes one card per criterion, each value under its column name. */
@media (max-width: 600px) {
  .brief__scroll { border: 0; background: none; overflow: visible; }
  .brief__table { min-width: 0; }
  .brief__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .brief__table tbody, .brief__table tr, .brief__table th, .brief__table td { display: block; }
  .brief__table tr { margin-bottom: var(--sc-3); border: 1px solid var(--paper-line); border-radius: var(--sc-r-md); background: var(--sc-surface); padding: 0.4rem 0; }
  .brief__table th, .brief__table td { border-top: 0; padding: 0.35rem 1rem; }
  .brief__table tbody th { white-space: normal; font-size: var(--sc-t-base); }
  .brief__table td::before { content: attr(data-label); display: block; font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 0.15rem; }
}