/* HopMango landing. Plain CSS, brand tokens as custom properties. */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/inter-latin-wght-normal.woff2) format('woff2-variations');
}

:root {
  --orange: #ff9f1c;
  /* Orange as text, darkened 2026-09-08. docs/19-brand measured #C2540A on
     white, where it is 4.6:1; every kicker, every in-prose link and the
     closing "Sign in" sit on the off-white page ground instead, where the same
     colour was 4.4:1 and failed. This one is 4.86:1 on #F8FAFC and 5.08:1 on
     white, so it clears both surfaces the site actually uses. */
  --orange-text: #b84e08;
  --yellow: #ffc94d;
  --green: #7ed957;
  --green-text: #1f7a3a;
  --navy: #0f172a;
  --navy-2: #1e293b;
  --slate: #475569;
  --slate-2: #94a3b8;
  --line: #e2e8f0;
  --off-white: #f8fafc;
  --white: #ffffff;
  --text-on-dark: #f1f5f9;

  --radius: 16px;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px rgb(15 23 42 / 0.06);
  --shadow-lg: 0 2px 4px rgb(15 23 42 / 0.08), 0 24px 60px rgb(15 23 42 / 0.18);
  --font: 'Inter Variable', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--navy);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: 10px; background: var(--navy); color: var(--white); font-weight: 600;
}
.skip:focus { top: 12px; }

.container { width: min(1160px, 100% - 48px); margin-inline: auto; }

/* Type */
.kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange-text); margin-bottom: 14px;
}
.kicker-on-dark { color: var(--orange); }

.display {
  font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em;
}
.display em { font-style: normal; color: var(--orange-text); }

.section-sub {
  margin-top: 16px; max-width: 56ch; font-size: 18px; color: var(--slate);
}

