@charset "UTF-8";
/* ============================================================================
   IRON TV PRO — "IRON FORGE" DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Version : 2.0.0
   Author  : Iron TV Pro
   Scope   : Complete visual layer for the site — header, homepage, landing
             pages, WooCommerce (archive, product, cart, checkout), legal and
             contact pages, components and every responsive state.

   PRINCIPLE
   This file is presentation only. It restyles the existing markup contract
   (class names + DOM structure) without adding, removing or reordering a
   single word of copy, link, price or schema. All imagery is decorative and
   applied through CSS backgrounds, so the document's content layer is
   untouched.

   CONTENTS
     01  Fonts
     02  Design tokens
     03  Reset & base
     04  Typography
     05  Layout primitives
     06  Components — buttons
     07  Components — badges, rules, panels
     08  Header & navigation
     09  Hero
     10  Stats
     11  Feature grids (why / devices / apps / benefits)
     12  Pricing
     13  Editorial & long-form content
     14  Install steps
     15  FAQ
     16  CTA band
     17  Footer & floating actions
     18  Inner page shell (pg-*)
     19  Forms
     20  WooCommerce — shop archive
     21  WooCommerce — single product
     22  WooCommerce — cart
     23  WooCommerce — checkout & order
     24  Blog, search, 404, comments
     25  Motion & utilities
     26  Responsive states
     27  Accessibility, print, reduced motion
   ========================================================================== */

/* ==========================================================================
   01  FONTS
   Sora carries the display voice (engineered, geometric, a little severe);
   Inter carries body copy. 7 faces total, down from the previous 13.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   02  DESIGN TOKENS
   ========================================================================== */

/* ---------------------------------------------------------------------------
   REFERENCE PALETTE
   Values below were READ from the rendered visual reference (ironservice.fr)
   with getComputedStyle — measured, not eyeballed:

     #1B2D42   dominant navy .... hero ground, dark bands, all headings
     #207393   primary teal ..... buttons, links, prices, eyebrows, hero overlay
     #2A99C5   secondary teal ... lighter accent / hover
     #FFFFFF   page ground ...... body, cards
     #F2F5F7   alt band ......... alternating sections + footer
     #54595F   body text
     #B2B7BB   muted text on navy (nav links)
     header    rgba(27,45,66,.59) translucent navy, constant
     hero      navy + imagery + #207393 overlay @ 32%
     card      #FFF, radius 5px, shadow rgba(0,0,0,.15) 0 2px 20px
     button    #207393 bg, #FFF text, radius 5px, no shadow

   None of the reference's code or image files are used. The palette is applied
   to original artwork and to this original stylesheet.
   --------------------------------------------------------------------------- */
:root {
  /* --- navy ramp (built around the measured #1B2D42) ------------------- */
  --navy-900: #0B1520;
  --navy-850: #0F1D2E;
  --navy-800: #152436;
  --navy-700: #1B2D42;   /* MEASURED — dominant */
  --navy-600: #243B54;
  --navy-500: #33506E;

  /* --- teal ramp (built around the measured #207393 / #2A99C5) --------- */
  --teal-800: #12495E;
  --teal-700: #175A74;
  --teal-600: #207393;   /* MEASURED — primary */
  --teal-500: #2A99C5;   /* MEASURED — secondary */
  --teal-400: #4FB3D9;
  --teal-200: #BFE0EE;
  --teal-100: #E6F2F7;

  /* --- neutrals -------------------------------------------------------- */
  --paper:       #FFFFFF;   /* MEASURED */
  --mist:        #F2F5F7;   /* MEASURED */
  --mist-line:   #E2E8ED;
  --mist-line-2: #CFD9E0;

  --ink-text:   #1B2D42;    /* MEASURED — headings */
  --body-text:  #54595F;    /* MEASURED — body copy */
  --muted-text: #656C74;   /* was #8A9099 (3.2:1 on white), then #6E747B which
                              still measured 4.43:1 on the tinted cards; this
                              clears AA on both #FFF and #F2F5F7 */
  --on-navy-1:  #FFFFFF;
  --on-navy-2:  #B2B7BB;    /* MEASURED — nav links */
  --on-navy-3:  #9AA3AD;    /* quietest step that still clears AA on navy */
  --on-accent:  #FFFFFF;    /* label colour on any accent-filled surface */

  /* brand/semantic surfaces that are not part of the reference palette but are
     required by the site's own components — declared once, never inlined */
  --wa:        #25D366;
  --wa-hover:  #2EE775;
  --on-wa:     #06281A;
  --danger-bg-text: #FFD9DA;

  /* =====================================================================
     SEMANTIC LAYER
     The component rules below all speak in these names. The light ground is
     the default context; the inverted zones (header, hero, CTA, footer)
     re-declare the same names further down, so every component adapts
     without a single component rule being duplicated.
     ===================================================================== */

  /* surfaces */
  --ink-1000: var(--mist);
  --ink-900:  var(--paper);
  --ink-850:  var(--mist);
  --ink-800:  var(--paper);
  --ink-750:  var(--mist);
  --ink-700:  var(--mist-line);
  --ink-600:  var(--mist-line-2);

  /* accent ramp */
  --ember-200: var(--teal-100);
  /* #2A99C5 is only 3.0:1 on white, so on the light ground the *text* accent is
     the measured #207393 (4.9:1). The lighter teal returns in the navy zones,
     where it is overridden below. */
  --ember-300: var(--teal-600);
  --ember-400: var(--teal-600);
  --ember-500: var(--teal-600);
  --ember-600: var(--teal-700);
  --ember-700: var(--teal-800);

  /* cool/neutral ramp */
  --steel-200: var(--mist-line);
  --steel-300: var(--muted-text);
  --steel-400: var(--body-text);
  --steel-500: var(--navy-600);

  /* foreground */
  --fg-1:   var(--ink-text);
  --fg-2:   var(--body-text);
  --fg-3:   var(--muted-text);
  --fg-inv: #FFFFFF;        /* text ON the accent — white, per the reference */

  /* semantic */
  --ok:   #2E9E6B;
  --warn: #C98A15;
  --bad:  #C7443F;
  --info: var(--teal-600);
  --wa:   #25D366;

  /* lines & tints */
  --line:        var(--mist-line);
  --line-strong: var(--mist-line-2);
  --line-ember:  rgba(32,115,147,.45);
  --glass:       rgba(27,45,66,.035);
  --glass-2:     rgba(27,45,66,.065);

  /* accents */
  --grad-ember: linear-gradient(135deg, var(--teal-500) 0%, var(--teal-600) 100%);
  --grad-text:  linear-gradient(100deg, var(--teal-600) 0%, var(--teal-500) 55%, var(--navy-600) 100%);
  --grad-rule:  linear-gradient(180deg, var(--teal-500), var(--teal-700));

  /* elevation — tuned for a light ground; --lift-2 is the measured card shadow */
  --lift-1: 0 1px 2px rgba(27,45,66,.07);
  --lift-2: 0 2px 20px rgba(0,0,0,.15);
  --lift-3: 0 8px 34px rgba(27,45,66,.18);
  --lift-ember: 0 6px 18px -6px rgba(32,115,147,.42);
  --edge: none;

  /* type — Poppins carries the reference's display voice */
  --font-display: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-xs:   clamp(.75rem,  .73rem + .10vw, .8125rem);
  --t-sm:   clamp(.8125rem,.79rem + .12vw, .875rem);
  --t-base: clamp(.9375rem,.91rem + .14vw, 1rem);
  --t-md:   clamp(1rem,    .96rem + .20vw, 1.0625rem);
  --t-lg:   clamp(1.0625rem,1rem + .30vw,  1.1875rem);
  --t-h4:   clamp(1.125rem,1.05rem + .38vw,1.375rem);
  --t-h3:   clamp(1.25rem, 1.12rem + .62vw,1.625rem);
  --t-h2:   clamp(1.5rem,  1.28rem + 1.10vw, 2.25rem);
  --t-h1:   clamp(1.875rem,1.55rem + 1.62vw, 2.875rem);
  --t-mega: clamp(2rem,    1.62rem + 1.90vw, 3.25rem);

  /* space: 4px grid */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px; --s-11: 80px; --s-12: 96px;

  --sec-py: clamp(56px, 3.4vw + 38px, 112px);
  --cw:     1180px;
  --gutter: clamp(18px, 4.2vw, 40px);

  /* radii — the reference is consistently 5px */
  --r-xs: 3px;  --r-sm: 5px;  --r-md: 8px;
  --r-lg: 10px; --r-xl: 14px; --r-full: 999px;

  /* motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --tr-fast:   .16s var(--ease);
  --tr-base:   .28s var(--ease);
  --tr-slow:   .5s  var(--ease-out);

  /* decorative assets — original artwork, generated in the reference palette */
  --img-atmosphere: url('../img/forge/iron-tv-pro-hero-atmosphere.webp');
  --img-mesh:       url('../img/forge/iron-tv-pro-teal-wash.webp');
  --img-grain:      url('../img/forge/iron-tv-pro-film-grain.webp');
  --img-grid:       url('../img/forge/iron-tv-pro-screen-grid.webp');
}

/* ---------------------------------------------------------------------------
   INVERTED CONTEXT
   The reference keeps its chrome and hero on navy while the content runs on a
   light ground. Re-declaring the semantic names here means every component
   inside these zones flips automatically.
   --------------------------------------------------------------------------- */
.itv-header,
.itv-mobile-nav,
.hero,
.pg-hero,
.cta-section,
.sec-dark {
  --ink-1000: var(--navy-850);
  --ink-900:  var(--navy-700);
  --ink-850:  var(--navy-800);
  --ink-800:  rgba(255,255,255,.055);
  --ink-750:  rgba(255,255,255,.085);
  --ink-700:  rgba(255,255,255,.12);
  --ink-600:  rgba(255,255,255,.18);

  --fg-1: var(--on-navy-1);
  --fg-2: var(--on-navy-2);
  --fg-3: var(--on-navy-3);

  --line:        rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.22);
  --glass:       rgba(255,255,255,.06);
  --glass-2:     rgba(255,255,255,.10);

  --ember-300: var(--teal-400);
  --ember-400: var(--teal-500);

  --lift-1: 0 1px 2px rgba(0,0,0,.30);
  --lift-2: 0 6px 20px rgba(0,0,0,.35);
  --lift-3: 0 16px 40px rgba(0,0,0,.45);
  --edge: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Components that need a different treatment on the navy zones. The token flip
   above handles most of it; these are the cases where a light-ground choice
   does not simply invert. */
.hero, .pg-hero, .cta-section, .itv-header, .itv-mobile-nav, .sec-dark {
  /* gradient headline must resolve light-on-navy, not navy-on-navy */
  --grad-text: linear-gradient(100deg, #FFFFFF 0%, var(--teal-200) 45%, var(--teal-400) 100%);
}
/* eyebrow chip: translucent white rather than a pale pill */
.hero .badge, .pg-hero .badge, .cta-section .badge {
  color: #FFFFFF;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
/* outline button reads white on navy */
.hero .btn-ghost, .pg-hero .btn-ghost, .cta-section .btn-ghost,
.hero .btn-pricing:not(.btn-pricing-featured),
.cta-section .btn-pricing:not(.btn-pricing-featured) {
  color: #FFFFFF;
  border-color: rgba(255,255,255,.45);
  background: transparent;
}
.hero .btn-ghost:hover, .pg-hero .btn-ghost:hover, .cta-section .btn-ghost:hover,
.hero .btn-pricing:not(.btn-pricing-featured):hover,
.cta-section .btn-pricing:not(.btn-pricing-featured):hover {
  color: var(--navy-700);
  background: #FFFFFF;
  border-color: #FFFFFF;
}
/* tick plates on navy */
.hero .check-ico {
  color: #FFFFFF;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.26);
}
/* NB: the device-panel components are defined once further down using tokens;
   because they only ever render inside .hero they pick up the inverted context
   automatically and need no duplicate rules here. */

/* ---------------------------------------------------------------------------
   LEGACY TOKEN ALIASES
   ~150 inline style="…var(--x)…" references in the page templates still point
   at the previous system. Re-pointed here rather than edited out of the markup,
   because touching those attributes means touching the templates that render
   the copy.
   --------------------------------------------------------------------------- */
:root, .itv-header, .hero, .pg-hero, .cta-section, .sec-dark {
  --text-1: var(--fg-1);
  --text-2: var(--fg-2);
  --text-3: var(--fg-3);

  --bg-root:    var(--ink-900);
  --bg-alt:     var(--ink-850);
  --bg-card:    var(--ink-800);
  --bg-surface: var(--glass);

  --border:       var(--line);
  --border-hover: var(--line-ember);

  /* These resolve through --ember-400, so they follow the context: the darker
     #207393 on the light ground (AA), the lighter #2A99C5 on navy. */
  --blue:         var(--teal-600);
  --blue-light:   var(--ember-400);
  --blue-dark:    var(--teal-700);
  --purple:       var(--navy-600);
  --purple-light: var(--ember-400);
  --purple-dark:  var(--navy-700);
  --cyan:         var(--teal-600);
  --cyan-light:   var(--ember-400);

  --green:        var(--ok);
  --green-light:  var(--ok);
  --orange:       var(--warn);
  --orange-light: var(--warn);
  --red:          var(--bad);

  --grad-primary: var(--grad-ember);
  --grad-cta:     var(--grad-ember);
  --grad-hero:
      radial-gradient(ellipse 90% 70% at 50% -5%, rgba(32,115,147,.20) 0%, transparent 70%),
      radial-gradient(ellipse 60% 50% at 85% 60%, rgba(42,153,197,.12) 0%, transparent 60%);

  --font-heading: var(--font-display);

  --shadow-card:       var(--lift-1);
  --shadow-card-hover: var(--lift-2);
  --shadow-glow:       var(--lift-ember);
  --shadow-btn:        var(--lift-ember);
}

/* AVIF where supported — the WebP declarations above stay as the fallback. */
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  :root {
    --img-atmosphere: image-set(url('../img/forge/iron-tv-pro-hero-atmosphere.avif') type('image/avif'),
                                url('../img/forge/iron-tv-pro-hero-atmosphere.webp') type('image/webp'));
    --img-mesh:       image-set(url('../img/forge/iron-tv-pro-teal-wash.avif') type('image/avif'),
                                url('../img/forge/iron-tv-pro-teal-wash.webp') type('image/webp'));
    --img-grain:      image-set(url('../img/forge/iron-tv-pro-film-grain.avif') type('image/avif'),
                                url('../img/forge/iron-tv-pro-film-grain.webp') type('image/webp'));
    --img-grid:       image-set(url('../img/forge/iron-tv-pro-screen-grid.avif') type('image/avif'),
                                url('../img/forge/iron-tv-pro-screen-grid.webp') type('image/webp'));
  }
}

/* ==========================================================================
   03  RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body.irontv-page,
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.68;
  color: var(--body-text);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  text-rendering: optimizeLegibility;
}

/* Film grain belongs only on the navy zones — on the light ground it would
   just add dirt. Applied per-zone rather than as a page-wide veil. */
.hero::after,
.pg-hero::after,
.cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--img-grain);
  background-size: 128px 128px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: .05;
}
.hero > *, .pg-hero > *, .cta-section > * { position: relative; z-index: 1; }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
/* nothing may exceed the viewport, whatever a component asks for */
img, svg, video, canvas, iframe, table, pre { max-inline-size: 100%; }
svg { fill: currentColor; }

