/*
Theme Name: EPIC
Theme URI: https://epiciptv.net
Author: Custom build
Description: Dual-audience theme for EPIC - viewers and resellers - built on a broadcast-gallery design system. Multiviewer hero, plan builder, reseller profit calculator and hardware store. WooCommerce ready. All tunable values live in inc/config.php.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: epic
Tags: ecommerce, custom-menu, featured-images, translation-ready
*/
/* ══════════════════════════════════════════════════════════════
   EPIC — broadcast gallery
   Palette, type and motion drawn from a TV control room:
   multiviewer wall, tally lights, instrument chrome.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ground */
  --vault:#050B14;        /* gallery dark */
  --deck:#0B1826;         /* raised surface */
  --deck-2:#10243A;       /* instrument face */
  --rail:rgba(124,156,190,.19);
  --rail-hi:rgba(124,156,190,.36);

  /* ink */
  --text:#E9F2FB;
  --dim:#9BB0C6;
  --faint:#6A8099;

  /* paths */
  --signal:#2E9DF7;       /* viewers */
  --signal-wash:rgba(46,157,247,.11);
  --ember:#FF8A3D;        /* resellers */
  --ember-wash:rgba(255,138,61,.11);
  --mint:#35E0A1;         /* money */
  --tally:#FF2D20;        /* on air — one dot, nowhere else */

  --ground:var(--vault);
  --card:var(--deck);

  /* radius by role, not one value everywhere */
  --r-inst:2px;           /* instruments: hard, technical */
  --r-panel:10px;         /* content panels */
  --r-pill:999px;

  --maxw:1240px;
  --read:66ch;

  --display:"Archivo","Helvetica Neue",sans-serif;
  --body:"Archivo",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: light){
  :root{
    --vault:#F6F9FC;--deck:#FFFFFF;--deck-2:#EDF3F9;
    --rail:rgba(9,28,48,.13);--rail-hi:rgba(9,28,48,.26);
    --text:#07182A;--dim:#47607A;--faint:#78909F;
    --signal:#0B72CE;--signal-wash:rgba(11,114,206,.08);
    --ember:#D55F15;--ember-wash:rgba(213,95,21,.09);
    --mint:#0D9B64;--tally:#D92316;
    --ground:var(--vault);--card:var(--deck);
  }
}
:root[data-theme="dark"]{
  --vault:#050B14;--deck:#0B1826;--deck-2:#10243A;
  --rail:rgba(124,156,190,.19);--rail-hi:rgba(124,156,190,.36);
  --text:#E9F2FB;--dim:#9BB0C6;--faint:#6A8099;
  --signal:#2E9DF7;--signal-wash:rgba(46,157,247,.11);
  --ember:#FF8A3D;--ember-wash:rgba(255,138,61,.11);
  --mint:#35E0A1;--tally:#FF2D20;
  --ground:var(--vault);--card:var(--deck);
}
:root[data-theme="light"]{
  --vault:#F6F9FC;--deck:#FFFFFF;--deck-2:#EDF3F9;
  --rail:rgba(9,28,48,.13);--rail-hi:rgba(9,28,48,.26);
  --text:#07182A;--dim:#47607A;--faint:#78909F;
  --signal:#0B72CE;--signal-wash:rgba(11,114,206,.08);
  --ember:#D55F15;--ember-wash:rgba(213,95,21,.09);
  --mint:#0D9B64;--tally:#D92316;
  --ground:var(--vault);--card:var(--deck);
}

/* ─── base ─────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:var(--body);font-size:16.5px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--display);font-stretch:118%;font-weight:700;
  margin:0;text-wrap:balance;letter-spacing:-.025em;line-height:1.08;
}
h1{font-size:clamp(2.6rem,6vw,4.6rem);font-stretch:125%;font-weight:800;letter-spacing:-.04em;line-height:1.0}
h2{font-size:clamp(1.8rem,3.4vw,2.75rem);letter-spacing:-.032em}
h3{font-size:1.1rem;font-stretch:110%;letter-spacing:-.018em;line-height:1.28}
h4{font-size:.95rem;font-stretch:110%}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto}

.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.035em;font-weight:600}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.lede{color:var(--dim);font-size:1.07rem;max-width:58ch;line-height:1.6}
section{padding:92px 0;border-top:1px solid var(--rail)}
section.flush{border-top:none}
section.tint{background:var(--deck)}

/* Path marker — says WHICH AUDIENCE a section addresses.
   Information, not an eyebrow label. */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:600;color:var(--signal);
  margin-bottom:16px;letter-spacing:0;text-transform:none;font-family:var(--body);
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:none;
}
.eyebrow.ember{color:var(--ember)}

::selection{background:var(--signal);color:#02101d}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ─── header ───────────────────────────────────────────── */
header.site{
  position:sticky;top:0;z-index:80;
  background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--rail);
}
.hdr{display:flex;align-items:center;gap:24px;height:70px;max-width:var(--maxw);margin:0 auto;padding:0 32px}
.logo{
  font-family:var(--display);font-stretch:125%;font-weight:800;font-size:1.3rem;
  letter-spacing:-.05em;display:flex;align-items:center;gap:1px;cursor:pointer;text-decoration:none;
}
.logo b{color:var(--text)}
.logo i{font-style:normal;color:var(--signal)}
nav.main{display:flex;gap:1px;margin-left:auto;flex-wrap:wrap}
nav.main button{
  font:inherit;font-size:.9rem;font-weight:500;background:none;border:0;color:var(--dim);
  padding:8px 13px;border-radius:var(--r-inst);cursor:pointer;transition:color .16s var(--ease);
  position:relative;
}
nav.main button::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1.5px;
  background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
}
nav.main button.res::after{background:var(--ember)}
nav.main button:hover{color:var(--text)}
nav.main button:hover::after{transform:scaleX(1)}
nav.main button[aria-current="page"]{color:var(--text);font-weight:600}
nav.main button[aria-current="page"]::after{transform:scaleX(1)}
.hdr-cta{display:flex;gap:9px;align-items:center}
.tt{
  font:inherit;font-size:.85rem;background:none;border:1px solid var(--rail);color:var(--dim);
  width:34px;height:34px;border-radius:var(--r-inst);cursor:pointer;display:grid;place-items:center;
  transition:all .16s var(--ease);
}
.tt:hover{border-color:var(--rail-hi);color:var(--text)}

:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:1px}

/* ─── buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-size:.93rem;font-weight:600;letter-spacing:-.012em;
  padding:13px 22px;border-radius:var(--r-inst);border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .1s var(--ease),filter .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--signal);color:#02101d}
.btn-primary:hover{filter:brightness(1.14)}
.btn-ember{background:var(--ember);color:#240f02}
.btn-ember:hover{filter:brightness(1.1)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--rail-hi)}
.btn-ghost:hover{border-color:var(--signal);color:var(--signal)}
.btn-sm{padding:10px 16px;font-size:.86rem}

/* ─── page routing ─────────────────────────────────────── */
/* NOTE: do not add a bare `.page` rule here.
   WordPress body_class() puts `page` on <body> for every static Page,
   so `.page{display:none}` hides the entire document. The mockup used
   .page for single-file routing; WordPress serves real URLs instead,
   so nothing here needs it. */

