/* iPixxelRealty — site stylesheet (brand: iPixxel Realty Design System, Deep Navy) */

/* Layout: 12-col, 1240px content, alternating white / lavender / navy bands; one product mockup per story beat. */
:root{
  /* Brand — from iPixxelRealty Design System (Deep Navy) */
  --primary-900:#29245C; --primary-800:#54507D; --primary-700:#7F7C9D; --primary-600:#A9A7BE; --primary-500:#D4D3DE; --primary-400:#EAE9EF;
  --accent-900:#6C5CE7; --accent-800:#897DEC; --accent-700:#A79DF1; --accent-600:#C4BEF5; --accent-500:#E2DEFA; --accent-400:#F0EFFD;
  --secondary-900:#0B1F33; --secondary-800:#102A43; --secondary-700:#173F5F; --secondary-600:#245B7A; --secondary-500:#4C7893; --secondary-400:#A9C0CE; --secondary-300:#E6EEF3;
  --white:#FFFFFF; --neutral-50:#FAFAFB; --neutral-100:#F5F5F7; --neutral-200:#E8E8EC; --neutral-300:#D4D4DA; --neutral-500:#8A8A94; --neutral-700:#45454F; --neutral-900:#19191F;
  --success:#16803C; --success-bg:#EAF7EF; --warning:#B7791F; --warning-bg:#FFF7E6; --error:#D64545; --error-bg:#FDECEC; --info:#4567C7; --info-bg:#EEF2FF;
  --wa:#1FA855;

  --font-heading:"IBM Plex Sans", system-ui, sans-serif;
  --font-body:"Satoshi","Plus Jakarta Sans", "Inter", Arial, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;

  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-2xl:24px; --radius-full:999px;
  --shadow-sm:0 2px 8px rgba(41,36,92,.06); --shadow-md:0 8px 24px rgba(41,36,92,.08); --shadow-lg:0 16px 40px rgba(41,36,92,.12); --shadow-xl:0 30px 70px rgba(41,36,92,.18);

  --container:1240px; --gutter:24px; --header-h:72px;
  --ease:cubic-bezier(.22,.8,.26,1);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0; background:var(--white); color:var(--neutral-900); font-family:var(--font-body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4{margin:0; font-family:var(--font-heading); font-weight:500; letter-spacing:-.025em; color:var(--primary-900); text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
button,input{font:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--accent-900); outline-offset:3px; border-radius:6px}

.container{max-width:var(--container); margin:0 auto; padding-inline:var(--gutter)}
.section{padding-block:104px}
.section--tint{background:var(--neutral-50)}
.section--lav{background:var(--accent-400)}

.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--accent-900); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--accent-900)}
.h2{font-size:clamp(32px,4vw,44px); line-height:1.12; margin-top:14px}
.lead{color:var(--neutral-700); font-size:18px; line-height:1.65; max-width:640px; margin-top:16px}
.section-head{margin-bottom:48px}
.section-head--center{text-align:center}
.section-head--center .lead{margin-inline:auto}

/* Buttons */
.btn{min-height:48px; padding:0 22px; border-radius:var(--radius-sm); border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; font-size:15px; font-weight:500; white-space:nowrap; transition:background .2s, color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--accent-900); color:var(--white); box-shadow:0 6px 18px rgba(108,92,231,.28)}
.btn-primary:hover{background:var(--accent-800); transform:translateY(-1px)}
.btn-secondary{background:var(--white); color:var(--accent-900); border-color:var(--accent-900)}
.btn-secondary:hover{background:var(--accent-400)}
.btn-light{background:var(--white); color:var(--primary-900)}
.btn-light:hover{background:var(--accent-400)}
.btn-outline-light{background:transparent; color:var(--white); border-color:rgba(255,255,255,.35)}
.btn-outline-light:hover{border-color:var(--white); background:rgba(255,255,255,.06)}
.btn-sm{min-height:40px; padding:0 16px; font-size:14px}
.link-arrow{display:inline-flex; align-items:center; gap:6px; color:var(--accent-900); font-weight:500; font-size:15px}
.link-arrow svg{transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

.checks{display:grid; gap:12px; margin-top:24px}
.checks li{display:flex; gap:10px; align-items:flex-start; color:var(--neutral-700); font-size:15px}
.checks li::before{content:""; flex:none; width:20px; height:20px; margin-top:1px; border-radius:50%; background:var(--accent-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%236C5CE7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}

/* ============ HEADER ============ */
/* Blur lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile drawer inside the 72px bar */
.site-header{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s}
.site-header::before{content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:background .25s}
body.menu-open .site-header{border-color:var(--neutral-200)}
body.menu-open .site-header::before{background:var(--white)}
.nav-overlay{display:none}
.site-header.scrolled{border-color:var(--neutral-200); box-shadow:var(--shadow-sm)}
.nav-bar{height:var(--header-h); display:flex; align-items:center; gap:32px}
.logo{display:flex; align-items:center; gap:10px; flex:none}
.logo-mark{width:36px; height:36px; flex:none; display:block}
.logo:hover .logo-mark{animation:pix .6s var(--ease)}
@keyframes pix{40%{transform:rotate(-6deg) scale(1.06)}}
.logo-text{font:600 19px/1 var(--font-heading); color:var(--primary-900); letter-spacing:-.03em}
.logo-text b{color:var(--accent-900); font-weight:600}
.main-nav{display:flex; align-items:center; gap:2px; flex:1}
.nav-item{position:relative}
.nav-link{display:inline-flex; align-items:center; gap:5px; height:40px; padding:0 12px; border-radius:var(--radius-sm); color:var(--neutral-700); font-size:15px; font-weight:500; background:none; border:0; cursor:pointer; transition:color .2s, background .2s}
.nav-link:hover,.nav-item.open>.nav-link{color:var(--primary-900); background:var(--accent-400)}
.nav-link .chev{transition:transform .25s var(--ease)}
.nav-item.open .chev{transform:rotate(180deg)}
.nav-actions{display:flex; align-items:center; gap:8px; flex:none}
.nav-login{padding:0 14px; height:40px; display:inline-flex; align-items:center; color:var(--primary-900); font-weight:500; font-size:15px; border-radius:var(--radius-sm)}
.nav-login:hover{background:var(--accent-400)}

.mega{position:absolute; top:calc(100% + 12px); left:-12px; background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); padding:16px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .22s, transform .22s var(--ease), visibility .22s}
.mega::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px}
.nav-item.open .mega{opacity:1; visibility:visible; transform:none}
.mega-grid{display:grid; gap:2px}
.mega--product{width:760px; display:grid; grid-template-columns:1fr 1fr 240px; gap:8px}
.mega--product .mega-grid{grid-column:span 2; grid-template-columns:1fr 1fr}
.mega--sm{width:320px}
.mega a.mi{display:flex; gap:12px; padding:10px 12px; border-radius:var(--radius-md); transition:background .18s}
.mega a.mi:hover{background:var(--accent-400)}
.mi-ic{flex:none; width:34px; height:34px; border-radius:9px; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center; transition:background .18s, color .18s}
.mega a.mi:hover .mi-ic{background:var(--accent-900); color:var(--white)}
.mi-t{display:block; font-weight:500; font-size:14.5px; color:var(--primary-900)}
.mi-d{display:block; font-size:13px; color:var(--neutral-500); line-height:1.4; margin-top:1px}
.mega-feature{background:var(--primary-900); color:var(--white); border-radius:var(--radius-lg); padding:20px; display:flex; flex-direction:column; justify-content:space-between; gap:16px; position:relative; overflow:hidden}
.mega-feature::after{content:""; position:absolute; right:-40px; bottom:-40px; width:140px; height:140px; border-radius:50%; border:22px solid rgba(108,92,231,.45)}
.mega-feature small{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-600); font-weight:700}
.mega-feature h4{color:var(--white); font-size:19px; line-height:1.25; margin-top:8px}
.mega-feature p{color:rgba(255,255,255,.7); font-size:13px; margin-top:8px}
.mega-feature a{color:var(--white); font-weight:500; font-size:14px; position:relative; z-index:1}
.ext{font-size:11px; color:var(--neutral-500); margin-left:4px}

.burger{display:none; width:44px; height:44px; border-radius:var(--radius-sm); border:1px solid var(--neutral-200); background:var(--white); cursor:pointer; place-items:center}
.burger span{display:block; width:18px; height:2px; background:var(--primary-900); border-radius:2px; position:relative; transition:background .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--primary-900); border-radius:2px; transition:transform .25s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative; background:linear-gradient(180deg,var(--accent-400) 0%, var(--white) 100%); padding-block:72px 88px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background-image:linear-gradient(var(--accent-500) 1px, transparent 1px), linear-gradient(90deg, var(--accent-500) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 70% 60% at 75% 30%, #000 10%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 75% 30%, #000 10%, transparent 70%); opacity:.7; pointer-events:none}
.hero-grid{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px; align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,68px); line-height:1.02; letter-spacing:-.035em; margin-top:20px}
.hero h1 .hl{color:var(--accent-900); position:relative; white-space:nowrap}
.hero h1 .hl::after{content:""; position:absolute; left:0; right:0; bottom:.04em; height:.12em; background:var(--accent-600); border-radius:4px; z-index:-1; transform-origin:left; animation:underline 1s .9s var(--ease) both}
@keyframes underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .lead{max-width:560px; margin-top:22px}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-for{display:flex; align-items:center; gap:12px; margin-top:28px; color:var(--neutral-700); font-size:14px; flex-wrap:wrap}
.aud-chips{display:flex; gap:6px; flex-wrap:wrap}
.hero-region{flex-basis:100%}
.aud-chip{padding:5px 11px; border-radius:var(--radius-full); background:var(--white); border:1px solid var(--accent-500); color:var(--primary-900); font-size:13px; font-weight:500}

/* load-in sequence */
.intro > *{animation:rise .8s var(--ease) both}
.intro > *:nth-child(1){animation-delay:.05s} .intro > *:nth-child(2){animation-delay:.15s} .intro > *:nth-child(3){animation-delay:.25s} .intro > *:nth-child(4){animation-delay:.35s} .intro > *:nth-child(5){animation-delay:.45s}
@keyframes rise{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}

/* Product mock window */
.window{background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); overflow:hidden}
.win-bar{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--neutral-200); background:var(--neutral-50)}
.win-dots{display:flex; gap:6px}
.win-dots i{width:10px; height:10px; border-radius:50%; background:var(--neutral-300)}
.win-title{font-size:13px; font-weight:500; color:var(--neutral-700)}
.win-live{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--success)}
.win-live i{width:7px; height:7px; border-radius:50%; background:var(--success); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,128,60,.45)}70%{box-shadow:0 0 0 8px rgba(22,128,60,0)}100%{box-shadow:0 0 0 0 rgba(22,128,60,0)}}

.hero-visual{position:relative; animation:rise 1s .3s var(--ease) both}
.lead-head{display:flex; gap:14px; align-items:center; padding:18px 20px; border-bottom:1px solid var(--neutral-200)}
.avatar{flex:none; width:44px; height:44px; border-radius:50%; background:var(--accent-500); color:var(--accent-900); display:grid; place-items:center; font:600 15px/1 var(--font-heading)}
.lead-name{font:600 16px/1.2 var(--font-heading); color:var(--primary-900)}
.lead-meta{font-size:12.5px; color:var(--neutral-500); margin-top:3px}
.badge{display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:var(--radius-full); font-size:11.5px; font-weight:600; white-space:nowrap}
.badge-purple{background:var(--accent-400); color:var(--accent-900)}
.badge-success{background:var(--success-bg); color:var(--success)}
.badge-warning{background:var(--warning-bg); color:var(--warning)}
.badge-info{background:var(--info-bg); color:var(--info)}
.badge-error{background:var(--error-bg); color:var(--error)}
.lead-head .badge{margin-left:auto}
.lead-tags{display:flex; flex-wrap:wrap; gap:6px; padding:12px 20px 0}
.tag{font-size:12px; padding:4px 9px; border-radius:6px; background:var(--neutral-100); color:var(--neutral-700)}
.timeline{padding:16px 20px 20px; position:relative}
.tl-item{display:grid; grid-template-columns:32px 1fr auto; gap:12px; align-items:start; padding:9px 0; position:relative}
.tl-item:not(:last-child)::after{content:""; position:absolute; left:15px; top:41px; bottom:-9px; width:2px; background:var(--neutral-200)}
.tl-ic{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; position:relative; z-index:1}
.tl-ic.c1{background:var(--info-bg); color:var(--info)}
.tl-ic.c2{background:var(--accent-400); color:var(--accent-900)}
.tl-ic.c3{background:var(--success-bg); color:var(--wa)}
.tl-ic.c4{background:var(--secondary-300); color:var(--secondary-700)}
.tl-ic.c5{background:var(--accent-900); color:var(--white)}
.tl-t{font-size:14px; font-weight:500; color:var(--primary-900)}
.tl-d{font-size:12.5px; color:var(--neutral-500); margin-top:1px}
.tl-time{font:500 11.5px/1.6 var(--font-mono); color:var(--neutral-500); font-variant-numeric:tabular-nums}
.hero-visual .tl-item{animation:tlIn .55s var(--ease) both}
.hero-visual .tl-item:nth-child(1){animation-delay:.7s} .hero-visual .tl-item:nth-child(2){animation-delay:1.1s} .hero-visual .tl-item:nth-child(3){animation-delay:1.5s} .hero-visual .tl-item:nth-child(4){animation-delay:1.9s} .hero-visual .tl-item:nth-child(5){animation-delay:2.3s}
@keyframes tlIn{from{opacity:0; transform:translateX(-10px)}to{opacity:1; transform:none}}
.float-card{position:absolute; background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:12px 16px; display:flex; align-items:center; gap:12px; animation:floaty 6s ease-in-out infinite}
.float-card .k{font-size:11.5px; color:var(--neutral-500)}
.float-card .v{font:600 20px/1.1 var(--font-heading); color:var(--primary-900); font-variant-numeric:tabular-nums}
.float-card .ic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center}
.fc-1{left:-36px; bottom:-28px}
.fc-1 .ic{background:var(--success-bg); color:var(--success)}
.fc-2{right:-24px; top:-22px; animation-delay:-3s}
.fc-2 .ic{background:var(--accent-400); color:var(--accent-900)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ============ TRUST STRIP ============ */
.trust{padding-block:40px 56px; border-bottom:1px solid var(--neutral-200)}
.trust p{text-align:center; color:var(--neutral-500); font-size:14px; margin-bottom:22px}
.marquee{overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex; gap:14px; width:max-content; animation:marquee 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - 7px))}}
.logo-chip{display:flex; align-items:center; gap:10px; height:56px; padding:0 22px; border:1px solid var(--neutral-200); border-radius:var(--radius-md); background:var(--white); color:var(--neutral-500); font:600 15px/1 var(--font-heading); letter-spacing:-.01em; filter:grayscale(1); transition:color .25s, border-color .25s}
.logo-chip:hover{color:var(--primary-900); border-color:var(--accent-600)}
.logo-chip svg{flex:none}

/* ============ PROBLEM ============ */
.problem-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.p-card{background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-xl); padding:28px 24px; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s}
.p-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent-600)}
.p-ic{width:48px; height:48px; border-radius:var(--radius-md); display:grid; place-items:center; margin-bottom:22px; background:var(--error-bg); color:var(--error)}
.p-card h3{font-size:20px; line-height:1.3}
.p-card p{color:var(--neutral-700); font-size:15px; margin-top:10px; line-height:1.6}
.leak-stat{display:flex; align-items:center; gap:10px; margin-top:20px; padding-top:16px; border-top:1px dashed var(--neutral-300); font-size:13px; color:var(--neutral-500)}
.leak-stat b{font:600 13px var(--font-mono); color:var(--error)}

/* ============ HOW IT WORKS ============ */
.steps{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.steps-line{position:absolute; top:28px; left:12.5%; right:12.5%; height:2px; background:var(--neutral-200); border-radius:2px}
.steps-line i{position:absolute; inset:0; background:linear-gradient(90deg,var(--accent-900),var(--accent-700)); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform 1.6s var(--ease)}
.steps.in .steps-line i{transform:scaleX(1)}
.step{position:relative; text-align:center; padding:0 6px}
.step-num{width:56px; height:56px; margin:0 auto 22px; border-radius:50%; background:var(--white); border:2px solid var(--neutral-200); display:grid; place-items:center; font:600 18px/1 var(--font-heading); color:var(--neutral-500); position:relative; z-index:1; transition:background .4s, border-color .4s, color .4s, box-shadow .4s}
.steps.in .step-num{background:var(--accent-900); border-color:var(--accent-900); color:var(--white); box-shadow:0 0 0 6px var(--accent-400)}
.steps.in .step:nth-child(2) .step-num{transition-delay:.1s} .steps.in .step:nth-child(3) .step-num{transition-delay:.5s} .steps.in .step:nth-child(4) .step-num{transition-delay:.9s} .steps.in .step:nth-child(5) .step-num{transition-delay:1.3s}
.step h3{font-size:20px}
.step p{color:var(--neutral-700); font-size:15px; margin-top:10px; line-height:1.6; max-width:260px; margin-inline:auto}
.step .link-arrow{margin-top:14px; font-size:14px}

/* ============ PLATFORM TOUR ============ */
.tabs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:40px}
.tab{height:42px; padding:0 18px; border-radius:var(--radius-full); border:1px solid var(--neutral-300); background:var(--white); color:var(--neutral-700); font-size:14.5px; font-weight:500; cursor:pointer; transition:all .2s}
.tab:hover{border-color:var(--accent-700); color:var(--primary-900)}
.tab[aria-selected="true"]{background:var(--primary-900); border-color:var(--primary-900); color:var(--white)}
.tour{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center; min-height:440px}
.tour-copy h3{font-size:clamp(26px,3vw,34px); line-height:1.15}
.tour-copy > p{color:var(--neutral-700); font-size:17px; line-height:1.65; margin-top:14px}
.tour-copy .link-arrow{margin-top:26px}
.tour-pane{animation:fadeSwap .45s var(--ease) both}
@keyframes fadeSwap{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.mock-body{padding:20px; display:grid; gap:10px}
.src-row{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--neutral-200); border-radius:var(--radius-md)}
.src-logo{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font:700 12px/1 var(--font-heading); color:var(--white); flex:none}
.src-name{font-size:14px; font-weight:500; color:var(--primary-900)}
.src-sub{font-size:12px; color:var(--neutral-500)}
.src-row .badge{margin-left:auto}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.kanban{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:16px}
.k-col{background:var(--neutral-50); border-radius:var(--radius-md); padding:10px; display:grid; gap:8px; align-content:start}
.k-h{font-size:12px; font-weight:700; color:var(--neutral-500); text-transform:uppercase; letter-spacing:.06em; display:flex; justify-content:space-between}
.k-card{background:var(--white); border:1px solid var(--neutral-200); border-radius:10px; padding:10px; font-size:12.5px}
.k-card b{display:block; font-weight:600; color:var(--primary-900); font-size:13px}
.k-card span{color:var(--neutral-500)}
.k-card .sla{display:inline-block; margin-top:6px}
.chat{padding:18px; display:grid; gap:10px; background:var(--neutral-50)}
.bubble{max-width:82%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.45; box-shadow:var(--shadow-sm)}
.bubble.in{background:var(--white); border-top-left-radius:4px}
.bubble.out{background:#DCF8E7; margin-left:auto; border-top-right-radius:4px}
.bubble small{display:block; font-size:10.5px; color:var(--neutral-500); text-align:right; margin-top:3px}
.doc-chip{display:flex; align-items:center; gap:10px; background:var(--white); border-radius:10px; padding:8px 10px; margin-bottom:6px; font-size:12.5px}
.doc-chip i{width:28px; height:34px; border-radius:4px; background:var(--error-bg); color:var(--error); display:grid; place-items:center; font:700 9px var(--font-heading); font-style:normal}
.site-prev{padding:16px}
.site-hero{height:150px; border-radius:var(--radius-md); background:linear-gradient(160deg,var(--secondary-700),var(--secondary-900)); position:relative; overflow:hidden; padding:18px; color:var(--white)}
.site-hero::after{content:""; position:absolute; right:22px; bottom:0; width:110px; height:120px; background:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 2px,transparent 2px 12px),linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.05)); border-radius:6px 6px 0 0}
.site-hero::before{content:""; position:absolute; right:140px; bottom:0; width:70px; height:80px; background:repeating-linear-gradient(0deg,rgba(255,255,255,.15) 0 2px,transparent 2px 10px),rgba(255,255,255,.06); border-radius:6px 6px 0 0}
.site-hero b{font:600 18px/1.2 var(--font-heading); display:block}
.site-hero span{font-size:12px; opacity:.75}
.site-form{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin-top:12px}
.fake-input{height:36px; border:1px solid var(--neutral-300); border-radius:8px; font-size:12px; color:var(--neutral-500); display:flex; align-items:center; padding:0 10px}
.fake-btn{height:36px; border-radius:8px; background:var(--accent-900); color:var(--white); font-size:12px; font-weight:600; display:flex; align-items:center; padding:0 14px}
.site-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px}
.mini-stat{border:1px solid var(--neutral-200); border-radius:10px; padding:10px}
.mini-stat span{display:block; font-size:11px; color:var(--neutral-500)}
.mini-stat b{font:600 17px var(--font-heading); color:var(--primary-900); font-variant-numeric:tabular-nums}
.inv{padding:16px}
.inv-legend{display:flex; gap:14px; font-size:12px; color:var(--neutral-700); margin-bottom:12px; flex-wrap:wrap}
.inv-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.inv-grid{display:grid; grid-template-columns:44px repeat(6,1fr); gap:5px; font-size:11px}
.inv-grid .fl{color:var(--neutral-500); display:flex; align-items:center; font-family:var(--font-mono)}
.unit{height:28px; border-radius:5px; display:grid; place-items:center; font:500 10.5px var(--font-mono); transition:transform .2s}
.unit:hover{transform:scale(1.08)}
.u-a{background:var(--success-bg); color:var(--success)} .u-h{background:var(--warning-bg); color:var(--warning)} .u-s{background:var(--neutral-200); color:var(--neutral-500)}
.rep{padding:18px; display:grid; gap:14px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.bars{display:flex; align-items:flex-end; gap:10px; height:130px; padding-top:8px; border-bottom:1px solid var(--neutral-200)}
.bars div{flex:1; background:var(--accent-600); border-radius:6px 6px 0 0; position:relative; transform-origin:bottom; animation:grow .8s var(--ease) both}
.bars div:nth-child(odd){background:var(--accent-900)}
.bars div span{position:absolute; bottom:-20px; left:50%; transform:translateX(-50%); font-size:10.5px; color:var(--neutral-500)}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ============ WHO IT'S FOR ============ */
.aud-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.aud-card{position:relative; display:flex; flex-direction:column; border:1px solid var(--neutral-200); border-radius:var(--radius-2xl); background:var(--white); overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s, border-color .35s}
.aud-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--accent-600)}
.aud-art{height:180px; position:relative; overflow:hidden}
.aud-card:nth-child(1) .aud-art{background:var(--primary-900)}
.aud-card:nth-child(2) .aud-art{background:var(--secondary-700)}
.aud-card:nth-child(3) .aud-art{background:var(--accent-900)}
.aud-art svg{position:absolute; inset:0; width:100%; height:100%}
.aud-art .grow-el{transition:transform .6s var(--ease)}
.aud-card:hover .grow-el{transform:translateY(-6px)}
.aud-body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1}
.aud-kicker{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--neutral-500)}
.aud-body h3{font-size:24px; margin-top:6px; line-height:1.2}
.aud-body p{color:var(--neutral-700); font-size:15.5px; margin-top:12px; line-height:1.6}
.aud-pts{display:grid; gap:8px; margin:18px 0 22px; font-size:14px; color:var(--neutral-700)}
.aud-pts li{display:flex; gap:8px} .aud-pts li::before{content:"—"; color:var(--accent-700)}
.aud-body .link-arrow{margin-top:auto}

