/* ==========================================================================
   ARLOS Founding Family landing page
   styles.css

   1. Custom properties (colours, type, spacing, layout tokens)
   2. Light reset
   3. Base typography
   4. Layout helpers
   5. Buttons
   6. Section 1: Hero + Founding Family card (mobile)
   7. Desktop breakpoint: exact reproduction of the Figma frame

   Mobile styles are the default. The desktop block at 860px reproduces the
   Figma hero frame (1728 x 1117) exactly: every value in that block is
   design-px multiplied by --u, where --u = 100vw / 1728. Colour and type
   values come from the Figma file (node 4822:41265) and CLAUDE.md.
   ========================================================================== */

/* 1. Custom properties
   -------------------------------------------------------------------------- */
:root {
  /* Brand colours. Names mirror the Figma variables where they exist. */
  --cream: #FDF9F6;          /* page background (Figma Sh2/50) */
  --cream-dark: #F5EDE7;     /* boxes and cards (from CLAUDE.md) */
  --purple: #686BE3;         /* primary (Figma AR-purple) */
  --purple-deep: #5557B2;    /* gradient top / hover (Figma AR-purple-02) */
  --orange: #F0803C;         /* accent, card border */
  --green: #62C673;          /* success, ticks (from CLAUDE.md) */
  --pink: #E879F9;           /* card eyebrow (Figma AR-pink) */
  --heading: #595959;        /* headers and subheaders (Figma text-main) */
  --body: #6E6D6C;           /* body copy: darkened from the design's #868584
                                for contrast, per the CLAUDE.md accessibility note */

  /* Badge gradients (Figma) */
  --badge-green-top: #80E48E;
  --badge-green-bottom: #218D3F;
  --badge-gold-top: #FDE047;
  --badge-gold-bottom: #EAB308;

  /* Card background wash (Figma: cream to pale pink) */
  --card-pink: #FFDBFF;

  /* Typography.
     The design specifies "Apfel Grotezk" (a commercial font). CLAUDE.md
     mandates Plus Jakarta Sans, which is what we load and use here. */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Mobile type scale */
  --step-hero: clamp(2.75rem, 8vw + 1rem, 5rem);
  --step-lead: clamp(1.05rem, 1.2vw + 0.9rem, 1.35rem);
  --step-card-title: clamp(2rem, 4vw + 0.5rem, 2.5rem);
  --step-eyebrow: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --step-body: 1.0625rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout */
  --content-max: 1280px;
  --gutter: 1.5rem;
  --radius-card: 24px;
  --radius-button: 16px;      /* Figma border-radius-5 */
}

/* 2. Light reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body, h1, h2, h3, p, figure { margin: 0; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

button { font: inherit; cursor: pointer; }

/* 3. Base typography
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.5;
  color: var(--body);
  background-color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  color: var(--heading);
  line-height: 1.1;
  font-weight: 600;
  /* Sentence case is a copy rule; never uppercase via CSS. */
}

/* 4. Layout helpers
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* 5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: var(--space-4) var(--space-6);
  border: none;
  border-radius: var(--radius-button);
  background-color: var(--purple);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.btn:hover { background-color: var(--purple-deep); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Demo CTAs render as <button> elements (they open the Cal modal);
   strip the browser's default button chrome so they match the links. */
button.arc-cta,
button.guarantee__cta,
button.fc-cta {
  background: transparent;
  cursor: pointer;
  font: inherit;
}

/* 5b. Site header
   --------------------------------------------------------------------------
   A transparent glass bar over the hero. Mobile shows logo + CTA only;
   the banner pill and social icons appear at the desktop breakpoint. */
.site-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--gutter);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.site-nav__logo {
  display: flex;
  align-items: center;
  gap: 9px;
}

.site-nav__banner { display: none; }
.site-nav__social { display: none; }

.site-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1.5px solid var(--green);
  border-radius: 12px;
  background: rgba(98, 198, 115, 0.1);
  color: var(--green);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__cta:focus-visible,
.site-nav__banner:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* 6. Section 1: Hero + Founding Family card (mobile)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--purple-deep) 0%, var(--purple) 35.139%);
  color: #fff;
  overflow: hidden;
  padding-bottom: var(--space-8);
}

/* Desktop-only background layers (arc vector + masked photo) */
.hero__bg { display: none; }

/* --- Mobile photo arch --- */
.hero__media {
  margin: 0;
}

.hero__media-frame {
  position: relative;
  width: min(80%, 380px);
  margin-inline: auto;
  margin-top: var(--space-6);
  aspect-ratio: 3 / 4;
  border-radius: 46% 46% 14px 14px / 38% 38% 10px 10px;
  overflow: hidden;
  background: #4d4fb0;
}

.hero__media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Text column --- */
.hero__content {
  padding: var(--space-7) var(--gutter) 0;
}

.hero__title {
  color: #fff;
  font-size: var(--step-hero);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.hero__lead {
  margin-top: var(--space-5);
  max-width: 42ch;
  font-size: var(--step-lead);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.95);
}

/* --- The Founding Family card --- */
.offer-card {
  position: relative;
  margin-top: var(--space-7);
  padding: var(--space-6);
  border: 2px solid var(--orange);
  border-radius: var(--radius-card);
  background: linear-gradient(159deg, var(--cream) 30%, var(--card-pink) 100%);
  color: var(--body);
}

.offer-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.offer-card__title {
  font-size: var(--step-card-title);
  font-weight: 600;
  line-height: 1.15;
  color: var(--heading);
}

.offer-card__eyebrow {
  margin-top: var(--space-4);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  color: var(--pink);
}

.offer-card__body {
  margin-top: var(--space-4);
  line-height: 1.35;
}

.offer-card__body p + p { margin-top: var(--space-4); }

.offer-card .btn { margin-top: var(--space-6); }

/* --- The "First 100" badge (inline SVG from the design's vectors) --- */
.badge {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
}

.badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.badge__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1;
}

.badge__first { font-size: 0.85rem; font-weight: 500; }
.badge__num { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.01em; }

/* 6b. Section 2: Two experiences, tabbed (mobile-simple base)
   -------------------------------------------------------------------------- */
.experiences {
  padding: var(--space-8) var(--gutter);
}

.exp-head {
  text-align: center;
}

.exp-head h2 {
  font-size: var(--step-card-title);
  font-weight: 600;
  line-height: 1.15;
}

.exp-head p {
  margin: var(--space-4) auto 0;
  max-width: 60ch;
}

.exp-panel {
  margin-top: var(--space-6);
  background: var(--cream-dark);
  border-radius: 24px;
  overflow: hidden;
}

.exp-tabs {
  display: flex;
}

.exp-tab {
  flex: 1;
  padding: var(--space-4) var(--space-2);
  border: none;
  background: #EDE1D9;
  color: var(--purple);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.exp-tab.is-active {
  background: var(--purple);
  color: #fff;
}

.exp-tab:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}

/* --- Slider stage: stacked slides with a depth-swap transition --- */
.exp-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 919 / 809;
  perspective: 1200px;
}

.exp-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: blur(10px);
  transform: translateX(6%) rotateY(-8deg) scale(0.96);
  transform-origin: 60% 50%;
  transition:
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.45s ease,
    filter 0.6s ease;
  pointer-events: none;
  will-change: transform, opacity, filter;
}

/* Arriving from the other side when stepping backwards */
.exp-stage[data-dir="prev"] .exp-slide-img {
  transform: translateX(-6%) rotateY(8deg) scale(0.96);
}

.exp-slide-img.is-active {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* The outgoing slide sinks back and dissolves */
.exp-slide-img.is-leaving {
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-5%) scale(0.9);
}

.exp-stage[data-dir="prev"] .exp-slide-img.is-leaving {
  transform: translateX(5%) scale(0.9);
}

/* Card text rises in a beat behind the visual */
.exp-card.is-swapping h3 { animation: exp-rise 0.5s 0.1s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.exp-card.is-swapping p { animation: exp-rise 0.5s 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

@keyframes exp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .exp-slide-img { transition: opacity 0.3s ease; transform: none; filter: none; }
  .exp-slide-img.is-leaving { transform: none; }
  .exp-card.is-swapping h3,
  .exp-card.is-swapping p { animation: none; }
}

.exp-card {
  padding: var(--space-5) var(--space-6);
}

.exp-card h3 {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--heading);
}

.exp-card p {
  margin-top: var(--space-4);
}

.exp-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-2) var(--space-6) var(--space-6);
}

.exp-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 14px;
  background: var(--purple);
  color: #fff;
}

.exp-arrow svg { width: 20px; height: 20px; }

.exp-arrow:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.exp-dots {
  display: flex;
  gap: 6px;
}

.exp-dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #D8D7D5;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.exp-dot.is-active { background: #B0AFAE; }

.exp-dot:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* 6c. Section 3: The three principles (mobile-simple base)
   -------------------------------------------------------------------------- */
.principles {
  padding: var(--space-8) var(--gutter);
}

.pri-head {
  text-align: center;
}

.pri-eyebrow {
  color: var(--purple);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.pri-head h2 {
  margin-top: var(--space-3);
  font-size: var(--step-card-title);
  font-weight: 600;
  line-height: 1.15;
}

.pri-photo {
  margin: var(--space-6) 0 0;
  border-radius: 24px;
  overflow: hidden;
}

.pri-photo img {
  width: 100%;
  height: auto;
}

.pri-list {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.pri-item {
  position: relative;
  margin-top: var(--space-7);
}

.pri-item h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--heading);
}

.pri-item p {
  margin-top: var(--space-3);
}

/* Ghost numerals sit faintly behind the text on mobile */
.pri-num {
  position: absolute;
  right: 0;
  top: 0;
  height: 9rem;
  width: auto;
  opacity: 0.5;
  z-index: -1;
}

/* 6d. Section 4: The problem, three parent quotes (mobile-simple base)
   -------------------------------------------------------------------------- */
.worries {
  padding: var(--space-8) var(--gutter);
}

.wor-head {
  text-align: center;
}

.wor-eyebrow {
  color: var(--orange);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.wor-head h2 {
  margin-top: var(--space-3);
  font-size: var(--step-card-title);
  font-weight: 600;
  line-height: 1.15;
}

.wor-sub {
  margin: var(--space-4) auto 0;
  max-width: 48ch;
}

.wor-quotes {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.quote-card {
  position: relative;
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--cream-dark);
  border-radius: 24px;
  overflow: hidden;
}

.quote-card__quote {
  margin: 0;
}

.quote-card__tag {
  color: var(--orange);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.quote-card__text {
  margin-top: var(--space-3);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--heading);
}

.quote-card__name {
  display: block;
  margin-top: var(--space-4);
  font-style: normal;
  font-weight: 500;
  color: var(--heading);
}

.quote-card__meta {
  margin-top: var(--space-1);
  font-size: 0.9rem;
}

.quote-card__mark {
  position: absolute;
  top: 0;
  right: var(--space-4);
  font-size: 4rem;
  line-height: 1;
  font-weight: 500;
  color: var(--orange);
}

/* 6e. Section 5: The learning arc, Cambridge (mobile-simple base)
   -------------------------------------------------------------------------- */
.arc {
  padding: var(--space-8) var(--gutter);
}

.arc-panel {
  position: relative;
  background: var(--purple);
  border-radius: 32px;
  overflow: hidden;
  padding: var(--space-7) var(--space-5);
  color: #fff;
  text-align: center;
}

.arc-dome {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  max-width: none;
  opacity: 0.9;
  pointer-events: none;
}

.arc-eyebrow {
  position: relative;
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.arc-panel h2 {
  position: relative;
  margin-top: var(--space-3);
  color: #fff;
  font-size: var(--step-card-title);
  font-weight: 600;
  line-height: 1.15;
}

.arc-sub {
  position: relative;
  margin: var(--space-4) auto 0;
  max-width: 48ch;
  color: #fff;
}

.arc-cards {
  position: relative;
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.arc-card {
  margin-top: var(--space-5);
  background: var(--cream);
  border-radius: 24px;
  padding: var(--space-5);
}

.arc-card__head {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.arc-card__icon {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arc-card__icon img {
  width: 78%;
  height: auto;
}

.arc-card h3 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.1;
}

.arc-card p {
  margin-top: var(--space-4);
  color: var(--body);
}

.arc-close {
  position: relative;
  margin-top: var(--space-6);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
}

.arc-ctas {
  position: relative;
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

.arc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-button);
  font-weight: 500;
  text-decoration: none;
}

.arc-cta--primary {
  background: var(--green);
  color: #fff;
}

.arc-cta--secondary {
  border: 2px solid var(--green);
  color: var(--green);
}

.arc-cta:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* 6f. Section 6: The offer (mobile-simple base)
   -------------------------------------------------------------------------- */
.offer {
  padding: var(--space-8) var(--gutter);
  background: var(--cream-dark);
}

.off-head {
  text-align: center;
}

.off-eyebrow {
  color: var(--purple);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.off-head h2 {
  margin-top: var(--space-3);
  font-size: var(--step-card-title);
  font-weight: 600;
  line-height: 1.15;
}

.off-tagline {
  margin-top: var(--space-3);
  color: var(--pink);
  font-size: 1.25rem;
  font-weight: 500;
}

.off-sub {
  margin: var(--space-4) auto 0;
  max-width: 48ch;
}

.offer-panel {
  position: relative;
  margin: var(--space-6) auto 0;
  max-width: 640px;
  background: var(--cream);
  border: 4px solid var(--purple);
  border-radius: 24px;
  overflow: hidden;
  padding: var(--space-5);
}

.offer-panel__glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 300px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--card-pink) 100%);
  pointer-events: none;
}

.offer-panel > *:not(.offer-panel__glow) {
  position: relative;
}

.offer-panel__title {
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--heading);
}

