/*
Theme Name: FreePhone
Theme URI: https://freephonespy.com
Author: FreePhone
Description: Product site theme for FreePhone, a free parental control and family tracking app. Creates all pages on activation (Home, Features, 6 feature pages, Download, Help Center with setup guides and troubleshooting, About, Contact, Terms, Privacy, Blog). Logo, app links, contact details and AdSense are set in Appearance > Customize > FreePhone.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: freephonespy
*/

/* Layout: playful product site — sticky header, alternating cream/sunny bands, chunky outlined cards, hash-routed pages */
:root{
  --bg:#FFFBF2;--card:#FFFFFF;--band:#FFF3D9;--ink:#2B2240;--muted:#655C7C;--line:rgba(43,34,64,.12);--edge:#2B2240;
  --sky:#4D7CFF;--sun:#FFC93C;--coral:#FF6B6B;--mint:#22C58B;--grape:#7A5CFA;
  --brand:#4D7CFF;--brand-d:#8FB0FF;--brandc:var(--brand);
  --display:"Baloo 2",ui-rounded,system-ui,sans-serif;--body:"Nunito",system-ui,-apple-system,sans-serif;
  --r:24px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#17132A;--card:#211C38;--band:#1D1833;--ink:#F4F1FF;--muted:#B2AACB;--line:rgba(255,255,255,.12);--edge:#0C0918;--brandc:var(--brand-d);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#17132A;--card:#211C38;--band:#1D1833;--ink:#F4F1FF;--muted:#B2AACB;--line:rgba(255,255,255,.12);--edge:#0C0918;--brandc:var(--brand-d);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.6}
a{color:var(--brandc);font-weight:700;text-decoration-thickness:2px;text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(36px,5.4vw,60px);font-weight:800}
h2{font-size:clamp(28px,3.6vw,40px);font-weight:800}
h3{font-size:21px;font-weight:800}
p{margin:0}
.in{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sec{padding-block:72px}
.sec.band{background:var(--band)}
.stack{display:flex;flex-direction:column;gap:14px}
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brandc)}
.lede{font-size:clamp(17px,1.6vw,19.5px);color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}
.head{display:flex;flex-direction:column;gap:10px;margin-bottom:36px;max-width:720px}
.head.c{margin-inline:auto;text-align:center;align-items:center}

/* header */
.top{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .in{display:flex;align-items:center;gap:18px;height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.01em;flex:none}
.brand svg{width:42px;height:42px;flex:none;filter:drop-shadow(0 4px 6px rgba(43,34,64,.18))}
.wm span{color:var(--brandc)}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav>a:not(.btn),.nav .dd>button{font:inherit;font-weight:800;font-size:15.5px;color:var(--ink);text-decoration:none;padding:8px 14px;border-radius:999px;background:none;border:none;cursor:pointer}
.nav>a:not(.btn):hover,.nav .dd>button:hover,.nav>a.on,.nav .dd>button.on{background:color-mix(in srgb,var(--brand) 14%,transparent)}
.dd{position:relative}
.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:min(640px,90vw);background:var(--card);border:2px solid var(--line);border-radius:22px;box-shadow:0 18px 40px rgba(20,14,40,.18);padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:4px;visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s}
.dd:hover .mega,.dd:focus-within .mega,.dd.open .mega{visibility:visible;opacity:1}
.mega::before{content:"";position:absolute;inset:-14px 0 auto;height:14px}
.mi{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;text-decoration:none;color:var(--ink)}
.mi:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.mi b{display:block;font-size:15px;line-height:1.2}
.mi small{display:block;color:var(--muted);font-size:13px;line-height:1.3;font-weight:600}
.mi .ic{width:38px;height:38px;border-radius:12px}
.mega .all{grid-column:1/-1;text-align:center;padding:10px;border-top:1px solid var(--line);margin-top:4px;font-size:14.5px;text-decoration:none}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.menu-btn svg{display:block;margin:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:800;font-size:16px;line-height:1;padding:14px 22px;border-radius:999px;border:2.5px solid var(--edge);background:var(--brand);color:#fff;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--edge);transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--edge)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}
.btn.alt{background:var(--card);color:var(--ink)}
.btn.sm{font-size:14.5px;padding:10px 16px;box-shadow:0 3px 0 var(--edge)}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--brandc);outline-offset:3px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* chips */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;padding:6px 12px;border-radius:999px;background:var(--card);border:2px solid var(--line)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--mint);display:block}
.chip.no i{background:var(--muted);opacity:.5}

