/* YesBOS — design system v4: glass + dimension
   ----------------------------------------------------------------------------
   Glass only reads as glass when there is coloured light behind it to refract.
   A frosted panel over flat white is just a grey box, so every band carries its
   own ambient blobs in the four brand hues and the surfaces sit on top of them.

   Depth is kept on every screen rather than switched off below a breakpoint.
   Phones are the primary device for this audience, so the perspective angle and
   the blur radius scale down instead of disappearing — it should feel like the
   same object in the hand as on the desk.

   The cost is real: backdrop-filter is expensive on budget Android. Blurred
   layers are rationed, radii drop on small viewports, and the whole thing
   collapses under prefers-reduced-motion.

   ----------------------------------------------------------------------------
   (v3 notes below)
/* YesBOS — design system v3
   ----------------------------------------------------------------------------
   v2 was tidy and dead: one indigo, white boxes, nothing moving. The mark has
   four hues in it and the site was using a fifth one that appears nowhere in
   the logo. So the four become the working palette — every tile, icon, stat and
   panel is assigned one — and colour does the work that borders were doing.
   ------------------------------------------------------------------------- */

:root{
  /* the mark, and nothing but the mark */
  --c1:#52AFE5;   /* sky     */
  --c2:#3B48A3;   /* indigo  */
  --c3:#522B8F;   /* violet  */
  --c4:#802392;   /* magenta */
  --ink:#0B0B0D;

  --c1-t:#E8F4FC; --c2-t:#E7EAF7; --c3-t:#EDE7F5; --c4-t:#F6E9F7;
  --c1-d:#2E8FC9; --c2-d:#2F3A85; --c3-d:#42226F; --c4-d:#661A75;

  --k0:#FFFFFF; --k25:#FCFCFE; --k50:#F4F5F9; --k100:#EAECF3;
  --k200:#DCDFEA; --k400:#98A0B5; --k500:#6B7288; --k700:#3A4053;
  --k900:#151824; --k950:#0A0C14;

  --canvas:#FCFCFE;
  --ok:#0E8A4A; --warn:#B8541B;

  --brand:linear-gradient(112deg,var(--c1) 0%,var(--c2) 34%,var(--c3) 66%,var(--c4) 100%);

  --e1:0 1px 2px rgba(10,12,20,.05), 0 1px 1px rgba(10,12,20,.04);
  --e2:0 2px 4px rgba(10,12,20,.05), 0 10px 24px -8px rgba(10,12,20,.11);
  --e3:0 6px 12px rgba(10,12,20,.07), 0 28px 56px -16px rgba(10,12,20,.2);

  /* glass */
  --g-bg:rgba(255,255,255,.62);
  --g-br:rgba(255,255,255,.85);
  --g-blur:22px;
  --g-in:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.28);
  --gd-bg:rgba(255,255,255,.07);
  --gd-br:rgba(255,255,255,.15);
  --gd-in:inset 0 1px 0 rgba(255,255,255,.16);
  --persp:1400px;

  --r:14px; --r-lg:20px; --r-xl:30px;
  --wrap:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--k900);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Noto Sans Devanagari',sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--c3);color:#fff}
:focus-visible{outline:2.5px solid var(--c2);outline-offset:3px;border-radius:5px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,4vw,34px)}

/* ---- type ---------------------------------------------------------------- */
h1,h2,h3,h5{margin:0;font-weight:800;letter-spacing:-.028em;line-height:1.08;color:var(--k950)}
h1{font-size:clamp(38px,5.1vw,64px);letter-spacing:-.038em;line-height:1.02}
h2{font-size:clamp(30px,4vw,52px);letter-spacing:-.034em;line-height:1.04}
h3{font-size:19px;letter-spacing:-.016em;line-height:1.32;font-weight:700}
h5{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--k500)}
p{margin:0}
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.018em;
  background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin-top:0;font-size:clamp(16.5px,1.4vw,19.5px);line-height:1.58;color:var(--k700);max-width:52ch}
.muted{color:var(--k700)}
.tiny{font-size:13.5px;line-height:1.55;color:var(--k500)}
.money{font-variant-numeric:tabular-nums;letter-spacing:-.015em}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 11px;border-radius:99px;
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--c3);background:var(--g-bg);-webkit-backdrop-filter:blur(14px) saturate(1.7);backdrop-filter:blur(14px) saturate(1.7);border:1px solid var(--g-br);box-shadow:var(--e1),var(--g-in);
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.sec.dark .eyebrow{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}

/* ---- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 24px;border-radius:99px;
  font-size:15.5px;font-weight:700;letter-spacing:-.01em;cursor:pointer;border:1px solid transparent;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s;
}
.btn:active{transform:translateY(1px) scale(.99)}
.b1{background:var(--brand);color:#fff;box-shadow:0 6px 18px -6px rgba(82,43,143,.55),var(--e2)}
.b1:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(82,43,143,.6),var(--e3);filter:saturate(1.12)}
.b2{background:var(--g-bg);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);color:var(--k900);border-color:var(--g-br);box-shadow:var(--e1),var(--g-in)}
.b2:hover{transform:translateY(-2px);border-color:var(--c1);box-shadow:var(--e2)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.on-dark .b2{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.26);backdrop-filter:blur(8px)}
.on-dark .b2:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}

/* ---- header -------------------------------------------------------------- */
#hd{position:sticky;top:0;z-index:60;background:rgba(252,252,254,.72);
  backdrop-filter:saturate(1.8) blur(18px);-webkit-backdrop-filter:saturate(1.8) blur(18px);
  border-bottom:1px solid transparent;transition:.25s}
#hd.s{border-bottom-color:var(--k200);background:rgba(252,252,254,.92)}
.nav{display:flex;align-items:center;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19.5px;letter-spacing:-.035em;color:var(--k950)}
.brand img{width:34px;height:34px;transition:transform .4s var(--ease)}
.brand:hover img{transform:rotate(35deg) scale(1.06)}
.nl{display:flex;align-items:center;gap:2px;margin-left:8px;flex:1}
.nl>a,.dd>a{padding:9px 13px;border-radius:99px;font-size:14.5px;font-weight:600;color:var(--k700);transition:.16s}
.nl>a:hover,.dd>a:hover{background:var(--c1-t);color:var(--c2-d)}
.dd{position:relative;perspective:900px}
.dd>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:2px;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg);opacity:.45}
.menu{position:absolute;top:calc(100% + 12px);left:-8px;width:580px;display:grid;grid-template-columns:1fr 1fr;
  gap:2px;padding:11px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--k200);box-shadow:var(--e3);
  opacity:0;visibility:hidden;transform:rotateX(-9deg) translateY(-8px);transform-origin:top center;transition:.24s var(--ease)}
