/* Tashkheesa marketing surface — the laptop-reveal home page.
 *
 * Everything down to "PORT ADDITIONS" is the <style> block of the approved
 * reference (docs/redesign/home-laptop-reveal.html), verbatim. The only edit
 * is the two laptop-plate url()s, which now point at ../img/home/ (relative,
 * so the sheet works from /site/styles/ today and from any future mount).
 *
 * Do not retune the :root tokens, the @keyframes, the
 * @supports (animation-timeline: scroll()) block or the prefers-reduced-motion
 * block: with the data-rv / animation-range pairs in
 * views/partials/hero-reveal.ejs they are the choreography. What the portal
 * needed beyond the reference (the phone menu, the emergency line, Arabic,
 * the live specialty grid) is in the PORT ADDITIONS block at the end and
 * overrides by cascade; it never edits a rule above it.
 *
 * Loaded by views/index.ejs only. It must NOT be loaded next to /styles.css or
 * the portal sheets: its element rules (body, a, h1-h3, p, img) are unscoped
 * and --muted / --font-body / .btn / .site-header / .brand collide.
 */
/* ============ tokens ============ */
:root{
  --cream:#F8F5EF; --paper:#FFFFFF; --ink:#0F1E2D;
  --teal:#0B6B5F; --teal-deep:#084F46; --teal-ink:#06352F; --stage:#050F0E;
  --teal-tint:#E4F1ED; --teal-tint-2:#DDF0EB; --teal-line:#BFDBD3;
  --brass:#B38B3E; --brass-light:#D9B86A; --brass-dark:#9C7730; --brass-tint:#F3E8D2;
  --line:#E3DCCB; --muted:#55606B; --body:#3B4650; --on-dark-muted:#CFE0DC;
  --ok:#22c55e;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font-display:Fraunces, Georgia, serif;
  --font-body:Inter, system-ui, sans-serif;
  --font-ar:'Noto Sans Arabic', sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--stage);color:var(--cream);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--teal)}
h1,h2,h3{margin:0}
p{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-left:40px;padding-right:40px}
@media (max-width:760px){.wrap{padding-left:20px;padding-right:20px}}
.display{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;line-height:1.06}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:14px 24px;border-radius:12px;font-weight:600;font-size:16px;text-decoration:none;transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn-brass{background:var(--brass);color:var(--ink)}
.btn-brass:hover{background:var(--brass-dark);box-shadow:0 10px 24px -12px rgba(179,139,62,.7)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-deep)}
.btn-ghost-dark{color:var(--cream);border:1.5px solid rgba(248,245,239,.5)}
.btn-ghost-dark:hover{background:rgba(248,245,239,.1)}
.card{transition:transform .24s var(--ease),box-shadow .24s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -24px rgba(15,30,45,.28)}

/* ============ header ============ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:30;background:rgba(6,53,47,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(248,245,239,.08);view-transition-name:site-header}
.nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream);margin-right:auto;view-transition-name:brand}
.brand .tile{width:36px;height:36px;border-radius:10px;background:var(--brass);display:inline-flex;align-items:center;justify-content:center}
.brand .name{display:flex;flex-direction:column;line-height:1}
.brand .name b{font-size:18px;letter-spacing:-.01em}
.brand .name span{font-family:var(--font-ar);font-weight:700;font-size:12px;color:var(--brass-light);margin-top:3px}
.nav a.link{text-decoration:none;color:var(--cream);font-weight:500;font-size:15px;transition:color .15s ease}
.nav a.link:hover{color:var(--brass-light)}
.nav .ar{font-family:var(--font-ar);font-weight:600;font-size:14px;padding:6px 10px;border:1px solid rgba(248,245,239,.35);border-radius:999px}
.nav .btn{min-height:44px;padding:12px 20px;font-size:15px}
@media (max-width:900px){.nav a.link{display:none}.nav .ar{display:none}}

/* ============ the opening ============ */
.rv{height:calc(2700px + 100vh);position:relative;background:var(--stage)}
.rv-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:84px}
.rv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0}
.rv-scrim{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 28%,rgba(5,15,14,0) 0%,rgba(5,15,14,.6) 42%,var(--stage) 82%)}
.rv-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none}
.rv-lock .tile{width:64px;height:64px;border-radius:18px;background:var(--brass);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 80px rgba(179,139,62,.35)}
.rv-lock b{font-size:22px;letter-spacing:-.01em}
.rv-lock span{font-family:var(--font-ar);font-weight:700;font-size:16px;color:var(--brass-light)}
.rv-cue{position:absolute;bottom:26px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8FB5AD;z-index:5}
.rv-cue i{display:block;width:120px;height:2px;background:rgba(248,245,239,.14);border-radius:2px;overflow:hidden}
.rv-cue i b{display:block;height:100%;width:100%;background:var(--brass-light);transform-origin:0 50%;transform:scaleX(0)}
.rv-head{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:900px;padding:0 24px;opacity:0}
.rv-head h1{font-size:clamp(34px,5vw,54px);line-height:1.02}
.rv-head h1 em{font-style:italic;color:var(--brass-light)}
.rv-head p.lede{font-size:16px;color:var(--on-dark-muted);max-width:580px}
.rv-head .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}