/* ══════════════════════════════════════════════════════════
   HERO — the multiviewer wall
   ══════════════════════════════════════════════════════════ */
.hero{
  position:relative;overflow:hidden;border-top:none;
  padding:0;min-height:min(84vh,780px);display:flex;align-items:center;
}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 74% 42%,var(--signal-wash),transparent 68%),
    linear-gradient(90deg,var(--ground) 52%,transparent 80%);
  z-index:2;transition:background .5s var(--ease);
}
.hero.res .hero-bg{
  background:
    radial-gradient(1100px 620px at 74% 42%,var(--ember-wash),transparent 68%),
    linear-gradient(90deg,var(--ground) 52%,transparent 80%);
}
.hero .wrap{position:relative;z-index:3;width:100%;padding-top:72px;padding-bottom:84px}

/* the wall sits behind, bleeding off the right edge */
.wall{
  position:absolute;top:0;right:0;bottom:0;width:62%;
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;
  gap:3px;padding:3px;z-index:1;opacity:.92;
}
/* A monitor is dark whatever the room is, so the tiles keep their
   own surface in both themes rather than following --deck-2. */
.tile{
  position:relative;overflow:hidden;background:#0A1724;
  border-radius:var(--r-inst);
}
.tile::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,
    transparent 0%,
    color-mix(in srgb,var(--signal) 34%,transparent) 38%,
    color-mix(in srgb,var(--signal) 8%,transparent) 54%,
    transparent 76%);
  animation:feed 9s linear infinite;
}
.tile::after{ /* scanline texture */
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 1px,transparent 1px 3px);
  opacity:.5;
}
@keyframes feed{
  0%{transform:translate3d(-62%,0,0) scale(1.5)}
  100%{transform:translate3d(62%,0,0) scale(1.5)}
}
/* every tile drifts at its own rate so the wall never pulses in sync */
.tile:nth-child(1)::before{animation-duration:11s;animation-delay:-2s}
.tile:nth-child(2)::before{animation-duration:7.5s;animation-delay:-5s}
.tile:nth-child(3)::before{animation-duration:13s;animation-delay:-1s}
.tile:nth-child(4)::before{animation-duration:8.5s;animation-delay:-6s}
.tile:nth-child(5)::before{animation-duration:10s;animation-delay:-3s}
.tile:nth-child(6)::before{animation-duration:14s;animation-delay:-8s}
.tile:nth-child(7)::before{animation-duration:9.5s;animation-delay:-4s}
.tile:nth-child(8)::before{animation-duration:12s;animation-delay:-7s}
.tile:nth-child(9)::before{animation-duration:8s;animation-delay:-2.5s}
.tile:nth-child(10)::before{animation-duration:15s;animation-delay:-9s}
.tile:nth-child(11)::before{animation-duration:10.5s;animation-delay:-5.5s}
.tile:nth-child(12)::before{animation-duration:11.5s;animation-delay:-3.5s}

.hero.res .tile::before{
  background:linear-gradient(115deg,
    transparent 0%,
    color-mix(in srgb,var(--ember) 30%,transparent) 38%,
    color-mix(in srgb,var(--ember) 7%,transparent) 54%,
    transparent 76%);
}
.tile .ident{
  position:absolute;left:8px;bottom:7px;z-index:2;
  font-family:var(--mono);font-size:.56rem;font-weight:500;
  color:rgba(233,242,251,.62);letter-spacing:.02em;
}
.tile .slot{
  position:absolute;left:8px;top:7px;z-index:2;
  font-family:var(--mono);font-size:.52rem;color:rgba(233,242,251,.3);
}
/* the programme feed — the only red on the page */
.tile.pgm{outline:1.5px solid var(--tally);outline-offset:-1.5px}
.tile.pgm .ident{color:#fff;font-weight:600}
.tally{
  position:absolute;right:8px;top:7px;z-index:2;
  width:8px;height:8px;border-radius:50%;background:var(--tally);
  box-shadow:0 0 10px var(--tally);animation:tally 2.4s ease-in-out infinite;
}
@keyframes tally{0%,100%{opacity:1}50%{opacity:.42}}

/* the cut — vision-mixer transition on the audience switch */
.cutflash{
  position:absolute;inset:0;z-index:40;pointer-events:none;
  background:#fff;opacity:0;
}
.cutflash.fire{animation:cut .42s var(--ease)}
@keyframes cut{
  0%{opacity:0;clip-path:inset(0 100% 0 0)}
  18%{opacity:.82;clip-path:inset(0 0 0 0)}
  100%{opacity:0;clip-path:inset(0 0 0 0)}
}

/* ─── audience switch ──────────────────────────────────── */
.seg{
  display:inline-flex;padding:3px;gap:3px;border:1px solid var(--rail-hi);
  border-radius:var(--r-pill);background:color-mix(in srgb,var(--deck) 86%,transparent);
  backdrop-filter:blur(8px);margin-bottom:38px;
}
.seg button{
  font:inherit;font-size:.9rem;font-weight:600;letter-spacing:-.015em;
  padding:10px 22px;border-radius:var(--r-pill);border:0;background:transparent;
  color:var(--dim);cursor:pointer;transition:all .2s var(--ease);
}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--signal);color:#02101d}
.seg button.res[aria-pressed="true"]{background:var(--ember);color:#240f02}

.aud{display:none}
.aud.on{display:block}
.aud.on .hero-copy > *{animation:land .5s var(--ease) backwards}
.aud.on .hero-copy > *:nth-child(1){animation-delay:.04s}
.aud.on .hero-copy > *:nth-child(2){animation-delay:.09s}
.aud.on .hero-copy > *:nth-child(3){animation-delay:.14s}
.aud.on .hero-copy > *:nth-child(4){animation-delay:.19s}
@keyframes land{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.hero-copy{max-width:min(50%,620px)}
.hero-sub{margin-top:22px;font-size:1.13rem;color:var(--dim);max-width:46ch;line-height:1.58}
.hero-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero-meta{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 32px;margin-top:40px;padding-top:26px;
  border-top:1px solid var(--rail);max-width:430px;
}
.hero-meta div span{
  display:block;font-family:var(--mono);font-size:1.45rem;font-weight:600;
  color:var(--text);letter-spacing:-.045em;line-height:1.1;
}
.hero-meta div small{display:block;font-size:.79rem;color:var(--faint);font-weight:500;line-height:1.35;margin-top:2px}

/* ─── trust strip ──────────────────────────────────────── */
.strip{border-top:1px solid var(--rail);border-bottom:1px solid var(--rail);background:var(--deck)}
.strip-in{display:grid;grid-template-columns:repeat(5,1fr);max-width:var(--maxw);margin:0 auto}
.strip-in div{padding:26px 20px;border-right:1px solid var(--rail)}
.strip-in div:last-child{border-right:0}
.strip-in b{
  display:block;font-family:var(--mono);font-size:1.4rem;font-weight:600;
  letter-spacing:-.045em;line-height:1.15;
}
.strip-in small{font-size:.82rem;color:var(--faint);font-weight:500}

/* ─── fork ─────────────────────────────────────────────── */
.fork{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.forkcard{
  background:var(--card);border:1px solid var(--rail);border-radius:var(--r-panel);
  padding:36px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:border-color .22s var(--ease);
}
.forkcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--signal)}
.forkcard.res::before{background:var(--ember)}
.forkcard:hover{border-color:var(--rail-hi)}
.forkcard .who{
  display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;
  color:var(--signal);margin-bottom:16px;
}
.forkcard .who::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.forkcard.res .who{color:var(--ember)}
.forkcard h3{font-size:1.65rem;font-stretch:118%;letter-spacing:-.032em;margin-bottom:12px}
.forkcard p{font-size:.95rem;color:var(--dim);margin-bottom:24px}
.forkcard ul{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:10px}
.forkcard ul li{font-size:.9rem;color:var(--dim);display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.forkcard ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--signal);margin-top:9px;flex:none}
.forkcard.res ul li::before{background:var(--ember)}
.forkcard .btn{margin-top:auto;align-self:flex-start}
.forkcard .from{font-size:.82rem;color:var(--faint);margin-bottom:22px;font-weight:500}
.forkcard .from b{
  display:block;margin-top:4px;color:var(--text);font-family:var(--mono);
  font-size:1.7rem;font-weight:600;letter-spacing:-.05em;
}

