/* ==========================================================================
   REV-T Service Plans — stylesheet
   --------------------------------------------------------------------------
   Sections 1-5 are the REV-T design system, ported verbatim from
   REnVisioningTechnology/design (see design-source/_ds/). Do not round values.
   Section 6 is page-specific and is the only part written for this page.

   Every rule lives here rather than in the markup so the Content-Security-
   Policy can serve style-src 'self' with no 'unsafe-inline'.
   ========================================================================== */

/* ===== 1. Tokens: colors ================================================= */
:root{
  /* Brand orange ramp. brand-500 is THE REV-T orange. */
  --revt-brand-50:#fef3ec;--revt-brand-100:#fde0cf;--revt-brand-200:#fabf9f;--revt-brand-300:#f5996a;--revt-brand-400:#ef7740;--revt-brand-500:#e8650a;--revt-brand-600:#c8480f;--revt-brand-700:#a3380d;--revt-brand-800:#7e2c0e;--revt-brand-900:#65250f;

  /* Dark surfaces — REV-T tooling is dark-first. There is no light theme. */
  --revt-surface-base:#0e141c;
  --revt-surface-panel:#182230;
  --revt-surface-raised:#1f2c3b;
  --revt-surface-overlay:#0a0f16;

  /* Hairlines */
  --revt-line:#2e3b4b;
  --revt-line-strong:#3e4e62;

  /* Neutral text ramp (Tailwind zinc, the ramp the components use) */
  --revt-zinc-50:#fafafa;--revt-zinc-100:#f4f4f5;--revt-zinc-200:#e4e4e7;--revt-zinc-300:#d4d4d8;--revt-zinc-400:#a1a1aa;--revt-zinc-500:#71717a;--revt-zinc-600:#52525b;--revt-zinc-700:#3f3f46;--revt-zinc-800:#27272a;--revt-zinc-900:#18181b;

  /* Service-agreement tiers */
  --revt-tier-orange:#e8650a;
  --revt-tier-green:#2e8b57;
  --revt-tier-blue:#1d6fd8;
  --revt-tier-basic:#5b6b7c;

  /* Semantic status (Tailwind emerald/amber/red/sky steps 300-500) */
  --revt-emerald-300:#6ee7b7;--revt-emerald-400:#34d399;--revt-emerald-500:#10b981;
  --revt-amber-300:#fcd34d;--revt-amber-400:#fbbf24;--revt-amber-500:#f59e0b;
  --revt-red-300:#fca5a5;--revt-red-400:#f87171;--revt-red-500:#ef4444;--revt-red-600:#dc2626;--revt-red-700:#b91c1c;
  --revt-sky-300:#7dd3fc;--revt-sky-400:#38bdf8;--revt-sky-500:#0ea5e9;
  --revt-blue-300:#93c5fd;--revt-orange-300:#fdba74;--revt-slate-300:#cbd5e1;

  /* SLA-calculator accents — the "calculator standard" the portal was aligned to */
  --revt-calc-prominent:#eaf1f8;
  --revt-calc-body:#dce4ec;
  --revt-calc-muted:#96a6b7;
  --revt-calc-green:#3fb273;
  --revt-calc-blue:#4a8be8;
  --revt-calc-danger:#e4384b;
  --revt-calc-orange-tint:#33210f;

  /* ---- Semantic aliases: use these in product work ---- */
  --revt-accent:var(--revt-brand-500);
  --revt-accent-hover:var(--revt-brand-400);
  --revt-accent-press:var(--revt-brand-600);
  --revt-page:var(--revt-surface-base);
  --revt-panel:var(--revt-surface-panel);
  --revt-raised:var(--revt-surface-raised);
  --revt-scrim:var(--revt-surface-overlay);
  --revt-text-heading:var(--revt-zinc-100);
  --revt-text-body:var(--revt-zinc-300);
  --revt-text-muted:var(--revt-zinc-500);
  --revt-text-on-accent:#ffffff;
  --revt-text:#e4e4e7;
  --revt-success:var(--revt-emerald-400);
  --revt-warning:var(--revt-amber-400);
  --revt-danger:var(--revt-red-400);
  --revt-info:var(--revt-sky-400);
}

