/* Comfie — getcomfie.com
   Design tokens ported from the app (constants/theme.ts).
   Sage #8FAF7E is decorative only and never used as text;
   readable sage text is always #4F6342 (sageDeep). */

:root {
  --bg: #F5F2EE;
  --surface: #FFFFFF;
  --surface-muted: #F0EDE8;
  --surface-tile: #F3F4EC;
  --sage: #8FAF7E;
  --sage-btn: #B9C6AE;
  --sage-soft: #E6EDDE;
  --sage-deep: #4F6342;
  --sun: #E4B363;
  --warm: #E8845C;
  --ink: #1A1A1A;
  --ink-2: #6B6560;
  --ink-3: #6F6A65;
  --border: #E8E4DF;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05), 0 2px 8px rgba(26, 26, 26, 0.05);
  --shadow-md: 0 2px 6px rgba(26, 26, 26, 0.06), 0 12px 32px rgba(26, 26, 26, 0.10);
  --font: 'Crimson Text', Georgia, 'Times New Roman', serif;
}

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/crimson-text-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/crimson-text-600.woff2') format('woff2');
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }

a { color: var(--sage-deep); }

:focus-visible {
  outline: 3px solid var(--sage-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -64px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  transition: top 0.15s;
}
.skip-link:focus { top: 12px; }

/* ── Header ─────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 242, 238, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 600;
  margin-right: auto;
}

.brand img { display: block; object-fit: contain; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 1.0625rem;
}
.site-nav a:hover { color: var(--ink); }

@media (max-width: 720px) {
  .site-nav a:not(.btn) { display: none; }
}

/* ── Buttons ────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
  padding: 14px 26px;
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.08s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--sage-btn); }
.btn-primary:hover { background: #ADBCA1; }

.btn-outline {
  background: transparent;
  border-color: var(--sage-deep);
  color: var(--sage-deep);
}
.btn-outline:hover { background: var(--sage-soft); }

.btn-small { padding: 10px 18px; font-size: 1rem; }

/* ── Hero ───────────────────────────────────────────────── */
/* Centered column with the phone below the copy, and a full-bleed field
   of scattered clothing behind everything (the mockup layout). */

.hero {
  position: relative;
  padding: 56px 0 0;
  overflow: hidden;
}

.hero .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.hero-visual {
  position: relative;
  z-index: 2;
  margin-top: 44px;
}

.eyebrow {
  display: inline-block;
  background: var(--sage-soft);
  color: var(--sage-deep);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: var(--r-full);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2.375rem, 5.5vw, 3.5rem);
  margin-bottom: 0.4em;
}

.hero-sub {
  font-size: 1.25rem;
  color: var(--ink-2);
  max-width: 34em;
  margin: 0 auto 28px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.store-note {
  font-size: 0.9375rem;
  color: var(--ink-3);
}

/* ── Phone mockup ───────────────────────────────────────── */
/* A real iPhone 16 Pro Max frame (PNG with a transparent screen
   cutout) sits on top of the screen content. The negative bottom
   margin lets the hero's overflow clip the phone just below the
   Right Now card, so it runs off into the value strip. No idle
   float here: a bobbing phone against a hard clip edge reads as
   broken. */

.phone {
  position: relative;
  width: 300px;
  margin: 0 auto -34px;
  filter: drop-shadow(0 24px 38px rgba(26, 26, 26, 0.22))
          drop-shadow(0 6px 12px rgba(26, 26, 26, 0.10));
}

.phone-frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* The screen sits in the frame's transparent cutout, measured from
   the PNG (905x1850: cutout x 46-857, y 41-1807) with ~2px tucked
   under the bezel so no sliver of background peeks through. The
   42px top padding clears the Dynamic Island baked into the PNG. */
.phone-screen {
  position: absolute;
  z-index: 1;
  top: 1.89%;
  bottom: 1.95%;
  left: 4.42%;
  right: 4.53%;
  background: var(--bg);
  border-radius: 40px;
  padding: 42px 14px 20px;
  overflow: hidden;
}

/* Inside the phone screen (mockup: greeting, weather, hourly strip,
   Right Now card with tip + button) */

.phone-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.0625rem;
  font-weight: 600;
  padding: 0 4px 10px;
}

.ph-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.phone-weather {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px 12px;
}

.phone-weather img { width: 76px; height: 76px; flex: none; }

.pw-right { text-align: right; }

.pw-right .weather-temp { font-size: 3rem; }

.pw-cond { color: var(--ink-2); font-size: 0.9375rem; margin: 2px 0 0; }

.pw-feels { color: var(--ink-3); font-size: 0.8125rem; margin: 0; }

.phone-hours {
  padding: 0 6px 12px;
  text-align: center;
}

