/* ---------- generic hero without the product screen ---------- */
.hero.lite{padding:92px 0 0}
.hero.lite h1{max-width:20ch}
.badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:42px}
.badges span{font-family:'Sora';font-size:12.5px;font-weight:600;color:#D7CFC8;border:1px solid var(--line2);
 border-radius:999px;padding:8px 15px;background:rgba(255,255,255,.04);display:inline-flex;align-items:center;gap:8px}
.badges span i{width:6px;height:6px;border-radius:50%;background:var(--red);display:block;font-style:normal}
.herofig{margin:52px auto 0;max-width:960px}

/* ---------- big three-up figure band ---------- */
.bigstats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
/* when the stats are the first thing in a band there is no heading for them to clear,
   and the margin just stacks onto the hero's padding and the band's own */
.wrap > .bigstats:first-child{margin-top:0}
.bigstat{border:1px solid var(--line2);border-radius:18px;padding:28px 26px;background:rgba(255,255,255,.04)}
.bigstat b{display:block;font-family:'Sora';font-weight:800;font-size:clamp(28px,3.4vw,40px);color:#fff;line-height:1.05;
 letter-spacing:-.02em}
.bigstat em{display:block;font-style:normal;font-family:'Sora';font-size:12px;letter-spacing:.14em;text-transform:uppercase;
 color:#FF8A6B;font-weight:700;margin-top:10px}
.bigstat p{font-size:13.8px;color:var(--muted);margin-top:10px;line-height:1.6}
@media(max-width:860px){.bigstats{grid-template-columns:1fr}}

/* ---------- numbered steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;position:relative}
.steps.three{grid-template-columns:repeat(3,1fr)}
.step{background:var(--l-card);border:1px solid var(--l-line);border-radius:16px;padding:24px 22px;position:relative}
.step b{font-family:'Sora';font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#C62F34}
.step h5{font-family:'Sora';font-size:16.5px;font-weight:600;color:var(--l-ink);margin:12px 0 9px;line-height:1.3}
.step p{font-size:13.8px;color:var(--l-muted);line-height:1.6}
.step .sn{position:absolute;right:18px;top:14px;font-family:'Sora';font-weight:800;font-size:40px;
 color:var(--l-ink);opacity:.07;line-height:1}
@media(max-width:1000px){.steps,.steps.three{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steps,.steps.three{grid-template-columns:1fr}}

/* ---------- comparison matrix ---------- */
.mxwrap{margin-top:38px;overflow-x:auto;border:1px solid var(--l-line);border-radius:16px;background:var(--l-card)}
.mx{width:100%;border-collapse:collapse;min-width:720px;font-size:14px}
.mx th,.mx td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--l-line);vertical-align:middle}
.mx thead th{position:sticky;top:0;background:#EFEAE6;font-family:'Sora';font-size:13px;font-weight:700;
 color:var(--l-ink);white-space:nowrap;z-index:2}
