/* ==========================================================================
   Pro Bookkeepers - design system
   Plain CSS, no build step. Asset URLs carry a content hash (?v=...) written
   by tools/sync-site.py - run it after editing this file.

   POSITION
   A two-person firm whose one real differentiator is that a qualified
   accountant reviews every close. The design has to read precise, not
   corporate and not startup-playful.

   DELIBERATE CHOICES (and what they reject)
   - Schibsted Grotesk for display and text (2026-09, replaced Sofia Sans), tabular
     figures. Tabular money is functional here - it is the first thing an
     accountant's eye checks.
   - Surfaces are COOL neutral, so emerald is the only saturated colour on the page.
     Warm-cream backgrounds are both generic and they mute the accent.
   - Tracked ALL-CAPS eyebrows, adopted 2026-09 by owner direction (acgile
     benchmark): quiet caps micro-labels replaced the brass-bar sentence-case
     label. Deliberate reversal - do not revert without the owner.
   - Accent = exactly one emerald phrase per major H2, always the payoff phrase,
     rendered emerald-dark on light surfaces (emerald text on white is illegal).
   - Motion is spent in one place: the hero load sequence. Everything else
     responds to what the visitor does.

   Colour tokens are verified by tools/check-contrast.py. Run it after
   editing any value in :root.
   ========================================================================== */

:root{
  /* Brand colours and fonts live in shell.css, loaded before this file. */
  --r:6px;
  --r-lg:14px;
  --gap:clamp(1.25rem,4vw,2.25rem);
  --sect:clamp(3.5rem,6.5vw,5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px;}
body{
  margin:0;font-family:var(--sans);color:var(--slate);background:var(--white);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block;}
a{color:var(--ink-600);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;}
a:hover{color:var(--ink);text-decoration-color:var(--accent);}

/* Display type does the talking: heavy weight, tight tracking, tight leading.
   Tracking tightens as size grows — optical compensation, the thing that
   separates set type from default type. */
h1,h2{font-family:var(--display);color:var(--ink);font-weight:800;
  margin:0 0 .5em;letter-spacing:var(--tr-display);text-wrap:balance;}
h1{font-size:var(--fs-h1);line-height:1.02;}
h2{font-size:var(--fs-h2);line-height:1.02;}
h3,h4{font-family:var(--sans);color:var(--ink);font-weight:700;line-height:1.25;
  margin:0 0 .5em;letter-spacing:-.005em;}
h3{font-size:var(--fs-h3);}
/* Accent line in a headline — a whole clause, never a single word */
.accent{color:inherit;display:block;}
.accent--inline{display:inline;}
.section--ink .accent,.section--navy .accent,.cta-band .accent{color:inherit;}
p{margin:0 0 1.05em;text-wrap:pretty;}
ul,ol{margin:0 0 1.05em;padding-left:1.15em;}
li{margin-bottom:.38em;}
strong{color:var(--ink);font-weight:600;}
hr{border:0;border-top:1px solid var(--line);margin:2.25rem 0;}
:focus-visible{outline:2px solid var(--accent-dark);outline-offset:3px;border-radius:3px;}
::selection{background:var(--accent-soft);color:var(--ink);}

/* Every FIGURE on this site is tabular. Money in a proportional face is the
   fastest way to look amateur to the one audience that checks.
   Figures only — mono on words ("By the 10th", "ACCA") just reads as costume. */
.num,.ledger td:last-child,.plan__price{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gap);}
.section{padding-block:var(--sect);}
.section--soft{background:var(--surface);}
.section--ink,.section--navy{background:var(--ink);color:#AFC0D2;}
.section--ink h2,.section--ink h3,.section--navy h2,.section--navy h3{color:#fff;}
.center{text-align:center;}
.narrow{max-width:680px;margin-inline:auto;}
.measure{max-width:860px;margin-inline:auto;}
.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;}

/* ---------- Section label ----------
   Tracked caps micro-label (owner-directed, acgile benchmark 2026-09).
   Quiet weight and muted color so the H2 keeps the volume. */
.eyebrow{
  display:block;font-size:.9rem;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--accent-dark);margin-bottom:.7rem;
}
.section--ink .eyebrow,.section--navy .eyebrow,.cta-band .eyebrow{color:var(--accent);}
.lead{font-size:clamp(1.02rem,1.6vw,1.13rem);color:var(--slate);line-height:1.58;}
.section--ink .lead,.section--navy .lead{color:#A6B8CC;}
.head{max-width:620px;margin-bottom:2.25rem;}
.head.center{margin-inline:auto;}
.head p:last-child{margin-bottom:0;}
.rule{width:28px;height:2px;background:var(--accent);margin-bottom:1.35rem;}
.center .rule{margin-inline:auto;}

/* ==========================================================================
   MOTION — spent deliberately, in one place: the orchestrated hero entrance
   on load. Everything else responds to what the visitor does.
   ========================================================================== */
@keyframes riseIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes drawRule{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* Hero load sequence. Children animate in order, each 70ms behind the last,
   so the eye is led down the page once rather than surprised repeatedly. */
.hero__copy > *{animation:riseIn .7s var(--ease-out) both;}
.hero__copy > *:nth-child(1){animation-delay:.05s;}
.hero__copy > *:nth-child(2){animation-delay:.12s;}
.hero__copy > *:nth-child(3){animation-delay:.19s;}
.hero__copy > *:nth-child(4){animation-delay:.26s;}
.hero__copy > *:nth-child(5){animation-delay:.33s;}
.hero__card{animation:riseIn .8s var(--ease-out) .3s both;}

/* Scroll reveal — section heads only, not every card. Short distance,
   so it reads as settling rather than flying in. */
.reveal{opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);}
.reveal.is-in{opacity:1;transform:none;}
.reveal-stagger > *{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);}
.reveal-stagger.is-in > *{opacity:1;transform:none;}
.reveal-stagger.is-in > *:nth-child(1){transition-delay:0s;}
.reveal-stagger.is-in > *:nth-child(2){transition-delay:.06s;}
.reveal-stagger.is-in > *:nth-child(3){transition-delay:.12s;}
.reveal-stagger.is-in > *:nth-child(4){transition-delay:.18s;}
.reveal-stagger.is-in > *:nth-child(5){transition-delay:.24s;}
.reveal-stagger.is-in > *:nth-child(6){transition-delay:.3s;}
.reveal-stagger.is-in > *:nth-child(7){transition-delay:.36s;}
.reveal-stagger.is-in > *:nth-child(8){transition-delay:.42s;}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(3.5rem,8vw,5.75rem) clamp(3.5rem,8vw,5rem);}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;}
.hero h1{margin-bottom:.4em;}
.hero__sub{font-size:clamp(1.02rem,1.7vw,1.14rem);color:var(--slate);
  max-width:32em;margin-bottom:1.65rem;line-height:1.58;}