.ph-label {
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}

.ph-row {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.ph-row div { flex: 1; font-size: 0.6875rem; color: var(--ink-3); }

.ph-row b { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }

.phone .tiles { grid-template-columns: repeat(4, 1fr); gap: 6px; }

/* Live outfits run 3 to 8 pieces. js/demo.js adds .tiles-even and sets
   --cols so every row stays balanced (5 -> 3+2, 7 -> 4+3) and a short
   last row sits centered. The static fallback keeps the 4-column grid. */
.phone .tiles.tiles-even {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.phone .tiles.tiles-even .tile {
  width: calc((100% - (var(--cols) - 1) * 6px) / var(--cols) - 0.5px);
}

.phone .tile { padding: 8px 2px 6px; border-radius: 10px; }

.phone .tile img { width: 40px; height: 40px; }

.phone .tile span { font-size: 0.625rem; }

.phone .outfit-summary { font-size: 0.8125rem; }

.phone-tip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--sage-soft);
  color: var(--sage-deep);
  font-size: 0.8125rem;
  text-align: left;
  border-radius: var(--r-sm);
  padding: 8px 10px;
  margin: 10px 0 0;
}

.phone-tip svg { flex: none; }

.phone-cta {
  display: block;
  background: var(--sage-btn);
  border-radius: var(--r-full);
  text-align: center;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 10px 12px;
  margin-top: 10px;
}

/* ── Hero scatter field (js/scatter.js) ─────────────────── */
/* The pieces sit at their inline --x/--y spots as pure decoration. On
   wide screens the script flies the data-fly pieces into the phone's
   tiles on scroll and fades the rest. Without the script this is
   exactly the static mockup. */

.hero-scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-scatter img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(74px * var(--s, 1));
  height: auto;
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(0 2px 5px rgba(26, 26, 26, 0.07));
  will-change: transform, opacity;
  z-index: 1;
}

.hero-scatter img.is-flying { z-index: 7; }

@media (max-width: 719px) {
  .hero-scatter img { display: none; }
  .hero-scatter img.sc-keep {
    display: block;
    width: calc(48px * var(--s, 1));
    opacity: 0.7;
  }
}

.tile-img-hidden { visibility: hidden; }

/* scatter.js still toggles float-paused; with the float animation
   gone (the clipped phone must not bob) the class is a no-op. */
.phone.float-paused { animation-play-state: paused; }

/* App-style cards inside the phone + demo */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sage-soft);
  color: var(--sage-deep);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--r-full);
}

.weather-now {
  display: flex;
  align-items: center;
  gap: 14px;
}

.weather-now img { width: 56px; height: 56px; flex: none; }

.weather-temp {
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
}

.weather-cond { color: var(--ink-2); font-size: 1rem; margin: 2px 0 0; }

.weather-stats {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.weather-stats div {
  flex: 1;
  background: var(--surface-tile);
  border-radius: var(--r-sm);
  text-align: center;
  padding: 7px 4px;
}

.weather-stats .stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-3);
}

.weather-stats .stat-value {
  font-weight: 600;
  font-size: 0.9375rem;
}

.outfit-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  margin-top: 12px;
}

.outfit-card h3 {
  font-size: 1.0625rem;
  margin: 0 0 2px;
}

.outfit-summary {
  color: var(--ink-2);
  font-size: 0.9375rem;
  margin: 0 0 12px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile {
  background: var(--surface-tile);
  border-radius: var(--r-md);
  padding: 10px 6px 8px;
  text-align: center;
  margin: 0;
}

.tile img {
  width: 54px; height: 54px;
  object-fit: contain;
  display: block;
  margin: 0 auto 4px;
}

.tile span {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

/* ── Value strip ────────────────────────────────────────── */

.value-strip {
  padding: 26px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.value-strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  justify-content: center;
}

.value-strip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 1.0625rem;
}

.value-strip .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sage);
  flex: none;
}

/* ── Sections ───────────────────────────────────────────── */

section { padding: 72px 0; }

.section-head {
  max-width: 620px;
  margin: 0 auto 44px;
  text-align: center;
}

.section-head h2 { font-size: clamp(1.75rem, 3.5vw, 2.375rem); }

.section-head p { color: var(--ink-2); font-size: 1.1875rem; margin: 0; }

/* ── Demo ───────────────────────────────────────────────── */

.demo-section { background: var(--surface-muted); }

.demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-bottom: 26px;
}

.city-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 340px;
}

.city-search input {
  width: 100%;
  font-family: var(--font);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  padding: 13px 20px;
}

.city-search input::placeholder { color: var(--ink-3); }

.city-search input:focus {
  outline: none;
  border-color: var(--sage-deep);
}

.city-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
}

.city-results:empty { display: none; }

