/*
Theme Name: GuestSpy
Theme URI: https://guestspy.com/
Author: GuestSpy
Author URI: https://guestspy.com/
Description: Custom marketing theme for GuestSpy — transparent parental & family phone monitoring. Navy/teal palette with coral accent, Manrope + Inter (self-hosted), inline SVG icons, fast and responsive.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: guestspy
Tags: parental-controls, custom-colors, custom-menu, featured-images, block-styles, wide-blocks, responsive
*/

/* ==========================================================================
   0. Self-hosted fonts (no third-party requests)
   ========================================================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/manrope-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/manrope-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/manrope-latin-800-normal.woff2) format('woff2')}

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root{
  --navy-900:#0F1B33; --navy-800:#16254A; --navy-700:#213562; --navy-600:#2E4577;
  --teal:#0E9384; --teal-600:#0B7A6E; --teal-700:#085F56; --teal-100:#D4F1EC; --teal-50:#E8F7F4;
  --coral:#F2634A; --coral-600:#D94C34; --coral-100:#FDE3DC; --coral-50:#FEF1ED;
  --amber:#E6A100; --amber-50:#FFF6DE; --green:#1D9A5B; --green-50:#E3F5EA; --red:#D8412F; --red-50:#FDE8E5;
  --g50:#F6F8FB; --g100:#EEF2F7; --g200:#E2E8F0; --g300:#CBD5E1; --g400:#94A3B8; --g500:#64748B; --g600:#475569; --g700:#334155;
  --ink:#0F1B33; --ink-2:#334155; --ink-3:#64748B; --surface:#fff; --paper:#F6F8FB; --line:#E2E8F0;

  --font-display:'Manrope','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --step--1:clamp(.82rem,.8rem + .1vw,.875rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.0625rem);
  --step-1:clamp(1.125rem,1.06rem + .3vw,1.25rem);
  --step-2:clamp(1.35rem,1.2rem + .6vw,1.65rem);
  --step-3:clamp(1.6rem,1.35rem + 1.1vw,2.15rem);
  --step-4:clamp(1.95rem,1.5rem + 1.9vw,2.9rem);
  --step-5:clamp(2.3rem,1.6rem + 3vw,3.75rem);

  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(15,27,51,.05),0 2px 8px rgba(15,27,51,.05);
  --sh-2:0 2px 4px rgba(15,27,51,.05),0 12px 30px rgba(15,27,51,.08);
  --sh-3:0 6px 14px rgba(15,27,51,.08),0 30px 70px rgba(15,27,51,.16);

  --wrap:1200px; --wrap-narrow:760px; --gutter:clamp(1.15rem,4vw,2.5rem);
  --sec-y:clamp(3.5rem,7vw,6.5rem);
  --hdr-h:76px; --ease:cubic-bezier(.22,.75,.3,1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--teal-600);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--ink);margin:0 0 .5em;text-wrap:balance}
h1{font-size:var(--step-5)} h2{font-size:var(--step-4)} h3{font-size:var(--step-2);font-weight:700} h4{font-size:var(--step-1);font-weight:700}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.3em} li{margin:.4em 0}
strong,b{font-weight:600}
hr{border:none;border-top:1px solid var(--line);margin:2.2rem 0}
blockquote{margin:1.6rem 0;padding:1.1rem 1.5rem;border-left:4px solid var(--teal);background:var(--g50);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:var(--step-1);color:var(--ink-2);font-weight:500}
code{background:var(--g100);padding:.1em .45em;border-radius:6px;font-size:.9em;font-family:ui-monospace,Menlo,Consolas,monospace}
mark{background:var(--coral-100);padding:0 .2em;border-radius:3px}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:200;background:var(--surface);padding:.6rem 1rem;border-radius:var(--r-sm);box-shadow:var(--sh-2)}
::selection{background:var(--teal-100)}

/* ==========================================================================
   3. Layout
   ========================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--sec-y)}
.section + .section{padding-top:0}
.section--tint{background:var(--paper);border-block:1px solid var(--line)}
.section--tint + .section--tint{border-top:0}
.section + .section--tint,.section--tint,.section--white,.section--ink{padding-top:var(--sec-y)}
.section--white{background:var(--surface)}
.section--ink{background:var(--navy-900);color:#C9D3E6}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.section--ink p{color:#C9D3E6}
.section--ink a{color:#9FD9D0}
.lede{font-size:var(--step-1);color:var(--ink-2);max-width:64ch;line-height:1.6}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-600);margin-bottom:.8rem}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--coral);border-radius:2px}
.center{text-align:center} .center .lede{margin-inline:auto} .center .eyebrow{justify-content:center}
.muted{color:var(--ink-3)}
.section > .wrap > h2,.section > .wrap > .lede{max-width:62ch}
.section > .wrap > h2 + p,.section > .wrap > h2 + .lede{margin-bottom:1.5rem}

/* ==========================================================================
   4. Header / navigation
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)}
.site-header__bar{display:flex;align-items:center;gap:1rem;height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--ink);letter-spacing:-.02em;flex:none}
.brand:hover{text-decoration:none}
.brand__mark{width:36px;height:36px;flex:none;filter:drop-shadow(0 4px 10px rgba(242,99,74,.3))}
.brand b{color:var(--coral);font-weight:800}
.primary-nav{margin-left:auto;display:flex;align-items:center}
.primary-nav ul{display:flex;list-style:none;margin:0;padding:0;gap:.15rem}
.primary-nav li{margin:0}
.primary-nav a{display:flex;align-items:center;gap:.3rem;padding:.55rem .85rem;border-radius:var(--r-pill);color:var(--ink-2);font-weight:600;font-size:.95rem;white-space:nowrap}
.primary-nav a:hover{background:var(--g100);text-decoration:none;color:var(--ink)}
.primary-nav .current-menu-item>a,.primary-nav .current_page_item>a,.primary-nav .current-menu-ancestor>a{color:var(--teal-600)}
.menu-item-has-children{position:relative}
.menu-item-has-children>a::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:.2rem;opacity:.6}
.primary-nav .sub-menu{position:absolute;top:calc(100% + 10px);left:-.5rem;min-width:280px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);padding:.6rem;display:none;flex-direction:column;gap:.1rem}
.sub-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.primary-nav .menu-item-has-children:hover>.sub-menu,.primary-nav .menu-item-has-children:focus-within>.sub-menu{display:flex}
.primary-nav .mobile-actions{display:none}
.sub-menu li{margin:0}
.sub-menu a{padding:.55rem .8rem;border-radius:var(--r-xs);font-weight:500;color:var(--ink-2);font-size:.92rem}
.sub-menu a:hover{background:var(--teal-50);color:var(--teal-700)}
.sub-menu .current-menu-item>a{color:var(--teal-600);background:var(--teal-50)}
.header-actions{display:flex;gap:.5rem;align-items:center;flex:none;margin-left:.4rem}
.nav-toggle{display:none;margin-left:auto;background:var(--surface);border:1px solid var(--line);width:44px;height:44px;border-radius:var(--r-sm);cursor:pointer;align-items:center;justify-content:center;padding:0}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:20px;height:2px;background:var(--ink);position:relative;transition:.2s;border-radius:2px}
.nav-toggle span::before{position:absolute;top:-6px} .nav-toggle span::after{position:absolute;top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ==========================================================================
   5. Buttons & badges
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.35rem;border-radius:var(--r-pill);font-weight:700;font-size:.97rem;cursor:pointer;border:1.5px solid transparent;transition:.18s var(--ease);line-height:1.15;font-family:var(--font-body);white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--coral);color:#fff;box-shadow:0 8px 20px rgba(242,99,74,.28)}
.btn--primary:hover{background:var(--coral-600);box-shadow:0 10px 24px rgba(242,99,74,.34)}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--g300)}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal-700);background:var(--teal-50)}
.btn--teal{background:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-600)}
.btn--navy{background:var(--navy-900);color:#fff}
.btn--navy:hover{background:var(--navy-700)}
.btn--lg{padding:.95rem 1.7rem;font-size:1.05rem}
.btn--sm{padding:.5rem .95rem;font-size:.88rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.store-badges{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.store-badges a{display:inline-block;transition:.18s var(--ease);border-radius:14px}
.store-badges a:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.store-badges img{height:60px;width:auto}
.pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;letter-spacing:.01em;padding:.28rem .75rem;border-radius:var(--r-pill)}
.pill--coral{background:var(--coral-100);color:var(--coral-600)}
.pill--teal{background:var(--teal-100);color:var(--teal-700)}
.pill--ok{background:var(--green-50);color:var(--green)}
.pill--navy{background:var(--navy-900);color:#fff}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.hero{position:relative;overflow:hidden;padding-top:clamp(2.5rem,6vw,5rem);padding-bottom:clamp(2.5rem,6vw,5rem);
  background:radial-gradient(900px 520px at 8% -10%,var(--teal-50) 0%,transparent 60%),radial-gradient(800px 500px at 100% 0%,var(--coral-50) 0%,transparent 55%),var(--paper);border-bottom:1px solid var(--line)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.hero h1{margin-bottom:.45em}
.hero .lede{margin-bottom:1.6rem}
.hero__media{position:relative;min-width:0}
.hero__media img{width:100%;height:auto}
.hero__media .browser,.hero__media .shot{margin:0}
.hero-art{margin:0;filter:drop-shadow(0 30px 60px rgba(15,27,51,.14))}
.trust-row{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.6rem;color:var(--ink-3);font-size:.93rem;font-weight:500}
.trust-row span{display:inline-flex;align-items:center;gap:.45rem}
.trust-row span::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;background:var(--teal-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7A6E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.trust-row b{color:var(--ink)}
.hero--page{padding-top:clamp(2rem,5vw,3.5rem);padding-bottom:clamp(2rem,5vw,3.5rem)}

/* ==========================================================================
   7. Screenshot frames
   ========================================================================== */