/* Ledger card — the one place the brand metaphor becomes literal */
.hero__card{background:#fff;border:1px solid var(--accent);border-radius:2px;
  padding:2rem 1.85rem;position:relative;}
.hero__card::before{content:"";position:absolute;inset:6px;border:1px solid var(--line);
  pointer-events:none;}
/* A <p>, not a heading: the card is a visual widget inside the hero, and an
   h3 here sat before the first h2, skipping a level in the page outline. */
.hero__card-title{font-family:var(--display);color:var(--ink);font-size:1.05rem;
  margin:0 0 1rem;display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;font-weight:700;letter-spacing:-.015em;}
.hero__card-title::after{content:"";flex:1;height:1px;background:var(--line);}
.ledger{width:100%;border-collapse:collapse;font-size:.95rem;}
.ledger th{text-align:left;font-weight:500;color:var(--muted);font-size:.74rem;
  padding:0 0 .5rem;border-bottom:1px solid var(--line);letter-spacing:0;
  text-transform:none;}
.ledger td{padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--ink);}
.ledger td:last-child,.ledger th:last-child{text-align:right;}
/* Accountant's double rule on the total */
.ledger tr:last-child td{border-bottom:3px double var(--ink);font-weight:600;}
.ledger .pos{color:var(--positive);}
.ledger .neg{color:var(--slate);}
.hero__card-foot{margin-top:.9rem;padding-top:.85rem;display:flex;
  justify-content:space-between;align-items:center;gap:1rem;font-size:.78rem;color:var(--muted);}
.pill-ok{background:transparent;border:1px solid var(--accent);color:var(--accent-dark);
  font-weight:500;padding:.3rem .65rem;border-radius:3px;font-size:.72rem;
  white-space:nowrap;transform:rotate(-2deg);}

/* Price chip - pill radius is a chip privilege; buttons keep --r */
.hero__chip{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.3rem;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:.45rem 1.1rem;font-size:.85rem;color:var(--ink);margin-bottom:1.5rem;}
.hero__chip .num{font-size:.9rem;}

/* Floating proof chips on the ledger card. The shadow is the ONE deliberate
   exception to "hairlines, not shadows": a floating chip needs it to float. */
.proof-chip{position:absolute;display:inline-flex;align-items:center;gap:.55rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 10px 26px rgba(13,27,42,.12);padding:.6rem .9rem;font-size:.8rem;
  font-weight:550;color:var(--ink);white-space:nowrap;z-index:2;}
.proof-chip--tr{top:-16px;right:-16px;}
.proof-chip--bl{bottom:-16px;left:-18px;}
.proof-chip__ic{width:18px;height:18px;border-radius:50%;background:var(--accent-soft);
  display:grid;place-items:center;flex-shrink:0;}
.proof-chip__ic svg{width:10px;height:10px;stroke:#007A52;fill:none;stroke-width:3.6;
  stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:620px){
  .proof-chip{position:static;box-shadow:none;margin-top:.6rem;margin-right:.5rem;}
}

@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr;}
  /* Headline first, proof second — the card is evidence for a claim the
     visitor has not read yet. */
  .hero__card{max-width:430px;}
}

/* ==========================================================================
   TOOLS STRIP - one static typographic line. No motion: the strip is
   information, not decoration.
   ========================================================================== */
.strip{padding-block:2.25rem;border-block:1px solid var(--line);
  background:var(--surface);overflow:hidden;}
.strip p{text-align:center;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:1.35rem;}
.strip__item{background:none;border:0;border-radius:0;padding:0;color:var(--muted);
  font-size:.9rem;white-space:nowrap;}
.strip__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.4rem 1.1rem;max-width:820px;margin-inline:auto;}
.strip__row .strip__item + .strip__item::before{content:"\00B7";color:var(--accent);
  margin-right:1.1rem;}

