/* Henventory site — palette lifted verbatim from the app (constants/colors.ts) */
:root {
  --cream: #FFF8F0;
  --warm-white: #FFFDF9;
  --bark: #3D2B1F;
  --bark-light: #5C4033;
  --terracotta: #C1694F;
  --terracotta-light: #D4896F;
  --sage: #8B9E7E;
  --wheat: #E8D5B7;
  --wheat-light: #F0E3CC;
  --egg: #F5E6C8;
  --straw: #D4C098;
  --sun: #E8A838;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #1A1412;
    --warm-white: #2A2220;
    --bark: #F5EDE4;
    --bark-light: #BFB3A8;
    --terracotta: #D4896F;
    --terracotta-light: #C1694F;
    --sage: #9DB891;
    --wheat: #3D3530;
    --wheat-light: #2F2825;
    --egg: #3D3530;
    --straw: #8A7E70;
    --sun: #F0B848;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--cream);
  color: var(--bark);
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }

header.site {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0;
}
header.site .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bark); }
header.site .brand img { width: 40px; height: 40px; border-radius: 10px; }
header.site .brand span { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 1.35rem; }
header.site nav a {
  color: var(--bark-light); text-decoration: none; margin-left: 22px;
  font-weight: 700; font-size: 0.95rem;
}
header.site nav a:hover { color: var(--terracotta); }

/* Hero */
.hero { text-align: center; padding: 72px 0 56px; }
.hero img.mark { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 8px 32px rgba(61, 43, 31, 0.12); }
.hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.6rem);
  margin-top: 24px; letter-spacing: -0.01em;
}
.hero p.tag { font-size: clamp(1.15rem, 3vw, 1.45rem); color: var(--bark-light); margin-top: 10px; font-weight: 700; }
.hero p.sub { max-width: 560px; margin: 16px auto 0; color: var(--bark-light); }
.badge {
  display: inline-block; margin-top: 28px; padding: 12px 26px;
  background: var(--bark); color: var(--cream); border-radius: 999px;
  font-weight: 800; letter-spacing: 0.02em; font-size: 0.95rem;
}
@media (prefers-color-scheme: dark) { .badge { background: var(--terracotta); color: #1A1412; } }

/* App screenshots */
.phone-shot {
  display: block; width: 100%; height: auto;
  border-radius: 26px; border: 1px solid var(--wheat);
  box-shadow: 0 18px 48px rgba(61, 43, 31, 0.16);
  background: var(--warm-white);
}
.hero .shot { width: min(76vw, 340px); margin: 44px auto 0; }
.shot-crop {
  overflow: hidden;
  aspect-ratio: 1320 / 1780;            /* top 62% of the 1320x2868 capture */
  border: 1px solid var(--wheat);
  border-bottom: none;
  border-radius: 26px 26px 0 0;
  background: var(--warm-white);
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, 0) 106%);
          mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, 0) 106%);
}
.shot-crop img { display: block; width: 100%; height: auto; }
.shot-reflection {
  overflow: hidden;
  aspect-ratio: 1320 / 240;
  margin-top: 2px;
  opacity: 0.15;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 92%);
          mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
/* Flip the full image and pull it up so the strip just above the crop line
   (source rows ~1540-1780) is what mirrors below it */
.shot-reflection img { display: block; width: 100%; height: auto; transform: scaleY(-1); margin-top: -82.42%; }

