/* ============================================================================
   VECREAL — FIELD / ABOUT
   Page-scoped compositions for v2-about: the productivity divergence figure,
   the engagement schedule (WBS Gantt), and the founder relayout. Tokens and
   base components come from field.css / field-parts.css; nothing here
   redefines them. Loaded after field-parts.css, only on v2-about.
   ========================================================================== */

/* ==========================================================================
   PRODUCTIVITY DIVERGENCE — claim copy beside a machined line chart
   ========================================================================== */
.prod{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.55fr);gap:clamp(26px,3.6vw,64px);
  align-items:center;margin-top:clamp(34px,4vw,56px)}
.prod-copy p{font-size:clamp(17px,1.5vw,20px);line-height:1.55;letter-spacing:-.012em;color:var(--mute);
  max-width:34ch;text-wrap:pretty}
.prod-copy p b{color:var(--ink);font-weight:580}

.prod-fig{position:relative;border-radius:var(--r-3);border:var(--hair) solid var(--line);background:var(--bg-1);
  box-shadow:var(--inner),var(--lift-sm);overflow:hidden;margin:0}
.prod-hd{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:var(--hair) solid var(--line-2);font-family:var(--mono);
  font-size:var(--mono-m1-size);font-weight:var(--mono-m1-weight); /* M1 */
  letter-spacing:var(--mono-m1-track);text-transform:uppercase;color:var(--mute)}
.prod-hd span{white-space:nowrap}
.prod-hd span:last-child{margin-left:auto}
.prod-hd .t{color:var(--accent)}
.prod-plot{padding:20px 20px 8px}
.prod-cv{position:relative}
.prod-cv svg{display:block;width:100%;height:auto}
/* end labels ride the canvas as HTML so they never scale away on small screens */
.pl{position:absolute;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:var(--mono-m3-size);letter-spacing:var(--mono-m3-track); /* M3 */
  font-weight:600;color:var(--mute);background:var(--bg-1);
  border:var(--hair) solid var(--line);border-radius:var(--r-1);padding:4px 9px;white-space:nowrap}
.pl i{width:13px;height:2px;border-radius:1px;background:currentColor;flex:none}
.pl-econ{right:9.7%;top:27%;transform:translateY(-135%);color:var(--ink)}
.pl-con{right:9.7%;top:78.6%;transform:translateY(32%);color:var(--accent);border-color:var(--clay-line)}
.pl-base{position:absolute;left:0;top:76.9%;transform:translateY(-50%);font-family:var(--mono);
  font-size:var(--mono-m3-size);letter-spacing:var(--mono-m3-track); /* M3 */
  color:var(--mute);background:var(--bg-1);padding:1px 6px 1px 0}
.prod-x{position:relative;height:16px;margin-top:8px}
.prod-x i{position:absolute;top:0;font-style:normal;font-family:var(--mono);
  font-size:var(--mono-m3-size);letter-spacing:var(--mono-m3-track); /* M3 */
  color:var(--mute);transform:translateX(-50%)}
.prod-x i:nth-child(1){left:0;transform:none}
.prod-x i:nth-child(2){left:17.22%}
.prod-x i:nth-child(3){left:34.44%}
.prod-x i:nth-child(4){left:51.67%}
.prod-x i:nth-child(5){left:68.89%}
.prod-x i:nth-child(6){left:86.11%}
.prod-ft{display:block;padding:10px 18px;border-top:var(--hair) solid var(--line-2);
  font-family:var(--mono);font-size:var(--mono-m2-size);font-weight:var(--mono-m2-weight); /* M2 */
  letter-spacing:var(--mono-m2-track);text-transform:uppercase;color:var(--mute)}
@media(max-width:880px){
  .prod{grid-template-columns:1fr;gap:22px;align-items:start}
  .prod-copy p{max-width:52ch}
}
/* small screens: the end labels leave the canvas and become a legend row above
   the plot, so they never sit over the lines */
