/* ==========================================================================
   DOTEDGE Device Care — shared design system
   Repair · Trade-in · Refurbish · Resell   (Singapore)

   One stylesheet for every page. In WordPress this becomes the theme's
   style.css (or is enqueued via wp_enqueue_style) — nothing here depends on
   page-specific markup, so a WP template using the same class names inherits
   the whole system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Brand — blue does the work, yellow is the accent that marks value/savings */
  --blue:#0F57CF;
  --blue-deep:#0B3E96;
  --blue-dark:#082C6B;
  --blue-tint:#E5EEFC;
  --blue-tint-2:#D2E1FA;
  --yellow:#FFEA00;
  --yellow-deep:#E6D200;
  --yellow-tint:#FFF7CC;
  --yellow-ink:#7A6000;

  /* Ink & surfaces */
  --ink:#0D1420;
  --ink-2:#1F2937;
  --ink-dim:#5B6472;
  --ink-faint:#8B94A0;
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F5F7FA;
  --surface-3:#ECEFF4;
  --surface-ink:#0D1420;

  --line:rgba(13,20,32,0.08);
  --line-strong:rgba(13,20,32,0.16);

  /* Status */
  --success:#0F7A46;
  --success-tint:#E4F5EC;
  --warn:#B45309;
  --warn-tint:#FEF3C7;
  --danger:#DC2626;
  --danger-tint:#FEE2E2;

  /* Grade colours — kept consistent across every page */
  --grade-a-bg:#FFF7CC; --grade-a-ink:#7A6000;
  --grade-b-bg:#E5EEFC; --grade-b-ink:#0B3E96;
  --grade-c-bg:#FEF3C7; --grade-c-ink:#92400E;
  --grade-d-bg:#F1F2F5; --grade-d-ink:#4B5563;

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(13,20,32,0.06);
  --shadow-sm:0 4px 12px -6px rgba(13,20,32,0.16);
  --shadow-md:0 20px 40px -24px rgba(13,20,32,0.30);
  --shadow-lg:0 34px 64px -22px rgba(13,20,32,0.26);
  --shadow-blue:0 18px 36px -18px rgba(15,87,207,0.55);

  /* Type */
  --display:'Poppins','Helvetica Neue',Arial,sans-serif;
  --body-font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Consolas,monospace;

  /* Radii & rhythm */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --wrap:1180px;
  --wrap-narrow:820px;
  --gut:1.5rem;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body-font); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--blue); text-decoration:none;}
