/* =========================================================================
   ph365 app - site chrome stylesheet
   Mobile-first Philippine gaming canvas (320-430px), centered on wide screens.
   Prefix: c2980e-  | Palette token prefix: --c2980e-*
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root{
  --c2980e-bg:        #2D2D2D;   /* deep charcoal base */
  --c2980e-bg2:       #006400;   /* dark green bed */
  --c2980e-surface:   #1f2a1f;   /* card on charcoal */
  --c2980e-surface2:  #243224;   /* lifted card */
  --c2980e-line:      #3a4a3a;   /* hairline */
  --c2980e-mint:      #66CDAA;   /* medium aquamarine accent */
  --c2980e-sage:      #8FBC8F;   /* dark sea green secondary */
  --c2980e-cream:     #F8F9FA;   /* light text */
  --c2980e-mute:      #c7d4c7;   /* muted light text */
  --c2980e-magenta:   #B03060;   /* maroon hot accent */

  --c2980e-radius-lg: 16px;
  --c2980e-radius-md: 12px;
  --c2980e-radius-sm: 9px;
  --c2980e-radius-pill: 999px;

  --c2980e-shadow-1: 0 2px 6px rgba(0,0,0,.35);
  --c2980e-shadow-2: 0 8px 22px rgba(0,0,0,.42);

  --c2980e-track-top: 56px;      /* fixed top bar height */
  --c2980e-track-bottom: 64px;   /* fixed bottom nav height */

  --c2980e-font-head: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --c2980e-font-body: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:
    radial-gradient(1100px 540px at 50% -8%, rgba(102,205,170,.10), transparent 60%),
    linear-gradient(180deg,#233023 0%, var(--c2980e-bg) 38%, var(--c2980e-bg) 100%);
  color:var(--c2980e-cream);
  font-family:var(--c2980e-font-body);
  font-size:16px;
  line-height:1.55;
  min-height:100%;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; border:0; }
a{ color:var(--c2980e-mint); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--c2980e-font-head); font-weight:700; line-height:1.22; margin:0 0 .5em; letter-spacing:.005em; }
h1{ font-size:1.55rem; }
h2{ font-size:1.2rem; }
h3{ font-size:1.02rem; }
p{ margin:0 0 .85em; }
:focus-visible{ outline:3px solid var(--c2980e-mint); outline-offset:2px; border-radius:6px; }

