/* =========================================================================
   Aura · Landing page styles. Built on colors_and_type.css tokens.
   Editorial · warm · calm · type-first. Mobile-first.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas-100);
  color: var(--ink-900);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
img { max-width: 100%; display: block; }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 24px; }
.wrap--narrow { max-width: 720px; }
.section { padding-block: clamp(64px, 11vw, 132px); }
.eyebrow {
  font: 500 12px/1 var(--font-text);
  letter-spacing: var(--t-caption-tracking);
  text-transform: uppercase;
  color: var(--ink-500);
}
.lede {
  font: 400 clamp(17px, 2.2vw, 20px)/1.55 var(--font-text);
  color: var(--ink-700);
  text-wrap: pretty;
  margin: 0;
}

/* Display headings on the page (larger than in-app scale, editorial) */
h1, h2, h3 { margin: 0; letter-spacing: -0.025em; text-wrap: balance; }
.display-1 { font: 600 clamp(40px, 7.5vw, 76px)/1.02 var(--font-display); }
.display-2 { font: 600 clamp(30px, 4.6vw, 50px)/1.08 var(--font-display); }
.display-3 { font: 600 clamp(23px, 2.8vw, 30px)/1.16 var(--font-display); }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  background: var(--glass-thin);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-comfort) var(--ease-comfort),
              border-color var(--dur-comfort) var(--ease-comfort);
}
.topbar.is-stuck { background: var(--glass-thick); border-bottom-color: var(--hairline); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__orb { width: 26px; height: 26px; border-radius: 50%; background: var(--orb-gradient);
  box-shadow: 0 6px 14px -8px rgba(184,155,196,0.6); flex-shrink: 0; }
.brand__name { font: 600 23px/1 var(--font-display); letter-spacing: -0.04em; color: var(--ink-900); }
.topbar .nav { display: none; gap: 30px; }
.topbar .nav a { text-decoration: none; color: var(--ink-700); font: var(--t-subhead); transition: color .15s; }
.topbar .nav a:hover { color: var(--ink-900); }
@media (min-width: 860px) { .topbar .nav { display: flex; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font: var(--t-headline); text-decoration: none;
  padding: 13px 22px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-comfort) var(--ease-comfort),
              box-shadow var(--dur-comfort) var(--ease-comfort),
              background var(--dur-comfort) var(--ease-comfort);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--dark { background: var(--ink-900); color: var(--canvas-100); box-shadow: var(--shadow-card); }
.btn--dark:hover { box-shadow: 0 10px 24px -10px rgba(74,58,40,0.4); }
.btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--hairline); }
.btn--ghost:hover { background: var(--card-fill); }

/* App Store badge */
.appstore {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 20px 11px 16px; border-radius: var(--r-pill);
  background: var(--ink-900); color: var(--canvas-100);
  text-decoration: none; box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-comfort) var(--ease-comfort);
}
.appstore:hover { box-shadow: 0 14px 30px -12px rgba(74,58,40,0.45); }
.appstore svg { width: 26px; height: 26px; }
.appstore > span { display: flex; flex-direction: column; line-height: 1; }
.appstore .as-top { display: block; font: 500 11px/1.2 var(--font-text); letter-spacing: 0.02em; opacity: 0.72; }
.appstore .as-big { display: block; font: 600 17px/1.15 var(--font-display); letter-spacing: -0.01em; margin-top: 1px; }
.appstore--soon { background: var(--card-fill); color: var(--ink-900); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); }

