/* ==========================================================================
   Krown — public landing (views/landing.ejs, views/landing_legal.ejs)
   Concept «Porcelain ledger»: a light, clinical-premium page — warm porcelain
   surfaces, ink type, wine brand + one gold accent, hairline rules and a faint chart
   grid. The product's thesis (profit per patient) is told like a clean ledger.
   No Bootstrap CSS on this page; icons = Bootstrap Icons font (local vendor).
   ========================================================================== */
:root {
  /* ===== RE-SKIN HERE — every colour / font on the landing derives from these tokens =====
     Skin = «نبيتي» wine + gold + ivory (Ahmed 2026-10-08, docs/BRAND.md). */
  --k-primary: #2A1745;          /* wine — primary buttons, dark plan card, phone CTA, number badges */
  --k-primary-2: #5B3FD6;        /* wine-2 — hover / pressed / secondary */
  --k-on-primary: #F6F4FB;       /* ivory text on wine */
  --k-accent: #9B82FF;           /* gold — highlights, badges, focus rings (never body text on white) */
  --k-accent-ink: #4A32B8;       /* gold as text on light backgrounds (AA on ivory and white) */
  --k-on-accent: #1C1A22;        /* text on a gold fill */
  --k-ivory: #F6F4FB;            /* page background */
  --k-paper: #FFFFFF;            /* cards */
  --k-ink: #1C1A22;              /* headings */
  --k-ink-2: #3D3640;            /* body text */
  --k-mute: #5C5560;             /* secondary text */
  --k-wa: #25D366;               /* WhatsApp brand colour — the only green on the page */
  /* fonts */
  --k-font-display: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --k-font-body: 'IBM Plex Sans Arabic', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --k-font-wordmark: 'Manrope', 'Segoe UI', system-ui, sans-serif;   /* the Latin word «Krown» and the K-R-O-W-N slogan */
  --k-wordmark-weight: 800;
  --k-wordmark-case: none;
  --k-wordmark-spacing: -.02em;

  /* ----- derived (normally no need to touch) ----- */
  --k-sand: color-mix(in srgb, var(--k-ivory) 94%, var(--k-ink));
  --k-line: color-mix(in srgb, var(--k-ivory) 90%, var(--k-ink));
  --k-line-2: color-mix(in srgb, var(--k-ivory) 83%, var(--k-ink));
  --k-accent-wash: color-mix(in srgb, var(--k-accent) 9%, #fff);
  --k-accent-line: color-mix(in srgb, var(--k-accent) 26%, #fff);
  --k-supply: color-mix(in srgb, var(--k-ivory) 40%, #A8935B);   /* «مستلزمات» slice */
  --k-lab: color-mix(in srgb, var(--k-ink) 50%, #fff);           /* «معمل» slice */
  --k-grid: color-mix(in srgb, var(--k-ink) 6%, transparent);    /* faint chart grid */
  --k-device: color-mix(in srgb, var(--k-ink) 92%, #000);        /* phone bezel */
  --k-device-edge: color-mix(in srgb, var(--k-ink) 75%, #fff);
  --k-screen: color-mix(in srgb, var(--k-ivory) 70%, #F3ECE2);   /* phone screen bg */
  --k-screen-line: color-mix(in srgb, var(--k-ink) 10%, #fff);
  --k-soft: color-mix(in srgb, var(--k-ink) 5%, #fff);           /* neutral icon chips */
  --k-off: color-mix(in srgb, var(--k-ink) 35%, #fff);           /* features not in a plan */
  --k-nav-bg: color-mix(in srgb, var(--k-ivory) 86%, transparent);
  --k-shadow: 0 1px 0 color-mix(in srgb, var(--k-ink) 4%, transparent), 0 12px 32px -18px color-mix(in srgb, var(--k-ink) 22%, transparent);
  --k-shadow-lg: 0 2px 0 color-mix(in srgb, var(--k-ink) 3%, transparent), 0 40px 80px -40px color-mix(in srgb, var(--k-ink) 45%, transparent);
  /* on the dark (primary) plan card */
  --k-hl-text: color-mix(in srgb, var(--k-on-primary) 78%, var(--k-primary));
  --k-hl-mute: color-mix(in srgb, var(--k-on-primary) 58%, var(--k-primary));
  --k-hl-line: color-mix(in srgb, var(--k-on-primary) 14%, var(--k-primary));
  --k-hl-icon: color-mix(in srgb, var(--k-accent) 55%, #fff);
  --k-hl-off: color-mix(in srgb, var(--k-on-primary) 32%, var(--k-primary));

  --k-r: 18px;
  --k-r-sm: 12px;
  --k-wrap: 1180px;
  --k-gutter: 16px;
  color-scheme: light;
}
.kw { font-family: var(--k-font-wordmark); font-weight: var(--k-wordmark-weight); text-transform: var(--k-wordmark-case); letter-spacing: var(--k-wordmark-spacing); direction: ltr; unicode-bidi: isolate; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--k-ivory); color: var(--k-ink-2); font-family: var(--k-font-body); font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--k-accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--k-font-display); color: var(--k-ink); margin: 0; line-height: 1.3; letter-spacing: -.005em; }
p { margin: 0; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: calc(var(--k-wrap) + var(--k-gutter) * 2); margin-inline: auto; padding-inline: var(--k-gutter); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--k-accent); outline-offset: 2px; border-radius: 6px; }
@media (min-width: 768px) { :root { --k-gutter: 28px; } }

/* ---------- buttons ---------- */
.kb { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .7rem 1.35rem; border-radius: 999px; border: 1px solid transparent; font-family: var(--k-font-body); font-weight: 700; font-size: 1rem; line-height: 1.2; cursor: pointer; text-decoration: none !important; transition: background-color .2s, border-color .2s, color .2s, transform .2s; white-space: nowrap; }
.kb i { font-size: 1.05em; }
.kb-ink { background: var(--k-primary); color: var(--k-on-primary); }
.kb-ink:hover { background: var(--k-primary-2); color: var(--k-on-primary); }
.kb-ink .bi-arrow-left { transition: transform .2s; }
.kb-ink:hover .bi-arrow-left { transform: translateX(-3px); }
.kb-line { background: transparent; color: var(--k-ink); border-color: var(--k-line-2); }
.kb-line:hover { border-color: var(--k-ink); color: var(--k-ink); }
.kb-paper { background: var(--k-paper); color: var(--k-ink); border-color: var(--k-line); }
.kb-paper:hover { border-color: var(--k-ink); }
.kb-wa { background: var(--k-wa); color: #0B2A17; }      /* WhatsApp brand colour — the only green on the page */
.kb-wa:hover { background: color-mix(in srgb, var(--k-wa) 88%, #000); color: #0B2A17; }
.kb-sm { min-height: 40px; padding: .45rem 1rem; font-size: .92rem; }
.kb-block { width: 100%; }

/* ---------- top navigation ---------- */
.kn { position: sticky; top: 0; z-index: 50; background: var(--k-nav-bg); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.kn.is-scrolled { border-bottom-color: var(--k-line); }
.kn .wrap { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.kn-logo img { height: 30px; width: auto; }
.kn-links { display: none; gap: .25rem; margin: 0 auto; padding: 0; list-style: none; }
.kn-links a { display: block; padding: .45rem .8rem; border-radius: 999px; color: var(--k-ink-2); font-weight: 600; font-size: .95rem; }
.kn-links a:hover { background: var(--k-sand); text-decoration: none; color: var(--k-ink); }
.kn-act { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
.kn-login { color: var(--k-ink); font-weight: 700; padding: .45rem .6rem; }
.kn-cta { display: none; }
@media (min-width: 992px) { .kn-links { display: flex; } .kn-act { margin-inline-start: 0; } }
@media (min-width: 768px) { .kn-cta { display: inline-flex; } }

/* ---------- flash ---------- */
.kflash { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--k-r-sm); border: 1px solid var(--k-line-2); background: var(--k-paper); color: var(--k-ink); font-weight: 600; display: flex; gap: .6rem; align-items: flex-start; }
.kflash i { color: var(--k-accent); margin-top: .2rem; }

/* ---------- hero ---------- */
.kh-hero { position: relative; padding: 28px 0 40px; overflow: hidden; }
.kh-hero::before { /* faint chart grid, fading out — the «ledger paper» */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--k-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--k-grid) 1px, transparent 1px);
  background-size: 36px 36px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 20%, transparent 75%);
}
.kh-grid { position: relative; display: grid; gap: 36px; align-items: center; }
.kh-eyebrow { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .85rem .3rem .4rem; border-radius: 999px; background: var(--k-paper); border: 1px solid var(--k-line); color: var(--k-ink); font-weight: 600; font-size: .88rem;  }
.kh-eyebrow img { width: 24px; height: 24px; }
.kh-title { margin-top: 18px; font-size: clamp(2.35rem, 8.6vw, 4.35rem); font-weight: 800; line-height: 1.18; letter-spacing: -.015em; }
.kh-title .hl { position: relative; white-space: nowrap; color: var(--k-ink); background: linear-gradient(to top, var(--k-accent-line) 0 .2em, transparent .2em) no-repeat; }
.kh-title .dot { color: var(--k-accent); }
.kw-k { color: var(--k-accent-ink); }
.kw-k-on-dark, .kfoot .kw-k { color: var(--k-accent); }
.kh-sub-en { margin-top: 8px; font-family: var(--k-font-wordmark); font-weight: 500; font-size: 1.02rem; color: var(--k-mute); direction: ltr; unicode-bidi: isolate; }
.kh-sub { margin-top: 18px; font-size: clamp(1.05rem, 2.6vw, 1.22rem); color: var(--k-ink-2); max-width: 34em; }
.kh-cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.kh-cta .kb-ink { min-height: 54px; padding-inline: 1.6rem; font-size: 1.05rem; }
.kh-sso { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; color: var(--k-mute); padding: .4rem .2rem; }
.kh-sso img { width: 18px; height: 18px; }
.kh-sso b { color: var(--k-ink); }
.kh-sso:hover { color: var(--k-ink); }
.kh-trust { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .92rem; color: var(--k-ink-2); }
.kh-trust li { display: inline-flex; align-items: center; gap: .4rem; }
.kh-trust i { color: var(--k-accent); font-size: 1.05rem; }
.kh-visual { position: relative; display: flex; justify-content: center; padding: 10px 0 0; }
.kh-disc { position: absolute; width: min(520px, 112%); aspect-ratio: 1; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 50% 45%, var(--k-paper) 0 45%, transparent 70%); border: 1px solid var(--k-line); }
.kh-note { margin-top: 10px; text-align: center; font-size: .78rem; color: var(--k-mute); }
@media (min-width: 992px) {
  .kh-hero { padding: 56px 0 72px; }
  .kh-grid { grid-template-columns: 1.08fr .92fr; gap: 48px; }
}

/* ---------- phone frame (the product, rendered in HTML/CSS) ---------- */
.kp { position: relative; width: 300px; max-width: 86vw; border-radius: 46px; padding: 11px; background: var(--k-device); box-shadow: var(--k-shadow-lg), inset 0 0 0 1.5px var(--k-device-edge); }
.kp::before { content: ''; position: absolute; top: 20px; left: 50%; width: 86px; height: 24px; border-radius: 14px; background: var(--k-device); transform: translateX(-50%); z-index: 3; }
.kp-screen { position: relative; border-radius: 36px; overflow: hidden; background: var(--k-screen); font-size: 13px; line-height: 1.5; color: var(--k-ink); }
.kp-status { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 6px; font-size: 11.5px; font-weight: 700; direction: ltr; }
.kp-status span:last-child { display: inline-flex; gap: 4px; }
.kp-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 8px; }
.kp-bar b { font-family: var(--k-font-display); font-size: 15px; }
.kp-bar .kp-x { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--k-paper); border: 1px solid var(--k-screen-line); font-size: 13px; color: var(--k-mute); }
.kp-step { font-size: 11.5px; font-weight: 700; color: var(--k-accent-ink); background: var(--k-accent-wash); padding: 2px 9px; border-radius: 999px; }
.kp-prog { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 0 16px; }
.kp-prog i { height: 4px; border-radius: 4px; background: var(--k-screen-line); }
.kp-prog i.on { background: var(--k-accent); }
.kp-body { padding: 14px 14px 16px; }
.kp-pt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: var(--k-paper); border: 1px solid var(--k-screen-line); border-radius: 14px; }
.kp-av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--k-primary); color: var(--k-on-primary); font-family: var(--k-font-display); font-weight: 700; font-size: 14px; flex: 0 0 auto; }
.kp-pt b { display: block; font-size: 13px; }
.kp-pt small { display: block; color: var(--k-mute); font-size: 11px; }
.kp-q { margin: 14px 2px 10px; font-family: var(--k-font-display); font-weight: 800; font-size: 19px; line-height: 1.35; }
.kp-ledger { background: var(--k-paper); border: 1px solid var(--k-screen-line); border-radius: 16px; overflow: hidden; }
.kp-row { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-bottom: 1px dashed var(--k-screen-line); }
.kp-row:last-child { border-bottom: 0; }
.kp-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; background: var(--k-soft); color: var(--k-ink-2); font-size: 13px; }
.kp-l { flex: 1; min-width: 0; font-weight: 600; font-size: 12.5px; }
.kp-l small { display: block; color: var(--k-mute); font-weight: 500; font-size: 10.5px; }
.kp-v { font-weight: 700; font-size: 13px; direction: ltr; white-space: nowrap; }
.kp-v small { font-size: 10px; color: var(--k-mute); font-weight: 600; }
.kp-net { background: var(--k-accent-wash); }
.kp-net .kp-ic { background: var(--k-accent); color: var(--k-on-accent); }
.kp-net .kp-l { color: var(--k-ink); }
.kp-net .kp-v { font-family: var(--k-font-display); font-size: 17px; color: var(--k-accent-ink); }
.kp-stack { display: flex; height: 8px; border-radius: 8px; overflow: hidden; margin: 12px 2px 6px; background: var(--k-screen-line); }
.kp-stack span { display: block; height: 100%; }
.kp-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10.5px; color: var(--k-mute); padding: 0 2px; }
.kp-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-inline-end: 4px; vertical-align: middle; }
.kp-next { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 14px; background: var(--k-primary); color: var(--k-on-primary); font-weight: 700; font-size: 13.5px; }
.kp-home { width: 110px; height: 4px; border-radius: 4px; background: var(--k-line-2); margin: 2px auto 8px; }
.c-sup { background: var(--k-supply); } .c-lab { background: var(--k-lab); } .c-net { background: var(--k-accent); }

/* floating receipt cards around the phone (desktop) */
.kf { position: absolute; z-index: 4; display: none; width: 210px; padding: 12px 14px; background: var(--k-paper); border: 1px solid var(--k-line); border-radius: 16px; box-shadow: var(--k-shadow); font-size: 12.5px; color: var(--k-ink-2); }
.kf-h { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--k-ink); font-size: 13px; margin-bottom: 6px; }
.kf-h i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--k-accent-wash); color: var(--k-accent-ink); }
.kf-r { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px dashed var(--k-line); }
.kf-r:first-of-type { border-top: 0; }
.kf-r b { direction: ltr; color: var(--k-ink); }
.kf-a { top: 14%; inset-inline-end: 0; }
.kf-b { bottom: 18%; inset-inline-end: 24px; }
@media (min-width: 1100px) {
  .kf { display: block; }
  .kh-visual { justify-content: flex-start; padding-inline-start: 10px; }
  .kh-disc { left: auto; right: 160px; transform: translate(50%, -50%); }
}