/* ══════════════════════════════════════════════════════════
   INSTRUMENTS — EPG, panel, tables, widgets
   Hard edges, mono figures. This is where mono belongs.
   ══════════════════════════════════════════════════════════ */
.epg,.panel{
  background:var(--deck);border:1px solid var(--rail-hi);border-radius:var(--r-inst);
  overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.72);
}
.epg-bar,.panel-bar{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--rail);background:var(--deck-2)}
.epg-bar em,.panel-bar em{font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--faint);margin-right:auto}
.epg-live{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint);font-weight:600}
.epg-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);animation:tally 2.4s ease-in-out infinite}
.epg-times{display:grid;grid-template-columns:100px repeat(3,1fr);border-bottom:1px solid var(--rail);background:var(--deck-2)}
.epg-times span{padding:8px 11px;font-family:var(--mono);font-size:.63rem;color:var(--faint);border-left:1px solid var(--rail)}
.epg-times span:first-child{border-left:0}
.epg-row{display:grid;grid-template-columns:100px repeat(3,1fr);border-bottom:1px solid var(--rail)}
.epg-row:last-of-type{border-bottom:0}
.epg-ch{padding:11px;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem;font-weight:600;color:var(--dim)}
.epg-ch i{font-style:normal;width:5px;height:5px;border-radius:50%;background:var(--signal);flex:none}
.epg-slot{padding:11px;border-left:1px solid var(--rail);font-size:.75rem;color:var(--dim);line-height:1.35;display:flex;align-items:center}
.epg-slot.now{background:var(--signal-wash);color:var(--text);font-weight:500}
.epg-foot{padding:11px 15px;border-top:1px solid var(--rail);background:var(--deck-2);font-size:.72rem;color:var(--faint);text-align:center}

.dot{width:9px;height:9px;border-radius:50%;background:var(--rail-hi)}
.panel-body{padding:17px}
.panel-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:15px}
.pstat{background:var(--deck-2);border:1px solid var(--rail);border-radius:var(--r-inst);padding:13px 14px}
.pstat b{display:block;font-family:var(--mono);font-size:1.4rem;letter-spacing:-.05em;font-weight:600;line-height:1.1}
.pstat small{font-size:.72rem;color:var(--faint);font-weight:500}
.pstat.mint b{color:var(--mint)}
.prow{display:grid;grid-template-columns:1.5fr 1fr auto;gap:11px;align-items:center;padding:10px 13px;border-bottom:1px solid var(--rail);font-size:.8rem}
.prow:last-child{border-bottom:0}
.prow .pname{font-weight:500}
.prow .pexp{font-family:var(--mono);color:var(--dim);font-size:.72rem}
.pill{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.09em;padding:3px 9px;border-radius:var(--r-pill);font-weight:600}
.pill.live{background:rgba(53,224,161,.14);color:var(--mint)}
.pill.soon{background:var(--ember-wash);color:var(--ember)}
.pill.off{background:var(--signal-wash);color:var(--faint)}

/* ─── widgets ──────────────────────────────────────────── */
.epic-widget{
  display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rail-hi);
  border-radius:var(--r-panel);overflow:hidden;background:var(--card);
}
.w-in{padding:34px}
.w-out{padding:34px;background:var(--deck-2);border-left:1px solid var(--rail-hi);display:flex;flex-direction:column}
.field{margin-bottom:28px}
.field:last-child{margin-bottom:0}
.field > label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.88rem;font-weight:500;color:var(--dim);margin-bottom:12px;
  text-transform:none;letter-spacing:0;font-family:var(--body);
}
.field > label b{font-family:var(--mono);font-size:1.1rem;color:var(--text);letter-spacing:-.04em;font-weight:600}
.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.opts.two{grid-template-columns:repeat(2,1fr)}
.opts.three{grid-template-columns:repeat(3,1fr)}
.opt{
  font:inherit;font-family:var(--mono);font-size:.85rem;font-weight:600;padding:13px 6px;
  border-radius:var(--r-inst);border:1px solid var(--rail-hi);background:transparent;
  color:var(--dim);cursor:pointer;transition:all .16s var(--ease);text-align:center;line-height:1.25;
}
.opt small{display:block;font-family:var(--body);font-size:.64rem;font-weight:500;opacity:.72;margin-top:4px;letter-spacing:0;text-transform:none}
.opt:hover{border-color:var(--signal);color:var(--text)}
.opt[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:#02101d}
.opt[aria-pressed="true"] small{opacity:.82}

input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;background:var(--rail-hi);border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:var(--ember);cursor:pointer;border:3px solid var(--ground);transition:transform .14s var(--ease)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.14)}
input[type=range]::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--ember);cursor:pointer;border:3px solid var(--ground)}

.w-line{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--rail);font-size:.9rem;color:var(--dim)}
.w-line b{font-family:var(--mono);color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}
.w-line.save b{color:var(--mint)}
.w-total{margin-top:auto;padding-top:24px}
.w-total.mint-rule{border-top:2px solid var(--mint);margin-top:24px}
.w-total small{font-size:.84rem;color:var(--faint);font-weight:500}
.w-total .big{
  font-family:var(--display);font-stretch:118%;font-size:clamp(2.5rem,5vw,3.4rem);font-weight:700;
  letter-spacing:-.045em;line-height:1.02;display:block;margin-top:6px;font-variant-numeric:tabular-nums;
}
.w-total .big.mint{color:var(--mint)}
.w-total .eq{font-family:var(--mono);font-size:.84rem;color:var(--signal);display:block;margin-top:8px}
.w-total .btn{width:100%;margin-top:22px}
.w-note{font-size:.79rem;color:var(--faint);margin-top:14px;line-height:1.5}
/* Cross-sell: the box is a separate product, not a plan option.
   Keeps physical and digital goods out of one configurator. */
