/* Arya Kulkarni, CA
   Direction: airy sky. White and pale-sky pages, deep blue ink, sunflower yellow for
   the moments that matter (highlights, buttons on hover, totals). Rounded, friendly type.
   Each service page has one moving exhibit that shows the work happening. */

@font-face{font-family:"Fredoka";font-weight:500;font-display:swap;src:url("fonts/fredoka-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url("fonts/fredoka-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url("fonts/nunito-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:600;font-display:swap;src:url("fonts/nunito-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url("fonts/nunito-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-weight:400;font-display:swap;src:url("fonts/dm-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-weight:500;font-display:swap;src:url("fonts/dm-mono-latin-500-normal.woff2") format("woff2")}

:root{
  --white:#FFFFFF;
  --sky-50:#F3F8FF;
  --sky-100:#E4F0FD;
  --sky-200:#C9E1FA;
  --sky-400:#7DB8F3;
  --blue:#2266D4;
  --blue-2:#1A52AF;
  --ink:#0F2B57;
  --ink-2:#4B6489;
  --ink-3:#8296B3;
  --line:#DCE8F6;
  --sun:#FFC93C;
  --sun-2:#FFB000;
  --butter:#FFF4CC;
  --ok:#21A35A;
  --ok-bg:#E3F6EA;
  --coral:#E8644A;

  --display:"Fredoka", "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --body:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step-0:clamp(16px, .95rem + .2vw, 18px);
  --step-1:clamp(19px, 1.1rem + .4vw, 23px);
  --step-2:clamp(24px, 1.3rem + 1vw, 32px);
  --step-3:clamp(32px, 1.6rem + 2.4vw, 54px);
  --step-4:clamp(42px, 1.9rem + 4.2vw, 86px);

  --gutter:max(20px, 4vw);
  --max:1240px;
  --r-lg:28px; --r-md:18px; --r-sm:12px;
  --ease:cubic-bezier(.22,.7,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--white); color:var(--ink); font-family:var(--body); font-size:var(--step-0); line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:600; letter-spacing:-.015em; text-wrap:balance; line-height:1.08; color:var(--ink)}
:focus-visible{outline:3px solid var(--sun); outline-offset:3px; border-radius:6px}
::selection{background:var(--sun); color:var(--ink)}
.wrap{max-width:var(--max); margin:0 auto; padding-left:max(var(--gutter), env(safe-area-inset-left,0px)); padding-right:max(var(--gutter), env(safe-area-inset-right,0px))}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.lede{font-size:var(--step-1); line-height:1.55; color:var(--ink-2); max-width:34em}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:8px 14px; z-index:100; border-radius:8px}
.skip:focus{left:12px}

/* Tag (replaces mono eyebrows) */
.tag{display:inline-flex; align-items:center; gap:8px; font:700 13px var(--body); letter-spacing:.02em; color:var(--blue);
  background:var(--sky-100); border-radius:999px; padding:6px 14px}
.tag::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--sun)}

/* Accent word: set in bright blue */
.mark{color:var(--blue)}

/* LinkedIn link: logo + word, no URL shown */
.li{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:700}
.li svg{width:26px; height:26px; flex:none}
.li:hover{color:var(--blue)}
.site-foot .li svg{width:20px; height:20px}
.site-foot .li:hover{color:var(--sun)}

/* ---------- Header ---------- */
.site-head{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); transition:box-shadow .3s}
.site-head.scrolled{box-shadow:0 1px 0 var(--line), 0 10px 30px -24px rgba(15,43,87,.4)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:16px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; white-space:nowrap}
.brand .name{font-family:var(--display); font-weight:600; font-size:23px; letter-spacing:-.01em}
.brand .post{font:700 12px var(--body); color:#fff; background:var(--blue); border-radius:7px; padding:2px 7px; letter-spacing:.04em}
.nav{display:flex; align-items:center; gap:6px; font-weight:600; font-size:15.5px}
.nav > a:not(.btn){text-decoration:none; color:var(--ink-2); padding:8px 13px; border-radius:999px; transition:background .25s, color .25s}
.nav > a:not(.btn):hover{background:var(--sky-100); color:var(--ink)}
.nav > a[aria-current="page"]{background:var(--sky-100); color:var(--blue)}
.nav .btn{margin-left:10px}
.menu-btn{display:none; background:var(--sky-100); border:0; border-radius:999px; padding:9px 18px; font:700 14px var(--body); color:var(--ink); cursor:pointer}
@media (max-width:1120px){
  .menu-btn{display:inline-block; position:relative; z-index:2}
  .site-head{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--white)}
  .nav{position:fixed; inset:0; height:100dvh; background:var(--sky-50); flex-direction:column; align-items:flex-start; justify-content:center; gap:8px;
    padding:0 max(var(--gutter), env(safe-area-inset-left,0px)); font-family:var(--display); font-size:30px;
    opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .35s, transform .45s var(--ease), visibility 0s .45s; z-index:1}
  .nav.open{opacity:1; visibility:visible; transform:none; transition:opacity .35s, transform .45s var(--ease), visibility 0s}
  .nav > a:not(.btn){padding:6px 0; background:none !important}
  .nav .btn{margin:16px 0 0}
  body.menu-open{overflow:hidden}
}

