/* ==========================================================================================================
   Absolv v3 "Notebook" - the homepage only (index.html), loaded after assets/v3/v3-site.css
   ----------------------------------------------------------------------------------------------------------
   The approved continuous trial page (round 22, prototypes/index-v3-continuous.html in the v3-notebook-trial
   worktree) carried its homepage-only components in four layers: cont/v3-tokens.css, cont/v3.css, the page's own
   <style> and v3-continuous.css. They are kept here in that order, so its round-by-round cascade resolves exactly as
   the trial did, with three changes:
   1. The header and the footer are the site-wide v3 ones (.v3-header, .v3-footer and Poppy, styled by v3-site.css and
      walked by v3-site.js), so the trial's .desk-header, .nav, .cont-binding, .cont-spiral, .desk-footer and .pf-*
      rules are left out.
   2. Every selector is one html.v3 above where the trial had it, because v3-site.css's base rules (html.v3 img,
      html.v3 body and so on) would otherwise outrank the trial's single-class rules; the relative order is unchanged.
   3. No @font-face here: v3-site.css declares Aleo, Schibsted Grotesk and Infamous from /assets/v3/fonts only.
   Built by a one-off port script from the trial sources; edit this file directly from now on.
   Plain hyphens only in this file.
   ========================================================================================================== */
/* ======== from the trial's cont/v3-tokens.css ======== */
/* GENERATED by build-v3-continuous.mjs from assets/v3/v3-tokens.css without the Bitter faces. Do not edit. */
/* Absolv v3 "Notebook" design tokens.
   Source of truth: the v3 visual identity guide (Q4 2026). Values marked
   STAND-IN are not specified by the designer and were filled in for the trial.
   Swap fonts by changing the three --font-* lines only. */


/* Infamous by Typeheist, https://typeheist.co, used under a Typeheist webfont licence for this site. The files are the
   licensed web files as supplied, not subset or converted. */

html.v3 {
  /* ---- Colour: one colour per layer ---- */
  --desk: #F9F6EF;            /* behind the notebook; header and nav sit here */
  --page: #FFFDFA;            /* the notebook page */
  --ink: #141414;             /* all text, wordmark letters, button border and shadow */
  --signal: #ED6700;          /* filled shapes only: buttons, badges, icons, the square full stop */
  --pencil: #C8420F;          /* lines and letters: notes, captions, tagline, marks; button hover fill */
  --hl: #CDE8FA;              /* highlight only, always mix-blend-mode: multiply */
  --hl-overlap: #A5D3F5;      /* what two highlight strokes make where they cross (reference only) */
  --label-on-signal: #FFFEFB; /* button label */

  /* Notebook sheets (from the master notebook file) */
  --sheet-1: #F9F7F4;
  --sheet-2: #F9F7F5;
  --sheet-3: #F1EEEA;
  --note-paper: #F9F6EF;

  /* Ink tints. STAND-IN: v3 names no greys; these are ink at reduced alpha so no new hue enters. */
  --ink-70: rgba(20, 20, 20, .72);
  --ink-55: rgba(20, 20, 20, .58);
  --ink-15: rgba(20, 20, 20, .15);
  --ink-08: rgba(20, 20, 20, .08);

  /* ---- Grid tile ---- */
  --grid-line: rgba(20, 20, 20, .05);
  --grid-cell: 48px;

  /* ---- Depth ---- */
  --shadow-sheet: 0 3px 10px rgba(0, 0, 0, .12);
  --shadow-hard: 5px 5px 0 var(--ink);

  /* ---- Type families (swap here when TT Rationalist and Biro Script are bought) ---- */
  --font-display: "Aleo", Georgia, serif;
  --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Infamous", "Bradley Hand", "Segoe Print", cursive;

  /* Weights mapped to TT Rationalist's DemiBold / Bold / Medium */
  --w-hero: 600;
  --w-heading: 700;
  --w-ui: 500;

  /* ---- Type scale: fixed sizes per band (round 3, the designer's "clear fixed sizes"), values from the
     designer's guide of 2026-10-08 (round 6). The guide sizes every role for a 1920 frame and says "at
     1440px multiply by 0.75", so the desktop band (1024px and up) carries the 1440 values and the large
     band (1800px wide and 1000px tall, below) carries the 1920 values. Short desktop screens get a compact
     band so every notebook page still fits one screen at 1280x720. Every font-size in v3.css and the
     prototypes uses one of these roles; nothing is fluid per element. ---- */
  --fs-display: 84px;   /* hero headline only: TT Rationalist DemiBold 112 / 1.0 at 1920 */
  --fs-heading: 40px;   /* section headings: Bold 54 / 1.2, -2% (40.5 at 1440) */
  --fs-card: 15px;      /* card copy: Schibsted Grotesk 20 / 1.2 at 1920 */
  --fs-lead: 20px;      /* lead: 26 / 1.25 at 1920 (19.5 at 1440) */
  --fs-body: 20px;      /* body: 26 / 1.2 at 1920 (19.5 at 1440) */
  --fs-nav: 15px;       /* navigation: TT Rationalist Medium 20 / 1.07 at 1920 */
  --fs-small: 14px;     /* small print, labels, chips, captions (no guide role; the floor for legibility) */
  --fs-hand: 45px;      /* every handwritten note: Biro Script 60 at 1920 */
  --fs-hand-lg: 45px;   /* hero kicker: a note like any other in the guide */
  --fs-tagline: 24px;   /* header tagline: Biro Script 32 at 1920 (drawn into the header lockup SVG) */
  --fs-number: 36px;    /* card figure: TT Rationalist Medium 48 / 0.9 at 1920, prices and the counter */
  --fs-keyline: 20px;   /* card key line: Schibsted Grotesk Bold 26 / 0.9 at 1920 */
  --fs-button: 24px;    /* button label: Medium 24 / 1.07 at every size, never smaller (white on signal is 3.18:1) */

  /* Aliases kept so older class names keep working; they point at the roles above. */
  --fs-hero: var(--fs-display);
  --fs-note: var(--fs-hand);
  --fs-stat: var(--fs-number);

  --lh-hero: 1.0;
  --lh-heading: 1.2;
  --lh-lead: 1.25;
  --lh-body: 1.2;   /* body 26 / 1.2 in the guide (round 6; was a 1.35 stand-in) */
  --lh-card: 1.2;   /* card copy 20 / 1.2 */
  --lh-figure: .9;  /* card figure 48 / 0.9 */
  --lh-ui: 1.07;    /* button and navigation */
  --measure: 19.5em; /* running text: 440-520px at 1920 (507px at the 26px body) and 390px at 1440, tracking the body size in every band */
  --measure-lead: 26.5em; /* hero lead: up to about 690px at 1920 */
  --ls-heading: -0.02em;

  /* ---- Marks ---- */
  --mark-weight: 4.5px;   /* brush weight 6 at 1920, 4.5 at 1440; 6px in the large band */
  --rot-max: 10deg;       /* notes, scraps and tape stay within +/-10deg */

  /* ---- Button ---- */
  --btn-h: 50px;
  --btn-pad: 40px;
  --btn-hero-w: clamp(260px, 22.9167vw, 440px); /* 440 in the hero at 1920 */

  /* ---- Layout. STAND-INS ---- */
  --page-max: 1680px;           /* round 3: wider, so wide screens are not left with big desk bands */
  --desk-gutter: clamp(16px, 2.5vw, 48px);
  --spiral-w: 60px;             /* rendered width of the spiral strip (round 3: 92 -> 60, about 35% narrower) */
  --spiral-overhang: 28px;      /* how far the wire sits off the page edge */
  --paper-pad: 24px;            /* minimum gap between text and a paper element's edge (16px on phones) */
  /* Fixed notebook block height (round 3): every notebook page is this tall and content is composed,
     centred, inside it. Horizontal desktop: the viewport less 76px header and 44px indicator.
     Vertical tablet: the viewport less 48px. Mobile: the viewport less 32px. A section that cannot
     fit is split across consecutive pages, never clipped. */
  --nb-block-h: calc(100svh - 120px);
  --page-pad-x: clamp(24px, 6vw, 112px);
  --page-pad-y: clamp(48px, 6vw, 112px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.3, .7, .2, 1);
  --dur-wipe: .7s;
  --dur-draw: .9s;
}

/* Large band: the guide's 1920 sizes as written. */
@media (min-width: 1800px) and (min-height: 900px) { /* 900, not 1000, so a maximised browser on a 1920x1080 screen (about 950 tall) gets it */
  html.v3 {
    --fs-display: 112px; --fs-heading: 54px; --fs-card: 20px; --fs-lead: 26px; --fs-body: 26px; --fs-nav: 20px;
    --fs-small: 16px; --fs-hand: 60px; --fs-hand-lg: 60px; --fs-tagline: 32px; --fs-number: 48px; --fs-keyline: 26px;
    --mark-weight: 6px;
  }
}
/* Compact band: short desktop screens such as 1280x720, where the 1440 sizes would not fit one page. */
@media (min-width: 1024px) and (max-height: 820px) {
  html.v3 {
    --fs-display: 64px; --fs-heading: 36px; --fs-lead: 18px; --fs-body: 17px; --fs-hand: 36px; --fs-hand-lg: 36px;
    --fs-number: 32px; --fs-keyline: 17px; --fs-card: 15px;
  }
}

@media (max-width: 1119px), (max-height: 639px) {
  html.v3 { --nb-block-h: calc(100svh - 48px); }
}

@media (max-width: 1023px) {
  html.v3 {
    --fs-display: 52px; --fs-heading: 32px; --fs-card: 16px; --fs-lead: 20px; --fs-body: 17px; --fs-nav: 17px;
    --fs-small: 14px; --fs-hand: 34px; --fs-hand-lg: 34px; --fs-number: 36px; --fs-keyline: 18px;
  }
}

@media (max-width: 640px) {
  html.v3 {
    --fs-display: 32px; --fs-heading: 26px; --fs-card: 16px; --fs-lead: 18px; --fs-body: 16px; --fs-nav: 16px;
    --fs-small: 14px; --fs-hand: 30px; --fs-hand-lg: 30px; --fs-number: 30px; --fs-keyline: 17px;
    --grid-cell: 24px;
    --spiral-w: 34px;
    --spiral-overhang: 15px;
    --paper-pad: 16px;
    --nb-block-h: calc(100svh - 32px);
    --page-pad-x: 18px;
    --page-pad-y: 48px;
  }
}

/* ======== from the trial's cont/v3.css ======== */
/* GENERATED by build-v3-continuous.mjs from assets/v3/v3.css with the marks and the note paper repointed to the recoloured copies. Do not edit. */
/* Absolv v3 "Notebook" components. Requires v3-tokens.css first.
   Three layers: paper and objects (realistic), digital (crisp), hand (pencil).
   Digital does the work; the hand comments on it. */

/* ============ Base ============ */
html.v3 *, html.v3 *::before, html.v3 *::after { box-sizing: border-box; }
html.v3 { -webkit-text-size-adjust: 100%; }
html.v3 body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html.v3 img { max-width: 100%; height: auto; }
html.v3 a { color: inherit; }
html.v3 p { margin: 0; }
html.v3 h1, html.v3 h2, html.v3 h3 { margin: 0; font-weight: inherit; font-size: inherit; }
html.v3 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.v3 :focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ============ Typography (digital layer) ============ */
html.v3 .t-hero {
  font-family: var(--font-display); font-weight: var(--w-hero);
  font-size: var(--fs-hero); line-height: var(--lh-hero);
  text-align: center; text-wrap: balance;
}
html.v3 .t-heading {
  font-family: var(--font-display); font-weight: var(--w-heading);
  font-size: var(--fs-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
  text-align: center; text-wrap: balance;
}
html.v3 .t-subheading { /* STAND-IN: card and question titles */
  font-family: var(--font-display); font-weight: var(--w-ui);
  font-size: var(--fs-card); line-height: 1.25;
}
html.v3 .t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
html.v3 .t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
html.v3 .t-small { font-size: var(--fs-small); line-height: 1.4; }
html.v3 .t-label { /* STAND-IN: small digital label */
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-70);
}
html.v3 .t-muted { color: var(--ink-70); }
html.v3 .t-center { text-align: center; }
html.v3 .measure { max-width: var(--measure); margin-left: auto; margin-right: auto; } /* 440-520px at 1920, never the full page */

/* ============ Logo ============ */
html.v3 .logo { display: block; height: auto; }
html.v3 .logo-inline { display: inline-block; height: .74em; width: auto; vertical-align: baseline; transform: translateY(.02em); }

/* ============ Desk header and navigation ============ */
@media (max-width: 640px) { /* phones: the label stays 24px for contrast, the box gets smaller */
}

/* ============ Buttons and links ============ */
html.v3 .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--btn-h); padding: 0 var(--btn-pad);
  background: var(--signal); color: var(--label-on-signal);
  border: 1px solid var(--ink); border-radius: 0;
  box-shadow: var(--shadow-hard);
  font-family: var(--font-display); font-weight: var(--w-ui);
  font-size: var(--fs-button); line-height: 1.07;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background-color .12s;
}
html.v3 .btn:hover { background: var(--pencil); transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
html.v3 .btn:active { background: var(--pencil); transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
html.v3 .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
html.v3 .btn[disabled] { cursor: default; background: var(--pencil); transform: translate(5px, 5px); box-shadow: none; }
html.v3 .btn--hero { width: var(--btn-hero-w); max-width: 100%; }
html.v3 .btn--block { width: 100%; }
/* The header Get started (round 6): the guide's primary button, unchanged, closing the nav row. It does
   not count as the page's one main button. */ /* beats .nav a, which sets ink */

/* STAND-IN: secondary button. Outline only, no fill, no hard shadow, so it never competes with the one primary. */
html.v3 .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 0;
  font-family: var(--font-display); font-weight: var(--w-ui); font-size: var(--fs-nav);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .12s;
}
html.v3 .btn-secondary:hover { background: var(--ink-08); }

/* STAND-IN: text link. Ink with a crisp underline; links are digital, never pencil. */
html.v3 .link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; font-weight: 600; }
html.v3 .link:hover { text-decoration-thickness: 2px; }

/* ============ The desk and the notebook ============ */
html.v3 .desk {
  padding: clamp(8px, 1.5vw, 24px) var(--desk-gutter) 24px calc(var(--desk-gutter) + var(--spiral-overhang));
  overflow-x: clip;
}
html.v3 .nb {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto clamp(40px, 5vw, 88px);
}
/* Sheets underneath: offset and turned a little so their edges show on the right. */
html.v3 .nb::before, html.v3 .nb::after {
  content: ""; position: absolute; inset: 0; box-shadow: var(--shadow-sheet);
}
html.v3 .nb::before { background: var(--sheet-3); transform: translate(18px, 6px) rotate(.33deg); } /* the bottom sheets, turned about 0.33deg */
html.v3 .nb::after  { background: var(--sheet-1); transform: translate(12px, 0); } /* the sheet below: flat, peeking out on the right (guide 08) */
html.v3 .nb__page {
  position: relative; z-index: 1;
  background-color: var(--page);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  background-position: 0 0;
  box-shadow: var(--shadow-sheet);
  padding: var(--page-pad-y) var(--page-pad-x);
  /* Content is centred in the page area to the RIGHT of the spiral: the left padding adds the
     width of wire that sits on the page, so the content box is optically centred (round 3). */
  padding-left: calc(var(--page-pad-x) + var(--spiral-w) - var(--spiral-overhang));
}
html.v3 .nb__page > * { position: relative; }
/* The realistic spiral, cut from the master notebook and repeated down the left edge. */
html.v3 .nb__spiral {
  position: absolute; z-index: 3; pointer-events: none;
  left: calc(-1 * var(--spiral-overhang)); top: 18px; bottom: 18px; width: var(--spiral-w);
  background: url("/assets/v3/img/absolv-notebook-spiral.webp") 0 0 / var(--spiral-w) auto;
  background-repeat: no-repeat round;
}
html.v3 .nb--landscape .nb__page { min-height: min(84vh, 860px); display: flex; flex-direction: column; justify-content: center; }

/* Section pattern: kicker, heading, aside, content, one button */
html.v3 .section-head { position: relative; text-align: center; margin: 0 auto clamp(28px, 3.5vw, 64px); max-width: 30em; }
html.v3 .section-head .t-heading { position: relative; display: inline-block; }
html.v3 .section-cta { text-align: center; margin-top: clamp(36px, 4vw, 72px); }

/* ============ Highlight (digital trace of the assistant) ============ */
html.v3 .hl { position: relative; white-space: nowrap; --hl-img: url("/assets/v3/marks/absolv-highlight-double-a.svg"); }
html.v3 .hl::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -.14em; right: -.2em; top: .38em; bottom: -.1em;
  background: var(--hl-img) center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-wipe) var(--ease);
}
html.v3 .hl--b { --hl-img: url("/assets/v3/marks/absolv-highlight-double-b.svg"); }
html.v3 .hl--c { --hl-img: url("/assets/v3/marks/absolv-highlight-double-c.svg"); }
html.v3 .hl--single  { --hl-img: url("/assets/v3/marks/absolv-highlight-single-a.svg"); }
html.v3 .hl--single-b { --hl-img: url("/assets/v3/marks/absolv-highlight-single-b.svg"); }
html.v3 .hl--single-c { --hl-img: url("/assets/v3/marks/absolv-highlight-single-c.svg"); }
html.v3 .hl--single::before, html.v3 .hl--single-b::before, html.v3 .hl--single-c::before { top: .5em; bottom: -.04em; }

