/* Khushi Fintech studio site — light "aurora" theme, native scroll, no reveal-on-scroll */
@font-face{font-family:"Bricolage";src:url("fonts/bricolage-latin.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dmsans-latin.woff2") format("woff2");font-weight:100 1000;font-display:swap}
@font-face{font-family:"Instrument";src:url("fonts/instrument-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --bg:#FFFDF8;--card:#FFFFFF;--ink:#10231B;--ink2:#34483F;--ink3:#53655C;--line:#E4ECE6;
  --em:#0A7A50;--em2:#12A068;--teal:#0E8C8F;--deep:#075A3B;
  --gold:#F5B800;--gold2:#FFD54A;--gold3:#C99400;--clay:#D97757;--clay2:#B9532F;
  --mint:#E7F6EE;--butter:#FFF3CC;--peach:#FFE6DB;--sky:#E1F4F6;--lilac:#EEE8FB;
  --brand:linear-gradient(120deg,#0A7A50 0%,#0E8C8F 55%,#12A068 100%);
  --warm:linear-gradient(120deg,#F5B800 0%,#F29A5C 55%,#D97757 100%);
  --display:"Bricolage","Arial Narrow",system-ui,sans-serif;
  --body:"DM Sans","Segoe UI",system-ui,sans-serif;
  --serif:"Instrument",Georgia,serif;
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --hdr:72px;
  --slab:0 1px 0 #fff inset,0 2px 0 #EDF3EF,0 5px 0 #E2ECE5,0 9px 0 #D3E2D9,0 28px 44px -28px rgba(16,35,27,.5);
}
*,*::before,*::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.65 var(--body);color:var(--ink2);overflow-x:clip;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 520px at 88% -120px,rgba(18,160,104,.16),transparent 70%),
    radial-gradient(760px 480px at -8% 120px,rgba(245,184,0,.14),transparent 70%),
    radial-gradient(700px 520px at 50% 1100px,rgba(14,140,143,.08),transparent 70%),
    var(--bg)}
img,svg{display:block;max-width:100%}
a{color:var(--em)}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}
.wrap{width:min(1200px,calc(100% - 40px));margin-inline:auto}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.fill{fill:currentColor;stroke:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--em);box-shadow:0 3px 0 #E8F0EA}
.eyebrow i{width:22px;height:22px;border-radius:7px;background:var(--brand);display:grid;place-items:center;color:#fff;font-style:normal;font-size:11px;letter-spacing:0}
.h1{font-family:var(--display);font-weight:700;font-size:clamp(42px,6.2vw,84px);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.4vw,56px);line-height:1.04;letter-spacing:-.035em;color:var(--ink)}
.h3{font-family:var(--body);font-weight:700;font-size:20px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.it.warm{background:var(--warm);-webkit-background-clip:text;background-clip:text}
.lead{font-size:clamp(17px,1.4vw,19.5px);color:var(--ink2);max-width:640px}
.sec{padding:clamp(72px,9vw,112px) 0}
.sec.tint{background:linear-gradient(180deg,rgba(231,246,238,.7),rgba(255,253,248,0))}
.head{max-width:760px}
.head .h2{margin-top:14px}
.head .lead{margin-top:14px}
.head.center{margin-inline:auto;text-align:center}
.head.center .lead{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 22px;border-radius:14px;border:0;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;color:#fff;background:var(--brand);box-shadow:0 5px 0 var(--deep),0 18px 28px -16px rgba(10,122,80,.7);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--deep),0 22px 32px -16px rgba(10,122,80,.7);color:#fff}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--deep)}
.btn.gold{background:linear-gradient(180deg,#FFDB5C,#F5B800);color:#1D2A12;box-shadow:0 5px 0 var(--gold3),0 18px 28px -16px rgba(201,148,0,.7)}
.btn.gold:hover{color:#1D2A12;box-shadow:0 7px 0 var(--gold3)}
.btn.gold:active{box-shadow:0 2px 0 var(--gold3)}
.btn.wa{background:#25D366;color:#063B1C;box-shadow:0 5px 0 #128C4A,0 18px 28px -16px rgba(18,140,74,.7)}
.btn.wa:hover{color:#063B1C;box-shadow:0 7px 0 #128C4A}
.btn.line{background:#fff;color:var(--ink);box-shadow:0 5px 0 #DCE6DF;border:1.5px solid var(--line)}
.btn.line:hover{color:var(--ink)}
.btn .ico{width:19px;height:19px}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header (sticky, never hides) ---------- */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:18px;min-height:var(--hdr)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;min-height:44px}
.logo svg{width:40px;height:40px}
.logo b{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.logo b span{color:var(--clay2)}
.nav{flex:1;display:flex;justify-content:center;gap:2px}
.nav a{position:relative;padding:10px 12px;border-radius:10px;font-weight:600;font-size:15px;color:var(--ink2);text-decoration:none;transition:color .2s,background .2s}
.nav a:hover{color:var(--em);background:var(--mint)}
.nav a[aria-current="page"]{color:var(--em)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:3px;background:var(--brand)}
.hdr-cta{min-height:44px;padding:10px 16px;font-size:15px;border-radius:12px}
.burger{display:none;width:46px;height:46px;border-radius:13px;border:1px solid var(--line);background:#fff;color:var(--ink);place-items:center;cursor:pointer;flex:none;box-shadow:0 3px 0 #E3EBE5}
.burger .ico{width:22px;height:22px}

/* phone menu: a sheet, like an app */
.mmenu{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none}
.mmenu .scrim{position:absolute;inset:0;background:rgba(16,35,27,.36);opacity:0;transition:opacity .25s}
.mmenu .sheet{position:absolute;left:10px;right:10px;bottom:10px;max-height:calc(100% - 20px);overflow:auto;border-radius:26px;background:#fff;padding:14px 14px 18px;transform:translateY(105%);transition:transform .35s var(--ease);box-shadow:0 -10px 40px -20px rgba(0,0,0,.4)}
.mmenu.open{visibility:visible;pointer-events:auto}
.mmenu.open .scrim{opacity:1}
.mmenu.open .sheet{transform:none}
.sheet .grab{width:44px;height:5px;border-radius:5px;background:#D5DED8;margin:2px auto 12px}
.sheet .row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sheet .row b{font-family:var(--display);font-size:20px;color:var(--ink)}
.sheet .x{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer}
.sheet nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sheet nav a{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:#F6FAF7;border:1px solid var(--line);font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;min-height:52px}
.sheet nav a .t{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand);color:#fff;flex:none}
.sheet nav a .t .ico{width:16px;height:16px}
.sheet nav a[aria-current="page"]{border-color:var(--em2);background:var(--mint)}
.sheet .btn{width:100%;margin-top:12px}

/* phone bottom tab bar */
.tabbar{display:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow-x:clip;padding:clamp(40px,6vw,72px) 0 0}
.hero-grid{display:flex;flex-wrap:wrap;align-items:center;gap:40px 56px}
.hero-copy{flex:1 1 520px;min-width:0}
.hero-copy .h1{margin-top:18px}
.hero-copy .lead{margin-top:20px}
.hero-copy .btns{margin-top:28px}
.rot{display:inline-grid;vertical-align:bottom}
.rot span{grid-area:1/1;opacity:0;transform:translateY(.35em);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rot span.on{opacity:1;transform:none}
.forline{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-weight:600;color:var(--ink3)}
.forline .rot{font-weight:800;color:var(--em)}
.facts{margin-top:30px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fact{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 0 #E9F0EB}
.fact .t3{width:38px;height:38px}
.fact b{display:block;font-weight:800;font-size:15px;color:var(--ink);line-height:1.2}
.fact small{display:block;font-size:13px;color:var(--ink3);line-height:1.3}

/* 3D icon tile */
.t3{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;background:var(--g,var(--brand));box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.14),0 5px 0 var(--e,var(--deep)),0 14px 20px -12px rgba(0,0,0,.35)}
.t3 .ico{width:24px;height:24px}
.g-em{--g:linear-gradient(140deg,#16B074,#0A7A50);--e:#075A3B}
.g-teal{--g:linear-gradient(140deg,#19B6B8,#0E8C8F);--e:#0A6466}
.g-gold{--g:linear-gradient(140deg,#FFD54A,#E9A800);--e:#B88700;color:#2A2205}
.g-clay{--g:linear-gradient(140deg,#F09A78,#D2643F);--e:#9E4A2C}
.g-plum{--g:linear-gradient(140deg,#9C7FE0,#6B4FB8);--e:#4E3690}
.g-sky{--g:linear-gradient(140deg,#5EC2F0,#2C8FD0);--e:#1D6A9E}
.g-rose{--g:linear-gradient(140deg,#F28AA8,#D0587E);--e:#9E3B5C}
.g-lime{--g:linear-gradient(140deg,#9BD45A,#5FA62E);--e:#467C20;color:#13260A}

/* hero 3D scene: everything drawn in code, so it is there on the first frame */
.scene{flex:1 1 460px;min-width:0;max-width:600px;margin-inline:auto;position:relative;aspect-ratio:1/1;perspective:1400px}
.scene .stage3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--ry,-10deg)) rotateX(var(--rx,6deg));transition:transform .6s var(--ease)}
.plate{position:absolute;left:7%;top:5%;width:86%;height:86%;border-radius:44px;background:var(--brand);transform:translateZ(-60px) rotate(-6deg);box-shadow:0 40px 70px -40px rgba(7,90,59,.8)}
.plate::after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:30px 30px}
.orb{position:absolute;border-radius:50%;transform:translateZ(40px)}
.orb.a{width:76px;height:76px;right:1%;top:0;background:radial-gradient(circle at 34% 28%,#FFF0A8,#F5B800 58%,#B98500)}
.orb.b{width:46px;height:46px;left:0;bottom:12%;background:radial-gradient(circle at 34% 28%,#FBC3AC,#D97757 60%,#9E4A2C)}
.float{animation:bob var(--d,7s) ease-in-out infinite}
.float.alt{animation-name:bob2}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes bob2{0%,100%{translate:0 0}50%{translate:0 9px}}
.chip3{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:13px;background:#fff;border:1px solid var(--line);box-shadow:0 5px 0 #E3EBE5,0 18px 26px -16px rgba(16,35,27,.45);font-weight:800;font-size:13px;color:var(--ink);transform:translateZ(90px);white-space:nowrap}
.chip3 .ico{width:16px;height:16px}
.stick{position:absolute;padding:9px 14px;border-radius:8px;background:linear-gradient(180deg,#FFE070,#F5B800);color:#2A2205;font-family:var(--display);font-weight:800;font-size:17px;transform:translateZ(110px) rotate(5deg);box-shadow:0 5px 0 var(--gold3);white-space:nowrap}

/* device mockups (laptop + phone with a mini website inside) */
.lap{position:absolute}
.lap .scr{border-radius:16px 16px 6px 6px;background:#13241D;padding:9px 9px 11px;box-shadow:0 34px 50px -26px rgba(5,40,27,.75)}
.lap .base{height:13px;margin:0 -6%;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#D3DDD7,#9FB1A8)}
.mini{border-radius:8px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.mini .bar{display:flex;align-items:center;gap:5px;padding:7px 9px;background:#F5F8F6;border-bottom:1px solid #E8EEEA}
.mini .bar i{width:7px;height:7px;border-radius:50%;background:#F6A28B}
.mini .bar i+i{background:#FFD54A}.mini .bar i+i+i{background:#8FDDB4}
.mini .bar span{margin-left:6px;font-size:10px;color:#5A6B63;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .body{display:flex;gap:10px;padding:14px;background:var(--mb,#F4FAF7)}
.mini .txt{flex:1;min-width:0}
.mini .kick{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ma,#0A7A50)}
.mini .ttl{margin-top:5px;font-family:var(--display);font-weight:700;font-size:clamp(13px,1.7vw,21px);line-height:1.05;color:var(--mt,#10231B)}
.mini .cta{display:inline-block;margin-top:9px;padding:5px 9px;border-radius:7px;background:var(--ma,#0A7A50);color:#fff;font-size:10px;font-weight:800}
.mini .pic{flex:0 0 38%;aspect-ratio:1;border-radius:11px;background:var(--mp,#D5F1E1);display:grid;place-items:center;color:var(--ma,#0A7A50)}
.mini .pic .ico{width:52%;height:52%;stroke-width:1.6}
.mini .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 14px 14px;background:var(--mb,#F4FAF7)}
.mini .rows i{height:26px;border-radius:7px;background:#fff;border:1px solid rgba(0,0,0,.06)}
.ph{position:absolute}
.ph .scr{border-radius:22px;background:#13241D;padding:6px;box-shadow:0 28px 44px -22px rgba(5,40,27,.8)}
.ph .mini{border-radius:16px;aspect-ratio:9/18}
.ph .mini .body{flex-direction:column;flex:1;padding:10px}
.ph .mini .pic{flex:1 1 auto;aspect-ratio:auto;min-height:60px}
.ph .mini .ttl{font-size:clamp(11px,1.3vw,15px)}
.ph .wa-bar{margin:0 10px 10px;padding:5px;border-radius:8px;background:#25D366;color:#063B1C;font-size:9px;font-weight:800;text-align:center}

/* ---------- marquee band ---------- */
.marq{margin-top:clamp(48px,6vw,72px);background:var(--brand);overflow:hidden;padding:16px 0;transform:rotate(-1deg);box-shadow:0 10px 30px -18px rgba(7,90,59,.7)}
.marq .track{display:flex;width:max-content;animation:marq 46s linear infinite}
.marq span{display:inline-flex;align-items:center;gap:10px;padding:0 22px;font-family:var(--display);font-weight:700;font-size:22px;color:#fff;white-space:nowrap}
.marq span .ico{color:var(--gold2)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- cards ---------- */
.grid{display:grid;gap:20px;margin-top:44px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.card{position:relative;border-radius:24px;background:var(--card);border:1px solid var(--line);padding:26px;box-shadow:0 6px 0 var(--edge,#E7EFE9),0 24px 40px -30px rgba(16,35,27,.45);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.hov .card:hover{transform:translateY(-4px);box-shadow:0 10px 0 var(--edge,#E7EFE9),0 30px 46px -30px rgba(16,35,27,.5)}
.card .h3{margin-top:16px}
.card p{margin-top:8px;font-size:15.5px;color:var(--ink2)}
.ticks{margin-top:14px;display:grid;gap:8px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--ink2)}
.ticks li .ico{width:18px;height:18px;margin-top:3px;color:var(--em2);stroke-width:2.6}
.svc-top{display:flex;align-items:center;gap:14px}
.svc-top .h3{margin:0}
.svc .num{margin-left:auto;font-family:var(--display);font-weight:800;font-size:15px;color:#B8C7BE}

/* industry tiles (every business) */
.inds{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px}
.chip{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 5px 0 #E7EFE9;text-decoration:none;color:var(--ink);font-weight:700;font-size:16px;line-height:1.25;transition:transform .25s var(--ease)}
.hov .chip:hover{transform:translateY(-3px);color:var(--ink)}
.chip .t3{width:44px;height:44px;border-radius:13px}
.chip .t3 .ico{width:21px;height:21px}

/* industry showcase card with a mini device */
.icard{border-radius:26px;background:#fff;border:1px solid var(--line);overflow:hidden;box-shadow:0 6px 0 #E7EFE9,0 24px 40px -30px rgba(16,35,27,.45)}
.icard .shot{position:relative;aspect-ratio:16/10;background:var(--sb,var(--mint));display:grid;place-items:center;overflow:hidden}
.icard .shot::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px);background-size:26px 26px}
.icard .shot .mini{position:relative;width:78%;transform:perspective(900px) rotateX(10deg) rotateY(-8deg);box-shadow:0 26px 40px -22px rgba(5,40,27,.55);border:6px solid #13241D;border-radius:14px}
.icard .in{padding:22px 24px 26px}
.icard .tag{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ma,var(--em))}
.icard .h3{margin-top:6px;font-size:22px}
.icard p{margin-top:8px;font-size:15.5px}
.icard .note{margin-top:12px;display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--ink3)}
.icard .note .ico{width:16px;height:16px;margin-top:3px;color:var(--teal)}

/* ---------- pricing ---------- */
.plans{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;border-radius:28px;padding:30px 26px;background:#fff;border:1px solid var(--line);box-shadow:0 7px 0 #E7EFE9,0 30px 50px -36px rgba(16,35,27,.5)}
.plan .pname{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.plan .pfor{margin-top:4px;font-size:15px;color:var(--ink3)}
.plan .price{margin-top:22px;font-family:var(--display);font-weight:800;font-size:46px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.plan .price small{font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:0;color:var(--ink3)}
.plan .price.ask{font-size:34px}
.plan .ticks{margin-top:22px}
.plan .btn{margin-top:auto}
.plan .sp{flex:1;min-height:24px}
.plan.hot{background:linear-gradient(165deg,#0E8C6A 0%,#0A7A50 55%,#075A3B 100%);border-color:transparent;color:#E6F6EE;box-shadow:0 8px 0 #054A30,0 36px 60px -30px rgba(7,90,59,.85);transform:translateY(-10px)}
.plan.hot .pname,.plan.hot .price{color:#fff}
.plan.hot .pfor,.plan.hot .price small,.plan.hot .ticks li{color:#D2EEDF}
.plan.hot .ticks li .ico{color:var(--gold2)}
.plan.lux{background:linear-gradient(170deg,#FFFBEE,#FFF3D1);border-color:#EBD08A;box-shadow:0 7px 0 #EEDCA4,0 30px 50px -36px rgba(120,90,0,.5)}
.plan.lux .price{background:linear-gradient(120deg,#B98500,#D97757);-webkit-background-clip:text;background-clip:text;color:transparent}
.ribbon{position:absolute;top:-14px;right:22px;padding:6px 12px;border-radius:999px;background:linear-gradient(180deg,#FFE070,#F5B800);color:#2A2205;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 3px 0 var(--gold3)}
.allin{margin-top:28px;border-radius:24px;padding:22px 24px;background:#fff;border:1px dashed #BFD9CB;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.allin b{font-family:var(--display);font-size:19px;color:var(--ink)}
.allin span{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--ink2)}
.allin span .ico{width:18px;height:18px;color:var(--em2);stroke-width:2.6}

/* ---------- compare ---------- */
.vs{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:22px}
.vs .side{border-radius:28px;padding:28px 26px;background:#fff;border:1px solid var(--line);box-shadow:0 7px 0 #E7EFE9}
.vs .side.us{background:linear-gradient(165deg,#F2FBF6,#E3F6EC);border-color:#BFE3CF;box-shadow:0 7px 0 #CDEBDA,0 30px 50px -34px rgba(10,122,80,.6)}
.vs .side h3{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:24px;color:var(--ink)}
.vs .side ul{margin-top:18px;display:grid;gap:12px}
.vs .side li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start;padding-bottom:12px;border-bottom:1px solid var(--line)}
.vs .side li:last-child{border-bottom:0;padding-bottom:0}
.vs .side li .ico{grid-row:span 2;width:22px;height:22px;margin-top:2px;stroke-width:2.4}
.vs .side li b{font-size:15px;color:var(--ink)}
.vs .side li small{font-size:15px;color:var(--ink2)}
.vs .them li .ico{color:var(--clay2)}
.vs .us li .ico{color:var(--em2)}
.costs{margin-top:44px;border-radius:28px;padding:clamp(22px,4vw,36px);background:#fff;border:1px solid var(--line);box-shadow:0 7px 0 #E7EFE9}
.costs .yr{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px 18px;align-items:center;margin-top:18px}
.costs .yr>b{font-family:var(--display);font-size:18px;color:var(--ink)}
.bars{display:grid;gap:8px}
.bar{display:flex;align-items:center;gap:10px;min-width:0}
.bar i{display:block;height:30px;border-radius:9px;flex:none;width:var(--w);min-width:6px}
.bar.them i{background:linear-gradient(90deg,#F2A98D,#D2643F)}
.bar.us i{background:var(--brand)}
.bar small{font-weight:800;font-size:14px;color:var(--ink);white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:6px;font-weight:700;font-size:14px}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:16px;height:16px;border-radius:5px}
.src{margin-top:16px;font-size:13px;color:var(--ink3)}
.tbl{position:relative;margin-top:44px;overflow-x:auto;border-radius:24px;border:1px solid var(--line);background:#fff;box-shadow:0 7px 0 #E7EFE9}
.tbl table{width:100%;min-width:640px;border-collapse:collapse;font-size:15.5px}
.tbl th,.tbl td{padding:15px 18px;text-align:left;border-bottom:1px solid #EEF3EF;vertical-align:top}
.tbl thead th{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);background:#FAFCFA}
.tbl thead th.hl{background:var(--brand);color:#fff}
.tbl tbody th{font-weight:700;color:var(--ink)}
.tbl td.hl{background:#F2FBF6;font-weight:700;color:var(--em)}
.tbl .yes{color:var(--em2)}.tbl .no{color:#A7B5AD}

/* ---------- steps ---------- */
.steps{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px;counter-reset:s}
.step{position:relative;border-radius:22px;background:#fff;border:1px solid var(--line);padding:22px 20px;box-shadow:0 6px 0 #E7EFE9}
.step .n{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px;color:var(--gold2);background:radial-gradient(circle at 34% 28%,#2FC384 0 16%,#12A068 45%,#0A7A50 100%);border:2px solid #E0A800;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 4px 0 var(--deep)}
.step .h3{margin-top:14px;font-size:18px}
.step p{margin-top:6px;font-size:15px}

/* ---------- CTA panel ---------- */
.cta{position:relative;overflow:hidden;border-radius:32px;padding:clamp(32px,6vw,68px);background:var(--brand);color:#E6F6EE;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;box-shadow:0 10px 0 #054A30,0 40px 70px -40px rgba(7,90,59,.85)}
.cta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:46px 46px;pointer-events:none}
.cta>*{position:relative}
.cta .h2{color:#fff}
.cta .h2 .it{background:linear-gradient(90deg,#FFE070,#FFD54A);-webkit-background-clip:text;background-clip:text}
.cta p{margin-top:12px;max-width:520px;color:#D2EEDF}
.cta .copy{flex:1 1 420px;min-width:0}

/* ---------- FAQ ---------- */
.qa{border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 0 #EDF3EF}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;min-height:56px;font-weight:700;font-size:17px;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--mint);color:var(--em);transition:transform .3s var(--ease)}
.qa[open] summary .pm{transform:rotate(45deg)}
.qa .a{padding:0 20px 20px;font-size:15.5px;color:var(--ink2)}
.faqs{margin-top:36px;display:grid;gap:12px;max-width:880px}

/* ---------- page hero (inner pages) ---------- */
.phero{padding:clamp(44px,6vw,80px) 0 clamp(24px,3vw,40px)}
.phero .h1{margin-top:16px;font-size:clamp(38px,5.4vw,72px)}
.phero .lead{margin-top:18px}
.crumbs{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600;color:var(--ink3)}
.crumbs a{color:var(--ink3);text-decoration:none}
.crumbs a:hover{color:var(--em)}

/* ---------- forms ---------- */
.form{border-radius:28px;background:#fff;border:1px solid var(--line);padding:clamp(22px,4vw,34px);box-shadow:0 7px 0 #E7EFE9,0 30px 50px -36px rgba(16,35,27,.5)}
.form .h3{font-family:var(--display);font-size:26px}
.form p{margin-top:6px;font-size:15px;color:var(--ink3)}
.field{display:block;margin-top:16px}
.field span{display:block;font-weight:700;font-size:14px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;margin-top:6px;padding:13px 14px;border-radius:12px;border:1.5px solid #D5E2DA;background:#FBFDFC;font:inherit;font-size:16px;color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--em2);background:#fff}
.form .btn{width:100%;margin-top:18px}
.form small{display:block;margin-top:10px;font-size:13px;color:var(--ink3)}
.two{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.two>*{flex:1 1 400px;min-width:0}
.panel{border-radius:24px;background:#fff;border:1px solid var(--line);padding:24px;box-shadow:0 6px 0 #E7EFE9}
.panel+.panel{margin-top:16px}
.panel .h3{margin-top:12px}
.panel p{margin-top:6px;font-size:15.5px}
.prose{max-width:780px}
.prose h2{margin-top:34px;font-family:var(--display);font-weight:700;font-size:26px;color:var(--ink)}
.prose p,.prose li{margin-top:10px;font-size:16.5px}
.prose ul{margin-top:8px;padding-left:20px;list-style:disc}

/* ---------- footer ---------- */
.ftr{margin-top:0;background:linear-gradient(180deg,#F3FAF6,#E9F5EE);border-top:1px solid #D7E8DE}
.ftr .wrap{padding:60px 0 28px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.fgrid h4{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--em)}
.fgrid p{font-size:15px;max-width:32ch}
.flinks{display:grid;gap:2px}
.flinks a{padding:7px 0;font-size:15px;color:var(--ink2);text-decoration:none}
.flinks a:hover{color:var(--em)}
.fcon{display:grid;gap:12px}
.fcon li{display:flex;align-items:center;gap:10px}
.fcon a{font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;padding:6px 0}
.fci{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;background:var(--fc,var(--em));box-shadow:0 2px 0 rgba(0,0,0,.16)}
.fci .ico{width:14px;height:14px;stroke-width:2.2}
.fci-wa{--fc:#25D366}.fci-phone{--fc:#2F6FD6}.fci-globe{--fc:#0E8C8F}.fci-chat{--fc:#D97757}
.soc{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.soc a{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--sb);box-shadow:0 4px 0 var(--se);transition:transform .25s var(--ease)}
.hov .soc a:hover{transform:translateY(-3px)}
.soc .ico{width:20px;height:20px}
.soc .fb{--sb:#1877F2;--se:#0D4FB0}.soc .ig{--sb:linear-gradient(45deg,#F9B233,#EE2A7B 45%,#8A3AB9);--se:#6B2A8F}.soc .yt{--sb:#FF1F1F;--se:#B30F0F}.soc .xx{--sb:#16181C;--se:#000}.soc .wa{--sb:#25D366;--se:#128C4A}
.fbottom{margin-top:44px;padding-top:20px;border-top:1px solid #D2E3D9;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:14px;color:var(--ink3)}
.fbottom nav{display:flex;gap:18px}
.fbottom a{color:var(--ink3)}

/* ---------- motion hygiene ---------- */
html.scrolling .float,html.scrolling .marq .track{animation-play-state:paused}
html.scrolling main,html.scrolling .ftr{pointer-events:none}
.is-off .float,.is-off .track,.is-off.float{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- laptop-small ---------- */
@media (max-width:1100px){
  .nav a{padding:10px 8px;font-size:14.5px}
  .fgrid{grid-template-columns:1fr 1fr}
}
/* ---------- phone: app-like header + bottom tab bar ---------- */
@media (max-width:900px){
  :root{--hdr:64px}
  html{scroll-padding-top:80px}
  .nav,.hdr-cta{display:none}
  .burger{display:grid;margin-left:auto}
  .logo svg{width:36px;height:36px}
  .logo b{font-size:19px}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:70;height:64px;padding:0 6px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 0 #E3EBE5,0 18px 34px -16px rgba(16,35,27,.45)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:64px;font-size:11px;font-weight:700;color:var(--ink3);text-decoration:none}
  .tabbar a .ico{width:22px;height:22px}
  .tabbar a[aria-current="page"]{color:var(--em)}
  .tabbar a[aria-current="page"] .ico{stroke-width:2.4}
  .tabbar .mid{position:relative}
  .tabbar .mid b{width:56px;height:56px;margin-top:-26px;border-radius:18px;display:grid;place-items:center;background:#25D366;color:#fff;box-shadow:0 5px 0 #128C4A,0 14px 22px -10px rgba(18,140,74,.7)}
  .tabbar .mid b .ico{width:26px;height:26px}
  .tabbar .mid span{color:#128C4A}
  .fgrid{grid-template-columns:1fr}
  .wrap{width:calc(100% - 32px)}
  .scene{width:100%;max-width:440px}
  .marq span{font-size:18px}
  .plan.hot{transform:none}
  .costs .yr{grid-template-columns:1fr}
  .chip3{font-size:12px;padding:8px 11px}
  .stick{font-size:15px}
  .chip3{white-space:normal;max-width:56%;line-height:1.25}
  .inds{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .chip{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 12px;font-size:14.5px}
  .step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;align-items:start}
  .step .n{grid-row:span 2}
  .step .h3{margin-top:4px}
}
@media (max-width:380px){
  .h1{font-size:38px}
  .tabbar a{font-size:10px}
}

/* ================= v2 (31-Oct): 3D slabs everywhere, hero on cards, comparison sheet ================= */
.card,.icard,.step,.qa,.panel,.chip,.form,.plan:not(.hot):not(.lux),.fact{box-shadow:var(--slab)}
.hov .card:hover{box-shadow:var(--slab)}
.plan.lux{box-shadow:0 1px 0 #fff inset,0 3px 0 #F3E6BC,0 6px 0 #EAD79A,0 10px 0 #DEC77E,0 30px 50px -32px rgba(120,90,0,.5)}
.plan.hot{box-shadow:0 3px 0 #0A6343,0 6px 0 #075A3B,0 10px 0 #054A30,0 36px 60px -30px rgba(7,90,59,.85)}
.sec.tint{background-image:radial-gradient(rgba(10,122,80,.09) 1px,transparent 1.4px),linear-gradient(180deg,rgba(231,246,238,.75),rgba(255,253,248,0));background-size:22px 22px,100% 100%}

/* hero background: dotted field + three thin colour rings, all static */
.hero{isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(10,122,80,.14) 1.1px,transparent 1.5px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(75% 65% at 72% 32%,#000 25%,transparent 75%);mask-image:radial-gradient(75% 65% at 72% 32%,#000 25%,transparent 75%)}
.hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:920px;height:920px;right:-300px;top:-330px;border-radius:50%;
  background:radial-gradient(circle,transparent 53%,rgba(18,160,104,.13) 53.4%,transparent 54%,transparent 62%,rgba(245,184,0,.16) 62.4%,transparent 63%,transparent 71%,rgba(14,140,143,.11) 71.4%,transparent 72%)}

/* thick 3D slab the laptop and phone sit on */
.slabcard{position:absolute;left:4%;top:25%;width:92%;height:66%;border-radius:36px;background:var(--brand);transform:translateZ(-40px) rotate(-4deg);
  box-shadow:0 3px 0 #0B6E49,0 7px 0 #095E3E,0 12px 0 #075A3B,0 44px 70px -34px rgba(7,90,59,.85)}
.slabcard::after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:30px 30px}
/* the three plans, fanned like cards behind it */
.pcs{position:absolute;left:3%;top:1%;width:94%;height:34%;transform:translateZ(-90px)}
.pc{position:absolute;top:8%;width:33%;padding:11px 12px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);
  box-shadow:0 2px 0 #EDF3EF,0 5px 0 #DCE7E0,0 18px 26px -18px rgba(16,35,27,.45);display:grid;gap:5px}
.pc b{font-size:clamp(8px,.85vw,11px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--em)}
.pc strong{font-family:var(--display);font-weight:800;font-size:clamp(13px,1.75vw,22px);letter-spacing:-.02em;color:var(--ink);line-height:1}
.pc i{display:block;height:6px;border-radius:6px;background:#E7EFEA}
.pc i:nth-of-type(2){width:80%}.pc i:nth-of-type(3){width:60%}
.pc1{left:0;transform:rotate(-13deg)}
.pc2{left:33.5%;top:0;transform:rotate(-2deg);z-index:2}
.pc3{right:0;transform:rotate(11deg)}
.pc.hot{background:linear-gradient(165deg,#0E8C6A,#0A7A50);border-color:transparent;box-shadow:0 3px 0 #075A3B,0 6px 0 #054A30,0 18px 26px -16px rgba(7,90,59,.7)}
.pc.hot b{color:#CDEEDC}.pc.hot strong{color:var(--gold2)}.pc.hot i{background:rgba(255,255,255,.22)}
.pc.lux{background:linear-gradient(170deg,#FFFBEE,#FFF0C4);border-color:#EBD08A}
.pc.lux b{color:#9A6F00}

/* price facts on one 3D strip under the hero */
.slab{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--slab);overflow:hidden}
.sl{display:flex;align-items:center;gap:12px;padding:18px 20px;border-left:1px solid #EEF3EF}
.sl:first-child{border-left:0}
.sl .t3{width:44px;height:44px;border-radius:13px}
.sl .t3 .ico{width:21px;height:21px}
.sl b{display:block;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--ink);line-height:1.15}
.sl small{display:block;font-size:13.5px;color:var(--ink3);line-height:1.3}

/* comparison sheet: other designers vs us */
.cmp{margin-top:40px;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:var(--slab);overflow:hidden}
.cmp-row{display:grid;grid-template-columns:1.15fr 1fr 1fr;border-top:1px solid #EEF3EF}
.cmp-row:first-child{border-top:0}
.cmp-row>div{display:flex;align-items:center;gap:10px;padding:16px 20px;font-size:15.5px;min-width:0}
.cmp-row .k{font-weight:700;color:var(--ink)}
.cmp-row .o{color:#8A3F22}
.cmp-row .o .ico{width:18px;height:18px;color:var(--clay2);stroke-width:2.6}
.cmp-row .us{background:#F0FAF4;font-weight:700;color:#08603F}
.cmp-row .us .ico{width:18px;height:18px;color:var(--em2);stroke-width:2.6}
.mini3{width:34px;height:34px;border-radius:10px}
.mini3 .ico{width:17px;height:17px}
.cmp-h>div{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);background:#FAFCFA}
.cmp-h .us{background:var(--brand);color:#fff}
.cmp-h .us .ico{color:var(--gold2)}
.cmp-row.total>div{font-family:var(--display);font-weight:800;font-size:clamp(17px,1.8vw,22px);letter-spacing:-.01em}
.cmp-row.total .o{color:#B9532F;background:#FFF5F0}
.cmp-row.total .us{color:var(--em);background:#E3F6EC}
.promise{margin-top:22px;display:flex;align-items:flex-start;gap:16px;padding:22px 24px;border-radius:24px;background:linear-gradient(120deg,#FFFBEA,#FFF1C7);border:1px solid #EFD98C;
  box-shadow:0 2px 0 #F6E7B5,0 5px 0 #EEDCA4,0 9px 0 #E4CE87,0 26px 40px -28px rgba(120,90,0,.45)}
.promise h3{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;color:var(--ink)}
.promise p{margin-top:6px;font-size:16px;color:#4A3A10}
.save{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px;border-radius:28px;padding:clamp(22px,4vw,36px);background:#fff;border:1px solid var(--line);box-shadow:var(--slab)}
.save-copy{flex:1 1 360px;min-width:0}
.save .kick{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--clay2)}
.save h3{margin-top:8px;font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,42px);line-height:1.05;letter-spacing:-.03em;color:var(--ink)}
.save h3 span{color:var(--em)}
.save p{margin-top:10px;font-size:16px;color:var(--ink2)}
.save-bars{flex:1 1 360px;min-width:0;display:grid;gap:8px}
.save-bars .bar i{height:34px}
.save-bars .lbl{font-weight:800;font-size:14px;color:#8A3F22;margin-bottom:8px}
.save-bars .lbl.us{color:var(--em)}

@media (max-width:900px){
  .slab{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl{padding:14px;border-left:0;border-top:1px solid #EEF3EF}
  .sl:nth-child(-n+2){border-top:0}
  .sl:nth-child(even){border-left:1px solid #EEF3EF}
  .sl b{font-size:16px}
  .sl .t3{width:38px;height:38px}
  .cmp-row{grid-template-columns:1fr 1fr}
  .cmp-row .k{grid-column:1/-1;padding:14px 16px 6px;background:#FAFCFA}
  .cmp-row>div{padding:12px 14px;font-size:14.5px;align-items:flex-start}
  .cmp-h .k{display:none}
  .cmp-row.total .k{font-size:16px}
  .pc{padding:8px 9px 10px;border-radius:12px;gap:4px}
  .pc i{height:4px}
}
@media (max-width:900px){
  .pcs{left:9%;width:82%}
  .pc3{transform:rotate(7deg)}
  .pc1{transform:rotate(-9deg)}
  .orb.a{display:none}
  .sl{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ================= v3 (31-Oct): drum words, loud labels, services strips, 5-column compare ================= */
.eyebrow{gap:10px;padding:8px 16px 8px 8px;border:0;background:var(--brand);color:#fff;font-size:13.5px;letter-spacing:.12em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 0 var(--deep),0 12px 20px -12px rgba(7,90,59,.7)}
.eyebrow i{width:26px;height:26px;border-radius:8px;background:linear-gradient(180deg,#FFE070,#F5B800);color:#2A2205;font-weight:800;font-size:11.5px;box-shadow:0 2px 0 var(--gold3)}
.eyebrow.hot{background:linear-gradient(120deg,#FFE070 0%,#F5B800 45%,#F29A5C 100%);color:#2A1A05;font-size:14px;padding:9px 18px 9px 9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 0 #C9862E,0 14px 22px -12px rgba(201,134,46,.7)}
.eyebrow.hot i{background:var(--brand);color:#fff;box-shadow:0 2px 0 var(--deep)}
.eyebrow.hot i .ico{width:15px;height:15px;stroke-width:2.4}

.forline{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em;color:var(--ink)}
.rotbox{display:inline-flex;align-items:center;padding:4px 16px 6px;border-radius:16px;background:#fff;border:1px solid var(--line);perspective:500px;
  box-shadow:0 1px 0 #fff inset,0 3px 0 #E2ECE5,0 6px 0 #D3E2D9,0 18px 26px -18px rgba(16,35,27,.5)}
.rot{display:inline-grid}
.rot span{grid-area:1/1;font-weight:800;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:rotateX(-90deg);transform-origin:50% 50% -.55em;backface-visibility:hidden;transition:transform .65s var(--spring),opacity .35s var(--ease)}
.rot span.on{opacity:1;transform:rotateX(0)}
.rot span.out{opacity:0;transform:rotateX(90deg)}

.card.svc{padding:0;overflow:hidden}
.svc .svc-top{padding:18px 20px;gap:14px;background:var(--g);color:#fff}
.svc .svc-top .t3{background:#fff;color:var(--e);box-shadow:0 4px 0 rgba(0,0,0,.14)}
.svc .svc-top .h3{color:#fff}
.svc .svc-top.g-gold .h3,.svc .svc-top.g-lime .h3{color:#1D2A12}
.svc .num{color:rgba(255,255,255,.75)}
.svc .svc-top.g-gold .num,.svc .svc-top.g-lime .num{color:rgba(29,42,18,.6)}
.svc>p{margin:16px 22px 0}
.svc>.ticks{margin:14px 22px 24px}

.tbl5 table{min-width:860px}
.tbl5 th[scope="row"]{width:22%}
.tbl5 thead th.oth{background:linear-gradient(120deg,#F29A5C,#D2643F);color:#fff}
.tbl5 td.oth{background:#FFF5F0;color:#8A3F22}
.tbl5 tbody tr:first-child td,.tbl5 tbody tr:nth-child(2) td,.tbl5 tbody tr:last-child td{font-family:var(--display);font-weight:800;font-size:17px}
.tbl5 tbody tr:first-child td.hl,.tbl5 tbody tr:nth-child(2) td.hl,.tbl5 tbody tr:last-child td.hl{color:var(--em)}
@media (max-width:1240px){.nav a{padding:10px 7px;font-size:14px}}
@media (max-width:900px){.forline{font-size:20px}.rotbox{padding:3px 12px 5px}}

/* phone (v5): the 5-column compare table scrolls sideways; "What you get" stays pinned on the left */
.swipe{display:none}
@media (max-width:900px){
  .swipe{display:flex;align-items:center;gap:8px;margin:0 0 -30px;font-weight:700;font-size:14px;color:var(--em)}
  .swipe .ico{width:16px;height:16px}
  .tbl5{overscroll-behavior-x:contain;scrollbar-width:thin}
  .tbl5 table{min-width:720px;font-size:14px}
  .tbl5 th,.tbl5 td{padding:12px 12px}
  .tbl5 th:first-child{position:sticky;left:0;z-index:2;width:128px;min-width:128px;max-width:128px;background:#fff;box-shadow:inset -1px 0 0 #D9E5DD,8px 0 12px -8px rgba(16,35,27,.45)}
  .tbl5 thead th:first-child{background:#FAFCFA}
  .tbl5 thead th{font-size:12px}
  .tbl5 tbody tr:first-child td,.tbl5 tbody tr:nth-child(2) td,.tbl5 tbody tr:last-child td{font-size:15px}
}

/* ================= v4 (31-Oct): free demo banner, demo first on the hero strip, footer link icons ================= */
.demo{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;padding:clamp(22px,4vw,40px);border-radius:30px;
  background:linear-gradient(120deg,#FFF7DC 0%,#FFEAA6 50%,#FFDCC6 100%);border:1px solid #EFCF7A;
  box-shadow:0 1px 0 #fff inset,0 3px 0 #F3DD97,0 7px 0 #E8C86F,0 12px 0 #D9B457,0 40px 60px -36px rgba(150,100,0,.55)}
.demo>.t3{width:68px;height:68px;border-radius:20px}
.demo>.t3 .ico{width:32px;height:32px}
.demo-copy{flex:1 1 440px;min-width:0}
.demo .kick{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A5300}
.demo h3{margin-top:6px;font-family:var(--display);font-weight:800;font-size:clamp(26px,3.2vw,40px);line-height:1.05;letter-spacing:-.03em;color:var(--ink)}
.demo h3 span{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.demo-copy p{margin-top:10px;font-size:16.5px;color:#4A3410;max-width:760px}
.demo .btn{flex:none}

.slab .sl b{font-size:16.5px}
.slab .sl:nth-child(2){border-left:0}
.slab .sl:not(.feat){border-top:1px solid #EEF3EF}
.sl.feat{grid-column:1/-1;border-left:0;background:linear-gradient(120deg,#FFF7DC,#FFEAA6 60%,#FFE3D2);padding:16px 20px}
.sl.feat b{font-size:clamp(18px,1.8vw,22px)}
.sl.feat small{font-size:14.5px;color:#5A4410}

.flinks a{display:flex;align-items:center;gap:9px}
.flinks a .ico{width:16px;height:16px;color:var(--em2);stroke-width:2.1}

@media (max-width:900px){
  .demo{border-radius:24px}
  .demo .btn{width:100%}
  .slab .sl{border-left:0;border-top:1px solid #EEF3EF}
  .slab .sl.feat{border-top:0;flex-direction:row;align-items:center}
  .slab .sl:nth-child(odd):not(.feat){border-left:1px solid #EEF3EF}
}

/* ================= v5 (1-Nov): hero label right under the header ================= */
.hero{padding-top:clamp(14px,2vw,28px)}

/* ================= v6 (31-Oct night): no hero rings, hero label on one line on phone ================= */
.hero::after{display:none}
@media (max-width:600px){
  .hero .eyebrow.hot{max-width:100%;white-space:nowrap;gap:7px;padding:7px 12px 7px 7px;font-size:min(12px,3.05vw);letter-spacing:.05em}
  .hero .eyebrow.hot i{width:22px;height:22px;border-radius:7px;flex:none}
  .hero .eyebrow.hot i .ico{width:13px;height:13px}
}