/* Flopay website — built from the Flopay design system tokens (tokens.json v1) */
:root{
  color-scheme: light;
  /* colour tokens */
  --blue:#2e6bb2; --blue-press:#255a96; --green:#3eb187; --mint:#c5e2d7; --wave-green:#6abd9b; --sky:#aeddfa;
  --lime:#99c355; --yellow:#e6cb61; --red:#cd6265;
  --surface:#ffffff; --surface-alt:#f4f4f4; --ink:#333333; --ink-muted:#666666; --accent-ink:var(--blue); --on-brand:#ffffff;
  --rule:#dcdcdc;
  --sky-photo:#b3cfe8; /* sampled from the key-visual studio ground, so the hero panel meets the photo without a seam (blue headline 3.4:1, large text only; ink 7.8:1) */
  /* type */
  --font-brand:"Roboto Flex", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* spacing tokens + fluid section rhythm */
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:48px;
  --section:clamp(56px, 8vw, 104px);
  --gutter:clamp(20px, 4vw, 48px);
  --max:1200px;
  --radius-md:8px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(88px + env(safe-area-inset-top,0px)); -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; background:var(--surface); color:var(--ink); font-family:var(--font-brand); font-size:1rem; line-height:1.5; font-weight:450; font-optical-sizing:auto; text-rendering:optimizeLegibility}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent-ink); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:2px}
.on-blue :focus-visible,.on-blue:focus-visible{outline-color:#fff}
h1,h2,h3,h4{margin:0; color:var(--accent-ink); line-height:1.08; text-wrap:balance}
p{margin:0 0 1em} p:last-child{margin-bottom:0}
ul,ol{margin:0; padding:0}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--radius-md)}
.skip:focus{top:12px}

