/* Base reset. The demo was built under a preview wrapper that supplied these; a real page must own them. */
html{color-scheme:light dark}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  --brand:#8BBE21;
  --brand-600:#6CA016;
  --brand-050:#F4F9E8;
  --ink:#1A2404;
  --body:#4A503D;
  --muted:#7A8168;
  --page:#F8FAF5;
  --card:#FFFFFF;
  --line:#E4EBD6;
  --deep:#161E06;
  --glow:rgba(139,190,33,.22);
  --shadow:0 1px 2px rgba(26,36,4,.04), 0 8px 24px rgba(26,36,4,.06);
  --shadow-lg:0 2px 4px rgba(26,36,4,.04), 0 18px 48px rgba(26,36,4,.10);
  --radius:16px;
  --radius-lg:24px;
  --maxw:1280px;
  --kiwi-eye:#FFFFFF;
  --sky:#2FA8D5;
  --sky-600:#1E86B0;
  --sky-050:#E8F5FB;

  /* the roster board mirrors the app, which is light-only by design */
  --app-white:#FFFFFF;
  --app-50:#F9FAFB;
  --app-200:#E5E7EB;
  --app-400:#9CA3AF;
  --app-600:#4B5563;
  --app-900:#111827;
  --app-orange:#F97316;
  --app-orange-b:#FDBA74;
  --app-amber:#F59E0B;

  --wm-light:block;
  --wm-dark:none;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#A3D42F;--brand-600:#B7E24A;--brand-050:#1E2A0B;
    --ink:#F1F5E6;--body:#C3CBB2;--muted:#8E977C;
    --page:#0E1305;--card:#171F09;--line:#293506;--deep:#080B03;
    --glow:rgba(163,212,47,.18);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.45);
    --wm-light:none;--wm-dark:block;
    --sky:#5EC3E8;--sky-600:#8AD3EE;--sky-050:#0E2430;
  }
}
:root[data-theme="dark"]{
  --brand:#A3D42F;--brand-600:#B7E24A;--brand-050:#1E2A0B;
  --ink:#F1F5E6;--body:#C3CBB2;--muted:#8E977C;
  --page:#0E1305;--card:#171F09;--line:#293506;--deep:#080B03;
  --glow:rgba(163,212,47,.18);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.45);
  --wm-light:none;--wm-dark:block;
  --sky:#5EC3E8;--sky-600:#8AD3EE;--sky-050:#0E2430;
}

*{box-sizing:border-box}
body{
  background:var(--page);color:var(--body);
  font-family:'Open Sans','Segoe UI',system-ui,sans-serif;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Poppins','Segoe UI',system-ui,sans-serif;color:var(--ink);text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
.eyebrow{font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-600)}
.lede{font-size:18px;color:var(--body);max-width:62ch}

/* ---------- brand lockup ---------- */
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo img{height:30px;width:auto}
.logo .wm-l{display:var(--wm-light)}
.logo .wm-d{display:var(--wm-dark)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--page) 88%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:28px}
.nav-links{display:none;gap:26px;margin-left:6px}
.nav-links a{font-size:14.5px;font-weight:600;color:var(--body);text-decoration:none;transition:color .18s}
.nav-links a:hover{color:var(--brand-600)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:999px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.btn-primary{background:var(--brand);color:#14200A;box-shadow:0 6px 18px var(--glow)}
.btn-primary:hover{background:var(--brand-600);color:#14200A}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-600)}
.btn-lg{padding:14px 26px;font-size:15.5px}
.nav-right .btn-ghost{display:none}
@media(min-width:940px){.nav-links{display:flex}.nav-right .btn-ghost{display:inline-flex}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:60px 74px}
.hero::before{content:"";position:absolute;inset:-20% 30% 40% -10%;background:radial-gradient(50% 50% at 50% 50%, var(--glow), transparent 70%);pointer-events:none}
.hero-fern{position:absolute;right:-170px;top:-120px;width:560px;height:560px;opacity:.10;color:var(--brand);pointer-events:none}
.hero-grid{position:relative;display:grid;gap:46px;align-items:center}
@media(min-width:1180px){.hero-grid{grid-template-columns:.95fr 1.05fr;gap:52px}}
.hero h1{font-size:clamp(36px,5vw,55px);font-weight:700;line-height:1.07;letter-spacing:-.03em}
.hero h1 .swap{color:var(--brand-600);display:inline-block}
.hero-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted)}

/* ---------- roster board (mirrors the app) ---------- */
.mock{position:relative;padding-bottom:62px}
.board{background:var(--app-white);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;color:var(--app-600)}
.board-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--app-200)}
.board-bar .t{font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;color:var(--app-900)}
.board-bar .s{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--app-400)}
.board-bar .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.status{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--app-orange);display:flex;align-items:center;gap:6px}
.status.done{color:#4D7C0F}
.status i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block;flex:none}