/* ============ SPLIT FEATURES ============ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center}
.split--rev .split-media{order:-1}
.split h2{font-size:clamp(30px,3.6vw,42px); line-height:1.12; margin-top:14px}
.split .lead{font-size:17px}
.split .link-arrow{margin-top:28px}

.call-card .call-top{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--neutral-200)}
.ai-ava{width:40px; height:40px; border-radius:50%; background:var(--primary-900); color:var(--white); display:grid; place-items:center}
.player{display:flex; align-items:center; gap:14px; padding:14px 20px; background:var(--neutral-50); border-bottom:1px solid var(--neutral-200)}
.play{flex:none; width:40px; height:40px; border-radius:50%; background:var(--accent-900); color:var(--white); border:0; cursor:pointer; display:grid; place-items:center; transition:transform .2s, background .2s}
.play:hover{transform:scale(1.06); background:var(--accent-800)}
.wave{flex:1; display:flex; align-items:center; gap:3px; height:32px}
.wave i{flex:1; background:var(--accent-600); border-radius:2px; height:var(--h); transition:background .2s}
.wave i.on{background:var(--accent-900)}
.player.playing .wave i{animation:eq 1s ease-in-out infinite; animation-delay:calc(var(--i) * -0.07s)}
@keyframes eq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
.dur{font:500 12px var(--font-mono); color:var(--neutral-500); font-variant-numeric:tabular-nums}
.transcript{padding:16px 20px; display:grid; gap:10px; font-size:13.5px}
.tr-line{display:grid; grid-template-columns:62px 1fr; gap:10px}
.tr-who{font-weight:600; font-size:12px; color:var(--accent-900); padding-top:1px}
.tr-who.b{color:var(--secondary-600)}
.tr-line p{color:var(--neutral-700); line-height:1.5}
.qual{margin:4px 20px 20px; border:1px solid var(--accent-500); background:var(--accent-400); border-radius:var(--radius-md); padding:14px 16px}
.qual h4{font-size:13px; font-weight:600; letter-spacing:0; display:flex; justify-content:space-between; align-items:center}
.qual-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px 16px; margin-top:10px; font-size:12.5px}
.qual-grid span{color:var(--neutral-500); display:block}
.qual-grid b{color:var(--primary-900); font-weight:600}
.consent{font-size:12px; color:var(--neutral-500); margin-top:12px}

.dash{padding:20px; display:grid; gap:18px}
.dash-h{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--neutral-500)}
.dash-h b{font:600 15px var(--font-heading); color:var(--primary-900)}
.funnel{display:grid; gap:8px}
.f-row{display:grid; grid-template-columns:96px 1fr 56px; gap:10px; align-items:center; font-size:12.5px}
.f-row span{color:var(--neutral-700)}
.f-track{height:22px; background:var(--neutral-100); border-radius:6px; overflow:hidden}
.f-fill{height:100%; width:var(--w); background:var(--accent-900); border-radius:6px; transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease)}
.f-row:nth-child(2) .f-fill{background:var(--accent-800); transition-delay:.1s} .f-row:nth-child(3) .f-fill{background:var(--accent-700); transition-delay:.2s} .f-row:nth-child(4) .f-fill{background:var(--primary-800); transition-delay:.3s} .f-row:nth-child(5) .f-fill{background:var(--primary-900); transition-delay:.4s}
.in .f-fill{transform:scaleX(1)}
.f-row b{font:500 12.5px var(--font-mono); text-align:right; color:var(--primary-900)}
.dash-split{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.dtable{border:1px solid var(--neutral-200); border-radius:var(--radius-md); padding:12px 14px}
.dtable h5{margin:0 0 8px; font:600 12px var(--font-body); color:var(--neutral-500); text-transform:uppercase; letter-spacing:.06em}
.dt-row{display:flex; justify-content:space-between; gap:8px; font-size:12.5px; padding:5px 0; border-top:1px solid var(--neutral-100)}
.dt-row:first-of-type{border-top:0}
.dt-row span{color:var(--neutral-700)}
.dt-row b{font:500 12.5px var(--font-mono); color:var(--primary-900); font-variant-numeric:tabular-nums}
.sample-note{font-size:11.5px; color:var(--neutral-500); text-align:right}

/* ============ RESEARCH ============ */
.res-head{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:44px}
.res-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.res-card{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-xl); overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s}
.res-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.res-cover{height:190px; position:relative; overflow:hidden; display:grid; place-items:center}
.res-card:hover .cover-in{transform:scale(1.04) rotate(-1deg)}
.cover-in{transition:transform .5s var(--ease)}
.rc-1{background:var(--secondary-800)}
.rc-2{background:var(--accent-500)}
.rc-3{background:var(--primary-400)}
.book{width:130px; height:160px; border-radius:4px 10px 10px 4px; padding:14px 12px; box-shadow:10px 14px 30px rgba(0,0,0,.25); display:flex; flex-direction:column; justify-content:space-between}
.book-1{background:var(--accent-900); color:var(--white)}
.book-3{background:var(--primary-900); color:var(--white)}
.book small{font-size:8px; letter-spacing:.14em; text-transform:uppercase; opacity:.75; font-weight:700}
.book b{font:600 15px/1.15 var(--font-heading)}
.book .gauge{height:4px; background:rgba(255,255,255,.25); border-radius:3px; overflow:hidden}
.book .gauge i{display:block; height:100%; width:62%; background:var(--white)}
.calc{width:190px; background:var(--white); border-radius:12px; padding:12px; box-shadow:var(--shadow-lg); font-size:11px}
.calc .row{display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--neutral-100); color:var(--neutral-700)}
.calc .row b{font-family:var(--font-mono); color:var(--primary-900)}
.calc .res{margin-top:8px; background:var(--error-bg); color:var(--error); border-radius:8px; padding:8px; display:flex; justify-content:space-between; font-weight:700}
.res-body{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1}
.res-kick{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-900)}
.res-body h3{font-size:20px; margin-top:8px}
.res-body p{color:var(--neutral-700); font-size:15px; margin-top:8px; line-height:1.55}
.res-body .link-arrow{margin-top:18px; font-size:14px}

/* ============ PROOF ============ */
.proof{background:var(--primary-900); color:var(--white); position:relative; overflow:hidden}
.proof::before{content:""; position:absolute; width:520px; height:520px; border-radius:50%; border:1px solid rgba(255,255,255,.08); left:-160px; top:-200px; box-shadow:0 0 0 80px rgba(255,255,255,.02), 0 0 0 160px rgba(255,255,255,.015)}
.proof-in{position:relative; max-width:900px; margin:0 auto; text-align:center}
.qmark{font:600 96px/0.6 var(--font-heading); color:var(--accent-700); display:block; height:48px}
.proof blockquote{margin:0; font:500 clamp(24px,3.2vw,36px)/1.3 var(--font-heading); letter-spacing:-.02em; color:var(--white); text-wrap:balance}
.proof-cap{margin-top:28px; display:inline-flex; align-items:center; gap:10px; color:rgba(255,255,255,.72); font-size:15px}
.proof-cap .badge{background:rgba(108,92,231,.35); color:var(--white)}
.seats{display:flex; justify-content:center; gap:6px; margin-top:22px}
.seats i{width:26px; height:6px; border-radius:3px; background:var(--accent-900)}
.seats i.free{background:rgba(255,255,255,.18)}
.seats-note{font-size:13px; color:rgba(255,255,255,.55); margin-top:10px}

/* ============ FAQ ============ */
.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; align-items:start}
.faq-col{display:grid; gap:14px}
details.faq{background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-lg); transition:border-color .25s, box-shadow .25s}
details.faq[open]{border-color:var(--accent-600); box-shadow:var(--shadow-sm)}
details.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:20px 22px; font:500 17px/1.35 var(--font-heading); color:var(--primary-900)}
details.faq summary::-webkit-details-marker{display:none}
.faq-x{flex:none; width:28px; height:28px; border-radius:50%; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center; transition:transform .3s var(--ease), background .3s, color .3s}
details.faq[open] .faq-x{transform:rotate(45deg); background:var(--accent-900); color:var(--white)}
.faq-a{padding:0 22px 20px; color:var(--neutral-700); font-size:15px; line-height:1.65}
.faq-a a{color:var(--accent-900); text-decoration:underline; text-underline-offset:3px}
details.faq[open] .faq-a{animation:fadeSwap .35s var(--ease)}

/* ============ CLOSING CTA ============ */
.cta-wrap{padding-block:0 104px}
.cta-box{position:relative; overflow:hidden; border-radius:28px; background:var(--accent-900); color:var(--white); padding:72px 48px; text-align:center}
.cta-box::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%)}
.cta-box > *{position:relative}
.cta-box h2{color:var(--white); font-size:clamp(32px,4.4vw,52px); line-height:1.08}
.cta-box p{color:rgba(255,255,255,.85); font-size:18px; margin:16px auto 0; max-width:560px}
.cta-box .hero-ctas{justify-content:center}
.cta-box small{display:block; margin-top:18px; color:rgba(255,255,255,.72); font-size:14px}
.cta-box .btn-light{color:var(--accent-900)}
.drip{position:absolute; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.35); animation:drip 7s linear infinite}
@keyframes drip{0%{transform:translateY(-20px); opacity:0}10%{opacity:1}100%{transform:translateY(460px); opacity:0}}

/* ============ FOOTER ============ */
.site-footer{background:var(--secondary-900); color:rgba(255,255,255,.7); padding-block:80px 32px}
.foot-grid{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:40px}
.foot-brand .logo-text{color:var(--white)}
.foot-brand .logo-mark{border-radius:9px; box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.foot-brand .logo-text b{color:var(--accent-700)}
.foot-brand p{margin-top:18px; font-size:15px; line-height:1.6; max-width:340px}
.news{margin-top:28px}
.news label{display:block; color:var(--white); font-size:14px; font-weight:500; margin-bottom:10px}
.news-row{display:flex; gap:8px; max-width:380px}
.news input{flex:1; min-width:0; height:46px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--white); padding:0 14px; outline:none; transition:border-color .2s, box-shadow .2s}
.news input::placeholder{color:rgba(255,255,255,.45)}
.news input:focus{border-color:var(--accent-700); box-shadow:0 0 0 4px rgba(108,92,231,.25)}
.news-msg{font-size:13px; margin-top:8px; color:var(--accent-600); min-height:20px}
.foot-col h4{color:var(--white); font:600 14px var(--font-heading); letter-spacing:0; margin-bottom:16px}
.foot-col ul{display:grid; gap:10px}
.foot-col a{font-size:14.5px; transition:color .2s}
.foot-col a:hover{color:var(--white)}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:64px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); font-size:13.5px}
.foot-bottom nav{display:flex; gap:18px; flex-wrap:wrap}
.foot-bottom a:hover{color:var(--white)}
.socials{display:flex; gap:8px}
.socials a{width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; color:rgba(255,255,255,.8); transition:background .2s, border-color .2s, transform .2s}
.socials a:hover{background:var(--accent-900); border-color:var(--accent-900); color:var(--white); transform:translateY(-2px)}

/* ============ SCROLL REVEAL ============ */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
.js .reveal-d1{transition-delay:.08s} .js .reveal-d2{transition-delay:.16s} .js .reveal-d3{transition-delay:.24s}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  /* --- Mobile / tablet drawer --- */
  .nav-actions .nav-login{display:none}
  .burger{display:grid}
  .nav-bar{justify-content:space-between; gap:12px}
  .nav-actions{gap:10px}
  .main-nav{position:fixed; top:calc(var(--header-h) + env(safe-area-inset-top,0px)); right:0; bottom:0; width:min(440px,100%); display:flex; flex-direction:column; align-items:stretch; gap:0; padding:8px 20px calc(24px + env(safe-area-inset-bottom,0px)); background:var(--white); overflow-y:auto; overscroll-behavior:contain; box-shadow:var(--shadow-xl); transform:translateX(100%); visibility:hidden; transition:transform .38s var(--ease), visibility .38s; z-index:2}
  body.menu-open .main-nav{transform:none; visibility:visible}
  .nav-overlay{display:block; position:fixed; top:calc(var(--header-h) + env(safe-area-inset-top,0px)); left:0; right:0; bottom:0; background:rgba(11,31,51,.45); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; z-index:1}
  body.menu-open .nav-overlay{opacity:1; visibility:visible}
  .nav-item{border-bottom:1px solid var(--neutral-200); flex:none}
  .nav-link{width:100%; height:58px; justify-content:space-between; font-size:17px; padding:0 4px; color:var(--primary-900); border-radius:0}
  .nav-link:hover,.nav-item.open>.nav-link{background:none; color:var(--accent-900)}
  .nav-link .chev{width:14px; height:14px}
  /* accordion: animate height with grid rows */
  .mega,.mega--product,.mega--sm{position:static; width:auto; display:grid; grid-template-columns:1fr; grid-template-rows:0fr; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-radius:0; padding:0; background:none; transition:grid-template-rows .35s var(--ease)}
  .mega::before{display:none}
  .nav-item.open .mega{grid-template-rows:1fr}
  .mega .mega-grid,.mega--product .mega-grid{grid-column:auto; grid-template-columns:1fr; min-height:0; overflow:hidden; gap:0}
  .nav-item.open .mega-grid{padding-bottom:10px}
  .mega a.mi{padding:10px 8px; align-items:center}
  .mega-feature{display:none}
  .mobile-cta{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:auto; padding-top:24px; flex:none}
  .mobile-cta .btn{width:100%}
  .hero-grid{grid-template-columns:1fr; gap:64px}
  .hero-visual{max-width:620px; margin-inline:auto; width:100%}
  .problem-grid{grid-template-columns:1fr 1fr}
  .tour{grid-template-columns:1fr; gap:36px}
  .split{grid-template-columns:1fr; gap:48px}
  .split--rev .split-media{order:0}
  .foot-grid{grid-template-columns:1fr 1fr 1fr; }
  .foot-brand{grid-column:1/-1}
}
@media (min-width:1101px){ .mobile-cta{display:none} }
@media (max-width:440px){ .mobile-cta{grid-template-columns:1fr} }
@media (max-width:374px){ .nav-actions .btn-sm{display:none} }
@media (max-width:860px){
  .section{padding-block:80px}
  .aud-grid,.res-grid{grid-template-columns:1fr; max-width:560px; margin-inline:auto}
  .steps{grid-template-columns:1fr; gap:28px}
  .steps-line{left:27px; right:auto; top:28px; bottom:28px; width:2px; height:auto}
  .steps-line i{transform:scaleY(0); transform-origin:top}
  .steps.in .steps-line i{transform:scaleY(1)}
  .step{text-align:left; display:grid; grid-template-columns:56px 1fr; gap:0 20px; padding:0}
  .step-num{margin:0; grid-row:span 3}
  .step p{margin-inline:0; max-width:none}
  .faq-grid{grid-template-columns:1fr}
  .res-head{flex-direction:column; align-items:flex-start}
  .fc-1{left:-8px} .fc-2{right:-8px}
}
@media (max-width:600px){
  :root{--gutter:16px}
  .hero{padding-block:48px 64px}
  .hero-ctas .btn{flex:1 1 100%}
  .problem-grid{grid-template-columns:1fr}
  .kanban{grid-template-columns:1fr 1fr} .kanban .k-col:nth-child(3){display:none}
  .dash-split,.kpis{grid-template-columns:1fr}
  .site-form{grid-template-columns:1fr}
  .inv-grid{grid-template-columns:34px repeat(6,1fr)}
  .cta-box{padding:56px 22px; border-radius:22px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .float-card{padding:10px 12px} .float-card .v{font-size:17px}
  .fc-1{bottom:-28px} .fc-2{top:-30px}
  .tl-time{display:none}
  .tl-item{grid-template-columns:32px 1fr}
  .f-row{grid-template-columns:80px 1fr 48px}
  .tab{height:38px; padding:0 14px; font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .js .reveal{opacity:1; transform:none}
}

/* =====================================================================
   INNER-PAGE COMPONENTS — shared by every page after the home page
   ===================================================================== */

/* Active nav state */
.nav-item.active > .nav-link{color:var(--primary-900)}
.nav-item.active > .nav-link::after{content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px; border-radius:2px; background:var(--accent-900)}
.nav-link{position:relative}
.mega a.mi.current{background:var(--accent-400)}
.mega a.mi.current .mi-t{color:var(--accent-900)}

/* Placeholder token for copy still to be confirmed (from wireframe [brackets]) */
.ph{display:inline; background:var(--warning-bg); color:var(--warning); border:1px dashed rgba(183,121,31,.5); border-radius:5px; padding:0 5px; font-weight:500; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.on-dark .ph,.ph.on-dark{background:rgba(255,247,230,.12); color:#F5C77E; border-color:rgba(245,199,126,.4)}

/* Breadcrumb */
.crumbs{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13.5px; color:var(--neutral-500); margin-bottom:18px}
.crumbs a{color:var(--neutral-700)} .crumbs a:hover{color:var(--accent-900)}
.crumbs span[aria-hidden]{color:var(--neutral-300)}

/* Page hero (inner pages) */
.page-hero{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--accent-400) 0%, var(--white) 100%); padding-block:72px 88px}
.page-hero::before{content:""; position:absolute; inset:0; background-image:linear-gradient(var(--accent-500) 1px, transparent 1px), linear-gradient(90deg, var(--accent-500) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse 70% 70% at 80% 20%, #000 5%, transparent 65%); -webkit-mask-image:radial-gradient(ellipse 70% 70% at 80% 20%, #000 5%, transparent 65%); opacity:.6; pointer-events:none}
.page-hero > .container{position:relative}
.page-hero h1{font-size:clamp(36px,4.6vw,58px); line-height:1.05; letter-spacing:-.035em; margin-top:18px}
.page-hero .lead{margin-top:20px}
.page-hero--center{text-align:center}
.page-hero--center .lead{margin-inline:auto; max-width:720px}
.page-hero--center .hero-ctas{justify-content:center}
.page-hero--center .crumbs{justify-content:center}
.page-hero--compact{padding-block:56px 64px}
.hero-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center}
.hero-media{position:relative; animation:rise 1s .25s var(--ease) both}
.hero-below{margin-top:56px}

/* Generic cards */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.card{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-xl); padding:26px 24px; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s}
a.card:hover,.card.hover:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent-600)}
.card-ic{width:46px; height:46px; border-radius:var(--radius-md); background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center; margin-bottom:20px; flex:none; transition:background .25s, color .25s}
a.card:hover .card-ic{background:var(--accent-900); color:var(--white)}
.card-ic.warn{background:var(--error-bg); color:var(--error)}
.card h3{font-size:19px; line-height:1.3}
.card p{color:var(--neutral-700); font-size:15px; line-height:1.6; margin-top:8px}
.card .link-arrow{margin-top:auto; padding-top:18px; font-size:14.5px}
.card-kicker{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-900); margin-bottom:8px}
.card--lav{background:var(--accent-400); border-color:var(--accent-500)}
.card--dark{background:var(--primary-900); border-color:var(--primary-900)}
.card--dark h3{color:var(--white)} .card--dark p{color:rgba(255,255,255,.72)}
.card-num{font:600 13px var(--font-mono); color:var(--accent-900); margin-bottom:14px}
.section-head .lead{max-width:680px}
.section-foot{margin-top:36px; display:flex; justify-content:center}

/* Media cards (blog, resources, stories) */
.mcard{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-xl); overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s}
.mcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.mcard-art{aspect-ratio:16/9; max-width:100%; position:relative; overflow:hidden; display:grid; place-items:center}
.mcard-art > *{transition:transform .5s var(--ease)}
.mcard:hover .mcard-art > *{transform:scale(1.05)}
.mcard-body{padding:20px 22px 24px; display:flex; flex-direction:column; flex:1}
.mcard-body h3{font-size:19px; line-height:1.3; margin-top:8px}
.mcard-body p{color:var(--neutral-700); font-size:14.5px; margin-top:8px; line-height:1.55}
.mcard-meta{margin-top:auto; padding-top:16px; font-size:13px; color:var(--neutral-500)}
.mcard--feature{grid-column:span 2; flex-direction:row}
.mcard--feature .mcard-art{aspect-ratio:auto; flex:1.1; min-height:280px}
.mcard--feature .mcard-body{flex:1; padding:32px}
.mcard--feature h3{font-size:26px}
/* generated art tiles */
.art{position:absolute; inset:0}
.art-1{background:var(--primary-900)} .art-2{background:var(--accent-900)} .art-3{background:var(--secondary-700)} .art-4{background:var(--accent-500)} .art-5{background:var(--secondary-800)} .art-6{background:var(--primary-800)}
.art-glyph{position:relative; width:72px; height:72px; border-radius:20px; background:rgba(255,255,255,.14); display:grid; place-items:center; color:var(--white); box-shadow:0 0 0 14px rgba(255,255,255,.06), 0 0 0 28px rgba(255,255,255,.04)}
.art-4 + .art-glyph,.art-glyph.dark{background:rgba(41,36,92,.1); color:var(--primary-900); box-shadow:0 0 0 14px rgba(41,36,92,.05), 0 0 0 28px rgba(41,36,92,.03)}

/* Chips / filters */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{height:38px; padding:0 16px; border-radius:var(--radius-full); border:1px solid var(--neutral-300); background:var(--white); color:var(--neutral-700); font-size:14px; font-weight:500; cursor:pointer; transition:all .2s}
.chip:hover{border-color:var(--accent-700); color:var(--primary-900)}
.chip[aria-pressed="true"]{background:var(--primary-900); border-color:var(--primary-900); color:var(--white)}
.toolbar{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; margin-bottom:32px}
.search{position:relative; max-width:480px; width:100%}
.search input{width:100%; height:52px; border-radius:var(--radius-full); border:1px solid var(--neutral-300); padding:0 20px 0 48px; background:var(--white); outline:none; font-size:15px; transition:border-color .2s, box-shadow .2s}
.search input:focus{border-color:var(--accent-900); box-shadow:0 0 0 4px var(--accent-500)}
.search svg{position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--neutral-500)}
.page-hero--center .search{margin:28px auto 0}
.is-hidden{display:none !important}
.empty-note{text-align:center; color:var(--neutral-500); padding:32px; border:1px dashed var(--neutral-300); border-radius:var(--radius-lg); margin-top:20px}

