/* site.css — what the public theme needed and did not have.

   The static theme in New/dist was drawn for three pages with no account, no
   database and no operator. Everything below is the Django site's behaviour,
   drawn in that theme's own hand: same palette variables, same 12–30px radii,
   same pastel bubbles. Nothing here restyles a component the theme already
   draws — it only adds the ones it never had to.

   Public pages only. The frame (header, footer, notices, Telegram button) is
   in chrome.css. Loaded LAST, after footer.css, so a rule here can lean on anything above it
   without fighting source order. */


.muted { color: var(--muted); }
.faint { color: var(--muted-2); }
.mono { font-family: Consolas, "SFMono-Regular", Menlo, monospace; }
.emoji-icon { font-size: 24px; line-height: 1; }

/* ---- Landing additions --------------------------------------------------- */
.hero-note {
  margin-top: 18px; padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 2.1;
  color: var(--mint); background: var(--mint-soft); border: 1px solid var(--mint-line); max-width: 560px;
}
.hero h1 span.tint { color: var(--accent-dark); }
.service-card .traffic {
  display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; background: var(--mint-soft); color: var(--mint);
}
.service-card .traffic.is-heavy { background: var(--accent-soft); color: var(--accent-dark); }
.service-card .card-text p { margin-bottom: 0; }

/* «سه قدم» — the Django landing's how-it-works section. The static theme had no
   equivalent, so it borrows the benefit cards' surface and the eyebrow/heading
   pair every other section uses. */
.steps-section { padding-top: 70px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.step-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 25px 23px;
  display: flex; gap: 16px; align-items: flex-start;
}
.step-num {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--p-orange-bg); color: var(--p-orange); font-weight: 800; font-size: 19px;
}
.step-card h3 { margin: 4px 0 4px; font-size: 18px; }
.step-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 2; }
@media (max-width: 760px) {
  .steps-section { padding-top: 45px; }
  .steps-grid { grid-template-columns: 1fr; }
}
.benefit-copy p b { color: var(--ink); font-weight: 600; }
.try-actions .button-quiet-cta { background: var(--glass); color: var(--ink); border: 1px solid var(--mint-line); }

/* ---- Guide additions ----------------------------------------------------- */
.guide-addresses {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 12px; direction: ltr; justify-content: flex-end;
}
.guide-addresses .addr { display: inline-flex; gap: 8px; align-items: baseline; font-size: 15px; }
.guide-addresses .addr > span:first-child { color: var(--muted); }
.copy-address {
  font: inherit; font-family: Consolas, monospace; font-size: 16px; font-weight: 600;
  color: var(--accent-dark); background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 9px; padding: 3px 10px; cursor: pointer;
}
.copy-address.is-copied, .is-copied { color: var(--ok-ink); }
.copy-block {
  display: block; width: 100%; text-align: left; direction: ltr; padding: 11px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font: inherit;
  color: var(--accent-dark);
}
.guide-clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.guide-clips video { width: 100%; border-radius: 14px; background: #000; margin-top: 10px; }
.guide-clips h3 small { font-weight: 400; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .guide-clips { grid-template-columns: 1fr; } }
.guide-table.is-ltr td:first-child { width: 90px; }
.guide-table .copy-secret {
  font: inherit; font-family: Consolas, monospace; font-size: 13px; color: var(--accent-dark);
  background: none; border: 0; padding: 0; cursor: pointer; word-break: break-all; text-align: left; direction: ltr;
}
.alert.is-info { background: var(--info-soft); color: var(--info-ink); }
.alert b { font-weight: 700; }
.guide-chapter .alert { margin-top: 16px; line-height: 2.1; }

/* ---- Coverage additions -------------------------------------------------- */
.coverage-crumb { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.coverage-crumb a { color: var(--accent-dark); }
.coverage-locked {
  text-align: center; padding: 30px 24px; border: 1px dashed var(--line); border-radius: 18px;
  background: var(--bg); margin-top: 12px;
}
.coverage-locked p { color: var(--muted); max-width: 560px; margin: 0 auto 16px; }
.coverage-locked .actions, .suggest-card .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.coverage-usage.is-light-free { background: var(--mint-soft); border-color: var(--mint-line); }
.suggest-card {
  margin-top: 40px; padding: 30px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line);
}
.suggest-card h2 { font-size: 22px; margin: 0 0 6px; }
.suggest-card > p { color: var(--muted); margin: 0 0 20px; }
.suggest-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.suggest-card .actions { justify-content: flex-start; margin-top: 8px; }
@media (max-width: 760px) { .suggest-card .row2 { grid-template-columns: 1fr; } .suggest-card { padding: 22px 18px; } }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
}
.field textarea { min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--accent-ring); border-color: var(--accent); }
.field .help { font-size: 13px; color: var(--muted); margin-top: 5px; }
.field .error { font-size: 13px; color: var(--bad-ink); margin-top: 5px; }
.other-categories { margin-top: 44px; }
.other-categories h2 { font-size: 22px; margin: 0 0 16px; }
.other-categories .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.other-categories .chips a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); font-size: 14px;
}
.other-categories .chips a:hover { border-color: var(--accent-line); color: var(--accent-dark); }
.other-categories .chips svg { width: 18px; height: 18px; }