a:hover{color:var(--blue-deep);}
button{font-family:inherit;}
h1,h2,h3,h4,h5{font-family:var(--display); line-height:1.18; margin:0 0 0.6rem; letter-spacing:-0.02em;}
h1{font-size:clamp(2.1rem, 5.2vw, 3.5rem); font-weight:800;}
h2{font-size:clamp(1.7rem, 3.6vw, 2.5rem); font-weight:800;}
h3{font-size:clamp(1.15rem, 2vw, 1.4rem); font-weight:700;}
h4{font-size:1.02rem; font-weight:700;}
p{margin:0 0 1rem;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0 0 1rem; padding-left:1.15rem;}
li{margin-bottom:0.4rem;}
strong{font-weight:700;}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:4px;}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999; background:var(--ink); color:#fff;
  padding:0.8rem 1.2rem; border-radius:0 0 var(--r-sm) 0; font-weight:700;
}
.skip-link:focus{left:0; color:#fff;}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);}
.wrap-narrow{width:100%; max-width:var(--wrap-narrow); margin:0 auto; padding:0 var(--gut);}
.section{padding:clamp(3.4rem, 7vw, 6rem) 0;}
.section-tight{padding:clamp(2.4rem, 5vw, 4rem) 0;}
.section-alt{background:var(--surface-2);}
.section-ink{background:var(--surface-ink); color:#fff;}
.section-ink h2,.section-ink h3{color:#fff;}
.section-ink p{color:rgba(255,255,255,0.76);}
.section-blue{background:linear-gradient(160deg,var(--blue) 0%,var(--blue-dark) 100%); color:#fff;}
.section-blue h2,.section-blue h3{color:#fff;}
.section-blue p{color:rgba(255,255,255,0.84);}

.section-head{max-width:660px; margin-bottom:clamp(2rem,4vw,3rem);}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head p{color:var(--ink-dim); font-size:1.03rem; margin-bottom:0;}
.section-ink .section-head p,.section-blue .section-head p{color:rgba(255,255,255,0.78);}

.eyebrow{
  display:inline-block; font-family:var(--mono); font-size:0.72rem; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--blue); margin-bottom:0.7rem;
}
.section-ink .eyebrow,.section-blue .eyebrow{color:var(--yellow);}

.grid{display:grid; gap:1.4rem;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.lede{font-size:1.08rem; color:var(--ink-dim);}

/* --------------------------------------------------------------------------
   4. Announcement bar + header
   -------------------------------------------------------------------------- */
.announce{
  background:var(--ink); color:rgba(255,255,255,0.9); font-size:0.78rem; font-weight:500;
  padding:0.55rem 0; text-align:center; letter-spacing:0.01em;
}
.announce strong{color:var(--yellow); font-weight:700;}
.announce .sep{opacity:0.4; margin:0 0.7rem;}
@media (max-width:640px){ .announce .hide-sm{display:none;} }

.site-header{
  position:sticky; top:0; z-index:200; background:rgba(255,255,255,0.94);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line); transition:box-shadow .25s ease;
}
.site-header.scrolled{box-shadow:var(--shadow-sm);}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1.2rem; height:70px;}

.brand{display:flex; flex-direction:column; line-height:1; text-decoration:none;}
.brand-name{font-family:var(--display); font-weight:800; font-size:1.4rem; color:var(--ink); letter-spacing:-0.03em;}
.brand-sub{font-family:var(--mono); font-size:0.56rem; font-weight:600; letter-spacing:0.22em; color:var(--blue); text-transform:uppercase; margin-top:2px;}

.main-nav{display:flex; align-items:center; gap:0.35rem;}
.main-nav a{
  padding:0.55rem 0.8rem; border-radius:var(--r-sm); font-size:0.9rem; font-weight:600;
  color:var(--ink-2); transition:background .15s ease, color .15s ease;
}
.main-nav a:hover{background:var(--surface-2); color:var(--ink);}
.main-nav a.active{color:var(--blue); background:var(--blue-tint);}

.header-actions{display:flex; align-items:center; gap:0.6rem;}
.cart-link{
  position:relative; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--ink); background:var(--surface);
  transition:border-color .15s ease, background .15s ease;
}
.cart-link:hover{border-color:var(--blue); background:var(--blue-tint);}
.cart-link svg{width:19px; height:19px;}
.cart-badge{
  position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:var(--yellow); color:var(--ink); font-size:0.66rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff;
}
.cart-badge[hidden]{display:none;}

.nav-toggle{
  display:none; width:42px; height:42px; border-radius:var(--r-sm); border:1px solid var(--line-strong);
  background:var(--surface); align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
}
.nav-toggle svg{width:20px; height:20px;}

@media (max-width:980px){
  .main-nav{
    position:fixed; inset:0 0 auto 0; top:var(--header-offset,70px); flex-direction:column; align-items:stretch;
    background:#fff; border-bottom:1px solid var(--line); padding:0.8rem var(--gut) 1.4rem;
    gap:0.15rem; box-shadow:var(--shadow-md); transform:translateY(-12px); opacity:0;
    visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .main-nav.open{opacity:1; transform:translateY(0); visibility:visible;}
  .main-nav a{padding:0.85rem 0.8rem; font-size:1rem; border-radius:var(--r-sm);}
  .nav-toggle{display:flex;}
  .header-cta-desktop{display:none;}
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.85rem 1.5rem; border-radius:999px; border:1px solid transparent;
  font-family:var(--display); font-size:0.94rem; font-weight:700; letter-spacing:-0.01em;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .12s ease, box-shadow .2s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:active{transform:translateY(1px) scale(0.99);}
.btn svg{width:17px; height:17px; flex-shrink:0;}

.btn-primary{background:var(--blue); color:#fff; box-shadow:var(--shadow-blue);}
.btn-primary:hover{background:var(--blue-deep); color:#fff; box-shadow:0 22px 42px -18px rgba(15,87,207,0.65);}
.btn-yellow{background:var(--yellow); color:var(--ink); box-shadow:0 16px 32px -18px rgba(230,210,0,0.9);}
.btn-yellow:hover{background:var(--yellow-deep); color:var(--ink);}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-outline:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-tint);}
.btn-ghost-light{background:rgba(255,255,255,0.12); color:#fff; border-color:rgba(255,255,255,0.32);}
.btn-ghost-light:hover{background:rgba(255,255,255,0.2); color:#fff;}
.btn-white{background:#fff; color:var(--blue); }
.btn-white:hover{background:var(--blue-tint); color:var(--blue-deep);}
.btn-lg{padding:1.05rem 1.9rem; font-size:1.01rem;}
.btn-sm{padding:0.6rem 1.1rem; font-size:0.84rem;}
.btn-block{display:flex; width:100%;}
.btn[disabled],.btn:disabled{opacity:0.45; cursor:not-allowed; box-shadow:none; transform:none;}
.btn-row{display:flex; flex-wrap:wrap; gap:0.8rem;}

.link-arrow{display:inline-flex; align-items:center; gap:0.35rem; font-weight:700; font-size:0.92rem;}
.link-arrow svg{width:15px; height:15px; transition:transform .18s ease;}
.link-arrow:hover svg{transform:translateX(3px);}

/* --------------------------------------------------------------------------
   6. Pills, badges, tags
   -------------------------------------------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:0.4rem; padding:0.34rem 0.8rem; border-radius:999px;
  font-size:0.74rem; font-weight:700; letter-spacing:0.01em; background:var(--surface-2); color:var(--ink-dim);
}
.pill svg{width:13px; height:13px;}
.pill-blue{background:var(--blue-tint); color:var(--blue-deep);}
.pill-yellow{background:var(--yellow-tint); color:var(--yellow-ink);}
.pill-success{background:var(--success-tint); color:var(--success);}
.pill-warn{background:var(--warn-tint); color:var(--warn);}
.pill-light{background:rgba(255,255,255,0.16); color:#fff;}

.grade-tag{
  display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:24px; padding:0 0.5rem;
  border-radius:var(--r-xs); font-family:var(--mono); font-size:0.74rem; font-weight:700;
}
.grade-tag.grade-a{background:var(--grade-a-bg); color:var(--grade-a-ink);}
.grade-tag.grade-b{background:var(--grade-b-bg); color:var(--grade-b-ink);}
.grade-tag.grade-c{background:var(--grade-c-bg); color:var(--grade-c-ink);}
.grade-tag.grade-d{background:var(--grade-d-bg); color:var(--grade-d-ink);}

.note{
  font-size:0.8rem; color:var(--ink-faint); line-height:1.55;
}
.disclaimer{
  background:var(--surface-2); border-left:3px solid var(--line-strong); border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:0.85rem 1.1rem; font-size:0.82rem; color:var(--ink-dim); line-height:1.55;
}
.callout{
  background:var(--blue-tint); border-radius:var(--r-md); padding:1.2rem 1.4rem;
  font-size:0.9rem; color:var(--blue-dark); line-height:1.6;
}
.callout strong{color:var(--blue-dark);}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.7rem; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-hover:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent;}
.card h3{margin-bottom:0.5rem;}
.card p{color:var(--ink-dim); font-size:0.92rem; margin-bottom:0;}

.icon-badge{
  width:46px; height:46px; border-radius:14px; background:var(--blue-tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem;
}
.icon-badge svg{width:22px; height:22px;}
.icon-badge.yellow{background:var(--yellow-tint); color:var(--yellow-ink);}
.icon-badge.ink{background:var(--surface-3); color:var(--ink);}

/* Path cards — the four things that can happen to a device */
.path-card{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.7rem 1.5rem; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;
}
.path-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.path-card .path-num{
  font-family:var(--mono); font-size:0.72rem; font-weight:700; color:var(--blue); letter-spacing:0.12em;
}
.path-card h3{margin:0.7rem 0 0.5rem;}
.path-card p{font-size:0.9rem; color:var(--ink-dim); margin-bottom:0.9rem;}
.path-card .link-arrow{font-size:0.86rem;}
.path-card::after{
  content:""; position:absolute; inset:auto -30% -60% auto; width:180px; height:180px; border-radius:50%;
  background:var(--blue-tint); opacity:0; transition:opacity .3s ease; z-index:-1;
}
.path-card:hover::after{opacity:0.5;}

/* Step / timeline */
.steps{display:grid; gap:1.2rem; grid-template-columns:repeat(4,1fr); counter-reset:step;}
.step{position:relative; padding-top:2.6rem;}
.step::before{
  counter-increment:step; content:"0" counter(step);
  position:absolute; top:0; left:0; font-family:var(--mono); font-size:0.78rem; font-weight:700;
  color:var(--blue); background:var(--blue-tint); border-radius:999px; padding:0.3rem 0.7rem;
}
.step h3{font-size:1.05rem; margin-bottom:0.35rem;}
.step p{font-size:0.88rem; color:var(--ink-dim); margin:0;}
.step .step-time{font-family:var(--mono); font-size:0.74rem; color:var(--ink-faint); display:block; margin-top:0.5rem;}
.section-ink .step::before,.section-blue .step::before{background:rgba(255,255,255,0.14); color:var(--yellow);}
.section-ink .step p,.section-blue .step p{color:rgba(255,255,255,0.72);}
.section-ink .step .step-time,.section-blue .step .step-time{color:rgba(255,255,255,0.5);}

/* Stat tiles — only ever policy facts, never invented history */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:1.3rem 1.4rem;}
.stat-num{font-family:var(--display); font-size:1.75rem; font-weight:800; color:var(--blue); letter-spacing:-0.03em; line-height:1.1;}
.stat-label{font-size:0.82rem; color:var(--ink-dim); margin-top:0.3rem;}
.section-ink .stat,.section-blue .stat{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.14);}
.section-ink .stat-num,.section-blue .stat-num{color:var(--yellow);}
.section-ink .stat-label,.section-blue .stat-label{color:rgba(255,255,255,0.72);}

/* Feature list with ticks */
.tick-list{list-style:none; padding:0; margin:0;}
.tick-list li{position:relative; padding-left:1.75rem; margin-bottom:0.65rem; font-size:0.92rem; color:var(--ink-dim);}
.tick-list li::before{
  content:""; position:absolute; left:0; top:0.42em; width:15px; height:15px; border-radius:50%;
  background:var(--blue-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F57CF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.tick-list.on-dark li{color:rgba(255,255,255,0.78);}
.tick-list.on-dark li::before{background-color:rgba(255,255,255,0.16);}
.cross-list li::before{
  background:var(--danger-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; padding:clamp(3rem,6vw,5.2rem) 0 clamp(3.4rem,7vw,5.6rem);
  background:
    radial-gradient(900px 520px at 88% -8%, var(--blue-tint) 0%, transparent 62%),
    radial-gradient(600px 400px at 4% 108%, var(--yellow-tint) 0%, transparent 60%),
    var(--paper);
}
.hero-grid{display:grid; grid-template-columns:1.06fr 0.94fr; gap:clamp(2rem,4vw,3.4rem); align-items:center;}
.hero h1{margin-bottom:1.1rem;}
/* Marker highlight. Defined as a banded stripe rather than a fill running to
   the bottom edge, so that when a highlighted phrase wraps across lines each
   fragment still reads as a deliberate highlighter stroke instead of a stray bar. */
.hero h1 .hl,
.page-hero h1 .hl{
  background:linear-gradient(180deg, transparent 58%, var(--yellow) 58%, var(--yellow) 93%, transparent 93%);
  padding:0 0.12em; border-radius:2px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.hero-sub{font-size:clamp(1rem,1.4vw,1.14rem); color:var(--ink-dim); max-width:48ch; margin-bottom:1.7rem;}
.hero-trust{display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.6rem;}

/* Hero page header for interior pages */
.page-hero{
  padding:clamp(2.6rem,5vw,4.2rem) 0 clamp(2.2rem,4vw,3.4rem);
  background:radial-gradient(760px 420px at 92% -20%, var(--blue-tint) 0%, transparent 64%), var(--paper);
  border-bottom:1px solid var(--line);
}
.page-hero h1{margin-bottom:0.9rem;}
.page-hero .lede{max-width:60ch;}
.breadcrumb{display:flex; flex-wrap:wrap; gap:0.4rem; font-size:0.78rem; color:var(--ink-faint); margin-bottom:1rem; list-style:none; padding:0;}
.breadcrumb li{margin:0;}
.breadcrumb li+li::before{content:"/"; margin-right:0.4rem; opacity:0.5;}
.breadcrumb a{color:var(--ink-faint);}
.breadcrumb a:hover{color:var(--blue);}

/* The signature "two offers, one device" visual */
.dual-quote{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); padding:1.5rem; position:relative;
}
.dual-quote-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem;}
.dq-device{display:flex; align-items:center; gap:0.8rem;}
.dq-device img{width:52px; height:52px; object-fit:contain;}
.dq-device .dq-name{font-weight:700; font-size:0.95rem; line-height:1.3;}
.dq-device .dq-meta{font-size:0.76rem; color:var(--ink-faint);}
.dq-options{display:grid; grid-template-columns:1fr 1fr; gap:0.8rem;}
.dq-option{
  border:1.5px solid var(--line); border-radius:var(--r-md); padding:1.1rem 1rem; text-align:center;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.dq-option .dq-label{font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);}
.dq-option .dq-amount{font-family:var(--display); font-size:1.7rem; font-weight:800; letter-spacing:-0.03em; margin:0.3rem 0 0.15rem;}
.dq-option .dq-foot{font-size:0.74rem; color:var(--ink-dim);}
.dq-option.is-repair{background:var(--surface-2);}
.dq-option.is-repair .dq-amount{color:var(--ink);}
.dq-option.is-sell{background:var(--blue-tint); border-color:var(--blue);}
.dq-option.is-sell .dq-amount{color:var(--blue);}
.dq-vs{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono);
  font-size:0.66rem; font-weight:700; border:3px solid #fff; z-index:2;
}
.dq-options-wrap{position:relative;}
.dual-quote-foot{
  margin-top:1.1rem; padding-top:1rem; border-top:1px dashed var(--line-strong);
  font-size:0.79rem; color:var(--ink-dim); text-align:center;
}

.hero-media{position:relative; display:flex; align-items:center; justify-content:center; min-height:300px;}
.hero-phone{
  width:min(58%,300px); filter:drop-shadow(0 34px 44px rgba(13,20,32,0.22));
  animation:float 6s ease-in-out infinite;
}
.hero-phone-2{
  position:absolute; width:min(40%,208px); left:4%; bottom:2%;
  filter:drop-shadow(0 24px 34px rgba(13,20,32,0.18)); animation:float 6s ease-in-out infinite 0.8s; opacity:0.96;
}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
@media (prefers-reduced-motion: reduce){ .hero-phone,.hero-phone-2{animation:none;} }

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{order:-1; min-height:230px;}
  .hero-phone{width:min(46%,220px);}
  .hero-phone-2{width:min(32%,150px);}
}

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-md); border:1px solid var(--line);}
table.dt{width:100%; border-collapse:collapse; background:var(--surface); min-width:560px;}
table.dt th,table.dt td{padding:0.85rem 1.1rem; text-align:left; font-size:0.89rem; border-bottom:1px solid var(--line);}
table.dt thead th{
  background:var(--surface-2); font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-dim); font-weight:600; white-space:nowrap;
}
table.dt tbody tr:last-child td{border-bottom:none;}
table.dt tbody tr:hover{background:var(--surface-2);}
table.dt td.num{font-family:var(--mono); font-weight:600; white-space:nowrap;}
table.dt .col-premium{background:rgba(15,87,207,0.035);}
table.dt th.col-premium{background:var(--blue-tint); color:var(--blue-deep);}
table.dt .svc{font-weight:600; color:var(--ink);}

/* --------------------------------------------------------------------------
   10. Accordion / FAQ
   -------------------------------------------------------------------------- */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; background:none; border:none; text-align:left; cursor:pointer;
  padding:1.2rem 2.6rem 1.2rem 0; position:relative;
  font-family:var(--display); font-size:1rem; font-weight:600; color:var(--ink); line-height:1.45;
}
.faq-q::after{
  content:""; position:absolute; right:0.4rem; top:50%; width:12px; height:12px; margin-top:-6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/12px no-repeat;
  transition:transform .22s ease;
}
.faq-item.open .faq-q::after{transform:rotate(180deg);}
.faq-item.open .faq-q{color:var(--blue);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a-inner{padding:0 2.6rem 1.3rem 0; color:var(--ink-dim); font-size:0.93rem;}

/* --------------------------------------------------------------------------
   11. Forms & selectable options
   -------------------------------------------------------------------------- */
.form-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(1.5rem,3vw,2.4rem); box-shadow:var(--shadow-md);
}
.field{margin-bottom:1.6rem;}
.field > label,.field-label{
  display:block; font-size:0.86rem; font-weight:600; color:var(--ink); margin-bottom:0.65rem;
}
.field-label .req{color:var(--danger); font-weight:700;}
.field-help{font-size:0.78rem; color:var(--ink-faint); margin:-0.35rem 0 0.6rem;}

.input,.select,.textarea{
  width:100%; padding:0.85rem 1rem; border-radius:var(--r-sm); border:1px solid var(--line-strong);
  background:var(--paper); color:var(--ink); font-family:var(--body-font); font-size:0.97rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint);
}
.textarea{min-height:110px; resize:vertical;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}