/* Wordmark */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark :is(svg, img) { width: 34px; height: 34px; }
.wordmark {
  font-weight: 800; font-size: 26px; letter-spacing: -0.03em; line-height: 1; white-space: nowrap;
}
.wordmark-sm { font-size: 20px; }
.wm-hop { color: var(--navy); }
.wm-hop-dark { color: var(--white); }
.wm-mango { color: var(--orange); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: 14px 24px; font-size: 16px; }
.btn-primary { background: var(--orange); color: var(--navy); }
.btn-primary:hover { background: #ffad3f; }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: rgb(15 23 42 / 0.06); }
.btn-ghost { color: var(--navy); background: transparent; }
.btn-ghost:hover { background: rgb(15 23 42 / 0.06); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgb(248 250 252 / 0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.site-nav { display: flex; gap: 6px; margin-left: 8px; }
.site-nav a {
  padding: 8px 12px; border-radius: 10px; text-decoration: none; font-weight: 500; font-size: 15px; color: var(--slate);
}
.site-nav a:hover { color: var(--navy); background: rgb(15 23 42 / 0.05); }
/* Docs: one entry in the header, the two pages under it. It was a hover panel
   with the entry itself a link, which on a touch screen meant the panel opened
   by accident or not at all, and the second page stayed as hidden as before.
   It is a <details> now: it opens on tap, on click and on Enter, it says
   whether it is open, and it still needs no JavaScript, which is what keeps
   this site's one script and its script-src 'self'. Both pages are one tap
   away, so nothing is lost by the entry no longer being a link itself. */
.nav-docs { position: relative; }
.nav-docs > summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  padding: 8px 12px; border-radius: 10px; font-weight: 500; font-size: 15px; color: var(--slate);
}
.nav-docs > summary::-webkit-details-marker { display: none; }
.nav-docs > summary:hover { color: var(--navy); background: rgb(15 23 42 / 0.05); }
.chev {
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-docs[open] > summary { color: var(--navy); }
.nav-docs[open] .chev { transform: translateY(1px) rotate(-135deg); }
.nav-docs-menu {
  position: absolute; top: 100%; left: 0; z-index: 30;
  display: flex; flex-direction: column; min-width: 180px; padding: 6px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--white); box-shadow: var(--shadow);
}
.nav-docs-menu a { white-space: nowrap; }

/* The phone's navigation. Below 860px the row of links is hidden, and until
   now nothing replaced it: the header offered the brand and two buttons, and
   every section of the site was unreachable from the top of the page. This is
   the same list plus both doors, in a <details> for the same reason as above:
   it opens with no script. It is hidden on the wide layout, where the row of
   links is the navigation. */
.nav-menu { display: none; position: relative; }
.nav-menu > summary {
  display: grid; place-items: center; cursor: pointer; list-style: none;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--white);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--navy);
}
.burger { position: relative; }
.burger::before, .burger::after { content: ''; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.nav-menu[open] .burger { background: transparent; }
.nav-menu[open] .burger::before { top: 0; transform: rotate(45deg); }
.nav-menu[open] .burger::after { top: 0; transform: rotate(-45deg); }
.nav-menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 30;
  width: min(288px, calc(100vw - 32px)); display: grid; gap: 2px; padding: 10px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--white); box-shadow: var(--shadow-lg);
}
.nav-menu-panel a {
  display: flex; align-items: center; min-height: 44px;
  padding: 10px 12px; border-radius: 10px;
  text-decoration: none; font-size: 16px; font-weight: 600; color: var(--navy);
}
.nav-menu-panel a:hover { background: rgb(15 23 42 / 0.05); }
.nav-menu-label {
  margin: 10px 0 0; padding: 4px 12px 0;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate);
}
.nav-menu-doors { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.nav-menu-doors .btn { justify-content: center; min-height: 44px; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 36px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; color: var(--slate);
}
.lang-switch:hover { color: var(--navy); border-color: var(--slate-2); }

/* Hero */
.hero { padding: 72px 0 40px; background: var(--off-white); }
.hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 40px;
}
.hero h1 {
  font-size: clamp(42px, 6.2vw, 78px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; margin-top: 4px;
}
.lede { margin-top: 24px; max-width: 46ch; font-size: 20px; color: var(--slate); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 20px; font-size: 14px; color: var(--slate); max-width: 52ch; }
/* The three things the agent does not do, right under the install promise. */
.hero-note-agent { margin-top: 8px; font-weight: 600; color: var(--navy); }
.hero-note-agent::before {
  content: ''; display: inline-block; vertical-align: middle; margin-right: 8px;
  width: 11px; height: 6px; border-left: 2.5px solid var(--green-text); border-bottom: 2.5px solid var(--green-text);
  transform: rotate(-45deg) translate(1px, -2px);
}
.hero-art :is(svg, img) { width: min(100%, 440px); height: auto; margin-inline: auto; }

/* The proof strip: category, audience, the three things that make this
   different, and the price, on one strip under the headline. The price comes
   from contracts/plans.json through build.ts, never from this file and never
   from a sentence somebody typed. */
.proof {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0;
  font-size: 13.5px; color: var(--slate);
}
.proof li { display: inline-flex; align-items: center; }
/* The separator trails its own item rather than leading the next one: when the
   strip wraps, a line has to start with a word and not with a dot. */
.proof li:not(:last-child)::after { content: '\00b7'; margin: 0 9px; color: var(--slate); }
.proof .proof-price { font-weight: 700; color: var(--navy); }

/* Sections */
.section { padding: 88px 0; }
.section-alt { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.cards { display: grid; gap: 20px; margin-top: 40px; }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px;
}
.section-alt .card { background: var(--off-white); }
.card h3 { font-size: 20px; font-weight: 700; }
.card p { color: var(--slate); font-size: 16px; flex: 1; }
.card-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgb(255 159 28 / 0.14); color: var(--orange-text);
}
.card-icon svg { width: 22px; height: 22px; }
.mood { align-items: center; text-align: center; padding-top: 20px; }
.mood-art :is(svg, img) { width: 132px; height: 132px; }
.mood-label { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }

/* Dark band */
.band { background: var(--navy); color: var(--text-on-dark); }
.band .display { color: var(--white); }
.band .section-sub { color: var(--slate-2); }
.band-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.band-copy { position: relative; }
.checklist { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 30px; color: var(--text-on-dark); font-size: 16px; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3Cpath d='M7 12.5l3.2 3.2L17.5 8.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3Cpath d='M7 12.5l3.2 3.2L17.5 8.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.band-mascot { margin-top: 32px; }
.band-mascot :is(svg, img) { width: 150px; height: 150px; }

/* The dashboard mock, pure HTML and CSS */
.mock {
  display: grid; grid-template-columns: 172px 1fr; border-radius: 18px; overflow: hidden;
  background: var(--white); color: var(--navy); box-shadow: var(--shadow-lg);
  font-size: 12px; line-height: 1.35; min-width: 0;
}
.mock-side { background: var(--navy-2); color: #cbd5e1; padding: 16px 12px; }
.mock-brand { display: flex; align-items: center; gap: 8px; padding: 4px 6px 16px; }
.mock-brand-mark :is(svg, img) { width: 22px; height: 22px; }
.mock-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mock-nav li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-weight: 500; }
.mock-nav li.is-active { background: rgb(255 255 255 / 0.1); color: var(--white); }
.mock-dot { width: 8px; height: 8px; border-radius: 3px; background: currentColor; opacity: 0.6; }
.mock-nav li.is-active .mock-dot { background: var(--orange); opacity: 1; }

.mock-main { padding: 14px 18px 18px; background: var(--off-white); min-width: 0; }
.mock-top { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 14px; }
.mock-search {
  flex: 0 1 200px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); color: var(--slate);
}
.mock-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--white); }