a {
  color: var(--ember-400);
  text-decoration: none;
  transition: color var(--tr-fast);
}
a:hover { color: var(--ember-300); }
/* :visited is handled centrally in section 23c — it cannot use tokens. */

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }

::selection { background: var(--teal-600); color: #fff; }

/* Scrollbar — thin, ember thumb */
* { scrollbar-width: thin; scrollbar-color: var(--mist-line-2) var(--mist); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--mist); }
::-webkit-scrollbar-thumb {
  background: var(--mist-line-2);
  border-radius: var(--r-full);
  border: 2px solid var(--mist);
}
::-webkit-scrollbar-thumb:hover { background: var(--teal-600); }

/* ==========================================================================
   04  TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  color: var(--fg-1);
  line-height: 1.16;
  letter-spacing: -.02em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -.032em; }
h2 { font-size: var(--t-h2); font-weight: 700; letter-spacing: -.026em; }
h3 { font-size: var(--t-h3); font-weight: 600; }
h4 { font-size: var(--t-h4); font-weight: 600; }
h5, h6 { font-size: var(--t-md); font-weight: 600; }

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { color: var(--fg-1); font-weight: 600; }
small { font-size: var(--t-sm); }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25em; }
li { margin-bottom: var(--s-2); }

blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-6);
  border-left: 2px solid var(--ember-500);
  background: var(--glass);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--fg-1);
  font-style: normal;
}

code, kbd, pre, samp {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  font-size: .9em;
}
code {
  background: var(--ink-750);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: .12em .42em;
  color: var(--ember-300);
}

/* Ember-to-steel gradient text — the signature headline treatment. */
.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ember-400);        /* fallback if clip unsupported */
  display: inline-block;
}

/* Numerals align in columns wherever they matter. */
.stat-num, .pc-price, .pc-amount, .pc-decimals, .badge-val,
.price, .amount, .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   05  LAYOUT PRIMITIVES
   ========================================================================== */
.itv-container {
  width: 100%;
  max-width: var(--cw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sec-py { padding-block: var(--sec-py); }

/* Alternating ground tones give the page a rhythm without hard rules. */
.sec-root { background: var(--ink-900); position: relative; }
.sec-alt  { background: var(--ink-850); position: relative; }

/* Hairline seam between adjacent bands. */
.sec-alt::before,
.sec-root + .sec-root::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
}

/* Ember wash on alternating bands — the generated mesh asset. */
.sec-alt::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--img-mesh);
  background-size: cover;
  background-position: center;
  opacity: .28;
  mix-blend-mode: normal;
}
.sec-alt > * { position: relative; z-index: 1; }

/* --- section header --------------------------------------------------- */
.sec-header {
  max-width: 760px;
  margin: 0 auto var(--s-10);
  text-align: center;
}
/* The reference sets section headings uppercase, Poppins 600, navy. */
.sec-title, .section-title, .iprotv-section-title {
  font-size: var(--t-h2);
  margin-bottom: var(--s-4);
  text-transform: uppercase;
  letter-spacing: .005em;
  font-weight: 600;
  color: var(--ink-text);
}
.sec-desc {
  font-size: var(--t-md);
  color: var(--fg-2);
  margin: 0;
}
.sec-desc a { color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; }
.sec-desc a:hover { color: var(--ember-400); }

/* ==========================================================================
   06  COMPONENTS — BUTTONS
   Dark text on ember reads as premium and clears WCAG AA comfortably
   (≈7.4:1), where white on orange would not.

   The legacy netfix sheet decorates every .btn with an uppercase transform, a
   Font Awesome arrow in ::after and a circle-wipe in ::before. Those belong to
   the old theme's language, and the uppercase transform also overrode the copy
   as it was actually authored (it swallowed the leading emoji in the hero CTA).
   Reset all three here so the button is fully described by this file.
   ========================================================================== */
.btn::after,
.btn::before,
.site-btn::after, .site-btn::before,
.brand-btn::after, .brand-btn::before {
  content: none !important;
  display: none !important;
}
.btn {
  text-transform: none;
  overflow: visible;
  white-space: normal;
}

.btn,
a.btn,
button.btn {
  --btn-py: 13px;
  --btn-px: 26px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .002em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--tr-fast), box-shadow var(--tr-base),
              background-color var(--tr-base), border-color var(--tr-base),
              color var(--tr-base);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

/* primary — molten */
/* Measured on the reference: flat #207393, white label, 5px radius, no shadow,
   lighter #2A99C5 on the secondary button. */
.btn-primary,
a.btn-primary {
  background: var(--teal-600);
  color: #FFFFFF;
  box-shadow: none;
}
.btn-primary:hover,
a.btn-primary:hover {
  color: #FFFFFF;
  background: var(--teal-500);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(32,115,147,.55);
}

/* ghost — hairline */
.btn-ghost,
a.btn-ghost {
  background: transparent;
  color: var(--teal-600);
  border-color: var(--teal-600);
}
.btn-ghost:hover,
a.btn-ghost:hover {
  color: #FFFFFF;
  background: var(--teal-600);
  border-color: var(--teal-600);
  transform: translateY(-1px);
}

/* pricing — default is restrained, featured is molten */
.btn-pricing,
a.btn-pricing {
  width: 100%;
  max-width: 280px;
  padding: 13px 22px;
  font-size: var(--t-base);
  background: transparent;
  color: var(--teal-600);
  border-color: var(--teal-600);
}
.btn-pricing:hover,
a.btn-pricing:hover {
  color: #FFFFFF;
  border-color: var(--teal-600);
  background: var(--teal-600);
  transform: translateY(-1px);
}
.btn-pricing-featured,
a.btn-pricing-featured {
  background: var(--teal-600);
  color: #FFFFFF;
  border-color: var(--teal-600);
  box-shadow: none;
}
.btn-pricing-featured:hover,
a.btn-pricing-featured:hover {
  color: #FFFFFF;
  background: var(--teal-500);
  border-color: var(--teal-500);
}

/* whatsapp */
.btn-wa, a.btn-wa {
  background: var(--wa);
  color: var(--on-wa);
  box-shadow: 0 10px 30px -10px rgba(37,211,102,.55), var(--edge);
}
.btn-wa:hover, a.btn-wa:hover {
  color: var(--on-wa);
  background: var(--wa-hover);
  transform: translateY(-2px);
}

/* cta / site / brand aliases used by legacy templates */
.btn-cta, .site-btn, .brand-btn, .cart-btn, .k-cart-btn, .rev-btn,
a.btn-cta, a.site-btn, a.brand-btn, a.cart-btn, a.k-cart-btn, a.rev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--teal-600);
  color: #FFFFFF;
  box-shadow: none;
  cursor: pointer;
  transition: transform var(--tr-fast), background-color var(--tr-base);
}
.btn-cta:hover, .site-btn:hover, .brand-btn:hover,
.cart-btn:hover, .k-cart-btn:hover, .rev-btn:hover {
  color: #FFFFFF;
  background: var(--teal-500);
  transform: translateY(-1px);
}

.transparent-btn, a.transparent-btn {
  background: transparent;
  color: var(--fg-1);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.transparent-btn:hover { border-color: var(--line-ember); color: var(--fg-1); }

/* sizes */
.btn-lg  { --btn-py: 16px; --btn-px: 34px; font-size: var(--t-md); }
.btn-sm  { --btn-py: 9px;  --btn-px: 18px; font-size: var(--t-sm); }
.btn-full { width: 100%; max-width: none; }

.btn[disabled], .btn:disabled, .btn.loading {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* ==========================================================================
   07  COMPONENTS — BADGES, RULES, PANELS
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  margin-bottom: var(--s-5);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--teal-600);
  background: var(--teal-100);
  border: 1px solid var(--teal-200);
  border-radius: var(--r-full);
  white-space: nowrap;
  max-width: 100%;
}
/* Long eyebrow copy must wrap rather than run past the gutter on a phone. */
@media (max-width: 640px) {
  .badge {
    white-space: normal;
    text-align: left;
    line-height: 1.4;
    border-radius: var(--r-md);
  }
  .badge::before { align-self: flex-start; margin-top: 3px; }
}
.badge::before {
  content: '';
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--grad-rule);
  flex: none;
}
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ember-400);
  box-shadow: 0 0 0 3px rgba(32,115,147,.18);
  flex: none;
  animation: forge-pulse 2.4s var(--ease) infinite;
}
/* the badge already carries an ember rule; hide the duplicate when a dot is used */
.hero-eyebrow .badge::before { display: none; }

@keyframes forge-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 3px rgba(32,115,147,.18); }
  50%      { opacity: .68; box-shadow: 0 0 0 6px rgba(32,115,147,.05); }
}

/* Panel: the base surface for every card in the system. Hairline border,
   a single top highlight, no glow. */
/* Reference card: white, 5px radius, rgba(0,0,0,.15) 0 2px 20px, no border. */
.panel,
.why-card, .device-card, .app-card, .install-step, .pricing-card,
.faq-item, .seo-link-box, .iprotv-benefit-card, .iprotv-link-card,
.stat-item {
  position: relative;
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  box-shadow: var(--lift-2);
  transition: border-color var(--tr-base), transform var(--tr-base),
              box-shadow var(--tr-base), background-color var(--tr-base);
}

/* ==========================================================================
   08  HEADER & NAVIGATION
   ========================================================================== */
.itv-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Reference measures rgba(27,45,66,.59). That only holds up because a dark
     photo sits behind it at all times; over our light content the measured
     #B2B7BB nav links dropped to 2.0:1. Same hue, raised opacity — nav links
     land at ~6.4:1 while the bar still reads as the reference's navy. */
  background: rgba(27,45,66,.90);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--tr-base), border-color var(--tr-base),
              box-shadow var(--tr-base);
}
/* The reference keeps one constant bar; scrolled only firms it up slightly. */
.itv-header.scrolled {
  background: rgba(27,45,66,.96);
  border-bottom-color: rgba(255,255,255,.10);
  box-shadow: 0 6px 24px -14px rgba(11,21,32,.75);
}

.itv-nav {
  max-width: var(--cw);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

.itv-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--fg-1);
}
.itv-logo img { width: auto; height: 38px; object-fit: contain; }

/* Wordmark fallback — engineered, tightly tracked, with an ember bar. */
.itv-logo-wordmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: .11em;
  color: var(--fg-1);
  text-transform: uppercase;
}
.itv-logo-wordmark::before {
  content: '';
  width: 3px;
  height: 19px;
  border-radius: 2px;
  background: var(--grad-rule);
  box-shadow: 0 0 12px rgba(32,115,147,.6);
}