/* ============ Pencil marks ============ */
html.v3 .ul { position: relative; white-space: nowrap; --ul-img: url("/assets/v3/marks/absolv-mark-underline-wave.svg"); --ul-h: .42em; }
html.v3 .ul::after {
  content: ""; position: absolute; pointer-events: none;
  left: -.04em; right: -.08em; bottom: calc(-1 * var(--ul-h) - .08em); height: var(--ul-h); /* round 6: clear of the descenders, as the guide's mockup draws it */
  background: var(--ul-img) center / 100% 100% no-repeat;
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-draw) var(--ease) .25s;
}
html.v3 .ul--taper { --ul-img: url("/assets/v3/marks/absolv-mark-underline-taper.svg"); --ul-h: .3em; }
html.v3 .ul--coil  { --ul-img: url("/assets/v3/marks/absolv-mark-underline-coil.svg"); --ul-h: .34em; }
html.v3 .ul--first::after { bottom: calc(-1 * var(--ul-h) * .72); } /* an underline on a line with another line below it sits tighter, clear of the next line */

html.v3 .braces { position: relative; display: inline-block; padding: 0 .55em; }
html.v3 .braces::before, html.v3 .braces::after {
  content: ""; position: absolute; top: -.06em; bottom: -.12em; width: .34em; pointer-events: none;
  background: center / 100% 100% no-repeat;
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-draw) var(--ease) .2s;
}
html.v3 .braces::before { left: 0; background-image: url("/assets/v3/marks/absolv-mark-brace-left.svg"); }
html.v3 .braces::after { right: 0; background-image: url("/assets/v3/marks/absolv-mark-brace-right.svg"); }

/* Standalone marks: arrows, ticks. Absolutely placed in margins, never on type. */
html.v3 .mark { position: absolute; display: block; pointer-events: none; height: auto; transform: rotate(var(--r, 0deg)) scaleX(var(--flip, 1)); clip-path: inset(0 0 0 0); transition: clip-path var(--dur-draw) var(--ease) .45s; }
html.v3 .mark--inline { position: relative; display: inline-block; vertical-align: middle; }
/* A loose circle round one or two words (round 6, absolv-mark-circle-oval.svg), drawn with an open overlap. */
html.v3 .circ { position: relative; white-space: nowrap; }
html.v3 .circ::after {
  content: ""; position: absolute; pointer-events: none; left: -.28em; right: -.4em; top: -.42em; bottom: -.38em;
  background: url("/assets/v3/marks/absolv-mark-circle-oval.svg") center / 100% 100% no-repeat;
  clip-path: inset(0 0 0 0); transition: clip-path var(--dur-draw) var(--ease) .25s;
}

/* ============ Handwritten notes ============ */
html.v3 .note {
  font-family: var(--font-hand); font-weight: 400;
  font-size: var(--fs-note); line-height: 1;
  color: var(--pencil); text-transform: lowercase;
  display: inline-block; white-space: nowrap;
  transform: rotate(var(--r, -3deg));
  transform-origin: left center;
}
html.v3 .note--sm { font-size: var(--fs-hand); } /* kept as a class name; every note is one size now */
html.v3 .note--name { text-transform: none; } /* only a name keeps its capital: "Poppy". Every other note is lowercase (guide 07) */
html.v3 .note--abs { position: absolute; }
html.v3 .note--kicker { display: block; width: max-content; margin: 0 auto .35em; }

/* ============ Taped notes ============ */
/* Torn note paper as a 9-slice of the designer's SVG: the torn top and bottom keep their real
   height however tall the note is, the straight sides stretch, and the paper's own edge sits
   about 3px outside the content box, so --paper-pad is the real text-to-edge gap (round 3). */
html.v3 .paper {
  border-style: solid; border-color: transparent;
  border-width: 40px 14px 44px 14px;
  border-image: url("/assets/v3/img/absolv-object-note-paper.svg") 40 14 44 14 fill / 40px 14px 44px 14px round stretch;
  background: none;
}
html.v3 .tnote {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  width: 100%; max-width: 320px;
  border-style: solid; border-color: transparent;
  border-width: 40px 14px 44px 14px;
  border-image: url("/assets/v3/img/absolv-object-note-paper.svg") 40 14 44 14 fill / 40px 14px 44px 14px round stretch;
  padding: 18px var(--paper-pad) 4px;
  font: inherit; color: var(--ink); text-align: left;
  transform: rotate(var(--r, -2deg));
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  transition: transform .22s cubic-bezier(.22,1,.36,1), filter .22s cubic-bezier(.22,1,.36,1); /* live card-hover */
}
html.v3 button.tnote, html.v3 .tnote[role="button"] { cursor: pointer; }
/* hover: the note straightens, lifts and casts a deeper paper shadow (live deepens the card shadow) */
html.v3 button.tnote:hover, html.v3 .tnote[role="button"]:hover { transform: rotate(calc(var(--r, -2deg) * .4)) translateY(-4px); filter: drop-shadow(0 9px 10px rgba(0,0,0,.13)); }
html.v3 .tnote__tape {
  position: absolute; top: -48px; left: 50%; width: 62%; height: 54px; pointer-events: none;
  background: url("/assets/v3/img/absolv-object-tape.webp") center / 100% 100% no-repeat;
  transform: translateX(-50%) rotate(var(--tr, 2deg));
}
html.v3 .tnote__icon { display: block; width: 112px; height: 104px; margin: 0 auto 18px; object-fit: contain; mix-blend-mode: multiply; }
/* an icon wrapped with an overlay (round 4): the overlay SVG shares the image's box and, with its
   viewBox set to the image's natural size, lands exactly where object-fit: contain puts the drawing */
html.v3 .tnote__art { position: relative; display: block; width: max-content; margin: 0 auto 18px; }
html.v3 .tnote__art > .tnote__icon { margin: 0; }
html.v3 .tnote__fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; mix-blend-mode: multiply; }
html.v3 .tnote__rule { display: block; height: 1px; background: var(--ink-55); margin: 0 0 16px; } /* turns with the card: only the tape takes its own angle (guide 08) */
html.v3 .tnote__copy { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 400; }

/* ============ Illustration, Poppy, objects ============ */
html.v3 .illus { display: block; mix-blend-mode: multiply; height: auto; }
html.v3 .poppy { position: absolute; pointer-events: none; }
html.v3 .poppy img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
html.v3 .poppy .note { position: absolute; }
html.v3 .obj { position: absolute; pointer-events: none; z-index: 4; }
html.v3 .obj--pencil { width: clamp(44px, 3.4vw, 64px); transform: rotate(var(--r, 7deg)); filter: drop-shadow(4px 6px 6px rgba(0,0,0,.14)); }
html.v3 .obj--tape { width: 140px; height: 44px; background: url("/assets/v3/img/absolv-object-tape.webp") center / 100% 100% no-repeat; transform: rotate(var(--r, -4deg)); }

/* ============ Stat display (STAND-IN) ============ */
html.v3 .stat { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .35em .6em; }
html.v3 .stat__label { font-weight: 600; font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70); }
html.v3 .stat__value { font-family: var(--font-display); font-weight: var(--w-ui); font-size: var(--fs-stat); line-height: var(--lh-figure); font-variant-numeric: tabular-nums; }
html.v3 .stat__sep { color: var(--ink-55); }

/* ============ Badge (STAND-IN) ============ */
html.v3 .badge {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .3em .7em; margin-top: .5em;
  border: 1px solid var(--ink); background: var(--page);
  font-weight: 600; font-size: var(--fs-small); line-height: 1.2; color: var(--ink);
}
html.v3 .badge::before { content: ""; width: .6em; height: .6em; background: var(--signal); flex: none; }

/* ============ Cards (STAND-IN) ============ */
html.v3 .card { position: relative; background: var(--page); box-shadow: var(--shadow-sheet); padding: clamp(24px, 2.6vw, 44px); }
html.v3 .card--note {
  box-shadow: none;
  border-style: solid; border-color: transparent;
  border-width: 40px 14px 44px 14px;
  border-image: url("/assets/v3/img/absolv-object-note-paper.svg") 40 14 44 14 fill / 40px 14px 44px 14px round stretch;
  background: none;
  padding: 8px max(var(--paper-pad), 2vw) 4px;
}
html.v3 .card--note .tnote__tape { top: -52px; }

/* ============ Pricing ============ */
/* Round 6 (guide 08, cards): size follows the content, so the two taped notes differ in size and angle,
   with the longer list making the Absolv card the bigger one. A figure in display Medium 48 / 0.9, a key
   line in body Bold 26 / 0.9 (pencil orange when it is the point), then a short centred list with pencil
   ticks as bullets for what Absolv does and plain dots for the other side. The button sits below the cards. */
html.v3 .pricing { display: flex; justify-content: center; align-items: center; gap: clamp(24px, 3vw, 56px); margin: 0 auto; }
html.v3 .price-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; transform: rotate(var(--r, 0deg)); max-width: 30em; }
html.v3 .price-card__head { min-height: 1em; display: flex; align-items: center; justify-content: center; }
html.v3 .price-card__head .logo { width: 116px; }
html.v3 .price-card__head .note { --r: -3deg; transform-origin: center; }
html.v3 .price-card__amount { font-family: var(--font-display); font-weight: var(--w-ui); font-size: var(--fs-number); line-height: var(--lh-figure); font-variant-numeric: tabular-nums; margin: 10px 0 8px; }
html.v3 .price-card__sub { font-weight: 700; font-size: var(--fs-keyline); line-height: 1; max-width: 16em; } /* 0.9 in the guide for one line; 1 so a wrapped key line keeps its descenders clear */
html.v3 .price-card__list { list-style: none; margin: 14px 0 0; padding: 0; text-align: center; display: grid; gap: 6px; justify-items: center; }
html.v3 .price-card__list li { font-size: var(--fs-card); line-height: var(--lh-card); display: flex; align-items: center; gap: .45em; }
html.v3 .price-card__list li::before { content: ""; flex: none; width: .3em; height: .3em; border-radius: 50%; background: currentColor; }
html.v3 .price-card__list--ticks li::before { width: .7em; height: .9em; border-radius: 0; background: url("/assets/v3/marks/absolv-mark-tick-bullet.svg") center / contain no-repeat; }
html.v3 .price-card--old .price-card__amount, html.v3 .price-card--old .price-card__sub, html.v3 .price-card--old li { color: var(--ink-70); }
html.v3 .price-card--absolv .price-card__sub { color: var(--pencil); }

/* ============ FAQ accordion (STAND-IN) ============ */
html.v3 .faq { max-width: 880px; margin: 0 auto; border-bottom: 1px solid var(--ink-15); }
html.v3 .faq__item { border-top: 1px solid var(--ink-15); }
html.v3 .faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(18px, 1.6vw, 28px) 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink);
  font-family: var(--font-display); font-weight: var(--w-ui); font-size: var(--fs-card); line-height: 1.3;
}
html.v3 .faq__icon { position: relative; flex: none; width: 18px; height: 18px; }
html.v3 .faq__icon::before, html.v3 .faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--ink); transition: transform .3s ease; }
html.v3 .faq__icon::after { transform: rotate(90deg); }
html.v3 .faq__item.open .faq__icon::after { transform: rotate(0deg); }
html.v3 .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; } /* live: .4s ease */
html.v3 .faq__a > div { overflow: hidden; }
html.v3 .faq__a p { padding-bottom: .7em; color: var(--ink-70); max-width: var(--measure); } /* running text: 440-520px at 1920 */
html.v3 .faq__a > div > :last-child { margin-bottom: clamp(18px, 1.6vw, 28px); }
html.v3 .faq__item.open .faq__a { grid-template-rows: 1fr; }

/* ============ Desk footer (STAND-IN) ============ */
/* STAND-IN: footer pills (round 4). Ink outline boxes on one ground line, the v3 version of live's drawn
   outline pills. The outline and the label are separate layers so script can squash them (Poppy walks
   on them) without touching the link, whose box and 44px tap target never change size. */ /* at least 44px tall, also on phones where the pill is 36px */

/* ============ Motion: highlights wipe, marks draw on (JS adds .js and .is-in) ============ */
html.v3.js .nb:not(.is-in) .hl::before { clip-path: inset(0 100% 0 0); }
html.v3.js .nb:not(.is-in) .ul::after { clip-path: inset(0 100% 0 0); }
html.v3.js .nb:not(.is-in) .circ::after { clip-path: inset(0 100% 0 0); }
html.v3.js .nb:not(.is-in) .braces::before, html.v3.js .nb:not(.is-in) .braces::after { clip-path: inset(0 0 100% 0); }
html.v3.js .nb:not(.is-in) .mark { clip-path: inset(0 100% 0 0); }
html.v3.js .nb:not(.is-in) .mark--down { clip-path: inset(0 0 100% 0); }
@media (prefers-reduced-motion: reduce) {
  html.v3 *, html.v3 *::before, html.v3 *::after { transition: none !important; animation: none !important; }
  html.v3.js .nb:not(.is-in) .hl::before, html.v3.js .nb:not(.is-in) .ul::after, html.v3.js .nb:not(.is-in) .circ::after, html.v3.js .nb:not(.is-in) .braces::before, html.v3.js .nb:not(.is-in) .braces::after, html.v3.js .nb:not(.is-in) .mark { clip-path: inset(0 0 0 0); }
}

/* ============ Responsive ============ */
@media (max-width: 860px) {
  html.v3 .pricing { gap: 20px; }
}
@media (max-width: 640px) {
  html.v3 .nb::before { transform: translate(7px, 5px) rotate(.33deg); }
  html.v3 .nb::after { transform: translate(4px, 2px) rotate(-.2deg); }
  html.v3 .t-hero { letter-spacing: -0.015em; }
  html.v3 .t-hero .braces { padding: 0 .42em; }
  html.v3 .t-hero .braces::before, html.v3 .t-hero .braces::after { width: .28em; }
  html.v3 .tnote { max-width: 300px; padding: 14px var(--paper-pad) 2px; }
  html.v3 .tnote__icon { width: 92px; height: 86px; }
  html.v3 .btn--hero { width: 100%; max-width: 330px; }
  html.v3 .pricing { grid-template-columns: minmax(0, 340px); row-gap: 28px; }
}

/* ======== from the trial's the page <style> ======== */
/* ---------- Page-specific layout for the homepage. Components live in v3.css. ----------
   Every font-size below uses a role token from v3-tokens.css (round 3 fixed type scale). */

/* ---------- Header: hidden while the opening plays, then fades in over .3s, as on the live site ----------
   Opacity only, as live does it. Without JS the .js class never lands, so the header is simply visible. */
html.v3 .nb { scroll-margin-top: 90px; }

/* ---------- Opening: the live site's sticky choreography, on a notebook page ----------
   Beat 1 at rest: the bare master wordmark, centred.
   Beat 2 on load: spark marks tick in and "the founders accountant" writes itself in
   (round 8: written by the tagline pencil script, which reveals absolv-tagline.svg under its tip); the lockup lifts so the finished lockup is centred.
   Beat 3, 10-40% of the opening's scroll: graphite paperwork flies into the counter.
   Beat 4, 35%+: "yourself of slow, expensive accountants." with its highlight and underline.
   Vertical layout: the section is 130vh with a sticky pane. Horizontal layout: it is page 1 of the
   deck and the same progress is mapped onto the first 30vh of scroll before the first page turn. */
html.v3 .desk { padding-top: 0; }
html.v3 .scroll-hero { height: 130vh; position: relative; margin-left: calc(-1 * (var(--desk-gutter) + var(--spiral-overhang))); margin-right: calc(-1 * var(--desk-gutter)); margin-bottom: clamp(24px, 3vw, 56px); }
html.v3 .sticky-container { position: sticky; top: 0; height: 100vh; overflow: hidden;
  padding: 16px var(--desk-gutter) 16px calc(var(--desk-gutter) + var(--spiral-overhang)); }
html.v3 .sticky-container > .nb { height: 100%; margin: 0 auto; }
html.v3 .sticky-container .nb__page { height: 100%; padding: 0; overflow: hidden; }
/* centred in the page area to the right of the spiral */
html.v3 .hero-stack { position: absolute; left: calc(50% + (var(--spiral-w) - var(--spiral-overhang)) / 2); top: 40%; width: clamp(270px, 42vw, 640px); transform: translate(-50%, -50%); z-index: 3; }
html.v3 .hero-scale { transform: scale(calc(1 - var(--intensity, 0) * 0.45)); transform-origin: 50% 0; will-change: transform; }
html.v3 .hero-lift { position: relative; animation: heroLift .6s var(--ease) .55s both; }
@keyframes heroLift { from { transform: translateY(16.3%); } to { transform: none; } }
html.v3 .hero-lockup { display: block; width: 100%; height: auto; }
html.v3 .hero-bare { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; pointer-events: none; }
html.v3 .hero-continuation { position: absolute; left: 50%; top: 100%; width: max-content; max-width: 86vw; transform: translate(-50%, 30px); opacity: 0;
  transition: opacity .5s ease, transform .5s ease; text-align: center; margin-top: .3em;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-heading); line-height: 1.2; letter-spacing: var(--ls-heading); }
