/* SOOK site. Copied from the Repay site (repay/site/_repay/css/repay.css, delivered 29 Sep 2026): the same layout,
   spacing, header pill, bands, pinned stages, calculator, carousel, compare table, FAQ and footer, re-skinned light
   for SOOK (brand/DESIGN.md).
   Ground: white #ffffff and paper #f8f4f7 bands; ink #0b0b0c; muted #5f5c64. Pink #d87fd1 only on CTAs and key numbers
   (as text: #b85aaf at display sizes, #a54d9d below). The brand gradient #e3c3d8 -> #f070e0 only in the hero and the
   closing band (with a static grain so the 8-bit ramp never shows stripes).
   Type: Familjen Grotesk 700 (tight) for headlines, Geist for everything else. Art: our own line-art (three.js). */

@font-face { font-family: "Familjen Grotesk"; src: url(/_sook/fonts/familjen-grotesk-700-latin.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/_sook/fonts/geist-wght.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Familjen Fallback"; src: local("Arial Bold"), local("Helvetica Neue Bold"), local("Arial"); font-weight: 700; size-adjust: 96%; ascent-override: 96%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 103%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  --sk-ground: #ffffff;
  --sk-paper: #f8f4f7;
  --sk-raised: #f8f4f7;       /* cards on white */
  --sk-raised-2: #f1eaf0;
  --sk-ink: #0b0b0c;
  --sk-ink-2: #3b3a3f;
  --sk-ink-3: #5f5c64;        /* muted: 6.6:1 on white, 6.0:1 on paper */
  --sk-pink: #d87fd1;         /* the logo pink: CTAs, the S, small marks */
  --sk-pink-num: #b85aaf;     /* pink as a display number (>= 24 px): 4.1:1 on white */
  --sk-pink-text: #a54d9d;    /* pink as small text: 5.1:1 on white */
  --sk-lilac: #e3c3d8;
  --sk-hot: #f070e0;
  --sk-line: rgba(11, 11, 12, 0.12);
  --sk-quiet: rgba(11, 11, 12, 0.06);
  --sk-quiet-hover: rgba(11, 11, 12, 0.1);

  --sk-display: "Familjen Grotesk", "Familjen Fallback", "Helvetica Neue", Arial, sans-serif;
  --sk-font: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sk-hh: 60px;   /* header pill height */
  --sk-ht: 16px;   /* pill's distance from the top edge */
  --sk-gutter: 20px;
  --sk-max: 72rem;                              /* content max (Repay) */
  --sk-sec: clamp(96px, 7vw + 70px, 192px);    /* section padding (Repay) */
  --sk-gap-head: clamp(48px, 4vw + 30px, 96px);
  --sk-r-xl: 20px;
  --sk-r-lg: 18px;
  --sk-r-md: 12px;
  --sk-shadow-card: 0 1px 2px rgba(11, 11, 12, 0.04), 0 14px 34px -16px rgba(60, 20, 55, 0.18);
  --sk-shadow-2: 0 1px 2px rgba(11, 11, 12, 0.05), 0 18px 40px -18px rgba(60, 20, 55, 0.26);
  --sk-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sk-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sk-ease-std: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) { :root { --sk-gutter: 40px; } }
@media (min-width: 1024px) { :root { --sk-hh: 64px; --sk-ht: 20px; --sk-gutter: 48px; } }

html.sk { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--sk-ground); }
html.sk body {
  margin: 0; background: var(--sk-ground); color: var(--sk-ink);
  font-family: var(--sk-font); font-size: 16px; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.sk ::selection { background: var(--sk-pink); color: var(--sk-ink); }
.sk section[id] { scroll-margin-top: max(0px, calc(env(safe-area-inset-top, 0px) + var(--sk-ht) + var(--sk-hh) + 24px - var(--sk-sec))); }
.sk #faq { scroll-margin-top: max(0px, calc(env(safe-area-inset-top, 0px) + var(--sk-ht) + var(--sk-hh) + 24px - var(--sk-sec) * 0.6)); }
.sk #how-it-works, .sk #build, .sk #theses { scroll-margin-top: 0px; }

.sk-wrap { width: 100%; max-width: calc(var(--sk-max) + 2 * var(--sk-gutter)); margin-inline: auto; padding-inline: var(--sk-gutter); box-sizing: border-box; }
.sk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sk-icon { width: 20px; height: 20px; flex: none; display: block; }
.sk :focus-visible { outline: 2px solid var(--sk-ink); outline-offset: 3px; }

/* ---------- type ---------- */
/* labels: sentence case, plain (no uppercase letter-spaced eyebrows), one icon from the set */
.sk-label { margin: 0; font: 500 14px/1.2 var(--sk-font); color: var(--sk-ink-3); }
.sk-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--sk-ink-2); }
.sk-eyebrow .sk-icon { width: 18px; height: 18px; color: var(--sk-pink-text); }
.sk-h2 { margin: 18px 0 0; font: 700 clamp(36px, 2.4vw + 22px, 60px)/1.02 var(--sk-display); letter-spacing: -0.035em; color: var(--sk-ink); text-wrap: balance; }
.sk-h3 { margin: 0; font: 600 clamp(19px, 0.4vw + 16px, 22px)/1.25 var(--sk-font); letter-spacing: -0.02em; color: var(--sk-ink); }
.sk-sub { margin: 18px 0 0; max-width: 36rem; font: 400 clamp(16px, 0.25vw + 15px, 18px)/1.55 var(--sk-font); color: var(--sk-ink-3); text-wrap: pretty; }
.sk-card__line { margin: 10px 0 0; font: 400 16px/1.5 var(--sk-font); color: var(--sk-ink-3); text-wrap: pretty; }
.sk-head { max-width: 42rem; }
.sk-head--center { margin-inline: auto; text-align: center; }
.sk-head--center .sk-sub { margin-inline: auto; }

