/* ============================================================================
   MAJORD / ESTIA / TURNWISE, shared design system.
   FULL REDESIGN 01/08/2026, second pass, per Alexandre: the site "works but looks
   like an old site that barely evolved". Brief: Apple-level finish. Elegant motion,
   strong visual hierarchy, fluid transitions, living sections, premium feel in the
   first seconds. Reference points given: apple.com, attio.com, lassie.ai, sanalabs.com.

   What this file establishes:
     1. Tokens        design decisions as variables (colour, type, space, easing, depth)
     2. Motion        scroll-reveal system, stagger, sticky sequences. Honours
                      prefers-reduced-motion: everything degrades to static.
     3. Primitives    buttons, cards, device frames, bento, marquee, stat bands
     4. Legacy        every class the 18 existing pages already use, restyled, so no
                      page breaks while the new homepage components sit alongside.

   Products share the grammar, not the colour. Majord is the default (terracotta);
   Estia and Turnwise override the accent through body.brand-* below.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------- 1. TOKENS ---------- */
:root{
  /* Ink & canvas. Warm near-black rather than pure black: reads richer against cream. */
  --ink:#14110e; --ink-2:#6c6357; --ink-3:#9a9184;
  --bg:#ffffff; --panel:#ffffff; --wash:#f7f3ed; --wash-2:#efe8de;
  --dark:#100e0c; --dark-2:#1c1916;
  --hair:rgba(20,17,14,.10); --hair-2:rgba(20,17,14,.06);

  /* Accent, Majord: terracotta. --acc-glow is the light-emitting version, used only
     in gradients, glows and dark sections, never as body text. */
  --acc:#a1502e; --acc-bright:#c4693f; --acc-glow:#e8834f; --acc-dark:#7a3a20;
  --acc-tint:rgba(161,80,46,.10);
  /* Legacy aliases: 18 pages still reference these names. */
  --teal:var(--acc); --teal-bright:var(--acc-bright); --green:var(--acc); --blue:#5b6673;

  /* Type. Fraunces for display (editorial, gives the product a voice a default
     geometric sans cannot), Inter for everything functional. */
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',-apple-system,Segoe UI,sans-serif;
  --t-hero:clamp(38px,5vw,66px);
  --t-h1:clamp(36px,5.4vw,64px);
  --t-h2:clamp(30px,4.1vw,50px);
  --t-h3:clamp(20px,2vw,25px);
  --t-lead:clamp(17px,1.55vw,21px);

  /* Space */
  --sec:clamp(72px,10vw,148px);
  --gap:clamp(18px,2.2vw,28px);

  /* Depth & shape */
  --r:20px; --r-lg:28px; --r-sm:12px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,17,14,.04), 0 6px 18px rgba(20,17,14,.045);
  --sh-2:0 2px 6px rgba(20,17,14,.05), 0 18px 44px rgba(20,17,14,.09);
  --sh-3:0 30px 80px rgba(20,17,14,.20), 0 8px 24px rgba(20,17,14,.10);

  /* Easing. --ease is the "settle" curve used for every reveal and transform:
     fast start, long soft landing. This single curve is most of the premium feel. */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.22,.61,.36,1);
}
body.brand-estia{--acc:#2f5a76;--acc-bright:#3e7396;--acc-glow:#5b9bc4;--acc-dark:#1f3d51;--acc-tint:rgba(47,90,118,.10);}
body.brand-turnwise{--acc:#8f6015;--acc-bright:#ad7a26;--acc-glow:#d5a244;--acc-dark:#6b480f;--acc-tint:rgba(143,96,21,.10);}

/* ---------- 2. BASE ---------- */
*{box-sizing:border-box;}
/* overflow-x:clip, NOT hidden. `hidden` turns html/body into a scroll container, which
   silently kills position:sticky on the header and on the scroll sequence. `clip` gives
   the same protection against sideways scroll without creating that container. */
html{scroll-behavior:smooth;max-width:100%;overflow-x:clip;}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  max-width:100%;overflow-x:clip;}
@supports not (overflow-x:clip){html,body{overflow-x:hidden;}}
img{max-width:100% !important;height:auto;display:block;}
a{color:var(--acc);text-decoration:none;transition:color .2s var(--ease-2);}
a:hover{color:var(--acc-bright);}
p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:600;color:var(--ink);line-height:1.08;margin:0;
  letter-spacing:-.022em;font-optical-sizing:auto;}
h3,h4{line-height:1.18;letter-spacing:-.012em;}
h1 em,h2 em,.em{font-style:italic;font-weight:600;color:var(--acc);}
::selection{background:var(--acc);color:#fff;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 24px;}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 24px;}

/* ---------- 3. MOTION SYSTEM ----------
   .reveal starts displaced and transparent; JS adds .in when the element enters the
   viewport (see the shared snippet at the bottom of each page). data-d="1..6" staggers
   siblings. Transform+opacity only, so it stays on the compositor and never janks. */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.07s}.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}.reveal[data-d="4"]{transition-delay:.28s}
.reveal[data-d="5"]{transition-delay:.35s}.reveal[data-d="6"]{transition-delay:.42s}
.reveal-s{opacity:0;transform:scale(.96);transition:opacity 1s var(--ease),transform 1.1s var(--ease);}
.reveal-s.in{opacity:1;transform:none;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes riseIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal-s{opacity:1!important;transform:none!important;transition:none!important;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;}
}

