/*
  phishtime.com stylesheet. Dark theme only — the palette and type came
  from the old coming-soon page and there was no reason to change them
  once the real site replaced it.

  No build step. No preprocessor. Custom properties do the variable job
  Sass used to do, and the file isn't big enough yet to need splitting.
*/

:root {
  --bg: #0b0d10;
  --bg-elev: #11141a;
  --bg-elev-2: #151a21;

  --line: #1f242d;
  --line-2: #2a313c;

  --text: #e6e8eb;
  --text-2: #a8afba;
  --text-3: #6b7280;

  --accent: #5eead4;
  --accent-2: #2dd4bf;
  --accent-bg: rgba(94, 234, 212, 0.08);
  --accent-line: rgba(94, 234, 212, 0.25);

  /* Hello World gets its own color, separate from the teal accent —
     it needs to read as "the plan we want you to notice" without being
     confused with the general brand accent used everywhere else. */
  --green: #4ade80;
  --green-2: #22c55e;
  --green-bg: rgba(74, 222, 128, 0.1);
  --green-line: rgba(74, 222, 128, 0.32);

  --amber: #fbbf24;
  --amber-bg: rgba(251, 191, 36, 0.08);
  --amber-line: rgba(251, 191, 36, 0.22);

  /* Pro's own identity — was sharing the teal accent with Starter (matches
     the app's PLAN_BORDER_COLOR, which doesn't distinguish them either),
     but that made it impossible to tell at a glance which of the two the
     seat slider currently recommends. Blue, since green/teal/violet were
     already spoken for. */
  --blue: #60a5fa;
  --blue-2: #3b82f6;
  --blue-bg: rgba(96, 165, 250, 0.1);
  --blue-line: rgba(96, 165, 250, 0.34);

  /* Same violet the app uses for its Enterprise tier (globals.css
     --trial, dark-mode value — this site has no light mode, so there's
     only one value to carry over). Reserved for Enterprise identity: the
     plan card, the comparison table's Enterprise-only pills, and the
     "past self-serve size" state on the seat slider. NOT used for the
     promo any more — see --orange below, they used to share this color
     and it made "Enterprise" and "there's a discount on" read as the
     same signal. */
  --violet: #c084fc;
  --violet-2: #f472b6;
  --violet-bg: rgba(192, 132, 252, 0.12);
  --violet-line: rgba(192, 132, 252, 0.38);

  /* The promo color. Deliberately not --amber (already spoken for by the
     Messaging channel pill) and not --violet (Enterprise's). */
  --orange: #fb923c;
  --orange-2: #f97316;
  --orange-bg: rgba(251, 146, 60, 0.12);
  --orange-line: rgba(251, 146, 60, 0.38);

  --danger: #f87171;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, sans-serif;

  --maxw: 1160px;
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  max-width: 100%;
}

::selection {
  background: var(--accent-bg);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* layout */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.wrap-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

main {
  flex: 1;
}

section {
  padding: 88px 0;
}

section.tight {
  padding: 56px 0;
}

.divider {
  border-top: 1px solid var(--line);
}

/* type */

h1, h2, h3, h4 {
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.12;
  font-weight: 700;
}

h1 {
  font-size: clamp(34px, 5.2vw, 58px);
}

h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
}

h3 {
  font-size: 19px;
  letter-spacing: -0.015em;
}

h4 {
  font-size: 15px;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

.lede {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--text-2);
  line-height: 1.65;
}

.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.accent { color: var(--accent); }
.green-text { color: var(--green); }
.violet-text { color: var(--violet); }
.orange-text { color: var(--orange); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.flag { display: inline-block; vertical-align: middle; margin-right: 2px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--accent-line);
}

.section-head {
  max-width: 720px;
  margin-bottom: 44px;
}

.section-head p {
  margin-top: 14px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head.center .eyebrow::after {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--accent-line);
}

/* top nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 13, 16, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}

/* the mark svg has no line-height of its own, so it centers against the
   flex box exactly — brand-name needs the same or the inherited
   line-height (1.6, from body) inflates its box above and below the
   actual glyphs, and the mark ends up looking taller/higher by
   comparison even though the two boxes are correctly centered */
