/*
 * The landing page, and only the landing page.
 *
 * Loaded by `/` alone, so nothing here can reach the app, and every rule is
 * scoped under `.landing` so nothing in globals.css can reach in. Every colour
 * is a token from globals.css: the bands this page uses — sage, the two dark
 * grounds, the text ramps that sit on them — are declared there with the rest,
 * because DESIGN.md's rule is that colours live in one place, and an exception
 * that moves them somewhere else is not an exception, it is a second palette.
 *
 * The design is archive_build/quillion-landing-reference.html. That file is a
 * canvas export built from inline styles; this is the same design expressed the
 * way the repo writes CSS.
 *
 * The app is desktop-only by design (DESIGN.md: minimum 1280px, degrade
 * gracefully). This page is not: it is the one screen a stranger opens on a
 * phone, so it collapses properly rather than scrolling sideways.
 */

.landing {
  --wrap: 1200px;
  --gutter: 40px;
  --band: 96px;
  --col-gap: 32px;

  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.landing-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
  width: 100%;
}

/* Anchored sections must not land under the top of the window. */
.landing [id] {
  scroll-margin-top: 24px;
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.landing) {
    scroll-behavior: smooth;
  }
}

/* ------------------------------------------------------------ type ------ */

.landing h1,
.landing h2,
.landing h3 {
  font-family: var(--font-display), Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

.landing p {
  margin: 0;
  max-width: none;
  text-wrap: pretty;
}

.landing-h1 {
  font-size: 76px;
  line-height: 1.02;
}

/* The second sentence, in the brand green. The reference sets it in italic:
   a display serif's italic is a different cut, not a slant, and it is the one
   piece of emphasis on the page. */
.landing-h1 em {
  font-style: italic;
  color: var(--brand);
}

.landing-section > .landing-wrap > .landing-section-head > h2,
.landing-section h2 {
  font-size: 52px;
  line-height: 1.08;
}

.landing-standfirst {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 600px;
}

.landing-lede {
  font-size: 19px;
  color: var(--ink-soft);
}

/* Mono, small, letter-spaced. The one place this page raises its voice —
   DESIGN.md forbids it in the app and allows it here, and nowhere else. */
.landing-eyebrow {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.landing-eyebrow.on-deep {
  color: var(--on-deep-4);
}

.landing-eyebrow.on-sage {
  color: var(--accent-ink);
}

.brand-band .landing-eyebrow,
.accent-band .landing-eyebrow {
  color: var(--on-deep-accent);
}

.accent-band .landing-eyebrow {
  color: var(--on-accent);
}

/* ---------------------------------------------------------- controls ---- */

.landing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 44px;
  padding: 14px 24px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  transition: background var(--motion) ease;
}

.landing-button:hover {
  text-decoration: none;
}

.landing-button.brand {
  background: var(--brand);
  color: var(--brand-ink);
}

.landing-button.brand:hover {
  background: color-mix(in srgb, var(--brand) 86%, #000);
}

.landing-button.accent {
  background: var(--accent);
  color: var(--brand-ink);
}

.landing-button.accent:hover {
  background: color-mix(in srgb, var(--accent) 88%, #000);
}

/* On a dark band: a cream button, its label in the darkest accent so it still
   reads at 9.3:1. */
.landing-button.light {
  background: var(--surface);
  color: var(--accent-deep);
}

.landing-button.light:hover {
  background: color-mix(in srgb, var(--surface) 90%, #000);
}

.landing-textlink {
  font-weight: 500;
  padding-block: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Focus has to be visible on cream, green, deep and rust alike. An outline in
   the brand colour disappears on the brand band, so dark grounds take the
   inverse. */
.landing a:focus-visible,
.landing button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.brand-band a:focus-visible,
.brand-band button:focus-visible,
.accent-band a:focus-visible,
.accent-band button:focus-visible,
.landing-dates a:focus-visible,
.landing-foot a:focus-visible,
.landing-tier.enquiry a:focus-visible {
  outline-color: var(--surface);
}

/* --------------------------------------------------------- masthead ----- */

.landing-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.landing-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--col-gap);
  padding-block: 20px;
}

.landing-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.landing-lockup:hover {
  text-decoration: none;
}

.landing-lockup-mark {
  display: inline-flex;
  color: var(--brand);
}

.landing-lockup-word {
  font-family: var(--font-display), Georgia, serif;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: var(--col-gap);
  font-size: 15px;
  font-weight: 500;
  flex-wrap: wrap;
}

.landing-nav > a {
  color: var(--brand);
  text-decoration: none;
  padding-block: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.landing-nav > a:hover {
  color: var(--accent);
  text-decoration: none;
}

.landing-nav .landing-button {
  padding: 12px 20px;
  font-size: 15px;
}

.landing-nav .landing-button:hover {
  color: var(--brand-ink);
}

/* The public teaser's stand-in for sign-in (ADR 0031): styled to read as
   inactive, not as a link that happens not to move -- no hover state, a
   muted colour, and a cursor that never suggests it can be clicked. */
.landing-nav-pending {
  color: var(--ink-soft);
  padding-block: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: default;
}

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

.landing-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 48px;
  align-items: start;
  padding-block: 88px 72px;
}

.landing-hero-copy {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.landing-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.landing-price-anchor {
  font-size: 15px;
  color: var(--ink-2);
}

/* The dates panel: the reason anybody is reading. */
.landing-dates {
  grid-column: span 5;
  background: var(--deep);
  color: var(--on-deep);
  border-radius: 6px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.landing-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-timeline li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 18px;
}

.landing-timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landing-timeline-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--on-deep-4);
  margin-top: 7px;
}

.landing-timeline li.emphasis .landing-timeline-dot {
  width: 15px;
  height: 15px;
  border: 0;
  background: var(--on-deep-accent);
  margin-top: 12px;
}

/* The rail between the dots, drawn on every item but the last. */
.landing-timeline li:not(:last-child) .landing-timeline-rail::after {
  content: '';
  width: 1px;
  flex-grow: 1;
  background: var(--on-deep-line);
}

.landing-timeline-body {
  display: block;
  padding-bottom: 28px;
}

.landing-timeline li:last-child .landing-timeline-body {
  padding-bottom: 0;
}

.landing-timeline-when {
  display: block;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 14px;
  color: var(--on-deep-4);
}

.landing-timeline li.emphasis .landing-timeline-when {
  font-family: var(--font-display), Georgia, serif;
  font-size: 40px;
  line-height: 1.1;
  color: var(--brand-ink);
}

.landing-timeline-text {
  display: block;
  margin-top: 4px;
  font-size: 17px;
}

.landing-timeline li.emphasis .landing-timeline-text {
  margin-top: 6px;
  color: var(--on-deep-2);
}

/* ------------------------------------------------------- fact strip ----- */

.landing-facts-band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.landing-facts {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-facts li {
  padding: 26px 24px;
  border-right: 1px solid var(--line);
}

.landing-facts li:first-child {
  padding-left: 0;
}

.landing-facts li:last-child {
  padding-right: 0;
  border-right: 0;
}

.landing-fact-figure {
  display: block;
  font-family: var(--font-display), Georgia, serif;
  font-size: 30px;
  line-height: 1.1;
}

.landing-fact-note {
  display: block;
  font-size: 15px;
  color: var(--ink-2);
  margin-top: 4px;
}

/* --------------------------------------------------------- sections ----- */

.landing-section {
  padding-block: var(--band);
}

.landing-section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}

.landing-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 24px;
  align-items: end;
  margin-bottom: 48px;
}

.landing-split > .landing-section-head {
  grid-column: span 7;
}

.landing-split > .landing-lede {
  grid-column: span 5;
}

/* Markets and design partners: a wider left column and a stack beside it. */
.landing-split.wide {
  align-items: start;
  margin-bottom: 0;
  row-gap: 40px;
}

.landing-split.wide > .landing-section-head {
  grid-column: span 5;
  gap: 16px;
}

.landing-split.wide > .landing-stack {
  grid-column: span 7;
}

/* Partners splits six and five rather than five and seven, with column seven
   left empty. The gap is the point: the headline and the list are two separate
   claims, not a heading and its detail. */
.accent-band .landing-split.wide > .landing-section-head {
  grid-column: span 6;
}

.landing-split.wide > .landing-terms {
  grid-column: 8 / span 5;
}

.landing-note {
  font-size: 15px;
  color: var(--ink-soft);
}

.card-band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.brand-band {
  background: var(--brand);
  color: var(--on-deep);
}

.brand-band h2,
.brand-band h3 {
  color: var(--brand-ink);
}

.brand-band p {
  color: var(--on-deep-2);
}

.sage-band {
  background: var(--sage);
  border-top: 1px solid var(--sage-line);
  border-bottom: 1px solid var(--sage-line);
}

.accent-band {
  background: var(--accent);
  color: var(--brand-ink);
}

.accent-band h2 {
  color: var(--brand-ink);
  font-size: 56px;
  line-height: 1.05;
}

.accent-band .landing-lede {
  color: var(--on-accent-2);
}

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

.landing-grid {
  display: grid;
  gap: 24px;
  align-items: start;
}

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

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

.landing-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.landing-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landing-card.sage {
  border-color: var(--sage-line);
  padding: 26px 28px;
  gap: 8px;
}

.landing-card h3 {
  font-size: 28px;
  line-height: 1.15;
}

.landing-card p {
  color: var(--ink-soft);
}

/* The classification label: the app's vocabulary, set as this page sets
   things. Not the app's badge component — DESIGN.md says that one is never
   restyled locally, and this is a different component that says the same
   words. The colour still comes from the semantic token, so "Material" means
   here exactly what it means on a register. */
.landing-label {
  align-self: flex-start;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 3px;
  padding: 3px 8px;
  color: var(--tone, var(--unassessed));
  border-color: color-mix(in srgb, var(--tone, var(--unassessed)) 62%, transparent);
}

.landing-label.material {
  --tone: var(--material);
}
.landing-label.attention {
  --tone: var(--attention);
}
.landing-label.clear {
  --tone: var(--clear);
}
.landing-label.unassessed {
  --tone: var(--unassessed);
}

/* ---------------------------------------------------------- modules ----- */

.landing-modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}