.rg-scroll{overflow-x:auto}
.rg{min-width:560px}
.rg-head{display:flex;background:var(--app-50);border-bottom:1px solid var(--app-200)}
.rg-head .corner{width:84px;flex:none;padding:7px 10px;border-right:1px solid var(--app-200)}
.rg-head .corner span{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--app-400)}
.rg-hours{flex:1;display:grid;grid-template-columns:repeat(14,1fr)}
.rg-hours span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;color:var(--app-400);text-align:center;padding:8px 0;border-left:1px solid var(--app-200)}
.rg-row{display:flex;border-bottom:1px solid var(--app-200)}
.rg-row.alt{background:rgba(249,250,251,.7)}
.rg-row:hover .rg-track{background:rgba(239,246,255,.5)}
.rg-day{width:84px;flex:none;padding:7px 10px;border-right:1px solid var(--app-200);display:flex;flex-direction:column;gap:1px}
.rg-day b{font-family:'Poppins',sans-serif;font-weight:600;font-size:12px;color:var(--app-900)}
.rg-day span{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--app-400)}
.rg-day .hol{color:var(--app-amber);font-weight:600}
.rg-lanes{flex:1;min-width:0}
.rg-track{position:relative;height:34px;background-image:repeating-linear-gradient(to right,var(--app-200) 0 1px,transparent 1px calc(100%/14));background-size:calc(100%/14) 100%}
.rg-track + .rg-track{border-top:1px solid rgba(229,231,235,.6)}
.pill{position:absolute;top:4px;bottom:4px;border-radius:5px;background:var(--app-white);border:1px solid var(--app-200);box-shadow:inset 4px 0 0 0 var(--acc,transparent),0 1px 3px rgba(0,0,0,.06);padding:0 7px 0 10px;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;transition:box-shadow .15s ease,transform .15s ease}
.pill:hover{transform:translateY(-1px);box-shadow:inset 4px 0 0 0 var(--acc,transparent),0 4px 8px rgba(0,0,0,.1)}
.pill .role{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--app-400);flex:none}
.pill .who{font-size:11.5px;font-weight:600;color:var(--app-900);flex:none}
.pill .tm{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--app-400);flex:none;margin-left:auto}
.pill.vacant{border:1px dashed var(--app-orange-b);background:#FFF7ED}
.pill.vacant .who{color:var(--app-orange)}
.pill.filled{background:#F7FEE7;border-color:#BEF264}

.mock-float{position:absolute;padding:12px 14px;display:flex;align-items:center;gap:10px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:2}
.mock-float .ic{width:32px;height:32px;border-radius:10px;background:var(--brand-050);display:grid;place-items:center;flex:none;color:var(--brand-600)}
.mock-float b{display:block;font-family:'Poppins',sans-serif;font-size:12.5px;color:var(--ink)}
.mock-float span{font-size:11px;color:var(--muted)}
.float-a{right:-14px;top:-22px}
.float-b{left:-26px;bottom:0}
@media(max-width:700px){.float-a,.float-b{position:static;margin-top:12px}}

/* ---------- sections ---------- */
section{padding-block:74px}
.sec-head{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;margin-bottom:44px}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.025em;line-height:1.14}
.sec-head p{max-width:60ch;color:var(--body)}
.grid-3{display:grid;gap:20px}
@media(min-width:860px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;gap:20px}
@media(min-width:760px){.grid-2{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;transition:box-shadow .22s,border-color .22s}
.card:hover{box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--brand) 40%, var(--line))}
.card h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
.card p{font-size:15px}
.icon-box{width:46px;height:46px;border-radius:13px;background:var(--brand-050);color:var(--brand-600);display:grid;place-items:center;flex:none}
.card-link{margin-top:auto;padding-top:6px;font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;color:var(--brand-600);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:gap .18s}
.card-link:hover{gap:10px}

