/* ============================================================================
   VENDORED FROM THE MARKETING SITE — DO NOT EDIT CASUALLY.

   Source: raimaging-deploy/src/site.css  (jaxonRA26/raimaging-deploy)
   Vendored: 2026-08-12

   The portal used to <link> this straight off https://www.raimaging.com/site.css.
   That meant every portal page load depended on the marketing site being up, and
   any rename there silently unstyled the portal. It is now a local copy.

   THE TRADE-OFF YOU ACCEPTED BY VENDORING THIS:
   marketing-site design changes no longer reach the portal automatically. In
   particular components/portal-nav.tsx mirrors the marketing nav.njk 1:1 and only
   stays visually identical because both sides used to share this stylesheet. If
   the marketing site's brand colors or header change, this file must be
   re-vendored by hand or the two will drift.

   To re-vendor: copy raimaging-deploy/src/site.css over everything below this
   header, keep the header, and bump the ?v= query in app/layout.tsx.

   Verified at vendor time: this file contains no url() or @import, so it has no
   external asset dependencies of its own.
   ============================================================================ */

/* ============================================================
   site.css — Shared styles for every page
   Edit here to update the header, nav, footer, buttons etc.
   ============================================================ */

:root{
    --bg-0:#05070d;--ink:#e8edf7;--ink-dim:#a3acc2;
    --royal:#2554ff;--teal:#14e0c4;
    --stroke:rgba(255,255,255,0.14);--stroke-soft:rgba(255,255,255,0.08);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg-0);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
  h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.02em;line-height:1.15}
  a{color:inherit;text-decoration:none}

  .ambient{position:fixed;inset:0;z-index:-2;overflow:hidden}
  .ambient::before,.ambient::after{content:"";position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(120px);opacity:0.4}
  .ambient::before{background:radial-gradient(circle,var(--royal),transparent 60%);top:-20vw;left:-15vw;animation:drift 22s ease-in-out infinite alternate}
  .ambient::after{background:radial-gradient(circle,var(--teal),transparent 60%);bottom:-25vw;right:-15vw;animation:drift 26s ease-in-out infinite alternate-reverse}
  @keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(8vw,6vw) scale(1.15)}}
  .grid-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%)}

  .glass{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid var(--stroke);border-radius:20px;backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 30px rgba(0,0,0,.35);position:relative;overflow:hidden}
  .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 35%,transparent 65%,rgba(20,224,196,.10));mix-blend-mode:overlay}

  .btn{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;padding:.85rem 1.4rem;font-weight:600;font-size:.95rem;border-radius:999px;cursor:pointer;border:1px solid var(--stroke);background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.02));color:var(--ink);transition:transform .25s,box-shadow .25s,border-color .25s;font-family:inherit}
  .btn-sm{padding:.55rem .95rem;font-size:.85rem}
  .btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.28);box-shadow:0 12px 36px rgba(37,84,255,.35)}
  .btn-teal{background:linear-gradient(135deg,rgba(20,224,196,.85),rgba(11,179,157,.7));border-color:rgba(255,255,255,.25);color:#05070d;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 40px -10px rgba(20,224,196,.6),0 0 0 1px rgba(20,224,196,.35)}
  .btn-teal:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 48px -10px rgba(20,224,196,.75),0 0 0 1px rgba(20,224,196,.55)}
  .btn-arrow{display:inline-block;width:14px;height:14px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:.1rem}
  .btn-arrow-left{display:inline-block;width:12px;height:12px;border-top:2px solid currentColor;border-left:2px solid currentColor;transform:rotate(-45deg);margin-right:.45rem}
  .back-btn{color:var(--teal)}
  .back-btn:hover{color:#7aa3ff;border-color:rgba(20,224,196,.4);box-shadow:0 12px 36px -12px rgba(20,224,196,.5)}

  .container{max-width:1240px;margin:0 auto;padding:0 28px}
  /* Narrow doc pages (news, privacy, hipaa, ct, mri, mammography, etc.) */
  body.page-narrow .container{max-width:880px}
  body.page-narrow footer .container{max-width:1240px}

  /* Header */
  header.glass{position:fixed;top:0;left:0;right:0;z-index:100;width:100%;max-width:none;transform:none;overflow:visible;padding:.55rem max(24px, calc((100% - 1240px) / 2));display:flex;align-items:center;justify-content:space-between;border-radius:0;background:linear-gradient(180deg, rgba(5,7,13,.83), rgba(8,11,22,.80));border:none;border-bottom:1px solid var(--stroke-soft);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:0 4px 24px rgba(0,0,0,.45)}
  nav{display:flex;gap:1.4rem;font-size:.88rem;font-weight:500;color:var(--ink-dim)}
  nav a{position:relative;transition:color .2s;cursor:pointer}
  nav a:hover{color:var(--ink)}
  nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:linear-gradient(90deg,var(--royal),var(--teal));transition:width .3s}
  nav a:hover::after{width:100%}
  nav a.lnq-link{color:#5b8aff;font-weight:700;letter-spacing:.02em;text-shadow:0 0 18px rgba(37,84,255,.45)}
  nav a.lnq-link:hover{color:#7aa3ff}

  /* Who Is On — the same treatment as .lnq-link (glowing accent nav item),
     in teal instead of royal, plus a pulsing dot.

     USED BY THE PORTAL NAV (components/portal-nav.tsx), not this site. The
     marketing header linked to oncall.raimaging.com briefly on 2026-08-19 and
     no longer does; these rules stay in both copies of site.css because the two
     are maintained byte-identical, and the portal still needs them.

     ONE RULE COVERS BOTH MENUS. The mobile menu's element is also a <nav>,
     so `nav a.live-link` (0,1,2) matches there too and outweighs
     `.mobile-menu-inner a` (0,1,1) — which is exactly how .lnq-link already
     stays blue in the mobile menu. No second rule, no media query needed.

     display:flex rather than inline-flex so the mobile menu's border-bottom
     still spans the full row instead of shrinking to the text width. */
  /* The `.active` in the selector list is for the PORTAL's copy of this file,
     where Who Is On is a real page you can be standing on. Without it,
     `nav a.active{color:var(--ink)}` below wins on equal specificity by source
     order and the item turns plain white exactly when you're viewing it — the
     same thing that already happens to .lnq-link on lnq.html. Naming .active
     here outweighs that rule, so the item keeps its teal while `.active::after`
     still draws the you-are-here underline. Inert on the marketing site (no
     such slug), and kept identical so both copies of site.css stay in sync. */
  nav a.live-link,nav a.live-link.active{display:flex;align-items:center;gap:.45rem;color:var(--teal);font-weight:700;letter-spacing:.02em;text-shadow:0 0 18px rgba(20,224,196,.45)}
  nav a.live-link:hover{color:#8ff6e6}
  /* The dot pulses via box-shadow rings, NOT width/height or transform:scale
     on the element itself — a growing box-shadow paints outside the box
     without participating in layout, so the nav never reflows and the label
     next to it never shifts. */
  .live-dot{display:inline-block;flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#2bf5d8;box-shadow:0 0 0 0 rgba(43,245,216,.6),0 0 9px 2px rgba(43,245,216,.5);animation:livePulse 2.2s ease-out infinite}
  @keyframes livePulse{
    0%{box-shadow:0 0 0 0 rgba(43,245,216,.6),0 0 9px 2px rgba(43,245,216,.5)}
    70%{box-shadow:0 0 0 6px rgba(43,245,216,0),0 0 13px 3px rgba(43,245,216,.75)}
    100%{box-shadow:0 0 0 0 rgba(43,245,216,0),0 0 9px 2px rgba(43,245,216,.5)}
  }
  /* The global prefers-reduced-motion block near the bottom of this file stops
     the pulse for anyone who asks for that; the dot keeps its static glow, so
     it still reads as "live" without moving. */
  nav a.active{color:var(--ink)}
  nav a.active::after{width:100%}
  .brand{display:flex;align-items:center;gap:.6rem}
  .brand-logo{height:42px;display:flex;align-items:center}
  .brand-logo svg{height:100%;width:auto;display:block}

  /* Dropdown */
  .nav-dropdown{position:relative;display:inline-flex}
  .nav-dropdown::after{content:"";position:absolute;top:100%;left:-12px;right:-12px;height:14px}
  .nav-trigger{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:.3rem;font-weight:500;transition:color .2s}
  .nav-trigger:hover{color:var(--ink)}
  /* Gradient bar above Team trigger when dropdown is hovered/open */
  .nav-trigger::after{content:"";position:absolute;left:0;top:-6px;width:0;height:2px;background:linear-gradient(90deg,var(--royal),var(--teal));transition:width .3s;pointer-events:none}
  .nav-dropdown:hover .nav-trigger::after,.nav-dropdown.open .nav-trigger::after,.nav-dropdown:focus-within .nav-trigger::after,.nav-trigger.active::after{width:100%}
  .nav-trigger.active{color:var(--ink)}
  .nav-trigger .caret{font-size:.75em;transition:transform .25s}
  .nav-dropdown:hover .nav-trigger .caret,.nav-dropdown.open .nav-trigger .caret{transform:rotate(180deg)}
  .nav-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);min-width:180px;background:linear-gradient(135deg,#0a0d18,#05080f);border:1px solid var(--stroke);border-radius:12px;padding:.3rem;box-shadow:0 16px 40px rgba(0,0,0,.65),0 0 0 1px rgba(37,84,255,.15);display:flex;flex-direction:column;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s .2s;z-index:200}
  .nav-dropdown:hover .nav-panel,.nav-dropdown.open .nav-panel,.nav-dropdown:focus-within .nav-panel{opacity:1;pointer-events:auto;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .2s,transform .2s,visibility 0s 0s}
  .nav-panel a{padding:.4rem .7rem;border-radius:8px;font-size:.85rem;color:var(--ink-dim);white-space:nowrap;transition:background .2s,color .2s}
  .nav-panel a::after{display:none}
  .nav-panel a:hover,.nav-panel a.active{background:rgba(20,224,196,.10);color:var(--ink)}

  /* Right-side header cluster (portal button + hamburger) */
  .header-right{display:flex;align-items:center;gap:.5rem}

  /* Hamburger */
  .hamburger{display:none;background:none;border:1px solid var(--stroke);width:44px;height:44px;border-radius:10px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0;transition:border-color .2s;position:relative;z-index:101;-webkit-tap-highlight-color:rgba(37,84,255,.25);touch-action:manipulation;-webkit-user-select:none;user-select:none}
  .hamburger:hover{border-color:rgba(255,255,255,.32)}
  .hamburger span{display:block;width:18px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s;pointer-events:none}
  .hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  .mobile-backdrop{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s}
  .mobile-backdrop.shown{opacity:1;pointer-events:auto}
  .mobile-menu{display:block;position:fixed;top:64px;left:0;right:0;z-index:95;background:linear-gradient(180deg,rgba(8,11,22,.97),rgba(5,7,13,.94));border-bottom:1px solid var(--stroke);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);transform:translateY(-110%);transition:transform .3s;box-shadow:0 24px 50px rgba(0,0,0,.55)}
  .mobile-menu.open{transform:translateY(0)}
  .mobile-menu-inner{max-width:1240px;margin:0 auto;padding:1.4rem 24px 1.6rem;display:flex;flex-direction:column;gap:.2rem}
  .mobile-menu-inner a{padding:.85rem 0;font-size:1.05rem;font-weight:500;color:var(--ink-dim);border-bottom:1px solid var(--stroke-soft)}
  .mobile-menu-inner a:last-child{border-bottom:none}
  .mobile-menu-inner a:hover,.mobile-menu-inner a.active{color:var(--ink)}
  .mobile-menu-inner a.active{font-weight:600}
  .mobile-section{display:flex;flex-direction:column}
  .mobile-section-label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:700;padding:.65rem 0 .25rem;opacity:.9}
  .mobile-section a{padding-left:1.7rem!important;position:relative}
  .mobile-section a::before{content:"";position:absolute;left:.5rem;top:.85rem;bottom:.85rem;width:2px;background:rgba(20,224,196,.45);border-radius:1px}
  /* Lock body scroll while the mobile menu is open. `overflow:hidden` alone is
     ignored by iOS Safari; `position:fixed` is the only thing that reliably
     stops the page underneath from scrolling. The companion script in base.njk
     saves window.scrollY before locking and restores it on close so toggling
     the menu doesn't jump the user to the top of the page. */
  body.menu-open{overflow:hidden;position:fixed;left:0;right:0;width:100%}

/* ===== Unified footer ===== */
  footer{padding:60px 0 30px;border-top:1px solid var(--stroke-soft);margin-top:60px}
  .foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;margin-bottom:30px}
  .foot h4{font-family:'Space Grotesk',sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);margin-bottom:.9rem}
  .foot ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;padding:0}
  .foot a{color:var(--ink-dim);font-size:.9rem;transition:color .2s}
  .foot a:hover{color:var(--ink)}
  .foot p{color:var(--ink-dim);font-size:.9rem;max-width:36ch;margin-top:.8rem}
  .foot-bottom{display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink-dim);padding-top:20px;border-top:1px solid var(--stroke-soft);flex-wrap:wrap;gap:1rem}
  .foot-bottom .legal-links a{font-size:.8rem;color:var(--ink-dim)}
  .foot-bottom .legal-links a:hover{color:var(--teal)}
  .foot-bottom .social-icons{display:flex;align-items:center;gap:10px}
  .foot-bottom .social-icons a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--stroke-soft);background:rgba(255,255,255,.02);color:var(--ink-dim);transition:all .2s ease}
  .foot-bottom .social-icons a:hover{border-color:rgba(20,224,196,.5);background:rgba(20,224,196,.08);color:var(--teal);box-shadow:0 0 18px rgba(20,224,196,.18)}
  .foot-bottom .social-icons svg{width:15px;height:15px}
  .contact-list a{line-height:1.45}
  .foot .brand-logo{height:42px;display:flex;align-items:center}
  .foot .brand-logo svg{height:100%;width:auto;display:block}

  /* Section heading + subtitle. Subtitle stacks below the h2 (was historically
     a side-by-side flex row in page CSS, which produced awkward 2-3 line
     wraps next to the heading; vertical stack reads better on every width). */
  .sec-head{display:flex;flex-direction:column;gap:.6rem;margin-bottom:36px}
  .sec-head h2{font-size:clamp(1.8rem,3.2vw,2.8rem);font-weight:700;margin-top:.6rem}
  .sec-head h2 .grad{background:linear-gradient(120deg,#fff 0%,var(--teal) 100%);-webkit-background-clip:text;color:transparent}
  .sec-head p{color:var(--ink-dim);font-size:1rem;max-width:60ch}
  @media (max-width:600px){
    .hero{padding:100px 0 20px}
    .hero h1{font-size:clamp(1.9rem,7vw,2.8rem)}
    .doc-body{padding:22px 18px}
    .doc-body h2{font-size:1.15rem}
    .draft-banner{padding:.7rem .9rem;font-size:.85rem}
  }
  /* ============================================================
     Mobile breakpoints — swap desktop nav for hamburger, tighten
     padding so the header + content fit on phone-class screens.
     ============================================================ */
  @media (max-width:980px){
    nav{display:none}
    .hamburger{display:flex}
    /* Whenever the hamburger is the way to reach nav, the Physician Portal
       pill leaves the header too — it lives at the bottom of the mobile menu
       (.menu-cta) instead. Keeps the header to logo + hamburger so they
       always fit, even on a tablet in portrait. */
    .btn.header-portal{display:none}
    .foot{grid-template-columns:1fr 1fr;gap:32px}
  }
  @media (max-width:600px){
    .container{padding:0 16px}
    header.glass{padding:.5rem 16px}
    .brand-logo{height:34px}
    .hamburger{width:42px;height:42px}
    header.glass .btn{padding:.45rem .75rem;font-size:.78rem}
    .mobile-menu-inner{padding:1.4rem 16px 1.6rem}
    .foot{grid-template-columns:1fr;gap:24px}
  }
  /* CTA pinned at the bottom of the mobile menu. Visible only when the menu is */
  /* open, so it doesn't need a viewport guard. */
  .mobile-menu-inner .menu-cta{
    display:flex;justify-content:center;align-items:center;gap:.4rem;
    margin-top:18px;padding:.85rem 1.2rem;
    font-size:.95rem;font-weight:700;
    border-bottom:none !important;
    color:#05070d;
  }
  .mobile-menu-inner .menu-cta:hover{color:#05070d}


  /* Skip-to-content link (WCAG 2.4.1) */
  .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--teal);color:#000;padding:.65rem 1.1rem;border-radius:0 0 10px 10px;font-weight:700;text-decoration:none;font-size:.9rem}
  .skip-link:focus{left:50%;transform:translateX(-50%)}

  /* Respect prefers-reduced-motion (WCAG 2.3.3) */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
    .ambient,.ambient::before,.ambient::after{animation:none !important}
  }

  /* Scale layout for larger monitors (≥1500px / 4K) */
  @media (min-width: 1500px){
    .container{max-width:1500px}
    body.page-narrow .container{max-width:880px}
    body.page-narrow footer .container{max-width:1500px}
    header.glass{padding:.55rem max(24px, calc((100% - 1500px) / 2))}
    .brand-logo{height:46px}
  }
  @media (min-width: 1800px){
    html{font-size:17.5px}
    .container{max-width:1680px}
    body.page-narrow .container{max-width:920px}
    body.page-narrow footer .container{max-width:1680px}
    header.glass{padding:.55rem max(24px, calc((100% - 1680px) / 2))}
    .brand-logo{height:50px}
    nav{gap:1.6rem}
  }
  @media (min-width: 2400px){
    html{font-size:19px}
    .container{max-width:1920px}
    body.page-narrow .container{max-width:1040px}
    body.page-narrow footer .container{max-width:1920px}
    header.glass{padding:.6rem max(28px, calc((100% - 1920px) / 2))}
    .brand-logo{height:58px}
    nav{gap:1.8rem;font-size:.92rem}
  }
  @media (min-width: 3200px){
    html{font-size:22px}
    .container{max-width:2240px}
    body.page-narrow .container{max-width:1200px}
    body.page-narrow footer .container{max-width:2240px}
    header.glass{padding:.7rem max(32px, calc((100% - 2240px) / 2))}
    .brand-logo{height:68px}
    nav{gap:2rem;font-size:.94rem}
  }

  /* Align last Contact item (email) with last Patients item */
  footer .foot > div:nth-child(4){display:flex;flex-direction:column}
  footer .foot > div:nth-child(4) ul.contact-list{display:flex;flex-direction:column;gap:.5rem;flex:1}
  footer .foot > div:nth-child(4) ul.contact-list li:last-child{margin-top:auto}

  /* Align last Contact item (email) with last Patients item */
  footer .foot > div:nth-child(4){display:flex;flex-direction:column}
  footer .foot > div:nth-child(4) ul.contact-list{display:flex;flex-direction:column;gap:.5rem;flex:1}
  footer .foot > div:nth-child(4) ul.contact-list li:last-child{margin-top:auto}