/* Shared stylesheet for the three /portal-guides decks.
   Everything here was byte-for-byte (or near enough) triplicated in app.html,
   computer.html and two-practices.html, and had already drifted by accident.
   Each deck keeps a small inline <style> for the three things that genuinely
   differ: its .shot-* image bindings, its .hi ring geometry, and the .phone
   aspect ratio of its screenshots. */

/* DM Sans, self-hosted. One variable woff2 covers 400-700, the same family the
   site loads through next/font, so the deck no longer reaches Google's CDN. */
@font-face{
  font-family:"DM Sans";
  font-style:normal;
  font-weight:100 1000;
  font-display:swap;
  src:url(/fonts/dm-sans/dm-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --yellow:#FFBE00; --pink:#FE47B0; --orange:#FF6300; --red:#FA472E; --blue:#56EFEB;
  --bg:#FFF9EE; --bg-mid:#F9EEDE;
  --ink:#000000; --ink-70:rgba(0,0,0,.70);
  --paper:#FFFFFF;
  --border:#E2E1CF; --muted:#6b6b6b;
  --bar:64px;
  --accent:var(--yellow);
  --display:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --body:"DM Sans","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);min-height:100vh;overflow:hidden;}

.frame{position:fixed;inset:0;background:var(--bg);overflow:hidden;}
.stage{
  position:absolute;top:calc((100% - var(--bar)) / 2);left:50%;width:1920px;height:1080px;
  transform-origin:center center;background:var(--bg);overflow:hidden;
}

.topbar{
  position:absolute;top:0;left:0;right:0;height:96px;
  display:flex;align-items:center;justify-content:space-between;padding:0 88px;z-index:6;
}
.mark{
  display:flex;align-items:center;gap:12px;font-family:var(--display);
  font-weight:600;text-transform:uppercase;letter-spacing:.02em;line-height:1.15;
}
.mark__logo{height:44px;width:auto;flex-shrink:0;}
.mark__name{display:flex;flex-direction:column;font-size:20px;}
.mark__site{font-family:var(--body);font-weight:600;font-size:20px;color:var(--muted);letter-spacing:.02em;}

.progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--border);z-index:7;}
.progress__fill{
  height:100%;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:background 700ms ease;
}

.slide{position:absolute;inset:0;padding:150px 88px 96px;opacity:0;visibility:hidden;pointer-events:none;z-index:1;}
.slide.is-active{opacity:1;visibility:visible;z-index:2;}
.slide--how{display:grid;grid-template-columns:1fr 540px;align-items:center;column-gap:96px;}

.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--body);font-weight:600;font-size:22px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 26px;
}
.eyebrow::before{content:"";width:44px;height:8px;border-radius:4px;background:var(--accent);}

h1.headline{
  font-family:var(--display);font-weight:500;font-size:78px;line-height:1.04;
  letter-spacing:-.015em;margin:0 0 40px;text-wrap:balance;max-width:680px;
}

.steps{list-style:none;margin:0 0 38px;padding:0;display:flex;flex-direction:column;gap:22px;max-width:940px;}
.steps li{display:grid;grid-template-columns:56px 1fr;align-items:start;column-gap:22px;font-size:30px;line-height:1.34;}
.steps li b{font-weight:600;}
.steps--tight{gap:16px;margin-bottom:30px;}
.steps--tight li{font-size:28px;grid-template-columns:48px 1fr;}
.stepnum{
  display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:6px;background:var(--accent);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:28px;line-height:1;
}
.steps--tight .stepnum{width:48px;height:48px;font-size:25px;border-radius:6px;}
.url{
  display:inline-block;margin-top:10px;padding:10px 18px;border-radius:8px;
  background:var(--bg-mid);border:1px solid var(--border);
  font-family:var(--body);font-weight:600;font-size:26px;white-space:nowrap;
}

/* A tip is one paragraph. As a flex container it turned the inline <b> into its
   own column, so the text broke into narrow stacks. */
.tip{
  display:block;max-width:880px;
  padding:24px 30px;border-radius:12px;background:var(--bg-mid);border:1px solid var(--border);
  font-size:25px;line-height:1.4;color:var(--ink-70);
}
.tip__key{
  display:inline;margin-right:10px;
  font-family:var(--body);font-weight:600;color:var(--ink);white-space:nowrap;
}