.landing-modules article {
  padding: 32px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landing-module-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 13px;
  color: var(--ink-2);
}

.landing-modules h3 {
  font-size: 30px;
  line-height: 1.12;
}

.landing-module-body {
  color: var(--ink-soft);
}

/* Pinned to the foot of the cell, so six cells of unequal length still line
   their conclusions up. */
.landing-module-benefit {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--brand);
}

/* --------------------------------------------------------- benefits ----- */

.landing-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  row-gap: 44px;
}

.landing-benefits > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--on-brand-line);
  padding-top: 22px;
}

.landing-benefits h3 {
  font-size: 34px;
  line-height: 1.12;
}

/* ---------------------------------------------------------- journey ----- */

.landing-journey {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 40px;
}

.landing-journey li {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-step-number {
  font-family: var(--font-display), Georgia, serif;
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
}

/* The step titles are the one heading level set in the body face: at 20px a
   display serif reads as a caption rather than a title. */
.landing-journey h3 {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
}

.landing-journey p {
  color: var(--ink-soft);
}

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

.landing-pricing-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--col-gap);
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.landing-pricing-head .landing-section-head {
  max-width: 720px;
}

.landing-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--track);
  border: 1px solid var(--line);
  border-radius: 6px;
  flex-shrink: 0;
}

