/* ============================================================================
   The light design system
   ============================================================================

   The audience is a senior executive in an established organisation. The visual
   language is therefore a consulting deliverable, not a consumer app: white
   paper, generous margins, hairline rules instead of cards, no shadows, no
   gradients, one restrained accent. Nothing decorative competes with the words.

   Three rules hold this together:

     1. Colour lives ONLY in the tokens below. The previous stylesheet mixed
        tokens with about forty hardcoded dark hex values, which is why it could
        not be re-themed by editing :root — every one of them had to be found by
        hand. Do not reintroduce a literal colour outside this block.
     2. Nothing casts a shadow and nothing is more than 4px round. Depth is
        communicated by whitespace and rule weight. A raised card reads as
        software; a ruled column reads as a document.
     3. Type sizes follow importance and nothing interactive drops below the
        body size. A reader must never squint at the thing they have to click.

   ============================================================================
   FONT FILES ARE NOT IN THE REPOSITORY.

   Place these two files in assets/fonts/ and the @font-face rules below pick
   them up. Until they exist the system stack takes over and the layout is
   unchanged, so a missing font degrades and never breaks:

       assets/fonts/Vazirmatn-Regular.woff2
       assets/fonts/Vazirmatn-Bold.woff2

   From github.com/rastikerdar/vazirmatn (releases → Vazirmatn-fonts.zip →
   fonts/webfonts). Self-hosted on purpose: no CDN, so no third party learns
   who reads a diagnosis.
   ========================================================================== */

