/* ==========================================================================
   Spryt — brand component library
   The connector (6.1/6.2), dialogue device (6.3), icons (6.4/6.5),
   rounded blocks (6.6) and layout principles (6.7).
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--white);
  color:var(--pathway-green);
  font-family:var(--font-brand);
  font-size:var(--t-body);
  /* 3.2: the guidelines set body copy tight — 120% on the specimen sheet,
     ~135-140% in the p46 web mockup. 1.4 tracks the mockup: tighter than the
     web-default 1.5 the site had, without cramping to the poster's 120%. */
  line-height:1.4;
  letter-spacing:var(--track);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,p,figure{ margin:0; }
/* 3.1/3.3: the brand cuts are Regular, Medium, Bold; the sanctioned Source
   Sans alternate that ships here tops out at SemiBold. The browser default
   for strong/b is 700, heavier than any available cut, so it is capped at
   600 globally — otherwise emphasised words render in a weight the type
   system does not contain. */
strong,b{ font-weight:600; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

:focus-visible{ outline:3px solid var(--spryt-sky); outline-offset:3px; border-radius:4px; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* --- 3.2 Type scale ------------------------------------------------------
   letter-spacing is an INHERITED property whose value inherits as a computed
   LENGTH, not as the em. Left to inherit from body, every element carried
   body's -0.01em-of-16px = -0.16px as a fixed length, so display type landed
   at roughly -0.002em — far short of the guideline's -10 tracking. Each scale
   step restates letter-spacing in em so it recomputes against its OWN size
   and lands on a true -10 everywhere. */
.display{ font-size:var(--t-display); line-height:1.08; font-weight:400;
  letter-spacing:var(--track); }
.display strong{ font-weight:600; }
.h1{ font-size:var(--t-h1); line-height:1.08; font-weight:500;
  letter-spacing:var(--track); }
.h2{ font-size:var(--t-h2); line-height:1.12; font-weight:500;
  letter-spacing:var(--track); }
.h3{ font-size:var(--t-h3); line-height:1.2;  font-weight:600;
  letter-spacing:var(--track); }
.lede{ font-size:clamp(1.05rem,1.35vw,1.3rem); line-height:1.45;
  letter-spacing:var(--track); }
.small{ font-size:var(--t-small); line-height:1.4; }
.label{
  font-size:var(--t-label); font-weight:600; line-height:1.2;
  letter-spacing:var(--track);
  text-transform:none; opacity:.72;
}
/* On the accent surfaces a dimmed label stops being legible, so keep it full
   strength there and let size alone carry the hierarchy. */
.on-sunrise .label, .on-sky .label, .connector--notch .label{ opacity:1; }
.measure{ max-width:var(--measure); }

/* --- 6.7 Layout: build in blocks ---------------------------------------- */
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sp-section); }
.section--tight{ padding-block:clamp(48px,6vw,84px); }
.stack{ display:grid; gap:clamp(16px,2vw,28px); align-content:start; }
.stack--lg{ gap:clamp(28px,4vw,48px); }
.grid-2{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:repeat(2,1fr); }
.grid-3{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:repeat(3,1fr); }

/* --- 6.6 Rounded blocks --------------------------------------------------
   One radius per scale, held constant across text and image blocks. -------- */
.block{ border-radius:var(--r-block); padding:clamp(24px,3vw,44px); }
.card{ border-radius:var(--r-card); padding:clamp(20px,2.2vw,32px); }
.media{ border-radius:var(--r-block); overflow:hidden; position:relative; }
.media img{ width:100%; height:100%; object-fit:cover; }

/* 6.6 "Do nest text blocks within an image block (and vice versa),
   ensuring corner radii are the same value." */
.media--nest{ display:grid; }
.media--nest > img{ grid-area:1/1; }
.media--nest > .nested{
  grid-area:1/1; align-self:end; justify-self:start;
  margin:clamp(14px,1.6vw,22px);
  border-radius:var(--r-card);
  padding:clamp(14px,1.4vw,20px);
  max-width:min(24rem,72%);
}
.nested--tr{ align-self:start !important; justify-self:end !important; }
.nested--br{ align-self:end !important;  justify-self:end !important; }

/* ==========================================================================
   6.1 / 6.2  THE SPRYT CONNECTOR
   Two rounded blocks offset diagonally and abutting on a shared edge —
   the logo's "missing piece" logic, made into a layout device.

   Topology (matches guidelines p38, measured):
       B (top, right-offset)   spans grid columns 2–3
       A (bottom, left-offset) spans grid columns 1–2
       column 2 is the overlap that makes them interlock

   When both blocks share a fill they merge into ONE shape, so the two
   inner (reflex) corners are filleted with the same radius as the convex
   corners — .connector--merged draws those fillets.
   ========================================================================== */
.connector{
  --fill:var(--spryt-sky);
  --ink:var(--pathway-green);
  /* 6.6: radius is a PERCENTAGE of the shortest side, so a connector whose
     blocks are short must round less. Variants below step it down; the
     fillet always follows, because a reflex corner and a convex corner
     must carry the same radius. */
  --r-conn:var(--r-block);
  --r-in:var(--r-conn);
  display:grid;
  grid-template-columns:1.05fr 0.55fr 1.05fr;
  align-items:stretch;
}
.connector__b,
.connector__a{
  position:relative;
  background:var(--fill);
  color:var(--ink);
  border-radius:var(--r-conn);
  padding:clamp(20px,2.4vw,36px);
}
.connector > .connector__b{ grid-column:2 / 4; grid-row:1; }
.connector > .connector__a{ grid-column:1 / 3; grid-row:2; }

