/*
 * The ember design tokens (shared with Ginger Pickles and Barking Dog Spider): the single source for the public pages and the app.
 * This product's accent is violet, so it's told apart from its siblings (orange, blue). Scoped to `.ember`.
 * Font paths are relative to this file; the server rewrites them to versioned URLs.
 */

/* ---------------------------------------------------------------- fonts (SIL OFL 1.1, see fonts/OFL.txt) */

@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/fonts/space-grotesk-latin-600-normal.woff2?v=685bbbf6) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/fonts/space-grotesk-latin-700-normal.woff2?v=35f8aec5) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/fonts/instrument-sans-latin-400-normal.woff2?v=9a91efaa) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/fonts/instrument-sans-latin-500-normal.woff2?v=9d3547da) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/fonts/instrument-sans-latin-600-normal.woff2?v=efb77091) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/fonts/jetbrains-mono-latin-400-normal.woff2?v=14425ba9) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/fonts/jetbrains-mono-latin-500-normal.woff2?v=cb182fee) format('woff2'); }

/* ---------------------------------------------------------------- 1. ember tokens (part 4 hand-over point) */

.ember {
  /* families: self-hosted above, under the names next/font gives them in Ginger Pickles */
  --font-space-grotesk: 'Space Grotesk';
  --font-instrument-sans: 'Instrument Sans';
  --font-jetbrains-mono: 'JetBrains Mono';

  /* base - warm charcoal ramp (dark only) */
  --bg-0: #0c0a09;
  --bg-1: #141110;
  --bg-2: #1c1917;
  --bg-3: #26211e;
  --bg-4: #312a26;
  --fg-1: #f5f0eb;
  --fg-2: #b9aea4;
  --fg-3: #8a7e72;
  --border-1: #2b2521;
  --border-2: #3c342d;
  --border-focus: #a78bfa;

  /* accent - violet (orange in Ginger Pickles, blue in Barking Dog Spider) */
  --accent: #a78bfa;
  --accent-hover: #c4b5fd;
  --accent-press: #8b5cf6;
  --accent-subtle: rgba(167, 139, 250, 0.14);
  --accent-border: rgba(167, 139, 250, 0.38);
  --on-accent: #140a2e;

  /* semantic */
  --success: #3fce7c;
  --success-subtle: rgba(63, 206, 124, 0.13);
  --warning: #f5b83d;
  --warning-subtle: rgba(245, 184, 61, 0.13);
  --danger: #f4655f;
  --danger-subtle: rgba(244, 101, 95, 0.14);
  --info: #5ea8f2;
  --info-subtle: rgba(94, 168, 242, 0.13);

  /* semantic aliases */
  --surface-hover: rgba(245, 240, 235, 0.05);
  --surface-press: rgba(245, 240, 235, 0.09);
  --text-link: #c4b5fd;
  --overlay: rgba(6, 4, 3, 0.66);

  /* type */
  --font-display:
    var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
  --font-body:
    var(--font-instrument-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-jetbrains-mono), ui-monospace, "SF Mono", monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.06em;

  /* shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --control-h-sm: 28px;
  --control-h-md: 36px;
  --control-h-lg: 44px;
  --content-max: 1120px;

  /* effects and motion */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --ring-focus: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);
  --glow-accent: 0 0 24px rgba(167, 139, 250, 0.3);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-normal: 200ms;
}

/*
 * Uptime Dog public pages: landing, legal and 404.
 * The page rules from the landing page design (the `.em` theme of landing-v3),
 * written against the ember token names.
 */

/* The tokens and fonts live in ember.css and are served ahead of this file. */

