/* ============================================================================
   Nasaq /athar. Page layer for the Athar product page.
   Requires tokens.css then site.css to be linked first.

   Only what /athar adds sits here. The base layer (wrap, panel, btn, eyebrow,
   header, footer, faq, final, module track, focus, responsive) comes from
   site.css and is never restated. No colour, radius, font or size literals:
   every value comes from a token.

   Directional CSS uses LOGICAL properties throughout, so an /ar/athar page
   can reuse this sheet. The phone mockups are RTL already.
   ============================================================================ */

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.body-copy{ color:var(--text-secondary); max-width:62ch; margin-top:16px; }
#problem{ border-top:1px solid var(--border-faint); }

/* house line icons, used through <use> */
.b-icon svg,.btn > svg,.replay svg,.trace-src svg,
.record-ico svg,.role-tablist svg{
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- header lockup ----------
   The Athar mark and word, then a quieter "by Nasaq" so the parent brand is
   present without competing. The Nasaq logo drops out on phones. */
.athar-lockup{
  display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text-primary);
}
.athar-mark{ width:28px; height:28px; fill:var(--brand); flex:0 0 auto; }
.athar-word{ font-size:var(--text-xl); font-weight:700; letter-spacing:var(--tracking-head); line-height:1; }
.athar-word-alt{ font-size:var(--text-lg); font-weight:600; color:var(--text-muted); line-height:1; }
.by-nasaq{
  display:flex; align-items:center; gap:8px; text-decoration:none;
  font-size:var(--text-xs); color:var(--text-muted);
  padding-inline-start:16px; border-inline-start:1px solid var(--border-subtle);
}
.by-nasaq img{ height:20px; width:auto; display:block; opacity:.85; }
.by-nasaq:hover img{ opacity:1; }
/* The row is lockup + by-Nasaq + nav + language + button, and none of it may
   wrap: a two-line "Start free" pill doubles the sticky header's height. So
   the extras drop out as the bar narrows, least important first. */
header.site .btn{ white-space:nowrap; }
@media (max-width:960px){
  .by-nasaq{ display:none; }
}
/* 641-720: the full nav is back but the bar is still narrow. */
@media (max-width:420px), (min-width:641px) and (max-width:720px){
  .athar-word-alt{ display:none; }
}
@media (max-width:420px){
  header.site .wrap{ gap:8px; }
}

/* ---------- hero, shared ---------- */
.hero .micro{ font-size:var(--text-sm); color:var(--text-muted); margin-top:16px; max-width:44ch; }
.hero .hero-actions{ margin-top:24px; }
.hero .eyebrow{ color:var(--brand); }
.hero h1 .accent-line{ display:block; }
/* Hero: the phone is taller than the copy. Two flexible rows around the
   copy and CTA keep them together and centred against it, instead of the
   CTA drifting to the bottom of the phone. */
@media (min-width:861px){
  .hero-chat .hero-grid{ grid-template-rows:1fr auto auto 1fr; }
  .hero-chat .hero-copy{ grid-row:2; }
  .hero-chat .hero-cta{ grid-row:3; }
  .hero-chat .hero-visual{ grid-row:1 / 5; }
}

/* ---------- voice note: shared bits ---------- */
.voice-play{
  display:grid; place-items:center; flex:0 0 auto;
  width:32px; height:32px; border-radius:var(--radius-pill);
  background:var(--brand); color:var(--on-brand);
}
.voice-play svg{ width:14px; height:14px; fill:currentColor; }
/* Bars of fixed, varied heights. They never move: a waveform that pulses
   forever is exactly the decorative loop DESIGN.md rule 6 bans. */
.voice-wave{ display:flex; align-items:center; gap:2px; height:24px; }
.voice-wave i{ display:block; width:3px; border-radius:var(--radius-pill); background:currentColor; opacity:.55; height:30%; }
.voice-wave i:nth-child(3n+1){ height:55%; }
.voice-wave i:nth-child(4n+2){ height:85%; }
.voice-wave i:nth-child(5n+3){ height:40%; }
.voice-wave i:nth-child(7n){ height:100%; }
.voice-wave i:nth-child(-n+8){ opacity:1; }   /* the played part */
.voice-len{ font-size:var(--text-xs); font-variant-numeric:tabular-nums; }