/* ---------- 4. HEADER ---------- */
.util-strip{background:var(--dark);color:#b8b0a4;font-size:12.5px;padding:8px 0;text-align:center;letter-spacing:.01em;}
.util-strip a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.35);}
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease-2),background .3s var(--ease-2);}
header.site.scrolled{border-bottom-color:var(--hair);background:rgba(255,255,255,.86);}
/* Over a dark cinematic hero the bar disappears entirely and its contents invert, then it
   settles back to the light bar as soon as the hero is behind you. */
header.site.over-hero{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;}
header.site.over-hero .brand{color:#fff;}
header.site.over-hero nav.primary a{color:rgba(255,255,255,.70);}
header.site.over-hero nav.primary a:hover{color:#fff;background:rgba(255,255,255,.12);}
header.site.over-hero nav.primary a.active{color:#fff;background:rgba(255,255,255,.14);}
header.site.over-hero .lang-switch{background:rgba(255,255,255,.12);}
header.site.over-hero .lang-switch a{color:rgba(255,255,255,.70);}
header.site.over-hero .lang-switch a.active{background:rgba(255,255,255,.94);color:var(--ink);box-shadow:none;}
header.site.over-hero .hd-cta{background:#fff;color:var(--ink);}
header.site.over-hero .hd-cta:hover{background:var(--acc);color:#fff;}
header.site.over-hero .mobile-toggle{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);}
header.site.over-hero .mobile-toggle span{background:#fff;}
.hd-row{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1400px;margin:0 auto;gap:18px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:600;font-size:21px;
  color:var(--ink);flex-shrink:0;letter-spacing:-.02em;}
.brand .dot{width:7px;height:7px;background:var(--acc);border-radius:50%;display:inline-block;
  box-shadow:0 0 0 4px var(--acc-tint);}
.brand small{font-family:var(--sans);font-weight:600;font-size:11px;color:var(--ink-2);display:block;letter-spacing:.02em;}
nav.primary{display:flex;gap:4px;align-items:center;flex-wrap:wrap;row-gap:4px;flex:1;min-width:0;justify-content:center;}
nav.primary a{font-size:13.5px;color:var(--ink-2);font-weight:500;white-space:nowrap;padding:7px 11px;
  border-radius:var(--r-pill);transition:color .2s var(--ease-2),background .2s var(--ease-2);}
nav.primary a:hover{color:var(--ink);background:var(--wash);}
nav.primary a.active{color:var(--ink);font-weight:600;background:var(--wash);}
.lang-switch{display:flex;gap:2px;font-size:12.5px;font-weight:600;flex-shrink:0;background:var(--wash);
  border-radius:var(--r-pill);padding:3px;}
.lang-switch a{padding:4px 10px;border-radius:var(--r-pill);color:var(--ink-2);white-space:nowrap;transition:.2s var(--ease-2);}
.lang-switch a.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(20,17,14,.10);}
.hd-cta{background:var(--ink);color:#fff;padding:10px 19px;border-radius:var(--r-pill);font-size:13.5px;
  font-weight:600;white-space:nowrap;flex-shrink:0;transition:transform .25s var(--ease),background .25s var(--ease-2);}
.hd-cta:hover{background:var(--acc);color:#fff;transform:translateY(-1px);}
.hd-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.mobile-toggle{display:none;width:40px;height:40px;border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--panel);flex-direction:column;align-items:center;justify-content:center;gap:4px;flex-shrink:0;cursor:pointer;padding:0;}
.mobile-toggle span{display:block;width:17px;height:1.8px;background:var(--ink);border-radius:2px;}
@media(max-width:1080px){
  nav.primary{display:none;}
  .mobile-toggle{display:flex;}
  .hd-right{display:contents;}
  .brand{order:2;}
  .lang-switch{order:3;margin-left:auto;}
  .hd-cta{display:none;}
  .mobile-toggle{order:1;}
}
/* Mobile drawer */
.mnav{position:fixed;inset:0;z-index:100;visibility:hidden;}
.mnav.open{visibility:visible;}
.mnav-back{position:absolute;inset:0;background:rgba(16,14,12,.45);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s var(--ease-2);}
.mnav.open .mnav-back{opacity:1;}
.mnav-panel{position:absolute;top:0;left:0;bottom:0;width:84%;max-width:340px;background:var(--panel);
  box-shadow:20px 0 60px rgba(20,17,14,.22);transform:translateX(-100%);transition:transform .38s var(--ease);
  padding:22px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.mnav.open .mnav-panel{transform:translateX(0);}
.mnav-panel a{display:block;padding:14px 6px;font-size:17px;color:var(--ink);font-weight:500;
  border-bottom:1px solid var(--hair-2);font-family:var(--serif);letter-spacing:-.015em;}
.mnav-panel a.active{color:var(--acc);}
.mnav-close{align-self:flex-end;width:38px;height:38px;border:1px solid var(--hair);border-radius:50%;
  background:var(--panel);color:var(--ink);font-size:17px;line-height:1;cursor:pointer;margin-bottom:10px;}
.mnav-panel .mnav-langs{display:flex;gap:8px;margin-top:16px;}
.mnav-panel .mnav-langs a{border:1px solid var(--hair);border-radius:var(--r-pill);padding:7px 15px;
  font-weight:600;flex:none;font-family:var(--sans);font-size:13px;}
@media(min-width:1081px){.mnav{display:none;}}

/* ---------- 5. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 27px;border-radius:var(--r-pill);
  font-weight:600;font-size:15px;letter-spacing:-.005em;border:1px solid transparent;cursor:pointer;
  transition:transform .28s var(--ease),background .28s var(--ease-2),box-shadow .28s var(--ease),
             color .2s var(--ease-2),border-color .2s var(--ease-2);}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 4px 14px rgba(20,17,14,.16);}
.btn-primary:hover{background:var(--acc);color:#fff;box-shadow:0 12px 30px rgba(161,80,46,.30);}
.btn-ghost{background:var(--panel);border-color:var(--hair);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);box-shadow:var(--sh-1);}
.btn-accent{background:var(--acc);color:#fff;box-shadow:0 4px 16px rgba(161,80,46,.28);}
.btn-accent:hover{background:var(--acc-bright);color:#fff;box-shadow:0 14px 34px rgba(161,80,46,.36);}
.btn-lg{padding:17px 32px;font-size:16px;}
/* The arrow slides on hover: a small thing the eye reads as "responsive product". */
.btn .arw{display:inline-block;transition:transform .3s var(--ease);}
.btn:hover .arw{transform:translateX(4px);}
.cta-row{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap;}
/* Quiet text link with a rule that grows */
.tlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--acc);position:relative;}
.tlink:after{content:"";position:absolute;left:0;bottom:-3px;height:1.5px;width:0;background:currentColor;
  transition:width .35s var(--ease);}
.tlink:hover:after{width:100%;}

/* ---------- 6. CINEMATIC HERO (homepage) ---------- */
/* Pulled up under the transparent header, so the photograph starts at the very top edge. */
.hero-cinema{position:relative;min-height:min(90vh,850px);display:flex;align-items:center;
  background:var(--dark);overflow:hidden;padding:clamp(112px,15vh,150px) 0 clamp(96px,13vh,124px);
  isolation:isolate;margin-top:-69px;}
@media(max-width:1080px){.hero-cinema{margin-top:-68px;}}
.hero-cinema .hc-bg{position:absolute;inset:0;z-index:0;}
.hero-cinema .hc-bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%;
  transform:scale(1.08);opacity:.78;animation:heroZoom 24s var(--ease-2) forwards;}
@keyframes heroZoom{to{transform:scale(1.0)}}
/* Two overlays: a directional scrim that keeps the left column legible while letting the
   photograph stay a photograph on the right, plus a warm bloom behind the device. */
.hero-cinema .hc-bg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,12,10,.93) 0%,rgba(14,12,10,.80) 34%,rgba(14,12,10,.44) 64%,rgba(14,12,10,.30) 100%),
             linear-gradient(180deg,rgba(14,12,10,.55) 0%,transparent 22%,transparent 72%,rgba(14,12,10,.60) 100%),
             radial-gradient(90% 70% at 78% 42%,rgba(232,131,79,.16) 0%,transparent 60%);}
