/* BackupWatch design system — ported verbatim from the v2 design handoff
   (design_handoff_backupwatch_site/reference/_ds/...). Tokens, self-hosted fonts,
   element defaults, the three helper classes and the seven keyframes.

   Assembled from: tokens/colors.css + tokens/spacing.css + tokens/typography.css
   + fonts/fonts.css + _ds_bundle.css (base + Phosphor icons), in that order, so the
   page needs one stylesheet request instead of a five-deep @import chain.

   The Phosphor icon rules are subset to the icons this site actually uses (listed
   below). Adding a new <i class="ph ph-something"> means adding its rule here —
   copy it from the handoff's _ds_bundle.css. The .woff2 carries the full set. */


/* COLORS — BackupWatch. Deep navy surfaces, cool blue-white text,
   one accent blue. Status colours are desaturated to sit on navy. */
:root {
  /* Surfaces */
  --bw-navy-900: #060F26;   /* deepest: ticker, terminal */
  --bw-navy-800: #0A1838;   /* alternating band */
  --bw-navy-700: #0E2148;   /* page */
  /* Text ramp */
  --bw-frost-50:  #EEF3FC;  /* primary text */
  --bw-frost-100: #DCE7FA;  /* secondary text */
  --bw-frost-200: #AFC6EE;  /* muted / body */
  --bw-slate-400: #8595ad;  /* faint */
  --bw-slate-500: #6E7F9C;  /* faintest */
  /* Accent */
  --bw-blue-500: #2E6FD6;   /* buttons, selection */
  --bw-blue-400: #3f80e6;   /* button hover */
  --bw-blue-300: #5B9BE0;   /* eyebrows, links, highlight text, icons */
  /* Status */
  --bw-green: #5fb98c;
  --bw-amber: #d9a441;
  --bw-red:   #f2666a;
  --bw-white: #ffffff;

  /* Semantic: surfaces */
  --surface-page:   var(--bw-navy-700);
  --surface-band:   var(--bw-navy-800);
  --surface-deep:   var(--bw-navy-900);
  --surface-card:   rgba(175,198,238,0.05);
  --surface-tint:   rgba(46,111,214,0.14);
  --surface-tint-strong: rgba(46,111,214,0.18);
  --surface-glass:  rgba(6,17,40,0.82);
  /* Semantic: text */
  --text-strong:  var(--bw-frost-50);
  --text-body:    var(--bw-frost-200);
  --text-secondary: var(--bw-frost-100);
  --text-muted:   var(--bw-slate-400);
  --text-faint:   var(--bw-slate-500);
  --text-accent:  var(--bw-blue-300);
  --text-on-accent: var(--bw-white);
  /* Semantic: lines */
  --line-hairline: rgba(175,198,238,0.10);
  --line-soft:     rgba(175,198,238,0.16);
  --line-strong:   rgba(175,198,238,0.22);
  --line-accent:   rgba(91,155,224,0.42);
  --line-danger:   rgba(242,102,106,0.45);
  /* Semantic: accent */
  --accent:        var(--bw-blue-500);
  --accent-hover:  var(--bw-blue-400);
  --accent-soft:   var(--bw-blue-300);
  /* Status */
  --status-success: var(--bw-green);
  --status-warning: var(--bw-amber);
  --status-missed:  var(--bw-red);
  /* Hero glow — the only gradient in the system */
  --glow-hero: radial-gradient(1100px 560px at 80% -12%, rgba(46,111,214,0.22), transparent 62%);
}

/* SPACING, RADII, SHADOW, MOTION, LAYOUT — BackupWatch. */
:root {
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 56px;  --sp-10: 64px; --sp-11: 96px; --sp-12: 112px;

  /* Radii — 12px everywhere, 999 for pills only */
  --radius-md: 12px;
  --radius-sm: 8px;      /* mobile-sheet links only */
  --radius-pill: 999px;

  /* Shadows — only under screenshots, the nav pill and the mobile sheet */
  --shadow-shot: 0 40px 90px -44px rgba(0,0,0,0.9);
  --shadow-hero: 0 60px 120px -44px rgba(0,0,0,0.95);
  --shadow-pill: inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 44px -22px rgba(0,0,0,0.9);
  --shadow-lift: 0 18px 40px -24px rgba(0,0,0,0.8);

  /* Motion */
  --ease-ui: cubic-bezier(.22,.61,.36,1);     /* @kind other */
  --ease-reveal: cubic-bezier(.19,1,.22,1);   /* @kind other */
  --ease-swap: cubic-bezier(.22,1,.36,1);     /* @kind other */
  --dur-fast: 160ms;   /* @kind other */
  --dur-base: 220ms;   /* @kind other */
  --dur-swap: 340ms;   /* @kind other */
  --dur-reveal: 700ms; /* @kind other */
  --dur-line: 850ms;   /* @kind other */

  /* Layout */
  --container-max: 1240px;
  --container-text: 900px;
  --gutter: 40px;
  --gutter-mobile: 22px;
  --section-y: 112px;
  --section-y-sub: 96px;
  --nav-height: 70px;
  --breakpoint-mobile: 1000px;
}