/* ---------------------------------------------------------------- page */

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--bg-0, #0c0a09); color-scheme: dark; }
.lp { background: var(--bg-0); color: var(--fg-1); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.lp a { color: var(--text-link); text-decoration: none; font-weight: 700; }
.lp a:focus-visible, .lp summary:focus-visible, .lp button:focus-visible, .lp input:focus-visible + label { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); }
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.lp h1, .lp h2, .lp h3 { font-family: var(--font-display); color: var(--fg-1); letter-spacing: -0.03em; margin: 0; }
.lp h1 { font-size: clamp(36px, 5.4vw, 60px); line-height: 1.06; font-weight: 700; }
.lp h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; font-weight: 700; }
.lp h3 { font-size: 19px; line-height: 1.3; font-weight: 700; }
.lead { font-size: 19px; color: var(--fg-2); max-width: 640px; }
.eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text-link); background: var(--accent-subtle); padding: 4px 12px; border-radius: var(--radius-full); }
.skip { position: absolute; left: 16px; top: -48px; z-index: 30; padding: 8px 14px; background: var(--bg-2); border-radius: var(--radius-sm); }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: var(--radius-sm); font-weight: 700; font-size: 16px;
  background: var(--accent); color: var(--on-accent) !important; box-shadow: var(--glow-accent); border: 1px solid transparent; font-family: var(--font-body); }
.btn:hover { background: var(--accent-hover); }
.btn.ghost { background: transparent; color: var(--fg-1) !important; box-shadow: none; border-color: var(--border-2); }
.btn.ghost:hover { background: var(--surface-hover); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 14px; box-shadow: none; }

/* nav */
.nav { position: sticky; top: 0; z-index: 20; background: var(--bg-0); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-1); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg-1) !important; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; font-size: 20px; }
.brand small { display: block; font-size: 11px; font-weight: 400; color: var(--fg-2); letter-spacing: 0; margin-top: -2px; }
.brand img { display: block; }
.navlinks { display: flex; gap: 28px; }
.navlinks a { color: var(--fg-1) !important; font-weight: 400; font-size: 15px; }
.navactions { display: flex; gap: 8px; }
/* the small-screen menu: a <details>, so it opens without JavaScript */
.navmenu { display: none; }
.navmenu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); color: var(--fg-1); cursor: pointer; }
.navmenu summary::-webkit-details-marker { display: none; }
.navmenu summary:hover { background: var(--surface-hover); }
.navmenu .x, .navmenu[open] .bars { display: none; } .navmenu[open] .x { display: inline; }
.navmenu nav { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; padding: 8px 24px 16px; background: var(--bg-1); border-bottom: 1px solid var(--border-1); box-shadow: var(--shadow-lg); }
.navmenu nav a { display: flex; align-items: center; min-height: 48px; color: var(--fg-1) !important; font-weight: 400; font-size: 17px; border-bottom: 1px solid var(--border-1); }
.navmenu nav a:last-child { border-bottom: 0; }

/* hero */
.hero { position: relative; padding: 88px 0 0; text-align: center; overflow: hidden; background: radial-gradient(60% 50% at 50% 0%, rgba(167, 139, 250, 0.16), transparent 70%); }
.hero .wrap { position: relative; }
.hero h1 { max-width: 880px; margin: 18px auto 18px; }
.hero .lead { margin: 0 auto; }
.hero .ctas { display: flex; gap: 12px; justify-content: center; margin: 32px 0 14px; flex-wrap: wrap; }
.hero .fine { font-size: 14px; color: var(--fg-2); }

/* app screenshot (an HTML mock, decorative) */
.shot { margin: 56px auto 0; max-width: 1080px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border: 1px solid var(--border-1); border-bottom: 0;
  background: var(--bg-2); box-shadow: var(--shadow-lg); overflow: hidden; text-align: left; font-family: var(--font-body); }