.offer-panel__was {
  position: relative;
  width: 142px;
  margin: var(--space-4) auto 0;
  padding: 8px 0;
  border-radius: 16px;
  background: rgba(104, 107, 227, 0.15);
  text-align: center;
}

.offer-panel__was-price {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--purple);
}

.offer-panel__strike {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 123px;
  transform: translate(-50%, -50%) rotate(-17.17deg);
}

.offer-panel__price {
  margin-top: var(--space-3);
  text-align: center;
  font-size: 4rem;
  font-weight: 800;
  color: var(--purple);
  line-height: 1.1;
}

.offer-panel__cur { font-weight: 400; }

.offer-panel__per {
  font-size: 1.5rem;
  font-weight: 400;
  margin-left: 0.35rem;
}

.offer-panel__forever {
  margin-top: var(--space-1);
  text-align: center;
  color: var(--purple);
  font-size: 0.95rem;
}

.offer-benefits {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.offer-benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-size: 0.95rem;
}

.offer-benefits img { flex: 0 0 auto; }

.offer-panel__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-5);
  min-height: 46px;
  border-radius: var(--radius-button);
  background: var(--purple);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.18s ease;
}

.offer-panel__cta:hover { background: var(--purple-deep); }

.offer-panel__cta:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.offer-panel__note {
  margin-top: var(--space-3);
  text-align: center;
  font-size: 0.85rem;
}

.offer-panel > .badge--offer {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 84px;
  height: 84px;
}

/* 6g. Section 7: How the Founding Family offer works (mobile-simple base)
   -------------------------------------------------------------------------- */
.roadmap {
  padding: var(--space-8) var(--gutter);
}

.rm-head {
  text-align: center;
}

.rm-eyebrow {
  color: var(--purple);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.rm-head h2 {
  margin-top: var(--space-3);
  font-size: var(--step-card-title);
  font-weight: 600;
  line-height: 1.15;
}

/* --- Guarantee panel --- */
.guarantee {
  position: relative;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--cream-dark) 0%, var(--cream) 100%);
  text-align: left;
}

.guarantee__mark {
  display: block;
  width: 180px;
  margin: 0 auto var(--space-4);
}

.guarantee__txt h3 {
  margin-top: var(--space-2);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--heading);
}

.guarantee__txt p:last-child {
  margin-top: var(--space-4);
}

.guarantee__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-4);
  min-height: 52px;
  border-radius: var(--radius-button);
  font-weight: 500;
  text-decoration: none;
}

.guarantee__cta--primary {
  background: var(--purple);
  color: #fff;
}

.guarantee__cta--secondary {
  border: 2px solid var(--purple);
  color: var(--purple);
}

.guarantee__cta:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.guarantee__note {
  margin-top: var(--space-3);
  text-align: center;
  font-size: 0.85rem;
}

/* --- Timeline --- */
.timeline {
  position: relative;
  margin-top: var(--space-7);
}

.tl-line { display: none; }

.tl-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-step {
  position: relative;
  margin-top: var(--space-6);
}

.tl-dot { display: none; }

.tl-date {
  color: var(--purple);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.tl-step h3 {
  margin-top: var(--space-1);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.2;
}

.tl-step p {
  margin-top: var(--space-3);
}

.tl-list {
  margin: var(--space-3) 0 0;
  padding-left: 1.25rem;
}

.tl-list li {
  margin-top: var(--space-2);
}

.tl-strong {
  font-weight: 700;
  color: var(--heading);
}

/* --- Newsletter --- */
.newsletter {
  position: relative;
  margin-top: var(--space-7);
  padding: var(--space-5);
  border-radius: 24px;
  background: var(--purple);
  overflow: hidden;
  color: #fff;
}

.nl-bg {
  position: absolute;
  right: -30%;
  top: -20%;
  width: 120%;
  max-width: none;
  pointer-events: none;
}

.newsletter > *:not(.nl-bg) { position: relative; }

.nl-eyebrow {
  color: var(--badge-green-top);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.nl-title {
  margin-top: var(--space-3);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.nl-points {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.nl-points li {
  position: relative;
  padding-left: 22px;
  margin-top: var(--space-2);
  font-size: 0.95rem;
}

.nl-points li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.3em;
  width: 6px;
  height: 12px;
  background: url("images/chevron.svg") no-repeat center / contain;
}

.nl-field {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  padding: 0 20px;
  height: 56px;
  border: none;
  border-radius: 16px;
  background: var(--cream);
  font: inherit;
  font-size: 1rem;
  color: var(--heading);
}

.nl-field::placeholder { color: #868584; }

.nl-field:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.nl-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--space-3);
  height: 57px;
  border: none;
  border-radius: 16px;
  background: var(--green);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 500;
}

.nl-submit:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.nl-legal {
  margin-top: var(--space-3);
  font-size: 0.75rem;
  color: #fff;
}

.nl-legal a { color: var(--badge-green-top); }

/* Success state: fields give way to the confirmation */
.newsletter.is-done .nl-field,
.newsletter.is-done .nl-submit,
.newsletter.is-done .nl-legal { display: none; }

.nl-success {
  margin-top: var(--space-4);
  color: #fff;
}

.nl-success__title {
  font-size: 1.4rem;
  font-weight: 600;
}

.nl-success p + p { margin-top: var(--space-2); }

/* 6h. Section 8: A note from the founder (mobile-simple base)
   -------------------------------------------------------------------------- */
.founder {
  padding: var(--space-8) var(--gutter);
}

.fd-title {
  font-size: var(--step-card-title);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

.fd-photo {
  margin: var(--space-6) auto 0;
  max-width: 420px;
  border-radius: 24px;
  overflow: hidden;
}

.fd-photo img {
  width: 100%;
  height: auto;
}

.fd-name {
  margin-top: var(--space-4);
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
}

.fd-role {
  margin-top: var(--space-1);
  text-align: center;
  font-size: 0.85rem;
  text-transform: uppercase;
  line-height: 1.4;
}

.fd-letter {
  margin: var(--space-6) auto 0;
  max-width: 560px;
}

.fd-quote {
  width: 56px;
  height: auto;
}

.fd-lede {
  margin-top: var(--space-4);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.2;
}

.fd-body p {
  margin-top: var(--space-4);
}

.fd-signature {
  margin-top: var(--space-5);
  width: 160px;
  height: auto;
  mix-blend-mode: multiply;   /* drop the export's white background */
}

/* 6i. Section 9: Competitor comparison (mobile-simple base)
   -------------------------------------------------------------------------- */
.compare {
  padding: var(--space-8) var(--gutter);
}

.cmp-panel {
  background: var(--cream-dark);
  border-radius: 32px;
  padding: var(--space-7) var(--space-4);
}

.cmp-head {
  text-align: center;
}

.cmp-eyebrow {
  color: var(--purple);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.cmp-head h2 {
  margin-top: var(--space-3);
  font-size: var(--step-card-title);
  font-weight: 600;
  line-height: 1.15;
}

.cmp-sub {
  margin: var(--space-4) auto 0;
  max-width: 40ch;
}

.cmp-sub strong {
  font-weight: 700;
  display: block;
}

/* The table scrolls sideways on small screens rather than squashing */
.cmp-scroll {
  margin-top: var(--space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cmp-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 760px;
  background: #fff;
  border: 1px solid #EDE1D9;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 14px 24px rgba(194, 166, 141, 0.15);
}

.cmp-table th,
.cmp-table td {
  padding: var(--space-3);
  text-align: center;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--body);
  border-left: 1px solid #EDE1D9;
}

.cmp-table th:first-child,
.cmp-table td:first-child {
  border-left: none;
  text-align: left;
}

.cmp-table thead th {
  font-weight: 700;
  color: var(--heading);
  font-size: 0.9rem;
}

.cmp-table tbody th {
  font-weight: 500;
  color: var(--heading);
  font-size: 0.95rem;
}

/* Zebra: odd body rows cream */
.cmp-table tbody tr:nth-child(odd) th,
.cmp-table tbody tr:nth-child(odd) td {
  background: var(--cream);
}

/* ARLOS column tint */
.cmp-table td.cmp-arlos {
  background: rgba(104, 107, 227, 0.1);
}

.cmp-table tbody tr:nth-child(odd) td.cmp-arlos {
  background: rgba(104, 107, 227, 0.14);
}

.cmp-table td img,
.cmp-table th img {
  display: inline-block;
  vertical-align: middle;
}

.cmp-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 6j. Section 10: FAQ accordion (mobile-simple base)
   -------------------------------------------------------------------------- */
.faq {
  padding: var(--space-8) var(--gutter);
}

.faq-head {
  text-align: center;
}

.faq-eyebrow {
  color: var(--purple);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.faq-head h2 {
  margin-top: var(--space-3);
  font-size: var(--step-card-title);
  font-weight: 600;
  line-height: 1.15;
}

.faq-list {
  margin: var(--space-6) auto 0;
  max-width: 840px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.faq-item {
  background: var(--cream-dark);
  border-radius: 24px;
  overflow: hidden;
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: 21px 20px;
  border: none;
  background: none;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--heading);
  line-height: 1.2;
}

.faq-q:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}

/* The + icon, drawn in CSS; rotates to a cross when open */
.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--heading);
  border-radius: 1px;
}

.faq-icon::before { width: 2px; height: 14px; }
.faq-icon::after { width: 14px; height: 2px; }

.faq-item.is-open .faq-icon { transform: rotate(45deg); }

/* Answers slide open via the grid-rows transition */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

.faq-a__inner {
  overflow: hidden;
  min-height: 0;
}

.faq-a__inner p {
  padding: 0 20px 21px;
  color: var(--body);
}

@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-icon { transition: none; }
}

/* 6k. Section 11: Final call to action (mobile-simple base)
   -------------------------------------------------------------------------- */
.final-cta {
  padding: var(--space-8) var(--gutter);
}

.fc-panel {
  position: relative;
  background: var(--purple);
  border-radius: 32px;
  overflow: hidden;
  padding: var(--space-7) var(--space-5);
  color: #fff;
}

.fc-photo {
  position: absolute;
  right: -20%;
  bottom: 0;
  width: 90%;
  max-width: none;
  opacity: 0.45;
  pointer-events: none;
}

.fc-panel > *:not(.fc-photo):not(.fc-photo-m) { position: relative; }

.fc-photo-m { display: none; }   /* mobile-only, shown in the mobile layer */

.fc-eyebrow {
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.fc-panel h2 {
  margin-top: var(--space-3);
  color: #fff;
  font-size: var(--step-card-title);
  font-weight: 600;
  line-height: 1.15;
}

.fc-points {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.fc-points li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.fc-points img { flex: 0 0 auto; }

.fc-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-4);
  min-height: 52px;
  border-radius: var(--radius-button);
  font-weight: 500;
  text-decoration: none;
}

.fc-cta--primary {
  background: var(--green);
  color: #fff;
}

.fc-cta--secondary {
  border: 2px solid var(--green);
  color: var(--green);
}

.fc-cta:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.fc-note {
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: #fff;
}

/* 6l. Section 12: Footer (mobile-simple base)
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--cream-dark);
  padding: var(--space-6) var(--gutter) var(--space-5);
}

.ft-logo {
  width: 56px;
  height: auto;
}

.ft-tag {
  margin-top: var(--space-4);
  max-width: 32ch;
  font-weight: 500;
  line-height: 1.4;
}

.ft-contact {
  margin-top: var(--space-5);
}

.ft-contact__h {
  font-weight: 500;
  color: var(--body);
}

.ft-contact a {
  display: inline-block;
  margin-top: var(--space-2);
  text-decoration: none;
}

.ft-contact a:hover { text-decoration: underline; }

.ft-copy {
  margin-top: var(--space-6);
  font-size: 0.85rem;
}

.ft-legal {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--space-5);
  font-size: 0.85rem;
}

.ft-legal a { text-decoration: none; }
.ft-legal a:hover { text-decoration: underline; }

.site-footer a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* 6m. Reserve modal
   -------------------------------------------------------------------------- */
.rsv-overlay[hidden] { display: none; }

.rsv-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(38, 32, 74, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}

.rsv-modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 2 * var(--space-4));
  overflow-y: auto;
  background: var(--cream);
  border-radius: 24px;
  padding: var(--space-6);
  box-shadow: 0 30px 60px rgba(20, 15, 50, 0.35);
}