.itv-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.itv-menu li { margin: 0; }
.itv-menu a {
  position: relative;
  display: block;
  padding: 9px 13px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--fg-2);
  border-radius: var(--r-xs);
  transition: color var(--tr-fast), background-color var(--tr-fast);
}
.itv-menu a:hover { color: var(--fg-1); background: var(--glass); }
/* underline grows from the centre */
.itv-menu a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-rule);
  transform: translateX(-50%);
  transition: width var(--tr-base);
}
.itv-menu a:hover::after { width: 22px; }

.itv-nav-end { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.itv-nav-cta { --btn-py: 10px; --btn-px: 20px; font-size: var(--t-sm); }

/* --- hamburger --- */
.itv-hamburger {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--glass);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.itv-hamburger span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--fg-1);
  transition: transform var(--tr-base), opacity var(--tr-fast), top var(--tr-base);
}
.itv-hamburger span:nth-child(1) { top: 14px; }
.itv-hamburger span:nth-child(2) { top: 20px; }
.itv-hamburger span:nth-child(3) { top: 26px; }
.itv-hamburger.open span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.itv-hamburger.open span:nth-child(2) { opacity: 0; }
.itv-hamburger.open span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* --- mobile drawer --- */
.itv-mobile-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  padding: 84px var(--gutter) var(--s-8);
  background: rgba(27,45,66,.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-102%);
  visibility: hidden;
  transition: transform var(--tr-slow), visibility var(--tr-slow);
  max-height: 100dvh;
  overflow-y: auto;
}
.itv-mobile-nav.open { transform: translateY(0); visibility: visible; }
.itv-mobile-nav ul { margin: 0 0 var(--s-6); padding: 0; list-style: none; }
.itv-mobile-nav li { margin: 0; border-bottom: 1px solid var(--line); }
.itv-mobile-nav a {
  display: block;
  padding: 15px 2px;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--fg-1);
}
.itv-mobile-nav a:hover { color: var(--ember-400); }
.itv-mobile-nav .btn { width: 100%; }

/* ==========================================================================
   09  HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 6vw, 104px) clamp(64px, 6.5vw, 120px);
  background: var(--navy-700);
  isolation: isolate;
}

.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Generated cinematic atmosphere — decorative background image. */
.hero-bg-grad {
  position: absolute;
  inset: -10% -5%;
  background-image: var(--img-atmosphere);
  background-size: cover;
  background-position: 32% 60%;
  opacity: .92;
}
/* Technical lattice, faint. */
.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image: var(--img-grid);
  background-size: 96px 96px;
  background-repeat: repeat;
  opacity: .5;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 32%, #000 25%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 32%, #000 25%, transparent 82%);
}
/* The reference lays a flat teal wash over its hero imagery at 32% — measured.
   Reproduced here over our own generated atmosphere. */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--teal-600);
  opacity: .32;
}
/* Fade the atmosphere into the light band that follows. */
.hero-bg::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, var(--navy-700));
}

/* Ambient orbs — soft, slow, never distracting. */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .40;
  will-change: transform;
}
.orb-1 {
  width: 34vw; height: 34vw; max-width: 460px; max-height: 460px;
  left: -6%; bottom: -12%;
  background: radial-gradient(circle, rgba(42,153,197,.50), transparent 66%);
  animation: forge-drift-a 22s var(--ease) infinite alternate;
}
.orb-2 {
  width: 26vw; height: 26vw; max-width: 360px; max-height: 360px;
  right: -4%; top: -8%;
  background: radial-gradient(circle, rgba(32,115,147,.55), transparent 68%);
  animation: forge-drift-b 26s var(--ease) infinite alternate;
}
.orb-3 {
  width: 20vw; height: 20vw; max-width: 280px; max-height: 280px;
  right: 26%; bottom: 4%;
  background: radial-gradient(circle, rgba(79,179,217,.30), transparent 70%);
  animation: forge-drift-a 30s var(--ease) infinite alternate-reverse;
}
@keyframes forge-drift-a {
  from { transform: translate3d(0,0,0)      scale(1); }
  to   { transform: translate3d(4%,-5%,0)   scale(1.1); }
}
@keyframes forge-drift-b {
  from { transform: translate3d(0,0,0)      scale(1); }
  to   { transform: translate3d(-5%,6%,0)   scale(1.08); }
}

.hero-inner {
  max-width: var(--cw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.hero-copy { min-width: 0; }
.hero-eyebrow { margin-bottom: var(--s-2); }

.hero-title {
  font-size: var(--t-mega);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.034em;
  margin-bottom: var(--s-5);
  color: var(--fg-1);
  text-wrap: balance;
}
/* The markup already carries a <br> between the two halves of the headline —
   leave .gradient-text inline so we don't add a second, empty line. */
.hero-title .gradient-text { display: inline; }

.hero-lead {
  max-width: 58ch;
  font-size: var(--t-lg);
  line-height: 1.66;
  color: var(--fg-2);
  margin-bottom: var(--s-6);
}

.hero-checks { margin: 0 0 var(--s-7); padding: 0; list-style: none; display: grid; gap: 11px; }
.hero-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  font-size: var(--t-base);
  color: var(--fg-2);
}
.check-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ember-300);
  background: rgba(32,115,147,.11);
  border: 1px solid rgba(32,115,147,.28);
  border-radius: var(--r-xs);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-7); }
.hero-actions .btn-pricing { width: auto; max-width: none; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--fg-3);
}
.trust-item { display: inline-flex; align-items: center; gap: 7px; }
.stars { color: var(--warn); letter-spacing: .1em; font-size: var(--t-sm); }

/* --- hero visual: an engineered device panel (decorative) --------------- */
.hero-visual { min-width: 0; display: flex; justify-content: center; }

.tv-frame {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 12px;
  background: linear-gradient(160deg, var(--navy-600), var(--navy-850));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-xl);
  box-shadow: var(--lift-3), var(--edge);
}
/* ember rim light along the top edge */
.tv-frame::before {
  content: '';
  position: absolute;
  inset-inline: 16%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember-400), transparent);
}

.tv-screen {
  border-radius: var(--r-md);
  background: linear-gradient(170deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--line);
  padding: 14px;
  overflow: hidden;
}

.tv-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.tv-brand {
  font-family: var(--font-display);
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.tv-dots { display: flex; gap: 5px; }
.tv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-600); }
.tv-dot:first-child { background: var(--ember-600); }

.tv-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.tv-thumb {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.tv-thumb.big { grid-column: span 3; aspect-ratio: 16 / 7; }
/* markup gives us 1 wide tile + 5 small ones; let the last one fill the gap */
.tv-thumb:last-child { grid-column: span 2; }
.tv-thumb.big::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 90% at 26% 88%, rgba(32,115,147,.30), transparent 62%);
}
/* slow sheen sweeping across the tiles */
.tv-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.055) 50%, transparent 68%);
  transform: translateX(-120%);
  animation: forge-sheen 5.5s var(--ease) infinite;
}
.tv-thumb:nth-child(2)::before { animation-delay: .5s; }
.tv-thumb:nth-child(3)::before { animation-delay: 1s; }
.tv-thumb:nth-child(4)::before { animation-delay: 1.5s; }
.tv-thumb:nth-child(5)::before { animation-delay: 2s; }
.tv-thumb:nth-child(6)::before { animation-delay: 2.5s; }
@keyframes forge-sheen {
  0%, 55% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}

/* floating metric plates */
.tv-badge {
  position: absolute;
  padding: 12px 16px;
  background: rgba(21,36,54,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--lift-2);
  animation: forge-float 6s var(--ease) infinite alternate;
}
.tv-badge-1 { left: -18px;  top: 16%; }
.tv-badge-2 { right: -18px; bottom: 14%; animation-delay: 1.6s; }
.badge-lbl {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 3px;
}
.badge-val {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 700;
  line-height: 1;
  color: var(--ember-400);
}
@keyframes forge-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-9px); }
}

/* ==========================================================================
   10  STATS
   ========================================================================== */
.stats-bar {
  background: var(--ink-850);
  border-block: 1px solid var(--line);
  padding-block: clamp(32px, 3.4vw, 56px);
  position: relative;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.stat-item {
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: center;
  padding: var(--s-3) var(--s-2);
  position: relative;
}
/* hairline separators instead of boxes */
.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  height: 76%;
  width: 1px;
  background: var(--line);
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: 6px;
}
.stat-label {
  font-size: var(--t-sm);
  color: var(--body-text);
  line-height: 1.45;
}

/* ==========================================================================
   11  FEATURE GRIDS
   ========================================================================== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
}
.why-card { padding: var(--s-7) var(--s-6); }
.why-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--lift-2), var(--edge);
}
/* ember rule that draws in on hover */
.why-card::before {
  content: '';
  position: absolute;
  left: var(--s-6);
  top: 0;
  width: 0;
  height: 2px;
  background: var(--grad-rule);
  border-radius: 0 0 2px 2px;
  transition: width var(--tr-slow);
}
.why-card:hover::before { width: 46px; }

.why-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--s-5);
  font-size: 24px;
  line-height: 1;
  border-radius: var(--r-md);
  background: var(--ink-750);
  border: 1px solid var(--line);
  transition: transform var(--tr-base), border-color var(--tr-base);
}
.why-card:hover .why-icon { transform: translateY(-2px); border-color: var(--line-ember); }

/* icon accents keep the original colour semantics, restated in the new palette */
.ic-blue   { box-shadow: inset 0 0 0 1px rgba(117,146,180,.30), 0 8px 20px -12px rgba(117,146,180,.55); }
.ic-cyan   { box-shadow: inset 0 0 0 1px rgba(157,180,206,.30), 0 8px 20px -12px rgba(157,180,206,.55); }
.ic-purple { box-shadow: inset 0 0 0 1px rgba(198,214,230,.24), 0 8px 20px -12px rgba(198,214,230,.42); }
.ic-green  { box-shadow: inset 0 0 0 1px rgba(63,191,127,.30),  0 8px 20px -12px rgba(63,191,127,.50); }
.ic-orange { box-shadow: inset 0 0 0 1px rgba(32,115,147,.34),  0 8px 20px -12px rgba(32,115,147,.60); }
.ic-red    { box-shadow: inset 0 0 0 1px rgba(229,72,77,.30),   0 8px 20px -12px rgba(229,72,77,.50); }

.why-title { font-size: var(--t-h4); margin-bottom: var(--s-3); color: var(--fg-1); }
.why-desc  { font-size: var(--t-base); color: var(--fg-2); margin: 0; }

/* --- devices ----------------------------------------------------------- */
.devices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-4);
}
.device-card { padding: var(--s-6) var(--s-5); text-align: center; }
.device-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-ember);
  background: var(--ink-750);
}
.device-emoji { display: block; font-size: 30px; line-height: 1; margin-bottom: var(--s-3); }
.device-name  { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; color: var(--fg-1); margin-bottom: 5px; }
.device-desc  { font-size: var(--t-sm); color: var(--fg-3); line-height: 1.5; }

/* --- app cards / benefit cards / link cards (inner pages) ---------------- */
.app-grid, .iprotv-benefits-grid, .iprotv-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s-5);
}
.app-card, .iprotv-benefit-card, .iprotv-link-card { padding: var(--s-6); }
.app-card:hover, .iprotv-benefit-card:hover, .iprotv-link-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-ember);
}
.app-emoji, .iprotv-benefit-icon, .iprotv-link-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--s-4);
  font-size: 22px;
  border-radius: var(--r-md);
  background: var(--ink-750);
  border: 1px solid var(--line);
}
.app-name { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; color: var(--fg-1); margin-bottom: 6px; }
.app-desc { font-size: var(--t-sm); color: var(--fg-2); margin: 0; }

.split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

/* ==========================================================================
   12  PRICING
   ========================================================================== */
.pricing-toggle-wrap {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin: 0 auto var(--s-9);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.ptoggle-btn {
  padding: 10px 26px;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--body-text);
  background: transparent;
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: color var(--tr-fast), background-color var(--tr-base), box-shadow var(--tr-base);
}
.ptoggle-btn:hover { color: var(--fg-1); }
.ptoggle-btn.active {
  color: var(--fg-inv);
  background: var(--grad-ember);
  box-shadow: var(--lift-1);
}

.pricing-panel { display: none; }
.pricing-panel.active { display: block; animation: forge-fade .38s var(--ease-out) both; }
@keyframes forge-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Top padding reserves the badge strip on EVERY card, so the plan name, the
     price and the CTA all sit on the same baseline across the row whether or
     not a given card is badged. */
  padding: 56px var(--s-6) var(--s-7);
  overflow: hidden;
}
.pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--lift-2), var(--edge);
}

/* Featured plan: ember-lit, lifted, with a molten top rail. */
.pricing-card.featured {
  background: linear-gradient(180deg, rgba(32,115,147,.06), transparent 46%), var(--paper);
  border-color: rgba(32,115,147,.34);
  box-shadow: var(--lift-2), 0 0 0 1px rgba(32,115,147,.10), var(--edge);
}
.pricing-card.featured::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--grad-ember);
}
.pricing-card.featured:hover {
  border-color: rgba(32,115,147,.5);
  box-shadow: var(--lift-3), 0 0 0 1px rgba(32,115,147,.18), var(--edge);
}