/* staggered reveal: items rise 36 px, 80 ms apart; sook.js arms only what starts below the fold */

/* ---------- buttons ---------- */
.sk-btn {
  --bg: var(--sk-pink); --fg: var(--sk-ink); --bg-hover: #cf6fc7;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 12px; box-sizing: border-box;
  background: var(--bg); color: var(--fg);
  font: 600 15px/1 var(--sk-font); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; user-select: none;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: background-color 0.25s var(--sk-ease-std), transform 0.25s var(--sk-ease-std), translate 0.4s var(--sk-ease-out);
}
.sk-btn .sk-icon { width: 18px; height: 18px; transition: transform 0.3s var(--sk-ease-out); }
.sk-btn--ink { --bg: var(--sk-ink); --fg: #ffffff; --bg-hover: #2a2a2e; }
.sk-btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: 14px; }
@media (hover: hover) {
  .sk-btn:hover { background: var(--bg-hover); transform: scale(0.98); }
  .sk-btn:hover .sk-icon { transform: translate(2px, -2px); }
  .sk-btn:hover .sk-icon--arrow-right { transform: translateX(3px); }
}
.sk-btn:active { transform: scale(0.97); transition-duration: 0.08s; }

/* ---------- header: Repay's fixed, centred pill (light glass) ---------- */
.sk-header {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; pointer-events: none;
  padding: calc(env(safe-area-inset-top, 0px) + var(--sk-ht)) calc(var(--sk-gutter) + env(safe-area-inset-right, 0px)) 0 calc(var(--sk-gutter) + env(safe-area-inset-left, 0px));
}
.sk-header__scrim {
  position: fixed; inset: 0; background: rgba(11, 11, 12, 0.28); opacity: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity 0.35s var(--sk-ease-out);
}
.sk-header.is-open .sk-header__scrim { opacity: 1; pointer-events: auto; }
.sk-header__float {
  position: relative; pointer-events: auto; width: 100%; max-width: var(--sk-max); margin: 0 auto; border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(11, 11, 12, 0.06), 0 10px 30px -14px rgba(60, 20, 55, 0.22);
  transition: box-shadow 0.4s var(--sk-ease-out), background-color 0.3s;
}
.sk-header.is-compact .sk-header__float { background: rgba(255, 255, 255, 0.72); }
.sk-header .sk-btn { border-radius: 10px; }
.sk-header__bar { height: var(--sk-hh); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px 0 20px; }
.sk-logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--sk-ink); border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.sk-logo__svg { height: 24px; width: auto; display: block; overflow: visible; fill: currentColor; }
.sk-logo__mark { fill: var(--sk-pink); transform-box: fill-box; transform-origin: 50% 50%; transition: transform 0.8s var(--sk-ease-out); }
@media (hover: hover) { .sk-logo:hover .sk-logo__mark { transform: rotate(180deg); } }
.sk-nav { display: none; align-items: center; gap: 2px; }
.sk-nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px;
  color: var(--sk-ink-2); font: 500 15px/1 var(--sk-font); text-decoration: none;
  transition: color 0.2s, background-color 0.25s var(--sk-ease-out);
}
.sk-nav__link::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--sk-pink); transform: scale(0); transition: transform 0.35s var(--sk-ease-out);
}
@media (hover: hover) { .sk-nav__link:hover { color: var(--sk-ink); background: var(--sk-quiet); } }
.sk-nav__link.is-active { color: var(--sk-ink); }
.sk-nav__link.is-active::after { transform: scale(1); }
.sk-header__end { display: flex; align-items: center; gap: 6px; }
/* X: the logo only, no background (Repay, client 28 Sep); before the handle exists it says "soon" and links nowhere */
.sk-x { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; color: var(--sk-ink); text-decoration: none; transition: opacity 0.2s; }
.sk-x svg { width: 17px; height: 17px; fill: currentColor; }
.sk-x.is-soon { color: var(--sk-ink-3); cursor: default; }
.sk-x__soon { font: 500 14px/1 var(--sk-font); }
@media (hover: hover) { a.sk-x:hover { opacity: 0.7; } }
.sk-menu-btn {
  width: 44px; height: 44px; border: 0; padding: 0; border-radius: 10px; background: var(--sk-quiet); cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s, transform 0.15s;
}
.sk-menu-btn:active { transform: scale(0.94); }
.sk-menu-btn__bar { grid-area: 1 / 1; width: 18px; height: 1.5px; border-radius: 2px; background: var(--sk-ink); transition: transform 0.4s var(--sk-ease-out); }
.sk-menu-btn__bar:first-child { transform: translateY(-4px); }
.sk-menu-btn__bar:last-child { transform: translateY(4px); }
.sk-menu-btn[aria-expanded="true"] .sk-menu-btn__bar:first-child { transform: rotate(45deg); }
.sk-menu-btn[aria-expanded="true"] .sk-menu-btn__bar:last-child { transform: rotate(-45deg); }
@media (min-width: 1024px) {
  .sk-header__float { width: fit-content; }
  .sk-header__bar { gap: 24px; padding-left: 24px; }
  .sk-nav { display: flex; }
  .sk-menu-btn, .sk-sheet { display: none; }
  .sk-logo__svg { height: 25px; }
}
@media (max-width: 479px) { .sk-x__soon { display: none; } .sk-header__bar { gap: 8px; padding-left: 16px; } .sk-header__end { gap: 2px; } .sk-header__cta { padding: 0 14px; } }
@media (max-width: 359px) { .sk-header__cta { display: none; } }
.sk-sheet {
  position: relative; pointer-events: auto; max-width: var(--sk-max); margin: 10px auto 0; border-radius: 16px;
  display: grid; grid-template-rows: 0fr; opacity: 0;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 40px -16px rgba(60, 20, 55, 0.3);
  transition: grid-template-rows 0.5s var(--sk-ease-out), opacity 0.3s var(--sk-ease-out);
}
.sk-sheet.is-open { grid-template-rows: 1fr; opacity: 1; }
.sk-sheet[hidden] { display: none; }
.sk-sheet__inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0 12px; }
.sk-sheet.is-open .sk-sheet__inner { padding-block: 10px 12px; }
.sk-sheet__link {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 12px; border-radius: 10px;
  color: var(--sk-ink); text-decoration: none; font: 700 24px/1.1 var(--sk-display); letter-spacing: -0.025em;
  opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--sk-ease-out), transform 0.45s var(--sk-ease-out), background-color 0.2s;
  transition-delay: calc(var(--i, 0) * 40ms + 80ms);
}
.sk-sheet__link .sk-icon { width: 20px; height: 20px; color: var(--sk-ink-3); }
.sk-sheet__link:active { background: var(--sk-quiet); }
.sk-sheet__cta { margin-top: 10px; opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--sk-ease-out) 0.28s, transform 0.45s var(--sk-ease-out) 0.28s, background-color 0.25s; }
.sk-sheet.is-open .sk-sheet__link, .sk-sheet.is-open .sk-sheet__cta { opacity: 1; transform: none; }
.sk-sheet__link:nth-child(2) { --i: 1; } .sk-sheet__link:nth-child(3) { --i: 2; } .sk-sheet__link:nth-child(4) { --i: 3; } .sk-sheet__link:nth-child(5) { --i: 4; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .sk-header__float, .sk-sheet { background: rgba(255, 255, 255, 0.97); }
}