.hero-cinema .wrap{position:relative;z-index:2;max-width:1300px;}
.hc-grid{display:grid;grid-template-columns:1.24fr .76fr;gap:clamp(28px,4vw,72px);align-items:center;}
@media(max-width:940px){.hc-grid{grid-template-columns:1fr;gap:44px;}}
.hc-eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);color:#fff;font-size:13px;font-weight:600;
  padding:8px 16px;border-radius:var(--r-pill);margin-bottom:26px;animation:riseIn .9s var(--ease) both;}
.hc-eyebrow .pip{width:6px;height:6px;border-radius:50%;background:var(--acc-glow);
  box-shadow:0 0 0 0 var(--acc-glow);animation:pulse 2.4s ease-out infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,131,79,.6)}70%{box-shadow:0 0 0 11px rgba(232,131,79,0)}100%{box-shadow:0 0 0 0 rgba(232,131,79,0)}}
.hc-grid h1{font-size:var(--t-hero);color:#fff;letter-spacing:-.03em;line-height:1.06;text-wrap:balance;
  animation:riseIn 1s var(--ease) .08s both;}
.hc-grid h1 em{color:var(--acc-glow);}
.hc-lead{font-size:var(--t-lead);color:rgba(255,255,255,.72);max-width:540px;margin-top:24px;line-height:1.5;
  animation:riseIn 1s var(--ease) .18s both;}
.hc-lead strong{color:#fff;font-weight:600;}
.hc-grid .cta-row{animation:riseIn 1s var(--ease) .28s both;}
.hero-cinema .btn-ghost{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);color:#fff;
  backdrop-filter:blur(10px);}
.hero-cinema .btn-ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:#fff;}
.hc-points{display:flex;gap:22px;margin-top:34px;flex-wrap:wrap;padding:0;list-style:none;
  animation:riseIn 1s var(--ease) .36s both;}
.hc-points li{font-size:13.5px;color:rgba(255,255,255,.62);display:flex;align-items:center;gap:8px;font-weight:500;}
.hc-points li:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc-glow);flex-shrink:0;}
/* Phone, floating, with a warm bloom behind it. */
.hc-phone{position:relative;justify-self:center;width:min(310px,78vw);animation:riseIn 1.1s var(--ease) .3s both;}
.hc-phone .glow{position:absolute;inset:-16% -22%;background:radial-gradient(50% 50% at 50% 50%,var(--acc-glow) 0%,transparent 70%);
  opacity:.34;filter:blur(46px);z-index:0;}
.hc-phone .dev{position:relative;z-index:1;animation:floaty 7s ease-in-out 1.4s infinite;}
.scroll-cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.42);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px;
  animation:fadeIn 1s var(--ease) 1.2s both;}
.scroll-cue i{display:block;width:1px;height:34px;background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);}
@media(max-width:940px){.scroll-cue{display:none;}}