/* ===== 2. Tokens: typography ============================================= */
:root{
  --revt-font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --revt-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --revt-font-display:var(--revt-font-sans);

  --revt-text-xs:0.75rem;   --revt-leading-xs:1rem;
  --revt-text-sm:0.875rem;  --revt-leading-sm:1.25rem;
  --revt-text-base:1rem;    --revt-leading-base:1.5rem;
  --revt-text-lg:1.125rem;  --revt-leading-lg:1.75rem;
  --revt-text-xl:1.25rem;   --revt-leading-xl:1.75rem;
  --revt-text-2xl:1.5rem;   --revt-leading-2xl:2rem;
  --revt-text-3xl:1.875rem; --revt-leading-3xl:2.25rem;
  --revt-text-4xl:2.25rem;  --revt-leading-4xl:2.5rem;
  --revt-text-display:4rem; --revt-leading-display:0.95;
  --revt-text-display-lg:5.5rem;

  --revt-weight-normal:400;
  --revt-weight-medium:500;
  --revt-weight-semibold:600;
  --revt-weight-bold:700;
  --revt-weight-black:900;

  --revt-tracking-tight:-0.02em;
  --revt-tracking-normal:0;
  --revt-tracking-wide:0.025em;
  --revt-tracking-wider:0.05em;
  --revt-tracking-widest:0.1em;
}

/* The eyebrow-label idiom: mono, uppercase, wide tracking, orange or muted. */
.revt-eyebrow{font-family:var(--revt-font-mono);font-size:var(--revt-text-xs);text-transform:uppercase;letter-spacing:var(--revt-tracking-widest);color:var(--revt-brand-400)}
.revt-eyebrow--muted{color:var(--revt-zinc-500)}
/* Display headline. Two-tone is the signature: .revt-accent on the key phrase. */
.revt-display{font-family:var(--revt-font-display);font-weight:var(--revt-weight-bold);text-transform:uppercase;line-height:var(--revt-leading-display);letter-spacing:var(--revt-tracking-tight);color:var(--revt-calc-prominent)}
.revt-accent{color:var(--revt-brand-500)}

/* ===== 3. Tokens: spacing, radii, elevation ============================== */
:root{
  --revt-space-0:0px;--revt-space-0-5:0.125rem;--revt-space-1:0.25rem;--revt-space-1-5:0.375rem;--revt-space-2:0.5rem;--revt-space-2-5:0.625rem;--revt-space-3:0.75rem;--revt-space-3-5:0.875rem;--revt-space-4:1rem;--revt-space-5:1.25rem;--revt-space-6:1.5rem;--revt-space-8:2rem;--revt-space-10:2.5rem;--revt-space-12:3rem;--revt-space-16:4rem;--revt-space-20:5rem;--revt-space-24:6rem;

  --revt-radius-control:0.375rem; /* 6px — buttons, inputs, nav items */
  --revt-radius-panel:0.75rem;    /* 12px — cards, modals */
  --revt-radius-full:9999px;      /* pills, badges, dots */

  --revt-shadow-none:none;
  --revt-shadow-accent:0 10px 15px -3px rgb(232 101 10 / 0.2);
  --revt-shadow-overlay:0 25px 50px -12px rgb(0 0 0 / 0.6);

  --revt-border-hairline:1px;
  --revt-control-height-sm:1.75rem;
  --revt-control-height-md:2.25rem;
  --revt-control-height-lg:2.75rem;
  --revt-nav-height:3.5rem;
  --revt-content-max:80rem;

  --revt-duration-fast:120ms;
  --revt-duration-base:150ms;
  --revt-ease:ease-out;
  --revt-z-nav:30;
  --revt-z-overlay:50;
}

/* ===== 4. Tokens: brand textures ========================================= */
/* Hex mesh is a honeycomb wireframe in brand orange derived from the logo
   hexagon. Served as real files rather than data: URIs so the CSP can keep
   img-src at 'self' with no data: allowance. */
