/* PixDevs site — page assembly on top of ds.css. No new design tokens. */

/* Skip link (a11y) */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--amber); color:var(--bg); padding:10px 16px; border-radius:0 0 8px 0; font-weight:600;}
.skip:focus{left:0;}

/* Sticky full-bleed header that reuses the .nav component inside */
.site-header{position:sticky; top:0; z-index:60; background:rgba(22,33,46,0.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--border);}
.site-header .nav{max-width:var(--container); margin:0 auto; background:none; border:none; border-radius:0; backdrop-filter:none; padding:12px 32px;}
.site-header .brand{cursor:pointer;}
/* Brand mark has no intrinsic size (viewBox lives on the <use>'d symbol),
   so width:auto would default to 300px. Pin the aspect ratio so width tracks height. */
.mark{width:auto; aspect-ratio:84 / 106;}
@media(max-width:560px){
  .site-header .nav{position:relative; padding:12px 20px;}
  .site-header .nav .links.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:2px; background:var(--bg-deep); border-bottom:1px solid var(--border); padding:8px 20px 16px;}
  .site-header .nav .links.open a{padding:11px 0; font-size:15px;}
}

/* Generic page container (non-shell pages) */
.wrap{max-width:var(--container); margin:0 auto; padding:0 32px;}
.section{padding:64px 0;}
.section + .section{border-top:1px solid var(--border);}
.section-head{margin-bottom:28px;}
.section-head .eyebrow{margin-bottom:10px; display:block;}
.page-head{padding:56px 0 8px;}
.page-head .eyebrow{margin-bottom:12px; display:block;}
.page-head p.lead{max-width:60ch; margin:14px 0 0;}

/* Home hero top spacing */
.home-hero{margin-top:32px;}

/* Real app icon centered on the card glow */
.gcard .art img.icon{position:relative; width:88px; height:88px; border-radius:18px; box-shadow:0 12px 28px rgba(0,0,0,0.4);}
.fcard .art img.icon{position:relative; width:120px; height:120px; border-radius:24px; box-shadow:0 14px 30px rgba(0,0,0,0.4);}
a.gcard{display:block; color:inherit;}             /* whole card is a link */

/* App Store download badge — official Apple artwork, links to the product page */
.store-badge{display:inline-block; line-height:0; border-radius:9px; transition:opacity .15s ease;}
.store-badge img{height:46px; width:auto; display:block;}
.store-badge:hover{opacity:0.88;}
.store-badge:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

/* Studio strip on home */
.studio{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center;}
.studio .mantra{font-family:var(--font-display); font-size:clamp(22px,2.6vw,30px); line-height:1.25; max-width:18ch;}
@media(max-width:760px){ .studio{grid-template-columns:1fr; gap:20px;} }

/* Contact (support page) */
.contact-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:28px 30px; box-shadow:var(--lift-sm); max-width:560px; margin-bottom:40px;}
.contact-card .email{font-family:var(--font-mono); font-size:18px; color:var(--amber); margin:8px 0 18px;}

/* Footer wrapper spacing */
.site-footer-wrap{max-width:var(--container); margin:56px auto 32px; padding:0 32px;}

/* ---------- Legal pages (doc shell) ---------- */
html{scroll-padding-top:76px;}        /* clear the sticky header on anchor jumps */
.toc{top:76px;}
.legal-head{padding:48px 0 4px;}
.legal-head h1{margin:8px 0 0;}
.legal-head .updated{margin-top:12px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.04em; color:var(--text-3);}
.legal-head .summary{margin-top:24px;}

/* Long-form prose inside .content */
.prose p{margin:0 0 16px; color:var(--text); max-width:70ch;}
.prose p.muted{color:var(--text-2);}
.prose h3{margin:30px 0 12px;}
.prose h4{font-family:var(--font-display); font-size:16px; color:var(--text); margin:22px 0 8px;}
.prose ul,.prose ol{margin:0 0 16px; padding-left:22px; max-width:68ch; color:var(--text);}
.prose li{margin:7px 0;}
.prose li::marker{color:var(--amber);}
.prose a{color:var(--amber); border-bottom:1px solid transparent; transition:border-color var(--t-tap) var(--ease);}
.prose a:hover{border-bottom-color:var(--amber);}
.prose strong{color:var(--text); font-weight:600;}
.prose .sec{padding:40px 0;}
.prose .sec-head{margin-bottom:14px;}

/* 404 */
.fof{max-width:var(--container); margin:0 auto; padding:96px 32px; text-align:center;}
.fof .blockfield{justify-content:center; margin:0 auto 28px; width:max-content;}