@media(max-width:560px){
  .prod-cv{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
  .prod-cv svg{order:2;width:100%}
  .pl{position:static;transform:none;order:1}
  .pl-base{display:none}
}
@media(max-width:480px){
  .prod-plot{padding:16px 12px 6px}
  .pl{padding:3px 7px;gap:5px}
}

/* ==========================================================================
   ENGAGEMENT SCHEDULE — the production WBS Gantt, restated in field tokens.
   Engraved track slots per phase; clay bars ride the slots; week columns in
   mono. The lane is decorative (aria-hidden): the row text carries the data.
   ========================================================================== */
.gsched{--gs-cols:56px minmax(0,225px) 100px minmax(0,1fr);
  border-radius:var(--r-3);border:var(--hair) solid var(--line);background:var(--bg-1);
  box-shadow:var(--inner),var(--lift-sm);overflow:hidden}
.gs-cap{padding:13px 18px;text-align:center;border-bottom:var(--hair) solid var(--line-2)}
.gs-cap b{font-size:15px;font-weight:620;letter-spacing:-.014em;color:var(--ink)}
.gs-hd{display:grid;grid-template-columns:var(--gs-cols);background:var(--bg-2);
  border-bottom:var(--hair) solid var(--line);font-family:var(--mono);
  font-size:var(--mono-m1-size);font-weight:var(--mono-m1-weight); /* M1 */
  letter-spacing:var(--mono-m1-track);text-transform:uppercase;color:var(--mute)}
.gs-hd>span{padding:11px 14px;border-right:var(--hair) solid var(--line-2)}
.gs-hd>span:nth-child(3){border-right:var(--hair) solid var(--line)}
.gs-hd .gs-weeks{position:relative;padding:0;border-right:0}
.gs-weeks i{position:absolute;top:50%;transform:translateY(-50%);font-style:normal;
  color:var(--mute)}
.gs-weeks i:nth-child(1){left:8px}
.gs-weeks i:nth-child(2){left:calc(16.666% + 8px)}
.gs-weeks i:nth-child(3){left:calc(33.333% + 8px)}
.gs-weeks i:nth-child(4){left:calc(50% + 8px)}
.gs-weeks i:nth-child(5){left:calc(66.666% + 8px)}
.gs-weeks i:nth-child(6){left:calc(83.333% + 8px)}

.gs-row{display:grid;grid-template-columns:var(--gs-cols);grid-template-rows:auto auto;
  border-bottom:var(--hair) solid var(--line-2);transition:background var(--m-2) var(--e-fast)}
.gs-row:last-child{border-bottom:0}
.gs-row:hover{background:var(--clay-soft)}
.gs-row:hover .gx-bar{filter:brightness(1.06)}
.gx-no{grid-column:1;grid-row:1/3;padding:16px 14px;font-family:var(--mono);
  font-size:var(--mono-m3-size);letter-spacing:var(--mono-m3-track); /* M3 */
  font-weight:700;color:var(--accent);border-right:var(--hair) solid var(--line-2)}
.gx-nm{grid-column:2;grid-row:1;padding:14px 14px 2px;font-size:16px;font-weight:580;letter-spacing:-.016em;
  color:var(--ink)}
.gx-du{grid-column:3;grid-row:1;padding:16px 14px 2px;font-family:var(--mono);
  font-size:var(--mono-m3-size);letter-spacing:var(--mono-m3-track); /* M3 */
  color:var(--mute);
  border-right:var(--hair) solid var(--line)}
.gx-de{grid-column:2/4;grid-row:2;padding:4px 14px 16px;font-size:var(--t-cap);line-height:1.55;
  color:var(--mute);border-right:var(--hair) solid var(--line);margin:0}
/* the timeline lane: week columns scribed as hairlines, one engraved slot per
   phase, the clay bar riding the slot */
.gx-lane{grid-column:4;grid-row:1/3;position:relative;min-height:72px;
  background-image:repeating-linear-gradient(90deg,var(--line-2) 0 var(--hair),transparent var(--hair) 16.666%)}
.gx-track{position:absolute;left:0;right:0;top:50%;height:20px;transform:translateY(-50%);border-radius:4px;
  background:var(--bg-2);
  box-shadow:inset 0 2px 6px -3px rgba(25,24,23,.16),inset 0 0 0 var(--hair) rgba(25,24,23,.05)}
.gx-bar{position:absolute;top:50%;height:14px;transform:translateY(-50%);border-radius:3px;
  background:var(--clay-display);box-shadow:inset 0 0 0 var(--hair) rgba(0,0,0,.18)}
.gx-bar.ongoing{clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%)}
/* entrance: bars machine out left-to-right once the schedule is on stage */
html.field-ready .gsched .gx-bar{transform:translateY(-50%) scaleX(0);transform-origin:left center;
  transition:transform var(--m-4) var(--e-out) calc(var(--gi,0)*150ms)}
