/* ==========================================================================
   WAO Casinos — shared stylesheet
   Every token below is derived from waofestival.org's own artwork:
     · deep teal / panel teal ....... 2023 masthead + 2020 background
     · rust + taupe ................. 2023 capture accent pair
     · olive ........................ diamond lattice of the 2020 background
     · reserved CTA magenta ......... 2019 hero's violet-magenta (hue 297-310)
     · Poppins + Libre Baskerville .. the capture's own Google Fonts call
   ========================================================================== */

@font-face{font-family:Poppins;src:url(../fonts/Poppins-Regular.ttf)format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/Poppins-Medium.ttf)format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/Poppins-SemiBold.ttf)format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(../fonts/Poppins-Bold.ttf)format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Libre Baskerville';src:url(../fonts/LibreBaskerville.ttf)format('truetype');font-weight:400 700;font-display:swap}

:root{
  --ink:#1b3333;          /* page ground            */
  --ink-2:#213e3e;        /* raised panel           */
  --ink-3:#2b4f4c;        /* hairline on dark       */
  --paper:#f5f2ec;        /* card surface (warm)    */
  --paper-2:#ebe5d8;      /* card surface, sunken   */
  --paper-line:#dcd4c3;   /* hairline on paper      */
  --text:#132726;         /* body on paper          */
  --text-soft:#5a6462;
  --rust:#934112;         /* ACCENT: bonuses, ranks, ribbons */
  --rust-deep:#7a350e;
  --gold:#8b755d;         /* ornament + meta        */
  --olive:#3b4633;        /* lattice diamonds       */
  --cta:#bd22a3;          /* RESERVED — buttons only, nowhere else */
  --cta-hover:#a11d8b;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:#e8e4da;
  font:400 16px/1.65 'Libre Baskerville',Georgia,serif;
}
h1,h2,h3,h4,.ui{font-family:Poppins,system-ui,sans-serif}
a{color:inherit}
img{max-width:100%;height:auto}

/* --- the wrap NEVER carries its own padding shorthand: gutters live here
       only, so a collision class can't clobber the mobile inset ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}

/* visually hidden but read by assistive tech */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================ ORNAMENTS ==================================
   Diamond lattice + labyrinth meander, both reproduced from the 2020
   background art. Authored clean so they stay crisp and recolourable.     */

.lattice{position:relative;isolation:isolate}
.lattice::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 0 72 36 36 72 0 36Z' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.2'/%3E%3Cpath d='M36 27 45 36 36 45 27 36Z' fill='%233b4633' fill-opacity='.5'/%3E%3C/svg%3E");
  background-size:72px 72px;
}

/* vertical labyrinth band — the 2020 background's border motif */
.meander{
  --meander-w:34px;
  width:var(--meander-w);flex:0 0 var(--meander-w);color:var(--gold);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='250' viewBox='0 0 100 250'%3E%3Cg fill='none' stroke='%238b755d' stroke-width='7'%3E%3Cpath d='M14 4v58'/%3E%3Cpath d='M42 8h44v34H60V24'/%3E%3Cpath d='M14 82v62h44V98'/%3E%3Cpath d='M86 62v82'/%3E%3Cpath d='M14 164h44v30H32'/%3E%3Cpath d='M86 160v86H44'/%3E%3Cpath d='M62 208h20v22H62z'/%3E%3Cpath d='M14 212v34'/%3E%3C/g%3E%3C/svg%3E");
  background-size:var(--meander-w) auto;background-repeat:repeat-y;
  opacity:.55;
}

