/* ==========================================================================
   My Important Dates — theme layer (DESIGN.md v1.0, Option A typography)
   Loaded after each page's own <style>, so it re-skins without touching
   layout or JavaScript. To roll back: remove the <link> to this file.
   ========================================================================== */

:root{
  /* Design tokens */
  --mid-primary:#87526A; --mid-primary-hover:#6F4157; --mid-primary-active:#5C3548;
  --mid-brand:#A9758A; --mid-blush:#F6ECEF; --mid-blush-strong:#EBD7DE; --mid-gold:#C9A15B;
  --mid-ink:#2B2226; --mid-body:#4A3F44; --mid-muted:#6F6368;
  --mid-hairline:#EADFDF; --mid-hairline-strong:#D9CACC;
  --mid-canvas:#FBF7F3; --mid-card:#FFFFFF; --mid-sunk:#F4EEE8;
  --mid-success:#5E7E68; --mid-success-tint:#E7EFE9; --mid-warning:#A86A1F; --mid-warning-tint:#F8EEDD;
  --mid-error:#B3261E; --mid-error-tint:#F9E3E1;
  --mid-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --mid-sans:'DM Sans',-apple-system,system-ui,'Segoe UI',Roboto,sans-serif;
  --mid-shadow-card:0 1px 2px rgba(43,34,38,.04),0 4px 16px rgba(43,34,38,.06);
  --mid-shadow-raised:0 2px 4px rgba(43,34,38,.05),0 12px 32px rgba(43,34,38,.10);
  --mid-focus:0 0 0 3px #FBF7F3,0 0 0 5px #87526A;

  /* Map the site's existing variable names onto the tokens */
  --paper:#FFFFFF;
  --card:#FFFFFF;
  --ink:var(--mid-ink);
  --ink-soft:var(--mid-body);
  --mauve:var(--mid-brand);
  --plum:var(--mid-primary);
  --blush:var(--mid-blush);
  --evergreen:var(--mid-primary);
  --evergreen-dark:var(--mid-primary-hover);
  --marigold:var(--mid-brand);
  --marigold-dark:var(--mid-primary);
  --rose:var(--mid-error);
  --kraft:var(--mid-brand);
  --kraft-dark:var(--mid-primary);
  --gift-card-bg:#FFFFFF;
  --gift-card-text:var(--mid-ink);
  --gift-card-text-soft:var(--mid-muted);
  --line:var(--mid-hairline);
  --shadow:var(--mid-shadow-raised);
}

/* ---------- Base ---------- */
body{
  background-color:var(--mid-canvas);
  background-image:none;
  color:var(--mid-ink);
  font-family:var(--mid-sans);
}
h1,h2,h3,.display{
  font-family:var(--mid-serif);
  font-weight:400;
  font-variation-settings:'SOFT' 50;
  letter-spacing:-0.02em;
  color:var(--mid-ink);
}
h1 em,h2 em,h3 em{ font-style:italic; color:var(--mid-brand); }
.mono{ font-family:var(--mid-sans); }
a{ text-underline-offset:4px; }
:focus-visible{ outline:none; box-shadow:var(--mid-focus); border-radius:6px; }

/* ---------- Nav ---------- */
nav{
  background:rgba(251,247,243,0.94);
  box-shadow:none;
  border-bottom:1px solid var(--mid-hairline);
}
nav .wrap{ height:76px; }
.brand-word{ font-family:var(--mid-serif); font-weight:400; font-variation-settings:'SOFT' 50; letter-spacing:-0.01em; }
.brand-word em{ font-style:italic; color:var(--mid-brand); }
.nav-links{ font-weight:500; }
.nav-links a, .nav-login{ opacity:1; color:var(--mid-ink); }
.nav-links a:hover, .nav-login:hover{ color:var(--mid-primary); }

/* ---------- Eyebrows: no monospace pill, gold underline ---------- */
.eyebrow{
  font-family:var(--mid-sans);
  font-size:0.75rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--mid-primary);
  background:transparent;
  padding:0 0 6px; border-radius:0;
  border-bottom:2px solid var(--mid-gold);
}

