/* ============================================================
   MARK · by northOS · marketing site
   Design language pulled from the Mark iOS app:
   near-black canvas, lowercase italic display serif, indigo
   accent, warm cream numerals, iOS sans + mono for detail.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

:root{
  /* canvas */
  --bg:        #09090b;
  --bg-soft:   #0d0c10;
  --card:      #141318;
  --card-2:    #1a191f;
  --hairline:  rgba(245,244,242,.08);
  --hairline-2:rgba(245,244,242,.05);

  /* ink */
  --ink:       #f6f4f1;
  --ink-dim:   rgba(246,244,241,.62);
  --ink-faint: rgba(246,244,241,.40);
  --ink-ghost: rgba(246,244,241,.24);

  /* accent + warmth */
  --indigo:    #5b4fe9;
  --indigo-lo: #6f63ff;
  --indigo-soft: rgba(91,79,233,.16);
  --cream:     #f3e7d6;

  /* category tints (muted) */
  --t-home:    #cf7e5e;
  --t-people:  #cda64e;
  --t-paw:     #b6906e;
  --t-leaf:    #74ab6c;
  --t-me:      #c97ea0;
  --t-car:     #6f8eb6;

  /* type */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* marketing rhythm */
  --maxw: 1180px;
  --gutter: clamp(22px, 5vw, 80px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--indigo); color:#fff; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* atmospheric purple glow, fixed to top of page */
body::before{
  content:"";
  position:fixed; inset:-20% -10% auto -10%; height:70vh;
  background:radial-gradient(60% 70% at 50% 0%, rgba(91,79,233,.20), rgba(91,79,233,.05) 40%, transparent 70%);
  pointer-events:none; z-index:0;
}

/* ---------- shared layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ position:relative; z-index:1; padding-block:clamp(80px,12vw,180px); }
.eyebrow{
  font-family:var(--mono); font-size:13px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 26px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--ink-ghost); display:inline-block; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:""; width:26px; height:1px; background:var(--ink-ghost); display:inline-block; }

.serif{ font-family:var(--serif); font-style:italic; font-weight:500; }
.disp{
  font-family:var(--serif); font-style:italic; font-weight:500;
  line-height:.98; letter-spacing:-.01em; margin:0;
  text-wrap:balance;
}
.lead{ color:var(--ink-dim); font-size:clamp(19px,1.9vw,23px); line-height:1.55; max-width:36ch; }

/* ---------- top nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(14px);
  background:linear-gradient(180deg, rgba(9,9,11,.86), rgba(9,9,11,.5) 70%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{ border-bottom-color:var(--hairline); background:rgba(9,9,11,.92); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:baseline; gap:14px; }
.brand__mark{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:27px; letter-spacing:-.01em; padding-right:4px; }
.brand__by{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
.nav__links{ display:flex; align-items:center; gap:38px; }
.nav__links a{ font-size:15.5px; color:var(--ink-dim); transition:color .2s; }
.nav__links a:hover{ color:var(--ink); }
.nav__cta{ display:inline-flex; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:16px; font-weight:550;
  padding:13px 24px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .18s, background .2s, border-color .2s, color .2s;
  white-space:nowrap;
}
.btn--primary{ background:var(--indigo); color:#fff; box-shadow:0 10px 34px -10px rgba(91,79,233,.8); }
.btn--primary:hover{ background:var(--indigo-lo); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--hairline); }
.btn--ghost:hover{ border-color:var(--ink-faint); background:rgba(255,255,255,.03); }
.btn--lg{ font-size:17px; padding:16px 30px; }
.btn .arw{ transition:transform .2s; }
.btn:hover .arw{ transform:translateX(3px); }

/* ====================================================
   HERO
   ==================================================== */
.hero{ position:relative; z-index:1; padding-top:clamp(40px,7vw,90px); padding-bottom:clamp(60px,9vw,120px); overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,70px); align-items:center; }
.hero h1{ font-size:clamp(58px,8.4vw,128px); }
.hero h1 .dot{ color:var(--indigo); }
.hero__sub{ margin:30px 0 14px; font-size:clamp(21px,2.3vw,28px); color:var(--ink); line-height:1.4; max-width:18ch; font-weight:450; }
.hero__support{ color:var(--ink-dim); font-size:18px; max-width:40ch; margin:0 0 36px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero__note{ margin-top:22px; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--ink-faint); }
.hero__stage{ position:relative; display:flex; justify-content:center; }
.hero__stage::before{
  content:""; position:absolute; width:120%; height:120%; left:-10%; top:-8%;
  background:radial-gradient(50% 50% at 55% 45%, rgba(91,79,233,.34), transparent 68%);
  filter:blur(10px); z-index:0;
}
.hero__stage .phone{ position:relative; z-index:1; }

