/* Mobile and touch ergonomics. AGPL-3.0-only, 2026-10-16. */
:root{color-scheme:dark}
body{overflow-x:clip}
html{scroll-padding-top:24px;scrollbar-gutter:stable}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:rgba(232,199,138,.18)}
button,a,summary{touch-action:manipulation}
/* Keep decoration out of hit testing; the native button covers its whole card. */
.service-card::after{pointer-events:none}
.service-card{cursor:pointer}
/* Do not stretch a pseudo-element from the action button across the card: on touch browsers it can retarget taps to the article instead of the button. */
.service-card:focus-within{outline:2px solid var(--gold);outline-offset:3px}
.toast{pointer-events:none}
input,textarea,select{font-size:16px!important}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
body.modal-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.modal-panel{display:flex;flex-direction:column;overflow:hidden;padding:0;max-height:min(92vh,920px);max-height:min(92dvh,920px)}
.modal-toolbar{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;min-height:64px;padding:8px 14px 8px 26px;border-bottom:1px solid var(--border);background:#20152e;z-index:2}
.modal-toolbar-brand{font-family:var(--serif);font-size:21px;color:var(--gold)}
.modal-close{position:static;display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border:1px solid var(--border);border-radius:50%;padding:0;background:#31223f;color:#f8e6cd;font-size:24px;line-height:1}
#modalContent{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0;padding:28px 42px 38px;scrollbar-width:thin;scrollbar-color:#72517d #171020}
.modal-back{min-height:44px;line-height:1.4}
.mobile-dock{display:none}
.natal-wheel{width:100%;height:auto;max-width:100%}
.result-summary,.result-advice,.result-note,.small-muted,.compat-person p{overflow-wrap:anywhere}
.visits-counter{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px 12px;margin:0 auto;padding:18px 20px;color:#d6c5d9;text-align:center;border-top:1px solid var(--border);font-size:13px}
.visits-counter strong{font-variant-numeric:tabular-nums;color:var(--gold);font-size:20px}
.visits-counter small{font-size:12px;color:#b3a4be}
@media(max-width:780px),(max-width:1024px) and (pointer:coarse){
 html{scroll-padding-top:84px;scrollbar-gutter:auto}
 .desktop-nav,.header-cta{display:none}
 .site-header{position:sticky;top:0;height:72px;z-index:60;background:rgba(17,12,29,.95)}
 .nav-inner{gap:12px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 .brand{min-height:44px}.mobile-toggle{display:grid;place-items:center;min-width:48px;min-height:48px;padding:0;border:1px solid var(--border);border-radius:8px}
 .mobile-menu{display:flex;flex-direction:column;max-height:calc(var(--lt-viewport-height,100dvh) - 72px);overflow:auto;padding:8px 20px 16px;gap:0;box-shadow:0 12px 30px #0005}
 .mobile-menu a{display:flex;align-items:center;min-height:48px;font-size:15px;border-bottom:1px solid var(--border)}
 .beta-alert{font-size:11px;line-height:1.5;padding:8px 14px}
 .hero{height:auto;min-height:0}
 .hero-content{padding-top:clamp(230px,36vh,340px);padding-bottom:44px}
 .hero h1{font-size:clamp(43px,9vw,68px);line-height:1.06;letter-spacing:-.025em}
 .hero-description{font-size:15px;line-height:1.7;color:#dfd3e2}
 .hero-eyebrow{font-size:9px;line-height:1.7;letter-spacing:.12em;gap:9px;margin-bottom:20px}
 .hero-actions{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;align-items:stretch}
 .hero-actions .button{min-height:52px;font-size:13px;white-space:normal;line-height:1.5;padding:12px 14px;gap:8px}
 .hero-footer{margin-top:26px;gap:12px}.hero-footer p{font-size:12px}
 .section{padding:64px 0}.section-heading p,.price-lead,.feature-copy>p,.question-inner p,.faq-layout>div:first-child>p{font-size:15px;line-height:1.75}
 .section h2,.feature-copy h2,.question-inner h2{font-size:clamp(36px,8.5vw,48px);line-height:1.12}
 .section-topline span{font-size:10px;letter-spacing:.16em;line-height:1.6}
 .filter-bar{justify-content:flex-start;flex-wrap:nowrap;overflow:auto;margin-left:-20px;margin-right:-20px;padding:0 20px 10px;scroll-padding-inline:20px;gap:8px}
 .filter{min-height:46px;flex-shrink:0;font-size:13px;padding:11px 16px;border-radius:7px}
 .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .service-card{padding:22px 20px;min-height:0;border-radius:12px}
 .service-card:hover{transform:none}
 .service-card h3{font-size:30px;line-height:1.1;margin:12px 0}
 .service-card p{font-size:14px;line-height:1.7;color:#c5b6d0}
 .service-badge{font-size:9px;padding:6px 8px;white-space:normal;max-width:70%;line-height:1.5}
 .service-price{font-size:14px}.service-price small{font-size:11px;line-height:1.5;color:#b4a3c1}
 .service-action{font-size:13px;min-width:100px;min-height:46px;border:1px solid var(--border);border-radius:8px;padding:8px 12px;background:#30203e}
 .service-action span{font-size:18px;margin-left:5px}
 .service-symbol{font-size:39px;height:47px}
 .feature-points p{font-size:15px;line-height:1.5}.feature-points small{font-size:14px;line-height:1.7}.feature-copy .feature-note{font-size:13px;line-height:1.7}
 .feature-art{height:270px;margin:-16px 0;transform:scale(.65)}
 .price-card{border-radius:12px;padding:28px 24px}.price-card p{font-size:14px;line-height:1.7}.price-tag span{font-size:12px}
 .button{font-size:14px;min-height:50px;line-height:1.5;white-space:normal;padding:13px 18px;gap:12px}
 .question-inner{padding-top:48px;padding-bottom:48px}
 .faq-list summary{font-size:15px;min-height:48px;line-height:1.6}.faq-list details p{font-size:14px;line-height:1.8}
 .feedback-form{border-radius:12px;padding:20px}.feedback-form label{font-size:14px;line-height:1.5}.feedback-form select{min-height:52px}.feedback-form textarea{min-height:150px;line-height:1.65}
 .feedback-note{font-size:13px!important}.feedback-result{overflow-wrap:anywhere}
 .footer-top>p,.footer-link{font-size:14px}.footer-bottom{font-size:12px;line-height:1.8}
 .footer-bottom a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}
 .footer{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
 .mobile-dock{display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:70;padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));gap:10px;background:rgba(20,14,31,.96);border-top:1px solid var(--border);backdrop-filter:blur(16px)}
 .mobile-dock a,.mobile-dock button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;border-radius:10px;background:#352342;border:1px solid #64466e;color:#f4dfbc;font-size:14px;font-weight:750;text-decoration:none}
 .mobile-dock span{font-size:22px;font-weight:400}
 body.modal-open .mobile-dock,body.has-text-focus .mobile-dock{display:none}
 .toast{bottom:calc(90px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px);width:max-content;font-size:13px;text-align:center;border-radius:8px}
 .modal{padding:0;place-items:start center}
 .modal-panel{height:var(--lt-viewport-height,100vh);max-height:var(--lt-viewport-height,100vh);width:100%;border:0;border-radius:0}
 .modal-toolbar{padding:calc(6px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 6px max(20px,env(safe-area-inset-left));min-height:64px}
 #modalContent{padding:24px max(20px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));scroll-padding-top:20px}
 .modal-panel h2{font-size:clamp(35px,8.8vw,48px);line-height:1.1;margin-bottom:16px}
 .modal-kicker{font-size:10px;letter-spacing:.16em;line-height:1.7}
 .modal-intro{font-size:15px;line-height:1.75;margin-bottom:26px;color:#c6b6d3}
 .form-fields{grid-template-columns:1fr;gap:20px}.field.full{grid-column:auto}
 .field label{font-size:14px;line-height:1.5}.field input,.field select{min-height:52px;padding:14px 12px;border-radius:7px}.field textarea{min-height:130px;line-height:1.65;padding:14px 12px;border-radius:7px}
 .field-note,.small-muted{font-size:13px;line-height:1.75;color:#b8a6c6}
 .optional-location{padding:16px;border-radius:8px}.optional-location summary{font-size:14px;line-height:1.6;min-height:44px;align-content:center}
 .coords-grid{grid-template-columns:1fr;gap:16px}
 .submit-row{flex-direction:column;align-items:stretch;gap:16px}.submit-caption{text-align:center;font-size:17px}.submit-caption small{font-size:13px}.submit-row .button{width:100%;min-height:54px;font-size:16px}
 .modal-error{font-size:14px;line-height:1.75}.modal-back{font-size:14px;padding:10px 0;min-height:48px;text-align:left}
 .reading-result .result-summary{font-size:15px;line-height:1.8;padding:16px}
 .result-advice{font-size:14px;line-height:1.8;padding:16px}.result-note{font-size:13px;line-height:1.8}
 .tarot-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tarot-card{padding:18px 14px;min-height:0;border-radius:10px}.tarot-card small{font-size:12px;line-height:1.5}.tarot-card h4{font-size:25px;line-height:1.15}.tarot-card p{font-size:14px;line-height:1.65}.tarot-face{min-height:72px}
 .astro-bigs{grid-template-columns:1fr;gap:12px}.astro-big{padding:18px;border-radius:10px}.astro-big span{font-size:12px}.astro-big h4{font-size:30px}.astro-big p{font-size:14px;line-height:1.7}
 .planet-list{grid-template-columns:1fr}.planet-row{font-size:14px;line-height:1.6;flex-wrap:wrap;gap:4px 12px;padding:12px 0}.aspects-text{font-size:14px;line-height:1.9}.chart-title{font-size:28px}
 .compat-duo{gap:8px;grid-template-columns:1fr 20px 1fr}.compat-person{padding:18px 10px;min-width:0;border-radius:10px}.compat-person b{font-size:25px}.compat-person p{font-size:13px;line-height:1.8}.compat-heart{font-size:22px}
 .result-buttons{display:grid;grid-template-columns:1fr;gap:12px}.result-buttons .button{min-width:0;width:100%;min-height:52px;flex:auto}
}
@media(max-width:599px){.services-grid{grid-template-columns:1fr}.hero-actions{grid-template-columns:1fr}.hero-actions .button{min-height:52px}.hero-eyebrow .line{display:none}}
@media(max-width:359px){.filter-bar{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.tarot-results{grid-template-columns:1fr}.compat-duo{grid-template-columns:1fr}.compat-heart{line-height:1.4}.container{padding-left:16px;padding-right:16px}.hero h1{font-size:40px}.brand{font-size:23px}.brand small{font-size:7px;letter-spacing:.12em}.hero-footer p{font-size:11px}}
@media(max-height:480px) and (orientation:landscape){.hero-content{padding-top:160px}.mobile-dock{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}.mobile-dock a,.mobile-dock button{min-height:42px}.modal-toolbar{min-height:54px;padding-top:3px;padding-bottom:3px}.modal-close{height:44px;width:44px;flex-basis:44px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}}