.shot-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-3); border-bottom: 1px solid var(--border-1); font-size: 13px; }
.dots { display: flex; gap: 6px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-2); display: block; }
.url { flex: 1; max-width: 420px; height: 30px; border: 1px solid var(--border-1); border-radius: var(--radius-sm); background: var(--bg-0); display: flex; align-items: center; padding: 0 10px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full); background: var(--accent-subtle); color: var(--text-link); }
.shot-body { display: grid; grid-template-columns: 1fr 250px; min-height: 330px; }
.tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--border-1); font-size: 12.5px; overflow: hidden; white-space: nowrap; }
.tabs span { padding: 9px 10px; color: var(--fg-2); }
.tabs span.on { color: var(--fg-1); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }
table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.grid th { text-align: left; font-weight: 700; color: var(--fg-2); padding: 8px 12px; border-bottom: 1px solid var(--border-1); background: var(--bg-3); white-space: nowrap; }
.grid td { padding: 7px 12px; border-bottom: 1px solid var(--border-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; color: var(--fg-1); }
.grid td.mono { font-family: var(--font-mono); font-size: 12px; }
.grid tr.sel td { background: var(--accent-subtle); }
.code { font-family: var(--font-mono); font-weight: 500; }
.c200 { color: var(--success); } .c301 { color: var(--warning); } .c404 { color: var(--danger); }
.side { border-left: 1px solid var(--border-1); padding: 12px 14px; font-size: 12.5px; background: var(--bg-1); }
.side h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-2); font-family: var(--font-body); }
.issue { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border-1); }
.issue b { font-weight: 700; font-family: var(--font-mono); font-size: 12px; }
.sev { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; }
.sev.bad { background: var(--danger); } .sev.warn { background: var(--warning); } .sev.info { background: var(--accent); }
.progress { margin-top: 14px; height: 6px; background: var(--border-1); border-radius: 99px; overflow: hidden; } .progress i { display: block; height: 100%; width: 64%; background: var(--accent); }

/* sections */
section.sec { padding: 96px 0; }
section.band { background: var(--bg-1); border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); }
.sec-head { max-width: 680px; margin-bottom: 48px; }
.sec-head p { color: var(--fg-2); font-size: 18px; margin: 12px 0 0; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 26px; }
.card p { margin: 8px 0 0; color: var(--fg-2); font-size: 15.5px; }
.ico { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-subtle); color: var(--text-link); display: grid; place-items: center; margin-bottom: 16px; }
.ico svg { width: 22px; height: 22px; }
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-2); }
.feat > div { padding: 26px; border-right: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); }
.feat > div:nth-child(3n) { border-right: 0; } .feat > div:nth-last-child(-n+3) { border-bottom: 0; }
.feat h3 { font-size: 17px; } .feat p { margin: 6px 0 0; color: var(--fg-2); font-size: 15px; }
.feat .stat + h3 { margin-top: 12px; }
.stat { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; line-height: 1; }

/* compare */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; font-size: 16px; }
.compare th, .compare td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--border-1); }
.table-scroll { max-width: 100%; overflow-x: auto; }
.compare tr:last-child td { border-bottom: 0; }
.compare th { font-family: var(--font-display); color: var(--fg-1); font-size: 15px; background: var(--bg-3); }
.compare td:first-child { color: var(--fg-2); width: 34%; }
.compare .us { background: var(--accent-subtle); color: var(--fg-1); font-weight: 700; }
.compare th.us { color: var(--text-link); }

