/* ============================================================
   WPR Multi-Purpose Theme — responsive homepage styles
   Fluid type (clamp) + CSS-grid reflow at 1024 / 760 / 520.
   Colour and font presets are defined in inc/palette.php and
   injected as a :root block at enqueue time — see below.
   ============================================================ */

/* ---------- design tokens ----------
   The colour palettes and font pairings that used to live here (a :root
   mirror, six body[data-wpr-palette] rules and four body[data-wpr-font]
   rules) are now generated from inc/palette.php and appended to this
   stylesheet as a :root block at enqueue time. That one definition also
   feeds the block editor canvas and theme.json, so the editor can no longer
   drift from the live site.

   To change scheme: set the `wpr_palette` / `wpr_font` options, or edit the
   defaults in wpr_active_palette() / wpr_active_font(). Do not re-declare
   --ink/--accent/--serif etc. in this file.
   ---------------------------------------------------------------- */

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--ink); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* overflow-x:clip, not hidden. `hidden` forces overflow-y to compute as auto,
   which turns .wpr into a scroll container that never scrolls: that silently
   broke the sticky header (it scrolled away instead of sticking) and pinned
   any view() timeline, because the timeline resolved against this box rather
   than the viewport. `clip` clips just as well without creating a scrollport.
   The `hidden` line stays first as the fallback for anything that does not
   understand clip — those browsers keep today's behaviour rather than gaining
   a horizontal scrollbar. Same reasoning as .wpr-section:has(> .wpr-spark). */
.wpr{ background:var(--ink); color:var(--text); overflow-x:hidden; overflow-x:clip; --ts:.9; font-weight:var(--bw,400); }
.wpr-container{ width:100%; max-width:1240px; margin:0 auto; padding-left:clamp(20px,5vw,56px); padding-right:clamp(20px,5vw,56px); }
.wpr-section{ padding-top:clamp(64px,9vw,112px); padding-bottom:clamp(64px,9vw,112px); }
.wpr-section--alt{ background:var(--ink2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/* Hero = the first section of any page. Halve its top padding globally —
   covers every template plus dynamic content (posts wrap theirs in <article>). */
#content > .wpr-section:first-child,
#content > article > .wpr-section:first-child{ padding-top:clamp(32px,4.5vw,56px); }

/* ---------- type ---------- */
.wpr-h1{ font-family:var(--serif); font-weight:var(--hw,400); margin:0; color:var(--cream);
  font-size:calc(var(--ts,1) * var(--hs,1) * clamp(40px,6.6vw,96px)); line-height:calc(var(--hlh,1) * 1.08); letter-spacing:calc(-0.02em + var(--hls,0em)); padding-bottom:0.12em; }
.wpr-h2{ font-family:var(--serif); font-weight:var(--hw,400); margin:0; color:var(--cream);
  font-size:calc(var(--ts,1) * var(--hs,1) * clamp(30px,4.4vw,56px)); line-height:calc(var(--hlh,1) * 1.12); letter-spacing:calc(-0.02em + var(--hls,0em)); padding-bottom:0.18em; }
.wpr-h3{ font-family:var(--serif); font-weight:var(--hw,400); margin:0; color:var(--cream);
  font-size:calc(var(--ts,1) * var(--hs,1) * clamp(22px,2.6vw,30px)); line-height:calc(var(--hlh,1) * 1.2); letter-spacing:calc(-0.01em + var(--hls,0em)); }
.wpr-h3--sans{ font-family:var(--sans); font-weight:var(--hw,600); font-size:calc(var(--ts,1) * var(--hs,1) * clamp(18px,2vw,20px)); letter-spacing:calc(-0.01em + var(--hls,0em)); }
.wpr-display{ font-family:var(--serif); font-weight:var(--hw,400); margin:0; color:var(--cream);
  font-size:calc(var(--ts,1) * var(--hs,1) * clamp(40px,6vw,78px)); line-height:calc(var(--hlh,1) * 1.06); letter-spacing:calc(-0.02em + var(--hls,0em)); padding-bottom:0.14em; }
.wpr-em{ font-style:italic; color:inherit; }
.wpr-lead{ font-family:var(--sans); margin:0; color:var(--text);
  font-size:calc(var(--ts,1) * clamp(17px,1.9vw,20px)); line-height:calc(var(--blh,1) * 1.6); letter-spacing:var(--bls,0em); }
.wpr-p{ font-family:var(--sans); margin:0; color:var(--text); font-size:calc(var(--ts,1) * clamp(15.5px,1.7vw,16.5px)); line-height:calc(var(--blh,1) * 1.6); letter-spacing:var(--bls,0em); }
.wpr-eyebrow{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-family:var(--sans); font-size:calc(var(--ts,1) * 13px); font-weight:600; letter-spacing:0.04em; color:var(--cream); }
/* Links in body copy.
   .wpr-prose covers ordinary prose pages, but a link inside a card, a lead, a
   feature row or a category panel is outside it and fell through to the browser
   default — blue and underlined, on any page that used one. Matches the
   .wpr-prose treatment so a link reads the same wherever it appears. */
.wpr-p a, .wpr-lead a, .wpr-feat a, .wpr-cat a{
  color:var(--accent-dk); text-decoration:underline; text-underline-offset:2px; }
.wpr-p a:hover, .wpr-lead a:hover, .wpr-feat a:hover, .wpr-cat a:hover{ color:var(--cream); }

.wpr-eyebrow::before{ content:""; width:7px; height:7px; border-radius:999px; background:var(--accent); }

/* ---------- buttons ---------- */
.wpr-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap;
  font-family:var(--sans); font-weight:600; font-size:calc(var(--ts,1) * 16px); text-decoration:none; cursor:pointer;
  padding:16px 28px; border-radius:999px; border:1px solid transparent; transition:transform .15s, box-shadow .2s; }
.wpr-btn svg{ width:18px; height:18px; }
/* Label goes through --on-accent2 rather than a hardcoded #fff so the
   accent-fill label colour is settable in one place per palette. */
.wpr-btn--primary{ background:var(--accent2); color:var(--on-accent2); box-shadow:0 8px 18px -12px var(--accent2-dk); }
/* Colour only here; the lift lives in the @media (hover:hover) block so it
   cannot latch on a touch screen. */
.wpr-btn--primary:hover{ background:var(--accent2-dk); }
.wpr-btn--ghost{ background:transparent; color:var(--cream); border-color:var(--line); }
.wpr-btn--block{ width:100%; }

/* ---------- a11y utility (core's copy is dequeued by Autoptimize) ---------- */
.screen-reader-text{
  border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute; white-space:nowrap; width:1px; word-wrap:normal;
}
.screen-reader-text:focus{
  background:var(--ink2); clip-path:none; color:var(--cream); display:block;
  font-size:1rem; height:auto; left:5px; line-height:normal; padding:15px 23px;
  text-decoration:none; top:5px; width:auto; z-index:100000;
}

/* ---------- nav ---------- */
.wpr-nav{ position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--ink) 92%, transparent); backdrop-filter:blur(10px); }
.wpr-nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-top:16px; padding-bottom:16px; }
.wpr-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.wpr-brand__logo{ height:34px; width:auto; display:block; }
.wpr-brand__mark{ width:34px; height:34px; border-radius:10px; background:var(--accent); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.wpr-brand__name{ font-family:var(--sans); font-size:19px; font-weight:700; color:var(--cream); letter-spacing:-0.01em; white-space:nowrap; }
.wpr-nav__links{ display:flex; gap:30px; }
.wpr-nav__links a{ color:var(--dim); text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap; }
.wpr-nav__links a:hover{ color:var(--cream); }
.wpr-nav__actions{ display:flex; align-items:center; gap:12px; }
.wpr-nav__signin{ color:var(--cream); text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap; }
.wpr-nav__toggle{ display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line);
  background:transparent; color:var(--cream); align-items:center; justify-content:center; cursor:pointer; }
.wpr-nav__toggle svg{ width:22px; height:22px; }
.wpr-nav__drawer{ display:none; }

/* ---------- hero ---------- */
.wpr-hero__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; }
.wpr-badge{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; border-radius:999px;
  background:var(--ink2); border:1px solid var(--line); margin-bottom:28px; max-width:100%; }
.wpr-badge__tag{ display:inline-flex; padding:3px 9px; border-radius:999px; background:var(--cream); color:#fff;
  font-size:12px; font-weight:700; flex-shrink:0; }
.wpr-badge__txt{ font-size:14px; color:var(--dim); }
.wpr-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.wpr-hero__social{ display:flex; align-items:center; gap:14px; margin-top:30px; color:var(--dim); font-size:14px; flex-wrap:wrap; }
.wpr-avatars{ display:flex; }
.wpr-avatars .wpr-avatar{ margin-left:-10px; border:2px solid var(--ink); }
.wpr-avatars .wpr-avatar:first-child{ margin-left:0; }

.wpr-avatar{ border-radius:999px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:700; color:#fff; }

/* hero thread card */
.wpr-thread{ background:var(--ink2); border:1px solid var(--line); border-radius:22px; overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(15,40,36,.30); }
.wpr-thread__head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px; border-bottom:1px solid var(--line); }
.wpr-thread__id{ display:flex; align-items:center; gap:12px; min-width:0; }
.wpr-thread__chip{ width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:var(--ink3); color:var(--cream);
  display:inline-flex; align-items:center; justify-content:center; }
.wpr-thread__title{ font-size:15px; font-weight:600; color:var(--cream); }
.wpr-thread__sub{ font-size:12.5px; color:var(--dimmer); }
.wpr-status{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; white-space:nowrap;
  background:color-mix(in srgb, #1AA64F 16%, transparent); color:#157A3A; font-size:12.5px; font-weight:700; flex-shrink:0; }
.wpr-thread__body{ padding:22px 20px; display:flex; flex-direction:column; gap:16px; }
.wpr-msg{ display:flex; gap:12px; align-items:flex-start; }
.wpr-msg--me{ flex-direction:row-reverse; }
.wpr-bubble{ border-radius:4px 16px 16px 16px; padding:13px 16px; font-size:15px; line-height:1.5; color:var(--text);
  background:var(--ink3); max-width:340px; }
.wpr-msg--me .wpr-bubble{ border-radius:16px 4px 16px 16px; background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid var(--line); color:var(--cream); }
.wpr-msg__time{ font-size:12px; color:var(--dimmer); margin-top:6px; }
.wpr-timeline{ margin:4px 20px 20px; padding:16px 18px; border-radius:14px; background:var(--ink); border:1px solid var(--line);
  display:flex; align-items:flex-start; justify-content:space-between; }
.wpr-tl{ text-align:center; flex-shrink:0; }
.wpr-tl__dot{ width:26px; height:26px; border-radius:999px; margin:0 auto 7px; background:var(--accent); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; }
.wpr-tl__l{ font-size:13px; font-weight:600; color:var(--cream); }
.wpr-tl__t{ font-size:11.5px; color:var(--dimmer); margin-top:2px; }
.wpr-tl__bar{ flex:1; height:2px; background:var(--accent); opacity:.5; margin:13px 8px 0; }
.wpr-thread__foot{ padding:15px 20px; background:color-mix(in srgb, var(--accent) 7%, transparent);
  border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); }
.wpr-thread__foot svg{ width:16px; height:16px; color:var(--accent2); flex-shrink:0; }

/* ---------- trust strip ---------- */
.wpr-trust{ padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ink2); }
.wpr-trust__row{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
.wpr-trust__label{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dimmer); width:150px; flex-shrink:0; line-height:1.4; }
.wpr-trust__logos{ flex:1; display:flex; justify-content:space-between; gap:22px 28px; flex-wrap:wrap; }
.wpr-trust__logos span{ font-family:var(--sans); font-size:clamp(15px,1.8vw,19px); font-weight:600; color:var(--text); opacity:.5; letter-spacing:-0.01em; transition:opacity .15s; }
.wpr-trust__logos span:hover{ opacity:.85; }

/* ---------- section headers ---------- */
.wpr-head{ margin-bottom:calc(var(--hsp,1) * clamp(40px,5vw,56px)); }
.wpr-head--center{ text-align:center; max-width:720px; margin-left:auto; margin-right:auto; }
.wpr-head--center .wpr-eyebrow{ margin-bottom:18px; }
.wpr-head--split{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.wpr-head--center .wpr-lead{ margin-top:20px; }
.wpr-head__note{ max-width:320px; }

/* ---------- grids ---------- */
.wpr-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
/* No align-items here on purpose. Grid items stretch by default, which is what
   makes every card in a row end on the same line; `align-items:start` used to
   sit on this one grid (and only this one — grid-2 and grid-4 never had it),
   so 3-up card rows came out ragged while the 4-up service row did not.
   Cards that need their last line pinned to the foot do it themselves, the way
   .wpr-step does with flex + .wpr-step__body{flex:1}. */
.wpr-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.wpr-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }

/* ---------- cards ---------- */
.wpr-card{ padding:clamp(26px,3vw,36px); border-radius:20px; background:var(--ink2); border:1px solid var(--line); }
.wpr-icon{ width:54px; height:54px; border-radius:15px; background:var(--ink3);
  color:var(--cream); display:inline-flex; align-items:center; justify-content:center; margin-bottom:22px; }
.wpr-icon svg{ width:26px; height:26px; }

/* service card */
.wpr-service{ padding:28px; border-radius:18px; background:var(--ink); border:1px solid var(--line);
  display:flex; flex-direction:column; min-height:228px; }
.wpr-service__icon{ width:50px; height:50px; border-radius:14px; margin-bottom:20px;
  background:var(--ink3); color:var(--cream);
  display:inline-flex; align-items:center; justify-content:center; transition:all .2s; }
/* icon-well hover now comes from the shared hover system near the end of this file */
.wpr-service__icon svg{ width:24px; height:24px; }
.wpr-service h3{ margin:0 0 10px; }
.wpr-card h3{ margin-bottom:12px; }

/* step */
.wpr-step{ padding:clamp(26px,3vw,36px); border-radius:20px; background:var(--ink2); border:1px solid var(--line);
  display:flex; flex-direction:column; min-height:280px; }
.wpr-step__num{ width:52px; height:52px; border-radius:999px; margin-bottom:24px; font-family:var(--serif); font-size:22px;
  display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--cream); }
