/* PiHunter launch refinement — UI/UX, accessibility and content architecture */

html{scroll-padding-top:88px}
body{font-size:clamp(16px,.25vw + 15px,17px);line-height:1.82}
::selection{background:var(--accent);color:var(--accent-ink)}

:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid color-mix(in oklab,var(--accent) 78%,white);
  outline-offset:3px;
}
.skip-link{
  position:fixed;inset-block-start:10px;inset-inline-start:10px;z-index:1000;
  padding:.65rem 1rem;border-radius:9px;background:var(--accent);color:var(--accent-ink);
  font-weight:750;transform:translateY(-160%);transition:transform .18s ease;
}
.skip-link:focus{transform:none}

/* Balanced rhythm: compact enough to scan, spacious enough to separate ideas. */
.section{padding-block:clamp(52px,6vw,82px)}
.section--roomy{padding-block:clamp(64px,7.5vw,104px)}
.page-hero{padding-block:clamp(54px,7vw,92px)}
.section-head{margin-bottom:clamp(26px,3.5vw,38px)}
.section-head p,.lead,.prose p,.prose li{max-width:72ch;text-wrap:pretty}
.prose{font-size:clamp(1rem,.2vw + .96rem,1.08rem)}
.prose h2{scroll-margin-top:100px;text-wrap:balance}