.w-xsell{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:18px;padding:14px 16px;border:1px solid var(--rail-hi);
  border-radius:var(--r-inst);text-decoration:none;color:var(--dim);font-size:.88rem;
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.w-xsell:hover{border-color:var(--ember);color:var(--text)}
.w-xsell b{color:var(--text);font-weight:600}
.w-xsell .num{color:var(--ember);font-weight:600}

/* ══════════════════════════════════════════════════════════
   RATE STRIP — pricing as one connected frame, not 4 cards
   ══════════════════════════════════════════════════════════ */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--rail);border-radius:var(--r-panel);overflow:hidden;background:var(--card);
}
.grid-4 > .card{
  border:0;border-right:1px solid var(--rail);border-radius:0;background:transparent;
  display:flex;flex-direction:column;
}
.grid-4 > .card ul{margin-bottom:26px}
.grid-4 > .card .btn{margin-top:auto}
.grid-4 > .card:last-child{border-right:0}
.grid-4 > .card.feat,.grid-4 > .card.feat-e{background:var(--deck-2)}
.grid-4 > .card.feat::after,.grid-4 > .card.feat-e::after{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--signal);
}
.grid-4 > .card.feat-e::after{background:var(--ember)}

.card{
  background:var(--card);border:1px solid var(--rail);border-radius:var(--r-panel);padding:28px;
  transition:border-color .2s var(--ease);position:relative;
}
.card:hover{border-color:var(--rail-hi)}
.card.feat{border-color:var(--signal)}
.card.feat-e{border-color:var(--ember)}
.tag{
  position:absolute;top:14px;right:16px;font-size:.68rem;font-weight:600;
  text-transform:none;letter-spacing:0;background:var(--signal-wash);color:var(--signal);
  padding:3px 10px;border-radius:var(--r-pill);font-family:var(--body);
}
.tag.ember{background:var(--ember-wash);color:var(--ember)}
.card h3{margin-bottom:6px}
/* Large figures take the display face with tabular numerals.
   Monospace gives a period its own full cell, which reads as
   "$9 . 99" once the type is this big. */
.card .price{
  font-family:var(--display);font-stretch:118%;font-size:2.45rem;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.045em;
  margin:14px 0 3px;line-height:1.02;
}
.card .per{font-size:.82rem;color:var(--faint);font-family:var(--body);font-weight:500;letter-spacing:0}
.card .was{font-family:var(--mono);font-size:.95rem;color:var(--faint);text-decoration:line-through;margin-right:8px;font-weight:400}
.card ul{list-style:none;padding:0;margin:22px 0;display:flex;flex-direction:column;gap:10px}
.card ul li{font-size:.875rem;color:var(--dim);display:flex;gap:10px;align-items:flex-start;line-height:1.48}
.card ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--signal);margin-top:8px;flex:none}
.card ul li.no{color:var(--faint)}
.card ul li.no::before{background:var(--rail-hi)}
.card .btn{width:100%;margin-top:4px}

/* ─── device ───────────────────────────────────────────── */
.dev{
  background:var(--card);border:1px solid var(--rail);border-radius:var(--r-panel);
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s var(--ease);
}
.dev:hover{border-color:var(--rail-hi)}
.dev-img{
  height:170px;background:var(--deck-2);display:grid;place-items:center;
  border-bottom:1px solid var(--rail);position:relative;overflow:hidden;
}
.dev-img::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 150px at 50% 125%,var(--signal-wash),transparent 70%)}
.dev-body{padding:22px;display:flex;flex-direction:column;flex:1;gap:3px}
.dev-body .brand{font-size:.78rem;color:var(--faint);font-weight:500;letter-spacing:0;text-transform:none;font-family:var(--body)}
.dev-body h3{font-size:1.1rem}
.dev-body .spec{font-size:.84rem;color:var(--dim);margin-top:7px;line-height:1.52}
.dev-foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.dev-foot .price{font-family:var(--mono);font-size:1.55rem;font-weight:600;letter-spacing:-.05em}
.stock{font-size:.78rem;color:var(--mint);font-weight:500;letter-spacing:0;text-transform:none;font-family:var(--body)}
.wholesale-tip{
  font-size:.78rem;color:var(--ember);margin-top:10px;display:block;font-weight:500;
  letter-spacing:0;text-transform:none;font-family:var(--body);
}
/* Figure rule: monospace is for instrument readouts at small sizes,
   where the uniform cell keeps columns aligned. Above ~1.2rem the
   period and comma each claim a full cell and "$3.25" reads as
   "$3 . 25", so headline figures take the display face with
   tabular numerals instead. */
.hero-meta div span,
.strip-in b,
.pstat b,
.forkcard .from b,
.dev-foot .price{
  font-family:var(--display);font-stretch:112%;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.035em;
}

.inbox-list{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:10px}
.inbox-list li{font-size:.9rem;color:var(--dim);display:flex;gap:11px;align-items:flex-start;line-height:1.5}
.inbox-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ember);margin-top:9px;flex:none}

/* ─── steps ────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rail);border-radius:var(--r-panel);overflow:hidden}
.steps.three{grid-template-columns:repeat(3,1fr)}
.step{padding:28px;border-right:1px solid var(--rail);background:var(--card)}
.step:last-child{border-right:0}
.step .sn{
  font-family:var(--mono);font-size:.72rem;color:var(--signal);font-weight:600;
  letter-spacing:.04em;display:block;margin-bottom:14px;
}
.step.res .sn{color:var(--ember)}
.step h3{font-size:1.02rem;margin-bottom:8px}
.step p{font-size:.87rem;color:var(--dim);line-height:1.52}
.step .t{font-family:var(--mono);font-size:.73rem;color:var(--faint);margin-top:12px;display:block}

/* ─── tables ───────────────────────────────────────────── */
.tablewrap{overflow-x:auto;border:1px solid var(--rail);border-radius:var(--r-panel);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.9rem}
th,td{padding:14px 17px;text-align:left;border-bottom:1px solid var(--rail)}
thead th{
  font-size:.8rem;color:var(--faint);font-weight:600;background:var(--deck-2);
  text-transform:none;letter-spacing:0;font-family:var(--body);
}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .14s var(--ease)}
tbody tr:hover{background:color-mix(in srgb,var(--deck-2) 55%,transparent)}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
td.mint{color:var(--mint)}
th.hi,td.hi{background:var(--signal-wash)}
th.hi-e,td.hi-e{background:var(--ember-wash)}
.yes{color:var(--mint);font-weight:600}
.nope{color:var(--faint)}

/* ─── tabs ─────────────────────────────────────────────── */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--rail);margin-bottom:28px}
.tabs button{
  font:inherit;font-size:.93rem;font-weight:600;padding:13px 20px;background:none;border:0;
  border-bottom:2px solid transparent;color:var(--faint);cursor:pointer;margin-bottom:-1px;
  transition:all .18s var(--ease);
}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--signal);border-bottom-color:var(--signal)}
.tabs button.res[aria-selected="true"]{color:var(--ember);border-bottom-color:var(--ember)}
.tabpanel{display:none}
.tabpanel.on{display:block}

/* ─── faq / quotes / bands ─────────────────────────────── */
details{border-bottom:1px solid var(--rail)}
details summary{
  cursor:pointer;padding:19px 0;font-weight:600;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  transition:color .15s var(--ease);
}
details summary:hover{color:var(--signal)}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"";flex:none;width:10px;height:10px;border-right:1.5px solid var(--signal);
  border-bottom:1.5px solid var(--signal);transform:rotate(45deg) translateY(-2px);
  transition:transform .22s var(--ease);
}
details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
details p{padding:0 0 20px;color:var(--dim);font-size:.93rem;max-width:var(--read)}
details a{color:var(--signal)}