/* ---------- paper bands (Repay's light bands): features, builder, compare + FAQ sit on paper; the band's sides draw
   in from the white page as it arrives and out as it leaves (--e, 0..1, set by sook.js) ---------- */
.sk-paper {
  --sk-ground: var(--sk-paper); --sk-raised: #ffffff; --sk-raised-2: #f1eaf0;
  --sk-band-r: 24px; --sk-band-in: clamp(10px, 4vw, 72px);
  position: relative; background: var(--sk-ground);
  clip-path: inset(0 calc((1 - var(--e, 1)) * var(--sk-band-in)) round var(--sk-band-r));
}
.sk-paper > section { background: var(--sk-ground); }

/* ---------- hero: the brand gradient, the headline left, the line-art composition right (phones: copy on top,
   the pieces below it). The pieces drift, the S turns, everything leans toward the pointer; leaving, the art tilts
   back and recedes (Repay). Reduced motion / no GPU: the poster, which is the scene's first frame. ---------- */
.sk-hero { position: relative; }
.sk-hero__stage { position: relative; min-height: max(112svh, 640px); box-sizing: border-box; overflow: hidden; isolation: isolate;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--sk-ht) + var(--sk-hh) + clamp(28px, 5vh, 56px)); }
/* the ground: the client's blossom-in-fog photo (29 Sep), cover-fit and zoomed 1.08x, the fog side behind the copy.
   sook.js moves .sk-hero__photo (an eased pointer shift <= 12 px, 0.3x as the hero leaves) and draws a slow water
   swell over the same picture while the page scrolls (initWater, colours untouched). Reduced motion: the still photo. */
