/* The landing page, brand v4 (4 Nov 2026). Shared tokens, type and the glow button live in app.css.
   Will: "a glowing example of an ai age app. The example circles should be grouped in like a clump and grow when
   you click them ... super sleek and clean". Light paper, one aurora behind the clump, big Fraunces, Geist for UI,
   the afterglow ring on the one main action. Every circle stays whole (public/circle.json). */

:root { --gutter: clamp(20px, 4.2vw, 64px); --page: 1360px; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.landing { overflow-x: clip; }
.veil { position: fixed; inset: 0; z-index: -3; background: var(--paper); opacity: 0; pointer-events: none; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: #fff; color: var(--ink); padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow); text-decoration: none; font-weight: 500; }
.skip:focus { left: 16px; }

/* Content arrives with the motion layer; if it never runs, it appears anyway. */
.js .wait { opacity: 0; animation: wait-failsafe 0.01s 2.6s forwards; }
.still .wait { opacity: 1; animation: none; }
@keyframes wait-failsafe { to { opacity: 1; } }

h1 em, h2 em, h3 em { padding-right: 0.08em; margin-right: -0.04em; }
/* Once the headline is split into words for its entrance, each word carries its slice of the italic's gradient. */
.hero-title em.split-em { background: none; color: var(--ink); padding: 0; margin: 0; }
.hero-title em.split-em .w { background-image: var(--afterglow-text); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.07em; margin-right: -0.07em; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 40;
  width: min(calc(var(--page) - 40px), calc(100% - 24px));
  display: flex; align-items: center; gap: 20px; padding: 8px 8px 8px 20px; border-radius: 999px;
  transition: background 0.6s var(--ease), box-shadow 0.6s var(--ease), backdrop-filter 0.6s var(--ease);
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 12px 34px -20px rgba(70, 40, 90, 0.4);
}
.nav .wordmark { font-size: 28px; margin-right: auto; }
.nav-links { display: flex; gap: 6px; }
.nav-links a { font: 500 15px/1 var(--sans); color: var(--ink-2); text-decoration: none; padding: 12px 14px; border-radius: 999px; transition: background 0.3s, color 0.3s; }
.nav-links a:hover { background: rgba(31, 26, 34, 0.05); color: var(--ink); }
@media (max-width: 760px) { .nav-links { display: none; } .nav { padding-left: 16px; } .nav .wordmark { font-size: 25px; } }
@media (max-width: 380px) { .nav .button.glow.small { padding: 11px 15px; font-size: 14px; } }

/* ---------- hero ---------- */
.l-hero {
  position: relative; isolation: isolate; min-height: 100svh; max-width: var(--page); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(20px, 3vw, 56px);
  padding: 116px var(--gutter) 56px;
}
.aurora { position: absolute; inset: -6% -14% -10% 4%; z-index: -1; pointer-events: none; filter: blur(72px) saturate(1.2); }
.aurora i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.aurora .a1 { width: 44vw; height: 44vw; right: 4%; top: 2%; background: radial-gradient(circle, rgba(247, 192, 157, 0.72), transparent 64%); }
.aurora .a2 { width: 36vw; height: 36vw; right: 30%; top: 34%; background: radial-gradient(circle, rgba(240, 150, 178, 0.5), transparent 64%); }
.aurora .a3 { width: 40vw; height: 40vw; right: -8%; top: 38%; background: radial-gradient(circle, rgba(185, 166, 243, 0.58), transparent 64%); }
.aurora .a4 { width: 30vw; height: 30vw; right: 46%; top: 62%; background: radial-gradient(circle, rgba(169, 195, 236, 0.5), transparent 64%); }
.bloom { position: absolute; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 250, 246, 0.75) 0%, rgba(247, 192, 157, 0.16) 38%, transparent 68%); opacity: 0; transition: opacity 1s var(--ease); }
.bloom.on { opacity: 1; }

.hero-title { font-size: clamp(50px, 6.3vw, 98px); line-height: 0.97; letter-spacing: -0.038em; text-wrap: balance; max-width: 9.5em; }
.hero-title .w { will-change: transform, filter, opacity; }
.l-hero .lead { font-size: clamp(18px, 1.3vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 27em; margin-top: 30px; }
.l-hero .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 40px; }
.l-hero .fine { margin-top: 26px; font-size: 14px; color: var(--muted); }