.quote{
  background:var(--card);border:1px solid var(--rail);border-left:2px solid var(--signal);
  border-radius:var(--r-panel);padding:26px;
}
.quote.res{border-left-color:var(--ember)}
.quote p{font-size:.95rem;line-height:1.62;margin-bottom:18px}
.quote .qwho{display:flex;align-items:center;gap:12px}
.quote .av{
  width:36px;height:36px;border-radius:50%;background:var(--deck-2);border:1px solid var(--rail-hi);
  display:grid;place-items:center;font-family:var(--mono);font-size:.74rem;font-weight:600;color:var(--signal);flex:none;
}
.quote.res .av{color:var(--ember)}
.quote .qwho b{display:block;font-size:.87rem}
.quote .qwho small{font-size:.78rem;color:var(--faint)}
.qtag{
  font-size:.74rem;text-transform:none;letter-spacing:0;padding:3px 10px;border-radius:var(--r-pill);
  background:var(--signal-wash);color:var(--signal);font-weight:600;margin-bottom:14px;
  display:inline-block;font-family:var(--body);
}
.qtag.res{background:var(--ember-wash);color:var(--ember)}
.stars{color:var(--ember);font-size:.82rem;letter-spacing:.16em;margin-bottom:12px}

.band{
  background:linear-gradient(135deg,var(--signal) 0%,#0A5CA6 100%);
  border-radius:var(--r-panel);padding:48px;color:#fff;position:relative;overflow:hidden;
}
.band.res{background:linear-gradient(135deg,var(--ember) 0%,#AD420B 100%)}
.band::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 44px);
}
.band h2,.band p{position:relative;color:#fff}
.band p{margin:14px 0 26px;max-width:52ch;opacity:.92}
.band .btn{position:relative}
.band .btn-primary{background:#fff;color:#02101d}
.band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.52)}
.band .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}

/* ─── contact ──────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cmethod{
  background:var(--card);border:1px solid var(--rail);border-radius:var(--r-panel);padding:30px;
  display:flex;flex-direction:column;transition:border-color .2s var(--ease);
}
.cmethod:hover{border-color:var(--rail-hi)}
.cmethod .cicon{width:40px;height:40px;border-radius:var(--r-inst);background:var(--signal-wash);display:grid;place-items:center;margin-bottom:18px}
.cmethod.res .cicon{background:var(--ember-wash)}
.cmethod h3{font-size:1.08rem;margin-bottom:6px}
.cmethod .cval{
  font-family:var(--mono);font-size:1.05rem;font-weight:600;letter-spacing:-.025em;
  color:var(--signal);margin:12px 0 4px;word-break:break-word;text-decoration:none;display:block;
}
.cmethod.res .cval{color:var(--ember)}
.cmethod p{font-size:.88rem;color:var(--dim);line-height:1.52}
.cmethod .chours{font-size:.8rem;color:var(--faint);margin-top:auto;padding-top:18px;font-weight:500}
.sla{
  display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600;
  padding:4px 11px;border-radius:var(--r-pill);background:rgba(53,224,161,.14);
  color:var(--mint);margin-top:12px;align-self:flex-start;
}

/* ─── forms ────────────────────────────────────────────── */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.form .full{grid-column:1/-1}
.form label{
  display:block;font-size:.86rem;color:var(--dim);font-weight:500;margin-bottom:8px;
  text-transform:none;letter-spacing:0;font-family:var(--body);
}
.form input,.form select,.form textarea{
  width:100%;font-family:var(--body);font-size:.95rem;color:var(--text);
  background:var(--deck-2);border:1px solid var(--rail-hi);border-radius:var(--r-inst);
  padding:12px 14px;transition:border-color .16s var(--ease);
}
.form textarea{min-height:140px;resize:vertical;line-height:1.55}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--signal)}
.form input::placeholder,.form textarea::placeholder{color:var(--faint)}
.form select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.social{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.social a{
  width:36px;height:36px;border-radius:var(--r-inst);border:1px solid var(--rail);
  display:grid;place-items:center;color:var(--dim);transition:all .16s var(--ease);
}
.social a:hover{border-color:var(--signal);color:var(--signal)}

/* ─── policy / docs ────────────────────────────────────── */
.policy{display:grid;grid-template-columns:230px 1fr;gap:60px;align-items:start}
.policy-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px}
.policy-nav a,.policy-nav button{
  font:inherit;font-size:.89rem;color:var(--dim);text-decoration:none;text-align:left;
  padding:9px 14px;border-radius:var(--r-inst);border:0;border-left:2px solid transparent;
  background:none;cursor:pointer;width:100%;transition:all .16s var(--ease);
}
.policy-nav a:hover,.policy-nav button:hover{color:var(--text);background:var(--signal-wash)}
.policy-nav .cur,.policy-nav [aria-current="true"]{color:var(--signal);border-left-color:var(--signal);background:var(--signal-wash);font-weight:600}
.policy-doc{max-width:var(--read)}
.doc{display:none}
.doc.on{display:block}
.doc h2{margin-bottom:10px}
.doc h3{margin:36px 0 12px;font-size:1.1rem}
.doc h4{margin:24px 0 9px;font-size:.96rem;color:var(--text)}
.doc p{color:var(--dim);font-size:.95rem;margin-bottom:15px;line-height:1.65}
.doc ul,.doc ol{color:var(--dim);font-size:.95rem;padding-left:22px;margin-bottom:15px;line-height:1.65}
.doc li{margin-bottom:8px}
.doc a{color:var(--signal)}
.doc table{width:100%;border-collapse:collapse;font-size:.88rem;margin-bottom:18px;min-width:0}
.doc th,.doc td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--rail)}
.doc th{font-size:.8rem;color:var(--faint);font-weight:600;text-transform:none;letter-spacing:0;font-family:var(--body)}
.doc td{color:var(--dim)}
.policy-doc h3{margin:36px 0 12px;font-size:1.1rem}
.policy-doc p{color:var(--dim);font-size:.95rem;margin-bottom:15px}
.policy-doc ul{color:var(--dim);font-size:.95rem;padding-left:22px;margin-bottom:15px}
.policy-doc li{margin-bottom:8px}
.updated{font-size:.82rem;color:var(--faint);font-family:var(--mono)}

.gstep{display:flex;gap:16px;margin-bottom:20px;align-items:flex-start}
.gstep .gn{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--signal-wash);color:var(--signal);
  display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;font-weight:600;margin-top:1px;
}
.gstep p{margin:0;font-size:.93rem;color:var(--dim);line-height:1.6}
.gstep b{color:var(--text);font-weight:600}

.note,.legal-note{
  border-radius:var(--r-inst);padding:15px 18px;font-size:.86rem;color:var(--dim);
  margin-bottom:30px;line-height:1.55;
}
.note{background:var(--signal-wash);border:1px dashed var(--signal)}
.legal-note{background:var(--ember-wash);border:1px dashed var(--ember)}
.note b,.legal-note b{
  display:block;margin-bottom:5px;font-size:.84rem;font-weight:600;
  text-transform:none;letter-spacing:0;font-family:var(--body);
}
.note b{color:var(--signal)}
.legal-note b{color:var(--ember)}