.sk-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #f4e7ef; }
.sk-hero__photo { position: absolute; inset: 0; transform: scale(1.08); transform-origin: 50% 50%; will-change: transform; }
.sk-hero__photo img, .sk-water { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sk-hero__photo img { object-fit: cover; object-position: 30% 50%; }
.sk-hero.is-wide .sk-hero__photo img { object-position: 0% 50%; }
@media (max-aspect-ratio: 3/5) { .sk-hero__photo img { object-position: 50% 50%; } } /* phones get the tall crop (hero-mist-tall-*) */
.sk-water { opacity: 0; transition: opacity 0.6s var(--sk-ease-out); }
.sk-water.is-on { opacity: 1; }
/* the photo settles into the white page at the hero's bottom edge (no hard line into the story) */
.sk-hero__bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff); }
/* a soft fog wash where the copy sits (top on phones, left on wide screens), so every line clears 4.5:1 */
.sk-hero__fog { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 250, 253, 0.72) 0%, rgba(255, 250, 253, 0.55) 30%, rgba(255, 250, 253, 0) 56%); }
.sk-hero.is-wide .sk-hero__fog { background: linear-gradient(90deg, rgba(255, 250, 253, 0.6) 0%, rgba(255, 250, 253, 0.36) 30%, rgba(255, 250, 253, 0) 50%); }
.sk-hero__copy { position: relative; z-index: 1; padding-inline: var(--sk-gutter); }
.sk-h1 { margin: 0; font: 700 clamp(44px, 11vw, 76px)/0.98 var(--sk-display); letter-spacing: -0.04em; color: var(--sk-ink); }
.sk-line { display: inline-block; overflow: clip; padding: 0.04em 0.06em 0.16em; margin: 0 -0.06em -0.14em; vertical-align: top; }
.sk-line > span { display: inline-block; animation: sk-rise 1.1s var(--sk-ease-out) backwards; animation-delay: var(--d, 0ms); }
.sk-h1 .sk-line { display: block; }
.sk-lede { margin: clamp(18px, 2.4vh, 28px) 0 0; max-width: 27rem; font: 500 clamp(18px, 0.4vw + 16px, 21px)/1.45 var(--sk-font); letter-spacing: -0.01em; color: var(--sk-ink); text-wrap: pretty; }
.sk-in { animation: sk-fade-up 0.9s var(--sk-ease-out) backwards; animation-delay: var(--d, 0ms); }
.sk-hero__live { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font: 500 15px/1.3 var(--sk-font); color: var(--sk-ink-2); }
.sk-hero__live i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sk-ink); }
/* the art frame, the poster / canvas swap and the wide layout: css/film.css */
.sk-hero.is-wide .sk-hero__stage { min-height: max(100svh, 620px); padding-top: 0; }
.sk-hero.is-wide { --sk-h1: clamp(46px, 4.2vw, 84px); } /* 60 px at 1440: the headline shrinks before the art */
.sk-hero.is-wide .sk-hero__copy { position: absolute; left: var(--sk-he); top: 50%; transform: translateY(-46%); width: min(42%, calc(var(--sk-h1) * 9.4)); padding: 0; }
.sk-hero.is-wide .sk-h1 { font-size: var(--sk-h1); }
/* contract-address slot: one slim see-through chip under the hero line (Repay); visible before launch too */
.sk-ca { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; box-sizing: border-box; margin-top: 18px; padding: 4px 4px 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.08); }
.sk-ca__label { flex: none; font: 600 14px/1 var(--sk-font); color: var(--sk-ink); }
.sk-ca__addr { min-width: 0; font: 400 14px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--sk-ink-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-ca__addr.is-empty { font-family: var(--sk-font); }
a.sk-ca__addr:hover { color: var(--sk-ink); }
.sk-ca__short { display: none; }
.sk-ca__copy { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(11, 11, 12, 0.08); color: var(--sk-ink); font: 500 14px/1 var(--sk-font); transition: background-color 0.16s var(--sk-ease-std); }
.sk-ca__copy:hover:not(:disabled) { background: rgba(11, 11, 12, 0.14); }
.sk-ca__copy:disabled { cursor: default; color: var(--sk-ink-2); }
.sk-ca__copy .sk-icon { width: 14px; height: 14px; }
@media (max-width: 479px) { .sk-ca__full { display: none; } .sk-ca__short { display: inline; } }

@keyframes sk-rise { from { transform: translateY(105%); } }
@keyframes sk-fade-up { from { opacity: 0; translate: 0 14px; } }

/* ---------- 3D mounts: a still poster frame from the same scene until the live canvas takes over ---------- */
.sk-art { position: relative; width: 100%; height: 100%; }
.sk-art canvas, .sk-art__poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sk-art canvas { opacity: 0; transition: opacity 0.7s var(--sk-ease-out); }
.sk-art__poster { object-fit: contain; transition: opacity 0.7s var(--sk-ease-out); }
.sk-art.is-live canvas { opacity: 1; }
.sk-art.is-live .sk-art__poster { opacity: 0; }

/* ---------- story (150vh): a soft pink -> lilac band (inset, rounded); the statement fills muted -> ink word by word
   (its second half in pink) with the scroll; beside it the sketch (three calls gather into one thesis) and the calls
   landing in a thesis (Repay's toast stack) ---------- */
.sk-story { position: relative; }
.sk-story__track { position: relative; height: 150vh; }
.sk-story__stage { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; display: flex; padding: calc(var(--sk-ht) + var(--sk-hh)) clamp(16px, 2vw, 32px) clamp(16px, 2vw, 32px); overflow: hidden; }
.sk-story__band { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(28px, 5vh, 56px); min-height: 0; box-sizing: border-box; padding: clamp(28px, 5vh, 64px) clamp(20px, 5vw, 96px);
  border-radius: clamp(24px, 2.2vw, 36px); background: linear-gradient(135deg, #fbe6f7 0%, #f6dcf1 42%, #e9e0fb 100%); }
.sk-story__side { display: flex; flex-direction: column; align-items: center; width: min(100%, 27rem); }
.sk-story__art { position: relative; width: min(88%, 360px); aspect-ratio: 16 / 10; }
.sk-story__art > .sk-art { position: absolute; inset: 0; }
.sk-story__side .sk-toasts { z-index: 1; margin-top: -12px; }
@media (min-width: 1024px) {
  .sk-story__band { flex-direction: row; justify-content: space-between; gap: clamp(32px, 4vw, 96px); }
  .sk-story__band .sk-statement { flex: 1 1 0; max-width: 11.5em; text-align: left; }
  /* the sketch is the hero of the right half; the toasts overlap its lower edge */
  .sk-story__side { flex: 0 0 auto; width: clamp(440px, 34vw, 640px); }
  .sk-story__art { width: 100%; }
  .sk-story__side .sk-toasts { margin-top: clamp(-40px, -2vw, -24px); }
}
@media (max-width: 767px) { .sk-story__band { gap: 20px; } }
.sk-statement { margin: 0; max-width: 15em; text-align: center; font: 700 clamp(34px, 3.4vw + 18px, 72px)/1.04 var(--sk-display); letter-spacing: -0.04em; color: var(--sk-ink); text-wrap: balance; }
.sk-statement em { font-style: normal; }
.sk-fw { color: color-mix(in srgb, var(--sk-ink) calc(var(--f, 1) * 100%), var(--sk-ink-3)); } /* unfilled >= 5:1 on the band */
.sk-statement em .sk-fw { color: color-mix(in srgb, var(--sk-pink-num) calc(var(--f, 1) * 100%), var(--sk-ink-3)); }
.sk-toasts { list-style: none; position: relative; margin: 0; padding: 0; width: min(100%, 27rem); height: calc(3 * 72px + 2 * 12px); }
.sk-toast { --s: 0; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 0 18px 0 14px;
  border-radius: 16px; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.05), var(--sk-shadow-2);
  transform: translate3d(0, calc(var(--s) * -84px), 0) scale(calc(1 - var(--s) * 0.04)); opacity: calc(1 - var(--s) * 0.1);
  transition: transform 0.5s var(--sk-ease-out), opacity 0.5s var(--sk-ease-out), filter 0.5s var(--sk-ease-out); }
.sk-toast[data-s="1"] { --s: 1; } .sk-toast[data-s="2"] { --s: 2; }
.sk-toast[data-s="3"] { --s: 3; opacity: 0; filter: blur(8px); }
.sk-toast[data-s="-1"] { --s: -0.6; opacity: 0; }
.sk-toast.is-reset { transition: none; }
.sk-toast__coin { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sk-pink); }
.sk-toast__mark { width: 20px; height: 22px; fill: var(--sk-ink); }
.sk-toast__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sk-toast__txt b { font: 600 16px/1.2 var(--sk-font); color: var(--sk-ink); font-variant-numeric: tabular-nums; }
.sk-toast__txt b span { color: var(--sk-pink-text); }
.sk-toast__txt > span { font: 400 15px/1.2 var(--sk-font); color: var(--sk-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-toast__when { flex: none; font: 400 14px/1 var(--sk-font); color: var(--sk-ink-3); }

/* ---------- features (paper): Repay's pinned stage at >= 1201 px, a staggered grid below ---------- */
.sk-feats { padding-block: var(--sk-sec); }
.sk-feats__list { list-style: none; margin: var(--sk-gap-head) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 40px 24px; }
@media (min-width: 640px) { .sk-feats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sk-feat { display: flex; flex-direction: column; }
.sk-feat__art { position: relative; aspect-ratio: 1; border-radius: var(--sk-r-xl); background: var(--sk-raised); overflow: hidden; transition: transform 0.5s var(--sk-ease-out); }
.sk-feat__art > .sk-art { position: absolute; inset: 4%; width: auto; height: auto; }
@media (hover: hover) { .sk-feat:hover .sk-feat__art { transform: translateY(-6px); } }
.sk-feat .sk-h3 { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.sk-feat__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--sk-raised); color: var(--sk-ink); }
.sk-feat__icon .sk-icon { width: 18px; height: 18px; }
.sk-feat .sk-card__line { margin-top: 8px; }
.sk-feats.is-pinned { padding: 0; }
.sk-feats.is-pinned .sk-feats__track { height: 250vh; }
.sk-feats.is-pinned .sk-feats__stage { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; align-items: center; padding-top: calc(var(--sk-ht) + var(--sk-hh)); overflow: hidden; }
.sk-feats.is-pinned .sk-feats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 6vh, 72px); }
.sk-feats.is-pinned .sk-feat { opacity: 0; will-change: transform, opacity; }
.sk-feats.is-pinned .sk-feat__art { aspect-ratio: auto; height: min(21.5rem, 38vh); }

/* ---------- marquee (white): real calls at display size, drifting left, faster while the page scrolls ---------- */
.sk-marquee { position: relative; padding-block: clamp(56px, 6vw, 104px); overflow: hidden; }
.sk-marquee__row { display: flex; width: max-content; animation: sk-marquee-css 60s linear infinite; will-change: transform; }
.sk-marquee__row.is-js { animation: none; }
.sk-marquee__set { display: flex; align-items: center; flex: none; }
.sk-marquee__item { flex: none; padding-inline: clamp(24px, 2.6vw, 44px); font: 700 clamp(48px, 4vw + 26px, 96px)/1.05 var(--sk-display); letter-spacing: -0.04em; color: var(--sk-ink); white-space: nowrap; }
.sk-marquee__mark { flex: none; width: clamp(26px, 2vw, 40px); height: auto; fill: var(--sk-pink); }
@keyframes sk-marquee-css { to { transform: translate3d(-50%, 0, 0); } }

/* YES / NO pills (theses cards, the multiplying thesis) */
.sk-side { flex: none; display: inline-grid; place-items: center; min-width: 40px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 7px; font: 600 14px/1 var(--sk-font); }
.sk-side--yes { background: var(--sk-pink); color: var(--sk-ink); }
.sk-side--no { background: var(--sk-ink); color: #ffffff; }

/* ---------- compare (paper): Repay's table, the SOOK column tinted; the checks draw in ---------- */
.sk-compare { padding-block: var(--sk-sec) calc(var(--sk-sec) * 0.6); }
.sk-cmp-wrap { max-width: 60rem; margin: clamp(40px, 4vw, 64px) auto 0; }
.sk-vs { list-style: none; max-width: 60rem; margin: var(--sk-gap-head) auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sk-vs__card { display: flex; flex-direction: column; padding: clamp(20px, 2vw, 28px); border-radius: var(--sk-r-xl); background: #ffffff; }
.sk-vs__art { position: relative; height: clamp(170px, 20vw, 260px); margin-bottom: 20px; }
.sk-vs__art > .sk-art { position: absolute; inset: 0; width: auto; height: auto; }
@media (max-width: 559px) { .sk-vs { grid-template-columns: 1fr; } }
.sk-cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.sk-cmp th, .sk-cmp td { padding: 22px 20px; text-align: left; vertical-align: middle; }
.sk-cmp thead th { font: 500 15px/1.2 var(--sk-font); color: var(--sk-ink-3); padding-block: 18px; }
.sk-cmp thead .sk-cmp__us { color: var(--sk-ink); font-weight: 600; border-radius: var(--sk-r-lg) var(--sk-r-lg) 0 0; }
.sk-cmp tbody th { font: 400 16px/1.3 var(--sk-font); color: var(--sk-ink-3); width: 26%; }
.sk-cmp td { font: 500 clamp(19px, 0.9vw + 13px, 24px)/1.25 var(--sk-font); letter-spacing: -0.025em; color: var(--sk-ink-3); }
.sk-cmp td .sk-icon { display: inline-block; vertical-align: -3px; width: 22px; height: 22px; margin-right: 12px; }
.sk-cmp .sk-cmp__us { background: rgba(216, 127, 209, 0.14); color: var(--sk-ink); }
.sk-cmp tbody tr:last-child .sk-cmp__us { border-radius: 0 0 var(--sk-r-lg) var(--sk-r-lg); }
.sk-cmp tbody tr + tr > * { box-shadow: inset 0 1px 0 var(--sk-line); }
.sk-cmp td.sk-cmp__us .sk-icon { color: var(--sk-pink-text); }
.sk-cmp td.sk-cmp__us .sk-icon path { stroke-dasharray: 24; stroke-dashoffset: calc((1 - var(--d, 1)) * 24px); } /* --d: sections.js, the row's scroll */
@media (max-width: 559px) { .sk-cmp th, .sk-cmp td { padding: 16px 10px; } .sk-cmp tbody th { width: 30%; font-size: 14px; } .sk-cmp td .sk-icon { display: block; margin: 0 0 8px; } .sk-cmp td { font-size: 17px; } }

/* ---------- FAQ (paper): Repay's split, title and the rules left, one answer open at a time ---------- */
.sk-faq { padding-block: calc(var(--sk-sec) * 0.6) var(--sk-sec); }
.sk-faq__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .sk-faq__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(56px, 6vw, 112px); } .sk-faq__left { position: sticky; top: calc(var(--sk-ht) + var(--sk-hh) + 40px); } }
.sk-limits { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sk-limits li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 18px 16px; border-radius: var(--sk-r-lg); background: #ffffff; }
.sk-limits b { margin-top: 10px; font: 600 clamp(28px, 1.2vw + 20px, 40px)/1 var(--sk-font); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--sk-ink); white-space: nowrap; display: flex; align-items: flex-start; gap: 6px; }
.sk-limits b small { margin-top: 0.2em; font: 500 14px/1 var(--sk-font); letter-spacing: 0; color: var(--sk-ink-3); }
.sk-limits li > span:last-child { font: 400 14px/1.3 var(--sk-font); color: var(--sk-ink-3); }
.sk-fact__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--sk-ink); box-shadow: inset 0 0 0 1px var(--sk-line); }
.sk-fact__icon .sk-icon { width: 22px; height: 22px; }
@media (max-width: 479px) { .sk-limits { grid-template-columns: 1fr; } .sk-limits li { flex-direction: row; align-items: center; gap: 14px; } .sk-limits b { margin: 0; font-size: 28px; } }
.sk-faq__right { display: flex; flex-direction: column; gap: 10px; }
.sk-qa { border-radius: var(--sk-r-lg); background: #ffffff; }
.sk-qa h3 { margin: 0; }
.sk-qa__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 72px; padding: 0 24px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 19px/1.3 var(--sk-font); letter-spacing: -0.02em; color: var(--sk-ink); border-radius: var(--sk-r-lg); -webkit-tap-highlight-color: transparent; }
.sk-qa__q .sk-icon { flex: none; width: 20px; height: 20px; color: var(--sk-ink); transition: transform 0.4s var(--sk-ease-out); }
.sk-qa.is-open .sk-qa__q .sk-icon { transform: rotate(180deg); }
.sk-qa__a p { margin: 0; padding: 0 24px 24px; font: 400 16px/1.55 var(--sk-font); color: var(--sk-ink-3); max-width: 40rem; }

