/* ================================================================
   آگاه کراد — design system v1 · milestone 1 · 1405-07-09
   Official brand kit: blue #00509A + gold (never dominant), IranSansX,
   geometry from the mark, hairlines not shadows, charts/timelines LTR.
   ================================================================ */

@font-face{font-family:'IRANSansX';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/IRANSansXFaNum-Regular.woff2') format('woff2')}
@font-face{font-family:'IRANSansX';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/IRANSansXFaNum-DemiBold.woff2') format('woff2')}
@font-face{font-family:'IRANSansX';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/IRANSansXFaNum-ExtraBold.woff2') format('woff2')}

:root{
  /* kit palette */
  --blue:#00509A; --blue-2:#003680; --blue-3:#002267;
  --blue-t1:#CCDCEB; --blue-t2:#99B9D7; --blue-bg:#F2F6FA;
  --gold:#E5990B; --gold-l:#EDB754; --gold-d:#CB7F00; --gold-bg:#FDF6E9;
  --ink:#16222e; --body:#2e3b47; --mut:#64707c; --line:#e3e7ec; --line-2:#cfd6dd;
  --paper:#ffffff;
  --r-s:8px; --r-m:12px; --r-l:18px;
  --measure:720px; --wide:1060px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:'IRANSansX','Vazirmatn',Tahoma,sans-serif;background:var(--paper);color:var(--body);
  font-size:16px;line-height:1.95;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:24px}
.narrow{max-width:var(--measure);margin-inline:auto}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:var(--blue-t1)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:26px;height:64px}
.head-logo img{height:30px;display:block}
.head-nav{display:flex;gap:4px;margin-inline-start:auto}
.head-nav a{font-size:13.5px;font-weight:600;color:var(--mut);padding:7px 13px;border-radius:999px}
.head-nav a:hover{color:var(--blue);background:var(--blue-bg);text-decoration:none}
.head-cta{font-size:13.5px;font-weight:700;color:#fff!important;background:var(--blue);padding:8px 18px;border-radius:999px}
.head-cta:hover{background:var(--blue-2)!important;color:#fff!important;text-decoration:none!important}

/* ---------- cover ---------- */
.cover{position:relative;overflow:hidden;background:var(--paper);
  padding:84px 0 72px;border-bottom:1px solid var(--line)}
.cover-ornament{position:absolute;inset-inline-start:-150px;top:-130px;width:560px;height:560px;
  opacity:.5;pointer-events:none}
.cover-in{position:relative}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--blue);
  margin-bottom:22px}
.kicker::after{content:"";width:46px;height:2px;background:var(--gold);border-radius:2px}
.cover h1{font-size:clamp(30px,5.2vw,46px);font-weight:800;color:var(--ink);line-height:1.5;
  max-width:640px;letter-spacing:-.01em}
.cover h1 em{font-style:normal;color:var(--blue)}
.cover .lede{font-size:17.5px;color:var(--body);max-width:600px;margin-top:18px}

/* doors */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px;margin-top:40px}
.door{display:flex;align-items:center;gap:16px;padding:22px 24px;border-radius:var(--r-l);
  border:1px solid var(--line-2);background:var(--paper);cursor:pointer;
  transition:border-color .15s,background .15s,transform .15s}
.door:hover{border-color:var(--blue);transform:translateY(-2px);text-decoration:none}
.door.primary{background:var(--blue);border-color:var(--blue)}
.door.primary:hover{background:var(--blue-2)}
.door-ic{flex:0 0 auto;width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center}
.door.primary .door-ic{background:rgba(255,255,255,.14);color:#fff}
.door:not(.primary) .door-ic{background:var(--blue-bg);color:var(--blue)}
.door-ic svg{width:24px;height:24px}
.door-t{display:block;font-size:17px;font-weight:800;line-height:1.5}
.door-s{display:block;font-size:12.8px;line-height:1.7;margin-top:2px}
.door.primary .door-t{color:#fff}
.door.primary .door-s{color:var(--blue-t1)}
.door:not(.primary) .door-t{color:var(--ink)}
.door:not(.primary) .door-s{color:var(--mut)}
.door-arr{margin-inline-start:auto;flex:0 0 auto;display:flex;color:var(--gold-l)}
.door:not(.primary) .door-arr{color:var(--line-2)}
.door:hover .door-arr{color:var(--gold)}
.trust{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--mut)}
.trust b{color:var(--body);font-weight:600}

/* ---------- sections ---------- */
section.block{padding:66px 0;border-bottom:1px solid var(--line)}
section.block:last-of-type{border-bottom:none}
.sec-mark{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sec-mark svg{width:26px;height:26px;flex:0 0 auto}
.sec-mark .k{font-size:13px;font-weight:600;color:var(--blue)}
h2{font-size:clamp(22px,3.4vw,28px);font-weight:800;color:var(--ink);line-height:1.55;margin-bottom:14px}
.block p{max-width:var(--measure)}
.block p + p{margin-top:12px}
.lead-mut{color:var(--mut);font-size:14.5px}

/* risk note — honest, visible, calm */
.risk{display:flex;gap:14px;align-items:flex-start;max-width:var(--measure);
  background:var(--gold-bg);border:1px solid #efd9ab;border-radius:var(--r-m);
  padding:16px 18px;margin-top:22px;font-size:14.5px;line-height:1.95}
.risk-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--gold-d);border:1px solid #efd9ab}
.risk b{color:var(--ink)}

/* licence box */
.licence{max-width:var(--measure);border:1px solid var(--line-2);border-radius:var(--r-l);
  padding:24px 26px;background:var(--blue-bg);position:relative;overflow:hidden}
.licence::after{content:"";position:absolute;inset-inline-end:-56px;bottom:-56px;width:170px;height:170px;
  border-radius:50%;border:16px solid var(--blue-t1);opacity:.5;pointer-events:none}
.licence p{position:relative;font-size:15px}
.licence .btn{position:relative;margin-top:16px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;
  padding:11px 24px;border-radius:999px;border:1px solid transparent}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-2);text-decoration:none;color:#fff}
.btn-line{border-color:var(--line-2);color:var(--blue);background:#fff}
.btn-line:hover{border-color:var(--blue);text-decoration:none}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--wide);margin-top:26px}
.c-card{border:1px solid var(--line);border-radius:var(--r-m);padding:20px 22px}
.c-card .cl{font-size:12.5px;color:var(--mut);font-weight:600}
.c-card .cv{font-size:16.5px;font-weight:700;color:var(--ink);margin-top:6px;direction:ltr;text-align:right;unicode-bidi:plaintext}
.c-card a.cv{display:block;color:var(--blue)}