/* ---------- App canvas ---------- */
.c2980e-app{
  position:relative;
  width:100%;
  max-width:430px;
  margin:0 auto;
  background:linear-gradient(180deg,#243024 0%, var(--c2980e-bg) 18%, var(--c2980e-bg) 100%);
  box-shadow:var(--c2980e-shadow-2);
  min-height:100vh;
  padding-bottom:calc(var(--c2980e-track-bottom) + 18px);
}

/* ---------- Top bar ---------- */
.c2980e-topbar{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--c2980e-track-top);
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  background:linear-gradient(90deg, rgba(0,100,0,.92), rgba(45,45,45,.96));
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--c2980e-line);
}
.c2980e-brand{
  display:flex; align-items:center; gap:9px; min-width:0; flex:1 1 auto;
}
.c2980e-logo{
  width:34px; height:34px;
  border-radius:9px;
  object-fit:cover;
  background:#000;
  box-shadow:0 0 0 1px rgba(102,205,170,.5), 0 2px 6px rgba(0,0,0,.35);
  flex:0 0 auto;
}
.c2980e-brandname{
  font-family:var(--c2980e-font-head);
  font-weight:700;
  font-size:1.06rem;
  letter-spacing:.01em;
  color:var(--c2980e-cream);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.c2980e-brandname b{ color:var(--c2980e-mint); font-weight:700; }

.c2980e-topactions{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.c2980e-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:38px; padding:0 14px;
  border-radius:var(--c2980e-radius-pill);
  font-weight:700; font-size:.86rem;
  transition:transform .12s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.c2980e-btn:active{ transform:translateY(1px) scale(.99); }
.c2980e-btn-primary{
  background:linear-gradient(180deg,#79e0bd, var(--c2980e-mint));
  color:#06321f;
  box-shadow:0 3px 0 rgba(0,0,0,.25), 0 6px 14px rgba(102,205,170,.28);
}
.c2980e-btn-primary:hover{ text-decoration:none; filter:brightness(1.05); }
.c2980e-btn-secondary{
  background:transparent;
  color:var(--c2980e-cream);
  box-shadow:inset 0 0 0 1.5px var(--c2980e-sage);
}
.c2980e-btn-secondary:hover{ text-decoration:none; background:rgba(143,188,143,.14); }
.c2980e-iconbtn{
  width:38px; height:38px; min-width:38px; padding:0;
  border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(102,205,170,.12);
  box-shadow:inset 0 0 0 1px rgba(102,205,170,.35);
  color:var(--c2980e-cream);
}
.c2980e-iconbtn:hover{ background:rgba(102,205,170,.22); }
.c2980e-iconbtn svg{ width:20px; height:20px; display:block; }

/* ---------- Side drawer ---------- */
.c2980e-scrim{
  position:fixed; inset:0; background:rgba(8,12,8,.55);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s;
  z-index:80;
}
.c2980e-scrim.is-open{ opacity:1; visibility:visible; }
.c2980e-drawer{
  position:fixed; top:0; left:0; bottom:0;
  width:82%; max-width:320px;
  background:linear-gradient(180deg,#1d281d, #202b20);
  border-right:1px solid var(--c2980e-line);
  transform:translateX(-104%);
  transition:transform .26s cubic-bezier(.4,.0,.2,1);
  z-index:90;
  display:flex; flex-direction:column;
  box-shadow:6px 0 26px rgba(0,0,0,.5);
}
.c2980e-drawer.is-open{ transform:translateX(0); }
.c2980e-drawer-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--c2980e-line);
  background:rgba(0,100,0,.35);
}
.c2980e-drawer-head .c2980e-logo{ width:30px; height:30px; }
.c2980e-drawer-head span{ font-family:var(--c2980e-font-head); font-weight:700; color:var(--c2980e-cream); }
.c2980e-drawer-close{
  margin-left:auto; width:32px; height:32px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(143,188,143,.16); color:var(--c2980e-cream);
}
.c2980e-drawer-nav{ padding:10px 10px 24px; overflow-y:auto; }
.c2980e-drawer-nav a{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; margin:2px 0;
  border-radius:10px;
  color:var(--c2980e-cream);
  font-size:.95rem;
  transition:background .18s ease, color .18s ease;
}
.c2980e-drawer-nav a:hover{ text-decoration:none; background:rgba(102,205,170,.14); color:var(--c2980e-mint); }
.c2980e-drawer-nav a.is-active{ background:rgba(102,205,170,.18); color:var(--c2980e-mint); }
.c2980e-drawer-nav .c2980e-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--c2980e-sage); flex:0 0 auto;
}
.c2980e-drawer-cta{ padding:14px 16px; border-top:1px solid var(--c2980e-line); display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* ---------- Main / sections ---------- */
.c2980e-main{ padding:14px 12px 4px; }
.c2980e-section{ margin:18px 0 0; }
.c2980e-section > h2{ color:var(--c2980e-cream); }
.c2980e-section > h2 em{ font-style:normal; color:var(--c2980e-mint); }
.c2980e-lede{ color:var(--c2980e-mute); font-size:.95rem; }
.c2980e-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c2980e-sage); font-weight:700; margin-bottom:6px;
}
.c2980e-eyebrow::before{
  content:""; width:18px; height:2px; background:var(--c2980e-mint); border-radius:2px;
}