.shot{margin:1.6rem 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);overflow:hidden}
.shot img{width:100%;display:block}
.shot figcaption,.figcap{font-size:.88rem;color:var(--ink-3);padding:.75rem 1rem .9rem;text-align:center;line-height:1.5;border-top:1px solid var(--g100);background:var(--g50)}
figure.shot--phone,.shot--phone{background:transparent;border:none;box-shadow:none;overflow:visible;text-align:center}
.shot--phone img{width:auto;max-width:min(300px,80vw);margin:0 auto;filter:drop-shadow(0 24px 40px rgba(15,27,51,.22))}
.shot--phone figcaption{background:transparent;border:none;margin-top:.5rem}
.shot--art{background:transparent;border:none;box-shadow:none}
.shot--art img{border-radius:var(--r)}
.shot--art figcaption{background:transparent;border:none}
.shot--banner{border:none;box-shadow:var(--sh-2);background:transparent}
.shot--banner figcaption{display:none}
.browser{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3);border:1px solid var(--line);background:var(--surface);margin:1.6rem 0}
.browser__bar{display:flex;align-items:center;gap:.4rem;padding:.65rem .9rem;background:var(--g100);border-bottom:1px solid var(--line)}
.browser__bar i{width:11px;height:11px;border-radius:50%;background:var(--g300)}
.browser__bar i:nth-child(1){background:#FF5F57}.browser__bar i:nth-child(2){background:#FEBC2E}.browser__bar i:nth-child(3){background:#28C840}
.browser__url{margin-left:.6rem;font-size:.78rem;color:var(--ink-3);background:var(--surface);border-radius:var(--r-xs);padding:.25rem .8rem;font-family:ui-monospace,monospace}
.browser img{width:100%;display:block}
.phone{max-width:300px;margin-inline:auto}
.phone img{width:100%;display:block;filter:drop-shadow(0 24px 40px rgba(15,27,51,.22))}
.media-duo{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}
.media-duo .phone{max-width:180px}
.banner-img{border-radius:var(--r-lg);box-shadow:var(--sh-2);width:100%}

/* ==========================================================================
   8. Cards, grids, feature blocks, icons
   ========================================================================== */
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem 1.6rem 1.5rem;box-shadow:var(--sh-1);display:flex;flex-direction:column;min-width:0}
.card--link{transition:.2s var(--ease);color:inherit}
.card--link:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--teal-100);text-decoration:none}
.card h3{font-size:var(--step-1);margin-bottom:.4em;letter-spacing:-.01em}
.card p{margin-bottom:0;color:var(--ink-2);font-size:.97rem;line-height:1.6}
.card .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:1rem;background:var(--teal-50);color:var(--teal-600);flex:none;font-size:0}
.card .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card .ic--coral{background:var(--coral-50);color:var(--coral-600)}
.card .ic--navy{background:var(--g100);color:var(--navy-700)}
.card .ic--amber{background:var(--amber-50);color:#9A6B00}
.card .ic--green{background:var(--green-50);color:var(--green)}
.card__more{display:inline-flex;align-items:center;gap:.3rem;margin-top:auto;padding-top:1rem;font-weight:700;color:var(--teal-600);font-size:.93rem}
.card__more::after{content:"→";transition:.15s}
.card--link:hover .card__more::after{transform:translateX(3px)}
.ic-inline{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:8px;background:var(--teal-50);color:var(--teal-600);vertical-align:middle;margin-right:.4em}
.ic-inline svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.8rem 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.2rem;text-align:center;box-shadow:var(--sh-1)}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(1.9rem,3vw,2.6rem);color:var(--navy-900);line-height:1;font-weight:800;letter-spacing:-.03em}
.stat span{display:block;margin-top:.45rem;color:var(--ink-3);font-size:.9rem;font-weight:500}

