/* 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 on tablets and desktop. Wide windows
   move sideways between chapters. 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. Phone widths hide the bar and scroll
   the page, so the section strip does not sit on the content. */
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; }

/* Tablets and narrow windows: the bar replaces the top links and the page ends
   above it. Phones drop the bar; see the 600px query. */
.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) {
  /* Phone widths scroll the page. The chapter strip is the section scrollbar
     (labels, current rule, and previous/next arrows). Hide it and the space
     reserved under the content. Wider windows keep the bar. */
  html.consumer-js { --chapter-footer:0px; scroll-padding-bottom:0; }
  .consumer-js .consumer-chapters { display:none; }
  .consumer-js .hero { padding-top:128px; }
}

@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; overscroll-behavior-y:contain; border:0; border-radius:0;
    position:relative; gap:0;
  }
  /* Every chapter fills its screen: the content takes the full width and
     height between the header and the chapter bar, and each chapter below
     stretches its main piece into the room. Chapters are composed for a
     1440 x 765 window; a bigger one scales the whole chapter by
     --chapter-zoom (consumer-chapters.js), so a large monitor shows the same
     composition larger rather than a small block in a big page. */
  .consumer-horizontal .chapter-content {
    display:flex; flex-direction:column; flex:1 1 auto; width:100%;
    min-width:0; min-height:0; margin:0; zoom:var(--chapter-zoom,1);
  }
  /* Nine chapters share the bar; a narrow window keeps every label whole. */
  .consumer-horizontal .consumer-chapter-links a { padding:0 12px; }

  /* The opener fills the chapter as it does on plurelinc.com: the frame spans
     the width and takes the height the signup leaves, and the lettering
     scales with that height. */
  .consumer-horizontal .hero .chapter-content { display:flex; flex-direction:column; height:100%; max-width:none; margin:0; }
  .consumer-horizontal .hero-copy { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; max-width:none; }
  .consumer-horizontal .friendship-frame {
    display:flex; flex:1 1 0; min-height:0; align-items:center; justify-content:center;
    padding:8px 16px 40px;
  }
  .consumer-horizontal .hero-h1.friendship-headline { width:auto; max-width:100%; height:100%; }
  .consumer-horizontal .friendship-art { width:auto; max-width:100%; height:100%; }
  .consumer-horizontal .hero-signup { margin-top:32px; }
  .consumer-horizontal .hero .invite-feedback { margin-top:10px; }

  .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; }
  /* 02 and 05: the figure and its receipt take the height the title leaves.
     The drawing grows to fit its card; the receipt sits level with it. */
  .consumer-horizontal .blueprint-grid { flex:1 1 auto; min-height:0; align-items:stretch; }
  .consumer-horizontal .figure-card { display:flex; flex-direction:column; min-height:0; }
  .consumer-horizontal .figure-card > .fig-wide { flex:1 1 0; min-height:0; height:100%; }
  .consumer-horizontal .receipt-wrap { align-self:center; }

  /* 04: the words on the left; the findings fill the right, one even row each. */
  .consumer-horizontal .story-sec .chapter-content {
    display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:72px; align-items:stretch;
  }
  /* Both columns hang from one ink rule: the line at the top left, the
     sentence at the foot level with the source, the findings between. */
  .consumer-horizontal .story-words {
    display:flex; flex-direction:column; justify-content:flex-start;
    padding-top:18px; border-top:1px solid var(--ink);
  }
  .consumer-horizontal .story-h2 { font-size:56px; line-height:1.22; }
  .consumer-horizontal .story-p { margin:auto 0 0; }
  .consumer-horizontal .story-stats { display:flex; flex-direction:column; min-height:0; }
  .consumer-horizontal .story-statList { flex:1 1 auto; display:flex; flex-direction:column; }
  .consumer-horizontal .story-stat { flex:1 1 0; padding-block:0; }
  .consumer-horizontal .story-num { font-size:92px; }

  .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; }
  /* The phone is sized from the chapter's height. That height is a window
     measure, so it is divided back out of the chapter's zoom. */
  .consumer-horizontal .iphone-shell {
    width:min(350px,100%,calc((var(--chapter-height) / var(--chapter-zoom,1) - 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; }
  /* 06: the title at the top left, a way to ask at the bottom left, and the
     questions down the right in even rows that share the full height. */
  .consumer-horizontal .faq-sec .chapter-content {
    display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); grid-template-rows:auto auto 1fr;
    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-more { grid-column:1; grid-row:3; align-self:end; margin:0; }
  .consumer-horizontal .faq-list {
    grid-column:2; grid-row:1 / 4; align-self:stretch;
    display:flex; flex-direction:column; margin-top:0; width:100%;
  }
  .consumer-horizontal .faq-item { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
  .consumer-horizontal .faq-item summary { font-size:18px; padding-block:16px; }
  .consumer-horizontal .faq-body { font-size:16px; }

  /* 07: the roster's rows share the height above the contact strip. */
  .consumer-horizontal .team-heading { margin-bottom:24px; }
  .consumer-horizontal .team-roster { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  .consumer-horizontal .team-member { flex:1 1 auto; }
  /* 08: the outlined card fills the screen; the words and the form sit beside
     the mailbox, which grows with the card. */
  .consumer-horizontal .close-pod .close-card { flex:1 1 auto; width:100%; max-width:none; min-height:0; margin:0; }
  /* 09: the links on top, the wordmark filling the room below them, the fine
     print at the foot. */
  .consumer-horizontal .site-footer .footer-top { margin:0; }
  .consumer-horizontal .site-footer .footer-wordmarkWrap {
    flex:1 1 auto; min-height:0; max-width:none; margin-block:28px;
    display:flex; align-items:flex-end;
  }
  .consumer-horizontal .site-footer .footer-wordmarkWrap img { width:auto; max-width:100%; height:100%; max-height:440px; }
  .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 .friendship-frame { padding:6px 12px 28px; }
  .consumer-horizontal .hero-signup { margin-top:24px; }
  .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 :is(.blueprint-sec, #guardrails) .sec-head { margin-bottom:12px; padding-bottom:16px; }
  /* The FIG. 1 and FIG. 2 receipts tighten so each chapter fits a short window. */
  .consumer-horizontal .receipt-head { padding-bottom:10px; margin-bottom:10px; }
  .consumer-horizontal .receipt-sub { margin-bottom:10px; }
  .consumer-horizontal .receipt-lines { gap:6px; padding:10px 0; margin-bottom:10px; }
  .consumer-horizontal .theater-stage { --stage-padding-y:12px; gap:12px; }
  .consumer-horizontal .iphone-shell {
    width:min(350px,100%,calc((var(--chapter-height) / var(--chapter-zoom,1) - 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 .consumer-team h2 { font-size:36px; }
  .consumer-horizontal .team-heading { margin:10px 0 16px; }
  .consumer-horizontal .team-member { padding-block:12px; }
  .consumer-horizontal .team-headshot { width:56px; height:56px; }
  .consumer-horizontal .team-member { grid-template-columns:56px minmax(0,1fr) minmax(0,2fr) auto; }
  .consumer-horizontal .team-who h3 { font-size:21px; }
}
@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; }
}