/* fenix-ping public site.
   One stylesheet, no build step, and nothing fetched from another origin.
   Google Fonts is slow or unreachable from many Iranian networks, and a
   landing page that waits on a blocked font request is a landing page that
   renders late for exactly the users it is written for. The font is served
   from this box, beside the page, and never from a CDN we do not own. */

/* Vazirmatn 33.003, SIL OFL 1.1 - fonts/OFL.txt carries the licence, which
   has to ship with the font. This is the variable file: one 108 KB request
   covers every weight from 100 to 900, where the five static weights this
   stylesheet asks for would be 249 KB.

   local() first, so anyone who already has Vazirmatn installed - most Iranian
   designers do - downloads nothing at all.

   font-display:swap means the text is readable immediately in Tahoma and
   re-renders when the font lands. The alternative is a blank page on a slow
   connection, which is the failure this whole site is built to avoid.

   A browser too old for variable fonts still downloads this and renders it at
   its default 400 instead of scaling; bold ends up synthesised. Nothing
   breaks, it just looks a little flatter. */
@font-face{
  font-family:Vazirmatn;
  src:local("Vazirmatn"),
      url(fonts/Vazirmatn-Variable.woff2) format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#0d0f14; --card:#161a22; --card2:#1b2029; --line:#242b37;
  --fg:#e9ecf1; --mut:#98a2b3; --dim:#6b7480;
  --ember:#ff7a1a; --ember-dim:#c25a10; --ok:#4ade80; --no:#f87171;
  --radius:14px; --wrap:1000px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.9 Vazirmatn,"Segoe UI",Tahoma,"Iranian Sans",system-ui,sans-serif;
  overflow-wrap:break-word;
}
a{color:var(--ember); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 18px}
.ltr{direction:ltr; text-align:left; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mut{color:var(--mut)}
.sm{font-size:14px}

/* ---------------------------------------------------------------- header */
header{border-bottom:1px solid var(--line); background:rgba(13,15,20,.9);
  backdrop-filter:blur(8px); position:sticky; top:0; z-index:10}
header .wrap{display:flex; align-items:center; gap:18px; height:62px}
.logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px;
  color:var(--fg)}
.logo:hover{text-decoration:none}
.logo .mark{width:26px; height:26px; flex:0 0 26px}
nav{margin-inline-start:auto; display:flex; gap:20px; font-size:15px}
nav a{color:var(--mut)}
nav a:hover{color:var(--fg); text-decoration:none}
@media(max-width:640px){ nav{gap:14px; font-size:14px} .logo span{display:none} }

/* ------------------------------------------------------------------ hero */
.hero{padding:56px 0 40px; text-align:center}
.hero h1{font-size:clamp(27px,5vw,42px); line-height:1.5; margin:0 0 14px; font-weight:800}
.hero h1 em{font-style:normal; color:var(--ember)}
.hero p.lead{font-size:clamp(16px,2.4vw,19px); color:var(--mut); margin:0 auto 28px; max-width:640px}

.dnsbox{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0 0 26px}
.dns{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 22px; min-width:210px}
.dns .k{font-size:12px; color:var(--dim); letter-spacing:.04em}
.dns .v{font-size:23px; font-weight:700; color:var(--ember); margin-top:2px}

.cta{display:inline-flex; align-items:center; gap:9px; background:var(--ember);
  color:#160a02; font-weight:800; font-size:17px; padding:13px 30px;
  border-radius:999px; border:0; cursor:pointer}
.cta:hover{background:#ff8c3a; text-decoration:none}
.cta.ghost{background:transparent; color:var(--fg); border:1px solid var(--line); font-weight:600}
.cta.ghost:hover{background:var(--card2)}
.ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* --------------------------------------------------------------- sections */
section{padding:44px 0; border-top:1px solid var(--line)}
section > .wrap > h2{font-size:23px; margin:0 0 8px; font-weight:800}
section > .wrap > p.sub{color:var(--mut); margin:0 0 26px}

/* the honest disclaimer - the most important block on the page */
.honest{background:var(--card); border:1px solid var(--line);
  border-inline-start:4px solid var(--ember); border-radius:var(--radius); padding:22px 24px}
.honest h2{margin:0 0 6px; font-size:20px}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:18px}
@media(max-width:680px){ .cols{grid-template-columns:1fr; gap:16px} }
.col h3{font-size:15px; margin:0 0 10px; font-weight:700}
.col.yes h3{color:var(--ok)} .col.no h3{color:var(--no)}
.col ul{margin:0; padding:0; list-style:none}
.col li{padding:3px 0; color:var(--mut); font-size:15px}
.col li::before{margin-inline-end:8px; font-weight:700}
.col.yes li::before{content:"✓"; color:var(--ok)}
.col.no li::before{content:"✕"; color:var(--no)}

/* --------------------------------------------------------------- pricing */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:780px){ .plans{grid-template-columns:1fr} }
.plan{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; text-align:center; position:relative}
.plan.best{border-color:var(--ember)}
.plan .tag{position:absolute; top:-11px; inset-inline-start:50%; transform:translateX(50%);
  background:var(--ember); color:#160a02; font-size:12px; font-weight:800;
  padding:3px 12px; border-radius:999px; white-space:nowrap}
.plan h3{margin:0 0 10px; font-size:17px; color:var(--mut); font-weight:600}
.plan .price{font-size:33px; font-weight:800; line-height:1.3}
.plan .price small{font-size:14px; font-weight:500; color:var(--mut)}
.plan .per{color:var(--dim); font-size:13px; margin-bottom:16px}
.plan ul{list-style:none; margin:0 0 20px; padding:0; font-size:14px; color:var(--mut)}
.plan li{padding:4px 0}

