/* 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;
}
/* The icon is a button: it plays the launch film (see "The launch film" below). */
.hero-mark {
  position: relative;
  width: 73.5px;
  height: 73.5px;
  padding: 0;
  border: 0;
  border-radius: 19px;
  background: none;
  cursor: pointer;
}
.hero-mark img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.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. On a narrow screen it would
   run off the right edge, so there the arrow and the label slide left together, the label keeping the page's 24px
   from the edge (the label ends 255px right of the button's left edge; the button is 168px wide and centred). */
.note {
  position: absolute;
  left: min(0px, 50vw - 195px);
  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%;
  height: auto;
  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 37px;
  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: 30px; /* the same as the padding */
  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: 22px; /* the same as the screenshot */
  background: #fff;
  color: #1f1f1f;
  padding: 34.5px 37px 37px; /* 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: 22px 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: 399px; /* the band's padding, the card column and the gap */
    margin: 0;
    width: 1032.5px;
    border-radius: 22px;
  }
}
.price-shot img {
  width: 100%;
}
/* Below the card it keeps the same half-scale as beside it, so the sidebar stays readable: the window is
   cropped by the figure instead of shrunk to the band. */
@media (max-width: 819.98px) {
  .price-shot {
    height: clamp(300px, 55vw, 450px);
  }
  .price-shot img {
    width: 1032.5px;
    max-width: none;
  }
}

/* ---- 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);
}
/* Links in running text (the answers here, and the support, privacy and thank-you pages): underlined in the text's
   own colour, and brighter under the pointer. */
.faq p a,
.page p a,
.page li a:not(.btn) {
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.faq p a:hover,
.page p a:hover,
.page li a:not(.btn):hover {
  color: var(--foreground);
}
.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 {
  /* The side and bottom padding have names: the wordmark's play button is placed by them. */
  --panel-x: clamp(24px, 5vw, 64px);
  --panel-b: clamp(28px, 4vw, 44px);
  position: relative;
  isolation: isolate;
  border-radius: var(--radius);
  padding: clamp(64px, 8vw, 110px) var(--panel-x) var(--panel-b);
  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: an SVG rect masked so the name is cut out of it (the mask is in
   the page). Safari does not apply a url(#mask) to an HTML element, so the fill is SVG as well. */
.panel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
#panel-bg-rect {
  fill: var(--card);
}
/* 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,
.panel-legal a {
  text-decoration: none;
  color: var(--foreground);
  transition: color 0.15s;
}
.panel-footer a:hover,
.panel-legal 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.
     Its line is shorter than its type, so the letters' box reaches up over the row above: it must not take the
     pointer there (it kept the credit's link from being hovered or clicked). */
  pointer-events: none;
  color: transparent;
  margin-right: -0.15em;
}

/* ---- The launch film: a play button on the hero icon and on the name in the footer, and the film in a dialog ---- */
/* The play button itself: the site's light button as a disc, with a dark triangle. */
.play {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
}
/* The play triangle, as drawn for the site (its markup is in the page and in site.js): the drawing covers the
   whole disc and places the triangle itself. */
.play svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
/* The glass over the icon, behind the disc: a pane that blurs the icon to soft colour and darkens it, so the light
   disc stands off it. It fades out towards the icon's edge, which leaves the icon's own glowing rim showing round
   the glass. The fade is a mask: a blurred rounded rectangle, in hundredths of the icon's width (the icon's own
   corner is 26; the glass sits 2.8 in, about 2px, with a corner of 25, a little rounder than the icon's at that depth). */
.hero-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(11, 11, 11, 0.32);
  -webkit-backdrop-filter: blur(8px) saturate(1.5);
  backdrop-filter: blur(8px) saturate(1.5);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='f' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Crect x='2.8' y='2.8' width='94.4' height='94.4' rx='25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='f' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Crect x='2.8' y='2.8' width='94.4' height='94.4' rx='25' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* On the icon the disc sits in the middle and shows under the pointer (or the keyboard's focus), the icon turned to
   glass behind it. That is the icon's whole hover: the disc itself does not change under the pointer. */
.hero-mark .play {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -18px 0 0 -18px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.hero-mark:hover::before,
.hero-mark:focus-visible::before {
  opacity: 1;
}
.hero-mark:hover .play,
.hero-mark:focus-visible .play {
  opacity: 1;
  transform: none;
}
/* The name in the footer: a button the size of the name (site.js adds it and says how tall the name is), with the
   play disc in its middle, larger than on the icon. */
.wordmark-play {
  position: absolute;
  left: var(--panel-x);
  right: var(--panel-x);
  bottom: var(--panel-b);
  height: var(--wordmark-h, 0px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: none;
  font: inherit;
  cursor: pointer;
}
.wordmark-play .play {
  width: 56px;
  height: 56px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2), background-color 0.15s;
}
.wordmark-play:hover .play,
.wordmark-play:focus-visible .play {
  opacity: 1;
  transform: none;
}
/* No glass on the name. Its disc shows light while the pointer is on the name, and darkens once the pointer is on
   the disc itself, like every other light button. */
@media (hover: hover) {
  .wordmark-play .play:hover {
    background: #dedede;
  }
}
.hero-mark:focus-visible,
.wordmark-play:focus-visible,
.film-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}
/* Where there is nothing to hover with, the play buttons are always there: a small disc on the icon's corner, and
   one in the middle of the name (the label would hide too much of it on a phone). No glass: a tap leaves :hover on. */
@media (hover: none) {
  .hero-mark::before {
    display: none;
  }
  .hero-mark .play {
    left: auto;
    top: auto;
    right: -12px;
    bottom: -12px;
    box-sizing: content-box;
    width: 28px;
    height: 28px;
    margin: 0;
    border: 3px solid var(--background); /* a ring of the page's colour between the disc and the icon */
    opacity: 1;
    transform: none;
  }
  .wordmark-play .play {
    width: 44px;
    height: 44px;
    opacity: 1;
    transform: none;
  }
}
/* The film: the whole window, dark, with the picture as large as fits. Wide by default; tall on a phone held upright. */
.film {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
}
.film[open] {
  display: grid;
  place-items: center;
}
.film::backdrop {
  background: rgba(5, 5, 5, 0.92);
}
.film video {
  display: block;
  width: min(100vw - 48px, (100vh - 128px) * 16 / 9, 1920px);
  width: min(100vw - 48px, (100dvh - 128px) * 16 / 9, 1920px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  background: var(--background);
}
.film.tall video {
  width: min(100vw - 32px, (100vh - 120px) * 9 / 16);
  width: min(100vw - 32px, (100dvh - 120px) * 9 / 16);
  aspect-ratio: 9 / 16;
}
.film-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--foreground);
  cursor: pointer;
  transition: background-color 0.15s;
}
.film-close:hover {
  background: rgba(255, 255, 255, 0.18);
}
.film-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}
/* The page does not scroll behind the film. site.js pads the page by the width of the scrollbar it loses. */
html.film-on {
  overflow: hidden;
}

/* ---- 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; /* the same as the padding at this width */
  }
  /* The same corners as the screenshot; the same inner padding as the tiles at this width. */
  .tier {
    border-radius: 22px; /* the same as the screenshot */
    padding: 24px;
  }
  .price-shot {
    width: calc(100% + 14px);
    margin-bottom: -14px;
    border-radius: 22px 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;
  }
}