/* Option pills (single-select) */
.opt-row{display:flex; gap:0.6rem; flex-wrap:wrap;}
.opt-pill{
  position:relative; flex:1; min-width:112px; border:1px solid var(--line-strong); background:var(--surface);
  border-radius:999px; padding:0.75rem 1rem; text-align:center; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.opt-pill:hover{border-color:var(--blue);}
.opt-pill:active{transform:scale(0.98);}
.opt-pill .opt-t{display:block; font-weight:700; font-size:0.93rem; color:var(--ink);}
.opt-pill.selected{background:var(--blue); border-color:var(--blue);}
.opt-pill.selected .opt-t{color:#fff;}

/* Option cards (icon + label, single-select) */
.opt-card-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0.7rem;}
.opt-card{
  position:relative; border:1px solid var(--line-strong); background:var(--surface); border-radius:var(--r-md);
  padding:1.1rem 0.6rem; text-align:center; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:0.55rem; transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.opt-card:hover{border-color:var(--blue);}
.opt-card:active{transform:scale(0.98);}
.opt-card svg{width:26px; height:26px; color:var(--ink-faint);}
.opt-card .opt-t{font-size:0.82rem; font-weight:600; color:var(--ink); line-height:1.3;}
.opt-card.selected{background:var(--blue-tint); border-color:var(--blue);}
.opt-card.selected svg{color:var(--blue);}

/* Yes/No toggles */
.toggle-q{font-size:0.9rem; color:var(--ink); margin:0 0 0.6rem; font-weight:500;}
.toggle-q .req{color:var(--danger); font-weight:700;}
.toggle-row{display:flex; gap:0.7rem; margin-bottom:1.4rem;}
.opt-toggle{
  position:relative; flex:1; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  border-radius:999px; padding:0.9rem 1rem; text-align:center; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease;
}
.opt-toggle .opt-t{display:block; font-weight:700; font-size:0.94rem;}
.opt-toggle:active{transform:scale(0.98);}
.opt-toggle.selected.good{background:var(--blue); border-color:var(--blue); color:#fff;}
.opt-toggle.selected.bad{background:var(--danger); border-color:var(--danger); color:#fff;}

/* Multi-select checkbox tiles (repair problems) */
.check-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0.7rem;}
.check-tile{
  position:relative; display:flex; align-items:center; gap:0.7rem; padding:0.9rem 1rem;
  border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.check-tile:hover{border-color:var(--blue);}
.check-tile:active{transform:scale(0.99);}
.check-tile .ct-box{
  width:19px; height:19px; border-radius:5px; border:1.5px solid var(--line-strong); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease, border-color .15s ease;
}
.check-tile .ct-box svg{width:12px; height:12px; color:#fff; opacity:0;}
.check-tile .ct-label{font-size:0.88rem; font-weight:600; color:var(--ink); line-height:1.3;}
.check-tile .ct-price{font-family:var(--mono); font-size:0.75rem; color:var(--ink-faint); display:block; font-weight:500;}
.check-tile.selected{background:var(--blue-tint); border-color:var(--blue);}
.check-tile.selected .ct-box{background:var(--blue); border-color:var(--blue);}
.check-tile.selected .ct-box svg{opacity:1;}

/* Tier selector (parts quality) */
.tier-row{display:grid; grid-template-columns:repeat(3,1fr); gap:0.8rem;}
.tier-card{
  position:relative; border:1.5px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface);
  padding:1.2rem 1.1rem; cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.tier-card:hover{border-color:var(--blue); transform:translateY(-2px);}
.tier-card .tier-name{font-weight:700; font-size:0.96rem; margin-bottom:0.2rem;}
.tier-card .tier-desc{font-size:0.79rem; color:var(--ink-dim); line-height:1.5;}
.tier-card .tier-mult{font-family:var(--mono); font-size:0.74rem; color:var(--blue); font-weight:600; margin-top:0.5rem; display:block;}
.tier-card.selected{border-color:var(--blue); background:var(--blue-tint);}
.tier-card .tier-flag{
  position:absolute; top:-9px; right:12px; background:var(--yellow); color:var(--ink);
  font-size:0.64rem; font-weight:800; padding:0.15rem 0.55rem; border-radius:999px; letter-spacing:0.02em;
}

/* Hint tooltip — small "!" badge, hover on desktop / tap on touch */
.opt-info-wrap{position:absolute; top:0.45rem; right:0.55rem; line-height:1; z-index:3;}
.opt-info{
  display:flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%;
  background:rgba(13,20,32,0.1); color:var(--ink-faint); font-size:0.66rem; font-weight:800; font-style:normal;
  cursor:help; user-select:none; transition:background .15s ease, color .15s ease;
}
.opt-toggle.selected .opt-info,.opt-pill.selected .opt-info{background:rgba(255,255,255,0.3); color:#fff;}
.opt-info:hover,.opt-info:focus-visible,.opt-info.tip-open{background:var(--blue); color:#fff; outline:none;}
.opt-tip{
  position:absolute; bottom:calc(100% + 8px); right:-6px; background:var(--ink); color:#fff;
  font-size:0.72rem; font-weight:500; line-height:1.4; padding:0.5rem 0.7rem; border-radius:8px;
  width:max-content; max-width:180px; text-align:left; opacity:0; visibility:hidden; transform:translateY(4px);
  pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:40;
}
.opt-tip::after{content:""; position:absolute; top:100%; right:10px; border:5px solid transparent; border-top-color:var(--ink);}
.opt-info:hover ~ .opt-tip,.opt-info:focus-visible ~ .opt-tip,.opt-tip.show{opacity:1; visibility:visible; transform:translateY(0);}

/* Gate warnings */
.gate-warning{
  background:var(--danger-tint); color:#991B1B; border-radius:var(--r-sm); padding:0.75rem 1rem;
  font-size:0.82rem; margin-top:0.6rem; line-height:1.5;
}
.gate-notice{
  background:var(--warn-tint); color:var(--warn); border-radius:var(--r-sm); padding:0.75rem 1rem;
  font-size:0.82rem; margin-top:0.6rem; line-height:1.5;
}

/* --------------------------------------------------------------------------
   12. Multi-step wizard
   -------------------------------------------------------------------------- */
.steps-nav{display:flex; align-items:center; gap:0.7rem; margin-bottom:2rem;}
.steps-nav .sn-item{display:flex; align-items:center; gap:0.55rem; font-size:0.82rem; color:var(--ink-faint); font-weight:600;}
.steps-nav .sn-dot{
  width:26px; height:26px; border-radius:50%; background:var(--surface-2); color:var(--ink-faint);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:0.8rem; font-weight:700;
  transition:background .2s ease, color .2s ease;
}
.steps-nav .sn-item.active .sn-dot{background:var(--ink); color:#fff;}
.steps-nav .sn-item.done .sn-dot{background:var(--blue); color:#fff;}
.steps-nav .sn-item.active{color:var(--ink);}
.steps-nav .sn-line{flex:1; height:1px; background:var(--line-strong);}
.sn-label{display:none;}
@media (min-width:560px){ .sn-label{display:inline;} }

.wizard-step{display:none; opacity:0; transform:translateY(12px);}
.wizard-step.active{display:block;}
.wizard-step.active.step-in{opacity:1; transform:translateY(0); transition:opacity .35s ease, transform .35s ease;}
@media (prefers-reduced-motion: reduce){ .wizard-step.active{opacity:1; transform:none; transition:none;} }
.wizard-step h3{font-size:1.3rem; font-weight:700; margin-bottom:1.6rem;}

.wizard-nav{display:flex; justify-content:space-between; align-items:center; margin-top:2rem; gap:1rem;}
.wizard-nav .hint{font-size:0.78rem; color:var(--ink-faint); margin-top:0.5rem; text-align:right;}
.range-preview{font-size:0.84rem; color:var(--ink-dim); margin:-0.9rem 0 1.8rem; min-height:1.3em;}

/* Result / offer card */
.result-card{background:var(--surface-2); border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.2rem); text-align:center;}
.result-grade{
  width:64px; height:64px; border-radius:50%; margin:0 auto 1rem; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:1.7rem; font-weight:800; background:var(--blue-tint); color:var(--blue);
}
.result-device{font-family:var(--mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);}
.result-amount{font-family:var(--display); font-size:clamp(2.4rem,6vw,3.2rem); font-weight:800; color:var(--blue); letter-spacing:-0.03em; line-height:1.1; margin:0.4rem 0 0.2rem;}
.result-caption{font-family:var(--mono); font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);}
.result-flags{margin:1.4rem 0 0; text-align:left; display:grid; gap:0.6rem;}
.result-flag{display:flex; gap:0.6rem; align-items:flex-start; font-size:0.87rem; color:var(--ink-dim);}
.result-flag svg{width:16px; height:16px; color:var(--blue); flex-shrink:0; margin-top:0.18em;}
.result-note{margin-top:1.3rem; font-size:0.82rem; color:var(--ink-dim); line-height:1.55;}

/* Side-by-side outcome (repair vs sell) */
.outcome-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.4rem;}
.outcome{
  border:1.5px solid var(--line); border-radius:var(--r-md); padding:1.4rem 1.2rem; text-align:center; background:var(--surface);
}
.outcome.best{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint);}
.outcome .oc-label{font-family:var(--mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);}
.outcome .oc-amount{font-family:var(--display); font-size:1.9rem; font-weight:800; letter-spacing:-0.03em; margin:0.3rem 0 0.2rem; color:var(--ink);}
.outcome.best .oc-amount{color:var(--blue);}
.outcome .oc-desc{font-size:0.8rem; color:var(--ink-dim); line-height:1.5;}
.outcome .oc-tag{display:inline-block; margin-bottom:0.6rem;}

/* --------------------------------------------------------------------------
   13. WooCommerce-compatible product grid
   -------------------------------------------------------------------------- */
.shop-toolbar{display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center; margin-bottom:1.8rem;}
.shop-chip{
  padding:0.5rem 1.05rem; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface);
  font-size:0.84rem; font-weight:600; color:var(--ink-dim); cursor:pointer; transition:all .15s ease;
}
.shop-chip:hover{border-color:var(--blue); color:var(--blue);}
.shop-chip.active{background:var(--ink); border-color:var(--ink); color:#fff;}

.woocommerce ul.products,ul.products{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
}
ul.products li.product{
  margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease;
}
ul.products li.product:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
ul.products li.product[hidden]{display:none;}
.product-media{
  position:relative; background:var(--surface-2); padding:1.4rem; display:flex; align-items:center;
  justify-content:center; min-height:190px;
}
.product-media img{max-height:170px; width:auto; object-fit:contain; transition:transform .3s ease;}
ul.products li.product:hover .product-media img{transform:scale(1.06);}
.product-media .grade-pill{
  position:absolute; top:0.8rem; left:0.8rem; padding:0.2rem 0.55rem; border-radius:var(--r-xs);
  font-family:var(--mono); font-size:0.7rem; font-weight:700;
}
.grade-pill.grade-a{background:var(--grade-a-bg); color:var(--grade-a-ink);}
.grade-pill.grade-b{background:var(--grade-b-bg); color:var(--grade-b-ink);}
.grade-pill.grade-c{background:var(--grade-c-bg); color:var(--grade-c-ink);}
.product-body{padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1;}
.woocommerce-loop-product__title{font-family:var(--display); font-size:0.99rem; font-weight:700; margin:0 0 0.2rem; line-height:1.35;}
.product-storage{font-size:0.8rem; color:var(--ink-faint); margin-bottom:0.7rem;}
.p-specs{display:grid; gap:0.32rem; margin-bottom:0.9rem;}
.p-spec{display:flex; align-items:center; gap:0.4rem; font-size:0.78rem; color:var(--ink-dim);}
.p-spec svg{width:13px; height:13px; color:var(--blue); flex-shrink:0;}
ul.products li.product .price{
  font-family:var(--display); font-size:1.24rem; font-weight:800; color:var(--ink);
  margin:0 0 0.9rem; letter-spacing:-0.02em; display:block;
}
ul.products li.product .price .woocommerce-Price-currencySymbol{font-size:0.9em; font-weight:800;}
.add_to_cart_button,.button.add_to_cart_button{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:0.4rem; width:100%;
  padding:0.72rem 1rem; border-radius:999px; border:none; background:var(--blue); color:#fff;
  font-family:var(--display); font-size:0.87rem; font-weight:700; cursor:pointer;
  transition:background .18s ease, transform .12s ease;
}
.add_to_cart_button:hover{background:var(--blue-deep); color:#fff;}
.add_to_cart_button:active{transform:scale(0.98);}
.add_to_cart_button.added{background:var(--success);}
.shop-empty{grid-column:1/-1; text-align:center; padding:3rem 1rem; color:var(--ink-faint);}

/* Accessory cards use a lighter treatment */
ul.products.products-accessory{grid-template-columns:repeat(4,1fr);}
ul.products.products-accessory .product-media{min-height:150px; background:var(--surface-2);}
ul.products.products-accessory .product-media img{max-height:120px;}
.acc-icon{width:76px; height:76px; color:var(--blue); opacity:0.85;}

/* Cart drawer */
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(400px,100%); background:#fff; z-index:400;
  box-shadow:-24px 0 60px -30px rgba(13,20,32,0.5); transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;
}
.cart-drawer.open{transform:translateX(0);}
.cart-drawer-head{display:flex; align-items:center; justify-content:space-between; padding:1.3rem 1.5rem; border-bottom:1px solid var(--line);}
.cart-drawer-head h3{margin:0; font-size:1.1rem;}
.cart-close{background:none; border:none; cursor:pointer; color:var(--ink-dim); padding:0.3rem; display:flex;}
.cart-close svg{width:20px; height:20px;}
.cart-items{flex:1; overflow-y:auto; padding:1.2rem 1.5rem;}
.cart-item{display:flex; gap:0.9rem; padding:0.9rem 0; border-bottom:1px solid var(--line);}
.cart-item img{width:52px; height:52px; object-fit:contain; background:var(--surface-2); border-radius:var(--r-sm); padding:4px;}
.cart-item-info{flex:1; min-width:0;}
.cart-item-name{font-size:0.88rem; font-weight:600; line-height:1.35;}
.cart-item-meta{font-size:0.76rem; color:var(--ink-faint);}
.cart-item-price{font-family:var(--mono); font-size:0.85rem; font-weight:600; white-space:nowrap;}
.cart-remove{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:0.74rem; padding:0.2rem 0; text-decoration:underline;}
.cart-empty{text-align:center; color:var(--ink-faint); padding:2.5rem 1rem; font-size:0.9rem;}
.cart-foot{padding:1.3rem 1.5rem; border-top:1px solid var(--line); background:var(--surface-2);}
.cart-total{display:flex; justify-content:space-between; font-weight:700; margin-bottom:0.9rem;}
.cart-overlay{
  position:fixed; inset:0; background:rgba(13,20,32,0.42); z-index:390; opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.cart-overlay.open{opacity:1; visibility:visible;}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(16px); z-index:500;
  background:var(--ink); color:#fff; padding:0.75rem 1.3rem; border-radius:999px; font-size:0.86rem;
  font-weight:600; opacity:0; visibility:hidden; transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  box-shadow:var(--shadow-md); max-width:90vw; text-align:center;
}
.toast.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}

/* --------------------------------------------------------------------------
   14. Plans
   -------------------------------------------------------------------------- */
.plan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; align-items:start;}
.plan{
  position:relative; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-lg);
  padding:1.9rem 1.6rem; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease;
}
.plan:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.plan.featured{border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-tint);}
.plan-flag{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--yellow); color:var(--ink);
  font-size:0.68rem; font-weight:800; padding:0.28rem 0.9rem; border-radius:999px; white-space:nowrap;
}
.plan-name{font-family:var(--display); font-size:1.15rem; font-weight:700; margin-bottom:0.3rem;}
.plan-for{font-size:0.8rem; color:var(--ink-faint); margin-bottom:1.1rem;}
.plan-price{display:flex; align-items:baseline; gap:0.3rem; margin-bottom:0.4rem;}
.plan-price .amt{font-family:var(--display); font-size:2.1rem; font-weight:800; letter-spacing:-0.03em; color:var(--ink);}
.plan-price .per{font-size:0.84rem; color:var(--ink-faint);}
.plan-note{font-size:0.78rem; color:var(--ink-faint); margin-bottom:1.3rem;}
.plan .tick-list{margin-bottom:1.5rem; flex:1;}
.plan .tick-list li{font-size:0.87rem;}

