/* The Arclite landing-page layer. Pairs with landing/template.html; every variant rendered by
   landing/build_landing.py loads this one file. Only var() values from dist/arclite-tokens.css,
   plus the components in components/ (band-active, bill-reveal, footer).

   Geometry, in one place. The two rails sit one gutter inside a frame of web-max-w plus two
   gutters, so the distance between them is the rail box: web-max-w on a wide screen, the viewport
   minus two gutters on a narrow one. Three things fill the rail box exactly: every green band, the
   hero picture, and the bill. Text inside a band is inset by one more gutter. Horizontal hairlines
   belong to the full-width section, never to the frame, so they run the whole page. The footer is
   full width and flat. */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--web-page-bg); }
body {
  margin: 0;
  background: var(--web-page-bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); }
p, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; }
.num { font-variant-numeric: tabular-nums; }

/* Icons: Lucide at the system stroke, sized by token, coloured by the text around them. */
.icon { width: var(--icon-size-m); height: var(--icon-size-m); flex: none; }

/* The frame, the rails and the rail box. */
.page { position: relative; }
.rails { position: absolute; inset: 0; max-width: calc(var(--web-max-w) + 2 * var(--web-gutter)); margin: 0 auto; pointer-events: none; z-index: 1; }
.rails span { position: absolute; top: 0; bottom: 0; width: var(--border-w); background: var(--web-rail); }
.rails .rail-l { left: var(--web-gutter); }
.rails .rail-r { right: var(--web-gutter); }
/* .frame's content box is the rail box. A band or a picture placed directly inside it runs rail to rail. */
.frame { max-width: calc(var(--web-max-w) + 2 * var(--web-gutter)); margin: 0 auto; padding: 0 var(--web-gutter); }
/* Text sits one gutter inside the rails. */
.inset { padding: 0 var(--web-gutter); }
.section { padding: var(--web-section-gap) 0; }
/* Full-width hairline: on the section, never on the frame. */
.section-line { border-top: var(--border-w) solid var(--line); }

/* Draft notice: shown while any line on the page is still a draft. The build writes it. */
.draft-note {
  background: var(--warn-fill);
  color: var(--warn);
  font-size: var(--text-s);
  font-weight: var(--weight-label);
  padding: var(--space-2) var(--web-gutter);
  border-bottom: var(--border-w) solid var(--line);
}
.draft-note p { text-align: center; }
.draft-note details { max-width: var(--web-max-w-prose); margin: var(--space-2) auto 0; font-weight: var(--weight-regular); }
.draft-note summary { cursor: pointer; font-weight: var(--weight-label); }
.draft-note ul { list-style: disc; padding-left: var(--space-5); margin-top: var(--space-2); }
.draft-note li { margin-top: var(--space-1); }

/* Top bar: logo left, links, Sign in and one ink-outline action right. No rust here; the hero carries it. */
.nav-wrap { border-bottom: var(--border-w) solid var(--line); }
.nav { height: var(--web-nav-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.logo { display: inline-flex; }
.logo:hover { text-decoration: none; }
.logo img { height: var(--space-12); width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-2); }
.nav-links a { font-size: var(--text-m); font-weight: var(--weight-label); padding: var(--space-2) var(--space-3); border-radius: var(--radius); }
.nav-links a:hover { background: var(--hover); text-decoration: none; }
.nav-links .btn { margin-left: var(--space-2); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--web-cta-h); padding: 0 var(--web-cta-pad-x);
  font-size: var(--web-cta-text); font-weight: var(--button-text-weight); line-height: 1;
  border-radius: var(--button-radius); border: var(--button-border-w) solid transparent;
  transition: background var(--button-duration) var(--ease), border-color var(--button-duration) var(--ease);
  cursor: pointer; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--button-primary-bg); color: var(--button-primary-ink); border-color: var(--button-primary-bg); }
.btn-primary:hover { background: var(--button-primary-bg-hover); border-color: var(--button-primary-bg-hover); }
.btn-secondary { background: var(--button-secondary-bg); color: var(--button-secondary-ink); border-color: var(--button-secondary-border); }
.btn-secondary:hover { background: var(--button-secondary-bg-hover); }
.btn-sm { height: var(--control-h); }
/* The action on a green band: white fill, ink label. */
.btn-band { background: var(--web-band-cta-bg); color: var(--web-band-cta-ink); border-color: var(--web-band-cta-bg); }
.btn-band:hover { background: var(--surface); border-color: var(--surface); }
.link { font-weight: var(--weight-label); }

/* Green bands. Each one is the rail box (placed directly inside a .frame) and always the active
   background (.web-band-active with the .web-band-satin child, clipped to the band). Text on a
   band is white or taupe; the build checks both pairs. A band section keeps cream above and
   below the band so two bands never touch. */
.band-section { padding: var(--web-section-gap) 0; }
.band { color: var(--web-band-ink); padding: var(--web-band-pad-y) 0; }
.band-gradient { background: var(--web-band-deep); background-image: var(--web-band-gradient); }
.band-deep { background: var(--web-band-deep); }
.band-closing { background: var(--web-band-shade); background-image: var(--web-band-gradient-deep); }
.band .eyebrow { color: var(--web-band-ink-2); }
.band .lead { color: var(--web-band-ink-2); }
.band .fine { color: var(--web-band-ink-2); font-size: var(--text-s); }
.band a:not(.btn) { color: var(--web-band-ink); }
.band h1, .band h2 { color: var(--web-band-ink); }