@font-face{
  font-family:"Vazirmatn";
  src:url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Vazirmatn";
  src:url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
/* ----------------------------------------------------------------------------
   TWO MORE WEIGHTS, AND THEY ARE THE WHOLE TYPOGRAPHIC ARGUMENT.

   The system had 400 and 700 and nothing else, so every hierarchy on every page
   was built out of font-size alone. That is precisely what reads as a wireframe:
   size says "bigger", weight says "more important", and a page that can only say
   the first sounds like it is shouting rather than speaking.

   500 gives body copy a companion for labels and standing text that must not
   look like a heading. 800 gives a title somewhere to go that 700 has already
   spent on bold words inside sentences.

   SELF-HOSTED, LIKE THE OTHER TWO, AND DELIBERATELY NOT FROM A CDN. A font from
   Google is a third party learning who reads a diagnosis, and — the owner's own
   requirement — a page that waits on a network that is down. Nothing in this
   stylesheet fetches from anywhere but this server.

   MISSING FILES DEGRADE, THEY DO NOT BREAK. Until the two woff2 files are added
   the browser synthesises 500 from 400 and 800 from 700, which is slightly worse
   typography and identical layout. Drop these in assets/fonts/ from
   github.com/rastikerdar/vazirmatn (releases -> Vazirmatn-fonts.zip -> webfonts):

       Vazirmatn-Medium.woff2
       Vazirmatn-ExtraBold.woff2
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Vazirmatn";
  src:url("../fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Vazirmatn";
  src:url("../fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap;
}

:root{
  /* surfaces */
  --paper:#ffffff;
  --wash:#f7f8f9;          /* the only fill: quiet blocks inside a document */
  --paper-2:#fcfcfb;

  /* text */
  --ink:#14181f;           /* headings and anything decisive */
  --ink-2:#2b3038;         /* body copy */
  --muted:#6b7280;         /* supporting text */
  /* Was #9aa1ac, which is 2.60:1 on white where AA needs 4.5:1 — and this token
     is used for text and nothing else: fourteen selectors, no borders. It carries
     the bottom tab labels, the option letters in a case, and the questionnaire's
     own labels and question numbers, all at 11.5–12.5px. The smallest type on
     the page had the weakest contrast on the page.
     #6f767f measures 4.59:1 and keeps the cool grey. The step down from --muted
     is now small, so the hierarchy between them has to be carried by size and
     weight rather than by fading the text out — which is how it should have been
     carried in the first place. */
  --faint:#6f767f;         /* labels, counters, metadata */

  /* rules */
  --line:#e6e8eb;          /* hairline: separates */
  --line-2:#c9cdd3;        /* stronger: encloses an input */
  --placeholder:#c2c7ce;   /* lighter than --faint: a prompt, not content */

  /* One accent, deliberately sober — and reached through an indirection.
     The product's colour arrives as an inline custom property on <html>, and an
     inline declaration beats every rule in this file including one inside a
     media query. So a dark block that redefined --accent would have been
     silently overruled on every page that names a product, which is all of them
     inside a product. view.php now writes --accent-src and --accent-dark-src
     instead, and the switch happens here where the theme is known.
     The fallbacks are the house colours, so a page with no product still has an
     accent — and validate_contrast, which cannot see an inline attribute,
     measures against exactly those. */
  --accent:var(--accent-src,#1f3a5f);
  --accent-soft:var(--accent-soft-src,#eef2f8);

  /* --------------------------------------------------------------- verdict

     A decision is read by colour before it is read by word. Green, amber, red —
     the three anybody already knows without a legend — plus a neutral for a
     decision the system failed to score, which is our fault and must never look
     like a bad answer.

     These are NOT the accent and never borrow from it. A verdict that changed
     hue with the product would mean the same judgement looked like a different
     judgement in the two halves of the app. */
  --v-good:#0b7a52;
  --v-good-soft:#e6f4ee;
  --v-fair:#9a6209;
  --v-fair-soft:#fbf1de;
  --v-poor:#b42318;
  --v-poor-soft:#fdecea;
  /* Darker than --faint, and it has to be: this one is read ON its own tint,
     not on paper. #6f767f measures 4.59:1 on white and only 4.16:1 on
     #f2f4f6 — the guard caught it, and the badge it sits in is the one that
     appears when the system failed to score a decision, which is the moment a
     reader most deserves to be able to read the words. */
  --v-none:#5e646d;
  --v-none-soft:#f2f4f6;

  /* Kept: named by their old roles and pointed at the verdict scale, so the
     forty-odd rules already using them move with it instead of drifting apart. */
  --good:var(--v-good);
  --bad:var(--v-poor);
  --gold:var(--v-fair);

  /* ----------------------------------------------------------- rhythm

     The old system had colour tokens and nothing else, so every page used the
     same gap, the same weight and the same size for everything — which is what
     "it looks like a wireframe" actually was. Depth here is spacing and weight,
     not shadow.

     One step is 4px and the scale is not linear: the jump from 5 to 6 is what
     separates a section from a paragraph, and a linear scale never gets far
     enough apart to say that. */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:18px;
  --s-5:26px;
  --s-6:40px;
  --s-7:64px;

  /* One raised object per screen, and only where something is genuinely
     actionable right now. Everything else separates with a rule. A shadow on
     every block is what makes an interface look like software; a shadow on the
     one thing waiting for you is what makes it look considered. */
  --radius:4px;
  --radius-lg:10px;
  --shadow:none;
  --lift:0 1px 2px rgba(16,24,40,.04), 0 6px 20px -6px rgba(16,24,40,.10);

  /* Self-hosted first, then the Persian faces already installed on most
     Iranian machines, then Tahoma. This matters because it is the one
     improvement available with no asset at all: a reader who has IRANSans
     or Shabnam locally gets a proper Persian face today, and the woff2
     files only make it consistent for everyone else. */
  --font:"Vazirmatn","IRANSansX","IRANSans","IRANYekan","Shabnam","Sahel",
         "Segoe UI",Tahoma,Arial,sans-serif;
  --measure:640px;         /* a comfortable reading column */

  /* ------------------------------------------------------------------ type

     A scale with real distance between its steps, and weights that carry the
     hierarchy alongside size rather than leaving size to do it alone. Persian
     needs more leading than Latin at the same size, so line-height rides with
     each step instead of being set once on the body.

     Nothing interactive is below --t-body: the old system's own rule, kept,
     because a reader must never squint at the thing they have to click. */
  --t-display:clamp(26px,5.2vw,34px);  --lh-display:1.5;
  --t-title:clamp(20px,4vw,24px);      --lh-title:1.6;
  --t-section:17.5px;                  --lh-section:1.75;
  --t-body:16px;                       --lh-body:1.95;
  --t-small:14.5px;                    --lh-small:1.85;
  --t-label:12.5px;                    --lh-label:1.7;
  --track-label:.06em;     /* uppercase and small caps need air to stay legible */
}

/* ============================================================================
   The dark system

   Not an inversion. A senior reader opening a diagnosis at eleven at night got a
   full-screen sheet of white, and the fix for that is a considered second
   palette rather than a filter — inverted paper turns a sober navy accent into
   a glare and drops every hairline below the point where it separates anything.

   Three rules held from the light system:

     1. Colour still lives ONLY in tokens. Nothing below this block knows which
        theme it is in, which is why this is thirty lines and not a rewrite —
        the light system's own first rule is what made it cheap.
     2. The ground rises rather than the ink falling. --paper is near-black and
        --wash sits ABOVE it, because on a dark ground a quiet block reads as
        lifted; the same block darker reads as a hole.
     3. Every text token is measured against the ground it actually sits on, not
        against black. tools/validate_contrast.php builds this map by copying
        light and overwriting, exactly as the cascade does, and fails the build
        under 4.5:1 — so these numbers are checked rather than chosen.

   No [data-theme] hook and no toggle. There is no control anywhere in the
   product that sets one, and a selector nothing can produce is a claim the code
   does not keep. When a toggle is written, this block gains a second selector.
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root{
    /* surfaces */
    --paper:#0f141a;
    --wash:#171e26;          /* the only fill: lifted, not sunken */
    --paper-2:#131920;

    /* text */
    --ink:#e9eef4;           /* headings and anything decisive */
    --ink-2:#c2ccd6;         /* body copy */
    --muted:#8d99a6;         /* supporting text — 6.4:1 on --paper */
    --faint:#8d99a6;         /* labels and counters carry the smallest type on
                                the page, so they get the same value as --muted
                                rather than a step down: the hierarchy between
                                them is size and weight, which is how the light
                                system says it should have been carried anyway */

    /* rules */
    /* The hairline is the ONLY separating device in this system — no cards, no
       shadows — so a rule that disappears takes the document structure with it.
       Measured against --paper rather than picked: #242e39 came out at 1.34:1
       and read as a smudge. These are 1.58 and 2.27, which keeps the step
       between them that tells a divider from the edge of an input. */
    --line:#2e3947;          /* hairline: separates */
    --line-2:#445062;        /* stronger: encloses an input */
    --placeholder:#5c6875;   /* a prompt, not content */

    /* The house accent, lightened until it works as text on the dark ground.
       #1f4e79 measures 1.9:1 there — unreadable — and this is a token that
       carries link text in thirty-seven places, not just a rule. */
    --accent:var(--accent-dark-src,#7fb0e0);
    --accent-soft:var(--accent-soft-dark-src,#1a2531);

    /* The verdict scale, lifted for the dark ground. The soft fills go the other
       way — on white a tint is lighter than the page, here it has to be darker
       than nothing and still read as a tint rather than a hole. */
    --v-good:#4bbd94;
    --v-good-soft:#102a22;
    --v-fair:#d6a955;
    --v-fair-soft:#2a2213;
    --v-poor:#f0907f;
    --v-poor-soft:#2e1a17;
    --v-none:#8d99a6;
    --v-none-soft:#1b222b;
  }

  /* FOUR PLACES WHERE A PRODUCT COLOUR IS SET ON THE ELEMENT, NOT ON :root.
     A switch label, two card lines and a section heading each take their colour
     from an inline custom property written per element, and an inline value
     cannot be redefined from here — the indirection that saves --accent works
     only because that one is declared on :root and read in this file.
     So in dark these four take a theme token instead. The product's colour is
     not lost: it still paints the rule above the top bar, the tab underline and
     the 2px rail beside each card, and none of those is text, so none of them
     has to clear 4.5:1. Identity survives in the rails; legibility wins in the
     type. Adding a dark variant to all five emit sites would buy a tinted word
     and cost five more colours nobody has written. */
  .product-switch{color:var(--muted)}
  .product-card-free,.service-card-free{color:var(--accent)}
  .profile-section.is-product h2{color:var(--ink)}
}

*{box-sizing:border-box}
html{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  font-size:16px;
  line-height:1.9;
  padding-bottom:82px;
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}

/* ------------------------------------------------------------------ chrome */

.topbar{
  height:58px;padding:0 22px;display:flex;align-items:center;
  background:var(--paper);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
/* min-height because the lockup measured 100x26 — it is the way home from
   every page, so it has to be as easy to hit as the tabs are. */
.brand-lockup{display:inline-flex;align-items:center;gap:9px;min-height:36px}
.brand-mark{width:26px;height:26px;border-radius:var(--radius)}
/* The brand name is TEXT, printed by includes/view.php from brand.json. It used
   to be a ::before content string with the real span hidden at font-size:0, so
   renaming the product in PHP changed nothing on screen and a screen reader read
   a different name than the eye saw. */
.brand-name{font-size:15px;font-weight:700;letter-spacing:.02em}
.brand-house{font-size:11.5px;color:var(--faint);letter-spacing:.04em;margin-inline-start:2px}
.brand-house::before{content:"·";margin-inline-end:5px;color:var(--line-2)}

.schema5-shell,.app-shell{
  width:min(var(--measure),100%);
  margin:auto;
  padding:44px 22px calc(36px + env(safe-area-inset-bottom));
}

/* The column count comes from the markup, not from here: includes/view.php sets
   --tab-count from however many tabs brand.json enables. A hardcoded repeat(3)
   is what squeezed the fourth tab into the third column when the organisational
   section arrived, and the same would happen to the fifth. */
.native-tabs{
  position:fixed;bottom:0;left:0;right:0;height:64px;
  display:grid;grid-template-columns:repeat(var(--tab-count,4),1fr);
  background:var(--paper);border-top:1px solid var(--line);
  z-index:30;padding-bottom:env(safe-area-inset-bottom);
}
.native-tab{display:grid;place-items:center;font-size:13px;color:var(--muted);position:relative}
.native-tab.active{color:var(--ink);font-weight:700}
.native-tab.active::before{
  /* --tab-accent is set inline on the active product tab, so the colour under
     the tab and the rule at the top of the page are the same fact stated twice
     rather than two unrelated decorations. Falls back to the page accent. */
  content:"";position:absolute;top:0;width:100%;height:2px;
  background:var(--tab-accent,var(--accent));
}

/* The product rule: three pixels of the product's own colour, above the top bar.
   It is the cheapest possible answer to "which product am I in", and the top bar
   is sticky so the rule has to sit outside it or it scrolls away. */
.product-rule{height:3px;width:100%;position:sticky;top:0;z-index:21}
.product-rule+.topbar{top:3px}

/* ─────────────────────────────────────────────── the right end of the top bar
   Two things that did not exist. A visitor had seven links on the front door and
   not one was a way to sign in, and a reader inside one product had no way to
   reach the other except by going back to the front door. */
.topbar-end{display:inline-flex;align-items:center;gap:14px;margin-inline-start:auto}
.brand-lockup.has-end{margin-inline-start:0}
.topbar-switch{
  /* Measured at 27x34 first, lifted to 36, and measured again on the live page at
     46x36 — still under the 44px accepted floor, and this is the ONLY route from
     one product to the other on every page inside a product. A control that
     carries the whole cross-product journey should not be the smallest thing in
     the bar. */
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;min-width:52px;padding:0 8px;
  font-size:14px;color:var(--switch-accent,var(--muted));white-space:nowrap;
}
.topbar-account{
  display:inline-flex;align-items:center;min-height:36px;padding:0 12px;
  font-size:14px;font-weight:500;color:var(--accent);
  border:1px solid var(--line-2);border-radius:var(--radius);white-space:nowrap;
}
.topbar-account.is-signed{border-color:transparent;color:var(--muted);font-weight:400;padding-inline:4px}
@media(max-width:420px){
  .topbar{padding:0 14px;gap:10px}
  .topbar-account{padding:0 9px}
}

/* ------------------------------------------------- document primitives */

.eyebrow{font-size:11.5px;letter-spacing:.14em;color:var(--faint);margin:0 0 14px}
.lead{font-size:16px;color:var(--muted);margin:0 0 30px;max-width:56ch;line-height:2}
/* 12.5px was below the readable floor for Persian on a phone. Hierarchy is
   carried by colour and weight here, not by shrinking the text past the point
   where it can be read — which is the stylesheet's own third rule. */
.meter{font-size:14px;color:var(--faint);margin:0}
.promise{
  font-size:15px;color:var(--muted);line-height:1.9;
  border-inline-start:2px solid var(--line-2);padding:2px 16px;margin:26px 0;
}
.card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);padding:20px;margin:14px 0;
}
.notice{
  border:1px solid var(--line);border-inline-start:2px solid var(--accent);
  background:var(--wash);padding:12px 16px;margin:16px 0;font-size:14px;
}
.notice.err{border-inline-start-color:var(--bad)}
/* The one thing that tells a reader why their sign-in failed, and it was the
   smallest text on the page a stranger lands on. 13px Persian on a phone is
   below the readable floor, and this message is the difference between trying
   again and giving up. */
.form-error{min-height:20px;color:var(--bad);font-size:14.5px;line-height:1.7;padding:6px 0}
/* The same line carries "working" as well as "wrong", and those must not look
   alike: an evaluation in progress rendered in the error colour tells the reader
   their answer was rejected while it is still being read. */
.form-error[data-state="working"]{color:var(--muted)}

/* ---------------------------------------------------------------- buttons */

.primary-button{
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  border-radius:var(--radius);padding:13px 30px;font-weight:700;font-size:14.5px;width:100%;
}
.primary-button:disabled{opacity:.4;cursor:not-allowed}
.secondary-button,.text-action{
  width:auto!important;border:1px solid var(--line-2);background:transparent;
  color:var(--ink);border-radius:var(--radius);padding:11px 20px;font-size:15px;
}
.secondary-button:hover,.text-action:hover{border-color:var(--ink)}
/* «حساب دارم، وارد می‌شوم» and «رمزم را فراموش کردم» — both interactive, both
   below body size, which breaks this stylesheet's own third rule. On the page a
   stranger lands on, one of these two is the whole of the sign-in path. */
.link-button{
  font-size:15px;background:none;border:0;color:var(--muted);cursor:pointer;
  padding:6px;text-decoration:underline;text-underline-offset:3px;
}
.link-button:hover{color:var(--ink)}

/* ------------------------------------------------------ home and listings */

.platform-home{padding-top:2px}
.domain-grid,.case-grid{display:grid;grid-template-columns:1fr;gap:0}
.domain-card,.case-card{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;box-shadow:var(--shadow);
  transition:background .14s ease;
}
.domain-card:hover,.case-card:hover{background:var(--paper-2)}
.domain-card{min-height:78px;padding:20px 2px}
.domain-card strong{font-size:18px;line-height:1.6;font-weight:700;letter-spacing:-.01em}
.domain-card-count{display:block;margin-top:5px;font-size:13px;color:var(--faint)}

.domain-page{padding-top:44px}
.domain-page .domain-hero{padding:0 2px 10px}
.domain-page .domain-hero h1{margin:0;font-size:26px;line-height:1.5;font-weight:700;letter-spacing:-.015em}
.domain-hero-count{margin:6px 0 0;font-size:13px;color:var(--faint)}
.case-list-section{margin-top:6px}
.domain-page .case-card{min-height:76px;padding:18px 44px 18px 2px}
.domain-page .case-card h3{margin:0;font-size:17px;line-height:1.65;font-weight:700;letter-spacing:-.01em}
.case-card-index{
  position:absolute;right:0;top:22px;width:22px;height:22px;
  color:var(--faint);display:grid;place-items:center;font-size:11.5px;
}
.case-card-status{position:absolute;left:2px;bottom:20px;display:flex;align-items:center;gap:5px}
.case-card-status i{width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.case-card-status i.good{background:var(--good)}
.case-card-status i.bad{background:var(--bad)}
.case-card-status b{display:none;color:var(--good);font-size:12.5px}
.case-card.completed .case-card-status b,.case-card-status b.visible{display:block}
.case-card.completed .case-card-status i{background:var(--good)}

/* ----------------------------------------------------------- case runtime */

.case-runtime{display:grid;gap:0}
.case-header{padding:0 0 6px}
.case-header-row{display:flex;align-items:flex-start;gap:12px}
.case-header-row>div:last-child{min-width:0;flex:1}
.case-header h1{margin:0;font-size:22px;line-height:1.6;font-weight:700;letter-spacing:-.015em}
.back-link{
  flex:0 0 32px;width:32px;height:32px;border:1px solid var(--line);
  background:transparent;border-radius:var(--radius);display:grid;place-items:center;
  font-size:20px;color:var(--muted);
}
.back-link:hover{border-color:var(--ink);color:var(--ink)}

.story{
  background:transparent;border:0;border-top:2px solid var(--ink);
  border-radius:0;box-shadow:var(--shadow);
  padding:24px 0;font-size:16.5px;line-height:2.05;color:var(--ink-2);
}
.decision-panel,.feedback-panel,.result-panel{
  background:transparent;border:0;border-top:1px solid var(--line);
  border-radius:0;box-shadow:var(--shadow);padding:26px 0;
}
.decision-panel h2{font-size:18.5px;line-height:1.75;margin:0;font-weight:700}
#question{font-size:18.5px;line-height:1.75;font-weight:700;letter-spacing:-.01em}

.options{display:grid;gap:0;margin:20px 0 8px}
.option{
  min-height:52px;width:100%;display:flex;align-items:flex-start;gap:12px;
  text-align:right;border:1px solid transparent;border-bottom:1px solid var(--line);
  background:transparent;border-radius:0;padding:14px 0;
  font-size:15.5px;line-height:1.85;color:var(--ink-2);
  transition:background .14s ease,padding .14s ease;
}
.option:first-child{border-top:1px solid var(--line)}
.option:hover:not(:disabled){background:var(--wash);padding-inline:14px}
.option-key{
  flex:0 0 24px;height:24px;border-radius:var(--radius);
  background:transparent;color:var(--faint);display:grid;place-items:center;
  font-size:12.5px;font-weight:400;
}
.option:disabled{opacity:.4}

.free-box{
  margin-top:16px;padding:0;border:0;border-top:1px solid var(--line);
  border-radius:0;background:transparent;padding-top:18px;
}
.free-box textarea{
  width:100%;min-height:120px;resize:vertical;
  border:1px solid var(--line-2);border-radius:var(--radius);padding:14px;
  background:var(--paper);outline:none;line-height:1.95;
}
.free-box textarea:focus{border-color:var(--accent)}
.free-box .primary-button{margin-top:12px;width:auto;padding-inline:30px}

.feedback-panel{display:grid;gap:12px}
.status{font-size:15px;font-weight:700;letter-spacing:-.01em}
#feedbackStatus.status{font-size:15px;font-weight:700}
.feedback-text{font-size:16px;line-height:1.95;margin:0;color:var(--ink-2)}
.insight,small#insight.insight{
  display:block;padding:14px 16px;border-radius:var(--radius);
  background:var(--wash);color:var(--muted);line-height:1.9;font-size:14px;
}

.result-panel{display:grid;gap:14px}
.result-title,.result-panel h2{font-size:24px;font-weight:700;margin:0;line-height:1.5;letter-spacing:-.015em}
.result-ending{padding:0;border-radius:0;background:transparent;border:0;border-inline-start:2px solid var(--line-2);padding-inline-start:16px}
.result-ending p{line-height:2;font-size:15.5px;margin:0;color:var(--ink-2)}
.performance-dots{display:flex;gap:6px;flex-wrap:wrap}
.performance-dot{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.performance-dot.good{background:var(--good)}
.performance-dot.bad{background:var(--bad)}

/* ============================================================================
   THE RUN — the path through a case, as a document

   The player used to swap panels, so a reader saw one thing at a time and the
   situation they were deciding about was gone by the time they learned what the
   decision cost. This is the same case as a scroll: every settled step stays,
   the live one renders below it, and finishing simply stops adding.

   Rules that keep it minimal while giving it the depth it was missing:

     1. A step is a ruled block, never a card. Border, fill and radius are spent
        on the two things that are genuinely objects — the verdict badge and the
        revision — and on nothing else.
     2. Colour carries the judgement before any word does, and the verdict scale
        is the only place colour means quality. The product accent never appears
        in a verdict, because the same judgement must look the same in both
        halves of the app.
     3. The road not taken stays on the page, quieter. That is the whole reason
        to look back: a choice with nothing beside it is an announcement.
   ========================================================================== */

.run{display:block;margin:0 0 var(--s-5)}
.run-list{list-style:none;margin:0;padding:0;display:grid;gap:0}

.step{
  padding:var(--s-5) 0;
  border-top:1px solid var(--line);
  /* The verdict, as a hairline down the start edge. It is the cheapest possible
     way to make a path skimmable: four steps become four colours before a word
     is read. 2px, because 3 starts to look like a quote block. */
  border-inline-start:2px solid var(--v-none);
  padding-inline-start:var(--s-4);
}
.step[data-verdict=good]{border-inline-start-color:var(--v-good)}
.step[data-verdict=fair]{border-inline-start-color:var(--v-fair)}
.step[data-verdict=poor]{border-inline-start-color:var(--v-poor)}
.step:first-child{border-top:0}

.step-scene{margin:0;font-size:var(--t-small);line-height:2;color:var(--muted)}
.step-q{
  margin:var(--s-3) 0 0;
  font-size:var(--t-section);line-height:var(--lh-section);
  font-weight:700;color:var(--ink);letter-spacing:-.01em;
}

.step-opts{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:0}
.step-opt{
  display:flex;gap:var(--s-3);align-items:baseline;
  padding:var(--s-2) 0;
  font-size:var(--t-small);line-height:var(--lh-small);
  color:var(--muted);
}
/* Taken, and taken later. A first choice reads at full strength; an option the
   reader moved to on reconsideration is marked but not promoted above it,
   because the point of the record is that both happened. */
.step-opt.is-first{color:var(--ink-2);font-weight:500}
.step-opt.is-standing{color:var(--ink-2)}
.step-key{flex:none;min-width:1.4em;font-size:var(--t-label);color:var(--faint);font-weight:400}
.step-opt-text{flex:1}
.step-mark{
  flex:none;font-size:11.5px;font-weight:700;white-space:nowrap;
  color:var(--accent);background:var(--accent-soft);
  padding:1px var(--s-2);border-radius:2px;
}
.step-own{
  margin:var(--s-3) 0 0;padding-inline-start:var(--s-3);padding-inline-end:0;
  border-inline-start:2px solid var(--line-2);
  font-size:var(--t-small);line-height:2;color:var(--ink-2);
}

/* The verdict. A dot, a word and a sentence — the dot first, because it is the
   part that survives being glanced at. */
.v-line{margin:var(--s-4) 0 0;display:grid;gap:var(--s-2);justify-items:start}
.v-badge{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  padding:2px var(--s-2) 2px var(--s-2);border-radius:2px;
  background:var(--v-none-soft);color:var(--v-none);
}
.v-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.v-said{margin:0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-2)}
.v-line[data-verdict=good] .v-badge{background:var(--v-good-soft);color:var(--v-good)}
.v-line[data-verdict=fair] .v-badge{background:var(--v-fair-soft);color:var(--v-fair)}
.v-line[data-verdict=poor] .v-badge{background:var(--v-poor-soft);color:var(--v-poor)}

/* A reconsidered decision, beside the first and never in place of it. */
.step-rev{
  margin-top:var(--s-4);padding:var(--s-3) 0 var(--s-3) 0;
  padding-inline-start:var(--s-3);
  border-inline-start:2px solid var(--line-2);
}
.step-rev-head{
  margin:0;display:flex;gap:var(--s-2);align-items:baseline;flex-wrap:wrap;
  font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-2);
}
.step-rev-head b{flex:none;font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.step-rev .v-line{margin-top:var(--s-3)}

/* Where the story would have gone. The one line in this whole design that is
   allowed to be a filled block, because it is the only thing on the page that
   is not a record of what happened — it is a record of what would have. */
.step-moved{
  margin:var(--s-3) 0 0;padding:var(--s-3) var(--s-4);
  background:var(--wash);border-radius:var(--radius);
  font-size:var(--t-small);line-height:2;color:var(--ink-2);
}
.step-moved b{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:var(--s-1)}

.step-revise{margin-top:var(--s-4);display:grid;gap:0;justify-items:start}
.step-revise>.text-action{
  background:none;border:0;padding:0;font-size:var(--t-small);color:var(--accent);
  border-bottom:1px solid var(--line-2);line-height:var(--lh-small);
}
.step-revise>.text-action:hover{border-color:var(--accent)}
.step-revise-panel{width:100%;margin-top:var(--s-3);display:grid;gap:0}
.step-revise-note{margin:0 0 var(--s-2);font-size:13px;color:var(--muted);line-height:var(--lh-small)}
.step-revise-error{margin:var(--s-2) 0 0;font-size:13.5px;color:var(--v-poor);line-height:var(--lh-small)}
.step-revise-error:empty{display:none}

/* --------------------------------------------------------------- profile */

.profile-page{padding-top:44px}
.profile-head{display:grid;gap:12px;padding:0 2px 26px;border-bottom:1px solid var(--line)}
.profile-head h1{margin:0;font-size:26px;line-height:1.5;font-weight:700;letter-spacing:-.015em}
.profile-head p{margin:0;color:var(--muted);font-size:13.5px;min-height:18px}
.profile-head .secondary-button{justify-self:start}
.profile-page .progress-summary{display:grid;gap:0;margin-top:6px}
.progress-mini{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 2px;background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;color:inherit;
}
.progress-mini strong{font-size:15px;font-weight:700}
.progress-mini span{color:var(--accent);font-weight:700}
.progress-mini.strong{border-bottom-color:var(--line-2)}
.profile-hint{font-size:13px;color:var(--muted);line-height:1.9}
.profile-verification{min-height:20px;color:var(--muted);font-size:13px}
.profile-verification[data-state=verified]{color:var(--good);font-weight:700}
.profile-verification[data-state=pending]{color:var(--gold);font-weight:700}

.auth-card{
  margin:26px auto 0;max-width:430px;padding:26px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);display:flex;flex-direction:column;gap:12px;
}
.auth-card h1,.auth-card h2{font-size:19px;font-weight:700;margin:0}
.auth-card p{font-size:14px;line-height:1.95;color:var(--muted);margin:0 0 4px}
.auth-card input{
  font-size:15px;padding:12px 14px;border-radius:var(--radius);
  border:1px solid var(--line-2);background:var(--paper);
}
.auth-card input:focus{outline:none;border-color:var(--accent)}