.wpr-step:first-child .wpr-step__num{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.wpr-step h3{ margin:0 0 12px; }
.wpr-step__body{ flex:1; }
.wpr-step__meta{ margin-top:24px; padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px;
  font-size:13.5px; color:var(--dim); font-weight:600; }
.wpr-step__meta svg{ width:16px; height:16px; }

/* comparison */
.wpr-compare{ border-radius:26px; background:var(--ink2); border:1px solid var(--line);
  padding:clamp(40px,6vw,72px) clamp(24px,4vw,56px); position:relative; overflow:hidden; }
.wpr-stat{ padding:clamp(26px,3vw,36px); border-radius:20px; border:1px solid var(--line); }
.wpr-stat--feature{ background:var(--ink); border-color:var(--accent); }
.wpr-stat__label{ font-size:14px; font-weight:600; margin-bottom:22px; }
.wpr-stat__n{ font-family:var(--serif); font-weight:400; font-size:calc(var(--ts,1) * clamp(52px,7vw,76px)); line-height:.95; letter-spacing:-0.02em; color:var(--cream); }
.wpr-stat__n--strike{ text-decoration:line-through; text-decoration-color:var(--dimmer); text-decoration-thickness:2px; }
.wpr-stat__t{ margin-top:10px; font-size:16px; font-style:italic; font-family:var(--serif); }
.wpr-stat__s{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); font-size:14.5px; line-height:1.6; color:var(--dim); }

/* ---------- pricing ----------
   Plans line up row by row via subgrid. Each .wpr-plan spans the same six
   parent row tracks and pins its parts to a fixed one, so the price, the
   button and the checklist start at the same y in every column no matter how
   the tagline wraps or whether a plan has a setup line at all. Assigning
   grid-row explicitly (rather than relying on source order) is what makes the
   OPTIONAL parts work: a plan with no setup line just leaves track 4 empty
   instead of pulling everything below it up by a row.

   Two things this replaced: .wpr-plan__tagline{min-height} guessing at two
   lines of copy, and align-items:start on the parent, which let the columns
   end at different heights.

   Fallback: where subgrid is unsupported the whole grid-template-rows
   declaration is dropped, each card becomes a plain 6-row grid sized to its
   own content, and the layout degrades to what it was before — same order,
   just unaligned. Nothing overlaps.

   The row-gap split matters: the parent's 20px must apply BETWEEN stacked
   plans but not between a plan's six internal tracks, so the subgrid sets its
   own row-gap:0 and spacing inside a card stays on the children's margins.

   Scoped to `.wpr-plans >` deliberately. A subgrid adopts its PARENT's row
   tracks, so a .wpr-plan that is not in a plans grid would start sharing rows
   with whatever else lives there. The `included` section is exactly that case
   — a plan beside a checklist box in an auto-fit grid — and an unscoped rule
   stretched the plan's name track to the height of the box next to it, which
   opened a ~380px hole between the plan name and its tagline. Outside
   .wpr-plans a plan is plain block flow, which is all a lone plan needs. */
.wpr-plans{ display:grid; grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(6,auto); column-gap:20px; row-gap:20px; }
.wpr-plans > .wpr-plan{ display:grid; grid-template-rows:subgrid; grid-row:span 6; row-gap:0; }
.wpr-plans > .wpr-plan > .wpr-plan__name { grid-row:1; }
.wpr-plans > .wpr-plan > .wpr-plan__tagline{ grid-row:2; }
.wpr-plans > .wpr-plan > .wpr-plan__price{ grid-row:3; }
.wpr-plans > .wpr-plan > .wpr-plan__setup{ grid-row:4; }
.wpr-plans > .wpr-plan > .wpr-btn        { grid-row:5; }
.wpr-plans > .wpr-plan > .wpr-checklist  { grid-row:6; }
.wpr-plans--4{ grid-template-columns:repeat(4,1fr); column-gap:16px; }
.wpr-plans--4 .wpr-plan{ padding:clamp(20px,1.9vw,28px); }
.wpr-plans--4 .wpr-plan__name{ font-size:23px; }
.wpr-plans--4 .wpr-plan__tagline{ font-size:13.5px; margin-bottom:18px; }
.wpr-plans--4 .wpr-plan__price b{ font-size:calc(var(--ts,1) * clamp(34px,3.4vw,42px)); }
.wpr-plans--4 .wpr-plan__price span{ font-size:14px; }
.wpr-plans--4 .wpr-checklist{ gap:11px; padding-top:18px; }
.wpr-plans--4 .wpr-check{ font-size:15px; }
.wpr-plan__price .wpr-cents{ font-size:0.5em; align-self:flex-start; margin-top:0.35em; color:var(--dim); letter-spacing:0; }
.wpr-plan__setup{ font-size:13px; color:var(--dim); margin:-10px 0 18px; }
@media (max-width:1040px){ .wpr-plans--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .wpr-plans--4{ grid-template-columns:1fr; } }
.wpr-plan{ padding:clamp(28px,3vw,38px); border-radius:22px; border:1px solid var(--line); position:relative; }
.wpr-plan--feature{ background:var(--ink2); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.wpr-plan__badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent2); color:var(--on-accent2);
  font-size:12.5px; font-weight:700; letter-spacing:0.04em; padding:6px 16px; border-radius:999px; white-space:nowrap; }
.wpr-plan__name{ font-family:var(--serif); font-size:30px; color:var(--cream); margin-bottom:8px; }
.wpr-plan__tagline{ font-size:15px; color:var(--dim); margin-bottom:24px; line-height:1.5; }
.wpr-plan__price{ display:flex; align-items:baseline; gap:6px; margin-bottom:24px; }
.wpr-plan__price b{ font-family:var(--serif); font-weight:400; font-size:calc(var(--ts,1) * clamp(48px,6vw,60px)); color:var(--cream); line-height:1; letter-spacing:-0.02em; }
.wpr-plan__price span{ font-size:16px; color:var(--dim); }
.wpr-checklist{ display:flex; flex-direction:column; gap:14px; margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
.wpr-check{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.45; color:var(--text); }
.wpr-check svg{ width:18px; height:18px; color:var(--cream); flex-shrink:0; margin-top:1px; }

/* testimonials */
.wpr-quote{ padding:clamp(26px,3vw,34px); border-radius:20px; background:var(--ink); border:1px solid var(--line);
  display:flex; flex-direction:column; }
.wpr-quote__stars{ color:var(--cream); font-size:13px; letter-spacing:3.5px; margin-bottom:18px; }
/* The quote is body copy, not a heading: it follows the body font and body
   weight from Typography. --serif here made testimonials track the heading
   font instead, so changing the body font left them behind. */
.wpr-quote__q{ margin:0; font-family:var(--sans); font-weight:var(--bw,400); font-size:calc(var(--ts,1) * clamp(18px,2.2vw,21px)); line-height:calc(var(--blh,1) * 1.45); letter-spacing:var(--bls,0em); color:var(--cream); flex:1; }
.wpr-quote__by{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); display:flex; align-items:center; gap:13px; }
.wpr-quote__name{ font-family:var(--sans); font-size:15.5px; font-weight:600; color:var(--cream); }
.wpr-quote__role{ font-size:13.5px; color:var(--dim); margin-top:2px; }

/* faq */
.wpr-faq__grid{ display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(36px,5vw,72px); align-items:start; }
.wpr-faq__list{ border-top:1px solid var(--line); }
.wpr-faq__item{ border-bottom:1px solid var(--line); }
.wpr-faq__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; text-align:left;
  padding:24px 0; background:transparent; border:none; cursor:pointer; font-family:var(--serif);
  font-size:calc(var(--ts,1) * clamp(20px,2.4vw,25px)); letter-spacing:-0.01em; color:var(--cream); }
.wpr-faq__plus{ width:38px; height:38px; flex-shrink:0; border-radius:999px; border:1px solid var(--line); color:var(--text);
  display:inline-flex; align-items:center; justify-content:center; font-size:22px; transition:all .2s; }
.wpr-faq__item[data-open="true"] .wpr-faq__plus{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); transform:rotate(45deg); }
.wpr-faq__a{ padding:0 0 26px; font-size:16px; line-height:calc(var(--blh,1) * 1.65); letter-spacing:var(--bls,0em); color:var(--text); max-width:58ch; display:none; }
.wpr-faq__item[data-open="true"] .wpr-faq__a{ display:block; }

/* ---------- cta ----------
   This band is the one place that flips the page upside down: it paints
   itself --cream (the darkest token) and then asks light-surface components
   to render on top. Patching descendants one selector at a time did not hold
   — .wpr-fact kept --text and landed at 1.3:1, and the footnote passes
   `style="color:var(--dimmer)"` inline from cta.php, which no class rule can
   outrank. So the tokens themselves are remapped once, on .wpr-cta__inner,
   and every descendant (inline styles included) resolves correctly from there.

   The remap lives on __inner, not .wpr-cta, because .wpr-cta still needs the
   original --cream for its own background; a custom property that referenced
   itself on the same element would compute to guaranteed-invalid. */
.wpr-cta{ border-radius:28px; padding:clamp(56px,8vw,88px) clamp(28px,5vw,64px); text-align:center; position:relative; overflow:hidden;
  background:var(--cream); border:1px solid var(--cream);
  /* Stashed before __inner shadows them, so islands that keep a light
     surface inside the band (the badge pill) can put the page palette back. */
  --pg-cream:var(--cream); --pg-text:var(--text); --pg-dim:var(--dim);
  --pg-dimmer:var(--dimmer); --pg-line:var(--line);
    /* Raw --accent only reaches 3.6-5.4:1 on this band depending on palette, so
       it is mixed AWAY from the band background. That direction is always
       --ink: this band paints itself --cream, and ink is by definition the
       opposite surface. Mixing toward #fff assumed a light palette and would
       wash the accent out on a dark one, where this band is the LIGHT band.
       Verified on every shipped palette: the swap moves contrast by at most
       0.28 and all stay above 4.5. Computed here so __inner can assign it to
       --accent without a self-reference.
       A palette may also supply --cta-accent-preset outright: on a dark
       palette this band is the LIGHT one, and no single mix satisfies both
       'light enough for the dark page' and 'dark enough for this band'. */
    --cta-accent:var(--cta-accent-preset, color-mix(in srgb, var(--accent) 70%, var(--ink))); }
.wpr-cta__glow{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:760px; height:760px; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent2) 22%, transparent) 0%, transparent 60%); }
.wpr-cta__inner{ position:relative; max-width:760px; margin:0 auto;
  --cream:var(--ink);
  --text:  color-mix(in srgb, var(--ink) 88%, transparent);
  --dim:   color-mix(in srgb, var(--ink) 74%, transparent);
  --dimmer:color-mix(in srgb, var(--ink) 60%, transparent);
  --line:  color-mix(in srgb, var(--ink) 24%, transparent);
  --accent:var(--cta-accent);
  /* accent2-dk is the warn hue, tuned dark enough for light surfaces; on this
     band it drops to ~3.0:1, so the band uses the brighter accent2 instead. */
  --accent2-dk:var(--accent2);
  /* Same reasoning for accent-dk, which body-copy links use: it is tuned
     for a light page and is far too dark against this inverted band. */
  --accent-dk:var(--cta-accent); }
.wpr-cta__inner .wpr-actions{ justify-content:center; }
/* The badge keeps its light --ink2 pill, so it needs the page palette back. */
.wpr-cta .wpr-badge{ --cream:var(--pg-cream); --text:var(--pg-text); --dim:var(--pg-dim);
  --dimmer:var(--pg-dimmer); --line:var(--pg-line); }
.wpr-cta .wpr-em{ color:var(--accent2); }
.wpr-cta .wpr-btn--ghost{ color:var(--ink); border-color:color-mix(in srgb, var(--ink) 35%, transparent); }

/* footer */
.wpr-foot{ background:var(--ink2); border-top:1px solid var(--line); padding-top:64px; padding-bottom:40px; }
.wpr-foot__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; }
.wpr-foot__col h4{ font-family:var(--sans); font-size:13px; font-weight:700; color:var(--cream); margin:0 0 18px; }
.wpr-foot__links{ display:flex; flex-direction:column; gap:11px; }
.wpr-foot__links a{ color:var(--dim); text-decoration:none; font-size:14.5px; }
.wpr-foot__links a:hover{ color:var(--cream); }
.wpr-foot__bottom{ border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; gap:16px;
  font-size:13.5px; color:var(--dimmer); flex-wrap:wrap; }
/* "Made with ♥ in USA". Deliberately not a palette token: the heart reads as
   red in every palette, and --accent2 is orange in the default one. */
