:root{
    --void:#000000;
    --panel:#0b0a09;
    --panel-raised:#151312;
    --ink:#ece3d6;
    --ink-soft:#d5c8b6;
    --ink-faint:#ab9c8b;
    --gold:#ffd76b;
    --gold-bright:#ffd76b;
    --oxblood:#601726;
    --oxblood-bright:#8a2338;
    --line:rgba(255,215,107,0.24);
    --line-strong:rgba(255,215,107,0.42);
    --shadow:0 30px 60px -20px rgba(0,0,0,0.65);
    --serif:'Cormorant Garamond', serif;
    --sans:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  body{
    background:var(--void);
    color:var(--ink);
    font-family:var(--sans);
    font-weight:400;
    font-size:22px;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  a{color:inherit; text-decoration:none;}
  img{max-width:100%; height:auto; display:block;}
  button{font-family:inherit; cursor:pointer;}

  :focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px;}

  .wrap{max-width:1160px; margin:0 auto; padding:0 28px;}

  .eyebrow{
    font-family:var(--sans);
    font-size:14.5px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:500;
  }

  h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:0.01em;}
  em, .accent{font-family:var(--serif); font-style:italic; color:var(--gold-bright); font-weight:500;}

  .divider{
    width:64px; height:1px; background:var(--line-strong); margin:22px 0;
  }
  .divider.center{margin-left:auto; margin-right:auto;}

  /* -------- die motif (signature element) -------- */
  .die{
    --size:54px;
    width:var(--size); height:var(--size);
    position:relative;
    perspective:400px;
    flex:none;
  }
  .die-inner{
    width:100%; height:100%;
    position:relative;
    transform-style:preserve-3d;
    transition:transform 0.7s cubic-bezier(.4,.2,.2,1);
  }
  .die:hover .die-inner, .die.flipped .die-inner{ transform:rotateY(180deg); }
  .die-face{
    position:absolute; inset:0;
    background:linear-gradient(155deg,#f2e6cf,#e3d2ac);
    border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    backface-visibility:hidden;
    box-shadow:0 6px 14px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.15);
    font-family:var(--sans); font-weight:600; font-size:9px; letter-spacing:0.05em;
    color:#2a2015; text-align:center; line-height:1.15; padding:2px;
  }
  .die-face.back{ transform:rotateY(180deg); }


  /* -------- nav -------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(0,0,0,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 28px; max-width:1160px; margin:0 auto;
  }
  .logo{
    font-family:var(--serif); font-size:22px; letter-spacing:0.02em;
    display:flex; align-items:baseline; gap:2px;
  }
  .logo .for{ font-style:italic; color:var(--gold-bright); font-size:19px; }
  .navlinks{ display:flex; gap:26px; font-size:16.5px; letter-spacing:0.04em; }
  .navlinks a{ color:var(--ink-soft); transition:color 0.25s; position:relative; }
  .navlinks a:hover{ color:var(--gold-bright); }
  .navcta{
    border:1px solid var(--gold); color:var(--gold-bright);
    padding:13px 24px; font-size:15.5px; letter-spacing:0.12em; text-transform:uppercase;
    border-radius:2px; transition:all 0.3s;
  }
  .navcta:hover{ background:var(--gold); color:var(--void); }
  .navtoggle{ display:none; background:none; border:none; color:var(--ink); font-size:22px; }

  @media (max-width:820px){
    .navlinks{ display:none; }
    .navtoggle{ display:block; }
  }

  /* -------- hero -------- */
  .hero{
    padding:108px 0 70px;
    position:relative;
  }
  .hero::before{
    content:'';
    position:absolute; inset:-10% -10% auto -10%;
    height:680px;
    background:radial-gradient(ellipse at 26% 0%, rgba(96,23,38,0.4), transparent 62%),
               radial-gradient(ellipse at 80% 10%, rgba(255,215,107,0.12), transparent 55%);
    pointer-events:none; z-index:0;
  }
  .kicker-line{ width:40px; height:2px; background:var(--gold); margin-bottom:20px; }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;
    position:relative; z-index:1;
  }
  .hero h1{
    font-size:clamp(38px, 5.2vw, 64px);
    line-height:1.05;
    margin:16px 0 24px;
    max-width:11ch;
  }
  .hero p.lede{
    font-size:24px; color:var(--ink-soft); max-width:46ch; margin-bottom:10px; line-height:1.6;
  }
  .hero p.sub{
    font-size:20.5px; color:var(--ink-faint); max-width:42ch; margin-top:12px; line-height:1.6;
  }
  .cta-row{ display:flex; align-items:center; gap:20px; margin-top:38px; flex-wrap:wrap; }
  .btn-primary{
    background:var(--gold); color:var(--void); font-weight:600;
    padding:18px 38px; font-size:15.5px; letter-spacing:0.13em; text-transform:uppercase;
    border-radius:2px; border:1px solid var(--gold);
    transition:transform 0.25s, box-shadow 0.25s, background 0.25s;
    box-shadow:0 10px 30px -10px rgba(255,215,107,0.45);
  }
  .btn-primary:hover{ transform:translateY(-2px); background:var(--gold-bright); }
  .microcopy{ font-size:16px; color:var(--ink-faint); letter-spacing:0.03em; }
  .microcopy strong{ color:var(--gold-bright); font-weight:500; }

  .hero-photo{
    position:relative;
    animation:heroIn 1s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes heroIn{ from{ opacity:0; transform:translateY(16px) rotate(1.2deg) scale(0.98); } to{ opacity:1; transform:translateY(0) rotate(1.2deg) scale(1); } }
  .hero-photo img{
    border-radius:6px;
    box-shadow:var(--shadow);
    transform:rotate(1.2deg);
    border:1px solid var(--line);
  }
  @media (max-width:920px){
    .hero-grid{ grid-template-columns:1fr; gap:44px; }
    .hero{ padding-top:56px; }
    .hero-photo{ order:-1; }
  }

  .trust-strip{
    display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:center;
    margin-top:40px; padding-top:36px; border-top:1px solid var(--line);
  }
  .trust-strip .badge{ font-size:16px; }

  /* arrow text links */
  .text-link{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; color:var(--gold-bright);
    letter-spacing:0.02em; margin-top:20px;
  }
  .text-link::after{ content:''; }
  .text-link{ text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:3px; transition:border-color 0.25s, gap 0.25s; }
  .text-link:hover{ border-color:var(--gold-bright); gap:12px; }
  .text-link .arrow{ font-size:15px; line-height:1; display:inline-block; transform:translateY(-1px); }

  /* stat strip */
  .stats{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    margin-top:64px;
  }
  .stats-row{
    display:flex; justify-content:space-between; padding:26px 0; flex-wrap:wrap; gap:18px;
  }
  .stat{ text-align:center; flex:1; min-width:120px; }
  .stat .num{ font-family:var(--serif); font-size:30px; color:var(--gold-bright); font-style:italic; }
  .stat .lbl{ font-size:15px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px; }

  /* -------- generic section -------- */
  section{ padding:96px 0; position:relative; }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head h2{ font-size:clamp(30px,3.6vw,46px); margin:14px 0 16px; }
  .section-head p{ color:var(--ink-soft); font-size:22px; line-height:1.7; max-width:52ch; }
  .center{ text-align:center; margin-left:auto; margin-right:auto; }

  .panel{ background:var(--panel); }

  /* system / three decks */
  .decks{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .deck{
    background:var(--panel); padding:34px 28px 36px; text-align:center;
    display:flex; flex-direction:column; align-items:center;
  }
  .deck .icon{ width:70px; height:70px; object-fit:contain; margin:0 0 18px; display:block; }
  .deck h3{ font-size:27px; margin:0 0 4px; line-height:1.15; }
  .deck .role{
    font-style:italic; color:var(--gold-bright); font-family:var(--serif);
    font-size:18px; margin:0 0 14px; line-height:1.3;
  }
  .deck p:last-child{
    color:var(--ink-soft); font-size:20px; line-height:1.72;
    margin:0; max-width:32ch;
  }
  @media (max-width:760px){ .decks{ grid-template-columns:1fr; } }

  /* inside grid */
  .inside{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center; }
  .inside img{
    width:100%; max-width:100%; height:auto; display:block;
    border-radius:6px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,0.5);
  }
  .comp-list{ display:flex; flex-direction:column; gap:0; }
  .comp{
    display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line);
  }
  .comp:first-child{ padding-top:0; }
  .comp .n{ font-family:var(--serif); font-style:italic; color:var(--gold); font-size:20px; width:28px; flex:none; }
  .comp h4{ font-family:var(--sans); font-weight:500; font-size:20.5px; letter-spacing:0.02em; margin-bottom:4px; }
  .comp p{ font-size:20px; color:var(--ink-soft); line-height:1.6; }
  @media (max-width:860px){ .inside{ grid-template-columns:1fr; } }

  /* how it works */
  .phases{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
  @media (max-width:860px){ .phases{ grid-template-columns:1fr; } }
  .phase{
    background:var(--panel-raised); border:1px solid var(--line); border-radius:10px; padding:38px 34px;
  }
  .phase-head{ display:flex; align-items:center; gap:16px; margin-bottom:28px; }
  .phase-head h3{ font-size:24px; }
  .step{ display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--line); }
  .step:first-of-type{ border-top:none; }
  .step .num{ font-family:var(--serif); font-style:italic; color:var(--gold-bright); font-size:19px; width:22px; flex:none; }
  .step h4{ font-family:var(--sans); font-size:19px; font-weight:500; letter-spacing:0.03em; margin-bottom:4px; }
  .step p{ font-size:19.5px; color:var(--ink-soft); line-height:1.6; }

  /* letter section */
  .letter{ max-width:640px; margin:0 auto; text-align:center; }
  .letter p{ font-size:22px; color:var(--ink-soft); margin-bottom:20px; line-height:1.75; }
  .letter .sign{ font-family:var(--serif); font-style:italic; font-size:24px; color:var(--gold-bright); margin-top:30px; }

  /* testimonials */
  .quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .quote{ background:var(--panel); padding:36px 30px; }
  .quote p.text{ font-family:var(--serif); font-style:italic; font-size:21px; color:var(--ink); line-height:1.5; margin-bottom:16px; }
  .quote .tag{ font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); }
  @media (max-width:820px){ .quotes{ grid-template-columns:1fr; } }

  /* faq */
  .faq{ max-width:760px; margin:0 auto; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{
    width:100%; background:none; border:none; color:var(--ink);
    display:flex; justify-content:space-between; align-items:center;
    padding:24px 4px; text-align:left; font-family:var(--sans); font-size:20.5px; font-weight:400;
  }
  .faq-q .plus{ color:var(--gold); font-size:20px; transition:transform 0.3s; flex:none; margin-left:20px; }
  .faq-item.open .plus{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height 0.35s ease; }
  .faq-item.open .faq-a{ max-height:340px; }
  .faq-a p{ padding:0 4px 26px; color:var(--ink-soft); font-size:20.5px; line-height:1.7; max-width:60ch; }

  /* gift */
  .gift{
    background:linear-gradient(120deg, var(--oxblood) 0%, #2a0a12 60%, var(--void) 100%);
    border-radius:10px; padding:64px 48px; text-align:center; position:relative; overflow:hidden;
  }
  .gift h2{ font-size:clamp(26px,3.2vw,38px); margin:14px 0 18px; }
  .gift p{ color:#f0e6d8; max-width:54ch; margin:0 auto 30px; font-size:21px; line-height:1.65; }
  .gift .btn-primary{ background:var(--ink); border-color:var(--ink); color:var(--void); }
  .gift .btn-primary:hover{ background:var(--gold-bright); border-color:var(--gold-bright); }

  /* final cta */
  .final{ text-align:center; padding-top:70px; }
  .final h2{ font-size:clamp(30px,4vw,46px); margin:16px 0 20px; }
  .final p{ color:var(--ink-soft); max-width:54ch; margin:0 auto 36px; font-size:21px; line-height:1.7; }
  .form{
    display:flex; gap:0; max-width:440px; margin:0 auto; border:1px solid var(--line-strong); border-radius:2px; overflow:hidden;
  }
  .form input{
    flex:1; background:var(--panel-raised); border:none; padding:18px 20px; color:var(--ink); font-family:var(--sans); font-size:16px;
  }
  .form input::placeholder{ color:var(--ink-faint); }
  .form input:focus{ outline:none; background:#1c1a18; }
  .form button{
    background:var(--gold); border:none; padding:0 26px; color:var(--void); font-weight:600; font-size:15.5px; letter-spacing:0.1em; text-transform:uppercase;
    transition:background 0.25s;
  }
  .form button:hover{ background:var(--gold-bright); }
  @media (max-width:520px){ .form{ flex-direction:column; border-radius:6px; } .form input,.form button{ padding:16px; } }

  footer{ border-top:1px solid var(--line); padding:40px 0; }
  .foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
  .footlinks{ display:flex; gap:26px; font-size:16.5px; color:var(--ink-soft); flex-wrap:wrap; }
  .footlinks a:hover{ color:var(--gold-bright); }
  .footnote{ font-size:15px; color:var(--ink-faint); }

  .badge-row{ display:flex; gap:22px; flex-wrap:wrap; margin-top:30px; }
  .badge{ display:flex; align-items:center; gap:9px; font-size:16px; color:var(--ink-faint); letter-spacing:0.03em; }
  .badge svg{ width:16px; height:16px; color:var(--gold); flex:none; }

  .reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.7s ease, transform 0.7s ease; }
  .reveal.show{ opacity:1; transform:translateY(0); }
/* -------- sub-page hero (About / Gifts / Date Ideas) -------- */
.page-hero{ padding:64px 0 20px; text-align:center; }
.page-hero .eyebrow{ display:block; margin-bottom:14px; }
.page-hero h1{ font-size:clamp(32px,4.4vw,50px); max-width:16ch; margin:0 auto 18px; }
.page-hero p{ color:var(--ink-soft); max-width:60ch; margin:0 auto; font-size:21.5px; line-height:1.7; }
.breadcrumb{ font-size:15px; color:var(--ink-faint); letter-spacing:0.05em; padding-top:26px; }
.breadcrumb a{ color:var(--gold); }
.breadcrumb a:hover{ color:var(--gold-bright); }

/* -------- confirmation modal -------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,4,3,0.82);
  display:flex; align-items:center; justify-content:center;
  z-index:200; opacity:0; pointer-events:none; transition:opacity 0.35s ease;
  padding:24px;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{
  background:var(--panel-raised); border:1px solid var(--line-strong); border-radius:10px;
  max-width:420px; width:100%; padding:48px 40px 40px; text-align:center;
  box-shadow:var(--shadow);
  transform:translateY(14px) scale(0.97); transition:transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.modal-overlay.open .modal{ transform:translateY(0) scale(1); }
.seal{
  width:64px; height:64px; margin:0 auto 22px;
  border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 60%, #8a6b30 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -6px rgba(255,215,107,0.55), inset 0 0 0 2px rgba(255,255,255,0.15);
}
.seal svg{ width:26px; height:26px; color:var(--void); }
.modal h3{ font-size:26px; margin-bottom:12px; }
.modal h3 em{ font-size:26px; }
.modal p{ color:var(--ink-soft); font-size:17.5px; line-height:1.65; margin-bottom:26px; }
.modal-close{
  background:none; border:1px solid var(--line-strong); color:var(--ink-soft);
  padding:14px 30px; font-size:14.5px; letter-spacing:0.12em; text-transform:uppercase;
  border-radius:2px; transition:all 0.25s;
}
.modal-close:hover{ border-color:var(--gold); color:var(--gold-bright); }

/* -------- idea cards (Date Night Ideas page) -------- */

/* -------- occasion pills (Gifts page) -------- */
.occasions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:30px 0 10px; }
.occasion-pill{
  border:1px solid var(--line-strong); color:var(--ink-soft); font-size:15.5px;
  padding:10px 20px; border-radius:30px; letter-spacing:0.03em;
}

/* -------- about page timeline-ish blocks -------- */
.about-split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
.about-split img{ width:100%; max-width:100%; height:auto; display:block; border-radius:6px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,0.5); }
@media (max-width:860px){ .about-split{ grid-template-columns:1fr; } }

.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.value{ background:var(--panel); padding:34px 28px; }
.value h4{ font-family:var(--serif); font-style:italic; font-size:21px; color:var(--gold-bright); margin-bottom:10px; }
.value p{ font-size:19px; color:var(--ink-soft); line-height:1.65; }
@media (max-width:760px){ .value-grid{ grid-template-columns:1fr; } }

/* -------- announcement bar -------- */
.announce{
  background:var(--panel-raised);
  border-bottom:1px solid var(--line);
  text-align:center;
  padding:13px 20px;
  font-size:14.5px;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--gold);
}
@media (max-width:640px){
  .announce{ font-size:10px; letter-spacing:0.1em; padding:9px 14px; }
}