/* ====================================================
   WHY (emotional)
   ==================================================== */
.why{ text-align:center; }
.why .disp{ font-size:clamp(40px,6.4vw,92px); }
.why .l2{ color:var(--cream); display:block; }
.why__body{ margin:42px auto 0; max-width:30ch; font-size:clamp(20px,2.2vw,26px); color:var(--ink-dim); line-height:1.55; text-wrap:pretty; }

/* ====================================================
   HOW MARK WORKS
   ==================================================== */
.how__head{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:end; margin-bottom:64px; }
.how__head h2{ font-size:clamp(38px,4.7vw,68px); }
.how__head p{ color:var(--ink-dim); margin:0; align-self:end; }
.how__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.kind{
  border:1px solid var(--hairline); border-radius:24px; padding:34px 30px 30px;
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
  min-height:340px; display:flex; flex-direction:column;
}
.kind__ico{ width:46px; height:46px; display:grid; place-items:center; margin-bottom:24px; }
.kind h3{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:34px; margin:0 0 12px; }
.kind p{ color:var(--ink-dim); margin:0 0 26px; font-size:17px; line-height:1.5; }
.kind__chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:auto; }
.tag{
  font-size:14px; color:var(--ink-dim); padding:7px 14px; border-radius:999px;
  border:1px solid var(--hairline); background:rgba(255,255,255,.02);
}

/* ====================================================
   EXAMPLE DAY
   ==================================================== */
.day__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,6vw,90px); align-items:center; }
.day__copy h2{ font-size:clamp(38px,4.8vw,70px); margin:0 0 28px; }
.day__quote{ font-size:clamp(20px,2.2vw,27px); line-height:1.5; color:var(--ink); max-width:24ch; }
.day__quote .soft{ color:var(--ink-dim); }
.day__sig{ margin-top:30px; font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--ink-faint); }
.day__card-wrap{ display:flex; justify-content:center; }

/* the "may 30" day card (standalone, not in a phone) */
.daycard{
  width:min(440px,100%); border:1px solid var(--hairline); border-radius:26px;
  background:linear-gradient(180deg, rgba(91,79,233,.10), rgba(20,19,24,.7));
  padding:34px 34px 30px; box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.daycard__date{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:42px; margin:0 0 4px; }
.daycard__dow{ font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); }
.daycard__list{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.daycard__list li{ display:flex; align-items:center; gap:14px; font-size:18px; }
.daycard__list .ck{ width:22px; height:22px; border-radius:50%; background:var(--indigo-soft); color:var(--indigo-lo); display:grid; place-items:center; flex:none; }
.daycard__moment{ margin-top:22px; padding-top:22px; border-top:1px solid var(--hairline); display:flex; align-items:center; gap:12px; color:var(--ink-dim); font-size:16px; }
.daycard__photo{ margin-top:18px; height:150px; border-radius:16px; overflow:hidden; position:relative; }

/* photo placeholder (memory) */
.memph{ position:relative; overflow:hidden; background:#15141a; background-size:cover; background-position:center; }
.memph::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(115deg, rgba(91,79,233,.30), rgba(207,126,94,.22) 55%, rgba(201,166,78,.18)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 11px);
}
/* when a real photo is set, swap the stripe overlay for a soft bottom scrim */
.memph--photo::before{
  background:linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,0) 58%) !important;
}
.memph__cap{
  position:absolute; left:0; right:0; bottom:0; padding:10px 13px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:rgba(255,255,255,.78);
  background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);
}

/* ====================================================
   GALLERY
   ==================================================== */