/* ---------- Grids & cards ---------- */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:940px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}}

/* Cards share one hairline mesh instead of floating as separate shadowed
   boxes — fewer edges, calmer page. */
.card{background:#fff;padding:1.7rem 1.55rem;display:flex;flex-direction:column;
  transition:background .2s var(--ease);}
.card:hover{background:var(--surface);}
.card h3{margin-bottom:.4rem;}
.card p{color:var(--slate);font-size:.92rem;margin-bottom:.85rem;line-height:1.58;}
.card p:last-child{margin-bottom:0;}
.card__icon{width:30px;height:30px;display:grid;place-items:center;margin-bottom:1rem;
  flex-shrink:0;}
.card__icon svg{width:21px;height:21px;stroke:var(--accent-dark);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}

/* Folio number - the same device as .step::before; mono on figures is legal */
.card__no{font-family:var(--mono);font-size:.78rem;font-weight:500;
  color:var(--accent-dark);padding-bottom:.45rem;border-bottom:2px solid var(--accent);
  align-self:flex-start;margin-bottom:1rem;}

/* Services flagship: first card spans the grid and reads like the lead entry */
.grid--services article:first-child{grid-column:1/-1;flex-direction:row;
  align-items:flex-start;gap:2.5rem;}
.grid--services article:first-child p{font-size:1rem;max-width:52ch;}
@media (max-width:940px){
  .grid--services article:first-child{flex-direction:column;gap:0;}
}

/* No arrow glyph appended. The emerald underline on hover is the affordance. */
.card__link{margin-top:auto;font-weight:500;font-size:.87rem;color:var(--ink);
  display:inline-block;text-decoration:none!important;position:relative;
  padding-bottom:2px;align-self:flex-start;}
.card__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease-out);}
.card:hover .card__link::after,.card__link:hover::after{transform:scaleX(1);}
.card ul{font-size:.9rem;padding-left:1.05em;margin-bottom:.85rem;}

.card--flat{border:1px solid var(--line);border-radius:var(--r-lg);}
.card--flat:hover{background:#fff;}
.section--soft .card--flat{background:#fff;}
.section--ink .card--flat,.section--navy .card--flat{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#AFC0D2;}

/* ---------- Steps ----------
   Numbered because the content genuinely is a sequence. */
.steps{counter-reset:s;display:grid;gap:2rem 1.75rem;grid-template-columns:repeat(4,1fr);}
@media (max-width:940px){.steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}
.step{position:relative;padding-top:2rem;}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:0;left:0;font-family:var(--mono);font-size:.78rem;
  font-weight:500;color:var(--accent-dark);padding-bottom:.45rem;
  border-bottom:2px solid var(--accent);min-width:18px;
}
.section--ink .step::before,.section--navy .step::before{color:var(--accent);}
.step h3{font-size:var(--fs-h3);margin-bottom:.3rem;}
.step p{font-size:.89rem;margin:0;line-height:1.58;}

/* ---------- Tick lists ---------- */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;}
.ticks li{position:relative;padding-left:1.55rem;font-size:.93rem;margin:0;line-height:1.55;}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23855B20' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.section--ink .ticks li::before,.section--navy .ticks li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C08A3E' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");}
.ticks--2{grid-template-columns:repeat(2,1fr);}
@media (max-width:620px){.ticks--2{grid-template-columns:1fr;}}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
@media (max-width:860px){.split{grid-template-columns:1fr;}}
.split--reverse .split__media{order:-1;}
@media (max-width:860px){.split--reverse .split__media{order:0;}}

/* ---------- Founder bookplate ---------- */
.founder-card{border:1px solid var(--accent);border-radius:2px;
  padding:2.2rem 2rem;background:#fff;position:relative;}
.founder-card::before{content:"";position:absolute;inset:6px;
  border:1px solid var(--line);pointer-events:none;}
.founder-card__mark{width:56px;height:56px;border-radius:7px;margin-bottom:1.1rem;}
.founder-card__name{font-size:1.5rem;font-weight:640;margin:0 0 .15rem;
  display:inline-block;border-bottom:3px double var(--ink);padding-bottom:.35rem;}
.founder-card__role{color:var(--muted);font-size:.88rem;margin:.5rem 0 .9rem;}
.founder-card__creds{font-size:.82rem;color:var(--muted);margin-bottom:1.1rem;}
.founder-card__line{font-family:var(--display);font-style:italic;font-size:1.02rem;
  color:var(--ink);margin:0;}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;align-items:stretch;}
@media (max-width:940px){.price-grid{grid-template-columns:1fr;max-width:450px;margin-inline:auto;}}
.plan{background:#fff;padding:2rem 1.7rem;display:flex;flex-direction:column;position:relative;}
.plan--featured{background:var(--surface);}
.plan__badge{display:inline-block;background:var(--accent);color:var(--ink);
  font-size:.72rem;font-weight:500;padding:.2rem .55rem;border-radius:4px;
  margin-bottom:.85rem;align-self:flex-start;letter-spacing:0;text-transform:none;}
.plan__name{font-size:1.02rem;font-weight:600;color:var(--ink);margin-bottom:.25rem;
  letter-spacing:-.02em;}
.plan__for{font-size:.84rem;color:var(--muted);margin-bottom:1.4rem;line-height:1.5;}
.plan__from{font-size:.78rem;color:var(--muted);margin-bottom:.25rem;letter-spacing:0;
  text-transform:none;font-weight:450;}
.plan__price{font-size:2.15rem;font-weight:600;color:var(--ink);letter-spacing:-.045em;
  line-height:1;}
.plan__price small{font-size:.8rem;font-weight:400;color:var(--muted);
  letter-spacing:0;font-family:var(--sans);}
.plan hr{border:none;border-top:3px double var(--ink);margin:1.1rem 0;}
.plan .ticks{margin-bottom:1.65rem;}
.plan .ticks li{font-size:.88rem;}
.plan .btn{margin-top:auto;}
.price-note{font-size:.85rem;color:var(--muted);text-align:center;margin-top:1.6rem;}

/* ---------- Testimonials ---------- */
.quote{background:#fff;padding:1.7rem 1.55rem;display:flex;flex-direction:column;}
.quote__stars{color:var(--accent);letter-spacing:.14em;font-size:.84rem;margin-bottom:.75rem;}
.quote p{font-size:.94rem;color:var(--ink);margin-bottom:1.2rem;line-height:1.58;}
.quote blockquote{margin:0;}
.quote__who{display:flex;align-items:center;gap:.65rem;margin-top:auto;}
.quote__av{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:.78rem;flex-shrink:0;}
.quote__who b{display:block;color:var(--ink);font-size:.88rem;font-weight:600;}
.quote__who span{font-size:.78rem;color:var(--muted);}

/* ---------- FAQ ---------- */
.faq{max-width:740px;margin-inline:auto;border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;padding:1.1rem 2.5rem 1.1rem 0;font-weight:500;color:var(--ink);
  font-size:1rem;position:relative;list-style:none;letter-spacing:-.012em;
  transition:color .18s var(--ease);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:10px;height:10px;
  margin-top:-6px;border-right:1.5px solid var(--accent-dark);
  border-bottom:1.5px solid var(--accent-dark);
  transform:rotate(45deg);transition:transform .28s var(--ease-out),margin-top .28s var(--ease-out);}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px;}
.faq summary:hover{color:var(--accent-dark);}
.faq__body{padding:0 2rem 1.25rem 0;font-size:.95rem;line-height:1.62;
  animation:fadeIn .3s var(--ease);}
.faq__body p:last-child{margin-bottom:0;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);color:#AFC0D2;border-radius:var(--r-lg);
  padding:clamp(2.5rem,6vw,3.75rem) clamp(1.5rem,5vw,3rem);
  text-align:center;position:relative;overflow:hidden;}
/* Ledger ruling drawn in CSS — no extra request for a background image */
.cta-band::before{content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 37px,
    rgba(0,168,114,.12) 37px 38px);}