/* Hero: one title, one lead, one action, on the gradient band. The band touches the top bar. */
.hero-section { padding: 0; }
.hero { text-align: center; padding-top: var(--web-hero-pad-y); padding-bottom: calc(var(--web-hero-pad-y) + var(--web-hero-overlap)); }
.hero-inner { max-width: calc(var(--web-max-w-hero) + 2 * var(--web-gutter)); margin: 0 auto; }
.eyebrow { font-size: var(--text-s); font-weight: var(--weight-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--web-stack); }
.hero h1 { font-size: var(--web-text-hero); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.lead { font-size: var(--web-text-lead); line-height: var(--leading-body); color: var(--ink-2); margin-top: var(--web-stack); }
.actions { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--web-stack); }

/* The hero object: the product over the hills, exactly rail to rail. The picture's transparent
   top rows (--crop, a share of its width, written by the build from the content) plus the overlap
   pull it up so the top of the product screen sits one overlap inside the band, with the hills on
   the cream page. The picture carries its own depth, so no elevation token. */
.hero-product { position: relative; z-index: 2; padding-bottom: var(--web-section-gap); }
.hero-shot { width: 100%; height: auto; margin-top: calc(-1 * var(--crop, 0%) - var(--web-hero-overlap)); }

/* Section titles */
.section-title { font-size: var(--web-text-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); max-width: var(--web-max-w-hero); margin-bottom: var(--web-section-gap-sm); }
.section-head { max-width: var(--web-max-w-hero); margin: 0 auto var(--web-section-gap-sm); text-align: center; }
.section-head .section-title { margin: 0 auto; }
.section-head .lead { margin-top: var(--space-4); }

/* Pain points: short statements split by hairlines, no icons, no cards. */
.pains { display: flex; }
.pain { flex: 1 1 0; padding: var(--space-6); border-left: var(--border-w) solid var(--line); }
.pain:first-child { border-left: 0; padding-left: 0; }
.pain h3 { font-family: var(--font); font-size: var(--text-body); font-weight: var(--weight-label); }
.pain p { font-size: var(--text-m); color: var(--ink-2); margin-top: var(--space-2); max-width: var(--web-max-w-prose); }

/* Features: copy with an icon tile on one side, a layered product picture on the other, alternating. */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--web-feature-gap); align-items: center; }
.feature + .feature { margin-top: var(--web-feature-gap-y); }
.feature:nth-of-type(even) .feature-copy { order: 2; }
.icon-tile { width: var(--web-icon-tile-size); height: var(--web-icon-tile-size); background: var(--web-icon-tile-bg); color: var(--web-icon-tile-ink); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); margin-bottom: var(--space-4); }
.feature h3 { font-size: var(--web-feature-title); line-height: var(--leading-title); }
.feature p { font-size: var(--web-text-lead); color: var(--ink-2); max-width: var(--web-max-w-prose); margin-top: var(--space-3); }
.media-stack { position: relative; padding: 0 var(--web-feature-plate-offset) var(--web-feature-plate-offset) 0; }
.media-stack::before { content: ""; position: absolute; inset: var(--web-feature-plate-offset) 0 0 var(--web-feature-plate-offset); background: var(--web-feature-plate-bg); }
.feature:nth-of-type(even) .media-stack { padding: 0 0 var(--web-feature-plate-offset) var(--web-feature-plate-offset); }
.feature:nth-of-type(even) .media-stack::before { inset: var(--web-feature-plate-offset) var(--web-feature-plate-offset) 0 0; }
.media { position: relative; background: var(--web-feature-media-bg); border: var(--border-w) solid var(--web-feature-media-line); box-shadow: var(--web-feature-media-shadow); border-radius: var(--radius); overflow: hidden; }
.media-shot { width: 100%; height: auto; margin-top: calc(-1 * var(--crop, 0%)); }

/* How it works: a deep band inside the rails with glass tiles and a white action. */
.steps-band { text-align: center; }
.steps-band .section-head .lead { color: var(--web-band-ink-2); }
.steps { display: flex; text-align: left; }
.step { flex: 1 1 0; padding: var(--space-6); border-left: var(--border-w) solid var(--web-band-line); }
.step:first-child { border-left: 0; }
.glass { width: var(--web-icon-tile-size); height: var(--web-icon-tile-size); background: var(--web-band-glass); border: var(--border-w) solid var(--web-band-line); display: inline-flex; align-items: center; justify-content: center; color: var(--web-band-ink); margin-bottom: var(--space-4); }
.step-n { font-size: var(--text-s); color: var(--web-band-ink-2); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.step h3 { font-family: var(--font); font-size: var(--text-body); font-weight: var(--weight-label); color: var(--web-band-ink); margin-top: var(--space-1); }
.step p { font-size: var(--text-m); color: var(--web-band-ink-2); margin-top: var(--space-2); }
.steps-band .actions { margin-top: var(--web-section-gap-sm); flex-direction: column; gap: var(--space-3); }

/* Proof: quotes in plain rows. Only words Arclite was given. */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--web-feature-gap); }
.quote blockquote { margin: 0; font-size: var(--web-text-lead); color: var(--ink); max-width: var(--web-max-w-prose); }
.quote-who { margin-top: var(--space-3); font-size: var(--text-m); display: flex; gap: var(--space-2); }
.quote-who span:first-child { font-weight: var(--weight-label); }
.quote-role { color: var(--ink-3); }