/* ---------- phone mockup ----------
   Telegram's shape, the brand's colours. Outgoing bubbles take the brand
   wash, incoming ones the raised surface, on the alternating band. */
.phone{
  width:100%; max-width:340px; margin-inline:auto;
  background:var(--surface-base);
  border:8px solid var(--text-primary); border-radius:calc(var(--radius-lg) * 2);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  font-size:var(--text-sm); line-height:var(--leading-body);
}
.phone-bar{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; background:var(--surface-raised);
  border-bottom:1px solid var(--border-subtle);
}
.phone-avatar{
  width:32px; height:32px; border-radius:var(--radius-pill); flex:0 0 auto;
  background:var(--brand); display:grid; place-items:center;
}
.phone-avatar svg{ width:20px; height:20px; fill:var(--on-brand); }
.phone-title{ display:flex; flex-direction:column; font-weight:700; line-height:var(--leading-tight); }
.phone-title small{ font-size:var(--text-xs); font-weight:400; color:var(--text-muted); }

.chat{
  list-style:none; margin:0; padding:16px 12px;
  display:flex; flex-direction:column; gap:8px;
  min-height:0;
}
.msg{
  position:relative; max-width:86%;
  padding:8px 12px 20px; border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:4px;
}
.msg p{ margin:0; }
.msg time{
  position:absolute; inset-block-end:4px; inset-inline-end:10px;
  font-size:var(--text-xs); color:var(--text-muted); line-height:1;
}
/* Telegram does not mirror the conversation for Arabic: your own messages
   stay on the right and the bot's on the left, with RTL text inside each
   bubble. So the chat column is laid out LTR and each bubble is RTL. This is
   the one place the page uses physical sides on purpose, because it is
   drawing a physical screen. */
.phone-bar,.chat{ direction:ltr; }
.phone-title,.msg{ direction:rtl; }
.msg.in{ align-self:flex-start; background:var(--surface-raised); border-top-left-radius:4px; }
.msg.out{ align-self:flex-end; background:color-mix(in oklab, var(--brand) 14%, var(--surface-raised)); border-top-right-radius:4px; }
.msg blockquote{
  margin:0; padding-inline-start:8px;
  border-inline-start:3px solid var(--brand); color:var(--text-primary);
}
/* the inline button Telegram draws under a message */
.msg-btn{
  margin-top:8px; align-self:stretch; text-align:center;
  padding:4px; border-radius:var(--radius-sm);
  background:var(--surface-base); font-size:var(--text-xs); font-weight:600; color:var(--text-secondary);
}
.msg.voice{ direction:ltr; flex-direction:row; align-items:center; gap:8px; padding-block:8px 20px; color:var(--brand); }
.msg.voice .voice-len{ color:var(--text-secondary); }
.msg.transient{ display:none; }   /* only shown while the sequence plays */

/* Hero stage: the phone, with the English "saved" tag overlapping it. */
.phone-stage{ position:relative; margin:0; padding-block-end:32px; }
.record-tag{
  position:absolute; inset-block-end:0; inset-inline-start:0;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; max-width:300px;
  background:var(--surface-raised); border:1px solid var(--brand-border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md);
}
.record-tag strong{ display:block; font-size:var(--text-sm); }
.record-tag span{ display:block; font-size:var(--text-xs); color:var(--text-secondary); }
.record-ico{
  width:32px; height:32px; flex:0 0 auto; border-radius:var(--radius-pill);
  display:grid; place-items:center; background:var(--brand-wash); color:var(--brand);
}
.record-ico svg{ width:18px; height:18px; stroke-width:2.4; }
/* Physical right, like the chat itself: in RTL an inline-end button would sit
   over the phone's avatar and title. */
.replay{
  position:absolute; top:0; right:0;
  display:inline-flex; align-items:center; gap:4px;
  font:inherit; font-size:var(--text-xs); font-weight:600; color:var(--text-secondary);
  background:var(--surface-raised); border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill); padding:4px 12px; cursor:pointer;
}
.replay[hidden]{ display:none; }   /* display:inline-flex above would override [hidden] */
.replay svg{ width:14px; height:14px; }
.replay:hover{ color:var(--action); border-color:var(--action); }