/* ─── footer ───────────────────────────────────────────── */
footer.site{border-top:1px solid var(--rail);background:var(--deck);padding:58px 0 28px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:34px}
.fgrid h4{
  font-size:.84rem;color:var(--faint);margin-bottom:16px;font-weight:600;
  text-transform:none;letter-spacing:0;font-family:var(--body);font-stretch:100%;
}
.fgrid h4.e{color:var(--ember)}
.fgrid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.fgrid a{color:var(--dim);text-decoration:none;font-size:.89rem;transition:color .15s var(--ease)}
.fgrid a:hover{color:var(--signal)}
.fbot{
  margin-top:42px;padding-top:22px;border-top:1px solid var(--rail);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.82rem;color:var(--faint);
}
.fbot a{color:var(--faint);text-decoration:none}
.fbot a:hover{color:var(--signal)}
.pay{display:flex;gap:8px;flex-wrap:wrap}
.pay span{
  font-family:var(--mono);font-size:.64rem;border:1px solid var(--rail);padding:4px 10px;
  border-radius:var(--r-inst);color:var(--faint);
}

/* ─── responsive ───────────────────────────────────────── */
@media (max-width:1100px){
  .wall{width:54%;grid-template-columns:repeat(3,1fr)}
  .hero-copy{max-width:min(56%,560px)}
}
@media (max-width:900px){
  /* the wall leaves absolute positioning here, so the hero has to
     stack instead of staying a flex row — otherwise the wall becomes
     a sibling column and crushes the copy */
  .hero{min-height:0;flex-direction:column;align-items:stretch}
  .hero .wrap{order:1;padding-top:48px;padding-bottom:40px}
  .hero-copy{max-width:100%}
  .wall{
    position:relative;order:2;width:auto;height:170px;margin:0 0 8px;
    grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;
  }
  .hero-bg{background:radial-gradient(700px 420px at 70% 20%,var(--signal-wash),transparent 70%)}
  .hero.res .hero-bg{background:radial-gradient(700px 420px at 70% 20%,var(--ember-wash),transparent 70%)}
  .hero-grid{display:block}
  .epic-widget,.grid-2,.grid-3,.fork,.policy,.contact-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-4 > .card{border-bottom:1px solid var(--rail)}
  .grid-4 > .card:nth-child(2n){border-right:0}
  .w-out{border-left:0;border-top:1px solid var(--rail-hi)}
  .strip-in{grid-template-columns:repeat(2,1fr)}
  .strip-in div{border-bottom:1px solid var(--rail)}
  .steps,.steps.three{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--rail)}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .policy-nav{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:28px}
  section{padding:62px 0}
  .hdr{height:auto;padding:12px 24px;flex-wrap:wrap}
  nav.main{width:100%;order:3;margin-left:0;overflow-x:auto;padding-bottom:2px}
  .epg-times,.epg-row{grid-template-columns:84px repeat(2,1fr)}
  .epg-times span:last-child,.epg-row .epg-slot:last-child{display:none}
}
@media (max-width:580px){
  .wrap,.hdr{padding-left:18px;padding-right:18px}
  .grid-4,.strip-in,.opts,.form{grid-template-columns:1fr}
  .grid-4 > .card{border-right:0}
  .wall{height:140px;grid-template-columns:repeat(3,1fr)}
  .seg{width:100%}
  .seg button{flex:1;text-align:center;padding:11px 8px;font-size:.85rem}
  .band{padding:32px 24px}
  .hero-meta{gap:22px}
}

/* ══════════════════════════════════════════════════════════
   WORDPRESS LAYER
   Markup WordPress emits that the static mockup never had.
   ══════════════════════════════════════════════════════════ */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;overflow:hidden;
  padding:0;position:absolute!important;width:1px;word-wrap:normal!important;
}
.skip-link{
  position:absolute;left:-9999px;z-index:999;padding:13px 22px;background:var(--signal);
  color:#02101d;font-weight:600;border-radius:0 0 var(--r-inst) 0;
}
.skip-link:focus{left:0;top:0}

/* wp_nav_menu renders links, not buttons - mirror the nav styling */
.nav-list{display:flex;gap:1px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-list li{position:relative}
.nav-list a{
  display:block;font-size:.9rem;font-weight:500;color:var(--dim);text-decoration:none;
  padding:8px 13px;border-radius:var(--r-inst);transition:color .16s var(--ease);position:relative;
}
.nav-list a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1.5px;
  background:var(--signal);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav-list a:hover{color:var(--text)}
.nav-list a:hover::after{transform:scaleX(1)}
.nav-list .current-menu-item > a,
.nav-list a[aria-current="page"]{color:var(--text);font-weight:600}
.nav-list .current-menu-item > a::after,
.nav-list a[aria-current="page"]::after{transform:scaleX(1)}
.nav-list ul{display:none}

/* the_content() output on page.php and the legal / guide templates */
.entry{max-width:var(--read)}
.entry h2{margin:38px 0 14px;font-size:1.7rem}
.entry h3{margin:30px 0 11px;font-size:1.12rem}
.entry h4{margin:24px 0 9px;font-size:.96rem}
.entry p{color:var(--dim);font-size:.96rem;margin-bottom:16px;line-height:1.66}
.entry ul,.entry ol{color:var(--dim);font-size:.96rem;padding-left:23px;margin-bottom:16px;line-height:1.66}
.entry li{margin-bottom:8px}
.entry a{color:var(--signal)}
.entry img{border-radius:var(--r-panel);margin:22px 0}
.entry blockquote{border-left:2px solid var(--signal);padding-left:22px;margin:24px 0;color:var(--dim);font-style:italic}
.entry table{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:18px}
.entry th,.entry td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--rail)}
.entry th{font-size:.82rem;color:var(--faint);font-weight:600}
.entry td{color:var(--dim)}
.entry .wp-caption{max-width:100%}
.entry figcaption{font-size:.82rem;color:var(--faint);margin-top:8px}

/* ── WooCommerce: My Account ─────────────────────────────
   Woo renders the account area as a bare <nav> + <div>. Without
   these rules it falls back to browser defaults: bullet lists and
   blue underlined links. */
.woo-content .woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
}
.woo-content .woocommerce-MyAccount-navigation li a{
  display:block;padding:11px 15px;font-size:.92rem;font-weight:500;
  color:var(--dim);text-decoration:none;border-radius:var(--r-inst);
  border-left:2px solid transparent;transition:all .16s var(--ease);
}
.woo-content .woocommerce-MyAccount-navigation li a:hover{
  color:var(--text);background:var(--signal-wash);
}
.woo-content .woocommerce-MyAccount-navigation li.is-active a{
  color:var(--signal);background:var(--signal-wash);
  border-left-color:var(--signal);font-weight:600;
}
.woo-content .woocommerce-MyAccount-content{min-width:0}
.woo-content .woocommerce-MyAccount-content p{color:var(--dim);font-size:.95rem;margin-bottom:15px;line-height:1.65}
.woo-content .woocommerce-MyAccount-content a{color:var(--signal)}
.woo-content .woocommerce-MyAccount-content h2,
.woo-content .woocommerce-MyAccount-content h3{margin:28px 0 12px}