/* ornaments are painted as masks so one file recolours anywhere via currentColor */
.m{display:inline-block;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.m--core{-webkit-mask-image:url(../brand/motif-core.svg);mask-image:url(../brand/motif-core.svg)}
/* filled variant: the open motif leaves a hole that swallows the rank digit */
.m--core-solid{-webkit-mask-image:url(../brand/motif-core-solid.svg);mask-image:url(../brand/motif-core-solid.svg)}
.m--arm{-webkit-mask-image:url(../brand/motif-arm.svg);mask-image:url(../brand/motif-arm.svg)}
.m--mandala{-webkit-mask-image:url(../brand/motif-mandala.svg);mask-image:url(../brand/motif-mandala.svg)}
.m--mark{-webkit-mask-image:url(../brand/mark-o.svg);mask-image:url(../brand/mark-o.svg)}

.ornament{display:block;margin-inline:auto;color:var(--gold)}
.ornament .m{width:100%;aspect-ratio:1;display:block}

/* a divider built from the mandala's chevron arm */
.rule{display:flex;align-items:center;gap:16px;margin:44px 0;color:var(--gold)}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.rule .ornament{width:26px;flex:0 0 26px}

/* ============================== MASTHEAD ================================ */
.masthead{background:var(--ink);border-bottom:1px solid var(--ink-3)}
.masthead .bar{display:flex;align-items:center;gap:22px;min-height:78px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img,.brand svg{height:58px;width:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{
  font:500 13.5px/1 Poppins,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:#cfc9bb;
}
.nav a:hover{color:#fff}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--ink-3);
  color:#e8e4da;width:46px;height:42px;cursor:pointer}
.burger span{display:block;height:2px;background:currentColor;margin:5px auto;width:22px}

/* ================================ HERO ==================================
   Compact on BOTH breakpoints so the toplist clears the fold either way.  */
.hero{padding-block:34px 22px}   /* NEVER the padding shorthand: this element is
                                    also .wrap, whose padding-inline is the mobile gutter */
.hero h1{
  font-weight:700;font-size:clamp(27px,4.1vw,45px);line-height:1.1;margin:0 0 12px;
  letter-spacing:-.015em;color:#fff;
}
.hero .lede{margin:0 0 16px;font-size:17px;color:#cdc7ba;max-width:60ch}

/* byline — structured, never a compressed dot-run */
.byline{display:flex;align-items:center;gap:14px;border-block:1px solid var(--ink-3);padding:11px 0}
.byline .who,.byline .role{overflow-wrap:anywhere}
.byline > div:not(.meta){min-width:0;flex:1 1 auto}
.byline img{width:44px;height:44px;border-radius:50%;flex:0 0 44px;object-fit:cover}
.byline .who{font:600 14px/1.3 Poppins,sans-serif;color:#fff}
.byline .who a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold)}
.byline .role{font:400 12.5px/1.4 Poppins,sans-serif;color:var(--gold)}
.byline .meta{margin-left:auto;display:flex;gap:0;font:500 11.5px/1 Poppins,sans-serif;color:#a9a396}
.byline .meta span{padding:0 13px;border-left:1px solid var(--ink-3)}
.byline .meta span:first-child{border-left:0}

/* ============================ TOPLIST ROWS ==============================
   One ranked pick = a ROW of side-by-side cards. Four panels, each its own
   surface, so every figure has a home and nothing competes with the bonus. */
.picks{display:grid;gap:14px;margin:0;padding:0;list-style:none}

.pick{position:relative;display:grid;gap:8px;
  grid-template-columns:minmax(0,3.3fr) minmax(0,2.65fr) minmax(0,2.05fr) minmax(0,1.95fr);}
/* rows carrying an edge ribbon need headroom so it never sits over the rank */
.pick:has(.ribbon){margin-top:13px}
.pick > .panel{
  background:var(--paper);border:1px solid var(--paper-line);color:var(--text);
  padding:18px 16px;display:flex;flex-direction:column;justify-content:center;min-width:0;
}
/* the bonus tile carries NO padding of its own: it is handed to .bonuslink so the entire
   surface of the tile is a click target rather than just the text inside it */
.pick .panel--bonus{background:var(--paper-2);border-color:#d3c9b2;align-items:flex-start;padding:0}
.pick .panel--act{align-items:stretch;justify-content:center}

/* rank — the mandala's centre teardrop. IN FLOW as the row's first element, so the position
   number reads as part of the ranking rather than a sticker pinned to the corner. */
.rank{position:relative;flex:0 0 38px;width:38px;height:47px;
  display:grid;place-items:center;color:var(--rust)}
.rank .m{position:absolute;inset:0;width:100%;height:100%}
.rank b{position:relative;font:700 16px/1 Poppins,sans-serif;color:#fff;padding-top:6px}
/* two digits need to breathe inside the same teardrop */
.rank b.two{font-size:14px;letter-spacing:-.03em}

/* edge label, top-left, above the row it belongs to */
.ribbon{position:absolute;top:-13px;left:0;z-index:2;display:flex;align-items:center;gap:6px;
  background:var(--rust);color:#fff;padding:4px 11px;
  font:600 10.5px/1 Poppins,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.ribbon .m{width:11px;height:12px;flex:0 0 11px}

.brandcell{display:flex;align-items:center;gap:13px;min-width:0}
.bmeta{min-width:0}
/* white chip is the default; .chip--dark only for light/white brand art */
.chip{flex:0 0 96px;height:56px;background:#fff;border:1px solid var(--paper-line);
  display:grid;place-items:center;padding:7px}
.chip--dark{background:#22201d;border-color:#3a3631}
.chip img{max-height:100%;max-width:100%;object-fit:contain}
/* the toplist logo is a click target on the same destination as the row's CTA */
.chip--link{cursor:pointer;text-decoration:none;
  transition:border-color .14s ease,box-shadow .14s ease}
.chip--link:hover{border-color:var(--rust);box-shadow:0 0 0 2px rgba(147,65,18,.15)}
.bname{font:600 17px/1.25 Poppins,sans-serif;margin:0 0 3px;min-width:0}
.stars{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  font:600 12.5px/1.25 Poppins,sans-serif;color:var(--text-soft)}
.stars b{font-weight:700;color:var(--text)}
.stars em{font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-soft);flex:1 0 100%}
.stars i{color:var(--rust);font-style:normal;letter-spacing:1.5px}

/* the bonus is the eye-catcher: rust, heading-scale, never black */
/* the whole bonus stack is one anchor, so its parts are blocked out here rather than in markup */
/* grows to fill the tile (so the whole surface is clickable) and re-centres its own content,
   which the tile used to do via justify-content */
.bonuslink{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;
  width:100%;padding:18px 16px;color:inherit;text-decoration:none;cursor:pointer}
.bonuslink:hover .bfig,.bonuslink:hover .bsub{text-decoration:underline;
  text-decoration-color:var(--rust);text-decoration-thickness:2px;text-underline-offset:3px}
.blabel,.bfig,.bsub,.bcode{display:block}
.blabel{font:600 10.5px/1 Poppins,sans-serif;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px}
.bfig{font:700 clamp(23px,2.1vw,31px)/1.05 Poppins,sans-serif;color:var(--rust);
  letter-spacing:-.02em;margin:0 0 5px}
.bsub{font:500 13.5px/1.35 Poppins,sans-serif;color:var(--text)}
.bcode{font:500 12.5px/1.4 Poppins,sans-serif;color:var(--text-soft);margin-top:6px}
.bcode b{color:var(--text);font-weight:600;letter-spacing:.04em}

.facts{display:grid;gap:0;margin:0;font:500 13px/1.4 Poppins,sans-serif;width:100%}
.facts div{display:flex;justify-content:space-between;gap:10px;
  padding:6px 0;border-bottom:1px dotted var(--paper-line)}
.facts div:last-child{border-bottom:0}
.facts dt{color:var(--text-soft)}
.facts dd{margin:0;font-weight:600;text-align:right}

/* ======================= CTA — the one reserved colour ==================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  text-align:center;text-decoration:none;cursor:pointer;
  background:var(--cta);color:#fff;border:0;
  font:600 14.5px/1 Poppins,sans-serif;letter-spacing:.05em;text-transform:uppercase;
  padding:15px 20px;width:100%;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.22);
  transition:background .14s ease,transform .14s ease;
}
.btn:hover{background:var(--cta-hover)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.btn .arw{font-size:15px;line-height:1}
.btn--ghost{background:transparent;color:var(--cta);box-shadow:inset 0 0 0 2px var(--cta)}
.btn--ghost:hover{background:var(--cta);color:#fff}
.btn--onDark{box-shadow:inset 0 -3px 0 rgba(0,0,0,.3)}
.btn--sm{padding:11px 16px;font-size:13px}
.terms{margin:8px 0 0;text-align:center;font:500 11px/1.4 Poppins,sans-serif;color:var(--text-soft)}
.review{margin:7px 0 0;text-align:center;font:600 12.5px/1 Poppins,sans-serif}
.review a{color:var(--rust)}

/* ---- the hero's only CTA drives DOWN into the ranking ------------------- */
.tolist{display:inline-flex;align-items:center;gap:9px;margin-top:6px;
  font:600 13.5px/1 Poppins,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:5px}
.tolist:hover{border-color:#fff}

/* ============================== MOBILE ==================================
   Same content, same order, reflowed. Nothing hidden on either breakpoint. */
@media (max-width:860px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;left:0;right:0;top:100%;z-index:30;
    flex-direction:column;align-items:stretch;gap:0;background:var(--ink-2);
    border-bottom:1px solid var(--ink-3)}
  .nav.open a{padding:15px 20px;border-top:1px solid var(--ink-3)}
  .nav.open .btn{margin:14px 20px 18px;width:auto}
  .burger{display:block}
  .masthead .bar{min-height:66px}
  .brand img,.brand svg{height:46px}

  .pick{grid-template-columns:1fr;gap:0}
  .pick > .panel{border-bottom:0;align-items:center;padding:11px 15px}
  .pick > .panel:last-child{border-bottom:1px solid var(--paper-line)}
  /* rank, logo and name stay on ONE horizontal row: three stacked blocks per card made
     the entry ~520px tall and pushed every pick but the first below the fold */
  .brandcell{flex-wrap:nowrap;justify-content:flex-start;gap:11px;text-align:left;width:100%}
  .bmeta{flex:1 1 auto}
  .chip{flex:0 0 84px;width:84px;height:48px}
  .bname{font-size:16px;margin-bottom:1px}
  /* .pick > .panel above re-applies padding at this width, so the bonus tile has to be
     re-zeroed at equal specificity and the padding handed back to the anchor */
  .pick .panel--bonus{align-items:center;text-align:center;padding:0}
  .bonuslink{padding:11px 15px}
  .bfig{font-size:26px;margin-bottom:3px}
  .bsub,.bcode{font-size:12.5px}
  .bcode{margin-top:3px}
  /* facts become one horizontal strip instead of three stacked rows */
  .facts{grid-template-columns:repeat(3,1fr);gap:1px;max-width:none;width:100%;
    background:var(--paper-line)}
  .facts div{flex-direction:column;justify-content:flex-start;gap:2px;text-align:center;
    background:var(--paper);padding:8px 6px;border-bottom:0}
  .facts dt{font-size:10.5px;letter-spacing:.03em}
  .facts dd{text-align:center;font-size:14px}
  .btn{padding:13px 18px}
  .terms,.review{font-size:11px}
  .ribbon{left:50%;transform:translateX(-50%)}
  .pick:has(.ribbon){margin-top:15px}
  .picks{gap:11px}
}
@media (max-width:560px){
  /* the byline REFLOWS — the meta row wraps to its own line at full width.
     Nothing is hidden: desktop and mobile carry identical content. */
  .hero{padding-block:20px 14px}
  .hero h1{font-size:clamp(25px,6.4vw,32px);margin-bottom:9px}
  .hero .lede{margin-bottom:12px;font-size:15.5px}
  .byline{flex-wrap:wrap;gap:9px 13px;padding:9px 0}
  .byline img{width:38px;height:38px;flex:0 0 38px}
  .byline .meta{margin-left:0;flex:1 0 100%;flex-wrap:wrap;row-gap:4px;
    border-top:1px solid var(--ink-3);padding-top:7px;font-size:11px}
  .byline .meta span:first-child{padding-left:0}
  .byline .meta span{padding:0 9px}
  .tolist{margin-top:2px;font-size:12.5px}
}
@media (max-width:400px){
  .hero{padding-block:22px 16px}
  .hero .lede{font-size:15.5px}
}

/* ==========================================================================
   ARTICLE / PROSE  — added for the editorial body of the money page.
   The toplist above owns the commercial surface; everything below is a
   reading surface, so it sits on paper with serif body copy.
   ========================================================================== */

.article{background:var(--paper);color:var(--text);margin-top:34px;padding-block:6px 2px}
.article .wrap{max-width:820px}
.article > .wide{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}

.article h2{
  font-weight:700;font-size:clamp(22px,2.5vw,30px);line-height:1.22;
  letter-spacing:-.014em;color:#0f2120;margin:44px 0 14px;
}
.article h2:first-of-type{margin-top:30px}
.article h3{
  font-weight:600;font-size:clamp(17.5px,1.7vw,21px);line-height:1.3;
  color:#173230;margin:30px 0 10px;
}
.article h4{font-weight:600;font-size:16px;margin:22px 0 8px;color:#173230}
.article p{margin:0 0 15px}
.article a{color:var(--rust-deep);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px}
.article a:hover{color:var(--rust)}
.article strong{font-weight:700;color:#0f2120}

.article ul,.article ol{margin:0 0 16px;padding-left:22px}
.article li{margin:0 0 7px}
.article ol{counter-reset:step}
.article .steps{list-style:none;padding-left:0;counter-reset:step}
.article .steps li{counter-increment:step;position:relative;padding-left:42px;margin-bottom:13px}
.article .steps li::before{
  content:counter(step);position:absolute;left:0;top:1px;
  width:27px;height:27px;display:grid;place-items:center;
  background:var(--rust);color:#fff;font:700 13px/1 Poppins,sans-serif;
}

/* a pulled-out fact block: the measured-timings and tax notes sit in these */
.note{background:var(--paper-2);border-left:3px solid var(--gold);
  padding:16px 18px;margin:0 0 18px}
.note p:last-child{margin-bottom:0}
.note .nlabel{font:600 10.5px/1 Poppins,sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:8px}

/* comparison + timings tables — scroll inside their own box, never the page */
.tscroll{overflow-x:auto;margin:0 0 20px;border:1px solid var(--paper-line)}
table.cmp{border-collapse:collapse;width:100%;min-width:640px;
  font:500 13.5px/1.45 Poppins,sans-serif;background:#fff}
table.cmp caption{caption-side:bottom;padding:10px 12px;text-align:left;
  font:400 12px/1.5 'Libre Baskerville',serif;color:var(--text-soft)}
table.cmp th,table.cmp td{padding:10px 12px;text-align:left;
  border-bottom:1px solid var(--paper-line)}
table.cmp thead th{background:var(--ink);color:#fff;font-weight:600;
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;border-bottom:0}
table.cmp tbody tr:nth-child(even){background:var(--paper)}
table.cmp td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.cmp td.b{color:var(--rust-deep);font-weight:600;white-space:nowrap}

/* ============================ BRAND REVIEWS ==============================
   Detailed reviews for the featured picks, compact rows for the remainder.
   No card-grid: each review is a full-width band with a real heading.      */
.rev{border-top:2px solid var(--ink);padding:22px 0 8px}
.rev-head{display:flex;align-items:center;gap:15px;margin-bottom:14px}
.rev-head .chip{flex:0 0 88px;height:52px}
.rev-head h3{margin:0;flex:1 1 auto;min-width:0}
.rev-score{flex:0 0 auto;text-align:center;background:var(--ink);color:#fff;padding:8px 13px}
.rev-score b{display:block;font:700 19px/1 Poppins,sans-serif}
.rev-score span{font:500 10px/1 Poppins,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;opacity:.72;display:block;margin-top:4px}

.subscores{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:1px;background:var(--paper-line);margin:0 0 16px}
.subscores div{background:#fff;padding:10px 12px}
.subscores dt{font:500 11px/1.3 Poppins,sans-serif;color:var(--text-soft);
  letter-spacing:.05em;text-transform:uppercase}
.subscores dd{margin:4px 0 0;font:700 15px/1 Poppins,sans-serif;color:var(--rust-deep)}

.pc{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 4px}
.pc ul{list-style:none;padding-left:0;margin:0;font:500 13.5px/1.5 Poppins,sans-serif}
.pc li{padding-left:23px;position:relative;margin-bottom:6px}
.pc .pro li::before{content:"✅";position:absolute;left:0;font-size:12px}
.pc .con li::before{content:"❌";position:absolute;left:0;font-size:12px}
.pc h4{margin:0 0 9px;font:600 11.5px/1 Poppins,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-soft)}

/* compact rows for the non-featured operators */
.mini{border-top:1px solid var(--paper-line);padding:15px 0;display:flex;
  align-items:flex-start;gap:15px}
.mini .chip{flex:0 0 76px;height:46px}
.mini .mbody{flex:1 1 auto;min-width:0}
.mini h4{margin:0 0 5px;font-size:16px}
.mini p{margin:0;font-size:15px}
.mini .mscore{flex:0 0 auto;font:700 15px/1 Poppins,sans-serif;color:var(--rust-deep)}

/* ================================= FAQ =================================== */
.faq{margin:0 0 8px}
.faq details{border-bottom:1px solid var(--paper-line);padding:0}
.faq summary{cursor:pointer;padding:15px 34px 15px 0;position:relative;list-style:none;
  font:600 16px/1.4 Poppins,sans-serif;color:#0f2120}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:13px;
  font:400 22px/1 Poppins,sans-serif;color:var(--rust)}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{padding-bottom:6px}
.faq .fa{padding:0 0 16px}
.faq .fa p:last-child{margin-bottom:0}

/* ============================ CLOSING SHORTLIST ========================== */
.shortlist{display:grid;gap:1px;background:var(--paper-line);margin:0 0 22px}
.shortlist div{background:#fff;padding:15px 17px;display:flex;gap:14px;
  align-items:baseline;flex-wrap:wrap}
.shortlist dt{font:600 13.5px/1.4 Poppins,sans-serif;color:var(--text-soft);
  flex:0 0 210px;min-width:0}
.shortlist dd{margin:0;flex:1 1 220px;min-width:0;font-size:15px}
.shortlist dd b{color:var(--rust-deep)}

/* ================================ FOOTER ================================= */
.foot{background:var(--ink);color:#b3ada0;padding:40px 0 30px;
  font:400 14px/1.65 'Libre Baskerville',serif}
.foot .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px;margin-bottom:26px}
.foot h2,.foot h3{font:600 11.5px/1 Poppins,sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);margin:0 0 13px}
.foot ul{list-style:none;padding:0;margin:0;font:500 13.5px/1 Poppins,sans-serif}
.foot li{margin-bottom:10px}
.foot a{color:#cfc9bb;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot img.fmark{height:46px;width:auto;margin-bottom:14px;display:block}
.foot .disc{border-top:1px solid var(--ink-3);padding-top:20px;font-size:13px;color:#9a9488}
.foot .disc p{margin:0 0 9px}
.foot .rg{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.foot .age{border:2px solid var(--gold);color:var(--gold);width:38px;height:38px;
  display:grid;place-items:center;font:700 13px/1 Poppins,sans-serif;flex:0 0 38px;
  border-radius:50%}

/* ============================ ARTICLE MOBILE ============================= */
@media (max-width:860px){
  .pc{grid-template-columns:1fr;gap:13px}
  .foot .fgrid{grid-template-columns:1fr;gap:24px}
  .rev-head{flex-wrap:wrap;gap:12px}
  .rev-head h3{flex:1 1 100%;order:3}
  .shortlist dt{flex:1 1 100%}
}
@media (max-width:560px){
  .article h2{margin-top:34px}
  .subscores{grid-template-columns:1fr 1fr}
  .rev-head .chip{flex:0 0 74px;height:44px}
}