.mx thead th span{display:block;font-family:'Inter';font-size:11.5px;font-weight:400;color:var(--l-muted);margin-top:2px}
.mx tbody th{font-weight:400;color:var(--l-ink);width:44%}
.mx td{text-align:center;width:18.6%;color:var(--l-muted)}
.mx tr.grp th{background:#F7F3F0;font-family:'Sora';font-size:11.5px;font-weight:700;letter-spacing:.13em;
 text-transform:uppercase;color:#8b8079}
.mx tr.grp td{background:#F7F3F0}
.mx .y{color:#2E8B57;font-weight:700}
.mx .n{color:#c9c0b9}
.mx .ad{font-family:'Sora';font-size:11px;font-weight:700;color:#B67816;background:#FCEFD9;border-radius:999px;
 padding:4px 9px;display:inline-block}
.mx tr:last-child td,.mx tr:last-child th{border-bottom:0}
.mx .pr{font-family:'Sora';font-weight:700;color:var(--l-ink);font-size:15px}
.mx .pr span{display:block;font-family:'Inter';font-size:11px;font-weight:400;color:var(--l-muted)}
.mxnote{font-size:12.5px;color:var(--l-muted);margin-top:14px;text-align:center}

/* ---------- price cards ---------- */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px;align-items:start}
.pc{position:relative;background:var(--l-card);border:1px solid var(--l-line);border-radius:20px;padding:28px 26px;
 transition:transform .22s,box-shadow .22s}
.pc:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(40,28,24,.5)}
.pc.hot{border-color:rgba(228,58,63,.4);box-shadow:0 26px 60px -34px rgba(228,58,63,.5)}
.pc .rib{position:absolute;top:-11px;left:26px;font-family:'Sora';font-size:10.5px;font-weight:700;letter-spacing:.12em;
 text-transform:uppercase;color:#fff;background:linear-gradient(180deg,#F0484D,#E43A3F);border-radius:999px;padding:5px 12px}
.pc .tn{font-family:'Sora';font-size:20px;font-weight:700;color:var(--l-ink);display:flex;align-items:center;gap:9px}
.pc .tn i{width:10px;height:10px;border-radius:3px;background:var(--t,#E43A3F);font-style:normal;flex:none}
.pc .fit{font-size:13.5px;color:var(--l-muted);margin-top:8px;min-height:42px;line-height:1.5}
.pc .amt{font-family:'Sora';font-weight:800;font-size:36px;color:var(--l-ink);margin-top:16px;letter-spacing:-.02em;
 display:flex;align-items:baseline;gap:7px}
.pc .amt small{font-family:'Inter';font-size:12.5px;font-weight:500;color:var(--l-muted);letter-spacing:0}
.pc .amt .from{font-size:13px;font-weight:600;color:var(--l-muted);font-family:'Inter'}
.pc ul{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--l-line)}
.pc li{position:relative;padding-left:24px;font-size:13.8px;color:#5f5850;line-height:1.55;margin-bottom:11px}
.pc li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:8px;border-left:2px solid var(--t,#E43A3F);
 border-bottom:2px solid var(--t,#E43A3F);transform:rotate(-45deg)}
.pc .go{margin-top:22px;display:block;text-align:center}
@media(max-width:980px){.pcards{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}}

/* ---------- assurance / control grid ---------- */
.assur{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:38px}
.as{display:flex;gap:16px;background:var(--l-card);border:1px solid var(--l-line);border-radius:16px;padding:22px}
.as .ai{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;background:#FCE9E8;
 color:#C62F34;border:1px solid #F6DAD9}
.as .ai svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.as h5{font-family:'Sora';font-size:15.5px;font-weight:600;color:var(--l-ink);margin-bottom:7px;line-height:1.3}
.as p{font-size:13.6px;color:var(--l-muted);line-height:1.6}
@media(max-width:820px){.assur{grid-template-columns:1fr}}

/* ---------- category grid (integrations) ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.cat{background:var(--l-card);border:1px solid var(--l-line);border-radius:16px;padding:24px 22px;transition:.2s}
.cat:hover{transform:translateY(-3px);box-shadow:0 24px 48px -32px rgba(40,28,24,.5)}
.cat .ci{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#FCE9E8;color:#C62F34;
 border:1px solid #F6DAD9;margin-bottom:14px}
.cat .ci svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.cat b{display:block;font-family:'Sora';font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
 color:#B24A2E;margin-bottom:8px}
.cat h5{font-family:'Sora';font-size:16px;font-weight:600;color:var(--l-ink);margin-bottom:9px;line-height:1.3}
.cat p{font-size:13.6px;color:var(--l-muted);line-height:1.6}
@media(max-width:900px){.cats{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cats{grid-template-columns:1fr}}

/* ---------- numbered belief blocks (about) ---------- */
.beliefs{max-width:880px;margin:44px auto 0}
.bel{display:grid;grid-template-columns:110px 1fr;gap:28px;padding:32px 0;border-top:1px solid var(--line2)}
.bel:first-child{border-top:0;padding-top:0}
.bel .bn{font-family:'Sora';font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FF8A6B;
 padding-top:6px}
.bel h4{font-size:clamp(21px,2.5vw,27px);font-weight:700;line-height:1.25;margin-bottom:12px}
.bel p{font-size:16px;color:var(--muted);line-height:1.7}
@media(max-width:760px){.bel{grid-template-columns:1fr;gap:10px}}

/* ---------- tier accent hero ---------- */
.hero.tier .eyebrow.red{color:var(--t,#FF7A5C)}
.hero.tier h1 .acc{background:none;color:var(--t,#E43A3F);-webkit-text-fill-color:var(--t,#E43A3F)}
.tierglow{position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(1100px 620px at 50% -12%,var(--tGlow,rgba(232,62,66,.28)),transparent 62%)}
.tierstrip{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.tierstrip a{font-family:'Sora';font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--line2);
 border-radius:999px;padding:9px 17px;transition:.16s}
.tierstrip a:hover{color:var(--ink);border-color:var(--ink)}
.tierstrip a.on{color:#fff;background:var(--t,#E43A3F);border-color:transparent}

/* ---------- two-column checklist ---------- */
.boxlist{display:grid;grid-template-columns:1fr 1fr;gap:10px 34px;margin-top:34px}
.boxlist div{position:relative;padding-left:28px;font-size:14.6px;color:#5f5850;line-height:1.6;
 padding-bottom:11px;border-bottom:1px solid var(--l-line)}
.boxlist div::before{content:"";position:absolute;left:2px;top:7px;width:13px;height:8px;
 border-left:2px solid var(--t,#C62F34);border-bottom:2px solid var(--t,#C62F34);transform:rotate(-45deg)}
@media(max-width:820px){.boxlist{grid-template-columns:1fr}}

/* ---------- fit / recommendation columns ---------- */
.fitgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.fitc{border:1px solid var(--l-line);border-radius:16px;background:var(--l-card);padding:24px 22px}
.fitc .ft{font-family:'Sora';font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
 color:#fff;background:var(--t,#E43A3F);border-radius:999px;padding:4px 11px;display:inline-block}
.fitc h5{font-family:'Sora';font-size:17px;font-weight:700;color:var(--l-ink);margin:14px 0 10px}
.fitc p{font-size:13.8px;color:var(--l-muted);line-height:1.6;margin-bottom:9px}
.fitc p b{color:var(--l-ink);font-weight:600}
@media(max-width:900px){.fitgrid{grid-template-columns:1fr}}

/* ---------- PSG / promo band ---------- */
.prules{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.prules div{border:1px solid var(--l-line);border-radius:14px;padding:20px 22px;background:#FBF8F6;
 font-size:13.8px;color:#5F5850;line-height:1.65}
.prules b{display:block;font-family:'Sora';font-size:14.5px;color:var(--l-ink);margin-bottom:6px}
@media(max-width:820px){.prules{grid-template-columns:1fr}}

.light .promo{border-color:var(--l-line);background:var(--l-card)}
.light .promo h4{color:var(--l-ink)}
.light .promo p{color:var(--l-muted)}
.light .promo .pflag{background:#F4F0EC;border-color:var(--l-line)}
.promo{border:1px solid var(--line2);border-radius:22px;padding:34px 36px;margin-top:48px;display:flex;
 gap:30px;align-items:center;flex-wrap:wrap;
 background:radial-gradient(700px 300px at 8% 0,rgba(228,58,63,.22),transparent 60%),rgba(255,255,255,.04)}
.promo .pflag{font-size:34px;line-height:1;flex:none}
.promo .ptx{flex:1 1 340px}
.promo h4{font-size:22px;font-weight:700;margin-bottom:9px}
.promo p{font-size:14.5px;color:var(--muted);line-height:1.62;max-width:62ch}
.promolink{font-family:'Sora';font-size:14px;font-weight:600;color:#FF8A6B;white-space:nowrap;flex:none}
.promolink:hover{color:var(--ink)}
/* The promo band is usually the last thing in its section, so the section's own bottom
   padding gave it room. On the compare page the FAQ heading follows it inside the same
   section, and with no bottom margin the two were almost touching. */
.promo + *{margin-top:64px}

/* ---------- the statutory calendar ---------- */
.ctcal{margin-top:36px;border:1px solid var(--l-line);border-radius:18px;background:var(--l-card);
 overflow:hidden;box-shadow:0 26px 60px -46px rgba(40,28,24,.5)}
/* The "When" column was a fixed 178px carrying a nowrap pill, and Thailand's longest labels
   ("By the 7th, or the 15th online", "February, or 8 March online") are 185px, so they ate
   the card's whole right padding and sat against its border. The column is wider now, and
   the pill is allowed to wrap rather than nowrap, so a longer label in some future market
   takes a second line instead of spilling out of the card again.
   The column stays a fixed width on purpose: every row is its own grid, so a content-sized
   track would make each row's pill start at a different x and the column would stop reading
   as a column. */
.ctcal .hd{display:grid;grid-template-columns:210px minmax(0,1fr) 200px;
 gap:20px;padding:13px 28px 13px 24px;
 background:#F0EBE7;border-bottom:1px solid var(--l-line);font-family:'Sora';font-size:10.5px;
 font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#8A817A}
.ctr{display:grid;grid-template-columns:210px minmax(0,1fr) 200px;gap:20px;
 align-items:center;
 padding:19px 28px 19px 24px;border-bottom:1px solid var(--l-line);transition:background .15s}
.ctr:last-child{border-bottom:0}
.ctr:hover{background:#FBF8F6}
.ctr .who b{display:block;font-family:'Sora';font-size:15.5px;font-weight:600;color:var(--l-ink);
 line-height:1.3}
.ctr .who span{display:block;font-size:12.3px;color:var(--l-muted);margin-top:4px}
.ctr p{font-size:13.7px;color:#5F5850;line-height:1.55}
.ctr .due{justify-self:start;font-family:'Sora';font-size:12.5px;font-weight:700;line-height:1.4;
 border-radius:14px;padding:8px 14px;background:#FCE9E8;color:#C62F34;border:1px solid #F6DAD9}
.ctr .due.soft{background:#F4F0EC;color:#6E635C;border-color:#E7E2DE}
.ctnote{margin-top:18px;font-size:12.8px;color:var(--l-muted);line-height:1.6}
.ctnote b{color:var(--l-ink);font-weight:600}
@media(max-width:860px){
 .ctcal .hd{display:none}
 .ctr{grid-template-columns:1fr;gap:9px;padding:20px}
}

/* ---------- what changed recently ---------- */
.ctchg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.ctc{border:1px solid var(--line2);border-radius:16px;padding:24px 22px;
 background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.ctc .dt{font-family:'Sora';font-size:10.5px;font-weight:700;letter-spacing:.14em;
 text-transform:uppercase;color:#FF8A6B}
.ctc h5{font-family:'Sora';font-size:16.5px;font-weight:600;margin:11px 0 9px;line-height:1.35}
.ctc p{font-size:13.7px;color:var(--muted);line-height:1.6}
.ctstamp{margin-top:26px;font-size:12.5px;color:#8A7F78;line-height:1.6}
@media(max-width:900px){.ctchg{grid-template-columns:1fr}}

/* ---------- the rest of the region ---------- */
.ctgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:14px;margin-top:32px}
.ctm{display:block;border:1px solid var(--line2);border-radius:14px;padding:18px 18px 20px;
 background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));transition:.2s}
.ctm:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.26)}
.ctm .fl{font-size:21px;line-height:1}
.ctm b{display:block;font-family:'Sora';font-size:15.5px;font-weight:600;color:var(--ink);margin:11px 0 6px}
.ctm p{font-size:12.8px;color:var(--muted);line-height:1.5}

/* the hero centres its text; the product screen inside it must not inherit that */
.herofig .snip{text-align:left}
.herofig .snip .rt b,.herofig .snip .rt span{text-align:left}

/* ---------- local price line ---------- */
.ctprice{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:32px}
.ctprice .big{font-family:'Sora';font-weight:800;font-size:clamp(34px,4.6vw,52px);color:var(--l-ink);
 letter-spacing:-.02em;line-height:1}
.ctprice .un{font-size:14.5px;color:var(--l-muted);max-width:46ch;line-height:1.55}

/* the market's rate card, both tiers side by side */
.ptiers{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.ptier{border:1px solid var(--l-line);border-radius:18px;background:var(--l-card);padding:26px 24px}
.ptier h4{font-family:'Sora';font-size:18px;font-weight:700;color:var(--l-ink);display:flex;
 align-items:center;gap:10px;margin-bottom:16px}
.ptier h4 i{width:11px;height:11px;border-radius:3px;background:var(--t,#E43A3F);font-style:normal}
.prows{border-top:1px solid var(--l-line)}
.prow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;
 border-bottom:1px solid var(--l-line);font-size:14.2px;color:#5F5850}
.prow b{font-family:'Sora';font-size:15px;font-weight:700;color:var(--l-ink);white-space:nowrap}
.prow.suite{background:linear-gradient(90deg,rgba(228,58,63,.06),transparent);margin:0 -12px;
 padding:13px 12px;border-bottom:0}
.prow.suite span{font-weight:600;color:var(--l-ink)}
.pnote{font-size:12.8px;color:var(--l-muted);line-height:1.6;margin-top:14px}
@media(max-width:820px){.ptiers{grid-template-columns:1fr}}