.gal__head{ text-align:center; margin-bottom:60px; }
.gal__head h2{ font-size:clamp(38px,4.8vw,72px); margin:0 auto; max-width:16ch; }
.gal__rail{
  display:flex; gap:34px; overflow-x:auto; padding:10px 0 40px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.gal__rail::-webkit-scrollbar{ display:none; }
.gal__item{ scroll-snap-align:center; flex:none; display:flex; flex-direction:column; align-items:center; gap:18px; }
.gal__label{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.gal__hint{ text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--ink-ghost); }

/* ====================================================
   CLOSING / SIGNUP
   ==================================================== */
.close{ text-align:center; }
.close .disp{ font-size:clamp(44px,7vw,108px); }
.close .l2{ color:var(--indigo-lo); }
.close__body{ margin:34px auto 0; max-width:30ch; color:var(--ink-dim); font-size:clamp(19px,2vw,24px); line-height:1.5; }
.signup{ margin:48px auto 0; max-width:460px; }
.signup__row{ display:flex; gap:10px; padding:7px 7px 7px 22px; border:1px solid var(--hairline); border-radius:999px; background:rgba(255,255,255,.03); transition:border-color .25s; }
.signup__row:focus-within{ border-color:var(--indigo); }
.signup__row input{
  flex:1; background:transparent; border:0; outline:0; color:var(--ink);
  font-family:var(--sans); font-size:16px; min-width:0;
}
.signup__row input::placeholder{ color:var(--ink-faint); }
.signup__note{ margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-faint); }
.signup__ok{ display:none; margin-top:26px; font-family:var(--serif); font-style:italic; font-size:24px; color:var(--cream); }
.signup.done .signup__row, .signup.done .signup__note{ display:none; }
.signup.done .signup__ok{ display:block; }

/* ====================================================
   FOOTER
   ==================================================== */
.foot{ position:relative; z-index:1; border-top:1px solid var(--hairline); padding-block:64px 50px; }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; align-items:start; }
.foot__brand .brand{ margin-bottom:16px; }
.foot__blurb{ color:var(--ink-dim); font-size:15.5px; max-width:34ch; line-height:1.6; margin:0; }
.foot__col h4{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 18px; font-weight:500; }
.foot__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.foot__col a{ color:var(--ink-dim); font-size:15.5px; }
.foot__col a:hover{ color:var(--ink); }
.foot__base{ margin-top:54px; padding-top:26px; border-top:1px solid var(--hairline-2); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-faint); }

/* ====================================================
   PHONE + APP SCREEN RECREATIONS
   Authored at a 322px screen; scale via --pscale.
   ==================================================== */
.phone{
  --pw:322px; --ph:696px;
  width:calc(var(--pw) + 22px);
  transform:scale(var(--pscale,1)); transform-origin:top center;
}
.phone__frame{
  position:relative; width:calc(var(--pw) + 22px); height:calc(var(--ph) + 22px);
  background:#000; border-radius:54px; padding:11px;
  box-shadow:0 0 0 2px #232227, 0 50px 110px -40px rgba(0,0,0,.95), 0 0 0 11px #050505;
}
.phone__screen{
  position:relative; width:var(--pw); height:var(--ph); border-radius:43px; overflow:hidden;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.35;
}
.island{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:88px; height:25px; background:#000; border-radius:14px; z-index:30;
}

/* status bar */
.sb{
  position:absolute; top:0; left:0; right:0; height:46px; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px 0; pointer-events:none;
}
.sb__time{ font-weight:650; font-size:15px; letter-spacing:.01em; }
.sb__icons{ display:flex; align-items:center; gap:6px; }
.sb__icons svg{ display:block; }

/* the scrollable app body (clipped by screen) */
.app{ position:absolute; inset:0; padding:54px 22px 0; overflow:hidden; }
.app--sheet{ padding-top:46px; }

.ah{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:50px; line-height:1; margin:0; letter-spacing:-.01em; }
.ah--sm{ font-size:42px; }
.asub{ color:var(--ink-faint); font-size:16px; margin:8px 0 0; }
.amono{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }

.toprow{ display:flex; align-items:flex-start; justify-content:space-between; }
.avatar{
  width:46px; height:46px; border-radius:50%; flex:none;
  background:url('https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?auto=format&fit=crop&w=160&q=80') center/cover, radial-gradient(120% 120% at 30% 20%, #3a3550, #1b1a2b);
  display:grid; place-items:center; font-family:var(--serif); font-style:italic;
  font-size:0; color:transparent; border:1px solid rgba(255,255,255,.12);
}

/* segmented control */
.seg{ display:flex; gap:6px; background:rgba(255,255,255,.05); border-radius:999px; padding:5px; }
.seg__o{ flex:1; text-align:center; padding:10px 0; border-radius:999px; font-size:15px; color:var(--ink-dim); }
.seg__o--on{ background:#f4f1ec; color:#111; font-weight:600; }

/* app pills/chips */
.pillrow{ display:flex; gap:9px; overflow:hidden; }
.pill{ font-size:14.5px; padding:9px 16px; border-radius:999px; border:1px solid var(--hairline); color:var(--ink-dim); white-space:nowrap; display:inline-flex; align-items:center; gap:7px; }
.pill--on{ background:#f4f1ec; color:#111; font-weight:600; border-color:transparent; }
.pill .dotc{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.achip{ font-size:13.5px; padding:7px 13px; border-radius:999px; border:1px solid var(--hairline); color:var(--ink-dim); }

/* app cards */
.acard{ background:var(--card); border:1px solid var(--hairline-2); border-radius:20px; padding:18px; }
.acard--ghost{ background:rgba(255,255,255,.025); }

/* list rows */
.lrow{ display:flex; align-items:center; gap:13px; padding:12px 16px; background:var(--card); border:1px solid var(--hairline-2); border-radius:16px; }
.lrow__ic{ width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; }
.lrow__t{ font-size:17px; font-weight:600; }
.lrow__m{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); margin-top:3px; display:flex; align-items:center; gap:6px; }
.lrow__r{ margin-left:auto; font-family:var(--mono); font-size:15px; color:var(--t-me); }
/* small indigo flame indicator */
.flame-mini{ color:var(--indigo-lo); flex:none; }
/* summary line ("4 rituals to tend · 2 tasks to tend") */
.tend{ display:flex; gap:16px; align-items:center; margin:20px 2px 6px; font-size:13px; color:var(--ink-dim); white-space:nowrap; }
.tend__item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.tend__item b{ color:var(--ink); font-weight:700; }
.tend__ic{ flex:none; display:grid; place-items:center; }
.tend__ic svg{ width:15px; height:15px; }

/* search field */
.search{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:14px; background:rgba(255,255,255,.05); color:var(--ink-faint); font-size:15px; }

/* big number gradient card (patterns) */
.numcard{
  border-radius:22px; padding:24px; position:relative; overflow:hidden;
  background:radial-gradient(120% 120% at 80% 0%, rgba(91,79,233,.42), rgba(60,30,40,.5) 60%, rgba(22,21,26,.9));
  border:1px solid var(--hairline-2);
}
.numcard__k{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.numcard__num{ font-family:var(--serif); font-style:italic; font-weight:500; color:var(--cream); font-size:118px; line-height:.85; }
.numcard__row{ display:flex; align-items:flex-end; gap:14px; margin:6px 0 2px; }
.numcard__lab{ font-size:21px; color:var(--cream); opacity:.9; line-height:1.1; }
.numcard__sub{ color:rgba(255,255,255,.55); font-size:15px; margin-top:18px; }

/* today's page bar */
.tpage{ display:flex; align-items:center; gap:14px; padding:14px 0; }
.tpage__t{ font-size:18px; font-weight:600; }
.tpage__s{ color:var(--ink-faint); font-size:14px; margin-top:2px; }
.tpage__thumbs{ margin-left:auto; display:flex; }
.tpage__thumbs span{ width:34px; height:34px; border-radius:8px; margin-left:-8px; border:2px solid var(--bg); }

/* mark-one big options */
.markopt{ border:1px solid var(--hairline-2); border-radius:20px; padding:20px; background:rgba(255,255,255,.02); }
.markopt__head{ display:flex; align-items:center; gap:13px; }
.markopt__ico{ width:38px; height:38px; display:grid; place-items:center; flex:none; }
.markopt h3{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:26px; line-height:1.05; margin:0; white-space:nowrap; }
.markopt p{ color:var(--ink-faint); font-size:15px; margin:12px 0 16px; }
.markopt__chips{ display:flex; flex-wrap:wrap; gap:8px; }

/* fab + tabbar */
.fab{
  position:absolute; right:20px; bottom:96px; width:60px; height:60px; border-radius:50%;
  background:var(--indigo); display:grid; place-items:center; z-index:25;
  box-shadow:0 14px 34px -8px rgba(91,79,233,.9);
}
.tabbar{
  position:absolute; left:0; right:0; bottom:0; height:84px; z-index:24;
  display:flex; justify-content:space-around; align-items:flex-start; padding-top:12px;
  background:linear-gradient(0deg, var(--bg) 60%, transparent);
  border-top:1px solid var(--hairline-2);
}
.tab{ display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--ink-faint); font-size:12px; }
.tab--on{ color:var(--ink); }
.tab__dot{ width:4px; height:4px; border-radius:50%; background:var(--indigo); margin-top:1px; opacity:0; }
.tab--on .tab__dot{ opacity:1; }

.flame-ind{ color:var(--indigo-lo); }
.mood{ font-size:17px; }

/* calendar mini (journal) */
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-top:14px; }
.cal__dow{ text-align:center; font-family:var(--mono); font-size:11px; color:var(--ink-faint); }
.cal__d{ aspect-ratio:1; border-radius:9px; border:1px solid var(--hairline-2); display:grid; place-items:center; font-family:var(--mono); font-size:13px; color:var(--ink-dim); position:relative; overflow:hidden; background-size:cover; background-position:center; }
.cal__d--on{ border-color:var(--indigo); }
.cal__d span{ position:relative; z-index:1; }
.cal__d--photo span{ color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.95); }
.cal__d--photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,.05)); }

/* small inline check / glyphs */
.ico-line{ stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 1000px){
  .hero__grid{ grid-template-columns:1fr; gap:50px; }
  .hero__copy{ text-align:center; }
  .hero__sub, .hero__support{ margin-left:auto; margin-right:auto; }
  .hero__cta{ justify-content:center; }
  .how__grid{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; }
  .how__head{ grid-template-columns:1fr; gap:18px; }
  .how__head p{ align-self:start; }
  .day__grid{ grid-template-columns:1fr; gap:46px; }
  .day__copy{ text-align:center; }
  .day__quote{ margin-inline:auto; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .foot__brand{ grid-column:1 / -1; }
}
@media (max-width: 720px){
  body{ font-size:17px; }
  .nav__links{ display:none; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 460px){
  .foot__grid{ grid-template-columns:1fr; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* reveal: content is always visible (no animation-timeline dependency,
   so it never sticks hidden in background/offscreen renders) */
.reveal{ opacity:1; transform:none; }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   THEME TOGGLE (sun / moon) — lives in the nav
   ============================================================ */
.nav__right{ display:flex; align-items:center; gap:14px; }
.theme-toggle{
  all:unset; cursor:pointer; box-sizing:border-box;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; flex:none;
  border:1px solid var(--hairline); color:var(--ink-dim);
  transition:color .2s, border-color .2s, background .2s, transform .2s;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--ink-faint); transform:translateY(-1px); }
.theme-toggle svg{ display:block; }
.theme-toggle .t-moon{ display:none; }
.theme-toggle .t-sun{ display:block; }
:root[data-theme="light"] .theme-toggle .t-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .t-moon{ display:block; }

/* ============================================================
   LIGHT THEME · "a life, well tended" in daylight
   Warm paper canvas, ink the colour of strong coffee, the same
   indigo brand accent, terracotta for emotional emphasis.
   Phone mockups deliberately stay dark (see .phone re-pin below).
   ============================================================ */
:root[data-theme="light"]{
  --bg:        #f6f1e7;   /* warm paper */
  --bg-soft:   #fbf7f0;
  --card:      #ffffff;
  --card-2:    #fbf6ee;
  --hairline:  rgba(58,42,28,.13);
  --hairline-2:rgba(58,42,28,.07);

  --ink:       #2b2218;   /* warm near-black */
  --ink-dim:   rgba(43,34,24,.66);
  --ink-faint: rgba(43,34,24,.46);
  --ink-ghost: rgba(43,34,24,.24);

  --indigo:    #c2683f;   /* Mark orange — the light-theme accent */
  --indigo-lo: #a9532e;   /* deeper orange for hover / links / numerals */
  --indigo-soft: rgba(194,104,63,.13);
  --cream:     #a9532e;   /* warm rust for emotional emphasis */
}

/* warm sunrise glow at the top instead of the purple haze */
:root[data-theme="light"] body::before{
  background:radial-gradient(60% 70% at 50% 0%, rgba(244,182,120,.34), rgba(231,143,99,.12) 42%, transparent 72%);
}

/* nav glass turns to warm paper */
:root[data-theme="light"] .nav{
  background:linear-gradient(180deg, rgba(246,241,231,.9), rgba(246,241,231,.5) 70%, transparent);
}
:root[data-theme="light"] .nav.scrolled{ background:rgba(246,241,231,.95); }

/* buttons */
:root[data-theme="light"] .btn--primary{ box-shadow:0 12px 32px -12px rgba(194,104,63,.5); }
:root[data-theme="light"] .btn--ghost:hover{ background:rgba(43,34,24,.04); }

/* "how" cards become bright paper cards with a soft lift */
:root[data-theme="light"] .kind{
  background:linear-gradient(180deg,#ffffff,#fdf9f2);
  box-shadow:0 26px 60px -42px rgba(58,42,28,.5);
}
:root[data-theme="light"] .tag{ background:#fff; }

/* the example day card */
:root[data-theme="light"] .daycard{
  background:linear-gradient(180deg, rgba(194,104,63,.08), #ffffff 60%);
  box-shadow:0 44px 90px -54px rgba(58,42,28,.6);
}

/* signup field */
:root[data-theme="light"] .signup__row{ background:#fff; }

/* about.html — bright build cards */
:root[data-theme="light"] .build__card{
  background:linear-gradient(180deg,#ffffff,#fdf9f2) !important;
  box-shadow:0 22px 54px -42px rgba(58,42,28,.5);
}

/* privacy.html note card */
:root[data-theme="light"] .pv-note{ background:rgba(194,104,63,.07); }

/* ----- LIGHT THEME phones: warm paper screens + Mark-orange accent -----
   In daylight the device becomes a pale ceramic shell and the screen
   turns to the same warm paper as the page. The accent (var --indigo)
   is the Mark orange, inherited from the light :root above. */
:root[data-theme="light"] .phone__frame{
  background:#e7ddcf;
  box-shadow:0 0 0 2px #d8cebd, 0 44px 100px -46px rgba(58,42,28,.5), 0 0 0 11px #f1ebe0;
}
:root[data-theme="light"] .island{ background:#1c1712; }
:root[data-theme="light"] .phone{
  --bg:#fbf7f0; --bg-soft:#ffffff; --card:#ffffff; --card-2:#fbf6ee;
  --hairline:rgba(58,42,28,.12); --hairline-2:rgba(58,42,28,.07);
  --ink:#2b2218; --ink-dim:rgba(43,34,24,.66);
  --ink-faint:rgba(43,34,24,.46); --ink-ghost:rgba(43,34,24,.24);
  --indigo-lo:#a9532e; --cream:#a9532e;
}

/* status-bar glyphs were white for the dark screen — darken on paper */
:root[data-theme="light"] .sb svg path[stroke="#fff"]{ stroke:#2b2218; }
:root[data-theme="light"] .sb svg [fill="#fff"]{ fill:#2b2218; }
:root[data-theme="light"] .sb svg [fill="rgba(255,255,255,.4)"]{ fill:rgba(43,34,24,.28); }
:root[data-theme="light"] .sb svg [stroke="rgba(255,255,255,.5)"]{ stroke:rgba(43,34,24,.4); }
:root[data-theme="light"] .sb svg [fill="rgba(255,255,255,.5)"]{ fill:rgba(43,34,24,.35); }

/* on-paper surfaces that were tinted-white in the dark app */
:root[data-theme="light"] .seg,
:root[data-theme="light"] .search{ background:rgba(43,34,24,.05); }
:root[data-theme="light"] .seg__o--on,
:root[data-theme="light"] .pill--on{ background:#2b2218; color:#fbf7f0; }
:root[data-theme="light"] .markopt{ background:#fff; }
:root[data-theme="light"] .app--sheet{ background:#fbf7f0 !important; }
:root[data-theme="light"] .app > button{ background:rgba(43,34,24,.06) !important; }
:root[data-theme="light"] .app > button [stroke="#fff"]{ stroke:#2b2218; }
:root[data-theme="light"] .markopt__ico [stroke="#fff"]{ stroke:#2b2218; }

/* the big "patterns" number card → warm paper card */
:root[data-theme="light"] .numcard{
  background:radial-gradient(120% 120% at 80% 0%, rgba(194,104,63,.20), rgba(194,104,63,.06) 58%, #ffffff);
}
:root[data-theme="light"] .numcard__k,
:root[data-theme="light"] .numcard__sub{ color:var(--ink-faint); }
:root[data-theme="light"] .numcard__lab{ color:var(--ink); }

/* warm shadow + glow accents */
:root[data-theme="light"] .fab{ box-shadow:0 14px 34px -10px rgba(194,104,63,.7); }
:root[data-theme="light"] .hero__stage::before{
  background:radial-gradient(50% 50% at 55% 45%, rgba(231,143,99,.30), transparent 68%);
}