.dd:hover .menu,.dd:focus-within .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:block;padding:11px 13px;border-radius:11px;transition:.15s}
.menu a:hover{background:var(--c1-t)}
.menu b{display:block;font-size:14.5px;font-weight:700;color:var(--k950);letter-spacing:-.014em}
.menu span{display:block;font-size:12.5px;line-height:1.45;color:var(--k500);margin-top:2px}
.signin{font-size:14.5px;font-weight:600;color:var(--k700);padding:9px 13px;border-radius:99px}
.signin:hover{background:var(--k100);color:var(--k950)}
.burger{display:none;width:46px;height:46px;border:1px solid var(--g-br);background:var(--g-bg);border-radius:15px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--e1),var(--g-in);
  cursor:pointer;padding:0;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.burger i{width:17px;height:2px;background:var(--k900);border-radius:2px;display:block}
/* The phone sheet, which has to be THIS SITE and not a different one.
   ------------------------------------------------------------------
   It was twenty-five rows: every destination at 16px/600, near-black, each
   with a hairline under it, and the group headings — `h5`, the site's 11.5px
   eyebrow — SMALLER than the things they were meant to be heading. So the
   items outweighed the structure and the whole thing read as a menu card in a
   dhaba rather than as a navbar. It threw away everything the desktop header
   knows: the two grouped menus, the one-line description under each
   destination, the two columns, and a primary action that looks like a
   primary action.

   What is here mirrors the desktop, element for element. The two mega-menus
   become two disclosures whose triggers are the same two words and carry the
   same weight a heading should (17.5px/800 against a 15px item, where it was
   11.5 against 16). Inside them the destinations keep the desktop's own
   `<b>` title and grey `<span>` description, so a phone is told what "Khata &
   money" is exactly as a desktop is. The site-level links, which have no
   descriptions on the desktop either, become a two-column field of chips —
   the same geometry as the mega-menu, at a density that cannot be mistaken
   for a list of dishes. And the hairline under every row is gone, because
   that rule is the single strongest thing making the old sheet read as a
   menu: grouping separates now, and a border no longer has to.

   Closed on open, like the desktop's own menus, so the sheet arrives at seven
   rows rather than twenty-five. The count beside each trigger is the one
   thing a closed disclosure otherwise hides. `<details>` and not a script,
   so it works before JS and the reduced-motion rule below already flattens
   the animation. */
.sheet{position:fixed;inset:0;z-index:80;padding:18px 0 26px;overflow-y:auto;background:rgba(250,250,253,.99);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
  transform:translateY(-100%);transition:transform .32s var(--ease);visibility:hidden}
.sheet.open{transform:none;visibility:visible}
.sheet-in{display:flex;flex-direction:column;gap:18px}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet-top .brand{font-size:18.5px}
.sheet-top .brand img{width:30px;height:30px}
.sheet .x{width:44px;height:44px;font-size:26px;line-height:1;flex:none;
  background:var(--g-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--g-br);border-radius:15px;cursor:pointer;color:var(--k900);box-shadow:var(--e1)}
.sheet-nav{display:flex;flex-direction:column}
.sgrp{border-top:1px solid var(--k100)}
.sheet-nav>.sgrp:first-child{border-top:0}
.sgrp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:14px 2px;font-size:17.5px;font-weight:800;letter-spacing:-.026em;color:var(--k950)}
.sgrp>summary::-webkit-details-marker{display:none}
.sgrp>summary::after{content:"";margin-left:auto;width:8px;height:8px;flex:none;
  border-right:2px solid var(--k400);border-bottom:2px solid var(--k400);
  transform:rotate(45deg) translateY(-3px);transition:transform .22s var(--ease)}
