/* Medhava — the landing page (tasks 3.1–3.2). Served at / by medhava/server/landing.js; the
   app itself is at /app. Carried over from the 10-10-2026 preview: the same colours and fonts as
   the app (DESIGN.md), a dark theme in the same family, nothing fetched from another site. */
@font-face{font-family:"Manrope";src:url(/fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Poppins";src:url(/fonts/poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}

html{-webkit-text-size-adjust:100%}[hidden]{display:none!important}img{max-width:100%}
/* Layout: one column of sections; hero splits into copy + a live product window (Software | AI). */
:root{
  --bg:#F4F7FB; --card:#ffffff; --ink:#0F172A; --dim:#334155; --faint:#475569;
  --line:#D5DDE8; --edge:#64748B; --accent:#1D4ED8; --accent-ink:#ffffff; --accent-soft:#EAF1FF;
  --teal-ink:#0F766E; --teal-soft:#E3F8F4; --violet-ink:#6D28D9; --gold:#F7B703;
  --brand:linear-gradient(135deg,#00B09B,#2563EB 55%,#7C3AED);
  --brand-text:linear-gradient(90deg,#0F766E,#1D4ED8 55%,#6D28D9);
  --button:linear-gradient(135deg,#0F766E,#1D4ED8 55%,#6D28D9);
  --warn:#92400E; --warn-soft:#FEF3C7; --ok:#166534; --ok-soft:#F0FDF4; --neg:#B91C1C;
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head: "Poppins", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow: 0 1px 3px rgba(20,25,40,.06), 0 13px 32px rgba(20,25,40,.06);
  /* task 3.4: the same names as the app (medhava/web/style.css); design.test.js D4 holds the
     values the two share equal, D1 holds every colour to a list like this one */
  --teal:#00B09B; --blue:#2563EB; --violet:#7C3AED; --on-brand:#fff;
  --shadow-lift: 0 24px 48px rgba(15,23,42,.18); --shadow-window: 0 30px 60px rgba(15,23,42,.18);
  --on-brand-tint: rgba(255,255,255,.18);
  /* the numbers strip: a dark band in both themes */
  --night:#0F172A; --night-text:#CBD5E1;
  --night-brand:linear-gradient(90deg,#5EEAD4,#93C5FD 55%,#C4B5FD);
  /* the seven departments of the Products menu (departments.js `tone`) */
  --tone-teal:#0F766E; --tone-teal-soft:#E3F8F4; --tone-blue:#1D4ED8; --tone-blue-soft:#EAF1FF;
  --tone-amber:#B45309; --tone-amber-soft:#FEF3C7; --tone-rose:#BE123C; --tone-rose-soft:#FFE4E6;
  --tone-violet:#6D28D9; --tone-violet-soft:#EDE9FE; --tone-sky:#0369A1; --tone-sky-soft:#E0F2FE;
  --tone-slate:#334155; --tone-slate-soft:#E2E8F0;
  /* spacing: the one scale (DESIGN.md §5); the website's other sizes are its own rhythm */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0B1120; --card:#141D33; --ink:#F1F5F9; --dim:#CBD5E1; --faint:#A9B6C9;
  --line:#2A3A57; --edge:#7C8DA6; --accent:#93C5FD; --accent-ink:#0B1120; --accent-soft:#1A2850;
  --teal-ink:#5EEAD4; --teal-soft:#0F2E2E; --violet-ink:#C4B5FD; --gold:#FBBF24;
  --brand:linear-gradient(135deg,#00B09B,#2563EB 55%,#7C3AED);
  --brand-text:linear-gradient(90deg,#5EEAD4,#93C5FD 55%,#C4B5FD);
  --button:linear-gradient(135deg,#0F766E,#1D4ED8 55%,#6D28D9);
  --warn:#FCD34D; --warn-soft:#2A2110; --ok:#4ADE80; --ok-soft:#0F2A1A; --neg:#FCA5A5;
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 13px 32px rgba(0,0,0,.35); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0B1120; --card:#141D33; --ink:#F1F5F9; --dim:#CBD5E1; --faint:#A9B6C9;
  --line:#2A3A57; --edge:#7C8DA6; --accent:#93C5FD; --accent-ink:#0B1120; --accent-soft:#1A2850;
  --teal-ink:#5EEAD4; --teal-soft:#0F2E2E; --violet-ink:#C4B5FD; --gold:#FBBF24;
  --brand:linear-gradient(135deg,#00B09B,#2563EB 55%,#7C3AED);
  --brand-text:linear-gradient(90deg,#5EEAD4,#93C5FD 55%,#C4B5FD);
  --button:linear-gradient(135deg,#0F766E,#1D4ED8 55%,#6D28D9);
  --warn:#FCD34D; --warn-soft:#2A2110; --ok:#4ADE80; --ok-soft:#0F2A1A; --neg:#FCA5A5;
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 13px 32px rgba(0,0,0,.35); color-scheme:dark }
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:500 16px/1.65 var(--sans);margin:0;text-rendering:optimizeLegibility}
.wrap{max-width:1160px;margin:0 auto;padding-inline:var(--s5)}
h1,h2,h3{margin:0;font-family:var(--head);font-weight:600;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
a{color:var(--accent);font-weight:600}
::placeholder{color:var(--edge);opacity:1}
.k{font:600 13px/1 var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:var(--s1) 7px;background:var(--card);color:var(--ink);white-space:nowrap}
.eyebrow{font:700 13px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--teal-ink)}
.lede{color:var(--dim);font-size:18px;max-width:62ch}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}

/* header */
header.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--brand)}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:var(--s5);min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:flex-end;gap:1px;font:600 24px/1 var(--head);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand svg{height:1.42em;width:auto;margin-bottom:-.06em}
.brand .t{color:var(--teal-ink)} .brand .b{color:var(--blue)} .brand .v{color:var(--violet)}
:root[data-theme="dark"] .brand .b{color:#93C5FD} :root[data-theme="dark"] .brand .v{color:#C4B5FD}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand .b{color:#93C5FD} :root:not([data-theme="light"]) .brand .v{color:#C4B5FD}}
nav.links{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.acts{display:flex;gap:10px;align-items:center}
.acts .signin{color:var(--dim);text-decoration:none;font-size:15px}
.burger{display:none;margin-left:auto}
.burger summary{list-style:none;cursor:pointer;font-size:24px;line-height:1;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.burger summary::-webkit-details-marker{display:none}
.burger nav{position:absolute;left:0;right:0;top:100%;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;padding:var(--s2) var(--s5) var(--s4)}
.burger nav a{padding:var(--s3) 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
nav.links a{color:var(--dim);text-decoration:none;font-size:15px;font-weight:600}
nav.links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:var(--s2);height:42px;padding:0 18px;border-radius:10px;border:1px solid var(--edge);background:var(--card);color:var(--ink);font-weight:700;font-size:15.5px;text-decoration:none}
.btn.primary{background:var(--button);border-color:transparent;color:var(--on-brand)}
.btn.ghost{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn.big{height:50px;padding:0 var(--s6);font-size:17px}
.btn[disabled]{opacity:.6;cursor:wait}

/* hero */
.hero{padding-block:56px 40px}
.hero .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s8);align-items:center}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.1}
.hero h1 em{font-style:normal;color:var(--teal-ink);background:var(--brand-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lede{margin-top:18px}
.hero .ctas{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
.hero .note{margin-top:var(--s4);font-size:14px;color:var(--faint)}

/* product window */
.window{background:var(--card);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);overflow:hidden;min-width:0}
.wbar{display:flex;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.example{font-size:13px;color:var(--warn);background:var(--warn-soft);border-radius:5px;padding:2px 7px}
.pane{display:grid;grid-template-columns:minmax(0,1fr) 220px}
.main{padding:var(--s4);min-width:0}
.crumb{font-size:13px;color:var(--faint)}
.vh{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin:6px 0 13px;flex-wrap:wrap}
.vh h3{font-size:17px}
.vh span{font:13px var(--mono);color:var(--dim)}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{font:600 13px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--dim);text-align:left;padding:7px 6px;border-bottom:1px solid var(--line);background:var(--bg)}
td{padding:7px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
td:first-child{white-space:normal;min-width:7em}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
tr.tot td{font-weight:700;border-bottom:0}
tr.focus td{background:var(--accent-soft)}
.keys{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:var(--s3);font-size:13px;color:var(--dim)}
.keys > span{display:inline-flex;gap:6px;align-items:center}
.chat{padding:var(--s4);display:flex;flex-direction:column;gap:10px;min-width:0;font-size:14px;border-left:1px solid var(--line);background:var(--bg)}
.chat > .who{font-weight:700;font-size:14px;color:var(--violet-ink)}
.q{align-self:flex-end;background:var(--button);color:var(--on-brand);border-radius:15px 15px 4px 15px;padding:9px 14px;max-width:85%}
.a{background:var(--bg);border:1px solid var(--line);border-radius:15px 15px 15px 4px;padding:13px 15px;max-width:95%}
.src{margin-top:10px;font-size:13px;color:var(--dim);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.src span{font-family:var(--mono);border:1px solid var(--line);border-radius:6px;padding:2px 6px;background:var(--card)}
.ask{display:flex;gap:var(--s2);border:1px solid var(--line);border-radius:13px;padding:var(--s2) 10px;align-items:center;color:var(--faint);font-size:14.5px;background:var(--card)}
.ask .k{margin-left:auto}

/* sections */
section.block{padding-block:56px;border-top:1px solid var(--line)}
.head{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.head h2{font-size:clamp(24px,3.2vw,34px);line-height:1.15}
.feat{padding:var(--s1) 0;display:flex;flex-direction:column;gap:6px;min-width:0}
.feat h3{font-size:16px}
.feat p{color:var(--dim);font-size:15.5px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.steps div{counter-increment:s;display:flex;flex-direction:column;gap:6px}
.steps div::before{content:counter(s);font:700 14px/1 var(--mono);color:var(--on-brand);background:var(--button);width:26px;height:26px;border-radius:7px;display:grid;place-items:center}
.steps p{color:var(--dim);font-size:15.5px}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px;display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.plan h3{font-size:16px}
.plan p{color:var(--dim);font-size:15px}
.plan .price{font:700 14px var(--sans);color:var(--teal-ink)}
.card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:13px}
.card h3{font-size:22px}
.card .btn{justify-content:center;width:100%}
label{font-size:14px;font-weight:700;color:var(--dim);display:flex;flex-direction:column;gap:6px}
input{font:inherit;height:44px;border:1px solid var(--edge);border-radius:9px;padding:0 13px;background:var(--bg);color:var(--ink)}
.msg{font-size:14px;color:var(--warn);min-height:1.2em}
.promise{font-size:14px;color:var(--dim)}

@media (max-width:1100px){ nav.links{display:none} .acts{margin-left:auto} }
/* The bill, every figure whole (tasks 3.10, 4.3): wherever it is narrow (a phone, or beside Piya on
   a computer) each line puts the item on its own row and its four figures beneath it. */
@media (max-width:620px), (min-width:1251px){
  .main table thead tr,.main table tbody tr{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1.5fr)}
  .main table th:first-child,.main table td:first-child{grid-column:1/-1;min-width:0}
  .main table th,.main table td{padding:5px var(--s1);font-size:12.5px}
  .main table thead th:first-child{display:none}
  .main table tr td:first-child{border-bottom:0;padding-bottom:0;font-weight:600}
  /* the total, the widest figure, has its own full-width line */
  .main table tr.tot td:not(:first-child):not(:last-child){display:none}
  .main table tr.tot td:last-child{grid-column:1/-1}
}
/* where the hero's window is narrow, Piya sits under the bill rather than squeezing it */
@media (max-width:1250px) and (min-width:901px){ .pane{grid-template-columns:minmax(0,1fr)} .chat{border-left:0;border-top:1px solid var(--line)} }
@media (max-width:900px){
  .hero .grid{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .pane{grid-template-columns:minmax(0,1fr)}
  .chat{border-left:0;border-top:1px solid var(--line)}
  .acts .signin,.acts .ghost{display:none}
  .burger{display:block;margin-left:0}
  header.top .wrap{flex-wrap:nowrap;gap:10px}
  .acts{margin-left:auto}
  .acts .btn{height:40px;padding:0 13px;font-size:14.5px}
}
@media (prefers-reduced-motion:no-preference){ .window{transition:transform .3s} .pane{animation:fade .25s ease} @keyframes fade{from{opacity:.4}to{opacity:1}} }

/* what works at the Diwali soft launch and what is coming (the owner's choice, 12-10-2026): every
   mark is decided by medhava/server/landing.js and checked against TASKS.md by landing.test.js */
.soon{display:inline-block;font:700 12px/1.4 var(--sans);letter-spacing:.02em;color:var(--warn);background:var(--warn-soft);border-radius:999px;padding:1px 9px;margin-left:6px;white-space:nowrap;vertical-align:1px}
.now{display:inline-block;font:700 12px/1.4 var(--sans);color:var(--teal-ink);background:var(--teal-soft);border-radius:999px;padding:1px 9px;white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:10;background:var(--card);color:var(--accent);padding:10px var(--s4);border:2px solid var(--blue);border-radius:8px}
.skip:focus{left:16px}


/* ── task 3.6: the landing page to the owner's plan, and the public pages around it ── */
.center{text-align:center;align-items:center;justify-content:center}
.head.center .lede{margin-inline:auto}
.sub{color:var(--dim);margin-top:18px}
.ctas{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
.hero .note a{font-weight:600}
.trust{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) 18px;font-size:14px;color:var(--dim)}
.trust li::before{content:"✓ ";color:var(--ok);font-weight:800}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.twocol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px;align-items:start}
.narrow{max-width:820px}
.scatter{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);padding:var(--s5);border:1px dashed var(--edge);border-radius:18px;background:var(--card)}
.scatter span{border:1px dashed var(--edge);border-radius:10px;padding:var(--s3);text-align:center;color:var(--dim);font-weight:700;font-size:15px;background:var(--bg)}
.scatter b{grid-column:1/-1;text-align:center;padding:14px;border-radius:12px;background:var(--button);color:var(--on-brand);font:600 20px var(--head)}
.benefits{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4)}
.benefit{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.benefit .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.benefit .ic svg{width:26px;height:26px}
.benefit h3{font-size:17px}
.benefit p{color:var(--dim);font-size:15px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}
.tabs button{border:1px solid var(--line);background:var(--card);color:var(--dim);border-radius:999px;padding:9px var(--s4);font-weight:700;font-size:15px}
.tabs button[aria-selected="true"]{background:var(--button);color:var(--on-brand);border-color:transparent}
body:not(.js-tabs) .tabs{display:none}
.panels{display:grid;gap:14px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:var(--s6);display:flex;flex-direction:column;gap:10px}
.panel h3{font-size:21px}
.panel .lead{color:var(--dim)}
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.ticks li{padding-left:28px;position:relative;color:var(--ink)}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:6px;background:var(--teal-soft);color:var(--teal-ink);font-weight:800;font-size:13px;display:grid;place-items:center}
.nevers{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.nevers li{padding-left:28px;position:relative}
.nevers li::before{content:"✕";position:absolute;left:0;color:var(--neg);font-weight:800}
.more{font-weight:700;text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center}
.chips a{display:inline-flex;gap:var(--s2);align-items:center;border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--card);font-size:15px;color:var(--ink);text-decoration:none;font-weight:600}
.chips a:hover{border-color:var(--accent)}
.duo{display:flex;gap:var(--s4);justify-content:center;margin:6px 0 var(--s1);flex-wrap:wrap}
.persona{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:var(--s5) 34px;min-width:180px}
.persona b{font:600 22px var(--head)}
.persona span:last-child{color:var(--dim);font-size:14px}
.persona.piya b{color:var(--violet-ink)} .persona.navi b{color:var(--teal-ink)}
.wave{display:flex;gap:var(--s1);align-items:center;height:28px}
.wave i{width:5px;border-radius:3px;background:var(--brand);height:40%}
.wave i:nth-child(2){height:75%} .wave i:nth-child(3){height:100%} .wave i:nth-child(4){height:65%}
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:28px}
.proofs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.proofs div{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:var(--s6);display:flex;flex-direction:column;gap:6px}
.proofs b{font:600 30px/1.1 var(--head);background:var(--brand-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.proofs span{color:var(--dim)}
.founding{margin-top:22px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:var(--teal-soft);border-left:4px solid var(--teal);border-radius:15px;padding:var(--s5) 22px}
.founding p{color:var(--dim)}
.plans{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan .btn{margin-top:auto;justify-content:center}
.plan.pop{border:2px solid var(--accent);position:relative}
/* task 4.4: one plan until Holi (K47), so one card, centred, at a reading width */
.plans.one{grid-template-columns:minmax(0,1fr);max-width:640px;margin:0 auto}
.plan.pop h3{font-size:20px}
form.demo{gap:var(--s3)}
select{font:inherit;height:44px;border:1px solid var(--edge);border-radius:9px;padding:0 10px;background:var(--bg);color:var(--ink)}
form.demo .btn{width:100%;justify-content:center}
.msg{color:var(--neg)} .msg.ok{color:var(--ok);font-weight:700}
.faq{display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.faq summary{cursor:pointer;font-weight:700}
.faq p{margin-top:var(--s2);color:var(--dim)}
.band{background:var(--button);color:var(--on-brand);padding-block:52px;text-align:center}
.band h2{font-size:clamp(24px,3.2vw,34px);color:var(--on-brand)}
.band .ctas{justify-content:center}
.band .btn.primary{background:var(--on-brand);color:var(--tone-blue)}
.band .btn.ghost.light{border-color:var(--on-brand);color:var(--on-brand)}
.band p{margin-top:14px;opacity:.9}
footer.site{border-top:1px solid var(--line);padding-block:36px var(--s6);color:var(--faint);font-size:14.5px}
footer.site .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}
footer.site h3{font:700 13px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin-bottom:10px}
footer.site .cols div{display:flex;flex-direction:column;gap:7px}
footer.site a{color:var(--dim);text-decoration:none;font-weight:500}
footer.site .base{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:var(--s4);justify-content:space-between;flex-wrap:wrap}
/* the pages behind the landing page */
section.page{padding-block:36px 56px}
.page h1{font-size:clamp(28px,4vw,42px);line-height:1.15;margin:var(--s2) 0 var(--s3)}
.page h2{font-size:22px;margin:30px 0 var(--s3)}
.page .lede{margin-bottom:var(--s2)}
.crumbs{font-size:14px;color:var(--faint);margin-bottom:6px}
.crumbs a{font-weight:600;text-decoration:none}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s3);margin-top:22px}
.tile{display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;color:var(--ink);text-decoration:none;min-width:0}
.tile:hover{border-color:var(--accent)}
.tile b{font:600 17px var(--head)}
.tile span{color:var(--dim);font-size:14.5px;font-weight:500}
.tile .num{font:600 13px var(--mono);color:var(--teal-ink)}
.tile .soon,.tile .now{margin:0}
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s3)}
.app{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:var(--s4);display:flex;flex-direction:column;gap:6px}
.app h3{font-size:16px} .app p{color:var(--dim);font-size:15px}
.words td,.words th{white-space:normal}
.flows{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s3)}
.flow{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:var(--s4)}
.flow h3{font-size:16px;margin-bottom:var(--s2)}
.flow ol{margin:0;padding-left:var(--s5);color:var(--dim);display:grid;gap:var(--s1)}
.prose .wrap{max-width:860px}
.prose p{margin-bottom:10px;color:var(--dim)}
.draft{background:var(--warn-soft);color:var(--warn);border-radius:12px;padding:var(--s3) var(--s4);margin:var(--s2) 0 18px}
.walls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin:22px 0}
.walls div{border:3px solid var(--ink);border-radius:14px;padding:18px;background:var(--card);display:flex;flex-direction:column;gap:var(--s1);text-align:center}
.walls span{color:var(--dim);font-size:14px}
.mail{font-size:17px;margin-top:14px}
main:focus{outline:none}
@media (max-width:1100px){ .benefits{grid-template-columns:repeat(3,minmax(0,1fr))} .four{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .split,.twocol{grid-template-columns:minmax(0,1fr)}
  .benefits,.proofs,.plans{grid-template-columns:minmax(0,1fr)}
  footer.site .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .four,.walls{grid-template-columns:minmax(0,1fr)}
  .scatter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabs{justify-content:flex-start}
  .chips{justify-content:flex-start}
  .chips a{overflow-wrap:anywhere}
  .founding .btn{width:100%;justify-content:center}
  .hero .ctas .btn{flex:1 1 100%;justify-content:center}
}

/* ── task 3.8: the Products menu, the catalogue, the module pages, the numbers and the cascade ── */
/* a colour per department (medhava/server/departments.js) */
.tone-teal{--tc:var(--tone-teal);--ts:var(--tone-teal-soft)}.tone-blue{--tc:var(--tone-blue);--ts:var(--tone-blue-soft)}.tone-amber{--tc:var(--tone-amber);--ts:var(--tone-amber-soft)}
.tone-rose{--tc:var(--tone-rose);--ts:var(--tone-rose-soft)}.tone-violet{--tc:var(--tone-violet);--ts:var(--tone-violet-soft)}.tone-sky{--tc:var(--tone-sky);--ts:var(--tone-sky-soft)}.tone-slate{--tc:var(--tone-slate);--ts:var(--tone-slate-soft)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) :is(.tone-teal,.tone-blue,.tone-amber,.tone-rose,.tone-violet,.tone-sky,.tone-slate){--ts:color-mix(in srgb,var(--tc) 22%,#0B1120)}
  :root:not([data-theme="light"]) .tone-teal{--tc:#5EEAD4} :root:not([data-theme="light"]) .tone-blue{--tc:#93C5FD} :root:not([data-theme="light"]) .tone-amber{--tc:#FCD34D}
  :root:not([data-theme="light"]) .tone-rose{--tc:#FDA4AF} :root:not([data-theme="light"]) .tone-violet{--tc:#C4B5FD} :root:not([data-theme="light"]) .tone-sky{--tc:#7DD3FC} :root:not([data-theme="light"]) .tone-slate{--tc:#CBD5E1} }

nav.links .prod::after{content:" ▾";font-size:12px}
nav.links .prod[aria-expanded="true"]{color:var(--accent)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lift);max-height:min(78vh,760px);overflow:auto;z-index:20}
.mega .wrap{padding-block:22px}
.catalog{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--s6);align-items:start}
.dtabs{display:flex;flex-direction:column;gap:var(--s1);position:sticky;top:0}
.dtab{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);text-align:left;border:0;background:transparent;border-radius:10px;padding:10px var(--s3);font-weight:700;font-size:15px;color:var(--dim);border-left:3px solid transparent}
.dtab i{font-style:normal;font:600 12px var(--mono);color:var(--faint)}
.dtab:hover,.dtab[aria-pressed="true"]{background:var(--ts);color:var(--tc);border-left-color:var(--tc)}
.dtabs .all{margin-top:10px;padding:var(--s2) var(--s3);text-decoration:none}
.dpanel>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:var(--s3) 2px;font-size:17px;color:var(--tc);border-bottom:2px solid var(--ts)}
.dpanel>summary::-webkit-details-marker{display:none}
.dpanel>summary i{font-style:normal;font:600 12px var(--mono);color:var(--faint)}
.catalog.menu .dpanel>summary{display:none}
.mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:var(--s1);align-items:start}
.mod{border:1px solid var(--line);border-radius:14px;background:var(--card);border-top:3px solid var(--tc)}
.mod[open]{grid-column:1/-1;box-shadow:var(--shadow)}
.mod>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s1) var(--s3);padding:14px var(--s4);align-items:start}
.mod>summary::-webkit-details-marker{display:none}
.mod .ic,.app .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--ts);color:var(--tc);flex:0 0 40px}
.mi{width:22px;height:22px}
.mod .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mod .txt b{font:600 16px var(--head);color:var(--ink)}
.mod .txt span{color:var(--dim);font-size:14px;font-weight:500}
.mod .meta{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:600 12.5px var(--sans);color:var(--faint)}
.mod .meta .soon,.mod .meta .now{margin-left:0}
.mod>summary::after{content:"＋ see the apps";grid-column:2;font-size:13px;font-weight:700;color:var(--tc)}
.mod[open]>summary::after{content:"－ hide the apps"}
.applist{list-style:none;margin:0;padding:0 var(--s4) 6px 68px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}
.applist li{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--dim);border-left:2px solid var(--ts);padding-left:10px}
.applist b{color:var(--ink);font-size:14.5px}
.mod .more{display:inline-block;margin:6px var(--s4) var(--s4) 68px}
.catalog.page{grid-template-columns:minmax(0,1fr);margin-top:22px}
.catalog.page .dtabs{flex-direction:row;flex-wrap:wrap;position:static}
.catalog.page .dtab{border-left:0;border-bottom:3px solid transparent}
.catalog.page .dtab{text-decoration:none}
.catalog.page .dtab:hover{border-bottom-color:var(--tc)}
.catalog.page .dpanels{display:grid;gap:18px}
.catalog.page .all{display:none}
/* the module page */
.modhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:36px;align-items:start;margin-top:6px}
.badge{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--tc);color:var(--on-brand);border-radius:999px;padding:6px var(--s2) 6px 14px;font-size:14px}
.badge .mi{width:18px;height:18px}
.badge b{font-weight:700}
.badge span{background:var(--on-brand-tint);border-radius:999px;padding:2px 10px;font:700 12px var(--sans);text-transform:uppercase;letter-spacing:.05em}
.modhead h1{margin-top:14px}
.flowline{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.flowline .lbl{font:700 12px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-right:var(--s1)}
.flowline a{border:1px solid var(--line);border-radius:999px;padding:var(--s1) var(--s3);background:var(--card);font-size:14px;text-decoration:none;color:var(--ink)}
.dept{margin-top:14px;color:var(--faint);font-size:14px}
.shot{margin:0;transform:perspective(1400px) rotateY(-4deg);box-shadow:var(--shadow);border-radius:12px}
.shot figcaption{font-size:13px;color:var(--faint);margin-top:var(--s2);font-style:italic}
.app{flex-direction:row;gap:var(--s3);align-items:flex-start}
/* the numbers strip */
.numbers{background:var(--night);color:var(--on-brand);padding-block:22px}
.numbers .wrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);text-align:center}
.numbers b{display:block;font:600 clamp(26px,3.4vw,38px)/1.1 var(--head);background:var(--night-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.numbers span{font-size:14px;color:var(--night-text)}
/* one action reaches everywhere */
.cascade{margin-top:30px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:28px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:var(--s6)}
.cascade h3{font-size:21px;margin-bottom:var(--s2)}
.cascade p{color:var(--dim)}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:f}
.flow li{position:relative;display:flex;flex-direction:column;gap:3px;padding:var(--s3);border-radius:12px;background:var(--accent-soft);border:1px solid var(--line);min-width:0}
.flow li b{font-size:14.5px}
.flow li span{font-size:13px;color:var(--dim)}
.flow li:not(:last-child)::after{content:"→";position:absolute;right:-10px;top:50%;transform:translate(50%,-50%);color:var(--accent);font-weight:800;z-index:1}
@media (prefers-reduced-motion:no-preference){
  .flow li{animation:lit 5s infinite}
  .flow li:nth-child(2){animation-delay:.6s}.flow li:nth-child(3){animation-delay:1.2s}.flow li:nth-child(4){animation-delay:1.8s}.flow li:nth-child(5){animation-delay:2.4s}
  @keyframes lit{0%,8%{background:var(--accent-soft)}14%,40%{background:var(--teal-soft);border-color:var(--teal)}60%,100%{background:var(--accent-soft)}}
}
@media (max-width:900px){
  /* the header blurs what is behind it, which makes it the frame for anything fixed inside it,
     so the phone menu is sized from the screen rather than pinned to its bottom edge */
  .mega{top:100%;height:calc(100dvh - 62px);max-height:none}
  .catalog,.modhead,.cascade{grid-template-columns:minmax(0,1fr)}
  .catalog.menu .dtabs{display:none}
  .catalog.menu .dpanel>summary{display:flex}
  .catalog.menu .dpanels{display:grid;gap:6px}
  .mods,.applist{grid-template-columns:minmax(0,1fr)}
  .applist{padding-left:var(--s4)}
  .mod .more{margin-left:var(--s4)}
  .numbers .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow li:not(:last-child)::after{content:"↓";right:50%;top:auto;bottom:-10px;transform:translate(50%,50%)}
  .shot{transform:none}
}
body.mega-open{overflow:hidden}
@media (min-width:901px){ body.mega-open{overflow:auto} }

/* ── task 3.7: movement, light 3D, floating numbers and the two infographics ──
   Everything that moves sits inside a prefers-reduced-motion:no-preference block or behind
   body.motion, which web/landing.js sets only when the device has not asked to reduce motion.
   With either off the page is complete and still. Only transform and opacity are animated. */
.stage{position:relative;--rx:4deg;--ry:-8deg;min-width:0}
.stage .window{transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out;box-shadow:var(--shadow-window)}
/* task 3.10: the chips have rows of their own, above and below the window, so they can never
   land on a word, a figure or a key (website.test.js W21 measures it at nine widths). The bottom
   row keeps 12 px clear of the window because a chip floats up 9 px. */
.chips-float{display:flex;flex-wrap:nowrap;gap:10px;min-height:31px}
.chips-float.top{justify-content:flex-end;margin:0 6% 10px 0}
.chips-float.bottom{justify-content:flex-start;margin:14px 0 0 4%}
.chips-float .chip{position:relative;z-index:2;font:700 13.5px/1 var(--mono);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:var(--s2) var(--s3);box-shadow:var(--shadow);white-space:nowrap}
.chip.c4{color:var(--teal-ink)}.chip.c5{color:var(--violet-ink)}
/* the counts chips only where the row has room for all four (the numbers strip shows them anyway) */
@media (max-width:1199px) and (min-width:901px), (max-width:680px){ .chip.c4,.chip.c5{display:none} }
@media (prefers-reduced-motion: reduce){ .stage .window{transform:none} }
@media (max-width:900px){ .stage .window{transform:none} .chips-float.top{margin-right:0}.chips-float.bottom{margin-left:0} }
@media (max-width:400px){ .chips-float{gap:6px} .chips-float .chip{font-size:12px;padding:7px 9px} }
/* the module map */
.mapfig{margin:28px 0 0;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:var(--s4)}
.modmap{display:block;width:100%;max-width:900px;height:auto;margin:0 auto}
.modmap .edge{fill:none;stroke:var(--tc);stroke-opacity:.28;stroke-width:1.6;transition:stroke-opacity .2s,stroke-width .2s}
.modmap.dim .edge{stroke-opacity:.06}
.modmap .edge.lit{stroke-opacity:.95;stroke-width:3}
.modmap .node circle{fill:var(--tc);stroke:var(--card);stroke-width:3}
.modmap .node text{fill:var(--on-brand);font:700 10px var(--mono);text-anchor:middle;pointer-events:none}
.modmap .node:hover circle,.modmap .node:focus circle{stroke:var(--tc);stroke-width:5}
.modmap .dlabel{fill:var(--tc);font:700 17px var(--sans)}
.modmap .mapname{fill:var(--ink);font:600 26px var(--head)}
.modmap .mapsub{fill:var(--faint);font:600 15px var(--sans)}
.mapfig figcaption{text-align:center;color:var(--faint);font-size:14px;margin-top:6px}
/* walls between businesses */
.walls2{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:var(--s5) 0 6px;padding-top:var(--s1)}
.walls2 .room{border:3px solid var(--ink);border-radius:14px;padding:var(--s4) 10px;background:var(--card);display:flex;flex-direction:column;gap:var(--s1);text-align:center}
.walls2 .room span{color:var(--dim);font-size:13.5px}
.walls2 .probe{position:absolute;top:50%;left:22%;font:800 26px/1 var(--sans);color:var(--neg);opacity:0;transform:translateY(-50%)}
.walls2 .refused{position:absolute;top:-6px;left:28%;font:700 12px var(--sans);color:var(--on-brand);background:var(--neg);border-radius:999px;padding:2px 9px;opacity:0}
@media (max-width:620px){ .walls2{grid-template-columns:minmax(0,1fr)} .walls2 .probe,.walls2 .refused{display:none} }
@media (prefers-reduced-motion:no-preference){
  .chips-float .chip{animation:floaty 6s ease-in-out infinite}
  .chip.c2{animation-delay:-1.5s}.chip.c3{animation-delay:-3s}.chip.c4{animation-delay:-4.2s}.chip.c5{animation-delay:-2.2s}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  @media (max-width:900px){ .stage .window{animation:bob 7s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} }
  .wave i{transform-origin:center;animation:speak 1.1s ease-in-out infinite}
  .wave i:nth-child(2){animation-delay:.15s}.wave i:nth-child(3){animation-delay:.3s}.wave i:nth-child(4){animation-delay:.45s}.wave i:nth-child(5){animation-delay:.6s}
  .persona.navi .wave i{animation-delay:.55s}.persona.navi .wave i:nth-child(odd){animation-delay:.8s}
  @keyframes speak{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1.15)}}
  .walls2 .probe{animation:probe 3.2s ease-in-out infinite}
  .walls2 .refused{animation:refused 3.2s ease-in-out infinite}
  @keyframes probe{0%{opacity:0;transform:translate(0,-50%)}15%{opacity:1}45%{opacity:1;transform:translate(46px,-50%)}60%{opacity:1;transform:translate(10px,-50%)}75%,100%{opacity:0;transform:translate(10px,-50%)}}
  @keyframes refused{0%,40%{opacity:0}47%,70%{opacity:1}85%,100%{opacity:0}}
  body.motion .scatter.play span{animation:gather .9s cubic-bezier(.2,.8,.2,1) backwards}
  body.motion .scatter.play span:nth-child(1){--fx:-60px;--fy:-40px;--fr:-14deg}
  body.motion .scatter.play span:nth-child(2){--fx:10px;--fy:-70px;--fr:9deg;animation-delay:.06s}
  body.motion .scatter.play span:nth-child(3){--fx:70px;--fy:-30px;--fr:16deg;animation-delay:.12s}
  body.motion .scatter.play span:nth-child(4){--fx:-70px;--fy:30px;--fr:12deg;animation-delay:.18s}
  body.motion .scatter.play span:nth-child(5){--fx:0px;--fy:60px;--fr:-10deg;animation-delay:.24s}
  body.motion .scatter.play span:nth-child(6){--fx:60px;--fy:40px;--fr:-16deg;animation-delay:.3s}
  @keyframes gather{from{transform:translate(var(--fx),var(--fy)) rotate(var(--fr));opacity:.35}}
  body.motion .scatter.play b{animation:pop .5s .75s cubic-bezier(.2,.8,.2,1.4) backwards}
  @keyframes pop{from{transform:scale(.6);opacity:0}}
  body.motion .modmap.play .edge{stroke-dasharray:900;animation:draw 1.6s ease-out backwards}
  body.motion .modmap.play .node{animation:fadein .6s ease-out backwards}
  @keyframes draw{from{stroke-dashoffset:900}}
  @keyframes fadein{from{opacity:0}}
  body.motion section.block.rise>.wrap{animation:rise .7s ease-out backwards}
  @keyframes rise{from{opacity:.2;transform:translateY(26px)}}
}

/* The preview band (task 1.7a, K57): only on the owner's preview server, never in the product */
.preview-band{background:var(--warn-soft);color:var(--warn);border-bottom:1px solid var(--warn);
  padding:var(--s2) var(--s4);font-size:14px;line-height:1.4;text-align:center}
.preview-version{display:inline-block;margin-left:var(--s2)}