/* -------- date night idea cards -------- */
.ideas-section{ padding:52px 0 80px; }
.ideas-wrap{ max-width:820px; }
.idea{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:32px 34px 34px;
  margin-bottom:18px;
  transition:border-color 0.3s, transform 0.3s;
}
.idea:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.idea h2{
  font-size:clamp(21px, 2.4vw, 27px);
  line-height:1.25;
  margin:0 0 12px;
  display:flex;
  gap:14px;
  align-items:baseline;
}
.idea h2 .n{
  color:var(--gold-bright);
  font-family:var(--sans);
  font-weight:500;
  font-size:0.72em;
  flex:none;
  letter-spacing:0.02em;
}
.idea p{
  color:var(--ink-soft);
  font-size:20.5px;
  line-height:1.7;
  margin:0;
  padding-left:38px;
  max-width:64ch;
}
@media (max-width:620px){
  .idea{ padding:26px 22px 28px; }
  .idea h2{ gap:10px; }
  .idea p{ padding-left:0; font-size:14.5px; }
}

/* -------- closing block -------- */
.closing{ padding:28px 0 96px; text-align:center; }
.closing h2{ font-size:clamp(26px,3.4vw,40px); margin-bottom:20px; }
.closing p{
  color:var(--ink-soft); font-size:21px; line-height:1.75;
  max-width:62ch; margin:0 auto 36px;
}
.closing-actions{
  display:flex; align-items:center; justify-content:center;
  gap:28px; flex-wrap:wrap;
}
.closing-actions .text-link{ margin-top:0; }

