/* Colours follow the OrdenZ app: light by default, dark when the visitor's system is dark, and the
   header button overrides either (saved in localStorage as "ordenz.theme"). Components use tokens only. */
/* Colours are the OrdenZ app's own (server/public/css/app.css): the same light and dark palettes, and the same
   colour for each part of the cafe (sales blue, floor green, kitchen terracotta, stock ochre, marketing purple,
   devices teal, account slate). Light by default, dark when the visitor's system is dark, and the header button
   overrides either (saved as "ordenz.theme", the same key the app uses). Components use these tokens only. */
:root{
  --paper:#FFFCF5; --surface:#FFFFFF; --soft:#EEF5EF; --line:#D7E4DA; --line-strong:#B9CBB8;
  --ink:#14211C; --ink-2:#46564F; --muted:#596E62;
  --green:#0E5B49; --on-green:#FFFFFF; --green-soft:#DCEBE5; --deep:#08392E;
  --saffron:#F0B13D; --saffron-ink:#2A1900; --gold:#F2C46D;
  --eyebrow:#4F6544; --notice:#8A5A12; --focus:#9D6145;
  --hero-glow:#E4EBD8; --dots:#897C5812; --top:#FFFCF5F2; --band:#F4F7F1; --footer:#F2F2EA; --cta:#E6ECDD;
  --s-sales:#1F5FA8; --s-floor:#0E5B49; --s-kitchen:#A4431F; --s-stock:#7A5A12; --s-market:#6B3FA0; --s-devices:#0B6B7A; --s-account:#46564F;
  --s-ink:#FFFFFF;
  --display:"Bricolage Grotesque","Hind Madurai",system-ui,sans-serif;
  --body:"Hind Madurai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:20px; --shadow:0 2px 4px #173C300A,0 8px 24px #173C3010;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0B110F; --surface:#18221E; --soft:#22312A; --line:#3A4D43; --line-strong:#4B6356;
  --ink:#E7EEEA; --ink-2:#B2C0B9; --muted:#A0B3A8;
  --green:#3DB291; --on-green:#04201A; --green-soft:#16352D; --deep:#0B110F;
  --eyebrow:#9BC28E; --notice:#F2C46D; --focus:#E8A07E;
  --hero-glow:#16352D; --dots:#FFFFFF08; --top:#0B110FF2; --band:#121A17; --footer:#0F1714; --cta:#16352D;
  --s-sales:#7FB2F0; --s-floor:#3DB291; --s-kitchen:#F08C66; --s-stock:#E3B54F; --s-market:#BFA0EE; --s-devices:#5CC8D6; --s-account:#A9B8B1;
  --s-ink:#0B110F;
  --shadow:0 2px 4px #0005,0 10px 26px #0004; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0B110F; --surface:#18221E; --soft:#22312A; --line:#3A4D43; --line-strong:#4B6356;
  --ink:#E7EEEA; --ink-2:#B2C0B9; --muted:#A0B3A8;
  --green:#3DB291; --on-green:#04201A; --green-soft:#16352D; --deep:#0B110F;
  --eyebrow:#9BC28E; --notice:#F2C46D; --focus:#E8A07E;
  --hero-glow:#16352D; --dots:#FFFFFF08; --top:#0B110FF2; --band:#121A17; --footer:#0F1714; --cta:#16352D;
  --s-sales:#7FB2F0; --s-floor:#3DB291; --s-kitchen:#F08C66; --s-stock:#E3B54F; --s-market:#BFA0EE; --s-devices:#5CC8D6; --s-account:#A9B8B1;
  --s-ink:#0B110F;
  --shadow:0 2px 4px #0005,0 10px 26px #0004; color-scheme:dark}
/* A part of the cafe, as in the app: set data-s on a block and it takes that colour */
[data-s="sales"]{--s:var(--s-sales)}[data-s="floor"]{--s:var(--s-floor)}[data-s="kitchen"]{--s:var(--s-kitchen)}[data-s="stock"]{--s:var(--s-stock)}
[data-s="market"]{--s:var(--s-market)}[data-s="devices"]{--s:var(--s-devices)}[data-s="account"]{--s:var(--s-account)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(40px,6vw,72px);font-weight:800}
h2{font-size:clamp(30px,4vw,46px);font-weight:800}
h3{font-size:22px;font-weight:800}
p{margin:0}
.wrap{width:min(1160px,100% - 32px);margin:0 auto}
.lead{font-size:clamp(18px,2vw,22px);color:var(--ink-2);max-width:60ch}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:9;background:var(--surface);padding:8px 12px;border-radius:8px}