.brand svg {
  display: block;
  flex: none;
}

.brand-name {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.01em;
}

.brand-name b {
  color: var(--accent);
  font-weight: 600;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-links a {
  font-size: 14px;
  color: var(--text-2);
  transition: color 0.15s;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--text);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}

@media (max-width: 880px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 16px;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 11px 0;
    width: 100%;
    border-bottom: 1px solid var(--line);
  }

  .nav-toggle {
    display: inline-block;
    order: 3;
  }

  .nav-cta .btn-ghost {
    display: none;
  }
}

/* buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 13px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
  cursor: pointer;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  color: #04231f;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-2);
}

/* used for the couple of spots where the green plan needs its own
   button rather than the teal primary — mainly so a green card doesn't
   sit next to a teal button and fight itself */
.btn-green {
  background: var(--green);
  color: #052e16;
  border-color: var(--green);
}

.btn-green:hover {
  background: var(--green-2);
}

.btn-blue {
  background: var(--blue);
  color: #07234a;
  border-color: var(--blue);
}

.btn-blue:hover {
  background: var(--blue-2);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}

.btn-ghost:hover {
  border-color: var(--accent-line);
  background: var(--accent-bg);
}

.btn-sm {
  padding: 9px 14px;
  font-size: 13px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.btn-row.center {
  justify-content: center;
}

/* cards */

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.card h3 {
  margin-bottom: 8px;
}

.card p {
  color: var(--text-2);
  font-size: 14.5px;
}

.card-hover {
  transition: border-color 0.15s, background 0.15s;
}

.card-hover:hover {
  border-color: var(--line-2);
  background: var(--bg-elev-2);
}

.grid {
  display: grid;
  gap: 18px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}

.step-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}

/* a plain rounded pill for a category label — used on its own (features
   page) or inside .attack (home page grid) */
.tag-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--line-2);
  border-radius: 99px;
  padding: 3px 9px;
  margin-bottom: 12px;
}

.attack .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--line-2);
  border-radius: 99px;
  padding: 3px 9px;
  margin-bottom: 12px;
}

/* channel colour for the category pills above — same three colours the
   comparison table's plan pills use below, so "which channel" and "which
   plan" read as the same visual language rather than two systems */
.tag-pill.email, .attack .tag.email {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-bg);
}

/* Not violet — violet means Enterprise everywhere else on this page (plan
   card, comparison-table pills), and "Landing" is a delivery channel, not
   a plan tier. Reusing it here read as "these lures are Enterprise-only",
   which isn't true — most of them are on Starter. */
.tag-pill.landing, .attack .tag.landing {
  color: var(--blue);
  border-color: var(--blue-line);
  background: var(--blue-bg);
}

.tag-pill.messaging, .attack .tag.messaging {
  color: var(--amber);
  border-color: var(--amber-line);
  background: var(--amber-bg);
}

.attack .meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-3);
}

.attack .meta b {
  color: var(--accent);
  font-weight: 500;
}

/* ==========================================================================
   Attack "scenes" — small fixed-size mockups of what the lure or landing
   page actually looks like. One per attack type, all the same footprint
   (height + padding) so dropping one into a card grid never throws the
   row heights off. Built from boxes and a couple of inline SVGs, nothing
   else — no screenshots, no external images, keeps the page a static
   file with zero asset weight.
   ========================================================================== */

.scene {
  height: 172px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* fake browser/mail chrome reused by a couple of scenes */
.chrome {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-elev);
  overflow: hidden;
}

.chrome-bar {
  display: flex;
  gap: 5px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev-2);
}

.chrome-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-2);
}

.chrome-body {
  padding: 12px 14px 14px;
}

.skel-line {
  height: 7px;
  border-radius: 4px;
  background: var(--line-2);
  margin-bottom: 8px;
}

.skel-line.w60 { width: 60%; }
.skel-line.w80 { width: 80%; }
.skel-line.w40 { width: 40%; }

.scene-cta {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: #04231f;
  background: var(--accent);
  border-radius: 6px;
  padding: 6px 12px;
}