/* -------- contrast / why it works -------- */
.contrast{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:10px; overflow:hidden;
}
.contrast-col{ background:var(--panel); padding:36px 34px 40px; }
.contrast-col.accent{
  background:linear-gradient(160deg, rgba(96,23,38,0.30), var(--panel) 70%);
}
.contrast-label{
  font-size:13.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:22px;
}
.contrast-col.accent .contrast-label{ color:var(--gold); }
.contrast-list{ list-style:none; margin:0; padding:0; }
.contrast-list li{
  position:relative; padding-left:26px; margin-bottom:16px;
  color:var(--ink-soft); font-size:20.5px; line-height:1.72;
}
.contrast-list li::before{
  content:''; position:absolute; left:0; top:9px;
  width:9px; height:1px; background:var(--ink-faint);
}
.contrast-col.accent{
  font-family:var(--sans); font-style:normal; font-weight:400; color:var(--ink);
}
.contrast-col.accent .contrast-list li{
  color:var(--ink);
  font-family:var(--sans); font-style:normal; font-weight:400;
}
.contrast-col.accent .contrast-list li::before{
  content:''; top:7px; width:7px; height:7px; border-radius:50%;
  background:none; border:1px solid var(--gold);
}
@media (max-width:760px){
  .contrast{ grid-template-columns:1fr; }
  .contrast-col{ padding:30px 26px 32px; }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:820px){
  .wrap{ padding:0 20px; }
  section{ padding:64px 0; }
  .section-head{ margin-bottom:38px; }

  /* nav: replace the hidden desktop links with a scrollable row */
  nav{ padding:14px 20px; flex-wrap:wrap; gap:12px; }
  .logo{ font-size:20px; }
  .navcta{ padding:9px 16px; font-size:11.5px; letter-spacing:0.1em; }

  .mobilelinks{
    display:flex; gap:22px; width:100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    font-size:16px; padding-bottom:2px;
    scrollbar-width:none;
  }
  .mobilelinks::-webkit-scrollbar{ display:none; }
  .mobilelinks a{ color:var(--ink-soft); white-space:nowrap; padding-bottom:3px; }
  .mobilelinks a:active{ color:var(--gold-bright); }
}
@media (min-width:821px){
  .mobilelinks{ display:none; }
}