/* ---------- 7. DEVICE FRAME ---------- */
.dev{border-radius:54px;overflow:hidden;background:#0b0a09;border:3px solid transparent;
  border-image:linear-gradient(160deg,#8a8a8e,#3a3a3d 35%,#0c0c0d 55%,#55555a) 1;
  box-shadow:var(--sh-3), 0 0 0 1px rgba(255,255,255,.08) inset;position:relative;}
.dev::before{content:'';position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:34%;height:24px;background:#000;border-radius:20px;z-index:5;}
.dev img{width:100%;height:auto;display:block;}
.dev-sm{border-radius:40px;border-width:2px;}
.dev-sm::before{top:11px;height:17px;width:32%;border-radius:14px;}
/* Browser chrome for desktop screenshots */
.winframe{border-radius:var(--r-lg);overflow:hidden;background:var(--panel);border:1px solid var(--hair);
  box-shadow:var(--sh-2);}
.winframe .bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--wash);
  border-bottom:1px solid var(--hair);}
.winframe .bar i{width:11px;height:11px;border-radius:50%;background:#dcd4c8;display:block;}
.winframe .bar .u{margin-left:12px;font-size:11.5px;color:var(--ink-3);font-family:var(--sans);
  background:var(--panel);border-radius:var(--r-pill);padding:4px 14px;border:1px solid var(--hair-2);}
.winframe img{width:100%;height:auto;display:block;}

/* ---------- 8. SECTIONS & HEADS ---------- */
section{padding:var(--sec) 0;}
section.alt{background:var(--wash);}
section.dark{background:var(--dark);color:#fff;}
section.dark h1,section.dark h2,section.dark h3{color:#fff;}
section.dark p{color:rgba(255,255,255,.66);}
section.dark .kicker{color:var(--acc-glow);}
.section-head{max-width:680px;margin-bottom:clamp(34px,4.5vw,60px);}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.kicker,.section-head .kicker{color:var(--acc);font-weight:600;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;display:block;}
.section-head h2{font-size:var(--t-h2);margin-top:14px;}
.section-head p{color:var(--ink-2);margin-top:18px;font-size:var(--t-lead);line-height:1.55;}
.eyebrow{display:inline-block;background:var(--panel);border:1px solid var(--hair);color:var(--acc);
  font-size:12.5px;font-weight:600;padding:7px 15px;border-radius:var(--r-pill);margin-bottom:20px;}

/* ---------- 9. STICKY SCROLL SEQUENCE ----------
   The signature move: the phone stays pinned while the story scrolls past it, and the
   screenshot swaps as each step becomes active. No scroll-jacking, just position:sticky
   plus an observer, so the user keeps full control of their scroll. */
.seq{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,5vw,90px);align-items:start;}
@media(max-width:900px){.seq{grid-template-columns:1fr;gap:0;}}
.seq-stick{position:sticky;top:clamp(84px,14vh,140px);justify-self:center;width:min(300px,72vw);}
@media(max-width:900px){.seq-stick{position:static;margin:0 auto 12px;}}
.seq-stack{position:relative;}
.seq-stack .dev{position:relative;}
.seq-shot{position:absolute;inset:0;opacity:0;transform:scale(1.02);
  transition:opacity .6s var(--ease),transform .8s var(--ease);}
.seq-shot img{width:100%;height:100%;object-fit:cover;}
.seq-shot.on{opacity:1;transform:none;}
.seq-shot.base{position:relative;opacity:1;transform:none;}
.seq-steps{display:flex;flex-direction:column;}
.seq-step{padding:clamp(30px,7vh,72px) 0;border-left:2px solid var(--hair);padding-left:clamp(22px,3vw,38px);
  margin-left:6px;transition:border-color .5s var(--ease-2);}
.seq-step.on{border-left-color:var(--acc);}
.seq-step .n{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);transition:color .4s var(--ease-2);}
.seq-step.on .n{color:var(--acc);}
.seq-step h3{font-size:var(--t-h3);margin:12px 0 0;color:var(--ink-3);transition:color .5s var(--ease-2);}
.seq-step.on h3{color:var(--ink);}
.seq-step p{color:var(--ink-2);margin-top:12px;font-size:16px;max-width:460px;opacity:.55;transition:opacity .5s var(--ease-2);}
.seq-step.on p{opacity:1;}
@media(max-width:900px){
  .seq-step{opacity:1;padding:26px 0;}
  .seq-step h3,.seq-step p{color:var(--ink);opacity:1;}
}

/* ---------- 10. BENTO GRID ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);}
.bento > *{grid-column:span 2;}
.bento .w3{grid-column:span 3;}
.bento .w4{grid-column:span 4;}
.bento .w6{grid-column:span 6;}
@media(max-width:960px){.bento{grid-template-columns:repeat(2,1fr);}
  .bento > *,.bento .w3,.bento .w4{grid-column:span 1;} .bento .w6{grid-column:span 2;}}
@media(max-width:600px){.bento{grid-template-columns:1fr;}
  .bento > *,.bento .w3,.bento .w4,.bento .w6{grid-column:span 1;}}
.tile{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:30px;
  box-shadow:var(--sh-1);position:relative;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s var(--ease-2);}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:rgba(20,17,14,.16);}
.tile h3{font-size:20px;margin-bottom:11px;}
.tile p{color:var(--ink-2);font-size:15px;margin:0;}
.tile .figure{font-family:var(--serif);font-weight:600;font-size:clamp(40px,5vw,60px);color:var(--acc);
  letter-spacing:-.03em;line-height:1;margin-bottom:10px;}
.tile.fill{padding:0;display:flex;flex-direction:column;}
.tile.fill .pic{background:var(--wash);overflow:hidden;flex:1;min-height:190px;display:flex;align-items:center;justify-content:center;}
.tile.fill .pic img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.tile.fill:hover .pic img{transform:scale(1.04);}
.tile.fill .txt{padding:26px 30px 30px;}
.tile.tinted{background:linear-gradient(160deg,var(--wash) 0%,var(--panel) 70%);}
.tile.inkd{background:var(--dark);border-color:transparent;color:#fff;}
.tile.inkd h3{color:#fff;} .tile.inkd p{color:rgba(255,255,255,.66);} .tile.inkd .figure{color:var(--acc-glow);}

/* ---------- 11. STAT BAND & MARQUEE ---------- */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);text-align:center;}
@media(max-width:760px){.band{grid-template-columns:repeat(2,1fr);}}
.band .b-v{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.4vw,54px);color:var(--ink);letter-spacing:-.03em;line-height:1;}
.band .b-l{font-size:12.5px;color:var(--ink-2);margin-top:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;}
section.dark .band .b-v{color:#fff;} section.dark .band .b-l{color:rgba(255,255,255,.55);}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marquee-t{display:flex;gap:14px;width:max-content;animation:slideMarquee 42s linear infinite;}
.marquee:hover .marquee-t{animation-play-state:paused;}
.chip{border:1px solid var(--hair);background:var(--panel);border-radius:var(--r-pill);padding:11px 22px;
  font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap;}
.chip b{color:var(--ink);font-weight:600;}

/* ---------- 12. SPLIT SHOWCASE (before / after branding) ---------- */
.split-show{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.4vw,48px);align-items:center;}
@media(max-width:760px){.split-show{grid-template-columns:1fr;}}
.show-card{text-align:center;}
.show-card .dev{margin:0 auto;width:min(268px,84%);}
.show-card .cap{margin-top:22px;}
.show-card .cap .t{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:-.015em;}
.show-card .cap .s{font-size:14px;color:var(--ink-2);margin-top:6px;}
.show-card.hi .dev{box-shadow:var(--sh-3),0 0 0 1px var(--acc-tint),0 24px 70px rgba(161,80,46,.24);}