.cta-band > *{position:relative;z-index:1;}
.cta-band h2{color:#fff;}
.cta-band p{max-width:46ch;margin-inline:auto;color:#A6B8CC;}
.cta-band .rule,.cta-band .eyebrow{margin-inline:auto;}

/* ---------- Blog ---------- */
.post-card{background:#fff;display:flex;flex-direction:column;
  border-top:2px solid var(--accent);transition:background .2s var(--ease);}
.post-card:hover{background:var(--surface);}
.post-card__body{padding:1.55rem;display:flex;flex-direction:column;flex:1;}
.post-meta{font-size:.78rem;color:var(--muted);letter-spacing:0;text-transform:none;
  font-weight:450;margin-bottom:.5rem;}
.post-card h3{font-size:var(--fs-h3);margin-bottom:.4rem;}
.post-card h3 a{color:var(--ink);text-decoration:none!important;}
.post-card h3 a:hover{color:var(--accent-dark);}
.post-card p{font-size:.89rem;margin-bottom:.9rem;line-height:1.58;}

/* ---------- Article ---------- */
.article{max-width:680px;margin-inline:auto;}
.article h2{margin-top:2.4rem;font-size:var(--fs-h2-article);}
.article h3{margin-top:1.75rem;font-size:var(--fs-h3);}
.article p,.article li{font-size:1.01rem;line-height:1.72;}
.article ul,.article ol{margin-bottom:1.3em;}
.article blockquote{margin:1.9rem 0;padding:0 0 0 1.35rem;border-left:2px solid var(--accent);
  font-size:1.06rem;color:var(--ink);font-weight:450;line-height:1.55;letter-spacing:-.014em;}
.article blockquote p:last-child{margin-bottom:0;}
.article__hero{border-bottom:1px solid var(--line);
  padding-block:clamp(2.5rem,6vw,3.25rem) 2rem;background:var(--surface);}
.article table{width:100%;border-collapse:collapse;margin:1.7rem 0;font-size:.91rem;}
.article th,.article td{border-bottom:1px solid var(--line);padding:.68rem .75rem;
  text-align:left;vertical-align:top;}
.article th{background:var(--surface);font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line-strong);}
.article td:first-child,.article th:first-child{padding-left:0;}
.callout{background:var(--surface);border-left:2px solid var(--accent);
  padding:1.15rem 1.35rem;margin:1.9rem 0;border-radius:0 var(--r) var(--r) 0;font-size:.96rem;}
.callout p:last-child{margin-bottom:0;}
.callout strong{color:var(--accent-dark);}
.breadcrumb{font-size:.82rem;color:var(--muted);margin-bottom:.9rem;}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--accent-dark);}