.mock-status {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px;
  background: var(--white); border: 1px solid var(--line);
}
.mock-status strong { display: block; font-size: 15px; font-weight: 700; }
.mock-status span { color: var(--slate); }
.mock-check {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--green); color: var(--navy);
}
.mock-check svg { width: 20px; height: 20px; }

.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.mock-kpi { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); min-width: 0; }
.mock-kpi-label { color: var(--slate); font-size: 11px; }
.mock-kpi-value { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.mock-kpi-value small { font-size: 13px; font-weight: 700; margin-left: 2px; }
.mock-kpi-delta { color: var(--green-text); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mock-chart {
  position: relative; margin-top: 12px; padding: 12px 14px 26px 44px; border-radius: 12px; background: var(--white); border: 1px solid var(--line);
}
.mock-chart-title { display: block; font-weight: 700; margin-bottom: 10px; margin-left: -30px; }
.mock-chart svg { width: 100%; height: 96px; }
.mock-axis {
  position: absolute; left: 12px; top: 42px; height: 96px; display: flex; flex-direction: column; justify-content: space-between;
  font-size: 9px; color: var(--slate);
}
/* The axis and the tick labels were slate-2 on white, 2.6:1. The drawing is
   hidden from assistive technology, which does nothing for the person looking
   at it. */
.mock-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9px; color: var(--slate); }

/* On-call */
.oncall-grid { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: 48px; align-items: center; }
/* Closing call to action: the last screen of the page is the first step. */
.closing-grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 48px; align-items: center; }
.closing-art :is(svg, img) { width: min(100%, 260px); height: auto; margin-inline: auto; }
.closing .hero-note a { color: var(--orange-text); }

/* The install command on the home page. The documentation pages get theirs
   from .prose pre; this section is not prose, so the box is written once here
   and the two notes around it stay plainly notes: the preface that installs
   curl is not part of what a person copies. */
.install { margin: 22px 0 18px; max-width: 720px; }
.install figcaption { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.install pre {
  margin: 0;
  overflow-x: auto;
  background: var(--navy);
  color: var(--text-on-dark);
  border-radius: 12px;
  padding: 13px 16px;
  box-shadow: var(--shadow);
}
.install pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  white-space: pre;
}
.install-note { font-size: 13.5px; color: var(--slate); margin: 10px 0 8px; }
/* The caption that says where the token in the command comes from. It sits
   under the command it explains, not at the end of the block: the line ends in
   a placeholder, and a person who does not read to the bottom pastes it. */
.install-token { margin-top: 9px; }
.install-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  overflow-wrap: anywhere;
  background: var(--off-white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
}
.oncall-art :is(svg, img) { width: min(100%, 300px); height: auto; margin-inline: auto; }
.oncall-grid .btn { margin-top: 28px; }

/* Footer: the brand and its four values, three short columns, one bottom line. */
.site-footer { border-top: 1px solid var(--line); background: var(--white); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.footer-tagline { margin: 16px 0 0; max-width: 36ch; font-size: 14px; line-height: 1.6; color: var(--slate); }
.values {
  list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy);
}
.values li { display: inline-flex; align-items: center; gap: 10px; }
.values svg { width: 16px; height: 16px; color: var(--orange); }
.footer-col { display: grid; gap: 6px; align-content: start; }
.footer-heading { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
/* A tap target, not a line of text: 24px on any screen, 44px on the phone. */
.footer-col a { display: inline-flex; align-items: center; min-height: 24px; font-size: 14px; color: var(--slate); text-decoration: none; }
.footer-col a:hover { color: var(--navy); text-decoration: underline; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px;
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--slate);
}
.footer-bottom a { color: var(--slate); }
.footer-domain { margin-left: auto; letter-spacing: 0.1em; text-transform: uppercase; }
/* Who the company is. From the contact page's own strings, so the name and the
   address exist once on this site. */