/* ---------- 13. LEGACY COMPONENTS (used by the 18 existing pages) ---------- */
.hero{padding:clamp(56px,8vw,104px) 0 clamp(44px,6vw,76px);
  background:linear-gradient(180deg,var(--wash) 0%,var(--bg) 100%);position:relative;}
.hero h1{font-size:var(--t-h1);max-width:900px;}
.hero p.lead,.lead{font-size:var(--t-lead);color:var(--ink-2);max-width:660px;margin-top:20px;line-height:1.55;}
.check-list{display:flex;gap:24px;margin-top:32px;flex-wrap:wrap;padding:0;list-style:none;}
.check-list li{font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px;font-weight:500;}
.check-list li:before{content:"✓";color:var(--acc);font-weight:700;}
.crumb{font-size:12.5px;color:var(--ink-3);padding:18px 0 0;}
.crumb a{color:var(--ink-3);} .crumb a:hover{color:var(--ink);}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.steps{grid-template-columns:1fr;}}
.step{border:1px solid var(--hair);border-radius:var(--r-lg);padding:28px;background:var(--panel);
  box-shadow:var(--sh-1);transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh-2);}
.step .num{font-family:var(--serif);font-weight:600;font-size:34px;color:var(--acc);margin-bottom:14px;letter-spacing:-.03em;}
.step h3{font-size:17px;margin-bottom:9px;}
.step p{color:var(--ink-2);font-size:14.5px;}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
@media(max-width:900px){.grid-3{grid-template-columns:1fr;}}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px);}
@media(max-width:820px){.grid-2{grid-template-columns:1fr;}}
.card{border:1px solid var(--hair);border-radius:var(--r-lg);padding:32px;background:var(--panel);
  box-shadow:var(--sh-1);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s var(--ease-2);}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:rgba(20,17,14,.16);}
.card h3{font-size:20px;margin-bottom:12px;}
.card p{color:var(--ink-2);font-size:15px;}
.card .tag,.tag{display:inline-block;background:var(--acc-tint);color:var(--acc);font-size:11.5px;font-weight:600;
  padding:5px 13px;border-radius:var(--r-pill);margin-bottom:14px;letter-spacing:.02em;}

.feature-list{list-style:none;padding:0;margin:20px 0 0;}
.feature-list li{padding:12px 0 12px 28px;position:relative;color:var(--ink-2);font-size:15px;border-top:1px solid var(--hair-2);}
.feature-list li:first-child{border-top:none;}
.feature-list li:before{content:"✓";position:absolute;left:0;color:var(--acc);font-weight:700;}
.feature-list li b{color:var(--ink);font-weight:600;}

.stat{font-family:var(--serif);font-weight:600;color:var(--acc);font-size:46px;letter-spacing:-.03em;}
.stat-row{display:flex;gap:48px;flex-wrap:wrap;margin-top:26px;}
.stat-item .label{font-size:13px;color:var(--ink-2);margin-top:6px;font-weight:500;}

.flow{display:flex;align-items:stretch;gap:0;margin-top:32px;flex-wrap:wrap;}
.flow .fstep{flex:1;min-width:190px;border:1px solid var(--hair);border-radius:var(--r);padding:24px;
  background:var(--panel);box-shadow:var(--sh-1);}
.flow .fstep .n{color:var(--acc);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.12em;}
.flow .fstep h4{font-size:16px;margin:10px 0 7px;}
.flow .fstep p{font-size:14px;color:var(--ink-2);}
.flow .arrow{display:flex;align-items:center;justify-content:center;padding:0 12px;color:var(--acc);font-size:20px;}
@media(max-width:820px){.flow{flex-direction:column;gap:12px;}.flow .arrow{transform:rotate(90deg);padding:4px 0;}}