.featured-badge {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 14px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-inv);
  background: var(--grad-ember);
  border-radius: var(--r-full);
  box-shadow: var(--lift-1);
  white-space: nowrap;
}

.pc-duration {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--fg-2);
  margin-bottom: var(--s-4);
}

.pc-price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-display);
  color: var(--fg-1);
  line-height: 1;
  margin-bottom: 6px;
}
.pc-currency {
  font-size: var(--t-h4);
  font-weight: 600;
  color: var(--ember-400);
  margin-top: .34em;
}
.pc-amount   { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem); font-weight: 700; letter-spacing: -.04em; color: var(--teal-600); }
.pc-decimals { font-size: var(--t-h4); font-weight: 700; margin-top: .32em; color: var(--teal-600); }

.pc-monthly {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--teal-600);
  margin-bottom: 4px;
}
.pc-period {
  font-size: var(--t-xs);
  color: var(--fg-3);
  margin-bottom: var(--s-5);
}
.pc-divider {
  width: 100%;
  height: 1px;
  margin-bottom: var(--s-5);
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.pc-features {
  width: 100%;
  margin: 0 0 var(--s-7);
  padding: 0;
  list-style: none;
  text-align: left;
  display: grid;
  gap: 10px;
}
.pc-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: var(--t-sm);
  color: var(--fg-2);
  line-height: 1.5;
}
.pc-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ember-300);
  background: rgba(32,115,147,.11);
  border-radius: var(--r-xs);
}
.pricing-card .btn { margin-top: auto; }

/* ==========================================================================
   13  EDITORIAL & LONG-FORM CONTENT
   Long SEO copy gets a measured column and clear hierarchy — the biggest
   readability win on the whole site.
   ========================================================================== */
.seo-content {
  max-width: 76ch;
  margin-inline: auto;
  font-size: var(--t-md);
  line-height: 1.78;
  color: var(--fg-2);
}
.seo-content > p { margin-bottom: var(--s-5); }
.seo-content h3 {
  position: relative;
  margin: var(--s-9) 0 var(--s-4);
  padding-left: var(--s-4);
  font-size: var(--t-h3);
  color: var(--fg-1);
}
.seo-content h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: .18em;
  width: 3px;
  height: 1.05em;
  border-radius: 2px;
  background: var(--grad-rule);
}
.seo-content a {
  color: var(--ember-300);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(32,115,147,.4);
}
.seo-content a:hover { color: var(--ember-200); text-decoration-color: var(--ember-400); }

.seo-link-box {
  margin-top: var(--s-9);
  padding: var(--s-7);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ember-500);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.seo-link-box > p { color: var(--fg-1); margin-bottom: var(--s-4); }
.seo-link-box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.seo-link-box li {
  margin: 0;
  padding-left: var(--s-5);
  position: relative;
  font-size: var(--t-base);
  color: var(--fg-3);
}
.seo-link-box li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ember-500);
  transform: rotate(45deg);
}
.seo-link-box a { font-weight: 600; }

/* ==========================================================================
   14  INSTALL STEPS
   ========================================================================== */
.install-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s-5);
  counter-reset: forge-step;
}
.install-step { padding: var(--s-7) var(--s-6); }
.install-step:hover { transform: translateY(-3px); border-color: var(--line-ember); }

/* connector rail between steps on wide screens */
@media (min-width: 1000px) {
  .install-grid { position: relative; }
  .install-step::after {
    content: '';
    position: absolute;
    right: calc(var(--s-5) * -1);
    top: calc(var(--s-7) + 21px);
    width: var(--s-5);
    height: 1px;
    background: var(--line-strong);
  }
  .install-step:last-child::after { display: none; }
}

.install-num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 800;
  color: var(--ember-300);
  background: rgba(32,115,147,.09);
  border: 1px solid rgba(32,115,147,.28);
  border-radius: var(--r-md);
}
.install-title { font-size: var(--t-h4); margin-bottom: var(--s-3); color: var(--fg-1); }
.install-desc  { font-size: var(--t-base); color: var(--fg-2); margin: 0; }

/* step-row / step-list variant used by the guide template */
.step-list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.step-row {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
  margin: 0;
  padding: var(--s-6);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1), var(--edge);
  transition: border-color var(--tr-base), transform var(--tr-base);
}
.step-row:hover { border-color: var(--line-ember); transform: translateX(3px); }
.step-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 800;
  color: var(--ember-300);
  background: rgba(32,115,147,.09);
  border: 1px solid rgba(32,115,147,.26);
  border-radius: var(--r-sm);
}
.step-body { min-width: 0; }
.step-body h3, .step-body h4 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.step-body p { font-size: var(--t-base); color: var(--fg-2); margin: 0; }

/* ==========================================================================
   15  FAQ
   ========================================================================== */
.faq-list, .iprotv-faq-list {
  max-width: 880px;
  margin-inline: auto;
  display: grid;
  gap: var(--s-3);
}
.faq-item { overflow: hidden; }
.faq-item:hover { border-color: var(--line-strong); }
.faq-item.open {
  border-color: rgba(32,115,147,.30);
  background: var(--ink-750);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  cursor: pointer;
  user-select: none;
}
.faq-q h3, .faq-q h4 {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--fg-1);
  line-height: 1.45;
  letter-spacing: -.01em;
}
.faq-item.open .faq-q h3 { color: var(--ember-300); }

.faq-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  color: var(--fg-2);
  background: var(--ink-750);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: transform var(--tr-base), background-color var(--tr-base), color var(--tr-base);
}
.faq-item.open .faq-icon {
  transform: rotate(135deg);
  color: var(--fg-inv);
  background: var(--ember-500);
  border-color: transparent;
}

/* grid-template-rows animates height without a fixed max-height guess */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--tr-slow);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner {
  overflow: hidden;
  min-height: 0;
  font-size: var(--t-base);
  color: var(--fg-2);
  line-height: 1.72;
}
.faq-item.open .faq-a-inner { padding: 0 var(--s-6) var(--s-6); }
.faq-a-inner a { color: var(--ember-300); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   16  CTA BAND
   ========================================================================== */
.cta-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--sec-py);
  background: var(--navy-700);
  border-top: 1px solid var(--line);
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--img-mesh);
  background-size: cover;
  background-position: center;
  opacity: .3;
  mix-blend-mode: screen;
}
.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.cta-title {
  font-size: var(--t-h2);
  margin-bottom: var(--s-4);
  line-height: 1.16;
}
.cta-desc {
  font-size: var(--t-md);
  color: var(--fg-2);
  margin-bottom: var(--s-7);
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

/* ==========================================================================
   17  FOOTER & FLOATING ACTIONS
   ========================================================================== */
/* The reference footer sits on the light #F2F5F7 band, not on navy. */
.itv-footer {
  background: var(--mist);
  border-top: 1px solid var(--mist-line);
  padding-top: clamp(48px, 4.6vw, 84px);
  color: var(--body-text);
}
/* reference footer: navy column headings, teal links */
.itv-footer .footer-col h4,
.itv-footer .footer-widget h4,
.itv-footer .footer-brand-logo,
.itv-footer .footer-logo { color: var(--navy-700); }
.itv-footer .footer-links a,
.itv-footer .footer-legal a { color: var(--teal-600); }
.itv-footer .footer-links a:hover,
.itv-footer .footer-legal a:hover { color: var(--teal-500); }
.itv-footer .footer-brand p,
.itv-footer .footer-copy { color: var(--body-text); }
.itv-footer .footer-social a {
  color: var(--teal-600);
  background: var(--paper);
  border-color: var(--mist-line);
}
.itv-footer .footer-social a:hover {
  color: var(--paper);
  background: var(--teal-600);
  border-color: var(--teal-600);
}
.itv-footer .footer-bottom { border-top-color: var(--mist-line); }
.footer-body {
  max-width: var(--cw);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(36px, 3.6vw, 60px);
  display: grid;
  grid-template-columns: 1.65fr repeat(3, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
}

.footer-brand { max-width: 40ch; }
.footer-brand-logo, .footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: var(--s-4);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.footer-brand-logo::before {
  content: '';
  width: 3px;
  height: 19px;
  border-radius: 2px;
  background: var(--grad-rule);
}
.footer-brand p { font-size: var(--t-sm); line-height: 1.72; color: var(--fg-3); }

.footer-social { display: flex; gap: 9px; margin-top: var(--s-5); }
.footer-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--fg-2);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: color var(--tr-fast), border-color var(--tr-base),
              transform var(--tr-base), background-color var(--tr-base);
}
.footer-social a:hover {
  color: var(--ember-300);
  border-color: var(--line-ember);
  background: var(--ink-750);
  transform: translateY(-2px);
}

.footer-col h4, .footer-widget h4 {
  margin-bottom: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.footer-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.footer-links li { margin: 0; }
.footer-links a {
  font-size: var(--t-sm);
  color: var(--fg-3);
  transition: color var(--tr-fast), padding-left var(--tr-base);
}
.footer-links a:hover { color: var(--ember-300); padding-left: 5px; }

.footer-bottom {
  max-width: var(--cw);
  margin-inline: auto;
  padding: var(--s-5) var(--gutter);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.footer-copy { margin: 0; font-size: var(--t-sm); color: var(--fg-3); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer-legal a { font-size: var(--t-sm); color: var(--fg-3); }
.footer-legal a:hover { color: var(--ember-300); }

/* --- floating actions --- */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 998;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: var(--on-wa);
  background: var(--wa);
  border-radius: var(--r-full);
  box-shadow: 0 10px 30px -8px rgba(37,211,102,.6), var(--edge);
  transition: transform var(--tr-base), box-shadow var(--tr-base);
}
.wa-float:hover {
  color: var(--on-wa);
  transform: scale(1.07) translateY(-2px);
  box-shadow: 0 16px 40px -10px rgba(37,211,102,.75);
}
/* single calm halo */
.wa-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(37,211,102,.5);
  animation: forge-halo 2.8s var(--ease-out) infinite;
}
@keyframes forge-halo {
  0%   { transform: scale(1);    opacity: .7; }
  100% { transform: scale(1.45); opacity: 0; }
}

.itv-scroll-top {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 997;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: var(--fg-2);
  background: rgba(16,21,30,.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--tr-base), visibility var(--tr-base),
              transform var(--tr-base), color var(--tr-fast), border-color var(--tr-base);
}
.itv-scroll-top.show { opacity: 1; visibility: visible; transform: none; }
.itv-scroll-top:hover { color: var(--ember-300); border-color: var(--line-ember); }

/* ==========================================================================
   18  INNER PAGE SHELL (pg-*)
   ========================================================================== */
.pg-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 5.5vw, 104px) clamp(40px, 4vw, 72px);
  background: var(--navy-700);
  border-bottom: 1px solid var(--line);
}
.pg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--img-atmosphere);
  background-size: cover;
  background-position: 40% 70%;
  opacity: .5;
}
/* same teal wash recipe as the main hero */
.pg-hero::before { opacity: .5; }
.pg-hero > .pg-hero-inner { position: relative; z-index: 2; }
.pg-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.pg-title {
  font-size: var(--t-h1);
  margin-bottom: var(--s-4);
}
.pg-desc {
  font-size: var(--t-md);
  color: var(--fg-2);
  max-width: 68ch;
  margin-inline: auto;
}
.pg-section { padding-block: var(--sec-py); position: relative; }

.section-header { text-align: center; margin-bottom: var(--s-9); }
.section-title, .iprotv-section-title {
  font-size: var(--t-h2);
  margin-bottom: var(--s-4);
}

/* Long-form legal / policy pages — WordPress-authored content. */
.entry-content, .post-text, .standard-blog-content, .custom-content {
  max-width: 76ch;
  margin-inline: auto;
  font-size: var(--t-md);
  line-height: 1.78;
  color: var(--fg-2);
}
.entry-content h2, .post-text h2 { margin: var(--s-9) 0 var(--s-4); font-size: var(--t-h2); }
.entry-content h3, .post-text h3 { margin: var(--s-8) 0 var(--s-3); font-size: var(--t-h3); }
.entry-content h4, .post-text h4 { margin: var(--s-7) 0 var(--s-3); }
.entry-content ul, .entry-content ol,
.post-text ul, .post-text ol { padding-left: 1.3em; margin-bottom: var(--s-5); }
.entry-content li, .post-text li { margin-bottom: 9px; }
.entry-content a, .post-text a {
  color: var(--ember-300);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entry-content img, .post-text img { border-radius: var(--r-md); margin-block: var(--s-5); }
.entry-content table, .post-text table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--s-5);
  font-size: var(--t-sm);
}
.entry-content th, .entry-content td,
.post-text th, .post-text td {
  padding: 11px 14px;
  border: 1px solid var(--line);
  text-align: left;
}
.entry-content th, .post-text th {
  background: var(--ink-800);
  color: var(--fg-1);
  font-weight: 600;
}