.wpr-foot__heart{ width:1.05em; height:1.05em; color:#e5484d; vertical-align:-0.18em; margin:0 1px; }

/* misc helpers */
.wpr-spark{ position:absolute; pointer-events:none; border-radius:999px; }
/* A spark is absolutely positioned with negative offsets (hero-split uses
   right:-70px). Its section has to be the containing block: every ancestor up
   to <body> is position:static, so otherwise it resolves against the initial
   containing block, and .wpr{overflow-x:hidden} cannot clip it — an abspos box
   is not clipped by an overflow ancestor that is not its containing block.
   Measured effect: 70px of horizontal page scroll at every viewport width, on
   every page with a split hero. The comparison band never showed this because
   its spark sits inside .wpr-compare, which is already position:relative.
   overflow-x:clip rather than hidden, so this neither creates a scroll
   container nor traps position:sticky, and vertical overhang still shows. */
.wpr-section:has(> .wpr-spark){ position:relative; overflow-x:clip; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .wpr-grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .wpr-hero__grid{ grid-template-columns:1fr; }
  .wpr-grid-3{ grid-template-columns:1fr; }
  /* One column: the plans still auto-place into their own six-row bands, so
     they stack without overlapping and no subgrid reset is needed. The old
     `.wpr-plan--feature{box-shadow:none}` here dropped a drop-shadow that no
     longer exists, and would now wipe the 2px ring, so it is gone. */
  .wpr-plans{ grid-template-columns:1fr; }
  .wpr-faq__grid{ grid-template-columns:1fr; }
  .wpr-timeline{ margin-left:0; margin-right:0; }

  /* mobile nav */
  .wpr-nav__links, .wpr-nav__signin{ display:none; }
  .wpr-nav__toggle{ display:inline-flex; }
  .wpr-nav__drawer{ display:block; border-top:1px solid var(--line); background:var(--ink); }
  .wpr-nav__drawer[hidden]{ display:none; }
  .wpr-nav__drawer a{ display:block; padding:15px clamp(20px,5vw,56px); color:var(--text); text-decoration:none;
    font-size:16px; border-bottom:1px solid var(--line); }
  .wpr-nav__drawer .wpr-btn{ margin:16px clamp(20px,5vw,56px); width:calc(100% - 2*clamp(20px,5vw,56px)); }
}
@media (max-width:760px){
  .wpr-head--split{ flex-direction:column; align-items:flex-start; gap:20px; }
  .wpr-head__note{ max-width:none; }
  .wpr-foot__grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .wpr-foot__col--brand{ grid-column:1 / -1; }
  .wpr-trust__label{ width:100%; }
  .wpr-trust__logos{ justify-content:flex-start; }
  .wpr-bubble{ max-width:74vw; }
  .wpr-stat__s{ }
}
@media (max-width:520px){
  .wpr-grid-4{ grid-template-columns:1fr; }
  .wpr-grid-2{ grid-template-columns:1fr; }
  .wpr-foot__grid{ grid-template-columns:1fr; }
  .wpr-actions .wpr-btn{ width:100%; }
  .wpr-foot__bottom{ flex-direction:column; gap:8px; }
}

/* ============================================================
   IN-PAGE CUSTOMIZE CONTROL PANEL
   ============================================================ */
.wpr-cp{ position:fixed; right:22px; bottom:22px; z-index:80; font-family:var(--sans); }
.wpr-cp__fab{ width:56px; height:56px; border-radius:999px; border:1px solid var(--line); cursor:pointer;
  background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 14px 32px -10px rgba(15,40,36,.40); transition:transform .18s; }
.wpr-cp__fab:hover{ transform:translateY(-2px) rotate(-8deg); }
.wpr-cp__fab svg{ width:26px; height:26px; }
.wpr-cp__panel{ position:absolute; right:0; bottom:70px; width:312px; max-width:calc(100vw - 44px);
  max-height:calc(100vh - 104px); display:flex; flex-direction:column;
  background:var(--ink2); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(15,40,36,.34);
  transform-origin:bottom right; transition:opacity .18s, transform .18s; }
.wpr-cp__panel[hidden]{ display:none; }
.wpr-cp--closing{ opacity:0; transform:scale(.94); }
.wpr-cp__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); }
.wpr-cp__title{ font-size:15px; font-weight:700; color:var(--cream); }
.wpr-cp__title small{ display:block; font-size:12px; font-weight:400; color:var(--dimmer); margin-top:2px; }
.wpr-cp__x{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--dim);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
.wpr-cp__x:hover{ color:var(--cream); }
.wpr-cp__body{ padding:18px; display:flex; flex-direction:column; gap:20px; overflow-y:auto; }
.wpr-cp__group{ }
.wpr-cp__label{ font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--dimmer); margin-bottom:11px; }
.wpr-cp__swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.wpr-cp__sw{ width:38px; height:38px; border-radius:999px; cursor:pointer; border:2px solid transparent; padding:0;
  position:relative; display:inline-flex; align-items:center; justify-content:center; transition:transform .12s; }
.wpr-cp__sw:hover{ transform:scale(1.08); }
.wpr-cp__sw[aria-pressed="true"]{ border-color:var(--cream); }
.wpr-cp__sw[aria-pressed="true"]::after{ content:""; width:12px; height:12px; border-radius:999px; background:#fff; mix-blend-mode:difference; }
.wpr-cp__hint{ font-size:11.5px; color:var(--dimmer); margin-top:10px; }
.wpr-cp__sw--custom{ position:relative; overflow:hidden; color:#fff;
  background:conic-gradient(from 210deg, #FF5BA1, #F0A81C, #3FD89A, #0FB0A2, #4F63E0, #D62D7A, #FF5BA1); }
.wpr-cp__sw--custom svg{ position:relative; z-index:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.wpr-cp__sw--custom input[type=color]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; border:none; padding:0; margin:0; cursor:pointer; }
.wpr-cp__sw--custom::after{ display:none !important; }
.wpr-cp__fonts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wpr-cp__font{ padding:11px 12px; border-radius:10px; border:1px solid var(--line); background:var(--ink); color:var(--text);
  cursor:pointer; text-align:left; transition:border-color .15s, background .15s; }
.wpr-cp__font:hover{ border-color:var(--accent); }
.wpr-cp__font[aria-pressed="true"]{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.wpr-cp__font b{ display:block; font-size:20px; line-height:1; color:var(--cream); margin-bottom:5px; }
.wpr-cp__font span{ font-size:11px; line-height:1.25; color:var(--dim); display:block; }
.wpr-cp__size{ display:flex; align-items:center; gap:10px; }
.wpr-cp__sizebtn{ width:40px; height:40px; flex-shrink:0; border-radius:10px; border:1px solid var(--line); background:var(--ink);
  color:var(--cream); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.wpr-cp__sizebtn:hover{ border-color:var(--accent); }
.wpr-cp__sizebtn:disabled{ opacity:.35; cursor:default; }
.wpr-cp__sizetrack{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.wpr-cp__sizedots{ display:flex; gap:6px; align-items:center; }
.wpr-cp__sizedot{ width:8px; height:8px; border-radius:999px; background:var(--line); transition:background .15s, transform .15s; }
.wpr-cp__sizedot[data-on="true"]{ background:var(--accent); transform:scale(1.25); }
.wpr-cp__sizename{ font-size:12.5px; color:var(--dim); font-weight:600; }
.wpr-cp__reset{ width:100%; padding:11px; border-radius:10px; border:1px solid var(--line); background:transparent;
  color:var(--dim); font-size:13px; font-weight:600; cursor:pointer; }
.wpr-cp__reset:hover{ color:var(--cream); border-color:var(--dim); }
@media (max-width:520px){
  .wpr-cp{ right:14px; bottom:14px; }
  .wpr-cp__fab{ width:50px; height:50px; }
}

/* ============================================================
   BLOG / ARTICLE / FORMS (theme)
   ============================================================ */
.wpr-card__thumb{ display:block; margin-bottom:16px; border-radius:12px; overflow:hidden; }
.wpr-card__thumb img{ width:100%; height:auto; display:block; }
.wpr-card__more{ display:inline-block; margin-top:16px; color:var(--accent-dk); font-weight:600; font-size:14px; text-decoration:none; }
.wpr-card__more:hover{ text-decoration:underline; }
.wpr-article{ max-width:760px; margin-left:auto; margin-right:auto; }
.wpr-article__hero{ width:100%; height:auto; border-radius:18px; display:block; }
.wpr-prose{ font-family:var(--sans); color:var(--text); font-size:calc(var(--ts,1) * 20px); line-height:calc(var(--blh,1) * 1.7); letter-spacing:var(--bls,0em); }
.wpr-prose > * + *{ margin-top:calc(var(--bsp,1) * 1.1em); }
.wpr-prose h2{ font-family:var(--serif); color:var(--cream); font-size:calc(var(--ts,1) * 30px); line-height:calc(var(--hlh,1) * 1.2); margin-top:calc(var(--hsp,1) * 1.6em); letter-spacing:calc(-0.01em + var(--hls,0em)); }
.wpr-prose h3{ font-family:var(--serif); color:var(--cream); font-size:calc(var(--ts,1) * 26px); margin-top:calc(var(--hsp,1) * 1.4em); }
.wpr-prose a{ color:var(--accent-dk); text-decoration:underline; text-underline-offset:2px; }
.wpr-prose img{ border-radius:12px; height:auto; }
.wpr-prose blockquote{ border-left:3px solid var(--accent); padding-left:20px; margin-left:0; color:var(--dim); font-style:italic; }
.wpr-prose ul, .wpr-prose ol{ padding-left:22px; }
.wpr-prose li{ margin-top:calc(var(--bsp,1) * .4em); }
.wpr-prose code{ background:var(--ink3); padding:2px 6px; border-radius:5px; font-size:.9em; }
.wpr-prose pre{ background:var(--ink3); padding:18px; border-radius:12px; overflow:auto; }
.wpr-prose pre code{ background:none; padding:0; }
.wpr-pagination{ margin-top:48px; text-align:center; }
.wpr-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; margin:0 4px; border-radius:10px; border:1px solid var(--line); color:var(--text); text-decoration:none; font-weight:600; }
.wpr-pagination .page-numbers.current{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.wpr-pagination .page-numbers:hover{ border-color:var(--accent); }
.search-form{ display:flex; gap:10px; }
.search-form .search-field{ flex:1; padding:13px 16px; border-radius:10px; border:1px solid var(--line); background:var(--ink2); color:var(--text); font-family:var(--sans); font-size:15px; }
.search-form .search-submit{ padding:13px 22px; border-radius:10px; border:none; background:var(--accent2); color:var(--on-accent2); font-weight:600; cursor:pointer; }
/* a plain content table/figure niceties */
.wpr-prose figure{ margin:0; }
.wpr-prose figcaption{ font-size:13px; color:var(--dimmer); margin-top:8px; text-align:center; }

/* ---------- arrow links → CTA buttons ----------
   inc/arrow-cta.php adds .wpr-cta-link to any link in a single post whose
   label contains → (CSS has no selector for text content), and strips the
   arrow so the ::after below can draw — and animate — it. Shape follows
   .wpr-btn--primary; the type scale is the prose's, not the section's. */
.wpr-cta-link{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap;
  font-family:var(--sans); font-weight:600; font-size:calc(var(--ts,1) * 16px); line-height:1.2;
  text-decoration:none; cursor:pointer; padding:14px 26px; border-radius:999px;
  border:1px solid transparent; background:var(--accent2); color:var(--on-accent2);
  box-shadow:0 8px 18px -12px var(--accent2-dk);
  transition:transform .15s, box-shadow .2s, background .15s, color .15s;
}
.wpr-cta-link::after{ content:"\2192"; display:inline-block; transition:transform .15s; }
/* Beat .wpr-prose a on both properties it sets. */
.wpr-prose a.wpr-cta-link{ color:var(--on-accent2); text-decoration:none; }
.wpr-prose a.wpr-cta-link:hover{ background:var(--accent2-dk); }
.wpr-cta-link:focus-visible{ outline-offset:2px; }
.wpr-cta-link:active{ transform:translateY(0); box-shadow:0 4px 10px -8px var(--accent2-dk); }
/* A paragraph built around the CTA gets button spacing, not prose spacing. */
.wpr-prose > p:has(> .wpr-cta-link:only-child){ margin-top:calc(var(--bsp,1) * 1.6em); }

@media (hover:hover){
  /* Lift + arrow nudge live here so neither can latch on a touch screen. */
  .wpr-prose a.wpr-cta-link:hover{ transform:translateY(-1px); }
  .wpr-cta-link:hover::after{ transform:translateX(3px); }
}
@media (prefers-reduced-motion: reduce){
  .wpr-cta-link,.wpr-cta-link::after{ transition-duration:0.01ms !important; }
  .wpr-prose a.wpr-cta-link:hover,.wpr-cta-link:hover::after{ transform:none !important; }
}

/* ---------- editor content break-out ----------
   Posts and generic pages render the_content() inside .wpr-article (760px)
   → .wpr-prose. Section blocks emit their own <section class="wpr-section">
   with a .wpr-container inside, so they need to escape that column to look
   the same as they do on a landing page. .wpr (the page wrapper) is
   overflow-x:hidden, which absorbs the scrollbar-width overshoot in 100vw. */
.wpr-prose > .wpr-section,
.wpr-prose > .alignfull{
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}
/* Sections supply their own vertical rhythm; drop the prose flow margin. */
.wpr-prose > .wpr-section + *{ margin-top:0; }
.wpr-prose > .alignwide{
  margin-inline: calc(50% - min(50vw, 620px));
  width: min(100vw, 1240px);
  max-width: min(100vw, 1240px);
}
/* Full-bleed children must not inherit the prose type scale. */
.wpr-prose > .wpr-section{ font-size:initial; line-height:initial; }

/* Related Reading — cards injected mid-article on single posts (lives inside .wpr-prose) */
.wpr-related{ margin:44px 0; padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--ink2); }
.wpr-related__head{ font-family:var(--serif); color:var(--cream); font-size:calc(var(--ts,1) * 20px); letter-spacing:-0.01em; margin-bottom:18px; }
.wpr-related__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.wpr-related .wpr-related__card{ display:flex; flex-direction:column; text-decoration:none; color:var(--cream); border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--ink); transition:border-color .15s ease, transform .15s ease; }
.wpr-related__thumb{ display:block; aspect-ratio:16 / 10; background:var(--ink3); }
.wpr-related__thumb img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; margin:0; }
.wpr-related__img--ph{ display:block; width:100%; height:100%; background:linear-gradient(135deg, var(--ink3), var(--ink2)); }
.wpr-related__title{ display:block; padding:12px 14px 14px; font-family:var(--sans); font-weight:600; font-size:15px; line-height:1.35; color:var(--cream); }
@media (max-width:520px){ .wpr-related__grid{ grid-template-columns:1fr; } }

/* ============================================================
   DROPDOWN MENU · FORMS · CONTACT (theme)
   ============================================================ */
.wpr-nav__item{ position:relative; }
.wpr-has-sub > .wpr-nav__parent{ display:inline-flex; align-items:center; gap:6px; color:var(--dim); text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap; cursor:pointer; }
.wpr-has-sub:hover > .wpr-nav__parent, .wpr-has-sub:focus-within > .wpr-nav__parent{ color:var(--cream); }
.wpr-nav__parent[aria-current="page"]{ color:var(--cream); }
.wpr-caret{ transition:transform .18s; flex-shrink:0; }
.wpr-has-sub:hover .wpr-nav__parent > .wpr-caret{ transform:rotate(180deg); }
.wpr-nav__sub{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px); min-width:236px; background:var(--ink2); border:1px solid var(--line); border-radius:18px; padding:8px; box-shadow:0 26px 54px -26px rgba(15,40,36,.34); opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease; z-index:50; }
.wpr-nav__sub::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.wpr-has-sub:hover .wpr-nav__sub, .wpr-has-sub:focus-within .wpr-nav__sub{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(8px); }
.wpr-nav__sub a{ display:block; padding:12px 16px; border-radius:10px; color:var(--text); text-decoration:none; font-size:14.5px; font-weight:500; line-height:1.35; white-space:nowrap; transition:background .15s ease, color .15s ease; }
.wpr-nav__sub a:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--cream); }
.wpr-nav__sub a[aria-current="page"]{ color:var(--accent-dk); }