details.faq{border:1px solid var(--hair);border-radius:var(--r);padding:22px 26px;margin-bottom:12px;
  background:var(--panel);transition:border-color .3s var(--ease-2),box-shadow .3s var(--ease);}
details.faq:hover{border-color:rgba(20,17,14,.2);box-shadow:var(--sh-1);}
details.faq[open]{border-color:var(--acc);box-shadow:var(--sh-1);}
details.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:16px;font-family:var(--serif);letter-spacing:-.015em;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary:after{content:"+";font-size:23px;color:var(--acc);font-weight:400;flex-shrink:0;
  transition:transform .35s var(--ease);font-family:var(--sans);}
details.faq[open] summary:after{transform:rotate(45deg);}
details.faq p{color:var(--ink-2);margin-top:16px;font-size:15.5px;line-height:1.65;max-width:700px;
  animation:riseIn .5s var(--ease) both;}

.icon-badge{width:56px;height:56px;border-radius:16px;background:var(--acc-tint);display:flex;align-items:center;
  justify-content:center;margin-bottom:18px;color:var(--acc);flex-shrink:0;
  transition:transform .45s var(--ease),background .3s var(--ease-2);}
.card:hover .icon-badge,.step:hover .icon-badge,.tile:hover .icon-badge{transform:scale(1.06) rotate(-3deg);}
.icon-badge svg{width:26px;height:26px;}
.card .icon-badge,.step .icon-badge{width:52px;height:52px;margin-bottom:16px;}
.card .icon-badge svg,.step .icon-badge svg{width:24px;height:24px;}

.audience{border:1px solid var(--hair);border-radius:var(--r-lg);padding:34px;margin-bottom:20px;background:var(--panel);
  box-shadow:var(--sh-1);transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.audience:hover{transform:translateY(-3px);box-shadow:var(--sh-2);}
.audience h3{font-size:23px;margin-bottom:7px;}
.audience .sub{color:var(--acc);font-weight:600;font-size:13px;margin-bottom:16px;}
.audience p{color:var(--ink-2);font-size:15.5px;}

.pull{border-left:3px solid var(--acc);padding-left:26px;margin:34px 0;font-family:var(--serif);
  font-size:clamp(20px,2.4vw,26px);font-style:italic;color:var(--ink);font-weight:500;line-height:1.35;}

.final-cta{background:var(--dark);color:#fff;text-align:center;padding:clamp(72px,10vw,124px) 24px;position:relative;overflow:hidden;}
.final-cta:before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 100% at 50% 0%,var(--acc-tint) 0%,transparent 65%);}
.final-cta .wrap{position:relative;z-index:1;}
.final-cta h2{color:#fff;font-size:var(--t-h2);}
.final-cta p{color:rgba(255,255,255,.66);margin-top:16px;font-size:var(--t-lead);}
.final-cta .cta-row{justify-content:center;}
.final-cta .btn-primary{background:#fff;color:var(--dark);}
.final-cta .btn-primary:hover{background:var(--acc);color:#fff;}
.final-cta .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff;}
.final-cta .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55);color:#fff;}

footer.site{background:var(--bg);border-top:1px solid var(--hair);padding:56px 0 30px;font-size:13.5px;color:var(--ink-2);}
footer.site .fgrid{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;}
footer.site h5{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:13px;margin-bottom:14px;letter-spacing:.02em;}
footer.site ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
footer.site ul a{color:var(--ink-2);}
footer.site ul a:hover{color:var(--acc);}
footer.site .legal{margin-top:34px;border-top:1px solid var(--hair-2);padding-top:20px;font-size:12px;color:var(--ink-3);}
footer.site .group-note{margin-top:24px;padding-top:22px;border-top:1px solid var(--hair-2);font-size:12.5px;color:var(--ink-2);}
footer.site .group-note b{color:var(--ink);}
footer.site .group-note ul{flex-direction:row;flex-wrap:wrap;gap:16px;margin-top:10px;}
footer.site .group-note ul a{color:var(--acc);font-weight:600;}

.demo-card{border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);
  box-shadow:var(--sh-1);transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.demo-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);}
.demo-card .shot{border-bottom:1px solid var(--hair);background:var(--wash);display:flex;align-items:flex-start;
  justify-content:center;overflow:hidden;max-height:340px;}
.demo-card .shot img{width:100%;height:auto;display:block;transition:transform .9s var(--ease);}
.demo-card:hover .shot img{transform:scale(1.03);}
.demo-card .shot.tall img{width:auto;height:100%;max-width:none;}
.demo-card .body{padding:28px;}

