/* BluePrint Local · WhiteRoom version · 22 Oct 2026
   DNA: the Whiteroom starter template. White rooms, one idea per band, a centred headline over generous air, then a grid of quiet tiles.
   Apple-style system type, hairlines not borders, soft shadows only on raised cards, one accent, pills for actions, "›" links for the quiet ones.
   Light by default; dark follows the device or the header button (data-theme). Fonts stay self-hosted so the CSP is unchanged. */

@font-face{font-family:'BluePrint Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/BPSans-400.woff') format('woff')}
@font-face{font-family:'BluePrint Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/BPSans-600.woff') format('woff')}
@font-face{font-family:'BluePrint Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/BPSans-700.woff') format('woff')}
@font-face{font-family:'BluePrint Sans';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/BPSans-800.woff') format('woff')}

/* ---------- tokens (template) ---------- */
:root{
  --bg:#ffffff; --bg2:#f5f5f7; --card:#ffffff; --ink:#1d1d1f; --ink2:#636368; --ink3:#636368; --line:#d2d2d7; --hair:#e8e8ed;
  --link:#0066cc; --btn:#0066cc; --nav:rgba(255,255,255,.78); --shadow:0 2px 6px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.06);
  --teal:#0d8a8f; --gift:#0f6f5c; --tiledark:#000000; --gold:#8a5f10; --on-c:#fff; --gift-soft:#e6f2ee;
  --c:#3F5FC8; --c-soft:rgba(63,95,200,.12);
  --f-display:"SF Pro Display",-apple-system,BlinkMacSystemFont,'BluePrint Sans',"Helvetica Neue",Arial,sans-serif;
  --f-text:"SF Pro Text",-apple-system,BlinkMacSystemFont,'BluePrint Sans',"Helvetica Neue",Arial,sans-serif;
  --r-l:28px; --r-m:18px; --r-s:12px;
  /* legacy names used by portal.css and older markup */
  --text:var(--ink); --muted:var(--ink2); --t1:var(--bg2); --t2:var(--bg2); --t3:var(--bg2); --t4:var(--bg2); --c1:var(--c); --c2:var(--c); --c3:var(--bg2); --on1:#fff; --on2:#fff; --on3:var(--ink); --r:var(--r-m); --rs:var(--r-s); --bw:1px; --sh:none; --shs:none; --sdark:var(--tiledark); --onsdark:#f5f5f7; --fh:var(--f-display); --fb:var(--f-text); --acc:var(--c); --acct:var(--c);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#000000; --bg2:#101012; --card:#1c1c1e; --ink:#f5f5f7; --ink2:#a1a1a6; --ink3:#8e8e93; --line:#3a3a3c; --hair:#2c2c2e;
  --link:#2997ff; --btn:#0a6ad6; --nav:rgba(22,22,23,.78); --shadow:0 2px 6px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.4); --teal:#3cc8cd; --gift:#38c79f; --tiledark:#1c1c1e; --gold:#e3c169; --on-c:#0b1a3a; --gift-soft:#10211c;
  --c:#8FAAF4; --c-soft:rgba(143,170,244,.14); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#000000; --bg2:#101012; --card:#1c1c1e; --ink:#f5f5f7; --ink2:#a1a1a6; --ink3:#8e8e93; --line:#3a3a3c; --hair:#2c2c2e;
  --link:#2997ff; --btn:#0a6ad6; --nav:rgba(22,22,23,.78); --shadow:0 2px 6px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.4); --teal:#3cc8cd; --gift:#38c79f; --tiledark:#1c1c1e; --gold:#e3c169; --on-c:#0b1a3a; --gift-soft:#10211c;
  --c:#8FAAF4; --c-soft:rgba(143,170,244,.14); color-scheme:dark}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-text);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.015em;font-weight:700;line-height:1.1}
h1 span,h2 span,h3 span{color:inherit}
p{margin:0 0 1em}
.wrap{max-width:1024px;margin:0 auto;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;z-index:100}.skip:focus{left:12px}
.muted{color:var(--ink2)}
.note,.hint{font-size:14px;color:var(--ink2)}
.lead,.lede{font-size:clamp(18px,1.7vw,21px);line-height:1.4;color:var(--ink2);font-family:var(--f-display);font-weight:500;letter-spacing:-.01em}
main>section{padding-block:clamp(64px,9vw,112px)}
main>section:nth-of-type(even):not(.hero):not(.phero):not(.cta-s):not(.invoice){background:var(--bg2)}
main>section.strip,main>section.bundles,main>section.showcase{padding-block:clamp(28px,4vw,44px)}
.sh{display:grid;gap:14px;justify-items:center;text-align:center;margin:0 auto clamp(32px,5vw,52px);max-width:760px}
.sh h2{font-size:clamp(34px,5vw,56px);line-height:1.07;letter-spacing:-.03em}
.sh p{font-size:clamp(17px,1.6vw,21px);color:var(--ink2);max-width:46ch;font-family:var(--f-display);font-weight:500;letter-spacing:-.01em;margin:0}
.sh .tag,.sh .pill{margin-bottom:-4px}
.eyebrow,.kicker{font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--ink2);margin:0}
.tag{display:inline-block;font-size:13px;font-weight:600;color:var(--c);background:var(--c-soft);padding:4px 12px;border-radius:999px}

/* ---------- buttons, links, pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:999px;background:var(--btn);color:#fff;font-size:17px;font-weight:500;border:0;cursor:pointer;font-family:var(--f-text);letter-spacing:-.01em;white-space:normal;text-align:center;line-height:1.2;max-width:100%;height:auto;min-height:44px;padding-block:8px}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn.alt,.btn.ghost{background:transparent;color:var(--link);box-shadow:inset 0 0 0 1px var(--link)}
.btn.alt:hover{background:var(--c-soft);filter:none}
.btn.big{min-height:50px;padding:8px 28px;font-size:18px}
.btn.sm{min-height:36px;padding:6px 16px;font-size:15px}
.btn.yel{background:var(--ink);color:var(--bg)}
.btns{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin:22px 0 0}
.more{font-size:17px;display:inline-flex;align-items:center;gap:4px;color:var(--link);text-decoration:none}
.more::after{content:"›";font-size:1.15em;line-height:1;transform:translateY(-1px)}
.more span{all:unset}
.pill{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--bg2);color:var(--ink2);font-size:12.5px;font-weight:600;white-space:nowrap;letter-spacing:0}
.pill.new,.pill.live,.pill.ok{background:color-mix(in srgb,var(--gift) 14%,transparent);color:var(--gift)}
.pill.held,.pill.wait{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold)}
.pill.intro{background:var(--c-soft);color:var(--c)}
.badge{position:absolute;right:18px;top:18px;background:var(--ink);color:var(--bg);font-style:normal;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;letter-spacing:.02em}

/* ---------- icons ---------- */
.ic{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--c-soft);color:var(--c);--ica:var(--c)}
.ic svg{width:24px;height:24px}
.ic.sm{width:32px;height:32px;border-radius:9px}.ic.sm svg{width:18px;height:18px}
.ic.lg{width:64px;height:64px;border-radius:17px}.ic.lg svg{width:34px;height:34px}
.ic.fi{width:36px;height:36px;border-radius:10px}.ic.fi svg{width:20px;height:20px}
.ic.tick{background:color-mix(in srgb,var(--gift) 14%,transparent);color:var(--gift);--ica:var(--gift)}
.d{fill:var(--ica,currentColor);opacity:.16;stroke:none}
.ic.tick .d{opacity:0}

/* ---------- header (template .gn) ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--nav)}
.draftbar{background:var(--bg2);color:var(--ink2);font-size:12px;font-weight:500;text-align:center;padding:6px 12px;letter-spacing:0}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--nav);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--hair);max-width:none;padding:0}
header.top{display:flex;align-items:center;gap:28px;height:52px;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
@media (min-width:1025px){header.top{padding-left:calc((100% - 1024px)/2 + 22px);padding-right:calc((100% - 1024px)/2 + 22px)}}
.logo-link{display:flex;align-items:center;flex:none}
.logo{height:26px;width:auto;display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo{filter:brightness(0) invert(1)}}
:root[data-theme="dark"] .logo{filter:brightness(0) invert(1)}
.topnav{margin-left:auto}
.topnav ul{list-style:none;margin:0;padding:0;display:flex;gap:24px}
.topnav a{color:var(--ink);opacity:.82;font-size:13px;letter-spacing:-.01em;padding:6px 0;display:inline-flex;align-items:center;min-height:32px}
.topnav a:hover{opacity:1;text-decoration:none}
.topnav a[aria-current]{opacity:1;font-weight:600}
.hright{display:flex;align-items:center;gap:14px;flex:none}
.hlogin{font-size:13px;color:var(--ink);opacity:.82}.hlogin:hover{opacity:1;text-decoration:none}
.hcta{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;background:var(--btn);color:#fff;font-size:13px;font-weight:500}
.hcta:hover{text-decoration:none;filter:brightness(1.06)}
.themebtn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:var(--ink);cursor:pointer;opacity:.8}
.themebtn:hover{opacity:1;background:var(--bg2)}
.themebtn svg{width:17px;height:17px}
.themebtn .i-moon,.themebtn .i-auto{display:none}
html.lt .themebtn .i-sun{display:none}html.lt .themebtn .i-moon{display:block}
/* v1.8.18: in Auto (dark by day, light after sunset) the button shows a half-filled circle; Light and Dark show the sun and moon as before. */
html[data-tmode="auto"] .themebtn .i-sun,html[data-tmode="auto"] .themebtn .i-moon{display:none}html[data-tmode="auto"] .themebtn .i-auto{display:block}
html.theming,html.theming body,html.theming .hero,html.theming header.top,html.theming .pkbar,html.theming .cbar{transition:background-color .6s ease,color .6s ease}
.mmenu{display:none;position:relative}
.mmenu summary{list-style:none;cursor:pointer;font-size:14px;color:var(--ink);padding:8px 0;display:inline-flex;align-items:center;gap:8px}
.mmenu summary::-webkit-details-marker{display:none}
.mbars{width:16px;height:11px;display:inline-block;background:linear-gradient(var(--ink) 0 1.5px,transparent 1.5px 4.75px,var(--ink) 4.75px 6.25px,transparent 6.25px 9.5px,var(--ink) 9.5px 11px)}
.mpanel{position:fixed;left:0;right:0;top:calc(52px + env(safe-area-inset-top,0px));z-index:120;max-height:calc(100vh - 60px);overflow:auto;background:var(--nav);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--hair);padding:12px max(22px,env(safe-area-inset-left,0px)) 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.mh{margin:14px 0 4px;font-size:12px;font-weight:600;color:var(--ink3)}
.mcol ul{list-style:none;margin:0;padding:0}
.mcol a{display:block;padding:9px 0;font-family:var(--f-display);font-weight:600;font-size:20px;color:var(--ink);letter-spacing:-.015em}
.mcol a:hover{text-decoration:none;color:var(--link)}
.mcol a[aria-current]{color:var(--link)}
nav.tiles,.stickycta,.stickyx{display:none!important}
@media (max-width:900px){.topnav,.hlogin{display:none}.mmenu{display:block}.mpanel{grid-template-columns:1fr}.hright{margin-left:auto}}

/* ---------- hero (home) ---------- */
/* v1.8.17: centred intro. Light: white room with a soft blue-to-violet glow; dark: deep navy glow on black. The second heading line carries a
   blue-to-violet gradient (every stop is AA against the lightest glow stop in light and the deepest in dark). Motion (drifting orbs, gradient shift,
   staggered fade-up, button glow) runs only under prefers-reduced-motion: no-preference; everything is static otherwise and without script. */
.hero{--h-glow1:#e3ecff;--h-glow2:#ece4ff;--h-mut:#4a5a78;--h-ink:#0f1f45;--h-g1:#1a44c0;--h-g2:#1f4fd1;--h-g3:#6a3fd8;--h-g4:#6d28d9;--h-btn:#1f4fd1;--h-btn-glow:rgba(31,79,209,.32);--h-alt-bg:#fff;--h-alt-line:#c9d6f2;--h-orb1:rgba(31,79,209,.12);--h-orb2:rgba(106,63,216,.1);--h-orb3:rgba(74,155,255,.12);
  position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(44px,6vw,80px) clamp(44px,6vw,84px);text-align:center;color:var(--h-ink);
  background:radial-gradient(900px 480px at 42% -40px,var(--h-glow1),transparent 70%),radial-gradient(760px 440px at 68% 0,var(--h-glow2),transparent 72%),var(--bg)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero{--h-glow1:#12224a;--h-glow2:#1a1640;--h-mut:#a9b4cc;--h-ink:#fff;--h-g1:#6fb4ff;--h-g2:#6fa0ff;--h-g3:#a08cff;--h-g4:#b39dff;--h-btn:#2a62f0;--h-btn-glow:rgba(47,107,255,.5);--h-alt-bg:rgba(255,255,255,.06);--h-alt-line:rgba(255,255,255,.18);--h-orb1:rgba(47,107,255,.26);--h-orb2:rgba(138,107,255,.2);--h-orb3:rgba(111,180,255,.16)}}
:root[data-theme="dark"] .hero{--h-glow1:#12224a;--h-glow2:#1a1640;--h-mut:#a9b4cc;--h-ink:#fff;--h-g1:#6fb4ff;--h-g2:#6fa0ff;--h-g3:#a08cff;--h-g4:#b39dff;--h-btn:#2a62f0;--h-btn-glow:rgba(47,107,255,.5);--h-alt-bg:rgba(255,255,255,.06);--h-alt-line:rgba(255,255,255,.18);--h-orb1:rgba(47,107,255,.26);--h-orb2:rgba(138,107,255,.2);--h-orb3:rgba(111,180,255,.16)}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-bg .orb{position:absolute;border-radius:50%;background:radial-gradient(closest-side,var(--o),transparent 72%);will-change:transform}
.hero-bg .o1{--o:var(--h-orb1);width:min(760px,90vw);height:min(760px,90vw);left:-8%;top:-30%}
.hero-bg .o2{--o:var(--h-orb2);width:min(640px,80vw);height:min(640px,80vw);right:-10%;top:-12%}
.hero-bg .o3{--o:var(--h-orb3);width:min(520px,70vw);height:min(520px,70vw);left:30%;bottom:-45%}
.hero .wrap,.hero .hgrid{display:block;text-align:center;max-width:960px}
.hero .ht{display:grid;justify-items:center}
.hero .kicker{font-size:12px;font-weight:700;color:var(--h-mut);margin:0 0 18px;letter-spacing:.18em;text-transform:uppercase;background:none;border:0;padding:0}
.hero h1{font-size:clamp(33px,6.4vw,64px);line-height:1.04;font-weight:800;letter-spacing:-.035em;max-width:none;margin:0 auto;color:var(--h-ink);text-wrap:pretty}
.hero h1 .grad{display:block;color:transparent;background:linear-gradient(90deg,var(--h-g1) 0%,var(--h-g2) 22%,var(--h-g3) 48%,var(--h-g4) 62%,var(--h-g3) 78%,var(--h-g2) 100%);background-size:220% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;padding-bottom:.06em;margin-bottom:-.06em}
.hero .lead{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--h-mut);max-width:640px;margin:20px auto 0;font-family:var(--f-text);font-weight:400;letter-spacing:0;text-align:center}
.hero .btns{justify-content:center;gap:12px;margin-top:28px}
.hero .btns .btn{position:relative;min-height:48px;padding:8px 24px;font-size:16px;font-weight:600;border-radius:999px}
.hero .btns .btn:not(.alt){background:var(--h-btn);color:#fff;box-shadow:0 8px 24px var(--h-btn-glow)}
.hero .btns .btn:not(.alt)::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 10px 34px var(--h-btn-glow);opacity:0;pointer-events:none}
.hero .btns .btn.alt{background:var(--h-alt-bg);color:var(--h-ink);box-shadow:none;border:1px solid var(--h-alt-line)}
.hero .btns .btn.alt:hover{background:var(--c-soft);border-color:var(--c)}
.hero .hfrom{margin:18px 0 0;font-size:14px;color:var(--h-mut)}
.hero .hfrom b{color:var(--h-ink);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .hero .kicker,.hero h1,.hero .lead,.hero .btns,.hero .hfrom{animation:heroin .8s cubic-bezier(.2,.7,.2,1) both}
  .hero h1{animation-delay:.08s}.hero .lead{animation-delay:.2s}.hero .btns{animation-delay:.3s}.hero .hfrom{animation-delay:.38s}
  @keyframes heroin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .hero h1 .grad{animation:gradshift 12s ease-in-out infinite}
  @keyframes gradshift{0%,100%{background-position:0 0}50%{background-position:100% 0}}
  .hero .btns .btn:not(.alt)::after{animation:btnglow 4s ease-in-out infinite}
  @keyframes btnglow{0%,100%{opacity:0}50%{opacity:1}}
  .hero-bg .o1{animation:orb1 22s ease-in-out infinite}
  .hero-bg .o2{animation:orb2 26s ease-in-out infinite}
  .hero-bg .o3{animation:orb3 30s ease-in-out infinite}
  @keyframes orb1{0%,100%{transform:translate(0,0)}50%{transform:translate(9vw,6vh)}}
  @keyframes orb2{0%,100%{transform:translate(0,0)}50%{transform:translate(-8vw,8vh)}}
  @keyframes orb3{0%,100%{transform:translate(0,0)}50%{transform:translate(-6vw,-7vh)}}
}
@media (max-width:640px){.hero-bg .orb{animation:none!important;will-change:auto}.hero-bg .o3{display:none}.hero .kicker{text-transform:none;font-size:13px;font-weight:600;letter-spacing:.04em}}

/* ---------- inner page hero ---------- */
.phero{padding-block:clamp(44px,6vw,72px) clamp(36px,5vw,56px);text-align:center;background:var(--bg)}
.phero .wrap{display:grid;justify-items:center;gap:0}
.phero .wrap>div:first-child{display:grid;justify-items:center;gap:12px;max-width:820px}
.phero .art{display:none}
.crow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px}
.crumbs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--ink3)}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--ink3)}
.crumbs a{color:var(--ink2)}
.level{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--c);background:var(--c-soft);border-radius:999px;padding:3px 10px;margin:0}
.level b{display:none}
.phero h1{font-size:clamp(38px,6.4vw,76px);line-height:1.04;letter-spacing:-.035em;max-width:16ch}
.phero h1 span{color:var(--c)}
.phero .lead{max-width:60ch;margin:6px 0 0}
.phero .btns{justify-content:center;margin-top:16px}
.phero .btns .btn:nth-child(n+3){background:transparent;box-shadow:none;color:var(--link);height:auto;padding:0}
.phero .btns .btn:nth-child(n+3)::after{content:"›";margin-left:4px}
.phero .note{margin:14px 0 0}