/* ---------- HERO ---------- */
.hero { position: relative; overflow: hidden; text-align: center; }
.hero__glow {
  position: absolute; inset: -20% -10% auto -10%; height: 120%;
  background:
    radial-gradient(46% 38% at 50% 18%, rgba(184,155,196,0.42), transparent 70%),
    radial-gradient(40% 32% at 30% 26%, rgba(246,225,203,0.55), transparent 72%),
    radial-gradient(40% 34% at 72% 22%, rgba(235,140,159,0.18), transparent 70%);
  filter: blur(4px); pointer-events: none; z-index: 0;
  animation: auraDrift 24s ease-in-out infinite alternate; will-change: transform;
}
.hero .wrap { position: relative; z-index: 1; padding-top: clamp(40px, 7vw, 76px); padding-bottom: clamp(48px, 8vw, 90px); }
.hero__orb {
  width: clamp(168px, 30vw, 248px); aspect-ratio: 1; border-radius: 50%;
  margin: 0 auto clamp(28px, 4vw, 44px);
  background: var(--orb-gradient);
  box-shadow:
    0 40px 80px -28px rgba(184,155,196,0.65),
    0 14px 34px -16px rgba(74,58,40,0.16),
    inset 0 2px 8px rgba(255,255,255,0.8);
  animation: auraBreathe 9s var(--ease-comfort) infinite;
}
@keyframes auraBreathe {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  50% { transform: translateY(-10px) scale(1.025); filter: brightness(1.06); }
}
@keyframes auraDrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  50%  { transform: translate3d(2%, 1.5%, 0) scale(1.08); }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .hero__orb, .hero__glow { animation: none; transform: none; } }
.hero__pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s6);
  padding: 7px 15px 7px 11px; border-radius: var(--r-pill);
  background: var(--card-fill); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
  font: var(--t-subhead); color: var(--ink-700);
}
.hero__pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-ok); }
.hero h1 { margin-bottom: var(--s6); }
.hero h1 .accent {
  background: linear-gradient(96deg, var(--feed-ink) 0%, var(--relac-ink) 55%, var(--bottle-ink) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero__sub { max-width: 600px; margin: 0 auto 36px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.hero__note { margin-top: 18px; font: var(--t-footnote); color: var(--ink-500); }

/* ---------- SECTION HEADER ---------- */
.shead { max-width: 640px; margin-bottom: clamp(40px, 6vw, 64px); }
.shead--center { margin-inline: auto; text-align: center; }
.shead .eyebrow { margin-bottom: var(--s4); display: block; }
.shead h2 { margin-bottom: var(--s4); }

/* ---------- FEATURE GRID ---------- */
.features { display: grid; gap: var(--card-gap); grid-template-columns: 1fr; }
@media (min-width: 620px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .features { grid-template-columns: repeat(3, 1fr); } }

.fcard {
  position: relative;
  background: var(--card-fill);
  border-radius: var(--r-card);
  padding: var(--s6);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--hairline);
  transition: transform var(--dur-comfort) var(--ease-comfort),
              box-shadow var(--dur-comfort) var(--ease-comfort);
  overflow: hidden;
}
.fcard::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--accent, var(--relac));
  opacity: 0.85;
}
.fcard:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -18px rgba(74,58,40,0.22), var(--shadow-card); }
.fcard__tile {
  width: 52px; height: 52px; border-radius: 15px;
  display: grid; place-items: center; font-size: 26px; line-height: 1;
  background: var(--tile, var(--relac-soft));
  margin-bottom: var(--s4);
}
.fcard__tile svg { width: 26px; height: 26px; }
.fcard h3 { font: var(--t-title-3); margin-bottom: var(--s2); }
.fcard p { font: var(--t-callout); color: var(--ink-700); margin: 0; text-wrap: pretty; }
.fcard .tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.fcard .tag {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 500 12px/1.1 var(--font-text); letter-spacing: 0.01em;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--tile, var(--relac-soft)); color: var(--ink, var(--relac-ink));
}
/* wide feature card spans full row on large screens */
.fcard--wide { grid-column: 1 / -1; }
.fcard--wide .dica { margin-top: var(--s5); }
@media (min-width: 940px) {
  .features--two-plus-wide .fcard--wide {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s6); align-items: center;
  }
  .features--two-plus-wide .fcard--wide .dica { margin-top: 0; }
}