@media (max-width:640px){
  body{ font-size:16.5px; }
  .hero{ padding:36px 0 48px; }
  .hero h1{ font-size:clamp(32px,8.5vw,42px); max-width:none; line-height:1.1; }
  .hero p.lede{ font-size:18px; max-width:none; }
  .hero p.sub{ font-size:15.5px; max-width:none; }
  .hero-photo img{ transform:none; }
  .hero-photo{ animation:none; }
  .cta-row{ margin-top:28px; }

  /* full-width tap targets */
  .btn-primary{
    display:block; width:100%; text-align:center;
    padding:18px 24px; font-size:14px;
  }
  .cta-row{ width:100%; }
  .closing-actions{ flex-direction:column; gap:18px; }
  .closing-actions .btn-primary{ width:100%; }

  .stats-row{ padding:22px 0; gap:22px 10px; }
  .stat{ min-width:44%; }
  .stat .num{ font-size:27px; }
  .stat .lbl{ font-size:10px; letter-spacing:0.1em; }

  .trust-strip{ gap:12px 20px; margin-top:32px; padding-top:28px; }
  .trust-strip .badge{ font-size:13px; }

  .deck{ padding:30px 22px 32px; }
  .deck p:last-child{ max-width:none; }

  .phase{ padding:28px 22px; }
  .phases{ gap:24px; }

  .comp{ gap:14px; padding:18px 0; }
  .comp .n{ font-size:17px; width:22px; }

  .inside{ gap:36px; }
  .about-split{ gap:34px; }

  .quote{ padding:28px 24px; }
  .quote p.text{ font-size:18px; }

  .faq-q{ font-size:16px; padding:20px 2px; }
  .faq-a p{ font-size:15.5px; }
  .faq-item.open .faq-a{ max-height:460px; }

  .gift{ padding:44px 24px; }
  .letter p{ font-size:17px; }

  .final h2{ font-size:clamp(27px,7.5vw,36px); }
  .final p{ font-size:16px; }

  .modal{ padding:38px 26px 32px; }
  .foot-row{ flex-direction:column; text-align:center; gap:18px; }
  .footlinks{ justify-content:center; gap:18px 22px; }

  .page-hero{ padding:40px 0 10px; }
  .page-hero h1{ font-size:clamp(29px,8vw,38px); max-width:none; }
  .page-hero p{ font-size:16.5px; }
  .occasions{ gap:9px; }
  .occasion-pill{ font-size:13.5px; padding:10px 16px; }
}

/* prevent any horizontal overflow on small screens */
@media (max-width:640px){
  html, body{ max-width:100%; overflow-x:hidden; }
  img{ height:auto; }
}

/* ============================================================
   ALIGNMENT & POLISH
   ============================================================ */

/* consistent vertical rhythm between all sections */
section{ padding:88px 0; }
section + section{ padding-top:88px; }

/* section heads: predictable spacing whether centered or left */
.section-head{ margin-bottom:56px; }
.section-head.center{ text-align:center; }
.section-head.center p{ margin-left:auto; margin-right:auto; }
.section-head .eyebrow{ display:block; margin-bottom:14px; }

/* two-column blocks share one vertical alignment */
.inside, .about-split{ align-items:center; }
.inside > div, .about-split > div{ min-width:0; }

/* equal-height cards in every grid */
.decks, .quotes, .value-grid, .contrast{ align-items:stretch; }
.deck, .quote, .value, .contrast-col{ height:100%; }

/* phases align at the top, not center, so step 1 lines up with step 5 */
.phases{ align-items:start; }
.phase{ height:100%; }

/* stat strip: even distribution */
.stats-row{ align-items:flex-start; }
.stat{ flex:1 1 0; }

/* keep long words from breaking layout */
h1, h2, h3, h4, p, li{ overflow-wrap:break-word; }

/* images never exceed their column */
img{ max-width:100%; height:auto; }

/* trust strip and badges vertically centered */
.badge{ line-height:1.3; }
.badge svg{ width:17px; height:17px; }

/* footer alignment */
.foot-row{ align-items:center; }

/* ============================================================
   MOBILE OVERRIDES (must stay last to win the cascade)
   ============================================================ */
@media (max-width:820px){
  section, section + section{ padding:58px 0; }
  .section-head{ margin-bottom:34px; }
}
@media (max-width:640px){
  body{ font-size:17px; }
  section, section + section{ padding:46px 0; }
  .hero{ padding:34px 0 46px; }
  .section-head{ margin-bottom:32px; }
  .section-head p{ font-size:17px; }

  .hero p.lede{ font-size:18.5px; }
  .hero p.sub{ font-size:16px; }
  .deck p:last-child{ font-size:16px; max-width:none; }
  .comp p{ font-size:16px; }
  .step p{ font-size:15.5px; }
  .letter p{ font-size:17.5px; }
  .idea p{ font-size:16.5px; }
  .contrast-list li{ font-size:16.5px; }
  .faq-a p{ font-size:16.5px; }
  .value p{ font-size:15.5px; }
  .quote p.text{ font-size:19px; }
  .closing p{ font-size:17px; }
  .final p{ font-size:17px; }
  .gift p{ font-size:17px; }
}