/* ---------- type styles ---------- */
.t-headline{font-weight:900; font-size:clamp(2.3rem, 1.1rem + 4vw, 4.25rem); line-height:.98; letter-spacing:-.02em; font-stretch:100%}
.t-h2{font-weight:900; font-size:clamp(1.85rem, 1.2rem + 2.2vw, 2.9rem); line-height:1.04; letter-spacing:-.012em}
.t-h3{font-weight:700; font-size:1.25rem; line-height:1.25}
.t-section-title{font-weight:300; font-size:clamp(1.1rem, .9rem + .7vw, 1.6rem); line-height:1.2; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-ink); margin:0 0 var(--space-2)}
.t-statement{font-weight:600; font-size:clamp(1.3rem, 1rem + 1vw, 1.75rem); line-height:1.25}
.t-subhead{font-weight:600; font-size:1.375rem; line-height:1.3}
.t-lead{font-size:clamp(1.06rem, 1rem + .3vw, 1.25rem); line-height:1.55; font-weight:450; max-width:60ch}
.t-label{font-weight:600; font-size:.8125rem; line-height:1.4; color:var(--accent-ink)}
.t-caption{font-weight:400; font-size:.8125rem; line-height:1.5; color:var(--ink-muted)}
.measure{max-width:66ch}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:calc(var(--max) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--alt{background:var(--surface-alt)}
.section--mint{background:var(--mint)}
.section--blue{background:var(--blue); color:var(--on-brand)}
.section--blue h2,.section--blue h3,.section--blue a{color:#fff}
.section--green{background:var(--green); color:var(--ink)}
.section--green h2{color:var(--ink)}
.section--tight{padding-block:clamp(36px,5vw,56px)}
.head{display:grid; gap:var(--space-2); margin-bottom:clamp(28px,4vw,48px); max-width:760px}
.head p{margin:0}
.grid{display:grid; gap:var(--space-3)}
@media (min-width:720px){ .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:720px) and (max-width:1023px){ .grid-3.grid-3--2up{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:600px) and (max-width:1023px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
.split{display:grid; gap:clamp(28px,5vw,72px); align-items:center}
@media (min-width:900px){ .split{grid-template-columns:1fr 1fr} .split--wide-left{grid-template-columns:1.2fr .8fr} .split--wide-right{grid-template-columns:.85fr 1.15fr} }
.stack>*+*{margin-top:var(--space-2)}

/* ---------- buttons ---------- */
.btn{--bg:var(--blue); --fg:#fff; --bd:var(--blue); display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 22px; border-radius:var(--radius-md); border:2px solid var(--bd); background:var(--bg); color:var(--fg); font:600 1rem/1.2 var(--font-brand); text-decoration:none; cursor:pointer; white-space:nowrap}
.btn:hover{--bg:var(--blue-press); --bd:var(--blue-press); text-decoration:none}
.btn--secondary{--bg:#fff; --fg:var(--blue); --bd:var(--blue)}
.btn--secondary:hover{--bg:#eef4fb; --bd:var(--blue-press); --fg:var(--blue-press)}
.btn--white{--bg:#fff; --fg:var(--blue); --bd:#fff}
.btn--white:hover{--bg:#eef4fb; --bd:#eef4fb; --fg:var(--blue-press)}
.btn--ghost-white{--bg:transparent; --fg:#fff; --bd:#fff}
.btn--ghost-white:hover{--bg:rgba(255,255,255,.12); --bd:#fff}
.btn--sm{min-height:40px; padding:8px 16px; font-size:.9375rem}
.btn svg{width:20px; height:20px; flex:none}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--space-3)}
@media (max-width:479px){ .actions .btn{flex:1 1 100%} }
.link-more{font-weight:600; display:inline-flex; align-items:center; gap:6px}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--rule)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:#fff}
.site-header .bar{display:flex; align-items:center; gap:var(--space-3); min-height:72px}
.brand{display:block; flex:none; padding:6px 0}
.brand img{height:40px; width:auto}
.nav{margin-left:auto}
.nav ul{list-style:none; display:flex; gap:clamp(12px,1.6vw,26px); align-items:center}
.nav a{color:var(--ink); text-decoration:none; font-weight:500; font-size:.96rem; padding:10px 2px; display:inline-block}
.nav a:hover{color:var(--blue)}
.nav a[aria-current="page"],.nav a[data-section="true"]{color:var(--blue); box-shadow:inset 0 -2px 0 var(--blue)}
.header-cta{display:flex; align-items:center; gap:12px}
.signin{color:var(--ink); font-weight:500; text-decoration:none; font-size:.96rem; padding:10px 4px}
.signin:hover{color:var(--blue)}
.menu-btn{display:none}
@media (max-width:1079px){
  .menu-btn{display:inline-flex; margin-left:auto; align-items:center; gap:8px; min-height:44px; padding:8px 14px; border:1px solid var(--rule); background:#fff; color:var(--ink); border-radius:var(--radius-md); font:600 .95rem var(--font-brand); cursor:pointer}
  .menu-btn svg{width:20px; height:20px}
  .header-cta .signin{display:none}
  .header-cta{order:3}
  .nav{position:fixed; left:0; right:0; top:calc(73px + env(safe-area-inset-top,0px)); bottom:0; background:#fff; padding:var(--space-2) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom,0px)); overflow-y:auto; margin:0; display:none; border-top:1px solid var(--rule)}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column; align-items:stretch; gap:0}
  .nav li{border-bottom:1px solid var(--rule)}
  .nav a{display:block; padding:16px 2px; font-size:1.125rem}
  .nav a[aria-current="page"],.nav a[data-section="true"]{box-shadow:none}
  .nav .nav-extra{display:flex; flex-direction:column; gap:12px; margin-top:var(--space-3)}
  .nav .nav-extra .btn{width:100%}
  body.nav-open{overflow:hidden}
}
@media (min-width:1080px){ .nav .nav-extra{display:none} }
@media (max-width:479px){ .header-cta .btn{display:none} .brand img{height:34px} }

/* ---------- announcement ---------- */
.notice{background:var(--mint); color:var(--ink); font-size:.95rem}
.notice .wrap{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding-block:10px}
.notice img{height:20px; width:auto}
.notice a{color:var(--ink); font-weight:600}

/* ---------- hero (key visual on sky) ----------
   Brand rule: copy sits in the open sky area above the hands. Copy is stacked on the sky ground and the
   key visual follows, its own sky top blending into the panel, so text never crosses the hands. */
.hero{background:var(--sky-photo); overflow:hidden}
.hero__inner{padding-block:clamp(40px,6vw,80px) 0; position:relative; z-index:1}
.hero__copy{max-width:820px}
.hero h1{color:var(--blue)}
.hero .t-lead{color:var(--ink); margin-top:var(--space-3); font-weight:500; max-width:56ch}
.hero__meta{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:var(--space-3); color:var(--ink); font-weight:500; font-size:.95rem}
.hero__media{position:relative; margin-top:clamp(8px,2vw,24px); aspect-ratio:16/6.2; max-height:600px; width:100%; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%); mask-image:linear-gradient(to bottom,transparent 0,#000 14%)}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:50% 78%}
@media (max-width:899px){ .hero__media{aspect-ratio:16/11; margin-top:8px} .hero__media img{object-position:62% 60%} }
@media (min-width:900px){ .hero__copy .actions{display:inline-flex; margin-right:24px} .hero__meta{display:inline-flex} }
.marks{display:flex; align-items:center; gap:10px}
.marks span{display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:6px; height:36px; padding:0 10px}
.marks img{height:22px; width:auto}

/* ---------- inner page hero ---------- */
.page-hero{background:var(--sky); padding-block:clamp(44px,6vw,80px) clamp(40px,5vw,64px)}
.page-hero h1{color:var(--blue)}
.page-hero .t-lead{margin-top:var(--space-2)}
.page-hero--plain{background:var(--surface-alt)}
.page-hero .split{align-items:end}
.crumbs{font-size:.875rem; margin-bottom:var(--space-3)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:4px 8px}
.crumbs li+li::before{content:"/"; color:var(--ink-muted); margin-right:8px}
.crumbs a{color:var(--ink); }
.crumbs [aria-current]{color:var(--ink-muted)}
.page-hero__media img{border-radius:var(--radius-md)}

/* ---------- award band ---------- */
.award{background:var(--blue); color:#fff}
.award .wrap{display:grid; gap:var(--space-2) var(--space-4); padding-block:clamp(28px,4vw,40px); align-items:center}
@media (min-width:860px){ .award .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto} }
.award__badge{display:flex; align-items:center; gap:14px}
.award__badge svg{width:52px; height:52px; flex:none}
.award__title{font-weight:900; font-size:clamp(1.25rem,1rem + 1vw,1.75rem); line-height:1.1; color:#fff}
.award p{margin:0; color:#fff}
.award a{color:#fff; font-weight:600}

/* ---------- logo wall ---------- */
.logos{list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:var(--space-2)}
.logos li{background:#fff; border:1px solid var(--rule); border-radius:var(--radius-md); height:92px; display:flex; align-items:center; justify-content:center; padding:12px}
.logos img{max-height:56px; width:auto; max-width:100%; object-fit:contain}
.logos-more{margin-top:var(--space-3)}
.logos[data-collapsed="true"] li:nth-child(n+13){display:none}
@media (min-width:1024px){ .logos[data-collapsed="true"] li:nth-child(n+13){display:flex} .logos-more{display:none} }

/* ---------- benefit trio (circle photos) ---------- */
.benefit{display:grid; gap:var(--space-2); align-content:start}
.benefit img{width:min(220px,62%); aspect-ratio:1; border-radius:50%; margin-bottom:var(--space-1)}
.benefit h3{font-weight:900; font-size:1.5rem}
.benefit .sub{font-weight:600; margin:0}

/* ---------- cards ---------- */
.card{background:#fff; border:1px solid var(--rule); border-radius:var(--radius-md); padding:var(--space-3); display:flex; flex-direction:column; gap:var(--space-1)}
.section--alt .card,.section--mint .card{border-color:transparent}
.card h3{font-size:1.2rem; font-weight:700}
.card p{margin:0}
.card .icon{width:44px; height:44px; color:var(--blue); margin-bottom:var(--space-1)}
.card--link{text-decoration:none; color:inherit}
.card--link:hover{border-color:var(--blue)}
.card--link:hover h3{text-decoration:underline}

/* icon list */
.feature-list{list-style:none; display:grid; gap:var(--space-3)}
@media (min-width:640px){ .feature-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
.feature-list li{display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start}
.feature-list svg{width:36px; height:36px; color:var(--blue)}
.feature-list h3{font-size:1.125rem; font-weight:700; margin-bottom:4px}
.feature-list p{margin:0}

/* numbered reasons (brand device: blue discs) */
.reasons{list-style:none; display:grid; gap:var(--space-3) var(--space-4); counter-reset:r}
@media (min-width:760px){ .reasons{grid-template-columns:repeat(2,minmax(0,1fr))} }
.reasons li{display:grid; grid-template-columns:48px 1fr; gap:16px; counter-increment:r}
.reasons li::before{content:counter(r); width:48px; height:48px; border-radius:50%; background:var(--blue); color:#fff; font-weight:900; font-size:1.3rem; display:flex; align-items:center; justify-content:center}
.reasons h3{font-weight:900; font-size:1.2rem; color:var(--ink)}
.reasons .sub{font-weight:600; margin:4px 0 6px; color:var(--ink)}
.reasons p{margin:0}

/* steps */
.steps{list-style:none; display:grid; gap:var(--space-3); counter-reset:s}
@media (min-width:760px){ .steps--4{grid-template-columns:repeat(4,minmax(0,1fr))} .steps--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.steps li{counter-increment:s; border-top:3px solid var(--blue); padding-top:var(--space-2)}
.steps li::before{content:"Step " counter(s); display:block; font-weight:600; font-size:.875rem; color:var(--blue); margin-bottom:6px}
.steps h3{font-size:1.15rem; font-weight:700; color:var(--ink); margin-bottom:6px}
.steps p{margin:0}

/* ---------- pricing ---------- */
.plans{display:grid; gap:var(--space-3)}
@media (min-width:880px){ .plans{grid-template-columns:repeat(3,minmax(0,1fr))} .plans--2{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:920px} }
.plan{background:#fff; border:1px solid var(--rule); border-radius:var(--radius-md); padding:clamp(22px,3vw,32px); display:flex; flex-direction:column; gap:var(--space-2)}
.plan--feature{border:2px solid var(--blue)}
.plan__tag{align-self:flex-start; background:var(--mint); color:var(--ink); font-weight:600; font-size:.8125rem; padding:4px 10px; border-radius:999px}
.plan h3{font-size:1.35rem; font-weight:900}
.price{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; color:var(--blue)}
.price strong{font-weight:900; font-size:clamp(2rem,1.6rem + 1.4vw,2.6rem); line-height:1; letter-spacing:-.01em}
.price span{color:var(--ink); font-weight:500}
.plan .mdr{font-weight:600; margin:0}
.plan ul{list-style:none; display:grid; gap:10px; margin-top:4px}
.plan li{display:grid; grid-template-columns:20px 1fr; gap:10px}
.plan li svg{width:20px; height:20px; color:var(--green); margin-top:2px}
.plan .btn{margin-top:auto}
.plan .plan__fine{font-size:.875rem; color:var(--ink-muted); margin:0}

/* ---------- comparison table (green panel) ---------- */
.compare-wrap{overflow-x:auto; border-radius:var(--radius-md); -webkit-overflow-scrolling:touch}
.compare{width:100%; min-width:560px; border-collapse:collapse; background:#fff; font-size:1rem}
.compare th,.compare td{padding:14px 18px; text-align:left; vertical-align:top}
.compare thead th{background:var(--blue); color:#fff; font-weight:700; font-size:1.05rem}
.compare tbody tr:nth-child(even){background:var(--mint)}
.compare td:first-child{font-weight:600}
.compare td:first-child svg{width:18px; height:18px; color:var(--blue); vertical-align:-3px; margin-right:8px}

/* ---------- testimonials ---------- */
.quotes{display:grid; gap:var(--space-3)}
@media (min-width:880px){ .quotes{grid-template-columns:repeat(3,minmax(0,1fr))} }
.quote{margin:0; background:#fff; border-radius:var(--radius-md); padding:var(--space-3); display:flex; flex-direction:column; gap:var(--space-2)}
.quote blockquote{margin:0; font-weight:600; font-size:1.15rem; line-height:1.4; color:var(--ink)}
.quote figcaption{margin-top:auto; font-size:.95rem}
.quote figcaption strong{display:block; color:var(--ink)}
.quote .mark{width:32px; height:32px; color:var(--blue)}

/* ---------- video facade ---------- */
.video{position:relative; aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden; background:#000}
.video img,.video iframe{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0}
.video button{position:absolute; inset:0; width:100%; border:0; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0}
.video button span{display:inline-flex; align-items:center; gap:10px; background:var(--blue); color:#fff; font:600 1rem var(--font-brand); padding:12px 20px; border-radius:var(--radius-md)}
.video button:hover span{background:var(--blue-press)}
.video button svg{width:22px; height:22px}

/* ---------- FAQ (native details) ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font-weight:600; font-size:1.075rem; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:translateY(-70%) rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--blue)}
.faq .answer{padding:0 0 22px; max-width:70ch}
.faq .answer ul{padding-left:1.2em; display:grid; gap:6px; margin-bottom:1em}
.faq-group+.faq-group{margin-top:var(--space-4)}
.faq-group h2{font-size:1.4rem; font-weight:700; margin-bottom:var(--space-2)}

/* ---------- prose (articles, legal) ---------- */
.prose{max-width:70ch}
.prose h2:not(.t-h2){font-size:1.5rem; font-weight:700; margin:2em 0 .6em}
.prose h3{font-size:1.15rem; font-weight:700; margin:1.6em 0 .5em; color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em; margin:0 0 1em; display:grid; gap:6px}
.prose table{border-collapse:collapse; width:100%; margin:1em 0 1.5em; font-size:.95rem}
.prose th,.prose td{border-bottom:1px solid var(--rule); padding:10px 8px; text-align:left; vertical-align:top}
.prose th{color:var(--blue)}
.prose .table-scroll{overflow-x:auto}
.callout{background:var(--surface-alt); border-radius:var(--radius-md); padding:var(--space-3); margin:1.5em 0}
.callout p:last-child{margin:0}

/* disclaimer (brand: red 1px rule, square box) */
.disclaimer{border:1px solid var(--red); padding:var(--space-2) var(--space-3); font-size:.8125rem; line-height:1.55; color:var(--ink-muted); background:#fff}
.disclaimer strong{color:var(--ink)}

/* ---------- article layout (help) ---------- */
.article-layout{display:grid; gap:var(--space-4)}
@media (min-width:960px){ .article-layout{grid-template-columns:minmax(0,1fr) 300px} }
.aside-box{background:var(--surface-alt); border-radius:var(--radius-md); padding:var(--space-3); position:sticky; top:96px}
.aside-box h2{font-size:1.1rem; font-weight:700; margin-bottom:var(--space-1)}
.aside-box ul{list-style:none; display:grid; gap:8px; margin:var(--space-1) 0 var(--space-2)}
.topic-list{list-style:none; display:grid; gap:0; border-top:1px solid var(--rule)}
.topic-list a{display:flex; flex-direction:column; gap:4px; padding:18px 0; border-bottom:1px solid var(--rule); color:var(--ink); text-decoration:none; font-weight:600; font-size:1.06rem}
.topic-list a:hover{color:var(--blue)}
.topic-list a span{color:var(--ink-muted); font-weight:450; font-size:.95rem}
.help-search{display:flex; flex-wrap:wrap; gap:8px; max-width:560px; margin-top:var(--space-3)}
.help-search input{flex:1 1 220px; min-width:0; min-height:48px; border:1px solid #8a8a8a; border-radius:var(--radius-md); padding:10px 14px; font:500 1rem var(--font-brand); background:#fff; color:var(--ink)}
.help-results{list-style:none; margin-top:var(--space-2); display:grid; gap:6px}
.help-results[hidden]{display:none}

/* ---------- news ---------- */
.news-list{display:grid; gap:var(--space-4)}
.news-item{display:grid; gap:var(--space-3); padding-bottom:var(--space-4); border-bottom:1px solid var(--rule)}
@media (min-width:820px){ .news-item{grid-template-columns:300px 1fr} }
.news-item img{border-radius:var(--radius-md); aspect-ratio:16/10; object-fit:cover; width:100%}
.news-item h2,.news-item h3{font-size:1.4rem; font-weight:700}
.news-meta{font-size:.9rem; color:var(--ink-muted); margin-bottom:6px}

/* events */
.occasions{list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--space-3) var(--space-2)}
.occasions li{display:grid; gap:10px; justify-items:start; font-weight:600}
.occasions img{width:100%; aspect-ratio:1; border-radius:50%; object-fit:cover}
.circles{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; align-items:center}
.circles img{border-radius:50%; aspect-ratio:1; object-fit:cover; width:100%}
.circles img:nth-child(1){grid-column:1/4}
.circles img:nth-child(2){grid-column:4/7; margin-top:30%}
.circles img:nth-child(3){grid-column:2/5; margin-top:-22%}
.case{display:grid; gap:var(--space-3); padding-block:var(--space-4); border-top:1px solid var(--rule)}
@media (min-width:860px){ .case{grid-template-columns:280px 1fr} }
.case img{border-radius:var(--radius-md); aspect-ratio:1; object-fit:cover}
.case h3{font-size:1.5rem; font-weight:900}
.case ul{padding-left:1.2em; display:grid; gap:6px}

/* payment flow diagram */
.flow{list-style:none; display:grid; gap:10px; counter-reset:f}
@media (min-width:900px){ .flow{grid-template-columns:repeat(5,minmax(0,1fr)); gap:0} }
.flow li{background:#fff; border-radius:var(--radius-md); padding:var(--space-2); position:relative}
@media (min-width:900px){ .flow li{margin-right:24px} .flow li:not(:last-child)::after{content:""; position:absolute; right:-18px; top:50%; width:12px; height:12px; border-top:2px solid var(--blue); border-right:2px solid var(--blue); transform:translateY(-50%) rotate(45deg)} .flow li:last-child{margin-right:0} }
.flow strong{display:block; color:var(--blue); font-weight:700; margin-bottom:4px}
.flow p{margin:0; font-size:.95rem}

/* stat cards */
.stats{display:grid; gap:var(--space-3); grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{background:#fff; border-radius:var(--radius-md); padding:var(--space-3)}
.stat strong{display:block; color:var(--blue); font-weight:900; font-size:clamp(2rem,1.6rem + 1.6vw,2.8rem); line-height:1}
.stat span{display:block; margin-top:8px; font-weight:600}
.stat small{display:block; margin-top:4px; color:var(--ink-muted); font-size:.8125rem}

/* timeline */
.timeline{list-style:none; border-left:2px solid var(--blue); margin-left:6px; display:grid; gap:var(--space-3)}
.timeline li{padding-left:var(--space-3); position:relative}
.timeline li::before{content:""; position:absolute; left:-8px; top:6px; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--blue)}
.timeline time{display:block; font-weight:700; color:var(--blue)}

/* team */
.team{list-style:none; display:grid; gap:var(--space-2); grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.team li{background:#fff; border-radius:var(--radius-md); padding:var(--space-3)}
.team strong{display:block; font-size:1.1rem}
.team span{color:var(--ink-muted)}

/* partner */
.partner{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); background:#fff; border:1px solid var(--rule); border-radius:var(--radius-md); padding:var(--space-3)}
.partner .t-label{font-size:1rem}
.partner img{height:64px; width:auto}

/* contact */
.contact-grid{display:grid; gap:var(--space-4)}
@media (min-width:900px){ .contact-grid{grid-template-columns:1fr 1fr} }
.contact-list{list-style:none; display:grid; gap:var(--space-3)}
.contact-list li{display:grid; grid-template-columns:40px 1fr; gap:14px}
.contact-list svg{width:28px; height:28px; color:var(--blue)}
.contact-list strong{display:block}
.form{display:grid; gap:var(--space-2); background:var(--surface-alt); padding:clamp(20px,3vw,32px); border-radius:var(--radius-md)}
.field{display:grid; gap:6px}
.field label{font-weight:600}
.field input,.field select,.field textarea{min-height:48px; border:1px solid #8a8a8a; border-radius:var(--radius-md); padding:10px 14px; font:500 1rem var(--font-brand); background:#fff; color:var(--ink); width:100%}
.field textarea{min-height:140px; resize:vertical}
.field .hint{font-size:.875rem; color:var(--ink-muted)}
.hp{position:absolute; left:-9999px}
.consent{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:.9rem}
.consent input{width:20px; height:20px; margin-top:2px}

/* ---------- closing CTA + wave + footer ---------- */
.closing{background:var(--green); position:relative; overflow:hidden}
.closing .wrap{padding-block:clamp(56px,7vw,88px) calc(min(22.1vw, 420px) + 24px); position:relative; z-index:1}
.closing h2{color:var(--ink); max-width:18ch}
.closing p{color:var(--ink); font-weight:600; font-size:1.15rem; max-width:52ch; margin-top:var(--space-2)}
.closing .wave{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:auto; max-height:420px; object-fit:cover; object-position:50% 100%; z-index:0; pointer-events:none}
.closing .btn--secondary{--bd:#fff}
.site-footer{background:#fff; padding-block:var(--space-4) var(--space-3); font-size:.95rem}
.footer-grid{display:grid; gap:var(--space-4) var(--space-3)}
@media (min-width:760px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr} }
@media (min-width:1080px){ .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr} }
.site-footer h2{font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:var(--space-2)}
.site-footer ul{list-style:none; display:grid; gap:10px}
.site-footer a{color:var(--ink); text-decoration:none}
.site-footer a:hover{color:var(--blue); text-decoration:underline}
.footer-brand img{height:64px; width:auto; margin-bottom:var(--space-2)}
.footer-brand p{max-width:40ch}
.social{display:flex; gap:10px; margin-top:var(--space-2)}
.social a{width:44px; height:44px; border:1px solid var(--rule); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--ink)}
.social a:hover{border-color:var(--blue); color:var(--blue)}
.social svg{width:20px; height:20px}
.footer-base{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-3); align-items:center; justify-content:space-between; border-top:1px solid var(--rule); margin-top:var(--space-4); padding-top:var(--space-3); color:var(--ink-muted); font-size:.875rem}
.footer-base img{height:20px; width:auto}
.footer-legal{display:flex; flex-wrap:wrap; gap:8px 18px}
.footer-legal a{color:var(--ink-muted)}
.footer-disclaimer{margin-top:var(--space-3)}

/* WhatsApp float */
.wa-float{position:fixed; right:max(16px, env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:40; width:56px; height:56px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; color:#fff}
.wa-float svg{width:30px; height:30px}
.wa-float:hover{background:#1ebe5a}

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important; animation:none!important; scroll-behavior:auto!important} }
@media print{ .site-header,.wa-float,.closing,.notice{display:none} }
.marks img.mark-visa{height:15px}
[data-align="start"]{align-items:start}
.feature-list[data-cols="1"]{grid-template-columns:1fr}
[data-flush]{margin-top:0!important}
[data-spaced]{margin-top:var(--space-3)}
.video + .t-caption{margin-top:10px}
.notice .wrap p{margin:0}

svg.icon{width:24px; height:24px; flex:none}
.link-more svg,.btn svg.icon{width:20px; height:20px}
.card svg.icon{width:40px; height:40px; color:var(--blue)}
.contact-list svg.icon{width:28px; height:28px; color:var(--blue)}
.device-shot{max-width:340px; margin-inline:auto}
@media (min-width:900px){ .device-shot{max-width:380px} }
.quote svg.mark{width:32px; height:32px}
.nav .nav-extra a.btn{display:flex; justify-content:center; color:var(--fg); padding:12px 22px; font-size:1rem; font-weight:600; box-shadow:none}
.nav .nav-extra a.btn:hover{color:var(--fg)}
.section--mint .t-caption{color:var(--ink)}
.award :focus-visible,.section--blue :focus-visible{outline-color:#fff}
.prose .t-h2{margin-bottom:.5em}

/* =====================================================================
   v3 refresh — reference-inspired layout (rounded inset panels, pills,
   bento, glass UI fragments) on the unchanged Flopay brand tokens.
   ===================================================================== */
:root{ --radius-lg:28px; --radius-card:20px; --pill:999px; --navy:#1f4c80; }
.btn{border-radius:var(--pill); padding-inline:22px}
.btn--sm{padding-inline:18px}
.btn--arrow{padding-right:6px; gap:14px}
.btn--arrow .disc{width:36px; height:36px; border-radius:50%; background:var(--blue); color:#fff; display:inline-flex; align-items:center; justify-content:center}
.btn--arrow .disc svg{width:18px; height:18px}
.btn--dark{--bg:var(--ink); --fg:#fff; --bd:var(--ink)}
.btn--dark:hover{--bg:#1f1f1f; --bd:#1f1f1f}
.pill-label{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--rule); border-radius:var(--pill); padding:6px 14px; font-size:.875rem; font-weight:500; color:var(--ink); background:#fff}
.pill-label--new{border:0; background:#fff; padding:4px 12px 4px 4px}
.pill-label--new b{background:var(--blue); color:#fff; border-radius:var(--pill); padding:3px 10px; font-weight:600; font-size:.8rem}

/* header: pill nav */
.site-header{border-bottom:0; background:#fff}
.site-header .bar{min-height:80px}
@media (min-width:1080px){
  .nav ul{gap:4px}
  .nav a{padding:8px 16px; border-radius:var(--pill); border:1px solid transparent}
  .nav a:hover{background:var(--surface-alt); color:var(--ink)}
  .nav a[aria-current="page"],.nav a[data-section="true"]{box-shadow:none; border-color:var(--rule); color:var(--ink); background:#fff}
  .nav{margin-inline:auto}
  .signin{border:1px solid var(--rule); border-radius:var(--pill); padding:9px 18px}
  .signin:hover{border-color:var(--blue)}
}

/* inset rounded panels instead of full-bleed bands */
.inset{margin-inline:max(12px, calc((100% - 1376px) / 2)); border-radius:var(--lg, 28px)}
.section--alt,.section--mint,.section--green,.section--blue{margin-inline:max(12px, calc((100% - 1376px) / 2)); border-radius:var(--radius-lg)}
.card,.plan,.quote,.stat,.team li,.aside-box,.form,.callout,.partner,.flow li,.logos li{border-radius:var(--radius-card)}
.compare-wrap{border-radius:var(--radius-card)}
.news-item img,.case img,.page-hero__media img{border-radius:var(--radius-card)}

/* inner page hero as rounded card */
.page-hero{background:transparent; padding:0 0 8px}
.page-hero>.wrap{max-width:1376px; padding:clamp(28px,4vw,56px) clamp(20px,4vw,56px); background:var(--sky); border-radius:var(--radius-lg); width:calc(100% - 24px)}
.page-hero--plain>.wrap{background:var(--surface-alt)}

/* ---------------- HOME v3 ---------------- */
.hx{padding:0 0 16px}
.hx__card{position:relative; margin-inline:max(12px, calc((100% - 1376px) / 2)); border-radius:var(--radius-lg); background:var(--sky-photo); overflow:hidden; min-height:clamp(640px, 62vw, 820px); isolation:isolate}
.hx__top{position:relative; z-index:2; display:grid; gap:24px 48px; padding:clamp(28px,4vw,56px) clamp(20px,4vw,56px) 0}
@media (min-width:960px){ .hx__top{grid-template-columns:1.25fr .75fr; align-items:end} }
.hx h1{color:var(--blue); font-weight:900; font-size:clamp(2.6rem, 1.4rem + 4.2vw, 5rem); line-height:.96; letter-spacing:-.025em}
.hx__side p{color:var(--ink); font-weight:500; font-size:1.05rem; line-height:1.5; margin:14px 0 18px; max-width:42ch}
.hx__side .actions{margin-top:0}
.hx__media{position:absolute; inset:auto 0 0 0; height:66%; z-index:0; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%); mask-image:linear-gradient(to bottom,transparent 0,#000 16%)}
.hx__media img{width:100%; height:100%; object-fit:cover; object-position:50% 72%}
.glass{background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); border:1px solid rgba(255,255,255,.8); border-radius:var(--radius-card); color:var(--ink)}
.hx__tx{position:absolute; z-index:2; right:clamp(16px,24%,380px); bottom:clamp(24px,7%,72px); width:min(300px,78%); padding:14px 16px; display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:center}
.hx__tx .ok{width:40px; height:40px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center}
.hx__tx .ok svg{width:22px; height:22px}
.hx__tx strong{display:block; font-size:1rem}
.hx__tx span{font-size:.85rem; color:var(--ink)}
.hx__tx .amt{font-weight:700; font-size:1rem; color:var(--ink); white-space:nowrap}
.hx__trust{position:absolute; z-index:2; left:clamp(16px,3vw,40px); bottom:clamp(16px,3vw,36px); padding:8px 14px 8px 8px; display:flex; align-items:center; gap:10px; font-size:.875rem; font-weight:500; border-radius:var(--pill)}
.hx__trust .faces{display:flex}
.hx__trust .faces img{width:34px; height:34px; border-radius:50%; background:#fff; object-fit:contain; border:2px solid #fff; margin-left:-8px; padding:2px}
.hx__trust .faces img:first-child{margin-left:0}
.hx__talk{position:absolute; z-index:2; right:clamp(16px,3vw,40px); bottom:clamp(16px,3vw,36px)}
@media (max-width:959px){
  .hx__card{min-height:0; display:flex; flex-direction:column}
  .hx__media{position:relative; height:auto; aspect-ratio:3/3.4; margin-top:-40px}
  .hx__media img{object-position:50% 70%}
  .hx__tx{right:16px; bottom:84px; width:auto; left:16px}
  .hx__talk{display:none}
  .hx__trust{bottom:20px}
}

/* trust strip */
.strip{display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; justify-content:space-between; padding-block:28px}
.strip .lead{font-size:.9rem; color:var(--ink-muted); display:block; margin-bottom:8px}
.checks{display:flex; flex-wrap:wrap; gap:10px 22px; list-style:none}
.checks li{display:flex; align-items:center; gap:8px; font-weight:500; font-size:.95rem}
.checks li svg{width:20px; height:20px; background:var(--blue); color:#fff; border-radius:50%; padding:3px}

/* stats panel (blue) */
.statsx{background:var(--blue); color:#fff; border-radius:var(--radius-lg); padding:clamp(14px,1.6vw,20px); display:grid; gap:12px}
@media (min-width:900px){ .statsx{grid-template-columns:1.15fr 1fr 1fr 1fr} }
@media (min-width:600px) and (max-width:899px){ .statsx{grid-template-columns:1fr 1fr} }
.statsx .lead-tile{background:var(--navy); border-radius:var(--radius-card); padding:24px}
.statsx .lead-tile strong{font-size:2.6rem; font-weight:900; display:block; line-height:1}
.statsx .lead-tile p{margin:10px 0 0; font-size:.95rem}
.statsx .lead-tile .big{font-weight:600; font-size:1.1rem; margin-top:8px}
.statsx .s{padding:24px; border-left:1px solid rgba(255,255,255,.28)}
@media (max-width:899px){ .statsx .s{border-left:0; border-top:1px solid rgba(255,255,255,.28)} }
.statsx .s strong{font-weight:400; font-size:clamp(2.4rem, 1.8rem + 2vw, 3.4rem); display:block; line-height:1; letter-spacing:-.02em}
.statsx .s p{margin:12px 0 0; font-size:1rem}
.statsx .s small{display:block; margin-top:6px; font-size:.8rem; opacity:.9}

/* statement header */
.lede{display:grid; gap:20px 48px; margin-bottom:clamp(28px,4vw,48px)}
@media (min-width:900px){ .lede{grid-template-columns:1fr 1.6fr; align-items:start} }
.lede .statement{font-weight:500; font-size:clamp(1.4rem, 1rem + 1.4vw, 2.2rem); line-height:1.25; letter-spacing:-.01em; color:var(--ink); margin:0}
.lede .statement em{font-style:normal; color:var(--blue)}

/* bento */
.bento{display:grid; gap:16px}
@media (min-width:900px){ .bento{grid-template-columns:repeat(3,minmax(0,1fr))} }
.bento>*{border-radius:var(--radius-lg); min-height:320px; position:relative; overflow:hidden}
.b-blue{background:var(--blue); color:#fff; padding:28px; display:flex; flex-direction:column; gap:18px}
.b-blue svg.icon{width:40px; height:40px}
.b-blue p{font-size:1.45rem; line-height:1.3; font-weight:500; margin:0}
.b-blue p span{color:var(--mint)}
.toggle{margin-top:auto; display:inline-flex; align-items:center; gap:12px; font-weight:500}
.toggle i{width:52px; height:30px; border-radius:var(--pill); background:var(--green); position:relative; display:inline-block}
.toggle i::after{content:""; position:absolute; right:4px; top:4px; width:22px; height:22px; border-radius:50%; background:#fff}
.b-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.b-photo .glass{position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); padding:10px 18px; border-radius:var(--pill); font-weight:600; white-space:nowrap}
.b-data{background:var(--surface-alt); padding:28px; display:flex; flex-direction:column}
.b-data strong.n{font-size:clamp(3rem,2rem + 2vw,4rem); font-weight:400; line-height:1; letter-spacing:-.03em; color:var(--ink)}
.b-data .t{font-weight:600; margin-top:6px}
.b-data .c{font-size:.875rem; color:var(--ink-muted); margin:4px 0 0}
.dots{list-style:none; margin-top:auto; display:grid; gap:12px; padding-top:24px}
.dots li{display:grid; grid-template-columns:92px 1fr 34px; align-items:center; gap:10px; font-size:.875rem}
.dots b{height:14px; border-radius:var(--pill); background:radial-gradient(circle, var(--blue) 5px, transparent 5.5px) 0 50%/16px 14px repeat-x}
.dots em{font-style:normal; text-align:right; font-weight:600}

/* isometric marks panel */
.iso{background:var(--blue); color:#fff; border-radius:var(--radius-lg); position:relative; overflow:hidden; min-height:clamp(360px,36vw,460px); display:flex; align-items:flex-end}
.iso__copy{position:relative; z-index:2; padding:clamp(24px,3.5vw,44px); max-width:440px}
.iso__copy h3{color:#fff; font-size:clamp(1.6rem,1.2rem + 1.2vw,2.3rem); font-weight:600; line-height:1.12}
.iso__copy p{margin:12px 0 0; font-size:1rem}
.iso__grid{position:absolute; right:-6%; top:-18%; width:72%; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; transform:rotate(-30deg) skewX(20deg) scaleY(.92); transform-origin:center}
.iso__grid span{aspect-ratio:1.35; border-radius:22px; background:#fff; display:flex; align-items:center; justify-content:center; padding:14%}
.iso__grid span.o{background:rgba(255,255,255,.14); border:1.5px dashed rgba(255,255,255,.45)}
.iso__grid span.b{background:#4f86c6}
.iso__grid span.g{background:var(--green)}
.iso__grid img{max-width:100%; max-height:100%; width:auto; height:auto}
.iso__grid svg{width:58%; height:58%; color:#fff}
.iso__grid span:not(.b):not(.g):not(.o) svg{color:var(--blue)}
@media (max-width:759px){ .iso{flex-direction:column; align-items:stretch} .iso__grid{position:relative; right:auto; top:auto; width:130%; margin:-10% 0 -6% -15%} }

.feat3{display:grid; gap:16px; margin-top:16px}
@media (min-width:860px){ .feat3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.feat3 a{border:1px solid var(--rule); border-radius:var(--radius-lg); padding:24px 24px 0; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; overflow:hidden}
.feat3 a:hover{border-color:var(--blue)}
.feat3 h3{font-size:1.3rem; font-weight:600; color:var(--ink); line-height:1.2}
.feat3 p{color:var(--ink-muted); margin:8px 0 18px; font-size:.95rem}
.feat3 .pic{margin-top:auto; margin-inline:-24px; height:220px; overflow:hidden; background:var(--surface-alt)}
.feat3 .pic img{width:100%; height:100%; object-fit:cover}

/* membership-style pricing */
.member{display:grid; gap:16px; align-items:stretch}
@media (min-width:960px){ .member{grid-template-columns:1.25fr 1fr} }
.mcard{background:var(--blue); color:#fff; border-radius:var(--radius-lg); padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; gap:14px}
.mcard .row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:12px}
.mcard .tag{background:rgba(255,255,255,.18); border-radius:var(--pill); padding:5px 12px; font-size:.85rem; font-weight:500; display:inline-block}
.mcard h3{color:#fff; font-size:clamp(1.8rem,1.3rem + 1.4vw,2.6rem); font-weight:600; margin-top:12px}
.mcard .amt{font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem); font-weight:400; letter-spacing:-.02em; line-height:1}
.mcard .amt small{font-size:1rem; margin-left:4px}
.chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none}
.chips li{border:1px solid rgba(255,255,255,.55); border-radius:var(--pill); padding:6px 12px; font-size:.9rem}
.mcard .actions{margin-top:auto}
.mside{display:flex; flex-direction:column; gap:12px}
.mside .statement{font-weight:500; font-size:clamp(1.5rem,1.1rem + 1.2vw,2.2rem); line-height:1.2; margin:14px 0 6px}
.mrow{display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center; border:1px solid var(--rule); border-radius:var(--radius-card); padding:18px 20px; text-decoration:none; color:var(--ink)}
.mrow:hover{border-color:var(--blue)}
.mrow strong{font-size:1.1rem}
.mrow span{color:var(--ink-muted); font-size:.9rem; grid-column:1}
.mrow b{grid-row:1/3; grid-column:2; color:var(--blue); font-weight:700; text-align:right}

/* case-study row */
.casex{background:var(--surface-alt); border-radius:var(--radius-lg); padding:16px; display:grid; gap:20px; align-items:center}
@media (min-width:960px){ .casex{grid-template-columns:1.05fr 1fr .95fr} }
.casex .video{border-radius:var(--radius-card)}
.casex__text{padding:8px}
.casex__text h2{font-size:clamp(1.6rem,1.2rem + 1vw,2.2rem); font-weight:600; color:var(--ink); line-height:1.15}
.casex__text h2 span{color:var(--blue)}
.casex__text p{margin:12px 0}
.casex__list{list-style:none; display:grid; gap:10px}
.casex__list a{display:grid; grid-template-columns:44px 1fr 20px; gap:12px; align-items:center; background:#fff; border-radius:16px; padding:12px; color:var(--ink); text-decoration:none}
.casex__list a:hover{outline:1px solid var(--blue)}
.casex__list .ic{width:44px; height:44px; border-radius:12px; background:var(--mint); display:flex; align-items:center; justify-content:center; color:var(--blue)}
.casex__list .ic svg{width:22px; height:22px}
.casex__list strong{display:block; font-size:.95rem}
.casex__list small{color:var(--ink-muted)}
.casex__list a>svg{width:18px; height:18px; color:var(--blue)}

/* quotes on surface */
.quote{border:1px solid var(--rule)}

/* closing CTA becomes rounded panel */
.closing{margin:0 max(12px, calc((100% - 1376px) / 2)) 16px; border-radius:var(--radius-lg)}
.closing .wrap{padding-bottom:calc(min(16vw, 300px) + 24px)}
.site-footer{padding-top:var(--space-3)}
.dots b.w1{width:16px} .dots b.w2{width:64px} .dots b.w3{width:112px}
.head[data-center]{margin-inline:auto; text-align:center; justify-items:center}
.head[data-center] .t-lead{margin-inline:auto}
.strip img{height:44px; width:auto}
/* v3 fixes */
@media (min-width:960px){ .hx__top{grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr)} }
.hx h1{font-size:clamp(2.5rem, 1.2rem + 3.6vw, 4.4rem)}
.hx h1 .ln{display:block}
@media (min-width:600px){ .hx h1 .ln{white-space:nowrap} }
.statsx a{color:#fff}
.hx__tx{width:min(330px,82%)}
.hx__tx strong{white-space:nowrap}
.dots li{grid-template-columns:92px 1fr 56px}
.dots em{white-space:nowrap}
.b-photo .glass{top:auto; bottom:20px; transform:translateX(-50%)}
.closing .wrap{padding-bottom:calc(min(21.5vw, 296px) + 40px)}
.closing .wave{max-height:296px}
.mcard .row{flex-wrap:nowrap} @media (max-width:520px){ .mcard .row{flex-wrap:wrap} }
@media (max-width:959px){
  .hx__media{aspect-ratio:3/3.6; margin-top:-24px}
  .hx__media img{object-position:50% 78%}
  .hx__trust{display:none}
  .hx__tx{left:auto; right:12px; bottom:12px; width:auto; max-width:calc(100% - 24px); grid-template-columns:34px auto auto; padding:10px 12px}
  .hx__tx .ok{width:34px; height:34px}
}
@media (max-width:759px){ .iso__grid{margin:-14% 0 8% -15%} }
/* hero looping video */
:root{ --sky-video:#b6daf5; /* sampled from the hero video's studio ground; blue headline 3.7:1 (large text), ink 8.3:1 */ }
.hx__card{background:var(--sky-video)}
.hx__media video{width:100%; height:100%; object-fit:cover; object-position:50% 55%; display:block; background:var(--sky-video)}
.hx__pause{position:absolute; z-index:3; left:clamp(16px,3vw,40px); bottom:calc(clamp(16px,3vw,36px) + 56px); width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); padding:0}
.hx__pause svg{width:20px; height:20px}
.hx__pause .i-play{display:none}
.hx__pause[aria-pressed="true"] .i-play{display:block}
.hx__pause[aria-pressed="true"] .i-pause{display:none}
@media (max-width:959px){
  .hx__media{aspect-ratio:5/6}
  .hx__media video{object-position:50% 60%}
  .hx__pause{left:12px; bottom:14px}
}
@media (min-width:960px){
  .hx__tx{right:clamp(16px,3vw,40px); bottom:calc(clamp(16px,3vw,36px) + 76px); width:auto; grid-template-columns:40px auto auto}
  .hx__media video{object-position:50% 78%}
}
.hx__tx > span:nth-child(2) span{white-space:nowrap}
@media (max-width:959px){ .hx__pause{left:12px; bottom:84px} }

/* ---- Hero: unaltered full-frame background video, all content layered on top ---- */
.hx__card{min-height:0; aspect-ratio:16/9; display:block}
.hx__media{position:absolute; inset:0; height:auto; z-index:0; -webkit-mask-image:none; mask-image:none; aspect-ratio:auto; margin:0}
.hx__media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%}
.hx__top{position:relative; z-index:2; align-items:start}
.hx__side{padding:20px 22px; border-radius:var(--radius-card)}
.hx__side p{margin:12px 0 16px}
@media (min-width:960px){
  .hx__top{grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr)}
  .hx__tx{right:clamp(16px,3vw,40px); bottom:calc(clamp(16px,3vw,36px) + 76px)}
  .hx__pause{left:clamp(16px,3vw,40px); bottom:calc(clamp(16px,3vw,36px) + 56px)}
}
/* below ~1200px a strict 16:9 is too short for the copy, so the card grows and the video scales to cover it */
@media (min-width:960px) and (max-width:1199px){ .hx__card{aspect-ratio:auto; min-height:640px} }
@media (max-width:959px){
  .hx__card{aspect-ratio:auto; min-height:min(820px, 190vw); display:flex; flex-direction:column}
  .hx__top{padding:24px 20px 0; flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:16px; padding-bottom:20px}
  .hx__side{margin-top:auto}
  .hx__tx,.hx__trust,.hx__talk{display:none}
  .hx__pause{left:auto; right:16px; top:16px; bottom:auto}
}
.nav a,.signin,.header-cta .btn{white-space:nowrap}
@media (min-width:1080px) and (max-width:1279px){ .nav ul{gap:0} .nav a{padding:8px 10px; font-size:.92rem} .site-header .bar{gap:12px} }
@media (max-width:959px){
  .hx__card{min-height:min(860px, 215vw)}
  .hx__media video{object-position:56% 50%}
  .hx__side{padding:14px 16px}
  .hx__side p{font-size:.95rem; margin:10px 0 12px}
  .hx__side .actions{flex-wrap:nowrap; gap:8px}
  .hx__side .actions .btn{flex:1 1 0; min-width:0; padding-inline:12px}
  .hx__side .pill-label--new{font-size:.8rem}
}
@media (max-width:959px){ body.hero-in-view .wa-float{opacity:0; pointer-events:none; visibility:hidden} }