/* Shared page chrome for the Medsy sub-pages.
   NARROW BY DESIGN: this file holds only what an inline style cannot express —
   scroll-reveal states, keyframes, focus rings and the body reset. Every piece
   of element styling on these pages stays inline, so each page paints as it
   streams instead of waiting on a stylesheet. */

body { margin: 0; background: var(--white); overflow-x: clip;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, system-ui, sans-serif; }

/* The deep band is capped at forest: the on-dark ink tokens were calibrated
   against its darkest stop, so a brighter end would let identical copy pass or
   fail contrast depending only on where the gradient put it. */
:root { --grad-deep: linear-gradient(150deg,#052f21 0%,#0a4e35 46%,#0d6040 100%); --on-dark-muted: rgba(255,255,255,.82); }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

a { color: var(--text-brand); text-decoration: none; }
a:hover { color: var(--text-strong); }
/* Focus. The system's ring is a forest outline inside a mint halo, calibrated
   for light surfaces. A blanket mint outline here replaced BOTH — mint on white
   is ~1.5:1, so the ring was effectively invisible on every light section of
   every sub-page. Light surfaces keep the system ring; only the deep bands swap
   the outline colour, which is the model the landing page already uses. */
[data-band="deep"] a:focus-visible, [data-band="deep"] button:focus-visible,
[data-band="deep"] input:focus-visible, [data-band="deep"] select:focus-visible,
[data-band="deep"] textarea:focus-visible, [data-band="deep"] [tabindex]:focus-visible {
  outline-color: var(--mint);
}
::selection { background: var(--mint); color: var(--forest-900); }

/* NO cross-document @view-transition here, deliberately. It was tried and
   removed: a declarative navigation transition hands its ready/finished
   promises to nobody, so every navigation the browser SKIPS (an interrupted
   click, a host that re-navigates the frame, a document that turns out to be
   ineligible) surfaces as "Unhandled rejection: Transition was skipped" with
   no owner to catch it. A page-to-page cross-fade is not worth an uncatchable
   console error on a production site — and these pages already open with real
   entrance choreography of their own (the hero's riseIn cascade and the
   data-rv reveals below it), which is the same spatial arrival, owned by us. */

/* Scroll reveal. Content is VISIBLE by default and only hidden once the engine
   has confirmed it can reveal it again (html.rv is set by site-motion.js after
   checking IntersectionObserver and the motion preference). The worst failure
   is a skipped entrance, never missing copy. */
[data-rv] { transition: opacity .62s var(--ease-standard, cubic-bezier(.2,.7,.3,1)), transform .62s var(--ease-standard, cubic-bezier(.2,.7,.3,1)); }
html.rv [data-rv] { opacity: 0; transform: translateY(24px); }
html.rv [data-rv="l"] { transform: translateX(-30px); }
html.rv [data-rv="r"] { transform: translateX(30px); }
html.rv [data-rv="s"] { transform: scale(.955); }
html.rv [data-rv="in"] { opacity: 1; transform: none; }

/* Footer columns. Four blocks in an auto-fit grid pass through a THREE-column
   state — one block alone on row two with two thirds of the row empty — across
   roughly 790-1090px, which is exactly where iPad landscape sits. Four blocks
   only balance at 4, 2 or 1, so the steps are declared rather than inferred
   from a track minimum. Both footers share this rule. */
.sf-logo { filter: brightness(0) invert(1); }
.sf-link { display: flex; align-items: center; min-height: var(--tap, 22px); font-size: 14px;
  color: var(--on-dark-muted) !important; transition: color var(--dur-hover) var(--ease-standard), transform var(--dur-hover) var(--ease-standard); }
.sf-link:hover { color: var(--white) !important; transform: translateX(3px); }
.sf-link[aria-current="page"] { color: var(--white) !important; font-weight: 650; }
.sf-soc { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; color: var(--on-dark-text) !important;
  transition: transform var(--dur-hover) var(--ease-standard), background var(--dur-hover) var(--ease-standard), border-color var(--dur-hover) var(--ease-standard), color var(--dur-hover) var(--ease-standard); }
.sf-soc:hover { background: rgba(255,255,255,.1); border-color: var(--white); color: var(--white) !important; transform: translateY(-3px); }
.sf-soc:active { transform: scale(.94); }
.sf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1120px) { .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sf-grid { grid-template-columns: minmax(0, 1fr); } }

/* Breadcrumb. The links declare their rest colour inline, so neither the
   document a:hover nor a class rule could reach them — the trail was dead to a
   pointer on all six pages, and its 16px box was half the touch minimum. */
nav[aria-label="Breadcrumb"] a { display: inline-flex; align-items: center; min-height: var(--tap, 24px);
  transition: color var(--dur-hover) var(--ease-standard); }
nav[aria-label="Breadcrumb"] a:hover, nav[aria-label="Breadcrumb"] a:focus-visible { color: var(--mint) !important; }

.sk { position: absolute; left: 14px; top: 10px; z-index: 60; transform: translateY(-160%);
  background: var(--white); color: var(--text-brand); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 10px 18px; font-size: 14px; font-weight: 650;
  box-shadow: var(--shadow-md); transition: transform var(--dur-control, .22s) var(--ease-standard, ease); }
.sk:focus { transform: none; }

@keyframes riseIn { from { opacity: 0; transform: translate3d(0,26px,0); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes spinBack { to { transform: rotate(-360deg); } }
@keyframes orbBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ringPulse { 0%, 100% { transform: scale(1); opacity: .48; } 55% { transform: scale(1.17); opacity: 0; } }
@keyframes dashRun { to { stroke-dashoffset: -260; } }

.sp-slow { animation: spinSlow 46s linear infinite; }
.sp-back { animation: spinBack 62s linear infinite; }
.bob { animation: orbBob 7.5s ease-in-out infinite; }

/* Icon plinth — the tactile mint tile used across the whole product surface.
   Two stacked hard shadows read as a lifted physical chip rather than a blur.

   This is ONE object and it must look like one object everywhere. These pages
   had been carrying a saturated mint-500 tile with forest-900 ink and a 2px
   slide on hover, while the landing page's .v-plinth — the same chip, in ten
   times as many places — is a pale mint-200-to-white gradient with brand ink
   that turns and grows under the pointer. Side by side the two read as two
   different components, and the sub-pages' saturated version also flattened
   the icon inside it (forest-900 on mint-500 is a much lower-contrast pairing
   than brand ink on a near-white tile). Both the resting look and the hover
   now match .v-plinth exactly, so a visitor crossing from the landing page to
   About or Team meets the same physical chip. */
.plinth { background: linear-gradient(150deg, var(--mint-200), var(--mint-100) 58%, var(--white));
  color: var(--text-brand);
  box-shadow: 2px 3px 0 rgba(11,82,56,.24), 3px 5px 0 rgba(11,82,56,.12),
              0 10px 16px -10px rgba(6,58,40,.42), inset 0 1px 0 rgba(255,255,255,.85);
  transition: transform .45s var(--ease-spring, ease), box-shadow .3s var(--ease-standard, ease),
              background .3s var(--ease-standard, ease), color .3s var(--ease-standard, ease); }
.plinth svg { position: relative; z-index: 1; }
[data-lift]:hover .plinth, [data-lift]:focus-within .plinth, .plinth:hover {
  transform: rotate(-6deg) scale(1.09);
  box-shadow: 3px 5px 0 rgba(11,82,56,.32), 5px 8px 0 rgba(11,82,56,.16),
              0 18px 26px -12px rgba(6,58,40,.5), inset 0 1px 0 rgba(255,255,255,.7); }
@media (prefers-reduced-motion: reduce) { .plinth { transition: none; } }
.plinth-d { background: linear-gradient(155deg,rgba(255,255,255,.22) 0%,rgba(95,232,177,.34) 100%); color: var(--mint);
  box-shadow: 2px 3px 0 rgba(3,32,22,.4), 4px 6px 0 rgba(3,32,22,.2), inset 0 1px 0 rgba(255,255,255,.28); }

/* Dark-surface secondary button. The design system has no such variant — every
   one of its seven (primary, secondary, soft, outline, ghost, dark, danger) is
   authored for a light surface, and ghost in particular resolves to forest ink
   on a transparent fill, which lands at 1:1 against a --forest panel. This
   supplies ONLY the missing colours and inherits .btn/.btn-lg for metrics,
   radius, press and focus, so it stays in step if the system's buttons change.
   It matches the outline treatment the hero chips on these pages already use,
   so a primary + secondary pair still reads as a pair. */
.btn-onDark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.26); color: var(--on-dark-text, #fff);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-decoration: none; }
.btn-onDark:hover { background: rgba(255,255,255,.16); border-color: var(--mint); color: var(--white); }
.btn-onDark:focus-visible { outline: none; box-shadow: 0 0 0 5px var(--focus-ring); }

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

/* Touch targets. Size follows the POINTER, not the viewport — a 1024px tablet
   is touch while a 900px laptop window is not, so a width breakpoint would
   coarsen the wrong devices and still miss the right ones. */
@media (pointer: coarse) {
  :root { --tap: 44px; }
  /* Controls that can grow, grow. The system's buttons compute to ~43px — one
     pixel short of the minimum, and a floor never shrinks a taller size. */
  .btn { min-height: 44px; }
  /* Controls locked into a drawn composition get an invisible hit box instead,
     so the visual and the surrounding layout stay pixel-identical. The social
     circles are a fixed 36px disc: growing the disc would break the row. */
  .tapx, .sf-soc { position: relative; }
  .tapx::after, .sf-soc::after { content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%,-50%); width: max(100%, 44px); height: max(100%, 44px); }
}

/* Reading progress + scroll shadow for the sub-page header — the same
   wayfinding the landing page's own header carries, delivered as a pure CSS
   scroll-driven animation so these lighter pages stay JS-free. Progressive:
   without scroll-timeline support the bar simply never shows and the header
   keeps its resting hairline. The bar maps 1:1 to the reader's own scrolling
   (a scrollbar, not motion), so it is exempt from the reduced-motion kill —
   and the global .001ms rule cannot break it anyway: a scroll timeline takes
   its progress from scroll position, not from a clock. */
.sh-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  overflow: hidden; pointer-events: none; display: none; }
.sh-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0);
  transform-origin: left; background: var(--grad-primary); }
