/* Hallmark · genre: editorial-utilitarian · macrostructure: shared shell + per-profile body · design-system: design.md · designed-as-app
 * profile: P2 · hero: shared · paper: #1a1408 · accent: #f59e0b
 * ink and muted computed from the brand hue, not the rotation
 */
*,*::before,*::after{box-sizing:border-box}
:root{--bg:#1a1408;--surf:#2a2011;--acc:#f59e0b;--accl:#f59e0b;--accd:#c47c06;--ink:#faf6ee;--muted:#bfae8c;
--r:4px;--gridmin:210px;--w:1180px;--gut:20px;
--line:rgba(255,255,255,.14)}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);
font-family:'Noto Sans Thai',system-ui,sans-serif;line-height:1.75;
/* clip, not hidden: hidden makes body a scroll container, which puts any sticky descendant
   at its mercy - and two components on P1 are sticky. clip contains the overflow without
   creating the container. */
overflow-x:clip}
h1,h2,h3,h4{font-family:'Kanit',system-ui,sans-serif;font-weight:600;line-height:1.35;
margin:0 0 .6em}
h1{font-size:clamp(1.5rem,4.4vw,2.4rem)}
h2{font-size:clamp(1.2rem,3vw,1.65rem);margin-top:0}
h3{font-size:clamp(1.02rem,2.2vw,1.2rem)}
p,ul,ol,table{margin:0 0 1.1em}
a{color:var(--accl)}
/* 12.2.10 one width per section: text, tables and grids share --w */
.shell{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
/* ---- age bar ---- */
.agegate{background:#000;color:#fff;font-size:.8rem;text-align:center;padding:.45rem 1rem}
/* ---- header ---- */
header{position:sticky;top:0;z-index:40;background:var(--surf);
border-bottom:1px solid rgba(255,255,255,.08)}
.topbar{display:flex;align-items:center;gap:1rem;min-height:60px}
.brandmark{font-family:'Kanit',sans-serif;font-weight:700;font-size:1.15rem;color:var(--accl);
text-decoration:none;white-space:nowrap}
/* header only: as a bare `nav` selector this also hit P1's footer columns, which are
   <nav class="gfcol">, and an auto inline-start margin makes a grid item shrink to content
   and sit flush-end instead of stretching - two footer columns 189px wide in a 335px
   single-column grid while their div siblings filled it. */
header nav{margin-inline-start:auto}
nav ul{list-style:none;display:flex;gap:.35rem;margin:0;padding:0;flex-wrap:wrap}
nav a{display:flex;align-items:center;min-height:44px;padding:0 .6rem;border-radius:var(--r);
color:var(--ink);text-decoration:none;font-size:.86rem}
nav a[aria-current=page]{background:var(--acc);color:var(--bg);font-weight:600}
.nav{display:none}
.act{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
padding:0 1.15rem;border-radius:var(--r);text-decoration:none;
font-family:'Kanit',system-ui,sans-serif;font-weight:600;font-size:15px;
border:1px solid transparent;white-space:nowrap;
transition:transform .12s ease,filter .12s ease}
.act:hover{text-decoration:none;filter:brightness(1.09);transform:translateY(-1px)}
.act-a{background:linear-gradient(170deg,var(--acc),var(--accd));color:#11151c}
.act-b{border-color:var(--acc);color:var(--accl)}
/* hero pair, as the core builds render it: gradient primary + GHOST secondary. The secondary
   reads as a dark button on a dark page because it is translucent over the page, not because it
   is painted a fixed dark; painting it fixed breaks on a light-accent brand. */
.act-key{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.03)}
.act-wide{font-size:17px;padding:15px 30px;min-height:52px}
/* login sits beside register in the header as one unit, so the flex bar treats the pair as a
   single item and the hamburger keeps its place. Both go to the same tracker: the operator
   serves login and registration from one entry point. */
.brandmark img{max-height:38px;width:auto;height:auto;display:block}
.joinpanel{text-align:center;border-radius:calc(var(--r) + 8px);padding:2.4rem 1.4rem;
background:radial-gradient(120% 150% at 50% 0%,rgba(255,255,255,.06) 0%,transparent 66%),var(--surf);
border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.joinpanel::before{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 140% at 50% 0%,var(--acc) 0%,transparent 62%);opacity:.20}
.joinpanel>*{position:relative}
.joinpanel h2{margin:0 0 .5em}
.joinpanel h2 .mark{color:var(--accl)}
.joinpanel p{margin:0 auto 1.4em;max-width:52ch;color:var(--muted)}
.joinpanel .act{border-radius:999px;box-shadow:0 0 26px -8px var(--acc)}
.spotbox{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.spotlight{background:var(--surf);border:1px solid rgba(255,255,255,.09);
border-radius:var(--r);padding:.9rem 1rem;border-inline-start:3px solid var(--acc)}
.spotlight:hover{border-color:var(--acc)}
.spotlight strong{display:block;font-family:'Kanit',system-ui,sans-serif;margin-bottom:.3rem}
.spotlight .seemore{display:inline-flex;align-items:center;min-height:44px;margin-top:.35rem;
color:var(--accl);text-decoration:none;font-size:.86rem}
.spotlight .seemore strong{font-weight:500}
.spotlight .seemore::after{content:'→';margin-inline-start:.35rem}
.spotlight .seemore:hover{text-decoration:underline}
.spotlight span{display:block;color:var(--muted);font-size:.9rem;margin-top:.25rem}
.offers{display:grid;gap:.7rem;margin-bottom:1.1em}
.offers img{width:100%;height:auto;border-radius:var(--r);display:block}
.topact{display:flex;gap:.45rem;align-items:center;flex:0 0 auto}
.act-key:hover{border-color:var(--acc)}
.topact .act{padding:0 .85rem;white-space:nowrap}
/* ---- hero: exactly two CTAs (12.2.1) ---- */
.banner{padding:2.6rem 0 2rem;text-align:center}
/* a spoke opens plainly: title, then one lede paragraph. No hero, no CTA pair, no marquee. */
.pagetop{padding:1.9rem 0 .5rem}
.pagetop h1{margin-bottom:.45em}
.pagetop .intro{margin:0}
.banner p{color:var(--muted);max-width:62ch;margin-inline:auto;}
.banneract{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;
justify-content:center;}
/* ---- sections ---- */
section.unit{padding:1.9rem 0;border-top:1px solid rgba(255,255,255,.07)}
.panel{background:var(--surf);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);
padding:1.05rem}
.cols{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(var(--gridmin),1fr))}
/* The showcase rows use FIXED column counts, not auto-fit. auto-fit sized cells to the viewport
   and left an orphan on its own line whenever the count did not divide: six studio marks rendered
   as five plus one, and six game tiles did the same. The roster is 6 and the tile slice is 6, so
   3 and 6 both divide cleanly at every breakpoint. */
.studiorow{display:grid;gap:.7rem;grid-template-columns:repeat(3,1fr)}
/* the studio row slides too, on its own slower cadence so the two rows do not lock step */
.studiobelt{overflow:hidden;margin-bottom:1rem}
.studiolane{display:flex;gap:.7rem;width:max-content;animation:slideleft 56s linear infinite}
.studiobelt:hover .studiolane,.studiobelt:focus-within .studiolane{animation-play-state:paused}
.studiolane .studio{flex:0 0 150px}
@media(min-width:700px){.studiolane .studio{flex:0 0 178px}}
@media(prefers-reduced-motion:reduce){
  .studiobelt{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .studiolane{animation:none}
}
/* A slider, not a wrapping grid: six tiles wrapped to 5+1 on a desktop and the orphan looked
   broken. Scroll-snap keeps the cards aligned as the reader swipes, and it degrades to a plain
   overflow scroll where scroll-snap is unsupported. */
/* Auto-slides leftward. The tile set is duplicated in the markup and the track travels exactly
   -50%, so the loop closes on itself with no jump. Hover pauses it so a reader can actually look
   at a card, and prefers-reduced-motion turns it back into a plain scrollable row -- an animation
   a reader cannot stop is an accessibility problem, not a feature. */
.gamebelt{overflow:hidden;padding-bottom:.6rem;margin-bottom:1.1em}
.gamelane{display:flex;gap:.85rem;width:max-content;animation:slideleft 42s linear infinite}
.gamebelt:hover .gamelane,.gamebelt:focus-within .gamelane{animation-play-state:paused}
.gamelane .panel-item{flex:0 0 168px}
@keyframes slideleft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(min-width:700px){.gamelane .panel-item{flex:0 0 196px}}
@media(prefers-reduced-motion:reduce){
  .gamebelt{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gamelane{animation:none}
}
@media(min-width:700px){
  .studiorow{grid-template-columns:repeat(6,1fr)}

}

/* A tile is its artwork. The art was rendered at its natural size inside an oversized card, so a
   240px poster floated in the middle of dead space with the caption stranded below it. The image
   now fills the tile width at the art's own 5:7 portrait ratio, and every tile is the same height. */
.panel-item{margin:0;background:var(--surf);border:1px solid rgba(255,255,255,.09);
border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.panel-item img{width:100%;height:auto;aspect-ratio:5/7;object-fit:cover;display:block}
.panel-item figcaption{padding:.55rem .6rem;font-size:.8rem;line-height:1.4;display:grid;gap:.1rem}
.panel-item .panelstudio{color:var(--ink);font-weight:600}
.panel-item .panelname{color:var(--accl)}
.panel-item .panelcat{color:var(--muted);font-size:.74rem}
.cols img{max-width:100%;height:auto;display:block;margin-inline:auto}
/* 12.2a.4 the plate is chosen per FILE from its own pixels, never fixed. The card is also
   sized to a wordmark's aspect ratio: studio marks run about 3.4:1, so max-width keeps a wide
   one inside its cell instead of overflowing or being scaled to nothing. */
.studio{border-radius:var(--r);padding:.5rem .7rem;display:flex;align-items:center;
justify-content:center;aspect-ratio:16/7;border:1px solid rgba(255,255,255,.09)}
.studio img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.shield-light{background:#f4f6fa}
.shield-dark{background:#10151f}
.studio img{max-height:42px;max-width:100%;width:auto;height:auto;object-fit:contain}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:start;padding:.55rem .6rem;border-bottom:1px solid rgba(255,255,255,.09)}
th{color:var(--accl);font-family:'Kanit',sans-serif;font-weight:600}
.panelwrap{overflow-x:auto}
details.qbox{border:1px solid rgba(255,255,255,.1);border-radius:var(--r);
padding:.7rem .9rem;margin-bottom:.55rem;background:var(--surf)}
details.qbox summary{cursor:pointer;font-family:'Kanit',sans-serif;font-weight:600;
min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
list-style:none}
/* the open affordance. Without it the row gave the reader no sign it could be expanded, and the
   space on the right sat empty. A bare accent-coloured glyph, no circle and no plate: the ring
   drawn around it first read as a button chip rather than a marker. Open swaps the plus for a
   true minus sign (U+2212); rotating a plus 45 degrees yields an x, which reads "close".
   aria is untouched: <details>/<summary> already announces expanded/collapsed natively. */
details.qbox summary::-webkit-details-marker{display:none}
details.qbox summary::after{content:'+';flex:0 0 auto;width:30px;height:30px;
display:grid;place-items:center;color:var(--accl);
font-size:1.4rem;line-height:1;font-weight:400;opacity:.95}
details.qbox[open] summary::after{content:'−'}
details.qbox summary:hover::after{opacity:1}
.fseq{list-style:none;counter-reset:fs;margin:.15rem 0 .55rem;padding:0;display:grid;gap:.4rem}
.fseq li{counter-increment:fs;position:relative;padding-inline-start:2rem;margin:0}
.fseq li::before{content:counter(fs) '.';position:absolute;inset-inline-start:0;
font-family:'Kanit',system-ui,sans-serif;font-weight:700;color:var(--accl)}
ol.howto{counter-reset:s;list-style:none;padding:0;display:grid;gap:.6rem}
ol.howto li{counter-increment:s;position:relative;padding-inline-start:2.4rem;
background:var(--surf);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);
padding-block:.75rem;padding-inline-end:1rem}
ol.howto li::before{content:counter(s);position:absolute;inset-inline-start:.7rem;top:.7rem;
width:1.4rem;height:1.4rem;border-radius:50%;background:var(--acc);color:var(--bg);
display:grid;place-items:center;font-size:.8rem;font-weight:700;font-family:'Kanit',sans-serif}
.pending{color:#ffb4b4;background:rgba(255,0,0,.09);border:1px dashed #ff8080;
border-radius:6px;padding:.1rem .4rem;font-size:.84rem}
/* ---- footer ---- */
footer{background:var(--surf);border-top:1px solid rgba(255,255,255,.1);
padding:2rem 0 5.2rem;font-size:.87rem;color:var(--muted)}
footer h4{color:var(--ink);font-size:.95rem;margin-bottom:.5rem}
footer a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;
min-height:36px}
footer a:hover{color:var(--accl)}
.footcols{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* ---- floating stack: same diameter, hidden keeps its space (12.2.14) ---- */
.float{position:fixed;right:14px;bottom:14px;z-index:50;display:flex;flex-direction:column;
gap:.6rem}
.float a,.float button{width:52px;height:52px;border-radius:50%;border:0;display:grid;
place-items:center;cursor:pointer;background:var(--surf);
border:1px solid var(--acc);color:var(--accl)}
.float .signup{display:none;background:linear-gradient(135deg,var(--acc),var(--accd));color:#11151c;
position:relative}
.float .signup::after{content:'';position:absolute;inset:-5px;border-radius:50%;
border:2px solid var(--acc);animation:pl 2.1s ease-out infinite}
@keyframes pl{0%{opacity:.75;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
/* Keep the fixed buttons off the footer's last block: that block is the 18+ responsible
   gambling paragraph, and it was rendering partly behind them on a phone. Sized for the
   tallest arrangement (two stacked 52px circles plus the offset). */
@media (max-width:760px){footer{padding-block-end:132px}}
#top{visibility:hidden}
#top.live{visibility:visible}
.float .signin{display:none;border:1px solid var(--acc);color:var(--accl);
background:var(--surf)}
@media (max-width:1000px){
  /* menu button below 1000px, inline row above (12.2.3) */
  .nav{display:block;margin-inline-start:auto}
  .nav>summary{list-style:none;width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--acc);border-radius:var(--r);color:var(--accl);cursor:pointer}
  .nav>summary::-webkit-details-marker{display:none}
  nav.wide{display:none}
  /* full-width sheet under the header, not a floating card. No backdrop-filter on the
     header: a filtered ancestor becomes the containing block for fixed children and
     collapses this to the header height. */
  .drawer{position:fixed;left:0;right:0;top:var(--hh,104px);bottom:0;background:var(--bg);
  overflow-y:auto;padding:.6rem var(--gut) 2rem}
  .drawer ul{flex-direction:column;gap:.2rem}
  .drawer a{width:100%;min-height:50px;border-bottom:1px solid rgba(255,255,255,.07);
  border-radius:0}
  /* Both header CTAs go below this width; the floating stack carries the conversion instead.
     An earlier version kept LOGIN here, on the grounds that hiding both left a subpage with no
     affordance at all - but that was written before the stack gained its own register button.
     Every one of these points at the same tracked URL, so nothing is unreachable: the stack's
     register button is the same destination the header pair had. */
  .headact{display:none}
  .float .signup{display:grid}
  /* 12.2.6 hero CTAs stack FULL WIDTH on a phone. Measured at 320-768 they were sitting
     side by side at 114px and 97px, which is the defect this rule names. */
  .banneract{flex-direction:column;align-items:stretch}
  .banneract .act{width:100%}
  /* 12.2.4 44px minimum tap target up to 1000px, because tablets are touch devices. Only
     inline links inside running prose are exempt, so the logo and the footer links are not:
     measured at 32px and 36px respectively. */
  .brandmark{min-height:44px;display:inline-flex;align-items:center}
  footer a{min-height:44px}
}
/* 12.2.3: state the CLOSED state outright rather than relying on the UA rule, and scope the
   desktop reveal to the DESKTOP nav only. Targeting every .drawer made the mobile panel
   display:flex at >=1001px, hidden only because its parent .nav is display:none. That is the
   fragile chain the SOP names: a reveal that is not scoped forces the mobile menu open. */
details.nav:not([open]) .drawer{display:none}
@media (min-width:1001px){ nav.wide{position:static;display:flex} }
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---- Group 2's footer, on the client's reference ----
   Identity block left with labelled contact pairs beneath it, three link columns right, and the
   copyright centred alone on the last line. P4's footer puts its channels in chips and its
   copyright beside the legal links; P1's makes contact a column and has no copyright - keeping the
   three apart is the point. */
.footbase{border-block-start:1px solid var(--line);margin-block-start:2.2rem;
padding-block:2.4rem 1.6rem}
.footspread{display:grid;gap:2rem clamp(1.6rem,4vw,3.4rem);
grid-template-columns:minmax(0,2.1fr) repeat(2,minmax(0,1fr));align-items:start}
.footident{min-width:0}
.foottitle{margin:0 0 .55rem;font-family:'Kanit',system-ui,sans-serif;font-weight:700;
font-size:1.05rem;color:var(--ink)}
.footintro{margin:0;color:var(--muted);font-size:.88rem;line-height:1.75;max-width:46ch}
/* the reference's Phone number / Email row: label above, value below, side by side */
.footfacts{display:flex;flex-wrap:wrap;gap:1.1rem 2.4rem;margin:1.4rem 0 0}
.footfacts div{min-width:0}
.footfacts dt{color:var(--muted);font-size:.78rem;letter-spacing:.02em;margin-block-end:.3rem}
.footfacts dd{margin:0;color:var(--ink);font-size:.9rem;font-variant-numeric:tabular-nums}
.footlist{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.footlist h4{margin:0 0 .7rem;font-family:'Kanit',system-ui,sans-serif;font-weight:600;
font-size:.8rem;letter-spacing:.06em;color:var(--muted);text-transform:none}
/* padding-inline:0 beats the shared `nav a{padding:0 .6rem}`, which was pushing the link TEXT
   9.6px right of the heading above it. No min-height here on purpose: the shared
   `footer a{min-height:44px}` is the tap-target floor and this column keeps it. */
.footlist a{color:var(--ink);font-size:.88rem;text-decoration:none;padding-inline:0;
display:flex;align-items:center;opacity:.86}
.footlist a:hover,.footlist a:focus-visible{opacity:1;color:var(--accl);text-decoration:underline}
.footnotice{margin:2.4rem 0 0;color:var(--muted);font-size:.8rem;line-height:1.7;opacity:.8}
/* alone on the last line and centred, as the reference has it */
.footrights{margin:1.4rem 0 0;padding-block-start:1.2rem;border-block-start:1px solid var(--line);
text-align:center;color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}
@media (max-width:900px){
 .footspread{grid-template-columns:repeat(2,minmax(0,1fr))}
 .footident{grid-column:1 / -1}
}
/* The floating pair is right:20px and 52px wide, so its left edge is vw-72, while the wrap right
   edge is min(vw-20,(vw+1180)/2). Those cross below 1312px, which put the pair on top of the legal
   line and the copyright everywhere from 761px up. Inline clearance moves the text out of the
   pair's column; the copyright is centred so its padding has to be symmetric. */
@media (max-width:1311px){
 .footnotice{padding-inline-end:5rem}
 .footrights{padding-inline:5rem}
}
@media (max-width:760px){
 /* And below 760 the pair is centred over the content, so only bottom clearance works. The shared
    rule is `footer{padding-block-end:132px}` at ELEMENT specificity and .footbase sets padding-block
    at CLASS specificity, so the shared rule loses - hence this one. */
 .footbase{padding-block-end:132px}
 .footnotice,.footrights{padding-inline:0}
}
@media (max-width:560px){
 .footspread{grid-template-columns:1fr;gap:1.6rem}
 .footfacts{gap:1rem 1.6rem}
 .footnotice{margin-block-start:1.8rem}
}

/* The reference's nav is plain text. The shared rule fills the current item with the accent, which
   made it louder than the register button beside it; accent type plus a hairline says the same
   thing quietly. Desktop row only - the drawer keeps its filled row, where a full-width block is
   the right tap target. */
header nav.wide a[aria-current=page]{background:none;color:var(--accl);
box-shadow:inset 0 -2px 0 var(--acc);border-radius:0}

/* ---- Group 2 header and hero, on the client's reference ----
   Nav centred between the logo and a single control; the fold is a rounded panel carrying the
   headline, the sub, one button and a row of the brand's own offer figures. */
header nav.wide{margin-inline:auto}
.bannerpanel{padding-block:1.2rem 2rem}
.bannerpanel>.shell{background:var(--surf);border:1px solid var(--line);
border-radius:calc(var(--r) * 1.7);padding:clamp(2rem,5vw,3.4rem) clamp(1rem,4vw,3rem)
clamp(1.6rem,3vw,2.4rem);text-align:center}
.bannerpanel h1{margin:0 auto;max-width:22ch}
.bannerpanel>.shell>p{color:var(--muted);max-width:62ch;margin-inline:auto}
.bannerpanel .banneract{justify-content:center;margin-top:1.8rem}
/* the figure row. Tabular numerals so three amounts of different widths still line up. */
.offerrow{list-style:none;margin:2.2rem auto 0;padding:0;display:flex;flex-wrap:wrap;
justify-content:center;gap:1.2rem clamp(1.4rem,5vw,3.4rem)}
.offerrow li{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.offerrow b{font-family:'Kanit',system-ui,sans-serif;font-weight:700;
font-size:clamp(1.25rem,4.4vw,1.85rem);line-height:1.15;color:var(--accl);
font-variant-numeric:tabular-nums}
.offerrow span{color:var(--muted);font-size:.85rem;line-height:1.4}
@media (max-width:560px){
 .offerrow{gap:1rem 1.6rem}
 .offerrow li{flex:1 1 40%}
}

/* Design B, ledger. The body is one bordered table and each section is a row: a tinted label cell
   carrying the heading, a body cell carrying the copy. Thai promo pages present เงื่อนไข this
   way. The vertical rule this replaces was a rhythm on identical markup; a table needs cells. */
.ldgr{padding:1.05rem 0}
/* a stack of boxes, one per section */
.ldgr .shell{display:grid;gap:.6rem}
section.lrow{padding:0;display:block;background:var(--surf);overflow:hidden;
border:1px solid rgba(255,255,255,.11);border-radius:var(--r)}
/* the heading band: the ledger's tinted label cell promoted from a column to a full-width strip.
   This is what keeps the profile distinct from P1, whose card has no tint and carries a thin
   accent rule on its top edge instead. */
.lcell{padding:.7rem 1rem;background:rgba(255,255,255,.045);
border-bottom:1px solid rgba(255,255,255,.11)}
.lcell>h2{margin:0;font-size:clamp(1.06rem,2.3vw,1.24rem);line-height:1.45;color:var(--accl);
text-wrap:balance}
.lbody{padding:.9rem 1rem}
.lbody>:last-child{margin-bottom:0}
.lbody p{font-size:.95rem}
.lbody ul{margin-block:.45rem 0;padding-inline-start:1.05rem}
.lbody li{margin-block:.26rem}
.lbody table{font-size:.88rem}
/* the offer comparison table. The name column is sticky so a reader who scrolls right does not
   lose which offer the row belongs to, and .panelwrap carries the horizontal overflow so the page body
   never scrolls sideways. */
.panelwrap{border:1px solid rgba(255,255,255,.12);border-radius:var(--r);background:var(--surf)}
table.otab{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem;
font-variant-numeric:tabular-nums}
/* no vertical rules: a table of prose does not need a full grid, and the columns are already
   separated by alignment. Zeroing them explicitly because a 1px light-grey side border was
   arriving from elsewhere in the cascade and drawing the grid back in. */
table.otab th,table.otab td{border-inline:0}
/* the header reads as a header: tinted, accent text, a firm rule beneath it */
table.otab thead th{background:rgba(255,255,255,.055);color:var(--accl);
font-family:'Kanit',sans-serif;font-weight:600;font-size:.83rem;
white-space:nowrap;padding:.72rem .85rem;text-align:start;
border-block-end:2px solid var(--acc);position:sticky;top:0;z-index:2}
table.otab td{padding:.8rem .85rem;text-align:start;vertical-align:top;line-height:1.58;
border-block-end:1px solid rgba(255,255,255,.07)}
/* zebra on the data cells only, so a row can be followed across four columns. The name column
   stays a flat surface because a sticky cell needs an opaque background or the text it overlaps
   shows through it. */
table.otab tbody tr:nth-child(even) td{background:rgba(255,255,255,.024)}
table.otab tbody tr:hover td{background:rgba(255,255,255,.05)}
table.otab tbody tr:last-child td,table.otab tbody tr:last-child th{border-block-end:0}
/* the offer name: its own column, with an accent bar that lights on hover */
th.oname{position:sticky;inset-inline-start:0;background:var(--surf);z-index:1;
min-width:11.5rem;padding:.8rem .85rem;text-align:start;vertical-align:top;
border-block-end:1px solid rgba(255,255,255,.07);
border-inline-start:3px solid transparent}
table.otab tbody tr:hover th.oname{border-inline-start-color:var(--acc)}
th.oname a{color:var(--ink);text-decoration:none;font-size:.95rem;line-height:1.45}
th.oname a:hover,th.oname a:focus-visible{color:var(--accl)}
/* the first data column is what a reader comparing five offers reads first, so it takes the
   bright ink and the rest steps back */
table.otab td:first-of-type{color:var(--ink)}
table.otab td:first-of-type+td,table.otab td:first-of-type+td+td{color:var(--muted)}
table.otab thead th:first-child{z-index:3;background:rgba(255,255,255,.055)}
@media(max-width:699px){
 table.otab{font-size:.86rem}
 th.oname{min-width:9.5rem}
}
/* No two-column split at any width. A 26% label column wrapped a one-line heading into four and
   left dead space beneath it, and the measure lesson from the first layout applies to the HEADING
   as well as the prose: give it the full width. */
@media(min-width:900px){
 .lcell{padding:.75rem 1.15rem}
 .lbody{padding:1rem 1.15rem}
}

/* P2 comparative table: filled spec sheet. The densest of the four - head as a tinted band, every
   cell ruled, rows zebra'd - which suits P2's panel vocabulary. */
table.paneltab{border-collapse:collapse;border:1px solid var(--line)}
table.paneltab thead th{background:rgba(255,255,255,.055);border:1px solid var(--line);
padding:.58rem .75rem;font-size:.8rem;letter-spacing:.02em}
table.paneltab td{border:1px solid var(--line);padding:.58rem .75rem}
table.paneltab tbody tr:nth-child(even) td{background:rgba(255,255,255,.022)}
table.paneltab td:first-child{font-weight:600;color:var(--ink)}
table.paneltab td+td{font-variant-numeric:tabular-nums;color:var(--muted)}