/* Steps variable column count */
.steps{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.steps-line{left:calc(50% / var(--n,4)); right:calc(50% / var(--n,4))}

/* Forms */
.form-card{background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg); padding:32px}
.form-card h3{font-size:22px; margin-bottom:20px}
.form{display:grid; gap:16px}
.form .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field label{display:block; margin-bottom:6px; color:var(--neutral-700); font-size:13.5px; font-weight:500}
.field .req{color:var(--error)}
.input,.select,.textarea{width:100%; height:48px; padding:0 14px; background:var(--white); color:var(--neutral-900); border:1px solid var(--neutral-300); border-radius:var(--radius-sm); outline:none; font-size:15px; transition:border-color .2s, box-shadow .2s}
.textarea{height:auto; min-height:120px; padding:12px 14px; resize:vertical}
.select{appearance:none; -webkit-appearance:none; background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2345454F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center/12px no-repeat; padding-right:38px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent-900); box-shadow:0 0 0 4px var(--accent-500)}
.input::placeholder,.textarea::placeholder{color:var(--neutral-500)}
.phone-wrap{display:flex}
.phone-wrap span{display:grid; place-items:center; padding:0 12px; border:1px solid var(--neutral-300); border-right:0; border-radius:var(--radius-sm) 0 0 var(--radius-sm); background:var(--neutral-100); color:var(--neutral-700); font-size:14px}
.phone-wrap .input{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.field.invalid .input,.field.invalid .select,.field.invalid .textarea{border-color:var(--error); box-shadow:0 0 0 3px var(--error-bg)}
.field-err{display:none; color:var(--error); font-size:12.5px; margin-top:6px}
.field.invalid .field-err{display:block}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--neutral-700); line-height:1.5}
.consent input{margin-top:3px; width:16px; height:16px; accent-color:var(--accent-900); flex:none}
.consent a{color:var(--accent-900); text-decoration:underline; text-underline-offset:2px}
.consent.invalid{color:var(--error)}
.form .btn{width:100%}
.form-note{font-size:12.5px; color:var(--neutral-500); text-align:center}
.form-success{display:none; text-align:center; padding:28px 8px}
.form-success .ok{width:60px; height:60px; border-radius:50%; background:var(--success-bg); color:var(--success); display:grid; place-items:center; margin:0 auto 18px; animation:pop .5s var(--ease)}
.form-success h3{font-size:22px; margin:0 0 8px}
.form-success p{color:var(--neutral-700); font-size:15px}
.form-success .link-arrow{margin-top:16px}
.form-card.done .form{display:none}
.form-card.done .form-card-title{display:none}
.form-card.done .form-success{display:block}
@keyframes pop{0%{transform:scale(.4); opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1); opacity:1}}
.form-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start}
.form-layout .h2{margin-top:14px}
.contact-list{display:grid; gap:14px; margin-top:28px}
.contact-list li{display:flex; gap:12px; align-items:flex-start; color:var(--neutral-700); font-size:15px}
.contact-list .ci{flex:none; width:38px; height:38px; border-radius:10px; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center}
.contact-list b{display:block; color:var(--primary-900); font-weight:600; font-size:13px}

/* Tables */
.table-wrap{overflow-x:auto; border:1px solid var(--neutral-200); border-radius:var(--radius-xl); background:var(--white)}
.table{width:100%; border-collapse:collapse; font-size:15px; min-width:640px}
.table th,.table td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--neutral-200); vertical-align:top}
.table thead th{background:var(--neutral-50); font:600 13px var(--font-body); color:var(--neutral-500); text-transform:uppercase; letter-spacing:.06em}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background .2s}
.table tbody tr:hover{background:var(--neutral-50)}
.table td:first-child{color:var(--primary-900); font-weight:500}
.table .us{background:var(--accent-400); color:var(--accent-900); font-weight:600}
.table thead .us{background:var(--accent-900); color:var(--white)}
.table .yes{color:var(--success); font-weight:600}
.table .no{color:var(--neutral-500)}
.table-note{font-size:13px; color:var(--neutral-500); margin-top:14px}

/* Pricing */
.billing-toggle{display:inline-flex; padding:4px; border-radius:var(--radius-full); background:var(--white); border:1px solid var(--neutral-200); margin-top:28px; gap:4px}
.billing-toggle button{height:40px; padding:0 18px; border-radius:var(--radius-full); border:0; background:none; cursor:pointer; color:var(--neutral-700); font-weight:500; font-size:14px; transition:all .2s}
.billing-toggle button[aria-pressed="true"]{background:var(--primary-900); color:var(--white)}
.billing-toggle .save{font-size:11.5px; color:var(--success); font-weight:700; margin-left:4px}
.billing-toggle button[aria-pressed="true"] .save{color:#9BE5B7}
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch}
.plan{position:relative; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-2xl); padding:32px 28px; transition:transform .3s var(--ease), box-shadow .3s}
.plan:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.plan--pop{border:2px solid var(--accent-900); box-shadow:var(--shadow-lg)}
.plan-flag{position:absolute; top:-13px; left:28px; background:var(--accent-900); color:var(--white); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:var(--radius-full)}
.plan h3{font-size:24px}
.plan-for{color:var(--neutral-500); font-size:14.5px; margin-top:6px; min-height:44px}
.plan-price{margin:22px 0 4px; font:500 30px/1.15 var(--font-heading); color:var(--primary-900); letter-spacing:-.02em}
.plan-price small{display:block; font:400 13px var(--font-body); color:var(--neutral-500); margin-top:6px; letter-spacing:0}
.plan .btn{margin-top:20px; width:100%}
.plan .checks{margin-top:24px; padding-top:22px; border-top:1px solid var(--neutral-200)}
.plan .checks li{font-size:14.5px}

/* Stats strip */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid var(--neutral-200); border-radius:var(--radius-xl); background:var(--white); overflow:hidden}
.stat{padding:28px 24px; border-left:1px solid var(--neutral-200)}
.stat:first-child{border-left:0}
.stat b{display:block; font:500 clamp(28px,3vw,38px)/1.1 var(--font-heading); color:var(--accent-900); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:8px; color:var(--neutral-700); font-size:14.5px}

/* Dark band, quotes */
.band-dark{background:var(--primary-900); color:var(--white); position:relative; overflow:hidden}
.band-dark h2{color:var(--white)} .band-dark .lead{color:rgba(255,255,255,.75)}
.band-dark .eyebrow{color:var(--accent-600)} .band-dark .eyebrow .dot{background:var(--accent-600)}
.quote-block{max-width:860px; margin:0 auto; text-align:center}
.quote-block blockquote{margin:0; font:500 clamp(22px,3vw,32px)/1.35 var(--font-heading); letter-spacing:-.02em; color:var(--white); text-wrap:balance}
.quote-block .btn{margin-top:28px}
.pull{margin:36px 0; padding:28px 32px; border-radius:var(--radius-xl); background:var(--accent-400); border-left:0; font:500 22px/1.4 var(--font-heading); color:var(--primary-900); letter-spacing:-.01em}
.pull cite{display:block; margin-top:12px; font:400 14px var(--font-body); color:var(--neutral-700); font-style:normal}

/* Prose / article / legal */
.prose{font-size:17px; line-height:1.75; color:var(--neutral-700)}
.prose h2{font-size:28px; line-height:1.25; margin:48px 0 14px; scroll-margin-top:96px}
.prose h3{font-size:21px; margin:32px 0 10px}
.prose p{margin:0 0 18px}
.prose ul{list-style:disc; padding-left:22px; margin:0 0 18px; display:grid; gap:8px}
.prose a{color:var(--accent-900); text-decoration:underline; text-underline-offset:3px}
.prose > :first-child{margin-top:0}
.answer{padding:22px 24px; border-radius:var(--radius-lg); background:var(--warning-bg); border:1px solid #F3DDB3; color:var(--neutral-900); font-size:16.5px; line-height:1.65; margin-bottom:36px}
.answer b{display:block; font:600 12px var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--warning); margin-bottom:6px}
.doc-layout{display:grid; grid-template-columns:240px minmax(0,1fr); gap:56px; align-items:start}
.doc-layout--article{grid-template-columns:minmax(0,1fr) 260px}
.toc{position:sticky; top:calc(var(--header-h) + 24px); display:grid; gap:2px; font-size:14.5px}
.toc h4{font:700 11.5px var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--neutral-500); margin-bottom:10px}
.toc a{display:block; padding:8px 12px; border-radius:8px; color:var(--neutral-700); border-left:2px solid transparent; transition:all .2s}
.toc a:hover{background:var(--accent-400); color:var(--primary-900)}
.toc a.on{color:var(--accent-900); border-left-color:var(--accent-900); background:var(--accent-400); font-weight:500}
.legal-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-top:24px}
.legal-note{padding:16px 20px; border-radius:var(--radius-md); background:var(--warning-bg); color:var(--warning); font-size:14px; margin-bottom:32px; border:1px solid #F3DDB3}
.article-head{max-width:820px}
.article-meta{display:flex; align-items:center; gap:12px; margin-top:22px; color:var(--neutral-500); font-size:14px; flex-wrap:wrap}
.article-meta .avatar{width:40px; height:40px; font-size:13px}
.share{display:flex; gap:8px; margin-left:auto}
.share a,.share button{width:36px; height:36px; border-radius:10px; border:1px solid var(--neutral-200); display:grid; place-items:center; background:var(--white); color:var(--neutral-700); cursor:pointer; transition:all .2s}
.share a:hover,.share button:hover{border-color:var(--accent-900); color:var(--accent-900)}
.feature-img{margin-top:40px; aspect-ratio:16/9; max-width:100%; border-radius:var(--radius-2xl); overflow:hidden; position:relative; background:var(--primary-900)}
.inline-cta{display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:24px 28px; border-radius:var(--radius-xl); background:var(--primary-900); color:var(--white); margin:36px 0}
.inline-cta b{font:500 20px/1.3 var(--font-heading); display:block}
.inline-cta span{color:rgba(255,255,255,.7); font-size:14.5px}
.author-box{display:grid; grid-template-columns:96px minmax(0,1fr); gap:24px; align-items:center; padding:28px; border-radius:var(--radius-xl); background:var(--neutral-50); border:1px solid var(--neutral-200)}
.author-box .avatar{width:96px; height:96px; font-size:28px}
.side-facts{position:sticky; top:calc(var(--header-h) + 24px); border:1px solid var(--neutral-200); border-radius:var(--radius-xl); padding:24px; background:var(--white)}
.side-facts h4{font:700 11.5px var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--neutral-500); margin-bottom:14px}
.side-facts dl{margin:0; display:grid; gap:14px}
.side-facts dt{font-size:12.5px; color:var(--neutral-500)}
.side-facts dd{margin:2px 0 0; color:var(--primary-900); font-weight:500; font-size:15px}

/* Calculator */
.calc-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start}
.calc-inputs{display:grid; gap:22px}
.range-field label{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:14.5px; font-weight:500; color:var(--primary-900); margin-bottom:10px}
.range-field output{font:600 15px var(--font-mono); color:var(--accent-900); font-variant-numeric:tabular-nums}
.range-row{display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:14px; align-items:center}
.range-row .input{height:42px; font-family:var(--font-mono); font-size:14px}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; background:linear-gradient(90deg,var(--accent-900) var(--p,50%),var(--neutral-200) var(--p,50%)); outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--white); border:3px solid var(--accent-900); box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--white); border:3px solid var(--accent-900); cursor:pointer}
input[type=range]:focus-visible{outline:2px solid var(--accent-900); outline-offset:6px}
.calc-result{position:sticky; top:calc(var(--header-h) + 24px); background:var(--primary-900); color:var(--white); border-radius:var(--radius-2xl); padding:32px; box-shadow:var(--shadow-xl)}
.calc-result h3{color:var(--white); font-size:20px}
.res-rows{display:grid; gap:4px; margin-top:20px}
.res-row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12)}
.res-row span{color:rgba(255,255,255,.72); font-size:14.5px}
.res-row b{font:500 28px/1 var(--font-heading); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--white)}
.res-row.big b{font-size:34px; color:#FFB4B4}
.opp{margin-top:20px; padding:14px 16px; border-radius:var(--radius-md); background:rgba(255,255,255,.08); font-size:14.5px; color:rgba(255,255,255,.85)}
.opp b{color:var(--accent-600)}
.calc-result .hero-ctas{margin-top:22px}
.calc-result .btn{flex:1}
.switch{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--neutral-700); cursor:pointer}
.switch input{width:40px; height:22px; appearance:none; -webkit-appearance:none; background:var(--neutral-300); border-radius:20px; position:relative; cursor:pointer; transition:background .2s; flex:none}
.switch input::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--white); transition:transform .2s var(--ease)}
.switch input:checked{background:var(--accent-900)}
.switch input:checked::after{transform:translateX(18px)}

/* Scheduler */
.sched{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:28px}
.cal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font:600 15px var(--font-heading); color:var(--primary-900)}
.cal-days{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center}
.cal-days .dow{font-size:11.5px; color:var(--neutral-500); font-weight:600; padding-bottom:4px}
.day{aspect-ratio:1; max-width:100%; border-radius:10px; border:1px solid transparent; background:none; font:500 14px var(--font-body); color:var(--neutral-500); cursor:default}
.day.open{background:var(--accent-400); color:var(--accent-900); cursor:pointer; transition:all .15s}
.day.open:hover{border-color:var(--accent-900)}
.day.sel{background:var(--accent-900); color:var(--white)}
.slots{display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start}
.slot{height:44px; border-radius:var(--radius-sm); border:1px solid var(--accent-600); background:var(--white); color:var(--accent-900); font-weight:500; cursor:pointer; transition:all .15s; font-variant-numeric:tabular-nums}
.slot:hover{background:var(--accent-400)}
.slot.sel{background:var(--accent-900); border-color:var(--accent-900); color:var(--white)}
.stepper{display:flex; gap:10px; align-items:center; margin-bottom:22px; font-size:13px; color:var(--neutral-500)}
.stepper i{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:600; background:var(--neutral-100); color:var(--neutral-500)}
.stepper .on i{background:var(--accent-900); color:var(--white)}
.stepper .on{color:var(--primary-900); font-weight:500}
.stepper .line{flex:1; height:2px; background:var(--neutral-200); max-width:60px}
.min-header .nav-bar{justify-content:space-between}

/* Integrations directory */
.int-card{display:flex; flex-direction:column; text-align:left; background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-xl); padding:22px; cursor:pointer; font:inherit; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s}
.int-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent-600)}
.int-logo{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; color:var(--white); font:700 15px var(--font-heading); margin-bottom:18px}
.int-card h3{font-size:17px; margin-top:6px}
.int-card p{color:var(--neutral-700); font-size:14px; margin-top:6px; line-height:1.55}
.int-card .badge{align-self:flex-start; margin-top:16px}
.drawer-back{position:fixed; inset:0; background:rgba(11,31,51,.45); z-index:80; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); background:var(--white); z-index:81; transform:translateX(100%); transition:transform .38s var(--ease); padding:calc(28px + env(safe-area-inset-top,0px)) 28px 28px; overflow-y:auto; box-shadow:var(--shadow-xl)}
.drawer.open{transform:none}
.drawer-back.open{opacity:1; visibility:visible}
.drawer-close{position:absolute; top:calc(18px + env(safe-area-inset-top,0px)); right:18px; width:40px; height:40px; border-radius:10px; border:1px solid var(--neutral-200); background:var(--white); cursor:pointer; display:grid; place-items:center}
.drawer h3{font-size:24px; margin-top:12px}
.drawer h4{font:700 12px var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--neutral-500); margin:26px 0 10px}
.drawer ol{margin:0; padding-left:20px; display:grid; gap:8px; color:var(--neutral-700); font-size:15px}
.code{background:var(--secondary-900); color:#D6E2EC; border-radius:var(--radius-xl); padding:22px 24px; font:13.5px/1.7 var(--font-mono); overflow-x:auto; box-shadow:var(--shadow-xl)}
.code .k{color:#A79DF1} .code .s{color:#9BE5B7} .code .c{color:#6E8AA3} .code .n{color:#F5C77E}

/* Team / people */
.person{text-align:left}
.portrait{aspect-ratio:1; max-width:100%; border-radius:var(--radius-xl); background:linear-gradient(160deg,var(--accent-500),var(--primary-500)); display:grid; place-items:center; color:var(--primary-800); margin-bottom:16px; position:relative; overflow:hidden}
.portrait svg{width:46%; height:46%; opacity:.55}
.person .card-kicker{margin:0}
.person h3{font-size:19px; margin-top:4px}
.person p{color:var(--neutral-700); font-size:14.5px; margin-top:6px}

/* Roles list */
.role{display:flex; justify-content:space-between; gap:24px; align-items:center; padding:24px 26px; background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-xl); transition:border-color .25s, box-shadow .25s}
.role:hover{border-color:var(--accent-600); box-shadow:var(--shadow-md)}
.role h3{font-size:19px}
.role p{color:var(--neutral-700); font-size:14.5px; margin-top:6px}

/* Big 404 */
.big-code{font:600 clamp(96px,16vw,180px)/1 var(--font-heading); letter-spacing:-.05em; color:var(--accent-900); position:relative; display:inline-block}
.big-code .drop-anim{position:absolute; right:-6px; top:58%; width:18px; height:24px; background:var(--accent-700); border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; animation:dropFall 2.4s ease-in infinite}
@keyframes dropFall{0%{transform:translateY(0) scale(.6); opacity:0}15%{opacity:1; transform:translateY(0) scale(1)}80%{opacity:1}100%{transform:translateY(90px); opacity:0}}
.state-demo{padding:18px; border-radius:var(--radius-md); font-size:14px}
.state-ok{background:var(--success-bg); color:var(--success)}
.state-err{background:var(--error-bg); color:var(--error)}

/* Cookie banner, WhatsApp float, exit modal */
.cookie{position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:70; max-width:1040px; margin:0 auto; background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); padding:18px 22px; display:flex; gap:20px; align-items:center; transform:translateY(140%); transition:transform .5s var(--ease)}
.cookie.show{transform:none}
.cookie p{font-size:14px; color:var(--neutral-700); flex:1; min-width:0}
.cookie p a{color:var(--accent-900); text-decoration:underline}
.cookie-actions{display:flex; gap:8px; flex-wrap:wrap; flex:none}
.cookie-actions .btn{min-height:40px; font-size:14px; padding:0 14px}
.cookie-prefs{display:none; grid-column:1/-1; width:100%}
.cookie.prefs{flex-wrap:wrap}
.cookie.prefs .cookie-prefs{display:grid; gap:10px; padding-top:14px; border-top:1px solid var(--neutral-200)}
.pref{display:flex; justify-content:space-between; gap:16px; align-items:center; font-size:14px}
.pref small{display:block; color:var(--neutral-500); font-size:12.5px}
.wa-float{position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:60; width:56px; height:56px; border-radius:50%; background:var(--wa); color:var(--white); display:grid; place-items:center; box-shadow:0 10px 28px rgba(31,168,85,.38); transition:transform .25s var(--ease), bottom .4s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float::after{content:""; position:absolute; inset:0; border-radius:50%; animation:waRing 2.6s infinite}
@keyframes waRing{0%{box-shadow:0 0 0 0 rgba(31,168,85,.45)}70%{box-shadow:0 0 0 14px rgba(31,168,85,0)}100%{box-shadow:0 0 0 0 rgba(31,168,85,0)}}
body.cookie-open .wa-float{bottom:calc(120px + env(safe-area-inset-bottom,0px))}
.modal-back{position:fixed; inset:0; z-index:90; background:rgba(11,31,51,.5); display:grid; place-items:center; padding:16px; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s}
.modal-back.open{opacity:1; visibility:visible}
.modal{position:relative; width:min(480px,100%); background:var(--white); border-radius:var(--radius-2xl); padding:36px 32px 32px; box-shadow:var(--shadow-xl); text-align:center; transform:translateY(16px) scale(.98); transition:transform .35s var(--ease)}
.modal-back.open .modal{transform:none}
.modal h3{font-size:24px; margin-top:16px}
.modal p{color:var(--neutral-700); margin-top:10px}
.modal .hero-ctas{justify-content:center; margin-top:24px}
.modal .drawer-close{top:14px; right:14px}
.modal-ic{width:64px; height:64px; border-radius:18px; margin:0 auto; background:var(--error-bg); color:var(--error); display:grid; place-items:center}

/* Thank-you */
.ty-ic{width:76px; height:76px; border-radius:50%; background:var(--success-bg); color:var(--success); display:grid; place-items:center; margin:0 auto 8px; animation:pop .6s var(--ease)}
.confetti{position:absolute; width:8px; height:14px; border-radius:2px; top:-20px; animation:confetti 3.2s linear forwards; opacity:.9}
@keyframes confetti{to{transform:translateY(520px) rotate(540deg); opacity:0}}

/* Platform diagram (P02) */
.arch{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:56px; text-align:left}
.arch-col{background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-xl); padding:18px; position:relative; box-shadow:var(--shadow-sm)}
.arch-col:not(:last-child)::after{content:""; position:absolute; right:-14px; top:34px; width:12px; height:12px; border-top:2px solid var(--accent-700); border-right:2px solid var(--accent-700); transform:rotate(45deg); z-index:1}
.arch-col h4{font:700 12px var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-900); display:flex; align-items:center; gap:8px}
.arch-col h4 i{width:8px; height:8px; border-radius:50%; background:var(--accent-900); animation:pulse2 2s infinite}
.arch-col:nth-child(2) h4 i{animation-delay:.5s} .arch-col:nth-child(3) h4 i{animation-delay:1s} .arch-col:nth-child(4) h4 i{animation-delay:1.5s}
@keyframes pulse2{0%,100%{box-shadow:0 0 0 0 rgba(108,92,231,.5)}50%{box-shadow:0 0 0 6px rgba(108,92,231,0)}}
.arch-mod{display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border-radius:10px; background:var(--accent-400); font-size:14px; font-weight:500; color:var(--primary-900)}
.arch-mod svg{color:var(--accent-900); flex:none}
.arch-base{grid-column:1/-1; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding:14px; border-radius:var(--radius-lg); background:var(--primary-900); color:var(--white); font-size:14px}
.arch-base span{opacity:.75}

/* Misc mock elements for inner-page visuals */
.mock-pad{padding:18px; display:grid; gap:10px}
.row-line{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--neutral-200); border-radius:10px; font-size:13px}
.row-line b{color:var(--primary-900); font-weight:600}
.row-line .badge{margin-left:auto}
.row-line .mono{margin-left:auto; color:var(--neutral-500); font-size:12px}
.pbar{height:8px; border-radius:6px; background:var(--neutral-100); overflow:hidden}
.pbar i{display:block; height:100%; background:var(--accent-900); border-radius:6px; width:var(--w); transform-origin:left; animation:growX 1.2s .4s var(--ease) both}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.flow{display:grid; gap:10px; padding:20px; justify-items:center; background:var(--neutral-50); background-image:radial-gradient(var(--neutral-300) 1px, transparent 1px); background-size:16px 16px}
.flow-node{width:min(280px,100%); padding:10px 14px; border-radius:10px; background:var(--white); border:1px solid var(--neutral-200); box-shadow:var(--shadow-sm); font-size:13px; display:flex; align-items:center; gap:10px}
.flow-node b{color:var(--primary-900); font-weight:600}
.flow-node .ni{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:none}
.flow-arrow{width:2px; height:16px; background:var(--accent-600); position:relative}
.flow-arrow::after{content:""; position:absolute; bottom:-2px; left:-4px; border:5px solid transparent; border-top-color:var(--accent-600)}
.flow-branch{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%}
.flow-branch .flow-node{width:auto}
.three-pane{display:grid; grid-template-columns:1fr 1.5fr 1fr; min-height:300px}
.three-pane > div{border-right:1px solid var(--neutral-200)}
.three-pane > div:last-child{border-right:0}
.pane-list{display:grid; align-content:start}
.pane-list div{padding:10px 12px; border-bottom:1px solid var(--neutral-100); font-size:12px}
.pane-list div b{display:block; font-size:12.5px; color:var(--primary-900)}
.pane-list div.on{background:var(--accent-400)}
.pane-side{padding:12px; font-size:12px; display:grid; gap:8px; align-content:start}
.pane-side span{color:var(--neutral-500); display:block; font-size:11px}
.pane-side b{color:var(--primary-900)}
.lang-toggle{display:inline-flex; border:1px solid rgba(255,255,255,.3); border-radius:999px; overflow:hidden; font-size:11px}
.lang-toggle span{padding:3px 9px}
.lang-toggle span.on{background:var(--white); color:var(--secondary-800)}