/* ---- current page / section — prominent active state ---- */
.wpr-nav__links > a[aria-current="page"],
.wpr-has-sub > .wpr-nav__parent.is-current{ color:var(--accent-dk); font-weight:600; position:relative; }
.wpr-nav__links > a[aria-current="page"]::after,
.wpr-has-sub > .wpr-nav__parent.is-current::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px; background:var(--accent); }
.wpr-has-sub > .wpr-nav__parent.is-current .wpr-caret{ color:var(--accent-dk); }
/* dropdown sub item */
.wpr-nav__sub a[aria-current="page"]{ font-weight:600; background:color-mix(in srgb, var(--accent) 12%, transparent); }
/* mobile drawer */
.wpr-nav__drawer > a[aria-current="page"]{ color:var(--accent-dk); font-weight:700; box-shadow:inset 3px 0 0 var(--accent); }
.wpr-drawer__parent.is-current{ color:var(--accent-dk); font-weight:700; }
.wpr-drawer__parent.is-current .wpr-caret{ color:var(--accent-dk); }
.wpr-drawer__sub a[aria-current="page"]{ color:var(--accent-dk); font-weight:700; box-shadow:inset 3px 0 0 var(--accent); }

/* drawer submenu (mobile) */
.wpr-drawer__group{ border-bottom:1px solid var(--line); }
.wpr-drawer__parent{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px clamp(20px,5vw,56px); background:transparent; border:none; color:var(--text); font-family:var(--sans); font-size:16px; font-weight:500; cursor:pointer; text-align:left; }
.wpr-drawer__parent .wpr-caret{ transition:transform .2s; }
.wpr-drawer__parent[aria-expanded="true"] .wpr-caret{ transform:rotate(180deg); }
.wpr-drawer__sub{ background:color-mix(in srgb, var(--accent) 5%, transparent); padding:2px 0 10px; }
.wpr-drawer__sub[hidden]{ display:none; }
.wpr-drawer__sub a{ display:block; padding:11px clamp(34px,8vw,72px); color:var(--dim); text-decoration:none; font-size:15px; border-bottom:none !important; }
.wpr-drawer__sub a:hover{ color:var(--cream); }

/* forms */
.wpr-form{ display:flex; flex-direction:column; gap:16px; }
.wpr-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wpr-form label{ display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:600; color:var(--cream); }
.wpr-form input, .wpr-form textarea,
.wpcf7-form input:not([type=submit]):not([type=checkbox]):not([type=radio]), .wpcf7-form textarea, .wpcf7-form select{ padding:13px 15px; border-radius:10px; border:1px solid var(--line); background:var(--ink); color:var(--text); font-family:var(--sans); font-size:15px; width:100%; }
.wpr-form input::placeholder, .wpr-form textarea::placeholder{ color:var(--dimmer); }
.wpr-form textarea{ resize:vertical; }
.wpr-form button{ align-self:flex-start; border:none; margin-top:4px; }
.wpcf7-form{ display:flex; flex-direction:column; gap:14px; }
.wpcf7-form .wpcf7-submit{ padding:15px 28px; border-radius:999px; border:none; background:var(--accent2); color:var(--on-accent2); font-weight:600; font-size:16px; cursor:pointer; }

/* contact layout */
.wpr-contact{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(32px,5vw,56px); align-items:start; }
.wpr-contact__points{ display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.wpr-contact__point{ display:flex; align-items:center; gap:12px; font-size:15px; color:var(--text); font-weight:500; }
.wpr-contact__ic{ display:inline-flex; width:40px; height:40px; border-radius:11px; background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent); align-items:center; justify-content:center; flex-shrink:0; }
.wpr-checklist2{ display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; }
@media (max-width:860px){ .wpr-contact{ grid-template-columns:1fr; } }
@media (max-width:560px){ .wpr-form__row{ grid-template-columns:1fr; } .wpr-checklist2{ grid-template-columns:1fr; } }

/* task examples */
.wpr-task{ display:flex; gap:14px; align-items:flex-start; padding:20px 22px; background:var(--ink2); border:1px solid var(--line); border-radius:14px; }
.wpr-task__check{ width:30px; height:30px; border-radius:999px; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.wpr-task__t{ font-size:15.5px; font-weight:600; color:var(--cream); line-height:1.4; }
.wpr-task__meta{ display:flex; gap:7px; margin-top:6px; font-size:12.5px; color:var(--dimmer); font-family:var(--mono); }

.wpr-task__meta span{ white-space:nowrap; }

/* ============================================================
   AGENCY PAGE ADDITIONS
   hero fact row · problem cards · task category lists ·
   4-step row · client dashboard mock · compare table · objections
   ============================================================ */

/* hero quick-fact row */
.wpr-facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 26px; margin-top:34px; }
.wpr-fact{ display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--text); }
.wpr-fact svg{ width:18px; height:18px; color:var(--accent); flex-shrink:0; }
.wpr-fact + .wpr-fact::before{ content:""; }

/* card with secondary (warning) accent — used for "money on the table" problems */
.wpr-card--warn .wpr-icon{ background:color-mix(in srgb, var(--accent2) 14%, transparent); color:var(--accent2-dk); }
.wpr-punch{ margin:clamp(36px,4vw,52px) auto 0; max-width:820px; text-align:center;
  font-family:var(--serif); font-weight:400; color:var(--cream); letter-spacing:-0.01em;
  font-size:calc(var(--ts,1) * clamp(22px,3vw,32px)); line-height:1.3; }
.wpr-punch em{ font-style:italic; color:var(--accent-dk); }

/* task category cards */
.wpr-cat{ padding:clamp(26px,3vw,34px); border-radius:20px; background:var(--ink2); border:1px solid var(--line); }
.wpr-cat__head{ display:flex; align-items:center; gap:13px; margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.wpr-cat__ic{ width:46px; height:46px; border-radius:13px; flex-shrink:0;
  background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; }
.wpr-cat__ic svg{ width:23px; height:23px; }
.wpr-tasklist{ display:grid; grid-template-columns:1fr 1fr; gap:11px 22px; }
.wpr-tasklist li{ list-style:none; display:flex; align-items:flex-start; gap:9px; font-size:14.5px; line-height:1.4; color:var(--text); }
.wpr-tasklist{ margin:0; padding:0; }
.wpr-tasklist svg{ width:15px; height:15px; color:var(--accent); flex-shrink:0; margin-top:3px; }

/* numbered step row (4-up) */
.wpr-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:flow; }
.wpr-flow__step{ padding:clamp(24px,2.6vw,32px); border-radius:20px; background:var(--ink2); border:1px solid var(--line);
  display:flex; flex-direction:column; position:relative; }
.wpr-flow__num{ width:46px; height:46px; border-radius:999px; margin-bottom:20px; font-family:var(--serif); font-size:20px;
  display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--accent-dk); }
.wpr-flow__step:first-child .wpr-flow__num{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.wpr-flow__step h3{ margin:0 0 10px; }

/* client dashboard mock (white-label) */

/* comparison table */
.wpr-ctable__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:22px; border:1px solid var(--line); }
.wpr-ctable{ width:100%; border-collapse:collapse; background:var(--ink2); min-width:720px; }
.wpr-ctable th, .wpr-ctable td{ text-align:left; padding:18px 22px; border-bottom:1px solid var(--line); font-size:14.5px; }
.wpr-ctable thead th{ font-family:var(--sans); font-weight:700; color:var(--cream); font-size:14px; vertical-align:bottom; }
.wpr-ctable tbody th{ font-weight:600; color:var(--cream); width:200px; }
.wpr-ctable td{ color:var(--dim); }
.wpr-ctable tbody tr:last-child th, .wpr-ctable tbody tr:last-child td{ border-bottom:none; }
.wpr-ctable .wpr-ctable__hl{ background:color-mix(in srgb, var(--accent) 7%, transparent);
  border-left:1px solid var(--line); border-right:1px solid var(--line); color:var(--cream); font-weight:600; }
.wpr-ctable thead .wpr-ctable__hl{ color:var(--accent-dk); border-top:1px solid var(--line); border-top-left-radius:0; }
.wpr-ctable__cap{ display:block; font-size:11.5px; font-weight:600; color:var(--accent-dk); letter-spacing:0.04em; margin-bottom:4px; }

/* ---- comparison table, narrow ----
   The table has min-width:720px, and the container's inner width crosses that
   at about 800px — below it the scroll box clipped mid-word with nothing to
   say it scrolled, and the highlighted "recommended" column, the whole point
   of the block, sat entirely off-screen.

   So below 820px each ROW becomes its own card: the row label is the card
   head and every cell prints "<column> … <value>", the column name coming
   from the data-label that comparison-table.php writes. Comparing options
   stays a matter of reading down a card, with no horizontal scrolling and
   nothing out of reach. The highlighted column keeps its tint and gets an
   accent label, so the recommendation still stands out once <thead> is gone.

   Trade-off worth knowing: display:block drops the implicit table roles, so
   the header/cell association is carried visually by data-label rather than
   by table semantics. Every cell still names its own column on screen. */
@media (max-width:820px){
  .wpr-ctable__scroll{ overflow-x:visible; border:0; border-radius:0; }
  .wpr-ctable{ display:block; min-width:0; background:transparent; }
  .wpr-ctable thead{ display:none; }
  .wpr-ctable tbody{ display:block; }
  .wpr-ctable tbody tr{ display:block; overflow:hidden; margin-bottom:14px;
    border:1px solid var(--line); border-radius:18px; background:var(--ink2); }
  .wpr-ctable tbody tr:last-child{ margin-bottom:0; }
  .wpr-ctable tbody th{ display:block; width:auto; padding:13px 18px;
    background:var(--ink3); border-bottom:1px solid var(--line); font-size:15px; }
  .wpr-ctable tbody td{ display:flex; align-items:baseline; justify-content:space-between; gap:18px;
    padding:12px 18px; border-bottom:1px solid var(--line); }
  .wpr-ctable tbody tr td:last-child{ border-bottom:none; }
  .wpr-ctable tbody td::before{ content:attr(data-label); flex:0 0 auto;
    color:var(--dim); font-weight:600; }
  .wpr-ctable tbody td:empty::after{ content:"—"; color:var(--dimmer); }
  /* Stacked, a left/right border reads as a stray rule across the card. */
  .wpr-ctable .wpr-ctable__hl{ border-left:0; border-right:0; color:var(--cream); }
  .wpr-ctable tbody .wpr-ctable__hl::before{ color:var(--accent-dk); }
}

/* objection cards */

/* limited-slots notice */
.wpr-notice{ margin:30px auto 0; max-width:600px; display:flex; align-items:flex-start; gap:12px;
  padding:16px 20px; border-radius:14px; text-align:left;
  background:color-mix(in srgb, var(--accent2) 9%, transparent); border:1px solid color-mix(in srgb, var(--accent2) 30%, var(--line)); }
.wpr-notice svg{ width:20px; height:20px; color:var(--accent2-dk); flex-shrink:0; margin-top:1px; }
.wpr-notice b{ color:var(--cream); }
.wpr-notice span{ font-size:14px; line-height:1.55; color:var(--dim); }

/* ============================================================
   BUSINESS PAGE ADDITIONS
   feature list · negative cross list · industries columns · hours
   ============================================================ */

/* feature list — small icon + bold title + description */
.wpr-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.wpr-feats--2{ grid-template-columns:repeat(2,1fr); }
.wpr-feat{ display:flex; gap:14px; padding:22px 22px; border-radius:16px; background:var(--ink2); border:1px solid var(--line); }
.wpr-feat__ic{ width:40px; height:40px; border-radius:11px; flex-shrink:0;
  background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; }
.wpr-feat__ic svg{ width:20px; height:20px; }
.wpr-feat b{ display:block; font-family:var(--sans); font-size:15.5px; font-weight:600; color:var(--cream); margin-bottom:5px; letter-spacing:-0.01em; }
.wpr-feat span{ font-size:15px; line-height:1.55; color:var(--dim); }

/* negative / pain checklist (red X marks) */
.wpr-tasklist--cross svg{ color:var(--accent2-dk); }

/* two-choices */
.wpr-choice{ padding:clamp(28px,3vw,38px); border-radius:22px; border:1px solid var(--line); background:var(--ink2); display:flex; flex-direction:column; }
/* Choice cards are meant to sit in a grid, which supplies the gap. Dropped
   straight onto a page they have no grid and no margin, so they touch. The
   :not() keeps this off grid parents, where gap already handles it and a
   margin would double the spacing. */
:not([class*="wpr-grid"]) > .wpr-choice + .wpr-choice{ margin-top:20px; }
.wpr-choice--bad{ background:var(--ink); }
.wpr-choice--good{ border-color:var(--accent); box-shadow:0 30px 70px -34px var(--accent-dk); }
.wpr-choice__tag{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-size:12.5px; font-weight:700;
  letter-spacing:0.04em; padding:6px 14px; border-radius:999px; margin-bottom:20px; }
.wpr-choice--bad .wpr-choice__tag{ background:color-mix(in srgb, var(--accent2) 14%, transparent); color:var(--accent2-dk); }
.wpr-choice--good .wpr-choice__tag{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent-dk); }

/* industries — dense multi-column link list */
.wpr-industries{ columns:4 190px; column-gap:30px; padding:clamp(24px,3vw,36px); border-radius:22px; background:var(--ink2); border:1px solid var(--line); }
.wpr-industries span{ display:block; break-inside:avoid; padding:8px 0; font-size:13.5px; color:var(--dim); line-height:1.4;
  border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent); }

/* working hours */

@media (max-width:980px){ .wpr-feats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .wpr-feats, .wpr-feats--2{ grid-template-columns:1fr; } }

