/* matchmade. — style baseline: refined (awesome-design-skills), art direction via design-taste-frontend,
   layout grammar from Robert's reference UI rules (centered balanced titles, tight spacing). */
:root{
  --paper:#F5F2EE; --stone:#EBE5DE; --stone-2:#DFD7CD;
  --ink:#1B1714; --ink-2:#4A403A;
  --claret:#7A1F33; --claret-press:#651829;
  --wine:#4E1424; --wine-ink:#F6EDE6; --wine-soft:#E7CFC8;
  --blush:#F0DDD6;
  --ok:#2F6B47; --no:#9A2E3A;
  --radius:18px; --pill:999px;
  --gutter:16px; --max:1180px;
  --sec:80px;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --text:"Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:768px){ :root{ --gutter:32px; --sec:110px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--text); font-size:17px; line-height:1.55; overflow-x:hidden; }
@media (min-width:768px){ body{ font-size:18px; } }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-underline-offset:.18em; text-decoration-thickness:1px; }
html{ scrollbar-color:var(--stone-2) var(--paper); }
input,textarea{ caret-color:var(--claret); }
.price, table.vs, .lead{ font-variant-numeric:tabular-nums lining-nums; }
:focus-visible{ outline:3px solid var(--claret); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--claret); color:#fff; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.sec{ padding:var(--sec) 0; }
.sec + .sec.same{ padding-top:0; }

/* Type */
h1,h2,h3{ font-family:var(--display); font-weight:600; letter-spacing:-0.025em; line-height:1.04; margin:0; text-wrap:balance; font-variation-settings:"opsz" 144; }
h1{ font-size:clamp(2.75rem, 1.6rem + 4.6vw, 4.875rem); }
h2{ font-size:clamp(2.125rem, 1.4rem + 2.9vw, 3.625rem); }
h3{ font-size:clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height:1.12; letter-spacing:-0.015em; }
.title{ text-align:center; margin:0 auto; }
.title .line{ display:block; }
.lead{ text-align:center; font-size:clamp(1.0625rem, .95rem + .55vw, 1.3125rem); line-height:1.5; max-width:34rem; margin:18px auto 0; text-wrap:balance; color:var(--ink); }
.nw{ white-space:nowrap; }
.small{ font-size:15px; line-height:1.5; }
.note{ font-size:14px; color:var(--ink-2); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4em; min-height:52px; padding:0 28px; border-radius:var(--pill);
  background:var(--claret); color:#fff; font:600 17px/1 var(--text); text-decoration:none; border:0; cursor:pointer;
  transition:transform .18s var(--ease), background-color .18s var(--ease); }
