/* =========================================================
   Daya — website design system
   Tokens follow "Daya Website Strategy & Technical Handoff
   v1.0", Section 13. Design north star: clinical intelligence
   with human warmth. Not FemTech pink, not hospital blue,
   not futuristic AI neon.
   ========================================================= */

:root{
  /* ---- Section 13 colour tokens (canonical) ---- */
  --midnight:#102D3A;   /* headings, nav, premium dark sections */
  --blue:#539DC2;       /* primary brand, active states, accents */
  --teal:#55A9A6;       /* health, continuity, connections */
  --lilac:#DDD9ED;      /* feminine nuance without pink stereotype */
  --pearl:#FAF9F6;      /* premium warm surface */
  --mist:#EDF5F6;       /* cool supporting surface */
  --ink:#172B35;        /* body copy */
  --clinical-red:#A63A32; /* genuine risk/error states ONLY — never decorative */
  --wa:#25D366;           /* WhatsApp brand green — contact channel only */
  --wa-dark:#128C7E;

  /* ---- Derived steps. Text-bearing variants are darkened so they
         clear WCAG 2.2 AA (4.5:1) against Pearl/white surfaces. ---- */
  --blue-ink:#2C6A8B;     /* blue as readable text/link colour */
  --blue-deep:#1F5473;
  --blue-tint:#E4F0F6;
  --teal-ink:#2F7370;     /* teal as readable text colour */
  --teal-tint:#E2F1F0;
  --lilac-tint:#F1EFF8;
  --midnight-70:#4A6673;
  --midnight-55:#6B838D;
  --line:#DDE6E9;
  --line-soft:#E9F0F2;
  --white:#fff;

  /* Clinical status. Never communicated by colour alone —
     always paired with an icon and a text label. */
  --status-attention:#8A5A12;
  --status-attention-tint:#FBF3E4;
  --status-red-tint:#FBEDEB;

  /* ---- Radii, elevation ---- */
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-xl:32px;
  --shadow-sm:0 1px 3px rgba(16,45,58,.06), 0 4px 14px rgba(16,45,58,.05);
  --shadow:0 2px 6px rgba(16,45,58,.05), 0 16px 40px rgba(16,45,58,.08);
  --shadow-lg:0 4px 10px rgba(16,45,58,.06), 0 32px 70px rgba(16,45,58,.12);

  /* ---- 8px spacing primitives ---- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s8:64px; --s10:80px;

  /* ---- Editorial rhythm between narrative sections (§13) ---- */
  --section-y:140px;

  /* ---- Layout ---- */
  --container:1240px;
  --measure:68ch;       /* long-copy measure ~600-720px */
  --header-h:76px;

  /* ---- Type ---- */
  --font-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-ar:'IBM Plex Sans Arabic','Noto Sans Arabic',system-ui,'Segoe UI',Tahoma,sans-serif;

  /* ---- Icon shapes, used as CSS masks so they inherit a token colour.
         Stroke colour inside the SVG is irrelevant; the mask keeps only
         the glyph geometry. ---- */
  --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --icon-no:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6.5 17.5 17.5 6.5'/%3E%3C/svg%3E");
}

/* Arabic is a first-class design state, not a translation layer (§17.10). */
html[lang="ar"]{
  --font-display:var(--font-ar);
  --font-body:var(--font-ar);
}

/* ------------------------------ base ------------------------------ */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--s3) + env(safe-area-inset-top,0px));
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  font-size:16px;              /* AA baseline: never below 16px in production */
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  font-feature-settings:'kern' 1,'liga' 1;
}
html[lang="ar"] body{line-height:1.9}

img,video{max-width:100%;height:auto}
img{display:block}
svg{max-width:100%}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--midnight);
  line-height:1.18;
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-.021em;
  overflow-wrap:break-word;
  text-wrap:balance;
}
html[lang="ar"] :is(h1,h2,h3,h4){letter-spacing:0;text-wrap:initial}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit}
strong{font-weight:650;color:var(--midnight)}

.container{
  width:100%;max-width:var(--container);margin-inline:auto;
  padding-inline:max(24px, env(safe-area-inset-left,0px)) max(24px, env(safe-area-inset-right,0px));
}

.skip-link{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:300;
  background:var(--midnight);color:#fff;padding:12px 22px;border-radius:0 0 var(--r-sm) 0;font-weight:600;
}
.skip-link:focus{inset-inline-start:0}

/* Visible focus states, keyboard-first (§13 accessibility baseline) */
:focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px;border-radius:6px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------ type utilities ------------------------------ */
.eyebrow{
  display:inline-block;font-family:var(--font-body);
  font-size:.75rem;font-weight:650;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-ink);margin:0 0 var(--s2);
}
html[lang="ar"] .eyebrow{letter-spacing:.02em;text-transform:none;font-size:.85rem}

.display-1{font-size:clamp(2.2rem,4.6vw,3.5rem);font-weight:750;letter-spacing:-.03em}
.display-2{font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:700;letter-spacing:-.025em}
.display-3{font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:700}

.lede{font-size:1.125rem;color:var(--midnight-70);max-width:var(--measure)}
.muted{color:var(--midnight-70)}

/* ------------------------------ buttons ------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;                        /* >= 44x44 interactive target */
  padding:13px 26px;border-radius:999px;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;line-height:1.3;
  border:1.5px solid transparent;cursor:pointer;text-align:center;max-width:100%;
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.btn .ico{width:18px;height:18px;flex:none}
.btn-lg{min-height:56px;padding:17px 34px;font-size:1.02rem}
.btn-block{width:100%}