/* breadcrumbs */
.breadcrumb-nav, .woocommerce-breadcrumb {
  font-size: var(--t-sm);
  color: var(--fg-3);
  margin-bottom: var(--s-5);
}
.breadcrumb-nav a, .woocommerce-breadcrumb a { color: var(--fg-2); }
.breadcrumb-nav a:hover, .woocommerce-breadcrumb a:hover { color: var(--ember-300); }
.breadcrumb-nav .sep { margin-inline: 8px; opacity: .5; }

/* ==========================================================================
   19  FORMS
   ========================================================================== */
input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=password], input[type=search], input[type=number], input[type=date],
select, textarea,
.input-text, .form-select {
  width: 100%;
  padding: 12px 15px;
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--fg-1);
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background-color var(--tr-fast);
  appearance: none;
  -webkit-appearance: none;
}
textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

input::placeholder, textarea::placeholder { color: var(--fg-3); opacity: 1; }

input:focus, select:focus, textarea:focus,
.input-text:focus, .form-select:focus {
  outline: none;
  border-color: var(--ember-500);
  background: var(--ink-800);
  box-shadow: 0 0 0 3px rgba(32,115,147,.16);
}

select, .form-select {
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%),
                    linear-gradient(135deg, var(--fg-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
  cursor: pointer;
}
select option { background: var(--ink-800); color: var(--fg-1); }

label { display: block; margin-bottom: 7px; font-size: var(--t-sm); font-weight: 500; color: var(--fg-2); }
.required, .required abbr { color: var(--ember-400); text-decoration: none; border: 0; }

input[type=checkbox], input[type=radio] {
  width: 17px;
  height: 17px;
  accent-color: var(--ember-500);
  vertical-align: middle;
  cursor: pointer;
}

.form-row { margin-bottom: var(--s-4); }
.form-row-first, .form-row-last { width: 100%; }

/* Contact Form 7 / WPForms */
.wpcf7-form p { margin-bottom: var(--s-4); }
.wpcf7-not-valid-tip { color: var(--bad); font-size: var(--t-sm); margin-top: 5px; }
.wpcf7 form .wpcf7-response-output {
  margin: var(--s-5) 0 0;
  padding: 13px 17px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--ink-800);
  color: var(--fg-2);
  font-size: var(--t-sm);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: rgba(63,191,127,.45); color: var(--ok); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: rgba(229,72,77,.45); color: var(--bad); }

input[type=submit], button[type=submit], .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--fg-inv);
  background: var(--grad-ember);
  border: 0;
  border-radius: var(--r-sm);
  box-shadow: var(--lift-ember), var(--edge);
  cursor: pointer;
  width: auto;
  transition: transform var(--tr-fast), box-shadow var(--tr-base);
}
input[type=submit]:hover, button[type=submit]:hover, .wpcf7-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -12px rgba(23,90,116,.72), var(--edge);
}

/* ==========================================================================
   20  WOOCOMMERCE — SHOP ARCHIVE
   ========================================================================== */
.woocommerce, .woocommerce-page,
.shop-area, .site-main, .content-area { color: var(--fg-2); }

.shop-area { padding-block: var(--sec-py); background: var(--ink-900); }

.woocommerce-products-header { text-align: center; margin-bottom: var(--s-9); }
.woocommerce-products-header__title, .page-title {
  font-size: var(--t-h1);
  color: var(--fg-1);
  margin-bottom: var(--s-3);
}

.shop-count-ordering-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-7);
  border-bottom: 1px solid var(--line);
}
.woocommerce-result-count, .shop-showing-result {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--fg-3);
}
.woocommerce-ordering select, .shop-short-by select { min-width: 220px; }

/* product grid */
.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

.woocommerce ul.products li.product,
ul.products li.product,
.shop-item, .product-wrapper {
  position: relative;
  width: 100% !important;
  margin: 0 !important;
  padding: 0;
  float: none !important;
  display: flex;
  flex-direction: column;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1), var(--edge);
  overflow: hidden;
  text-align: center;
  transition: transform var(--tr-base), border-color var(--tr-base), box-shadow var(--tr-base);
}
.woocommerce ul.products li.product:hover,
ul.products li.product:hover,
.shop-item:hover {
  transform: translateY(-4px);
  border-color: var(--line-ember);
  box-shadow: var(--lift-2), var(--edge);
}

.woocommerce ul.products li.product a img,
ul.products li.product img,
.shop-thumb img, .pro-img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  background: var(--ink-750);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  transition: transform var(--tr-slow);
}
.woocommerce ul.products li.product:hover img { transform: scale(1.035); }
.shop-thumb, .pro-img { overflow: hidden; }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3,
.product-title {
  padding: var(--s-5) var(--s-5) 0;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--fg-1);
  margin: 0 0 var(--s-3);
}
.woocommerce ul.products li.product .price,
ul.products li.product .price,
.product-price {
  display: block;
  padding-inline: var(--s-5);
  margin-bottom: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 700;
  color: var(--ember-400);
}
.woocommerce ul.products li.product .price del { color: var(--fg-3); font-size: .78em; font-weight: 500; margin-right: 7px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .button,
ul.products li.product .add_to_cart_button {
  margin: auto var(--s-5) var(--s-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--fg-inv);
  background: var(--grad-ember);
  border: 0;
  border-radius: var(--r-sm);
  box-shadow: var(--lift-1);
  transition: transform var(--tr-fast), box-shadow var(--tr-base);
}
.woocommerce ul.products li.product .button:hover {
  color: var(--fg-inv);
  transform: translateY(-2px);
  box-shadow: var(--lift-ember);
}
.woocommerce ul.products li.product .added_to_cart {
  display: block;
  margin: 0 var(--s-5) var(--s-5);
  font-size: var(--t-sm);
  color: var(--ember-300);
}

/* sale flash */
.woocommerce span.onsale, .fresh-sale {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  min-width: auto;
  min-height: auto;
  padding: 5px 12px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--fg-inv);
  background: var(--grad-ember);
  border-radius: var(--r-full);
  box-shadow: var(--lift-1);
}

/* star ratings */
.woocommerce .star-rating { color: var(--warn); }
.woocommerce .star-rating::before { color: var(--ink-600); }

/* pagination */
.woocommerce-pagination, .shop-pagination-wrap, .pagination-wrap {
  margin-top: var(--s-9);
  display: flex;
  justify-content: center;
}
.woocommerce-pagination ul, .pagination-wrap ul, .page-links {
  display: flex;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0 !important;
}
.woocommerce-pagination ul li { margin: 0; border: 0 !important; }
.woocommerce-pagination a, .woocommerce-pagination span,
.page-numbers, .page-number {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--fg-2);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: color var(--tr-fast), border-color var(--tr-base), background-color var(--tr-base);
}
.page-numbers:hover, .woocommerce-pagination a:hover {
  color: var(--fg-1);
  border-color: var(--line-ember);
  background: var(--ink-750);
}
.page-numbers.current, .page-number.current {
  color: var(--fg-inv);
  background: var(--grad-ember);
  border-color: transparent;
}

/* sidebar widgets */
.shop-sidebar .widget, .widget {
  margin-bottom: var(--s-6);
  padding: var(--s-6);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.widget .widget-title, .widget h4 {
  margin-bottom: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--fg-1);
}
.widget ul { margin: 0; padding: 0; list-style: none; }
.widget ul li { margin-bottom: 10px; font-size: var(--t-sm); }
.widget ul li a { color: var(--fg-2); }
.widget ul li a:hover { color: var(--ember-300); }

.product_list_widget li { display: flex; gap: 12px; align-items: center; }
.product_list_widget img { width: 54px; height: 54px; object-fit: cover; border-radius: var(--r-sm); }

/* ==========================================================================
   21  WOOCOMMERCE — SINGLE PRODUCT
   ========================================================================== */
.shop-details-content, .product-desc-wrap { padding-block: var(--sec-py); }

.woocommerce div.product { color: var(--fg-2); }
.woocommerce div.product .product_title {
  font-size: var(--t-h1);
  color: var(--fg-1);
  margin-bottom: var(--s-4);
}

.woocommerce div.product div.images img,
.zibber-thumb img {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--ink-800);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.details-pro-price {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ember-400);
  margin-bottom: var(--s-5);
}
.woocommerce div.product p.price del { color: var(--fg-3); font-size: .58em; font-weight: 500; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce-product-details__short-description {
  font-size: var(--t-md);
  line-height: 1.72;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}

/* Rank Math renders its breadcrumb as a sibling of the shop container, so it
   has no gutter of its own and would run to the viewport edge. Give it the
   same measure as the page content. */
.rank-math-breadcrumb {
  max-width: var(--cw);
  margin: 0 auto;
  padding: var(--s-5) var(--gutter) 0;
  font-size: var(--t-sm);
  color: var(--fg-3);
}
.rank-math-breadcrumb p { margin: 0; }
.rank-math-breadcrumb a { color: var(--fg-2); text-decoration: none; }
.rank-math-breadcrumb a:hover { color: var(--ember-300); }
.rank-math-breadcrumb .separator { margin-inline: 8px; opacity: .45; }
.rank-math-breadcrumb .last { color: var(--body-text); }

/* quantity + add to cart */
/* WooCommerce adds .hidden when the quantity is fixed (sold individually).
   Respect that — otherwise the styled wrapper shows as an empty sliver. */
.woocommerce .quantity.hidden,
.quantity.hidden { display: none !important; }

.woocommerce .quantity, .cart-plus-minus, .pro-quan-area .quantity {
  display: inline-flex;
  align-items: center;
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.woocommerce .quantity .qty {
  width: 74px;
  padding: 12px 8px;
  text-align: center;
  background: transparent;
  border: 0;
  color: var(--fg-1);
  font-weight: 600;
}
.woocommerce .quantity .qty:focus { box-shadow: none; }

.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.woocommerce div.product form.cart .button,
.single_add_to_cart_button {
  padding: 14px 32px !important;
  font-family: var(--font-body);
  font-size: var(--t-base) !important;
  font-weight: 600 !important;
  color: var(--fg-inv) !important;
  background: var(--grad-ember) !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--lift-ember), var(--edge);
  cursor: pointer;
  transition: transform var(--tr-fast), box-shadow var(--tr-base);
}
.woocommerce div.product form.cart .button:hover,
.single_add_to_cart_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -12px rgba(23,90,116,.72), var(--edge);
}

.product_meta, .shop-meta {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--fg-2);
}
/* the value inside each meta row carries the emphasis, the label stays quiet */
.product_meta .sku, .product_meta .posted_in a, .product_meta .tagged_as a {
  color: var(--fg-1);
  font-weight: 500;
}
.product_meta a { color: var(--fg-2); }
.product_meta a:hover { color: var(--ember-300); }
/* netfix-shop.css paints these near-black (#0C1020) for a light theme, which is
   invisible on our ground — restate the colour, not just the layout. */
.product_meta > span { display: block; margin-bottom: 7px; color: var(--fg-2); }
.product_meta::before { display: none; }

/* tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.pro-details-tab .nav-tabs, .custom-tab .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 var(--s-6);
  padding: 5px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.pro-details-tab .nav-item {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.pro-details-tab .nav-link {
  display: block;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--fg-3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  transition: color var(--tr-fast), background-color var(--tr-base);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.pro-details-tab .nav-link:hover { color: var(--fg-1); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.pro-details-tab .nav-link.active {
  color: var(--fg-inv);
  background: var(--grad-ember);
}
.woocommerce-Tabs-panel, .tab-pane {
  font-size: var(--t-md);
  line-height: 1.78;
  color: var(--fg-2);
}
.woocommerce-Tabs-panel h2 { font-size: var(--t-h3); margin-bottom: var(--s-4); }

/* reviews */
.woocommerce #reviews #comments ol.commentlist,
.product-commnets-list { margin: 0; padding: 0; list-style: none; }
.woocommerce #reviews #comments ol.commentlist li,
.product-commnets {
  margin-bottom: var(--s-4);
  padding: var(--s-6);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.woocommerce #reviews #comments ol.commentlist li img.avatar,
.pro-commnets-img img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ink-750);
  position: static;
  padding: 0;
}
.comment-reply-title { font-family: var(--font-display); font-size: var(--t-h4); color: var(--fg-1); }
.woocommerce-noreviews, .woocommerce-verification-required {
  padding: var(--s-5);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* related / upsells */
.related, .up-sells, .cart-collaterals .cross-sells { margin-top: var(--sec-py); }
.related > h2, .up-sells > h2, .related .section-title h2 {
  font-size: var(--t-h2);
  margin-bottom: var(--s-8);
  text-align: center;
}

/* grouped products */
.woocommerce-grouped-product-list, .group_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s-5);
}
.woocommerce-grouped-product-list td, .group_table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

