/* Layout concept: white paper, black ink, one red seal. A pinned phone holds the real app while the story is inked around it. */
:root{
  color-scheme: light;
  --paper:#FFFFFF;
  --wash:#F5F5F3;
  --ink:#111111;
  --gold:#FFC316;
  --ink-2:#333333;
  --muted:#666666;
  --line:#E4E4E4;
  --seal:#D7261E;
  --seal-dark:#A81B15;
  --display:'Shippori Mincho B1', 'Noto Sans Tamil', 'Noto Sans Sinhala', 'Times New Roman', Georgia, serif;
  --body:'Zen Kaku Gothic New', 'Noto Sans Tamil', 'Noto Sans Sinhala', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--paper); color:var(--ink); font:400 17px/1.7 var(--body); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--paper); }
a{ color:var(--seal); }
h1,h2,h3{ font-family:var(--display); margin:0; text-wrap:balance; font-weight:800; letter-spacing:-.01em; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--seal); outline-offset:3px; }
.gutter{ padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); }
.wrap{ max-width:1200px; margin:0 auto; }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 26px; border-radius:2px; font:700 15px var(--body); letter-spacing:.04em; text-decoration:none; border:0; cursor:pointer; }
.btn-seal{ background:var(--seal); color:#FFFFFF; }
.btn-seal:hover{ background:var(--seal-dark); color:#FFFFFF; }
.btn-ink{ background:var(--ink); color:#FFFFFF; }
.btn-ink:hover{ background:#333333; color:#FFFFFF; }
.btn-line{ background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.btn-line:hover{ background:var(--ink); color:#FFFFFF; }

/* the seal: a red stamp with the logo's Y */
.seal{ display:inline-grid; place-items:center; width:56px; height:56px; background:var(--seal); color:#FFFFFF; font:800 34px/1 var(--display); border-radius:4px; box-shadow:inset 0 0 0 3px var(--seal), inset 0 0 0 5px #FFFFFF; transform:rotate(-5deg); }

/* ---------- header ---------- */
.top{ position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.top .wrap{ display:flex; align-items:center; gap:20px; min-height:66px; }
.top .mark img{ height:38px; width:auto; display:block; }
.top nav{ margin-left:auto; display:flex; gap:26px; align-items:center; }
.top nav a{ color:var(--ink-2); text-decoration:none; font-weight:500; font-size:15px; }
.top nav a:hover{ color:var(--seal); }
.top nav .btn{ min-height:42px; padding:9px 18px; font-size:14px; color:#FFFFFF; }
@media (max-width:700px){ .top nav a:not(.btn){ display:none; } }

/* ---------- hero ---------- */
.hero{ height:170vh; position:relative; }
.hero-pin{ position:sticky; top:0; height:100vh; display:grid; place-items:center; overflow:hidden; padding-top:66px; }
.hero-inner{ position:relative; display:grid; justify-items:center; gap:26px; text-align:center; }
.enso{ position:absolute; left:50%; top:50%; width:min(860px, 135vw); height:auto; transform:translate(-50%,-56%); color:var(--ink); pointer-events:none; will-change:transform, opacity; }
.enso path{ stroke-dasharray:1; stroke-dashoffset:1; animation:ink 1.6s cubic-bezier(.6,.1,.2,1) .2s forwards; }
@keyframes ink{ to{ stroke-dashoffset:0; } }
.logo-big{ position:relative; width:min(500px, 74vw); height:auto; will-change:transform, opacity; }
.hero .seal{ position:absolute; right:-6px; top:-18px; width:52px; height:52px; font-size:30px; }
.h1-kicker{ display:block; font:700 12px/1.4 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--seal); margin-bottom:12px; }
.hero h1{ position:relative; font-size:clamp(28px, 3.8vw, 48px); line-height:1.25; max-width:20ch; will-change:transform, opacity; }
.hero .cue{ color:var(--muted); font-size:13px; letter-spacing:.3em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px; }
.hero .cue i{ display:block; width:1.5px; height:44px; background:linear-gradient(var(--seal), var(--seal)) top/100% 0 no-repeat, var(--line); animation:cueDraw 2.4s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes cueDraw{ 0%{ background-size:100% 0; background-position:top; } 50%{ background-size:100% 100%; background-position:top; } 51%{ background-position:bottom; } 100%{ background-size:100% 0; background-position:bottom; } }
.slow-tip{ position:fixed; left:50%; bottom:24px; z-index:400; transform:translate(-50%, 20px); opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; background:var(--ink); color:#FFFFFF; font:700 13px var(--body); letter-spacing:.06em; padding:12px 18px; border-radius:999px; box-shadow:0 14px 30px -14px rgba(0,0,0,.5); white-space:nowrap; display:flex; gap:10px; align-items:center; }
.slow-tip.show{ opacity:1; transform:translate(-50%, 0); }
.slow-tip b{ color:var(--gold); font-weight:700; }
@media (prefers-reduced-motion: reduce){ .hero .cue i{ animation:none; background:var(--line); } }
.vert{ position:absolute; left:max(20px, env(safe-area-inset-left,0px)); top:50%; transform:translateY(-50%); writing-mode:vertical-rl; letter-spacing:.4em; font-size:12px; color:var(--muted); text-transform:uppercase; }
@media (max-width:700px){ .vert{ display:none; } }
@media (prefers-reduced-motion: reduce){ .enso path{ animation:none; stroke-dashoffset:0; } }

/* ---------- story (pinned stage) ---------- */
.story{ height:1260vh; position:relative; border-top:1px solid var(--line); }
.stage{ position:sticky; top:0; height:100vh; background:var(--paper); overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(20px,4vw,64px); padding-top:66px; }
.dim{ position:absolute; inset:0; background:var(--ink); opacity:0; pointer-events:none; }
.texts{ position:relative; height:270px; z-index:2; pointer-events:none; }  /* captions only — taps go to the tiles */
.scene{ position:absolute; inset:0 0 auto; opacity:0; will-change:transform, opacity; }
.scene:first-child{ opacity:1; }
.kicker{ display:inline-flex; align-items:center; gap:10px; font:700 12px var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--seal); }
.kicker::before{ content:""; width:10px; height:10px; background:var(--seal); display:inline-block; }
.scene h2{ font-size:clamp(30px, 3.4vw, 48px); line-height:1.15; margin:14px 0 14px; }
.scene p{ color:var(--muted); max-width:34ch; }

.phone-area{ position:relative; z-index:1; display:grid; place-items:center; }
.phone{ position:relative; height:min(70vh, 640px); aspect-ratio:480/1054; border-radius:40px; padding:8px; background:var(--ink); box-shadow:0 40px 70px -50px rgba(0,0,0,.45); will-change:transform; z-index:2; }
.screen{ position:relative; width:100%; height:100%; border-radius:33px; overflow:hidden; background:#0B1020; }
.screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease; }
.screen img.on{ opacity:1; }
.stamp{ position:absolute; top:34%; left:50%; z-index:3; border:3px solid var(--seal); color:var(--seal); background:rgba(255,255,255,.92); font:800 18px/1.2 var(--display); letter-spacing:.08em; text-align:center; padding:10px 16px; border-radius:4px; opacity:0; white-space:nowrap; transform:translate(-50%,-50%) rotate(-8deg); }
.stamp small{ display:block; font:700 11px var(--body); letter-spacing:.2em; }
.ghost{ position:absolute; height:min(58vh, 540px); aspect-ratio:480/1054; border-radius:34px; padding:7px; background:var(--ink); opacity:0; z-index:1; will-change:transform, opacity; }
.ghost img{ width:100%; height:100%; object-fit:cover; border-radius:28px; display:block; }

.aux{ position:relative; height:100%; display:grid; align-items:center; z-index:2; }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:20px 22px; }
.stage .card{ border-top:5px solid var(--gold); }
.journal, .counter, .ready, .scanned, .chat, .approve, .langcard{ position:absolute; left:0; right:0; max-width:380px; opacity:0; will-change:transform, opacity; }
.kick-sm{ font:700 11px var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--seal); }
.line2{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-top:8px; font-size:16px; }
.line2 b{ font-size:18px; }
.muted-sm{ color:var(--muted); font-size:13px; margin-top:6px; }
.scanner{ position:absolute; left:14%; right:14%; top:28%; aspect-ratio:1; z-index:3; opacity:0; border:2px solid rgba(255,255,255,.9); border-radius:10px; box-shadow:0 0 0 2000px rgba(0,0,0,.45); }
.laser{ position:absolute; left:6%; right:6%; top:var(--y,50%); height:2px; background:var(--seal); box-shadow:0 0 14px 2px rgba(215,38,30,.8); }
.chat-head{ display:flex; gap:10px; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line); }
.chat-head b{ display:block; font-size:15px; }
.chat-head small{ display:block; color:var(--muted); font-size:12px; }
.avatar{ width:36px; height:36px; border-radius:50%; background:var(--ink); color:#FFFFFF; display:grid; place-items:center; font:700 15px var(--body); }
.bubble{ margin-top:14px; background:var(--wash); border:1px solid var(--line); padding:14px 16px; font-size:14px; will-change:border-radius, transform; }
.b-shop{ font-weight:700; margin-bottom:8px; }
.b-row{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; color:var(--ink-2); }
.b-total{ font-weight:700; color:var(--ink); border-top:1px solid var(--line); margin-top:6px; padding-top:8px; }
.b-thanks{ color:var(--muted); font-size:13px; margin-top:8px; }
.delivered{ text-align:right; font-size:12px; color:var(--muted); margin-top:6px; opacity:0; transition:opacity .3s; }
.ab-row{ display:flex; gap:10px; margin-top:14px; }
.ab{ flex:1; text-align:center; padding:10px; font-weight:700; font-size:14px; border-radius:2px; }
.ab-line{ box-shadow:inset 0 0 0 1.5px var(--line); color:var(--muted); }
.ab-ok{ background:var(--ink); color:#FFFFFF; transition:background .3s; }
.ab-ok.done{ background:var(--seal); }
.approve{ overflow:visible; }
.ok-stamp{ position:absolute; right:-12px; top:-22px; border:3px solid var(--seal); color:var(--seal); background:rgba(255,255,255,.9); font:800 16px/1.15 var(--display); letter-spacing:.08em; text-align:center; padding:6px 10px; border-radius:4px; opacity:0; transform:rotate(8deg); }
.ok-stamp small{ display:block; font:700 10px var(--body); letter-spacing:.2em; }
.lang-word{ font:700 clamp(30px,3.2vw,44px)/1.25 var(--display), 'Noto Sans Tamil', 'Noto Sans Sinhala', sans-serif; margin-top:10px; min-height:1.3em; }
.lang-word[lang="ta"]{ font-family:'Noto Sans Tamil', var(--body); }
.lang-word[lang="si"]{ font-family:'Noto Sans Sinhala', var(--body); }
.lang-amt{ font-size:22px; font-weight:700; margin-top:6px; }
.lang-tabs{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.lang-tabs button{ padding:6px 12px; min-height:36px; font:500 13px var(--body); border:0; background:transparent; box-shadow:inset 0 0 0 1px var(--line); color:var(--muted); cursor:pointer; border-radius:2px; }
.lang-tabs button:hover{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.lang-tabs button.on{ background:var(--ink); color:#FFFFFF; box-shadow:none; }
.lang-word.swap{ animation:lwSwap .45s cubic-bezier(.2,.8,.2,1); }
@keyframes lwSwap{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .lang-word.swap{ animation:none; } }
.journal h3, .counter h3{ font:700 15px var(--body); display:flex; justify-content:space-between; gap:12px; letter-spacing:0; }
.journal h3 span, .counter h3 span{ color:var(--muted); font-weight:400; font-size:13px; }
.jtable{ width:100%; border-collapse:collapse; margin-top:10px; font-size:14px; }
.jtable th{ text-align:left; font:700 11px var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:6px 0; }
.jtable th.a, .jtable td.a{ text-align:right; }
.jtable td{ padding:7px 0; border-top:1px solid var(--line); }
.jtable tr.row{ opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; }
.jtable tr.row.on{ opacity:1; transform:none; }
.jtable td.cr{ padding-left:16px; color:var(--muted); }
.jtable tr.total td{ font-weight:700; border-top:1.5px solid var(--ink); }
.dbl{ display:inline-block; position:relative; padding-bottom:4px; }
.dbl::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:5px; border-top:1.5px solid var(--seal); border-bottom:1.5px solid var(--seal); transform:scaleX(var(--u,0)); transform-origin:right; transition:transform .5s ease; }
.balanced{ margin-top:12px; font-size:13px; color:var(--seal); font-weight:700; opacity:0; transition:opacity .3s; }
.counter .big{ font-size:clamp(28px,3vw,40px); font-weight:700; margin-top:8px; }
.counter .dev{ margin-top:14px; display:flex; gap:8px; align-items:center; color:var(--muted); font-size:14px; }
.counter .dev i{ width:12px; height:22px; border-radius:2px; background:var(--line); display:inline-block; transition:background .3s; }
.counter .dev i.on{ background:var(--ink); }
.ready{ display:grid; gap:14px; max-width:400px; }
.ready-top{ display:flex; gap:14px; align-items:center; }
.ready-kick{ font:700 11px var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--seal); }
.ready h3{ font-size:23px; line-height:1.2; margin-top:2px; }
.ready .seal{ width:44px; height:44px; font-size:26px; flex-shrink:0; }
.ready-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding-block:12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ready-price s{ color:#9A9A9A; font-size:17px; }
.ready-price b{ font-size:34px; letter-spacing:-.03em; }
.ready-price span{ color:var(--muted); font-size:14px; flex-basis:100%; }
.ready-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 14px; font-size:14px; }
.ready-list li::before{ content:""; display:inline-block; width:6px; height:6px; background:var(--seal); margin-right:8px; vertical-align:middle; }
.ready-terms{ color:var(--muted); font-size:13px; line-height:1.6; }
.ready-terms b{ color:var(--ink); }

.rail{ position:absolute; right:max(16px, env(safe-area-inset-right,0px)); top:50%; transform:translateY(-50%); display:grid; gap:8px; z-index:3; }
.rail button{ width:44px; height:28px; border:0; background:transparent; cursor:pointer; display:grid; place-items:center; padding:0; }
.rail button span{ width:8px; height:8px; background:#C9C9C9; transition:transform .25s, background .25s; }
.rail button[aria-current="step"] span{ background:var(--seal); transform:scale(1.5) rotate(45deg); }

@media (max-width:900px){
  .stage{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; align-content:start; padding-top:84px; gap:8px; }
  .texts{ order:2; height:210px; }
  .scene h2{ font-size:27px; margin:8px 0; }
  .scene p{ font-size:15px; }
  .phone-area{ order:1; }
  .phone{ height:min(46vh, 440px); border-radius:28px; padding:6px; }
  .screen{ border-radius:23px; }
  .ghost{ height:min(38vh, 360px); border-radius:24px; }
  .stamp{ font-size:15px; }
  .jtable{ font-size:13px; } .jtable td{ padding:5px 0; } .card{ padding:16px 18px; }
  .aux{ position:absolute; top:calc(84px + 11vh); left:0; right:0; height:auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); }
  .journal, .counter, .ready, .scanned, .chat, .approve, .langcard{ position:absolute; top:0; max-width:none; box-shadow:0 30px 60px -30px rgba(0,0,0,.35); }
  .bubble{ padding:10px 12px; font-size:13px; }
  .ok-stamp{ right:8px; top:-18px; }
  .rail{ display:none; }
  .ready{ gap:10px; }
  .ready h3{ font-size:19px; }
  .ready-price b{ font-size:28px; }
  .ready-list{ font-size:13px; }
}

/* ---------- regular sections ---------- */
section.block{ padding-block:120px; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font:700 12px var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--seal); }
.eyebrow::before{ content:""; width:10px; height:10px; background:var(--seal); }
.h2{ font-size:clamp(32px, 4.2vw, 54px); line-height:1.15; margin-top:14px; max-width:20ch; }
.lede{ color:var(--muted); margin-top:16px; max-width:56ch; font-size:18px; }
/* what's inside: a deck of 18 tool cards, dealt as you scroll, then swiped left or right */
#inside{ height:260vh; position:relative; }
.inside-pin{ position:sticky; top:66px; min-height:calc(100vh - 66px); display:grid; align-items:center; padding-block:24px; overflow:hidden; }
.inside-grid{ width:100%; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:32px; align-items:center; }
.count{ font-family:var(--display); font-variant-numeric:tabular-nums; color:var(--seal); display:inline-block; min-width:1.2em; }
.legend{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px; color:var(--ink-2); }
.legend li{ display:flex; align-items:center; gap:8px; }
.sw{ width:16px; height:16px; border-radius:3px; display:inline-block; }
.sw-sell{ background:var(--seal); } .sw-books{ background:var(--ink); } .sw-run{ background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--ink); }
.hint{ margin-top:22px; color:var(--muted); font-size:14px; }
.deck-ctl{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.dc{ min-width:48px; min-height:48px; border:1.5px solid var(--ink); background:var(--paper); color:var(--ink); border-radius:999px; display:grid; place-items:center; cursor:pointer; font:700 14px var(--body); }
.dc:hover{ background:var(--ink); color:#FFFFFF; }
.dc-text{ padding:0 18px; }
.deck{ --cw:min(320px, 76vw); position:relative; }
.deck:not(.js){ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.deck.js{ height:470px; outline-offset:6px; }
.tcard{ width:var(--cw); min-height:380px; border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:14px; box-shadow:0 22px 44px -26px rgba(0,0,0,.45); user-select:none; -webkit-user-select:none; }
.deck:not(.js) .tcard{ width:auto; min-height:0; }
.deck.js .tcard{ position:absolute; left:50%; top:46px; margin-left:calc(var(--cw) / -2); transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s; touch-action:pan-y; cursor:grab; will-change:transform; }
.deck.js .tcard.dragging{ transition:none; cursor:grabbing; }
.deck.js .tcard{ translate:0 0; rotate:0deg; }
.deck.js .tcard.lean{ transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s, translate .5s cubic-bezier(.2,.8,.2,1), rotate .5s cubic-bezier(.2,.8,.2,1); }
@keyframes nudge{ 0%{ translate:0 0; rotate:0deg; } 22%{ translate:-58px 6px; rotate:-9deg; } 48%{ translate:52px 6px; rotate:8deg; } 70%{ translate:-16px 0; rotate:-2deg; } 100%{ translate:0 0; rotate:0deg; } }
.deck.js .tcard.nudge{ animation:nudge 1.5s cubic-bezier(.3,.7,.3,1); }
.swipe-tip{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); display:flex; align-items:center; gap:10px; font:700 12px var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--ink); background:var(--paper); border:1.5px solid var(--ink); border-radius:999px; padding:8px 14px; z-index:300; transition:opacity .4s; pointer-events:none; white-space:nowrap; }
.swipe-tip .ar{ display:inline-block; animation:tipL 1.5s ease-in-out infinite; }
.swipe-tip .ar.r{ animation-name:tipR; }
@keyframes tipL{ 50%{ transform:translateX(-5px); } } @keyframes tipR{ 50%{ transform:translateX(5px); } }
.deck.touched .swipe-tip{ opacity:0; }
@media (prefers-reduced-motion: reduce){ .deck.js .tcard.nudge{ animation:none; } .swipe-tip .ar{ animation:none; } }
.tcard.sell{ background:var(--seal); color:#FFFFFF; }
.tcard.books{ background:var(--ink); color:#FFFFFF; }
.tcard.run{ background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink), 0 22px 44px -26px rgba(0,0,0,.45); }
.tc-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.tc-chip{ font:700 11px var(--body); letter-spacing:.2em; text-transform:uppercase; padding:5px 9px; border:1.5px solid currentColor; border-radius:999px; }
.tc-n{ font-size:13px; opacity:.85; }
.ticon{ margin-top:18px; }
.tcard h3{ font-size:28px; line-height:1.15; }
.tcard p{ font-size:16px; line-height:1.55; opacity:.9; }
.tcard.run p{ color:var(--muted); opacity:1; }
@media (max-width:900px){
  #inside{ height:280vh; }
  .inside-grid{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .inside-intro .lede{ display:none; }
  .h2{ font-size:30px; }
  .legend{ margin-top:10px; font-size:13px; }
  .hint{ margin-top:10px; }
  .deck{ --cw:min(300px, 74vw); }
  .deck.js{ height:420px; }
  .deck.js .tcard{ top:24px; min-height:340px; }
  .tcard h3{ font-size:24px; }
  .ticon{ margin-top:6px; }
}
.feat{ padding:22px 0; border-top:1px solid var(--ink); }
.feat h3{ font-size:20px; margin-bottom:6px; }
.feat p{ color:var(--muted); font-size:15px; }
@media (max-width:1100px){ .feats{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .feats{ grid-template-columns:minmax(0,1fr); } }

.otp{ background:var(--seal); color:#FFFFFF; overflow:hidden; }
.otp .wrap{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px; align-items:end; }
.otp h2{ font-size:clamp(40px, 6vw, 88px); line-height:1.05; }
.otp ul{ list-style:none; padding:0; margin:0; display:grid; gap:14px; font-size:17px; }
.otp li{ padding-top:14px; border-top:1px solid rgba(255,255,255,.5); }
.otp strong{ font-weight:700; }
@media (max-width:900px){ .otp .wrap{ grid-template-columns:minmax(0,1fr); } }

.wash{ background:var(--wash); }
.plans{ margin-top:56px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; border:1px solid var(--ink); background:var(--paper); }
@media (max-width:1060px){ .plans{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .plans{ grid-template-columns:minmax(0,1fr); } }
.plan{ padding:28px 24px; display:flex; flex-direction:column; gap:16px; border-right:1px solid var(--line); }
.plan:last-child{ border-right:0; }
@media (max-width:1060px){ .plan{ border-bottom:1px solid var(--line); } }
.plan.f{ background:var(--ink); color:#FFFFFF; }
.plan .name{ font:800 20px var(--display); display:flex; justify-content:space-between; gap:8px; align-items:center; }
.tag{ font:700 11px var(--body); letter-spacing:.14em; padding:5px 9px; background:var(--seal); color:#FFFFFF; }
.price{ font:700 42px/1 var(--mono); letter-spacing:-.04em; }
.price s{ font-size:17px; font-weight:500; color:#9A9A9A; margin-right:6px; letter-spacing:0; }
.price small{ font:400 15px var(--body); letter-spacing:0; color:var(--muted); }
.plan.f .price small{ color:#BBBBBB; }
.plan ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:15px; color:var(--ink-2); flex:1; align-content:start; }
.plan.f ul{ color:#E6E6E6; }
.plan li::before{ content:""; display:inline-block; width:6px; height:6px; background:var(--seal); margin-right:12px; vertical-align:middle; }
.code{ border:1.5px dashed #FFFFFF; padding:12px 14px; }
.code .lbl{ font-size:12px; color:#BBBBBB; }
.code .row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-top:2px; }
.code b{ font:700 20px var(--mono); letter-spacing:.06em; white-space:nowrap; color:#FFFFFF; }
.code button{ min-height:44px; padding:8px 16px; border-radius:2px; border:0; background:#FFFFFF; color:var(--ink); font:700 14px var(--body); cursor:pointer; }
.code .code-how{ font-size:13px; color:#BBBBBB; margin-top:6px; }  /* own name: .how is the How-it-works list */
.plan .btn{ width:100%; }
.note{ margin-top:22px; color:var(--muted); font-size:14px; text-align:center; }

.faq{ margin-top:40px; max-width:860px; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative; font:800 20px var(--display); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:6px; top:18px; font:400 26px var(--body); color:var(--seal); }
.faq details[open] summary::after{ content:"\2212"; }
.faq details p{ color:var(--muted); padding-bottom:22px; max-width:70ch; }

footer{ border-top:1px solid var(--ink); padding-block:40px calc(40px + env(safe-area-inset-bottom,0px)); color:var(--muted); font-size:14px; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:16px 32px; justify-content:space-between; align-items:center; }
footer img{ height:40px; width:auto; display:block; }

/* who it's for: four cards, fanned from a stack into a row */
#who{ overflow:hidden; }
.who-grid{ margin-top:56px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; position:relative; }
@media (max-width:1000px){ .who-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .who-grid{ grid-template-columns:minmax(0,1fr); } }
.who-card{ background:var(--paper); border:1px solid var(--ink); padding:24px; min-height:240px; display:flex; flex-direction:column; gap:10px; will-change:transform; }
.who-card h3{ font-size:22px; line-height:1.2; }
.who-card p{ color:var(--muted); font-size:15px; }
.who-n{ font:700 11px var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--seal); }

/* how it works: an ink line draws through the three steps */
.how{ list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px; position:relative; }
.how-line{ position:absolute; left:22px; right:22px; top:21px; height:3px; background:var(--ink); transform:scaleX(var(--d,1)); transform-origin:left; }
.step{ position:relative; display:grid; gap:10px; align-content:start; }
.step .dot{ width:44px; height:44px; border-radius:50%; background:var(--paper); border:3px solid var(--ink); display:grid; place-items:center; font:800 18px var(--display); transition:background .3s, color .3s, border-color .3s; }
.step.on .dot{ background:var(--seal); border-color:var(--seal); color:#FFFFFF; }
.step h3{ font-size:22px; margin-top:8px; }
.step p{ color:var(--muted); font-size:15px; max-width:32ch; }
@media (max-width:760px){
  .how{ grid-template-columns:minmax(0,1fr); gap:28px; padding-left:64px; }
  .how-line{ left:21px; right:auto; top:0; bottom:0; width:3px; height:auto; transform:scaleY(var(--d,1)); transform-origin:top; }
  .step .dot{ position:absolute; left:-64px; top:0; }
  .step h3{ margin-top:6px; }
}

/* lower-section morphs: everything is fully visible until the script drives it */
.feat{ position:relative; border-top-color:transparent; }
.feat::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--ink); transform:scaleX(var(--d,1)); transform-origin:left; }
.ink{ background:linear-gradient(90deg, var(--ink) 0 50%, #C9C9C9 50% 100%); background-size:200% 100%; background-position:calc((1 - var(--i,1)) * 100%) 0; -webkit-background-clip:text; background-clip:text; color:transparent; }
.otp{ clip-path:inset(var(--cy,0%) var(--cx,0%) round var(--cr,0px)); }
.otp h2, .otp li{ will-change:transform; }
.plan{ will-change:transform; }
.faq details{ position:relative; border-top-color:transparent; }
.faq details::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--line); transform:scaleX(var(--d,1)); transform-origin:left; }
#codeBox{ will-change:transform; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .screen img, .jtable tr.row, .dbl::after{ transition:none; } }

/* ---------- v19 additions ---------- */
.rel{ position:relative; }
.hero-langs{ display:none; }
@media (max-width:700px){ .hero-langs{ display:flex; position:absolute; top:78px; right:16px; z-index:5; background:var(--paper); } }
/* Tamil and Sinhala run longer and need more line height */
html[lang="ta"] body, html[lang="si"] body{ line-height:1.8; }
html[lang="ta"] .hero h1, html[lang="si"] .hero h1{ font-size:clamp(24px, 3.2vw, 40px); line-height:1.4; max-width:24ch; }
html[lang="ta"] .h2, html[lang="si"] .h2{ line-height:1.35; }
html[lang="ta"] .tcard h3, html[lang="si"] .tcard h3{ font-size:22px; line-height:1.35; }
html[lang="ta"] .tcard p, html[lang="si"] .tcard p{ font-size:15px; }
html[lang="ta"] .tc-chip, html[lang="si"] .tc-chip, html[lang="ta"] .eyebrow, html[lang="si"] .eyebrow, html[lang="ta"] .h1-kicker, html[lang="si"] .h1-kicker{ letter-spacing:.04em; text-transform:none; }
.langs{ display:flex; gap:2px; align-items:center; font-size:13px; }
.langs a{ padding:6px 8px; border-radius:6px; color:var(--ink-2); text-decoration:none; min-height:32px; display:inline-flex; align-items:center; }
.langs a[aria-current="true"]{ color:var(--ink); font-weight:700; box-shadow:inset 0 -2px 0 var(--seal); border-radius:0; }
.langs a:hover{ color:var(--seal); }
footer .foot-cols{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; width:100%; margin:24px 0; text-align:left; }
footer .foot-cols h4{ font:700 12px var(--body); letter-spacing:.16em; text-transform:uppercase; margin:0 0 10px; color:var(--ink); }
footer .foot-cols ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
footer .foot-cols a{ color:var(--ink-2); text-decoration:none; font-size:14px; }
footer .foot-cols a:hover{ color:var(--seal); text-decoration:underline; }
@media (max-width:900px){ footer .foot-cols{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* consent banner (consent.js builds it; no inline styles allowed by the CSP) */
#thyrn-consent-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:500; background:#FFFFFF; color:var(--ink); border:1.5px solid var(--ink); border-radius:12px; box-shadow:0 18px 50px -20px rgba(0,0,0,.45); padding:16px 18px; max-width:760px; margin:0 auto; }
#thyrn-consent-banner .tc-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
#thyrn-consent-banner .tc-text{ margin:0; font-size:14px; color:var(--ink-2); flex:1 1 300px; }
#thyrn-consent-banner .tc-text a{ color:var(--ink); }
#thyrn-consent-banner .tc-actions{ display:flex; gap:8px; }
#thyrn-consent-banner .tc-btn{ min-height:44px; padding:0 18px; border-radius:999px; font:700 14px var(--body); cursor:pointer; border:1.5px solid var(--ink); background:#FFFFFF; color:var(--ink); }
#thyrn-consent-banner .tc-accept{ background:var(--ink); color:#FFFFFF; }