/* ---- The artwork in the dark theme -----------------------------------------
   Every illustration here was painted on white and composited with
   mix-blend-mode:multiply — invisible on a light page, and on a dark one it
   multiplies the picture down to a near-black smudge.

   In the dark the picture is INVERTED and turned back round the colour wheel
   (invert + hue-rotate 180°): white becomes black, so the paper disappears,
   while the teal globe stays teal and the orange stays orange — only light and
   dark swap. `screen` then drops the now-black paper into the page. Tried
   against the alternative (normal blend, dimmed, masked), which left a glowing
   white oval behind every picture; this one makes each object sit IN the dark.
   The existing masks still fade the edges. */
:root[data-theme="dark"] .main-art,
:root[data-theme="dark"] .benefit-visual img,
:root[data-theme="dark"] .page-intro img,
:root[data-theme="dark"] .try-art > img{filter:invert(1) hue-rotate(180deg) brightness(1.05) saturate(1.1);mix-blend-mode:screen}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .main-art,
  :root:not([data-theme]) .benefit-visual img,
  :root:not([data-theme]) .page-intro img,
  :root:not([data-theme]) .try-art > img{filter:invert(1) hue-rotate(180deg) brightness(1.05) saturate(1.1);mix-blend-mode:screen}
}

/* ============================================================================
   TYPOGRAPHY — the old site's scale, on the new design
   ============================================================================
   Operator, 28 Shahrivar 1405: «در فونت اندازه‌ها… اولویت با وب سایت قدیم».
   The panel pages get this for free — site/app.css keeps the old scale. These
   three pages were drawn with the new theme's own sizes, so every typographic
   ROLE here is set back to the old value, from one table:

     body        1.0625rem / 1.65          (was 16px / 1.9)
     h1          clamp(2.6rem, 7.5vw, 4.75rem), 700
     h2 section  clamp(1.9rem, 4.6vw, 3rem), 700
     h3 card     1.125rem, 700
     lead        clamp(1.0625rem, 2.1vw, 1.3125rem) / 1.55
     eyebrow     1.4808rem, 600
     card text   .9375rem

   Loaded last, so these win over the theme's rules AND over its breakpoints;
   the old scale is fluid (clamp) and needs no breakpoints of its own except
   the Persian line-height one below. ⚠️ To go back to the new theme's sizes,
   delete this block and nothing else. */
:root{
  --fs-body:1.0625rem; --lh-body:1.65;
  --fs-h1:clamp(2.6rem,7.5vw,4.75rem);
  --fs-h2:clamp(1.9rem,4.6vw,3rem);
  --fs-h3:1.125rem;
  --fs-lead:clamp(1.0625rem,2.1vw,1.3125rem); --lh-lead:1.55;
  --fs-eyebrow:.9375rem;   /* 29 Shahrivar 1405: was 1.4808rem = 23.7px */
  --fs-card:.9375rem;
}
body{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:-.005em}

h1,
.page-intro h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.04em;line-height:1.04}

