/* Varolweb — application directory, guides and privacy center. Fonts are self-hosted (SIL OFL), no external requests. */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/BricolageGrotesque-Variable.ttf") format("truetype");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/HankenGrotesk-Variable.ttf") format("truetype");font-weight:100 900;font-display:swap}

:root{
  --bg:#f3f5f7;--surface:#fff;--ink:#0e1a17;--text:#2b3935;--muted:#586561;--line:#d5dce0;--soft:#e8edf0;
  --cyan:#12a4dc;--cyan-ink:#0a6f9b;--red:#d31f3b;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace;--body:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --max:1180px;--r-control:6px;--r-panel:10px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
a{color:inherit}
img{max-width:100%;display:block}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--display);color:var(--ink);line-height:1.08;letter-spacing:-.025em;font-weight:700}
h1{font-size:clamp(2.5rem,5.5vw,4.5rem);font-weight:760;font-stretch:85%}
h2{font-size:clamp(1.9rem,3.2vw,2.75rem);font-stretch:90%}
h3{font-size:1.35rem}
svg{width:22px;height:22px;flex-shrink:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--cyan-ink);outline-offset:4px;border-radius:4px}
[hidden]{display:none!important}
.wrap{width:min(var(--max),calc(100% - 64px));margin-inline:auto}
.skip-link{position:fixed;top:-100px;left:16px;z-index:20;background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--r-control)}
.skip-link:focus{top:12px}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(243,245,247,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.header-row{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:inline-flex;align-items:center;text-decoration:none;background:var(--ink);padding:9px 14px;border-radius:var(--r-control);flex-shrink:0}
.brand-logo{display:block;width:200px;height:auto}
.main-nav{display:flex;align-items:center;gap:30px}
.main-nav a{text-decoration:none;font-size:.95rem;font-weight:600;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent}
.main-nav a:hover{color:var(--ink);border-bottom-color:var(--cyan)}
.main-nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink)}
.main-nav a.nav-contact{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:9px 16px;border-radius:var(--r-control);border:0}
.main-nav a.nav-contact:hover,.main-nav a.nav-contact[aria-current=page]:hover{background:var(--cyan-ink);color:#fff}
.main-nav a.nav-contact[aria-current=page]{color:#fff;box-shadow:inset 0 -3px 0 var(--cyan)}
.main-nav a.nav-contact svg{width:16px;height:16px}
.menu-toggle{display:none;border:1px solid var(--line);background:var(--surface);padding:10px 12px;border-radius:var(--r-control);align-items:center;gap:8px;color:var(--ink);font-size:.9rem}

/* Shared small parts */
.eyebrow{font-size:.9rem;font-weight:600;color:var(--muted);margin:0 0 14px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;border:1px solid var(--ink);padding:13px 20px;background:var(--ink);color:#fff;font-size:.95rem;font-weight:650;border-radius:var(--r-control);text-decoration:none;transition:background .18s,border-color .18s}
.button:hover{background:var(--cyan-ink);border-color:var(--cyan-ink)}
.button.secondary{color:var(--ink);background:transparent;border-color:#aebbc1}
.button.secondary:hover{background:var(--soft);border-color:var(--ink)}
.button svg{width:17px;height:17px}
.text-link{font-size:.95rem;font-weight:650;color:var(--ink);text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:5px;display:inline-flex;align-items:center;gap:8px}
.text-link:hover{text-decoration-color:var(--ink)}
.text-link svg{width:16px;height:16px}
.subtle-link{font-size:.875rem;color:var(--muted);text-underline-offset:4px}
.hero-note{margin:22px 0 0;font-size:.875rem;display:flex;align-items:center;gap:10px;color:var(--muted)}
.hero-note svg{width:16px;height:16px;color:var(--cyan-ink)}
.platforms{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.platform{font-size:.78rem;font-weight:650;color:var(--ink);background:var(--soft);border-radius:4px;padding:3px 8px}
.app-icon{width:64px;height:64px;border-radius:22%}
.store-pending{font-size:.875rem;color:var(--muted);margin:16px 0 0}

/* Home hero: who builds these, and a changelog that starts in 1991 */
.hero{padding:clamp(52px,8vw,112px) 0 clamp(48px,6vw,88px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.hero h1{font-weight:700;font-stretch:88%;font-size:clamp(2.8rem,6vw,5.4rem);line-height:1;letter-spacing:-.022em;text-wrap:balance;margin:0 0 26px}
.hero .lead{font-size:1.25rem;line-height:1.6;max-width:30em;margin:0 0 32px;color:var(--ink)}
.cursor{color:var(--cyan);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.changelog{margin:0;background:var(--ink);color:#d3dfda;border-radius:var(--r-panel);padding:20px 26px 22px;font-family:var(--mono);font-size:.95rem;line-height:1.5}
.changelog figcaption{font-family:var(--body);font-size:.85rem;font-weight:600;color:#8fa39b;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.changelog ol{list-style:none;margin:0;padding:0}
.changelog li{display:grid;grid-template-columns:3.4em minmax(0,1fr);column-gap:18px;row-gap:2px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.changelog time{color:var(--cyan);grid-row:span 2}
.changelog code{font:inherit;color:#fff;overflow-wrap:anywhere}
.changelog li span{grid-column:2;font-family:var(--body);font-size:.85rem;color:#8fa39b}
.changelog .prompt{border-bottom:0;padding-bottom:0}
.changelog .cursor{grid-column:1;color:#f0364f;font-weight:700}

/* Directory: rows on the left, a stage on the right that follows the row you point at */
.directory{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);column-gap:clamp(32px,5vw,72px);row-gap:28px;align-items:start;padding-bottom:clamp(56px,7vw,96px)}
.dir-title{font-size:1.5rem;font-stretch:100%;margin:0;padding:14px 0;border-top:3px solid var(--ink);grid-column:1/-1}
.dir-list{list-style:none;margin:0;padding:0}
.dir-row{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;column-gap:22px;row-gap:6px;align-items:center;padding:22px 0 22px 24px;border-bottom:1px solid var(--line);transition:background .18s}
.dir-row:before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:4px;background:var(--accent);transition:width .18s}
.dir-row:hover,.dir-row:focus-within{background:var(--surface)}
.dir-row:hover:before,.dir-row:focus-within:before{width:10px}
@media(min-width:861px){.dir-row.is-active{background:var(--surface)}.dir-row.is-active:before{width:10px}}
.dir-icon{width:56px;height:56px;border-radius:22%}
.dir-icon.shaped{border-radius:0}
.dir-main h3{font-size:clamp(1.35rem,2.4vw,1.9rem);font-stretch:90%;margin:0 0 2px}
.dir-main h3 a{text-decoration:none}
.dir-main h3 a:after{content:"";position:absolute;inset:0}
.dir-main p{margin:0;font-size:.95rem;color:var(--muted)}
.dir-meta{text-align:right;font-size:.875rem;color:var(--muted);margin:0}
.dir-meta a{position:relative;z-index:1;color:var(--ink);text-underline-offset:4px}
.dir-meta span{display:block}
.stage{position:sticky;top:104px;aspect-ratio:4/5;border-radius:var(--r-panel);overflow:hidden;background:var(--stage-bg,#d7262d);transition:background .25s}
.stage figure{position:absolute;inset:0;margin:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;padding:8% 10% 13%;opacity:0;transition:opacity .25s}
.stage figure.is-active{opacity:1}
html:not(.js) .stage figure:first-child{opacity:1}
.stage figcaption{position:absolute;left:20px;bottom:16px;color:#fff;font-size:.9rem;font-weight:600}
.stage img,.shot img{max-height:100%;max-width:100%;width:auto;height:auto}
.shot--phone img,.stage .phone img{border:6px solid #101a17;border-radius:26px;box-shadow:0 18px 40px rgba(8,16,14,.28)}
.shot--wide{aspect-ratio:16/11;padding:7%}
.stage .wide{padding-inline:5%}
.shot--wide img,.stage .wide img{width:100%;max-height:none;height:auto;border-radius:8px;box-shadow:0 18px 40px rgba(8,16,14,.28)}

/* Sections shared by the home page */
.section{padding:clamp(44px,6vw,80px) 0}
.section-top{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:34px}
.section-top h2{margin-bottom:0}
.section-top p{font-size:1rem;max-width:340px;margin:0;color:var(--muted)}
.section-rule{border-top:1px solid var(--line)}
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:28px}
.resource-card{border-top:3px solid var(--ink);padding-top:22px}
.resource-icon{display:block;color:var(--cyan-ink);margin-bottom:16px}
.resource-icon svg{width:28px;height:28px}
.resource-card h3{font-size:1.35rem;margin-bottom:10px}
.resource-card p{font-size:1rem;line-height:1.7;margin-bottom:16px}
.resource-card br{display:none}
.resource-card .text-link{display:flex;width:fit-content;margin-top:8px}
.privacy-banner{padding:clamp(28px,4vw,44px);background:var(--ink);border-radius:var(--r-panel);color:#fff;display:flex;align-items:center;gap:26px;justify-content:space-between;margin:26px 0 clamp(48px,6vw,80px)}
.privacy-banner h2{color:#fff;font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:10px}
.privacy-banner p{font-size:1rem;color:#b9cac3;margin:0;max-width:610px}
.privacy-banner .button{background:var(--cyan);color:var(--ink);border-color:var(--cyan);white-space:nowrap}
.privacy-banner .button:hover{background:#fff;border-color:#fff}

/* Home support table: every guide and policy in one place */
.support{padding:clamp(48px,6vw,88px) 0 clamp(56px,7vw,96px);border-top:1px solid var(--line)}
.support-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:28px}
.support-head h2{margin:0}
.support-head p{margin:0;color:var(--muted);max-width:30em}
.support-head p a{color:var(--ink);font-weight:650;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:4px}
.support-table{width:100%;border-collapse:collapse;font-size:1rem}
.support-table thead th{text-align:left;font-size:.85rem;font-weight:600;color:var(--muted);padding:0 16px 12px 0;border-bottom:3px solid var(--ink)}
.support-table tbody th,.support-table td{text-align:left;vertical-align:top;padding:16px 16px 16px 0;border-bottom:1px solid var(--line)}
.support-table tbody th{font-family:var(--display);font-size:1.15rem;font-weight:700;color:var(--ink);width:32%}
.support-table td a{display:block;width:fit-content;color:var(--ink);text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:4px}
.support-table td a+a{margin-top:6px}
.support-table td a:hover{text-decoration-color:var(--ink)}
.support-table .none{color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:44px 0 24px;background:var(--surface)}
.footer-row{display:flex;align-items:flex-start;justify-content:space-between;gap:32px}
.footer-row p{font-size:.9rem;max-width:300px;margin:14px 0 0;color:var(--muted)}
.footer-nav{display:flex;gap:28px;font-size:.95rem;flex-wrap:wrap}
.footer-nav a{text-decoration:none;color:var(--ink);font-weight:600}
.footer-nav a:hover{text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:5px}
.footer-bottom{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;font-size:.85rem;color:var(--muted)}
.footer-bottom p{margin:0;font-size:.85rem;color:var(--muted)}

/* Inner page headings */
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:.875rem;color:var(--muted);margin:32px 0 0;flex-wrap:wrap}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb svg{width:13px;height:13px}
.page-heading{padding:48px 0 40px;max-width:820px}
.page-heading h1{margin-bottom:20px}
.page-heading p{font-size:1.2rem;max-width:34em;margin:0}

/* Applications page: one entry per app, with its own colour and screen */
.app-entries{border-top:3px solid var(--ink)}
.app-entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:clamp(32px,6vw,88px);padding:clamp(36px,5vw,64px) 0;border-bottom:1px solid var(--line);align-items:start}
.entry-head{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.entry-head .app-icon{width:72px;height:72px}
.entry-head .app-icon.shaped{border-radius:0}
.entry-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0 0 2px}
.entry-head .app-kind{margin:0;color:var(--muted);font-size:1rem}
.entry-body>p{max-width:34em}
.entry-body .platforms{margin:0 0 20px}
.app-variants{margin:22px 0 0;border-top:1px solid var(--line);max-width:34em}
.variant-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.variant-row span{color:var(--ink);font-weight:650}
.variant-row a{font-weight:600;text-underline-offset:4px}
.card-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:26px}
.shot{position:relative;margin:0;aspect-ratio:4/5;border-radius:var(--r-panel);background:var(--accent);display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;padding:9% 11%;overflow:hidden}

/* App guide pages */
.app-hero{padding:52px 0 48px;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(32px,6vw,80px);align-items:center}
.app-hero .app-icon{width:88px;height:88px;margin-bottom:26px}
.app-hero h1{margin-bottom:18px}
.app-hero .lead{font-size:1.2rem;max-width:30em;margin-bottom:24px}
.app-hero .platforms{margin:0 0 22px}
.app-hero .hero-note{flex-wrap:wrap}
.app-hero .store-pending{margin:0 0 22px}
.store-buttons{display:flex;gap:10px;flex-wrap:wrap}
.store-button{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;text-decoration:none;border-radius:var(--r-control);padding:9px 17px;font-size:1rem;font-weight:650;line-height:1.25;border:1px solid var(--ink)}
.store-button small{display:block;font-size:.62rem;font-weight:400;color:#c3d3cc;margin-bottom:2px}
.store-button svg{width:24px;height:24px}
.store-button:hover{background:var(--cyan-ink);border-color:var(--cyan-ink)}
.guide-cover{background:var(--accent,var(--ink));border-radius:var(--r-panel);min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:30px}
.guide-cover img{max-height:360px;width:auto;border:6px solid #101a17;border-radius:26px;box-shadow:0 18px 40px rgba(8,16,14,.28)}
.guide-cover.quran-cover img{width:min(100%,300px);height:auto;max-height:none;border:0;border-radius:26px}
.guide-cover.quran-screen-cover{min-height:470px;padding:28px}
.guide-cover.quran-screen-cover img{width:auto;max-width:100%;height:auto;max-height:420px;border:6px solid #101a17;border-radius:28px}
.page-tabs{display:flex;gap:28px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;font-size:.95rem;font-weight:650}
.page-tabs a{text-decoration:none;color:var(--muted);border-bottom:2px solid transparent;padding-bottom:2px}
.page-tabs a:hover{color:var(--ink);border-bottom-color:var(--cyan)}
.guide-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:64px;padding:60px 0 72px;align-items:start}
.guide-aside{position:sticky;top:112px;border-left:3px solid var(--ink);padding-left:20px}
.guide-aside h2{font-family:var(--body);font-size:.9rem;font-weight:700;letter-spacing:0;color:var(--ink);margin-bottom:14px}
.guide-aside a{display:block;text-decoration:none;font-size:.95rem;padding:6px 0;color:var(--muted)}
.guide-aside a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--cyan);text-underline-offset:5px;text-decoration-thickness:2px}
.guide-section{margin-bottom:56px}
.guide-section:last-child{margin-bottom:0}
.guide-section h2{font-size:clamp(1.7rem,2.6vw,2.2rem);margin-bottom:22px}
.guide-section h3{font-size:1.25rem;margin-bottom:9px}
.guide-section p{font-size:1.0625rem;line-height:1.8;max-width:42em}
.step-list{list-style:none;margin:0;padding:0;counter-reset:steps}
.step-list li{counter-increment:steps;padding:20px 0 20px 64px;border-top:1px solid var(--line);position:relative;max-width:42em}
.step-list li:before{content:counter(steps);position:absolute;left:0;top:18px;width:40px;height:40px;background:var(--ink);border-radius:var(--r-control);display:grid;place-items:center;font-family:var(--display);font-size:1.05rem;color:#fff;font-weight:700}
.step-list p{margin:0;font-size:1rem}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feature{border:1px solid var(--line);background:var(--surface);padding:22px;border-radius:8px}
.feature h3{margin-bottom:8px}
.feature p{font-size:.95rem;margin:0}
.callout{border-left:4px solid var(--cyan);background:var(--surface);border-radius:0 8px 8px 0;padding:18px 22px;margin:26px 0;max-width:42em}
.callout p{font-size:.95rem;margin:0}
.callout strong{color:var(--ink)}
.screenshots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.screenshots--pair{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
.screenshot{margin:0;min-width:0}
.screenshot a{display:block;padding:12px;background:var(--soft);background:color-mix(in srgb,var(--accent,#586561) 16%,#fff);border-radius:var(--r-panel)}
.screenshot img{border:4px solid #101a17;border-radius:16px;width:100%;height:auto}
.screenshot figcaption{font-size:.85rem;color:var(--muted);margin-top:10px}
.formula{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:24px;margin:20px 0}
.formula code{font-family:var(--display);font-size:1.15rem;font-weight:650;line-height:1.8;color:var(--ink)}
.formula p{font-size:.95rem;margin:12px 0 0}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;font-size:1.0625rem;font-weight:650;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:6px;font-size:1.6rem;top:11px;font-weight:400;color:var(--cyan-ink)}
.faq details[open] summary:after{content:"−"}
.faq details p{font-size:1rem;padding-right:30px;margin:0 0 20px}
.guide-privacy{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--ink);color:#fff;border-radius:var(--r-panel);padding:26px}
.guide-privacy h3{color:#fff;margin-bottom:8px}
.guide-privacy p{color:#b9cac3;font-size:.95rem;margin:0}
.guide-privacy a{color:#fff;white-space:nowrap;font-weight:650;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:5px}

/* Privacy center and policy pages */
.policy-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:30px}
.policy-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.policy-card{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--ink);border-radius:8px;padding:28px;display:flex;flex-direction:column;align-items:flex-start}
.policy-card img{width:56px;height:56px;border-radius:22%;margin-bottom:20px}
.policy-card h2{font-size:1.6rem;margin-bottom:12px}
.policy-card p{font-size:1rem;margin-bottom:22px;flex:1}
.policy-card .platforms{margin:0 0 16px}
.policy-card .text-link{margin-top:auto}
.policy-store-link{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.privacy-version-links{display:flex;flex-direction:column;gap:12px;flex-shrink:0}
.website-policy-link{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:24px 28px;display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:64px}
.website-policy-link h2{font-size:1.4rem;margin-bottom:6px}
.website-policy-link p{font-size:.95rem;margin:0}
.policy-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:60px;padding-bottom:72px;align-items:start}
.policy-content{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:clamp(24px,4vw,44px);overflow-wrap:anywhere;min-width:0}
.policy-content h1{font-size:1.9rem;margin-bottom:18px}
.policy-content h2{font-size:1.55rem;margin:36px 0 14px}
.policy-content h3{font-size:1.2rem;margin:24px 0 12px}
.policy-content p,.policy-content li{font-size:1rem;line-height:1.85;color:var(--text)}
.policy-content ul{padding-left:22px}
.policy-content li{margin:6px 0}
.policy-content a{color:var(--cyan-ink);text-underline-offset:3px}
.policy-content .meta{padding:16px 20px;border-radius:8px;background:var(--soft);margin-bottom:24px}
.policy-content .meta p{margin:0;font-size:.9rem}
.policy-content header>p{font-size:.9rem}
.policy-content .tarih{font-size:.9rem;color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--line)}
.policy-content footer{border-top:1px solid var(--line);margin-top:26px;padding-top:18px}
.policy-table-wrap{max-width:100%;overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:8px}
.policy-table-wrap:focus-visible{outline:3px solid var(--cyan-ink);outline-offset:4px}
.policy-table-wrap table{border-collapse:collapse;width:100%;min-width:650px;font-size:.9rem;line-height:1.7}
.policy-table-wrap caption{text-align:left;font-weight:650;padding:14px 16px;background:var(--soft);color:var(--ink)}
.policy-table-wrap th,.policy-table-wrap td{padding:13px 16px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.policy-table-wrap th{color:var(--ink);background:#f7f9fa}
.policy-table-wrap td{color:var(--text)}
.atelier-policy>img,.scriva-policy>img{border-radius:0}

/* Contact */
.contact-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;padding-bottom:80px}
.contact-card{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--ink);border-radius:8px;padding:34px}
.contact-card .resource-icon{margin-bottom:22px}
.contact-card h2{font-size:1.8rem}
.contact-card p{font-size:1rem}
.email-link{display:inline-block;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.7vw,2rem);letter-spacing:-.03em;color:var(--ink);text-decoration-color:var(--cyan);text-decoration-thickness:3px;text-underline-offset:6px;margin:5px 0 24px;overflow-wrap:anywhere}
.email-link:hover{text-decoration-color:var(--ink)}
.contact-tip{border-top:1px solid var(--line);padding-top:20px;margin-top:24px}
.contact-tip p{font-size:.9rem;margin:0}
.support-list{padding:0;margin:20px 0;list-style:none}
.support-list li{padding:15px 0;border-bottom:1px solid var(--line);font-size:1rem;display:flex;align-items:center;gap:12px}
.support-list svg{color:var(--cyan-ink);width:18px;height:18px}
.support-list span{font-weight:650;color:var(--ink)}

@media(max-width:1000px){
  .main-nav{gap:20px}
  .directory{grid-template-columns:minmax(0,1fr) 300px;gap:32px}
  .app-hero{grid-template-columns:minmax(0,1fr) 300px;gap:32px}
  .guide-cover{min-height:360px}
  .guide-layout,.policy-layout{grid-template-columns:195px minmax(0,1fr);gap:32px}
  .contact-layout{gap:32px}
  .app-entry{grid-template-columns:minmax(0,1fr) 300px}
}
@media(max-width:860px){
  .wrap{width:calc(100% - 40px)}
  .header-row{min-height:74px}
  .brand-logo{width:170px}
  .hero{grid-template-columns:1fr}
  .support-head{grid-template-columns:1fr;gap:12px}
  .directory{grid-template-columns:1fr}
  .stage{display:none}
  .dir-row{grid-template-columns:52px minmax(0,1fr);row-gap:10px}
  .dir-icon{width:52px;height:52px}
  .dir-meta{grid-column:2;text-align:left}
  .dir-meta span{display:inline;margin-right:14px}
  .app-entry{grid-template-columns:1fr}
  .shot{aspect-ratio:4/3;max-width:520px}
  .app-hero{grid-template-columns:1fr}
  .guide-cover{min-height:320px}
  .guide-layout,.policy-layout{grid-template-columns:1fr;gap:26px;padding-top:36px}
  .guide-aside{position:static;border-left:0;border-top:3px solid var(--ink);padding:14px 0 0;display:flex;flex-wrap:wrap;column-gap:22px}
  .guide-aside h2{width:100%;margin-bottom:6px}
  .policy-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-layout{grid-template-columns:1fr}
  .section-top{align-items:flex-start;gap:18px}
}
@media(max-width:760px){
  .support-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .support-table,.support-table tbody,.support-table tr{display:block}
  .support-table tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .support-table tbody th,.support-table td{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:12px;border:0;padding:4px 0;width:auto}
  .support-table tbody th{display:block;padding-bottom:8px}
  .support-table td:before{content:attr(data-label);color:var(--muted);font-size:.85rem;padding-top:2px}
  .support-table td>*{grid-column:2}
  .support-table td a+a{margin-top:0}
  .resource-grid{grid-template-columns:1fr;gap:28px}
  .privacy-banner{align-items:flex-start;flex-direction:column}
  .policy-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .changelog{padding:16px 16px 18px;font-size:.8rem}
  .changelog li{grid-template-columns:3.2em minmax(0,1fr);column-gap:10px}
  .wrap{width:calc(100% - 36px)}
  .header-row{gap:14px;flex-wrap:wrap;padding:14px 0}
  .brand-logo{width:150px}
  .brand{padding:9px 11px}
  .menu-toggle{display:none}
  .js .menu-toggle{display:flex}
  .main-nav{width:100%;display:flex;flex-wrap:wrap;padding:6px 0 4px;gap:18px}
  .js .main-nav{display:none}
  .js .main-nav.is-open{display:flex}
  .main-nav a.nav-contact svg{display:none}
  .section-top{display:block}
  .section-top p{max-width:none;margin-top:14px}
  .policy-grid--three{grid-template-columns:1fr}
  .screenshots{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .variant-row{gap:10px;font-size:.85rem}
  .footer-row{flex-direction:column;gap:18px}
  .footer-bottom{flex-direction:column;gap:6px}
  .guide-privacy,.website-policy-link{flex-direction:column;align-items:flex-start}
  .page-tabs{gap:18px}
  .guide-cover.quran-screen-cover{min-height:380px}
  .guide-cover img{max-height:300px}
  .guide-cover.quran-screen-cover img{max-height:340px}
  .guide-cover.quran-cover img{width:min(100%,265px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important}
  .cursor{animation:none}
}
@media print{
  body{background:#fff;color:#000}
  .site-header,.site-footer,.guide-aside,.breadcrumb,.page-tabs,.actions,.store-buttons,.skip-link,.stage{display:none}
  .wrap{width:100%}
  .policy-layout,.guide-layout{display:block}
  .policy-content{border:0;padding:0}
  .page-heading{padding:0 0 20px}
  a{color:#000}
  .guide-section{break-inside:avoid}
  details>*,details:not([open])>*{display:block}
  .guide-cover{display:none}
  .app-hero{display:block}
  .policy-table-wrap{overflow:visible;border:0}
  .policy-table-wrap table{min-width:0;font-size:10px}
  .store-pending{display:none}
}