/* ---------- PRIVACY (dark warm vault) ---------- */
.vault {
  position: relative; overflow: hidden;
  background: var(--canvas-100); /* dark tokens applied via .dark on the section */
  color: var(--ink-900);
}
.vault .eyebrow { color: var(--ink-500); }
.vault__glow {
  position: absolute; width: 540px; height: 540px; right: -160px; top: -120px;
  background: radial-gradient(circle at 40% 30%, rgba(184,155,196,0.34), transparent 62%);
  filter: blur(20px); pointer-events: none;
}
.vault__lede { color: var(--ink-700); }
.vault__grid { display: grid; gap: var(--card-gap); grid-template-columns: 1fr; margin-top: clamp(36px, 5vw, 52px); }
@media (min-width: 760px) { .vault__grid { grid-template-columns: repeat(2, 1fr); } }
.pcard {
  background: var(--card-fill); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: var(--s6);
  box-shadow: var(--shadow-card);
}
.pcard__icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: var(--s4); background: var(--bio-soft); color: var(--bio-ink);
}
.pcard__icon svg { width: 24px; height: 24px; }
.pcard h3 { font: var(--t-title-3); margin-bottom: var(--s2); }
.pcard p { font: var(--t-callout); color: var(--ink-700); margin: 0; text-wrap: pretty; }
.vault__promise {
  display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start;
  background: var(--card-fill); border: 1px solid var(--hairline);
  border-radius: var(--r-hero); padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--shadow-card);
}
.vault__lock {
  width: 64px; height: 64px; border-radius: 19px; display: grid; place-items: center;
  background: var(--orb-gradient); color: #4A413A;
}
.vault__lock svg { width: 30px; height: 30px; }
.vault__promise .pt { font: 600 clamp(24px, 3.4vw, 34px)/1.16 var(--font-display); letter-spacing: -0.02em; }
.vault__promise .ps { font: 400 clamp(16px, 1.8vw, 18px)/1.55 var(--font-text); color: var(--ink-700); margin-top: 12px; max-width: 520px; text-wrap: pretty; }

/* ---------- FAMILY ---------- */
.family__grid { display: grid; gap: clamp(36px, 6vw, 72px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 880px) { .family__grid { grid-template-columns: 1fr 0.9fr; } }
.family__steps { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s6); }
.fstep { display: flex; gap: 16px; align-items: flex-start; }
.fstep__n {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font: 600 15px/1 var(--font-display);
  background: var(--relac-soft); color: var(--relac-ink);
}
.fstep h4 { font: var(--t-headline); margin: 4px 0 3px; }
.fstep p { font: var(--t-callout); color: var(--ink-700); margin: 0; }

/* Family diagram · two orbs sharing a vault */
.share-art {
  position: relative; aspect-ratio: 1/1; max-width: 380px; margin-inline: auto; width: 100%;
  display: grid; place-items: center;
}
.share-art__ring {
  position: absolute; inset: 8%; border-radius: 50%;
  border: 1.5px dashed var(--hairline);
}
.share-art__core {
  width: 38%; aspect-ratio: 1; border-radius: 24px; background: var(--card-fill);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
  display: grid; place-items: center; color: var(--ink-700); position: relative; z-index: 2;
}
.share-art__core svg { width: 34px; height: 34px; }
.share-art__core .cap { position: absolute; bottom: 14px; font: 500 11px/1 var(--font-text);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-500); }
.share-orb {
  position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%;
  background: var(--orb-gradient); box-shadow: var(--shadow-orb); z-index: 3;
}
.share-orb--a { top: 4%; left: 50%; transform: translateX(-50%); }
.share-orb--b { bottom: 4%; left: 50%; transform: translateX(-50%); }
.share-line { position: absolute; inset: 0; z-index: 1; }
.share-line line { stroke: var(--relac); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.6; }

/* ---------- MOCKUPS GALLERY ---------- */
.gallery { position: relative; overflow: hidden; background: var(--canvas-200); }
.gallery__rail {
  display: flex; gap: clamp(20px, 3vw, 36px); align-items: flex-end;
  padding-bottom: 12px; padding-inline: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.gallery__rail::-webkit-scrollbar { display: none; }
.gallery__item { scroll-snap-align: center; flex-shrink: 0; text-align: center; }
.gallery__item .cap { margin-top: 18px; font: var(--t-subhead); color: var(--ink-700); }
.gallery__item .cap b { color: var(--ink-900); font-weight: 600; display: block; font-family: var(--font-display); font-size: 16px; }
@media (min-width: 1180px) {
  .gallery__rail { justify-content: center; flex-wrap: wrap; overflow: visible; }
}

/* ---------- iPhone frame + scaler ---------- */
.device {
  --scale: 0.62;
  width: calc(412px * var(--scale));
  height: calc(862px * var(--scale));
  position: relative;
}
@media (min-width: 560px) { .device { --scale: 0.66; } }
.device__inner {
  position: absolute; top: 0; left: 0;
  width: 412px; height: 862px;
  transform: scale(var(--scale)); transform-origin: top left;
}
.bezel {
  position: absolute; inset: 0; border-radius: 56px;
  background: #15110d; padding: 11px;
  box-shadow:
    0 50px 90px -40px rgba(74,58,40,0.5),
    0 20px 44px -22px rgba(74,58,40,0.32),
    inset 0 0 0 2px rgba(255,255,255,0.06);
}
.screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 46px; overflow: hidden;
  background: var(--canvas-100);
  font-family: var(--font-text);
}
.island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 118px; height: 33px; background: #08060455; border-radius: 999px; z-index: 30;
  backdrop-filter: blur(2px);
}
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px; font: 600 16px/1 var(--font-display); color: var(--ink-900);
  padding-top: 14px;
}
.statusbar .sb-right { display: flex; align-items: center; gap: 7px; }
.statusbar svg { display: block; }