.slide--section{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;}
/* Section dividers use the site's section-label, not a filled number chip.
   The number stays ink (the accent yellow is ~1.3:1 on cream and unreadable as
   text); the accent survives as the short rule, exactly like .eyebrow. */
.section__num{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--body);font-weight:600;font-size:22px;line-height:1.2;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 26px;
}
.section__num::before{content:"";width:44px;height:8px;border-radius:4px;background:var(--accent);}
.section__title{font-family:var(--display);font-weight:500;font-size:104px;line-height:1.02;margin:0 0 22px;letter-spacing:-.02em;}
.section__sub{font-size:34px;color:var(--ink-70);margin:0;max-width:720px;line-height:1.35;}

.slide--title{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.slide--title h1{font-family:var(--display);font-weight:500;font-size:132px;line-height:1;letter-spacing:-.025em;margin:0 0 30px;}
.slide--title p{font-size:38px;line-height:1.4;color:var(--ink-70);margin:0;max-width:880px;}
.rule{width:180px;height:10px;border-radius:5px;background:var(--accent);margin:0 0 44px;}

.contact{display:flex;gap:28px;margin-top:52px;}
.contact__card{background:transparent;border:1px solid var(--border);border-radius:12px;padding:30px 44px;min-width:300px;}
.contact__office{font-family:var(--display);font-weight:600;font-size:30px;margin:0 0 10px;text-align:center;color:var(--ink-70);}
.contact__num{text-align:center;font-size:38px;font-weight:700;margin:0;font-variant-numeric:tabular-nums;}
.closing__site{font-family:var(--body);font-weight:600;font-size:26px;letter-spacing:.04em;color:var(--muted);margin:34px 0 0;}

/* ---------- Phone: a real portal screenshot in a device frame ----------
   Each deck sets its own aspect-ratio and .shot-* bindings inline. */
.phone{
  position:relative;
  justify-self:center;
  height:815px;
  width:auto;
  border:2px solid #000;
  border-radius:24px;
  overflow:hidden;
  background:var(--paper);
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
  box-shadow:none;
}

/* Ring over the tab, menu row, or card a step points at. Geometry is per deck. */
.hi{
  position:absolute;
  left:3%; width:94%; height:6.6%;
  border:6px solid var(--accent);
  border-radius:16px;
  background:rgba(255,190,0,.16);
}

/* ---------- Desktop browser screens ---------- */
.slide--wide{grid-template-columns:1fr 880px;}
.slide--wide h1.headline{font-size:68px;max-width:100%;}
.slide--wide .steps{max-width:100%;}
.slide--wide .tip{max-width:100%;}
.browser{
  justify-self:center;width:880px;
  border:1px solid var(--border);border-radius:12px;overflow:hidden;
  background:var(--paper);box-shadow:none;
}
.browser__bar{
  display:flex;align-items:center;gap:10px;height:46px;padding:0 20px;
  background:var(--bg-mid);border-bottom:1px solid var(--border);
}
.browser__bar i{display:block;width:13px;height:13px;border-radius:50%;background:rgba(0,0,0,.26);}
.browser__shot{
  display:block;aspect-ratio:1725 / 765;
  background-size:cover;background-position:top center;background-repeat:no-repeat;
}
.shot-dtop-menu{background-image:url(/images/portal/desktop-menu.webp);}
.shot-dtop-family{background-image:url(/images/portal/desktop-family-access.webp);}
.shot-dtop-add{background-image:url(/images/portal/desktop-add-patient.webp);}

/* ---------- Entrance motion: resting state IS the visible state ---------- */
.anim,
.phone{opacity:1;transform:none;}
.slide.is-active .anim{
  transition:opacity 620ms cubic-bezier(.2,.7,.25,1) var(--d,0ms),
             transform 620ms cubic-bezier(.2,.7,.25,1) var(--d,0ms);
}
.slide.is-active .phone{
  transition:opacity 700ms cubic-bezier(.2,.7,.25,1) 120ms,
             transform 700ms cubic-bezier(.2,.7,.25,1) 120ms;
}
.slide.is-entering .anim{opacity:0;transform:translateY(26px);transition:none;}
.slide.is-entering .phone{opacity:0;transform:translateX(38px);transition:none;}

/* ---------- Control bar ----------
   The pill used to be a fixed overlay and covered whatever artwork reached the
   bottom of the slide. It is a reserved strip now: fit() subtracts --bar from
   the available height, so the stage is never underneath it. Buttons follow the
   site's own button vocabulary (secondary outline, primary fill for play/pause). */
.controls{
  position:fixed;left:0;right:0;bottom:0;height:var(--bar);
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--bg);border-top:1px solid var(--border);
  z-index:50;font-family:var(--body);
}
.btn{
  appearance:none;background:transparent;color:var(--ink);
  border:1.5px solid #000;border-radius:8px;
  font:600 14px/1 var(--body);padding:12px 20px;cursor:pointer;white-space:nowrap;
}
.btn:hover{background:rgba(0,0,0,.06);}
/* Same ring as the site's global :focus-visible, so focus reads identically
   inside the embedded deck and on the page around it. */
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
#toggle{background:var(--red);border-color:var(--red);color:#fff;}
#toggle:hover{background:var(--red);opacity:.88;}
.counter{color:var(--muted);font-size:13px;padding:0 10px;font-variant-numeric:tabular-nums;white-space:nowrap;}