/* alternating feature blocks */
.feature-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,5vw,4.5rem);align-items:center;padding:clamp(1.5rem,3.5vw,3rem) 0}
.feature-row + .feature-row{border-top:1px solid var(--line)}
.feature-row:nth-of-type(even) .feature-row__media{order:-1}
.feature-row--flip .feature-row__media{order:-1}
.feature-row--flip:nth-of-type(even) .feature-row__media{order:0}
.feature-row__body h2{font-size:var(--step-3)}
.feature-row__body>p:last-child{margin-bottom:0}
.feature-row__media{min-width:0}
.feature-row__media .shot,.feature-row__media .browser{margin:0}
.check-list{list-style:none;padding:0;margin:1.2rem 0}
.check-list li{position:relative;padding-left:2rem;margin:.55rem 0;color:var(--ink-2)}
.check-list li::before{content:"";position:absolute;left:0;top:.3em;width:1.25rem;height:1.25rem;border-radius:50%;
  background:var(--teal-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7A6E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.check-list--x li::before{background:var(--coral-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D94C34' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/11px no-repeat}

/* steps */
.steps{counter-reset:step;display:grid;gap:1rem;margin:1.5rem 0;padding:0;list-style:none}
.steps ol{counter-reset:step;margin:0;padding:0;list-style:none;display:grid;gap:1rem}
.step,.steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.35rem 1.5rem 1.35rem 4.3rem;position:relative;margin:0;box-shadow:var(--sh-1)}
.step::before,.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:1.25rem;top:1.3rem;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--navy-900);color:#fff;display:grid;place-items:center;font-weight:800;font-family:var(--font-display);font-size:.95rem}
.step h3,.steps li h3{font-size:var(--step-1);margin-bottom:.3em}
.step p:last-child,.steps li p:last-child{margin-bottom:0}
.steps--inline{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps--visual{grid-template-columns:repeat(3,1fr);gap:1.25rem}
.steps--visual .step{padding:3.6rem 1.4rem 1.5rem;display:flex;flex-direction:column}
.steps--visual .step::before{left:1.25rem;top:1.25rem}
.steps--visual .step .shot{margin:0 0 1.1rem;order:-1;flex:none}
.steps--visual .step .shot--phone img{max-width:190px}
.steps--visual .step .shot img{width:100%}
.steps--visual .step h3{margin-top:.2rem}
.feature-row__media .shot + .shot{margin-top:1.1rem}
.grid .shot{margin:0}
.grid .shot--phone{display:flex;flex-direction:column;align-items:center}
.grid .shot--phone img{max-width:230px}
.media-pair{gap:.75rem}
.media-pair .shot--phone img{max-width:200px}
.feature-row__media .media-pair .shot{margin:0}
@media (max-width:960px){.steps--visual{grid-template-columns:1fr}}

/* ==========================================================================
   9. Banners / CTA / callouts
   ========================================================================== */
.banner{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(1.9rem,4.5vw,3.2rem);margin:2rem 0;
  background:linear-gradient(120deg,var(--navy-900) 0%,var(--navy-800) 55%,#1E3A6E 100%);color:#fff;box-shadow:var(--sh-2)}
.banner--teal{background:linear-gradient(120deg,var(--teal-700) 0%,var(--teal) 100%)}
.banner--coral{background:linear-gradient(120deg,var(--coral-600) 0%,var(--coral) 100%)}
.banner h2,.banner h3{color:#fff;max-width:26ch;font-size:var(--step-3)}
.banner p{color:rgba(255,255,255,.85);margin-bottom:1.3rem;max-width:60ch;font-size:1.02rem}
.banner .btn--primary{background:#fff;color:var(--navy-900);box-shadow:none}
.banner .btn--primary:hover{background:var(--teal-50)}
.banner .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.banner .btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.banner__deco{position:absolute;right:-90px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(14,147,132,.55),transparent 70%);pointer-events:none}
.banner__deco::after{content:"";position:absolute;left:-260px;top:300px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(242,99,74,.35),transparent 70%)}
.banner>*:not(.banner__deco){position:relative}
.callout{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--r-sm);padding:1.15rem 1.35rem;margin:1.5rem 0;box-shadow:var(--sh-1)}
.callout--coral{border-left-color:var(--coral)}
.callout strong,.callout b{color:var(--ink)}
.callout p:last-child{margin-bottom:0}
.note-transparency{position:relative;background:var(--teal-50);border:1px solid var(--teal-100);border-radius:var(--r);padding:1.2rem 1.4rem 1.2rem 3.6rem;margin:1.6rem 0;color:var(--teal-700)}
.note-transparency::before{content:"";position:absolute;left:1.15rem;top:1.25rem;width:1.5rem;height:1.5rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat}
.note-transparency b,.note-transparency strong{color:var(--teal-700)}

/* comparison / table */
.table-wrap{overflow-x:auto;margin:1.5rem 0;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-1)}
table.data,.table-wrap table{width:100%;border-collapse:collapse;background:var(--surface);min-width:520px}
table.data th,table.data td,.table-wrap th,.table-wrap td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:top}
table.data th,.table-wrap th{background:var(--g50);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
table.data tr:last-child td,.table-wrap tr:last-child td{border-bottom:none}

/* FAQ */
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);margin:.65rem 0;padding:0 1.3rem;transition:.15s}
.faq details[open]{border-color:var(--teal-100);box-shadow:var(--sh-1)}
.faq summary{cursor:pointer;font-weight:700;padding:1.05rem 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--ink);font-family:var(--font-display);font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--g100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1B33' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat;transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--teal-100)}
.faq details[open]{padding-bottom:.8rem}
.faq details>p,.faq details>div{margin-top:0;color:var(--ink-2)}

/* pros/cons */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin:1.5rem 0}
.pc>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.5rem;box-shadow:var(--sh-1)}
.pc h4{margin-bottom:.7em;display:flex;align-items:center;gap:.5rem}
.pc>div:first-child{border-top:4px solid var(--teal)} .pc>div:last-child{border-top:4px solid var(--coral)}
.pc ul{margin-bottom:0}

