/* ==========================================================================
   Luvya public site. Airy look of the app: mint/sky mesh, frosted glass,
   heavy headings. No framework, no external requests.
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0c3234;
  --ink-2: #1f4a4c;
  --black: #1e1e1e;
  --link: #0a4f52;
  --pink: #c9325a;
  --periwinkle: #7c8cf8;
  --glass: rgba(255, 255, 255, 0.5);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-solid: rgba(255, 255, 255, 0.88);
  --glass-line: rgba(255, 255, 255, 0.75);
  --deep: #0b2f33;
  --shadow: 0 18px 50px -24px rgba(12, 60, 70, 0.45);
  --r-lg: 32px;
  --r: 24px;
  --r-sm: 16px;
  --max: 1200px;
  --gut: clamp(18px, 4.4vw, 44px);
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: #bfe3f2;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--black); }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; }

:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 3px #fff;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--black); color: #fff; padding: 12px 18px; border-radius: 12px;
}
.skip:focus { top: 12px; color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* -------------------------------------------------------------------------- */
/*  Mesh: same blobs as AppBackgrounds.mintSky, drawn with gradients            */
/* -------------------------------------------------------------------------- */
.mesh { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #bfe3f2; pointer-events: none; }
.mesh i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.mesh .a { width: 120vmax; height: 120vmax; right: -48vmax; top: -62vmax; background: radial-gradient(closest-side, #6ff2c0 0%, rgba(111, 242, 192, 0.55) 45%, rgba(111, 242, 192, 0) 100%); animation: drift-a 34s ease-in-out infinite alternate; }
.mesh .b { width: 90vmax; height: 90vmax; left: -46vmax; top: -6vmax; background: radial-gradient(closest-side, #93e8d8 0%, rgba(147, 232, 216, 0.5) 48%, rgba(147, 232, 216, 0) 100%); animation: drift-b 41s ease-in-out infinite alternate; }
.mesh .c { width: 96vmax; height: 96vmax; left: -18vmax; bottom: -52vmax; background: radial-gradient(closest-side, #8ccdf2 0%, rgba(140, 205, 242, 0.55) 50%, rgba(140, 205, 242, 0) 100%); animation: drift-c 47s ease-in-out infinite alternate; }
.mesh .d { width: 70vmax; height: 70vmax; right: -24vmax; bottom: -30vmax; background: radial-gradient(closest-side, #d3ecf9 0%, rgba(211, 236, 249, 0) 100%); animation: drift-b 53s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate(-7vmax, 6vmax) scale(1.06); } }
@keyframes drift-b { to { transform: translate(6vmax, -5vmax) scale(0.96); } }
@keyframes drift-c { to { transform: translate(5vmax, -6vmax) scale(1.05); } }

/* -------------------------------------------------------------------------- */
/*  Layout                                                                      */
/* -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.band { padding-block: clamp(64px, 10vw, 128px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 14px;
}
.h-xl { font-size: clamp(2.2rem, 6.4vw, 4.5rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; }
.h-lg { font-size: clamp(1.75rem, 4.2vw, 3rem); font-weight: 900; line-height: 1.06; letter-spacing: -0.025em; }
.lead { font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); line-height: 1.5; color: var(--ink-2); font-weight: 500; }
.measure { max-width: 34em; }
.glass {
  background: var(--glass);
  border: 1.5px solid var(--glass-line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--glass-solid); } }
.emoji { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.35em; }

/* -------------------------------------------------------------------------- */
/*  Nav: a matte pill, like the app's bottom bar                                */
/* -------------------------------------------------------------------------- */
.nav-shell { position: sticky; top: 10px; z-index: 50; padding-inline: 10px; margin-top: 10px; }
.nav {
  max-width: var(--max); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px 6px 18px;
  border-radius: 999px;
  background: var(--glass-strong);
  border: 1.5px solid var(--glass-line);
  box-shadow: 0 10px 30px -18px rgba(12, 60, 70, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.nav .logo { display: block; flex: none; padding-block: 5px; border-radius: 8px; }
.nav .logo img { height: 34px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links a {
  display: flex; align-items: center; min-height: 44px; padding-inline: 10px;
  font-size: 0.9375rem; font-weight: 700; color: var(--ink); text-decoration: none; border-radius: 999px; white-space: nowrap;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { background: rgba(255, 255, 255, 0.75); color: var(--ink); }
.nav-cta {
  display: none; align-items: center; min-height: 44px; padding-inline: 20px;
  background: var(--black); color: #fff; font-weight: 800; font-size: 0.9375rem; text-decoration: none; border-radius: 999px;
  transition: transform .2s ease;
}
.nav-cta:hover { color: #fff; transform: translateY(-1px); }
@media (min-width: 720px) { .nav-cta { display: inline-flex; } .nav-links a { padding-inline: 14px; } }
@media (max-width: 400px) { .nav { padding-left: 12px; } .nav .logo img { height: 28px; } .nav-links a { padding-inline: 7px; font-size: 0.875rem; } }

/* -------------------------------------------------------------------------- */
/*  Buttons                                                                     */
/* -------------------------------------------------------------------------- */
/* Equal columns in a fit-content grid: both buttons take the wider one's width. */
.stores { display: grid; grid-template-columns: 1fr 1fr; width: fit-content; max-width: 100%; gap: 10px; }
@media (max-width: 460px) { .stores { grid-template-columns: 1fr; } }
.store {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 8px 21px; border-radius: 18px;
  background: var(--black); color: #fff; text-decoration: none; line-height: 1.15;
  transition: transform .2s ease, box-shadow .2s ease;
}
.store-ico { width: 28px; height: 28px; flex: none; }
.store-txt { display: flex; flex-direction: column; }
.store small { font-size: 0.75rem; font-weight: 500; opacity: .85; }
.store b { font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.01em; }
.store:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .6); }
.fine { font-size: 0.9375rem; color: var(--ink-2); }

/* -------------------------------------------------------------------------- */
/*  Hero                                                                        */
/* -------------------------------------------------------------------------- */
.hero { position: relative; padding-top: clamp(32px, 6vw, 72px); overflow: clip; }
.hero-grid { display: grid; gap: 28px; align-items: end; }
.hero-copy { padding-bottom: 8px; }
.hero h1 {
  font-size: clamp(2.875rem, 11.6vw, 6.5rem);
  font-weight: 900; line-height: 0.98; letter-spacing: -0.04em;
  margin-bottom: 22px;
}
.hero .lead { max-width: 28em; margin-bottom: 26px; }
.hero .fine { margin: 16px 0 0; max-width: 34em; }
.hero-stage { position: relative; justify-self: center; width: min(82vw, 400px); margin-top: clamp(88px, 22vw, 124px); }
.hero-phone { position: relative; z-index: 1; transform: rotate(-2.5deg); transform-origin: 50% 100%; margin-bottom: -44px; filter: drop-shadow(0 24px 40px rgba(12, 60, 70, .3)); }
.sticker { position: absolute; z-index: 2; filter: drop-shadow(0 8px 12px rgba(12, 60, 70, .22)); }
.hero-stage .oak { width: 30%; left: -10%; top: calc(-1 * clamp(80px, 20vw, 112px)); animation: sway 7s ease-in-out infinite alternate; transform-origin: 80% 90%; }
.hero-stage .sun { width: 22%; right: -11%; top: -4%; animation: turn 16s ease-in-out infinite alternate; }
.hero-stage .cloud { width: 25%; right: -15%; top: 44%; animation: float 9s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(7deg); } }
@keyframes turn { from { transform: rotate(-14deg); } to { transform: rotate(14deg) translateY(-6px); } }
@keyframes float { from { transform: translate(0, 0) rotate(-3deg); } to { transform: translate(-8px, -14px) rotate(3deg); } }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); gap: 40px; }
  .hero-copy { padding-bottom: clamp(48px, 7vw, 96px); }
  .hero-stage { width: 100%; max-width: 430px; margin-top: 0; }
  .hero-stage .oak { width: 34%; left: -30%; top: auto; bottom: 6%; }
}

/* Feeling strip under the hero: words the app really offers */
.feel { padding-block: 0; position: relative; z-index: 3; margin-top: -1px; }
.feel-card { padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; align-items: center; }
.feel-card h2 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.feel-card p { margin: 6px 0 0; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.chips li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px 8px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .7); border: 1.5px solid rgba(255, 255, 255, .9);
  font-weight: 700; font-size: 0.9375rem;
}
.chips li.on { border-color: var(--periwinkle); }
.chips img { width: 20px; height: 20px; }
@media (min-width: 860px) { .feel-card { grid-template-columns: 1.1fr 1fr; gap: 32px; } }

/* -------------------------------------------------------------------------- */
/*  A week in Luvya                                                             */
/* -------------------------------------------------------------------------- */
.week-head { max-width: 40em; margin-bottom: clamp(36px, 6vw, 72px); }
.step { display: grid; gap: 26px; align-items: center; padding-block: clamp(18px, 3vw, 28px); }
.step + .step { margin-top: clamp(26px, 5vw, 56px); }
.day {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 5px 16px 5px 5px; border-radius: 999px; background: var(--black); color: #fff;
  font-size: 0.9375rem; font-weight: 800;
}
.day b { display: grid; place-items: center; min-width: 32px; height: 32px; padding-inline: 7px; border-radius: 99px; background: #fff; color: var(--black); font-size: 0.75rem; font-weight: 900; }
.step h3 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 14px; }
.step p { color: var(--ink-2); font-size: 1.125rem; max-width: 30em; }
.frame { position: relative; padding: clamp(22px, 4vw, 44px) clamp(22px, 5vw, 56px) 0; border-radius: var(--r-lg); overflow: hidden; background: rgba(255, 255, 255, .34); border: 1.5px solid var(--glass-line); box-shadow: var(--shadow); }
/* A whole phone, running straight off the card's bottom edge, which hides its lower part. */
.frame:not(.zoom) { max-height: clamp(460px, 62vw, 580px); }
.frame img.ph { width: min(100%, 340px); margin-inline: auto; filter: drop-shadow(0 14px 22px rgba(12, 60, 70, .22)); }
/* Sized by its width, so the Morning Light Anchor card fits whole at any width. */
.frame.zoom { padding: 0; aspect-ratio: 1 / 0.81; }
.frame.zoom img.ph { width: 118%; max-width: none; margin: -142% 0 0 -9%; filter: none; }
@media (min-width: 860px) {
  .step { grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px); }
  .step:nth-of-type(even) .frame { order: -1; }
}
.dirs { display: grid; gap: 10px; }
.dir { padding: 18px 20px; display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; }
.dir img { width: 48px; height: 48px; }
.dir b { display: block; font-size: 1.125rem; font-weight: 900; letter-spacing: -0.01em; }
.dir span { display: block; color: var(--ink-2); font-size: 0.975rem; line-height: 1.45; margin-top: 2px; }

/* -------------------------------------------------------------------------- */
/*  Moments                                                                     */
/* -------------------------------------------------------------------------- */
.moments { display: grid; gap: 14px; margin-top: 32px; }
.moment { padding: 24px; }
.moment .tag { font-size: 0.75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.moment h3 { font-size: 1.4375rem; font-weight: 900; letter-spacing: -0.015em; line-height: 1.12; margin: 8px 0 8px; }
.moment p { margin: 0; color: var(--ink-2); font-size: 1rem; }
@media (min-width: 640px) { .moments { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .moments { grid-template-columns: repeat(4, 1fr); } .moment:nth-child(even) { transform: translateY(22px); } }

/* -------------------------------------------------------------------------- */
/*  Companions                                                                  */
/* -------------------------------------------------------------------------- */
.pals { display: grid; gap: 28px; align-items: center; }
.pal-field { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 2vw, 20px); align-items: center; }
.pal-field li { list-style: none; }
.pal-field img { width: 100%; max-width: 128px; margin-inline: auto; filter: drop-shadow(0 8px 12px rgba(12, 60, 70, .2)); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.pal-field li:hover img { transform: rotate(-6deg) scale(1.1); }
.pal-field li:nth-child(odd) { transform: translateY(10px); }
.pal-field .oakie { grid-column: span 2; grid-row: span 2; }
.pal-field .oakie img { max-width: 280px; }
@media (min-width: 860px) { .pals { grid-template-columns: 0.9fr 1.1fr; gap: 56px; } }

/* -------------------------------------------------------------------------- */
/*  Looks                                                                       */
/* -------------------------------------------------------------------------- */
.looks { display: grid; gap: 24px; align-items: center; }
.look-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-block: 22px 16px; }
.look-tabs button {
  appearance: none; border: 1.5px solid var(--glass-line); cursor: pointer;
  min-height: 48px; padding-inline: 24px; border-radius: 999px;
  background: rgba(255, 255, 255, .55); color: var(--ink); font: 800 1rem var(--font);
  transition: background .2s ease, color .2s ease;
}
.look-tabs button:hover { background: rgba(255, 255, 255, .85); }
.look-tabs button[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: #fff; }
.look-desc { min-height: 4.8em; color: var(--ink-2); font-size: 1.125rem; }
.stage {
  --s-base: #bfe3f2; --s-1: #6ff2c0; --s-2: #8ccdf2; --s-3: #93e8d8;
  --h-base: #d4dcfa; --h-1: #a3b2ff; --h-2: #c9b6f7; --h-3: #b5e2ff;
  --s-card: rgba(255, 255, 255, .55); --s-accent: #1e1e1e; --s-ink: #1e1e1e; --s-muted: #3f4a4c;
  position: relative; overflow: hidden; padding: clamp(24px, 5vw, 48px); border-radius: var(--r-lg);
  border: 1.5px solid var(--glass-line); box-shadow: var(--shadow); color: var(--s-ink);
  background:
    radial-gradient(70% 70% at 90% 0%, var(--s-1) 0%, transparent 100%),
    radial-gradient(70% 70% at 5% 75%, var(--s-2) 0%, transparent 100%),
    radial-gradient(60% 60% at 0% 15%, var(--s-3) 0%, transparent 100%),
    var(--s-base);
  transition: background .4s ease;
}
.stage[data-look="warm"] {
  --s-base: #fbf1e0; --s-1: #ffd2a6; --s-2: #cbe5bc; --s-3: #fff0d0;
  --h-base: #ffe9da; --h-1: #ffc2a0; --h-2: #ffe1b0; --h-3: #ffb9cb;
  --s-card: rgba(255, 255, 255, .62); --s-accent: #b4532f; --s-muted: #5f5045;
}
.stage[data-look="glow"] {
  --s-base: #f4f3f7; --s-1: #e3e9ff; --s-2: #e6f4ee; --s-3: #f5e8f3;
  --h-base: #f1f2cf; --h-1: #f0dd6e; --h-2: #f8efa4; --h-3: #ddedc4;
  --s-card: rgba(255, 255, 255, .78); --s-muted: #4b4b50;
}
.mini { max-width: 400px; margin-inline: auto; position: relative; }
.mini-top { font-size: 0.875rem; color: var(--s-muted); font-weight: 600; }
.mini h3 { color: var(--s-ink); font-size: 2rem; font-weight: 900; letter-spacing: -0.02em; margin: 2px 0 10px; }
.bars { display: flex; align-items: center; gap: 5px; margin-bottom: 18px; font-size: 0.8125rem; font-weight: 700; }
.bars i { width: 26px; height: 7px; border-radius: 9px; background: rgba(255, 255, 255, .85); }
.bars i.on { background: var(--s-accent); }
.bars span { margin-left: 8px; }
.hi {
  position: relative; padding: 22px; border-radius: 26px; border: 1.5px solid rgba(255, 255, 255, .7);
  background:
    radial-gradient(90% 90% at 0% 0%, var(--h-1) 0%, transparent 100%),
    radial-gradient(70% 90% at 100% 40%, var(--h-2) 0%, transparent 100%),
    radial-gradient(80% 80% at 40% 110%, var(--h-3) 0%, transparent 100%),
    var(--h-base);
  transition: background .4s ease;
}
.hi em { display: inline-block; font-style: normal; font-size: 0.8125rem; font-weight: 700; padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, .78); }
.hi strong { display: block; font-size: 1.625rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.12; margin: 12px 0 10px; }
.hi span { font-weight: 700; font-size: 0.9375rem; }
.hi img { position: absolute; width: 64px; right: 12px; top: -22px; }
.row-card { margin-top: 12px; padding: 16px 18px; border-radius: 22px; background: var(--s-card); border: 1.5px solid rgba(255, 255, 255, .75); display: flex; gap: 14px; align-items: center; }
.row-card img { width: 44px; height: 44px; }
.row-card b { display: block; font-weight: 800; line-height: 1.2; }
.row-card small { color: var(--s-muted); font-size: 0.875rem; font-weight: 500; }
.stage-note { margin: 14px 0 0; font-size: 0.875rem; color: var(--ink-2); }
@media (min-width: 860px) { .looks { grid-template-columns: 0.9fr 1.1fr; gap: 56px; } }

/* -------------------------------------------------------------------------- */
/*  Insights                                                                    */
/* -------------------------------------------------------------------------- */
.split { display: grid; gap: 26px; align-items: center; }
.split p { color: var(--ink-2); font-size: 1.125rem; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px); } }

/* -------------------------------------------------------------------------- */
/*  The AI section. The one dark room in the house.                             */
/* -------------------------------------------------------------------------- */
.ai { background: var(--deep); color: #e6f6f1; border-radius: clamp(28px, 5vw, 56px); padding: clamp(32px, 6.4vw, 80px) clamp(20px, 5.4vw, 72px); position: relative; overflow: hidden; }
.ai::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 42% at 92% 0%, rgba(111, 242, 192, .22), transparent 100%), radial-gradient(50% 40% at 0% 100%, rgba(140, 205, 242, .17), transparent 100%); }
.ai > * { position: relative; }
.ai h2, .ai h3 { color: #fff; }
.ai .eyebrow { color: #9fe9d1; }
.ai .lead { color: #cfe8e3; max-width: 36em; }
.ai a { color: #9fe9d1; }
.ai a:hover { color: #fff; }
.ai :focus-visible { outline-color: #fff; box-shadow: 0 0 0 3px var(--deep); }
.flow { list-style: none; padding: 0; display: grid; gap: 10px; margin-block: clamp(28px, 4vw, 44px); counter-reset: flow; }
.flow li { padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15); counter-increment: flow; position: relative; }
.flow li::before { content: counter(flow); display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 900; font-size: 0.8125rem; }
.flow b { display: block; color: #fff; font-size: 1.0625rem; font-weight: 800; line-height: 1.2; }
.flow .who { display: block; font-size: 0.75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9fe9d1; margin-bottom: 4px; }
.flow span.d { display: block; margin-top: 6px; font-size: 0.9375rem; line-height: 1.45; color: #cfe8e3; }
.flow li.g { background: rgba(159, 233, 209, .16); border-color: rgba(159, 233, 209, .5); }
@media (min-width: 720px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .flow { grid-template-columns: repeat(5, 1fr); } }
.nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 14px; padding-block: 22px; border-block: 1px solid rgba(255, 255, 255, .17); }
.nums div b { display: block; font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: #fff; }
.nums div span { display: block; margin-top: 6px; font-size: 0.9375rem; color: #cfe8e3; line-height: 1.35; }
@media (min-width: 860px) { .nums { grid-template-columns: repeat(4, 1fr); } }
.cols { display: grid; gap: 28px; margin-top: 32px; }
.cols h3 { font-size: 1.25rem; font-weight: 900; margin-bottom: 10px; letter-spacing: -0.01em; }
.cols ul { padding-left: 1.1em; color: #cfe8e3; font-size: 1rem; }
.cols li { margin-bottom: 7px; }
.cols li::marker { color: #9fe9d1; }
@media (min-width: 860px) { .cols { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.ai-foot { margin: 32px 0 0; font-size: 0.9375rem; color: #cfe8e3; max-width: 52em; }
.ai-foot + .ai-foot { margin-top: 10px; }

/* -------------------------------------------------------------------------- */
/*  Small bands                                                                 */
/* -------------------------------------------------------------------------- */
.duo { display: grid; gap: 14px; }
.card-pad { padding: clamp(22px, 3.4vw, 36px); }
.card-pad h2, .card-pad h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 10px; }
.card-pad p { color: var(--ink-2); margin-bottom: .8em; }
.card-pad p:last-child { margin-bottom: 0; }
@media (min-width: 860px) { .duo { grid-template-columns: 1fr 1fr; } }
.care { background: var(--glass-solid); }

.cta { text-align: center; padding-block: clamp(56px, 9vw, 112px); }
.cta img.oak { width: 112px; margin: 0 auto 18px; }
.cta .stores { margin: 24px auto 0; }
.cta .lead { margin: 14px auto 0; max-width: 28em; }

/* -------------------------------------------------------------------------- */
/*  Footer                                                                      */
/* -------------------------------------------------------------------------- */
.foot { background: rgba(255, 255, 255, .62); border-top: 1.5px solid var(--glass-line); padding-block: 44px 28px; font-size: 0.9375rem; color: var(--ink-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.foot-grid { display: grid; gap: 28px; }
.foot h2 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; margin-bottom: 8px; color: var(--ink-2); }
.foot ul { list-style: none; }
.foot li a { display: inline-block; padding-block: 5px; color: var(--ink); }
.foot .logo-f { width: 110px; margin-bottom: 10px; }
.foot address { font-style: normal; }
.foot-base { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(12, 50, 52, .15); font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: 1.4fr .8fr .8fr 1.2fr; } }

/* -------------------------------------------------------------------------- */
/*  Inner pages + legal documents                                               */
/* -------------------------------------------------------------------------- */
.page-head { padding-block: clamp(36px, 7vw, 76px) clamp(24px, 4vw, 40px); }
.page-head .h-xl { margin-bottom: 14px; }
.doc-layout { display: grid; gap: 18px; padding-bottom: clamp(48px, 8vw, 96px); }
.toc { padding: 6px 18px; background: var(--glass-strong); border: 1.5px solid var(--glass-line); border-radius: var(--r-sm); font-size: 0.9375rem; }
.toc summary { cursor: pointer; font-weight: 800; padding-block: 12px; min-height: 44px; }
.toc ol { list-style: none; padding: 0 0 10px; margin: 0; }
.toc a { display: block; padding: 6px 0; color: var(--ink); text-decoration: none; line-height: 1.25; }
.toc a:hover { text-decoration: underline; }
@media (min-width: 1080px) {
  .doc-layout { grid-template-columns: 270px minmax(0, 1fr); align-items: start; gap: 28px; }
  .toc { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; }
}
.doc { padding: clamp(22px, 4.6vw, 56px); background: var(--glass-solid); border: 1.5px solid var(--glass-line); border-radius: var(--r-lg); box-shadow: var(--shadow); min-width: 0; color: #1d3d3f; }
.doc > :first-child { margin-top: 0; }
.doc h2 { font-size: clamp(1.3125rem, 2.3vw, 1.625rem); font-weight: 900; letter-spacing: -0.015em; line-height: 1.15; margin: 2.1em 0 .55em; scroll-margin-top: 92px; }
.doc h3 { font-size: 1.0625rem; font-weight: 800; margin: 1.6em 0 .4em; }
.doc p, .doc li { line-height: 1.62; }
.doc ul { padding-left: 1.25em; margin-bottom: 1em; }
.doc li { margin-bottom: .35em; }
.doc li::marker { color: #2a8f88; }
.doc .callout { padding: 16px 20px; margin: 1.2em 0; border-radius: var(--r-sm); background: #e4f7f1; border: 1.5px solid #9fdccb; }
.doc .callout p:last-child, .doc .callout ul:last-child { margin-bottom: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 1em 0 1.4em; font-size: 0.975rem; }
.doc th { text-align: left; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: var(--ink-2); padding: 8px 12px 8px 0; border-bottom: 2px solid #b9d9d4; }
.doc td { padding: 11px 12px 11px 0; border-bottom: 1px solid #d5e8e4; vertical-align: top; line-height: 1.5; }
.doc td:first-child { font-weight: 700; color: var(--ink); }
.doc table.plain td:first-child { font-weight: 500; }
@media (max-width: 640px) {
  .doc table, .doc tbody, .doc tr, .doc td { display: block; width: 100%; }
  .doc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .doc tr { padding-block: 11px; border-bottom: 1px solid #d5e8e4; }
  .doc td { padding: 2px 0; border: 0; }
  .doc td[data-l]::before { content: attr(data-l) ": "; font-weight: 700; color: var(--ink-2); }
}
.crumb { font-size: 0.9375rem; margin-bottom: 14px; color: var(--ink-2); font-weight: 600; }
.updated { color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; }

/* Support */
.contact { display: grid; gap: 12px; }
.contact > div { padding: 20px 22px; }
.contact .k { display: block; font-size: 0.8125rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.contact .v { font-weight: 800; font-size: 1.0625rem; overflow-wrap: anywhere; }
@media (min-width: 720px) { .contact { grid-template-columns: repeat(3, 1fr); } }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--glass-strong); border: 1.5px solid var(--glass-line); border-radius: var(--r-sm); padding-inline: 20px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-block: 15px; min-height: 48px; font-weight: 800; font-size: 1.0625rem; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--black); color: #fff; font-weight: 700; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); }
.steps-list { padding-left: 1.3em; margin: 0 0 1em; }
.steps-list li { margin-bottom: .4em; }
.two-lists { display: grid; gap: 12px 32px; }
.two-lists h3 { margin-top: 0; }
@media (min-width: 720px) { .two-lists { grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------------------------------- */
/*  Motion                                                                      */
/* -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.moment.reveal.in:nth-child(even) { transform: none; }
@media (min-width: 1040px) { .moment.reveal.in:nth-child(even) { transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media print {
  .mesh, .nav-shell, .toc, .foot-grid { display: none; }
  body { background: #fff; }
  .doc { box-shadow: none; border: 0; background: #fff; }
}

/* -------------------------------------------------------------------------- */
/*  "What makes it personal" cards, founder band, Appex page                    */
/* -------------------------------------------------------------------------- */
.feats { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
.feats li { padding: 22px 22px 20px; border-radius: var(--r); background: var(--glass); border: 1.5px solid var(--glass-line); box-shadow: var(--shadow); }
.feats img { width: 44px; height: 44px; object-fit: contain; margin-bottom: 12px; }
.feats b { display: block; color: var(--ink); font-size: 1.125rem; font-weight: 900; line-height: 1.2; letter-spacing: -0.01em; }
.feats span { display: block; margin-top: 8px; font-size: 0.9688rem; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 640px) { .feats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .feats { grid-template-columns: repeat(4, 1fr); } }

.founder { padding: clamp(26px, 4.4vw, 56px); display: grid; gap: 28px; align-items: center; }
.founder p { color: var(--ink-2); font-size: 1.125rem; max-width: 34em; }
.founder .h-lg { margin-bottom: 16px; }
.more { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--black); color: #fff; font-weight: 800; text-decoration: none; }
.more:hover { color: #fff; background: #000; }
.more::after { content: "→"; }
.fd-stats { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fd-stats li { padding: 18px 18px 16px; border-radius: 22px; background: rgba(255, 255, 255, .7); border: 1.5px solid #fff; }
.fd-stats b { display: block; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.fd-stats span { display: block; margin-top: 6px; font-size: 0.9375rem; line-height: 1.35; color: var(--ink-2); }
@media (min-width: 860px) { .founder { grid-template-columns: 1.15fr 1fr; gap: 48px; } }

.apx-mark { width: 56px; height: 56px; flex: none; }
.apx-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.apx-head b { font-size: 1.5rem; font-weight: 900; letter-spacing: .04em; }
.apx-grid { display: grid; gap: 14px; }
.apx-grid > div { padding: clamp(22px, 3.4vw, 34px); }
.apx-grid h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 12px; }
.apx-grid p { color: var(--ink-2); }
.track { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 18px; }
.track li { padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .7); border: 1.5px solid #fff; }
.track b { display: block; font-weight: 900; font-size: 1.0625rem; line-height: 1.25; }
.track span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 0.9688rem; line-height: 1.5; }
@media (min-width: 720px) { .track { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .apx-grid.two { grid-template-columns: 1fr 1fr; } }
.fd-person { display: flex; align-items: center; gap: 14px; margin: 6px 0 20px; }
.fd-person img { width: 112px; height: 140px; object-fit: cover; border-radius: 22px; border: 3px solid #fff; flex: none; }
.fd-person b { display: block; font-weight: 900; font-size: 1.25rem; color: var(--ink); }
.fd-person span { display: block; font-size: 0.9375rem; color: var(--ink-2); }
.fd-head { display: flex; align-items: center; gap: clamp(16px, 3vw, 26px); margin-bottom: 18px; }
.fd-head img { width: clamp(120px, 24vw, 210px); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; border: 3px solid #fff; flex: none; }
.fd-head .h-lg { margin-bottom: 0; }