/* an inbox row — sender + subject — for the tracked-link scene. Kept
   separate from .chrome/.login-card below on purpose: "an email" and
   "the page it links to" are two different things and were reading as
   the same mockup before this was split out. */
.mail-card {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-elev);
  overflow: hidden;
}

.mail-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.mail-avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mail-from {
  font-size: 11.5px;
  color: var(--text);
  font-weight: 600;
}

.mail-from span {
  font-weight: 400;
  color: var(--text-3);
}

.mail-subject {
  margin-top: 1px;
  font-size: 11px;
  color: var(--text-2);
}

.mail-body {
  padding: 12px 14px 14px;
}

/* a bare login form for the "credential capture" landing-page scene —
   distinct from .mail-card above, same reasoning */
.login-card {
  width: 100%;
  max-width: 210px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.login-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.login-field {
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  margin-bottom: 8px;
}

/* QR / quishing — an explicit module grid rather than a generated
   texture, so it reads as "a QR code" and not just noise at this size */
.qr-box {
  width: 88px;
  height: 88px;
  background: #f4f6f8;
  border-radius: 6px;
  padding: 8px;
  position: relative;
  flex: none;
}

.qr-mods {
  position: absolute;
  inset: 8px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
}

.qr-mods i {
  background: transparent;
  border-radius: 1px;
}

.qr-mods i:nth-child(2n) { background: #0b0d10; }
.qr-mods i:nth-child(5n) { background: #0b0d10; }
.qr-mods i:nth-child(7n + 3) { background: #0b0d10; }
.qr-mods i:nth-child(11n + 1) { background: transparent; }

.qr-eye {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 3px solid #0b0d10;
  border-radius: 2px;
}

.qr-eye::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #0b0d10;
}

.qr-eye.tl { top: 6px; left: 6px; }
.qr-eye.tr { top: 6px; right: 6px; }
.qr-eye.bl { bottom: 6px; left: 6px; }

.phone-outline {
  width: 46px;
  height: 88px;
  border: 2px solid var(--line-2);
  border-radius: 10px;
  margin-left: 20px;
  position: relative;
  flex: none;
}

.phone-outline::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--line-2);
}

/* attachment */
.file-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 10px 14px;
}

.file-chip svg {
  flex: none;
  color: var(--text-3);
}

.file-chip .file-name {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}

.file-chip .file-name small {
  display: block;
  color: var(--text-3);
  font-size: 10.5px;
  margin-top: 2px;
}

/* MFA push + OAuth consent + device code share this card shape —
   a rounded prompt with a title, a line of context and two actions */
.prompt-card {
  width: 100%;
  max-width: 230px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 14px 16px;
}

.prompt-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.prompt-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 3px;
}

.prompt-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.prompt-list span {
  font-size: 11px;
  color: var(--text-2);
  padding-left: 14px;
  position: relative;
}

.prompt-list span::before {
  content: "•";
  position: absolute;
  left: 2px;
  color: var(--text-3);
}

.prompt-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.prompt-btn {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 6px;
  padding: 7px 0;
}

.prompt-btn.deny {
  color: var(--text-3);
  border: 1px solid var(--line-2);
}

.prompt-btn.allow {
  color: #04231f;
  background: var(--accent);
}

/* device code */
.code-mock {
  text-align: center;
}

.code-mock .code-big {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text);
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  padding: 8px 16px;
  display: inline-block;
}

.code-mock .code-url {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
}

/* ClickFix — the fake CAPTCHA checkbox above the Run box it tricks
   someone into pasting a command into */
.clickfix-mock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fake-captcha {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-2);
  background: var(--bg-elev);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-2);
}

.fake-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--text-3);
  border-radius: 3px;
  flex: none;
}

.run-box {
  width: 100%;
  max-width: 240px;
  background: #08090b;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--mono);
}

