/* Trial-first web funnel (Riley's handoff "Mobile app onboarding funnel",
 * Desktop v2b and Mobile v2b, 2026-10-04). Sizes, colours and spacing are the
 * design's own inline values; the phone rules mirror the design's
 * "v2b mobile reflow" block. Colours come from tokens.css, which is copied
 * from the app.
 */
/* The design file used SF Pro Rounded, which Apple licenses for its own
 * platforms only, so the web uses the site's open rounded face (Open Runde),
 * as the rest of tryamora.app does. Safari (every iPhone and iPad browser, and
 * Safari on a Mac) still gets the system's own SF Pro Rounded through
 * ui-rounded; Chrome, Brave and Firefox do not expose it to web pages. */
/* Split as the rest of the site does (assets/ds/tokens/fonts.css): an English
 * page downloads the 31 KB Latin half of each weight, not the 155 KB whole. */
@font-face{font-family:"Amora Rounded";src:url("/assets/fonts/open-runde-regular-latin.woff2") format("woff2");font-style:normal;font-weight:400 500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-21FF,U+2212,U+2215,U+25A0-27BF,U+FEFF,U+FFFD}
@font-face{font-family:"Amora Rounded";src:url("/assets/fonts/open-runde-regular-ext.woff2") format("woff2");font-style:normal;font-weight:400 500;font-display:swap;unicode-range:U+0100-0130,U+0132-0148,U+014A-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-0303,U+0305-0307,U+0309-031E,U+0321-0328,U+032A-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03E1,U+03F0-049D,U+04A0-04FF,U+052E-052F,U+0E3F,U+1D43,U+1D47-1D49,U+1D4D,U+1D4F-1D50,U+1D52,U+1D56-1D58,U+1D5B,U+1D62-1D65,U+1D9C,U+1DA0,U+1DBB,U+1DBF-1DF5,U+1DFC-1F15,U+1F18-1F1D,U+1F20-1F45,U+1F48-1F4D,U+1F50-1F57,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7D,U+1F80-1FB4,U+1FB6-1FC4,U+1FC6-1FD3,U+1FD6-1FDB,U+1FDD-1FEF,U+1FF2-1FF4,U+1FF6-1FFE,U+2070-2071,U+2074-208E,U+2090-209C,U+20A0-20AB,U+20AD-20BF,U+20DB-20DE,U+20E8,U+20F0,U+2100-2101,U+2103,U+2105-2106,U+2109,U+2113,U+2116-2117,U+211E-2121,U+2123,U+212A-212B,U+212E,U+2132,U+213B,U+214D-214F,U+2153,U+215A-2188,U+2202,U+2205,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+2303,U+2305,U+2318,U+2325-2327,U+232B,U+2380,U+2387,U+238B,U+23CE-23CF,U+2423,U+2460-2468,U+24B6-24CF,U+24EA,U+27EF,U+27F5-27FA,U+2B06,U+2B12-2B13,U+2B1C,U+2C62,U+2C64-2C66,U+2C6D-2C70,U+2C7C,U+2C7E-2C7F,U+2DFF,U+2E18,U+A69F,U+A78D,U+A7AA-A7AE,U+A7B0-A7B2,U+A7C5,U+A7FF,U+A92E,U+E000,U+E002-E080,U+E093-E096,U+E0A5-E0E6,U+E0F3-E11C,U+E11E-E164,U+EE01-EE05,U+F6C3,U+FE20-FE2D,U+1F12F-1F149,U+1F16A-1F16B,U+1F850,U+1F852}
@font-face{font-family:"Amora Rounded";src:url("/assets/fonts/open-runde-semibold-latin.woff2") format("woff2");font-style:normal;font-weight:600 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-21FF,U+2212,U+2215,U+25A0-27BF,U+FEFF,U+FFFD}
@font-face{font-family:"Amora Rounded";src:url("/assets/fonts/open-runde-semibold-ext.woff2") format("woff2");font-style:normal;font-weight:600 900;font-display:swap;unicode-range:U+0100-0130,U+0132-0148,U+014A-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-0303,U+0305-0307,U+0309-031E,U+0321-0328,U+032A-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03E1,U+03F0-049D,U+04A0-04FF,U+052E-052F,U+0E3F,U+1D43,U+1D47-1D49,U+1D4D,U+1D4F-1D50,U+1D52,U+1D56-1D58,U+1D5B,U+1D62-1D65,U+1D9C,U+1DA0,U+1DBB,U+1DBF-1DF5,U+1DFC-1F15,U+1F18-1F1D,U+1F20-1F45,U+1F48-1F4D,U+1F50-1F57,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7D,U+1F80-1FB4,U+1FB6-1FC4,U+1FC6-1FD3,U+1FD6-1FDB,U+1FDD-1FEF,U+1FF2-1FF4,U+1FF6-1FFE,U+2070-2071,U+2074-208E,U+2090-209C,U+20A0-20AB,U+20AD-20BF,U+20DB-20DE,U+20E8,U+20F0,U+2100-2101,U+2103,U+2105-2106,U+2109,U+2113,U+2116-2117,U+211E-2121,U+2123,U+212A-212B,U+212E,U+2132,U+213B,U+214D-214F,U+2153,U+215A-2188,U+2202,U+2205,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+2303,U+2305,U+2318,U+2325-2327,U+232B,U+2380,U+2387,U+238B,U+23CE-23CF,U+2423,U+2460-2468,U+24B6-24CF,U+24EA,U+27EF,U+27F5-27FA,U+2B06,U+2B12-2B13,U+2B1C,U+2C62,U+2C64-2C66,U+2C6D-2C70,U+2C7C,U+2C7E-2C7F,U+2DFF,U+2E18,U+A69F,U+A78D,U+A7AA-A7AE,U+A7B0-A7B2,U+A7C5,U+A7FF,U+A92E,U+E000,U+E002-E080,U+E093-E096,U+E0A5-E0E6,U+E0F3-E11C,U+E11E-E164,U+EE01-EE05,U+F6C3,U+FE20-FE2D,U+1F12F-1F149,U+1F16A-1F16B,U+1F850,U+1F852}
/* The scripts show and hide parts with the hidden attribute; a layout rule
   (display: flex on rows and cards) must never override it. */
