/* Progressive enhancement: the complete consumer page stays vertical without
   JavaScript and on phones/tablets. Desktop uses the company site's chapters. */
.chapter-content { display:contents; }
.consumer-chapters { display:none; }

/* The chapter bar, after plurelinc.com: numbered chapters that fill the bar,
   a hairline above them and an orange rule over the current one. With
   JavaScript it is fixed to the bottom at every width. Wide windows move
   sideways between chapters. Phones and tablets keep the vertical page and
   scroll to each chapter; the numbered strip scrolls sideways when all nine
   do not fit, and the arrows stay in reach. */
html.consumer-js { --chapter-footer:56px; scroll-padding-bottom:calc(var(--chapter-footer) + 16px); }
.consumer-js .consumer-chapters {
  position:fixed; inset:auto 0 0; z-index:30;
  display:flex; align-items:stretch;
  height:calc(var(--chapter-footer) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--plurel-canvas); border-top:1px solid var(--plurel-hairline);
}
.consumer-chapter-links {
  position:relative; display:flex; flex:1 1 auto; min-width:0;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none;
}
.consumer-chapter-links::-webkit-scrollbar { display:none; }
.consumer-chapter-links a {
  flex:1 0 0; display:flex; align-items:center; justify-content:center; gap:8px;
  min-width:max-content; min-height:44px; padding:0 16px;
  border-left:1px solid rgb(0 0 0 / .08);
  color:rgb(0 0 0 / .62); font:400 14px/1.2 var(--sans); white-space:nowrap; text-decoration:none;
  transition:color .2s ease, box-shadow .2s ease;
}
.consumer-chapter-links a:first-child { border-left:0; }
.consumer-chapter-links a span { font-size:12px; font-variant-numeric:tabular-nums; }
@media (hover:hover) {
  .consumer-chapter-links a:hover { color:var(--ink); }
  .consumer-chapter-controls button:hover:not(:disabled) { color:var(--terra); }
}
.consumer-chapter-links a[aria-current] { color:var(--ink); box-shadow:inset 0 2px 0 var(--terra); }
.consumer-chapter-links a:focus-visible, .consumer-chapter-controls button:focus-visible { outline:3px solid var(--plurel-blue-ink); outline-offset:-3px; }
.consumer-chapter-controls { display:flex; flex:none; border-left:1px solid var(--plurel-hairline); }
.consumer-chapter-controls button {
  display:grid; place-items:center; width:56px; min-height:44px;
  background:transparent; border:0; border-left:1px solid rgb(0 0 0 / .08); border-radius:0;
  color:var(--ink); font:400 22px/1 var(--sans); cursor:pointer;
}
.consumer-chapter-controls button:first-child { border-left:0; }
.consumer-chapter-controls button:disabled { color:rgb(0 0 0 / .24); cursor:default; }

/* Phones and tablets: the bar replaces the top links and the page ends above it. */
.consumer-js:not(.consumer-horizontal) .nav-cluster { display:none; }
.consumer-js:not(.consumer-horizontal) body { padding-bottom:calc(var(--chapter-footer) + env(safe-area-inset-bottom,0px)); }
.consumer-js .logo-pill { left:50%; transform:translateX(-50%); }
.consumer-js .hero { padding-top:152px; }
/* The phone walkthrough also clears the bar when it is brought into view. */
.consumer-js:not(.consumer-horizontal) .iphone-shell {
  width:min(390px,100%,calc((100svh - 48px - var(--chapter-footer) - 2 * var(--stage-padding-y) - 66px) * 490 / 1000));
}
@media (max-width:600px) {
  html.consumer-js { --chapter-footer:52px; }
  .consumer-js .hero { padding-top:128px; }
  .consumer-chapter-links a { padding:0 12px; gap:6px; }
  .consumer-chapter-controls button { width:48px; }
}