/* ----------------------------------------------------------------- modal */

.modal{position:fixed;inset:0;background:rgba(20,24,31,.32);display:grid;place-items:center;padding:18px;z-index:50}
.modal-card{
  position:relative;width:min(480px,100%);background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);
}
.modal-card h2{margin:2px 0 12px;font-size:20px;font-weight:700}
.modal-card input{
  width:100%;border:1px solid var(--line-2);background:var(--paper);
  border-radius:var(--radius);padding:13px;outline:none;
}
.modal-card input:focus{border-color:var(--accent)}
.modal-close{
  position:absolute;top:14px;left:14px;width:30px;height:30px;border:0;
  background:transparent;border-radius:50%;font-size:22px;color:var(--faint);
}
.modal-close:hover{color:var(--ink)}
.profile-modal-card{display:grid;gap:10px}


/* ==========================================================================
   Organisational diagnosis
   --------------------------------------------------------------------------
   The report is the surface a senior executive judges the product by, so it is
   built as a document section, not as a dashboard. Deliberately absent: charts,
   answer counts, distribution bars, confidence badges. That data is computed
   and stored, and the operator can produce it as a data court if a finding is
   ever challenged — but putting it in front of the reader turns a diagnosis
   into a survey result, and a survey result is not what a consultant delivers.
   ========================================================================== */

