/* Kavera — industry pages. Loaded after kavera.css and plan.css, which supply
   the brand custom properties and the .btn / header / footer styles. */

.in-wrap{max-width:860px;margin:0 auto;padding:0 22px}

/* ---- profession switcher ---- */
.in-switch-wrap{border-bottom:1px solid var(--bord);background:rgba(19,28,46,.45);
  padding:18px 22px 20px}
.in-pick{max-width:860px;margin:0 auto 10px;color:var(--sub,#8396B1);
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
/* Six professions, so the column count has to divide into six — flex-wrap
   fitted five on the first line and dropped the sixth on its own. Same fix,
   and the same breakpoints, as the .who grid on the home page.
   The "other professions" list at the foot has five and lands 3+2, which
   reads as a list rather than an orphan. */
.in-switch{max-width:860px;margin:0 auto;display:grid;gap:8px;
  grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.in-switch{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.in-switch{grid-template-columns:1fr}}
.in-switch a{display:flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;text-align:center;
  background:var(--surf);border:1px solid var(--bord);border-radius:11px;
  color:var(--mut);padding:11px 14px;font-size:.86rem;font-weight:500;
  transition:border-color .18s,color .18s,background .18s}
.in-switch a svg{width:17px;height:17px;flex-shrink:0}
.in-switch a:hover{color:var(--fg);border-color:var(--blue)}
.in-switch a.on{color:var(--blue);border-color:var(--blue);background:rgba(45,212,191,.12)}

/* ---- hero ---- */
.in-hero{padding:56px 0 44px}
.in-eyebrow{display:inline-block;color:var(--blue);font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.in-hero h1{font-size:clamp(1.65rem,4.6vw,2.6rem);font-weight:800;line-height:1.24;
  letter-spacing:-.025em;margin:0 0 18px;max-width:20ch}
/* The ch unit is the width of "0", which is wide in Vazirmatn relative to the
   letters — so the same ch value wraps Persian and Arabic headlines far too
   early. At 17ch the legal headline broke into five lines. */
[dir="rtl"] .in-hero h1{max-width:28ch}
.in-lede{color:var(--mut);font-size:1.06rem;line-height:1.85;max-width:62ch;margin:0}

/* ---- sections ---- */
.in-sec{padding:46px 0;border-top:1px solid var(--bord)}
.in-sec.alt{background:rgba(19,28,46,.45)}
.in-sec h2{font-size:clamp(1.25rem,3vw,1.6rem);font-weight:800;letter-spacing:-.02em;
  margin:0 0 8px}
.in-sec h2.small{font-size:1rem;margin-bottom:14px}
.in-sub{color:var(--mut);font-size:.98rem;line-height:1.8;margin:0 0 24px;max-width:58ch}
.in-note{color:var(--sub,#8396B1);font-size:.84rem;line-height:1.8;margin:20px 0 0;
  padding-top:16px;border-top:1px solid var(--bord)}

/* ---- the scenario ---- */
.in-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
.in-steps li{display:flex;gap:16px;align-items:flex-start;background:var(--surf);
  border:1px solid var(--bord);border-radius:14px;padding:18px 20px}
.in-steps .n{flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:rgba(251,113,133,.14);color:var(--red);display:grid;place-items:center;
  font-size:.82rem;font-weight:800}
.in-steps p{margin:0;color:var(--mut);font-size:.95rem;line-height:1.8}

/* ---- the rules ---- */
.in-rules{display:grid;gap:14px}
.in-rules article{background:var(--surf);border:1px solid var(--bord);
  border-radius:14px;padding:20px;border-inline-start:3px solid var(--blue)}
.in-rules h3{font-size:.98rem;font-weight:700;margin:0 0 6px}
.in-rules p{margin:0;color:var(--mut);font-size:.93rem;line-height:1.82}

/* ---- before / after ---- */
.in-cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.in-cmp .col{border:1px solid var(--bord);border-radius:16px;padding:22px;background:var(--surf)}
.in-cmp .col.bad{border-color:rgba(251,113,133,.3)}
.in-cmp .col.good{border-color:rgba(74,222,128,.3)}
.in-cmp h3{font-size:.88rem;font-weight:700;margin:0 0 14px;letter-spacing:.02em}
.in-cmp .bad h3{color:var(--red)}
.in-cmp .good h3{color:var(--green)}
.in-cmp ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.in-cmp li{color:var(--mut);font-size:.9rem;line-height:1.7;padding-inline-start:20px;
  position:relative}
.in-cmp li::before{position:absolute;inset-inline-start:0;top:0;font-weight:700}
.in-cmp .bad li::before{content:"×";color:var(--red)}
.in-cmp .good li::before{content:"✓";color:var(--green)}

/* ---- economics ---- */
.in-econ{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.in-econ .fig{background:var(--surf);border:1px solid var(--bord);border-radius:14px;
  padding:20px}
.in-econ .fig span{display:block;color:var(--mut);font-size:.8rem;margin-bottom:7px;
  line-height:1.5}
.in-econ .fig b{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;
  direction:ltr;display:block}
.in-econ .fig b.blue{color:var(--blue)}
.in-econ-line{color:var(--fg);font-size:1rem;line-height:1.85;margin:0;max-width:60ch}

/* ---- faq ---- */
.in-faq{display:grid;gap:10px}
/* kavera.css gives every <details> a margin-bottom for the home-page FAQ;
   this list uses grid gap, so zero it or the spacing doubles. */
.in-faq details{background:var(--surf);border:1px solid var(--bord);border-radius:13px;
  overflow:hidden;margin-bottom:0}
.in-faq summary{cursor:pointer;padding:16px 20px;font-size:.95rem;font-weight:600;
  list-style:none}
.in-faq summary::-webkit-details-marker{display:none}
.in-faq summary:hover{background:var(--surf2,#1B2740)}
.in-faq details[open] summary{color:var(--blue)}
.in-faq p{margin:0;padding:0 20px 18px;color:var(--mut);font-size:.93rem;line-height:1.85}

/* ---- cta ---- */
.in-cta{padding:52px 0;background:var(--navy);border-top:1px solid var(--bord)}
.in-cta h2{font-size:clamp(1.25rem,3vw,1.7rem);font-weight:800;margin:0 0 10px;
  letter-spacing:-.02em}
.in-cta p{color:var(--mut);font-size:1rem;line-height:1.85;max-width:58ch;margin:0 0 22px}
.in-btns{display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:700px){
  .in-cmp{grid-template-columns:1fr}
  .in-econ{grid-template-columns:1fr}
  .in-hero{padding:38px 0 32px}
  .in-sec{padding:36px 0}
  .in-btns .btn{width:100%}
}

/* ---- technical page ---- */
.tech-dgm{width:100%;height:auto;background:var(--surf);border:1px solid var(--bord);
  border-radius:16px;padding:10px;overflow:visible}
.t-zone{fill:rgba(45,212,191,.035);stroke:var(--bord2);stroke-width:1.5;stroke-dasharray:6 5}
.t-zlabel{fill:var(--sub);font-size:10px;font-weight:700;letter-spacing:.12em;
  font-family:'JetBrains Mono',monospace}
.t-box{fill:var(--surf2);stroke:var(--bord);stroke-width:1.5}
.t-core{stroke:var(--blue);stroke-width:2;fill:rgba(45,212,191,.1)}
.t-gate{fill:rgba(45,212,191,.12);stroke:var(--blue);stroke-width:2}
.t-out{fill:none;stroke:var(--bord2);stroke-width:1.5;stroke-dasharray:5 4}
.t-kv{stroke:var(--amber);stroke-dasharray:5 4}
.t-t{fill:var(--fg);font-size:11.5px;font-weight:600;text-anchor:middle;
  font-family:'Inter',sans-serif}
.t-s{fill:var(--mut);font-size:9.5px;text-anchor:middle;font-family:'Inter',sans-serif}
.t-blocked{fill:var(--amber)}
.t-line{stroke:var(--blue);stroke-width:2;fill:none}
.t-dash{stroke:var(--amber);stroke-dasharray:4 4;stroke-width:1.5}
/* the diagram is a left-to-right flow; mirroring it in RTL would reverse the
   arrows and say the opposite of what it means */
[dir="rtl"] .tech-dgm{direction:ltr}

.tech-mono{font-family:'JetBrains Mono',monospace;font-size:.82rem;
  color:var(--blue);direction:ltr;display:inline-block}
.tech-flow li .n{background:rgba(45,212,191,.14);color:var(--blue)}
.tech-limits{list-style:none;display:grid;gap:11px;margin:0;padding:0}
.tech-limits li{color:var(--mut);font-size:.95rem;line-height:1.85;
  background:var(--surf);border:1px solid var(--bord);border-radius:12px;
  padding:15px 18px;border-inline-start:3px solid var(--amber)}
@media(max-width:620px){
  .tech-dgm{overflow-x:auto}
  .t-t{font-size:13px} .t-s{font-size:11px}
}

/* ---- privacy page ---- */
.priv-mail{font-size:1rem;color:var(--fg)}
.priv-mail a{color:var(--blue);text-decoration:none;font-weight:600}
.priv-mail a:hover{text-decoration:underline}

/* ---- about page: the numbered rules ---- */
.about-rules{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:r}
.about-rules li{display:flex;gap:18px;align-items:flex-start;background:var(--surf);
  border:1px solid var(--bord);border-radius:16px;padding:22px;
  border-inline-start:3px solid var(--blue)}
.about-rules .n{flex-shrink:0;width:34px;height:34px;border-radius:10px;
  background:rgba(45,212,191,.14);color:var(--blue);display:grid;place-items:center;
  font-size:.95rem;font-weight:800;direction:ltr}
.about-rules h3{font-size:1.02rem;font-weight:700;margin:0 0 6px}
.about-rules p{margin:0;color:var(--mut);font-size:.94rem;line-height:1.85}
@media(max-width:560px){
  .about-rules li{flex-direction:column;gap:12px;padding:18px}
}