/* Mallow.ai website. Colours mirror lib/core/theme/design_tokens.dart. */

@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ink: #111111;
  --black: #000000;
  --g3: #666666;
  --g2: #999999;
  --soft: #FBF8F5;
  --track: #F1ECE6;
  --butter: #FFE3A3;
  --butter-band: #FFEFC4;
  --butter-ink: #806942;
  --yolk: #FFBA26;
  --blue: #0061EF;
  --me: #0061EF;
  --partner: #AE76F2;
  --us: #3CBB71;
  --period: #FE597C;
  --rose: #FE93A8;
  --lavender: #B894F0;
  --income: #14A351;
  --night: #0A1022;
  --night-surface: #151C39;
  --text: #1A1A1F;
  --text-2: #55525C;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", var(--font-ui);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --container: 1160px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; }
p, h1, h2, h3, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: #fff; padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .45s var(--ease); }
.nav-inner { max-width: var(--container); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; gap: 28px; }
.nav.is-solid { background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.nav.is-night { background: rgba(10, 16, 34, .7); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); color: #fff; }
.nav.is-night .brand-word { filter: invert(1); }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-flower { width: 30px; height: 30px; transition: transform .6s var(--spring); }
.brand:hover .brand-flower { transform: rotate(72deg); }
.brand-word { height: 30px; width: auto; }
.nav-links { display: flex; gap: 28px; margin-left: auto; font-size: 15px; font-weight: 500; }
.nav-links a { position: relative; padding: 6px 0; opacity: .82; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transition: transform .35s var(--ease); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; transition: transform .3s var(--spring), background .2s; }
.nav-cta:hover { transform: translateY(-1px) scale(1.03); }
.nav.is-night .nav-cta { background: #fff; color: var(--night); }

/* ---------- Hero (sky band) ---------- */
.hero { position: relative; z-index: 1; padding: 132px var(--gutter) 330px; text-align: center; overflow: hidden; color: var(--night); }
.hero-sky {
  position: absolute; inset: 0 0 -120px;
  background: url("../assets/img/sky-day.jpg") center bottom / cover no-repeat, linear-gradient(#3E97F2, #7CC9FB);
  will-change: transform;
}
.hero-copy { position: relative; max-width: 820px; margin: 0 auto; will-change: transform, opacity; }
.bloom { width: 64px; height: 64px; margin: 0 auto 22px; overflow: visible; }
.petal, .petal-core { transform-box: fill-box; transform-origin: center; }
.petal { animation: petal .75s var(--spring) both; animation-delay: calc(160ms + var(--i) * 85ms); }
.petal-core { animation: petal .6s var(--spring) .66s both; }
.bloom .petals { animation: sway 9s ease-in-out 1.6s infinite; transform-origin: 50% 50%; }
@keyframes petal { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes lineUp { from { transform: translateY(108%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes phoneIn { from { opacity: 0; transform: translateY(80px) scale(.96); } }
@keyframes sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }

.hero-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(42px, 6.6vw, 82px); line-height: 1.04; letter-spacing: -.028em; }
.hero-title .ln { display: block; overflow: hidden; padding: 0 .06em .08em; }
.hero-title .ln > span { display: inline-block; animation: lineUp 1.1s var(--ease) .12s both; }
.hero-title .ln:nth-child(2) > span { animation-delay: .24s; }
.hero-lede { max-width: 640px; margin: 22px auto 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: rgba(10, 16, 34, .78); animation: fadeUp .9s var(--ease) .45s both; }
.hero-stores { margin-top: 30px; animation: fadeUp .9s var(--ease) .6s both; }

.stores { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.store { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 20px 0 16px; border-radius: 14px; background: var(--ink); color: #fff; text-align: left; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.store svg { width: 24px; height: 24px; fill: currentColor; }
.store small { display: block; font-size: 11px; font-weight: 500; opacity: .72; letter-spacing: 0; }
.store.dark { background: #151C39; box-shadow: inset 0 0 0 1px #2C334D; }

/* ---------- Sheet over the band ---------- */
/* The hero overlaps this sheet; clip horizontal overflow only at the body. */
.sheet { position: relative; z-index: 2; display: flow-root; overflow: visible; background: #fff; border-radius: 0 0 44px 44px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
.sheet::before {
  content: ""; position: absolute; left: 50%; top: -60px; width: max(160vw, 680px); height: 260px;
  transform: translateX(-50%); background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: 0 -12px 30px rgba(40, 35, 43, .06);
}

.hero-stage { position: relative; z-index: 3; margin-top: -300px; display: flex; flex-direction: column; align-items: center; padding: 0 var(--gutter); --mx: 0; --my: 0; }
.stage-hint { margin-top: 22px; font-size: 14px; color: var(--g3); display: flex; align-items: center; gap: 8px; }
.stage-hint::before { content: ""; width: 12px; height: 12px; background: var(--yolk); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.phone-hero { animation: phoneIn 1.2s var(--ease) .55s both; }

/* Floating cards around the hero phone */
.float-card {
  position: absolute; z-index: 4; background: #fff; border-radius: 18px; padding: 14px 16px; text-align: left;
  box-shadow: 0 24px 48px -20px rgba(10, 16, 34, .32), 0 0 0 .5px rgba(0, 0, 0, .08);
  translate: calc(var(--mx) * var(--d, 1) * 14px) calc(var(--my) * var(--d, 1) * 14px);
  transition: transform 1s var(--spring);
}
.float-card > * { pointer-events: none; }
.fc-special { top: 120px; left: calc(50% - 470px); width: 260px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transform: rotate(-4deg); animation: fadeIn .9s var(--ease) 1s both, bob 7s ease-in-out infinite; }
.fc-t { font-size: 16px; font-weight: 500; color: #000; }
.fc-d { margin-top: 3px; font-size: 13px; color: var(--g3); }
.fc-n { text-align: right; }
.fc-n b { display: block; font-size: 30px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #000; line-height: 1; }
.fc-n span { font-size: 12px; color: var(--g3); }
.fc-money { top: 420px; left: calc(50% - 440px); width: 250px; display: flex; align-items: center; gap: 10px; background: var(--soft); transform: rotate(3deg); animation: fadeIn .9s var(--ease) 1.15s both, bob 8s ease-in-out 1.15s infinite; }
.fc-stk, .stk { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.fc-stk img, .stk img { width: 24px; height: 24px; }
.fc-meta, .m-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--g3); }
.payer { background: #FAE5D9; color: #000; border-radius: 999px; padding: 1px 7px; font-size: 11px; }
.fc-amt { margin-left: auto; font-size: 15px; font-weight: 500; color: #000; }
.fc-miss { top: 70px; left: calc(50% + 230px); width: 176px; height: 176px; border-radius: 26px; background: var(--soft); padding: 14px; transform: rotate(5deg); animation: fadeIn .9s var(--ease) 1.25s both, bob 7.5s ease-in-out 1.25s infinite; }
.fc-cycle { top: 400px; left: calc(50% + 240px); width: 210px; background: #F8E9E1; text-align: center; padding: 18px 16px; transform: rotate(-3deg); animation: fadeIn .9s var(--ease) 1.35s both, bob 8.5s ease-in-out 1.35s infinite; }
.fc-cycle p { font-size: 13px; color: #000; }
.fc-cycle b { display: block; margin: 4px 0; font-size: 30px; font-weight: 500; color: #000; }
.fc-cycle span { font-size: 12px; color: rgba(0, 0, 0, .66); }
@keyframes bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -12px; } }

/* Home-screen widget (also used in the together section) */
.w-name { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--ink); }
.w-name svg { width: 13px; height: 13px; }
.w-count { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; }
.w-count svg { width: 46px; height: 46px; }
.w-count b { font-size: 40px; font-weight: 500; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.w-line { font-size: 11px; color: var(--g3); }
.w-btn { display: flex; align-items: center; justify-content: center; height: 30px; margin-top: 10px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 12px; font-weight: 500; color: var(--ink); }

/* ---------- Phone frame ---------- */
.phone { --k: .86; --bz: 11px; position: relative; padding: var(--bz); border-radius: calc(55px * var(--k) + var(--bz)); background: #0F0F12; box-shadow: inset 0 0 0 1.5px #34343A, 0 50px 100px -30px rgba(10, 16, 34, .42), 0 24px 40px -24px rgba(10, 16, 34, .35); }
.phone::before { content: ""; position: absolute; right: -2px; top: 26%; width: 3px; height: 70px; border-radius: 0 3px 3px 0; background: #26262B; }
.phone-screen { position: relative; width: calc(375px * var(--k)); height: calc(812px * var(--k)); border-radius: calc(47px * var(--k)); overflow: hidden; background: #fff; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.phone-canvas { position: absolute; left: 0; top: 0; width: 375px; height: 812px; transform: scale(var(--k)); transform-origin: 0 0; font-family: var(--font-ui); font-size: 14px; color: #000; text-align: left; line-height: 1.3; }
.a-status { position: absolute; inset: 0 0 auto; z-index: 30; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 4px 30px 0 50px; font-size: 16px; font-weight: 600; pointer-events: none; }
.a-island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; border-radius: 20px; background: #000; transform: translateX(-50%); }
.a-sys { display: flex; align-items: center; gap: 6px; }
.a-sys svg { height: 12px; width: 18px; fill: currentColor; }
.a-sys .bat { width: 26px; height: 13px; }
.a-homebar { position: absolute; z-index: 30; left: 50%; bottom: 8px; width: 134px; height: 5px; border-radius: 3px; background: #000; transform: translateX(-50%); pointer-events: none; }

.a-screen { position: absolute; inset: 0; background: #fff; overflow: hidden; visibility: hidden; opacity: 0; transform: translateX(34%); transition: transform .42s var(--ease), opacity .3s ease, visibility 0s .42s; }
.a-screen.is-active { visibility: visible; opacity: 1; transform: none; z-index: 2; transition: transform .42s var(--ease), opacity .3s ease, visibility 0s; }
.a-screen.from-left { transform: translateX(-34%); }
.a-screen.is-leaving { visibility: visible; opacity: 0; transform: translateX(-16%); z-index: 1; transition: transform .42s var(--ease), opacity .3s ease, visibility 0s .42s; }
.a-screen.is-leaving.to-right { transform: translateX(16%); }

.a-header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 52px; margin-top: 54px; padding: 0 12px; font-size: 17px; font-weight: 500; }
.a-header > span:nth-child(2) { text-align: center; }
.a-header svg { width: 24px; height: 24px; }
.a-header > :last-child { justify-self: end; }
.a-header.center { grid-template-columns: 1fr; text-align: center; }
.a-header.center > span { justify-self: center; }
.s-cal .a-add { bottom: 100px; }
.a-header.plain { background: #fff; }
.a-back { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; }
.a-icons { display: flex; gap: 14px; }
.a-icons svg { width: 22px; height: 22px; }
.a-band { display: flow-root; background: var(--band); padding-bottom: 40px; }
.a-sheet { position: relative; z-index: 1; margin-top: -24px; background: #fff; border-radius: 24px 24px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .06); padding: 18px 0 140px; }
.a-add { position: absolute; z-index: 3; right: 16px; bottom: 40px; width: 56px; height: 56px; }
.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 500; }
.a-btn svg { width: 16px; height: 16px; }
.a-primary { width: 280px; height: 52px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 600; transition: transform .2s var(--spring); }
.a-primary:active { transform: scale(.96); }
.muted { color: var(--g3); }
.link { color: var(--blue); font-size: 14px; font-weight: 500; }

/* Bottom navigation */
.a-nav { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 84px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 10px 0; background: #fff; border-top: 1px solid #E7E7E7; }
.a-nav span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--g2); }
.a-nav svg, .a-nav img { width: 24px; height: 24px; fill: currentColor; }
.a-nav img { opacity: .45; }
.a-nav .on { color: #000; font-weight: 500; }
.a-nav .on img { opacity: 1; }
.a-nav .dot::after { content: ""; position: absolute; top: 0; left: calc(50% + 5px); width: 10px; height: 10px; border-radius: 50%; background: #F2385A; box-shadow: 0 0 0 2px #fff; }

/* Identity chips (Me / Partner / Us) */
.a-chips { display: flex; gap: 8px; padding: 4px 16px 0; }
.a-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 12px 4px 8px; border-radius: 999px; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1); font-size: 12px; font-weight: 500; color: var(--g3); transition: background .25s, color .25s; }
.a-chip i { position: relative; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c); transition: background .25s; }
.a-chip.on { background: #fff; color: #000; }
.a-chip.on i { background: var(--c); }
.a-chip.on i::after { content: ""; position: absolute; left: 4.6px; top: 2.4px; width: 3.4px; height: 6.4px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(42deg); }

/* ---------- Home ---------- */
.h-sky { position: absolute; inset: 0 0 auto; height: 150px; background: url("../assets/img/sky-day.jpg") center top / cover; }
.h-surface { position: absolute; inset: 0; background: #fff; clip-path: path("M0 100 Q187.5 36 375 100 V812 H0 Z"); padding-top: 98px; }
.h-head { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 16px; }
.h-hi { font-size: 24px; font-weight: 500; letter-spacing: -.24px; line-height: 1.2; }
.h-greet { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; color: var(--g3); }
.h-greet img { width: 16px; height: 16px; }
.h-avatars { display: flex; }
.h-avatars img { width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.h-avatars img + img { margin-left: -14px; }
.h-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 8px; padding: 16px 16px 0; }
.h-sc { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 4px 0; font-size: 13px; font-weight: 500; line-height: 1.2; }
.h-sc span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--soft); transition: transform .35s var(--spring), background .2s; }
.h-sc img { width: 28px; height: 28px; }
.h-sc:hover span { transform: scale(1.08) rotate(-6deg); background: var(--butter-band); }
.h-sc:active span { transform: scale(.94); }
.h-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 10px 12px 0; }
.h-wd { display: flex; flex-direction: column; align-items: center; min-height: 68px; padding: 6px 0 4px; border-radius: 10px; font-family: "Poppins", var(--font-ui); }
.h-wd small { font-size: 9px; font-weight: 500; color: var(--g3); text-transform: uppercase; }
.h-wd b { display: grid; place-items: center; width: 34px; height: 34px; margin-top: 3px; border-radius: 50%; font-size: 15px; font-weight: 500; }
.h-wd i { width: 4px; height: 4px; margin-top: 3px; border-radius: 50%; background: var(--blue); opacity: 0; }
.h-wd.has i { opacity: 1; }
.h-wd.today { background: rgba(0, 97, 239, .06); }
.h-wd.today small { color: var(--blue); }
.h-wd.today b { background: var(--blue); color: #fff; }
.h-day { padding: 12px 16px 10px; font-size: 20px; font-weight: 500; }
.h-card { margin: 0 16px; padding: 4px 0; border-radius: 24px; background: var(--soft); }
.h-row { display: flex; gap: 12px; padding: 13px 16px; }
.h-row + .h-row { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .06); }
.h-ic { flex: none; width: 21px; height: 21px; color: #000; }
.h-row-main { flex: 1; min-width: 0; }
.h-row-t { font-size: 15px; font-weight: 500; }
.h-row-b { display: flex; justify-content: space-between; margin-top: 6px; font-size: 14px; }
.h-row-b .muted { font-size: 13px; }
.h-todos li { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 14px; }
.h-todos .muted { font-size: 13px; }
.h-todo { display: flex; align-items: center; gap: 8px; text-align: left; }
.h-todo i { position: relative; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px #000; transition: background .25s, transform .3s var(--spring); }
.h-todo span { position: relative; transition: color .3s; }
.h-todo span::after { content: ""; position: absolute; left: 0; top: 52%; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.h-todo.is-done i { background: #000; transform: scale(1.06); }
.h-todo.is-done i::after { content: ""; position: absolute; left: 4.6px; top: 2.2px; width: 3.4px; height: 6.4px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(42deg); }
.h-todo.is-done span { color: var(--g3); }
.h-todo.is-done span::after { transform: scaleX(1); }

/* ---------- To-dos ---------- */
.t-sec { padding: 0 15px; margin-bottom: 18px; }
.t-sec-h { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 7px; font-size: 15px; font-weight: 500; }
.t-sec-h .muted { font-size: 13px; font-weight: 400; }
.t-group { border-radius: 14px; background: var(--soft); overflow: hidden; }
.t-row { position: relative; display: flex; align-items: center; min-height: 60px; padding-right: 16px; transition: opacity .35s, transform .46s var(--ease); }
.t-row + .t-row::before { content: ""; position: absolute; left: 52px; right: 16px; top: 0; height: 1px; background: rgba(0, 0, 0, .08); }
.t-row.out { display: none; }
.t-row.flying { opacity: 0; transform: translateY(26px) scale(.98); }
.t-ring { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; }
.t-ring::before { content: ""; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c); transition: background .25s, box-shadow .25s; }
.t-ring.dashed::before { box-shadow: none; outline: 1.5px dashed var(--c); outline-offset: -1.5px; }
.t-ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 10px; margin: -7px 0 0 -3px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); clip-path: inset(0 100% 0 0); transition: clip-path .32s var(--ease) .1s; }
.t-row.is-done .t-ring::before { background: var(--c); outline-color: transparent; }
.t-row.is-done .t-ring::after { clip-path: inset(0 0 0 0); }
.t-text { flex: 1; min-width: 0; padding: 10px 0; }
.t-title { position: relative; display: inline-block; font-size: 16px; line-height: 22px; transition: color .35s; }
.t-title::after { content: ""; position: absolute; left: 0; top: 52%; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .38s var(--ease); }
.t-row.is-done .t-title { color: var(--g3); }
.t-row.is-done .t-title::after { transform: scaleX(1); }
.t-meta { margin-top: 2px; font-size: 12px; color: var(--g3); }
.t-row > img { width: 18px; height: 18px; }

/* ---------- Calendar ---------- */
.c-month { display: flex; align-items: center; gap: 4px; height: 44px; padding: 8px 16px 0; font-family: "Poppins", var(--font-ui); font-size: 20px; font-weight: 500; }
.c-month svg { width: 18px; height: 18px; }
.c-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); height: 30px; align-items: center; text-align: center; font-family: "Poppins", var(--font-ui); font-size: 10px; font-weight: 500; color: var(--g3); }
.s-cal .a-sheet { padding: 6px 0 0; }
.c-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.c-day { min-width: 0; min-height: 78px; padding: 4px 2px 0; box-shadow: inset 0 .5px 0 rgba(0, 0, 0, .08); text-align: center; }
.c-day > b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-family: "Poppins", var(--font-ui); font-size: 14px; font-weight: 400; }
.c-day.has > b { font-weight: 500; }
.c-day.dim > b { color: #C4C4C4; }
.c-day.today > b { background: var(--blue); color: #fff; }
.c-ev { display: flex; align-items: center; gap: 2px; min-height: 18px; margin: 2px 1px 0; padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--c) 14%, transparent); font-size: 10px; font-weight: 500; line-height: 18px; text-align: left; white-space: nowrap; overflow: hidden; transition: opacity .3s, max-height .3s; max-height: 18px; }
.c-ev img { width: 9px; height: 9px; flex: none; }
.c-ev.out { opacity: 0; max-height: 0; min-height: 0; margin-top: 0; }
.c-more { display: block; margin-top: 2px; font-size: 9px; color: var(--g3); }

/* ---------- Special Days ---------- */
.a-pill { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 34px; margin: 6px 16px 0; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .55); --idx: 0; }
.a-pill .thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 999px; background: var(--butter); transform: translateX(calc(100% * var(--idx))); transition: transform .38s var(--ease); }
.a-pill button { position: relative; font-size: 12px; font-weight: 500; color: var(--g3); transition: color .25s; }
.a-pill button.on { color: #000; }
.sd-list { display: flex; flex-direction: column; gap: 10px; padding: 18px 15px 140px; }
.sd-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); text-align: left; transition: transform .3s var(--spring), opacity .3s, box-shadow .2s; }
.sd-card:hover { box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12), 0 8px 18px -10px rgba(0, 0, 0, .25); }
.sd-card:active { transform: scale(.98); }
.sd-card.out { display: none; }
.sd-card.enter { animation: cardIn .45s var(--ease) both; animation-delay: calc(var(--n, 0) * 40ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } }
.sd-t { font-size: 16px; font-weight: 500; }
.sd-d { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 13px; color: var(--g3); }
.sd-d img { width: 14px; height: 14px; }
.sd-n { text-align: right; flex: none; }
.sd-n b { display: block; font-size: 30px; font-weight: 500; letter-spacing: -.5px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sd-n span { font-size: 12px; color: var(--g3); }
.sd-detail { position: absolute; inset: 0; z-index: 8; background: #fff; transform: translateX(100%); transition: transform .45s var(--ease); box-shadow: -10px 0 30px rgba(0, 0, 0, .08); }
.sd-detail.open { transform: none; }
.sd-cover { position: relative; min-height: 430px; padding: 118px 24px 0; text-align: center; background: var(--tint, #FFEFC4); transition: background .3s; }
.sd-back { position: absolute; left: 10px; top: 58px; display: grid; place-items: center; width: 40px; height: 40px; }
.sd-back svg { width: 24px; height: 24px; }
.sd-cover-t { font-size: 16px; font-weight: 500; opacity: .72; }
.sd-cover-n { display: block; margin-top: 12px; font-size: 96px; font-weight: 500; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }
.sd-cover-u { margin-top: 8px; font-size: 17px; opacity: .8; }
.sd-cover-d { margin-top: 8px; font-size: 14px; opacity: .72; }
.sd-foot { position: absolute; left: 20px; right: 20px; bottom: 44px; display: flex; align-items: center; gap: 8px; text-align: left; }
.sd-foot img { width: 30px; height: 30px; border-radius: 50%; }
.sd-foot b { display: block; font-size: 14px; font-weight: 500; }
.sd-foot small { display: block; font-size: 12px; opacity: .6; }
.sd-foot em { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .6); font-size: 12px; font-style: normal; font-weight: 500; }
.sd-body { position: relative; margin-top: -26px; padding: 10px 16px; border-radius: 26px 26px 0 0; background: #fff; }
.grip { display: block; width: 36px; height: 5px; margin: 0 auto 16px; border-radius: 3px; background: #E3E3E3; }
.sd-body-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 20px; font-weight: 500; }
.sd-empty { margin-top: 14px; padding: 22px 20px; border-radius: 20px; background: var(--soft); text-align: center; font-size: 13px; color: var(--g3); line-height: 1.45; }
.sd-empty b { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 500; color: #000; }

/* ---------- Money ---------- */
.m-hero { display: flow-root; background: #E1F7E7; padding-bottom: 50px; }
.m-ledger { display: flex; align-items: center; gap: 8px; padding: 6px 20px 0; }
.m-name { display: flex; align-items: center; gap: 2px; font-size: 18px; font-weight: 500; }
.m-name svg { width: 16px; height: 16px; color: var(--g2); }
.m-shared { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px; background: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 500; }
.m-shared img { width: 16px; height: 16px; }
.m-acts { display: flex; align-items: center; gap: 16px; margin-left: auto; color: var(--blue); font-size: 14px; font-weight: 500; }
.m-acts span { display: flex; align-items: center; }
.m-acts svg { width: 14px; height: 14px; }
.m-month { display: flex; justify-content: space-between; align-items: flex-end; padding: 22px 20px 0; font-size: 13px; color: #625D6B; }
.m-mon { display: flex; align-items: center; gap: 2px; font-family: "Poppins", var(--font-ui); font-size: 20px; font-weight: 500; color: #000; }
.m-mon svg { width: 16px; height: 16px; }
.m-big { padding: 2px 20px 0; font-size: 34px; font-weight: 500; color: #28232B; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.m-cols { display: flex; margin: 14px 20px 0; }
.m-cols > div { flex: 1; }
.m-cols span { font-size: 13px; color: #625D6B; }
.m-cols b { display: block; margin-top: 2px; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.m-cols i { width: .5px; margin: 0 16px; background: #D6D1DA; }
.m-sheet { margin-top: -26px; border-radius: 26px 26px 0 0; box-shadow: 0 -10px 28px rgba(40, 35, 43, .1); padding: 20px 15px 140px; }
.m-day { margin-bottom: 16px; }
.m-day-h { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 8px; font-size: 14px; font-weight: 500; }
.m-day-h > span:last-child { display: flex; align-items: center; gap: 8px; }
.m-day-h b { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.m-day-h i { width: 1px; height: 14px; background: #CCC; }
.m-day-h .in:empty { display: none; }
.in { color: var(--income); }
.m-card { padding: 0 10px; border-radius: 20px; background: var(--soft); }
.m-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.m-row + .m-row::before { content: ""; position: absolute; left: 46px; right: 0; top: 0; height: .5px; background: #E5E1DC; }
.m-row p { font-size: 15px; font-weight: 500; }
.m-row .m-meta { font-weight: 400; }
.m-row > b { margin-left: auto; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Insights */
.i-body { padding: 10px 20px; }
.i-h { font-size: 16px; font-weight: 500; }
.i-donut { position: relative; width: 196px; height: 196px; margin: 20px auto 18px; }
.i-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.i-donut circle { fill: none; stroke-width: 22; transition: stroke-dashoffset 1s var(--ease); }
.i-total { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.i-total span { font-size: 12px; color: var(--g3); }
.i-total b { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.i-list li { display: grid; grid-template-columns: 36px 1fr auto; column-gap: 10px; align-items: center; padding: 8px 0; }
.i-list .stk { grid-row: span 2; background: var(--soft); }
.i-list p { font-size: 15px; font-weight: 500; }
.i-list b { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.i-bar { grid-column: 2 / span 2; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--track); overflow: hidden; }
.i-bar i { display: block; height: 100%; width: var(--w); border-radius: 2px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
.s-insights.drawn .i-bar i { transform: scaleX(1); }

/* ---------- Trips ---------- */
.tr-hero { display: flow-root; background: #E9F3FF; padding-bottom: 46px; }
.tr-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 0 20px; }
.tr-title { font-size: 22px; font-weight: 500; line-height: 1.25; }
.tr-top .a-btn { margin-top: 14px; }
.tr-top img { width: 128px; height: 115px; }
.tr-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 16px 20px 0; }
.tr-tile { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .72); }
.tr-tile img { width: 52px; height: 44px; }
.tr-tile b { display: block; font-size: 15px; font-weight: 500; }
.tr-tile span { font-size: 12px; color: var(--g3); }
.s-trips .a-sheet { padding: 20px 16px 140px; }
.tr-h { margin-bottom: 12px; font-size: 16px; font-weight: 500; }
.tr-card { display: block; width: 100%; margin-bottom: 12px; border-radius: 20px; overflow: hidden; background: var(--soft); text-align: left; transition: transform .3s var(--spring); }
button.tr-card:hover { transform: translateY(-2px); }
button.tr-card:active { transform: scale(.98); }
.tr-cover { position: relative; display: block; height: 128px; background: linear-gradient(165deg, #CFE2FF 0%, #F8E4EA 100%); overflow: hidden; }
.tr-cover::before { content: ""; position: absolute; right: -30px; top: -34px; width: 170px; height: 170px; background: url("../assets/icons/flower-line.svg") center / contain no-repeat; opacity: .07; }
.tr-cover::after { content: "Tokyo"; position: absolute; left: 14px; bottom: 10px; font-family: var(--font-display); font-size: 30px; font-weight: 500; letter-spacing: -.02em; color: rgba(0, 0, 0, .78); }
.tr-cover.alt { background: linear-gradient(165deg, #D9F0EB, #EEF1E8); }
.tr-cover.alt::after { content: "Lake"; }
.tr-cover em { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .86); font-size: 12px; font-style: normal; font-weight: 500; }
.tr-info { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; }
.tr-info b { font-size: 16px; font-weight: 500; }
.tr-info span { font-size: 13px; color: var(--g3); }
.tr-card.ghost { opacity: .9; }

/* Itinerary */
.it-tabs { display: flex; gap: 20px; padding: 0 20px; box-shadow: inset 0 -1px 0 #EEE; }
.it-tabs span { padding: 10px 0; font-size: 14px; font-weight: 500; color: var(--g2); }
.it-tabs .on { color: #000; box-shadow: inset 0 -2px 0 #000; }
.it-days { display: flex; gap: 8px; padding: 14px 16px 6px; }
.it-days span { padding: 6px 12px; border-radius: 999px; background: var(--soft); font-size: 13px; font-weight: 500; color: var(--g3); }
.it-days .on { background: #000; color: #fff; }
.it-body { padding: 8px 16px; }
.it-theme { font-size: 17px; font-weight: 500; margin-bottom: 12px; }
.it-empty { padding: 26px 20px; border-radius: 20px; background: var(--soft); text-align: center; font-size: 14px; color: var(--g3); transition: opacity .3s; }
.it-empty .a-btn { margin-top: 14px; height: 40px; padding: 0 18px; }
.it-empty .a-btn::before { content: ""; width: 14px; height: 14px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.it-empty.gone { display: none; }
.it-progress { display: flex; align-items: center; gap: 8px; min-height: 0; font-size: 13px; color: var(--blue); }
.it-progress:not(:empty) { min-height: 26px; margin-bottom: 4px; }
.it-progress.busy::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(0, 97, 239, .25); border-top-color: var(--blue); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.it-list li { display: grid; grid-template-columns: 46px 1fr; gap: 8px; padding: 5px 0; animation: itemIn .5s var(--ease) both; }
@keyframes itemIn { from { opacity: 0; transform: translateY(10px); } }
.it-time { padding-top: 12px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.it-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--soft); }
.it-card img { width: 26px; height: 26px; flex: none; }
.it-card b { display: block; font-size: 15px; font-weight: 500; }
.it-card span { font-size: 12px; color: var(--g3); }
.it-note { margin-top: 12px; font-size: 11px; color: var(--g2); opacity: 0; transition: opacity .4s; }
.it-note.show { opacity: 1; }

/* ---------- Cycle ---------- */
.cy-hero { position: relative; overflow: hidden; padding-bottom: 46px; background: var(--cy-bg, #F8E9E1); transition: background .6s var(--ease); --cy-fl: #E8C7B6; --cy-thumb: #E6C3AF; }
.cy-hero.period { --cy-bg: #FBDDE6; --cy-fl: #F3AEC5; --cy-thumb: #F3A5BE; }
.cy-flower { position: absolute; color: var(--cy-fl); transition: color .6s; }
.cy-flower.one { width: 285px; height: 285px; right: -96px; top: -70px; }
.cy-flower.two { width: 262px; height: 262px; left: -120px; bottom: -150px; }
.cy-hero > :not(.cy-flower) { position: relative; }
.a-cap { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 66px; height: 30px; margin: 2px 16px 0; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .58); --idx: 0; }
.a-cap .thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: 66px; border-radius: 999px; background: var(--cy-thumb, #FBD0D8); transform: translateX(calc(100% * var(--idx))); transition: transform .38s var(--ease), background .4s; }
.a-cap > span, .a-cap > button { position: relative; font-size: 12px; font-weight: 500; line-height: 26px; text-align: center; opacity: .6; transition: opacity .25s; }
.a-cap .on { opacity: 1; }
.cy-text { margin-top: 26px; text-align: center; }
.cy-text p { font-size: 14px; }
.cy-text b { display: block; margin: 6px 0; font-size: 36px; font-weight: 500; letter-spacing: -.3px; }
.cy-text p:last-child { font-size: 13px; opacity: .72; }
.cy-btns { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.cy-log, .cy-sym { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.cy-log { background: var(--period); color: #fff; transition: transform .25s var(--spring), background .3s; }
.cy-log:active { transform: scale(.95); }
.cy-log svg { width: 16px; height: 16px; fill: #fff; }
.cy-sym { background: var(--soft); }
.cy-sym svg { width: 14px; height: 14px; }
.cy-sheet { margin-top: -20px; padding: 14px 10px 140px; box-shadow: 0 -6px 24px rgba(0, 0, 0, .08); }
.cy-mh { display: flex; align-items: center; gap: 10px; padding: 0 10px 10px; }
.cy-mh > span:first-child { font-family: "Poppins", var(--font-ui); font-size: 20px; font-weight: 500; }
.cy-today { font-size: 13px; font-weight: 500; color: var(--period); }
.cy-today.blue { color: var(--blue); }
.cy-arrows { display: flex; gap: 14px; margin-left: auto; color: var(--g3); }
.cy-arrows svg { width: 18px; height: 18px; }
.cy-grid, .in-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.cy-cell { position: relative; display: grid; place-items: center; height: 48px; font-family: "Poppins", var(--font-ui); font-size: 14px; }
.cy-cell b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 400; transition: background .4s, color .4s, box-shadow .4s; }
.cy-cell.period b { background: var(--period); color: #fff; }
.cy-cell.pred b { box-shadow: none; background: none; outline: 1.5px dashed #FD5D7F; outline-offset: -1.5px; }
.cy-cell.ovu b { outline: 1.5px dashed #1BA3A5; outline-offset: -1.5px; color: #1BA3A5; }
.cy-cell.fertile b { color: #1BA3A5; }
.cy-cell.today::before { content: "Today"; position: absolute; top: -3px; font-size: 10px; font-weight: 500; }
.cy-cell.today b { font-weight: 500; }
.cy-cell.logged::after { content: ""; position: absolute; bottom: 1px; width: 12px; height: 3px; border-radius: 2px; background: var(--period); }
.cy-cell.pop b { animation: pop .5s var(--spring); }
@keyframes pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.cy-legend { display: flex; justify-content: center; gap: 14px; margin-top: 14px; font-size: 12px; color: var(--g3); }
.cy-legend span { display: flex; align-items: center; gap: 5px; }
.cy-legend i { width: 9px; height: 9px; border-radius: 50%; }
.lg-period { background: var(--period); }
.lg-fertile { background: #1BA3A5; }
.lg-ovu { outline: 1.4px dashed #1BA3A5; }
.lg-pred { outline: 1.4px dashed #FD5D7F; }
.lg-solo { outline: 1.2px dashed var(--rose); }

/* ---------- Intimacy ---------- */
.in-lock { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; padding-top: 236px; background: #fff; text-align: center; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.in-lock.unlocked { opacity: 0; transform: scale(1.04); pointer-events: none; }
/* The app's lock sticker (AppStickerDisc, 54% glyph, 2pt ink ring), tinted by module: Intimacy lavender */
.in-tile { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: #DED3FA; box-shadow: inset 0 0 0 2px #111; animation: pop .5s var(--spring) both; }
.in-tile img { width: 42px; height: 42px; }
.in-lock-t { margin-top: 22px; font-size: 24px; font-weight: 500; }
.in-lock-d { margin: 10px 46px 0; font-size: 15px; line-height: 1.45; color: var(--g3); }
.in-lock .a-primary { margin-top: 30px; }
.in-face { position: absolute; left: 50%; top: 300px; display: grid; place-items: center; width: 150px; height: 150px; margin-left: -75px; border-radius: 36px; background: rgba(242, 242, 245, .97); color: var(--blue); opacity: 0; transform: scale(.85); transition: opacity .25s, transform .35s var(--spring); }
.in-face svg { width: 70px; height: 70px; }
.in-face.scan { opacity: 1; transform: none; }
.in-face.scan svg { animation: faceScan 1s ease-in-out; }
@keyframes faceScan { 0% { opacity: .35; } 50% { opacity: 1; } 70% { transform: scale(1.06); } 100% { opacity: 1; } }
.in-hero { position: relative; overflow: hidden; padding-bottom: 42px; background: var(--in-bg, #FFEDF0); transition: background .5s; --cy-thumb: #FBD0D8; }
.in-hero.partner { --in-bg: #F3EBFD; --cy-thumb: #DFC8FA; }
.in-heart { position: absolute; fill: var(--in-heart, rgba(245, 170, 186, .4)); transition: fill .5s; }
.in-hero.partner .in-heart { --in-heart: rgba(200, 170, 240, .4); }
.in-heart.one { width: 250px; height: 250px; right: -70px; top: -70px; transform: rotate(12deg); }
.in-heart.two { width: 236px; height: 236px; left: -90px; bottom: -130px; transform: rotate(-10deg); }
.in-hero > :not(.in-heart) { position: relative; }
.a-cap.three { grid-auto-columns: 74px; }
.a-cap.three .thumb { width: 74px; }
.in-add { display: flex; width: fit-content; margin: 22px auto 0; height: 44px; padding: 0 20px; }
.in-sheet { margin-top: -20px; padding: 14px 10px 140px; box-shadow: 0 -6px 24px rgba(0, 0, 0, .08); }
.ih { position: relative; display: grid; place-items: center; height: 48px; font-family: "Poppins", var(--font-ui); font-size: 14px; }
.ih svg { position: absolute; width: 34px; height: 34px; top: 7px; left: 50%; margin-left: -17px; transition: opacity .35s, transform .4s var(--spring); }
.ih em { position: relative; font-style: normal; font-size: 12px; font-weight: 600; color: #111; }
.ih .m { fill: var(--rose); }
.ih .p { fill: var(--lavender); }
.ih.solo .m { fill: none; stroke: var(--rose); stroke-width: 1px; stroke-dasharray: 2.6 2; }
.ih.solo .p { fill: none; stroke: var(--lavender); stroke-width: 1px; stroke-dasharray: 2.6 2; }
.ih.split .m { clip-path: inset(0 50% 0 0); }
.ih.split .p { clip-path: inset(0 0 0 50%); }
.ih .hide { opacity: 0; transform: scale(.4); }
.ih.today::before { content: "Today"; position: absolute; top: -3px; font-size: 10px; font-weight: 500; z-index: 1; }

/* ---------- Sections ---------- */
section { position: relative; }
.space, .tour, .together, .pets, .privacy { padding: 150px 0 0; }
.privacy { padding-bottom: 170px; }
.section-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: var(--butter-band); color: var(--butter-ink); font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.eyebrow img { width: 18px; height: 18px; }
.section-head h2 { margin-top: 18px; font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 4.8vw, 58px); line-height: 1.07; letter-spacing: -.025em; color: var(--ink); }
.section-head > p:last-child { max-width: 620px; margin: 20px auto 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--text-2); }

.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* From scattered to in one place */
.sort { max-width: 640px; margin: 0 auto; --p: 1; }
.js .sort { --p: 0; }
.sort li {
  --q: clamp(0, calc(var(--p) * 1.6 - var(--n) * .12), 1);
  display: flex; align-items: center; gap: 16px; margin-bottom: 12px; padding: 16px 22px 16px 16px; border-radius: 22px;
  background: color-mix(in srgb, var(--soft) calc(var(--q) * 100%), #F2F0EE);
  transform: translate(calc(var(--x) * (1 - var(--q))), calc(var(--y) * (1 - var(--q)))) rotate(calc(var(--r) * (1 - var(--q))));
  box-shadow: 0 calc(var(--q) * 14px) calc(var(--q) * 30px) calc(var(--q) * -18px) rgba(40, 35, 43, .35);
}
.sort-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; filter: grayscale(calc(1 - var(--q))); opacity: calc(.55 + var(--q) * .45); }
.sort-ic img { width: 28px; height: 28px; }
.sort-txt { display: grid; font-size: clamp(16px, 1.6vw, 20px); font-weight: 500; }
.sort-txt > * { grid-area: 1 / 1; }
.sort-txt s { color: var(--g2); text-decoration-thickness: 1.5px; opacity: calc(1 - var(--q) * 1.6); font-weight: 400; }
.sort-txt b { font-weight: 500; color: var(--ink); opacity: calc(var(--q) * 1.6 - .6); transform: translateY(calc((1 - var(--q)) * 10px)); }

/* Feature tour */
.tour-tabs { display: none; }
.tour-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 72px; align-items: start; }
.tour-steps { padding-bottom: 12vh; }
.step { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; max-width: 470px; opacity: .25; transition: opacity .5s var(--ease); }
.step.is-active { opacity: 1; }
.step h3 { margin-top: 18px; font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.step > p:not(.eyebrow):not(.hint) { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.step .eyebrow { align-self: flex-start; }
.seg { display: inline-flex; align-self: flex-start; gap: 2px; margin-top: 26px; padding: 3px; border-radius: 999px; background: var(--track); }
.seg button { height: 36px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--g3); transition: background .25s, color .25s, box-shadow .25s; }
.seg button[aria-pressed="true"] { background: #fff; color: #000; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.hint { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--butter-ink); }
.hint svg { width: 14px; height: 14px; fill: var(--yolk); flex: none; }
.hint.as-btn { align-self: center; padding: 8px 12px; border-radius: 999px; transition: background .2s; }
.hint.as-btn:hover { background: var(--butter-band); }
.tour-stage { position: sticky; top: max(84px, calc(50vh - 362px)); display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 12vh; }
.phone-tour { --k: .84; }
.tour-dots { display: flex; gap: 8px; }
.tour-dots i { width: 8px; height: 8px; border-radius: 99px; background: #C9DCFB; transition: width .4s var(--ease), background .3s; }
.tour-dots i.on { width: 30px; background: var(--blue); }

/* Together bento */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 26px; padding: 34px; border-radius: 34px; background: var(--soft); overflow: hidden; }
.tile h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.tile-copy p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 420px; }
.tile .hint { margin-top: auto; }

.share-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.share-card { padding: 16px 16px 10px; border-radius: 22px; background: #fff; box-shadow: 0 12px 28px -18px rgba(40, 35, 43, .4), 0 0 0 .5px rgba(0, 0, 0, .05); }
.share-card.mia { background: #FBF9FF; }
.share-who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.share-who img { width: 30px; height: 30px; border-radius: 50%; }
.share-card li { display: flex; align-items: center; gap: 10px; min-height: 46px; box-shadow: inset 0 1px 0 #F1ECE6; font-size: 14px; overflow: hidden; max-height: 48px; transition: max-height .45s var(--ease), opacity .35s, min-height .45s var(--ease); }
.share-card li.hidden { max-height: 0; min-height: 0; opacity: 0; }
.share-card li.arrive { animation: arrive .6s var(--spring); }
@keyframes arrive { 0% { transform: translateX(-16px); background: var(--butter-band); } 100% { transform: none; background: transparent; } }
.sc-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ring { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #8A8A8A; }
.sc-ring.done { background: var(--blue); box-shadow: none; }
.sc-ring svg { width: 13px; height: 13px; color: #fff; }
.sc-chip { flex: none; padding: 4px 10px; border-radius: 999px; background: #F4F0EB; font-size: 12px; font-weight: 600; color: #333; box-shadow: inset 0 0 0 1.5px transparent; transition: background .25s, box-shadow .25s, transform .3s var(--spring); }
.sc-chip.shared { background: var(--butter); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.sc-chip:hover { transform: scale(1.05); }
.sc-chip:active { transform: scale(.94); }
.share-empty { padding: 10px 0 4px; font-size: 12px; color: var(--g2); }

.miss-demo { display: flex; align-items: center; gap: 18px; }
.miss-app { flex: 1; min-width: 0; }
.miss-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 15px; font-weight: 500; }
.miss-card { padding: 15px; border-radius: 22px; background: #fff; box-shadow: 0 12px 28px -18px rgba(40, 35, 43, .4), 0 0 0 .5px rgba(0, 0, 0, .05); }
.miss-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.miss-cols div { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: center; }
.miss-cols img { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; }
.miss-cols span { font-size: 12px; color: var(--g3); }
.miss-cols b { font-size: 26px; font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums; }
.miss-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin: 14px 0 12px; text-align: center; }
.miss-week svg { width: 22px; height: 22px; margin: 0 auto 3px; color: var(--ink); }
.miss-week span { font-size: 10px; color: var(--g3); }
.miss-week .today span { font-weight: 600; color: #000; }
.miss-week .pop svg { animation: pop .6s var(--spring); }
.miss-btn { width: 100%; height: 46px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 600; transition: transform .25s var(--spring); }
.miss-btn:hover { transform: translateY(-1px); }
.miss-btn:active { transform: scale(.96); }
.miss-phone { position: relative; flex: none; width: 196px; height: 300px; padding: 54px 14px 14px; border-radius: 34px; background: linear-gradient(170deg, #4AA3F5 0%, #9BD6FB 70%, #FBDDE6 100%); box-shadow: inset 0 0 0 5px #0F0F12, 0 24px 40px -22px rgba(10, 16, 34, .5); overflow: hidden; }
.miss-banner { position: absolute; z-index: 2; left: 10px; right: 10px; top: 12px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 16px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 10px; line-height: 1.3; transform: translateY(-130%); transition: transform .55s var(--spring); }
.miss-banner.show { transform: none; }
.miss-banner svg { width: 22px; height: 22px; flex: none; }
.miss-banner b { display: block; font-size: 11px; }
.miss-banner small { margin-left: auto; align-self: flex-start; font-size: 9px; color: var(--g3); }
.miss-widget { width: 168px; padding: 13px; border-radius: 22px; background: var(--soft); transition: transform .4s var(--spring); }
.miss-widget.bump { animation: bump .6s var(--spring); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.miss-widget .w-count { margin: 10px 0 6px; }
.miss-widget .w-count svg { width: 40px; height: 40px; }
.miss-widget .w-count b { font-size: 34px; }
.miss-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.miss-apps i { aspect-ratio: 1; border-radius: 10px; background: rgba(255, 255, 255, .42); }
.flying-flower { position: fixed; z-index: 90; width: 34px; height: 34px; pointer-events: none; }

.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.burst i { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); background: var(--c); border-radius: 50%; animation: burst 1.6s cubic-bezier(.15, .8, .3, 1) forwards; animation-delay: .62s; opacity: 0; }
.burst i.star { border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.burst i.heart { border-radius: 0; clip-path: path("M5 9S0 6 0 2.6A2.6 2.6 0 0 1 5 1.4 2.6 2.6 0 0 1 10 2.6C10 6 5 9 5 9Z"); }
@keyframes burst {
  0% { opacity: 1; transform: translate(0, 0) scale(.3) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--rot)); }
}

/* Pets marquee */
.pets .section-head { margin-bottom: 48px; }
.marquee { display: flex; flex-direction: column; gap: 18px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-row { display: flex; gap: 18px; width: max-content; animation: marquee 70s linear infinite; }
.marquee-row.reverse { animation-direction: reverse; animation-duration: 80s; }
.marquee:hover .marquee-row { animation-play-state: paused; }
.marquee-row img { width: 96px; height: 96px; border-radius: 50%; transition: transform .45s var(--spring); }
.marquee-row img:hover { transform: scale(1.14) rotate(-8deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Values */
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.value { padding: 30px 26px; border-radius: 30px; background: var(--soft); transition: transform .5s var(--spring), box-shadow .4s; }
.value:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -28px rgba(40, 35, 43, .5); }
.value:nth-child(2) { transition-delay: .06s; }
.value:nth-child(3) { transition-delay: .12s; }
.value:nth-child(4) { transition-delay: .18s; }
.v-stk { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--tint); transition: transform .5s var(--spring); }
.value:hover .v-stk { transform: rotate(-10deg) scale(1.06); }
.v-stk img { width: 32px; height: 32px; }
.value h3 { margin-top: 22px; font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.value p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* ---------- Night footer (revealed under the sheet) ---------- */
.night { position: sticky; bottom: 0; z-index: 0; min-height: min(100svh, 760px); display: flex; align-items: center; background: var(--night); color: #fff; overflow: hidden; }
/* App night navy, a warm glow behind the flower and a fine star field (no photo) */
.night-sky { position: absolute; inset: 0; background: radial-gradient(42% 36% at 50% 30%, rgba(255, 227, 163, .09), transparent 70%), radial-gradient(110% 60% at 50% 0%, #151C39 0%, rgba(21, 28, 57, 0) 100%), var(--night); }
.night-sky::before, .night-sky::after { content: ""; position: absolute; inset: 0; -webkit-mask-image: linear-gradient(#000 35%, transparent 85%); mask-image: linear-gradient(#000 35%, transparent 85%); }
.night-sky::before {
  background-image: radial-gradient(1px 1px at 22px 34px, rgba(255, 255, 255, .7), transparent), radial-gradient(1px 1px at 128px 92px, rgba(255, 255, 255, .5), transparent), radial-gradient(1.5px 1.5px at 196px 18px, rgba(255, 255, 255, .8), transparent), radial-gradient(1px 1px at 74px 168px, rgba(255, 255, 255, .45), transparent), radial-gradient(1px 1px at 232px 196px, rgba(255, 255, 255, .6), transparent);
  background-size: 260px 220px;
}
.night-sky::after {
  background-image: radial-gradient(1.5px 1.5px at 60px 70px, rgba(255, 236, 190, .9), transparent), radial-gradient(1px 1px at 300px 40px, rgba(255, 255, 255, .7), transparent), radial-gradient(1.5px 1.5px at 210px 250px, rgba(255, 255, 255, .6), transparent);
  background-size: 360px 300px;
  animation: stars 6s ease-in-out infinite;
}
@keyframes stars { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.night-inner { position: relative; width: 100%; padding-top: 120px; padding-bottom: 36px; text-align: center; }
.night-flower { width: 76px; height: 76px; margin: 0 auto 26px; filter: drop-shadow(0 0 22px rgba(255, 227, 163, .35)); animation: sway 10s ease-in-out infinite; }
.night h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 5vw, 62px); line-height: 1.07; letter-spacing: -.025em; }
.night-inner > p { margin: 18px auto 32px; max-width: 520px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 110px; padding-top: 24px; box-shadow: inset 0 1px 0 #2C334D; font-size: 13px; color: rgba(255, 255, 255, .6); }
.foot-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #fff; }
.foot-brand svg { width: 22px; height: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .float-card { display: none; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .float-card { display: none; }
  .tour-tabs { display: flex; gap: 8px; overflow-x: auto; margin: -24px calc(var(--gutter) * -1) 26px; padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .tour-tabs::-webkit-scrollbar { display: none; }
  .tour-tabs button { flex: none; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--soft); font-size: 14px; font-weight: 600; color: var(--g3); transition: background .25s, color .25s; }
  .tour-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
  .tour-grid { grid-template-columns: 1fr; gap: 28px; }
  .tour-steps { padding-bottom: 0; }
  .step { display: none; min-height: 0; max-width: 620px; margin: 0 auto; opacity: 1; text-align: center; align-items: center; }
  .step.is-active { display: flex; }
  .step .eyebrow, .seg { align-self: center; }
  .step h3 { margin-top: 14px; }
  .tour-stage { position: static; margin-top: 0; }
  .step .eyebrow { display: none; }
  .step h3 { margin-top: 0; }
  .bento { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; height: 36px; padding: 0 14px; font-size: 13px; }
  .brand-word { height: 26px; }
  .hero { padding: 108px var(--gutter) 290px; }
  .bloom { width: 52px; height: 52px; margin-bottom: 18px; }
  .store { height: 50px; font-size: 16px; padding: 0 16px 0 12px; }
  .hero-stage { margin-top: -262px; }
  .phone-hero { --k: .76; --bz: 9px; }
  .phone-tour { --k: .76; --bz: 9px; }
  .space, .tour, .together, .pets, .privacy { padding-top: 100px; }
  .privacy { padding-bottom: 120px; }
  .section-head { margin-bottom: 44px; }
  .sort li { padding: 12px 16px 12px 12px; gap: 12px; border-radius: 18px; }
  .sort-ic { width: 44px; height: 44px; }
  .sort-ic img { width: 24px; height: 24px; }
  .tile { padding: 24px 18px; border-radius: 28px; }
  .share-demo { grid-template-columns: 1fr; }
  .miss-demo { flex-direction: column; align-items: stretch; }
  .miss-phone { align-self: center; }
  .values { grid-template-columns: 1fr; }
  .marquee-row img { width: 72px; height: 72px; }
  .foot { flex-direction: column; align-items: flex-start; margin-top: 70px; }
  .foot-links { gap: 8px 18px; }
  .sheet { border-radius: 0 0 30px 30px; }
}
@media (max-height: 800px) {
  /* The footer is taller than short screens, so it scrolls in normally there. */
  .night { position: relative; margin-top: -44px; padding-top: 44px; }
}
@media (max-width: 360px) {
  .phone-hero, .phone-tour { --k: .7; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .sort { --p: 1; }
  .marquee-row { animation: none; }
}

/* ---------- Footer links (home and legal pages) ---------- */
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-links a { transition: color .2s; }
.night .foot-links a { color: rgba(255, 255, 255, .78); }
.night .foot-links a:hover { color: #fff; }
.foot-fine { display: grid; gap: 8px; margin-top: 22px; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .5); text-align: left; }
.foot-fine a { color: rgba(255, 255, 255, .72); }
.values-links { margin-top: 34px; text-align: center; font-size: 15px; color: var(--text-2); }
.values-links a { color: var(--blue); font-weight: 500; }
.values-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Legal pages ---------- */
.legal-page { background: #fff; }
.legal-nav { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.legal-home { margin-left: auto; font-size: 15px; font-weight: 500; color: var(--blue); }
.legal { max-width: 760px; margin: 0 auto; padding: 56px var(--gutter) 96px; }
.legal h1 { margin-top: 16px; font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 5vw, 48px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.legal-meta { margin-top: 12px; font-size: 15px; color: var(--g3); }
.legal-lede { margin-top: 24px; font-size: 19px; line-height: 1.6; color: var(--text); }
.legal-toc { margin: 34px 0 6px; padding: 22px 26px; border-radius: 22px; background: var(--soft); }
.legal-toc p { margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--butter-ink); }
.legal-toc ol { list-style: decimal; padding-left: 20px; columns: 2; column-gap: 36px; font-size: 15px; line-height: 1.5; }
.legal-toc li { margin-bottom: 7px; break-inside: avoid; }
.legal-toc a { color: var(--text); }
.legal-toc a:hover { color: var(--blue); }
.legal section { padding-top: 38px; scroll-margin-top: 84px; }
.legal h2 { font-family: var(--font-display); font-weight: 500; font-size: 23px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.legal section p, .legal section ul, .legal section ol { margin-top: 12px; font-size: 17px; line-height: 1.7; color: #33313A; }
.legal section ul { list-style: disc; padding-left: 24px; }
.legal section li + li { margin-top: 6px; }
.legal section a, .legal-foot a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal b { font-weight: 600; color: var(--ink); }
.legal-steps { list-style: none; counter-reset: step; padding: 0; }
.legal-steps li { position: relative; counter-increment: step; padding: 14px 18px 14px 58px; border-radius: 18px; background: var(--soft); }
.legal-steps li::before { content: counter(step); position: absolute; left: 16px; top: 13px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--butter); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 14px; font-weight: 600; color: var(--ink); }
.legal-steps li + li { margin-top: 8px; }
.legal-foot { box-shadow: inset 0 1px 0 #EEE; background: var(--soft); }
.legal-foot-inner { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; padding: 32px var(--gutter) 44px; font-size: 14px; line-height: 1.6; color: var(--g3); }
.legal-foot .foot-links a { color: var(--text); text-decoration: none; font-weight: 500; }
.legal-foot .foot-links a:hover { color: var(--blue); }
.legal-foot .foot-disclaimer { font-size: 13px; }
@media (max-width: 720px) {
  .legal { padding-top: 36px; }
  .legal-toc { padding: 18px 20px; }
  .legal-toc ol { columns: 1; }
  .legal section p, .legal section ul, .legal section ol { font-size: 16px; }
  .legal-steps li { padding-left: 54px; }
}

/* ---------- Showcase sections (Special Days, Trips, Money) ---------- */
.show { padding: 150px 0 0; }
.show-grid { display: grid; align-items: center; gap: 48px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chips button { height: 38px; padding: 0 16px; border-radius: 999px; background: var(--soft); font-size: 14px; font-weight: 600; color: var(--g3); transition: background .25s, color .25s, transform .3s var(--spring); }
.chips button:hover { transform: translateY(-1px); }
.chips button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* Special Days share posters: a 360 × 640 canvas, as exported by the app */
.sd-grid { grid-template-columns: auto minmax(0, 1fr); }
.sd-grid .widgets { grid-column: 1 / -1; }
.deck { position: relative; height: 520px; }
.poster { --pk: .72; position: absolute; left: 50%; top: 20px; width: calc(360px * var(--pk)); height: calc(640px * var(--pk)); margin-left: calc(-180px * var(--pk)); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(30, 28, 26, .5); cursor: pointer; transition: transform .7s var(--spring), filter .5s, box-shadow .5s; }
.poster.is-front { box-shadow: 0 40px 80px -28px rgba(30, 28, 26, .6); cursor: default; }
.pc { position: absolute; left: 0; top: 0; width: 360px; height: 640px; transform: scale(var(--pk)); transform-origin: 0 0; background: var(--tint); color: #000; font-family: var(--font-ui); line-height: 1.25; }
.pc-brand { position: absolute; left: 0; right: 0; bottom: 40px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.pc-brand svg { width: 22px; height: 22px; }
.pc-brand img { height: 30px; width: auto; }
.pc-group { position: absolute; left: 24px; right: 24px; bottom: 100px; text-align: center; }
.pc-title { font-size: 18px; font-weight: 500; opacity: .92; }
.pc-num { display: block; margin-top: 10px; font-size: 120px; font-weight: 500; letter-spacing: -1.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-unit { margin-top: 8px; font-size: 20px; opacity: .92; }
.pc-date { margin-top: 10px; font-size: 14px; opacity: .85; }
.pc.centered .pc-group { top: 0; bottom: 48px; display: flex; flex-direction: column; justify-content: center; }
.pc.editorial .pc-head { position: absolute; left: 20px; right: 18px; top: 104px; }
.pc.editorial .pc-num { margin: 0; font-size: 156px; letter-spacing: -.04em; white-space: nowrap; }
.pc.editorial .pc-unit { margin: 10px 0 0 4px; font-size: 14px; font-weight: 500; letter-spacing: 2.4px; text-transform: uppercase; opacity: 1; }
.pc.editorial .pc-group { bottom: 92px; text-align: left; padding-top: 14px; border-top: 1.5px solid #000; }
.pc.editorial .pc-title { font-size: 28px; line-height: 1.12; opacity: 1; }
.pc.editorial .pc-date { margin-top: 8px; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; }
.pc.editorial .pc-brand { left: auto; right: 24px; bottom: 42px; }
.pc.editorial .pc-brand svg { width: 18px; height: 18px; }
.pc.editorial .pc-brand img { height: 25px; }
.pc.polaroid { background: var(--pbg); }
.pc-card { position: absolute; left: 36px; right: 36px; top: 104px; padding: 12px 12px 0; border-radius: 4px; background: #FFFDF9; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); transform: rotate(-2.2deg); }
.pc-pic { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 300px; background: var(--tint) center / cover; }
.pc-pic .pc-num { margin: 0; font-size: 100px; letter-spacing: -2px; }
.pc-pic .pc-unit { margin-top: 6px; font-size: 17px; opacity: .85; }
.pc-cap { padding: 14px 4px 18px; }
.pc-cap b { display: block; font-size: 24px; font-weight: 500; line-height: 1.1; color: #2A2622; }
.pc-cap span { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #8A847E; }
.pc.photo { color: #fff; text-shadow: 0 0 12px rgba(0, 0, 0, .2); }
.pc.photo .pc-brand svg { filter: none; }
.pc.photo .pc-brand img { filter: invert(1); }
.pc.photo.editorial .pc-group { border-top-color: #fff; }
.pc-bg { position: absolute; inset: 0; background: var(--photo) center / cover; }
.pc-bg.blur { inset: -20px; filter: blur(18px); transform: scale(1.15); }
.pc-bg.blur::after { background: rgba(0, 0, 0, .25); }
.pc-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .27) 58%, rgba(0, 0, 0, .6)); }
.pc.photo .pc-card { color: #000; text-shadow: none; }
.pc.photo.polaroid .pc-brand img { filter: invert(1); }
.deck-chips { margin-top: 10px; }

/* Home Screen widgets */
.widgets { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.widgets-shelf { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 14px; max-width: 700px; padding: 18px; border-radius: 34px; background: linear-gradient(165deg, #4AA3F5, #9BD6FB 70%, #FBDDE6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.widgets-cap { font-size: 13px; color: var(--g3); }
.wg { position: relative; overflow: hidden; border-radius: 22px; background: var(--tint); color: #000; font-family: var(--font-ui); line-height: 1.2; box-shadow: 0 10px 24px -14px rgba(10, 16, 34, .45); }
.wg-small { width: 150px; height: 150px; padding: 11px 12px; display: flex; flex-direction: column; justify-content: flex-end; }
.wg-small .wg-title { font-size: 11px; font-weight: 500; opacity: .92; }
.wg-small .wg-num { margin-top: 4px; font-size: 42px; font-weight: 500; letter-spacing: -1px; line-height: 1; }
.wg-small .wg-unit { margin-top: 3px; font-size: 10.5px; opacity: .92; }
.wg-brand { display: flex; align-items: center; gap: 3px; margin-top: 8px; }
.wg-brand svg { width: 10px; height: 10px; }
.wg-brand img { height: 14px; width: auto; }
.wg-row { display: flex; gap: 14px; }
.wg-medium { width: 314px; height: 150px; padding: 13px 15px 12px; display: grid; grid-template-columns: 136px 1fr; column-gap: 16px; }
.wg-medium .wg-num { font-size: 66px; font-weight: 500; letter-spacing: -2.6px; line-height: 1; }
.wg-medium .wg-unit { margin-top: 4px; font-size: 9px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; }
.wg-medium .wg-right { display: flex; flex-direction: column; justify-content: flex-end; border-left: 1px solid rgba(0, 0, 0, .12); padding-left: 14px; }
.wg-medium .wg-title { font-size: 16px; font-weight: 500; line-height: 1.15; }
.wg-medium .wg-date { margin-top: 5px; font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; opacity: .85; }
.wg-lock { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; background: rgba(255, 255, 255, .35); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wg-lock svg { width: 12px; height: 12px; }
.wg-lock p { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.wg-lock b { font-size: 26px; font-weight: 500; letter-spacing: -.8px; }
.wg-lock span { font-size: 12px; }
.phone-canvas em { font-style: normal; }

/* ---------- Night mode (values from ApparenceKitColors.dark) ---------- */
.is-night { --n-bg: #0A1022; --n-surface: #151C39; --n-soft: #212843; --n-border: #2C334D; --n-grey: #A1A4B0; --n-muted: #989DB0; --n-brand: #8DB9FF; color: #fff; }
.a-screen.is-night, .is-night .h-surface { background: var(--n-bg); }
.is-night .h-sky { background-image: url("../assets/img/sky-night.jpg"); }
.is-night .h-greet, .is-night .muted, .is-night .h-wd small { color: var(--n-grey); }
.is-night .h-sc span, .is-night .h-card { background: var(--n-soft); }
.is-night .h-row + .h-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.is-night .h-ic { color: #fff; }
.is-night .h-avatars img { box-shadow: 0 0 0 2px var(--n-bg); }
.is-night .h-wd.today { background: rgba(141, 185, 255, .1); }
.is-night .h-wd.today small { color: var(--n-brand); }
.is-night .h-wd.today b { background: var(--n-brand); color: #14243B; }
.is-night .h-wd i { background: var(--n-brand); }
.is-night .h-todo i { box-shadow: inset 0 0 0 1.4px #fff; }
.is-night .h-todo.is-done i { background: #fff; }
.is-night .h-todo.is-done i::after { border-color: var(--n-bg); }
.is-night .a-nav { background: var(--n-bg); border-top-color: var(--n-border); }
.is-night .a-nav span { color: var(--n-muted); }
.is-night .a-nav .on { color: #fff; }
.is-night .a-nav img { filter: invert(1); }
.is-night .a-nav .dot::after { box-shadow: 0 0 0 2px var(--n-bg); }
.is-night .a-status { color: #fff; }
.is-night .a-homebar { background: #fff; }

/* ---------- Night mode and languages ---------- */
.mode-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; padding: 56px 72px; }
.mode-tile .tile-copy h2 { margin-top: 18px; font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 4vw, 50px); line-height: 1.08; letter-spacing: -.025em; color: var(--ink); transition: color 1s; }
.mode-tile .tile-copy p { margin-top: 16px; font-size: 18px; max-width: 440px; }
.mode-tile .daynight { margin-top: 28px; }
.mode-tile.is-dark .eyebrow { background: #212843; color: #EDBD63; }
.mode-tile.is-dark h2 { color: #fff; }
.mode-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.phone-mode .phone-canvas { pointer-events: none; }
.phone-mode { --k: .78; --bz: 10px; }
.phone-mode .a-screen { visibility: visible; opacity: 1; transform: none; transition: none; }
.night-layer { clip-path: circle(0% at 86% 6%); transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1); z-index: 3 !important; }
.is-dark .night-layer { clip-path: circle(150% at 86% 6%); }
.daynight { position: relative; display: block; width: 72px; height: 40px; padding: 4px; border-radius: 999px; background: #E9F3FF; box-shadow: inset 0 0 0 1.5px var(--ink); transition: background .6s; }
.dn-knob { position: relative; display: block; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); transition: transform .6s var(--spring), background .6s; }
.dn-knob img { position: absolute; left: 7px; top: 7px; width: 18px; height: 18px; transition: opacity .4s, transform .6s var(--spring); }
.dn-knob img + img { opacity: 0; transform: rotate(-90deg); }
.is-dark .daynight { background: #212843; }
.is-dark .dn-knob { transform: translateX(32px); background: #151C39; box-shadow: inset 0 0 0 1.5px #fff; }
.is-dark .dn-knob img:first-child { opacity: 0; transform: rotate(90deg); }
.is-dark .dn-knob img + img { opacity: 1; transform: none; }
.mode-tile.is-dark { background: #0A1022; color: #fff; transition: background 1s, color 1s; }
.mode-tile { transition: background 1s; }
.mode-tile.is-dark h3 { color: #fff; }
.mode-tile.is-dark .tile-copy p { color: rgba(255, 255, 255, .7); }

/* ---------- Hero: pairing story ---------- */
.fc-special { left: calc(50% - 580px); top: 40px; }
.fc-miss { left: calc(50% + 420px); top: 470px; }

/* Pairing (smaller, lower left) leads into Relationship (larger, right) */
.hero-duo { position: relative; width: 100%; max-width: 900px; height: 800px; }
.hero-duo figure { position: absolute; margin: 0; display: flex; flex-direction: column; align-items: center; }
.duo-rel { right: 40px; top: 0; }
.duo-pair { z-index: 2; left: 40px; top: 170px; }
.hero-duo .phone-relmain { --k: .86; animation-delay: .45s; }
.duo-pair .phone { --k: .62; --bz: 9px; animation-delay: .65s; }
.duo-pair .phone-screen { box-shadow: none; }
.duo-pair > .phone { rotate: -4deg; }
.duo-cap { max-width: 280px; margin-top: 20px; font-size: 14px; line-height: 1.45; color: var(--g3); text-align: center; }
.duo-cap b { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--ink); }
.duo-link { position: absolute; left: calc(50% - 118px); top: 120px; width: 150px; height: 84px; animation: fadeIn .8s var(--ease) 1.2s both; }

/* The app's pairing pages fade in and rise 2.5% (360 ms) */
.phone-story .a-screen, .phone-story .a-screen.from-left { transform: translateY(2.5%); transition: transform .36s var(--ease), opacity .36s ease, visibility 0s .36s; }
.phone-story .a-screen.is-active { transform: none; transition: transform .36s var(--ease), opacity .36s ease, visibility 0s; }
.phone-story .a-screen.is-leaving, .phone-story .a-screen.is-leaving.to-right { transform: none; opacity: 0; }
.s-pair, .s-paired { background: #fff; }
.pr-scroll { padding: 22px 27.5px 0; }
.pr-cards { position: relative; height: 168px; }
.pr-card { position: absolute; top: 22px; left: 50%; display: flex; flex-direction: column; align-items: center; width: 132px; margin-left: -66px; padding: 14px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .06), 0 10px 28px rgba(27, 25, 23, .1); text-align: center; translate: 0 26px; opacity: 0; transition: transform 1.14s cubic-bezier(.34, 1.56, .64, 1), translate .7s var(--ease), opacity .5s; }
.pr-card.you { transform: translateX(-76px) rotate(-3deg); }
.pr-card.partner { z-index: 1; transform: translateX(76px) rotate(3deg); transition-delay: 0s, .09s, .09s; }
.pr-cards.landed .pr-card { translate: 0 0; opacity: 1; }
.pr-cards.joined .pr-card.you { transform: translateX(-54px) rotate(-3deg); }
.pr-cards.joined .pr-card.partner { transform: translateX(54px) rotate(3deg); }
.pr-av { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px #111; }
.pr-ph { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--butter); }
.pr-ph svg { width: 30px; height: 30px; }
.pr-ph img { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.pr-card b { margin-top: 8px; font-size: 14px; font-weight: 500; }
.pr-card span { margin-top: 2px; font-size: 12px; color: var(--g3); }
.pr-heart { position: absolute; z-index: 2; left: 50%; top: 4px; width: 28px; height: 28px; margin-left: -14px; opacity: 0; transform: translateY(10px) scale(.4); transition: opacity .4s .5s, transform .9s cubic-bezier(.34, 1.56, .64, 1) .5s; }
.pr-cards.joined .pr-heart { opacity: 1; transform: none; animation: heartbeat .5s ease 1.25s; }
@keyframes heartbeat { 50% { scale: 1.18; } }
.pr-spark { position: absolute; fill: #111; animation: twinkle 3s ease-in-out infinite; }
.pr-spark.a { left: calc(50% - 150px); top: 20px; width: 14px; height: 14px; }
.pr-spark.b { left: calc(50% + 136px); top: 140px; width: 12px; height: 12px; animation-delay: -1.5s; }
.pr-cards .burst { top: 22px; z-index: 3; }
.pr-cards .burst i { animation-delay: 0s; }
.pr-title { margin-top: 9px; text-align: center; font-size: 20px; font-weight: 500; line-height: 24px; }
.pr-desc { margin-top: 6px; font-size: 12px; line-height: 1.5; color: #333; }
.pr-sec { display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; }
.pr-sec b { font-size: 15px; font-weight: 500; }
.pr-sec span { font-size: 12px; color: var(--g3); }
.pr-code { display: flex; justify-content: center; align-items: center; gap: 11.6px; height: 44px; margin-top: 18px; }
.pr-code span { width: 34.7px; text-align: center; font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pr-code i { width: 10px; height: 2px; border-radius: 1px; background: #111; }
.pr-btn { display: flex; align-items: center; justify-content: center; height: 50px; margin-top: 11px; border-radius: 999px; color: #fff; font-size: 16px; letter-spacing: -.16px; transition: transform .2s var(--spring), opacity .2s; }
.pr-btn.blue { background: var(--blue); }
.pr-btn.orange { margin-top: 17px; background: #FF8D28; }
.pr-btn.press { transform: scale(.95); }
.pr-btn.loading { opacity: .7; }
.pr-or { position: relative; margin-top: 15px; text-align: center; font-size: 15px; color: var(--g3); }
.pr-or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #EEE; }
.pr-or span { position: relative; padding: 0 12px; background: #fff; }
.pr-field { display: flex; justify-content: center; gap: 8px; margin-top: 15px; }
.pr-field span { display: grid; place-items: center; width: 38.3px; height: 44px; border-radius: 10px; box-shadow: inset 0 0 0 1px #DDD; font-size: 24px; font-weight: 500; transition: box-shadow .2s; }
.pr-field span.filled { box-shadow: inset 0 0 0 1.5px #111; animation: pop .3s var(--spring); }
.pd-body { padding: 150px 15px 20px; }
.pd-title, .pd-desc { opacity: 0; translate: 0 14px; transition: opacity .5s, translate .6s var(--ease); }
.s-paired.revealed .pd-title { opacity: 1; translate: 0 0; transition-delay: .76s; }
.s-paired.revealed .pd-desc { opacity: 1; translate: 0 0; transition-delay: .84s; }
.pd-title { margin-top: 28px; text-align: center; font-size: 24px; font-weight: 500; line-height: 29px; }
.pd-desc { margin-top: 8px; padding: 0 16.5px; text-align: center; font-size: 14px; line-height: 20px; color: var(--g3); }
.pd-btn { margin: 22px 0 0; }

/* Relationship page */
.s-rel { background: #fff; overflow: hidden; }
.rel-band { position: relative; overflow: hidden; display: flow-root; padding: 0 15px 72px; background: linear-gradient(var(--tint) 0%, var(--tint) 25%, var(--pale) 100%); text-align: center; }
.rel-band .a-header { margin: 54px -15px 0; }
.rel-band .dots, .sdd-btn.dots, .tp-disc.dots { display: inline-flex; gap: 3px; align-items: center; justify-content: center; }
.rel-band .dots i, .sdd-btn.dots i, .tp-disc.dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.rel-flower { position: absolute; color: rgba(17, 17, 17, .07); pointer-events: none; }
.rel-flower.r { width: 200px; height: 200px; right: -110px; top: 88px; }
.rel-flower.l { width: 190px; height: 190px; left: -100px; bottom: -40px; }
.rel-avatars { position: relative; display: flex; justify-content: center; margin-top: 18px; }
.rel-avatars img { width: 90px; height: 90px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.rel-avatars img + img { margin-left: -16px; }
.rel-avatars img:first-child { position: relative; z-index: 1; }
.rel-heart { position: absolute; z-index: 2; left: 50%; bottom: -15px; display: grid; place-items: center; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.rel-heart svg { width: 18px; height: 18px; fill: #FF7D83; animation: beat 5s ease-in-out infinite; }
.rel-names { margin-top: 26px; font-size: 20px; font-weight: 500; line-height: 1.2; }
.rel-since { margin-top: 4px; padding: 8px 0; font-size: 13px; color: var(--label); }
.rel-panel { position: relative; display: block; width: 100%; min-height: 72px; padding: 6px 24px; overflow: hidden; }
.rel-panel:active { opacity: .65; }
.rel-view { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.rel-view.entering { animation: relIn .26s cubic-bezier(.33, 1, .68, 1); }
.rel-view.leaving { position: absolute; left: 24px; right: 24px; top: 6px; animation: relOut .26s cubic-bezier(.33, 1, .68, 1) forwards; }
@keyframes relIn { from { transform: translateY(100%); opacity: 0; } }
@keyframes relOut { to { transform: translateY(-100%); opacity: 0; } }
.rel-view b { display: block; font-size: 44px; font-weight: 500; letter-spacing: -.5px; line-height: 1; font-variant-numeric: tabular-nums; color: #000; }
.rel-view span { display: block; margin-top: 4px; font-size: 12px; color: var(--label); }
.spk { position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); fill: var(--sparkle); animation: twinkle 3s ease-in-out infinite; animation-delay: var(--ph); }
@keyframes twinkle { 0%, 100% { transform: scale(.65); opacity: .12; } 50% { transform: scale(1.05); opacity: 1; } }
.rel-beat { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--label); }
.rel-beat img { width: 24px; height: 24px; animation: beat 5s ease-in-out infinite; }
.rel-beat b { font-weight: 500; color: #000; font-variant-numeric: tabular-nums; }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.rel-sheet { position: relative; margin-top: -24px; padding: 4px 15px 0; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -8px 24px rgba(0, 0, 0, .06); }
.rel-sheet .grip { margin: 8px auto 12px; background: #EEE; }
.rel-h { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 4px; font-size: 15px; font-weight: 500; }
.rel-h .link { display: flex; align-items: center; }
.rel-h .link svg { width: 18px; height: 18px; }
.rel-card { padding: 15px; border-radius: 20px; background: var(--soft); margin-bottom: 18px; }
.rel-halves { display: grid; grid-template-columns: 1fr 1px 1fr; column-gap: 14px; }
.rel-halves > i { background: rgba(0, 0, 0, .1); }
.rel-who { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--g3); }
.rel-who img { width: 22px; height: 22px; border-radius: 50%; }
.rel-cnt { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rel-cnt svg { width: 26px; height: 26px; }
.rel-cnt b { font-size: 30px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.rel-last { margin-top: 7px; font-size: 12px; color: var(--g3); }
.rel-rule { display: block; height: 1px; margin: 15px 0 13px; background: rgba(0, 0, 0, .1); }
.rel-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.rel-week span { display: block; font-size: 11px; color: var(--g3); }
.rel-week .today span { font-weight: 500; color: #000; }
.rel-week svg { width: 22px; height: 22px; margin: 6px auto 0; color: #111; }
.rel-week .pop svg { animation: pop .6s var(--spring); }
.rel-btn { display: block; width: 100%; height: 48px; margin-top: 16px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 15px; transition: transform .2s var(--spring); }
.rel-btn:active { transform: scale(.96); }
.rel-details { padding: 0; }
.rel-row { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 3px 15px; font-size: 14px; }
.rel-row + .rel-row { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .08); }
.rel-row b { font-weight: 500; }
.rel-row > span:last-child { display: flex; align-items: center; gap: 8px; color: var(--g3); }
.rel-row img { width: 35px; height: 35px; border-radius: 50%; }
.rel-pill { padding: 6px 12px; border-radius: 8px; background: #fff; color: #000 !important; }

/* ---------- Special Day detail page ---------- */
.sdd { background: #fff; }
.sdd-cover { position: relative; min-height: 410px; padding: 114px 22px 46px; background: var(--tint); text-align: center; line-height: 1.25; }
.sdd-bar { position: absolute; left: 12px; right: 12px; top: 54px; height: 44px; display: flex; justify-content: space-between; align-items: center; }
.sdd-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .72); }
.sdd-btn svg { width: 18px; height: 18px; }
.sdd-title { font-size: 16px; font-weight: 500; opacity: .72; }
.sdd-num { display: block; margin-top: 10px; font-size: 96px; font-weight: 500; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }
.sdd-unit { margin-top: 6px; font-size: 17px; opacity: .8; }
.sdd-date { margin-top: 14px; font-size: 14px; opacity: .72; }
.sdd-foot { display: flex; align-items: center; gap: 10px; margin-top: 40px; text-align: left; }
.sdd-foot > img { width: 32px; height: 32px; border-radius: 50%; }
.sdd-foot b { display: block; font-size: 14px; font-weight: 500; opacity: .86; }
.sdd-foot small { display: block; margin-top: 2px; font-size: 12px; opacity: .6; }
.sdd-foot em { display: flex; align-items: center; gap: 5px; margin-left: auto; padding: 5px 11px 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .6); font-size: 13px; font-style: normal; font-weight: 500; }
.sdd-foot em img { width: 16px; height: 16px; }
.sdd-sheet { position: relative; margin-top: -24px; padding: 0 15px; border-radius: 26px 26px 0 0; background: #fff; }
.sdd-sheet .grip { margin: 12px auto 10px; background: rgba(0, 0, 0, .14); }
.sdd-sheet .sd-body-h { min-height: 44px; align-items: center; }
.sdd-sheet .sd-body-h .link { font-size: 15px; }
.tl { position: relative; padding-left: 20px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 40px; bottom: 0; border-left: 1px dashed var(--g2); }
.tl-year { margin: 4px 0 16px -20px; font-size: 20px; font-weight: 500; }
.tl-item { position: relative; }
.tl-item::before { content: ""; position: absolute; left: -19px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #000; }
.tl-date { font-size: 16px; font-weight: 500; line-height: 20px; }
.tl-author { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.tl-author img { width: 32px; height: 32px; border-radius: 50%; }
.tl-author b { display: block; font-size: 14px; font-weight: 500; }
.tl-author small { display: block; margin-top: 2px; font-size: 12px; color: var(--g3); }
.tl-title { margin-top: 12px; font-size: 16px; font-weight: 500; }
.tl-note { margin-top: 8px; font-size: 14px; line-height: 20px; color: #333; }
.tl-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.ph { aspect-ratio: 1; border-radius: 12px; background: center / cover; }
.ph-a { background-image: url("../assets/photos/coast.jpg"); background-position: 50% 66%; }
.ph-b { background-image: url("../assets/photos/mountain.jpg"); }

.sd-grid .phone-sd { --k: .78; --bz: 10px; }
.deck-wrap { display: flex; flex-direction: column; align-items: center; }
.deck { width: 100%; }

/* ---------- Trips ---------- */
.trip-show { margin-top: 150px; padding: 110px 0; background: linear-gradient(180deg, #fff 0%, #E9F3FF 18%, #E9F3FF 82%, #fff 100%); }
.trip-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.trip-copy h2 { margin-top: 18px; font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.07; letter-spacing: -.025em; color: var(--ink); }
.trip-copy > p:not(.eyebrow):not(.hint) { margin-top: 18px; max-width: 480px; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.route { position: relative; margin-top: 34px; max-width: 460px; }
.route::before { content: ""; position: absolute; left: 21px; top: 26px; bottom: 26px; border-left: 2px dashed #9DB8F5; }
.route button { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 12px 8px 0; border-radius: 18px; text-align: left; transition: background .25s; }
.route button:hover { background: rgba(255, 255, 255, .6); }
.route .stop { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 500; transition: background .3s, transform .4s var(--spring); }
.route button[aria-pressed="true"] { background: #fff; box-shadow: 0 10px 24px -16px rgba(10, 16, 34, .4); }
.route button[aria-pressed="true"] .stop { background: var(--butter); transform: scale(1.08); }
.route b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.route small { display: block; margin-top: 2px; font-size: 13px; color: var(--g3); }
.trip-stage { position: relative; display: flex; justify-content: center; padding: 30px 0; }
.phone-trip { --k: .84; z-index: 2; }
.snap { position: absolute; z-index: 1; margin: 0; padding: 10px 10px 34px; border-radius: 4px; background: #FFFDF9; box-shadow: 0 24px 40px -20px rgba(10, 16, 34, .45); }
.snap img { display: block; width: 190px; height: 150px; object-fit: cover; }
.snap figcaption { position: absolute; left: 12px; bottom: 9px; font-size: 13px; font-weight: 500; color: #2A2622; }
.snap-a { left: -10px; top: 70px; transform: rotate(-8deg); }
.snap-b { right: -20px; bottom: 60px; transform: rotate(6deg); }

/* Trip detail page */
.s-trip { background: #fff; }
.a-status.light { color: #fff; }
.tp-hero { position: relative; height: 330px; background: url("../assets/photos/city.jpg") center / cover; color: #fff; }
.tp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
.tp-bar { position: absolute; z-index: 1; left: 4px; right: 4px; top: 54px; height: 52px; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; }
.tp-disc { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: inset 0 0 0 .5px #EBE6ED; color: #3D434A; }
.tp-disc svg { width: 18px; height: 18px; }
.tp-disc.dots i { width: 3.5px; height: 3.5px; }
.tp-text { position: absolute; z-index: 1; left: 15px; right: 15px; bottom: 30px; text-shadow: 0 0 2px rgba(0, 0, 0, .38); }
.tp-status { font-size: 12px; }
.tp-title { margin-top: 4px; font-size: 24px; font-weight: 500; letter-spacing: -.24px; }
.tp-dates { margin-top: 5px; font-size: 13px; }
.tp-place { display: flex; align-items: center; gap: 3px; margin-top: 3px; font-size: 13px; }
.tp-place svg { width: 14px; height: 14px; }
.tp-row { display: flex; justify-content: space-between; align-items: center; height: 30px; margin-top: 10px; }
.tp-avs { display: flex; }
.tp-avs img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; }
.tp-avs img + img { margin-left: -10px; }
.tp-credit { font-size: 9px; opacity: .85; }
.tp-sheet { position: relative; z-index: 2; margin-top: -20px; padding-bottom: 120px; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -8px 24px rgba(0, 0, 0, .06); }
.tp-tabs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 14px; top: 12px; height: 30px; padding: 2px; border-radius: 999px; background: var(--soft); --idx: 0; }
.tp-tabs .thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 4); border-radius: 999px; background: var(--blue); transform: translateX(calc(100% * var(--idx))); transition: transform .35s var(--ease); }
.tp-tabs button { position: relative; font-size: 12px; font-weight: 500; transition: color .25s; }
.tp-tabs button.on { color: #fff; }
.tp-panel { display: none; padding: 16px 14px 0; animation: fadeIn .35s ease both; }
.tp-panel.is-on { display: block; }
.tp-sec { display: flex; justify-content: space-between; align-items: center; min-height: 44px; font-size: 20px; font-weight: 500; }
.tp-sec .link { display: flex; align-items: center; gap: 4px; }
.tp-sec .link svg { width: 15px; height: 15px; fill: currentColor; stroke: currentColor; }
.tp-dayh { display: flex; align-items: baseline; gap: 10px; margin: 8px 1px 12px; }
.tp-dayh b { font-size: 16px; font-weight: 500; }
.tp-dayh span { font-size: 12px; color: var(--g3); }
.tp-entry { padding-bottom: 14px; }
.tp-author { display: flex; align-items: center; gap: 8px; }
.tp-author img { width: 28px; height: 28px; border-radius: 50%; }
.tp-author b { display: block; font-size: 14px; font-weight: 500; }
.tp-author small { display: block; font-size: 12px; color: var(--g3); }
.tp-entry > p { margin-top: 8px; font-size: 14px; line-height: 20px; }
.tp-photo { width: 100%; aspect-ratio: 16 / 9; margin-top: 8px; border-radius: 12px; object-fit: cover; }
.tp-acts { display: flex; align-items: center; gap: 14px; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--g3); }
.tp-acts span { display: flex; align-items: center; gap: 4px; }
.tp-acts svg { width: 22px; height: 22px; color: #000; }
.tp-acts .liked svg { fill: #FF97A5; }
.tp-days { display: flex; gap: 8px; overflow: hidden; }
.tp-days button { flex: none; min-width: 64px; padding: 8px 10px; border-radius: 14px; background: var(--soft); box-shadow: inset 0 0 0 1px #EEE; text-align: left; transition: background .25s, color .25s; }
.tp-days b { display: block; font-size: 14px; font-weight: 500; }
.tp-days span { display: block; margin-top: 3px; font-size: 12px; color: var(--g3); }
.tp-days .on { background: var(--blue); box-shadow: none; color: #fff; }
.tp-days .on span { color: #fff; }
.tp-theme { margin-top: 18px; font-size: 16px; font-weight: 500; }
.tp-weather { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--g3); }
.tp-weather svg { width: 18px; height: 18px; }
.tp-weather .sun { fill: #FFBA26; }
.tp-weather .cloud { fill: #9A9A9A; }
.tp-weather b { font-size: 13px; font-weight: 500; color: #000; }
.tp-weather .drop { width: 10px; height: 10px; fill: #6A8ADA; }
.tp-rule { display: block; height: 1px; margin: 16px 0; background: rgba(0, 0, 0, .1); }
.tp-list li { position: relative; display: grid; grid-template-columns: 54px 1fr; min-height: 64px; margin-bottom: 12px; padding: 12px 12px 12px 0; border-radius: 16px; background: var(--soft); animation: itemIn .5s var(--ease) both; }
.tp-rail { position: relative; padding-left: 12px; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tp-rail::before { content: ""; position: absolute; left: 13px; top: 24px; width: 8.7px; height: 8.7px; border-radius: 50%; box-shadow: inset 0 0 0 .5px #000; background: radial-gradient(circle, #000 3px, transparent 3.2px); }
.tp-rail::after { content: ""; position: absolute; left: 17px; top: 36px; bottom: -12px; border-left: 1px dashed #000; opacity: .5; }
.tp-act b { display: block; font-size: 15px; font-weight: 500; line-height: 18px; }
.tp-meta { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; color: var(--g3); }
.tp-meta i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.tp-meta em { font-style: normal; font-weight: 500; }
.tp-act p { margin-top: 8px; font-size: 13px; line-height: 1.4; color: #333; }
.tp-act .addr { display: flex; align-items: center; gap: 3px; margin-top: 8px; font-size: 12px; color: var(--blue); }
.tp-act .addr svg { width: 14px; height: 14px; }
.ck-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.ck-sum b { font-size: 17px; font-weight: 500; }
.ck-sum span { font-size: 14px; font-weight: 500; color: var(--g3); }
.ck-bar { display: block; height: 4px; margin-top: 10px; border-radius: 99px; background: #EEE; overflow: hidden; }
.ck-bar i { display: block; height: 100%; width: 33%; border-radius: 99px; background: var(--blue); transition: width .45s var(--ease); }
.ck-h { display: flex; justify-content: space-between; margin-bottom: 4px; }
.ck-h b { font-size: 16px; font-weight: 500; }
.ck-h span { font-size: 14px; font-weight: 500; color: var(--g3); }
.ck-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; font-size: 15px; text-align: left; }
.ck-row::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #999; transition: background .25s, box-shadow .25s; }
.ck-row::after { content: ""; position: absolute; left: 7px; top: 50%; width: 4px; height: 8px; margin-top: -6px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(42deg); opacity: 0; transition: opacity .2s; }
.ck-row.on { color: var(--g3); text-decoration: line-through; }
.ck-row.on::before { background: var(--blue); box-shadow: none; }
.ck-row.on::after { opacity: 1; }
.note { padding-bottom: 18px; margin-bottom: 18px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1); }
.note-h { display: flex; justify-content: space-between; align-items: center; }
.note-h b { font-size: 17px; font-weight: 500; }
.note-h span { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: var(--soft); font-size: 12px; }
.note-h img { width: 15px; height: 15px; }
.note > p:nth-child(2) { margin-top: 10px; font-size: 15px; line-height: 21px; }
.note-f { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--g3); }
.note-f img { width: 16px; height: 16px; border-radius: 50%; }

/* ---------- Money ---------- */
.money-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 48px; }
.money-stats { display: grid; gap: 28px; }
.stat-big span, .stat-pair span { display: block; font-size: 14px; color: var(--g3); }
.stat-big b { display: block; margin-top: 6px; font-family: var(--font-display); font-size: clamp(44px, 5vw, 64px); font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-pair b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-pair b.in { color: var(--income); }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 10px; height: 170px; padding-top: 10px; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.bar i { display: block; width: 100%; height: var(--h); border-radius: 10px 10px 4px 4px; background: #CFEBD7; transform-origin: bottom; transform: scaleY(0); transition: transform 1s var(--ease); transition-delay: calc(var(--n) * 70ms); }
.bar.now i { background: #3CBB71; }
.bars.is-in i { transform: none; }
.bar span { font-size: 12px; color: var(--g3); }
.bar.now span { font-weight: 600; color: var(--ink); }
.phone-money { --k: .84; }
.ledgers { display: grid; gap: 12px; }
.ledgers-h { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--ink); }
.ledger { padding: 16px 18px; border-radius: 22px; background: var(--tint); transition: transform .45s var(--spring); }
.ledger:hover { transform: translateY(-4px) rotate(-1deg); }
.ledger p { display: flex; align-items: center; justify-content: space-between; }
.ledger p b { font-size: 18px; font-weight: 500; color: #000; }
.ledger-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px; background: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 500; }
.ledger-chip img { width: 16px; height: 16px; }
.ledger > span { display: block; margin-top: 14px; font-size: 13px; color: #625D6B; }
.ledger-amt { display: block; margin-top: 2px; font-size: 26px; font-weight: 500; letter-spacing: -.5px; color: #28232B; font-variant-numeric: tabular-nums; }

@media (max-width: 1180px) {
  .money-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .ledgers { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ledgers-h, .ledgers .hint { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .mode-tile { grid-template-columns: 1fr; justify-items: center; padding: 40px 24px; text-align: center; }
  .mode-tile .tile-copy p { margin-left: auto; margin-right: auto; }
  .mode-tile .daynight { margin: 24px auto 0; }
  .trip-grid, .money-grid, .sd-grid { grid-template-columns: 1fr; justify-items: center; }
  .trip-copy { text-align: center; }
  .trip-copy .eyebrow { margin: 0 auto; }
  .route { margin-left: auto; margin-right: auto; text-align: left; }
  .trip-copy .hint { justify-content: center; }
  .money-stats { width: 100%; max-width: 520px; text-align: center; }
  .ledgers { width: 100%; }
}
@media (max-width: 720px) {
  .show { padding-top: 100px; }
  .trip-show { margin-top: 100px; padding: 80px 0; }
  .snap { display: none; }
  .phone-trip, .phone-money, .sd-grid .phone-sd { --k: .76; --bz: 9px; }
  .deck { height: 440px; }
  .poster { --pk: .6; }
  .wg-medium { width: 100%; max-width: 314px; }
  .ledgers { grid-template-columns: 1fr; }
  .stat-pair b { font-size: 22px; }
}

/* Hero duo on narrower screens (after the base hero rules so they win) */
@media (max-width: 1000px) {
  .hero-duo { max-width: 640px; height: 760px; }
  .duo-rel { right: 0; }
  .duo-pair { left: 0; top: 200px; }
  .duo-link { display: none; }
}
@media (max-width: 720px) {
  .hero-duo { max-width: 360px; height: 660px; }
  .duo-rel { right: -6px; top: 0; }
  .hero-duo .phone-relmain { --k: .7; --bz: 9px; }
  .duo-pair { left: -8px; top: 330px; }
  .duo-pair .phone { --k: .4; --bz: 6px; box-shadow: 0 24px 40px -14px rgba(10, 16, 34, .45); }
  .duo-pair .duo-cap { display: none; }
  .duo-rel .duo-cap { align-self: flex-end; max-width: 185px; margin-top: 14px; text-align: right; }
}

/* ---------- Search feature pages ---------- */
.text-link, .learn-more { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
.learn-more { display: inline-block; margin-top: 18px; font-size: 16px; }
.feature-links { margin-top: 48px; text-align: left; }
.feature-links > p { font-weight: 600; margin-bottom: 16px; }
.feature-links > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; font-size: 14px; line-height: 1.5; }
.feature-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.night .feature-links { color: rgba(255, 255, 255, .78); }
.night .feature-links + .foot { margin-top: 40px; }
.legal-foot .feature-links { margin: 0 0 32px; }
.feature-page .nav { background: rgba(255, 255, 255, .94); }
.feature-page .nav.is-night { background: rgba(10, 16, 34, .94); }
.feature-page main { position: relative; z-index: 1; background: #fff; border-radius: 0 0 44px 44px; }
.feature-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); gap: 64px; align-items: center; padding-top: 136px; padding-bottom: 96px; }
.feature-intro h1 { margin: 22px 0; font-family: var(--font-display); font-size: clamp(36px, 4.3vw, 58px); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; color: var(--ink); }
.feature-lede { font-size: 19px; line-height: 1.65; color: var(--text-2); margin-bottom: 28px; }
.feature-back { display: inline-block; margin: 18px 0 18px 18px; color: var(--text-2); font-size: 14px; }
.feature-preview { display: flex; flex-direction: column; align-items: center; gap: 24px; min-width: 0; padding: 32px 0; border-radius: 40px; background: var(--butter-band); }
.feature-preview .phone { --k: .76; --bz: 10px; flex: none; }
.feature-preview-caption { font-size: 12px; color: var(--butter-ink); text-align: center; padding: 0 16px; }
.feature-body { padding-bottom: 96px; }
.feature-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature-section { gap: 18px; padding: 30px; }
.feature-section h2, .feature-privacy h2 { font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1.22; letter-spacing: -.018em; }
.feature-section p, .feature-privacy p, .feature-faq article p { color: var(--text-2); font-size: 16px; line-height: 1.7; }
.feature-privacy { max-width: 780px; margin: 80px auto; }
.feature-privacy h2 { margin: 18px 0 24px; font-size: 34px; }
.feature-privacy p + p { margin-top: 16px; }
.feature-privacy .feature-disclaimer { padding: 22px; border-radius: 20px; background: var(--soft); color: var(--ink); }
.feature-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.feature-faq .section-head { grid-column: 1 / -1; margin-bottom: 12px; }
.feature-faq article { padding-top: 24px; border-top: 1px solid var(--track); }
.feature-faq article h3 { font-family: var(--font-display); font-size: 19px; font-weight: 500; line-height: 1.4; margin-bottom: 12px; }
.feature-related { margin-top: 76px; text-align: center; }
.feature-related > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.feature-chip { display: inline-flex; gap: 20px; align-items: center; border-radius: 999px; background: var(--soft); padding: 14px 20px; font-size: 14px; }
.feature-chip:hover { background: var(--butter-band); }
.feature-page .night { position: relative; margin-top: -44px; padding-top: 44px; }
@media (max-width: 1000px) {
  .feature-hero { gap: 32px; }
  .feature-sections { grid-template-columns: 1fr; }
  .feature-section { padding: 32px; }
}
@media (max-width: 720px) {
  .feature-hero { grid-template-columns: 1fr; padding-top: 112px; padding-bottom: 56px; gap: 26px; }
  .feature-intro h1 { font-size: 36px; }
  .feature-lede { font-size: 17px; }
  .feature-preview .phone { --k: .70; --bz: 9px; }
  .feature-preview { padding: 28px 0; border-radius: 30px; }
  .feature-section { padding: 26px; }
  .feature-faq { grid-template-columns: 1fr; gap: 26px; }
  .feature-privacy { margin: 56px auto; }
  .feature-privacy h2 { font-size: 28px; }
  .feature-links > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  .feature-body { padding-bottom: 64px; }
}