/* Cueday ad landing pages (cueday.io/start/<slug>): shared styles.
   Mobile first: most visitors come from a Meta ad on a phone, so every
   rule is written for a ~390px screen and widened with min-width queries.
   Visual language is cueday.io's (public/index.html): Playfair Display +
   Inter, the app windows drawn from the web app's theme tokens, cqw-based
   phone frames. Solid backgrounds only (no gradients): dark #191919,
   light #f7f7f5, white. Page-specific mock-ups live in each page's <style>. */

* { box-sizing: border-box; }
:root {
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --gutter: clamp(20px, 5vw, 56px);
  --dark: #191919; --light: #f7f7f5;
}
html, body { margin: 0; max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
html.sheet-open, html.sheet-open body { overflow: hidden; }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
a { color: inherit; }
img { display: block; max-width: 100%; }
/* Visually hidden, still read by screen readers (form labels). */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Section colour schemes: dark (default), light, white ---- */
body, .dk { --bg: #191919; --fg: #fff; --text: rgba(255,255,255,0.86); --muted: rgba(255,255,255,0.6); --line: rgba(255,255,255,0.1); --line2: rgba(255,255,255,0.2); --card: #222; --chip: #2a2a2a; --err: #ff9d8f; }
.lt { --bg: #f7f7f5; --fg: #111; --text: #333; --muted: #6b6b6b; --line: rgba(0,0,0,0.09); --line2: rgba(0,0,0,0.18); --card: #fff; --chip: #ecebe8; --err: #b3261e; }
.wh { --bg: #fff; --fg: #111; --text: #333; --muted: #6b6b6b; --line: rgba(0,0,0,0.09); --line2: rgba(0,0,0,0.18); --card: #f7f7f5; --chip: #ecebe8; --err: #b3261e; }
body, .dk, .lt, .wh { background: var(--bg); color: var(--fg); }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; margin: 0; }
h1 em, h2 em, h3 em { font-style: italic; }
h2 { font-size: clamp(31px, 7.6vw, 54px); line-height: 1.06; text-wrap: balance; }
.eyebrow { font: 600 11px/1.3 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: clamp(16px, 1.8vw, 18px); line-height: 1.55; color: var(--muted); margin: 14px 0 0; text-wrap: pretty; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border: 0; border-radius: 999px;
  font: 600 16px var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s var(--ease), opacity 0.2s; }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--fg); color: var(--bg); }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line2); }
@media (hover: hover) { .btn.primary:hover { opacity: 0.88; } .btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--fg); } }
@media (max-width: 360px) { .btn { font-size: 15px; padding: 0 18px; } }
.fine { font-size: 13px; line-height: 1.4; color: var(--muted); text-wrap: balance; }
/* Words only phones see ("· set up on your computer"). */
.ph { display: none; }
html.is-phone .ph { display: inline; }
html.is-phone .ph-only { display: block; }
.ph-only { display: none; }