/* footer */
.site-foot{background:var(--blue-3);color:var(--blue-t2);padding:34px 0 44px;font-size:13.5px;line-height:2.1}
.site-foot .foot-in{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.site-foot img{height:34px;opacity:.95}
.site-foot a{color:var(--blue-t1)}
.site-foot .grow{flex:1 1 auto}

/* reveal on scroll — subtle; content fully visible unless JS confirms the observer (body.rvon) */
body.rvon .rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
body.rvon .rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .doors{grid-template-columns:1fr}
  .head-nav{display:none}
  .cover{padding:54px 0 48px}
  .contact-grid{grid-template-columns:1fr}
  .cover-ornament{width:380px;height:380px;inset-inline-start:-140px;top:-120px;opacity:.35}
}

/* ---------- print ---------- */
@media print{
  .site-head,.door-arr,.head-cta{display:none}
  .cover,section.block{padding:18px 0;border:none}
  body{font-size:12px;color:#000}
  .cover-ornament{display:none}
  a::after{content:"" !important}
  .door{break-inside:avoid}
}

/* ================= milestone 2 — investor guide ================= */

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;max-width:var(--wide)}
.step{border:1px solid var(--line);border-radius:var(--r-m);padding:18px 18px 16px;position:relative}
.step-n{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.step h3{font-size:15px;font-weight:800;color:var(--ink);line-height:1.6;margin-bottom:4px}
.step p{font-size:13.3px;color:var(--mut);line-height:1.85;margin:0}

/* the tool */
.tool{border:1px solid var(--line-2);border-radius:var(--r-l);background:#fff;max-width:var(--wide);
  margin-top:28px;overflow:hidden}
.tool-head{display:flex;align-items:center;gap:12px;padding:18px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tool-head .sec-mark{margin:0}
.tool-title{font-size:16.5px;font-weight:800;color:var(--ink)}
.tool-tabs{margin-inline-start:auto;display:flex;gap:6px;background:var(--blue-bg);border-radius:999px;padding:4px}
.tool-tab{font-family:inherit;font-size:13px;font-weight:700;color:var(--mut);background:none;border:none;
  padding:7px 16px;border-radius:999px;cursor:pointer}
.tool-tab.on{background:#fff;color:var(--blue);box-shadow:0 0 0 1px var(--line-2)}
.tool-body{padding:24px}
.tool-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:620px}
.ti label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:7px}
.ti-box{position:relative;display:flex;align-items:center}
.ti input{width:100%;font-family:inherit;font-size:17px;font-weight:700;color:var(--ink);
  background:var(--blue-bg);border:1.5px solid var(--line-2);border-radius:var(--r-s);
  padding:11px 14px;padding-inline-end:64px;text-align:right}
.ti input:focus{outline:none;border-color:var(--blue);background:#fff}
.ti .suffix{position:absolute;inset-inline-end:13px;font-size:12.5px;color:var(--mut);font-weight:600;pointer-events:none}
.ti .hint{font-size:11.8px;color:var(--mut);margin-top:6px;line-height:1.7}
.ti .hint b{color:var(--gold-d)}

/* timeline — LTR always */
.tl-wrap{margin-top:26px}
.tl{direction:ltr;display:flex;align-items:flex-end;gap:8px;padding:10px 6px 0}
.tl-seg{flex:1 1 0;display:flex;flex-direction:column;align-items:center;min-width:0;position:relative}
.tl-amt{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:8px;white-space:nowrap;direction:rtl}
.tl-node{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;border:2.5px solid var(--gold);color:var(--gold-d);z-index:1}
.tl-node svg{width:22px;height:22px}
.tl-seg.final .tl-node{border-color:var(--blue);background:var(--blue);color:#fff;width:54px;height:54px}
.tl-seg.start .tl-node{border-color:var(--line-2);color:var(--mut)}
.tl-seg::before{content:"";position:absolute;top:auto;bottom:48px}
.tl-line{position:relative;height:2px;background:var(--line-2);flex:1 1 24px;margin-bottom:22px;min-width:14px}
.tl-line::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:var(--line-2)}
.tl-lab{font-size:12px;color:var(--mut);margin-top:9px;direction:rtl;white-space:nowrap}
.tl-seg.stopped .tl-node{border-style:dashed;border-color:var(--line-2);color:var(--line-2);background:#fff}
.tl-seg.stopped .tl-amt{color:var(--line-2)}

/* totals */
.tool-tot{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px;max-width:720px}
.tt{border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;text-align:center}
.tt .l{font-size:12px;color:var(--mut);font-weight:600}
.tt .v{font-size:19px;font-weight:800;color:var(--blue);margin-top:5px;white-space:nowrap}
.tt.hero{background:var(--blue-bg);border-color:var(--blue-t1)}
.tt.hero .v{color:var(--blue-2)}
.tt .s{font-size:11px;color:var(--mut);margin-top:2px}

/* default-path note */
.tool-note{margin-top:22px;border:1px solid var(--line);border-inline-start:3px solid var(--gold);
  border-radius:var(--r-s);padding:14px 18px;font-size:13.8px;color:var(--body);max-width:720px;line-height:1.95}
.tool-foot{border-top:1px solid var(--line);padding:13px 24px;font-size:12.3px;color:var(--mut);line-height:1.8}

/* tips */
.tips{counter-reset:tip;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;max-width:var(--wide);margin-top:24px}
.tip{counter-increment:tip;border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px;position:relative;padding-inline-start:54px}
.tip::before{content:counter(tip,persian);position:absolute;inset-inline-start:16px;top:16px;
  width:26px;height:26px;border-radius:50%;background:var(--gold-bg);border:1px solid #efd9ab;color:var(--gold-d);
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.tip b{display:block;font-size:14.3px;color:var(--ink);margin-bottom:2px}
.tip span{font-size:13.2px;color:var(--mut);line-height:1.85}

/* glossary */
.gloss{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;max-width:var(--wide);margin-top:24px}
.g-card{border:1px solid var(--line);border-radius:var(--r-m);padding:15px 17px}
.g-card b{display:block;font-size:14.3px;color:var(--blue-2);margin-bottom:3px}
.g-card span{font-size:12.9px;color:var(--mut);line-height:1.85}

/* FAQ */
.faq{max-width:var(--measure);margin-top:22px}
.faq details{border:1px solid var(--line);border-radius:var(--r-m);margin-bottom:9px;background:#fff;overflow:hidden}
.faq details[open]{border-color:var(--blue-t2)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:14px 18px;font-size:14.6px;font-weight:700;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-inline-start:auto;font-size:20px;font-weight:400;color:var(--gold-d);
  transition:transform .18s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 18px 15px;font-size:13.8px;color:var(--body);line-height:1.95}

/* deeper expander */
.deeper{max-width:var(--measure);margin-top:18px}
.deeper > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;color:var(--blue);padding:8px 0}
.deeper > summary::-webkit-details-marker{display:none}
.deeper > summary::before{content:"+";font-size:17px;color:var(--gold-d)}
.deeper[open] > summary::before{content:"−"}
.deeper-body{padding:6px 0 2px}

@media (max-width:860px){
  .steps{grid-template-columns:1fr 1fr}
  .tips{grid-template-columns:1fr}
  .gloss{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .gloss{grid-template-columns:1fr}
  .tool-inputs{grid-template-columns:1fr}
  .tool-tot{grid-template-columns:1fr}
  .tool-tabs{margin-inline-start:0}
  .tl{flex-direction:column;align-items:stretch;gap:0}
  .tl-seg{flex-direction:row;align-items:center;gap:14px;padding:7px 0}
  .tl-amt{margin:0;order:3;margin-inline-start:auto}
  .tl-lab{margin:0;order:2;min-width:64px}
  .tl-node{order:1;flex:0 0 auto}
  .tl-line{display:none}
  .tl{direction:rtl}
}
/* sub-headings inside a block */
.sub-h{font-size:19px;font-weight:800;color:var(--ink);margin:44px 0 6px;display:flex;align-items:center;gap:10px}
.sub-h::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
/* ================= milestone 3 — market view ================= */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:var(--wide);margin-top:26px}
.kpi{border:1px solid var(--line);border-radius:var(--r-m);padding:20px 22px;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:90px;height:90px;border-radius:50%;
  border:10px solid var(--blue-bg);pointer-events:none}
.kpi .kv{font-size:30px;font-weight:800;color:var(--blue);line-height:1.3;position:relative}
.kpi .kl{font-size:13.5px;font-weight:700;color:var(--ink);margin-top:4px;position:relative}
.kpi .ks{font-size:11.8px;color:var(--mut);margin-top:2px;position:relative}
.chart-card{border:1px solid var(--line);border-radius:var(--r-m);padding:22px;max-width:var(--wide);margin-top:18px;background:#fff}
.chart-card h4{font-size:15.5px;font-weight:800;color:var(--ink);margin-bottom:4px}
.chart-card .cs{font-size:12.5px;color:var(--mut);margin-bottom:16px}
.chart-card svg{display:block;width:100%;height:auto}
.chart-foot{font-size:11.8px;color:var(--mut);margin-top:10px}
.outcomes{border:1px solid var(--line);border-radius:var(--r-m);padding:20px 22px;max-width:var(--wide);margin-top:18px;background:var(--blue-bg)}
.outcomes p{font-size:14.5px;max-width:none}
.outcomes .chart-foot{margin-top:6px}
.src-line{font-size:12.3px;color:var(--mut);margin-top:16px}
@media (max-width:760px){.kpis{grid-template-columns:1fr}.kpi .kv{font-size:26px}}
/* ================= milestone 4 — company path ================= */
.elig{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;max-width:var(--wide);margin-top:22px}
.el{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px}
.el-ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--blue-bg);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.el-ic svg{width:14px;height:14px}
.el b{display:block;font-size:14px;color:var(--ink);margin-bottom:1px}
.el span{font-size:12.8px;color:var(--mut);line-height:1.8}
.stages{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;max-width:var(--wide);margin-top:22px}
.stage{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.stage-h{background:var(--blue-bg);padding:12px 18px;border-bottom:1px solid var(--line)}
.stage-h .sn{font-size:11px;font-weight:700;color:var(--gold-d);letter-spacing:.04em}
.stage-h h4{font-size:14.5px;font-weight:800;color:var(--ink);margin-top:2px}
.stage ul{list-style:none;padding:13px 18px}
.stage li{font-size:13px;color:var(--body);padding:5px 0 5px 0;padding-inline-start:16px;position:relative;line-height:1.8}
.stage li::before{content:"";position:absolute;inset-inline-start:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.lanes{max-width:var(--measure);margin-top:22px}
.lane-step{border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px;margin-bottom:12px}
.lane-step h4{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.lane-step h4 .n{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.lane-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lane{font-size:13px;line-height:1.85;padding:9px 13px;border-radius:var(--r-s);background:var(--blue-bg)}
.lane .lh{display:block;font-weight:800;font-size:11.5px;margin-bottom:2px}
.lane.you{background:var(--gold-bg)}
.lane.you .lh{color:var(--gold-d)}
.lane.us .lh{color:var(--blue)}
/* form */
.aform{border:1px solid var(--line-2);border-radius:var(--r-l);max-width:780px;margin-top:26px;overflow:hidden}
.aform-h{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center}
.aform-h .sec-mark{margin:0}
.aform-h .t{font-size:16.5px;font-weight:800;color:var(--ink)}
.aform-b{padding:22px 24px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-field{display:flex;flex-direction:column}
.f-field.wide{grid-column:1/-1}
.f-field label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.f-field label .opt{font-weight:400;color:var(--mut);font-size:11.5px}
.f-field input[type=text],.f-field input[type=tel],.f-field input[type=email],.f-field select,.f-field textarea{
  font-family:inherit;font-size:15px;color:var(--ink);background:var(--blue-bg);
  border:1.5px solid var(--line-2);border-radius:var(--r-s);padding:11px 13px}
.f-field textarea{min-height:92px;resize:vertical}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.f-help{font-size:11.8px;color:var(--mut);margin-top:5px;line-height:1.7}
.f-err{font-size:12px;color:#b4232a;margin-top:5px;display:none}
.f-field.bad input,.f-field.bad select{border-color:#d4868a}
.f-field.bad .f-err{display:block}
.f-soft{font-size:12px;color:var(--gold-d);margin-top:5px;display:none}
.f-file{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.f-file input{display:none}
.f-file .fbtn{cursor:pointer}
.f-file .fname{font-size:12.5px;color:var(--body)}
.f-consent{font-size:12.6px;color:var(--mut);line-height:1.9;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.f-summary{display:none;font-size:13px;color:#b4232a;background:#fdf1f1;border:1px solid #f0caca;border-radius:var(--r-s);padding:10px 14px;margin-top:14px}
.f-panel{padding:26px 24px;text-align:center}
.f-panel .pi{width:52px;height:52px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
.f-panel.okp .pi{background:#eaf7ef;color:#16a34a}
.f-panel.failp .pi{background:#fdf1f1;color:#b4232a}
.f-panel h4{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:6px}
.f-panel p{font-size:13.8px;color:var(--body);max-width:460px;margin:0 auto}
/* company tool calendar */
.cal{width:100%;border-collapse:collapse;margin-top:8px;font-size:13.5px}
.cal th{background:var(--blue-bg);color:var(--ink);font-weight:700;font-size:12.5px;padding:9px 12px;text-align:right;border-bottom:1px solid var(--line-2)}
.cal td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--body);white-space:nowrap}
.cal tr:last-child td{border-bottom:none;font-weight:800;color:var(--ink);background:var(--blue-bg)}
.cmp{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-s);padding:12px 16px;font-size:13.5px;color:var(--body)}
@media (max-width:760px){
  .elig,.f-grid,.lane-grid{grid-template-columns:1fr}
  .stages{grid-template-columns:1fr}
}
/* ================= fixes 1405-07-10 ================= */
/* honeypot field: invisible, takes no room, never makes the page scroll sideways */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
/* every field and dropdown is the same height in every browser (Safari draws a native, shorter select) */
.ti input,.ti select,.f-field input[type=text],.f-field input[type=tel],.f-field input[type=email],.f-field select{
  height:52px;line-height:normal}
.ti select,.f-field select{
  -webkit-appearance:none;appearance:none;width:100%;font-family:inherit;color:var(--ink);background-color:var(--blue-bg);
  border:1.5px solid var(--line-2);border-radius:var(--r-s);padding:0 14px;padding-inline-start:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%2364707c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 7 7.5 13 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 14px center}
.ti select{font-size:17px;font-weight:700}
.f-field select{font-size:15px}
.ti select:focus,.f-field select:focus{outline:none;border-color:var(--blue);background-color:#fff}
.f-field textarea{line-height:1.8}
/* company calculator: 3 columns on desktop, 2 on tablet, 1 on phone */
.tool-inputs.three{max-width:none;grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.tool-inputs.three{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tool-inputs.three{grid-template-columns:1fr}}
/* numbers line up in tables */
.cal td,.cal th{font-variant-numeric:tabular-nums}
.cal td:not(:first-child),.cal th:not(:first-child){text-align:left}

/* ================= structure 1405-07-10 — views, side index, chapters ================= */
/* one view at a time (only when JS is running; without JS the old long page still reads fine) */
.js [data-view]:not(.on){display:none}
[id]{scroll-margin-top:calc(var(--head-h,64px) + 20px)}
.head-nav a.cur{color:var(--blue);background:var(--blue-bg)}
.home-more{margin-top:20px;font-size:14px}
.home-more a{font-weight:700}

/* two columns: index on the right (RTL start), content beside it */
.view-grid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:40px;margin-top:34px;align-items:start}
.side{position:sticky;top:calc(var(--head-h,64px) + 20px)}
.side-in{border:1px solid var(--line);border-radius:var(--r-m);padding:16px 8px 10px;background:#fff}
.side-h{display:block;font-size:12px;font-weight:700;color:var(--mut);padding:0 12px 8px}
.side-links{display:flex;flex-direction:column}
.side-links a{font-size:13.5px;font-weight:600;color:var(--body);padding:8px 12px;border-radius:8px;line-height:1.7}
.side-links a:hover{background:var(--blue-bg);color:var(--blue);text-decoration:none}
.side-links a.on{background:var(--blue-bg);color:var(--blue)}
.side-all{margin:8px 12px 2px;font-family:inherit;font-size:12.3px;font-weight:700;color:var(--blue);background:none;border:none;cursor:pointer;padding:6px 0}
.side-all:hover{text-decoration:underline;text-underline-offset:4px}

/* chapters: heading row that folds the content */
.chap{border-top:1px solid var(--line)}
.chap:first-child{border-top:none}
.chap > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:20px 0}
.chap > summary::-webkit-details-marker{display:none}
.chap-t{font-size:19px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:10px;line-height:1.6}
.chap-t::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.chap > summary::after{content:"+";margin-inline-start:auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1;color:var(--gold-d);flex:0 0 auto;transition:transform .18s,background .15s}
.chap > summary:hover::after{background:var(--blue-bg)}
.chap[open] > summary::after{content:"−"}
.chap-b{padding:0 0 34px}
.chap-b > :first-child{margin-top:0}
/* the form and the calculator carry their own card; the chapter row is their heading */
.chap-b > .aform,.chap-b > .tool{margin-top:0}
#company-form .aform-h,#company-calculator .tool-head{display:none}
.chap-b > .aform,.chap-b > .tool{max-width:none}
.aform{max-width:none}
/* inside the narrower column the calculator is two columns, not three */
.tool-inputs.three{grid-template-columns:1fr 1fr}
@media (max-width:560px){.tool-inputs.three{grid-template-columns:1fr}}
.view-main .steps,.view-main .tips,.view-main .gloss,.view-main .elig,.view-main .stages{max-width:none}
.view-main .steps{grid-template-columns:repeat(2,1fr)}
.view-main .gloss{grid-template-columns:1fr 1fr}
.view-main .stages{grid-template-columns:1fr 1fr 1fr}
@media (max-width:1100px){.view-main .stages{grid-template-columns:1fr}}

/* phones and narrow windows: the index becomes a strip of chips under the header */
@media (max-width:980px){
  .view-grid{grid-template-columns:minmax(0,1fr);gap:6px;margin-top:20px}
  .view-main,.side,.side-in{min-width:0}
  .side{position:sticky;top:var(--head-h,64px);z-index:50;margin-inline:-24px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line)}
  .side-in{border:none;border-radius:0;padding:8px 24px}
  .side-h,.side-all{display:none}
  .side-links{flex-direction:row;gap:6px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding-bottom:2px}
  .side-links::-webkit-scrollbar{display:none}
  .side-links a{border:1px solid var(--line-2);border-radius:999px;padding:5px 14px;font-size:13px;flex:0 0 auto}
  [id]{scroll-margin-top:calc(var(--head-h,64px) + 64px)}
  .view-main .steps{grid-template-columns:1fr}
  .view-main .gloss{grid-template-columns:1fr}
}
@media print{
  .side{display:none}
  .view-grid{display:block}
  .chap > summary::after{display:none}
}

/* phones: the page switcher stays reachable as a second row under the logo */
@media (max-width:760px){
  .head-in{height:auto;flex-wrap:wrap;gap:6px 12px;padding-top:10px}
  .head-logo{order:1}
  .head-cta{order:2;margin-inline-start:auto}
  .head-nav{display:flex!important;order:3;flex:0 0 100%;margin-inline-start:0;overflow-x:auto;white-space:nowrap;
    scrollbar-width:none;padding-bottom:8px}
  .head-nav::-webkit-scrollbar{display:none}
  .head-nav a{flex:0 0 auto;padding:6px 12px}
}

/* ================= final polish 1405-07-10 ================= */
/* header: a menu item never breaks into two lines; under 900px the menu gets its own row */
.head-nav a,.head-cta{white-space:nowrap}
.site-head{-webkit-backdrop-filter:blur(8px)}
@media (max-width:900px){
  .head-in{height:auto;flex-wrap:wrap;gap:6px 12px;padding-top:10px}
  .head-logo{order:1}
  .head-cta{order:2;margin-inline-start:auto}
  .head-nav{display:flex!important;order:3;flex:0 0 100%;margin-inline-start:0;overflow-x:auto;white-space:nowrap;
    scrollbar-width:none;padding-bottom:8px}
  .head-nav::-webkit-scrollbar{display:none}
  .head-nav a{flex:0 0 auto;padding:6px 12px}
}

/* licence box: the decorative ring stays behind the words */
.licence::after{z-index:0}
.licence p,.licence .btn{z-index:1}

/* inside a chapter everything shares one right and one left edge */
.chap-b p,.view-main > p{max-width:none}
.view-main .faq,.view-main .lanes{max-width:none}
.chap-b > .tool:not(:first-child){margin-top:22px}

/* totals: label, number and note each line up across the three cards, however the text wraps */
.tt{display:flex;flex-direction:column}
.tt .l{flex:1 0 auto}
@supports (grid-template-rows:subgrid){
  .tt{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
  .tt .l{align-self:start}
}
.ti .hint.warn{color:var(--gold-d);font-weight:600}

/* tablet keeps two columns; phone goes to one */
@media (max-width:980px){.view-main .steps,.view-main .gloss{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.view-main .steps,.view-main .gloss{grid-template-columns:1fr}}

/* charts are drawn at their true size by app.js */
.chart-card svg{max-width:100%}

@media (max-width:760px){
  /* 16px stops iPhone Safari zooming the page when a field is tapped */
  .f-field input[type=text],.f-field input[type=tel],.f-field input[type=email],.f-field select,.f-field textarea{font-size:16px}
}
@media (max-width:560px){
  .chart-card{padding:16px 12px}
  .tool-body{padding:18px 16px}
  .tool-head{padding:14px 16px}
  .tool-foot{padding:12px 16px}
  .aform-b{padding:18px 16px}
  /* payment calendar: each payment becomes a small card instead of a table that runs off the screen */
  .cal,.cal tbody{display:block}
  .cal tr{display:block;border:1px solid var(--line);border-radius:var(--r-s);padding:8px 12px;margin-bottom:8px}
  .cal tr:first-child{display:none}
  .cal td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0;border:none;white-space:normal}
  .cal td::before{content:attr(data-l);color:var(--mut);font-size:12px;font-weight:400}
  .cal td:first-child{font-weight:800;color:var(--ink);padding-bottom:4px}
  .cal td:first-child::before{content:none}
  .cal tr:last-child{background:var(--blue-bg);border-color:var(--blue-t1)}
  .cal tr:last-child td{background:none}
}

/* ---------- print: everything on the page, nothing blank ---------- */
@media print{
  html{overflow:visible}
  /* sections that were never scrolled into view must still print */
  .rv,body.rvon .rv{opacity:1!important;transform:none!important;transition:none!important}
  .site-head{display:block;position:static;border:none;background:none}
  .head-in{height:auto;padding:0 0 6px}
  .head-nav,.head-cta,.side,.tool-tabs,.home-more,.doors,.btn,#company-form{display:none!important}
  .view-grid{display:block;margin-top:8px}
  .chap > summary{padding:12px 0 8px}
  .chap > summary::after,.faq summary::after{display:none}
  .chap-b{padding-bottom:12px}
  .chap-t{font-size:15px}
  h2{font-size:18px}
  .step,.tip,.g-card,.el,.stage,.lane-step,.tt,.kpi,.chart-card,.faq details,.risk,.licence,.c-card,.outcomes,
  .tl-wrap,.tool-tot,.cal tr,.tool-note{break-inside:avoid}
  .chap > summary,h2,h3,h4{break-after:avoid}
  .licence::after,.kpi::after{display:none}
  .ti input,.ti select{background:#fff}
  .site-foot{background:none;color:#333;padding:10px 0;border-top:1px solid #ccc}
  .site-foot img{display:none}
  .site-foot a{color:#333}
  /* one text size on paper, contact details side by side, no single stray lines */
  body{font-size:13.5px}
  .contact-grid{grid-template-columns:repeat(3,1fr)}
  .c-card{padding:12px 14px}
  .c-card .cv{font-size:13.5px}
  p{orphans:2;widows:2}
  #company-calculator{break-before:page}
  .kpis{grid-template-columns:repeat(3,1fr);gap:10px}
  .kpi{padding:14px 16px}
  .kpi .kv{font-size:22px}
  .ti{break-inside:avoid}
  section.block{padding:14px 0}
}