/* Primary — Daya Blue, deepened for text contrast */
.btn-primary{background:var(--blue-deep);color:#fff;box-shadow:0 10px 24px rgba(31,84,115,.22)}
.btn-primary:hover{background:var(--midnight);box-shadow:0 14px 30px rgba(16,45,58,.26);transform:translateY(-2px)}

/* Secondary — quiet outline, one per high-attention section */
.btn-secondary{background:transparent;border-color:var(--line);color:var(--midnight)}
.btn-secondary:hover{border-color:var(--blue);background:var(--mist);transform:translateY(-2px)}

.btn-on-dark{background:#fff;color:var(--midnight)}
.btn-on-dark:hover{background:var(--mist);transform:translateY(-2px)}
.btn-ghost-light{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}

/* Inline text action. Destination-specific label, never "Learn more" (§12). */
.link-action{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:600;font-size:.95rem;color:var(--blue-ink);
}
.link-action::after{content:'→';transition:transform .2s ease}
html[dir="rtl"] .link-action::after{content:'←'}
.link-action:hover{color:var(--blue-deep)}
.link-action:hover::after{transform:translateX(4px)}
html[dir="rtl"] .link-action:hover::after{transform:translateX(-4px)}

/* ------------------------------ header ------------------------------ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease,border-color .25s ease;
  padding-top:env(safe-area-inset-top,0px);
}
.site-header.scrolled{box-shadow:0 4px 24px rgba(16,45,58,.07);border-bottom-color:var(--line-soft)}
.header-inner{display:flex;align-items:center;gap:var(--s3);min-height:var(--header-h);min-width:0}

.brand{display:flex;align-items:center;gap:10px;flex:none;min-width:0}
.brand-mark{width:40px;height:40px;object-fit:contain}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text strong{
  font-family:var(--font-display);font-size:1.1rem;font-weight:750;
  letter-spacing:.15em;color:var(--midnight);
}
/* Permanent brand signature lockup (§3) */
.brand-text small{
  font-size:.6rem;letter-spacing:.02em;color:var(--midnight-55);font-weight:500;margin-top:3px;
}
html[lang="ar"] .brand-text strong{letter-spacing:.04em}

.site-nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.site-nav > a,.nav-group > button{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:10px 14px;border:0;background:none;border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:.92rem;font-weight:500;color:var(--midnight-70);cursor:pointer;
  transition:color .18s ease,background .18s ease;
}
.site-nav > a:hover,.site-nav > a.active,.nav-group > button:hover,.nav-group.open > button{
  color:var(--midnight);background:var(--mist);
}

/* Care dropdown — helps users choose a journey, not browse a clinical index (§4) */
.nav-group{position:relative}
.nav-group > button::after{
  content:'';width:7px;height:7px;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.nav-group.open > button::after{transform:rotate(225deg) translateY(-2px)}
.nav-panel{
  position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:290px;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:var(--s1);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.nav-group.open .nav-panel{opacity:1;visibility:visible;transform:none}
.nav-panel a{
  display:block;padding:11px 14px;border-radius:var(--r-sm);
  font-size:.92rem;font-weight:500;color:var(--midnight);min-height:44px;
}
.nav-panel a span{display:block;font-size:.8rem;color:var(--midnight-55);font-weight:400;margin-top:2px}
.nav-panel a:hover{background:var(--mist)}

.header-actions{display:flex;align-items:center;gap:var(--s1);flex:none}
.lang-toggle{
  min-height:44px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;font-family:var(--font-body);font-weight:600;font-size:.86rem;color:var(--midnight);
  cursor:pointer;flex:none;transition:border-color .18s ease,background .18s ease;
}
.lang-toggle:hover{border-color:var(--blue);background:var(--mist)}
.header-cta{padding:11px 22px;font-size:.9rem;min-height:44px}

.nav-burger{
  display:none;position:relative;width:44px;height:44px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#fff;cursor:pointer;padding:0;place-items:center;flex:none;
}

/* Primary action inside the mobile menu. Only shown at the widths where the
   header CTA is hidden, so the CTA is never duplicated. The selector is
   scoped through .site-nav to outrank the plain nav-link rules that would
   otherwise strip the button styling from a direct <a> child. */
.site-nav > .nav-cta{display:none}
.site-nav > .nav-cta,
.site-nav.open > .nav-cta{
  margin-top:var(--s3);width:100%;
  justify-content:center;text-align:center;
  padding:14px 22px;
  background:var(--midnight);color:#fff;
  font-family:var(--font-display);font-weight:650;font-size:.98rem;
  border-radius:999px;
}
.site-nav > .nav-cta:hover{background:var(--blue-deep);color:#fff}
/* Bars are positioned from the centre rather than stacked in flow, so the open
   state collapses them onto the exact midpoint to form the X. In flow, the
   travel distance would depend on how the button's rows happen to be sized. */
.nav-burger span{
  position:absolute;left:50%;width:18px;height:2px;
  background:var(--midnight);border-radius:2px;
  transform:translate(-50%,-50%);
  transition:top .25s ease,transform .25s ease,opacity .2s ease;
}
.nav-burger span:nth-child(1){top:calc(50% - 6px)}
.nav-burger span:nth-child(2){top:50%}
.nav-burger span:nth-child(3){top:calc(50% + 6px)}

.nav-burger[aria-expanded="true"] span:nth-child(1){top:50%;transform:translate(-50%,-50%) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){top:50%;transform:translate(-50%,-50%) rotate(-45deg)}

/* ------------------------------ sections ------------------------------ */
.section{padding:var(--section-y) 0}
.section-sm{padding:calc(var(--section-y) * .62) 0}
.surface-pearl{background:var(--pearl)}
.surface-mist{background:var(--mist)}
.surface-lilac{background:var(--lilac-tint)}
.surface-dark{background:var(--midnight);color:rgba(255,255,255,.82)}
.surface-dark :is(h1,h2,h3,h4){color:#fff}
.surface-dark .eyebrow{color:var(--lilac)}
.surface-dark .lede,.surface-dark .muted{color:rgba(255,255,255,.76)}

.section-head{max-width:780px;margin:0 auto var(--s8);text-align:center}
.section-head.align-start{margin-inline:0;text-align:start}
.section-head h2{margin-bottom:var(--s2)}
.section-head p{margin:0 auto;color:var(--midnight-70);font-size:1.09rem;max-width:64ch}
.section-head.align-start p{margin-inline:0}

/* ------------------------------ hero (HeroSplit) ------------------------------ */
.hero{
  position:relative;overflow:hidden;padding:calc(var(--section-y) * .62) 0 var(--section-y);
  background:linear-gradient(168deg,var(--mist) 0%,var(--pearl) 46%,#fff 100%);
}
.hero::before{
  content:'';position:absolute;width:640px;height:640px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(221,217,237,.5) 0%,transparent 68%);
  top:-260px;inset-inline-end:-180px;
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s8);align-items:center}
.hero-copy h1{margin-bottom:var(--s3)}
.hero-sub{font-size:1.16rem;color:var(--midnight-70);max-width:56ch;margin-bottom:var(--s3)}

.hero-eco{
  display:flex;align-items:center;gap:10px;margin-bottom:var(--s5);
  font-size:.92rem;color:var(--midnight-70);
}
.hero-eco::before{content:'';width:24px;height:1.5px;background:var(--teal);flex:none}

.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* Living representation of Daya context — no stock maternity cliché (§13) */
.hero-visual{position:relative}
.context-panel{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);padding:var(--s3);
}
.context-head{
  display:flex;align-items:center;gap:12px;
  padding-bottom:var(--s2);margin-bottom:var(--s2);border-bottom:1px solid var(--line-soft);
}
.context-head img{width:34px;height:34px;object-fit:contain;flex:none}
.context-head strong{font-family:var(--font-display);font-size:.95rem;color:var(--midnight)}
.context-head span{display:block;font-size:.76rem;color:var(--midnight-55);font-weight:400}

.context-stack{display:flex;flex-direction:column;gap:10px}
.context-card{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:var(--r);background:var(--pearl);border:1px solid var(--line-soft);
}
.context-card .c-ico{
  width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--blue-tint);color:var(--blue-deep);
}
.context-card .c-ico svg{width:16px;height:16px}
.context-card.is-teal .c-ico{background:var(--teal-tint);color:var(--teal-ink)}
.context-card.is-lilac .c-ico{background:var(--lilac);color:#4A3F6B}
.context-card .c-body{min-width:0}
.context-card .c-label{display:block;font-size:.72rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--midnight-55);margin-bottom:2px}
html[lang="ar"] .context-card .c-label{letter-spacing:0;text-transform:none;font-size:.8rem}
.context-card .c-value{font-size:.92rem;color:var(--ink);font-weight:500}

/* Physician-context state: attention is icon + text + colour, never colour alone */
.context-card.is-attention{background:var(--status-attention-tint);border-color:#F0DFBE}
.context-card.is-attention .c-ico{background:#F5E4C4;color:var(--status-attention)}
.context-card.is-attention .c-value{color:#6E4A10}

.context-foot{
  display:flex;align-items:center;gap:10px;margin-top:var(--s2);padding-top:var(--s2);
  border-top:1px solid var(--line-soft);font-size:.82rem;color:var(--midnight-55);
}
.context-foot .thread{
  flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--teal) 100%);opacity:.55;
}

/* ------------------------------ the gap (appointment timeline) ------------------------------ */
.gap-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
.gap-copy p{color:var(--midnight-70)}
.gap-copy .gap-moments{
  display:flex;flex-wrap:wrap;gap:10px;margin:var(--s3) 0;
}
.gap-moments li{
  padding:8px 15px;border-radius:999px;font-size:.87rem;
  background:#fff;border:1px solid var(--line);color:var(--midnight-70);
}

/* Timeline: visits as fixed points, the space between them as the product */
.timeline{
  position:relative;padding:var(--s6) var(--s3);
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);box-shadow:var(--shadow);
}
.timeline-track{position:relative;height:2px;background:var(--line);margin:var(--s6) 0 var(--s5)}
.timeline-visit{position:absolute;top:50%;transform:translate(-50%,-50%);text-align:center}
html[dir="rtl"] .timeline-visit{transform:translate(50%,-50%)}
.timeline-visit .node{
  width:16px;height:16px;border-radius:50%;background:var(--midnight);
  border:3px solid #fff;box-shadow:0 0 0 2px var(--midnight);margin-inline:auto;
}
.timeline-visit .label{
  position:absolute;top:26px;inset-inline-start:50%;transform:translateX(-50%);
  font-size:.76rem;font-weight:600;color:var(--midnight);white-space:nowrap;
}
html[dir="rtl"] .timeline-visit .label{transform:translateX(50%)}
.timeline-between{
  position:absolute;bottom:26px;inset-inline-start:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:.78rem;font-weight:600;color:var(--blue-ink);
}
html[dir="rtl"] .timeline-between{transform:translateX(50%)}
.timeline-between .dots{display:flex;gap:4px}
.timeline-between .dots i{width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:.6}
.timeline-caption{
  text-align:center;font-size:.9rem;color:var(--midnight-70);
  padding-top:var(--s3);border-top:1px dashed var(--line);margin:0;
}

/* ------------------------------ experience cards (Follow → Reach Care) ------------------------------ */
.experience-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
.experience-card{
  display:flex;flex-direction:column;
  padding:var(--s4) var(--s3);background:#fff;
  border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.experience-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue)}
.exp-step{
  font-family:var(--font-display);font-size:.74rem;font-weight:700;letter-spacing:.12em;
  color:var(--midnight-55);margin-bottom:var(--s2);
}
html[lang="ar"] .exp-step{letter-spacing:0}
.exp-ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:var(--s2);
  background:var(--blue-tint);color:var(--blue-deep);
}
.exp-ico svg{width:23px;height:23px}
.experience-card:nth-child(2) .exp-ico{background:var(--lilac);color:#4A3F6B}
.experience-card:nth-child(3) .exp-ico{background:var(--status-attention-tint);color:var(--status-attention)}
.experience-card:nth-child(4) .exp-ico{background:var(--teal-tint);color:var(--teal-ink)}
.experience-card:nth-child(5) .exp-ico{background:var(--mist);color:var(--midnight)}
.experience-card h3{font-size:1.12rem;margin-bottom:8px}
.experience-card p{font-size:.9rem;color:var(--midnight-70);margin:0}

.framework-line{
  margin:var(--s6) auto 0;max-width:var(--measure);text-align:center;
  font-family:var(--font-display);font-size:1.02rem;color:var(--midnight);
}
.section-cta{display:flex;justify-content:center;margin-top:var(--s5)}

/* ------------------------------ journey tabs ------------------------------ */
.journey{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);
  box-shadow:var(--shadow);overflow:hidden;
}
.journey-tablist{
  display:flex;gap:4px;padding:var(--s1);background:var(--pearl);
  border-bottom:1px solid var(--line-soft);
}
.journey-tab{
  flex:1;min-height:52px;padding:14px 18px;border:0;background:transparent;border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:.94rem;font-weight:600;color:var(--midnight-70);
  cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.journey-tab:hover{background:rgba(255,255,255,.7);color:var(--midnight)}
.journey-tab[aria-selected="true"]{background:#fff;color:var(--midnight);box-shadow:var(--shadow-sm)}
.journey-tab[aria-selected="true"]{box-shadow:var(--shadow-sm),inset 0 -3px 0 var(--blue)}

.journey-panel{padding:var(--s6);display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:start}
/* `[hidden]` alone loses to `.journey-panel { display:grid }` in some engines —
   the attribute selector + !important keeps inactive panels fully out of flow. */
.journey-panel[hidden],
.journey-panel[aria-hidden="true"]:not(.is-active){display:none !important}
.journey-panel h3{font-size:1.45rem;margin-bottom:var(--s2)}
.journey-panel p{color:var(--midnight-70)}
.journey-features{display:flex;flex-direction:column;gap:12px}
.journey-features li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:.94rem;color:var(--ink);
}
.journey-features li::before{
  content:'';flex:none;width:20px;height:20px;border-radius:50%;margin-top:3px;
  background:var(--teal-tint) center/11px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F7370'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
.journey-aside{
  padding:var(--s3);border-radius:var(--r-lg);background:var(--mist);border:1px solid var(--line-soft);
}
.journey-aside h4{font-size:.95rem;margin-bottom:8px}
.journey-aside p{font-size:.88rem;margin:0}

/* ------------------------------ continuity diagram ------------------------------ */
.model-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:var(--s8);align-items:center}

.diagram{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:var(--s2);
  padding:var(--s5) var(--s3);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xl);
}
.diagram-node{
  text-align:center;padding:var(--s3) var(--s2);border-radius:var(--r-lg);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
}
.diagram-node .d-ico{
  width:46px;height:46px;border-radius:50%;margin:0 auto var(--s2);display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;
}
.diagram-node .d-ico svg{width:23px;height:23px}
.diagram-node strong{display:block;font-family:var(--font-display);font-size:1rem;color:#fff;margin-bottom:4px}
.diagram-node span{font-size:.83rem;color:rgba(255,255,255,.7);display:block}
.diagram-node.is-daya{background:rgba(83,157,194,.2);border-color:rgba(83,157,194,.5)}
.diagram-node.is-daya .d-ico{background:var(--blue);color:var(--midnight)}
/* The visual ends at clinician review — never at "AI decision" (§10 safety rule) */
.diagram-node.is-physician{background:rgba(85,169,166,.16);border-color:rgba(85,169,166,.45)}

/* Flowing data threads, both directions */
.diagram-link{position:relative;height:2px;min-width:34px;background:rgba(255,255,255,.22);border-radius:2px}
.diagram-link::before,.diagram-link::after{
  content:'';position:absolute;top:50%;width:7px;height:7px;
  border-top:1.5px solid rgba(255,255,255,.55);border-inline-end:1.5px solid rgba(255,255,255,.55);
}
.diagram-link::before{inset-inline-end:0;transform:translateY(-50%) rotate(45deg)}
.diagram-link::after{inset-inline-start:0;transform:translateY(-50%) rotate(225deg)}
.diagram-link i{
  position:absolute;top:50%;inset-inline-start:0;width:8px;height:8px;margin-top:-4px;
  border-radius:50%;background:var(--blue);
  animation:threadFlow 3.4s ease-in-out infinite;
}
@keyframes threadFlow{
  0%,100%{inset-inline-start:0;opacity:0}
  20%{opacity:1}
  80%{opacity:1}
  100%{inset-inline-start:100%}
}
.diagram-caption{
  grid-column:1/-1;text-align:center;margin:var(--s3) 0 0;
  font-size:.85rem;color:rgba(255,255,255,.6);
}

.model-points{display:flex;flex-direction:column;gap:var(--s3);margin:var(--s4) 0 0}
.model-points li{display:flex;gap:var(--s2);align-items:flex-start}
.model-points .m-num{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:.85rem;font-weight:700;
  background:var(--blue-tint);color:var(--blue-deep);
}
.model-points strong{display:block;margin-bottom:2px}
.model-points p{font-size:.92rem;color:var(--midnight-70);margin:0}

/* ------------------------------ context / chatbot contrast ------------------------------ */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);max-width:960px;margin-inline:auto}
.compare-card{padding:var(--s5) var(--s4);border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
.compare-card h3{font-size:1.1rem;margin-bottom:var(--s2)}
.compare-card p{font-size:.94rem;color:var(--midnight-70);margin:0}
.compare-card.is-generic{background:var(--pearl);border-style:dashed}
.compare-card.is-daya{border-color:var(--blue);box-shadow:var(--shadow)}
.compare-tag{
  display:inline-block;margin-bottom:var(--s2);padding:5px 12px;border-radius:999px;
  font-size:.73rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  background:var(--mist);color:var(--midnight-70);
}
html[lang="ar"] .compare-tag{letter-spacing:0;text-transform:none;font-size:.82rem}
.compare-card.is-daya .compare-tag{background:var(--blue-tint);color:var(--blue-deep)}
/* Tick lists — affirmative vs. excluded capabilities.
   The two variants use different glyph shapes, not just different colours, so
   the distinction survives greyscale and colour-vision differences. Excluded
   items use neutral midnight rather than --clinical-red: they are scope
   boundaries, not risk states. */
.ticks{display:flex;flex-direction:column;gap:10px;margin-top:var(--s3)}
.ticks li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:.94rem;line-height:1.5;color:var(--midnight);
}
.ticks li::before{
  content:'';flex:none;width:19px;height:19px;margin-top:.06em;
  background:var(--teal-ink);
  -webkit-mask:var(--icon-check) center/19px 19px no-repeat;
  mask:var(--icon-check) center/19px 19px no-repeat;
}
.ticks.is-negative li::before{
  background:var(--midnight-55);
  -webkit-mask-image:var(--icon-no);
  mask-image:var(--icon-no);
}

