/*
 * Locked stylesheet. The agent may not edit this file.
 *
 * Palette and typography are inherited from a design that has been
 * validated with real users: deep navy ground, brass accent, an old-style
 * serif for editorial headlines, a neutral grotesque for everything else.
 *
 * Both faces are self-hosted as latin-subset WOFF2 data URIs in fonts.css.
 * Fetching them from Google Fonts used to leak the reader to a third party
 * and made appearance depend on the network. The data URIs travel with the
 * site, including inside a Cloudflare text Worker embed.
 */

:root {
  --nd-bg: #0a0f1e;
  --nd-bg-raised: #0d1425;
  --nd-border: rgba(255, 255, 255, 0.06);
  --nd-border-bright: rgba(255, 255, 255, 0.12);
  --nd-rule: rgba(255, 255, 255, 0.08);
  --nd-rule-strong: rgba(214, 177, 90, 0.35);

  --nd-brass: #d6b15a;
  --nd-brass-deep: #a07f33;
  --nd-brass-soft: rgba(214, 177, 90, 0.18);
  --nd-brass-glow: rgba(214, 177, 90, 0.45);

  --nd-text: #f3efe5;
  --nd-text-secondary: #9da4ae;
  /* Raised for contrast. The previous value sat near 3.2:1 against this
     background, failing WCAG AA while being used for footer and pricing detail
     at 13px. This is roughly 4.9:1 and still clearly quieter than body text.
     Deliberately no old hex here: a colour literal in a comment reads as a live
     declaration to anything grepping the stylesheet. */
  --nd-text-muted: #7c8698;

  /* Self-hosted in fonts.css. System stacks remain if a browser cannot
     decode the data URI. Fraunces used to be loaded from Google Fonts. */
  --nd-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, serif;
  --nd-sans: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-md: 10px;
  --radius-lg: 16px;
  --shell: 1080px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--nd-bg);
  color: var(--nd-text);
  font-family: var(--nd-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--nd-brass);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--nd-brass);
  outline-offset: 3px;
}

/* The main landmark is focusable so the skip link can move focus into it, but
   it is not interactive, so it must not draw a ring when clicked. */
main:focus-visible {
  outline: none;
}

/* ---------------------------------------------------------- skip link */

/* Off-screen rather than display:none, because a hidden element is not
   focusable and a skip link that cannot be focused is decoration. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
  background: var(--nd-brass);
  color: #0a0f1e;
  font-weight: 600;
}

.skip:focus {
  left: 0;
  text-decoration: none;
}

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

/* ---------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--nd-border);
  background: rgba(10, 15, 30, 0.85);
  backdrop-filter: blur(12px);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Was a fixed `height`, which broke the page on a narrow screen. Product
     names here are full document titles, so the brand wrapped to four lines,
     overflowed the fixed box, and -- because the bar is sticky and sits above
     everything -- painted itself on top of the first heading of the page. A
     minimum lets the bar grow instead of spilling. */
  min-height: 68px;
  padding: 10px 0;
}

.nav__brand {
  font-family: var(--nd-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--nd-text);
  letter-spacing: -0.01em;
  /* One line, shortened if it does not fit. The nav is a way back to the top of
     the page, not the place to print the whole title; the h1 immediately below
     it already carries the full name. `min-width: 0` is what actually permits
     the ellipsis, because a flex item will not shrink below its content
     otherwise. */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  /* Never give up horizontal space to the brand: these are the only navigation
     on the page, and "How it works" broken into three stacked words reads as a
     rendering fault. */
  flex-shrink: 0;
}

.nav__links a {
  white-space: nowrap;
}

.nav__links a {
  color: var(--nd-text-secondary);
}

.nav__links a:hover {
  color: var(--nd-text);
  text-decoration: none;
}

/* The markup has carried this class since the template was written and the
   stylesheet never defined it, so the one link meant to sell sat in the same
   grey as "How it works". Giving it a border rather than the full brass fill of
   the hero button keeps a single primary action per screen: the page's own buy
   button should still be the loudest thing on it. */
.nav__links .nav__cta {
  padding: 7px 15px;
  border: 1px solid var(--nd-brass);
  border-radius: var(--radius-md);
  color: var(--nd-brass);
  font-weight: 600;
}

.nav__links .nav__cta:hover {
  background: var(--nd-brass-soft);
  color: var(--nd-text);
}

/* Not inside :hover, because a keyboard visitor tabbing to the button gets no
   hover and would otherwise see no acknowledgement beyond the focus ring. */
.nav__links .nav__cta:focus-visible {
  background: var(--nd-brass-soft);
}

/* -------------------------------------------------------------- shared */

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nd-brass);
  margin-bottom: 18px;
}

.section {
  padding: 88px 0;
  border-top: 1px solid var(--nd-rule);
}

.section--flush {
  border-top: none;
}

