/* Everylook website. Values mirror DesignSystem/tokens.json; change them there first. */
:root {
  /* color */
  --paper: #FCFAFD;              /* paper (cloudy) */
  --glow-warm: rgba(246, 188, 136, 0.42); /* glow-a (sunny) */
  --glow-cool: rgba(140, 190, 250, 0.32); /* glow-b (rainy) */
  --glow-lilac: rgba(170, 148, 220, 0.30); /* glow-a (cloudy) */
  --ink: #111114;
  --ink-muted: #5A5A62;
  --ink-faint: #606069;
  --rule: rgba(17, 17, 20, 0.12);
  --glass-fill: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.8);

  /* type */
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "Outfit", -apple-system, sans-serif;
  --title-hero: clamp(40px, 9vw, 72px); /* website only: larger than the app's title-xl */
  --title-xl: 30px;
  --title-md: 26px;
  --title-xs: 20px;
  --body: 17px;
  --body-sm: 15px;
  --caps: 12px;

  /* space, radius, size */
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-40: 40px;
  --space-64: 64px;
  --space-96: 96px;
  --radius-card: 22px;
  --radius-screen: 36px;
  --size-cta: 50px;
  --size-control: 44px;
  --content: 1080px;
  --text-col: 680px;

  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 24px rgba(20, 20, 40, 0.12);
  --shadow-screen: 0 24px 60px rgba(20, 20, 40, 0.16);
  --blur-glass: blur(18px) saturate(1.6);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(640px 640px at 100% 0%, var(--glow-warm), transparent 70%),
    radial-gradient(680px 680px at 0% 45%, var(--glow-cool), transparent 70%),
    radial-gradient(600px 600px at 100% 100%, var(--glow-lilac), transparent 70%);
  background-attachment: fixed;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--ink); text-underline-offset: 3px; }
a:focus-visible, .store:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 var(--space-20); }

/* header and footer */
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-16); padding-top: var(--space-20); padding-bottom: var(--space-20);
}
.brand { display: flex; align-items: center; gap: var(--space-12); text-decoration: none; font-weight: 600; font-size: var(--title-xs); letter-spacing: -0.01em; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }

.site-footer { margin-top: var(--space-96); border-top: 1px solid var(--rule); }
.site-footer .wrap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-16);
  padding-top: var(--space-24); padding-bottom: var(--space-40);
  font-size: var(--body-sm); color: var(--ink-muted);
}
.site-footer nav { display: flex; gap: var(--space-20); }
.site-footer a { color: var(--ink-muted); }

/* type */
h1, h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: -0.005em; }
h1 { font-size: var(--title-hero); }
h2 { font-size: var(--title-xl); }
h3 { font-size: var(--body); font-weight: 600; margin: 0 0 var(--space-8); }
.caps { font-size: var(--caps); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--ink-muted); }
.lede { font-size: 20px; color: var(--ink-muted); max-width: 30ch; margin: var(--space-20) 0 0; }
p { margin: 0 0 var(--space-16); }

/* buttons: the black primary CTA */
.store {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-12);
  height: var(--size-cta); padding: 0 28px; border-radius: 999px;
  background: var(--ink); color: #fff; text-decoration: none;
  font-weight: 500; font-size: var(--body);
}
.store svg { width: 20px; height: 20px; fill: currentColor; }
.store[aria-disabled="true"] { cursor: default; }
.cta-note { font-size: var(--body-sm); color: var(--ink-muted); margin-top: var(--space-12); }

/* hero */
.hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-64); text-align: center; padding-top: var(--space-64); }
.hero h1 { margin: 0 auto; }
.hero .lede { margin-left: auto; margin-right: auto; }
.hero .actions { margin-top: var(--space-40); }
/* two app screens stacked casually: month in front, week tucked behind */
.screens { display: grid; justify-items: center; width: 100%; padding: var(--space-24) 0 var(--space-40); }
.screen {
  grid-area: 1 / 1; width: 280px; max-width: 58vw; height: auto;
  border-radius: var(--radius-screen); box-shadow: var(--shadow-screen);
}
.screen-back { transform: translate(30%, -4%) rotate(6deg); }
.screen-front { transform: translate(-24%, 4%) rotate(-4deg); z-index: 1; }

/* text pages: privacy and support */
.doc { max-width: var(--text-col); margin: 0 auto; padding-top: var(--space-40); }
.doc h1 { font-size: clamp(36px, 7vw, 52px); }
.doc .updated { color: var(--ink-faint); font-size: var(--body-sm); margin-top: var(--space-12); }
.doc h2 { font-size: var(--title-md); margin: var(--space-40) 0 var(--space-12); }
.doc ul { padding-left: 1.2em; margin: 0 0 var(--space-16); }
.doc li { margin-bottom: var(--space-8); }
.doc .summary {
  margin-top: var(--space-24); padding: var(--space-20) var(--space-24); border-radius: var(--radius-card);
  background: var(--glass-fill); border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass);
}
.doc .summary p:last-child, .doc .summary ul:last-child { margin-bottom: 0; }

.faq details { border-top: 1px solid var(--rule); padding: var(--space-16) 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--space-16); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--ink-muted); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-muted); margin: var(--space-12) 0 0; }

.contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); margin-top: var(--space-24); }

@media (max-width: 760px) {
  .hero { gap: var(--space-40); padding-top: var(--space-24); }
  .screen { border-radius: var(--radius-card); max-width: 52vw; }
  .screen-back { transform: translate(24%, -4%) rotate(6deg); }
  .screen-front { transform: translate(-22%, 4%) rotate(-4deg); }
  .brand span { display: none; }
}