.outcome-list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);
  margin:var(--s6) auto 0;max-width:920px;
}
.outcome-list li{
  padding:12px 22px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-family:var(--font-display);font-size:.95rem;font-weight:600;color:var(--midnight);
}

/* ------------------------------ safety notice (centrally managed copy) ------------------------------ */
.safety-notice{
  display:flex;gap:var(--s2);align-items:flex-start;
  padding:var(--s3);border-radius:var(--r);
  background:var(--status-red-tint);border:1px solid #EEC9C4;
}
.safety-notice .s-ico{
  flex:none;width:24px;height:24px;color:var(--clinical-red);
}
.safety-notice .s-ico svg{width:24px;height:24px}
.safety-notice p{margin:0;font-size:.9rem;color:#6E2A24}
.safety-notice strong{color:#5A211C}
.safety-notice.on-dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.safety-notice.on-dark .s-ico{color:#F0B4AC}
.safety-notice.on-dark p{color:rgba(255,255,255,.82)}
.safety-notice.on-dark strong{color:#fff}
.safety-notice.is-centered{max-width:var(--measure);margin-inline:auto}

/* Calm example workflow — no alarmist UI */
.recognition-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start}
.recognition-copy .not-every{
  display:flex;flex-direction:column;gap:12px;margin:var(--s3) 0;
}
.recognition-copy .not-every li{
  padding-inline-start:var(--s3);position:relative;color:var(--midnight-70);font-size:1rem;
}
.recognition-copy .not-every li::before{
  content:'';position:absolute;inset-inline-start:0;top:.7em;width:12px;height:1.5px;background:var(--teal);
}
.flow{display:flex;flex-direction:column;gap:2px}
.flow-step{
  display:flex;gap:var(--s2);align-items:flex-start;
  padding:var(--s3);background:#fff;border:1px solid var(--line-soft);
}
.flow-step:first-child{border-radius:var(--r-lg) var(--r-lg) 0 0}
.flow-step:last-child{border-radius:0 0 var(--r-lg) var(--r-lg)}
.flow-step .f-num{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:.78rem;font-weight:700;font-family:var(--font-display);
  background:var(--mist);color:var(--midnight);
}
.flow-step h4{font-size:.98rem;margin-bottom:3px}
.flow-step p{font-size:.88rem;color:var(--midnight-70);margin:0}
.flow-step.is-outcome{background:var(--teal-tint);border-color:#C6E3E1}
.flow-step.is-outcome .f-num{background:var(--teal);color:#fff}

/* ------------------------------ physician-first ------------------------------ */
.physician-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
.split-note{display:grid;gap:var(--s3);margin-top:var(--s4)}
.split-note div{
  padding:var(--s3);border-radius:var(--r);background:#fff;border:1px solid var(--line-soft);
  border-inline-start:3px solid var(--blue);
}
.split-note div:last-child{border-inline-start-color:var(--teal)}
.split-note h4{font-size:.95rem;margin-bottom:4px}
.split-note p{font-size:.92rem;color:var(--midnight-70);margin:0}

/* Structured patient context, as a clinician would receive it */
.clinician-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.clinician-card header{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:var(--s3);background:var(--midnight);
}
.clinician-card header strong{font-family:var(--font-display);color:#fff;font-size:.95rem}
.clinician-card header span{font-size:.78rem;color:rgba(255,255,255,.62)}
.clinician-rows{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.clinician-row{display:grid;grid-template-columns:118px 1fr;gap:var(--s2);align-items:baseline}
.clinician-row dt{font-size:.76rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--midnight-55)}
html[lang="ar"] .clinician-row dt{letter-spacing:0;text-transform:none;font-size:.85rem}
.clinician-row dd{margin:0;font-size:.92rem;color:var(--ink)}
.clinician-card footer{
  padding:var(--s3);background:var(--pearl);border-top:1px solid var(--line-soft);
  font-size:.85rem;color:var(--midnight-70);
}
.review-flag{
  display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;
  font-size:.79rem;font-weight:650;background:var(--status-attention-tint);color:var(--status-attention);
}
.review-flag svg{width:14px;height:14px;flex:none}

/* ------------------------------ golden hour band ------------------------------ */
.golden-band{position:relative;overflow:hidden;background:var(--midnight);padding:var(--section-y) 0}
.golden-band::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 18% 50%, rgba(85,169,166,.22) 0%, transparent 46%),
    radial-gradient(circle at 78% 40%, rgba(83,157,194,.2) 0%, transparent 50%);
}
.golden-inner{position:relative;max-width:900px;margin-inline:auto;text-align:center}
.golden-inner h2{color:#fff}
.golden-inner p{color:rgba(255,255,255,.76);max-width:66ch;margin-inline:auto}

/* Recognize earlier → Understand sooner → Connect when it matters */
.sequence{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);flex-wrap:wrap;
  margin:var(--s6) 0;
}
.sequence li{
  padding:16px 28px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  font-family:var(--font-display);font-size:1.02rem;font-weight:650;color:#fff;
}
.sequence .arrow{background:none;border:0;padding:0;color:rgba(255,255,255,.42);font-size:1.3rem}
.golden-note{
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.14);
  font-size:.95rem;color:rgba(255,255,255,.62);
}

/* ------------------------------ LifeRight ecosystem ------------------------------ */
.eco-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}

/* Nested architecture: ecosystem → specialty platform → relationship */
.eco-nest{padding:var(--s4);border-radius:var(--r-xl);background:var(--mist);border:1px solid var(--line)}
.eco-layer{border-radius:var(--r-lg);padding:var(--s3);text-align:center}
.eco-layer.is-outer{background:#fff;border:1px solid var(--line)}
.eco-layer.is-inner{background:var(--midnight);margin-top:var(--s3)}
.eco-layer .e-name{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--midnight);margin-bottom:2px}
.eco-layer .e-role{font-size:.84rem;color:var(--midnight-55)}
.eco-layer.is-inner .e-name{color:#fff}
.eco-layer.is-inner .e-role{color:rgba(255,255,255,.68)}
.eco-relationship{
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:.86rem;color:rgba(255,255,255,.82);
}
.eco-relationship span{padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.1)}
.eco-distinct{
  margin-top:var(--s4);font-family:var(--font-display);font-size:1.05rem;
  font-weight:650;color:var(--midnight);
}

/* ------------------------------ trust principles ------------------------------ */
.principles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.principle{
  padding:var(--s4) var(--s3);border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line-soft);border-top:3px solid var(--blue);
}
.principles-grid .principle:nth-child(2){border-top-color:var(--teal)}
.principles-grid .principle:nth-child(3){border-top-color:var(--status-attention)}
.principles-grid .principle:nth-child(4){border-top-color:var(--midnight)}
.principle h3{font-size:1.03rem;margin-bottom:8px}
.principle p{font-size:.9rem;color:var(--midnight-70);margin:0}

/* ------------------------------ professional split panel ------------------------------ */
.professional-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.professional-panel{
  display:flex;flex-direction:column;
  padding:var(--s6) var(--s5);border-radius:var(--r-xl);
  background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);
}
.professional-panel h3{font-size:1.4rem;margin-bottom:var(--s2)}
.professional-panel p{color:var(--midnight-70)}
.professional-panel .btn,.professional-panel .link-action{margin-top:auto;align-self:flex-start}
.professional-panel.is-doctors{border-top:4px solid var(--blue)}
.professional-panel.is-partners{border-top:4px solid var(--teal)}
.prof-eyebrow{color:var(--midnight-55)}

