/* meltkit.com. The app's dark theme (src/index.css): true-neutral greys, very round cards, one light pill button. */
@font-face {
  font-family: "Geist";
  src: url("/assets/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* The handwriting next to the hero button (Gamja Flower, SIL Open Font License, Latin subset). */
@font-face {
  font-family: "Gamja Flower";
  src: url("/assets/gamja-flower.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --background: #0b0b0b;
  --foreground: #efefef;
  --card: #1f1f1f;
  --muted-foreground: rgba(255, 255, 255, 0.6);
  --faint-foreground: rgba(255, 255, 255, 0.6);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --primary: #f4f4f4;
  --primary-foreground: #0b0b0b;
  --radius: 40px;
  --radius-sm: 19px;
  --nav-h: 64px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* Components set their own display; hidden has to win over it. */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 16px/1.55 "Geist", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: clip;
}

a {
  color: inherit;
}

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

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Subpage header and the footer ---- */
.wrap.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand img {
  width: 28px;
  height: 28px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  color: var(--muted-foreground);
}
.nav-links a {
  text-decoration: none;
  transition: color 0.15s;
}
.nav-links a:hover {
  color: var(--foreground);
}
/* The Buy pill keeps its dark text on hover; the link hover above must not wash it out. */
.nav-links .btn:hover {
  color: var(--primary-foreground);
}

.footer {
  padding: 32px 0 44px;
  color: var(--muted-foreground);
  font-size: 13px;
}
.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  align-items: center;
}
.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.footer a {
  text-decoration: none;
}
.footer a:hover {
  color: var(--foreground);
}
body:not(.home) .footer {
  margin-top: 96px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s, border-color 0.15s;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn-light,
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}
.btn-light:hover,
.btn-primary:hover {
  background: #dedede;
}
.btn-dark {
  background: #0b0b0b;
  color: #fff;
}
.btn-dark:hover {
  background: #262626;
}
.btn-outline {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
}
.btn-sm {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
}
.btn-lg {
  height: 49.5px;
  padding: 0 15px;
  font-size: 17.25px;
  letter-spacing: -0.02em;
  border-radius: 17px;
}

/* ---- Hero: icon, gradient headline, one line, one button ---- */
/* Figma: icon at 80, headline at 210, line at 356, button at 429, band at 559. */
.hero {
  padding: 80px 0 81px;
}
.hero-inner {
  display: grid;
  justify-items: center;
  text-align: center;
}
.hero-mark {
  width: 73.5px;
  height: 73.5px;
  border-radius: 19px;
}
.hero h1 {
  margin-top: 56.5px;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.016;
  letter-spacing: -0.03em;
}
/* Each line carries its own run of colour: pink to periwinkle on the first, yellow through blush to lilac on the second. */
.grad {
  display: inline-block;
  /* room for the descenders inside the clipped box, without changing the line's height */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-a {
  background-image: linear-gradient(90deg, #fdd4f0 0%, #f3dbfb 28%, #a9b6ff 52%, #9a9dff 100%);
}
.grad-b {
  background-image: linear-gradient(90deg, #e7d98b 0%, #ecd5db 32%, #e0acf6 60%, #d4a8f8 100%);
}
.hero .sub {
  margin-top: 16px;
  max-width: 326px;
}
.hero-cta {
  position: relative;
  margin-top: 25px;
}
/* The aside sits off the button's bottom right corner; the offsets are the Figma frame's. */
.note {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.note-arrow {
  position: absolute;
  left: 158px;
  top: 59px;
  width: 65px;
  max-width: none; /* the wrapper has no width of its own, so the global image cap would shrink it to nothing */
  height: 23px;
}
.note-text {
  position: absolute;
  left: 206px;
  top: 39px;
  font: 16px/1.5 "Gamja Flower", "Segoe Print", cursive;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  transform: rotate(12deg);
  transform-origin: left center;
}

.sub {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.5;
  max-width: 360px;
  text-wrap: balance;
}

/* ---- Band: a blurred live look, full width, with the app window on it ---- */
/* 720px tall at the 1280px design width, and the same share of the width below it. */
.band {
  --tab-w: 184px;
  --tab-h: 40px;
  --tab-r: 14px;
  position: relative;
  min-height: calc(min(56.25vw, 720px) + var(--tab-h));
  padding: 39px 0 calc(39px + var(--tab-h));
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #b8dcfb;
  /* The band ends in a tab that hangs into the dark section: everything else in the bottom strip is masked
     away. Layers: the band itself, the tab's body, its two round bottom corners, and the two concave
     corners where the tab meets the band's edge. */
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--tab-h)) no-repeat,
    linear-gradient(#000 0 0) 50% calc(100% - var(--tab-r)) / var(--tab-w) calc(var(--tab-h) - var(--tab-r)) no-repeat,
    linear-gradient(#000 0 0) 50% 100% / calc(var(--tab-w) - 2 * var(--tab-r)) var(--tab-r) no-repeat,
    radial-gradient(circle closest-side, #000 calc(100% - 0.5px), transparent 100%) calc(50% - var(--tab-w) / 2 + var(--tab-r)) 100% / calc(2 * var(--tab-r)) calc(2 * var(--tab-r)) no-repeat,
    radial-gradient(circle closest-side, #000 calc(100% - 0.5px), transparent 100%) calc(50% + var(--tab-w) / 2 - var(--tab-r)) 100% / calc(2 * var(--tab-r)) calc(2 * var(--tab-r)) no-repeat,
    radial-gradient(circle var(--tab-r) at 0 100%, transparent calc(var(--tab-r) - 0.5px), #000 var(--tab-r)) calc(50% - var(--tab-w) / 2 - var(--tab-r) / 2) calc(100% - var(--tab-h) + var(--tab-r)) / var(--tab-r) var(--tab-r) no-repeat,
    radial-gradient(circle var(--tab-r) at 100% 100%, transparent calc(var(--tab-r) - 0.5px), #000 var(--tab-r)) calc(50% + var(--tab-w) / 2 + var(--tab-r) / 2) calc(100% - var(--tab-h) + var(--tab-r)) / var(--tab-r) var(--tab-r) no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--tab-h)) no-repeat,
    linear-gradient(#000 0 0) 50% calc(100% - var(--tab-r)) / var(--tab-w) calc(var(--tab-h) - var(--tab-r)) no-repeat,
    linear-gradient(#000 0 0) 50% 100% / calc(var(--tab-w) - 2 * var(--tab-r)) var(--tab-r) no-repeat,
    radial-gradient(circle closest-side, #000 calc(100% - 0.5px), transparent 100%) calc(50% - var(--tab-w) / 2 + var(--tab-r)) 100% / calc(2 * var(--tab-r)) calc(2 * var(--tab-r)) no-repeat,
    radial-gradient(circle closest-side, #000 calc(100% - 0.5px), transparent 100%) calc(50% + var(--tab-w) / 2 - var(--tab-r)) 100% / calc(2 * var(--tab-r)) calc(2 * var(--tab-r)) no-repeat,
    radial-gradient(circle var(--tab-r) at 0 100%, transparent calc(var(--tab-r) - 0.5px), #000 var(--tab-r)) calc(50% - var(--tab-w) / 2 - var(--tab-r) / 2) calc(100% - var(--tab-h) + var(--tab-r)) / var(--tab-r) var(--tab-r) no-repeat,
    radial-gradient(circle var(--tab-r) at 100% 100%, transparent calc(var(--tab-r) - 0.5px), #000 var(--tab-r)) calc(50% + var(--tab-w) / 2 + var(--tab-r) / 2) calc(100% - var(--tab-h) + var(--tab-r)) / var(--tab-r) var(--tab-r) no-repeat;
}
.made {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--tab-w);
  height: var(--tab-h);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  padding-bottom: 2px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #111;
}
.band-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
/* The same column as the cards below (.wrap), so both edges line up at every width. */
.band .window {
  margin: 0 auto;
  width: min(1032px, 100% - 48px);
  background: #f4f4f4;
  box-shadow: none;
}
.window {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #171717;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 30px 80px -24px rgba(0, 0, 0, 0.45);
}
.window img {
  width: 100%;
}

/* ---- Sections ---- */
.section {
  padding: 80px 0 0;
}
.head {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 16px;
  margin-bottom: 49px;
}
.section h2 {
  font-size: clamp(34px, 3.75vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f4f4f4;
}

/* ---- Cards: 411px tall, 8px apart, the copy 293px down ---- */
.cards {
  display: grid;
  gap: 8px;
}
@media (min-width: 720px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* --u is one design pixel: 1px while a card is at least as wide as in the Figma frame (263px inside the
   padding), a fraction of that on narrower cards, so the art and the vertical rhythm shrink with the card. The
   grid is the container; a card's inner width is the grid's width less the padding (stacked) or a third of it. */
.cards {
  container-type: inline-size;
}
.card {
  --u: min(1px, calc((100cqw - 72px) / 263));
  background: var(--card);
  border-radius: var(--radius);
  padding: calc(59 * var(--u)) 36px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 720px) {
  .card {
    --u: min(1px, calc(((100cqw - 16px) / 3 - 72px) / 263));
  }
}
/* With the title and text boxes this adds up to the 411px card of the frame, without a fixed min-height. */
/* The title hangs under the art, not at the bottom, so all three line up when one text wraps a line more. */
.card h3 {
  font-size: 14px;
  letter-spacing: -0.02em;
  color: #eaeaea;
  padding-top: calc(37 * var(--u));
}
.card p {
  margin: 6px 0 0;
  color: var(--muted-foreground);
  font-size: 14px;
  letter-spacing: -0.02em;
  max-width: 221px;
}
.card-art {
  position: relative;
  width: 100%;
  height: 194px;
}
/* Card art, from the Figma frame (the art box starts 59px down, the title 293px down), in --u from .card.
   Everything is placed from the card's centre line so the three columns can share one grid. */
.card-art {
  height: calc(194 * var(--u));
}
.card-art img {
  position: absolute;
  object-fit: cover;
}
/* Four looks as circles, laid out like the points of a compass. */
.circles img {
  width: calc(62 * var(--u));
  height: calc(62 * var(--u));
  border-radius: 50%;
}
.circles img:nth-child(1) { left: calc(50% - 31 * var(--u)); top: calc(6 * var(--u)); }
.circles img:nth-child(2) { left: calc(50% - 92 * var(--u)); top: calc(62.5 * var(--u)); }
.circles img:nth-child(3) { left: calc(50% + 30 * var(--u)); top: calc(62.5 * var(--u)); }
.circles img:nth-child(4) { left: calc(50% - 31 * var(--u)); top: calc(121 * var(--u)); }
/* Three stills: a big one in the middle, two small ones tucked behind its top right and in front of its bottom left. */
.tile-heat { width: calc(157 * var(--u)); height: calc(157 * var(--u)); border-radius: calc(44 * var(--u)); left: calc(50% - 78.5 * var(--u)); top: calc(34.5 * var(--u)); }
.tile-thermal { width: calc(62 * var(--u)); height: calc(62 * var(--u)); border-radius: calc(17.5 * var(--u)); left: calc(50% + 35 * var(--u)); top: calc(6 * var(--u)); }
.tile-mosaic { width: calc(63 * var(--u)); height: calc(63 * var(--u)); border-radius: calc(17.5 * var(--u)); left: calc(50% - 125.5 * var(--u)); top: calc(108.5 * var(--u)); }
/* One look cut into a ring. */
.ring img { width: calc(192 * var(--u)); height: calc(192 * var(--u)); left: calc(50% - 96 * var(--u)); top: calc(12 * var(--u)); }

/* The video is the whole card: its own dark margins around the app window are the padding. */
/* .card.card-wide so the phone-width .card padding below cannot put a frame around the video. It sits one grid
   gap (8px) below the other cards at every width; the Figma frame had 13.5px here, which read as a mistake. */
.card.card-wide {
  margin: 8px 0 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.card-wide .shot {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  background: #171717;
}

/* ---- Export tiles ---- */
.tiles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px; /* the same gap as the cards above */
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}
.tiles li {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--card);
  border-radius: var(--radius);
  padding: 34.5px 37px 31px;
  display: flex;
  flex-direction: column;
  min-height: 276.5px;
}
/* On hover, a soft glow of the tile's own colour along its edges, from the Figma frame: there it is a 101px border on a
   box 140px wider than the tile, blurred 42 and clipped to the tile, which is an inset shadow whose edge sits 31px
   inside the tile with a 21px sigma (CSS shadow blur is twice the sigma). */
.tiles li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 42px 31px var(--glow);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: -1;
}
/* The colour shows on hover only. */
.tiles li:hover::before {
  opacity: 0.6;
}
.tiles li:nth-child(1) { --glow: #4f59b6; }
.tiles li:nth-child(2) { --glow: #8a4fb6; }
.tiles li:nth-child(3) { --glow: #b64f7f; }
.tiles li:nth-child(4) { --glow: #b6874f; }
.tiles li:nth-child(5) { --glow: #4fa9b6; }
.tiles li:nth-child(6) { --glow: #5fb64f; }
.tiles strong {
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #eaeaea;
}
.tiles span {
  margin-top: auto;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--faint-foreground);
}

/* ---- Pricing: white card on a live look, the app beside it ---- */
#pricing .head {
  margin-bottom: 60px;
}
.price-band {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: #b9a9e6;
  padding: 29px 30px 31px;
  display: grid;
  gap: 26px;
  align-items: start;
}
@media (min-width: 820px) {
  .price-band {
    grid-template-columns: 339px 1fr;
    min-height: 480px; /* a minimum, not a fixed height: the card must never be clipped when it grows */
  }
}
.tiers {
  display: grid;
}
.tier {
  border-radius: 28px;
  background: #fff;
  color: #1f1f1f;
  padding: 34.5px 37px 31px; /* the same inner padding as the export tiles */
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Flex so the space in the markup does not count: at 80px that space alone is 20px wide. */
.tier .price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 80px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.tier .price small {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgba(11, 11, 11, 0.5);
}
.tier .note {
  font-size: 13px;
  letter-spacing: -0.02em;
  color: #777;
}
/* Figma: the rule 16px under the price, the first check 20px under the rule, rows 48px apart. */
.includes {
  margin: 15.5px 0 0;
  padding: 19px 0 0;
  border-top: 1px solid rgba(11, 11, 11, 0.12);
  list-style: none;
  display: grid;
  gap: 24px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: rgba(31, 31, 31, 0.6);
}
.includes li {
  display: flex;
  align-items: center;
  gap: 14.5px;
}
/* The check from the design: a 1px circle and a 1px tick. */
.includes li::before {
  content: "";
  flex: none;
  width: 23px;
  height: 23px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.8613 22.8613' fill='none'%3E%3Ccircle cx='11.4307' cy='11.4307' r='10.9307' stroke='%230B0B0B'/%3E%3Cpath d='M6.65039 10.9144L10.1816 14.4457L16.2113 8.41602' stroke='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tier .btn {
  margin-top: 35px;
  width: 100%;
}
/* The window runs off the band's bottom and right edge, like a crop. */
.price-shot {
  margin: 0 -30px -31px 0;
  width: calc(100% + 30px);
  border-radius: 19px 0 0 0;
  overflow: hidden;
  background: #f4f4f4;
}
/* Beside the card it keeps the design's size and runs off the band's right and bottom edge. */
@media (min-width: 820px) {
  .price-shot {
    /* Out of the grid flow, so the band is as tall as the card and the window just runs off its edges. */
    position: absolute;
    top: 29px;
    left: 395px; /* the band's padding, the card column and the gap */
    margin: 0;
    width: 1032.5px;
    border-radius: 19px;
  }
}
.price-shot img {
  width: 100%;
}

/* ---- FAQ ---- */
.faq-grid {
  display: grid;
  gap: 24px 64px;
  align-items: start;
}
@media (min-width: 820px) {
  .faq-grid {
    grid-template-columns: 5fr 7fr;
  }
}
.faq {
  display: grid;
}
.faq details {
  border-bottom: 1px solid var(--border);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 32px 18px 0;
  font-weight: 500;
  position: relative;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}
.faq details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}
.faq details p {
  margin: 0 0 18px;
  color: var(--muted-foreground);
  max-width: 40rem;
}

/* ---- Outro: a rounded dark panel on a live look, with the call to action, the footer and the name inside ---- */
.outro {
  position: relative;
  margin-top: 80px; /* the same gap as between the other sections */
  padding-bottom: 24px;
  overflow: hidden;
  isolation: isolate;
}
/* The look runs behind the lower part of the panel and below it, so it shows at the sides and the bottom. */
.outro .band-canvas {
  top: 40%;
  height: 60%;
}
.panel {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius);
  padding: clamp(64px, 8vw, 110px) clamp(24px, 5vw, 64px) clamp(28px, 4vw, 44px);
  text-align: center;
}
.outro h2 {
  font-size: clamp(34px, 4.2vw, 46px);
  line-height: 1.05;
}
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
/* The dark fill is a layer under the content, masked so the name is cut out of it (the mask is in index.html). */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--card);
  -webkit-mask: url(#wordmark-cut);
  mask: url(#wordmark-cut);
}
.cut-defs {
  position: absolute;
  width: 0;
  height: 0;
}
/* Headline, one line, one button: the same rhythm as the hero. */
.panel .sub {
  margin: 16px auto 0;
}
.outro .cta {
  margin-top: 25px;
}
/* The footer inside the panel: the brand and a line about it, then two short columns of links. */
.panel-footer {
  margin-top: clamp(64px, 8vw, 100px);
  padding-top: 40px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 32px;
  text-align: left;
  font-size: 14px;
  letter-spacing: -0.02em;
}
@media (min-width: 720px) {
  .panel-footer {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 40px;
  }
}
.panel-brand p {
  margin: 16px 0 0;
  max-width: 300px;
  color: var(--muted-foreground);
}
.panel-footer nav {
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: start;
}
.panel-footer h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--muted-foreground);
}
.panel-footer a {
  text-decoration: none;
  color: var(--foreground);
  transition: color 0.15s;
}
.panel-footer a:hover {
  color: var(--muted-foreground);
}
.panel-legal {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 13px;
  color: var(--muted-foreground);
  text-align: left;
}
/* As wide as the content column (.wrap, like the cards above): site.js measures the ink and sets the font size and the left shift to match. */
.wordmark {
  margin-top: clamp(32px, 5vw, 56px);
  font-size: clamp(88px, 18.5vw, 280px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.8;
  user-select: none;
  white-space: nowrap;
  text-align: left;
  /* This div only holds the space and is measured by site.js; the letters themselves are cut out of the panel. */
  color: transparent;
  margin-right: -0.15em;
}

/* ---- 404: the hero's shape, centred in whatever is left of the viewport ---- */
body.lost {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.lost-hero {
  flex: 1;
  display: grid;
  place-items: center;
}
.lost-hero h1 {
  margin-top: 0; /* the hero rule spaces its headline from the app icon; there is no icon here */
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.016;
  letter-spacing: -0.03em;
}
.lost-code {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}
.lost-hero .sub {
  margin-top: 16px;
  max-width: 326px;
}
.lost-hero .btn {
  margin-top: 25px;
}
/* The footer-only panel (404): no call to action above the links, so no rule and less room at the top. */
.outro-footer .panel {
  padding-top: clamp(28px, 4vw, 44px);
}
.outro-footer .panel-footer {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.outro-footer .band-canvas {
  top: 25%;
  height: 75%;
}

/* ---- Text pages: privacy, support, thank you ---- */
.page {
  max-width: 720px;
  margin: 48px auto 0;
}
.page h1 {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
}
.page .meta {
  margin-top: 8px;
  color: var(--muted-foreground);
  font-size: 14px;
}
.page h2 {
  margin: 40px 0 0;
  font-size: 20px;
}
.page p,
.page li {
  color: #c9c9c9;
}
.page ul,
.page ol {
  padding-left: 22px;
}
.page .steps {
  margin-top: 32px;
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  border-radius: 18px;
  background: var(--card);
  padding: 22px 22px 22px 64px;
  position: relative;
  color: var(--foreground);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 22px;
  top: 21px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 14px;
  font-weight: 600;
}
.steps p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
}
.steps .btn {
  margin-top: 14px;
  margin-right: 8px;
}

@media (max-width: 560px) {
  .wrap {
    padding: 0 16px;
  }
  :root {
    --radius: 28px;
  }
  .card {
    min-height: 0;
    padding: 36px 24px 32px;
  }
  .card h3 {
    padding-top: 28px;
  }
  .band .window {
    width: calc(100% - 32px);
    border-radius: 12px;
  }
  .tiles li {
    min-height: 170px;
    padding: 24px;
  }
  .tiles li::before {
    box-shadow: inset 0 0 24px 16px var(--glow);
  }
  .tiles strong {
    font-size: 24px;
  }
  .price-band {
    padding: 14px;
    gap: 14px;
  }
  /* Concentric with the band: its radius less its padding; the same inner padding as the tiles at this width. */
  .tier {
    border-radius: 14px;
    padding: 24px;
  }
  .price-shot {
    width: calc(100% + 14px);
    margin-bottom: -14px;
    border-radius: 14px 0 0 0;
  }
  .hero {
    padding: 56px 0 56px;
  }
  .card {
    padding-top: 40px;
  }
  .tier .price {
    font-size: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}