/* Airtime TekeTeke: brand layer shared by every page (loaded last, so it wins).
   Redesign direction — Field Notes: a documentary, paper-and-ledger register. Warm cream surface
   (not white or blue-gray); a bolder, more expressive type pairing — Bricolage Grotesque for
   display (a variable grotesk with real personality in its ink-trap curves, not another
   Inter/Poppins default) and Plus Jakarta Sans for body (warm, slightly rounded, reads easily at
   length) — with Space Mono still carrying figures/codes; soft worn-paper radii and a warm
   duotone on photography instead of flat cool fields; generous, unhurried spacing throughout. The
   two real brand colors — the logo's green and its garnet orbit ring — are kept exactly as
   sampled; nothing about the actual identity changed, only the paper it's printed on. */
:root{
  --forest:#0d3b23;--forest-2:#14502f;
  /* the logo's own second color — the crimson orbit ring — sampled directly from the mark, not invented.
     Text-safe only on light surfaces (7.7:1 on white/cream); on dark forest/navy panels it stays a stroke-only accent. */
  --garnet:#a4161f;--garnet-deep:#7c1017;--garnet-tint:#f6e9e5;
  --ink:#1b1712;--muted:#6b6155;--line:#e6ddcc;--wash:#faf7f0;--hdr:110px;
  --paper:#fffdf8;
  /* the base template's own --bg (alternating section tint, calculator output boxes, the "nets"
     chips) was still its original cool pale blue-gray — repoint it too, or every other section
     would quietly clash with the warm cream the rest of the page moved to */
  --bg:#f3ede0;
  /* green does two different jobs now that the surface is warm cream, not white: as a fill
     (buttons, active chips) it only needs the 3:1 UI-component floor, so the brand's true,
     brighter #178a3e stays as-is. As text/link/icon color it needs 4.5:1, which the true green
     no longer clears once the background warms even slightly — so text/link/icon contexts use
     a darker value from the same hue family instead of the brand fill color. */
  --green:#178a3e;--green-text:#125e2b;
  --head:'Bricolage Grotesque',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --body:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:0 2px 4px rgba(27,23,18,.05),0 10px 26px -14px rgba(27,23,18,.22);
  /* spring approximations (critically damped / slightly bouncy) — see damping+response guidance */
  --spring:cubic-bezier(.22,1,.36,1);
  --spring-bounce:cubic-bezier(.34,1.56,.64,1);
}