/* ---------- Hero carousel ---------- */
.c2980e-hero{ margin:14px 0 4px; border-radius:var(--c2980e-radius-lg); overflow:hidden; box-shadow:var(--c2980e-shadow-2); }
.c2980e-hero-track{
  display:flex; scroll-snap-type:x mandatory; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  border-radius:var(--c2980e-radius-lg);
}
.c2980e-hero-track::-webkit-scrollbar{ display:none; }
.c2980e-slide{
  flex:0 0 100%; scroll-snap-align:center; position:relative;
}
.c2980e-slide img{ width:100%; height:178px; object-fit:cover; }
.c2980e-slide-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:12px 14px 14px;
  background:linear-gradient(0deg, rgba(8,12,8,.85), rgba(8,12,8,0));
  display:flex; flex-direction:column; gap:6px;
}
.c2980e-slide-cap strong{ font-family:var(--c2980e-font-head); font-size:1.04rem; color:var(--c2980e-cream); }
.c2980e-slide-cap span{ font-size:.82rem; color:var(--c2980e-mute); }
.c2980e-hero-dots{ display:flex; gap:6px; justify-content:center; padding:8px 0 2px; }
.c2980e-hero-dots button{
  width:8px; height:8px; border-radius:50%;
  background:rgba(248,249,250,.28); transition:background .2s, width .2s;
}
.c2980e-hero-dots button.is-on{ background:var(--c2980e-mint); width:22px; border-radius:6px; }

/* ---------- Category strip ---------- */
.c2980e-catbar{
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px;
  margin:12px 0 4px;
}
.c2980e-cat{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 4px; border-radius:12px;
  background:rgba(143,188,143,.10);
  box-shadow:inset 0 0 0 1px var(--c2980e-line);
  color:var(--c2980e-cream); text-align:center;
}
.c2980e-cat .c2980e-cat-ico{
  width:30px; height:30px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(102,205,170,.18); color:var(--c2980e-mint);
}
.c2980e-cat .c2980e-cat-ico svg{ width:18px; height:18px; }
.c2980e-cat b{ font-size:.74rem; font-weight:700; }
.c2980e-cat small{ font-size:.64rem; color:var(--c2980e-sage); }

/* ---------- Category header ---------- */
.c2980e-cathead{
  display:flex; align-items:center; gap:10px;
  margin:18px 0 8px;
  padding-bottom:7px;
  border-bottom:1px solid var(--c2980e-line);
}
.c2980e-cathead .c2980e-ch-ico{
  width:28px; height:28px; border-radius:9px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, var(--c2980e-mint), #4fbe96);
  color:#06321f;
}
.c2980e-cathead .c2980e-ch-ico svg{ width:17px; height:17px; }
.c2980e-cathead h2{ margin:0; font-size:1.08rem; color:var(--c2980e-cream); }
.c2980e-cathead .c2980e-ch-count{
  margin-left:auto; font-size:.72rem; color:var(--c2980e-sage);
  background:rgba(143,188,143,.12); padding:3px 9px; border-radius:999px;
}

/* ---------- Game grid ---------- */
.c2980e-gamegrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
}
.c2980e-gamecard{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:7px 5px 8px; border-radius:12px;
  background:linear-gradient(180deg,var(--c2980e-surface2),var(--c2980e-surface));
  box-shadow:inset 0 0 0 1px var(--c2980e-line);
  text-align:center;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .2s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.c2980e-gamecard:hover{ text-decoration:none; transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 0 0 1px rgba(102,205,170,.55); }
.c2980e-gamecard:active{ transform:translateY(0) scale(.98); }
.c2980e-gamecard img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:9px;
  background:#000;
  box-shadow:0 2px 5px rgba(0,0,0,.45);
}
.c2980e-gamename{
  font-size:.7rem; line-height:1.18; color:var(--c2980e-cream);
  font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:1.5em;
}
.c2980e-gametag{
  font-size:.6rem; color:#06321f; font-weight:800; letter-spacing:.04em;
  background:var(--c2980e-mint); padding:1px 6px; border-radius:999px;
}

/* Slightly larger grid on >=375px for 5th column breathing room */
@media (min-width:375px){
  .c2980e-gamegrid{ gap:9px; }
  .c2980e-gamename{ font-size:.73rem; }
}

/* ---------- Generic module panels ---------- */
.c2980e-panel{
  background:linear-gradient(180deg,var(--c2980e-surface2),var(--c2980e-surface));
  border:1px solid var(--c2980e-line);
  border-radius:var(--c2980e-radius-md);
  padding:14px;
  box-shadow:var(--c2980e-shadow-1);
}
.c2980e-panel + .c2980e-panel{ margin-top:10px; }
.c2980e-panel h3{ color:var(--c2980e-mint); margin-bottom:.45em; }
.c2980e-panel p{ color:var(--c2980e-mute); font-size:.92rem; }
.c2980e-panel a{ color:var(--c2980e-mint); }