/* At a reflex corner the two edges meet as straight lines — so the corner
   must be SQUARE before it is filleted. Leaving the block's own convex
   radius there leaves a notch and the join reads as two stacked bubbles. */
.connector--merged > .connector__b{ border-bottom-left-radius:0; }
.connector--merged > .connector__a{ border-top-right-radius:0; }
.connector--flip.connector--merged > .connector__b{
  border-bottom-left-radius:var(--r-conn); border-bottom-right-radius:0;
}
.connector--flip.connector--merged > .connector__a{
  border-top-right-radius:var(--r-conn); border-top-left-radius:0;
}

/* Inner-corner fillets. Each is an r×r square with a quarter-disc bitten
   out of the corner nearest the shape's exterior, so the two blocks read
   as a single continuous outline rather than two stacked rectangles. */
.connector--merged > .connector__b::after,
.connector--merged > .connector__a::after{
  content:""; position:absolute;
  width:var(--r-in); height:var(--r-in);
  pointer-events:none;
}
.connector--merged > .connector__b::after{      /* reflex corner, bottom-left */
  left:calc(-1 * var(--r-in)); bottom:0;
  background:radial-gradient(circle at 0 0,
    transparent var(--r-in), var(--fill) calc(var(--r-in) + 0.5px));
}
.connector--merged > .connector__a::after{      /* reflex corner, top-right */
  right:calc(-1 * var(--r-in)); top:0;
  background:radial-gradient(circle at 100% 100%,
    transparent var(--r-in), var(--fill) calc(var(--r-in) + 0.5px));
}

/* 6.2 "Always ensure there is hierarchy (one piece of text is larger
   than the other)" — the stat variant enforces it structurally. */
.connector--stat{ --r-conn:clamp(8px,0.85vw,12px); }
.connector--stat > .connector__b{ display:grid; align-content:center; }
.connector--stat .stat-figure{
  font-size:var(--t-stat); line-height:1; font-weight:500;
  letter-spacing:-0.02em;
}
.connector--stat > .connector__a{ display:grid; align-content:center; }
.connector--stat > .connector__a p{ font-size:var(--t-small); }

/* Mirror: bottom block right-offset, top block left-offset. */
.connector--flip > .connector__b{ grid-column:1 / 3; }
.connector--flip > .connector__a{ grid-column:2 / 4; }
.connector--flip.connector--merged > .connector__b::after{
  left:auto; right:calc(-1 * var(--r-in));
  background:radial-gradient(circle at 100% 0,
    transparent var(--r-in), var(--fill) calc(var(--r-in) + 0.5px));
}
.connector--flip.connector--merged > .connector__a::after{
  right:auto; left:calc(-1 * var(--r-in));
  background:radial-gradient(circle at 0 100%,
    transparent var(--r-in), var(--fill) calc(var(--r-in) + 0.5px));
}

/* 6.2 "The text block can be used with an image block, flush against one
   corner of the image block" — different fills, so no fillets. */
.connector--media > .connector__b{ padding:0; overflow:hidden; }
.connector--media > .connector__b img{ width:100%; height:100%; object-fit:cover; }
.connector--media > .connector__a{ z-index:1; }

/* 6.1 "The graphic can house imagery" — pure shape, no content. */
.connector--figure{ pointer-events:none; }
.connector--figure > .connector__b,
.connector--figure > .connector__a{ padding:0; min-height:clamp(64px,9vw,120px); }

/* 6.5 "Use them as a background watermark" — a tint of the shape, held
   inside the band so it never reads as a cropped accident. */
.watermark{
  position:absolute; left:clamp(-40px,-2vw,0px); bottom:clamp(-24px,-1.5vw,0px);
  z-index:0; opacity:.10; pointer-events:none; width:min(32%,340px);
}
.watermark--tr{
  left:auto; bottom:auto;
  right:clamp(-40px,-2vw,0px); top:clamp(-24px,-1.5vw,0px);
}
.has-watermark{ position:relative; overflow:hidden; }
.has-watermark > *:not(.watermark){ position:relative; z-index:1; }

/* ==========================================================================
   6.3  ASA 'DIALOGUE' DEVICE
   Built from the two offset blocks of the Asa symbol: one side reaches out,
   the other responds. Guidelines: the concern is WHITE with Pathway Green
   text; the response is Asa Sunrise with white text.
   ========================================================================== */
.dialogue{ display:grid; gap:0; justify-items:start; }
.dialogue__concern,
.dialogue__response{
  border-radius:var(--r-chip);
  padding:clamp(14px,1.5vw,20px) clamp(18px,1.8vw,26px);
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  line-height:1.25;
  max-width:32rem;
}
.dialogue__concern{
  background:var(--white); color:var(--pathway-green);
  justify-self:end; margin-right:clamp(20px,3vw,56px);
}
.dialogue__response{
  background:var(--asa-sunrise); color:var(--white);
  justify-self:start; margin-top:calc(-1 * clamp(4px,0.6vw,10px));
}
/* Conversation form: alternating reach-out / respond, per 6.3 */
.thread{ display:grid; gap:10px; }
.thread .bubble{
  border-radius:var(--r-chip); padding:14px 18px;
  font-size:var(--t-small); line-height:1.4; max-width:26rem;
}
.bubble--asa{ background:var(--asa-sunrise); color:var(--white); justify-self:start; }
.bubble--patient{ background:var(--white); color:var(--pathway-green); justify-self:end; }
.bubble__who{ display:block; font-size:11px; font-weight:600; opacity:.75; margin-bottom:3px; }