/* pricing */
.toggle { display: inline-flex; padding: 4px; border-radius: var(--radius-full); background: var(--bg-3); border: 1px solid var(--border-1); margin-bottom: 28px; font-size: 14px; }
.toggle span, .toggle label { padding: 6px 16px; border-radius: var(--radius-full); color: var(--fg-2); }
.toggle span.on { background: var(--bg-2); color: var(--fg-1); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.toggle em { font-style: normal; color: var(--text-link); font-weight: 700; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; }
.plan { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 30px; display: flex; flex-direction: column; }
.plan.pro { border: 2px solid var(--accent); box-shadow: var(--glow-accent); position: relative; }
.plan h3 { font-size: 20px; }
.price { font-family: var(--font-display); font-size: 48px; font-weight: 700; color: var(--fg-1); letter-spacing: -0.03em; line-height: 1; margin: 14px 0 4px; }
.price small { font-size: 16px; font-weight: 400; color: var(--fg-2); letter-spacing: 0; font-family: var(--font-body); }
.plan .note { font-size: 14px; color: var(--fg-2); min-height: 22px; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 26px; flex: 1; }
.plan li { padding: 7px 0 7px 28px; position: relative; font-size: 15.5px; }
.plan li::before { content: ''; position: absolute; left: 0; top: 12px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-subtle); }
.plan li::after { content: ''; position: absolute; left: 5px; top: 15px; width: 6px; height: 9px; border: solid var(--text-link); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* an excluded feature: struck through, and it starts with a visually hidden "Not included:" for screen readers */
.plan li.off { color: var(--fg-2); opacity: 0.7; text-decoration: line-through; } .plan li.off::after { border: 0; } .plan li.off::before { background: var(--border-1); }
.plan .btn { justify-content: center; }
.plan .fine { font-size: 13.5px; color: var(--fg-2); margin: 12px 0 0; }
.plans-note { font-size: 14px; color: var(--fg-2); margin-top: 18px; }
/* monthly/yearly switch without JavaScript: two radios, the labels as the switch, and :has() on the pricing section hides the other period's price.
   The hide rules exist only inside :has(), so a browser without it shows both prices, each labelled with its period.
   The radios sit invisibly on top of the toggle (inside the .billing fieldset) so focusing one never scrolls the page. */
.billing { position: relative; border: 0; margin: 0; padding: 0; min-width: 0; }
.billing-radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.toggle label { cursor: pointer; }
#billing-monthly:checked ~ .toggle label[for="billing-monthly"], #billing-yearly:checked ~ .toggle label[for="billing-yearly"] { background: var(--bg-2); color: var(--fg-1); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
#billing-monthly:focus-visible ~ .toggle label[for="billing-monthly"], #billing-yearly:focus-visible ~ .toggle label[for="billing-yearly"] { outline: 2px solid var(--accent); outline-offset: 2px; }
#pricing:has(#billing-monthly:checked) .plans .yearly, #pricing:has(#billing-yearly:checked) .plans .monthly { display: none; }

/* faq */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--border-1); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--fg-1); font-size: 17px; list-style: none; display: flex; justify-content: space-between; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--text-link); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq p { margin: 10px 0 0; color: var(--fg-2); }

/* final cta + footer */
.final { text-align: center; padding: 96px 0; background: radial-gradient(50% 80% at 50% 100%, rgba(167, 139, 250, 0.18), transparent 70%); border-top: 1px solid var(--border-1); }
.final p { font-size: 18px; color: var(--fg-2); margin: 12px 0 28px; }
footer { font-size: 14px; border-top: 1px solid var(--border-1); }
footer .top { background: var(--bg-1); padding: 40px 0; }
footer .top .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
footer .bot { background: var(--bg-0); padding: 16px 0; color: var(--fg-2); }
footer .bot p { margin: 0; }
footer a { color: var(--fg-1) !important; font-weight: 400 !important; }
footer nav { display: flex; flex-wrap: wrap; gap: 24px 56px; min-width: 0; }
footer .fgroup { display: flex; flex-direction: column; gap: 8px; }
footer .fh { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-2); }
footer [data-analytics-toggle] { background: none; border: 0; padding: 0; font: inherit; color: var(--fg-1); text-decoration: none; cursor: pointer; }
footer [data-analytics-toggle]:hover:not(:disabled) { text-decoration: underline; }
footer [data-analytics-toggle]:disabled { cursor: default; color: var(--fg-2); }
.lp [data-analytics-toggle] { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.lp [data-analytics-toggle]:disabled { color: inherit; text-decoration: none; cursor: default; }
.lp footer [data-analytics-toggle] { color: var(--fg-1); text-decoration: none; }
.lp footer [data-analytics-toggle]:hover:not(:disabled) { text-decoration: underline; }
.lp footer [data-analytics-toggle]:disabled { color: var(--fg-2); }
footer .brand { font-size: 17px; }

/* legal pages: one narrow reading column */
.legal { max-width: 720px; padding-top: 64px; padding-bottom: 96px; }
.lp .legal h1 { font-size: clamp(32px, 4.4vw, 44px); }
.lp .legal h2 { font-size: 22px; line-height: 1.3; margin: 40px 0 0; }
.legal .updated { color: var(--fg-3); font-size: 14px; margin: 12px 0 32px; }
.legal p, .legal li { color: var(--fg-2); line-height: var(--leading-relaxed); }
.legal p { margin: 12px 0 0; }
.legal ul { margin: 12px 0 0; padding-left: 22px; }
.legal li + li { margin-top: 8px; }
.legal strong { color: var(--fg-1); }
.legal code { font-family: var(--font-mono); font-size: 0.9em; color: var(--fg-1); background: var(--bg-2); padding: 1px 6px; border-radius: var(--radius-sm); }
.legal [data-analytics-slot] { margin-top: 16px; }

@media (max-width: 860px) {
  .navlinks { display: none; }
  .navmenu { display: block; }
  .navactions { margin-left: auto; }
  .three, .feat, .plans { grid-template-columns: 1fr; }
  .feat > div { border-right: 0 !important; border-bottom: 1px solid var(--border-1) !important; }
  .shot-body { grid-template-columns: 1fr; } .side { display: none; }
}
@media (max-width: 520px) {
  .nav .wrap { gap: 8px; }
  .brand small { display: none; }
  .navactions .btn.ghost { display: none; }
  .compare { font-size: 14px; }
  .compare th, .compare td { padding: 12px 10px; overflow-wrap: anywhere; }
  .compare th { font-size: 13px; }
}

/* uptime dog additions: four plans, status dots, chips and the mini uptime bars in the hero */
.plans.four { grid-template-columns: repeat(4, 1fr); max-width: none; }
.plan { position: relative; }
.plan .badge { position: absolute; top: -12px; left: 24px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full); }
.plan .blurb { color: var(--fg-2); font-size: 14.5px; margin: 10px 0 0; }
.plan .price { font-size: 40px; }
.four-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-full); padding: 8px 16px; font-weight: 600; }
.shot .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--fg-3); }
.shot .dot.up { background: var(--success); } .shot .dot.down { background: var(--danger); }
.shot .grid td .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); }
.bars-mini { display: flex; gap: 2px; height: 26px; }
.bars-mini i { flex: 1; background: var(--success); border-radius: 2px; } .bars-mini i.d { background: var(--danger); } .bars-mini i.w { background: var(--warning); }
@media (max-width: 1080px) { .plans.four, .four-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .plans.four, .four-cards { grid-template-columns: 1fr; } .plan .badge { left: 16px; } }