/* Highlights: dense 2-col tile grid */
.c2980e-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.c2980e-tile{
  padding:11px; border-radius:11px;
  background:rgba(143,188,143,.08);
  border:1px solid var(--c2980e-line);
}
.c2980e-tile h3{ margin:0 0 .3em; font-size:.92rem; color:var(--c2980e-cream); }
.c2980e-tile h3 .c2980e-tico{ color:var(--c2980e-mint); margin-right:5px; }
.c2980e-tile p{ margin:0; font-size:.78rem; color:var(--c2980e-mute); line-height:1.45; }

/* Promo strip */
.c2980e-promostrip{
  display:grid; grid-template-columns:1fr; gap:9px;
}
.c2980e-promo{
  display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:12px;
  background:linear-gradient(90deg, rgba(176,48,96,.20), rgba(176,48,96,.04));
  border:1px solid rgba(176,48,96,.45);
}
.c2980e-promo .c2980e-pr-ico{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#cf6f9c,var(--c2980e-magenta)); color:#fff;
}
.c2980e-promo .c2980e-pr-ico svg{ width:20px; height:20px; }
.c2980e-promo .c2980e-pr-txt{ min-width:0; flex:1 1 auto; }
.c2980e-promo .c2980e-pr-txt b{ display:block; color:var(--c2980e-cream); font-size:.92rem; }
.c2980e-promo .c2980e-pr-txt span{ display:block; color:var(--c2980e-mute); font-size:.78rem; }
.c2980e-promo .c2980e-btn{ padding:0 12px; min-height:34px; font-size:.8rem; }

/* Feature list */
.c2980e-feats{ display:grid; gap:9px; }
.c2980e-feat{
  display:flex; gap:11px; padding:11px; border-radius:11px;
  background:rgba(102,205,170,.07);
  border:1px solid var(--c2980e-line);
}
.c2980e-feat .c2980e-f-ico{
  width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(102,205,170,.18); color:var(--c2980e-mint);
}
.c2980e-feat .c2980e-f-ico svg{ width:18px; height:18px; }
.c2980e-feat b{ display:block; color:var(--c2980e-cream); font-size:.92rem; }
.c2980e-feat span{ display:block; color:var(--c2980e-mute); font-size:.8rem; }

/* Steps */
.c2980e-steps{ counter-reset:step; display:grid; gap:8px; }
.c2980e-step{
  position:relative; padding:11px 12px 11px 44px;
  border-radius:11px; background:rgba(143,188,143,.07);
  border:1px solid var(--c2980e-line);
}
.c2980e-step::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--c2980e-mint),#4fbe96);
  color:#06321f; font-weight:800; font-size:.82rem;
}
.c2980e-step b{ display:block; color:var(--c2980e-cream); font-size:.9rem; }
.c2980e-step span{ display:block; color:var(--c2980e-mute); font-size:.8rem; }

/* Takeaways */
.c2980e-takeaways{
  display:grid; gap:8px;
  padding:13px; border-radius:12px;
  background:linear-gradient(180deg, rgba(0,100,0,.35), rgba(0,100,0,.12));
  border:1px solid rgba(102,205,170,.4);
}
.c2980e-takeaways li{
  position:relative; padding-left:24px; color:var(--c2980e-cream); font-size:.88rem;
  margin-bottom:5px;
}
.c2980e-takeaways li::before{
  content:""; position:absolute; left:4px; top:8px;
  width:10px; height:10px; border-radius:3px;
  background:var(--c2980e-mint); transform:rotate(45deg);
}

/* ---------- Inline internal-link chips inside body ---------- */
.c2980e-body a{ color:var(--c2980e-mint); text-decoration:underline; text-underline-offset:2px; }
.c2980e-body p{ color:var(--c2980e-mute); font-size:.92rem; }
.c2980e-body{ color:var(--c2980e-mute); }

