/* Figtree for headings, as in the product (23 October 2026); body text stays in the platform font. The full variable
   file, version 2.002 under the SIL Open Font Licence (fonts/OFL.txt). size-adjust matches its x-height to the
   platform font's. */
@font-face {
  font-family: "Figtree";
  src: url("/fonts/Figtree-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 103.5%;
}

/* The Lumly palette (23 October 2026, ../lumly/docs/brand.md): warm neutrals; plum names, deep violet guides, ink acts.
   The L's gradient appears only as its light: the page's faint light from the top and the glow inside the plum panel.
   Dark mode is on the brand's deep plum. */
:root {
  --bg: #fafaf9;
  --surface: #ffffff;
  --ink: #1f1e1c;
  --muted: #5a5652;
  --link: #503b7d;
  --rule: #e7e5e2;
  --plum: #40364f;
  --panel: #40364f;
  --panel-text: #ffffff;
  --panel-muted: #dcd5e6;
  --frame: rgb(255 255 255 / 45%);
  --ai-bg: #f6f1fb;
  --ai-ink: #5a3aa6;
  --mark: rgb(192 95 192 / 18%);
  --suggestion: #faf7fe;
  --look-bg: #fff8e6;
  --look-border: #ffdb7a;
  --look-text: #7a4f00;
  --accent-top: #6d58bd;
  --accent: #5e48b0;
  --accent-hover-top: #7c5fd6;
  --accent-hover: #6e52c8;
  --light-warm: rgb(255 190 150 / 7.1%);
  --light-cool: rgb(172 124 227 / 5.9%);
  --depth-rest: 0 1px 2px rgb(31 30 28 / 5.1%), 0 1px 1px rgb(31 30 28 / 3.1%);
  --depth-accent: 0 1px 2px rgb(31 30 28 / 14.1%), 0 8px 18px -10px rgb(134 102 204 / 45.1%);
  --heading: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  .burst {
    opacity: 0.8;
  }

  :root {
    --bg: #31293d;
    --surface: #3a3147;
    --ink: #ffffff;
    --muted: #dcd5e6;
    --link: #c9bceb;
    --rule: #4e4261;
    --plum: #ffffff;
    --light-warm: rgb(255 194 138 / 7%);
    --light-cool: rgb(176 138 242 / 8%);
    --depth-rest: none;
    --frame: rgb(255 255 255 / 14%);
    --ai-bg: #3a2f4a;
    --ai-ink: #dccbf6;
    --mark: rgb(217 139 217 / 30%);
    --suggestion: #43385a;
    --look-bg: rgb(255 219 122 / 14%);
    --look-border: rgb(255 219 122 / 40%);
    --look-text: #ffdb7a;
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  /* The page's light, as in the product: faint peach from the top left, cooler violet from the top right. It scrolls
     away with the page and means nothing. */
  background:
    radial-gradient(60% 72% at 6% 0, var(--light-warm), transparent 72%) top / 100% 30rem no-repeat,
    radial-gradient(52% 64% at 94% 0, var(--light-cool), transparent 72%) top / 100% 30rem no-repeat,
    var(--bg);
}

main {
  flex: 1;
}

.wrap {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

header.wrap {
  padding-top: 2.5rem;
}

.logo {
  display: block;
  width: auto;
  height: 2.5rem;
}

h1,
h2,
h3 {
  font-family: var(--heading);
  text-wrap: balance;
}

h1 {
  max-width: 22ch;
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h3 {
  margin: 0 0 0.375rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

section {
  padding-top: 4.5rem;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* The opening */
.hero {
  padding-top: 4.5rem;
}

.slogan {
  margin: 0 0 1rem;
  font-family: var(--heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--plum);
}

.lede {
  max-width: 36rem;
  margin: 0 0 2rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  color: var(--muted);
}

/* The one action the page exists for wears the deep violet accent; on the plum panel, a light button. */
.button {
  display: inline-block;
  padding: 0.8125rem 1.375rem;
  border-radius: 0.75rem;
  background: linear-gradient(var(--accent-top), var(--accent));
  box-shadow: var(--depth-accent);
  color: #ffffff;
  font-family: var(--heading);
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
}

.button:hover {
  background: linear-gradient(var(--accent-hover-top), var(--accent-hover));
}

.button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 0.75rem;
}

.button--light,
.button--light:hover {
  background: #ffffff;
  box-shadow: none;
  color: #40364f;
}

.button--light:focus-visible {
  outline-color: #ffffff;
}

.or {
  color: var(--muted);
}

.home {
  display: inline-block;
}

/* Joining the waitlist: a plain form posted to the waitlist Worker, with no script on the page. */
.visually-hidden,
.trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.signup input {
  width: 100%;
  min-width: 0;
  min-height: 3.125rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.signup input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

.signup input:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-color: transparent;
}

.signup button {
  min-height: 3.125rem;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.signup--hero {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  max-width: 32rem;
  padding: 0.375rem;
  border: 1px solid var(--rule);
  border-radius: 1.125rem;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(31 30 28 / 5%), 0 18px 40px -24px rgb(134 102 204 / 45%);
}

.signup--hero input {
  flex: 1 1 14rem;
  border-color: transparent;
}

.signup--hero button {
  flex: 1 0 auto;
}

.or {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.signup--panel {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
}

.signup--panel label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--panel-text);
  font-weight: 600;
  font-size: 0.9375rem;
}

.signup--panel label span {
  color: var(--panel-muted);
  font-weight: 400;
}

.signup--panel input {
  border-color: rgb(255 255 255 / 22%);
  background: rgb(255 255 255 / 10%);
  color: #ffffff;
}

.signup--panel input:focus-visible {
  outline-color: #ffffff;
}

.signup--panel button {
  justify-self: start;
}

.closing .fineprint {
  color: #ffffff;
  max-width: 40rem;
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
}

/* The promise */
.promise p {
  margin: 0;
  padding: 2.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--heading);
  font-size: clamp(1.625rem, 1.1rem + 2.4vw, 2.5rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--plum);
  text-wrap: balance;
}

/* What it's designed to do: each feature beside a showcase, a piece of the product floating in a wide frosted frame
   over bursts of the brand's colour (Lloyd, 24 October, after Passionfroot, Amplemarket and Cushon). The pieces use the
   product's own words and invented people, and are hidden from screen readers because the text beside them says the
   same. */
.feature {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2.5rem;
}

.feature + .feature {
  margin-top: 3.5rem;
}

.feature-text p {
  max-width: 26rem;
  margin: 0;
  color: var(--muted);
}

.feature-text h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  margin-bottom: 0.5rem;
}

.showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 19rem;
  padding: 2.75rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 1.75rem;
  background: var(--surface);
}

/* Bursts: soft-edged organic shapes in the app icon's tile colours, peach first. */
.burst {
  position: absolute;
  z-index: -1;
  border-radius: 58% 42% 55% 45% / 47% 58% 42% 53%;
}

.burst--a {
  top: -18%;
  right: -12%;
  width: 72%;
  aspect-ratio: 1;
  transform: rotate(-14deg);
}

.burst--b {
  bottom: -26%;
  left: -14%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 46% 54% 40% 60% / 58% 42% 58% 42%;
  transform: rotate(22deg);
}

.showcase--warm .burst--a { background: linear-gradient(135deg, #ffaa74, #ff8a7a); }
.showcase--warm .burst--b { background: #9864f2; opacity: 0.85; }
.showcase--violet .burst--a { background: linear-gradient(135deg, #b08af2, #9864f2); }
.showcase--violet .burst--b { background: #ffaa74; }
.showcase--coral .burst--a { background: linear-gradient(135deg, #ff8f86, #ff8a7a); }
.showcase--coral .burst--b { background: linear-gradient(135deg, #ffc28a, #ffaa74); }
.showcase--dusk .burst--a { background: linear-gradient(135deg, #ffaa74, #ff8a7a 45%, #9864f2); }
.showcase--dusk .burst--b { background: #b08af2; }

/* The window: solid inside, with a wide frosted frame that blurs the colour behind it. */
.window {
  position: relative;
  display: grid;
  gap: 0.5rem;
  width: 100%;
  max-width: 25rem;
  padding: 1rem;
  border: 0.75rem solid var(--frame);
  border-radius: 1.5rem;
  background: var(--surface) padding-box;
  box-shadow: 0 30px 60px -30px rgb(64 54 79 / 45%), 0 2px 6px rgb(31 30 28 / 6%);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  font-size: 0.875rem;
  line-height: 1.35;
}

.window p {
  margin: 0;
}

.window-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.125rem 0.25rem 0.375rem;
  font-family: var(--heading);
  font-size: 1rem;
  font-weight: 700;
}

.window-label {
  padding: 0.125rem 0.25rem 0.25rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 0.75rem;
  background: var(--surface);
}

.item b {
  font-weight: 600;
  margin-right: 0.25rem;
}

.item--quiet {
  color: var(--muted);
}

.item--raised {
  border-color: var(--look-border);
  box-shadow: 0 8px 20px -12px rgb(122 79 0 / 35%);
}

.item .badge {
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--look-border);
  border-radius: 999px;
  background: var(--look-bg);
  color: var(--look-text);
  font-size: 0.75rem;
  font-weight: 600;
}

.item q {
  flex-basis: 100%;
  color: var(--muted);
  font-style: italic;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  flex-basis: 100%;
  margin-top: 0.25rem;
}

.mini-button {
  justify-self: start;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  background: var(--surface);
  box-shadow: var(--depth-rest);
  font-family: var(--heading);
  font-size: 0.75rem;
  font-weight: 650;
}

.mini-button--main {
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  box-shadow: 0 1px 2px rgb(31 30 28 / 8%), 0 8px 18px -10px rgb(134 102 204 / 45%);
}

.pill {
  flex: none;
  white-space: nowrap;
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
}

.item--tick {
  justify-content: flex-start;
}

.item--tick span:last-child:not(:first-child) {
  margin-left: auto;
  color: var(--muted);
}

.item--tick::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.8125rem;
  margin: 0 0.375rem 0.125rem 0.125rem;
  border-right: 2px solid var(--link);
  border-bottom: 2px solid var(--link);
  transform: rotate(45deg);
}

.item--save {
  justify-content: flex-start;
  border-color: var(--link);
}

.item--change {
  flex-direction: column;
  align-items: flex-start;
}

.change s {
  margin-right: 0.375rem;
  color: var(--muted);
}

.meta {
  color: var(--muted);
  font-size: 0.75rem;
}

.float-chip {
  position: absolute;
  right: -1.75rem;
  bottom: -1.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 16px 32px -16px rgb(64 54 79 / 45%);
  font-family: var(--heading);
  font-size: 0.8125rem;
  font-weight: 650;
  white-space: nowrap;
}

.float-chip::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffaa74, #9864f2);
  vertical-align: 0.0625rem;
}

/* AI: friendly and reassuring, in colour. A thoughtful colleague's note beside the promises that keep it in its
   place. The note and suggestion use the product's words and invented people, hidden from screen readers. */
.ai-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem 1.5rem;
  border-radius: 1.75rem;
  background: var(--ai-bg);
}

.ai-panel .burst--a {
  top: -7rem;
  right: -6rem;
  width: min(75%, 30rem);
  background: linear-gradient(135deg, #e9a3e3, #b08af2 55%, #9864f2);
  opacity: 0.55;
}

.ai-panel .burst--b {
  bottom: -8rem;
  left: -7rem;
  width: min(60%, 24rem);
  background: linear-gradient(135deg, #ffc28a, #ff8f86);
  opacity: 0.45;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 0.875rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--link);
  font-family: var(--heading);
  font-size: 0.875rem;
  font-weight: 650;
  box-shadow: var(--depth-rest);
}

.ai-text h2 {
  max-width: 18ch;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
}

.ai-text > p:not(.eyebrow) {
  max-width: 34rem;
  color: var(--ink);
  font-size: 1.0625rem;
}

.promises {
  display: grid;
  gap: 0.875rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.promises li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: var(--muted);
}

.promises strong {
  color: var(--ink);
}

.dot {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1875rem;
  border-radius: 50%;
}

.dot--peach { background: linear-gradient(135deg, #ffc28a, #ffaa74); }
.dot--coral { background: linear-gradient(135deg, #ff8f86, #ff8a7a); }
.dot--violet { background: linear-gradient(135deg, #b08af2, #9864f2); }

.ai-window {
  justify-self: center;
  max-width: 26rem;
}

.note {
  padding: 0 0.25rem;
  color: var(--ink);
}

mark {
  margin: 0 -0.125rem;
  padding: 0.0625rem 0.125rem;
  border-radius: 0.25rem;
  background: var(--mark);
  color: inherit;
}

.suggestion {
  display: grid;
  gap: 0.375rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: var(--suggestion);
}

.suggestion-label {
  color: var(--ai-ink);
  font-family: var(--heading);
  font-size: 0.75rem;
  font-weight: 650;
}

.suggestion-label::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #c05fc0, #7f4de6);
}

.float-chip--you {
  bottom: -1.25rem;
}

/* Terms and team, side by side when there is room */
.split {
  display: grid;
  gap: 2.5rem;
}

.split p {
  margin: 0;
  color: var(--muted);
}

/* The closing panel: deep plum with the L's light glowing inside it */
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 2.5rem 2rem;
  border-radius: 1.25rem;
  background: var(--panel);
  color: var(--panel-text);
}

/* The product's thank-you glow, screened over the plum. */
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(38% 110% at 55% -28%, rgb(255 193 141 / 20%) 0 45%, transparent 100%),
    radial-gradient(30% 100% at 92% 122%, rgb(244 139 146 / 16%) 0 45%, transparent 100%),
    radial-gradient(40% 110% at 10% 135%, rgb(160 128 240 / 38%) 0 50%, transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.closing p {
  max-width: 34rem;
  color: var(--panel-muted);
}

.closing a {
  color: #ffffff;
}

.closing .button--light {
  color: #40364f;
}

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

footer.wrap {
  margin-top: 4.5rem;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

footer p {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

@media (min-width: 40em) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

}

@media (min-width: 48em) {
  .feature {
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
  }

  .feature--flip {
    grid-template-columns: 7fr 5fr;
  }

  .ai-panel {
    grid-template-columns: 6fr 5fr;
    gap: 3rem;
    padding: 3.5rem;
  }

  .feature--flip .feature-text {
    order: 2;
  }

  .showcase {
    min-height: 23rem;
    padding: 3.5rem 2.5rem;
  }

  .closing {
    padding: 3rem;
  }

  .signup--panel {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

/* Text pages, such as the privacy notice */
.prose {
  max-width: 42rem;
  padding-top: 3.5rem;
}

.prose h1 {
  margin-bottom: 0.5rem;
}

.prose h2 {
  margin: 2.25rem 0 0.5rem;
  font-size: 1.25rem;
}

.prose .updated {
  color: var(--muted);
}

footer a {
  color: var(--muted);
  white-space: nowrap;
}

/* The pages after joining: one showcase with a message in its window */
.moment-page {
  padding-top: 3rem;
}

.moment-page .showcase {
  min-height: 30rem;
}

.window--message {
  min-width: 0;
  max-width: 30rem;
  padding: 2rem clamp(0.75rem, 3vw, 1.75rem);
  overflow-wrap: anywhere;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

.window--message h1 {
  max-width: none;
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
}

.window--message p {
  margin: 0 0 1rem;
  color: var(--muted);
}

.window--message p:last-child {
  margin: 1.5rem 0 0;
}

.window--message .signup--hero {
  margin: 1.25rem auto 0;
  text-align: left;
}

.window--message .tick-mark {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffaa74, #ff8a7a 45%, #9864f2);
  position: relative;
}

.window--message .tick-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0.75rem;
  height: 1.375rem;
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Keep the retry form inside its frame at 320 CSS pixels (1280px at 400% zoom). */
.window--message .signup--hero {
  min-width: 0;
  max-width: 100%;
}

.window--message .signup--hero button {
  min-width: 0;
  white-space: normal;
}

/* Solid white keeps the text above 4.5:1 over the dark-mode colour burst. */
@media (prefers-color-scheme: dark) {
  .ai-panel .promises li {
    color: #ffffff;
  }
}