/* Woo wraps account pages in .woocommerce — make that the two-column grid */
.woo-content .woocommerce-account-wrap,
.woocommerce-account .woo-content > .woocommerce{
  display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;align-items:start;
}
.woocommerce-account .woo-content > .woocommerce::after{content:none}

/* login / register, shown to logged-out visitors */
.woo-content .woocommerce-form-login,
.woo-content .woocommerce-form-register{
  background:var(--card);border:1px solid var(--rail);border-radius:var(--r-panel);
  padding:30px;max-width:460px;
}
.woo-content .woocommerce-form-login label,
.woo-content .woocommerce-form-register label{
  display:block;font-size:.86rem;color:var(--dim);font-weight:500;margin-bottom:8px;
}
.woo-content .woocommerce-form-login input[type=text],
.woo-content .woocommerce-form-login input[type=password],
.woo-content .woocommerce-form-register input[type=text],
.woo-content .woocommerce-form-register input[type=email],
.woo-content .woocommerce-form-register input[type=password]{
  width:100%;background:var(--deck-2);border:1px solid var(--rail-hi);
  border-radius:var(--r-inst);color:var(--text);padding:12px 14px;
  font-family:var(--body);font-size:.95rem;margin-bottom:18px;
}
.woo-content .woocommerce-form-login input:focus,
.woo-content .woocommerce-form-register input:focus{outline:none;border-color:var(--signal)}

/* Woo's float-based column classes fight the grid */
.woo-content .col2-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.woo-content .col2-set .col-1,
.woo-content .col2-set .col-2{width:auto;float:none}
.woo-content .woocommerce-MyAccount-navigation{float:none;width:auto}
.woo-content .woocommerce-MyAccount-content{float:none;width:auto}

@media (max-width:900px){
  .woo-content .woocommerce-account-wrap,
  .woocommerce-account .woo-content > .woocommerce,
  .woo-content .col2-set{grid-template-columns:1fr;gap:28px}
  .woo-content .woocommerce-MyAccount-navigation ul{
    flex-direction:row;flex-wrap:wrap;gap:4px;
  }
}

.cart-count{
  font-family:var(--mono);font-size:.64rem;background:var(--ember);color:#240f02;
  border-radius:var(--r-pill);padding:1px 7px;font-weight:600;margin-left:6px;
}

@media print{
  header.site,footer.site,.seg,.hdr-cta,.band,.wall{display:none}
  body{background:#fff;color:#000}
}

/* ══════════════════════════════════════════════════════════
   WOOCOMMERCE
   ══════════════════════════════════════════════════════════ */
.woo-content .woocommerce-message,
.woo-content .woocommerce-info,
.woo-content .woocommerce-error{
  background:var(--card);border:1px solid var(--rail-hi);border-left:3px solid var(--signal);
  border-radius:var(--r-inst);padding:14px 18px;color:var(--dim);font-size:.9rem;list-style:none;margin-bottom:22px;
}
.woo-content .woocommerce-error{border-left-color:var(--ember)}
.woo-content .woocommerce-message{border-left-color:var(--mint)}
.woo-content ul.products{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0}
.woo-content ul.products li.product{
  background:var(--card);border:1px solid var(--rail);border-radius:var(--r-inst);
  padding:18px;text-align:left;transition:border-color .16s;
}
.woo-content ul.products li.product:hover{border-color:var(--rail-hi)}
.woo-content ul.products li.product a img{border-radius:var(--r-inst);margin-bottom:14px}
.woo-content ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--display);font-size:1rem;font-weight:800;letter-spacing:-.02em;padding:0;margin-bottom:6px;
}
.woo-content .price{font-family:var(--mono);font-size:1.25rem;font-weight:800;color:var(--text);letter-spacing:-.04em}
.woo-content .price del{color:var(--faint);font-size:.85rem;font-weight:400;margin-right:6px}
.woo-content .price ins{text-decoration:none}
.woo-content .button,
.woo-content button.button,
.woo-content input.button,
.woo-content a.button,
.woo-content .woocommerce-button{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-size:.88rem;font-weight:700;letter-spacing:-.01em;
  background:var(--signal);color:#04121f;border:1px solid var(--signal);
  padding:11px 19px;border-radius:var(--r-inst);text-decoration:none;transition:filter .15s;
}
.woo-content .button:hover{filter:brightness(1.12);background:var(--signal);color:#04121f}
.woo-content .button.alt{background:var(--ember);border-color:var(--ember);color:#2a1102}
.woo-content table.shop_table{
  border:1px solid var(--rail);border-radius:var(--r-inst);border-collapse:collapse;width:100%;
  background:var(--card);font-size:.9rem;
}
.woo-content table.shop_table th{
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--faint);background:var(--deck-2);padding:13px 16px;text-align:left;border-bottom:1px solid var(--rail);
}
.woo-content table.shop_table td{padding:14px 16px;border-bottom:1px solid var(--rail);color:var(--dim)}
.woo-content .quantity input{
  background:var(--card);border:1px solid var(--rail-hi);border-radius:var(--r-inst);
  color:var(--text);padding:9px;font-family:var(--mono);width:70px;
}
.woo-content .woocommerce-checkout input[type=text],
.woo-content .woocommerce-checkout input[type=email],
.woo-content .woocommerce-checkout input[type=tel],
.woo-content .woocommerce-checkout input[type=password],
.woo-content .woocommerce-checkout select,
.woo-content .woocommerce-checkout textarea,
.woo-content .select2-container .select2-selection{
  background:var(--card);border:1px solid var(--rail-hi);border-radius:var(--r-inst);
  color:var(--text);padding:11px 13px;font-family:var(--body);font-size:.92rem;width:100%;
}
.woo-content .woocommerce-checkout label{
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--faint);font-weight:600;margin-bottom:6px;display:block;
}
.woo-content #payment{background:var(--deck-2);border:1px solid var(--rail);border-radius:var(--r-inst);padding:22px}
.woo-content #payment ul.payment_methods{list-style:none;padding:0;margin:0 0 18px;border-bottom:1px solid var(--rail)}
.woo-content #payment ul.payment_methods li{padding:10px 0;color:var(--dim);font-size:.9rem}
.woo-content .woocommerce-breadcrumb{font-family:var(--mono);font-size:.72rem;color:var(--faint);letter-spacing:.05em;margin-bottom:26px}
.woo-content .woocommerce-breadcrumb a{color:var(--dim);text-decoration:none}
.woo-content h1.product_title{font-size:2.1rem;margin-bottom:12px}
.woo-content .woocommerce-product-details__short-description{color:var(--dim);font-size:.95rem;margin:16px 0}
.woo-content .woocommerce-tabs ul.tabs{list-style:none;padding:0;display:flex;gap:4px;border-bottom:1px solid var(--rail);margin:0 0 24px}
.woo-content .woocommerce-tabs ul.tabs li a{
  display:block;font-size:.88rem;font-weight:700;padding:11px 18px;color:var(--faint);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.woo-content .woocommerce-tabs ul.tabs li.active a{color:var(--signal);border-bottom-color:var(--signal)}
.cart-count{
  font-family:var(--mono);font-size:.63rem;background:var(--ember);color:#2a1102;
  border-radius:20px;padding:1px 6px;font-weight:700;margin-left:5px;
}

/* ══════════════════════════════════════════════════════════
   WOOCOMMERCE LAYOUT CORRECTIONS
   WooCommerce ships float-based layouts and its own button
   colours at specificity (0,3,1) — e.g. `.woocommerce
   a.button.alt`. Anything here that overrides those has to
   clear that bar, so these selectors include `.woocommerce`
   rather than relying on `.woo-content` alone.
   ══════════════════════════════════════════════════════════ */

/* An empty notices wrapper still occupies a grid cell and leaves a
   large hole under the page title. */
.woo-content .woocommerce-notices-wrapper:empty{display:none}

/* ── Buttons ──────────────────────────────────────────────
   Without this WooCommerce's stock purple (#a46497) wins on
   "Proceed to checkout" and "Place order". */
.woo-content .woocommerce a.button.alt,
.woo-content .woocommerce button.button.alt,
.woo-content .woocommerce input.button.alt,
.woo-content .woocommerce #respond input#submit.alt{
  background:var(--ember);border-color:var(--ember);color:#240f02;
}
.woo-content .woocommerce a.button.alt:hover,
.woo-content .woocommerce button.button.alt:hover,
.woo-content .woocommerce input.button.alt:hover{
  background:var(--ember);filter:brightness(1.1);color:#240f02;
}
.woo-content .woocommerce a.button,
.woo-content .woocommerce button.button,
.woo-content .woocommerce input.button{
  background:var(--signal);border-color:var(--signal);color:#02101d;
}
.woo-content .woocommerce a.button:hover,
.woo-content .woocommerce button.button:hover,
.woo-content .woocommerce input.button:hover{
  background:var(--signal);filter:brightness(1.12);color:#02101d;
}
/* A disabled "Update cart" should read as unavailable, not invisible. */
.woo-content .woocommerce button.button:disabled,
.woo-content .woocommerce button.button[disabled]{
  background:transparent;border-color:var(--rail-hi);color:var(--faint);
  opacity:1;cursor:not-allowed;
}