.run-box .run-label {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.run-box .run-cmd {
  margin-top: 6px;
  font-size: 11px;
  color: #d0f0e8;
  word-break: break-all;
  line-height: 1.5;
}

.run-box .run-cmd .caret {
  display: inline-block;
  width: 6px;
  height: 12px;
  background: var(--accent);
  vertical-align: -2px;
  margin-left: 2px;
}

/* SMS / Viber — the message sitting as a lock-screen notification on a
   small phone mockup, rather than floating on its own. Reuses the same
   notch trick as .phone-outline (QR scene) at a bigger size. */
.phone-frame {
  width: 136px;
  height: 158px;
  border: 2px solid var(--line-2);
  border-radius: 20px;
  background: linear-gradient(165deg, var(--bg-elev-2), var(--bg));
  padding: 20px 10px 10px;
  position: relative;
  flex: none;
}

.phone-frame::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-2);
}

.phone-frame .chat-bubble {
  max-width: 100%;
  font-size: 10px;
  padding: 8px 10px;
  border-radius: 10px;
}

.phone-frame .chat-bubble .chat-link {
  font-size: 9.5px;
}

.chat-bubble {
  max-width: 240px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
  overflow-wrap: break-word;
}

.chat-bubble .chat-link {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11.5px;
  /* the URL is one long token with no spaces — inside the narrow phone
     mockup it needs a forced break, not just a wrap opportunity, or it
     runs straight past the edge of the frame */
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.chat-bubble .chat-time {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-3);
}

/* feature rows */

.rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.row:last-child {
  border-bottom: none;
}

.row .check {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  flex: none;
}

.row .row-body {
  font-size: 14.5px;
  color: var(--text-2);
}

.row .row-body b {
  color: var(--text);
  font-weight: 600;
}

/* callouts */

.callout {
  border: 1px solid var(--accent-line);
  background: var(--accent-bg);
  border-radius: var(--radius);
  padding: 20px 22px;
  font-size: 14.5px;
  color: var(--text-2);
}

.callout b {
  color: var(--text);
}

.callout.amber {
  border-color: var(--amber-line);
  background: var(--amber-bg);
}

.callout.green {
  border-color: var(--green-line);
  background: var(--green-bg);
}

/* tables */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
}

table.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 720px;
}

table.cmp th, table.cmp td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

table.cmp thead th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  white-space: nowrap;
}

/* every .cmp table's plan columns are centered (numbers, checkmarks,
   pills) — a left-aligned header over centered cells read like they
   didn't belong to each other */
table.cmp thead th:not(:first-child) {
  text-align: center;
}

table.cmp tbody th {
  font-weight: 500;
  color: var(--text-2);
}

table.cmp td {
  text-align: center;
  color: var(--text-2);
}

table.cmp td:first-child {
  text-align: left;
}

table.cmp tr:last-child th,
table.cmp tr:last-child td {
  border-bottom: none;
}

table.cmp .yes { color: var(--accent); }
table.cmp .no { color: var(--text-3); }

/* Checkmarks in the comparison table used to be one flat colour, which
   made it hard to tell "included everywhere" from "the one thing that's
   actually Enterprise-only" without reading every row. A small coloured
   pill per plan column fixes that at a glance — same three colours as
   the plan cards, so Hello World's column, Starter/Pro's, and
   Enterprise's all read consistently top to bottom. */
.cmp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.cmp-pill.hw {
  color: var(--green);
  background: var(--green-bg);
}

.cmp-pill.paid {
  color: var(--accent);
  background: var(--accent-bg);
}

.cmp-pill.ent {
  color: var(--violet);
  background: var(--violet-bg);
}

/* "Unlimited" cells read as a colored ∞ instead of the word — same three
   identity colors as the plan cards, per column, so "no ceiling here" is
   legible at a glance rather than one more line of text to read. */
.cmp-inf {
  font-size: 17px;
  font-weight: 700;
}

.cmp-inf.starter {
  color: var(--accent);
}

.cmp-inf.pro {
  color: var(--blue);
}

.cmp-inf.ent {
  color: var(--violet);
}

table.cmp tbody tr:hover {
  background: var(--bg-elev-2);
}

.group-row th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--bg);
  padding-top: 18px;
}

/* pricing plans */

.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1000px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .plans {
    grid-template-columns: 1fr;
  }
}