/* ---------- cards and tiles ---------- */
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.svc,.step,.depth,.callout,.hub>a,.dnac,.perk,.lcard,.bun,.recipe,.flowc,.sysc,.lp,.famc,.feat>li,.swapcol,.rule,.fact{background:var(--bg2);border-radius:var(--r-m);padding:22px;color:var(--ink);border:0;box-shadow:none}
main>section:nth-of-type(even) :is(.svc,.step,.depth,.callout,.hub>a,.dnac,.perk,.lcard,.bun,.recipe,.flowc,.sysc,.lp,.feat>li,.swapcol){background:var(--card)}
.svc{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:12px;row-gap:10px;align-content:start}
.svc>.ic{grid-row:1;align-self:center}
.svc>h3{grid-row:1;align-self:center;font-size:19px;font-weight:600;letter-spacing:-.015em}
.svc>h3 a{color:inherit}
.svc>*:not(.ic):not(h3){grid-column:1/-1;margin:0}
.svc>p{font-size:15px;line-height:1.45;color:var(--ink2)}
.svc>ul{list-style:none;margin:0;padding:0;display:grid;align-self:end}
.svc>ul li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--hair);font-size:14.5px}
.svc>ul li span{color:var(--ink2)}.svc>ul li b{font-weight:600;white-space:nowrap}
.svc>.more{justify-self:start;font-size:15px;padding-top:4px}
.svc .pill{justify-self:start}
.svc .btn{justify-self:start}
.step,.depth{position:relative;display:grid;gap:8px;align-content:start}
.step .num,.depth .num{width:32px;height:32px;border-radius:50%;background:var(--c);color:var(--on-c);display:grid;place-items:center;font-weight:600;font-size:14px;margin-bottom:4px}
.step h3,.depth h3{font-size:19px;font-weight:600}
.step p,.depth p{margin:0;font-size:15px;color:var(--ink2);line-height:1.45}
.step p:last-child,.depth p:last-child{margin-top:8px}
.steps,.depths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px}
.callout{display:flex;gap:16px;align-items:flex-start}
.callout h2,.callout h3{font-size:20px;font-weight:600;margin:0 0 6px;letter-spacing:-.015em}
.callout p{margin:0;font-size:15.5px;color:var(--ink2);line-height:1.45}
.callout p:last-child{margin:0}
.callout ul{margin:8px 0 0;padding-left:18px;font-size:15px;color:var(--ink2)}
.wrap>.callout:not(:first-child){margin-top:28px}
.cdesk,.anat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:12px}
.feat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px}
.feat>li{display:flex;gap:12px;align-items:flex-start;padding:18px}
.feat>li b{display:block;font-family:var(--f-display);font-weight:600;font-size:16px;line-height:1.25;letter-spacing:-.01em;margin-bottom:3px}
.feat>li div>span{font-size:14.5px;line-height:1.4;color:var(--ink2)}
.hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hub>a{display:flex;align-items:center;gap:12px;padding:14px 16px;color:var(--ink)}
.hub>a:hover{text-decoration:none;box-shadow:var(--shadow);transform:translateY(-2px)}
.hub>a small{display:block;font-size:12px;color:var(--ink3)}
.hub>a b{font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:-.01em}
.hub>a .go{margin-left:auto;color:var(--ink3);display:grid;place-items:center}
.hub>a .go svg{width:18px;height:18px}
.chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;border-radius:999px;background:var(--bg2);font-size:14px}
.chips li .ic{width:24px;height:24px;border-radius:7px}.chips li .ic svg{width:14px;height:14px}
.wl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wl li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.wl li b{display:block;font-weight:600}
.wl li span:last-child{color:var(--ink2);font-size:15px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.split .sh{text-align:left;justify-items:start;margin:0}
.split .sh p{max-width:none}
.fig{margin:0}.fig img{display:block;width:100%;height:auto;border-radius:var(--r-l);background:var(--bg2)}
.fig figcaption,.fcap{font-size:13px;color:var(--ink3);margin-top:8px;text-align:center}
.stat{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:12px}
.stat li{background:var(--bg2);border-radius:var(--r-m);padding:18px}
.stat li b{display:block;font-family:var(--f-display);font-size:34px;font-weight:700;letter-spacing:-.03em;color:var(--c)}
.stat li span{font-size:14px;color:var(--ink2);line-height:1.35}
.strip .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px 24px}
.strip .wrap>span{display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--ink2)}
.strip .ic.y{background:color-mix(in srgb,var(--gift) 14%,transparent);color:var(--gift);--ica:var(--gift)}