/* ===== Responsive for inner components ===== */
@media (max-width:1100px){
  .hero-split,.form-layout,.calc-grid{grid-template-columns:1fr; gap:48px}
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:1fr; max-width:520px; margin-inline:auto}
  .doc-layout,.doc-layout--article{grid-template-columns:1fr}
  .toc,.side-facts{position:static}
  .toc{display:none}
  .arch{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arch-col::after{display:none}
  .calc-result{position:static}
  .mcard--feature{grid-column:auto; flex-direction:column}
  .mcard--feature .mcard-art{min-height:0; aspect-ratio:16/9}
  .sched{grid-template-columns:1fr}
}
@media (max-width:860px){
  .g3{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--neutral-200)}
  .page-hero{padding-block:48px 64px}
  .cookie{flex-direction:column; align-items:stretch}
  .three-pane{grid-template-columns:1fr 1.4fr}
  .three-pane > div:last-child{display:none}
  .role{flex-direction:column; align-items:flex-start}
}
@media (max-width:600px){
  .g4,.g5,.arch{grid-template-columns:1fr}
  .form .row2{grid-template-columns:1fr}
  .form-card{padding:24px 20px}
  .stats{grid-template-columns:1fr}
  .stat{border-left:0 !important; border-top:1px solid var(--neutral-200)}
  .stat:first-child{border-top:0}
  .author-box{grid-template-columns:1fr}
  .calc-result{padding:24px}
  .res-row b{font-size:24px} .res-row.big b{font-size:28px}
  .cookie-actions .btn{flex:1}
  .wa-float{width:50px; height:50px; right:16px}
  .flow-branch{grid-template-columns:1fr}
}
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--primary-900); color:var(--white); padding:10px 16px; border-radius:8px; transition:top .2s}
.skip:focus{top:12px}
.dt4 .dt-row{display:grid; grid-template-columns:minmax(0,1.7fr) .6fr .6fr .8fr; gap:8px}
.dt4 .dt-row > :not(:first-child){text-align:right}
.steps .step .link-arrow{font-size:14px}
/* layout guards */
.split > *, .hero-split > *, .form-layout > *, .calc-grid > *, .doc-layout > *, .sched > *{min-width:0}
.window{max-width:100%}
@media (max-width:1100px){ .steps[style*="--n:5"]{--n:3} .steps[style*="--n:5"] .steps-line{display:none} }
@media (max-width:860px){ .steps,.steps[style*="--n:5"]{grid-template-columns:1fr} .steps[style*="--n:5"] .steps-line{display:block} }
@media (max-width:860px){ .steps .steps-line{left:27px; right:auto} }

/* =====================================================================
   HOME · HOW IT WORKS — illustrated loop cards (reference design)
   ===================================================================== */
.hiw-section{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--white),var(--neutral-50))}
.hiw-section::before{content:""; position:absolute; left:50%; top:200px; width:1500px; height:520px; transform:translateX(-50%); background:radial-gradient(ellipse 200px 120px at 13% 30%, var(--accent-400), transparent 70%),radial-gradient(ellipse 200px 120px at 38% 25%, var(--accent-400), transparent 70%),radial-gradient(ellipse 200px 120px at 62% 25%, var(--accent-400), transparent 70%),radial-gradient(ellipse 200px 120px at 87% 30%, var(--accent-400), transparent 70%); pointer-events:none; opacity:.9}
.hiw-section .container{position:relative}
.hiw{display:grid; grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr); gap:0 4px; align-items:stretch; margin-top:56px}
.hiw-card{position:relative; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-2xl); padding:20px 20px 26px; box-shadow:0 18px 50px rgba(41,36,92,.07); transition:transform .35s var(--ease), box-shadow .35s, border-color .35s}
.hiw-card:hover{transform:translateY(-6px); box-shadow:0 26px 60px rgba(41,36,92,.12); border-color:var(--accent-600)}
.hiw-num{position:absolute; left:-14px; top:-16px; z-index:2; width:44px; height:44px; border-radius:50%; background:var(--accent-900); color:var(--white); display:grid; place-items:center; font:600 18px/1 var(--font-heading); box-shadow:0 0 0 6px var(--white), 0 8px 20px rgba(108,92,231,.35)}
.hiw-card h3{font-size:22px; margin-top:22px}
.hiw-card p{color:var(--neutral-700); font-size:15px; line-height:1.6; margin-top:10px}
.hiw-card .link-arrow{margin-top:auto; padding-top:20px}
.hiw-arrow{align-self:start; margin-top:112px; width:36px; height:36px; border-radius:50%; background:var(--white); border:1px solid var(--accent-500); color:var(--accent-900); display:grid; place-items:center; position:relative; box-shadow:var(--shadow-sm); z-index:1}
.hiw-arrow::before,.hiw-arrow::after{content:""; position:absolute; top:50%; width:10px; border-top:1.5px dashed var(--accent-600)}
.hiw-arrow::before{right:100%} .hiw-arrow::after{left:100%}
.hiw.in .hiw-arrow svg{animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}

/* shared bits inside the visuals */
.hiw-vis{position:relative; height:200px; border-radius:var(--radius-lg); background:linear-gradient(160deg,var(--neutral-50),var(--accent-400)); padding:14px; overflow:hidden; font-size:12px; color:var(--primary-900)}
.hiw-vis .ln{display:block; height:6px; border-radius:4px; background:var(--neutral-200); margin-top:6px}
.hiw-vis .ln.w80{width:80%} .hiw-vis .ln.w55{width:55%}
.hiw-vis b{font-weight:600; font-size:12.5px}

/* 1 · capture */
.hiw-vis--capture{display:grid; grid-template-columns:auto 34px minmax(0,1fr); align-items:center}
.hiw-sources{display:grid; gap:8px}
.hiw-src{display:flex; align-items:center; gap:8px; background:var(--white); border-radius:10px; padding:6px 10px 6px 6px; box-shadow:var(--shadow-sm); font-weight:500; white-space:nowrap; font-size:11.5px}
.sic{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none}
.hiw-wires{width:34px; height:170px}
.hiw-wires path{fill:none; stroke:var(--accent-700); stroke-width:1.5; stroke-dasharray:3 4; vector-effect:non-scaling-stroke}
.hiw.in .hiw-wires path{animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-14}}
.hiw-newlead{position:relative; background:var(--white); border-radius:12px; padding:12px; box-shadow:var(--shadow-md); min-width:0}
.hiw-newlead b{display:block; margin-bottom:8px}
.hiw-av{width:32px; height:32px; border-radius:50%; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center; float:left; margin-right:8px}
.hiw-newlead .ln{margin-top:7px}
.hiw-tag{clear:both; display:inline-block; margin-top:14px; padding:3px 8px; border-radius:999px; background:var(--accent-400); color:var(--accent-900); font-size:10px; font-weight:600}
.hiw-spark{position:absolute; right:-4px; top:-8px; width:18px; height:18px}
.hiw-spark::before,.hiw-spark::after{content:""; position:absolute; background:var(--accent-900); border-radius:2px}
.hiw-spark::before{left:4px; top:2px; width:2px; height:9px; transform:rotate(-30deg)}
.hiw-spark::after{left:8px; top:9px; width:9px; height:2px}
.hiw.in .hiw-newlead{animation:leadIn 3.2s var(--ease) infinite}
@keyframes leadIn{0%,8%{transform:scale(.96); box-shadow:var(--shadow-sm)}18%{transform:scale(1.02); box-shadow:0 10px 30px rgba(108,92,231,.25)}30%,100%{transform:none; box-shadow:var(--shadow-md)}}