/* ---------- facts strip (true numbers only) ---------- */
.kfacts { border-block: 1px solid var(--k-line); background: var(--k-paper); }
.kfacts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.kfacts li { padding: 18px 14px; border-inline-start: 1px solid var(--k-line); border-top: 1px solid var(--k-line); }
.kfacts li:nth-child(-n+2) { border-top: 0; }
.kfacts li:nth-child(odd) { border-inline-start: 0; }
.kfacts b { display: block; font-family: var(--k-font-display); font-weight: 800; font-size: clamp(1.45rem, 5vw, 2rem); color: var(--k-ink); line-height: 1.25; direction: ltr; unicode-bidi: isolate; text-align: right; }
.kfacts b.ar { direction: rtl; }
.kfacts li > span { display: block; font-size: .88rem; color: var(--k-mute); margin-top: 2px; }
@media (min-width: 768px) {
  .kfacts ul { grid-template-columns: repeat(4, 1fr); }
  .kfacts li { padding: 26px 24px; border-top: 0; }
  .kfacts li:nth-child(odd) { border-inline-start: 1px solid var(--k-line); }
  .kfacts li:first-child { border-inline-start: 0; }
}

/* ---------- sections + the designed section header (icon tile + title + one line) ---------- */
.ks { padding: 64px 0; }
.ks-paper { background: var(--k-paper); border-block: 1px solid var(--k-line); }
.ks-sand { background: var(--k-sand); }
.ksh { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding-top: 28px; margin-bottom: 34px; border-top: 1px solid var(--k-line-2); }
.ksh::before { content: ''; position: absolute; top: -1px; inset-inline-start: 0; width: 72px; height: 3px; border-radius: 0 0 3px 3px; background: var(--k-accent); }
.ksh-tile { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--k-paper); border: 1px solid var(--k-line); color: var(--k-accent-ink); font-size: 1.45rem;  }
.ks-paper .ksh-tile { background: var(--k-ivory); }
.ksh-idx { position: absolute; top: 8px; inset-inline-end: 0; font-size: .74rem; font-weight: 700; letter-spacing: .1em; color: var(--k-mute); direction: ltr; line-height: 1; }
.ksh h2 { font-size: clamp(1.55rem, 5.2vw, 2.35rem); font-weight: 800; }
.ksh p { margin-top: 6px; color: var(--k-mute); font-size: clamp(.98rem, 2.4vw, 1.08rem); max-width: 46em; }
@media (min-width: 992px) { .ks { padding: 96px 0; } .ksh { grid-template-columns: auto 1fr; gap: 22px; margin-bottom: 48px; } .ksh-tile { width: 60px; height: 60px; font-size: 1.6rem; border-radius: 17px; } }