/* --------------------------------------------------------------------------
   15. Misc components
   -------------------------------------------------------------------------- */
/* Split feature block */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.6rem); align-items:center;}
.split.reverse .split-media{order:2;}
.split-media{
  background:var(--surface-2); border-radius:var(--r-xl); padding:2.2rem; display:flex;
  align-items:center; justify-content:center; min-height:280px;
}
.split-media img{max-height:300px; width:auto; filter:drop-shadow(0 24px 34px rgba(13,20,32,0.16));}

/* Lifecycle flow diagram */
.flow{display:grid; gap:0.8rem;}
.flow-row{display:flex; flex-wrap:wrap; gap:0.8rem; justify-content:center;}
.flow-node{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:0.85rem 1.2rem;
  font-size:0.86rem; font-weight:600; text-align:center; min-width:130px;
}
.flow-node.accent{background:var(--blue); border-color:var(--blue); color:#fff;}
.flow-node.soft{background:var(--blue-tint); border-color:var(--blue-tint-2); color:var(--blue-deep);}
.flow-node .fn-sub{display:block; font-size:0.72rem; font-weight:500; opacity:0.72; margin-top:0.15rem;}
.flow-arrow{display:flex; justify-content:center; color:var(--ink-faint);}
.flow-arrow svg{width:18px; height:18px;}

/* Grade guide cards */
.gg-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem;}
.gg-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem;
  text-align:center; transition:transform .25s ease, box-shadow .25s ease;
}
.gg-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.gg-media{position:relative; background:var(--surface-2); border-radius:var(--r-md); padding:1.1rem; margin-bottom:1.1rem;}
.gg-media img{height:120px; width:auto; margin:0 auto; object-fit:contain;}
.gg-media .gg-grade-tag{position:absolute; top:0.6rem; left:0.6rem;}
.gg-card h3{font-size:1.02rem; margin-bottom:0.4rem;}
.gg-card p{font-size:0.85rem; color:var(--ink-dim); margin:0;}

