/* =========================================================
   FrameOfJoy — Design tokens, v5 ("Apple grammar", clean)
   One neutral system (Apple's own near-black / near-white /
   #F5F5F7 grey), one restrained accent colour, one typeface.
   Flat surfaces, no card borders, no clutter — big type and
   space do the work. Sections alternate white / light grey /
   true black exactly like apple.com product pages. The
   day-part accent survives only as a soft glow behind each
   feature close-up, kept quiet rather than decorative.

   Type: Atkinson Hyperlegible — designed by the Braille
   Institute specifically for readability for people with low
   vision and cognitive differences. Used exclusively (no serif,
   no mono) so the accessibility story and the clean, single-
   typeface Apple look are the same decision. The one exception
   is the wordmark itself: Fraunces, matching the curled serif
   lettering baked into the uploaded logo, so the text version
   of the brand name reads as the same wordmark, not a stand-in.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root{
  /* neutrals — Apple's own greys */
  --white: #FFFFFF;
  --grey-1: #F5F5F7;   /* secondary section bg */
  --grey-2: #E8E8ED;   /* hairlines, dividers */
  --grey-3: #86868B;   /* muted captions */

  /* ink */
  --ink: #1D1D1F;
  --ink-soft: rgba(29,29,31,0.72);
  --ink-faint: rgba(29,29,31,0.5);

  /* night — full-bleed dark sections + nav.
     Matches the navy used on the frame's own reminder card, so the
     dark bands read as the same product rather than a generic theme. */
  --night: #33475A;
  --night-deep: #2A3B4A;
  --night-panel: #3D5568;
  --night-line: rgba(255,255,255,0.14);
  --cream-hi: #FFFFFF;
  --cream-soft: rgba(255,255,255,0.72);
  --cream-faint: rgba(255,255,255,0.5);

  /* one accent, used sparingly (CTAs, links, highlights) */
  --accent: #C9822F;
  --accent-deep: #A8691F;

  /* frame UI — the actual on-screen colours of the device itself, used
     by the live mini-recreations in the scroll story (not marketing
     theme colours, so they stay fixed regardless of --accent). */
  --frame-sky-1: #7ED0F6;
  --frame-sky-2: #EAF8FE;
  --frame-card: #4A657A;
  --frame-green: #42B570;
  --frame-pink: #FF4D7A;

  /* quiet per-feature glow only — not used in UI chrome */
  --morning: #E3B978;
  --afternoon: #C9822F;
  --evening: #8A7FA6;
  --sage: #6F8A5E;
  --sage-deep: #4F6642;

  --sans: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif;
  --logo-font: 'Fraunces', ui-serif, Georgia, serif;

  --max: 1180px;
  --max-wide: 1320px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }
.wrap-wide{ max-width:var(--max-wide); margin:0 auto; padding:0 32px; }

h1,h2,h3,h4{
  font-family:var(--sans);
  font-weight:600;
  margin:0 0 0.4em;
  letter-spacing:-0.025em;
  color:var(--ink);
  line-height:1.08;
}

p{ margin:0 0 1em; color:var(--ink-soft); font-weight:400; }

em.warm{
  font-style:normal;
  font-weight:600;
  color:var(--accent);
}

.eyebrow{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:0.01em;
  color:var(--grey-3);
  display:inline-flex;
  align-items:center;
  margin-bottom:16px;
  font-weight:600;
}
.eyebrow.accent{ color:var(--accent, var(--ink)); }
.on-dark .eyebrow{ color:var(--cream-faint); }
.on-dark .eyebrow.accent{ color:var(--accent, var(--cream-hi)); }

/* ---------- reveal-on-scroll (progressive enhancement) ---------- */
.js-reveal .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--reveal-delay, 0s);
}
.js-reveal .reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .js-reveal .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- links / buttons ---------- */
.link-arrow{
  display:inline-flex; align-items:center; gap:5px;
  font-weight:500; font-size:16px; text-decoration:none;
  color:var(--accent); transition:gap .2s ease, opacity .2s ease;
}
.link-arrow:hover{ gap:8px; opacity:0.75; }
.on-dark .link-arrow{ color:var(--accent); }