/* Outcome chip — the "Attended." device */
.outcome{
  display:inline-block; border-radius:var(--r-chip);
  padding:12px 20px; font-weight:600;
  font-size:clamp(1rem,1.3vw,1.2rem);
}

/* ==========================================================================
   6.4 / 6.5  ICONS
   Block-built, single colour, inherit via currentColor.
   ========================================================================== */
.icon{ width:auto; height:2.75rem; color:var(--asa-sunrise); }
.icon--sky{ color:var(--spryt-sky); }
.icon--green{ color:var(--pathway-green); }
.icon--white{ color:var(--white); }
.icon--lg{ height:4rem; }

/* --- Identity (2.1 / 2.4) ------------------------------------------------
   The lockups are the supplied vector artwork, wordmark included, so the
   logo is never rebuilt from live type — 2.3 forbids altering it.
   Sizing is by height only; width follows, so proportions can't be stretched. */
.logo-link{ display:inline-flex; align-items:center; }
.logo-lockup{ height:26px; width:auto; display:block; }
.logo-lockup--md{ height:38px; }
.logo-lockup--lg{ height:52px; }
/* 2.2 Clearspace: clear space all round equal to the height of the symbol.
   The symbol is roughly half the lockup height, hence 0.5em of its box. */
.logo-clearspace{ padding:calc(26px * 0.62); }
/* Standalone symbol, for avatars, favicons and watermarks (2.2). */
.mark{ height:1.6em; width:auto; }

/* --- Controls ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  border-radius:var(--r-pill); border:0; cursor:pointer;
  padding:.85em 1.5em; font:inherit; font-size:var(--t-small); font-weight:600;
  letter-spacing:var(--track);
  transition:transform .18s cubic-bezier(.2,.6,.2,1), filter .18s;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.btn--sunrise{ background:var(--asa-sunrise); color:var(--white); }
.btn--green{ background:var(--pathway-green); color:var(--white); }
.btn--white{ background:var(--white); color:var(--pathway-green); }
.btn--sky{ background:var(--spryt-sky); color:var(--pathway-green); }
.btn--ghost{ background:transparent; box-shadow:inset 0 0 0 1.5px currentColor; }
.btn__arrow{ transition:transform .18s cubic-bezier(.2,.6,.2,1); }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* --- Header / footer ----------------------------------------------------- */
.site-header{ background:var(--pathway-green); color:var(--white); }
.site-header__bar{
  display:flex; align-items:center; gap:clamp(20px,4vw,44px);
  padding-block:22px;
}
.site-nav{ display:flex; gap:clamp(18px,2.4vw,34px); margin-left:auto; align-items:center; }
.site-nav a:not(.btn){ font-size:var(--t-small); opacity:.78;
  transition:opacity .16s, color .16s; }
/* Hover and the current page take Asa Sunrise. The CTA button keeps its own
   ink (:not(.btn)) so its label isn't recoloured. */
.site-nav a:not(.btn):hover,
.site-nav a:not(.btn)[aria-current="page"]{ opacity:1; color:var(--asa-sunrise); }
.nav-toggle{ display:none; margin-left:auto; background:none; border:0; color:inherit; padding:8px; }

.site-footer{ background:var(--pathway-green); color:var(--white); }
.site-footer a{ opacity:.78; transition:opacity .16s, color .16s; }
.site-footer a:not(.logo-link):hover{ opacity:1; color:var(--asa-sunrise); }
.footer-grid{
  display:grid; gap:clamp(28px,4vw,48px);
  grid-template-columns:1.4fr repeat(3,1fr);
}
.footer-rule{ height:1px; background:rgba(255,255,255,.16); margin-block:clamp(28px,4vw,44px); }
/* Certification marks. Each is supplied as dark artwork for a light ground,
   so on the Pathway Green footer they sit on their own white tile rather
   than being reversed or recoloured — none of these schemes permit that. */
.compliance{ display:flex; flex-wrap:wrap; gap:clamp(8px,1vw,14px);
  align-items:center; }
.compliance__marks{ display:flex; flex-wrap:wrap; gap:clamp(8px,1vw,14px);
  align-items:center; }
.compliance span{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--white); border-radius:var(--r-chip);
  padding:clamp(8px,0.9vw,12px) clamp(10px,1.1vw,15px);
}
/* The mark's height is set outright rather than as a percentage: the tile is
   a flex box with an auto row, so height:100% had nothing definite to
   resolve against and every mark rendered at full size. The tile then takes
   its height from the mark plus padding, so all four match. */
.compliance img{
  display:block; height:clamp(36px,3.9vw,52px); width:auto;
}