/* Date Ideas teaser icons (inline SVG) */
.deck .icon-svg{ width:58px; height:58px; margin:0 0 16px; display:block; }

/* ============================================================
   SAMPLE CARD FLIP
   ============================================================ */
.flipgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  max-width:960px; margin:0 auto;
}
.flipcard{
  perspective:1400px; cursor:pointer; background:none; border:none;
  aspect-ratio:5 / 7;
}
.flipinner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform 0.7s cubic-bezier(.3,.7,.2,1);
}
.flipcard.flipped .flipinner{ transform:rotateY(180deg); }
.flipface{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:14px;
  background:#1c1e21;
  border:1px solid rgba(255,215,107,0.22);
  box-shadow:0 24px 44px -18px rgba(0,0,0,0.8);
  display:flex; flex-direction:column; align-items:center;
  padding:34px 24px 26px; text-align:center;
}
.flipface.back{ transform:rotateY(180deg); justify-content:flex-start; padding:32px 26px 24px; }

.fc-the{
  font-family:var(--serif); font-size:16.5px; letter-spacing:0.26em;
  color:var(--gold); margin-bottom:2px;
}
.fc-deck{
  font-family:var(--serif); font-size:clamp(24px,2.5vw,32px);
  color:var(--gold); letter-spacing:0.02em; line-height:1.1; margin-bottom:8px;
}
.fc-sub{ font-size:18.5px; color:#fff; margin-bottom:16px; }
.fc-rule{ display:flex; align-items:center; gap:9px; width:74%; }
.fc-rule span{ flex:1; height:1px; background:var(--gold); opacity:0.85; }
.fc-rule em{ display:flex; align-items:center; line-height:0; }
.fc-hint{
  margin-top:auto; font-size:14.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-faint);
}