/* Sequencer states. Everything that hides content is scoped under
   .is-playing, which only JS adds, so the static page is the complete page. */
[data-chat].is-playing [data-step]{
  opacity:0; transform:translateY(8px);
  transition:opacity var(--duration-slow) var(--ease-out),
             transform var(--duration-slow) var(--ease-out);
}
[data-chat].is-playing [data-step].is-in{ opacity:1; transform:none; }
[data-chat].is-playing .msg.transient.is-in{ display:flex; }
[data-chat].is-playing .msg.transient.is-gone{ display:none; }

@media (max-width:860px){
  .hero-grid:not(.hero-centered) .hero-visual{ max-width:400px; margin-inline:auto; width:100%; }
}
@media (max-width:480px){
  .record-tag{ position:relative; margin-top:-24px; margin-inline:16px; max-width:none; }
  .phone-stage{ padding-block-end:0; }
}

/* ---------- problem ---------- */
.problem-layout{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px; align-items:center;
}
.problem-layout > .sec-head{ max-width:none; margin:0; }
.pull{
  margin-top:24px; padding-inline-start:16px; border-inline-start:3px solid var(--brand);
  font-size:var(--text-xl); font-weight:600; line-height:var(--leading-tight); color:var(--text-primary);
}
@media (max-width:860px){ .problem-layout{ grid-template-columns:1fr; gap:32px; } }