/* In-screen app chrome */
.app { position: absolute; inset: 0; padding: 60px 20px 92px; overflow: hidden; }
.app--wash {
  background:
    radial-gradient(110% 60% at 84% -6%, rgba(184,155,196,0.34), transparent 58%),
    radial-gradient(120% 64% at 8% -8%, rgba(246,225,203,0.62), transparent 56%),
    radial-gradient(120% 80% at 60% 0%, rgba(235,140,159,0.12), transparent 60%),
    var(--canvas-100);
}
.app__h {
  display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px;
}
.app__title { font: 600 33px/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--ink-900); }
.app__sub { font: 400 16px/1.3 var(--font-text); color: var(--ink-700); margin-top: 6px; }
.app__orb { width: 44px; height: 44px; border-radius: 50%; background: var(--orb-gradient); box-shadow: var(--shadow-orb); flex-shrink: 0; }

/* generic in-app card */
.icard {
  background: var(--card-fill); border-radius: var(--r-card);
  padding: 16px 18px; box-shadow: var(--shadow-card); margin-bottom: 16px;
  border: 1px solid var(--hairline);
}
.icard--tint { background: linear-gradient(180deg, var(--tintA, #FCEAEE), var(--tintB, #FFF7F2)); border-color: transparent; }
.icard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.icard__title { font: 600 22px/1.1 var(--font-display); letter-spacing: -0.01em; color: var(--ink-900); }
.icard__meta { font: 400 15px/1 var(--font-text); color: var(--ink-500); }

/* resumo rows */
.rrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hairline); }
.rrow:first-of-type { border-top: none; }
.rrow__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.rrow__t { flex: 1; min-width: 0; }
.rrow__t b { display: block; font: 600 17px/1.2 var(--font-display); color: var(--ink-900); }
.rrow__t span { font: 400 13px/1.2 var(--font-text); color: var(--ink-500); }
.rrow__v { font: 600 19px/1 var(--font-display); color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* segmented control */
.seg { display: flex; gap: 2px; background: var(--canvas-200); border-radius: var(--r-pill); padding: 4px; margin-bottom: 16px; }
.seg span { flex: 1; text-align: center; font: 500 14px/1 var(--font-text); color: var(--ink-700); padding: 9px 4px; border-radius: var(--r-pill); white-space: nowrap; }
.seg span.on { background: var(--card-fill); color: var(--ink-900); font-weight: 600; box-shadow: var(--shadow-pressed); }

/* timer pad */
.timers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.timer { border-radius: 16px; padding: 18px 12px; text-align: center; border: 1px solid var(--hairline); }
.timer .lab { font: 500 15px/1 var(--font-text); color: var(--ink-700); }
.timer .num { font: 600 30px/1 var(--font-display); letter-spacing: 0.02em; color: var(--ink-900); margin-top: 10px; font-variant-numeric: tabular-nums; }

/* pill chips row */
.chips { display: flex; gap: 8px; background: var(--canvas-200); padding: 4px; border-radius: var(--r-pill); }
.chips span { flex: 1; text-align: center; font: 500 14px/1 var(--font-text); color: var(--ink-700); padding: 9px 2px; border-radius: var(--r-pill); }
.chips span.on { background: var(--card-fill); color: var(--ink-900); font-weight: 600; box-shadow: var(--shadow-pressed); }

/* in-app primary button */
.ibtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 15px; border-radius: var(--r-pill); background: var(--sleep-ink); color: #fff;
  font: 600 17px/1 var(--font-display); margin-top: 14px; }
.ibtn svg { width: 16px; height: 16px; }

/* acalmar sound grid */
.sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.scell { border-radius: 14px; padding: 14px 6px; text-align: center; background: var(--canvas-200); }
.scell.on { background: var(--acalmar); color: #fff; }
.scell .si { font-size: 20px; line-height: 1; }
.scell .sl { display: block; font: 500 12px/1.1 var(--font-text); margin-top: 8px; color: inherit; }
.scell:not(.on) .sl { color: var(--ink-700); }
.play {
  width: 76px; height: 76px; border-radius: 50%; margin: 4px auto 16px; display: grid; place-items: center;
  background: var(--acalmar-soft);
}
.play svg { width: 30px; height: 30px; color: var(--acalmar); }
.vol { display: flex; align-items: center; gap: 12px; }
.vol svg { width: 16px; height: 16px; color: var(--ink-500); flex-shrink: 0; }
.vol__track { flex: 1; height: 6px; border-radius: 999px; background: var(--canvas-300); position: relative; }
.vol__fill { position: absolute; inset: 0 38% 0 0; background: var(--acalmar); border-radius: 999px; }
.vol__knob { position: absolute; right: 38%; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-card); transform: translate(50%,-50%); }

/* stats timeline */
.tl { display: grid; gap: 2px; }
.tl__row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--hairline); }
.tl__row:first-child { border-top: none; }
.tl__lab { font: 400 13px/1 var(--font-text); color: var(--ink-700); }
.tl__track { position: relative; height: 22px; }
.tl__track::before { content:""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: var(--hairline); }
.dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-50%); }
.bar { position: absolute; top: 50%; height: 12px; border-radius: 6px; transform: translateY(-50%); }
.tl__axis { display: flex; justify-content: space-between; font: 400 11px/1 var(--font-text); color: var(--ink-500); margin-top: 6px; padding-left: 72px; }

