/* Rafiki public site.
   Type system: the apple.com look, identical on every device. Self-hosted
   Inter Tight (headings) and Inter (body) are the closest legal matches to
   SF Pro Display and SF Pro Text, and they come FIRST in every stack so
   Android, Windows and Apple devices all render the same letterforms. SF Pro
   itself is licensed for Apple platforms only and can never be self-hosted;
   the Apple names remain as fallbacks. Every animation here is decorative,
   needs no JavaScript (script-src is nonce-locked), and is switched off
   entirely under prefers-reduced-motion. Inline style attributes are blocked
   by style-src 'self', so the hero chart bar heights live in nth-child
   rules, never in the template. */

@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url("../fonts/inter-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-tight-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-tight-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  --ink:#101f18;
  --ink-soft:#32433b;
  --muted:#5e6e65;
  --paper:#f7f5ef;
  --paper-warm:#f0ece1;
  --white:#fff;
  --forest:#062f28;
  --forest-deep:#03201a;
  --forest-2:#0a4438;
  --forest-3:#0d5d4b;
  --green:#0d7a5f;
  --green-bright:#1aa77d;
  --mint:#e1f3e9;
  --mint-2:#c2e7d5;
  --lime:#d9ef7d;
  --amber:#d7902b;
  --red:#bb453e;
  --line:#e0e2d6;
  --line-dark:rgba(255,255,255,.14);
  --shadow:0 30px 80px rgba(4,45,36,.15);
  --shadow-soft:0 14px 40px rgba(4,45,36,.09);
  --radius:24px;
  --radius-sm:14px;
  --display:"Inter Tight",Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",Roboto,sans-serif;
  --ui:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,sans-serif;
  --body:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit}
img{max-width:100%}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--lime);color:var(--forest)}
.public-wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.public-skip{position:fixed;left:16px;top:-80px;z-index:1000;background:var(--lime);color:var(--forest);font-weight:800;padding:12px 18px;border-radius:12px;text-decoration:none;transition:top .2s}
.public-skip:focus{top:16px}

/* Motion primitives. `translate`/`scale` are used instead of `transform` in
   keyframes so entrance animations never clobber hover transforms. */
@keyframes rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes reveal{from{opacity:0;translate:0 46px}to{opacity:1;translate:0 0}}
@keyframes pop{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes orbit-spin{to{rotate:1turn}}
@keyframes orbit-spin-back{to{rotate:-1turn}}
@keyframes bar-grow{from{scale:1 0}to{scale:1 1}}
@keyframes stage-in{from{opacity:0;transform:translateY(30px) rotateY(-10deg)}to{opacity:1;transform:rotateY(-5deg) rotateX(1deg)}}
@keyframes menu-in{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}

/* Scroll-driven reveals: pure CSS, so the CSP never notices. Browsers without
   animation-timeline simply show everything, already in place. */
@supports (animation-timeline: view()){
  .trust-grid>div,.split-heading>*,.section-heading.centered,.feature-card,
  .role-copy,.role-list article,.owner-screen,.steps-grid li,.price-copy,
  .price-card,.expectation-grid li,.faq-title,.faq-list details,.final-inner{
    animation:reveal both;animation-timeline:view();animation-range:entry 0% entry 55%;
  }
}
/* FAQ answers glide open where the browser can interpolate to auto. */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq-list details::details-content{opacity:0;block-size:0;overflow-y:clip;transition:content-visibility .4s allow-discrete,opacity .4s var(--ease),block-size .4s var(--ease)}
  .faq-list details[open]::details-content{opacity:1;block-size:auto}
}

.public-nav{height:78px;position:absolute;z-index:100;inset:0 0 auto;color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}
/* The account and checkout pages split their background diagonally, so white
   nav links would land on the light half and disappear. A solid bar keeps
   every link readable on those pages. */