/* ==========================================================================
   10. Article / blog
   ========================================================================== */
.article{max-width:var(--wrap-narrow);margin-inline:auto}
.article h2{margin-top:2em;font-size:var(--step-2)}
.article h3{margin-top:1.5em;font-size:var(--step-1)}
.article img{border-radius:var(--r-sm)}
.article .shot img,.article .shot--phone img{border-radius:0}
.article .shot--phone img{border-radius:0}
.article .toc{margin:1.8rem 0}
.article .lede{font-size:var(--step-1)}
.post-meta{color:var(--ink-3);font-size:.9rem;margin-bottom:1.6rem;display:flex;gap:.5rem 1.2rem;flex-wrap:wrap;align-items:center}
.post-meta a{color:var(--teal-600);font-weight:600}
.entry-title--page{font-size:var(--step-4);max-width:22ch}
.page-head{padding-top:clamp(1.8rem,4.5vw,3.2rem)}
.page-head--tint{background:var(--paper);border-bottom:1px solid var(--line);padding-bottom:clamp(1.8rem,4vw,2.8rem);margin-bottom:0}
.breadcrumbs{font-size:.85rem;color:var(--ink-3);margin-bottom:1rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.breadcrumbs a{color:var(--ink-3)} .breadcrumbs a:hover{color:var(--teal-600)}
.breadcrumbs span[aria-current]{color:var(--ink);font-weight:500}
.post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);transition:.2s var(--ease);display:flex;flex-direction:column;color:inherit}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);text-decoration:none;border-color:var(--teal-100)}
.post-card__img{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--teal-50),var(--coral-50))}
.post-card__img img{width:100%;height:100%;object-fit:cover;transition:.4s var(--ease)}
.post-card:hover .post-card__img img{transform:scale(1.03)}
.post-card__body{padding:1.25rem 1.35rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.post-card__meta{display:flex;gap:.6rem;align-items:center;font-size:.8rem;color:var(--ink-3);font-weight:500}
.post-card h3{font-size:var(--step-1);margin:0;line-height:1.3}
.post-card p{margin:0;color:var(--ink-2);font-size:.93rem;line-height:1.55}
.toc{background:var(--g50);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.5rem;margin:1.6rem 0}
.toc strong{display:block;margin-bottom:.6rem;font-family:var(--font-display);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.toc ul{margin:0;padding-left:0;list-style:none;columns:2;column-gap:1.5rem}
.toc li{margin:.3rem 0;break-inside:avoid}
.toc a{color:var(--ink-2);font-weight:500;font-size:.95rem}
.toc a:hover{color:var(--teal-600)}
.related{margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.related h2{font-size:var(--step-2);margin-bottom:1.2rem}
.author-box{display:flex;gap:1rem;align-items:flex-start;background:var(--g50);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.4rem;margin-top:2.5rem}
.author-box__av{width:52px;height:52px;border-radius:50%;flex:none;background:var(--navy-900);color:#fff;display:grid;place-items:center;font-weight:800;font-family:var(--font-display)}
.author-box p{margin:0;font-size:.93rem;color:var(--ink-2)}
.author-box b{display:block;color:var(--ink);margin-bottom:.15rem}
.pagination,.navigation.pagination{display:flex;justify-content:center;margin-top:2.5rem}
.nav-links{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.nav-links .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 .8rem;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-weight:600}
.nav-links .page-numbers.current{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}
.nav-links a.page-numbers:hover{border-color:var(--teal);color:var(--teal-700);text-decoration:none}
.search-form{display:flex;gap:.5rem;margin-top:1.5rem}
.search-form input[type=search]{flex:1;border:1px solid var(--g300);border-radius:var(--r-pill);padding:.7rem 1.1rem;font:inherit}
.search-form button,.search-form input[type=submit]{border:none;border-radius:var(--r-pill);padding:.7rem 1.2rem;background:var(--navy-900);color:#fff;font-weight:700;cursor:pointer}
.wp-block-image img,.alignwide{border-radius:var(--r)}
.contact-form{display:grid;gap:1rem;margin:1.5rem 0}
.contact-form label{font-weight:600;font-size:.95rem;display:grid;gap:.35rem}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;border:1px solid var(--g300);border-radius:var(--r-sm);padding:.75rem .95rem;font:inherit;background:var(--surface)}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-100);outline:none}

/* ==========================================================================
   11. Footer
   ========================================================================== */
.site-footer{background:var(--navy-900);color:#AEBBD3;padding-block:clamp(3rem,6vw,4.5rem) 1.8rem;margin-top:3rem;position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;right:-200px;top:-300px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(14,147,132,.35),transparent 70%);pointer-events:none}
.site-footer a{color:#D5DEEC}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;position:relative}
.footer-brand .brand{color:#fff}
.footer-brand p{color:#AEBBD3;font-size:.94rem;max-width:36ch;line-height:1.6;margin-top:1rem}
.footer-brand .store-badges{margin-top:1.2rem}
.footer-brand .store-badges img{height:44px}
.footer-col h4{color:#fff;font-family:var(--font-body);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;font-weight:700}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:.5rem 0}
.footer-col a{font-size:.94rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.6rem;padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1.5rem;font-size:.85rem;color:#7C8BA8;position:relative}
.footer-bottom a{color:#AEBBD3;text-decoration:underline}
.footer-trust{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}
.footer-trust span{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:#AEBBD3;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-pill);padding:.35rem .8rem}
.footer-trust svg{width:14px;height:14px;stroke:#9FD9D0;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   12. Utilities & responsive
   ========================================================================== */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-2{margin-top:2rem}.mb-2{margin-bottom:2rem}
.maxw{max-width:var(--wrap-narrow);margin-inline:auto}
.text-center{text-align:center}
.hide-desktop{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:2rem}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:960px){
  :root{--hdr-h:68px}
  .hero__grid,.feature-row{grid-template-columns:1fr}
  .feature-row:nth-of-type(even) .feature-row__media{order:0}
  .feature-row__media{max-width:640px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .primary-nav,.header-actions{display:none}
  .nav-toggle{display:flex}
  .primary-nav.is-open{display:block;position:fixed;inset:var(--hdr-h) 0 0;background:var(--surface);padding:1rem var(--gutter) 2rem;overflow:auto;z-index:99}
  .primary-nav.is-open ul{flex-direction:column;gap:0}
  .primary-nav.is-open a{padding:.9rem .3rem;font-size:1.08rem;border-bottom:1px solid var(--line);border-radius:0}
  .primary-nav.is-open .menu-item-has-children>a::after{display:none}
  .primary-nav.is-open .sub-menu{position:static;display:flex;box-shadow:none;border:none;padding:0 0 .5rem 1rem;min-width:0}
  .primary-nav.is-open .sub-menu a{font-size:.98rem;padding:.6rem .3rem;border-bottom:1px dashed var(--line)}
  .primary-nav.is-open .mobile-actions{display:flex;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}
  .primary-nav .mobile-actions{display:none}
  .toc ul{columns:1}
}
@media (max-width:600px){
  .grid-2,.grid-3,.grid-4,.pc{grid-template-columns:1fr}
  .grid-2,.grid-3,.grid-4,.pc{gap:1rem}
  h1{font-size:var(--step-4)}
  .store-badges img{height:50px}
  .btn--lg{padding:.85rem 1.35rem;font-size:1rem}
  .btn-row .btn{width:100%}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .banner{border-radius:var(--r-lg)}
  .step,.steps li{padding-left:3.7rem}
  .step::before,.steps li::before{left:1rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
@media print{.site-header,.site-footer,.banner,.nav-toggle{display:none}}