.org{width:min(var(--measure),100%);margin:auto;padding:56px 22px calc(96px + env(safe-area-inset-bottom))}
.org h1{font-size:27px;line-height:1.5;font-weight:700;margin:0 0 14px;letter-spacing:-.015em}
.org h2{font-size:19px;line-height:1.6;font-weight:700;margin:0 0 12px}
.org h2.sec{font-size:15px;letter-spacing:.04em;margin:44px 0 4px}
.org .basis{display:flex;gap:32px;flex-wrap:wrap;margin:0 0 34px}
.org .basis div b{display:block;font-size:19px;font-weight:700;line-height:1.4}
.org .basis div span{font-size:12.5px;color:var(--faint)}

.org textarea{
  width:100%;min-height:180px;font-size:16px;line-height:1.95;
  background:transparent;border:0;border-bottom:1px solid var(--line-2);
  padding:6px 0 14px;resize:vertical;outline:none;
}
.org textarea:focus{border-color:var(--accent)}
.org textarea::placeholder{color:var(--placeholder)}
.org .count{font-size:12.5px;color:var(--faint);margin:9px 0 0}

.org label.f{display:block;font-size:12.5px;color:var(--faint);margin:22px 0 7px}
.org select{
  width:100%;padding:11px 12px;border:1px solid var(--line-2);
  border-radius:var(--radius);background:var(--paper);outline:none;
}
.org select:focus{border-color:var(--accent)}
/* .checks and .check are gone with the screen that used them. They styled the
   checkbox grid of the organisation-profile form — the step that asked a buyer
   for industry and size and told them it shaped the questionnaire, which it did
   not. tools/validate_assets.php found these still here afterwards, which is
   what it is for. */

/* questionnaire */
.org .qhead{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;color:var(--faint);border-bottom:1px solid var(--line);
  padding-bottom:10px;margin-bottom:4px;
}
.org .q{padding:32px 0;border-bottom:1px solid var(--line)}
.org .q .n{font-size:11.5px;letter-spacing:.12em;color:var(--faint);margin:0}
.org .q h3{font-size:18.5px;line-height:1.75;font-weight:700;margin:8px 0 18px}
.org .opt{
  display:block;position:relative;padding:11px 0;padding-inline-start:30px;
  cursor:pointer;font-size:15.5px;line-height:1.85;color:var(--ink-2);
}
.org .opt input{position:absolute;opacity:0;pointer-events:none}
.org .opt .box{
  position:absolute;inset-inline-start:0;top:16px;width:14px;height:14px;
  border:1px solid var(--line-2);border-radius:50%;
}
.org .opt.sq .box{border-radius:2px}
.org .opt:hover .box{border-color:var(--accent)}
.org .opt input:checked~.box{border-color:var(--accent);border-width:4px}
.org .opt input:checked~.t{color:var(--ink)}
.org .scale{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:18px}
.org .scale .end{font-size:12.5px;color:var(--faint);white-space:nowrap}
.org .scale .pts{display:flex;flex:1;justify-content:space-between;padding:0 16px}
.org .scale label{cursor:pointer;text-align:center;position:relative}
.org .scale input{position:absolute;opacity:0}
.org .scale .tick{
  display:block;width:30px;height:30px;line-height:28px;
  border:1px solid var(--line-2);border-radius:50%;font-size:13.5px;color:var(--muted);
}
.org .scale input:checked+.tick{background:var(--accent);border-color:var(--accent);color:var(--paper)}

/* report */
.org .picture{
  font-size:17px;line-height:2.05;color:var(--ink-2);
  border-top:2px solid var(--ink);border-bottom:1px solid var(--line);
  padding:24px 0;margin:0;
}
.org .finding{display:grid;grid-template-columns:54px minmax(0,1fr);gap:0 18px;padding:34px 0;border-bottom:1px solid var(--line)}
.org .finding .idx{font-size:32px;line-height:1;font-weight:700;color:var(--line-2);letter-spacing:-.02em}
.org .finding h3{font-size:18.5px;line-height:1.7;margin:0 0 10px;font-weight:700}
.org .finding p{margin:0 0 16px;font-size:15.5px;line-height:1.95;color:var(--ink-2)}
.org .evidence{margin:0 0 18px;padding:0;list-style:none;border-inline-start:2px solid var(--line)}
.org .evidence li{font-size:14px;color:var(--muted);line-height:1.9;padding:3px 14px}
/* The method sentence, said once under the list instead of under every
   finding. Reads as a footnote on purpose: it is how the findings were
   measured, not a further piece of evidence for any one of them. */
.org .basis-note{margin:-4px 0 26px;font-size:13px;line-height:2;color:var(--muted);padding-inline-start:14px;border-inline-start:2px dotted var(--line)}
/* Adding to your own description, after the fact. Collapsed by default because
   it is an option, not a step, and an open textarea under a finished
   questionnaire reads as more work to do. */
.org .addnote{margin:34px 0 0;border-top:1px solid var(--line);padding-top:18px}
.org .addnote summary{cursor:pointer;font-size:14px;color:var(--accent);list-style:none}
.org .addnote summary::-webkit-details-marker{display:none}
.org .addnote summary::before{content:'+ ';opacity:.7}
.org .addnote[open] summary::before{content:'‘2  '}
.org .addnote textarea{margin-top:14px}

/* The way out of a blank page. A button that reads as a link, because it is an
   alternative to the action rather than a second action of equal weight. */
.org .skip{margin:18px 0 0;font-size:13px;line-height:1.9;color:var(--faint)}
.org .skip .linklike{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;border-bottom:1px solid var(--line-2)}
.org .skip .linklike:hover{border-color:var(--accent)}
.org .skip span{display:block;margin-top:6px;max-width:48ch}

/* THE BUYER'S DASHBOARD.

   A problem is a ruled block whose weight says how sure we are, which is the
   whole point: a confirmed problem is set against the ink rule and a faded one
   recedes, so the reader's eye sorts the diagnosis before they read a word.
   Nothing here is a card and nothing here is a chart — the same reason the
   report has neither. */
.org .prob{border-top:1px solid var(--line);padding:30px 0 26px}
.org .prob .st{font-size:11.5px;letter-spacing:.14em;margin:0 0 10px;color:var(--faint)}
.org .prob h3{font-size:19px;line-height:1.7;font-weight:700;margin:0 0 12px}
.org .prob .say{margin:0 0 14px;font-size:15.5px;line-height:1.95;color:var(--ink-2)}
.org .prob .hist{margin:0 0 14px;font-size:13.5px;line-height:1.9;color:var(--muted)}
.org .prob .note{margin:12px 0 0;font-size:12.5px;line-height:1.8;color:var(--faint)}
.org .prob .evidence{margin:0}
/* Confirmed: the heaviest rule on the page after the consulting block, because
   it is the one thing here the evidence has actually settled. */
.org .prob.confirmed{border-top:2px solid var(--ink)}
.org .prob.confirmed .st{color:var(--accent)}
/* Faded: still readable, deliberately quieter. Struck through would be a
   judgement; this is only a change of standing. */
.org .prob.faded{opacity:.62}
.org .prob.faded h3{font-weight:400}

/* The round the buyer still owes. One line, no button: it is an offer. */
.org .due{margin:0 0 30px;font-size:14.5px}
.org .due a{color:var(--accent);border-bottom:1px solid var(--line-2);padding-bottom:3px}
.org .due a:hover{border-color:var(--accent)}

/* The timeline is a list of rounds, not a graphic. What moved in each round is
   the information; drawing a line between them would add nothing but ink. */
.org .tl{list-style:none;margin:0;padding:0}
.org .tl li{display:flex;gap:18px;align-items:baseline;border-bottom:1px solid var(--line);padding:13px 0}
.org .tl b{font-size:14.5px;font-weight:700;white-space:nowrap;min-width:5.5em}
.org .tl em{font-style:normal;font-size:13.5px;color:var(--muted)}

/* The invite link is meant to be selected and pasted into a message, so it gets
   the monospace treatment the bank details already use, and wraps rather than
   overflowing on a phone. */
.org .copy{-webkit-user-select:all;user-select:all;word-break:break-all;border:1px solid var(--line);padding:12px 14px;line-height:1.7}

.org .crow{display:flex;justify-content:space-between;gap:20px;align-items:baseline;border-bottom:1px solid var(--line);padding:16px 0}
.org .crow b{font-size:15.5px;font-weight:700;white-space:nowrap}
.org .crow em{font-style:normal;font-size:13.5px;color:var(--muted);flex:1}
/* The label is scaffolding, the finding's title is the content: the two are
   set apart so the eye lands on the problem and not on the word «برای». */
.org .crow em .cfor{opacity:.62;font-size:12.5px}
.org .crow a{font-size:13.5px;color:var(--accent);white-space:nowrap}
.org .pay{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;direction:ltr;text-align:left}

/* The perception-gap exhibit. A ruled row like every other list on this page and
   deliberately NOT a bar chart: the figure is the distance between two groups on
   one question, which is a sentence with a number in it, not a distribution.
   The number takes the accent because it is the only quantity the report shows
   and it should read as the point of the row, not as a footnote to the text. */
