/* Hurudza Nine. One stylesheet for the core app, the three service apps,
   the partner portal and the back office.
   Palette from the Zimbabwean farm: granite ground, maize gold (Hurudza Nine),
   laterite red (Livestock Guard), dam water blue (Club Marketplace) and leaf
   green (Agri-Advisor). Type: Tw Cen MT throughout, 12pt body. The one bold
   element is the heavy "9" mark; everything else stays quiet. */
:root {
  --ground: #edefe9;
  --surface: #ffffff;
  --sunk: #e1e5dc;
  --ink: #1d2420;
  --ink-2: #4e5852;
  --line: #cdd3c8;
  --gold: #d6a21e;
  --gold-ink: #241a02;
  --red: #8a3b12;
  --blue: #1f5f8b;
  --green: #2d6a3e;
  --ok: #2d7a46;
  --warn: #9a6300;
  --bad: #b23a2a;
  --forest: #173f2a;
  --forest-ink: #173f2a;
  --forest-btn: #173f2a;
  --wheat: #b8893a;
  --wheat-2: #d4a85a;
  --wheat-ink: #8a6420;
  --cream: #f8f4ea;
  --serif: "Cormorant Garamond", "Cormorant", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --wide: 1180px;
  --accent: var(--forest-btn);
  --accent-ink: #fff;
  --font: "Tw Cen MT", "Tw Cen MT Std", "Century Gothic", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --r: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #121614; --surface: #1a201c; --sunk: #222a25; --ink: #e6ebe4; --ink-2: #a7b2aa; --line: #303a33;
    --gold: #e8b53a; --red: #d9784a; --blue: #6aa8d6; --green: #6cb47d; --ok: #6cbc84; --warn: #e2a64a; --bad: #e87a68; --forest: #133524; --forest-ink: #9fd0b0; --forest-btn: #2e6b47; --wheat-ink: #e0b867; --cream: #f3eedf;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #121614; --surface: #1a201c; --sunk: #222a25; --ink: #e6ebe4; --ink-2: #a7b2aa; --line: #303a33;
  --gold: #e8b53a; --red: #d9784a; --blue: #6aa8d6; --green: #6cb47d; --ok: #6cbc84; --warn: #e2a64a; --bad: #e87a68; --forest: #133524; --forest-ink: #9fd0b0; --forest-btn: #2e6b47; --wheat-ink: #e0b867; --cream: #f3eedf;
  color-scheme: dark;
}
[data-app="nine"] { --accent: var(--forest-btn); --accent-ink: #fff; }
[data-app="agent"] { --accent: var(--wheat-ink); --accent-ink: #fff; }
[data-app="livestock"] { --accent: var(--red); --accent-ink: #fff; }
[data-app="marketplace"] { --accent: var(--blue); --accent-ink: #fff; }
[data-app="advisor"] { --accent: var(--green); --accent-ink: #fff; }
[data-app="admin"], [data-app="partner"] { --accent: var(--ink); --accent-ink: var(--ground); }
.svc-LIVESTOCK { --svc: var(--red); --svc-ink: #fff; }
.svc-MARKETPLACE { --svc: var(--blue); --svc-ink: #fff; }
.svc-ADVISOR { --svc: var(--green); --svc-ink: #fff; }
.svc-MECHANIZATION { --svc: #6b5417; --svc-ink: #fff; }
.svc-PF { --svc: #8a6d1f; --svc-ink: #fff; }
.svc-SOIL { --svc: #6b5417; --svc-ink: #fff; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font: 12pt/1.55 var(--font); -webkit-text-size-adjust: 100%; padding-bottom: env(safe-area-inset-bottom); }
h1, h2, h3 { margin: 0; line-height: 1.1; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6vw, 3.2rem); letter-spacing: -.01em; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.1rem; }
p { margin: 0; }
a { color: inherit; }
.muted { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.small { font-size: .88rem; }
:focus-visible { outline: 3px solid var(--wheat); outline-offset: 2px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------- shell */
/* Brand from the Hurudza logo: forest green (the H and the wordmark), wheat
   gold (the laurel) and the cream of the letterhead. The company name is set
   in spaced serif capitals like the wordmark. Everything else stays in the
   house face, Tw Cen MT. */
.demo-bar { background: var(--wheat); color: #1e1606; font-size: .9rem; }
.demo-bar .in { max-width: var(--wide); margin: 0 auto; padding: 6px 16px; display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.demo-bar select { width: auto; min-height: 0; font: inherit; border-radius: 8px; border: 1px solid rgba(0,0,0,.25); padding: 2px 6px; background: #fbf3df; color: #1e1606; }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.top .in { max-width: var(--wide); margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.crest { width: 50px; height: 50px; flex: none; border-radius: 50%; background: var(--cream); display: grid; place-items: center; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wheat) 45%, transparent); }
.crest img { width: 40px; height: auto; display: block; }
.brand-text { display: grid; gap: 3px; min-width: 0; }
.co { font: 600 .74rem/1.25 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--forest-ink); }
.brand-name { font-weight: 700; font-size: 1.02rem; line-height: 1.1; color: var(--wheat-ink); }
.brand-name small { display: none; }
.top-acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.top-acts .btn { min-height: 40px; padding: 9px 14px; }
.mainnav { border-top: 1px solid var(--line); }
.mainnav .in { max-width: var(--wide); margin: 0 auto; padding: 0 10px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.mainnav .in::-webkit-scrollbar { display: none; }
.mainnav a { flex: none; text-decoration: none; padding: 12px 8px 10px; font-size: .94rem; color: var(--ink-2); font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; }
.mainnav a:hover { color: var(--ink); }
.mainnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--tabc, var(--wheat)); }
main { max-width: var(--wide); margin: 0 auto; padding: 26px 16px 56px; display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); }
.tabs { display: none; }
@media (max-width: 760px) {
  .co { font-size: .62rem; letter-spacing: .1em; }
  .crest { width: 44px; height: 44px; }
  .crest img { width: 34px; }
  .top-acts { display: none; }
  /* The service apps keep a bottom tab bar on phones. Hurudza Nine shows
     every module by its full name in a scrolling strip under the header. */
  :root:not([data-app="nine"]) .mainnav { display: none; }
  :root:not([data-app="nine"]) .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  :root:not([data-app="nine"]) .tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .tabs a { text-decoration: none; color: var(--ink-2); font-size: .74rem; min-width: 0; white-space: nowrap; letter-spacing: -.01em; font-weight: 600; text-align: center; padding: 6px 2px; border-radius: 10px; display: grid; gap: 2px; justify-items: center; }
  .tabs a i { width: 22px; height: 6px; border-radius: 4px; background: var(--line); }
  .tabs a[aria-current="page"] { color: var(--ink); }
  .tabs a[aria-current="page"] i { background: var(--tabc, var(--accent)); }
}
.contact a { color: inherit; }
.contact a[href^="tel:"] { white-space: nowrap; }
.terms ol { padding-left: 1.4em; }
.terms li { margin: 0 0 .5em; }
.terms h3 { margin: 1.2em 0 .4em; font-size: 1rem; }
.terms .keys { border-left: 4px solid var(--wheat); padding: 10px 14px; background: var(--sunk); }
.terms-box { border: 1px solid var(--line, #d9dccf); border-radius: 10px; padding: 12px 14px; }
.terms-box summary { cursor: pointer; font-weight: 600; }
.terms-box .terms { max-height: 340px; overflow: auto; margin-top: 10px; }

/* Footer */
.foot { background: var(--forest); color: #e9efe8; }
.foot .in { max-width: var(--wide); margin: 0 auto; padding: 34px 16px 26px; display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot h3 { font-size: .95rem; color: var(--wheat-2); margin-bottom: 8px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot .fbrand { display: grid; gap: 10px; align-content: start; }
.foot .fbrand .co { color: #fff; font-size: .8rem; }
.foot .pay { color: var(--wheat-2); font-weight: 700; }
.foot .legal { border-top: 1px solid rgba(255,255,255,.16); padding-top: 14px; font-size: .85rem; color: #c3cfc6; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
@media (min-width: 760px) { .foot .in { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ------------------------------------------------------- Home (landing) */
.lead-band { background: var(--forest); color: #f1f4ee; border-radius: 22px; padding: 18px; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); position: relative; overflow: hidden; }
.brandcard { background: var(--cream); color: #173f2a; border-radius: 16px; padding: 26px 22px 22px; display: grid; justify-items: center; gap: 12px; text-align: center; }
.brandcard img { width: min(270px, 78%); height: auto; }
.brandcard .co { color: #173f2a; font-size: .8rem; letter-spacing: .16em; max-width: 30ch; }
.payoff { display: flex; align-items: center; gap: 12px; color: #8a6420; font-weight: 700; font-size: 1.05rem; }
.payoff::before, .payoff::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .6; }
.payoff { white-space: nowrap; }
@media (max-width: 420px) { .payoff { font-size: .98rem; gap: 8px; } .payoff::before, .payoff::after { width: 16px; } }
.lead-copy { display: grid; gap: 16px; align-content: center; padding: 6px 4px 8px; }
.lead-copy h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.02; max-width: 16ch; color: #fff; }
.lead-copy p { font-size: 1.12rem; color: #d5ded7; max-width: 52ch; }
.lead-copy .btn.primary { background: var(--wheat-2); border-color: var(--wheat-2); color: #1e1606; }
.lead-copy .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.dial { display: inline-flex; align-items: baseline; gap: 10px; font-size: 1rem; color: #d5ded7; }
.dial b { font-size: 1.7rem; color: #fff; letter-spacing: .02em; }
@media (min-width: 860px) { .lead-band { grid-template-columns: minmax(300px, 5fr) 7fr; padding: 22px; gap: 34px; } .brandcard { padding: 40px 28px 30px; } }

.sec-head { display: grid; gap: 6px; max-width: 70ch; }
.sec-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
.sec-head p { color: var(--ink-2); font-size: 1.05rem; }

/* Each service reads as a chapter: name and code on the left, the story on
   the right, separated by the service colour. */
.chapters { display: grid; border-top: 1px solid var(--line); }
.chapter { display: grid; gap: 10px 34px; grid-template-columns: minmax(0, 1fr); padding: 24px 0; border-bottom: 1px solid var(--line); }
.chapter .who { display: grid; gap: 8px; align-content: start; border-left: 6px solid var(--svc); padding-left: 14px; }
.chapter h3 { font-size: 1.45rem; }
.chapter .tag { color: var(--svc); font-weight: 700; }
.chapter .code { font-size: .95rem; color: var(--ink-2); }
.chapter .code b { color: var(--ink); }
.chapter .story { display: grid; gap: 14px; align-content: start; }
.chapter .story p { font-size: 1.05rem; max-width: 68ch; }
.chapter .acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 860px) { .chapter { grid-template-columns: 300px minmax(0, 1fr); } }
.chapter.solo h3 { display: none; }
.chapter.solo { border-top: 1px solid var(--line); }
@media (min-width: 760px) { .ladder.pub .rung { grid-template-columns: 170px 230px minmax(0, 1fr); } }
.ladder.pub .price { text-align: left; font-size: 1.2rem; }
.offers { margin: 0; padding: 0; list-style: none; counter-reset: o; display: grid; gap: 10px; max-width: 68ch; }
.offers li { counter-increment: o; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; }
.offers li::before { content: counter(o); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--svc); color: var(--svc-ink, #fff); display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.offers li span { color: var(--ink-2); }
.also { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .also { grid-template-columns: 1fr 1fr; } }
.also article { background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--svc); border-radius: 14px; padding: 18px; display: grid; gap: 8px; align-content: start; }
.also .tag { color: var(--svc); font-weight: 700; }

/* Payment channels */
.paybox { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px 20px; display: grid; gap: 18px; }
.channels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.channels li { border: 1px solid var(--line); background: var(--ground); border-radius: 10px; padding: 9px 14px; font-weight: 700; }
.codes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.codes div { border-left: 3px solid var(--wheat); padding: 2px 0 2px 10px; display: grid; }
.codes b { font-size: 1.25rem; }
.codes span { color: var(--ink-2); font-size: .92rem; }
.signoff { font-weight: 700; color: var(--forest-ink); }

/* Contact Hurudza */
.contact-hub { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .contact-hub { grid-template-columns: 7fr 5fr; align-items: start; } }
.ways { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .ways { grid-template-columns: 1fr 1fr; } }
.way { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 6px; align-content: start; }
.way svg { width: 26px; height: 26px; color: var(--forest-ink); margin-bottom: 4px; }
.way h3 { font-size: 1rem; color: var(--ink-2); font-weight: 600; }
.way .v { font-size: 1.2rem; font-weight: 700; overflow-wrap: anywhere; }
.way .v a { text-decoration: none; }
.way .v a:hover { text-decoration: underline; }
.way.wide { grid-column: 1 / -1; background: var(--forest); color: #f1f4ee; border-color: var(--forest); }
.way.wide h3 { color: var(--wheat-2); }
.way.wide svg { color: var(--wheat-2); }
.enquiry { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.eyebrow { font-size: .88rem; font-weight: 700; color: var(--ink-2); }
.kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpis > div { display: grid; gap: 2px; border-left: 3px solid var(--wheat); padding-left: 10px; }
.tipswitch { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; align-items: center; }

/* -------------------------------------------------------- hero (Nine) */
.hero { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: end; padding: 8px 0 4px; }
.hero h1 { max-width: 18ch; }
.hero .line { font-size: 1.15rem; color: var(--ink-2); max-width: 46ch; }

/* Service rows: each service is a field row with its colour band. */
.rows { display: grid; gap: 12px; }
.row { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px 16px 26px; display: grid; gap: 6px 18px; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 10px; background: var(--svc, var(--accent)); }
.row .tag { color: var(--svc); font-weight: 700; }
.row .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (min-width: 760px) { .row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* Service band at the top of a service screen. */
.band { border-radius: var(--r); background: var(--svc, var(--accent)); color: #fff; padding: 18px 20px; display: grid; gap: 4px; }
.band h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.band p { opacity: .92; }
:root[data-theme="dark"] .band, .dark-band { color: #0d120f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .band { color: #0d120f; } }

/* --------------------------------------------------------- building blocks */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 14px; min-width: 0; }
.panel.flat { background: transparent; border-style: dashed; }
.grid2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.stack { display: grid; gap: 10px; }
.hstack { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.split { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.big { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.meter { height: 12px; border-radius: 6px; background: var(--sunk); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--svc, var(--accent)); }
.list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.list > * { border-bottom: 1px solid var(--line); padding: 10px 0; display: grid; gap: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: .82rem; font-weight: 700; background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.chip.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.chip.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.chip.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.note { border-left: 4px solid var(--svc, var(--accent)); padding: 8px 12px; background: var(--sunk); border-radius: 0 8px 8px 0; }
.note.bad { border-color: var(--bad); }
table.t { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.t th, table.t td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t th { color: var(--ink-2); font-weight: 600; }
table.t td.n, table.t th.n { text-align: right; font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; }

/* -------------------------------------------------------------- forms */
.btn { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 1rem/1 var(--font); padding: 12px 18px; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; }
.btn:hover { border-color: var(--ink-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.svc { background: var(--svc, var(--accent)); border-color: var(--svc, var(--accent)); color: var(--svc-ink, #fff); }
.btn.quiet { background: transparent; border-color: transparent; text-decoration: underline; padding-inline: 4px; }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.block { width: 100%; }
form { display: grid; gap: 14px; }
label.f { display: grid; gap: 6px; font-weight: 600; }
label.f > span.hint { font-weight: 400; color: var(--ink-2); font-size: .88rem; }
input, select, textarea { font: 1rem var(--font); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; min-height: 44px; width: 100%; }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--gold) 60%, transparent); border-color: var(--gold); }
.err { color: var(--bad); font-weight: 600; }
.field-err input, .field-err select { border-color: var(--bad); }
.fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--accent); }

/* Service picker on registration: one, two or all three. */
.picker { display: grid; gap: 10px; }
.pick { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; border: 2px solid var(--line); border-radius: var(--r); padding: 14px; cursor: pointer; background: var(--surface); }
.pick input { grid-row: span 2; width: 24px; height: 24px; min-height: 0; accent-color: var(--svc); margin-top: 3px; }
.pick b { color: var(--svc); }
.pick:has(input:checked) { border-color: var(--svc); background: color-mix(in srgb, var(--svc) 7%, var(--surface)); }

/* Payment sheet */
.methods { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.method { border: 2px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); text-align: left; cursor: pointer; font: inherit; color: var(--ink); display: grid; gap: 2px; min-height: 58px; }
.method small { color: var(--ink-2); }
.method[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.sheet-back { position: fixed; inset: 0; background: rgba(10, 14, 12, .5); z-index: 60; display: grid; align-items: end; justify-items: center; }
.sheet { background: var(--surface); width: min(560px, 100%); max-height: 92vh; overflow: auto; border-radius: 18px 18px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 14px; }
@media (min-width: 640px) { .sheet-back { align-items: center; } .sheet { border-radius: 18px; } }

/* Photo diagnosis */
.snap { display: grid; place-items: center; gap: 8px; border: 2px dashed var(--green); border-radius: var(--r); padding: 26px 14px; text-align: center; cursor: pointer; background: color-mix(in srgb, var(--green) 6%, var(--surface)); }
.snap img { max-width: 100%; max-height: 300px; border-radius: 10px; }
.steps { counter-reset: s; display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.steps li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 700; }
.steps li b { display: block; }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--sunk); }

/* USSD handset */
.handset { width: min(320px, 100%); margin: 0 auto; background: #27302a; border-radius: 34px; padding: 22px 16px 18px; display: grid; gap: 12px; }
.lcd { background: #c7d3b4; color: #17200f; border-radius: 10px; padding: 12px; min-height: 230px; white-space: pre-wrap; font: 1rem/1.35 var(--font); }
.handset input { background: #e8eddf; }
.handset .hstack .btn { flex: 1; }

.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--ink); color: var(--ground); padding: 10px 16px; border-radius: 10px; z-index: 80; max-width: calc(100% - 32px); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--sunk); border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--surface); padding: 8px; }

/* Package ladder: one row per package, readable on any phone. */
.ladder { display: grid; gap: 10px; }
.rung { display: grid; gap: 4px 14px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.rung.current { border: 2px solid var(--svc, var(--accent)); }
.rung .price { font-size: 1.35rem; font-weight: 700; text-align: right; }
.rung .meta { grid-column: 1 / -1; color: var(--ink-2); font-size: .9rem; }
.rung .act { grid-column: 1 / -1; }
@media (min-width: 760px) { .rung { grid-template-columns: 160px 120px minmax(0, 1fr) auto; } .rung .meta, .rung .act { grid-column: auto; } }
nav.hstack .btn { min-height: 38px; padding: 8px 13px; font-size: .95rem; }
@media (max-width: 760px) { .tabs:has(a:nth-child(7)) a { font-size: .64rem; padding: 6px 0; } }
@media (max-width: 380px) { .tabs:has(a:nth-child(7)) a { font-size: .58rem; letter-spacing: -.02em; } }
@media print { .tabs, .no-print, .topbar, .devbar, footer, .toast { display: none !important; } body { background: #fff; } .aod { border: 0; box-shadow: none; } }