@media (max-width:1024px){
  .wpr-flow{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .wpr-tasklist{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .wpr-flow{ grid-template-columns:1fr; }
}

/* ============================================================
   Multi-step form shell (.wpr-field / .wpr-wizard)
   Form fields plus a multi-step wrapper. Tokens only; reuses the
   .wpr-btn, .wpr-icon and .wpr-card vocabulary. The theme's own
   `form` section partial uses .wpr-wizard__fine and
   .wpr-wizard__check, which is why this stays here rather than
   moving out with the site-specific wizard it was written for.
   Steps are toggled by whatever script owns the page, through
   data-wizard attributes.
   ============================================================ */

/* form fields (first inputs in the system — keep generic) */
.wpr-field{ display:block; margin-bottom:18px; text-align:left; }
.wpr-field:last-child{ margin-bottom:0; }
.wpr-field__label{ display:block; font-family:var(--sans); font-size:13.5px; font-weight:600;
  color:var(--cream); margin-bottom:8px; letter-spacing:-0.01em; }
.wpr-field__label .wpr-field__opt{ font-weight:400; color:var(--dim); }
.wpr-input, .wpr-select, .wpr-textarea{ width:100%; font-family:var(--sans); font-size:15px; color:var(--text);
  background:var(--ink2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; line-height:1.5;
  transition:border-color .15s, box-shadow .15s; }
.wpr-input::placeholder, .wpr-textarea::placeholder{ color:var(--dimmer); }
.wpr-input:focus, .wpr-select:focus, .wpr-textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.wpr-textarea{ min-height:128px; resize:vertical; }
.wpr-select{ cursor:pointer; }
.wpr-input.is-invalid, .wpr-textarea.is-invalid, .wpr-select.is-invalid{ border-color:var(--accent2-dk);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent2) 16%, transparent); }
/* A field that never reacts until you click it reads as decoration. Focus and
   invalid both outrank the hover, so neither is overwritten by a stray pointer. */
@media (hover:hover){
  .wpr-input:not(:focus):not(.is-invalid):hover,
  .wpr-select:not(:focus):not(.is-invalid):hover,
  .wpr-textarea:not(:focus):not(.is-invalid):hover{ border-color:var(--wpr-hover-ring,var(--dim)); }
}
.wpr-field__label{ transition:color var(--wpr-hover-dur,180ms) var(--wpr-hover-ease,ease); }
.wpr-field:focus-within .wpr-field__label{ color:var(--accent-dk); }
@media (prefers-reduced-motion: reduce){ .wpr-field__label{ transition:none; } }
/* inline per-field validation message */
.wpr-field__msg{ display:flex; align-items:flex-start; gap:6px; margin-top:7px;
  font-family:var(--sans); font-size:13px; line-height:1.45; color:var(--accent2-dk); }
.wpr-field__msg::before{ content:"!"; flex-shrink:0; width:15px; height:15px; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  background:var(--accent2-dk); color:#fff; font-size:10px; font-weight:700; }

/* choice chips (urgency) */
.wpr-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.wpr-chip input{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.wpr-chip span{ display:inline-flex; padding:10px 18px; border-radius:999px; border:1px solid var(--line);
  background:var(--ink2); font-size:14px; font-weight:500; color:var(--text); cursor:pointer; transition:.15s; }
.wpr-chip input:checked + span{ border-color:var(--accent); color:var(--accent-dk); font-weight:600;
  background:color-mix(in srgb, var(--accent) 10%, transparent); }
.wpr-chip input:focus-visible + span{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

/* wizard shell */
.wpr-wizard{ max-width:660px; margin:0 auto; }
.wpr-wizard__progress{ display:flex; align-items:flex-start; margin-bottom:32px; }
.wpr-wizard__pip{ display:flex; flex-direction:column; align-items:center; gap:9px; flex:0 0 auto; }
.wpr-wizard__dot{ width:38px; height:38px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:15px; border:1px solid var(--line);
  background:var(--ink2); color:var(--dim); transition:.2s; }
.wpr-wizard__dot svg{ width:19px; height:19px; }
.wpr-wizard__plabel{ font-size:12.5px; font-weight:600; color:var(--dim); letter-spacing:.01em; white-space:nowrap; }
.wpr-wizard__line{ flex:1; height:2px; background:var(--line); margin:18px 8px 0; transition:.2s; }
.wpr-wizard__pip[data-state="active"] .wpr-wizard__dot{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.wpr-wizard__pip[data-state="active"] .wpr-wizard__plabel{ color:var(--accent-dk); }
.wpr-wizard__pip[data-state="done"] .wpr-wizard__dot{ border-color:var(--accent); color:var(--accent-dk);
  background:color-mix(in srgb, var(--accent) 14%, transparent); }
.wpr-wizard__line[data-state="done"]{ background:var(--accent); }

.wpr-wizard__card{ padding:clamp(26px,3vw,40px); border-radius:24px; background:var(--ink2); border:1px solid var(--line); text-align:left; }
.wpr-wizard__panel{ display:none; }
.wpr-wizard__panel.is-active{ display:block; animation:wpr-fade .25s ease; }
@keyframes wpr-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.wpr-wizard__h{ font-family:var(--serif); font-size:calc(var(--ts,1) * clamp(22px,2.6vw,27px));
  color:var(--cream); line-height:1.25; letter-spacing:-0.01em; }
.wpr-wizard__sub{ margin:10px 0 24px; font-size:15px; line-height:1.6; color:var(--dim); }
.wpr-wizard__foot{ display:flex; gap:12px; margin-top:28px; }
.wpr-wizard__foot .wpr-btn{ flex:1; justify-content:center; }
.wpr-wizard__foot--solo{ }
.wpr-wizard__fine{ margin-top:16px; font-size:13px; line-height:1.55; color:var(--dimmer); text-align:center; }

/* step 2 — "what happens next" rows */
.wpr-wizard__info{ display:grid; gap:14px; }
.wpr-wizard__row{ display:flex; gap:15px; align-items:flex-start; padding:16px 18px; border-radius:16px;
  background:var(--ink); border:1px solid var(--line); }
.wpr-wizard__row .wpr-icon{ width:44px; height:44px; border-radius:12px; margin-bottom:0; flex-shrink:0; }
.wpr-wizard__row .wpr-icon svg{ width:22px; height:22px; }
.wpr-wizard__rk{ font-weight:600; color:var(--cream); font-size:15px; margin-bottom:3px; letter-spacing:-0.01em; }
.wpr-wizard__rt{ font-size:14px; line-height:1.55; color:var(--dim); }

/* success state */
.wpr-wizard__done{ text-align:center; }
.wpr-wizard__check{ width:66px; height:66px; border-radius:999px; margin:0 auto 22px;
  display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
.wpr-wizard__check svg{ width:32px; height:32px; }
.wpr-wizard__done .wpr-wizard__email{ color:var(--cream); font-weight:600; }

/* error + loading */
.wpr-wizard__error{ display:none; margin-top:18px; padding:13px 16px; border-radius:12px; font-size:14px; line-height:1.5;
  background:color-mix(in srgb, var(--accent2) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent2) 30%, var(--line)); color:var(--accent2-dk); }
.wpr-wizard__error.is-visible{ display:block; }
.wpr-btn.is-loading{ pointer-events:none; opacity:.72; }

/* hero numbered steps — vertical list beside the wizard */
.wpr-hsteps{ display:grid; gap:18px; margin-top:clamp(26px,3vw,36px); }
.wpr-hstep{ display:flex; gap:16px; align-items:flex-start; }
.wpr-hstep__num{ width:38px; height:38px; border-radius:999px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:17px; font-weight:600;
  background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent-dk);
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.wpr-hstep__k{ font-family:var(--sans); font-size:16px; font-weight:600; color:var(--cream); letter-spacing:-0.01em; }
.wpr-hstep__t{ font-size:14px; line-height:1.5; color:var(--dim); margin-top:3px; }

@media (max-width:560px){
  .wpr-wizard__plabel{ display:none; }
  .wpr-wizard__foot{ flex-direction:column-reverse; }
}

/* ============================================================
   REFINED — interaction states + calmed stat colors
   Orange = primary CTAs only. Tokens only (works in every palette).
   ============================================================ */
.wpr-btn{ transition:transform .15s, box-shadow .2s, background .15s, border-color .15s, color .15s; }
.wpr-btn--primary:active{ transform:translateY(0); box-shadow:0 4px 10px -8px var(--accent2-dk); }
.wpr-btn--ghost:hover{ border-color:var(--cream); }
:is(a,button):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.wpr-btn:focus-visible{ outline-offset:2px; }
.wpr-plan .wpr-btn{ width:100%; margin-top:4px; }
.wpr-head--center .wpr-lead{ max-width:56ch; margin-left:auto; margin-right:auto; }
.wpr-nav__links a{ padding:8px 8px; transition:color .15s; }
.wpr-foot__links a{ transition:color .15s; }
.wpr-stat__label,.wpr-stat__t{ color:var(--dim); }
.wpr-stat--feature .wpr-stat__label,.wpr-stat--feature .wpr-stat__t{ color:var(--accent-dk); }

/* ============================================================
   HOVER SYSTEM
   One vocabulary for every raised surface, in two tiers:

     strong — the surface is a link, or contains one, so hovering it previews
              a click: it lifts, warms its border and grows a shadow.
     subtle — a panel that does nothing (a stat, a feature row, a task row).
              Border and a whisper of shadow only. No lift: movement here
              would promise a click that isn't there.

   :has() sorts them, so a card that gains a CTA later is promoted on its own
   and nothing has to be reclassified by hand.

   This replaced three treatments that disagreed — .wpr-service lifted 3px,
   .wpr-related__card lifted 2px, .wpr-card only changed border colour — with
   one set of tokens to retune.

   The whole thing sits inside @media (hover:hover). On a touch screen :hover
   latches after a tap and a card stays lifted until you tap elsewhere; none
   of the hovers this replaced were guarded, so that was happening on phones.
   ============================================================ */
:root{
  --wpr-hover-dur:180ms;
  --wpr-hover-ease:cubic-bezier(.22,1,.36,1);
  --wpr-hover-lift:-2px;
  --wpr-hover-ring:color-mix(in srgb, var(--accent) 38%, var(--line));
  --wpr-hover-sh-sm:0 4px 14px -10px color-mix(in srgb, var(--cream) 50%, transparent);
  --wpr-hover-sh-lg:0 12px 26px -14px color-mix(in srgb, var(--cream) 50%, transparent);
}

@media (hover:hover){
  /* the raised surfaces this system owns */
  :is(.wpr-card,.wpr-service,.wpr-step,.wpr-stat,.wpr-plan,.wpr-quote,.wpr-cat,
      .wpr-feat,.wpr-flow__step,.wpr-choice,.wpr-task,.wpr-related__card){
    transition:border-color var(--wpr-hover-dur) var(--wpr-hover-ease),
               box-shadow   var(--wpr-hover-dur) var(--wpr-hover-ease),
               transform    var(--wpr-hover-dur) var(--wpr-hover-ease);
  }

  /* subtle tier — every panel */
  :is(.wpr-card,.wpr-service,.wpr-step,.wpr-stat,.wpr-plan,.wpr-quote,.wpr-cat,
      .wpr-feat,.wpr-flow__step,.wpr-choice,.wpr-task,.wpr-related__card):hover{
    border-color:var(--wpr-hover-ring);
    box-shadow:var(--wpr-hover-sh-sm);
  }

  /* strong tier — leads somewhere */
  :is(.wpr-card,.wpr-service,.wpr-step,.wpr-stat,.wpr-plan,.wpr-quote,.wpr-cat,
      .wpr-feat,.wpr-flow__step,.wpr-choice,.wpr-task):has(:is(a[href],button)):hover,
  a:is(.wpr-related__card,.wpr-card,.wpr-service):hover{
    transform:translateY(var(--wpr-hover-lift));
    box-shadow:var(--wpr-hover-sh-lg);
  }

  /* Cards carrying their own box-shadow must compose, not replace it, or the
     feature ring and the choice glow vanish the moment you point at them. */
  .wpr-plan--feature:hover{ box-shadow:inset 0 0 0 1px var(--accent), var(--wpr-hover-sh-lg); }
  .wpr-choice--good:hover{ box-shadow:0 30px 70px -34px var(--accent-dk), var(--wpr-hover-sh-lg); }

  /* Icon wells warm with the card they sit in. */
  :is(.wpr-icon,.wpr-service__icon,.wpr-cat__ic,.wpr-feat__ic,.wpr-task__check,.wpr-step__num,.wpr-flow__num){
    transition:background var(--wpr-hover-dur) var(--wpr-hover-ease),
               color      var(--wpr-hover-dur) var(--wpr-hover-ease),
               border-color var(--wpr-hover-dur) var(--wpr-hover-ease);
  }
  :is(.wpr-card,.wpr-service,.wpr-step,.wpr-cat,.wpr-feat,.wpr-flow__step,
      .wpr-task):not(.wpr-card--warn):hover
    :is(.wpr-icon,.wpr-service__icon,.wpr-cat__ic,.wpr-feat__ic,.wpr-task__check,.wpr-step__num,.wpr-flow__num){
    background:color-mix(in srgb, var(--accent) 16%, transparent);
    color:var(--accent-dk);
    border-color:var(--wpr-hover-ring);
  }
  /* warn cards keep their own hue rather than turning brand-accent */
  .wpr-card--warn:hover .wpr-icon{
    background:color-mix(in srgb, var(--accent2) 18%, transparent); color:var(--accent2-dk); }
  /* the first step/flow counter is a filled accent chip already — leave it */
  .wpr-step:first-child:hover .wpr-step__num,
  .wpr-flow__step:first-child:hover .wpr-flow__num{ background:var(--accent); color:var(--on-accent); }

  /* Controls */
  .wpr-faq__q:hover .wpr-faq__plus{ border-color:var(--accent); color:var(--accent-dk); }
  .wpr-btn--primary:hover{ transform:translateY(-1px); }
  /* Table rows: a scanning aid. Tables carry row hover without implying a
     click, which is why this is here and not gated behind :has(). */
  .wpr-ctable tbody tr{ transition:background var(--wpr-hover-dur) var(--wpr-hover-ease); }
  .wpr-ctable tbody tr:hover{ background:color-mix(in srgb, var(--accent) 5%, transparent); }
  .wpr-chip span{ transition:border-color var(--wpr-hover-dur) var(--wpr-hover-ease),
                             background var(--wpr-hover-dur) var(--wpr-hover-ease); }
  .wpr-chip:hover span{ border-color:var(--wpr-hover-ring); }
  /* Card thumbnails (post grid, related posts). .wpr-card__thumb already clips,
     so the image can grow past its box without touching layout. Slower than the
     rest of the system on purpose: a fast zoom on a photo reads as a glitch. */
  .wpr-card:hover .wpr-card__thumb img{ transform:scale(1.05); }
}
.wpr-card__thumb img{ transition:transform 460ms var(--wpr-hover-ease,ease); }

@media (prefers-reduced-motion: reduce){
  /* Colour still responds; only the travel is dropped. */
  .wpr-btn,.wpr-card,.wpr-quote,.wpr-plan,.wpr-service,.wpr-step,.wpr-stat,
  .wpr-cat,.wpr-feat,.wpr-flow__step,.wpr-choice,.wpr-task,.wpr-related__card{ transition-duration:0.01ms !important; }
  :is(.wpr-card,.wpr-service,.wpr-step,.wpr-stat,.wpr-plan,.wpr-quote,.wpr-cat,
      .wpr-feat,.wpr-flow__step,.wpr-choice,.wpr-task,.wpr-related__card):hover,
  .wpr-btn--primary:hover{ transform:none !important; }
  .wpr-card__thumb img{ transition:none; }
  .wpr-card:hover .wpr-card__thumb img{ transform:none; }
}

/* ---- Scroll reveal -------------------------------------------------------
 * "Glide": the fade and the travel run on DIFFERENT clocks. Opacity finishes at
 * 55% of the duration while the element is still moving, so a card is readable
 * before it settles — that offset is what reads as soft rather than crisp. Both
 * channels animating in lockstep is what makes a reveal feel mechanical.
 *
 * The .wpr-reveal class is added by assets/js/theme.js, never by PHP, and only
 * to elements that start BELOW the fold. Three consequences worth keeping:
 *   - no JavaScript, no hidden content (nothing is ever styled away serverside)
 *   - above-the-fold content is untouched, so LCP is unaffected
 *   - the block editor never sees it, since theme.js does not run in the canvas
 *
 * Retune here; the stagger between siblings lives in theme.js.
 */
:root{
  --wpr-reveal-dur:1200ms;                       /* travel */
  --wpr-reveal-fade:660ms;                       /* 55% of travel */
  --wpr-reveal-dist:114px;
  --wpr-reveal-ease:cubic-bezier(.22,1,.36,1);   /* ease-out-quint */
  --wpr-reveal-fade-ease:cubic-bezier(.33,0,.5,1);
}

.wpr-reveal{
  opacity:0;
  /* The animation TYPE is these two variables and nothing else. Customizer
     settings redefine them (see wpr_layout_css); the fallbacks here are the
     shipped "slide up" behaviour, so the default emits no CSS at all. */
  transform:var(--wpr-reveal-tf, translateY(var(--wpr-reveal-dist)));
  filter:var(--wpr-reveal-filter, none);
  transition:
    opacity   var(--wpr-reveal-fade) var(--wpr-reveal-fade-ease),
    transform var(--wpr-reveal-dur)  var(--wpr-reveal-ease),
    filter    var(--wpr-reveal-dur)  var(--wpr-reveal-ease);
}
.wpr-reveal.is-in{ opacity:1; transform:none; filter:none; }

/* Per-word heading reveal (theme.js splits the text; see the wpr-words body
   class). inline-block is what makes transform apply to a word at all, and the
   travel is in em so it scales with the heading rather than fighting it. */
.wpr-words-split .wpr-word{
  display:inline-block;
  opacity:0;
  transform:translateY(.45em);
  transition:
    opacity   var(--wpr-reveal-fade) var(--wpr-reveal-fade-ease),
    transform var(--wpr-reveal-dur)  var(--wpr-reveal-ease);
}
.wpr-words-split.is-in .wpr-word{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .wpr-words-split .wpr-word{ opacity:1; transform:none; transition:none; }
}

@media (prefers-reduced-motion: reduce){
  /* theme.js bails out before adding the class at all; this is the backstop
     for anyone who flips the OS setting after the page has loaded. */
  .wpr-reveal{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ============================================================
   LOGO WALL · MEDIA + TEXT · BEFORE / AFTER
   Three blocks added to fill gaps the templates kept hand-rolling.
   Tokens only, so every palette and the Customizer overrides apply.
   ============================================================ */

/* ---- logo wall ----
   auto-fit rather than a fixed count so a half-full last row centres itself
   instead of stranding one mark on the left. */
.wpr-logos{ display:grid; gap:clamp(20px,3vw,40px);
  grid-template-columns:repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  align-items:center; justify-items:center; }
.wpr-logos__item{ display:inline-flex; align-items:center; justify-content:center;
  width:100%; min-height:56px;
  transition:transform var(--wpr-hover-dur,180ms) var(--wpr-hover-ease,ease); }
.wpr-logos__img{ max-width:100%; max-height:46px; width:auto; height:auto; object-fit:contain; }
/* Mismatched brand colours fight the page, so the wall is calmed by default
   and each mark returns to full colour on hover. */
.wpr-logos--mono .wpr-logos__img{ filter:grayscale(1); opacity:.55;
  transition:filter var(--wpr-hover-dur,180ms) var(--wpr-hover-ease,ease),
             opacity var(--wpr-hover-dur,180ms) var(--wpr-hover-ease,ease); }
@media (hover:hover){
  .wpr-logos--mono .wpr-logos__item:hover .wpr-logos__img{ filter:grayscale(0); opacity:1; }
  /* The lift is on every mark, linked or not — same reasoning as the table-row
     hover: on a dense wall it is a scanning aid, not a promise of a click. */
  .wpr-logos__item:hover{ transform:translateY(var(--wpr-hover-lift,-2px)); }
}
@media (prefers-reduced-motion: reduce){
  .wpr-logos--mono .wpr-logos__img{ transition:none; }
  .wpr-logos__item{ transition:none; }
  .wpr-logos__item:hover{ transform:none; }
}

/* ---- media + text ---- */
.wpr-mediatext{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px); align-items:center; }
/* Source order stays copy-first so the reading order and the tab order match;
   only the visual columns swap. */
.wpr-mediatext--flip .wpr-mediatext__copy{ order:2; }
/* Stacked variants: one column at every width. 'above' reuses the same
   order trick, so the media is painted first while the copy still comes
   first in the DOM. 'below' is simply the natural order. */
.wpr-mediatext--above,
.wpr-mediatext--below{ grid-template-columns:1fr; align-items:start; }
.wpr-mediatext--above .wpr-mediatext__copy{ order:2; }
.wpr-mediatext__media{ min-width:0; }
.wpr-mediatext__img,
.wpr-mediatext__frame{ width:100%; height:auto; display:block; border-radius:22px;
  border:1px solid var(--line); background:var(--ink2); }
.wpr-mediatext__frame{ aspect-ratio:16 / 9; border:0; }
.wpr-mediatext__copy .wpr-actions{ margin-top:28px; }
/* Hover lives on the media half only — hovering a paragraph should not move a
   photo. When the half holds an <img>, the wrapper takes over the frame (radius,
   border, background) so the zoom is clipped by that rounded box instead of
   pushing the image's own corners past it. A <video> or <iframe> never scales:
   it owns its controls, and a control surface that moves under the pointer is
   hostile. */
.wpr-mediatext__media:has(> .wpr-mediatext__img){
  border-radius:22px; overflow:clip;
  border:1px solid var(--line); background:var(--ink2);
  transition:border-color var(--wpr-hover-dur,180ms) var(--wpr-hover-ease,ease),
             box-shadow   var(--wpr-hover-dur,180ms) var(--wpr-hover-ease,ease); }
.wpr-mediatext__media:has(> .wpr-mediatext__img) > .wpr-mediatext__img{
  border:0; border-radius:0;
  transition:transform 460ms var(--wpr-hover-ease,ease); }
.wpr-mediatext__frame{ transition:box-shadow var(--wpr-hover-dur,180ms) var(--wpr-hover-ease,ease); }
@media (hover:hover){
  .wpr-mediatext__media:has(> .wpr-mediatext__img):hover{
    border-color:var(--wpr-hover-ring); box-shadow:var(--wpr-hover-sh-lg); }
  .wpr-mediatext__media:hover > .wpr-mediatext__img{ transform:scale(1.045); }
  .wpr-mediatext__media:hover > .wpr-mediatext__frame{ box-shadow:var(--wpr-hover-sh-lg); }
}
@media (prefers-reduced-motion: reduce){
  .wpr-mediatext__media:has(> .wpr-mediatext__img) > .wpr-mediatext__img,
  .wpr-mediatext__frame{ transition:none; }
  .wpr-mediatext__media:hover > .wpr-mediatext__img{ transform:none; }
}
@media (max-width:860px){
  .wpr-mediatext{ grid-template-columns:1fr; }
  .wpr-mediatext--flip .wpr-mediatext__copy{ order:0; }
  /* 'above' is a deliberate choice, not a column artefact, so it holds. */
  .wpr-mediatext--above .wpr-mediatext__copy{ order:2; }
}

/* ---- before / after ----
   The reveal is one custom property, --wpr-ba-pos, so the range input alone can
   drive it; before-after.js only adds pointer dragging on top. */
.wpr-ba{ position:relative; border-radius:22px; overflow:hidden;
  border:1px solid var(--line); background:var(--ink2);
  touch-action:pan-y; user-select:none;
  transition:border-color var(--wpr-hover-dur,180ms) var(--wpr-hover-ease,ease); }
.wpr-ba__img{ display:block; width:100%; height:auto; }
.wpr-ba__clip{ position:absolute; inset:0; overflow:hidden;
  width:var(--wpr-ba-pos,50%); }
/* The clipped image must not shrink with its container, or the two halves
   would show different crops of the same photo. */
.wpr-ba__clip .wpr-ba__img{ position:absolute; top:0; left:0; height:100%;
  width:auto; min-width:100%; max-width:none; object-fit:cover; }
.wpr-ba__line{ position:absolute; top:0; bottom:0; left:var(--wpr-ba-pos,50%);
  width:2px; background:var(--ink2); transform:translateX(-1px); pointer-events:none; }
.wpr-ba__grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:999px; background:var(--ink2);
  border:1px solid var(--line); color:var(--accent-dk);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.35);
  transition:transform   var(--wpr-hover-dur,180ms) var(--wpr-hover-ease,ease),
             border-color var(--wpr-hover-dur,180ms) var(--wpr-hover-ease,ease),
             box-shadow   var(--wpr-hover-dur,180ms) var(--wpr-hover-ease,ease); }
/* Nothing about a static grip says "drag me", so it grows the moment the
   pointer is anywhere over the image. The line and grip are pointer-events:none,
   so the hover has to be read off .wpr-ba rather than the grip itself.
   :active and :focus-visible share the state, so the keyboard user gets the
   same "I have hold of it" feedback as the mouse user. */
.wpr-ba:has(.wpr-ba__range:active) .wpr-ba__grip,
.wpr-ba:has(.wpr-ba__range:focus-visible) .wpr-ba__grip{
  transform:translate(-50%,-50%) scale(1.12); border-color:var(--accent);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.42); }
@media (hover:hover){
  .wpr-ba:hover{ border-color:var(--wpr-hover-ring); }
  .wpr-ba:hover .wpr-ba__grip{
    transform:translate(-50%,-50%) scale(1.12); border-color:var(--accent);
    box-shadow:0 10px 26px -10px rgba(0,0,0,.42); }
}
@media (prefers-reduced-motion: reduce){
  .wpr-ba, .wpr-ba__grip{ transition:none; }
  .wpr-ba:hover .wpr-ba__grip,
  .wpr-ba:has(.wpr-ba__range:active) .wpr-ba__grip,
  .wpr-ba:has(.wpr-ba__range:focus-visible) .wpr-ba__grip{ transform:translate(-50%,-50%); }
}
.wpr-ba__tag{ position:absolute; bottom:14px; padding:6px 13px; border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:.03em;
  background:color-mix(in srgb, var(--cream) 78%, transparent); color:var(--ink);
  pointer-events:none; }
.wpr-ba__tag--before{ left:14px; }
.wpr-ba__tag--after{ right:14px; }
/* The range is the real control: full-bleed and invisible, so dragging
   anywhere on the image works and the block stays keyboard operable. */
.wpr-ba__range{ position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize; appearance:none; background:transparent; }
.wpr-ba__range:focus-visible{ outline:none; }
.wpr-ba:has(.wpr-ba__range:focus-visible){ outline:2px solid var(--accent); outline-offset:3px; }

/* ---- lead form block ----
   Reuses .wpr-field / .wpr-input / .wpr-textarea from the Get Started wizard;
   only the pieces the block adds live here. */
.wpr-form__hp{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; }
.wpr-form__error{ display:none; margin:4px 0 0; padding:13px 16px; border-radius:12px;
  font-size:14px; line-height:1.5; color:var(--accent2-dk);
  background:color-mix(in srgb, var(--accent2) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent2) 30%, var(--line)); }
.wpr-form__error.is-visible{ display:block; }
.wpr-form__done{ max-width:660px; margin:0 auto; text-align:center; }
.wpr-form__done:focus{ outline:none; }

/* ---- author byline ----
   A card rather than a bare row: the byline has to read as a distinct trust
   block, not as another paragraph of the article it sits under. */
.wpr-author{ display:flex; gap:22px; align-items:flex-start; max-width:760px; margin:0 auto;
  padding:26px 28px; border:1px solid var(--line); border-radius:20px; background:var(--ink2); }
.wpr-author__av{ flex-shrink:0; }
.wpr-author__img,
.wpr-author__disc{ width:72px; height:72px; font-size:23px; }
.wpr-author__img{ object-fit:cover; }
.wpr-author__kicker{ margin-bottom:9px; }
.wpr-author__name{ font-family:var(--sans); font-size:19px; font-weight:700; color:var(--cream); }
/* a{color:inherit} is set site-wide, so the name link needs its own colour */
.wpr-author__name a{ color:var(--accent-dk); text-decoration:underline; }
.wpr-author__role{ font-size:15px; font-weight:600; color:var(--text); margin-top:3px; }
.wpr-author__credits{ font-size:14px; color:var(--dim); margin-top:3px; }
.wpr-author__bio{ margin:13px 0 0; font-size:15px; line-height:1.65; color:var(--dim); }
.wpr-author__links{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; }
/* --accent is 3.6:1 on this background and fails AA, so profile links use
   --accent-dk (4.9:1) and stay underlined — colour alone would fail 1.4.1. */
.wpr-author__link{ font-size:14px; font-weight:600; color:var(--accent-dk); text-decoration:underline; }
.wpr-author__meta{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:15px;
  padding-top:14px; border-top:1px solid var(--line); font-size:13.5px; color:var(--dimmer); }
@media (max-width:620px){
  .wpr-author{ flex-direction:column; gap:16px; padding:22px; }
  .wpr-author__img, .wpr-author__disc{ width:60px; height:60px; font-size:20px; }
}

/* ============================================================
   CORE WORDPRESS BLOCKS & COMPONENTS
   ============================================================
   The theme styles its own wpr/* sections and, inside .wpr-prose, the bare
   elements (blockquote, pre, ul, img, figure, h2/h3). What it never covered was
   core Gutenberg's own blocks, the classic-editor alignment classes, comments,
   and the block widgets — so a site built with stock blocks fell back to
   browser defaults or, with wp-block-styles off, to nothing at all.

   Everything below is token-only, so it follows the active palette and font
   pair like the rest of the system. Rules target .wp-block-* globally rather
   than only inside .wpr-prose, because core blocks also appear inside the
   theme's own section blocks on block-built pages.
   ------------------------------------------------------------ */

/* ---- alignment (block + classic editor) ---- */
.alignleft{ float:left; margin:.4em 1.6em 1.2em 0; }
.alignright{ float:right; margin:.4em 0 1.2em 1.6em; }
.aligncenter{ margin-left:auto; margin-right:auto; display:block; }
figure.alignleft, figure.alignright{ max-width:min(50%,340px); }
.wpr-prose > .alignleft, .wpr-prose > .alignright{ margin-top:.4em; }
/* Classic-editor captioned images. */
.wp-caption{ max-width:100%; }
.wp-caption img{ border-radius:12px; height:auto; }
.wp-caption-text{ font-size:13px; color:var(--dimmer); margin-top:8px; text-align:center; }
/* Floats must not escape their own section. */
.wpr-prose::after, .entry-content::after{ content:""; display:table; clear:both; }

/* ---- tables ---- */
.wpr-prose table, .wp-block-table table{
  width:100%; border-collapse:collapse; font-size:calc(var(--ts,1) * 16px);
  background:var(--ink2); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.wp-block-table{ overflow-x:auto; }
.wpr-prose th, .wp-block-table th{
  text-align:left; font-family:var(--sans); font-weight:700; color:var(--cream);
  background:var(--ink3); padding:13px 16px; border-bottom:1px solid var(--line);
}
.wpr-prose td, .wp-block-table td{ padding:13px 16px; border-bottom:1px solid var(--line); color:var(--text); }
.wpr-prose tr:last-child td, .wp-block-table tr:last-child td{ border-bottom:none; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd){ background:var(--ink3); }
.wp-block-table figcaption{ font-size:13px; color:var(--dimmer); margin-top:8px; text-align:center; }

/* ---- buttons ----
   `.wpr-prose a` (0,2,0) sets colour and underline, so a bare
   `.wp-block-button__link` at (0,1,0) loses both and the pill renders with an
   underlined accent label. Qualify with `.wpr-prose a`, the same fix wpr.css
   already applies to .wpr-cta-link. */
.wpr-prose a.wp-block-button__link,
.wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:calc(var(--ts,1) * 16px);
  padding:16px 28px; border-radius:999px; border:1px solid transparent;
  background:var(--accent2); color:var(--on-accent2); text-decoration:none; line-height:1;
  transition:background .15s, box-shadow .2s;
  box-shadow:0 8px 18px -12px var(--accent2-dk);
}
.wpr-prose a.wp-block-button__link:hover,
.wp-block-button__link:hover{ background:var(--accent2-dk); color:var(--on-accent2); text-decoration:none; }
.wpr-prose .wp-block-button.is-style-outline a.wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline{
  background:transparent; color:var(--cream); border-color:var(--line); box-shadow:none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{ border-color:var(--cream); background:transparent; color:var(--cream); }
.wp-block-buttons{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---- galleries ---- */
.wp-block-gallery.has-nested-images{ display:flex; flex-wrap:wrap; gap:14px; }
.wp-block-gallery.has-nested-images figure.wp-block-image{ margin:0; }
.wp-block-gallery.has-nested-images figure.wp-block-image img{ border-radius:12px; }
.wp-block-gallery figcaption{ font-size:13px; color:var(--dimmer); }

/* ---- columns, group, media+text ---- */
.wp-block-columns{ display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,34px); }
.wp-block-column{ flex:1 1 0; min-width:0; }
@media (max-width:781px){ .wp-block-columns:not(.is-not-stacked-on-mobile){ flex-direction:column; } }
.wp-block-media-text__media img{ border-radius:14px; }
.wp-block-group.has-background{ padding:clamp(22px,3vw,34px); border-radius:20px; }

/* ---- separator ---- */
.wpr-prose hr, .wp-block-separator{
  border:none; border-top:1px solid var(--line); margin-block:2em; height:0;
}
.wp-block-separator.is-style-dots{ border-top:none; text-align:center; }
.wp-block-separator.is-style-wide{ border-top-width:1px; }

/* ---- quotes ---- */
.wp-block-quote cite, .wpr-prose cite{
  display:block; margin-top:10px; font-style:normal; font-size:14px;
  font-weight:600; color:var(--dimmer);
}
.wp-block-pullquote{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(24px,3vw,36px) 0; text-align:center;
}
.wp-block-pullquote blockquote{ border:none; padding:0; margin:0; font-style:normal; }
.wp-block-pullquote p{
  font-family:var(--serif); color:var(--cream);
  font-size:calc(var(--ts,1) * clamp(21px,2.6vw,28px)); line-height:1.35;
}

/* ---- code, verse, preformatted ---- */
.wp-block-code, .wp-block-preformatted, .wp-block-verse{
  background:var(--ink3); padding:18px; border-radius:12px; overflow:auto;
  font-size:calc(var(--ts,1) * 15px);
}
.wp-block-verse{ font-family:var(--serif); }

/* ---- embeds, video, audio, file ---- */
.wp-block-embed figcaption, .wp-block-video figcaption, .wp-block-audio figcaption{
  font-size:13px; color:var(--dimmer); margin-top:8px; text-align:center;
}
.wp-block-embed iframe, .wp-block-video video{ border-radius:14px; display:block; width:100%; }
.wp-block-audio audio{ width:100%; }
.wp-block-file{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--ink2); border:1px solid var(--line); border-radius:14px; padding:16px 18px;
}
.wpr-prose a.wp-block-file__button,
.wp-block-file__button{
  background:var(--accent2); color:var(--on-accent2); border-radius:999px;
  padding:9px 18px; font-weight:600; text-decoration:none; font-size:14px;
}

/* ---- details / accordion ---- */
.wp-block-details{
  background:var(--ink2); border:1px solid var(--line); border-radius:14px; padding:18px 20px;
}
.wp-block-details summary{
  cursor:pointer; font-family:var(--sans); font-weight:600; color:var(--cream);
}
.wp-block-details summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---- cover ---- */
.wp-block-cover{ border-radius:20px; overflow:hidden; }
.wp-block-cover .wp-block-cover__inner-container{ color:inherit; }

/* ---- misc inline ---- */
.wpr-prose kbd{ background:var(--ink3); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:.85em; }
.wpr-prose mark{ background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--cream); padding:0 3px; border-radius:3px; }
.wpr-prose dt{ font-weight:700; color:var(--cream); margin-top:calc(var(--bsp,1) * 1em); }
.wpr-prose dd{ margin-left:0; color:var(--dim); }
.wpr-prose abbr[title]{ text-decoration-style:dotted; }
.wp-block-footnotes{ font-size:calc(var(--ts,1) * 15px); color:var(--dim); }

/* ---- password-protected posts ---- */
.post-password-form{
  background:var(--ink2); border:1px solid var(--line); border-radius:18px;
  padding:clamp(22px,3vw,30px);
}
.post-password-form label{ display:block; font-weight:600; color:var(--cream); font-size:15px; }
.post-password-form input[type="password"]{
  width:100%; margin-top:8px; padding:14px 16px; border-radius:14px;
  border:1px solid var(--line); background:var(--ink); color:var(--text);
  font-family:var(--sans); font-size:15px;
}
.post-password-form input[type="password"]:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.post-password-form input[type="submit"]{
  margin-top:14px; padding:14px 26px; border:none; border-radius:999px;
  background:var(--accent2); color:var(--on-accent2); font-weight:600; cursor:pointer;
  font-family:var(--sans); font-size:15px;
}

/* ---- block widgets ---- */
.wp-block-latest-posts, .wp-block-categories, .wp-block-archives,
.wp-block-page-list, .wp-block-latest-comments, .wp-block-rss{
  list-style:none; padding-left:0; margin:0;
}
.wp-block-latest-posts li, .wp-block-categories li, .wp-block-archives li,
.wp-block-page-list li, .wp-block-rss li{
  margin-top:.5em; padding-bottom:.5em; border-bottom:1px solid var(--line);
}
.wp-block-latest-posts__post-date, .wp-block-latest-comments__comment-date{
  font-size:13px; color:var(--dimmer); display:block;
}
.wp-block-tag-cloud a{
  display:inline-block; margin:0 6px 6px 0; padding:6px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--ink2); color:var(--text);
  font-size:14px !important; text-decoration:none; font-weight:600;
}
.wp-block-tag-cloud a:hover{ border-color:var(--accent); color:var(--accent-dk); }
.wp-block-calendar table{ font-size:14px; }
.wp-block-calendar caption{ color:var(--cream); font-weight:600; padding-bottom:8px; }
.wp-block-search .wp-block-search__input{
  padding:13px 16px; border-radius:12px; border:1px solid var(--line);
  background:var(--ink2); color:var(--text); font-family:var(--sans); font-size:15px;
}
.wp-block-search .wp-block-search__button{
  padding:13px 22px; border-radius:999px; border:none;
  background:var(--accent2); color:var(--on-accent2); font-weight:600; cursor:pointer;
}