@media (min-width:1100px) and (min-height:600px) {
  html.consumer-horizontal {
    --chapter-header:88px;
    --chapter-footer:64px;
    --chapter-height:calc(100dvh - var(--chapter-header) - var(--chapter-footer));
    overflow:hidden;
    scroll-padding:0;
  }
  .consumer-horizontal body { height:100dvh; overflow:hidden; }
  .consumer-horizontal body::before {
    position:fixed; height:var(--chapter-header); z-index:30;
    background:var(--plurel-canvas);
  }
  .consumer-horizontal .logo-pill {
    position:fixed; top:8px; left:50%; transform:translateX(-50%);
    height:72px; z-index:31;
  }
  .consumer-horizontal .nav-cluster { display:none; }
  .consumer-horizontal #consumer-track {
    position:fixed; inset:var(--chapter-header) 0 var(--chapter-footer);
    display:flex; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; scrollbar-width:none;
    overscroll-behavior-x:contain; scroll-behavior:smooth;
  }
  .consumer-horizontal #consumer-track::-webkit-scrollbar { display:none; }
  .consumer-horizontal #consumer-track > [data-chapter] {
    flex:0 0 100%; width:100%; max-width:none; height:100%; min-height:0;
    display:flex; flex-direction:column; align-items:stretch;
    margin:0; padding:32px clamp(32px,4vw,80px);
    scroll-snap-align:start; scroll-snap-stop:always; scroll-margin:0;
    overflow-x:hidden; overflow-y:auto; border:0; border-radius:0;
    position:relative; gap:0;
  }
  .consumer-horizontal .chapter-content {
    display:block; flex:none; width:100%; max-width:1280px;
    margin:auto; min-width:0;
  }
  /* Nine chapters share the bar; a narrow window keeps every label whole. */
  .consumer-horizontal .consumer-chapter-links a { padding:0 12px; }

  /* Keep the existing brand artwork, signup and copy, scaled to the chapter. */
  .consumer-horizontal .hero-copy { max-width:900px; }
  .consumer-horizontal .hero-topRow { margin-bottom:20px; }
  .consumer-horizontal .friendship-frame {
    width:min(100%,calc((var(--chapter-height) - 320px) * 1.9));
    min-width:450px; padding:16px; margin-inline:auto;
  }
  .consumer-horizontal .hero-signup { margin-top:24px; }
  .consumer-horizontal .signup-label { font-size:22px; margin-bottom:12px; }
  .consumer-horizontal .hero .platform-pills { margin-top:12px; }
  .consumer-horizontal .hero .invite-feedback { margin-top:12px; }

  .consumer-horizontal .sec-head { margin-bottom:28px; padding-bottom:24px; flex-wrap:nowrap; gap:40px; }
  .consumer-horizontal .sec-h2 { font-size:clamp(32px,3vw,46px); }
  .consumer-horizontal .sec-lead { flex:0 0 32%; }
  .consumer-horizontal .blueprint-grid { grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr); gap:40px; }
  .consumer-horizontal .figure-card { padding:24px; }
  .consumer-horizontal .receipt { padding:24px; }

  .consumer-horizontal .theater-sticky { grid-template-columns:minmax(0,1fr) minmax(320px,1fr); gap:64px; }
  .consumer-horizontal .theater-steps .sec-h2 { font-size:clamp(28px,2.7vw,40px); }
  .consumer-horizontal .theater-stage { width:100%; max-width:560px; margin-left:auto; --stage-padding-y:20px; }
  .consumer-horizontal .iphone-shell {
    width:min(350px,100%,calc((var(--chapter-height) - 64px - 2 * var(--stage-padding-y) - 66px) * 490 / 1000));
  }
  .consumer-horizontal .theater-tabs { margin-top:24px; }
  .consumer-horizontal .theater-description { min-height:140px; padding-top:24px; }
  .consumer-horizontal .scrub-sec .chapter-content { max-width:1000px; text-align:center; }
  .consumer-horizontal .scrub-p { font-size:clamp(32px,3.3vw,48px); }
  .consumer-horizontal .scrub-word.is-accent { text-decoration:underline; text-decoration-color:var(--terra); text-underline-offset:.16em; text-decoration-thickness:.07em; }
  .consumer-horizontal .scrub-doodle { opacity:.6; }
  .consumer-horizontal .bento-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .consumer-horizontal .bento-card { padding:24px; }
  .consumer-horizontal .bento-title { font-size:24px; }

  .consumer-horizontal .faq-sec .chapter-content {
    display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:72px;
    align-items:start;
  }
  .consumer-horizontal .faq-sec .kicker { grid-column:1; justify-self:start; }
  .consumer-horizontal .faq-sec .sec-h2 { grid-column:1; grid-row:2; align-self:start; }
  .consumer-horizontal .faq-list { grid-column:2; grid-row:1 / 4; margin-top:0; width:100%; }
  .consumer-horizontal .faq-item summary { font-size:16px; padding-block:20px; }
  .consumer-horizontal .faq-body { font-size:16px; }

  .consumer-horizontal .consumer-team-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:32px; gap:0 32px; }
  .consumer-horizontal .consumer-team-heading { padding-bottom:24px; }
  .consumer-horizontal .consumer-headshot { width:112px; height:112px; margin-bottom:20px; }
  .consumer-horizontal .consumer-person { padding-bottom:0; }
  .consumer-horizontal .consumer-person h3 { font-size:24px; }
  .consumer-horizontal .consumer-bio { margin-block:12px 16px; }
  .consumer-horizontal .close-pod .chapter-content { max-width:1000px; text-align:center; }
  .consumer-horizontal .close-formWrap { margin-inline:auto; }
  .consumer-horizontal .site-footer .footer-wordmarkWrap { max-width:200px; margin-block:28px; }
  .consumer-horizontal .site-footer .footer-top { margin:0; }
  .consumer-horizontal .footer-fine { gap:24px; }
}
@media (min-width:1100px) and (min-height:600px) and (max-height:800px) {
  html.consumer-horizontal { --chapter-header:72px; --chapter-footer:56px; }
  .consumer-horizontal .logo-pill { top:4px; height:64px; }
  .consumer-horizontal .logo-lockupSvg { height:56px; width:100px; }
  .consumer-horizontal #consumer-track > [data-chapter] { padding-block:20px; }
  .consumer-horizontal .hero-topRow { margin-bottom:16px; }
  .consumer-horizontal .friendship-frame { padding:12px; }
  .consumer-horizontal .hero-signup { margin-top:18px; }
  .consumer-horizontal .sec-head { padding-bottom:20px; margin-bottom:20px; }
  .consumer-horizontal .sec-h2 { font-size:34px; }
  .consumer-horizontal .theater-steps .sec-h2 { font-size:32px; }
  .consumer-horizontal .figure-card { padding:16px; }
  .consumer-horizontal .figure-topMeta { font-size:10px; letter-spacing:.04em; }
  .consumer-horizontal .receipt { padding:16px; }
  .consumer-horizontal .blueprint-sec .sec-head { margin-bottom:12px; padding-bottom:16px; }
  .consumer-horizontal .theater-stage { --stage-padding-y:12px; gap:12px; }
  .consumer-horizontal .iphone-shell {
    width:min(350px,100%,calc((var(--chapter-height) - 40px - 2 * var(--stage-padding-y) - 58px) * 490 / 1000));
  }
  .consumer-horizontal .theater-tabs { margin-top:20px; }
  .consumer-horizontal .theater-description { min-height:128px; }
  .consumer-horizontal .bento-card { padding:20px; }
  .consumer-horizontal .bento-title { font-size:22px; }
  .consumer-horizontal .consumer-team-heading { padding-bottom:20px; }
  .consumer-horizontal .consumer-team h2 { font-size:36px; margin-top:12px; }
  .consumer-horizontal .consumer-team-grid { margin-top:24px; }
  .consumer-horizontal .consumer-headshot { width:88px; height:88px; margin-bottom:16px; }
  .consumer-horizontal .consumer-role { margin-top:6px; }
  .consumer-horizontal .consumer-bio { margin-block:8px 12px; line-height:1.5; }
}
@media (prefers-reduced-motion:reduce) {
  .consumer-horizontal #consumer-track { scroll-behavior:auto; }
  .consumer-chapter-links a { transition:none; }
}
/* Forced colours drop box shadows, so mark the current chapter with a line. */
@media (forced-colors:active) {
  .consumer-chapter-links a[aria-current] { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
}
@media print {
  html.consumer-horizontal, .consumer-horizontal body { height:auto; overflow:visible; }
  .consumer-horizontal #consumer-track { position:static; display:block; overflow:visible; }
  .consumer-horizontal #consumer-track > [data-chapter] { height:auto; overflow:visible; break-before:page; }
  .consumer-js .consumer-chapters { display:none; }
  body::after { content:none; }
}