/* FahsLink marketing site — the instrument sheet.
 *
 * Direction agreed 2026-09-25: engineering instrumentation, with Arabic set as
 * a display face in its own right rather than a translation of the English.
 * The product measures things and writes down what it found, so the site is
 * built like a measurement document: hairlines, registration ticks, tabular
 * figures, a warm paper ground and exactly one action colour.
 *
 * No dark mode, deliberately. It was built and removed on 2026-09-08 because
 * the report is a paper document and two grounds meant two designs to keep
 * honest. The same reasoning applies here.
 *
 * Hand-written. Not prettier-formatted. Regenerate the pages after editing:
 *     node site-build.js
 */

/* ============================================================ TOKENS ==== */
:root{
  /* Gulf daylight on a drawing sheet, not office grey. */
  --sand:#E7E1D5;          /* page ground */
  --paper:#F5F2EB;         /* raised surface */
  --paper-2:#FBF9F5;       /* highest surface */
  --ink:#0F1A1C;           /* text, near-black with petrol in it */
  --ink-2:#46565A;         /* secondary text */
  --ink-3:#77858A;         /* captions, axis labels */
  --rule:#CDC6B7;          /* hairline, the drawn line */
  --rule-2:#DDD7CA;        /* fainter hairline */

  --petrol:#0A4B4E;        /* structure, headers, the dark band */
  --petrol-2:#0D6266;
  --amber:#E08A12;         /* the ONE action colour */
  --amber-ink:#7A4703;     /* amber text on light, for contrast */
  --redline:#BE3418;       /* gauge redline, critical only */
  --pass:#2C7049;          /* pass green, from the report */

  --measure:68ch;
  --gut:clamp(16px,4vw,32px);
  --bar:56px;              /* nav height */

  /* A type scale with a real ratio (1.25), not arbitrary sizes. */
  --t-micro:11px;
  --t-cap:12.5px;
  --t-sm:14px;
  --t-body:16.5px;
  --t-lead:clamp(17px,1.6vw,20px);
  --t-h3:clamp(20px,2.2vw,26px);
  --t-h2:clamp(28px,4vw,42px);
  --t-h1:clamp(38px,7vw,78px);

  --f-display:'Archivo','Arial Narrow',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
  --f-ar-display:'Noto Kufi Arabic','IBM Plex Sans Arabic',system-ui,sans-serif;
  --f-ar-body:'IBM Plex Sans Arabic',system-ui,sans-serif;
}

/* Arabic is a design decision here, not a fallback: its own display face, its
   own line height, and headings that are allowed to be a shade smaller because
   Kufi sets heavier than Archivo at the same size. */
html[lang="ar"]{
  --f-display:var(--f-ar-display);
  --f-body:var(--f-ar-body);
  --t-h1:clamp(32px,6vw,66px);
  --t-h2:clamp(25px,3.5vw,38px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font:400 var(--t-body)/1.6 var(--f-body);
  font-feature-settings:'kern' 1;
  overflow-x:hidden;
}

/* The drawing sheet. Two hairline grids at different pitches, so it reads as
   graph paper rather than a CSS pattern. Fixed, so content slides over it. */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(15,26,28,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(15,26,28,.045) 1px,transparent 1px),
    linear-gradient(to right,rgba(15,26,28,.021) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(15,26,28,.021) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,16px 16px,16px 16px;
}
main,header,footer{position:relative;z-index:1}

img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}

/* ============================================================ LAYOUT ==== */
.wrap{width:min(1180px,100% - (var(--gut) * 2));margin-inline:auto}
.wrap-narrow{width:min(760px,100% - (var(--gut) * 2));margin-inline:auto}
.sec{padding:clamp(56px,9vw,116px) 0;position:relative}
.sec + .sec{border-top:1px solid var(--rule-2)}

/* ====================================================== TYPOGRAPHY ==== */
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:700;line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{line-height:1.3;letter-spacing:0}
h1{font-size:var(--t-h1);font-stretch:112%}
h2{font-size:var(--t-h2);font-stretch:108%}
h3{font-size:var(--t-h3)}
p{margin:0}
.lede{font-size:var(--t-lead);color:var(--ink-2);max-width:var(--measure);line-height:1.55}

/* The instrument label: the small monospace caption that names a reading.
   Used everywhere a panel would be silk-screened with what it shows. */