.footer-company { margin: 0; }
/* And who takes the money. Paddle's terms ask for the merchant-of-record line
   wherever prices are sold; it sits in the legal row rather than under the
   price cards, where it was the second thing a visitor read. */
.footer-merchant { margin: 0; }
.footer-merchant a { color: var(--orange-text); }

/* No grid child sets the width of the page. Every one of these tracks holds
   something whose minimum content width is bigger than a phone -- an install
   command, a table, a code block -- and a grid child's default minimum is
   auto, which is that width. This is the one line that keeps the document
   390px wide on a 390px screen. */
.hero-grid > *, .band-grid > *, .oncall-grid > *, .closing-grid > *, .page-grid > * { min-width: 0; }
.prose, .install { min-width: 0; }

/* Responsive */
@media (max-width: 1024px) {
  .band-grid { grid-template-columns: 1fr; gap: 40px; }
  .band-mascot { display: none; }
}

@media (max-width: 860px) {
  .site-nav { display: none; }
  .nav-menu { display: block; }
  .hero { padding-top: 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hero-art { order: -1; }
  .hero-art :is(svg, img) { width: min(70vw, 300px); }
  .cards-3 { grid-template-columns: 1fr; }
  .oncall-grid { grid-template-columns: 1fr; gap: 24px; }
  .closing-grid { grid-template-columns: 1fr; gap: 24px; }
  .closing-art { display: none; }
  .section { padding: 64px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-domain { margin-left: 0; }
}

@media (max-width: 600px) {
  .container { width: min(1160px, 100% - 32px); }
  /* Both doors stay on the smallest screen: signing in and starting free
     are the two reasons anybody opens this site on a phone. */
  .nav-row { gap: 12px; }
  .nav-actions { gap: 4px; }
  .nav-actions .btn { padding: 8px 12px; font-size: 14px; }
  /* The name stays on the phone. Hiding the wordmark left a header that only
     somebody who already knew the mark could read; what gives way instead is
     "Sign in", which the menu carries, and the mascot, which gets smaller. */
  .site-header .brand { flex: none; }
  .site-header .wordmark { font-size: 19px; }
  .site-header .brand-mark :is(svg, img) { width: 26px; height: 26px; }
  .site-header .nav-signin { display: none; }
  body { font-size: 16px; }
  .lede { font-size: 18px; }
  .mock { grid-template-columns: 1fr; }
  .mock-side { display: flex; align-items: center; gap: 10px; padding: 10px 12px; overflow: hidden; }
  .mock-brand { padding: 0; flex: none; }
  .mock-nav { display: flex; gap: 0; flex: 1; min-width: 0; overflow: hidden; }
  .mock-nav li { padding: 6px 8px; white-space: nowrap; }
  .mock-nav li:nth-child(n + 4) { display: none; }
  .mock-kpis { grid-template-columns: 1fr 1fr; }
  .cta-row .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* Legal and support pages: privacy, terms, support, contact */
.page { padding: 56px 0 88px; background: var(--off-white); }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.prose { max-width: 72ch; }
.prose h1 { font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 8px 0 12px; }
.prose h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 44px 0 12px; scroll-margin-top: 88px; }
.prose h3 { font-size: 17px; font-weight: 700; margin: 24px 0 6px; }
.prose p, .prose li { color: var(--slate); font-size: 16px; line-height: 1.65; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 16px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--navy); font-weight: 600; }
.prose a { color: var(--orange-text); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--navy); }
.prose .lede { margin-top: 0; max-width: none; }
/* An inline <code> is a word as far as the browser is concerned, and a URL
   written as one is a word wider than a phone: /docs/ai/ was 398px inside 390
   because of a single one. It breaks where it must; a block that has to be
   copied verbatim is a <pre>, and that one scrolls instead. */
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--navy); overflow-wrap: anywhere; }
.page-meta { font-size: 14px; color: var(--slate); margin: 0 0 20px; }
/* The contact form: the one interactive thing on the site (contact.js). */
.contact-form { margin: 0 0 20px; max-width: 34rem; }
.contact-form .field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.contact-form label { color: var(--navy); font-size: 14px; font-weight: 600; }
.contact-form input, .contact-form textarea, .contact-form select {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  width: 100%;
}
.contact-form textarea { resize: vertical; min-height: 140px; }
/* The select keeps the same box as the inputs; the arrow is the browser's, so
   nothing here needs an image or a script to draw one. */