/* ---------- the clump ---------- */
.clump { position: relative; width: 100%; }
.clump-stage { position: relative; width: 100%; aspect-ratio: 1.04; max-height: min(76svh, 760px); margin: 0 auto; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.clump-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.clump-node, .clump-node:hover, .clump-node:active {
  position: absolute; left: 0; top: 0; width: 100px; height: 100px; min-height: 0; padding: 0; border-radius: 50%;
  background: transparent; box-shadow: none; transform-origin: 50px 50px; transition: none; cursor: pointer; will-change: transform;
}
.clump-node:focus-visible { outline: 2px solid var(--lilac-ink); outline-offset: 3px; }
.no-gl .clump-node video { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; pointer-events: none; }
.clump-sources { position: fixed; left: 0; top: 0; width: 2px; height: 2px; overflow: hidden; opacity: 0.01; pointer-events: none; }
.clump-sources video { width: 2px; height: 2px; }

.clump-caption { text-align: center; margin-top: 6px; min-height: 92px; }
.clump-caption .who { font-family: var(--script); font-style: italic; font-weight: 300; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(32px, 3vw, 44px); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); }
.clump-caption .where { font-size: 15px; color: var(--muted); margin-top: 6px; }

@media (max-width: 960px) {
  .l-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 104px; gap: 0; }
  /* On a phone the clump comes straight after the headline, so the first screen shows the memories. */
  .l-hero-copy { display: contents; }
  .hero-title { order: 1; max-width: 10em; }
  .clump { order: 2; margin-top: 14px; }
  .l-hero .lead { order: 3; margin-top: 18px; }
  .l-hero .ctas { order: 4; margin-top: 28px; }
  .l-hero .fine { order: 5; margin-top: 20px; }
  .clump-stage { aspect-ratio: 1 / 1.02; max-height: none; }
  .aurora { inset: 30% -30% -6% -30%; }
  .aurora .a1 { width: 90vw; height: 90vw; } .aurora .a2 { width: 70vw; height: 70vw; } .aurora .a3 { width: 80vw; height: 80vw; } .aurora .a4 { width: 60vw; height: 60vw; }
}

/* ---------- how it works: three moments of the day, stacked like memories ---------- */
.how { max-width: var(--page); margin: 0 auto; padding: clamp(96px, 13vw, 200px) var(--gutter) clamp(40px, 6vw, 96px); }
.how > h2 { font-size: clamp(42px, 5.6vw, 86px); line-height: 0.98; letter-spacing: -0.035em; max-width: 13em; text-wrap: balance; }
.moments { list-style: none; padding: 0; margin: clamp(56px, 7vw, 112px) 0 0; display: grid; gap: clamp(28px, 6vh, 64px); }
.moment {
  position: sticky; top: calc(92px + var(--i) * 14px); height: min(80svh, 780px); min-height: 520px;
  border-radius: 36px; overflow: hidden; isolation: isolate; background: #1a1210; color: #fbf4ec;
  box-shadow: 0 50px 100px -50px rgba(40, 20, 30, 0.6); transform-origin: 50% 0;
}
.moment-pic { position: absolute; inset: 0; margin: 0; z-index: -2; }
.moment-dim { position: absolute; inset: 0; background: #0d0806; opacity: 0; pointer-events: none; }
.moment-pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); display: block; will-change: transform; }
/* A scrim under the words only (the photos keep their left third calm for them). */
.moment::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(22, 13, 11, 0.74) 0%, rgba(22, 13, 11, 0.46) 34%, rgba(22, 13, 11, 0) 62%),
    linear-gradient(0deg, rgba(22, 13, 11, 0.45) 0%, rgba(22, 13, 11, 0) 40%); }