/* ------------------------------ final CTA ------------------------------ */
.final-cta{background:var(--midnight);padding:var(--section-y) 0;text-align:center;position:relative;overflow:hidden}
.final-cta::after{
  content:'';position:absolute;width:720px;height:720px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(83,157,194,.18) 0%,transparent 66%);
  bottom:-360px;inset-inline-start:50%;transform:translateX(-50%);
}
.final-inner{position:relative;max-width:760px;margin-inline:auto}
.final-inner h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:var(--s5)}
.final-signature{
  margin-top:var(--s5);font-family:var(--font-display);font-size:1.05rem;
  color:rgba(255,255,255,.72);letter-spacing:.01em;
}

/* ------------------------------ lead form ------------------------------ */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s5);align-items:start}
.contact-side{display:flex;flex-direction:column;gap:var(--s2)}
.contact-card{
  padding:var(--s3);border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);
}
.contact-card h3{font-size:1rem;margin-bottom:6px}
.contact-card p{font-size:.88rem;color:var(--midnight-70);margin:0 0 10px}
.contact-ico{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:var(--s2);
  background:var(--blue-tint);color:var(--blue-deep);
}
.contact-ico svg{width:21px;height:21px}
.contact-ico.wa{background:rgba(37,211,102,.14);color:var(--wa-dark)}
.contact-card:nth-child(3) .contact-ico{background:var(--teal-tint);color:var(--teal-ink)}
.contact-card:nth-child(4) .contact-ico{background:var(--lilac);color:#4A3F6B}
.contact-value{
  display:block;font-weight:650;color:var(--midnight);font-size:.98rem;margin:0 0 12px;
  direction:ltr;unicode-bidi:embed;word-break:break-word;
}
html[dir="rtl"] .contact-value{text-align:right}
a.contact-value{color:var(--blue-ink);margin-bottom:0}
a.contact-value:hover{text-decoration:underline}

.btn-wa{
  background:var(--wa);color:#fff;border-color:transparent;
}
.btn-wa:hover{background:var(--wa-dark);color:#fff}
.btn-ghost-wa{
  background:rgba(37,211,102,.1);color:var(--wa-dark);border:1.5px solid rgba(37,211,102,.35);
  font-weight:500;font-size:.88rem;padding:12px 20px;white-space:normal;line-height:1.35;
  display:inline-flex;align-items:center;gap:10px;border-radius:999px;
}
.btn-ghost-wa:hover{background:rgba(37,211,102,.18)}
.btn-ghost-wa .ico{width:17px;height:17px;flex:none}

.lead-form{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);
  padding:var(--s5);border-radius:var(--r-xl);background:#fff;
  border:1px solid var(--line-soft);box-shadow:var(--shadow);
}
.field{display:flex;flex-direction:column;gap:8px}
.field-full{grid-column:1/-1}
.field label{font-size:.86rem;font-weight:600;color:var(--midnight)}
.field input,.field textarea,.field select{
  font-family:inherit;font-size:1rem;color:var(--ink);width:100%;max-width:100%;
  min-height:48px;padding:13px 16px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--pearl);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;resize:vertical;
}
.field select{
  appearance:none;cursor:pointer;padding-inline-end:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B838D'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:20px;
}
html[dir="rtl"] .field select{background-position:left 14px center}
.field input::placeholder,.field textarea::placeholder{color:var(--midnight-55)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(83,157,194,.18);
}
/* Errors carry an icon + text, not colour alone */
.field input.invalid,.field textarea.invalid,.field select.invalid{
  border-color:var(--clinical-red);box-shadow:0 0 0 4px rgba(166,58,50,.1);
}
.field-hint{font-size:.82rem;color:var(--midnight-55);margin:0}