/* the ledger */
.ledger{ margin:0; padding:0; display:grid; grid-template-columns:1fr; overflow:hidden; }
.ledger-col{ padding:24px; }
.ledger-head{ font-size:var(--text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:16px; }
.ledger-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.ledger-list li{
  display:flex; align-items:baseline; gap:12px; padding-block:8px;
  border-top:1px solid var(--border-faint); font-size:var(--text-sm); color:var(--text-muted);
}
.ledger-list li:first-child{ border-top:0; }
.ledger-list .day{ flex:0 0 32px; font-size:var(--text-xs); font-weight:600; }
.ledger-list .tag{
  margin-inline-start:auto; flex:0 0 auto; font-size:var(--text-xs); font-weight:600;
  padding:0 8px; border-radius:var(--radius-pill); border:1px dashed var(--border-default);
}
.ledger-list li.kept{ color:var(--text-primary); font-weight:500; }
.ledger-list li.kept .tag{ border:1px solid var(--brand-border); background:var(--brand-wash); color:var(--brand); }
[lang="ar"] .ledger-head{ text-transform:none; letter-spacing:0; }
[lang="ar"] .ledger-list .day{ flex-basis:56px; }
.ledger-report{ background:var(--surface-base); border-top:1px solid var(--border-subtle); }
.ledger-quote{ font-size:var(--text-lg); font-style:italic; color:var(--text-secondary); }
.ledger-foot{ margin-top:12px; font-size:var(--text-sm); font-weight:600; color:var(--text-primary); }

/* ---------- how it works ---------- */
.steps-row{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:none;
}
.step{ position:relative; padding-block-start:24px; border-top:2px solid var(--text-primary); display:flex; flex-direction:column; gap:8px; }
.step-num{
  width:32px; height:32px; display:grid; place-items:center; margin-bottom:8px;
  font-weight:700; font-size:var(--text-sm); color:var(--brand);
  border:1.5px solid var(--brand-border); background:var(--brand-wash); border-radius:var(--radius-pill);
}
.step h3{ font-size:var(--text-lg); }
.step p{ font-size:var(--text-base); color:var(--text-secondary); }
@media (max-width:860px){ .steps-row{ grid-template-columns:1fr; } }

/* ---------- ticks (feature lists) ---------- */
.ticks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ticks li{ position:relative; padding-inline-start:24px; font-size:var(--text-sm); color:var(--text-secondary); }
.ticks li::before{
  content:""; position:absolute; inset-inline-start:2px; top:.45em;
  width:8px; height:8px; background:var(--brand); transform:rotate(45deg);
}

/* ---------- roles ---------- */
.role-tablist{
  display:inline-flex; gap:4px; padding:4px; margin-bottom:32px;
  background:var(--surface-base); border:1px solid var(--border-subtle); border-radius:var(--radius-pill);
  max-width:100%; overflow-x:auto;
}
.role-tablist button{
  font:inherit; font-size:var(--text-sm); font-weight:600; color:var(--text-secondary);
  background:transparent; border:0; border-radius:var(--radius-pill);
  padding:8px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.role-tablist button svg{ width:16px; height:16px; }
.role-tablist button:hover{ color:var(--text-primary); }
.role-tablist button[aria-selected="true"]{ background:var(--surface-raised); color:var(--brand); box-shadow:var(--shadow-sm); }
.role-panel{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:48px; align-items:center;
}
.role-panel[hidden]{ display:none; }
.role-copy{ display:flex; flex-direction:column; gap:16px; }
.role-copy h3{ font-size:var(--text-2xl); text-wrap:balance; }
.role-copy .ticks li{ font-size:var(--text-base); }
.phone-sm{ max-width:320px; }
.phone-sm .chat{ min-height:400px; justify-content:flex-end; }
@media (max-width:480px){
  .role-tablist{ display:flex; width:100%; }
  .role-tablist button{ flex:1; justify-content:center; padding-inline:8px; }
  .role-tablist button svg{ display:none; }
}
@media (max-width:760px){
  .role-panel{ grid-template-columns:1fr; gap:32px; }
  .role-copy h3{ font-size:var(--text-xl); }
}

/* ---------- built in Arabic ---------- */
.arabic-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:24px; align-items:start; }
.benefits{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.benefit-card strong{ line-height:var(--leading-tight); margin-top:8px; }
.benefit-card .b-icon svg{ width:22px; height:22px; color:var(--brand); }
.dialect{ margin:0; padding:24px; display:flex; flex-direction:column; gap:16px; position:sticky; top:96px; }
.dialect figcaption strong{ display:block; font-size:var(--text-lg); }
.dialect figcaption span{ font-size:var(--text-sm); color:var(--text-secondary); }
.dialect-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.dialect-chips button{
  font:inherit; font-size:var(--text-sm); font-weight:600; cursor:pointer;
  padding:4px 12px; border-radius:var(--radius-pill);
  border:1.5px solid var(--border-default); background:var(--surface-bg); color:var(--text-secondary);
}
.dialect-chips button[aria-checked="true"]{ border-color:var(--brand); background:var(--brand-wash); color:var(--brand); }
.dialect-out{
  margin:0; padding:16px; min-height:128px;
  background:var(--surface-base); border-radius:var(--radius-md);
  border-inline-start:3px solid var(--brand);
  font-size:var(--text-lg); line-height:var(--leading-body);
}
@media (max-width:860px){
  .arabic-grid{ grid-template-columns:1fr; }
  .dialect{ position:static; }
}
@media (max-width:480px){ .benefits{ grid-template-columns:1fr; } }

/* ---------- where it fits ---------- */
.fit-scroll{ overflow-x:auto; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--surface-raised); box-shadow:var(--shadow-sm); }
.fit{ width:100%; min-width:760px; border-collapse:collapse; font-size:var(--text-sm); }
.fit th,.fit td{ padding:16px; text-align:start; vertical-align:top; border-top:1px solid var(--border-faint); }
.fit thead th{ border-top:0; font-size:var(--text-sm); font-weight:700; color:var(--text-primary); vertical-align:bottom; }
.fit thead th small{ display:block; font-size:var(--text-xs); font-weight:500; color:var(--text-muted); }
.fit tbody th{ font-weight:600; color:var(--text-primary); width:17%; }
.fit td{ color:var(--text-secondary); width:20%; }
.fit .is-athar{ background:var(--brand-wash); color:var(--text-primary); font-weight:500; }
.fit thead .is-athar{ border-start-start-radius:0; }
.fit-athar{ display:inline-flex; align-items:center; gap:8px; color:var(--brand); font-size:var(--text-base); }
.fit-athar svg{ width:20px; height:20px; fill:var(--brand); }

/* ---------- Reports: the one dark slab ----------
   Same chrome site.css gives #solution on the home page. That rule set is
   id-scoped, so it is restated here for #reports rather than renaming either. */
#reports{
  background:var(--surface-bg); color:var(--text-primary);
  border-top:0; padding-block:96px;
}
#reports .sec-head{ max-width:720px; margin-inline:auto; margin-bottom:48px; text-align:center; }
#reports .sec-head .eyebrow{ color:var(--brand); }
#reports .pivot{
  font-size:var(--text-2xl); font-weight:600; color:var(--text-primary);
  letter-spacing:var(--tracking-head); line-height:var(--leading-tight);
  margin:16px 0; text-wrap:balance;
}
#reports .sec-head > p:not(.pivot):not(.eyebrow){ max-width:620px; margin-inline:auto; }
@media (max-width:640px){ #reports{ padding-block:64px; } }

.pro-features{
  list-style:none; margin:64px auto 0; padding:0; max-width:920px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px 40px;
}
.pro-features li{
  position:relative; padding-inline-start:24px;
  font-size:var(--text-sm); color:var(--text-secondary);
}
.pro-features li::before{
  content:""; position:absolute; inset-inline-start:2px; top:.45em;
  width:8px; height:8px; background:var(--brand); transform:rotate(45deg);
}
.pro-features strong{ color:var(--text-primary); font-weight:600; }
.pro-features li:last-child{ grid-column:1 / -1; max-width:calc(50% - 20px); }
.pro-cta{ margin-top:48px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.pro-cta p{ font-size:var(--text-sm); color:var(--text-secondary); max-width:52ch; }
.pro-cta a:not(.btn){ color:var(--brand); }
@media (max-width:760px){
  .pro-features{ grid-template-columns:1fr; }
  .pro-features li:last-child{ max-width:none; }
}

/* one entry, traced */
.trace{
  margin:0; display:grid; align-items:center; gap:16px;
  grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr);
}
.trace .panel{ padding:16px; }
.trace-k{ font-size:var(--text-xs); font-weight:600; color:var(--text-muted); margin-bottom:8px; }
.trace-ar{ font-size:var(--text-base); line-height:var(--leading-body); }
.trace mark{
  background:var(--brand-wash); color:var(--text-primary);
  border-bottom:2px solid var(--brand); padding:0 2px; border-radius:2px;
}
/* numbered, so the link from phrase to indicator never rests on colour */
.trace mark::after{
  content:attr(data-n); display:inline-grid; place-items:center;
  width:16px; height:16px; margin-inline-start:4px; vertical-align:super;
  font-size:var(--text-xs); font-weight:700; line-height:1;
  background:var(--brand); color:var(--on-brand); border-radius:var(--radius-pill);
}
.trace-arrow{ height:2px; background:var(--brand); position:relative; }
.trace-arrow::after{
  content:""; position:absolute; inset-inline-end:-1px; top:-4px;
  border:5px solid transparent; border-inline-start-color:var(--brand); border-inline-end-width:0;
}
.trace-kpis{ display:flex; flex-direction:column; gap:12px; }
.kpi{ display:flex; flex-direction:column; gap:8px; }
.kpi-name{ font-size:var(--text-sm); font-weight:600; display:flex; align-items:center; gap:8px; }
.kpi-n{
  width:16px; height:16px; display:inline-grid; place-items:center; flex:0 0 auto;
  font-size:var(--text-xs); font-weight:700; line-height:1;
  background:var(--brand); color:var(--on-brand); border-radius:var(--radius-pill);
}
.kpi-bar{ height:8px; border-radius:var(--radius-pill); background:var(--maturity-1); overflow:hidden; }
.kpi-bar span{ display:block; height:100%; width:calc(var(--v) * 100%); background:var(--brand); border-radius:inherit; }
.kpi-val{ font-size:var(--text-xs); color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.kpi-val b{ font-size:var(--text-base); color:var(--text-primary); }
.kpi-delta{ margin-inline-start:8px; color:var(--brand); font-weight:600; }
/* the qualitative card: its type shown among the four it could have been.
   The current type is filled AND bold, so it never rests on colour alone. */
.qual-types{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px; }
.qual-types li{
  font-size:var(--text-xs); font-weight:500; color:var(--text-muted);
  padding:0 8px; border-radius:var(--radius-pill); border:1px solid var(--border-subtle);
}
.qual-types li[aria-current="true"]{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:700; }
.qual-text{ font-size:var(--text-sm); color:var(--text-primary); }
/* the photo, in the entry and again in the drafts that reuse it */
.trace-photo{ position:relative; margin-bottom:12px; border-radius:var(--radius-sm); overflow:hidden; }
.trace-photo svg{ display:block; width:100%; height:auto; aspect-ratio:8 / 5; }
.trace-photo .kpi-n{ position:absolute; top:8px; inset-inline-start:8px; }
.draft-title{ font-weight:700; color:var(--text-primary); margin-bottom:4px; }
/* ---- the deck: three drafts stacked, each back card's label edge showing.
   All cards share one grid cell, so the deck is as tall as its tallest card
   and every card stretches to that height. Back cards step up and shrink
   from their top edge; --peek is how much of each one shows. */
.deck{ --peek:32px; display:grid; padding-top:calc(var(--peek) * 2); }
.trace .deck-card{
  grid-area:1 / 1; padding:8px 16px 16px;
  display:flex; flex-direction:column; gap:8px;
  transform-origin:top center;
  transition:transform var(--duration-slow) var(--ease-out),
             box-shadow var(--duration-slow) var(--ease-out);
}
.deck-card[data-pos="0"]{ z-index:3; box-shadow:var(--shadow-lg); }
.deck-card[data-pos="1"]{ z-index:2; transform:translateY(calc(var(--peek) * -1)) scale(.95); }
.deck-card[data-pos="2"]{ z-index:1; transform:translateY(calc(var(--peek) * -2)) scale(.9); }
.deck-tab{
  font:inherit; font-size:var(--text-xs); font-weight:600; color:var(--text-muted);
  background:none; border:0; border-bottom:1px solid var(--border-subtle);
  padding:0 0 8px; margin-bottom:4px; cursor:pointer; text-align:start;
  display:flex; align-items:center; gap:8px; width:100%;
}
.deck-tab:hover{ color:var(--text-primary); }
.deck-card[data-pos="0"] .deck-tab{ color:var(--brand); cursor:default; }
.deck-lang{
  display:inline-grid; place-items:center; min-width:24px; height:18px; padding:0 4px;
  border:1px solid var(--border-default); border-radius:var(--radius-sm);
  font-size:var(--text-xs); font-weight:700; line-height:1;
}
.deck-card[data-pos="0"] .deck-lang{ border-color:var(--brand); }
.deck-card p:not(.trace-k):not(.trace-src){ font-size:var(--text-sm); }
.deck-card[lang="ar"] p:not(.trace-k){ line-height:var(--leading-body); }
.deck-card .trace-src{ margin-top:auto; padding-top:12px; }
.trace-report p:not(.trace-k):not(.trace-src){ font-size:var(--text-sm); }
.trace-src{ margin-top:12px; display:flex; align-items:center; gap:8px; font-size:var(--text-xs); font-weight:600; color:var(--brand); }
.trace-src svg{ width:14px; height:14px; }
.trace-cap{ grid-column:1 / -1; text-align:center; font-size:var(--text-xs); color:var(--text-muted); margin-top:8px; }
@media (max-width:860px){
  .trace{ grid-template-columns:1fr; }
  .trace-arrow{ width:2px; height:24px; justify-self:center; }
  .trace-arrow::after{ inset-inline-end:auto; top:auto; bottom:-1px; left:-4px;
    border:5px solid transparent; border-top-color:var(--brand); border-bottom-width:0; }
}

/* ---------- proof: Iradaty ---------- */
.story{
  padding:40px; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:48px; align-items:start;
}
.story-side{ display:flex; flex-direction:column; gap:16px; }
.story-logo{ width:100%; max-width:220px; height:auto; }
.story-main{ display:flex; flex-direction:column; gap:16px; }
.story-quote{ margin:0; }
.story-quote p{ font-size:var(--text-2xl); font-weight:600; line-height:var(--leading-tight); letter-spacing:var(--tracking-head); text-wrap:balance; }
.story-quote footer{ margin-top:16px; font-size:var(--text-sm); color:var(--text-secondary); }
.story-quote footer strong{ display:block; color:var(--text-primary); }
.story-body{ color:var(--text-secondary); max-width:62ch; }
.story-link{ font-weight:600; color:var(--brand); text-underline-offset:3px; align-self:flex-start; }
@media (max-width:760px){
  .story{ grid-template-columns:1fr; padding:24px; gap:24px; }
  .story-quote p{ font-size:var(--text-xl); }
}

/* ---------- pricing ---------- */
.plans{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; align-items:stretch; max-width:800px; margin-inline:auto; }
.plan{ padding:24px; display:flex; flex-direction:column; gap:12px; position:relative; }
.plan h3{ font-size:var(--text-lg); }
.price{ font-size:var(--text-base); color:var(--text-secondary); }
.price b{ font-size:var(--text-2xl); color:var(--text-primary); font-weight:700; }
.price-sub{ font-size:var(--text-sm); color:var(--text-secondary); margin-top:-8px; }
.price-sub b{ color:var(--text-primary); }
.plan .ticks{ margin-block:8px 16px; flex:1; }
.plan .btn{ justify-content:center; }
.plan.is-org{ border:2px solid var(--brand); box-shadow:var(--shadow-md); }
.plan-note{ font-size:var(--text-xs); color:var(--text-secondary); text-align:center; line-height:1.5; }
.plan-note b{ color:var(--text-primary); }
.plan-badge{
  position:absolute; top:-12px; inset-inline-start:24px;
  font-size:var(--text-xs); font-weight:700; padding:2px 12px; border-radius:var(--radius-pill);
  background:var(--brand); color:var(--on-brand);
}
.plans-print{ margin-top:24px; font-size:var(--text-sm); color:var(--text-secondary); text-align:center; }
.plans-print b{ color:var(--text-primary); }
.plans-print + .plans-print{ margin-top:8px; }
.plans-print a{ color:var(--brand); }
@media (max-width:860px){ .plans{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; } }

.calc{ margin-top:48px; padding:32px; }
.calc h3{ font-size:var(--text-xl); margin-bottom:24px; }
.calc-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; }
.calc-inputs{ display:flex; flex-direction:column; gap:24px; }
.calc-field{ display:flex; flex-direction:column; gap:8px; }
.calc-label{ font-size:var(--text-sm); font-weight:600; color:var(--text-secondary); }
.calc-label output{ color:var(--text-primary); font-size:var(--text-lg); font-weight:700; font-variant-numeric:tabular-nums; margin-inline:4px; }
.calc input[type="range"]{ width:100%; accent-color:var(--action); }
.calc-scale{ display:flex; justify-content:space-between; font-size:var(--text-xs); color:var(--text-muted); }
.calc-scale a{ color:var(--brand); font-weight:600; }
.seg{ border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.seg legend{ float:inline-start; margin-inline-end:8px; min-width:64px; padding:0; }
.seg label{ position:relative; cursor:pointer; }
.seg input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.seg span{
  display:inline-block; padding:4px 16px; border-radius:var(--radius-pill);
  border:1.5px solid var(--border-default); font-size:var(--text-sm); font-weight:600; color:var(--text-secondary);
}
.seg input:checked + span{ border-color:var(--brand); background:var(--brand-wash); color:var(--brand); }
.seg input:focus-visible + span{ outline:2px solid var(--action); outline-offset:3px; }
.calc-result{
  padding:24px; border-radius:var(--radius-md); background:var(--surface-base);
  display:flex; flex-direction:column; gap:8px; text-align:center;
}
.calc-big{ font-size:var(--text-lg); color:var(--text-secondary); }
.calc-big b{ font-size:var(--text-3xl); color:var(--text-primary); font-variant-numeric:tabular-nums; }
.calc-line{ font-size:var(--text-sm); color:var(--text-secondary); }
.calc-save{ font-size:var(--text-sm); font-weight:700; color:var(--success-ink); }
.calc-save:empty{ display:none; }
.calc-min{ font-size:var(--text-xs); color:var(--text-muted); }
@media (max-width:760px){
  .calc{ padding:24px 16px; }
  .calc-grid{ grid-template-columns:1fr; gap:24px; }
}

/* ---------- final ---------- */
.final-mark{ width:48px; height:48px; fill:var(--brand); }