/* Latest Figma composition: 292:2378. Existing app tokens remain the source
   of color, type, and control styling; the artwork uses its native aspect. */
:root {
  --page-background: var(--white);
  --page-foreground: var(--ink);
  --page-secondary: var(--muted);
  --atmosphere-duration: 1200ms;
  --sky-shade: color-mix(in srgb, var(--ink) 28%, transparent);
  --sky-text-shadow: 0 1px 8px color-mix(in srgb, var(--ink) 18%, transparent);
  --helper-device-fill: color-mix(in srgb, var(--ink) 4%, transparent);
}
:root[data-page-theme="dark"] {
  --page-background: var(--charcoal);
}
body { background: var(--page-background); color: var(--page-foreground); }
.center-heading p { color: var(--page-secondary); }

/* Keep light content on paper while the surrounding empty space fades. */
.record-section, .categories-section, .helpers-section {
  background: linear-gradient(transparent, var(--white) 4rem, var(--white) calc(100% - 4rem), transparent);
}

/* Sky images share one crop. The controller fades only the incoming image,
   keeping an opaque image underneath throughout the blend. */
.sky-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; isolation: isolate; }
.sky-layer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.sky-layer:nth-child(2) { opacity: 0; }
.sky-scene::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--sky-shade); pointer-events: none; }
.hero-sky::after { background: linear-gradient(var(--sky-shade) 0%, var(--sky-shade) 38%, transparent 72%); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.5rem 0 0;
  gap: 5rem;
  background: var(--sky);
  color: var(--white);
}
.hero-sky { z-index: -1; }
.site-header { width: min(calc(100% - var(--gutter) * 2), 75rem); position: relative; z-index: 2; }
.hero-copy { position: relative; z-index: 2; width: min(calc(100% - var(--gutter) * 2), 37rem); }
.site-header nav, .hero-copy > :is(h1, p) { text-shadow: var(--sky-text-shadow); }
.hero-copy > p { max-width: 25rem; color: var(--white); }
.hero .button-outline { background: color-mix(in srgb, var(--ink) 12%, transparent); border-color: color-mix(in srgb, var(--white) 35%, transparent); }
.hero-meadow {
  position: relative;
  flex: none;
  width: 100%;
  height: 38.47222vw;
  /* The native landscape canvas extends behind the copy through transparency. */
  --phone-width: 12.32703vw;
  --phone-bottom: 12.74653vw;
}
.meadow-layer { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; max-width: none; pointer-events: none; }
.meadow-distant { z-index: 0; }
.meadow-middle { z-index: 1; }
.hero-phone {
  position: absolute;
  z-index: 2;
  left: calc(50% - var(--phone-width) / 2);
  bottom: var(--phone-bottom);
  width: var(--phone-width);
  aspect-ratio: 1380 / 2880;
}
.hero-phone-screen { position: absolute; left: 4.1296%; top: 2.2726%; width: 91.7408%; height: 95.4576%; border-radius: 16.1% / 7.4%; }
.hero-phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.meadow-foreground { z-index: 3; }
.record-card { color: var(--ink); }
.categories-section { min-height: 56rem; }

/* The active helper pairs its copy with the exact app capture from Figma.
   Other panels retain their existing descriptions and keyboard behavior. */
.helper-preview {
  position: relative;
  isolation: isolate;
  height: auto;
  min-height: 45.625rem;
  padding: .25rem;
  overflow: hidden;
  color: var(--ink);
  background: var(--white);
}
.helper-meadow { position: absolute; inset: auto 0 0; width: 100%; height: auto; z-index: -1; pointer-events: none; }
.helper-preview [role="tabpanel"] { position: relative; min-height: 45rem; align-items: stretch; justify-content: space-between; gap: 1.5rem; }
.helper-description { flex: 1; max-width: 545px; text-align: start; padding: 3.75rem; }
.helper-description h3 { margin-bottom: .625rem; }
.helper-device { display: flex; align-items: center; justify-content: center; flex: 0 1 510px; min-width: 0; background: var(--helper-device-fill); border-radius: var(--radius-preview); }
.calculator-screen { width: 238.828px; height: 519.242px; border-radius: var(--radius-preview); border: 2px solid var(--border); }
.helper-preview [role="tabpanel"]:not(#panel-calculator) { justify-content: flex-start; }
.helper-preview [role="tabpanel"]:not(#panel-calculator) .helper-description { max-width: 36rem; }
.helper-controls .motion-control { color: var(--page-secondary); }

/* Privacy owns its foreground and dark surface, independent of scroll state.
   The top fade ends inside the empty padding, before the first heading. */
.privacy-section {
  --page-foreground: var(--dark-ink);
  --page-secondary: var(--dark-muted);
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--page-foreground);
}
.privacy-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--privacy-glow), linear-gradient(transparent, var(--charcoal) 4rem);
  pointer-events: none;
}
.privacy-section .center-heading p { color: var(--page-secondary); }
.sync-cards > div { background: color-mix(in srgb, var(--dark-ink) 6%, transparent); }
.privacy-section :is(.encryption-caption p, .encryption-controls, .motion-control) { color: inherit; }
.privacy-section .encryption-caption > .lucide { color: inherit; }
.privacy-section :is(.example-row, .encryption-caption) {
  background: color-mix(in srgb, var(--charcoal) 60%, transparent);
}
.privacy-section .example-name span { color: var(--dark-ink); }