.account-page .public-nav,.checkout-page .public-nav{background:var(--forest)}
.nav-inner{height:100%;position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px}
.public-brand{display:inline-flex;align-items:center;gap:11px;color:inherit;text-decoration:none;font:700 25px/1 var(--display);letter-spacing:-.04em}
.brand-dot{color:var(--lime)}
.brand-mark{width:30px;height:30px;position:relative;display:inline-block;flex:none;transform:rotate(-4deg);transition:transform .5s var(--ease)}
.public-brand:hover .brand-mark{transform:rotate(4deg)}
.brand-mark i,.brand-mark b{position:absolute;display:block;background:var(--lime);border-radius:5px;inset:auto}
.brand-mark i{width:10px;height:30px;left:10px;top:0}
.brand-mark b{width:30px;height:10px;left:0;top:10px}
.desktop-links{display:flex;align-items:center;gap:34px;margin-left:auto}
.desktop-links a,.nav-login{color:rgba(255,255,255,.76);font-size:14px;font-weight:650;text-decoration:none;transition:color .25s}
.desktop-links a{position:relative}
.desktop-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;border-radius:2px;background:var(--lime);transition:right .3s var(--ease)}
.desktop-links a:hover::after{right:0}
.desktop-links a:hover,.nav-login:hover{color:#fff}
.nav-actions{display:flex;align-items:center;gap:16px}
/* Language switch: a glass pill with a globe and a thumb that glides between
   SW and EN. Geometry is fixed (globe zone 31px, options 42px each) so the
   thumb can slide by pure CSS with no script for the CSP to block. */
.public-lang{position:relative;display:inline-flex;align-items:center;padding:4px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.18);transition:border-color .3s,background .3s}
.public-lang:hover{border-color:rgba(217,239,125,.45);background:rgba(255,255,255,.13)}
.lang-globe{width:14px;height:14px;margin:0 6px 0 7px;color:var(--lime);flex:none;transition:rotate .6s var(--ease)}
.public-lang:hover .lang-globe{rotate:180deg}
.public-lang::before{content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:31px;width:42px;border-radius:999px;background:linear-gradient(180deg,#fff,#eef4ec);box-shadow:0 2px 8px rgba(0,0,0,.28);transition:translate .35s var(--ease)}
.public-lang:has(a:last-of-type.on)::before{translate:42px 0}
.public-lang a{position:relative;z-index:1;width:42px;padding:5px 0;text-align:center;border-radius:999px;color:rgba(255,255,255,.65);font-size:11px;font-weight:800;letter-spacing:.03em;text-decoration:none;transition:color .3s}
.public-lang a:hover{color:#fff}
.public-lang a.on{color:var(--forest)}
@supports not (selector(:has(a))){.public-lang::before{display:none}.public-lang a.on{background:#fff}}
.public-btn{min-height:48px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:12px 22px;border:0;border-radius:13px;background:linear-gradient(160deg,#0e8467,var(--green) 60%,#0b6d55);color:#fff;font-weight:750;text-decoration:none;cursor:pointer;overflow:hidden;box-shadow:0 10px 24px rgba(13,122,95,.22),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .25s var(--ease),box-shadow .25s,filter .25s}
.public-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.28) 50%,transparent 68%);translate:-130% 0;transition:translate .65s var(--ease);pointer-events:none}
.public-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(13,122,95,.3),inset 0 1px 0 rgba(255,255,255,.16);filter:saturate(1.06)}
.public-btn:hover::after{translate:130% 0}
.public-btn:active{transform:translateY(0)}
.public-btn>span,.public-btn>b{transition:translate .3s var(--ease)}
.public-btn:hover>span,.public-btn:hover>b{translate:4px 0}
.public-btn.small{min-height:42px;padding:9px 18px;background:var(--lime);color:var(--forest);box-shadow:none}
.public-btn.small:hover{background:#e4f58f}
.public-btn.full,.secondary-btn.full{width:100%}
.public-btn.light-btn{background:var(--lime);color:var(--forest);box-shadow:none}
.public-btn.light-btn:hover{background:#e5f692}
.mobile-menu{display:none;position:relative}
.mobile-menu summary{width:44px;height:44px;display:grid;place-content:center;gap:5px;border:1px solid rgba(255,255,255,.2);border-radius:10px;list-style:none;cursor:pointer}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu summary span{display:block;width:20px;height:2px;background:#fff;border-radius:2px}
.mobile-panel{position:absolute;right:0;top:52px;width:220px;padding:10px;background:#fff;color:var(--ink);border-radius:16px;box-shadow:var(--shadow);animation:menu-in .25s var(--ease)}
.mobile-panel a{display:block;padding:12px;border-radius:9px;font-weight:650;text-decoration:none}
.mobile-panel a:hover{background:var(--mint)}

/* Hero: deep forest light with two soft glows and a whisper of grain. */
.hero{min-height:790px;padding:160px 0 100px;color:#fff;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(900px 520px at 86% -12%,rgba(26,167,125,.2),transparent 62%),radial-gradient(720px 460px at -12% 108%,rgba(217,239,125,.06),transparent 56%),linear-gradient(178deg,#08362d,var(--forest) 52%,#052720)}
.hero::before{content:"";position:absolute;z-index:-1;width:740px;height:740px;right:-190px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(36,172,127,.22),rgba(6,47,40,0) 67%)}
.hero::after{content:"";position:absolute;z-index:-1;inset:0;opacity:.05;background-image:var(--grain);background-size:160px;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(540px,1.12fr);gap:48px;align-items:center}
/* The label alone. It used to carry a short lime rule before the words, drawn
   by `.eyebrow>span` on an empty span in each template; the owner asked for
   every dash on this site to go, and that mark read as one. Still flex, so
   `.section-heading.centered .eyebrow` can centre it; no gap, because there
   is no longer a second child to space away from. */
.eyebrow{display:flex;align-items:center;color:var(--lime);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.eyebrow.dark{color:var(--green)}
.eyebrow.light{color:var(--lime)}
.hero h1{max-width:660px;margin:24px 0 22px;font:640 clamp(46px,5.2vw,76px)/1.04 var(--display);letter-spacing:-.028em}
.hero h1>span{display:block;color:var(--lime)}
.hero-lead{max-width:570px;margin:0;color:rgba(255,255,255,.72);font-size:18px;line-height:1.72}
.hero-actions{display:flex;align-items:center;gap:27px;margin-top:34px}
.hero-primary{min-height:56px;background:var(--lime);color:var(--forest);padding-inline:26px;box-shadow:0 14px 36px rgba(0,0,0,.28)}
.hero-primary:hover{background:#e2f48a}
.text-link{color:#fff;font-weight:700;text-decoration:none;font-size:14px;background:linear-gradient(currentColor,currentColor) no-repeat left bottom/0 1px;transition:background-size .35s var(--ease)}
.text-link:hover{background-size:100% 1px}
.text-link span{color:var(--lime);margin-left:6px}
.hero-proof{display:flex;align-items:center;gap:15px;margin-top:39px}
.proof-avatars{display:flex;padding-left:8px}
.proof-avatars span{width:38px;height:38px;display:grid;place-content:center;margin-left:-8px;border:2px solid var(--forest);border-radius:50%;background:#f1d8b7;color:#5c3d28;font-size:9px;font-weight:800;transition:translate .3s var(--ease)}
.hero-proof:hover .proof-avatars span{translate:0 -3px}
.hero-proof:hover .proof-avatars span:nth-child(2){transition-delay:.05s}
.hero-proof:hover .proof-avatars span:nth-child(3){transition-delay:.1s}
.proof-avatars span:nth-child(2){background:#d3e8d8;color:#25553d}.proof-avatars span:nth-child(3){background:#d9d7ed;color:#45406c}
.hero-proof p{margin:0;color:rgba(255,255,255,.55);font-size:12px;line-height:1.4}.hero-proof strong{color:#fff;font-size:13px}
/* Staggered entrance for the hero copy. */
.hero .eyebrow{animation:rise .8s var(--ease) both}
.hero h1{animation:rise .9s var(--ease) .08s both}
.hero-lead{animation:rise .9s var(--ease) .16s both}
.hero-actions{animation:rise .9s var(--ease) .24s both}
.hero-proof{animation:rise .9s var(--ease) .32s both}

.product-stage{position:relative;min-height:530px;perspective:1200px}
.stage-orbit{position:absolute;border:1px solid rgba(215,239,120,.12);border-radius:50%;pointer-events:none}
.stage-orbit::before{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;margin-left:-3px;border-radius:50%;background:var(--lime);opacity:.6;box-shadow:0 0 12px rgba(217,239,125,.8)}
.orbit-one{width:560px;height:560px;right:-10px;top:-15px;animation:orbit-spin 46s linear infinite}
.orbit-two{width:390px;height:390px;right:80px;top:70px;animation:orbit-spin-back 34s linear infinite}
.orbit-two::before{opacity:.35;width:5px;height:5px}
.app-window{position:absolute;width:690px;right:-95px;top:35px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:#f9fbf8;box-shadow:0 45px 100px rgba(0,0,0,.4);overflow:hidden;transform:rotateY(-5deg) rotateX(1deg);transform-origin:center;animation:stage-in .9s var(--ease) both}
.app-chrome{height:44px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#fff;border-bottom:1px solid #e4e9e4;color:#8b958e}
.app-chrome>span{width:7px;height:7px;border-radius:50%;background:#d8ded9}.app-chrome>span:nth-child(1){background:#ef887c}.app-chrome>span:nth-child(2){background:#efc16f}.app-chrome>span:nth-child(3){background:#79c79d}
.app-chrome b{margin:auto;font-size:9px;font-weight:650;color:#8b958e}.app-chrome i{width:24px;height:24px;display:grid;place-content:center;border-radius:50%;background:var(--forest);color:#fff;font-size:7px;font-style:normal}
.app-layout{min-height:405px;display:grid;grid-template-columns:58px 1fr;background:#f3f6f1}
.app-layout aside{display:flex;flex-direction:column;align-items:center;gap:22px;padding:16px 0;background:var(--forest)}
.mini-logo .brand-mark{width:22px;height:22px}.mini-logo .brand-mark i{width:7px;height:22px;left:7px}.mini-logo .brand-mark b{width:22px;height:7px;top:7px}
.app-layout aside em{width:22px;height:5px;background:rgba(255,255,255,.18);border-radius:5px;position:relative}.app-layout aside em.active{background:var(--lime)}
.dashboard{padding:24px 27px;color:var(--ink)}
.dash-head{display:flex;justify-content:space-between;align-items:start}.dash-head small{display:block;color:#87928a;font-size:7px;font-weight:800;letter-spacing:.12em}.dash-head strong{display:block;font:700 21px var(--ui);margin-top:2px}.dash-head button{width:28px;height:28px;border:1px solid #dce3dc;border-radius:8px;background:#fff;color:#96a097}
.metric-row{display:grid;grid-template-columns:1.15fr 1.15fr .8fr;gap:10px;margin-top:20px}.metric-row article{padding:14px;background:#fff;border:1px solid #e4e9e4;border-radius:10px}.metric-row small{display:block;font-size:6px;font-weight:800;color:#8c968f;letter-spacing:.1em}.metric-row strong{display:block;margin:6px 0 2px;font:700 16px var(--ui)}.metric-row span{font-size:7px;color:#849188}.metric-row span.up{color:var(--green)}
.dash-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:10px;margin-top:10px}.dash-grid article{padding:15px;background:#fff;border:1px solid #e4e9e4;border-radius:10px}.card-title{display:flex;justify-content:space-between;align-items:center;font-size:8px}.card-title span{font-weight:750;color:var(--green)}
/* Bar heights live here, not in the template: style-src 'self' blocks inline
   style attributes, so an inline --h would silently never apply. */
.bars{height:102px;display:flex;align-items:end;gap:11px;padding:13px 4px 0;border-bottom:1px solid #e5eae5;background:repeating-linear-gradient(to top,transparent 0,transparent 31px,#eef1ee 31px,#eef1ee 32px)}
.bars i{width:18px;height:var(--h,50%);border-radius:3px 3px 0 0;background:#b8d8c9;transform-origin:bottom;animation:bar-grow .9s var(--ease) backwards}
.bars i:nth-child(1){--h:42%;animation-delay:.5s}
.bars i:nth-child(2){--h:58%;animation-delay:.58s}
.bars i:nth-child(3){--h:48%;animation-delay:.66s}
.bars i:nth-child(4){--h:72%;animation-delay:.74s}
.bars i:nth-child(5){--h:66%;animation-delay:.82s}
.bars i:nth-child(6){--h:88%;animation-delay:.9s}
.bars i.today{--h:78%;background:var(--green);animation-delay:.98s}
.days{display:flex;justify-content:space-around;color:#9aa39d;font-size:6px;margin-top:5px}
.alerts-card ul{list-style:none;padding:0;margin:12px 0 0}.alerts-card li{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid #eff2ef}.alerts-card li b{width:26px;height:26px;display:grid;place-content:center;border-radius:7px;font-size:8px}.alerts-card b.amber{background:#fff0d5;color:#9a6415}.alerts-card b.red{background:#f8dfdc;color:#a53f38}.alerts-card b.green{background:#dff4e9;color:#0b6e54}.alerts-card li span{font-size:7px;font-weight:700}.alerts-card li small{display:block;color:#9aa39d;font-weight:400}
.float-card{position:absolute;display:flex;align-items:center;gap:10px;padding:11px 14px;background:#fff;color:var(--ink);border:1px solid #e3e8e3;border-radius:12px;box-shadow:0 18px 45px rgba(0,0,0,.24)}
.float-card>span{width:29px;height:29px;display:grid;place-content:center;border-radius:8px;background:var(--mint);color:var(--green);font-weight:800}.float-card small{display:block;font-size:6px;color:#89958d;letter-spacing:.12em;font-weight:800}.float-card strong{display:block;font-size:9px;margin-top:1px}
.float-stock{left:0;top:0;animation:pop .7s var(--ease) .7s backwards,float 4.5s ease-in-out .7s infinite}
.float-sale{right:-18px;bottom:23px;animation:pop .7s var(--ease) 1s backwards,float 4.5s ease-in-out -1.3s infinite}
.float-sale>span{background:var(--lime);color:var(--forest)}

.trust-strip{background:#fff;border-bottom:1px solid var(--line)}
.trust-grid{min-height:104px;display:grid;grid-template-columns:repeat(4,1fr)}
.trust-grid>div{display:flex;align-items:center;justify-content:center;gap:12px;padding:20px;border-left:1px solid var(--line);transition:background .3s}.trust-grid>div:last-child{border-right:1px solid var(--line)}.trust-grid>div:hover{background:#fbfdf9}
.trust-icon{width:38px;height:38px;display:grid;place-content:center;border-radius:50%;background:linear-gradient(160deg,var(--mint),#d2ecdd);color:var(--green);font-size:20px;transition:scale .3s var(--ease)}
.trust-grid>div:hover .trust-icon{scale:1.12}
.trust-grid p{margin:0;line-height:1.35}.trust-grid strong{display:block;font-size:12px}.trust-grid small{color:var(--muted);font-size:10px}

.section{padding:112px 0}
.section-heading h2,.price-copy h2,.expectation-grid h2,.faq-title h2{margin:15px 0 0;font:600 clamp(34px,4.2vw,54px)/1.1 var(--display);letter-spacing:-.02em}
.split-heading{display:grid;grid-template-columns:1.15fr .75fr;gap:80px;align-items:end;margin-bottom:50px}.split-heading p{margin:0 0 6px;color:var(--muted);font-size:17px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-card{min-height:390px;position:relative;padding:31px;border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft);border-color:#cfd8cd}
.feature-card.featured{background:linear-gradient(165deg,#0a4237,var(--forest) 70%);color:#fff;border-color:var(--forest)}
.feature-no{position:absolute;right:24px;top:19px;color:#a9b3ac;font:700 12px var(--display)}.featured .feature-no{color:rgba(255,255,255,.4)}
.feature-art{height:125px;margin:15px 0 29px;position:relative;transition:translate .35s var(--ease)}
.feature-card:hover .feature-art{translate:0 -4px}
.feature-card h3{margin:0 0 12px;font:600 22px/1.22 var(--display);letter-spacing:-.012em}
.feature-card p{margin:0;color:var(--muted);font-size:14px}.featured p{color:rgba(255,255,255,.68)}
.feature-card ul{display:flex;gap:15px;list-style:none;margin:16px 0 0;padding:0;color:var(--lime);font-size:10px;font-weight:750}.feature-card li::before{content:"✓";margin-right:5px}
.stock-art{display:flex;align-items:end;justify-content:center;gap:9px}.stock-art i{width:45px;border:2px solid rgba(255,255,255,.28);border-radius:8px 8px 4px 4px;background:linear-gradient(#9dd6be 20%,#257f65 20%,#257f65 28%,#ecf4e8 28%);height:74px}.stock-art i:nth-child(2){height:102px;background:linear-gradient(#d7ef78 18%,#6d8a28 18%,#6d8a28 26%,#fff 26%)}.stock-art i:nth-child(3){height:86px;background:linear-gradient(#f0cfa5 20%,#aa7241 20%,#aa7241 28%,#fff 28%)}.stock-art b{position:absolute;width:220px;height:8px;background:rgba(255,255,255,.2);bottom:8px;border-radius:3px}
.counter-art{display:grid;place-content:center}.counter-art i{width:160px;height:82px;border:2px solid #cee2d8;border-radius:10px;background:#f5faf7;box-shadow:0 12px 0 -5px #c8d7cf}.counter-art i::before{content:"TSh 18,500";display:block;margin:20px;text-align:center;color:var(--green);font:700 14px var(--ui)}.counter-art b{position:absolute;width:58px;height:18px;left:calc(50% - 29px);bottom:20px;background:var(--mint-2);border-radius:5px}.counter-art em{position:absolute;width:32px;height:32px;right:25%;top:15px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 7px #eef8dd}.counter-art em::after{content:"✓";display:grid;place-content:center;height:100%;font-style:normal;font-weight:800;color:var(--forest)}
.report-art{display:flex;align-items:end;justify-content:center;gap:9px}.report-art i{width:28px;height:45%;background:#bde1d2;border-radius:4px 4px 0 0}.report-art i:nth-child(2){height:72%;background:#67b99b}.report-art i:nth-child(3){height:92%;background:var(--green)}.report-art b{position:absolute;left:20%;right:20%;bottom:8px;border-bottom:2px solid #cbd7d0}
.team-art{display:flex;justify-content:center;align-items:center}.team-art i{width:62px;height:62px;display:grid;place-content:center;margin-left:-10px;border:5px solid #fff;border-radius:50%;font-style:normal;font-weight:800;font-size:11px;background:#d8ebdd;color:#2c6646}.team-art i:nth-child(2){background:#f4dec6;color:#79502b;transform:translateY(-12px)}.team-art i:nth-child(3){background:#dbd9ed;color:#4f4a76}
.supplier-art{display:grid;place-content:center}.supplier-art i{width:148px;height:76px;border:2px solid #cee0d6;border-radius:10px;background:repeating-linear-gradient(to bottom,#fff 0,#fff 17px,#e8eeea 18px)}.supplier-art b{position:absolute;width:42px;height:48px;left:28%;bottom:9px;background:#bfe3d3;border-radius:5px}.supplier-art em{position:absolute;width:35px;height:35px;right:26%;top:15px;border:7px solid var(--green);border-left-color:transparent;border-radius:50%}
.shield-art{display:grid;place-content:center}.shield-art i{width:91px;height:105px;background:var(--mint);clip-path:polygon(50% 0,93% 15%,88% 72%,50% 100%,12% 72%,7% 15%)}.shield-art b{position:absolute;inset:0;display:grid;place-content:center;color:var(--green);font-size:29px}

.role-section{background:linear-gradient(172deg,#07352c,var(--forest) 58%,#052721);color:#fff;position:relative;overflow:hidden}
.role-section::before{content:"";position:absolute;width:650px;height:650px;border:1px solid rgba(215,239,120,.09);border-radius:50%;right:-100px;bottom:-330px}
.role-section::after{content:"";position:absolute;inset:0;opacity:.045;background-image:var(--grain);background-size:160px;pointer-events:none}
.roles-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:90px;align-items:center;position:relative;z-index:1}
.role-copy h2{margin:18px 0 22px;font:600 clamp(34px,4vw,52px)/1.1 var(--display);letter-spacing:-.02em}
.role-copy>p{color:rgba(255,255,255,.65)}
.role-list{margin-top:34px;display:grid;gap:8px}
.role-list article{display:flex;align-items:center;gap:14px;padding:13px 15px;border:1px solid transparent;border-radius:12px;color:rgba(255,255,255,.55);transition:background .3s,border-color .3s,color .3s}
.role-list article:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.85)}
.role-list article.selected{background:rgba(255,255,255,.07);border-color:rgba(215,239,120,.22);color:#fff}
.role-list article>span{width:38px;height:38px;display:grid;place-content:center;border-radius:50%;background:rgba(255,255,255,.1);font-size:9px;font-weight:800;flex:none}
.role-list .selected>span{background:var(--lime);color:var(--forest)}
.role-list strong,.role-list small{display:block}.role-list small{font-size:11px;color:inherit}
.owner-screen{border:1px solid rgba(255,255,255,.17);border-radius:20px;background:#f6f8f4;color:var(--ink);box-shadow:0 40px 90px rgba(0,0,0,.34);overflow:hidden;transform:rotate(1.5deg);transition:transform .5s var(--ease)}
.owner-screen:hover{transform:rotate(.4deg)}
.owner-top{height:55px;display:flex;align-items:center;padding:0 22px;background:#fff;border-bottom:1px solid #e1e6e1}.owner-top>span{font:700 18px var(--display);color:var(--forest)}.owner-top small{margin:auto;color:#839087}.owner-top b{width:30px;height:30px;display:grid;place-content:center;border-radius:50%;background:var(--forest);color:#fff;font-size:8px}
.owner-content{padding:35px}.owner-content>small{color:var(--green);font-size:8px;font-weight:800;letter-spacing:.15em}.owner-content h3{margin:3px 0 22px;font:700 28px var(--ui)}
.owner-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}.owner-kpis article{padding:20px;background:#fff;border:1px solid #e1e6e1;border-radius:12px}.owner-kpis span,.owner-kpis strong,.owner-kpis i{display:block}.owner-kpis span{font-size:9px;color:#879188}.owner-kpis strong{font:700 21px var(--ui);margin:4px 0}.owner-kpis i{font-size:8px;color:var(--green);font-style:normal}
.owner-table{margin-top:12px;background:#fff;border:1px solid #e1e6e1;border-radius:12px;overflow:hidden}.owner-table>div{display:grid;grid-template-columns:1.2fr 1fr .7fr;padding:12px 16px;border-top:1px solid #edf0ed;font-size:9px}.owner-table>div:first-child{border:0;background:#f8faf8;color:#839087;font-size:7px}.owner-table em{justify-self:start;padding:2px 8px;border-radius:10px;background:var(--mint);color:var(--green);font-style:normal;font-size:7px;font-weight:750}

.section-heading.centered{text-align:center;max-width:740px;margin:0 auto 60px}.section-heading.centered .eyebrow{justify-content:center}.section-heading.centered p{color:var(--muted);font-size:17px}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:0;margin:0;list-style:none;counter-reset:none}
.steps-grid li{position:relative;padding:0 28px;text-align:center;border-right:1px solid var(--line)}.steps-grid li:last-child{border:0}
.steps-grid li>span{position:absolute;top:0;left:20px;color:#a9b3ac;font:700 11px var(--display)}
.step-icon{height:100px;position:relative;margin:0 auto 25px;transition:translate .35s var(--ease)}
.steps-grid li:hover .step-icon{translate:0 -5px}
.account-icon i{position:absolute;width:46px;height:46px;border-radius:50%;background:var(--mint);top:6px;left:calc(50% - 23px)}.account-icon b{position:absolute;width:76px;height:38px;border-radius:38px 38px 10px 10px;background:#b4ddcb;bottom:8px;left:calc(50% - 38px)}
.pay-icon{display:grid;place-content:center}.pay-icon i{width:112px;height:67px;border-radius:11px;background:var(--forest);transform:rotate(-5deg);box-shadow:8px 8px 0 var(--mint-2)}.pay-icon i::after{content:"TZS";display:block;margin:15px;color:var(--lime);font:700 13px var(--ui)}.pay-icon b{position:absolute;width:22px;height:22px;right:28%;top:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px #fff}
.shop-icon{display:grid;place-content:center}.shop-icon i{width:110px;height:65px;background:#c9e7da;border-radius:4px;position:relative}.shop-icon b{position:absolute;width:122px;height:24px;top:10px;left:calc(50% - 61px);background:repeating-linear-gradient(90deg,var(--green) 0,var(--green) 19px,var(--lime) 19px,var(--lime) 38px);clip-path:polygon(0 0,100% 0,94% 100%,6% 100%)}.shop-icon em{position:absolute;width:22px;height:38px;background:#fff;bottom:17px;left:calc(50% - 11px)}
.go-icon{display:grid;place-content:center}.go-icon i{width:75px;height:75px;display:grid;place-content:center;border-radius:50%;background:var(--green);color:#fff;font-style:normal;font-size:30px;box-shadow:0 0 0 12px var(--mint)}
.steps-grid h3{margin:0 0 10px;font:600 19px var(--display);letter-spacing:-.01em}
.steps-grid p{margin:0;color:var(--muted);font-size:13px}

.pricing-section{background:linear-gradient(180deg,var(--paper) 0,var(--paper-warm) 18%,var(--paper-warm))}
.pricing-layout{display:grid;grid-template-columns:1fr .85fr;gap:110px;align-items:center}
.price-copy>p{color:var(--muted);font-size:17px}
.expect-note{display:flex;gap:15px;margin-top:35px;padding:18px;border-top:1px solid #d5dbd3;border-bottom:1px solid #d5dbd3}
.expect-note>span{width:31px;height:31px;display:grid;place-content:center;flex:none;border:1px solid var(--green);border-radius:50%;color:var(--green);font-weight:800}
.expect-note p{margin:0;color:var(--muted);font-size:12px}.expect-note strong{display:block;color:var(--ink);font-size:13px}
.price-card{position:relative;padding:46px;border-radius:26px;border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(165deg,#e7ecdf,#c9dfd2 60%,#dbe8d9) border-box;box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s}
.price-card:hover{transform:translateY(-5px);box-shadow:0 38px 90px rgba(4,45,36,.19)}
.popular{position:absolute;left:46px;top:-14px;padding:7px 13px;border-radius:999px;background:var(--lime);color:var(--forest);font-size:9px;font-weight:800;letter-spacing:.1em;box-shadow:0 6px 16px rgba(4,45,36,.14)}
.price{display:flex;align-items:baseline;gap:8px}
.price sup{font-size:12px;font-weight:800;color:var(--green)}
.price strong{font:560 clamp(44px,5vw,66px)/1 var(--display);letter-spacing:-.03em}
.price span{color:var(--muted);font-size:12px}
.price-card>p{color:var(--muted);font-size:13px}
.price-terms{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:1px;border-radius:14px;overflow:hidden;background:var(--line)}.price-terms li{display:flex;align-items:baseline;gap:8px;padding:11px 14px;background:#fff;font-size:13px}.price-terms li span{color:var(--muted);flex:1}.price-terms li b{font-weight:700}.price-terms li em{font-style:normal;font-size:10px;font-weight:700;color:var(--green);background:var(--mint);border-radius:999px;padding:3px 8px}
.price-card>ul{list-style:none;padding:22px 0;margin:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:12px}
.price-card li{font-size:13px;font-weight:600}
.price-card li span{display:inline-grid;place-content:center;width:20px;height:20px;margin-right:10px;border-radius:50%;background:var(--mint);color:var(--green);font-size:10px}
.price-card>small{display:block;text-align:center;margin-top:11px;color:var(--muted);font-size:10px}

.expectation-section{background:linear-gradient(168deg,#07342b,var(--forest) 60%,#05271f);color:#fff;position:relative;overflow:hidden}
.expectation-section::after{content:"";position:absolute;inset:0;opacity:.04;background-image:var(--grain);background-size:160px;pointer-events:none}
.expectation-grid{display:grid;grid-template-columns:.85fr 1fr;gap:110px;position:relative;z-index:1}
.expectation-grid h2{font-size:clamp(34px,3.6vw,46px)}
.expectation-grid ul{list-style:none;margin:0;padding:0}
.expectation-grid li{display:flex;gap:20px;padding:23px 0;border-top:1px solid var(--line-dark)}
.expectation-grid li:last-child{border-bottom:1px solid var(--line-dark)}
.expectation-grid li>span{color:var(--lime);font:700 11px var(--display)}
.expectation-grid p{margin:0;color:rgba(255,255,255,.6);font-size:13px}
.expectation-grid strong{display:block;color:#fff;font:600 18px var(--display);margin-bottom:5px;letter-spacing:-.01em}

.faq-layout{display:grid;grid-template-columns:.65fr 1fr;gap:100px}
.faq-title{position:sticky;top:120px;align-self:start}
.faq-title p{color:var(--muted)}.faq-title a{color:var(--green);font-weight:700}
.faq-list details{border-top:1px solid var(--line);padding:23px 0}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;font:600 18px/1.4 var(--display);letter-spacing:-.008em;transition:color .25s}
.faq-list summary:hover{color:var(--green)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{color:var(--green);font-size:22px;flex:none;transition:transform .3s var(--ease)}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list details p{margin:13px 50px 0 0;color:var(--muted);font-size:14px}

.final-cta{padding:58px 0;background:linear-gradient(120deg,#0e8064,var(--green) 55%,#0a6b53);color:#fff;position:relative;overflow:hidden}
.final-cta::after{content:"";position:absolute;inset:0;opacity:.05;background-image:var(--grain);background-size:160px;pointer-events:none}
.final-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:1}
.final-inner>div{display:flex;align-items:center;gap:25px}
.cta-cross{width:55px;height:55px;position:relative;display:block;transition:transform .5s var(--ease)}
.final-inner:hover .cta-cross{transform:rotate(90deg)}
.cta-cross i,.cta-cross b{position:absolute;background:var(--lime);border-radius:7px}
.cta-cross i{width:18px;height:55px;left:18px}.cta-cross b{width:55px;height:18px;top:18px}
.final-inner h2{margin:0;font:600 32px var(--display);letter-spacing:-.015em}
.final-inner p{margin:3px 0 0;color:rgba(255,255,255,.72)}

.public-footer{padding:70px 0 25px;background:var(--forest-deep);color:#fff;border-top:1px solid rgba(217,239,125,.14)}
.footer-grid{display:grid;grid-template-columns:1.7fr .7fr .7fr;gap:80px}
.footer-brand{margin-bottom:17px}
.footer-grid p{max-width:340px;color:rgba(255,255,255,.5);font-size:13px}
.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:9px}
.footer-grid strong{font:600 14px var(--display);margin-bottom:8px;letter-spacing:.01em}
.footer-grid a:not(.public-brand){color:rgba(255,255,255,.53);font-size:12px;text-decoration:none;transition:color .25s;width:fit-content}
.footer-grid a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;margin-top:55px;padding-top:19px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.35);font-size:10px}

/* Shared account and commercial pages */
.account-page,.portal-page,.checkout-page,.onboarding-page,.legal-page,.admin-page{background:#f4f3ec}
.account-section{min-height:780px;padding:135px 0 80px;background:linear-gradient(115deg,var(--forest) 0,var(--forest) 46%,#f4f3ec 46%,#f4f3ec 100%)}
.account-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:center}
.account-aside{color:#fff;padding-right:20px}
.account-aside,.login-message,.checkout-copy{animation:rise .8s var(--ease) both}
.account-aside h1,.login-message h1{margin:18px 0;font:590 clamp(38px,4.2vw,56px)/1.08 var(--display);letter-spacing:-.02em}
.account-aside>p,.login-message>p{color:rgba(255,255,255,.65)}
.account-benefits{list-style:none;padding:0;margin:25px 0;display:grid;gap:10px}
.account-benefits li{font-size:13px}
.account-benefits span{display:inline-grid;place-content:center;width:21px;height:21px;margin-right:9px;border-radius:50%;background:rgba(215,239,120,.14);color:var(--lime)}
.aside-price{display:flex;align-items:baseline;gap:8px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.aside-price small{position:absolute;margin-top:-15px;color:var(--lime);font-size:8px;letter-spacing:.12em}
.aside-price strong{font:600 31px var(--display);letter-spacing:-.02em}
.aside-price span{color:rgba(255,255,255,.5);font-size:11px}
.account-card{padding:44px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);animation:rise .8s var(--ease) .12s both}
.form-heading{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.form-step{width:41px;height:41px;display:grid;place-content:center;border-radius:50%;background:var(--forest);color:var(--lime);font:800 16px var(--display)}
.form-heading h2,.login-card h2{margin:0;font:600 28px var(--display);letter-spacing:-.015em}
.form-heading p,.login-card>p{margin:2px 0 0;color:var(--muted);font-size:12px}
.public-form{display:grid;gap:18px}
.public-form label>span{display:block;margin-bottom:6px;font-size:11px;font-weight:750;color:var(--ink)}
.public-form label>span em{color:#9aa59e;font-style:normal;font-weight:500}
.public-form input:not([type=checkbox]){width:100%;height:49px;padding:0 14px;border:1px solid #cfd8d1;border-radius:10px;background:#fbfcfa;color:var(--ink);outline:0;transition:border .2s,box-shadow .2s,background .2s}
.public-form input:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 3px rgba(13,122,95,.13)}
.public-form input::placeholder{color:#a8b1aa}
.public-form label>small,.form-hint{display:block;margin:5px 0 0;color:var(--muted);font-size:10px}
.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.check-field{display:flex;align-items:start;gap:10px}
.check-field input{width:18px;height:18px;accent-color:var(--green);margin-top:2px}
.check-field>span{margin:0!important;color:var(--muted)!important;font-weight:500!important}
.check-field a{color:var(--green);font-weight:700}
.form-foot{text-align:center;color:var(--muted);font-size:12px}.form-foot a{color:var(--green);font-weight:750}
.public-alert{padding:13px 15px;margin:0 0 18px;border:1px solid #b4d8c8;border-radius:10px;background:#e9f6f0;color:#0b664d;font-size:12px}
.public-alert.bad{background:#fff0ee;border-color:#efbbb5;color:#992d27}
.public-alert.warn{background:#fff7e7;border-color:#ebd199;color:#80520b}
.flash-stack{padding-top:95px}.flash-stack+.portal-content{padding-top:30px}

.compact-account{min-height:720px}
.login-layout{display:grid;grid-template-columns:1fr 470px;gap:130px;align-items:center}
.login-message{color:#fff}
.login-flow{display:flex;align-items:center;gap:10px;margin-top:28px}
.login-flow span{padding:7px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff;font-size:10px}
.login-flow i{color:var(--lime);font-style:normal}
.login-card{padding:47px}
.staff-login-link{display:flex;gap:12px;margin-top:25px;padding-top:20px;border-top:1px solid var(--line)}
.staff-login-link>span{width:33px;height:33px;display:grid;place-content:center;border-radius:50%;background:var(--mint);color:var(--green)}
.staff-login-link p{margin:0}
.staff-login-link strong,.staff-login-link a{display:block;font-size:11px}
.staff-login-link a{color:var(--green);font-weight:700;text-decoration:none}

.portal-hero{padding:135px 0 55px;background:linear-gradient(176deg,#07332a,var(--forest));color:#fff}
.portal-title{display:flex;align-items:end;justify-content:space-between;gap:30px}
.portal-title h1{margin:13px 0 3px;font:590 46px var(--display);letter-spacing:-.02em}
.portal-title p{margin:0;color:rgba(255,255,255,.6)}
.outline-light{min-height:43px;padding:9px 16px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:transparent;color:#fff;font-weight:700;cursor:pointer;transition:background .25s,border-color .25s}
.outline-light:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)}
.portal-content{padding:65px 0 100px}
.portal-grid{display:grid;grid-template-columns:1fr 320px;gap:32px}
.portal-section-head small{font-size:9px;color:var(--green);font-weight:800;letter-spacing:.13em}
.portal-section-head h2{margin:2px 0 22px;font:600 28px var(--display);letter-spacing:-.012em}
.empty-panel{padding:60px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:20px}
.empty-cross,.pharmacy-symbol{width:58px;height:58px;display:inline-block;position:relative;border-radius:15px;background:var(--mint)}
.empty-cross i,.empty-cross b,.pharmacy-symbol i,.pharmacy-symbol b{position:absolute;background:var(--green);border-radius:4px}
.empty-cross i,.pharmacy-symbol i{width:12px;height:36px;left:23px;top:11px}
.empty-cross b,.pharmacy-symbol b{width:36px;height:12px;left:11px;top:23px}
.empty-panel h3{font:600 22px var(--display);margin:18px 0 7px}
.empty-panel p{color:var(--muted);font-size:13px}
.pharmacy-list{display:grid;gap:17px}
.pharmacy-card{padding:27px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-soft);transition:transform .3s var(--ease),box-shadow .3s}
.pharmacy-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pharmacy-card-top{display:flex;align-items:center;gap:15px}
.pharmacy-symbol{width:51px;height:51px}
.pharmacy-symbol i{width:11px;height:31px;left:20px;top:10px}
.pharmacy-symbol b{width:31px;height:11px;left:10px;top:20px}
.pharmacy-card-top small{font-size:8px;font-weight:800;color:var(--green);letter-spacing:.13em}
.pharmacy-card h3{margin:0;font:600 22px var(--display);letter-spacing:-.012em}
.pharmacy-card p{margin:1px 0;color:var(--muted);font-size:11px}
.grow{flex:1;min-width:0}
.status-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:#edf0ed;color:#59665e;font-size:8px;font-weight:800;letter-spacing:.05em}
.status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status-pill.active,.status-pill.paid{background:var(--mint);color:var(--green)}
.status-pill.grace,.status-pill.pending_review{background:#fff1d7;color:#996315}
.status-pill.pending{background:#e9eef8;color:#47658e}
.status-pill.suspended,.status-pill.cancelled{background:#f9e2df;color:#a23c35}
.subscription-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0;padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.subscription-meta small,.subscription-meta strong{display:block}
.subscription-meta small{font-size:8px;color:#8a958d;font-weight:800;letter-spacing:.1em}
.subscription-meta strong{font-size:12px}
.pharmacy-actions{display:flex;gap:10px}
.pharmacy-actions form{margin:0}
.secondary-btn{min-height:45px;display:inline-flex;align-items:center;justify-content:center;padding:10px 17px;border:1px solid #cfd8d1;border-radius:11px;background:#fff;color:var(--ink);font-weight:750;text-decoration:none;cursor:pointer;transition:background .25s,border-color .25s}
.secondary-btn:hover{background:#f3f6f2;border-color:#b9c6bc}
.portal-side{display:grid;gap:16px;align-content:start}
.side-card{padding:23px;background:#fff;border:1px solid var(--line);border-radius:17px}
.account-summary{text-align:center}
.account-avatar{width:55px;height:55px;display:grid;place-content:center;margin:0 auto 12px;border-radius:50%;background:var(--forest);color:var(--lime);font:700 19px var(--display)}
.account-summary h3{margin:0;font:600 18px var(--display)}
.account-summary p{margin:3px;color:var(--muted);font-size:10px}
.side-head h3{margin:0 0 14px;font:600 16px var(--display)}
.order-list{list-style:none;margin:0;padding:0}
.order-list li{border-top:1px solid var(--line)}
.order-list a{display:flex;align-items:center;justify-content:space-between;padding:11px 0;text-decoration:none}
.order-list a:hover strong{color:var(--green)}
.order-list strong,.order-list small{display:block}
.order-list strong{font-size:11px;transition:color .2s}
.order-list small{color:var(--muted);font-size:8px}
.status-text{font-size:8px;font-style:normal;font-weight:800;color:#8b958e}
.status-text.paid{color:var(--green)}
.status-text.pending_review{color:#9a6415}
.muted-copy{color:var(--muted);font-size:11px}
.support-card{display:flex;gap:12px;padding:20px;border-radius:17px;background:linear-gradient(160deg,#0a4237,var(--forest));color:#fff}
.support-card>span{width:31px;height:31px;display:grid;place-content:center;flex:none;border-radius:50%;background:var(--lime);color:var(--forest);font-weight:800}
.support-card strong{font:600 14px var(--display)}
.support-card p{margin:2px 0;color:rgba(255,255,255,.55);font-size:10px}
.support-card a{color:var(--lime);font-size:10px}

.checkout-section{min-height:790px;padding:145px 0 90px;background:linear-gradient(110deg,var(--forest) 0,var(--forest) 52%,#efeee6 52%)}
.checkout-layout{display:grid;grid-template-columns:1fr 500px;gap:120px;align-items:center}
.checkout-copy{color:#fff}
.checkout-copy h1{font:590 clamp(40px,4.6vw,53px)/1.06 var(--display);letter-spacing:-.02em}
.checkout-copy>p{color:rgba(255,255,255,.62)}
.secure-note{display:flex;gap:13px;margin-top:30px;padding-top:21px;border-top:1px solid rgba(255,255,255,.14)}
.secure-note>span{width:35px;height:35px;display:grid;place-content:center;flex:none;border-radius:50%;background:rgba(215,239,120,.12);color:var(--lime)}
.secure-note p{margin:0;color:rgba(255,255,255,.55);font-size:11px}
.secure-note strong{display:block;color:#fff;font-size:12px}
.checkout-card{padding:38px 42px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);animation:rise .8s var(--ease) .12s both}
.checkout-status{display:flex;align-items:center;justify-content:space-between}
.checkout-status>small{color:var(--muted);font:9px ui-monospace,monospace}
.checkout-card h2{margin:24px 0 6px;font:600 24px var(--display);letter-spacing:-.012em}
.checkout-price{display:flex;align-items:baseline;gap:7px}
.checkout-price>span{font-size:11px;font-weight:800;color:var(--green)}
.checkout-price strong{font:560 49px var(--display);letter-spacing:-.03em}
.checkout-price small{color:var(--muted);font-size:10px}
.checkout-summary{list-style:none;margin:23px 0;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.checkout-summary li{display:flex;justify-content:space-between;padding:5px 0;font-size:11px}
.checkout-summary span{color:var(--muted)}
.pay-button{margin-top:3px}
.mobile-money-mark{padding:3px 6px;border-radius:5px;background:rgba(255,255,255,.16);font-size:8px}
.gateway-copy{text-align:center;color:var(--muted);font-size:9px}
.or-divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:#929d95;font-size:7px;font-weight:800;letter-spacing:.11em}
.or-divider::before,.or-divider::after{content:"";height:1px;flex:1;background:var(--line)}
.reference-form label>span{display:block;margin-bottom:5px;font-size:10px;font-weight:700}
.reference-form label>div{display:flex}
.reference-form input{min-width:0;flex:1;height:43px;padding:0 12px;border:1px solid #cfd7d1;border-right:0;border-radius:9px 0 0 9px;outline:0;transition:border-color .2s}
.reference-form input:focus{border-color:var(--green)}
.reference-form button{padding:0 15px;border:0;border-radius:0 9px 9px 0;background:var(--forest);color:#fff;font-weight:750;cursor:pointer;transition:background .25s}
.reference-form button:hover{background:var(--forest-2)}
.checkout-foot{text-align:center;color:#8f9a92;font-size:8px}
.paid-panel,.review-panel{display:flex;gap:12px;margin:20px 0;padding:15px;border-radius:12px;background:var(--mint);color:var(--green)}
.review-panel{background:#fff3db;color:#8a590e}
.paid-panel>span,.review-panel>span{width:31px;height:31px;display:grid;place-content:center;flex:none;border-radius:50%;background:#fff;font-weight:800}
.paid-panel strong,.review-panel strong{display:block;font-size:12px}
.paid-panel p,.review-panel p{margin:2px 0;font-size:10px;color:var(--ink-soft)}

.onboarding-head{padding:130px 0 50px;background:linear-gradient(176deg,#07332a,var(--forest));color:#fff}
.onboarding-head h1{margin:13px 0 4px;font:590 45px var(--display);letter-spacing:-.02em}
.onboarding-head p{margin:0;color:rgba(255,255,255,.6)}
.progress-line{width:370px;display:grid;grid-template-columns:30px 1fr 30px 1fr 30px;align-items:center;position:relative;margin-top:32px}
.progress-line span{width:28px;height:28px;display:grid;place-content:center;border-radius:50%;background:rgba(255,255,255,.12);font-size:10px;font-weight:800}
.progress-line span.done{background:var(--green-bright)}
.progress-line span.active{background:var(--lime);color:var(--forest)}
.progress-line i{height:2px;background:var(--green-bright)}
.progress-line label{position:absolute;top:34px;color:rgba(255,255,255,.5);font-size:8px}
.progress-line label:nth-of-type(1){left:0}
.progress-line label:nth-of-type(2){left:166px}
.progress-line label:nth-of-type(3){right:-8px}
.onboarding-content{padding:55px 0 100px}
.onboarding-layout{display:grid;grid-template-columns:270px 1fr;gap:32px;align-items:start}
.onboarding-guide{position:sticky;top:25px}
.onboarding-guide>strong{font:600 19px var(--display)}
.onboarding-guide ol{list-style:none;padding:0;margin:20px 0}
.onboarding-guide li{display:flex;gap:11px;padding:14px 0;color:#8a958e}
.onboarding-guide li>span{width:28px;height:28px;display:grid;place-content:center;flex:none;border:1px solid #cbd5cd;border-radius:50%;font-size:9px;font-weight:800}
.onboarding-guide li.active{color:var(--ink)}
.onboarding-guide li.active>span{background:var(--green);border-color:var(--green);color:#fff}
.onboarding-guide b,.onboarding-guide small{display:block}
.onboarding-guide b{font-size:12px}
.onboarding-guide small{font-size:9px}
.guide-note{display:flex;gap:10px;padding:15px;border-radius:12px;background:#fff4dc;color:#7e5312}
.guide-note>span{font-weight:800}
.guide-note p{margin:0;font-size:9px}
.onboarding-form-card{padding:39px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-soft);animation:rise .8s var(--ease) both}
.onboarding-form fieldset{padding:0 0 32px;margin:0 0 32px;border:0;border-bottom:1px solid var(--line)}
.onboarding-form legend{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.onboarding-form legend>span{width:35px;height:35px;display:grid;place-content:center;border-radius:50%;background:var(--mint);color:var(--green);font:800 10px var(--display)}
.onboarding-form legend strong,.onboarding-form legend small{display:block}
.onboarding-form legend strong{font:600 18px var(--display)}
.onboarding-form legend small{color:var(--muted);font-size:9px}
.create-confirm{display:flex;align-items:center;justify-content:space-between;gap:30px}
.create-confirm p{max-width:520px;margin:0;color:var(--muted);font-size:10px}
.create-confirm strong{display:block;color:var(--ink);font-size:11px}

.legal-hero{padding:140px 0 65px;background:linear-gradient(176deg,#07332a,var(--forest));color:#fff}
.legal-hero h1{margin:14px 0 3px;font:590 clamp(40px,4.6vw,51px) var(--display);letter-spacing:-.02em}
.legal-hero p{color:rgba(255,255,255,.5)}
.legal-content{padding:70px 0 110px}
.legal-layout{display:grid;grid-template-columns:220px 1fr;gap:75px;align-items:start}
.legal-layout aside{position:sticky;top:30px;display:grid;border-left:1px solid var(--line)}
.legal-layout aside a{padding:7px 0 7px 17px;color:var(--muted);font-size:11px;text-decoration:none;border-left:2px solid transparent;margin-left:-1px;transition:color .2s,border-color .2s}
.legal-layout aside a:hover{color:var(--green);border-left-color:var(--green)}
.legal-layout article{max-width:760px}
.legal-lead{font-size:20px!important;color:var(--ink)!important;line-height:1.65}
.legal-layout article h2{margin:42px 0 10px;font:600 24px var(--display);letter-spacing:-.01em}
.legal-layout article p{color:var(--muted);font-size:14px}
.legal-callout{margin-top:38px;padding:22px;border-left:4px solid var(--green);background:var(--mint);border-radius:0 12px 12px 0}
.legal-callout p{margin:4px 0 0!important;color:var(--ink-soft)!important}

.admin-login-layout{display:grid;grid-template-columns:1fr 470px;gap:130px;align-items:center}
.admin-hero{background:linear-gradient(176deg,#1b323d,#172b35)}
.admin-content{padding:55px 0 100px}
.admin-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.admin-metrics article{padding:22px;background:#fff;border:1px solid var(--line);border-radius:14px}
.admin-metrics small{display:block;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.12em}
.admin-metrics strong{display:block;margin-top:4px;font:600 30px var(--display)}
.admin-section{margin-top:40px}
.admin-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
.admin-table{width:100%;border-collapse:collapse;font-size:11px}
.admin-table th,.admin-table td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.admin-table th{background:#f6f8f5;color:var(--muted);font-size:8px;letter-spacing:.08em}
.admin-table td strong,.admin-table td small{display:block}
.admin-table td small{color:var(--muted);font-size:8px}
.admin-table code{font-size:9px}
.approve-form{display:flex;min-width:240px}
.approve-form input{min-width:0;width:150px;height:34px;padding:0 8px;border:1px solid #ccd6ce;border-radius:7px 0 0 7px}
.approve-form button{height:34px;border:0;border-radius:0 7px 7px 0;background:var(--green);color:#fff;font-size:9px;font-weight:800;cursor:pointer}
.settled{color:var(--green);font-size:9px;font-weight:800}

button:disabled,input:disabled{cursor:not-allowed;opacity:.48}
:focus-visible{outline:3px solid rgba(215,239,120,.85);outline-offset:3px}
.trust-strip :focus-visible,.section :focus-visible,.portal-content :focus-visible,.legal-content :focus-visible,.account-card :focus-visible,.checkout-card :focus-visible,.onboarding-form-card :focus-visible{outline-color:rgba(13,122,95,.6)}

@media(max-width:1060px){
  .desktop-links{display:none}.hero{min-height:auto}.hero-grid{grid-template-columns:1fr;gap:50px}.hero-copy{max-width:700px}.product-stage{min-height:490px}.app-window{right:0;left:5%;width:92%}.float-stock{left:0}.feature-grid{grid-template-columns:repeat(2,1fr)}.roles-layout{gap:45px}.pricing-layout,.expectation-grid{gap:60px}.account-layout{gap:55px}.portal-grid{grid-template-columns:1fr 285px}.checkout-layout{gap:60px}
}

@media(max-width:820px){
  .public-wrap{width:min(100% - 32px,680px)}.public-nav{height:70px}.nav-actions .nav-login,.nav-actions .public-btn,.desktop-links{display:none}.mobile-menu{display:block}.public-lang{position:absolute;left:50%;top:50%;translate:-50% -50%}.hero{padding:125px 0 70px}.hero h1{font-size:52px}.hero-grid{gap:40px}.product-stage{min-height:420px}.app-window{width:105%;left:0;right:auto;transform:scale(.88);transform-origin:left top;animation:none}.float-stock{top:-15px}.float-sale{right:-10px;bottom:0}.trust-grid{grid-template-columns:1fr 1fr}.trust-grid>div:nth-child(2){border-right:1px solid var(--line)}.section{padding:82px 0}.split-heading,.roles-layout,.pricing-layout,.expectation-grid,.faq-layout{grid-template-columns:1fr;gap:35px}.split-heading{margin-bottom:35px}.feature-grid{grid-template-columns:1fr 1fr}.feature-card{min-height:360px}.role-copy{max-width:620px}.owner-screen{transform:none}.owner-screen:hover{transform:none}.steps-grid{grid-template-columns:1fr 1fr;gap:40px 0}.steps-grid li:nth-child(2){border:0}.faq-title{position:static}.footer-grid{grid-template-columns:1.4fr .7fr .7fr;gap:35px}.account-section{padding-top:115px;background:linear-gradient(var(--forest) 0,var(--forest) 38%,#f4f3ec 38%)}.account-layout,.login-layout,.admin-login-layout{grid-template-columns:1fr;gap:45px}.account-aside,.login-message{padding-bottom:15px}.login-layout .login-message{max-width:600px}.portal-grid{grid-template-columns:1fr}.portal-side{grid-template-columns:1fr 1fr}.support-card{grid-column:1/-1}.checkout-section{background:linear-gradient(var(--forest) 0,var(--forest) 41%,#efeee6 41%)}.checkout-layout{grid-template-columns:1fr;gap:50px}.checkout-copy{max-width:650px}.onboarding-layout{grid-template-columns:1fr}.onboarding-guide{position:static}.onboarding-guide ol{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.guide-note{max-width:500px}.legal-layout{grid-template-columns:1fr}.legal-layout aside{position:static;display:flex;flex-wrap:wrap;border-left:0;border-bottom:1px solid var(--line);padding-bottom:15px}.admin-metrics{grid-template-columns:1fr 1fr}
}

@media(max-width:560px){
  .public-wrap{width:calc(100% - 28px)}.public-brand{font-size:23px}.brand-mark{transform:scale(.86)}.hero{padding-top:115px}.hero h1{font-size:42px;line-height:1.04}.hero-lead{font-size:16px}.hero-actions{align-items:stretch;flex-direction:column;gap:15px}.hero-primary{width:100%}.text-link{text-align:center}.product-stage{min-height:315px;margin-top:15px}.app-window{width:144%;transform:scale(.68);transform-origin:left top}.float-card{display:none}.trust-grid{grid-template-columns:1fr}.trust-grid>div{justify-content:flex-start;border-right:1px solid var(--line)}.section{padding:68px 0}.section-heading h2,.price-copy h2,.expectation-grid h2,.faq-title h2{font-size:33px}.split-heading{gap:20px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:355px}.roles-layout{gap:40px}.role-copy h2{font-size:33px}.owner-content{padding:21px}.owner-kpis{grid-template-columns:1fr}.owner-table>div{grid-template-columns:1fr .9fr .7fr;padding-inline:10px}.steps-grid{grid-template-columns:1fr}.steps-grid li{padding:28px 20px;border-right:0;border-bottom:1px solid var(--line)}.steps-grid li>span{top:30px}.pricing-layout{gap:45px}.price-card{padding:34px 25px}.popular{left:25px}.price strong{font-size:46px}.expectation-grid h2{font-size:33px}.expectation-grid{gap:25px}.faq-list details p{margin-right:0}.final-inner,.final-inner>div{align-items:flex-start;flex-direction:column}.final-inner .public-btn{width:100%}.footer-grid{grid-template-columns:1fr;gap:30px}.footer-bottom{align-items:flex-start;flex-direction:column;gap:7px}.account-section{padding:105px 0 60px;background:linear-gradient(var(--forest) 0,var(--forest) 35%,#f4f3ec 35%)}.account-layout,.login-layout,.admin-login-layout{gap:35px}.account-aside h1,.login-message h1{font-size:36px}.account-card,.login-card{padding:29px 20px}.form-pair{grid-template-columns:1fr}.portal-hero{padding:112px 0 40px}.portal-title{align-items:flex-start;flex-direction:column}.portal-title h1{font-size:36px}.portal-content{padding:45px 0 75px}.pharmacy-card{padding:20px}.pharmacy-card-top{align-items:flex-start;flex-wrap:wrap}.pharmacy-card-top .status-pill{margin-left:66px}.pharmacy-actions{flex-wrap:wrap}.portal-side{grid-template-columns:1fr}.subscription-meta{grid-template-columns:1fr}.checkout-section{padding:115px 0 65px;background:linear-gradient(var(--forest) 0,var(--forest) 38%,#efeee6 38%)}.checkout-copy h1{font-size:37px}.checkout-card{padding:30px 20px}.checkout-price strong{font-size:41px}.onboarding-head{padding:110px 0 65px}.onboarding-head h1{font-size:36px}.progress-line{width:100%}.progress-line label:nth-of-type(2){left:44%}.onboarding-guide ol{grid-template-columns:1fr}.onboarding-form-card{padding:25px 18px}.create-confirm{align-items:stretch;flex-direction:column}.legal-hero{padding:115px 0 45px}.legal-hero h1{font-size:38px}.legal-content{padding:50px 0 80px}.legal-lead{font-size:17px!important}.admin-metrics{grid-template-columns:1fr}.flash-stack{padding-top:80px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;animation-timeline:auto!important}
}

/* Start map: the one-day setup page at /account/ramani. The same content
   ships as a printable PDF in static/pdf/, rendered from scripts/start-map/.
   Numbering uses the ol `start` attribute with ::marker so the fifteen steps
   count straight through the six parts without hand-written numbers. */
.map-hero{padding:140px 0 70px;background:linear-gradient(176deg,#07332a,var(--forest));color:#fff}
.map-hero h1{margin:14px 0 10px;max-width:640px;font:590 clamp(34px,4.2vw,48px)/1.08 var(--display);letter-spacing:-.02em}
.map-hero p{max-width:520px;margin:0;color:rgba(255,255,255,.55);font-size:16px}
.map-hero-actions{display:flex;align-items:center;gap:26px;margin-top:30px;flex-wrap:wrap}
.map-hero-actions .text-link{color:rgba(255,255,255,.75);font-weight:700;font-size:13px;text-decoration:none}
.map-hero-actions .text-link:hover{color:#fff}
.map-content{padding:60px 0 110px}
.map-layout{display:grid;gap:18px;max-width:860px}
.map-part{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:26px 28px;box-shadow:var(--shadow-soft)}
.map-part header{display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.map-part header .grow,.map-part header div{flex:1}
.map-part-letter{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--forest);color:var(--lime);font:700 19px var(--display)}
.map-part h2{margin:2px 0 0;font:600 21px var(--display);letter-spacing:-.01em}
.map-who{display:block;font-size:9px;font-weight:800;letter-spacing:.14em}
.map-who.owner{color:var(--green)}
.map-who.pharmacist{color:var(--amber)}
.map-who.both{color:var(--forest-3)}
.map-time{flex:0 0 auto;align-self:flex-start;padding:5px 11px;border-radius:99px;background:var(--mint);color:var(--forest-2);font-size:10px;font-weight:800;white-space:nowrap}
.map-steps{margin:0;padding:6px 0 0 26px;display:grid;gap:2px}
.map-steps li{padding:12px 0;display:grid;grid-template-columns:1fr auto;gap:5px 20px;align-items:start}
.map-steps li::marker{color:var(--green);font:800 14px var(--display)}
.map-steps li+li{border-top:1px solid #eef0e7}
.map-steps strong{display:block;font-size:15px;letter-spacing:-.01em}
.map-steps p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.55;max-width:520px}
.map-steps em{font-style:normal;justify-self:end;padding:5px 11px;border-radius:8px;background:var(--paper-warm);color:var(--ink-soft);font:600 11px var(--ui);white-space:nowrap}
.map-remember{margin-top:12px;padding:30px;border-radius:var(--radius-sm);background:var(--forest);color:#fff}
.map-remember h3{margin:0 0 14px;font:600 20px var(--display);color:var(--lime)}
.map-remember p{margin:0 0 12px;max-width:640px;color:rgba(255,255,255,.62);font-size:13.5px;line-height:1.6}
.map-remember p strong{color:#fff}
.map-remember .public-btn{margin-top:10px}
.map-dl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.map-dl .public-btn{margin-top:0}
a.outline-light{display:inline-flex;align-items:center;text-decoration:none;font-size:14px}
.map-help{margin-top:18px!important;font-size:12px!important}
.map-help a{color:var(--lime);font-weight:700}
.portal-map-card{background:var(--forest);color:#fff;border:0}
.portal-map-card small{display:block;color:var(--lime);font-size:9px;font-weight:800;letter-spacing:.14em}
.portal-map-card h3{margin:8px 0 6px;font:600 18px var(--display);color:#fff}
.portal-map-card p{margin:0 0 16px;color:rgba(255,255,255,.6);font-size:12.5px;line-height:1.55}
.portal-map-card .map-links{display:grid;gap:8px}
.portal-map-card .map-links a{display:block;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:12px;font-weight:700;text-decoration:none;transition:background .2s}
.portal-map-card .map-links a:hover{background:rgba(255,255,255,.16)}
.portal-map-card .map-links a span{float:right;color:var(--lime)}
@media(max-width:820px){
  .map-hero{padding:112px 0 50px}
  .map-content{padding:45px 0 80px}
}
@media(max-width:560px){
  .map-hero h1{font-size:32px}
  .map-part{padding:20px 18px}
  .map-part header{flex-wrap:wrap}
  .map-time{order:3}
  .map-steps{padding-left:22px}
  .map-steps li{grid-template-columns:1fr}
  .map-steps em{justify-self:start}
  .map-remember{padding:24px 20px}
  .map-hero-actions .public-btn{width:100%;text-align:center}
}