/* Skandage website v2 (round 6, clean rewrite).
   Tokens from brand/web-assets/skandage.css. Type follows the live skandage.com scale.
   Layout: left-aligned, 1280px content, colour fields alternate so no section sits on plain white for long. */
:root {
  --ink: #0E2A33; --slate: #5C6670; --silver: #D2D5DA; --off: #F5F5F5; --white: #FFFFFF;
  --harbour: #33558F; --dusk: #7695CB; --mist: #D5DFEF;
  --berry: #961D6B; --magenta: #CF3B9A; --pink: #F9E2F1;
  --pine: #2B6A56; --sage: #62A88F; --mint: #D4E9E0;
  --oxblood: #8A0C12; --crimson: #B8141B; --rose: #F9DCDA;
  --action: var(--harbour); --sig: var(--dusk); --soft: var(--mist);
  --text-2: #3D4D54; --on-dark-2: #C9D3D8; --line: #E3E6EA;

  --display: "Space Grotesk", Arial, sans-serif;
  --body: "Inter", Arial, sans-serif;
  --t-hero: clamp(40px, 6vw, 88px);
  --t-h2: clamp(32px, 4vw, 54px);
  --t-h3: clamp(21px, 2vw, 28px);
  --t-lead: clamp(18px, 1.45vw, 21px);

  --m: clamp(20px, 4vw, 56px);
  --gap: clamp(80px, 9vw, 128px);
  --tile: 28px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --hdr: 72px;
}
.fam-brands    { --action: var(--berry);   --sig: var(--magenta); --soft: var(--pink); }
.fam-solutions { --action: var(--pine);    --sig: var(--sage);    --soft: var(--mint); }
.fam-suite     { --action: var(--oxblood); --sig: var(--crimson); --soft: var(--rose); }
.fam-master   { --action: var(--harbour);  --sig: var(--dusk);    --soft: var(--mist); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hdr); overflow-x: clip; }
body { margin: 0; background: var(--off); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: var(--action); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.04em; margin: 0; }
p { margin: 0; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--m); }

/* ---------- Header (21st.dev navbar-02): logo and links left, one action right ---------- */
/* Reading progress: a 4px bar on the bottom edge over a faint Silver track */
.progress { position: fixed; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px); height: 5px; z-index: 60; background: rgba(210, 213, 218, .55); pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--action); transform-origin: 0 50%; transform: scaleX(0); }
/* A clear white bar from the first screen, with a hairline under it; it gains a soft shadow once you scroll. */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; background: var(--white); box-shadow: 0 1px 0 var(--line); transition: box-shadow .25s ease; } /* taste-skill-ignore: header divider */
.hdr.scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(14, 42, 51, .06); }
/* Logo: the official lockup files. Heights are set per file so the mark is the same size on every page
   (the master file has room for the descender; the sub-brand files are cropped to the mark). */
.logo { flex: none; }
.logo img { display: block; height: 35px; width: auto; max-width: none; flex: none; object-fit: contain; overflow: visible; }
.logo.sub img { height: 30px; }
.fs-brand .logo img { height: 32px; max-width: none; }
.hdr .bar { height: var(--hdr); padding: 0 var(--m); display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); }
.logo { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; font: 700 25px/1 var(--display); letter-spacing: -0.04em; white-space: nowrap; --mk1: var(--ink); --mk2: var(--sig); }
.logo svg { width: 1.6em; height: .95em; flex: none; margin-right: .14em; }
.logo .dot { color: var(--sig); } .logo .word { color: var(--action); }
.menu { display: flex; align-items: center; gap: 2px; }
.menu > a, .dd-t { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 500 17px/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s ease; }
.menu > a:hover, .dd-t:hover, .dd.open .dd-t { background: rgba(14, 42, 51, .06); }
.dd-t svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.dd.open .dd-t svg { transform: rotate(180deg); }
.acts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.acts .btn { min-height: 48px; padding: 0 24px; }
.dd { position: relative; }
.dd-p { position: absolute; top: calc(100% + 10px); left: 0; display: grid; gap: 4px; padding: 10px; border-radius: 20px; background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 20px 50px rgba(14, 42, 51, .14); opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98); transform-origin: top left; transition: opacity .18s ease, transform .2s var(--ease), visibility .18s; } /* taste-skill-ignore: dropdown floats */
.dd.open .dd-p { opacity: 1; visibility: visible; transform: none; }
.dd-p.mega { width: min(900px, calc(100vw - 48px)); grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dd-p.narrow { width: 360px; }
.mega .col { display: grid; gap: 2px; align-content: start; }
.mega .feat { position: relative; display: grid; align-content: end; gap: 4px; min-height: 132px; padding: 16px; border-radius: 14px; background: var(--soft); color: var(--ink); text-decoration: none; transition: transform .16s ease-out; }
.mega .feat:active { transform: scale(.98); }
.mega .feat svg { position: absolute; top: 14px; left: 16px; width: 50px; height: 30px; --mk1: var(--ink); --mk2: var(--sig); }
.mega .feat b { font: 700 18px/1.15 var(--display); letter-spacing: -0.03em; }
.mega .feat b i { font-style: normal; color: var(--action); }
.mega .feat small { font-size: 13.5px; color: var(--text-2); }
.dd-i { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .15s ease; }
.dd-i:hover, .dd-i:focus-visible { background: var(--off); }
.dd-i .ico { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--soft); color: var(--action); }
.dd-i .ico svg { width: 18px; height: 18px; }
.dd-i b { display: block; font: 600 15px/1.3 var(--body); }
.dd-i small { display: block; font-size: 13px; line-height: 1.4; color: var(--slate); }
.burger { display: none; width: 48px; height: 48px; border: 0; border-radius: 12px; background: rgba(14, 42, 51, .06); color: var(--ink); place-items: center; cursor: pointer; }
.burger svg { width: 24px; height: 24px; }
.mnav { margin: 0 var(--m) 12px; border-radius: 20px; background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 20px 50px rgba(14, 42, 51, .14); padding: 10px; max-height: calc(100svh - 100px); overflow: auto; } /* taste-skill-ignore: menu floats */
/* Phone menu (round 23): three collapsible groups, family colours on every row, CTA pinned at the bottom of the panel */
.mnav { padding: 0; display: flex; flex-direction: column; overflow: hidden; max-height: calc(100svh - var(--hdr) - 16px); }
.mnav[hidden] { display: none; }
.mn-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px 4px; }
.mn-t { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 12px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font: 600 17px/1.2 var(--body); text-align: left; cursor: pointer; transition: background-color .15s ease; }
.mn-t:hover, .mn-t:focus-visible { background: var(--off); }
.mn-l { flex: 1; min-width: 0; }
.mn-t > svg { width: 20px; height: 20px; flex: none; color: var(--slate); transition: transform .2s ease; }
.mn-g.is-open > .mn-t > svg { transform: rotate(180deg); }
.mn-s .mn-t { min-height: 56px; }
.mn-s .ico { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--soft); color: var(--action); }
.mn-s .ico svg { width: 18px; height: 18px; }
.mn-p { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .2s ease, opacity .2s ease, visibility 0s .2s; }
.mn-g.is-open > .mn-p { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .2s ease, opacity .2s ease, visibility 0s; }
.mn-in { min-height: 0; overflow: hidden; display: grid; gap: 2px; align-content: start; }
.mn-top > .mn-p > .mn-in { padding: 0 0 6px; }
.mn-s > .mn-p > .mn-in { padding: 0 0 4px 8px; }
.mnav .dd-i { min-height: 44px; align-items: center; }
.mn-cta { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--line); background: var(--white); }
.mn-cta .btn { flex: 1 1 150px; justify-content: center; }
.mn-ask { flex: 1 1 150px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--soft); color: var(--action); font: 600 15px/1 var(--body); text-decoration: none; white-space: nowrap; }
.mn-ask svg { width: 18px; height: 18px; }
.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .mn-p, .mn-g.is-open > .mn-p, .mn-t > svg { transition: none; } }
@media (max-width: 1120px) { .menu, .askpill { display: none; } .burger { display: grid; } }


/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--action); color: var(--off); font: 600 16px/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .16s ease-out, background-color .2s ease, box-shadow .2s ease; }
.btn:hover { box-shadow: 0 8px 22px rgba(14, 42, 51, .18); } /* taste-skill-ignore: hover lift on the primary action */
.btn:active { transform: scale(.97); }
.btn.light { background: var(--off); color: var(--action); }
.btn.quiet { background: rgba(14, 42, 51, .06); color: var(--ink); }
.btn.quiet:hover { box-shadow: none; background: rgba(14, 42, 51, .1); }
.btn[disabled] { opacity: .4; cursor: default; box-shadow: none; }
.more { color: inherit; font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.more::after { content: "\2192"; transition: transform .2s var(--ease); }
.more:hover::after { transform: translateX(4px); }
.row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }

/* ---------- Sections ---------- */
main { position: relative; z-index: 1; }
.ch { position: relative; padding: var(--gap) 0; overflow-x: clip; }
.f-off { background: var(--off); } .f-white { background: var(--white); } .f-mist { background: var(--mist); } .f-soft { background: var(--soft); }
.f-ink { background: var(--ink); color: var(--off); } .f-action { background: var(--action); color: var(--off); }
.sheet { border-radius: 40px 40px 0 0; margin-top: -40px; }
main > :last-child { border-radius: 0 0 40px 40px; }
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(36px, 4vw, 56px); max-width: 760px; }
.sec-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(36px, 4vw, 56px); }
.sec-row .sec-head { margin-bottom: 0; }
.h2 { font-size: var(--t-h2); line-height: 1.04; text-wrap: balance; }
.lead { font-size: var(--t-lead); line-height: 1.5; max-width: 52ch; color: var(--text-2); }
.f-ink .lead, .f-action .lead { color: var(--on-dark-2); }
.note-sm { font-size: 13px; color: var(--slate); }
.f-ink .note-sm, .f-action .note-sm { color: var(--on-dark-2); }


/* Section mark: the logo's speed lines and chevrons fly in and lock together as each section arrives */
.asm svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
/* Round 38: where the browser has scroll-driven animations (Safari 26, Chrome), the parts are animated by the scroll itself on the compositor,
   not rewritten by script every frame, which lagged behind the finger on iPhone. Same path as placeParts() in site.js: offsets FROM x 100vw/160,
   scale 4 to 1, opacity .15 to 1 (ease-out cubic) over the first 80% of the pinned scroll, and the whole mark fades in as the band reaches the top. */
@keyframes asm-part { from { transform: translate(calc(var(--fx) * 100vw / 160), calc(var(--fy) * 100vw / 160)) rotate(var(--fr)) scale(4); opacity: .15; } to { transform: none; opacity: 1; } }
@keyframes asm-in { from { opacity: 0; } to { opacity: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .plx.sda { view-timeline: --plx block; }
    .plx.sda .asm { animation: asm-in linear both; animation-timeline: --plx; animation-range: entry 70% entry 100%; }
    .plx.sda .asm svg { will-change: auto; animation: asm-part cubic-bezier(.33, 1, .68, 1) both; animation-timeline: --plx; animation-range: contain 0% contain 80%; }
    .plx.sda .asm svg:nth-child(1) { --fx: -70; --fy: 0; --fr: 0deg; }
    .plx.sda .asm svg:nth-child(2) { --fx: -30; --fy: -18; --fr: -18deg; }
    .plx.sda .asm svg:nth-child(3) { --fx: 46; --fy: 18; --fr: 16deg; }
  }
}

/* ---------- Home hero (hipuku.dev): the wordmark on one line, split into its three sub-brands ---------- */
.hp { position: relative; min-height: 100vh; min-height: 100svh; padding: calc(var(--hdr) + 24px) var(--m) clamp(72px, 11vh, 132px); display: grid; align-content: center; justify-items: center; background: var(--cx-bg, var(--off)); transition: background-color .28s ease; }
[data-cx="brands"]    { --cx-bg: var(--berry); }
[data-cx="solutions"] { --cx-bg: var(--pine); }
[data-cx="suite"]     { --cx-bg: var(--rose); }
.hp-stage { position: relative; display: grid; justify-items: center; padding: 28px 0 100px; }
.hp-word { position: relative; z-index: 2; display: flex; font: 700 clamp(64px, 11.2vw, 168px)/.9 var(--display); letter-spacing: -0.065em; color: var(--ink); white-space: nowrap; user-select: none; padding-bottom: .25em; margin-bottom: -.25em; } /* round 29: room for the "g" descender so background-clip: text paints all of it */
.hp-word .g { position: relative; display: inline-flex; }
/* The short rounded bar under each letter group. It lights up with its tag in the family's action colour. */
.hp-word .ubar { position: absolute; left: 0; right: 0; top: 100%; height: 3px; }
.hp-word .ubar b { position: absolute; top: 0; height: 3px; border-radius: 999px; background: #C9CED4; transition: background-color .3s ease; }
.hp-word .g.lit .ubar b { background: var(--lc); }
.hp-word .g span, .hp-word .dot { display: inline-block; transition: color .3s ease, transform .45s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 50% 90%; }
.hp-word .dot { color: var(--cx-sig, var(--dusk)); }
.hp-word .b { --lc: var(--berry); } .hp-word .s { --lc: var(--pine); } .hp-word .x { --lc: var(--oxblood); }
.hp-word .g.lit span { color: var(--lc); }
.hp-tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--white); color: var(--ink); font: 600 16px/1 var(--body); cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 1px #D6DADF; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .16s ease-out; } /* taste-skill-ignore: chip outline from the reference */
.hp-tag { padding: 0 16px; height: 38px; font-size: 14px; gap: 6px; } /* round 30: smaller sub-brand chips (desktop and tablet) */
.hp-tag:hover, .hp-tag:focus-visible, .hp-tag.on { background: var(--pc); color: var(--off); box-shadow: 0 0 0 1px var(--pc); transform: translateY(-2px); }
/* Round 29: the arrow after each chip label says "this opens a page"; it nudges right when the chip is pointed at. */
.hp-tag .ar, .hp-mob a .ar { display: inline-block; transition: transform .2s ease; }
.hp-tag:hover .ar, .hp-tag:focus-visible .ar, .hp-tag.on .ar, .hp-mob a.on .ar { transform: translateX(4px); }
.hp-tapnote { display: none; margin: 10px 0 0; min-height: 20px; font-size: 14px; font-weight: 600; color: var(--ink); text-align: center; opacity: 0; transition: opacity .2s ease; }
.hp-mob.armed + .hp-tapnote { opacity: 1; }
/* Picture cards that float in beside the word for the lit sub-brand */
.hp-pic { position: absolute; z-index: 0; width: clamp(130px, 11.5vw, 178px); aspect-ratio: 3 / 4; margin: 0; border-radius: 22px; overflow: hidden; background: var(--soft); box-shadow: 0 24px 50px rgba(14, 42, 51, .16); opacity: 0; transform: translateY(18px) rotate(var(--r, 0deg)) scale(.92); transition: opacity .45s ease, transform .6s var(--ease); pointer-events: none; } /* taste-skill-ignore: picture card floats */
.hp-pic img { width: 100%; height: 100%; object-fit: cover; }
.hp-pic.on { opacity: 1; transform: rotate(var(--r, 0deg)); }
.hp-tag:active { transform: scale(.97); }
.hp-tag .cap { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); font: 500 13px/1.2 var(--body); color: var(--pc); white-space: nowrap; opacity: 0; transition: opacity .2s ease; pointer-events: none; }