.sgrp[open]>summary::after{transform:rotate(-135deg) translateY(1px)}
.sgrp .cnt{font-size:12.5px;font-weight:700;letter-spacing:0;color:var(--k400)}
.sgrid{display:grid;gap:5px;padding:2px 0 14px}
.sgrid a{display:block;padding:10px 13px;border-radius:12px;background:var(--k25);border:1px solid var(--k100)}
.sgrid b{display:block;font-size:15px;font-weight:700;letter-spacing:-.014em;color:var(--k950)}
.sgrid span{display:block;font-size:12.5px;line-height:1.45;color:var(--k500);margin-top:2px}
.sgrp-flat{padding:16px 0 4px}
.sgrp-flat h5{margin:0 0 10px}
.schips{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.schips a{padding:11px 12px;border-radius:12px;font-size:14px;font-weight:600;color:var(--k700);
  background:var(--g-bg);border:1px solid var(--k100);line-height:1.3}
/* The one action that is not a browsing link, kept where the thumb is and
   given the shape it has in the header — it was row twenty-five of the list,
   indistinguishable from Contact. */
.sheet-act{padding-top:18px;display:grid;gap:9px;border-top:1px solid var(--k100)}
.sheet-act .btn{width:100%}

/* ---- sections ------------------------------------------------------------ */
.sec{padding:clamp(60px,6.5vw,104px) 0;position:relative}
.sec.tight{padding:clamp(38px,4vw,60px) 0}

.sec.dark{color:#fff}
.sec.dark>.wrap{background:var(--k950);border-radius:var(--r-xl);overflow:hidden;
  padding-block:clamp(46px,5.5vw,80px);padding-inline:clamp(24px,4vw,56px);
  box-shadow:var(--e3);position:relative}
.sec.dark>.glow{border-radius:var(--r-xl);inset:0 clamp(18px,4vw,34px)}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec.dark .lede,.sec.dark .muted{color:rgba(255,255,255,.74)}
.sec.dark .tiny{color:rgba(255,255,255,.5)}
.head{display:grid;grid-template-columns:1.05fr .95fr;gap:18px clamp(20px,4.5vw,64px);align-items:end}
.head>.eyebrow{grid-column:1/-1;justify-self:start}
.head h2{max-width:18ch}
.head .lede{padding-bottom:6px}
@media(max-width:900px){.head{grid-template-columns:1fr;align-items:start}.head .lede{padding-bottom:0}}

/* A single field behind the whole document, so glass has something to refract
   at every scroll position rather than only inside the hero. */
.field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.field i{position:absolute;border-radius:50%;display:block;filter:blur(90px);
  animation:drift 26s var(--ease) infinite alternate}
.field i:nth-child(1){width:720px;height:720px;background:var(--c1);opacity:.20;top:-12%;left:46%}
.field i:nth-child(2){width:620px;height:620px;background:var(--c4);opacity:.15;top:32%;left:-12%;animation-delay:-9s}
.field i:nth-child(3){width:560px;height:560px;background:var(--c3);opacity:.16;top:64%;left:62%;animation-delay:-16s}

/* ---- ambient light, so glass has something to refract ------------------- */
.glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.glow i{position:absolute;border-radius:50%;display:block;filter:blur(70px)}
.sec>.wrap{position:relative;z-index:1}
.sec{overflow:hidden}

/* ---- hero ---------------------------------------------------------------- */
.hero{position:relative;padding:clamp(34px,4.2vw,64px) 0 clamp(56px,6vw,96px);overflow:hidden;perspective:var(--persp)}
.mesh{position:absolute;inset:-30% -20% auto;height:1000px;pointer-events:none;z-index:0}
.mesh i{position:absolute;border-radius:50%;filter:blur(74px);display:block;animation:drift 22s var(--ease) infinite alternate}
.mesh i:nth-child(1){width:620px;height:620px;background:var(--c1);opacity:.30;top:6%;left:52%}
.mesh i:nth-child(2){width:540px;height:540px;background:var(--c4);opacity:.24;top:26%;left:74%;animation-delay:-7s}
.mesh i:nth-child(3){width:480px;height:480px;background:var(--c3);opacity:.20;top:0;left:34%;animation-delay:-13s}
.mesh i:nth-child(4){width:400px;height:400px;background:var(--c2);opacity:.14;top:44%;left:8%;animation-delay:-4s}
@keyframes drift{to{transform:translate3d(-50px,44px,0) scale(1.14)}}
.hero .wrap{position:relative;z-index:1}
.cols{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,4.5vw,64px);align-items:center}
.hero h1{margin-top:22px;max-width:14ch}
.hero .lede{margin-top:24px}

/* ---- the device, with things floating off it ---------------------------- */
.demo{position:relative;isolation:isolate;transform-style:preserve-3d}
.demo .app{position:relative;z-index:1}
.float{z-index:2}
\.app{position:relative;z-index:1;border-radius:var(--r-xl);overflow:hidden;transform-style:preserve-3d;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 50px 90px -34px rgba(82,43,143,.5),var(--e3),var(--g-in);
  transform:rotateY(var(--ry,-7deg)) rotateX(var(--rx,3deg));transition:transform .45s var(--ease)}
.app-top{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(255,255,255,.4);border-bottom:1px solid rgba(255,255,255,.6)}
.tl{display:flex;gap:6px}
.tl i{width:9px;height:9px;border-radius:50%;background:var(--k200);display:block}
.app-name{font-size:12.5px;font-weight:600;color:var(--k500);flex:1}
.net{font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;background:#E4F7EC;color:var(--ok)}
.net.off{background:#FDEDE3;color:var(--warn)}
.app-body{display:flex;min-height:308px}
.rail{width:52px;background:rgba(10,12,20,.9);display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 0}
.rail i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:rgba(255,255,255,.4);font-style:normal;font-size:14px}
.rail i.on{background:var(--brand);color:#fff}
.pane{flex:1;display:grid;grid-template-columns:1.35fr 1fr}
.pane>div:first-child{padding:16px}
.said{display:flex;align-items:center;gap:12px;padding:12px 15px;border-radius:var(--r);
  background:var(--brand);color:#fff;font-weight:700;font-size:14.5px;box-shadow:0 8px 20px -8px rgba(82,43,143,.6)}
.wv{display:flex;align-items:center;gap:2.5px;height:16px}
.wv i{width:2.5px;background:rgba(255,255,255,.9);border-radius:2px;display:block;animation:wv 1s var(--ease) infinite}
.wv i:nth-child(1){height:6px}.wv i:nth-child(2){height:13px;animation-delay:.1s}
.wv i:nth-child(3){height:9px;animation-delay:.2s}.wv i:nth-child(4){height:15px;animation-delay:.3s}
.wv i:nth-child(5){height:7px;animation-delay:.4s}
@keyframes wv{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.tile{border:1px solid rgba(255,255,255,.8);border-radius:12px;padding:10px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.25s var(--ease)}
.tile b{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.015em;white-space:nowrap}
.tile span{display:block;font-size:11px;color:var(--k500);margin-top:1px}
.tile.hit{border-color:var(--c1);background:var(--c1-t);transform:translateY(-3px);box-shadow:0 10px 20px -8px rgba(82,175,229,.7)}
.cart{background:rgba(244,245,249,.6);border-left:1px solid rgba(255,255,255,.7);padding:16px;display:flex;flex-direction:column}
.cart h5{margin-bottom:10px}
.ci{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--k100)}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:12px}
.tot span{font-size:12.5px;color:var(--k500);font-weight:600}
.tot b{font-size:27px;font-weight:800;letter-spacing:-.04em}
.paybtn{margin-top:12px;background:var(--brand);color:#fff;text-align:center;padding:12px;border-radius:12px;font-weight:700;font-size:13.5px}

.float{position:absolute;display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:16px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--e3);font-size:13px;font-weight:700;animation:bob 5s var(--ease) infinite alternate}
.float b{font-size:17px;font-weight:800;letter-spacing:-.03em;display:block}
.float span{display:block;font-size:11px;font-weight:600;color:var(--k500);margin-top:1px}
.float .dot{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff}
.f1{left:-72px;top:-22px;transform:translateZ(60px)}
.f2{right:-58px;bottom:62px;animation-delay:-2.6s;transform:translateZ(80px)}
@keyframes bob{to{transform:translateY(-12px)}}

/* ---- colour-coded picker ------------------------------------------------- */
.pick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;perspective:var(--persp)}
.pk{position:relative;display:block;padding:22px 20px 20px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--g-bg);-webkit-backdrop-filter:blur(var(--g-blur)) saturate(1.7);backdrop-filter:blur(var(--g-blur)) saturate(1.7);border:1px solid var(--g-br);box-shadow:var(--e1),var(--g-in);transform-style:preserve-3d;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.pk::before{content:"";position:absolute;inset:0;background:var(--c);opacity:.05;transition:opacity .3s}
.pk::after{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.pk:hover{transform:translateY(-7px) rotateX(4deg);border-color:rgba(255,255,255,.95);
  box-shadow:0 26px 46px -16px color-mix(in srgb,var(--c) 60%,transparent),var(--e2),var(--g-in)}
.pk:hover::before{opacity:.11}
.pk>*{position:relative;transform-style:preserve-3d}
.pk .ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-bottom:15px;
  background:var(--c);color:#fff;transform:translateZ(28px);
  box-shadow:0 12px 22px -8px color-mix(in srgb,var(--c) 78%,transparent),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .3s var(--ease)}
.pk:hover .ic{transform:translateZ(46px) rotate(-8deg) scale(1.08)}
.pk .ic svg{width:22px;height:22px}
.pk b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--k950);transform:translateZ(14px)}
.pk .sub{display:block;font-size:13px;line-height:1.5;color:var(--k500);margin-top:6px;transform:translateZ(8px)}