.btn{
  display:inline-flex;
  align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans);
  font-weight:600; font-size:15px;
  padding:13px 26px;
  border-radius:100px;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .2s var(--ease), background .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn:active{ transform:scale(0.97); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.btn-primary{ background:var(--ink); color:var(--white); }
.btn-primary:hover{ opacity:0.82; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--grey-2); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-block{ width:100%; }
.on-dark .btn-primary{ background:var(--white); color:var(--night); }
.on-dark .btn-primary:hover{ opacity:0.85; }
.on-dark .btn-ghost{ color:var(--cream-hi); border-color:var(--night-line); }
.on-dark .btn-ghost:hover{ border-color:var(--cream-hi); }

/* ---------- nav (Apple's global bar: dark, always) ---------- */
.site-nav{
  position:sticky; top:0; z-index:80;
  height:64px;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 32px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ height:40px; width:auto; }
.brand span{ font-family:var(--sans); font-weight:700; font-size:14px; color:var(--cream-hi); letter-spacing:-0.01em; }
.brand .brand-word{
  font-family:var(--logo-font);
  font-weight:600;
  font-size:24px;
  letter-spacing:-0.01em;
  color:var(--cream-hi);
}
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; font-size:12px; font-weight:400; color:var(--cream-soft); transition:color .15s ease; }
.nav-links a:hover{ color:var(--cream-hi); }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-cta .btn-primary{ background:var(--cream-hi); color:var(--night); padding:7px 16px; font-size:12px; }
.nav-cta .btn-primary:hover{ opacity:0.85; }

/* =========================================================
   HERO — off-white, two columns: copy on the left, the frame
   itself (an actual product photo, tilted in 3D) on the right.
   ========================================================= */
.hero{ padding:100px 0 90px; background:var(--white); text-align:left; overflow:hidden; }
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,460px) 1fr;
  gap:40px;
  align-items:center;
}
.hero-copy{ max-width:480px; margin:0; }
.hero h1{
  font-size:clamp(30px,3.4vw,44px);
  letter-spacing:-0.03em;
  line-height:1.1;
  font-weight:600;
}
.hero h1 em.warm{ font-size:0.72em; display:block; margin-top:0.3em; }
.hero-sub{ font-size:clamp(16px,1.3vw,18px); max-width:42ch; margin:18px 0 0; color:var(--ink-soft); }
.hero-ctas{ display:flex; gap:24px; margin-top:28px; flex-wrap:wrap; justify-content:flex-start; align-items:center; }
.hero-ctas .btn-primary{ padding:14px 30px; }
.hero-note{ margin-top:24px; font-size:13px; color:var(--grey-3); }

/* ---- product shot: the "how the frame looks" moment — tilted in
   3D space so it reads as an angled product photo rather than a
   flat frontal screenshot sitting next to the copy. ---- */
.product-shot{
  position:relative;
  perspective:1800px;
}
.product-shot img{
  display:block;
  width:100%; height:auto; max-width:640px; margin:0 auto;
  transform:rotate3d(0.15, -1, -0.05, 20deg);
  transform-origin:50% 50%;
  filter:drop-shadow(0 50px 60px rgba(0,0,0,0.22)) drop-shadow(0 10px 18px rgba(0,0,0,0.1));
}
.product-caption{
  text-align:center; font-size:13px; color:var(--grey-3);
  margin:28px 0 0; letter-spacing:0.01em;
}

/* ---------- section shells ---------- */
section{ padding:110px 0; position:relative; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(28px,3.6vw,46px); }
.section-head p{ font-size:18px; }

.band-alt{ background:var(--grey-1); }
.band-night{ background:var(--night); color:var(--cream-hi); }
.band-night p{ color:var(--cream-soft); }
.band-night h2, .band-night h3{ color:var(--cream-hi); }
.hairline{ border-top:1px solid var(--grey-2); }

/* =========================================================
   SCROLL STORY — one product shot pinned on the right; the
   narrative scrolls past on the left, and a spotlight moves
   over the shot to match whichever step is centred in view.
   Progressive enhancement only: the .js-story rules below are
   the only thing gating the dim/spotlight effect, so with JS
   off the frame just stays fully lit and every step is fully
   readable from the start (see .story-step defaults).
   ========================================================= */
.story-scroll{ padding:100px 0; overflow:clip; }
.story-grid{
  display:grid;
  grid-template-columns:minmax(0,440px) 1fr;
  gap:64px;
  align-items:start;
}

.story-copy-col{ display:flex; flex-direction:column; }
.story-step{
  min-height:72vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:36px 0;
  opacity:1;
}
.story-step:first-child, .story-step:last-child{ min-height:56vh; }
.story-step h2{ font-size:clamp(24px,2.6vw,34px); max-width:16ch; }
.story-step p{ font-size:16.5px; max-width:42ch; }
/* Only once JS confirms it can actually drive the spotlight do the
   non-active steps dim — otherwise every step would ship half-visible
   with nothing able to bring it back to full opacity. */
.js-story .story-step{ opacity:0.32; transition:opacity .45s var(--ease); }
.js-story .story-step.is-active{ opacity:1; }

.story-visual-col{ position:sticky; top:96px; align-self:start; }
.story-stage{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,0.18));
}
.story-stage img{ width:100%; height:auto; display:block; }

/* accent per step, carried onto the stage by JS so the spotlight glow
   matches the active step's colour rather than one fixed tone */