/* ---- comments ----
   The theme shipped no comments.php at all, so discussion simply never
   rendered on posts. Template added; this is its styling. */
.wpr-comments{ margin-top:clamp(44px,6vw,68px); }
.wpr-comments__title{
  font-family:var(--serif); font-weight:400; color:var(--cream);
  font-size:calc(var(--ts,1) * 26px); margin:0 0 26px;
}
.wpr-comments ol.comment-list{ list-style:none; margin:0; padding:0; }
.wpr-comments ol.children{ list-style:none; margin:18px 0 0; padding-left:clamp(16px,3vw,34px); }
.wpr-comments li.comment{ margin-bottom:18px; }
.wpr-comments .comment-body{
  background:var(--ink2); border:1px solid var(--line); border-radius:18px;
  padding:clamp(18px,2.4vw,24px);
}
.wpr-comments .comment-meta{ display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.wpr-comments .comment-author img{ border-radius:999px; }
.wpr-comments .comment-author .fn{ font-weight:700; color:var(--cream); font-style:normal; }
.wpr-comments .comment-metadata, .wpr-comments .comment-metadata a{
  font-size:13px; color:var(--dimmer); text-decoration:none;
}
.wpr-comments .comment-content{ color:var(--text); font-size:calc(var(--ts,1) * 17px); line-height:1.65; }
.wpr-comments .comment-content > * + *{ margin-top:.9em; }
.wpr-comments .comment-awaiting-moderation{ font-size:14px; color:var(--dimmer); font-style:italic; }
.wpr-comments .reply a{
  display:inline-block; margin-top:12px; font-size:14px; font-weight:600;
  color:var(--accent-dk); text-decoration:underline;
}
.wpr-comments .bypostauthor > .comment-body{ border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); }
.wpr-comments .comment-respond{ margin-top:34px; }
.wpr-comments .comment-reply-title{
  font-family:var(--serif); font-weight:400; color:var(--cream);
  font-size:calc(var(--ts,1) * 22px); margin:0 0 6px;
}
.wpr-comments .comment-form{ display:grid; gap:16px; }
.wpr-comments .comment-form p{ margin:0; }
.wpr-comments .comment-form label{ display:block; font-weight:600; color:var(--cream); font-size:15px; margin-bottom:6px; }
.wpr-comments .comment-form input[type="text"],
.wpr-comments .comment-form input[type="email"],
.wpr-comments .comment-form input[type="url"],
.wpr-comments .comment-form textarea{
  width:100%; padding:14px 16px; border-radius:14px; border:1px solid var(--line);
  background:var(--ink); color:var(--text); font-family:var(--sans); font-size:15px;
}
.wpr-comments .comment-form textarea{ min-height:140px; resize:vertical; }
.wpr-comments .comment-form input:focus, .wpr-comments .comment-form textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.wpr-comments .comment-form .form-submit{ margin:0; }
.wpr-comments .comment-form input[type="submit"]{
  padding:16px 28px; border:none; border-radius:999px;
  background:var(--accent2); color:var(--on-accent2);
  font-family:var(--sans); font-weight:600; font-size:calc(var(--ts,1) * 16px); cursor:pointer;
}
.wpr-comments .comment-form-cookies-consent{ display:flex; align-items:center; gap:9px; }
.wpr-comments .comment-form-cookies-consent label{ margin:0; font-weight:400; color:var(--dim); font-size:14px; }
.wpr-comments .comment-notes, .wpr-comments .logged-in-as{ font-size:14px; color:var(--dimmer); }
.wpr-comments .no-comments{ color:var(--dimmer); font-size:15px; }
.wpr-comments .comment-nav{ display:flex; gap:16px; margin-top:20px; font-weight:600; }
@media (max-width:620px){
  .wpr-comments ol.children{ padding-left:14px; }
}