/* ---- numbered steps ------------------------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px);margin-top:46px;perspective:var(--persp)}
.step{position:relative;padding:30px 24px 26px;border-radius:var(--r-lg);overflow:hidden;transform-style:preserve-3d;
  background:var(--g-bg);-webkit-backdrop-filter:blur(var(--g-blur)) saturate(1.7);backdrop-filter:blur(var(--g-blur)) saturate(1.7);border:1px solid var(--g-br);box-shadow:var(--e1),var(--g-in);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.step:hover{transform:translateY(-6px) rotateX(3deg);
  box-shadow:0 24px 44px -18px color-mix(in srgb,var(--c) 55%,transparent),var(--e2),var(--g-in)}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--c)}
.step .n{display:block;font-size:52px;font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--c);transform:translateZ(22px)}
.step h3{margin:12px 0 8px;transform:translateZ(12px)}
.step p{color:var(--k700);font-size:15px}

/* ---- dense module list --------------------------------------------------- */
.mods{display:grid;grid-template-columns:1fr 1fr;gap:6px clamp(20px,3.5vw,52px);margin-top:40px}
.mod{display:flex;gap:16px;padding:16px;border-radius:16px;border:1px solid transparent;transition:.24s var(--ease)}
.mod:hover{background:var(--gd-bg);border-color:var(--gd-br);transform:translateX(5px);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sec:not(.dark) .mod:hover{background:var(--g-bg);border-color:var(--g-br)}
.mod .ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:var(--c);color:#fff;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--c) 80%,transparent)}
.mod:hover .ic{transform:scale(1.09) rotate(-6deg)}
.mod .ic svg{width:21px;height:21px}
.mod>span:last-child{display:block;min-width:0}
.mod b{display:block;font-size:16px;font-weight:700;letter-spacing:-.018em;color:#fff}
.sec:not(.dark) .mod b{color:var(--k950)}
.mod b+span{display:block;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.66);margin-top:3px}
.sec:not(.dark) .mod b+span{color:var(--k500)}

/* ---- cards --------------------------------------------------------------- */
.grid{display:grid;gap:16px;margin-top:40px;perspective:var(--persp)}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.card{position:relative;border-radius:var(--r-lg);padding:26px;overflow:hidden;transform-style:preserve-3d;
  background:var(--g-bg);-webkit-backdrop-filter:blur(var(--g-blur)) saturate(1.7);backdrop-filter:blur(var(--g-blur)) saturate(1.7);border:1px solid var(--g-br);box-shadow:var(--e1),var(--g-in);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-6px) rotateX(3deg);box-shadow:var(--e2),var(--g-in)}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--c,var(--k200))}