.story-stage[data-accent="ink"]      { --spot-accent:var(--ink); }
.story-stage[data-accent="afternoon"]{ --spot-accent:var(--afternoon); }
.story-stage[data-accent="sage"]     { --spot-accent:var(--sage); }
.story-stage[data-accent="morning"]  { --spot-accent:var(--morning); }
.story-stage[data-accent="evening"]  { --spot-accent:var(--evening); }

/* the spotlight: a transparent rounded box whose huge box-shadow dims
   everything else in the (overflow:hidden) stage around it — cheaper
   and smoother to animate than a clip-path mask. */
.story-spot{
  position:absolute;
  border-radius:20px;
  opacity:0;
  pointer-events:none;
  box-shadow:
    0 0 0 9999px rgba(14,20,28,0.6),
    0 0 0 3px rgba(255,255,255,0.9),
    0 0 32px 4px color-mix(in srgb, var(--spot-accent, var(--accent)) 60%, transparent);
  transition:top .55s var(--ease), left .55s var(--ease), width .55s var(--ease), height .55s var(--ease), opacity .35s ease;
}
/* Rects measured against the shipped 1536x1024 product photo — the
   greeting + clock + weather card, the lunch reminder, the hold-to-talk
   and send-a-message buttons (with their labels — both sit further right
   and lower than the buttons alone, so the box has to clear all of it,
   not just the circles), and the family photo. */
.story-stage[data-target="clock"] .story-spot   {
  top: 18%;
  left: 10%;
  width: 18%;
  height: 33%;
  opacity: 1;
}
.story-stage[data-target="reminder"] .story-spot{
  top: 51%;
  left: 10%;
  width: 22.3%;
  height: 9%;
  opacity: 1;
}
.story-stage[data-target="icons"] .story-spot   {
  top: 65.5%;
  left: 11%;
  width: 20%;
  height: 16.5%;
  opacity: 1;
}
.story-stage[data-target="photo"] .story-spot   { top:16.8%; left:34.8%;  width:54%;   height:62%;   opacity:1; }

/* ---------- how it works — clean numbered rows ---------- */
.flow{ display:grid; gap:0; max-width:800px; margin:0 auto; }
.flow-item{ display:grid; grid-template-columns:56px 1fr; gap:22px; padding:30px 0; }
.flow-item:not(:last-child){ border-bottom:1px solid var(--grey-2); }
.flow-item .n{
  font-weight:600; font-size:15px; color:var(--grey-3);
  width:40px; height:40px; border-radius:50%; border:1px solid var(--grey-2);
  display:flex; align-items:center; justify-content:center;
}
.flow-item h3{ font-size:19px; margin-bottom:8px; font-weight:600; }
.flow-item p{ font-size:16px; margin-bottom:14px; }
.flow-item .mock{ display:inline-flex; align-items:center; gap:10px; background:var(--grey-1); border-radius:10px; padding:9px 13px; }
.flow-item .tag{ font-size:11px; letter-spacing:0.02em; font-weight:700; color:var(--sage-deep); }
.flow-item .tag.family{ color:var(--accent-deep); }
.flow-item .bubble{ background:var(--white); border:1px solid var(--grey-2); border-radius:8px; padding:6px 11px; font-size:13.5px; color:var(--ink); }

/* ---------- explore / feature grid ---------- */
.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--grey-2); border-radius:var(--radius); overflow:hidden; }
.feature-card{
  background:var(--white);
  padding:30px 26px 26px;
  display:flex; flex-direction:column;
}
.feature-card .icon{ width:44px; height:44px; border-radius:13px; background:var(--grey-1); color:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:18px; flex-shrink:0; }
.feature-card .icon svg{ width:22px; height:22px; }
.feature-card h3{ font-size:17px; font-weight:600; margin-bottom:0.45em; }
.feature-card p{ font-size:14.5px; margin:0; }

/* ---------- privacy ---------- */
.privacy{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
.privacy h2{ color:var(--cream-hi); font-size:clamp(26px,3.4vw,42px); font-weight:600; }
.privacy > div > p{ color:var(--cream-soft); max-width:48ch; font-size:17px; }
.privacy-points{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--night-line); }
.privacy-points li{ display:flex; gap:14px; align-items:flex-start; font-size:15px; color:var(--cream-hi); background:var(--night); padding:18px 4px; }
.privacy-points svg{ flex-shrink:0; margin-top:2px; color:var(--accent); }

/* ---------- testimonial ---------- */
.testimonial{ max-width:760px; margin:0 auto; text-align:center; }
.testimonial blockquote{ font-weight:500; font-size:clamp(22px,3vw,32px); color:var(--ink); margin:0 0 20px; line-height:1.4; letter-spacing:-0.015em; }
.testimonial cite{ font-style:normal; font-size:13px; color:var(--grey-3); }

/* ---------- setup strip ---------- */
.setup-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:left; position:relative; max-width:960px; margin:0 auto; }
.setup-strip::before{
  content:"";
  position:absolute; top:20px; left:calc(12.5% - 20px); right:calc(12.5% - 20px); height:1px;
  background:var(--grey-2);
}
.setup-strip .step{ padding:0 10px 0 0; position:relative; }
.setup-strip .step .n{
  font-weight:600; font-size:15px; color:var(--white);
  width:40px; height:40px; border-radius:50%; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; position:relative; z-index:1;
}
.setup-strip .step p{ font-size:15px; margin:0; }

/* ---------- signup ---------- */
.signup-card{
  max-width:600px; margin:0 auto; text-align:center;
  background:var(--white); border-radius:var(--radius-lg);
  padding:56px 48px;
}
.signup-card h2{ font-size:clamp(26px,3.2vw,38px); font-weight:600; }
.signup-card > p{ font-size:17px; max-width:44ch; margin-left:auto; margin-right:auto; }
.form-grid{ display:grid; gap:14px; margin-top:30px; text-align:left; }
.field label{ display:block; font-size:13px; color:var(--ink-soft); margin-bottom:7px; font-weight:600; }
.field input, .field select{
  width:100%; background:var(--grey-1); border:1px solid var(--grey-2); color:var(--ink);
  border-radius:10px; padding:12px 14px; font-family:var(--sans); font-size:15px;
  transition:border-color .2s ease, background .2s ease;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--accent); background:var(--white); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-msg{ margin-top:14px; font-size:14px; padding:12px 14px; border-radius:10px; text-align:left; }
.form-msg.success{ background:rgba(111,138,94,0.12); color:var(--sage-deep); }
.form-msg.error{ background:rgba(201,130,47,0.12); color:var(--accent-deep); }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }
.form-hint{ font-size:12.5px; color:var(--grey-3); margin-top:12px; }

/* ---------- faq — hairline list, no cards ---------- */
.faq{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--grey-2); }
.faq-item summary{ cursor:pointer; list-style:none; padding:24px 4px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--sans); font-weight:600; font-size:17px; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .plus{ color:var(--grey-3); font-size:22px; font-weight:300; flex-shrink:0; transition:transform .3s var(--ease); }
.faq-item[open] summary .plus{ transform:rotate(45deg); }
.faq-item .faq-body{ padding:0 4px 24px; }
.faq-item .faq-body p{ font-size:15.5px; margin:0; max-width:60ch; }

/* ---------- footer — Apple's dense, quiet legal footer ---------- */
footer{ background:var(--grey-1); color:var(--ink); padding:44px 0 22px; }
footer p{ color:var(--ink-soft); }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; padding-bottom:30px; flex-wrap:wrap; }
.footer-brand .brand span{ color:var(--ink); }
.footer-brand p{ max-width:34ch; font-size:13px; margin-top:14px; }
.footer-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.footer-col h4{ font-family:var(--sans); font-size:12px; color:var(--grey-3); font-weight:700; margin-bottom:14px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-col a{ text-decoration:none; font-size:13px; color:var(--ink-soft); transition:color .15s ease; }
.footer-col a:hover{ color:var(--ink); }
.footer-bottom{ padding-top:18px; border-top:1px solid var(--grey-2); display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--grey-3); flex-wrap:wrap; gap:10px; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{ padding:64px 0 56px; text-align:center; }
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
  .hero-copy{ max-width:560px; margin:0 auto; text-align:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-ctas{ justify-content:center; }
  .product-shot img{ transform:none; filter:drop-shadow(0 30px 40px rgba(0,0,0,0.16)); }

  /* Sticky-while-scrolling only reads as "sticky" with a second column to
     scroll past it, so below 980px the shot just sits static, above its
     steps, and every step stays fully readable without needing it. */
  .story-scroll{ padding:64px 0; }
  .story-grid{ grid-template-columns:1fr; gap:8px; }
  .story-visual-col{ position:static; order:-1; max-width:420px; margin:0 auto 40px; }
  .story-step, .js-story .story-step{ min-height:0; padding:20px 4px; opacity:1; }

  .features{ grid-template-columns:repeat(2,1fr); }
  .privacy{ grid-template-columns:1fr; padding:44px 30px; }
  .setup-strip{ grid-template-columns:repeat(2,1fr); gap:34px 20px; }
  .setup-strip::before{ display:none; }
  section{ padding:80px 0; }
}
@media (max-width:720px){
  .nav-links{ display:none; }
  .features{ grid-template-columns:1fr; }
  .footer-top{ flex-direction:column; }
  .field-row{ grid-template-columns:1fr; }
  .signup-card{ padding:40px 24px; border-radius:24px; }
}