/* Refined surfaces and hierarchy in both themes. */
.card,.order-card,.cta-card,.comment-form,.rad-row,.news-card{
  border-color:color-mix(in oklab,var(--line-2) 76%,transparent);
}
.card{box-shadow:0 24px 60px -52px #000}
:root[data-theme="light"] .card,
:root[data-theme="light"] .order-card,
:root[data-theme="light"] .cta-card,
:root[data-theme="light"] .news-card{
  box-shadow:0 1px 1px rgb(16 35 28 / .05),0 18px 46px -38px rgb(16 35 28 / .34)
}
.member,.quote{border-color:transparent}
.quote{background:transparent;padding-inline:clamp(4px,2vw,24px)}
.quote .mark{opacity:.55}

/* Keep one clear hero focal point and quieter technical decoration. */
.hero-grid{align-items:center}
.hero-copy{position:relative;z-index:2}
.hero-copy .lede{max-width:55ch}
.hero-radar{opacity:.56;filter:saturate(.82)}
.radar-blip:nth-of-type(n+9){display:none}
.terminal{max-width:620px;margin-inline:auto;width:100%}
.term-body{min-height:300px}

/* Homepage intent selector — mirrors real user language from the keyword sheet. */
.intent-section{padding-block:clamp(30px,4vw,52px);border-block:1px solid var(--line);background:color-mix(in oklab,var(--bg-1) 74%,transparent)}
.intent-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:22px}
.intent-head h2{font-size:clamp(1.55rem,3vw,2.2rem)}
.intent-head p{color:var(--muted);max-width:54ch}
.intent-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.intent-card{
  min-height:174px;padding:22px;border:1px solid var(--line-2);border-radius:15px;
  background:var(--card);display:flex;flex-direction:column;gap:10px;transition:.2s ease;
}
.intent-card:hover{border-color:var(--accent-line);transform:translateY(-2px);box-shadow:0 20px 44px -38px #000}
.intent-card .intent-code{font:700 .68rem/1 var(--font-mono);color:var(--accent);direction:ltr}
.intent-card h3{font-size:1.04rem}
.intent-card p{font-size:.9rem;color:var(--muted);line-height:1.75}
.intent-card .more{margin-top:auto;color:var(--accent);font-weight:700;font-size:.88rem}

/* Evidence-first proof section replaces unverifiable vanity numbers. */
.proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.proof-item{padding:24px;border-top:2px solid var(--accent);background:linear-gradient(180deg,var(--accent-soft),transparent 66%);border-radius:0 0 14px 14px}
.proof-item .proof-code{font:700 .68rem/1 var(--font-mono);color:var(--accent);direction:ltr}
.proof-item h3{font-size:1.05rem;margin-top:14px}
.proof-item p{font-size:.9rem;color:var(--muted);margin-top:8px}

/* Generated editorial covers replace visible COVER placeholders. */
.auto-cover{
  position:relative;isolation:isolate;overflow:hidden;min-height:190px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:clamp(20px,3vw,34px);border:1px solid var(--line-2);border-radius:14px;
  background:
    radial-gradient(circle at 15% 15%,hsl(var(--cover-h,145) 78% 52% / .28),transparent 34%),
    linear-gradient(135deg,color-mix(in oklab,var(--bg-3) 88%,hsl(var(--cover-h,145) 70% 45%)),var(--bg-1));
}
.auto-cover::before{
  content:"";position:absolute;inset:-20%;z-index:-1;opacity:.45;
  background:repeating-linear-gradient(90deg,transparent 0 31px,var(--line-2) 32px 33px),repeating-linear-gradient(0deg,transparent 0 31px,var(--line-2) 32px 33px);
  transform:perspective(500px) rotateX(58deg) rotateZ(-12deg) scale(1.2);
}
.auto-cover::after{content:"";position:absolute;inset:auto -10% -48% 32%;height:90%;border:1px solid var(--accent-line);border-radius:50%;box-shadow:0 0 0 32px color-mix(in oklab,var(--accent) 6%,transparent),0 0 0 64px color-mix(in oklab,var(--accent) 4%,transparent)}
.auto-cover b{font:800 clamp(1.05rem,3vw,1.65rem)/1.2 var(--font-mono);color:var(--ink);direction:ltr;position:relative;z-index:1}
.auto-cover span{font:650 .68rem/1.4 var(--font-mono);letter-spacing:.1em;color:var(--accent);direction:ltr;margin-top:8px;position:relative;z-index:1}
.prose>.auto-cover{aspect-ratio:16/8;margin-bottom:30px;min-height:230px}
.article>.auto-cover{border:0;border-bottom:1px solid var(--line);border-radius:0;min-height:175px}

/* Helpful, crawlable content paths on every article. */
.quick-answer{margin:0 0 30px;padding:20px 22px;border-inline-start:3px solid var(--accent);background:var(--accent-soft);border-radius:12px}
.quick-answer strong{display:block;color:var(--accent);font-size:.8rem;margin-bottom:7px}
.quick-answer p{color:var(--ink);font-size:.96rem;line-height:1.85}
.reading-path{margin-top:40px;padding:26px;border:1px solid var(--line-2);border-radius:15px;background:var(--bg-1)}
.reading-path h3{font-size:1.08rem;margin-bottom:8px}
.reading-path>p{color:var(--muted);font-size:.92rem}
.reading-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.reading-links a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:10px;font-size:.88rem;font-weight:650}
.reading-links a:hover{border-color:var(--accent-line);color:var(--accent)}
.reading-source{margin-top:14px!important;font-size:.8rem!important}
.reading-source a{text-decoration:underline;text-underline-offset:3px}

.service-guides{padding-block:clamp(46px,6vw,76px);border-top:1px solid var(--line)}
.service-guides-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.service-guide{padding:20px;border:1px solid var(--line-2);border-radius:13px;background:var(--card)}
.service-guide small{font:650 .65rem/1 var(--font-mono);color:var(--accent);direction:ltr}
.service-guide h3{font-size:1rem;margin-top:10px}
.service-guide p{font-size:.86rem;color:var(--muted);margin-top:7px}

.footer-legal{display:flex;flex-wrap:wrap;gap:10px 20px;padding-top:22px;margin-top:22px;border-top:1px solid var(--line);font-size:.82rem;color:var(--faint)}
.footer-legal a:hover{color:var(--accent)}
.mobile-action-bar{display:none}

/* Forms must communicate their real delivery state. */
.form-system-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;color:var(--faint);font-size:.8rem;line-height:1.75}
.form-system-note::before{content:"i";flex:none;display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--line-2);border-radius:50%;font:700 .7rem/1 var(--font-mono)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