/* ---------- Buttons: magnetic + yellow fill ---------- */
.btn{position:relative; display:inline-flex; align-items:center; gap:12px; text-decoration:none; font:700 16px var(--body);
  padding:8px 8px 8px 24px; border-radius:999px; background:var(--blue); color:#fff; border:0; cursor:pointer; overflow:hidden; isolation:isolate;
  transition:color .35s var(--ease), box-shadow .35s; box-shadow:0 10px 24px -14px rgba(34,102,212,.9); will-change:transform}
.btn::before{content:""; position:absolute; inset:0; background:var(--sun); border-radius:inherit; transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); z-index:-1}
.btn:hover{color:var(--ink); box-shadow:0 14px 30px -14px rgba(255,176,0,.8)}
.btn:hover::before{transform:scaleX(1)}
.btn .arr{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.18); overflow:hidden; position:relative; flex:none}
.btn .arr i{position:absolute; inset:0; display:grid; place-items:center; font-style:normal; transition:transform .45s var(--ease)}
.btn .arr i + i{transform:translateX(-120%)}
.btn:hover .arr{background:var(--ink); color:var(--sun)}
.btn:hover .arr i:first-child{transform:translateX(120%)}
.btn:hover .arr i + i{transform:none}
.btn .lbl{display:inline-block; will-change:transform}
.btn.ghost{background:var(--white); color:var(--blue); box-shadow:inset 0 0 0 2px var(--sky-200)}
.btn.ghost .arr{background:var(--sky-100)}
.btn.ghost:hover{color:var(--ink); box-shadow:inset 0 0 0 2px var(--sun)}
.btn.small{font-size:14.5px; padding:5px 5px 5px 18px; gap:10px}
.btn.small .arr{width:30px; height:30px}
.btn.sun{background:var(--sun); color:var(--ink)}
.btn.sun::before{background:var(--white)}
.btn.sun .arr{background:rgba(15,43,87,.1)}
.actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

/* ---------- Sections ---------- */
.section{padding-block:clamp(72px, 9vw, 130px)}
.section.tight{padding-block:clamp(56px, 7vw, 96px)}
.section.sky{background:var(--sky-50)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,5vw,80px); align-items:end; margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2{font-size:var(--step-3); margin-top:14px}
.sec-head p{color:var(--ink-2); max-width:32em; font-size:var(--step-1); line-height:1.5}
@media (max-width:820px){.sec-head{grid-template-columns:minmax(0,1fr); gap:14px}}

/* ---------- Home hero ---------- */
.hero{background:radial-gradient(120% 90% at 85% 40%, var(--sky-100) 0%, var(--sky-50) 38%, var(--white) 70%)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,4vw,56px); align-items:center; padding-block:clamp(28px,4vw,56px) clamp(56px,7vw,96px)}
.hero h1{font-size:var(--step-4); line-height:1.02; margin-top:22px}
.hero .lede{margin-top:24px}
.hero .actions{margin-top:34px}
.hero .facts{margin-top:36px; display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--ink-2); background:var(--white); border:1px solid var(--line); border-radius:999px; padding:6px 14px}
.chip b{width:8px; height:8px; border-radius:50%; background:var(--sky-400)}
@media (max-width:980px){.hero .wrap{grid-template-columns:minmax(0,1fr)} .orbit{order:-1; max-width:520px; margin-inline:auto}}

/* Orbit */
.orbit{position:relative; width:100%; aspect-ratio:1/1; max-width:640px; justify-self:center; isolation:isolate}
@media (min-width:981px){.hero .wrap{align-items:start} .orbit{margin-top:-28px}}
.orbit .rings{position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; pointer-events:none}
.orbit .rings ellipse{fill:none; stroke:var(--sky-200); stroke-width:1.5}
.orbit .rings .dash{stroke-dasharray:3 8}
.orbit .sunspot{position:absolute; width:60%; aspect-ratio:1; left:50%; top:50%; transform:translate(-36%,-58%); border-radius:50%; background:var(--sun); z-index:2; opacity:.95}
.portrait{position:absolute; left:50%; top:50%; width:52%; aspect-ratio:4/5; transform:translate(-50%,-50%); z-index:5; border-radius:46% 46% 34px 34px / 38% 38% 34px 34px;
  overflow:hidden; background:var(--sky-100); box-shadow:0 0 0 8px var(--white), 0 34px 70px -34px rgba(15,43,87,.55)}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 18%}
.token{position:absolute; left:0; top:0; width:clamp(48px, 12.5%, 82px); aspect-ratio:1; border-radius:24px; background:var(--white); display:grid; place-items:center; will-change:transform;
  box-shadow:0 0 0 1px var(--line), 0 14px 28px -16px rgba(15,43,87,.55)}
.token img{width:64%; height:64%; object-fit:contain}
.token.wide img{width:82%}
.token .txt{font:700 11px/1.1 var(--body); color:var(--blue); text-align:center}

/* ---------- Service cards (bento) ---------- */
.bento{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:18px}
.card{position:relative; grid-column:span 2; display:flex; flex-direction:column; gap:12px; padding:28px 26px 24px; border-radius:var(--r-lg); background:var(--white);
  text-decoration:none; box-shadow:0 0 0 1px var(--line); transition:transform .45s var(--spring), box-shadow .35s, background .35s}