.city-results button {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  font-size: 1.0625rem;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  padding: 10px 12px;
  cursor: pointer;
}

.city-results button:hover { background: var(--surface-tile); }

.city-results .city-region {
  color: var(--ink-3);
  font-size: 0.9375rem;
}

.unit-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  padding: 3px;
}

.unit-toggle button {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-2);
  background: none;
  border: none;
  border-radius: var(--r-full);
  padding: 8px 16px;
  cursor: pointer;
}

.unit-toggle button[aria-pressed="true"] {
  background: var(--sage-btn);
  color: var(--ink);
}

/* Demo result card */

.demo-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px;
}

.demo-loading {
  text-align: center;
  color: var(--ink-3);
  padding: 48px 0;
}

@media (prefers-reduced-motion: no-preference) {
  .demo-loading { animation: pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
}

.demo-error { text-align: center; padding: 32px 0; }

.demo-result { display: none; }
.demo-result.is-ready { display: block; }

.demo-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 18px;
}

.demo-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 720px) { .demo-grid { grid-template-columns: 1fr; } }

.demo-weather .weather-now img { width: 72px; height: 72px; }

.demo-weather .weather-temp { font-size: 3.5rem; }

.demo-outfit h3 { font-size: 1.25rem; margin-bottom: 2px; }

.demo-outfit .tiles {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.demo-outfit .tile img { width: 64px; height: 64px; }

/* The outfit "rains" into the demo card: each piece drops into its tile
   with a small stagger. js/demo.js adds .tiles-drop when a fresh outfit
   renders inside the viewport. */
.tiles-drop .tile img {
  animation: tile-drop 0.55s cubic-bezier(0.2, 0.7, 0.3, 1.2) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes tile-drop {
  from { opacity: 0; transform: translateY(-70px) rotate(-8deg); }
  65% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tiles-drop .tile img { animation: none; }
}

.demo-note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 1rem;
  text-align: center;
}

.demo-note a { font-weight: 600; }

/* ── Feature grid ───────────────────────────────────────── */

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 880px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 22px;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--surface-tile);
  font-size: 1.5rem;
  margin-bottom: 14px;
}

.feature-icon img { width: 36px; height: 36px; object-fit: contain; }

.feature h3 { font-size: 1.25rem; }

.feature p { color: var(--ink-2); font-size: 1.0625rem; margin: 0; }

/* ── FAQ ────────────────────────────────────────────────── */

.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-list details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-list summary {
  cursor: pointer;
  font-size: 1.1875rem;
  font-weight: 600;
  padding: 18px 22px;
  list-style: none;
  position: relative;
  padding-right: 52px;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--sage-deep);
}

.faq-list details[open] summary::after { content: '\2212'; }

.faq-list .faq-body {
  padding: 0 22px 20px;
  color: var(--ink-2);
}

.faq-list .faq-body p:last-child { margin-bottom: 0; }

/* ── Download band ──────────────────────────────────────── */

.download-band {
  background: var(--sage-soft);
  border-radius: var(--r-lg);
  padding: 56px 32px;
  text-align: center;
}

.download-band h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); }

.download-band p {
  color: var(--ink-2);
  font-size: 1.1875rem;
  max-width: 32em;
  margin: 0 auto 26px;
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 18px;
}

.store-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  padding: 9px 20px;
  text-decoration: none;
  line-height: 1.2;
  transition: transform 0.08s ease, opacity 0.15s ease;
}

.store-badge:hover { opacity: 0.85; transform: translateY(-1px); }

.store-badge .badge-small { font-size: 0.75rem; letter-spacing: 0.02em; }

.store-badge .badge-big { font-size: 1.1875rem; font-weight: 600; }

/* ── Footer ─────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 48px;
  margin-top: 24px;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-brand { max-width: 300px; }

.footer-brand .brand { margin-bottom: 8px; }

.footer-brand p { color: var(--ink-3); font-size: 1rem; margin: 0; }

.footer-links {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-links h3 {
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li { margin-bottom: 8px; }

.footer-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 1.0625rem;
}

.footer-links a:hover { color: var(--ink); text-decoration: underline; }

.footer-fine {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  color: var(--ink-3);
  font-size: 0.9375rem;
}

.footer-fine a { color: var(--ink-3); }

/* ── Legal pages (privacy / support) ────────────────────── */

.page-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

.page-main h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); }

.page-main .page-updated { color: var(--ink-3); font-size: 1rem; }

.page-main h2 { font-size: 1.5rem; margin-top: 1.6em; }

.page-main ul { color: var(--ink); }

.page-main li { margin-bottom: 6px; }

.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  margin: 24px 0;
  text-align: center;
}

.contact-card .btn { margin-top: 6px; }