.landing-toggle button {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: background var(--motion) ease;
}

.landing-toggle button[aria-pressed='true'] {
  background: var(--brand);
  color: var(--brand-ink);
}

.landing-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.landing-tier {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: 6px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.landing-tier.enquiry {
  background: var(--deep);
  color: var(--on-deep);
  border: 0;
}

.landing-tier-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.landing-tier h3 {
  font-size: 36px;
  line-height: 1.1;
}

.landing-tier.enquiry h3 {
  color: var(--brand-ink);
}

.landing-tier-head p {
  color: var(--ink-soft);
}

.landing-tier.enquiry .landing-tier-head p {
  color: var(--on-deep-2);
}

/* Held at a fixed height so the cards do not jump when the toggle changes. */
.landing-price-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 124px;
}

.landing-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.landing-price {
  font-family: var(--font-display), Georgia, serif;
  font-weight: 400;
  font-size: 72px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.landing-price.enquiry {
  font-size: 48px;
  color: var(--brand-ink);
}

.landing-price-unit {
  color: var(--ink-2);
}

.landing-price-note {
  color: var(--ink-2);
}

.landing-price-note.saving {
  font-weight: 600;
  color: var(--brand);
}

.landing-reason {
  font-size: 15px;
  color: var(--on-deep-3);
}

.landing-tier .landing-button {
  margin-top: auto;
  align-self: stretch;
  padding: 14px 20px;
}

.landing-included {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 24px;
  border-top: 1px solid var(--ink);
  padding-top: 28px;
  margin-top: 40px;
}

.landing-included h3 {
  grid-column: span 3;
  font-size: 30px;
  line-height: 1.15;
}

.landing-included ul {
  grid-column: span 9;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.landing-included li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.landing-included-title {
  font-weight: 600;
}

.landing-included-note {
  color: var(--ink-soft);
  font-size: 16px;
}

.landing-footnotes {
  margin-top: 56px;
  font-size: 14px;
  color: var(--ink-2);
  max-width: 900px;
}

/* The toggle, with no script running at all: the page is served showing the
   annual figures and CSS alone keeps the monthly ones out of the way. */
.landing-tiers[data-billing='annual'] [data-price='monthly'],
.landing-tiers[data-billing='monthly'] [data-price='annual'] {
  display: none;
}

/* --------------------------------------------------------- partners ----- */

.landing-terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.landing-terms li {
  padding-block: 18px;
  border-top: 1px solid var(--on-accent-line);
  font-size: 18px;
}

.landing-terms li:last-child {
  border-bottom: 1px solid var(--on-accent-line);
}

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

.landing-foot {
  background: var(--deep);
  color: var(--on-deep-3);
  font-size: 15px;
  margin-top: auto;
}

.landing-foot > .landing-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--col-gap);
  flex-wrap: wrap;
  padding-block: 40px;
}