.card.w3{grid-column:span 3}
.card:hover{transform:translateY(-6px) rotate(-.4deg); box-shadow:0 0 0 2px var(--sun), 0 24px 40px -28px rgba(15,43,87,.5)}
.card .ico{width:54px; height:54px; border-radius:18px; display:grid; place-items:center; background:var(--sky-100); transition:background .35s, transform .45s var(--spring)}
.card:hover .ico{background:var(--sun); transform:rotate(-8deg) scale(1.06)}
.card .ico svg{width:28px; height:28px; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.card:hover .ico svg{stroke:var(--ink)}
.card h3{font-size:var(--step-1); margin-top:6px}
.card p{color:var(--ink-2); font-size:15.5px; line-height:1.55}
.card .more{margin-top:auto; padding-top:8px; font-weight:700; font-size:14.5px; color:var(--blue); display:inline-flex; gap:6px; align-items:center}
.card .more span{transition:transform .35s var(--ease)}
.card:hover .more span{transform:translateX(5px)}
.card.feature{background:var(--blue); box-shadow:none}
.card.feature h3, .card.feature p, .card.feature .more{color:#fff}
.card.feature p{color:rgba(255,255,255,.82)}
.card.feature .ico{background:rgba(255,255,255,.16)}
.card.feature .ico svg{stroke:#fff}
.card.feature:hover .ico svg{stroke:var(--ink)}
@media (max-width:980px){.bento{grid-template-columns:repeat(2, minmax(0,1fr))} .card, .card.w3{grid-column:span 1}}
@media (max-width:560px){.bento{grid-template-columns:minmax(0,1fr)}}

/* ---------- Industries ---------- */
.industries{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px}
.ind{padding:28px 24px; border-radius:var(--r-lg); background:var(--white); box-shadow:0 0 0 1px var(--line); display:grid; gap:12px; align-content:start; transition:transform .45s var(--spring)}
.ind:hover{transform:translateY(-4px)}
.ind svg{width:64px; height:64px}
.ind h3{font-size:var(--step-1)}
.ind p{font-size:15px; color:var(--ink-2)}
@media (max-width:980px){.industries{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:520px){.industries{grid-template-columns:minmax(0,1fr)}}

/* ---------- Steps ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(20px,3vw,36px); counter-reset:s; position:relative}
.steps::before{content:""; position:absolute; left:28px; right:12%; top:27px; border-top:2px dashed var(--sky-200); z-index:0}
.steps li{counter-increment:s; position:relative; z-index:1}
.steps li::before{content:counter(s); display:grid; place-items:center; width:56px; height:56px; border-radius:18px; background:var(--sun); color:var(--ink);
  font:600 24px var(--display); margin-bottom:22px; box-shadow:0 0 0 6px var(--sky-50)}
.steps h3{font-size:var(--step-1)}
.steps p{margin-top:8px; font-size:15.5px; color:var(--ink-2)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2, minmax(0,1fr))} .steps::before{display:none}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}

/* ---------- Credentials ---------- */
.creds{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.cred{display:flex; gap:20px; align-items:center; padding:22px 24px; border-radius:var(--r-lg); background:var(--white); box-shadow:0 0 0 1px var(--line)}
.cred .seal{flex:none; width:84px; height:84px; display:grid; place-items:center}
.cred .seal img{max-height:84px; width:auto}
.cred .ca{width:76px; height:76px; border-radius:24px; background:var(--blue); color:#fff; display:grid; place-items:center; font:600 30px var(--display)}
.cred b{display:block; font-family:var(--display); font-weight:600; font-size:19px}
.cred p{font-size:14.5px; color:var(--ink-2); line-height:1.45}
@media (max-width:900px){.creds{grid-template-columns:minmax(0,1fr)}}

/* ---------- CTA panel ---------- */
.cta-panel{position:relative; overflow:hidden; border-radius:36px; background:var(--blue); color:#fff; padding:clamp(36px,6vw,80px); display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:32px; align-items:end}
.cta-panel::after{content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:var(--sun); right:-110px; top:-130px; opacity:.95}
.cta-panel > *{position:relative; z-index:1}
.cta-panel h2{color:#fff; font-size:var(--step-3)}
.cta-panel p{color:rgba(255,255,255,.85); font-size:var(--step-1); line-height:1.5}
.cta-panel .side{display:grid; gap:22px; justify-items:start; padding-top:40px}
@media (max-width:820px){.cta-panel{grid-template-columns:minmax(0,1fr)} .cta-panel::after{width:200px; height:200px; right:-70px; top:-80px}}

/* ---------- Inner page hero ---------- */
.page-hero{background:linear-gradient(180deg, var(--sky-50), var(--white))}
.page-hero .wrap{padding-block:clamp(36px,5vw,72px) clamp(24px,3vw,40px); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(20px,5vw,72px); align-items:end}
.page-hero h1{font-size:var(--step-4); margin-top:18px}
.crumbs{font-weight:700; font-size:14px; color:var(--ink-3)}
.crumbs a{text-decoration:none; color:var(--blue)}
@media (max-width:820px){.page-hero .wrap{grid-template-columns:minmax(0,1fr)}}

.exhibit-wrap{padding-bottom:clamp(64px,8vw,120px)}
.caption{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; font-size:13.5px; color:var(--ink-3)}
.replay{background:var(--sky-100); border:0; color:var(--blue); border-radius:999px; padding:8px 16px; font:700 13.5px var(--body); cursor:pointer; transition:background .25s}
.replay:hover{background:var(--sun); color:var(--ink)}

/* Two-column detail lists */
.detail{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,72px)}
.detail .panel{background:var(--white); border-radius:var(--r-lg); box-shadow:0 0 0 1px var(--line); padding:clamp(24px,3vw,40px)}
.detail h2{font-size:var(--step-2); margin-bottom:18px}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.ticks li{padding-left:38px; position:relative; line-height:1.5}
.ticks li::before{content:""; position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:8px; background:var(--butter)}
.ticks li::after{content:""; position:absolute; left:8px; top:6px; width:7px; height:11px; border-right:2.5px solid var(--sun-2); border-bottom:2.5px solid var(--sun-2); transform:rotate(45deg)}
@media (max-width:820px){.detail{grid-template-columns:minmax(0,1fr)}}

/* =========== Bookkeeping: reconcile screen =========== */
.app{border-radius:22px; overflow:hidden; background:var(--white); box-shadow:0 0 0 1px var(--line), 0 50px 90px -60px rgba(15,43,87,.6)}
.app-bar{display:flex; align-items:center; gap:14px; padding:12px 18px; background:#0B4F9C; color:#fff}
.app-bar .dots{display:flex; gap:6px}
.app-bar .dots i{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.35)}
.app-bar .title{font-weight:700; font-size:15px}
.app-bar .crumb{font-size:13px; opacity:.75}
.app-tabs{display:flex; gap:4px; padding:0 18px; background:#0B4F9C}
.app-tabs span{font-size:13px; font-weight:700; color:rgba(255,255,255,.75); padding:10px 14px; border-radius:10px 10px 0 0}
.app-tabs span.on{background:var(--white); color:#0B4F9C}
.app-tabs .count{display:inline-grid; place-items:center; min-width:22px; height:20px; padding:0 6px; margin-left:6px; border-radius:999px; background:var(--sun); color:var(--ink); font-size:12px; transition:transform .35s var(--spring)}
.app-tabs .count.bump{transform:scale(1.35)}
.balances{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--line); border-bottom:1px solid var(--line)}
.balances div{background:var(--sky-50); padding:14px 18px}
.balances small{display:block; font-size:12.5px; color:var(--ink-3); font-weight:600}
.balances b{font:500 20px var(--mono); font-variant-numeric:tabular-nums; color:var(--ink)}
.balances .diff b{color:var(--coral); transition:color .4s}
.balances .diff.zero b{color:var(--ok)}
.rec-head{display:grid; grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr); gap:14px; padding:12px 18px 0; font-size:12.5px; font-weight:700; color:var(--ink-3)}
.rec-list{padding:10px 18px 18px; display:grid; gap:10px; min-height:340px; align-content:start; position:relative}
.rec{display:grid; grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr); gap:14px; align-items:stretch; overflow:hidden; transition:max-height .5s var(--ease), opacity .4s, transform .5s var(--ease), margin .5s; max-height:120px}
.rec.gone{max-height:0; opacity:0; transform:translateX(30px); margin-top:-10px}
.stmt, .match{border-radius:14px; padding:12px 14px; font-size:14px; line-height:1.35; min-width:0}
.stmt{background:var(--white); box-shadow:0 0 0 1px var(--line)}
.stmt .top, .match .top{display:flex; justify-content:space-between; gap:10px}
.stmt .d{color:var(--ink-3); font-size:12.5px; font-weight:600}
.stmt .amt, .match .amt{font:500 14px var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.amt.in{color:var(--ok)}
.amt.out{color:var(--ink)}
.stmt .desc, .match .desc{font-weight:700; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.match{background:var(--white); border:2px dashed var(--sky-200); display:flex; flex-direction:column; justify-content:center; transition:background .35s, border-color .35s}
.match .ph{color:var(--ink-3); font-weight:600; font-size:13.5px}
.match .found{display:none}
.match.filled{background:var(--ok-bg); border:2px solid transparent}
.match.filled .ph{display:none}
.match.filled .found{display:block; animation:pop .45s var(--spring)}
.match .acct{font-size:12.5px; color:var(--ok); font-weight:700; margin-top:2px}
.okbtn{align-self:center; justify-self:center; width:76px; height:40px; border-radius:12px; border:0; background:var(--sky-100); color:var(--ink-3); font:700 15px var(--body); transition:background .3s, color .3s, transform .2s}
.okbtn.ready{background:var(--ok); color:#fff; animation:pulse 1s ease-in-out infinite}
.okbtn.press{transform:scale(.88); animation:none}
.done-msg{position:absolute; inset:10px 18px 18px; display:grid; place-items:center; text-align:center; border-radius:16px; background:var(--butter); opacity:0; transform:scale(.96); transition:opacity .45s, transform .5s var(--spring); pointer-events:none}
.done-msg.show{opacity:1; transform:none}
.done-msg .big{font:600 26px var(--display)}
.done-msg .badge{width:64px; height:64px; border-radius:50%; background:var(--sun); display:grid; place-items:center; margin:0 auto 12px; font-size:30px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(33,163,90,.45)}50%{box-shadow:0 0 0 8px rgba(33,163,90,0)}}
@keyframes pop{from{opacity:0; transform:translateY(6px) scale(.97)}to{opacity:1; transform:none}}
@media (max-width:640px){
  .rec, .rec-head{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr); gap:8px}
  .okbtn{width:56px} .stmt, .match{padding:10px; font-size:13px} .stmt .amt, .match .amt{font-size:12.5px}
  .stmt .top, .match .top{flex-direction:column; gap:0}
  .balances{grid-template-columns:minmax(0,1fr)}
  .app-bar .crumb{display:none}
}

/* =========== Cleanup: invoices falling into the ledger =========== */
.drop{position:relative; border-radius:var(--r-lg); background:var(--sky-50); box-shadow:0 0 0 1px var(--line); overflow:hidden}
.drop-sky{position:relative; height:250px; background:linear-gradient(180deg, var(--sky-100), var(--sky-50))}
.drop-sky .hint{position:absolute; left:20px; top:16px; font-weight:700; font-size:13.5px; color:var(--blue)}
.inv{position:absolute; top:0; left:0; width:138px; aspect-ratio:1/1.414; background:#fff; border-radius:6px; padding:9px 9px 8px; display:flex; flex-direction:column; gap:5px;
  box-shadow:0 12px 26px -12px rgba(15,43,87,.55); will-change:transform, opacity; font-family:var(--body)}
.inv .hd{height:18px; border-radius:4px; display:flex; align-items:center; padding:0 5px; font:700 8.5px var(--body); color:#fff; white-space:nowrap; overflow:hidden}
.inv .who{font:700 9px var(--body); color:var(--ink)}
.inv .ln{height:4px; border-radius:3px; background:var(--sky-100)}
.inv .ln.s{width:60%}
.inv .tot{margin-top:auto; display:flex; justify-content:space-between; font:500 9px var(--mono); color:var(--ink); border-top:1.5px solid var(--ink); padding-top:4px}
.ledger{background:var(--white); border-top:3px solid var(--sun); padding:8px clamp(12px,2.5vw,24px) 18px}
.lg-row{display:grid; grid-template-columns:80px minmax(0,1.3fr) minmax(0,1fr) 110px; gap:12px; align-items:center; padding:10px 8px; border-bottom:1px solid var(--line); font-size:14.5px; border-radius:10px}
.lg-row.head{font-weight:700; font-size:12.5px; color:var(--ink-3); border-bottom:2px solid var(--line)}
.lg-row .d{font:400 13px var(--mono); color:var(--ink-2)}
.lg-row .a{text-align:right; font:500 14px var(--mono); font-variant-numeric:tabular-nums}
.lg-row .c span{display:inline-block; font-size:12.5px; font-weight:700; border-radius:999px; padding:2px 10px; background:var(--sky-100); color:var(--blue)}
.lg-row.item{visibility:hidden}
.lg-row.item.on{visibility:visible; animation:landed 1.1s var(--ease)}
.lg-row.total{border-bottom:0; font-weight:700; padding-top:14px}
.lg-row.total .a{font-size:16px; background:var(--butter); border-radius:8px; padding:4px 8px}
@keyframes landed{0%{background:var(--sun); transform:scale(1.02)}100%{background:transparent; transform:none}}
@media (max-width:600px){.lg-row{grid-template-columns:64px minmax(0,1fr) 90px} .lg-row .c{display:none} .inv{width:90px} .drop-sky{height:200px}}

/* =========== Reporting: P&L that builds as you scroll =========== */
.pnl-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,6vw,96px); align-items:start}
.pnl-step{min-height:62vh; display:flex; flex-direction:column; justify-content:center; padding-block:40px; opacity:.35; transition:opacity .5s}
.pnl-step.on{opacity:1}
.pnl-step h3{font-size:var(--step-2); margin-top:12px}
.pnl-step p{margin-top:12px; color:var(--ink-2); max-width:30em}
.pnl-sticky{position:sticky; top:110px}
.card-x{background:var(--white); border-radius:var(--r-lg); box-shadow:0 0 0 1px var(--line), 0 50px 90px -60px rgba(15,43,87,.6); padding:clamp(18px,3vw,32px)}
.card-x .hd{display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.card-x .hd h2{font-size:var(--step-1)}
.card-x .hd small{font-size:12.5px; color:var(--ink-3); font-weight:600}
.pnl table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.pnl td{padding:11px 6px; border-top:1px solid var(--line); vertical-align:middle}
.pnl td.lbl{font-size:15.5px; width:40%; font-weight:600}
.pnl td.lbl.sub{padding-left:22px; color:var(--ink-2); font-weight:400}
.pnl td.bar{width:34%}
.pnl td.n{text-align:right; font-family:var(--mono); font-size:14.5px; white-space:nowrap}
.pnl tr.tot td{border-top:2px solid var(--ink)}
.pnl tr.net td{background:var(--butter)}
.pnl tr.net td:first-child{border-radius:10px 0 0 10px}
.pnl tr.net td:last-child{border-radius:0 10px 10px 0}
.pnl .track{height:12px; background:var(--sky-50); border-radius:6px; overflow:hidden}
.pnl .fill{height:100%; width:0; background:var(--blue); border-radius:6px; transition:width 1.1s var(--ease)}
.pnl .fill.neg{background:var(--sky-400)}
.pnl .fill.strong{background:var(--sun-2)}
.pnl tr{transition:opacity .5s}
.pnl tr.dim{opacity:.3}
.step-no{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:13px; background:var(--sky-100); color:var(--blue); font:600 18px var(--display); transition:background .4s, color .4s}
.pnl-step.on .step-no{background:var(--sun); color:var(--ink)}
@media (max-width:900px){.pnl-grid{grid-template-columns:minmax(0,1fr)} .pnl-sticky{top:72px; z-index:5} .pnl-step{min-height:auto; padding-block:24px; opacity:1}}

/* =========== Modelling: scenario forecast =========== */
.fc-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:10px}
.seg{display:inline-flex; background:var(--sky-50); border-radius:999px; padding:5px; box-shadow:inset 0 0 0 1px var(--line); position:relative}
.seg button{position:relative; z-index:1; border:0; background:none; font:700 14.5px var(--body); color:var(--ink-2); padding:9px 18px; border-radius:999px; cursor:pointer; transition:color .3s}
.seg button[aria-pressed="true"]{color:var(--ink)}
.seg .thumb{position:absolute; top:5px; bottom:5px; left:5px; border-radius:999px; background:var(--sun); transition:transform .45s var(--spring), width .45s var(--spring); z-index:0}
.fc-body{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:24px; align-items:start}
.fc-chart svg{width:100%; height:auto; overflow:visible; display:block}
.fc-chart .grid line{stroke:var(--line)}
.fc-chart .ax text{font:400 11px var(--mono); fill:var(--ink-3)}
.fc-chart .bar{fill:var(--sky-200)}
.fc-chart .cash{fill:none; stroke:var(--blue); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round}
.fc-chart .area{fill:url(#cashfill)}
.fc-chart .endpt{fill:var(--sun); stroke:var(--blue); stroke-width:3}
.fc-chart .zero{stroke:var(--coral); stroke-dasharray:4 5}
.legend{display:flex; gap:18px; flex-wrap:wrap; font-size:13px; font-weight:600; color:var(--ink-2); margin-top:8px}
.legend span{display:inline-flex; align-items:center; gap:8px}
.legend i{width:14px; height:14px; border-radius:4px; display:inline-block}
.kpis{display:grid; gap:12px}
.kpi{border-radius:16px; padding:14px 16px; background:var(--sky-50)}
.kpi small{display:block; font-size:12.5px; font-weight:700; color:var(--ink-3)}
.kpi b{font:500 22px var(--mono); font-variant-numeric:tabular-nums}
.kpi.hl{background:var(--butter)}
.assume{margin-top:18px; border-top:1px solid var(--line); padding-top:14px}
.assume h3{font-size:16px; margin-bottom:8px}
.assume table{width:100%; border-collapse:collapse; font-size:14px}
.assume th{text-align:left; font-weight:700; color:var(--ink-3); font-size:12.5px; padding:6px 8px}
.assume th.n, .assume td.n{text-align:right}
.assume td{padding:7px 8px; border-top:1px solid var(--line)}
.assume td.n{font-family:var(--mono)}
.assume td.on{background:var(--butter); font-weight:700}
@media (max-width:900px){.fc-body{grid-template-columns:minmax(0,1fr)} .kpis{grid-template-columns:repeat(3, minmax(0,1fr))}}
@media (max-width:520px){.kpis{grid-template-columns:minmax(0,1fr)} .assume{overflow-x:auto}}
@media (max-width:600px){.fc-chart .ax text{font-size:21px} .app-tabs span:last-child{display:none}}

/* ---------- Services page ---------- */
.svc-sec{padding-bottom:clamp(56px,7vw,96px)}
.svc-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px}
.svc{display:flex; flex-direction:column; gap:14px; padding:clamp(24px,2.6vw,34px); border-radius:var(--r-lg); background:var(--white);
  box-shadow:0 0 0 1px var(--line); transition:transform .45s var(--spring), box-shadow .35s}
.svc:hover{transform:translateY(-4px); box-shadow:0 0 0 2px var(--sun), 0 24px 40px -28px rgba(15,43,87,.45)}
.svc-top{display:flex; align-items:center; gap:16px}
.svc .ico{flex:none; width:56px; height:56px; border-radius:18px; background:var(--sky-100); display:grid; place-items:center; transition:background .35s, transform .45s var(--spring)}
.svc:hover .ico{background:var(--sun); transform:rotate(-8deg)}
.svc .ico svg{width:28px; height:28px; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.svc:hover .ico svg{stroke:var(--ink)}
.svc h3{font-size:var(--step-2)}
.svc p{color:var(--ink-2); max-width:44em}
.svc ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.svc ul li{font-size:13px; font-weight:700; border-radius:999px; padding:5px 12px; background:var(--sky-50); color:var(--blue); box-shadow:inset 0 0 0 1px var(--sky-100)}
.svc-act{margin-top:auto; padding-top:6px}
.svc:first-child{grid-column:1/-1; background:linear-gradient(135deg, var(--sky-50), var(--white) 60%)}
@media (max-width:820px){.svc-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- About ---------- */
.about{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,6vw,96px); align-items:start}
.about .photo{position:sticky; top:100px}
.about .photo .frame{border-radius:46% 46% 34px 34px / 38% 38% 34px 34px; overflow:hidden; aspect-ratio:4/5; background:var(--sky-100); box-shadow:0 0 0 8px var(--white), 18px 18px 0 8px var(--sun)}
.about .photo img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.about .bio p + p{margin-top:18px}
.about .bio .first{font-family:var(--display); font-weight:500; font-size:var(--step-2); line-height:1.3; color:var(--ink)}
.facts-list{display:grid; grid-template-columns:minmax(0,170px) minmax(0,1fr); margin-top:36px; border-radius:var(--r-md); overflow:hidden; box-shadow:0 0 0 1px var(--line)}
.facts-list dt, .facts-list dd{margin:0; padding:14px 18px; border-bottom:1px solid var(--line)}
.facts-list dt{font-weight:700; font-size:14px; color:var(--blue); background:var(--sky-50)}
.facts-list dt:last-of-type, .facts-list dd:last-of-type{border-bottom:0}
@media (max-width:860px){.about{grid-template-columns:minmax(0,1fr)} .about .photo{position:relative; top:0; max-width:400px; margin-right:26px}}
@media (max-width:480px){.facts-list{grid-template-columns:minmax(0,1fr)} .facts-list dt{border-bottom:0; padding-bottom:4px}}

.contact-card{align-self:start; border-radius:var(--r-lg); background:var(--white); box-shadow:0 0 0 1px var(--line); overflow:hidden}
.cline{display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr) auto; gap:16px; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line)}
.cline:last-child{border-bottom:0}
.cline .k{font-weight:700; font-size:14px; color:var(--blue)}
.cline .v{font-family:var(--display); font-weight:500; font-size:var(--step-1); overflow-wrap:anywhere; text-decoration:none}
.cline a.v:hover{color:var(--blue)}
.copy{background:var(--sky-100); border:0; color:var(--blue); border-radius:999px; padding:8px 16px; font:700 13.5px var(--body); cursor:pointer}
.copy:hover{background:var(--sun); color:var(--ink)}
@media (max-width:600px){.cline{grid-template-columns:minmax(0,1fr); gap:6px}}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink); color:rgba(255,255,255,.78); padding-block:56px 60px; font-size:14.5px}
.site-foot .wrap{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2, minmax(0,1fr)); gap:32px}
.site-foot .brand .name{color:#fff; font-size:26px}
.site-foot h4{font:700 13px var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--sun); margin-bottom:12px}
.site-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--sun)}
.site-foot .small{margin-top:16px; font-size:13px; color:rgba(255,255,255,.55); max-width:36em}
@media (max-width:760px){.site-foot .wrap{grid-template-columns:minmax(0,1fr)}}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
  *{animation:none !important; transition-duration:.01ms !important}
}
[id]{scroll-margin-top:96px}