.contact-form select { appearance: auto; cursor: pointer; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible, .contact-form select:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-color: var(--orange);
}
.contact-form .form-actions { margin: 0; }
.contact-form button[disabled] { opacity: 0.65; cursor: progress; transform: none; }

/* The honeypot. Off the screen rather than display:none, which the scripts
   that fill every field are known to skip, and out of the tab order. */
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin: 12px 0 0; font-size: 15px; line-height: 1.5; min-height: 1.5em; color: var(--slate); }
.form-status.is-ok { color: var(--green-text); font-weight: 600; }
.form-status.is-error { color: #b91c1c; }

.toc { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin: 24px 0 8px; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.toc li { font-size: 14px; margin-bottom: 4px; break-inside: avoid; }
.toc a { color: var(--navy); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* The changelog's contents list is one entry per day, a handful of long lines:
   two columns would break each of them in half. Every other page's contents is
   a dozen short section names, which is what .toc's columns are for. */
.toc-dates ol { columns: 1; }
.changelog-entry { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 8px; }
.changelog-entry:first-of-type { border-top: 0; margin-top: 28px; }
.changelog-entry h2 { margin-top: 24px; }

.table-wrap { overflow-x: auto; margin: 4px 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--slate); line-height: 1.5; }
.prose th { color: var(--navy); font-weight: 700; background: var(--off-white); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.prose tr:last-child td { border-bottom: 0; }
.prose td strong { white-space: nowrap; }

/* Documentation snippets: /docs/api/ and /docs/ai/. What a person copies is
   text, never markup, so it lives in <pre><code> and scrolls inside its own
   box on a phone. There is no copy button because this site has one script
   (the contact form) and the edge's CSP is script-src 'self'; a selectable
   block is enough and keeps that true. */
.snippet { margin: 0 0 22px; }
.snippet figcaption { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.prose pre {
  margin: 0;
  overflow-x: auto;
  background: var(--navy);
  color: var(--text-on-dark);
  border-radius: 12px;
  padding: 15px 18px;
  box-shadow: var(--shadow);
}
.prose pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.65;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
  white-space: pre;
}

.contact-line { font-size: 22px; font-weight: 700; }
.contact-line a { text-decoration: none; }
.contact-block { font-style: normal; line-height: 1.7; color: var(--slate); margin: 0 0 14px; }
.contact-block strong { color: var(--navy); }

.page-aside { position: sticky; top: 88px; display: grid; gap: 16px; }
.aside-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); text-align: center; }
.aside-art :is(svg, img) { width: 120px; height: 120px; margin-inline: auto; }
.aside-card h3 { font-size: 18px; font-weight: 700; margin: 8px 0 6px; }
.aside-card p { color: var(--slate); font-size: 15px; margin: 0 0 16px; }
.aside-card .btn { width: 100%; justify-content: center; }
.aside-links { list-style: none; margin: 0; padding: 0 8px; display: grid; gap: 8px; font-size: 14px; }
.aside-links a { color: var(--slate); text-decoration: none; }
.aside-links a:hover { color: var(--navy); text-decoration: underline; }

/* The guide index: eight cards a person picks from, plus the two developer
   pages. A card is one link, so the whole rectangle is the target and not just
   the underlined words -- which is why .prose is in the selector: the prose
   rule underlines every link inside it, and here the title carries the weight
   instead. */
.guide-list { list-style: none; margin: 24px 0 8px; padding: 0; display: grid; gap: 12px; }
.prose .guide-list a {
  display: block; padding: 16px 18px; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
}
.prose .guide-list a:hover { border-color: var(--orange); box-shadow: var(--shadow); }
.guide-list strong { display: block; margin-bottom: 3px; color: var(--navy); font-size: 16px; font-weight: 700; }
.guide-list span { display: block; color: var(--slate); font-size: 14.5px; line-height: 1.55; }
.guide-group { margin: 34px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
/* /features/: the two lines that have no guide behind them yet are cards that
   are not links. Without this they would be bare text between cards and read
   as a rendering fault rather than as a feature nobody has written up. */
.guide-list .no-guide {
  display: block; padding: 16px 18px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
}

/* The one thing people get wrong: the section every guide ends on, marked so a
   person skimming the page finds it without reading the rest. */
.pitfall {
  margin: 4px 0 16px; padding: 16px 18px; border-radius: 12px;
  background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--orange);
}
.prose .pitfall p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .page { padding-top: 32px; }
  /* minmax(0, 1fr), not 1fr: a <pre> is as wide as its longest line, and a
     plain 1fr track grows to fit it, which is how a 390px phone ended up
     scrolling a 743px document sideways. The code block scrolls in its own
     box instead. */
  .page-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .page-aside { position: static; }
  .toc ol { columns: 1; }
}