.card.tint::after{content:"";position:absolute;inset:0;background:var(--c);opacity:.06;pointer-events:none}
.card.tint>*{position:relative;z-index:1}
.card.fill{background:var(--brand);border-color:rgba(255,255,255,.28);color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 26px 50px -20px rgba(82,43,143,.75),inset 0 1px 0 rgba(255,255,255,.3)}
.card.fill h3{color:#fff}.card.fill .muted{color:rgba(255,255,255,.86)}.card.fill::before{display:none}

/* ---- stats --------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);perspective:var(--persp)}
.st{position:relative;padding:26px 22px;border-radius:var(--r-lg);overflow:hidden;transform-style:preserve-3d;
  background:var(--g-bg);-webkit-backdrop-filter:blur(var(--g-blur)) saturate(1.7);backdrop-filter:blur(var(--g-blur)) saturate(1.7);border:1px solid var(--g-br);box-shadow:var(--e1),var(--g-in);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.st::after{content:"";position:absolute;inset:0;background:var(--c);opacity:.07;pointer-events:none}
.st:hover{transform:translateY(-6px) rotateX(4deg);
  box-shadow:0 24px 42px -18px color-mix(in srgb,var(--c) 55%,transparent),var(--e2),var(--g-in)}
.st>*{position:relative;z-index:1}
.st b{display:block;font-size:clamp(40px,4.8vw,62px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--c);transform:translateZ(18px)}
.st span{display:block;font-size:13.5px;line-height:1.5;color:var(--k700);margin-top:12px}

/* ---- closing panel ------------------------------------------------------- */
.cta{position:relative;border-radius:var(--r-xl);padding:clamp(46px,6vw,84px);text-align:center;overflow:hidden;
  color:#fff;background:var(--k950)}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.95;
  background:radial-gradient(72% 88% at 16% 4%,var(--c3) 0%,transparent 60%),
             radial-gradient(64% 78% at 90% 100%,var(--c1) 0%,transparent 62%),
             radial-gradient(56% 70% at 74% 0%,var(--c4) 0%,transparent 58%),
             radial-gradient(60% 60% at 6% 96%,var(--c2) 0%,transparent 62%)}
.cta i{display:none}
.cta>*:not(i){position:relative;z-index:1}
.cta h2{color:#fff;max-width:17ch;margin-inline:auto}
.cta p{margin-top:18px;color:rgba(255,255,255,.82);max-width:54ch;margin-inline:auto;font-size:17.5px}
.cta .btns{justify-content:center}
.cta .tiny{color:rgba(255,255,255,.56);margin-top:20px}
.cta .b1{background:#fff;color:var(--k950);box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.cta .b2{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cta .b2:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.55);color:#fff}
.cta .b1:hover{background:#fff;filter:none;transform:translateY(-2px)}

/* ---- footer -------------------------------------------------------------- */
footer{background:var(--k950);color:rgba(255,255,255,.62);padding:clamp(50px,5vw,76px) 0 32px;font-size:14px;
  position:relative;overflow:hidden}
footer::before{content:"";position:absolute;top:-60%;left:-10%;width:700px;height:560px;
  background:radial-gradient(closest-side,var(--c3),transparent 70%);opacity:.22;filter:blur(60px)}
footer .wrap{position:relative;z-index:1}
.fcols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(24px,4vw,48px)}
.fbrand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19.5px;letter-spacing:-.035em;color:#fff}
.fbrand img{width:34px;height:34px}
.fnote{margin-top:15px;font-size:13.5px;line-height:1.6;max-width:38ch;color:rgba(255,255,255,.52)}
footer h5{color:rgba(255,255,255,.42);margin-bottom:12px}
footer .fcols a{display:block;padding:5px 0;color:rgba(255,255,255,.68);font-size:13.5px;transition:color .15s}
footer .fcols a:hover{color:var(--c1)}
.fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:46px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:rgba(255,255,255,.44)}
.fbot a{color:rgba(255,255,255,.62)}.fbot a:hover{color:#fff}

/* ---- scroll reveal ------------------------------------------------------- */
.js .rv{opacity:0;transform:translateY(26px) rotateX(-5deg);transform-origin:top center;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---- responsive ---------------------------------------------------------- */
@media(max-width:1020px){
  .pick{grid-template-columns:repeat(2,1fr)}
  .fcols{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .float{display:none}
}
@media(max-width:900px){
  .nl,.signin{display:none}.burger{display:flex}
  .nav{justify-content:space-between;gap:12px}
  .nav>*:last-child{margin-left:auto;display:flex;align-items:center;gap:10px}
  .cols{grid-template-columns:1fr;gap:44px}
  .app{transform:none}
  .steps,.mods,.g2,.g3{grid-template-columns:1fr}
}
@media(max-width:720px){
  .sec{padding:46px 0}
  .sec.tight{padding:30px 0}
}
/* The footer had the sheet's fault in its own way: at this width `.fcols`
   holds at two columns, so the four blocks interleave down the page and the
   reading order becomes heading, heading, list, list. Long destinations wrap
   to two lines inside a 165px cell and the whole thing runs as one ragged
   column of twenty links. Stacking the blocks and laying each one's links out
   in two columns UNDER its own heading gives back the structure: three titled
   blocks, each half as tall, with the heading doing the separating. */
@media(max-width:620px){
  .fcols{grid-template-columns:1fr;gap:26px}
  .fnote{max-width:none}
  footer h5{margin-bottom:9px}
  footer .fcols>div:not(:first-child){display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  footer .fcols>div:not(:first-child) h5{grid-column:1/-1}
  .fbot{gap:16px;margin-top:34px}
}
@media(max-width:560px){
  .pick{grid-template-columns:1fr}
  .pane{grid-template-columns:1fr}
  .cart{border-left:0;border-top:1px solid var(--k100)}
  .stats{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .app{transform:none}
}

/* ---- the agents: the part that is actually different ---------------------- */
.trace{margin-top:44px;padding:clamp(20px,2.6vw,30px);border-radius:var(--r-xl);
  background:var(--gd-bg);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid var(--gd-br);box-shadow:var(--e3),var(--gd-in)}
.tr-say{display:inline-flex;align-items:center;gap:12px;padding:13px 20px;border-radius:99px;
  background:var(--brand);color:#fff;font-weight:700;font-size:15px;
  box-shadow:0 12px 28px -10px rgba(82,43,143,.8),inset 0 1px 0 rgba(255,255,255,.28)}
.tr-flow{display:flex;align-items:stretch;gap:10px;margin-top:22px;flex-wrap:wrap}
.node{position:relative;flex:1 1 150px;min-width:140px;display:block;padding:16px 15px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:.26s var(--ease)}
.node:hover{transform:translateY(-4px);background:rgba(255,255,255,.09)}
.node svg{width:22px;height:22px;color:var(--c,#fff);margin-bottom:10px;
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.node b{display:block;font-size:14.5px;font-weight:700;color:#fff;letter-spacing:-.015em}
.node span{display:block;font-size:12px;color:rgba(255,255,255,.6);margin-top:2px}
.node.hub{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.24)}
.node.hub svg{color:#fff}
.node.done{background:linear-gradient(140deg,rgba(82,175,229,.22),rgba(128,35,146,.22));border-color:rgba(255,255,255,.26)}
.node.done svg{color:var(--c1)}
.node+.node::before{content:"";position:absolute;left:-11px;top:50%;width:11px;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45))}

.agents{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;perspective:var(--persp)}
.ag{position:relative;padding:22px 20px;border-radius:var(--r-lg);overflow:hidden;transform-style:preserve-3d;
  background:var(--gd-bg);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid var(--gd-br);box-shadow:var(--e2),var(--gd-in);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.ag::after{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
.ag:hover{transform:translateY(-7px) rotateX(4deg);border-color:rgba(255,255,255,.3);
  box-shadow:0 28px 50px -18px color-mix(in srgb,var(--c) 65%,transparent),var(--e3)}
.ag .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--c);color:#fff;
  transform:translateZ(26px);box-shadow:0 12px 22px -8px color-mix(in srgb,var(--c) 85%,transparent),
  inset 0 1px 0 rgba(255,255,255,.32);transition:transform .3s var(--ease)}
.ag:hover .ic{transform:translateZ(42px) rotate(-8deg) scale(1.08)}
.ag .ic svg{width:22px;height:22px}
.ag b{display:flex;align-items:baseline;gap:9px;margin-top:15px;font-size:17px;font-weight:800;
  letter-spacing:-.022em;color:#fff;transform:translateZ(12px)}
.ag b i{font-style:normal;font-size:13px;font-weight:500;color:rgba(255,255,255,.42)}
.ag .role{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--c);margin-top:6px;filter:brightness(1.5)}
.ag .sub{display:block;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.68);margin-top:9px}

@media(max-width:1100px){.agents{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .agents{grid-template-columns:1fr}
  /* Stacked, `flex:1 1 150px` stretched every node to the tallest — on a phone
     that turned five small steps into five tall empty boxes. */
  .tr-flow{flex-direction:column;gap:14px}
  .node{flex:0 0 auto;min-width:0;padding:13px 15px;display:grid;
    grid-template-columns:auto 1fr;column-gap:13px;align-items:center}
  .node svg{margin-bottom:0;grid-row:1/3}
  .node b{grid-column:2}
  .node span{grid-column:2}
  .node+.node::before{left:50%;top:-11px;width:1.5px;height:11px;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.45))}
  .tr-say{font-size:13.5px;padding:11px 16px;border-radius:20px}
}


/* ============================================================================
   Ported components
   ----------------------------------------------------------------------------
   The v4 rewrite covered the homepage's vocabulary and dropped ~70 selectors
   the other twenty-three pages are built from — tables, the pricing comparison,
   bento blocks, chips, breadcrumbs, ledger rows, the KDS mock. Restored here on
   the new tokens.

   Note the @media blocks below are real. The first attempt at this port
   flattened them, which promoted every mobile override to global scope — the
   visible symptom being `.phero .btns .btn{width:100%}` stretching desktop
   buttons across the full page. Nesting is preserved now.
   ========================================================================== */
.dv{font-family:'Noto Sans Devanagari',Inter,sans-serif;letter-spacing:0}
header{position:sticky;top:0;z-index:60;height:62px;display:flex;align-items:center;
  background:rgba(253,251,249,.84);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .2s}
header.s{border-bottom-color:var(--k100)}
.mk{width:26px;height:26px;border-radius:8px;background:var(--c2);display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800}
.app{background:var(--surf);border:1px solid var(--k200);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(11,16,40,.04),0 18px 44px -18px rgba(11,16,40,.16)}
.said.live .wv i{animation:wv .9s var(--es) infinite}
.cap{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--c1-t);color:var(--c3)}
.hgrid{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center}
@media(max-width:1000px){
  .hgrid{grid-template-columns:1fr;gap:26px}
}
@media(max-width:620px){
  .sh h2{font-size:1.72rem}
}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;background:var(--c1-t);
  color:var(--c3);border-radius:999px;padding:7px 14px;margin-bottom:18px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.rail2{border-block:1px solid var(--k100);background:rgba(255,255,255,.45)}
.rail2 .wrap{display:flex;flex-wrap:wrap;gap:10px 40px;padding-block:16px;align-items:center;justify-content:space-between}
@media(max-width:720px){
  .rail2 .wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding-block:20px}
  .f{flex-direction:column;gap:1px;align-items:flex-start;font-size:13px;line-height:1.3}
  .f b{font-size:22px}
}
.f{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--k700)}
.f b{font-size:19px;font-weight:800;color:var(--k950);letter-spacing:-.02em}
section{padding:clamp(70px,8.5vw,124px) 0}
@media(max-width:720px){
  section{padding:52px 0}
  .sh{margin-bottom:24px}
}
.sh{max-width:64ch;margin-bottom:38px}
.sh h2{font-size:clamp(1.8rem,3.5vw,2.9rem);margin:10px 0 13px}
.sw{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.sw button{border:1px solid var(--k200);background:var(--surf);border-radius:999px;padding:9px 17px;
  font-size:14px;font-weight:600;color:var(--k700);cursor:pointer;transition:all .14s var(--eo)}
.sw button[aria-selected=true]{background:var(--k950);border-color:var(--k950);color:#fff}
.scr{display:none}
.scr[data-on=true]{display:block;animation:fade .24s var(--eo)}
.scr-note{margin-top:14px;font-size:14.5px;color:var(--k700);max-width:70ch}
.kds{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px;background:var(--k950)}
@media(max-width:720px){
  .kds{grid-template-columns:repeat(2,1fr)}
}
.tick{background:var(--d2);border-radius:11px;padding:11px;color:rgba(255,255,255,.9);border-top:3px solid var(--ok)}
.tick.warnt{border-top-color:var(--c4)}
.tick.late{border-top-color:var(--bad)}
.tick h6{font-size:12px;color:var(--df);font-weight:600;display:flex;justify-content:space-between}
.tick ul{list-style:none;margin:8px 0 0}
.tick li{font-size:12.5px;padding:3px 0;color:rgba(255,255,255,.9)}
.tick li em{color:var(--da);font-style:normal;font-size:11px;display:block}
.clk{font-variant-numeric:tabular-nums;font-weight:700}
.kh{padding:14px;display:grid;gap:8px}
.krow{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  border:1px solid var(--k100);border-radius:11px;padding:11px 13px}
.krow b{font-size:14px}
.krow .due{font-weight:700;color:var(--bad)}
.krow .paid{font-weight:700;color:var(--ok)}
.krow small{display:block;color:var(--k500);font-size:12px;font-weight:400}
.remind{font-size:12px;font-weight:600;color:var(--c3);border:1px solid var(--c1);
  background:var(--c1-t);border-radius:8px;padding:5px 10px}
.sfm{padding:0;background:var(--sunk)}
.sfhead{padding:16px;background:var(--surf);border-bottom:1px solid var(--k100)}
.sfhead b{font-size:16px;display:block}
.sfhead span{font-size:12.5px;color:var(--k600)}
.sfgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px}
@media(max-width:720px){
  .sfgrid{grid-template-columns:repeat(2,1fr)}
}
.sfc{background:var(--surf);border:1px solid var(--k100);border-radius:11px;padding:11px;text-align:center}
.sfc .em{font-size:26px;display:block;margin-bottom:5px}
.sfc b{display:block;font-size:12.5px}
.sfc span{font-size:12px;color:var(--k600)}
.dark{background:var(--k950);color:rgba(255,255,255,.9)}
.dark h2{color:#fff}
.dark .lede,.dark p{color:var(--dm)}
.dark .eyebrow{color:var(--da)}
.otoggle{display:inline-flex;align-items:center;gap:12px;background:var(--d2);border:1px solid var(--d4);
  border-radius:999px;padding:8px 8px 8px 18px;cursor:pointer;user-select:none}
.otoggle span{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.9)}
.sw2{width:52px;height:30px;border-radius:999px;background:var(--ok);position:relative;transition:background .22s var(--es)}
.sw2::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--g-bg);-webkit-backdrop-filter:blur(var(--g-blur)) saturate(1.7);backdrop-filter:blur(var(--g-blur)) saturate(1.7);
  transition:transform .22s var(--es)}
.otoggle[data-off=true] .sw2{background:var(--warn)}
.otoggle[data-off=true] .sw2::after{transform:translateX(22px)}
.oflag{margin-top:16px;font-size:14px;color:var(--df);min-height:22px}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr}
}
.bx{background:var(--surf);border:1px solid var(--k200);border-radius:16px;padding:20px;
  transition:border-color .14s var(--eo)}