.org .gapx{display:flex;justify-content:space-between;gap:20px;align-items:baseline;border-bottom:1px solid var(--line);padding:15px 0}
.org .gapx b{font-size:15px;font-weight:400;color:var(--ink-2);line-height:1.8}
.org .gapx em{font-style:normal;font-size:14px;font-weight:700;color:var(--accent);white-space:nowrap}

/* Pricing: a tier is a ruled block, not a card. Three amounts sit in a row
   because the choice being made is the period, and putting them side by side is
   what makes that legible without a table. */
.org .tier{border-top:1px solid var(--line);padding:22px 0}
.org .tier-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.org .tier-head b{font-size:17px;font-weight:700}
.org .tier-head span{font-size:12.5px;color:var(--faint)}
.org .prices{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px}
.org .prices span{display:flex;flex-direction:column;gap:2px}
.org .prices em{font-style:normal;font-size:12px;color:var(--faint)}
.org .prices b{font-size:18px;font-weight:700;line-height:1.4}
.org .prices i{font-style:normal;font-size:11.5px;color:var(--faint)}

/* The consulting touchpoint. Deliberately unlike anything else on the page: it
   is the one moment the product stops being an instrument and offers a person,
   and it appears only after a report has actually been delivered. */
.org .consult{margin:48px 0 0;padding:26px 0 0;border-top:2px solid var(--ink)}
.org .consult .k{font-size:11.5px;letter-spacing:.14em;color:var(--accent);margin:0 0 10px}
.org .consult .t{font-size:16.5px;line-height:1.95;margin:0 0 16px;color:var(--ink);max-width:52ch}
.org .consult .c{display:flex;gap:24px;flex-wrap:wrap;margin:0;font-size:16px}
.org .consult .c a{color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:2px;direction:ltr}
.org .consult .c a:hover{border-color:var(--accent);color:var(--accent)}

/* The print view. A report a director takes into a board meeting must not carry
   navigation, buttons or a link colour that prints as grey mush. */
.org .printlink{margin:40px 0 0;font-size:13.5px}
.org .printlink a{color:var(--accent);border-bottom:1px solid var(--line-2);padding-bottom:2px}
body.printing .topbar,body.printing .native-tabs,body.printing .printlink,
body.printing .promise,body.printing .consult .c a{display:none}
body.printing{padding-bottom:0}
body.printing .org{padding-top:24px}

@media print{
  @page{margin:18mm 16mm}
  .topbar,.native-tabs,.printlink,.pwa-install,.modal{display:none!important}
  body{padding-bottom:0;font-size:11.5pt;line-height:1.7}
  .org{width:100%;max-width:none;padding:0}
  .org h1{font-size:19pt}
  .org .finding{break-inside:avoid;page-break-inside:avoid}
  .org .picture{break-after:avoid}
  .org .consult{break-inside:avoid}
  /* A link that prints as blue underlined text on paper is noise; the phone
     number still needs to be readable, so it prints as plain ink. */
  a{color:inherit!important;border:0!important;text-decoration:none!important}
}

@media(min-width:720px){
  .schema5-shell,.app-shell{padding-left:24px;padding-right:24px}
  .domain-page .case-card h3{font-size:18px}
  .story{font-size:17px;line-height:2.1}
  .option{font-size:16px}
}

/* ============================================================================
   The house, and its two products
   ============================================================================

   One origin carries three surfaces: a front door that belongs to neither
   product, and a landing page for each. They must read as one house — same
   paper, same rules, same type — while still being distinguishable at a glance,
   so the ONLY thing that varies is the accent, and it arrives as an inline
   custom property from brand.json rather than from a second stylesheet.

   Everything below is layout. No colour literal appears; --card-accent is set
   per card by includes/view.php and falls back to the page accent.
   ========================================================================== */

.house-home,.landing-page{max-width:var(--measure);margin:0 auto}

/* the front door ---------------------------------------------------------- */
.house-intro{padding:38px 0 30px;border-bottom:1px solid var(--line)}
.house-intro h1{font-size:26px;line-height:1.55;margin:0;letter-spacing:-.015em}
.house-products,.house-operator,.house-contact{padding:30px 0;border-bottom:1px solid var(--line)}
.house-contact{border-bottom:0}
/* This is the scaffolding of every page — «کیس چیست», «چطور کار می‌کند» — and it
   was the smallest text in the app at 12px. An uppercase-style label wants
   letter-spacing, not a size that cannot be read; 14px keeps the label feeling
   while clearing the floor. */
.section-title{
  font-size:14px;letter-spacing:.1em;color:var(--faint);
  font-weight:700;margin:0 0 16px;
}
.house-cta{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 0}

/* the product card, used on the front door and on each landing page ------- */
.product-grid{display:grid;grid-template-columns:1fr;gap:0}
.product-card{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;gap:16px;
  padding:22px 2px;border-bottom:1px solid var(--line);
  position:relative;
}
.product-card:first-child{border-top:1px solid var(--line)}
.product-card:hover{background:var(--paper-2)}
/* A 2px rule in the product's own colour: enough to tell two products apart on
   a white page, not enough to become decoration. */
.product-card::before{
  content:"";position:absolute;inset-inline-start:-10px;top:22px;bottom:22px;
  width:2px;background:var(--card-accent,var(--accent));
}
.product-card-mark{width:40px;height:40px;border-radius:var(--radius)}
.product-card-body{display:block;min-width:0}
.product-card-name{font-size:18px;font-weight:700;letter-spacing:-.01em}
.product-card-latin{
  font-size:11.5px;color:var(--faint);letter-spacing:.08em;
  margin-inline-start:8px;text-transform:uppercase;
}
.product-card-line{display:block;margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.9}
/* Was under the 14px floor for Persian body text, which measuring the
   rendered page at 375px kept surfacing. */
.product-card-free,.product-card-note{
  display:inline-block;margin-top:10px;font-size:14px;
  color:var(--card-accent,var(--accent));
}
.product-card-note{color:var(--faint);display:block}
.product-card-go{font-size:22px;color:var(--faint);line-height:1;padding-top:6px;width:16px;text-align:center}

/* the operator, and the one way to reach him ------------------------------ */
.operator-name{font-size:18px;font-weight:700;margin:0}
.operator-role{font-size:13.5px;color:var(--faint);margin:3px 0 12px}
.contact-list{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:6px 18px;margin:16px 0 0;font-size:15px;
}
.contact-list dt{font-size:12.5px;color:var(--faint);padding-top:2px}
.contact-list dd{margin:0}
.contact-list a{border-bottom:1px solid var(--line-2);padding-bottom:1px}

/* a product landing page -------------------------------------------------- */
.landing-hero{padding:38px 0 32px;border-bottom:1px solid var(--line)}
.landing-hero h1{font-size:27px;line-height:1.5;margin:0;letter-spacing:-.015em}
.landing-cta{margin:26px 0 8px}
.landing-prose{padding:8px 0 0}
.landing-block{padding:26px 0;border-bottom:1px solid var(--line)}
.landing-trust,.landing-trial,.landing-price{padding:26px 0;border-bottom:1px solid var(--line)}
/* The confidentiality promise is the core of what this product sells, and it
   was set smaller than body text — the most important sentence on the page in
   the smallest type on the page. */
.confidentiality-note{
  font-size:15px;color:var(--muted);line-height:1.95;margin:12px 0 0;
  padding-inline-start:14px;border-inline-start:2px solid var(--accent);
}
.trial-label{font-size:13px;color:var(--accent);margin:0 0 14px;letter-spacing:.02em}
.price-anchor{font-size:24px;font-weight:700;margin:6px 0 16px}
.price-currency{font-size:13px;font-weight:400;color:var(--faint);margin-inline-start:6px}
.landing-sibling{padding:30px 0 10px}
.domain-section{padding:8px 0 0}
.verify-result{display:grid;place-items:center;min-height:70vh;text-align:center}

@media(min-width:720px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
  .product-card::before{inset-inline-start:0;top:20px;bottom:20px}
  .product-card{padding-inline-start:16px}
  .product-card:nth-child(2){border-top:1px solid var(--line)}
  .house-intro h1,.landing-hero h1{font-size:31px}
}

/* ============================================================================
   Three services, a form, and the way back
   ============================================================================

   Added when the front door became three services instead of two products, and
   when the tab bar started disappearing inside a case — which made the top bar
   the only way out and therefore something that has to work.
   ========================================================================== */

/* the top bar, now with a back link ---------------------------------------- */
.topbar{gap:14px}
.topbar-back{
  /* Measured at 51x26. Inside a case the tab bar is deliberately hidden, so this
     is the only way out — it has to be the easiest thing on the screen to hit,
     not the smallest. */
  display:inline-flex;align-items:center;gap:5px;
  min-height:38px;padding-inline-end:6px;
  font-size:14.5px;color:var(--muted);flex-shrink:0;
}
.topbar-back:hover{color:var(--ink)}
.topbar-back span[aria-hidden]{font-size:19px;line-height:1}
/* The lockup used to be pushed to the far end by an auto margin, which was fine
   while it was the only thing at that end. Now the account entry and the
   product switch live there, so the auto margin belongs to .topbar-end and two
   auto margins in one flex row would fight over the space. The lockup sits
   after the back link and lets the end block claim what is left. */
.brand-lockup{margin-inline-start:0}
.brand-stack{display:flex;flex-direction:column;line-height:1.25}
.brand-stack .brand-house{
  font-size:11px;color:var(--faint);letter-spacing:0;margin:0;
}
.brand-stack .brand-house::before{content:none}

/* a service card ----------------------------------------------------------- */
.service-grid{display:grid;grid-template-columns:1fr;gap:0}
.service-card{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;gap:15px;
  padding:22px 2px 22px 0;border-bottom:1px solid var(--line);
  position:relative;
}
.service-card:first-child{border-top:1px solid var(--line)}
.service-card:hover{background:var(--paper-2)}
.service-card::before{
  content:"";position:absolute;inset-inline-start:-10px;top:22px;bottom:22px;
  width:2px;background:var(--card-accent,var(--accent));
}
.service-card-mark{width:34px;height:34px;border-radius:var(--radius)}
.service-card-body{display:block;min-width:0}
.service-card-title{font-size:17.5px;font-weight:700;letter-spacing:-.01em;display:block}
.service-card-line{display:block;margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.9}
/* «دو کیس، بدون حساب» — the free-tier promise on the front door, and the one
   line that tells a stranger they can start without paying. It was the
   smallest text on the page it matters most on. */