.fc-title{
  font-family:var(--serif); font-size:26px; letter-spacing:0.06em;
  color:var(--gold); margin:0 0 12px; font-weight:600;
  min-height:32px; display:flex; align-items:center;
}
.fc-line{ width:78%; height:1.5px; background:#ffffff; margin:0 0 24px; flex:none; }
.fc-body{ font-size:18px; color:#fff; line-height:1.55; margin:0 0 20px; }
.fc-body.italic{ font-style:italic; }
.fc-reflect{ font-style:italic; font-size:18px; color:#fff; margin:0 0 22px; }
.fc-questions{
  list-style:none; counter-reset:q; padding:0; margin:4px 0 0; text-align:left; width:100%;
}
.fc-questions li{
  counter-increment:q; font-size:17px; color:#fff; line-height:1.5;
  padding-left:22px; position:relative; margin-bottom:13px;
}
.fc-questions li::before{
  content:counter(q) "."; position:absolute; left:0; color:#fff;
}
.fc-tag{ font-size:17.5px; color:#fff; font-weight:600; margin:0 0 10px; }
.fc-heart{ line-height:0; }
.heart-svg{ width:40px; height:auto; display:block; }
.heart-svg-sm{ width:15px; height:auto; display:block; }

@media (max-width:860px){
  .flipgrid{ grid-template-columns:1fr; max-width:330px; gap:22px; }
}

/* mobile: keep the new scale readable, keep overrides last */
@media (max-width:640px){
  body{ font-size:17.5px; }
  .deck .icon, .deck .icon-svg{ width:54px; height:54px; }
  .deck h3{ font-size:24px; }
  .deck .role{ font-size:17px; }
  .deck p:last-child{ font-size:16.5px; }
  .comp h4{ font-size:18px; }
  .comp p{ font-size:16.5px; }
  .step h4{ font-size:17px; }
  .step p{ font-size:16px; }
  .section-head p{ font-size:17.5px; }
  .faq-q{ font-size:17.5px; }
  .faq-a p{ font-size:17px; }
  .contrast-list li{ font-size:17px; }
  .idea p{ font-size:17px; }
  .value p{ font-size:16.5px; }
  .letter p{ font-size:18px; }
  .final p, .gift p, .closing p{ font-size:17.5px; }
  .fc-deck{ font-size:26px; }
  .fc-title{ font-size:22px; }
  .fc-body, .fc-reflect{ font-size:16px; }
  .fc-questions li{ font-size:15.5px; }
}

/* trademark mark on the wordmark */
.logo .tm{
  font-family:var(--sans); font-size:0.30em; font-weight:500;
  letter-spacing:0; margin-left:2px;
  color:var(--ink-soft);
  position:relative; top:-0.85em;      /* lift to cap height, not baseline */
  line-height:0;
}

/* final mobile pass */
@media (max-width:640px){
  body{ font-size:18px; }
  .deck .icon{ width:58px; height:58px; }
  .comp p{ font-size:17px; }
  .step p{ font-size:16.5px; }
  .section-head p{ font-size:18px; }
  .microcopy{ font-size:17px; }
  .fc-body, .fc-reflect{ font-size:16px; }
  .fc-questions li{ font-size:15px; }
}

/* card footer: Hold sits directly above a larger heart */
.fc-foot{
  margin-top:auto; display:flex; flex-direction:column;
  align-items:center; padding-top:14px;
}

/* even spacing across all three sample cards */
.flipface.back .fc-questions{ margin:0; }
.flipface.back .fc-questions li:last-child{ margin-bottom:0; }
.flipcard .flipface.back > *:last-child{ margin-bottom:0; }
.fc-foot{ padding-top:20px; }


/* PRESENCE card: rules between questions, matching the print */
.fc-reflect{ margin:0 0 12px !important; }
.fc-questions li.ruled{ border-top:1px solid rgba(255,255,255,0.85); padding-top:18px; margin-top:18px; }
.fc-questions li{ margin-bottom:0; }

/* all three card titles land at the same height */
.flipface.back{ padding-top:30px; }
.fc-title{ min-height:34px; margin:0 0 10px !important; }
.fc-line{ margin:0 0 16px !important; }

/* ============================================================
   HERO — full-bleed background photo with overlaid text
   ============================================================ */
.hero.hero-bg{
  position:relative;
  padding:0 0 56px;
}
.hero.hero-bg::before{ display:none; }
.hero.hero-bg picture{ display:contents; }
.hero-bg-img{
  position:absolute; top:0; left:0;
  width:100%; height:clamp(420px, 56vh, 540px);
  object-fit:cover; object-position:60% 42%;
  z-index:0;
}
.hero-bg-fade{
  position:absolute; top:0; left:0;
  width:100%; height:clamp(420px, 56vh, 540px);
  z-index:1;
  background:
    linear-gradient(100deg, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.70) 34%, rgba(0,0,0,0.22) 60%, rgba(0,0,0,0.55) 100%),
    linear-gradient(to top, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.28) 42%, transparent 72%);
}
.hero-content{
  position:relative; z-index:2;
  padding:88px 0 44px;
  max-width:600px;
}
.hero-content .kicker-line{ background:var(--gold); }
.hero-content h1{ max-width:11ch; }

@media (max-width:920px){
  .hero-bg-img, .hero-bg-fade{ height:clamp(380px, 52vh, 480px); }
  .hero-bg-img{ object-position:66% 50%; }
  .hero-content{ padding:70px 0 36px; max-width:100%; }
}
@media (max-width:640px){
  body{ font-weight:400; }
}

@media (max-width:640px){
  body{ font-size:19px; }
  .deck p:last-child{ font-size:17.5px; }
  .comp p{ font-size:17.5px; }
  .step p{ font-size:17px; }
  .section-head p{ font-size:18.5px; }
  .idea p{ font-size:18px; }
  .contrast-list li{ font-size:17.5px; }
  .faq-a p{ font-size:17.5px; }
  .value p{ font-size:19px; }
  .letter p{ font-size:18.5px; }
  .final p, .gift p, .closing p{ font-size:18px; }
  .microcopy{ font-size:15.5px; }
}
@media (max-width:640px){
  body{ font-size:20px; }
  .deck p:last-child{ font-size:18.5px; }
  .comp p{ font-size:18.5px; }
  .step p{ font-size:18px; }
  .section-head p{ font-size:19.5px; }
  .idea p{ font-size:19px; }
  .contrast-list li{ font-size:18.5px; }
  .faq-a p{ font-size:18.5px; }
  .value p{ font-size:18px; }
  .letter p{ font-size:19.5px; }
  .final p, .gift p, .closing p{ font-size:19px; }
  .microcopy{ font-size:16px; }
}
@media (max-width:640px){
  .fc-body, .fc-reflect{ font-size:17px; }
  .fc-questions li{ font-size:16px; }
  .contrast-label{ font-size:13px; }
  .trust-strip .badge, .badge{ font-size:15px; }
  .stat .lbl{ font-size:13.5px; }
}

/* ============================================================
   INTRO — brand reveal on first load
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(ellipse at 50% 45%, #0d0b0a 0%, #000000 70%);
  display:flex; align-items:center; justify-content:center;
  animation:introOut 1.0s cubic-bezier(.6,0,.3,1) 3.2s forwards;
}
.intro-inner{ text-align:center; padding:0 24px; }

.intro-logo{
  width:clamp(230px, 44vw, 340px);
  height:auto; display:block; margin:0 auto 26px;
  opacity:0;
  animation:markIn 1.1s cubic-bezier(.2,.8,.2,1) 0.15s forwards;
}

.intro-word{
  font-family:var(--serif);
  font-size:clamp(26px, 5.2vw, 40px);
  color:var(--ink);
  letter-spacing:0.01em;
  opacity:0;
  animation:wordIn 0.9s cubic-bezier(.2,.8,.2,1) 0.65s forwards;
}
.intro-word .for{ font-style:italic; color:#ffd76b; }
.intro-word .tm{
  font-family:var(--sans); font-size:0.26em; font-weight:500;
  position:relative; top:-0.72em; left:-0.06em;
  line-height:0; letter-spacing:0; color:var(--ink-soft);
}


@keyframes markIn{
  from{ opacity:0; transform:translateY(16px) scale(0.93); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes wordIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes introOut{
  to{ opacity:0; visibility:hidden; }
}

/* never trap anyone: if animations are off, the intro simply is not shown */
@media (prefers-reduced-motion: reduce){
  .intro{ display:none; }
}

/* ---- sample card backs: tighten content, lock the heart to one shared line ---- */
.flipface.back{
  padding:26px 24px 0;          /* footer supplies the bottom space */
  justify-content:flex-start;
}
.flipface.back .fc-title{ min-height:0; margin:0 0 8px; font-size:24px; }
.flipface.back .fc-line{ margin:0 0 14px; }
.flipface.back .fc-reflect{ margin:0 0 14px; }
.flipface.back .fc-body{ margin:0 0 14px; line-height:1.45; }
.flipface.back .fc-questions li{ margin-bottom:0; line-height:1.42; }
.flipface.back .fc-questions li.ruled{ padding-top:12px; margin-top:12px; }
.flipface.back .fc-tag{ margin:0 0 8px; }

/* fixed-height footer = heart sits at the same height on every card */
.fc-foot{
  margin-top:auto;
  height:78px;
  padding-top:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  flex:none;
}
.heart-svg{ width:34px; }

@media (max-width:860px){
  .flipface.back{ padding:24px 22px 0; }
  .flipface.back .fc-title{ font-size:22px; }
  .fc-foot{ height:70px; }
}

/* ============================================================
   READABILITY REFRESH
   Source Sans 3 has a smaller x-height ratio than Jost, so size
   up slightly, open the leading, and cap measure for comfort.
   ============================================================ */
body{
  font-size:21px;
  line-height:1.78;
  letter-spacing:0.004em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* comfortable measure: long lines are a bigger readability problem than size */
.section-head p,
.letter p,
.closing p,
.final p,
.gift p,
.page-hero p{ max-width:60ch; }

.comp p, .step p, .deck p:last-child,
.contrast-list li, .faq-a p, .idea p, .value p{
  line-height:1.7;
}

/* headings: slightly tighter so they feel composed against the looser body */
h1, h2, h3{ letter-spacing:0.005em; }
.hero h1{ line-height:1.08; }

/* small-caps labels need more air at their size */
.eyebrow, .contrast-label, .stat .lbl, .fc-hint{
  letter-spacing:0.2em;
}

@media (max-width:640px){
  body{ font-size:19.5px; line-height:1.75; }
  .comp p, .step p, .deck p:last-child,
  .contrast-list li, .faq-a p, .idea p, .value p{ line-height:1.65; }
  .eyebrow, .contrast-label, .stat .lbl{ letter-spacing:0.15em; }
}

/* subtle warmth so the page reads as candlelit rather than flat black */
body{
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,215,107,0.03), transparent 70%),
    radial-gradient(ellipse 70% 50% at 15% 40%, rgba(138,35,56,0.03), transparent 65%),
    var(--void);
  background-attachment:fixed;
}
.panel{
  background:
    linear-gradient(180deg, rgba(255,215,107,0.028), transparent 55%),
    var(--panel);
}

/* ============================================================
   DESKTOP: lift the last few small items
   ============================================================ */
.eyebrow{ font-size:15.5px; }
.microcopy{ font-size:17px; }
.badge, .trust-strip .badge{ font-size:17px; }
.stat .lbl{ font-size:16px; }
.quote .tag{ font-size:14.5px; }
.contrast-label{ font-size:15px; }
.footnote{ font-size:16px; }
.breadcrumb{ font-size:16px; }
.text-link{ font-size:15.5px; }
.occasion-pill{ font-size:16.5px; }
.announce{ font-size:15.5px; }
.form input{ font-size:17.5px; }
.form button{ font-size:16.5px; }
.navcta{ font-size:16px; }
.modal-close{ font-size:15.5px; }
.fc-hint{ font-size:15px; }
.idea-cat-head .count{ font-size:15px; }
.btn-primary{ font-size:16.5px; }

/* ============================================================
   MOBILE REFINEMENTS
   ============================================================ */

/* sticky signup bar: appears after the hero, hides at the form itself */
.sticky-cta{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:80;
  display:none;
  text-align:center;
  background:var(--gold); color:#241a10;
  font-weight:600; font-size:16.5px;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:17px 20px; border-radius:6px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,0.85);
  opacity:0; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.sticky-cta.show{ opacity:1; transform:translateY(0); pointer-events:auto; }

@media (max-width:820px){
  .sticky-cta{ display:block; }
  /* keep the footer clear of the floating bar */
  footer{ padding-bottom:104px; }
}

@media (max-width:640px){
  /* bigger tap targets */
  .faq-q{ padding:22px 2px; min-height:52px; }
  .mobilelinks a{ padding:8px 0; }
  .footlinks a{ padding:6px 0; display:inline-block; }

  /* stop iOS auto-zooming on focus (needs >=16px) */
  .form input{ font-size:17px; }

  /* stats read better as two clean columns */
  .stats-row{ gap:26px 12px; }
  .stat{ min-width:42%; }

  /* headline sizing that doesn't crowd small screens */
  .hero h1{ font-size:clamp(31px,8.2vw,40px); }
  .section-head h2{ font-size:clamp(25px,6.6vw,32px); }

  /* comfortable side gutters */
  .wrap{ padding:0 22px; }

  /* sample cards: full width, easier to read and tap */
  .flipgrid{ max-width:340px; }

  /* let long headings breathe */
  h1,h2,h3{ hyphens:none; }
}

/* respect notches / home indicator on modern phones */
@supports(padding:max(0px)){
  @media (max-width:820px){
    .sticky-cta{ bottom:max(16px, env(safe-area-inset-bottom)); }
  }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--gold); color:#241a10;
  padding:14px 22px; font-weight:600; border-radius:0 0 6px 0;
  font-size:16px;
}
.skip-link:focus{ left:0; }