/* ---------- Buttons ---------- */
.btn{ font-weight:600; }
.btn-primary, .btn-cta{
  background:var(--mid-primary); color:#FFFFFF;
  font-weight:600; letter-spacing:0;
  box-shadow:0 4px 14px rgba(135,82,106,0.22);
}
.btn-primary:hover, .btn-cta:hover{ background:var(--mid-primary-hover); box-shadow:0 8px 20px rgba(135,82,106,0.28); }
.btn-primary:active, .btn-cta:active{ background:var(--mid-primary-active); }
.nav-links .btn-cta{ box-shadow:none; }
.btn-ghost{ border:1.5px solid var(--mid-hairline-strong); color:var(--mid-ink); }
.btn-ghost:hover{ background:var(--mid-ink); border-color:var(--mid-ink); color:#FFFFFF; }
.btn-danger{ color:var(--mid-error); border-color:var(--mid-error); }
.btn-danger:hover{ background:var(--mid-error); color:#FFFFFF; }
.btn-link{ font-weight:600; }
.btn-link:hover{ color:var(--mid-primary); }
.mobile-cta-bar{ background:rgba(251,247,243,0.96); }

/* ---------- Hero ---------- */
h1.hero-title{ font-size:clamp(2.6rem, 5.6vw, 4rem); line-height:1.03; letter-spacing:-0.025em; }
h1.hero-title em{ color:var(--mid-brand); }
.hero-sub{ color:var(--mid-body); font-size:1.18rem; }
.hero-photo{ border-radius:24px; border:none; box-shadow:var(--mid-shadow-raised); }

/* ---------- Section headings: give them real hierarchy ---------- */
.how-head h2{ font-size:clamp(2rem, 3.6vw, 2.75rem); line-height:1.1; margin:14px 0 0; }
.how-head{ max-width:640px; margin-bottom:44px; }
.about-wrap h2{ font-size:clamp(2rem, 3.4vw, 2.6rem); line-height:1.12; }
section.how, section.why, section.gifts-showcase, section.preview, section.testimonials{ padding:88px 0 24px; }
.section-sub{ color:var(--mid-body); font-size:1.05rem; }

/* ---------- Cards ---------- */
.step, .why-card, .testimonial-card{
  background:#FFFFFF; border:1px solid var(--mid-hairline);
  box-shadow:var(--mid-shadow-card);
}
.step .num{
  font-family:var(--mid-serif); font-weight:400; font-variation-settings:'SOFT' 50;
  font-size:2.75rem; line-height:1; color:var(--mid-brand);
}
.step h3, .why-card h3{ font-family:var(--mid-sans); font-weight:600; font-size:1.1rem; letter-spacing:0; }
.step p, .why-card p{ color:var(--mid-body); font-size:0.95rem; }
.why-card .wc-icon{
  width:44px; height:44px; border-radius:12px; background:var(--mid-blush); color:var(--mid-primary);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:0;
}
.why-card .wc-icon svg{ width:22px; height:22px; }

/* Gift categories: white cards with dark text (white-on-mauve failed contrast) */
.gift-cat-card{ background:#FFFFFF; border:1px solid var(--mid-hairline); box-shadow:var(--mid-shadow-card); }
.gift-cat-card h4{ font-family:var(--mid-sans); font-weight:600; font-size:1rem; letter-spacing:0; color:var(--mid-ink); }
.gift-cat-card p{ color:var(--mid-muted); }
.gift-cat-card .gc-icon.g-icon-photo{ background-color:var(--mid-sunk); border:none; }

/* Testimonials */
section.testimonials{ background:transparent; }
.testimonial-stars{ color:var(--mid-gold); }
.testimonial-quote{ font-family:var(--mid-serif); font-style:italic; font-size:1.12rem; line-height:1.5; color:var(--mid-ink); }
.testimonial-avatar{ background:var(--mid-blush); color:var(--mid-primary); font-weight:600; }

/* Preview + mail mock */
.preview-label{ font-family:var(--mid-sans); font-weight:600; font-size:1rem; letter-spacing:0; }
.mail-mock{ box-shadow:var(--mid-shadow-card); }
.mail-mock-bar{ background:var(--mid-sunk); }
.mail-mock-body b{ color:var(--mid-primary); }

/* Closing CTA band */
section.mid-cta{ background:var(--mid-ink) !important; color:#FBF7F3; border:none !important; padding:80px 0 !important; margin-top:64px; }
section.mid-cta h2{ color:#FBF7F3; font-size:clamp(2rem, 3.6vw, 2.75rem); }
section.mid-cta p{ color:#E9DFE3 !important; }
section.mid-cta .btn-cta{ background:#FBF7F3; color:var(--mid-ink); box-shadow:none; }
section.mid-cta .btn-cta:hover{ background:#FFFFFF; }

/* ---------- App surfaces (dashboard, drawers, modals) ---------- */
.login-card{ box-shadow:0 24px 60px rgba(43,34,38,0.22); }
.veil{ background:rgba(43,34,38,0.42); }
input, select, textarea{ font-family:var(--mid-sans); }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--mid-primary); box-shadow:0 0 0 3px rgba(135,82,106,0.18); }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--mid-hairline); color:var(--mid-muted); }

@media (max-width:760px){
  section.how, section.why, section.gifts-showcase, section.preview, section.testimonials{ padding:64px 0 16px; }
  nav .wrap{ height:68px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Closed drawers sit just off-screen; hide their shadow so it doesn't bleed in at the right edge */
.drawer:not(.open){ box-shadow:none; }

/* Small pills and nav buttons */
.dash-tag .countdown{ background:var(--mid-blush); color:var(--mid-primary-active); }
nav a.btn-primary, nav a.btn-cta, nav .btn-primary, nav .btn-cta{ color:#FFFFFF; opacity:1; }
/* FAQ group labels read as eyebrows (serif is for 24px+ only) */
.faq-group h2{ font-family:var(--mid-sans); font-size:0.78rem; font-weight:600; letter-spacing:0.12em; color:var(--mid-primary); display:inline-block; padding-bottom:6px; border-bottom:2px solid var(--mid-gold); }
/* Error messages: tinted, not a solid red block */
.msg.error, .form-msg.error, .auth-error, .login-err{ background:var(--mid-error-tint); color:var(--mid-error); border:1px solid rgba(179,38,30,0.18); }

/* How-it-works step photos (bleed to the card edges) */
.step{ overflow:hidden; padding-top:0; }
.step .step-media{ display:block; margin:0 -26px 22px; aspect-ratio:4 / 3; background:var(--mid-sunk); }
.step .step-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.step:hover .step-media img{ transform:scale(1.03); }

/* ==========================================================================
   Phone-first hero + speed pass (v2)
   ========================================================================== */

/* Small serif labels in the app become DM Sans (serif is for 24px+), which
   also lets the site load just one Fraunces weight. */
.tag .tag-name, .dash-tag .title, .person-card .p-name, .goody-name, .gift-card .g-name, .person-dates-head{
  font-family:var(--mid-sans); font-weight:600; letter-spacing:0; font-variation-settings:normal;
}
.goody-info-name{ font-weight:400; }

/* Hero proof: the product promise, floating over the photo */
.hero-photo-wrap{ position:relative; }
.hero-photo-wrap picture{ display:block; }
.hero-proof{
  position:absolute; left:-18px; bottom:-22px; display:flex; align-items:center; gap:12px;
  background:#FFFFFF; border:1px solid var(--mid-hairline); border-radius:16px; padding:12px 14px;
  box-shadow:var(--mid-shadow-raised); min-width:280px; max-width:92%;
}
.hp-icon{ width:40px; height:40px; border-radius:12px; background:var(--mid-blush); color:var(--mid-primary); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.hp-icon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.hp-text{ display:flex; flex-direction:column; min-width:0; flex:1; }
.hp-text b{ font-size:0.95rem; font-weight:600; color:var(--mid-ink); }
.hp-text span{ font-size:0.8rem; color:var(--mid-muted); }
.hp-pill{ background:var(--mid-success-tint); color:#4E6B57; font-size:0.78rem; font-weight:600; padding:4px 10px; border-radius:999px; flex:none; }

/* Trust row under the button */
.hero-trust{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px; font-size:0.88rem; color:var(--mid-muted); }
.hero-trust li{ display:inline-flex; align-items:center; gap:7px; }
.hero-trust svg{ width:16px; height:16px; fill:none; stroke:var(--mid-success); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* Short subline only on phones */
.hero-sub-short{ display:none; }

@media (max-width:640px){
  header.hero{ padding:22px 0 8px; }
  .hero-grid{ gap:22px; }
  .hero .eyebrow{ margin-bottom:12px; font-size:0.7rem; }
  h1.hero-title{ font-size:clamp(2.1rem, 10vw, 2.6rem); margin-bottom:12px; }
  .hero-sub{ display:none; }
  .hero-sub-short{ display:block; font-size:1.05rem; line-height:1.5; color:var(--mid-body); margin:0 0 18px; max-width:34ch; }
  .hero-ctas{ gap:10px; }
  .hero-ctas .btn-cta{ width:100%; justify-content:center; }
  .hero-ctas .btn-link{ padding:6px 2px; font-size:0.92rem; }
  .hero-trust{ margin-top:12px; font-size:0.82rem; gap:6px 14px; }
  /* Photo peeks into the first screen as a short strip, with the promise card on it */
  .hero-photo{ aspect-ratio:16 / 9; object-fit:cover; object-position:50% 40%; border-radius:18px; }
  .hero-photo-wrap{ margin-bottom:30px; }
  .hero-proof{ left:10px; right:10px; bottom:-30px; min-width:0; max-width:none; padding:10px 12px; }
  .hp-icon{ width:34px; height:34px; }

  /* How it works: swipe sideways instead of three tall stacked cards */
  .steps.steps-swipe{
    display:flex; grid-template-columns:none; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 -28px; padding:4px 28px 18px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .steps.steps-swipe::-webkit-scrollbar{ display:none; }
  .steps.steps-swipe .step{ flex:0 0 82%; scroll-snap-align:center; }
  .how-head{ margin-bottom:22px; }
}
@media (min-width:641px) and (max-width:860px){
  .hero-proof{ left:12px; }
}

/* ---------- Dashboard peek: 2×2 cards on desktop, one swipe row on phones ---------- */
.preview-row{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; align-items:stretch; }
.preview-row .preview-block{
  margin:0; background:#FFFFFF; border:1px solid var(--mid-hairline); border-radius:16px;
  box-shadow:var(--mid-shadow-card); padding:20px 22px 22px; min-width:0; overflow:hidden;
}
.preview-row .preview-label{ display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:0.98rem; }
.pv-num{
  width:26px; height:26px; border-radius:50%; background:var(--mid-blush); color:var(--mid-primary-active);
  display:inline-flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:600; flex:none;
}
.preview-row .preview-tags{ padding:16px 4px 4px; gap:16px; flex-wrap:nowrap; }
.preview-row .dash-tag{ flex:0 1 150px; min-width:0; }
.preview-row .preview-goody{ max-width:none; }
.preview-row .preview-goody .goody-card{ width:calc(50% - 8px); }
.preview-row .preview-postcard{ max-width:none; }
.preview-row .postcard{ box-shadow:none; }
.preview-row .mail-mock{ max-width:none; box-shadow:none; }
.preview-row .mail-mock-body{ font-size:0.84rem; line-height:1.6; max-height:175px; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent); }
.pv-hint{ display:none; }

@media (max-width:860px){
  .preview-row{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 -28px; padding:4px 28px 16px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .preview-row::-webkit-scrollbar{ display:none; }
  .preview-row .preview-block{ flex:0 0 86%; scroll-snap-align:center; }
  .preview-row .mail-mock-body{ max-height:175px; }
  .pv-hint{ display:block; margin:6px 0 0; font-size:0.85rem; color:var(--mid-muted); text-align:right; }
}

/* ---------- Why schedule ahead: photo cards, swipe row on phones ---------- */
.why-card{ overflow:hidden; padding-top:0; display:flex; flex-direction:column; }
.why-card .why-media{ display:block; margin:0 -26px 18px; aspect-ratio:4 / 3; background:var(--mid-sunk); }
.why-card .why-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.why-card:hover .why-media img{ transform:scale(1.03); }
.why-card .wc-icon{ display:none; }
@media (max-width:860px){
  .why-grid.why-swipe{
    display:flex; grid-template-columns:none; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 -28px; padding:4px 28px 18px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .why-grid.why-swipe::-webkit-scrollbar{ display:none; }
  .why-grid.why-swipe .why-card{ flex:0 0 82%; scroll-snap-align:center; }
}
@media (min-width:641px) and (max-width:860px){
  .steps.steps-swipe{ display:flex; grid-template-columns:none; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -28px; padding:4px 28px 18px; scrollbar-width:none; }
  .steps.steps-swipe .step, .why-grid.why-swipe .why-card{ flex:0 0 46%; scroll-snap-align:start; }
}