/* Pricing: one card raised off the cream page, a price slot, no price unless the content carries one. */
.pricing-grid { display: grid; grid-template-columns: var(--web-card-max-w) 1fr; gap: var(--web-feature-gap); align-items: start; }
.card { background: var(--web-card-bg); border: var(--border-w) solid var(--web-card-line); box-shadow: var(--web-card-shadow); border-radius: var(--radius); padding: var(--web-card-pad); display: flex; flex-direction: column; gap: var(--web-card-gap); }
.card h3 { font-size: var(--text-title); }
.price-slot { font-size: var(--text-hero); font-weight: var(--weight-strong); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.price-slot .period { font-family: var(--font); font-size: var(--text-m); font-weight: var(--weight-regular); color: var(--ink-3); margin-left: var(--space-1); }
.price-slot .pending { font-family: var(--font); font-size: var(--text-m); font-weight: var(--weight-regular); color: var(--ink-3); display: block; }
.card ul li { padding: var(--space-2) 0; border-top: var(--border-w) solid var(--line); font-size: var(--text-m); }
.card ul li:first-child { border-top: 0; }
.card .btn { align-self: flex-start; }
.card .fine { font-size: var(--text-s); color: var(--ink-3); }
.aside { max-width: var(--web-max-w-prose); padding-top: var(--space-4); }
.aside h3 { font-size: var(--text-title); }
.aside p { font-size: var(--web-text-lead); color: var(--ink-2); margin-top: var(--space-3); }
.aside .link { display: inline-block; margin-top: var(--space-4); }

/* FAQ: a recessed cream well with raised white rows. Cream, not green, so it keeps the full width. */
.faq-band { background: var(--web-surface-recessed); }
.faq { max-width: var(--web-max-w-hero); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.faq details { background: var(--web-surface-raised); border: var(--border-w) solid var(--line); box-shadow: var(--web-elevation-1); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); font-size: var(--text-body); font-weight: var(--weight-label); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-3); font-weight: var(--weight-regular); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding: 0 var(--space-5) var(--space-5); color: var(--ink-2); max-width: var(--web-max-w-prose); }

/* Glossary: the industry's words, as hairline rows. */
.glossary { max-width: var(--web-max-w-hero); }
.glossary div { display: grid; grid-template-columns: var(--web-card-max-w) 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-top: var(--border-w) solid var(--line); }
.glossary div:first-child { border-top: 0; padding-top: 0; }
.glossary dt { font-weight: var(--weight-label); }
.glossary dd { color: var(--ink-2); max-width: var(--web-max-w-prose); }

/* Closing band */
.closing { text-align: center; }
.closing .actions { flex-direction: column; gap: var(--space-3); }

@media (max-width: 960px) {
  .steps { flex-wrap: wrap; }
  .step { flex-basis: 50%; }
  .step:nth-child(odd) { border-left: 0; }
  .step:nth-child(n + 3) { border-top: var(--border-w) solid var(--web-band-line); }
}
@media (max-width: 720px) {
  .section, .band-section { padding: var(--web-section-gap-sm) 0; }
  .band { padding-top: var(--web-section-gap-sm); padding-bottom: var(--web-section-gap-sm); }
  .hero { padding-bottom: calc(var(--web-section-gap-sm) + var(--web-hero-overlap)); }
  .hero h1 { font-size: var(--text-display); }
  .hero-product { padding-bottom: var(--web-section-gap-sm); }
  .section-title { font-size: var(--text-display); }
  .pains { flex-direction: column; }
  .pain { padding: var(--space-4) 0; border-left: 0; border-top: var(--border-w) solid var(--line); }
  .pain:first-child { border-top: 0; padding-top: 0; }
  .feature, .pricing-grid, .quotes { grid-template-columns: 1fr; }
  .feature:nth-of-type(even) .feature-copy { order: 0; }
  .feature:nth-of-type(even) .media-stack { padding: 0 var(--web-feature-plate-offset) var(--web-feature-plate-offset) 0; }
  .feature:nth-of-type(even) .media-stack::before { inset: var(--web-feature-plate-offset) 0 0 var(--web-feature-plate-offset); }
  .steps { flex-direction: column; }
  .step { flex-basis: auto; border-left: 0; }
  .step + .step { border-top: var(--border-w) solid var(--web-band-line); }
  .glossary div { grid-template-columns: 1fr; gap: var(--space-1); }
  .nav-links a:not(.keep) { display: none; }
  .nav-links .btn { margin-left: 0; }
  .actions { flex-wrap: wrap; }
}