@media(max-width:980px){
  .intent-grid,.proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-guides-grid,.reading-links{grid-template-columns:1fr}
}
@media(max-width:720px){
  .section{padding-block:clamp(44px,12vw,62px)}
  .page-hero{padding-block:44px 54px}
  .hero{padding-top:38px;padding-bottom:52px}
  .hero-radar{opacity:.28;transform:translate(-58%,-58%) scale(.82)}
  .terminal{display:none}
  .hero-copy .hero-logo img{height:clamp(58px,20vw,82px)}
  .hero-copy .hero-tagline{font-size:clamp(1.48rem,7.5vw,2.05rem)}
  .hero-copy .lede{font-size:1rem;line-height:1.9}
  .hero-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .hero-trust .ti{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg-1)}
  .hero-trust .ti b{font-size:.78rem}.hero-trust .ti span{font-size:.72rem}
  .intent-head{align-items:start;flex-direction:column}
  .intent-grid,.proof-grid{grid-template-columns:1fr}
  .intent-card{min-height:auto}
  .prose>.auto-cover{min-height:190px;aspect-ratio:16/10}
  .mobile-action-bar{position:fixed;display:grid;grid-template-columns:1fr auto;gap:9px;inset-inline:10px;inset-block-end:10px;z-index:45;padding:9px;border:1px solid var(--line-2);border-radius:14px;background:color-mix(in oklab,var(--bg) 90%,transparent);backdrop-filter:blur(16px);box-shadow:0 20px 50px #0008}
  .mobile-action-bar .btn{min-height:46px;padding:.7em 1em;justify-content:center;font-size:.88rem}
  .has-mobile-action{padding-bottom:78px}
  .footer-legal{padding-bottom:16px}
}
@media(max-width:480px){
  .hero-trust{grid-template-columns:1fr}
  .hero-trust .ti{flex-direction:row;align-items:center;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ================================================================
   MOBILE BREAKAGE REPAIR — appended 1405/05 (2026-08)
   Repair only. No colour, type-scale or layout-design decisions are
   made here; a redesign can delete this whole block.
   ================================================================ */

/* .footer-status is white-space:nowrap, so its min-content is ~294px. In the
   two-column mobile footer (`1fr 1fr`, whose `1fr` carries an automatic
   min-content floor) that blew the grid out to 463px inside a 350px wrap and
   pushed the «خدمات» and «تماس» columns off the start edge of a 390px screen.
   Let the pill wrap below 720px and give both columns a zero floor. */
@media (max-width:720px){
  .footer-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .footer-status{ white-space:normal; }
}

/* The collapsed mobile brand is emblem-only: a 32x44 hit area. Widening the
   anchor extends the touch target without moving or resizing the logo — the
   nav's start edge is fixed and .nav-cta already takes the leftover space. */
@media (max-width:940px){
  .nav-inner .brand{ min-width:44px; }
}

/* --- BIDI REPAIR (content correctness, not design) ---------------------------
   pages.css sets `direction:ltr` on inline <code>, but per CSS Writing Modes
   `direction` has no effect on an inline-level box unless `unicode-bidi` is
   also set. Without it, code fragments that start or end with a bidi-neutral
   character are reordered by the surrounding RTL run: `../` rendered as `/..`,
   `-w` as `w-`, `/etc/passwd` as `etc/passwd/`. Isolating the inline box makes
   the authored `direction:ltr` take effect. Affects ~561 fragments sitewide.
   No colour, spacing, type or layout is changed by this rule. */
:where(.prose, .doc-body, .wiki-doc, body) code{ unicode-bidi: isolate; }
kbd, samp, var{ unicode-bidi: isolate; }

/* ================================================================
   FINAL REVIEW POLISH — 1405/06
   Design-system unification pass: nav state, team cards, TOC,
   link affordance, chip active state, micro-type floor.
   ================================================================ */

/* nav — current page indicator + tighter CTA rhythm */
.nav-links a{position:relative}
.nav-links a.current{color:var(--accent);background:var(--accent-soft)}
.nav-cta .btn-primary{padding:.58em 1.15em;font-size:.95rem}

/* homepage team — unified card pattern (no circular photos) */
.team-grid{gap:20px}
.member{background:var(--card);border:1px solid color-mix(in oklab,var(--line-2) 76%,transparent);border-radius:var(--radius);padding:14px 14px 20px;text-align:start;transition:.25s ease;overflow:hidden}
.member:hover{border-color:var(--accent-line);transform:translateY(-3px)}
.member .photo{width:100%;height:auto;aspect-ratio:1/1;border-radius:var(--radius-sm);margin:0 0 14px;border:1px solid var(--line);box-shadow:none;object-fit:cover;object-position:center top;filter:grayscale(1) contrast(1.05);transition:filter .35s ease}
.member:hover .photo{filter:grayscale(.35)}
.member .meta{padding-inline:4px}
.member .socials{justify-content:flex-start}
:root[data-theme="light"] .member{box-shadow:0 1px 1px rgb(16 35 28/.05),0 18px 46px -38px rgb(16 35 28/.34)}

/* article TOC — numbered, indented, active state */
.toc{counter-reset:tocn}
.toc a{counter-increment:tocn;display:flex;align-items:baseline;gap:9px;padding:.46em 10px .46em 6px;border-inline-start:2px solid transparent;border-radius:0 7px 7px 0}
.toc a::before{content:counter(tocn,decimal-leading-zero);font-family:var(--font-mono);font-size:.66rem;color:var(--faint);direction:ltr;flex:none}
.toc a:hover{color:var(--accent);background:var(--bg-1);border-color:var(--accent-line)}
.toc a.on{color:var(--accent);border-color:var(--accent);background:linear-gradient(to left,var(--accent-soft),transparent 72%)}
.toc a.on::before{color:var(--accent)}

/* in-text links must be visible (global a{color:inherit}) */
.prose a:not(.btn),.doc-body a:not(.btn),.section-head p a,.card p a,.faq-a a,.tab-panel a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:color-mix(in oklab,var(--accent) 40%,transparent)}
.prose a:not(.btn):hover,.doc-body a:not(.btn):hover,.faq-a a:hover{text-decoration-color:var(--accent)}

/* filter chips — links styled as chips; active = solid accent (both themes) */
.shop-filters a{font-family:var(--font-fa);font-size:.88rem;color:var(--muted);white-space:nowrap;background:var(--bg-1);border:1px solid var(--line-2);border-radius:999px;padding:.5em 1.1em;transition:.18s ease;display:inline-block}
.shop-filters a:hover{border-color:var(--accent-line);color:var(--ink)}
.shop-filters a.active,.shop-filters button.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}