/* stat big numbers */
.snums { display: flex; gap: 8px; }
.snums div { flex: 1; }
.snums .big { font: 600 30px/1 var(--font-display); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.snums .cap { font: 400 13px/1 var(--font-text); color: var(--ink-500); margin-top: 5px; }
.statchips { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.statchip { font: 500 13px/1 var(--font-text); padding: 7px 11px; border-radius: 999px; background: var(--canvas-200); color: var(--ink-700); display: inline-flex; gap: 6px; align-items: center; }

/* dica card (wonder weeks tip) */
.dica { background: linear-gradient(180deg, var(--pee-soft), #FFFDF4); border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--shadow-card); }
.dica .dl { font: 500 12px/1 var(--font-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pee-ink); }
.dica .dt { font: 600 22px/1.15 var(--font-display); color: var(--ink-900); margin-top: 8px; letter-spacing: -0.01em; }
.dica .dp { font: 400 15px/1.4 var(--font-text); color: var(--ink-700); margin-top: 8px; }

/* in-app tab bar */
.tabbar {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 25;
  display: flex; justify-content: space-around; align-items: center;
  padding: 9px 6px; border-radius: var(--r-pill);
  background: var(--glass-thick); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card); border: 1px solid var(--hairline);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.tab svg { width: 22px; height: 22px; color: var(--ink-700); }
.tab .tl2 { font: 500 11px/1 var(--font-text); color: var(--ink-700); }
.tab.on { }
.tab.on svg { color: var(--relac-ink); }
.tab.on .tl2 { color: var(--relac-ink); font-weight: 600; }
.tab.on .tpill { background: var(--relac-soft); }
.tpill { padding: 5px 14px; border-radius: 999px; }

/* ---------- FOOTER ---------- */
.foot { background: var(--canvas-100); border-top: 1px solid var(--hairline); }
.foot__in { padding-block: clamp(48px, 7vw, 80px); display: grid; gap: 36px; }
.foot__top { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; justify-content: space-between; }
.foot__brand { max-width: 360px; }
.foot__brand .brand { margin-bottom: 14px; }
.foot__brand p { font: var(--t-callout); color: var(--ink-700); margin: 0; }
.foot__links { display: flex; flex-wrap: wrap; gap: 40px; }
.foot__col h5 { font: 500 12px/1 var(--font-text); letter-spacing: var(--t-caption-tracking); text-transform: uppercase; color: var(--ink-500); margin: 0 0 14px; }
.foot__col a, .foot__col span { display: block; text-decoration: none; color: var(--ink-700); font: var(--t-callout); margin-bottom: 10px; transition: color .15s; }
.foot__col a:hover { color: var(--ink-900); }
.foot__bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid var(--hairline); font: var(--t-footnote); color: var(--ink-500); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-comfort), transform .7s var(--ease-comfort); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }