/* =========================================================
   FrameOfJoy — Design tokens, v2
   Grounded in real dementia-orientation design conventions
   (large, plain, high-contrast type; a "day-part" colour code
   for morning / afternoon / evening / night, the way physical
   orientation clocks used in memory care are built) rather
   than generic warm-frame decoration.

   Type: Atkinson Hyperlegible — designed by the Braille
   Institute specifically for readability for people with low
   vision and cognitive differences. Used here for everything,
   with a single restrained serif (Source Serif 4, italic only)
   for the handful of lines that need a human, spoken quality —
   the testimonial and one hero line.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@1,8..60,500&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  /* base surfaces — calm daylight, not screen-glow */
  --paper: #F6F1E6;
  --paper-deep: #ECE4D2;
  --paper-line: rgba(46,42,61,0.14);

  /* ink */
  --ink: #2E2A3D;
  --ink-soft: rgba(46,42,61,0.7);
  --ink-faint: rgba(46,42,61,0.5);

  /* day-part system — the site's throughline */
  --morning: #F0B93F;
  --afternoon: #C97A3E;
  --evening: #7E6C9C;
  --night: #2E2A3D;
  --night-panel: #262138;

  /* supporting accents */
  --sage: #6F8A5E;
  --sage-deep: #4F6642;
  --cream-hi: #FBF8EF;

  --serif: 'Source Serif 4', ui-serif, Georgia, serif;
  --sans: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --max: 1160px;
  --radius: 22px;
}

*,*::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(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

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

h1,h2,h3,h4{
  font-family:var(--sans);
  font-weight:700;
  margin:0 0 0.42em;
  letter-spacing:-0.01em;
  color:var(--ink);
  line-height:1.18;
}

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

em.warm{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  color:var(--afternoon);
}

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--sage-deep);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--sage-deep); display:inline-block; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans);
  font-weight:700; font-size:15.5px;
  padding:14px 26px;
  border-radius:100px;
  text-decoration:none;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:focus-visible{ outline:2.5px solid var(--night); outline-offset:3px; }
.btn-primary{ background:var(--ink); color:var(--cream-hi); }
.btn-primary:hover{ background:var(--night-panel); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--paper-line); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-1px); }
.btn-block{ width:100%; }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(246,241,230,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--paper-line);
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 28px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ height:32px; width:auto; border-radius:6px; }
.brand span{ font-family:var(--sans); font-weight:700; font-size:19px; color:var(--ink); }
.nav-links{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-soft); transition:color .15s ease; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:16px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding:96px 0 60px; }
.hero .wrap{ max-width:760px; text-align:left; }
.hero h1{ font-size:clamp(32px,4.6vw,50px); }
.hero-sub{ font-size:18px; max-width:52ch; color:var(--ink-soft); }
.hero-ctas{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.hero-note{ margin-top:20px; font-size:13.5px; color:var(--ink-faint); }

/* ---------- section shells ---------- */
section{ padding:84px 0; position:relative; }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(26px,3.2vw,36px); }

.band-deep{ background:var(--paper-deep); }
.band-line{ border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); }
.band-night{ background:var(--night-panel); color:var(--cream-hi); }
.band-night p{ color:rgba(251,248,239,0.72); }
.band-night h2, .band-night h3{ color:var(--cream-hi); }

/* =========================================================
   STORY — scroll-linked frame preview (signature element)
   Left column: narrative steps, each naming a real difficulty
   and how the frame answers it. Right column: a sticky device
   mockup of the frame's actual screen (matched to the product
   screenshot) that spotlights the relevant element as each
   step scrolls into view. Works without JS too — the device
   simply stays on its default, fully-lit state.
   ========================================================= */
.story{ padding-top:56px; }
.story-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:64px;
  align-items:start;
}
.story-steps{ display:flex; flex-direction:column; }
.story-step{
  min-height:64vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:34px 0;
  opacity:1;
  transition:opacity .45s ease;
}
.story.js-enhanced .story-step{ opacity:0.35; }
.story.js-enhanced .story-step.is-current{ opacity:1; }
.story-step:first-child{ min-height:40vh; }
.story-step:last-child{ min-height:50vh; }
.story-step .eyebrow{ color:var(--accent, var(--sage-deep)); }
.story-step .eyebrow::before{ background:var(--accent, var(--sage-deep)); }
.story-step h3{ font-size:clamp(21px,2.4vw,27px); max-width:22ch; }
.story-step p{ font-size:15.5px; max-width:46ch; }

.story-device-col{ position:sticky; top:96px; }

/* ---- device mockup ---- */
.device{ max-width:460px; margin:0 auto; }
.device__bezel{
  background:var(--night-panel);
  border-radius:34px;
  padding:16px;
  box-shadow:0 40px 70px -24px rgba(46,42,61,0.5);
}
.device__screen{
  position:relative;
  aspect-ratio:16/10;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(180deg, #84C9E4 0%, #A9DAEE 55%, #D6EBF6 100%);
  font-family:var(--sans);
}
.device__screen .el{
  position:absolute;
  transition:opacity .5s ease, filter .5s ease, transform .5s ease, box-shadow .5s ease;
}
.device__screen[data-spotlight]:not([data-spotlight="full"]) .el{
  opacity:0.32;
  filter:saturate(0.55);
}
.device__screen[data-spotlight="clock"] .el-clock,
.device__screen[data-spotlight="clock"] .el-sun{ opacity:1; filter:none; transform:scale(1.055); z-index:3; }
.device__screen[data-spotlight="photo"] .el-photo{ opacity:1; filter:none; transform:scale(1.035); z-index:3; }
.device__screen[data-spotlight="reminder"] .el-reminder{ opacity:1; filter:none; transform:scale(1.04); z-index:3; }
.device__screen[data-spotlight="icons"] .el-icons{ opacity:1; filter:none; transform:scale(1.08); z-index:3; }

.el-clock{
  right:4%; top:38%;
  background:rgba(58,79,88,0.72);
  color:#fff;
  border-radius:50%;
  width:29%; aspect-ratio:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  box-shadow:0 10px 20px rgba(20,30,35,0.18);
}
.el-clock .time{ font-size:clamp(15px,3vw,20px); font-weight:700; line-height:1.1; }
.el-clock .date{ font-size:clamp(8px,1.4vw,10px); opacity:0.82; margin-top:2px; padding:0 8px; }
.el-clock .weather{ font-size:clamp(8.5px,1.5vw,10.5px); opacity:0.92; margin-top:5px; display:flex; align-items:center; gap:3px; }

.el-sun{ right:8%; top:6%; width:13%; aspect-ratio:1; }
.sun-icon{ position:relative; display:block; width:100%; height:100%; }
.sun-icon::before{
  content:""; position:absolute; inset:-38%;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg, #EBA943 0deg 16deg, transparent 16deg 32deg);
}
.sun-icon::after{
  content:""; position:absolute; inset:6%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #F7D77A, #F0B93F 72%);
}

.el-greeting{
  left:50%; top:5%;
  transform:translateX(-50%);
  text-align:center;
  color:#1A2B33;
  white-space:nowrap;
}
.el-greeting span{ display:block; font-size:clamp(13px,2.3vw,18px); font-weight:700; line-height:1.25; }
.el-greeting strong{ display:block; font-size:clamp(13px,2.3vw,18px); font-weight:700; }

.el-reminder{
  left:50%; top:24%;
  transform:translateX(-50%);
  background:rgba(59,79,88,0.82);
  border-radius:14px;
  padding:10px 12px 10px 16px;
  display:flex; align-items:center; gap:12px;
  white-space:nowrap;
}
.el-reminder__text{ display:flex; flex-direction:column; color:#EAF4F8; }
.el-reminder__text .t{ font-size:clamp(10px,1.9vw,13px); font-weight:600; }
.el-reminder__text .s{ font-size:clamp(8px,1.5vw,10px); opacity:0.75; }
.el-reminder__done{
  background:#5FAE6E; color:#fff; font-weight:700;
  font-size:clamp(8.5px,1.6vw,11px);
  padding:6px 12px; border-radius:100px;
}

.el-photo{ left:4%; bottom:5%; width:33%; }
.el-photo__img{
  aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #9FBF8A, #4F6642 75%);
  box-shadow:0 12px 26px rgba(20,30,20,0.22);
  position:relative;
  overflow:hidden;
}
.el-photo__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(10,15,10,0.65) 100%);
}
.el-photo__label{
  position:absolute; left:9%; right:9%; bottom:8%;
  color:#fff; font-weight:700;
  font-size:clamp(7px,1.3vw,9.5px);
  line-height:1.25;
  text-align:center;
  text-shadow:0 1px 4px rgba(0,0,0,0.45);
}

.el-icons{
  left:50%; bottom:6%;
  transform:translateX(-50%);
  display:flex; gap:9px;
}
.icon-btn{
  width:15vw; max-width:34px; aspect-ratio:1;
  border-radius:50%;
  background:rgba(180,210,222,0.55);
  display:flex; align-items:center; justify-content:center;
}
.icon-btn svg{ width:52%; height:52%; }
.icon-mic svg{ color:#6B5C79; }
.icon-heart{ background:rgba(255,255,255,0.85); }
.icon-heart svg{ color:#FB446B; }

.device__caption{
  text-align:center; font-size:12.5px; color:var(--ink-faint);
  margin-top:16px; font-family:var(--mono); letter-spacing:0.01em;
  max-width:340px; margin-left:auto; margin-right:auto;
}

/* ---------- how it works ---------- */
.flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative; }
.flow::before{
  content:"";
  position:absolute; top:23px; left:9%; right:9%; height:1px;
  background:repeating-linear-gradient(to right, var(--paper-line) 0 8px, transparent 8px 16px);
}
.flow-step{ position:relative; }
.flow-step .dot{
  width:46px; height:46px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--ink);
  color:var(--ink); font-family:var(--mono); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px; position:relative; z-index:1;
}
.flow-step h3{ font-size:19px; }
.flow-step p{ font-size:15px; }

.mock{ margin-top:16px; background:var(--paper-deep); border:1px solid var(--paper-line); border-radius:14px; padding:16px; font-size:13.5px; }
.mock .row{ display:flex; align-items:flex-start; gap:10px; }
.mock .bubble{ background:var(--paper); border:1px solid var(--paper-line); border-radius:10px; padding:8px 12px; color:var(--ink); }
.mock .tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage-deep); flex-shrink:0; padding-top:8px; }
.mock .tag.family{ color:var(--afternoon); }

/* ---------- feature grid ---------- */
.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.feature-card{ background:var(--paper); border:1px solid var(--paper-line); border-radius:var(--radius); padding:30px 26px 26px; }
.feature-card .icon{ width:52px; height:52px; border-radius:14px; background:var(--paper-deep); color:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.feature-card .icon svg{ width:24px; height:24px; }
.feature-card h3{ font-size:18px; }
.feature-card p{ font-size:14.5px; margin:0; }

/* ---------- privacy ---------- */
.privacy{
  background:var(--night-panel);
  border-radius:28px;
  padding:56px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
}
.privacy h2{ color:var(--cream-hi); font-size:clamp(26px,3vw,34px); }
.privacy > div > p{ color:rgba(251,248,239,0.72); max-width:48ch; }
.privacy-points{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.privacy-points li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--cream-hi); }
.privacy-points svg{ flex-shrink:0; margin-top:3px; color:var(--morning); }

/* ---------- testimonial ---------- */
.testimonial{ max-width:720px; margin:0 auto; text-align:center; padding:52px 48px; background:var(--paper-deep); border:1px solid var(--paper-line); border-radius:var(--radius); }
.testimonial blockquote{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(19px,2.4vw,24px); color:var(--ink); margin:0 0 20px; line-height:1.55; }
.testimonial cite{ font-style:normal; font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em; color:var(--sage-deep); }

/* ---------- setup strip ---------- */
.setup-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.setup-strip .step{ padding:0 12px; }
.setup-strip .step .n{ font-family:var(--sans); font-weight:700; font-size:30px; color:var(--afternoon); margin-bottom:6px; }
.setup-strip .step p{ font-size:14.5px; margin:0; }

/* ---------- signup ---------- */
.signup{ background:var(--paper-deep); border:1px solid var(--paper-line); border-radius:28px; padding:56px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.signup h2{ font-size:clamp(26px,3vw,34px); }
.form-grid{ display:grid; gap:14px; }
.field label{ display:block; font-size:13px; color:var(--ink-soft); margin-bottom:6px; font-weight:500; }
.field input, .field select{ width:100%; background:var(--paper); border:1px solid var(--paper-line); color:var(--ink); border-radius:10px; padding:12px 14px; font-family:var(--sans); font-size:15px; }
.field input:focus, .field select:focus{ outline:2.5px solid var(--ink); outline-offset:1px; border-color:var(--ink); }
.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; }
.form-msg.success{ background:rgba(111,138,94,0.16); color:var(--sage-deep); border:1px solid rgba(111,138,94,0.4); }
.form-msg.error{ background:rgba(201,122,62,0.14); color:var(--afternoon); border:1px solid rgba(201,122,62,0.4); }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }
.form-hint{ font-size:12.5px; color:var(--ink-faint); margin-top:12px; }

/* ---------- faq ---------- */
.faq{ max-width:760px; margin:0 auto; display:grid; gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); border-radius:var(--radius); overflow:hidden; }
.faq-item{ background:var(--paper); }
.faq-item summary{ cursor:pointer; list-style:none; padding:22px 26px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--sans); font-weight:700; font-size:16.5px; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .plus{ font-family:var(--mono); color:var(--afternoon); font-size:20px; flex-shrink:0; transition:transform .2s ease; }
.faq-item[open] summary .plus{ transform:rotate(45deg); }
.faq-item .faq-body{ padding:0 26px 24px; }
.faq-item .faq-body p{ font-size:15px; margin:0; }

/* ---------- footer ---------- */
footer{ background:var(--night-panel); color:var(--cream-hi); padding:56px 0 30px; }
footer p{ color:rgba(251,248,239,0.65); }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(251,248,239,0.14); flex-wrap:wrap; }
.footer-brand .brand span{ color:var(--cream-hi); }
.footer-brand p{ max-width:34ch; font-size:14px; }
.footer-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.footer-col h4{ font-family:var(--sans); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(251,248,239,0.55); 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:14.5px; color:rgba(251,248,239,0.72); }
.footer-col a:hover{ color:var(--cream-hi); }
.footer-bottom{ padding-top:22px; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:rgba(251,248,239,0.55); flex-wrap:wrap; gap:10px; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .features{ grid-template-columns:repeat(2,1fr); }
  .flow{ grid-template-columns:1fr; }
  .flow::before{ display:none; }
  .privacy{ grid-template-columns:1fr; padding:40px 28px; }
  .signup{ grid-template-columns:1fr; padding:36px 26px; }
  .setup-strip{ grid-template-columns:repeat(2,1fr); gap:30px 20px; }

  .story-grid{ grid-template-columns:1fr; gap:0; }
  .story-device-col{ position:static; margin-bottom:40px; }
  .story-step{ min-height:0; padding:20px 0; }
  .story.js-enhanced .story-step{ opacity:1; }
}
@media (max-width:720px){
  .nav-links{ display:none; }
  .features{ grid-template-columns:1fr; }
  .footer-top{ flex-direction:column; }
  .field-row{ grid-template-columns:1fr; }
  .testimonial{ padding:40px 26px; }
}