/* forms in light theme — white fields, neutral borders, accent only on focus */
:root[data-theme="light"] .field input,:root[data-theme="light"] .field textarea,:root[data-theme="light"] .field select{background:#fff}
:root[data-theme="light"] .blog-search{background:#fff}
:root[data-theme="light"] .seg button{background:#fff}

/* micro-type floor (~13px min) */
.eyebrow{font-size:.78rem}
.breadcrumb{font-size:.8rem}
.wiki-sev,.wiki-token{font-size:.7rem}
.blog-meta{font-size:.84rem}
.acover span{font-size:.66rem}

/* buttons — calmer hero scale, tactile hover */
.btn-lg{padding:.92em 1.65em;font-size:1.02rem}
.btn-ghost:hover{background:var(--bg-1);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.99)}

/* awards — even rhythm, weighted medal */
.award{gap:10px}
.award .medal{background:var(--accent-soft);font-weight:700}
.award h4{text-wrap:balance}

/* white wordmark SVG is invisible on light canvas — darken it there */
:root[data-theme="light"] .hero-logo img{filter:invert(.85) drop-shadow(0 6px 30px color-mix(in oklab,var(--accent) 22%,transparent))}
:root[data-theme="light"] .footer .brand .wordmark{filter:invert(.85)}


/* academy tool pages — logo slot + official links */
.tool-head{display:flex;align-items:center;gap:16px;margin-top:16px}
.tool-head .wiki-h1{margin-top:0}
.tool-logo{flex:none;width:64px;height:64px;border-radius:14px;background:var(--card);border:1px solid var(--line-2);display:grid;place-items:center;overflow:hidden}
.tool-logo img{width:72%;height:72%;object-fit:contain;display:block}
.tool-logo.noimg{display:none}
.tool-links{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.tool-links .btn{padding:.6em 1.15em;font-size:.92rem}