/* Pricing sits on paper; the sky rises through its lower edge and carries
   into the meadow footer, matching the composed Figma landscape. */
.download-landscape { position: relative; isolation: isolate; overflow: hidden; }
.download-landscape::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(transparent, var(--white) 4rem);
  pointer-events: none;
}
.download-sky { top: 35.125rem; z-index: -2; mask-image: linear-gradient(transparent, var(--white) 11.5%); -webkit-mask-image: linear-gradient(transparent, var(--white) 11.5%); }
.download-grass { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 46.45833vw; overflow: hidden; pointer-events: none; }
.download-grass img { width: 100%; height: auto; max-width: none; }
.pricing-section { background: transparent; color: var(--ink); }
.pricing-heading > p { color: var(--muted); }
.plans { color: var(--ink); }
.free-plan { border-color: var(--border); background: var(--white); }
.plus-plans { border-color: var(--border); background: var(--white); }
.paid-plan:not(:last-child) { border-color: var(--border); }
.plan-cadence, .plan-copy > p, .paid-plan > p { color: var(--muted); }
.pricing-note { color: var(--white); text-shadow: var(--sky-text-shadow); }
.download-section { position: relative; margin-top: 2.5rem; padding: 1.25rem var(--gutter) 26.25rem; gap: 1.25rem; background: transparent; color: var(--white); }
.download-section > p { color: var(--white); }
.download-section .credits { color: var(--white); }
.download-section :is(h2, p) { text-shadow: var(--sky-text-shadow); }
.download-section a:focus-visible { outline-color: var(--white); }

/* Explicit opt-in preview; ordinary visitors see only their local-time sky. */
.sky-preview { position: fixed; z-index: 50; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .75rem; max-width: calc(100% - 2rem); padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--white); color: var(--ink); box-shadow: var(--shadow-phone); }
.sky-preview label { font-size: var(--small); font-weight: 600; }
.sky-preview select { min-height: 44px; min-width: 0; max-width: 100%; padding: .5rem; border: 1px solid var(--border); border-radius: var(--radius-button); color: var(--ink); background: var(--surface); font: inherit; }
.sky-preview select:focus-visible { outline: 2px solid var(--blue-800); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  body { transition: background-color var(--atmosphere-duration) ease; }
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  .sky-layer { animation: none; transition: none; }
}
@media (max-width: 74rem) {
  .helper-description { padding: 3rem 2.5rem; }
  .helper-device { flex-basis: 46%; }
}
@media (max-width: 52rem) {
  .hero { gap: 3.75rem; }
  .hero-meadow { height: 30rem; --phone-width: 10.5rem; --phone-bottom: 7rem; }
  .meadow-layer { width: max(100%, 64rem); left: 50%; transform: translateX(-50%); }
  .categories-section { min-height: 40rem; }
  .helper-preview [role="tabpanel"] { flex-direction: column; align-items: stretch; gap: 1.5rem; min-height: 45rem; }
  .helper-description { flex: none; max-width: none; padding: 2.5rem 2rem 0; }
  .helper-device { flex: 1; min-height: 34rem; margin-inline: 1rem; background: transparent; }
  .helper-meadow { width: max(100%, 56rem); left: 50%; transform: translateX(-50%); }
  .download-sky { top: 28rem; mask-image: linear-gradient(transparent, var(--white) 28%); -webkit-mask-image: linear-gradient(transparent, var(--white) 28%); }
  .download-section { padding-bottom: 23rem; }
  .download-grass { height: 23rem; }
  .download-grass img { width: max(100%, 64rem); position: absolute; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 36rem) {
  .hero { padding-top: 1rem; gap: 3rem; }
  .hero-meadow { height: 27rem; --phone-width: 10rem; --phone-bottom: 6rem; }
  .meadow-layer { width: 56rem; }
  .categories-section { min-height: 36rem; }
  .helper-description { padding: 2rem 1.25rem 0; }
  .helper-description h3 { font-size: var(--h2); }
  .calculator-screen { width: min(100%, 220px); height: auto; }
  .helper-device { min-height: 32rem; }
  .helper-meadow { width: 50rem; }
  .helper-preview [role="tabpanel"]:not(#panel-calculator) .helper-description { padding-bottom: 16rem; }
  .paid-plan:not(:last-child) { border-color: var(--border); }
  .download-section { margin-top: 0; padding-bottom: 20rem; }
  .download-grass { height: 20rem; }
  .download-grass img { width: 56rem; }
  .sky-preview { gap: .5rem; }
}
@media (forced-colors: active) {
  .sky-preview, .sky-preview select { border-color: CanvasText; }
  .sky-preview select:focus-visible { outline-color: Highlight; }
}