@media (max-width:820px),(max-height:520px){
  .controls{gap:6px;}
  .btn{font-size:13px;padding:10px 12px;}
  .counter{font-size:12px;padding:0 6px;}
}
@media (prefers-reduced-motion:reduce){
  .slide.is-active .anim,.slide.is-active .phone,
  .slide.is-entering .anim,.slide.is-entering .phone{transition:none;opacity:1;transform:none;}
  .progress__fill{transition:none;}
}

/* ---------- Portrait / phone: a taller stage and a stacked layout ----------
   The stage keeps scaling to fit, so swapping its dimensions here re-proportions
   every absolute size at once. 800x1730 is close to a modern phone's aspect, so
   a portrait screen fills edge to edge instead of letterboxing. */
@media (max-aspect-ratio: 1/1){
  :root{--bar:72px;}
  .stage{width:800px;height:1730px;}

  .topbar{height:86px;padding:0 56px;}
  .mark{gap:10px;}
  .mark__logo{height:38px;}
  .mark__name{font-size:18px;}
  .mark__site{font-size:16px;}

  .slide{padding:110px 56px 80px;}

  .slide--how{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    align-content:center;
    justify-items:center;
    row-gap:34px;
    column-gap:0;
  }
  .slide--how > div:not(.phone){width:100%;}

  .eyebrow{font-size:26px;letter-spacing:.14em;margin:0 0 18px;gap:12px;}
  .eyebrow::before{width:32px;height:6px;}

  h1.headline{font-size:66px;margin:0 0 26px;max-width:100%;}

  .steps{max-width:100%;gap:16px;margin:0 0 26px;}
  .steps li{font-size:34px;line-height:1.3;grid-template-columns:52px 1fr;column-gap:16px;}
  .stepnum{width:52px;height:52px;border-radius:6px;font-size:27px;}
  .steps--tight{gap:12px;margin-bottom:22px;}
  .steps--tight li{font-size:31px;line-height:1.3;grid-template-columns:46px 1fr;column-gap:14px;}
  .steps--tight .stepnum{width:46px;height:46px;font-size:24px;border-radius:6px;}

  .tip{max-width:100%;font-size:31px;line-height:1.34;padding:18px 22px;border-radius:12px;}
  .url{font-size:23px;padding:8px 14px;border-radius:8px;margin-top:8px;}

  .phone{height:730px;border-width:2px;border-radius:20px;box-shadow:none;}

  .section__num{font-size:26px;margin:0 0 18px;gap:12px;}
  .section__num::before{width:32px;height:6px;}
  .section__title{font-size:70px;margin:0 0 18px;}
  .section__sub{font-size:28px;max-width:100%;}

  .slide--title h1{font-size:80px;margin:0 0 24px;}
  .slide--title p{font-size:30px;max-width:100%;}
  .rule{width:130px;height:8px;margin:0 0 32px;}

  .contact{flex-direction:column;gap:16px;margin-top:36px;width:100%;}
  .contact__card{min-width:0;width:100%;padding:18px 28px;border-radius:12px;border-width:1px;}
  .contact__office{font-size:24px;margin:0 0 6px;}
  .contact__num{font-size:34px;}
  .closing__site{font-size:21px;margin-top:26px;}

  .slide--wide{grid-template-columns:1fr;}
  .slide--wide h1.headline{font-size:62px;}
  .browser{width:100%;border-width:1px;border-radius:12px;box-shadow:none;}
  .browser__bar{height:34px;padding:0 14px;gap:7px;}
  .browser__bar i{width:9px;height:9px;}

  /* Touch targets: the max-width:820px rule above shrinks these below 44px,
     which is unusable on a phone. Drop Restart + Full screen in portrait so the
     remaining four items fit one row at a real tap size: Restart is reachable by
     stepping back with Prev, and the guide page carries its own "Open full
     screen" link. The bar reserves its own height, so nothing overlaps the slide. */
  .btn{font-size:14px;padding:14px 16px;min-height:44px;}
  #restart,#full{display:none;}
  .counter{font-size:13px;padding:0 8px;}
}