.hp-tag:hover .cap, .hp-tag:focus-visible .cap { opacity: 1; }
.f-b { --pc: var(--berry); --lc: var(--magenta); } .f-s { --pc: var(--pine); --lc: var(--sage); } .f-x { --pc: var(--oxblood); --lc: var(--crimson); }
.hp-copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: 22px; text-align: center; }
.hp-copy p { font-size: 19px; max-width: 44ch; color: var(--text-2); }
.hp-copy .hp-lede { max-width: none; white-space: nowrap; font-size: min(19px, 3.5vw); line-height: 1.5; }
.hp-copy p b { color: var(--ink); font-weight: 600; }
.hp-mob { display: none; }
@media (max-width: 900px) {
  .hp-stage { padding: 0 0 28px; }
  .hp-tag, .hp-pic { display: none; }
  .hp-tapnote { display: block; }
  .hp-word .ubar { display: none; }
  .hp-word { font-size: 15.5vw; }
  .hp-mob { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
  .hp-mob a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px #D6DADF; color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; } /* taste-skill-ignore: chip outline */
  .hp-mob a.on { background: var(--pc); color: var(--off); box-shadow: 0 0 0 1px var(--pc); }
}

/* ---------- Parallax band: the mark's parts drift in the background and lock into the logo by the end of the scroll ---------- */
.plx { position: relative; height: 190svh; background: var(--off); }
.plx .stick { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.plx .inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 22px; text-align: center; padding: 0 var(--m); }
.plx h2, .plx p { position: relative; z-index: 2; }
.asm { position: relative; z-index: 1; width: clamp(150px, 16vw, 220px); aspect-ratio: 74 / 44; margin-bottom: 10px; --mk1: var(--ink); --mk2: var(--dusk); }
.plx h2 { font-size: clamp(44px, 6.6vw, 96px); line-height: .98; letter-spacing: -0.055em; }
.plx p { font-size: var(--t-lead); max-width: 42ch; color: var(--text-2); }

/* ---------- Scroll word reveal ---------- */
[data-words] .w { opacity: .2; transition: opacity .2s linear; }
[data-words] .w.on { opacity: 1; }

/* ---------- Sub-brand hero: two fields, left-aligned, no line crosses the seam ---------- */
.hero { position: relative; min-height: 86svh; display: grid; grid-template-rows: 1fr auto 1fr; overflow: hidden; background: linear-gradient(var(--off) var(--seam, 50%), var(--action) var(--seam, 50%)); } /* taste-skill-ignore: hard two-field split, not a gradient fade */
.hero > .ttl { grid-row: 2; width: 100%; }
.hero h1 { display: grid; row-gap: .36em; font-size: var(--t-hero); line-height: 1; letter-spacing: -0.05em; }
.hero h1 .l1 { color: var(--ink); }
.hero h1 .l2 { color: var(--off); }
.hero .low { grid-row: 3; align-self: end; padding-bottom: clamp(40px, 7vh, 72px); color: var(--off); }
.hero .low .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.hero .low p { font-size: var(--t-lead); max-width: 46ch; }
.hero .low .more { color: var(--off); }


/* ---------- Container scroll hero (Skandage Social) ---------- */
.cs { position: relative; padding: calc(var(--hdr) + clamp(36px, 4.6vw, 60px)) var(--m) clamp(48px, 6vw, 80px); background: var(--off); perspective: 1000px; overflow: clip; }
.cs-title { max-width: 1040px; margin: 0 auto; display: grid; gap: 18px; will-change: transform; }
.cs-title .over { font: 600 15px/1 var(--body); color: var(--action); }
.cs-title h1 { font-size: clamp(40px, 5.4vw, 80px); line-height: .96; letter-spacing: -0.055em; }
.cs-title h1 span { color: var(--action); }
.cs-card { max-width: 1040px; height: clamp(400px, 40vw, 540px); margin: clamp(24px, 2.6vw, 36px) auto 0; padding: clamp(6px, .9vw, 10px); border-radius: 30px; background: var(--ink); box-shadow: 0 9px 20px rgba(0,0,0,.25), 0 37px 37px rgba(0,0,0,.2), 0 84px 50px rgba(0,0,0,.12); transform: rotateX(20deg) scale(1.04); transform-origin: 50% 0; will-change: transform; } /* taste-skill-ignore: the device frame floats in 3D */
.cs-screen { height: 100%; border-radius: 22px; overflow: hidden; background: var(--white); color: var(--ink); display: grid; grid-template-columns: 180px minmax(0, 1fr) 250px; font-size: 14px; }
.cs-side { background: var(--off); padding: 20px 12px; display: grid; align-content: start; gap: 4px; }
.cs-side .logo { display: block; margin: 0 8px 16px; min-width: 0; } .cs .cs-side .logo.sub img { display: block; width: 100%; max-width: 150px; height: auto; aspect-ratio: 410.61 / 47.8; }
.cs-side span.it { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; font-weight: 500; }
.cs-side span.it.on { background: var(--pink); color: var(--berry); }
.cs-side span.it em { font-style: normal; font-size: 12px; background: var(--white); border-radius: 999px; padding: 2px 8px; }
.cs-main { padding: 22px; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; min-width: 0; }
.cs-main .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cs-main .top b { font: 700 20px/1 var(--display); letter-spacing: -0.03em; }
.week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; min-height: 0; }
.week > div { background: var(--off); border-radius: 12px; padding: 6px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; min-width: 0; overflow: hidden; }
.week h5 { margin: 0; font: 600 12px/1 var(--body); color: var(--slate); }
.post { border-radius: 10px; padding: 6px; background: var(--white); font-size: 11.5px; line-height: 1.3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.post .pill { min-height: 20px; padding: 2px 7px; font-size: 10px; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.post .img { height: 34px; border-radius: 6px; background: var(--pink); }
.post.ok .img { background: var(--berry); }
.cs-prev { border-left: 1px solid var(--line); padding: 22px; display: grid; align-content: start; gap: 14px; }
.cs-prev .sq { aspect-ratio: 1; border-radius: 14px; background: var(--pink); display: grid; place-items: center; }
.cs-prev .sq svg { width: 55%; height: auto; --mk1: var(--ink); --mk2: var(--magenta); }
.cs-prev .acts2 { display: flex; gap: 8px; }
.cs-prev .acts2 span { flex: 1; text-align: center; padding: 10px; border-radius: 999px; font-weight: 600; background: var(--off); }
.cs-prev .acts2 span.go { background: var(--berry); color: var(--off); }
@media (max-width: 960px) { .cs-screen { grid-template-columns: minmax(0, 1fr); } .cs-side, .cs-prev { display: none; } }


/* ---------- Small UI parts ---------- */
.pill { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 10px; border-radius: 999px; font: 600 12px/1 var(--body); background: var(--off); color: var(--ink); white-space: nowrap; }
.pill.on { background: var(--ink); color: var(--off); } .pill.s { background: var(--soft); color: var(--ink); }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border-radius: 999px; background: var(--soft); color: var(--ink); font: 600 13px/1 var(--body); letter-spacing: 0; white-space: nowrap; }
.ui { background: var(--white); color: var(--ink); border-radius: 18px; padding: 16px; font-size: 13px; box-shadow: 0 18px 40px rgba(14, 42, 51, .14); } /* taste-skill-ignore: the product screen floats */
.ui .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 8px; }
.ui .top b { font: 700 15px/1.2 var(--display); letter-spacing: -0.02em; }
.ui .r { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #ECECEC; } /* taste-skill-ignore: UI chrome */

/* ---------- Product cards (21st.dev product-card): each one is clearly a page to open ---------- */
.pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; perspective: 1200px; }
.pcard { position: relative; display: grid; grid-template-rows: auto 220px auto auto auto; gap: 12px; min-height: 480px; padding: 28px; border-radius: var(--tile); background: var(--white); color: var(--ink); text-decoration: none; overflow: hidden; box-shadow: 0 0 0 1px rgba(14, 42, 51, .06); transform-style: preserve-3d; transition: transform .45s var(--ease), box-shadow .3s ease; } /* taste-skill-ignore: card edge on a tinted field */
.pcard:hover { box-shadow: 0 0 0 2px var(--action), 0 26px 50px rgba(14, 42, 51, .14); } /* taste-skill-ignore: hover state of a link card */
.pcard .cat { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--action); }
.pcard .cat span { display: inline-flex; align-items: center; gap: 8px; }
.pcard .cat svg { width: 20px; height: 20px; }
.pcard .obj { position: relative; justify-self: end; align-self: center; width: 78%; margin-right: -44px; transform: translateZ(30px) rotate(-4deg); transition: transform .45s var(--ease); pointer-events: none; }
.pcard:hover .obj { transform: translateZ(60px) rotate(-1deg) translateY(-6px); }
.pcard h3 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1; letter-spacing: -0.045em; margin-top: 6px; }
.pcard p { font-size: 16px; color: var(--text-2); max-width: 34ch; }
.pcard .go { justify-self: start; margin-top: 6px; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--action); color: var(--off); font-weight: 600; font-size: 15px; transition: gap .2s var(--ease); }
.pcard .go svg { width: 18px; height: 18px; }
.pcard:hover .go { gap: 16px; }


/* ---------- USP band: plain columns on a colour field, deliberately not cards ---------- */
.usps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px 32px; }
.usp { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 2px solid rgba(245, 245, 245, .25); }
.usp svg { width: 30px; height: 30px; color: var(--soft); }
.usp h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.03em; }
.usp p { color: var(--on-dark-2); font-size: 16px; }
.f-ink .usp svg { color: var(--sig); }

/* ---------- Features bento (21st.dev features-8) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.fx { grid-column: span 2; background: var(--white); color: var(--ink); border-radius: var(--tile); padding: 26px; display: grid; gap: 14px; align-content: start; overflow: hidden; }
.fx.w3 { grid-column: span 3; } .fx.w4 { grid-column: span 4; }
.fx h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.03em; }
.fx p { color: var(--text-2); font-size: 16px; }
.fx .vis { min-height: 140px; display: grid; place-items: center; border-radius: 18px; background: var(--off); padding: 18px; }
.fx .ring { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--white); box-shadow: 0 0 0 10px var(--soft); color: var(--action); } /* taste-skill-ignore: icon halo from the reference */
.fx .ring svg { width: 34px; height: 34px; }
.fx .big { font: 700 clamp(44px, 4.4vw, 60px)/1 var(--display); letter-spacing: -0.05em; color: var(--action); }
.fx .apps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fx .apps span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 500; }
.fx .apps .gl { width: 18px; height: 18px; margin: 0; color: var(--ink); }
.fx .bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; width: 100%; max-width: 260px; }
.fx .bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: var(--soft); }
.fx .bars i:nth-child(odd) { background: var(--sig); }
.fx .people { display: grid; gap: 8px; width: 100%; max-width: 300px; }
.fx .people span { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--white); font-size: 14px; }
.fx .people span em { font-style: normal; margin-left: auto; font-size: 12.5px; color: var(--action); font-weight: 600; }
.fx .people span i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font: 700 11px/1 var(--display); font-style: normal; color: var(--ink); }
.fx .search { width: 100%; max-width: 300px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px; background: var(--white); font-size: 14px; color: var(--slate); }
.fx .search svg { width: 18px; height: 18px; color: var(--action); flex: none; }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, 1fr); } .fx, .fx.w3 { grid-column: span 1; } .fx.w4 { grid-column: span 2; } }


/* ---------- Can I automate? ---------- */
.ask-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.ask .q { font: 700 clamp(32px, 3.8vw, 52px)/1.1 var(--display); letter-spacing: -0.045em; }
.ask .q label { display: block; color: var(--on-dark-2); }
/* The field reads as a real input: a box, a blinking caret and an Ask button */
.ask .field { margin-top: 22px; display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 8px 8px 22px; border-radius: 22px; background: #17394A; box-shadow: inset 0 0 0 2px rgba(118, 149, 203, .35); cursor: text; transition: box-shadow .2s ease, background-color .2s ease; } /* taste-skill-ignore: input outline */
.ask .field:hover { box-shadow: inset 0 0 0 2px rgba(118, 149, 203, .6); }
.ask .field:focus-within { background: #1B4152; box-shadow: inset 0 0 0 2px var(--dusk), 0 0 0 6px rgba(118, 149, 203, .18); }
.ask input { flex: 1 1 auto; min-width: 0; width: 100%; background: transparent; border: 0; padding: 0; font: inherit; font-size: .74em; letter-spacing: -0.03em; color: var(--off); caret-color: var(--dusk); outline: none; text-overflow: ellipsis; }
.ask input::placeholder { color: #6F8C96; }
.ask .field .qm { color: var(--dusk); font-size: .74em; }
.ask .go { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border: 0; border-radius: 16px; background: var(--dusk); color: var(--ink); font: 600 16px/1 var(--body); letter-spacing: 0; cursor: pointer; transition: transform .16s ease-out, background-color .2s ease; }
.ask .go:hover { background: var(--mist); }
.ask .go:active { transform: scale(.97); }
.ask .go svg { width: 18px; height: 18px; }
.ask .hint { margin-top: 30px; color: var(--on-dark-2); font-size: 16px; }
.ask .ex { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.ask .ex button { padding: 0 14px; font-size: 14px; white-space: nowrap; }
.ask .ex button { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 0; background: #1B3A44; color: var(--off); font-size: 15px; cursor: pointer; transition: background-color .15s ease, transform .16s ease-out; }
.ask .ex button:hover { background: #24505C; }
.ask .ex button:active { transform: scale(.97); }
.answer { margin-top: 48px; border-radius: var(--tile); padding: clamp(22px, 3vw, 32px); background: var(--soft); color: var(--ink); display: grid; gap: 16px; transition: background-color .3s ease; }
.answer .who { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.answer .who b { font: 700 21px/1.2 var(--display); letter-spacing: -0.03em; }
.answer .who .pill { background: var(--action); color: var(--off); }
.answer .ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.answer .ba div { background: var(--white); border-radius: 16px; padding: 14px 16px; font-size: 15px; }
.answer .ba strong { display: block; font-size: 12px; color: var(--slate); font-weight: 600; margin-bottom: 4px; }
.answer .ba div:last-child strong { color: var(--action); }
.answer[hidden] { display: none; }
.answer.swap { animation: pop .4s var(--ease); }
@keyframes pop { from { opacity: .4; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ask-art { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: end; }
.ask-art svg.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.ask-art .wires path { fill: none; stroke: rgba(118, 149, 203, .45); stroke-width: 1.5; stroke-dasharray: 5 6; stroke-linecap: round; animation: flow 1.2s linear infinite; transition: stroke .25s ease; }
.ask-art .wires path.on { stroke: var(--dusk); stroke-dasharray: none; stroke-width: 2; }
.ask-art .wires circle { fill: var(--dusk); }
.ask-art .hub { position: absolute; z-index: 1; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #17394A; display: grid; place-items: center; box-shadow: 0 0 0 14px rgba(118, 149, 203, .1), 0 0 0 30px rgba(118, 149, 203, .05); } /* taste-skill-ignore: halo rings */
.ask-art .hub svg { width: 58%; height: auto; overflow: visible; --mk1: var(--off); --mk2: var(--dusk); }
.cf { position: absolute; z-index: 2; display: flex; gap: 10px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 16px; background: #1B3A44; color: var(--off); font-size: 13px; line-height: 1.3; white-space: nowrap; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); transition: background-color .25s ease, box-shadow .25s ease; } /* taste-skill-ignore: floating chips */
.cf b { display: block; font-weight: 600; }
.cf small { color: #A9BBC2; font-size: 12px; }
.cf i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #24505C; color: var(--off); flex: none; font-style: normal; }
.cf i svg { width: 18px; height: 18px; }
.cf.on { background: var(--off); color: var(--ink); box-shadow: 0 0 0 3px var(--dusk), 0 10px 24px rgba(0, 0, 0, .25); }
.cf.on small { color: var(--slate); } .cf.on i { background: var(--mist); color: var(--ink); }
.cf.p1 { left: 0; top: 4%; } .cf.p2 { right: 0; top: 22%; } .cf.p3 { left: 0; bottom: 20%; } .cf.p4 { right: 0; bottom: 4%; }
@keyframes flow { to { stroke-dashoffset: -11; } }
@media (max-width: 960px) { .ask-grid { grid-template-columns: minmax(0, 1fr); } .ask-grid > * { min-width: 0; } .ask-art { justify-self: center; max-width: 380px; } .answer .ba { grid-template-columns: minmax(0, 1fr); } }


/* ---------- Stepper with a picture for every step (transition panel) ---------- */
.steps { display: grid; gap: 26px; }
.steps ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 14px; }
.steps li { display: contents; }
.steps .st { display: inline-flex; align-items: center; gap: 12px; border: 0; background: none; padding: 6px 4px; cursor: pointer; font: 600 17px/1 var(--body); color: var(--slate); }
.steps .st .c { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--slate); font: 600 15px/1 var(--body); box-shadow: inset 0 0 0 2px var(--silver); transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; } /* taste-skill-ignore: step indicator ring */
.steps .st .c svg { width: 16px; height: 16px; }
.steps .st[aria-current="step"], .steps .st.done { color: var(--ink); }
.steps .st[aria-current="step"] .c, .steps .st.done .c { background: var(--action); color: var(--off); box-shadow: none; }
.steps .bar { flex: 1 1 40px; height: 2px; border-radius: 2px; background: rgba(14, 42, 51, .15); position: relative; overflow: hidden; }
.steps .bar::after { content: ""; position: absolute; inset: 0; background: var(--action); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.steps .bar.done::after { transform: scaleX(1); }
.steps .panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 56px; align-items: center; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--tile); background: var(--white); min-height: 340px; box-shadow: inset 0 0 0 1px var(--silver), 0 14px 34px rgba(14, 42, 51, .08); }
.steps .panel[hidden] { display: none; }
.steps .panel.swap > * { animation: panelIn .45s var(--ease) backwards; }
.steps .panel.swap > :last-child { animation-delay: .06s; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.steps .panel h3 { font-size: var(--t-h3); line-height: 1.15; margin-bottom: 16px; }
.steps .panel ul { margin: 0; padding: 0; list-style: none; display: grid; }
.steps .panel li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.steps .panel li:first-child { border-top: 0; }
.steps .panel li svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--action); }
.steps .pic { border-radius: 22px; background: var(--soft); padding: clamp(20px, 3vw, 32px); display: grid; gap: 10px; align-content: center; min-height: 260px; }
.steps .pic .card { background: var(--white); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; font-size: 14px; box-shadow: 0 6px 18px rgba(14, 42, 51, .08); } /* taste-skill-ignore: UI chrome */
.steps .pic .card b { display: block; font-weight: 600; }
.steps .pic .card small { color: var(--slate); }
.steps .pic .card .pill { margin-left: auto; }
.steps .pic .card i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--soft); color: var(--action); flex: none; font-style: normal; }
.steps .pic .card i svg { width: 18px; height: 18px; }
.steps .pic .bubble { justify-self: start; max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--white); font-size: 14px; }
.steps .pic .bubble.me { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--action); color: var(--off); }
.steps .pic .meter { height: 8px; border-radius: 4px; background: rgba(14, 42, 51, .1); overflow: hidden; }
.steps .pic .meter i { display: block; height: 100%; width: var(--w, 60%); background: var(--action); border-radius: 4px; }
.steps .nav { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 860px) { .steps .panel { grid-template-columns: 1fr; } }


/* ---------- Stagger testimonials ---------- */
.stagger { position: relative; height: 580px; overflow: hidden; }
.tcard { position: absolute; left: 50%; top: 46%; width: var(--cs); height: var(--cs); padding: 30px; cursor: pointer; background: var(--white); color: var(--ink); border: 2px solid var(--silver); clip-path: polygon(48px 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 0 100%, 0 0); border-radius: 0 0 var(--tile) var(--tile); transition: transform .5s ease-in-out, background-color .4s ease, color .4s ease, border-color .3s ease; } /* taste-skill-ignore: card border belongs to the component */
.tcard .cut { position: absolute; right: -2px; top: 46px; width: 70.7px; height: 2px; background: var(--silver); transform-origin: top right; transform: rotate(45deg); }
.tcard.center { z-index: 10; background: var(--ink); color: var(--off); border-color: var(--ink); }
.tcard.center .cut { background: var(--sig); }
.tcard .av { width: 48px; height: 54px; margin-bottom: 18px; display: grid; place-items: center; background: var(--soft); color: var(--ink); font: 700 18px/1 var(--display); }
.tcard .av svg { width: 22px; height: 22px; }
.tcard q, .tcard .big { display: block; font: 500 17px/1.42 var(--display); letter-spacing: -0.02em; }
.tcard .big b { display: block; font-size: 56px; line-height: 1; letter-spacing: -0.05em; margin-bottom: 8px; }
.tcard .by { position: absolute; left: 30px; right: 30px; bottom: 26px; font-size: 14px; color: var(--slate); }
.tcard.center .by { color: var(--on-dark-2); }
.stagger .ctrl { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 10px; }
.round { width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--white); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 1.5px var(--silver); transition: background-color .15s ease, color .15s ease, transform .16s ease-out; } /* taste-skill-ignore: control ring */
.round:hover { background: var(--action); color: var(--off); box-shadow: none; }
.round:active { transform: scale(.95); }
.round[disabled] { opacity: .35; cursor: default; background: var(--white); color: var(--ink); }
.round svg { width: 20px; height: 20px; }
.rating { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.rating b { font: 700 30px/1 var(--display); letter-spacing: -0.04em; }


/* ---------- Comparison: two contrasting columns ---------- */
.vs { display: grid; grid-template-columns: 1.08fr 1fr; border-radius: var(--tile); overflow: hidden; box-shadow: 0 0 0 1px var(--line); } /* taste-skill-ignore: outline separates the columns from the page */
.vs > div { padding: clamp(24px, 3vw, 38px); display: grid; align-content: start; }
.vs .us { background: var(--action); color: var(--off); }
.vs .them { background: var(--white); color: var(--ink); }
.vs h3 { font-size: clamp(22px, 2vw, 28px); margin-bottom: 14px; }
.vs ul { list-style: none; margin: 0; padding: 0; display: grid; }
.vs li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.vs .them li { border-top-color: var(--line); color: var(--text-2); }
.vs li svg { width: 20px; height: 20px; margin-top: 2px; }
.vs .us li svg { color: var(--soft); }
.vs .them li svg { color: var(--slate); }
.vs .them li.plus { color: var(--ink); } .vs .them li.plus svg { color: var(--ink); }


/* ---------- Table ---------- */
.tbl-wrap { overflow-x: auto; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px var(--line); } /* taste-skill-ignore: a real table keeps its lines */
.tbl { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 640px; }
.tbl th { text-align: left; font: 600 14px/1.2 var(--body); color: var(--slate); background: var(--off); padding: 14px 22px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 20px 22px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td + td, .tbl th + th { border-left: 1px solid var(--line); }
.tbl td:first-child { font: 700 19px/1.25 var(--display); letter-spacing: -0.02em; width: 28%; }
.tbl .ptag { display: inline-flex; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.tbl .pb { background: var(--pink); color: var(--berry); } .tbl .ps { background: var(--mint); color: var(--pine); }

/* ---------- Industries scroller ---------- */
.track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.ind { scroll-snap-align: start; background: var(--off); border-radius: var(--tile); padding: 10px 10px 24px; display: grid; gap: 14px; align-content: start; min-height: 270px; }
.ind > :not(.ph) { margin: 0 16px; }
.ind .ph { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--mint); }
.ind .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ind:hover .ph img { transform: scale(1.04); }
.ind .ph .cap { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); font: 600 12px/1 var(--body); color: var(--pine); }
.ind .ph .cap svg { width: 14px; height: 14px; }
.ind h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.03em; }
.ind .b, .ind .a { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.ind .b span, .ind .a span { font-size: 13px; font-weight: 600; color: var(--slate); }
.ind .a span { color: var(--action); }
.ind .hrs { margin-top: 2px; font-size: 14px; color: var(--slate); }
.ind .hrs b { font-weight: 600; color: var(--ink); }
.snav { display: flex; align-items: center; gap: 16px; }
.snav .dots { display: flex; gap: 6px; }
.snav .dots { display: flex; gap: 4px; }
.snav .dots[hidden] { display: none; }
.bento-nav[hidden] { display: none; }   /* round 38: the feature-card dots exist on phones only */
.snav .dots button { position: relative; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.snav .dots button i { display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--silver); transition: background-color .25s ease, width .25s var(--ease); }
.snav .dots button.on i { background: var(--action); width: 22px; }
.snav .dots button.on { width: 36px; }

/* ---------- FAQ: sticky side card + questions ---------- */
.faq2 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-side { position: sticky; top: calc(var(--hdr) + 32px); display: grid; gap: 24px; }
.faq-side .sec-head { margin-bottom: 0; }
.ask-card { position: relative; overflow: hidden; border-radius: var(--tile); background: var(--ink); color: var(--off); padding: 28px; display: grid; gap: 14px; }
.ask-card b { font: 700 24px/1.2 var(--display); letter-spacing: -0.03em; }
.ask-card p { color: var(--on-dark-2); font-size: 16px; }
.ask-card .bg { position: absolute; right: -30px; bottom: -24px; width: 180px; height: auto; opacity: .14; --mk1: var(--off); --mk2: var(--dusk); }
.qa { border-top: 1px solid rgba(14, 42, 51, .12); }
.qa:first-child { border-top: 0; }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; }
.qa:first-child summary { padding-top: 0; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; border-radius: 6px; }
.qa-i { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--action); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.qa[open] .qa-i { transform: rotate(180deg); }
.qa-a { overflow: hidden; }
.qa h3 { font: 600 clamp(19px, 1.6vw, 22px)/1.3 var(--display); letter-spacing: -0.02em; }
.qa p { padding: 0 40px 24px 0; color: var(--text-2); }
@media (max-width: 900px) { .faq2 { grid-template-columns: 1fr; } .faq-side { position: static; } }

/* ---------- Suite picker ---------- */
.picker { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; }
.picker .opts { background: var(--white); border-radius: var(--tile); padding: clamp(22px, 3vw, 32px); display: grid; gap: 22px; align-content: start; }
.picker .grp { display: grid; gap: 10px; }
.picker .grp > b { font-size: 15px; font-weight: 600; }
.picker .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--off); color: var(--ink); font-weight: 500; font-size: 16px; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease, transform .16s ease-out; }
.chip:active { transform: scale(.97); }
.chip svg { width: 18px; height: 18px; }
.chip[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--c, var(--action)); background: var(--cs, var(--soft)); } /* taste-skill-ignore: selected state ring */
.picker .sum { background: var(--ink); color: var(--off); border-radius: var(--tile); padding: clamp(24px, 3vw, 34px); display: grid; gap: 14px; align-content: start; }
.picker .sum b { font: 700 clamp(22px, 2vw, 28px)/1.2 var(--display); letter-spacing: -0.03em; }
.picker .sum p { color: var(--on-dark-2); }
@media (max-width: 860px) { .picker { grid-template-columns: 1fr; } }