/* --- the laptop: a real 3D object (lid + keyboard deck) --- */
.rv-laptop{position:relative;z-index:1;width:min(880px,82vw,calc((100vh - 560px) * 1.6));margin-top:22px;perspective:1700px;perspective-origin:50% 18%;opacity:0}
.rv-body{position:relative;transform-style:preserve-3d;transform:rotateX(6deg)}
.rv-lid{position:relative;z-index:2;transform-origin:50% 100%;transform-style:preserve-3d;background:#111114;border:2px solid #2E2E33;border-bottom:none;border-radius:16px 16px 4px 4px;padding:12px 12px 16px;transform:rotateX(-102deg);backface-visibility:hidden}
.rv-lidback{position:absolute;inset:-2px;border-radius:16px 16px 4px 4px;background:#141417 url(../img/home/laptop-lid.jpg) center/cover no-repeat;transform:rotateX(180deg) translateZ(1px);backface-visibility:hidden;display:flex;align-items:center;justify-content:center}
.rv-lidback .tile{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center}
.rv-screen{position:relative;background:#0A0A0C;border-radius:10px;overflow:hidden;aspect-ratio:16/10;backface-visibility:hidden;box-shadow:0 0 0 rgba(11,107,95,0)}
.rv-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:14px;background:#0A0A0C;border-radius:0 0 8px 8px;z-index:3}
.rv-ui{position:absolute;inset:0;background:var(--cream);color:var(--ink);display:flex;font-size:13px;line-height:1.4;opacity:0}
.rv-ui aside{width:22%;background:var(--teal-ink);color:var(--cream);padding:22px 18px;display:flex;flex-direction:column;gap:14px}
.rv-ui aside .b{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.rv-ui aside .b i{width:22px;height:22px;border-radius:6px;background:var(--brass);display:inline-block}
.rv-ui aside span{padding:8px 10px;color:var(--on-dark-muted)}
.rv-ui aside span.on{margin-top:10px;border-radius:8px;background:rgba(248,245,239,.12);font-weight:600;color:var(--cream)}
.rv-ui main{flex:1;padding:26px 28px;display:flex;flex-direction:column;gap:16px;min-width:0}
.rv-ui .top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rv-ui .top .t{font-family:var(--font-display);font-size:22px;letter-spacing:-.01em}
.rv-ui .top .n{font-size:12px;font-weight:600;background:var(--teal);color:var(--cream);padding:6px 12px;border-radius:999px}
.rv-ui .case{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.rv-ui .case .r{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rv-ui .case .r b{font-size:15px}
.pill-ok{font-size:11px;font-weight:600;color:#0F6B3A;background:#E4F5EA;padding:4px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.pill-ok i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:inline-block}
.rv-ui .case .m{font-size:12px;color:var(--muted)}
.rv-ui .doc{display:flex;gap:10px;align-items:center;padding:10px 12px;background:var(--teal-tint);border-radius:8px}
.rv-ui .doc i{width:28px;height:28px;border-radius:50%;background:var(--teal-line);display:inline-block;flex-shrink:0}
.rv-ui .doc .w{display:flex;flex-direction:column;min-width:0}
.rv-ui .doc .w b{font-size:12px}
.rv-ui .doc .w span{font-size:11px;color:var(--muted)}
.rv-ui .doc a{margin-left:auto;font-size:11px;font-weight:600;color:var(--teal);text-decoration:none;white-space:nowrap}
.rv-ui .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rv-ui .steps div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px}
.rv-ui .steps span{font-size:11px;color:var(--muted)}
.rv-ui .steps b{font-size:12px}
.rv-deck{position:absolute;top:100%;left:0;right:0;z-index:1;aspect-ratio:4/3.1;transform-origin:50% 0%;transform:rotateX(78deg);background:#0B0B0D url(../img/home/laptop-deck.jpg) center top/100% auto no-repeat;border-radius:4px 4px 22px 22px;box-shadow:0 60px 80px -30px rgba(0,0,0,.9)}
.rv-deckglow{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(11,107,95,.55) 0%,rgba(11,107,95,.12) 38%,rgba(11,107,95,0) 70%);opacity:0;mix-blend-mode:screen}
.rv-floor{position:absolute;left:-6%;right:-6%;top:100%;height:34%;transform-origin:50% 0%;transform:rotateX(78deg) translateZ(-6px);background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,.85),rgba(0,0,0,0) 70%);z-index:0}

/* floating cards: scroll-driven arrival, then a slow idle float */
.rv-card{position:absolute;z-index:4;width:250px;opacity:0}
.rv-card .in{border-radius:14px;padding:16px 18px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:6px;animation:idle 6s ease-in-out infinite}
.rv-card .k{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.rv-card b{font-size:15px}
.rv-card .s{font-size:12px}
.rv-c1{left:6%;top:38%}.rv-c1 .in{background:#fff;color:var(--ink)}.rv-c1 .k{color:var(--brass)}.rv-c1 .s{color:var(--muted)}
.rv-c2{right:6%;top:42%;width:230px}.rv-c2 .in{background:var(--teal);color:var(--cream);animation-delay:-2s}.rv-c2 .k{color:var(--brass-light)}.rv-c2 .s{color:var(--on-dark-muted)}
.rv-c3{left:9%;bottom:14%;width:240px}.rv-c3 .in{background:var(--brass-tint);color:var(--ink);animation-delay:-4s}.rv-c3 .k{color:var(--brass-dark)}.rv-c3 .s{color:var(--muted)}
.rv-c4{right:8%;bottom:16%;width:230px}.rv-c4 .in{background:#fff;color:var(--ink);animation-delay:-1s}.rv-c4 .s{color:var(--muted)}
.rv-pills{position:absolute;left:0;right:0;bottom:7%;margin:0 auto;width:fit-content;max-width:90%;z-index:4;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;opacity:0}
.rv-pills span{font-size:13px;font-weight:500;color:var(--cream);background:rgba(248,245,239,.1);border:1px solid rgba(248,245,239,.2);padding:8px 14px;border-radius:999px;backdrop-filter:blur(6px)}
@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:760px){
  .rv-stage{padding-top:84px}
  .rv-head{gap:10px}
  .rv-head p.lede{font-size:15px}
  .rv-head .ctas .btn{min-height:44px;padding:11px 16px;font-size:14px}
  .rv-laptop{margin-top:18px;width:min(92vw,calc((100vh - 470px) * 1.6))}
  .rv-card{width:190px}
  .rv-card .in{padding:12px 14px}
  .rv-card b{font-size:13px}
  .rv-c1,.rv-c2,.rv-c3{display:none}
  .rv-c4{right:4%;bottom:13%}
  .rv-pills{bottom:3%}
  .rv-pills span{font-size:12px;padding:6px 10px}
  .rv-ui aside{display:none}
  .rv-ui main{padding:12px 14px;gap:8px}
  .rv-ui .top .t{font-size:18px}
  .rv-ui .case{padding:10px 12px;gap:6px}
  .rv-ui .case .r b{font-size:13px}
  .rv-ui .doc{display:none}
  .rv-ui .steps{display:none}
}

/* keyframes */
@keyframes rv-bg{from{opacity:0}to{opacity:.42}}
@keyframes rv-lock{from{opacity:1}to{opacity:0}}
@keyframes rv-cue{from{opacity:1}to{opacity:0}}
@keyframes rv-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rv-head{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes rv-laptop{from{opacity:0;transform:translateY(160px) scale(.86)}to{opacity:1;transform:none}}
@keyframes rv-lid{from{transform:rotateX(-102deg)}to{transform:rotateX(14deg)}}
@keyframes rv-ui{from{opacity:0}to{opacity:1}}
@keyframes rv-glow{from{box-shadow:0 0 0 rgba(11,107,95,0)}to{box-shadow:0 0 90px rgba(11,107,95,.45)}}
@keyframes rv-card{from{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.92)}to{opacity:1;transform:none}}

/* scroll-driven (Chrome 115+, Edge, Safari 26+, Firefox 144+); ranges come from inline animation-range */
@supports (animation-timeline: scroll()){
  [data-rv]{animation-timeline:scroll(root);animation-timing-function:linear;animation-fill-mode:both}
  .rv-bg[data-rv]{animation-name:rv-bg}
  .rv-lock[data-rv]{animation-name:rv-lock}
  .rv-cue[data-rv]{animation-name:rv-cue}
  .rv-cue i b[data-rv]{animation-name:rv-bar}
  .rv-head[data-rv]{animation-name:rv-head}
  .rv-laptop[data-rv]{animation-name:rv-laptop}
  .rv-lid[data-rv]{animation-name:rv-lid}
  .rv-ui[data-rv],.rv-deckglow[data-rv]{animation-name:rv-ui}
  .rv-screen[data-rv]{animation-name:rv-glow}
  .rv-card[data-rv],.rv-pills[data-rv]{animation-name:rv-card}
}
@media (prefers-reduced-motion: reduce){
  [data-rv]{animation:none !important}
  .rv-card .in{animation:none !important}
  .rv{height:auto}.rv-stage{position:relative;height:auto;padding-bottom:160px}
  .rv-bg{opacity:.42}.rv-lock,.rv-cue{display:none}
  .rv-head,.rv-laptop,.rv-ui,.rv-card,.rv-pills,.rv-deckglow{opacity:1}.rv-lid{transform:rotateX(14deg)}
  .rv-card,.rv-pills{position:static;margin:12px auto 0}
}

/* page-to-page transitions (multi-page site) */
@view-transition{navigation:auto}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
::view-transition-old(root){animation:vt-out 180ms var(--ease)}
::view-transition-new(root){animation:vt-in 320ms var(--ease)}

/* section reveals for the rest of the page */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
  .reveal{animation:rise .8s var(--ease) both;animation-timeline:view();animation-range:entry 0% entry 38%}
}

/* ============ the page below ============ */
.page{background:var(--cream);color:var(--ink)}
.strip{background:var(--teal-tint-2);color:var(--teal-deep)}
.strip .wrap{padding-top:20px;padding-bottom:20px;display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:center;font-size:14px;font-weight:500}
.strip .dot{width:8px;height:8px;background:var(--brass);border-radius:50%;display:inline-block;margin-right:10px;vertical-align:middle}
.sec{padding-top:104px;padding-bottom:104px;display:flex;flex-direction:column;gap:44px}
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:680px}
.sec-head h2{font-size:clamp(34px,4.5vw,48px)}
.sec-head .lede{font-size:18px;color:var(--body)}
.row{display:flex;flex-wrap:wrap;gap:20px}
.moment{flex:1 1 260px;border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:12px}
.moment .num{font-family:var(--font-display);font-size:36px;line-height:1}
.moment h3{font-size:20px;font-weight:600;letter-spacing:-.01em}
.moment p{font-size:15px}
.m-teal{background:var(--teal);color:var(--cream)}.m-teal .num{color:var(--brass-light)}.m-teal p{color:var(--on-dark-muted)}
.m-tint{background:var(--teal-tint)}.m-tint .num{color:var(--teal)}.m-tint p{color:var(--body)}
.m-brass{background:var(--brass-tint)}.m-brass .num{color:var(--brass)}.m-brass p{color:var(--body)}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:20px}
.step{flex:1 1 250px;display:flex;flex-direction:column;gap:14px;background:#fff;border-radius:18px;padding:28px;border:1px solid var(--line)}
.step .n{width:44px;height:44px;border-radius:50%;background:var(--teal);color:var(--cream);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:20px}
.step h3{font-size:22px;font-weight:600;letter-spacing:-.01em}
.step p{font-size:15px;color:var(--muted)}
.step.last{background:var(--teal-ink);color:var(--cream);border-color:var(--teal-ink)}
.step.last .n{background:var(--brass);color:var(--ink)}
.step.last p{color:var(--on-dark-muted)}
.receive{background:var(--teal-tint)}
.receive .wrap{padding-top:104px;padding-bottom:104px;display:flex;flex-wrap:wrap;gap:64px;align-items:center}
.receive .copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:28px}
.receive ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.receive li{display:flex;gap:14px;align-items:flex-start}
.check{width:28px;height:28px;border-radius:50%;background:var(--teal);color:var(--cream);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.check.brass{background:var(--brass);color:var(--ink)}
.receive .visual{flex:1 1 400px;min-width:0;display:flex;justify-content:center}
.receive .frame{position:relative;width:100%;max-width:540px}
.receive .frame img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;box-shadow:0 40px 80px -40px rgba(6,53,47,.6)}
.receive .tags{position:absolute;left:24px;bottom:24px;display:flex;gap:8px;flex-wrap:wrap}
.receive .tags span{font-size:13px;font-weight:600;color:var(--ink);background:var(--cream);padding:8px 12px;border-radius:999px;box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}
.receive .tags span.t{color:var(--cream);background:var(--teal)}
.hospital{background:var(--teal-ink);color:var(--cream)}
.hospital .wrap{padding-top:96px;padding-bottom:112px;display:flex;flex-direction:column;gap:56px}
.hospital .photo{width:100%;height:520px;object-fit:cover;object-position:50% 45%;border-radius:24px}
.hospital .cols{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;justify-content:space-between}
.hospital .copy{flex:1 1 520px;display:flex;flex-direction:column;gap:22px}
.hospital .copy h2{font-size:clamp(36px,4.8vw,52px)}
.hospital .copy p{font-size:18px;color:var(--on-dark-muted);max-width:600px}
.hospital .copy .eyebrow{color:var(--brass-light)}
.hospital .more{color:var(--brass-light);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.stats{margin:0;flex:1 1 380px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stats div{background:rgba(248,245,239,.07);border:1px solid rgba(248,245,239,.14);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:6px}
.stats dt{font-family:var(--font-display);font-size:48px;line-height:1}
.stats dd{margin:0;font-size:14px;color:var(--on-dark-muted)}
.stats div.brass{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.stats div.brass dd{color:var(--ink)}
@media (max-width:760px){.hospital .photo{height:260px}}
.specs{display:flex;flex-wrap:wrap;gap:14px}
.spec{flex:1 1 200px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--teal-line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:6px;transition:background-color .2s ease,color .2s ease,transform .24s var(--ease),box-shadow .24s ease}
.spec b{font-size:17px}.spec span{font-size:13px;color:var(--teal);font-weight:500}
.spec:hover{background:var(--teal);color:var(--cream);transform:translateY(-3px);box-shadow:0 22px 44px -24px rgba(11,107,95,.5)}
.spec:hover span{color:var(--cream)}
.soon{font-size:14px;color:var(--muted)}
.tiers{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tier{flex:1 1 300px;border:1px solid var(--line);border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:16px;background:var(--cream);position:relative}
.tier .k{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tier .big{font-family:var(--font-display);font-size:56px;line-height:1}
.tier p{font-size:15px;color:var(--muted)}
.tier .price{font-size:14px;font-weight:600;color:var(--teal)}
.tier.vip{background:var(--teal);color:var(--cream);border-color:var(--teal)}
.tier.vip .k,.tier.vip .price{color:var(--brass-light)}.tier.vip p{color:var(--on-dark-muted)}
.tier.vip .badge{position:absolute;top:-12px;left:24px;font-size:12px;font-weight:600;color:var(--ink);background:var(--brass-light);padding:4px 10px;border-radius:999px}
.tier.urgent{background:var(--brass-tint);border-color:#E8D9B5}
.tier.urgent .k,.tier.urgent .price{color:var(--brass-dark)}
.pay{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;font-size:14px;color:var(--muted)}
.pay a{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.faq .wrap{padding-top:104px;padding-bottom:104px;display:flex;flex-wrap:wrap;gap:48px}
.faq .intro{flex:1 1 320px;display:flex;flex-direction:column;gap:14px}
.faq .intro h2{font-size:clamp(32px,4.2vw,44px)}
.faq .intro a{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-top:6px}
.faq .list{flex:2 1 560px;display:flex;flex-direction:column;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 22px}
.faq summary{cursor:pointer;font-weight:600;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:16px;min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{color:var(--teal);font-size:24px;line-height:1;font-style:normal;transition:transform .2s ease;display:inline-block}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details p{margin:12px 0 4px;color:var(--body);max-width:620px}
.cta-wrap{padding:0 40px 104px}
@media (max-width:760px){.cta-wrap{padding:0 20px 80px}}
.cta{max-width:1240px;margin:0 auto;background:var(--teal-ink);color:var(--cream);border-radius:26px;display:flex;flex-wrap:wrap;align-items:stretch;overflow:hidden}
.cta .copy{flex:1 1 480px;padding:64px 56px;display:flex;flex-direction:column;gap:18px;justify-content:center}
.cta .copy h2{font-size:clamp(32px,4.4vw,46px)}
.cta .copy p{font-size:17px;color:var(--on-dark-muted)}
.cta .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.cta img{flex:1 1 420px;min-height:360px;width:100%;object-fit:cover}
@media (max-width:760px){.cta .copy{padding:40px 28px}}
.footer{background:var(--ink);color:#CBD3DA}
.footer .wrap{padding-top:64px;padding-bottom:32px;display:flex;flex-direction:column;gap:40px}
.footer .cols{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.footer .col{flex:0 1 180px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.footer .col.brandcol{flex:1 1 300px;max-width:360px;gap:16px}
.footer .col .h{font-weight:600;color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.footer a{color:#CBD3DA;text-decoration:none}
.footer .bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:13px;color:#8A96A3}

/* ============================================================
   PORT ADDITIONS — not in the reference.
   ============================================================ */

/* Booking held shut (src/services/public_cta.js): "Start your case" renders as
   an inert span instead of a link. */
.btn.is-cta-locked{background:rgba(248,245,239,.14);color:rgba(248,245,239,.62);box-shadow:none;transform:none;cursor:not-allowed;pointer-events:none}

/* ---- "Not for emergencies" (the 6 Oct 2026 safety line; the reference has
   none). Under the Start button in the opening and under the closing CTA. ---- */
.not-emergency{font-size:13px;line-height:1.5;color:var(--on-dark-muted);opacity:.85}
.cta .copy p.not-emergency{font-size:13px;margin-top:2px}
.rv-head p.not-emergency{max-width:520px;margin-top:2px}
/* The line makes the headline block taller: 31px, or 51px on phones where it
   wraps. On desktop the laptop keeps the reference's size and simply sits that
   much lower. The stage crops whatever of the keyboard falls below it, as the
   reference already does on screens taller than about 900px; that now starts
   about 30px sooner (at 1440x900 the front ~22px of the trackpad edge). The
   laptop is sized from what is left of the viewport (the reference's 560px /
   470px budgets), and lid plus keyboard is 0.865 x its width tall, so where
   the extra height WOULD push the keyboard off the stage the budget gives it
   back: on phones (short screens), and in Arabic, whose headline block is
   taller again (see the leading below). 160px is a floor for the very
   shortest phones, where the reference would shrink it to nothing. */
@media (max-width:760px){.rv-laptop{width:min(92vw,max(160px,calc((100vh - 507px) * 1.6)))}}
html[lang="ar"] .rv-laptop{width:min(880px,82vw,calc((100vh - 576px) * 1.6))}
@media (max-width:760px){html[lang="ar"] .rv-laptop{width:min(92vw,max(160px,calc((100vh - 547px) * 1.6)))}}

/* ---- The picture on the laptop's screen scales with the laptop. The laptop
   takes its width from the viewport's height (above): 256px at 1280x720, 230px
   in Arabic. The mock portal on its screen was laid out in fixed px, so on
   short screens it kept its full-size type and only a corner of it showed
   ("Welcome back" and the top of the case card). --u is one pixel of the mock:
   1px wherever the screen is at least as wide as on the approved 1440x900
   frame of its language (516px in English, 490px in Arabic), proportionally
   less below that. A smaller screen shows that frame's composition, smaller,
   and the approved frames are unchanged. Phones show the reference's reduced
   mock (its <=760px rules), calibrated the same way on the approved 390x844
   screen, 330px, in both languages. Below are the reference's own sizes in
   --u; 1px borders stay 1px. The screen is the size container, so --u means
   nothing outside it. ---- */
.rv-screen{container-type:inline-size;--u:min(1px,100cqw / 515)}
@media (min-width:761px){html[lang="ar"] .rv-screen{--u:min(1px,100cqw / 490)}}
.rv-notch{width:calc(120*var(--u));height:calc(14*var(--u));border-radius:0 0 calc(8*var(--u)) calc(8*var(--u))}
.rv-ui{font-size:calc(13*var(--u))}
.rv-ui aside{padding:calc(22*var(--u)) calc(18*var(--u));gap:calc(14*var(--u))}
.rv-ui aside .b{gap:calc(8*var(--u));font-size:calc(14*var(--u))}
.rv-ui aside .b i{width:calc(22*var(--u));height:calc(22*var(--u));border-radius:calc(6*var(--u))}
.rv-ui aside span{padding:calc(8*var(--u)) calc(10*var(--u))}
.rv-ui aside span.on{margin-top:calc(10*var(--u));border-radius:calc(8*var(--u))}
.rv-ui main{padding:calc(26*var(--u)) calc(28*var(--u));gap:calc(16*var(--u))}
.rv-ui .top{gap:calc(12*var(--u))}
.rv-ui .top .t{font-size:calc(22*var(--u))}
.rv-ui .top .n{font-size:calc(12*var(--u));padding:calc(6*var(--u)) calc(12*var(--u))}
.rv-ui .case{border-radius:calc(12*var(--u));padding:calc(16*var(--u)) calc(18*var(--u));gap:calc(10*var(--u))}
.rv-ui .case .r{gap:calc(10*var(--u))}
.rv-ui .case .r b{font-size:calc(15*var(--u))}
.rv-ui .pill-ok{font-size:calc(11*var(--u));padding:calc(4*var(--u)) calc(9*var(--u));gap:calc(6*var(--u))}
.rv-ui .pill-ok i{width:calc(6*var(--u));height:calc(6*var(--u))}
.rv-ui .case .m{font-size:calc(12*var(--u))}
.rv-ui .doc{gap:calc(10*var(--u));padding:calc(10*var(--u)) calc(12*var(--u));border-radius:calc(8*var(--u))}
.rv-ui .doc i{width:calc(28*var(--u));height:calc(28*var(--u))}
.rv-ui .doc .w b{font-size:calc(12*var(--u))}
.rv-ui .doc .w span{font-size:calc(11*var(--u))}
.rv-ui .doc a{font-size:calc(11*var(--u))}
.rv-ui .steps{gap:calc(10*var(--u))}
.rv-ui .steps div{border-radius:calc(10*var(--u));padding:calc(12*var(--u));gap:calc(4*var(--u))}
.rv-ui .steps span{font-size:calc(11*var(--u))}
.rv-ui .steps b{font-size:calc(12*var(--u))}
@media (max-width:760px){
  .rv-screen{--u:min(1px,100cqw / 330)}
  .rv-ui main{padding:calc(12*var(--u)) calc(14*var(--u));gap:calc(8*var(--u))}
  .rv-ui .top .t{font-size:calc(18*var(--u))}
  .rv-ui .case{padding:calc(10*var(--u)) calc(12*var(--u));gap:calc(6*var(--u))}
  .rv-ui .case .r b{font-size:calc(13*var(--u))}
}

/* ---- The opening's buttons are not reachable while they cannot be seen.
   .rv-head fades in over 380–820px of scroll; until it is half way (600px)
   its CTAs are visibility:hidden — out of the tab order, not clickable. Only
   the buttons: the <h1> stays in the accessibility tree throughout. The range
   repeats .rv-head's data-rv (tests/core/home-laptop-reveal.test.js checks the
   two agree); browsers without scroll timelines get the same switch from
   public/js/home-motion.js. If neither runs, the buttons simply stay reachable. ---- */
@keyframes rv-ctas{0%,50%{visibility:hidden}50.01%,100%{visibility:visible}}
@supports (animation-timeline: scroll()){
  .rv-head .ctas{animation-name:rv-ctas;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root);animation-range:380px 820px}
}
@media (prefers-reduced-motion: reduce){.rv-head .ctas{animation:none !important}}

/* ---- Phone / tablet header. The reference hides every nav link at ≤900px
   and leaves the logo and Start; this adds a menu button and a panel holding
   the links, Sign in and the language switch. A native <details>: no script
   needed to open it. One row at every width down to 320px.
   The menu takes over at ≤1100px, not ≤900px: the full link row needs about
   1,080px (1,100px in Arabic), and between 901px and there the reference
   wraps it onto a second row that covers the top of the opening. ---- */
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:12px;border:1.5px solid rgba(248,245,239,.35);color:var(--cream);display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.menu summary::-webkit-details-marker{display:none}
.menu summary::marker{content:""}
.menu[open] summary{background:rgba(248,245,239,.12)}
.menu .i-close{display:none}
.menu[open] .i-close{display:block}
.menu[open] .i-open{display:none}
.menu summary:focus-visible,.menu-panel a:focus-visible{outline:2px solid var(--brass-light);outline-offset:3px}
.menu-panel{position:absolute;top:100%;inset-inline:0;display:flex;flex-direction:column;padding:6px 20px 20px;background:var(--teal-ink);border-top:1px solid rgba(248,245,239,.08);border-bottom:1px solid rgba(248,245,239,.12);box-shadow:0 28px 40px -28px rgba(0,0,0,.7);max-height:calc(100vh - 73px);max-height:calc(100dvh - 73px);overflow-y:auto}
.menu-panel a{display:flex;align-items:center;min-height:50px;color:var(--cream);text-decoration:none;font-weight:500;font-size:17px;border-bottom:1px solid rgba(248,245,239,.08)}
.menu-panel a:hover{color:var(--brass-light)}
.menu-panel a.menu-lang{align-self:flex-start;min-height:44px;margin-top:14px;padding:0 16px;border:1px solid rgba(248,245,239,.35);border-radius:999px;font-family:var(--font-ar);font-weight:600;font-size:15px}
.menu-panel a.menu-lang:lang(en){font-family:var(--font-body)}
@media (max-width:1100px){
  .nav a.link,.nav .ar{display:none}
  .menu{display:block}
  .nav{flex-wrap:nowrap;gap:10px}
  .nav .btn{white-space:nowrap}
  .brand{min-width:0}
}
@media (min-width:761px) and (max-width:1100px){.menu-panel{padding-left:40px;padding-right:40px}}
@media (max-width:420px){
  .nav .btn{padding:12px 14px;font-size:14px}
}
@media (max-width:374px){
  .wrap.nav{padding-left:14px;padding-right:14px}
  .nav{gap:8px}
  .brand{gap:8px}
  .brand .tile{width:32px;height:32px;border-radius:9px}
  .brand .name b{font-size:16px}
  .nav .btn{padding:12px 12px}
  .menu-panel{padding-left:14px;padding-right:14px}
}
@media (max-width:339px){.brand .name{display:none}}

/* ---- Floating cards on tablets. The reference keeps all four down to 761px,
   where they sit on top of the laptop's screen (the laptop is 82vw wide there).
   Up to 1100px they now get what phones get: the three side cards go and
   "Report ready" stays, in its phone size and place. These are the reference's
   own <=760px card rules, on a wider query. ---- */
@media (max-width:1100px){
  .rv-card{width:190px}
  .rv-card .in{padding:12px 14px}
  .rv-card b{font-size:13px}
  .rv-c1,.rv-c2,.rv-c3{display:none}
  .rv-c4{right:4%;bottom:13%}
}

/* ---- The specialty grid is the live catalogue, so the number of cards varies.
   Same columns as the reference's flex row (200px minimum, 14px gap) — a full
   row is laid out identically — but as a grid, so a short last row keeps the
   card width instead of stretching two cards across the page. ---- */
.specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

/* The Play badge row (partials/app_badge) sits under the closing CTA and in the
   footer, only when PLAY_STORE_URL is set. */
.cta .tk-app-badge-row{margin-top:4px}

/* ---- Arabic (/ar/). ---- */
/* Latin keeps Inter / Fraunces; Arabic glyphs, which neither face has, fall
   through to Noto Sans Arabic. */
html[lang="ar"]{--font-display:Fraunces,'Noto Sans Arabic',Georgia,serif;--font-body:Inter,'Noto Sans Arabic',system-ui,sans-serif}
/* Letter-spacing pulls joined Arabic letters apart. :lang() follows the nearest
   lang attribute, so the English screen mock keeps the reference tracking. */
h1:lang(ar),h2:lang(ar),h3:lang(ar),.eyebrow:lang(ar),.display:lang(ar),.footer .col .h:lang(ar),.tier .k:lang(ar),.rv-card .k:lang(ar),.rv-cue:lang(ar){letter-spacing:0}
/* Arabic sits taller on the line than Latin (marks above, tails below); the
   reference's 1.02–1.06 display leading makes two-line Arabic headings touch. */
.display:lang(ar){line-height:1.3}
.rv-head h1:lang(ar){line-height:1.22}
/* "48 ساعة": the figure, then its unit small beside it (English is "48h"). */
.tier .big small,.stats dt small{font-family:var(--font-body);font-size:.36em;font-weight:600;letter-spacing:0}
/* The language switch reads "English" on the Arabic page. */
.nav .ar:lang(en){font-family:var(--font-body)}
/* Direction-neutral spellings of the reference's physical offsets. Each pair
   computes to the reference value in LTR and mirrors in RTL. */
.brand{margin-right:0;margin-inline-end:auto}
.strip .dot{margin-right:0;margin-inline-end:10px}
.receive .tags{left:auto;inset-inline-start:24px}
.tier.vip .badge{left:auto;inset-inline-start:24px}
.rv-ui .doc a{margin-left:0;margin-inline-start:auto}
/* "→" links point the way the text runs. */
html[dir="rtl"] .hospital .more svg,html[dir="rtl"] .pay a svg,html[dir="rtl"] .faq .intro a svg{transform:scaleX(-1)}

/* ============ the one-question card (10 Nov 2026) ============ */
/* Directly under the opening, on the cream page. The card itself is
   partials/one_question_card.ejs and carries its own styles (it is also on
   /start); only its place on this page is set here. */
.oq-home{padding:36px 0 28px}
.oq-home .oq-card h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em}
.oq-home .oq-card h2:lang(ar){letter-spacing:0}
@media (max-width:760px){.oq-home{padding:24px 0 20px}}