table.payflow{width:100%;border-collapse:collapse;margin-top:22px;}
table.payflow th,table.payflow td{text-align:left;padding:14px 14px;border-bottom:1px solid var(--hair-2);font-size:14.5px;}
table.payflow th{color:var(--ink-3);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
table.payflow tr:hover td{background:var(--wash);}
.placeholder{background:var(--panel);border:1px dashed var(--acc);color:var(--acc);font-size:12.5px;padding:3px 8px;border-radius:6px;}
.phone-frame{position:relative;border-radius:34px;overflow:hidden;background:#000;box-shadow:var(--sh-3);
  border:5px solid #201c18;aspect-ratio:9/19.5;}
.phone-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;}

/* Feature tab strip (kept from the previous pass, restyled) */
.featstrip{display:grid;grid-template-columns:290px 1fr;gap:clamp(24px,3.4vw,48px);align-items:start;}
@media(max-width:860px){.featstrip{grid-template-columns:1fr;}}
.featstrip .flabels{display:flex;flex-direction:column;gap:2px;}
.featstrip .flabel{text-align:left;background:none;border:none;border-left:2px solid var(--hair);
  padding:15px 0 15px 20px;cursor:pointer;font-family:var(--sans);transition:border-color .4s var(--ease-2);}
.featstrip .flabel .ft{font-weight:600;font-size:16px;color:var(--ink-3);transition:color .3s var(--ease-2);}
.featstrip .flabel .fd{font-size:13.5px;color:var(--ink-2);opacity:0;max-height:0;overflow:hidden;transition:opacity .35s var(--ease-2);}
.featstrip .flabel.active{border-left-color:var(--acc);}
.featstrip .flabel.active .ft{color:var(--ink);}
.featstrip .flabel.active .fd{opacity:1;max-height:70px;margin-top:6px;}
.featstrip .fpanel{border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;background:var(--wash);
  box-shadow:var(--sh-1);height:520px;display:flex;align-items:center;justify-content:center;}
.featstrip .fpanel img{display:none;max-width:100%;max-height:100%;width:auto;object-fit:contain;}
.featstrip .fpanel img.active{display:block;animation:fadeIn .5s var(--ease) both;}
@media(max-width:860px){.featstrip .fpanel{height:430px;}}
@media(max-width:520px){.featstrip .fpanel{height:350px;}}

/* ---------- 14. SCREEN GALLERY ----------
   A row of real device screenshots with a caption under each. Used on the Features
   pages so the copy is backed by the actual product rather than described in prose. */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.2vw,44px);}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.gal{grid-template-columns:1fr;max-width:330px;margin:0 auto;}}
.gal figure{margin:0;}
.gal .dev{margin:0 auto;}
.gal figcaption{margin-top:20px;font-size:14.5px;color:var(--ink-2);line-height:1.5;text-align:center;}
.gal figcaption b{display:block;color:var(--ink);font-family:var(--serif);font-weight:600;font-size:17.5px;
  letter-spacing:-.015em;margin-bottom:5px;}

/* ---------- 15. PAGE HERO ----------
   The homepage opens cinematically; every other page now opens with the same DNA at a
   calmer scale: dark, photographic, big serif type, accent italic, breadcrumb inverted.
   Crossing from the homepage to any inner page should feel like the same product. */
.hero-page{position:relative;background:var(--dark);color:#fff;overflow:hidden;isolation:isolate;
  padding:clamp(116px,15vh,164px) 0 clamp(58px,8vh,88px);margin-top:-69px;}
@media(max-width:1080px){.hero-page{margin-top:-68px;}}
.hero-page .hp-bg{position:absolute;inset:0;z-index:0;}
.hero-page .hp-bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%;
  opacity:.72;transform:scale(1.06);animation:heroZoom 26s var(--ease-2) forwards;}
.hero-page .hp-bg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,12,10,.92) 0%,rgba(14,12,10,.76) 42%,rgba(14,12,10,.40) 100%),
             linear-gradient(180deg,rgba(14,12,10,.55) 0%,transparent 26%,transparent 60%,rgba(14,12,10,.68) 100%);}
/* No photograph (Estia, Turnwise): the accent alone carries the mood. */
.hero-page.plain .hp-bg:after{
  background:radial-gradient(78% 120% at 12% 0%,color-mix(in srgb,var(--acc) 32%,transparent) 0%,transparent 58%),
             radial-gradient(60% 100% at 92% 100%,color-mix(in srgb,var(--acc) 16%,transparent) 0%,transparent 60%),
             linear-gradient(180deg,rgba(14,12,10,.55) 0%,rgba(14,12,10,.10) 40%,rgba(14,12,10,.55) 100%);}
.hero-page .wrap{position:relative;z-index:2;}
.hero-page .crumb{color:rgba(255,255,255,.50);padding:0 0 22px;font-size:12.5px;
  animation:fadeIn .8s var(--ease) both;}
.hero-page .crumb a{color:rgba(255,255,255,.72);}
.hero-page .crumb a:hover{color:#fff;}
.hero-page h1{color:#fff;font-size:clamp(34px,4.5vw,56px);max-width:18ch;letter-spacing:-.028em;
  animation:riseIn .9s var(--ease) .06s both;text-wrap:balance;}
.hero-page h1.long{max-width:26ch;}
.hero-page h1 em{color:var(--acc-glow);}
.hero-page .lead{color:rgba(255,255,255,.70);max-width:640px;margin-top:22px;
  animation:riseIn .9s var(--ease) .16s both;}
.hero-page .lead strong{color:#fff;font-weight:600;}
.hero-page .eyebrow,.hero-page .status-badge{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20);
  color:#fff;backdrop-filter:blur(10px);animation:riseIn .8s var(--ease) both;}
.hero-page .cta-row{animation:riseIn .9s var(--ease) .26s both;}
.hero-page .btn-ghost{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);color:#fff;}
.hero-page .btn-ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:#fff;}
.hero-page .check-list li{color:rgba(255,255,255,.62);}

/* Bare text columns inside a two-up grid become real cards, so inner pages carry the
   same surface language as the homepage bento instead of reading as loose paragraphs. */
.grid-2 > .tile > h3:first-child,.grid-3 > .tile > h3:first-child{margin-top:0;}
.tile > .feature-list{margin-top:16px;}
.tile > .feature-list li:last-child{padding-bottom:0;}

/* ---------- 16. SOLO SECTION HEADS ----------
   Several inner pages are a stack of sections that contain nothing but a heading and a
   paragraph. Left-aligned in a 1180px container that reads as a narrow column stranded
   in white space. Split them: kicker + heading hold the left, the prose takes the right.
   Same trick the homepage uses to fill the measure without shouting. */
.section-head.solo{max-width:860px;margin-left:auto;margin-right:auto;margin-bottom:0;text-align:center;}
.section-head.solo .kicker{display:block;}
.section-head.solo h2{margin-top:14px;}
.section-head.solo > p{text-align:left;max-width:700px;margin-left:auto;margin-right:auto;margin-top:22px;}
.section-head.solo > p ~ p{margin-top:16px;}
@media(max-width:640px){.section-head.solo{text-align:left;}}
/* Text-only sections do not need the full section rhythm. */
section.tight{padding:clamp(52px,7vw,96px) 0;}

/* A heading with a single companion block (a checklist, a table, a pull quote) reads as
   a stranded column when stacked. Side by side it fills the measure and matches the
   two-column rhythm of the solo heads above. */
section.duo > .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,4.5vw,72px);align-items:start;}
section.duo > .wrap > .section-head{margin-bottom:0;max-width:none;}
section.duo > .wrap > .feature-list{margin-top:6px;}
@media(max-width:820px){
  section.duo > .wrap{grid-template-columns:1fr;gap:18px;}
}