/* visible keyboard focus everywhere (was relying on browser defaults) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:3px;
}

/* honour reduced-motion for all the scroll reveals and flips */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}



/* ============================================================
   MOBILE HERO — overlay layout, box framed high and legible
   ============================================================ */
@media (max-width:640px){
  /* overlay like desktop, framed tight on the box — no dead space */
  .hero.hero-bg{ padding:0 0 40px; }
  .hero-bg-img{
    position:absolute; top:0; left:0; inset:auto;
    width:100%; height:clamp(430px, 56vh, 520px);
    object-fit:cover;
    object-position:72% 47%;   /* centre of the box lettering */
    display:block;
  }
  .hero-bg-fade{
    position:absolute; top:0; left:0;
    width:100%; height:clamp(430px, 56vh, 520px);
    z-index:1;
    background:linear-gradient(180deg,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.10) 34%,
      rgba(0,0,0,0.62) 58%,
      rgba(0,0,0,0.94) 76%,
      var(--void) 92%);
  }
  .hero-content{
    position:relative; z-index:2;
    padding:clamp(300px, 40vh, 380px) 0 6px;
    max-width:100%;
  }
  .hero-content h1{ font-size:clamp(32px,8.4vw,40px); line-height:1.12; }
  .hero-content .lede{ font-size:18.5px; }
  .hero-content .sub{ font-size:16.5px; }
  .hero-content h1,
  .hero-content .lede,
  .hero-content .sub{ text-shadow:0 2px 12px rgba(0,0,0,0.8); }
}

/* ============================================================
   MOBILE: swipeable sample cards instead of a tall stack
   ============================================================ */
@media (max-width:860px){
  .flipgrid{
    display:flex;
    gap:16px;
    max-width:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* bleed to the screen edges so the next card peeks in */
    margin-inline:calc(50% - 50vw);
    padding:4px calc(50vw - 50% + 22px) 8px;
  }
  .flipgrid::-webkit-scrollbar{ display:none; }
  .flipcard{
    flex:0 0 78%;
    max-width:320px;
    scroll-snap-align:center;
  }
}