/* variations */
.woocommerce div.product form.cart .variations { width: 100%; border-collapse: collapse; margin-bottom: var(--s-4); }
.woocommerce div.product form.cart .variations td { padding: 8px 0; }
.woocommerce div.product form.cart .variations label { margin: 0; }
.woocommerce-variation-price { margin-bottom: var(--s-4); }
.reset_variations { font-size: var(--t-sm); color: var(--fg-3); }

/* ==========================================================================
   22  WOOCOMMERCE — CART
   ========================================================================== */
.cart-content, .woocommerce-cart-form { margin-bottom: var(--s-8); }

.woocommerce table.shop_table, table.shop_table {
  width: 100%;
  margin: 0 0 var(--s-6);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.woocommerce table.shop_table th, table.shop_table th {
  padding: 15px 16px;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: var(--ink-750);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.woocommerce table.shop_table td, table.shop_table td {
  padding: 16px;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
  vertical-align: middle;
}
.woocommerce table.shop_table tbody tr:first-child td { border-top: 0; }
/* WooCommerce ships #ddd cell borders and the theme leaves the bottom edge at
   text colour; both read as bright rules on a dark table. Pin every edge. */
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
table.shop_table th, table.shop_table td { border-color: var(--line); }

/* Totals panel: cells are transparent, the panel itself carries the surface.
   Stated at shop_table specificity so it is not out-ranked by the rule above. */
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td,
.cart_totals table th, .cart_totals table td {
  background: transparent;
  border-color: var(--line);
}

/* Column rhythm: pin the two utility columns so the product, price, quantity
   and subtotal columns get the remaining width instead of the table dedicating
   half its measure to an empty remove/thumbnail gutter. */
.woocommerce table.shop_table.cart { table-layout: auto; }
.woocommerce table.shop_table.cart th.product-remove,
.woocommerce table.shop_table.cart td.product-remove { width: 58px; text-align: center; }
.woocommerce table.shop_table.cart th.product-thumbnail,
.woocommerce table.shop_table.cart td.product-thumbnail { width: 96px; }
.woocommerce table.shop_table.cart th.product-name,
.woocommerce table.shop_table.cart td.product-name { text-align: left; }
.woocommerce table.shop_table.cart th.product-price,
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart th.product-quantity,
.woocommerce table.shop_table.cart td.product-quantity,
.woocommerce table.shop_table.cart th.product-subtotal,
.woocommerce table.shop_table.cart td.product-subtotal { width: 130px; text-align: right; }
/* neutralise stray decorative borders the legacy sheet draws inside cells */
.woocommerce table.shop_table.cart td > span,
.woocommerce table.shop_table.cart td .amount { border: 0; box-shadow: none; }

.cart-img img, .product-thumbnail img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--ink-750);
}
/* netfix-core.css carries a global `a, button { color: var(--primary-color) }`
   where --primary-color is the old theme red (#DF0E0E). Inside the shop tables
   that declaration still reaches the product links, so state the colour here at
   a specificity that clearly wins rather than relying on source order. */
.product-name a, .cart-item-link,
.woocommerce table.shop_table td.product-name a,
.woocommerce table.shop_table .product-name a,
.woocommerce-cart-form__cart-item .product-name a {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--fg-1);
}
.product-name a:hover,
.woocommerce table.shop_table td.product-name a:hover { color: var(--ember-300); }
.product-price, .product-subtotal { font-weight: 600; color: var(--fg-1); }

.woocommerce a.remove, .product-remove a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 17px;
  line-height: 1;
  color: var(--fg-3) !important;
  background: var(--ink-750);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: color var(--tr-fast), border-color var(--tr-base), background-color var(--tr-base);
}
.woocommerce a.remove:hover, .product-remove a:hover {
  color: var(--bad) !important;
  border-color: rgba(229,72,77,.45);
  background: rgba(229,72,77,.09);
}

.coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.coupon .input-text { width: auto; min-width: 200px; flex: 1 1 200px; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: space-between;
  align-items: center;
}

/* Totals sit as a panel on the right of the page, matching the checkout. */
.cart-collaterals { display: block; }
.cart_totals {
  width: 100%;
  max-width: 440px;
  margin-left: auto;
}
@media (max-width: 640px) { .cart_totals { max-width: none; } }
.cart_totals {
  padding: var(--s-7);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1), var(--edge);
}
.cart_totals h2 {
  font-size: var(--t-h3);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.cart_totals table { background: transparent; border: 0; margin: 0; }
.cart_totals table th, .cart_totals table td {
  padding: 11px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-base);
}
.cart_totals .order-total th, .cart_totals .order-total td {
  border-bottom: 0;
  padding-top: var(--s-4);
  font-size: var(--t-lg);
  color: var(--fg-1);
  font-weight: 700;
}
.cart_totals .order-total .amount { color: var(--ember-400); }
.wc-proceed-to-checkout { margin-top: var(--s-5); }
.wc-proceed-to-checkout .checkout-button {
  display: flex !important;
  width: 100%;
  padding: 15px 24px !important;
  font-size: var(--t-md) !important;
  font-weight: 600 !important;
  color: var(--fg-inv) !important;
  background: var(--grad-ember) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--lift-ember), var(--edge);
  text-align: center;
  justify-content: center;
}
.wc-proceed-to-checkout .checkout-button:hover { transform: translateY(-2px); }

.cart-empty, .woocommerce-info.cart-empty {
  text-align: center;
  font-size: var(--t-lg);
  padding: var(--s-9);
}
.return-to-shop { text-align: center; margin-top: var(--s-5); }

/* mini cart */
.woocommerce-mini-cart__buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-block: 1px solid var(--line);
  color: var(--fg-1);
  font-weight: 600;
}

/* ==========================================================================
   23  WOOCOMMERCE — CHECKOUT & ORDER
   ========================================================================== */
/* The two-column checkout applies to the standard WooCommerce page only.
   page-templates/checkout-blank.php is a self-contained single-column funnel
   with its own layout (it hides the order-review table entirely) — imposing a
   grid there breaks it, so it is excluded. */
body:not(.checkout-blank) .woocommerce-checkout .checkout,
body:not(.checkout-blank) form.checkout.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
}
#customer_details { min-width: 0; }
#order_review_heading, .woocommerce-checkout-review-order { min-width: 0; }

#customer_details .col-1, #customer_details .col-2 { width: 100%; max-width: none; float: none; }

.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--fg-1);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.woocommerce form .form-row { margin-bottom: var(--s-4); padding: 0; }
.woocommerce form .form-row label { margin-bottom: 7px; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; }

/* Pair short fields two-up on the standard checkout. Excluded on the blank
   checkout, whose billing panel is a narrow single column — there a 2-up grid
   just makes some fields look arbitrarily half-width. */
@media (min-width: 640px) {
  body:not(.checkout-blank) .woocommerce-billing-fields__field-wrapper,
  body:not(.checkout-blank) .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--s-4);
  }
  body:not(.checkout-blank) .woocommerce-billing-fields__field-wrapper > .form-row-wide,
  body:not(.checkout-blank) .woocommerce-shipping-fields__field-wrapper > .form-row-wide { grid-column: 1 / -1; }
}

.woocommerce-checkout-review-order {
  position: sticky;
  top: 96px;
  padding: var(--s-7);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-2), var(--edge);
}
.woocommerce-checkout-review-order-table { background: transparent !important; border: 0 !important; margin: 0 !important; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 11px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: var(--t-sm);
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  border-bottom: 0 !important;
  padding-top: var(--s-4) !important;
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--fg-1);
}
.woocommerce-checkout-review-order-table tfoot .order-total .amount { color: var(--ember-400); }

/* payment methods */
#payment, .woocommerce-checkout #payment {
  margin-top: var(--s-5);
  background: transparent;
  border-radius: 0;
}
#payment ul.payment_methods {
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
  border: 0;
  display: grid;
  gap: 10px;
}
#payment ul.payment_methods li {
  margin: 0;
  padding: 14px 16px;
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--tr-base), background-color var(--tr-base);
}
#payment ul.payment_methods li:hover { border-color: var(--line-ember); }
#payment ul.payment_methods li label {
  display: inline;
  margin: 0 0 0 8px;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--fg-1);
  cursor: pointer;
}
#payment div.payment_box {
  margin: 12px 0 0;
  padding: 13px 15px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--fg-2);
}
#payment div.payment_box::before { display: none !important; }

#place_order, #payment .place-order .button {
  width: 100%;
  padding: 16px 28px !important;
  font-family: var(--font-body);
  font-size: var(--t-md) !important;
  font-weight: 700 !important;
  color: var(--fg-inv) !important;
  background: var(--grad-ember) !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--lift-ember), var(--edge);
  cursor: pointer;
  transition: transform var(--tr-fast), box-shadow var(--tr-base);
}
#place_order:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -12px rgba(23,90,116,.75); }

.woocommerce-terms-and-conditions-wrapper { margin-block: var(--s-4); font-size: var(--t-sm); }
.woocommerce-privacy-policy-text { font-size: var(--t-sm); color: var(--fg-3); }

/* order received / thank you */
.woocommerce-order {
  max-width: 820px;
  margin-inline: auto;
}
.woocommerce-thankyou-order-received {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--fg-1);
  text-align: center;
  margin-bottom: var(--s-7);
}
.woocommerce-thankyou-order-details, .woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4);
  margin: 0 0 var(--s-8);
  padding: 0;
  list-style: none;
}
.woocommerce-order-overview li {
  margin: 0;
  padding: var(--s-5);
  text-align: center;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-left: 0 !important;
}
.woocommerce-order-overview li strong {
  display: block;
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: var(--t-md);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ember-400);
}
.woocommerce-column__title, .woocommerce-order-details__title {
  font-size: var(--t-h4);
  margin-bottom: var(--s-4);
}

/* notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0 0 var(--s-6);
  padding: 15px 19px;
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--steel-400);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-size: var(--t-base);
  list-style: none;
}
.woocommerce-message::before, .woocommerce-info::before,
.woocommerce-error::before { display: none !important; }
.woocommerce-message { border-left-color: var(--ok); }
.woocommerce-info    { border-left-color: var(--info); }
.woocommerce-error   { border-left-color: var(--bad); color: var(--danger-bg-text); }
.woocommerce-message .button, .woocommerce-info .button {
  margin-left: auto;
  padding: 9px 18px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--fg-inv);
  background: var(--grad-ember);
  border-radius: var(--r-sm);
}

/* generic woo button fallback */
.woocommerce .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--fg-1);
  background: var(--glass);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 12px 22px;
  transition: border-color var(--tr-base), background-color var(--tr-base), transform var(--tr-fast);
}
.woocommerce .button:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover {
  color: var(--fg-1);
  background: var(--glass-2);
  border-color: var(--line-ember);
  transform: translateY(-1px);
}
.woocommerce .button.alt, .woocommerce a.button.alt, .woocommerce button.button.alt {
  color: var(--fg-inv);
  background: var(--grad-ember);
  border-color: transparent;
  box-shadow: var(--lift-1);
}
.woocommerce .button.alt:hover { color: var(--fg-inv); box-shadow: var(--lift-ember); }

/* blank checkout template (page-templates/checkout-blank.php) */
body.checkout-blank, .checkout-blank { background: var(--ink-900); }

/* ==========================================================================
   23b  LEGACY THEME NEUTRALISATION — single source of truth
   ----------------------------------------------------------------------------
   The netfix sheets were authored for a different, light-theme brand. Rather
   than patch them page by page, they are neutralised centrally, in three steps:

     1. netfix derives its ENTIRE palette and type from six :root custom
        properties. Re-pointing those six at our tokens converts the majority of
        the legacy styling across every template at once — blog, widgets,
        archives, comments, pagination, shop, the lot. This is the lever; the
        two steps below only mop up what it cannot reach.
     2. Form controls take their colour from the user agent, not the cascade,
        so they escape step 1 and must be told to inherit.
     3. A short list of literals the legacy sheets hard-code outside those
        variables. Sourced from a scripted audit of every rendered template at
        1280px, not guessed.

   Anything added here must be a TOKEN, never a literal.
   ========================================================================== */

/* --- 1. the lever: netfix's own palette variables --------------------------- */
:root {
  --primary-color:         var(--teal-600);
  --secondary-color:       var(--navy-700);
  --body-text-color:       var(--body-text);
  --heading-text-color:    var(--ink-text);
  --paragraph-text-color:  var(--body-text);
  --font-family-body:      var(--font-body);
  --font-family-heading:   var(--font-display);
}
/* …and their on-navy equivalents, so the same lever works inside dark zones */
.itv-header, .itv-mobile-nav, .hero, .pg-hero, .cta-section, .sec-dark {
  --body-text-color:      var(--on-navy-2);
  --heading-text-color:   var(--on-navy-1);
  --paragraph-text-color: var(--on-navy-2);
  --primary-color:        var(--teal-500);
}

/* --- 2. controls that take colour from the UA rather than the cascade ------- */
button, input, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
/* the components below re-state colour explicitly; this only catches bare
   controls such as the nav toggle, which otherwise render in a system colour */

/* Bare form buttons (the block search widget ships a class-less <button>) have
   no author styling at all, so they fall back to a UA system colour. Give them
   the system's own button appearance. */
