/* English feature pages and browser tools. Shared palette: experience.css. */
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body.guide-page { margin:0; }
.guide-page *, .home-guides * { box-sizing:border-box; }
.guide-page [hidden] { display:none!important; }
.guide-page h1,.guide-page h2,.guide-page h3,.guide-page p { margin-top:0; }
.guide-page a { text-underline-offset:4px; }
.guide-page button,.guide-page input,.guide-page select { font:inherit; }
.guide-shell { width:min(1160px,calc(100% - 64px)); margin:auto; }
.guide-skip { position:fixed; inset:8px auto auto 8px; padding:10px 16px; background:var(--cream); color:var(--bg)!important; z-index:3000; transform:translateY(-160%); }
.guide-skip:focus { transform:none; }
body.em.guide-page > .guide-skip { position:fixed!important; display:block; z-index:3000!important; }
/* Override the legacy landing page's high-specificity direct-child stacking rule. */
body.em.guide-page > .guide-header { position:sticky!important; z-index:30!important; }
.guide-header { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:17px max(32px,calc((100vw - 1160px)/2)); background:var(--bg); border-bottom:1px solid var(--line); }
.guide-brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--cream)!important; white-space:nowrap; }
.guide-brand img { border-radius:10px; flex-shrink:0; }
.guide-brand span { font-family:"Fraunces",serif; font-size:19px; line-height:1.1; }
.guide-brand em { color:var(--gold); font-weight:500; }
.guide-brand small { display:block; font:10px/1.5 "Outfit",sans-serif; letter-spacing:.14em; text-transform:uppercase; margin-top:3px; color:var(--mist); }
.guide-nav { display:flex; gap:26px; align-items:center; font-size:14px; }
.guide-nav a,.guide-mobile-menu a { text-decoration:none; color:var(--mist); }
.guide-nav [aria-current] { color:var(--gold); }
.guide-mobile-menu { display:none; }
.guide-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12px; padding:30px 0 0; color:var(--mist); }
.guide-breadcrumb a { text-decoration:none; }
.guide-eyebrow,.guide-card-type { font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:23px; }
.guide-hero { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr); gap:80px; align-items:center; padding:64px 0 72px; }
.guide-hero-copy { max-width:710px; }
body.em .guide-hero h1 { font-size:clamp(40px,5.3vw,72px); line-height:1.04; font-weight:500; letter-spacing:-.045em; margin-bottom:25px; }
.guide-lede { color:var(--mist); font-size:20px; line-height:1.7; max-width:640px; }
.guide-highlights { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:12px; margin:25px 0; }
.guide-highlights li { display:flex; gap:8px; align-items:center; }
.guide-highlights li::before { content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--gold); }
.guide-downloads { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
body.em .guide-button { display:inline-flex; justify-content:space-between; gap:25px; align-items:center; min-height:48px; padding:12px 20px; background:var(--gold-2); border:1px solid var(--gold-2); color:var(--ink); border-radius:7px; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; line-height:1.45; }
body.em .guide-button:hover { background:var(--cream); border-color:var(--cream); color:var(--bg); }
body.em .guide-button.secondary { background:transparent; border-color:var(--line); color:var(--cream); }
body.em .guide-button.secondary:hover { border-color:var(--gold); color:var(--gold); }
body.em.light .guide-button:not(.secondary) { color:var(--bg); }
.guide-byline { font-size:11px; color:var(--mist); margin:22px 0 0; }
.guide-page .guide-byline { margin-top:22px; }
.guide-phone { margin:0; text-align:center; }
.guide-phone img { display:block; max-width:100%; width:260px; height:auto; margin:auto; border:1px solid var(--line); border-radius:23px; }
.guide-phone figcaption { font-size:11px; color:var(--mist); margin:16px auto 0; max-width:270px; }
.guide-hero-editorial { grid-template-columns:1fr; padding-bottom:56px; }
.guide-hero-editorial .guide-hero-copy { max-width:850px; }
.guide-tool-jump { display:inline-block; margin-top:24px; font-size:14px; text-decoration:none; }
.guide-disclosure { border-left:2px solid var(--gold); padding:10px 20px; margin:0 0 56px; max-width:870px; color:var(--mist); font-size:14px; }
.guide-body { border-top:1px solid var(--line); }
.guide-article-section { display:grid; grid-template-columns:80px minmax(0,770px); gap:28px; padding:48px 0; border-bottom:1px solid var(--line); }
.guide-section-index { font-size:12px; color:var(--gold); padding-top:10px; }
body.em .guide-article-section h2,body.em .guide-tool h2 { font-size:clamp(28px,3.2vw,39px); line-height:1.18; margin-bottom:20px; }
.guide-article-section p { color:var(--mist); line-height:1.8; margin-bottom:17px; }
.guide-article-section ul { margin:20px 0; padding-left:22px; color:var(--mist); }
.guide-article-section li { margin-bottom:10px; }
.guide-text-link { display:inline-block; margin-top:10px; text-decoration:none; }
.guide-steps,.guide-related,.guide-comparison,.guide-sources { padding:62px 0; }
body.em .guide-steps h2,body.em .guide-related h2,body.em .guide-comparison h2,body.em .guide-faq h2 { font-size:clamp(30px,3.5vw,44px); line-height:1.15; margin-bottom:30px; }
.guide-steps ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; list-style:none; counter-reset:steps; padding:0; margin:0; }
.guide-steps li { counter-increment:steps; border-top:1px solid var(--line); padding-top:22px; }
.guide-steps li::before { content:"0" counter(steps); color:var(--gold); font-size:12px; display:block; margin-bottom:20px; }
body.em .guide-steps h3 { font-size:22px; line-height:1.3; margin-bottom:13px; }
.guide-steps p { color:var(--mist); font-size:15px; }
.guide-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
body.em .guide-card { display:block; position:relative; padding:27px 26px 48px; border:1px solid var(--line); border-radius:10px; color:var(--cream); text-decoration:none; background:var(--bg-2); }
.guide-card:hover { border-color:var(--gold); }
.guide-card-type { font-size:9px; display:block; margin:0 0 18px; }
body.em .guide-card h3 { font-size:25px; margin-bottom:12px; }
.guide-card p { color:var(--mist); font-size:14px; line-height:1.7; margin:0; }
.guide-card-arrow { position:absolute; bottom:15px; right:22px; color:var(--gold); }
.guide-faq { display:grid; grid-template-columns:1fr 1.7fr; gap:70px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:58px 0; }
.guide-faq details { border-bottom:1px solid var(--line); padding:20px 0; }
.guide-faq details:first-child { padding-top:0; }
.guide-faq details:last-child { border:0; }
.guide-faq summary { cursor:pointer; font-size:17px; padding-right:20px; }
.guide-faq details p { color:var(--mist); font-size:15px; margin:16px 0 0; }
.guide-sources { font-size:13px; padding:32px 0 0; }
body.em .guide-sources h2 { font:600 13px "Outfit",sans-serif; }
.guide-sources ul { padding-left:20px; }
.guide-sources li { margin:8px 0; }
.table-scroll { overflow:auto; }
.guide-comparison table { border-collapse:collapse; width:100%; min-width:600px; font-size:15px; text-align:left; }
.guide-comparison caption { text-align:left; font-size:12px; color:var(--mist); margin-bottom:16px; }
.guide-comparison th,.guide-comparison td { border-bottom:1px solid var(--line); padding:20px 20px 20px 0; vertical-align:top; }
.guide-comparison thead th { color:var(--gold); font-weight:500; }
.guide-comparison td { color:var(--mist); width:38%; }
.guide-final-cta { display:flex; justify-content:space-between; gap:35px; flex-wrap:wrap; align-items:center; padding:45px 0 65px; border-top:1px solid var(--line); }
body.em .guide-final-cta h2 { font-size:clamp(30px,4vw,48px); margin-bottom:14px; }
.guide-final-cta p { color:var(--mist); margin-bottom:16px; }
.guide-footer { background:var(--bg-2); border-top:1px solid var(--line); padding:38px 0 25px; }
.guide-footer-top { display:flex; gap:30px; justify-content:space-between; align-items:center; margin-bottom:30px; }
.guide-footer-top p { font-size:14px; color:var(--mist); margin:0; }
.guide-footer-links { display:flex; flex-wrap:wrap; gap:14px 24px; font-size:13px; padding-bottom:30px; }
.guide-footer-links a { text-decoration:none; }
.guide-footer-bottom { border-top:1px solid var(--line); padding-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:15px 24px; color:var(--mist); font-size:12px; }
.guide-footer-bottom button,.guide-footer-bottom select { font:inherit; color:var(--gold-2); border:0; background:transparent; cursor:pointer; }
.guide-footer-bottom select option { color:var(--cream); background:var(--bg); }
.lock-story { text-align:center; border:1px solid var(--line); padding:36px 24px; border-radius:100px 100px 18px 18px; color:var(--gold); }
.lock-story-kicker { font-size:10px; letter-spacing:.15em; text-transform:uppercase; display:block; margin-bottom:30px; }
.lock-story svg { display:block; margin:0 auto 30px; }
.lock-story p { font:500 clamp(22px,2.6vw,33px)/1.45 "Fraunces",serif; margin:8px 0; color:var(--cream); }
.lock-story-caption { display:block; color:var(--mist); font-size:10px; margin-top:30px; }
.guide-tool { padding:42px; border:1px solid var(--line); border-radius:14px; background:var(--bg-2); margin-bottom:65px; }
.tool-heading>p:not(.guide-eyebrow) { color:var(--mist); max-width:670px; }
.tool-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:45px; margin-top:30px; }
.tool-layout form { min-width:0; }
.tool-location { display:grid; gap:16px; border:0; padding:0; margin:0 0 20px; min-width:0; }
.tool-location legend { font-size:12px; font-weight:600; margin-bottom:12px; }
.tool-location>.guide-button { justify-self:start; }
.tool-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin-bottom:20px; }
.tool-layout label { display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--mist); }
.tool-layout input,.tool-layout select { min-width:0; width:100%; border:1px solid var(--line); background:var(--bg); color:var(--cream); padding:11px 12px; border-radius:5px; font-size:14px; color-scheme:dark; }
body.em.light .tool-layout input,body.em.light .tool-layout select { color-scheme:light; }
.tool-layout input:focus,.tool-layout select:focus { border-color:var(--gold); }
.tool-custom summary { font-size:13px; color:var(--gold); cursor:pointer; margin-bottom:15px; }
.tool-custom small { line-height:1.5; }
.tool-privacy,.tool-result-note { font-size:11px; line-height:1.7; color:var(--mist); }
.tool-status { font-size:13px; min-height:1.7em; margin:15px 0 8px; }
.tool-result-eyebrow { color:var(--gold); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
body.em .prayer-result h3 { font-size:25px; margin-bottom:12px; }
.prayer-time-list { margin:22px 0; }
.prayer-time-list>div { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); }
.prayer-time-list dt { font-size:14px; }
.prayer-time-list dd { margin:0; font-size:22px; font-variant-numeric:tabular-nums; line-height:1.2; }
.prayer-time-list [data-reference] { color:var(--mist); }
.prayer-time-list [data-reference] dd { font-size:17px; }
.prayer-time-list .next-prayer { color:var(--gold); }
.tool-next { font-size:13px; color:var(--gold); }
.qibla-result { text-align:center; }
.qibla-dial { position:relative; width:240px; height:240px; max-width:100%; aspect-ratio:1; border:1px solid var(--line); border-radius:50%; margin:20px auto; }
.qibla-dial>span { position:absolute; font-size:11px; color:var(--mist); }
.dial-north { top:9px; left:50%; transform:translateX(-50%); }
.dial-south { bottom:9px; left:50%; transform:translateX(-50%); }
.dial-east { right:12px; top:50%; transform:translateY(-50%); }
.dial-west { left:12px; top:50%; transform:translateY(-50%); }
.qibla-needle { position:absolute; width:2px; height:73%; top:13.5%; left:calc(50% - 1px); background:var(--gold); transform:rotate(var(--bearing,0deg)); transform-origin:center; }
.qibla-needle span { position:absolute; top:-5px; left:-8px; font-size:18px; line-height:1; color:var(--gold); }
.dial-center { position:absolute; width:12px; height:12px; background:var(--gold); border:3px solid var(--bg-2); border-radius:50%; top:calc(50% - 6px); left:calc(50% - 6px); }
.qibla-bearing { font:500 31px "Fraunces",serif; color:var(--gold); margin-bottom:10px; }
#qibla-heading-note,#compass-status { font-size:12px; color:var(--mist); }
.home-guides { padding:65px 0; border-top:1px solid var(--line); }
.home-guides .home-guide-heading { max-width:670px; margin-bottom:30px; }
body.em .home-guides h2 { font-size:clamp(32px,4vw,48px); line-height:1.15; margin-bottom:18px; }
.home-guides .home-guide-heading p { color:var(--mist); }
.home-guide-links { display:flex; flex-wrap:wrap; gap:14px 26px; font-size:14px; margin-top:25px; }
.hero-product-description { font-size:17px; color:var(--mist); max-width:510px; margin:0 0 22px; line-height:1.7; }
.hero h1 .hero-product-heading { display:block; font:400 clamp(16px,2vw,20px)/1.5 "Outfit",sans-serif; letter-spacing:0; color:var(--mist); margin-top:22px; max-width:420px; }
.feature-guide-link { display:inline-block; margin-top:12px; font-size:14px; }
.home-guides .guide-card h3 { font-size:24px; }
@media(max-width:940px) { .guide-nav {gap:16px;font-size:12px}.guide-hero{gap:40px;grid-template-columns:1.5fr 1fr}.guide-steps ol{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-layout{gap:25px}.guide-tool{padding:28px}.guide-faq{gap:35px} }
@media(max-width:720px) { .guide-shell{width:calc(100% - 36px)}.guide-header{padding:13px 18px}.guide-nav{display:none}.guide-mobile-menu{display:block;position:relative;font-size:14px}.guide-mobile-menu summary{cursor:pointer;padding:10px;color:var(--gold)}.guide-mobile-menu nav{position:absolute;inset:calc(100% + 14px) 0 auto auto;min-width:220px;background:var(--bg-2);padding:20px;border:1px solid var(--line);border-radius:8px;display:grid;gap:18px}.guide-hero{grid-template-columns:1fr;padding:38px 0 45px;gap:35px}.guide-hero-copy{max-width:none}.guide-lede{font-size:18px}.guide-phone img{width:210px}.guide-phone{margin:5px 0}.guide-phone figcaption{font-size:10px}.guide-article-section{grid-template-columns:30px minmax(0,1fr);gap:15px;padding:33px 0}.guide-steps,.guide-related,.guide-comparison{padding:42px 0}.guide-faq{grid-template-columns:1fr;gap:20px;padding:35px 0}.guide-faq h2{margin-bottom:0!important}.guide-card-grid{gap:12px}.guide-card{padding:22px 20px 42px!important}.guide-card p{font-size:13px}.guide-footer-top{align-items:start}.guide-footer-top>p{display:none}.tool-layout{grid-template-columns:1fr;gap:30px}.guide-tool{padding:24px 18px;margin-bottom:40px}.prayer-result,.qibla-result{border-top:1px solid var(--line);padding-top:25px}.lock-story{max-width:320px;width:100%;margin:auto}.guide-final-cta{padding-bottom:40px}.home-guides{padding:45px 0} }
@media(max-width:420px) { .guide-card-grid{grid-template-columns:1fr}.guide-steps ol{gap:20px}.guide-downloads{gap:9px}.guide-button{padding:11px 14px!important;font-size:13px!important;gap:14px!important}.tool-field-grid{grid-template-columns:1fr}.guide-highlights{gap:10px 15px}.guide-lede{font-size:17px} }
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto} }