/* ═══════════════════════════════════════════════════════════════
   jm3t doodle — design tokens
   Marker outlines, crayon colour, wobbly corners, hard shadows.
   No gradients anywhere. Depth comes from ink outlines + hard shadows.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ink-900:#17161a; --ink-700:#332f39; --ink-500:#5c5766; --ink-300:#918c9c; --ink-150:#d8d3e0;
  --paper-000:#fff; --paper-050:#fffdf7; --paper-100:#fff6e2;
  --sky-100:#ddebfb;

  --marker-yellow:#ffd230; --marker-yellow-deep:#f2a900;
  --marker-orange:#f4741f; --marker-orange-deep:#d25708;
  --marker-pink:#f2459b;   --marker-pink-deep:#c81d75;
  --marker-purple:#8e5bd9; --marker-purple-deep:#6b36bb;
  --marker-blue-deep:#2b5cc4;
  --marker-cyan:#35c6d8;   --marker-cyan-deep:#178f9f;
  --marker-green:#56c14a;  --marker-green-deep:#2f9426;

  --stroke-doodle:2.5px; --stroke-bold:3.5px;
  /* No radius is symmetric — the lopsidedness is the brand. Do not tidy. */
  --radius-md:14px 18px 15px 19px;
  --radius-lg:22px 28px 24px 26px / 26px 22px 28px 24px;
  --shadow-sticker:3px 3px 0 var(--ink-900);
  --shadow-raised:5px 5px 0 var(--ink-900);
  --shadow-pressed:1px 1px 0 var(--ink-900);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper-050);color:var(--ink-900);
  font:400 16px/1.55 'Tajawal',system-ui,sans-serif}
img{max-width:100%;display:block}
a{color:var(--marker-blue-deep)}
a:hover{color:var(--marker-pink-deep)}
h1,h2,h3,h4{font-family:'Baloo Bhaijaan 2',system-ui,sans-serif;margin:0}
h1{font-weight:800;font-size:64px;line-height:1.08}
h2{font-weight:700;font-size:34px;line-height:1.25}
h3{font-weight:700;font-size:21px;line-height:1.25}
h4{font-weight:700;font-size:21px;line-height:1.25}

/* Handwriting is an aside, never a label */
.scribble{font:700 27px/1.3 'Lemonada',cursive;margin:0}
.scribble--pink{color:var(--marker-pink-deep)}
.scribble--green{color:var(--marker-green-deep)}
.scribble--purple{color:var(--marker-purple-deep)}
.scribble--muted{font:600 18px/1.4 'Lemonada',cursive;color:var(--ink-500)}
/* Pixel type is for numerals and micro-labels only — never a sentence */
.pixel{font:400 16px/1 'Press Start 2P',monospace;color:var(--ink-900)}
.pixel--muted{font-size:11px;letter-spacing:1px;color:var(--ink-500)}

/* ── Icon: Lucide rendered as a CSS mask so it inherits colour ── */
.ico{display:inline-block;width:24px;height:24px;flex:none;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.ico--lg{width:28px;height:28px}
.ico--xl{width:40px;height:40px}

/* ── Button ─────────────────────────────────────────────────────
   Hover lifts, press sticks. Colour never changes on hover.       */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 16px/1 'Baloo Bhaijaan 2',system-ui,sans-serif;text-decoration:none;
  border:var(--stroke-doodle) solid var(--ink-900);border-radius:var(--radius-md);
  background:var(--paper-000);color:var(--ink-900);
  padding:10px 18px;min-height:44px;cursor:pointer;
  box-shadow:var(--shadow-sticker);
  transition:transform .12s var(--spring),box-shadow .12s var(--spring)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-raised);color:var(--ink-900)}