html.v3 .hero-continuation.visible { opacity: 1; transform: translate(-50%, 0); }
html.v3 .hero-continuation:not(.visible) .hl::before, html.v3 .hero-continuation:not(.visible) .ul::after { clip-path: inset(0 100% 0 0); }
html.v3 .stream-stage { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
html.v3 .stream-token { position: absolute; bottom: -60px; transform: translateX(-50%); will-change: transform, opacity; pointer-events: none; }
html.v3 .stream-token img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
html.v3 .hero-counter { position: absolute; left: calc(50% + (var(--spiral-w) - var(--spiral-overhang)) / 2); bottom: 14%; transform: translateX(-50%); z-index: 4; white-space: nowrap; width: max-content; }
html.v3 .stream-stage, html.v3 .hero-counter { opacity: 0; transition: opacity .35s ease; }
html.v3 .hero-counter .stat { position: relative; padding: .4em 1.3em; background: var(--page); border-top: 1px solid var(--ink-15); border-bottom: 1px solid var(--ink-15); }
html.v3 .hero-counter .pulse { width: .5em; height: .5em; background: var(--signal); align-self: center; animation: pulseBlink 1.2s ease-in-out infinite; }
@keyframes pulseBlink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
html.v3 .hero-counter .hit-tick { position: absolute; right: -40px; top: -18px; width: 44px; height: auto; clip-path: inset(0 100% 0 0); opacity: 0; transform: rotate(8deg); }
html.v3 .hero-counter .stat.hit .hit-tick { clip-path: inset(0 0 0 0); opacity: 1; transition: clip-path .14s ease-out, opacity .05s; }
html.v3 .hero-counter .stat .hit-tick { transition: opacity .35s ease .12s; }
/* Round 4: each impact also flashes the rules and figures pencil orange for 220ms (live flashes them orange) */
html.v3 .hero-counter .stat { transition: border-color .2s ease; }
html.v3 .hero-counter .stat__value { transition: color .2s ease; }
html.v3 .hero-counter .stat.hit { border-color: var(--pencil); }
html.v3 .hero-counter .stat.hit .stat__value { color: var(--pencil); }
/* Round 4: the tagline pencil. A real pencil rides the tip of the tagline's write-on wipe (inside the
   animated lockup), then rules a pencil-orange wave under it and lifts away. Positions are set per frame
   by script in lockup units, so it scales with the lockup; it fades out with the tagline on scroll. */
html.v3 .tag-pen { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
html.v3 .tag-ul { position: absolute; left: 10.2%; width: 78.6%; top: 96.5%; height: 6.4%; }
html.v3.js .tag-ul { clip-path: inset(0 100% 0 0); }
html.v3 .tag-pencil { position: absolute; left: 0; top: 0; width: 4.8%; height: auto; opacity: 0; transform-origin: 21.6% 99.2%;
  transform: translate(calc(var(--px, 0px) - 21.6%), calc(var(--py, 0px) - 99.2%)) rotate(var(--rot, 26deg));
  filter: drop-shadow(3px 5px 4px rgba(0,0,0,.16)); will-change: transform, opacity; }
html.v3.js .no-pen .tag-ul { clip-path: none; }
/* Round 8: the tagline itself. It used to be written by a wipe inside the animated lockup on that image's
   own clock, which ran ahead of the pencil on some devices, so the words were already there when the
   pencil arrived. Now the lockup carries only the wordmark and spark marks, and the tagline is this
   separate image whose right edge the pencil script sets every frame from the pencil tip, as live's
   hero-drawn.js draws each stroke under its pencil. Without JS it writes itself in by CSS on the old
   timing; under reduced motion the static lockup already carries it, so this layer is hidden. */
html.v3 .tag-text { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
html.v3.js .tag-text { clip-path: inset(0 100% 0 0); }
html.v3.js .no-pen .tag-text { clip-path: none; }
html.v3:not(.js) .tag-text { animation: tagWrite 1.5s cubic-bezier(.45,.1,.35,1) 1.7s both; }
@keyframes tagWrite { from { clip-path: inset(0 92.45% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Round 4: scroll cue. A pencil arrow under the opening bounces gently (live: 2s loop) and goes once the
   opening has travelled 5%. */
html.v3 .scroll-cue { position: absolute; left: calc(50% + (var(--spiral-w) - var(--spiral-overhang)) / 2); bottom: 5%; width: 62px; height: auto; z-index: 3;
  pointer-events: none; transform: translateX(-50%) rotate(98deg); transition: opacity .3s ease; animation: cueBounce 2s ease-in-out infinite; }
@keyframes cueBounce { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(98deg); } 50% { transform: translateX(-50%) translateY(8px) rotate(98deg); } }
@media (prefers-reduced-motion: reduce) {
  html.v3 .hero-lift { animation: none; }
  html.v3 .hero-counter .pulse { animation: none; opacity: 1; }
  html.v3 .tag-pencil { display: none; }
  html.v3 .tag-ul { clip-path: none; }
  html.v3 .tag-text { display: none; }
  html.v3 .scroll-cue { animation: none; }
}

/* Hero page */
html.v3 .hero { text-align: center; }
html.v3 .hero .note--kicker { --r: -3deg; margin-left: 30%; margin-bottom: .2em; font-size: var(--fs-hand-lg); }
html.v3 .hero .t-hero { display: inline-block; max-width: 11.5em; align-self: center; }
html.v3 .hero .t-lead { max-width: var(--measure-lead); margin: 28px auto 0; } /* hero lead up to about 690px at 1920 */
html.v3 .hero .section-cta { margin-top: 28px; }
html.v3 .cta-aim { position: relative; display: inline-block; }
/* round 3: the swirl sits beside the button so its head lands on it, instead of pointing at empty paper */
html.v3 .hero .swirl { left: calc(100% + 16px); bottom: -12px; width: clamp(80px, 6vw, 112px); }
html.v3 .obj--pencil.hero-pencil { right: calc(22px - var(--desk-gutter)); top: 8%; --r: 7deg; }

/* Aside notes */
html.v3 .section-head .aside { white-space: nowrap; }
html.v3 .features .aside { left: auto; right: -12%; top: -66px; --r: -4deg; }
html.v3 .notes-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 36px); justify-items: center; align-items: start; max-width: 1180px; margin: 0 auto; padding-top: 14px; }
html.v3 .notes-row .tnote:nth-child(2) { margin-top: 26px; }
html.v3 .notes-row .tnote:nth-child(4) { margin-top: 34px; }
/* Round 4: the live icons loop (VAT stamp, dashboard live dot, chat typing dots; Gmail is static). Here
   the loops sit on the graphite drawings: the badge on the documents re-stamps, a pencil dot pulses on the
   chart's peak and three ink dots type in the speech bubble. They run only while the note is in view
   (.is-live, set by script), and reduced motion stills them. */
html.v3 .fx-stamp { transform-box: view-box; transform-origin: 111px 104px; opacity: 0; animation: fxStamp 4s cubic-bezier(.3, 1.5, .5, 1) infinite; }
/* Round 8: live's stampIn keyframes exactly (pop at 45%, settled 55-80%, gone by 100%) */
@keyframes fxStamp { 0%, 35% { opacity: 0; transform: scale(0); } 45% { opacity: 1; transform: scale(1.25); } 55%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
html.v3 .fx-live { fill: var(--pencil); transform-box: fill-box; transform-origin: 50% 50%; animation: fxLive 1.8s ease-in-out infinite; }
@keyframes fxLive { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.6); opacity: .5; } }
html.v3 .fx-dot { fill: var(--ink); opacity: .2; transform-box: fill-box; transform-origin: 50% 50%; animation: fxType 1.4s ease-in-out infinite; }
html.v3 .fx-dot:nth-child(2) { animation-delay: .18s; } html.v3 .fx-dot:nth-child(3) { animation-delay: .36s; }
@keyframes fxType { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-2px); opacity: 1; } } /* live typingJump */
html.v3 .tnote__fx * { animation-play-state: paused; }
html.v3 .tnote.is-live .tnote__fx * { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { html.v3 .fx-stamp { opacity: 0; } html.v3 .fx-dot { opacity: .2; } }
/* Live also breathes the VAT documents and grows the dashboard bars. Each graphite drawing is one image,
   so the documents rise a touch and the whole chart grows from its baseline, paused off screen like the rest. */
html.v3 .tnote__art:has(.fx-vat) .tnote__icon, html.v3 .tnote__fx.fx-vat { animation: fxBreathe 4s ease-in-out infinite; animation-play-state: paused; }
html.v3 .tnote__art:has(.fx-dash) .tnote__icon, html.v3 .tnote__fx.fx-dash { transform-origin: 50% 100%; animation: fxGrow 2.8s cubic-bezier(.4, 0, .2, 1) infinite; animation-play-state: paused; }
html.v3 .tnote.is-live .tnote__icon, html.v3 .tnote.is-live .tnote__fx.fx-vat, html.v3 .tnote.is-live .tnote__fx.fx-dash { animation-play-state: running; }
@keyframes fxBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes fxGrow { 0%, 100% { transform: scaleY(.9); } 40%, 60% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { html.v3 .tnote__icon, html.v3 .tnote__fx.fx-vat, html.v3 .tnote__fx.fx-dash { animation: none !important; } }
/* Live hover states: pricing cards lift, FAQ questions take the accent, the ICAEW logo brightens */
html.v3 .icaew { opacity: .7; transition: opacity .2s var(--ease); }
html.v3 a:hover .icaew, html.v3 a:focus-visible .icaew { opacity: 1; }
html.v3 .faq__q { transition: color .2s; } /* live: .2s */
html.v3 .faq__q:hover, html.v3 .faq__q:focus-visible { color: var(--pencil); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html.v3 .price-card { transition: transform .22s cubic-bezier(.22,1,.36,1); } /* live card-hover: .22s on --ease-ink */
  html.v3 .price-card:hover { transform: translateY(-4px) rotate(var(--r, 0deg)); }
}
/* Raw -> Booked strip, kept compact (Shaun: about a third of the first build) */
html.v3 .vig-stage { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(10px, 1.4vw, 24px); align-items: center; max-width: 820px; margin: clamp(36px, 3.5vw, 56px) auto 0; }
html.v3 .vig { display: grid; grid-template-columns: 44px auto; column-gap: 12px; align-items: center; justify-content: center; text-align: left; }
html.v3 .vig > * { grid-column: 2; justify-self: start; }
html.v3 .vig-figure { grid-column: 1 !important; grid-row: 1 / span 3; margin: 0; width: 44px; height: 54px; display: flex; align-items: flex-end; justify-content: center; }
html.v3 .vig-figure img { max-height: 100%; width: auto; }
/* Round 4, as live: the booked drawing is masked by a slanted gradient that sweeps it open left to right
   over 2s with each booking and wipes it back out in .5s when the next raw transaction arrives. */
html.v3 .vig-figure.masked img { -webkit-mask-image: linear-gradient(100deg, #000 62%, transparent 78%); mask-image: linear-gradient(100deg, #000 62%, transparent 78%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0; transition: -webkit-mask-position .5s ease-in, mask-position .5s ease-in; }
html.v3 .vig-figure.masked.revealed img { -webkit-mask-position: 0 0; mask-position: 0 0; transition: -webkit-mask-position 2s ease-in-out, mask-position 2s ease-in-out; }
html.v3 .vig .note { --r: -2deg; margin-bottom: 2px; }
html.v3 .vig-line { font-weight: 600; font-size: var(--fs-small); letter-spacing: .06em; min-height: 1.4em; white-space: nowrap; }
html.v3 .vig-line .amt { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
html.v3 .vig-tags { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 3px; min-height: 1.6em; }
html.v3 .vig-tag { font-size: var(--fs-small); line-height: 1.2; border: 1px solid var(--ink-15); background: var(--page); padding: .05em .45em; color: var(--ink-70); opacity: 0; transform: translateY(4px); transition: opacity .5s ease, transform .5s ease; }
html.v3 .vig-tag.visible { opacity: 1; transform: none; }
/* Round 4, as live: the arrow rests faint and grey and lights up in pencil orange, drawn left to right,
   when the transaction is picked up. */
html.v3 .vig-arrow { position: relative; width: 44px; }
html.v3 .vig-arrow img { width: 100%; display: block; }
html.v3 .vig-arrow__rest { filter: grayscale(1); opacity: .3; }
html.v3 .vig-arrow__lit { position: absolute; left: 0; top: 0; clip-path: inset(0 100% 0 0); transition: clip-path .25s ease; }
html.v3 .vig-arrow.active .vig-arrow__lit { clip-path: inset(0 0 0 0); transition: clip-path .8s ease; }

/* How it works */
html.v3 .hiw-grid { --hiw-gap: clamp(24px, 4vw, 80px); --fig-h: calc(clamp(180px, 17vw, 300px) * .95); position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hiw-gap); max-width: 1120px; margin: 0 auto; }
html.v3 .hiw-step { text-align: center; position: relative; }
html.v3 .hiw-figure { margin: 0 auto; width: clamp(180px, 17vw, 300px); }
html.v3 .hiw-step .note { display: block; width: max-content; margin: 8px auto 0; --r: -2deg; transform-origin: center; }
html.v3 .hiw-rule { width: 70%; height: 1px; background: var(--ink-55); margin: 10px auto 14px; }
html.v3 .hiw-copy { max-width: 16em; margin: 0 auto; }
/* Round 6 (designer's guide, 2026-10-08): two short arrows carry you from step to step, as in the guide's
   mockup, instead of round 4's one long pen line round each drawing. The arc leaves the telephone for the
   file box and the loop rises over the gap and lands by the bell, both the designer's own masters at their
   drawn angle, centred on the gap between two columns and sized from the drawing's height. */
html.v3 .hiw-arrow { left: calc(100% + var(--hiw-gap) / 2); width: var(--aw); margin-left: calc(var(--aw) / -2); z-index: 1; }
html.v3 .hiw-arrow--ab { --aw: calc(var(--fig-h) * .52); top: calc(var(--fig-h) * .04); }
html.v3 .hiw-arrow--bc { --aw: calc(var(--fig-h) * .64); top: calc(var(--fig-h) * .02); }
/* The double tick by the bell ("a tick by the bell" in the guide's illustration section): two strokes of
   the check master, the second smaller and tucked in, as the guide draws it. */
html.v3 .hiw-tick { position: absolute; right: 4%; top: calc(var(--fig-h) * -.06); display: flex; align-items: flex-end; z-index: 1; clip-path: inset(0 0 0 0); transition: clip-path var(--dur-draw) var(--ease) .45s; }
html.v3 .hiw-tick .mark { width: calc(var(--fig-h) * .17); --r: 4deg; }
html.v3 .hiw-tick .mark + .mark { width: calc(var(--fig-h) * .15); margin-left: calc(var(--fig-h) * -.07); --r: 9deg; }
html.v3.js .nb:not(.is-in) .hiw-tick { clip-path: inset(0 100% 0 0); }
/* While the scroll drives the sequence the arrows follow it directly, with no transition. */
html.v3 #hiwCine.hiw-run .hiw-arrow { transition: none; }
html.v3 #hiwCine.hiw-run #hiwHl:not(.hl-on)::before { clip-path: inset(0 100% 0 0); }
html.v3 #hiwCine.hiw-run #hiwHl::before { transition: clip-path .8s cubic-bezier(.22,1,.36,1); } /* live: the one form wash sweeps in .8s on --ease-ink */
html.v3 #hiwCine.hiw-run .hiw-tick { transition-delay: .05s; transition-duration: .4s; }
html.v3 #hiwCine.hiw-run:not(.hiw-done) .hiw-tick { clip-path: inset(0 100% 0 0); }
html.v3 .hiw-pin { position: relative; }

/* Comparison */
html.v3 .cmp { max-width: 960px; margin: 0 auto; }
html.v3 .cmp-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 8px 10px; }
html.v3 .cmp-head .note { --r: -3deg; }
html.v3 .cmp-head .tick { position: relative; display: inline-block; width: 26px; vertical-align: bottom; margin-left: 10px; --r: 6deg; }
html.v3 .cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; padding: clamp(14px, 1.3vw, 22px) 8px; border-top: 1px solid var(--ink-15); }
html.v3 .cmp-row:last-child { border-bottom: 1px solid var(--ink-15); }
html.v3 .cmp-they { color: var(--ink-70); }
html.v3 .cmp-we { font-weight: 700; }
html.v3 .cmp-we .badge { font-weight: 600; }
html.v3 .comparison .aside { right: calc(100% - 10px); top: -50px; --r: -6deg; }

/* Testimonial: the note sits in a lead column and its arc arrow, flipped, travels from the end of
   the note down and right into the left edge of the quote. */
html.v3 .proof-wrap { display: grid; grid-template-columns: max-content minmax(0, 720px); column-gap: clamp(70px, 6vw, 100px); justify-content: center; align-items: start; }
html.v3 .proof-lead { position: relative; padding-top: 6px; }
html.v3 .proof-lead .note { position: relative; display: block; --r: -6deg; }
/* scaleY(-1) is applied after the rotation, so a negative angle here turns the arrow clockwise */
html.v3 .proof-lead .aside-arrow { position: absolute; left: calc(100% - 96px); top: 16px; width: clamp(150px, 13vw, 200px); transform: scaleY(-1) rotate(-8deg); }
html.v3 .proof { display: flex; justify-content: center; padding: 56px 0 10px; }
html.v3 .proof .card--note { max-width: 720px; transform: rotate(-1deg); text-align: center; padding-left: max(var(--paper-pad), 3vw); padding-right: max(var(--paper-pad), 3vw); }
html.v3 .proof blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lead); line-height: 1.4; }
html.v3 .proof cite { display: block; margin-top: 18px; font-style: normal; color: var(--ink-70); font-size: var(--fs-small); }
html.v3 .proof .tnote__tape { width: 30%; --tr: 3deg; }

/* Pricing: two taped notes that size to their content, the button below them */
html.v3 .pricing-page .aside { left: calc(100% + 4px); top: -40px; --r: 5deg; }
html.v3 .nb__page.pricing-page { padding-top: clamp(36px, 4vw, 64px); padding-bottom: clamp(36px, 4vw, 64px); }
html.v3 .pricing-page .section-head { margin-bottom: clamp(20px, 2vw, 32px); }
html.v3 .pricing-page .price-card__list { gap: 3px; margin-top: 10px; }
html.v3 .price-card--old .price-card__head { margin-bottom: .3em; } /* the hand label needs air above the figure at 45 and 60px */
html.v3 .pricing-page .pricing-cta { margin-top: clamp(20px, 2.4vw, 36px); }