button:not([class]),
input[type=submit]:not([class]),
input[type=button]:not([class]),
.wp-block-search__button,
button.wp-block-search__button {
  background: var(--teal-600);
  color: var(--on-accent);
  border: 0;
  border-radius: var(--r-sm);
  padding: 10px 18px;
  cursor: pointer;
}
button:not([class]):hover,
.wp-block-search__button:hover { background: var(--teal-500); color: var(--on-accent); }

/* widget / archive lists (netfix literal #757F95) */
.widget a, .sidebar__widget a,
.wp-block-archives-list a, .wp-block-categories-list a,
.sidebar-cat-list li a { color: var(--teal-600); }
.widget a:hover, .wp-block-archives-list a:hover { color: var(--teal-500); }

/* --- 3. literals the legacy sheets hard-code outside the variables ---------- */

/* hairlines: #E1E6EE, #DDD, #F2F2F2, #F3F4F8 all become the one line token */
.standard-blog-item, .standard-blog-items article,
.widget, .sidebar__widget, .widget_block, .widget_search,
.wp-block-search__input, .wp-block-search__label,
.blog-details-border, .post-comments, .comments-box,
tr.cart-subtotal, tr.order-total, tr.shipping,
.breadcrumb-trail, .comment-navigation, .comment-pagination {
  border-color: var(--line) !important;
}
.wp-block-search__input {
  background: var(--paper);
  color: var(--ink-text);
}

/* muted greys the legacy sheets hard-code: #888, #535559, #636363, #757F95.
   Uses --fg-2/--fg-3, NOT the fixed --body-text, so body copy inside the navy
   zones still resolves to the on-navy step instead of going unreadable. */
p, li { color: var(--fg-2); }
small, .post-meta, .comment-metadata, .wp-block-latest-comments__comment-date,
.widget-posts-meta, .blog-post-meta li, .comment-awaiting-moderation {
  color: var(--fg-3);
}

/* legacy accent literals that survive outside --primary-color */
.wp-block-search__button, .wp-element-button,
.wp-block-button__link, .comment-reply-link {
  background: var(--teal-600);
  color: #FFFFFF;
  border-color: var(--teal-600);
  border-radius: var(--r-sm);
}
.wp-block-search__button:hover, .wp-element-button:hover,
.wp-block-button__link:hover, .comment-reply-link:hover {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: #FFFFFF;
}

/* form-control hairlines the legacy sheets hard-code as #EAEDFF */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row .input-text,
.woocommerce-page form .form-row .input-text,
#coupon_code, ul.cat li,
.select2-dropdown,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: var(--line);
}
.select2-container--default .select2-selection--single,
#coupon_code { background: var(--paper); color: var(--ink-text); }

/* cart totals rows (#0C1020 headings, #DDD rules) */
.woocommerce table.shop_table.cart th,
.woocommerce table.shop_table th,
tr.cart-subtotal th, tr.order-total th, tr.shipping th { color: var(--fg-2); }

/* block-editor search widget (#F3F4F8) */
.wp-block-search__input,
input.wp-block-search__input {
  background: var(--paper);
  color: var(--ink-text);
  border: 1px solid var(--line);
}

/* list items in taxonomy widgets (#757F95) */
li.cat-item, .widget ul li, .wp-block-categories-list li, .wp-block-archives-list li {
  color: var(--fg-2);
}

/* the legacy separator hairline (#F2F2F2) */
span.separator, .separator { border-color: var(--line); color: var(--fg-3); }

/* the amber star literal (#F59E0B) used by the legacy rating widget */
.star-rating, .stars, .shop-rating, .rating { color: var(--warn); }

/* icon fonts must keep their family but never their legacy colour */
i[class*="fa-"], i[class*="flaticon-"], .fa, .fas, .far, .fal, .fab {
  color: inherit;
}

/* sidebar / taxonomy links and chrome (netfix-shop.css literals #0C1020,
   #F4F5F6, #F4F7FC, #686777) */
.shop-sidebar { background: var(--mist); }
.shop-sidebar .product-categories li a,
.shop-sidebar .tagcloud a,
.sidebar-cat-list li a,
.widget .cat-item a,
li.cat-item a,
.wp-block-categories-list a,
.wp-block-archives-list a { color: var(--teal-600); }
.shop-sidebar .product-categories li a:hover,
.shop-sidebar .tagcloud a:hover,
li.cat-item a:hover { color: var(--teal-500); }
.product_meta > span a, .product_meta > span .sku { color: var(--ink-text); }
.product-desc-wrap .nav-tabs .nav-item.show .nav-link,
.product-desc-wrap .nav-tabs .nav-link.active { background: var(--mist); }
.nav-tabs, ul.nav.nav-tabs { border-color: var(--line); }

/* legacy decorative rules that assumed a light-theme brand */
.pro-filter::before, .product_meta::before { display: none; }
.pro-filter select { color: var(--ink-text); }

/* --- WooCommerce loop primitives -------------------------------------------
   The product card is wrapped in a single <a>. Anything inside it that does not
   declare its own colour INHERITS the link colour, which on a visited card is
   the browser's own purple. Declaring these explicitly wins over inheritance,
   which is what actually fixes the archive, the category and the product search
   pages in one go. */
.woocommerce .price,
.woocommerce h3.price,
.woocommerce .price bdi,
.woocommerce-Price-amount,
.woocommerce-Price-amount bdi,
.woocommerce-Price-currencySymbol,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price bdi { color: var(--teal-600); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 { color: var(--ink-text); }

.woocommerce a.button.product_type_simple,
.woocommerce a.button.add_to_cart_button,
.woocommerce ul.products li.product a.button {
  background: var(--teal-600);
  color: var(--on-accent);
  border-color: var(--teal-600);
}
.woocommerce a.button.product_type_simple:hover,
.woocommerce a.button.add_to_cart_button:hover {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: var(--on-accent);
}
.woocommerce .star-rating span, .woocommerce .star-rating::before,
i.fa-star, .shop-rating i { color: var(--warn); }
/* the loop-card rating: empty stars are a hairline grey, filled ones amber */
.details-rating a { color: var(--mist-line-2); }
.details-rating a.active, .details-rating a:hover { color: var(--warn); }
.woocommerce ul.products li.product a { color: var(--ink-text); }

/* thank-you / order tables: legacy #EEE and #DDD rules */
.woocommerce-order section, .woocommerce-order table,
.woocommerce-order td, .woocommerce-order th,
.woocommerce-columns section, hr { border-color: var(--line); }

/* --- sidebar widget area (shared by blog, search and shop templates) --------
   These last literals live on the block-editor search widget and the legacy
   sidebar, and are stated at widget scope so they clear the legacy rules. */
.widget input.wp-block-search__input,
.sidebar__widget input.wp-block-search__input,
.shop-sidebar input.wp-block-search__input,
input.wp-block-search__input,
.wp-block-search .wp-block-search__input {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-text);
}
.widget button, .sidebar__widget button,
.shop-sidebar button, .wp-block-search button,
.wp-block-search .wp-block-search__button {
  background: var(--teal-600);
  color: var(--on-accent);
  border: 0;
  border-radius: var(--r-sm);
}
.widget p, .sidebar__widget p, .shop-sidebar p,
.standard-blog-content p, .blog__wrapper p { color: var(--fg-2); }
.widget li a, .shop-sidebar li a, .sidebar__widget li a { color: var(--teal-600); }

/* legacy WooCommerce action buttons (#0C1020 label) */
.woocommerce button.button, .woocommerce input.button,
button.button, input.button {
  color: var(--on-accent);
  background: var(--teal-600);
  border-color: var(--teal-600);
}
.woocommerce button.button:hover, button.button:hover {
  color: var(--on-accent);
  background: var(--teal-500);
  border-color: var(--teal-500);
}
.woocommerce button.button[disabled], .woocommerce button.button:disabled {
  background: var(--mist); color: var(--fg-3); border-color: var(--line);
}

/* thank-you / order pages: legacy #EEE and #DDD rules */
.woocommerce-order section, .woocommerce-columns section,
.woocommerce-order hr, .woocommerce-columns hr,
.entry-content hr, .post-text hr, hr { border-color: var(--line); }

/* --------------------------------------------------------------------------
   LAST-RESORT LAYER
   Eight declarations in the legacy sheets sit at a specificity this file cannot
   out-rank without inventing ever-longer selectors. They are listed here once,
   with !important, and they use TOKENS — no new palette, no per-page patching.
   Each was identified by the scripted audit, not by guesswork. If a legacy
   sheet is ever dropped, this block can go with it.
   -------------------------------------------------------------------------- */
input.wp-block-search__input,
.wp-block-search .wp-block-search__input   { background: var(--paper) !important;
                                             border-color: var(--line) !important;
                                             color: var(--ink-text) !important; }
.wp-block-search button,
.wp-block-search .wp-block-search__button  { background: var(--teal-600) !important;
                                             color: var(--on-accent) !important; }
.widget a, .shop-sidebar a, .sidebar__widget a { color: var(--teal-600) !important; }
/* Enabled state only — the blanket fill previously here also hit disabled
   controls, which then wore the active accent. :not(:disabled) keeps the two
   states from fighting. */
.woocommerce button.button:not(:disabled), button.button:not(:disabled),
.woocommerce input.button:not(:disabled), input.button:not(:disabled) {
  color: var(--on-accent) !important;
  background: var(--teal-600) !important;
  border-color: var(--teal-600) !important; }
/* WooCommerce ships its own product-search widget with a class-less button */
.woocommerce-product-search button,
form.woocommerce-product-search button,
.widget_product_search button                  { background: var(--teal-600) !important;
                                                 color: var(--on-accent) !important;
                                                 border: 0 !important; }
/* sections and rules on the order / thank-you templates */
section, .woocommerce-order section            { border-color: var(--line) !important; }
.widget li a, .shop-sidebar li a,
.widget_product_categories a, .product-categories a { color: var(--teal-600) !important; }
.woocommerce button.button[disabled], button.button[disabled],
.woocommerce button.button:disabled, button.button:disabled,
.woocommerce button.button[aria-disabled="true"] { background: var(--mist) !important;
                                                 color: var(--body-text) !important;
                                                 border-color: var(--line) !important;
                                                 opacity: 1 !important; }
.woocommerce-order section, .woocommerce-columns section,
.woocommerce-order hr, hr                      { border-color: var(--line) !important; }

/* --- pseudo-element decoration ---------------------------------------------
   The legacy sheets paint several ::before/::after decorations directly (widget
   title underlines, the circle-wipe behind buttons). They inherit nothing, so
   they need naming explicitly. */
.sidebar-widget-title::before, .widget-title::before,
.widget h4::before, .widget h2::before,
.sidebar__widget-title::before, .shop-sidebar h4::before { background: var(--teal-600) !important; }

/* the legacy circle-wipe hover fill on WooCommerce / loop buttons */
.woocommerce a.button::before, .woocommerce button.button::before,
a.button::before, a.button.product_type_simple::before,
a.add_to_cart_button::before,
.site-btn::before, .brand-btn::before,
.product_meta::before { display: none !important; }

/* product-tab underline indicator */
.nav-link::after, button.nav-link::after,
.nav-tabs .nav-link::after { background: var(--teal-600) !important; }

/* ==========================================================================
   23c  :visited NORMALISATION
   ----------------------------------------------------------------------------
   Browsers restrict what may be styled on a visited link, and — critically —
   Chrome DISCARDS custom properties inside :visited rules to prevent history
   sniffing. A rule like `a:visited { color: var(--teal-600) }` is therefore
   silently dropped and the browser's own purple wins, which is what was
   tinting "Read More", the blog meta icons and several borders.

   So this is the one block in the file that MUST use literal values. They are
   the token values written out longhand; if a token changes, change it here
   too. Every literal below appears in the palette table in section 02.
   ========================================================================== */