/* Sticky mobile CTA */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:300; display:none; gap:0.6rem; padding:0.7rem 1rem;
  background:rgba(255,255,255,0.96); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -18px rgba(13,20,32,0.4);
}
.mobile-cta .btn{flex:1; padding:0.8rem 0.8rem; font-size:0.88rem;}
@media (max-width:760px){
  .mobile-cta{display:flex;}
  body{padding-bottom:72px;}
  .toast{bottom:88px;}
}

/* WhatsApp float */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:290; width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 28px -12px rgba(37,211,102,0.8); transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.08); color:#fff;}
.wa-float svg{width:26px; height:26px;}
@media (max-width:760px){ .wa-float{bottom:84px; width:46px; height:46px;} .wa-float svg{width:23px; height:23px;} }

/* Logo/keyword strip */
.kw-strip{display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center;}
.kw-strip span{
  font-size:0.76rem; color:var(--ink-faint); background:var(--surface-2); border-radius:999px;
  padding:0.34rem 0.85rem; border:1px solid var(--line);
}

/* CTA band */
.cta-band{
  background:linear-gradient(150deg,var(--blue) 0%,var(--blue-dark) 100%); border-radius:var(--r-xl);
  padding:clamp(2rem,4vw,3.2rem); color:#fff; text-align:center; position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:auto -10% -70% auto; width:340px; height:340px; border-radius:50%;
  background:rgba(255,234,0,0.14);
}
.cta-band > *{position:relative;}
.cta-band h2{color:#fff; margin-bottom:0.7rem;}
.cta-band p{color:rgba(255,255,255,0.86); max-width:56ch; margin:0 auto 1.6rem;}
.cta-band .btn-row{justify-content:center;}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer{background:var(--surface-ink); color:rgba(255,255,255,0.68); padding:clamp(3rem,5vw,4.4rem) 0 2rem; font-size:0.88rem;}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:2rem;}
.footer-brand .brand-name{color:#fff;}
.footer-brand p{margin-top:0.9rem; color:rgba(255,255,255,0.6); font-size:0.85rem; max-width:32ch;}
.footer-col h4{color:#fff; font-size:0.8rem; font-family:var(--mono); letter-spacing:0.12em; text-transform:uppercase; margin-bottom:0.9rem; font-weight:600;}
.footer-col ul{list-style:none; padding:0; margin:0;}
.footer-col li{margin-bottom:0.5rem;}
.footer-col a{color:rgba(255,255,255,0.66); font-size:0.86rem;}
.footer-col a:hover{color:var(--yellow);}
.footer-bottom{
  margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,0.1);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-size:0.78rem; color:rgba(255,255,255,0.45);
}
.footer-seo{
  margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,0.08);
  font-size:0.75rem; color:rgba(255,255,255,0.38); line-height:1.75;
}
.footer-seo a{color:rgba(255,255,255,0.5);}
.footer-seo a:hover{color:var(--yellow);}