/* --- Forms --------------------------------------------------------------- */
.field{ display:grid; gap:8px; }
.field label{ font-size:var(--t-label); font-weight:600; letter-spacing:.01em; }
.field input, .field select, .field textarea{
  font:inherit; font-size:var(--t-small);
  border:1.5px solid var(--green-20); border-radius:12px;
  padding:14px 16px; background:var(--white); color:var(--pathway-green);
  width:100%; transition:border-color .16s, box-shadow .16s, background-color .16s;
}
.field input::placeholder, .field textarea::placeholder{
  color:var(--pathway-green); opacity:.4;
}
.field input:hover, .field select:hover, .field textarea:hover{
  border-color:var(--green-30);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--spryt-sky);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--spryt-sky) 28%, transparent);
}
.field textarea{ min-height:140px; resize:vertical; line-height:1.5; }
/* Custom select: strip the system chevron and draw the brand one, so the
   control matches the inputs instead of showing OS UI. */
.field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23132C2C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}

/* Contact page LinkedIn link — icon + label, brand-coloured, underline on
   hover only so it reads as a considered link rather than a raw anchor. */
.contact-linkedin{
  display:inline-flex; align-items:center; gap:9px;
  font-size:var(--t-small); font-weight:600; color:var(--pathway-green);
  width:fit-content; transition:color .16s;
}
.contact-linkedin__icon{ width:18px; height:18px; flex:none; color:var(--spryt-sky); }
.contact-linkedin:hover{ color:var(--asa-sunrise); }
.contact-linkedin:hover .contact-linkedin__icon{ color:var(--asa-sunrise); }

/* --- Registered-office card ----------------------------------------------
   A Pathway Green block (4.3: green surface carries white text), with a real
   type hierarchy instead of three identical .small lines: a Sky eyebrow, the
   company name at subhead weight, the address in readable body, and the phone
   set off below a hairline rule as its own tappable row. Block radius and
   generous padding match the site's other green blocks. */
.office-card{
  border-radius:var(--r-block);
  padding:clamp(26px,2.6vw,36px);
  display:flex; flex-direction:column;
  gap:clamp(14px,1.4vw,18px);
}
.office-card__label{
  font-size:var(--t-label); font-weight:600; letter-spacing:var(--track);
  line-height:1.2; color:var(--spryt-sky);
}
.office-card__body{
  font-style:normal;                 /* <address> defaults to italic */
  display:flex; flex-direction:column; gap:clamp(6px,0.7vw,9px);
}
.office-card__org{
  font-size:clamp(1.05rem,1.25vw,1.2rem); font-weight:600;
  letter-spacing:var(--track); line-height:1.25; color:var(--white);
}
.office-card__addr{
  font-size:var(--t-small); line-height:1.5;
  letter-spacing:var(--track); color:rgba(255,255,255,.82);
}
.office-card__phone{
  margin-top:clamp(4px,0.6vw,8px);
  padding-top:clamp(14px,1.4vw,18px);
  border-top:1px solid rgba(255,255,255,.16);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  transition:color .16s;
}
.office-card__phone-label{
  font-size:var(--t-label); font-weight:600; letter-spacing:var(--track);
  color:rgba(255,255,255,.6);
}
.office-card__phone-num{
  font-size:clamp(1rem,1.15vw,1.15rem); font-weight:600;
  letter-spacing:var(--track); color:var(--white);
}
.office-card__phone:hover .office-card__phone-num{ color:var(--spryt-sky); }

@media (max-width:860px){
  /* !important because some sections tune their column ratio inline for
     desktop; on small screens everything stacks, without exception. */
  .grid-2, .grid-3, .footer-grid,
  .grid-2[style], .grid-3[style], .footer-grid[style]{
    grid-template-columns:1fr !important;
  }
  .site-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:4px;
    background:var(--white); color:var(--pathway-green);
    padding:12px var(--gutter) 20px; z-index:20;
    border-radius:0 0 var(--r-card) var(--r-card);
    box-shadow:0 12px 28px rgba(19,44,44,.14);
  }
  .site-nav[data-open="true"]{ display:flex; }
  /* on the white dropdown the links are dark by default, orange on hover or
     when they are the current page */
  .site-nav a:not(.btn){
    padding:14px 2px; font-size:1.05rem; opacity:1;
    color:var(--pathway-green);
    border-bottom:1px solid var(--green-10);
  }
  .site-nav a:not(.btn):hover,
  .site-nav a:not(.btn)[aria-current="page"]{ color:var(--asa-sunrise); }
  /* the CTA is a full-width pill button at the foot of the menu */
  .site-nav a.btn{
    margin-top:12px; justify-content:center;
    background:var(--asa-sunrise); color:var(--white); opacity:1;
  }
  .nav-toggle{ display:block; }
  .site-header__bar{ position:relative; }
  /* When the menu is open the white dropdown hangs off the bar's bottom edge.
     The bar's own bottom corners are rounded (--r-block), which left the
     dropdown's square top corners poking out past the curve. Square the bar's
     bottom corners while open so the bar and dropdown read as one shape. */
  .site-header__bar:has(.site-nav[data-open="true"]){
    border-bottom-left-radius:0; border-bottom-right-radius:0;
  }

  /* Footer base row on mobile: the "Compliance" heading sits on its own line
     with the certification tiles centred below it, and the copyright line is
     centred too (screenshot 7). */
  .footer-base{ text-align:center; }
  .compliance{
    flex-direction:column; align-items:center; gap:clamp(12px,3vw,18px);
  }
  .compliance .label{ margin-right:0; }
  .compliance__marks{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:clamp(8px,2.4vw,14px);
  }
  .footer-copyright{ text-align:center !important; }

  /* The connector narrows but KEEPS its step, so the device still reads as
     the Spryt shape on small screens (guidelines p47 mobile mockup).
     Any inline grid-template-columns set per-instance is overridden.

     0.16 / 1 / 0.16 left the two blocks 88% wide with only a 12% offset —
     geometrically a connector, but too shallow to read as one. 1 / 0.28 /
     0.72 gives blocks of 64% and 50% with a 14% overlap: a step you can
     actually see at 360px. */
  .connector,
  .connector[style]{ grid-template-columns:1fr 0.28fr 0.72fr !important; }
  .connector__b{ grid-column:2 / 4; }
  .connector__a{ grid-column:1 / 3; }
  .connector--flip > .connector__b{ grid-column:1 / 3; }
  .connector--flip > .connector__a{ grid-column:2 / 4; }
  .media--nest > .nested{ max-width:calc(100% - 28px); }
}