/* Who's behind */
html.v3 .who { display: grid; grid-template-columns: auto minmax(0, var(--measure)); justify-content: center; gap: clamp(28px, 4vw, 72px); align-items: start; margin: 0 auto; } /* text beside the photo keeps to the 440-520px measure (guide 08, photos) */
html.v3 .who-photo { position: relative; width: clamp(150px, 14vw, 230px); transform: rotate(-3deg); margin-top: 12px; }
html.v3 .who-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: var(--shadow-sheet); border: 8px solid #fff; border-bottom-width: 30px; }
html.v3 .who-photo .tnote__tape { width: 70%; top: -18px; --tr: -5deg; }
html.v3 .who-text p + p { margin-top: 1em; }
html.v3 .who-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 24px; }
html.v3 .li-icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; background: var(--signal); }
html.v3 .li-icon svg { width: 20px; height: 20px; fill: var(--label-on-signal); }
html.v3 .li-icon:hover { outline: 1px solid var(--ink); outline-offset: 3px; }
html.v3 .icaew { height: 44px; width: auto; }
html.v3 .who-wrap { position: relative; }
html.v3 .who-wrap .aside { left: -6px; top: calc(100% + 14px); --r: -5deg; width: calc(100% + 12px); white-space: normal; line-height: .95; } /* round 6: notes are 45px now, so it wraps under the photo instead of running into the text */
html.v3 .who-page .section-head .t-heading { display: inline-block; }

/* FAQ */
html.v3 .faq-page .aside { right: calc(100% + 10px); top: 10px; --r: -6deg; }
html.v3 .faq__a .logos { display: flex; align-items: center; gap: 20px; margin: 4px 0 14px; }
html.v3 .faq__a .logos img { height: 36px; width: auto; }

/* Closing */
html.v3 .closing { text-align: center; position: relative; }
html.v3 .closing .note { --r: -4deg; margin-bottom: 4px; }
html.v3 .closing .mark { position: relative; display: block; width: clamp(70px, 6vw, 110px); margin: 0 auto 6px; --r: 12deg; left: -60px; }

/* Footer (round 4): Poppy walks along the tops of the four outline pills, each one squashing under her
   with a spring, and sits on Terms, as on the live site. The pills are .pf-pill in v3.css. She is placed
   by script; the box she lives in has no height, so her drawings stand up from her feet line. */ /* she stands in front of the pills, so no multiply */ /* the seated drawing is 529 of the running one's 550 at the same scale */

/* ---------- Horizontal notebook (round 3; spec section 12: desktop turns pages sideways) ----------
   JS adds .hmode to <html> at 1120px wide and 640px tall or more. Vertical scrolling drives the
   page turns: .desk becomes a tall scroller, .deck-sticky is a 100vh viewport and .deck-track
   holds the pages stacked like a notebook. Without .hmode the two wrappers vanish (display: contents). */
html.v3 {
  --deck-top: 76px; --deck-bottom: 44px; --deck-gap: 36px; --deck-peek: 96px;
  --hpage-w: min(var(--page-max), calc(100vw - var(--desk-gutter) - var(--spiral-overhang) - var(--deck-peek)));
  --hpage-h: var(--nb-block-h); /* the fixed block height token */
}
html.v3 .deck-sticky, html.v3 .deck-track { display: contents; }
html.v3 .deck-indicator, html.v3 .deck-snap { display: none; }
/* No scroll snapping: it would pull a half-turned page back, and the turn must stay where the reader stops. */
html.v3.hmode .desk { position: relative; padding: 0; }
html.v3.hmode .deck-sticky { display: block; position: sticky; top: 0; height: 100vh; overflow: clip; padding-top: var(--deck-top); }
/* Pages are stacked like a real notebook and turn on their spiral edge (round 3 page turn). */
html.v3.hmode .deck-track { display: block; position: relative; width: var(--hpage-w); height: var(--hpage-h); margin: 0 auto; left: calc(var(--spiral-overhang) / 2); perspective: 3600px; perspective-origin: 35% 50%; }
html.v3.hmode .deck-track > * { position: absolute !important; left: 0; top: 0; transform-origin: 0% 50%; transform-style: flat; will-change: transform; }
html.v3.hmode .turn-shade, html.v3.hmode .turn-under, html.v3.hmode .turn-back { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 20; }
/* the back of the sheet: blank paper with the grid, shown once the page passes upright */
html.v3.hmode .turn-back { z-index: 21; background-color: var(--sheet-1); background-image: linear-gradient(to left, rgba(20,20,20,.18), rgba(20,20,20,0) 60%), linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: auto, var(--grid-cell) var(--grid-cell), var(--grid-cell) var(--grid-cell); box-shadow: var(--shadow-sheet); }
/* the lifting page darkens towards its hinge as it turns */
html.v3.hmode .turn-shade { background: linear-gradient(to right, rgba(20,20,20,.55), rgba(20,20,20,.12) 45%, rgba(20,20,20,0)); }
/* the shadow the lifting page casts on the sheet beneath, moved with transform as the edge travels */
html.v3.hmode .turn-under { right: auto; width: 60%; background: linear-gradient(to right, rgba(20,20,20,0), rgba(20,20,20,.28) 55%, rgba(20,20,20,0)); }
html.v3 .turn-shade, html.v3 .turn-under, html.v3 .turn-back { display: none; }
html.v3.hmode .turn-shade, html.v3.hmode .turn-under, html.v3.hmode .turn-back { display: block; }
html.v3.hmode .deck-track > .nb { flex: none; width: var(--hpage-w); height: var(--hpage-h); margin: 0; }
html.v3.hmode .deck-track > .nb > .nb__page { height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 26px; padding-bottom: 26px; overflow: hidden; }
html.v3.hmode .scroll-hero { flex: none; width: var(--hpage-w); height: var(--hpage-h); margin: 0; }
html.v3.hmode .sticky-container { position: relative; height: 100%; padding: 0; overflow: visible; }
html.v3.hmode .deck-indicator { display: block; position: fixed; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 40; pointer-events: none;
  font-family: var(--font-body); font-size: var(--fs-small); line-height: 2.6; color: var(--ink-70); font-variant-numeric: tabular-nums; white-space: nowrap; } /* a small digital label (guide 03: small labels and figures use Schibsted Grotesk) */
/* Compact rhythm so every page fits one screen at 1280x720 */
html.v3.hmode .section-head { position: static; max-width: 40em; margin-bottom: 22px; }
html.v3.hmode .section-head .aside { position: absolute; top: 22px; right: 5%; left: auto; margin: 0; white-space: nowrap; }
html.v3.hmode .comparison .section-head .aside { right: auto; left: calc(var(--spiral-w) - var(--spiral-overhang) + 4%); }
html.v3.hmode .faq-page .section-head .aside { top: auto; bottom: 26px; right: 6%; }
html.v3.hmode .section-cta { margin-top: 24px; }
html.v3.hmode .hero .t-lead { margin-top: 22px; }
html.v3.hmode .hero .section-cta { margin-top: 22px; }
html.v3.hmode .notes-row { padding-top: 34px; }
html.v3.hmode .tnote { border-width: 30px 12px 34px 12px; border-image-width: 30px 12px 34px 12px; padding-top: 10px; }
html.v3.hmode .tnote__icon { width: 84px; height: 72px; }
html.v3.hmode .tnote__art { margin-bottom: 10px; }
html.v3.hmode .tnote__rule { margin-bottom: 10px; }
html.v3.hmode .notes-row .tnote:nth-child(2) { margin-top: 14px; }
html.v3.hmode .notes-row .tnote:nth-child(4) { margin-top: 20px; }
html.v3.hmode .tnote__tape { top: -40px; height: 46px; }
html.v3.hmode .vig-stage { margin-top: 22px; }
html.v3.hmode .hiw-figure { width: auto; height: clamp(130px, 24vh, 280px); }
html.v3.hmode .hiw-grid { --fig-h: clamp(130px, 24vh, 280px); }
html.v3.hmode .cmp-head { padding-bottom: 4px; }
html.v3.hmode .cmp-row { padding: 7px 8px; }
@media (min-width: 1800px) and (max-height: 1040px) { html.v3.hmode .cmp-row { padding: 4px 8px; } html.v3.hmode .comparison .section-head { margin-bottom: 12px; } } /* the guide's 1920 sizes in a maximised browser window, about 950 tall */
html.v3.hmode .badge { margin-top: 3px; }
html.v3.hmode .proof { padding-top: 36px; }
html.v3.hmode .nb__page.pricing-page { padding-top: 22px; padding-bottom: 22px; }
html.v3.hmode .pricing-page .section-head { margin-bottom: 40px; } /* clears the tape, which rises 30px above each card */
html.v3.hmode .price-card { border-width: 30px 12px 34px 12px; border-image-width: 30px 12px 34px 12px; }
html.v3.hmode .price-card .tnote__tape { top: -30px; height: 36px; }
html.v3.hmode .faq__q { padding: 12px 0; }
html.v3.hmode .faq__a > div > :last-child { margin-bottom: 12px; }
html.v3.hmode .who-photo { width: clamp(150px, 12vw, 220px); }
@media (max-height: 780px) {
  html.v3.hmode .tnote__icon { width: 70px; height: 58px; }
  html.v3.hmode .tnote__art { margin-bottom: 6px; }
  html.v3.hmode .tnote__rule { margin-bottom: 8px; }
  html.v3.hmode .notes-row { padding-top: 30px; }
  html.v3.hmode .vig-stage { margin-top: 14px; }
  html.v3.hmode .features .section-head { margin-bottom: 12px; }
}
html.v3.hmode .deck-track > .nb > .nb__page { --page-pad-x: 36px; }
html.v3.hmode .obj--pencil.hero-pencil { right: 14px; top: 6%; }
html.v3.hmode .notes-row { gap: 16px; max-width: none; }
html.v3.hmode .notes-row { display: flex; justify-content: center; align-items: flex-start; }
/* Size follows the content (guide 08): each note is as wide as its own copy needs, up to a short measure,
   so neighbouring notes differ in size as well as angle. */
html.v3.hmode .notes-row .tnote { flex: 0 1 auto; width: max-content; max-width: calc(var(--fs-card) * 15); min-width: 150px; }
/* features: the aside becomes a kicker above the heading, offset right, so it never meets the type */
html.v3.hmode .features .section-head { display: flex; flex-direction: column; align-items: center; }
html.v3.hmode .features .section-head .aside { position: static; order: -1; align-self: flex-end; margin: 0 6% 2px 0; }
html.v3.hmode .faq__a .logos { margin: 2px 0 8px; }
html.v3.hmode .faq__a .logos img { height: 28px; }
html.v3.hmode .faq__a p { padding-bottom: .4em; }


/* ---------- Fixed block height in the vertical layout (round 3) ----------
   Every notebook page is exactly --nb-block-h tall and its content is composed centred inside it.
   The block splitter script moves overflow onto a continuation page, so nothing is ever clipped. */
html.v3:not(.hmode) .deck-track > .nb, html.v3:not(.hmode) .hiw-pin > .nb { height: var(--nb-block-h); }
html.v3:not(.hmode) .deck-track > .nb > .nb__page, html.v3:not(.hmode) .hiw-pin > .nb > .nb__page { height: 100%; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
html.v3:not(.hmode) .deck-track > .nb > .nb__page.measuring { justify-content: flex-start; }
html.v3:not(.hmode) .deck-track > .nb > .nb__page > *, html.v3:not(.hmode) .hiw-pin > .nb > .nb__page > * { flex: none; }
html.v3 .nb--cont .cont-note { position: absolute; top: 18px; right: 6%; left: auto; --r: -4deg; z-index: 2; }
html.v3 .nb--cont .cont-mark { top: 6px; right: calc(6% + 9.5em); width: 26px; --r: 200deg; }
html.v3:not(.hmode) .nb--cont > .nb__page { padding-top: 64px; }
html.v3:not(.hmode) .nb__page { --page-pad-y: 40px; }

/* ---------- Demo modals, restyled as notebook sheets on the desk ---------- */
html.v3 .demo-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(20,20,20,.42); }
html.v3 .demo-modal.open { display: flex; animation: modalFade .2s ease; }
/* Round 4, as live: the dim desk fades in and the sheet rises into place (none under reduced motion) */
html.v3 .demo-modal.open .demo-modal-card { animation: modalRise .3s cubic-bezier(.2,.8,.2,1); }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalRise { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
html.v3 .demo-modal-card { width: 100%; max-width: 760px; max-height: calc(100vh - 48px); overflow: auto; background-color: var(--page);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px; box-shadow: 0 10px 40px rgba(0,0,0,.25); padding: 24px clamp(18px, 3vw, 36px) 30px; }
html.v3 .demo-modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
html.v3 .demo-modal-header h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-card); line-height: 1.25; }
html.v3 .demo-modal-header p { color: var(--ink-70); font-size: var(--fs-small); margin-top: 4px; }
html.v3 .demo-modal-close { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); background: var(--page); cursor: pointer; color: var(--ink); }
html.v3 .demo-modal-close:hover { background: var(--ink-08); }
html.v3 .demo-note { text-align: center; color: var(--ink-70); font-size: var(--fs-small); margin-top: 12px; }
html.v3 .num { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
/* VAT */
html.v3 .vat-cols-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
html.v3 .vat-col { border: 1px solid var(--ink-15); background: var(--page); padding: 10px 12px; min-height: 250px; }
html.v3 .vat-col-title { display: flex; justify-content: space-between; font-weight: 600; font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-70); padding-bottom: 8px; }
html.v3 .vat-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--ink-08); transition: opacity .5s, transform .5s; font-size: var(--fs-body); }
html.v3 .vat-row .period { font-weight: 700; } html.v3 .vat-row .dates { font-size: var(--fs-small); color: var(--ink-70); }
html.v3 .vat-row .check { display: none; color: var(--ink); }
html.v3 .vat-row.filed .check { display: block; }
html.v3 .vat-row.filing { opacity: .2; transform: translateX(12px); }
html.v3 .vat-row.filed { animation: rowIn .45s var(--ease); }
@keyframes rowIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
html.v3 .typing-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
html.v3 .typing-dots span { width: 5px; height: 5px; background: currentColor; animation: dot 1.2s infinite; }
html.v3 .typing-dots span:nth-child(2) { animation-delay: .15s; } html.v3 .typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* live typingBounce */
/* Before / after slider */
html.v3 #split-container { position: relative; overflow: hidden; height: 440px; border: 1px solid var(--ink); user-select: none; cursor: ew-resize; }
html.v3 .split-pane { position: absolute; top: 0; bottom: 0; padding: 16px; overflow: hidden; font-size: var(--fs-small); }
html.v3 .split-before { left: 0; right: 0; background: var(--desk); }
html.v3 .split-after { right: 0; width: 50%; background: var(--page); border-left: 0; }
html.v3 .split-label { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-70); margin-bottom: 12px; white-space: nowrap; }
html.v3 .mail { background: var(--page); border: 1px solid var(--ink-15); padding: 9px 11px; margin-bottom: 8px; }
html.v3 .mail-top { display: flex; justify-content: space-between; font-weight: 600; color: var(--ink-70); white-space: nowrap; }
html.v3 .mail-top span + span { font-weight: 400; }
html.v3 .mail-body { margin-top: 3px; white-space: nowrap; }
html.v3 .wa { display: flex; flex-direction: column; gap: 8px; min-width: 300px; }
html.v3 .wa-msg { max-width: 85%; padding: 9px 11px; border: 1px solid var(--ink-15); }
html.v3 .wa-msg.them { align-self: flex-start; background: var(--desk); }
html.v3 .wa-msg.me { align-self: flex-end; background: var(--page); border-color: var(--ink-55); max-width: 70%; }
html.v3 .wa-time { color: var(--ink-55); text-align: right; margin-top: 3px; }
html.v3 #split-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--ink); z-index: 10; transform: translateX(-50%); cursor: ew-resize; }
html.v3 #split-handle .knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; background: var(--signal); border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; }
/* Receipt snap */
html.v3 .receipt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
html.v3 .phone-frame { position: relative; width: 220px; height: 400px; margin: 0 auto; border: 2px solid var(--ink); border-radius: 30px; background: var(--ink); padding: 10px; }
html.v3 .phone-notch { position: absolute; top: 10px; left: 50%; width: 70px; height: 14px; background: var(--ink); transform: translateX(-50%); z-index: 3; border-radius: 0 0 10px 10px; }
html.v3 .phone-screen { position: relative; height: 100%; border-radius: 22px; background: #2a2a2a; overflow: hidden; }
html.v3 .viewfinder { position: absolute; inset: 30px 20px 90px; border: 1px dashed rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--fs-small); text-align: center; }
html.v3 .snap-btn { position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%); width: 54px; height: 54px; border-radius: 50%; border: 4px solid #fff; background: var(--signal); cursor: pointer; }
html.v3 .receipt-img { display: none; position: absolute; inset: 40px 30px auto; background: #fff; color: var(--ink); padding: 12px; font-size: var(--fs-small); transition: transform .8s, opacity .8s; }
html.v3 .receipt-img.flying { transform: translateX(60px) scale(.6); opacity: 0; }
html.v3 .receipt-img .row { display: flex; justify-content: space-between; }
html.v3 .flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .3s; }
html.v3 .flash.active { opacity: .9; }
html.v3 .extracted-panel { display: none; opacity: 0; transition: opacity .4s; }
html.v3 .extracted-panel.show { opacity: 1; }
html.v3 .extracted-card { border: 1px solid var(--ink-15); background: var(--page); padding: 12px 14px; }
html.v3 .extracted-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--ink-08); font-size: var(--fs-small); }
html.v3 .extracted-row:first-child { border-top: 0; }
html.v3 .extracted-row .label { color: var(--ink-70); }
html.v3 .extracted-row .value { font-weight: 600; text-align: right; }
html.v3 .text-button { background: none; border: 0; padding: 0; margin-top: 12px; cursor: pointer; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; color: var(--ink); }
/* Chat */
html.v3 .chat-panel { border: 1px solid var(--ink-15); background: var(--page); }
html.v3 .chat-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ink-15); }
html.v3 .chat-avatar { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--page); font-family: var(--font-display); font-weight: 700; }
html.v3 .chat-status { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--ink-70); }
html.v3 .chat-status::before { content: ""; width: 7px; height: 7px; background: var(--signal); }
html.v3 .chat-messages { height: 280px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
html.v3 .chat-msg { max-width: 85%; padding: 10px 12px; font-size: var(--fs-small); line-height: 1.45; white-space: pre-wrap; }
html.v3 .chat-msg.ai { align-self: flex-start; background: var(--desk); border: 1px solid var(--ink-15); }
html.v3 .chat-msg.user { align-self: flex-end; background: var(--ink); color: var(--page); }
html.v3 .chat-msg strong { font-weight: 700; }
html.v3 .chat-msg a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
html.v3 .chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--ink-15); }
html.v3 .chat-chip { height: auto; min-height: 36px; padding: 6px 12px; font-size: var(--fs-small); font-family: var(--font-body); white-space: normal; text-align: left; }
html.v3 .text-amber-500 { font-style: italic; }
/* Gmail */
html.v3 .gmail-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 0; text-align: center; }
html.v3 .gmail-illustration img { width: 150px; mix-blend-mode: multiply; animation: gmailFloat 3s ease-in-out infinite; } /* live's floating envelope */
@keyframes gmailFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { html.v3 .gmail-illustration img { animation: none; } }
html.v3 .gmail-connect-btn { gap: 10px; height: 48px; }
html.v3 .gmail-connect-btn svg { filter: grayscale(1); }
html.v3 .gmail-permissions, html.v3 .gmail-counter, html.v3 .gmail-footer { font-size: var(--fs-small); color: var(--ink-70); }
html.v3 .gmail-status { font-weight: 600; }
html.v3 .gmail-spinner { width: 34px; height: 34px; border: 3px solid var(--ink-15); border-top-color: var(--ink); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
html.v3 .gmail-stage-results { align-items: stretch; text-align: left; }
html.v3 .gmail-results-header { display: flex; justify-content: space-between; align-items: center; }
html.v3 .gmail-done-count { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-card); }
html.v3 .gmail-done-total { color: var(--ink-70); font-size: var(--fs-small); }
html.v3 .gmail-rows { display: flex; flex-direction: column; gap: 6px; }
html.v3 .gmail-row { display: grid; grid-template-columns: 32px 1fr auto 20px; gap: 10px; align-items: center; padding: 8px 10px; background: var(--page); border: 1px solid var(--ink-15); animation: gmailRowIn .4s ease; }
@keyframes gmailRowIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } } /* live: rows slide in from the right */
html.v3 .gmail-row-logo { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--desk); border: 1px solid var(--ink-15); font-weight: 700; }
html.v3 .gmail-row-vendor { font-weight: 600; font-size: var(--fs-small); } html.v3 .gmail-row-subject { font-size: var(--fs-small); color: var(--ink-70); }
html.v3 .gmail-row-amount { font-family: var(--font-display); font-weight: 700; }
html.v3 .brand-word { font-weight: 700; }