h1,
h2,
h3 {
  font-family: var(--nd-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 18px;
}

h1 {
  font-size: clamp(38px, 6vw, 62px);
}

h2 {
  font-size: clamp(28px, 4vw, 38px);
}

h3 {
  font-size: 19px;
}

p {
  margin: 0 0 16px;
  color: var(--nd-text-secondary);
}

.lede {
  font-size: 19px;
  max-width: 62ch;
}

/* -------------------------------------------------------------- hero */

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

.hero::after {
  content: "";
  position: absolute;
  inset: -40% 20% auto -10%;
  height: 420px;
  background: radial-gradient(
    ellipse at center,
    var(--nd-brass-soft) 0%,
    transparent 68%
  );
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

/* Constrain the text, not the shell, so the hero's left edge lines up with
   every section below it. */
.hero__inner h1,
.hero__inner .lede {
  max-width: 760px;
}

/* -------------------------------------------------------------- button */

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn--primary {
  background: linear-gradient(180deg, var(--nd-brass), var(--nd-brass-deep));
  color: #1a1306;
  box-shadow: 0 0 22px var(--nd-brass-glow);
}

.btn--ghost {
  border-color: var(--nd-border-bright);
  color: var(--nd-text);
  background: rgba(255, 255, 255, 0.02);
}

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

/* -------------------------------------------------------------- cards */

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 40px;
}

.card {
  padding: 26px;
  border: 1px solid var(--nd-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.015);
}

.card__index {
  font-family: var(--nd-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--nd-brass);
  margin-bottom: 12px;
}

.card p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------ contents */

/*
 * The document's real table of contents, which replaced a three-up grid of
 * boxes each holding a number and a three-word phrase.
 *
 * A list rather than a grid, and that is the substantive part rather than a
 * preference. These sections are meant to be worked through in order, so a row
 * per section shows the sequence; three equal columns imply three
 * interchangeable things and flatten a first step and a last step into the same
 * shape. It also stops caring how many sections there are, where the grid
 * silently assumed exactly three.
 */
.contents {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: contents;
  max-width: 46rem;
}

.contents__item {
  position: relative;
  padding: 0 0 22px 3.25rem;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--nd-border);
}

.contents__item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Numbered by CSS so the markup stays an ordered list and the number is never
   read aloud as content. The old markup put "01" in a div, which a screen
   reader announced as part of the heading. */
.contents__item::before {
  counter-increment: contents;
  content: counter(contents, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--nd-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--nd-brass);
}

.contents--plain {
  counter-reset: none;
}

.contents--plain .contents__item::before {
  content: none;
}

.contents--plain .contents__item {
  padding-left: 0;
}

.contents__heading {
  margin: 0 0 6px;
  font-family: var(--nd-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--nd-text);
}

.contents__summary {
  margin: 0;
  line-height: 1.7;
  color: var(--nd-text-secondary);
}

.contents__steps {
  margin: 8px 0 0;
  font-family: var(--nd-sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nd-text-muted);
}

.contents--dense .contents__item {
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.contents__ticks {
  margin: 8px 0 0;
  padding-left: 1.15rem;
  color: var(--nd-text-secondary);
}

.contents__ticks li {
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 1.45;
}

.specimen {
  margin-top: 36px;
  padding: 24px 0 0;
  border-top: 1px solid var(--nd-rule);
  max-width: 46rem;
}

.specimen__heading {
  margin: 0 0 8px;
  font-family: var(--nd-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--nd-text);
}

.specimen__lede,
.specimen__rest {
  margin: 0;
  line-height: 1.7;
  color: var(--nd-text-secondary);
}

.specimen__list {
  margin: 16px 0;
  padding-left: 1.25rem;
  color: var(--nd-text);
}

.specimen__list li + li {
  margin-top: 8px;
}

.specimen__rest {
  font-size: 14px;
}

@media (max-width: 540px) {
  /* The hanging number costs more than it earns on a narrow screen, where it
     would take a third of the line the heading needs. */
  .contents__item {
    padding-left: 0;
  }

  .contents__item::before {
    position: static;
    display: block;
    margin-bottom: 4px;
  }
}

/* -------------------------------------------------------------- pricing */

.price-card {
  max-width: 420px;
  margin-top: 40px;
  padding: 34px;
  border: 1px solid var(--nd-rule-strong);
  border-radius: var(--radius-lg);
  background: rgba(214, 177, 90, 0.04);
}

.price-card__amount {
  font-family: var(--nd-serif);
  font-size: 52px;
  font-weight: 600;
  color: var(--nd-text);
  line-height: 1;
}

.price-card__period {
  font-size: 14px;
  color: var(--nd-text-muted);
  margin-left: 6px;
}

.price-card ul {
  list-style: none;
  padding: 0;
  margin: 24px 0 28px;
}

.price-card li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 11px;
  color: var(--nd-text-secondary);
  font-size: 15px;
}

.price-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nd-brass);
  box-shadow: 0 0 8px var(--nd-brass-glow);
}

/* -------------------------------------------------------------- faq */

.faq {
  margin-top: 36px;
  border-top: 1px solid var(--nd-rule);
}

.faq__item {
  padding: 22px 0;
  border-bottom: 1px solid var(--nd-rule);
}

/* An h3 since the questions became real headings, so the browser's own
   heading margins and weight have to be overridden rather than inherited. */
.faq__q {
  font-family: var(--nd-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--nd-text);
  margin: 0 0 8px;
}

.faq__a {
  margin: 0;
}

/* -------------------------------------------------------------- legal */

.prose {
  max-width: 68ch;
  padding: 72px 0;
}

.prose h2 {
  margin-top: 40px;
  font-size: 22px;
}

/* -------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--nd-rule);
  padding: 40px 0 56px;
  font-size: 13px;
  color: var(--nd-text-muted);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
}

.footer a {
  color: var(--nd-text-muted);
}

.footer a:hover {
  color: var(--nd-text-secondary);
}

@media (max-width: 640px) {
  .section {
    padding: 60px 0;
  }

  .hero {
    padding: 72px 0 64px;
  }

  .nav__links {
    gap: 16px;
    font-size: 13px;
  }

  /* Capped so the brand yields the room the links need rather than pushing the
     buy button off the bar. It shortens to an ellipsis; the full name is the
     h1 directly beneath it either way. */
  .nav__brand {
    font-size: 17px;
    max-width: 12rem;
  }
}

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

  .btn {
    transition: none;
  }
}