/* ---------- Compact landscape: narrow embeds ----------
   The guide page gives the deck a ~598px-wide column. Fitting the 1920x1080
   stage into that scales it to ~0.31, which renders 30px step text at ~9px on
   screen. Same trick as the portrait block: a smaller stage with every absolute
   size re-proportioned, so the SAME content fits at ~0.50 scale instead.
   Does not apply to the standalone deck, which is wider than 900px. */
@media (min-aspect-ratio: 1/1) and (max-width: 900px){
  .stage{width:1200px;height:675px;}

  .topbar{height:56px;padding:0 40px;}
  .mark{gap:8px;}
  .mark__logo{height:30px;}
  .mark__name{font-size:14px;}
  .mark__site{font-size:13px;}

  .slide{padding:72px 40px 30px;}
  .slide--how{grid-template-columns:1fr 250px;column-gap:44px;}

  .eyebrow{font-size:24px;letter-spacing:.12em;margin:0 0 12px;gap:10px;}
  .eyebrow::before{width:34px;height:6px;border-radius:3px;}

  h1.headline{font-size:46px;margin:0 0 18px;max-width:100%;line-height:1.06;}

  .steps{max-width:100%;gap:11px;margin:0 0 16px;}
  .steps li{font-size:31px;line-height:1.26;grid-template-columns:46px 1fr;column-gap:14px;}
  .stepnum{width:46px;height:46px;border-radius:6px;font-size:25px;}
  .steps--tight{gap:9px;margin-bottom:14px;}
  .steps--tight li{font-size:27px;grid-template-columns:40px 1fr;column-gap:12px;}
  .steps--tight .stepnum{width:40px;height:40px;font-size:22px;border-radius:6px;}

  .tip{max-width:100%;font-size:29px;line-height:1.32;padding:14px 18px;border-radius:12px;}
  .url{font-size:26px;padding:6px 12px;border-radius:8px;margin-top:6px;}

  .phone{height:470px;border-width:2px;border-radius:16px;}

  .section__num{font-size:24px;letter-spacing:.12em;margin:0 0 14px;gap:10px;}
  .section__num::before{width:34px;height:6px;border-radius:3px;}
  .section__title{font-size:56px;margin:0 0 14px;}
  .section__sub{font-size:30px;line-height:1.3;max-width:100%;}

  .slide--title h1{font-size:74px;margin:0 0 18px;}
  .slide--title p{font-size:30px;line-height:1.3;max-width:760px;}
  .rule{width:100px;height:6px;margin:0 0 26px;}

  .contact{gap:16px;margin-top:30px;}
  .contact__card{min-width:0;padding:16px 24px;border-radius:12px;}
  .contact__office{font-size:24px;margin:0 0 5px;}
  .contact__num{font-size:31px;}
  .closing__site{font-size:24px;margin-top:20px;}

  .slide--wide{grid-template-columns:1fr 560px;}
  .slide--wide h1.headline{font-size:42px;line-height:1.06;}
  .browser{width:560px;border-radius:12px;}
  .browser__bar{height:30px;padding:0 13px;gap:7px;}
  .browser__bar i{width:9px;height:9px;}
}