/* ---------- Bounce cards (About promises) ---------- */
.bounce { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bc { position: relative; min-height: 340px; overflow: hidden; border-radius: var(--tile); background: var(--white); color: var(--ink); padding: 28px 28px 0; display: grid; align-content: start; gap: 10px; transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bc:hover { transform: scale(.97) rotate(-1deg); }
.bc .k { font-size: 14px; font-weight: 600; color: var(--action); }
.bc h3 { font-size: var(--t-h3); line-height: 1.15; }
.bc .demo { position: absolute; left: 16px; right: 16px; bottom: -8px; height: 52%; border-radius: 22px 22px 0 0; background: var(--soft); padding: 20px 20px 30px; display: grid; align-content: start; gap: 8px; transform: translateY(14px); transition: transform .55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bc:hover .demo { transform: translateY(-6px) rotate(2deg); }
.bc .demo p { font-size: 15px; color: var(--text-2); }
.bc .demo svg { width: 26px; height: 26px; color: var(--action); }
@media (max-width: 860px) { .bounce { grid-template-columns: 1fr; } .bc { min-height: 300px; } }

/* ---------- Pricing ---------- */
.price-head { display: grid; gap: 14px; margin-bottom: 40px; }
.billing { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.switch { width: 48px; height: 28px; border-radius: 999px; border: 0; background: var(--silver); position: relative; cursor: pointer; transition: background-color .2s ease; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); transition: transform .2s var(--ease); }
.switch[aria-checked="true"] { background: var(--action); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.tier { position: relative; background: var(--white); border-radius: var(--tile); padding: 32px 28px; display: grid; gap: 18px; box-shadow: 0 0 0 1px var(--line); } /* taste-skill-ignore: tier outline */
.tier.pop { background: var(--ink); color: var(--off); padding: 44px 30px; box-shadow: 0 30px 60px rgba(14, 42, 51, .22); } /* taste-skill-ignore: featured tier floats */
.tier .nm { font: 700 20px/1 var(--display); letter-spacing: -0.03em; }
.tier .badge { position: absolute; top: -14px; left: 30px; background: var(--action); color: var(--off); font: 600 13px/1 var(--body); padding: 8px 14px; border-radius: 999px; }
.tier .amt { display: flex; align-items: baseline; gap: 6px; }
.tier .amt b { font: 700 clamp(44px, 4.2vw, 58px)/1 var(--display); letter-spacing: -0.05em; }
.tier .amt b span { font: inherit; color: inherit; }
.tier .amt > span { font-size: 15px; color: var(--slate); }
.tier .fine { font-size: 13px; color: var(--slate); margin-top: -10px; }
.tier.pop .amt > span, .tier.pop .fine { color: #B9C6CC; }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.tier li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.tier li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--action); }
.tier.pop li svg { color: var(--soft); }
.tier .btn { width: 100%; }
.tier:not(.pop) .btn { background: rgba(14, 42, 51, .06); color: var(--ink); }
.price-one { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--tile); overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px var(--line); } /* taste-skill-ignore: card edge */
.price-one > div { padding: clamp(26px, 3.4vw, 44px); display: grid; gap: 16px; align-content: start; }
.price-one .pay { background: var(--ink); color: var(--off); }
.price-one .pay .amt { display: flex; align-items: baseline; gap: 8px; }
.price-one .pay .amt b { font: 700 clamp(52px, 5vw, 72px)/1 var(--display); letter-spacing: -0.05em; }
.price-one .pay p { color: var(--on-dark-2); }
.price-one ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.price-one li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; }
.price-one li svg { width: 20px; height: 20px; margin-top: 2px; color: var(--action); }
@media (max-width: 960px) { .tiers { grid-template-columns: 1fr; max-width: 460px; } .tier.pop { order: -1; } .price-one { grid-template-columns: 1fr; } }

/* ---------- Cross-links: two clearly different choices, each in its own family's soft fill ---------- */
.next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.next a { display: grid; align-content: center; gap: 6px; min-height: 148px; padding: 28px 32px; border-radius: var(--tile); background: var(--cs, var(--white)); color: var(--ink); text-decoration: none; transition: transform .2s var(--ease), background-color .2s ease, color .2s ease; }
.next a.nb { --cs: var(--pink); --c: var(--berry); } .next a.ns { --cs: var(--mint); --c: var(--pine); } .next a.nx { --cs: var(--rose); --c: var(--oxblood); }
.next a b { font: 700 clamp(24px, 2.2vw, 30px)/1.1 var(--display); letter-spacing: -0.035em; color: var(--c, var(--action)); transition: color .2s ease; }
.next a small, .next a em { font-style: normal; color: var(--text-2); font-size: 15px; transition: color .2s ease; }
.prodnav .next a:hover, .prodnav .next a:focus-visible { background: var(--c); transform: translateY(-4px); }
.prodnav .next a:hover b, .prodnav .next a:hover small, .prodnav .next a:hover em, .prodnav .next a:hover .nx-go, .prodnav .next a:focus-visible b, .prodnav .next a:focus-visible small, .prodnav .next a:focus-visible em, .prodnav .next a:focus-visible .nx-go { color: var(--off); }
.next a:active { transform: scale(.99); }
.next a > span { display: grid; gap: 4px; }
.next-gap { display: block; }

.next a { min-width: 0; }
/* "Pairs well with" (round 32): the two cards reuse the cross-link cards above (each in its own family's colours); the Suite strip below them
   is the only Rose and Oxblood part, like the other Suite cross-links. */
/* Free check details form, the optional business fields and the personalised printable page (round 32) */
.ckform { margin-top: 12px; max-width: none; gap: 14px; }
.ck-ig2 { margin: 12px 0 0; font-size: 15px; color: var(--text-2); }
.chk-about { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chk-about label { display: grid; gap: 6px; font: 600 14px/1.3 var(--body); color: var(--text-2); }
.chk-about select { width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--white); color: var(--ink); font: 400 16px/1.3 var(--body); box-shadow: inset 0 0 0 1.5px var(--silver); }
.chk-about select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--action); }
.chk-out h3 small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.ck-for { margin: 0 0 8px; font: 500 18px/1.4 var(--body); color: var(--ink); }
.ck-for b { font-family: var(--display); font-weight: 700; color: var(--action); }
/* Round 33: the follow-up question's "Other" field, and the printable page's tick boxes */
.chk-other { flex: 1 1 100%; display: block; }
.chk-other input { width: 100%; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 12px; background: var(--white); color: var(--ink); font: 400 16px/1.3 var(--body); box-shadow: inset 0 0 0 1.5px var(--silver); }
.chk-other input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--action); }
.chk-other[hidden] { display: none; }
.ck-fb { margin: 12px 0 0; font-size: 15px; color: var(--text-2); }
.ck-q { margin: 6px 0 4px; font-size: 15px; color: var(--ink); }
.ck-opts { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
.ck-opts li { display: inline-flex; align-items: center; gap: 7px; }
.ck-sq { flex: none; width: 13px; height: 13px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.ck-line { display: inline-block; width: 150px; height: 1em; border-bottom: 1.5px solid var(--ink); }
/* PDPA notice line and the two optional boxes on every form (round 32) */
.pdpa-note { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.pdpa-note a { color: var(--action); text-underline-offset: 3px; }
.optin { display: grid; gap: 4px; margin: 8px 0 14px; }
.chkbox { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; font-size: 15px; line-height: 1.4; color: var(--ink); cursor: pointer; }
.chkbox input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--action); cursor: pointer; }
.pairs .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
/* The three-step example in each card: a small icon, then what happens, left to right (one column below 1100px). */
.next a .pflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(14, 42, 51, .14); transition: border-color .2s ease; }
.pflow .ps { position: relative; display: grid; align-content: start; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--ink); transition: color .2s ease; }
.pflow .ps i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--white); color: var(--c, var(--action)); transition: background-color .2s ease, color .2s ease; }
.pflow .ps i svg { width: 20px; height: 20px; }
.pflow .ps + .ps::before { content: "\2192"; position: absolute; left: -14px; top: 5px; width: 12px; text-align: center; font-weight: 700; color: var(--c, var(--action)); transition: color .2s ease; }
@media (max-width: 1100px) {
  .next a .pflow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pflow .ps { grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; }
  .pflow .ps + .ps::before { content: none; }
}
.pairs-suite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 16px; padding: 24px 32px; border-radius: var(--tile); background: var(--rose); color: var(--oxblood); }
.pairs-suite p { margin: 0; flex: 1 1 320px; font: 500 clamp(18px, 1.8vw, 22px)/1.3 var(--body); }
.pairs-suite p b { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
.pairs-suite .btn { background: var(--oxblood); color: var(--off); }
.pairs-suite .btn:hover, .pairs-suite .btn:focus-visible { background: var(--ink); }
.prodnav .back { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 22px; }
/* ---------- Footer: uncovered as the last section lifts away ---------- */
/* Footer (round 29): the CTA band is its own tile on the page ground, with real space below it; the link footer is a separate Ink block
   with a rounded top edge, a hairline and a step in tone. Each column sits under its heading with hairline dividers between columns. */
.foot { position: relative; z-index: 0; background: var(--off); color: var(--off); padding-top: clamp(56px, 7vw, 96px); }
.foot .cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px 40px; padding: clamp(36px, 5vw, 64px) clamp(28px, 5vw, 72px); margin-bottom: clamp(56px, 7vw, 96px); border-radius: var(--tile); background: var(--action); color: var(--off); }
.foot .cta > div { display: grid; gap: 18px; }
.foot .cta > .row { display: flex; flex: 0 1 auto; flex-wrap: wrap; min-width: 0; }   /* round 38: wraps instead of running past the screen edge on phones */
.foot .cta h2 { font-size: var(--t-h2); line-height: 1.05; color: var(--off); }
.foot .cta p { font-size: var(--t-lead); max-width: 42ch; color: rgba(245, 245, 245, .92); }
.fs-bleed { background: var(--ink); border-radius: 48px 48px 0 0; border-top: 1px solid rgba(245, 245, 245, .22); box-shadow: 0 -1px 0 var(--silver); }
.fs { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(44px, 5vw, 64px) var(--m) 28px; }
.fs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 40px; align-items: start; }
.fs-brand { display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: var(--tile); background: rgba(245, 245, 245, .06); } /* taste-skill-ignore: brand block set apart on the left */
.fs-brand .logo { justify-self: start; }
.fs-brand p { color: var(--on-dark-2); font-size: 15px; max-width: 30ch; }
.fs-brand small { color: #8FA3AB; font-size: 13px; }
.fs-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.fs-cols .fa { padding: 0 clamp(16px, 2vw, 28px); border-left: 1px solid rgba(245, 245, 245, .14); }
.fs-cols .fa:first-child { border-left: 0; padding-left: 0; }
.fs h3, .fs h2 { font: 600 13px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--off); }
.fs ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }
.fs a { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 24px; color: var(--on-dark-2); text-decoration: none; transition: color .3s ease; }
.fs a:hover { color: var(--off); }
.fs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.fs a:hover::after, .fs a:focus-visible::after { transform: scaleX(1); }
.fs a svg { width: 16px; height: 16px; flex: none; }
.fs .tags { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(245, 245, 245, .14); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; font-size: 13px; color: #8FA3AB; }
.fs .tags a { color: #C4D1D6; }
@media (max-width: 960px) { .fs-grid { grid-template-columns: 1fr; } .fs-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; } .fs-cols .fa, .fs-cols .fa:first-child { padding: 20px 0; border-left: 0; border-top: 1px solid rgba(245, 245, 245, .14); } }
@media (max-width: 860px) { .fs-bleed { border-radius: 32px 32px 0 0; } }

/* ---------- Glyph portal (21st.dev glyph-portal): where the colour changes, the next section first shows
   through the Skandage mark, which grows as you scroll until you are through it ---------- */
.portal { position: absolute; left: -1px; top: -2px; z-index: 6; display: block; width: calc(100% + 2px); height: calc(min(100svh, 100%) + 2px); pointer-events: none; overflow: hidden; }
.portal.gone { visibility: hidden; }

/* ---------- Following pointer (21st.dev following-pointer), in Skandage colours ---------- */
@media (hover: hover) and (pointer: fine) { .js [data-ptr], .js [data-ptr] * { cursor: none; } }
.fptr { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .15s ease; will-change: transform; }
.fptr.on { opacity: 1; }
/* The arrow's tip is at its top-left corner; script rotates it about the tip so it points at the hovered target */
.fptr svg { display: block; width: 22px; height: 22px; color: var(--pc, var(--harbour)); transform-origin: 2.75px 2.75px; transform: rotate(90deg); filter: drop-shadow(0 2px 3px rgba(14, 42, 51, .25)); }
.fptr span { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--pc, var(--harbour)); color: var(--off); font: 600 13px/1 var(--body); white-space: nowrap; box-shadow: 0 8px 20px rgba(14, 42, 51, .2); transform: translate(22px, 18px) scale(.6); transform-origin: 0 0; transition: transform .25s var(--ease); } /* taste-skill-ignore: the label floats with the pointer */
.fptr.on span { transform: translate(var(--lx, 22px), var(--ly, 18px)); }
/* ---------- Background gradient cards (21st.dev background-gradient), in each sub-brand's own colours ---------- */
.bgg { position: relative; padding: 3px; border-radius: calc(var(--tile) + 3px); isolation: isolate; display: grid; }
.bgg > :last-child { position: relative; z-index: 1; height: 100%; }
.bgg::before, .bgg::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background:
  radial-gradient(circle farthest-side at 0 100%, var(--g1, var(--sig)), transparent),
  radial-gradient(circle farthest-side at 100% 0, var(--g2, var(--action)), transparent),
  radial-gradient(circle farthest-side at 100% 100%, var(--g3, var(--soft)), transparent),
  radial-gradient(circle farthest-side at 0 0, var(--g4, var(--dusk)), var(--ink));
  background-size: 400% 400%; animation: bgmove 6s ease-in-out infinite alternate; } /* taste-skill-ignore: animated colour border from the reference, founders' request */
.bgg::after { filter: blur(22px); opacity: .45; transition: opacity .5s ease; }
.bgg:hover::after { opacity: .9; }
@keyframes bgmove { 0% { background-position: 0 50%; } 100% { background-position: 100% 50%; } }
.fam-suite .bgg, .bgg.mix { --g1: var(--magenta); --g2: var(--sage); --g3: var(--crimson); --g4: var(--rose); }
.pcards .bgg .pcard { box-shadow: none; }
.tiers .bgg { align-self: stretch; }

/* ---------- Playbook mock-up: the structure of a Skandage playbook, without its contents ---------- */
.pbook { width: 100%; max-width: 560px; border-radius: 18px; background: var(--white); box-shadow: 0 16px 36px rgba(14, 42, 51, .12); overflow: hidden; font-size: 12.5px; text-align: left; } /* taste-skill-ignore: document floats */
.pbook .pb-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pbook .pb-top svg { width: 30px; height: 18px; --mk1: var(--ink); --mk2: var(--sig); }
.pbook .pb-top b { font: 700 14px/1 var(--display); letter-spacing: -0.02em; }
.pbook .pb-top .pill { margin-left: auto; }
.pbook .pb-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); }
.pbook nav { display: grid; align-content: start; gap: 2px; padding: 12px 8px; background: var(--off); }
.pbook nav span { display: flex; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--slate); font-weight: 500; }
.pbook nav span em { font-style: normal; font-weight: 600; color: var(--sig); }
.pbook nav span.on { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(14, 42, 51, .08); }
.pbook .pb-main { padding: 14px 16px; display: grid; gap: 12px; }
.pbook .pb-kick { font-size: 11px; font-weight: 600; color: var(--action); letter-spacing: .02em; }
.pbook .pb-h { font: 700 17px/1.15 var(--display); letter-spacing: -0.03em; }
.pbook .sk { display: block; height: 7px; border-radius: 4px; background: #E9ECEF; }
.pbook .pb-persona { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--soft); }
.pbook .pb-persona i { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--white); font: 700 12px/1 var(--display); font-style: normal; color: var(--action); }
.pbook .pb-persona div { flex: 1; display: grid; gap: 6px; }
.pbook .pb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pbook .pb-tiles div { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: var(--off); }
.pbook .pb-tiles b { font-size: 11px; font-weight: 600; }
.pbook .pb-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pbook .pb-cal span { display: grid; gap: 4px; justify-items: center; font-size: 10px; color: var(--slate); }
.pbook .pb-cal span i { width: 100%; height: 16px; border-radius: 5px; background: var(--soft); }
.pbook .pb-cal span i.a { background: var(--sig); } .pbook .pb-cal span i.b { background: var(--action); } .pbook .pb-cal span i.n { background: #EEF0F2; }


/* ======================= Round 9 ======================= */

/* Platform glyphs: single colour, they take the text colour (Ink, or Off White on dark) */
.gl { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.18em; margin-right: .4em; color: currentColor; }
.ask .ex button .gl { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.cf small .gl, .steps .pic small .gl, .ui .r .gl { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }
.cf i .gl { width: 18px; height: 18px; margin: 0; vertical-align: 0; }
.fx .apps span .gl { margin: 0; }
.more .gl { margin-right: 0; }
.hl { background: var(--pink); color: var(--berry); padding: 1px 7px; border-radius: 7px; font-weight: 600; }

/* Header: current page, parent page, About link, the "Can I automate?" pill */
.menu > a.is-on, .dd-t.is-on { color: var(--action); box-shadow: inset 0 -3px 0 var(--action); border-radius: 10px 10px 0 0; }
.dd-i[aria-current="page"], .mega .feat[aria-current="page"] { background: var(--soft); box-shadow: inset 3px 0 0 var(--action); }
.dd-i.is-parent, .mega .feat.is-parent { box-shadow: inset 3px 0 0 var(--silver); }
.dd-i[aria-current="page"] b, .dd-i.is-parent b { color: var(--action); }
.dd-i[aria-current="page"] .ico { background: var(--action); color: var(--off); }
.askpill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--soft); color: var(--action); font: 600 15px/1 var(--body); text-decoration: none; white-space: nowrap; transition: background-color .15s ease, transform .16s ease-out; }
.askpill svg { width: 18px; height: 18px; }
.askpill:hover { background: var(--silver); }
.askpill:active { transform: scale(.97); }
.mnav .dd-i[aria-current="page"] { box-shadow: inset 3px 0 0 var(--action); }