.consent{display:flex;gap:12px;align-items:flex-start}
.consent input[type="checkbox"]{
  width:20px;height:20px;min-height:0;margin:0;flex:none;accent-color:var(--blue-deep);
  padding:0;border-radius:5px;
}
.consent label{font-size:.87rem;font-weight:400;color:var(--midnight-70);line-height:1.6}
.consent a{color:var(--blue-ink);font-weight:600;text-decoration:underline}

.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.form-status{margin:0;font-size:.9rem;font-weight:600;min-height:1.3em;display:flex;align-items:center;gap:8px}
.form-status.ok{color:var(--teal-ink)}
.form-status.err{color:var(--clinical-red)}
.form-status::before{font-size:1rem}
.form-status.ok::before{content:'✓'}
.form-status.err::before{content:'!'}

/* ------------------------------ footer ------------------------------ */
.site-footer{background:var(--midnight);color:rgba(255,255,255,.68);padding:var(--s10) 0 var(--s4)}

/* Footer safety language is the reusable, centrally controlled notice */
.footer-safety{
  padding:var(--s3);border-radius:var(--r);margin-bottom:var(--s8);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
}
.footer-safety p{font-size:.86rem;color:rgba(255,255,255,.72);margin:0;max-width:100ch}
.footer-safety strong{color:#fff}

.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--s6)}
.footer-brand .brand-text strong{color:#fff}
.footer-brand .brand-text small{color:rgba(255,255,255,.55)}
.footer-brand p{font-size:.9rem;max-width:38ch;margin-top:var(--s2)}
.footer-col{display:flex;flex-direction:column;gap:2px}
.footer-col h4{color:#fff;font-size:.92rem;margin-bottom:10px}
.footer-col a{
  display:inline-flex;align-items:center;min-height:40px;
  font-size:.89rem;color:rgba(255,255,255,.68);transition:color .18s ease;
}
.footer-col a:hover{color:#fff;text-decoration:underline}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);
  margin-top:var(--s6);padding-top:var(--s3);
  border-top:1px solid rgba(255,255,255,.14);font-size:.83rem;color:rgba(255,255,255,.5);
}

/* ------------------------------ inner page templates ------------------------------ */
/* HeroEditorial */
.page-hero{
  padding:calc(var(--section-y) * .55) 0;
  background:linear-gradient(168deg,var(--mist) 0%,var(--pearl) 60%,#fff 100%);
  border-bottom:1px solid var(--line-soft);
}
.page-hero-inner{max-width:820px}
.page-hero h1{margin-bottom:var(--s3)}
.page-hero .lede{font-size:1.16rem}
.page-hero .btn{margin-top:var(--s4)}

.breadcrumb{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--midnight-55);margin-bottom:var(--s3)}
.breadcrumb a{color:var(--blue-ink);font-weight:600}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span[aria-hidden]{color:var(--midnight-55)}

/* Editorial prose blocks */
.prose{max-width:var(--measure)}
.prose h2{margin-top:var(--s8);font-size:clamp(1.4rem,2.4vw,1.9rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--s5);font-size:1.15rem}
.prose p,.prose li{color:var(--midnight-70)}
.prose ul{display:flex;flex-direction:column;gap:10px;margin:var(--s2) 0 var(--s3)}
.prose ul li{display:flex;gap:12px;align-items:flex-start}
.prose ul li::before{
  content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-top:.6em;
}

/* Process steps (explainer template) */
.steps{display:grid;gap:var(--s3);counter-reset:step}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;
  padding:var(--s4);border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);
}
.step-num{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.05rem;font-weight:700;
  background:var(--blue-tint);color:var(--blue-deep);
}
.step h3{font-size:1.15rem;margin-bottom:6px}
.step p{color:var(--midnight-70);margin:0}
.step:last-child .step-num{background:var(--teal-tint);color:var(--teal-ink)}