/* --- 2.2 Partner logo lockup ---------------------------------------------
   "Align logos optically, maintain equal visual weight and separate them
   with the width of the Spryt symbol." The symbol is ~22% of the lockup's
   width, so at 38px tall that separation is ~24px either side of the rule.
   MediDrive is set in the brand face at matched optical weight until the
   partner supplies vector artwork. */
.partner-lockup{ display:flex; align-items:center; gap:24px; }
.partner-lockup__x{ opacity:.3; font-size:1.25rem; line-height:1; }
.partner-name{
  font-size:1.9rem; font-weight:600; letter-spacing:-0.035em; line-height:1;
}
@media (max-width:860px){
  .partner-lockup{ gap:16px; }
  .partner-name{ font-size:1.5rem; }
  .logo-lockup--md{ height:30px; }
}

/* 2.2 co-brand lockup in the MediDrive hero: the Spryt SYMBOL (the full
   wordmark already sits in the tab above) locked to the MediDrive wordmark,
   separated by the width of the Spryt symbol, optically aligned and matched
   in weight. Replaces the old "Spryt × MediDrive" text label. */
.md-cobrand{ display:flex; align-items:center; gap:clamp(12px,1.6vw,18px); }
/* The full Spryt lockup carries its own wordmark, so it is set taller than a
   bare mark would be and the MediDrive logo is matched to its wordmark cap
   height rather than to the old icon — the two read as equal-weight partners.
   2.3: the logo ships as its own artwork (dark wordmark on this white card),
   never recoloured with a filter. */
.md-cobrand__spryt{ display:block; height:clamp(26px,2.7vw,34px); width:auto; }
.md-cobrand__x{ color:var(--pathway-green); opacity:.35;
  font-size:1.15rem; line-height:1; }
.md-cobrand__partner{ display:block; height:clamp(20px,2.1vw,26px);
  width:auto; }

/* --- 6.1 Connector, notch variant ----------------------------------------
   The Meet Asa block on p47: a single coloured block whose top-right corner
   is stepped away, leaving a notch for the Asa logo to sit in on the page
   background. Same two-rectangle logic as the connector, but the lower
   block spans the full width, so there is only ONE reflex corner to fillet.

     row 1  [ strip ........ ][ notch ]
     row 2  [ body ..................  ]
*/
.connector--notch{ grid-template-columns:1fr auto; --r-conn:clamp(5px,0.55vw,8px); }
.connector--notch > .connector__b{           /* top strip */
  grid-column:1; grid-row:1;
  border-radius:var(--r-conn) var(--r-conn) 0 0;
  padding-bottom:clamp(14px,1.6vw,22px);
  display:flex; align-items:center;
}
.connector--notch > .connector__a{           /* body, full width */
  grid-column:1 / 3; grid-row:2;
  border-radius:0 var(--r-block) var(--r-block) var(--r-block);
}
.connector--notch > .connector__b::after{
  content:""; position:absolute;
  right:calc(-1 * var(--r-in)); bottom:0;
  width:var(--r-in); height:var(--r-in); pointer-events:none;
  background:radial-gradient(circle at 100% 0,
    transparent var(--r-in), var(--fill) calc(var(--r-in) + 0.5px));
}
.connector__notch{                         /* the cut-out itself */
  grid-column:2; grid-row:1;
  display:flex; align-items:center; justify-content:flex-end;
  padding-left:clamp(20px,2.4vw,36px);
  padding-bottom:clamp(10px,1.2vw,16px);
}
@media (max-width:860px){
  .connector--notch,
  .connector--notch[style]{ grid-template-columns:1fr auto !important; }
  .connector--notch > .connector__b{ grid-column:1; }
  .connector--notch > .connector__a{ grid-column:1 / 3; }
}


/* --- Home: hero Demo Asa chip (p46) -------------------------------------- */
.demo-chip{
  position:absolute; top:0; right:0;
  display:flex; align-items:center; gap:10px;
  background:var(--white);
  border-radius:0 var(--r-block) 0 var(--r-card);
  padding:10px 12px 12px 16px;
}
.demo-chip__mark{ display:flex; width:26px; color:var(--asa-sunrise); }

/* --- Contact band --------------------------------------------------------- */
.contact-band{
  display:flex; flex-wrap:wrap; gap:28px;
  align-items:center; justify-content:space-between;
}