/* Breadcrumbs under the header */
.crumbs { position: absolute; top: var(--hdr); left: 0; right: 0; z-index: 4; pointer-events: none; }
.crumbs ol { list-style: none; margin: 0 auto; padding: 14px var(--m) 0; max-width: 1280px; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 14px; line-height: 1.4; }
.crumbs li { display: inline-flex; align-items: center; pointer-events: auto; }
.crumbs li + li::before { content: "\203A"; margin: 0 8px; color: var(--slate); }
.crumbs a { color: var(--slate); text-decoration: none; padding: 4px 0; }
.crumbs a:hover { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* Back to top */
.totop { position: fixed; right: max(clamp(14px, 2.4vw, 28px), env(safe-area-inset-right, 0px)); bottom: calc(clamp(14px, 2.4vw, 28px) + 4px + env(safe-area-inset-bottom, 0px)); z-index: 45; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--action); color: var(--off); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .25s var(--ease); box-shadow: 0 8px 20px rgba(14, 42, 51, .2); }
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop svg { width: 22px; height: 22px; }
.totop:active { transform: scale(.95); }

/* Footer without the CTA band (contact, PDPA) */
.foot.slim { padding-top: 0; background: transparent; } .foot.slim .fs-bleed { border-radius: 0; box-shadow: none; }

/* Home hero: neutral background video behind the wordmark */
.hp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; pointer-events: none; z-index: 0; }
.hp .btn.quiet { background: rgba(14, 42, 51, .07); }
.hp .btn.quiet:hover { background: rgba(14, 42, 51, .12); }

/* Error messages: an icon and words, never colour alone (red belongs to Suite) */
.ferr { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; background: var(--soft); color: var(--ink); font-size: 14.5px; line-height: 1.4; font-weight: 500; text-align: left; box-shadow: inset 0 0 0 1.5px var(--ink); }
.ferr[hidden] { display: none; }
.ferr svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.form-err { margin-top: -4px; }

/* Forms (contact, waitlist) */
.field-g { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field-g[hidden] { display: none; }
.field-g label, .field-g legend { font: 600 15px/1.3 var(--body); padding: 0; }
.cform input[type="text"], .cform input[type="email"], .cform input[type="tel"], .cform textarea, .wl-field input { width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 16px; background: var(--white); color: var(--ink); font: 400 17px/1.4 var(--body); box-shadow: inset 0 0 0 1.5px var(--silver); transition: box-shadow .15s ease, background-color .15s ease; }
.cform textarea { resize: vertical; min-height: 120px; }
.cform input:hover, .cform textarea:hover { box-shadow: inset 0 0 0 1.5px var(--slate); }
.cform input:focus, .cform textarea:focus, .wl-field:focus-within { outline: none; box-shadow: inset 0 0 0 2px var(--action), 0 0 0 5px var(--soft); }
.cform input[aria-invalid="true"], .cform textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 2.5px var(--ink); background: var(--soft); }
.wl-field:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 2.5px var(--ink); background: var(--soft); }
.pref { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.pref legend { width: 100%; margin-bottom: 8px; }
.opt { position: relative; display: inline-flex; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--silver); font-weight: 500; transition: background-color .15s ease, box-shadow .15s ease; }
.opt input:checked + span { background: var(--soft); box-shadow: inset 0 0 0 2px var(--action); color: var(--ink); }
.opt input:focus-visible + span { outline: 3px solid var(--action); outline-offset: 3px; }
.cdone { display: grid; gap: 14px; justify-items: start; padding: clamp(24px, 3vw, 36px); border-radius: var(--tile); background: var(--soft); max-width: 560px; margin-top: 28px; }
.cdone[hidden], .cform[hidden], .wform[hidden] { display: none; }
.cdone h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.05; }
.cdone .ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--action); box-shadow: 0 0 0 8px rgba(14, 42, 51, .06); }
.cdone .ring svg { width: 28px; height: 28px; }
/* Success-state secondary button: full opacity, white fill and action outline so it never reads as disabled. */
.cdone .btn.quiet { background: var(--white); color: var(--action); box-shadow: inset 0 0 0 2px var(--action); opacity: 1; }
.cdone .btn.quiet:hover { background: var(--action); color: var(--off); box-shadow: inset 0 0 0 2px var(--action); }
.cdone .btn.quiet:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
.cdone .more { min-height: 44px; display: inline-flex; align-items: center; }
.over { font: 600 15px/1 var(--body); color: var(--action); }

/* Contact */
.ct { padding: calc(var(--hdr) + 72px) 0 var(--gap); background: var(--off); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ct h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.05em; margin: 14px 0 16px; }
.cform { display: grid; gap: 18px; margin-top: 28px; max-width: 560px; }
.cform .btn { justify-self: start; }
.ct-alt { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); max-width: 560px; display: grid; gap: 14px; }
.alt-h { font: 600 15px/1 var(--body); color: var(--slate); }
.alt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.btn.is-disabled, a.is-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.alt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.alt-list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.ct-globe { position: sticky; top: calc(var(--hdr) + 40px); }
.globe-box { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin: 0 auto; }
.globe-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity .6s ease; }
.globe-box.live canvas { opacity: 1; }
.globe-box:active canvas { cursor: grabbing; }
.globe-static { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .4s ease; }
.globe-box.live .globe-static { opacity: 0; }
.globe-static .halo { fill: none; stroke: var(--harbour); stroke-width: 2; opacity: .35; transform-box: fill-box; transform-origin: center; animation: pinghalo 2.6s ease-out infinite; }
@keyframes pinghalo { from { transform: scale(.5); opacity: .5; } to { transform: scale(1.5); opacity: 0; } }
.ct-cap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 14px; }
.ct-cap .pin { width: 10px; height: 10px; border-radius: 50%; background: var(--harbour); }
@media (max-width: 900px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } .ct-globe { position: static; order: 2; } .globe-box { max-width: 320px; } }

/* Waitlist and PDPA */
.wl { padding-top: calc(var(--hdr) + 88px); min-height: 100svh; display: grid; align-items: center; }
.wl-in { max-width: 720px; margin: 0 auto; text-align: center; display: grid; gap: 22px; justify-items: center; }
.wl-in h1 { font-size: clamp(40px, 6vw, 76px); line-height: .98; letter-spacing: -0.055em; text-wrap: balance; }
.wl-in .lead { max-width: 46ch; }
.wform { width: 100%; max-width: 560px; display: grid; gap: 16px; justify-items: center; }
.wform .field-g { width: 100%; }
.wl-field { display: flex; align-items: center; gap: 14px; padding: 6px 6px 6px 22px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--silver); }
.wl-field input { min-height: 48px; padding: 0; border-radius: 0; background: transparent; box-shadow: none !important; }
.wl-field input:focus { box-shadow: none; }
.wl-field input[aria-invalid="true"] { background: transparent; box-shadow: none !important; }
.pickrow { display: grid; gap: 12px; justify-items: center; }
.pick { font-weight: 500; }
.pick b { font-weight: 600; color: var(--action); }
.linkbtn { border: 0; background: none; padding: 6px 4px; color: var(--action); font: 600 16px/1 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.tierchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tierchips[hidden] { display: none; }
.chip[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--c, var(--action)); background: var(--cs, var(--soft)); }
.wform .note-sm { max-width: 44ch; }
.wl .cdone { justify-items: center; text-align: center; margin-top: 0; }
.pdpa { padding-top: calc(var(--hdr) + 88px); }
.pd-in { max-width: 680px; display: grid; gap: 20px; }
.pd-in h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -0.05em; }

/* Isometric layer stack (Skandage Social roles): thin slabs in isometric view, one per role */
.iso { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.iso-stage { position: relative; height: clamp(500px, 54vw, 680px); display: grid; place-items: center; }
.iso-stack { --w: clamp(190px, 22vw, 280px); --th: 5px; --r: 24px; list-style: none; margin: 0; padding: 0; position: relative; width: var(--w); height: var(--w); transform: rotateX(55deg) rotateZ(-45deg); transform-style: preserve-3d; }
/* A slab is a thin flat layer: a rounded top, a copy of it a few px below (so the corners have thickness too), and flat side faces between. */
.slab { position: absolute; inset: 0; transform-style: preserve-3d; transform: translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px)); transition: transform .6s var(--ease); will-change: transform; --sc: var(--white); }
.slab.k-berry { --sc: var(--berry); } .slab.k-pink { --sc: var(--pink); } .slab.k-white { --sc: var(--white); }
.slab::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); background: var(--sc); filter: brightness(.84); transform: translateZ(calc(var(--th) * -1)); backface-visibility: hidden; }
.slab .top { position: absolute; inset: 0; border-radius: var(--r); background: var(--sc); color: var(--ink); display: grid; outline: 1px solid transparent; backface-visibility: hidden; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.slab.k-white .top { box-shadow: inset 0 0 0 1px rgba(14, 42, 51, .06); }
.slab.k-berry .top { color: var(--off); }
.slab .top button { display: grid; align-content: end; justify-items: start; gap: 4px; width: 100%; height: 100%; padding: 0 22px 10px; border: 0; border-radius: inherit; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.slab .top button:focus-visible { outline: 3px solid var(--ink); outline-offset: -8px; }
.slab .top .n { display: none; }
.slab .top .t { font: 700 clamp(12px, 1.2vw, 15px)/1.1 var(--display); letter-spacing: -0.03em; white-space: nowrap; }
.slab .sf, .slab .sl { position: absolute; background: var(--sc); filter: brightness(.84); backface-visibility: hidden; }
.slab .sf { left: var(--r); top: 100%; width: calc(100% - var(--r) * 2); height: var(--th); transform-origin: top; transform: rotateX(-90deg); }
.slab .sl { right: 100%; top: var(--r); width: var(--th); height: calc(100% - var(--r) * 2); transform-origin: right; transform: rotateY(-90deg); }
.slab.k-white .sf, .slab.k-white .sl, .slab.k-white::after { background: #E6E8EC; filter: none; }
/* Each pile has its own soft floor shadow, centred under it, the same isometric shape as the slabs and a little larger. Script sets its size and strength from the slabs in the pile. */
.pshadow { position: absolute; inset: 0; border-radius: calc(var(--r) + 10px); background: var(--ink); opacity: 0; filter: blur(16px); transform: translate3d(var(--x, 0px), var(--y, 0px), -7px) scale(var(--s, 1.1)); transition: transform .6s var(--ease), opacity .5s ease; pointer-events: none; }.iso-info { display: grid; gap: 14px; align-content: center; min-height: 260px; padding: clamp(24px, 3vw, 36px); border-radius: var(--tile); background: var(--soft); }
.iso-info h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.045em; }
.iso-info p { font-size: 18px; max-width: 34ch; }
.iso-info .iso-nav { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.iso-info .count { min-width: 56px; text-align: left; font-weight: 600; font-size: 15px; color: var(--text-2); }
.iso-info.swap > * { animation: panelIn .4s var(--ease) backwards; }
.iso-list { list-style: none; margin: 0; padding: 0; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.iso-list li { display: grid; gap: 6px; }
.iso-list h3 { font-size: 24px; }
html:not(.js) .iso-stage, html:not(.js) .iso-info { display: none; }
html:not(.js) .iso-list, .iso.plain .iso-list { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
html:not(.js) .iso-list li, .iso.plain .iso-list li { padding: 22px; border-radius: var(--tile); background: var(--soft); }
.iso.plain .iso-stage, .iso.plain .iso-info { display: none; }
@media (max-width: 900px) { .iso { grid-template-columns: minmax(0, 1fr); } .iso-stage { height: clamp(380px, 90vw, 460px); } .iso-info { min-height: 0; } }

/* FAQ groups (tabs on About) */
.ftabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
/* FAQ pills carry their own family: navigation exception to one colour family per page (like the home chooser and the mega menu) */
.ftab { --ta: var(--harbour); --ts: var(--mist); min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ts); color: var(--ta); font: 600 15px/1 var(--body); cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .16s ease-out; }
.ftab.t-brands { --ta: var(--berry); --ts: var(--pink); } .ftab.t-solutions { --ta: var(--pine); --ts: var(--mint); } .ftab.t-suite { --ta: var(--oxblood); --ts: var(--rose); }
.ftab:hover { background: var(--silver); }
.ftab:active { transform: scale(.97); }
.ftab[aria-selected="true"] { background: var(--ta); color: var(--off); }
.ftab:focus-visible { outline-color: var(--ta); }
.fpanel[hidden] { display: none; }
.faq-more { padding-top: 12px; }

/* Founders */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fcard { display: grid; grid-template-rows: auto 1fr; border-radius: var(--tile); background: var(--off); overflow: hidden; }
.fname { display: grid; align-items: end; min-height: clamp(180px, 20vw, 260px); padding: 20px clamp(22px, 3vw, 34px) 12px; background: var(--mist); overflow: hidden; }
.fname span { font: 700 clamp(60px, 8.6vw, 124px)/.86 var(--display); letter-spacing: -0.065em; color: var(--ink); }
.fname span::after { content: "."; color: var(--dusk); }
.fbody { display: grid; gap: 16px; align-content: start; padding: clamp(22px, 3vw, 34px); }
.fbody h3 { font-size: clamp(22px, 2vw, 26px); line-height: 1.15; display: grid; gap: 2px; }
.fbody h3 small { font: 500 15px/1.3 var(--body); letter-spacing: 0; color: var(--text-2); }
.fbody p { color: var(--text-2); }
.tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; } }

/* ======================= Round 10 ======================= */

/* Who it's for: picture on top, Now -> After as a change */
.tasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.task { background: var(--white); border-radius: var(--tile); padding: 10px 10px 26px; display: grid; gap: 16px; align-content: start; box-shadow: 0 0 0 2px transparent; transition: transform .35s var(--ease), box-shadow .25s ease; }
.task:hover { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--action); }
.task > :not(.ph) { margin: 0 16px; }
.task .ph { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--soft); display: grid; place-items: center; }
.task .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.task:hover .ph img { transform: scale(1.04); }
.task .ph.icon svg { width: 34%; height: auto; color: var(--action); }
.task h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.03em; }
.task .ba { display: grid; gap: 8px; justify-items: start; }
.task .ba .b, .task .ba .a { display: grid; gap: 2px; }
.task .ba span { font-size: 13px; font-weight: 600; }
.task .ba .b { color: var(--slate); }
.task .ba .b span { color: var(--slate); }
.task .ba .a { color: var(--action); font-weight: 600; }
.task .ba .a span { color: var(--action); }
.task .chv { width: 14px; height: 22px; color: var(--sig); transform: rotate(90deg); margin-left: 2px; }

/* Compact steps strip: three numbered steps in one row with a connecting line */
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; counter-reset: s; }
.strip::before { content: ""; position: absolute; top: 22px; left: 22px; right: 22px; height: 2px; border-radius: 2px; background: rgba(14, 42, 51, .16); }
.strip li { position: relative; display: grid; gap: 6px; align-content: start; padding-right: 12px; }
.strip .n { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--action); color: var(--off); font: 700 18px/1 var(--display); margin-bottom: 10px; box-shadow: 0 0 0 6px var(--strip-bg, var(--white)); }
.strip b { font: 700 22px/1.2 var(--display); letter-spacing: -0.03em; }
.strip p { color: var(--text-2); font-size: 16px; max-width: 30ch; }
.strip-more { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }
.f-white { --strip-bg: var(--white); } .f-mist { --strip-bg: var(--mist); }


/* Founders: what we both bring */
.both { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: -12px 0 28px; }
.both b { font: 600 15px/1 var(--body); color: var(--slate); }

/* Skandage Social comparison: one row of cards that scrolls sideways, one comparison per card */
.cmp-hint { margin: -8px 0 18px; font-size: 15px; color: var(--text-2); }
.cmp-track { grid-auto-columns: minmax(280px, 330px); gap: 16px; padding-bottom: 14px; cursor: grab; }
.track.dragging { cursor: grabbing; user-select: none; }
.cmp-card { scroll-snap-align: start; display: grid; grid-template-rows: auto auto 1fr; gap: 18px; align-content: start; padding: 26px; border-radius: var(--tile); background: var(--white); }
.cmp-card h3 { font: 700 24px/1.1 var(--display); letter-spacing: -0.04em; color: var(--action); min-height: 2.2em; display: flex; align-items: end; }
.cmp-us span, .cmp-ag span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--action); }
.cmp-us p { font-size: 18px; line-height: 1.4; color: var(--ink); }
.cmp-ag { align-self: stretch; padding: 16px 18px; border-radius: 18px; background: var(--off); }
.cmp-ag span, .cmp-ag p { color: var(--slate); }
.cmp-ag p { font-size: 16px; line-height: 1.45; }
.cmp-card.hi { background: var(--action); }
.cmp-card.hi h3, .cmp-card.hi .cmp-us span, .cmp-card.hi .cmp-us p { color: var(--off); }
.cmp-card.hi .cmp-ag { background: rgba(245, 245, 245, .16); }
.cmp-card.hi .cmp-ag span, .cmp-card.hi .cmp-ag p { color: var(--off); }
.cmp-card.solo { background: var(--soft); border-radius: var(--tile); box-shadow: inset 0 0 0 2px var(--action); }
.cmp-honest { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 40px; align-items: center; padding: clamp(24px, 3vw, 38px); border-radius: var(--tile); background: var(--ink); color: var(--off); }
.cmp-honest h3 { font-size: clamp(22px, 2vw, 28px); margin-bottom: 14px; }
.cmp-honest .tag { background: var(--off); color: var(--ink); }
.cmp-honest p { color: var(--on-dark-2); }
.cmp-honest p b { color: var(--off); }
.cmp-cta { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; padding: clamp(28px, 3.4vw, 46px); border-radius: var(--tile); background: var(--action); color: var(--off); }
.cmp-cta h3 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -0.05em; max-width: 14ch; }
.cmp-cta .more { color: var(--off); }
@media (max-width: 960px) { .cmp-honest { grid-template-columns: 1fr; } }

/* Roles stack: starts collapsed, detail panel level with the top of the stack */
.iso { align-items: start; }
#roles .sec-head { margin-bottom: 0; }
.iso-stage { height: auto; min-height: 0; display: block; }
.iso-stack { margin: 0 auto; }
.iso.nofx .slab { transition: none !important; }
.iso-info { align-self: start; }
.iso-info .iso-pick[hidden] { display: none; }
.iso-info.idle { min-height: 0; }
.iso-reset { justify-self: start; }
.iso-reset[hidden] { display: none; }
.slab.is-out .top .t { font-size: clamp(13px, 1.2vw, 16px); }
.iso-info .prompt { font: 700 clamp(22px, 2.2vw, 30px)/1.15 var(--display); letter-spacing: -0.035em; }
@media (max-width: 900px) { .iso-info { margin-top: 0; } }
/* Header fit. The pill is defined after the earlier breakpoint, so the breakpoint is repeated here. Sub-brand logos are wide,
   so the phone menu takes over a little earlier and the bar tightens before that. */