.bx:hover{border-color:var(--k300)}
.bx h3{font-size:17px;margin-bottom:6px}
.bx p{font-size:14px;color:var(--k600);line-height:1.5}
.b-3{grid-column:span 3}
.b-2{grid-column:span 2}
.b-4{grid-column:span 4}
.b-6{grid-column:span 6}
@media(max-width:900px){
  .b-3,.b-2,.b-4,.b-6{grid-column:span 2}
}
@media(max-width:560px){
  .b-3,.b-2,.b-4,.b-6{grid-column:span 1}
}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chips span{font-size:12px;font-weight:500;color:var(--k700);background:var(--sunk);
  border:1px solid var(--k100);border-radius:7px;padding:4px 9px}
.bx.dark2{background:var(--k950);border-color:var(--k950)}
.bx.dark2 h3{color:#fff}
.bx.dark2 p{color:var(--dm)}
.bx.dark2 .chips span{background:var(--d2);border-color:var(--d4);color:var(--dm)}
.led{background:var(--surf);border:1px solid var(--k200);border-radius:14px;overflow:hidden}
.led-h{display:flex;justify-content:space-between;padding:13px 16px;background:var(--sunk);
  border-bottom:1px solid var(--k100);font-size:13px;font-weight:700;color:var(--k700)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 16px;border-bottom:1px solid var(--k100)}
th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--k500);font-weight:700}
td.r,th.r{text-align:right}
tr:last-child td{border-bottom:0}
tr.sum td{background:var(--sunk);font-weight:700;color:var(--k950)}
.price{background:var(--surf);border:1px solid var(--k200);border-radius:20px;padding:34px;max-width:720px;margin:0 auto;text-align:center}
.badge{display:inline-block;background:var(--c4);color:var(--k950);font-weight:700;font-size:13px;padding:5px 13px;border-radius:999px}
.amt{font-size:62px;font-weight:800;letter-spacing:-.045em;line-height:1;margin:14px 0 4px;color:var(--k950)}
details{border-bottom:1px solid var(--k100)}
summary{cursor:pointer;list-style:none;padding:17px 0;font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:21px;font-weight:400;color:var(--k500);transition:transform .22s var(--es)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 18px;color:var(--k700);max-width:74ch;font-size:15.5px}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
@media(max-width:820px){
  .fg{grid-template-columns:1fr 1fr}
}
.fg h4{color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;font-weight:700}
.fg li{list-style:none;padding:5px 0}
.fb{border-top:1px solid var(--d4);margin-top:34px;padding-top:20px;display:flex;flex-wrap:wrap;
  gap:12px;justify-content:space-between;color:var(--df);font-size:13.5px}