/* ───────── type + browser-surface theming (the parts we didn't draw still carry the design) ───────── */
body{font-family:var(--body)}
/* tracking is size-specific, never one value for every heading level — tighten as text gets bigger */
h1,h2,h3,h4{font-family:var(--head)}
h1{letter-spacing:-.025em}
h2{letter-spacing:-.02em}
h3{letter-spacing:-.012em}
h4{letter-spacing:-.008em}
h1,h2{text-wrap:balance}
::selection{background:#0d3b23;color:#fff}
::-moz-selection{background:#0d3b23;color:#fff}
:focus-visible{outline:2px solid #178a3e;outline-offset:3px;border-radius:4px}
html{scrollbar-color:#ddd2bd #f3ede0;scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#f3ede0}
::-webkit-scrollbar-thumb{background:#ddd2bd;border-radius:999px;border:3px solid #f3ede0}
::-webkit-scrollbar-thumb:hover{background:#b8a98c}
.hero .ussd .code,.amt input,.out b,.dialbox b,.paycard b,.item .d b,.plan-table td,.plan-range,.band small,.credits,.byline time{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
/* pull-quote: no side-tab accent border (a recognizable AI-slop tell) — weight and italics carry it instead */
.quote{border-left:0;padding:4px 0;font-style:italic}
a{cursor:pointer}
button,.chip,.btn,.copy{cursor:pointer}

/* ───────── press feedback: respond the instant a finger/pointer goes down, settle back smoothly on release ───────── */
.btn,.chip,.chip.y,.card,.mnav nav a,summary,.mphone,footer .soc a,.copy,.dialbox,.more{-webkit-tap-highlight-color:transparent}
.btn:active{transition-duration:.08s;transform:scale(.96)}
.chip:active,.chip.y:active{transition-duration:.08s;transform:scale(.94)}
.card:active{transition-duration:.08s!important;transform:scale(.98)!important;box-shadow:none!important}
summary:active{transition:background-color .08s;background:#f7f2e9}
.mphone:active,footer .soc a:active{transform:scale(.93);transition:transform .08s}
.copy:active{transform:scale(.95);transition:transform .08s}
.more:active svg{transform:translateX(2px) scale(.92)}
@media(hover:hover) and (pointer:fine){
  /* the magnetic hover effect already owns feel on precise pointers — press feedback stays for touch */
  .card:active{transform:none!important}
}

/* ───────── header: a translucent material, not an opaque bar — content scrolls under it ───────── */
header{background:rgba(255,255,255,.7)!important;backdrop-filter:blur(20px) saturate(180%)!important;-webkit-backdrop-filter:blur(20px) saturate(180%)!important;border-bottom:0!important;position:sticky;transition:box-shadow .4s cubic-bezier(.22,1,.36,1)}
header::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;background:linear-gradient(180deg,rgba(16,28,20,.07),transparent);opacity:0;transition:opacity .3s ease-out;pointer-events:none}
header.scrolled::after{opacity:1}
header nav{transition:min-height .4s cubic-bezier(.22,1,.36,1)}
header.compact nav{min-height:64px}
@media(prefers-reduced-transparency:reduce){
  header{background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
.topbar{background:#fff!important;color:#6b6155!important;border-bottom:1px solid #e6ddcc}
.topbar svg{color:#178a3e!important}.topbar a:hover{color:#0d3b23!important}
.topbar .dial{color:var(--garnet)!important;font-weight:700}
.logo{gap:0}
.logo img{display:block;height:42px;width:auto;transition:height .3s}
header.compact .logo img{height:37px}
footer .logo{background:#fff;padding:10px 16px;border-radius:12px;display:inline-flex}
footer .logo img{height:38px}

/* tap-to-dial links */
a.dial-link{color:inherit;text-decoration:underline dotted;text-underline-offset:4px;text-decoration-thickness:2px;cursor:pointer}
a.dial-link:hover{text-decoration-style:solid}

/* ───────── burger + mobile menu ───────── */
.burger,.mtoggle{display:none;align-items:center;justify-content:center;height:44px;padding:0 18px;border:0;border-radius:22px;background:transparent;color:#0d3b23;font:700 .78rem/1 var(--body);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;flex:none;margin-left:6px;-webkit-tap-highlight-color:transparent;transition:opacity .2s}
.burger:focus-visible,.mtoggle:focus-visible{outline:3px solid #178a3e;outline-offset:2px}
.menu-open .burger,.menu-open .mtoggle{opacity:0;pointer-events:none}
/* the panel opens as an iris — a circle that expands from whichever toggle was pressed (the
   header burger, or the bottom bar on mobile) — rather than a plain fade/slide */
.mnav{position:fixed;inset:0;z-index:45;background:#fff;padding:calc(var(--hdr) + 10px) 22px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:20px;overflow-y:auto;visibility:hidden;-webkit-clip-path:circle(0% at var(--ox,100%) var(--oy,0%));clip-path:circle(0% at var(--ox,100%) var(--oy,0%));transition:-webkit-clip-path .65s cubic-bezier(.65,0,.35,1),clip-path .65s cubic-bezier(.65,0,.35,1),visibility 0s .65s;overscroll-behavior:contain}
.menu-open .mnav{visibility:visible;-webkit-clip-path:circle(150% at var(--ox,100%) var(--oy,0%));clip-path:circle(150% at var(--ox,100%) var(--oy,0%));transition:-webkit-clip-path .65s cubic-bezier(.65,0,.35,1),clip-path .65s cubic-bezier(.65,0,.35,1)}
html.menu-open{overflow:hidden}
/* close sits above the first menu item, right-aligned to the same width the nav content
   uses, rather than living back on the (now text-only) trigger button */
.mnav-close{align-self:stretch;width:100%;max-width:680px;margin:0 auto -4px;display:flex;justify-content:flex-end;align-items:center;gap:6px;border:0;background:transparent;color:#0d3b23;font:700 .74rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:8px 4px}
.mnav-close:focus-visible{outline:3px solid #178a3e;outline-offset:2px}
.mnav nav{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;gap:0}
.mnav nav a{font:700 1.45rem/1.2 var(--head);color:#0d3b23;padding:0 4px;min-height:58px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6ddcc;text-decoration:none}
.mnav nav a::after{content:"→";color:#178a3e;font-weight:600}
.mnav nav a:active{background:#eaf7ee}
.mdial{display:block;background:var(--forest);color:#fff;border-radius:0;padding:20px 22px;text-decoration:none;position:relative}
.mdial span{font:500 .78rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#9fbcaa;display:block}
.mdial b{font:800 2.5rem/1.1 var(--head);display:block;color:#fff;letter-spacing:-.02em}
.mdial i{font-style:normal;color:#bdd3c4;font-size:.92rem}
.mphone{text-align:center;padding:14px;font-weight:700;color:var(--green-text);text-decoration:none;min-height:48px}
/* the one subtle, clickable extra in the full-screen panel — easy to miss, easy to act on */
.minfo{display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;padding:6px 14px 2px;font:600 .8rem var(--body);color:var(--muted);text-decoration:none;transition:color .2s}
.minfo svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .25s var(--spring)}
.minfo:hover{opacity:1;color:var(--green-text)}
.minfo:hover svg{transform:translateX(3px)}

/* ───────── nav-fab: once the page scrolls, the plain-text header links collapse and this
   minimal circle — fixed to the right edge, centred vertically — becomes the way into the
   same full-screen panel, reached differently, same iris reveal. It stays put once the panel
   is open and doubles as the close control, so desktop never loses a visible way out ───────── */
@media(min-width:1001px){
  .links a:not(.btn){transition:opacity .3s,transform .3s,visibility 0s}
  .nav-collapsed .links a:not(.btn){opacity:0;transform:translateY(-6px);visibility:hidden;pointer-events:none}
  .nav-fab.mtoggle{display:flex;position:fixed;z-index:50;right:28px;top:50%;width:112px;height:112px;margin:0;padding:0;border-radius:50%;background:#fff;font-size:.85rem;letter-spacing:.04em;box-shadow:0 10px 22px -10px rgba(13,23,18,.35);opacity:0;transform:translateY(-50%) translateX(18px) scale(.9);pointer-events:none;transition:opacity .35s var(--spring),transform .35s var(--spring),box-shadow .25s}
  .nav-collapsed .nav-fab.mtoggle{opacity:1;transform:translateY(-50%) translateX(0) scale(1);pointer-events:auto}
  .nav-fab.mtoggle:hover{box-shadow:0 12px 26px -10px rgba(13,23,18,.42);transform:translateY(-50%) translateX(-3px)}
  .menu-open .nav-fab.mtoggle{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0) scale(1)}
  .mnav-close{display:none}

  /* full-screen takeover, desktop only: plain white by default, out of the way — hovering a
     menu item washes the whole panel in that item's own brand colour instead of an always-on
     decorative gradient, so colour becomes feedback for where the pointer is */
  .mnav{align-items:center;justify-content:center;padding:64px;background:#fff;transition:background .45s ease}
  .mnav nav{width:100%;max-width:680px;gap:2px}
  .mnav nav a{font-size:clamp(2.4rem,4.6vw,3.6rem);min-height:auto;padding:14px 6px}
  .mnav nav a::after{font-size:1.6rem}
  .mnav nav a:hover{padding-left:14px}
  .mdial,.mphone,.minfo{max-width:680px;margin-inline:auto;width:100%}
  .mdial{border-radius:18px;margin-top:12px}

  .mnav.mnav-hover{background:var(--mnav-bg,#fff)}
  .mnav.mnav-hover nav a{color:#fff;border-bottom-color:rgba(255,255,255,.3)}
  .mnav.mnav-hover nav a::after{color:#fff;opacity:.85}
  .mnav.mnav-hover nav a:active{background:rgba(255,255,255,.12)}
  .mnav.mnav-hover .mphone{color:#fff;font-size:1.15rem}
  .mnav.mnav-hover .minfo{color:rgba(255,255,255,.82)}
  .mnav.mnav-hover .minfo:hover{color:#fff}
}

/* ───────── scroll-to-top: floating bottom-right on any screen size ───────── */
.scrolltop{position:fixed;z-index:50;right:20px;bottom:20px;width:50px;height:50px;border-radius:50%;border:0;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px -10px rgba(13,23,18,.4);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .3s var(--spring),transform .3s var(--spring),background .2s;cursor:pointer}
.scrolltop.show{opacity:1;transform:none;pointer-events:auto}
/* the go-to-top circle and the panel's hover-coloured wash sit at the same corner-ish z-index
   layer, so once a menu item washes the panel in colour, the top button steps out of the way */
html.mnav-hover .scrolltop{opacity:0;pointer-events:none;transform:translateY(14px) scale(.9)}
@media(hover:hover) and (pointer:fine){.scrolltop:hover{background:var(--green)}}
.scrolltop:focus-visible{outline:3px solid #178a3e;outline-offset:3px}
.scrolltop svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.4}
@media(max-width:760px){.scrolltop{right:14px;bottom:calc(84px + env(safe-area-inset-bottom));width:46px;height:46px}.scrolltop svg{width:18px;height:18px}}

/* sticky bottom bar on small screens — menu toggle + dial, always in thumb's reach regardless of
   scroll position, so opening the nav never means scrolling back up to the header first */
.dialbar{display:none}
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#178a3e,#4cc763);z-index:60;pointer-events:none}
.toc a.on{background:#eaf7ee;border-left-color:#178a3e!important;color:var(--green-text)}

/* ───────── FAQ: the plus/minus and border respond the instant you tap, independent of the height animation ───────── */
details{transition:box-shadow .3s var(--spring),border-color .3s var(--spring)}
details.is-open{border-color:#178a3e;box-shadow:var(--shadow)}
.pm::before,.pm::after{transition:transform .3s var(--spring)}
details.is-open .pm{background:#178a3e;color:#fff}
details.is-open .pm::after{transform:rotate(0)}
details > .dcontent{overflow:hidden}

/* GSAP owns transforms, so keep CSS from transitioning them */
.gsap-on .reveal,.gsap-on .reveal.in{opacity:1;transform:none;transition:none}
.gsap-on .card,.gsap-on .step,.gsap-on .plan{transition:box-shadow .3s,border-color .3s}
.gsap-on .card:hover{transform:none}
.gsap-on .btn,.gsap-on .dialbox{transition:background .2s,border-color .2s,color .2s}
.gsap-on .btn:hover{transform:none}

/* blog: extra graphic covers, year chips, load more */
.chip,.chips button,footer .soc a{transition:border-color .2s,color .2s,background-color .2s,box-shadow .2s}
.btn[hidden],.empty[hidden],.count[hidden]{display:none!important}
.card.dup{display:none}
.grid.filtered .card.dup:not([hidden]){display:flex}
.card[hidden]{display:none!important}
.filters.years{margin-top:-12px}
.chip.y{min-height:38px;padding:0 18px;font-size:.86rem;background:#f7f2e9}
.chip.y[aria-pressed=true]{background:#178a3e;border-color:#178a3e;color:#fff}
.count{margin-top:26px;text-align:center;color:#6b6155;font-size:.95rem}
.more-wrap{display:flex;justify-content:center;margin-top:14px}
.btn.ghost{background:#fff;color:#0d3b23;border-color:#d3eedb}
.btn.ghost:hover{background:#eaf7ee;border-color:#178a3e;color:var(--green-text)}
/* branded covers (posts with no photo): flat solid fields, no gradients or decorative shards */
.gfx::before,.gfx::after{content:none}
.gfx{background:#0d3b23}
.gfx.v1{background:#0d3b23}
.gfx.v2{background:#14502f}
.gfx.v3{background:#178a3e}
.gfx.v4{background:#072616}
.gfx span{color:#bdd3c4}
.gfx b{overflow-wrap:anywhere}
.card .gfx b{font-size:clamp(2rem,7vw,2.9rem)}

/* ═══════════════════ redesign: Field Notes — warm paper, editorial serif, soft worn radii ═══════════════════ */
/* drop the decorative dot-grids and glow blobs behind dark sections */
.hero::before,.hero::after,.post-hero::before,.post-hero::after,.paybill::after,.featured::after{content:none}
.card:hover,.plan:hover,.item:hover,.info li>a:hover{transform:none}
.btn{box-shadow:none;border-radius:11px}
.cta-card,.featured,.plan.feat,.cta-band{background:var(--forest)}
.cta-card{box-shadow:none;border-radius:20px}
.dialcard{background:var(--forest)}
body{background:var(--wash)}
/* a faint fibrous grain instead of a flat digital field — the one texture cue for the whole
   "paper" thesis; kept at 3% opacity so it reads as material, not as decoration competing with content */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
main,section,header,footer{position:relative}
.card,.panel,.plan,.step,.trust .grid,.takeaways,.note,.table-wrap,.faqs details{background:var(--paper)}

/* ─────────── hero: asymmetric split — copy left, photo right, the way a field report pairs a note with its photograph ─────────── */
.hero{background:var(--wash);color:var(--ink);padding:72px 0 84px;overflow:visible}
.hero .hero-shell{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}
.hero-copy{max-width:none;margin:0;padding:0;text-align:left}
.hero h1{color:var(--ink);font-family:var(--head);font-size:clamp(2.6rem,4.6vw,4.2rem);font-weight:600;font-optical-sizing:auto;margin-bottom:22px;line-height:1.04;letter-spacing:-.015em}
.hero h1 .word{display:inline-block;will-change:transform}
.hero .lede{color:var(--muted);font-size:1.15rem;line-height:1.6;margin:0 0 30px;max-width:42ch}
.hero .lede strong{color:var(--garnet-deep);font-family:var(--mono);font-weight:600;background:var(--garnet-tint);padding:1px 8px;border-radius:5px}
.hero .cta{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:22px;margin-bottom:34px}
.hero .cta .btn{background:#178a3e;border-color:#178a3e}
.hero .cta .btn:hover{background:#0f6e30;border-color:#0f6e30}
.hero .more{display:inline-flex;align-items:center;gap:8px;font:600 1rem var(--body);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.hero .more svg{transition:transform .2s;color:#178a3e}
.hero .more:hover{border-color:#178a3e;color:var(--green-text)}
.hero .more:hover svg{transform:translateX(4px)}
.hero .checks{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 24px;color:var(--muted);font-weight:500;font-size:.94rem;border-top:1px solid var(--line);padding-top:22px}
.hero .checks li{display:flex;align-items:center;gap:9px}
.hero .checks svg{color:#178a3e}
.hero-visual{position:relative;width:100%;padding:0;margin:0}
.hero-photo{margin:0;position:relative;overflow:visible;background:var(--wash);border-radius:0;box-shadow:none;border:0;aspect-ratio:.92/1}
.hero-photo img{border-radius:22px}
.hero-photo>img{-webkit-clip-path:inset(0 round 22px);clip-path:inset(0 round 22px)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block;object-position:50% 22%}
/* warm duotone — every real photo on the site (hero, about, calculator, blog covers, band, cards)
   reads as printed matter in one tonal family instead of raw, clashing stock-photo hues */
.hero-photo img,.photo img,.cover img,.band>img,.card .media img{filter:sepia(.22) saturate(1.08) hue-rotate(-6deg) brightness(.99) contrast(1.03)}
.hero .ussd{position:absolute;left:-18px;bottom:-18px;width:auto;max-width:320px;background:var(--forest);color:#fff;padding:26px 28px;border-radius:16px;box-shadow:0 24px 48px -20px rgba(13,59,35,.45)}
.hero .ussd .code{display:block;color:#fff;font:700 2rem var(--mono);letter-spacing:-.02em;margin-bottom:14px}
.hero .ussd ol{list-style:decimal;display:grid;gap:8px;padding-left:1.1em;color:#d7e8db;font:500 .86rem var(--body)}
/* the base template's `.ussd li` sets a pale pill background per row (built for a white panel on
   a navy hero) — reset it, this panel is dark forest, the rows are plain text, not chips */
.hero .ussd li{background:none!important;padding:0!important;border-radius:0!important;display:list-item!important}
.hero .ussd ol::marker,.hero .ussd li::marker{color:#7cc48f;font-family:var(--mono)}
@media(max-width:1000px){.hero .hero-shell{grid-template-columns:1fr;gap:44px}.hero-copy{text-align:center;max-width:600px;margin:0 auto}.hero .cta,.hero .checks{justify-content:center}.hero .lede{margin-left:auto;margin-right:auto}.hero .ussd{left:16px;bottom:-16px}}
@media(max-width:760px){.hero-photo{aspect-ratio:4/5}.hero-photo img{border-radius:18px}.hero-photo>img{-webkit-clip-path:inset(0 round 18px);clip-path:inset(0 round 18px)}.hero .ussd{left:12px;right:12px;bottom:-14px;max-width:none}}

/* testimonials: a dense wall of small circular faces — 12 real-looking voices at a glance,
   each one opening into its full story on click rather than crowding the grid with paragraphs */
.testimonials{background:var(--wash);border-block:1px solid var(--line)}
.testimonials .sec-head .lede{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.testimonials .sec-head .hint{display:inline-flex;align-items:center;gap:5px;font:600 .8rem var(--body);letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.testimonials .sec-head .hint svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.3}
/* three cards in view at a time, the rest one scroll-snapped swipe away — a peek of the
   fourth card plus the edge fade is the "there's more" cue, no counters or dots needed */
.tlist-wrap{position:relative}
.tlist{list-style:none;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:2px;padding:2px 2px 10px;margin:0 -2px;scrollbar-width:none;-ms-overflow-style:none}
.tlist::-webkit-scrollbar{display:none}
.tlist-wrap::after{content:"";position:absolute;top:0;right:0;bottom:10px;width:64px;background:linear-gradient(90deg,transparent,var(--wash));pointer-events:none}
.tlist li{scroll-snap-align:start;flex:0 0 calc((100% - 40px)/3);background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px 22px;cursor:pointer;display:flex;flex-direction:column;text-align:left;box-shadow:0 1px 2px rgba(27,23,18,.04);transition:box-shadow .35s var(--spring),transform .35s var(--spring),border-color .2s;will-change:transform}
.tlist li:focus-visible{outline:2px solid #178a3e;outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  .tlist li:hover{box-shadow:0 22px 44px -22px rgba(27,23,18,.28);border-color:#cdbf9e}
}
.tlist .face{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tlist img{display:block;width:52px;height:52px;border-radius:50%;object-fit:cover;background:#eaf7ee;flex:none;border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line)}
.tlist .who{display:flex;flex-direction:column;gap:1px;min-width:0}
.tlist .who b{font:600 .96rem var(--head);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlist .who span{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlist blockquote{margin:0 0 14px;font-size:.93rem;line-height:1.55;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.tlist .read-more{margin-top:auto;font:700 .76rem var(--body);letter-spacing:.02em;color:var(--forest);display:inline-flex;align-items:center;gap:4px}
.tlist .read-more::after{content:"→";transition:transform .25s var(--spring)}
.tlist li:hover .read-more::after{transform:translateX(3px)}
.tarrow{position:absolute;top:calc(50% - 10px);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 24px -12px rgba(27,23,18,.3);transition:background .2s,transform .2s,opacity .2s}
.tarrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2}
.tarrow.prev{left:-14px}
.tarrow.next{right:-14px}
@media(hover:hover) and (pointer:fine){.tarrow:hover{background:var(--forest);color:#fff;transform:translateY(-2px)}}
@media(max-width:1000px){.tlist li{flex:0 0 calc((100% - 20px)/2)}}
@media(max-width:640px){.tlist li{flex:0 0 84%}.tarrow{display:none}}

/* testimonial modal — full story + next/prev between all 12 while it's open */
.t-modal{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none}
.t-modal-open .t-modal{visibility:visible;pointer-events:auto}
.t-modal-backdrop{position:absolute;inset:0;background:rgba(13,23,18,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0}
.t-modal-open .t-modal-backdrop{opacity:1}
.t-modal-box{position:relative;z-index:1;max-width:520px;margin:9vh auto 0;background:var(--paper);border-radius:26px;padding:44px 40px 36px;box-shadow:0 50px 100px -24px rgba(13,23,18,.55);opacity:0}
.t-modal-open .t-modal-box{opacity:1}
.t-modal-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:0;background:var(--wash);color:var(--ink);font-size:1.35rem;line-height:1;cursor:pointer;transition:background .2s}
.t-modal-x:hover{background:var(--line)}
.t-modal-face{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.t-modal-face img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1px var(--line)}
.t-modal-face b{font:600 1.15rem var(--head);color:var(--ink);display:block}
.t-modal-face span{font-size:.88rem;color:var(--muted)}
.t-modal blockquote{margin:0;font:1.28rem/1.55 var(--head);font-weight:500;color:var(--ink)}
.t-modal blockquote::before{content:"\201C";color:#178a3e}
.t-modal blockquote::after{content:"\201D";color:#178a3e}
.t-modal-nav{display:flex;align-items:center;justify-content:space-between;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.t-modal-count{font:600 .78rem var(--mono);letter-spacing:.04em;color:var(--muted)}
.t-modal-arrows{display:flex;gap:10px}
.t-modal-arrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--wash);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .2s}
.t-modal-arrows button:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-1px)}
.t-modal-arrows button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
@media(max-width:560px){
  .t-modal-box{margin:auto 14px;max-width:none;padding:34px 24px 28px}
  .t-modal blockquote{font-size:1.12rem}
}

/* how it works: a numbered flow, not boxed cards */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid var(--line);padding-top:32px}
.step{padding:0 32px 0 0;background:none;border:0;border-radius:0;box-shadow:none;transition:none}
.step::after,.step:not(:last-child)::after{content:none}
.step:hover{box-shadow:none;transform:none;border-color:transparent}
.step:not(:first-child){border-left:1px solid var(--line);padding-left:32px}
.step .n{display:block;width:auto;height:auto;background:none;border-radius:0;font:700 .95rem var(--mono);color:var(--green-text);margin-bottom:16px;letter-spacing:.02em}
.step h3{font-size:1.3rem;font-weight:600;margin-bottom:8px}
.step p{color:var(--muted)}

/* plans: a comparison table instead of three equal cards */
.plan-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.plan-table{width:100%;border-collapse:collapse;min-width:640px}
.plan-table th,.plan-table td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--line);vertical-align:middle}
.plan-table thead th{font:600 1.05rem var(--head);color:var(--ink);padding-top:0;padding-bottom:20px;border-bottom:2px solid var(--ink)}
.plan-table tbody th{text-align:left;font:500 .96rem var(--body);color:var(--ink);font-weight:500}
.plan-table .row-range td,.plan-table .row-range th{font-weight:600;padding-top:22px}
.plan-table .row-for td{color:var(--muted);padding-bottom:22px}
.plan-table td.yes{color:#178a3e}
.plan-table td.yes svg{width:1.2em;height:1.2em}
.plan-table td.no{color:#c2b8a4;font-family:var(--mono)}
.plan-table th.feat,.plan-table td.feat{background:#eaf7ee}
.plan-table th.feat{color:#0d3b23}
.plan-table tbody tr:last-child td,.plan-table tbody tr:last-child th{border-bottom:0}
@media(max-width:760px){
  .plan-table th,.plan-table td{padding:14px 12px;font-size:.92rem}
}

/* trust bar: flat typographic row, no icon tiles */
.trust{margin-top:0;padding:52px 0 52px;border-bottom:1px solid var(--line)}
.trust .grid{background:none;box-shadow:none;border:0;border-radius:0}
.trust .cell{border-right:1px solid var(--line);padding:0 30px 0 0}
.trust .cell:first-child{padding-left:0}
.trust h3{font-size:1.1rem;font-weight:600;margin-bottom:4px}

/* ─────────── generous, unhurried spacing — more air between sections and inside them ─────────── */
section{padding:144px 0}
.sec-head{margin-bottom:68px}
.wrap{padding-left:32px;padding-right:32px}
.about .wrap{gap:96px}
.calc .wrap{gap:88px}
.faq .wrap{gap:84px}
.newsgrid{gap:40px}
.steps{gap:56px;padding-top:40px}
.step:not(:first-child){padding-left:40px}
.step:not(:last-child){padding-right:40px}
.plan-table th,.plan-table td{padding-top:20px;padding-bottom:20px}
.faq .side .box{padding:26px 28px}
/* contact: no form anymore — a single, generous column (info row + map), not a leftover gap
   where the form used to be */
.contact .wrap{grid-template-columns:1fr;gap:40px;max-width:920px;margin-inline:auto}
.contact .info{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.contact .map{position:relative;cursor:pointer;aspect-ratio:21/9}
.contact .map iframe{pointer-events:none}
.contact .map .map-cta{position:absolute;left:20px;bottom:20px;display:inline-flex;align-items:center;gap:8px;background:var(--forest);color:#fff;font:600 .9rem var(--body);padding:12px 18px;border-radius:999px;box-shadow:0 14px 28px -12px rgba(13,59,35,.5);transition:transform .3s var(--spring),background .2s}
.contact .map .map-cta svg{width:1.05em;height:1.05em}
.contact .map:hover .map-cta,.contact .map:focus-visible .map-cta{background:var(--green);transform:translateY(-2px)}
.contact .map:focus-visible{outline:2px solid #178a3e;outline-offset:3px}
.contact .map.locating .map-cta{pointer-events:none;color:transparent}
.contact .map.locating .map-cta::after{content:"Locating you…";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff}
@media(max-width:760px){
  .contact .info{grid-template-columns:1fr}
  .contact .map{aspect-ratio:4/3}
}

/* ───────── dial CTA popover — shown on hover/mouse devices that can't actually place a
   call, so *831# never just silently does nothing ───────── */
.dial-modal{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none}
.dial-modal-open .dial-modal{visibility:visible;pointer-events:auto}
.dial-modal-backdrop{position:absolute;inset:0;background:rgba(13,23,18,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0}
.dial-modal-open .dial-modal-backdrop{opacity:1}
.dial-modal-box{position:relative;z-index:1;max-width:400px;margin:10vh auto 0;background:var(--paper);border-radius:24px;padding:40px 36px 34px;box-shadow:0 40px 80px -20px rgba(13,23,18,.5);text-align:center;opacity:0}
.dial-modal-open .dial-modal-box{opacity:1}
.dial-modal-box > .i{width:38px;height:38px;stroke:var(--green);fill:none;stroke-width:1.8;margin-bottom:14px}
.dial-modal-box h2{font:700 1.5rem var(--head);color:var(--ink);margin-bottom:10px}
.dial-modal-box p{color:var(--muted);font-size:.98rem;line-height:1.55}
.dial-modal-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:0;background:var(--wash);color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer;transition:background .2s}
.dial-modal-x:hover{background:var(--line)}
.dial-modal-code{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0}
.dial-modal-code b{font:800 2.2rem var(--mono);letter-spacing:-.01em;color:var(--forest)}
.dial-modal-copy{font:700 .84rem var(--body);color:#fff;background:var(--forest);border:0;border-radius:999px;padding:9px 18px;cursor:pointer;transition:background .2s,transform .2s}
.dial-modal-copy:hover{background:var(--green);transform:translateY(-1px)}
.dial-modal-note{font-size:.86rem!important;color:var(--muted)}
summary{padding:26px 30px}
.info li>a,.info li>div{padding:20px 24px}
footer .cols{gap:56px}
@media(max-width:1000px){
  section{padding:104px 0}
  .about .wrap,.calc .wrap,.faq .wrap{gap:52px}
}
@media(max-width:760px){
  section{padding:76px 0}
  .sec-head{margin-bottom:44px}
  .wrap{padding-left:20px;padding-right:20px}
  form{padding:28px}
}

@media(max-width:1000px){
  .hero-copy{padding:0 0 44px;max-width:560px}
  .hero-photo{aspect-ratio:1.5/1}
  .steps{grid-template-columns:1fr;gap:28px}
  .step:not(:first-child){border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:28px}
}
@media(max-width:760px){
  .hero{padding:52px 0 0}
  .trust .cell{border-right:0;border-bottom:1px solid #e6ddcc;padding:20px 0}
  .trust .cell:last-child{border-bottom:0}
}

/* ───────── tablets and phones ───────── */
@media(max-width:1000px){
  .burger{display:flex}
  .links{margin-left:auto}
  header nav{gap:8px}
  .toc{display:none}
  .side{grid-template-columns:1fr 1fr;gap:16px}
}
@media(max-width:760px){
  html{scroll-padding-top:84px}
  body{font-size:16.5px;line-height:1.6}
  .wrap{padding-left:18px;padding-right:18px}
  .topbar .wrap{min-height:38px;justify-content:center}
  .topbar .grp:first-child .it{display:none}
  .logo img{height:36px}
  header.compact .logo img{height:32px}
  header nav{min-height:66px}
  header.compact nav{min-height:58px}
  .dialbar{display:flex;position:fixed;z-index:40;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));min-height:56px;border-radius:18px;background:#178a3e;color:#fff;align-items:stretch;box-shadow:0 16px 32px -12px rgba(13,59,35,.6);transform:translateY(150%);opacity:0;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s;overflow:hidden}
  .dialbar.show{transform:none;opacity:1}
  .dialbar .mtoggle{display:flex;align-items:center;justify-content:center;width:56px;height:auto;margin:0;padding:0;border-radius:0;background:rgba(0,0,0,.16);color:#fff;font-size:.62rem;letter-spacing:.04em;flex:none}
  .dialbar .mtoggle:focus-visible{outline:3px solid #fff;outline-offset:-3px}
  .dialbar .dial{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;font:700 1rem var(--head);text-decoration:none;color:#fff;-webkit-tap-highlight-color:transparent}
  .dialbar .dial:active{background:rgba(0,0,0,.1)}
  .dialbar .dial svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
  .dialbar .dial b{font:800 1.2rem var(--mono);letter-spacing:.02em;background:rgba(255,255,255,.16);padding:4px 12px;border-radius:10px}
  footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  /* home hero: centered copy, then a full-bleed photo band with the USSD panel inset */
  .hero-copy{max-width:none}
  .hero-photo{aspect-ratio:4/5}
  .hero-photo img{object-position:50% 14%}
  .hero .ussd{max-width:none;width:100%;padding:20px 18px}
  .hero .ussd .code{font-size:1.7rem;margin-bottom:10px}
  .hero .ussd ol{font-size:.82rem}
  .side{grid-template-columns:1fr}
  /* blog: filter chips scroll sideways instead of wrapping into a wall */
  .filters{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 -18px 22px;padding:2px 18px 6px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filters::-webkit-scrollbar{display:none}
  .filters .chip{flex:none;scroll-snap-align:start;min-height:42px;padding:0 18px}
  .filters.years{margin-top:-8px}
  .post-hero{padding:38px 0 46px}
  .post-hero h1{font-size:clamp(1.85rem,8vw,2.4rem);line-height:1.12}
  .post-hero .dek{font-size:1.05rem}
  .byline{gap:6px 10px;font-size:.88rem}
  .crumbs{font-size:.84rem;margin-bottom:18px}
  .cover{border-radius:14px;margin-bottom:24px}
  .post-layout{padding-top:26px;padding-bottom:56px}
  .prose h2{font-size:1.45rem;margin-top:1.8em}
  .takeaways{padding:20px 20px;border-radius:14px}
  .cta-card{padding:26px 22px;border-radius:16px}
  .cta-card .btn,.cta-band .btn{width:100%}
  .table-wrap{margin-inline:-18px;border-radius:0;border-left:0;border-right:0}
  .card .cbody{padding:20px 20px 22px}
  .card h3{font-size:1.2rem}
  .grid{gap:18px}
  .btn{min-height:52px}
  .share a{min-height:46px}
  footer .cols a{padding:6px 0;display:inline-block}
}
@media(max-width:400px){
  .links .btn{display:none}
  .burger{margin-left:auto}
  .logo img{height:32px}
  h1{overflow-wrap:break-word}
}
@media(hover:none){
  .btn:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}