/* ==========================================================================
   Reso marketing site — shared styles
   Palette: logo red + black on white with neutral greys, like the app.
   Ledger-style ruled rows echo the paper registers many Kerala stays still
   use. Font: Fustat (+ Anek Malayalam for Malayalam script).
   ========================================================================== */

/* ==========================================================================
   Fonts: self-hosted (no request to Google). Fustat is trimmed to the weights and
   characters the site uses; Anek Malayalam only loads on pages that show Malayalam
   in it; Caveat is the hero's handwriting. All are SIL Open Font License.
   ========================================================================== */
@font-face { font-family: "Fustat"; src: url(/assets/fonts/fustat-latin.woff2) format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00B7, U+2013, U+2014, U+2018, U+2019, U+201C, U+201D, U+2026, U+2022; }
@font-face { font-family: "Fustat"; src: url(/assets/fonts/fustat-rupee.woff2) format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+20B9; }
@font-face { font-family: "Anek Malayalam"; src: url(/assets/fonts/anek-malayalam.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0D00-0D7F, U+200C-200D, U+25CC; }
@font-face { font-family: "Caveat"; src: url(/assets/fonts/caveat-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
/* Same-size stand-in shown for a split second while Fustat loads, so the text does not jump. */
@font-face { font-family: "Fustat Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 101.6%; ascent-override: 98.4%; descent-override: 41.3%; line-gap-override: 0%; }

:root {
  --red: #ff1616;          /* logo red — fills, large display only */
  --red-btn: #e01212;      /* white text passes AA (4.9:1) */
  --red-press: #b80c0c;
  --red-text: #c80d0d;     /* red text on white (6:1) */
  --ink: #000;
  --text: #262626;
  --muted: #5c5c5c;
  --line: #dedede;
  --mist: #f4f4f5;
  --paper: #fff;
  --wa: #0f7a3f;           /* WhatsApp actions (white text 5.4:1) */
  --st-pending: #f97316;
  --st-confirmed: #6366f1;
  --st-done: #22c55e;

  --r-ctl: 12px;
  --r-panel: 22px;
  --gutter: clamp(20px, 5vw, 48px);
  --wrap: 1160px;
  --font: "Fustat", "Fustat Fallback", "Anek Malayalam", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--red); color: #fff; }
:lang(ml) { line-height: 1.8; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 200; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.h1, .h2, .h3 { color: var(--ink); font-weight: 800; letter-spacing: -0.025em; }
.h1 { font-size: clamp(2.35rem, 1.2rem + 5.6vw, 4.6rem); line-height: 1.02; }
.h2 { font-size: clamp(1.75rem, 1rem + 2.8vw, 2.9rem); line-height: 1.08; }
.h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; }
:lang(ml) .h1, :lang(ml) .h2, :lang(ml) .h3 { letter-spacing: 0; line-height: 1.25; }
.lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.55; color: var(--text); max-width: 34em; }
.muted { color: var(--muted); }
.note { font-size: .875rem; color: var(--muted); }
.ml-line { font-size: 1.05rem; color: var(--muted); margin-top: 14px; max-width: 34em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: var(--r-ctl);
  font: 700 1rem/1.2 var(--font); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn-red { background: var(--red-btn); color: #fff; }
.btn-red:hover { background: var(--red-press); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #2b2b2b; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: #0b6232; }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: .9375rem; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link { color: var(--red-text); font-weight: 700; text-underline-offset: 3px; }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--line); }
.head-in { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.logo { display: block; flex: none; }
.logo img { height: 22px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.nav a { padding: 8px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--text); }
.nav a:hover { background: var(--mist); }
.nav a[aria-current="page"] { color: var(--red-text); }
.head-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang { font-weight: 700; font-size: .9rem; text-decoration: none; padding: 8px 10px; border-radius: 8px; color: var(--muted); }
.lang:hover { background: var(--mist); color: var(--ink); }
.menu-btn { display: none; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 12px; background: none; cursor: pointer; align-items: center; justify-content: center; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; content: ""; }
.menu-btn span::before { position: absolute; top: -6px; }
.menu-btn span::after { position: absolute; top: 6px; }

@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .head-end .btn-red, .head-end .lang { display: none; }
  .head-end { margin-left: auto; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); flex-direction: column; align-items: stretch; margin: 0; padding: 8px var(--gutter) 20px; border-bottom: 1px solid var(--line); gap: 0; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav .nav-extra { display: contents; }
  .nav .nav-stays { color: var(--ink); font-weight: 800; }
}
@media (min-width: 961px) { .nav .nav-extra { display: none; } }
/* no-JS fallback: show the menu inline instead of a dropdown */
.js-off .head-in { flex-wrap: wrap; padding-block: 8px; }
.js-off .menu-btn { display: none; }
.js-off .nav { display: flex; position: static; flex-direction: row; flex-wrap: wrap; order: 3; width: 100%; padding: 0; border: 0; margin: 0; }
.js-off .nav a { border: 0; padding: 8px 12px; }

/* ---------- hero ---------- */
.hero { padding: clamp(36px, 6vw, 84px) 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.hero .h1 { max-width: 11ch; }
.hero .lede { margin-top: 22px; }
.hero .btn-row { margin-top: 30px; }
.hero-meta { margin-top: 22px; font-size: .95rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hero-meta li { display: flex; align-items: center; gap: 8px; }
.hero-meta li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

.hero-art { position: relative; height: 640px; max-width: 520px; margin-inline: auto; width: 100%; overflow: hidden; }
.register {
  position: absolute; left: 6px; top: 16px; width: calc(100% - 12px); padding: 18px 0 64px;
  background:
    linear-gradient(90deg, transparent 25%, rgba(255,22,22,.35) 25%, rgba(255,22,22,.35) calc(25% + 1px), transparent calc(25% + 1px)),
    repeating-linear-gradient(180deg, transparent 0, transparent 41px, #c9d3e6 41px, #c9d3e6 42px),
    #fbfbf8;
  border: 1px solid var(--line); border-radius: 6px 18px 18px 6px; box-shadow: 0 1px 0 var(--line), 0 18px 40px -18px rgba(0,0,0,.25);
  transform: rotate(-3deg); font-family: var(--hand); color: #26357a;
}
.reg-title { font: 700 .72rem/1 var(--font); letter-spacing: .04em; color: #7a7a7a; padding: 0 20px 14px 29%; }
.reg-row { position: relative; display: grid; grid-template-columns: 25% 1fr 1fr auto; gap: 8px; white-space: nowrap; align-items: end; height: 42px; padding: 0 18px 4px 0; font-size: 1.45rem; line-height: 1; font-weight: 600; }
.reg-row span:first-child { padding-left: 12px; font-size: 1.2rem; }
.reg-row span { transition: opacity .3s; }
.reg-row .strike {
  position: absolute; left: 3%; top: 50%; width: 96%; height: 4px; background: var(--red); border-radius: 3px;
  transform: scaleX(0); transform-origin: left; animation: strike .6s cubic-bezier(.7, 0, .2, 1) forwards;
  animation-delay: calc(.6s + var(--i) * .32s);
}
.reg-row span { animation: dim .3s forwards; animation-delay: calc(1s + var(--i) * .32s); }
@keyframes strike { to { transform: scaleX(1); } }
@keyframes dim { to { opacity: .42; } }
.phone {
  position: absolute; right: 4%; top: 262px; width: 52%; max-width: 270px;
  border: 9px solid var(--ink); border-radius: 42px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
}
.phone img { width: 100%; height: auto; aspect-ratio: 600 / 1261; }
@media (prefers-reduced-motion: reduce) {
  .reg-row .strike { animation: none; transform: scaleX(1); }
  .reg-row span { animation: none; opacity: .42; }
  html { scroll-behavior: auto; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero .h1 { max-width: 12ch; }
  .hero-art { height: 560px; }
}
@media (max-width: 420px) {
  .hero-art { height: 500px; }
  .reg-row { font-size: 1.2rem; }
  .reg-row span:first-child { font-size: 1.05rem; }
}

/* ---------- two doors ---------- */
.doors { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--line); }
.door { display: flex; flex-direction: column; gap: 10px; padding: clamp(28px, 4vw, 48px) var(--gutter); text-decoration: none; transition: background .2s; }
.door .h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); }
.door p { max-width: 30em; }
.door-owner { background: var(--mist); padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.door-owner:hover { background: #ebebed; }
.door-guest { background: var(--paper); border-left: 1px solid var(--line); padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.door-guest:hover { background: var(--mist); }
.door-go { margin-top: 8px; font-weight: 800; display: inline-flex; gap: 8px; align-items: center; }
.door-owner .door-go { color: var(--red-text); }
.door-guest .door-go { color: var(--ink); }
@media (max-width: 760px) { .doors { grid-template-columns: 1fr; } .door-owner, .door-guest { padding-inline: var(--gutter); } .door-guest { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- sections ---------- */
.sec { padding: clamp(56px, 8vw, 104px) 0; }
.sec-mist { background: var(--mist); }
.sec-head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 52px); }
.sec-head .lede { margin-top: 16px; }
.kicker { font-weight: 700; color: var(--red-text); margin-bottom: 12px; font-size: .95rem; }

/* ledger list: feature rows ruled like a register */
.ledger { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 5vw, 72px); padding: clamp(28px, 4vw, 44px) 0; border-top: 2px solid var(--ink); }
.ledger-title { position: sticky; top: 92px; align-self: start; }
.ledger-title p { margin-top: 10px; color: var(--muted); max-width: 26em; }
.ledger-rows li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ledger-rows li:first-child { padding-top: 4px; }
.ledger-rows b { color: var(--ink); font-weight: 700; }
.ledger-rows span { color: var(--text); }
.ledger-rows .tag { display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: .75rem; font-weight: 700; border-radius: 99px; background: var(--ink); color: #fff; vertical-align: 2px; }
@media (max-width: 860px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger-title { position: static; }
  .ledger-rows li { grid-template-columns: 1fr; }
}

/* spotlight: text + mock */
.spot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; padding: clamp(36px, 5vw, 64px) 0; }
.spot + .spot { border-top: 1px solid var(--line); }
.spot.flip .spot-text { order: 2; }
.spot-text .h2 { font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); }
.spot-text p { margin-top: 16px; max-width: 32em; }
.spot-text ul { margin-top: 18px; display: grid; gap: 8px; }
.spot-text ul li { display: flex; gap: 12px; align-items: baseline; }
.spot-text ul li::before { content: ""; flex: none; width: 14px; height: 3px; background: var(--red); transform: translateY(-4px); }
.spot-text .btn-row { margin-top: 24px; }
@media (max-width: 860px) { .spot { grid-template-columns: 1fr; } .spot.flip .spot-text { order: 0; } }

.panel { background: var(--mist); border-radius: var(--r-panel); padding: clamp(18px, 3vw, 32px); position: relative; }
.panel-cap { margin-top: 14px; font-size: .8125rem; color: var(--muted); text-align: center; }
.sample { display: block; text-align: right; margin: -6px 2px 10px; font-size: .75rem; font-weight: 700; color: var(--muted); }

/* mock: availability grid */
.avail { background: #fff; border-radius: 16px; border: 1px solid var(--line); overflow: hidden; font-size: .875rem; }
.avail-row { display: grid; grid-template-columns: 92px repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.avail-row:last-child { border-bottom: 0; }
.avail-row > * { padding: 12px 10px; min-height: 48px; display: flex; align-items: center; }
.avail-row > b { font-weight: 700; color: var(--ink); border-right: 1px solid var(--line); }
.avail-head { background: #fafafa; color: var(--muted); font-weight: 600; font-size: .8125rem; }
.avail-head > * { min-height: 38px; }
.cell-free { color: #9a9a9a; }
.cell-book { color: #fff; font-weight: 600; border-radius: 8px; margin: 6px 4px; padding: 6px 10px; min-height: 36px; font-size: .8125rem; }
.cell-book.span2 { grid-column: span 2; }
.cell-book.c1 { background: var(--st-confirmed); }
.cell-book.c2 { background: var(--st-pending); }
.cell-book.c3 { background: #0f172a; }
.cell-off { grid-column: span 4; color: var(--muted); background: repeating-linear-gradient(135deg, #f1f1f1 0 8px, #fafafa 8px 16px); font-size: .8125rem; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; font-size: .8125rem; font-weight: 700; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* mock: invoice */
.inv { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; font-size: .9rem; }
.inv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.inv-top b { font-size: 1.05rem; color: var(--ink); }
.seg { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; font-weight: 700; font-size: .8125rem; }
.seg span { padding: 6px 12px; }
.seg .on { background: var(--ink); color: #fff; }
.inv dl { display: grid; gap: 0; margin-top: 6px; }
.inv dl div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.inv dl div:last-child { border-bottom: 0; font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.inv .meta { margin-top: 12px; color: var(--muted); font-size: .8125rem; }

/* mock: whatsapp */
.chat { background: #efeae2; border-radius: 16px; padding: 18px; display: grid; gap: 10px; }
.bubble { background: #fff; border-radius: 4px 14px 14px 14px; padding: 10px 14px; font-size: .9rem; max-width: 92%; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.bubble.out { background: #d9fdd3; border-radius: 14px 4px 14px 14px; justify-self: end; }
.bubble small { display: block; text-align: right; color: #667781; font-size: .7rem; margin-top: 2px; }
.chat-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; padding: 10px 12px; border-radius: 12px; font-size: .8125rem; color: var(--muted); }

/* mock: public booking page */
.browser { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fafafa; border-bottom: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d6d6d6; }
.browser-bar span { margin-left: 8px; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 3px 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-photo { height: 130px; background: linear-gradient(180deg, #e4e4e7 0 38%, transparent 38%), radial-gradient(120% 90% at 20% 110%, #8f8f96 0 45%, transparent 46%), radial-gradient(120% 90% at 85% 120%, #a9a9b0 0 50%, transparent 51%), #f0f0f2; }
.pg-body { padding: 16px 18px 18px; display: grid; gap: 12px; }
.pg-body h4 { font-size: 1.1rem; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verified { font-size: .7rem; font-weight: 700; background: var(--mist); color: var(--ink); border: 1px solid var(--line); padding: 1px 8px; border-radius: 99px; }
.pg-room { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: .9rem; }
.pg-room b { color: var(--ink); display: block; }
.pg-room span { color: var(--muted); font-size: .8125rem; }
.pg-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* steps (a real sequence) */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.steps li { counter-increment: s; padding: 22px 22px 8px 0; border-right: 1px solid var(--line); margin-right: 22px; }
.steps li:last-child { border-right: 0; margin-right: 0; }
.steps li::before { content: counter(s); display: block; font-size: 2.6rem; font-weight: 800; color: var(--red); line-height: 1; margin-bottom: 14px; }
.steps b { display: block; color: var(--ink); font-size: 1.1rem; margin-bottom: 6px; }
.steps p { color: var(--text); font-size: .975rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } .steps li:nth-child(2) { border-right: 0; margin-right: 0; } .steps li { border-bottom: 1px solid var(--line); padding-bottom: 20px; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } .steps li { border-right: 0; margin-right: 0; } }

/* kerala band */
.places { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.places li { padding: 8px 16px; border: 1.5px solid var(--ink); color: var(--ink); border-radius: 99px; font-weight: 600; background: #fff; }
.band-mist { background: var(--mist); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 80px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.facts { display: grid; gap: 0; }
.facts li { padding: 14px 0; border-bottom: 1px solid #cfcfd3; display: grid; grid-template-columns: minmax(8.5em, 11em) minmax(0, 1fr); gap: 14px; }
.facts li:first-child { padding-top: 0; }
.facts b { color: var(--ink); }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; }
.plan { border: 2px solid var(--line); border-radius: var(--r-panel); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; background: #fff; }
.plan-pro { border-color: var(--ink); background: var(--ink); color: #e9e9e9; }
.plan-name { font-weight: 800; font-size: 1.35rem; color: var(--ink); }
.plan-pro .plan-name { color: #fff; }
.plan-for { margin-top: 6px; color: var(--muted); min-height: 3.2em; }
.plan-pro .plan-for { color: #b8b8b8; }
.price { margin: 18px 0 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price b { font-size: 2.8rem; line-height: 1; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.plan-pro .price b { color: #fff; }
.price s { color: #8c8c8c; font-size: 1.2rem; }
.price small { font-size: .95rem; color: var(--muted); }
.plan-pro .price small { color: #b8b8b8; }
.price-sub { font-size: .9375rem; color: var(--muted); margin-bottom: 20px; }
.plan-pro .price-sub { color: #b8b8b8; }
.plan ul { display: grid; gap: 10px; margin-bottom: 26px; flex: 1; }
.plan li { display: flex; gap: 10px; align-items: baseline; }
.plan li::before { content: "✓"; font-weight: 800; color: var(--red-text); flex: none; }
.plan-pro li::before { color: var(--red); }
.plan .btn { width: 100%; }
.plan-pro .btn-red { background: var(--red); color: #000; }
.plan-pro .btn-red:hover { background: #ff4a4a; }
.badge { position: absolute; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } .plan-for { min-height: 0; } }

.compare { width: 100%; border-collapse: collapse; font-size: .975rem; }
.compare th, .compare td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { border-bottom: 2px solid var(--ink); color: var(--ink); }
.compare td:first-child { font-weight: 600; color: var(--ink); }
.compare .y { color: var(--ink); font-weight: 700; }
.compare .n { color: #8a8a8a; }
.table-scroll { overflow-x: auto; }

/* faq */
.faq { max-width: 800px; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-weight: 700; color: var(--ink); font-size: 1.075rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--red-text); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .ans { padding: 0 0 22px; max-width: 42em; }
.faq .ans p + p { margin-top: 10px; }

/* closing cta */
.cta { background: var(--ink); color: #d6d6d6; padding: clamp(56px, 8vw, 96px) 0; }
.cta .h2 { color: #fff; max-width: 16ch; }
.cta p { margin-top: 16px; max-width: 32em; font-size: 1.1rem; }
.cta .btn-row { margin-top: 28px; }
.cta .btn-red { background: var(--red); color: #000; }
.cta .btn-red:hover { background: #ff4a4a; }
.cta .btn-line { color: #fff; border-color: #fff; }
.cta .btn-line:hover { background: #fff; color: #000; }
.cta .strip { display: block; width: 72px; height: 6px; background: var(--red); border-radius: 3px; margin-bottom: 26px; }

/* footer */
.site-foot { background: #fff; border-top: 1px solid var(--line); padding: 56px 0 30px; font-size: .95rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.foot-brand img { height: 26px; width: auto; }
.foot-brand p { margin-top: 14px; color: var(--muted); max-width: 22em; }
.foot-brand .contact { margin-top: 16px; display: grid; gap: 4px; }
.foot-grid h3 { font-size: .95rem; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.foot-grid li { margin-bottom: 8px; }
.foot-grid a { text-decoration: none; color: var(--text); }
.foot-grid a:hover { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }
.foot-base { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: .875rem; }
@media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* mobile action bar (WhatsApp-first audience) */
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
  body { padding-bottom: 72px; }
}

/* breadcrumbs + prose pages */
.crumbs { padding-top: 22px; font-size: .875rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs span[aria-current] { color: var(--ink); }
.page-head { padding: clamp(24px, 4vw, 48px) 0 clamp(28px, 4vw, 48px); }
.page-head .h1 { font-size: clamp(2.1rem, 1.1rem + 4.4vw, 3.8rem); max-width: 19ch; }
.page-head .lede { margin-top: 20px; }
.page-head .btn-row { margin-top: 28px; }
.prose { max-width: 44rem; }
.prose h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); color: var(--ink); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; margin: 2.2em 0 .6em; }
.prose h3 { font-size: 1.2rem; color: var(--ink); margin: 1.6em 0 .4em; font-weight: 700; }
.prose p { margin-top: .9em; }
.prose ul, .prose ol { margin-top: .9em; display: grid; gap: .5em; }
.prose ul li { padding-left: 22px; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 3px; background: var(--red); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; padding-left: 34px; position: relative; }
.prose ol li::before { content: counter(n); position: absolute; left: 0; top: 0; font-weight: 800; color: var(--red-text); }
.prose a { color: var(--red-text); text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.callout { margin-top: 1.4em; padding: 18px 22px; border-left: 5px solid var(--red); background: var(--mist); border-radius: 0 14px 14px 0; }
.callout p:first-child { margin-top: 0; }
.legal h2 { font-size: 1.15rem; margin: 1.8em 0 .3em; letter-spacing: 0; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.related a { padding: 22px 22px 22px 0; border-right: 1px solid var(--line); margin-right: 22px; text-decoration: none; }
.related a:last-child { border-right: 0; margin-right: 0; }
.related b { display: block; color: var(--ink); font-size: 1.1rem; }
.related span { color: var(--muted); font-size: .95rem; }
.related a:hover b { color: var(--red-text); }
@media (max-width: 760px) { .related { grid-template-columns: 1fr; } .related a { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--line); } }

/* changelog */
.release { padding: 28px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 180px 1fr; gap: 24px; }
.release:first-of-type { border-top: 2px solid var(--ink); }
.release-meta b { display: block; font-size: 1.2rem; color: var(--ink); }
.release-meta span { color: var(--muted); font-size: .9rem; }
.release-tag { display: inline-block; margin-top: 8px; font-size: .75rem; font-weight: 700; padding: 2px 10px; border-radius: 99px; background: var(--red-btn); color: #fff; }
.release ul { display: grid; gap: 14px; }
.release li b { color: var(--ink); display: block; }
@media (max-width: 700px) { .release { grid-template-columns: 1fr; gap: 12px; } }

/* iphone steps */
.how { counter-reset: h; display: grid; gap: 0; max-width: 40rem; border-top: 2px solid var(--ink); }
.how li { counter-increment: h; display: grid; grid-template-columns: 56px 1fr; padding: 20px 0; border-bottom: 1px solid var(--line); }
.how li::before { content: counter(h); font-size: 1.8rem; font-weight: 800; color: var(--red); line-height: 1.1; }
.how b { color: var(--ink); display: block; }

/* 404 */
.nf { padding: clamp(60px, 12vw, 160px) 0; }
.nf .code { font-size: clamp(5rem, 4rem + 10vw, 11rem); font-weight: 800; color: var(--ink); line-height: .9; letter-spacing: -0.04em; position: relative; display: inline-block; }
.nf .code::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: .09em; background: var(--red); }

/* sitemap list */
.smap { columns: 2; column-gap: 40px; }
.smap li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--line); }
.smap a { font-weight: 700; color: var(--ink); text-decoration: none; }
.smap a:hover { color: var(--red-text); }
.smap span { display: block; color: var(--muted); font-size: .9rem; }
@media (max-width: 640px) { .smap { columns: 1; } }

@media print { .site-head, .mbar, .cta, .site-foot { display: none; } }

/* ---------- additions: mocks, plain facts, phone pair ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.tile small { display: block; color: var(--muted); font-size: .875rem; }
.tile b { display: block; margin-top: 4px; font-size: clamp(1.35rem, 1rem + 1.2vw, 1.8rem); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.tile-out b { color: var(--red-text); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.inv dt { color: var(--text); }
.inv dd { margin: 0; font-weight: 700; color: var(--ink); }
.avail-head > span { font-size: .8125rem; }
.facts-plain li { border-bottom-color: var(--line); }
.facts-plain b { color: var(--ink); }
.phone-pair { display: grid; justify-items: center; gap: 14px; }
.phone-pair .phone { position: static; width: min(260px, 70%); }
@media (max-width: 560px) { .facts li { grid-template-columns: 1fr; gap: 4px; } }
:lang(ml) .hero .h1 { max-width: 14em; }
:lang(ml) .btn { line-height: 1.35; }
:lang(ml) .ledger-rows b { font-weight: 700; }

/* ---------- refinements ---------- */
.h1, .h2, .h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.h1 + .lede, .h2 + .lede { margin-top: 16px; }
.plan li { display: block; position: relative; padding-left: 26px; }
.plan li::before { position: absolute; left: 0; top: 0; }
.release-meta .release-tag { color: #fff; }
.release-meta span { display: block; }
.release-meta .release-tag { display: inline-block; }
:lang(ml) .h1, :lang(ml) .h2, :lang(ml) .h3 { font-weight: 700; }

/* ---------- free strip, pills, slide-to-send, claim and trust blocks ---------- */
.pill-free { display: inline-block; background: var(--red-btn); color: #fff; font-size: .75rem; font-weight: 700; padding: 1px 9px; border-radius: 99px; vertical-align: 2px; margin-left: 6px; }
.pill-prem { display: inline-block; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 700; padding: 1px 9px; border-radius: 99px; vertical-align: 2px; margin-left: 6px; }
.freebar { border-bottom: 1px solid var(--line); }
.freebar .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.freebar a { display: block; padding: 26px 24px 26px 0; margin-right: 24px; border-right: 1px solid var(--line); text-decoration: none; }
.freebar a:last-child { border-right: 0; margin-right: 0; }
.freebar b { display: block; color: var(--ink); font-size: 1.15rem; line-height: 1.3; }
.freebar a > span { display: block; margin-top: 4px; color: var(--text); font-size: .975rem; }
.freebar a:hover b { color: var(--red-text); }
@media (max-width: 860px) {
  .freebar .wrap { grid-template-columns: 1fr; }
  .freebar a { margin-right: 0; padding-right: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .freebar a:last-child { border-bottom: 0; }
}
.slide { display: flex; align-items: center; gap: 12px; background: var(--wa); color: #fff; border-radius: 99px; padding: 6px 20px 6px 6px; font-weight: 700; font-size: .9375rem; }
.slide i { width: 40px; height: 40px; border-radius: 50%; background: #fff; flex: none; display: grid; place-items: center; }
.slide i::after { content: ""; width: 9px; height: 9px; border-top: 3px solid var(--wa); border-right: 3px solid var(--wa); transform: rotate(45deg); margin-left: -4px; }
.tabs-mock { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tabs-mock .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.guest-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: .9rem; margin-top: 8px; }
.guest-row b { color: var(--ink); display: block; }
.guest-row span { color: var(--muted); font-size: .8125rem; }
.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.two-up > div { border: 2px solid var(--line); border-radius: var(--r-panel); padding: clamp(22px, 3vw, 32px); background: #fff; }
.two-up h3 { margin-bottom: 8px; }
.two-up .btn { margin-top: 18px; }
@media (max-width: 760px) { .two-up { grid-template-columns: 1fr; } }
.ledger-rows .tag.tag-free { background: var(--red-btn); }
.ledger-rows .tag.tag-prem { background: var(--ink); }
.ledger-rows .tag-wrap { text-align: left; }
.trust-note { margin-top: 18px; font-size: .9375rem; color: var(--muted); max-width: 40rem; }

.how p { color: var(--text); font-size: .975rem; margin-top: 2px; }
.pill-inc { display: inline-block; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 700; padding: 1px 9px; border-radius: 99px; vertical-align: 2px; margin-left: 6px; }

/* ---------- mobile refinements ---------- */
[id] { scroll-margin-top: 84px; }
.chip { white-space: nowrap; }
.pg-room { flex-wrap: wrap; }
.page-head { padding-bottom: clamp(36px, 5vw, 56px); }
.mbar { transition: transform .25s ease; }
.mbar.is-hidden { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) { .mbar { transition: none; } }
@media (max-width: 960px) {
  .nav { max-height: calc(100vh - 68px); overflow-y: auto; }
  :lang(ml) .head-stays { display: none; }
}
@media (max-width: 760px) {
  .btn-sm { min-height: 44px; }
  .sec { padding: 44px 0; }
  .spot { padding: 28px 0; gap: 22px; }
  .foot-grid li { margin-bottom: 0; }
  .foot-grid a { display: block; padding: 9px 0; }
  .site-foot { padding-top: 40px; }
  .steps { grid-template-columns: 1fr; }
  .steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; border-right: 0; margin-right: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .steps li::before { grid-row: 1 / span 2; font-size: 1.9rem; margin: 0; }
  .steps li:last-child { border-bottom: 0; }
  .steps b { margin-bottom: 2px; }
  /* comparison tables become stacked rows */
  .compare thead { position: absolute; left: -9999px; }
  .compare, .compare tbody, .compare tr, .compare td { display: block; width: 100%; }
  .compare tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .compare td { border: 0; padding: 2px 0; }
  .compare td:first-child { font-weight: 700; margin-bottom: 4px; }
  .compare td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ink); }
}
@media (max-width: 520px) {
  .hero .btn-row .btn, .page-head .btn-row .btn, .cta .btn-row .btn { flex: 1 1 100%; }
}

/* ---------- speed ---------- */
/* Malayalam words on English pages (header toggle, one hero line, footer link) use the phone's own
   Malayalam font. That keeps the 65 KB Anek Malayalam download for the Malayalam page only. */
html:not([lang="ml"]) :lang(ml) { font-family: system-ui, "Noto Sans Malayalam", "Nirmala UI", "Malayalam Sangam MN", sans-serif; }
/* Skip layout and paint work for sections far below the screen until they are scrolled near. */
.sec, .cta, .site-foot { content-visibility: auto; contain-intrinsic-size: auto 720px; }
/* Malayalam labels are long: keep each header item on one line */
:lang(ml) .nav a, :lang(ml) .head-end .btn, :lang(ml) .head-end .lang { white-space: nowrap; }
@media (max-width: 1180px) { :lang(ml) .head-stays { display: none; } }