@media(max-width:720px){
  .bento{display:block;border-top:1px solid var(--k200)}
  .bx{border:0;border-bottom:1px solid var(--k200);border-radius:0;
      padding:20px 0;background:transparent!important}
  .bx:hover{border-color:var(--k200)}
  .bx h3{font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--c3);margin-bottom:5px}
  .bx p{font-size:14.5px;margin-bottom:11px}
  .bx.dark2{background:transparent!important;border-bottom-color:var(--k200)}
  .bx.dark2 h3{color:var(--c3)}
  .bx.dark2 p{color:var(--k600)}
  .bx.dark2 .chips span{background:var(--sunk);border-color:var(--k100);color:var(--k700)}
  .chips{gap:5px;margin-top:0}
  .chips span{font-size:12.5px;padding:4px 8px}
  .sw{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;margin-inline:-24px;padding-inline:24px}
  .sw::-webkit-scrollbar{display:none}
  .sw button{flex:none}
  .app{box-shadow:0 1px 2px rgba(11,16,40,.05),0 8px 22px -14px rgba(11,16,40,.14)}
  .two{gap:26px!important}
}
.rev{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .rev{opacity:0;transform:translateY(14px);transition:opacity .4s var(--eo),transform .4s var(--eo)}
  .rev.in{opacity:1;transform:none}
}
.sec.sunk{background:var(--sunk)}
.h-sm{font-size:clamp(22px,3vw,30px);line-height:1.15;letter-spacing:-.025em;font-weight:700}
.rule{height:1px;background:var(--k100);border:0;margin:0}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
.pick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:980px){
  .pick{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .pick{grid-template-columns:repeat(2,1fr);gap:9px}
}
.day{position:relative;padding-left:34px}
.day:before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--c1),var(--k100))}
.mo{position:relative;padding:0 0 26px}
.mo:last-child{padding-bottom:0}
.mo:before{content:"";position:absolute;left:-30px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--surf);border:2px solid var(--i500)}
.mo .t{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c3)}
.mo h4{font-size:17.5px;font-weight:650;margin:5px 0 6px;letter-spacing:-.018em}
.mo p{color:var(--k700);font-size:15.5px;line-height:1.6;max-width:62ch}
.mo .said{display:inline-flex;margin:9px 0 0;font-size:13px;padding:7px 12px;min-height:0}
.rows{display:grid;gap:0}
.row{display:grid;grid-template-columns:210px 1fr;gap:26px;padding:24px 0;
  border-top:1px solid var(--k100)}
.row:first-child{border-top:0}
.row h4{font-size:17px;font-weight:650;letter-spacing:-.018em;color:var(--k950)}
.row .k{font-size:12.5px;color:var(--k500);margin-top:4px}
.row p{color:var(--k700);font-size:15.5px;max-width:64ch}
.row ul{margin:10px 0 0;padding-left:19px;color:var(--k700);font-size:14.5px}
.row li{margin:4px 0}
@media(max-width:760px){
  .row{grid-template-columns:1fr;gap:8px;padding:20px 0}
}
.edge{background:var(--g-bg);-webkit-backdrop-filter:blur(var(--g-blur)) saturate(1.7);backdrop-filter:blur(var(--g-blur)) saturate(1.7);border:1px solid var(--g-br);border-radius:var(--r-lg);padding:clamp(22px,3.2vw,32px);box-shadow:var(--e1),var(--g-in)}
.edge h3{font-size:17px;margin-bottom:8px}
.edge p{color:var(--k700);font-size:15.5px;max-width:70ch}
.edge p+p{margin-top:9px}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--k100);
  vertical-align:top}
.tbl th{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--k600);font-weight:700}
.tbl td:first-child{font-weight:600;color:var(--k950)}
.tbl .y{color:var(--ok);font-weight:650}
.tbl .n{color:var(--k400)}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--k200);border-radius:14px;background:var(--surf);
  
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
@media(min-width:820px){
  .scroller{-webkit-mask-image:none;mask-image:none}
}
.swipe{display:none;font-size:12.5px;color:var(--k600);margin:8px 0 0}
@media(max-width:820px){
  .swipe{display:block}
}
.scroller .tbl{min-width:640px}
.scroller .tbl tr:last-child td{border-bottom:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--k100);
  border:1px solid var(--k200);border-radius:14px;overflow:hidden}
@media(max-width:700px){
  .stats{grid-template-columns:repeat(2,1fr)}
}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:13px;padding:6px 12px;border-radius:999px;background:var(--surf);
  border:1px solid var(--k200);color:var(--k700)}
.crumb{font-size:13.5px;color:var(--k600);padding:20px 0 0}
.crumb a{color:var(--k600)}
.crumb a:hover{color:var(--k900)}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){
  .rel{grid-template-columns:1fr}
}
.rel a{display:block;padding:16px 18px;border:1px solid var(--k200);border-radius:13px;
  background:var(--surf);color:inherit;transition:border-color .15s var(--eo)}
.rel a:hover{border-color:var(--i400)}
.rel b{display:block;font-size:15.5px;font-weight:650;color:var(--k950)}
.rel span{display:block;font-size:13px;color:var(--k600);margin-top:3px}
.phero{padding:clamp(30px,4vw,52px) 0 clamp(26px,3.4vw,44px)}
.phero h1{font-size:clamp(29px,3.9vw,42px);max-width:22ch}
.phero .lede{margin-top:14px;font-size:clamp(16.5px,1.7vw,19px);max-width:52ch}
.phero .btns{display:flex;gap:11px;margin-top:24px;flex-wrap:wrap}
@media(max-width:480px){
  .phero .btns .btn{width:100%}
}
.phero .cols{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);
  align-items:start}