/* swipe affordance */
.swipe-hint{
  display:none;
  text-align:center;
  margin-top:14px;
  font-size:14.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
@media (max-width:860px){ .swipe-hint{ display:block; } }

/* ============================================================
   SAMPLE CARDS — keep every element inside the card face
   ============================================================ */

/* the face is the layout box: content column + fixed footer, nothing escapes */
.flipface.back{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.flipface.back .fc-questions{ width:100%; }

/* wider cards on mobile so lines like "Notice this moment together." stay on one line */
@media (max-width:860px){
  .flipgrid{ padding-inline:calc(50vw - 50% + 14px); }
  .flipcard{
    flex:0 0 88%;
    max-width:400px;
    aspect-ratio:5 / 7.6;      /* a little taller: room for the footer */
  }
  .flipface.back{ padding:24px 20px 0; }
  .flipface.back .fc-title{ font-size:23px; margin:0 0 8px; }
  .flipface.back .fc-line{ margin:0 0 14px; }
  .flipface.back .fc-reflect{
    font-size:16.5px; margin:0 0 14px;
    white-space:nowrap;         /* match desktop: one line */
  }
  .flipface.back .fc-body{ font-size:16px; margin:0 0 14px; line-height:1.45; }
  .flipface.back .fc-questions li{ font-size:15.5px; line-height:1.4; }
  .flipface.back .fc-questions li.ruled{ padding-top:10px; margin-top:10px; }
  .fc-foot{ height:64px; }
  .heart-svg{ width:30px; }
}

/* very small screens: shrink the reflection rather than let it wrap */
@media (max-width:400px){
  .flipface.back .fc-reflect{ font-size:15px; }
  .flipface.back .fc-questions li{ font-size:15px; }
}

/* keep the floating CTA from covering the cards while swiping */
@media (max-width:820px){
  .flipgrid{ margin-bottom:8px; }
}

/* desktop: give the tallest card (PRESENCE) room so nothing overflows */
@media (min-width:861px){
  .flipcard{ aspect-ratio:5 / 7.4; }
  .flipface.back{ padding:26px 24px 0; }
  .flipface.back .fc-questions li{ line-height:1.4; }
  .fc-foot{ height:72px; }
}

/* ============================================================
   CARD BACKS — balanced content, hearts on one shared line
   ============================================================ */
.fc-content{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;   /* distribute slack instead of one big gap */
  width:100%;
  min-height:0;
}
.fc-content > *:last-child{ margin-bottom:0; }

/* footer stays pinned so every heart lands at the same height */
.fc-foot{
  margin-top:0;
  flex:0 0 auto;
}

/* PRESENCE is the tallest card — keep its content inside so the footer
   (and therefore the heart) stays on the same line as the other two */
.fc-content{ overflow:hidden; }

@media (max-width:860px){
  .flipcard{ aspect-ratio:5 / 8; }          /* a bit more height on phones */
  .flipface.back{ padding:22px 18px 0; }
  .flipface.back .fc-title{ font-size:22px; margin:0 0 6px; }
  .flipface.back .fc-line{ margin:0 0 12px; }
  .flipface.back .fc-reflect{ font-size:16px; margin:0 0 12px; }
  .flipface.back .fc-body{ font-size:15.5px; margin:0 0 12px; line-height:1.42; }
  .flipface.back .fc-questions li{ font-size:15px; line-height:1.36; }
  .flipface.back .fc-questions li.ruled{ padding-top:9px; margin-top:9px; }
  .fc-foot{ height:58px; }
  .heart-svg{ width:28px; }
  .fc-tag{ font-size:16px; margin:0 0 6px; }
}

/* "Hold" belongs with the card copy, not the footer — keeps hearts level */
.fc-tag{
  margin:14px 0 0;
  font-weight:600;
}

/* every card in the row is the same height, so the pinned footers line up */
.flipgrid{ align-items:stretch; }
.flipcard, .flipinner{ height:100%; }

/* ============================================================
   CARD BACKS — copy sits high, hearts stay put
   The content block was vertically centered, which pushed the
   copy toward the middle of the card. Anchor it to the top
   instead. Internal margins are untouched, so the group keeps
   its spacing; the pinned footer keeps every heart on its line.
   Tune --fc-top-gap alone to raise or lower the whole block.
   ============================================================ */
.flipface.back{ --fc-top-gap:16px; }

.fc-content{
  justify-content:flex-start;
  padding-top:var(--fc-top-gap);
}

@media (max-width:860px){
  .flipface.back{ --fc-top-gap:12px; }
}

/* the divider under the reflection line was sitting left-aligned:
   .fc-content is a flex column, so a fixed-width child lands at
   the start of the cross axis instead of the middle */
.fc-content > .fc-line{ align-self:center; }

/* ============================================================
   PRESENCE — match the printed card
   Print sets the reflection line tight between two rules under
   the title, then lets the three questions fill the rest of the
   card with the dividers floating in even air between them.
   The dividers are now their own list items, so the flex
   distribution puts equal space above and below each one.
   ============================================================ */
.fc-content.is-questions{ padding-top:6px; }

.flipface.back .fc-content.is-questions .fc-reflect{
  margin:0 0 7px !important;
}
.flipface.back .fc-content.is-questions > .fc-line{
  margin:0 0 26px;
}

.flipface.back .fc-questions{
  flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:space-between;
  margin:0; min-height:0;
}
.flipface.back .fc-questions li{
  flex:0 0 auto;
  margin:0; padding-left:24px;
}

/* divider rows: no counter, no marker, just the hairline */
.fc-questions li.fc-qrule{
  counter-increment:none;
  padding:0; margin:0;
  height:1px; width:100%;
  background:rgba(255,255,255,0.85);
}
.fc-questions li.fc-qrule::before{ content:none; }

/* the title rule also sits tighter to the word on the print */
.flipface.back .fc-title{ margin:0 0 6px; }
.flipface.back > .fc-line{ margin:0 0 7px; }

@media (max-width:860px){
  .flipface.back .fc-content.is-questions > .fc-line{ margin:0 0 20px; }
  .flipface.back .fc-questions li{ padding-left:22px; }
}

/* -------- B-Sides signup -------- */
.final .bsides-offer{ max-width:48ch; margin:0 auto 24px; color:var(--ink); font-size:20px; }
.final .form-status{ min-height:1.4em; margin:14px auto 0; font-size:16px; line-height:1.5; color:#e8a3ad; text-align:center; }
.final .form-fine{ margin:4px auto 0; font-size:15.5px; line-height:1.6; color:var(--ink-faint); letter-spacing:0.03em; }
.bsides-list{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px;
  max-width:760px; margin:28px auto 0; font-family:var(--serif); font-style:italic; font-size:19px; color:var(--gold);
}
.bsides-list li + li::before{ content:'\00b7'; margin-right:22px; color:var(--line-strong); }
.form button:disabled{ opacity:0.7; cursor:default; }
.modal p.modal-alt{ font-size:15.5px; margin:-8px 0 24px; }
.modal-alt a{ color:var(--gold); border-bottom:1px solid var(--line-strong); }
.modal-alt a:hover{ color:var(--gold-bright); }
@media (max-width:520px){ .bsides-list li + li::before{ display:none; } .bsides-list{ flex-direction:column; align-items:center; gap:6px; } }