.plan {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-bg), transparent 46%), var(--bg-elev);
}

/* Hello World — the flagship. Its own color on purpose, and a slightly
   stronger border/glow than .featured gets, since this is the card we
   actually want the eye to land on first. */
.plan.flagship {
  border-color: var(--green-line);
  background: linear-gradient(180deg, var(--green-bg), transparent 55%), var(--bg-elev);
  box-shadow: 0 0 0 1px var(--green-line) inset;
}

.plan.flagship .plan-name {
  color: var(--green);
}

/* Enterprise — violet, matching the app's own Enterprise/trial colour
   (globals.css --trial). Quieter than .flagship on purpose: Hello World
   is still the one card meant to grab attention first. */
.plan.violet {
  border-color: var(--violet-line);
  background: linear-gradient(180deg, var(--violet-bg), transparent 55%), var(--bg-elev);
}

.plan.violet .plan-name {
  color: var(--violet);
}

.plan.violet li::before {
  color: var(--violet);
}

/* the ghost "Talk to us" button otherwise hovers teal like every other
   ghost button on the page — on the violet card that reads as it
   belonging to a different plan than the one it's actually on. Tinted
   at rest too, not just on hover, so the button reads as part of the
   card from the first frame rather than only once you touch it. */
.plan.violet .btn-ghost {
  border-color: var(--violet-line);
  color: var(--violet);
}

.plan.violet .btn-ghost:hover {
  border-color: var(--violet-line);
  background: var(--violet-bg);
  color: var(--violet);
}

.plan.blue {
  border-color: var(--blue-line);
  background: linear-gradient(180deg, var(--blue-bg), transparent 55%), var(--bg-elev);
}

.plan.blue .plan-name {
  color: var(--blue);
}

.plan.blue li::before {
  color: var(--blue);
}

/* Which card the seat slider currently recommends — set/cleared in
   pricing.js as the slider moves, colored via --fit-color so the ring
   matches that plan's own identity color rather than one fixed color
   for all four. */
.plan {
  transition: box-shadow 0.2s, transform 0.2s;
}

.plan.best-fit {
  box-shadow: 0 0 0 2px var(--fit-color, var(--accent));
  transform: translateY(-3px);
}

.plan .plan-name {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.plan .plan-price {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 14px 0 2px;
}

.plan .plan-price small {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0;
}

.plan .plan-price .price-was {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: line-through;
  margin-right: 6px;
}

.plan .plan-note {
  font-size: 13px;
  color: var(--text-3);
  min-height: 38px;
}

.plan ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.plan li {
  font-size: 13.5px;
  color: var(--text-2);
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.plan li::before {
  content: "›";
  color: var(--accent);
  font-family: var(--mono);
  flex: none;
}

.plan.flagship li::before {
  color: var(--green);
}

.plan .btn {
  margin-top: 22px;
  width: 100%;
}

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #04231f;
  background: var(--accent);
  border-radius: 99px;
  padding: 3px 9px;
  margin-left: 8px;
  vertical-align: middle;
}

.badge.green {
  color: #052e16;
  background: var(--green);
}

.badge.violet {
  color: #2e1065;
  background: var(--violet);
}

.badge.blue {
  color: #07234a;
  background: var(--blue);
}

/* Promo banner + inline discount badges — hardcoded on the landing site,
   separate from the app's live promotion state. If a promotion goes live
   or ends in the app, update PROMO in pricing.js by hand; this page never
   reads the database.

   Orange — kept off both green (Hello World's) and violet (Enterprise's)
   on purpose, so the promo reads as its own signal instead of borrowing
   a color that already means something else on this page. Sized to
   actually be the first thing you notice, which was the point of it. */
.promo-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--orange-line);
  background: linear-gradient(135deg, var(--orange-bg), transparent 75%), var(--bg-elev);
  box-shadow: 0 0 0 1px var(--orange-line) inset, 0 10px 30px rgba(251, 146, 60, 0.12);
  border-radius: var(--radius);
  padding: 18px 28px;
  margin: 0 auto 40px;
  width: 100%;
  text-align: center;
}