@media (max-width:860px){

}


/* ==========================================================================
   THE 8PM MOMENT  — built to the reference mockup supplied with the brief
   (p5), which composites the Asa demo thread from guidelines p52.
   Three columns on Pathway Green: argument, conversation, outcome.
   ========================================================================== */
.eightpm{
  display:grid; gap:clamp(24px,3vw,52px);
  grid-template-columns:1.6fr 0.8fr 1.05fr;
  align-items:stretch;
}
.eightpm__argument{ display:flex; flex-direction:column; gap:clamp(20px,2.4vw,34px); }
.eightpm__argument .capability{ margin-top:auto; }

/* Capability card — Cloud, with a small Asa symbol marking each point. */
.capability{ background:var(--cloud); color:var(--pathway-green);
  border-radius:var(--r-card); padding:clamp(20px,2.2vw,30px);
  display:grid; gap:clamp(14px,1.6vw,22px); }
.capability li{ display:grid; grid-template-columns:auto 1fr; gap:14px;
  align-items:start; font-size:var(--t-small); line-height:1.45; }
.capability ul{ list-style:none; margin:0; padding:0; display:grid;
  gap:clamp(14px,1.6vw,22px); }
.capability .mark{ width:20px; height:auto; color:var(--asa-sunrise); margin-top:3px; }

/* Conversation. Asa speaks on the peach surface with the symbol sitting
   outside the bubble's top-left corner, exactly as on p52; the patient
   replies on white and indented, per 6.3's white concerns box. */
.thread-8pm{ display:grid; gap:clamp(14px,1.6vw,22px); align-content:start; }
.msg{ position:relative; border-radius:var(--r-chip);
  padding:clamp(16px,1.5vw,20px); font-size:var(--t-small); line-height:1.45; }
.msg--asa{ background:var(--asa-message); color:var(--pathway-green);
  margin-left:clamp(10px,1vw,14px); }
.msg--asa .msg__mark{
  position:absolute; top:calc(-1 * clamp(10px,1vw,14px));
  left:calc(-1 * clamp(10px,1vw,14px));
  width:clamp(20px,1.9vw,26px); height:auto; color:var(--asa-sunrise);
}
.msg--patient{ background:var(--white); color:var(--pathway-green);
  margin-left:clamp(24px,3vw,46px); }

/* Outcome column: photograph, Spryt Sky chip, then the closing note. */
.eightpm__outcome{ display:grid; gap:clamp(12px,1.4vw,18px);
  grid-template-rows:1fr auto auto; align-content:stretch; }
.eightpm__outcome .media{ min-height:clamp(240px,26vw,360px); }
.outcome-chip{ background:var(--spryt-sky); color:var(--pathway-green);
  border-radius:var(--r-chip); padding:clamp(16px,1.6vw,22px);
  font-weight:600; font-size:clamp(1rem,1.25vw,1.2rem); }
.outcome-note{ background:var(--green-90); color:var(--cloud);
  border-radius:var(--r-card); padding:clamp(18px,1.8vw,26px);
  font-size:var(--t-small); line-height:1.45; }

@media (max-width:1024px){
  .eightpm{ grid-template-columns:1fr 1fr; }
  .eightpm__argument{ grid-column:1 / 3; }
}
@media (max-width:860px){
  .eightpm, .eightpm[style]{ grid-template-columns:1fr !important; }
  .eightpm__argument{ grid-column:1; }
  .eightpm__argument .capability{ margin-top:0; }
}

/* The mockup sets this headline well below display scale so each of its two
   lines holds on one line beside the conversation. */
.eightpm__headline{
  font-size:clamp(1.45rem,1.95vw,1.95rem); font-weight:600; line-height:1.24;
}

/* Typing indicator, from the motion concept: three dots on Asa's own
   surface, sitting where the bubble is about to appear. */
/* Each indicator shares its grid cell with the message that follows it, so
   the thread's height never changes as the conversation plays — the dots
   simply give way to the bubble in the same place. */
.thread-8pm.rv-chat{ grid-template-rows:repeat(3, auto); }
.thread-8pm.rv-chat > *:nth-child(1),
.thread-8pm.rv-chat > *:nth-child(2){ grid-row:1; grid-column:1; }
.thread-8pm.rv-chat > *:nth-child(3){ grid-row:2; grid-column:1; }
.thread-8pm.rv-chat > *:nth-child(4),
.thread-8pm.rv-chat > *:nth-child(5){ grid-row:3; grid-column:1; }
.thread-8pm.rv-chat > .typing{ align-self:start; }

.typing{
  justify-self:start; display:flex; gap:5px;
  background:var(--asa-message); border-radius:var(--r-chip);
  padding:clamp(14px,1.4vw,18px) clamp(16px,1.5vw,20px);
  margin-left:clamp(10px,1vw,14px);
}
.typing i{
  width:8px; height:8px; border-radius:2.5px;
  background:var(--asa-sunrise); display:block;
}

/* --- MediDrive "How it works" chat ---------------------------------------
   A self-contained chat panel: Asa on the left in peach, the patient on the
   right in white. The panel sits on Pathway Green so both bubbles read. The
   Asa symbol tucks just outside each Asa bubble's top-left corner (p52). */