/*
 * Uptime Dog content pages: features, comparisons, free tools, integrations and /uk.
 * Served after site.css in the same stylesheet, using the ember tokens.
 */

/* ---------------------------------------------------------------- hero and breadcrumbs */

.page-hero { padding: 56px 0 48px; background: radial-gradient(60% 80% at 50% 0%, rgba(167, 139, 250, 0.12), transparent 70%); border-bottom: 1px solid var(--border-1); }
.page-hero h1 { margin: 16px 0 14px; max-width: 860px; font-size: clamp(32px, 4.6vw, 52px); }
.page-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; padding: 0; margin: 0 0 18px; font-size: 14px; color: var(--fg-2); }
.crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--fg-3); }
.lp .crumbs a { color: var(--fg-2); font-weight: 400; }
.lp .crumbs a:hover { color: var(--fg-1); text-decoration: underline; }
.crumbs [aria-current] { color: var(--fg-1); }

/* ---------------------------------------------------------------- reading column */

.prose { max-width: 820px; padding-top: 48px; padding-bottom: 72px; }
.lp .prose h2 { font-size: clamp(24px, 3vw, 30px); margin: 48px 0 0; }
.lp .prose h3 { font-size: 19px; margin: 28px 0 0; }
.lp .prose > h2:first-child, .lp .prose > .note:first-child + h2, .lp .prose > .tool:first-child + h2 { margin-top: 32px; }
.prose p, .prose li { color: var(--fg-2); line-height: var(--leading-relaxed); }
.prose p { margin: 12px 0 0; }
.prose ul, .prose ol { margin: 12px 0 0; padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose strong, .prose em { color: var(--fg-1); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; color: var(--fg-1); background: var(--bg-2); padding: 1px 6px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.prose pre { margin: 16px 0 0; padding: 16px 18px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); overflow-x: auto; font-size: 13.5px; line-height: 1.55; }
.prose pre code { background: none; padding: 0; overflow-wrap: normal; white-space: pre; }
.prose .table-scroll { margin-top: 18px; }
.prose .compare { font-size: 15px; }
.prose .compare caption { caption-side: top; text-align: left; color: var(--fg-2); font-size: 14px; padding: 0 0 10px; }
.compare tbody th { font-family: var(--font-body); font-weight: 400; color: var(--fg-2); background: transparent; font-size: inherit; text-align: left; vertical-align: top; }
.compare td { vertical-align: top; }
.plan-table td, .sla-table td { white-space: nowrap; }
.compare.kv tbody th { width: 30%; white-space: nowrap; }
.note { font-size: 14px; color: var(--fg-2); border-left: 3px solid var(--accent-border); padding: 4px 0 4px 14px; }
.muted { color: var(--fg-2); }
ul.plain, ol.plain { margin: 0; padding-left: 18px; }
.prose .compare li { color: var(--fg-1); }

/* ---------------------------------------------------------------- tools */

.tool { display: grid; gap: 20px; }
.tool-form { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 16px; }
.lp .prose .tool-h { font-size: 19px; margin: 0; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-weight: 700; color: var(--fg-1); font-size: 15px; }
.field input, .field select { width: 100%; height: var(--control-h-lg); padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--bg-0); color: var(--fg-1); font: inherit; font-size: 16px; }
.field input.mono { font-family: var(--font-mono); }
.field input::placeholder { color: var(--fg-3); }
.field input:focus-visible, .field select:focus-visible { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus); }
.prose .hint { margin: 0; font-size: 14px; }
.field-row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.tool-form .btn { justify-self: start; cursor: pointer; }
.lp button.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.prose .form-error { margin: 0; padding: 12px 16px; border-radius: var(--radius-md); background: var(--danger-subtle); border: 1px solid var(--danger); color: var(--fg-1); }
.result { background: var(--bg-1); border: 1px solid var(--accent-border); border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 12px; min-width: 0; }
.lp .prose .result h3 { margin: 0; }
.prose .result p, .prose .result .table-scroll { margin: 0; }
.prose .result-big { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--fg-1); line-height: 1.3; }
.prose .result-big.ok { color: var(--success); }
.prose .result-big.bad { color: var(--danger); }
.prose .runs { margin: 0; font-family: var(--font-mono); font-size: 14.5px; }
.prose .runs li { color: var(--fg-1); }
.prose .examples { font-size: 14.5px; margin: 0; }
.prose .examples code { white-space: nowrap; }