.service-card-free{
  display:inline-block;margin-top:9px;font-size:14px;
  color:var(--card-accent,var(--accent));
}
.service-card-go{font-size:22px;color:var(--faint);line-height:1;padding-top:6px;width:16px;text-align:center}
.house-services,.house-contact-intro{padding:30px 0;border-bottom:1px solid var(--line)}
.house-contact-intro{border-bottom:0;padding-bottom:0}

/* the request form --------------------------------------------------------- */
.contact-block{padding:24px 0 34px}
.contact-form{margin:20px 0 0}
.contact-row{display:grid;gap:6px;margin:0 0 16px}
.contact-row label{font-size:13px;color:var(--muted)}
.contact-row .req{color:var(--bad)}
.contact-row input,.contact-row textarea{
  width:100%;font:inherit;font-size:15px;padding:11px 13px;
  border:1px solid var(--line-2);border-radius:var(--radius);background:var(--paper);
}
.contact-row input:focus,.contact-row textarea:focus{outline:none;border-color:var(--accent)}
.contact-row input.ltr{direction:ltr;text-align:left}
.contact-row textarea{min-height:120px;line-height:1.9;resize:vertical}
.contact-submit{margin:22px 0 0}

/* the dots, which now say what they count --------------------------------- */
.performance-dots{display:grid;gap:8px;justify-items:start;margin:22px 0}
.performance-row{display:flex;gap:7px;align-items:center}
.performance-summary{font-size:14px;color:var(--ink-2)}
.performance-legend{font-size:12px;color:var(--faint)}

/* what to read next ------------------------------------------------------- */
.next-case-slot{margin:24px 0}
.next-case-slot .section-title{margin-bottom:10px}
.next-case{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:16px;
}
.next-case:hover{background:var(--paper-2)}
.next-case span{font-size:22px;color:var(--faint);line-height:1}

/* the install offer: a bar with two answers, not a permanent button -------- */
.pwa-install{
  position:fixed;inset-inline:14px;bottom:78px;z-index:40;
  display:flex;gap:10px;justify-content:center;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:11px 14px;
}
.pwa-install button{
  font:inherit;font-size:13.5px;padding:7px 16px;cursor:pointer;
  border-radius:var(--radius);border:1px solid var(--line-2);background:var(--paper);
}
.pwa-install-yes{background:var(--ink)!important;color:var(--paper);border-color:var(--ink)!important}

@media(min-width:720px){
  .service-grid{grid-template-columns:1fr}
  .service-card{padding-inline-start:16px}
  .service-card::before{inset-inline-start:0}
}

/* A refusal is not an error and not feedback on a decision: it is the product
   telling the reader what it needs before they can go on. It sits under the
   options, keeps its own quiet weight, and never borrows the red used for a
   decision that went badly. */