/* Pricing: the period toggle is two radios and a sibling selector, so the site
   keeps its single script. .p-monthly / .p-annual are the two halves of every
   price, note and extra-server line; one of them is always hidden. */
.pricing-switch { margin-top: 36px; }
.pricing-switch .bp { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Centred over the three cards; the cards below keep their own alignment. */
.period-toggle {
  display: flex; width: max-content; gap: 4px; padding: 4px; margin: 0 auto 32px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--off-white);
}
.section-alt .period-toggle { background: var(--white); }
.period-toggle label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--slate); white-space: nowrap;
}
.period-toggle label:hover { color: var(--navy); }
.period-save {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; background: var(--yellow); color: var(--navy);
}
#bp-monthly:checked ~ .period-toggle label[for='bp-monthly'],
#bp-annual:checked ~ .period-toggle label[for='bp-annual'] {
  background: var(--navy); color: var(--white); box-shadow: var(--shadow);
}
.bp:focus-visible ~ .period-toggle { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 999px; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow);
}
.section-alt .plan { background: var(--off-white); }
.plan.is-featured { border: 2px solid var(--orange); box-shadow: var(--shadow-lg); }
.plan-name {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy);
}
.plan-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: none;
  padding: 3px 9px; border-radius: 999px; background: var(--orange); color: var(--navy);
}
.plan-headline { margin-top: 12px; font-size: 21px; font-weight: 800; line-height: 1.25; }
.plan-body { margin-top: 10px; color: var(--slate); font-size: 15px; }
.plan-price { margin-top: 22px; }
.plan-amount { font-size: 42px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.plan-per { font-size: 15px; font-weight: 600; color: var(--slate); }
.plan-note { margin-top: 8px; min-height: 2.6em; font-size: 13px; color: var(--slate); }
.p-annual { display: none; }
#bp-annual:checked ~ .plans .p-annual { display: inline; }
#bp-annual:checked ~ .plans .p-monthly { display: none; }

.plan-limits { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; flex: 1; }
.plan-limits li { position: relative; padding-left: 26px; font-size: 15px; color: var(--slate); }
.plan-limits li::before {
  content: ''; position: absolute; left: 0; top: 0.45em;
  width: 13px; height: 7px; border-left: 2.5px solid var(--green-text); border-bottom: 2.5px solid var(--green-text);
  transform: rotate(-45deg);
}
.plan-extra {
  margin: 20px 0 22px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--navy);
}
.plan-extra-none { font-weight: 500; color: var(--slate); }
/* The trial, on the card of the plan it is of. It sits under the price and
   above the button, because it is the reason to press the button. */
.plan-trial {
  margin: -8px 0 18px; padding: 10px 12px; border-radius: 10px;
  background: rgb(255 201 77 / 0.22); border: 1px solid rgb(255 201 77 / 0.7);
  font-size: 14px; font-weight: 600; color: var(--navy);
}
.plan .btn { justify-content: center; }

.plans-more { margin-top: 20px; }
.pricing-page h1.display { margin-top: 0; }
.pricing-page + .section-alt .page-grid { align-items: start; }

/* Side by side, the three prices have to sit on one line: the headline and the
   blurb above them are reserved two and three lines. Stacked, they are not. */
@media (min-width: 861px) {
  .plan-headline { min-height: 2.5em; }
  .plan-body { min-height: 4.5em; }
}

@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; }
  .plan.is-featured { order: -1; }
  .plan-note { min-height: 0; }
  .period-toggle { width: auto; }
  .period-toggle label { flex: 1; justify-content: center; padding: 9px 12px; }
}

/* ------------------------------------------------------------ tap targets
   A link is something a thumb has to hit, not only something an eye reads.
   The links in the footer, in the sidebars, in the tables of contents and the
   calls to action that live inside a sentence were 16 to 22px tall.
   Two techniques, on purpose: a list link becomes an inline-flex box with a
   minimum height, and a link inside a paragraph grows by padding instead, so
   it can still wrap across two lines the way running text has to.
   This block is last in the file because it has to win: every rule it
   overrides is written above it. */