/* Capability / limitation matrix */
.matrix{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.matrix-col{padding:var(--s5) var(--s4);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.matrix-col h3{font-size:1.15rem;margin-bottom:var(--s3);display:flex;align-items:center;gap:10px}
.matrix-col h3 svg{width:22px;height:22px;flex:none}
.matrix-col.is-can{border-top:3px solid var(--teal)}
.matrix-col.is-can h3 svg{color:var(--teal-ink)}
.matrix-col.is-cannot{border-top:3px solid var(--clinical-red);background:var(--pearl)}
.matrix-col.is-cannot h3 svg{color:var(--clinical-red)}
.matrix-col ul{display:flex;flex-direction:column;gap:12px}
.matrix-col li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;color:var(--ink)}
.matrix-col li::before{content:'';flex:none;width:18px;height:18px;border-radius:50%;margin-top:3px;background-position:center;background-repeat:no-repeat;background-size:11px}
.matrix-col.is-can li::before{
  background-color:var(--teal-tint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F7370'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
.matrix-col.is-cannot li::before{
  background-color:var(--status-red-tint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A63A32'%3E%3Cpath d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E");
}

/* Care journey stage cards */
.stage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.stage-card{
  padding:var(--s5) var(--s4);border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);
  scroll-margin-top:calc(var(--header-h) + var(--s5));
}
.stage-card h3{font-size:1.25rem;margin-bottom:var(--s2)}
.stage-card > p{color:var(--midnight-70)}
.stage-card .journey-features{margin-top:var(--s3)}

/* Related journeys */
.related{display:flex;flex-wrap:wrap;gap:var(--s2)}
.related a{
  padding:12px 20px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:.92rem;font-weight:600;color:var(--midnight);min-height:44px;display:inline-flex;align-items:center;
}
.related a:hover{border-color:var(--blue);background:var(--mist)}

/* Professional pain/value rows */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.value-card{padding:var(--s4);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line-soft)}
.value-card h3{font-size:1.05rem;margin-bottom:8px}
.value-card p{font-size:.92rem;color:var(--midnight-70);margin:0}

.partner-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.partner-list li{
  display:flex;gap:12px;align-items:center;padding:14px 18px;
  border-radius:var(--r);background:#fff;border:1px solid var(--line-soft);
  font-size:.93rem;color:var(--ink);
}
.partner-list li::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--teal)}