html.field-ready .gsched.in .gx-bar{transform:translateY(-50%) scaleX(1)}
@media(prefers-reduced-motion:reduce){
  html.field-ready .gsched .gx-bar{transform:translateY(-50%) scaleX(1);transition:none}
}
@media(max-width:760px){
  .gsched{--gs-cols:44px 1fr 92px}
  .gs-hd .gs-weeks{display:none}
  .gs-hd>span{padding:10px 10px}
  .gs-hd>span:nth-child(3){border-right:0}
  .gx-no{padding:14px 10px}
  .gx-nm{padding:12px 10px 2px;font-size:14.5px}
  .gx-du{padding:14.5px 10px 2px;border-right:0}
  .gx-de{padding:3px 10px 14px;border-right:0}
  .gx-lane{display:none}
}

/* ==========================================================================
   FOUNDER — portrait + letter on top, credentials as a 4-up row below
   ========================================================================== */
.founder .who .wr{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.founder .who .li{display:inline-flex;align-items:center;gap:6px;margin-top:0;font-size:12px;font-weight:560;
  letter-spacing:-.008em;color:var(--mute);border:var(--hair) solid var(--line);border-radius:100px;
  padding:4px 10px 4px 9px;
  transition:color var(--m-1) var(--e-fast),border-color var(--m-1) var(--e-fast)}
.founder .who .li:hover{color:var(--accent);border-color:var(--clay-line)}
.founder .who .li svg{width:12px;height:12px;fill:currentColor;flex:none}
.fcred{margin-top:clamp(28px,3.4vw,48px)}

/* ==========================================================================
   THE BELIEF — variance, the three steps as they work today, and the answer
   attached to the step it answers.
   ========================================================================== */
/* ============================================================================
   VECREAL — ABOUT EVIDENCE / REFINED C
   Isolated workshop. A single twelve-column spine carries the diagnosis,
   register, evidence, and mission. The chart is embedded in the argument
   rather than presented as a floating card.
   ========================================================================== */

.belief-refined{
  padding-block:clamp(7rem,10.5vw,10.5rem);
}

/* One grid governs every major alignment in the section. */
.belief-intro,
.evidence-continuation,
.mission-payoff{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(1rem,1.5vw,1.5rem);
}

.belief-intro{
  align-items:end;
  margin-block-end:clamp(4.5rem,6.5vw,6.5rem);
}
.belief-title{
  grid-column:1 / 9;
  max-width:21ch;
}
.belief-lead{
  grid-column:9 / -1;
  max-width:37ch;
}

/* The register and evidence are one ruled case, not separate sections. */
.belief-case{
  border-block-start:var(--hair) solid var(--line);
}
.variance-register{
  display:grid;list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(12,minmax(0,1fr));
  border-block-start:0;
  border-block-end:var(--hair) solid var(--line);
}
.variance-register li{
  grid-column:span 4;
  padding-block:clamp(1.5rem,2.2vw,2rem) clamp(2.5rem,3.5vw,3.5rem);
}
.variance-register h3{
  max-width:18ch;
}

/* Evidence continues directly from the register's lower rule. */
.evidence-continuation{
  align-items:start;
  padding-block-start:clamp(2.25rem,3vw,3rem);
}
.evidence-statement{
  grid-column:1 / 5;
  align-self:start;
  padding-block-start:.5rem;
  padding-inline-end:clamp(1rem,2vw,2rem);
}
.evidence-statement p{
  max-width:31ch;
  margin:0;
  color:var(--mute);
  font-size:clamp(1.0625rem,1.35vw,1.25rem);
  line-height:1.56;
  text-wrap:pretty;
}
.evidence-statement p + p{
  margin-block-start:1.25rem;
  color:var(--ink-soft);
  font-size:clamp(1rem,1.12vw,1.0625rem);
  line-height:1.58;
}

.prod-fig{
  grid-column:5 / -1;
  width:100%;
  margin:0;
}

/* The mission is the conclusion, not a labelled sub-component. */
.mission-payoff{
  align-items:start;
  min-height:0;
  margin-block-start:clamp(4rem,5.5vw,5.5rem);
  padding:clamp(2.5rem,3.5vw,3.5rem) 0 0;
  border-block-start:var(--hair) solid var(--line);
  border-inline-start:0;
}
.mission-payoff h3{
  grid-column:1 / 8;
  max-width:20ch;
  margin:0;
  color:var(--ink);
  font-size:clamp(2.5rem,3.8vw,3.5rem);
  font-weight:var(--w-display);
  line-height:var(--lh-stage);
  letter-spacing:var(--ls-stage);
  text-wrap:balance;
}
.mission-body{
  grid-column:9 / -1;
  max-width:39ch;
  margin:0;
  color:var(--mute);
  font-size:clamp(1.0625rem,1.2vw,1.1875rem);
  line-height:1.62;
  text-wrap:pretty;
}

@media(max-width:61.25rem){
  .belief-intro,
  .evidence-continuation,
  .mission-payoff{
    grid-template-columns:1fr;
    row-gap:2rem;
  }
  .belief-title,
  .belief-lead,
  .evidence-statement,
  .prod-fig,
  .mission-payoff h3,
  .mission-body{
    grid-column:1;
  }
  .belief-title,
  .belief-lead{
    max-width:42rem;
  }
  .evidence-statement{
    padding-block-start:0;
    padding-inline-end:0;
  }
  .evidence-statement p{
    max-width:42rem;
  }
}

@media(max-width:45rem){
  .belief-refined{
    padding-block:var(--stage-y);
  }
  .variance-register{
    grid-template-columns:1fr;
    border-block-start:0;
  }
  .variance-register li,
  .variance-register li:first-child,
  .variance-register li:last-child{
    grid-column:1;
    padding:1.5rem 0;
    border-block-start:var(--hair) solid var(--line);
    border-inline-start:0;
  }
  .variance-register li:last-child{
    padding-block-end:2.5rem;
  }
  .evidence-continuation{
    padding-block-start:2rem;
  }
  .mission-payoff{
    margin-block-start:4rem;
    padding-block-start:2.5rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BELIEF D — one argument: the observation, its evidence, the mechanism, and
   the resolution inside the mechanism. No second headline, no bridge prose.
   ═══════════════════════════════════════════════════════════════════════════ */
.belief-head{max-width:none}
.belief-title{margin:0;max-width:24ch;
  font-size:clamp(34px,3.6vw,50px);font-weight:var(--w-display);line-height:1.06;
  letter-spacing:-.03em;color:var(--ink)}
.belief-title span{display:block;color:var(--mute)}
.belief-lead{margin:clamp(18px,2vw,26px) 0 0;max-width:36ch;
  font-size:var(--t-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);color:var(--mute)}


/* the mechanism: why the line stays flat */
.belief-why{margin-top:clamp(44px,5vw,72px)}
.why-k{margin:0 0 clamp(18px,2vw,26px);
  font-family:var(--mono);font-size:var(--mono-m1-size);font-weight:var(--mono-m1-weight); /* M1 */
  letter-spacing:var(--mono-m1-track);text-transform:uppercase;color:var(--mute)}
.variance-register{margin:0}
.variance-register li{grid-column:span 3}
.variance-register li{position:relative}

/* the register resolves in clay: the answer sits inside the argument */
.register-answer .register-no{color:var(--accent)}
.register-answer h3{color:var(--ink)}
.register-answer::before{content:"";position:absolute;left:0;right:0;top:-1px;
  height:2px;background:var(--clay-display)}


@media(max-width:1020px){
  .belief-observe{grid-template-columns:1fr;gap:26px}
  .variance-register{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .variance-register{grid-template-columns:1fr}
  .prod-ft{flex-direction:column;gap:6px}
  .ft-caveat{margin-left:0}
}


/* ═══════════════════════════════════════════════════════════════════════════
   BELIEF E — the architecture claim. No chart, no hedge: every workflow got
   software, nothing reads the whole job, and the missing layer is the point.
   ═══════════════════════════════════════════════════════════════════════════ */
.belief-head{margin-bottom:clamp(44px,5vw,72px)}
.belief-title{margin:0;max-width:24ch;
  font-size:var(--t-stage);font-weight:var(--w-display);line-height:var(--lh-stage);
  letter-spacing:var(--ls-stage);color:var(--ink)}
.belief-title span{display:block;color:var(--mute)}
.belief-lead{margin:0;max-width:38ch;
  font-size:var(--t-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);color:var(--mute)}

.variance-register{margin:0}
/* three steps across twelve columns: the register runs the full frame and
   column three lands under step 03 */
.variance-register li{grid-column:span 4;position:relative}



@media(max-width:1020px){
  .belief-head{grid-template-columns:1fr;gap:22px;align-items:start}
}


/* ═══════════ the answer, attached to the step it answers ═══════════
   Vecreal sits directly under 03 on the same twelve-column grid, joined to it
   by a clay leader, with the claim carried at title scale on the left. */
.belief-answer{position:relative;display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:0;align-items:start;
  margin-top:clamp(52px,5.6vw,84px)}
.answer-copy{grid-column:span 8;align-self:center;padding-right:clamp(32px,4vw,64px)}
.answer-title{margin:0;max-width:none;white-space:nowrap;
  font-size:clamp(26px,3vw,42px);font-weight:var(--w-display);line-height:1.06;
  letter-spacing:-.03em;color:var(--ink)}
.answer-body{margin:0;max-width:52ch;
  font-size:var(--t-body);line-height:var(--lh-body);color:var(--mute)}

.answer-card{position:relative;grid-column:span 4;background:var(--plate-face);
  padding:clamp(24px,2.4vw,30px) clamp(24px,2.5vw,36px);border-radius:var(--r-3);
  border:var(--hair) solid var(--clay-line);background:var(--bg-1);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 44px -34px rgba(156,74,51,.5)}
.ac-mk{width:32px;height:32px;border-radius:9px;display:block;margin-bottom:14px}
.ac-k{display:block;font-size:17px;font-weight:600;letter-spacing:-.016em;
  color:var(--ink);margin-bottom:8px}
.answer-card p{margin:0;font-size:var(--t-cap);line-height:1.6;color:var(--mute)}

/* the leader: 03 hands down to the answer, centred on the column */
.answer-card::before{content:"";position:absolute;left:calc(50% - 1px);
  top:calc(-1 * clamp(52px,5.6vw,84px));width:2px;height:clamp(52px,5.6vw,84px);border-radius:1px;
  background:linear-gradient(180deg,rgba(184,73,50,.22),var(--clay-display))}
.answer-card::after{content:"";position:absolute;left:calc(50% - 4px);
  top:-8px;width:8px;height:8px;border-radius:50%;background:var(--clay-display);
  box-shadow:0 0 0 4px var(--bg-1)}


@media(max-width:1020px){
  .belief-answer{grid-template-columns:1fr;row-gap:24px}
  .answer-copy,.answer-card{grid-column:auto}
  .answer-card::before,.answer-card::after{display:none}
}

/* how it works today, named */
.reg-k{margin:0 0 clamp(14px,1.6vw,20px);
  font-family:var(--mono);font-size:var(--mono-m1-size);font-weight:var(--mono-m1-weight); /* M1 */
  letter-spacing:var(--mono-m1-track);text-transform:uppercase;color:var(--mute)}
/* the mark rides with the card title */
.ac-h{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.ac-mk{width:28px;height:28px;border-radius:8px;display:block;margin:0;flex:none}
.ac-k{display:block;margin:0;font-size:17px;font-weight:600;
  letter-spacing:-.016em;color:var(--ink)}
.answer-copy{align-self:center}
@media(max-width:1180px){.answer-title{white-space:normal}}

/* the register reads as three columns again: a rule between each, the index
   folded into the title line, and 03 carried in clay into the answer below */
/* the divider between COLUMNS. Once the register stacks there are no columns,
   and it was left drawing a stray edge down the side of step 02. */
@media(min-width:721px){
  .variance-register li + li{border-left:var(--hair) solid var(--line)}
}
.variance-register li{padding-inline:clamp(20px,2.4vw,36px)}
.variance-register li:first-child{padding-left:0}
.variance-register li:last-child{padding-right:0}
.variance-register h3 .rno{font-family:var(--mono);font-size:var(--mono-m3-size);
  font-weight:700;letter-spacing:var(--mono-m3-track);font-style:normal;color:var(--faint);
  margin-right:11px;vertical-align:2px}
.register-unresolved{position:relative}
.register-unresolved::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  border:var(--hair) solid var(--clay-line);border-radius:var(--r-2);pointer-events:none}
.register-unresolved h3 .rno{color:var(--accent)}
/* the mark sits on the column's own edges: its left is the rule that divides it
   from 02, its right is the register's right edge */
.variance-register li.register-unresolved{padding-right:clamp(20px,2.4vw,36px);
  border-left-color:var(--clay-line)}

/* the claim sits level with the card it belongs to, so the pair reads together */
.answer-copy{align-self:start;padding-top:clamp(18px,2vw,30px)}
.belief-answer{margin-top:clamp(38px,4.2vw,60px)}
.answer-card::before{top:calc(-1 * clamp(38px,4.2vw,60px));height:clamp(38px,4.2vw,60px)}

/* --faint is the mark tier, not a text tier: at 9.5-12px on a day plate it
   measures 3.2:1. The register index carries text, so it takes --mute. */
.variance-register h3 .rno{color:var(--mute)}
/* 03 keeps its clay index: it is the unresolved step, which is state, and the
   line above had flattened it to mute along with 01 and 02. */
.variance-register li.register-unresolved h3 .rno{color:var(--accent)}

/* ══ THE VARIANCE REGISTER, STACKED ═════════════════════════════════════════
   On desktop the three steps are three columns and the unresolved one is
   marked by a box drawn on the column's own edges. Stacked, those edges are
   the viewport, so the box hugged the text with no inset while 01 and 02 had
   no inline padding at all: three steps, three different insets.

   Stacked, every step gets the same box. 03 keeps the clay mark and gains a
   connector down its right side into the answer card, which is the relation
   the desktop layout draws and the mobile one had switched off entirely.
   ========================================================================== */
@media(max-width:45rem){
  .variance-register li,
  .variance-register li:first-child,
  .variance-register li:last-child{
    padding:clamp(18px,4vw,22px) clamp(16px,4vw,20px);
    border-block-start:var(--hair) solid var(--line);
    border-inline-start:0;
  }
  .variance-register h3{max-width:none}
  .variance-register li p{margin-block-start:6px}

  /* the mark becomes a full box around the step, inset from the text */
  .variance-register li.register-unresolved{padding-right:clamp(16px,4vw,20px)}
  .register-unresolved::before{border-radius:var(--r-2)}

  /* and the relation to the answer card, drawn down the right */
  /* One leader, 03 down to the card that answers it. It used to be a stub
     hanging off 03 and a separate dot floating above the answer, which never
     met: two marks reading as debris rather than one connection. The stub now
     runs the whole gap and ends in an arrowhead on the card. */
  .register-unresolved::after{
    content:"";position:absolute;right:clamp(26px,7vw,34px);top:100%;
    width:var(--hair);height:calc(100% + clamp(38px,4.2vw,60px));
    background:var(--clay-line);
  }
  .belief-answer{position:relative;margin-top:clamp(38px,4.2vw,60px)}
  /* the leader continues past the claim, and lands as an arrowhead on the card */
  .belief-answer::before{
    content:"";position:absolute;right:clamp(26px,7vw,34px);top:0;
    width:var(--hair);height:calc(100% - var(--ac-h,0px));
    background:var(--clay-line);transform:translateX(50%);
  }
  .belief-answer .answer-card{position:relative}
  .belief-answer .answer-card::before,
  .belief-answer .answer-card::after{display:block}
  .belief-answer .answer-card::before{
    content:"";position:absolute;right:clamp(26px,7vw,34px);left:auto;
    top:calc(-1 * clamp(14px,2vw,20px));width:0;height:0;border-radius:0;
    border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:7px solid var(--clay);transform:translateX(50%);background:none}
  .belief-answer .answer-card::after{display:none}
}