/* ── My Account ───────────────────────────────────────────
   Named areas instead of auto-flow. With auto-flow the notices
   wrapper claims the first cell, pushing the nav to the right
   and the content to the row below. */
.woocommerce-account .woo-content > .woocommerce{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  grid-template-areas:"notices notices" "nav content";
  gap:16px 48px;align-items:start;
}
.woocommerce-account .woo-content .woocommerce-notices-wrapper{grid-area:notices}
.woocommerce-account .woo-content .woocommerce-MyAccount-navigation{grid-area:nav}
.woocommerce-account .woo-content .woocommerce-MyAccount-content{grid-area:content}

/* ── Cart ─────────────────────────────────────────────────
   Totals sit right without leaving half the row empty. */
.woo-content .woocommerce .cart-collaterals{
  display:flex;justify-content:flex-end;width:100%;margin-top:40px;
}
.woo-content .woocommerce .cart-collaterals::before,
.woo-content .woocommerce .cart-collaterals::after{content:none;display:none}
.woo-content .woocommerce .cart_totals{width:min(460px,100%);float:none}
.woo-content .woocommerce .cart_totals h2{font-size:1.5rem;margin-bottom:14px}
.woo-content .woocommerce .cart_totals .checkout-button{width:100%;margin-top:18px}
.woo-content .woocommerce .quantity input.qty{
  background:var(--deck-2);border:1px solid var(--rail-hi);border-radius:var(--r-inst);
  color:var(--text);padding:9px;width:72px;font-family:var(--mono);text-align:center;
}
.woo-content .woocommerce .coupon{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.woo-content .woocommerce .coupon input#coupon_code{
  background:var(--deck-2);border:1px solid var(--rail-hi);border-radius:var(--r-inst);
  color:var(--text);padding:11px 13px;width:auto;min-width:180px;
}

/* ── Checkout ─────────────────────────────────────────────
   One column. WooCommerce's .col2-set floats two 48% columns,
   and with no shipping step the second is empty, which is what
   left the billing block stranded on the right. A single column
   also reads better on a checkout. */
.woo-content .woocommerce form.checkout{max-width:760px}
.woo-content .woocommerce .col2-set{display:block;width:auto}
.woo-content .woocommerce .col2-set .col-1,
.woo-content .woocommerce .col2-set .col-2{
  float:none;width:auto;max-width:none;margin:0 0 30px;
}
.woo-content .woocommerce .col2-set::before,
.woo-content .woocommerce .col2-set::after{content:none;display:none}
.woo-content .woocommerce #order_review,
.woo-content .woocommerce #order_review_heading{width:auto;float:none}
.woo-content .woocommerce #order_review_heading{margin:34px 0 14px}
.woo-content .woocommerce .woocommerce-billing-fields h3,
.woo-content .woocommerce .woocommerce-additional-fields h3{font-size:1.25rem;margin-bottom:16px}
.woo-content .woocommerce form .form-row{padding:0;margin:0 0 18px}
.woo-content .woocommerce form .form-row label{
  display:block;font-size:.86rem;color:var(--dim);font-weight:500;margin-bottom:8px;
}
.woo-content .woocommerce form .form-row input.input-text,
.woo-content .woocommerce form .form-row textarea,
.woo-content .woocommerce form .form-row select{
  background:var(--deck-2);border:1px solid var(--rail-hi);border-radius:var(--r-inst);
  color:var(--text);padding:12px 14px;font-family:var(--body);font-size:.95rem;width:100%;
}
.woo-content .woocommerce form .form-row input.input-text:focus,
.woo-content .woocommerce form .form-row textarea:focus{outline:none;border-color:var(--signal)}
.woo-content .woocommerce .woocommerce-info,
.woo-content .woocommerce .woocommerce-message{
  background:var(--deck-2);border:1px solid var(--rail);border-left:3px solid var(--signal);
  border-radius:var(--r-inst);padding:14px 18px;color:var(--dim);font-size:.92rem;list-style:none;
}
.woo-content .woocommerce #payment{
  background:var(--deck-2);border:1px solid var(--rail);border-radius:var(--r-panel);padding:24px;
}
.woo-content .woocommerce #payment div.form-row{padding:0}
.woo-content .woocommerce #payment .place-order{margin-top:18px}
.woo-content .woocommerce #payment #place_order{width:100%}

@media (max-width:900px){
  .woocommerce-account .woo-content > .woocommerce{
    grid-template-columns:1fr;
    grid-template-areas:"notices" "nav" "content";
  }
  .woo-content .woocommerce .cart-collaterals{justify-content:stretch}
  .woo-content .woocommerce .cart_totals{width:100%}
}

/* ══════════════════════════════════════════════════════════
   FOOTER LEGAL LIST
   This was defined in v1 and lost when the stylesheet was
   rebuilt from the mockup, which uses a <span> here rather
   than a menu. Without it the links render as a default
   bulleted list and read as a second footer.
   ══════════════════════════════════════════════════════════ */
.flegal{
  display:flex;gap:18px;flex-wrap:wrap;list-style:none;margin:0;padding:0;
}
.flegal li{margin:0;padding:0;list-style:none}
.flegal li::marker{content:none}
.flegal a{color:var(--faint);text-decoration:none;font-size:.82rem}
.flegal a:hover{color:var(--signal)}