.access-notice{margin:22px 0 0;padding:14px 16px;border-radius:10px;background:var(--surface-2,#f4f5f7);color:var(--ink-2,#4a5361);font-size:.94rem;line-height:1.9}

/* The explanatory pages and the top bar.
   Deliberately plain: these pages exist to be read once and understood, not to
   compete with the two product cards on the front door. No card shadows, no
   accent fills, nothing that would make an FAQ look like an offer. */
.top-nav{display:flex;gap:20px;overflow-x:auto;padding:10px 20px 0;scrollbar-width:none}
.top-nav::-webkit-scrollbar{display:none}
.top-nav-link{white-space:nowrap;font-size:.88rem;color:var(--ink-2);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.top-nav-link.is-current{color:var(--ink);border-bottom-color:var(--accent)}
.explain-page{max-width:720px}
.page-title{font-size:1.45rem;margin:28px 0 8px}
.page-section{margin:34px 0}
.page-section h2{font-size:1.06rem;margin:0 0 12px}
.page-body{margin:0;line-height:2.05;color:var(--ink-2)}
.page-list,.page-links{margin:14px 0 0;padding-inline-start:20px;line-height:2.05;color:var(--ink-2)}
.page-qa{margin:14px 0 0}
.page-qa dt{font-weight:600;margin:20px 0 6px}
.page-qa dd{margin:0;line-height:2.05;color:var(--ink-2)}
/* One package per row. A comparison grid invites "why is the small one worse",
   and here it is not worse — it is smaller. */
.pricing-lead{margin:0 0 18px;color:var(--ink-2)}
.pricing-card{border:1px solid var(--line,#e6e8ec);border-radius:12px;padding:18px 20px;margin:14px 0}
.pricing-card h3{font-size:1rem;margin:0 0 12px}
.pricing-periods{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.pricing-periods li{display:flex;flex-direction:column;gap:2px}
.pricing-period{font-size:.82rem;color:var(--ink-3,#8a91a0)}
.pricing-amount{font-size:1.08rem;font-variant-numeric:tabular-nums}
.pricing-currency{font-size:.78rem;color:var(--ink-3,#8a91a0)}
.pricing-includes{margin:16px 0 0;padding-inline-start:20px;line-height:1.95;color:var(--ink-2);font-size:.92rem}
.pricing-note,.pricing-payment{margin:16px 0 0;color:var(--ink-2);font-size:.9rem;line-height:1.95}

/* The three parts of a profile. Kept visually equal on purpose: none of them is
   the "real" one, and a reader should be able to see at a glance that their
   dossier and their organisation are separate things. */
.profile-section{margin:30px 0;padding-top:22px;border-top:1px solid var(--line,#e6e8ec)}
.profile-section h2{font-size:.94rem;margin:0 0 10px;color:var(--ink-3,#8a91a0);font-weight:600}
.profile-line{margin:0;font-size:1.02rem}
.profile-figure{margin:0;font-size:2rem;font-variant-numeric:tabular-nums;line-height:1.3}
.profile-note{margin:8px 0 0;color:var(--ink-2);font-size:.9rem;line-height:1.9}

/* What the reader's decisions show, under the figure. Ruled rows rather than
   cards, like every other list in this system, and the only colour is a 2px
   edge carrying polarity — a strength and a recurring gap are different facts
   and reading them as one block is how a record turns into a wall of text.
   Deliberately no icon and no badge: the sentence says which it is. */
.profile-standing{margin-top:22px;display:grid;gap:0}
.standing-item{
  border-top:1px solid var(--line);
  border-inline-start:2px solid var(--line-2);
  padding:14px 0 14px 0;padding-inline-start:13px;
}
.standing-item.is-strength{border-inline-start-color:var(--good)}
.standing-item.is-gap{border-inline-start-color:var(--gold)}
.standing-item b{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.7}
.standing-item span{display:block;margin-top:3px;font-size:14.5px;color:var(--ink-2);line-height:1.9}
/* The links out of each record — «کیس‌ها» measured 43x22. Every route out of a
   record ran through one of these, at half the tap floor. */
.profile-links{margin:14px 0 0;font-size:.9rem}
.profile-links a{color:var(--accent);text-decoration:none}

/* ============================================================================
   The stateful surfaces
   ============================================================================

   Everything below renders only for somebody the page recognises. It exists
   because five of the seven pages used to return byte-identical HTML to a
   stranger, a reader with three finished cases, and a buyer six waves into a
   diagnosis — so there was nothing on screen that could carry a path.

   Two rules, from the product contract and not negotiable here: no percentage,
   no progress bar, no rank, no comparison between readers. The only figure that
   appears is the growth number, which the contract already permits. Hierarchy is
   carried by size and weight, never by fading text out, because fading it is
   what put the smallest type in the app at 2.60:1.
   ========================================================================== */

/* the choice point, on the front door, for a reader who is signed in --------- */
.choice-point{margin:8px 0 40px}
.choice-card{
  padding:22px 0;border-bottom:1px solid var(--line);
  border-inline-start:3px solid var(--card-accent,var(--line-2));
  padding-inline-start:16px;
}
.choice-card:last-child{border-bottom:0}
.choice-name{
  font-size:18px;font-weight:700;color:var(--ink);margin:0 0 3px;
}
.choice-where{font-size:14.5px;color:var(--muted);margin:0 0 14px;line-height:1.7}
.choice-go{margin:0}
.choice-note{
  font-size:14px;color:var(--ink-2);margin:12px 0 0;line-height:1.7;
}

/* a product's home, for somebody who belongs to it ------------------------- */
.product-home{padding:6px 0 34px}
.product-home h1{margin:0 0 6px}
.product-home-standing{
  font-size:15px;color:var(--muted);margin:0 0 24px;
  font-variant-numeric:tabular-nums;
}
.product-home-act{margin:0}
.product-home-note{
  font-size:15px;color:var(--ink-2);margin:14px 0 0;line-height:1.75;
  max-width:52ch;
}
.product-home-aside{font-size:14px;color:var(--muted);margin:26px 0 6px}
.invite-link{margin:0}
.invite-link code{
  display:block;font-size:12.5px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--wash);word-break:break-all;color:var(--ink-2);
}

/* onboarding: two questions ------------------------------------------------- */
.onboarding h1{margin:0 0 6px}
.onboarding-group{
  border:0;padding:0;margin:34px 0 0;
}
.onboarding-group legend{
  padding:0;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:10px;
}
/* The whole row is the target, not the dot. 52px clears the 44px floor with
   room for two lines of Persian at a comfortable size. */
.onboarding-choice{
  display:flex;align-items:center;gap:11px;
  min-height:52px;padding:6px 0;
  border-bottom:1px solid var(--line);cursor:pointer;
}
.onboarding-choice:last-of-type{border-bottom:0}
.onboarding-choice input{
  width:20px;height:20px;flex:0 0 auto;accent-color:var(--accent);margin:0;
}
.onboarding-choice span{font-size:15.5px;color:var(--ink-2);line-height:1.6}
.onboarding-choice:has(input:checked) span{color:var(--ink);font-weight:500}
.onboarding-act{margin:34px 0 0}

/* the account form --------------------------------------------------------- */
.auth-both{
  font-size:14px;color:var(--muted);margin:0 0 20px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.auth-card label.f{display:block;margin:18px 0 6px;font-size:13px;color:var(--muted)}
.auth-card input{
  width:100%;padding:12px 14px;
  border:1px solid var(--line-2);border-radius:var(--radius);background:var(--paper);
}
.auth-acts{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:26px 0 0;
}
/* The more specific rule was still under the floor and was overriding the base
   one I had just lifted — a size fix that measures as no change is usually a
   second rule further down the file. This is the sign-in path on the page a
   stranger lands on, so it gets body size and a full tap target. */
.auth-acts .link-button{font-size:15px;color:var(--accent);background:none;border:0;padding:8px 0;min-height:40px}

/* the notice block, shared ------------------------------------------------- */
.notice{
  padding:12px 14px;border-radius:var(--radius);font-size:14.5px;
  margin:0 0 20px;line-height:1.7;
}
.notice.err{background:#fbeeec;color:var(--bad)}

/* the questionnaire, made finishable ---------------------------------------- */
.qprogress{
  position:sticky;top:calc(58px + 3px);z-index:15;
  margin:0 0 18px;padding:10px 0;
  background:var(--paper);border-bottom:1px solid var(--line);
  font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;
}
/* Sticky, because the only submit used to sit at 98% of a twelve-question
   document. The padding on <body> already clears the tab bar; this sits above
   it. */
.qsubmit{
  position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));
  z-index:16;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:34px 0 0;padding:14px 0;
  background:var(--paper);border-top:1px solid var(--line);
}
.qsubmit-note{font-size:14px;color:var(--bad)}
/* A blank question is marked, never blocked: declining a question is the
   respondent's right, and the mark exists because a blank one comes back in
   every later wave and quietly costs them a slot. */
.q.is-blank{
  border-inline-start:2px solid var(--bad);
  padding-inline-start:12px;margin-inline-start:-14px;
}

/* the personal file, now showing a path and not just its total -------------- */
.profile-open{margin:18px 0 0;font-size:15px}
.profile-open a{color:var(--accent);font-weight:500}
.profile-history{
  list-style:none;margin:18px 0 0;padding:0;
  border-top:1px solid var(--line);
}
.profile-history li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.profile-history a{font-size:15px;color:var(--ink-2);line-height:1.6}
.profile-history time{
  font-size:14px;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* Printed even when there is nothing to do: a page that goes quiet is how a
   reader decides the product has stopped. */
.profile-next{margin:20px 0 0;font-size:15px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.profile-next a{color:var(--accent);font-weight:500;min-height:32px;display:inline-flex;align-items:center}
.profile-next-note{color:var(--muted);font-size:14.5px;line-height:1.7}

/* the two lines a reader inside a case needed --------------------------------- */
.work-kept{
  margin:0 0 22px;padding:10px 12px;
  background:var(--wash);border-radius:var(--radius);
  font-size:14px;color:var(--muted);line-height:1.7;
}
/* At the end of a case: what happened, above what comes next. Authored, with the
   server filling in the one number — not a score, not a percentage. */
.closing-line{
  margin:0 0 18px;font-size:15.5px;color:var(--ink-2);line-height:1.75;
}

/* the one-time introduction, in place of a loading screen ------------------- */
.product-intro{
  margin:0 0 22px;padding:14px 16px;
  background:var(--accent-soft);border-radius:var(--radius);
  font-size:15px;color:var(--ink-2);line-height:1.8;max-width:56ch;
}

/* the account control, in its two states -------------------------------------
   Signed out it is a call: a visitor has nothing in the tab bar telling them an
   account is possible, so this has to read as an action. Signed in it is a
   label answering "who am I here" — quiet, because the tab bar already carries
   the way to the record. Making these look identical apart from the word inside
   them is what left readers unsure whether they were signed in. */
.topbar-account.is-call{
  padding:7px 14px;min-height:38px;
  border:1px solid var(--accent);border-radius:var(--radius);
  color:var(--accent);font-size:14.5px;
}
.topbar-account.is-call:hover{background:var(--accent-soft)}
.topbar-account.is-signed{
  padding:0 4px;min-height:38px;
  border:0;color:var(--muted);font-size:14px;
}
.topbar-account.is-signed:hover{color:var(--ink)}

/* one account, two records ---------------------------------------------------
   The file page is the only screen where both products meet, and it showed one as
   a "record of X" and the other as an "organisational membership": two different
   kinds of noun, no colour between them, nothing that let a reader feel there
   were two products behind one account. Each record now carries its own accent —
   (Product names stay out of this comment: the brand guard forbids the rendering
   layer from writing them as literals, and it caught this on the first run.)
   the same device the products use on their own pages — so the parallel is
   visible before the words are read. */
.profile-section.is-product{
  border-top:0;padding-top:0;margin:26px 0;
  padding-inline-start:14px;
  border-inline-start:3px solid var(--product-accent,var(--line-2));
}
.profile-section.is-product h2{color:var(--product-accent,var(--muted))}

/* the operator's own contact details -----------------------------------------
   These links were 137x25 — under the tap floor — and while the contact form is
   hidden for want of a recipient address, they are the ONLY way to reach the
   operator at all. The service card on the front door leads here. */
.contact-list dd a,.contact-block dd a{
  display:inline-flex;align-items:center;
  min-height:38px;padding-inline-end:4px;
  font-size:15px;
}

/* Routes out of a record. «کیس‌ها» measured 43x22 — half the tap floor, and the
   only way from a record into the product it belongs to. */
.profile-links a,.profile-next a,.profile-open a{
  display:inline-flex;align-items:center;
  min-height:38px;padding-inline-end:4px;
  font-size:15px;
}

/* ------------------------------------------------- the questionnaire, paced

   One question fills the view and a bar says how far through. The wall of seven
   five-option questions was the worst shape available for the reader this
   instrument is aimed at: all of the work visible at once, on a phone, to
   somebody whose time is the scarcest thing they have.

   Every rule here is additive. Without scripting the pager never turns on, the
   bar stays hidden, and the form is exactly the page it was. */

.qbar{
  position:sticky;top:0;z-index:5;
  block-size:3px;inline-size:100%;
  background:var(--line);border-radius:2px;overflow:hidden;margin:var(--s-3) 0 var(--s-5);
}
.qbar>i{
  display:block;block-size:100%;inline-size:0%;
  background:var(--accent);
  transition:inline-size .28s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion:reduce){.qbar>i{transition:none}}

.qnav{display:flex;gap:var(--s-3);align-items:center;margin-top:var(--s-5)}
.qnav .primary-button,.qnav .secondary-button{min-inline-size:112px}
.qnav button[disabled]{opacity:.35;pointer-events:none}

/* A respondent's own words, on every question and never demanded. Closed, so
   the round still reads as four minutes of work rather than as a form. */
.org .qnote{margin-top:var(--s-4);border-top:1px solid var(--line);padding-top:var(--s-3)}
.org .qnote>summary{
  cursor:pointer;list-style:none;
  font-size:var(--t-small);color:var(--accent);line-height:var(--lh-small);
}
.org .qnote>summary::-webkit-details-marker{display:none}
.org .qnote>summary::before{content:"+";margin-inline-end:var(--s-2);color:var(--faint)}
.org .qnote[open]>summary::before{content:"−"}
.org .qnote textarea{
  inline-size:100%;min-block-size:88px;resize:vertical;margin-top:var(--s-3);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:var(--s-3);
  background:var(--paper);outline:none;line-height:var(--lh-body);font-size:var(--t-small);
}
.org .qnote textarea:focus{border-color:var(--accent)}
/* The follow-up that only appears at the ends of a scale. Marked, not
   alarmed: it is an invitation on the one answer worth an example, and a red
   box would read as an objection to the answer just given. */
.org .qnote.is-extreme{border-top-color:var(--accent)}
.org .qnote.is-extreme>summary{color:var(--accent)}
.org .qnote.is-extreme>summary::before{color:var(--accent)}

/* --------------------------------------------------------- the next move

   One action, at the top of the report, and the only block on the page that is
   allowed to look raised. Everything else on a diagnosis is a record of what
   was found; this is the one thing being asked of the reader, so it is the one
   thing that gets the lift token. Spend it here and nowhere else. */
.org .nextmove{
  margin:var(--s-5) 0 var(--s-6);
  padding:var(--s-5);
  background:var(--paper);
  border:1px solid var(--line);
  border-inline-start:3px solid var(--accent);
  border-radius:var(--radius-lg);
  box-shadow:var(--lift);
}
.org .nextmove .sec{margin:0 0 var(--s-3);font-size:var(--t-label);letter-spacing:var(--track-label);color:var(--accent);text-transform:none}
.org .nextmove-do{
  margin:0;font-size:var(--t-title);line-height:var(--lh-title);
  font-weight:700;color:var(--ink);letter-spacing:-.01em;
}
.org .nextmove-meta{
  margin:var(--s-5) 0 0;padding:0;display:grid;gap:var(--s-4);
  border-top:1px solid var(--line);padding-top:var(--s-4);
}
@media (min-width:560px){.org .nextmove-meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}}
.org .nextmove-meta dt{
  margin:0;font-size:var(--t-label);letter-spacing:var(--track-label);color:var(--faint);
}
.org .nextmove-meta dd{margin:var(--s-1) 0 0;font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-2)}

/* ------------------------------------------------- a finding over the rounds

   «شناخت تکاملی، نه یک عکس فوری» is what this instrument sells, and until now
   the only way to know whether a problem was moving was to read a sentence
   about it. This is that sentence, seen: one mark per round, the finding's span
   filled, in the colour of its state.

   Not a chart and not a percentage. It plots two facts the ledger already
   stores — first seen, last seen — against how many rounds exist, and nothing
   it cannot stand behind. */
.org .track{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3)}
.org .track i{
  inline-size:22px;block-size:22px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-2);background:var(--paper);
  font-style:normal;
}
.org .track i b{font-size:11px;font-weight:500;color:var(--faint);line-height:1}
.org .track i.is-on{background:var(--wash);border-color:var(--muted)}
.org .track i.is-on b{color:var(--ink-2);font-weight:700}
/* The state colours the span, so four findings read as four trajectories before
   any of their words are. */
.org .prob.confirmed .track i.is-on{background:var(--v-good-soft);border-color:var(--v-good)}
.org .prob.confirmed .track i.is-on b{color:var(--v-good)}
.org .prob.open .track i.is-on{background:var(--v-fair-soft);border-color:var(--v-fair)}
.org .prob.open .track i.is-on b{color:var(--v-fair)}
.org .prob.faded .track i.is-on{background:var(--v-none-soft);border-color:var(--v-none)}
.org .prob.faded .track i.is-on b{color:var(--v-none)}

/* ------------------------------------------------------- the intake questions

   Three named questions where a blank textarea used to be. Each one is a small
   document: a number, the question as a real label, the note that makes it
   answerable, and the box. The number is there because three boxes with no
   ordinal read as a form, and a form is the thing a chief executive closes. */
.org .iq{border-top:1px solid var(--line);padding:var(--s-5) 0}
.org .iq:first-of-type{border-top:0;padding-top:var(--s-3)}
.org .iq-n{
  margin:0 0 var(--s-2);font-size:var(--t-label);color:var(--faint);
  font-variant-numeric:tabular-nums;letter-spacing:var(--track-label);
}
.org .iq-q{
  display:block;margin:0;font-size:var(--t-section);line-height:var(--lh-section);
  font-weight:700;color:var(--ink);letter-spacing:-.01em;
}
.org .iq-help{margin:var(--s-2) 0 0;font-size:var(--t-small);line-height:var(--lh-small);color:var(--muted)}
.org .iq textarea{
  inline-size:100%;min-block-size:104px;resize:vertical;margin-top:var(--s-3);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:var(--s-3);
  background:var(--paper);outline:none;line-height:var(--lh-body);font-size:var(--t-body);
}
.org .iq textarea:focus{border-color:var(--accent)}
/* Said where it is typed, not in a promise at the bottom of the page. */
.org .iq-private{margin:var(--s-2) 0 0;font-size:13px;line-height:var(--lh-small);color:var(--muted)}
.org .iq-private::before{content:"·";margin-inline-end:var(--s-2);color:var(--line-2)}

/* ------------------------------------------ the buyer's own words, ruled on

   The first block of the report, because it is the only one that proves
   somebody read what this reader wrote. The quote is set as a quote — larger
   than body, in the reader's own register — and the verdict under it is the
   product speaking. A left rail in the verdict's own colour, so the answer is
   legible before the sentence is read. */
.org .claim{
  margin:0 0 var(--s-6);
  padding-inline-start:var(--s-4);
  border-inline-start:2px solid var(--line-2);
}
.org .claim[data-verdict=confirmed]{border-inline-start-color:var(--v-good)}
.org .claim[data-verdict=redirected]{border-inline-start-color:var(--accent)}
.org .claim[data-verdict=open]{border-inline-start-color:var(--v-fair)}
.org .claim[data-verdict=too_early],
.org .claim[data-verdict=untested]{border-inline-start-color:var(--v-none)}

.org .claim-lead{
  margin:0;font-size:var(--t-label);letter-spacing:var(--track-label);color:var(--faint);
}
.org .claim-quote{
  margin:var(--s-3) 0 0;padding:0;
  font-size:var(--t-section);line-height:1.95;color:var(--ink);
}
.org .claim-verdict{
  margin:var(--s-4) 0 0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-2);
}

/* Symptom to root. The arrow points AT the cause, which is the direction the
   sentence reads in Persian and the opposite of the way a flow diagram runs. */
.org .claim-chain{
  margin:var(--s-4) 0 0;display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  font-size:var(--t-small);line-height:var(--lh-small);
}
.org .claim-from{color:var(--muted)}
.org .claim-chain i{font-style:normal;color:var(--line-2)}
.org .claim-to{color:var(--accent);font-weight:700}
.org .claim-why{margin:var(--s-2) 0 0;font-size:var(--t-small);line-height:var(--lh-small);color:var(--muted)}

/* -------------------------------------------------- what the reader declared

   The other half of a record. Everything above it is what the product observed;
   this is what the person said, dated, and can withdraw. A retired declaration
   stays on the list struck through rather than disappearing — "I used to want
   this and now I do not" is a true thing about somebody, and a timeline that
   quietly drops it is a timeline that flatters. */
.profile-sub{
  margin:var(--s-5) 0 0;font-size:var(--t-label);letter-spacing:var(--track-label);
  color:var(--faint);font-weight:400;
}
.profile-history li.is-retired a{color:var(--muted);text-decoration:line-through}
.profile-history li.is-retired time{color:var(--faint)}

/* The wizard's own quote, under a proposed reading. Set as the reader's words
   rather than the product's: lighter than the label above it, and italic-free
   because Persian has no italic and a slanted Persian face is a browser
   inventing one. */
.focus-quote{
  display:block;margin-top:var(--s-1);font-style:normal;
  font-size:var(--t-small);line-height:var(--lh-small);color:var(--muted);
}

/* ------------------------------------------------- something for the member

   The one block on the organisational side that is about the person reading it
   rather than about their organisation. Given the lift token, because it is the
   only thing on that screen being offered to them rather than collected from
   them. */
.org .mreturn{
  margin:var(--s-5) 0 0;padding:var(--s-5);
  background:var(--paper);border:1px solid var(--line);
  border-inline-start:3px solid var(--accent);
  border-radius:var(--radius-lg);box-shadow:var(--lift);
}
.org .mreturn-lead{margin:0;font-size:var(--t-label);letter-spacing:var(--track-label);color:var(--faint)}
.org .mreturn-subject{
  margin:var(--s-2) 0 0;font-size:var(--t-title);line-height:var(--lh-title);
  font-weight:700;color:var(--ink);letter-spacing:-.01em;
}
.org .mreturn-note{margin:var(--s-4) 0 0;font-size:13px;line-height:var(--lh-small);color:var(--muted)}

/* The field that is not on the screen. Moved out of the viewport rather than
   display:none, because a bot that skips undisplayed inputs skips the trap;
   kept out of the tab order and out of the accessibility tree so nobody using
   a keyboard or a screen reader is ever asked to fill in a trap. */
.hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}


/* ============================================================ articles
   The only surface here built to be read for four minutes rather than
   answered in four minutes, and the only one a stranger arrives at from a
   search result. So it is set for reading: a measure that stops at about
   sixty-five Persian characters, a line height that survives a paragraph,
   and headings that separate sections without shouting.

   Everything uses the same tokens as the rest of the app, so an article
   inherits dark mode, the product accent and the type scale rather than
   carrying a second theme that drifts. */
.article, .article-index{max-inline-size:44rem;margin-inline:auto}

.art-head{margin-block-end:var(--s-6)}
.article h1{font-size:clamp(24px,4.2vw,34px);line-height:1.45;margin:0 0 var(--s-4);letter-spacing:-.01em}

/* The byline is three independent facts and any of them may be absent, so
   they are separated by a rendered bullet rather than by characters typed
   into the markup — a separator in the HTML becomes a stray dot the day a
   field is empty. */
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) 0;font-size:13px;color:var(--faint);margin:0 0 var(--s-4)}
.art-meta > *{display:inline-flex;align-items:center}
.art-meta > * + *::before{content:"·";margin-inline:var(--s-2);opacity:.55}
.art-meta a{color:var(--accent);text-decoration:none}
.art-meta a:hover{text-decoration:underline}

/* The standfirst is the same sentence as the meta description and the
   structured data. Printing it means the three cannot drift. */
.art-lead{font-size:17px;line-height:1.95;color:var(--ink);margin:0;padding-inline-start:var(--s-3);
          border-inline-start:3px solid var(--accent-soft)}

.art-prose{font-size:16.5px;line-height:2.1;color:var(--ink)}
.art-prose p{margin:0 0 var(--s-5)}
.art-prose h2{font-size:20px;line-height:1.6;margin:var(--s-6) 0 var(--s-4);letter-spacing:-.005em}
.art-prose h3{font-size:17px;line-height:1.7;margin:var(--s-5) 0 var(--s-3);color:var(--muted)}
.art-prose ul,.art-prose ol{margin:0 0 var(--s-5);padding-inline-start:var(--s-5)}
.art-prose li{margin-block-end:var(--s-2)}
.art-prose a{color:var(--accent);text-underline-offset:3px}
.art-prose strong{font-weight:700}
.art-prose code{font-size:.92em;background:var(--accent-soft);padding:1px 5px;border-radius:4px;direction:ltr;display:inline-block}
.art-prose hr{border:0;border-block-start:1px solid var(--line);margin:var(--s-6) 0}
/* A pulled sentence, not a quotation from elsewhere: no quote marks, because
   the author is quoting themselves and glyphs would claim otherwise. */
.art-prose blockquote{margin:var(--s-5) 0;padding:var(--s-3) var(--s-4);border-inline-start:3px solid var(--accent);
                      background:var(--accent-soft);border-radius:0 6px 6px 0}
.art-prose blockquote p{margin:0;font-size:17px;line-height:1.9}
.art-updated{margin:var(--s-6) 0 0;font-size:13px;color:var(--faint)}

.art-related,.art-cases,.art-cta{margin-block-start:var(--s-6);padding-block-start:var(--s-5);border-block-start:1px solid var(--line)}
.art-card{display:block;text-decoration:none;color:inherit;padding:var(--s-3) 0;border-block-end:1px solid var(--line)}
.art-card:last-child{border-block-end:0}
.art-card b{display:block;font-size:15.5px;margin-block-end:var(--s-1);color:var(--ink)}
.art-card span{font-size:13.5px;color:var(--muted);line-height:1.85}
.art-card:hover b{color:var(--accent)}

.art-cta{text-align:center}
.art-cta h2{font-size:19px;margin:0 0 var(--s-2)}
.art-cta p{color:var(--muted);font-size:14.5px;line-height:1.95;margin:0 0 var(--s-4)}

/* The index */
.art-row{padding-block:var(--s-5);border-block-end:1px solid var(--line)}
.art-row:last-of-type{border-block-end:0}
.art-row h2{font-size:19px;line-height:1.6;margin:0 0 var(--s-2)}
.art-row h2 a{color:var(--ink);text-decoration:none}
.art-row h2 a:hover{color:var(--accent)}
.art-row > p{margin:0 0 var(--s-2);color:var(--muted);font-size:14.5px;line-height:1.95}

.art-pager{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center;margin-block-start:var(--s-6)}
.art-pager a,.art-pager span{min-inline-size:34px;padding:6px 10px;text-align:center;border:1px solid var(--line);
                             border-radius:6px;font-size:14px;text-decoration:none;color:var(--muted)}
.art-pager span[aria-current]{border-color:var(--accent);color:var(--accent);font-weight:700}

/* A printed article is the one somebody takes into a meeting, so the parts
   that only exist to click do not come with it. */
@media print{
  .art-related,.art-cta,.art-pager,.art-cases{display:none}
  .art-prose{font-size:12pt;line-height:1.8}
}