/* --------------------------------------------------------------------------
   17. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
.reveal.visible{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1040px){
  .grid-4,.stat-strip,.steps,ul.products,.woocommerce ul.products,.gg-grid,ul.products.products-accessory{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
}
@media (max-width:860px){
  .grid-3,.plan-grid,.tier-row,.check-grid{grid-template-columns:1fr;}
  .split,.split.reverse .split-media{grid-template-columns:1fr; order:0;}
  .split-media{min-height:220px;}
  .opt-card-row{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  :root{--gut:1.15rem;}
  .grid-2,.field-row,.dq-options,.outcome-grid{grid-template-columns:1fr;}
  .stat-strip{grid-template-columns:1fr 1fr;}
  ul.products,.woocommerce ul.products,.gg-grid,ul.products.products-accessory{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .opt-pill{min-width:44%;}
  .dq-vs{position:static; transform:none; margin:0 auto;}
  .steps{grid-template-columns:1fr;}
  .btn-row .btn{width:100%;}
  table.dt th,table.dt td{padding:0.7rem 0.85rem; font-size:0.84rem;}
}
@media (max-width:420px){
  ul.products,.woocommerce ul.products,.gg-grid,ul.products.products-accessory{grid-template-columns:1fr;}
}

/* Print */
@media print{
  .site-header,.mobile-cta,.wa-float,.cart-drawer,.cart-overlay,.announce{display:none !important;}
  body{padding-bottom:0;}
}