.btn:active{transform:translate(2px,2px);box-shadow:var(--shadow-pressed)}
.btn--play{background:var(--marker-pink);color:var(--ink-900)}
.btn--play:hover{color:var(--ink-900)}
.btn--quiet{background:var(--paper-000)}
.btn--sm{padding:7px 14px;min-height:44px;font-size:15px}
.btn--lg{padding:16px 26px;min-height:56px;font-size:19px}
.btn--block{display:flex;width:100%}
.btn--tilt{transform:rotate(-1.6deg)}
.btn--tilt:hover{transform:rotate(-1.6deg) translate(-1px,-1px)}
.btn--tilt:active{transform:rotate(-1.6deg) translate(2px,2px)}

/* ── Badge — hairline stroke ─────────────────────────────────── */
.badge{display:inline-block;font:700 14px/1 'Baloo Bhaijaan 2',system-ui,sans-serif;
  padding:6px 12px;border:1.5px solid var(--ink-900);border-radius:999px;background:var(--paper-000)}
.badge--live{background:var(--marker-yellow)}
.badge--success{background:var(--marker-green)}
.badge--warning{background:var(--marker-yellow-deep)}

/* ── Card — white paper, ink outline, lopsided radius, hard shadow
   with an optional 10px coloured cap along the top edge          */
.card{position:relative;background:var(--paper-000);
  border:var(--stroke-doodle) solid var(--ink-900);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-raised);padding:24px;overflow:hidden}
.card>h3{margin-bottom:4px}
.card p:not([class*="scribble"]){margin:8px 0 0;color:var(--ink-500)}
.card p.scribble{margin:12px 0 0}
.card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:10px}
.card--yellow::before{background:var(--marker-yellow)}
.card--pink::before{background:var(--marker-pink)}
.card--green::before{background:var(--marker-green)}
.card--orange::before{background:var(--marker-orange)}
.card--cyan::before{background:var(--marker-cyan)}
.card--purple::before{background:var(--marker-purple)}
.card:not([class*="card--"])::before{display:none}
.card--yellow,.card--pink,.card--green,.card--orange,.card--cyan,.card--purple{padding-block-start:30px}
.card__head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.card__title-row{display:flex;align-items:center;gap:12px}
.card__title-row h3{flex:1;margin:0}
.role__name{flex:0 1 auto !important}
.card__title-row .scribble--muted{margin-inline-start:auto}

.ticks{margin:12px 0 0;padding-inline-start:20px;color:var(--ink-500);display:grid;gap:4px}
.ticks--spaced{gap:8px;margin:16px 0 24px;color:var(--ink-700)}

/* ── Layout ─────────────────────────────────────────────────── */
html{scroll-padding-top:120px}
.page{min-height:100vh}
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;
  padding:12px 40px;background:var(--paper-050);border-bottom:var(--stroke-doodle) solid var(--ink-900)}
.wordmark{font:800 26px/1 'Baloo Bhaijaan 2',system-ui,sans-serif;color:var(--ink-900);text-decoration:none}
.wordmark--inverse{color:var(--paper-050)}
.site-nav{flex:1;display:flex;gap:8px}
.site-nav a{padding:8px 14px;font:700 16px/1 'Baloo Bhaijaan 2',system-ui,sans-serif;
  text-decoration:none;color:var(--ink-500)}
.site-nav a:hover,.site-nav a.is-current{color:var(--ink-900)}

.section{padding:64px 40px}
.section--narrow{max-width:1280px;margin:0 auto}
.section__inner{max-width:1280px;margin:0 auto}
.section__inner--md{max-width:1080px;margin:0 auto}
.section__lede{margin:0 0 24px;color:var(--ink-500)}
.section--sky{background:var(--sky-100);
  border-top:var(--stroke-doodle) solid var(--ink-900);
  border-bottom:var(--stroke-doodle) solid var(--ink-900)}
.section--cta{text-align:center}
.section--flush{border-bottom:none}
.section--faq{max-width:880px;margin:0 auto}
/* The doodle tile repeats at 520px — never stretch the source full-bleed */
.section--tile{background:var(--paper-050) url(/design/doodle-geo-seamless.webp) repeat;
  background-size:520px;border-top:var(--stroke-doodle) solid var(--ink-900)}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{padding:96px 40px;display:grid;place-items:center;min-height:500px;
  background:var(--paper-050) url(/design/doodle-frame.jpg) center/cover no-repeat;
  border-bottom:var(--stroke-doodle) solid var(--ink-900)}