.md-chat{
  background:var(--pathway-green);
  border-radius:var(--r-block);
  padding:clamp(20px,2.4vw,34px);
}
.thread-md{
  display:flex; flex-direction:column; gap:clamp(12px,1.5vw,18px);
  align-items:stretch;
}
.thread-md .msg{ max-width:82%; }
.thread-md .msg--asa{
  align-self:flex-start; margin-left:clamp(14px,1.4vw,18px);
  border-top-left-radius:4px;                 /* the corner the mark tucks into */
}
.thread-md .msg--patient{
  align-self:flex-end; margin-left:0; margin-right:2px;
  border-top-right-radius:4px;
}
.thread-md .typing{ align-self:flex-start; margin:0 0 0 clamp(14px,1.4vw,18px); }

/* --- 8pm section ----------------------------------------------------------
   The asa lockup sits at the panel's top right (2.6, and p52 places it
   exactly there); the "Meet Asa" label became an eyebrow above the headline
   rather than a row of its own, which read as a bar across the section. */
.eightpm__mark{
  position:absolute; top:clamp(20px,2.4vw,38px);
  right:clamp(20px,2.6vw,52px); z-index:2;
}
.section.on-green:has(.eightpm){ position:relative; }

/* The capability card, the figure block and the caption are ONE composition:
   the figure sits to the RIGHT of the card, and the caption drops BELOW it —
   the connector's step coming out of the card's bottom-right corner.

   Every join here is between two different fills (Cloud card against Spryt
   Sky blocks), so each meeting corner is squared and the connector's own
   fillets are switched off. A fillet only reads when both sides of the
   corner carry the same colour, as in a single-fill connector. */
.connector.capability-lock{
  display:grid;
  /* Split so the CAPTION reaches back to about a third of the width: the
     card and figure make the top bar, the caption the bottom bar inset from
     the left, which is the stepped silhouette of the Spryt mark.
       col1 ends where the caption begins   (30%)
       col2 ends where the figure begins    (77%, the card's right edge) */
  grid-template-columns:minmax(0,0.30fr) minmax(0,0.47fr) minmax(0,0.23fr)
    !important;
  grid-template-rows:auto auto;
  align-items:stretch;
}
.connector.capability-lock > .capability{
  grid-area:1 / 1 / 2 / 3;
  margin:0;
  /* This corner is the connector's INNER corner: the card's bottom-right sits
     exactly where the figure block's left edge meets the caption block's top
     edge, so the Sky blocks form a reflex corner around it. Square, the card
     drove a hard notch into that step. Rounded to --r-conn — the SAME radius
     the Sky blocks carry — the card's convex curve and the fillet below are
     concentric and nest into one another, which is the rule the guidelines
     state for a reflex corner: it must carry the radius of the convex corner
     it answers. --r-conn rather than the card's own 14px for exactly that
     reason: the two curves have to be struck from one radius or they cannot
     blend. */
  border-bottom-right-radius:var(--r-conn);
}
.connector.capability-lock > .connector__b{
  grid-area:1 / 3 / 2 / 4;
  align-self:end !important;
  border-radius:0 var(--r-conn) 0 0;
  margin-left:-1px;                        /* closes the seam with the card */
  min-height:clamp(96px,9vw,132px);
  justify-items:center;
}
/* The card takes more of the width, so the figure block is narrower than in
   a full-width connector: its side padding and the numeral both step down,
   or "50%+" would be clipped. */
.connector.capability-lock > .connector__b{
  padding-inline:clamp(12px,1.2vw,20px);
}
.connector.capability-lock .stat-figure{
  font-size:clamp(1.45rem,2.5vw,2.3rem);
}
.connector.capability-lock > .connector__a{
  grid-area:2 / 2 / 3 / 4;
  border-radius:0 0 var(--r-conn) var(--r-conn);
  margin-top:-1px;
}
/* The caption block's top-right is NOT a reflex corner here — the figure
   block sits directly above it sharing the same right edge — so its fillet
   stays off. The figure block's bottom-left IS the reflex corner, and it is
   left switched ON so it can fill the quadrant the card's rounded corner
   gives up. Nudged 1px right because the figure block carries margin-left:-1px
   to close the seam with the card, which would otherwise strike the fillet's
   arc 1px off-centre from the card's and leave a hairline. */
.connector.capability-lock > .connector__a::after{ display:none; }
.connector.capability-lock > .connector__b::after{
  left:calc(1px - var(--r-in));
  /* The default stops put the fill's edge ON the arc, so the card's
     antialiased curve and the fillet's antialiased curve each covered part of
     the same row and the dark section colour leaked between them as a hairline
     along the corner. Starting the fill three-quarters of a pixel INSIDE the
     arc tucks it under the card's own edge: the seam closes and the corner
     still reads at exactly --r-in, because the overlap is sub-pixel. */
  background:radial-gradient(circle at 0 0,
    transparent calc(var(--r-in) - 0.75px),
    var(--fill) calc(var(--r-in) - 0.25px));
}