@media (max-width: 1240px) { .menu, .askpill { display: none; } .burger { display: grid; } }
@media (max-width: 1360px) { .hdr .bar { gap: 14px; } .menu > a, .dd-t { padding: 0 10px; } .askpill { padding: 0 14px 0 12px; } .acts { gap: 8px; } .acts .btn { padding: 0 20px; } }
@media (max-width: 1300px) { .logo.sub img { height: 26px; } .menu > a, .dd-t { font-size: 16px; } }


/* ======================= Round 12 ======================= */
.cmp-cta { margin-top: 28px; }
/* What you can look forward to */
.fwd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fwd-tile { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--tile); background: var(--white); }
.fwd-tile b { font: 700 24px/1.1 var(--display); letter-spacing: -0.04em; color: var(--action); }
.fwd-tile p { font-size: 17px; color: var(--ink); }
.fwd-more { margin-top: 24px; }
@media (max-width: 1080px) { .fwd { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Chip on the Social product card */
.pc-chip { justify-self: start; display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--action); font-size: 13.5px; font-weight: 600; }
/* Pricing cards: equal height, buttons on the bottom edge, and a labelled "Reviews and extras" group in each */
.tiers .tier { display: flex; flex-direction: column; }
.tiers .tier .btn { margin-top: auto; }
.tier.pop { padding: 44px 30px 29px; }   /* the featured card sits in a 3px frame, so it gets 3px less at the bottom to keep the buttons level */
.tier-x { display: grid; gap: 10px; align-content: start; padding-top: 16px; margin-top: 2px; border-top: 1px solid var(--line); }
.tier.pop .tier-x { border-top-color: rgba(245, 245, 245, .18); }
.tier-x > b { font: 600 13px/1 var(--body); color: var(--action); letter-spacing: .01em; }
.tier.pop .tier-x > b { color: var(--soft); }
.tier-x ul { margin: 0; }
.tier-grp { position: relative; display: grid; gap: 10px; padding: 12px 14px 14px; margin: 0 -14px; border-radius: 18px; background: transparent; opacity: .72; transition: background-color .3s ease, opacity .3s ease; }
.tier-gh { font: 700 15px/1.2 var(--display); letter-spacing: -0.02em; }
.tier-need { position: absolute; top: 12px; right: 14px; font-size: 12.5px; font-weight: 500; color: var(--slate); }
.tier-grp.on { background: var(--soft); opacity: 1; }
.tier-grp.on .tier-need { display: none; }
.tier-short { font-size: 14px; color: var(--text-2); }
@media (max-width: 960px) { .tier-need { position: static; } }
@media (prefers-reduced-motion: reduce) { .tier-grp { transition: none; } }
/* ---------- Motion: entrances once; nothing stays hidden without script ---------- */
.js [data-fx~="fade"] .rv { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-fx~="fade"] .rv.in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.js .hp-word > * { animation: rise .8s var(--ease) backwards; animation-delay: calc(var(--n, 0) * 70ms); }
.js .hp-tag { animation: rise .6s var(--ease) backwards; animation-delay: calc(.3s + var(--n, 0) * 70ms); }
.js .hp-copy { animation: rise .7s var(--ease) .45s backwards; }
.js .hero h1 span, .js .hero .low { animation: rise .7s var(--ease) backwards; }
.js .hero h1 .l2 { animation-delay: .08s; }
.js .hero .low { animation-delay: .2s; }
.settled .hp-word > *, .settled .hp-tag, .settled .hp-copy, .settled .hero h1 span, .settled .hero .low { animation: none; }   /* round 38: see the safety net in site.js */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
  .js [data-fx~="fade"] .rv { opacity: 1; transform: none; filter: none; }
  .portal { display: none; }
  [data-words] .w { opacity: 1; }
}

/* ======================= Round 14 ======================= */
/* Founder skills: plain list, a small chevron from the mark as the bullet, thin Silver rows */
.sk-h { display: block; margin: 22px 0 4px; font: 600 14px/1 var(--body); color: var(--slate); }
.skills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.skills li { position: relative; padding: 11px 0 11px 22px; border-bottom: 1px solid var(--silver); font: 400 16px/1.35 var(--body); color: var(--ink); }
.skills li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 10px; height: 14px; margin-top: -7px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpolyline points='2,2 7,7 2,12' fill='none' stroke='%237695CB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.both { align-items: flex-start; flex-direction: column; gap: 6px; margin: -12px 0 32px; }
.both .skills { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .both .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ======================= Round 16 ======================= */
/* Section-to-section transitions. The line is one 4px round-capped stroke in the page's signature colour. */
.tline { position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; }
.tline path { fill: none; stroke: var(--sig); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
[data-tr="xfade"] { position: relative; }
.xfade { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-tr="xfade"] > .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .qa-i { transition: none; } }

/* ======================= Round 17 ======================= */
/* Line transitions end in an arrowhead: same 4px stroke, round caps and joins; it shows only once the line is drawn. */
.tline path.ah { opacity: 0; transition: opacity .2s ease; }

/* Word reveal: one plain word grows and pins for about a screen, then releases. At rest it is never larger than the hero size. */
.wordband { height: 200svh; margin: calc(var(--gap) * -1) 0 clamp(24px, 4vw, 56px); }
.wb-in { position: sticky; top: var(--hdr); height: calc(100svh - var(--hdr)); display: grid; place-items: center; overflow: hidden; }
.wb-in span { grid-area: 1 / 1; display: block; max-width: min(100%, 1100px); padding: 0 var(--m); box-sizing: border-box; text-align: center; font: 700 clamp(44px, 8vw, 92px)/1.02 var(--display); letter-spacing: -0.05em; color: var(--action); will-change: transform, opacity; }



/* Sites laptop hero: the lid opens as you scroll and the screen shows four example sites, one after another. */
.lap { position: relative; height: 260svh; background: var(--off); }
.lap-pin { position: sticky; top: 0; height: 100svh; padding: calc(var(--hdr) + 16px) var(--m) 24px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 56px); align-items: center; max-width: 1240px; margin: 0 auto; box-sizing: border-box; }
.lap-copy { display: grid; gap: 20px; justify-items: start; }
.lap-copy h1 { display: grid; row-gap: .2em; font-size: clamp(38px, 5.2vw, 76px); line-height: 1; letter-spacing: -0.05em; }
.lap-copy h1 .l1 { color: var(--ink); } .lap-copy h1 .l2 { color: var(--action); }
.lap-copy p { font-size: var(--t-lead); max-width: 40ch; color: var(--text-2); }
.lap-copy .row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.lap-dev { perspective: 2400px; width: 92%; max-width: 640px; justify-self: center; }   /* round 38: the tilted lid and the 110% base no longer run past the screen edge at 1024 to 1280 */
.lap-lid { aspect-ratio: 16 / 10; padding: 2.4%; border-radius: 18px 18px 6px 6px; background: var(--ink); transform-origin: 50% 100%; box-shadow: 0 24px 50px rgba(14, 42, 51, .22); }
.lap-screen { position: relative; height: 100%; border-radius: 8px; overflow: hidden; background: var(--white); container-type: inline-size; color: var(--ink); }
.lap-base { position: relative; height: 14px; width: 110%; margin: 0 0 0 -5%; border-radius: 0 0 16px 16px; background: var(--silver); }
.lap-base::after { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 5px; margin-left: -8%; border-radius: 0 0 6px 6px; background: rgba(14, 42, 51, .18); }
.lsite { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; font-size: 2.3cqw; line-height: 1.25; opacity: 0; transition: opacity .45s ease; }
.lsite.on { opacity: 1; }
.lsite .exb { position: absolute; right: 2.4cqw; bottom: 2.4cqw; z-index: 2; padding: .5em 1em; border-radius: 999px; background: var(--ink); color: var(--off); font: 600 1em/1 var(--body); }
.lsite .ln { display: flex; align-items: center; gap: 2.4cqw; padding: 2cqw 3cqw; border-bottom: 1px solid var(--silver); font-weight: 500; }
.lsite .ln b { margin-right: auto; font: 700 1.15em/1 var(--display); letter-spacing: -0.03em; }
.lsite .ln i, .lsite .cta { font-style: normal; padding: .6em 1.2em; border-radius: 999px; font-weight: 600; background: var(--berry); color: var(--off); }
.lsite .lb { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3cqw; align-items: center; padding: 3cqw; }
.lsite .lt { display: grid; gap: 1.6cqw; justify-items: start; }
.lsite .lt em { font: 600 .9em/1 var(--body); font-style: normal; color: var(--berry); }
.lsite h4, .lsite .ht { display: block; font: 700 2.7em/1.02 var(--display); letter-spacing: -0.045em; }
.lsite p { color: var(--slate); }
.lsite .lc { display: grid; gap: 1.4cqw; }
.lsite .lc span { padding: 1.5em 1.2em; border-radius: 12px; background: var(--pink); font-weight: 600; color: var(--berry); }
/* 2: tutor, centred */
.s2 .lb { grid-template-columns: 1fr; text-align: center; }
.s2 .lt { justify-items: center; } .s2 .lt em { color: var(--magenta); filter: none; } .s2 .ln i { background: var(--magenta); color: var(--ink); }
.s2 .chips { display: flex; gap: 1.4cqw; } .s2 .chips u { text-decoration: none; padding: .5em 1.1em; border-radius: 999px; background: var(--pink); font-weight: 600; }
.s2 .lc { grid-template-columns: repeat(3, minmax(0, 1fr)); } .s2 .lc span { background: var(--off); color: var(--ink); text-align: center; }
/* 3: fitness coach, dark */
.s3 { background: var(--ink); color: var(--off); } .s3 .ln { border-color: rgba(245, 245, 245, .18); } .s3 .ln i, .s3 .cta { background: var(--magenta); color: var(--ink); } .s3 .lt em { color: var(--magenta); }
.s3 h4, .s3 .ht { font-size: 3.2em; } .s3 .sch { display: grid; gap: 1.4cqw; } .s3 .sch span { display: grid; grid-template-columns: 6em 1fr; padding: 1.1em 1.2em; border-radius: 12px; background: rgba(245, 245, 245, .08); } .s3 .sch b { color: var(--magenta); }
/* 4: property agent, listings */
.s4 .lb { grid-template-columns: 1fr; gap: 2cqw; align-items: start; } .s4 .ln i { background: var(--ink); } .s4 .lt em { color: var(--berry); }
.s4 .ls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; } .s4 .ls span { display: grid; gap: .3em; padding: 0 0 1em; border-radius: 12px; background: var(--off); overflow: hidden; color: var(--slate); }
.s4 .ls u { display: block; height: 9cqw; background: var(--pink); } .s4 .ls b { margin: .5em 1em 0; color: var(--ink); } .s4 .ls span { padding-inline: 0; } .s4 .ls span > :not(u) { margin-inline: 1em; }
@media (max-width: 860px) {
  .lap-pin { grid-template-columns: 1fr; align-content: start; gap: 18px; padding-top: calc(var(--hdr) + 8px); }
  .lap-copy { gap: 12px; } .lap-copy h1 { font-size: 8.4vw; } .lap-copy h1 span { white-space: nowrap; } .lap-copy p { display: none; }
  .lap-dev { max-width: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .lap { height: auto; } .lap-pin { position: static; height: auto; padding-block: calc(var(--hdr) + 32px) 48px; }
  .wordband { height: auto; } .wb-in { position: static; height: auto; padding: 24px 0 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .5em; } .wb-in span { font-size: clamp(40px, 6vw, 56px); }
  .lsite { transition: none; }}

/* ======================= Round 18 ======================= */
/* Sites laptop: the example sites play by themselves. Each fades in, its parts rise in a little, then it crossfades into the next. */
.lsite { transition: opacity .7s ease; }
@keyframes lrise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lsite.on .lt > *, .lsite.on .lc > *, .lsite.on .sch > *, .lsite.on .ls > *, .lsite.on .chips { animation: lrise .6s var(--ease) both; animation-delay: calc(.15s + var(--k, 0) * 90ms); }
.lsite .lt > :nth-child(2), .lsite .lc > :nth-child(2), .lsite .sch > :nth-child(2), .lsite .ls > :nth-child(2) { --k: 1; }
.lsite .lt > :nth-child(3), .lsite .lc > :nth-child(3), .lsite .sch > :nth-child(3), .lsite .ls > :nth-child(3) { --k: 2; }
.lsite .lt > :nth-child(4) { --k: 3; }
@media (prefers-reduced-motion: reduce) { .lsite.on .lt > *, .lsite.on .lc > *, .lsite.on .sch > *, .lsite.on .ls > *, .lsite.on .chips { animation: none; } }

/* Real Skandage Social screens, shown unedited in a plain rounded frame. */
.shot { padding: 0 !important; overflow: hidden; border-radius: var(--tile); background: var(--off); box-shadow: 0 10px 30px rgba(14, 42, 51, .12); }
.fx .vis.shot { min-height: 0; display: block; }
.fx .vis.shot img { display: block; width: 100%; height: auto; }

.steps .pic.has-shot { padding: 0; overflow: hidden; background: var(--off); display: block; box-shadow: 0 10px 30px rgba(14, 42, 51, .12); min-height: 0; border-radius: var(--tile); }
.steps .pic.has-shot img { display: block; width: 100%; height: auto; }
.cs-screen.shot { display: block; border-radius: 22px; box-shadow: none; background: #F5F5F5; }
.cs-screen.shot img { display: block; margin: 0 auto; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.cs-cap { max-width: 1040px; margin: 18px auto 0; text-align: center; font-size: 14px; color: var(--slate); }

/* ---------- Blog (round 20): index cards and the shared article layout ---------- */
.bh { padding-top: clamp(124px, 11vw, 140px); padding-bottom: clamp(48px, 6vw, 88px); }
.bh .sec-head { margin-bottom: 0; max-width: 820px; }
.bh .over a { display: inline-flex; align-items: center; min-height: 44px; color: var(--action); text-decoration: none; font-weight: 600; }
.bh .over a:hover { text-decoration: underline; }
.bh h1.h2 { font-size: clamp(32px, 5vw, 64px); line-height: 1.02; text-wrap: balance; }
.bcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 56px); }
.bcard { position: relative; display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: var(--tile); background: var(--white); box-shadow: 0 0 0 2px transparent; transition: transform .35s var(--ease), box-shadow .25s ease; }
.bcard:hover, .bcard:focus-within { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--action); }
.bcard h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -0.035em; }
.bcard h2 a { color: var(--ink); text-decoration: none; }
.bcard h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--tile); }
.bcard h2 a:focus-visible { outline: none; }
.bcard:focus-within { outline: 3px solid var(--action); outline-offset: 3px; }
.bcard p { color: var(--text-2); }
.btag { justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--action); font: 600 14px/1 var(--body); }
.bstat { font-weight: 600; color: var(--slate); }
.bmeta { margin-top: 18px; color: var(--slate); font-weight: 500; }
.bpost { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.bbody { max-width: 760px; display: grid; gap: 18px; }
.bdraft { font: 700 clamp(22px, 2.4vw, 30px)/1.2 var(--display); letter-spacing: -0.03em; color: var(--slate); }
.bdraft:empty { display: none; }
/* ---------- Case study (round 20): leave tracker. Static visual in the page's own family colours. ---------- */
.case-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.case-copy { display: grid; gap: 28px; }
.case-g h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 10px; color: var(--action); }
.case-list { list-style: none; margin: 0; padding: 0; display: grid; }
.case-list li { position: relative; padding: 12px 0 12px 26px; border-top: 1px solid var(--line); }
.case-list li:last-child { border-bottom: 1px solid var(--line); }
.case-list li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--sig); }
.case-vis { margin: 0; min-width: 0; display: grid; gap: 20px; justify-items: center; position: relative; padding: 0 4px; }
.case-vis > * { min-width: 0; max-width: 100%; }
.case-vis figcaption { font-size: 14px; color: var(--slate); text-align: center; overflow-wrap: anywhere; }
.phone { width: min(100%, 340px); border-radius: 36px; background: var(--ink); padding: 10px; }
.bot { border-radius: 26px; overflow: hidden; background: var(--mint); color: var(--ink); }
.bot-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--white); color: var(--pine); font: 600 15px/1 var(--body); }
.bot-top b { color: var(--ink); font-weight: 600; }
.bot-top .gl { width: 20px; height: 20px; }
.bot-chat { display: grid; gap: 8px; padding: 14px 12px 14px; }
.bot-msg { padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: var(--white); font-size: 15px; line-height: 1.35; }
.bot-msg span { display: block; margin-top: 4px; font-size: 14px; color: var(--slate); }
.bot-msg i { font-style: normal; color: var(--pine); font-weight: 600; }
.bot-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bb { grid-column: span 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 14px; background: var(--white); color: var(--ink); font: 600 14px/1.2 var(--body); text-align: center; box-shadow: 0 0 0 1px rgba(43, 106, 86, .18); }
.bb.full { grid-column: 1 / -1; }
.bb svg { width: 18px; height: 18px; flex: none; color: var(--pine); }
.case-card { padding: clamp(20px, 2.4vw, 32px); border-radius: var(--tile); background: var(--white); }
.case-card .case-list li { border-color: rgba(43, 106, 86, .22); }
.case-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.case-tabs button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--mint); color: var(--pine); font: 600 15px/1 var(--body); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.case-tabs button[aria-selected="true"] { background: var(--pine); color: var(--off); }
.case-tabs button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
html:not(.js) .case-tabs { display: none; }
html:not(.js) .case-panels { display: grid; gap: 28px; }
.js .case-panels { display: grid; }
.js .case-panels > .case-g { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s .18s; }
.js .case-panels > .case-g.on { opacity: 1; visibility: visible; transition: opacity .18s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .js .case-panels > .case-g, .js .case-panels > .case-g.on { transition: none; } }
.case-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.case-stats > div { display: grid; gap: 6px; padding: 24px; border-radius: var(--tile); background: var(--white); align-content: start; }
.case-stats b { font: 700 clamp(26px, 3vw, 40px)/1.05 var(--display); letter-spacing: -0.04em; color: var(--action); overflow-wrap: anywhere; }
.case-stats span { color: var(--text-2); font-size: 16px; }
@media (max-width: 960px) { .case-grid { grid-template-columns: minmax(0, 1fr); } .case-stats { grid-template-columns: minmax(0, 1fr); } }
.case-tabs .sh { display: none; }
/* Case study flow chart (round 24): an org-chart style tree. Nodes are cards; connectors are 2px lines in the signature colour. */
.flow { --lc: var(--sig); margin: clamp(36px, 4vw, 60px) auto 0; display: grid; justify-items: center; max-width: 920px; }
.flow-h { text-align: center; margin-bottom: 28px; }
.flow-h h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -0.04em; }
.flow-h p { margin-top: 6px; color: var(--text-2); font-size: 16px; }
.fn { position: relative; width: min(100%, 520px); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; align-content: start; padding: 16px 18px; border-radius: 20px; background: var(--white); box-shadow: 0 0 0 1px rgba(14, 42, 51, .08), 0 8px 22px rgba(14, 42, 51, .06); }
.fn .fi { grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--soft); color: var(--action); }
.fn .fi svg { width: 20px; height: 20px; }
.fn b { font: 700 18px/1.2 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.fn > span:not(.fi):not(.chips) { font-size: 15px; line-height: 1.4; color: var(--text-2); }
.fn.alt { box-shadow: 0 0 0 2px var(--sig), 0 8px 22px rgba(14, 42, 51, .06); }
.fn-bot { background: var(--action); color: var(--off); box-shadow: 0 14px 32px rgba(43, 106, 86, .28); }
.fn-bot .fi { background: rgba(245, 245, 245, .16); color: var(--off); }
.fn-bot b { color: var(--off); }
.chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chips i { font-style: normal; padding: 5px 10px; border-radius: 999px; background: rgba(245, 245, 245, .16); font-size: 14px; line-height: 1.25; color: var(--off); }
.fb { position: relative; width: 100%; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 20px; justify-items: stretch; align-items: stretch; }
.fb > .fn { width: auto; }
.fb.t { padding-top: 40px; background: linear-gradient(var(--lc), var(--lc)) 50% 0 / 2px 20px no-repeat; }
.fb.b { padding-bottom: 40px; background: linear-gradient(var(--lc), var(--lc)) 50% 100% / 2px 20px no-repeat; }
.fb.t.b { background: linear-gradient(var(--lc), var(--lc)) 50% 0 / 2px 20px no-repeat, linear-gradient(var(--lc), var(--lc)) 50% 100% / 2px 20px no-repeat; }
.fb.t::before, .fb.b::after { content: ""; position: absolute; left: calc((100% - 20px * (var(--n) - 1)) / var(--n) / 2); right: calc((100% - 20px * (var(--n) - 1)) / var(--n) / 2); height: 2px; background: var(--lc); }
.fb.t::before { top: 20px; }
.fb.b::after { bottom: 20px; }
.fb.t > .fn::before, .fb.b > .fn::after { content: ""; position: absolute; left: 50%; width: 2px; margin-left: -1px; height: 20px; background: var(--lc); }
.fb.t > .fn::before { top: -20px; }
.fb.b > .fn::after { bottom: -20px; }
.fb.b + .fn { margin-top: 0; }
.flow > .fn:not(.fb + .fn) { margin-top: 0; }
.flow > .fb.t + .fn, .flow > .fn + .fb { margin-top: 0; }
/* Our work (round 24): colour-coded product cards, filter pills, detail pages */
.wk-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
html:not(.js) .wk-filter { display: none; }
.wk-filter button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--soft); color: var(--action); font: 600 15px/1 var(--body); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.wk-filter button[aria-pressed="true"] { background: var(--action); color: var(--off); }
.wk-filter button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.wk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.wk[hidden] { display: none; }
.wk { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--tile); background: var(--soft); overflow: hidden; box-shadow: inset 0 4px 0 var(--sig); }
.wk-pic { display: grid; place-items: center; height: 240px; padding: 24px 24px 0; overflow: hidden; }
.wk-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 16px 16px 0 0; box-shadow: 0 0 0 1px rgba(14, 42, 51, .08); }
.wk-pic .ui { width: min(100%, 260px); align-self: end; border-radius: 18px 18px 0 0; }
.wk-body { display: grid; gap: 12px; align-content: start; padding: 22px 24px 26px; background: var(--white); }
.wk-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wk-tags li { padding: 5px 12px; border-radius: 999px; background: var(--action); color: var(--off); font: 600 14px/1.2 var(--body); }
.wk h3 { font: 700 24px/1.15 var(--display); letter-spacing: -0.04em; }
.wk-p, .wk-r { font-size: 16px; line-height: 1.45; color: var(--text-2); }
.wk-p b, .wk-r b { display: block; font: 600 14px/1.3 var(--body); color: var(--action); }
.wk-go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--action); text-decoration: none; }
.wk-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.wk-go svg, .fa-head .more svg { width: 18px; height: 18px; flex: none; }
.case-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 3vw, 40px); border-radius: var(--tile); background: var(--white); }
.case-link h2 { font-size: clamp(26px, 3vw, 40px); margin: 6px 0; }
.case-link p:not(.over) { color: var(--text-2); max-width: 52ch; }
.map-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.map-steps { display: grid; gap: 22px; }
.map-steps h3 { font: 700 22px/1.2 var(--display); letter-spacing: -0.03em; color: var(--action); margin-bottom: 6px; }
.map-vid { margin: 0; display: grid; gap: 14px; justify-items: center; min-width: 0; }
.map-vid .phone { width: min(100%, 320px); }
.map-vid video { display: block; width: 100%; height: auto; border-radius: 26px; background: var(--ink); }
.map-vid figcaption, .wkshot figcaption { font-size: 14px; color: var(--slate); text-align: center; overflow-wrap: anywhere; }
.fa-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; max-width: 980px; }
.fa-cols p + p { margin-top: 12px; }
.fa-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.fa-points > div { padding: 24px; border-radius: var(--tile); background: var(--white); }
.fa-points h3 { font: 700 20px/1.2 var(--display); letter-spacing: -0.03em; color: var(--action); margin-bottom: 8px; }
.fa-site { padding-top: clamp(28px, 4vw, 48px); }
.fa-site + .fa-site { border-top: 1px solid var(--line); margin-top: clamp(28px, 4vw, 48px); }
.fa-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.fa-head h3 { font: 700 clamp(26px, 3vw, 36px)/1.1 var(--display); letter-spacing: -0.04em; }
.fa-head p { color: var(--text-2); max-width: 60ch; }
.fa-head .more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.fa-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .62fr); gap: 20px; align-items: start; }
.wkshot { margin: 0; display: grid; gap: 10px; min-width: 0; }
.bwin { border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px rgba(14, 42, 51, .14), 0 18px 40px rgba(14, 42, 51, .12); }
.bbar { display: flex; gap: 6px; padding: 9px 12px; background: var(--off); border-bottom: 1px solid var(--line); }
.bbar i { width: 9px; height: 9px; border-radius: 50%; background: var(--silver); }
.bwin img, .pwin img { display: block; width: 100%; height: auto; }
.pwin { border-radius: 24px; overflow: hidden; padding: 6px; background: var(--ink); box-shadow: 0 18px 40px rgba(14, 42, 51, .18); }
.pwin img { border-radius: 18px; }
.fa-get { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; max-width: 62ch; }
.fa-get li { position: relative; padding-left: 28px; }
.fa-get li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--sig); }
@media (max-width: 960px) { .map-grid { grid-template-columns: minmax(0, 1fr); } .fa-shots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fa-shots .wkphone { grid-column: 1 / -1; max-width: 260px; justify-self: center; } .fa-cols { grid-template-columns: minmax(0, 1fr); } }