/* 2 · respond */
.hiw-vis--respond{display:grid; grid-template-columns:52px minmax(0,1fr); grid-template-rows:auto auto; gap:10px 10px; align-content:start}
.hiw-bot{width:52px; height:52px; border-radius:14px; background:var(--white); color:var(--accent-900); display:grid; place-items:center; box-shadow:var(--shadow-sm)}
.hiw-bot svg{background:var(--accent-500); border-radius:10px; padding:4px; width:38px; height:38px}
.hiw-bubble{background:var(--white); border-radius:14px; padding:9px 11px; box-shadow:var(--shadow-sm); line-height:1.45; font-size:11.5px}
.hiw-bubble small{display:block; text-align:right; color:var(--neutral-500); font-size:9.5px; margin-top:2px}
.hiw-bubble small b{color:var(--accent-900); font-size:10px}
.hiw-b1{border-top-left-radius:4px}
.hiw-chan{display:flex; gap:6px; align-self:start}
.hiw-chan span{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--white)}
.hiw-chan .wa{background:#25D366} .hiw-chan .ph{background:#3D7BEA}
.hiw-b2{background:#DCF8E7; border-top-right-radius:4px; margin-top:4px}
.js .hiw-b1,.js .hiw-b2{opacity:0; transform:translateY(8px)}
.hiw.in .hiw-b1{animation:bubbleIn .5s .3s var(--ease) forwards}
.hiw.in .hiw-b2{animation:bubbleIn .5s 1.1s var(--ease) forwards}
@keyframes bubbleIn{to{opacity:1; transform:none}}

/* 3 · route */
.hiw-vis--route{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:8px}
.hiw-team{background:var(--white); border-radius:12px; padding:11px; box-shadow:var(--shadow-sm); display:grid; gap:9px; align-content:start}
.hiw-team > b{margin-bottom:2px}
.hiw-mem{display:flex; align-items:center; gap:7px; font-size:11px; white-space:nowrap; min-width:0}
.mav{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:700 9.5px var(--font-body)}
.hiw-mem .dot{width:7px; height:7px; border-radius:50%; margin-left:auto; flex:none}
.hiw-mem .dot.on{background:var(--success)} .hiw-mem .dot.purple{background:var(--accent-900)}
.hiw.in .hiw-mem:nth-child(2){animation:pickRow 3.6s ease-in-out infinite}
@keyframes pickRow{0%,20%{background:transparent}30%,60%{background:var(--accent-400)}75%,100%{background:transparent}}
.hiw-mem{border-radius:8px; padding:2px 3px; margin:-2px -3px}
.hiw-side{display:grid; gap:8px; align-content:start}
.hiw-mini{background:var(--white); border-radius:12px; padding:10px; box-shadow:var(--shadow-sm); display:flex; gap:8px; align-items:flex-start; min-width:0}
.hiw-mini div{min-width:0; flex:1}
.hiw-mini b{display:block; font-size:11.5px}
.hiw-mini span:not(.mi2){display:block; color:var(--neutral-500); font-size:10.5px; margin-top:2px; line-height:1.4}
.mi2{flex:none; width:26px; height:26px; border-radius:8px; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center}
.mi2.bell{background:var(--accent-900); color:var(--white)}
.hiw.in .mi2.bell svg{animation:ring 2.4s ease-in-out infinite; transform-origin:50% 10%}
@keyframes ring{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(14deg)}80%{transform:rotate(-12deg)}85%{transform:rotate(8deg)}90%{transform:rotate(-4deg)}}

/* 4 · visit */
.hiw-vis--visit{display:grid; gap:10px; align-content:start}
.hiw-cal{background:var(--white); border-radius:12px; padding:11px; box-shadow:var(--shadow-sm)}
.hiw-week{display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin-top:8px; text-align:center}
.hiw-week span{font-size:9.5px; color:var(--neutral-500); display:grid; gap:4px; justify-items:center}
.hiw-week i{font-style:normal; width:100%; max-width:30px; height:26px; border-radius:7px; border:1px solid var(--neutral-200); display:grid; place-items:center; font:500 11px var(--font-body); color:var(--neutral-700)}
.hiw-week .sel i{background:var(--accent-900); border-color:var(--accent-900); color:var(--white)}
.hiw.in .hiw-week .sel i{animation:selPop 2.8s ease-in-out infinite}
@keyframes selPop{0%,100%{box-shadow:0 0 0 0 rgba(108,92,231,.45)}50%{box-shadow:0 0 0 6px rgba(108,92,231,0)}}
.hiw-prop{position:relative; background:var(--white); border-radius:12px; padding:9px; box-shadow:var(--shadow-sm); display:grid; grid-template-columns:62px minmax(0,1fr); gap:10px; align-items:center}
.hiw-bldg{height:52px; border-radius:8px; background:linear-gradient(180deg,#BFD7EE,#E7EEF6 70%,#A8C49A 70%); position:relative; overflow:hidden}
.hiw-bldg i{position:absolute; bottom:8px; background:repeating-linear-gradient(0deg,#F4F1EC 0 4px,#8FA9C2 4px 6px); border-radius:2px 2px 0 0}
.hiw-bldg i:nth-child(1){left:8px; width:16px; height:30px}
.hiw-bldg i:nth-child(2){left:24px; width:20px; height:40px; background:repeating-linear-gradient(0deg,#FFFFFF 0 4px,#7A93AD 4px 6px)}
.hiw-bldg i:nth-child(3){left:44px; width:12px; height:24px}
.hiw-pinfo b{display:block; font-size:12px}
.hiw-pinfo span{display:block; color:var(--neutral-500); font-size:10px}
.hiw-ok{position:absolute; right:8px; top:-10px; display:inline-flex; align-items:center; gap:4px; padding:3px 8px 3px 4px; border-radius:999px; background:var(--success-bg); color:var(--success); font-size:9.5px; font-weight:700; box-shadow:var(--shadow-sm)}
.hiw-ok svg{background:var(--success); color:var(--white); border-radius:50%; padding:1px}
.js .hiw-ok{opacity:0; transform:scale(.6)}
.hiw.in .hiw-ok{animation:okPop .5s 1.2s var(--ease) forwards}
@keyframes okPop{to{opacity:1; transform:none}}

/* staggered card entrance */
.js .hiw .hiw-card{opacity:0; translate:0 24px}
.hiw.in .hiw-card{animation:cardIn .7s var(--ease) forwards}
.hiw.in .hiw-card:nth-of-type(2){animation-delay:.12s} .hiw.in .hiw-card:nth-of-type(3){animation-delay:.24s} .hiw.in .hiw-card:nth-of-type(4){animation-delay:.36s}
@keyframes cardIn{to{opacity:1; translate:0 0}}

@media (max-width:1180px){
  .hiw{grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 28px}
  .hiw-arrow{display:none}
}
@media (max-width:640px){
  .hiw{grid-template-columns:minmax(0,1fr); gap:36px; margin-top:40px}
  .hiw-num{left:-6px}
  .hiw-section::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .hiw .hiw-card,.js .hiw-b1,.js .hiw-b2,.js .hiw-ok{opacity:1; transform:none; translate:none}
}
/* hiw refinements */
.hiw-section .container{max-width:1420px}
.hiw{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr)}
.hiw-arrow{width:30px; height:30px}
.hiw-src{padding:5px 9px 5px 5px; font-size:11px; gap:6px}
.sic{width:22px; height:22px}
.sic svg{width:13px; height:13px}
.hiw-vis--capture{grid-template-columns:auto 22px minmax(0,1fr)}
.hiw-wires{width:22px}
.hiw-newlead b,.hiw-team > b,.hiw-cal > b,.hiw-mini b{white-space:nowrap}
.hiw-newlead{padding:10px}
.hiw-tag{white-space:nowrap}
.hiw-vis--route{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:7px}
.hiw-team{padding:10px 9px}
.hiw-team > b{font-size:11.5px}
.hiw-mem{font-size:10.5px; overflow:hidden}
.hiw-mem > :not(.mav):not(.dot){overflow:hidden; text-overflow:ellipsis}
.hiw-mini{padding:9px 8px; gap:6px}
.mi2{width:24px; height:24px}
.mi2 svg{width:15px; height:15px}
.hiw-mini b{font-size:11px}
.hiw-newlead{display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:8px; align-items:center}
.hiw-newlead b{grid-column:1/-1}
.hiw-av{float:none; margin:0; grid-row:span 2}
.hiw-newlead .ln{margin-top:0} .hiw-newlead .ln.w80{align-self:end} .hiw-newlead .ln.w55{align-self:start; margin-top:6px}
.hiw-tag{grid-column:1/-1; justify-self:start}
/* hiw responsive (kept last so it wins) */
@media (max-width:1180px){
  .hiw-section .container{max-width:var(--container)}
  .hiw{grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 28px}
  .hiw-arrow{display:none}
  .hiw-num{left:-8px}
}
@media (max-width:640px){
  .hiw{grid-template-columns:minmax(0,1fr); gap:40px; margin-top:44px}
  .hiw-num{left:-4px; top:-14px; width:40px; height:40px; font-size:16px}
}

/* =====================================================================
   PRODUCT · "Made to be adopted" — illustrated cards (reference design)
   ===================================================================== */
.adopt-section{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--neutral-50),var(--white))}
.adopt-section::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 380px 220px at 0% 30%, var(--accent-400), transparent 70%),radial-gradient(ellipse 300px 200px at 35% 45%, var(--accent-400), transparent 70%),radial-gradient(ellipse 340px 240px at 100% 55%, var(--accent-400), transparent 70%); pointer-events:none}
.adopt-section .container{position:relative; max-width:1420px}
.adopt{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:8px}
.ad-card{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); align-items:center; gap:8px; min-height:320px; padding:30px 24px 30px 30px; background:var(--white); border:1px solid var(--neutral-200); border-radius:var(--radius-2xl); box-shadow:0 18px 50px rgba(41,36,92,.06); transition:translate .35s var(--ease), box-shadow .35s, border-color .35s; overflow:hidden}
.ad-card:hover{translate:0 -6px; box-shadow:0 26px 60px rgba(41,36,92,.12); border-color:var(--accent-600)}
.ad-text{position:relative; z-index:2; display:flex; flex-direction:column; height:100%}
.ad-ic{width:64px; height:64px; border-radius:16px; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center; transition:background .3s, color .3s}
.ad-card:hover .ad-ic{background:var(--accent-900); color:var(--white)}
.ad-text h3{font-size:23px; margin-top:28px}
.ad-text p{color:var(--neutral-700); font-size:15.5px; line-height:1.6; margin-top:12px}
.ad-text .link-arrow{margin-top:auto; padding-top:22px}
.ad-vis{position:relative; height:230px; font-size:11px}
.ad-vis i{display:block}
/* skeleton line */
.ad-vis .w55,.ad-vis .w60,.ad-vis .w70,.ad-vis .w75,.ad-vis .w80,.ad-vis .w90{height:6px; border-radius:4px; background:var(--neutral-200); margin-top:7px}
.w55{width:55%} .w60{width:60%} .w70{width:70%} .w75{width:75%} .w80{width:80%} .w90{width:90%}

/* fast to launch */
.ad-browser{position:absolute; left:0; right:-10px; top:20px; height:180px; background:var(--white); border:1px solid var(--neutral-200); border-radius:14px; box-shadow:var(--shadow-md); overflow:hidden}
.ad-bar{display:flex; gap:5px; padding:9px 11px; border-bottom:1px solid var(--neutral-100); background:var(--neutral-50)}
.ad-bar i{width:7px; height:7px; border-radius:50%}
.ad-body{display:grid; grid-template-columns:30% 1fr; gap:10px; padding:12px}
.ad-side i{height:6px; border-radius:4px; background:var(--neutral-100); margin-top:9px}
.ad-side .dotc{width:12px; height:12px; border-radius:50%; margin-top:0}
.ad-main .w60{background:var(--accent-500); margin-top:0; height:8px}
.ad-tpl{position:absolute; left:28%; right:4%; top:100px; padding:12px; background:var(--white); border-radius:12px; box-shadow:0 16px 40px rgba(41,36,92,.16)}
.ad-tpl .tbar{height:9px; width:62%; border-radius:6px; background:var(--accent-900); margin-bottom:4px}
.ad-cursor{position:absolute; right:6%; top:150px; filter:drop-shadow(0 3px 4px rgba(41,36,92,.3))}
.ad-spark{position:absolute; right:0; top:84px; width:20px; height:20px}
.ad-spark::before,.ad-spark::after{content:""; position:absolute; background:var(--accent-900); border-radius:2px}
.ad-spark::before{left:3px; top:0; width:2.5px; height:10px; transform:rotate(-25deg)}
.ad-spark::after{left:8px; top:10px; width:10px; height:2.5px}
.ad-spark.s2{right:-2px; top:66px}
.adopt.in .ad-tpl{animation:tplIn 4s var(--ease) infinite}
@keyframes tplIn{0%{translate:0 18px; opacity:0}12%,85%{translate:0 0; opacity:1}100%{translate:0 0; opacity:1}}
.adopt.in .ad-cursor{animation:cursorMove 4s var(--ease) infinite}
@keyframes cursorMove{0%{translate:24px 30px; opacity:0}15%{opacity:1}35%{translate:-30px -40px}42%{translate:-30px -40px; scale:.85}48%{translate:-30px -40px; scale:1}70%,100%{translate:0 0}}

/* mobile-friendly */
.ad-glow{position:absolute; left:50%; top:50%; width:190px; height:190px; translate:-50% -50%; border-radius:50%; background:radial-gradient(circle, var(--accent-500), transparent 70%); opacity:.8}
.ad-phone{position:absolute; left:50%; top:4px; translate:-55% 0; width:132px; height:222px; background:var(--white); border:5px solid #23214A; border-radius:26px; padding:20px 10px 10px; box-shadow:0 20px 40px rgba(41,36,92,.22)}
.ad-notch{position:absolute; left:50%; top:5px; width:44px; height:10px; translate:-50% 0; background:#23214A; border-radius:8px}
.ad-phone > b{display:block; font-size:10.5px; color:var(--primary-900); margin-bottom:4px}
.ad-row{display:flex; gap:7px; align-items:center; padding:7px 0; border-bottom:1px solid var(--neutral-100)}
.ri{flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center}
.rl{flex:1; min-width:0}
.rl .w90,.rl .w80{margin-top:0}
.rl .w55{margin-top:5px; height:5px; background:var(--neutral-100)}
.ad-tabs{position:absolute; left:10px; right:10px; bottom:8px; display:flex; justify-content:space-around; padding-top:7px; border-top:1px solid var(--neutral-100); color:var(--neutral-500)}
.ad-tabs .on{color:var(--primary-900)}
.ad-bell{position:absolute; right:6%; top:96px; width:52px; height:52px; border-radius:14px; background:var(--white); color:var(--accent-900); display:grid; place-items:center; box-shadow:0 14px 30px rgba(41,36,92,.18)}
.ad-bell::after{content:""; position:absolute; right:10px; top:10px; width:8px; height:8px; border-radius:50%; background:var(--error); box-shadow:0 0 0 2px var(--white)}
.adopt.in .ad-bell svg{animation:ring 2.6s ease-in-out infinite; transform-origin:50% 12%}
.adopt.in .ad-bell{animation:floaty 5s ease-in-out infinite}
.js .ad-row{opacity:0; translate:0 6px}
.adopt.in .ad-row{animation:rowIn .45s var(--ease) forwards}
.adopt.in .ad-row:nth-of-type(2){animation-delay:.35s} .adopt.in .ad-row:nth-of-type(3){animation-delay:.6s} .adopt.in .ad-row:nth-of-type(4){animation-delay:.85s}
@keyframes rowIn{to{opacity:1; translate:0 0}}

/* secure by design */
.ad-orbit{position:absolute; left:50%; top:50%; width:200px; height:200px; translate:-50% -50%; border-radius:50%; border:1px solid var(--accent-500); background:radial-gradient(circle, rgba(226,222,250,.9) 0 34%, transparent 35%)}
.ad-orbit::before{content:""; position:absolute; inset:28px; border-radius:50%; border:1px solid var(--accent-500); opacity:.7}
.ad-orbit i{position:absolute; inset:-1px; border-radius:50%}
.ad-orbit i::before{content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--accent-700)}
.ad-orbit .o1::before{left:14px; top:30px} .ad-orbit .o2::before{right:2px; top:110px}
.adopt.in .ad-orbit .o1{animation:spin 14s linear infinite} .adopt.in .ad-orbit .o2{animation:spin 20s linear infinite reverse}
@keyframes spin{to{rotate:360deg}}
.ad-shield{position:absolute; left:50%; top:50%; translate:-50% -50%; filter:drop-shadow(0 12px 20px rgba(108,92,231,.35))}
.adopt.in .ad-shield{animation:shieldPulse 3s ease-in-out infinite}
@keyframes shieldPulse{0%,100%{scale:1}50%{scale:1.06}}
.ad-chip{position:absolute; display:inline-flex; align-items:center; gap:7px; padding:8px 12px; background:var(--white); border-radius:10px; box-shadow:0 10px 26px rgba(41,36,92,.12); font-weight:500; font-size:11.5px; color:var(--primary-900); white-space:nowrap}
.ad-chip svg{color:var(--accent-900)}
.ad-chip.c1{right:-6px; top:8px} .ad-chip.c2{right:-14px; top:134px} .ad-chip.c3{left:2px; bottom:4px}
.adopt.in .ad-chip{animation:floaty 5s ease-in-out infinite}
.adopt.in .ad-chip.c2{animation-delay:-1.6s} .adopt.in .ad-chip.c3{animation-delay:-3.2s}

@media (max-width:1240px){
  .adopt{grid-template-columns:minmax(0,1fr); max-width:760px; margin-inline:auto}
  .adopt-section .container{max-width:var(--container)}
  .ad-card{min-height:280px}
}
@media (max-width:600px){
  .ad-card{grid-template-columns:minmax(0,1fr); padding:26px 22px}
  .ad-vis{order:-1; margin:0 auto 4px; width:100%; max-width:300px}
  .ad-text h3{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){ .js .ad-row{opacity:1; translate:none} }

/* =====================================================================
   PRODUCT HERO · Acquire / Engage / Operate / Govern stage map
   ===================================================================== */
.stage-map{display:grid; grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1fr); align-items:stretch; margin-top:56px; text-align:left}
.page-hero:has(.stage-map) > .container{max-width:1420px}
.sm-card{position:relative; display:flex; flex-direction:column; padding:22px; background:rgba(255,255,255,.92); border:1px solid var(--neutral-200); border-radius:var(--radius-2xl); box-shadow:0 18px 50px rgba(41,36,92,.07); backdrop-filter:blur(6px)}
.js .sm-card{opacity:0; translate:0 22px}
.stage-map.in .sm-card{animation:cardIn .7s var(--ease) forwards; animation-delay:calc(var(--d) * .12s)}
.sm-top{position:relative; height:96px}
.sm-ic{position:absolute; left:0; top:0; width:56px; height:56px; border-radius:14px; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center}
.sm-card h3{font:600 15px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--primary-900); margin-top:6px}
.sm-card > p{color:var(--neutral-700); font-size:15px; line-height:1.5; margin-top:8px; min-height:45px}
.sm-rows{display:grid; gap:10px; margin-top:20px}
.sm-row{display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px; background:var(--neutral-50); border:1px solid var(--neutral-100); color:var(--primary-900); font-weight:500; font-size:15px; transition:background .2s, border-color .2s, translate .2s var(--ease)}
.sm-ri{flex:none; color:var(--accent-900); display:grid}
.sm-ri.wa{color:#25D366}
.sm-go{margin-left:auto; display:grid; color:var(--primary-900); transition:translate .25s var(--ease)}
.sm-row:hover{background:var(--accent-400); border-color:var(--accent-500); translate:2px 0}
.sm-row:hover .sm-go{translate:4px 0; color:var(--accent-900)}
/* connectors */
.sm-conn{position:relative; align-self:start; margin-top:150px; height:30px; display:grid; place-items:center}
.sm-conn::before{content:""; position:absolute; left:2px; right:2px; top:50%; border-top:2px dotted var(--accent-700)}
.sm-conn i{position:relative; width:24px; height:24px; border-radius:50%; background:var(--accent-900); color:var(--white); display:grid; place-items:center; box-shadow:0 0 0 5px var(--white)}
.sm-conn i svg{width:12px; height:12px}
.stage-map.in .sm-conn i svg{animation:nudge 1.8s ease-in-out infinite}
/* illustrations (top-right of each card) */
.sm-vis{position:absolute; right:0; top:0; width:58%; height:96px}
.sm-lines{display:grid; gap:5px; flex:1}
.sm-lines i{display:block; height:5px; border-radius:4px; background:var(--neutral-200)}
.sm-lines i:first-child{width:80%} .sm-lines i:last-child{width:55%}
/* acquire */
.sm-wires{position:absolute; inset:6px 0 0; width:100%; height:86px}
.sm-wires path{fill:none; stroke:var(--accent-700); stroke-width:1.5; stroke-dasharray:3 4}
.stage-map.in .sm-wires path{animation:flow 1.2s linear infinite}
.sm-logo{position:absolute; top:0; width:36px; height:36px; border-radius:50%; background:var(--white); display:grid; place-items:center; box-shadow:0 6px 16px rgba(41,36,92,.12); translate:-50% 0}
.sm-logo.l1{left:17%; top:10px} .sm-logo.l2{left:49%; top:-4px} .sm-logo.l3{left:82%; top:10px}
.stage-map.in .sm-logo{animation:floaty 4s ease-in-out infinite} .stage-map.in .sm-logo.l2{animation-delay:-1.3s} .stage-map.in .sm-logo.l3{animation-delay:-2.6s}
.sm-hub{position:absolute; left:49%; top:70px; translate:-50% 0; width:24px; height:24px; border-radius:50%; background:var(--accent-900); color:var(--white); display:grid; place-items:center; box-shadow:0 0 0 4px var(--accent-500)}
.stage-map.in .sm-hub{animation:pulse2 2s infinite}
/* engage */
.sm-msg{position:absolute; right:22px; top:6px; width:100px; padding:10px; border-radius:12px; background:var(--accent-400); display:flex; gap:8px; align-items:center; box-shadow:var(--shadow-sm)}
.sm-wave{display:flex; align-items:center; gap:2px; height:16px}
.sm-wave i{display:block; width:2.5px; border-radius:2px; background:var(--accent-900); height:40%}
.sm-wave i:nth-child(2){height:90%} .sm-wave i:nth-child(3){height:60%} .sm-wave i:nth-child(4){height:100%} .sm-wave i:nth-child(5){height:50%}
.stage-map.in .sm-wave i{animation:eq 1s ease-in-out infinite} .sm-wave i:nth-child(2){animation-delay:-.2s} .sm-wave i:nth-child(3){animation-delay:-.4s} .sm-wave i:nth-child(4){animation-delay:-.6s} .sm-wave i:nth-child(5){animation-delay:-.8s}
.sm-msg .sm-lines i{background:var(--accent-600)}
.sm-wa{position:absolute; right:4px; top:40px; width:54px; height:54px; border-radius:14px; background:#25D366; color:var(--white); display:grid; place-items:center; box-shadow:0 0 0 4px var(--white), 0 12px 24px rgba(37,211,102,.35)}
.stage-map.in .sm-wa{animation:floaty 3.6s ease-in-out infinite}
/* operate */
.sm-list{position:absolute; right:8px; top:4px; width:130px; padding:10px; border-radius:12px; background:var(--white); border:1px solid var(--neutral-100); box-shadow:0 10px 24px rgba(41,36,92,.1); display:grid; gap:10px}
.sm-list > div{display:flex; align-items:center; gap:8px}
.sm-u{flex:none; width:22px; height:22px; border-radius:50%; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center}
.sm-drop{display:block; width:8px; height:10px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; background:var(--neutral-200); flex:none}
.sm-check{position:absolute; right:0; top:56px; width:32px; height:32px; border-radius:50%; background:var(--accent-900); color:var(--white); display:grid; place-items:center; box-shadow:0 0 0 4px var(--white), 0 8px 18px rgba(108,92,231,.35)}
.js .sm-check{scale:0}
.stage-map.in .sm-check{animation:okPop2 .5s 1s var(--ease) forwards}
@keyframes okPop2{to{scale:1}}
/* govern */
.sm-bars{position:absolute; right:30px; top:10px; width:100px; height:76px; padding:10px 10px 8px; border-radius:12px; background:var(--white); box-shadow:0 10px 24px rgba(41,36,92,.1); display:flex; align-items:flex-end; gap:6px}
.sm-bars i{display:block; flex:1; height:var(--h); border-radius:4px 4px 2px 2px; background:var(--accent-600); transform-origin:bottom}
.sm-bars i:nth-child(4){background:var(--accent-900)}
.js .sm-bars i{scale:1 0}
.stage-map.in .sm-bars i{animation:barUp .8s var(--ease) forwards}
.stage-map.in .sm-bars i:nth-child(2){animation-delay:.1s} .stage-map.in .sm-bars i:nth-child(3){animation-delay:.2s} .stage-map.in .sm-bars i:nth-child(4){animation-delay:.3s} .stage-map.in .sm-bars i:nth-child(5){animation-delay:.4s}
@keyframes barUp{to{scale:1 1}}
.sm-shield{position:absolute; right:0; top:0; width:40px; height:40px; border-radius:12px; background:var(--white); color:var(--accent-900); display:grid; place-items:center; box-shadow:0 8px 18px rgba(41,36,92,.14)}
/* buyer-record band */
.sm-band{grid-column:1/-1; position:relative; overflow:hidden; margin-top:28px; display:flex; align-items:center; justify-content:center; gap:20px; padding:20px 28px; border-radius:22px; background:linear-gradient(90deg,var(--primary-900),#2D2470 55%,#4A3BB8); color:var(--white)}
.sm-band::after{content:""; position:absolute; top:0; bottom:0; width:40%; left:-40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); animation:shine 5s ease-in-out infinite}
@keyframes shine{0%,40%{left:-40%}100%{left:120%}}
.sm-band-av{flex:none; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.14); display:grid; place-items:center}
.sm-band-div{width:1px; height:32px; background:rgba(255,255,255,.25)}
.sm-band p{font-size:16px; color:rgba(255,255,255,.8)}
.sm-band b{color:var(--white); font-weight:600}
@media (max-width:1180px){
  .stage-map{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
  .sm-conn{display:none}
  .sm-band{margin-top:6px}
}
@media (max-width:640px){
  .stage-map{grid-template-columns:minmax(0,1fr); margin-top:40px}
  .sm-band{flex-direction:column; text-align:center; gap:10px; padding:20px}
  .sm-band-div{display:none}
}
@media (prefers-reduced-motion:reduce){ .js .sm-card{opacity:1; translate:none} .js .sm-check{scale:1} .js .sm-bars i{scale:1} }

/* =====================================================================
   PRODUCT · "How the pieces connect" — lead-to-living journey
   ===================================================================== */
.jr-section{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--accent-400),var(--neutral-50) 40%,var(--white))}
.jr-section::before{content:""; position:absolute; right:-160px; top:-160px; width:520px; height:520px; border-radius:50%; background:rgba(255,255,255,.55)}
.jr-section::after{content:""; position:absolute; left:-200px; top:120px; width:520px; height:520px; border-radius:50%; background:rgba(255,255,255,.35)}
.jr-section .container{position:relative; z-index:1; max-width:1520px}
.journey{display:grid; grid-template-columns:repeat(4, minmax(0,1fr) 34px) minmax(0,1fr); align-items:stretch}
.jr-card{display:flex; flex-direction:column; gap:18px; padding:20px; background:rgba(255,255,255,.9); border:1px solid var(--neutral-200); border-radius:var(--radius-2xl); box-shadow:0 18px 50px rgba(41,36,92,.07); transition:translate .35s var(--ease), box-shadow .35s}
.jr-card:hover{translate:0 -5px; box-shadow:0 26px 60px rgba(41,36,92,.12)}
.js .jr-card{opacity:0}
.journey.in .jr-card{animation:jrIn .7s var(--ease) forwards; animation-delay:calc(var(--d) * .12s)}
@keyframes jrIn{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
.jr-head{display:flex; gap:14px; align-items:flex-start; min-height:84px}
.jr-ic{flex:none; width:52px; height:52px; border-radius:14px; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center}
.jr-head h3{font-size:21px; font-weight:600}
.jr-head p{color:var(--neutral-700); font-size:14px; line-height:1.45; margin-top:6px}
.jr-panel{flex:1; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--neutral-100); border-radius:16px; padding:14px; box-shadow:0 8px 22px rgba(41,36,92,.05); font-size:12.5px; color:var(--primary-900)}
.jr-conn{align-self:center; display:grid; place-items:center; color:var(--accent-900); position:relative; height:24px}
.jr-conn::before{content:""; position:absolute; left:0; width:12px; top:50%; border-top:2px dotted var(--accent-700)}
.jr-conn svg{margin-left:10px}
.journey.in .jr-conn svg{animation:nudge 1.8s ease-in-out infinite}
.jr-btn{margin-top:auto; display:flex; justify-content:center; align-items:center; gap:8px; height:40px; border-radius:10px; background:var(--accent-400); color:var(--accent-900); font-weight:600; font-size:13.5px; transition:background .2s, color .2s}
.jr-btn:hover{background:var(--accent-900); color:var(--white)}
.jr-btn svg{transition:translate .2s} .jr-btn:hover svg{translate:3px 0}
.jr-btn.dark{background:var(--primary-900); color:var(--white)}
.jr-btn.dark:hover{background:var(--accent-900)}
/* attract */
.jr-src{gap:6px}
.jr-srow{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; background:var(--neutral-50); font-weight:500; font-size:13px}
.jr-srow b{margin-left:auto; font:500 12.5px var(--font-body); color:var(--neutral-700); font-variant-numeric:tabular-nums}
.jr-sic{width:22px; display:grid; place-items:center; color:var(--primary-900)}
.jr-srow{transition:background .2s, translate .2s}
.jr-srow:hover{background:var(--accent-400); translate:2px 0}
/* capture */
.jr-lh{display:flex; justify-content:space-between; align-items:center}
.jr-lh b{font-size:13.5px}
.jr-now{display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; background:var(--success-bg); color:var(--success); font-size:10.5px; font-weight:600}
.jr-now i{width:6px; height:6px; border-radius:50%; background:var(--success); animation:pulse 1.8s infinite}
.jr-person{display:flex; align-items:center; gap:10px; margin:14px 0 12px; padding-bottom:12px; border-bottom:1px solid var(--neutral-100)}
.jr-av{flex:none; width:40px; height:40px; border-radius:50%; background:var(--accent-400); color:var(--primary-900); display:grid; place-items:center; font:600 13px var(--font-heading)}
.jr-person b{display:block; font-size:13px} .jr-person div span{font-size:12px; color:var(--neutral-700)}
.jr-kebab{margin-left:auto; color:var(--neutral-700); display:grid}
.jr-facts{display:grid; gap:10px; margin-bottom:14px; color:var(--neutral-700); font-size:12px}
.jr-facts li{display:flex; align-items:center; gap:10px; min-width:0; overflow-wrap:anywhere}
.jr-facts svg{flex:none; color:var(--primary-900)}
/* engage */
.jr-tlist{position:relative; display:grid; gap:12px; padding-left:16px; margin-bottom:14px}
.jr-tlist::before{content:""; position:absolute; left:3px; top:8px; bottom:8px; width:2px; background:var(--accent-500); transform-origin:top}
.js .jr-tlist::before{scale:1 0}
.journey.in .jr-tlist::before{animation:barUp 1.4s .4s var(--ease) forwards}
.jr-ti{position:relative; display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:8px; align-items:center}
.jr-ti::before{content:""; position:absolute; left:-16px; top:50%; translate:0 -50%; width:8px; height:8px; border-radius:50%; background:var(--accent-700); box-shadow:0 0 0 3px var(--accent-400)}
.jr-tic{width:30px; height:30px; border-radius:50%; display:grid; place-items:center}
.jr-ti b{display:block; font-size:11.5px; font-weight:600}
.jr-ti span{display:block; font-size:10.5px; color:var(--neutral-500)}
.jr-ti time{font-size:9.5px; color:var(--neutral-500); white-space:nowrap}
.js .jr-ti{opacity:0; translate:-8px 0}
.journey.in .jr-ti{animation:tiIn .45s var(--ease) forwards; animation-delay:calc(.5s + var(--i) * .3s)}
@keyframes tiIn{to{opacity:1; translate:0 0}}
/* visit */
.jr-visit{padding:10px}
.jr-photo{position:relative; height:118px; border-radius:12px; overflow:hidden}
.jr-sky{position:absolute; inset:0; background:linear-gradient(180deg,#9EC9F0,#DCEBF7 70%)}
.jr-t{position:absolute; bottom:16px; border-radius:3px 3px 0 0; background:repeating-linear-gradient(0deg,#F7F3EC 0 7px,#56708A 7px 10px),#F7F3EC; box-shadow:inset -10px 0 0 rgba(0,0,0,.08)}
.jr-t::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(247,243,236,.9) 9px 12px)}
.jr-t.t1{left:22%; width:30%; height:80px} .jr-t.t2{left:50%; width:26%; height:66px; filter:brightness(.96)} .jr-t.t3{left:6%; width:18%; height:50px; filter:brightness(.92)}
.jr-tree{position:absolute; bottom:12px; border-radius:50% 50% 45% 45%; background:radial-gradient(circle at 40% 35%,#7FB069,#3F7D3A)}
.jr-tree.r1{left:2%; width:26px; height:34px} .jr-tree.r2{right:6%; width:34px; height:44px} .jr-tree.r3{right:20%; width:20px; height:26px}
.jr-ground{position:absolute; left:0; right:0; bottom:0; height:16px; background:linear-gradient(180deg,#9DBF83,#7FA766)}
.jr-date{position:absolute; left:10px; top:10px; width:44px; padding:5px 0; border-radius:10px; background:var(--white); text-align:center; line-height:1.1; box-shadow:var(--shadow-sm)}
.jr-date small{display:block; font-size:8.5px; color:var(--neutral-500); font-weight:600}
.jr-date b{display:block; font:600 18px var(--font-heading); color:var(--primary-900)}
.journey.in .jr-date{animation:floaty 4s ease-in-out infinite}
.jr-vinfo{padding:10px 4px 8px}
.jr-vinfo b{display:block; font-size:13.5px}
.jr-vinfo span{display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--neutral-700)}
.jr-vmeta{display:grid; gap:7px; padding:10px; border-radius:10px; background:var(--neutral-50); font-size:11.5px; color:var(--neutral-700); margin-bottom:10px}
.jr-vmeta span{display:flex; align-items:center; gap:8px}
.jr-vmeta i{font-style:normal; color:var(--neutral-300)}
/* measure */
.jr-mh{display:flex; justify-content:space-between; align-items:center; gap:8px}
.jr-mh b{font-size:13px}
.jr-sel{display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid var(--neutral-200); border-radius:8px; font-size:10.5px; color:var(--neutral-700); white-space:nowrap}
.jr-rate{display:flex; align-items:center; gap:10px; margin-top:10px}
.jr-rate b{font:600 26px var(--font-heading); color:var(--primary-900)}
.jr-up{padding:2px 7px; border-radius:999px; background:var(--success-bg); color:var(--success); font-size:11px; font-weight:600}
.jr-mt{font-size:12px; color:var(--neutral-700); margin-top:2px}
.jr-chart{position:relative; display:flex; align-items:flex-end; gap:8px; height:78px; margin-top:12px; padding-top:20px}
.jr-chart i{flex:1; height:var(--h); border-radius:3px 3px 0 0; background:var(--accent-500); transform-origin:bottom}
.jr-chart i.hi{background:var(--accent-900)}
.js .jr-chart i{scale:1 0}
.journey.in .jr-chart i{animation:barUp .7s var(--ease) forwards; animation-delay:calc(.6s + var(--i) * .07s)}
.jr-tip{position:absolute; right:-6px; top:-8px; padding:3px 7px; border-radius:6px; background:var(--accent-900); color:var(--white); font-size:10.5px; font-weight:600}
.jr-tip::after{content:""; position:absolute; left:50%; bottom:-4px; translate:-50% 0; border:4px solid transparent; border-bottom:0; border-top-color:var(--accent-900)}
.js .jr-tip{opacity:0; translate:0 6px}
.journey.in .jr-tip{animation:tiIn .4s 1.4s var(--ease) forwards}
.jr-wk{display:grid; grid-template-columns:repeat(4,1fr); text-align:center; font-size:10.5px; color:var(--neutral-500); margin-top:6px}
.jr-kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:auto; padding-top:12px}
.jr-kpi div{padding:8px; border-radius:10px; background:var(--neutral-50)}
.jr-kpi b{display:block; font:600 16px var(--font-heading); color:var(--primary-900); font-variant-numeric:tabular-nums}
.jr-kpi span{font-size:10px; color:var(--neutral-500)}
.jr-note{text-align:center; font-size:12px; color:var(--neutral-500); margin-top:18px}
/* tablet & phone: horizontal swipe through the journey */
@media (max-width:1300px){
  .jr-scroll{overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter) * -1); padding:8px var(--gutter) 18px; scrollbar-width:thin}
  .journey{grid-template-columns:repeat(4, 290px 34px) 290px; width:max-content}
  .jr-card{scroll-snap-align:start}
  .jr-note::before{content:"Swipe to follow the journey →  ·  "}
}
@media (max-width:600px){
  .journey{grid-template-columns:repeat(4, 82vw 28px) 82vw}
}
@media (prefers-reduced-motion:reduce){ .js .jr-card,.js .jr-ti,.js .jr-tip{opacity:1; translate:none} .js .jr-chart i,.js .jr-tlist::before{scale:1} }
/* journey refinements */
.jr-section .container{max-width:1580px}
.journey{grid-template-columns:repeat(4, minmax(0,1fr) 28px) minmax(0,1fr)}
.jr-card{padding:16px; gap:16px}
.jr-conn::before{width:8px} .jr-conn svg{margin-left:8px; width:16px; height:16px}
.jr-head{gap:12px; min-height:78px}
.jr-ic{width:46px; height:46px; border-radius:12px}
.jr-head h3{font-size:20px}
.jr-head p{font-size:13.5px}
.jr-srow{white-space:nowrap; gap:10px; font-size:12.5px; padding:9px 9px}
.jr-ti{grid-template-columns:30px minmax(0,1fr)}
.jr-ti b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.jr-ti time{display:block; margin-top:1px; font-size:9.5px; color:var(--accent-800)}
.jr-tlist{gap:13px}
.jr-kpi div{padding:7px 6px}
.jr-kpi span{white-space:nowrap; display:block}
.jr-mh b{white-space:nowrap}
@media (max-width:1300px){
  .journey{grid-template-columns:repeat(4, 290px 28px) 290px}
}
@media (max-width:600px){
  .journey{grid-template-columns:repeat(4, 82vw 24px) 82vw}
}
.jr-ti span.jr-tic{display:grid; place-items:center}
.jr-ti b{white-space:normal; overflow:visible; font-size:11.5px; line-height:1.3}
@media (max-width:1300px){ .jr-scroll{scroll-padding-inline:var(--gutter)} .journey{padding-right:var(--gutter)} }

/* =====================================================================
   INVENTORY HERO — availability matrix (reference design)
   ===================================================================== */
.ivh .container{max-width:1440px}
.ivh-split{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); gap:48px}
.ivh h1{font-size:clamp(38px,4.6vw,62px)}
.ivh-eb{padding:7px 12px; border-radius:999px; background:var(--accent-400)}
.ivh-feats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:30px}
.ivh-f{display:flex; gap:12px; align-items:flex-start}
.ivh-fi{flex:none; width:46px; height:46px; border-radius:12px; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center}
.ivh-f b{display:block; font-size:15px; color:var(--primary-900); font-weight:600}
.ivh-f span{display:block; font-size:13px; color:var(--neutral-700); margin-top:4px; line-height:1.45}
.ivh .hero-ctas{margin-top:34px}
.ivm-wrap{position:relative; padding:36px 0 46px}
.ivm-wrap::before{content:""; position:absolute; left:-10%; top:-4%; width:110%; height:100%; border-radius:50%; background:radial-gradient(ellipse at center, var(--accent-500), transparent 65%); opacity:.6; z-index:-1}
.ivm-dots{position:absolute; width:110px; height:70px; background-image:radial-gradient(var(--accent-600) 1.5px, transparent 1.6px); background-size:16px 16px; opacity:.7}
.ivm-dots.d1{right:120px; top:0} .ivm-dots.d2{left:-50px; bottom:20px}
.ivm-card{position:relative; background:var(--white); border:1px solid var(--neutral-200); border-radius:24px; padding:22px; box-shadow:0 30px 70px rgba(41,36,92,.14)}
.ivm-top{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr); gap:10px}
.ivm-proj,.ivm-sel{display:flex; align-items:center; gap:10px; min-height:56px; padding:8px 12px; border:1px solid var(--neutral-200); border-radius:12px; background:var(--white); color:var(--primary-900); font-size:13.5px; font-weight:600; min-width:0}
.ivm-proj > svg:last-child,.ivm-sel > svg:last-child{margin-left:auto; flex:none; color:var(--neutral-700)}
.ivm-proj div{min-width:0} .ivm-proj b{display:block; font-size:13.5px} .ivm-proj span{display:block; font-size:11px; color:var(--neutral-500); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ivm-thumb{flex:none; position:relative; width:58px; height:40px; border-radius:8px; overflow:hidden; background:linear-gradient(180deg,#A8CBEA,#DCEAF6)}
.ivm-thumb i{position:absolute; bottom:0; background:repeating-linear-gradient(0deg,#F6F2EA 0 4px,#5E7690 4px 6px); border-radius:2px 2px 0 0}
.ivm-thumb i:nth-child(1){left:6px; width:16px; height:30px} .ivm-thumb i:nth-child(2){left:22px; width:20px; height:36px} .ivm-thumb i:nth-child(3){left:42px; width:12px; height:22px; filter:brightness(.9)}
.ivm-sel{position:relative; cursor:pointer; transition:border-color .2s, box-shadow .2s}
.ivm-sel:hover,.ivm-sel:focus-within{border-color:var(--accent-700); box-shadow:0 0 0 3px var(--accent-400)}
.ivm-sel > svg:first-child{flex:none; color:var(--accent-900); background:var(--accent-400); border-radius:6px; padding:4px; width:26px; height:26px}
.ivm-sel select{appearance:none; -webkit-appearance:none; border:0; background:none; font:600 13.5px var(--font-body); color:var(--primary-900); flex:1; min-width:0; cursor:pointer; outline:none; padding-right:4px}
.ivm-legend{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin:18px 4px 14px; font-size:13px; color:var(--neutral-700)}
.ivm-legend span{display:inline-flex; align-items:center; gap:7px}
.ivm-legend i{width:12px; height:12px; border-radius:50%}
.lg-a{background:var(--success)} .lg-h{background:#F5C451} .lg-b{background:var(--accent-700)}
.ivm-upd{margin-left:auto; font-size:12px} .ivm-upd b{font-weight:500; color:var(--primary-900); font-variant-numeric:tabular-nums}
.ivm-upd i{width:7px !important; height:7px !important; background:var(--success); animation:pulse 1.8s infinite}
.ivm-grid{display:grid; grid-template-columns:62px repeat(6,minmax(0,1fr)); gap:7px}
.ivm-col{text-align:center; padding:8px 0; border-radius:8px; background:var(--neutral-50); font:500 12.5px var(--font-body); color:var(--neutral-700)}
.ivm-fl{display:grid; place-items:center; border-radius:8px; background:var(--neutral-50); font:500 12.5px var(--font-body); color:var(--neutral-700)}
.ivm-u{height:32px; border-radius:7px; display:grid; place-items:center; font:600 12.5px var(--font-body); cursor:default; outline:none; transition:background .35s, color .35s, transform .2s, box-shadow .2s}
.ivm-u.s-a{background:#E3F6E8; color:#2E8B4E} .ivm-u.s-h{background:#FFF1CC; color:#B7791F} .ivm-u.s-b{background:#E8E5FB; color:#6152D9}
.ivm-u:hover,.ivm-u:focus-visible{transform:scale(1.08); box-shadow:0 6px 14px rgba(41,36,92,.15); position:relative; z-index:1}
.ivm-u.live{animation:livePing 1.4s var(--ease)}
@keyframes livePing{0%{box-shadow:0 0 0 0 rgba(108,92,231,.55); transform:scale(1.15)}100%{box-shadow:0 0 0 10px rgba(108,92,231,0); transform:none}}
.ivm-u.flash{animation:flashIn .5s var(--ease)}
@keyframes flashIn{from{opacity:.2; transform:scale(.85)}}
.js .ivm-u{opacity:0}
.ivh .ivm-u{animation:cellIn .4s var(--ease) forwards; animation-delay:calc(.5s + var(--n) * 18ms)}
@keyframes cellIn{from{opacity:0; transform:scale(.7)}to{opacity:1; transform:none}}
.ivm-tip{position:absolute; left:50%; bottom:12px; translate:-50% 8px; padding:7px 12px; border-radius:8px; background:var(--primary-900); color:var(--white); font-size:12px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s, translate .2s}
.ivm-tip.on{opacity:1; translate:-50% 0}
.ivm-tip .t-a{color:#8EE0A8} .ivm-tip .t-h{color:#F5C451} .ivm-tip .t-b{color:var(--accent-600)}
.ivm-float{position:absolute; display:flex; align-items:center; gap:12px; background:var(--white); border-radius:18px; box-shadow:0 18px 40px rgba(41,36,92,.14); padding:14px 18px; z-index:2}
.ivm-float.f1{right:-18px; top:-12px; animation:floaty 5s ease-in-out infinite}
.ivm-float.f1 b{font-size:13.5px; line-height:1.35; color:var(--primary-900); font-weight:600}
.ivm-fi{width:44px; height:44px; border-radius:12px; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center}
.ivm-float.f2{left:-34px; bottom:0; max-width:290px; align-items:flex-start; animation:floaty 5s -2.5s ease-in-out infinite}
.ivm-float.f2 b{display:block; font-size:14px; color:var(--primary-900); font-weight:600}
.ivm-float.f2 span:not(.ivm-shield){display:block; font-size:12.5px; color:var(--neutral-700); margin-top:3px; line-height:1.45}
.ivm-shield{flex:none; width:46px; height:46px; border-radius:50%; background:var(--accent-900); color:var(--white); display:grid; place-items:center; box-shadow:0 0 0 6px var(--accent-400)}
.ivm-curve{position:absolute; right:-22px; top:52px}
@media (max-width:1100px){
  .ivh-split{grid-template-columns:1fr}
  .ivm-wrap{max-width:720px; margin-inline:auto}
  .ivm-float.f1{right:0} .ivm-float.f2{left:0} .ivm-curve{display:none}
}
@media (max-width:700px){
  .ivh-feats{grid-template-columns:1fr; gap:14px}
  .ivm-top{grid-template-columns:1fr 1fr} .ivm-proj{grid-column:1/-1}
  .ivm-card{padding:14px; border-radius:18px}
  .ivm-grid{grid-template-columns:40px repeat(6,minmax(0,1fr)); gap:4px}
  .ivm-u{height:28px; font-size:11px} .ivm-col,.ivm-fl{font-size:11px}
  .ivm-legend{gap:12px; font-size:12px} .ivm-upd{margin-left:0; width:100%}
  .ivm-float.f1{position:relative; right:auto; top:auto; margin:0 0 12px auto; width:max-content; animation:none}
  .ivm-float.f2{position:relative; left:auto; bottom:auto; margin-top:12px; max-width:none; animation:none}
  .ivm-wrap{padding:0}
  .ivm-dots{display:none}
}
@media (prefers-reduced-motion:reduce){ .js .ivm-u{opacity:1} .ivh .ivm-u{animation:none} }
.ivh-f span.ivh-fi{display:grid; place-items:center; margin:0}
.ivm-card{padding-bottom:58px}
.ivm-tip{left:auto; right:22px; bottom:16px; translate:0 8px}
.ivm-tip.on{translate:0 0}
.ivm-wrap{padding-bottom:64px}
.ivm-float.f2{bottom:0}
@media (max-width:700px){ .ivm-card{padding-bottom:50px} .ivm-tip{right:14px; bottom:12px} .ivm-wrap{padding-bottom:0} }
@media (max-width:700px){ .ivm-sel{padding:8px 9px; gap:7px} .ivm-sel select{font-size:12px} .ivm-sel > svg:first-child{width:22px; height:22px; padding:3px} }
/* inventory hero: standard 1240px content width */
.ivh .container{max-width:1240px}
.ivh-split{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:40px}
.ivh h1{font-size:clamp(36px,4.2vw,54px)}
.ivh-feats{gap:14px}
.ivm-float.f1{right:-10px} .ivm-curve{right:-16px}
.ivh-f{gap:10px}
.ivh-f span.ivh-fi{width:40px; height:40px; border-radius:11px}
.ivh-fi svg{width:20px; height:20px}
.ivh-f b{font-size:14px; white-space:nowrap}
.ivh-f span:not(.ivh-fi){font-size:12.5px}
.ivm-card{padding:20px 18px 56px}
.ivm-top{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1.15fr); gap:8px}
.ivm-proj,.ivm-sel{padding:8px 10px; gap:8px; font-size:12.5px}
.ivm-thumb{width:44px; height:36px}
.ivm-proj b{font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ivm-sel select{font-size:12.5px}
.ivm-sel > svg:first-child{width:24px; height:24px}
@media (max-width:1100px){ .ivh-f b{white-space:normal} }

/* product.html — hero stage map, journey and "adopted" sections at 1240px */
.page-hero:has(.stage-map) > .container,
.jr-section .container,
.adopt-section .container{max-width:1240px}
/* stage map: tighter connectors and cards */
.stage-map{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr)}
.sm-card{padding:18px}
.sm-ic{width:48px; height:48px; border-radius:12px}
.sm-row{gap:10px; padding:11px 12px; font-size:14px}
.sm-card > p{font-size:14px}
/* journey: compact five-up */
.journey{grid-template-columns:repeat(4, minmax(0,1fr) 22px) minmax(0,1fr)}
.jr-conn::before{display:none} .jr-conn svg{margin:0; width:15px; height:15px}
.jr-card{padding:12px; gap:12px; border-radius:20px}
.jr-head{flex-direction:column; gap:10px; min-height:0}
.jr-ic{width:40px; height:40px; border-radius:11px}
.jr-ic svg{width:20px; height:20px}
.jr-head h3{font-size:18px}
.jr-head p{font-size:12.5px; margin-top:4px; min-height:36px}
.jr-panel{padding:10px; border-radius:14px}
.jr-srow{font-size:11.5px; gap:8px; padding:8px 7px}
.jr-sic svg{width:17px; height:17px}
.jr-person{gap:8px} .jr-av{width:34px; height:34px; font-size:12px}
.jr-person b{font-size:12px} .jr-person div span{font-size:11px}
.jr-facts{font-size:11px; gap:8px}
.jr-facts li{gap:7px}
.jr-tlist{padding-left:14px}
.jr-ti{grid-template-columns:26px minmax(0,1fr); gap:7px}
.jr-ti span.jr-tic{width:26px; height:26px}
.jr-ti b{font-size:11px}
.jr-btn{height:36px; font-size:12.5px}
.jr-photo{height:100px}
.jr-vmeta{font-size:10.5px; padding:8px}
.jr-rate b{font-size:22px}
.jr-kpi{gap:4px} .jr-kpi div{padding:6px 4px; text-align:center} .jr-kpi b{font-size:14px} .jr-kpi span{font-size:9px; white-space:normal}
.jr-mh{flex-wrap:wrap; gap:6px}
/* adopted: fit illustrations into narrower cards */
.ad-card{padding:26px 20px 26px 24px; min-height:300px}
.ad-ic{width:56px; height:56px}
.ad-text h3{font-size:21px; margin-top:22px}
.ad-text p{font-size:14.5px}
.ad-vis{height:210px}
.ad-orbit{width:168px; height:168px}
.ad-orbit::before{inset:22px}
.ad-shield svg{width:54px; height:61px}
.ad-chip{padding:6px 9px; font-size:10.5px; gap:5px}
.ad-chip svg{width:12px; height:12px}
.ad-chip.c1{right:-4px; top:6px} .ad-chip.c2{right:-8px; top:120px} .ad-chip.c3{left:0; bottom:6px}
.ad-phone{width:118px; height:204px; padding-top:18px}
.ad-bell{width:44px; height:44px; right:0}
.ad-browser{height:160px} .ad-tpl{top:88px}
/* keep the existing tablet / phone layouts winning */
@media (max-width:1300px){ .journey{grid-template-columns:repeat(4, 270px 22px) 270px} .jr-head{flex-direction:row} }
@media (max-width:1180px){ .stage-map{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .stage-map{grid-template-columns:minmax(0,1fr)} }
@media (max-width:600px){ .journey{grid-template-columns:repeat(4, 82vw 22px) 82vw} }

/* =====================================================================
   INVENTORY · Connected to sales — unit detail (reference design)
   ===================================================================== */
.cs-section{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--white),var(--accent-400))}
.cs-section::before{content:""; position:absolute; right:-120px; top:-60px; width:680px; height:680px; border-radius:50%; background:radial-gradient(circle, rgba(226,222,250,.9), transparent 65%)}
.cs-section .container{position:relative; max-width:1240px}
.cs-split{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center}
.cs-split > *{min-width:0}
.cs-h{font-size:clamp(34px,4vw,52px); line-height:1.08; letter-spacing:-.03em; margin-top:18px}
.cs-section .lead{margin-top:16px}
.cs-feats{display:grid; gap:18px; margin-top:28px}
.cs-f{display:flex; gap:16px; align-items:flex-start}
.cs-f span.cs-fi{flex:none; width:48px; height:48px; border-radius:12px; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center; transition:background .25s, color .25s}
.cs-f:hover span.cs-fi{background:var(--accent-900); color:var(--white)}
.cs-f b{display:block; font-size:16.5px; color:var(--primary-900); font-weight:600}
.cs-f span:not(.cs-fi){display:block; font-size:14.5px; color:var(--neutral-700); margin-top:3px}
.cs-section .hero-ctas{margin-top:32px}
.cs-wrap{position:relative}
.cs-wrap .ivm-dots{left:-70px; bottom:10px}
.cs-card{position:relative; border-radius:22px; box-shadow:0 30px 70px rgba(41,36,92,.14)}
.cs-bar{display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--neutral-100)}
.cs-bar b{font-size:15px; color:var(--primary-900); font-weight:600}
.cs-open{margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px; background:var(--accent-400); color:var(--accent-900); font-size:13px; font-weight:500; transition:background .2s, color .2s}
.cs-open:hover{background:var(--accent-900); color:var(--white)}
.cs-more{color:var(--neutral-500); display:grid; transform:rotate(90deg)}
.cs-body{padding:18px; display:grid; gap:12px}
.cs-unit{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 20px; border-radius:16px; background:linear-gradient(90deg,#FFF6E3,#FFF9EE)}
.cs-unit h3{font-size:22px; font-weight:600}
.cs-unit > div > span{font-size:14.5px; color:var(--neutral-700)}
.cs-hold{display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:#FFEFCB; color:#B7791F}
.cs-ring{position:relative; width:34px; height:34px; display:grid; place-items:center; flex:none}
.cs-ring svg:first-child{position:absolute; inset:0; rotate:-90deg}
.js .cs-arc{stroke-dashoffset:94.2}
.cs-section .cs-arc{transition:stroke-dashoffset 1.4s var(--ease)}
.cs-section.in .cs-arc{stroke-dashoffset:16}
.cs-hold b{display:block; font-size:14px; font-weight:600}
.cs-hold small{display:block; font-size:11px; opacity:.85}
.cs-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.cs-tile,.cs-link{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--neutral-200); border-radius:12px; background:var(--white); min-width:0}
.cs-tile div,.cs-link div{min-width:0}
.cs-tile span:not(.cs-ti),.cs-link div span{display:block; font-size:12px; color:var(--neutral-500)}
.cs-tile b,.cs-link b{display:block; font-size:14.5px; color:var(--primary-900); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cs-ti{flex:none; width:40px; height:40px; border-radius:10px; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center}
.cs-links{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cs-link > svg:last-child{margin-left:auto; flex:none; rotate:-90deg; color:var(--primary-900); transition:translate .2s}
.cs-link{transition:border-color .2s, box-shadow .2s}
.cs-link:hover{border-color:var(--accent-600); box-shadow:0 6px 18px rgba(41,36,92,.08)}
.cs-link:hover > svg:last-child{translate:3px 0}
.cs-hist{border:1px solid var(--neutral-200); border-radius:14px; padding:16px 18px}
.cs-hh{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.cs-hh b{font-size:15.5px; color:var(--primary-900); font-weight:600}
.cs-hh a{display:inline-flex; align-items:center; gap:5px; font-size:13.5px; font-weight:500; color:var(--accent-900)}
.cs-list{position:relative; display:grid}
.cs-list::before{content:""; position:absolute; left:6px; top:14px; bottom:22px; width:2px; background:linear-gradient(var(--success),#F5C451 50%,var(--accent-700)); transform-origin:top}
.js .cs-list::before{scale:1 0}
.cs-list.in::before{animation:barUp 1.2s .2s var(--ease) forwards}
.cs-hr{display:grid; grid-template-columns:14px minmax(90px,.9fr) minmax(100px,1fr) minmax(70px,.7fr) minmax(0,1.5fr); gap:12px; align-items:center; padding:9px 0; font-size:13px; color:var(--neutral-700)}
.cs-hr b{color:var(--primary-900); font-weight:600; font-size:13.5px}
.cs-hr time{font-variant-numeric:tabular-nums}
.cs-dot{position:relative; z-index:1; width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 3px var(--white)}
.cs-dot.d-a{background:var(--success)} .cs-dot.d-h{background:#F5C451} .cs-dot.d-p{background:var(--accent-700)}
.cs-list.in .cs-dot.d-h{animation:holdPulse 2s 1.4s infinite}
@keyframes holdPulse{0%{box-shadow:0 0 0 3px #fff, 0 0 0 3px rgba(245,196,81,.6)}70%{box-shadow:0 0 0 3px #fff, 0 0 0 10px rgba(245,196,81,0)}100%{box-shadow:0 0 0 3px #fff, 0 0 0 3px rgba(245,196,81,0)}}
.cs-note{padding:8px 12px; border-radius:8px; background:var(--neutral-50); font-size:12.5px; line-height:1.45}
.js .cs-hr{opacity:0; translate:-10px 0}
.cs-list.in .cs-hr{animation:tiIn .5s var(--ease) forwards; animation-delay:calc(.3s + var(--i) * .35s)}
@media (max-width:1100px){
  .cs-split{grid-template-columns:1fr; gap:44px}
  .cs-wrap{max-width:720px; margin-inline:auto; width:100%}
}
@media (max-width:640px){
  .cs-unit{flex-direction:column; align-items:flex-start}
  .cs-tiles{grid-template-columns:1fr}
  .cs-links{grid-template-columns:1fr}
  .cs-hr{grid-template-columns:14px minmax(0,1fr) auto; row-gap:4px}
  .cs-hr .cs-by{display:none}
  .cs-hr .cs-note,.cs-hr > span:last-child{grid-column:2 / -1}
  .cs-bar{flex-wrap:wrap}
  .cs-wrap .ivm-dots{display:none}
}
@media (prefers-reduced-motion:reduce){ .js .cs-hr{opacity:1; translate:none} .js .cs-list::before{scale:1} }
@media (max-width:640px){ .cs-hr > span:empty:not(.cs-dot){display:none} .cs-hr > span.cs-dot{display:block} .cs-hr time{font-size:12px; text-align:right} }

/* =====================================================================
   LEAD CAPTURE · Capture — live lead feed (reference design)
   ===================================================================== */
.lf-section{background:linear-gradient(180deg,var(--white),var(--neutral-50))}
.lf-section .cs-feats{gap:20px}
.lf-section .cs-f b{font-size:15.5px}
.lf-section .cs-f span:not(.cs-fi){font-size:14px}
.lf-section .link-arrow{font-size:16px}
.lf-card .cs-bar b{font-weight:500}
.lf-list{padding:6px 22px 10px}
.lf-row{display:grid; grid-template-columns:52px minmax(0,1fr) auto 84px; align-items:center; gap:16px; padding:15px 0; border-bottom:1px solid var(--neutral-100); transition:background .2s}
.lf-row:last-child{border-bottom:0}
.lf-row:hover{background:linear-gradient(90deg,transparent,var(--accent-400),transparent)}
.lf-logo{width:52px; height:52px; border-radius:14px; background:var(--white); border:1px solid var(--neutral-100); box-shadow:0 6px 16px rgba(41,36,92,.06); display:grid; place-items:center}
.lf-logo.lf-web{color:var(--accent-900)}
.lf-99{font:700 22px/1 var(--font-heading); color:#0A6CBF; letter-spacing:-.04em}
.lf-mb{width:34px; height:34px; border-radius:50%; background:#D8232A; color:#fff; display:grid; place-items:center; font:700 14px/1 var(--font-body)}
.lf-who{min-width:0}
.lf-who b{display:block; font-size:15.5px; color:var(--primary-900); font-weight:600}
.lf-who span{display:block; font-size:13.5px; color:var(--neutral-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.lf-who i{font-style:normal; margin:0 4px; color:var(--neutral-300)}
.lf-row .badge{font-size:12.5px; padding:5px 11px; border-radius:7px}
.lf-ago{font:400 13px var(--font-mono); color:var(--neutral-500); text-align:right; font-variant-numeric:tabular-nums}
.js .lf-row{opacity:0; translate:0 10px}
.lf-list.in .lf-row{animation:rowIn .5s var(--ease) forwards; animation-delay:calc(.15s + var(--i) * .15s)}
.lf-list.in .lf-row:first-child .lf-logo{animation:newPing 2.4s 1.2s ease-out infinite}
@keyframes newPing{0%{box-shadow:0 0 0 0 rgba(22,128,60,.35)}70%,100%{box-shadow:0 0 0 10px rgba(22,128,60,0)}}
@media (max-width:640px){
  .lf-list{padding:4px 14px 8px}
  .lf-row{grid-template-columns:44px minmax(0,1fr) auto; gap:12px}
  .lf-logo{width:44px; height:44px; border-radius:12px}
  .lf-ago{grid-column:2 / -1; text-align:left; font-size:11.5px; margin-top:-8px}
  .lf-who b{font-size:14.5px} .lf-who span{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){ .js .lf-row{opacity:1; translate:none} }
.lf-section .cs-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px}
.lf-section .cs-h{font-size:clamp(32px,3.4vw,44px)}
.lf-logo svg{width:28px; height:28px}
@media (max-width:1100px){ .lf-section .cs-split{grid-template-columns:1fr} }

/* =====================================================================
   LEAD CAPTURE · Clean data — merge visual (reference design)
   ===================================================================== */
.cd-section{background:linear-gradient(180deg,var(--neutral-50),var(--white))}
.cd-section::before{display:none}
.cd-split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px}
.cd-section .cs-h{font-size:clamp(32px,3.4vw,46px)}
.cd-section .cs-f b{font-size:16px}
.cd-vis{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 54px 64px 40px minmax(0,1.15fr); align-items:center; min-height:380px}
.cd-halo{position:absolute; left:50%; top:50%; width:520px; height:520px; translate:-55% -50%; border-radius:50%; background:radial-gradient(circle, rgba(226,222,250,.9), rgba(240,239,253,.4) 55%, transparent 70%); z-index:0}
.cd-vis > *{position:relative; z-index:1}
.cd-left{display:grid; gap:26px}
.cd-src{background:var(--white); border-radius:16px; padding:16px 16px 14px; box-shadow:0 14px 36px rgba(41,36,92,.09); display:grid; gap:7px; min-width:0}
.cd-sh{display:flex; align-items:center; gap:10px; margin-bottom:4px}
.cd-sl{flex:none; width:40px; height:40px; border-radius:11px; background:var(--accent-400); display:grid; place-items:center}
.cd-sh b{font-size:13.5px; color:var(--primary-900); font-weight:600}
.cd-sh time{margin-left:auto; font-size:12px; color:var(--neutral-500)}
.cd-name{font-size:14.5px; color:var(--primary-900); font-weight:500}
.cd-ln{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--neutral-700); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cd-ln svg{flex:none; color:var(--accent-900)}
.cd-wires{width:54px; height:300px}
.cd-wires path{fill:none; stroke:var(--accent-700); stroke-width:1.6; stroke-dasharray:4 5; vector-effect:non-scaling-stroke}
.cd-vis.in .cd-wires path{animation:flow 1.2s linear infinite}
.cd-hub{width:64px; height:64px; display:grid; place-items:center; position:relative}
.cd-hub span{width:58px; height:58px; border-radius:50%; background:var(--accent-900); color:var(--white); display:grid; place-items:center; box-shadow:0 0 0 12px rgba(108,92,231,.14), 0 0 0 26px rgba(108,92,231,.07)}
.cd-vis.in .cd-hub span{animation:hubPulse 2.4s ease-in-out infinite}
@keyframes hubPulse{0%,100%{box-shadow:0 0 0 12px rgba(108,92,231,.14), 0 0 0 26px rgba(108,92,231,.07)}50%{box-shadow:0 0 0 16px rgba(108,92,231,.18), 0 0 0 34px rgba(108,92,231,.05)}}
.cd-arrow{width:40px; height:12px}
.cd-arrow path{stroke:var(--accent-700); stroke-width:1.6; stroke-dasharray:4 4; stroke-linecap:round}
.cd-merged{background:var(--white); border-radius:18px; padding:18px; box-shadow:0 20px 50px rgba(41,36,92,.12); display:grid; gap:10px; min-width:0}
.cd-ok{justify-self:start; display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border-radius:8px; background:var(--success-bg); color:var(--success); font-size:12.5px; font-weight:500}
.cd-ok svg{background:var(--success); color:var(--white); border-radius:50%; padding:2px; width:18px; height:18px}
.js .cd-ok{opacity:0; scale:.8}
.cd-vis.in .cd-ok{animation:okPop .5s .9s var(--ease) forwards}
.cd-mh{display:flex; align-items:center; gap:12px; margin:6px 0 2px}
.cd-av{flex:none; width:50px; height:50px; border-radius:50%; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center; font:600 16px var(--font-heading)}
.cd-mh b{font-size:17px; color:var(--primary-900); font-weight:600}
.cd-tag{padding:3px 9px; border-radius:6px; background:var(--accent-400); color:var(--accent-900); font-size:11.5px; font-weight:600}
.cd-srcs{border-top:1px solid var(--neutral-200); padding-top:12px; margin-top:4px}
.cd-srcs > b{display:block; font-size:13.5px; color:var(--primary-900); font-weight:500; margin-bottom:10px}
.cd-srcs div{display:flex; flex-wrap:wrap; gap:8px}
.cd-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:var(--neutral-50); border:1px solid var(--neutral-100); font-size:12px; font-weight:500; color:var(--primary-900)}
.cd-chip svg{width:18px; height:18px}
.cd-chip.more{color:var(--neutral-500); font-weight:400}
.js .cd-src{opacity:0; translate:-14px 0}
.cd-vis.in .cd-src{animation:tiIn .55s var(--ease) forwards}
.cd-vis.in .cd-src:nth-child(2){animation-delay:.15s}
.js .cd-merged{opacity:0; translate:14px 0}
.cd-vis.in .cd-merged{animation:tiIn .6s .55s var(--ease) forwards}
@media (max-width:1100px){
  .cd-split{grid-template-columns:1fr} .cd-split > .reveal{order:-1}
  .cd-vis{max-width:760px; margin-inline:auto; width:100%}
}
@media (max-width:700px){
  .cd-vis{grid-template-columns:1fr; justify-items:center; gap:0; min-height:0}
  .cd-left{grid-template-columns:1fr 1fr; gap:12px; width:100%}
  .cd-src{padding:12px}
  .cd-ln{font-size:12px} .cd-sl{width:34px; height:34px}
  .cd-wires{display:none}
  .cd-hub{margin:24px 0 8px}
  .cd-arrow{rotate:90deg; margin:10px 0 14px}
  .cd-merged{width:100%}
  .cd-halo{display:none}
}
@media (max-width:420px){ .cd-left{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .js .cd-src,.js .cd-merged,.js .cd-ok{opacity:1; translate:none; scale:1} }
.cd-vis > .cd-halo{position:absolute}
.cd-split{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:44px}
.cd-vis{grid-template-columns:minmax(0,1fr) 44px 64px 36px minmax(0,1.2fr)}
.cd-wires{width:44px}
.cd-mh b{white-space:nowrap}
.cd-srcs div{flex-wrap:nowrap}
.cd-chip{padding:5px 9px; font-size:11.5px; white-space:nowrap}
@media (max-width:1100px){ .cd-split{grid-template-columns:1fr} }
@media (max-width:700px){ .cd-vis{grid-template-columns:1fr} .cd-srcs div{flex-wrap:wrap} }

/* =====================================================================
   LEAD CAPTURE · Distribution — sources → rules (reference design)
   ===================================================================== */
.ds-section{background:linear-gradient(180deg,var(--white),var(--neutral-50))}
.ds-section::before{display:none}
.ds-split{grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); gap:44px}
.ds-section .cs-h{font-size:clamp(32px,3.4vw,46px)}
.ds-section .cs-f b{font-size:16px}
.ds-vis{position:relative; display:grid; grid-template-columns:168px 64px minmax(0,1fr); align-items:center}
.ds-halo{position:absolute; right:-40px; top:50%; translate:0 -50%; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle, rgba(226,222,250,.85), transparent 68%); z-index:0}
.ds-vis > :not(.ds-halo){position:relative; z-index:1}
.ds-srcs{display:grid; gap:10px}
.ds-src{display:flex; align-items:center; gap:12px; padding:12px; background:var(--white); border-radius:14px; box-shadow:0 10px 26px rgba(41,36,92,.08); min-width:0}
.ds-sl{flex:none; width:40px; height:40px; display:grid; place-items:center}
.ds-src b{display:block; font-size:13.5px; color:var(--primary-900); font-weight:600; white-space:nowrap}
.ds-src span:not(.ds-sl){display:block; font-size:11.5px; color:var(--neutral-500); white-space:nowrap}
.ds-more{display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--accent-400); color:var(--accent-900); font-weight:700; letter-spacing:1px; font-size:14px}
.ds-wires{width:64px; height:100%; min-height:380px; overflow:visible}
.ds-wires path{fill:none; stroke:var(--accent-700); stroke-width:1.4; opacity:.75; vector-effect:non-scaling-stroke; stroke-dasharray:3 5}
.ds-vis.in .ds-wires path{animation:flow 1s linear infinite}
.ds-dots circle{fill:var(--accent-900)}
.ds-card{background:var(--white); border-radius:20px; padding:16px; box-shadow:0 24px 60px rgba(41,36,92,.12); min-width:0}
.ds-ch{display:flex; align-items:center; gap:12px; padding:2px 4px 14px}
.ds-gear{width:34px; height:34px; border-radius:50%; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center}
.ds-ch b{font-size:15.5px; color:var(--primary-900); font-weight:600}
.ds-active{margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:var(--success-bg); color:var(--success); font-size:13px; font-weight:500}
.ds-active i{width:7px; height:7px; border-radius:50%; background:var(--success); animation:pulse 1.8s infinite}
.ds-rules{display:grid; gap:9px}
.ds-rule{display:grid; grid-template-columns:34px minmax(0,1.25fr) 14px minmax(0,1fr) auto; gap:10px; align-items:center; padding:12px; border:1px solid var(--neutral-200); border-radius:12px; transition:border-color .3s, box-shadow .3s, background .3s}
.ds-num{width:34px; height:34px; border-radius:9px; background:var(--accent-400); color:var(--accent-900); display:grid; place-items:center; font:600 13px var(--font-body)}
.ds-rule b{font-size:13px; color:var(--primary-900); font-weight:600; line-height:1.35}
.ds-arr{color:var(--neutral-500); display:grid}
.ds-to{font-size:12.5px; color:var(--neutral-700); line-height:1.35}
.ds-avs{display:flex}
.ds-av{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font:700 9.5px var(--font-body); box-shadow:0 0 0 2px var(--white)}
.ds-av + .ds-av{margin-left:-7px}
.ds-bell{background:var(--error-bg); color:var(--error)}
/* rules light up in turn, as if a lead is being matched */
.ds-vis.in .ds-rule{animation:ruleHit 6s ease-in-out infinite; animation-delay:calc(var(--i) * 1.5s)}
@keyframes ruleHit{0%,4%{border-color:var(--neutral-200); background:var(--white); box-shadow:none}8%,20%{border-color:var(--accent-600); background:var(--accent-400); box-shadow:0 8px 20px rgba(108,92,231,.14)}26%,100%{border-color:var(--neutral-200); background:var(--white); box-shadow:none}}
.js .ds-src{opacity:0; translate:-12px 0}
.ds-vis.in .ds-src{animation:tiIn .5s var(--ease) forwards; animation-delay:calc(var(--i) * .1s)}
@media (max-width:1100px){
  .ds-split{grid-template-columns:1fr}
  .ds-vis{max-width:780px; margin-inline:auto; width:100%}
}
@media (max-width:700px){
  .ds-vis{grid-template-columns:1fr; gap:14px}
  .ds-srcs{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .ds-src{padding:9px} .ds-sl{width:32px; height:32px} .ds-sl svg{width:22px; height:22px}
  .ds-wires,.ds-halo{display:none}
  .ds-rule{grid-template-columns:30px minmax(0,1fr) auto; row-gap:4px}
  .ds-rule .ds-arr{display:none}
  .ds-rule .ds-to{grid-column:2 / 3; grid-row:2}
  .ds-rule .ds-avs{grid-row:1 / 3; grid-column:3}
  .ds-num{width:30px; height:30px}
}
@media (prefers-reduced-motion:reduce){ .js .ds-src{opacity:1; translate:none} }
.ds-src .ds-sl span.ds-more{display:grid; place-items:center; font-size:14px; color:var(--accent-900)}
.ds-src .ds-sl .lf-99{color:#0A6CBF}
.ds-av{font-size:9px; letter-spacing:-.02em}
.ds-av + .ds-av{margin-left:-4px}
.ds-rule{grid-template-columns:34px minmax(0,1.3fr) 14px minmax(0,1fr) auto; gap:9px}
.ds-rule b{font-size:12.5px}
.ds-av{flex:none}
@media (max-width:700px){ .ds-src:last-child{grid-column:1 / -1} .ds-avs{justify-content:flex-end} }
@media (max-width:700px){ .ds-rule{grid-template-columns:30px minmax(0,1fr) auto} }

/* =====================================================================
   AI CALLING · How it works — form fill to booked visit (reference)
   ===================================================================== */
.ap-section .container{max-width:1240px}
.ap-steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr) 26px) minmax(0,1fr); align-items:start}
.ap-step{min-width:0}
.js .ap-step{opacity:0}
.ap-steps.in .ap-step{animation:jrIn .7s var(--ease) forwards; animation-delay:calc(var(--d) * .12s)}
.ap-frame{padding:12px; border-radius:20px; background:linear-gradient(160deg,rgba(255,255,255,.7),var(--accent-500)); box-shadow:0 18px 44px rgba(41,36,92,.08)}
.ap-panel{height:262px; background:var(--white); border-radius:14px; padding:12px; box-shadow:0 6px 18px rgba(41,36,92,.06); display:flex; flex-direction:column; font-size:11.5px; color:var(--primary-900); overflow:hidden}
.ap-ph{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:6px}
.ap-ph b{font-size:12.5px; font-weight:600; white-space:nowrap}
.ap-step h3{font-size:20px; margin-top:20px; font-weight:600}
.ap-step p{color:var(--neutral-700); font-size:14px; line-height:1.55; margin-top:6px}
.ap-conn{position:relative; align-self:start; margin-top:131px; height:2px; background:var(--accent-500)}
.ap-conn i{position:absolute; left:50%; top:50%; width:10px; height:10px; translate:-50% -50%; border-radius:50%; background:var(--accent-900); box-shadow:0 0 0 4px var(--accent-500)}
.ap-steps.in .ap-conn i{animation:pulse2 2s infinite}
.ap-btn{margin-top:auto; display:grid; place-items:center; height:32px; border-radius:8px; background:var(--accent-900); color:var(--white); font-size:11.5px; font-weight:600; transition:background .2s}
.ap-btn:hover{background:var(--accent-800)}
/* 1 enquiry */
.ap-now{display:inline-flex; align-items:center; gap:4px; font-size:10px; color:var(--neutral-500); white-space:nowrap}
.ap-now i{width:6px; height:6px; border-radius:50%; background:var(--success); animation:pulse 1.8s infinite}
.ap-field{display:block; padding:6px 9px; margin-bottom:5px; border-radius:6px; background:var(--neutral-50); font-size:11px; color:var(--neutral-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.js .ap-field{opacity:0}
.ap-steps.in .ap-field{animation:typeIn .35s var(--ease) forwards; animation-delay:calc(.4s + var(--i) * .14s)}
@keyframes typeIn{from{opacity:0; clip-path:inset(0 100% 0 0)}to{opacity:1; clip-path:inset(0 0 0 0)}}
/* 2 calling */
.ap-timer{font:500 11.5px var(--font-mono); font-variant-numeric:tabular-nums}
.ap-orb{position:relative; width:86px; height:86px; margin:6px auto 10px; display:grid; place-items:center}
.ap-orb i{position:absolute; inset:0; border-radius:50%; background:var(--accent-500); opacity:.6}
.ap-orb i:nth-child(2){inset:12px; background:var(--accent-600)}
.ap-steps.in .ap-orb i{animation:orbRing 2.4s ease-out infinite}
.ap-steps.in .ap-orb i:nth-child(2){animation-delay:-1.2s}
@keyframes orbRing{0%{transform:scale(.8); opacity:.75}100%{transform:scale(1.18); opacity:0}}
.ap-orb span{position:relative; width:52px; height:52px; border-radius:50%; background:linear-gradient(160deg,var(--accent-800),var(--accent-900)); color:var(--white); display:grid; place-items:center; box-shadow:0 8px 20px rgba(108,92,231,.4)}
.ap-spk{display:block; text-align:center; font-size:11px; font-weight:600}
.ap-prog{display:flex; justify-content:center; align-items:center; gap:5px; font-size:10px; color:var(--neutral-500); margin-top:3px}
.ap-prog i{width:6px; height:6px; border-radius:50%; background:var(--success); animation:pulse 1.8s infinite}
.ap-ctrls{display:flex; justify-content:center; gap:14px; margin-top:auto}
.ap-ctrls span{width:34px; height:34px; border-radius:50%; background:var(--neutral-100); color:var(--neutral-700); display:grid; place-items:center}
.ap-ctrls .end{width:40px; height:40px; margin-top:-3px; background:#F0524D; color:var(--white); box-shadow:0 6px 14px rgba(240,82,77,.35)}
/* 3 qualify */
.ap-qrows{border:1px solid var(--neutral-100); border-radius:8px; overflow:hidden}
.ap-q{display:flex; justify-content:space-between; gap:8px; padding:8px 9px; border-top:1px solid var(--neutral-100); font-size:10.5px}
.ap-q:first-child{border-top:0}
.ap-q span{color:var(--neutral-500)}
.ap-q b{font-weight:600; text-align:right}
.js .ap-q b{opacity:0}
.ap-steps.in .ap-q b{animation:tiIn .4s var(--ease) forwards; animation-delay:calc(.6s + var(--i) * .25s)}
.ap-ok{margin-top:auto; display:flex; align-items:center; gap:7px; padding:9px 10px; border-radius:8px; background:var(--success-bg); color:var(--primary-900); font-size:11px; font-weight:600}
.ap-ok i{width:7px; height:7px; border-radius:50%; background:var(--success)}
.js .ap-ok{opacity:0; scale:.9}
.ap-steps.in .ap-ok{animation:okPop .45s 1.7s var(--ease) forwards}
/* 4 calendar */
.ap-month{display:flex; justify-content:space-between; align-items:center; padding:4px 6px; border:1px solid var(--neutral-100); border-radius:7px; margin-bottom:6px}
.ap-month b{font-size:11px; font-weight:600}
.ap-month span{display:grid; color:var(--neutral-700)} .ap-month span:first-child{rotate:90deg} .ap-month span:last-child{rotate:-90deg}
.ap-days{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center}
.ap-days em{font-style:normal; font-size:8.5px; color:var(--neutral-500); padding-bottom:2px}
.ap-days span{font-size:10px; padding:3px 0; border-radius:5px; color:var(--primary-900); font-variant-numeric:tabular-nums}
.ap-days span.mute{color:var(--neutral-300)}
.ap-days span.sel{background:var(--accent-900); color:var(--white); font-weight:600}
.ap-steps.in .ap-days span.sel{animation:selPop 2.6s 1s ease-in-out infinite}
.ap-slots{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:8px 0}
.ap-slots span{padding:5px 0; text-align:center; border:1px solid var(--neutral-200); border-radius:6px; font-size:9.5px; white-space:nowrap}
.ap-slots span.sel{background:var(--accent-900); border-color:var(--accent-900); color:var(--white)}
.ap-cal .ap-btn{margin-top:0}
/* 5 log */
.ap-ll{position:relative; display:grid; gap:14px; padding-left:20px; margin-top:4px}
.ap-ll::before{content:""; position:absolute; left:4px; top:6px; bottom:18px; width:2px; background:var(--accent-500); transform-origin:top}
.js .ap-ll::before{scale:1 0}
.ap-steps.in .ap-ll::before{animation:barUp 1.3s .5s var(--ease) forwards}
.ap-li{position:relative}
.ap-li::before{content:""; position:absolute; left:-20px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px var(--white)}
.ap-li b{display:block; font-size:11.5px; font-weight:600}
.ap-li span{display:block; font-size:10.5px; color:var(--neutral-500); margin-top:1px}
.js .ap-li{opacity:0; translate:0 6px}
.ap-steps.in .ap-li{animation:rowIn .45s var(--ease) forwards; animation-delay:calc(.6s + var(--i) * .3s)}
/* tablet & phone: swipe */
@media (max-width:1180px){
  .ap-scroll{overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1); padding:6px var(--gutter) 16px}
  .ap-steps{grid-template-columns:repeat(4, 240px 26px) 240px; width:max-content; padding-right:var(--gutter)}
  .ap-step{scroll-snap-align:start}
}
@media (max-width:600px){ .ap-steps{grid-template-columns:repeat(4, 78vw 20px) 78vw} }
@media (prefers-reduced-motion:reduce){ .js .ap-step,.js .ap-field,.js .ap-q b,.js .ap-ok,.js .ap-li{opacity:1; translate:none; scale:1} .js .ap-ll::before{scale:1} }
.ap-enq .ap-ph b{font-size:11.5px}
.ap-now{font-size:9.5px}
.ap-eq{gap:3px; display:flex !important; align-items:center; justify-content:center}
.ap-eq b{display:block; width:3px; height:40%; border-radius:2px; background:var(--white)}
.ap-eq b:nth-child(2){height:70%} .ap-eq b:nth-child(3){height:95%} .ap-eq b:nth-child(4){height:65%} .ap-eq b:nth-child(5){height:35%}
.ap-steps.in .ap-eq b{animation:eq .9s ease-in-out infinite}
.ap-eq b:nth-child(2){animation-delay:-.15s} .ap-eq b:nth-child(3){animation-delay:-.3s} .ap-eq b:nth-child(4){animation-delay:-.45s} .ap-eq b:nth-child(5){animation-delay:-.6s}
.ap-orb span.ap-eq{padding:14px}

/* =====================================================================
   WEBSITES HERO — page builder (reference design)
   ===================================================================== */
.page-hero:has(.wb-wrap) .hero-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr); gap:40px}
.page-hero:has(.wb-wrap) h1{font-size:clamp(38px,4.4vw,60px)}
.wb-wrap{position:relative; padding:34px 24px 40px 20px}
.wb-bg{position:absolute; border-radius:44px; z-index:0}
.wb-bg.b1{inset:4% -2% 0 6%; background:linear-gradient(160deg,var(--accent-500),var(--accent-600)); rotate:4deg; opacity:.75}
.wb-bg.b2{inset:14% 10% -2% -4%; background:linear-gradient(200deg,var(--accent-400),var(--accent-500)); rotate:-5deg; opacity:.85}
.wb-spark{position:absolute; left:6px; top:8px; width:22px; height:22px; z-index:2}
.wb-spark::before,.wb-spark::after{content:""; position:absolute; background:var(--accent-700); border-radius:2px}
.wb-spark::before{left:12px; top:0; width:2.5px; height:10px; rotate:-20deg}
.wb-spark::after{left:0; top:12px; width:10px; height:2.5px; rotate:20deg}
.wb-win{position:relative; z-index:1; background:var(--white); border-radius:20px; box-shadow:0 30px 70px rgba(41,36,92,.18); overflow:hidden}
.wb-bar{display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--neutral-100)}
.wb-title{font-size:13px; color:var(--neutral-700)}
.wb-prev{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--primary-900)}
.wb-pub{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:8px; background:var(--primary-900); color:var(--white); font-size:13px; font-weight:500}
.page-hero .wb-pub{animation:pubGlow 3s 1.5s ease-in-out infinite}
@keyframes pubGlow{0%,100%{box-shadow:0 0 0 0 rgba(41,36,92,.35)}50%{box-shadow:0 0 0 7px rgba(41,36,92,0)}}
.wb-body{display:grid; grid-template-columns:128px minmax(0,1fr) 132px; min-height:360px}
.wb-nav{display:grid; align-content:start; gap:4px; padding:10px; border-right:1px solid var(--neutral-100)}
.wb-sec{all:unset; display:block; padding:8px 10px; border-radius:8px; font:500 12px var(--font-body); color:var(--primary-900); cursor:pointer; transition:background .2s, color .2s}
.wb-sec:hover{background:var(--neutral-50)}
.wb-sec.on{background:var(--accent-400); color:var(--accent-900); font-weight:600}
.wb-sec:focus-visible{outline:2px solid var(--accent-900); outline-offset:1px}
.wb-canvas{padding:10px; background:var(--neutral-50); display:grid; gap:10px; align-content:start; min-width:0}
.wb-hero{position:relative; height:150px; border-radius:10px; overflow:hidden}
.wb-sky{position:absolute; inset:0; background:linear-gradient(180deg,#B8CCE4,#E6EEF6 60%,#F4F1EA)}
.wb-tw{position:absolute; bottom:22px; background:repeating-linear-gradient(0deg,#EDE7DC 0 6px,#5E7690 6px 8px); border-radius:2px 2px 0 0; box-shadow:inset -8px 0 0 rgba(0,0,0,.08)}
.wb-tw::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(237,231,220,.85) 7px 9px)}
.wb-tw.t1{right:22%; width:15%; height:118px} .wb-tw.t2{right:9%; width:12%; height:92px; filter:brightness(.95)} .wb-tw.t3{right:36%; width:9%; height:70px; filter:brightness(.9)} .wb-tw.t4{right:2%; width:7%; height:58px; filter:brightness(.88)}
.wb-trees{position:absolute; left:40%; right:0; bottom:0; height:30px; background:radial-gradient(circle at 10% 60%,#5E8F4C 0 14px,transparent 15px),radial-gradient(circle at 30% 70%,#6FA35B 0 12px,transparent 13px),radial-gradient(circle at 55% 65%,#4F8040 0 15px,transparent 16px),radial-gradient(circle at 80% 70%,#6FA35B 0 13px,transparent 14px),linear-gradient(#7FA766,#7FA766) bottom/100% 8px no-repeat}
.wb-dots{position:absolute; right:12px; top:10px; display:flex; gap:5px; align-items:center}
.wb-dots i{width:12px; height:2px; background:rgba(41,36,92,.4); border-radius:2px} .wb-dots b{width:22px; height:7px; border-radius:6px; background:var(--primary-900)}
.wb-copy{position:absolute; left:14px; top:14px; display:grid; gap:2px; color:var(--primary-900)}
.wb-copy b{font-size:13px; font-weight:600} .wb-copy small{font-size:8.5px; color:var(--neutral-700)}
.wb-copy strong{font:600 13px/1.3 var(--font-heading); margin-top:14px}
.wb-cta{justify-self:start; margin-top:8px; padding:5px 9px; border-radius:5px; background:var(--primary-900); color:var(--white); font-size:8px}
.wb-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.wb-cards span{display:flex; gap:6px; align-items:center; padding:9px; background:var(--white); border-radius:8px}
.wb-cards i{width:12px; height:12px; border-radius:4px; background:var(--neutral-200); flex:none}
.wb-cards em{flex:1; height:6px; border-radius:4px; background:linear-gradient(90deg,var(--neutral-200),var(--neutral-100),var(--neutral-200)); background-size:200% 100%; animation:shimmer 1.8s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.wb-ov{display:grid; grid-template-columns:1fr 110px; gap:10px; padding:10px; background:var(--white); border-radius:10px}
.wb-ov b{display:block; font-size:11.5px; color:var(--primary-900); font-weight:600; margin-bottom:8px}
.wb-ov i{display:block; height:6px; border-radius:4px; background:var(--neutral-200); margin-top:6px} .wb-ov i:nth-of-type(2){width:85%} .wb-ov i:nth-of-type(3){width:60%}
.wb-lobby{position:relative; height:62px; border-radius:6px; overflow:hidden; background:linear-gradient(180deg,#C9B79C,#E9DFCD 55%,#8BA67A 56%,#6E8E5F)}
.wb-lobby::before{content:""; position:absolute; inset:0 0 40% 0; background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(90,70,50,.35) 10px 12px)}
.wb-pool{position:absolute; left:20%; right:10%; bottom:6px; height:12px; border-radius:3px; background:linear-gradient(90deg,#5FB8D6,#8ED3E8)}
.wb-meta{display:grid; align-content:start; gap:16px; padding:14px 12px; border-left:1px solid var(--neutral-100); font-size:12px}
.wb-meta span:not(.wb-ready){display:block; color:var(--neutral-500); font-size:11.5px; margin-bottom:3px}
.wb-meta b{color:var(--primary-900); font-weight:600; font-size:12.5px; overflow-wrap:anywhere}
.wb-ready{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--success-bg); color:var(--success); font-size:11px; font-weight:500; white-space:nowrap}
.wb-ready i{width:6px; height:6px; border-radius:50%; background:var(--success); animation:pulse 1.8s infinite}
@media (max-width:1100px){ .page-hero:has(.wb-wrap) .hero-split{grid-template-columns:1fr} .wb-wrap{max-width:760px; margin-inline:auto} }
@media (max-width:700px){
  .wb-body{grid-template-columns:minmax(0,1fr)}
  .wb-nav{display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--neutral-100); gap:4px; padding:8px; scrollbar-width:none}
  .wb-sec{white-space:nowrap; flex:none}
  .wb-meta{grid-template-columns:1fr 1fr; border-left:0; border-top:1px solid var(--neutral-100)}
  .wb-prev{display:none} .wb-pub{margin-left:auto}
  .wb-wrap{padding:16px 8px 22px}
}
.wb-body{grid-template-columns:124px minmax(0,1fr) 140px; min-height:0}
.wb-ready{font-size:10.5px; padding:4px 8px}
.wb-trees{left:52%; height:22px; background:radial-gradient(ellipse 12px 9px at 8% 55%,#5E8F4C 98%,transparent),radial-gradient(ellipse 14px 10px at 26% 60%,#6FA35B 98%,transparent),radial-gradient(ellipse 12px 9px at 46% 55%,#4F8040 98%,transparent),radial-gradient(ellipse 15px 10px at 68% 60%,#6FA35B 98%,transparent),radial-gradient(ellipse 12px 9px at 90% 55%,#5E8F4C 98%,transparent),linear-gradient(#7FA766,#7FA766) bottom/100% 6px no-repeat}
.wb-tw{bottom:16px}
.wb-tw.t1{right:16%; width:14%; height:120px} .wb-tw.t2{right:3%; width:12%; height:96px} .wb-tw.t3{right:31%; width:8%; height:74px} .wb-tw.t4{right:42%; width:6%; height:52px}
.wb-canvas{padding-bottom:12px}
@media (max-width:700px){ .wb-body{grid-template-columns:minmax(0,1fr)} }

/* =====================================================================
   CSS-drawn property photos (reusable)
   ===================================================================== */
.pic{position:relative; display:block; overflow:hidden; border-radius:7px; background:linear-gradient(180deg,#A9C8E8,#DCEAF6 70%,#EEF3EA)}
.pic i{position:absolute; display:block}
.pic .gr{left:0; right:0; bottom:0; height:16%; background:radial-gradient(ellipse 14% 70% at 10% 30%,#5E8F4C 96%,transparent),radial-gradient(ellipse 12% 60% at 40% 35%,#6FA35B 96%,transparent),radial-gradient(ellipse 14% 70% at 75% 30%,#4F8040 96%,transparent),#7FA766}
.pic .tw{bottom:12%; background:repeating-linear-gradient(0deg,#EFE9DE 0 5px,#5E7690 5px 7px); border-radius:2px 2px 0 0; box-shadow:inset -5px 0 0 rgba(0,0,0,.08)}
.pic .tw::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(239,233,222,.85) 6px 8px)}
.pic .tw.a{left:38%; width:24%; height:74%} .pic .tw.b{left:64%; width:18%; height:56%; filter:brightness(.95)} .pic .tw.c{left:20%; width:14%; height:44%; filter:brightness(.9)}
.pic-villa{background:linear-gradient(180deg,#BFD6EC,#E7EEF4 62%,#8FB27A 62%)}
.pic-villa .vh{left:18%; right:16%; bottom:22%; height:34%; background:linear-gradient(90deg,#F4F0E8 0 55%,#E4DCCD 55%); border-radius:2px}
.pic-villa .vh::after{content:""; position:absolute; left:10%; top:30%; width:30%; height:40%; background:#7C93A8; box-shadow:44px 0 0 #7C93A8}
.pic-villa .vr{left:12%; right:10%; bottom:56%; height:8%; background:#3E4A5A; border-radius:2px}
.pic-lobby{background:linear-gradient(180deg,#D9C7A8,#EFE6D6)}
.pic-lobby .lb{inset:0; background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(120,90,60,.3) 9px 11px), linear-gradient(transparent 70%,#B89F7C 70%)}
.pic-pool{background:linear-gradient(180deg,#9FD0E6,#E9F2F6 45%,#C9D9B8 45%)}
.pic-pool .pl{left:12%; right:12%; bottom:14%; height:34%; border-radius:4px; background:linear-gradient(90deg,#3FA9D0,#79CBE6)}

/* =====================================================================
   WEBSITES · Publish flow (reference design) — reuses .ap-step frames
   ===================================================================== */
.pf-steps{grid-template-columns:repeat(3, minmax(0,1fr) 30px) minmax(0,1fr)}
.pf-conn{margin-top:122px; background:none; border-top:2px dashed var(--accent-600); height:0}
.pf-section .ap-panel{height:244px; padding:12px; font-size:10.5px}
.pf-section .sk{display:block; height:7px; border-radius:4px; background:var(--neutral-100); margin-top:7px}
.sk.w90{width:90%} .sk.w60{width:60%} .sk.r{margin:0 0 8px auto; width:40%}
/* 1 template */
.pf-tpl{display:grid !important; grid-template-columns:82px minmax(0,1fr); gap:10px; padding:0 !important}
.pf-cats{display:grid; align-content:start; gap:4px; padding:10px 8px; border-right:1px solid var(--neutral-100)}
.pf-cats span{padding:6px 7px; border-radius:6px; color:var(--neutral-700); font-size:10.5px}
.pf-cats span.on{background:var(--accent-400); color:var(--accent-900); font-weight:600}
.pf-steps.in .pf-cats span.on{animation:catPick 1s .5s var(--ease)}
@keyframes catPick{0%{background:transparent}100%{background:var(--accent-400)}}
.pf-gal{padding:10px 10px 10px 0; min-width:0}
.pic.big{height:84px}
.pf-two{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px}
.pf-two .pic{height:48px}
.pf-two .sk{margin-top:0}
/* 2 form */
.pf-form{display:grid !important; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:10px}
.pf-fl > b{display:block; font-size:11.5px; margin-bottom:6px}
.pf-fl label{display:block; color:var(--neutral-500); font-size:9.5px; margin-top:7px}
.pf-fl label > span{display:block; margin-top:3px; padding:5px 7px; border:1px solid var(--neutral-200); border-radius:5px; color:var(--primary-900); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.js .pf-fl label > span:not(.pf-ups){color:transparent}
.pf-steps.in .pf-fl label > span:not(.pf-ups){animation:typeColor .01s forwards, typeIn .5s var(--ease) both; animation-delay:calc(.5s + var(--i) * .3s)}
@keyframes typeColor{to{color:var(--primary-900)}}
.pf-fl label > span.pf-ups{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; border:0; padding:0}
.pf-ups .pic{height:28px; border-radius:5px}
.pf-ups em{display:grid; place-items:center; height:28px; border:1px dashed var(--accent-600); border-radius:5px; color:var(--accent-900); font-style:normal; font-size:14px}
.pf-fr{min-width:0}
.pic.tall{height:92px}
.pf-blocks{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:8px}
.pf-blocks i{height:22px; border-radius:5px; background:var(--neutral-100)}
/* 3 review */
.pf-rh{display:flex; justify-content:space-between; align-items:center; gap:6px; margin-bottom:9px}
.pf-rh b{font-size:12px; font-weight:600}
.pf-st{position:relative; display:grid}
.pf-st > span{grid-area:1/1; display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; font-size:9.5px; font-weight:500; white-space:nowrap; transition:opacity .4s, scale .4s}
.pf-st i{width:6px; height:6px; border-radius:50%}
.pf-st .pend{background:var(--warning-bg); color:var(--warning)} .pf-st .pend i{background:#F5A524}
.pf-st .appr{background:var(--success-bg); color:var(--success); opacity:0; scale:.8} .pf-st .appr i{background:var(--success)}
.pf-steps.in .pf-st .pend{animation:fadeOutK .4s 2.2s forwards}
.pf-steps.in .pf-st .appr{animation:fadeInK .4s 2.3s forwards}
@keyframes fadeOutK{to{opacity:0; scale:.8}} @keyframes fadeInK{to{opacity:1; scale:1}}
.pf-cm{display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:8px; align-items:start; padding:8px; margin-bottom:6px; border-radius:8px; background:var(--neutral-50)}
.pf-av{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:700 8.5px var(--font-body)}
.pf-cm b{display:block; font-size:10.5px; font-weight:600}
.pf-cm div span{display:flex; align-items:center; gap:4px; color:var(--neutral-700); font-size:10px; margin-top:2px}
.pf-cm time{font-size:9px; color:var(--neutral-500); white-space:nowrap}
.pf-tick{display:inline-grid !important; place-items:center; width:14px; height:14px; border-radius:3px; background:var(--success); color:var(--white)}
.js .pf-cm{opacity:0; translate:0 8px}
.pf-steps.in .pf-cm{animation:rowIn .45s var(--ease) forwards; animation-delay:calc(.8s + var(--i) * .45s)}
/* 4 live */
.pf-live{position:relative; overflow:visible !important; padding:8px !important}
.pf-url{display:flex; align-items:center; gap:8px; padding:4px 4px 8px}
.pf-url .win-dots i{width:7px; height:7px; background:var(--neutral-200)}
.pf-addr{flex:1; display:flex; align-items:center; gap:5px; padding:4px 8px; border-radius:6px; background:var(--neutral-50); font-size:10.5px; color:var(--primary-900); font-weight:500; min-width:0}
.pf-addr svg{color:var(--success); flex:none}
.pf-livebadge{padding:3px 9px; border-radius:999px; background:var(--success); color:var(--white); font-size:10px; font-weight:600}
.pf-steps.in .pf-livebadge{animation:pubGlow2 2.4s 1s ease-in-out infinite}
@keyframes pubGlow2{0%,100%{box-shadow:0 0 0 0 rgba(22,128,60,.4)}50%{box-shadow:0 0 0 6px rgba(22,128,60,0)}}
.pf-site{position:relative; height:118px; border-radius:8px; overflow:hidden}
.pic.hero{position:absolute; inset:0; border-radius:0}
.pic.hero .tw.a{left:62%; width:16%} .pic.hero .tw.b{left:79%; width:12%} .pic.hero .tw.c{left:50%; width:10%}
.pf-sc{position:absolute; left:10px; top:10px; display:grid; gap:2px; color:var(--primary-900)}
.pf-sc b{font-size:9.5px; font-weight:600}
.pf-sc strong{font:600 11px/1.25 var(--font-heading); margin-top:8px}
.pf-sc span{justify-self:start; margin-top:6px; padding:3px 7px; border-radius:4px; background:var(--primary-900); color:var(--white); font-size:7.5px}
.pf-nav{position:absolute; right:8px; top:8px; display:flex; gap:4px; align-items:center}
.pf-nav i{width:9px; height:2px; background:rgba(41,36,92,.45); border-radius:2px} .pf-nav b{width:14px; height:5px; border-radius:4px; background:var(--primary-900)}
.pf-sk{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.pf-sk i{height:8px; border-radius:4px; background:var(--neutral-100)}
.pf-leads{position:absolute; right:-16px; bottom:-14px; width:130px; padding:9px 10px 6px; border-radius:12px; background:var(--white); box-shadow:0 14px 32px rgba(41,36,92,.16)}
.pf-leads > div{display:flex; justify-content:space-between; align-items:center}
.pf-leads b{font-size:11px; color:var(--accent-900); font-weight:600}
.pf-leads > div span{padding:2px 6px; border-radius:999px; background:var(--success-bg); color:var(--success); font-size:9.5px; font-weight:600}
.pf-leads svg{width:100%; height:42px; margin-top:4px}
.pf-leads .area{fill:var(--accent-400)}
.pf-leads .line{fill:none; stroke:var(--accent-900); stroke-width:2; stroke-linecap:round; stroke-dasharray:200; stroke-dashoffset:200}
.pf-steps.in .pf-leads .line{animation:drawLine 1.6s 1s var(--ease) forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
.pf-steps.in .pf-leads{animation:floaty 5s 2s ease-in-out infinite}
@media (max-width:1180px){
  .pf-steps{grid-template-columns:repeat(3, 270px 30px) 270px}
}
@media (max-width:600px){ .pf-steps{grid-template-columns:repeat(3, 80vw 22px) 80vw} .pf-leads{right:-6px} }
@media (prefers-reduced-motion:reduce){ .js .pf-cm{opacity:1; translate:none} .js .pf-fl label > span:not(.pf-ups){color:var(--primary-900)} .pf-leads .line{stroke-dashoffset:0} }
.pf-cm div span.pf-tick{color:var(--white); margin:0}
.pf-tick svg{width:10px; height:10px}

/* =====================================================================
   REPORTING HERO — dashboard (reference design)
   ===================================================================== */
.page-hero:has(.rd-wrap) .hero-split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px}
.page-hero:has(.rd-wrap) h1{font-size:clamp(38px,4.4vw,60px)}
.rd-wrap{position:relative; padding:30px 22px 34px 22px}
.rd-wrap .ivm-dots.d1{right:-10px; top:-6px; left:auto}
.rd-d2{left:-60px; top:110px; position:absolute}
.rd-win{position:relative; z-index:1; background:var(--white); border-radius:18px; box-shadow:0 30px 70px rgba(41,36,92,.16); overflow:hidden}
.rd-bar{display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--neutral-100)}
.rd-title{font-size:13.5px; color:var(--neutral-700)}
.rd-sel{margin-left:auto; display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--neutral-200); border-radius:9px; font-size:12.5px; font-weight:500; color:var(--primary-900)}
.rd-grid{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:12px; padding:14px}
.rd-grid > .rd-card:nth-child(3){grid-column:1} 
.rd-grid{grid-template-areas:"f v" "c a"}
.rd-funnel{grid-area:f} .rd-visits{grid-area:v}
.rd-grid > .rd-card:nth-child(3){grid-area:c} .rd-grid > .rd-card:nth-child(4){grid-area:a}
.rd-card{border:1px solid var(--neutral-100); border-radius:12px; padding:14px; min-width:0}
.rd-h{display:block; font-size:13.5px; color:var(--primary-900); font-weight:600; margin-bottom:10px}
.rd-f{display:grid; grid-template-columns:72px minmax(0,1fr) 46px; gap:10px; align-items:center; padding:5px 0; font-size:12px; color:var(--neutral-700)}
.rd-f b{font:600 12px var(--font-mono); color:var(--primary-900); text-align:right; font-variant-numeric:tabular-nums}
.rd-tr{height:14px; border-radius:5px; background:var(--neutral-100); overflow:hidden}
.rd-tr i{display:block; height:100%; width:var(--w); border-radius:5px; background:var(--accent-900); transform-origin:left}
.rd-f:nth-child(3) .rd-tr i{background:var(--accent-800)} .rd-f:nth-child(4) .rd-tr i{background:var(--accent-700)} .rd-f:nth-child(5) .rd-tr i,.rd-f:nth-child(6) .rd-tr i{background:var(--accent-600)}
.js .page-hero .rd-tr i{scale:0 1}
.page-hero .rd-tr i{animation:barX 1s var(--ease) forwards; animation-delay:calc(.6s + var(--i) * .1s)}
@keyframes barX{to{scale:1 1}}
.rd-visits{background:linear-gradient(180deg,var(--neutral-50),var(--white)); display:flex; flex-direction:column}
.rd-k{font-size:13px; color:var(--neutral-700)}
.rd-big{display:flex; align-items:center; gap:10px; margin-top:4px}
.rd-big b{font:500 30px/1 var(--font-heading); color:var(--primary-900); font-variant-numeric:tabular-nums}
.rd-big span{padding:3px 8px; border-radius:999px; background:var(--success-bg); color:var(--success); font-size:11.5px; font-weight:600}
.rd-spark{flex:1; display:flex; align-items:flex-end; gap:2px; min-height:84px; margin-top:12px}
.rd-spark i{flex:1; height:var(--h); border-radius:2px 2px 0 0; background:var(--accent-500); transform-origin:bottom}
.rd-spark i.hi,.rd-spark i:nth-last-child(-n+4){background:var(--accent-700)}
.rd-spark i:nth-last-child(2){background:var(--accent-900)}
.js .page-hero .rd-spark i{scale:1 0}
.page-hero .rd-spark i{animation:barUp .5s var(--ease) forwards; animation-delay:calc(.8s + var(--i) * 30ms)}
.rd-ax{display:flex; justify-content:space-between; font-size:11px; color:var(--neutral-500); margin-top:6px; padding-top:6px; border-top:1px solid var(--neutral-100)}
.rd-rows{display:grid; gap:5px}
.rd-r{display:flex; justify-content:space-between; padding:8px 11px; border-radius:7px; background:var(--neutral-50); font-size:12px; color:var(--neutral-700)}
.rd-r b{font:600 12px var(--font-mono); color:var(--primary-900); font-variant-numeric:tabular-nums}
.rd-a{display:grid; grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr); gap:10px; align-items:center; padding:7px 10px; border-radius:7px; font-size:12px; color:var(--neutral-700)}
.rd-a.top{background:var(--accent-400)}
.rd-a b{font:600 12px var(--font-mono); color:var(--primary-900)}
.rd-a .rd-tr{height:12px}
.rd-a:nth-child(2) .rd-tr i{background:var(--accent-800)} .rd-a:nth-child(3) .rd-tr i,.rd-a:nth-child(4) .rd-tr i{background:var(--accent-700)}
.rd-note{font-size:10.5px; color:var(--neutral-500); text-align:right; padding:0 16px 10px; margin-top:-4px}
@media (max-width:1100px){ .page-hero:has(.rd-wrap) .hero-split{grid-template-columns:1fr} .rd-wrap{max-width:780px; margin-inline:auto} }
@media (max-width:700px){
  .rd-grid{grid-template-columns:minmax(0,1fr); grid-template-areas:"f" "v" "c" "a"}
  .rd-wrap{padding:14px 4px 20px}
  .rd-d2,.rd-wrap .ivm-dots{display:none}
  .rd-title{font-size:12px}
}
@media (prefers-reduced-motion:reduce){ .js .page-hero .rd-tr i,.js .page-hero .rd-spark i{scale:1} }