@media (max-width:640px){
  /* The card is too wide to keep the figure block beside it on a phone, so
     the card takes the full width as the top bar — but the figure and caption
     below must still read as the SPRYT MARK, not collapse into one flat box
     (that was the "very bad" shape). They form a real connector step: the
     figure block is a narrow block on the LEFT, the caption a wider block
     BELOW it offset to the right, overlapping in one column so the two
     interlock. Same single-fill merge as any stat connector, so the reflex
     corner is squared and filleted. Guidelines p47: the step is kept on
     mobile, never flattened. */
  .connector.capability-lock{
    /* Figure block spans cols 1-2, caption spans cols 2-3, overlapping in the
       middle column — that overlap IS the connector's step. It is widened here
       so the join where the two rectangles meet reads clearly (per feedback),
       while the figure block stays tight to "50%+" and the caption stays wide
       enough for a ~3-line measure. */
    grid-template-columns:minmax(0,0.28fr) minmax(0,0.16fr) minmax(0,0.56fr)
      !important;
    grid-template-rows:auto auto auto;
  }
  .connector.capability-lock > .capability{
    grid-area:1 / 1 / 2 / 4;          /* card = full-width top bar */
    /* Bottom-LEFT stays square: the figure block sits directly beneath it on
       the same left edge, so that is a mid-edge junction. Bottom-RIGHT is the
       opposite — stacked, the figure block is over on the left and nothing
       sits below the card's right end, so this is a plain OUTER corner with
       the section behind it and it takes the card's own radius. It is not the
       reflex corner it is on desktop, so it gets no fillet. */
    border-bottom-left-radius:0;
    border-bottom-right-radius:var(--r-card);
  }
  .connector.capability-lock > .connector__b{
    grid-area:2 / 1 / 3 / 3;          /* figure block, top-left of the step */
    align-self:auto !important; justify-items:start;
    min-height:0; padding:clamp(16px,4.2vw,22px) clamp(14px,4vw,20px);
    border-radius:0 0 0 0;            /* outer corners square; it meets card + step */
    display:flex; align-items:center;
  }
  /* "50%+" reads as the headline stat, not a caption — bring it up to size */
  .connector.capability-lock .stat-figure{
    font-size:clamp(2rem,9vw,3rem); line-height:1; letter-spacing:-0.02em;
    white-space:nowrap;
  }
  .connector.capability-lock > .connector__a{
    grid-area:3 / 2 / 4 / 4;          /* caption block, offset right, below */
    border-radius:0 0 var(--r-conn) var(--r-conn);
    padding:clamp(14px,3.4vw,18px) clamp(16px,4vw,22px);
  }
  .connector.capability-lock > .connector__a p{
    font-size:clamp(13px,3.4vw,15px); line-height:1.4;
  }
  /* No fillet ::after here. The figure and caption blocks overlap in the step
     column and share the Sky fill, so their junction is already a solid,
     continuous shape. The old radial-gradient tile sat at the figure block's
     bottom-right and cut a transparent quadrant OUT of that solid fill, which
     showed the dark section colour through as a small triangular notch. The
     concave step now reads from the block edges alone. */
  .connector.capability-lock > .connector__b::after{ display:none; }
}

/* --- Header on scroll -----------------------------------------------------
   Once the page moves, the bar lifts onto a white card with the block radius
   and the Spryt lockup swaps to its dark artwork. Both lockups are in the
   markup and one is hidden, rather than filtering a single one: 2.3 forbids
   altering the logo, and a CSS filter is an alteration. */
.site-header{ position:sticky; top:0; z-index:50; }
/* The header's own background is Pathway Green (used behind the notch
   before the bar narrows and behind the bar's rounded corners after). Once
   scrolled it has to go transparent, or it shows as a green strip either
   side of the narrower white bar and behind its corner radius. */
.site-header.is-scrolled{ background:transparent; }
.site-header__bar{
  transition:background-color .26s var(--glide, ease),
             color .26s var(--glide, ease),
             padding .26s var(--glide, ease),
             max-width .26s var(--glide, ease),
             box-shadow .26s var(--glide, ease);
  border-radius:var(--r-block);
  max-width:var(--max);
}
.logo-swap{ display:block; }
.logo-swap--dark{ display:none; }

.site-header.is-scrolled .site-header__bar{
  /* Frosted rather than solid: the page shows through and blurs behind the
     bar, so it reads as sitting above the content instead of covering it. */
  /* 0.88, not 0.7: over the Pathway Green sections a lower opacity let the
     dark ground through and the bar read grey rather than white. */
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  color:var(--pathway-green);
  /* narrows as it lifts, and returns to full width back at the top */
  max-width:min(var(--max), 1120px);
  padding-inline:clamp(18px,2vw,30px);
  padding-block:14px;
  box-shadow:0 6px 26px rgba(19,44,44,.14);
}
.site-header.is-scrolled .logo-swap--light{ display:none; }
.site-header.is-scrolled .logo-swap--dark{ display:block; }
/* :not(.btn) — the CTA keeps its own ink. Without this the rule was more
   specific than .btn--sunrise and turned the button's label Pathway Green. */
.site-header.is-scrolled .site-nav a:not(.btn){
  color:var(--pathway-green); opacity:.86;
}
.site-header.is-scrolled .site-nav a:not(.btn):hover,
.site-header.is-scrolled .site-nav a:not(.btn)[aria-current="page"]{
  opacity:1; color:var(--asa-sunrise);
}

@media (prefers-reduced-motion:reduce){
  .site-header__bar{ transition:none; }
}

/* the Asa hero tab is Pathway Green, so it carries the reversed lockup */
.hero--asa .hero__tab--asa{ background:var(--pathway-green) !important; }