.tag{
  font:500 var(--t-micro)/1 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:8px;
}
html[lang="ar"] .tag{font-family:var(--f-ar-body);letter-spacing:0;font-size:var(--t-cap)}
.tag::before{content:'';width:18px;height:1px;background:var(--rule);flex:none}

/* Figures line up in columns wherever they are compared. */
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* ======================================================== CONTROLS ==== */
.btn{
  --bg:transparent;--fg:var(--ink);--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:11px 20px;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);border-radius:2px;
  font:600 var(--t-sm)/1 var(--f-body);letter-spacing:.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{--bg:var(--amber);--fg:#1B1102;--bd:#A5630A;box-shadow:0 2px 0 #A5630A}
.btn-primary:hover{box-shadow:0 4px 0 #A5630A}
.btn-primary:active{box-shadow:0 1px 0 #A5630A}
.btn-dark{--bg:var(--petrol);--fg:#F2F7F6;--bd:var(--petrol)}
.btn-lg{min-height:52px;padding:15px 28px;font-size:var(--t-body)}

/* ============================================================== NAV ==== */
.top{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--sand) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.top .wrap{display:flex;align-items:center;gap:18px;height:var(--bar)}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:17px;letter-spacing:.01em;flex:none}
.brand .mark{width:26px;height:26px;color:var(--petrol);flex:none}
.brand .mark svg{width:100%;height:100%}

.nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.nav a{
  position:relative;padding:8px 11px;text-decoration:none;
  font:500 var(--t-sm)/1 var(--f-body);color:var(--ink-2);border-radius:2px;
}
.nav a:hover{color:var(--ink);background:rgba(15,26,28,.05)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
/* The current page is ticked, the way a reading is marked on a scale. */
.nav a[aria-current="page"]::after{
  content:'';position:absolute;left:11px;right:11px;bottom:1px;height:2px;background:var(--amber);
}
.nav-actions{display:flex;align-items:center;gap:8px;flex:none}
.lang{
  font:500 var(--t-cap)/1 var(--f-mono);letter-spacing:.06em;
  min-height:36px;padding:8px 11px;background:transparent;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:2px;cursor:pointer;
}
.lang:hover{color:var(--ink);border-color:var(--ink-3)}
.burger{display:none;width:40px;height:36px;padding:9px;background:transparent;border:1px solid var(--rule);border-radius:2px;cursor:pointer}
.burger span{display:block;height:1.5px;background:var(--ink);margin:3px 0;transition:transform .18s ease,opacity .18s ease}
.top.open .burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.top.open .burger span:nth-child(2){opacity:0}
.top.open .burger span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

@media (max-width:920px){
  .burger{display:block}
  .nav-actions{margin-inline-start:auto}
  .nav{
    position:absolute;top:var(--bar);inset-inline:0;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--paper-2);border-bottom:1px solid var(--rule);
    padding:6px var(--gut) 14px;
    display:none;
  }
  .top.open .nav{display:flex}
  .nav a{padding:13px 4px;border-bottom:1px solid var(--rule-2);font-size:var(--t-body)}
  .nav a[aria-current="page"]::after{left:4px;right:auto;width:16px;bottom:8px}
  .nav-actions .cta-nav{display:none}
}

/* =========================================================== PANELS ==== */
/* A panel is a plate on an instrument: hairline edge, registration ticks at
   the corners, no shadow. Depth comes from the tick marks, not a drop shadow. */
.panel{position:relative;background:var(--paper);border:1px solid var(--rule);padding:clamp(20px,3vw,30px)}
.panel--raised{background:var(--paper-2)}
.tick{position:relative}
.tick::before,.tick::after{
  content:'';position:absolute;width:9px;height:9px;pointer-events:none;
  border:1px solid var(--petrol);opacity:.5;
}
.tick::before{top:-1px;inset-inline-start:-1px;border-width:1px 0 0 1px}
.tick::after{bottom:-1px;inset-inline-end:-1px;border-width:0 1px 1px 0}

.grid{display:grid;gap:clamp(14px,2vw,20px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ============================================================ MOTION ==== */
/* Everything is visible at rest. These only add a short settle on first sight,
   never a state the reader can get stuck behind. */
.rise{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* =========================================================== FOOTER ==== */
.foot{background:var(--petrol);color:#DCE7E6;padding:clamp(40px,6vw,64px) 0 26px;position:relative;z-index:1}
.foot a{color:#DCE7E6;text-decoration:none;font-size:var(--t-sm);line-height:2.1;opacity:.82}
.foot a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.foot h4{font-size:var(--t-cap);font-family:var(--f-mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#7FA8A6;margin-bottom:8px}
html[lang="ar"] .foot h4{font-family:var(--f-ar-body);letter-spacing:0;font-size:var(--t-sm)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:28px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:22px}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-brand .brand{color:#F2F7F6}
.foot-brand .brand .mark{color:var(--amber)}
.foot-brand p{color:#9FBEBC;font-size:var(--t-sm);margin-top:10px;max-width:34ch}
.foot-col{display:flex;flex-direction:column;align-items:flex-start}
.foot-base{
  margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;
  font-size:var(--t-cap);color:#8FB3B1;
}
.draft{
  display:inline-block;margin-inline-start:6px;padding:1px 6px;
  font:500 10px/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.28);border-radius:2px;color:#9FBEBC;
}

/* ============================================================== HERO ==== */
.hero{padding:clamp(34px,6vw,74px) 0 clamp(44px,7vw,88px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,4vw,56px);align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:34px}}

.hero-copy h1{margin:16px 0 20px}
.hero-copy h1 span{display:block}
.h1-amber{color:var(--amber-ink)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* Three readings on a hairline rail, like a panel of gauges. */
.readout{display:grid;grid-template-columns:repeat(3,auto);gap:0 clamp(18px,3vw,38px);justify-content:start;
  margin:32px 0 0;padding-top:20px;border-top:1px solid var(--rule)}
.readout div{display:flex;flex-direction:column;gap:3px}
.readout dt{font-size:clamp(24px,3vw,34px);font-weight:600;line-height:1;color:var(--petrol)}
.readout dd{margin:0;font-size:var(--t-cap);color:var(--ink-3);max-width:15ch;line-height:1.35}
@media (max-width:560px){
  .readout{grid-template-columns:1fr 1fr;gap:18px 20px}
  .readout div:last-child{grid-column:1 / -1}
}

/* ------------------------------------------------------- the instrument -- */
.rig{margin:0}
.rig svg{width:100%;height:auto;overflow:visible}
.rig figcaption{margin-top:14px;justify-content:center}

.rig .body{fill:var(--paper-2);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.rig .glass{fill:#D5DDDA;stroke:var(--ink);stroke-width:1.4}
.rig .seam{fill:none;stroke:var(--rule);stroke-width:1.2}
.rig .wheel circle{fill:none;stroke:var(--ink);stroke-width:2}
.rig .wheel circle + circle{stroke:var(--ink-3);stroke-width:1.4}
.rig .ground{stroke:var(--rule);stroke-width:1.5;fill:none}
.rig .dim path{fill:none;stroke:var(--ink-3);stroke-width:1}
.rig .dim .fill{fill:var(--ink-3);stroke:none}
.rig .dim-t,.rig .cal text{font-family:var(--f-mono);font-weight:500;letter-spacing:.1em}
.rig .dim-t{font-size:10px;fill:var(--ink-3)}
.rig .cal text{font-size:11.5px;fill:var(--ink-2);letter-spacing:.06em}
html[lang="ar"] .rig .dim-t,html[lang="ar"] .rig .cal text{font-family:var(--f-ar-body);letter-spacing:0;font-size:12.5px}
.rig .cal path{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.rig .cal circle{fill:var(--amber);transform-box:fill-box;transform-origin:center}

/* The sweep passes; each callout answers as it reaches it. One 5s cycle, and
   the six delays are spaced across it so the order matches the drawing. */
@keyframes rig-sweep{from{transform:translateX(24px)}to{transform:translateX(744px)}}
@keyframes rig-ping{0%,5%{opacity:.28;transform:scale(1)}9%{opacity:1;transform:scale(1.75)}24%{opacity:.9;transform:scale(1)}100%{opacity:.28;transform:scale(1)}}
@keyframes rig-lab{0%,5%{opacity:.4}11%{opacity:1}38%{opacity:.88}100%{opacity:.4}}
.rig .scan{animation:rig-sweep 5s linear infinite}
.rig .cal circle{animation:rig-ping 5s linear infinite;animation-delay:var(--d)}
.rig .cal text{animation:rig-lab 5s linear infinite;animation-delay:var(--d)}

/* At rest the drawing must still be a finished drawing, not a dimmed one. */
@media (prefers-reduced-motion:reduce){
  .rig .scan{display:none}
  .rig .cal circle{opacity:1}
  .rig .cal text{opacity:1}
}

/* ========================================================= SECTIONS ==== */
.sec-head{max-width:72ch;margin-bottom:clamp(26px,4vw,44px)}
.sec-head h2{margin:14px 0 16px}
.band{background:var(--paper);border-block:1px solid var(--rule)}

/* --------------------------------------------------------- product cards -- */
.prod{display:flex;flex-direction:column;gap:11px;text-decoration:none;color:inherit;
  transition:transform .15s ease,border-color .15s ease,background .15s ease}
.prod:hover{transform:translateY(-3px);border-color:var(--petrol);background:var(--paper-2)}
.prod-n{font-size:var(--t-cap);color:var(--amber-ink);letter-spacing:.1em}
.prod h3{font-stretch:106%}
.prod p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.6}
.prod-go{margin-top:auto;padding-top:8px;font:600 var(--t-sm)/1 var(--f-body);color:var(--petrol);
  display:inline-flex;align-items:center;gap:7px}
.prod-go::after{content:'';width:15px;height:1.5px;background:currentColor;transition:width .15s ease}
.prod:hover .prod-go::after{width:24px}
html[dir="rtl"] .prod-go::after{transform:scaleX(-1)}
.prod.addon{background:transparent;border-style:dashed}
.prod.addon:hover{background:var(--paper)}

/* ---------------------------------------------------------------- the line -- */
/* Six stops on one rule. The numbering is real sequence, so it is numbered. */
.line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  border-top:2px solid var(--ink)}
.line li{position:relative;padding:26px 18px 4px 0;border-inline-end:1px solid var(--rule-2)}
.line li:last-child{border-inline-end:0}
.line li::before{content:'';position:absolute;top:-2px;inset-inline-start:0;width:9px;height:9px;
  background:var(--amber);transform:translateY(-50%) rotate(45deg)}
.line-n{display:block;font-size:var(--t-cap);color:var(--ink-3);letter-spacing:.1em;margin-bottom:8px}
.line h3{font-size:var(--t-h3);margin-bottom:7px}
.line p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.55;padding-inline-end:6px}
@media (max-width:1040px){.line{grid-template-columns:repeat(3,1fr)}
  .line li:nth-child(3){border-inline-end:0}
  .line li:nth-child(n+4){border-top:1px solid var(--rule-2);margin-top:18px;padding-top:26px}}
@media (max-width:680px){.line{grid-template-columns:1fr 1fr}
  .line li:nth-child(n){border-inline-end:1px solid var(--rule-2)}
  .line li:nth-child(2n){border-inline-end:0}
  .line li:nth-child(n+3){border-top:1px solid var(--rule-2);margin-top:16px;padding-top:24px}}
@media (max-width:430px){.line{grid-template-columns:1fr}
  .line li{border-inline-end:0}
  .line li:nth-child(n+2){border-top:1px solid var(--rule-2);margin-top:14px;padding-top:24px}}

/* ------------------------------------------------------------------- CTA -- */
.cta-sec{background:var(--petrol);color:#EAF2F1;border-top:1px solid var(--petrol)}
.cta-sec h2{color:#FFF}
.cta-sec .lede{color:#B9D2D0}
.cta-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.cta-inner .hero-cta{justify-content:center}
.cta-sec .btn:not(.btn-primary){--bd:#5E8C8A;--fg:#EAF2F1}
.cta-sec .btn:not(.btn-primary):hover{--bd:#EAF2F1}

/* ====================================================== INNER PAGES ==== */
.hero-sm{padding:clamp(30px,5vw,58px) 0 clamp(24px,4vw,44px);border-bottom:1px solid var(--rule-2)}
.hero-sm h1{margin:14px 0 18px}
.crumb{display:flex;align-items:center;gap:9px;font:500 var(--t-cap)/1 var(--f-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
html[lang="ar"] .crumb{font-family:var(--f-ar-body);letter-spacing:0;text-transform:none;font-size:var(--t-sm)}

/* A module that is honestly not finished says so at the top, in amber. */
.status{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;
  padding:6px 13px;background:#FBEFD9;border:1px solid #E3BE7A;border-radius:2px;
  font:600 var(--t-cap)/1.4 var(--f-body);color:var(--amber-ink)}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none;
  box-shadow:0 0 0 3px rgba(224,138,18,.22)}

/* ------------------------------------------------------------ tick lists -- */
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ticks li{position:relative;padding-inline-start:22px;font-size:var(--t-sm);line-height:1.55;color:var(--ink-2)}
/* A drawn check, not a bullet and not an emoji. */
.ticks li::before{
  content:'';position:absolute;inset-inline-start:0;top:.48em;
  width:9px;height:5px;border:1.6px solid var(--petrol);border-top:0;border-inline-end:0;
  transform:rotate(-45deg);
}
html[dir="rtl"] .ticks li::before{transform:rotate(-45deg) scaleX(-1)}
.ticks.plain li{padding-inline-start:0}
.ticks.plain li::before{display:none}
.ticks a{color:var(--petrol);font-weight:600;text-decoration:none}
.ticks a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------- feature groups -- */
.feats{gap:clamp(20px,3vw,34px)}
.feat h3{margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--ink);font-stretch:106%}
.feat-lede{font-size:var(--t-sm);color:var(--ink-3);margin-bottom:12px;line-height:1.55}

/* --------------------------------------------------------- product cards -- */
.pcard{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;
  transition:transform .15s ease,border-color .15s ease,background .15s ease}
.pcard:hover{transform:translateY(-3px);border-color:var(--petrol);background:var(--paper-2)}
.pcard-k{font-size:var(--t-cap);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pcard .lede{font-size:var(--t-body)}
.pcard.addon{border-style:dashed;background:transparent}
.pcard.addon:hover{background:var(--paper)}

/* ------------------------------------------------------------------ plans -- */
.plans{align-items:stretch}
.plan{display:flex;flex-direction:column;gap:12px}
.plan h2{font-size:var(--t-h3);margin-top:-2px}
.plan-price{display:flex;align-items:baseline;gap:7px;margin:4px 0 0}
.plan-n{font-size:clamp(38px,5vw,52px);font-weight:600;line-height:1;color:var(--petrol)}
.plan-cur{font:500 var(--t-cap)/1 var(--f-mono);letter-spacing:.1em;color:var(--ink-3)}
.plan-per{font-size:var(--t-sm);color:var(--ink-3)}
.plan-setup{font-size:var(--t-sm);color:var(--ink-3);padding-bottom:14px;border-bottom:1px solid var(--rule-2)}
.plan .ticks{margin-bottom:6px}
.plan .btn{margin-top:auto;width:100%}
.plan-lead{background:var(--paper-2);border-color:var(--petrol);border-width:2px}

/* ------------------------------------------------------------------ table -- */
.tablewrap{overflow-x:auto}
.rate{width:100%;border-collapse:collapse;min-width:420px;background:var(--paper-2);border:1px solid var(--rule)}
.rate caption{text-align:start;padding:0 0 10px}
.rate th,.rate td{padding:12px 16px;border-bottom:1px solid var(--rule-2);text-align:start;font-size:var(--t-sm)}
.rate thead th{font:500 var(--t-cap)/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:2px solid var(--ink);vertical-align:bottom}
html[lang="ar"] .rate thead th{font-family:var(--f-ar-body);letter-spacing:0;text-transform:none;font-size:var(--t-sm)}
.rate tbody th{font-weight:600;color:var(--ink)}
.rate tbody td{font-size:var(--t-body);color:var(--petrol);font-weight:600}
.rate td.dash{color:var(--ink-3);font-weight:400;font-size:var(--t-sm)}
.rate tbody tr:last-child th,.rate tbody tr:last-child td{border-bottom:0}
.fine{font-size:var(--t-cap);color:var(--ink-3);line-height:1.6;max-width:var(--measure);margin-top:12px}

/* ------------------------------------------------------------------- note -- */
.note{background:var(--paper-2);border:1px solid var(--rule);border-inline-start:3px solid var(--amber);padding:clamp(18px,3vw,26px)}
.note h3{font-size:var(--t-h3);margin-bottom:10px}
.note p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.65}

/* ----------------------------------------------------------------- banner -- */
.banner{display:flex;flex-direction:column;gap:5px;margin-top:18px;padding:14px 18px;
  background:#FBEFD9;border:1px solid #E3BE7A;font-size:var(--t-sm);line-height:1.6;color:#5E3A06}
.banner strong{font-weight:700}

/* ------------------------------------------------------------------ prose -- */
.prose{max-width:var(--measure)}
.prose p{margin-bottom:16px;color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}
.prose h2{font-size:var(--t-h3);margin:30px 0 12px;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose code{font:500 .9em var(--f-mono);background:var(--paper-2);border:1px solid var(--rule-2);padding:1px 5px}
.legal h2{padding-top:18px;border-top:1px solid var(--rule-2)}
.legal h2:first-child{padding-top:0;border-top:0}
.legal .ticks{margin:0 0 16px}

/* -------------------------------------------------------------- demo page -- */
.dem-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
@media (max-width:900px){.dem-grid{grid-template-columns:1fr}}
.dem-side{display:flex;flex-direction:column;gap:30px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:s}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.steps .num{font-size:var(--t-cap);color:var(--amber-ink);letter-spacing:.1em;padding-top:2px}
.steps p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.55}

/* ------------------------------------------------------------------- form -- */
.rq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:540px){.rq-grid{grid-template-columns:1fr}}
.rq-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.rq-grid .rq-field{margin-bottom:0}
.rq-field > span{font:600 var(--t-cap)/1.3 var(--f-body);color:var(--ink-2)}
.rq-field input,.rq-field select,.rq-field textarea{
  width:100%;min-height:44px;padding:11px 13px;
  background:var(--paper-2);color:var(--ink);
  border:1px solid var(--rule);border-radius:2px;
  font:400 var(--t-body)/1.4 var(--f-body);
}
.rq-field textarea{min-height:88px;resize:vertical}
.rq-field input:focus,.rq-field select:focus,.rq-field textarea:focus{
  outline:none;border-color:var(--petrol);box-shadow:0 0 0 3px rgba(10,75,78,.14)}
.rq-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.rq-msg{margin-top:12px;font-size:var(--t-sm);line-height:1.5}
.rq-msg.ok{color:var(--pass);font-weight:600}
.rq-msg.bad{color:var(--redline);font-weight:600}

/* ---------------------------------------------------------------- contact -- */
.way{display:flex;flex-direction:column;gap:7px;text-decoration:none;color:inherit;
  transition:transform .15s ease,border-color .15s ease,background .15s ease}
.way:hover{transform:translateY(-3px);border-color:var(--petrol);background:var(--paper-2)}
.way h3{font-size:var(--t-h3)}
.way p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.55}
.way-addr{font-weight:600;color:var(--petrol);font-size:var(--t-body) !important}
.way-lead{background:var(--paper-2);border-color:var(--petrol)}

/* ============================================ ARABIC IN LATIN-ONLY FACES ==== */
/* IBM Plex Mono has no Arabic letters. Anything set in it that can hold Arabic
   falls back to a stretched system face and looks broken — the language button
   showing "ع", the add-on card labels, the "draft" badge in the footer. Every
   mono-set class that can carry Arabic is listed here.
 *
 * .num is deliberately NOT in this list: it exists to line figures up in
 * columns, it only ever holds digits, and Western digits are what this product
 * uses in both languages. tests/the-front-door-is-paper.test.js enforces the
 * rule and knows about that exemption. */
html[lang="ar"] :is(.tag,.crumb,.lang,.pcard-k,.prod-n,.draft,.foot h4,
                    .rate thead th,.rig .dim-t,.rig .cal text,.line-n,.plan-cur,.steps .num){
  font-family:var(--f-ar-body);
  letter-spacing:0;
  text-transform:none;
}

/* ======================================================== PILOT/QUOTE ==== */
.pilot h3{font-size:var(--t-h3);margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.pilot .grid{align-items:start}
.pilot p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6}
.pilot .hero-cta{margin-top:18px}

/* Ready for real customer quotes. Deliberately unused until there are some —
   see the comment in site/pages/01-home.html. */
.quote{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
.quote blockquote{margin:0;font:600 var(--t-lead)/1.5 var(--f-body);color:var(--ink);text-wrap:pretty}
.quote blockquote::before{content:'';display:block;width:26px;height:2px;background:var(--amber);margin-bottom:14px}
.quote figcaption{display:flex;flex-direction:column;gap:2px;font-size:var(--t-cap);color:var(--ink-3)}
.quote figcaption strong{font-size:var(--t-sm);color:var(--ink);font-weight:600}

/* The allowance that comes with the plan: the line a buyer compares across the
   three cards, so it gets its own field rather than sitting in the tick list. */
.plan-inc{
  margin:0;padding:11px 13px;
  background:#FBEFD9;border:1px solid #E3BE7A;
  font-size:var(--t-sm);line-height:1.5;color:#5E3A06;
}
.plan-inc strong{display:block;font-weight:700;margin-bottom:2px}
.plan-inc .num{font-weight:700;font-size:var(--t-body)}
.rate td.free{color:var(--pass);font-weight:700}