.band{background:var(--card);border-block:1px solid var(--line)}
.steps{display:grid;gap:22px}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{display:flex;flex-direction:column;gap:12px;padding-top:26px;border-top:2px solid var(--line);position:relative}
.step-n{position:absolute;top:-17px;left:0;width:34px;height:34px;border-radius:11px;background:var(--brand);color:#14200A;display:grid;place-items:center;font-family:'Poppins',sans-serif;font-weight:700;font-size:14px}
.step h3{font-size:18px;font-weight:600}
.step p{font-size:15px}

.toggle{display:inline-flex;padding:4px;border-radius:999px;background:var(--brand-050);border:1px solid var(--line);gap:2px}
.toggle button{font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px;padding:8px 18px;border-radius:999px;border:0;background:transparent;color:var(--body);cursor:pointer;transition:background .2s,color .2s}
.toggle button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.plans{display:grid;gap:20px;align-items:start}
@media(min-width:860px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{background:var(--page);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:16px}
.plan.feature{border-color:var(--brand);box-shadow:0 10px 40px var(--glow);position:relative}
.plan-tag{position:absolute;top:-12px;left:28px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--brand);color:#14200A;padding:5px 12px;border-radius:999px}
.plan h3{font-size:21px;font-weight:600}
.plan .price{font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;color:var(--brand-600)}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start}
.plan li svg{flex:none;margin-top:3px;color:var(--brand-600)}

.int-grid{display:grid;gap:14px}
@media(min-width:600px){.int-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.int-grid{grid-template-columns:repeat(6,1fr)}}
.int{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 14px;text-align:center;font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;color:var(--ink);box-shadow:var(--shadow);transition:border-color .2s,color .2s}
.int:hover{border-color:var(--brand);color:var(--brand-600)}

.quote{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.quote p{font-size:15px}
.quote footer{display:flex;align-items:center;gap:12px;margin-top:auto}
.avatar{width:40px;height:40px;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--brand-600));color:#14200A;display:grid;place-items:center;font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;flex:none}
.quote footer b{display:block;font-family:'Poppins',sans-serif;font-size:14px;color:var(--ink)}
.quote footer span{font-size:12.5px;color:var(--muted)}
.stars{display:flex;gap:3px;color:var(--brand)}
.logos{display:flex;flex-wrap:wrap;gap:12px 34px;justify-content:center;align-items:center}
.logos span{font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;color:var(--muted)}

/* ---------- support local ---------- */
.local{position:relative;overflow:hidden}
.local-fern{position:absolute;left:-150px;bottom:-180px;width:480px;height:480px;opacity:.09;color:var(--brand);pointer-events:none;transform:scaleX(-1)}
.local-in{position:relative;display:grid;gap:34px;align-items:center}
@media(min-width:900px){.local-in{grid-template-columns:.9fr 1.1fr;gap:56px}}
.local-kiwi{width:78px;height:78px;color:var(--brand-600);margin-bottom:16px}
.whakatauki{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(22px,2.6vw,28px);color:var(--brand-600);letter-spacing:-.02em;line-height:1.15}
.whakatauki small{display:block;font-family:'Open Sans',sans-serif;font-weight:400;font-size:14px;color:var(--muted);margin-top:8px;font-style:italic}
.local h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.025em;margin-top:18px}
.local > .wrap > .local-in p.body{font-size:16px;margin-top:14px;max-width:44ch}
.local-cards{display:grid;gap:14px}
@media(min-width:620px){.local-cards{grid-template-columns:1fr 1fr}}
.lc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.lc b{font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;color:var(--ink)}
.lc span{font-size:14px;color:var(--body)}