.btn:hover{ background:var(--claret-press); transform:translateY(-1px); }
.btn:active{ transform:translateY(1px) scale(.98); }
.btn.ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); }
.btn.light{ background:var(--paper); color:var(--wine); }
.btn.light:hover{ background:#fff; }
.btn.sm{ min-height:42px; padding:0 18px; font-size:15px; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px 16px; justify-content:center; align-items:center; margin-top:28px; }

/* Nav */
.bar{ position:sticky; top:0; z-index:50; background:var(--paper); }
.bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px; }
.mark{ font-family:var(--display); font-weight:600; font-size:26px; letter-spacing:-0.03em; text-decoration:none; color:var(--ink); }
.mark span{ color:var(--claret); }
.nav{ display:none; gap:28px; align-items:center; }
.nav a{ text-decoration:none; font-weight:500; font-size:16px; color:var(--ink); }
.nav a:hover{ color:var(--claret); }
@media (min-width:980px){ .nav{ display:flex; } }
.announce{ background:var(--wine); color:var(--wine-ink); font-size:14px; text-align:center; padding:10px var(--gutter); }
.announce a{ color:#fff; font-weight:600; }

/* Hero */
.hero{ padding:48px 0 24px; text-align:center; }
@media (min-width:768px){ .hero{ padding:80px 0 32px; } }
.hero .lead{ max-width:38rem; }
.hero .guar{ font-weight:600; font-size:16px; }
.stickers{ position:relative; display:flex; justify-content:center; align-items:flex-end; gap:0; margin:44px auto 0; max-width:820px; min-height:330px; }
.pcard{ width:clamp(130px, 34vw, 210px); background:#fff; border-radius:var(--radius); padding:10px 10px 14px; text-align:left;
  box-shadow:0 18px 40px -18px rgba(27,23,20,.35); } /* taste-skill-ignore: hero stickers float over the page, as in the reference */
.pcard img{ border-radius:12px; aspect-ratio:4/5; object-fit:cover; width:100%; }
.pcard b{ display:block; font-size:15px; margin-top:10px; }
.pcard small{ display:block; font-size:13px; color:var(--ink-2); line-height:1.35; }
.pcard .tag{ display:inline-block; margin-top:8px; font-size:13px; font-weight:600; color:var(--claret); }
.pcard.l{ transform:rotate(-5deg) translate(4px, -6px); z-index:1; }
.pcard.r{ transform:rotate(5deg) translate(-4px, -10px); z-index:1; text-align:right; }
.phone{ position:relative; z-index:2; width:clamp(170px, 40vw, 250px); background:var(--ink); border-radius:34px; padding:10px; box-shadow:0 24px 50px -20px rgba(27,23,20,.45); } /* taste-skill-ignore: floating sticker */
.phone .scr{ background:var(--paper); border-radius:26px; padding:22px 14px 18px; text-align:left; min-height:330px; }
.phone .scr .q{ font-family:var(--display); font-weight:600; font-size:19px; line-height:1.15; margin:6px 0 14px; letter-spacing:-.01em; }
.phone .scr .who{ font-size:13px; color:var(--ink-2); font-weight:600; }
.phone .opt{ display:block; background:#fff; border-radius:12px; padding:10px 12px; font-size:14px; margin-bottom:8px; }
.phone .opt.on{ background:var(--claret); color:#fff; }
.phone .prog{ height:6px; border-radius:6px; background:var(--stone-2); margin-bottom:6px; overflow:hidden; }
.phone .prog i{ display:block; height:100%; width:60%; background:var(--claret); }
@media (max-width:520px){
  .stickers{ min-height:0; }
  .pcard{ width:124px; padding:7px 7px 10px; }
  .pcard b{ font-size:14px; } .pcard small{ font-size:13px; } .pcard .tag{ font-size:13px; }
  .pcard.l{ transform:rotate(-6deg) translate(12px, -4px); }
  .pcard.r{ transform:rotate(6deg) translate(-12px, -8px); }
  .phone{ width:150px; border-radius:26px; padding:7px; }
  .phone .scr{ min-height:262px; padding:14px 9px 10px; border-radius:20px; }
  .phone .scr .q{ font-size:15px; } .phone .opt{ font-size:13px; padding:7px 8px; }
}

/* Proof-style ticker */
.ticker{ padding:56px 0 0; }
.ticker .label{ text-align:center; font-weight:600; font-size:17px; margin:0 0 18px; padding:0 var(--gutter); }
.tick-view{ /* taste-skill-ignore: edge mask on the ticker, not a fill */ overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tick-track{ display:flex; gap:12px; width:max-content; animation:tick 70s linear infinite; padding:4px 0; }
.tick-view:hover .tick-track, .tick-track:focus-within{ animation-play-state:paused; }
@keyframes tick{ to{ transform:translateX(calc(-50% - 6px)); } }
.qcard{ flex:0 0 auto; width:300px; background:var(--stone); border-radius:var(--radius); padding:18px 20px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; justify-content:space-between; gap:12px; transition:background-color .18s var(--ease), transform .18s var(--ease); }
.qcard:hover{ background:var(--blush); transform:translateY(-2px); }
.qcard q, .qcard p{ font-family:var(--display); font-size:19px; line-height:1.25; letter-spacing:-.01em; margin:0; font-weight:500; }
.qcard span{ font-size:14px; color:var(--ink-2); }
.qcard span::after{ content:" ↗"; }
@media (prefers-reduced-motion:reduce){ .tick-track{ animation:none; } .tick-view{ overflow-x:auto; } }

/* Comparison (3 col) */
.compare{ display:grid; gap:12px; margin-top:44px; }
@media (min-width:860px){ .compare{ grid-template-columns:1fr 1fr 1.08fr; align-items:stretch; } }
.col{ background:var(--stone); border-radius:var(--radius); padding:24px 22px; }
.col h3{ font-size:22px; margin-bottom:14px; text-align:left; }
.col ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.col li{ display:flex; gap:12px; align-items:flex-start; font-size:17px; line-height:1.4; }
.col li i{ flex:0 0 24px; height:24px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:700; font-size:13px; margin-top:1px; }
.col.no li i{ background:#E6CFCF; color:var(--no); }
.col.us{ background:var(--wine); color:var(--wine-ink); }
.col.us h3{ color:#fff; }
.col.us li i{ background:var(--wine-ink); color:var(--wine); }
.footnote{ text-align:center; font-size:14px; color:var(--ink-2); margin:18px auto 0; max-width:46rem; text-wrap:balance; }
.footnote a{ color:var(--ink-2); }

/* Gallery */
.gal{ display:grid; gap:14px; margin-top:40px; }
@media (min-width:860px){ .gal{ grid-template-columns:repeat(3,1fr); } }
.gtag{ text-align:center; margin:14px 0 0; font-size:15px; font-weight:600; color:var(--claret); }
.gcard{ background:var(--stone); border-radius:var(--radius); padding:14px; }
.gshot{ background:var(--paper); border-radius:12px; aspect-ratio:4/3; padding:16px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.gshot .gm{ font-family:var(--display); font-weight:600; font-size:18px; }
.gshot .gh{ font-family:var(--display); font-weight:600; font-size:24px; line-height:1.05; letter-spacing:-.02em; max-width:12em; }
.gshot .gb{ align-self:flex-start; background:var(--claret); color:#fff; border-radius:var(--pill); font-size:13px; font-weight:600; padding:8px 14px; margin-top:auto; }
.gshot.b{ background:var(--blush); } .gshot.c{ background:var(--wine); color:var(--wine-ink); } .gshot.c .gb{ background:var(--paper); color:var(--wine); }
.gmeta{ padding:14px 6px 4px; }
.gmeta b{ display:block; font-size:18px; }
.gmeta span{ display:block; font-size:15px; color:var(--ink-2); }
.gmeta code{ font:inherit; font-size:15px; color:var(--claret); font-weight:600; }

/* How it works */
.how{ display:grid; gap:12px; margin-top:44px; }
@media (min-width:860px){ .how{ grid-template-columns:repeat(3,1fr); } }
.hcell{ border-radius:var(--radius); padding:26px 24px 28px; background:var(--stone); }
.hcell.b{ background:var(--blush); } .hcell.c{ background:var(--wine); color:var(--wine-ink); }
.hcell h3{ margin-bottom:10px; }
.hcell p{ margin:0; }
.hcell .face{ width:64px; height:64px; border-radius:50%; overflow:hidden; margin-bottom:16px; background:var(--stone-2); }
.hcell .face img, .partner .face img{ width:190%; max-width:none; height:auto; margin:4px 0 0 -42%; }

/* Flip cards */
.menu{ display:grid; gap:12px; margin-top:44px; }
@media (min-width:640px){ .menu{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .menu{ grid-template-columns:repeat(4,1fr); } }
.flip{ perspective:1400px; min-height:270px; }
@media (min-width:640px){ .flip{ min-height:320px; } }
.flip-in{ position:relative; height:100%; min-height:inherit; transform-style:preserve-3d; transition:transform .6s var(--ease); }
.flip.on .flip-in{ transform:rotateY(180deg); }
.face-f,.face-b{ position:absolute; inset:0; border-radius:var(--radius); padding:24px 22px 20px; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; text-align:left; }
.face-f{ background:var(--stone); }
.face-b{ background:var(--wine); color:var(--wine-ink); transform:rotateY(180deg); visibility:hidden; transition:visibility 0s linear .3s; }
.flip.on .face-b{ visibility:visible; transition-delay:0s; }
.face-f{ transition:visibility 0s linear 0s; }
.flip.on .face-f{ visibility:hidden; transition-delay:.3s; }
.flip:nth-child(4n+2) .face-f{ background:var(--blush); }
.flip:nth-child(4n+3) .face-f{ background:var(--stone-2); }
.face-f h3{ margin:0 0 10px; }
.face-f p{ margin:0; font-size:17px; line-height:1.45; }
.face-f .price{ margin-top:auto; padding-top:16px; font-weight:700; font-size:17px; line-height:1.3; }
.face-f .price.tbd{ color:var(--ink-2); font-weight:600; }
.face-f .flag{ font-size:14px; font-weight:600; color:var(--claret); margin:-4px 0 10px; }
.face-b h3{ color:#fff; margin:0 0 12px; }
.face-b ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:16px; line-height:1.4; }
.face-b li{ display:flex; gap:10px; } .face-b li::before{ content:""; flex:0 0 14px; height:14px; margin-top:4px; background:var(--wine-soft); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat; }
.face-b .ask{ margin-top:auto; padding-top:14px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.face-b .ask a{ color:#fff; font-weight:600; font-size:15px; }
.turn{ margin-top:14px; align-self:flex-start; background:none; border:0; padding:6px 0; font:600 15px/1 var(--text); color:var(--claret); cursor:pointer; }
.face-b .turn{ color:var(--wine-soft); margin-top:0; }
.turn:hover{ text-decoration:underline; }
@media (prefers-reduced-motion:reduce){
  .flip-in{ transition:none; } .flip.on .flip-in{ transform:none; }
  .face-b{ transform:none; opacity:0; visibility:hidden; } .flip.on .face-b{ opacity:1; visibility:visible; } .flip.on .face-f{ visibility:hidden; }
}

/* Math band */
.band{ background:var(--wine); color:var(--wine-ink); }
.band h2{ color:#fff; }
.band .lead{ color:var(--wine-ink); }
.band .fine{ text-align:center; font-size:15px; color:var(--wine-soft); max-width:36rem; margin:22px auto 0; text-wrap:balance; }
.band .guar{ text-align:center; font-family:var(--display); font-weight:600; font-size:clamp(1.375rem, 1.1rem + 1vw, 1.875rem); margin:30px auto 0; color:#fff; text-wrap:balance; max-width:30rem; line-height:1.15; }

/* Story */
.story{ display:grid; gap:28px; align-items:center; }
@media (min-width:860px){ .story{ grid-template-columns:.8fr 1.2fr; gap:56px; } }
.story .pic{ background:var(--blush); border-radius:var(--radius); padding:24px 0 0; display:flex; justify-content:center; overflow:hidden; max-height:560px; }
.story .pic img{ height:520px; width:auto; object-fit:contain; object-position:top; }
@media (max-width:859px){ .story .pic img{ height:420px; } .story .pic{ max-height:440px; } }
.story h2{ text-align:center; }
.story p{ margin:18px auto 0; max-width:34rem; font-size:clamp(1.0625rem, .95rem + .4vw, 1.25rem); }
@media (min-width:860px){ .story h2{ text-align:left; } .story p{ margin-left:0; } }

/* Final CTA */
.final{ background:var(--blush); text-align:center; }
.final p{ margin:16px auto 0; }

/* Footer */
.foot{ background:var(--ink); color:#EDE6DE; padding:56px 0 40px; text-align:center; }
.foot .mark{ color:#fff; font-size:clamp(3rem, 2rem + 6vw, 7rem); display:block; line-height:1; }
.foot .mark span{ color:#D98A9A; }
.foot p{ margin:14px 0 0; font-size:17px; }
.foot nav{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:22px; font-size:15px; }
.foot nav a{ color:#EDE6DE; }
.foot .credit{ margin-top:22px; font-size:13px; color:#A79E95; }

/* Services: chips, table, pricing */
.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:22px; }
.chips span{ background:var(--stone); border-radius:var(--pill); padding:8px 14px; font-size:15px; font-weight:500; }
.tbl-wrap{ margin-top:40px; overflow-x:auto; border-radius:var(--radius); background:var(--stone); }
table.vs{ width:100%; min-width:720px; border-collapse:collapse; font-size:16px; }
table.vs th, table.vs td{ padding:14px 14px; text-align:center; vertical-align:middle; }
table.vs thead th{ font-weight:700; font-size:15px; }
table.vs thead th.us, table.vs td.us{ background:var(--wine); color:var(--wine-ink); }
table.vs thead th.us{ color:#fff; border-radius:12px 12px 0 0; }
table.vs tbody th{ text-align:left; font-weight:400; line-height:1.35; }
table.vs tbody th b{ font-weight:700; }
table.vs tbody tr + tr th, table.vs tbody tr + tr td{ border-top:1px solid var(--stone-2); }
table.vs tbody tr + tr td.us{ border-top-color:#6A2436; }
table.vs .y, table.vs .n{ display:inline-flex; vertical-align:middle; } table.vs .y{ color:var(--ok); } table.vs td.us .y{ color:#fff; }
table.vs .n{ font-weight:700; color:var(--no); }
.bring{ display:grid; gap:12px; margin-top:40px; }
@media (min-width:860px){ .bring{ grid-template-columns:1fr 1fr; } }
.bring .hcell ul{ margin:8px 0 0; padding-left:1.1em; display:grid; gap:6px; }
.partner{ display:flex; gap:16px; align-items:center; justify-content:center; margin:22px auto 0; max-width:40rem; text-align:left; }
.partner .face{ flex:0 0 64px; width:64px; height:64px; border-radius:50%; overflow:hidden; background:var(--blush); }

.faq{ max-width:46rem; margin:40px auto 0; display:grid; gap:10px; }
.faq details{ background:var(--stone); border-radius:14px; padding:0 20px; }
.faq summary{ cursor:pointer; list-style:none; font-weight:600; font-size:17px; padding:18px 28px 18px 0; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:0; top:14px; font-size:24px; font-weight:400; transition:transform .2s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0 0 18px; }

/* Intake form */
.form{ max-width:36rem; margin:36px auto 0; display:grid; gap:16px; text-align:left; }
.form label{ display:grid; gap:6px; font-weight:600; font-size:16px; }
.form input,.form select,.form textarea{ font:400 16px/1.4 var(--text); padding:13px 14px; border-radius:12px; border:2px solid var(--stone-2); background:#fff; color:var(--ink); width:100%; }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--claret); }
.form .opt{ font-weight:400; color:var(--ink-2); font-size:14px; }

/* Entrances */
.rise{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rise.in{ opacity:1; transform:none; }
.no-js .rise{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rise{ opacity:1; transform:none; transition:none; } }

/* ===== Love theme (Robert, Nov 8: "make it a sexy love theme too") =====
   Candlelit night fields, deep rose accents, italic love-letter type, real couple photography. */
:root{
  --paper:#F8F1EE; --stone:#F1E5E1; --stone-2:#E7D5D0; --blush:#F4D8D4;
  --claret:#A3213C; --claret-press:#871A31;
  --night:#24080F; --night-2:#3A111D; --night-ink:#F7EAE6; --night-soft:#E6C3C0;
  --rose:#EC8597; --rose-deep:#A82340;
  --wine:#4A0F1F;
}
::selection{ background:var(--rose-deep); color:#fff; }
.bar.night{ background:var(--night); }
.bar.night .mark, .bar.night .nav a{ color:var(--night-ink); }
.bar.night .nav a:hover{ color:var(--rose); }
.mark span{ color:var(--rose-deep); }
.bar.night .mark span, .foot .mark span{ color:var(--rose); }
.night{ background:var(--night); color:var(--night-ink); }
/* taste-skill-ignore: a candle-glow light pool is the love theme Robert asked for */
.hero.night{ background:radial-gradient(70% 55% at 50% 92%, rgba(196,45,74,.42), rgba(196,45,74,0) 70%), radial-gradient(40% 30% at 15% 20%, rgba(236,133,151,.12), rgba(236,133,151,0) 70%), var(--night); padding-bottom:56px; }
.night h1, .night h2{ color:#fff; }
.night .lead{ color:var(--night-ink); }
h1 em, h2 em{ font-style:italic; font-weight:500; color:var(--rose-deep); font-variation-settings:"opsz" 144; padding-right:.04em; }
.night h1 em, .night h2 em, .photo h2 em, .band h2 em{ color:var(--rose); }
.night .guar{ color:var(--night-soft); }
.btn{ background:var(--claret); }
.night .btn:not(.ghost), .photo .btn:not(.ghost){ background:var(--rose-deep); color:#fff; }
.night .btn:not(.ghost):hover, .photo .btn:not(.ghost):hover{ background:#D63A58; }
.night .btn.ghost{ color:var(--night-ink); box-shadow:inset 0 0 0 2px var(--night-soft); }
.night .btn.ghost:hover{ background:var(--night-ink); color:var(--night); }
.night .chips span{ background:var(--night-2); color:var(--night-ink); }
.pcard .tag{ display:inline-flex; align-items:center; gap:5px; color:var(--rose-deep); }
.pcard .tag::before{ content:""; width:12px; height:12px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.4 8.4 2.3 4.5 6 4.5c2.2 0 3.5 1.2 6 3.6 2.5-2.4 3.8-3.6 6-3.6 3.7 0 5.6 3.9 4 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.4 8.4 2.3 4.5 6 4.5c2.2 0 3.5 1.2 6 3.6 2.5-2.4 3.8-3.6 6-3.6 3.7 0 5.6 3.9 4 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat; }
.phone{ background:#120307; }
.phone .opt.on, .phone .prog i{ background:var(--rose-deep); }

/* Ticker joins the night field */
.ticker.night{ padding:8px 0 64px; }
.ticker.night .label{ color:var(--night-soft); }
.ticker.night .qcard{ background:var(--night-2); color:var(--night-ink); }
.ticker.night .qcard:hover{ background:#4B1626; }
.ticker.night .qcard span{ color:var(--night-soft); }

/* Comparison + menu accents */
.col.us{ background:var(--night); }
.col.us li i{ background:var(--rose); color:var(--night); }
.face-b{ background:var(--night); }
.face-b li::before{ background:var(--rose); }
.face-b .turn{ color:var(--rose); }
.turn{ color:var(--rose-deep); }
.gtag{ color:var(--rose-deep); }
.gshot .gb{ background:var(--rose-deep); }
.gshot.c{ background:var(--night); }
.hcell.c{ background:var(--night); }
table.vs thead th.us, table.vs td.us{ background:var(--night); }
table.vs tbody tr + tr td.us{ border-top-color:#4B1626; }

/* Photo fields: real couple pictures under a wine scrim */
.photo{ position:relative; color:#fff; background-color:var(--night); background-size:cover; background-position:center; isolation:isolate; }
.photo::before{ content:""; position:absolute; inset:0; background:rgba(36,8,15,.70); z-index:-1; }
.photo h2{ color:#fff; }
.photo .lead, .photo p{ color:var(--night-ink); }
.photo .fine{ color:var(--night-soft); }
.band.photo{ background-image:url(/assets/love-couple.jpg); background-position:50% 60%; padding:calc(var(--sec) + 20px) 0; }
.final.photo{ background-image:url(/assets/love-dinner.jpg); background-position:50% 70%; padding:calc(var(--sec) + 30px) 0; }
.band.photo.hands{ background-image:url(/assets/love-hands.jpg); background-position:60% 50%; }
.foot{ background:var(--night); }
.announce{ background:var(--rose-deep); }
.story .pic{ background:var(--blush); }
html, body{ overflow-x:clip; }
.tbl-wrap{ contain:paint; max-width:100%; }
.stickers{ overflow-x:clip; overflow-y:visible; }
.night .pcard, .night .phone .scr{ color:var(--ink); }
.night .phone .opt:not(.on){ color:var(--ink); }
.photo::before{ background:rgba(30,6,13,.80); }
.band.photo .guar{ color:#fff; }
@media (min-width:640px){ .flip{ min-height:300px; } }
@media (min-width:1060px){ .flip{ min-height:350px; } }
.face-b .ask{ padding-top:12px; }