a:visited                                   { color: #207393; }   /* --teal-600 */

/* normal-state colour for the legacy outline button, stated at a weight that
   clears netfix-core's own .transparent-btn rule */
a.btn.transparent-btn,
a.btn.transparent-btn.b-border-btn,
.btn.transparent-btn {
  color: var(--ink-text);
  border: 1px solid var(--mist-line-2);
}
a.btn.transparent-btn:hover,
.btn.transparent-btn:hover {
  color: #FFFFFF;
  background: var(--teal-600);
  border-color: var(--teal-600);
}

/* buttons keep their own label colour when visited */
a.btn-primary:visited,
a.btn-pricing-featured:visited,
a.btn-cta:visited, a.site-btn:visited, a.brand-btn:visited,
a.cart-btn:visited, a.k-cart-btn:visited, a.rev-btn:visited,
.woocommerce a.button.alt:visited,
.wc-proceed-to-checkout a.checkout-button:visited,
.wp-block-button__link:visited, .wp-element-button:visited { color: #FFFFFF; }

a.btn-ghost:visited,
a.btn-pricing:visited                       { color: #207393; }   /* --teal-600 */
a.btn-wa:visited                            { color: #06281A; }   /* --on-wa    */

a.transparent-btn:visited,
a.btn.transparent-btn.b-border-btn:visited  { color: #1B2D42;      /* --ink-text     */
                                              border-color: #CFD9E0; } /* --mist-line-2 */

/* navy zones: visited links follow the on-navy steps */
.itv-header a:visited, .itv-mobile-nav a:visited { color: #B2B7BB; }  /* --on-navy-2 */
.hero a:visited, .pg-hero a:visited,
.cta-section a:visited, .sec-dark a:visited      { color: #FFFFFF; }
.hero .btn-ghost:visited, .cta-section .btn-ghost:visited,
.hero a.btn-pricing:visited                      { color: #FFFFFF; }

/* light chrome */
.itv-footer a:visited                       { color: #207393; }
.blog-post-meta a:visited,
.product_meta a:visited                     { color: #54595F; }   /* --body-text */
.shop-sidebar a:visited, li.cat-item a:visited,
.widget a:visited                           { color: #207393; }
.woocommerce table.shop_table td.product-name a:visited { color: #1B2D42; }

/* ==========================================================================
   24  BLOG, SEARCH, 404, COMMENTS
   ========================================================================== */
.standard-blog-content, .blog-post-meta { color: var(--fg-2); }
.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  font-size: var(--t-sm);
  color: var(--fg-3);
}
.blog-post-meta a { color: var(--fg-2); }
.blog-post-meta i, .blog-post-meta li i { color: var(--teal-600); margin-right: 6px; }
.standard-post-thumb img { border-radius: var(--r-lg); border: 1px solid var(--line); }

.error-404, .not-found { text-align: center; padding-block: var(--s-12); }
.error-404 .page-title { font-size: var(--t-mega); }

.search-form, .woocommerce-product-search { display: flex; gap: 10px; }
.search-form input[type=search] { flex: 1; }

/* ==========================================================================
   24b  PAGE-SPECIFIC COMPONENTS
   Components that live only on individual templates. Verified against the
   rendered pages rather than assumed — each block below corresponds to markup
   that actually ships on a page in scope.
   ========================================================================== */

/* --- contact page: channel list ---------------------------------------- */
.contact-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
}
.contact-form-card {
  padding: var(--s-7);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1), var(--edge);
}
.form-group { margin-bottom: var(--s-4); }

.contact-info-stack { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.contact-info-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--tr-base), transform var(--tr-base);
}
.contact-info-row:hover { border-color: var(--line-ember); transform: translateX(3px); }
/* the markup sets a per-row tint inline; normalise to one plate treatment */
.contact-info-row .ci-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--ink-750) !important;
  border: 1px solid var(--line);
}
.ci-icon svg { width: 19px; height: 19px; }
.ci-lbl {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 2px;
}
.ci-val { font-size: var(--t-base); font-weight: 600; color: var(--fg-1); }
.ci-val a { color: var(--fg-1); }
.ci-val a:hover { color: var(--ember-300); }

/* --- single product: enrichment sections (inc/irontv-setup-products.php) -- */
.irontv-product-section {
  padding-block: var(--sec-py);
  border-top: 1px solid var(--line);
}
.irontv-product-extra { margin-top: var(--s-8); }
.irontv-product-section > h2,
.irontv-product-extra > h2 {
  font-size: var(--t-h2);
  margin-bottom: var(--s-6);
}
.iprotv-benefits, .iprotv-links-section, .iprotv-faq-section { margin-bottom: var(--s-9); }
.iprotv-section-title { text-align: left; }

/* --- about page --------------------------------------------------------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-5);
}
.values-grid > * {
  padding: var(--s-6);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1), var(--edge);
}

/* --- product loop card internals ---------------------------------------- */
.shop-item-content { padding: var(--s-5); }
.shop-rating, .rating { color: var(--warn); font-size: var(--t-sm); }

/* --- review form -------------------------------------------------------- */
.review-form, .post-comment-form {
  margin-top: var(--s-7);
  padding: var(--s-7);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.review-form label, .post-comment-form label { color: var(--fg-2); }

/* --- 404 / empty archive ------------------------------------------------ */
.error__area, .error-content {
  text-align: center;
  padding-block: var(--sec-py);
}
.error-content h1, .error-content h2 { font-size: var(--t-h1); margin-bottom: var(--s-4); }
.error-content p { color: var(--fg-2); margin-bottom: var(--s-6); }
.error-img img { max-width: min(420px, 100%); margin-inline: auto; }

/* --- search results header ---------------------------------------------- */
.page-header {
  padding-block: clamp(40px, 4vw, 72px) var(--s-6);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-8);
}
.page-header .page-title { font-size: var(--t-h1); margin: 0; }

/* ==========================================================================
   25  MOTION & UTILITIES
   ========================================================================== */
.anim-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
  will-change: opacity, transform;
}
.anim-up.in { opacity: 1; transform: none; }
.d1 { transition-delay: .07s; }
.d2 { transition-delay: .14s; }
.d3 { transition-delay: .21s; }
.d4 { transition-delay: .28s; }
.d5 { transition-delay: .35s; }

.text-center { text-align: center; }
.itv-container .text-center { text-align: center; }

/* ==========================================================================
   26  RESPONSIVE STATES
   ========================================================================== */

/* --- large desktop ----------------------------------------------------- */
@media (max-width: 1180px) {
  .itv-menu a { padding: 9px 10px; font-size: var(--t-xs); }
}

/* --- tablet landscape: collapse the nav -------------------------------- */
@media (max-width: 1024px) {
  html { scroll-padding-top: 80px; }

  .itv-menu { display: none; }
  .itv-hamburger { display: block; }
  /* The order CTA stays in the bar on tablet/mobile — it is the primary
     conversion action — just tightened up. */
  a.itv-nav-cta { --btn-py: 9px; --btn-px: 16px; font-size: var(--t-xs); }

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--s-9);
  }
  .hero-lead { margin-inline: auto; }
  .hero-checks { max-width: 520px; margin-inline: auto; text-align: left; }
  .hero-actions, .hero-trust { justify-content: center; }
  /* Headline and offer stay first; the decorative device panel follows, so the
     value proposition is what lands above the fold on a phone. */
  .tv-frame { max-width: 420px; }

  .footer-body { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }

  .woocommerce-checkout .checkout,
  form.checkout.woocommerce-checkout { grid-template-columns: 1fr; }
  .woocommerce-checkout-review-order { position: static; }
}

/* --- tablet portrait ---------------------------------------------------- */
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-4); }
  .stat-item:nth-child(odd)::before { display: none; }
  .stat-item:nth-child(3)::after,
  .stat-item:nth-child(4)::after {
    content: '';
    position: absolute;
    inset-inline: 8%;
    top: calc(var(--s-6) * -.5);
    height: 1px;
    background: var(--line);
  }

  .devices-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .install-step::after { display: none; }
}

/* --- mobile ------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --sec-py: 52px; }

  html { scroll-padding-top: 74px; }

  .itv-nav { padding: 11px var(--gutter); }
  .itv-logo img { height: 32px; }
  .itv-logo-wordmark { font-size: .9375rem; letter-spacing: .09em; }
  .itv-mobile-nav { padding-top: 76px; }

  .hero { padding-block: var(--s-8) var(--s-10); }
  .hero-title { letter-spacing: -.03em; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; max-width: none; }
  .hero-trust { flex-direction: column; align-items: center; gap: 11px; text-align: center; }
  .tv-badge { padding: 9px 12px; }
  .tv-badge-1 { left: -8px; }
  .tv-badge-2 { right: -8px; }
  .badge-val { font-size: var(--t-md); }

  .sec-header { margin-bottom: var(--s-8); text-align: left; }
  .sec-header .badge { margin-bottom: var(--s-4); }

  .why-grid, .devices-grid, .install-grid, .pricing-grid,
  .app-grid, .iprotv-benefits-grid, .iprotv-links-grid { grid-template-columns: 1fr; }

  .why-card, .install-step, .app-card, .iprotv-benefit-card { padding: var(--s-6) var(--s-5); }
  .pricing-card { padding: 52px var(--s-5) var(--s-6); }
  .pricing-toggle-wrap { width: 100%; }
  .ptoggle-btn { flex: 1; padding: 10px 14px; }

  .seo-content { font-size: var(--t-base); }
  .seo-link-box { padding: var(--s-5); }

  .faq-q { padding: var(--s-4) var(--s-5); gap: var(--s-3); }
  .faq-item.open .faq-a-inner { padding: 0 var(--s-5) var(--s-5); }

  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }

  .footer-body { grid-template-columns: 1fr; gap: var(--s-8); }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }

  .wa-float { right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .itv-scroll-top { right: 14px; bottom: 74px; width: 38px; height: 38px; }

  /* --- WooCommerce tables become stacked cards --- */
  .woocommerce table.shop_table_responsive thead,
  table.shop_table_responsive thead { display: none; }
  .woocommerce table.shop_table_responsive tr,
  table.shop_table_responsive tr {
    display: block;
    margin-bottom: var(--s-4);
    background: var(--ink-800);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .woocommerce table.shop_table_responsive tr td,
  table.shop_table_responsive tr td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: 12px 15px !important;
    text-align: right !important;
    border-top: 1px solid var(--line);
  }
  .woocommerce table.shop_table_responsive tr td::before,
  table.shop_table_responsive tr td::before {
    content: attr(data-title) ': ';
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fg-3);
  }
  .product-remove { justify-content: flex-end !important; }
  .cart-img img, .product-thumbnail img { width: 54px; height: 54px; }

  .coupon { width: 100%; }
  .coupon .input-text { flex: 1 1 100%; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .button { width: 100%; }

  .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-3); }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { padding: var(--s-4) var(--s-4) 0; font-size: var(--t-sm); }
  .woocommerce ul.products li.product .price { padding-inline: var(--s-4); font-size: var(--t-md); }
  .woocommerce ul.products li.product .button { margin: auto var(--s-4) var(--s-4); }

  .woocommerce div.product form.cart { flex-direction: column; align-items: stretch; }
  .woocommerce div.product form.cart .quantity { width: 100%; justify-content: center; }
  .single_add_to_cart_button { width: 100%; }

  .woocommerce-checkout-review-order { padding: var(--s-5); }
}

/* --- very small --------------------------------------------------------- */
@media (max-width: 400px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
  .featured-badge { font-size: 10px; padding: 5px 11px; }
}

/* ==========================================================================
   27  ACCESSIBILITY, PRINT, REDUCED MOTION
   ========================================================================== */

/* Visible, consistent keyboard focus everywhere. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ember-400);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.faq-q:focus-visible { outline: 2px solid var(--ember-400); outline-offset: -2px; }

.screen-reader-text, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 12px; left: 12px;
  z-index: 100000;
  width: auto; height: auto;
  padding: 12px 20px;
  clip: auto;
  clip-path: none;
  color: var(--fg-inv);
  background: var(--ember-500);
  border-radius: var(--r-sm);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .anim-up { opacity: 1 !important; transform: none !important; }
  .orb, .tv-badge, .tv-thumb::before, .badge-dot, .wa-float::before { animation: none !important; }
}

@media (prefers-contrast: more) {
  :root {
    --fg-2: var(--ink-text);
    --fg-3: var(--body-text);
    --line: rgba(255,255,255,.16);
    --line-strong: rgba(255,255,255,.30);
  }
}

@media print {
  body.irontv-page::after,
  .itv-header, .itv-mobile-nav, .wa-float, .itv-scroll-top,
  .hero-bg, .orb, .cta-section, .footer-social { display: none !important; }
  body, .sec-root, .sec-alt, .hero { background: #fff !important; color: #000 !important; }
  h1, h2, h3, h4, h5, h6, strong { color: #000 !important; }
  .gradient-text { -webkit-text-fill-color: #000 !important; color: #000 !important; background: none !important; }
  a { color: #000 !important; text-decoration: underline; }
  .panel, .why-card, .pricing-card, .faq-item, .device-card, .install-step {
    border: 1px solid var(--mist-line-2) !important;
    box-shadow: none !important;
    background: #fff !important;
    break-inside: avoid;
  }
  .faq-a { grid-template-rows: 1fr !important; }
  .faq-a-inner { padding: 0 0 12px !important; }
}


/* ==========================================================================
   28  DISABLED CONTROLS — declared last so nothing can out-order them
   A disabled control must not wear the active accent fill. WCAG exempts
   disabled controls from the contrast minimum, but an unreadable label is
   still a defect, so the pair is stated together here.
   ========================================================================== */
button[disabled], button:disabled,
input[type=submit][disabled], input[type=submit]:disabled,
.woocommerce button.button[disabled], .woocommerce button.button:disabled,
.woocommerce input.button[disabled], .woocommerce input.button:disabled,
button.button[disabled], button.button:disabled {
  /* longhand: the enabled-state rules use the `background` shorthand, and a
     shorthand elsewhere in the cascade was still re-filling this. */
  background-color: var(--mist) !important;
  background-image: none !important;
  color: var(--body-text) !important;
  border-color: var(--line) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}