/* Home hero (round 25, founders' request 23 Oct 2026): hovering, focusing or cycling to a family fills the whole hero with that family's action colour
   and recolours the whole "skandage." word. Suite colours the word by letter group (ska Berry, ndag Pine, e. Oxblood) on a Rose fill.
   Round 38: plain per-group colours on every screen size. The old background-clip: text gradient split at equal thirds (cutting the "k" and "g" in two)
   and Safari painted nothing while the letters' pop animation ran, so the word vanished on hover. */
.hp[data-cx] .hp-word, .hp[data-cx] .hp-word .g span, .hp[data-cx] .hp-word .dot, .hp[data-cx] .hp-word .g.lit span { color: var(--off); }
.hp[data-cx="suite"] .hp-word .g.b span { color: var(--berry); }
.hp[data-cx="suite"] .hp-word .g.s span { color: var(--pine); }
.hp[data-cx="suite"] .hp-word .g.x span, .hp[data-cx="suite"] .hp-word .dot { color: var(--oxblood); }
.hp[data-cx] .hp-tag, .hp[data-cx] .hp-mob a { background: transparent; color: var(--off); box-shadow: 0 0 0 1.5px rgba(245, 245, 245, .75); }
.hp[data-cx] .hp-tag:hover, .hp[data-cx] .hp-tag:focus-visible, .hp[data-cx] .hp-tag.on, .hp[data-cx] .hp-mob a.on { background: var(--off); color: var(--cx-bg); box-shadow: 0 0 0 1.5px var(--off); }
.hp[data-cx] .hp-tag .cap { color: var(--off); }
.hp[data-cx] .hp-tapnote, .hp[data-cx] .hp-copy p, .hp[data-cx] .hp-copy p b { color: var(--off); }
.hp[data-cx] .btn:not(.quiet), .hp[data-cx] .btn:not(.quiet):hover { background: var(--off); color: var(--cx-bg); }
.hp[data-cx] .btn.quiet, .hp[data-cx] .btn.quiet:hover { background: transparent; color: var(--off); box-shadow: inset 0 0 0 2px var(--off); }
.hp[data-cx] .btn.quiet:hover { background: rgba(245, 245, 245, .14); }
.hp-word .ubar b { transition: background-color .28s ease; }
.hp[data-cx] .hp-word .ubar b { background: rgba(245, 245, 245, .3); }
.hp[data-cx] .hp-word .g.lit .ubar b { background: var(--off); }
.hp[data-cx="suite"] .hp-word .g.b.lit .ubar b { background: var(--berry); }
.hp[data-cx="suite"] .hp-word .g.s.lit .ubar b { background: var(--pine); }
.hp[data-cx="suite"] .hp-word .g.x.lit .ubar b { background: var(--oxblood); }
/* Suite is a Rose fill, so its text, outlines and buttons use Oxblood instead of Off White. */
.hp[data-cx="suite"] .hp-tag, .hp[data-cx="suite"] .hp-mob a { color: var(--oxblood); box-shadow: 0 0 0 1.5px var(--oxblood); }
.hp[data-cx="suite"] .hp-tag:hover, .hp[data-cx="suite"] .hp-tag:focus-visible, .hp[data-cx="suite"] .hp-tag.on, .hp[data-cx="suite"] .hp-mob a.on { background: var(--oxblood); color: var(--off); box-shadow: 0 0 0 1.5px var(--oxblood); }
.hp[data-cx="suite"] .hp-tag .cap, .hp[data-cx="suite"] .hp-tapnote, .hp[data-cx="suite"] .hp-copy p, .hp[data-cx="suite"] .hp-copy p b { color: var(--oxblood); }
.hp[data-cx="suite"] .btn:not(.quiet), .hp[data-cx="suite"] .btn:not(.quiet):hover { background: var(--oxblood); color: var(--off); }
.hp[data-cx="suite"] .btn.quiet, .hp[data-cx="suite"] .btn.quiet:hover { color: var(--oxblood); box-shadow: inset 0 0 0 2px var(--oxblood); }
.hp[data-cx="suite"] .btn.quiet:hover { background: rgba(138, 12, 18, .08); }
.hp[data-cx="suite"] .hp-word .ubar b { background: rgba(138, 12, 18, .25); }
@media (prefers-reduced-motion: reduce) { .hp, .hp-word .ubar b { transition: none; } }


.bwin.big { border-radius: 28px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.dash-copy h3 { font: 700 22px/1.2 var(--display); letter-spacing: -0.03em; color: var(--action); margin-bottom: 10px; }
.dash-copy .fa-get { margin-bottom: 14px; }
.note-dash { font-size: 16px; color: var(--text-2); }
@media (max-width: 960px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
/* EBS mailer page (round 25) */
.ebs-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.ebs-cols .h2 { font-size: clamp(26px, 2.8vw, 36px); margin: 6px 0 12px; }
.ebs-cols p + p { margin-top: 10px; }
.ebs-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: ef; }
.ef-n { position: relative; display: grid; gap: 6px; justify-items: start; padding: 22px; border-radius: var(--tile); background: var(--white); }
.ef-n:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -22px; width: 16px; height: 16px; margin-top: -8px; border-top: 3px solid var(--sig); border-right: 3px solid var(--sig); transform: rotate(45deg); border-radius: 2px; }
.ef-i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--soft); color: var(--action); }
.ef-i svg { width: 22px; height: 22px; }
.ef-n b { font: 700 20px/1.2 var(--display); letter-spacing: -0.03em; }
.ef-n > span:not(.ef-i) { color: var(--text-2); }
.ebs-quote { margin: 0 auto; max-width: 820px; display: grid; gap: 18px; padding: clamp(24px, 3vw, 40px); border-radius: var(--tile); background: var(--soft); box-shadow: inset 4px 0 0 var(--sig); }
.ebs-quote blockquote { margin: 0; }
.ebs-quote blockquote p { font: 600 clamp(20px, 2.2vw, 26px)/1.4 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.ebs-quote figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.ebs-quote figcaption b { color: var(--action); }
.ebs-quote figcaption span { color: var(--text-2); }
.ebs-draft { font-size: 14px; }
@media (max-width: 960px) { .ebs-cols { grid-template-columns: minmax(0, 1fr); } .ebs-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ef-n:nth-child(2n)::after { display: none; } }

/* Home impact band (round 25): totals from _build/impact.json, the founders' own figures */
.imp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.imp-t { display: grid; gap: 6px; align-content: start; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--tile); background: var(--white); }
.imp-n { font: 700 clamp(40px, 5vw, 68px)/1 var(--display); letter-spacing: -0.05em; color: var(--action); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.imp-l { font-weight: 600; color: var(--ink); }
.imp-s { font-size: 15px; color: var(--text-2); }
.imp-note { margin-top: 18px; font-size: 15px; }
.imp-note a { color: var(--text-2); text-underline-offset: 3px; }
@media (max-width: 960px) { .imp-grid { grid-template-columns: minmax(0, 1fr); } }

/* Privacy and PDPA notice (round 25). The text is the founders' own; styles only. */
.pr-cap { font-size: 15px; }
.pr-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); }
.pr-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--soft); color: var(--action); font: 600 15px/1 var(--body); text-decoration: none; }
.pr-toc a:hover { background: var(--action); color: var(--off); }
.pr-prose { max-width: 780px; }
.pr-prose h2 { font: 700 clamp(24px, 2.6vw, 32px)/1.15 var(--display); letter-spacing: -0.04em; margin: clamp(32px, 4vw, 52px) 0 12px; scroll-margin-top: calc(var(--hdr) + 24px); }
.pr-prose h2:first-child { margin-top: 0; }
.pr-prose h3 { font: 700 19px/1.3 var(--display); letter-spacing: -0.02em; margin: 22px 0 6px; }
.pr-prose p, .pr-prose li { line-height: 1.6; }
.pr-prose p + p { margin-top: 12px; }
.pr-prose ul { margin: 8px 0 12px; padding-left: 22px; display: grid; gap: 6px; }
.pr-prose a { color: var(--action); text-underline-offset: 3px; }

/* Skip link (round 25): visible only when focused */
.skip { position: absolute; left: 12px; top: -80px; z-index: 200; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--off); font: 600 15px/1 var(--body); text-decoration: none; }
.skip:focus { top: 12px; }

/* Round 25 review fixes */
.wk-go::after { content: ""; position: absolute; inset: 0; }
.wk-go:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.imp-n.tbc { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; }
.mn-link { display: flex; align-items: center; min-height: 52px; padding: 6px 12px; border-radius: 14px; color: var(--ink); font: 600 17px/1.2 var(--body); text-decoration: none; }
.mn-link:hover, .mn-link:focus-visible { background: var(--off); }
.mn-link.mn-free { justify-content: space-between; gap: 10px; background: var(--mist); color: var(--harbour); } /* round 29: first row of the phone menu, master colours (navigation exception) */
.mn-free small { padding: 5px 10px; border-radius: 999px; background: var(--white); font: 600 13px/1 var(--body); color: var(--harbour); }
.mn-link[aria-current="page"], .mn-link.is-on { background: var(--soft); color: var(--action); box-shadow: inset 3px 0 0 var(--action); }
@media (min-width: 1241px) { .hdr .bar > .logo { flex: none; width: 260px; } }
@media (min-width: 1361px) { .hdr .bar > .logo { width: 300px; } }
.hp-mob a { min-height: 44px; font-size: 16px; }
/* Round 26: breathing room between buttons and links in the same row (see _build/check-gaps.js) */
.pref { gap: 12px 18px; }
.picker .chips { gap: 14px; }
.steps .nav, div.nav { display: flex; flex-wrap: wrap; gap: 12px 16px; }

/* Home stats band (round 26): after the 21st.dev "stats-band" layout idea (headline numbers that count up, a hairline that draws, labels that rise in), rebuilt in plain CSS. */
.stats .sx-head { margin-bottom: 18px; }
.sx-rule { display: block; height: 1px; background: var(--silver); transform-origin: left center; transition: transform .9s var(--ease); }
.js .sx-rule { transform: scaleX(0); }
.js .sx-rule.in { transform: scaleX(1); }
.sx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.sx { display: grid; gap: 6px; align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--tile); background: var(--white); box-shadow: 0 18px 40px rgba(var(--sh), .25); }
.sx-ap { font: 600 16px/1.2 var(--body); color: var(--slate); }
.sx { container-type: inline-size; }
.sx-n { font: 700 clamp(36px, 14cqw, 84px)/1 var(--display); letter-spacing: -0.05em; color: var(--c); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-l { font: 600 18px/1.3 var(--body); color: var(--ink); }
.sx-s { font-size: 16px; color: var(--text-2); }
.sx-note { margin-top: 22px; font-size: 17px; }
.sx-note a { color: var(--ink); text-underline-offset: 4px; }
.sx-anim .sx-ap, .sx-anim .sx-l, .sx-anim .sx-s { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.sx-anim .sx.on .sx-ap, .sx-anim .sx.on .sx-l, .sx-anim .sx.on .sx-s { opacity: 1; transform: none; }
.sx-anim .sx.on .sx-l { transition-delay: .15s; } .sx-anim .sx.on .sx-s { transition-delay: .3s; }
@media (max-width: 960px) { .sx-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sx-rule, .sx-anim .sx-ap, .sx-anim .sx-l, .sx-anim .sx-s { transition: none; } }
@media (prefers-reduced-motion: reduce) { .js .sx-rule { transform: none; } }

/* Background graphics (round 25, stronger in round 26): shapes from the brand's own marks, clearly visible but never behind body text in a way
   that costs contrast (they sit at the section edges). Signature colour at about 30% on light grounds, Off White at about 15% on Ink. Decorative only:
   no pointer events, behind the content, no gradients. A slow transform-only drift on desktop; none with reduced motion or on phones. */
.bgx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bgx svg { position: absolute; display: block; height: auto; }
.ch > .bgx ~ .wrap { position: relative; z-index: 1; }
.bgx-ink { color: var(--off); }
.bgx-ink .bg-a { left: -6%; bottom: -22%; width: min(44vw, 620px); opacity: .15; animation: bgdrift 26s ease-in-out infinite alternate; }
.bgx-ink .bg-b { right: 2%; top: 5%; width: 240px; opacity: .15; }
.bgx-ink .bg-c { right: -4%; bottom: 2%; width: min(40vw, 520px); opacity: .16; animation: bgdrift 32s ease-in-out infinite alternate-reverse; }
.bgx-ink .bg-d { display: none; }
.bgx-light { color: var(--dusk); }
.bgx-light .bg-a { right: -7%; top: -12%; width: min(38vw, 520px); opacity: .3; animation: bgdrift 28s ease-in-out infinite alternate; }
.bgx-light .bg-b { left: 1.5%; bottom: 3%; width: 220px; opacity: .3; }
.bgx-light .bg-c { left: -3%; top: 2%; width: min(36vw, 480px); opacity: .28; }
.bgx-light .bg-d { left: 38%; bottom: -150px; width: 300px; color: var(--mist); opacity: .9; animation: bgdrift 34s ease-in-out infinite alternate-reverse; }
.bgx-strip { color: var(--dusk); }
.bgx-strip .bg-a { right: -6%; bottom: -14%; width: min(30vw, 420px); opacity: .3; animation: bgdrift 30s ease-in-out infinite alternate; }
.bgx-strip .bg-b { left: 2%; bottom: 3%; width: 200px; opacity: .3; }
.bgx-strip .bg-c, .bgx-strip .bg-d { display: none; }
@keyframes bgdrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(16px, -14px, 0); } }
@media (prefers-reduced-motion: reduce) { .bgx svg { animation: none !important; } }
/* Round 26b: money saved leads the stats band (founders' request) */
.sx-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.sx-hours .sx-n, .sx-leads .sx-n { font-size: clamp(36px, 18cqw, 84px); }
.sx-lead { box-shadow: 0 22px 48px rgba(var(--sh), .32); }
@media (max-width: 960px) { .sx-grid { grid-template-columns: minmax(0, 1fr); } }