.ft [hidden] { display: none !important; }
:root {
  --ft-font: ui-rounded, "SF Pro Rounded", "Amora Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ft-card-shadow: rgba(0, 0, 0, 0.08) 0 6px 16px;
  --ft-soft-shadow: rgba(0, 0, 0, 0.06) 0 4px 12px;
  --ft-hairline: rgba(36, 27, 34, 0.07);
  --ft-column: 600px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ft {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--ft-font);
  -webkit-font-smoothing: antialiased;
}
.ft a { color: var(--amora-pink); text-decoration: none; }
.ft a:hover { color: var(--amora-pink-pressed); }
.ft :focus-visible { outline: 3px solid rgba(233, 30, 99, 0.45); outline-offset: 3px; }

/* Offer strip */
.ft-strip {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 10px 16px;
  background: #241B22; color: #fff;
  font-size: 15.5px; font-weight: 700; text-align: center; flex-wrap: wrap;
}
.ft-strip a { color: #FF7BA8; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ft-strip a:hover { color: #fff; }

/* Offer page */
.ft-offer {
  position: relative; display: flex; flex-direction: column; align-items: center;
  overflow: hidden; padding: 0 16px 24px;
  background:
    radial-gradient(700px 520px at 12% 0%, rgba(233, 30, 99, .14), rgba(233, 30, 99, 0) 70%),
    radial-gradient(600px 460px at 92% 0%, rgba(255, 167, 38, .12), rgba(255, 167, 38, 0) 70%),
    var(--bg-base);
}
.ft-hero { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1000px; }
.ft-app-icon {
  width: 76px; height: 76px; margin-top: 56px; border-radius: 20px;
  box-shadow: rgba(36, 27, 34, 0.18) 0 14px 28px, rgba(233, 30, 99, 0.18) 0 4px 10px;
}
.ft-hero h1 {
  margin: 28px 0 0; font-size: 48px; font-weight: 700; letter-spacing: -0.036em; line-height: 1.08;
  text-wrap: balance;
}
.ft-subhead { margin: 14px 0 0; color: var(--text-secondary); font-size: 18px; font-weight: 600; text-wrap: balance; }

.ft-plans { width: min(var(--ft-column), 100%); margin-top: 40px; display: flex; flex-direction: column; }
.ft-card {
  position: relative; width: min(var(--ft-column), 100%); border-radius: 24px;
  background: var(--surface-card); box-shadow: var(--ft-card-shadow);
}
.ft-card-skeleton { height: 560px; background: linear-gradient(90deg, #fff, #f6f1ee, #fff); background-size: 200% 100%; animation: ft-shimmer 1.4s linear infinite; }
.ft-card-skeleton-short { height: 250px; }
@keyframes ft-shimmer { to { background-position: -200% 0; } }

.ft-plan { overflow: hidden; }
.ft-plan-top { padding: 44px 56px 28px; }
.ft-plan-single { padding: 44px 56px 36px; }
.ft-plan-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ft-plan-name { color: var(--amora-pink); font-size: 40px; font-weight: 700; letter-spacing: -0.034em; }
.ft-plan-price { display: flex; align-items: baseline; gap: 8px; color: var(--text-primary); }
.ft-plan-price b { font-size: 44px; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.ft-plan-price span { font-size: 18px; font-weight: 700; }
.ft-plan-line { margin: 22px 0 0; font-size: 17px; font-weight: 700; }
.ft-plan-billed { margin: 14px 0 0; color: rgba(36, 27, 34, 0.47); font-size: 14px; font-weight: 400; letter-spacing: 0.1px; }
.ft-plan-bottom { padding: 30px 56px 40px; background: var(--bg-base); }

.ft-timeline { position: relative; list-style: none; margin: 0; padding: 0; }
.ft-timeline::before {
  content: ""; position: absolute; left: 14px; top: 20px; bottom: 0; width: 6px; border-radius: 3px;
  background: linear-gradient(#F8BBD0 0%, #F8BBD0 78%, rgba(76, 175, 80, 0.55) 90%, rgba(76, 175, 80, 0) 100%);
}
[dir="rtl"] .ft-timeline::before { left: auto; right: 14px; }
.ft-timeline li { position: relative; display: flex; gap: 22px; padding-bottom: 26px; }
.ft-timeline li:last-child { padding-bottom: 0; }
.ft-timeline-dot {
  position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; background: var(--amora-pink); box-shadow: 0 0 0 5px var(--brand-fill);
}
.ft-timeline-copy { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.ft-timeline-copy b { font-size: 19px; font-weight: 700; }
.ft-timeline-copy span { color: var(--text-secondary); font-size: 15px; line-height: 1.55; }

.ft-assurance { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 30px 0 0; font-size: 15px; font-weight: 700; text-align: center; }
.ft-assurance-tight { margin-top: 16px; }
.ft-check-dot {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px; background: #34C759;
}

.ft-button {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; margin-top: 14px;
  padding: 0 24px; border-radius: 30px; border: 0.5px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, #E91E63, rgba(233, 30, 99, 0.9));
  box-shadow: rgba(255, 107, 157, 0.16) 0 6px 12px;
  color: #fff; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; text-align: center;
  transition: transform 0.15s cubic-bezier(0.34, 1.26, 0.64, 1);
}
.ft a.ft-button { color: #fff; }
.ft-button:active { transform: scale(0.97); }
.ft-button:disabled, .ft-button[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.ft-button-outline {
  margin-top: 28px; border: 1px solid rgba(36, 27, 34, 0.12); background: var(--surface-card);
  box-shadow: none; color: var(--amora-pink);
}
.ft-button-small { display: inline-flex; width: auto; min-height: 56px; padding: 0 28px; margin-top: 28px; font-size: 17px; border-radius: 28px; }

.ft-or {
  display: flex; align-items: center; gap: 16px; margin: 22px 0; color: var(--text-tertiary); font-size: 17px;
}
.ft-or span { flex: 1 1 0%; height: 1px; background: rgba(36, 27, 34, 0.18); }
.ft-trial-used {
  margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; background: var(--brand-fill);
  color: var(--text-primary); font-size: 15px; font-weight: 600; text-align: center;
}
.ft-plans-error { padding: 32px; text-align: center; }
.ft-plans-error p { margin: 0 0 8px; color: var(--text-secondary); font-size: 16px; }

/* Risk-free card */
.ft-risk { margin-top: 28px; padding: 32px 28px 24px; }
.ft-risk-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.ft-risk-list { list-style: none; margin: 14px 0 0; padding: 0; }
.ft-risk-list li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ft-hairline); }
.ft-risk-list li:last-child { border-bottom: 0; }
.ft-risk-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 14px; background: var(--brand-fill);
}
.ft-risk-list li > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.ft-risk-list b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.ft-risk-list small { color: var(--text-secondary); font-size: 14.5px; font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.ft-pay-marks {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  margin: 6px 0 0; padding-top: 20px; border-top: 1px solid var(--ft-hairline);
}
.ft-pay-marks span {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; background: #fff;
  box-shadow: rgba(36, 27, 34, 0.14) 0 0 0 0.5px; font-size: 12px; font-weight: 800; letter-spacing: 0.2px;
}
.ft-pay-marks em { margin-inline-start: 6px; color: var(--text-tertiary); font-size: 12.5px; font-weight: 600; font-style: normal; }

/* Why Pro */
.ft-why { display: flex; flex-direction: column; align-items: center; width: min(var(--ft-column), 100%); }
.ft-why h2 { margin: 72px 0 0; font-size: 40px; font-weight: 700; letter-spacing: -0.034em; text-align: center; }
.ft-why > p { margin: 14px 0 0; max-width: 56ch; color: var(--text-secondary); font-size: 17px; line-height: 1.55; text-align: center; }
.ft-table {
  position: relative; width: 100%; margin-top: 40px; overflow: visible; border-radius: 24px;
  background: var(--surface-card); box-shadow: var(--ft-card-shadow);
}
.ft-table-band { position: absolute; inset-inline-end: 0; top: 0; bottom: 0; width: 130px; background: var(--brand-fill); border-start-end-radius: 24px; border-end-end-radius: 24px; }
.ft-table-badge {
  position: absolute; inset-inline-end: 65px; top: -14px; transform: translateX(50%);
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  background: var(--amora-pink); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
  text-transform: uppercase; white-space: nowrap;
}
[dir="rtl"] .ft-table-badge { transform: translateX(-50%); }
.ft-row {
  position: relative; display: grid; grid-template-columns: 1fr 110px 130px; align-items: center; min-height: 72px;
  box-shadow: rgba(36, 27, 34, 0.1) 0 -1px 0 inset;
}
.ft-row:last-child { box-shadow: none; }
.ft-row > span:first-child { padding: 0 16px 0 24px; font-size: 16.5px; line-height: 1.4; }
.ft-row > span:not(:first-child) { display: flex; justify-content: center; }
.ft-row-head { height: 76px; }
.ft-row-head > span:first-child { font-size: 12px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }
.ft-row-head > span:nth-child(2) { font-size: 17px; font-weight: 700; }
.ft-pro-head { align-items: center; gap: 6px; color: var(--amora-pink); font-size: 17px; font-weight: 700; }

/* Social proof band */
.ft-proof {
  width: calc(100% + 32px); margin: 80px -16px 0; padding: 72px 96px;
  display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 48px; align-items: center;
  background: var(--card-1-bg);
}
.ft-proof h2 { margin: 0; font-size: 48px; font-weight: 700; line-height: 1.04; letter-spacing: -0.036em; text-wrap: balance; }
.ft-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.ft-stats > div { display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 16px 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.7); }
.ft-stat-value { display: flex; align-items: baseline; gap: 8px; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; }
.ft-stars { color: var(--gold); font-size: 16px; letter-spacing: 1px; }
.ft-stats small { color: var(--text-secondary); font-size: 13.5px; font-weight: 600; }
.ft-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-height: 480px; overflow: hidden;
  mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.ft-review { margin: 0; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: var(--ft-soft-shadow); }
.ft-review-stars { color: var(--gold); font-size: 13px; letter-spacing: 1px; }
.ft-review blockquote { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
.ft-review figcaption { margin-top: 10px; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; }
.ft-review-where { opacity: 0.6; }

/* FAQ */
.ft-faq { width: min(880px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 88px 0 24px; }
.ft-faq h2 { margin: 0 0 28px; font-size: 44px; font-weight: 700; letter-spacing: -0.034em; text-align: center; }
.ft-faq details { border-radius: 24px; background: var(--surface-card); box-shadow: var(--ft-soft-shadow); }
.ft-faq summary {
  display: flex; align-items: center; gap: 16px; padding: 24px 28px; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 700; letter-spacing: -0.012em;
}
.ft-faq summary::-webkit-details-marker { display: none; }
.ft-faq summary::after {
  content: ""; flex: 0 0 auto; margin-inline-start: auto; width: 10px; height: 10px;
  border-right: 2.6px solid var(--text-secondary); border-bottom: 2.6px solid var(--text-secondary);
  transform: rotate(45deg); transition: transform .2s;
}
.ft-faq details[open] summary::after { transform: rotate(225deg); }
.ft-faq p { margin: 0; padding: 0 28px 26px; color: var(--text-secondary); font-size: 16px; line-height: 1.6; }

.ft-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; padding: 28px 0 40px; font-size: 13.5px; font-weight: 600; }
.ft-footer a { color: var(--text-tertiary); }
.ft-footer a:first-child { color: var(--amora-pink); }

.ft-toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  max-width: min(92vw, 420px); padding: 14px 18px; border-radius: 16px; background: #241B22; color: #fff;
  font-size: 15px; font-weight: 600; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.ft-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* Phones: the design's "v2b mobile reflow". */
@media (max-width: 720px) {
  .ft-hero h1 { font-size: 31px; line-height: 1.12; }
  .ft-plan-name { font-size: 28px; }
  .ft-plan-price b { font-size: 30px; line-height: 1.12; }
  .ft-plan-top, .ft-plan-bottom, .ft-plan-single { padding-left: 24px; padding-right: 24px; }
  .ft-why h2 { font-size: 28px; }
  .ft-faq h2 { font-size: 30px; line-height: 1.12; }
  .ft-proof { grid-template-columns: minmax(0, 1fr); padding: 48px 20px; }
  .ft-proof h2 { font-size: 31px; line-height: 1.12; }
  .ft-reviews { grid-template-columns: minmax(0, 1fr); max-height: 420px; }
  .ft-faq { padding-top: 48px; }
  .ft-row { grid-template-columns: minmax(0, 1fr) 52px 72px; min-height: 64px; }
  .ft-row > span:first-child { padding: 12px 8px 12px 16px; font-size: 14.5px; line-height: 1.35; text-wrap: pretty; }
  .ft-row-head { min-height: 72px; height: auto; align-items: end; padding-bottom: 12px; }
  .ft-row-head > span:first-child { font-size: 11px; padding-top: 0; padding-bottom: 0; }
  .ft-row-head > span { font-size: 15px; }
  .ft-table-band { width: 72px; }
  .ft-table-badge { top: 12px; inset-inline-end: 36px; height: 20px; padding: 0 8px; font-size: 9.5px; }
  .ft-strip { font-size: 14px; }
  .ft-button-small { min-width: 240px; padding: 0 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-card-skeleton { animation: none; }
  .ft-button, .ft-faq summary::after, .ft-toast { transition: none; }
}

/* Entrance motion on the offer (Riley, 2026-10-08: "the animations aren't
   working... polish it"). The hero settles in, the plan cards rise when the
   script shows prices, the trial timeline draws itself down. Cards redrawn
   with fresher prices (data-settled) do not play it again, and with motion
   turned off it all simply shows. */
@keyframes ft-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes ft-pop { from { opacity: 0; transform: scale(0.86); } 70% { transform: scale(1.03); } }
@keyframes ft-draw { from { transform: scaleY(0); } }
@keyframes ft-dot { from { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); } }
@keyframes ft-shine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
.ft-offer .ft-app-icon { animation: ft-pop 0.6s cubic-bezier(0.34, 1.26, 0.64, 1) both; }
.ft-offer .ft-hero h1 { animation: ft-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both; }
.ft-offer .ft-subhead { animation: ft-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both; }
.ft-plans[aria-busy="false"] > * { animation: ft-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ft-plans[aria-busy="false"] > :nth-child(2) { animation-delay: 0.08s; }
.ft-plans[aria-busy="false"] > :nth-child(3) { animation-delay: 0.16s; }
.ft-plans[aria-busy="false"] .ft-timeline::before { transform-origin: top; animation: ft-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.25s both; }
.ft-plans[aria-busy="false"] .ft-timeline li { animation: ft-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ft-plans[aria-busy="false"] .ft-timeline li:nth-child(1) { animation-delay: 0.3s; }
.ft-plans[aria-busy="false"] .ft-timeline li:nth-child(2) { animation-delay: 0.55s; }
.ft-plans[aria-busy="false"] .ft-timeline li:nth-child(3) { animation-delay: 0.8s; }
.ft-plans[aria-busy="false"] .ft-timeline-dot { animation: ft-dot 0.5s cubic-bezier(0.34, 1.26, 0.64, 1) both; animation-delay: inherit; }
.ft-plans[aria-busy="false"] .ft-plan .ft-button { position: relative; overflow: hidden; }
.ft-plans[data-settled] *, .ft-plans[data-settled] *::before, .ft-plans[data-settled] *::after { animation: none !important; }
.ft-plans[aria-busy="false"] .ft-plan:first-child .ft-button::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
  animation: ft-shine 1.1s ease-in-out 1.3s both;
}
@media (prefers-reduced-motion: reduce) {
  .ft-offer .ft-app-icon, .ft-offer .ft-hero h1, .ft-offer .ft-subhead,
  .ft-plans[aria-busy="false"] > *, .ft-plans[aria-busy="false"] .ft-timeline::before,
  .ft-plans[aria-busy="false"] .ft-timeline li, .ft-plans[aria-busy="false"] .ft-timeline-dot { animation: none; }
  .ft-plans[aria-busy="false"] .ft-plan:first-child .ft-button::after { display: none; }
}

/* Account step (D-13c / D-13d) and checkout (D-13e) share one column. */
.ft-step {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 32px 16px 0;
  background: radial-gradient(700px 480px at 50% 0%, rgba(233, 30, 99, .10), rgba(233, 30, 99, 0) 70%), var(--bg-base);
}
.ft-step-column { width: min(520px, 100%); display: flex; flex-direction: column; padding-bottom: 56px; }
.ft-back {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; background: var(--surface-card);
  box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px; color: var(--text-primary) !important;
}
[dir="rtl"] .ft-back svg { transform: scaleX(-1); }
.ft-step-icon { align-self: center; width: 64px; height: 64px; margin-top: 8px; border-radius: 17px; box-shadow: rgba(36, 27, 34, 0.16) 0 12px 24px; }
.ft-step-title {
  display: flex; flex-direction: column; margin: 22px 0 0; text-align: center;
  font-size: 44px; font-weight: 700; line-height: 1.08; letter-spacing: -0.036em; text-wrap: balance;
}
.ft-step-timeline { margin-top: 36px; }
.ft-auth { margin-top: 36px; display: flex; flex-direction: column; }
/* The design puts the email field first, then "or", then Apple and Google. */
.ft-auth .auth-form { order: 1; }
.ft-auth #providerChoices { order: 2; }
.ft-auth .auth-note { order: 3; }
.ft-auth .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ft-auth .auth-stack { display: flex; flex-direction: column; gap: 12px; }
.ft-auth #providerChoices { display: flex; flex-direction: column-reverse; }
.ft-auth .auth-separator {
  display: flex; align-items: center; gap: 16px; margin: 18px 0; color: var(--text-tertiary); font-size: 15px;
}
.ft-auth .auth-separator::before, .ft-auth .auth-separator::after { content: ""; flex: 1; height: 1px; background: rgba(36, 27, 34, 0.18); }
.ft-auth .auth-button {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px;
  border-radius: 28px; border: 0; background: var(--surface-card); color: var(--text-primary);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 8px, rgba(36, 27, 34, 0.1) 0 0 0 0.5px;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.ft-auth .auth-button span:last-child { display: none; }
/* The providers' own marks rather than a letter and a dot, as the design
   (D-13c) and the earlier funnel draw them. */
.ft-auth .auth-button > span:first-child { width: 18px; height: 18px; flex: none; overflow: hidden; color: transparent; font-size: 0; background: center / contain no-repeat; }
.ft-auth .auth-button[data-provider="google"] > span:first-child { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='m6.3 14.7 6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E"); }
.ft-auth .auth-button[data-provider="apple"] > span:first-child { width: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 814 1000'%3E%3Cpath fill='%23000' d='M788 341c-6 4-108 62-108 190 0 148 130 200 134 201-1 3-21 71-68 141-43 62-88 123-156 123s-85-39-163-39c-76 0-103 41-165 41s-106-57-156-127C47 790 0 663 0 543c0-194 126-297 250-297 66 0 121 43 162 43 39 0 101-46 176-46 29 0 130 3 200 98zM554 159c31-37 53-88 53-139 0-7-1-14-2-20-50 2-110 34-146 76-28 32-55 83-55 135 0 8 1 16 2 18 3 1 9 1 14 1 45 0 102-30 134-71z'/%3E%3C/svg%3E"); }
.ft-auth .auth-form { display: flex; flex-direction: column; gap: 12px; }
.ft-auth .text-field {
  width: 100%; height: 56px; padding: 0 22px; border-radius: 28px; border: 0; background: var(--surface-card);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 8px, rgba(36, 27, 34, 0.1) 0 0 0 0.5px;
  color: var(--text-primary); font: inherit; font-size: 16px; font-weight: 600; outline: none;
}
.ft-auth .text-field:focus { box-shadow: 0 0 0 2px var(--amora-pink); }
.ft-auth .auth-rule { margin: -4px 0 0; margin-inline-start: 22px; color: var(--text-tertiary); font-size: 13px; font-weight: 600; }
.ft-auth .auth-rule::before { content: "\2715"; display: inline-block; width: 18px; margin-inline-start: -18px; color: var(--text-tertiary); }
.ft-auth .auth-rule.is-met { color: #167634; }
.ft-auth .auth-rule.is-met::before { content: "\2713"; color: #167634; }
.ft-auth .text-field.is-confirmed { color: var(--amora-pink); padding-inline-end: 48px; background: var(--surface-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E91E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat right 20px center; }
[dir="rtl"] .ft-auth .text-field.is-confirmed { background-position: left 20px center; }
.ft-auth .password-wrap { position: relative; display: block; }
.ft-auth .password-wrap .text-field { padding-inline-end: 56px; }
.ft-auth .password-eye { position: absolute; inset-inline-end: 12px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 20px; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237A6E76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9c2 2.6 5 4.5 9 4.5S19 11.6 21 9'/%3E%3Cpath d='M6.5 12.2L5 14.5M12 13.5V16M17.5 12.2L19 14.5'/%3E%3C/svg%3E") no-repeat center; }
.ft-auth .password-eye[aria-pressed="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237A6E76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ft-auth .password-eye:focus-visible { outline: 2px solid var(--amora-pink); outline-offset: 2px; }
.ft-auth .secondary-button:disabled { opacity: 0.5; cursor: not-allowed; }
.ft-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ft-auth .primary-button, .ft-auth .secondary-button {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; border-radius: 28px;
  border: 0.5px solid rgba(255, 255, 255, 0.35); background: linear-gradient(135deg, #E91E63, rgba(233, 30, 99, 0.9));
  box-shadow: rgba(255, 107, 157, 0.16) 0 6px 12px; color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
}
.ft-auth .auth-toggle {
  align-self: center; margin-top: 4px; padding: 8px 12px; border: 0; background: none; color: var(--amora-pink);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.ft-auth #otpFields:not([hidden]) { display: flex; flex-direction: column; gap: 12px; }
.ft-auth .auth-note { margin: 20px 0 0; color: var(--text-tertiary); font-size: 13px; line-height: 1.5; text-align: center; }
.ft-auth .auth-note a { text-decoration: underline; text-underline-offset: 2px; }
.ft-trust {
  width: 100%; margin: auto 0 0; padding: 22px 16px 28px; list-style: none;
  display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
  background: var(--surface-card); color: var(--text-secondary); font-size: 13px; font-weight: 600; text-align: center;
}
.ft-trust li { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 120px; flex: 1 1 0; }
.ft-trust li span { font-size: 20px; }
@media (max-width: 720px) {
  .ft-step-title { font-size: 30px; line-height: 1.12; }
  .ft-trust { gap: 12px; flex-wrap: nowrap; }
}

/* Checkout (D-13e) */
.ft-checkout .ft-step-column { gap: 18px; }
.ft-checkout .ft-back { margin-bottom: 4px; }
.ft-summary { width: 100%; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.ft-summary[aria-busy="true"] > * { visibility: hidden; }
.ft-summary-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ft-summary-head img { border-radius: 8px; }
.ft-summary-head > b { font-size: 17px; }
.ft-summary-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--amora-pink); color: #fff; font-size: 12px; font-weight: 800; }
.ft-summary-price { margin-inline-start: auto; font-size: 14px; font-weight: 700; }
.ft-summary-price b { font-size: 20px; }
.ft-summary-row { display: flex; justify-content: space-between; align-items: baseline; color: var(--text-secondary); font-size: 15px; font-weight: 600; }
.ft-summary-due { color: var(--text-primary); font-size: 17px; font-weight: 700; }
.ft-summary-due b { font-size: 26px; }
.ft-pink { color: var(--amora-pink); }
.ft-reassure { list-style: none; margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--bg-base); display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; font-weight: 700; }
.ft-reassure li { display: flex; align-items: center; gap: 10px; }
.ft-pay { min-height: 320px; }
/* RevenueCat's form fills a fixed-height box by design and scrolls inside it;
   in this page it must grow with its content instead, or the box collapses to
   its first line and the card fields are cut off. Its logo and plan title
   repeat our summary above, so they are hidden; its price lines (trial,
   introductory or discount wording) and totals (any tax) stay. */
.ft-pay .rcb-ui-container { height: auto !important; overflow: visible !important; background: transparent !important; }
.ft-pay .rcb-ui-container > :not(.rcb-ui-sandbox-banner) { container-type: inline-size !important; height: auto !important; overflow: visible !important; }
.ft-pay .navbar-header, .ft-pay .rcb-pricing-info-header > .rcb-pricing-info-header { display: none !important; }
/* Its footer after the first line ("renews automatically", then its Terms
   link and "Secure checkout by RevenueCat") repeats our renewal line and
   footer; the first line, the charge disclosure, stays. */
.ft-pay .footer-caption-container > .footer-caption:nth-of-type(n+2) { display: none !important; }
.ft-renewal { margin: 0; color: var(--text-secondary); font-size: 14px; text-align: center; line-height: 1.5; }
.ft-renewal b { color: #1E8E3E; }
.ft-checkout-foot { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--ft-hairline); color: var(--text-tertiary); font-size: 12.5px; text-align: center; line-height: 1.7; }
.ft-checkout-foot a { color: var(--amora-pink); }

/* Welcome to Pro (D-13f) */
.ft-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ft-welcome { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 0 16px 56px;
  background: linear-gradient(180deg, #E91E63 0%, #EE4C83 46%, var(--bg-base) 46.1%); }
.ft-welcome-hero { width: min(760px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; padding: 28px 0 36px; }
.ft-welcome-wordmark { align-self: flex-start; filter: brightness(0) invert(1); }
.ft-welcome-party { margin-top: 18px; font-size: 64px; line-height: 1; animation: ft-party .9s cubic-bezier(.34, 1.26, .64, 1) both; }
@keyframes ft-party { 0% { opacity: 0; transform: scale(.2) rotate(-30deg); } 60% { opacity: 1; transform: scale(1.15) rotate(8deg); } 100% { transform: none; } }
.ft-welcome-hero h1 { margin: 18px 0 0; font-size: 48px; font-weight: 700; letter-spacing: -0.036em; line-height: 1.08; text-wrap: balance; }
.ft-welcome-body { margin: 12px 0 0; font-size: 17px; font-weight: 600; opacity: .92; }
.ft-verification { margin-top: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 14px; font-weight: 700; }
.ft-verification:empty { display: none; }
.ft-verification a, .ft-verification button { color: #fff; }
.ft-next { width: min(760px, 100%); padding: 36px 40px; }
.ft-next-eyebrow { margin: 0; color: var(--amora-pink); font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.ft-next h2 { margin: 8px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.ft-next-steps { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.ft-next-steps > li { display: flex; gap: 16px; align-items: flex-start; }
.ft-next-number { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--amora-pink); color: #fff; font-weight: 800; }
.ft-next-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.ft-next-copy > b { font-size: 18px; }
.ft-next-copy > span { color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.ft-next-copy .ft-button { margin-top: 8px; max-width: 360px; }
.ft-next-copy .ft-button[hidden] { display: none; }
.ft-stores { display: none; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.ft-stores.visible { display: flex; }
.ft-small { margin: 0; color: var(--text-tertiary); font-size: 13.5px; line-height: 1.5; }
.desktop-handoff-copy h3 { display: none; }
.desktop-handoff-copy p { margin: 4px 0 0; color: var(--text-secondary); font-size: 14.5px; }
.ft-signin { margin-top: 8px; padding: 16px; border-radius: 16px; background: var(--bg-base); }
.ft-signin h3 { margin: 0; font-size: 16px; }
.ft-signin p { margin: 6px 0 0; color: var(--text-secondary); font-size: 14.5px; }
.ft-signin-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ft-signin-form input { flex: 1 1 200px; height: 48px; padding: 0 18px; border-radius: 24px; border: 0; box-shadow: rgba(36, 27, 34, .14) 0 0 0 .5px; font: inherit; }
.ft-signin-form button { height: 48px; padding: 0 20px; border-radius: 24px; border: 0; background: var(--amora-pink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.ft-invite { margin-top: 6px; }
.ft-invite-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--bg-base); }
.ft-invite-code small { display: block; color: var(--text-tertiary); font-size: 12px; font-weight: 700; }
.ft-invite-code b { font-size: 22px; letter-spacing: 3px; font-variant-numeric: tabular-nums; }
.ft-invite-code button { height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid rgba(36, 27, 34, .12); background: #fff; color: var(--amora-pink); font: inherit; font-weight: 700; cursor: pointer; }
.ft-invite-share { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ft-invite-share a, .ft-invite-share button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: #241B22; color: #fff !important; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.ft-invite-share a[hidden] { display: none; }
/* D-12: the email field beside its button, on a computer only. */
.ft-invite-email { margin-top: 16px; }
.ft-invite-email[hidden] { display: none; }
.ft-invite-or { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--text-tertiary); font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.ft-invite-or::before, .ft-invite-or::after { content: ""; flex: 1; height: 1px; background: rgba(36, 27, 34, .1); }
.ft-invite-email-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ft-invite-email-row input { flex: 1 1 220px; height: 48px; padding: 0 18px; border-radius: 24px; border: 0; box-shadow: rgba(36, 27, 34, .14) 0 0 0 .5px; font: inherit; }
.ft-invite-email-row button { height: 48px; padding: 0 20px; border-radius: 24px; border: 0; background: var(--amora-pink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.ft-invite-email-row button:disabled { opacity: .6; cursor: progress; }
.ft-invite-email small { display: block; margin-top: 8px; color: var(--text-tertiary); font-size: 12.5px; font-weight: 600; }
.ft-manage { display: inline-block; margin-top: 24px; font-size: 14px; font-weight: 700; }
@media (max-width: 720px) {
  .ft-welcome-hero h1 { font-size: 31px; line-height: 1.12; }
  .ft-next { padding: 26px 20px; }
  .ft-next h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .ft-welcome-party { animation: none; } }

/* D-14, "Try it before you decide" (try-before.js): the design's centred
   480px dialog on a computer, a bottom sheet on a phone. Auto margins centre
   it; a screen too short for it (a phone on its side) scrolls rather than
   cutting off the close and "Continue without Pro" buttons. */
.ft-sheet-scrim {
  position: fixed; inset: 0; z-index: 50; display: flex; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px; background: rgba(20, 18, 25, 0.42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: ft-sheet-fade 0.2s ease both;
}
.ft-sheet {
  position: relative; display: flex; width: 480px; max-width: 100%; flex-direction: column; align-items: center;
  margin: auto; padding: 36px 36px 24px; border-radius: 28px; background: #FBF9F7;
  box-shadow: 0 30px 80px rgba(20, 18, 25, 0.3); color: var(--text-primary); text-align: center;
  animation: ft-sheet-rise 0.35s cubic-bezier(0.34, 1.26, 0.64, 1) both;
}
.ft-sheet-close {
  position: absolute; top: 16px; inset-inline-end: 16px; display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px; border-radius: 999px; border: none; background: rgba(36, 27, 34, 0.06);
  color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.ft-sheet-close:hover { background: rgba(36, 27, 34, 0.1); }
.ft-sheet-gift { position: relative; display: flex; width: 128px; height: 128px; align-items: center; justify-content: center; }
.ft-sheet-gift::before {
  content: ""; position: absolute; left: 50%; top: 54%; width: 190px; height: 190px; border-radius: 50%;
  transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(233, 30, 99, 0.16), rgba(233, 30, 99, 0) 68%);
}
.ft-sheet-gift span { position: relative; font-size: 100px; line-height: 1; }
.ft-sheet-pro {
  display: inline-flex; align-items: center; height: 20px; margin-top: 14px; padding: 0 8px; border-radius: 999px;
  background: var(--amora-pink); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
}
.ft-sheet h2 { margin: 12px 0 0; font-size: 32px; font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
.ft-sheet p { max-width: 34ch; margin: 10px 0 0; color: var(--text-secondary); font-size: 16px; line-height: 1.45; }
.ft-sheet-price { margin-top: 18px; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.ft-sheet .ft-button { min-height: 56px; margin-top: 22px; border-radius: 28px; }
.ft-sheet small { margin-top: 10px; color: var(--text-tertiary); font-size: 12.5px; font-weight: 600; }
.ft-sheet-decline {
  min-height: 44px; margin-top: 12px; padding: 0 16px; border: none; background: none;
  color: var(--text-secondary); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.ft-sheet-decline:hover { color: var(--text-primary); }
.ft-sheet button:disabled { opacity: 0.6; cursor: progress; }
@media (hover: none) { .ft-sheet-key { display: none; } }
@media (max-width: 720px) {
  .ft-sheet-scrim { padding: 0; }
  .ft-sheet { width: 100%; margin: auto 0 0; padding: 28px 24px calc(20px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; }
  .ft-sheet-gift { width: 104px; height: 104px; }
  .ft-sheet-gift span { font-size: 80px; }
  .ft-sheet h2 { font-size: 28px; }
}
@keyframes ft-sheet-fade { from { opacity: 0; } }
@keyframes ft-sheet-rise { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .ft-sheet-scrim, .ft-sheet { animation: none; } }