/* header */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 22px var(--display);color:var(--ink)}
.brand img{width:36px;height:36px;border-radius:9px}
.nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.nav a{text-decoration:none;font-weight:600;color:var(--ink-2);padding:8px 12px;border-radius:10px;font-size:16px}
.nav a:hover,.nav a[aria-current]{color:var(--ink);background:var(--soft)}
.nav a.btn,.nav a.btn:hover{color:var(--on-green);background:var(--green)}
@media (max-width:640px){.nav a:not(.btn){display:none}.nav a.keep{display:inline-block}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 17px var(--body);text-decoration:none;padding:13px 22px;border-radius:12px;border:0;cursor:pointer}
.btn-primary{background:var(--green);color:var(--on-green)}
.btn-cta{background:var(--saffron);color:var(--saffron-ink)}
.btn-soft{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28)}
.btn:hover{filter:brightness(1.05)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* hero */
.hero{background:radial-gradient(900px 600px at 85% 10%,#13705A 0%,transparent 60%),linear-gradient(140deg,var(--green),var(--deep));color:#fff;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:80px 0 88px}
.hero .lead{color:rgba(255,255,255,.85)}
.hero .eyebrow{color:var(--gold)}
.hero h1{margin-top:12px}
.hero-art{position:relative}
.device{background:#0b0f0e;border-radius:26px;padding:12px;box-shadow:0 40px 80px rgba(0,0,0,.45)}
.device img{border-radius:16px}
.phone{position:absolute;right:-18px;bottom:-40px;width:30%;background:#0b0f0e;border-radius:26px;padding:8px;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.phone img{border-radius:19px}
@media (max-width:880px){.hero .wrap{grid-template-columns:1fr;padding:56px 0 72px}.phone{right:6px;bottom:-26px}}

/* sections */
section{padding:88px 0}
.center{text-align:center}.center .lead{margin:16px auto 0}
.grid{display:grid;gap:20px;margin-top:40px}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.card p{color:var(--ink-2);margin-top:8px}
.icon{width:48px;height:48px;border-radius:13px;background:var(--soft);display:grid;place-items:center;color:var(--green);margin-bottom:16px}
.icon svg{width:26px;height:26px}
.product{display:flex;flex-direction:column;gap:14px}
.product .logo{width:72px;height:72px;border-radius:18px}
.product .more{margin-top:auto;font-weight:700;color:var(--green);text-decoration:none}
.soon{border-style:dashed;box-shadow:none;background:transparent}
.tag{display:inline-block;font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--soft);color:var(--green)}

/* feature rows */
.feature{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;padding:44px 0}
.feature:nth-of-type(even) .shot{order:-1}
.feature .shot{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.feature ul{margin:16px 0 0;padding-left:20px;color:var(--ink-2)}
.feature li{margin:6px 0}
@media (max-width:880px){.feature{grid-template-columns:1fr;gap:24px}.feature:nth-of-type(even) .shot{order:0}}

.band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.chips span{background:var(--soft);color:var(--green);font-weight:700;padding:8px 16px;border-radius:999px;font-size:16px}

/* plans */
.plan h3{font-size:26px}
.plan .price{font:800 34px var(--display);margin-top:8px}
.plan ul{list-style:none;padding:0;margin:18px 0 0}
.plan li{padding:7px 0 7px 28px;position:relative;color:var(--ink-2)}
.plan li::before{content:"";position:absolute;left:4px;top:15px;width:12px;height:7px;border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg)}
.plan li.no{opacity:.5}.plan li.no::before{border:0;background:var(--muted);height:3px;top:18px;transform:none}
.plan.best{border:2px solid var(--saffron)}

/* faq */
details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-top:12px}
summary{cursor:pointer;font-weight:700;font-size:19px}
details p{margin-top:10px;color:var(--ink-2)}

/* cta */
.cta{background:linear-gradient(140deg,var(--green),var(--deep));color:#fff;border-radius:28px;padding:56px;text-align:center}
.cta .lead{color:rgba(255,255,255,.85);margin:14px auto 0}
.cta .actions{justify-content:center}

/* text pages */
.doc{max-width:780px;padding:64px 0 88px}
.doc h1{font-size:clamp(34px,5vw,52px)}
.doc h2{font-size:26px;margin:36px 0 10px}
.doc p,.doc li{color:var(--ink-2)}
.doc table{width:100%;border-collapse:collapse;font-size:16px;margin-top:12px}
.doc td,.doc th{text-align:left;padding:10px;border-top:1px solid var(--line);vertical-align:top}
.note{background:var(--soft);border-radius:14px;padding:16px 20px;margin-top:20px;color:var(--ink)}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);font-size:16px}
footer .wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
footer a{text-decoration:none}footer a:hover{color:var(--ink)}
@media (max-width:640px){.doc table{font-size:14px}.doc td,.doc th{padding:8px 6px}}

/* live demo launcher */
.demo-grid{margin-top:32px}
.demo-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;padding:14px;transition:transform .15s}
.demo-card:hover{transform:translateY(-3px);border-color:var(--green)}
.demo-card img{border-radius:12px;border:1px solid var(--line);aspect-ratio:16/9;object-fit:cover;object-position:top}
.demo-card p{color:var(--ink-2);font-size:16px}

/* guide */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.g-layout{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start}
.g-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:12px}
.g-side input{font:inherit;font-size:16px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.g-roles{display:flex;flex-wrap:wrap;gap:6px}
.g-roles button{font:600 14px var(--body);padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer}
.g-roles button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--on-green)}
.g-toc{display:flex;flex-direction:column;border-left:2px solid var(--line)}
.g-toc a{text-decoration:none;font-size:15px;color:var(--ink-2);padding:5px 12px;margin-left:-2px;border-left:2px solid transparent}
.g-toc a:hover{color:var(--ink)}
.g-toc a[aria-current]{color:var(--green);border-left-color:var(--green);font-weight:700}
.g-topic{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px 30px;margin-bottom:22px;scroll-margin-top:88px}
.g-topic h2{font-size:28px}
.g-topic > p{margin-top:10px;color:var(--ink-2)}
.g-topic ol{margin:14px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.g-topic figure{margin:20px 0 0;cursor:zoom-in}
.g-topic figure img{border-radius:12px;border:1px solid var(--line);max-height:420px;width:auto;margin:0 auto}
.g-topic figure.zoom{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.85);display:grid;place-items:center;margin:0;padding:24px;cursor:zoom-out}
.g-topic figure.zoom img{max-height:92vh}
.g-topic figure.zoom figcaption{color:#fff}
.g-topic figcaption{font-size:15px;color:var(--muted);text-align:center;margin-top:8px}
.g-table{overflow-x:auto;margin-top:16px}
.g-table table{border-collapse:collapse;width:100%;font-size:16px}
.g-table th,.g-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.g-table td:first-child{font-weight:700;white-space:nowrap}
.g-none{padding:40px;text-align:center;color:var(--muted)}
@media (max-width:880px){.g-layout{grid-template-columns:1fr}.g-side{position:static}.g-toc{display:none}.g-topic{padding:22px 18px}}

/* Indie Collage + Botanical Flow */
body{background-color:var(--paper);background-image:radial-gradient(var(--dots) .6px,transparent .6px);background-size:5px 5px}
.top{background:var(--top);border-bottom:1px solid var(--line);box-shadow:none}
.brand{font-size:28px;letter-spacing:-.04em}
.hero{color:var(--ink);background:radial-gradient(ellipse at 95% 30%,var(--hero-glow) 0%,transparent 55%),var(--paper);border-bottom:1px solid var(--line)}
.hero .wrap{padding:64px 0 72px;gap:42px;min-height:570px}
.hero h1{font-weight:700;line-height:.98;letter-spacing:-.045em;font-size:clamp(44px,5.5vw,76px);position:relative;padding-bottom:18px}
.hero h1:after{content:"";position:absolute;left:0;bottom:0;width:145px;height:5px;border-radius:50%;background:#C98566;transform:rotate(-2deg)}
.hero .eyebrow,.eyebrow{color:var(--eyebrow)}
.hero .lead{color:var(--ink-2);font-size:20px;max-width:46ch}
.hero .btn-ghost,.btn-ghost{color:var(--green);border:1px solid var(--line-strong);background:transparent}
.btn{border-radius:8px}
.btn-cta{background:var(--green);color:var(--on-green)}
.hero-art{min-height:410px;position:relative;isolation:isolate;padding-top:100px}
.hero-art:before{content:"";position:absolute;z-index:-2;inset:-60px -30px -25px;background:url('/assets/img/botanical-cafe.webp') center top/contain no-repeat}
.hero-art:after{content:"Cafe days, made brighter.";position:absolute;top:8px;left:6px;max-width:140px;padding:18px;color:#FFF9EB;background:#0E5B49;font:italic 23px/1.25 Georgia,serif;transform:rotate(-7deg);box-shadow:4px 5px 0 #D5DDC4;clip-path:polygon(2% 0,97% 3%,100% 95%,3% 100%,0 4%)}
.device{position:relative;transform:rotate(3deg);margin-top:80px;border-radius:19px;padding:10px;background:#26332C;box-shadow:0 20px 35px #173C302B;border:1px solid #69766B}
.device img{border-radius:10px}
.phone{right:-8px;bottom:-10px;transform:rotate(-7deg);border-radius:19px;padding:6px;background:#28372E;border:1px solid #728072;box-shadow:0 12px 24px #173C3030}
.phone img{border-radius:13px}
.card{border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}
.icon{background:var(--green-soft);border-radius:47% 53% 42% 58%;color:var(--green)}
.card[data-s]{border-top:4px solid var(--s)}
.card[data-s] .icon{background:color-mix(in srgb,var(--s) 16%,var(--surface));color:var(--s)}
.card[data-s] .tag,.card[data-s] .step-number{color:var(--s)}
.card[data-s] .tag{background:color-mix(in srgb,var(--s) 13%,var(--surface))}
.band{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tag,.chips span{color:var(--green);background:var(--green-soft)}
.chips span[data-s]{color:var(--s);background:color-mix(in srgb,var(--s) 13%,var(--surface))}
.plan.best{border:2px solid var(--saffron);background:color-mix(in srgb,var(--saffron) 7%,var(--surface))}
.cta{background:var(--cta);color:var(--ink);box-shadow:none;border:1px solid var(--line);border-radius:26px}
.cta .lead{color:var(--ink-2)}
footer{background:var(--footer)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
@media(max-width:880px){.hero .wrap{padding:42px 0 60px;gap:20px}.hero-art{width:min(560px,100%);margin:auto;min-height:400px}.hero .lead{font-size:19px}.hero-art:before{inset:-35px 0 -10px}.device{margin:80px 12px 0}.phone{right:6px;width:24%}}
@media(max-width:640px){.top .wrap{height:auto;min-height:68px;flex-wrap:wrap;gap:4px;padding:10px 0}.nav{width:100%;margin:0;flex-wrap:wrap}.nav a:not(.btn){display:inline-flex}.nav a{padding:7px 9px;font-size:14px}.nav .btn{margin-left:auto}.hero h1{font-size:47px}.hero-art{min-height:320px;padding-top:70px}.hero-art:after{font-size:18px;max-width:120px;padding:12px}.hero-art:before{inset:0}.device{margin-top:70px}.hero .wrap{padding-bottom:48px}.cta{padding:32px 20px}section{padding:56px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Regional plan comparison */
[hidden]{display:none!important}.pricing-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:18px;margin:30px 0 12px}.pricing-tabs,.pricing-cycle{display:flex;gap:4px;flex-wrap:wrap;border:1px solid var(--line-strong);border-radius:14px;padding:5px;background:var(--paper)}.pricing-controls button{font:600 16px var(--body);padding:12px 18px;border:0;border-radius:10px;color:var(--green);background:transparent;cursor:pointer;min-height:44px}.pricing-tabs [aria-selected="true"],.pricing-cycle [aria-pressed="true"]{background:var(--green);color:var(--on-green)}.pricing-status{text-align:center;font-weight:600;color:var(--ink-2);margin:18px 0 0}.pricing-panel .grid{margin-top:22px}.pricing-panel .plan{display:flex;flex-direction:column;align-items:flex-start}.pricing-panel .plan ul{flex:1}.pricing-panel .plan .btn{margin-top:24px}.pricing-panel .price small{font:400 16px var(--body);color:var(--muted);white-space:nowrap}.price-unit{font-size:14px;color:var(--muted);margin-top:5px}.pricing-notice,.pricing-small{font-size:15px;line-height:1.6;max-width:900px;margin:24px auto 0;color:var(--ink-2)}.pricing-notice{padding:16px 20px;background:var(--paper);border-radius:12px}.pricing-panel .recipe{font-size:14px;color:var(--muted);margin-top:18px}.pricing-panel:focus-visible{outline:2px solid var(--green);outline-offset:5px}
@media(max-width:640px){.pricing-controls{align-items:stretch;gap:12px}.pricing-tabs,.pricing-cycle{justify-content:center}.pricing-controls button{padding:11px 14px}.pricing-panel .price{font-size:31px}}

#pricing{scroll-margin-top:85px}@media(max-width:640px){#pricing{scroll-margin-top:155px}}

/* Cafe workflows and pilot checklist: native links, readable at every width. */
.journey{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:32px 0}.journey li{padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:20px}.step-number{display:block;font:700 15px var(--body);letter-spacing:.05em;color:var(--green);margin-bottom:14px}.journey h3,.card .tag+h3{margin-top:16px}#workflow,#getting-started{scroll-margin-top:90px}@media(max-width:700px){.journey{grid-template-columns:1fr}#workflow,#getting-started{scroll-margin-top:160px}}

/* Theme switch in the header, same choice as the app */
.theme-btn{font:600 14px var(--body);color:var(--ink-2);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:36px}
.theme-btn:hover{color:var(--ink);background:var(--soft)}
.theme-btn svg{width:16px;height:16px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero-art:before{opacity:.55}}
:root[data-theme="dark"] .hero-art:before{opacity:.55}

/* ---------- parts of the cafe (product page), the same colours as the app's tabs ---------- */
.feature[data-s] .eyebrow{color:var(--s)}
.feature[data-s] .shot{border-color:color-mix(in srgb,var(--s) 35%,var(--line))}
.feature[data-s] li::marker{color:var(--s)}
.group{margin-top:72px;padding:28px 30px;border-radius:22px;background:color-mix(in srgb,var(--s) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--s) 25%,var(--line));display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center}
.group:first-of-type{margin-top:40px}
.group .pill{grid-row:span 2;display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:56px;border-radius:16px;background:var(--s);color:var(--s-ink);font:800 22px var(--display)}
.group h2{font-size:clamp(26px,3vw,36px)}
.group p{color:var(--ink-2)}
.group p b{color:var(--s)}
.toc-parts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.toc-parts a{text-decoration:none;font-weight:700;font-size:15px;padding:8px 14px;border-radius:999px;color:var(--s);background:color-mix(in srgb,var(--s) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--s) 30%,var(--line))}
.toc-parts a:hover{background:var(--s);color:var(--s-ink)}
@media(max-width:640px){.group{grid-template-columns:1fr;padding:22px}.group .pill{grid-row:auto;width:48px;min-width:48px;height:48px;font-size:19px}}

/* ---------- a day at your cafe (home) ---------- */
.day{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:14px;position:relative}
.day:before{content:"";position:absolute;left:83px;top:10px;bottom:10px;width:3px;border-radius:3px;background:linear-gradient(var(--s-devices),var(--s-floor),var(--s-kitchen),var(--s-stock),var(--s-sales))}
.day li{display:grid;grid-template-columns:70px 28px 1fr;gap:0 14px;align-items:start}
.day time{font:800 18px var(--display);text-align:right;padding-top:16px;color:var(--ink)}
.day .dot{width:18px;height:18px;border-radius:50%;margin:18px 0 0 5px;background:var(--s);box-shadow:0 0 0 5px var(--paper);position:relative;z-index:1}
.day .moment{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--s);border-radius:16px;padding:16px 20px;box-shadow:var(--shadow)}
.day .moment h3{font-size:20px}
.day .moment p{color:var(--ink-2);margin-top:4px}
.day .moment .who{display:inline-block;margin-top:8px;font-size:14px;font-weight:700;color:var(--s)}
@media(max-width:640px){.day:before{left:63px}.day li{grid-template-columns:52px 26px 1fr;gap:0 8px}.day time{font-size:15px}.day .moment{padding:14px 16px}}

/* ---------- numbers strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:14px;margin-top:36px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;text-align:center}
.stat b{display:block;font:800 clamp(30px,4vw,42px)/1 var(--display);color:var(--green)}
.stat span{display:block;margin-top:8px;color:var(--ink-2);font-size:16px}

/* ---------- try-this list (demo page) ---------- */
.tries{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:16px;margin-top:32px}
.try{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--s);border-radius:16px;padding:16px 18px;transition:transform .15s}
a.try:hover{transform:translateY(-2px);border-color:var(--s)}
.try .n{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font:800 16px var(--display);background:var(--s);color:var(--s-ink)}
.try h3{font-size:18px}
.try p{color:var(--ink-2);font-size:16px;margin-top:4px}
.try .as{display:inline-block;margin-top:6px;font-size:13px;font-weight:700;color:var(--s)}
.demo-card[data-s]{border-top:4px solid var(--s)}

/* ---------- ways to get help (support) ---------- */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px;margin-top:28px}
.way{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:8px}
.way.wa{border-color:#1F8A4C;background:color-mix(in srgb,#25D366 9%,var(--surface))}
.way h3{font-size:20px}.way p{color:var(--ink-2);font-size:16px}
.way .btn{margin-top:auto;align-self:flex-start}
.btn-wa{background:#1A7F44;color:#fff}
:root[data-theme="dark"] .btn-wa{background:#3CCB78;color:#04201A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-wa{background:#3CCB78;color:#04201A}}

/* ---------- start a cafe ---------- */
.country-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.country-tabs a{text-decoration:none;font-weight:700;padding:10px 18px;border-radius:12px;border:1px solid var(--line-strong);color:var(--green)}
.country-tabs a:hover{background:var(--green);color:var(--on-green)}
.steps-list{counter-reset:st;list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.steps-list li{counter-increment:st;position:relative;padding:14px 16px 14px 58px;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--ink-2)}
.steps-list li:before{content:counter(st);position:absolute;left:14px;top:13px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--green);color:var(--on-green);font:800 15px var(--display)}
.steps-list li b{color:var(--ink)}
.callout{margin-top:20px;padding:16px 20px;border-radius:14px;background:color-mix(in srgb,var(--saffron) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--saffron) 45%,var(--line));color:var(--ink)}
.sources{font-size:15px;color:var(--muted)}.sources a{color:var(--ink-2)}
.faq-group{margin-top:36px}.faq-group h3{font-size:24px}
.doc a:not(.btn),.faq a,details a{color:var(--green);text-underline-offset:3px}