/* ---------- 17. PAYMENT SPLIT INFOGRAPHIC ----------
   Replaces the plain table on the Payments page. A proportional bar that fills on scroll,
   then three figure cards. Sits on a dark section so the money reads as the headline.
   Segment widths come from inline --w so the markup stays the single source of the numbers. */
.paysplit{max-width:1000px;margin:0 auto;}
.ps-flow{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6vw,20px);
  flex-wrap:wrap;margin-bottom:clamp(34px,4.5vw,54px);}
.ps-flow .n{display:inline-block;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);padding:11px 20px;
  font-size:14px;color:rgba(255,255,255,.86);font-weight:500;backdrop-filter:blur(8px);}
.ps-flow .n b{color:#fff;font-weight:600;}
.ps-flow .sep{color:var(--acc-glow);font-size:17px;line-height:1;}
@media(max-width:700px){.ps-flow .sep{transform:rotate(90deg);}}

.ps-barwrap{position:relative;}
.ps-bar{display:flex;height:clamp(64px,8vw,92px);border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.05);box-shadow:0 20px 60px rgba(0,0,0,.35);}
.ps-seg{width:0;box-sizing:border-box;display:flex;align-items:center;padding:0 clamp(12px,1.6vw,22px);
  transition:width 1.3s var(--ease);overflow:hidden;white-space:nowrap;border-right:3px solid var(--dark);}
.ps-seg:last-child{border-right:0;}
.reveal.in .ps-seg,.paysplit.in .ps-seg{width:var(--w);}
.ps-seg .pct{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.02em;line-height:1;}
.ps-seg .who{font-size:12.5px;font-weight:500;opacity:.8;margin-top:5px;letter-spacing:.02em;}
.ps-seg .in-txt{display:flex;flex-direction:column;justify-content:center;}
.ps-seg.agency{background:linear-gradient(100deg,var(--acc) 0%,var(--acc-glow) 100%);color:#fff;}
.ps-seg.majord{background:rgba(255,255,255,.92);color:var(--dark);}
.ps-seg.stripe{background:rgba(255,255,255,.34);color:#fff;padding:0;}
/* Below ~640px the two thin slices cannot hold type; the legend underneath carries it. */
@media(max-width:640px){.ps-seg.majord .in-txt,.ps-seg .who{display:none;}}

.ps-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(26px,3.4vw,40px);}
@media(max-width:760px){.ps-legend{grid-template-columns:1fr;}}
.ps-card{border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:26px 24px;
  background:rgba(255,255,255,.04);transition:transform .45s var(--ease),border-color .3s var(--ease-2);}
.ps-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.3);}
.ps-card .dot{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:9px;vertical-align:middle;}
.ps-card.agency .dot{background:linear-gradient(100deg,var(--acc),var(--acc-glow));}
.ps-card.majord .dot{background:rgba(255,255,255,.92);}
.ps-card.stripe .dot{background:rgba(255,255,255,.34);}
.ps-card .lbl{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;}
.ps-card .amt{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.6vw,42px);color:#fff;
  letter-spacing:-.03em;line-height:1;margin:14px 0 6px;}
.ps-card.agency .amt{color:var(--acc-glow);}
.ps-card .rate{font-size:13.5px;color:rgba(255,255,255,.62);font-weight:500;}
.ps-card p{font-size:14px;color:rgba(255,255,255,.62);margin:14px 0 0;line-height:1.55;}
.ps-note{margin-top:clamp(26px,3.4vw,38px);font-size:13px;color:rgba(255,255,255,.45);line-height:1.6;
  max-width:760px;margin-left:auto;margin-right:auto;text-align:center;}
.ps-note a{color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:3px;}
.ps-note a:hover{color:#fff;}

/* Step cards on How it works: an icon carries the action, the number keeps the sequence.
   The number moves to a small pill so the icon can lead visually. */
.step .stephead{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.step .stephead .icon-badge{margin-bottom:0;width:46px;height:46px;border-radius:13px;}
.step .stephead .icon-badge svg{width:22px;height:22px;}
.step .stephead .num{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  color:var(--ink-3);margin:0;background:var(--wash);border-radius:var(--r-pill);padding:5px 11px;}