.moment.tone-light { color: var(--ink); background: #f3e6df; }
.moment.tone-light::before { background: linear-gradient(90deg, rgba(250, 242, 236, 0.9) 0%, rgba(250, 242, 236, 0.62) 34%, rgba(250, 242, 236, 0) 60%); }
.moment::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.moment-copy { position: absolute; left: clamp(28px, 4.5vw, 72px); bottom: clamp(28px, 4.5vw, 72px); max-width: min(30em, 44%); }
.moment-copy h3 { color: inherit; font-size: clamp(38px, 4.4vw, 68px); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.moment.tone-dark .moment-copy h3 em { background: linear-gradient(110deg, #f7c09d 0%, #f3a3bd 50%, #c9b8f7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.moment-copy p { font-size: 18px; line-height: 1.6; margin-top: 20px; color: inherit; opacity: 0.9; max-width: 27em; }
.moment-ui { position: absolute; right: clamp(24px, 4vw, 64px); bottom: clamp(24px, 4vw, 64px); }

/* The table card, as printed (cards.html). */
.ui-card .tc { width: 228px; padding: 26px 22px 20px; border-radius: 14px; text-align: center; color: var(--ink);
  background: radial-gradient(70% 40% at 15% 100%, rgba(247, 180, 140, 0.55), transparent 70%), radial-gradient(70% 40% at 95% 100%, rgba(182, 164, 242, 0.55), transparent 70%), #fbf8f4;
  box-shadow: 0 2px 4px rgba(20, 10, 10, 0.2), 0 30px 60px -20px rgba(10, 5, 5, 0.7); transform: rotate(-3deg); }
.tc-names { font-family: var(--script); font-style: italic; font-weight: 300; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: 34px; line-height: 1; letter-spacing: -0.02em; }
.tc-date { font-family: var(--script); font-style: italic; font-size: 13px; color: #8a6d4a; margin-top: 6px; }
.tc-ask { font-family: var(--script); font-style: italic; font-weight: 300; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: 19px; margin-top: 16px; color: var(--ink-2); }
.tc-qr { width: 104px; height: 104px; margin: 14px auto 0; padding: 8px; background: #fff; border-radius: 8px; }
.tc-qr svg { width: 100%; height: 100%; display: block; }
.tc-how { font-size: 10.5px; line-height: 1.4; color: var(--muted); margin-top: 12px; }

/* The guest's camera: a dark viewfinder, the real lens on a real loop. */
.ui-cam { width: 260px; padding: 16px 16px 18px; border-radius: 30px; background: radial-gradient(80% 50% at 50% 40%, #241a28 0%, #0d0a12 75%);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 230, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.8); color: #f6eee4; }
.uc-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #bcaebb; }
.uc-name { font-family: var(--script); font-style: italic; font-weight: 300; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: 19px; color: #f6eee4; }
.uc-sync { display: inline-flex; align-items: center; gap: 6px; }
.uc-sync i { width: 6px; height: 6px; border-radius: 50%; background: #a9c79a; box-shadow: 0 0 8px rgba(169, 199, 154, 0.8); }
.uc-lens { position: relative; width: 196px; height: 196px; margin: 18px auto 16px; }
.uc-canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.uc-src { position: absolute; width: 2px; height: 2px; opacity: 0.01; left: 0; top: 0; pointer-events: none; }
.uc-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 12px; color: #bcaebb; }
.uc-left { justify-self: start; } .uc-time { justify-self: end; font-variant-numeric: tabular-nums; }
.uc-rec { width: 54px; height: 54px; border-radius: 50%; position: relative; display: grid; place-items: center; }
.uc-rec::after { content: ""; width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #f49a8c, #d9576b); }
.uc-rec svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.uc-rec circle { fill: none; stroke-width: 4; }
.uc-track { stroke: rgba(246, 238, 228, 0.16); }
.uc-prog { stroke: #f096b2; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 200; filter: drop-shadow(0 0 3px rgba(240, 150, 178, 0.9)); }

/* The film being made: the steps it really takes, then the film. */
.ui-weave { width: 300px; padding: 22px 22px 18px; border-radius: 26px; background: rgba(255, 255, 255, 0.78); color: var(--ink);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 30px 60px -30px rgba(70, 40, 90, 0.5); }
.uw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; color: var(--muted); }
.uw-steps li { display: flex; align-items: center; gap: 10px; }
.uw-steps li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: rgba(31, 26, 34, 0.14); transition: background 0.4s, box-shadow 0.4s; }
.uw-steps li.on { color: var(--ink); }
.uw-steps li.on::before { background: #f096b2; box-shadow: 0 0 10px rgba(240, 150, 178, 0.9); }
.uw-steps li.now span, .uw-steps li.now { background: linear-gradient(100deg, var(--muted) 30%, var(--ink) 45%, #cf5f8c 52%, var(--ink) 60%, var(--muted) 75%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.8s linear infinite; }
.uw-steps li.done::before { background: #b9a6f3; box-shadow: none; }
.uw-done { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.uw-done b { display: block; font-family: var(--script); font-style: italic; font-weight: 300; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: 24px; line-height: 1.1; }
.uw-done i { display: block; font-style: normal; font-size: 13px; color: var(--muted); margin-top: 2px; }
.uw-play { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: var(--ink); box-shadow: 0 8px 20px -8px rgba(70, 40, 90, 0.7); }
.uw-play svg { width: 18px; height: 18px; margin-left: 2px; }

@media (max-width: 860px) {
  .moment { height: calc(100svh - 96px - var(--i) * 10px); min-height: 0; max-height: 760px; border-radius: 26px; top: calc(80px + var(--i) * 10px); }
  .moment::before { background: linear-gradient(180deg, rgba(22, 13, 11, 0.78) 0%, rgba(22, 13, 11, 0.4) 34%, rgba(22, 13, 11, 0) 56%), linear-gradient(0deg, rgba(22, 13, 11, 0.4) 0%, rgba(22, 13, 11, 0) 34%); }
  .moment.tone-light::before { background: linear-gradient(180deg, rgba(250, 242, 236, 0.92) 0%, rgba(250, 242, 236, 0.6) 34%, rgba(250, 242, 236, 0) 56%); }
  .moment-copy { left: 22px; right: 22px; top: 26px; bottom: auto; max-width: none; }
  .moment-copy h3 { font-size: clamp(34px, 9vw, 44px); }
  .moment-copy p { font-size: 16px; margin-top: 12px; }
  .moment-ui { right: 50%; bottom: 18px; transform: translateX(50%) scale(0.78); transform-origin: 50% 100%; }
}
@media (max-width: 860px) and (max-height: 760px) { .moment-ui { transform: translateX(50%) scale(0.66); } .moment-copy p { font-size: 15px; line-height: 1.5; } }
@media (prefers-reduced-motion: reduce) { .moment { position: relative; top: 0; } }

/* ---------- the film: the guests become the credits ---------- */
.film-sec { max-width: var(--page); margin: 0 auto; padding: clamp(96px, 12vw, 180px) var(--gutter) clamp(40px, 6vw, 96px);
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.film-copy h2 { font-size: clamp(42px, 4.8vw, 76px); line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; }
.film-copy p { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin-top: 24px; max-width: 26em; }
.film-screen::before { content: ""; display: block; padding-top: 56.25%; }
.film-screen { position: relative; isolation: isolate; width: 100%; min-width: 0; align-self: center; border-radius: 30px; overflow: hidden; background: #140d11;
  box-shadow: 0 60px 120px -50px rgba(240, 150, 178, 0.6), 0 40px 80px -40px rgba(70, 40, 90, 0.55); }
.screen-bg { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; object-fit: cover; z-index: -2;
  filter: blur(26px) brightness(0.5) saturate(0.85) sepia(0.2); }
.film-screen::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(10, 6, 8, 0.55) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.screen-card { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 7% 9%; color: #f6eee4; }
.credits { font-family: var(--script); font-style: italic; font-weight: 300; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(19px, 2.1vw, 33px); line-height: 1.32; letter-spacing: -0.01em; max-width: 21em; text-wrap: balance; text-shadow: 0 0 22px rgba(0, 0, 0, 0.45); }
.credit-couple { font-family: var(--script); font-style: italic; font-weight: 300; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(30px, 3.5vw, 56px); line-height: 1; letter-spacing: -0.02em; margin-top: 0.7em; color: #fff7ef; text-shadow: 0 0 30px rgba(247, 192, 157, 0.45); }
@media (max-width: 960px) { .film-sec { grid-template-columns: 1fr; } .film-screen { border-radius: 22px; } }

/* ---------- your weddings (this device) ---------- */
.yours { max-width: 820px; margin: 0 auto; padding: clamp(72px, 9vw, 128px) var(--gutter) 0; }
.yours h2 { font-size: clamp(36px, 4vw, 56px); }
#yours-list { margin-top: 18px; }
.yours a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: clamp(28px, 3vw, 38px); }
.yours a svg { width: 22px; height: 22px; flex: none; color: var(--muted); transition: transform 0.5s var(--ease), color 0.3s; }
.yours a:hover svg { transform: translateX(5px); color: var(--ink); }

/* ---------- set up ---------- */
.create { position: relative; max-width: var(--page); margin: 0 auto; padding: clamp(96px, 12vw, 180px) var(--gutter) clamp(96px, 12vw, 180px);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 104px); align-items: start; }
.create::after { content: ""; position: absolute; z-index: -1; right: 4%; top: 22%; width: 52%; height: 64%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(240, 150, 178, 0.34), rgba(185, 166, 243, 0.24) 55%, transparent); filter: blur(50px); }
.create-copy { position: sticky; top: 130px; }
.create-copy h2 { font-size: clamp(44px, 5.4vw, 84px); line-height: 0.98; letter-spacing: -0.035em; }
.create-copy p { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin-top: 24px; max-width: 24em; }
.create-panel { position: relative; display: grid; gap: 24px; padding: clamp(24px, 3.2vw, 44px); border-radius: 34px;
  background: rgba(255, 255, 255, 0.84); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), 0 50px 100px -50px rgba(70, 40, 90, 0.45); }
.create-panel .row { gap: 18px; }
.field label, .seg legend { display: block; font: 500 14px/1.3 var(--sans); color: var(--ink-2); margin: 0 0 9px; padding: 0; }
.create-panel input:not([type="radio"]):not([type="checkbox"]) { font-family: var(--sans); font-size: 17px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.92); border-color: rgba(31, 26, 34, 0.1); min-height: 56px; }
.create-panel input:not([type="radio"]):not([type="checkbox"]):hover { border-color: rgba(31, 26, 34, 0.2); }
.create-panel input:not([type="radio"]):not([type="checkbox"]):focus { border-color: rgba(125, 102, 214, 0.55); box-shadow: 0 0 0 4px rgba(182, 164, 242, 0.24), 0 8px 24px -12px rgba(125, 102, 214, 0.4); }
.create-panel button.wide { margin-top: 6px; }
/* Booking: the offer under the copy, the two ticks, the plain-English terms line. */
.create-copy .offer { margin-top: 18px; font-size: 17px; line-height: 1.5; color: var(--ink); }
.create-copy .offer strong { font-weight: 600; }
.check { display: flex; gap: 12px; align-items: flex-start; font: 400 15px/1.45 var(--sans); color: var(--ink-2); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #1f1a22; }
.check a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rose); text-underline-offset: 3px; }
.c-fine { font: 400 13.5px/1.5 var(--sans); color: var(--muted); margin: 0; }
.seg-note { font: 400 14px/1.4 var(--sans); color: var(--ink-2); margin: 10px 0 0; }

/* Segmented choices: the white pill slides to the option you pick. */
.seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.seg-track { position: relative; display: flex; padding: 4px; border-radius: 999px; background: rgba(31, 26, 34, 0.055); }
.seg-track label { position: relative; z-index: 1; flex: 1 1 0; margin: 0; cursor: pointer; }
.seg-track input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; border: 0; }
.seg-track label span { display: block; text-align: center; padding: 12px 4px; border-radius: 999px; font: 500 15px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; transition: color 0.25s var(--ease); }
.seg-track label:hover span { color: var(--ink-2); }
.seg-track input:checked + span { color: var(--ink); }
.seg-track input:focus-visible + span { outline: 2px solid var(--lilac-ink); outline-offset: 1px; }
.seg-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(31, 26, 34, 0.08), 0 8px 18px -10px rgba(70, 40, 90, 0.45);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { .seg-pill { transition: none; } }
@media (max-width: 960px) { .create { grid-template-columns: 1fr; } .create-copy { position: static; } .create::after { width: 90%; right: 5%; } }

/* ---------- footer: the name returns, full width ---------- */
.l-foot { position: relative; isolation: isolate; overflow: hidden; padding: 0 var(--gutter) 36px; }
.l-foot::before { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: -30%; height: 80%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(247, 192, 157, 0.5), rgba(240, 150, 178, 0.3) 45%, rgba(185, 166, 243, 0.18) 70%, transparent); filter: blur(40px); }
.giant-mark, .giant-mark .c {
  background: linear-gradient(180deg, rgba(31, 26, 34, 0.92) 10%, rgba(31, 26, 34, 0.18) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.giant-mark { font-family: var(--script); font-style: italic; font-weight: 300; font-variation-settings: "SOFT" 100, "opsz" 144;
  font-size: 22.5vw; line-height: 1.04; letter-spacing: -0.055em; text-align: center; white-space: nowrap; margin: -0.12em -0.05em -0.08em; padding: 0 0.06em 0.2em; }
.giant-mark .c { padding: 0 0.03em 0.3em 0; margin: 0 -0.03em -0.3em 0; } /* room for the g, so its tail keeps the gradient */
.giant-mark .c:last-child { padding-right: 0.14em; margin-right: -0.14em; } /* room for an italic last letter leaning past its box (was clipping rosereel's l) */
.giant-mark .lens-o { width: 0.46em; height: 0.46em; box-shadow: 0 0 0.12em rgba(240, 150, 178, 0.55); margin: 0 0.05em 0 0.035em; }
.foot-row { max-width: var(--page); margin: 18px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 18px 40px; flex-wrap: wrap; }
.foot-cta { font: 500 15px/1 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--rose); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.foot-cta:hover { text-decoration-color: var(--lilac-ink); }
.foot-row .credit { font-size: 13px; color: var(--muted); max-width: 46em; }