.hero__inner{text-align:center;max-width:680px}
.hero h1{margin:16px 0 12px}
.hero__lede{font-size:18px;color:var(--ink-700);margin:0 auto 24px;max-width:48ch}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero__scribble{margin-top:24px}

.feature-strip{margin-top:24px;background:var(--paper-000);
  border:var(--stroke-doodle) solid var(--ink-900);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-raised);padding:24px;
  display:grid;grid-template-columns:auto 1fr 1fr;gap:24px;align-items:center}
.feature-strip p{margin:4px 0 0;color:var(--ink-500)}

/* ── Pricing ────────────────────────────────────────────────── */
.price-intro{background:var(--paper-000);border:var(--stroke-doodle) solid var(--ink-900);
  border-radius:var(--radius-lg);padding:24px 32px;box-shadow:var(--shadow-raised);margin-bottom:32px}
.price-intro p{margin:8px 0 0;color:var(--ink-500);max-width:62ch}
.price-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:start}
.price-card__sub{color:var(--ink-500);margin:0}
.price-card__amount{font:800 48px/1.08 'Baloo Bhaijaan 2',system-ui,sans-serif;margin:12px 0 2px}
.price-card__amount span{font:700 18px/1 'Baloo Bhaijaan 2',system-ui,sans-serif;color:var(--ink-500)}
.price-card__alt{color:var(--ink-500);font-size:14px;margin:0}
/* Tilt reads as an object dropped on a table — celebratory cards only */
.price-card--featured{border-width:var(--stroke-bold);transform:rotate(-.8deg)}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq{display:grid;gap:12px}
.faq__item{background:var(--paper-000);border:var(--stroke-doodle) solid var(--ink-900);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sticker)}
.faq__item summary{display:flex;align-items:center;gap:12px;padding:16px 24px;cursor:pointer;
  font:700 18px/1.4 'Baloo Bhaijaan 2',system-ui,sans-serif;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__q{flex:1}
.faq__chev{flex:none}
.faq__chev{transition:transform .2s var(--spring)}
.faq__item[open] .faq__chev{transform:rotate(180deg)}
.faq__body{padding:0 24px 16px;color:var(--ink-500)}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer{padding:48px 40px;background:var(--ink-900);color:var(--paper-050)}
.site-footer__inner{max-width:1280px;margin:0 auto;display:flex;gap:48px;
  align-items:flex-start;flex-wrap:wrap}
.site-footer__brand{flex:1;min-width:220px}
.site-footer__brand p{opacity:.7;margin:8px 0 0;font-size:14px}
.site-footer nav{display:grid;gap:8px;font-size:14px}
.site-footer nav a{color:var(--paper-050)}
.site-footer__legal{max-width:1280px;margin:24px auto 0;padding-top:16px;
  border-top:1.5px solid rgba(255,253,247,.25);font-size:13px;opacity:.6}

/* ── Motion: short and springy. Things pop and settle. ───────── */
@keyframes popIn{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
.pop{animation:popIn .38s var(--spring) both}
.pop-1{animation-delay:.08s}.pop-2{animation-delay:.16s}.pop-3{animation-delay:.24s}

@keyframes mafiaLand{0%{transform:scale(1.15,.7)}45%{transform:scale(.92,1.1)}100%{transform:scale(1)}}
@keyframes mafiaBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.mafia-jumper{position:fixed;width:150px;z-index:15;pointer-events:none;
  transition:top .38s var(--spring),left .38s var(--spring),transform .38s var(--spring)}
.mafia-jumper .mj-card{animation:mafiaBob 2.6s ease-in-out infinite}
.mafia-jumper.landing .mj-card{animation:mafiaLand .38s var(--spring) both}
.mafia-jumper img{width:100%;background:#fff;border:var(--stroke-doodle) solid var(--ink-900);
  border-radius:44% 56% 52% 48% / 52% 46% 58% 44%;box-shadow:var(--shadow-raised)}
.mafia-jumper .mj-say{position:absolute;top:-14px;right:-8px;
  font:700 22px/1.3 'Lemonada',cursive;color:var(--ink-900);background:#fff;
  border:2px solid var(--ink-900);border-radius:14px 18px 15px 19px;padding:4px 10px;
  box-shadow:var(--shadow-sticker);opacity:0;transform:scale(.5) rotate(6deg);
  transition:opacity .2s,transform .2s var(--spring)}
.mafia-jumper.landing .mj-say{opacity:1;transform:scale(1) rotate(6deg)}
@media (max-width:900px){.mafia-jumper{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .mafia-jumper{display:none}
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width:900px){
  .site-header{flex-wrap:wrap;padding:12px 16px;gap:8px 4px}
  /* flex-basis:100% — NOT width:100%. The base rule sets flex:1 (basis 0%),
     which wins over width for flex sizing, and overflow-x:auto strips the
     automatic minimum size, so the nav shrank to a few pixels and every link
     was off-screen behind a hidden scroller. */
  .site-nav{order:3;flex:1 0 100%;overflow-x:auto;white-space:nowrap;scrollbar-width:none;
    justify-content:space-between;gap:0}
  /* Tighter padding so all five links fit the row instead of hiding the last
     one behind a scroller that has no visible scrollbar. */
  .site-nav a{padding:10px 6px}
  .site-nav::-webkit-scrollbar{display:none}
  .section{padding:48px 20px}
  .hero{padding:64px 20px;min-height:0}
  .site-footer{padding:32px 20px}
  .grid-2,.grid-3,.price-grid,.feature-strip{grid-template-columns:1fr}
  h1{font-size:40px}
  h2{font-size:27px}
  .price-card__amount{font-size:38px}
  .site-footer__inner{gap:24px}
}

/* ── Icons: Lucide, inlined as CSS masks (no CDN) ── */
.ico[data-ico="settings"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.22%202h-.44a2%202%200%200%200-2%202v.18a2%202%200%200%201-1%201.73l-.43.25a2%202%200%200%201-2%200l-.15-.08a2%202%200%200%200-2.73.73l-.22.38a2%202%200%200%200%20.73%202.73l.15.1a2%202%200%200%201%201%201.72v.51a2%202%200%200%201-1%201.74l-.15.09a2%202%200%200%200-.73%202.73l.22.38a2%202%200%200%200%202.73.73l.15-.08a2%202%200%200%201%202%200l.43.25a2%202%200%200%201%201%201.73V20a2%202%200%200%200%202%202h.44a2%202%200%200%200%202-2v-.18a2%202%200%200%201%201-1.73l.43-.25a2%202%200%200%201%202%200l.15.08a2%202%200%200%200%202.73-.73l.22-.39a2%202%200%200%200-.73-2.73l-.15-.08a2%202%200%200%201-1-1.74v-.5a2%202%200%200%201%201-1.74l.15-.09a2%202%200%200%200%20.73-2.73l-.22-.38a2%202%200%200%200-2.73-.73l-.15.08a2%202%200%200%201-2%200l-.43-.25a2%202%200%200%201-1-1.73V4a2%202%200%200%200-2-2z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.22%202h-.44a2%202%200%200%200-2%202v.18a2%202%200%200%201-1%201.73l-.43.25a2%202%200%200%201-2%200l-.15-.08a2%202%200%200%200-2.73.73l-.22.38a2%202%200%200%200%20.73%202.73l.15.1a2%202%200%200%201%201%201.72v.51a2%202%200%200%201-1%201.74l-.15.09a2%202%200%200%200-.73%202.73l.22.38a2%202%200%200%200%202.73.73l.15-.08a2%202%200%200%201%202%200l.43.25a2%202%200%200%201%201%201.73V20a2%202%200%200%200%202%202h.44a2%202%200%200%200%202-2v-.18a2%202%200%200%201%201-1.73l.43-.25a2%202%200%200%201%202%200l.15.08a2%202%200%200%200%202.73-.73l.22-.39a2%202%200%200%200-.73-2.73l-.15-.08a2%202%200%200%201-1-1.74v-.5a2%202%200%200%201%201-1.74l.15-.09a2%202%200%200%200%20.73-2.73l-.22-.38a2%202%200%200%200-2.73-.73l-.15.08a2%202%200%200%201-2%200l-.43-.25a2%202%200%200%201-1-1.73V4a2%202%200%200%200-2-2z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="copy"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20x%3D%228%22%20y%3D%228%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M4%2016c-1.1%200-2-.9-2-2V4c0-1.1.9-2%202-2h10c1.1%200%202%20.9%202%202%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20x%3D%228%22%20y%3D%228%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cpath%20d%3D%22M4%2016c-1.1%200-2-.9-2-2V4c0-1.1.9-2%202-2h10c1.1%200%202%20.9%202%202%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="party-popper"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.8%2011.3%202%2022l10.7-3.79%22%2F%3E%3Cpath%20d%3D%22M4%203h.01%22%2F%3E%3Cpath%20d%3D%22M22%208h.01%22%2F%3E%3Cpath%20d%3D%22M15%202h.01%22%2F%3E%3Cpath%20d%3D%22M22%2020h.01%22%2F%3E%3Cpath%20d%3D%22m22%202-2.24.75a2.9%202.9%200%200%200-1.96%203.12v0c.1.86-.57%201.63-1.45%201.63h-.38c-.86%200-1.6.6-1.76%201.44L14%2010%22%2F%3E%3Cpath%20d%3D%22m22%2013-.82-.33c-.86-.34-1.82.2-1.98%201.11v0c-.11.7-.72%201.22-1.43%201.22H17%22%2F%3E%3Cpath%20d%3D%22m11%202%20.33.82c.34.86-.2%201.82-1.11%201.98v0C9.52%204.9%209%205.52%209%206.23V7%22%2F%3E%3Cpath%20d%3D%22M11%2013c1.93%201.93%202.83%204.17%202%205-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5%20.83-.83%203.07.07%205%202Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.8%2011.3%202%2022l10.7-3.79%22%2F%3E%3Cpath%20d%3D%22M4%203h.01%22%2F%3E%3Cpath%20d%3D%22M22%208h.01%22%2F%3E%3Cpath%20d%3D%22M15%202h.01%22%2F%3E%3Cpath%20d%3D%22M22%2020h.01%22%2F%3E%3Cpath%20d%3D%22m22%202-2.24.75a2.9%202.9%200%200%200-1.96%203.12v0c.1.86-.57%201.63-1.45%201.63h-.38c-.86%200-1.6.6-1.76%201.44L14%2010%22%2F%3E%3Cpath%20d%3D%22m22%2013-.82-.33c-.86-.34-1.82.2-1.98%201.11v0c-.11.7-.72%201.22-1.43%201.22H17%22%2F%3E%3Cpath%20d%3D%22m11%202%20.33.82c.34.86-.2%201.82-1.11%201.98v0C9.52%204.9%209%205.52%209%206.23V7%22%2F%3E%3Cpath%20d%3D%22M11%2013c1.93%201.93%202.83%204.17%202%205-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5%20.83-.83%203.07.07%205%202Z%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="gavel"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m14%2013-7.5%207.5c-.83.83-2.17.83-3%200%200%200%200%200%200%200a2.12%202.12%200%200%201%200-3L11%2010%22%2F%3E%3Cpath%20d%3D%22m16%2016%206-6%22%2F%3E%3Cpath%20d%3D%22m8%208%206-6%22%2F%3E%3Cpath%20d%3D%22m9%207%208%208%22%2F%3E%3Cpath%20d%3D%22m21%2011-8-8%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m14%2013-7.5%207.5c-.83.83-2.17.83-3%200%200%200%200%200%200%200a2.12%202.12%200%200%201%200-3L11%2010%22%2F%3E%3Cpath%20d%3D%22m16%2016%206-6%22%2F%3E%3Cpath%20d%3D%22m8%208%206-6%22%2F%3E%3Cpath%20d%3D%22m9%207%208%208%22%2F%3E%3Cpath%20d%3D%22m21%2011-8-8%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="wifi"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2013a10%2010%200%200%201%2014%200%22%2F%3E%3Cpath%20d%3D%22M8.5%2016.5a5%205%200%200%201%207%200%22%2F%3E%3Cpath%20d%3D%22M2%208.82a15%2015%200%200%201%2020%200%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212.01%22%20y1%3D%2220%22%20y2%3D%2220%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2013a10%2010%200%200%201%2014%200%22%2F%3E%3Cpath%20d%3D%22M8.5%2016.5a5%205%200%200%201%207%200%22%2F%3E%3Cpath%20d%3D%22M2%208.82a15%2015%200%200%201%2020%200%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212.01%22%20y1%3D%2220%22%20y2%3D%2220%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="venetian-mask"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012a5%205%200%200%200%205%205%208%208%200%200%201%205%202%208%208%200%200%201%205-2%205%205%200%200%200%205-5V7h-5a8%208%200%200%200-5%202%208%208%200%200%200-5-2H2Z%22%2F%3E%3Cpath%20d%3D%22M6%2011c1.5%200%203%20.5%203%202-2%200-3%200-3-2Z%22%2F%3E%3Cpath%20d%3D%22M18%2011c-1.5%200-3%20.5-3%202%202%200%203%200%203-2Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012a5%205%200%200%200%205%205%208%208%200%200%201%205%202%208%208%200%200%201%205-2%205%205%200%200%200%205-5V7h-5a8%208%200%200%200-5%202%208%208%200%200%200-5-2H2Z%22%2F%3E%3Cpath%20d%3D%22M6%2011c1.5%200%203%20.5%203%202-2%200-3%200-3-2Z%22%2F%3E%3Cpath%20d%3D%22M18%2011c-1.5%200-3%20.5-3%202%202%200%203%200%203-2Z%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="users"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="search"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22m21%2021-4.3-4.3%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22m21%2021-4.3-4.3%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="heart-pulse"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%22%2F%3E%3Cpath%20d%3D%22M3.22%2012H9.5l.5-1%202%204.5%202-7%201.5%203.5h5.27%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%22%2F%3E%3Cpath%20d%3D%22M3.22%2012H9.5l.5-1%202%204.5%202-7%201.5%203.5h5.27%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="crosshair"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%2222%22%20x2%3D%2218%22%20y1%3D%2212%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%226%22%20x2%3D%222%22%20y1%3D%2212%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%226%22%20y2%3D%222%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2222%22%20y2%3D%2218%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%2222%22%20x2%3D%2218%22%20y1%3D%2212%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%226%22%20x2%3D%222%22%20y1%3D%2212%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%226%22%20y2%3D%222%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2222%22%20y2%3D%2218%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="ghost"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2010h.01%22%2F%3E%3Cpath%20d%3D%22M15%2010h.01%22%2F%3E%3Cpath%20d%3D%22M12%202a8%208%200%200%200-8%208v12l3-3%202.5%202.5L12%2019l2.5%202.5L17%2019l3%203V10a8%208%200%200%200-8-8z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2010h.01%22%2F%3E%3Cpath%20d%3D%22M15%2010h.01%22%2F%3E%3Cpath%20d%3D%22M12%202a8%208%200%200%200-8%208v12l3-3%202.5%202.5L12%2019l2.5%202.5L17%2019l3%203V10a8%208%200%200%200-8-8z%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="chevron-down"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="moon"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%200%209%209%209%209%200%201%201-9-9Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%200%209%209%209%209%200%201%201-9-9Z%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="sun"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2%22%2F%3E%3Cpath%20d%3D%22M12%2020v2%22%2F%3E%3Cpath%20d%3D%22m4.93%204.93%201.41%201.41%22%2F%3E%3Cpath%20d%3D%22m17.66%2017.66%201.41%201.41%22%2F%3E%3Cpath%20d%3D%22M2%2012h2%22%2F%3E%3Cpath%20d%3D%22M20%2012h2%22%2F%3E%3Cpath%20d%3D%22m6.34%2017.66-1.41%201.41%22%2F%3E%3Cpath%20d%3D%22m19.07%204.93-1.41%201.41%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2%22%2F%3E%3Cpath%20d%3D%22M12%2020v2%22%2F%3E%3Cpath%20d%3D%22m4.93%204.93%201.41%201.41%22%2F%3E%3Cpath%20d%3D%22m17.66%2017.66%201.41%201.41%22%2F%3E%3Cpath%20d%3D%22M2%2012h2%22%2F%3E%3Cpath%20d%3D%22M20%2012h2%22%2F%3E%3Cpath%20d%3D%22m6.34%2017.66-1.41%201.41%22%2F%3E%3Cpath%20d%3D%22m19.07%204.93-1.41%201.41%22%2F%3E%3C%2Fsvg%3E")}
.ico[data-ico="sparkles"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203-1.912%205.813a2%202%200%200%201-1.275%201.275L3%2012l5.813%201.912a2%202%200%200%201%201.275%201.275L12%2021l1.912-5.813a2%202%200%200%201%201.275-1.275L21%2012l-5.813-1.912a2%202%200%200%201-1.275-1.275L12%203Z%22%2F%3E%3Cpath%20d%3D%22M5%203v4%22%2F%3E%3Cpath%20d%3D%22M19%2017v4%22%2F%3E%3Cpath%20d%3D%22M3%205h4%22%2F%3E%3Cpath%20d%3D%22M17%2019h4%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203-1.912%205.813a2%202%200%200%201-1.275%201.275L3%2012l5.813%201.912a2%202%200%200%201%201.275%201.275L12%2021l1.912-5.813a2%202%200%200%201%201.275-1.275L21%2012l-5.813-1.912a2%202%200%200%201-1.275-1.275L12%203Z%22%2F%3E%3Cpath%20d%3D%22M5%203v4%22%2F%3E%3Cpath%20d%3D%22M19%2017v4%22%2F%3E%3Cpath%20d%3D%22M3%205h4%22%2F%3E%3Cpath%20d%3D%22M17%2019h4%22%2F%3E%3C%2Fsvg%3E")}

/* ── How-to-play page ───────────────────────────────────────── */
.htp-lede{margin:0 auto;max-width:52ch;color:var(--ink-700)}
.pixel--sm{font-size:14px}
.phase-list{display:grid;gap:16px}
.phase{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
  background:var(--paper-000);border:var(--stroke-doodle) solid var(--ink-900);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sticker);padding:24px}
.phase__marker{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:56px}
.phase p{margin:4px 0 0;color:var(--ink-500)}
.htp-aside{margin-top:16px;font-size:24px;text-align:left}
.htp-win,.htp-roles{margin-top:24px}
.role__tip{margin-top:12px !important;font-size:19px;line-height:1.2}
.vip-note{margin-top:24px;background:var(--paper-000);border:1.5px solid var(--ink-900);
  border-radius:var(--radius-md);padding:16px 24px;display:flex;align-items:center;gap:12px;
  color:var(--ink-500);flex-wrap:wrap}
.vip-note a{font:700 16px/1 'Baloo Bhaijaan 2',system-ui,sans-serif;white-space:nowrap}
.tips{max-width:62ch}
.section--cta h1{margin:4px 0 8px;font-size:48px}
@media (max-width:900px){
  .phase{grid-template-columns:1fr;gap:12px}
  .phase__marker{flex-direction:row}
  .section--cta h1{font-size:34px}
}

/* ── Legal / long-form prose (terms, privacy) ───────────────── */
.prose-page{padding:48px 40px;max-width:900px;margin:0 auto}
.prose-head{text-align:center;margin-bottom:32px}
.prose-head h1{font-size:48px;margin:8px 0}
.prose-head p{color:var(--ink-500);margin:0}
.prose{background:var(--paper-000);border:var(--stroke-doodle) solid var(--ink-900);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);padding:32px}
.prose h2{font-size:27px;margin:32px 0 12px;padding-bottom:8px;
  border-bottom:var(--stroke-doodle) solid var(--marker-yellow);display:inline-block}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:20px 0 8px;color:var(--ink-700)}
.prose p{margin:0 0 12px;line-height:1.8;color:var(--ink-700)}
.prose ul,.prose ol{margin:12px 0;padding-inline-start:20px;display:grid;gap:6px}
.prose li{line-height:1.7;color:var(--ink-700)}
.prose li::marker{color:var(--marker-pink-deep)}
.prose strong{color:var(--ink-900)}
.prose a{color:var(--marker-blue-deep)}
/* the old page used these two callout shapes — keep them, restyled */
.definition-box{background:var(--paper-100);border-inline-start:6px solid var(--marker-yellow);
  border-radius:var(--radius-md);padding:16px 20px;margin:12px 0}
.definition-box p{margin:0}
.warning-box{background:#ffdcc2;border-inline-start:6px solid var(--marker-orange-deep);
  border-radius:var(--radius-md);padding:16px 20px;margin:16px 0}
.warning-box h3{margin-top:0}
.pricing-table{width:100%;border-collapse:collapse;margin:16px 0;
  border:var(--stroke-doodle) solid var(--ink-900);border-radius:var(--radius-md);overflow:hidden}
.pricing-table th{background:var(--ink-900);color:var(--marker-yellow);padding:12px;
  font-family:'Baloo Bhaijaan 2',system-ui,sans-serif;font-weight:700}
.pricing-table td{padding:12px;border-bottom:1.5px solid var(--ink-150);text-align:center;
  background:var(--paper-000)}
.pricing-table tr:last-child td{border-bottom:none}
@media (max-width:900px){
  .prose-page{padding:32px 16px}
  .prose{padding:20px}
  .prose-head h1{font-size:34px}
  .pricing-table th,.pricing-table td{padding:8px 6px;font-size:14px}
}

/* Shapes the legal pages use that the rebuild carried over from their old
   inline <style>. Restyled onto the ink-and-paper system rather than kept as
   the old soft-shadow cards. */
.rights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:24px 0}
.right-card{background:var(--paper-000);border:var(--stroke-doodle) solid var(--ink-900);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sticker);padding:20px;text-align:center;
  transition:transform .12s var(--spring),box-shadow .12s var(--spring)}