:root{
  --revt-hex-mesh:url("assets/hex-mesh.svg");
  --revt-hex-mesh-strong:url("assets/hex-mesh-strong.svg");
}
.revt-hex-mesh{background-image:var(--revt-hex-mesh)}
.revt-hex-mesh-strong{background-image:var(--revt-hex-mesh-strong)}
@keyframes revt-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes revt-fade-in{from{opacity:0}to{opacity:1}}

/* ===== 5. Design-system components ======================================= */
/* Global foundation, ported from src/styles.css in the design repo. */
:root{color-scheme:dark}
html,body{height:100%}
body{margin:0;background:var(--revt-surface-base);color:var(--revt-text);font-family:var(--revt-font-sans);-webkit-font-smoothing:antialiased}
input,select,textarea,button{color-scheme:dark}
a{color:var(--revt-brand-400);text-decoration:none}
a:hover{color:var(--revt-brand-300)}
*{scrollbar-color:var(--revt-line) var(--revt-surface-panel)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--revt-surface-panel)}
::-webkit-scrollbar-thumb{background:var(--revt-line);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--revt-line-strong)}
:focus-visible{outline:2px solid var(--revt-brand-500);outline-offset:2px}

/* ---------- Button ---------- */
.revt-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--revt-radius-control);font-weight:var(--revt-weight-medium);font-family:inherit;transition:background-color var(--revt-duration-base) var(--revt-ease),color var(--revt-duration-base) var(--revt-ease),border-color var(--revt-duration-base) var(--revt-ease);border:1px solid transparent;cursor:pointer}
.revt-btn:disabled{opacity:.5;pointer-events:none}
.revt-btn--primary{background:var(--revt-brand-500);color:#fff}
.revt-btn--primary:hover{background:var(--revt-brand-400)}
.revt-btn--primary:active{background:var(--revt-brand-600)}
.revt-btn--secondary{background:var(--revt-surface-raised);color:var(--revt-zinc-100);border-color:var(--revt-line-strong)}
.revt-btn--secondary:hover{background:var(--revt-line);color:#fff}
.revt-btn--ghost{background:transparent;color:var(--revt-zinc-400)}
.revt-btn--ghost:hover{background:var(--revt-surface-raised);color:var(--revt-zinc-100)}
.revt-btn--danger{background:var(--revt-red-600);color:#fff}
.revt-btn--danger:hover{background:var(--revt-red-500)}
.revt-btn--danger:active{background:var(--revt-red-700)}
.revt-btn--sm{height:1.75rem;padding:0 .625rem;font-size:var(--revt-text-xs);gap:.375rem}
.revt-btn--md{height:2.25rem;padding:0 .875rem;font-size:var(--revt-text-sm);gap:.5rem}
.revt-btn--lg{height:2.75rem;padding:0 1.25rem;font-size:var(--revt-text-base);gap:.5rem}
.revt-btn--full{width:100%}
/* Buttons rendered as links must not pick up the global underline/colour. */
a.revt-btn{text-decoration:none}
a.revt-btn--primary,a.revt-btn--primary:hover{color:#fff}
a.revt-btn--secondary{color:var(--revt-zinc-100)}
a.revt-btn--secondary:hover{color:#fff}

/* ---------- Badge ---------- */
.revt-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.125rem .5rem;font-size:var(--revt-text-xs);font-weight:var(--revt-weight-medium);white-space:nowrap}
.revt-badge--pill{border-radius:var(--revt-radius-full)}
.revt-badge--square{border-radius:.25rem}
.revt-badge__dot{height:.375rem;width:.375rem;border-radius:var(--revt-radius-full);flex-shrink:0}
.revt-badge--neutral{background:rgb(63 63 70 / .4);color:var(--revt-zinc-300);box-shadow:inset 0 0 0 1px rgb(82 82 91 / .4)}
.revt-badge--neutral .revt-badge__dot{background:var(--revt-zinc-400)}
.revt-badge--brand{background:rgb(232 101 10 / .15);color:var(--revt-brand-300);box-shadow:inset 0 0 0 1px rgb(232 101 10 / .4)}
.revt-badge--brand .revt-badge__dot{background:var(--revt-brand-500)}
.revt-badge--success{background:rgb(16 185 129 / .15);color:var(--revt-emerald-300);box-shadow:inset 0 0 0 1px rgb(16 185 129 / .3)}
.revt-badge--success .revt-badge__dot{background:var(--revt-emerald-400)}
.revt-badge--warning{background:rgb(245 158 11 / .15);color:var(--revt-amber-300);box-shadow:inset 0 0 0 1px rgb(245 158 11 / .3)}
.revt-badge--warning .revt-badge__dot{background:var(--revt-amber-400)}
.revt-badge--danger{background:rgb(239 68 68 / .15);color:var(--revt-red-300);box-shadow:inset 0 0 0 1px rgb(239 68 68 / .3)}
.revt-badge--danger .revt-badge__dot{background:var(--revt-red-400)}
.revt-badge--info{background:rgb(14 165 233 / .15);color:var(--revt-sky-300);box-shadow:inset 0 0 0 1px rgb(14 165 233 / .3)}
.revt-badge--info .revt-badge__dot{background:var(--revt-sky-400)}
.revt-badge--tier-orange{background:rgb(232 101 10 / .15);color:var(--revt-orange-300);box-shadow:inset 0 0 0 1px rgb(232 101 10 / .4)}
.revt-badge--tier-orange .revt-badge__dot{background:var(--revt-tier-orange)}
.revt-badge--tier-green{background:rgb(46 139 87 / .2);color:var(--revt-emerald-300);box-shadow:inset 0 0 0 1px rgb(46 139 87 / .5)}
.revt-badge--tier-green .revt-badge__dot{background:var(--revt-tier-green)}
.revt-badge--tier-blue{background:rgb(29 111 216 / .2);color:var(--revt-blue-300);box-shadow:inset 0 0 0 1px rgb(29 111 216 / .5)}
.revt-badge--tier-blue .revt-badge__dot{background:var(--revt-tier-blue)}
.revt-badge--tier-basic{background:rgb(91 107 124 / .2);color:var(--revt-slate-300);box-shadow:inset 0 0 0 1px rgb(91 107 124 / .5)}
.revt-badge--tier-basic .revt-badge__dot{background:var(--revt-tier-basic)}

/* ---------- Card ---------- */
.revt-card{border-radius:var(--revt-radius-panel);border:1px solid var(--revt-line);background:var(--revt-surface-panel);overflow:hidden}
.revt-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--revt-line)}
.revt-card__title{margin:0;font-size:var(--revt-text-sm);font-weight:var(--revt-weight-semibold);color:var(--revt-zinc-100);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.revt-card__subtitle{margin:.125rem 0 0;font-size:var(--revt-text-xs);color:var(--revt-zinc-500)}
.revt-card__actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.revt-card__body{padding:1rem}
.revt-card__footer{padding:.75rem 1rem;border-top:1px solid var(--revt-line);background:rgb(14 20 28 / .4)}

/* ---------- Alert ---------- */
.revt-alert{display:flex;gap:.75rem;border-radius:var(--revt-radius-panel);border:1px solid;padding:.75rem 1rem;font-size:var(--revt-text-sm)}
.revt-alert__icon{margin-top:.125rem;flex-shrink:0}
.revt-alert__title{margin:0;font-weight:var(--revt-weight-semibold)}
.revt-alert__body{margin-top:.125rem}
.revt-alert__actions{margin-top:.625rem;display:flex;align-items:center;gap:.5rem}
.revt-alert--info{background:rgb(14 165 233 / .1);border-color:rgb(14 165 233 / .3);color:#e0f2fe}
.revt-alert--info .revt-alert__icon{color:var(--revt-sky-400)}
.revt-alert--success{background:rgb(16 185 129 / .1);border-color:rgb(16 185 129 / .3);color:#ecfdf5}
.revt-alert--success .revt-alert__icon{color:var(--revt-emerald-400)}
.revt-alert--warning{background:rgb(245 158 11 / .1);border-color:rgb(245 158 11 / .3);color:#fffbeb}
.revt-alert--warning .revt-alert__icon{color:var(--revt-amber-400)}
.revt-alert--danger{background:rgb(239 68 68 / .1);border-color:rgb(239 68 68 / .3);color:#fef2f2}
.revt-alert--danger .revt-alert__icon{color:var(--revt-red-400)}

/* ---------- StatTile ---------- */
.revt-stat{border-radius:var(--revt-radius-panel);border:1px solid var(--revt-line);background:var(--revt-surface-panel);padding:.875rem 1rem}
.revt-stat__head{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.revt-stat__label{margin:0;font-size:var(--revt-text-xs);font-weight:var(--revt-weight-medium);text-transform:uppercase;letter-spacing:var(--revt-tracking-wide);color:var(--revt-zinc-500)}
.revt-stat__value{margin:.5rem 0 0;font-size:var(--revt-text-2xl);font-weight:var(--revt-weight-semibold);font-variant-numeric:tabular-nums;color:var(--revt-zinc-100)}
.revt-stat__meta{margin-top:.375rem;display:flex;align-items:center;gap:.5rem;font-size:var(--revt-text-xs)}
.revt-stat__hint{color:var(--revt-zinc-500)}

/* ---------- Table ---------- */
.revt-table-wrap{width:100%;overflow-x:auto}
.revt-table{width:100%;border-collapse:collapse;font-size:var(--revt-text-sm)}
.revt-table thead tr{border-bottom:1px solid var(--revt-line);background:rgb(14 20 28 / .4)}
.revt-table th{font-size:var(--revt-text-xs);font-weight:var(--revt-weight-semibold);text-transform:uppercase;letter-spacing:var(--revt-tracking-wide);color:var(--revt-zinc-500);white-space:nowrap}
.revt-table td{color:var(--revt-zinc-300);vertical-align:middle}
.revt-table tbody tr{border-bottom:1px solid rgb(46 59 75 / .6)}
.revt-table tbody tr:last-child{border-bottom:0}
.revt-table th,.revt-table td{padding:.625rem 1rem}
.revt-table--dense th,.revt-table--dense td{padding:.375rem .75rem}
.revt-num{font-variant-numeric:tabular-nums}

/* ---------- TopNav ---------- */
.revt-navitem{display:inline-flex;align-items:center;gap:.375rem;border-radius:var(--revt-radius-control);padding:.375rem .75rem;font-size:var(--revt-text-sm);white-space:nowrap;color:var(--revt-zinc-400);text-decoration:none;transition:background-color var(--revt-duration-base) var(--revt-ease),color var(--revt-duration-base) var(--revt-ease)}
.revt-navitem:hover{background:var(--revt-surface-raised);color:var(--revt-zinc-100)}
.revt-navitem--active{background:rgb(232 101 10 / .15);font-weight:var(--revt-weight-medium);color:var(--revt-brand-400)}
.revt-navitem--active:hover{background:rgb(232 101 10 / .15);color:var(--revt-brand-400)}

/* ==========================================================================
   6. Page
   ========================================================================== */
html{scroll-behavior:smooth}
body{color:var(--revt-text-body)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.page{background:var(--revt-surface-base);color:var(--revt-text-body);font-family:var(--revt-font-sans);line-height:1.6}

/* Shared 1200px content column. */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* Mono micro-label used for the tier note and the annual-fee caption. */
.label-mono{font-family:var(--revt-font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--revt-text-muted)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--revt-line);background:rgb(24 34 48 / .95);backdrop-filter:blur(8px)}
.nav__inner{max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo{display:flex;align-items:center}
.nav__logo-img{height:34px;width:auto;display:block}
.nav__links{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav__cta{margin-left:12px}

/* ---------- Hero ---------- */
.hero{background-color:var(--revt-surface-base);background-image:var(--revt-hex-mesh-strong);border-bottom:1px solid var(--revt-line);padding:104px 0 88px}
.hero__eyebrow{margin-bottom:24px}
.hero__title{margin:0 0 24px;font-size:clamp(38px,5.4vw,68px);max-width:940px}
.hero__lead{margin:0 0 36px;max-width:720px;font-size:19px;color:var(--revt-calc-body)}
/* Eyebrow and the 10-year anniversary badge share one line, wrapping when narrow. */
.hero__eyebrow-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.hero__eyebrow-row .hero__eyebrow{margin-bottom:0}
.hero__anniversary{font-family:var(--revt-font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:.25rem .625rem}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px;margin-top:64px}
/* Labels wrap to different line counts; align the values on one baseline anyway. */
.stats .revt-stat{display:flex;flex-direction:column}
.stats .revt-stat__value{margin-top:auto;padding-top:.5rem}

/* ---------- Section shell ---------- */
.section{padding:88px 0}
.section--panel{background:var(--revt-surface-panel);border-top:1px solid var(--revt-line);border-bottom:1px solid var(--revt-line)}
.section__eyebrow{margin-bottom:14px}
.section__title{margin:0 0 16px;font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--revt-calc-prominent)}
.section__lead{margin:0 0 48px;font-size:17px;color:var(--revt-text-muted)}
/* Per-section measure, kept identical to the approved design. */
#why .section__title{max-width:820px}
#tiers .section__title{max-width:860px}
#protection .section__title{max-width:900px}
#faq .section__title{margin-bottom:48px}
#why .section__lead{max-width:760px}
#tiers .section__lead{max-width:800px}
#compare .section__lead{max-width:800px;margin-bottom:40px}
#protection .section__lead{max-width:800px;margin-bottom:40px}

/* ---------- Why cards ---------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.why-card{padding:28px}
.why-card__icon{width:40px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:rgb(232 101 10 / .15);color:var(--revt-brand-400);margin-bottom:18px}
.why-card__title{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--revt-zinc-100)}
.why-card__text{margin:0;font-size:15px;color:var(--revt-text-muted)}

/* ---------- Tier cards ---------- */
/* --tier-rule is the top stripe, --tier-ink the name and check marks. The two
   differ on Green/Blue/Basic, where the design uses the lighter calc accent
   for text against the dark card. */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr));gap:16px}
.tier{border-radius:12px;border:1px solid var(--revt-line);background:var(--revt-surface-base);border-top:3px solid var(--tier-rule);padding:24px;display:flex;flex-direction:column}
.tier--orange{--tier-rule:var(--revt-tier-orange);--tier-ink:var(--revt-tier-orange)}
.tier--green{--tier-rule:var(--revt-tier-green);--tier-ink:var(--revt-calc-green)}
.tier--blue{--tier-rule:var(--revt-tier-blue);--tier-ink:var(--revt-calc-blue)}
.tier--basic{--tier-rule:var(--revt-tier-basic);--tier-ink:var(--revt-slate-300)}
.tier__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.tier__name{margin:0 0 8px;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--tier-ink)}
.tier__desc{margin:0 0 20px;font-size:14px;color:var(--revt-text-muted);min-height:66px}
.tier__price{padding:12px 0;border-top:1px solid var(--revt-line);border-bottom:1px solid var(--revt-line);margin-bottom:16px}
.tier__price-value{margin-top:4px;font-size:16px;font-weight:600;color:var(--revt-zinc-100)}
.tier__features{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.tier__feature{display:flex;gap:10px;font-size:14px;color:var(--revt-text-body)}
.tier__feature--off{color:var(--revt-text-muted)}
.tier__mark{color:var(--tier-ink);flex-shrink:0}
.tier__feature--off .tier__mark{color:var(--revt-text-muted)}

/* ---------- Comparison table ---------- */
/* Cell alignment and colour come from position, so the markup stays clean. */
.compare-table{min-width:760px}
.compare-table thead th:first-child{width:30%;text-align:left}
.compare-table thead th:not(:first-child){text-align:center}
.compare-table thead th:nth-child(2){color:var(--revt-orange-300)}
.compare-table thead th:nth-child(3){color:var(--revt-emerald-300)}
.compare-table thead th:nth-child(4){color:var(--revt-blue-300)}
.compare-table thead th:nth-child(5){color:var(--revt-slate-300)}
/* Row headers are row labels, not column headings — undo the uppercase,
   nowrap treatment .revt-table th applies to the header row. */
.compare-table tbody th{font-size:var(--revt-text-sm);font-weight:500;text-transform:none;letter-spacing:normal;white-space:normal;text-align:left;vertical-align:middle;color:var(--revt-zinc-100)}
.compare-table td{text-align:center}
/* Shown only on narrow screens, where the table is the one thing that scrolls sideways. */
.compare-hint{display:none;margin:-28px 0 20px;font-family:var(--revt-font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--revt-brand-400)}

/* ---------- Protection cards ---------- */
.protect-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:16px}
.protect-card{border-radius:12px;border:1px solid var(--revt-line);background:var(--revt-surface-base);padding:32px}
.protect-card--standard{--kicker:var(--revt-brand-400);--mark:var(--revt-brand-500)}
.protect-card--plus{--kicker:var(--revt-blue-300);--mark:var(--revt-calc-blue)}
.protect-card__kicker{font-family:var(--revt-font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--kicker);margin-bottom:14px}
.protect-card__title{margin:0 0 10px;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--revt-calc-prominent)}
.protect-card__text{margin:0 0 20px;font-size:15px;color:var(--revt-text-muted)}
.protect-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.protect-list li{display:flex;gap:10px;font-size:14px;color:var(--revt-text-body)}
.protect-mark{color:var(--mark);flex-shrink:0}
.protect-alert{margin-top:24px}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:32px 48px}
.faq__q{margin:0 0 8px;font-size:17px;font-weight:600;color:var(--revt-zinc-100)}
.faq__a{margin:0;font-size:15px;color:var(--revt-text-muted)}

/* ---------- Closing CTA ---------- */
.cta{padding:0 24px 88px}
.cta__panel{max-width:1200px;margin:0 auto;border-radius:12px;border:1px solid var(--revt-line);background-color:var(--revt-surface-panel);background-image:var(--revt-hex-mesh-strong);padding:72px 32px;text-align:center}
.cta__title{margin:0 0 14px;font-size:clamp(28px,3.6vw,44px)}
.cta__text{margin:0 auto 28px;max-width:640px;font-size:17px;color:var(--revt-calc-body)}
.cta__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--revt-line);background:var(--revt-surface-overlay);padding:48px 0 40px}
.footer__inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;gap:24px}
.footer__top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px}
.footer__logo{height:44px;width:auto;display:block}
.footer__contact{display:flex;flex-direction:column;gap:4px;text-align:right;font-size:14px}
/* Flex items are blockified, so this padding lifts each link to a >=24px tap target. */
.footer__contact a{padding:5px 0}
.footer__anniversary{font-family:var(--revt-font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--revt-brand-400)}
.footer__legal{font-size:12px;color:var(--revt-zinc-600);max-width:900px}