/* ---------- closing band (brand gradient) + footer (white) ---------- */
.sk-footer { position: relative; overflow: hidden; background: var(--sk-ground); }
.sk-close { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; background: #f6e8f1; }
/* the ground: the client's pink ink cloud (29 Sep); the line-art pieces rise over it */
.sk-close__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sk-close__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
.sk-close__art { position: absolute; inset: 0; z-index: 1; transition: opacity 0.5s var(--sk-ease-out);
  /* the pieces pass behind the title, never across it */
  -webkit-mask-image: radial-gradient(ellipse 46% 34% at 50% 50%, transparent 55%, #000 100%); mask-image: radial-gradient(ellipse 46% 34% at 50% 50%, transparent 55%, #000 100%); }
.sk-close.is-past .sk-close__art { opacity: 0; }
.sk-close__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sk-close__title { margin: 0; max-width: 11em; font: 700 clamp(44px, 5vw + 18px, 112px)/0.98 var(--sk-display); letter-spacing: -0.045em; color: var(--sk-ink); text-wrap: balance; }
.sk-close__sweep { display: block; }
.sk-close__sweep .sk-ch { color: color-mix(in srgb, var(--sk-ink) calc(var(--c, 1) * 100%), rgba(11, 11, 12, 0.22)); }
.sk-close__body .sk-btn { margin-top: 36px; }
.sk-foot__nav { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: clamp(40px, 5vw, 72px); }
@media (min-width: 768px) { .sk-foot__nav { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.sk-foot__tile { position: relative; display: flex; align-items: flex-end; justify-content: space-between; min-height: clamp(120px, 14vw, 200px); padding: 24px; border-radius: var(--sk-r-xl); background: var(--sk-raised); box-sizing: border-box;
  color: var(--sk-ink); text-decoration: none; font: 700 clamp(28px, 1.6vw + 18px, 44px)/1 var(--sk-display); letter-spacing: -0.035em; transition: background-color 0.3s var(--sk-ease-out); }
.sk-foot__tile .sk-icon { position: absolute; top: 24px; right: 24px; width: 26px; height: 26px; color: var(--sk-ink-2); transition: transform 0.4s var(--sk-ease-out); }
@media (hover: hover) { .sk-foot__tile:hover { background: var(--sk-raised-2); } .sk-foot__tile:hover .sk-icon { transform: translate(3px, -3px); } }
.sk-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; font: 400 14px/1.4 var(--sk-font); color: var(--sk-ink-3); }
/* the giant wordmark: the brand wordmark's four letters, flush with the gutters, sliding up in turn (Repay) */
.sk-foot__word { margin-top: clamp(32px, 4vw, 64px); line-height: 0; overflow: hidden; }
.sk-foot__word svg { display: block; width: 100%; height: auto; fill: var(--sk-ink); overflow: hidden; }
.sk-foot__l { transform-box: fill-box; transition: transform 0.8s var(--sk-ease-out); transition-delay: calc(var(--i) * 0.07s); }
.sk-foot__word.is-armed:not(.is-in) .sk-foot__l { transform: translateY(calc(100% + 2px)); }
/* the footer bottom (Repay's): SOOK in glass letters standing flush on the page's bottom edge, in front of the client's
   pink lake (cut at the shoreline, white at its top edge so the links above run into it: scripts/photos.py). The glass:
   a frosted, lifted copy of the lake (.sk-foot__glass, pixel for pixel over it, lagging the page a little: sook.js
   initLake) cut to the letters by img/sook-word.svg, under the svg's sheen and 1 px edge. */
.sk-foot__lake { position: relative; margin-top: clamp(24px, 3vw, 48px); aspect-ratio: 2400 / 1000; }
.sk-foot__photo { position: absolute; inset: 0; overflow: hidden; }
.sk-foot__photo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.sk-foot__lake .sk-foot__word { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; padding-inline: var(--sk-gutter); }
.sk-foot__lake .sk-foot__word svg { fill: url(#sk-sheen); }
.sk-foot__lake .sk-foot__l { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sk-foot__glass { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; transition: opacity 1.1s var(--sk-ease-out) 0.4s;
  -webkit-mask: url(/_sook/img/sook-word.svg) center bottom / calc(100% - 2 * var(--sk-gutter)) auto no-repeat;
  mask: url(/_sook/img/sook-word.svg) center bottom / calc(100% - 2 * var(--sk-gutter)) auto no-repeat; }
.sk-foot__glass img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; will-change: transform; }
.sk-foot__word.is-armed:not(.is-in) ~ .sk-foot__glass { opacity: 0; transition: none; }
@supports not ((mask-size: auto) or (-webkit-mask-size: auto)) { .sk-foot__glass { display: none; } .sk-foot__lake .sk-foot__word svg { fill: rgba(255, 255, 255, 0.4); } }
/* phones: a taller cut of the lake (its full height, the right of it: the treeline behind the letters) */
@media (max-width: 767px) { .sk-foot__lake { aspect-ratio: 3 / 2; } .sk-foot__photo img, .sk-foot__glass img { object-position: 78% 100%; } }

/* ---------- headline mask reveal: every word rises out of its own clip box once the heading is in view ---------- */
.sk-w { display: inline-block; overflow: clip; vertical-align: top; padding: 0 0.1em 0.14em; margin: 0 -0.1em -0.14em; }
.sk-w > span { display: inline-block; } /* raised with the scroll by sections.js */

/* ---------- page-load intro: the header drops in ---------- */
.sk-header__float { animation: sk-drop 0.9s var(--sk-ease-out) 0.25s backwards; }
@keyframes sk-drop { from { opacity: 0; translate: 0 -24px; } }

/* ---------- smooth scrolling (Lenis, fine pointers only) ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.sk { scroll-behavior: auto; }
  .sk *, .sk *::before, .sk *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .sk-story__track { height: auto; }
  .sk-story__stage { position: relative; height: auto; min-height: 100svh; }
  .sk-marquee__row { animation: none; width: auto; justify-content: center; }
  .sk-marquee__set { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: 12px; padding-inline: var(--sk-gutter); }
  .sk-marquee__item { white-space: normal; text-align: center; font-size: clamp(32px, 2vw + 22px, 56px); }
  .sk-marquee__set + .sk-marquee__set { display: none; }
  .sk-paper { clip-path: inset(0 round var(--sk-band-r)); }
  .sk-w > span { transform: none !important; }
  .sk-btn { translate: none; }
}