/* Cira waiting list page styles.
   Section A is copied unchanged from the staging homepage stylesheet (assets/home/home.css at f97305c):
   fonts, palette, hero, guides, wordmark and the octopus stack, plus the homepage mobile rules for the
   hero grid, wordmark and octopus. Section B is the waiting list layout. Self-hosted fonts only. */
@font-face {font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 400; src: url(/lp/fonts/manrope-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face {font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 400; src: url(/lp/fonts/manrope-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face {font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 500; src: url(/lp/fonts/manrope-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face {font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 500; src: url(/lp/fonts/manrope-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face {font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 600; src: url(/lp/fonts/manrope-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face {font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 600; src: url(/lp/fonts/manrope-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face {font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 700; src: url(/lp/fonts/manrope-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face {font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 700; src: url(/lp/fonts/manrope-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face {font-family: 'Instrument Serif'; font-style: normal; font-display: swap; font-weight: 400; src: url(/lp/fonts/instrument-serif-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face {font-family: 'Instrument Serif'; font-style: normal; font-display: swap; font-weight: 400; src: url(/lp/fonts/instrument-serif-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face {font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 400; src: url(/lp/fonts/poppins-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face {font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 400; src: url(/lp/fonts/poppins-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face {font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 500; src: url(/lp/fonts/poppins-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face {font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 500; src: url(/lp/fonts/poppins-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face {font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 600; src: url(/lp/fonts/poppins-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face {font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 600; src: url(/lp/fonts/poppins-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face {font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 700; src: url(/lp/fonts/poppins-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face {font-family: 'Poppins'; font-style: normal; font-display: swap; font-weight: 700; src: url(/lp/fonts/poppins-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  /* Cira Brand Palette Integrated into the Octopus Mentality Engine */
  --cira-navy: #172D3F;
  --cira-gold: #CC9E00;
  --cira-teal: #285961;
  --cira-ink: #101010;
  --cira-paper: #F6F6F6;

  --hero-bg: #172D3F;
  --accent: #CC9E00;
  --clay: #CC9E00;
  --clay-ink: #101010;
  --s: 1;
  --parallax-x: 0px;
  --parallax-y: 0px;
  --ambient-x: 0px;
  --ambient-y: 0px;
  --ambient-rot: 0deg;
  --ambient-scale: 1;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Manrope', 'Poppins', sans-serif;
  color: var(--cira-paper);
  background-color: var(--hero-bg);
}

.viewport {
  position: relative;
  width: 100%;
}

/* HERO SECTION, CIRA NAVY #172D3F */
.hero {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  background-color: var(--hero-bg);
  z-index: 1;
}

.hero-relief {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.guide-line {
  stroke: rgba(246, 246, 246, 0.42);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  fill: none;
}

.guide-secondary {
  display: none;
}

.guide-erase {
  stroke: var(--hero-bg);
  stroke-width: 4px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  fill: none;
}

/* DISPLAY TITLES & CIRA MASTER WORDMARK */
.display-title {
  position: absolute;
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: calc(136px * var(--s));
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
}

.title-octopus {
  left: calc(50% - 896px * var(--s));
  top: calc(64px * var(--s));
  letter-spacing: -0.007em;
  display: flex;
  align-items: center;
}

.hero-cira-wordmark {
  width: calc(430px * var(--s));
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 28px rgba(16, 16, 16, 0.32));
}

.title-mentality {
  left: calc(50% - 140px * var(--s));
  top: 75.5%;
  font-family: 'Poppins', 'Manrope', sans-serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: min(calc(136px * var(--s)), calc((50vw + 76px * var(--s) - 16px) / 11.25));
  color: var(--accent);
}

/* OCTOPUS STACK, ONE BOX */
.octopus {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(922px * var(--s));
  height: calc(922px * var(--s));
  z-index: 4;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translate(-50%, -50%) translate3d(calc(var(--parallax-x, 0px) + var(--ambient-x, 0px)), calc(var(--parallax-y, 0px) + var(--ambient-y, 0px)), 0) rotate(var(--ambient-rot, 0deg)) scale(var(--ambient-scale, 1));
}

.octopus > img,
.octopus > canvas,
.octopus > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

#octopus-reveal-canvas {
  display: none;
}

/* HERO COPY BLOCKS */
.hero-copy {
  position: absolute;
  font-family: 'Manrope', sans-serif;
  font-size: calc(16px * max(0.82, var(--s)));
  line-height: 1.38;
  color: var(--cira-paper);
  z-index: 5;
  text-shadow: 0 1px 2px rgba(23, 45, 63, 0.95), 0 0 6px rgba(23, 45, 63, 0.75);
  transition: color 0.12s ease, text-shadow 0.12s ease;
  margin: 0;
}

.hero-copy p,
.hero-copy h2 {
  margin: 0;
  transition: color 0.12s ease, text-shadow 0.12s ease;
}

.brush-touched,
.brush-touched p,
.brush-touched h2 {
  color: var(--accent) !important;
  text-shadow: none !important;
}

/* MOBILE, max-width 900px (homepage rules for the hero grid, wordmark and octopus, unchanged) */
@media (max-width: 900px) {
  .hero {
    position: relative;
    height: auto;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: max(22px, env(safe-area-inset-top)) 20px 44px;
    row-gap: 24px;
    align-content: start;
    overflow-x: clip;
  }

  .title-octopus {
    position: relative;
    grid-row: 2;
    left: auto;
    top: auto;
  }

  .hero-cira-wordmark {
    width: clamp(180px, 58vw, 340px);
  }

  .octopus {
    position: relative;
    grid-row: 3;
    left: 50%;
    top: auto;
    width: min(112vw, 620px);
    height: auto;
    aspect-ratio: 1 / 1;
    margin-top: -12vw;
    margin-bottom: -12vw;
    transform: translateX(-50%) translate3d(var(--ambient-x, 0px), var(--ambient-y, 0px), 0) rotate(var(--ambient-rot, 0deg)) scale(var(--ambient-scale, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .octopus {
    --ambient-x: 0px !important;
    --ambient-y: 0px !important;
    --ambient-rot: 0deg !important;
    --ambient-scale: 1 !important;
  }
}

/* ===================== SECTION B: WAITING LIST LAYOUT ===================== */
/* Desktop geometry, in homepage units (--s = min(vw / 1920, vh / 1080)).
   The octopus box is 922s wide and centred. Its visible pixels reach 451s either side of centre; ambient drift
   (13s), pointer parallax (28s), rotation (1.15deg) and scale (1.2%) add up to about 507s. The copy column ends
   and the waiting list button sit inside the copy column, which ends 530s from the centre, so none of them can touch the octopus at any point of its motion. */
:root {
  --lp-gap: calc(530px * var(--s));
  --lp-edge: calc(896px * var(--s));
  --lp-focus: #F6F6F6;
}

.lp-topbar-spacer {
  display: none;
}

.lp-intro {
  top: calc(300px * var(--s));
  left: calc(50% - var(--lp-edge));
  width: calc(var(--lp-edge) - var(--lp-gap));
  pointer-events: none;
}

.lp-eyebrow {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: calc(16px * max(0.86, var(--s)));
  letter-spacing: 0.02em;
  color: var(--cira-paper);
}

.lp-intro .lp-headline {
  margin: calc(14px * max(0.8, var(--s))) 0 0;
  font-family: 'Poppins', 'Manrope', sans-serif;
  font-weight: 600;
  font-size: max(28px, calc(50px * var(--s)));
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--accent);
  text-shadow: none;
}

.lp-intro .lp-supporting {
  margin-top: calc(18px * max(0.8, var(--s)));
  font-size: calc(18px * max(0.86, var(--s)));
  line-height: 1.45;
  color: rgba(246, 246, 246, 0.9);
}

/* Call to action. Gold pill on navy; the form itself lives in the dialog below. */
.lp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin-top: calc(28px * max(0.8, var(--s)));
  padding: 0 28px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background-color: var(--accent);
  color: #101010;
  font-family: 'Poppins', 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.005em;
  text-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.lp-cta::after {
  content: "";
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='%23101010' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  transition: transform 0.18s ease;
}

.lp-cta:hover {
  background-color: #E3B211;
  border-color: #E3B211;
}

.lp-cta:hover::after {
  transform: translateX(2px);
}

.lp-cta:active {
  transform: translateY(1px);
  background-color: #B88E00;
  border-color: #B88E00;
}

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

/* Mobile dock: the same call to action, pinned within thumb reach while the inline button is off screen. */
.lp-dock {
  display: none;
}

/* Dialog: a centred panel on desktop, a bottom sheet on phones (see the mobile rules). */
::selection {
  background: rgba(204, 158, 0, 0.4);
  color: #101010;
}

.lp-field input {
  caret-color: var(--cira-navy);
}

html.lp-dialog-open {
  overflow: hidden;
}

.lp-dialog {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--cira-paper);
  color: var(--cira-ink);
  box-shadow: 0 24px 64px rgba(16, 16, 16, 0.45);
  overflow: hidden;
  overscroll-behavior: contain;
}

.lp-dialog::backdrop {
  background: rgba(16, 16, 16, 0.62);
}

.lp-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: lp-dialog-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lp-dialog[open]::backdrop {
  animation: lp-fade-in 0.22s ease;
}

@keyframes lp-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes lp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lp-sheet {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 24px 24px;
  font-family: 'Manrope', sans-serif;
  user-select: text;
  scrollbar-width: thin;
  scrollbar-color: #4D5D6B transparent;
}

.lp-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cira-navy);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.lp-close:hover {
  background-color: rgba(23, 45, 63, 0.08);
}

.lp-close:focus-visible {
  outline: 3px solid var(--cira-navy);
  outline-offset: 0;
}

.lp-sheet .lp-card-title {
  padding-right: 48px;
}

.lp-done {
  margin-top: 20px;
}

.lp-success {
  padding-top: 4px;
}

/* The success block takes focus so screen readers announce it; it is not a control, so no ring. */
.lp-success:focus {
  outline: none;
}

.lp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lp-card-title {
  margin: 0;
  font-family: 'Poppins', 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--cira-navy);
}

.lp-card-intro {
  margin: 8px 0 16px;
  font-size: 15px;
  line-height: 1.45;
  color: #101010;
}

.lp-field {
  margin: 0 0 14px;
}

.lp-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cira-ink);
}

.lp-optional {
  font-weight: 500;
  color: #4F5F6D;
}

.lp-field input[type="text"],
.lp-field input[type="email"],
.lp-field input[type="tel"] {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #4D5D6B;
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--cira-ink);
  font: 500 16px/1.3 'Manrope', sans-serif;
}

.lp-field input::placeholder {
  color: #4F5F6D;
}

.lp-field input[aria-invalid="true"] {
  border-color: #A4262C;
  box-shadow: inset 0 0 0 1px #A4262C;
}

.lp-field input:focus-visible,
.lp-submit:focus-visible,
.lp-privacy-link:focus-visible,
.lp-consent input:focus-visible {
  outline: 3px solid var(--cira-navy);
  outline-offset: 2px;
}

.lp-hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #4F5F6D;
}

.lp-error {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #A4262C;
}

.lp-consent {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  column-gap: 6px;
}

.lp-consent input {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='5' fill='%23FFFFFF' stroke='%235B6B78' stroke-width='2'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

.lp-consent input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='5' fill='%23172D3F' stroke='%23172D3F' stroke-width='2'/%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23F6F6F6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lp-consent input[aria-invalid="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='5' fill='%23FFFFFF' stroke='%23A4262C' stroke-width='2.5'/%3E%3C/svg%3E");
}

.lp-consent > label {
  margin: 0;
  padding-top: 11px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.lp-consent .lp-error {
  grid-column: 1 / -1;
}

.lp-privacy-link {
  /* Inline so it does not open a gap in the consent text; the vertical padding keeps a 44px tap area. */
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
  min-width: 44px;
  color: var(--cira-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 4px;
}

.lp-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lp-form-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #FBE9EA;
  color: #7A1C21;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.lp-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--cira-navy);
  background-color: var(--cira-navy);
  color: var(--cira-paper);
  font-family: 'Poppins', 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.lp-submit:hover {
  background-color: var(--cira-ink);
}

.lp-submit[aria-busy="true"] {
  cursor: progress;
  opacity: 0.8;
}

.lp-success p {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cira-ink);
  overflow-wrap: anywhere;
}

[hidden] {
  display: none !important;
}

/* Details: the homepage second screen colours (Cira gold, ink text), static. */
.lp-details {
  position: relative;
  z-index: 9;
  border-radius: 28px 28px 0 0;
  background-color: var(--clay);
  box-shadow: 0 -24px 70px rgba(16, 16, 16, 0.35);
  color: var(--clay-ink);
}

.lp-details-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(48px, 5vw, 96px) clamp(20px, 3vw, 56px);
}

.lp-block {
  padding-top: 18px;
  border-top: 1px solid rgba(16, 16, 16, 0.28);
}

.section-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: 'Poppins', 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cira-navy);
}

/* A drawn signal dot (the logo's dot, in navy on the gold band) instead of a text glyph. */
.section-mark::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

/* Keeps compound words such as "e-commerce" from splitting at the hyphen. */
.lp-nowrap {
  white-space: nowrap;
}

.lp-lead,
.lp-intro .lp-headline {
  text-wrap: balance;
}

.lp-body,
.lp-list,
.lp-small {
  text-wrap: pretty;
  max-width: 62ch;
}

.lp-lead {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(28px, 2.3vw, 42px);
  line-height: 1.08;
  color: var(--clay-ink);
}

.lp-list {
  margin: 0;
  padding: 0 0 0 1.1em;
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.5;
}

.lp-list li + li {
  margin-top: 10px;
}

.lp-body {
  margin: 0;
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.5;
}

.lp-small {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(16, 16, 16, 0.2);
  font-size: 14px;
  line-height: 1.5;
  color: var(--clay-ink);
}

.lp-footer {
  position: relative;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px clamp(20px, 3vw, 56px) 32px;
  background-color: var(--hero-bg);
  color: var(--cira-paper);
  font-size: 14px;
  font-weight: 500;
}

.lp-footer img {
  display: block;
  width: 73px;
  height: 40px;
}

.lp-footer p {
  margin: 0;
}

.lp-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.lp-footer-links a,
.lp-legal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.lp-footer-links a:hover,
.lp-legal a:hover {
  color: var(--accent);
}

/* Legal pages (cookies notice, terms and conditions), text copied from tim.africa */
.lp-legal {
  max-width: 760px;
  color: var(--cira-paper);
}

.lp-legal h1 {
  margin: 0 0 16px;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
}

.lp-legal-source {
  margin: 0;
}

.lp-legal-date {
  margin: 4px 0 32px;
  font-size: 14px;
  opacity: 0.75;
}

.lp-legal section {
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.lp-legal h2 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
}

.lp-legal-num {
  margin-right: 10px;
  font-size: 13px;
  color: var(--accent);
}

.lp-legal section p {
  margin: 0 0 12px;
}

.lp-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 15px;
}

/* Privacy placeholder page */
.lp-plain {
  min-height: 100vh;
}

.lp-plain-main {
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 20px;
  font-size: 17px;
  line-height: 1.6;
}

.lp-plain-main h1 {
  font-family: 'Poppins', 'Manrope', sans-serif;
  font-weight: 600;
  color: var(--accent);
}


/* Desktop layout (Jon, 28 Oct): a wider copy column, a larger octopus pulled right, and the wordmark and copy
   centred vertically as one block. Geometry in homepage units (s): the octopus box is 1040s wide, centred 380s
   right of the middle, so its visible pixels (0.489 of the box) run from 129s left to 889s right of centre.
   Ambient drift, parallax, rotation and scale add about 56s, so the copy column ends 215s left of centre. */
@media (min-width: 901px) {
  :root {
    --lp-gap: calc(215px * var(--s));
  }

  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: calc(50% - var(--lp-edge));
  }

  .hero .title-octopus,
  .hero .lp-intro {
    position: relative;
    left: auto;
    top: auto;
  }

  .hero .lp-intro {
    width: calc(var(--lp-edge) - var(--lp-gap));
    margin-top: calc(38px * var(--s));
  }

  .octopus {
    left: calc(50% + 380px * var(--s));
    width: calc(1040px * var(--s));
    height: calc(1040px * var(--s));
  }
}

/* Mobile: homepage hero grid (rows 1 to 3 identical), then the copy and the form. */
@media (max-width: 900px) {
  .lp-topbar-spacer {
    display: block;
    grid-row: 1;
    height: 44px;
  }

  /* Jon, 28 Oct: lift the wordmark by half of its gap from the top of the page (98px to 49px at 390px wide).
     The octopus and copy below it move up by the same amount. */
  .title-octopus {
    margin-top: -49px;
  }

  .lp-intro {
    position: relative;
    grid-row: 4;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 560px;
  }

  .lp-eyebrow {
    font-size: 15px;
  }

  .lp-intro .lp-headline {
    font-size: clamp(32px, 9vw, 56px);
  }

  .lp-intro .lp-supporting {
    font-size: 16px;
  }


  /* Phones: the button sits straight under the headline so it is on the first screen of common handsets. */
  .lp-intro {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .lp-cta {
    order: 2;
    width: 100%;
    min-height: 54px;
    margin-top: 20px;
    font-size: 17px;
  }

  .lp-intro .lp-supporting {
    order: 3;
    margin-top: 18px;
  }

  .lp-dock {
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background-color: var(--hero-bg);
    border-top: 1px solid rgba(246, 246, 246, 0.14);
    pointer-events: none;
  }

  .lp-dock[hidden] {
    display: none !important;
  }

  .lp-dock .lp-cta {
    margin-top: 0;
    pointer-events: auto;
    animation: lp-dock-in 0.2s ease-out;
  }

  @keyframes lp-dock-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }

  /* Bottom sheet. --lp-vvh follows the visual viewport so the on-screen keyboard never covers the sheet. */
  .lp-dialog {
    width: 100%;
    max-width: 100%;
    max-height: min(calc(var(--lp-vvh, 100dvh) - 16px), 100dvh);
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px rgba(16, 16, 16, 0.4);
  }

  .lp-dialog[open] {
    animation: lp-sheet-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  @keyframes lp-sheet-in {
    from { transform: translateY(100%); }
    to { transform: none; }
  }

  .lp-sheet {
    padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
  }

  .lp-close {
    top: 10px;
    right: 8px;
  }


  .lp-details {
    border-radius: 22px 22px 0 0;
  }

  .lp-details-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 40px 20px 44px;
  }

  .lp-footer {
    flex-direction: column;
    align-items: flex-start;
    /* Bottom padding clears the docked button. */
    padding: 24px 20px calc(112px + env(safe-area-inset-bottom));
  }

  .lp-footer-links {
    margin-left: 0;
  }
}

/* Reduced motion: the dialog, sheet and dock appear without movement (the octopus rule is in Section A). */
@media (prefers-reduced-motion: reduce) {
  .lp-dialog[open],
  .lp-dialog[open]::backdrop,
  .lp-dock .lp-cta {
    animation: none !important;
  }
  .lp-cta,
  .lp-cta::after {
    transition: none !important;
  }
}

.lp-back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cira-paper);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lp-back-link:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: 2px;
}