/* dna */
.dna .sh{margin-bottom:28px}
.dnag{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dnac{display:grid;gap:8px;align-content:start}
.dnac h3{font-size:19px;font-weight:600;margin-top:4px}
.dnac p{margin:0;font-size:15px;color:var(--ink2);line-height:1.45}
.dnac .more{font-size:15px;margin-top:auto;padding-top:6px}
footer .dnaline{display:none}

/* ---------- packages ---------- */
.packages .sh{margin-bottom:36px}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}
.pkg{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--bg2);border-radius:var(--r-l);padding:26px 22px 22px;color:var(--ink)}
main>section:nth-of-type(even) .pkg{background:var(--card)}
main>section .pkg.k4,.pkg.k4{background:var(--tiledark);color:#f5f5f7}
.pkg.k4 .ic{background:rgba(255,255,255,.1);color:var(--gold);--ica:var(--gold)}
.pkg .emb{width:44px;height:44px;border-radius:12px;background:var(--c-soft);color:var(--c);--ica:var(--c);display:grid;place-items:center}
.pkg .emb svg{width:26px;height:26px}
.pkg.k4 .emb{background:rgba(255,255,255,.1);color:var(--gold);--ica:var(--gold)}
.pkg h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:8px}
.pkg .who{margin:0;font-size:14.5px;color:var(--ink2);min-height:2.9em;line-height:1.4}
.pkg.k4 .who,.pkg.k4 .yr,.pkg.k4 small{color:#a1a1a6}
.pkg .price{margin:10px 0 0;padding-top:14px;border-top:1px solid var(--hair);font-family:var(--f-display);font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pkg.k4 .price{border-top-color:#3a3a3c}
.pkg .price small{font-size:14px;font-weight:500;color:var(--ink2);letter-spacing:0;font-family:var(--f-text)}
.pkg .yr{margin:0;font-size:13px;color:var(--ink3)}
.pkg .hl{margin:14px 0 0;padding:14px;border-radius:var(--r-s);background:var(--card)}
main>section:nth-of-type(even) .pkg .hl{background:var(--bg2)}
main>section .pkg.k4 .hl,.pkg.k4 .hl{background:rgba(255,255,255,.08);color:#f5f5f7}
.pkg.k4 .hl small{color:#a1a1a6}.pkg.k4 .hlh,main>section .pkg.k4 .hlh{color:#c7c7cc}
.pkg .hlh{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.pkg.k4 .hlh{color:var(--gold)}
.pkg .hl ul,.pkg>ul,.pmore ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pkg li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.3}
.pkg li .ic{width:28px;height:28px;border-radius:8px}.pkg li .ic svg{width:16px;height:16px}
.pkg li .ic.fi{width:28px;height:28px}
.pkg li b{display:block;font-weight:600}
.pkg li small{display:block;font-size:12.5px;color:var(--ink2);line-height:1.35;margin-top:1px}
.pkg>ul{margin-top:14px;padding-top:14px;border-top:1px solid var(--hair)}
.pkg.k4>ul{border-top-color:#3a3a3c}
.pmore{margin-top:8px}
.pmore>summary{list-style:none;cursor:pointer;font-size:14px;color:var(--link);display:inline-flex;align-items:center;gap:4px;min-height:36px}
.pmore>summary::-webkit-details-marker{display:none}
.pmore>summary::after{content:"›";transition:transform .2s;display:inline-block}
.pmore[open]>summary::after{transform:rotate(90deg)}
.pmore ul{margin-top:8px}
.pkg .btn{margin-top:auto;align-self:flex-start}
.pkg.k4 .btn{background:#f5f5f7;color:#000}
.pkg.k4 .pmore>summary{color:#8FAAF4}
.pkg.k4 .price small{color:#a1a1a6}
.pkg .pill{align-self:flex-start}
.packages .note{text-align:center;margin:22px 0 0}
.perks .sh{margin-bottom:28px}
.perkgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.perk{display:flex;flex-direction:column;gap:6px}
.perk .pkk{margin:10px 0 0;font-family:var(--f-display);font-size:28px;font-weight:700;letter-spacing:-.025em;color:var(--c)}
.perk h3{font-size:17px;font-weight:600}
.perk p:not(.pkk){margin:0;font-size:14.5px;color:var(--ink2);line-height:1.45}
.perk .more{margin-top:auto;padding-top:10px;font-size:15px}
.memnote{margin:6px 0 14px;padding:12px 16px;border-radius:var(--r-s);background:var(--c-soft);font-size:14.5px}

/* compare table and price lists */
.mx{position:relative;min-width:0;max-width:100%;overflow-x:auto;border-radius:var(--r-m);background:var(--card);box-shadow:0 0 0 1px var(--hair)}
.mx table{width:100%;border-collapse:collapse;font-size:14.5px}
.mx th,.mx td{padding:12px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--hair)}
.mx thead th{border-top:0;font-size:12px;font-weight:600;color:var(--ink2);letter-spacing:.02em;background:var(--bg2)}
.mx tbody th{font-weight:500}
.mx tbody th b{display:block;font-weight:600}
.mx tbody th small{display:block;font-size:12.5px;color:var(--ink2)}
.mx td.pr{white-space:nowrap;font-weight:600}
.mx td.tm{color:var(--ink2)}
.mx td.no{color:var(--ink3)}
.mx .ic.tick{width:24px;height:24px;border-radius:50%;background:var(--gift);color:var(--card);--ica:var(--card)}.mx .ic.tick svg{width:15px;height:15px}
.plf{margin-top:40px}
.addh{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.plf>p{color:var(--ink2);font-size:15px;margin-bottom:12px}
.jump ul,.keys{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.jump a{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:var(--bg2);color:var(--ink);font-size:14px}
.jump a:hover{text-decoration:none;background:var(--c-soft)}
.keys li{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2)}
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px}
.bun{position:relative;display:grid;gap:6px;align-content:start}
.bun .bs{position:absolute;right:18px;top:18px;background:color-mix(in srgb,var(--gift) 14%,transparent);color:var(--gift);font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}
.bun h3{font-size:20px;font-weight:600;margin-top:6px}
.bun .for{color:var(--ink2);font-size:14.5px;margin:0}
.bun .bp{margin:6px 0 0;font-size:15px}.bun .bp b{font-family:var(--f-display);font-size:30px;font-weight:700;letter-spacing:-.03em;margin-right:6px}
.bun .bm{margin:0;font-size:13px;color:var(--ink3)}
.bun ul{margin:8px 0 0;padding-left:18px;font-size:14.5px;color:var(--ink2)}

/* ---------- change desk timeline ---------- */
.cflow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}
.cflow::before{content:"";position:absolute;left:34px;right:34px;top:33px;height:1px;background:var(--line)}
.cflow li{position:relative;display:grid;gap:12px;align-content:start}
.cflow .cn{position:relative;width:68px;height:68px;border-radius:50%;background:var(--card);box-shadow:0 0 0 6px var(--bg),var(--shadow);display:grid;place-items:center}
main>section:nth-of-type(even) .cflow .cn{box-shadow:0 0 0 6px var(--bg2),var(--shadow)}
.cflow .cn .ic{background:transparent;width:auto;height:auto}
.cflow .cn .ic svg{width:30px;height:30px}
.cflow .cn i{position:absolute;right:-2px;top:-2px;width:22px;height:22px;border-radius:50%;background:var(--c);color:var(--on-c);font-style:normal;font-size:12px;font-weight:600;display:grid;place-items:center}
.cflow .ch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.cflow .ch b{font-family:var(--f-display);font-size:17px;font-weight:600;letter-spacing:-.01em}
.cflow .cw{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);background:var(--bg2);padding:2px 8px;border-radius:999px}
main>section:nth-of-type(even) .cflow .cw{background:var(--card)}
.cflow .cw.us{color:var(--c);background:var(--c-soft)}
.cflow .ct{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink2)}
.cflow+.cdesk{margin-top:36px}
@media (prefers-reduced-motion:no-preference){
  .cflow::after{content:"";position:absolute;top:31px;left:34px;width:120px;height:5px;border-radius:5px;background:linear-gradient(90deg,transparent,var(--c),#fff,var(--c),transparent);filter:blur(.5px);animation:cftravel 6s linear infinite}
  @keyframes cftravel{0%{transform:translateX(0);opacity:0}6%{opacity:1}88%{opacity:1}100%{transform:translateX(calc(min(1024px,100vw) * .72));opacity:0}}
  .cflow li .cn{animation:cfpulse 6s ease-in-out infinite}
  .cflow li:nth-child(2) .cn{animation-delay:1.5s}.cflow li:nth-child(3) .cn{animation-delay:3s}.cflow li:nth-child(4) .cn{animation-delay:4.5s}
  @keyframes cfpulse{0%,22%,100%{transform:scale(1)}8%{transform:scale(1.08)}}
}

/* ---------- swap and training ---------- */
.swapgrid{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);gap:14px;align-items:stretch}
.swapcol{padding:24px}
.swapcol.ours{background:var(--c-soft)}
.swaph{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.swapcol.ours .swaph{color:var(--c)}
.swapl,.swapo{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.swapl li{display:flex;gap:12px;align-items:flex-start}
.swapl li b{display:block;font-size:16px;text-decoration:line-through;text-decoration-color:var(--ink3);font-weight:600}
.swapl li span{display:block;font-size:14px;color:var(--ink2);line-height:1.45}
.swapl .ic{background:var(--card);color:var(--ink3);--ica:var(--ink3);width:38px;height:38px}
main>section:nth-of-type(even) .swapl .ic{background:var(--bg2)}
.swapo{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.swapo li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-s);background:var(--card);font-size:14.5px;font-weight:500}
.swapo .ic{width:32px;height:32px;border-radius:9px;background:var(--c);color:var(--on-c);--ica:var(--on-c)}
.swapo .ic svg{width:18px;height:18px}
.swapnote{margin:16px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.swapcol .btns{margin-top:16px}
.swaparrow{display:grid;place-items:center;color:var(--ink3)}
.swaparrow svg{width:40px;height:40px}
.learngrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lcard{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:3px;padding:18px 20px}
.lcard>.ic{grid-row:1/span 2}
.lcard h3{font-size:16px;font-weight:600;align-self:end}
.lcard p{margin:0;font-size:14px;line-height:1.45;color:var(--ink2)}
.learnpick{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center;margin-top:16px}
.lp{padding:16px 20px}
.lp.us2{background:var(--c-soft)}
.lpk{margin:0 0 3px;font-weight:600;font-size:15px}
.lp p:not(.lpk){margin:0;font-size:14px;color:var(--ink2)}
.learnpick .btns{margin:0;justify-content:flex-end}

/* ---------- showcase, system, our work ---------- */
.frame{background:var(--card);border-radius:var(--r-s);overflow:hidden;box-shadow:var(--shadow),0 0 0 1px var(--hair)}
.frame .bar{position:static;height:22px;width:auto;display:flex;align-items:center;gap:5px;padding:0 10px;background:var(--bg2);border-bottom:1px solid var(--hair);transform:none;border-radius:0;box-shadow:none;animation:none}
.frame .bar::after{display:none}
.frame .bar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.frame img{display:block;width:100%;height:auto}
.hv{position:relative;display:grid;grid-template-columns:1fr;justify-items:center}
.hv .s1,.hv .s2,.hv .s3,.hv .stick{display:none}
.hv .frame.main{width:min(100%,900px)}
.hv .frame.phone{display:none}
.sysimgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sysimgs.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.sysg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px;margin-top:20px}
.sysc h3{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;margin-bottom:10px}
.sysc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px;color:var(--ink2)}
.sysc li{display:flex;gap:8px;align-items:flex-start}
.sysc .ic.tick{width:22px;height:22px;border-radius:50%}.sysc .ic.tick svg{width:12px;height:12px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}
.ggrid figure{margin:0}
.ggrid figcaption{margin-top:8px;font-size:14px}
.ggrid figcaption b{display:block;font-weight:600}.ggrid figcaption span{color:var(--ink2)}
.photolist,.photo{display:grid;gap:12px}

/* ---------- dark bands ---------- */
.invoice,.cta-s{background:var(--tiledark);color:#f5f5f7;text-align:center}
.invoice .wrap,.cta-s .wrap{max-width:760px;display:grid;justify-items:center;gap:14px}
.invoice h2,.cta-s h2{font-size:clamp(34px,5vw,56px);letter-spacing:-.03em;line-height:1.07}
.invoice h2 span,.cta-s h2 span{color:var(--c)}
.invoice p,.cta-s p{margin:0;color:#a1a1a6;font-size:17px;max-width:60ch}
.cta-s .btns{justify-content:center;margin-top:8px}
.cta-s .btn{background:#f5f5f7;color:#000}
.cta-s .btn.alt{background:transparent;color:#f5f5f7;box-shadow:inset 0 0 0 1px #6e6e73}
.bundles .callout,main>section:nth-of-type(even) .bundles .callout{background:var(--gift-soft)}
.bundles .ic{background:color-mix(in srgb,var(--gift) 14%,transparent);color:var(--gift);--ica:var(--gift)}

/* ---------- automation extras ---------- */
.recipes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:12px}
.recipe h3{font-size:18px;font-weight:600;margin-bottom:10px}
.recipe p{font-size:14.5px;color:var(--ink2);margin:0 0 8px}
.recipe .saves,.flowsave{font-size:13px;font-weight:600;color:var(--gift);margin:0}
.flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.flow>span{display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:999px;background:var(--card);font-size:13px;font-weight:500}
main>section:nth-of-type(even) .flow>span{background:var(--bg2)}
.flow i{font-style:normal;color:var(--ink3)}
.flows{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:12px}
.flowc h3{font-size:16px;font-weight:600;margin-bottom:10px}
.fchart{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.fchart li{display:flex;align-items:center;gap:8px;font-size:13.5px}
.fchart li+li::before{content:"›";color:var(--ink3);margin-right:4px}
.fchart .ic{width:28px;height:28px;border-radius:8px}.fchart .ic svg{width:15px;height:15px}
.decide{display:grid;gap:14px;justify-items:center}
.dq{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;font-size:16px}
.dq .ic{background:rgba(255,255,255,.15);color:#fff;--ica:#fff}
.dlines{display:none}
.dr{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.dr>div{background:var(--bg2);border-radius:var(--r-m);padding:22px}
main>section:nth-of-type(even) .dr>div{background:var(--card)}
.dr .yn{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;padding:3px 10px;border-radius:999px;background:var(--c);color:var(--on-c);margin-bottom:8px}
.dr .no .yn{background:var(--ink);color:var(--bg)}
.dr h3{font-size:19px;font-weight:600}
.dr p{font-size:14.5px;color:var(--ink2);margin:6px 0 0}
.dr .price{font-weight:600;color:var(--ink);margin-top:10px}

/* ---------- FAQ, prose, forms ---------- */
.fq,.faq details{max-width:760px;margin:0 auto}
.faq details{border-top:1px solid var(--hair);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--ink3);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink2);font-size:15.5px;padding-bottom:16px}
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:24px;margin:36px 0 10px;letter-spacing:-.02em}
.prose h3{font-size:19px;margin:24px 0 8px}
.prose p,.prose li{font-size:16px;color:var(--ink2);line-height:1.55}
.prose ul,.prose ol{padding-left:22px}
.prose .callout{margin:20px 0}
.qf,form.qf{display:grid;gap:16px;max-width:640px;margin:0 auto;background:var(--bg2);border-radius:var(--r-l);padding:28px}
main>section:nth-of-type(even) .qf{background:var(--card)}
.qf h2{font-size:26px}
.qf label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--ink2)}
.qf input,.qf select,.qf textarea,.form input,.form select,.form textarea{font:inherit;font-size:17px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);width:100%}
.qf textarea{min-height:110px;resize:vertical}
.qf .btn{justify-self:start}
.qf .errsum{background:color-mix(in srgb,#c0392b 10%,var(--card));border-radius:var(--r-s);padding:12px 16px;font-size:14px}
.qf .chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--ink);font-size:15px}
.qf .chk input{width:auto}
.pwrow{display:flex;gap:8px}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:var(--r-s);background:var(--card);font-weight:400;color:var(--ink)}
.chk input[type=radio],.chk input[type=checkbox],.opt input{accent-color:var(--link);width:18px;height:18px}

/* ---------- account portal basics ---------- */
.protobar{background:var(--bg2);color:var(--ink2);font-size:12.5px;text-align:center;padding:8px 16px}
.protobar b{color:var(--ink)}
.pnav{border-bottom:1px solid var(--hair);background:var(--bg)}
.pnav ul{list-style:none;margin:0 auto;padding:0 22px;max-width:1024px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.pnav a{display:inline-flex;align-items:center;height:44px;padding:0 12px;font-size:13.5px;color:var(--ink2);white-space:nowrap;border-bottom:2px solid transparent}
.pnav a:hover{text-decoration:none;color:var(--ink)}
.pnav a[aria-current]{color:var(--ink);font-weight:600;border-bottom-color:var(--c)}
.pnav .out{margin-left:auto}
.pnav .cnt,.cnt{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:11px;font-weight:600;margin-left:4px}
.psec{padding-block:clamp(28px,4vw,44px)!important}
.psec h2{font-size:clamp(26px,3.5vw,36px);letter-spacing:-.025em;margin-bottom:12px}
.psec h2 span{color:var(--c)}
.pview{border:0;padding:0;margin:0 0 8px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pview legend{font-size:12px;font-weight:600;color:var(--ink3);margin-right:4px}
.pview .chk{display:inline-flex;gap:8px;align-items:center;font-size:14px;padding:6px 12px;border-radius:999px;background:var(--bg2)}
.pcards,.pgroup{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:12px}
.ptile .head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.pfig{font-family:var(--f-display);font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.pfig small{display:block;font-size:13px;font-weight:500;color:var(--ink2);letter-spacing:0}
.pmsg,.pdone{padding:14px 16px;border-radius:var(--r-s);background:color-mix(in srgb,var(--gift) 10%,var(--bg2));font-size:15px}
.palist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:12px}
.palist>li{background:var(--bg2);border-radius:var(--r-m);padding:18px;display:grid;gap:8px}
.palist .tp{display:flex;gap:12px;align-items:flex-start}
.palist .tp b{display:block;font-weight:600}.palist .tp small{font-size:13px;color:var(--ink2)}
.palist .pr{font-family:var(--f-display);font-size:22px;font-weight:700;margin:0}
.palist .pr .hint{font-family:var(--f-text);font-size:13px;font-weight:500}
.stack{display:grid;gap:14px;max-width:760px}
.smock{background:var(--bg2);border-radius:var(--r-m);overflow:hidden;margin-top:12px}
.smock .bar{position:static;transform:none;width:auto;height:auto;display:flex;gap:8px;align-items:center;padding:10px 14px;font-size:13px;background:var(--card);border-bottom:1px solid var(--hair);border-radius:0;box-shadow:none;animation:none}
.smock .bar::after{display:none}
.smock .body{padding:18px}
.tag-mock{display:inline-block;font-size:12px;color:var(--ink3);margin-bottom:8px}
.vlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vrow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--hair);font-size:15px}
.ptotals{margin-top:12px;border-top:1px solid var(--hair);padding-top:12px;font-weight:600}
.safehint{font-size:13px;color:var(--ink3)}

/* ---------- footer ---------- */
footer{background:var(--bg2);font-size:12px;line-height:1.5;color:var(--ink2);padding-block:36px 48px}
footer .wrap{display:grid;gap:22px}
footer .fam{order:0}
footer .famh{margin:0 0 12px;font-size:12px;font-weight:600;color:var(--ink)}
.famgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.famc{background:var(--card);border-radius:var(--r-m);padding:18px;display:grid;gap:6px;align-content:start;--co:var(--c)}
.famc.fl{--co:#3F5FC8}.famc.fs{--co:#0d8a8f}.famc.fw{--co:#b8862a}.famc.fk{--co:#11806a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .famc.fl{--co:#8FAAF4}}
:root[data-theme="dark"] .famc.fl{--co:#8FAAF4}
.famlogo{display:flex;align-items:center;gap:10px}
.famlogo img{display:none}
.fmark{width:26px;height:26px;flex:none}
.fmark .b1{fill:var(--ink)}.fmark .b2{fill:var(--co)}.fmark .b3{fill:#8a9299}
.fword b{display:block;font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.01em;text-transform:none}
.fword i{display:block;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.famleg{margin:4px 0 0;font-size:11.5px;color:var(--ink3)}
.famtxt{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.famlink{font-size:12.5px;color:var(--link);margin-top:auto}
.famlink::after{content:" ›"}
.famlink.off{color:var(--ink3)}.famlink.off::after{content:""}
footer .fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:20px;padding-block:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
footer .fgrid img{height:22px;width:auto;margin-bottom:10px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) footer .fgrid img{filter:brightness(0) invert(1)}}
:root[data-theme="dark"] footer .fgrid img{filter:brightness(0) invert(1)}
footer .fgrid h2{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--ink);font-family:var(--f-text);letter-spacing:0}
footer .fgrid ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:4px}
footer .fgrid a{color:var(--ink2)}
footer .fgrid p{margin:0 0 10px;max-width:40ch}
footer .give{color:var(--gift)}footer .give a{color:inherit;font-weight:600}
footer .fbar{display:grid;gap:4px;color:var(--ink3)}

/* ---------- motion: reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  html.anim .rv{opacity:0;transform:translateY(22px)}
  html.anim .rv.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  html.anim .rv.in:nth-child(2){transition-delay:.06s}html.anim .rv.in:nth-child(3){transition-delay:.12s}html.anim .rv.in:nth-child(4){transition-delay:.18s}html.anim .rv.in:nth-child(n+5){transition-delay:.24s}
  .svc,.hub>a,.perk,.dnac,.lcard,.feat>li,.pkg,.step,.famc{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
  .svc:hover,.perk:hover,.dnac:hover,.lcard:hover,.feat>li:hover,.step:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .pkg:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
  .ic svg{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .svc:hover .ic svg,.perk:hover .ic svg,.lcard:hover .ic svg,.feat>li:hover .ic svg{transform:scale(1.1)}
}
@media (prefers-reduced-motion:reduce){html.anim .rv{opacity:1!important;transform:none!important}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .pgrid,.perkgrid,.dnag,.famgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cflow{grid-template-columns:1fr;gap:0}
  .cflow::before{left:33px;right:auto;top:34px;bottom:34px;width:1px;height:auto}
  .cflow::after{display:none}
  .cflow li{grid-template-columns:68px minmax(0,1fr);column-gap:14px;padding-bottom:24px}
  .cflow li:last-child{padding-bottom:0}
  .cflow .cn{grid-row:1/span 2}
  .learngrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .learnpick{grid-template-columns:1fr 1fr}.learnpick .btns{grid-column:1/-1;justify-content:flex-start}
  .swapgrid{grid-template-columns:1fr}.swaparrow svg{transform:rotate(90deg)}
  .hub{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.two{grid-template-columns:1fr}
  .split .sh{text-align:center;justify-items:center}
  footer .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .pgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 22px 16px;margin-inline:-22px;scrollbar-width:none}
  .pgrid>.pkg{flex:0 0 84%;scroll-snap-align:center}
  .packages .sh p::after{content:" Swipe to see all four.";font-weight:600;color:var(--ink)}
  .hub,.learngrid,.swapo,.dr{grid-template-columns:1fr}
  .sysimgs,.sysimgs.four{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pgrid>.pkg{flex-basis:88%}
  .perkgrid,.dnag,.famgrid,.learnpick{grid-template-columns:1fr}
  footer .fgrid{grid-template-columns:1fr}
  .hero .btns{gap:16px}
  .btn{height:42px;font-size:16px}
}

.stack>*,.two>*,.split>*,.sgrid>*{min-width:0}
/* plain tables outside .mx */
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--hair)}
thead th{border-top:0;font-size:12px;font-weight:600;color:var(--ink2)}
.ltopics,.lpoints{list-style:none;margin:0;padding:0;display:grid;gap:10px}
/* two-column rooms: more air, left-aligned heads, raised side card */
.wrap.two{gap:clamp(40px,6vw,80px);align-items:start}
.wrap.two .sh{text-align:left;justify-items:start;margin:0 0 28px;max-width:none}
.wrap.two .sh h2{font-size:clamp(32px,4.4vw,48px)}
.wrap.two .sh p{max-width:44ch}
.wl{gap:18px}
.wl li{gap:14px;align-items:flex-start;font-size:16px;line-height:1.5}
.wl li .ic{margin-top:2px}
.freecheck{background:var(--card);border-radius:var(--r-l);padding:clamp(28px,4vw,40px);display:grid;gap:14px;align-content:start;box-shadow:var(--shadow)}
main>section:nth-of-type(odd) .freecheck{background:var(--bg2);box-shadow:none}
.freecheck h3{font-size:24px;letter-spacing:-.02em;margin-top:6px}
.freecheck p{margin:0;font-size:16px;line-height:1.5;color:var(--ink2)}
.freecheck .btn{justify-self:start;margin-top:6px}
@media(max-width:980px){.wrap.two{gap:32px}}
/* keys art: built from tiles, not a flat picture */
.keysart{display:grid;gap:12px;padding:clamp(20px,3vw,32px);border-radius:var(--r-l);background:var(--bg2);position:relative;overflow:hidden}
main>section:nth-of-type(even) .keysart{background:var(--card)}
.keysart::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:var(--c-soft)}
.ka-main{position:relative;display:grid;justify-items:center;gap:6px;padding:26px 20px;border-radius:var(--r-m);background:var(--card);box-shadow:var(--shadow)}
main>section:nth-of-type(even) .ka-main{background:var(--bg2);box-shadow:none}
.ka-main .ic{width:56px;height:56px;border-radius:15px}.ka-main .ic svg{width:30px;height:30px}
.ka-main b{font-family:var(--f-display);font-size:20px;font-weight:600;letter-spacing:-.015em;margin-top:6px}
.ka-main span{font-size:13px;color:var(--ink2)}
.ka-row{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ka-tile{display:grid;justify-items:center;gap:8px;padding:16px 10px;border-radius:var(--r-s);background:var(--card);box-shadow:var(--shadow);text-align:center}
main>section:nth-of-type(even) .ka-tile{background:var(--bg2);box-shadow:none}
.ka-tile .ic{width:38px;height:38px;border-radius:11px}.ka-tile .ic svg{width:20px;height:20px}
.ka-tile b{font-size:13px;font-weight:600;line-height:1.2}
.ka-strip{position:relative;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.ka-strip span{font-size:12px;font-weight:600;color:var(--c);background:var(--c-soft);padding:4px 10px;border-radius:999px}
.split{gap:clamp(40px,6vw,80px)}
.split .sh h2{font-size:clamp(32px,4.4vw,48px)}
.split .chips{margin-top:20px}
@media (prefers-reduced-motion:no-preference){.ka-tile{transition:transform .3s}.keysart:hover .ka-tile:nth-child(1){transform:translateY(-4px)}.keysart:hover .ka-tile:nth-child(2){transform:translateY(-4px);transition-delay:.06s}.keysart:hover .ka-tile:nth-child(3){transform:translateY(-4px);transition-delay:.12s}}
/* FAQ: more air */
.faq .sh{margin-bottom:28px}
.fq{display:grid;gap:10px;max-width:820px}
.faq details{border:0;padding:0;background:var(--card);border-radius:var(--r-m);overflow:hidden}
main>section:nth-of-type(odd) .faq details,main>section.faq:nth-of-type(odd) details{background:var(--bg2)}
.faq details:last-child{border:0}
.faq summary{padding:20px 24px;font-size:18px}
.faq details p{padding:0 24px 20px;margin:0;max-width:70ch}
.faq .note{text-align:center;margin:22px 0 0}
@media(max-width:560px){.ka-row{grid-template-columns:1fr}.faq summary{padding:16px 18px;font-size:16px}.faq details p{padding:0 18px 16px}}
.fq{justify-items:stretch;margin:0 auto;width:100%}
.faq details{width:100%}
.faq summary{justify-content:space-between;text-align:left}

/* ---------- basket and checkout (J05) ---------- */
.bk-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr);gap:20px;align-items:start}
.bk-main,.bk-side{display:grid;gap:16px;min-width:0}
.bk-side{position:sticky;top:72px}
.bk-panel{background:var(--bg2);border-radius:var(--r-l);padding:clamp(18px,2.6vw,26px)}
main>section:nth-of-type(even) .bk-panel{background:var(--card)}
.bk-ph{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.bk-ph h2{font-size:20px;letter-spacing:-.02em}
/* package choice */
.bk-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bk-pk{font:inherit;display:grid;gap:2px;text-align:left;padding:12px 14px;border-radius:var(--r-s);border:1px solid var(--hair);background:var(--card);color:var(--ink);cursor:pointer}
.bk-pk b{font-weight:600;font-size:15px}.bk-pk span{font-size:13px;color:var(--ink2)}
.bk-pk:hover{border-color:var(--c)}
.bk-pk[aria-pressed="true"],.bk-pk.bk-added{border-color:var(--c);box-shadow:0 0 0 1px var(--c)}
.bk-package:not(:empty){margin-bottom:12px}
.bk-pkg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;align-items:center;padding:14px 16px;border-radius:var(--r-m);background:var(--card);box-shadow:var(--shadow)}
.bk-pkgname{font-family:var(--f-display);font-size:18px;font-weight:600;letter-spacing:-.015em}
.bk-pkgprice{font-size:13.5px;color:var(--ink2);grid-column:1}
.bk-pkgacts{grid-column:2;grid-row:1/span 2;display:flex;gap:6px}
.bk-change,.bk-removepkg,.bk-remove,.bk-sug-btn,.bk-add{font:inherit;cursor:pointer;border:0;border-radius:999px;white-space:nowrap}
.bk-change,.bk-removepkg{font-size:13px;font-weight:600;height:32px;padding:0 12px;background:var(--bg2);color:var(--ink)}
.bk-change:hover,.bk-removepkg:hover{background:var(--c-soft);color:var(--c)}
/* rows */
.bk-empty{margin:0;font-size:15px;color:var(--ink2)}
.bk-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bk-row{display:grid;grid-template-columns:26px minmax(120px,1fr) max-content max-content 56px max-content;gap:10px;align-items:center;padding:10px 12px 10px 8px;border-radius:var(--r-m);background:var(--card);box-shadow:0 0 0 1px var(--hair)}
main>section:nth-of-type(even) .bk-row{background:var(--bg2);box-shadow:none}
.bk-grip{touch-action:none}
.bk-row.bk-dragging,.bk-row.bk-drag{opacity:.55}
.bk-row.bk-over{box-shadow:0 0 0 2px var(--c)}
.bk-grip{font:inherit;width:30px;height:36px;border:0;background:transparent;color:var(--ink3);cursor:grab;border-radius:8px;font-size:18px;line-height:1}
.bk-grip:hover,.bk-grip:focus-visible{background:var(--c-soft);color:var(--c)}
.bk-row .bk-main{display:grid;gap:1px;min-width:0}
.bk-name{font-weight:600;font-size:15px;line-height:1.3}
.bk-unit,.bk-note{font-size:12.5px;color:var(--ink2);line-height:1.35}
.bk-covered,.bk-cov{display:inline-block;justify-self:start;margin-top:3px;font-size:11.5px;font-weight:600;color:var(--gift);background:var(--gift-soft);padding:2px 8px;border-radius:999px}
.bk-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;height:32px}
.bk-qty button{font:inherit;width:30px;height:30px;border:0;background:transparent;color:var(--ink);cursor:pointer;font-size:16px;line-height:1}
.bk-qty button:hover{background:var(--c-soft);color:var(--c)}
.bk-q{min-width:26px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
.bk-price{font-weight:600;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;font-size:14.5px}
.bk-price.bk-struck,.bk-row.bk-coveredrow .bk-price{color:var(--ink3);font-weight:500}
.bk-move{display:inline-flex;gap:2px}
.bk-move button{font:inherit;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--ink2);cursor:pointer;font-size:14px}
.bk-move button:hover:not([disabled]){background:var(--c-soft);color:var(--c)}
.bk-move button[disabled]{opacity:.3;cursor:default}
.bk-remove{font-size:13px;font-weight:600;height:30px;padding:0 10px;background:transparent;color:var(--ink2)}
.bk-remove:hover{background:var(--bg2);color:var(--ink)}
.bk-launchwrap{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
.bk-launchwrap h3{font-size:15px;margin-bottom:4px}
.bk-launchwrap .note{margin:0 0 10px}
.bk-launchtotal{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;font-size:13.5px;color:var(--ink2)}
/* suggestion */
.bk-suggest{background:var(--c-soft)!important;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.bk-suggest[hidden]{display:none!important}
.bk-sug-text{margin:0;font-size:15px;line-height:1.45}
.bk-sug-text::before{content:"Worth a look. ";font-family:var(--f-display);font-weight:600;color:var(--c)}
.bk-sug-btn{height:40px;padding:0 18px;background:var(--btn);color:#fff;font-size:15px;font-weight:500}
.bk-sug-btn:hover{filter:brightness(1.06)}
/* totals */
.bk-totals{background:var(--tiledark);color:#f5f5f7;border-radius:var(--r-l);padding:22px 24px;display:grid;gap:10px}
.bk-trow{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:#d1d1d6;align-items:baseline}
.bk-trow .bk-tv{font-weight:600;color:#f5f5f7;font-variant-numeric:tabular-nums;white-space:nowrap}
.bk-trow.bk-recurring{font-family:var(--f-display);padding-top:10px;border-top:1px solid #3a3a3c}
.bk-trow.bk-recurring .bk-tl{font-size:15px;color:#a1a1a6;font-family:var(--f-text)}
.bk-trow.bk-recurring .bk-tv{font-size:34px;letter-spacing:-.03em;line-height:1}
.bk-trow.bk-oneoff .bk-tv{font-size:20px}
.bk-trow.bk-saving{color:#38c79f}.bk-trow.bk-saving .bk-tv{color:#38c79f}
.bk-trow.bk-launch{color:#a1a1a6}
.bk-bill{display:inline-flex;background:#2c2c2e;border-radius:999px;padding:3px;gap:2px;justify-self:start;margin-top:2px}
.bk-bill button{font:inherit;font-size:13px;font-weight:600;border:0;border-radius:999px;padding:6px 14px;background:transparent;color:#d1d1d6;cursor:pointer}
.bk-bill button[aria-pressed="true"]{background:#f5f5f7;color:#000}
.bk-vat,.bk-from{font-size:12px;color:#8e8e93;margin:4px 0 0}
/* form */
.bk-form{max-width:none;margin:0;padding:22px 24px;background:var(--bg2)}
main>section:nth-of-type(even) .bk-form{background:var(--card)}
.bk-form h2{font-size:20px}
.bk-form .hp{position:absolute;left:-9999px}
.bk-done{max-width:none}
/* catalogue browser */
.bk-catalogue{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;align-items:start}
.bk-tabs{display:grid;gap:4px;position:sticky;top:72px}
.bk-tab{font:inherit;text-align:left;font-size:14.5px;padding:10px 14px;border:0;border-radius:10px;background:transparent;color:var(--ink);cursor:pointer;line-height:1.3}
.bk-tab:hover{background:var(--bg2)}
.bk-tab[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:600}
.bk-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bk-crow{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px 14px;align-items:center;padding:12px 16px;border-radius:var(--r-s);background:var(--bg2)}
main>section:nth-of-type(even) .bk-crow{background:var(--card)}
.bk-cname{font-weight:600;font-size:15px;line-height:1.3}
.bk-cprice{font-size:14px;color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
.bk-pill{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--card);color:var(--ink2);white-space:nowrap}
main>section:nth-of-type(even) .bk-pill{background:var(--bg2)}
.bk-pill-new{background:var(--gift-soft);color:var(--gift)}
.bk-pill-launch{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.bk-reason{grid-column:1/-1;font-size:12.5px;color:var(--ink3)}
.bk-add{font-size:14px;font-weight:600;height:34px;padding:0 14px;background:var(--btn);color:#fff}
.bk-add:hover:not([disabled]){filter:brightness(1.06)}
.bk-add[disabled]{background:var(--hair);color:var(--ink3);cursor:not-allowed}
.bk-add.bk-added,.bk-add.bk-done{background:var(--gift)}
[data-basket-count]{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:11px;font-weight:600;margin-left:6px}
[data-basket-count]:empty{display:none}
.hbasket{display:inline-flex;align-items:center;font-size:13px;color:var(--ink);opacity:.82}
.hbasket:hover{opacity:1;text-decoration:none}
.pkg .bk-choose{align-self:flex-start;margin-top:auto}
.pkg .bk-choose+.btn{margin-top:8px}
.mx td.act{text-align:right;white-space:normal;min-width:120px}.mx td.act .bk-add{margin:2px 0 2px 4px}
.mx .bk-add{height:30px;padding:0 12px;font-size:13px}
@media(max-width:980px){.bk-layout{grid-template-columns:1fr}.bk-side{position:static}.bk-pick{grid-template-columns:repeat(2,minmax(0,1fr))}.bk-catalogue{grid-template-columns:1fr}.bk-tabs{position:static;display:flex;flex-wrap:wrap}}
@media(max-width:640px){.bk-suggest{grid-template-columns:1fr}.bk-crow{grid-template-columns:minmax(0,1fr) auto}.bk-crow .bk-cprice{grid-column:1;grid-row:2}.bk-crow .bk-pill{grid-column:2;grid-row:1}.bk-crow .bk-add{grid-column:2;grid-row:2}.bk-pick{grid-template-columns:1fr}}
[hidden]{display:none!important}
.bk-trow.bk-saving{flex-wrap:wrap}.bk-trow.bk-saving .bk-tl{font-size:13px;flex:1 1 140px}
.bk-trow .bk-tl{min-width:0}
@media(max-width:900px){.hbasket{display:inline-flex}}
@media(max-width:480px){header.top{gap:10px}.hright{gap:8px}.hcta{padding:0 11px}}@media(max-width:399px){.hcta{display:none}}

/* J06 */
/* basket rows: grip | main | (qty | price | move | remove inside .bk-ctl, which takes part in the row grid) */
.bk-ctl{display:contents}
.bk-row>.bk-grip{grid-column:1}
.bk-row>.bk-main{grid-column:2;min-width:160px}
.bk-ctl>.bk-qty{grid-column:3;justify-self:start}
.bk-ctl>.bk-price{grid-column:4}
.bk-ctl>.bk-move{grid-column:5}
.bk-ctl>.bk-remove{grid-column:6}
.bk-covnote{display:block;font-size:12.5px;line-height:1.35;color:var(--ink3)}
.bk-row .bk-covnote{margin-top:2px}
@media (max-width:640px){
  .bk-row{grid-template-columns:30px minmax(0,1fr);row-gap:6px}
  .bk-row>.bk-main{min-width:0}
  .bk-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;grid-column:2}
  .bk-ctl>.bk-price{order:-1;flex:1 1 100%;text-align:left}
  .bk-ctl>.bk-qty,.bk-ctl>.bk-price,.bk-ctl>.bk-move,.bk-ctl>.bk-remove{grid-column:auto}
  .bk-ctl>.bk-remove{margin-left:auto}
}
/* add buttons: in-basket state, service-page controls */
.bk-add.bk-in{background:transparent;color:var(--gift);box-shadow:inset 0 0 0 1.5px var(--gift)}
.bk-add.bk-in:hover{filter:none;background:var(--gift-soft)}
.svc>.svc-act{display:flex;align-items:center;padding-top:4px}
.svc-act .bk-add{height:36px;padding:0 16px;font-size:14px}
.svc>.svc-act+.more{padding-top:0}
.mx td.act .bk-add.bk-in{margin:2px 0 2px 4px}
/* toast */
.bk-toast{position:fixed;left:50%;bottom:24px;z-index:60;max-width:min(92vw,460px);padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:14.5px;font-weight:500;text-align:center;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translate(-50%,12px)}
.bk-toast-on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.bk-toast a{color:var(--bg);font-weight:600;text-decoration:underline}
body.bk-hasbar .bk-toast{bottom:84px}
@media (prefers-reduced-motion:no-preference){
  .bk-toast{transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
  .bk-toast-on{transition:opacity .22s ease,transform .22s ease,visibility 0s}
}
/* totals breakdown */
.bk-break{display:grid;gap:4px;padding-bottom:10px;border-bottom:1px solid #3a3a3c}
.bk-trow.bk-quiet{font-size:13px;color:#a1a1a6}
.bk-trow.bk-quiet .bk-tv{font-size:13px;font-weight:500;color:#d1d1d6}
.bk-hint{font-size:13px;color:#38c79f;margin:0}
/* package panel, clear, count */
.bk-compare{margin:12px 0 0;font-size:14.5px}
.bk-clearwrap{margin-top:12px}
.bk-clear{font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:0;background:transparent;color:var(--ink2);text-decoration:underline;padding:6px 0;border-radius:999px}
.bk-clear:hover{color:var(--ink)}
.bk-clear.bk-armed{background:var(--ink);color:var(--bg);text-decoration:none;padding:6px 14px}
/* checkout form additions */
.bk-contact{border:0;margin:0;padding:0;min-width:0}
.bk-contact legend{padding:0;margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink2)}
.qf .bk-contact .chk{display:inline-flex;align-items:center;margin:0 22px 0 0}
.qf .bk-contact .chk input{width:20px;height:20px;padding:0;margin:0;accent-color:var(--c)}
.bk-preview{border:1px solid var(--hair);border-radius:var(--r-s);background:var(--card)}
main>section:nth-of-type(even) .bk-preview{background:var(--bg2)}
.bk-preview summary{padding:10px 14px;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink)}
.bk-preview pre{margin:0;padding:0 14px 14px;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink2);white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto}
/* catalogue search and rows */
.bk-find{display:grid;gap:6px;max-width:420px;margin:0 0 16px}
.bk-find label{font-size:13px;font-weight:600;color:var(--ink2)}
.bk-find input{font:inherit;font-size:17px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);width:100%}
.bk-ctext{display:grid;gap:2px;min-width:0}
.bk-cblurb{font-size:13px;line-height:1.4;color:var(--ink2)}
.bk-pill-in{background:var(--gift-soft)!important;color:var(--gift)!important}
.bk-none{padding:14px 16px;color:var(--ink2);font-size:15px}
/* sticky quote bar (phones and small tablets) */
.bk-bar{display:none}
@media (max-width:900px){
  .bk-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line);color:var(--ink)}
  .bk-bar-t{font-size:14px;font-weight:600;min-width:0;font-variant-numeric:tabular-nums}
  .bk-bar-btn{font:inherit;font-size:14.5px;font-weight:600;height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--btn);color:#fff;cursor:pointer;white-space:nowrap;flex:none}
  body.bk-hasbar{padding-bottom:76px}
}
@media (max-width:640px){.bk-find{max-width:none}}
/* J06 Lead: small Add on each priced line of a group card */
.svc li.has-add{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px;align-items:center}
.svc li.has-add>span{min-width:0}
.svc li.has-add>b{text-align:right}
.bk-add.sm{height:28px;padding:0 11px;font-size:12.5px;flex:none}
.bk-add.sm.bk-in{padding:0 10px}

.bk-row .bk-price{white-space:nowrap}
@media (max-width:640px){.bk-pick{grid-template-columns:1fr 1fr}}
.svc li.has-add.two{grid-template-columns:minmax(0,1fr) auto}.svc li.has-add.two .acts{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
/* J06 Lead: flow charts with descriptions become tiles instead of an inline chain */
.fchart:has(.t){display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:0 0 16px}
.fchart:has(.t) li{display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:10px;row-gap:6px;padding:14px 16px;border-radius:14px;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 0 1px var(--hair)}
main>section:nth-of-type(even) .fchart:has(.t) li{background:var(--bg)}
.fchart:has(.t) li+li::before{content:none}
.fchart:has(.t) li .who{grid-row:1;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.fchart:has(.t) li .ic{grid-row:1}
.fchart:has(.t) li b{grid-row:1;font-size:15px}
.fchart:has(.t) li .t{grid-column:1/-1;grid-row:2;font-size:13.5px;color:var(--ink2);line-height:1.45}

/* J07b Time Back Check brand: logo lockup, promo bar, nav pill, home feature and sample report */
.tbclogo{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.tbclogo .tbcmark{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--btn);color:#fff;flex:none}
.tbclogo .tbcmark svg{width:24px;height:24px}
.tbclogo .tbcmark svg .d{fill:#fff;opacity:.22}
.tbclogo .tbcword{display:flex;flex-direction:column;line-height:1.05;font-size:19px}
.tbclogo .tbcword small{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-top:3px}
.tbclogo.lg .tbcmark{width:56px;height:56px;border-radius:16px}.tbclogo.lg .tbcmark svg{width:32px;height:32px}.tbclogo.lg .tbcword{font-size:24px}
.tbcpromo{display:block;background:var(--c-soft);color:var(--ink);text-align:center;font-size:13px;line-height:1.35;padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.tbcpromo:hover{text-decoration:none}.tbcpromo b{color:var(--link)}.tbcpromo svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px;color:var(--link)}
.tbcpromo .go{color:var(--link);white-space:nowrap;margin-left:4px}
.topnav a.tbcnav{opacity:1;color:var(--link);font-weight:600;gap:6px}.topnav a.tbcnav svg{width:16px;height:16px}
.tbchome{padding-block:56px;background:var(--bg2)}
.tbchome .tbcgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;align-items:start}
.tbchome h2{font-size:clamp(30px,5vw,44px);letter-spacing:-.03em;line-height:1.05;margin:18px 0 12px;text-wrap:balance}
.tbchome h2 span{color:var(--link)}
.tbchome .lead{color:var(--ink2);font-size:18px;line-height:1.5;margin:0 0 20px}
.tbcpts{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.tbcpts li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font-size:16px;line-height:1.45}
.tbcpts li svg{width:22px;height:22px;color:var(--link);margin-top:1px}
.tbcpts b{display:block}
.tbchome .btns{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin:0}
.tbchome .small{font-size:13px;color:var(--ink2);margin:14px 0 0}
.tbs{background:var(--card);border-radius:var(--r-l);box-shadow:0 1px 0 var(--hair),0 18px 50px rgba(20,30,60,.10);overflow:hidden;min-width:0}
.tbs-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid var(--hair)}
.tbs-top .tbclogo .tbcword{font-size:16px}.tbs-top .tbclogo .tbcmark{width:32px;height:32px;border-radius:10px}.tbs-top .tbclogo .tbcmark svg{width:20px;height:20px}
.tbs-tag{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);background:var(--bg2);border-radius:999px;padding:5px 10px}
.tbs-body{padding:22px;display:grid;gap:22px}
.tbs-who{font-size:14px;color:var(--ink2);margin:0}
.tbs-big{margin:0;font-size:15px;color:var(--ink2)}
.tbs-big b{display:block;font-size:clamp(34px,6vw,48px);letter-spacing:-.04em;line-height:1;color:var(--ink);margin-bottom:4px}
.tbs-val{margin:6px 0 0;font-size:17px;font-weight:600;color:var(--ink)}
.tbs-h{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin:0 0 10px}
.tbs-lv{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.tbs-lv li{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14px}
.tbs-track{position:relative;height:10px;border-radius:999px;background:var(--bg2);overflow:hidden}
.tbs-track i,.tbs-track em{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.tbs-track em{background:var(--c-soft);box-shadow:inset 0 0 0 1px var(--c)}
.tbs-track i{background:var(--btn)}
.tbs-a i{width:50%}.tbs-a em{width:100%}.tbs-m i{width:37%}.tbs-m em{width:68%}.tbs-c i{width:26%}.tbs-c em{width:51%}
.tbs-lv .n{color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
.tbs-wins{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tbs-wins li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 12px;border-radius:var(--r-s);background:var(--bg2);font-size:14px;line-height:1.35}
.tbs-wins .no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;background:var(--btn);color:#fff;font-size:12px;font-weight:600}
.tbs-wins .h{color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
.tbs-wins small{display:block;color:var(--ink2);font-size:12px;margin-top:2px}
.tbs-pkg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:16px;border-radius:var(--r-m);background:var(--c-soft)}
.tbs-pkg p{margin:0}.tbs-pkg .nm{font-weight:600;font-size:17px}.tbs-pkg .pr{font-weight:600;white-space:nowrap}
.tbs-pkg .why{grid-column:1/-1;font-size:14px;color:var(--ink2);line-height:1.45}
.tbs-sum{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.tbs-foot{margin:0;font-size:12px;line-height:1.5;color:var(--ink2);padding:14px 22px;border-top:1px solid var(--hair)}
@media(max-width:860px){.tbchome .tbcgrid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.tbs-lv li{grid-template-columns:84px minmax(0,1fr)}.tbs-lv .n{grid-column:2}.tbs-wins li{grid-template-columns:26px minmax(0,1fr)}.tbs-wins .h{grid-column:2}.tbs-body{padding:18px}.tbs-top{padding:16px 18px}}
.tbc-herologo{margin-bottom:14px}.tbcpage .tbs{max-width:720px;margin:0 auto}.tbcpage-go{display:flex;justify-content:center;margin:28px 0 0}
figure.tbs{margin:0}
.topnav a{white-space:nowrap}
@media(min-width:861px){.topnav ul{gap:18px}}
@media(min-width:861px) and (max-width:1120px){.topnav li.tn-opt{display:none}}
@media(max-width:600px){.tbcpromo .mid{display:none}}
.tbs-big b{font-size:clamp(28px,5vw,40px)}.tbs-wins .h{white-space:normal;text-align:right;max-width:9em}.tbs-lv li{grid-template-columns:110px minmax(0,1fr) minmax(0,9.5em)}.tbs-lv .n{white-space:normal;text-align:right;font-size:13px}@media(max-width:480px){.tbs-lv li{grid-template-columns:84px minmax(0,1fr)}.tbs-lv .n{text-align:left}.tbs-wins .h{text-align:left;max-width:none}}
.tbs-lv li{grid-template-columns:110px minmax(0,1fr) auto}.tbs-lv .n,.tbs-wins .h{white-space:nowrap;max-width:none}@media(max-width:480px){.tbs-lv li{grid-template-columns:84px minmax(0,1fr)}}
@media(min-width:481px){.tbs-lv li{grid-template-columns:110px minmax(0,1fr) 11.5em}.tbs-lv .n{text-align:right}}

/* J07c report v2 */
.tbclogo .tbcmark{background:linear-gradient(140deg,#0a6ad6 0%,#3F5FC8 55%,#6a4fd0 100%);box-shadow:0 6px 18px rgba(63,95,200,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.tbs{position:relative}
.tbs-top{background:linear-gradient(180deg,var(--c-soft),transparent)}
.tbs-who b{color:var(--ink)}
.tbs-hero{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:center}
.tbs-ring{width:120px;height:120px}
.tbs-ring circle{fill:none;stroke-width:12;stroke-linecap:round}
.tbs-ring .r0{stroke:var(--bg2)}.tbs-ring .r2{stroke:var(--c);opacity:.35}.tbs-ring .r1{stroke:var(--btn)}
.tbs-ring .t1{font-size:12px;fill:var(--ink2)}.tbs-ring .t2{font-size:24px;font-weight:700;fill:var(--ink)}
.tbs-same{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--ink2)}.tbs-same b{color:var(--ink)}
.tbs-key{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 0;font-size:12px;color:var(--ink2)}
.tbs-key span{display:inline-block;width:14px;height:8px;border-radius:999px;margin-left:8px}.tbs-key span:first-child{margin-left:0}
.tbs-key .k1{background:var(--btn)}.tbs-key .k2{background:var(--c-soft);box-shadow:inset 0 0 0 1px var(--c)}
.tbs-wins li{grid-template-columns:26px minmax(0,1fr) auto;padding:14px}
.tbs-wins .t{margin:0 0 6px;font-weight:600;font-size:15px}
.tbs-wins .ba{margin:0 0 4px;font-size:13px;line-height:1.45;color:var(--ink2);display:grid;grid-template-columns:48px minmax(0,1fr);gap:6px}
.tbs-wins .ba span{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:2px 0;text-align:center;align-self:start}
.tbs-wins .ba .b{background:var(--bg);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--hair)}
.tbs-wins .ba .a{background:var(--gift-soft);color:var(--gift)}
.tbs-wins .m{margin:6px 0 0;font-size:12px;color:var(--ink2)}
.tbs-wins .h{font-weight:600;color:var(--link)}
.tbs-plan{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;counter-reset:w}
.tbs-plan li{padding:12px;border-radius:var(--r-s);background:var(--bg2);font-size:13px;line-height:1.4;color:var(--ink2);border-top:3px solid var(--btn)}
.tbs-plan b{display:block;color:var(--ink);font-size:14px;margin-bottom:4px}
.tbs-cv{display:grid;gap:10px}
.tbs-cv .row{margin:0;display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14px}
.tbs-cv .bar{position:relative;height:14px;border-radius:999px;background:var(--bg2);overflow:hidden}
.tbs-cv .bar i,.tbs-cv .bar em{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.tbs-cv .c i{width:29%;background:var(--ink2)}
.tbs-cv .v2 em{width:100%;background:var(--gift-soft);box-shadow:inset 0 0 0 1px var(--gift)}.tbs-cv .v2 i{width:55%;background:var(--gift)}
.tbs-cv .v{font-weight:600;white-space:nowrap}
.tbs-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0;padding:16px;border-radius:var(--r-m);background:var(--bg2)}
.tbs-cta span{font-size:13px;color:var(--ink2)}
@media(max-width:640px){.tbs-plan{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.tbs-hero{grid-template-columns:1fr;justify-items:start}.tbs-ring{width:96px;height:96px}.tbs-wins li{grid-template-columns:26px minmax(0,1fr)}.tbs-cv .row{grid-template-columns:1fr}.tbs-plan{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.tbs-ring .r1,.tbs-ring .r2{transition:stroke-dasharray .6s ease}}

.tbchow{margin-top:48px}
.tbchow-h{font-size:clamp(24px,4vw,32px);letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance}.tbchow-h span{color:var(--link)}
.tbcsteps{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:s}
.tbcsteps li{counter-increment:s;position:relative;padding:16px 16px 16px 52px;border-radius:var(--r-m);background:var(--card);box-shadow:0 1px 0 var(--hair);font-size:14px;line-height:1.45;color:var(--ink2)}
.tbcsteps li::before{content:counter(s);position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;background:var(--btn);color:#fff;font-size:13px;font-weight:600}
.tbcsteps b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.tbcrec{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tbcrec li{padding:16px;border-radius:var(--r-m);background:var(--card);box-shadow:0 1px 0 var(--hair);display:grid;gap:6px;align-content:start}
.tbcrec .ic{margin-bottom:4px}
.tbcrec p{margin:0;font-size:14px;line-height:1.45}
.tbcrec .rw{font-weight:600;font-size:15px}.tbcrec .rw::after{content:" →";color:var(--link)}
.tbcrec .rd{color:var(--ink2)}
.tbcrec .rr{color:var(--gift);font-weight:500}
.tbchow-note{font-size:13px;color:var(--ink2);margin:14px 0 0}
@media(max-width:860px){.tbcsteps{grid-template-columns:1fr 1fr}.tbcrec{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tbcsteps,.tbcrec{grid-template-columns:1fr}}

.tbs-cv{display:grid;gap:12px}
.tbs-cv .cvrow{display:grid;gap:6px}
.tbs-cv .cvtop{margin:0;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px}
.tbs-cv .cvbar{position:relative;display:block;height:14px;border-radius:999px;background:var(--bg2);overflow:hidden}
.tbs-cv .cvbar i,.tbs-cv .cvbar em{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.tbs-cv .cvcost i{width:31%;background:var(--ink2)}
.tbs-cv .cvval em{width:100%;background:var(--gift-soft);box-shadow:inset 0 0 0 1px var(--gift)}.tbs-cv .cvval i{width:52%;background:var(--gift)}
.tbs-plan{grid-template-columns:1fr 1fr}
@media(min-width:861px){.tbchome .tbcgrid{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:48px}.tbchome .tbcgrid>div:first-child{position:sticky;top:90px}}
@media(max-width:480px){.tbs-plan{grid-template-columns:1fr}}

/* J07d scanning app, coming soon */
.appsoon{padding-block:56px}
.appgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.appflag{display:inline-block;margin:0 0 12px;padding:5px 12px;border-radius:999px;background:var(--gift-soft);color:var(--gift);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.appsoon h2{font-size:clamp(30px,5vw,44px);letter-spacing:-.03em;line-height:1.05;margin:0 0 12px}.appsoon h2 span{color:var(--link)}
.appsoon .lead{color:var(--ink2);font-size:18px;line-height:1.5;margin:0 0 14px}
.appcaps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.appcaps li{display:grid;gap:10px;padding:16px;border-radius:var(--r-m);background:var(--card);box-shadow:0 1px 0 var(--hair),var(--shadow)}
.appcaps b{display:block;margin-bottom:2px}.appcaps span:not(.ic){font-size:14px;line-height:1.45;color:var(--ink2)}
@media(max-width:860px){.appgrid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.appcaps{grid-template-columns:1fr}}
.appcaps li{align-content:start}

/* J07e header: BluePrint Local lockup, nav titles with icons */
header.top{height:60px;gap:24px}
.logo-link{gap:10px;color:var(--ink)}.logo-link:hover{text-decoration:none}
.bpmark{width:30px;height:30px;color:#14305E;flex:none}
.bpword{display:flex;align-items:baseline;gap:5px;font-family:var(--f-display);font-size:19px;letter-spacing:-.025em;line-height:1;white-space:nowrap}
.bpword b{font-weight:700;color:var(--ink)}.bpword span{font-weight:500;color:var(--link)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .bpmark{color:#fff}}
:root[data-theme="dark"] .bpmark{color:#fff}
.topnav ul{gap:4px}
.topnav li a{gap:6px;padding:6px 10px;border-radius:999px;font-size:13.5px;font-weight:500;opacity:.88;transition:background-color .15s ease,opacity .15s ease}
.topnav li a:hover{background:var(--c-soft);opacity:1}
.topnav li a[aria-current]{background:var(--c-soft);color:var(--link);opacity:1;font-weight:600}
.topnav .ni{width:17px;height:17px;flex:none;color:var(--link)}
.topnav .tn-tbc a{color:var(--link);opacity:1;font-weight:600;box-shadow:inset 0 0 0 1px var(--c-soft)}
.hbasket,.hlogin{gap:6px;font-weight:500}.hbasket .ni,.hlogin .ni{width:17px;height:17px;color:var(--link)}
.hlogin{display:inline-flex;align-items:center}
@media(max-width:480px){.bpmark{width:26px;height:26px}.bpword{font-size:17px}header.top{height:56px}}
@media(max-width:360px){.bpword span{display:none}}
@media(max-width:900px){.hlogin{display:none}}

@media (min-width:1025px){header.top{padding-left:max(22px,calc((100% - 1240px)/2 + 22px));padding-right:max(22px,calc((100% - 1240px)/2 + 22px))}}
.topnav li.tn-opt{display:none}
@media(min-width:2000px){.topnav li.tn-opt{display:list-item}}
@media(max-width:1260px){.topnav .ni{display:none}.topnav li a{padding:6px 8px}}
@media(max-width:1480px){.hbasket .hlbl,.hlogin .hlbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.hbasket .ni,.hlogin .ni{display:inline-block;width:20px;height:20px}}
@media(max-width:1040px){.topnav li a{font-size:13px;padding:6px 6px}.topnav ul{gap:0}header.top{gap:14px}}
@media(min-width:901px) and (max-width:1000px){.topnav li:nth-child(5){display:none}}

/* J07f Sage page: Your numbers, in order */
.numsplit{align-items:start}
.numcard{margin:0;background:var(--card);border-radius:var(--r-l);box-shadow:0 1px 0 var(--hair),0 18px 50px rgba(20,30,60,.10);overflow:hidden;min-width:0}
.numtop{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--hair);background:linear-gradient(180deg,var(--c-soft),transparent)}
.numtop .nt{margin:0;display:flex;align-items:center;gap:8px;font-weight:600}.numtop .nt svg{width:20px;height:20px;color:var(--link)}
.numwho{margin:0;padding:16px 20px 4px;font-size:14px;line-height:1.5;color:var(--ink2)}.numwho b{color:var(--ink)}
.numflow{list-style:none;margin:0;padding:12px 20px;display:grid;gap:10px;counter-reset:n}
.numflow li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px;border-radius:var(--r-m);background:var(--bg2)}
.numflow li+li::before{content:"";position:absolute;left:31px;top:-11px;width:2px;height:12px;background:var(--c);opacity:.4}
.nic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(140deg,#0a6ad6,#3F5FC8);color:#fff}.nic svg{width:22px;height:22px}.nic svg .d{fill:#fff;opacity:.22}
.numflow .nh{margin:0 0 6px;font-weight:600;font-size:15px}
.numflow .nb{margin:0 0 4px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px;font-size:13px;line-height:1.45;color:var(--ink2)}
.numflow .nb span{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:2px 0;text-align:center;align-self:start}
.numflow .was{background:var(--bg);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--hair)}.numflow .now{background:var(--gift-soft);color:var(--gift)}
.ntag{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gift);background:var(--gift-soft);border-radius:999px;padding:4px 9px;white-space:nowrap}
.ntag.proj{color:var(--link);background:var(--c-soft)}
.numsum{margin:4px 20px 0;padding:14px 16px;border-radius:var(--r-m);background:var(--c-soft)}
.numsum p{margin:0;font-size:14px;line-height:1.5}.numsum b{color:var(--ink)}.numsum .numcost{margin-top:6px;color:var(--ink2);font-size:13px}
.numfoot{margin:0;padding:14px 20px;font-size:12px;line-height:1.5;color:var(--ink2)}
.numsec .btns{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
@media(max-width:480px){.numflow li{grid-template-columns:40px minmax(0,1fr)}.numflow .ntag{grid-column:2;justify-self:start}.numflow{padding:12px}.numwho,.numtop,.numfoot{padding-left:16px;padding-right:16px}.numsum{margin-left:12px;margin-right:12px}}
@media(min-width:861px){.numsplit>.sh{position:sticky;top:96px}}

/* J07g mobile menu icons */
.mpanel li a{display:flex;align-items:center;gap:10px}
.mpanel .mi{width:18px;height:18px;flex:none;color:var(--link)}
.mpanel{position:absolute;top:100%;background:var(--bg);max-height:calc(100vh - 130px)}.mmenu{position:static}

/* v1.7: compare table keeps its label column in view when scrolled sideways */
.mx.cmp thead th.corner,.mx.cmp tbody th[scope="row"]{position:sticky;left:0;z-index:1;background:var(--card);box-shadow:1px 0 0 var(--hair)}
.mx.cmp thead th.corner{background:var(--bg2);z-index:2}
@media (max-width:560px){.mx.cmp thead th.corner,.mx.cmp tbody th[scope="row"]{min-width:150px;max-width:170px}}

/* v1.7: footer link targets at least 24px tall (WCAG 2.5.8); links inside sentences are exempt */
footer .fgrid li a,footer a.famlink{display:inline-flex;align-items:center;min-height:24px}
footer .fgrid ul{gap:0}
footer a.famlink{justify-self:start}

/* v1.7: 375 to 419px header keeps at least 16px right margin for the Menu button */
@media(max-width:419px){header.top{gap:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}.hright{gap:6px}.hcta{padding:0 9px;font-size:13px}}
@media(max-width:399px){.hcta{display:none}}

/* v1.7: anchor jumps and focus land below the sticky header (60px, 56px on phones) */
html{scroll-padding-top:84px}
:target{scroll-margin-top:84px}
.mx.cmp .grpl{position:sticky;left:14px;display:inline-block}

/* J07h review v1.7 safe fixes */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:480px){#main p:not(.lead):not(.tbs-big):not(.tbc-big),#main li,#main dd{font-size:max(15px,1em);line-height:1.5}}
/* v1.8: header phone link */
.hphone{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ink);opacity:.82;white-space:nowrap}
.hphone:hover{opacity:1;text-decoration:none}
.hphone .ni{width:17px;height:17px;color:var(--link)}
@media(max-width:1480px){.hphone .hlbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.hphone .ni{display:inline-block;width:20px;height:20px}}
@media(max-width:900px){.hphone{display:none}}
/* J07i swap: replace-everything table and build-it-better (23 Oct 2026) */
.swapwrap{display:grid;gap:18px}
.swaphead{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:14px;padding:0 20px 0 70px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.swaphead span:last-child{grid-column:3;color:var(--c)}
.swaprows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.swaprows li{display:grid;grid-template-columns:40px minmax(0,1fr) 22px minmax(0,1fr);gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r-m);background:var(--bg2)}
main>section:nth-of-type(even) .swaprows li{background:var(--card)}
.swaprows .ic{width:40px;height:40px;background:var(--card);color:var(--ink3);--ica:var(--ink3)}
main>section:nth-of-type(even) .swaprows .ic{background:var(--bg2)}
.sw-was b{display:block;font-size:15px;font-weight:600;text-decoration:line-through;text-decoration-color:var(--ink3)}
.sw-was span{display:block;font-size:13px;color:var(--ink3);line-height:1.4;margin-top:2px}
.sw-to{width:18px;height:18px;color:var(--c)}
.sw-now{font-size:14px;line-height:1.45;font-weight:500;color:var(--ink);padding:8px 10px;border-radius:var(--r-s);background:var(--c-soft)}
.swaphead{display:none}
.swapbuild{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;padding:26px;border-radius:var(--r-l,22px);background:var(--c-soft)}
.sb-k{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
.sb-k .ic{width:32px;height:32px;border-radius:9px;background:var(--c);color:var(--on-c);--ica:var(--on-c)}
.sb-k .ic svg{width:18px;height:18px}
.swapbuild h3{margin:0 0 8px;font-size:22px;line-height:1.25;text-wrap:balance}
.swapbuild .sb-txt p:last-child{margin:0;font-size:15px;line-height:1.55;color:var(--ink2)}
.sb-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:center}
.sb-steps li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-s);background:var(--card);font-size:14.5px;line-height:1.45;color:var(--ink2)}
.sb-steps li b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:var(--on-c);font-size:14px}
.sb-steps strong{color:var(--ink)}
.swapbtns{justify-content:center;margin:4px 0 0}
@media (max-width:1100px){.swaprows{grid-template-columns:1fr}}
@media (max-width:760px){.swapbuild{grid-template-columns:1fr;padding:20px}}
@media (max-width:560px){.swaprows li{grid-template-columns:36px minmax(0,1fr);gap:8px 12px}.swaprows .ic{width:36px;height:36px;grid-row:span 2}.sw-to{display:none}.sw-now{grid-column:2}}
/* J07j services refresh: pillars, three ways in, bundles, introductions, family footer (23 Oct 2026) */
:root{--herebg:#e6eaf7;--pa:#3F5FC8;--pb:#0a7075;--pc:#a0620a;--pd:#11806a;--pe:#6a4fc8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--herebg:#262a37;--pa:#8FAAF4;--pb:#3cc8cd;--pc:#e3b062;--pd:#38c79f;--pe:#b3a2f7}}
:root[data-theme="dark"]{--herebg:#262a37;--pa:#8FAAF4;--pb:#3cc8cd;--pc:#e3b062;--pd:#38c79f;--pe:#b3a2f7}
/* pillars */
.dnac.d1{--pk:var(--pa)}.dnac.d2{--pk:var(--pb)}.dnac.d3{--pk:var(--pc)}.dnac.d4{--pk:var(--pd)}
.dnac{position:relative;overflow:hidden;gap:10px;padding:24px;background-image:linear-gradient(160deg,color-mix(in srgb,var(--pk) 12%,transparent),transparent 55%)}
.dnac .dnum{position:absolute;top:20px;right:22px;font-family:var(--f-display);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--pk);opacity:.8}
.dnac .ic{width:48px;height:48px;border-radius:14px;background:var(--pk);color:var(--card);--ica:var(--card);box-shadow:0 6px 16px color-mix(in srgb,var(--pk) 30%,transparent)}
.dnac .ic svg{width:24px;height:24px}
.dnac h3{font-size:21px;letter-spacing:-.02em;margin-top:8px}
.dnac .more{color:var(--pk);font-weight:600}
@media (max-width:640px){
  .dna .sh{margin-bottom:20px}
  .dnag{gap:10px}
  .dnac{grid-template-columns:48px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:18px}
  .dnac .ic{grid-row:1 / span 3}
  .dnac h3{margin-top:0;font-size:19px}
  .dnac p{font-size:15px}
  .dnac .more{padding-top:4px}
  .dnac .dnum{top:16px;right:16px}
}
/* three ways in */
ol.depths{list-style:none;margin:0;padding:0;counter-reset:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:relative}
ol.depths::before{content:"";position:absolute;left:12%;right:12%;top:39px;height:2px;background:linear-gradient(90deg,var(--c-soft),var(--c),var(--c-soft));z-index:0}
ol.depths .depth{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:10px;padding:22px 20px 24px}
ol.depths .depth .num{width:36px;height:36px;font-size:15px;margin:0;box-shadow:0 0 0 6px var(--bg2)}
main>section:nth-of-type(even) ol.depths .depth .num{box-shadow:0 0 0 6px var(--card)}
ol.depths .depth>div{display:grid;gap:6px;justify-items:center}
ol.depths .depth p{margin:0}
ol.depths .depth p:last-child{margin-top:4px}
ol.depths .depth .more{font-weight:600}
ol.depths .depth.here{box-shadow:inset 0 0 0 2px var(--c);background:var(--c-soft)}
.herek{margin:0;font-size:11.5px!important;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--c)!important}
@media (max-width:760px){
  ol.depths{grid-template-columns:1fr;gap:10px}
  ol.depths::before{left:37px;right:auto;top:30px;bottom:30px;width:2px;height:auto;background:linear-gradient(180deg,var(--c-soft),var(--c),var(--c-soft))}
  ol.depths .depth{grid-template-columns:36px minmax(0,1fr);justify-items:start;text-align:left;gap:14px;padding:18px 18px 18px 20px;align-items:start}
  ol.depths .depth>div{justify-items:start}
}
/* bundles */
.bgrid{gap:14px}
.bun{gap:10px;padding:24px;border-top:4px solid var(--gift)}
.bun .bh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.bun .bh h3{margin:0;font-size:21px;letter-spacing:-.02em}
.bun .bs{position:static;flex:none;font-size:12.5px;padding:5px 11px}
.bun .bp{margin:4px 0 0;display:flex;align-items:baseline;gap:6px;color:var(--ink2)}
.bun .bp b{font-size:36px;color:var(--ink);margin:0}
.bun .bm s{text-decoration-thickness:1.5px}
.bun ul{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--hair);display:grid;gap:9px;font-size:14.5px}
.bun ul li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:baseline}
.bun ul li::before{content:"";width:16px;height:16px;border-radius:50%;align-self:center;background:var(--gift) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.bun ul li span{color:var(--ink)}
.bun ul li b{font-weight:500;color:var(--ink3);font-variant-numeric:tabular-nums}
.bundles .note{text-align:center;margin-top:16px;font-size:14px;color:var(--ink3)}
/* introductions */
.introbox{border-radius:var(--r-l);padding:clamp(20px,3vw,32px);background:var(--bg2);display:grid;gap:20px}
main>section:nth-of-type(even) .introbox{background:var(--card)}
.introhd{display:flex;gap:16px;align-items:flex-start}
.introhd>.ic{flex:none;width:48px;height:48px;border-radius:14px;background:var(--c);color:var(--on-c);--ica:var(--on-c)}
.introhd h2{margin:0 0 6px;font-size:clamp(22px,2.6vw,28px);letter-spacing:-.025em;text-wrap:balance}
.introhd h2 span{color:var(--c)}
.introhd p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink2);max-width:60ch}
.introl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.introl li{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r-m);background:var(--card)}
main>section:nth-of-type(even) .introl li{background:var(--bg2)}
.introl .ic{flex:none;width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--pk) 14%,transparent);color:var(--pk);--ica:var(--pk)}
.introl .i1{--pk:var(--pd)}.introl .i2{--pk:var(--pc)}.introl .i3{--pk:var(--pe)}.introl .i4{--pk:var(--pb)}
.introl b{display:block;font-size:15px;color:var(--ink)}
.introl div span{display:block;font-size:13.5px;line-height:1.4;color:var(--ink2);margin-top:2px}
@media (max-width:1000px){.introl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.introl{grid-template-columns:1fr}.introhd{flex-direction:column;gap:12px}}
/* family footer */
footer .fam{order:3;padding-top:4px}
footer .fbar{order:4}
footer .famh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 14px;font-size:15px;font-weight:600;letter-spacing:-.01em}
footer .famh span{font-size:12.5px;font-weight:400;color:var(--ink3)}
.famgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.famc{position:relative;gap:8px;padding:18px 18px 16px;border-top:3px solid var(--co);background-image:linear-gradient(170deg,color-mix(in srgb,var(--co) 9%,transparent),transparent 60%)}
.famc.fs{--co:var(--pb)}.famc.fb{--co:var(--pe)}.famc.fw{--co:var(--pc)}.famc.fk{--co:var(--pd)}
.fmark{width:28px;height:28px}
.fword b{font-size:16px}
.fword i{color:var(--co)}
.famleg{margin:0;font-size:11.5px}
.famtxt{font-size:13px;line-height:1.5}
.famlink{color:var(--co);font-weight:600;word-break:break-word}
.fkic{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--co);color:var(--card);--ica:var(--card);flex:none}
.fkic svg{width:18px;height:18px}
.flogo{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.flogo .bpmark{width:26px;height:26px}.flogo .bpword{font-size:17px}
@media (max-width:1000px){.famgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.famgrid{grid-template-columns:1fr;gap:10px}.famc{grid-template-columns:minmax(0,1fr)}}
ol.depths .depth.here,main>section:nth-of-type(even) ol.depths .depth.here{background:var(--herebg)}
@media (max-width:520px){.famtxt{font-size:13.5px}.famleg{font-size:12px}}
/* J07k smoother scrolling (25 Oct 2026): lighter reveal, no glass blur or endless motion on phones and tablets */
html.anim .rv{transform:translateY(10px)}
html.anim .rv.in{transition:opacity .35s ease-out,transform .35s ease-out}
html.anim .rv.in:nth-child(n+2){transition-delay:0s}
@media (hover:none),(max-width:900px){
  header.top,.mpanel{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
  .bar,.bar::after,.cflow::after,.cflow li .cn{animation:none}
  .dnac,.famc{background-image:none}
}

/* v1.8.6: QA fixes. Phone tables get a swipe hint; compare headers stack; print stylesheet. */
@media(max-width:700px){.mx::before{content:"Swipe sideways to see every column";display:block;position:sticky;left:0;font-size:12px;line-height:1.4;color:var(--muted);padding:0 0 6px}}
.mx:focus-visible{outline:2px solid var(--link,#0066cc);outline-offset:2px}
.cmp thead th span{display:block}
@media print{.tbcpromo,.draftbar,header,.mpanel,footer,.bk-add,.stickycta,.stickyx,.themebtn,.hbasket,.skip,.toast,.wafab{display:none!important}body{background:#fff;color:#000}a{color:#000;text-decoration:none}.mx{overflow:visible}}
/* v1.8.6: keep the basket icon in the phone header without overflow */
@media(max-width:480px){header.top{gap:6px}.hright{gap:2px}.hbasket{gap:3px}.hbasket [data-basket-count]{min-width:16px;height:16px;padding:0 4px;font-size:11px}.hcta{padding:0 9px}.mmenu summary{padding-left:8px;padding-right:8px}}
@media(max-width:430px){.hright > .themebtn{display:none}}

/* Time Back example report, modernised 30 Oct 2026 (v1.8.9): warmer, more optimistic, same figures */
.tbs{border-radius:24px;box-shadow:0 18px 50px -24px rgba(0,60,140,.35);overflow:hidden}
.tbs-top{background:linear-gradient(135deg,var(--c-soft),transparent 75%)}
.tbs-tag{background:var(--btn);color:#fff}
.tbs-welcome{display:grid;gap:8px}
.tbs-eyebrow{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.tbs-title{margin:0;font-size:clamp(22px,3.4vw,30px);line-height:1.15;letter-spacing:-.02em}
.tbs-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.tbs-chips li{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--gift-soft);color:var(--gift)}
.tbs-hero{padding:18px;border-radius:20px;background:linear-gradient(135deg,var(--c-soft),var(--bg2))}
.tbs-wins li{background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair),0 6px 18px -12px rgba(0,60,140,.35);border-left:4px solid var(--gift)}
.tbs-wins .h{align-self:start;font-weight:500;font-size:12px;color:var(--gift);background:var(--gift-soft);border-radius:12px;padding:6px 10px;text-align:right}
.tbs-wins .h b{display:block;font-size:14px}
.tbs-plan li{background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair);border-top:0;position:relative;padding-top:16px}
.tbs-plan li::before{content:"";position:absolute;top:0;left:12px;right:12px;height:4px;border-radius:0 0 4px 4px;background:var(--btn)}
.tbs-ratio{margin:10px 0 4px;font-size:16px;color:var(--ink)}
.tbs-ratio b{color:var(--gift)}
.tbs-cta{justify-content:space-between;background:linear-gradient(135deg,var(--c-soft),var(--bg2));padding:20px}
.tbs-ctat{display:grid;gap:2px;font-size:13px;color:var(--ink2)}
.tbs-ctat b{font-size:17px;color:var(--ink)}
@media(max-width:480px){.tbs-wins .h{text-align:left}.tbs-hero{padding:14px}}

.tbcvalue{margin:0 0 20px;padding:14px 16px;border-radius:var(--r-m);background:var(--gift-soft);color:var(--ink);font-size:16px;line-height:1.45}
.tbcvalue b{color:var(--gift)}

/* Package cards v1.8.9: value pills, clearer colour identity */
.pkg .val{display:inline-block;margin-top:6px;font-style:normal;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--gift-soft);color:var(--gift)}
.pkg .val span{font-weight:500;opacity:.85}
.pkg.k4 .val{background:rgba(255,255,255,.12);color:var(--gold)}
.pkg.k1{box-shadow:inset 0 4px 0 #6aa9ff}.pkg.k2{box-shadow:inset 0 4px 0 #34c4a0}.pkg.k3{box-shadow:inset 0 4px 0 var(--btn)}.pkg.k4{box-shadow:inset 0 4px 0 var(--gold)}
.pkg .emb{box-shadow:0 8px 18px -10px rgba(0,60,140,.5)}
.bk-form[hidden]{display:none!important}
.bk-choose.bk-in{background:transparent;color:var(--gift);box-shadow:inset 0 0 0 1.5px var(--gift)}

/* v1.8.10 accessibility fixes (contrast, tap targets) */
.pkg.k4{--gold:#e3c169}
.pkg .val{color:#0a5a4a}
.pkg.k4 .val{color:#e3c169}
.pkg .val span{opacity:1}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .pkg .val{color:var(--gift)}:root:not([data-theme=light]) .pkg.k4 .val{color:#e3c169}}
:root[data-theme=dark] .pkg .val{color:var(--gift)}:root[data-theme=dark] .pkg.k4 .val{color:#e3c169}
.pill.held,.pill.wait{color:#74500c}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .pill.held,:root:not([data-theme=light]) .pill.wait{color:var(--gold)}}
:root[data-theme=dark] .pill.held,:root[data-theme=dark] .pill.wait{color:var(--gold)}
.hbasket,.hphone{min-height:32px;min-width:24px}
.crumbs a{display:inline-block;padding:4px 0}
footer a{display:inline-block;padding:4px 0}
a.more{display:inline-block;padding:4px 0}
.qf input[type=checkbox]{flex:none;min-width:18px;min-height:18px}

/* v1.8.12: phone header. Real Menu button, 44px tap targets, theme toggle and Get a quote inside the menu on the narrowest screens,
   and always at least 16px of space to the right of the Menu button. */
.mbtn{display:none;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 6px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;border-radius:8px}
.mbtn:focus-visible{outline:2px solid var(--link);outline-offset:1px}
.mtools{display:none}
.mmenu.enh > summary{display:none}
@media(max-width:900px){
  .mbtn{display:inline-flex}
  .logo-link{min-height:44px}
  .hbasket{min-height:44px;min-width:44px;justify-content:center}
  .hcta{height:44px;border:solid transparent;border-width:7px 0;background-clip:padding-box;box-sizing:border-box}
  header.top{padding-right:max(16px,env(safe-area-inset-right,0px))}
}
@media(max-width:480px){.hright{gap:2px}.hcta{padding:0 10px}}
@media(max-width:430px){
  .bpword{font-size:15px}
  .mtools{display:flex;flex-wrap:wrap;gap:10px;grid-column:1/-1;align-items:center;padding:6px 0 2px}
  .mtheme{display:inline-flex;align-items:center;gap:8px;width:auto;height:44px;padding:0 14px;border:1px solid var(--hair);border-radius:999px;opacity:1;font:inherit;font-size:15px;color:var(--ink)}
  .mtheme svg{width:18px;height:18px;flex:none}
  .mcta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--btn);color:#fff;font-size:15px;font-weight:600}
  .mcta:hover{text-decoration:none;filter:brightness(1.06)}
}
@media(min-width:400px){.mcta{display:none}}

/* v1.8.12: floating WhatsApp button. A plain link; WhatsApp green is used on this button only. */
.wafab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#128C7E;color:#fff;border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.wafab svg{width:30px;height:30px;display:block}
.wafab:hover{filter:brightness(1.08);text-decoration:none}
.wafab:focus-visible{outline:3px solid var(--link);outline-offset:3px}
footer .fbar{padding-bottom:72px}
@media(max-width:900px){body.bk-hasbar .wafab{bottom:calc(88px + env(safe-area-inset-bottom,0px))}}

/* v1.8.13: contact bar above the header, "Talk to a real person" footer band, offices line. Colours come from the site tokens, so light and dark both work. */
.cbar{background:var(--bg2);border-bottom:1px solid var(--hair)}
.cbar-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px))}
.cpill{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:14px;font-weight:600;line-height:1;white-space:nowrap}
.cpill:hover{text-decoration:none;border-color:var(--link);color:var(--link)}
.cpill:focus-visible,.tcard:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.cpill svg{width:18px;height:18px;flex:none;color:var(--link)}
.cpill .cn{display:none}
.cpill.cwa{background:#0b6b5f;border-color:#0b6b5f;color:#fff}.cpill.cwa svg{color:#fff}.cpill.cwa:hover{filter:brightness(1.12);color:#fff}
@media(min-width:640px){.cpill .cs{display:none}.cpill .cn{display:inline}.cbar-in{padding-top:5px;padding-bottom:5px}.cpill{min-height:36px}}
@media(max-width:639px){.cbar-in{flex-wrap:nowrap;gap:6px}.cpill{flex:0 1 auto;padding:0 10px;gap:5px;font-size:13.5px}.cpill svg{width:16px;height:16px}.cpill .us{display:none}}
.talk{padding:40px 0 8px}
.talkc{background:var(--bg2);border:1px solid var(--hair);border-radius:28px;padding:28px;box-shadow:var(--shadow)}
.talkh{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.talkh h2{margin:0;font-size:clamp(24px,4vw,34px);line-height:1.1}
.talkic{flex:none;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--btn);color:#fff}
.talkic svg{width:34px;height:34px}
.talkg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tcard{display:flex;align-items:center;gap:14px;min-height:88px;padding:16px 18px;border-radius:20px;background:var(--card);border:1px solid var(--line);color:var(--ink);transition:border-color .2s,transform .2s}
.tcard:hover{text-decoration:none;border-color:var(--link);transform:translateY(-2px)}
.tcard .tpin{flex:none;width:30px;height:30px;color:var(--link)}
.tcard .tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tcard b{font-size:15px;color:var(--ink2);font-weight:600}
.tcard .tn{font-family:var(--f-display);font-size:clamp(20px,2.4vw,24px);font-weight:700;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.tcard small{font-size:13px;color:var(--ink2)}
.tcard.twa{background:#0b6b5f;border-color:#0b6b5f}.tcard.twa b,.tcard.twa .tn,.tcard.twa small,.tcard.twa .tpin{color:#fff}.tcard.twa .tn{font-size:18px}
.tcol{display:flex;flex-direction:column;gap:8px;min-width:0}.taddr,.addr{font-size:13.5px;color:var(--ink2);margin:0;padding:0 4px}
.offices{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:18px 0 0;font-size:14.5px;color:var(--ink2)}
.offices svg{width:15px;height:15px;color:var(--link);flex:none;margin-left:6px}.offices svg:first-child{margin-left:0}
.feat .offices{margin-top:10px;font-size:13.5px}
.callwa .btns{margin-top:10px}.callwa div>span a{display:inline-block;padding:3px 0}
@media(max-width:820px){.talkg{grid-template-columns:1fr}.talkc{padding:20px;border-radius:22px}.talkic{width:54px;height:54px}.talkic svg{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){.tcard,.cpill{transition:none}.tcard:hover{transform:none}}
@media print{.cbar,.talk{display:none!important}}
.talkh h2{color:var(--ink)}

.offs{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--hair)}.offh{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}.offs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 24px}.offs li{display:flex;align-items:flex-start;gap:6px;font-size:14.5px;color:var(--ink2);margin:0;padding:0}.offs li svg{width:15px;height:15px;margin-top:3px;color:var(--link);flex:none}
@media(max-width:820px){.offs ul{flex-direction:column}}

/* v1.8.15: "See our 4 packages" button in a slim row directly under the sticky header (header is 60px, 56px on phones).
   Sizes are fluid: the bar is 44px tall for touch (up to 1024px wide) and 36px with a mouse. */
.pkbar{position:sticky;top:calc(60px + env(safe-area-inset-top,0px));z-index:49;display:flex;justify-content:center;align-items:center;gap:8px;padding:5px max(16px,env(safe-area-inset-right,0px)) 5px max(16px,env(safe-area-inset-left,0px));background:var(--nav);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--hair)}
.pkbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 18px;border-radius:999px;background:var(--btn);color:#fff;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;box-shadow:0 4px 14px -6px rgba(0,80,180,.55);-webkit-tap-highlight-color:transparent;transition:filter .15s ease,transform .15s ease,box-shadow .15s ease}
.pkbtn:hover{text-decoration:none;filter:brightness(1.08);color:#fff;box-shadow:0 6px 18px -6px rgba(0,80,180,.6)}
.pkbtn:active{transform:translateY(1px);filter:brightness(.96);box-shadow:none}
.pkbtn:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.pkbtn svg{width:18px;height:18px;flex:none}
.pkb-a{transition:transform .15s ease}.pkbtn:hover .pkb-a{transform:translateX(3px)}
.pkq{display:none}
@media(max-width:1024px){.pkbtn{min-height:44px;font-size:15px}.pkbar{padding-top:4px;padding-bottom:4px}}
@media(prefers-reduced-motion:reduce){.pkbtn,.pkb-a{transition:none}.pkbtn:hover .pkb-a,.pkbtn:active{transform:none}html{scroll-behavior:auto}}
/* Anchors land just under the two sticky bars. scroll-padding (on html) and scroll-margin (on the target) add together, so the target keeps a small margin only. */
html{scroll-padding-top:112px}
:target{scroll-margin-top:8px}
#four-packages{scroll-margin-top:8px}
@media(max-width:1024px){html{scroll-padding-top:120px}}
@media(max-width:480px){html{scroll-padding-top:116px}}
@media(max-height:420px) and (orientation:landscape){html{scroll-padding-top:72px}}
@media print{.pkbar{display:none!important}}

/* v1.8.15: phone and tablet header re-layout. Two zones: logo left (mark and wordmark, never wrapping), one evenly spaced control group right
   (theme, basket with its count as a badge on the icon, Menu), every control a 44px square with 8px gaps. "Get a quote" leaves the header row on
   phones (it sits beside "See our 4 packages" from 360px up and inside the menu). Sizes are fluid, so each phone gets the room it has. */
@media(max-width:900px){
  header.top{height:clamp(56px,14vw,60px);gap:8px;padding-left:max(clamp(12px,4vw,20px),env(safe-area-inset-left,0px));padding-right:max(clamp(12px,4vw,20px),env(safe-area-inset-right,0px))}
  .pkbar{top:calc(clamp(56px,14vw,60px) + env(safe-area-inset-top,0px))}
  .logo-link{flex:0 1 auto;min-width:0;gap:clamp(6px,2vw,9px);min-height:44px}
  .bpmark{width:clamp(26px,7.4vw,30px);height:clamp(26px,7.4vw,30px)}
  .bpword{font-size:clamp(16px,4.6vw,19px)}
  .hright{margin-left:auto;gap:8px;flex:none;align-items:center}
  .hright>.themebtn,.hbasket,.mbtn{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;display:inline-grid;place-items:center;border-radius:12px;opacity:1;position:relative;color:var(--ink);-webkit-tap-highlight-color:transparent;transition:background-color .15s ease}
  .hright>.themebtn{display:inline-grid}
  .hright>.themebtn:hover,.hbasket:hover,.mbtn:hover,.hright>.themebtn:active,.hbasket:active,.mbtn:active{background:var(--bg2);opacity:1;text-decoration:none}
  .mbtn[aria-expanded="true"]{background:var(--bg2)}
  .themebtn svg,.hbasket .ni{width:23px;height:23px}
  .hbasket .ni{color:var(--link)}
  .hbasket .hlbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hbasket{gap:0}
  .hbasket [data-basket-count]{position:absolute;top:3px;right:2px;margin:0;min-width:18px;height:18px;padding:0 4px;font-size:11px;line-height:18px;box-shadow:0 0 0 2px var(--bg)}
  .mbtn .mlbl{font-size:14px;font-weight:500}
  .mbtn{grid-auto-flow:column;gap:8px;width:auto;padding:0 10px}
  .mbars{width:22px;height:14px;background:linear-gradient(var(--ink) 0 2px,transparent 2px 6px,var(--ink) 6px 8px,transparent 8px 12px,var(--ink) 12px 14px)}
  .mbtn:focus-visible{outline:3px solid var(--link);outline-offset:2px}
  .hcta{height:44px;border:0;background-clip:border-box;padding:0 16px;font-size:14px;font-weight:600;border-radius:999px}
  .mpanel{top:100%}
}
@media(max-width:480px){
  .mbtn{width:44px;padding:0}.mbtn .mlbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media(max-width:640px){
  .hcta{display:none}
  .mtools{display:flex}.mcta{display:inline-flex}.mtheme{display:none}
  /* v1.8.17: on phones the packages button is a quiet pill: soft tint, 13px type, 34px tall, no fill or shadow; the 44px hit area comes from ::before. Desktop and tablet keep the v1.8.15 button. */
  .pkbar{padding-top:5px;padding-bottom:5px}
  .pkbtn{position:relative;flex:0 1 auto;min-width:0;min-height:34px;padding:0 12px;gap:6px;font-size:13px;background:var(--c-soft);color:var(--link);box-shadow:none;border:1px solid color-mix(in srgb,var(--link) 26%,transparent);filter:none;transition:background-color .15s ease}
  .pkbtn::before{content:"";position:absolute;inset:-5px;border-radius:inherit}
  .pkbtn:hover,.pkbtn:active{color:var(--link);filter:none;box-shadow:none;transform:none;background:color-mix(in srgb,var(--link) 18%,transparent)}
  .pkbtn svg{width:15px;height:15px}
  .pkq{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--link) 40%,transparent);color:var(--link);font-size:13px;font-weight:600;white-space:nowrap;-webkit-tap-highlight-color:transparent}
  .pkq::before{content:"";position:absolute;inset:-5px;border-radius:inherit}
  .pkq:hover,.pkq:active{text-decoration:none;background:var(--c-soft)}
  .pkq:focus-visible{outline:3px solid var(--link);outline-offset:2px}
}
@media(max-width:359px){.pkq{display:none}}
@media(min-width:340px){.bpword span{display:inline}}
@media(max-width:339px){.bpword span{display:none}}
@media(max-height:420px) and (orientation:landscape){.pkbar{position:static}}

/* v1.8.15: contact bar, floating WhatsApp button and the "Talk to a real person" band: touch sizes up to 1024px, safe-area aware, fluid padding. */
@media(min-width:640px) and (max-width:1024px){.cpill{min-height:44px}.cbar-in{padding-top:6px;padding-bottom:6px}}
@media(max-width:639px){.cpill{font-size:clamp(12.5px,3.6vw,13.5px);padding:0 clamp(8px,2.6vw,10px);gap:clamp(4px,1.2vw,5px)}.cbar-in{gap:clamp(4px,1.6vw,6px);padding-left:max(clamp(8px,3vw,16px),env(safe-area-inset-left,0px));padding-right:max(clamp(8px,3vw,16px),env(safe-area-inset-right,0px))}}
.cpill:active{border-color:var(--link);background:var(--bg2)}
.cpill.cwa:active{filter:brightness(.95)}
.wafab{right:max(16px,env(safe-area-inset-right,0px))}
.wafab:active{filter:brightness(.95)}
@media(max-width:400px){.talk{padding-top:32px}.talkc{padding:clamp(14px,4vw,20px);border-radius:20px}.tcard{padding:14px 16px;gap:12px;min-height:80px}.talkh{gap:12px;margin-bottom:16px}}
@media(max-width:360px){.tcard .tn{font-size:19px}.tcard.twa .tn{font-size:16.5px}}

/* v1.8.15: the four package cards stack in one column on phones (no half-visible second card, no blank space under a short card). */
@media(max-width:700px){
  .pgrid{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible;scroll-snap-type:none;padding:0;margin-inline:0;gap:16px;align-items:start}
  .pgrid>.pkg{flex:none;min-width:0}
  .packages .sh p::after{content:none}
}

/* v1.8.17: compact phone top stack (640px and below only; tablet and desktop are untouched). Three 44px rows instead of four (192px at 390px wide became 135px):
   contact pills 34px tall in a 44px row, header row 44px (logo and controls unchanged at 44px), and one row under the header with "Time Back Check" (the
   announcement bar is hidden on phones and this pill replaces it), "See our 4 packages" and, from 440px wide, "Get a quote". Pills are 32 to 34px tall and
   get a full 44px hit area from a ::before pseudo-element, with no overlap between rows. */
.pktbc{display:none}
@media(max-width:640px){
  .tbcpromo{display:none}
  .cbar-in{padding-top:5px;padding-bottom:5px}
  .cpill{position:relative;min-height:34px}
  .cpill::before{content:"";position:absolute;inset:-6px;border-radius:inherit}
  .cpill svg{width:15px;height:15px}
  header.top{height:44px}
  .pkbar{top:calc(44px + env(safe-area-inset-top,0px));padding:6px max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px));gap:6px}
  .pkbtn,.pkq{min-height:32px;padding:0 11px}
  .pkbtn::before,.pkq::before,.pktbc::before{inset:-7px}
  .pktbc{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 1 auto;min-width:0;min-height:32px;padding:0 11px;border-radius:999px;background:var(--c-soft);color:var(--link);font-size:13px;font-weight:600;line-height:1;white-space:nowrap;border:1px solid color-mix(in srgb,var(--link) 26%,transparent);-webkit-tap-highlight-color:transparent;transition:background-color .15s ease}
  .pktbc::before{content:"";position:absolute;border-radius:inherit}
  .pktbc:hover,.pktbc:active{text-decoration:none;color:var(--link);background:color-mix(in srgb,var(--link) 18%,transparent)}
  .pktbc:focus-visible{outline:3px solid var(--link);outline-offset:2px}
  .pktbc svg{width:15px;height:15px;flex:none}
  .pkq{display:none}
  .mpanel{top:100%}
  html{scroll-padding-top:96px}
}
@media(min-width:440px) and (max-width:640px){.pkq{display:inline-flex}}
@media(max-width:339px){.pkbtn svg,.pktbc svg{display:none}.pkbtn,.pktbc{padding:0 9px}}

/* v1.8.19: phone polish (31 Oct 2026). Type scale, dark-theme contrast, the "How we automate" steps list, package cards as a swipe carousel on phones,
   floating WhatsApp button, quick-links row and small spacing fixes. Desktop and tablet (641px up) only gain the shared fixes: steps list styling,
   lighter sub-headings, icon alignment in package rows, a wrapping pill on the Run-your-business cards. Wording, prices and legal pages untouched. */
/* type scale: body 400 at 16-17px/1.5, labels 500-600, sub-headings 600 at 18-20px/1.3, display 700-800 for the page and section headings only */
h3,h4{font-weight:600;line-height:1.3}
.sh h2,.prose h2,.psec h2,.tbchome h2,.appsoon h2,.invoice h2,.cta-s h2,.phero h1,.hero h1,.tbchow-h,.talkh h2,.introhd h2,.qf h2{line-height:1.1}
.sh h2,.prose h2,.psec h2,.tbchome h2,.appsoon h2,.invoice h2,.cta-s h2,.phero h1,.tbchow-h,.talkh h2,.introhd h2{font-weight:700}
#main li b,#main p b,.callout h3,.feat>li b,.wl li b,.pkg li b,.svc>h3,.dnac h3,.perk h3,.lcard h3,.step h3,.depth h3,.dr h3,.recipe h3,.flowc h3,.sysc h3,.bun h3,.faq summary,.tbs-wins .t,.tbcsteps b,.tbs-plan b,.numflow .nh,.introl b,.appcaps b{font-weight:600}
.pkg h3,.swapbuild h3,.freecheck h3{font-weight:700}
/* dark theme: body copy and quiet text at least 7:1 on the card colour (was 6.6:1 and 4.9:1); icon chips a touch stronger */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ink2:#b0b0b5;--ink3:#a0a0a5;--c-soft:rgba(143,170,244,.18)}}
:root[data-theme="dark"]{--ink2:#b0b0b5;--ink3:#a0a0a5;--c-soft:rgba(143,170,244,.18)}
.pkg.k4 .who,.pkg.k4 .yr,.pkg.k4 small,.pkg.k4 .price small,.pkg.k4 .hl small,.invoice p,.cta-s p{color:#b0b0b5}
/* "How we automate" steps (automation.html): one number (the one in the heading), icon column, heading on its own line, body beneath, a connector between steps */
.pipe{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;gap:24px}
.pipe li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;row-gap:4px;align-items:start}
.pipe li>.ic{grid-row:1/span 2;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);--ica:var(--c)}
.pipe li>.ic svg{width:24px;height:24px}
.pipe li>b{display:block;grid-column:2;padding-top:10px;font-family:var(--f-display);font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.pipe li>.t{display:block;grid-column:2;font-size:16px;line-height:1.55;color:var(--ink2);margin:0}
.pipe li+li::before{content:"";position:absolute;left:23px;top:-24px;width:2px;height:24px;background:var(--line);border-radius:2px}
@media (max-width:640px){.pipe{gap:22px}.pipe li{column-gap:14px}.pipe li>b{font-size:18px}.pipe li+li::before{top:-22px;height:22px}}
/* package rows: the icon chip and the heading line share one centre */
.pkg li>span:not(.ic){padding-top:4px;min-width:0}
.pkg .pill{white-space:normal;height:auto;min-height:26px;padding:4px 10px;line-height:1.3;max-width:100%}
.packages .sh+.note{margin:-14px 0 24px;max-width:46ch;margin-inline:auto;line-height:1.5}
/* floating WhatsApp button on phones: 48px, inside the safe area, slides away while the page scrolls down and comes back when scrolling stops or up */
@media (max-width:640px){
  .wafab{width:48px;height:48px;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 2px 8px rgba(0,0,0,.3)}
  .wafab svg{width:26px;height:26px}
  html.dockhide .wafab{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
  @media (prefers-reduced-motion:no-preference){.wafab{transition:transform .25s ease,opacity .25s ease}}
  footer .fbar{padding-bottom:64px}
  /* quick-links row: room at both edges on 320 to 430px */
  .pkbar{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));gap:8px;overflow:hidden}
  .pkbtn,.pktbc,.pkq{padding:0 10px;font-size:12.5px;gap:5px;flex:0 1 auto;min-width:0}
  .pkbtn span,.pktbc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pkbtn .pkb-a{display:none}
}
@media (min-width:400px) and (max-width:640px){.pkbtn,.pktbc,.pkq{padding:0 12px;font-size:13px}.pkbtn .pkb-a{display:block}}
/* package cards on phones (640px and below): a swipe carousel with scroll snap. The scroller is the width of the page column, never wider than the page.
   Each card is 86% of the column so the next one peeks in; 12px gaps; no visible scrollbar (the arrow buttons, the card links and the dots give keyboard access). */
@media (max-width:640px){
  .pgrid{position:relative;display:flex;flex-wrap:nowrap;align-items:flex-start;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:0;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 0 28px;margin:0 0 -16px;max-width:100%}
  .pgrid::-webkit-scrollbar{display:none}
  .pgrid>.pkg{flex:0 0 86%;max-width:86%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
  .pgrid:focus-visible{outline:2px solid var(--link);outline-offset:4px;border-radius:24px}
  /* the cards: a 2px border and a top band in the package's own colour, 22px radius, soft coloured shadow, 16/12/8 spacing */
  .pgrid>.pkg{--pk:var(--pa);--pk-on:var(--on-c);gap:0;padding:0 18px 18px;border-radius:22px;border:2px solid color-mix(in srgb,var(--pk) 55%,transparent);background:var(--card);color:var(--ink);box-shadow:0 14px 32px -18px color-mix(in srgb,var(--pk) 60%,transparent);overflow:hidden}
  main>section:nth-of-type(even) .pgrid>.pkg{background:var(--bg2)}
  .pgrid>.pkg.k2{--pk:var(--pd)}.pgrid>.pkg.k3{--pk:var(--pe)}.pgrid>.pkg.k4{--pk:var(--pc)}
  .pgrid>.pkg.k1,.pgrid>.pkg.k2,.pgrid>.pkg.k3,.pgrid>.pkg.k4{box-shadow:0 14px 32px -18px color-mix(in srgb,var(--pk) 60%,transparent)}
  main>section .pgrid>.pkg.k4,.pgrid>.pkg.k4{background:var(--tiledark);color:#f5f5f7;--pk-on:#0b1a3a}
  .pgrid>.pkg::before{content:"";display:block;height:6px;margin:0 -18px 18px;background:linear-gradient(90deg,var(--pk),color-mix(in srgb,var(--pk) 45%,transparent))}
  .pgrid>.pkg .emb{width:44px;height:44px;border-radius:13px;background:var(--pk);color:var(--pk-on);--ica:var(--pk-on);box-shadow:0 8px 18px -10px color-mix(in srgb,var(--pk) 80%,transparent)}
  .pgrid>.pkg.k4 .emb{background:var(--pk);color:#0b1a3a;--ica:#0b1a3a}
  .pgrid>.pkg .badge{right:16px;top:18px;background:var(--pk);color:var(--pk-on)}
  .pgrid>.pkg h3{margin:12px 0 0;font-size:22px;line-height:1.2;color:inherit}
  .pgrid>.pkg .who{margin:4px 0 0;min-height:0;font-size:15px;line-height:1.45}
  .pgrid>.pkg .price{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--hair);font-size:40px;font-weight:800;line-height:1;gap:6px;align-items:baseline}
  .pgrid>.pkg.k4 .price{border-top-color:#3a3a3c}
  .pgrid>.pkg .price small{font-size:14px;font-weight:500}
  .pgrid>.pkg .yr{margin:6px 0 0;font-size:13.5px;line-height:1.4}
  .pgrid>.pkg .hl{margin:16px 0 0;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--pk) 9%,var(--bg2))}
  main>section:nth-of-type(even) .pgrid>.pkg .hl{background:color-mix(in srgb,var(--pk) 9%,var(--card))}
  main>section .pgrid>.pkg.k4 .hl,.pgrid>.pkg.k4 .hl{background:rgba(255,255,255,.08)}
  .pgrid>.pkg .hlh{margin:0 0 12px;font-size:12px;letter-spacing:.08em;color:var(--pk)}
  .pgrid>.pkg.k4 .hlh,main>section .pgrid>.pkg.k4 .hlh{color:var(--pk)}
  .pgrid>.pkg .hl ul,.pgrid>.pkg>ul,.pgrid>.pkg .pmore ul{gap:12px}
  .pgrid>.pkg li{gap:12px;font-size:15px;line-height:1.35}
  .pgrid>.pkg li .ic{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--pk) 16%,transparent);color:var(--pk);--ica:var(--pk)}
  .pgrid>.pkg.k4 li .ic{background:rgba(255,255,255,.1);color:var(--pk);--ica:var(--pk)}
  .pgrid>.pkg li .ic svg{width:17px;height:17px}
  .pgrid>.pkg li>span:not(.ic){padding-top:5px}
  .pgrid>.pkg li small{font-size:13.5px;line-height:1.4;margin-top:2px}
  .pgrid>.pkg>ul{margin-top:16px;padding-top:16px}
  .pgrid>.pkg .pmore{margin-top:12px}
  .pgrid>.pkg .pmore>summary{min-height:44px;font-size:15px;font-weight:600}
  .pgrid>.pkg .btn{align-self:stretch;width:100%;min-height:48px;font-size:16px;font-weight:600;margin-top:12px}
  .pgrid>.pkg .btn.bk-choose{margin-top:20px}
  .pgrid>.pkg .btn.bk-choose+.btn{margin-top:8px}
  .pgrid>.pkg .btn:not(.bk-choose):not(.bk-in){background:var(--pk);color:var(--pk-on);box-shadow:none}
  .pgrid>.pkg.k4 .btn:not(.bk-choose):not(.bk-in){background:var(--pk);color:#0b1a3a}
  .pgrid>.pkg .btn.bk-choose{background:transparent;color:var(--pk);box-shadow:inset 0 0 0 1.5px var(--pk)}
  .pgrid>.pkg .btn.bk-choose.bk-in{color:var(--gift);box-shadow:inset 0 0 0 1.5px var(--gift)}
  .pgrid>.pkg.k4 .btn.bk-choose{color:var(--pk)}
  .pgrid>.pkg .val{font-size:12.5px}
  .pgrid>.pkg .pill{margin-top:12px}
  /* swipe hint (above the carousel) and the counter, dots and arrows (below it); site.js adds them, so the page works without script */
  .pkhint{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 14px;font-size:14px;font-weight:600;color:var(--ink2);text-align:center}
  .pkhint svg{width:28px;height:28px;flex:none;color:var(--link);overflow:visible}
  .pkhint.off{opacity:0;visibility:hidden}
  @media (prefers-reduced-motion:no-preference){
    .pkhint{transition:opacity .4s ease,visibility 0s linear .4s}
    .pkhint.go .hand{animation:pkswipe 1.6s ease-in-out 3;transform-origin:50% 50%}
    @keyframes pkswipe{0%,100%{transform:translateX(5px)}50%{transform:translateX(-7px)}}
  }
  .pknav{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 0}
  .pkarrow{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
  main>section:nth-of-type(even) .pkarrow{background:var(--bg2)}
  .pkarrow svg{width:20px;height:20px}
  .pkarrow:hover,.pkarrow:active{border-color:var(--link);color:var(--link)}
  .pkarrow[aria-disabled="true"]{opacity:.35;pointer-events:none}
  .pkmid{display:grid;justify-items:center;gap:8px;min-width:120px}
  .pkdots{display:flex;gap:4px;margin:0;padding:0;list-style:none}
  .pkdot{position:relative;width:28px;height:28px;border:0;background:transparent;padding:0;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
  .pkdot::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--line);transition:transform .2s ease,background-color .2s ease}
  .pkdot[aria-current="true"]::after{background:var(--pk,var(--link));transform:scale(1.5)}
  .pkdot:focus-visible{outline:2px solid var(--link);outline-offset:0}
  .pkcount{font-size:13px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
  .pgrid+.pknav{margin-top:6px}
}
@media (min-width:641px){.pkhint,.pknav{display:none}}