.landing-foot .attribution {
  color: var(--brand-ink);
}

.landing-foot .legal-footer {
  color: var(--on-deep-3);
  margin: 8px 0 0;
}

.landing-foot a {
  color: var(--brand-ink);
}

.landing-foot-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
}

/* ------------------------------------------------------- narrower ------- */

@media (max-width: 1024px) {
  .landing {
    --band: 80px;
  }

  .landing-h1 {
    font-size: 58px;
  }

  .landing-section h2,
  .accent-band h2 {
    font-size: 42px;
  }

  /* The hero stacks, and the dates panel goes under the copy. */
  .landing-hero-copy,
  .landing-dates,
  .landing-split > .landing-section-head,
  .landing-split > .landing-lede,
  .landing-split.wide > .landing-section-head,
  .accent-band .landing-split.wide > .landing-section-head,
  .landing-split.wide > .landing-stack,
  .landing-split.wide > .landing-terms,
  .landing-included h3,
  .landing-included ul {
    grid-column: 1 / -1;
  }

  .landing-grid.three,
  .landing-modules,
  .landing-journey,
  .landing-included ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-split {
    align-items: start;
  }

  .landing-benefits {
    column-gap: var(--col-gap);
  }

  /* Two by two, and the hairlines have to follow. Four cells in a tablet's
     width stops being a strip and starts being a squeeze. */
  .landing-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-facts li {
    padding: 22px 20px;
    border-bottom: 1px solid var(--line);
  }

  .landing-facts li:nth-child(odd) {
    padding-left: 0;
  }

  .landing-facts li:nth-child(even) {
    padding-right: 0;
    border-right: 0;
  }

  .landing-facts li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  /* The full row is 957px of links against 944px of page. Tightening the gap
     is enough here; below this it is not, and the row collapses instead. */
  .landing-nav {
    gap: 20px;
  }
}

@media (max-width: 900px) {
  /* Logo, Pricing, Sign in and the button. The section anchors go rather than
     wrap: a nav on two rows reads as a mistake, and everything it pointed at
     is still one scroll away. The button is named explicitly because it is an
     anchor too, and the selector would otherwise take it with the rest. */
  .landing-nav > a:not([href='#pricing']):not([href='/sign-in']):not(.landing-button) {
    display: none;
  }
}

@media (max-width: 640px) {
  .landing {
    --gutter: 20px;
    --band: 64px;
  }

  .landing-h1 {
    font-size: 44px;
  }

  .landing-section h2,
  .accent-band h2 {
    font-size: 34px;
  }

  .landing-standfirst {
    font-size: 18px;
  }

  /* No hamburger: a menu nobody can see is worse than a row nobody has to
     open. The three that are left will not sit beside the lockup in 350px, so
     they take a row of their own and spread across it — which reads as a
     decision, where the same items wrapping raggedly reads as a mistake. */
  .landing-masthead {
    flex-wrap: wrap;
    gap: 14px;
    padding-block: 16px;
  }

  .landing-nav {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }

  .landing-nav .landing-button {
    padding: 12px 16px;
  }

  .landing-hero {
    padding-block: 48px;
    row-gap: 36px;
  }

  .landing-facts li {
    padding: 20px 16px;
  }

  .landing-dates {
    padding: 28px 24px;
  }

  .landing-timeline li.emphasis .landing-timeline-when {
    font-size: 32px;
  }

  .landing-grid.three,
  .landing-grid.two,
  .landing-modules,
  .landing-journey,
  .landing-benefits,
  .landing-tiers,
  .landing-included ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-modules {
    border-left: 0;
  }

  .landing-modules article {
    border-right: 0;
    padding: 28px 0;
  }

  .landing-card h3,
  .landing-modules h3 {
    font-size: 24px;
  }

  .landing-benefits h3 {
    font-size: 28px;
  }

  .landing-tier h3 {
    font-size: 30px;
  }

  .landing-price {
    font-size: 56px;
  }

  .landing-price-block {
    min-height: 0;
  }

  .landing-toggle {
    width: 100%;
  }

  .landing-toggle button {
    flex: 1;
    padding: 0 12px;
    font-size: 15px;
  }

  .landing-foot > .landing-wrap {
    flex-direction: column;
  }

  .landing-foot-right {
    text-align: left;
  }
}

/* --------------------------------------------------------------- print -- */

@media print {
  .landing {
    background: #fff;
  }

  .landing-dates,
  .landing-tier.enquiry,
  .brand-band,
  .accent-band,
  .landing-foot {
    background: #fff;
    color: #000;
  }

  .landing-nav,
  .landing-toggle {
    display: none;
  }

  .landing-tiers[data-billing] [data-price] {
    display: flex;
  }
}