:root{
  --night:#101f32;
  --night-deep:#0b1726;
  --paper:#fff9ed;
  --ink:#30251f;
  --muted:#6f6257;
  --cranberry:#B42318;
  --cranberry-hover:#921c14;
  --line:#dfd4c3;
  --moon:#fff1cf;
  --success:#146C43;
  --radius:16px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--nightDeep,#0b1726);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--cranberry)}
@font-face{font-family:"Holiday Book";src:url("EBGaramond-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Holiday Book";src:url("EBGaramond-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
.serif{font-family:"Holiday Book",Georgia,"Times New Roman",serif}

/* ---------- night band ---------- */
.night{
  position:relative;height:clamp(168px,23vw,240px);overflow:hidden;background:var(--night);
}
.night__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right top;}
.night__inner{
  position:relative;height:100%;max-width:1120px;margin:0 auto;padding:16px 20px 44px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.night__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brandmark{width:clamp(150px,26vw,230px);height:auto;display:block}
.motion-toggle{
  min-height:44px;padding:0 14px;border-radius:999px;cursor:pointer;
  background:rgba(16,31,50,.45);border:1px solid rgba(255,241,207,.35);
  color:var(--moon);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;
  backdrop-filter:blur(2px);
}
.motion-toggle:hover{background:rgba(16,31,50,.7)}
.lbl-short{display:none}
@media (max-width:700px){.lbl-long{display:none}.lbl-short{display:inline}}
.night__foot{display:flex;gap:12px;flex-wrap:wrap;color:rgba(255,241,207,.86);font-size:12px;font-weight:600;letter-spacing:.01em}
.night__foot span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.night__foot span::before{content:"";width:5px;height:5px;border-radius:50%;background:#7fbf9a}

.snow{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.snow i{
  position:absolute;top:-8px;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.8);
  animation:fall linear infinite;
}
@keyframes fall{from{transform:translateY(-10px)}to{transform:translateY(280px)}}
.motion-paused .snow i,.motion-paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.snow{display:none}}

/* ---------- paper ---------- */
.shell{max-width:1120px;margin:0 auto;padding:0 20px 56px;position:relative}
.paper{
  position:relative;background:var(--paper);border:1px solid #e8dcc8;border-radius:22px;
  padding:26px 24px;margin-top:-34px;box-shadow:0 18px 40px rgba(6,14,26,.35);
}
.paper + .paper{margin-top:20px}
@media (min-width:701px){.paper{padding:30px 32px}}

h1{font-size:clamp(30px,6.4vw,44px);line-height:1.08;letter-spacing:-.02em;margin:0 0 8px;font-family:"Holiday Book",Georgia,"Times New Roman",serif;font-weight:700}
h1 + .sub{margin-top:2px}
.sub{margin:0 0 20px;color:var(--muted);font-size:17px;max-width:56ch}
h2{font-size:clamp(20px,3.4vw,26px);line-height:1.2;letter-spacing:-.01em;margin:0 0 6px;font-family:"Holiday Book",Georgia,"Times New Roman",serif;font-weight:700}
h3{font-size:17px;margin:22px 0 4px}
p{margin:0 0 14px;max-width:66ch}

label{display:block;font-size:15px;font-weight:650;margin:0 0 8px}
textarea{
  width:100%;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;
  min-height:170px;resize:vertical;outline:none;
}
textarea:focus,input:focus,select:focus{outline:3px solid rgba(180,35,24,.28);outline-offset:1px;border-color:var(--cranberry)}
.hint{font-size:14px;color:var(--muted);margin:8px 0 0}
.err{color:var(--cranberry);font-weight:650;font-size:15px;margin:12px 0 0}
.err:empty{display:none}

.btn{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;
  background:var(--cranberry);color:#fff;border:0;border-radius:12px;
  font:inherit;font-size:17px;font-weight:700;cursor:pointer;padding:0 20px;
  text-decoration:none;text-align:center;
}
.btn:hover{background:var(--cranberry-hover)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn--ghost{
  background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:650;font-size:16px;min-height:48px;
}
.btn--ghost:hover{background:#f6efe2}
.btn-row{display:grid;gap:10px;margin-top:14px}
@media (min-width:560px){.btn-row--2{grid-template-columns:1fr 1fr}}

/* ---------- results ---------- */
.pairs{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.pairs li{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:16px;
}
.pairs .who{font-weight:650;overflow-wrap:anywhere}
.pairs .to{overflow-wrap:anywhere}
.pairs .arrow{color:#a89684}
.pairs .rowlink{margin-left:auto}
.rowbtn{
  min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:650;cursor:pointer;
}
.rowbtn:hover{background:#f6efe2}
.rowbtn[aria-pressed="true"]{background:var(--success);color:#fff;border-color:var(--success)}

.preview-note{
  margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#fbf1dc;border:1px solid #edd9b6;
  font-size:14px;color:#6b4a12;
}

/* ---------- paywall ---------- */
.paywall{
  margin-top:18px;border:1px solid #e3d3b8;border-radius:16px;background:#fffdf7;padding:22px;
}
.paywall h2{font-size:22px;margin-bottom:4px}
.price{font-size:15px;font-weight:700;color:var(--cranberry);margin:0 0 12px}
.paywall ul{list-style:none;padding:0;margin:0 0 16px}
.paywall li{display:flex;gap:10px;padding:6px 0;font-size:15px;color:#4a3b31}
.paywall li::before{content:"✓";color:var(--success);font-weight:700}
.paywall .lead{font-weight:650;font-size:15px;color:#4a3b31}

/* ---------- exclusions ---------- */
details.rules{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
details.rules > summary{
  cursor:pointer;min-height:48px;display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:650;list-style:none;
}
details.rules > summary::-webkit-details-marker{display:none}
details.rules > summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--muted)}
details.rules[open] > summary::after{content:"–"}
.rule-row{display:grid;grid-template-columns:1fr auto 1fr 44px;gap:8px;align-items:center;margin:10px 0}
.rule-row select{
  min-height:48px;width:100%;font:inherit;font-size:15px;padding:0 10px;border-radius:10px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
}
.rule-row .vs{color:var(--muted);font-size:13px;text-align:center}
.rule-del{
  width:44px;height:48px;border-radius:10px;border:1px solid var(--line);background:#fff;
  color:var(--muted);font-size:18px;cursor:pointer;
}
.rule-del:hover{color:var(--cranberry);border-color:var(--cranberry)}
@media (max-width:520px){.rule-row{grid-template-columns:1fr 44px;} .rule-row .vs{display:none} .rule-row select:nth-of-type(2){grid-column:1/2}}

/* ---------- steps / faq ---------- */
.steps{list-style:none;margin:16px 0 0;padding:0;counter-reset:s}
.steps li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0}
.steps .n{
  flex:0 0 30px;height:30px;border-radius:9px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);font-weight:700;
}
.steps b{display:block;font-size:16px}
.steps span{color:var(--muted);font-size:15px}
.faq dt{font-weight:650;margin:16px 0 4px}
.faq dd{margin:0;color:#4a3b31;font-size:16px;max-width:66ch}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:650}

/* ---------- footer ---------- */
footer.site{max-width:1120px;margin:0 auto;padding:8px 20px 48px;color:rgba(255,241,207,.72);font-size:14px}
footer.site nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
footer.site a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:10px;
  color:var(--moon);text-decoration:none;font-weight:600;
}
footer.site a:hover{background:rgba(255,241,207,.12)}

/* ---------- personal result ---------- */
.person{max-width:560px;margin:32px auto 60px;padding:0 20px}
.person .card{
  background:var(--paper);border:1px solid #e3d3b8;border-radius:20px;padding:28px 24px;text-align:left;
  box-shadow:0 18px 40px rgba(6,14,26,.35);
}
.kicker{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 6px}
.big{font-size:clamp(30px,8vw,44px);line-height:1.1;font-weight:700;margin:0 0 8px;overflow-wrap:anywhere}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= home hero v1.4 (2026-11-05) =================
   Restores the full Christmas-night scene at the top of the home page.
   The artboard height follows the window width, not the form or result
   height, so the moon and clouds are never squashed by long content. */
:root{--scene-h:clamp(860px,77vw,1200px)}
body.home{background:var(--paper)}
.hero{position:relative;min-height:var(--scene-h);background:var(--paper)}
.hero__scene{
  position:absolute;inset:0 0 auto;height:var(--scene-h);overflow:hidden;
  background:var(--night);pointer-events:none;z-index:0;
}
.hero__scene picture,.hero__scene img{display:block;width:100%;height:100%}
.hero__scene img{object-fit:cover;object-position:right top}
.hero__scene::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:170px;
  background:linear-gradient(transparent,var(--paper));z-index:3;pointer-events:none;
}
.hero__inner{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:16px 20px 0}
.hero__top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.brandmark-link{display:block;line-height:0}
.hero__copy{padding-top:30px;max-width:720px}
.hero h1{
  color:var(--moon);font-family:"Holiday Book",Georgia,"Times New Roman",serif;font-weight:700;
  font-size:clamp(40px,5.6vw,76px);line-height:1.03;letter-spacing:-.02em;margin:0 0 12px;max-width:16ch;
}
.hero__sub{margin:0 0 16px;color:#fff4e2;font-size:clamp(16px,1.5vw,19px);line-height:1.55;max-width:52ch}
.hero__trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;list-style:none;color:#f2e7d6;font-size:14px;font-weight:600}
.hero__trust li{display:inline-flex;align-items:center;gap:7px}
.hero__trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:#7fbf9a;outline:1px solid rgba(255,255,255,.4)}
.hero__panel{margin-top:24px;max-width:660px;position:relative;z-index:2}

/* content below the scene sits on paper, like the original layout */
.home .shell{padding-top:6px}
.section{padding:34px 0 8px;border-top:1px solid var(--line)}
.section:first-child{border-top:0;padding-top:26px}
.home .section h2{font-size:clamp(26px,3.2vw,34px);margin:0 0 12px}

/* footer on the paper page */
.home footer.site{color:var(--muted);border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.home footer.site a{color:var(--ink)}
.home footer.site a:hover{background:#f2e8d8}

/* personal / error view keep the night background and card */
body.is-personal{background:var(--night)}
body.is-personal .hero{display:none}
body.is-personal .shell{display:none}
.person-wrap{padding-top:0}
body.is-personal .person-wrap{min-height:calc(100vh - 120px);padding-top:32px}
body.is-personal footer.site{color:rgba(255,241,207,.72);border-top:0;margin-top:0;padding-top:8px}
body.is-personal footer.site a{color:var(--moon)}
body.is-personal footer.site a:hover{background:rgba(255,241,207,.12)}

/* snow falls the full height of the tall artboard */
@keyframes fallTall{from{transform:translateY(-10px)}to{transform:translateY(calc(var(--scene-h) - 30px))}}
.hero__scene .snow i{animation-name:fallTall}

@media (max-width:700px){
  :root{--scene-h:900px}
  .hero__inner{padding:12px 16px 0}
  .hero__top{min-height:44px}
  .hero__copy{padding-top:20px}
  .hero h1{font-size:clamp(34px,9.6vw,48px);max-width:13ch;margin-bottom:10px}
  .hero__sub{font-size:16px;max-width:30ch;margin-bottom:14px}
  .hero__trust{font-size:13px;gap:6px 12px}
  .hero__panel{margin-top:16px;max-width:none}
  .hero__scene::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(16,31,50,.62),rgba(16,31,50,.18) 62%,transparent 92%);
  }
  .section{padding:26px 0 6px}
  .home .section h2{font-size:26px}
}