/* ---------------------------------------------------------------- cards, related links and the integrations index */

.tool-cards { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 16px; }
.tool-cards li { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 22px 24px; margin: 0 !important; }
.lp .prose .tool-cards h2 { font-size: 20px; margin: 0; }
.tool-cards p { margin: 8px 0 0; }
section.related { padding: 56px 0; background: var(--bg-1); border-top: 1px solid var(--border-1); }
.lp .related h2 { font-size: 24px; margin-bottom: 20px; }
.link-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp .link-cards a { display: grid; gap: 6px; height: 100%; padding: 20px 22px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-lg); color: var(--fg-1); }
.lp .link-cards a:hover { border-color: var(--accent-border); background: var(--bg-3); }
.link-cards b { color: var(--text-link); }
.link-cards span { color: var(--fg-2); font-weight: 400; font-size: 15px; }
.toc ul { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.toc li { margin: 0 !important; }
.lp .toc a { display: inline-block; padding: 6px 14px; border-radius: var(--radius-full); background: var(--bg-2); border: 1px solid var(--border-1); color: var(--fg-1); font-weight: 600; font-size: 14px; }
.integration { scroll-margin-top: 84px; }

@media (max-width: 860px) {
  .link-cards { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .page-hero { padding: 36px 0 32px; }
  .wrap.prose { padding-left: 16px; padding-right: 16px; }
  .tool-form, .result { padding: 18px; }
  .field-row { grid-template-columns: 1fr; }
  .page-hero .ctas .btn { flex: 1 1 auto; justify-content: center; }
  .plan-table td, .sla-table td { white-space: normal; }
}