/* ---------- Tablet and mobile (vertical layout) ---------- */
/* Aside notes only float beside a heading when the page has room (1440 and up);
   below that they drop into the flow, offset right, so they never reach the page edge. */
@media (max-width: 1439px) {
  html.v3 .section-head .aside { position: relative; display: block; width: max-content; max-width: 100%; white-space: normal; left: auto; right: auto; top: auto; margin: 14px 0 0 auto; text-align: right; }
}
@media (max-width: 1100px) {
  html.v3 .notes-row { grid-template-columns: repeat(2, 1fr); row-gap: 40px; max-width: 680px; }
  html.v3 .notes-row .tnote:nth-child(n) { margin-top: 0; }
  html.v3 .proof-wrap { grid-template-columns: minmax(0, 1fr); }
  html.v3 .proof-lead { justify-self: start; width: max-content; max-width: 100%; margin-left: 4%; }
  html.v3 .proof-lead .aside-arrow { position: relative; display: block; left: 0; top: 0; margin: 2px 0 -40px 52%; width: 80px; transform: scaleY(-1) rotate(-50deg); }
  html.v3 .proof { padding-top: 40px; }
}
@media (max-width: 860px) {
  html.v3 .hiw-grid { grid-template-columns: 1fr; gap: 48px; --fig-h: 171px; }
  html.v3 .hiw-arrow { display: none; } /* one column: the steps follow each other down the page */
  html.v3 .hiw-tick { right: 18%; }
  html.v3 .who { grid-template-columns: 1fr; justify-items: center; }
  html.v3 .who-text { text-align: left; }
  html.v3 .who-wrap .aside { position: relative; display: block; left: auto; top: auto; margin: 22px auto 0; width: max-content; max-width: 100%; }
  html.v3 .hero .swirl { display: none; }
}
@media (max-width: 640px) {
  html.v3 .sticky-container { padding: 12px 16px 12px calc(16px + var(--spiral-overhang)); }
  html.v3 .hero-stack { width: 78%; top: 38%; }
  html.v3 .hero-continuation { white-space: normal; width: calc(100vw - 110px); }
  html.v3 .hero-counter .hit-tick { right: -14px; }
  html.v3 .hero-counter { bottom: 13%; }
  html.v3 .hero-counter .stat { flex-wrap: wrap; justify-content: center; white-space: normal; width: 76vw; row-gap: 2px; }
  html.v3 .hero-counter .stat__sep { display: none; }
  html.v3 .hero-counter .stat > .stat__value:last-of-type { flex-basis: 100%; text-align: center; }
  html.v3 .obj--pencil.hero-pencil { display: none; }
  html.v3 .hero .note--kicker { margin-left: 2%; white-space: normal; width: auto; max-width: 250px; text-align: left; line-height: 1.1; }
  html.v3 .notes-row { grid-template-columns: 1fr; row-gap: 30px; }
  html.v3 .notes-row .tnote { max-width: 236px; }
  html.v3 .notes-row .tnote:nth-child(odd) { justify-self: start; }
  html.v3 .notes-row .tnote:nth-child(even) { justify-self: end; }
  html.v3 .vig-stage { grid-template-columns: 1fr; gap: 2px; margin-top: 32px; }
  html.v3 .vig-arrow { transform: rotate(90deg); margin: 0 0 0 10px; width: 30px; }
  html.v3 .vig { justify-content: start; }
  html.v3 .vig-tags { flex-wrap: wrap; }
  html.v3 .cmp-head { display: none; }
  html.v3 .cmp-row { grid-template-columns: 1fr; }
  html.v3 .pricing-page .pricing { grid-template-columns: minmax(0, 340px); row-gap: 18px; }
  html.v3 .pricing-page .section-head .aside { margin-top: 4px; }
  html.v3 .vat-cols-grid, html.v3 .receipt-grid { grid-template-columns: 1fr; }
  html.v3 .vat-col { min-height: 0; }
  html.v3 .closing .mark { left: -30px; }
}
/* ======== from the trial's v3-continuous.css ======== */
/* ============ v3 Notebook, continuous variant (round 7, 2026-10-10) ============
   Loaded only by prototypes/index-v3-continuous.html, after the page's own styles, and scoped to
   html.v3-cont so it can never touch the other two pages. The designer's brief: "one continuous
   notebook: the spiral once at the top, one sheet with the grid running all the way down, and a torn
   edge at the bottom that opens into the footer. The desk behind it goes signal orange."

   How it works: the deck, the fixed block splitter and the how-it-works pin are switched off by the
   build (build-v3-continuous.mjs), so the sections are ordinary blocks in the normal flow. #deckTrack
   becomes the one sheet: its ::before is the paper (grid plus the torn bottom edge, cut with a mask
   so nothing laid on the paper is clipped) and .cont-spiral is the binding across the top. Every
   section loses its own paper, spiral, sheets underneath and fixed height, so they read as stretches
   of the one sheet. Measurements are from the designer's Figma frame "example" (1920 x 8140). */
html.v3.v3-cont {
  --spiral-w: 0px;              /* no left binding anywhere: collapses every offset the side spiral needed */
  --spiral-overhang: 0px;
  --desk-gutter: clamp(16px, 2.7vw, 52px);   /* Figma: 52px of desk either side of the sheet at 1920 */
  --cont-sheet-max: 1816px;     /* Figma: the sheet is 1816 wide on the 1920 frame */
  --bind-h: 64px;               /* coil strip height, the guide's coil at the top-bound variant's proportions */
  --bind-overhang: 30px;        /* how far the wire rises above the sheet (Figma: about 37 at 1920) */
  --bind-drop: 6px;             /* round 21: the coils sit this much lower on the paper than the overhang alone puts them */
  --bind-on-page: calc(var(--bind-h) - var(--bind-overhang) + var(--bind-drop));
  --bind-inset: 7.5%;           /* Figma: the coils start about 138px in from either side of the sheet */
  --tear-h: 96px;               /* the torn edge, Figma: about 90px from deepest bite to highest peak */
  --tear-w: 960px;              /* one tile of the edge, repeated across */
  --cont-head-h: 76px;          /* the header's height, measured by script */
  --cont-top: calc(var(--cont-head-h) + var(--bind-overhang));            /* where the sheet starts */
  --cont-stick: calc(var(--cont-top) + var(--bind-on-page));             /* where the opening holds still: exactly where it rests */
  --sec-pad-y: clamp(56px, 6.25vw, 120px);   /* round 21: was clamp(48px, 5.2vw, 100px) */
}
@media (min-width: 1800px) and (min-height: 1000px) { html.v3.v3-cont { --bind-h: 76px; --bind-overhang: 36px; --bind-drop: 7px; } }
@media (max-width: 640px) {
  html.v3.v3-cont { --bind-h: 34px; --bind-overhang: 15px; --bind-drop: 3px; --bind-inset: 20px; --tear-h: 52px; --tear-w: 520px; --sec-pad-y: 48px; }
}

/* ---------- The desk is signal orange ---------- */
html.v3.v3-cont body { background: var(--signal); }
html.v3.v3-cont .desk { padding: var(--cont-top) var(--desk-gutter) 0; }

/* ---------- Header on the orange desk ----------
   Figma: ink wordmark with a cream full stop, the tagline in cream, ink links, and Get started as a cream
   button with the ink border and hard ink shadow (a signal button would vanish into a signal desk). It is
   on screen from the first frame, as the Figma draws it. */ /* the frame shows it from the first screen */ /* round 11: the light button stays #FFFDFB on hover and press (pack .btn-light) */