.section-heading h2,.benefits-heading h2,.faq-heading h2,.try-copy h2,.help-banner h2,
.connection-intro h2,.faq-section h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.028em;line-height:1.12}

.card-text h3,.benefit-copy h3,.step-card h3,.guide-chapter h3,.coverage-usage h3,.protocol-info h3,.guide-step h3,
.domain-group h2,.setup-note h2,.suggest-card h2,.other-categories h2,.guide-panel h2,.empty-state h2{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.02em;line-height:1.35}

.hero-copy>p,.page-intro p,.section-heading>p,.benefits-heading>p,.try-copy>p,.connection-intro>p{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:-.012em}

.eyebrow,.faq-heading .eyebrow,.try-copy .eyebrow{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.06em}

.card-text p,.benefit-copy p,.step-card p,.faq-answer p,.guide-chapter p,.guide-chapter li,
.coverage-usage p,.domain-group header p,.protocol-info p,.guide-step p,.faq-list details p{font-size:var(--fs-card);line-height:var(--lh-body)}

/* Persian headings need more leading once they wrap: descenders like ی and ج
   reach into the next line at the old display values. Same rule and width the
   old site used. */
@media (max-width:48rem){
  h1,.page-intro h1{line-height:1.25}
  .section-heading h2,.benefits-heading h2,.faq-heading h2,.try-copy h2,.help-banner h2,
  .connection-intro h2,.faq-section h2{line-height:1.35}
  .card-text h3,.benefit-copy h3,.step-card h3,.guide-chapter h3,.domain-group h2{line-height:1.5}
  .hero-copy>p,.page-intro p,.section-heading>p,.benefits-heading>p,.try-copy>p{line-height:1.85}
}


/* ============================================================================
   TYPOGRAPHY, second pass — 29 Shahrivar 1405
   ============================================================================
   Operator: give the text one standard order of sizes, and set the two marked
   blocks justified.

   THE ONE THING THAT WAS OUT OF ORDER. Measured live at 1440px before this
   pass, the scale ran 76 · 48 · 23.7 · 21 · 18 · 17 · 15 · 12 — and 23.7 was
   the EYEBROW, the little orange kicker above the heading. It was bigger than
   the lead under it (21) and bigger than body text (17), so the smallest thing
   on the page was set larger than the sentence it introduced. A kicker belongs
   one step BELOW body, which is where `--fs-eyebrow` now sits:

     76px   h1, hero                 clamp(2.6rem, 7.5vw, 4.75rem)
     48px   h2, section heading      clamp(1.9rem, 4.6vw, 3rem)
     21px   lead                     clamp(1.0625rem, 2.1vw, 1.3125rem)
     18px   h3, card title           1.125rem
     17px   body                     1.0625rem
     15px   card text · EYEBROW      .9375rem
     13px   micro label              .8125rem

   Everything but the eyebrow row is unchanged; the scale above is the old
   site's, which is what was asked for on 28 Shahrivar. ⚠️ To put the eyebrow
   back, restore `--fs-eyebrow:1.4808rem` — one value, nothing else. */

/* Justified: the hero's lead and the note under it. Both are capped at 530px,
   which is narrow enough that justification closes the ragged edge without
   opening rivers between the words. The last line stays ragged (`start`) —
   `justify` stretching a three-word last line across the column is the thing
   that makes justified Persian look broken. */
.hero-copy > p,
.hero-note { text-align: justify; text-align-last: start; }

/* «دیدن فهرست ›» and the rest of `.card-text small`.
   The theme set it `font:10px Arial,sans-serif` with .8px of letter-spacing —
   a Latin micro-label spec applied to Persian. Arial has no Persian design of
   its own, so it fell through to a system face and did not match a single
   other line on the page; the letter-spacing then pulled the joined letters
   apart. Same family as everything else now, and up from 10px to 13px. */
.card-text small {
  font-family: inherit; font-size: .8125rem; font-weight: 500;
  letter-spacing: 0; line-height: 1.9;
}
@media (max-width: 760px) {
  .card-text small { font-size: .8125rem; letter-spacing: 0; }
}