/* ------------------------------ legal document pages ------------------------------ */
.doc-hero{
  padding:calc(var(--section-y) * .45) 0;
  background:linear-gradient(168deg,var(--mist) 0%,var(--pearl) 100%);
  border-bottom:1px solid var(--line-soft);
}
.doc-hero h1{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:10px}
.doc-hero p{color:var(--midnight-70);margin:0;max-width:var(--measure)}
.doc-back{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:.88rem;font-weight:600;color:var(--blue-ink);margin-bottom:var(--s2);
}
.doc-back::before{content:'←'}
html[dir="rtl"] .doc-back::before{content:'→'}
.doc-back:hover{text-decoration:underline}

.doc-body{padding:var(--s10) 0 calc(var(--section-y) * .7)}
.doc-body .container{max-width:880px}
.doc-content{font-size:1rem;color:var(--ink)}
.doc-content h2{font-size:1.22rem;margin:var(--s6) 0 var(--s2);padding-top:var(--s3);border-top:1px solid var(--line-soft)}
.doc-content h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.doc-content p{margin-bottom:14px;color:var(--midnight-70)}
.doc-content a{color:var(--blue-ink);font-weight:600;text-decoration:underline}
.doc-note{
  padding:var(--s3);border-radius:var(--r);margin-bottom:var(--s5);
  background:var(--mist);border:1px solid var(--line-soft);
  font-size:.9rem;color:var(--midnight-70);
}
[data-lang-block]{display:none}
[data-lang-block].is-active{display:block}

/* ------------------------------ motion ------------------------------ */
/* Motion communicates continuity, not excitement (§13). */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
}

/* ------------------------------ responsive ------------------------------ */