/* ---------- 1 · the 8-step visit flow ---------- */
.kflow { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 12px; counter-reset: s; }
.kflow::before { /* the spine (phone: vertical, at the inline start) */ content: ''; position: absolute; top: 18px; bottom: 18px; inset-inline-start: 19px; width: 2px; background: repeating-linear-gradient(to bottom, var(--k-line-2) 0 6px, transparent 6px 11px); }
.kflow li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.kflow-n { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--k-paper); border: 1.5px solid var(--k-line-2); font-family: var(--k-font-display); font-weight: 700; color: var(--k-ink); font-size: .98rem; }
.kflow-c { background: var(--k-paper); border: 1px solid var(--k-line); border-radius: 16px; padding: 12px 14px; display: grid; grid-template-columns: 38px 1fr; gap: 4px 12px; align-items: center; }
.kflow-c > i { grid-row: span 2; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--k-ivory); color: var(--k-ink); font-size: 1.1rem; border: 1px solid var(--k-line); }
.kflow-c b { font-family: var(--k-font-display); color: var(--k-ink); font-size: 1.02rem; font-weight: 700; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.kflow-c em { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--k-mute); border: 1px solid var(--k-line); border-radius: 999px; padding: 0 .5rem; line-height: 1.6; }
.kflow-c span { color: var(--k-mute); font-size: .9rem; line-height: 1.5; }
.kflow li.is-key .kflow-n { background: var(--k-accent); border-color: var(--k-accent); color: var(--k-on-accent); }
.kflow li.is-key .kflow-c { border-color: var(--k-accent-line); background: var(--k-accent-wash); }
.kflow li.is-key .kflow-c > i { background: var(--k-accent); border-color: var(--k-accent); color: var(--k-on-accent); }
.kflow-foot { margin-top: 22px; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: var(--k-ink-2); font-size: .95rem; }
.kflow-foot span { display: inline-flex; gap: .45rem; align-items: center; }
.kflow-foot i { color: var(--k-accent); }
@media (min-width: 992px) {
  .kflow { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
  .kflow::before { top: 19px; bottom: auto; inset-inline: 6% 6%; width: auto; height: 2px; background: repeating-linear-gradient(to left, var(--k-line-2) 0 6px, transparent 6px 11px); }
  .kflow li { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 14px; justify-items: center; }
  .kflow-c { width: 100%; height: 100%; grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 16px 10px 14px; gap: 6px; align-content: start; }
  .kflow-c > i { grid-row: auto; width: 44px; height: 44px; font-size: 1.2rem; border-radius: 13px; margin-bottom: 4px; }
  .kflow-c b { justify-content: center; font-size: .98rem; }
  .kflow-c span { font-size: .84rem; }
}

/* ---------- 2 · stock + patient cost split ---------- */
.ksplit { display: grid; gap: 18px; }
@media (min-width: 992px) { .ksplit { grid-template-columns: 1fr 1fr; gap: 24px; } }
.kcard { background: var(--k-paper); border: 1px solid var(--k-line); border-radius: var(--k-r); box-shadow: var(--k-shadow); padding: 22px; }
.kcard-h { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin-bottom: 16px; }
.kcard-h > i { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--k-accent-wash); color: var(--k-accent-ink); font-size: 1.25rem; }
.kcard-h h3 { font-size: 1.22rem; font-weight: 700; }
.kcard-h p { color: var(--k-mute); font-size: .95rem; margin-top: 2px; }
.kpts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.kpts li { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; }
.kpts i { color: var(--k-accent); margin-top: .25rem; }
.kmock { border: 1px solid var(--k-line); border-radius: 14px; background: var(--k-ivory); padding: 12px; font-size: .9rem; }
.kmock-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; color: var(--k-ink); padding: 2px 4px 10px; }
.kmock-h small { font-weight: 600; color: var(--k-mute); font-size: .78rem; }
.kstock { display: grid; gap: 6px; }
.kstock-r { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; background: var(--k-paper); border: 1px solid var(--k-line); border-radius: 11px; padding: 9px 11px; }
.kstock-r b { color: var(--k-ink); font-weight: 600; font-size: .9rem; }
.kstock-r .q { font-weight: 700; color: var(--k-ink); direction: ltr; text-align: end; font-size: .9rem; }
.kstock-r .q small { color: var(--k-mute); font-weight: 600; }
.kstock-bar { grid-column: 1 / -1; height: 5px; border-radius: 5px; background: var(--k-sand); overflow: hidden; }
.kstock-bar span { display: block; height: 100%; background: var(--k-primary); border-radius: 5px; }
.kstock-r.low .kstock-bar span { background: var(--k-accent); }
.ktag { direction: ltr; display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 0 .5rem; line-height: 1.7; vertical-align: middle; margin-inline-start: .35rem; }
.ktag-out { color: var(--k-accent-ink); background: var(--k-accent-wash); }
.ktag-low { direction: rtl; color: var(--k-ink); border: 1px solid var(--k-line-2); }
.kkpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.kkpi div { background: var(--k-paper); border: 1px solid var(--k-line); border-radius: 11px; padding: 8px 10px; }
.kkpi span { display: block; font-size: .74rem; color: var(--k-mute); font-weight: 600; }
.kkpi b { display: block; font-family: var(--k-font-display); color: var(--k-ink); font-size: clamp(.98rem, 3.6vw, 1.15rem); direction: ltr; text-align: end; }
.kkpi .net { background: var(--k-accent-wash); border-color: var(--k-accent-line); }
.kkpi .net b { color: var(--k-accent-ink); }
.kvis { width: 100%; border-collapse: collapse; background: var(--k-paper); border: 1px solid var(--k-line); border-radius: 11px; overflow: hidden; font-size: .84rem; }
.kvis th, .kvis td { padding: 7px 8px; text-align: start; border-bottom: 1px solid var(--k-line); }
.kvis th { font-size: .74rem; color: var(--k-mute); font-weight: 600; background: var(--k-ivory); }
.kvis td.m { direction: ltr; text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kvis th.m { text-align: end; }
.kvis tr:last-child td { border-bottom: 0; }
.kvis td.n { font-weight: 700; color: var(--k-accent-ink); }
.kvis small { color: var(--k-mute); display: block; font-size: .72rem; }
.kmock-note { text-align: center; font-size: .74rem; color: var(--k-mute); margin-top: 8px; }
@media (max-width: 420px) { .kvis .hide-xs { display: none; } }

/* ---------- 3 · features ---------- */
.kfeat { display: grid; gap: 12px; grid-template-columns: 1fr; }
.kfeat article { display: grid; grid-template-columns: 46px 1fr; gap: 4px 14px; align-items: start; background: var(--k-paper); border: 1px solid var(--k-line); border-radius: 16px; padding: 16px; transition: border-color .2s, transform .2s; }
.kfeat article:hover { border-color: var(--k-line-2); transform: translateY(-2px); }
.kfeat .fi { grid-row: span 2; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--k-ivory); border: 1px solid var(--k-line); color: var(--k-accent-ink); font-size: 1.25rem; }
.kfeat h3 { font-size: 1.04rem; font-weight: 700; }
.kfeat p { color: var(--k-mute); font-size: .92rem; line-height: 1.65; }
@media (min-width: 640px) { .kfeat { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .kfeat { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .kfeat article { grid-template-columns: 1fr; padding: 20px 18px; gap: 10px; align-content: start; }
  .kfeat .fi { grid-row: auto; margin-bottom: 4px; }
}

/* ---------- 4 · onboarding ---------- */
.kon { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.kon li { position: relative; background: var(--k-paper); border: 1px solid var(--k-line); border-radius: var(--k-r); padding: 22px 22px 20px; overflow: hidden; }
.kon .bign { position: absolute; inset-inline-end: 18px; top: 4px; font-family: var(--k-font-display); font-weight: 800; font-size: 5rem; line-height: 1; color: var(--k-sand); pointer-events: none; }
.kon .oi { position: relative; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--k-primary); color: var(--k-on-primary); font-size: 1.25rem; margin-bottom: 14px; }
.kon h3 { position: relative; font-size: 1.18rem; font-weight: 700; }
.kon p { position: relative; color: var(--k-mute); margin-top: 4px; font-size: .95rem; }
.kon-cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
@media (min-width: 768px) { .kon { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

/* ---------- 5 · pricing ---------- */
.kcycle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--k-paper); border: 1px solid var(--k-line); margin-bottom: 26px; }
.kcycle button { border: 0; background: transparent; font-family: var(--k-font-body); font-weight: 700; font-size: .95rem; color: var(--k-ink-2); min-height: 42px; padding: .4rem 1.2rem; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; }
.kcycle button.on { background: var(--k-primary); color: var(--k-on-primary); }
.kcycle .save { font-size: .74rem; font-weight: 700; padding: 0 .5rem; border-radius: 999px; background: var(--k-accent-wash); color: var(--k-accent-ink); line-height: 1.8; }
.kplans { display: grid; gap: 16px; align-items: stretch; }
@media (max-width: 899.98px) { .kplan.hl { order: -1; } .kplan li.off { display: none; } .kplan-desc { min-height: 0; } }
@media (min-width: 900px) { .kplans { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.kplan { position: relative; display: flex; flex-direction: column; background: var(--k-paper); border: 1px solid var(--k-line); border-radius: 22px; padding: 26px 22px 22px; }
.kplan h3 { font-size: 1.3rem; font-weight: 800; }
.kplan-desc { color: var(--k-mute); font-size: .92rem; margin-top: 4px; min-height: 3em; }
.kplan-price { margin-top: 16px; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.kplan-price .v { font-family: var(--k-font-display); font-weight: 800; font-size: 2.6rem; line-height: 1.1; color: var(--k-ink); direction: ltr; }
.kplan-price .u { color: var(--k-mute); font-weight: 600; font-size: .92rem; }
.kplan-alt { font-size: .86rem; color: var(--k-mute); margin-top: 2px; min-height: 1.6em; }
.kplan-alt.save { color: var(--k-accent-ink); font-weight: 700; }
.kplan ul { list-style: none; margin: 18px 0 22px; padding: 16px 0 0; border-top: 1px dashed var(--k-line-2); display: grid; gap: 7px; font-size: .92rem; flex: 1; }
.kplan li { display: flex; gap: .5rem; align-items: flex-start; }
.kplan li i { color: var(--k-accent); margin-top: .22rem; }
.kplan li.lim i { color: var(--k-ink); }
.kplan li.off { color: var(--k-off); }
.kplan li.off i { color: var(--k-line-2); }
.kplan.hl { background: var(--k-primary); border-color: var(--k-primary); color: var(--k-hl-text); box-shadow: var(--k-shadow-lg); }
.kplan.hl h3, .kplan.hl .kplan-price .v { color: var(--k-on-primary); }
.kplan.hl .kplan-desc, .kplan.hl .kplan-price .u, .kplan.hl .kplan-alt { color: var(--k-hl-mute); }
.kplan.hl .kplan-alt.save { color: var(--k-on-primary); }
.kplan.hl ul { border-top-color: var(--k-hl-line); }
.kplan.hl li i, .kplan.hl li.lim i { color: var(--k-hl-icon); }
.kplan.hl li.off { color: var(--k-hl-off); }
.kplan.hl li.off i { color: var(--k-hl-line); }
.kplan.hl .kb-ink { background: var(--k-accent); color: var(--k-on-accent); }
.kplan.hl .kb-ink:hover { background: var(--k-accent-ink); color: var(--k-on-accent); }
.kplan-badge { position: absolute; top: -13px; inset-inline-start: 22px; background: var(--k-accent); color: var(--k-on-accent); font-weight: 700; font-size: .8rem; padding: .2rem .8rem; border-radius: 999px; }
.klaunch { display: inline-flex; align-items: center; gap: .35rem; margin: 6px 0 2px; background: var(--k-accent); color: var(--k-on-accent); font-weight: 800; font-size: .85rem; padding: .25rem .8rem; border-radius: 999px; }
.kplan-launch { display: inline-block; margin-bottom: 6px; font-size: .74rem; font-weight: 700; color: var(--k-accent-ink); border: 1px solid currentColor; border-radius: 999px; padding: .1rem .6rem; }
.kpartner a.kpartner-ext { margin-inline-start: .35rem; font-weight: 700; }
.kprice-note { margin-top: 16px; color: var(--k-mute); font-size: .88rem; display: flex; gap: .45rem; align-items: flex-start; }
.kpartner { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: 12px 16px; border: 1px dashed var(--k-line-2); border-radius: 14px; font-size: .92rem; color: var(--k-ink-2); background: var(--k-paper); }
.kpartner img { width: 20px; height: 20px; }
.kpartner img.kw-logo { width: auto; height: 18px; vertical-align: -3px; margin: 0 .1em; }  /* v5 origami lockup replaces the old styled-text «Krown» */
.kpartner a { font-weight: 700; margin-inline-start: auto; }

/* ---------- 6 · FAQ ---------- */
.kfaq { display: grid; gap: 10px; }
@media (min-width: 992px) { .kfaq { grid-template-columns: 1fr 1fr; align-items: start; } }
.kfaq details { background: var(--k-paper); border: 1px solid var(--k-line); border-radius: 16px; }
.kfaq details[open] { border-color: var(--k-line-2); }
.kfaq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-weight: 700; color: var(--k-ink); font-size: 1.02rem; min-height: 56px; }
.kfaq summary::-webkit-details-marker { display: none; }
.kfaq summary .qi { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--k-ivory); border: 1px solid var(--k-line); color: var(--k-accent-ink); flex: 0 0 auto; }
.kfaq summary .chev { margin-inline-start: auto; transition: transform .2s; color: var(--k-mute); }
.kfaq details[open] .chev { transform: rotate(180deg); }
.kfaq .a { padding: 0 18px 18px 18px; padding-inline-start: 62px; color: var(--k-ink-2); font-size: .97rem; }

/* ---------- final CTA ---------- */
.kend { position: relative; overflow: hidden; border-radius: 28px; background: var(--k-paper); border: 1px solid var(--k-line); padding: 36px 22px; display: grid; gap: 22px; align-items: center; }
.kend::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--k-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--k-grid) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(to left, #000, transparent 70%); mask-image: linear-gradient(to left, #000, transparent 70%); }
.kend > * { position: relative; }
.kend-mark { width: 56px; height: 56px; }
.kend h2 { font-size: clamp(1.7rem, 5.6vw, 2.6rem); font-weight: 800; margin-top: 12px; }
.kend p { color: var(--k-mute); margin-top: 8px; font-size: 1.04rem; max-width: 36em; }
.kend-act { display: flex; flex-wrap: wrap; gap: .7rem; }
@media (min-width: 992px) { .kend { grid-template-columns: 1.3fr 1fr; padding: 56px; } .kend-act { justify-content: flex-end; } }
@media (max-width: 575px) { .kend-act .kb { width: 100%; } }

/* ---------- footer ---------- */
.kfoot { margin-top: 0; background: var(--k-sand); border-top: 1px solid var(--k-line-2); padding: 44px 0 28px; font-size: .94rem; }
.kfoot-grid { display: grid; gap: 28px; }
.kfoot-logo img { height: 30px; width: auto; }
.kfoot-tag { margin-top: 10px; color: var(--k-ink-2); font-weight: 600; }
.kfoot-tag-en { margin-top: 4px; font-family: var(--k-font-wordmark); font-weight: 500; color: var(--k-mute); direction: ltr; unicode-bidi: isolate; text-align: start; }
.kh-sub-en b, .kfoot-tag-en b { font-weight: 800; color: var(--k-accent-ink); }
.kfoot-name { margin-top: 10px; font-size: .86rem; color: var(--k-mute); max-width: 30em; }
.kfoot h4 { font-family: var(--k-font-body); font-size: .82rem; font-weight: 700; color: var(--k-mute); margin-bottom: 10px; letter-spacing: .02em; }
.kfoot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kfoot a { color: var(--k-ink); }
.kfoot a i { color: var(--k-mute); margin-inline-end: .35rem; }
.kfoot-bottom { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--k-line-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; color: var(--k-mute); font-size: .85rem; }
.kfoot-bottom a { color: var(--k-mute); }
@media (min-width: 768px) { .kfoot-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

/* ---------- phone sticky CTA bar + desktop WhatsApp button ---------- */
.kbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: flex; gap: 8px; align-items: center; padding: 10px var(--k-gutter) calc(10px + var(--dx-sab, env(safe-area-inset-bottom, 0px))); background: color-mix(in srgb, var(--k-paper) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--k-line); transform: translateY(110%); transition: transform .25s ease; }
.kbar.is-on { transform: none; }
.kbar .kb-ink { flex: 1; min-height: 50px; }
.kbar .kb-app { flex: 0 0 auto; min-height: 50px; padding-inline: .9rem; }
.kbar .kb-app[hidden] { display: none; }
body.has-kbar { padding-bottom: 76px; }
@media (min-width: 768px) { .kbar { display: none; } body.has-kbar { padding-bottom: 0; } }
.kwa { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 55; width: 54px; height: 54px; border-radius: 50%; display: none; place-items: center; background: var(--k-wa); color: #fff; font-size: 1.6rem; box-shadow: var(--k-shadow); }
.kwa:hover { color: #fff; text-decoration: none; }
@media (min-width: 768px) { .kwa { display: grid; } }

/* ---------- legal pages ---------- */
.klegal { max-width: 780px; padding: 40px 0 20px; }
.klegal h1 { font-size: clamp(1.8rem, 6vw, 2.5rem); font-weight: 800; }
.klegal .upd { color: var(--k-mute); font-size: .9rem; margin-top: 6px; }
.klegal h2 { font-size: 1.2rem; font-weight: 700; margin: 28px 0 8px; }
.klegal p, .klegal li { color: var(--k-ink-2); }
.klegal ul { padding-inline-start: 1.2rem; display: grid; gap: 6px; margin: 8px 0; }
.klegal-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 18px; }
.klegal-nav a { padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--k-line-2); color: var(--k-ink); font-weight: 600; font-size: .9rem; }
.klegal-nav a.on { background: var(--k-primary); border-color: var(--k-primary); color: var(--k-on-primary); }
.klegal-box { margin-top: 14px; padding: 16px 18px; border-radius: 16px; background: var(--k-paper); border: 1px solid var(--k-line); display: flex; flex-wrap: wrap; gap: .6rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print { .kn, .kbar, .kwa { display: none !important; } body { background: #fff; } }

/* ---------- account-deletion request form (views/landing_legal.ejs) ---------- */
.klegal-ol { padding-inline-start: 1.3rem; display: grid; gap: 6px; margin: 8px 0; color: var(--k-ink-2); }
.kalert { border: 1px solid var(--k-line-2); border-radius: 16px; padding: 14px 16px; margin: 18px 0 8px; background: var(--k-paper); }
.kalert p { margin: 6px 0 0; }
.kalert.is-ok { border-color: var(--k-accent-line); background: var(--k-accent-wash); }
.kalert.is-ok b { color: var(--k-accent-ink); }
.kalert.is-err { border-color: #f1b5bd; background: #fff4f5; color: #8f1d2c; }
.kform { display: grid; gap: 14px; margin-top: 12px; background: var(--k-paper); border: 1px solid var(--k-line); border-radius: 18px; padding: 18px; box-shadow: var(--k-shadow); }
.kdf-row { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .kdf-row { grid-template-columns: 1fr 1fr; } }
.kdf { display: grid; gap: 6px; min-width: 0; }
.kdf > label { font-weight: 600; color: var(--k-ink); font-size: .95rem; }
.kdf > label.required::after { content: ' *'; color: #c62f45; }
.kdf input:not([type=checkbox]), .kdf textarea { width: 100%; min-height: 46px; border: 1px solid var(--k-line-2); border-radius: 12px; padding: .6rem .8rem; font: inherit; color: var(--k-ink); background: #fff; }
.kdf textarea { min-height: 72px; resize: vertical; }
.kdf input:focus, .kdf textarea:focus { outline: 2px solid var(--k-accent-line); border-color: var(--k-accent); }
.kdf-check label { display: flex; gap: .55rem; align-items: flex-start; font-weight: 600; color: var(--k-ink-2); }
.kdf-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--k-primary); }
.kdf-err { display: none; color: #c62f45; font-size: .85rem; }
.kform.was-validated :invalid ~ .kdf-err, .kform.was-validated .kdf-check label:has(:invalid) ~ .kdf-err { display: block; }
.kform.was-validated input:invalid, .kform.was-validated textarea:invalid { border-color: #c62f45; }
.kb-danger { background: #b4233a; color: #fff; justify-self: start; }
.kb-danger:hover { background: #951c30; color: #fff; }
@media (max-width: 480px) { .kb-danger { justify-self: stretch; } }
.klegal-en { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--k-line); text-align: left; }
.klegal-en h2 { font-family: var(--k-font-body); }