/* ---------- The one sheet ---------- */
html.v3.v3-cont .deck-sticky { display: block; }
html.v3.v3-cont .deck-track {
  display: block; position: relative; z-index: 1; isolation: isolate;
  max-width: var(--cont-sheet-max); margin: 0 auto;
  padding: var(--bind-on-page) 0 calc(var(--tear-h) * .8);
}
html.v3.v3-cont .cont-paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--page);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  /* the paper runs solid to just above the tear, then the torn tile cuts the bottom edge */
  -webkit-mask-image: linear-gradient(#000, #000), url("/assets/v3/img/absolv-sheet-torn-edge.svg");
  mask-image: linear-gradient(#000, #000), url("/assets/v3/img/absolv-sheet-torn-edge.svg");
  -webkit-mask-size: 100% calc(100% - var(--tear-h) + 1px), var(--tear-w) var(--tear-h);
  mask-size: 100% calc(100% - var(--tear-h) + 1px), var(--tear-w) var(--tear-h);
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-repeat: no-repeat, repeat-x; mask-repeat: no-repeat, repeat-x;
}
/* The binding, once, across the top: the wire arcs over the top edge into holes on the sheet.
   Round 21 (the designer, approved by Shaun on 2026-10-28, which retires round 10's notebook tabs): the header, the
   binding and the links stay fixed while the sheet scrolls, so the binding is part of the fixed header. Under the header
   runs a band as tall as the wire's rise, in desk orange across the whole width, then a strip of the sheet's top edge
   in paper with the grid's columns, which the sheet scrolls under; the coils sit over both, a few pixels lower than
   before (--bind-drop) so their ends land in the holes on the paper. At the top of the page the strip lies exactly over
   the sheet's own top edge, so the first screen looks as it did. The strip stops where the torn column starts. */
/* Both bands take the pointer, so a click on the strip never reaches a FAQ row or a link hidden underneath it. */

/* ---------- Sections are stretches of the one sheet ----------
   No paper, spiral, sheets underneath or fixed height of their own, and nothing is clipped. */
html.v3.v3-cont { scroll-padding-top: var(--cont-stick); }   /* round 21: keyboard focus and any other hash also land below the binding */
html.v3.v3-cont .nb { max-width: none; margin: 0; scroll-margin-top: var(--cont-stick); } /* round 21: below the fixed binding, not just the header */
html.v3.v3-cont .nb::before, html.v3.v3-cont .nb::after, html.v3.v3-cont .nb__spiral { display: none; }
html.v3.v3-cont .deck-track > .nb { height: auto; }
html.v3.v3-cont .nb__page,
html.v3.v3-cont .deck-track > .nb > .nb__page {
  height: auto; overflow: visible; background: none; box-shadow: none;
  padding: var(--sec-pad-y) var(--page-pad-x);
}
/* The page boxes must not form stacking contexts: the paper is drawn on #deckTrack::before, so a drawing
   with mix-blend-mode: multiply has to blend against that layer or its white box hides the grid. */
html.v3.v3-cont .nb__page { z-index: auto; }
/* Round 21 (the designer: "the sections feel a bit too close together ... I'd increase the spacing between blocks"): two
   stretches no longer share one gap, each keeps its own, so the space between sections runs from 112px to 180px at 1440
   (150 to 240 at 1920, 66 to 96 on a phone). */
html.v3.v3-cont .deck-track > .nb + .nb > .nb__page { padding-top: var(--sec-pad-y); }
html.v3.v3-cont .deck-track > .nb#start > .nb__page { padding-bottom: calc(var(--sec-pad-y) * .6); }

/* ---------- The opening, on the sheet ----------
   The same choreography (bare wordmark, the tagline writing itself in, paperwork flying into the counter,
   the continuation line). The pane holds still under the coils for 30vh of scroll, then the sheet moves on. */
html.v3.v3-cont .scroll-hero { margin: 0; height: calc(100svh - var(--cont-stick) + 30vh); }
html.v3.v3-cont .sticky-container { top: var(--cont-stick); height: calc(100svh - var(--cont-stick)); padding: 0; }
html.v3.v3-cont .sticky-container .nb__page { height: 100%; padding: 0; overflow: hidden; }
html.v3.v3-cont .hero-stack { top: 38%; }
html.v3.v3-cont .obj--pencil.hero-pencil { display: none; } /* the desk pencil lies across the torn edge instead, as in the Figma */

/* ---------- The torn edge opens into the footer on the desk ---------- */
html.v3.v3-cont .cont-pencil { right: 6%; bottom: calc(var(--tear-h) * -1.1); width: clamp(48px, 3.6vw, 70px); --r: 26deg; z-index: 6; } /* pencil orange cannot be read on the signal desk */

@media (max-width: 900px) {
  html.v3.v3-cont .cont-pencil { display: none; } /* at tablet widths it would crowd the footer pills and the copyright */
  /* a wrapped line kept its tick at the far left while the text centred, so the lists sit left in their card */
  html.v3.v3-cont .price-card__list { justify-items: start; text-align: left; }
}
@media (max-width: 640px) {
  /* Round 6 made .pricing a flex row and the phone rule in v3.css still sets grid columns, which a flex box
     ignores. The other pages never show it because the block splitter moves the second card to a new sheet;
     on the one sheet the cards must stack, so the column is set here. */
  html.v3.v3-cont .pricing { flex-direction: column; align-items: center; gap: 28px; }
  html.v3.v3-cont .cont-pencil { display: none; }
}

/* ---------- Round 9: the yellow highlighter (2026-10-10) ----------
   Shaun: "lets go with yellow highlighter". The designer's frame (node 175-560) marks every highlight in a lemon
   highlighter, #FFEE68 multiplied onto the paper, where two strokes cross it reads #FFE02B. The marks are the same
   double and single strokes recoloured. */
html.v3.v3-cont { --hl: #FFEE68; --hl-overlap: #FFE02B;
  --signal: #FF5B00; --pencil: #FF5B00; }
/* The updated frame uses one orange, #FF5B00, where the others use pencil #C8420F for lines and letters and signal
   #ED6700 for filled shapes. The marks and logos it recolours are generated copies in assets/v3/cont/ (see the build). */
html.v3.v3-cont .hl { --hl-img: url("/assets/v3/marks/absolv-highlight-double-a-yellow.svg"); }
html.v3.v3-cont .hl--b { --hl-img: url("/assets/v3/marks/absolv-highlight-double-b-yellow.svg"); }
html.v3.v3-cont .hl--c { --hl-img: url("/assets/v3/marks/absolv-highlight-double-c-yellow.svg"); }
html.v3.v3-cont .hl--single { --hl-img: url("/assets/v3/marks/absolv-highlight-single-a-yellow.svg"); }
html.v3.v3-cont .hl--single-b { --hl-img: url("/assets/v3/marks/absolv-highlight-single-b-yellow.svg"); }
html.v3.v3-cont .hl--single-c { --hl-img: url("/assets/v3/marks/absolv-highlight-single-c-yellow.svg"); }
/* With --pencil now equal to --signal, the shared button hover (background: var(--pencil)) would no longer change, so
   hover and press take a darker orange. Round 11: the guide's dark orange #D93200 (was the old pencil #C8420F). */
html.v3.v3-cont .btn:hover, html.v3.v3-cont .btn:active { background: #D93200; }

/* ---------- Round 10: the right-hand edge is torn too (2026-10-10) ----------
   Shaun: "can you make right hand side of the page be perforated like the bottom please?" The right edge uses the
   same tear turned on its side (img/absolv-sheet-torn-edge-right.svg, the bottom path with x and y swapped), drawn
   shallower than the bottom so the bites read as a torn margin rather than a missing column. The paper is two layers
   with plain (union) masks only, because WebKit and Chromium composite intersecting mask layers differently:
     ::before = the sheet up to the torn column, cut along the bottom as before
     ::after  = the torn column on the right; the tear runs down its content box (padding keeps it out of the bottom
                band), and img/absolv-sheet-torn-corner.svg fills the bottom-right corner, torn on both sides.
   Both tears are anchored at the bottom-right corner, so the corner piece always meets them. It was cut for these
   ratios: --tear-r is 1/16 of --tear-w and --tear-h is 2/15 of --tear-r-len, at every width. */
html.v3.v3-cont { --tear-r: 60px; --tear-r-len: 720px; }
@media (max-width: 640px) { html.v3.v3-cont { --tear-r: 32.5px; --tear-r-len: 390px; } }
html.v3.v3-cont .cont-paper::before {
  right: calc(var(--tear-r) - 1px); /* one pixel under the column, or WebKit leaves a hairline of desk at the seam */
  -webkit-mask-position: 0 0, 100% 100%; mask-position: 0 0, 100% 100%;
}
html.v3.v3-cont .cont-paper::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: var(--tear-r); z-index: -1; pointer-events: none;
  box-sizing: border-box; padding-bottom: calc(var(--tear-h) - 1px); /* the tear overlaps the corner piece by a pixel, no hairline */
  background-color: var(--page);
  /* rows only: the column sits at no fixed offset from the sheet's left edge, so its own vertical rules would fall
     out of step with the sheet's; the rows share the top edge and run straight on */
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px);
  background-size: 100% var(--grid-cell);
  -webkit-mask-image: url("/assets/v3/img/absolv-sheet-torn-edge-right.svg"), url("/assets/v3/img/absolv-sheet-torn-corner.svg");
  mask-image: url("/assets/v3/img/absolv-sheet-torn-edge-right.svg"), url("/assets/v3/img/absolv-sheet-torn-corner.svg");
  -webkit-mask-size: var(--tear-r) var(--tear-r-len), var(--tear-r) var(--tear-h); mask-size: var(--tear-r) var(--tear-r-len), var(--tear-r) var(--tear-h);
  -webkit-mask-position: 0 100%, 0 100%; mask-position: 0 100%, 0 100%; /* both anchored at the bottom, where the corner piece meets them */
  -webkit-mask-repeat: repeat-y, no-repeat; mask-repeat: repeat-y, no-repeat;
  -webkit-mask-clip: content-box, border-box; mask-clip: content-box, border-box;
  -webkit-mask-origin: border-box, border-box; mask-origin: border-box, border-box;
}
/* the tear takes up to two thirds of the column out of the paper, so the stretches keep their content clear of it
   (on phones the FAQ plus signs sat on the edge); the held opening keeps its own zero padding */
html.v3.v3-cont .nb__page,
html.v3.v3-cont .deck-track > .nb > .nb__page { padding-right: calc(var(--page-pad-x) + var(--tear-r) * .67); }
/* The logo never gives way to the links (round 10 review: the wordmark was squeezed to 5px at 320 and 56px at 641). */

/* ---------- Round 11: the designer's guidelines of 2026-10-11 ----------
   Applied on /continuous only (docs/DESIGN-SYSTEM-V3.md, "Round 11"). Values are from the asset pack's
   tokens/absolv-tokens.css, which the guide calls the coded spec. */
/* Display face: Aleo (SIL OFL, Google Fonts), self-hosted. The files are the variable font, so one file per subset
   carries Medium 500 and Bold 700. The hand face is Infamous since round 17, in the generated cont/v3-tokens.css. */
html.v3.v3-cont {
  /* palette: cream desk and card paper, notepad page and button label, the pack's yellow, and two oranges */
  --desk: #FBF6EE; --page: #FFFDFB; --note-paper: #FBF6EE; --label-on-signal: #FFFDFB;
  --hl: #FFF06A; --hl-overlap: #FFE02B;   /* #FFF06A multiplied over itself measures #FFE22C, a hair off the guide's chip */
  --signal: #FF5B00;                      /* shapes only (round 16 part B made the build's mark copies dark orange #D93200) */
  --pencil: #D93200;                      /* every orange letter: notes, the card key line, orange labels, button hover and press */
  --dark-orange: #D93200;
  --black-40: rgba(20, 20, 20, .4);       /* thin rules only, never text (2.57:1 fails as text) */
  /* type */
  --font-display: "Aleo", Georgia, serif;
  --w-hero: 700; --lh-heading: 1.0; --ls-heading: 0; --lh-lead: 1.2;
  /* button */
  --shadow-hard: 4px 4px 0 var(--ink);
}
/* --pencil is now text only, so the two places that used it for a shape go back to signal */
html.v3.v3-cont .fx-live { fill: var(--signal); }
html.v3.v3-cont .hero-continuation { line-height: var(--lh-heading); } /* the continuation line is set as a heading */
/* card headline and card descriptor: -2% tracking */
html.v3.v3-cont .price-card__amount, html.v3.v3-cont .stat__value, html.v3.v3-cont .price-card__sub { letter-spacing: -0.02em; }
/* navigation: Schibsted Grotesk Medium at the nav size, line height 1.0, header and footer alike */
/* buttons: 4px hard shadow, hover moves 2px onto a 2px shadow, press sits flat; both fill dark orange (rule above),
   and the light header button keeps its #FFFDFB fill (round 7 rule above, now var(--page) = #FFFDFB) */
html.v3.v3-cont .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
html.v3.v3-cont .btn:active, html.v3.v3-cont .btn[disabled] { transform: translate(4px, 4px); box-shadow: none; }
/* thin rules at black 40%: FAQ dividers, comparison table rules, the card and step rules, the counter's rules */
html.v3.v3-cont .faq { border-bottom-color: var(--black-40); }
html.v3.v3-cont .faq__item { border-top-color: var(--black-40); }
html.v3.v3-cont .cmp-row { border-top-color: var(--black-40); }
html.v3.v3-cont .cmp-row:last-child { border-bottom-color: var(--black-40); }
html.v3.v3-cont .tnote__rule, html.v3.v3-cont .hiw-rule { background: var(--black-40); }
html.v3.v3-cont .hero-counter .stat { border-color: var(--black-40); }
html.v3.v3-cont .hero-counter .stat.hit { border-color: var(--signal); }
/* phones: H1 40, H2 24, notes 20 and 20px of desk each side. Text and button sizes stay as they are, because the
   guide's 14px text is below our readability floor and its 18px button contradicts its own 24px floor. */
@media (max-width: 640px) {
  html.v3.v3-cont { --fs-display: 40px; --fs-heading: 24px; --fs-hand: 20px; --fs-hand-lg: 20px; --desk-gutter: 20px; }
}

/* ---------- Round 13: the live footer walk (2026-10-22) ----------
   Shaun: "on absolv ai website, we had poppy walking across the footer buttons then sitting down on the terms button".
   She is the live site's sprite (assets/v3/poppy/poppy-walk.webp, 181 by 132 frames with a transparent ground), placed
   and squashing the pills from the script, which sets her size, frame and position inline. --poppy-h is her frame
   height, as on live, so the phone layout's headroom above the pills (index-v3-notebook.html) follows it. */ /* as live .pf: her frame's clear margin may overhang a phone edge */
/* Above 640px the footer is one row, so the headroom for her is padding above it, as on live (.pf), which keeps her
   on the desk instead of rising into the torn paper; the phone layout already drops the pills by --poppy-h. */

/* ---------- Round 14 (2026-10-22): Shaun's decisions on the designer's animated build ----------
   docs/DESIGN-SYSTEM-V3.md, "Round 14". */

/* 1. The yellow highlighter sits on the lower part of the words at every width. At 900px and narrower the heading is
   24 to 32px on a line height of 1.0, so the band (.38em down to .1em under the text box) read as running through the
   middle of "old accountant", and the circle round "Absolv" on the line below rose into it like a strike-through. The
   band now starts lower and runs further under the words there, and the circle stays on its own line. The band's
   geometry is two numbers, which the round 9 highlighter pen read until round 19 took the pen out. */
html.v3.v3-cont { --hl-top: .38; --hl-bot: .1; }
@media (max-width: 900px) { html.v3.v3-cont { --hl-top: .55; --hl-bot: .28; } }
html.v3.v3-cont .hl::before { top: calc(var(--hl-top) * 1em); bottom: calc(var(--hl-bot) * -1em); }


/* 3. Section entrances (v3-entrances.js). Each piece carries data-ent (its kind) and --ent-d (its delay), and is hidden
   only while html.js-entrances is set and the piece has not yet had .ent-in, so the page is complete without the script.
   Only opacity, the individual translate, rotate and scale properties, clip-path and a mask move, so the pieces' own
   transforms (the tilts, the hover lifts) are untouched and nothing reflows. Each rule
   uses the full animation shorthand, because a longhand would inherit the page's own loops' infinite iteration count. */
html.v3.js-entrances [data-ent]:not(.ent-in):not([data-ent="write"]):not([data-ent="trace"]) { opacity: 0; }
html.v3.js-entrances [data-ent="write"]:not(.ent-in) { clip-path: inset(-40% 100% -40% -8%); }
html.v3.js-entrances [data-ent="tick"]:not(.ent-in)::before { clip-path: inset(0 100% 0 0); }
html.v3.js-entrances [data-ent="trace"] { clip-path: none !important; transition: none !important; }   /* the canvas draws it instead of the stretch's wipe */
html.v3.js-entrances [data-ent="trace"]:not(.ent-done) { visibility: hidden; }
/* a taped card drops from 50px above with a tilt and settles with a little overshoot (designer: back.out(1.3)) */
html.v3.js-entrances [data-ent="drop"].ent-in { animation: entDrop .8s cubic-bezier(.3, 1.35, .6, 1) var(--ent-d, 0s) 1 normal backwards running; }
@keyframes entDrop { 0% { opacity: 0; translate: 0 -50px; rotate: var(--ent-rot, 5deg); } 35% { opacity: 1; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; } }
/* its tape pops down from 1.25 */
html.v3.js-entrances [data-ent="tape"].ent-in { animation: entTape .3s ease-out var(--ent-d, 0s) 1 normal backwards running; }
@keyframes entTape { from { opacity: 0; scale: 1.25; translate: 12.5% 0; } to { opacity: 1; scale: 1; translate: 0 0; } }   /* the tape sits at translateX(-50%), so the scale is re-centred */
/* a drawing shades itself in: a faint ghost first, then the full drawing sweeps across it */
html.v3.js-entrances [data-ent="sketch"].ent-in {
  animation: entSketch 1.1s ease-in-out var(--ent-d, 0s) 1 normal backwards running;
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* the mask image lives in the keyframes only, so it is gone once the drawing has shaded in */
@keyframes entSketch {
  0% { opacity: 0; -webkit-mask-image: linear-gradient(110deg, #000 45%, rgba(0,0,0,.08) 55%); mask-image: linear-gradient(110deg, #000 45%, rgba(0,0,0,.08) 55%); -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  20% { opacity: 1; }
  100% { opacity: 1; -webkit-mask-image: linear-gradient(110deg, #000 45%, rgba(0,0,0,.08) 55%); mask-image: linear-gradient(110deg, #000 45%, rgba(0,0,0,.08) 55%); -webkit-mask-position: 0 0; mask-position: 0 0; }
}
/* a handwritten note writes itself in, left to right, at about 45ms a letter (--ent-dur) */
html.v3.js-entrances [data-ent="write"].ent-in { animation: entWrite var(--ent-dur, .9s) cubic-bezier(.45, .1, .55, .95) var(--ent-d, 0s) 1 normal backwards running; }
@keyframes entWrite { from { clip-path: inset(-40% 100% -40% -8%); } to { clip-path: inset(-40% -8% -40% -8%); } }
/* a card's rule draws out from the left, copy and small pieces fade up, text rises, buttons pop, rows slide in */
html.v3.js-entrances [data-ent="rule"].ent-in { transform-origin: 0 50%; animation: entRule .5s ease-in-out var(--ent-d, 0s) 1 normal backwards running; }
@keyframes entRule { from { opacity: 1; scale: 0 1; } to { opacity: 1; scale: 1 1; } }
html.v3.js-entrances [data-ent="fade"].ent-in { animation: entFade .5s ease-out var(--ent-d, 0s) 1 normal backwards running; }
@keyframes entFade { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
html.v3.js-entrances [data-ent="rise"].ent-in { animation: entRise .7s cubic-bezier(.22, 1, .36, 1) var(--ent-d, 0s) 1 normal backwards running; }
@keyframes entRise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
html.v3.js-entrances [data-ent="pop"].ent-in { animation: entPop .5s cubic-bezier(.34, 1.8, .64, 1) var(--ent-d, 0s) 1 normal backwards running; }
@keyframes entPop { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
html.v3.js-entrances [data-ent="slide"].ent-in, html.v3.js-entrances [data-ent="tick"].ent-in { animation: entSlide .45s ease-out var(--ent-d, 0s) 1 normal backwards running; }
html.v3.js-entrances [data-ent="slide-r"].ent-in { animation: entSlideR .45s ease-out var(--ent-d, 0s) 1 normal backwards running; }
@keyframes entSlide { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes entSlideR { from { opacity: 0; translate: 10px 0; } to { opacity: 1; translate: 0 0; } }
/* the pricing ticks strike one by one, each just after its line arrives */
html.v3.js-entrances [data-ent="tick"].ent-in::before { animation: entTick .22s ease-in calc(var(--ent-d, 0s) + .12s) backwards; }
@keyframes entTick { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* The VAT and dashboard drawings (and their overlays) already breathe and grow in a loop while their card is in view
   (.is-live). Their entrance is listed alongside that loop, so the loop carries on afterwards and keeps its pause. */
html.v3.js-entrances .tnote__art:has(.fx-vat) [data-ent="sketch"].ent-in, html.v3.js-entrances .tnote__fx.fx-vat.ent-in {
  animation: entSketch 1.1s ease-in-out var(--ent-d, 0s) 1 normal backwards running, fxBreathe 4s ease-in-out 0s infinite normal none paused; }
html.v3.js-entrances .tnote__fx.fx-vat.ent-in { animation-name: entFade, fxBreathe; animation-duration: .5s, 4s; }
html.v3.js-entrances .tnote__art:has(.fx-dash) [data-ent="sketch"].ent-in, html.v3.js-entrances .tnote__fx.fx-dash.ent-in {
  animation: entSketch 1.1s ease-in-out var(--ent-d, 0s) 1 normal backwards running, fxGrow 2.8s cubic-bezier(.4, 0, .2, 1) 0s infinite normal none paused; }
html.v3.js-entrances .tnote__fx.fx-dash.ent-in { animation-name: entFade, fxGrow; animation-duration: .5s, 2.8s; }
html.v3.js-entrances .tnote.is-live .tnote__art [data-ent].ent-in, html.v3.js-entrances .tnote.is-live .tnote__fx.ent-in { animation-play-state: running, running; }

/* ---------- Round 16 (2026-10-23): following the brand guidelines, part A ----------
   Shaun: everything follows the guide now, including the grid size and its fluid sizing, except the locked keeps
   (yellow #FFF06A, the pencil opening, the round 14 entrances and sway, Poppy's walk, the header tabs, the torn right
   edge and no phone hamburger). docs/DESIGN-SYSTEM-V3.md, "Round 16". Audit ids are in brackets. */

/* Fluid type (guide p22 and p41). The guide gives every size at 1920 and says multiply by 0.75 at 1440, which is a
   straight line through the origin, so each size is its 1920 value as a share of the viewport width, capped at the 1920
   value and floored at the guide's phone size (H1 40, H2 24, text 14, button 18, notes 20). Roles the phone table does
   not name take the text floor, and the card figure takes the H2 floor. These win over every band in v3-tokens.css. */
html.v3.v3-cont {
  --fs-display: clamp(40px, 5.8333vw, 112px);   /* Headline 1, Aleo Bold 112/1.0 */
  --fs-heading: clamp(24px, 2.8125vw, 54px);    /* Headline 2, Aleo Bold 54/1.0 */
  --fs-lead: clamp(14px, 1.3542vw, 26px);       /* Text, Schibsted Regular 26/1.2 */
  --fs-body: clamp(14px, 1.3542vw, 26px);
  --fs-number: clamp(24px, 2.5vw, 48px);        /* Card headline, Aleo Medium 48/0.9 */
  --fs-keyline: clamp(14px, 1.3542vw, 26px);    /* Card descriptor, Schibsted Bold 26/0.9 [F15 F16] */
  --fs-card: clamp(14px, 1.0417vw, 20px);       /* Card text, Schibsted Regular 20/1.2 */
  --fs-small: clamp(14px, 1.0417vw, 20px);      /* no style below card text exists, so small labels take it [F18] */
  --fs-descriptor: clamp(14px, 1.25vw, 24px);   /* Descriptor, Schibsted SemiBold 24/1.07 */
  --fs-nav: clamp(14px, 1.0417vw, 20px);        /* Navigation, Schibsted Medium 20/1.0 */
  --fs-button: clamp(18px, 1.25vw, 24px);       /* Button, Aleo Medium 24/1.07, 18 on phones [F07 F19] */
  --fs-hand: clamp(20px, 3.125vw, 60px);        /* Notes 60 */
  --fs-hand-lg: clamp(20px, 3.125vw, 60px);
  --fs-promise: clamp(20px, 1.5625vw, 30px);    /* a note under a list line, 30 [K09 H07] */
  /* text is black, and black 40% is only for thin rules, the "they say" head and the competitor key line [C04] */
  --ink-70: var(--ink);
}
html.v3.v3-cont .t-hero { letter-spacing: 0; }   /* [F04] v3.css tracked it -0.015em on phones */

/* The grid (guide p31): squares of 171 at 1920 and 128 at 1440 (the same 0.75 as the type), 58 on a 320 phone, in 1px
   lines of black 13%, aligned to the sheet's top-left corner. 8.9063vw meets the phone floor at 651px, so phones and
   small tablets keep 58. The square is rounded to a whole pixel so the lines stay crisp. [G01] */
/* Round 21 (the designer, 2026-10-28: "make the notebook grid about twice as small. It would help the proportions feel
   more realistic and keep the background more subtle"): every square is half its round 16 size, 86 at 1920 (85.5,
   rounded), 64 at 1440 and 29 on a phone, with the same line. */
html.v3.v3-cont { --grid-line: rgba(20, 20, 20, .13); --grid-cell: clamp(29px, 4.4531vw, 85.5px); }
@supports (width: round(1px, 1px)) { html.v3.v3-cont { --grid-cell: round(clamp(29px, 4.4531vw, 85.5px), 1px); } }

/* The sheet's soft shadow (guide p30: y 3, blur 10, black 12%). The paper is masked, which would cut a box shadow off,
   so the two paper pieces now live on .cont-paper, and a drop shadow filter on that wrapper follows the torn bottom and
   right edges. The wrapper sits under the content in #deckTrack's own stacking context, so the drawings' multiply still
   blends against the paper, and the page boxes still form no stacking context of their own (round 7). [G03] */
html.v3.v3-cont .cont-paper { position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: drop-shadow(0 3px 10px rgba(20, 20, 20, .12)); }

/* Buttons (guide p39 and p41): one label size everywhere, 440 wide in sections at 1920 (330 at 1440), and full width
   inside the page padding on phones. [K02 K03] */
html.v3.v3-cont .nb .btn { width: var(--btn-hero-w); max-width: 100%; }
@media (max-width: 640px) {
  html.v3.v3-cont .nb .btn { width: 100%; max-width: none; }
  html.v3.v3-cont .hero .cta-aim { display: block; }
}

/* FAQ (guide p22 and p30): questions in the Descriptor style, answers in Card text, and orange pencil arrows that point
   down while closed and up while open, in place of the plus icons. [F10 F11 K10] */
html.v3.v3-cont .faq__q { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-descriptor); line-height: 1.07; }
html.v3.v3-cont .faq__a p { font-size: var(--fs-card); line-height: var(--lh-card); }
html.v3.v3-cont .faq__icon { width: 2.2em; height: 2.2em; margin: -.6em -.3em -.6em 0;
  background: url("/assets/v3/marks/absolv-mark-arrow-arc-even.svg") center / contain no-repeat;
  transform: rotate(90deg); transition: transform .3s ease; }   /* the arc arrow turned so its head points down */
html.v3.v3-cont .faq__icon::before, html.v3.v3-cont .faq__icon::after { content: none; }
html.v3.v3-cont .faq__item.open .faq__icon { transform: rotate(-90deg); }   /* and up once the answer is open */

/* They say / we do (guide p40): two centred columns of 420 and 440 at 1920 (315 and 330 at 1440); the quotes in plain
   black Card text, the answers in Schibsted SemiBold at the Descriptor size, "they say" as plain Schibsted Bold at the
   key line size in black 40%, and each promise as a handwritten line at 30 under its answer. [K07 F13 F12 C07 K09 H07] */
html.v3.v3-cont { --cmp-q: clamp(240px, 21.875vw, 420px); --cmp-a: clamp(250px, 22.9167vw, 440px); }
@media (min-width: 641px) {
  html.v3.v3-cont .cmp { width: fit-content; max-width: 100%; }
  html.v3.v3-cont .cmp-head, html.v3.v3-cont .cmp-row { grid-template-columns: var(--cmp-q) var(--cmp-a); }
}
html.v3.v3-cont .cmp-they { font-size: var(--fs-card); line-height: var(--lh-card); color: var(--ink); }
html.v3.v3-cont .cmp-we { font-weight: 600; font-size: var(--fs-descriptor); line-height: 1.07; }
html.v3.v3-cont .cmp-head { align-items: end; }
html.v3.v3-cont .cmp-head__they { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-keyline); line-height: 1; color: var(--black-40); }
html.v3.v3-cont .cmp-promise { display: inline-block; margin-top: .3em; font-size: var(--fs-promise); white-space: normal; --r: -1.5deg; }

/* The testimonial (guide p20 and p22): Aleo is only for headlines, card figures, buttons and the wordmark, so the quote
   is Card text and the card fits it, keeping running text inside the guide's 440 to 520 at 1920. [F14] */
html.v3.v3-cont .proof .card--note { width: fit-content; }
html.v3.v3-cont .proof blockquote { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-card); line-height: var(--lh-card); max-width: 26em; margin: 0 auto; }
html.v3.v3-cont .proof cite { font-size: var(--fs-small); }

/* Price cards (guide p33): the other side is plain type only, so its label is no longer handwritten and its key line is
   Schibsted Bold at 26 in black 40%, while the Absolv key line keeps dark orange at 26. [F15 F16 C10] */
html.v3.v3-cont .price-card__label { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-descriptor); line-height: 1.07; color: var(--ink); }
html.v3.v3-cont .price-card--old .price-card__sub { color: var(--black-40); }
html.v3.v3-cont .price-card__sub { line-height: 1; }

/* Taped cards fit their copy (guide p32): the build writes each feature card's copy length as --len, so a longer line
   makes a wider card and neighbours differ in width as well as angle. [O06] */
html.v3.v3-cont .notes-row { max-width: clamp(1180px, 76.8vw, 1475px); }   /* the row grows with the card text above 1536, or the copy wraps to four lines at 1920 */
html.v3.v3-cont .notes-row .tnote { width: min(100%, calc(60% + var(--len, 40) * .64%)); }
@media (max-width: 640px) { html.v3.v3-cont .notes-row .tnote { width: auto; max-width: min(100%, calc(170px + var(--len, 40) * 1.6px)); } }

/* Notes are jotted by hand, off the centre line and tilted (guide p28 and p42): "ready when you are" sits to the left of
   the closing button, and its loop arrow runs from it towards the button. [H02] */
html.v3.v3-cont .closing > .note { display: block; width: max-content; max-width: 100%; margin: 0 auto 4px; position: relative; left: -16%; --r: -8deg; }
@media (max-width: 640px) { html.v3.v3-cont .closing > .note { left: -18%; } }
/* Round 21 (the designer, 2026-10-28: "I'd extend this arrow so it starts closer to the handwritten note"): the loop is
   drawn about two thirds larger and turned 45 degrees, so its tail now leaves from just under "when you" instead of from
   halfway down, it loops, and its head comes down onto Get started, which rises to meet it. Its even copy carries a
   lighter stroke (0.8, was 1.9 in build-v3-continuous.mjs) because a larger drawing is already a heavier line, which
   keeps it inside round 19's stroke band. */
html.v3.v3-cont .closing .mark--down { --r: 45deg; width: clamp(90px, 10vw, 180px); margin: -2.2em auto -.55em; left: -4%; }
@media (max-width: 640px) { html.v3.v3-cont .closing .mark--down { margin-top: -1.5em; } }   /* the phone note is smaller, so the tail keeps 4px or more from its letters */
html.v3.v3-cont .closing > .note { margin-bottom: 0; }

/* Marks never through text (guide p25). An underline on a line that has another line under it would run into that line,
   because headings sit at line height 1.0, so the underlined words become an inline block whose bottom padding holds the
   underline and pushes only that line down a little. [H03] */
html.v3.v3-cont .t-heading .ul--first { display: inline-block; padding-bottom: calc(var(--ul-h) + .02em); }
html.v3.v3-cont .t-heading .ul--first::after { bottom: 0; }   /* the mark keeps its own height, so the wave is not squashed */

/* How it works on phones (guide p41): arrows between the stacked steps, the first on the right and the next on the
   left, each pointing down to the step below. [H04] */
@media (max-width: 860px) {
  html.v3.v3-cont .hiw-grid { gap: 84px; }
  html.v3.v3-cont .hiw-arrow { display: block; top: calc(100% + 6px); margin-left: 0; width: 66px; }
  html.v3.v3-cont .hiw-arrow--ab { left: auto; right: 6%; --r: 100deg; }
  html.v3.v3-cont .hiw-arrow--bc { left: 6%; right: auto; width: 76px; --r: 35deg; }
}

/* The phone footer shows the plain wordmark (guide p12, the build swaps the source): no tagline squeezed in. [L10] */

/* The demo modals keep their small labels on one line only while they fit: at the 20px small size of 1920 the dashboard
   demo's "after" label would run out of its pane, so the labels may wrap. */
html.v3.v3-cont .split-label { white-space: normal; }

/* ---------- Round 16 (2026-10-23), part B: logo, marks, objects and drawings ----------
   docs/DESIGN-SYSTEM-V3.md, "Round 16", "Part B". Audit ids are in brackets. */

/* The Aleo logo files (guide p8 to p12). The footer lockup is the same header lockup on the orange desk, so it takes the
   header's size, and a phone gets the plain wordmark at the round 16 part A width. [L01 L05 L10] */
/* The Aleo header lockup is wider for its height than the old drawing (670 by 51 against 2263 by 244), so at its 26px
   floor it is 342px wide and pushed Get started off a 641 to 715px screen. Page 12 gives small sizes the plain wordmark,
   so the header shows it up to 820px, as phones already do. [L05] */

/* Desk objects (guide p34 and Figma frame 36): the pack's photographs with a soft drop shadow, because the files carry
   none. Round 19 took out every loose tape and clip (the designer: tape "doesn't seem to be holding anything in place"),
   and round 20 brought clips back only where they hold paper (the price card, the WhatsApp card, the testimonial and
   Shaun's photo, in the Round 19 and Round 20 blocks at the end), while the pencil and eraser stay on the desk below the
   torn edge. [O02 O03] */
html.v3.v3-cont .r16-obj { position: absolute; z-index: 4; height: auto; pointer-events: none; rotate: var(--r, 0deg);
  filter: drop-shadow(2px 5px 6px rgba(20, 20, 20, .24)); }

/* The natural wooden pencil lies across the torn edge with the cream eraser on the desk by its tip, as page 30 draws
   them (page 34 makes the pencil natural wood, where Figma frame 36 allows signal orange). Both keep clear of the
   footer row, so Poppy's walk and the copyright are never covered, and they go at tablet widths as the pencil did. [O04 O05] */
html.v3.v3-cont .cont-pencil { right: 1.5%; bottom: calc(var(--tear-h) * -.9); width: clamp(130px, 11.5vw, 220px); --r: 0deg; rotate: -6deg; z-index: 6; }
html.v3.v3-cont .cont-eraser { right: 1%; bottom: calc(var(--tear-h) * -1.45 + 22px); width: clamp(72px, 6vw, 116px); rotate: -9deg; z-index: 6; }
@media (max-width: 900px) { html.v3.v3-cont .cont-eraser { display: none; } }

/* Poppy's name (guide p37): a small handwritten "Poppy" with its capital, fading in beside her once she has sat down
   on Terms. On the orange desk handwriting is #FFFDFB (guide p11). The walk script places it. [I04] */   /* "Poppy the assistant" (round 21 follow-up) fits beside the logo */

/* A highlight whose phrase wraps onto two lines on a phone takes the zigzag stroke (guide p27), drawn by v3-desk.js as
   one mark over the wrapped phrase, so the phrase itself is free to wrap there. [H05] */
@media (max-width: 640px) {
  html.v3.v3-cont .hl.hl--wraps { white-space: normal; }
  html.v3.v3-cont .hl.hl--zz::before { content: none; }
  html.v3.v3-cont .hl-zz { position: absolute; z-index: -1; pointer-events: none; mix-blend-mode: multiply;
    clip-path: inset(0 0 0 0); transition: clip-path var(--dur-wipe) var(--ease); }
  html.v3.v3-cont .hl-zz__ink { position: absolute; inset: 0; background: url("/assets/v3/marks/absolv-highlight-zigzag-yellow.svg") center / 100% 100% no-repeat; }
  /* the zigzag is drawn for two lines (p27), so a phrase on three or more lines takes one single stroke under each line */
  html.v3.v3-cont .hl-zz--line .hl-zz__ink { background-image: url("/assets/v3/marks/absolv-highlight-single-a-yellow.svg"); }
  html.v3.v3-cont.js .nb:not(.is-in) .hl-zz { clip-path: inset(0 100% 0 0); }
}

/* The vignette's arrow was drawn 44px wide, which thins its stroke to about a third of the other marks, so it is drawn
   larger to keep the guide's weight (p25: 4.5 at 1440). [H06] */
@media (min-width: 641px) { html.v3.v3-cont .vig-arrow { width: clamp(56px, 5vw, 96px); } }
@media (max-width: 640px) { html.v3.v3-cont .vig-arrow { width: 40px; } }

/* ---------- Round 16 review fixes (2026-10-23) ----------
   docs/DESIGN-SYSTEM-V3.md, "Round 16", "Review fixes". */

/* Below 1440 an aside drops under its heading, right-aligned and tilted from its left end, so the fluid note size lifted
   the right end of "from admin chaos to clarity" into the "touch HMRC" wave from about 960 to 1439px. This note now
   tilts from its right end, so its highest point is its right end, and it starts below the wave, which hangs about
   0.6 of the heading size under the heading's box. [H03] */
@media (max-width: 1439px) {
  html.v3.v3-cont .features .section-head .aside { transform-origin: right center; margin-top: calc(var(--fs-heading) * .62 + 4px); }
}

/* "do the maths" sits under the pricing heading below 1440, where the card's tape below it touched the bottom of the
   note from 320 to 1439px, so the heading keeps room for the tape, and the note starts below the circle round "Absolv". */
@media (max-width: 1439px) {
  html.v3.v3-cont .pricing-page .section-head { padding-bottom: calc(var(--fs-hand) * .6); }
  html.v3.v3-cont .pricing-page .section-head .aside { margin-top: calc(var(--fs-heading) * .4 + 8px); }   /* clear of the circle above it too */
}

/* The loose circle round "Absolv" grazed the "s" of "vs" at every width, so the circled word stands a little further
   off. On a phone, where "vs Absolv" wraps under "old accountant", the circle's top ran along the line above, so there
   the circled word becomes an inline block whose top padding pushes only that line down. [H03] */
html.v3.v3-cont .circ { margin-left: .12em; }
@media (max-width: 640px) { html.v3.v3-cont .t-heading .circ { display: inline-block; padding-top: 1.2em; margin-left: .26em; } }

/* On a narrow phone the counter's first line ends at the figure (below 360px) or at "TXS" (360 to 419px), so the tick
   that flashes on a hit sat on the last digit of "3,284" or on the "S". It moves up and out past the line end. [H03] */
@media (max-width: 419px) { html.v3.v3-cont .hero-counter .hit-tick { right: -24px; top: -40px; } }

/* From 901 to 999px the desk pencil lay across Poppy's name once she had sat down, so the pencil and its eraser now
   go below 1060px, where the eraser already kept 32px clear of the copyright. Round 18 raised this from 1000px, because
   Infamous widened her name and the pencil touched it up to 1030px. [H03] */
@media (max-width: 1059px) { html.v3.v3-cont .cont-pencil, html.v3.v3-cont .cont-eraser { display: none; } }

/* ---------- Round 17: Infamous, the brand hand (2026-10-24) ----------
   docs/DESIGN-SYSTEM-V3.md, "Round 17". The face itself is declared in the generated cont/v3-tokens.css, and the
   sizes stay on the round 16 fluid scale (notes 60 at 1920, a note under a list line 30), because those are the
   guide's sizes for Infamous. Infamous has about twice the stand-in's x-height and runs about 15% wider, so the
   placements below give its larger letters room. */

/* Below 1440 an aside drops under its heading, right-aligned and tilted from its left end, so the right end of the
   taller letters rose into the yellow band under the heading's last line ("never will", "founder asks"). These two
   now tilt from their right end, as the features note has since round 16, and start below the band, whose depth
   under the words is --hl-bot. [H03] */
@media (max-width: 1439px) {
  html.v3.v3-cont .comparison .section-head .aside, html.v3.v3-cont .faq-page .section-head .aside {
    transform-origin: right center; margin-top: calc(var(--fs-heading) * var(--hl-bot) + 12px); }
}
/* From 1440 up "worth asking" stands left of its heading and "do the maths" right of the circle round "Absolv", and
   the wider hand brought each within a few pixels of the type and the circle, so both stand a little further off. */
@media (min-width: 1440px) {
  html.v3.v3-cont .faq-page .aside { right: calc(100% + .45em); }
  html.v3.v3-cont .pricing-page .aside { left: calc(100% + .3em); }
}
/* The wider hand broke "if we're late, we pay the penalty" onto two lines from 648 to 1152px and at 360 to 376px,
   so from 360px a promise stays on one line, which can run up to about 50px past its answer column but stays at
   least 28px inside the sheet. At 320 it still wraps, because there is no room. From 1800px "the human in the
   loop" broke into three lines under the photo, so there its box runs a little wider and it keeps two. */
@media (min-width: 360px) { html.v3.v3-cont .cmp-promise { white-space: nowrap; } }
@media (min-width: 1800px) { html.v3.v3-cont .who-wrap .aside { width: calc(100% + 72px); } }

/* ---------- Round 19: the designer's notes (2026-10-26) ----------
   docs/DESIGN-SYSTEM-V3.md, "Round 19". The clip on the old accountant's price card holds it at every width (round 20
   adds three more that hold paper, below). Round 19's first cut lay it diagonally off the corner, half on the desk, so it read as dropped there, and now it
   stands upright over the card's top edge a little in from the corner, with about two fifths of it above the paper. It
   lives inside the card (build-v3-continuous.mjs), so it moves with the card and never with v3-desk.js's scroll shift. [O02] */
html.v3.v3-cont .r18-clasp--price { width: clamp(42px, 3.4vw, 66px); right: .55em; top: calc(clamp(42px, 3.4vw, 66px) * -.55); z-index: 5; }
/* Just past the phone layout the card is at its narrowest and "Your accountant" runs under the clip's foot, so there the
   clip rides higher, still crossing the edge with its lower third on the card. */
@media (min-width: 641px) and (max-width: 719px) { html.v3.v3-cont .r18-clasp--price { top: calc(clamp(42px, 3.4vw, 66px) * -.82); } }

/* Round 20 (Shaun: "you've removed all the small objects like paperclips"): more clips, each holding paper the way the
   price card's does, so none lies loose. Two stand upright over a top edge, a little in from the corner, with about two
   fifths above the paper. A third lay level across the right edge of Shaun's photo until the round 21 follow-up (Shaun,
   2026-10-28: "remove the horizontal paperclip it looks silly"), and the corner tapes now hold the photo alone. [O02] */
html.v3.v3-cont .r20-clasp--feature { width: clamp(38px, 3vw, 58px); right: .9em; top: calc(clamp(38px, 3vw, 58px) * -.7); z-index: 5; }
/* The quote starts close to the testimonial's top edge, so its clip rides higher, about half on the paper, clear of the opening quote mark. */
html.v3.v3-cont .r20-clasp--proof { width: clamp(42px, 3.4vw, 66px); left: .9em; top: calc(clamp(42px, 3.4vw, 66px) * -.9); z-index: 5; }
/* Round 21 (the designer, 2026-10-28: the tape across the top of Shaun's photo ran over his forehead, "It would work better
   on the corners of the photo, like in the Figma mockup"): two short strips cross the top corners diagonally, each
   centred a little inside its corner so it runs from the paper across the white border onto the print, and the face is clear.
   Each strip keeps the tape's translateX(-50%), which the entrance's re-centred pop (entTape) relies on. */
/* The tape photograph is only about a tenth opaque, so over the white border it vanished and the strips read as tucked
   under the print (review). Each strip sits further in, over the picture itself, and is laid twice, with a soft edge. */
html.v3.v3-cont .who-photo .tnote__tape.r21-corner { width: 40%; height: clamp(22px, 1.9vw, 34px); top: 4%;
  background: url("/assets/v3/img/absolv-object-tape.webp") center / 100% 100% no-repeat, url("/assets/v3/img/absolv-object-tape.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 1px rgba(20, 20, 20, .14)); }
html.v3.v3-cont .who-photo .r21-corner--l { left: 14%; --tr: -40deg; }
html.v3.v3-cont .who-photo .r21-corner--r { left: 86%; --tr: 38deg; }

/* The circle round "Absolv" touched its own word at every width (round 16 open point), and on phones it cut through
   the "A" and rose into the band under "old accountant". Its open start stroke curls in at the top left, where the
   capital A is tallest, so the ring box is taller and wider than v3.css's shared one, and on phones the wrapped word
   gets more room above and a little more space after "vs", with the ring starting lower inside that room. A one-shot
   capture split into orange ring, neutral letter and yellow band pixels measures at least 4px of paper (at 2x) between
   the ring and its letters, and at least 7px between the ring and the band from 320 to 430. [H03] */
html.v3.v3-cont .t-heading .circ::after { left: -.5em; right: -.5em; top: -.6em; bottom: -.46em; }
@media (max-width: 640px) { html.v3.v3-cont .t-heading .circ::after { top: .44em; bottom: -.46em; left: -.66em; right: -.6em; } }

/* The torn cards: the designer found the text sitting too close to the torn bottom edge, which is drawn inside the
   note paper's 44px bottom border, while the text kept only 4px (2px on phones) above it, so each card runs taller with
   more room under its last line. */
html.v3.v3-cont .tnote, html.v3.v3-cont .card--note { padding-bottom: clamp(18px, 1.7vw, 32px); }

/* The desk pencil and eraser read too small against the notebook (the designer: "scale them up so they feel more
   believable"), so both are drawn larger. The longer pencil lies higher across the torn edge, so its point stays above
   Poppy's name where she sits, and both stay clear of her walk and the copyright. */
html.v3.v3-cont .cont-pencil { width: clamp(208px, 18.4vw, 352px); bottom: calc(var(--tear-h) * -.9 + 7vw); }
html.v3.v3-cont .cont-eraser { width: clamp(108px, 9vw, 174px); }

/* Even stroke weight (the designer: "all the hand-drawn pencil elements should have a consistent stroke weight"). The
   small marks take the stroked copies that build-v3-continuous.mjs writes (EVEN). The arrow by the opening's Get started
   is drawn larger as well, because the designer found it "too small and thin" to guide the eye, and the arrow into the
   testimonial, whose line ran about 3px against the others' 1.9 at 1440, is drawn smaller. */
html.v3.v3-cont .price-card__list--ticks li::before { background-image: url("/assets/v3/marks/absolv-mark-tick-bullet-even.svg"); }
/* The swirl hangs from the button's foot and grows upward, so drawn up to 150px its tail ran through "and for" in the
   lead from about 1500px. It now stops at 128px and drops by 0.6px for every pixel it grows past 110, which keeps its
   ink at least 10px clear of the lead's letters at every width while its head still lands on the button's shadow. */
html.v3.v3-cont .hero .swirl { width: clamp(110px, 8vw, 128px); bottom: calc(-12px - (clamp(110px, 8vw, 128px) - 110px) * .6); }
@media (min-width: 1101px) { html.v3.v3-cont .proof-lead .aside-arrow { width: clamp(98px, 8.5vw, 130px); } }   /* 1100 and under keep 80px */
/* The braces' line is as heavy as they are wide, so the opening's tall pair ran heavy (2.4px at 1440) and the small pair
   round "Who's behind Absolv" light (1.6px), and each is set to the width that brings it to the others' weight. On a
   phone the second how-it-works arrow, drawn 76px wide, ran about 1px, so both arrows there are drawn a little larger. */
html.v3.v3-cont .t-hero .braces::before, html.v3.v3-cont .t-hero .braces::after { width: .29em; }
html.v3.v3-cont #who .braces::before, html.v3.v3-cont #who .braces::after { width: .4em; }
/* Those braces stood 3.6px from the "W" and the "v" from 370 to 1100px and 4.6px at 1101, so they get a little more
   room inside: .66em up to 1100, the most that still keeps the heading on one line at 370, and .6em above. */
html.v3.v3-cont #who .braces { padding: 0 .6em; }
@media (max-width: 1100px) { html.v3.v3-cont #who .braces { padding: 0 .66em; } }
/* The tick that strikes beside the opening's counter was a fixed 44px, which made its line 2.5px on a phone, a tablet
   and at 1280 against the others' 1.6 to 1.75, so it now grows with the screen and reaches 44px only from about 1700. */
html.v3.v3-cont .hero-counter .hit-tick { width: clamp(34px, 2.6vw, 44px); }
/* Round 21 follow-up (Shaun, 2026-10-28: "can we make this the handwritten font"): the opening's running count is jotted
   in Infamous, its labels and figures alike, so the tracking set for the caps labels goes and the labels, whose capitals
   are small in this face, are set larger. Infamous has no tabular figures (a 0 is .54em wide and a 1 .24em), so as the
   numbers counted the strip widened and narrowed by up to 33px about its centre. Each figure now sits in a box as wide
   as its widest value, "0,000" at 2.12em and "£000,000" at 4.01em, set from its left so the spare room falls after it
   (right-aligned, the amount stood well off the dot at 1440). */
html.v3.v3-cont .hero-counter .stat__label, html.v3.v3-cont .hero-counter .stat__value { font-family: var(--font-hand); font-weight: 400; letter-spacing: 0; }
html.v3.v3-cont .hero-counter .stat__label { font-size: calc(var(--fs-small) * 1.35); }
html.v3.v3-cont .hero-counter .stat__value { display: inline-block; text-align: left; min-width: 2.15em; }
html.v3.v3-cont .hero-counter .stat__sep + .stat__value { min-width: 4.05em; }
@media (max-width: 860px) {
  html.v3.v3-cont .hiw-arrow--ab { width: 74px; }
  html.v3.v3-cont .hiw-arrow--bc { width: 94px; }
}

/* ---------- Round 22: the designer's notes (2026-10-29) ----------
   docs/DESIGN-SYSTEM-V3.md, "Round 22". Shaun approved the straight right edge and the shorter, symmetric spiral, which
   reverse his round 10 torn edge and his round 21 follow-up that started the spiral at the far left. */

/* The right edge is straight (the designer: the ripped edge "slightly breaks the feeling of a real notebook"). The torn
   column goes, so the sheet, the binding strip and every stretch's padding run to the sheet's own right edge, and only
   the bottom stays torn. The --tear-r rules above are left in place for the history and are overridden here. [D22-1] */
html.v3.v3-cont .cont-paper::after { display: none; }
html.v3.v3-cont .cont-paper::before { right: 0; }
html.v3.v3-cont .nb__page,
html.v3.v3-cont .deck-track > .nb > .nb__page { padding-right: var(--page-pad-x); }

/* The spiral ends the same distance in from both edges with finished ends (the designer: "the punch hole being cut off
   where the spiral starts ... use the finished spiral ending from the Figma mockup instead"). The coil tile runs from
   the middle of one punch hole to the middle of the next, so any end that did not fall on a tile edge sliced a hole.
   Now the binding is a whole number of tiles, rounded down to fit, with the first coil rising from a small ball tip on
   the paper (img/absolv-notebook-spiral-start.webp, 141 of the tile's 288 high units) and the far half of the last hole
   after the last tile (img/absolv-notebook-spiral-end.webp, 70 units), both cut by prototypes/make-v3-spiral-ends.py.
   The three pieces are centred together, so whatever the rounding leaves over falls equally on both sides. [D22-2] */

/* FAQ questions wrap onto two or three lines (the designer: the long ones "feel too long and are harder to read"). The
   question is a bare line of text in its button, so the button keeps its full width, and so its whole row stays
   clickable, while its right padding holds the text to 22em at most, with the toggle pinned to the right edge. [D22-3] */
html.v3.v3-cont .faq__q { position: relative; padding-right: max(2.6em, calc(100% - 22em)); }
/* The toggles are a hand-drawn cross that turns into an x once the answer is open (the designer: "Maybe we could try the
   hand-drawn crosses instead?"), in place of the arc arrows that repeated down the list. marks/absolv-mark-cross.svg is
   drawn by prototypes/make-v3-cross.mjs with a 7.5 unit pencil, which lands its line on the other marks' weight. [D22-4] */
html.v3.v3-cont .faq__icon { position: absolute; right: 0; top: 50%; width: 1.4em; height: 1.4em; margin: -.7em 0 0;
  background-image: url("/assets/v3/marks/absolv-mark-cross.svg"); transform: none; }
html.v3.v3-cont .faq__item.open .faq__icon { transform: rotate(45deg); }
/* With the text held to 22em the rows still ran 736px wide at 1440, leaving about 350px of empty line before each cross
   (Shaun: "this should be narrower ... to remove the wasted empty space"), so the list itself is now the question's
   measure plus room for the cross, centred under its heading, and no question breaks differently. */
html.v3.v3-cont .faq { max-width: min(100%, calc(var(--fs-descriptor) * 24.6)); }

/* The torn cards keep a flexible paper with separate torn edges (the designer: "the torn-paper texture looks a bit
   stretched ... use a separate SVG for the torn bottom edge, so the card can grow with the content without distorting
   the texture"). The note paper was a 9-slice whose torn edges were squeezed or spread to fit each card. Each card now
   holds a .r22-paper layer (build-v3-continuous.mjs) cut by a mask: plain paper between the edges, and the sheet's own
   torn tile at half its size along the bottom, turned over along the top, repeated and never scaled. The tile's offset
   follows each feature card's copy length, so no two edges match. The shadow is the note paper's (y 3, blur 10, black
   12%), on the layer so it follows the cut edges. The layer covers the card's old transparent border, so the paper
   reaches as far as the 9-slice's did. [D22-6] */
html.v3.v3-cont .tnote, html.v3.v3-cont .card--note { border-image: none; isolation: isolate; }
html.v3.v3-cont .r22-paper { position: absolute; top: -40px; bottom: -40px; left: -4px; right: -4px; z-index: -1; pointer-events: none;
  filter: drop-shadow(0 3px 10px rgba(20, 20, 20, .12)); }
html.v3.v3-cont .r22-paper::before {
  content: ""; position: absolute; inset: 0; background: var(--note-paper);
  --np-w: calc(var(--tear-w) / 2); --np-h: calc(var(--tear-h) / 2);
  -webkit-mask-image: url("/assets/v3/img/absolv-sheet-torn-edge-top.svg"), linear-gradient(#000, #000), url("/assets/v3/img/absolv-sheet-torn-edge.svg");
  mask-image: url("/assets/v3/img/absolv-sheet-torn-edge-top.svg"), linear-gradient(#000, #000), url("/assets/v3/img/absolv-sheet-torn-edge.svg");
  -webkit-mask-size: var(--np-w) var(--np-h), 100% calc(100% - 2 * var(--np-h) + 2px), var(--np-w) var(--np-h);
  mask-size: var(--np-w) var(--np-h), 100% calc(100% - 2 * var(--np-h) + 2px), var(--np-w) var(--np-h);
  -webkit-mask-position: calc(var(--len, 40) * -11px) 0, 0 calc(var(--np-h) - 1px), calc(var(--len, 40) * 7px) 100%;
  mask-position: calc(var(--len, 40) * -11px) 0, 0 calc(var(--np-h) - 1px), calc(var(--len, 40) * 7px) 100%;
  -webkit-mask-repeat: repeat-x, no-repeat, repeat-x; mask-repeat: repeat-x, no-repeat, repeat-x;
}

/* The grid is lighter still (the designer: "Just as a test, I'd try making the notebook grid another 10-20% more
   transparent"): black 11% where it was 13%, 15% more transparent. [D22-9] */
html.v3.v3-cont { --grid-line: rgba(20, 20, 20, .11); }

/* One scale for the desk objects (the designer: "the paper clips should be a bit larger relative to the tape ... keep
   the proportions of all the physical elements consistent"). The tape is the yardstick: a 54px band on every card at
   every width, which reads as tape about 1.9cm wide. A paper clip is a little longer than tape is wide, so each clip is
   now drawn 74px wide, which puts about 81px of wire on the page (1.5 times the tape) where it was 47 to 54px, and it
   holds that size at every width, as the tape does. Each clip keeps its round 19 and 20 placement, as a share of its
   own size. [D22-5] */
html.v3.v3-cont { --clip-w: 74px; }
html.v3.v3-cont .r18-clasp--price { width: var(--clip-w); top: calc(var(--clip-w) * -.55); }
@media (min-width: 641px) and (max-width: 719px) { html.v3.v3-cont .r18-clasp--price { top: calc(var(--clip-w) * -.82); } }
html.v3.v3-cont .r20-clasp--feature { width: var(--clip-w); top: calc(var(--clip-w) * -.7); }
html.v3.v3-cont .r20-clasp--proof { width: var(--clip-w); top: calc(var(--clip-w) * -.9); }
/* The pencil on the torn edge is a quarter larger again (the designer: "a little bigger here as well, just to keep the
   scale of the physical objects consistent with the notebook"), and so is the eraser by its tip. [D22-8] */
html.v3.v3-cont .cont-pencil { width: clamp(260px, 23vw, 440px); }
html.v3.v3-cont .cont-eraser { width: clamp(135px, 11.25vw, 218px); }
/* A bigger clip reaches further down the card, so on the price card its foot met the end of "Your accountant" and on a
   phone the testimonial's met the quote's first line. Both ride higher and the price card's sits nearer its corner,
   still gripping the top edge with about a third of the clip on the paper. */
html.v3.v3-cont .r18-clasp--price { right: .1em; top: calc(var(--clip-w) * -.8); }
@media (min-width: 641px) and (max-width: 719px) { html.v3.v3-cont .r18-clasp--price { top: calc(var(--clip-w) * -.86); } }
html.v3.v3-cont .r20-clasp--proof { top: calc(var(--clip-w) * -1); }
/* The arrow into the testimonial lands on the card's top edge, and from 641 to 1100 its head met the bigger clip, so
   that clip moves out toward the card's left corner. */
html.v3.v3-cont .r20-clasp--proof { left: -.3em; }
/* On phones the handwritten "do the maths" sits just above the price card's right corner, and from 320 to 375 the bigger
   clip met its letters (r20/clipcheck.cjs), so there the clip grips the card's left corner instead. */
@media (max-width: 640px) { html.v3.v3-cont .r18-clasp--price { right: auto; left: .1em; } }
/* Review: moved off the left corner the testimonial's clip hung above the paper with only its tip on it, so it grips
   the card's right corner instead, away from the arrow, which lands on the left, with about a third of it on the paper. */
html.v3.v3-cont .r20-clasp--proof { left: auto; right: .9em; top: calc(var(--clip-w) * -.75); }
/* Review: the testimonial and the two price cards carry no copy length, so they shared one tear, and the two price cards
   sit side by side. Each gets its own offset into the tile. */
html.v3.v3-cont .price-card--old { --len: 13; }
html.v3.v3-cont .price-card--absolv { --len: 71; }
html.v3.v3-cont .proof .card--note { --len: 29; }
/* With the torn column gone the closing stretch is a little wider, and at tablet widths the loop's head came within
   1.5px of Get started (r21/gap.cjs, 3px on round 21), so the button sits 3px lower there. */
@media (min-width: 641px) and (max-width: 900px) { html.v3.v3-cont .closing .mark--down { margin-bottom: calc(-.55em + 3px); } }
/* At .9em from the corner the testimonial's clip touched the quote's first line at every width from 320 to 1920 (0 to
   2.2px, r20/clipcheck.cjs), so it rides higher and sits nearer the corner, which leaves 8px or more to the letters
   with a quarter to a half of it on the paper. */
html.v3.v3-cont .r20-clasp--proof { right: .1em; top: calc(var(--clip-w) * -.9); }
/* Above 1440 the card's torn top falls away under that corner, and at 1600 only 11% of the clip held the paper, so there
   it rides lower, where the quote sits further below it. */
@media (min-width: 1441px) { html.v3.v3-cont .r20-clasp--proof { top: calc(var(--clip-w) * -.8); } }

/* ======== homepage additions for the rollout ======== */
/* The page's h1 is for screen readers and search only (the visible headline is the h2 .t-hero), but it is still a
   heading, so it is set in the display face like every other heading. */
html.v3 #hero > .nb__page > h1.sr-only { font-family: var(--font-display); font-weight: var(--w-heading); }