/* ---------- Extended footer ---------- */
.c2980e-extended{ margin-top:22px; border-top:1px solid var(--c2980e-line); padding-top:16px; }
.c2980e-ext-brand{
  display:flex; gap:11px; align-items:center;
  padding:12px; border-radius:12px;
  background:rgba(102,205,170,.07);
  border:1px solid var(--c2980e-line);
  margin-bottom:12px;
}
.c2980e-ext-brand img{ width:44px; height:44px; border-radius:11px; flex:0 0 auto; background:#000; box-shadow:0 0 0 1px rgba(102,205,170,.5); }
.c2980e-ext-brand p{ margin:0; font-size:.82rem; color:var(--c2980e-mute); }
.c2980e-ext-brand b{ color:var(--c2980e-cream); font-family:var(--c2980e-font-head); }

.c2980e-ext-title{
  font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--c2980e-sage); font-weight:800; margin:14px 0 8px;
}
.c2980e-shortcuts{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.c2980e-shortcut{
  display:flex; align-items:center; gap:9px;
  padding:10px; border-radius:11px;
  background:linear-gradient(180deg,var(--c2980e-surface2),var(--c2980e-surface));
  border:1px solid var(--c2980e-line);
  color:var(--c2980e-cream);
  min-height:44px;
}
.c2980e-shortcut:hover{ text-decoration:none; border-color:rgba(102,205,170,.55); }
.c2980e-shortcut .c2980e-sc-ico{
  width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(102,205,170,.18); color:var(--c2980e-mint);
}
.c2980e-shortcut .c2980e-sc-ico svg{ width:17px; height:17px; }
.c2980e-shortcut span{ font-size:.8rem; font-weight:700; }
.c2980e-shortcut small{ display:block; font-size:.66rem; color:var(--c2980e-sage); font-weight:500; }

.c2980e-disclaim{
  margin-top:14px; padding:11px 12px; border-radius:10px;
  background:rgba(176,48,96,.10);
  border:1px dashed rgba(176,48,96,.5);
  font-size:.74rem; color:var(--c2980e-mute); line-height:1.5;
}
.c2980e-disclaim b{ color:var(--c2980e-magenta); }

/* ---------- Footer ---------- */
.c2980e-footer{
  margin-top:18px;
  padding:14px 12px calc(var(--c2980e-track-bottom) + 16px);
  text-align:center;
  border-top:1px solid var(--c2980e-line);
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.4));
}
.c2980e-footer .c2980e-foot-brand{ font-family:var(--c2980e-font-head); color:var(--c2980e-mint); font-weight:700; }
.c2980e-footer small{ display:block; color:var(--c2980e-mute); font-size:.74rem; margin-top:4px; }