/* ---- Top bar (not sticky: phones need the height for the hero) ---- */
.nav { background: var(--dark); border-bottom: 1px solid rgba(255,255,255,0.08); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; font: 600 21px var(--serif); color: #fff; }
.logo i { width: 27px; height: 27px; border-radius: 8px; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; font: italic 600 18px var(--serif); }
.nav-r { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.nav-r .login { color: rgba(255,255,255,0.7); text-decoration: none; }
.nav-r .login:hover { color: #fff; }
.nav .btn { height: 38px; padding: 0 16px; font-size: 14px; background: #fff; color: #000; }
/* No Log in on phones: the app is for computers (as on cueday.io). */
html.is-phone .nav-r .login { display: none; }

/* ---- Hero: headline, one line, CTA, visual — all in the first phone screen ---- */
.hero { background: var(--dark); color: #fff; padding: 24px 0 44px; text-align: center; overflow: hidden; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); color: rgba(255,255,255,0.82); font: 600 12px var(--sans); letter-spacing: 0.02em; }
.pill svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero h1 { font: 600 clamp(35px, 9.4vw, 68px)/1.04 var(--serif); letter-spacing: -0.015em; margin: 14px auto 0; max-width: 13em; text-wrap: balance; }
.hero h1 em { font-weight: 500; }
.hero .sub { font: 400 clamp(16px, 1.8vw, 19px)/1.45 var(--sans); color: rgba(255,255,255,0.72); max-width: 30em; margin: 12px auto 0; text-wrap: balance; }
.hero .ctas { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; }
.hero .ctas .btn { width: 100%; max-width: 340px; }
.hero .fine { margin: 0; color: rgba(255,255,255,0.6); }
.hero-vis { position: relative; margin-top: 28px; }
@media (min-width: 960px) {
  .hero { padding: 72px 0 80px; text-align: left; }
  .hero h1 { font-size: clamp(44px, 4.4vw, 60px); }
  .hero-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 64px; align-items: center; }
  .hero h1, .hero .sub { margin-left: 0; }
  .hero .ctas { align-items: flex-start; margin-top: 28px; }
  .hero .ctas .btn { width: auto; }
  .hero-vis { margin-top: 0; }
}

/* ---- Sections ---- */
.sec { padding: 64px 0; }
@media (min-width: 900px) { .sec { padding: 112px 0; } }
.head { max-width: 720px; }
.head.c { text-align: center; margin: 0 auto; }
.head h2 { margin-top: 12px; }
.split { display: grid; gap: 34px; align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: 0.9fr 1.1fr; gap: 72px; }
  .split.flip > :first-child { order: 2; }
  .split.flip { grid-template-columns: 1.1fr 0.9fr; }
}
.checks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; font-size: 15px; line-height: 1.45; text-align: left; }
.checks li { display: flex; gap: 12px; color: var(--text); }
.checks li::before { content: '✓'; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--fg); color: var(--bg);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.checks b { color: var(--fg); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line); font: 500 13px var(--sans); color: var(--text); }
button.chip { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chip.on { background: var(--fg); color: var(--bg); box-shadow: none; }
.chip i { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* Three small points under a visual */
.pts { display: grid; gap: 10px; margin-top: 28px; }
.pts > div { padding: 16px 18px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.pts h3 { font-size: 19px; }
.pts p { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (min-width: 860px) { .pts { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; } .pts > div { padding: 22px; border-radius: 18px; } .pts h3 { font-size: 22px; } }

/* ---- App windows (the web app's tokens: dark by default, .lt light) ---- */
.appwin {
  --a-bg: #191919; --a-bg2: #202020; --a-card: #252525; --a-line: rgba(255,255,255,0.075); --a-line2: rgba(255,255,255,0.13);
  --a-fg: #f0ece6; --a-text: #d6d2cb; --a-muted: #a7a39c; --a-dim: #7f7b75; --a-sel: rgba(255,255,255,0.08); --a-warn: #f2c58a;
  --a-accent: #fff; --a-on-accent: #000; --a-good: #7fc58a; --a-peach: #f2a981; --a-purple: #a98bff; --a-token: #c4b1ff;
  --a-chrome: #141414; --a-url: #262626; --a-chip: #2a2a2a; --a-chip-fg: #bdb9b2;
  position: relative; border-radius: 14px; overflow: hidden; background: var(--a-bg); color: var(--a-fg); text-align: left; font-size: 13px; line-height: 1.35;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.13), 0 30px 80px rgba(0,0,0,0.45);
}
.appwin.lt {
  --a-bg: #fff; --a-bg2: #f7f7f5; --a-card: #fff; --a-line: rgba(0,0,0,0.09); --a-line2: rgba(0,0,0,0.18);
  --a-fg: #111; --a-text: #333; --a-muted: #6b6b6b; --a-dim: #9a9a9a; --a-sel: rgba(0,0,0,0.06); --a-warn: #b07a2b;
  --a-accent: #111; --a-on-accent: #fff; --a-good: #3e8b4a; --a-peach: #c9826a; --a-purple: #8b5cf6; --a-token: #6d3fd8;
  --a-chrome: #ecebe8; --a-url: #fff; --a-chip: #efede9; --a-chip-fg: #555;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 30px 80px rgba(0,0,0,0.35);
}
.lt .appwin.lt, .wh .appwin.lt { box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 24px 60px rgba(0,0,0,0.12); }
.chrome { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: var(--a-chrome); border-bottom: 1px solid var(--a-line); }
.chrome i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #ff6058; }
.chrome i:nth-child(2) { background: #ffbd2e; } .chrome i:nth-child(3) { background: #29c940; }
.chrome .url { margin: 0 auto; width: min(300px, 52%); height: 20px; line-height: 20px; border-radius: 6px; background: var(--a-url); color: var(--a-muted);
  font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; }
.chrome .sp { width: 39px; flex: none; }
.ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.avatar { width: 24px; height: 24px; border-radius: 50%; flex: none; object-fit: cover; }
.pair { display: inline-flex; flex: none; }
.pair img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--a-bg, #fff); }
.pair img + img { margin-left: -8px; }
.stage-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--tone) 16%, transparent); color: color-mix(in srgb, var(--tone) 65%, var(--a-fg, #111)); }
.stage-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }

/* ---- Phone frame: corners, bezel and camera are shares of its width (cqw) ---- */
.phone { position: relative; container-type: inline-size; }
.phone > .scr, .phone > img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 13cqw; overflow: hidden; object-fit: cover; object-position: top;
  box-shadow: 0 0 0 2.8cqw #0a0a0a, 0 0 0 calc(2.8cqw + 1px) rgba(255,255,255,0.16), 0 30px 80px rgba(0,0,0,0.5); }
.phone::before { content: ''; position: absolute; top: 3cqw; left: 50%; width: 30%; height: 8cqw; margin-left: -15%; border-radius: 999px; background: #000; z-index: 2; }
.phone > .scr { position: relative; font-size: 4cqw; line-height: 1.35; text-align: left; }

/* ---- Browser frame for real screenshots ---- */
.browser { position: relative; border-radius: 12px; overflow: hidden; background: #0b0b0b; box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 30px 80px rgba(0,0,0,0.5); }
.browser .chrome { --a-chrome: #1a1a1a; --a-url: #2a2a2a; --a-muted: #aaa; --a-line: rgba(255,255,255,0.08); }
.browser > img { width: 100%; height: auto; }

/* ---- A notification that floats beside a visual ---- */
.note { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; color: #111; text-align: left;
  box-shadow: 0 16px 44px rgba(0,0,0,0.35); font-size: 12.5px; line-height: 1.35; max-width: 290px; z-index: 3; }
.note .tick { width: 28px; height: 28px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.note b { display: block; font-weight: 600; }
.note span { color: #6b6b6b; font-size: 11.5px; }
.note .pair img { width: 28px; height: 28px; box-shadow: 0 0 0 2px #fff; }

/* ---- An email, as the couple gets it ---- */
.email { border-radius: 14px; overflow: hidden; background: var(--a-bg); color: var(--a-fg); box-shadow: 0 0 0 1px var(--a-line2); text-align: left; }
.email .eh { padding: 12px 14px; border-bottom: 1px solid var(--a-line); font-size: 12px; color: var(--a-muted); display: grid; gap: 4px; }
.email .eh b { color: var(--a-fg); font-weight: 600; }
.email .eb { padding: 14px; font-size: 13px; line-height: 1.6; color: var(--a-text); }
.email .tok { background: rgba(139,92,246,0.14); color: var(--a-token); border-radius: 4px; padding: 0 3px; }

/* ---- "It's all one app": the other landing pages ---- */
.suite { display: grid; gap: 10px; margin-top: 28px; }
.suite a { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; text-decoration: none;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); transition: box-shadow 0.2s; }
.suite a:hover { box-shadow: inset 0 0 0 1px var(--line2); }
.suite .si { width: 42px; height: 42px; border-radius: 12px; background: var(--chip); display: flex; align-items: center; justify-content: center; }
.suite .si svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.suite b { display: block; font: 600 15px var(--sans); }
.suite small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.suite .go { font-size: 18px; color: var(--muted); }
.suite a.here { box-shadow: inset 0 0 0 1.5px var(--fg); }
.suite a.here .go { font: 600 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.suite-more { margin-top: 18px; font-size: 14px; color: var(--muted); text-align: center; }
.suite-more a { color: var(--fg); font-weight: 600; text-decoration: none; }
@media (min-width: 760px) { .suite { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) {
  .suite { grid-template-columns: repeat(5, 1fr); }
  .suite a { grid-template-columns: 1fr; align-content: start; gap: 12px; padding: 20px; }
  .suite .go { display: none; }
  .suite a.here .go { display: block; }
}

/* ---- FAQ ---- */
.faq { max-width: 780px; margin: 28px auto 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 18px; font: 500 19px/1.3 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font: 400 24px/1 var(--sans); transition: transform 0.3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--muted); line-height: 1.65; margin: 12px 0 0; font-size: 15px; }
.faq a { color: var(--fg); }
@media (min-width: 900px) { .faq summary { font-size: 21px; } .faq details { padding: 22px 0; } }

/* ---- Final CTA + footer ---- */
.final { text-align: center; padding: 80px 0 88px; }
.final h2 { font-size: clamp(38px, 9vw, 76px); }
.final .lead { max-width: 30em; margin-left: auto; margin-right: auto; }
.final .ctas { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 26px; }
.final .ctas .btn { width: 100%; max-width: 340px; }
@media (min-width: 900px) { .final { padding: 128px 0; } }
footer { background: var(--dark); color: rgba(255,255,255,0.5); border-top: 1px solid rgba(255,255,255,0.08); font-size: 13px;
  padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: rgba(255,255,255,0.68); text-decoration: none; }
footer a:hover { color: #fff; }
/* Room for the sticky bar under the last line. */
@media (max-width: 700px) { footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* ---- Phones: the email form in place of the trial button (hero + final CTA) ----
   The web app only runs on computers, so a phone gets "Email me my free
   trial link" right where the button would be. Shown under html.is-phone,
   set in each page's <head> before first paint. html.gl-sent (start.js)
   swaps every form for "Check your inbox". 390px phone: input 54 + 10 +
   button 54 = 118px, the same column as the 340px buttons. */
.getlink, .gl-done { display: none; }
html.is-phone .ctas > .js-cta { display: none; }
html.is-phone .getlink { display: block; width: 100%; max-width: 340px; }
html.is-phone.gl-sent .getlink, html.is-phone.gl-sent .gl-note { display: none; }
html.is-phone.gl-sent .gl-done { display: flex; }
.getlink input { display: block; width: 100%; height: 54px; margin: 0; padding: 0 22px; border: 0; border-radius: 999px; background: var(--card); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line2); font: 400 16px var(--sans); text-align: left; outline: none; -webkit-appearance: none; appearance: none; }
.getlink input::placeholder { color: var(--muted); opacity: 1; }
.getlink input:focus { box-shadow: inset 0 0 0 2px var(--fg); }
.getlink input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--err); }
.getlink input:-webkit-autofill { -webkit-text-fill-color: var(--fg); box-shadow: inset 0 0 0 1px var(--line2), inset 0 0 0 60px var(--card); }
.getlink .btn { display: flex; width: 100%; max-width: none; margin-top: 10px; background: var(--fg); color: var(--bg); }
.getlink .btn[disabled] { opacity: 0.6; cursor: default; }
.gl-err { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--err); text-align: left; }
.gl-err:empty { margin: 0; }
.gl-done { gap: 14px; align-items: flex-start; width: 100%; max-width: 340px; padding: 18px 18px 16px; border-radius: 18px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line2); text-align: left; outline: none; }
.gl-done:focus-visible { box-shadow: inset 0 0 0 2px var(--fg); }
.gl-tick { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--fg); color: var(--bg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.gl-done b { display: block; font: 500 22px/1.15 var(--serif); color: var(--fg); }
.gl-done p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.gl-done small { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.gl-again { margin: 10px 0 0; padding: 4px 0; border: 0; background: none; color: var(--fg); font: 600 13px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* A small, plain trust line under the final CTA. */
.trust { max-width: 26em; margin: 26px auto 0; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: balance; }

/* ---- Phones: sticky CTA bar once the hero's button has scrolled away ---- */
.stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #191919; border-top: 1px solid rgba(255,255,255,0.12);
  transform: translateY(110%); transition: transform 0.35s var(--ease); }
.stickybar .t { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,0.6); }
.stickybar .t b { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.stickybar .btn { height: 46px; padding: 0 20px; font-size: 15px; background: #fff; color: #000; }
html.show-sticky .stickybar { transform: none; }
@media (min-width: 701px) { .stickybar { display: none; } }

/* ---- Phones: the email sheet (the web app doesn't run on phones) ---- */
.sheet-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; max-width: 560px; margin: 0 auto; background: #fff; color: #111; text-align: left;
  border-radius: 22px 22px 0 0; padding: 10px 22px calc(22px + env(safe-area-inset-bottom)); transform: translateY(105%); visibility: hidden;
  transition: transform 0.35s var(--ease), visibility 0s linear 0.35s; }
html.sheet-open .sheet-scrim { opacity: 1; pointer-events: auto; }
html.sheet-open .sheet { transform: none; visibility: visible; transition: transform 0.35s var(--ease), visibility 0s; }
.sheet .grab { width: 38px; height: 5px; border-radius: 3px; background: #dcdad5; margin: 0 auto 14px; }
.sheet .x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f0ed; color: #555; font-size: 16px; cursor: pointer; }
.sheet h3 { font: 500 30px/1.08 var(--serif); padding-right: 40px; }
.sheet p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: #555; }
.sheet form { margin-top: 18px; }
.sheet form .btn { margin-top: 10px; }
.sheet input { width: 100%; height: 54px; padding: 0 16px; border-radius: 14px; border: 1px solid #d6d4cf; background: #fff; color: #111;
  font: 400 16px var(--sans); outline: none; -webkit-appearance: none; appearance: none; }
.sheet input:focus { border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }
.sheet .btn { width: 100%; background: #111; color: #fff; }
.sheet .btn[disabled] { opacity: 0.6; }
.sheet .gl-err { color: #b3261e; font-size: 14px; }
.sheet input[aria-invalid="true"] { border-color: #b3261e; }
.sheet .to { font-size: 13.5px; color: #6b6b6b; }
.sheet .fine { margin-top: 12px; color: #8a8a8a; font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  .stickybar, .sheet, .sheet-scrim, .btn { transition: none; }
}