/* ==========================================================================
   BACKGROUND TREATMENTS
   ==========================================================================
   Three families are painted through custom properties rather than through a
   selector list in PHP, because the list belongs next to the rules it applies
   to: change which elements are cards here and the treatment follows, with no
   second copy in inc/backgrounds.php to fall out of step.

   Every property falls back to the value the element already had, so this
   whole block is inert until the Customizer sets one. Longhands, and last in
   the file, so they layer over the `background:` shorthands above rather than
   replacing the colour underneath.

   Excluded from "cards" deliberately: .wpr-foot and .wpr-section--alt paint
   themselves (they are their own families), and the search field, the 2px
   thread divider and the 42px avatar are also filled with --ink2 but are not
   surfaces anyone means when they say "cards".                              */

.wpr-section--alt{
  background-image:var(--alt-fill, none);
  background-size:var(--alt-fill-size, auto);
  background-repeat:var(--alt-fill-repeat, repeat);
  background-position:var(--alt-fill-pos, 0 0);
}

.wpr-card, .wpr-cat, .wpr-choice, .wpr-compare, .wpr-ctable, .wpr-feat,
.wpr-flow__step, .wpr-industries, .wpr-nav__sub, .wpr-plan--feature,
.wpr-related, .wpr-step, .wpr-task, .wpr-thread, .wpr-trust, .wpr-wizard__card{
  background-image:var(--card-fill, none);
  background-size:var(--card-fill-size, auto);
  background-repeat:var(--card-fill-repeat, repeat);
  background-position:var(--card-fill-pos, 0 0);
}