section.peek { padding: 44px 0 12px; }
section.peek h2 {
  text-align: center; font-family: "Playfair Display", Georgia, serif;
  font-weight: 800; font-size: 1.9rem;
}
.peek-row {
  display: flex; gap: 20px; margin-top: 28px;
  overflow-x: auto; padding: 4px 4px 14px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.peek-item { flex: 0 0 min(72vw, 293px); margin: 0; scroll-snap-align: center; }
.peek-item figcaption {
  text-align: center; margin-top: 12px;
  color: var(--bark-light); font-weight: 700; font-size: 0.95rem;
}
@media (min-width: 720px) {
  .peek-row { justify-content: center; overflow-x: visible; }
  .peek-item { flex: 1 1 0; min-width: 0; }
}

/* Feature grid */
section.features { padding: 28px 0 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card {
  background: var(--warm-white); border: 1px solid var(--wheat-light);
  border-radius: 16px; padding: 22px;
}
.card .ic {
  width: 40px; height: 40px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; margin-bottom: 12px;
  background: var(--egg);
}
.card .ic svg { width: 22px; height: 22px; stroke: var(--terracotta); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 4px; }
.card p { color: var(--bark-light); font-size: 0.95rem; }

/* Apple Watch + Home Screen section */
section.wrist { padding: 44px 0 12px; text-align: center; }
section.wrist h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800; font-size: 1.9rem;
}
section.wrist p.wrist-tag { color: var(--terracotta); font-weight: 800; margin-top: 6px; }
section.wrist p.wrist-sub { max-width: 600px; margin: 14px auto 0; color: var(--bark-light); }

.wrist-row {
  display: flex; gap: 20px; margin-top: 32px;
  overflow-x: auto; padding: 4px 4px 14px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.wrist-item { flex: 0 0 min(56vw, 218px); margin: 0; scroll-snap-align: center; }
@media (min-width: 720px) {
  .wrist-row { justify-content: center; overflow-x: visible; }
  .wrist-item { flex: 1 1 0; min-width: 0; }
}

.watch-frame {
  position: relative; background: #0d0d0d;
  border-radius: 24.5% / 21%; padding: 5.5% 5.5% 6%;
  border: 1px solid var(--wheat);
  box-shadow: 0 18px 48px rgba(61, 43, 31, 0.16);
}
.watch-frame img { display: block; width: 100%; height: auto; border-radius: 18px; background: #000; }
.watch-frame::before {
  content: ""; position: absolute; right: -4px; top: 22%;
  width: 5px; height: 15%; border-radius: 3px 4px 4px 3px / 3px; background: #3a3a3a;
}
.watch-frame::after {
  content: ""; position: absolute; right: -3px; top: 44%;
  width: 4px; height: 19%; border-radius: 2px; background: #262626;
}
.wrist-item figcaption {
  text-align: center; margin-top: 12px;
  color: var(--bark-light); font-weight: 700; font-size: 0.95rem;
}

p.wrist-note { max-width: 640px; margin: 10px auto 0; color: var(--bark-light); font-size: 0.95rem; }
p.wrist-note strong { color: var(--bark); }

section.wrist h3.homescreen {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800; font-size: 1.35rem; margin-top: 44px;
}
.widget-strip { display: flex; gap: 16px; margin-top: 22px; justify-content: center; align-items: center; }
.widget-strip img {
  height: clamp(110px, 24vw, 190px); width: auto;
  /* The PNGs carry transparent (masked) corners, so the shadow must follow
     the alpha channel — a box-shadow would draw a rectangle behind them. */
  filter: drop-shadow(0 14px 30px rgba(61, 43, 31, 0.2));
}
/* Narrow screens: the pair overflows, and the medium widget alone tells the
   story — drop the small one rather than shrink both into illegibility. */
@media (max-width: 559px) { .widget-strip img:last-child { display: none; } }
p.widget-caption { margin-top: 14px; color: var(--bark-light); font-weight: 700; font-size: 0.95rem; }
section.wrist .chips {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-top: 20px; text-align: left;
}

/* Pro band */
section.pro {
  margin: 56px 0; padding: 40px 32px; border-radius: 20px;
  background: var(--warm-white); border: 1px solid var(--wheat);
  text-align: center;
}
section.pro h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 1.9rem; }
section.pro p.once { color: var(--terracotta); font-weight: 800; margin-top: 6px; }
section.pro ul {
  list-style: none; margin: 24px auto 0; max-width: 640px; text-align: left;
  columns: 2; column-gap: 40px;
}
section.pro ul li { padding: 6px 0 6px 26px; position: relative; color: var(--bark-light); break-inside: avoid; font-size: 0.97rem; }
section.pro ul li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 10px; height: 13px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--sage);
}
@media (max-width: 560px) { section.pro ul { columns: 1; } }

/* Privacy strip */
section.privacy-strip { text-align: center; padding: 8px 0 64px; }
section.privacy-strip p { font-weight: 800; font-size: 1.1rem; }
section.privacy-strip a { color: var(--terracotta); }

/* Content pages (privacy / support) */
main.doc { padding: 24px 0 72px; max-width: 720px; margin: 0 auto; }
main.doc h1 { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 2.1rem; margin: 24px 0 6px; }
main.doc .meta { color: var(--straw); font-size: 0.9rem; margin-bottom: 28px; }
main.doc h2 { font-size: 1.25rem; font-weight: 800; margin: 30px 0 8px; }
main.doc p, main.doc li { color: var(--bark-light); margin-bottom: 10px; }
main.doc ul { padding-left: 22px; }
main.doc a { color: var(--terracotta); }
main.doc strong { color: var(--bark); }

footer.site {
  border-top: 1px solid var(--wheat-light); padding: 28px 0 44px;
  text-align: center; color: var(--straw); font-size: 0.9rem;
}
footer.site a { color: var(--bark-light); text-decoration: none; margin: 0 10px; font-weight: 700; }
footer.site a:hover { color: var(--terracotta); }