.rsv-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--heading);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 12px;
}

.rsv-close:hover { background: var(--cream-dark); }

.rsv-close:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.rsv-eyebrow {
  color: var(--purple);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.95rem;
}

.rsv-title {
  margin-top: var(--space-3);
  font-size: 2rem;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.15;
}

.rsv-lead {
  margin-top: var(--space-3);
  font-size: 1.05rem;
  line-height: 1.5;
}

.rsv-lead strong {
  color: var(--purple);
  font-weight: 700;
}

.rsv-form {
  margin-top: var(--space-5);
}

.rsv-field {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: var(--space-3);
  padding: 0 20px;
  background: #fff;
  border: 1px solid #E5DED8;
  border-radius: 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--heading);
}

.rsv-field::placeholder { color: #9A9896; }

.rsv-field:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 0;
  border-color: var(--purple);
}

.rsv-agree {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-4);
  font-size: 0.95rem;
  color: var(--body);
  cursor: pointer;
}

.rsv-agree input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--purple);
  cursor: pointer;
}

.rsv-agree a { color: var(--purple); }

.rsv-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 57px;
  margin-top: var(--space-5);
  border: none;
  border-radius: 16px;
  background: var(--green);
  color: #fff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.rsv-submit:disabled {
  background: #B7E0BF;
  cursor: not-allowed;
}