/* ---------- Forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,4vw,2.15rem);}
.section--soft .form-card{background:#fff;}
.field{margin-bottom:1rem;}
.field label{display:block;font-weight:500;font-size:.86rem;color:var(--ink);margin-bottom:.3rem;}
.field label .req{color:var(--negative);}
.field input,.field select,.field textarea{
  width:100%;padding:.7rem .8rem;border:1px solid var(--line-strong);border-radius:var(--r);
  font-family:inherit;font-size:.94rem;color:var(--ink);background:#fff;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.field textarea{min-height:108px;resize:vertical;}
.field__hint{font-size:.79rem;color:var(--muted);margin-top:.28rem;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}
.form-note{font-size:.8rem;color:var(--muted);text-align:center;margin-top:.85rem;margin-bottom:0;}

.hero__copy > *:nth-child(6){animation-delay:.4s;}
.hero__copy > *:nth-child(7){animation-delay:.47s;}

/* ---------- Contact lines ---------- */
.contact-line{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1.25rem;}
.contact-line__ic{width:32px;height:32px;display:grid;place-items:center;flex-shrink:0;
  border:1px solid var(--line-strong);border-radius:var(--r);}
.contact-line__ic svg{width:16px;height:16px;stroke:var(--accent-dark);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.contact-line b{display:block;color:var(--ink);font-size:.9rem;font-weight:600;}
.contact-line a{font-weight:450;}
.contact-line span{font-size:.82rem;color:var(--muted);display:block;}


/* ---------- Reduced motion ----------
   Everything above degrades to no movement. Content must still be visible:
   a reveal that never fires would otherwise hide the page entirely. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal,.reveal-stagger > *,.hero__copy > *,.hero__card{opacity:1!important;transform:none!important;}
}

/* ==========================================================================
   DENSITY LAYER
   Added after benchmarking acgile.com, ebs.ae and athgadlang.com. What makes
   those read as established firms is not their palette - it is proof volume:
   platform ratings, hard metrics, case studies with real outcomes, deep
   service menus. Thin pages look generated; dense pages look earned.
   ========================================================================== */

/* ---------- Trust bar: platform ratings ---------- */
.trustbar{border-block:1px solid var(--line);background:#fff;padding-block:1.35rem;}
.trustbar__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1rem 2.5rem;}
.trustbadge{display:flex;align-items:center;gap:.6rem;}
.trustbadge__score{font-family:var(--display);font-weight:650;font-size:1.3rem;
  color:var(--ink);letter-spacing:-.015em;line-height:1;}
.trustbadge__meta{font-size:.78rem;color:var(--muted);line-height:1.3;}
.trustbadge__meta b{display:block;color:var(--ink);font-weight:600;font-size:.84rem;}
.trustbadge__stars{color:var(--accent);font-size:.82rem;letter-spacing:.1em;}

/* ---------- Metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
@media (max-width:820px){.metrics{grid-template-columns:repeat(2,1fr);}}
.metric{background:#fff;padding:2.4rem 1.4rem 2rem;text-align:center;}
.section--ink .metrics,.section--ink .metric{background:transparent;border-color:rgba(255,255,255,.12);}
.section--ink .metrics{background:rgba(255,255,255,.1);}
.metric__k{font-size:.72rem;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent-dark);margin-bottom:.8rem;}
.section--ink .metric__k{color:var(--accent);}
.metric__n{font-family:var(--display);font-weight:640;font-size:clamp(2.6rem,5.5vw,3.9rem);
  color:var(--ink);letter-spacing:-.02em;line-height:1;display:inline-block;
  border-bottom:3px double var(--accent);padding-bottom:.4rem;margin-bottom:.55rem;}
.section--ink .metric__n{color:#fff;}
.metric__l{font-size:.74rem;color:var(--muted);line-height:1.5;
  letter-spacing:.14em;text-transform:uppercase;display:block;}
.section--ink .metric__l{color:#A6B8CC;}

/* ---------- Problem list: "signs you need us" ---------- */
.signs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
@media (max-width:720px){.signs{grid-template-columns:1fr;}}
.sign{background:#fff;padding:1.4rem 1.5rem;display:flex;gap:.9rem;align-items:flex-start;}
.sign__mark{flex-shrink:0;width:auto;height:auto;border-radius:0;background:none;
  color:var(--accent-dark);font-family:var(--mono);font-weight:500;font-size:.78rem;
  border-bottom:2px solid var(--accent);padding-bottom:.25rem;margin-top:.15rem;}
.sign p{margin:0;font-size:.94rem;line-height:1.55;}
.sign b{display:block;color:var(--ink);font-weight:600;margin-bottom:.15rem;font-size:.97rem;}

/* ---------- Hidden-money ledger ----------
   The value story set as an actual ledger: folio, entry, figure, total rule.
   Figures are labeled illustrative arithmetic in the copy - never client claims. */
.leaks{max-width:820px;margin-inline:auto;border-top:1px solid var(--line);}
.leak{display:grid;grid-template-columns:3.2rem 1fr auto;gap:1.4rem;
  align-items:baseline;padding:1.6rem 0;border-bottom:1px solid var(--line);}
.leak__n{font-family:var(--mono);font-size:.8rem;color:var(--accent-dark);}
.leak h3{font-family:var(--display);font-style:italic;font-size:1.35rem;
  font-weight:560;margin:0 0 .3rem;}
.leak__amt{font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--negative);font-size:1rem;white-space:nowrap;}
.leak:last-child{border-bottom:3px double var(--ink);}
@media (max-width:620px){
  .leak{grid-template-columns:2.2rem 1fr;}
  .leak__amt{grid-column:2;justify-self:start;}
}

/* ---------- Case studies ---------- */
.case{background:#fff;padding:1.75rem 1.6rem;display:flex;flex-direction:column;}
.case__tag{font-size:.78rem;color:var(--muted);margin-bottom:.7rem;}
.case__result{font-family:var(--mono);font-weight:500;font-size:1.6rem;color:var(--positive);
  letter-spacing:-.03em;line-height:1;margin-bottom:.5rem;font-variant-numeric:tabular-nums;}
.case h3{font-size:var(--fs-h3);margin-bottom:.45rem;}
.case p{font-size:.9rem;line-height:1.58;margin-bottom:.85rem;}

/* ---------- Industries ---------- */
.inds{display:flex;flex-wrap:wrap;gap:.5rem;}
.ind{border:1px solid var(--line-strong);border-radius:var(--r);padding:.55rem 1rem;
  font-size:.88rem;color:var(--slate);background:#fff;
  transition:border-color .2s var(--ease),color .2s var(--ease);}
.ind:hover{border-color:var(--accent);color:var(--ink);}

/* ==========================================================================
   PRICING TOGGLE - two ways to buy
   Fixed monthly (priced on transaction volume) vs hourly/dedicated (priced on
   seniority). Radio inputs, not buttons: the browser handles exclusivity,
   arrow keys work for free, and it still functions with JS disabled.
   ========================================================================== */
.ptoggle-wrap{position:relative;}
.ptoggle{display:flex;justify-content:center;margin-bottom:2.5rem;}
.ptoggle__inner{display:inline-flex;background:var(--surface);border:1px solid var(--line);
  border-radius:calc(var(--r) + 3px);padding:4px;gap:2px;}
.ptoggle label{
  display:block;padding:.6rem 1.35rem;border-radius:var(--r);font-size:.9rem;
  font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.ptoggle label:hover{color:var(--ink);}
/* The radios live OUTSIDE .ptoggle (they are siblings of .ppanels so the
   panels can react to :checked), so the active-label rule has to reach back
   down through .ptoggle rather than use an adjacent-sibling selector. */
#payFixed:checked ~ .ptoggle label[for="payFixed"],
#payHourly:checked ~ .ptoggle label[for="payHourly"]{
  background:var(--ink);color:#fff;font-weight:550;
}
#payFixed:focus-visible ~ .ptoggle label[for="payFixed"],
#payHourly:focus-visible ~ .ptoggle label[for="payHourly"]{
  outline:2px solid var(--accent-dark);outline-offset:2px;
}

/* Panels swap purely on :checked state - no JS required for the core behaviour */
.ppanel{display:none;}
#payFixed:checked ~ .ppanels #panelFixed,
#payHourly:checked ~ .ppanels #panelHourly{display:block;animation:fadeIn .28s var(--ease);}

/* Role-based tier card */
.plan__rate{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;}
.plan__was{font-family:var(--mono);font-size:.95rem;color:var(--muted);
  text-decoration:line-through;text-decoration-thickness:1px;}
.plan__alt{font-size:.84rem;color:var(--muted);margin-top:.4rem;}
.plan__alt b{font-family:var(--mono);color:var(--ink);font-weight:500;}

/* ---------- Security ---------- */
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;}
@media (max-width:820px){.sec-grid{grid-template-columns:1fr;}}
.sec__ic{width:26px;height:26px;margin-bottom:.8rem;}
.sec__ic svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}
.sec h3{font-size:var(--fs-h3);margin-bottom:.35rem;}
.sec p{font-size:.89rem;line-height:1.58;margin:0;}