.promo-banner .promo-main {
  font-size: 15.5px;
  color: var(--text-2);
}

.promo-banner b {
  color: var(--orange);
}

.promo-banner .promo-sub {
  font-size: 12.5px;
  color: var(--text-3);
}

.promo-pct {
  font-family: var(--mono);
  font-weight: 700;
  color: #431407;
  background: var(--orange);
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 12px;
}

/* Seat calculator.
   One slider, not per-plan tabs — the old three-tab version resized the
   track's min/max on every tab click, so the thumb visibly jumped even
   though the seat count hadn't changed. This mirrors the actual
   admin/upgrade seat slider instead: a single fixed range, a "best fit"
   readout that updates live, and colour that follows whichever tier the
   current count would land on. */

.calc {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}

.calc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.calc-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.calc-seats-row {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.calc-seats-num {
  font-family: var(--mono);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--seat-num-color, var(--text));
  transition: color 0.15s;
}

.calc-seats-unit {
  font-size: 13px;
  color: var(--text-3);
}

.fit-chip {
  border-radius: 10px;
  padding: 8px 16px;
  text-align: right;
  border: 1px solid color-mix(in srgb, var(--fit-color, var(--accent)) 30%, transparent);
  background: color-mix(in srgb, var(--fit-color, var(--accent)) 12%, transparent);
  transition: background 0.15s, border-color 0.15s;
}

.fit-chip-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fit-color, var(--accent));
}

.fit-chip-plan {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.fit-chip-sub {
  font-size: 11px;
  color: var(--text-3);
}

.calc-track-row {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.calc-step {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--text-2);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.1s;
}

.calc-step:active {
  transform: scale(0.9);
}

/* Native range inputs can only be recoloured through the vendor
   pseudo-elements below, not a plain CSS color — so the filled portion
   and the thumb both read from two custom properties JS updates on every
   input event (--seat-fill / --seat-fill-color). That's what makes the
   track itself change colour as the count crosses into a different
   plan's territory. */
/* Two layers: the dynamic fill (current tier colour, up to the thumb)
   sits on top and is transparent past the thumb, so the static layer
   underneath shows through — a permanent, always-visible map of where
   each plan's ceiling falls on the track (18.35% = 250 seats/Starter's
   ceiling, 79.53% = 1,000/Pro's, 99.92% = 1,250/the self-serve edge),
   independent of wherever the thumb currently sits. */
.seat-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  outline: none;
  background:
    linear-gradient(
      to right,
      var(--seat-fill-color, var(--accent)) 0%,
      var(--seat-fill-color, var(--accent)) var(--seat-fill, 0%),
      transparent var(--seat-fill, 0%),
      transparent 100%
    ),
    linear-gradient(
      to right,
      rgba(94, 234, 212, 0.16) 0%, rgba(94, 234, 212, 0.16) 18.35%,
      rgba(96, 165, 250, 0.26) 18.35%, rgba(96, 165, 250, 0.26) 79.53%,
      rgba(192, 132, 252, 0.24) 79.53%, rgba(192, 132, 252, 0.24) 99.92%,
      rgba(192, 132, 252, 0.42) 99.92%, rgba(192, 132, 252, 0.42) 100%
    ),
    var(--bg-elev-2);
  transition: background-image 0.05s linear;
}

.seat-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 4px solid var(--seat-fill-color, var(--accent));
  cursor: grab;
  transition: transform 0.1s;
}

.seat-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.seat-slider::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(
      to right,
      var(--seat-fill-color, var(--accent)) 0%,
      var(--seat-fill-color, var(--accent)) var(--seat-fill, 0%),
      transparent var(--seat-fill, 0%),
      transparent 100%
    ),
    linear-gradient(
      to right,
      rgba(94, 234, 212, 0.16) 0%, rgba(94, 234, 212, 0.16) 18.35%,
      rgba(96, 165, 250, 0.26) 18.35%, rgba(96, 165, 250, 0.26) 79.53%,
      rgba(192, 132, 252, 0.24) 79.53%, rgba(192, 132, 252, 0.24) 99.92%,
      rgba(192, 132, 252, 0.42) 99.92%, rgba(192, 132, 252, 0.42) 100%
    ),
    var(--bg-elev-2);
}