.rsv-submit:not(:disabled):hover { background: #54B565; }

.rsv-submit:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.rsv-note {
  margin-top: var(--space-4);
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #9A9896;
}

/* 6z. Mobile refinement: exact reproduction of the 393px Figma frames
   --------------------------------------------------------------------------
   One design pixel = --um = 100vw / 393, capped so tablets between the
   mobile and desktop breakpoints stay sane. Every value below is the
   mobile design's own number. This layer overrides the simple base styles
   above; the desktop block later replaces both at 860px. */
@media (max-width: 859.98px) {
  :root { --um: min(calc(100vw / 393), 1.15px); }

  /* --- Header --- */
  .site-nav { padding: calc(12 * var(--um)) calc(16 * var(--um)); }
  .site-nav__mark { width: calc(26 * var(--um)); height: auto; }
  .site-nav__wordmark { width: calc(94 * var(--um)); height: auto; }
  .site-nav__cta {
    padding: calc(9 * var(--um)) calc(14 * var(--um));
    font-size: calc(13 * var(--um));
    border-radius: calc(10 * var(--um));
  }

  /* --- Section 1: hero --- */
  .hero__media-frame {
    width: calc(290 * var(--um));
    margin-top: calc(64 * var(--um));   /* clear the nav band */
    aspect-ratio: 29 / 30;
  }

  .hero__content { padding: calc(28 * var(--um)) calc(18 * var(--um)) calc(34 * var(--um)); }

  .hero__title {
    font-size: calc(33.2 * var(--um));   /* 40px design */
    line-height: calc(48 * var(--um));
    max-width: calc(318 * var(--um));
  }

  .hero__lead {
    margin-top: calc(24 * var(--um));
    font-size: calc(17.3 * var(--um));   /* 18px Inter */
    line-height: calc(27 * var(--um));
    max-width: calc(357 * var(--um));
  }

  .offer-card {
    margin-top: calc(39 * var(--um));
    padding: calc(24 * var(--um));
    border-radius: calc(24 * var(--um));
  }

  .offer-card__title {
    font-size: calc(23.2 * var(--um));   /* 28px design */
    line-height: calc(34 * var(--um));
    max-width: calc(180 * var(--um));
  }

  .badge { width: calc(94 * var(--um)); height: calc(94 * var(--um)); }
  .badge__first { font-size: calc(10.8 * var(--um)); }
  .badge__num { font-size: calc(29 * var(--um)); }

  .offer-card__eyebrow {
    margin-top: calc(8 * var(--um));
    font-size: calc(18.3 * var(--um));   /* 22px design */
    line-height: calc(26 * var(--um));
    max-width: calc(190 * var(--um));
  }

  .offer-card__body {
    margin-top: calc(22 * var(--um));
    font-size: calc(15.4 * var(--um));   /* 16px Inter */
    line-height: calc(24 * var(--um));
  }

  .offer-card__body p + p { margin-top: calc(24 * var(--um)); }

  .offer-card .btn {
    margin-top: calc(34 * var(--um));
    min-height: calc(46 * var(--um));
    font-size: calc(15.8 * var(--um));
    border-radius: calc(16 * var(--um));
  }

  /* --- Section 2: experiences --- */
  .experiences { padding: calc(54 * var(--um)) 0 0; }

  .exp-head { padding-inline: calc(16 * var(--um)); }

  .exp-head h2 {
    font-size: calc(28.2 * var(--um));   /* 34px design */
    line-height: calc(41 * var(--um));
  }

  .exp-head p {
    margin-top: calc(24 * var(--um));
    max-width: none;
    font-size: calc(17.3 * var(--um));
    line-height: calc(27 * var(--um));
  }

  .exp-panel { margin-top: calc(40 * var(--um)); border-radius: 0; }

  .exp-tabs { height: calc(60 * var(--um)); }
  .exp-tab { padding: 0; font-size: calc(12.5 * var(--um)); }

  .exp-stage {
    width: calc(380 * var(--um));
    height: calc(331 * var(--um));
    aspect-ratio: auto;
    margin: calc(63 * var(--um)) auto 0;
  }

  .exp-slide-img { object-fit: cover; }

  .exp-card {
    margin: calc(33 * var(--um)) calc(16 * var(--um)) 0;
    min-height: calc(182 * var(--um));
    padding: calc(24 * var(--um));
    border-radius: calc(24 * var(--um));
  }

  .exp-card h3 { font-size: calc(23.2 * var(--um)); line-height: calc(34 * var(--um)); }
  .exp-card p { margin-top: calc(12 * var(--um)); font-size: calc(15.4 * var(--um)); line-height: calc(24 * var(--um)); }

  .exp-controls {
    width: calc(284 * var(--um));
    margin: calc(24 * var(--um)) auto 0;
    padding: 0 0 calc(62 * var(--um));
    gap: 0;
    justify-content: space-between;
  }

  .exp-arrow { width: calc(56 * var(--um)); height: calc(56 * var(--um)); border-radius: calc(16 * var(--um)); }
  .exp-arrow svg { width: calc(20 * var(--um)); height: calc(20 * var(--um)); }
  .exp-dots { gap: calc(6 * var(--um)); }
  .exp-dot { width: calc(18 * var(--um)); height: calc(18 * var(--um)); }

  /* --- Section 3: principles --- */
  .principles { padding: calc(60 * var(--um)) calc(16 * var(--um)) calc(20 * var(--um)); }

  .pri-eyebrow { font-size: calc(12.5 * var(--um)); }

  .pri-head h2 {
    margin-top: calc(16 * var(--um));
    font-size: calc(33.2 * var(--um));
    line-height: calc(48 * var(--um));
  }

  .pri-photo {
    margin-top: calc(50 * var(--um));
    border-radius: calc(24 * var(--um));
    height: calc(239 * var(--um));
  }

  .pri-photo img { width: 100%; height: 100%; object-fit: cover; }

  .pri-item { margin-top: calc(39 * var(--um)); }
  .pri-item h3 { font-size: calc(28.2 * var(--um)); line-height: calc(41 * var(--um)); }
  .pri-item p { margin-top: calc(16 * var(--um)); font-size: calc(17.3 * var(--um)); line-height: calc(27 * var(--um)); }

  .pri-num {
    height: calc(142 * var(--um));
    right: calc(26 * var(--um));
    top: calc(43 * var(--um));
    opacity: 1;
  }

  /* --- Section 4: quotes become a swipeable carousel --- */
  .worries { padding: calc(47 * var(--um)) 0; }

  .wor-head { padding-inline: calc(26 * var(--um)); }
  .wor-eyebrow { font-size: calc(12.5 * var(--um)); }
  .wor-head h2 { margin-top: calc(16 * var(--um)); font-size: calc(33.2 * var(--um)); line-height: calc(48 * var(--um)); }
  .wor-sub { margin-top: calc(16 * var(--um)); font-size: calc(17.3 * var(--um)); line-height: calc(27 * var(--um)); }

  .wor-quotes {
    display: flex;
    gap: calc(16 * var(--um));
    margin: calc(32 * var(--um)) 0 0;
    padding: 0 calc(40 * var(--um)) calc(8 * var(--um));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .wor-quotes::-webkit-scrollbar { display: none; }

  .quote-card {
    position: relative;
    flex: 0 0 calc(317 * var(--um));
    height: calc(207 * var(--um));
    margin: 0;
    padding: 0;
    border-radius: calc(24 * var(--um));
    scroll-snap-align: center;
  }

  .quote-card__tag {
    position: absolute;
    left: calc(24 * var(--um));
    top: calc(28 * var(--um));
    margin: 0;
    font-size: calc(14.1 * var(--um));
    line-height: 1;
  }

  .quote-card__text {
    position: absolute;
    left: calc(24 * var(--um));
    top: calc(58 * var(--um));
    width: calc(288 * var(--um));
    margin: 0;
    font-size: calc(23.2 * var(--um));
    line-height: calc(34 * var(--um));
  }

  .quote-card__name {
    position: absolute;
    left: calc(24 * var(--um));
    top: calc(146 * var(--um));
    margin: 0;
    font-size: calc(14.1 * var(--um));
    line-height: 1;
  }

  .quote-card__meta {
    position: absolute;
    left: calc(24 * var(--um));
    top: calc(171 * var(--um));
    margin: 0;
    font-size: calc(11.5 * var(--um));
    line-height: calc(17 * var(--um));
    white-space: nowrap;
  }

  .quote-card__mark {
    left: calc(259 * var(--um));
    right: auto;
    top: calc(5 * var(--um));
    font-size: calc(79.7 * var(--um));
  }

  .wor-dots {
    display: flex;
    justify-content: center;
    gap: calc(6 * var(--um));
    margin-top: calc(24 * var(--um));
  }

  .wor-dots span {
    width: calc(18 * var(--um));
    height: calc(18 * var(--um));
    border-radius: 50%;
    background: #D8D7D5;
    transition: background-color 0.2s ease;
  }

  .wor-dots span.is-active { background: #B0AFAE; }

  /* --- Section 5: learning arc --- */
  .arc { padding: calc(116 * var(--um)) 0 0; }

  .arc-panel { border-radius: 0; padding: calc(27 * var(--um)) 0 calc(60 * var(--um)); }

  .arc-eyebrow { font-size: calc(12.5 * var(--um)); }
  .arc-panel h2 {
    margin-top: calc(12 * var(--um));
    padding-inline: calc(18 * var(--um));
    font-size: calc(28.2 * var(--um));
    line-height: calc(41 * var(--um));
  }
  .arc-sub {
    margin-top: calc(16 * var(--um));
    padding-inline: calc(15 * var(--um));
    font-size: calc(17.3 * var(--um));
    line-height: calc(27 * var(--um));
    max-width: none;
  }

  .arc-cards { margin: calc(43 * var(--um)) calc(16 * var(--um)) 0; }
  .arc-card { margin-top: calc(16 * var(--um)); padding: calc(24 * var(--um)); border-radius: calc(24 * var(--um)); }
  .arc-card:first-child { margin-top: 0; }
  .arc-card__head { height: calc(62 * var(--um)); gap: calc(12 * var(--um)); }
  .arc-card__icon { width: calc(60 * var(--um)); height: calc(60 * var(--um)); }
  .arc-card h3 { font-size: calc(23.2 * var(--um)); line-height: calc(31 * var(--um)); }
  .arc-card p { margin-top: calc(12 * var(--um)); font-size: calc(17.3 * var(--um)); line-height: calc(27 * var(--um)); }

  .arc-close {
    margin-top: calc(64 * var(--um));
    padding-inline: calc(45 * var(--um));
    font-size: calc(23.2 * var(--um));
    line-height: calc(34 * var(--um));
  }

  .arc-ctas { margin-top: calc(24 * var(--um)); gap: calc(16 * var(--um)); }
  .arc-cta { max-width: calc(335 * var(--um)); min-height: calc(57 * var(--um)); font-size: calc(17.4 * var(--um)); border-radius: calc(16 * var(--um)); }

  /* --- Section 6: the offer --- */
  .offer { padding: calc(55 * var(--um)) calc(16 * var(--um)); }

  .off-eyebrow { font-size: calc(12.5 * var(--um)); }
  .off-head h2 { margin-top: calc(16 * var(--um)); font-size: calc(33.2 * var(--um)); line-height: calc(48 * var(--um)); }
  .off-tagline { margin-top: calc(16 * var(--um)); font-size: calc(18.3 * var(--um)); line-height: calc(26 * var(--um)); }
  .off-sub { margin-top: calc(16 * var(--um)); font-size: calc(17.3 * var(--um)); line-height: calc(27 * var(--um)); }

  .offer-panel {
    margin-top: calc(41 * var(--um));
    padding: 0 0 calc(30 * var(--um));
    border-width: max(3px, calc(6 * var(--um)));
    border-radius: calc(24 * var(--um));
  }

  .offer-panel__glow { height: calc(305 * var(--um)); }

  .offer-panel__title {
    margin: calc(32 * var(--um)) calc(27 * var(--um)) 0;
    font-size: calc(23.2 * var(--um));
    line-height: calc(34 * var(--um));
    max-width: calc(180 * var(--um));
  }

  .offer-panel > .badge--offer {
    top: calc(19 * var(--um));
    right: calc(16 * var(--um));
    width: calc(94 * var(--um));
    height: calc(94 * var(--um));
  }

  .offer-panel__was {
    width: calc(80 * var(--um));
    margin: calc(17 * var(--um)) auto 0;
    padding: calc(4 * var(--um)) 0;
    border-radius: calc(12 * var(--um));
  }

  .offer-panel__was-price { font-size: calc(23.2 * var(--um)); }
  .offer-panel__strike { width: calc(79 * var(--um)); }

  .offer-panel__price { margin-top: 0; font-size: calc(66.4 * var(--um)); line-height: calc(80 * var(--um)); }
  .offer-panel__per { font-size: calc(13.4 * var(--um)); }
  .offer-panel__forever { margin-top: calc(6 * var(--um)); font-size: calc(11.5 * var(--um)); }

  .offer-benefits { margin: calc(20 * var(--um)) calc(15 * var(--um)) 0; }
  .offer-benefits--left { margin-top: calc(37 * var(--um)); }
  .offer-benefits--right { margin-top: calc(16 * var(--um)); }

  .offer-benefits li {
    margin-top: calc(16 * var(--um));
    gap: calc(12 * var(--um));
    font-size: calc(15.4 * var(--um));
    line-height: calc(24 * var(--um));
    align-items: flex-start;
  }

  .offer-benefits li:first-child { margin-top: 0; }
  .offer-benefits img { width: calc(24 * var(--um)); height: calc(24 * var(--um)); }

  .offer-panel__cta {
    margin: calc(30 * var(--um)) calc(26 * var(--um)) 0;
    min-height: calc(46 * var(--um));
    font-size: calc(15.8 * var(--um));
    border-radius: calc(16 * var(--um));
  }

  .offer-panel__note { display: none; }   /* the mobile design omits it */

  /* --- Section 7: roadmap --- */
  .roadmap { padding: calc(54 * var(--um)) calc(16 * var(--um)) calc(24 * var(--um)); }

  .rm-eyebrow { font-size: calc(12.5 * var(--um)); }
  .rm-head h2 { margin-top: calc(16 * var(--um)); font-size: calc(33.2 * var(--um)); line-height: calc(48 * var(--um)); }

  /* Timeline: rail on the left edge */
  .timeline { position: relative; margin-top: calc(60 * var(--um)); }

  .tl-line {
    display: block;
    position: absolute;
    left: calc(27 * var(--um));
    top: calc(80 * var(--um));
    bottom: calc(120 * var(--um));
    width: calc(3 * var(--um));
    background: linear-gradient(180deg,
      rgba(104, 107, 227, 0) 0%, #686BE3 6%,
      #686BE3 94%, rgba(104, 107, 227, 0) 100%);
    border-radius: 2px;
  }

  .tl-line img { display: none; }

  .tl-steps { margin-left: calc(50 * var(--um)); }

  .tl-step { margin: 0; padding: calc(28 * var(--um)) 0; }

  .tl-dot {
    display: block;
    position: absolute;
    left: calc(-35 * var(--um));
    top: calc(57 * var(--um));
    width: calc(26.4 * var(--um));
    height: calc(26.4 * var(--um));
  }

  .tl-date { font-size: calc(12.5 * var(--um)); line-height: calc(15 * var(--um)); }
  .tl-step h3 { margin-top: calc(8 * var(--um)); font-size: calc(23.2 * var(--um)); line-height: calc(30 * var(--um)); }
  .tl-step p { margin-top: calc(12 * var(--um)); font-size: calc(15.4 * var(--um)); line-height: calc(24 * var(--um)); }
  .tl-list { margin-top: calc(6 * var(--um)); padding-left: calc(22 * var(--um)); }
  .tl-list li { font-size: calc(15.4 * var(--um)); line-height: calc(24 * var(--um)); }
  .tl-strong { margin-top: calc(20 * var(--um)); }

  /* Guarantee: full card, blurred mark overhanging the top */
  .guarantee {
    position: relative;
    margin-top: calc(100 * var(--um));
    padding: calc(143 * var(--um)) calc(16 * var(--um)) calc(36 * var(--um));
    border-radius: calc(24 * var(--um));
  }

  .guarantee__mark {
    position: absolute;
    top: calc(-54 * var(--um));
    left: calc(77 * var(--um));
    width: calc(205 * var(--um));
    margin: 0;
  }

  .guarantee__txt .rm-eyebrow { font-size: calc(15.8 * var(--um)); text-align: left; }
  .guarantee__txt h3 { margin-top: calc(12 * var(--um)); font-size: calc(28.2 * var(--um)); line-height: calc(41 * var(--um)); }
  .guarantee__txt p:last-child { margin-top: calc(24 * var(--um)); font-size: calc(17.3 * var(--um)); line-height: calc(27 * var(--um)); }

  .guarantee__cta { min-height: calc(57 * var(--um)); font-size: calc(17.4 * var(--um)); border-radius: calc(16 * var(--um)); }
  .guarantee__cta--primary { margin-top: calc(40 * var(--um)); }
  .guarantee__cta--secondary { margin-top: calc(16 * var(--um)); }
  .guarantee__note { margin-top: calc(52 * var(--um)); font-size: calc(11.5 * var(--um)); line-height: calc(17 * var(--um)); }

  /* Newsletter: full-bleed purple */
  .newsletter {
    margin: calc(60 * var(--um)) calc(-16 * var(--um)) 0;
    padding: calc(40 * var(--um)) calc(30 * var(--um)) calc(26 * var(--um));
    border-radius: 0;
  }

  .nl-eyebrow { font-size: calc(14.1 * var(--um)); }
  .nl-title { margin-top: calc(16 * var(--um)); font-size: calc(28.2 * var(--um)); line-height: calc(41 * var(--um)); }
  .nl-points { margin-top: calc(16 * var(--um)); }
  .nl-points li { font-size: calc(15.4 * var(--um)); line-height: calc(24 * var(--um)); margin-top: calc(12 * var(--um)); }
  .nl-field { margin-top: calc(14 * var(--um)); height: calc(56 * var(--um)); border-radius: calc(16 * var(--um)); }
  .nl-field--name { margin-top: calc(40 * var(--um)); }
  .nl-submit { margin-top: calc(26 * var(--um)); height: calc(57 * var(--um)); border-radius: calc(16 * var(--um)); }
  .nl-legal { margin-top: calc(16 * var(--um)); font-size: calc(11.5 * var(--um)); line-height: calc(17 * var(--um)); }

  /* --- Section 8: founder note becomes one card --- */
  .founder {
    display: flex;
    flex-direction: column;
    margin: calc(40 * var(--um)) calc(16 * var(--um)) calc(20 * var(--um));
    padding: calc(24 * var(--um)) calc(16 * var(--um));
    background: linear-gradient(180deg, var(--cream-dark) 0%, var(--cream) 100%);
    border-radius: calc(24 * var(--um));
  }

  .fd-title {
    order: 1;
    width: calc(252 * var(--um));
    margin: 0 auto;
    font-size: calc(33.2 * var(--um));
    line-height: calc(48 * var(--um));
  }

  .fd-letter { order: 2; margin: calc(34 * var(--um)) 0 0; max-width: none; }
  .fd-quote { width: calc(51 * var(--um)); }
  .fd-lede { margin-top: calc(16 * var(--um)); font-size: calc(18.3 * var(--um)); line-height: calc(26 * var(--um)); }
  .fd-body p { margin-top: calc(24 * var(--um)); font-size: calc(17.3 * var(--um)); line-height: calc(27 * var(--um)); }
  .fd-signature {
    display: block;
    margin: calc(20 * var(--um)) calc(30 * var(--um)) 0 auto;
    width: calc(107 * var(--um));
  }

  .fd-photo {
    order: 3;
    width: calc(98 * var(--um));
    height: calc(98 * var(--um));
    margin: calc(60 * var(--um)) 0 0;
    max-width: none;
    border-radius: calc(16 * var(--um));
  }

  .fd-name {
    order: 4;
    margin: calc(-87 * var(--um)) 0 0 calc(121 * var(--um));
    text-align: left;
    font-size: calc(18.3 * var(--um));
    line-height: calc(26 * var(--um));
  }

  .fd-role {
    order: 5;
    margin: calc(4 * var(--um)) 0 0 calc(121 * var(--um));
    text-align: left;
    font-size: calc(11.5 * var(--um));
    line-height: calc(17 * var(--um));
  }

  /* --- Section 9: comparison table scrolls sideways --- */
  .compare { padding: calc(47 * var(--um)) 0; }

  .cmp-panel { background: none; border-radius: 0; padding: 0; }

  .cmp-head { padding-inline: calc(10 * var(--um)); }
  .cmp-eyebrow { font-size: calc(12.5 * var(--um)); }
  .cmp-head h2 { margin-top: calc(16 * var(--um)); font-size: calc(33.2 * var(--um)); line-height: calc(48 * var(--um)); }
  .cmp-sub { margin-top: calc(16 * var(--um)); font-size: calc(17.3 * var(--um)); line-height: calc(27 * var(--um)); }

  .cmp-scroll { margin: calc(53 * var(--um)) 0 0 calc(16 * var(--um)); padding-bottom: 8px; }

  .cmp-table { min-width: calc(846 * var(--um)); }
  .cmp-table th:first-child { width: calc(319 * var(--um)); }
  .cmp-table thead tr { height: calc(61 * var(--um)); }
  .cmp-table tbody tr { height: calc(50 * var(--um)); }
  .cmp-table tbody th {
    padding: calc(3 * var(--um)) calc(10 * var(--um)) calc(3 * var(--um)) calc(16 * var(--um));
    font-size: calc(14.9 * var(--um));
    line-height: calc(22 * var(--um));
    white-space: normal;
  }
  .cmp-table thead th { font-size: calc(14.1 * var(--um)); }
  .cmp-table td { font-size: calc(14.1 * var(--um)); }
  .cmp-table td img, .cmp-table th img { width: calc(24 * var(--um)); height: calc(24 * var(--um)); }
  .cmp-logo img:first-child { width: calc(21 * var(--um)); height: auto; }
  .cmp-logo img:last-child { width: calc(72 * var(--um)); height: auto; }

  /* --- Section 10: FAQ --- */
  .faq { padding: calc(35 * var(--um)) calc(16 * var(--um)) calc(48 * var(--um)); }

  .faq-eyebrow { font-size: calc(15.8 * var(--um)); }
  .faq-head h2 {
    width: calc(310 * var(--um));
    margin: calc(16 * var(--um)) auto 0;
    font-size: calc(33.2 * var(--um));
    line-height: calc(48 * var(--um));
  }

  .faq-list { margin-top: calc(58 * var(--um)); gap: calc(12 * var(--um)); }
  .faq-item { border-radius: calc(24 * var(--um)); }
  .faq-q {
    min-height: calc(66 * var(--um));
    padding: calc(15 * var(--um)) calc(20 * var(--um));
    font-size: calc(15.8 * var(--um));
    line-height: calc(21 * var(--um));
  }
  .faq-icon { width: calc(24 * var(--um)); height: calc(24 * var(--um)); }
  .faq-a__inner p {
    padding: 0 calc(20 * var(--um)) calc(18 * var(--um));
    font-size: calc(15.4 * var(--um));
    line-height: calc(24 * var(--um));
  }

  /* --- Section 11: final CTA, photo dome on top --- */
  .final-cta { padding: calc(63 * var(--um)) 0 0; }

  .fc-panel { position: relative; border-radius: 0; padding: 0 0 calc(70 * var(--um)); }

  .fc-photo { display: none; }            /* desktop composite */

  .fc-panel > .fc-photo-m {
    display: block;
    position: absolute;
    top: calc(-28 * var(--um));
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
  }

  .fc-panel > *:not(.fc-photo):not(.fc-photo-m) { position: relative; }

  .fc-eyebrow {
    margin: calc(253 * var(--um)) 0 0;
    text-align: center;
    font-size: calc(12.5 * var(--um));
  }

  .fc-panel h2 {
    margin-top: calc(12 * var(--um));
    padding-inline: calc(18 * var(--um));
    text-align: center;
    font-size: calc(28.2 * var(--um));
    line-height: calc(41 * var(--um));
  }

  .fc-points { margin: calc(34 * var(--um)) calc(25 * var(--um)) 0; }
  .fc-points li {
    margin-top: calc(16 * var(--um));
    gap: calc(12 * var(--um));
    align-items: flex-start;
    font-size: calc(17.3 * var(--um));
    line-height: calc(24 * var(--um));
  }
  .fc-points li:first-child { margin-top: 0; }
  .fc-points img { width: calc(24 * var(--um)); height: calc(24 * var(--um)); }

  .fc-cta {
    margin: calc(16 * var(--um)) calc(16 * var(--um)) 0;
    min-height: calc(57 * var(--um));
    font-size: calc(17.4 * var(--um));
    border-radius: calc(16 * var(--um));
  }

  .fc-cta--primary { margin-top: calc(34 * var(--um)); }

  .fc-note {
    margin: calc(34 * var(--um)) auto 0;
    padding-inline: calc(40 * var(--um));
    max-width: calc(360 * var(--um));
    text-align: center;
    font-size: calc(11.5 * var(--um));
    line-height: calc(17 * var(--um));
  }

  /* --- Section 12: footer, centred stack --- */
  .site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: calc(11 * var(--um)) calc(16 * var(--um)) calc(18 * var(--um));
  }

  .ft-logo { order: 1; width: calc(88 * var(--um)); margin: 0; }
  .ft-tag { order: 2; margin: calc(9 * var(--um)) 0 0; max-width: calc(250 * var(--um)); font-size: calc(14.1 * var(--um)); line-height: calc(24 * var(--um)); }
  .ft-contact { order: 3; margin-top: calc(32 * var(--um)); }
  .ft-contact__h { font-size: calc(15.8 * var(--um)); }
  .ft-contact a { margin-top: calc(14 * var(--um)); font-size: calc(15.4 * var(--um)); }
  .ft-legal { order: 4; margin-top: calc(59 * var(--um)); gap: calc(48 * var(--um)); font-size: calc(11.5 * var(--um)); }
  .ft-copy { order: 5; margin-top: calc(32 * var(--um)); font-size: calc(11.5 * var(--um)); }
}

/* 7. Desktop breakpoint: exact reproduction of the Figma frame
   --------------------------------------------------------------------------
   The Figma hero frame is 1728 x 1117. One design pixel = --u = 100vw/1728,
   so the whole hero scales as one proportional canvas. Every position and
   size below is the design's own value.

   Font sizes are the design's px multiplied by 0.83: Plus Jakarta Sans sets
   roughly 17% wider than the design's Apfel Grotezk, so the reduced sizes
   make each text block occupy the same box as the design. Line heights stay
   at the design's exact px values, so vertical rhythm is untouched. */
@media (min-width: 860px) {

  /* One design pixel, shared by the header and the hero canvas. */
  :root { --u: calc(100vw / 1728); }

  /* --- Site header: Navbar frame, 1728 x 80 --- */
  .site-nav {
    position: fixed;
    height: calc(80 * var(--u));
    padding: 0;
    -webkit-backdrop-filter: blur(calc(5 * var(--u)));
    backdrop-filter: blur(calc(5 * var(--u)));
  }

  /* arlos-logo: x29 y24, 163 x 32 (mark starts 8px in) */
  .site-nav__logo {
    position: absolute;
    left: calc(37 * var(--u));
    top: calc(24 * var(--u));
    height: calc(32 * var(--u));
    gap: calc(9 * var(--u));
  }

  .site-nav__mark { width: calc(30.15 * var(--u)); height: auto; }
  .site-nav__wordmark { width: calc(109.45 * var(--u)); height: auto; }

  /* info pill: x651.5 y12, 424 x 56, r16, pink gradient */
  .site-nav__banner {
    position: absolute;
    left: calc(651.5 * var(--u));
    top: calc(12 * var(--u));
    width: calc(424 * var(--u));
    height: calc(56 * var(--u));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: calc(20 * var(--u));
    border-radius: calc(16 * var(--u));
    background: linear-gradient(180deg, #E273F4 0%, #CB5DDD 100%);
    color: #fff;
    font-size: calc(14.1 * var(--u));
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
  }

  /* social icons: five 24px icons at y28, x1207 to x1399, 48px apart */
  .site-nav__social {
    position: absolute;
    left: calc(1207 * var(--u));
    top: calc(28 * var(--u));
    display: flex;
    gap: calc(24 * var(--u));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-nav__social a {
    display: block;
    color: #fff;
  }

  .site-nav__social svg {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }

  /* Button: x1454 y20.5, 242 x 38, r12, green outline */
  .site-nav__cta {
    position: absolute;
    left: calc(1454 * var(--u));
    top: calc(20.5 * var(--u));
    width: calc(242 * var(--u));
    height: calc(38 * var(--u));
    padding: 0;
    border-width: max(1px, calc(1.5 * var(--u)));
    border-radius: calc(12 * var(--u));
    font-size: calc(14.1 * var(--u));
  }

  .hero {
    height: calc(1117 * var(--u));
    padding: 0;
  }

  .hero__media { display: none; }

  /* Background: arc vector + blurred, arc-masked photo (design structure).
     The photo's mask is the same arc SVG, whose gradient fill fades to
     transparent toward the bottom left; that fade is what blends the photo
     into the purple, exactly as in the design. */
  .hero__bg {
    display: block;
    position: absolute;
    inset: 0;
  }

  .hero__blob {
    position: absolute;
    left: calc(85.4 * var(--u));
    top: calc(112.4 * var(--u));
    width: calc(2810.6 * var(--u));
    height: calc(2281.6 * var(--u));
    max-width: none;
  }

  .hero__photo {
    position: absolute;
    left: calc(318.1 * var(--u));
    top: calc(190.2 * var(--u));
    width: calc(1766.9 * var(--u));
    height: calc(963.7 * var(--u));
    max-width: none;
  }

  /* The content wrapper dissolves; children position against the hero. */
  .hero__content { display: contents; }

  /* header-1: x120 y150, w871; line height tightened 30% from the design's 110 */
  .hero__title {
    position: absolute;
    left: calc(120 * var(--u));
    top: calc(150 * var(--u));
    width: calc(871 * var(--u));
    margin: 0;
    font-size: calc(79 * var(--u));
    line-height: calc(86 * var(--u));
    font-weight: 600;
    letter-spacing: 0;
  }

  /* Intro text: x120, moved up slightly from the design's y402 */
  .hero__lead {
    position: absolute;
    left: calc(120 * var(--u));
    top: calc(380 * var(--u));
    width: calc(603 * var(--u));
    max-width: none;
    margin: 0;
    font-size: calc(19.4 * var(--u));
    line-height: calc(30.8 * var(--u));
    color: #fff;
  }

  /* Pricing-card: x120 y616, 580 x 454, r24, 2px orange border */
  .offer-card {
    position: absolute;
    left: calc(120 * var(--u));
    top: calc(616 * var(--u));
    width: calc(580 * var(--u));
    height: calc(454 * var(--u));
    margin: 0;
    padding: 0;
    border: max(1px, calc(2 * var(--u))) solid var(--orange);
    border-radius: calc(24 * var(--u));
    background: linear-gradient(159.17deg, var(--cream) 29.973%, var(--card-pink) 87.953%);
  }

  /* The header wrapper dissolves; title and badge position against the card. */
  .offer-card__header { display: contents; }

  /* Promo title: x32 y29, 48px/57.6px, one line */
  .offer-card__title {
    position: absolute;
    left: calc(32 * var(--u));
    top: calc(29 * var(--u));
    font-size: calc(39.8 * var(--u));
    line-height: calc(57.6 * var(--u));
    font-weight: 500;
    white-space: nowrap;
  }

  /* Promo announcement: x32 y93, 28px/33.6px */
  .offer-card__eyebrow {
    position: absolute;
    left: calc(32 * var(--u));
    top: calc(93 * var(--u));
    margin: 0;
    font-size: calc(23.2 * var(--u));
    line-height: calc(33.6 * var(--u));
    font-weight: 500;
  }

  /* Promo details: x32 y166, w476, 22px/26.4px */
  .offer-card__body {
    position: absolute;
    left: calc(32 * var(--u));
    top: calc(166 * var(--u));
    width: calc(476 * var(--u));
    margin: 0;
    font-size: calc(18.3 * var(--u));
    line-height: calc(26.4 * var(--u));
  }

  .offer-card__body p + p { margin-top: calc(26.4 * var(--u)); }

  /* Button: x32 y366, 516 x 56, r16, 21px */
  .offer-card .btn {
    position: absolute;
    left: calc(32 * var(--u));
    top: calc(366 * var(--u));
    width: calc(516 * var(--u));
    height: calc(56 * var(--u));
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: calc(16 * var(--u));
    font-size: calc(17.4 * var(--u));
    font-weight: 500;
  }

  /* Badge: x437 y28, 112 x 112 */
  .badge {
    position: absolute;
    left: calc(437 * var(--u));
    top: calc(28 * var(--u));
    width: calc(112 * var(--u));
    height: calc(112 * var(--u));
  }

  .badge__first { font-size: calc(14.1 * var(--u)); }
  .badge__num { font-size: calc(37.2 * var(--u)); }

  /* --- Section 2: frame "2", 1728 x 1357 --- */
  .experiences {
    position: relative;
    height: calc(1357 * var(--u));
    padding: 0;
  }

  /* head: x413 y76, w907, centred; 80px/80px + 24 gap + 18px/27px */
  .exp-head {
    position: absolute;
    left: calc(413 * var(--u));
    top: calc(76 * var(--u));
    width: calc(907 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(24 * var(--u));
  }

  .exp-head h2 {
    font-size: calc(66.4 * var(--u));   /* 80px design, PJS-calibrated */
    line-height: calc(80 * var(--u));
    font-weight: 600;
    margin: 0;
  }

  .exp-head p {
    margin: 0;
    width: calc(531 * var(--u));
    max-width: none;
    font-size: calc(17.3 * var(--u));   /* 18px Inter, PJS-calibrated */
    line-height: calc(27 * var(--u));
  }

  /* panel: x62 y401, 1609 x 880, r24 */
  .exp-panel {
    position: absolute;
    left: calc(62 * var(--u));
    top: calc(401 * var(--u));
    width: calc(1609 * var(--u));
    height: calc(880 * var(--u));
    margin: 0;
    border-radius: calc(24 * var(--u));
  }

  /* tabs: full width, 71 tall */
  .exp-tabs {
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(71 * var(--u));
  }

  .exp-tab {
    padding: 0;
    font-size: calc(14.1 * var(--u));   /* 17px design, PJS-calibrated */
  }

  /* slide stage: cropped exports placed at x690 y71, 919 x 809.
     Left edges fade out so the crop seam stays invisible. */
  .exp-stage {
    position: absolute;
    left: calc(690 * var(--u));
    top: calc(71 * var(--u));
    width: calc(919 * var(--u));
    height: calc(809 * var(--u));
    aspect-ratio: auto;
  }

  .exp-slide-img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(40 * var(--u)));
    mask-image: linear-gradient(90deg, transparent 0, #000 calc(40 * var(--u)));
  }

  /* info card: x122 y162, 560 wide, r24, soft cream gradient.
     Height is a minimum so longer slide copy can breathe. */
  .exp-card {
    position: absolute;
    left: calc(122 * var(--u));
    top: calc(162 * var(--u));
    width: calc(560 * var(--u));
    min-height: calc(305 * var(--u));
    padding: calc(40 * var(--u));
    border-radius: calc(24 * var(--u));
    background: linear-gradient(160deg, #FCF9F6 20%, #F0E8E3 100%);
  }

  .exp-card h3 {
    font-size: calc(39.8 * var(--u));   /* 48px design, PJS-calibrated */
    line-height: calc(57.6 * var(--u));
    font-weight: 500;
    margin: 0;
  }

  .exp-card p {
    margin-top: calc(24 * var(--u));
    font-size: calc(17.3 * var(--u));
    line-height: calc(27 * var(--u));
  }

  /* slide controls: x260 y672, 284 x 56 */
  .exp-controls {
    position: absolute;
    left: calc(260 * var(--u));
    top: calc(672 * var(--u));
    width: calc(284 * var(--u));
    height: calc(56 * var(--u));
    padding: 0;
    gap: 0;
    justify-content: space-between;
  }

  .exp-arrow {
    width: calc(56 * var(--u));
    height: calc(56 * var(--u));
    border-radius: calc(16 * var(--u));
  }

  .exp-arrow svg {
    width: calc(20 * var(--u));
    height: calc(20 * var(--u));
  }

  .exp-dots { gap: calc(6 * var(--u)); }

  .exp-dot {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
  }

  /* --- Section 3: frame "3", 1728 x 997 --- */
  .principles {
    position: relative;
    height: calc(997 * var(--u));
    padding: 0;
  }

  /* head: x172 y80, w586; eyebrow 19px + 24 gap + 80px headline */
  .pri-head {
    position: absolute;
    left: calc(172 * var(--u));
    top: calc(80 * var(--u));
    width: calc(603 * var(--u));
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--u));
  }

  .pri-eyebrow {
    margin: 0;
    font-size: calc(15.8 * var(--u));   /* 19px design, PJS-calibrated */
    line-height: 1;
  }

  .pri-head h2 {
    margin: 0;
    font-size: calc(66.4 * var(--u));   /* 80px design, PJS-calibrated */
    line-height: calc(80 * var(--u));
  }

  /* img: x57 y363, 796.3 x 555, r42; inner image 1054 x 575 at -201.4,
     with the design's subtle blur baked in */
  .pri-photo {
    position: absolute;
    left: calc(57 * var(--u));
    top: calc(363 * var(--u));
    width: calc(796.3 * var(--u));
    height: calc(555 * var(--u));
    margin: 0;
    border-radius: calc(42 * var(--u));
    overflow: hidden;
  }

  .pri-photo img {
    position: absolute;
    left: calc(-201.4 * var(--u));
    top: 0;
    width: calc(1054.2 * var(--u));
    height: calc(575 * var(--u));
    max-width: none;
    object-fit: cover;
  }

  .pri-list { margin: 0; }

  /* tut blocks: x1059, w477, tops 213 / 443 / 673, py 10 */
  .pri-item {
    position: absolute;
    left: calc(1059 * var(--u));
    width: calc(477 * var(--u));
    margin: 0;
    padding: calc(10 * var(--u)) 0;
  }

  .pri-item--1 { top: calc(213 * var(--u)); }
  .pri-item--2 { top: calc(443 * var(--u)); }
  .pri-item--3 { top: calc(673 * var(--u)); }

  .pri-item h3 {
    font-size: calc(28.2 * var(--u));   /* 34px design, PJS-calibrated */
    line-height: calc(40.8 * var(--u));
    font-weight: 600;
  }

  .pri-item p {
    margin-top: calc(16 * var(--u));
    font-size: calc(17.3 * var(--u));
    line-height: calc(27 * var(--u));
  }

  /* Ghost numerals, positioned from the design's frame coordinates
     (expressed relative to each item block) */
  .pri-num {
    opacity: 1;
    z-index: -1;   /* keep the numerals behind the text */
    height: auto;
  }

  .pri-item--1 .pri-num {
    left: calc(-64 * var(--u));
    right: auto;
    top: calc(22 * var(--u));
    width: calc(71.5 * var(--u));
  }

  .pri-item--2 .pri-num {
    left: calc(-82 * var(--u));
    right: auto;
    top: calc(20 * var(--u));
    width: calc(107.3 * var(--u));
  }

  .pri-item--3 .pri-num {
    left: calc(-86 * var(--u));
    right: auto;
    top: calc(20 * var(--u));
    width: calc(116 * var(--u));
  }

  /* --- Section 4: frame "4", 1728 x 688 --- */
  .worries {
    position: relative;
    height: calc(688 * var(--u));
    padding: 0;
  }

  /* head: centred, top 56, w573; 19px + 60px + 18px, gap 24 */
  .wor-head {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(56 * var(--u));
    width: calc(573 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--u));
  }

  .wor-eyebrow {
    margin: 0;
    font-size: calc(15.8 * var(--u));   /* 19px design, PJS-calibrated */
    line-height: 1;
  }

  .wor-head h2 {
    margin: 0;
    font-size: calc(49.8 * var(--u));   /* 60px design, PJS-calibrated */
    line-height: calc(60 * var(--u));
  }

  .wor-sub {
    margin: 0;
    max-width: none;
    font-size: calc(17.3 * var(--u));
    line-height: calc(27 * var(--u));
  }

  /* quote cards: 421 x 255 at y321, r32, lefts 209 / 654 / 1099 */
  .wor-quotes { margin: 0; }

  .quote-card {
    position: absolute;
    top: calc(321 * var(--u));
    width: calc(421 * var(--u));
    height: calc(255 * var(--u));
    margin: 0;
    padding: 0;
    border-radius: calc(32 * var(--u));
  }

  .quote-card:nth-child(1) { left: calc(209 * var(--u)); }
  .quote-card:nth-child(2) { left: calc(654 * var(--u)); }
  .quote-card:nth-child(3) { left: calc(1099 * var(--u)); }

  .quote-card__tag {
    position: absolute;
    left: calc(32 * var(--u));
    top: calc(32 * var(--u));
    margin: 0;
    font-size: calc(14.1 * var(--u));   /* 17px design, PJS-calibrated */
    line-height: 1;
  }

  .quote-card__text {
    position: absolute;
    left: calc(32 * var(--u));
    top: calc(62 * var(--u));
    width: calc(361 * var(--u));
    margin: 0;
    font-size: calc(33.2 * var(--u));   /* 40px design, PJS-calibrated */
    line-height: calc(48 * var(--u));
  }

  .quote-card__name {
    position: absolute;
    left: calc(32 * var(--u));
    top: calc(180 * var(--u));
    margin: 0;
    font-size: calc(15.8 * var(--u));   /* 19px design, PJS-calibrated */
    line-height: 1;
  }

  .quote-card__meta {
    position: absolute;
    left: calc(32 * var(--u));
    top: calc(211 * var(--u));
    margin: 0;
    font-size: calc(15.4 * var(--u));   /* 16px Inter, PJS-calibrated */
    line-height: calc(23 * var(--u));
  }

  .quote-card__mark {
    left: calc(363 * var(--u));
    right: auto;
    top: calc(9 * var(--u));
    font-size: calc(79.7 * var(--u));   /* 96px design, PJS-calibrated */
  }

  /* --- Section 5: frame "5", 1728 x 1206 --- */
  .arc {
    position: relative;
    height: calc(1206 * var(--u));
    padding: 0;
  }

  /* panel: x65 y161, 1608 x 914, r40, purple, green dome behind */
  .arc-panel {
    position: absolute;
    left: calc(65 * var(--u));
    top: calc(161 * var(--u));
    width: calc(1608 * var(--u));
    height: calc(914 * var(--u));
    padding: 0;
    border-radius: calc(40 * var(--u));
  }

  .arc-dome {
    left: calc(-60 * var(--u));
    top: calc(-99 * var(--u));
    transform: none;
    width: calc(1728 * var(--u));
    height: calc(1013 * var(--u));
    opacity: 1;
  }

  .arc-eyebrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(11 * var(--u));
    margin: 0;
    font-size: calc(15.8 * var(--u));   /* 19px design, PJS-calibrated */
    line-height: calc(19 * var(--u));
    white-space: nowrap;
  }

  .arc-panel h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(54 * var(--u));
    width: calc(992 * var(--u));
    margin: 0;
    font-size: calc(49.8 * var(--u));   /* 60px design, PJS-calibrated */
    line-height: calc(60 * var(--u));
  }

  .arc-sub {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(198 * var(--u));
    width: calc(536 * var(--u));
    margin: 0;
    max-width: none;
    font-size: calc(17.3 * var(--u));
    line-height: calc(27 * var(--u));
  }

  /* cards: x136 y339, 1336 wide, 3 x 429.3 with 24 gaps, each 313 tall */
  .arc-cards {
    position: absolute;
    left: calc(136 * var(--u));
    top: calc(339 * var(--u));
    width: calc(1336 * var(--u));
    margin: 0;
    display: flex;
    gap: calc(24 * var(--u));
  }

  .arc-card {
    flex: 1;
    height: calc(313 * var(--u));
    margin: 0;
    padding: calc(32 * var(--u));
    border-radius: calc(24 * var(--u));
  }

  .arc-card__head {
    height: calc(90 * var(--u));
    gap: calc(12 * var(--u));
  }

  .arc-card__icon {
    width: calc(90 * var(--u));
    height: calc(90 * var(--u));
  }

  .arc-card h3 {
    font-size: calc(28.2 * var(--u));   /* 34px design, PJS-calibrated */
    line-height: calc(37.4 * var(--u));
  }

  .arc-card p {
    margin-top: calc(24 * var(--u));
    font-size: calc(17.3 * var(--u));
    line-height: calc(27 * var(--u));
  }

  /* closing line: centred, top 716, 34px */
  .arc-close {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(716 * var(--u));
    margin: 0;
    font-size: calc(28.2 * var(--u));
    line-height: calc(41 * var(--u));
    white-space: nowrap;
  }

  /* CTAs: y797, 57 tall; filled at x525 (266 wide), outline at x816 (268) */
  .arc-ctas {
    position: static;
    margin: 0;
  }

  .arc-cta {
    position: absolute;
    top: calc(797 * var(--u));
    height: calc(57 * var(--u));
    min-height: 0;
    margin: 0;
    padding: 0;
    max-width: none;
    width: auto;
    border-radius: calc(16 * var(--u));
    font-size: calc(17.4 * var(--u));   /* 21px design, PJS-calibrated */
  }

  .arc-cta--primary {
    left: calc(525 * var(--u));
    width: calc(266 * var(--u));
  }

  .arc-cta--secondary {
    left: calc(816 * var(--u));
    width: calc(268 * var(--u));
    border-width: max(1px, calc(2 * var(--u)));
  }

  /* --- Section 6: frame "6", 1728 x 1288 --- */
  .offer {
    position: relative;
    height: calc(1288 * var(--u));
    padding: 0;
  }

  /* head: centred, top 70; 19px + 80px + 34px + 18px, gaps 24 */
  .off-head {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(70 * var(--u));
    width: calc(1268 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(24 * var(--u));
  }

  .off-eyebrow {
    margin: 0;
    font-size: calc(15.8 * var(--u));
    line-height: 1;
  }

  .off-head h2 {
    margin: 0;
    font-size: calc(66.4 * var(--u));   /* 80px design, PJS-calibrated */
    line-height: calc(80 * var(--u));
  }

  .off-tagline {
    margin: 0;
    font-size: calc(28.2 * var(--u));   /* 34px design, PJS-calibrated */
    line-height: calc(41 * var(--u));
  }

  .off-sub {
    margin: 0;
    width: calc(790 * var(--u));
    max-width: none;
    font-size: calc(17.3 * var(--u));
    line-height: calc(27 * var(--u));
  }

  /* Pricing card: x370 y427, 988 x 720, r24, 6px purple border */
  .offer-panel {
    position: absolute;
    left: calc(370 * var(--u));
    top: calc(427 * var(--u));
    width: calc(988 * var(--u));
    height: calc(720 * var(--u));
    margin: 0;
    max-width: none;
    padding: 0;
    border-width: max(2px, calc(6 * var(--u)));
    border-radius: calc(24 * var(--u));
  }

  .offer-panel__glow {
    height: calc(317 * var(--u));
    background: linear-gradient(180deg, var(--cream) 0%, var(--card-pink) 102%);
  }

  .offer-panel .offer-panel__title {
    position: absolute;
    left: calc(32 * var(--u));
    top: calc(30 * var(--u));
    margin: 0;
    font-size: calc(33.2 * var(--u));   /* 40px design, PJS-calibrated */
    line-height: 1;
  }

  /* Struck-through 95: pill 142 x 46 centred at y81 */
  .offer-panel .offer-panel__was {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(81 * var(--u));
    width: calc(142 * var(--u));
    height: calc(46 * var(--u));
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(16 * var(--u));
  }

  .offer-panel__was-price {
    font-size: calc(28.2 * var(--u));   /* 34px design, PJS-calibrated */
  }

  .offer-panel__strike {
    width: calc(123 * var(--u));
  }

  /* €19 /month: baseline row centred at y157 */
  .offer-panel .offer-panel__price {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(150 * var(--u));
    margin: 0;
    display: flex;
    align-items: baseline;
    font-size: calc(79.7 * var(--u));   /* 96px design, PJS-calibrated */
    line-height: calc(76 * var(--u));
    white-space: nowrap;
  }

  .offer-panel__per {
    font-size: calc(34.6 * var(--u));   /* 36px Inter, PJS-calibrated */
    margin-left: calc(8 * var(--u));
  }

  .offer-panel .offer-panel__forever {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(231 * var(--u));
    margin: 0;
    font-size: calc(15.4 * var(--u));
    line-height: calc(24 * var(--u));
    white-space: nowrap;
  }

  /* Benefit columns: x79 and x524, y371, w385, rows every 40 */
  .offer-panel .offer-benefits {
    position: absolute;
    top: calc(371 * var(--u));
    width: calc(385 * var(--u));
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
  }

  .offer-benefits--left { left: calc(79 * var(--u)); }
  .offer-benefits--right { left: calc(524 * var(--u)); }

  .offer-benefits li {
    margin: 0;
    height: calc(24 * var(--u));
    gap: calc(12 * var(--u));
    font-size: calc(15.4 * var(--u));   /* 16px Inter, PJS-calibrated */
    line-height: calc(24 * var(--u));
    white-space: nowrap;
  }

  .offer-benefits img {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }

  /* CTA: x48 y608, 892 x 46 */
  .offer-panel .offer-panel__cta {
    position: absolute;
    left: calc(48 * var(--u));
    top: calc(608 * var(--u));
    width: calc(892 * var(--u));
    height: calc(46 * var(--u));
    min-height: 0;
    margin: 0;
    border-radius: calc(16 * var(--u));
    font-size: calc(15.8 * var(--u));   /* 19px design, PJS-calibrated */
  }

  .offer-panel .offer-panel__note {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(668 * var(--u));
    width: calc(685 * var(--u));
    margin: 0;
    font-size: calc(13.4 * var(--u));   /* 14px Inter, PJS-calibrated */
    line-height: calc(20 * var(--u));
  }

  /* badge: x844 y30 (border-inset), 120 x 120 */
  .offer-panel > .badge--offer {
    left: calc(838 * var(--u));
    top: calc(24 * var(--u));
    right: auto;
    width: calc(120 * var(--u));
    height: calc(120 * var(--u));
  }

  .badge--offer .badge__first { font-size: calc(15.1 * var(--u)); }
  .badge--offer .badge__num { font-size: calc(39.9 * var(--u)); }

  /* --- Section 7: frame "7", 1728 x 2146 --- */
  .roadmap {
    position: relative;
    height: calc(2146 * var(--u));
    padding: 0;
  }

  /* head: centred, top 90; eyebrow + 60px headline */
  .rm-head {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(90 * var(--u));
    width: calc(911 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(24 * var(--u));
  }

  .rm-eyebrow {
    margin: 0;
    font-size: calc(15.8 * var(--u));
    line-height: 1;
  }

  .rm-head h2 {
    margin: 0;
    font-size: calc(49.8 * var(--u));   /* 60px design, PJS-calibrated */
    line-height: calc(60 * var(--u));
  }

  /* guarantee: x171 y537, 511 x 894, r24 */
  .guarantee {
    position: absolute;
    left: calc(171 * var(--u));
    top: calc(537 * var(--u));
    width: calc(511 * var(--u));
    height: calc(894 * var(--u));
    margin: 0;
    padding: 0;
    border-radius: calc(24 * var(--u));
  }

  /* the blurred ARLOS mark: x116 y-76, 278 x 237 */
  .guarantee .guarantee__mark {
    position: absolute;
    left: calc(116 * var(--u));
    top: calc(-76 * var(--u));
    width: calc(278 * var(--u));
    margin: 0;
  }

  /* step-txt: x23 y204, w465, inner padding 24 */
  .guarantee__txt {
    position: absolute;
    left: calc(47 * var(--u));
    top: calc(228 * var(--u));
    width: calc(417 * var(--u));
  }

  .guarantee__txt .rm-eyebrow { text-align: left; }

  .guarantee__txt h3 {
    margin-top: calc(12 * var(--u));
    font-size: calc(39.8 * var(--u));   /* 48px design, PJS-calibrated */
    line-height: calc(48 * var(--u));
  }

  .guarantee__txt p:last-child {
    margin-top: calc(24 * var(--u));
    font-size: calc(17.3 * var(--u));
    line-height: calc(27 * var(--u));
  }

  /* buttons: x47, 422 x 57; filled y598, outline y679; note y760 */
  .guarantee .guarantee__cta {
    position: absolute;
    left: calc(47 * var(--u));
    width: calc(422 * var(--u));
    height: calc(57 * var(--u));
    min-height: 0;
    margin: 0;
    border-radius: calc(16 * var(--u));
    font-size: calc(17.4 * var(--u));
  }

  .guarantee__cta--primary { top: calc(598 * var(--u)); }

  .guarantee__cta--secondary {
    top: calc(679 * var(--u));
    border-width: max(1px, calc(2 * var(--u)));
  }

  .guarantee .guarantee__note {
    position: absolute;
    left: calc(51 * var(--u));
    top: calc(760 * var(--u));
    width: calc(415 * var(--u));
    margin: 0;
    font-size: calc(13.4 * var(--u));
    line-height: calc(20 * var(--u));
  }

  /* timeline: line x865 centre, y283, h1323; steps x928 w558 */
  .timeline {
    position: static;
    margin: 0;
  }

  .tl-line {
    display: block;
    position: absolute;
    left: calc(865 * var(--u));
    top: calc(283 * var(--u));
    width: 0;
    height: calc(1323 * var(--u));
  }

  .tl-line img {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(1323 * var(--u));
    height: calc(23.7 * var(--u));
    max-width: none;
    transform-origin: 0 0;
    transform: rotate(-90deg) translateX(-100%) translateY(-50%);
  }

  .tl-steps { position: static; }

  .tl-step {
    position: absolute;
    left: calc(928 * var(--u));
    width: calc(558 * var(--u));
    margin: 0;
    padding: calc(32 * var(--u)) calc(24 * var(--u));
  }

  .tl-step:nth-child(1) { top: calc(340 * var(--u)); }
  .tl-step:nth-child(2) { top: calc(537 * var(--u)); }
  .tl-step:nth-child(3) { top: calc(758 * var(--u)); }
  .tl-step:nth-child(4) { top: calc(979 * var(--u)); }
  .tl-step:nth-child(5) { top: calc(1224 * var(--u)); }

  /* dots: 26px at x852, visually step top + 68 */
  .tl-dot {
    display: block;
    position: absolute;
    left: calc(-76 * var(--u));
    top: calc(68 * var(--u));
    width: calc(26 * var(--u));
    height: calc(26 * var(--u));
  }

  .tl-date {
    margin: 0;
    font-size: calc(15.8 * var(--u));   /* 19px design, PJS-calibrated */
    line-height: calc(19 * var(--u));
  }

  .tl-step h3 {
    margin-top: calc(4 * var(--u));
    font-size: calc(23.2 * var(--u));   /* 28px design, PJS-calibrated */
    line-height: calc(33.6 * var(--u));
  }

  .tl-step p {
    margin-top: calc(16 * var(--u));
    font-size: calc(15.4 * var(--u));
    line-height: calc(24 * var(--u));
  }

  .tl-list {
    margin: calc(5 * var(--u)) 0 0;
    padding-left: calc(24 * var(--u));
  }

  .tl-list li {
    margin-top: calc(2 * var(--u));
    font-size: calc(15.4 * var(--u));
    line-height: calc(24 * var(--u));
  }

  .tl-strong {
    margin-top: calc(24 * var(--u));
  }

  /* newsletter: x173 y1728, 1383 x 294, r24 */
  .newsletter {
    position: absolute;
    left: calc(173 * var(--u));
    top: calc(1728 * var(--u));
    width: calc(1383 * var(--u));
    height: calc(294 * var(--u));
    margin: 0;
    padding: 0;
    border-radius: calc(24 * var(--u));
  }

  /* bg vector: x242 y-47, 1582.5 x 1257.4, clipped by the panel */
  .newsletter .nl-bg {
    left: calc(242 * var(--u));
    right: auto;
    top: calc(-47 * var(--u));
    width: calc(1582.5 * var(--u));
    height: calc(1257.4 * var(--u));
  }

  .newsletter .nl-eyebrow {
    position: absolute;
    left: calc(40 * var(--u));
    top: calc(32 * var(--u));
    margin: 0;
    font-size: calc(14.1 * var(--u));   /* 17px design, PJS-calibrated */
    line-height: 1;
  }

  .newsletter .nl-title {
    position: absolute;
    left: calc(40 * var(--u));
    top: calc(61 * var(--u));
    width: calc(504 * var(--u));
    margin: 0;
    font-size: calc(33.2 * var(--u));   /* 40px design, PJS-calibrated */
    line-height: calc(48 * var(--u));
  }

  .newsletter .nl-points {
    position: absolute;
    top: calc(192 * var(--u));
    margin: 0;
  }

  .nl-points--a { left: calc(26 * var(--u)); width: calc(244 * var(--u)); }
  .nl-points--b { left: calc(308 * var(--u)); width: calc(396 * var(--u)); }

  .nl-points li {
    margin: 0;
    padding-left: calc(22 * var(--u));
    font-size: calc(15.4 * var(--u));
    line-height: calc(24 * var(--u));
  }

  .nl-points li + li { margin-top: calc(16 * var(--u)); }

  .nl-points li::before {
    left: calc(8 * var(--u));
    top: calc(6 * var(--u));
    width: calc(6 * var(--u));
    height: calc(12 * var(--u));
  }

  /* fields at right 32 (x897), 454 wide */
  .newsletter .nl-field {
    position: absolute;
    left: calc(897 * var(--u));
    width: calc(454 * var(--u));
    height: calc(56 * var(--u));
    margin: 0;
    padding: 0 calc(20 * var(--u));
    border-radius: calc(16 * var(--u));
    font-size: calc(15.4 * var(--u));
  }

  .nl-field--name { top: calc(37 * var(--u)); }
  .nl-field--email { top: calc(109 * var(--u)); }

  .newsletter .nl-submit {
    position: absolute;
    left: calc(897 * var(--u));
    top: calc(181 * var(--u));
    width: calc(454 * var(--u));
    height: calc(57 * var(--u));
    margin: 0;
    border-radius: calc(16 * var(--u));
    font-size: calc(17.4 * var(--u));
  }

  .newsletter .nl-legal {
    position: absolute;
    left: calc(905 * var(--u));
    top: calc(250 * var(--u));
    width: calc(438 * var(--u));
    margin: 0;
    font-size: calc(11.5 * var(--u));   /* 12px Inter, PJS-calibrated */
    line-height: calc(17 * var(--u));
  }

  /* Success message sits where the fields were */
  .newsletter .nl-success {
    position: absolute;
    left: calc(897 * var(--u));
    top: calc(80 * var(--u));
    width: calc(454 * var(--u));
    margin: 0;
  }

  .nl-success__title {
    font-size: calc(28 * var(--u));
    line-height: calc(36 * var(--u));
  }

  .nl-success p + p {
    margin-top: calc(10 * var(--u));
    font-size: calc(15.4 * var(--u));
    line-height: calc(24 * var(--u));
  }

  /* --- Section 8: frame "8", 1728 x 985 --- */
  .founder {
    position: relative;
    height: calc(985 * var(--u));
    padding: 0;
  }

  /* header: x172 y115, w411, 80px, two lines */
  .fd-title {
    position: absolute;
    left: calc(172 * var(--u));
    top: calc(115 * var(--u));
    width: calc(411 * var(--u));
    margin: 0;
    text-align: left;
    font-size: calc(66.4 * var(--u));   /* 80px design, PJS-calibrated */
    line-height: calc(80 * var(--u));
  }

  /* headshot: x198 y337, 421 x 421 */
  .fd-photo {
    position: absolute;
    left: calc(198 * var(--u));
    top: calc(337 * var(--u));
    width: calc(421 * var(--u));
    height: calc(421 * var(--u));
    margin: 0;
    max-width: none;
    border-radius: calc(24 * var(--u));
  }

  .fd-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* name and role: x198, y791 / y829 */
  .fd-name {
    position: absolute;
    left: calc(198 * var(--u));
    top: calc(791 * var(--u));
    margin: 0;
    text-align: left;
    font-size: calc(18.3 * var(--u));   /* 22px design, PJS-calibrated */
    line-height: calc(26.4 * var(--u));
  }

  .fd-role {
    position: absolute;
    left: calc(198 * var(--u));
    top: calc(829 * var(--u));
    margin: 0;
    text-align: left;
    font-size: calc(15.4 * var(--u));   /* 16px Inter, PJS-calibrated */
    line-height: calc(19.2 * var(--u));
  }

  /* letter column at x876 */
  .fd-letter {
    position: static;
    margin: 0;
    max-width: none;
  }

  .fd-quote {
    position: absolute;
    left: calc(876 * var(--u));
    top: calc(115 * var(--u));
    width: calc(70.7 * var(--u));
  }

  .fd-lede {
    position: absolute;
    left: calc(876 * var(--u));
    top: calc(196 * var(--u));
    width: calc(460 * var(--u));
    margin: 0;
    font-size: calc(39.8 * var(--u));   /* 48px design, PJS-calibrated */
    line-height: calc(48 * var(--u));
  }

  .fd-body {
    position: absolute;
    left: calc(876 * var(--u));
    top: calc(337 * var(--u));
    width: calc(550 * var(--u));
  }

  .fd-body p {
    margin: 0;
    font-size: calc(17.3 * var(--u));
    line-height: calc(27 * var(--u));
  }

  .fd-body p + p { margin-top: calc(27 * var(--u)); }

  .fd-signature {
    position: absolute;
    left: calc(876 * var(--u));
    top: calc(789 * var(--u));
    width: calc(160.7 * var(--u));
    margin: 0;
  }

  /* --- Section 9: frame "9", 1728 x 1269 --- */
  .compare {
    position: relative;
    height: calc(1269 * var(--u));
    padding: 0;
  }

  /* panel: centred, 1608 x 1136, r40, top 67 */
  .cmp-panel {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(67 * var(--u));
    width: calc(1608 * var(--u));
    height: calc(1136 * var(--u));
    padding: 0;
    border-radius: calc(40 * var(--u));
    overflow: hidden;
  }

  /* head: centred, top 70 */
  .cmp-head {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(70 * var(--u));
    width: calc(1268 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(24 * var(--u));
  }

  .cmp-eyebrow {
    margin: 0;
    font-size: calc(15.8 * var(--u));
    line-height: 1;
  }

  .cmp-head h2 {
    margin: 0;
    font-size: calc(66.4 * var(--u));   /* 80px design, PJS-calibrated */
    line-height: calc(80 * var(--u));
  }

  .cmp-sub {
    margin: 0;
    width: calc(518 * var(--u));
    max-width: none;
    font-size: calc(17.3 * var(--u));
    line-height: calc(27 * var(--u));
  }

  /* table: 1165 x 621, centred at top 358 of the panel */
  .cmp-scroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(358 * var(--u));
    width: calc(1165 * var(--u));
    margin: 0;
    overflow: visible;
  }

  .cmp-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
    border-radius: calc(24 * var(--u));
  }

  /* columns: labels 394, then 5 x 155 */
  .cmp-table th:first-child { width: calc(394 * var(--u)); }

  .cmp-table thead tr { height: calc(60 * var(--u)); }
  .cmp-table tbody tr { height: calc(70 * var(--u)); }

  .cmp-table th,
  .cmp-table td {
    padding: 0;
    font-size: calc(19.2 * var(--u));   /* 20px Inter, PJS-calibrated */
  }

  .cmp-table thead th { font-size: calc(17.3 * var(--u)); }

  .cmp-table tbody th {
    padding-left: calc(16 * var(--u));
    font-size: calc(17.4 * var(--u));   /* 21px design, PJS-calibrated */
  }

  .cmp-table td img,
  .cmp-table th img {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }

  .cmp-logo { gap: calc(6 * var(--u)); }

  .cmp-logo img:first-child { width: calc(21.3 * var(--u)); height: auto; }
  .cmp-logo img:last-child { width: calc(77.2 * var(--u)); height: auto; }

  /* --- Section 10: frame "10", flow layout so the accordion can grow ---
     Closed-state geometry matches the design: head at y58, list at y313,
     column 840 wide, tabs 61 tall with 16 gaps. */
  .faq {
    padding: calc(58 * var(--u)) 0 calc(162 * var(--u));
  }

  .faq-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 * var(--u));
  }

  .faq-eyebrow {
    margin: 0;
    font-size: calc(15.8 * var(--u));
    line-height: calc(19 * var(--u));
  }

  .faq-head h2 {
    margin: 0;
    width: calc(845 * var(--u));
    font-size: calc(49.8 * var(--u));   /* 60px design, PJS-calibrated */
    line-height: calc(60 * var(--u));
  }

  .faq-list {
    margin: calc(100 * var(--u)) auto 0;
    max-width: none;
    width: calc(840 * var(--u));
    gap: calc(16 * var(--u));
  }

  .faq-item { border-radius: calc(24 * var(--u)); }

  .faq-q {
    height: calc(61 * var(--u));        /* design tab height */
    padding: 0 calc(20 * var(--u));
    font-size: calc(15.8 * var(--u));   /* 19px design, PJS-calibrated */
    line-height: calc(19 * var(--u));
  }

  .faq-icon {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }

  .faq-icon::before { width: max(2px, calc(2 * var(--u))); height: calc(14 * var(--u)); }
  .faq-icon::after { width: calc(14 * var(--u)); height: max(2px, calc(2 * var(--u))); }

  .faq-a__inner p {
    padding: 0 calc(20 * var(--u)) calc(21 * var(--u));
    font-size: calc(17.3 * var(--u));
    line-height: calc(27 * var(--u));
    max-width: calc(680 * var(--u));
  }

  /* --- Section 11: frame "11", 1728 x 827 --- */
  .final-cta {
    position: relative;
    height: calc(827 * var(--u));
    padding: 0;
  }

  /* panel: x60 y69, 1608 x 688, r40, purple */
  .fc-panel {
    position: absolute;
    left: calc(60 * var(--u));
    top: calc(69 * var(--u));
    width: calc(1608 * var(--u));
    height: calc(688 * var(--u));
    padding: 0;
    border-radius: calc(40 * var(--u));
  }

  /* photo composite at x380 y0, 1228 x 688 */
  .fc-panel .fc-photo {
    left: calc(380 * var(--u));
    right: auto;
    bottom: auto;
    top: 0;
    width: calc(1228 * var(--u));
    height: calc(688 * var(--u));
    opacity: 1;
  }

  .fc-panel .fc-eyebrow {
    position: absolute;
    left: calc(112 * var(--u));
    top: calc(69 * var(--u));
    margin: 0;
    font-size: calc(15.8 * var(--u));   /* 19px design, PJS-calibrated */
    line-height: calc(19 * var(--u));
  }

  .fc-panel h2 {
    position: absolute;
    left: calc(112 * var(--u));
    top: calc(123 * var(--u));
    width: calc(874 * var(--u));
    margin: 0;
    font-size: calc(49.8 * var(--u));   /* 60px design, PJS-calibrated */
    line-height: calc(60 * var(--u));
  }

  /* bullets: x112, tops 303 / 354 / 405 / 456 (51 apart, rows 24 tall) */
  .fc-panel .fc-points {
    position: absolute;
    left: calc(112 * var(--u));
    top: calc(303 * var(--u));
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: calc(27 * var(--u));
  }

  .fc-points li {
    margin: 0;
    height: calc(24 * var(--u));
    gap: calc(12 * var(--u));
    font-size: calc(17.3 * var(--u));
    line-height: calc(24 * var(--u));
    white-space: nowrap;
  }

  .fc-points img {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }

  /* CTAs at y538: filled centred at x306, outline 268 wide centred at x598 */
  .fc-panel .fc-cta {
    position: absolute;
    top: calc(538 * var(--u));
    height: calc(57 * var(--u));
    min-height: 0;
    margin: 0;
    padding: 0 calc(32 * var(--u));
    border-radius: calc(16 * var(--u));
    font-size: calc(17.4 * var(--u));
    transform: translateX(-50%);
  }

  .fc-cta--primary { left: calc(306 * var(--u)); }

  .fc-cta--secondary {
    left: calc(598 * var(--u));
    width: calc(268 * var(--u));
    padding: 0;
    border-width: max(1px, calc(2 * var(--u)));
  }

  .fc-panel .fc-note {
    position: absolute;
    left: calc(112 * var(--u));
    top: calc(619 * var(--u));
    margin: 0;
    font-size: calc(13.4 * var(--u));
    line-height: calc(20 * var(--u));
    white-space: nowrap;
  }

  /* --- Section 12: footer, 1728 x 221 --- */
  .site-footer {
    height: calc(221 * var(--u));
    padding: 0;
  }

  /* logo badge: x54 y55, 88 wide */
  .ft-logo {
    position: absolute;
    left: calc(54 * var(--u));
    top: calc(55 * var(--u));
    width: calc(88 * var(--u));
  }

  /* tagline: x164 y70, w308, 17px */
  .ft-tag {
    position: absolute;
    left: calc(164 * var(--u));
    top: calc(70 * var(--u));
    width: calc(308 * var(--u));
    margin: 0;
    max-width: none;
    font-size: calc(14.1 * var(--u));   /* 17px design, PJS-calibrated */
    line-height: 1.4;
  }

  /* contact column at x1395: heading y73, email y106 */
  .ft-contact {
    position: absolute;
    left: calc(1395 * var(--u));
    top: calc(73 * var(--u));
    margin: 0;
  }

  .ft-contact__h {
    margin: 0;
    font-size: calc(15.8 * var(--u));   /* 19px design, PJS-calibrated */
    line-height: calc(19 * var(--u));
  }

  .ft-contact a {
    margin-top: calc(14 * var(--u));
    font-size: calc(15.4 * var(--u));   /* 16px Inter, PJS-calibrated */
    line-height: calc(24 * var(--u));
  }

  /* copyright x59 y189; legal links at x1395 / x1572, y190 */
  .ft-copy {
    position: absolute;
    left: calc(59 * var(--u));
    top: calc(185 * var(--u));
    margin: 0;
    font-size: calc(13.4 * var(--u));   /* 14px Inter, PJS-calibrated */
    line-height: calc(20 * var(--u));
  }

  .ft-legal {
    position: absolute;
    left: calc(1395 * var(--u));
    top: calc(185 * var(--u));
    margin: 0;
    gap: calc(50 * var(--u));
    font-size: calc(13.4 * var(--u));
    line-height: calc(20 * var(--u));
    white-space: nowrap;
  }
}