/* The primary-button family: every rule below is background:var(--accent2)
   with color:var(--on-accent2). --btn-label is set only when a gradient's
   second stop would strand that label. */
.wpr-btn--primary, .wpr-plan__badge, .search-form .search-submit,
.wpcf7-form .wpcf7-submit, .wpr-prose a.wp-block-file__button,
.wp-block-file__button, .post-password-form input[type="submit"],
.wp-block-search .wp-block-search__button,
.wpr-comments .comment-form input[type="submit"]{
  background-image:var(--btn-fill, none);
  color:var(--btn-label, var(--on-accent2));
}

.wpr-btn--primary:hover{ background-image:var(--btn-fill-hover, var(--btn-fill, none)); }

/* ============================================================
   SVG HOVER ANIMATION
   ============================================================
   Every icon the theme draws is a 24x24 stroke path with no fill, and that is
   the one shape language that can redraw itself: give a path pathLength="1"
   and a single stroke-dashoffset rule draws a four-point tick and a
   nine-subpath asterisk at the same rate, with no per-icon geometry anywhere.
   wpr_icon() adds that attribute and a data-icon slug ONLY while a treatment
   is switched on, so every selector below matches nothing at all on a site
   that has this off — the block is inert rather than overridden.

   The trigger is the CARD, not the icon. Icons here are 15-26px; asking a
   visitor to land a pointer on one is asking for an animation nobody ever
   sees. It also matches the hover system above, which already warms an icon
   well when the card around it is hovered.

   Body classes decide what runs:
     .wpr-svgh--draw|semantic|transform|both   which treatment
     .wpr-svgh-icons|chrome|media|logos        which surfaces, independently

   Drawing runs on the icon's CHILDREN (stroke properties) and character motion
   on the <svg> ITSELF (transform), which is what lets "both" compose. Put them
   on the same element and one silently wins: animation is a single property,
   so the later rule replaces the earlier outright rather than adding to it.
   ============================================================ */
:root{
  --wpr-svgh-dur:600ms;   /* the draw */
  --wpr-svgh-move:520ms;  /* the character motion */
  --wpr-svgh-ease:cubic-bezier(.65,0,.35,1);
  --wpr-svgh-scale:1.14;
  --wpr-svgh-stroke:2.1;
  --wpr-svgh-frame:620ms;
}

/* stroke-dasharray returns to `none` in the last percent rather than staying
   at 1. It cannot interpolate to a keyword, so that step is a discrete flip —
   invisible at 99%, and it leaves the resting icon with no dash pattern of its
   own for anything else to trip over. */
@keyframes wpr-svgh-draw{
  from{ stroke-dasharray:1; stroke-dashoffset:1; }
  99% { stroke-dasharray:1; stroke-dashoffset:0; }
  to  { stroke-dasharray:none; stroke-dashoffset:0; }
}

@keyframes wpr-svgh-slide { 0%{transform:none} 45%{transform:translateX(4px)} 100%{transform:none} }
@keyframes wpr-svgh-nudge { 0%{transform:none} 40%{transform:translateX(3px)} 100%{transform:none} }
@keyframes wpr-svgh-spin  { to{ transform:rotate(360deg); } }
@keyframes wpr-svgh-tick  { 0%{transform:none} 30%{transform:rotate(9deg)} 65%{transform:rotate(-5deg)} 100%{transform:none} }
@keyframes wpr-svgh-pop   { 0%{transform:none} 35%{transform:scale(1.2)} 70%{transform:scale(.97)} 100%{transform:none} }
@keyframes wpr-svgh-flash { 0%{transform:none;opacity:1} 25%{transform:scale(1.16);opacity:.4} 50%{transform:scale(1.04);opacity:1} 75%{opacity:.6} 100%{transform:none;opacity:1} }
@keyframes wpr-svgh-shake { 0%,100%{transform:none} 20%{transform:translateX(-2.5px)} 40%{transform:translateX(2.5px)} 60%{transform:translateX(-1.5px)} 80%{transform:translateX(1.5px)} }
@keyframes wpr-svgh-blink { 0%,100%{transform:none} 45%{transform:scaleY(.1)} }
@keyframes wpr-svgh-bob   { 0%{transform:none} 40%{transform:translateY(3px)} 100%{transform:none} }
@keyframes wpr-svgh-wiggle{ 0%,100%{transform:none} 25%{transform:rotate(-12deg)} 60%{transform:rotate(9deg)} }
@keyframes wpr-svgh-zoom  { 0%{transform:none} 40%{transform:scale(1.18) rotate(-8deg)} 100%{transform:none} }

/* ---- the character map ---------------------------------------------------
   Written once, as a custom property each icon carries, and read by every
   surface below through animation-name: var(). The alternative was repeating
   this list of sixty slugs inside each surface's selector, which is how a
   stylesheet ends up with a map nobody dares edit. An icon the map does not
   name still moves — the default is a pop, so nothing sits dead. */
.wpr-svgh svg[data-icon]{ --wpr-svgh-anim:wpr-svgh-pop; }
.wpr-svgh svg:is([data-icon="arrow-right"],[data-icon="trending-up"],[data-icon="trending-up-alt"],[data-icon="chart"],[data-icon="link"]){ --wpr-svgh-anim:wpr-svgh-slide; }
.wpr-svgh svg:is([data-icon="cart"],[data-icon="chat"],[data-icon="megaphone"],[data-icon="api"],[data-icon="wallet"]){ --wpr-svgh-anim:wpr-svgh-nudge; }
.wpr-svgh svg:is([data-icon="refresh"],[data-icon="rotate"]){ --wpr-svgh-anim:wpr-svgh-spin; }
.wpr-svgh svg:is([data-icon="clock"],[data-icon="clock-alt"],[data-icon="gauge"]){ --wpr-svgh-anim:wpr-svgh-tick; }
.wpr-svgh svg:is([data-icon="bolt"],[data-icon="bolt-alt"],[data-icon="sparkle"],[data-icon="asterisk"],[data-icon="dollar"]){ --wpr-svgh-anim:wpr-svgh-flash; }
.wpr-svgh svg:is([data-icon="alert"],[data-icon="alert-alt"],[data-icon="alert-alt2"],[data-icon="shield-warn"],[data-icon="close"]){ --wpr-svgh-anim:wpr-svgh-shake; }
.wpr-svgh svg:is([data-icon="eye"],[data-icon="eye-off"],[data-icon="monitor"],[data-icon="browser"]){ --wpr-svgh-anim:wpr-svgh-blink; }
.wpr-svgh svg:is([data-icon="chevron-down"],[data-icon="list"],[data-icon="menu"],[data-icon="menu-alt"],[data-icon="plus"],[data-icon="database"],[data-icon="server"]){ --wpr-svgh-anim:wpr-svgh-bob; }
.wpr-svgh svg:is([data-icon="wrench"],[data-icon="brush"],[data-icon="pencil"],[data-icon="code"],[data-icon="brackets"]){ --wpr-svgh-anim:wpr-svgh-wiggle; }
.wpr-svgh svg:is([data-icon="search"],[data-icon="cube"],[data-icon="package"]){ --wpr-svgh-anim:wpr-svgh-zoom; }

/* Chrome that already animates on its own. The caret rotates 180deg when its
   dropdown opens; a second rule setting transform on the same element would
   win for half a second and then hand the caret back mid-turn. It draws, and
   that is all it does. */
.wpr-more__arrow{ display:inline-flex; align-items:center; margin-left:7px; vertical-align:-2px; }
.wpr-more__arrow svg{ width:15px; height:15px; }
.wpr-faq__plus svg{ width:19px; height:19px; }

@media (hover:hover){
  /* ---- surface: icons in cards and lists ---------------------------- */
  .wpr-svgh-icons:is(.wpr-svgh--draw,.wpr-svgh--both)
    :is(.wpr-card,.wpr-service,.wpr-step,.wpr-stat,.wpr-plan,.wpr-quote,.wpr-cat,
        .wpr-feat,.wpr-flow__step,.wpr-choice,.wpr-task,.wpr-related__card,
        .wpr-contact__point,.wpr-check,.wpr-fact,.wpr-notice,.wpr-thread__foot,
        .wpr-tasklist li):hover svg[data-icon] > :is(path,circle),
  .wpr-svgh-chrome:is(.wpr-svgh--draw,.wpr-svgh--both)
    :is(.wpr-btn,.wpr-nav__toggle,.wpr-has-sub,.wpr-faq__q,.wpr-card__more,
        [data-submenu-toggle]):hover svg[data-icon] > :is(path,circle){
    animation:wpr-svgh-draw var(--wpr-svgh-dur) var(--wpr-svgh-ease);
  }

  /* Grow and thicken. A treatment on its own; never combined, because a scale
     transition and a transform animation on one element fight. */
  .wpr-svgh-icons.wpr-svgh--transform
    :is(.wpr-card,.wpr-service,.wpr-step,.wpr-stat,.wpr-plan,.wpr-quote,.wpr-cat,
        .wpr-feat,.wpr-flow__step,.wpr-choice,.wpr-task,.wpr-related__card,
        .wpr-contact__point,.wpr-check,.wpr-fact,.wpr-notice,.wpr-thread__foot,
        .wpr-tasklist li) svg[data-icon],
  .wpr-svgh-chrome.wpr-svgh--transform
    :is(.wpr-btn,.wpr-nav__toggle,.wpr-faq__q,.wpr-card__more,
        [data-submenu-toggle]) svg[data-icon]:not(.wpr-caret){
    transition:transform var(--wpr-hover-dur,180ms) var(--wpr-hover-ease,ease),
               stroke-width var(--wpr-hover-dur,180ms) var(--wpr-hover-ease,ease);
  }
  .wpr-svgh-icons.wpr-svgh--transform
    :is(.wpr-card,.wpr-service,.wpr-step,.wpr-stat,.wpr-plan,.wpr-quote,.wpr-cat,
        .wpr-feat,.wpr-flow__step,.wpr-choice,.wpr-task,.wpr-related__card,
        .wpr-contact__point,.wpr-check,.wpr-fact,.wpr-notice,.wpr-thread__foot,
        .wpr-tasklist li):hover svg[data-icon],
  .wpr-svgh-chrome.wpr-svgh--transform
    :is(.wpr-btn,.wpr-nav__toggle,.wpr-faq__q,.wpr-card__more,
        [data-submenu-toggle]):hover svg[data-icon]:not(.wpr-caret){
    transform:scale(var(--wpr-svgh-scale));
    stroke-width:var(--wpr-svgh-stroke);
  }

  /* Character motion, from the map above. */
  .wpr-svgh-icons:is(.wpr-svgh--semantic,.wpr-svgh--both)
    :is(.wpr-card,.wpr-service,.wpr-step,.wpr-stat,.wpr-plan,.wpr-quote,.wpr-cat,
        .wpr-feat,.wpr-flow__step,.wpr-choice,.wpr-task,.wpr-related__card,
        .wpr-contact__point,.wpr-check,.wpr-fact,.wpr-notice,.wpr-thread__foot,
        .wpr-tasklist li):hover svg[data-icon],
  .wpr-svgh-chrome:is(.wpr-svgh--semantic,.wpr-svgh--both)
    :is(.wpr-btn,.wpr-nav__toggle,.wpr-faq__q,.wpr-card__more,
        [data-submenu-toggle]):hover svg[data-icon]:not(.wpr-caret){
    animation:var(--wpr-svgh-anim) var(--wpr-svgh-move) var(--wpr-svgh-ease);
  }

  /* ---- surface: images ---------------------------------------------- */
  .wpr-svgh-media :is(.wpr-card,.wpr-related__card,.wpr-mediatext__media):hover
    .wpr-svgh-fx--frame line{ stroke-dashoffset:0; }

  /* ---- surface: logo wall -------------------------------------------- */
  .wpr-svgh-logos .wpr-logos__item:hover .wpr-svgh-fx--rule line{ stroke-dashoffset:0; }
}

/* The two overlays. Both are drawn by the theme alongside the thing they
   decorate, never inside it: a logo or a photograph arrives through <img>, and
   a browser will not let page CSS reach into an image document — an SVG logo
   included. Inset by 9px so the frame clears the 12px corner radius of the box
   that clips it; a frame hugging the edge loses its corners. */
/* Width and height are stated rather than left to `inset`, because an <svg> is
   a replaced element: given left+right and width:auto it keeps its intrinsic
   size and drops the `right` edge, so a frame meant to fit a 16:9 thumbnail
   was drawing itself as a square hanging off the bottom of it.

   overflow:visible so a stroke sitting on the boundary paints its full width
   rather than half of it. The box that clips these — .wpr-card__thumb and the
   media wrapper — still clips, so nothing escapes the card. */
.wpr-svgh-fx{ position:absolute; pointer-events:none; fill:none; overflow:visible; }
.wpr-svgh-fx--frame{ top:9px; left:9px; width:calc(100% - 18px); height:calc(100% - 18px); }
.wpr-svgh-fx--rule{ left:0; bottom:-4px; width:100%; height:2px; }
.wpr-svgh-fx line{ stroke:var(--accent); stroke-width:1.5;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset calc(var(--wpr-svgh-frame) / 4) var(--wpr-svgh-ease); }
/* Corner to corner, a quarter of the run each, so it reads as a frame being
   drawn rather than four edges fading up together. */
.wpr-svgh-fx--frame line:nth-child(2){ transition-delay:calc(var(--wpr-svgh-frame) / 4); }
.wpr-svgh-fx--frame line:nth-child(3){ transition-delay:calc(var(--wpr-svgh-frame) / 2); }
.wpr-svgh-fx--frame line:nth-child(4){ transition-delay:calc(var(--wpr-svgh-frame) * 0.75); }
.wpr-svgh-fx--rule line{ stroke-width:2; transition-duration:420ms; }
.wpr-card__thumb,.wpr-related__thumb,.wpr-logos__item,
.wpr-mediatext__media:has(> .wpr-mediatext__img){ position:relative; }

@media (prefers-reduced-motion: reduce){
  /* Nothing draws and nothing moves. The frame and the rule are hidden rather
     than left drawn: a visitor who asked for less motion should see the page
     the theme ships, not the end state of an animation they never saw run. */
  .wpr-svgh svg[data-icon],
  .wpr-svgh svg[data-icon] > *{
    animation:none !important; transform:none !important; transition:none !important; }
  .wpr-svgh-fx{ display:none; }
}