/* ==========================================================================
   HOMEPAGE (2026-09 redesign)
   One memorable element - the month calendar with the 10th closed - and
   quiet, left-aligned sections around it. Each section takes the shape of
   its content (a calendar, a document, a list of rows, a sequence) instead
   of repeating one card grid.
   ========================================================================== */
@media (min-width:861px){.hero__grid{grid-template-columns:1fr 1fr;align-items:center;}}
.hero__grid > *{min-width:0;}
.hero h1{max-width:13ch;}
.hero__sub{max-width:34em;}

/* ---------- Calendar ---------- */
.cal{margin:0;background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:1.4rem 1.4rem 1.2rem;animation:riseIn .8s var(--ease-out) .25s both;}
.cal__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  flex-wrap:wrap;margin-bottom:1rem;}
.cal__month{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--ink);
  letter-spacing:-.03em;}
.cal__due{font-size:.85rem;color:var(--muted);}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal__wd{font-size:.72rem;color:var(--muted);padding:0 0 .35rem .15rem;font-weight:600;}
.cal__d{aspect-ratio:1/0.82;border-radius:4px;background:var(--surface);padding:.35rem .4rem;
  display:flex;flex-direction:column;justify-content:space-between;min-width:0;}
.cal__d b{font-weight:600;font-size:.82rem;color:var(--slate);font-variant-numeric:tabular-nums;}
.cal__d i{font-style:normal;font-size:.64rem;line-height:1.15;color:var(--accent-dark);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal__d--pad{background:transparent;}
.cal__d--work{background:var(--accent-soft);}
.cal__d--work b{color:var(--ink);}
.cal__d--close{background:var(--ink);box-shadow:0 0 0 2px var(--accent);}
.cal__d--close b{color:#fff;font-weight:800;}
.cal__d--close i{color:var(--accent);}
.cal__foot{margin:1rem 0 0;font-size:.84rem;color:var(--slate);line-height:1.5;}
@media (max-width:860px){.cal{max-width:520px;}}
@media (max-width:520px){.cal__d i{display:none;}.cal__d--close i{display:block;}}

/* ---------- Tools line ---------- */
.tools{border-block:1px solid var(--line);padding-block:1.5rem;}
.tools p{margin:0;max-width:70ch;font-size:.95rem;color:var(--slate);}

/* ---------- Two-column: heading left, document right ---------- */
.duo{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.duo__side p{color:var(--slate);max-width:32ch;}
@media (max-width:860px){.duo{grid-template-columns:1fr;}}
.doc{margin:0;border-top:2px solid var(--ink);}
.doc__row{display:grid;grid-template-columns:12rem 1fr;gap:1.5rem;padding:1.05rem 0;
  border-bottom:1px solid var(--line);}
.doc__row:last-child{border-bottom:3px double var(--ink);}
.doc dt{font-weight:700;color:var(--ink);}
.doc dd{margin:0;color:var(--slate);}
@media (max-width:560px){.doc__row{grid-template-columns:1fr;gap:.2rem;}}

/* ---------- Section title without a label ---------- */
.sec-title{margin-bottom:1.75rem;}

/* ---------- Service rows ---------- */
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(2rem,5vw,4rem);border-top:1px solid var(--line-strong);}
.svc li{margin:0;border-bottom:1px solid var(--line-strong);}
.svc a{display:block;padding:1.1rem 0;text-decoration:none;color:var(--slate);}
.svc b{display:block;color:var(--ink);font-size:1.06rem;margin-bottom:.2rem;}
.svc a:hover b{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px;}
@media (max-width:720px){.svc{grid-template-columns:1fr;}}

/* ---------- Steps: a real sequence, so numbered ---------- */
.step::before{font-family:var(--sans);font-weight:700;font-size:.9rem;}

/* ---------- Problems we solve ----------
   Problem in ink, fix beneath it. The red tick-box marks an open item, the
   way an unreconciled line is flagged in a ledger. */
.fixes-wrap{padding-top:clamp(2.5rem,5vw,3.5rem);}
.fixes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);border-radius:var(--r-lg);overflow:hidden;}
.fixes li{margin:0;background:#fff;padding:1.3rem 1.35rem 1.4rem;}
.fixes b{display:block;color:var(--ink);font-size:1.02rem;line-height:1.35;margin-bottom:.45rem;
  padding-left:1.6rem;position:relative;}
.fixes b::before{content:"";position:absolute;left:0;top:.22em;width:14px;height:14px;
  border:2px solid var(--negative);border-radius:3px;}
.fixes span{display:block;color:var(--slate);font-size:.93rem;line-height:1.55;padding-left:1.6rem;}
.fixes__cta{margin:1.75rem 0 0;}
@media (max-width:900px){.fixes{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.fixes{grid-template-columns:1fr;}}

.cal__month{letter-spacing:0;font-size:1.6rem;}
.svc b{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:0;}
.doc dt{font-family:var(--display);font-size:1.2rem;font-weight:700;}

/* ==========================================================================
   INNER PAGES, HOMEPAGE LOOK (2026-09)
   Restyles the shared components so every page reads as the same site as
   the homepage: ledger-paper openers, double-rule section labels, separate
   rounded cards, numbered-circle timelines, card FAQs, ink featured plan.
   Markup is unchanged; this block wins by coming last.
   ========================================================================== */
.wrap{padding-inline:var(--gut);}  /* same gutter as the homepage */
h3{font-size:var(--fs-h3);}
a{color:var(--accent-dark);text-decoration-color:currentColor;}
a:hover{color:var(--ink);}

/* Opening section: ledger paper with a red margin rule, as on the homepage hero */
main > .section:first-child,.article__hero{
  background:
    linear-gradient(90deg,transparent calc(var(--gut) - 10px),rgba(168,58,36,.3) calc(var(--gut) - 10px),rgba(168,58,36,.3) calc(var(--gut) - 9px),transparent calc(var(--gut) - 9px)),
    repeating-linear-gradient(transparent 0 31px,rgba(0,168,114,.09) 31px 32px);
  padding-top:clamp(3.5rem,7vw,5.5rem);}
main > .section:first-child h1,.article__hero h1{font-size:var(--fs-h1);line-height:1.02;}

/* Section label: the accountant's double rule before a sentence-case label */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.875rem;font-weight:600;
  color:var(--slate);margin-bottom:1.1rem;}
.eyebrow::before{content:"";width:22px;height:6px;border-block:2px solid var(--accent);flex:none;}
.section--ink .eyebrow,.section--navy .eyebrow,.cta-band .eyebrow{color:#9DAAB9;}
.accent--inline,.accent{color:var(--accent-dark);}
.section--ink .accent,.section--navy .accent,.cta-band .accent{color:var(--accent);}

/* Cards: separate, rounded, lift on hover (replaces the hairline mesh) */
.grid,.signs,.metrics{gap:14px;background:none;border:0;border-radius:0;overflow:visible;}
.card,.sign,.metric,.case{border:1px solid var(--line);border-radius:14px;background:#fff;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;}
.card:hover{background:#fff;transform:translateY(-3px);
  box-shadow:0 20px 40px -26px rgba(13,27,42,.4);border-color:var(--line-strong);}
.card--flat:hover{transform:none;box-shadow:none;}
.section--ink .card,.section--navy .card{background:var(--ink-800);border-color:#22364D;color:#AFC0D2;}
.section--ink .card h3,.section--navy .card h3{color:#fff;}
.section--ink .card p,.section--navy .card p{color:#AFC0D2;}
.card__icon{width:48px;height:48px;border-radius:12px;background:var(--accent-soft);margin-bottom:1.1rem;}
.card__icon svg{width:24px;height:24px;stroke:var(--accent-dark);stroke-width:1.75;}
.card:hover .card__icon{background:var(--ink);}
.card:hover .card__icon svg{stroke:var(--accent);}
.card__link{color:var(--accent-dark);font-weight:600;}

/* Warning signs: red references, like the homepage findings sheet */
.sign__mark{color:var(--negative);border-bottom:0;padding-bottom:0;font-weight:600;font-size:.875rem;}

/* Metrics: no tracked caps (BRAND.md 5) */
.metric__k,.metric__l{text-transform:none;letter-spacing:0;}
.metric__k{font-size:.875rem;}
.metric__l{font-size:.875rem;}
.metric__n{font-weight:800;}

/* Tick marks in emerald (were still the retired brass) */
.ticks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007A52' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");}
.section--ink .ticks li::before,.section--navy .ticks li::before,.plan--featured .ticks li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A872' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");}

/* Steps: numbered circles on a dashed line, as on the homepage */
.steps{position:relative;}
.step{padding-top:0;}
.step::before{position:static;display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;border:2px solid var(--line);background:#fff;content:"0" counter(s);
  font:600 .875rem/1 var(--sans);color:var(--ink);margin-bottom:1.1rem;padding:0;}
.step:last-child::before{background:var(--accent);border-color:var(--accent);color:var(--ink);}
.step h3{font-size:var(--fs-h3);}
.step p{font-size:.95rem;}
.section--soft .step::before{background:var(--surface);}
.section--ink .step::before,.section--navy .step::before{background:var(--ink);border-color:#22364D;color:#fff;}
.section--ink .step:last-child::before,.section--navy .step:last-child::before{background:var(--accent);border-color:var(--accent);color:var(--ink);}
@media (min-width:941px){
  /* line from the first circle's centre to the last one's (4 columns, 1.75rem gaps) */
  .steps::before{content:"";position:absolute;top:22px;left:23px;right:calc((100% - 5.25rem) / 4 - 23px);
    border-top:2px dashed var(--line);z-index:0;}
  .step{position:relative;z-index:1;}
  .section--ink .steps::before,.section--navy .steps::before{border-top-color:#22364D;}
}

/* FAQ: one card per question, + / - marker */
.faq{border-top:0;max-width:820px;}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;}
.faq summary{padding:1.15rem 3rem 1.15rem 1.35rem;font-weight:600;font-size:1.0625rem;}
.faq summary::after{content:"+";border:0;width:auto;height:auto;margin-top:0;transform:none;
  top:50%;right:1.2rem;translate:0 -50%;font:500 1.25rem/1 var(--sans);color:var(--accent-dark);}
.faq details[open] summary::after{content:"\2212";transform:none;margin-top:0;}
.faq__body{padding:0 1.35rem 1.25rem;}

/* Pricing: separate cards, the featured plan is the ink one */
.price-grid{gap:14px;background:none;border:0;border-radius:0;overflow:visible;}
.plan{border:1px solid var(--line);border-radius:14px;padding:2rem;}
.plan__price{font-family:var(--display);font-weight:800;font-size:3rem;letter-spacing:-.01em;}
.plan--featured{background:var(--ink);border-color:var(--ink);color:#AFC0D2;
  box-shadow:0 30px 60px -30px rgba(0,168,114,.6);}
.plan--featured .plan__name,.plan--featured .plan__price,.plan--featured .plan__alt b{color:#fff;}
.plan--featured .plan__for,.plan--featured .plan__from,.plan--featured .plan__price small,.plan--featured .plan__alt{color:#9DAAB9;}
.plan--featured hr{border-top-color:rgba(255,255,255,.5);}
.plan--featured .ticks li{color:#D6DDE6;}

/* CTA band: the homepage's closing panel */
.cta-band{border-radius:22px;}

/* Callouts and fields match the homepage radii */
.callout{border-left-width:4px;border-radius:0 12px 12px 0;}
.field input,.field select,.field textarea{border-radius:10px;}
.form-card{border-radius:18px;}
/* Founder card: the homepage "who signs off" card, not the old square bookplate */
.founder-card{border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -40px rgba(13,27,42,.4);}
.founder-card::before{display:none;}
.founder-card__mark{border-radius:50%;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--accent);}
/* Grid columns may shrink below their content's min width (prevents a wide
   child, e.g. a long word at display size, pushing the page sideways) */
.split > *,.shot-band__grid > *{min-width:0;}