/* Round 26b: graphics vetted in a real browser: round caps are no longer clipped, the band and dome are removed from light sections */
.bgx svg { overflow: visible; }
.bgx-light .bg-c, .bgx-light .bg-d, .bgx-strip .bg-c, .bgx-strip .bg-d { display: none; }.bgx-strip .bg-b { left: auto; right: 3%; }
.bgx-sub { color: var(--sig); }
.bgx-sub .bg-a { right: -5%; top: -6%; width: min(28vw, 380px); opacity: .26; }
/* Work card thumbnail: the client map's final board, framed like a sheet on a soft ground */
.wk-pic.board { position: relative; height: 260px; padding: 30px 26px 0; place-items: start center; background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='1.6' fill='%232B6A56' fill-opacity='.2'/%3E%3C/svg%3E"); }
.wk-pic.board img { height: auto; width: 100%; object-fit: cover; object-position: top left; border-radius: 16px 16px 0 0; transform: rotate(-1.4deg) translateY(4px); transform-origin: 50% 100%; box-shadow: 0 0 0 1px rgba(14, 42, 51, .08), 0 22px 40px rgba(14, 42, 51, .22); transition: transform .35s var(--ease); }
.wk:hover .wk-pic.board img { transform: rotate(0deg) translateY(0); }
@media (prefers-reduced-motion: reduce) { .wk-pic.board img { transition: none; } }

/* Home hero shapes (round 27): drawn objects for the family that is on. They float in around the word, never over it. Flat 2px line-and-fill, no gradients. */
.hp-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hs { position: absolute; inset: 0; }
.hs-brands { --so: var(--off); --sf: var(--pink); --sd: var(--berry); }
.hs-solutions { --so: var(--off); --sf: var(--mint); --sd: var(--pine); }
.hs-suite { --sf: var(--white); }
.hs-suite .c-b { --so: var(--berry); --sd: var(--berry); }
.hs-suite .c-s { --so: var(--pine); --sd: var(--pine); }
.hs .sh { position: absolute; width: clamp(104px, 11vw, 170px); opacity: 0; transform: translate(-50%, -50%) translateY(20px) scale(.9); transition: opacity .4s ease, transform .5s var(--ease); transition-delay: 0s; }
.hs .sh svg { display: block; width: 100%; height: auto; overflow: visible; animation: hs-drift 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
.hs .sh svg { animation-play-state: paused; }   /* round 38: only the family on show drifts; twelve always-running drifts cost frames on phones */
.hp[data-cx="brands"] .hs-brands .sh svg, .hp[data-cx="solutions"] .hs-solutions .sh svg, .hp[data-cx="suite"] .hs-suite .sh svg { animation-play-state: running; }
.hs .p1 { left: 11%; top: 27%; } .hs .p2 { left: 89%; top: 25%; } .hs .p3 { left: 15%; top: 68%; } .hs .p4 { left: 85%; top: 66%; }
.hs-join { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease .3s; }
.hp[data-cx="brands"] .hs-brands .sh, .hp[data-cx="solutions"] .hs-solutions .sh, .hp[data-cx="suite"] .hs-suite .sh { opacity: 1; transform: translate(-50%, -50%); transition-delay: calc(var(--i) * 70ms); }
.hp[data-cx="suite"] .hs-join { opacity: .55; }
@keyframes hs-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .hs .sh, .hs-join { transition: none; } .hs .sh svg { animation: none; } }
@media (max-width: 1100px) { .hs .sh { width: clamp(84px, 9.5vw, 110px); } }
/* Round 27: "Can I automate?" makes typing your own task obvious: a label, a bigger field with a solid Dusk border and a clear focus ring. */
.ask .own { display: block; margin-top: 22px; font: 600 clamp(16px, 1.3vw, 18px)/1.3 var(--body); letter-spacing: 0; color: var(--off); }
.ask .field { margin-top: 10px; min-height: 68px; box-shadow: inset 0 0 0 2px var(--dusk); }
.ask .field:hover { box-shadow: inset 0 0 0 2px var(--mist); }
.ask .field:focus-within { box-shadow: inset 0 0 0 2px var(--dusk), 0 0 0 5px rgba(118, 149, 203, .5); }
.ask input::placeholder { color: #A9BCC4; opacity: 1; }
.ask .hint { margin-top: 26px; margin-bottom: -12px; font-weight: 600; color: var(--off); }
/* Round 27: "The Skandage way": three large static step cards (replaces the thin strip). */
.way { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.way { align-items: stretch; }
.way li { position: relative; display: grid; gap: 10px; align-content: start; padding: 36px 34px 40px; border-radius: 28px; background: var(--white); box-shadow: inset 0 0 0 1px var(--silver), 0 14px 34px rgba(14, 42, 51, .08); } /* round 29: each step in its own frame */
.way .wn { font: 700 clamp(64px, 7vw, 96px)/.9 var(--display); letter-spacing: -0.06em; color: var(--action); }
.way .wi { position: absolute; top: 32px; right: 32px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--action); }
.way .wi svg { width: 24px; height: 24px; }
.way b { font: 700 clamp(24px, 2.2vw, 30px)/1.15 var(--display); letter-spacing: -0.035em; color: var(--ink); margin-top: 6px; }
.way p { font-size: 17px; line-height: 1.5; color: var(--text-2); max-width: 34ch; }
.way-close { margin-top: 28px; font: 600 clamp(18px, 1.6vw, 22px)/1.35 var(--body); color: var(--ink); }
@media (max-width: 960px) { .way { grid-template-columns: minmax(0, 1fr); } .way li { padding: 28px 24px 30px; } .way .wn { font-size: 64px; } }
/* Round 27: "What does admin cost you?" calculator (Home, after "Can I automate?"). */
.calc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.calc-main .lead { margin: 10px 0 28px; }
.calc-form { display: grid; gap: 22px; max-width: 520px; }
.cf-row { display: grid; gap: 8px; }
.cf-row label { font: 600 17px/1.3 var(--body); color: var(--ink); }
.cf-pair { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; align-items: center; }
.calc input[type="text"] { min-height: 52px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--white); color: var(--ink); font: 600 20px/1 var(--display); box-shadow: inset 0 0 0 2px var(--action); outline: none; width: 100%; box-sizing: border-box; }
.calc input[type="text"]:focus-visible { box-shadow: inset 0 0 0 2px var(--action), 0 0 0 5px rgba(51, 85, 143, .3); }
.calc input[type="range"] { width: 100%; accent-color: var(--action); height: 44px; }
.cf-hint { font-size: 15px; color: var(--text-2); }
.cf-err { display: flex; gap: 8px; align-items: center; font-size: 15px; font-weight: 600; color: var(--ink); }
.cf-err svg { width: 20px; height: 20px; flex: none; color: var(--action); }
.calc-out { display: grid; align-content: center; gap: 8px; padding: clamp(28px, 3.4vw, 44px); border-radius: 28px; background: var(--ink); color: var(--off); }
.calc-out .co-k { font: 600 17px/1.3 var(--body); color: var(--on-dark-2); }
.calc-out .co-n { font: 700 clamp(36px, 4.6vw, 60px)/1.05 var(--display); letter-spacing: -0.045em; color: var(--off); }
.calc-out .co-h { font: 500 20px/1.3 var(--body); color: var(--on-dark-2); margin-bottom: 14px; }
.calc-out .more { color: var(--off); }
@media (max-width: 860px) { .calc-grid { grid-template-columns: minmax(0, 1fr); } }
.wafab { display: none; }

/* Round 27: work-page timeline (after the 21st.dev timeline: sticky label left, content right, a line that fills as you scroll).
   Plain HTML, CSS and JS. Solid line in the page family's signature colour over a Silver track. Only the fill (scaleY) and the dots change. */
.tl { --lab: clamp(180px, 26%, 300px); position: relative; }
.tl-line { position: absolute; top: 14px; bottom: 0; left: calc(var(--lab) + 12px); width: 3px; border-radius: 3px; background: var(--silver); }
.tl-fill { position: absolute; inset: 0; border-radius: 3px; background: var(--sig); transform-origin: 50% 0; transform: scaleY(var(--tl-p, 0)); }
.tl-step { display: grid; grid-template-columns: var(--lab) 28px minmax(0, 1fr); column-gap: 20px; padding: 0 0 clamp(48px, 7vw, 96px); }
.tl-step:last-child { padding-bottom: 0; }
.tl-lab { position: sticky; top: calc(var(--hdr) + 24px); align-self: start; text-align: right; padding-right: 8px; }
.tl-lab h2 { font: 700 clamp(26px, 2.8vw, 38px)/1.1 var(--display); letter-spacing: -0.04em; color: var(--action); }
.tl-dot { position: sticky; top: calc(var(--hdr) + 24px); align-self: start; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 3px var(--silver); z-index: 1; transition: background-color .25s ease, box-shadow .25s ease; }
.tl-step.on .tl-dot { background: var(--sig); box-shadow: inset 0 0 0 3px var(--sig); }
.tl-body { min-width: 0; display: grid; gap: 18px; align-content: start; }
.tl-body > p, .tl-body h3 { max-width: 62ch; }
.tl-body h3 { font: 700 clamp(22px, 2vw, 28px)/1.2 var(--display); letter-spacing: -0.03em; }
.tl-lead p { color: var(--text-2); max-width: 62ch; }
.tl-body .fa-site, .tl-body .case-grid, .tl-body .flow, .tl-body .case-stats, .tl-body .dash-grid, .tl-body .map-vid { margin-top: 4px; }
.tl-body .fa-cols { grid-template-columns: minmax(0, 1fr); }
.tl-body .fa-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html:not(.js) .tl-fill { transform: none; }
html:not(.js) .tl-dot { background: var(--sig); box-shadow: inset 0 0 0 3px var(--sig); }
@media (prefers-reduced-motion: reduce) { .tl-fill { transform: none !important; } .tl-dot { background: var(--sig); box-shadow: inset 0 0 0 3px var(--sig); transition: none; } }
@media (max-width: 1100px) { .tl-body .case-grid { grid-template-columns: minmax(0, 1fr); } .tl-body .dash-grid { grid-template-columns: minmax(0, 1fr); } .tl-body .fa-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Work cards (work.html): The problem and The result as a two-step mini timeline. */
.wk-p, .wk-r { position: relative; padding-left: 30px; }
.wk-p::before, .wk-r::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--sig); }
.wk-r::before { background: var(--action); }
.wk-p::after { content: ""; position: absolute; left: 7px; top: 22px; bottom: -14px; width: 2px; background: var(--silver); }
/* Round 27: free checklist sign-up block and the checklist page (with print styles). */
.ck-box2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(28px, 4vw, 52px); border-radius: 28px; background: var(--white); }
.ck-copy .lead { margin-top: 10px; color: var(--text-2); }
.ck-form { display: grid; gap: 16px; }
.ck-f { display: grid; gap: 8px; }
.ck-f label { font: 600 16px/1.3 var(--body); color: var(--ink); }
.ck-f input[type="text"], .ck-f input[type="email"] { min-height: 52px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--off); font: 500 17px/1 var(--body); color: var(--ink); box-shadow: inset 0 0 0 2px var(--action); outline: none; width: 100%; box-sizing: border-box; }
.ck-f input:focus-visible { box-shadow: inset 0 0 0 2px var(--action), 0 0 0 5px rgba(51, 85, 143, .3); }
.ck-tick { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-weight: 500; }
.ck-tick input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--action); }
.ck-err { display: flex; gap: 8px; align-items: center; font-size: 15px; font-weight: 600; color: var(--ink); }
.ck-err svg { width: 20px; height: 20px; flex: none; color: var(--action); }
.ck-done h3 { font: 700 clamp(26px, 2.6vw, 34px)/1.15 var(--display); letter-spacing: -0.035em; margin-bottom: 8px; }
.btn.alt, .ck-done .btn.alt { background: var(--white); color: var(--action); box-shadow: inset 0 0 0 2px var(--action); }
/* Round 29: the Instagram unlock replaces the email sign-up. Ink "Follow" button, a locked download that unlocks after the follow. */
.ck-lock { display: grid; gap: 14px; justify-items: start; }
.ck-lock[hidden] { display: none; }
.ck-lock p { color: var(--text-2); }
.btn.ig { background: var(--ink); color: var(--off); }
.btn.ig .gl { margin-right: 10px; }
.btn.locked { background: var(--white); color: var(--slate); box-shadow: inset 0 0 0 2px var(--silver); opacity: 1; }
.btn.locked::after { content: "Locked"; margin-left: 10px; padding: 4px 8px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 12px; }
.ck-box2.sent .ck-copy, .ck-box2.sent .ck-form { display: none; }
.ck-box2.sent { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .ck-box2 { grid-template-columns: minmax(0, 1fr); } }
.ck-page { padding: clamp(40px, 6vw, 80px) 0 80px; background: var(--white); }
.ck-wrap { max-width: 860px; }
.ck-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.ck-logo { height: 44px; width: auto; }
.ck-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ck-h { font: 700 clamp(34px, 5vw, 56px)/1.05 var(--display); letter-spacing: -0.045em; color: var(--ink); }
.ck-lead { margin-top: 16px; font-size: 18px; color: var(--text-2); max-width: 62ch; }
.ck-g { margin: 40px 0 8px; font: 700 26px/1.2 var(--display); letter-spacing: -0.03em; color: var(--action); }
.ck-task { display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; gap: 18px; padding: 22px 0; border-top: 1px solid var(--silver); break-inside: avoid; }
.ck-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--soft, var(--mist)); color: var(--action); font: 700 20px/1 var(--display); }
.ck-task h3 { font: 700 22px/1.2 var(--display); letter-spacing: -0.03em; margin-bottom: 8px; }
.ck-task dl { display: grid; gap: 2px; margin: 0; }
.ck-task dt { margin-top: 8px; font: 600 13px/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--action); }
.ck-task dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.ck-box { width: 26px; height: 26px; margin-top: 4px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--ink); }
.ck-end { margin-top: 36px; padding: 28px; border-radius: 24px; background: var(--mist); display: grid; gap: 10px; justify-items: start; break-inside: avoid; }
.ck-end b { font: 700 24px/1.2 var(--display); letter-spacing: -0.03em; }
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  body { background: #fff !important; color: #0E2A33; }
  header, .hdr, nav, footer, .foot, .totop, .wafab, .skip, .crumbs, .prog, .ck-actions, .ck-end .btn, .progress, #mnav { display: none !important; }
  .ck-page { padding: 0; background: #fff; }
  .ck-wrap { max-width: none; padding: 0; }
  .ck-h { font-size: 24pt; } .ck-lead { font-size: 10pt; margin-top: 8pt; } .ck-g { font-size: 14pt; margin-top: 12pt; } .ck-top { margin-bottom: 12pt; }
  .ck-task { padding: 6pt 0; gap: 12pt; } .ck-task h3 { font-size: 12pt; margin-bottom: 3pt; } .ck-task dd { font-size: 9pt; line-height: 1.4; } .ck-task dt { font-size: 7pt; margin-top: 4pt; } .ck-n { width: 30pt; height: 30pt; font-size: 13pt; } .ck-task { grid-template-columns: 30pt minmax(0, 1fr) 20pt; }
  .ck-break { break-before: page; }
  .ck-end { margin-top: 14pt; padding: 12pt; } .ck-end b { font-size: 13pt; } .ck-end p { font-size: 9pt; }
  .ck-end { border: 1px solid #D2D5DA; background: #fff; }
}
.cf-err[hidden], .ck-err[hidden], .ck-done[hidden], .ck-form[hidden] { display: none; }

/* Round 28 A: the hero fills the screen. The fixed header sits over its top, so 100svh is exactly what shows under the header. The word, chips and copy keep their sizes and sit as one group a little above the middle; extra height becomes breathing room. */
.hp { box-sizing: border-box; }
.hp-cue { position: absolute; left: 50%; bottom: clamp(16px, 3vh, 28px); z-index: 4; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; color: var(--ink); border-radius: 999px; }
.hp-cue svg { width: 26px; height: 26px; animation: hp-cue 1.8s ease-in-out infinite; }
.hp[data-cx] .hp-cue { color: var(--off); }
.hp[data-cx="suite"] .hp-cue { color: var(--oxblood); }
@keyframes hp-cue { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .hp-cue svg { animation: none; } }
/* Round 28 A2: dotted joining lines. JS draws them from the measured boxes so they never come within 24px of the word, bars, chips, copy, buttons or hint. */
.hs-join path.dl { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 12; animation: hs-flow 1.4s linear infinite; }
.hs-join circle { stroke: none; }
@keyframes hs-flow { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) { .hs-join path.dl { animation: none; } }
.hp[data-cx="suite"] .hs-join { opacity: 1; }

/* Round 28 D: the free business check (free-checklist.html). Three groups, each in its own family's colours (colour-coded cards exception, like Our work). The page itself is master. */
.chk-head { max-width: 760px; margin-bottom: 40px; }
.chk-head .h2 { margin: 8px 0 16px; }
.chk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
.chk-main { display: grid; gap: 24px; }
.chk-g { position: relative; padding: 32px; border-radius: var(--tile); background: var(--white); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.chk-g::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--sig); }
.chk-gh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 20px; }
.chk-gh h2 { font: 700 28px/1.15 var(--display); letter-spacing: -0.04em; color: var(--action); }
.chk-gh p { font-size: 16px; color: var(--text-2); }
.chk-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.chk-it { display: grid; gap: 8px; }
.chk-card { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; align-items: start; width: 100%; min-height: 64px; padding: 16px 20px; border: 0; border-radius: 20px; background: var(--off); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-align: left; font: 400 16px/1.5 var(--body); cursor: pointer; transition: background-color .2s ease, box-shadow .2s ease, transform .16s ease-out; }
.chk-card:hover { box-shadow: inset 0 0 0 1px var(--action); }
.chk-card:active { transform: scale(.985); }
.chk-card:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; }
.chk-card[aria-pressed="true"] { background: var(--soft); box-shadow: inset 0 0 0 2px var(--action); }
.chk-tk { width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--white); box-shadow: inset 0 0 0 2px var(--action); color: transparent; transition: background-color .2s ease, color .2s ease, transform .3s var(--ease); }
.chk-tk svg { width: 16px; height: 16px; }
.chk-card[aria-pressed="true"] .chk-tk { background: var(--action); color: var(--off); transform: scale(1.06); }
.chk-tx { display: grid; gap: 4px; }
.chk-tx b { font: 600 18px/1.35 var(--body); }
.chk-ch { color: var(--text-2); }
.chk-pr { font: 600 13px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--action); }
.chk-fq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 0 4px 52px; }
.chk-fq[hidden] { display: none; }
.chk-fq > span { font: 600 14px/1 var(--body); color: var(--text-2); margin-right: 4px; }
.chk-fq button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--action); color: var(--action); font: 600 14px/1 var(--body); cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .16s ease-out; }
.chk-fq button:active { transform: scale(.96); }
.chk-fq button:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.chk-fq button[aria-pressed="true"] { background: var(--action); color: var(--off); }
.chk-res { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 16px; padding: 28px; border-radius: var(--tile); background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(14, 42, 51, .08); max-height: calc(100svh - var(--hdr) - 48px); overflow: auto; }
.chk-prog { display: flex; align-items: center; gap: 14px; }
.chk-prog svg { width: 52px; height: 52px; transform: rotate(-90deg); flex: none; }
.chk-prog circle { fill: none; stroke-width: 4; }
.chk-prog .tr { stroke: var(--line); }
.chk-prog .fl { stroke: var(--action); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .5s var(--ease); }
.chk-prog p { font: 500 16px/1.3 var(--body); color: var(--text-2); }
.chk-prog b { font: 700 24px/1 var(--display); color: var(--ink); }
.chk-empty { font-size: 16px; color: var(--text-2); }
.chk-out { display: grid; gap: 12px; }
.chk-out[hidden], .chk-empty[hidden], .chk-reset[hidden], .chk-hn[hidden], .chk-suite[hidden] { display: none; }
.chk-hrs { font: 700 clamp(26px, 2.4vw, 32px)/1.15 var(--display); letter-spacing: -0.04em; color: var(--ink); }
.chk-hrs b { color: var(--action); font-weight: 700; }
.chk-hn { font-size: 15px; color: var(--text-2); }
.chk-out h3 { margin-top: 8px; font: 600 13px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.chk-top { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.chk-top li { font-size: 16px; line-height: 1.45; }
.chk-top small { display: block; color: var(--text-2); font-size: 14px; }
.chk-fit { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chk-fit a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--soft); color: var(--action); font: 600 15px/1 var(--body); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.chk-fit a:hover, .chk-fit a:focus-visible { background: var(--action); color: var(--off); }
.chk-suite { font: 700 20px/1.25 var(--display); letter-spacing: -0.03em; color: var(--oxblood); }
/* Round 32: projected time and money, and "What we'd fix for you" (problem, then the process we'd automate, with its product). */
.chk-out .chk-first { margin-top: 0; }
.chk-yr { margin: -6px 0 0; font: 600 16px/1.4 var(--body); color: var(--text-2); }
.chk-yr[hidden] { display: none; }
.chk-fix { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.chk-fix li { display: grid; gap: 3px; padding: 12px 14px; border-radius: 16px; background: var(--soft); box-shadow: inset 4px 0 0 var(--sig); }
.chk-fix .fx-p { font: 600 15px/1.35 var(--body); color: var(--ink); }
.chk-fix .fx-a { font-size: 15px; line-height: 1.4; color: var(--ink); }
.chk-fix em { font: 600 12px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--action); }
.chk-money { margin: 0; font: 700 clamp(22px, 2vw, 26px)/1.2 var(--display); letter-spacing: -0.035em; color: var(--action); }
.chk-money b { font-weight: 700; }
.chk-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; line-height: 1.35; color: var(--text-2); }
.chk-cur { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--silver); font-weight: 600; color: var(--ink); }
.chk-cur:focus-within { box-shadow: inset 0 0 0 2px var(--action); }
.chk-cur input { width: 64px; border: 0; background: transparent; font: 600 16px/1 var(--body); color: var(--ink); outline: 0; -moz-appearance: textfield; appearance: textfield; }
.chk-cur input::-webkit-outer-spin-button, .chk-cur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.chk-out .btn { white-space: normal; text-align: center; min-height: 48px; padding-block: 12px; line-height: 1.25; justify-self: stretch; }
.chk-reset { justify-self: start; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--action); font: 600 15px/1 var(--body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.chk-res .ck-pf { padding-top: 16px; border-top: 1px solid var(--silver); }
.ck-fh { font: 700 20px/1.2 var(--display); letter-spacing: -0.03em; margin-bottom: 4px; }
.ck-pf .ck-form { display: grid; gap: 14px; }
.ck-pf.sent .ck-form { display: none; }
.chk-bar, .chk-grab { display: none; }
.chk-nojs { margin-top: 32px; display: none; }
html:not(.js) .chk-res, html:not(.js) .chk-bar { display: none; }
html:not(.js) .chk-nojs { display: block; }
html:not(.js) .chk-grid { grid-template-columns: minmax(0, 1fr); }
.ck-promo { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); padding: 28px clamp(20px, 3vw, 40px); border-radius: var(--tile); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.ck-promo img { flex: none; height: auto; border-radius: 6px; box-shadow: 0 14px 30px rgba(14, 42, 51, .18), 0 0 0 1px var(--line); }
.ck-promo > div { flex: 1 1 auto; min-width: 0; }
.ck-promo p { color: var(--text-2); margin-top: 6px; }
.ck-promo .lead { margin-top: 10px; }
.ck-promo.card img { width: 72px; }
/* Round 29: on Home the promo is a confident band right after "Can I automate?". */
.ck-promo.band { background: var(--action); color: var(--off); box-shadow: none; padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 64px); }
.ck-promo.band .over, .ck-promo.band h2, .ck-promo.band .lead { color: var(--off); }
.ck-promo.band .lead { color: rgba(245, 245, 245, .92); }
.ck-promo.band img { box-shadow: 0 18px 36px rgba(0, 0, 0, .28); }
.ck-go { flex: none; display: grid; gap: 10px; justify-items: start; }
.ck-promo .ck-ig { margin: 0; font-size: 14px; color: rgba(245, 245, 245, .92); }
@media (max-width: 1000px) { .chk-grid { grid-template-columns: minmax(0, 1fr); } .chk-res { position: static; max-height: none; } }
/* printable page: one tick box per line, three brand sections, kept to two or three pages */
.ck-task { grid-template-columns: 26px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
.ck-task h3 { font-size: 19px; margin-bottom: 4px; }
.ck-task p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink); }
.ck-task .ck-box { grid-column: 1; grid-row: 1; box-shadow: inset 0 0 0 2px var(--action); }
.ck-task > div { grid-column: 2; }
.ck-task .ck-prod { margin-top: 4px; font: 600 12px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--action); }
.ck-g span { font: 500 15px/1 var(--body); letter-spacing: 0; color: var(--text-2); }
/* Round 32: the printable page and the PDF show the process under each item, and end with a box to work out your own projection by hand. */
.ck-task .ck-proc { margin-top: 6px; }
.ck-task .ck-proc b { color: var(--action); }
.ck-proj { margin-top: 40px; padding: 24px 28px; border-radius: var(--tile); box-shadow: inset 0 0 0 1.5px var(--silver); break-inside: avoid; }
.ck-proj h2 { margin: 0 0 6px; font: 700 26px/1.2 var(--display); letter-spacing: -0.03em; color: var(--action); }
.ck-proj p { margin: 0; font-size: 16px; color: var(--text-2); }
.ck-proj ol { margin: 18px 0 0; padding-left: 22px; display: grid; gap: 16px; font-size: 16px; line-height: 1.4; }
.ck-blank { display: inline-block; min-width: 140px; height: 1em; margin-left: 8px; border-bottom: 1.5px solid var(--ink); vertical-align: baseline; }
.ck-contact { font-size: 14px; }
@media print {
  .ck-page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ck-break { break-before: auto; }
  .ck-g { margin: 12pt 0 2pt; font-size: 13pt; break-after: avoid; }
  .ck-g span { font-size: 9pt; }
  .ck-task { padding: 4.5pt 0; gap: 10pt; break-inside: avoid; grid-template-columns: 14pt minmax(0, 1fr); }
  .ck-task h3 { font-size: 10pt; margin-bottom: 1pt; }
  .ck-task p { font-size: 8.5pt; line-height: 1.35; }
  .ck-task .ck-prod { font-size: 7pt; margin-top: 1.5pt; }
  .ck-task .ck-box { width: 12pt; height: 12pt; margin-top: 1pt; border-radius: 3pt; }
  .ck-task .ck-q { margin: 2pt 0 1pt; font-size: 8pt; }
  .ck-opts { margin: 0 0 2pt; gap: 1pt 11pt; font-size: 8pt; }
  .ck-sq { width: 7pt; height: 7pt; border-radius: 1.5pt; }
  .ck-line { width: 80pt; }
  .ck-task .ck-proc { margin-top: 1pt; }
  .ck-proj { margin-top: 10pt; padding: 7pt 12pt; }
  .ck-proj h2 { margin-bottom: 2pt; font-size: 12pt; }
  .ck-proj p { font-size: 8.5pt; }
  .ck-proj ol { margin-top: 6pt; gap: 7pt; font-size: 9pt; }
  .ck-end { break-inside: avoid; }
  .ck-end p { font-size: 9pt; margin: 0; }
}
.chk { padding-top: clamp(72px, 8vw, 112px); }