.footer-brand .brand,
.footer-bottom a,
.aside-links a,
.card p a[href^='https://app.hopmango.com'],
.hero-note a[href^='https://app.hopmango.com'],
.footer-merchant a {
  display: inline-flex; align-items: center; min-height: 24px;
}
.prose p a, .prose li a { padding-block: 2px; }
.toc a { display: inline-block; padding-block: 4px; }

@media (max-width: 600px) {
  .footer-col a,
  .footer-bottom a,
  .aside-links a,
  .card p a[href^='https://app.hopmango.com'],
  .hero-note a[href^='https://app.hopmango.com'],
  .footer-merchant a { min-height: 44px; }
  .toc a { padding-block: 13px; }
  /* In running text only the links that ask for an action grow to 44px: the
     cross-references between the legal pages stay at 24, because a page of
     prose where every link is 44px tall is a page of overlapping targets. */
  .prose p a[href^='https://app.hopmango.com'],
  .prose p a[href^='https://api.hopmango.com'],
  .prose p a[href^='mailto:'],
  .prose p a[href$='/refunds/'] { padding-block: 12px; }
}

/* Soft studio lighting echoes the brand board without baking a background into the art. */
.mango-art { object-fit: contain; }
.hero-art { position: relative; isolation: isolate; padding: 30px 0; }
.hero-art::before { content: ''; position: absolute; inset: 8% -2%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, #fff0c9 0%, #fff6e2 40%, transparent 70%); }
.hero-art::after { content: ''; position: absolute; bottom: 3%; left: 25%; right: 25%; height: 16px; border-radius: 50%; background: #0f172a; opacity: .10; filter: blur(8px); }
.hero-art .mango-art { width: min(100%, 480px); }
.mood-art { display: flex; justify-content: center; padding: 8px 0 16px; }
.mood-art .mango-art { width: 168px; height: 168px; }
.moods .card { background: linear-gradient(155deg, #fff, #fffaf0); }
.band-mascot .mango-art { filter: drop-shadow(0 0 16px rgb(255 201 77 / .12)); }
@media (max-width: 860px) {
  .hero-art { order: 0; padding: 12px 0 24px; }
  .hero-art .mango-art { width: min(64vw, 260px); }
}

/* Product-led home page. */
.home-hero{padding:80px 0;background:#f8fafc;border-bottom:1px solid var(--line)}
.home-hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.eyebrow{font-size:13px;font-weight:650;color:#b84e08;margin:0 0 18px}
.home-hero h1{font-size:clamp(40px,4.1vw,60px);line-height:1.08;letter-spacing:-.045em;font-weight:800;text-wrap:balance}
.home-lede{font-size:18px;line-height:1.65;color:var(--slate);margin-top:24px;max-width:47ch}
.home-hero .cta-row{align-items:center;gap:20px;margin-top:28px}
.text-link{color:var(--navy);font-weight:650;text-underline-offset:5px}
.text-link:hover{color:#b84e08}.text-link span{margin-left:5px}
.home-free{margin-top:24px;color:var(--navy);font-size:13px;font-weight:600;line-height:1.7}
.home-no-card{margin-top:7px;color:var(--slate);font-size:13px}
.product-preview{margin:24px 0 0;min-width:0;border:1px solid #d4dce6;border-radius:12px;background:#fff;box-shadow:0 18px 48px -26px #0f172a55}
.preview-heading{position:relative;padding:18px 100px 18px 22px;border-bottom:1px solid var(--line);font-size:13px;font-weight:650}
.preview-dot{display:inline-block;width:8px;height:8px;background:#1f7a3a;border-radius:50%;margin-right:6px}
.preview-mascot{position:absolute;width:92px;height:92px;right:12px;bottom:3px}.preview-mascot img{width:100%;height:100%}
.product-preview>img{display:block;width:100%;height:auto;border-radius:0 0 12px 12px}
.home-section{padding:76px 0}.section-heading{max-width:720px;margin-bottom:38px}
.section-heading h2,.home-closing h2{font-size:clamp(30px,3.1vw,42px);font-weight:750;line-height:1.16;letter-spacing:-.035em;text-wrap:balance}
.section-heading>p:not(.eyebrow){margin-top:18px;color:var(--slate);line-height:1.7;max-width:65ch}
.section-heading>.text-link{display:inline-block;margin-top:24px}
.monitor-list{display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.monitor-list article{display:flex;gap:20px;border-top:1px solid var(--line);padding:30px 0}
.monitor-number{font-size:13px;color:var(--slate);padding-top:5px}
.monitor-list h3,.difference-list h3,.workflow h3{font-size:20px;font-weight:700;letter-spacing:-.015em}
.monitor-list article p,.difference-list p{color:var(--slate);margin-top:12px;line-height:1.7}
.monitor-list article .monitor-example{font-size:13px;color:var(--navy)}
.workflow{background:var(--navy);color:#f8fafc}.workflow .eyebrow{color:#ffc94d}
.workflow-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;list-style:none;padding:0;margin:0}
.workflow-steps li>span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #64748b;border-radius:50%;font-size:14px;color:#ffc94d;margin-bottom:24px}
.workflow-steps p{margin-top:14px;color:#cbd5e1;line-height:1.7}
/* The install line lives inside the navy band, under the three steps it is
   step one of. Same figure as the documentation pages, on a dark ground: the
   command keeps its box, the two notes stay notes, and neither turns into the
   other. */
.workflow .install{margin:44px 0 0}
.workflow .install figcaption{color:#fff}
.workflow .install-note{color:#cbd5e1}
.workflow .install pre{background:#0b1222;border:1px solid #334155;box-shadow:none}
.workflow .install-note code{background:rgba(248,250,252,.08);border-color:#475569;color:#f8fafc}
.workflow .install-note a{color:#ffc94d}
.difference-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.difference-grid .section-heading{margin-bottom:0}
.difference-list article{padding:0 0 26px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.difference-list article:last-child{margin-bottom:0;border:0;padding-bottom:0}
.oncall-section{background:#f3f5f7}.oncall-layout{display:grid;grid-template-columns:240px 1fr;gap:72px;align-items:center}
.oncall-illustration img{width:240px;height:240px}.oncall-layout .section-heading{margin-bottom:0}
.section-heading>.availability,.availability{font-size:13px;line-height:1.6;color:var(--slate)}
.pricing-availability{margin:-12px 0 24px;padding-left:12px;border-left:2px solid #ff9f1c}
.home-section.pricing .plan{box-shadow:none}.home-section.pricing .plan-headline{font-size:20px}
.home-section.pricing .plan-name{letter-spacing:.02em;text-transform:none}
.faq-section{border-top:1px solid var(--line)}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.faq-list details{border-bottom:1px solid var(--line)}.faq-list details:first-child{border-top:1px solid var(--line)}
.faq-list summary{cursor:pointer;position:relative;list-style:none;padding:22px 32px 22px 0;font-size:17px;font-weight:650;line-height:1.4}
.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:'+';position:absolute;right:0;top:22px;font-size:22px;font-weight:400}
.faq-list details[open]>summary::after{content:'−'}.faq-list summary:focus-visible{outline:2px solid #ff9f1c;outline-offset:4px}
.faq-list details>p{padding:0 24px 24px 0;color:var(--slate);line-height:1.75}
.home-closing{text-align:center;background:#fff5df}.home-closing p{margin:20px auto 26px;max-width:58ch;color:var(--slate);line-height:1.6}
.home-closing .home-no-card{margin:14px auto 0}
.closing-mascot{display:flex;justify-content:center;margin-bottom:8px}.closing-mascot img{width:150px;height:150px}
@media(max-width:1050px){.home-hero-grid{grid-template-columns:1fr;gap:42px}.home-hero-copy{max-width:720px}.home-hero h1{font-size:clamp(40px,6vw,60px)}.home-lede{max-width:62ch}.product-preview{max-width:850px;width:100%}.difference-grid,.faq-layout{gap:48px}}
@media(max-width:680px){.home-hero{padding:42px 0 48px}.home-hero h1{font-size:40px}.home-hero h1 br{display:none}.home-lede{font-size:17px}.home-hero .cta-row{align-items:flex-start;gap:18px}.home-hero .btn{width:100%}.home-section{padding:54px 0}.monitor-list,.workflow-steps,.difference-grid,.faq-layout{grid-template-columns:1fr;gap:0}.monitor-list article{padding:24px 0;gap:16px}.workflow-steps{gap:32px}.workflow-steps li{position:relative;padding-left:48px}.workflow-steps li>span{position:absolute;left:0;top:0;margin:0}.difference-grid .section-heading{margin-bottom:36px}.oncall-layout{grid-template-columns:1fr;gap:20px}.oncall-illustration img{width:136px;height:136px}.preview-mascot{width:72px;height:72px}.preview-heading{font-size:12px;padding-left:14px;padding-right:82px}.product-preview figcaption{font-size:11px}.home-free{max-width:32ch}}