.right-card:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-raised)}
.right-card .icon{font-size:32px;margin-bottom:8px;display:block}
.right-card h4{font-size:18px;margin:0 0 4px}
.right-card p{margin:0;color:var(--ink-500);font-size:14px}
.cookie-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:24px 0}
.cookie-item{background:var(--paper-100);border:1.5px solid var(--ink-900);
  border-radius:var(--radius-md);padding:16px}
.cookie-item h4{font-size:17px;margin:0 0 4px}
.cookie-item p{margin:0;color:var(--ink-500);font-size:14px}
/* Tone-carrying callouts — same shape, different marker colour */
.green-box,.info-box,.security-box{border-radius:var(--radius-md);padding:16px 20px;margin:16px 0;
  border-inline-start:6px solid var(--ink-900)}
.green-box{background:#d8f4d2;border-inline-start-color:var(--marker-green-deep)}
.info-box{background:#cdf2f6;border-inline-start-color:var(--marker-cyan-deep)}
.security-box{background:#e6d9fb;border-inline-start-color:var(--marker-purple-deep)}
.green-box h3,.info-box h3,.security-box h3{margin-top:0}
.green-box p:last-child,.info-box p:last-child,.security-box p:last-child,
.green-box ul:last-child,.info-box ul:last-child,.security-box ul:last-child{margin-bottom:0}
@media (max-width:900px){
  .rights-grid,.cookie-grid{grid-template-columns:1fr}
}