.seat-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 4px solid var(--seat-fill-color, var(--accent));
  cursor: grab;
}

.calc-jump {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-3);
}

.jump-chip {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-2);
  border-radius: 99px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.jump-chip:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

/* colored to match the plan each jump chip actually lands on — same
   mapping as the plan cards below (Hello World green, Starter/Pro teal,
   both share one color same as PLAN_BORDER_COLOR does in the app) */
.jump-chip.hw {
  border-color: var(--green-line);
  color: var(--green);
}

.jump-chip.hw:hover {
  background: var(--green-bg);
  border-color: var(--green-line);
  color: var(--green);
}

.jump-chip.paid {
  border-color: var(--accent-line);
  color: var(--accent);
}

.jump-chip.paid:hover {
  background: var(--accent-bg);
  border-color: var(--accent-line);
  color: var(--accent);
}

.jump-chip.pro {
  border-color: var(--blue-line);
  color: var(--blue);
}

.jump-chip.pro:hover {
  background: var(--blue-bg);
  border-color: var(--blue-line);
  color: var(--blue);
}

.calc-price {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.calc-price-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.calc-price .was {
  font-size: 15px;
  color: var(--text-3);
  text-decoration: line-through;
}

.calc-price .big {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--orange);
}

.calc-free .big {
  color: var(--green);
}

.promo-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #431407;
  background: var(--orange);
  border-radius: 6px;
  padding: 2px 7px;
}

.calc-price .per {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-3);
  font-family: var(--mono);
}

.save-line {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--orange);
}

.calc-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-3);
}

.calc-foot .lock-in {
  display: block;
  margin-top: 8px;
}

@media (max-width: 560px) {
  .calc-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .fit-chip {
    text-align: left;
  }
}

/* faq */

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--accent);
  font-family: var(--mono);
  flex: none;
}

.faq details[open] summary::after {
  content: "−";
}

.faq details p {
  margin-top: 12px;
  color: var(--text-2);
  font-size: 14.5px;
  max-width: 76ch;
}

/* hero */

.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 84px;
}

.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -140px;
  transform: translateX(-50%);
  width: 1100px;
  height: 700px;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 40%, var(--accent-bg), transparent 70%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.hero h1 .glow {
  color: var(--accent);
}

.hero .lede {
  margin-top: 20px;
  max-width: 620px;
}

.trust-line {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-3);
}

.trust-line span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.trust-line span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* subpage header */

.page-head {
  padding: 64px 0 8px;
  position: relative;
}

.page-head h1 {
  font-size: clamp(30px, 4.4vw, 46px);
}

.page-head .lede {
  margin-top: 18px;
  max-width: 680px;
}

/* footer */

.foot {
  border-top: 1px solid var(--line);
  padding: 44px 0 32px;
  margin-top: 24px;
}

.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  justify-content: space-between;
}

.foot-col h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: 12px;
}

.foot-col a {
  display: block;
  font-size: 13.5px;
  color: var(--text-2);
  padding: 4px 0;
}

/* .foot-col a's display:block outranks .brand's display:flex here (one
   more type selector = higher specificity), so the footer's brand link
   was silently falling back to inline flow — the mark and the wordmark
   were never actually flex-centered against each other, they were just
   sitting on the text baseline like any icon-before-text would. That's
   the vertical mismatch, not a line-height thing. */
.foot-col a.brand {
  display: flex;
}

.foot-col a:hover {
  color: var(--text);
}

.foot-bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}

/* small stuff that didn't earn its own section */

.kbd {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--text-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-3);
  border: 1px solid var(--line-2);
  background: var(--bg-elev);
  border-radius: 99px;
  padding: 6px 14px;
}

.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.cta-band {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-elev), var(--bg));
  border-radius: var(--radius);
  padding: 48px 40px;
  text-align: center;
}

@media (max-width: 620px) {
  .cta-band {
    padding: 34px 22px;
  }

  section {
    padding: 64px 0;
  }
}