/* ---------- Mobile ---------- */
/* Between the phone breakpoint and ~810px the jump links wrap to a second row inside the
   64px bar; tightening the spacing keeps them on one line instead of hiding them. */
@media (max-width:900px){
  .nav__inner{gap:12px}
  .nav__links{gap:2px}
  .revt-navitem{padding:.375rem .5rem}
  .nav__cta{margin-left:4px}
}
@media (max-width:760px){
  /* The section jump links wrap to ~150px inside a 64px sticky bar and spill over the
     hero. Keep the logo and the quote CTA — the action that matters — and let the page
     scroll, which is how these links are used on a phone anyway. */
  .nav__links .revt-navitem{display:none}
  .nav__cta{margin-left:0}
  /* .revt-badge is nowrap by default; at 320px the anniversary pill ran off-screen. */
  .hero__anniversary{white-space:normal;max-width:100%}
}
@media (max-width:760px){
  .compare-hint{display:block}
  /* Pin the row label so it stays readable while the tier columns scroll under it.
     Opaque background, or the scrolling cells show through. */
  .compare-table tbody th,.compare-table thead th:first-child{position:sticky;left:0;z-index:1;background:var(--revt-surface-panel)}
  .compare-table thead th:first-child{z-index:2}
}
@media (max-width:640px){
  /* Desktop section rhythm is a lot of scrolling on a phone; tighten it. */
  .hero{padding:72px 0 64px}
  .section{padding:56px 0}
  .section__lead{margin-bottom:32px}
  .stats{margin-top:40px}
  .cta{padding-bottom:56px}
  .cta__panel{padding:48px 22px}
  /* Equal-height card text only matters in a multi-column row. */
  .tier__desc{min-height:0}
}

/* ---------- Print ---------- */
@media print{body{background:#fff}}