/* Collapse the nav before it collides with the primary CTA */
@media (max-width:1140px){
  :root{--header-h:70px}
  .nav-burger{display:grid}
  .header-inner{gap:12px}
  .header-actions{margin-inline-start:auto}
  .site-nav{
    position:fixed;top:calc(var(--header-h) + env(safe-area-inset-top,0px));inset-inline:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border-bottom:1px solid var(--line);
    padding:var(--s2) max(24px,env(safe-area-inset-right,0px)) var(--s4) max(24px,env(safe-area-inset-left,0px));
    box-shadow:0 20px 40px rgba(16,45,58,.12);
    transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .25s ease,opacity .25s ease,visibility .25s ease;
    max-height:calc(100dvh - var(--header-h) - env(safe-area-inset-top,0px));
    overflow-y:auto;z-index:99;-webkit-overflow-scrolling:touch;
  }
  .site-nav.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .site-nav > a,.nav-group > button{width:100%;justify-content:space-between;padding:14px;font-size:.98rem}
  /* No hover-dependent interactions below desktop — dropdown becomes inline */
  .nav-panel{
    position:static;min-width:0;box-shadow:none;border:0;border-inline-start:2px solid var(--line);
    border-radius:0;margin:2px 0 var(--s1) var(--s2);padding:0;
    opacity:1;visibility:visible;transform:none;display:none;
  }
  html[dir="rtl"] .nav-panel{margin:2px var(--s2) var(--s1) 0}
  .nav-group.open .nav-panel{display:block}
  body.nav-open{overflow:hidden}
  body.nav-open::before{
    content:'';position:fixed;inset:calc(var(--header-h) + env(safe-area-inset-top,0px)) 0 0;
    background:rgba(16,45,58,.34);z-index:98;
  }
}

/* Tablet: collapse split proportions, 2-column cards, simplify diagrams (§17.4) */
@media (max-width:1100px){
  :root{--section-y:96px}
  .experience-grid{grid-template-columns:repeat(3,1fr)}
  .principles-grid{grid-template-columns:repeat(2,1fr)}
  .value-grid{grid-template-columns:1fr}
}

@media (max-width:960px){
  :root{--section-y:88px}
  .hero-inner,.gap-grid,.model-grid,.recognition-grid,.physician-grid,.eco-grid,.contact-grid{
    grid-template-columns:1fr;gap:var(--s6);
  }
  .journey-panel{grid-template-columns:1fr;gap:var(--s4);padding:var(--s4)}
  .professional-grid,.matrix,.compare-grid,.stage-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .experience-grid{grid-template-columns:repeat(2,1fr)}

  /* Diagram becomes a vertical sequence */
  .diagram{grid-template-columns:1fr;gap:var(--s2)}
  .diagram-link{height:34px;width:2px;min-width:0;justify-self:center}
  .diagram-link::before{inset-inline-end:auto;inset-block-end:0;top:auto;left:50%;transform:translateX(-50%) rotate(135deg)}
  .diagram-link::after{inset-inline-start:auto;top:0;left:50%;transform:translateX(-50%) rotate(-45deg)}
  .diagram-link i{animation:threadFlowV 3.4s ease-in-out infinite;inset-inline-start:-3px}
  @keyframes threadFlowV{
    0%,100%{top:0;opacity:0}
    20%{opacity:1}
    80%{opacity:1}
    100%{top:100%}
  }
}

@media (max-width:720px){
  :root{--section-y:72px}
  .experience-grid,.principles-grid,.partner-list{grid-template-columns:1fr}
  .lead-form{grid-template-columns:1fr;padding:var(--s4)}
  .clinician-row{grid-template-columns:1fr;gap:2px}
  .sequence{flex-direction:column;align-items:stretch}
  .sequence li{text-align:center}
  .sequence .arrow{transform:rotate(90deg)}

  /* Journey tabs become a horizontally scrollable segmented control */
  .journey-tablist{
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .journey-tablist::-webkit-scrollbar{display:none}
  .journey-tab{flex:0 0 auto;scroll-snap-align:start}
}

@media (max-width:600px){
  :root{--section-y:64px}
  .container{padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
  .display-1{font-size:clamp(1.85rem,7.6vw,2.2rem)}
  .hero-sub{font-size:1.04rem}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .section-head{margin-bottom:var(--s5)}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center;align-items:center}
  .timeline{padding:var(--s4) var(--s2)}
  .timeline-visit .label,.timeline-between{font-size:.7rem}
  .experience-card,.principle,.compare-card,.professional-panel,.stage-card,.matrix-col,.step{padding:var(--s3)}
  .final-inner h2{font-size:1.65rem}
  .btn{white-space:normal}
  .form-actions{align-items:stretch}
  .form-actions .btn,.form-actions .btn-ghost-wa{width:100%;justify-content:center}
}

/* Narrow phones: brand + language toggle + CTA + burger no longer fit on one
   row, and the burger is what gets pushed off-screen. Drop the header CTA and
   fall back to the equivalent action inside the menu (.nav-cta). */
@media (max-width:440px){
  .header-cta{display:none}
  .site-nav > .nav-cta{display:flex}
}

@media (max-width:380px){
  .container{padding-inline:max(14px,env(safe-area-inset-left,0px)) max(14px,env(safe-area-inset-right,0px))}
  .brand-text small{display:none}
}

/* Landscape phones */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding:var(--s5) 0 var(--s6)}
  .site-nav{max-height:calc(100dvh - var(--header-h) - env(safe-area-inset-top,0px))}
}

/* ------------------------------ floating WhatsApp ------------------------------ */
.wa-float{
  position:fixed;
  bottom:calc(26px + env(safe-area-inset-bottom, 0px));
  inset-inline-end:calc(26px + env(safe-area-inset-right, 0px));
  z-index:90;
  width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;
  display:grid;place-items:center;box-shadow:0 12px 30px rgba(37,211,102,.42);
  transition:transform .22s ease,box-shadow .22s ease;
}
.wa-float svg{width:30px;height:30px}
.wa-float:hover{transform:scale(1.08);box-shadow:0 16px 38px rgba(37,211,102,.55)}
.wa-float::before{
  content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);
  animation:waRing 2.4s ease-out infinite;
}
@keyframes waRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}

@media (max-width:600px){
  .wa-float{
    width:52px;height:52px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    inset-inline-end:calc(16px + env(safe-area-inset-right, 0px));
  }
  .wa-float svg{width:27px;height:27px}
}

/* ------------------------------ print ------------------------------ */
@media print{
  .site-header,.site-nav,.header-actions,.final-cta,.reveal{opacity:1;transform:none}
  .site-header{position:static}
  .wa-float{display:none}
  body{background:#fff}
}