/* icons */
.ic{width:56px;height:56px;border-radius:18px;border:2.5px solid #2B2240;display:grid;place-items:center;flex:none;box-shadow:0 3px 0 #2B2240}
.ic svg{width:60%;height:60%}

/* hero */
.hero{padding-block:56px 72px;overflow:hidden}
.hero .in{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1 span{color:var(--brandc)}
.hero .lede{margin-top:18px}
.hero .row{margin-top:28px}
.hero .chips{margin-top:26px}
.phone-wrap{position:relative;display:grid;place-items:center;padding:20px 0}
.blob{position:absolute;width:88%;aspect-ratio:1;border-radius:42% 58% 52% 48%/48% 42% 58% 52%;background:var(--sun);opacity:.55;max-width:100%}
.phone{position:relative;width:min(300px,100%);background:var(--card);border:3px solid #2B2240;border-radius:42px;padding:14px;box-shadow:0 8px 0 #2B2240,0 30px 50px rgba(43,34,64,.22)}
.phone .notch{width:84px;height:20px;border-radius:999px;background:#2B2240;margin:0 auto 12px}
.map{height:150px;border-radius:22px;border:2px solid var(--line);position:relative;overflow:hidden;background:#DDEBFF;
  background-image:linear-gradient(90deg,rgba(255,255,255,.75) 0 10px,transparent 10px),linear-gradient(rgba(255,255,255,.75) 0 8px,transparent 8px),linear-gradient(28deg,transparent 46%,#BFE7CF 46% 60%,transparent 60%);
  background-size:70px 100%,100% 54px,100% 100%;background-position:24px 0,0 20px,0 0}
.map .zone{position:absolute;left:38%;top:22%;width:92px;height:92px;border-radius:50%;border:3px dashed var(--brand);background:color-mix(in srgb,var(--brand) 15%,transparent)}
.map .pin{position:absolute;left:calc(38% + 30px);top:calc(22% + 14px);width:32px;height:42px}
.pcard{margin-top:10px;background:var(--bg);border:2px solid var(--line);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.pcard .t{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:800}
.pcard .s{color:var(--muted);font-weight:600;font-size:13px}
.bar{height:12px;border-radius:999px;background:var(--line);overflow:hidden;border:2px solid var(--line)}
.bar i{display:block;height:100%;border-radius:999px;background:var(--mint)}
.tag{font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--mint) 18%,transparent);color:#138A62;white-space:nowrap}
.tag.warn{background:color-mix(in srgb,var(--coral) 18%,transparent);color:#C93F3F}
.tag.info{background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brandc)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag{color:#6BE3B5}:root:not([data-theme="light"]) .tag.warn{color:#FF9A9A}}
:root[data-theme="dark"] .tag{color:#6BE3B5}:root[data-theme="dark"] .tag.warn{color:#FF9A9A}

/* what is */
.what{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.ticks li::before{content:"";flex:none;width:24px;height:24px;margin-top:2px;border-radius:50%;border:2px solid #2B2240;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.ticks b{font-weight:800}

/* feature grid */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.fgrid.ten{grid-template-columns:repeat(4,1fr);gap:16px}
.fgrid.ten .fcard{padding:18px}
.fgrid.two{grid-template-columns:repeat(2,1fr)}
.fgrid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.fgrid.ten{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.fgrid.ten,.fgrid.two,.fgrid.three{grid-template-columns:1fr}}
.fcard{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);font-weight:600;box-shadow:0 3px 0 var(--line);transition:transform .15s,border-color .15s}
.fcard:hover{transform:translateY(-4px);border-color:var(--brand)}
.fcard p{color:var(--muted);font-size:15px}
.fcard .go{margin-top:auto;font-weight:800;font-size:14.5px;color:var(--brandc)}
.fcard .cat{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.group{display:flex;flex-direction:column;gap:16px}
.group+.group{margin-top:44px}
.group h3{font-size:24px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.step{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px;counter-increment:s}
.step::before{content:counter(s);font-family:var(--display);font-weight:800;font-size:22px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sun);color:#2B2240;border:2.5px solid #2B2240}
.step p{color:var(--muted);font-weight:600}

/* trust + platform cards */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.box{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px}
.box p{color:var(--muted);font-weight:600;font-size:15.5px}
.box .btn{margin-top:auto;align-self:flex-start}
.box .ic{margin-bottom:4px}

/* table */
.tbl-wrap{overflow-x:auto;border:2px solid var(--line);border-radius:20px;background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
th{font-family:var(--display);font-weight:800;font-size:16px}
tr:last-child td{border-bottom:none}
td.y,td.n,td.p{font-weight:800;text-align:center;width:130px}
th.c{text-align:center}
td.y{color:#138A62}td.n{color:var(--muted)}td.p{color:#B07A00}
td a{color:var(--ink)}

/* faq */
.faq{display:flex;flex-direction:column;gap:12px;max-width:820px}
.faq.c{margin-inline:auto}
details{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:0 20px}
summary{cursor:pointer;font-weight:800;font-size:17px;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--display);font-size:24px;line-height:1;color:var(--brandc);flex:none}
details[open] summary::after{content:"–"}
details p{padding:0 0 18px;color:var(--muted);font-weight:600}

/* cta */
.cta{background:var(--brand);color:#fff;border:3px solid #2B2240;border-radius:32px;padding:44px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;box-shadow:0 6px 0 #2B2240}
.cta h2{color:#fff}
.cta p{opacity:.92;font-weight:600;margin-top:8px}
.cta .btn{background:#fff;color:#2B2240;border-color:#2B2240;box-shadow:0 4px 0 #2B2240}

/* feature page */
.crumb{font-size:14px;font-weight:700;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.crumb a{color:var(--muted)}
.fhero .in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.fhero h1{font-size:clamp(34px,4.8vw,54px);margin-top:10px}
.fhero .lede{margin-top:16px}
.fhero .chips,.fhero .row{margin-top:22px}
.mock{background:var(--card);border:3px solid #2B2240;border-radius:30px;padding:18px;box-shadow:0 6px 0 #2B2240,0 24px 44px rgba(43,34,64,.16);display:flex;flex-direction:column;gap:10px;max-width:420px;width:100%;justify-self:center}
.mock .mh{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:20px;padding-bottom:6px}
.mock .mh .ic{width:40px;height:40px;border-radius:13px;box-shadow:none}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:var(--bg);border:2px solid var(--line)}
.mrow b{display:block;font-size:15px;line-height:1.25}
.mrow small{display:block;color:var(--muted);font-weight:600;font-size:13px}
.mrow .r{font-size:12.5px;color:var(--muted);font-weight:700;white-space:nowrap}
.mrow>div{min-width:0}
.note{display:flex;gap:12px;align-items:flex-start;background:color-mix(in srgb,var(--sun) 22%,var(--card));border:2px solid color-mix(in srgb,var(--sun) 70%,transparent);border-radius:18px;padding:14px 16px;font-weight:600;font-size:15px;margin-top:22px;max-width:60ch}
.note svg{flex:none;margin-top:2px}
.dogrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.do{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:22px}
.do .ic{width:44px;height:44px;border-radius:14px;box-shadow:none;background:var(--card)}
.do .ic svg{width:66%}
.do p{color:var(--muted);font-weight:600;margin-top:4px;font-size:15.5px}
.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px}

/* legal / prose */
.prose{max-width:760px;display:flex;flex-direction:column;gap:14px}
.prose h2{font-size:26px;margin-top:22px}
.prose p,.prose li{color:var(--ink);opacity:.92}
.prose ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.updated{font-weight:700;color:var(--muted);font-size:14.5px}
.toc{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.toc a{font-size:13.5px;padding:6px 12px;border-radius:999px;border:2px solid var(--line);text-decoration:none;color:var(--ink);background:var(--card)}
.ph{background:color-mix(in srgb,var(--sun) 30%,transparent);border-radius:6px;padding:0 5px;font-weight:700}

/* contact */
.two{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start}
form{display:flex;flex-direction:column;gap:16px}
label{font-weight:800;font-size:15px;display:flex;flex-direction:column;gap:6px}
input,select,textarea{font:inherit;font-weight:600;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:12px 14px;width:100%}
textarea{min-height:140px;resize:vertical}
.ok{background:color-mix(in srgb,var(--mint) 18%,var(--card));border:2px solid var(--mint);border-radius:16px;padding:14px 16px;font-weight:700}
.copyline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copyline code{font:700 15px var(--body);background:var(--bg);border:2px solid var(--line);border-radius:12px;padding:8px 12px;user-select:all}

/* footer */
footer{border-top:1px solid var(--line);padding-block:56px 32px;background:var(--band)}
.fgrid4{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer h4{font-family:var(--display);font-size:17px;margin:0 0 10px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
footer ul a{color:var(--muted);font-weight:700;text-decoration:none;font-size:15px}
footer ul a:hover{color:var(--brandc)}
.fine{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:14px;font-weight:600}

/* responsive */
@media (max-width:900px){
  .nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--card);border-bottom:2px solid var(--line);padding:12px max(16px,env(safe-area-inset-left,0px)) 18px;gap:2px;max-height:calc(100vh - 160px);overflow:auto}
  .nav.open{display:flex}
  .nav>a:not(.btn),.nav .dd>button{text-align:left;padding:12px 14px}
  .nav .btn{margin-top:8px}
  .mega{position:static;transform:none;width:auto;visibility:visible;opacity:1;box-shadow:none;border:none;padding:0 0 0 8px;grid-template-columns:1fr;display:none}
  .dd.open .mega{display:grid}
  .menu-btn{display:block}
  .hero .in,.fhero .in,.what,.two{grid-template-columns:1fr}
  .cards4{grid-template-columns:1fr 1fr}
  .fgrid4{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .sec{padding-block:52px}
  .steps,.cards3,.cards4,.dogrid{grid-template-columns:1fr}
  .cta{padding:28px}
  .fgrid4{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- WordPress additions ---------- */
img{max-width:100%;height:auto}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;left:12px;top:12px;z-index:100;background:var(--card);padding:10px 16px;border-radius:12px}
.dd-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:8px;border-radius:10px}
.nav>.dd{display:flex;align-items:center}
.nav .dd>a{font-weight:800;font-size:15.5px;color:var(--ink);text-decoration:none;padding:8px 14px;border-radius:999px}
.nav .dd>a:hover,.nav .dd>a.on{background:color-mix(in srgb,var(--brand) 14%,transparent)}
.ad-slot{max-width:1160px;margin:0 auto;padding:8px max(20px,env(safe-area-inset-left,0px)) 8px max(20px,env(safe-area-inset-right,0px));text-align:center}
.ad-slot .ad-label{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ad-slot ins{min-height:90px}
.prose a{color:var(--brandc)}
.prose h3{font-size:20px;margin-top:10px}
.prose img{border-radius:18px}
.prose blockquote{margin:0;padding:12px 18px;border-left:4px solid var(--brand);background:var(--card);border-radius:0 14px 14px 0}
.prose table{min-width:0}
.alignwide{max-width:1000px}.alignfull{max-width:none}
.aligncenter{display:block;margin-inline:auto}
.wp-caption-text,figcaption{font-size:14px;color:var(--muted)}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.post-card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);box-shadow:0 3px 0 var(--line);transition:transform .15s,border-color .15s}
.post-card:hover{transform:translateY(-4px);border-color:var(--brand)}
.post-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-bottom:2px solid var(--line)}
.post-card .pc{padding:20px;display:flex;flex-direction:column;gap:8px}
.post-card p{color:var(--muted);font-weight:600;font-size:15px}
.post-card time{font-size:13px;font-weight:800;color:var(--muted)}
.pagination,.nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.page-numbers{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;font-weight:800}
.page-numbers.current{background:var(--brand);color:#fff;border-color:var(--brand)}
.meta-line{color:var(--muted);font-weight:700;font-size:14.5px}
.search-form{display:flex;gap:8px;max-width:520px}
.search-form label{flex:1}
.hero-img{border-radius:24px;border:2px solid var(--line);margin-top:24px}
@media (max-width:900px){
  .nav>.dd{flex-wrap:wrap}
  .nav .dd>a{padding:12px 14px;flex:1}
  .dd-toggle{display:block}
}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.shot{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);text-align:center;align-items:center}
.shot img{width:100%;max-width:300px;height:auto;margin-bottom:10px;transition:transform .2s}
.shot:hover img{transform:translateY(-6px)}
.shot b{font-family:var(--display);font-size:21px}
.shot span{color:var(--muted);font-weight:600;font-size:15px}
.step-img{width:100%;height:auto;border-radius:18px;border:2px solid var(--line);order:-1}
.steps .step:has(.step-img)::before{margin-top:-8px}
.wide-img{display:block;width:100%;max-width:900px;height:auto;margin:0 auto 28px}
.feat-img{width:100%;max-width:340px;height:auto;justify-self:center}
.why{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tips li{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px 16px 14px 48px;position:relative;font-weight:600}
.tips li::before{content:"";position:absolute;left:14px;top:15px;width:22px;height:22px;border-radius:50%;background:var(--sun);border:2px solid #2B2240}
.nav>.dd .mega{flex-basis:100%}
@media (max-width:900px){.why{grid-template-columns:1fr}.shots{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.shots{grid-template-columns:1fr}}
.hero-art{display:flex;justify-content:center}
.hero-scene{width:100%;max-width:560px;height:auto}
.feat-img{max-width:600px}
.shot img{max-width:100%}

.nav>a.account{margin-left:8px;white-space:nowrap}
@media (max-width:1180px) and (min-width:901px){.nav>a:not(.btn),.nav .dd>a{padding:8px 10px}}
@media (max-width:900px){.nav>a.account{margin:12px 0 4px;justify-content:center;padding:15px 22px;font-size:16.5px}}

/* Store buttons before the app is published: visible, honest, not clickable */
.btn.soon{background:var(--card);color:var(--muted);border-color:var(--line);box-shadow:none;cursor:default}
.btn.soon:hover,.btn.soon:active{transform:none;box-shadow:none}
@media (max-width:480px){.btn.soon{flex-wrap:wrap;white-space:normal;justify-content:center;row-gap:6px;max-width:100%}}
.btn.soon em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--sun);color:#2B2240;border-radius:999px;padding:3px 9px}
.btn.play.soon em{display:none}
.btn.play.soon svg{filter:grayscale(1);opacity:.55}
.btn.play.soon small{color:var(--ink);opacity:1}

/* ---- Help Center ---- */
.help-hero{padding-bottom:40px}
.hsearch{display:flex;align-items:center;gap:12px;max-width:640px;background:var(--card);border:2.5px solid var(--edge);border-radius:999px;padding:6px 8px 6px 18px;box-shadow:0 4px 0 var(--edge);margin-top:8px}
.hsearch svg{flex:none;color:var(--muted)}
.hsearch input{flex:1;min-width:0;font:inherit;font-weight:700;font-size:17px;padding:10px 6px;border:0;background:transparent;color:var(--ink);outline:0}
.hsearch input::placeholder{color:var(--muted);font-weight:600}
.hquick{margin-top:16px;font-size:14.5px;font-weight:600;display:flex;flex-wrap:wrap;gap:6px 14px}
.hget{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.play-btns{display:flex;flex-wrap:wrap;gap:12px}
.btn.play{text-align:left;padding:10px 20px 10px 14px}
.btn.play span{display:flex;flex-direction:column;line-height:1.15}
.btn.play small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.btn.play.sm{padding:8px 16px 8px 12px;font-size:14px}
.hcat{padding-block:48px}
.hcat+.hcat{padding-top:0}
.hcat-head{display:flex;gap:16px;align-items:center;margin-bottom:22px}
.hcat-head h2{font-size:clamp(24px,3vw,32px)}
.hcat-head p{font-weight:600;font-size:15.5px}
.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hcard{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);box-shadow:0 3px 0 var(--line);transition:transform .15s,border-color .15s}
.hcard:hover{transform:translateY(-3px);border-color:var(--brand)}
.hcard h3{font-size:18px;line-height:1.2}
.hcard p{color:var(--muted);font-size:14.5px;font-weight:600}
.hcard .cat{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brandc)}
.hcard .go{margin-top:auto;font-weight:800;font-size:14px;color:var(--brandc)}
.hcard[hidden],.hcat[hidden]{display:none}
.hnone{font-weight:700;color:var(--muted);padding-block:24px}
.harticle{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.hbody{min-width:0;overflow-wrap:anywhere}
.hbody h2{font-size:clamp(22px,2.6vw,28px);margin:34px 0 12px;scroll-margin-top:90px}
.hbody h2:first-of-type{margin-top:8px}
.hbody>p{margin-bottom:12px;max-width:68ch}
.hsteps,.hcheck{margin:8px 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;max-width:68ch}
.hsteps{counter-reset:h}
.hsteps li,.hcheck li{position:relative;padding:12px 16px 12px 54px;background:var(--card);border:2px solid var(--line);border-radius:16px;font-weight:600;line-height:1.5}
.hsteps li::before{counter-increment:h;content:counter(h);position:absolute;left:12px;top:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:16px;background:var(--sun);color:#2B2240;border:2.5px solid #2B2240}
.hcheck li::before{content:"";position:absolute;left:16px;top:15px;width:18px;height:18px;border-radius:6px;border:2.5px solid var(--edge);background:var(--mint)}
.hcheck li::after{content:"";position:absolute;left:21px;top:17px;width:6px;height:10px;border:solid #2B2240;border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
.path{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 4px;background:color-mix(in srgb,var(--brand) 12%,var(--card));border:1.5px solid color-mix(in srgb,var(--brand) 45%,transparent);border-radius:8px;padding:1px 8px;font-size:.93em;font-weight:800;white-space:normal}
.path i{font-style:normal;color:var(--brandc);opacity:.8}
.hbody .note{margin:4px 0 18px;max-width:68ch}
.hbody .faq{margin-top:8px}
.hbody .pager .btn{white-space:normal;text-align:left;max-width:100%;line-height:1.25}
.hvote{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:36px 0 20px;padding:16px 20px;border:2px dashed var(--line);border-radius:18px;font-weight:800}
.hvote em{color:var(--mint);font-style:normal}
.hside{display:flex;flex-direction:column;gap:16px;position:sticky;top:88px}
.hside .box{padding:20px;gap:12px}
.hside .btn{align-self:flex-start}
.hlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hlist a{font-weight:700;font-size:14.5px;text-decoration:none;color:var(--ink)}
.hlist a:hover{color:var(--brandc)}
.hlist li.on a{color:var(--brandc)}
.hlist li.on::before{content:"→ ";color:var(--brandc)}
@media (max-width:980px){.harticle{grid-template-columns:minmax(0,1fr)}.hside{position:static}.hgrid{grid-template-columns:repeat(2,1fr)}.hget{grid-template-columns:1fr}}
@media (max-width:640px){.hgrid{grid-template-columns:1fr}.hsearch{border-radius:22px}.hbody h2{scroll-margin-top:70px}}