/* 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:1160px;
  --kiwi-eye:#FFFFFF;

  /* 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;
  }
}
: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;
}

*{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:980px){.hero-grid{grid-template-columns:1fr 1.02fr;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:600px}
.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:760px){.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}}