@media(max-width:900px){
  .phero .cols{grid-template-columns:1fr;gap:26px}
}
.aside{background:var(--surf);border:1px solid var(--k200);border-radius:16px;
  padding:20px 22px;box-shadow:0 1px 2px rgba(11,16,40,.04),0 16px 40px -20px rgba(11,16,40,.14)}
.aside h4{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--k500);
  font-weight:700;margin-bottom:14px}
.aside ul{list-style:none;display:grid;gap:11px}
.aside li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:14.5px;
  line-height:1.5;color:var(--k800)}
.aside li:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--i500);
  margin-top:8px;margin-left:5px}
.aside li b{font-weight:650;color:var(--k950)}
.aside .foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--k100);
  font-size:13px;color:var(--k600)}
.hhero .cols{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,52px);
  align-items:center}
@media(max-width:940px){
  .hhero .cols{grid-template-columns:1fr;gap:30px}
  .hhero .demo{margin-top:4px}
}
@media(min-width:941px){
  .hhero h1{font-size:clamp(38px,4.6vw,56px)}
}

/* ============================================================================
   Rows and sequence — redesigned
   ----------------------------------------------------------------------------
   `.rows` was a hairline-separated definition list: on a phone it collapsed to
   bold line, grey line, paragraph, repeat, with nothing holding an item
   together. It is a set of independent features, so each one becomes a card.

   `.day` is not the same thing and does not become cards. It is a sequence —
   Booking, Handover, While it is out, Return — and loose cards would throw the
   ordering away. The rail stays and each step becomes a card sitting on it, so
   it reads as a card set *and* still reads in order.

   Colour is assigned by :nth-child so all twenty-three pages pick it up with no
   markup change.
   ========================================================================== */

.rows{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px;perspective:var(--persp)}
.row{display:block;padding:22px 21px;border-radius:var(--r-lg);border:1px solid var(--g-br);
  background:var(--g-bg);-webkit-backdrop-filter:blur(var(--g-blur)) saturate(1.7);
  backdrop-filter:blur(var(--g-blur)) saturate(1.7);box-shadow:var(--e1),var(--g-in);
  position:relative;overflow:hidden;transform-style:preserve-3d;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.row::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c)}
.row::after{content:"";position:absolute;top:3px;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}
.row:hover{transform:translateY(-6px) rotateX(3deg);border-color:rgba(255,255,255,.95);
  box-shadow:0 24px 44px -18px color-mix(in srgb,var(--c) 55%,transparent),var(--e2),var(--g-in)}
.row>div{display:block}
.row h4{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--k950);margin:0}
.row .k{display:inline-flex;align-items:center;margin-top:9px;padding:4px 11px;border-radius:99px;
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 26%,transparent)}
.row p{margin-top:13px;color:var(--k700);font-size:14.5px;line-height:1.6;max-width:none}
.row:nth-child(4n+1){--c:var(--c1)}
.row:nth-child(4n+2){--c:var(--c3)}
.row:nth-child(4n+3){--c:var(--c4)}
.row:nth-child(4n+4){--c:var(--c2)}

.day{position:relative;padding-left:46px;counter-reset:d}
.day:before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--c1),var(--c3) 46%,var(--c4));opacity:.5}
.mo{counter-increment:d;position:relative;padding:20px 22px;margin-bottom:14px;border-radius:var(--r-lg);
  border:1px solid var(--g-br);background:var(--g-bg);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(1.7);backdrop-filter:blur(var(--g-blur)) saturate(1.7);
  box-shadow:var(--e1),var(--g-in);overflow:visible;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.mo:last-child{margin-bottom:0}
.mo:hover{transform:translateX(4px);
  box-shadow:0 20px 38px -16px color-mix(in srgb,var(--c) 55%,transparent),var(--e2),var(--g-in)}
.mo:before{content:counter(d);position:absolute;left:-46px;top:20px;width:32px;height:32px;border-radius:11px;
  display:grid;place-items:center;background:var(--c);color:#fff;font-size:13.5px;font-weight:800;
  border:0;box-shadow:0 8px 18px -6px color-mix(in srgb,var(--c) 85%,transparent),
  inset 0 1px 0 rgba(255,255,255,.35)}
.mo .t{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c)}
.mo h4{font-size:17.5px;font-weight:700;margin:6px 0 7px;letter-spacing:-.02em;color:var(--k950)}
.mo p{color:var(--k700);font-size:14.8px;line-height:1.62;max-width:70ch}
.mo:nth-child(4n+1){--c:var(--c1)}
.mo:nth-child(4n+2){--c:var(--c3)}
.mo:nth-child(4n+3){--c:var(--c4)}
.mo:nth-child(4n+4){--c:var(--c2)}

@media(max-width:820px){
  .rows{grid-template-columns:1fr}
  .day{padding-left:38px}
  .day:before{left:12px}
  .mo:before{left:-38px;width:27px;height:27px;font-size:12.5px;border-radius:9px}
  .mo{padding:17px 18px}
}

/* ---- the legal pages ------------------------------------------------------
   Privacy, Terms, the DPDP consent notice and the Grievance Officer are
   rendered out of `docs/*.md` by `scripts/build_legal_pages.py`, so what lands
   here is a document — paragraphs, two kinds of list, a block quote — rather
   than the tiles and cards the rest of the site is built from. It gets one
   readable column and nothing else: this is the page a regulator, a payment
   gateway and a merchant who is about to sign actually read, and the only
   thing it owes them is legibility. */
.legal{max-width:74ch;color:var(--k700);font-size:16px;line-height:1.72}
.legal p{margin:0 0 15px}
.legal p:last-child{margin-bottom:0}
.legal b{color:var(--k950);font-weight:650}
.legal h2{font-size:22px;margin:34px 0 12px;color:var(--k950)}
.legal h3{font-size:18px;margin:28px 0 10px;color:var(--k950)}
.legal ol,.legal ul{margin:0 0 15px;padding-left:24px}
.legal li{margin:0 0 11px}
.legal li::marker{color:var(--k500);font-weight:650}
.legal a{color:var(--c2-d);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--c4)}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--k50);border:1px solid var(--k100);border-radius:6px;padding:1px 5px;
  color:var(--k900);word-break:break-all}
.legal blockquote{margin:0 0 15px;padding:16px 20px;border-left:3px solid var(--c2);
  background:var(--k25);border-radius:0 var(--r-md,12px) var(--r-md,12px) 0}
.legal blockquote p{margin:0;color:var(--k900)}
.legal>p:first-child{font-size:17px;color:var(--k900)}
@media(max-width:820px){.legal{font-size:15.5px}}