/* Round 28 follow-up: the mark is never clipped (round caps and the second chevron's tip sit on the viewBox edge) */
svg[viewBox="-2 10 74 44"], svg[viewBox="-2 10 74 44"] symbol, #mk { overflow: visible; }
.hdr svg, .mega .feat svg, .mnav svg { overflow: visible; }

/* Round 28 follow-up: the negative tracking pulls the last box edge inside the full stop, and background-clip: text paints only inside the box, so the Suite thirds cut the dot. Padding gives the glyph room. */
@media (min-width: 768px) { .hp-word { padding: 0 .12em .25em; } }

/* Round 28 follow-up: "Things we've built" toggle bar (.wkc). One colour family: the page's own action colour. */
.wkc { display: grid; gap: 20px; padding: clamp(24px, 3vw, 40px); border-radius: var(--tile); background: var(--white); min-width: 0; }
.wkc-track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.wkc-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .wkc-track { scroll-behavior: smooth; } }
.wkc-s { scroll-snap-align: start; scroll-snap-stop: always; display: grid; align-content: start; justify-items: start; gap: 12px; min-width: 0; padding: 4px 2px; }
.wkc-s .h2 { font-size: clamp(26px, 3vw, 40px); margin: 0; }
.wkc-s p { color: var(--text-2); max-width: 52ch; margin: 0 0 8px; }
.wkc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.wkc-ctl { display: flex; align-items: center; gap: 4px; }
.wkc-b { width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--action); background: var(--white); color: var(--action); display: inline-grid; place-items: center; cursor: pointer; padding: 0; transition: background-color .2s ease, color .2s ease, opacity .2s ease; }
.wkc-b svg { width: 20px; height: 20px; }
.wkc-b:hover:not(:disabled) { background: var(--action); color: var(--off); }
.wkc-b:disabled { opacity: .35; cursor: default; }
.wkc-dots { display: flex; }
.wkc-d { width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; display: inline-grid; place-items: center; }
.wkc-d i { width: 10px; height: 10px; border-radius: 999px; background: var(--soft); box-shadow: inset 0 0 0 1.5px var(--action); transition: width .25s ease, background-color .25s ease; }
.wkc-d[aria-current="true"] i { width: 26px; background: var(--action); }
.wkc :focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .wkc-b, .wkc-d i { transition: none; } }

.f-white .wkc, .f-off .wkc { background: var(--soft); }

/* Round 30: smaller chips (above), returning-visitor link, magnetic controls, split headings, drawn link underlines, CTA arrows. */
.cform select { width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 16px; background: var(--white); color: var(--ink); font: 400 17px/1.4 var(--body); }
.cform select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--action), 0 0 0 5px var(--soft); }
.btn, .hp-tag { translate: var(--mx, 0) var(--my, 0); transition: translate .4s cubic-bezier(.23, 1, .32, 1), box-shadow .2s ease, background-color .2s ease, color .2s ease, transform .16s ease-out; }
.btn.mag, .hp-tag.mag { transition: translate .08s linear, box-shadow .2s ease, background-color .2s ease, color .2s ease, transform .16s ease-out; }
.btn::after { content: "→"; display: inline-block; transition: transform .2s ease; }
.btn:hover::after, .btn:focus-visible::after { transform: translateX(4px); }
.btn.no-ar::after, .btn[disabled]::after, .btn.locked::after, .cform .btn::after { content: none; }
.split .sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.split .sw > span { display: inline-block; transform: translateY(105%); transition: transform .6s cubic-bezier(.23, 1, .32, 1); transition-delay: calc(var(--i) * 35ms); }
.split.in .sw > span { transform: none; }
main p a:not(.btn), main li a:not(.btn) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; text-decoration: none; transition: background-size .3s ease; } /* taste-skill-ignore: underline draw-in, not a visual gradient */
main p a:not(.btn):hover, main li a:not(.btn):hover, main p a:not(.btn):focus-visible, main li a:not(.btn):focus-visible { background-size: 100% 1.5px; }
@media (prefers-reduced-motion: reduce) {
  .split .sw > span { transform: none; transition: none; }
  .btn, .hp-tag { translate: none; }
}

/* Round 30 (round 28 part B, partial): tokens, calmer stats band on Ink, big closing line, CTA value line, nav hover. */
:root { --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --shadow-soft: 0 8px 24px rgba(14, 42, 51, .08); --shadow-lift: 0 18px 40px rgba(14, 42, 51, .16); }
.eyebrow, .kicker { font: 600 13px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3 { letter-spacing: -0.04em; }
main p, main li { max-width: 68ch; }
.stats.f-ink { color: var(--off); }
.stats.f-ink h2, .stats.f-ink .sx-note, .stats.f-ink .sx-note a { color: var(--off); }
.stats.f-ink .sx-rule { background: rgba(245, 245, 245, .22); }
.stats.f-ink .sx { box-shadow: none; }
.fs-big { margin: 0 0 var(--s-7); font: 700 clamp(48px, 8vw, 92px)/1 var(--display); letter-spacing: -0.04em; color: var(--off); }
.fs-big span { color: var(--dusk); }
.cta-value { grid-column: 1 / -1; margin: 0; font-size: 15px; color: var(--on-dark-2); }
.foot .cta .row { gap: 16px 24px; }
.hdr nav a, .hdr .bar a { transition: color .18s ease, background-color .18s ease; }
.hdr a:focus-visible, .hdr button:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: 999px; }

/* ---------- Round 34 ---------- */

/* The returning-visitor link follows the hero's text colour through the same transition as the hero. */
.hp { --hero-ink: var(--action); }
.hp[data-cx] { --hero-ink: var(--off); }
.hp[data-cx="suite"] { --hero-ink: var(--oxblood); }
/* Desktop nav: a thin Silver divider between top-level items, and the free audit as the one filled item. */
.menu > a, .menu .dd-t { position: relative; }
.menu > a:not(:first-child)::before, .menu > .dd:not(:first-child) > .dd-t::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 20px; margin-top: -10px; background: var(--silver); pointer-events: none; }
.menu > a.hdr-free { margin-left: 8px; padding: 0 16px; border-radius: 999px; background: var(--harbour); color: var(--off); }
.menu > a.hdr-free::before { left: -9px; }
.menu > a.hdr-free:hover, .menu > a.hdr-free:focus-visible { background: var(--ink); color: var(--off); }
.menu > a.hdr-free.is-on { box-shadow: 0 0 0 3px var(--soft); }
.menu > a.hdr-free::after { display: none; }
.faq-link { padding-block: clamp(28px, 4vw, 48px); }
.faq-link p { margin: 0; text-align: center; font-size: 18px; }
.faq-link .more { margin-left: 6px; color: var(--action); }
.tools-head { padding-bottom: 0; }
.wl-band { padding-block: clamp(40px, 6vw, 72px); }
.wl-band-in { display: grid; justify-items: center; gap: 14px; text-align: center; }
.wl-band-in .h2, .wl-band-in .lead { color: var(--off); margin: 0; }
.wl-band-sub { margin: 0; font-size: 16px; color: var(--off); }
.wl-perks { margin: 12px 0 0; font-size: 17px; color: var(--ink); }
.wl-perks-done { margin: 0 0 8px; font-weight: 600; }
@media (max-height: 520px) and (max-width: 1100px) { .hs .sh { display: none; } }
/* Round 34: graphics fade in once fonts and images are ready (instant with reduced motion). */
.js:not(.gfx-ready) .hp-art, .js:not(.gfx-ready) .tline, .js:not(.gfx-ready) .iso-stage { opacity: 0; }
.js .hp-art, .js .tline, .js .iso-stage { transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .js .hp-art, .js .tline, .js .iso-stage { transition: none; } }

/* "Pairs well with": a hovered card lifts; its colours never change, and there is no floating label. */
.pairs .next a:hover, .pairs .next a:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14, 42, 51, .12); }
.nx-go { justify-self: end; font-weight: 700; color: var(--c); }
.prodnav { padding-block: clamp(40px, 5vw, 64px); }
.prodnav .faq-row { margin: 0 0 20px; text-align: center; font-size: 18px; }
.prodnav .next a > span { grid-template-columns: minmax(0, 1fr); }

/* Round 35: the free audit page: three numbered tools, the checklist folded until asked for (height animates; open without JS). */
.chk-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 18px; font-weight: 600; }
.chk-jump a { display: inline-flex; align-items: center; min-height: 44px; color: var(--action); text-underline-offset: 4px; }
.chk-jump span { color: var(--slate); }
.chk-hero { padding-bottom: clamp(24px, 4vw, 48px); }
.chk-app { scroll-margin-top: calc(var(--hdr) + 16px); padding-top: clamp(40px, 6vw, 80px); }
.ask-head { margin-bottom: 24px; }
.ask-head .over, .ask-head .lead { color: var(--off); }
.chk-intro { display: grid; justify-items: start; gap: 14px; max-width: 760px; }
.chk-intro .h2 { margin: 0; }
.chk-intro .lead { margin: 0; }
.chk-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease), margin-top .45s var(--ease); margin-top: 0; }
.chk-fold-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .45s; }
.chk-fold.open { grid-template-rows: 1fr; margin-top: 32px; }
.chk-fold.open .chk-fold-in { visibility: visible; transition-delay: 0s; }
.chk-fold.settled .chk-fold-in { overflow: visible; }
.chk-fold.open ~ .chk-bar, .chk-bar { }
html:not(.js) .chk-fold { grid-template-rows: 1fr; margin-top: 32px; }
html:not(.js) .chk-fold-in { visibility: visible; }
html:not(.js) [data-ck-open] { display: none; }
.chk-fold.open ~ * [data-ck-open], [data-ck-open][hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .chk-fold, .chk-fold-in { transition: none; } }
/* Round 35: the longer free audit pill needs room; tighten the bar between 1241 and 1599 (the pill's wording is unchanged). */
@media (min-width: 1241px) and (max-width: 1599px) {
  .hdr .bar { gap: 10px; }
  .hdr .bar > .logo { width: 190px; }
  .menu > a, .dd-t { padding: 0 7px; font-size: 15px; }
  .menu > a.hdr-free { margin-left: 6px; padding: 0 12px; }
  .menu > a.hdr-free::before { left: -7px; }
  .askpill { padding: 0 10px 0 9px; font-size: 14px; }
  .acts { gap: 6px; }
  .acts .btn { padding: 0 14px; font-size: 15px; }
}
@media (min-width: 1241px) and (max-width: 1599px) { .hdr .bar > .logo { width: 235px; } .hdr .bar > .logo img { width: 100%; height: auto; max-width: 100%; } }
.prodnav .faq-row { max-width: none; width: 100%; justify-self: stretch; }

/* Round 36: the home audit band. The button group was flex: none beside a text column that could not shrink below its content, so on desktop the row grew wider than the band
   and the button ran off its edge. The text column now shrinks first (flex-basis 0, min-width 0), the button keeps at least 32px to the edge, and the band wraps below 1100px. */
.ck-promo { box-sizing: border-box; max-width: 100%; }
.ck-promo > .ck-pt, .ck-promo > div:not(.ck-go) { flex: 1 1 0; min-width: 0; }
.ck-promo .ck-go { flex: 0 0 auto; max-width: 100%; }
.ck-promo.band { padding-right: clamp(32px, 4vw, 64px); }
.ck-promo .btn { max-width: 100%; }
@media (max-width: 1100px) { .ck-promo.band { flex-wrap: wrap; } .ck-promo.band > .ck-pt { flex: 1 1 calc(100% - 200px); } .ck-promo.band .ck-go { flex: 1 1 100%; justify-items: start; } }

/* Round 37: the band's drawn graphic sits left on desktop; the text column shrinks before it does. */
.ck-promo.band .ck-art { flex: none; width: clamp(200px, 22vw, 300px); height: auto; }
@media (max-width: 1100px) { .ck-promo.band .ck-art { width: 100%; max-width: 420px; } }