/*
 * Copyright (c) 2023-2026 HoopFrog Inc. All rights reserved.
 * DateSteady homepage v2 (owner-approved design 2026-10-28; source /tmp/mockups/interactive/datesteady.html).
 * Every class is prefixed dh- so nothing here touches the dialogs, footer or other pages.
 */
/* Resets first, so the design's own class rules below win over them (and over the old head's `main p, main li`) */
.dh-scope :where(p,li){font-size:inherit;line-height:inherit}
.dh-scope :where(h1,h2,h3){font-family:inherit;margin:0}


.dh-page{--bg:#FEFDFC;--herobg:linear-gradient(180deg,#FAF5F0 0%,#FEFDFC 100%);--surface:#FAF5F0;--card:#fff;--text:#2D2D2D;--text2:#3D332A;--head:#17120D;
--link:#5E340F;--btn:#5E340F;--btnshadow:rgba(94,52,15,.25);--acc:#B8862F;--accdark:#D9A94F;--kicker:#5E340F;--eyebrow:#5E340F;--chip:#F4E8D3;--chiptext:#5E340F;
--track:#EADFD0;--line:#EADFD0;--line2:#D9C3A3;--darkbg:#17120D;--darktext:#F2EBE1;--darkdim:#D4CABC;--finalbg:#5E340F;--finalbtn:#FEFDFC;--finalbtntext:#5E340F;--found:#D9A94F;
--fs:19px;--h1:52px;--h1m:36px;--h2:36px;--h2m:29px;--h3:21px;--lede:21px;--ledem:19px;--btnfs:19px}
.dh-page .dh-scope h1,.dh-page .dh-sec h2{font-weight:700;letter-spacing:-.015em}
.dh-page .dh-btn{min-height:58px;padding:0 32px}
.dh-page .dh-eyebrow{font-size:16px}
.dh-page .dh-notes{font-size:17px}.dh-page .dh-checks li{font-size:15px}.dh-page .dh-ploc{font-size:17px}
.dh-page .dh-slist p,.dh-page .dh-plan ul,.dh-page .dh-legend li{font-size:17px}.dh-page .dh-slist h3{font-size:19px}
.dh-page .dh-brow p{font-size:16px}.dh-page .dh-bhead{font-size:17px}
.dh-page .dh-strip{font-size:17px}.dh-page .dh-iphone,.dh-page .dh-agenote{font-size:16px}
.dh-page .dh-pcard{border-radius:20px}
.dh-page .dh-nav{font-size:17px}.dh-page .dh-signin{font-size:17px}
.dh-scope,.dh-scope *{box-sizing:border-box}.dh-scope :where(h1,h2,h3,p,ul,ol,li,figure){margin:0;padding:0}
.dh-scope{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:var(--fs);line-height:1.55;-webkit-font-smoothing:antialiased}
.dh-scope a{color:var(--link);text-decoration:none}
.dh-scope ul,.dh-scope ol{list-style:none}
.dh-wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.dh-narrow{max-width:820px}
.dh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dh-hdr{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
/* 2026-10-30: iPhone home-screen app (black-translucent status bar, viewport-fit=cover) drew the status bar and notch over this header. Pad by the safe-area insets; 0 everywhere else. */
.dh-hrow{display:flex;align-items:center;height:72px;gap:32px}
.dh-logo img{height:30px;display:block}
.dh-nav{display:flex;gap:28px;margin-left:auto;font-weight:500;font-size:15px}
.dh-nav a{color:var(--text)}
.dh-hact{display:flex;gap:12px;align-items:center}
.dh-lang{background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:600 13px Inter,system-ui,sans-serif;color:var(--text)}
.dh-signin{border:1.5px solid var(--btn);color:var(--btn);border-radius:999px;padding:9px 20px;font-weight:600;font-size:15px}
.dh-hero{padding:64px 0 72px;background:var(--herobg)}
.dh-hgrid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.dh-eyebrow{display:inline-block;font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--eyebrow);background:var(--chip);padding:6px 14px;border-radius:999px;margin-bottom:20px}
.dh-scope h1{font-size:var(--h1);line-height:1.06;letter-spacing:-.025em;font-weight:800;color:var(--head);max-width:12.5em}
.dh-lede{font-size:var(--lede);margin-top:20px;max-width:34em;color:var(--text2)}
.dh-ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;align-items:center}
.dh-btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font-weight:700;font-size:var(--btnfs)}
.dh-btn.dh-primary{background:var(--btn);color:#fff;box-shadow:0 6px 18px var(--btnshadow)}
.dh-btn.dh-sm{min-height:48px;font-size:15px}
.dh-btn.dh-quiet{color:var(--btn);border:1.5px solid var(--line2);background:transparent}
.dh-agenote{margin-top:14px;font-size:14px;color:var(--text2)}
.dh-agenote b{color:var(--head)}
.dh-strip{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;font-size:15px;font-weight:600;color:var(--head)}
.dh-strip li{display:flex;gap:7px;align-items:center}
.dh-ck{color:var(--acc);display:inline-flex}
.dh-iphone{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.dh-pcard{background:var(--card);border-radius:24px;box-shadow:0 24px 60px rgba(15,23,42,.12);border:1px solid var(--line);overflow:hidden;max-width:470px;margin-left:auto;position:relative}
.dh-ptag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);color:#334155;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;z-index:2}
.dh-pimg{aspect-ratio:16/10;overflow:hidden}
.dh-pimg svg{width:100%;height:100%;display:block;object-fit:cover}
.dh-pbody{padding:22px 24px 24px}
.dh-pname{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dh-pname h2{font-size:24px;font-weight:800;color:var(--head)}
.dh-ploc{display:inline-flex;gap:4px;align-items:center;color:var(--text2);font-size:15px}
.dh-compat{display:flex;gap:14px;align-items:center;margin-top:16px}
.dh-compat b{display:block;color:var(--head);font-size:16px}
.dh-compat span{font-size:13px;color:var(--text2)}
.dh-ring{--p:80;width:62px;height:62px;border-radius:50%;background:conic-gradient(var(--acc) calc(var(--p)*1%),var(--track) 0);display:grid;place-items:center;flex:none}
.dh-ring span{width:48px;height:48px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-weight:800;font-size:16px;color:var(--head)}
.dh-notes{margin-top:14px;display:grid;gap:7px;font-size:15px}
.dh-notes li{padding-left:18px;position:relative}
.dh-notes li:before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.dh-checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dh-checks li{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;background:var(--chip);color:var(--chiptext);padding:5px 10px 5px 7px;border-radius:999px}
.dh-checks .dh-ck{color:var(--chiptext)}
.dh-voice{display:flex;align-items:center;gap:12px;margin-top:16px;background:var(--surface);border-radius:14px;padding:10px 12px}
.dh-play{width:44px;height:44px;border-radius:50%;border:0;background:var(--btn);color:#fff;display:grid;place-items:center;flex:none}
.dh-wave{display:flex;gap:3px;align-items:center;flex:1;height:30px}
.dh-wave i{width:3px;border-radius:2px;background:var(--acc);opacity:.75}
.dh-dur{font-size:13px;color:var(--text2);white-space:nowrap}
.dh-why{margin-top:16px;width:100%;min-height:48px;border-radius:12px;border:1.5px solid var(--btn);background:transparent;color:var(--btn);font:700 16px Inter,system-ui,sans-serif}
.dh-sec{padding:96px 0}
.dh-alt{background:var(--surface)}
.dh-kicker{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--kicker);margin-bottom:12px}
.dh-sec h2{font-size:var(--h2);line-height:1.15;letter-spacing:-.02em;font-weight:800;color:var(--head);max-width:20em}
.dh-sub{margin-top:16px;color:var(--text2);font-size:var(--lede);max-width:34em}
.dh-bgrid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.dh-bgrid .dh-btn{margin-top:28px}
.dh-drawer{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 26px;box-shadow:0 18px 40px rgba(15,23,42,.08)}
.dh-dhead{display:flex;justify-content:space-between;font-size:18px;color:var(--head);margin-bottom:10px}
.dh-x{font-size:24px;line-height:1;color:var(--text2)}
.dh-brow{padding:12px 0;border-bottom:1px solid var(--line)}
.dh-bhead{display:flex;justify-content:space-between;font-weight:700;color:var(--head);font-size:15px}
.dh-bw{font-weight:600;color:var(--kicker);font-size:13px}
.dh-bar{height:8px;background:var(--track);border-radius:9px;margin:7px 0 6px}
.dh-bar i{display:block;height:100%;border-radius:9px;background:var(--acc)}
.dh-brow p{font-size:14px;color:var(--text2)}
.dh-dfoot{font-size:13px;color:var(--text2);margin-top:12px}
.dh-dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.dh-diff{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px}
.dh-dicon{width:48px;height:48px;border-radius:14px;background:var(--chip);color:var(--chiptext);display:grid;place-items:center}
.dh-diff h3{font-size:var(--h3);margin-top:18px;color:var(--head)}
.dh-diff p{margin-top:8px;color:var(--text2)}
.dh-diff a{display:inline-block;margin-top:14px;font-weight:600;font-size:15px}
.dh-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px;counter-reset:s}
.dh-step{position:relative;padding-top:6px}
.dh-num{position:absolute;right:0;top:0;font-size:64px;font-weight:800;color:var(--track);line-height:1}
.dh-sicon{width:52px;height:52px;border-radius:50%;background:var(--btn);color:#fff;display:grid;place-items:center}
.dh-step h3{font-size:var(--h3);margin-top:18px;color:var(--head)}
.dh-step p{margin-top:8px;color:var(--text2)}
.dh-dark{background:var(--darkbg);color:var(--darktext)}
.dh-dark h2{color:#fff}.dh-dark .dh-sub{color:var(--darkdim)}.dh-dark .dh-kicker{color:var(--accdark)}
.dh-dark .dh-tlink{color:var(--accdark)}
.dh-sgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px}
.dh-slist{display:grid;gap:22px}
.dh-slist li{display:flex;gap:16px}
.dh-sfi{width:44px;height:44px;flex:none;border-radius:12px;background:rgba(255,255,255,.07);color:var(--accdark);display:grid;place-items:center}
.dh-slist h3{font-size:17px;color:#fff}
.dh-slist p{color:var(--darkdim);font-size:15px;margin-top:2px}
.dh-tlink{display:inline-block;margin-top:22px;font-weight:700}
.dh-agrid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.dh-area{display:flex;gap:10px;margin-top:26px;max-width:460px}
.dh-area input{flex:1;min-height:48px;border:1.5px solid var(--line2);border-radius:999px;padding:0 18px;font:16px Inter,system-ui,sans-serif;background:var(--card)}
.dh-plat{margin-top:20px;font-size:15px;color:var(--text2)}
.dh-mapcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}
.dh-map svg{width:100%;height:auto;display:block;border-radius:12px}
.dh-legend{display:grid;gap:10px;margin-top:16px}
.dh-legend li{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.dh-legend b{display:block;color:var(--head)}
.dh-legend span{color:var(--text2)}
.dh-dot{width:14px;height:14px;border-radius:50%;margin-top:4px;flex:none}
.dh-dot.dh-open{background:var(--acc)}.dh-dot.dh-founding{background:var(--found);}.dh-dot.dh-soon{background:#CBD5E1}
.dh-mnote{font-size:12px;color:var(--text2);margin-top:12px}
.dh-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;max-width:940px}
.dh-plan{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:32px;display:flex;flex-direction:column}
.dh-plan h3{font-size:20px;color:var(--head)}
.dh-price{font-size:44px;font-weight:800;color:var(--head);margin-top:6px;letter-spacing:-.02em}
.dh-price small{font-size:16px;font-weight:600;color:var(--text2);letter-spacing:0}
.dh-pn{color:var(--text2);font-size:15px}
.dh-plan ul{display:grid;gap:9px;margin:20px 0 24px;font-size:15px}
.dh-plan li{display:flex;gap:8px}
.dh-plan .dh-btn{align-self:flex-start;margin-top:auto}
.dh-vipp{border:2px solid var(--acc)}
.dh-terms{font-size:13px;color:var(--text2);border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.dh-vipp .dh-tlink{margin-top:10px;font-size:14px}
.dh-faq details{border-bottom:1px solid var(--line);padding:20px 0}
.dh-faq details:first-of-type{margin-top:28px}
.dh-faq summary{font-weight:700;font-size:var(--h3);color:var(--head);list-style:none;display:flex;justify-content:space-between;cursor:pointer}
.dh-faq summary:after{content:"+";color:var(--kicker);font-weight:600}
.dh-faq details[open] summary:after{content:"\2212"}
.dh-faq details p{margin-top:10px;color:var(--text2)}
.dh-final{background:var(--finalbg);text-align:center;color:#fff}
.dh-fcta h2{color:#fff;margin:0 auto}
.dh-fcta p{color:var(--darkdim);max-width:34em;margin:14px auto 0;font-size:var(--lede)}
.dh-fcta .dh-btn{margin-top:28px;background:var(--finalbtn);color:var(--finalbtntext);box-shadow:none}
.dh-fcta .dh-fsmall{font-size:14px;margin-top:16px}
@media (max-width:768px){
 .dh-wrap{padding:0 20px}
 .dh-nav{display:none}.dh-hact{margin-left:auto}
 .dh-hrow{height:60px}.dh-logo img{height:26px}
 .dh-hero{padding:28px 0 40px}
 .dh-hgrid,.dh-bgrid,.dh-sgrid,.dh-agrid,.dh-pgrid{grid-template-columns:minmax(0,1fr);gap:32px}
 .dh-scope h1{font-size:var(--h1m)}
 .dh-lede{font-size:var(--ledem)}
 .dh-ctas{flex-direction:column;align-items:stretch}
 .dh-btn{width:100%}
 .dh-strip{gap:10px 16px;font-size:14px}
 .dh-pcard{margin:0 auto}
 .dh-sec{padding:64px 0}
 .dh-sec h2{font-size:var(--h2m)}
 .dh-dgrid,.dh-steps{grid-template-columns:minmax(0,1fr);gap:16px}
 .dh-area{flex-direction:column}
}

.dh-hdr .dh-wrap,.dh-hero .dh-wrap{max-width:1240px}
@media (max-width:768px){.dh-pimg{aspect-ratio:4/3}.dh-lang{display:none}}
@media (max-width:768px){.dh-dur{white-space:normal;font-size:12px;max-width:70px}}
/* v2: photos, carousel, voice, dialog */
.dh-pimg{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--surface)}
.dh-pimg img{width:100%;height:100%;object-fit:cover;display:block}
.dh-carousel:focus-visible{outline:3px solid var(--acc);outline-offset:-3px}
.dh-track{display:flex;height:100%;transition:transform .35s ease;list-style:none}
.dh-slide{flex:0 0 100%;height:100%}
.dh-cnav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#0F172A;font:600 28px/1 Inter,system-ui,sans-serif;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.18);cursor:pointer}
.dh-cnav.dh-prev{left:12px}.dh-cnav.dh-next{right:12px}
.dh-ccount{position:absolute;top:14px;right:14px;background:rgba(15,23,42,.72);color:#fff;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px}
.dh-cdots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:2px}
.dh-cdot{width:24px;height:24px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.dh-cdot:before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.dh-cdot[aria-current="true"]:before{background:#fff;width:10px;height:10px}
.dh-play .dh-ipause{display:none}.dh-voice.dh-playing .dh-ipause{display:block}.dh-voice.dh-playing .dh-iplay{display:none}
.dh-play{cursor:pointer}.dh-voice.dh-playing .dh-wave i{opacity:1}
.dh-dlgback{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:20;opacity:0;transition:opacity .2s}
.dh-dlgback.dh-on{opacity:1}
.dh-whydlg{position:fixed;z-index:21;top:0;right:0;bottom:0;width:min(480px,100%);border-radius:20px 0 0 20px;overflow:auto;transform:translateX(100%);transition:transform .25s ease;padding:26px 28px 32px}
.dh-whydlg.dh-on{transform:none}
.dh-whydlg .dh-dhead h2{font-size:22px;color:var(--head)}
.dh-whydlg .dh-x{width:44px;height:44px;border:0;background:var(--surface);border-radius:50%;font-size:26px;cursor:pointer;margin:-8px -8px 0 0}
.dh-dintro{font-size:15px;color:var(--text2);margin-bottom:6px}
.dh-whydlg .dh-btn{margin-top:20px;width:100%}
.dh-tint{background:#ECFDF5}.dh-tint .dh-sfi{background:#D1FAE5;color:#047857}.dh-tint .dh-slist h3{color:var(--head)}.dh-tint .dh-slist p{color:var(--text2)}
@media (max-width:768px){.dh-whydlg{top:auto;left:0;width:100%;max-height:88vh;border-radius:20px 20px 0 0;transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.dh-track,.dh-whydlg,.dh-dlgback{transition:none}}
/* v3: compact layout */
.dh-wrap{max-width:1120px;padding:0 28px}
.dh-hdr .dh-wrap,.dh-hero .dh-wrap{max-width:1120px}
.dh-hrow{height:64px}
.dh-hero{padding:48px 0}
.dh-hgrid{grid-template-columns:minmax(0,580px) 360px;justify-content:space-between;gap:56px;align-items:center}
.dh-scope h1{font-size:var(--h1);max-width:none}
.dh-eyebrow{margin-bottom:16px}
.dh-lede{margin-top:16px}
.dh-ctas{margin-top:24px}
.dh-strip{margin-top:20px}
.dh-pcard{max-width:360px;width:100%;border-radius:18px;box-shadow:0 16px 40px rgba(15,23,42,.12)}
.dh-pimg{aspect-ratio:auto;height:300px}
.dh-pimg img{object-position:50% 30%}
.dh-ptag{top:10px;left:10px;font-size:11px;padding:4px 9px}
.dh-ccount{top:10px;right:10px;font-size:11px}
.dh-cnav{width:44px;height:44px;font-size:24px}
.dh-pbody{padding:14px 18px 16px}
.dh-pname h2{font-size:19px}
.dh-ploc{font-size:13px}
.dh-compat{margin-top:10px;gap:10px}
.dh-compat b{font-size:14px}.dh-compat span{font-size:12px;line-height:1.3;display:block}
.dh-ring{width:46px;height:46px}.dh-ring span{width:36px;height:36px;font-size:13px}
.dh-notes{margin-top:10px;gap:4px;font-size:13px;line-height:1.4}
.dh-notes li{padding-left:14px}.dh-notes li:before{width:6px;height:6px;top:.5em}
.dh-checks{margin-top:10px;gap:5px}
.dh-checks li{font-size:11.5px;padding:3px 8px 3px 5px}
.dh-checks svg{width:13px;height:13px}
.dh-voice{margin-top:10px;padding:6px 10px;gap:10px;border-radius:12px}
.dh-wave{height:24px}
.dh-dur{font-size:12px}
.dh-why{margin-top:10px;min-height:44px;font-size:15px}
.dh-sec{padding:56px 0}
.dh-kicker{font-size:13px;margin-bottom:8px}
.dh-sec h2{font-size:var(--h2)}
.dh-sub{margin-top:10px}
.dh-dgrid{gap:18px;margin-top:24px}
.dh-diff{padding:22px;border-radius:16px}
.dh-diff h3{margin-top:12px}.dh-diff p{margin-top:4px}.dh-diff a{margin-top:8px}
.dh-dicon{width:40px;height:40px;border-radius:12px}
.dh-steps{gap:24px;margin-top:24px}
.dh-sicon{width:44px;height:44px}
.dh-step h3{margin-top:12px}.dh-step p{margin-top:4px}
.dh-num{font-size:48px}
.dh-sgrid{grid-template-columns:320px minmax(0,1fr);gap:48px;align-items:start}
.dh-slist{grid-template-columns:1fr 1fr;gap:18px 28px}
.dh-tlink{margin-top:14px}
.dh-pgrid{margin-top:24px;gap:20px;max-width:none}
.dh-plan{padding:24px;border-radius:18px}
.dh-plan ul{margin:14px 0 18px;gap:6px}
.dh-price{font-size:38px}
.dh-joinband{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.dh-jrow{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.dh-joinlink{display:inline-flex;gap:6px;align-items:center;min-height:44px;background:none;border:0;font:700 var(--btnfs) Inter,system-ui,sans-serif;color:var(--link);cursor:pointer;padding:0}
.dh-jrow p{color:var(--text2);font-size:15px}
.dh-faq .dh-narrow{max-width:1120px}
.dh-faq details{padding:14px 0}
.dh-faq details:first-of-type{margin-top:16px}
.dh-faq h2{display:inline}
.dh-faqgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.dh-final{padding:48px 0}
.dh-fcta .dh-btn{margin-top:20px}
@media (max-width:768px){
 .dh-wrap{padding:0 18px}
 .dh-hero{padding:24px 0 32px}
 .dh-hgrid{grid-template-columns:minmax(0,1fr);gap:24px}
 .dh-pcard{max-width:360px}
 .dh-pimg{height:260px}
 .dh-sec{padding:36px 0}
 .dh-final{padding:36px 0}
 .dh-sgrid{grid-template-columns:minmax(0,1fr);gap:20px}
 .dh-slist{grid-template-columns:minmax(0,1fr);gap:14px}
 .dh-faqgrid{grid-template-columns:minmax(0,1fr)}
 .dh-jrow{gap:6px}
 .dh-dgrid,.dh-steps{gap:12px;margin-top:18px}
}
.dh-hgrid{justify-content:center;gap:72px}
.dh-compat .dh-ring span{display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--head);line-height:1}
.dh-wave{min-width:0;overflow:hidden}
.dh-dur{font-size:11px}
.dh-page .dh-notes{font-size:15px}.dh-page .dh-checks li{font-size:12.5px}.dh-page .dh-ploc{font-size:15px}.dh-page .dh-pname h2{font-size:21px}
.dh-page .dh-ctas .dh-btn{padding:0 24px}
@media (max-width:768px){.dh-hgrid{gap:24px}.dh-page .dh-ctas .dh-btn{padding:0 24px}}

/* v4: owner feedback 2026-10-28 */
.dh-hero{padding:24px 0 40px}
.dh-hgrid{align-items:start}
.dh-hgrid>div:first-child{padding-top:28px}
.dh-hrow{height:72px}
.dh-logo img{height:40px}
.dh-compatbtn{width:100%;margin-top:10px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line2);border-radius:14px;padding:8px 10px;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.dh-compatbtn:hover{border-color:var(--btn);box-shadow:0 4px 14px var(--btnshadow)}
.dh-compatbtn:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.dh-compatbtn .dh-ctext{display:block;flex:1}
.dh-compatbtn .dh-ctext span{color:var(--link);font-weight:600}
.dh-compatbtn .dh-chev{font-size:26px;line-height:1;color:var(--btn);font-weight:700;padding-right:2px}
@media (max-width:760px){.dh-hrow{height:60px}.dh-logo img{height:32px}.dh-hgrid>div:first-child{padding-top:4px}}
@media (prefers-reduced-motion:reduce){.dh-compatbtn{transition:none}}

/* v5: compatibility breakdown pops out of the tap/click point (owner 2026-10-28) */
.dh-whydlg{right:auto;bottom:auto;width:min(440px,calc(100vw - 24px));max-height:min(82vh,660px);border-radius:20px;box-shadow:0 24px 60px rgba(15,23,42,.28);
 transform:scale(.08);opacity:0;transition:transform .26s cubic-bezier(.2,.9,.25,1.05),opacity .18s ease}
.dh-whydlg.dh-on{transform:scale(1);opacity:1}
@media (max-width:768px){.dh-whydlg{right:auto;bottom:auto;width:calc(100vw - 24px);max-height:82vh;border-radius:20px;transform:scale(.08)}.dh-whydlg.dh-on{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.dh-whydlg,.dh-whydlg.dh-on{transform:none;transition:opacity .15s}}
/* v6: the three differences fill the space under the hero copy (owner 2026-10-28: "a lot of dead space here") */
.dh-hgrid{grid-template-areas:"copy proof" "diffs proof";grid-template-rows:auto 1fr;row-gap:0}
.dh-hcopy{grid-area:copy}.dh-hproof{grid-area:proof}
.dh-hdiffs{grid-area:diffs;list-style:none;margin:28px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:grid;gap:14px;max-width:580px;align-self:start}
.dh-hdiffs li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--text2)}
.dh-hdiffs b{color:var(--head);font-weight:700}
.dh-hdiffs a{color:var(--link);font-weight:600;white-space:nowrap}
.dh-hdi{flex:none;width:34px;height:34px;border-radius:10px;background:var(--chip);color:var(--chiptext);display:grid;place-items:center}
.dh-hdi svg{width:18px;height:18px}
@media (max-width:760px){.dh-hgrid{grid-template-areas:"copy" "proof" "diffs";grid-template-rows:auto}.dh-hdiffs{margin-top:24px}}
/* v7: "Why people join" grid — every distinctive feature from the live page, compact (owner 2026-10-28) */
.dh-feats{padding:48px 0;background:var(--surface)}
.dh-feats h2{font-size:var(--h2);margin:4px 0 22px;color:var(--head)}
.dh-fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dh-feat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:start}
.dh-feat .dh-fi{grid-row:span 2;width:34px;height:34px;border-radius:10px;background:var(--chip);color:var(--chiptext);display:grid;place-items:center}
.dh-feat .dh-fi svg{width:18px;height:18px}
.dh-feat h3{font-size:16px;margin:2px 0 4px;color:var(--head);line-height:1.3}
.dh-feat p{font-size:14px;line-height:1.45;color:var(--text2);margin:0}
.dh-feat .dh-vip{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;background:var(--btn);color:#fff;border-radius:999px;padding:2px 7px;margin-left:6px;vertical-align:2px}
@media (max-width:1000px){.dh-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.dh-fgrid{grid-template-columns:1fr}.dh-feats{padding:32px 0}}
/* v8: six headline differences in the hero, two columns (owner: "make it 6") */
.dh-hdiffs{grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:22px;padding-top:18px;max-width:600px}
.dh-hdiffs li{font-size:14px;line-height:1.4;gap:10px}
.dh-hdiffs li>span:last-child{display:block}
.dh-hdiffs b{display:block;margin-bottom:2px}
.dh-hdiffs a{display:none}
.dh-hdi{width:30px;height:30px;border-radius:9px}.dh-hdi svg{width:16px;height:16px}
@media (max-width:620px){.dh-hdiffs{grid-template-columns:1fr}}
/* v9: only the real differences — 3 in the hero, 3 larger cards below (owner 2026-10-28) */
.dh-hdiffs{grid-template-columns:1fr;gap:12px;max-width:560px}
.dh-hdiffs li{font-size:15px}
.dh-fgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dh-feat{padding:20px 22px;grid-template-columns:44px 1fr;column-gap:14px}
.dh-feat .dh-fi{width:44px;height:44px;border-radius:12px}.dh-feat .dh-fi svg{width:22px;height:22px}
.dh-feat h3{font-size:18px;margin-bottom:6px}
.dh-feat p{font-size:15px;line-height:1.5}
.dh-feat .dh-vip{display:inline-block;margin:6px 0 0;vertical-align:0}
@media (max-width:1000px){.dh-fgrid{grid-template-columns:1fr}}
/* v10: lead with the pain point, then the fix (owner 2026-10-28) */
.dh-hdiffs .dh-pain{display:block;font-size:12.5px;font-weight:600;color:var(--text2);opacity:.85;margin-bottom:1px}
.dh-feat .dh-pain{grid-column:2;font-size:14px;font-weight:600;color:var(--text2);margin:0 0 2px;font-style:italic}
.dh-feat .dh-fi{grid-row:span 3}
.dh-feat .dh-vip{margin-left:6px}


/* ======================================================================
   Integration with the live page (not part of the mockup's own CSS).
   The old page's head styles, liquid-glass-landing.css and dark-mode.css
   still load (the login/2FA dialogs, cookie strip and footer use them), so
   the rules below keep them off the new sections.
   ====================================================================== */
html body.dh-page{background:var(--bg)}
html.lc-liquid body.dh-page{background:var(--bg)!important;background-image:none!important}
body.dh-page .ambient-orb{display:none!important}
html body.dh-page main.dh-scope section.dh-hero{background:var(--herobg)!important}
html body.dh-page main.dh-scope section.dh-sec{background:var(--bg)!important;background-image:none!important}
html body.dh-page main.dh-scope section.dh-feats,
html body.dh-page main.dh-scope section#pricing.dh-alt,
html body.dh-page main.dh-scope section.dh-joinband{background:var(--surface)!important;background-image:none!important}
html body.dh-page main.dh-scope section.dh-dark{background:var(--darkbg)!important;background-image:none!important}
html body.dh-page main.dh-scope section.dh-final{background:var(--finalbg)!important;background-image:none!important}

/* Header: logo, live language menu (index-app.js builds #lang-menu), Sign in = the live login dialog */
.dh-logo{display:inline-flex;align-items:center;min-height:44px}
.dh-logo picture{display:block}
.dh-logo img{width:auto}
html.dark-mode .dh-logo img{content:url("/logo-2026-dark.webp?v=20261016ds")}
.dh-nav a{display:inline-flex;align-items:center;min-height:44px}
.dh-nav a:hover,.dh-tlink:hover,.dh-iphone:hover,.dh-joinlink:hover span{text-decoration:underline;text-underline-offset:3px}
.dh-langdd{position:relative}
/* 44px tap area; the visible box stays the design's small EN chip */
html body.dh-page .dh-hdr .dh-lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0;background:none!important;border:0!important;font:600 13px Inter,system-ui,sans-serif;color:var(--text)!important;cursor:pointer;box-shadow:none}
html body.dh-page .dh-hdr .dh-lang span{display:block;background:none!important;color:inherit!important;font:inherit;border:1px solid var(--line);border-radius:8px;padding:8px 10px;line-height:normal}
html body.dh-page .dh-hdr .lang-menu{right:0;left:auto}
.dh-signin{display:inline-flex;align-items:center;min-height:44px;background:transparent;font-family:inherit;line-height:inherit;cursor:pointer}
.dh-signin:hover{background:var(--chip)}
.dh-scope :is(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--acc);outline-offset:2px}

/* Buttons are links here; keep the live link styles off them */
.dh-btn{text-decoration:none!important;text-align:center}
.dh-btn.dh-primary:hover{filter:brightness(1.08)}
.dh-quiet:hover{border-color:var(--btn)}

/* Carousel photos are <picture> (webp + jpg) */
.dh-slide picture{display:block;width:100%;height:100%}
/* 44px touch targets for the photo dots (the dot itself stays the mockup size) */
.dh-cdots{bottom:0;gap:0}
.dh-cdot{width:44px;height:44px}

/* Prices come from the live price spans (core/PriceHtml.php, js/pricing.js) */
.dh-price .lc-currency-code{font-size:16px;font-weight:600;color:var(--text2);letter-spacing:0}
.dh-price small{margin-left:.3em}
.dh-plan ul li .dh-ck{margin-top:.2em}

/* Safety: the link inside the last item */
.dh-dark .dh-slist p a{color:var(--accdark);text-decoration:underline;text-underline-offset:3px}

/* FAQ summary: room for the +/- sign */
.dh-faq summary{gap:16px;align-items:center}
.dh-faq summary::-webkit-details-marker{display:none}
.dh-faq details>p{font-size:var(--fs)}

/* Join band: the live map dialog is unchanged (css/where-map.css) */
.dh-joinlink{text-align:left}

/* The popup is not a liquid-glass dialog (liquid-glass-landing.css styles every [role=dialog]) */
html body.dh-page .dh-whydlg[role="dialog"]{background:var(--card)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid var(--line)!important;box-shadow:0 24px 60px rgba(15,23,42,.28)!important;color:var(--text)!important}
html body.dh-page .dh-whydlg[role="dialog"] h2{color:var(--head)!important}
html body.dh-page .dh-whydlg[role="dialog"] p{color:var(--text2)!important}
html body.dh-page .dh-whydlg .dh-bhead{color:var(--head)}
.dh-whydlg .dh-x{display:grid;place-items:center;color:var(--text2);flex:none}
.dh-whydlg .dh-dhead{align-items:flex-start;gap:12px}
.dh-whydlg .dh-btn{color:#fff}

/* Dark mode (the site follows the system setting; same bronze/gold family) */
html.dark-mode body.dh-page{--bg:#17120D;--herobg:linear-gradient(180deg,#201810 0%,#17120D 100%);--surface:#1F1811;--card:#2A2018;--text:#F2EBE1;--text2:#D4CABC;--head:#FBF6EC;
--link:#E0B84D;--btn:#D9A94F;--btnshadow:rgba(0,0,0,.35);--acc:#D9A94F;--accdark:#E0B84D;--kicker:#E0B84D;--eyebrow:#F4E8D3;--chip:#3A2D1F;--chiptext:#F0D9A8;
--track:#3A2E22;--line:#3A2E22;--line2:#5A4632;--darkbg:#0F0B08;--finalbg:#3A230E;--finalbtn:#FEFDFC;--finalbtntext:#5E340F}
html.dark-mode body.dh-page :is(.dh-btn.dh-primary,.dh-play,.dh-sicon,.dh-feat .dh-vip){color:#17120D}
html.dark-mode body.dh-page .dh-fcta .dh-btn{color:var(--finalbtntext)}
html.dark-mode body.dh-page .dh-ring span{background:var(--card)}
/* The old head styles hyphenate every heading inside #main-content; the design does not */
#main-content.dh-scope :is(h1,h2,h3){-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word}

/* Site-wide public type scale (touch-targets.css: h1 36px, a 16px floor on unclassed p/li inside <article>)
   and liquid-glass-landing.css (inline-block section h2 with a gradient underline, a 3px strip over the page)
   all use !important. The approved design sets its own sizes, so they are restated here, scoped to this page. */
html.dh-home::before{display:none!important}
html body.dh-page main.dh-scope h1{font-size:var(--h1)!important;line-height:1.06!important;letter-spacing:-.015em!important;font-weight:700!important}
html body.dh-page main.dh-scope section h2{display:block;position:static}
html body.dh-page main.dh-scope section.dh-faq h2{display:inline}
html body.dh-page main.dh-scope section h2::after{content:none!important;display:none!important}
html body.dh-page #main-content .dh-pcard .dh-notes li{font-size:15px!important;line-height:1.4!important}
html body.dh-page #main-content .dh-pcard .dh-checks li{font-size:12.5px!important}
html body.dh-page #main-content .dh-feat p:not(.dh-pain){font-size:15px!important;line-height:1.5!important}
/* the approved phone design keeps the 52px headline and has no language chip in the header */
@media (max-width:768px){html body.dh-page .dh-hdr .dh-langdd{display:none}}
/* Language switch stays visible on phones: visitors need it in all 7 languages (2026-10-28) */
@media (max-width:768px){html body.dh-page .dh-hdr .dh-langdd{display:flex!important;align-items:center}}
/* "Example profile": plain text on the photo, no pill (owner 2026-10-28) */
.dh-ptag{background:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important;color:#fff!important;font-size:12.5px;font-weight:700;letter-spacing:.02em;top:12px;left:14px;text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.35)}

/* 2026-11-03 (owner-approved): "Dating after 50 in Toronto and Victoria" (sits between the hero and #why). Uses the page's own tokens. */
html body.dh-page main.dh-scope section.dh-local{background:var(--bg)!important;padding:56px 0;border-top:1px solid var(--line)}
.dh-local .dh-sub{font-size:var(--ledem)}
.dh-lgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px;max-width:980px}
.dh-scope a.dh-lcard{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1.5px solid var(--line2);border-radius:20px;padding:24px 26px;color:var(--text);transition:border-color .15s,box-shadow .15s}
.dh-scope a.dh-lcard:hover,.dh-scope a.dh-lcard:focus-visible{border-color:var(--acc);box-shadow:0 6px 18px var(--btnshadow)}
.dh-lpin{width:48px;height:48px;flex:none;border-radius:14px;background:var(--chip);color:var(--chiptext);display:grid;place-items:center}
.dh-lbody{display:flex;flex-direction:column;min-width:0;align-self:stretch;flex:1}
.dh-lprov{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--kicker)}
.dh-lcard h3{font-size:var(--h3);line-height:1.25;color:var(--head);margin-top:4px}
.dh-lp{display:block;margin-top:8px;color:var(--text2);font-size:17px;line-height:1.5}
.dh-lgo{display:inline-block;margin-top:auto;padding-top:14px;font-weight:700;color:var(--link)}
.dh-scope a.dh-lcard:hover .dh-lgo{text-decoration:underline;text-underline-offset:3px}
.dh-lall{margin-top:24px;color:var(--text2);font-size:17px;max-width:46em}
.dh-lall a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
 html body.dh-page main.dh-scope section.dh-local{padding:36px 0}
 .dh-lgrid{grid-template-columns:1fr;gap:14px;margin-top:20px}
 .dh-scope a.dh-lcard{padding:20px 18px;gap:14px}
 .dh-lpin{width:40px;height:40px;border-radius:12px}
}