.cta{background:var(--deep);border-radius:28px;padding:52px 32px;text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:200px;background:radial-gradient(50% 60% at 50% 50%, rgba(139,190,33,.28), transparent 70%)}
.cta > *{position:relative}
.cta h2{color:#F1F5E6;font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.025em}
.cta p{color:#B9C4A4;max-width:52ch;margin:14px auto 26px}

footer.site{border-top:1px solid var(--line);padding-block:52px 32px;background:var(--card)}
.foot-grid{display:grid;gap:32px}
@media(min-width:800px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-col h4{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot-col a{font-size:14.5px;color:var(--body);text-decoration:none}
.foot-col a:hover{color:var(--brand-600)}
.foot-bottom{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--muted)}
.foot-bottom .kiwi{width:26px;height:26px;color:var(--brand);opacity:.8}

a:focus-visible,button:focus-visible{outline:2px solid var(--brand-600);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- round 2: client logo strip ---------- */
.clients-strip{padding-block:0 8px}
.strip-label{text-align:center;font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.logo-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.logo-row img,.pay img{background:#FFFFFF;border-radius:10px;height:50px;width:auto;padding:4px 10px;box-shadow:var(--shadow);filter:grayscale(1);opacity:.85;transition:filter .2s,opacity .2s}
.logo-row img:hover,.pay img:hover{filter:none;opacity:1}

/* ---------- round 2: shift by text ---------- */
.offers{overflow:hidden}
.offers-grid{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.offers-grid{grid-template-columns:.9fr 1.1fr;gap:56px}}
.offers-copy{display:flex;flex-direction:column;gap:16px}
.offers-copy h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.025em;line-height:1.14}
.offers-copy .body{max-width:48ch}
.ticks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--body)}
.ticks li svg{flex:none;margin-top:3px;color:var(--brand-600)}
.scene{position:relative;padding:4% 2%}
.scene::before,.scene::after{content:"";position:absolute;border-radius:50%;filter:blur(36px);pointer-events:none;z-index:0}
.scene::before{inset:-12% -16% 14% 22%;background:radial-gradient(closest-side, color-mix(in srgb,var(--sky) 70%, transparent), color-mix(in srgb,var(--sky) 22%, transparent) 60%, transparent)}
.scene::after{inset:24% 20% -18% -18%;background:radial-gradient(closest-side, color-mix(in srgb,var(--brand) 62%, transparent), color-mix(in srgb,var(--brand) 20%, transparent) 60%, transparent)}
.scene img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(26,36,4,.14))}

/* ---------- round 2: tabbed tour ---------- */
.tabs{display:flex;gap:6px;padding:6px;border-radius:18px;background:var(--page);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none;margin-bottom:28px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 0 auto;min-width:170px;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:13px;border:0;background:transparent;color:var(--body);cursor:pointer;text-align:left;font-family:inherit;transition:background .2s,color .2s,box-shadow .2s}
.tab svg{flex:none;color:var(--muted)}
.tab b{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.2}
.tab small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.tab:hover{background:var(--brand-050)}
.tab[aria-selected="true"]{background:var(--brand);box-shadow:0 6px 18px var(--glow)}
.tab[aria-selected="true"] b,.tab[aria-selected="true"] small,.tab[aria-selected="true"] svg{color:#14200A}
.tp{display:grid;gap:30px;align-items:center}
@media(min-width:1100px){.tp{grid-template-columns:.85fr 1.15fr;gap:52px}}
.tp-copy{display:flex;flex-direction:column;gap:14px}
.tp-copy h3{font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:-.02em}
.tp-copy p{font-size:15.5px}
.tp-shot .board{box-shadow:var(--shadow-lg)}
.app{background:var(--app-white);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;color:var(--app-600);font-size:13px}
.app-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--app-200)}
.app-bar .t{font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;color:var(--app-900)}
.app-bar .s{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--app-400)}
.app-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--app-200)}
.app-row.head{background:var(--app-50);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--app-400)}
.app-row.head .mono{color:var(--app-400)}
.app-row .av{width:28px;height:28px;border-radius:999px;background:#EEF4DF;color:#3F6407;display:grid;place-items:center;font-family:'Poppins',sans-serif;font-weight:700;font-size:10.5px;flex:none}
.app-row .nm{font-weight:600;color:var(--app-900);flex:1}
.app-row .nm.sub{font-weight:400;color:var(--app-600)}
.app-row .mono{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--app-900);min-width:58px;text-align:right}
.app-row .mono.warn{color:#B45309}
.app-row .st{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--app-600);margin-left:auto;min-width:96px;text-align:right}
.app-row .st.ok{color:#4D7C0F}
.app-row .st.mute{color:var(--app-400)}
.app-row.head span:first-child{flex:1}
.app-actions{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--app-200)}
.btn-mini{font-family:'Poppins',sans-serif;font-weight:600;font-size:12.5px;padding:7px 14px;border-radius:999px;border:1px solid var(--app-200);color:var(--app-600)}
.btn-mini.ok{background:#8BBE21;color:#14200A;border-color:transparent}
.app-foot{display:flex;align-items:center;gap:8px;padding:11px 16px;background:var(--app-50);font-size:12.5px;color:var(--app-600)}
.app-foot.ok{color:#4D7C0F}
.app-foot svg{flex:none;width:16px;height:16px}

/* ---------- round 2: video placeholder ---------- */
.video-sec{padding-top:0}
.video-ph{aspect-ratio:16/9;max-width:860px;margin:0 auto;border-radius:var(--radius-lg);background:var(--deep);border:1px dashed color-mix(in srgb,var(--brand) 55%, transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#B9C4A4}
.video-ph .play{width:64px;height:64px;border-radius:999px;background:var(--brand);color:#14200A;display:grid;place-items:center;padding-left:4px;box-shadow:0 10px 30px var(--glow)}
.video-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- round 2: payroll logos ---------- */
.pay-grid{display:grid;gap:14px}
@media(min-width:600px){.pay-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.pay-grid{grid-template-columns:repeat(6,1fr)}}
.pay{display:grid;place-items:center}
.pay img{height:auto;max-height:64px;width:100%;max-width:170px;object-fit:contain;padding:10px 14px}

/* ---------- round 2: reviews + faq ---------- */
.reviews{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;padding:22px 26px;border-radius:var(--radius);background:var(--sky-050);border:1px solid color-mix(in srgb,var(--sky) 30%, var(--line))}
.reviews-copy b{display:block;font-family:'Poppins',sans-serif;font-size:16px;color:var(--ink)}
.reviews-copy span{font-size:14px;color:var(--body)}
.reviews .btn-ghost{border-color:var(--sky);color:var(--sky-600)}
.reviews .btn-ghost:hover{background:var(--sky);color:#FFFFFF;border-color:var(--sky)}
.faq-wrap{max-width:820px}
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--page);border:1px solid var(--line);border-radius:14px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-family:'Poppins',sans-serif;font-weight:600;font-size:15.5px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:20px;color:var(--brand-600);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;font-size:15px;max-width:66ch}
.faq details a{color:var(--brand-600)}

/* grid children may not force the column wider than the screen (the roster board sets a 600px min-width inside its own scroller) */
.hero-grid > *,.tp > *,.offers-grid > *,.local-in > *{min-width:0}
.logo-row{max-width:1040px;margin:0 auto}
.pay{overflow:hidden;border-radius:14px}
.pay.zoom img{transform:scale(1.5)}