@supports (animation-timeline: scroll()) {
  .sh-progress { display: block; }
  .sh-progress span { animation: shProg linear both; animation-timeline: scroll(root); }
  .sh-hd { animation: shHd linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
}
@keyframes shProg { to { transform: scaleX(1); } }
@keyframes shHd { to { box-shadow: 0 10px 26px -18px rgba(15, 104, 68, .4); } }

/* Print. The sub-pages — the four policies above all — are the pages people
   actually put on paper. Browsers drop backgrounds by default, which would
   leave every deep band's white ink invisible on white paper, so the bands are
   recoloured to forest-on-white; navigation chrome, decorative layers and the
   white-stroke logo lockups (unprintable on white) are removed; clauses avoid
   breaking across sheets. site.css is loaded only by the sub-pages, so none of
   this touches the landing page. */
@media print {
  header, .sk, .sh-progress, .pl-toc { display: none !important; }
  [data-band="deep"], footer { background: #fff !important; color: #17322a !important; box-shadow: none !important; }
  [data-band="deep"] *, footer * { color: #17322a !important; }
  [data-band="deep"] [aria-hidden="true"]:not(li), footer [aria-hidden="true"], footer img, .sf-soc { display: none !important; }
  a { color: #0F6844 !important; }
  .pl-clause, .pl-tbc, .ab-card, .tm-card, .bg-topic { break-inside: avoid; }
  [data-rv] { opacity: 1 !important; transform: none !important; }
}