/* =========== Automation: workflow in action =========== */
.auto .seg button{font-size:14px; padding:9px 16px}
.canvas{position:relative; margin-top:18px; padding:26px 18px; border-radius:20px; background-color:var(--sky-50);
  background-image:radial-gradient(var(--sky-200) 1.2px, transparent 1.2px); background-size:22px 22px}
.canvas .wires{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.canvas .wires path{fill:none; stroke:var(--sky-200); stroke-width:2.5; stroke-dasharray:6 6}
.canvas .wires path.lit{stroke:var(--blue); stroke-dasharray:none}
.nodes{position:relative; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:clamp(18px,3vw,40px); z-index:1}
.node{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:16px 10px 14px; border-radius:18px; background:var(--white);
  box-shadow:0 0 0 1.5px var(--line), 0 12px 24px -18px rgba(15,43,87,.5); transition:box-shadow .35s, transform .45s var(--spring)}
.node .n-ico{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 14%, white); transition:background .35s}
.node .n-ico svg{width:28px; height:28px; fill:none; stroke:var(--c); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .35s}
.node .n-txt b{display:block; font-family:var(--display); font-weight:600; font-size:16px; line-height:1.2}
.node .n-txt small{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px}
.node .n-st{position:absolute; top:-9px; right:-9px; width:24px; height:24px; border-radius:50%; background:var(--white); box-shadow:0 0 0 1.5px var(--line); opacity:0; transform:scale(.5); transition:opacity .3s, transform .4s var(--spring)}
.node.run{box-shadow:0 0 0 2.5px var(--c, var(--blue)), 0 18px 34px -18px rgba(34,102,212,.7); transform:translateY(-4px)}
.node.run .n-ico{background:var(--c)}
.node.run .n-ico svg{stroke:#fff}
.node.run .n-st{opacity:1; transform:none; border:3px solid var(--sky-200); border-top-color:var(--blue); box-shadow:none; animation:spin .8s linear infinite}
.node.done .n-st{opacity:1; transform:none; background:var(--ok); box-shadow:none}
.node.done .n-st::after{content:""; position:absolute; left:8px; top:5px; width:6px; height:10px; border-right:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(45deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse{position:absolute; left:0; top:0; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--sun); box-shadow:0 0 0 5px rgba(255,201,60,.35); z-index:2; opacity:0; pointer-events:none}
.inspector{margin-top:18px; border-radius:18px; box-shadow:0 0 0 1px var(--line); overflow:hidden}
.ins-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 18px; background:var(--sky-50); border-bottom:1px solid var(--line)}
.ins-step{font:700 12px var(--body); color:var(--blue); background:var(--sky-100); border-radius:999px; padding:3px 10px}
.ins-title{font-family:var(--display); font-weight:600; font-size:17px}
.ins-run{margin-left:auto; font:700 12px var(--body); border-radius:999px; padding:3px 10px; background:var(--butter); color:#8a6100}
.ins-run.ok{background:var(--ok-bg); color:var(--ok)}
.ins-body{padding:16px 18px 18px; min-height:190px}
.ins-body > *{animation:pop .45s var(--spring) both}
.ins-body > *:nth-child(2){animation-delay:.08s} .ins-body > *:nth-child(3){animation-delay:.16s} .ins-body > *:nth-child(4){animation-delay:.24s}
.ins-body > *:nth-child(5){animation-delay:.32s} .ins-body > *:nth-child(6){animation-delay:.4s}
.o-h{font-weight:700; margin-bottom:8px}
.fld{display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-top:1px dashed var(--line); font-size:14.5px}
.fld span{color:var(--ink-2)}
.fld b{font-family:var(--mono); font-weight:500; text-align:right}
.o-ok{margin-top:10px; color:var(--ok); font-weight:700}
.msg{max-width:420px; background:var(--white); border-radius:16px 16px 16px 4px; padding:14px 16px; box-shadow:0 0 0 1px var(--line), 0 12px 24px -18px rgba(15,43,87,.5); font-size:14.5px}
.msg.mail{border-radius:14px; max-width:560px}
.msg.mail p + p{margin-top:8px; color:var(--ink-2)}
.msg-btns{display:flex; gap:8px; margin-top:12px}
.mb{font:700 13.5px var(--body); padding:7px 16px; border-radius:10px; background:var(--sky-100); color:var(--blue)}
.mb.ok{background:var(--ok); color:#fff; animation:pulse 1s ease-in-out 2}
@media (max-width:820px){
  .nodes{grid-template-columns:minmax(0,1fr); gap:22px}
  .node{flex-direction:row; text-align:left; padding:12px 14px}
  .canvas{padding:18px 14px}
}

/* Logo wall in the Monthly bookkeeping card */
.svc.has-logos{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center}
.svc-main{display:flex; flex-direction:column; gap:14px}
.logo-wall{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; max-width:360px; justify-self:center; width:100%}
.lt{aspect-ratio:1.35; border-radius:22px; background:var(--white); display:grid; place-items:center; box-shadow:0 0 0 1px var(--line), 0 16px 30px -22px rgba(15,43,87,.55);
  animation:float 5s ease-in-out var(--d) infinite; transition:transform .4s var(--spring)}
.lt img{max-width:44%; max-height:58%; object-fit:contain}
.lt img.wide{max-width:72%}
.lt-txt{font:600 22px/1 var(--display); color:#1F4E9A; text-align:center}
.lt-txt b{display:block; font-weight:500; font-size:15px; color:var(--ink-2); margin-top:4px}
.lt:hover{transform:scale(1.06) rotate(-3deg)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-width:820px){.svc.has-logos{grid-template-columns:minmax(0,1fr)} .logo-wall{grid-template-columns:repeat(4, minmax(0,1fr)); max-width:none; gap:10px} .lt{border-radius:16px} .lt-txt{font-size:15px} .lt-txt b{font-size:11px}}

/* =========== Testimonials =========== */
.testi{overflow:hidden}
.t-feature{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px}
.tcard{position:relative; margin:0; display:flex; flex-direction:column; gap:18px; padding:30px 28px 24px; border-radius:var(--r-lg); background:var(--white);
  box-shadow:0 0 0 1px var(--line), 0 24px 44px -34px rgba(15,43,87,.5)}
.tcard .qm{width:40px; height:30px; fill:var(--sun)}
.tcard blockquote{margin:0; font-size:16.5px; line-height:1.65; color:var(--ink)}
.tcard.big blockquote{font-size:clamp(16.5px, 1rem + .25vw, 19px)}
.tcard figcaption{margin-top:auto; display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding-top:16px; border-top:1px dashed var(--line)}
.who{display:flex; align-items:center; gap:12px; min-width:0}
.who b{display:block; font-family:var(--display); font-weight:600; font-size:17px; line-height:1.2}
.who small{display:block; font-size:13px; color:var(--ink-2)}
.av{flex:none; width:46px; height:46px; border-radius:15px; display:grid; place-items:center; background:var(--blue); color:#fff; font:600 17px var(--display)}
.av.anon{background:var(--sky-100)}
.av.anon svg{width:24px; height:24px; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round}
.src{font-size:12.5px; font-weight:700; color:var(--blue); background:var(--sky-50); border-radius:999px; padding:4px 11px}
.t-feature .tcard:first-child{background:linear-gradient(160deg, var(--sky-50), var(--white) 55%)}
.marquee{margin-top:22px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}
.marquee .track{display:flex; gap:20px; width:max-content; padding-block:10px 24px; animation:marq 70s linear infinite}
.marquee .dup{display:contents}
.marquee:hover .track{animation-play-state:paused}
.tcard.mini{width:min(380px, 82vw); flex:none; padding:24px 22px 20px; gap:14px}
.tcard.mini .qm{width:30px; height:22px}
.tcard.mini blockquote{font-size:15px; color:var(--ink-2)}
@keyframes marq{to{transform:translateX(calc(-50% - 10px))}}
.t-single{max-width:860px; margin-inline:auto}
@media (max-width:820px){.t-feature{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.marquee{overflow-x:auto; -webkit-mask-image:none; mask-image:none} .marquee .track{animation:none} .marquee .dup{display:none}}

/* Equal testimonial grid */
.t-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; align-items:stretch}
.t-grid .tcard blockquote{font-size:15.5px; color:var(--ink-2)}
.av svg{width:24px; height:24px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round}
.t-single .tcard blockquote{font-size:clamp(16.5px, 1rem + .25vw, 19px); color:var(--ink)}
@media (max-width:1000px){.t-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:640px){
  .t-grid{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding-bottom:14px; margin-inline:calc(-1 * max(var(--gutter), env(safe-area-inset-left,0px))); padding-inline:max(var(--gutter), env(safe-area-inset-left,0px))}
  .t-grid .tcard{flex:0 0 86%; scroll-snap-align:center}
}
/* Masonry-style columns so short and long quotes sit together evenly */
@media (min-width:641px){
  .t-grid{display:block; column-count:3; column-gap:20px}
  .t-grid .tcard{break-inside:avoid; margin-bottom:20px; display:flex}
}
@media (min-width:641px) and (max-width:1000px){.t-grid{column-count:2}}
.tcard blockquote:only-of-type{}
.tcard.short blockquote, .t-grid .tcard.short blockquote{font-family:var(--display); font-weight:500; font-size:clamp(24px,1.2rem + .8vw,30px); line-height:1.2; color:var(--ink)}