/* TYPOGRAPHY — BackupWatch. Poppins carries display and body;
   IBM Plex Mono carries every label, eyebrow, key and terminal line. */
:root {
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700;     /* @kind font */

  /* Fluid display */
  --fs-display: clamp(2.375rem, 5.6vw, 4.875rem);  /* 38–78 H1 */
  --fs-h2: clamp(2rem, 4.2vw, 3.5rem);             /* 32–56 section */
  --fs-h2-sub: clamp(1.75rem, 3.3vw, 2.75rem);     /* 28–44 sub-section */
  --fs-pull: clamp(1.375rem, 2.7vw, 2.125rem);     /* 22–34 pull statement */
  --fs-price: clamp(2.25rem, 3.6vw, 3.125rem);     /* 36–50 */
  --fs-wordmark: clamp(2.875rem, 10.4vw, 9.375rem);/* 46–150 footer */

  /* Static */
  --fs-h3: 1.5rem;       /* 24 */
  --fs-h3-sm: 1.3125rem; /* 21 */
  --fs-h4: 1.25rem;      /* 20 */
  --fs-lead: 1.09375rem; /* 17.5 */
  --fs-body: 1.03125rem; /* 16.5 */
  --fs-body-sm: 0.96875rem; /* 15.5 */
  --fs-sm: 0.90625rem;   /* 14.5 */
  --fs-ui: 0.875rem;     /* 14 nav */
  --fs-xs: 0.8125rem;    /* 13 */
  --fs-mono: 0.78125rem; /* 12.5 ticker/terminal */
  --fs-label: 0.75rem;   /* 12 eyebrow */
  --fs-key: 0.71875rem;  /* 11.5 table keys */
  --fs-key-sm: 0.6875rem;/* 11 column labels */

  --lh-display: 1.05;  /* @kind font */
  --lh-heading: 1.07;  /* @kind font */
  --lh-pull: 1.32;     /* @kind font */
  --lh-body: 1.6;      /* @kind font */
  --lh-relaxed: 1.68;  /* @kind font */
  --lh-terminal: 1.9;  /* @kind font */

  --ls-display: -0.035em; /* @kind font */
  --ls-heading: -0.03em;  /* @kind font */
  --ls-sub: -0.028em;     /* @kind font */
  --ls-h3: -0.015em;      /* @kind font */
  --ls-eyebrow: 0.22em;   /* @kind font */
  --ls-key: 0.14em;       /* @kind font */
  --ls-key-sm: 0.10em;    /* @kind font */
}

/* ── fonts (self-hosted, subset by unicode-range) ─────────────── */
@font-face{
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/IBMPlexMono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/IBMPlexMono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/IBMPlexMono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/IBMPlexMono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/IBMPlexMono-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/IBMPlexMono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Phosphor";
  src: url("./fonts/Phosphor.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* ── tokens/base.css ─────────────────────────────────────────── */
/* BASE — element defaults on the tokens. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; color: var(--text-strong); font-weight: var(--fw-semibold); text-wrap: balance; }
h1 { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: var(--ls-heading); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-h3); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-accent); text-decoration: none; }
a:hover { color: var(--text-body); }
::selection { background: var(--accent); color: var(--bw-white); }
img { max-width: 100%; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* Eyebrow — mono, tracked, uppercase, blue. Max three per page. */
.bw-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}
/* Column/key label — mono, small caps, faint. */
.bw-key {
  font-family: var(--font-mono);
  font-size: var(--fs-key);
  letter-spacing: var(--ls-key-sm);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Line-led group: hairline top rule instead of a box. */
.bw-rule { border-top: 1px solid var(--line-strong); padding-top: 22px; }

@keyframes bw-line { from { transform: translateY(112%); } to { transform: none; } }
@keyframes bw-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes bw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bw-quiet { 0%, 100% { opacity: 1; } 52% { opacity: .34; } }
@keyframes bw-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bw-swap-a { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bw-swap-b { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    animation-timeline: auto !important;
    transition-duration: .12s !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  [data-glass] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--surface-band) !important; }
}

/* ── tokens/icons.css ─────────────────────────────────────────── */
/* Phosphor icon classes (MIT). The @font-face lives in ./fonts.css. */
.ph {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Phosphor" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ph.ph-download-simple:before {
  content: "\e20c";
}
.ph.ph-list:before {
  content: "\e2f0";
}
.ph.ph-envelope-simple:before {
  content: "\e218";
}
.ph.ph-bell-ringing:before {
  content: "\e5e8";
}
.ph.ph-warning-circle:before {
  content: "\e4e2";
}
.ph.ph-check:before {
  content: "\e182";
}
.ph.ph-check-circle:before {
  content: "\e184";
}
.ph.ph-sliders:before {
  content: "\e432";
}
.ph.ph-lightning:before {
  content: "\e2de";
}
.ph.ph-shield-check:before {
  content: "\e40c";
}
.ph.ph-plus:before {
  content: "\e3d4";
}
.ph.ph-arrow-right:before {
  content: "\e06c";
}
.ph.ph-paper-plane-tilt:before {
  content: "\e398";
}
.ph.ph-copy:before {
  content: "\e1ca";
}