/* ---------- Bottom nav ---------- */
.c2980e-bottomnav{
  position:fixed;
  left:50%; transform:translateX(-50%);
  bottom:0;
  width:100%; max-width:430px;
  height:var(--c2980e-track-bottom);
  display:grid; grid-template-columns:repeat(5,1fr);
  background:linear-gradient(180deg, rgba(33,42,33,.97), rgba(20,28,20,.99));
  border-top:1px solid var(--c2980e-line);
  box-shadow:0 -6px 18px rgba(0,0,0,.4);
  z-index:60;
}
.c2980e-navitem{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  color:var(--c2980e-mute);
  font-size:.62rem; font-weight:600;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
  min-height:44px;
}
.c2980e-navitem:hover{ text-decoration:none; color:var(--c2980e-cream); }
.c2980e-navitem .c2980e-nav-ico{
  width:30px; height:30px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(143,188,143,.10);
  color:var(--c2980e-sage);
  transition:background .2s, color .2s, transform .18s;
}
.c2980e-navitem .c2980e-nav-ico svg{ width:18px; height:18px; }
.c2980e-navitem span{ letter-spacing:.01em; }
.c2980e-navitem.is-active{ color:var(--c2980e-mint); }
.c2980e-navitem.is-active .c2980e-nav-ico{
  background:linear-gradient(180deg,#79e0bd,var(--c2980e-mint));
  color:#06321f;
  transform:translateY(-1px);
}
.c2980e-navitem.c2980e-nav-promo .c2980e-nav-ico{
  background:linear-gradient(180deg,#cf6f9c,var(--c2980e-magenta));
  color:#fff;
}
.c2980e-navitem.c2980e-nav-promo{ color:#f0b6cb; }
.c2980e-navitem:active .c2980e-nav-ico{ transform:scale(.92); }

/* ---------- Utility ---------- */
.c2980e-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;
}
.c2980e-hide{ display:none !important; }

/* ---------- Wide screen framing ---------- */
@media (min-width:480px){
  body{ background:#151a15; }
  .c2980e-app{ margin-top:0; border-left:1px solid var(--c2980e-line); border-right:1px solid var(--c2980e-line); }
}

/* ---------- Help and feature page modules ---------- */
.c2980e-section-kicker{ margin:18px 0 5px; color:var(--c2980e-mint); font-size:.7rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.c2980e-feature-hero{ margin:16px 0 20px; border:1px solid var(--c2980e-line); border-radius:var(--c2980e-radius-lg); overflow:hidden; background:var(--c2980e-surface); box-shadow:var(--c2980e-shadow-2); }
.c2980e-feature-hero img{ width:100%; height:178px; object-fit:cover; }
.c2980e-feature-hero figcaption{ padding:10px 12px; color:var(--c2980e-mute); font-size:.8rem; }
.c2980e-feature-rail{ display:grid; gap:10px; }
.c2980e-feature-card{ padding:14px; border:1px solid var(--c2980e-line); border-radius:var(--c2980e-radius-md); background:linear-gradient(145deg,rgba(102,205,170,.12),var(--c2980e-surface)); }
.c2980e-feature-card h3{ margin:.35em 0 .35em; color:var(--c2980e-cream); }
.c2980e-feature-card p,.c2980e-feature-row p{ color:var(--c2980e-mute); font-size:.88rem; }
.c2980e-feature-card a{ display:inline-block; margin-top:4px; font-size:.82rem; font-weight:700; }
.c2980e-feature-number,.c2980e-feature-symbol{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:var(--c2980e-mint); color:#06321f; font-weight:800; font-size:.78rem; }
.c2980e-compare{ overflow:hidden; border:1px solid var(--c2980e-line); border-radius:var(--c2980e-radius-md); }
.c2980e-compare-row{ display:grid; grid-template-columns:1fr 1.2fr 1.2fr; gap:8px; padding:10px 9px; border-top:1px solid var(--c2980e-line); color:var(--c2980e-mute); font-size:.72rem; }
.c2980e-compare-row:first-child{ border-top:0; }
.c2980e-compare-row b{ color:var(--c2980e-cream); font-size:.75rem; }
.c2980e-compare-head{ background:rgba(102,205,170,.13); color:var(--c2980e-sage); text-transform:uppercase; letter-spacing:.04em; }
.c2980e-compare-dot{ display:inline-block; width:6px; height:6px; margin:0 4px 2px 0; border-radius:50%; background:var(--c2980e-mint); }
.c2980e-note{ margin-top:10px; padding:11px 12px; border-left:3px solid var(--c2980e-mint); background:rgba(102,205,170,.08); color:var(--c2980e-mute); font-size:.84rem; }
.c2980e-feature-stack{ display:grid; gap:9px; }
.c2980e-feature-row{ display:flex; gap:11px; padding:12px; border:1px solid var(--c2980e-line); border-radius:var(--c2980e-radius-md); background:rgba(143,188,143,.07); }
.c2980e-feature-row h3{ margin:0 0 4px; color:var(--c2980e-cream); font-size:.98rem; }
.c2980e-feature-row p{ margin:0; }
.c2980e-feature-checklist{ display:grid; gap:8px; counter-reset:feature-check; }
.c2980e-feature-checklist li{ counter-increment:feature-check; position:relative; padding:11px 11px 11px 40px; border:1px solid var(--c2980e-line); border-radius:11px; background:var(--c2980e-surface); }
.c2980e-feature-checklist li::before{ content:counter(feature-check); position:absolute; left:10px; top:12px; width:21px; height:21px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--c2980e-magenta); color:#fff; font-size:.7rem; font-weight:800; }
.c2980e-feature-checklist b{ display:block; color:var(--c2980e-cream); font-size:.88rem; }
.c2980e-feature-checklist span{ display:block; color:var(--c2980e-mute); font-size:.8rem; }
.c2980e-action-band,.c2980e-help-footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding:13px; border-radius:var(--c2980e-radius-md); background:linear-gradient(100deg,rgba(176,48,96,.2),rgba(102,205,170,.1)); border:1px solid rgba(176,48,96,.45); }
.c2980e-action-band b,.c2980e-help-footer b{ display:block; color:var(--c2980e-cream); font-size:.88rem; }
.c2980e-action-band span,.c2980e-help-footer span{ display:block; color:var(--c2980e-mute); font-size:.76rem; }
.c2980e-safety-grid{ display:grid; gap:9px; }
.c2980e-safety-grid>div{ padding:12px; border-top:2px solid var(--c2980e-mint); background:rgba(143,188,143,.07); }
.c2980e-safety-grid h3{ color:var(--c2980e-cream); margin:0 0 4px; font-size:.94rem; }
.c2980e-safety-grid p{ color:var(--c2980e-mute); margin:0; font-size:.83rem; }
.c2980e-feature-links{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.c2980e-feature-links a{ padding:11px; border:1px solid var(--c2980e-line); border-radius:11px; background:var(--c2980e-surface); }
.c2980e-feature-links b,.c2980e-feature-links span{ display:block; }
.c2980e-feature-links b{ color:var(--c2980e-cream); font-size:.82rem; }
.c2980e-feature-links span{ color:var(--c2980e-sage); font-size:.7rem; margin-top:3px; }
.c2980e-help-hero{ display:flex; align-items:center; gap:12px; margin:15px 0 4px; padding:14px; border-radius:var(--c2980e-radius-lg); background:linear-gradient(110deg,rgba(102,205,170,.2),rgba(0,100,0,.3)); border:1px solid rgba(102,205,170,.45); }
.c2980e-help-mark{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--c2980e-mint); color:#06321f; font-size:1.5rem; font-weight:800; }
.c2980e-help-hero b{ color:var(--c2980e-cream); font-family:var(--c2980e-font-head); font-size:1.05rem; }
.c2980e-help-hero p{ margin:2px 0 0; color:var(--c2980e-mute); font-size:.8rem; }
.c2980e-faq-group{ margin-top:20px; }
.c2980e-faq-group-label{ color:var(--c2980e-sage); font-size:.68rem; font-weight:800; letter-spacing:.12em; }
.c2980e-faq-group h2{ margin:3px 0 9px; }
.c2980e-faq-item{ border:1px solid var(--c2980e-line); border-radius:11px; background:linear-gradient(145deg,var(--c2980e-surface2),var(--c2980e-surface)); overflow:hidden; }
.c2980e-faq-item + .c2980e-faq-item{ margin-top:8px; }
.c2980e-faq-item summary{ position:relative; padding:13px 38px 13px 13px; color:var(--c2980e-cream); font-weight:700; font-size:.9rem; cursor:pointer; list-style:none; }
.c2980e-faq-item summary::-webkit-details-marker{ display:none; }
.c2980e-faq-item summary::after{ content:"+"; position:absolute; right:13px; top:10px; color:var(--c2980e-mint); font-size:1.2rem; font-weight:400; }
.c2980e-faq-item[open] summary{ background:rgba(102,205,170,.1); }
.c2980e-faq-item[open] summary::after{ content:"−"; }
.c2980e-faq-answer{ padding:0 13px 13px; border-top:1px solid var(--c2980e-line); }
.c2980e-faq-answer p{ margin:11px 0 0; color:var(--c2980e-mute); font-size:.86rem; }
.c2980e-help-actions{ display:flex; gap:7px; flex:0 0 auto; }
.c2980e-help-actions .c2980e-btn{ min-height:34px; padding:0 10px; font-size:.75rem; }
@media (min-width:390px){ .c2980e-feature-rail{ grid-template-columns:repeat(3,1fr); } .c2980e-feature-card{ padding:12px; } .c2980e-safety-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:350px){ .c2980e-compare-row{ grid-template-columns:1fr 1fr; } .c2980e-compare-row span:last-child{ grid-column:2; } .c2980e-action-band,.c2980e-help-footer{ align-items:flex-start; flex-direction:column; } .c2980e-help-actions{ width:100%; } .c2980e-help-actions .c2980e-btn{ flex:1; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}