/* ----------------------------------------------------------------- steps */
.steps{counter-reset:s; display:grid; gap:14px}
.steps li{counter-increment:s; list-style:none; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px;
  display:flex; gap:15px; align-items:flex-start}
.steps li::before{content:counter(s); flex:0 0 30px; height:30px; border-radius:50%;
  background:var(--card2); color:var(--ember); font-weight:800; font-size:15px;
  display:grid; place-items:center; margin-top:2px}
.steps li b{display:block; margin-bottom:2px}
.steps li .mut{font-size:14px}

/* ----------------------------------------------------------------- chips */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; font-size:14px; color:var(--mut)}

/* ------------------------------------------------------------ shot / faq */
figure{margin:0}
.shot{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden}
.shot img{display:block; width:100%; height:auto}
.shot .todo{aspect-ratio:16/9; display:grid; place-items:center; text-align:center;
  color:var(--dim); font-size:14px; padding:20px; background:
  repeating-linear-gradient(45deg,#161a22,#161a22 12px,#1a1f28 12px,#1a1f28 24px)}
figcaption{color:var(--dim); font-size:13px; margin-top:8px; text-align:center}

details{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 18px; margin-bottom:10px}
details summary{cursor:pointer; font-weight:600; list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; float:left; color:var(--ember); font-weight:800}
details[open] summary::after{content:"−"}
details p{color:var(--mut); margin:10px 0 0; font-size:15px}

/* ---------------------------------------------------------------- guides */
.guidegrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:780px){ .guidegrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:460px){ .guidegrid{grid-template-columns:1fr} }
.guidecard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; display:block; color:var(--fg)}
.guidecard:hover{border-color:var(--ember); text-decoration:none}
.guidecard .ico{font-size:26px; line-height:1}
.guidecard b{display:block; margin:8px 0 3px}
.guidecard span{color:var(--mut); font-size:13px}

article{max-width:760px; margin:0 auto; padding:34px 0}
article h1{font-size:27px; margin:0 0 6px}
article h2{font-size:19px; margin:34px 0 12px}
.crumb{color:var(--dim); font-size:14px; margin-bottom:18px}
.callout{border:1px solid var(--line); border-inline-start:4px solid var(--ember);
  background:var(--card); border-radius:var(--radius); padding:15px 20px; margin:20px 0}
.callout.warn{border-inline-start-color:var(--no)}
.callout b{display:block; margin-bottom:3px}
.callout p{margin:0; color:var(--mut); font-size:15px}
kbd{background:var(--card2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:5px; padding:1px 7px; font-size:13px; font-family:inherit;
  display:inline-block; direction:ltr}
code{background:var(--card2); border-radius:5px; padding:2px 7px; font-size:14px;
  direction:ltr; display:inline-block; font-family:ui-monospace,Menlo,monospace}
.dnsinline{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0}
.dnsinline div{background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:10px 16px}
.dnsinline .v{color:var(--ember); font-weight:700; font-size:18px}

/* ---------------------------------------------------------------- footer */
footer{border-top:1px solid var(--line); padding:30px 0 40px; color:var(--dim); font-size:14px}
footer .wrap{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
footer nav{margin-inline-start:auto}

/* e-namad trust seal. flex-basis:100% puts it on its own line under the
   footer links rather than fighting the nav for the end of the row. It is the
   only image on this site loaded from somewhere else, which is why the CSP in
   infra/caddy/Caddyfile names that one host and nothing more.

   It has to degrade to nothing, because e-namad serves the logo only once the
   seal is approved - until then logo.aspx answers 403 - and a broken image in
   the footer of a site asking strangers for money is worse than no seal at
   all. font-size:0 kills the alt text and height:auto lets a broken image
   collapse to zero, so the footer looks deliberate while we wait and the seal
   appears by itself the day it is issued. No redeploy, no JavaScript.

   No white card behind it, deliberately. Chrome reserves about 16px for a
   broken image whatever you do, so a white background would sit in the footer
   as a bright strip for as long as approval takes. The artwork cannot be
   previewed from here - e-namad answers 403 until the seal is live - so if it
   turns out to be dark ink on transparency and looks washed out against
   #0d0f14, add `background:#fff` back on this rule and it is fixed. */
footer .enamad{flex-basis:100%; display:block; width:max-content}
footer .enamad img{display:block; width:86px; height:auto;
  border-radius:8px; font-size:0; color:transparent}

/* ------------------------------------------------------------ legal pages
   about.html, terms.html and contact.html. A gateway review and e-namad both
   look for these three, so they are part of the site rather than a PDF
   somewhere - which means they have to read like the rest of it. */
.legal h2{border-top:1px solid var(--line); padding-top:22px}
.legal ul{padding-inline-start:22px; margin:12px 0}
.legal li{padding:4px 0; font-size:15px}
.legal li b{color:var(--fg)}

/* The contact table. Not a <table>: at phone width the label wraps above its
   value, which a table cannot do without losing the row. */
.contact{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin:22px 0}
.contact .row{background:var(--card); display:flex; gap:14px; flex-wrap:wrap;
  padding:13px 18px}
.contact .k{color:var(--dim); font-size:14px; flex:0 0 130px}
.contact .v{color:var(--fg); font-weight:600}
@media(max-width:520px){ .contact .k{flex-basis:100%} }