@supports not (aspect-ratio: 1 / 1) {
    * {
        --aspect-ratio: initial;
    }
}

/* every inner scroll region gets a hairline bar in its own text colour; the
   page keeps the OS bar. The WebKit block is the Safari fallback; Chrome
   ignores it once scrollbar-color is set. */

/* This blanket kill is !important in the *first* cascade layer, and important
   declarations reverse layer order, so nothing downstream can override it: a
   component can't offer a gentler alternative, only no motion at all. Anything
   marked .motion_managed is therefore skipped here and takes on the job of
   answering prefers-reduced-motion itself — see .nav_panel in
   modules/site_header.css, which swaps its circle reveal for a cross-fade.
   Opting out means opting in to handling it; it is not a licence to animate.

   The visitor's own choice comes first: [data-motion] on <html> either
   overrides an OS reduce request ("full") or asks for calm motion without one
   ("reduced"); no attribute at all means follow the system. The accessibility
   panel sets it, and the <head> applies it before first paint.

   The two branches below carry the same declarations under different
   conditions, because a media query can't join a selector list. Keep in sync. */
/* Motion preference. [data-motion] on <html> is the switch: "full" overrides an
   OS reduce request, "reduced" asks for calm motion without one, and no
   attribute at all follows the system. The accessibility panel sets it and the
   <head> applies the stored choice before first paint.

   Calm means the geometry stops moving — a 990px circle sweeping the viewport
   is exactly the large-area motion the preference asks us to drop — so the
   circle sits at full radius and the panel cross-fades in place instead. Rows
   fade without rising, badges land without the overshoot, and nothing waits its
   turn. An opacity change carries no direction, so it stays comfortable while
   still not being a hard cut.

   The two branches carry the same values under different conditions, because a
   media query can't join a selector list. Keep them in sync. */
/* Media queries can't read custom properties, so this is the reference.
   Desktop first: every module's base rules are the 1920 design and it
   steps itself down at the bottom of its own file.

     1440px   90rem
     1080px   67.5rem
      768px   48rem
      480px   30rem
*/
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-thin-webfont.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-thinitalic-webfont.woff2") format("woff2");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-extralight-webfont.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-extralightitalic-webfont.woff2") format("woff2");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-light-webfont.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-lightitalic-webfont.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-semilight-webfont.woff2") format("woff2");
    font-weight: 350;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-semilightitalic-webfont.woff2") format("woff2");
    font-weight: 350;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-regular-webfont.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-italic-webfont.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-medium-webfont.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-mediumitalic-webfont.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-semibold-webfont.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-semibolditalic-webfont.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-bold-webfont.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-bolditalic-webfont.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-extrabold-webfont.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-extrabolditalic-webfont.woff2") format("woff2");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-black-webfont.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro";
    src: url("../css/fonts/garantpro-blackitalic-webfont.woff2") format("woff2");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Nothing You Could Do";
    src: url("../css/fonts/nothing-you-could-do.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow Condensed";
    src: url("../css/fonts/barlow-condensed-300.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow Condensed";
    src: url("../css/fonts/barlow-condensed-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow Condensed";
    src: url("../css/fonts/barlow-condensed-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow Condensed";
    src: url("../css/fonts/barlow-condensed-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Reenie Beanie";
    src: url("../css/fonts/reenie-beanie.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* the accessibility panel's "bolder" typeface: the same Garant Pro, with each
   weight a module asks for drawn one face heavier, so thin display type stays
   readable without touching any module's numbers. Only downloaded when picked. */
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-light-webfont.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-lightitalic-webfont.woff2") format("woff2");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-semilight-webfont.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-semilightitalic-webfont.woff2") format("woff2");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-regular-webfont.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-italic-webfont.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-medium-webfont.woff2") format("woff2");
    font-weight: 350;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-mediumitalic-webfont.woff2") format("woff2");
    font-weight: 350;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-medium-webfont.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-mediumitalic-webfont.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-semibold-webfont.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-semibolditalic-webfont.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-bold-webfont.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-bolditalic-webfont.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-extrabold-webfont.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-extrabolditalic-webfont.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-black-webfont.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-blackitalic-webfont.woff2") format("woff2");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-black-webfont.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "GarantPro Heavier";
    src: url("../css/fonts/garantpro-blackitalic-webfont.woff2") format("woff2");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}
/* the easy-read typeface in the accessibility panel. Designed by the Braille
   Institute for low vision; only downloaded once someone picks it. */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../css/fonts/atkinson-hyperlegible-next.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../css/fonts/atkinson-hyperlegible-next-italic.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}
/* What the accessibility panel changes. Each choice is a data attribute on
   <html>, set in the <head> before first paint and kept by main.js; motion
   lives in tokens/motion.css and the reset. The reading aids carry !important
   because important declarations reverse layer order, so from base they beat
   every module: a visitor's choice should win over the design, never lose to it. */
/* type ships as rem (postcss.config.js), so this scales every size, and the
   browser's own font size setting, while layout keeps its px geometry */
/* the standard palette already meets AA; this goes further. The green fills
   stay, their type goes black (8.4:1), green type deepens to 6.7:1 on white */
/* the handwriting and the condensed Labs face are the hardest reads on the
   site, so easy-read takes them over too */
/* links that are pictures (the logo, the social icons) have nothing to underline */
/* gentler than the WCAG 1.4.12 test values, which are the most a page must
   survive rather than what reads best */
/* the reading guide: a clear band at --guide-y, which main.js moves with the
   pointer or focus. A dialog sits in the top layer, so it's never shaded. */
/* positioning context for .nav_toggle, which has to live outside <header>
   so it can paint above the reveal circle. Sticky so the bar and the menu
   ride along with the scroll; the z-index sits here rather than on the bar
   because sticky opens its own stacking context, and the page headers that
   tuck up behind the curve come later in the DOM. */
/* above the panel, so the × stays visible and clickable once the circle has
   covered the bar. Mirrors the bar's own box so it lands in the same spot. */
/* the × lands on the dark circle, never on the mint bar */
/* a pale green rather than the brand one, which is 2.45:1 on the panel */
/* closed only, so it stops by itself the moment the nav opens */
/* 11px dots 6px apart: 1.45 takes one to 16px, 1.55 is where neighbours touch */
@keyframes dot_pulse {
    0%, 55%, 100% { transform: scale(1); }
    25% { transform: scale(1.45); }
}
/* the glyph is 32px tall inside a 44px button, so 1.3 leaves 2px */
@keyframes x_pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}
/* the badges land a touch late, with a little overshoot */
/* one stagger slot per top-level item... */
/* ...one beat after Next Steps (7 + its column's 1) for the button, which
       otherwise has no index and would arrive first, on the bare base delay */
/* ...and a fraction of a slot for its sublist, which inherits --i */
/* the arc uncovers the right-hand column first, so the wave follows it
       in from the right rather than all three columns firing at once */
/* keyed off <html data-nav="open">, which the menu button's script mirrors from
   its aria-expanded, rather than .nav_toggle:has([aria-expanded="true"]): :has()
   can't be compiled down, and older engines (webOS TVs) would never open the menu.
   :root keeps the specificity the :has() selector had. */
/* the collapsed nav tucks into the circle's corner, so the circle stays;
   on a phone it grows to cover the screen, which a 990px circle nearly
   does anyway. On :root, not on the panel, because --reveal-collapsed-clip
   resolves this where it is declared. */
/* only the phone locks the page: there the circle covers everything, while
   larger screens keep the page beside the arc and it can carry on scrolling */
/* Hearo Labs: the same bar in the Labs' dark teal, with its wordmark and white dots */
/* on :root because .nav_toggle sits outside <header> and reads the same tokens */
@media (max-width: 47.999rem) {

    /* the wordmark is twice the logo's width, so it shrinks by the same ratio */
}
/* on the panel, not the nav: .nav_actions is a sibling and reads them too */
/* the accessibility row opens a dialog, so it's a button dressed as a row */
/* in flow under the nav, not pinned to the panel's bottom edge: the panel is
   viewport-high and the reveal circle is 990px, so anything anchored to the
   bottom sat outside the circle and was clipped away. The button's far corner
   now ends ~952px from the circle's center; one more numbered item would push
   it out again. */
/* off the <li>, not the link: the sub-items are the link's siblings, and the
       badge should stay up while the cursor is anywhere in the group. transform,
       not scale: scale is the entrance pop in site_header.css. 10% because 5% on
       a 44px disc is 2px and does not register. */
/* the numbered sections take the left column and the two short lists share
   the right, so the whole menu fits a phone screen without scrolling. The
   block sits against the top-right corner, inside the reveal circle. A
   container query rather than a media query: its rem grows with the text
   size setting, so larger text moves to this layout on wider screens too
   (960px at 100%, 1440px at 150%) */
@container nav_panel (width < 60rem) {

        /* runs straight on from the list above, so no second rule between them */
}
@supports not (container-type: inline-size) {
    @media (max-width: 59.999rem) {

        /* runs straight on from the list above, so no second rule between them */
    }
}
/* too narrow for two columns without cutting words off: the smallest phones
   at 100%, and any phone once the text is larger. One column, the short lists
   following the sections; the panel scrolls */
/* Hearo Labs wears its own colors in the menu too: night teal with lime for
   the numbers and for where you are. Dark type on the lime keeps it readable. */
/* an animated banner draws on a white 1920 x 848 stage that main.js scales
       to cover this frame, the same crop the videos got */
/* the subject and the handwriting sit in the middle 60% of the frame,
       so a centred crop keeps both as the box narrows */
/* a still illustration gets the same frame the videos have */
/* an animated scene draws on the brand green itself, so the frame is that
       colour and nothing seams. The stage is built at the design size and
       main.js scales it to cover the frame. */
/* the loop fades up over the still once it has frames, so a slow
       connection just keeps the poster */
@media (max-width: 47.999rem) {

        /* the photo centres in the single column, the badge rides along */
    }
@media (max-width: 47.999rem) {

        /* the photo centres in the single column, the badge rides along */
    }
/* two ellipses, Hearo on the left, the partners on the right; the green
       one paints last so the overlap reads green */
/* a growing collection: past six partners, three across and smaller */
/* a lone logo on the last row sits in the middle */
/* the hub logo alone in one ellipse; its partners are the list below */
/* each logo is sized by eye in the design, so the width rides on the model */
/* the two ellipses stack on a phone, overlapping top to bottom */
@media (max-width: 47.999rem) {

                /* the lower ellipse is wide and shallow, so always three across */

            /* centred over the copy, a little smaller than on desktop */
    }
/* the tint starts under the tab line, not behind the tabs */
/* the scene is a stack of layers over a fixed frame; each one is placed and
       sized in the frame's own pixels and scales with it */
@media (max-width: 67.499rem) {

        /* the scenario list becomes a row of chips above the scene; they file in
           one after another when a category opens, so they read as buttons */
    }
@media (max-width: 47.999rem) {

        /* four tabs won't fit in a row on a phone, so the strip folds into a menu:
           the open category shows with a chevron and the rest drop down under it */
        /* the panel runs edge to edge on a phone */

            /* the handle stays on top whichever tab it is */
    }
@keyframes rise {
    from {
        opacity: 0;
        translate: 0 10px;
    }
}
/* the thick bar over the title, as on the steps */
/* solid dark-green pills, the same chip Jeff labels everything with */
/* the parties and the beats of the open moment share the module's grid, so a
       beat lands under its party and the drops line up with the line below */
/* each party spans three shared rows, name, line and picture, so the
       pictures sit level however the names wrap */
/* Jeff's numbered badge from the steps, in the order a moment reaches each
       party; the line itself isn't a stop, so it isn't counted */
/* reached: the badge fills like the open moment's tab */
/* the home: its screens on the left, the devices that notice on the right */
/* the sensor that fires goes lime, the one that answers stays bright */
/* the beats: plain text under each party, stretched so every drop starts level */
/* the tap down to the line, and where it plugs in */
/* the home column is wide for its devices; its beat keeps a reading width */
/* Hearo is the line itself: a rail under every party, what it does on the
       left and its own beat on the right */
/* while a moment plays, what it hasn't reached yet waits in the shade; the
       line itself is always there */
/* the devices a moment doesn't touch step back */
/* the pulse, drawn over everything by main.js */
/* under 67.5rem the line turns vertical: the parties stack down its right
       side in the order a moment reaches them, Hearo second, and every beat sits
       right under its party */
@media (max-width: 67.499rem) {

        /* the line itself, down the left */

        /* on the vertical line the badge is the stop itself */

        /* out from over the rail and onto the green, so the band's type again */
    }
@media (max-width: 47.999rem) {

        /* titles wrap here, and a full pill round on two lines reads as a blob */
    }
@keyframes ping {
    40% {
        scale: 1.06;
    }
}
/* the toggle sits on the list's right edge, between the lede and step one */
/* the badge straddles the top edge and the chevron hangs off the bottom.
       Both belong to the item, not the card, so the card can tween its height
       with overflow clipped and neither gets cut */
/* the chevron pointing on to the next step, carrying the plus; the
           item's padding is its hit area, and a click there toggles the step */
/* a cutout can stand on the card's bottom edge instead of sitting above it */
/* the devices share one cell; without js only the first is unhidden */
/* select arrow */
/* the sizer's small and large device glyphs either side of the track */
/* the bar is the design's 92px; the thumb travels 76 inside it so it clears
       the glyphs at both ends. track is thumb-height so nothing needs offsetting */
/* the card is the Figma component at 410: name, square tile with the scenario
       strip across its top, copy, link. everything scales from the card's width */
/* the strip shares the tile's grid row, so it sits across its top
           however many lines the name takes */
/* filtering and resizing run through a view transition: cards glide to their
   new slot, leavers fade and shrink, arrivals fade in. calm motion cuts. */
@keyframes device_card_leave {
    to { opacity: 0; transform: scale(0.92); }
}
@keyframes device_card_arrive {
    from { opacity: 0; transform: scale(0.92); }
}
/* copy fills the second column from the row the photo starts on; rows are
       explicit so nothing drifts up beside the nav */
/* the maker's own product page, for anything that isn't ours */
/* the pager is a range: dragging it scrolls the list, scrolling the list moves it */
/* while a pointer drags the list or the range, snapping would fight the hand */
/* plain rows like the device list below; the picked one is simply the one at full strength */
/* every depth's picture sits in the same spot; only the selected one shows */
/* every device sits centered in the same box, so they share one axis whatever their shape */
/* Hearo Labs has its own palette and type; one module, the page in document order */
/* hero: logo over a faint grid, pixel blocks stepping down into the next band */
/* the logo sits over the board until a few moves in, then steps aside;
           main.js lets clicks through wherever the logo has no ink */
/* main.js lays a live board exactly over the drawn one */
/* margin 0: the flow rule spaces anything after a paragraph, positioned or not */
/* before the game, a click sends a ring of lime out from that square. The
               ring is one layer that only scales and fades, seen through a stencil
               of the squares, so it costs no repaint */
/* drawn small and scaled up on the GPU: a soft ring loses nothing
               to the stretch, and a board-wide one would be a huge layer to paint */
/* the highlight lands the instant the pointer does; only leaving fades */
/* the original's colors, for the throwback */
/* a pennant on a pole */
/* the throwback readout: mines left, the face that restarts, seconds */
/* four teal columns hang off the bottom edge into the band below */
/* the big statement on halftone waves */
/* the lime and orange tabs that hang off the bottom right */
/* the boards */
/* silicon stallion */
/* the stallion rears while it whinnies */
/* corner brackets */
/* the devices that carry Labs boards */
/* inside every hub: the hub over the brace, what it runs on in a row beneath */
/* the two hubs share a row, so the brace reads as holding both */
/* a shared image row keeps both captions on one line */
/* the flat hub is wide and low; the kit is a cube */
/* the brace between the hubs and the row */
/* logos stay in their own colors: member and partner marks can't be recolored */
/* the member badge carries small type of its own, so it gets the full row height */
/* made in the lab: every device at a glance, and the one you pick opens across its row */
/* the tile and its panel are both items of the grid, so a panel can take a whole row */
/* the hero's rounded grid squares, scaled up */
/* the open tile keeps its light square so dark devices stay visible; the ring
               matches the panel's teal and the notch joins the two */
/* the last square is the invitation */
/* the open panel: --row and --col come from main.js, which knows where the row ends */
/* the notch points back up at the tile that opened it */
/* the partner's credit: their mark in white beside the label, whatever colors it came in */
/* get in touch: cubes on waves, the diagonal cut at the bottom */
/* the halftone waves: main.js draws them live and marks the section, the
       designer's still stays for calm motion and browsers without WebGL */
@media (max-width: 89.999rem) {
        /* below 1440 the statement runs wide enough to reach the tabs, so it clears them */
    }
/* keyframes cannot nest inside a style rule, so they live out here */
@keyframes labs-boom {
    20% { translate: calc(-50% - 10px) 4px; }
    40% { translate: calc(-50% + 8px) -3px; }
    60% { translate: calc(-50% - 5px) 2px; }
    80% { translate: calc(-50% + 3px) 0; }
}
@keyframes labs-ring {
    from {
        transform: scale(0.08);
        opacity: 1;
    }

    to {
        transform: scale(var(--scale));
        opacity: 0;
    }
}
@keyframes labs-won {
    40% {
        background-color: var(--lime);
        scale: 1.08;
    }
}
@keyframes labs-drop {
    from {
        opacity: 0;
        translate: 0 -10px;
    }
}
@keyframes labs-rear {
    20% { rotate: -7deg; translate: 0 -10px; }
    40% { rotate: 4deg; translate: 0 -4px; }
    60% { rotate: -3deg; translate: 0 -2px; }
    80% { rotate: 1deg; translate: 0 0; }
}
/* the row stretches every card to its tallest, and the plate takes up the
       difference, so a title on two lines doesn't leave its neighbours short */
/* the burst of shots, stacked; only the shown one is opaque */
/* the +/– disc; the plus is two bars drawn on it rather than a glyph, so it
           sits dead centre and turns true. The upright bar is what leaves. */
/* no bio yet: the name sits where everyone's does, without the plus */
/* open: the plate goes teal and the bio screens the portrait */
/* as tall as the portrait, so it ends where the plate starts however tall the plate is */
/* the longest bios scroll inside the screen; the links stay put */
@media (max-width: 47.999rem) {

        /* the bio still screens the portrait, but the card grows to fit the
           longest one instead of scrolling inside; a page that is already one
           column shouldn't scroll twice. main.js measures the open bio into
           --bio and the portrait stretches to hold it. */
    }
/* each tile develops on its own random delay, seeded from main.js */
/* a reserve photo lands on top of the old one and develops the way the wall did */
/* the label rides up on hover; the lightbox shows the same text */
/* the lightbox holds both and shows the one this photo needs */
/* the X in the corner */
@media (max-width: 47.999rem) {

            /* arrows sit over the picture on a phone */
    }
/* calm: the wall is simply there. Two branches, same values, keep in sync. */
/* four options, one card each, the whole card is the button */
/* the action, pinned to the bottom so all four line up */
/* every dialog is Jeff's green panel: copy on the green, the action on a
       white card inset in it */
/* opening: panel and backdrop arrive together, the panel rising into place */
/* the close button, a round X in the corner */
/* the green side */
/* photos settle at the bottom of the panel */
/* the white side, inset in the green like a card on the panel. It's
           "whatever follows the copy", so a password manager's injected node
           can't knock it out the way :last-child did */
/* a choice as chips, the same language as the booking times: who's reaching
           out, asked as a question so the answer reads as "me" */
/* the one primary action per dialog */
/* talk: the number is the whole point, so it leads */
/* schedule: our own picker over Calendly's open times. Days, then times, then
       the details, which only appear once there's a time to book */
/* the days scroll sideways, a card each, with an arrow pinned to either end.
           A fieldset won't shrink below its content unless told */
/* the times sit in an even grid */
/* nothing to fill in until there's a time to book */
/* waiting on Calendly: ghost days where the real ones will land */
/* booked: the confirmation is all that's left */
/* the received state is one small centred card on the green */
/* the badge already heads this one */
@media (max-width: 67.499rem) {

        /* stacked: the green side becomes a header, its photos under the copy */

    }
@media (max-width: 47.999rem) {

        /* a list: icon on the left, words on the right */

        /* a phone gets the whole screen */

        /* three choices don't fit across a phone without wrapping inside the pills */
    }
/* calm motion: the panels fade in place instead of rising */
@keyframes booking_wait {
    to {
        opacity: 0.45;
    }
}
/* the colour photo is the same frame as the cutout, so the person holds still while the room comes in */
/* hover: the headline and a read-on pill, straight on the photo */
/* the cutout steps out as the photo comes in, so the middle of the fade
           isn't the two stacked into something muddy */
/* the photo sits alongside the story so a short one still fills the spread */
/* the scrawl: a real quote when there is one, otherwise the summary */
/* same frame as the cutout; the room and colour come in on hover while
           the cutout steps out */
/* one column: the photo and its scrawl come between the headline and the story */
/* the pull-quote panels */
/* every sketch is cut at the card's bottom edge and pinned there; only
       where it sits and how wide it is change from page to page */
/* the copy can sit on the left with the sketch on the right */
@media (max-width: 89.999rem) {

        /* once the card has no fixed height the button follows the quote */
    }
/* stacked: heading and quote read first, the sketch closes the card */
/* opening: the title and a card per app, beside the apps on their devices.
       It tucks up behind the header's curve, as the illustration headers do */
/* every card as tall as the tallest, so a name on two lines doesn't leave the other short */
/* the first device sits back, every one after stands in front of it, lower and to the right */
/* each app: its pitch, then a tour of its screens beside a phone that stays put */
/* the store badges */
/* the stops: the one being read is at full strength, its rule lit */
/* each stop's own screen is for narrower layouts; here the phone shows it */
/* the phone holds still through the tour, centred in the window below the
           header, and never taller than that space (the screens are 720 × 1539) */
/* what it takes to get started */
/* closing: the two icons with a message running between them */
/* the message itself, there and back */
/* one column: the devices under the title, and each stop carries its own screen */
/* keyframes cannot nest inside a style rule, so they live out here */
@keyframes apps-rise {
    from {
        opacity: 0;
        translate: 0 var(--rise);
    }
}
/* across the wire between two 96px icons in a 440px row, and back */
@keyframes apps-message {
    0%, 8% { translate: 0 0; }
    46%, 54% { translate: calc(440px - 2 * 96px - 16px) 0; }
    92%, 100% { translate: 0 0; }
}
@keyframes apps-message-small {
    0%, 8% { translate: 0 0; }
    46%, 54% { translate: calc(320px - 2 * 72px - 16px) 0; }
    92%, 100% { translate: 0 0; }
}
/* tucks up behind the header's curve, as the illustration headers do */
/* the message, out and back */
/* exactly as wide as its icon, so the wire meets every icon at its edge; a
           longer name hangs centred beneath it, wrapping rather than pushing it in */
/* the right icon takes the message halfway through the trip, the left one as it ends */
/* the apps side by side, each in its own world: home on the light green,
       the support team on the deep green of the apps' own dark mode */
/* the store badges */
/* the devices stand at the foot of the half, cut off by its edge. A phone
           alone shows a little over half of itself; a tablet shows most of itself,
           with a phone standing in front of its right side (the cut-outs are
           720 × 1539 and 1600 × 1207) */
/* the devices rise into place as their half scrolls in, where the browser can tie it to the scroll */
/* keyframes cannot nest inside a style rule, so they live out here. The trip moves
   the dot's offset in the row rather than translating it, so 100% is the wire's
   length and it fits at every size */
@keyframes apps-splash-trip {
    0%, 8% { left: calc(var(--icon) + var(--gap)); }
    46%, 54% { left: calc(100% - var(--icon) - var(--gap) - var(--dot)); }
    92%, 100% { left: calc(var(--icon) + var(--gap)); }
}
@keyframes apps-splash-land {
    0%, 44% { scale: 1; }
    50% { scale: 1.08; }
    60%, 100% { scale: 1; }
}
@keyframes apps-splash-rise {
    from {
        translate: 0 120px;
        opacity: 0;
    }
}
/* an editor's own text and pictures, read like a post's body */
/* the picture first, the panel on the right */
/* no portrait and no picture: the quote alone, on the apps' deep green */
/* one column: the panel, then the picture under it */
/* the contact sits at the foot, so the two cards' contacts line up */
/* stacked, the plus sits between the cards instead */
/* The Remote Supports calculator from calc.hearo.net (calculator/App.jsx), Missouri only.
   Its stylesheet came over as it was, every rule scoped to the module so neither side leaks
   into the other. The stage is the 1463 x 1225 Figma frame less its own title, scaled to fit
   by the app; at 900px and under the app swaps to its phone layout. */
/* below the site's sticky header: switching Inputs and Results scrolls the calculator's top here */
/* the site's own form styles pad every input and weight every label; the calculator draws its own */
/* The capacity bracket sits left of the wall, so its caps open inward to the right. */
@media (max-width: 900px) {
  /* clip rather than hide: hidden makes .app a scroll container, and the Inputs/Results switch stops sticking */
}
/* back-to-back groups on the FAQs page share one mint band */
/* the FAQ band butts straight against it */
/* the one action in the panel, in the site's play-pill dress */
/* the radios are whole tiles: the input covers its label, invisible, so
       the tile is the target and the radio group keeps arrow-key behaviour */
/* each tile previews what it does with a sample */
/* the reading aids are on/off, so they read as switches in a list */
/* the glyphs are drawn rather than fetched: five shapes, one color */
/* the passage being read, and the word within it when the voice reports one.
   Dark type on the yellow whatever the section's own colors. */
/* a column rather than the list card's grid: the clamped lines below
       would otherwise let the photo squeeze their rows */
/* the black wordmark, as on the stories card */
/* the maker, when there is one */@charset "utf-8";
*,
*::before,
*::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
html {
    scroll-behavior: smooth;
    scroll-padding-block-start: 3rem;
    scroll-padding-block-start: var(--space-xl, 3rem);
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
}
body {
    min-height: 100svb;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* every inner scroll region gets a hairline bar in its own text colour; the
   page keeps the OS bar. The WebKit block is the Safari fallback; Chrome
   ignores it once scrollbar-color is set. */
:where(body *) {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, currentColor 35%, transparent) transparent;
}
:where(body *)::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
:where(body *)::-webkit-scrollbar-track {
        background: transparent;
    }
:where(body *)::-webkit-scrollbar-thumb {
        border-radius: 62.5rem;
        border-radius: var(--radius-full, 999px);
        background: color-mix(in srgb, currentColor 35%, transparent);
    }
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}
button {
    cursor: pointer;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    word-wrap: break-word;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}
p,
li {
    text-wrap: pretty;
}
ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding-left: 0;
}
:focus-visible {
    outline: 2px solid currentColor;
    outline: 2px solid var(--color-accent, currentColor);
    outline-offset: 2px;
}
/* This blanket kill is !important in the *first* cascade layer, and important
   declarations reverse layer order, so nothing downstream can override it: a
   component can't offer a gentler alternative, only no motion at all. Anything
   marked .motion_managed is therefore skipped here and takes on the job of
   answering prefers-reduced-motion itself — see .nav_panel in
   modules/site_header.css, which swaps its circle reveal for a cross-fade.
   Opting out means opting in to handling it; it is not a licence to animate.

   The visitor's own choice comes first: [data-motion] on <html> either
   overrides an OS reduce request ("full") or asks for calm motion without one
   ("reduced"); no attribute at all means follow the system. The accessibility
   panel sets it, and the <head> applies it before first paint.

   The two branches below carry the same declarations under different
   conditions, because a media query can't join a selector list. Keep in sync. */
@media (prefers-reduced-motion: reduce) {
    html:not([data-motion="full"]) {
        scroll-behavior: auto;
    }

        html:not([data-motion="full"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) *:not(.motion_managed):not(.motion_managed *),html:not([data-motion="full"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) *:not(.motion_managed):not(.motion_managed *)::before,html:not([data-motion="full"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) *:not(.motion_managed):not(.motion_managed *)::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
}
html[data-motion="reduced"] {
    scroll-behavior: auto;
}
html[data-motion="reduced"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) *:not(.motion_managed):not(.motion_managed *),html[data-motion="reduced"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) *:not(.motion_managed):not(.motion_managed *)::before,html[data-motion="reduced"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) *:not(.motion_managed):not(.motion_managed *)::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
:root:not(#\#) {
    --green-400: #ECF6EF;
    --green-500: #3EB885; /* Core Hearo Green */
    --green-600: #339D71;


    --color-brand: var(--green-500);
    --color-brand-hover: var(--green-600);
    /* green words, and words on a green fill. They're the design's own colors
       here; the high contrast preference swaps in passing shades */
    --color-brand-ink: var(--color-brand);
    --color-on-brand: #FFFFFF;

    --color-bg: #FFFFFF;
    --color-text: #000000;

    --nav-panel-bg: #576D6B;
    --nav-panel-fg: #FFFFFF;
    --nav-panel-rule: rgba(255, 255, 255, 0.35);

    /* light only until there's a dark palette, otherwise phones paint the canvas black */
    --csstools-color-scheme--light: initial;
    color-scheme: light;
}
:root:not(#\#) {
    --font-sans:
        "GarantPro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji";
    --font-serif:
        ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-labs: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-scrawl: "Reenie Beanie", "Bradley Hand", cursive;
    --font-hand: "Nothing You Could Do", "Bradley Hand", cursive;
    --font-mono:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --text-xl: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);
    --text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
    --text-3xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.6;
    --leading-loose: 1.8;

    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold: 700;

    --tracking-tight: -0.02em;
    --tracking-normal: 0em;
    --tracking-wide: 0.05em;
}

@supports (width: 1vi) {
:root:not(#\#) {

    --text-xs: clamp(0.75rem, 0.72rem + 0.15vi, 0.8125rem);
    --text-sm: clamp(0.875rem, 0.84rem + 0.18vi, 0.9375rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vi, 1.125rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.4vi, 1.375rem);
    --text-xl: clamp(1.375rem, 1.2rem + 0.85vi, 1.875rem);
    --text-2xl: clamp(1.75rem, 1.4rem + 1.6vi, 2.75rem);
    --text-3xl: clamp(2.25rem, 1.6rem + 3vi, 4rem);
}
}
:root:not(#\#) {
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 7rem;
}
:root:not(#\#) {
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 62.5rem;

    --border-thin: 1px;
    --border-thick: 2px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.07), 0 12px 32px rgba(0, 0, 0, 0.1);

    /* nav reveal circle, centred on the top-right corner of the viewport.
       Fixed rather than viewport-relative: the circle's centre is the corner,
       so the design's 990px nav height *is* the radius. The circle should hug
       the nav, not the viewport, and the nav's type grows with the text size
       setting, so the radius is in rem: 990px at 100%. */
    --reveal-radius: 61.875rem;
}
:root:not(#\#) {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    /* overshoots, for things that should land with a bit of weight */
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast: 120ms;
    --duration-base: 220ms;
    --duration-slow: 400ms;

    /* the nav reveal: opening is the show, closing gets out of the way */
    --duration-reveal: 700ms;
    --duration-conceal: 420ms;

    --stagger-delay: 160ms;
    --stagger-step: 40ms;

    /* what the nav reveal looks like before it opens. These are tokens rather
       than plain values so the calm variant below is the only place that knows
       about reduced motion — the panel itself needs no media query. */
    --reveal-collapsed-clip: circle(0 at 100% 0);
    --reveal-collapsed-opacity: 1;
    --nav-row-rise: 14px;
    --nav-badge-pop: 0.5;
    /* hover growth in the open nav, badge and demo button */
    --nav-badge-grow: 1.1;
    --nav-btn-grow: 1.05;
}
/* Motion preference. [data-motion] on <html> is the switch: "full" overrides an
   OS reduce request, "reduced" asks for calm motion without one, and no
   attribute at all follows the system. The accessibility panel sets it and the
   <head> applies the stored choice before first paint.

   Calm means the geometry stops moving — a 990px circle sweeping the viewport
   is exactly the large-area motion the preference asks us to drop — so the
   circle sits at full radius and the panel cross-fades in place instead. Rows
   fade without rising, badges land without the overshoot, and nothing waits its
   turn. An opacity change carries no direction, so it stays comfortable while
   still not being a hard cut.

   The two branches carry the same values under different conditions, because a
   media query can't join a selector list. Keep them in sync. */
@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]):not(#\#) {
        --reveal-collapsed-clip: circle(var(--reveal-radius) at 100% 0);
        --reveal-collapsed-opacity: 0;
        --nav-row-rise: 0px;
        --nav-badge-pop: 1;
        --nav-badge-grow: 1;
        --nav-btn-grow: 1;
        --stagger-delay: 0s;
        --stagger-step: 0s;
    }
}
:root[data-motion="reduced"]:not(#\#) {
    --reveal-collapsed-clip: circle(var(--reveal-radius) at 100% 0);
    --reveal-collapsed-opacity: 0;
    --nav-row-rise: 0px;
    --nav-badge-pop: 1;
    --nav-badge-grow: 1;
    --nav-btn-grow: 1;
    --stagger-delay: 0s;
    --stagger-step: 0s;
}
:root:not(#\#) {
    --container-max: 75rem;
    --container-wide: 100rem;
    --container-prose: 65ch;
    --container-gutter: var(--space-md);

    --header-height: 110px;
    --header-gutter: 35px;
    /* the brand rule along the top of the bar; .nav_toggle sits outside
       <header> and has to offset itself by the same amount */
    --header-rule: 5px;
    /* the bar's curved underside and the drop beneath it; a module that tucks
       up behind the curve pulls itself up by both */
    --header-curve: max(16px, min(2.5vw, 40px));
    --header-drop: 30px;

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
}
/* Media queries can't read custom properties, so this is the reference.
   Desktop first: every module's base rules are the 1920 design and it
   steps itself down at the bottom of its own file.

     1440px   90rem
     1080px   67.5rem
      768px   48rem
      480px   30rem
*/
/* the accessibility panel's "bolder" typeface: the same Garant Pro, with each
   weight a module asks for drawn one face heavier, so thin display type stays
   readable without touching any module's numbers. Only downloaded when picked. */
/* the easy-read typeface in the accessibility panel. Designed by the Braille
   Institute for low vision; only downloaded once someone picks it. */
body:not(#\#):not(#\#):not(#\#) {
    font-family: "GarantPro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji";
    font-family: var(--font-sans);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    font-size: clamp(1rem, 0.95rem + 0.25vi, 1.125rem);
    font-size: var(--text-base);
    line-height: 1.6;
    line-height: var(--leading-normal);
    font-weight: 400;
    font-weight: var(--weight-normal);
    color: #000000;
    color: var(--color-text);
    background-color: #FFFFFF;
    background-color: var(--color-bg);
}
h1:not(#\#):not(#\#):not(#\#),
h2:not(#\#):not(#\#):not(#\#),
h3:not(#\#):not(#\#):not(#\#),
h4:not(#\#):not(#\#):not(#\#),
h5:not(#\#):not(#\#):not(#\#),
h6:not(#\#):not(#\#):not(#\#) {
    font-weight: 700;
    font-weight: var(--weight-bold);
    line-height: 1.15;
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    letter-spacing: var(--tracking-tight);
}
h1:not(#\#):not(#\#):not(#\#) { font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem); font-size: clamp(2.25rem, 1.6rem + 3vi, 4rem); font-size: var(--text-3xl); }
h2:not(#\#):not(#\#):not(#\#) { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); font-size: clamp(1.75rem, 1.4rem + 1.6vi, 2.75rem); font-size: var(--text-2xl); }
h3:not(#\#):not(#\#):not(#\#) { font-size: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem); font-size: clamp(1.375rem, 1.2rem + 0.85vi, 1.875rem); font-size: var(--text-xl); }
h4:not(#\#):not(#\#):not(#\#) { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); font-size: clamp(1.125rem, 1.05rem + 0.4vi, 1.375rem); font-size: var(--text-lg); }
h5:not(#\#):not(#\#):not(#\#) { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); font-size: clamp(1rem, 0.95rem + 0.25vi, 1.125rem); font-size: var(--text-base); }
h6:not(#\#):not(#\#):not(#\#) {
    font-size: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
    font-size: clamp(0.875rem, 0.84rem + 0.18vi, 0.9375rem);
    font-size: var(--text-sm);
    letter-spacing: 0.05em;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
}
h1:not(#\#):not(#\#):not(#\#)
    + *, h2:not(#\#):not(#\#):not(#\#)
    + *, h3:not(#\#):not(#\#):not(#\#)
    + *, h4:not(#\#):not(#\#):not(#\#)
    + *, h5:not(#\#):not(#\#):not(#\#)
    + *, h6:not(#\#):not(#\#):not(#\#)
    + *, p:not(#\#):not(#\#):not(#\#)
    + *, ul:not(#\#):not(#\#):not(#\#)
    + *, ol:not(#\#):not(#\#):not(#\#)
    + *, dl:not(#\#):not(#\#):not(#\#)
    + *, blockquote:not(#\#):not(#\#):not(#\#)
    + *, pre:not(#\#):not(#\#):not(#\#)
    + *, table:not(#\#):not(#\#):not(#\#)
    + *, figure:not(#\#):not(#\#):not(#\#)
    + *, hr:not(#\#):not(#\#):not(#\#)
    + * {
    margin-top: 1.5rem;
    margin-top: var(--flow-space, var(--space-md));
}
h1:not(#\#):not(#\#):not(#\#) + *, h2:not(#\#):not(#\#):not(#\#) + *, h3:not(#\#):not(#\#):not(#\#) + *, h4:not(#\#):not(#\#):not(#\#) + *, h5:not(#\#):not(#\#):not(#\#) + *, h6:not(#\#):not(#\#):not(#\#) + * {
    --flow-space: var(--space-sm);
}
*:not(#\#):not(#\#):not(#\#) + h2, *:not(#\#):not(#\#):not(#\#) + h3, *:not(#\#):not(#\#):not(#\#) + h4 {
    --flow-space: var(--space-xl);
}
a:not(#\#):not(#\#):not(#\#) {
    color: var(--color-accent);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
    transition: color 120ms cubic-bezier(0.16, 1, 0.3, 1);
    transition: color var(--duration-fast) var(--ease-out);
}
a:hover:not(#\#):not(#\#):not(#\#) {
        color: var(--color-accent-hover);
        text-decoration-thickness: 0.12em;
    }
ul:not(#\#):not(#\#):not(#\#),
ol:not(#\#):not(#\#):not(#\#) {
    padding-left: 1.5rem;
    padding-left: var(--space-md);
}
li:not(#\#):not(#\#):not(#\#) + li {
    margin-top: 0.25rem;
    margin-top: var(--space-3xs);
}
strong:not(#\#):not(#\#):not(#\#),
b:not(#\#):not(#\#):not(#\#) {
    font-weight: 700;
    font-weight: var(--weight-bold);
}
small:not(#\#):not(#\#):not(#\#) {
    font-size: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
    font-size: clamp(0.875rem, 0.84rem + 0.18vi, 0.9375rem);
    font-size: var(--text-sm);
}
blockquote:not(#\#):not(#\#):not(#\#) {
    padding-left: 1.5rem;
    padding-left: var(--space-md);
    border-left: 2px solid var(--color-accent);
    border-left: var(--border-thick) solid var(--color-accent);
    color: var(--color-text-muted);
    font-style: italic;
}
code:not(#\#):not(#\#):not(#\#),
kbd:not(#\#):not(#\#):not(#\#),
samp:not(#\#):not(#\#):not(#\#),
pre:not(#\#):not(#\#):not(#\#) {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
    font-family: var(--font-mono);
    font-size: 0.9em;
}
code:not(#\#):not(#\#):not(#\#) {
    padding: 0.15em 0.4em;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border: var(--border-thin) solid var(--color-border);
    border-radius: 0.25rem;
    border-radius: var(--radius-sm);
}
pre:not(#\#):not(#\#):not(#\#) {
    padding: 1rem;
    padding: var(--space-sm);
    overflow-x: auto;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border: var(--border-thin) solid var(--color-border);
    border-radius: 0.5rem;
    border-radius: var(--radius-md);
}
pre:not(#\#):not(#\#):not(#\#) code {
        padding: 0;
        background: none;
        border: none;
    }
hr:not(#\#):not(#\#):not(#\#) {
    border: none;
    border-top: 1px solid var(--color-border);
    border-top: var(--border-thin) solid var(--color-border);
}
table:not(#\#):not(#\#):not(#\#) {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
th:not(#\#):not(#\#):not(#\#),
td:not(#\#):not(#\#):not(#\#) {
    padding: 0.5rem 0.75rem;
    padding: var(--space-2xs) var(--space-xs);
    border-bottom: 1px solid var(--color-border);
    border-bottom: var(--border-thin) solid var(--color-border);
}
th:not(#\#):not(#\#):not(#\#) {
    font-weight: 500;
    font-weight: var(--weight-medium);
    text-align: left;
}
input:not(#\#):not(#\#):not(#\#),
textarea:not(#\#):not(#\#):not(#\#),
select:not(#\#):not(#\#):not(#\#) {
    padding: 0.5rem 0.75rem;
    padding: var(--space-2xs) var(--space-xs);
    color: #000000;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border: var(--border-thin) solid var(--color-border);
    border-radius: 0.25rem;
    border-radius: var(--radius-sm);
    transition: border-color 120ms cubic-bezier(0.16, 1, 0.3, 1);
    transition: border-color var(--duration-fast) var(--ease-out);
}
input:focus-visible:not(#\#):not(#\#):not(#\#) {
        border-color: var(--color-accent);
    }
textarea:focus-visible:not(#\#):not(#\#):not(#\#) {
        border-color: var(--color-accent);
    }
select:focus-visible:not(#\#):not(#\#):not(#\#) {
        border-color: var(--color-accent);
    }
textarea:not(#\#):not(#\#):not(#\#) {
    resize: vertical;
}
label:not(#\#):not(#\#):not(#\#) {
    font-weight: 500;
    font-weight: var(--weight-medium);
}
/* What the accessibility panel changes. Each choice is a data attribute on
   <html>, set in the <head> before first paint and kept by main.js; motion
   lives in tokens/motion.css and the reset. The reading aids carry !important
   because important declarations reverse layer order, so from base they beat
   every module: a visitor's choice should win over the design, never lose to it. */
/* type ships as rem (postcss.config.js), so this scales every size, and the
   browser's own font size setting, while layout keeps its px geometry */
html[data-text="125"]:not(#\#):not(#\#):not(#\#) {
    font-size: 125%;
}
html[data-text="150"]:not(#\#):not(#\#):not(#\#) {
    font-size: 150%;
}
/* the standard palette already meets AA; this goes further. The green fills
   stay, their type goes black (8.4:1), green type deepens to 6.7:1 on white */
html[data-contrast="more"]:not(#\#):not(#\#):not(#\#) {
    --color-brand-ink: #1A6847;
    --color-on-brand: #000000;
    --nav-panel-bg: #3A4A48;
}
html[data-contrast="more"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :focus-visible {
        outline: 3px solid currentColor !important;
        outline-offset: 3px !important;
    }
html[data-type="bold"]:not(#\#):not(#\#):not(#\#) {
    --font-sans: "GarantPro Heavier", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* the handwriting and the condensed Labs face are the hardest reads on the
   site, so easy-read takes them over too */
html[data-type="legible"]:not(#\#):not(#\#):not(#\#) {
    --font-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-hand: var(--font-sans);
    --font-scrawl: var(--font-sans);
    --font-labs: var(--font-sans);
}
/* links that are pictures (the logo, the social icons) have nothing to underline */
html[data-links="underline"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a:not(:has(img, video)) {
    text-decoration-line: underline !important;
    text-decoration-thickness: max(1px, 0.08em) !important;
    text-underline-offset: 0.18em !important;
}
/* gentler than the WCAG 1.4.12 test values, which are the most a page must
   survive rather than what reads best */
html[data-spacing="wide"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p, html[data-spacing="wide"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li, html[data-spacing="wide"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dd, html[data-spacing="wide"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote, html[data-spacing="wide"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption, html[data-spacing="wide"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label, html[data-spacing="wide"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) td, html[data-spacing="wide"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) th {
    line-height: 1.8 !important;
    letter-spacing: 0.04em !important;
    word-spacing: 0.12em !important;
}
/* the reading guide: a clear band at --guide-y, which main.js moves with the
   pointer or focus. A dialog sits in the top layer, so it's never shaded. */
html[data-guide="on"]:not(#\#):not(#\#):not(#\#)::after {
    --band: 2.5rem;
    --shade: rgba(0, 0, 0, 0.5);
    --y: var(--guide-y, 50vh);

    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* over the header and its menu, under the read-aloud player */
    z-index: calc(500 - 1);
    z-index: calc(var(--z-toast) - 1);
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) calc(50vh - 2.5rem),
        transparent calc(50vh - 2.5rem),
        transparent calc(50vh + 2.5rem),
        rgba(0, 0, 0, 0.5) calc(50vh + 2.5rem)
    );
    background: linear-gradient(
        to bottom,
        var(--shade) calc(var(--y) - var(--band)),
        transparent calc(var(--y) - var(--band)),
        transparent calc(var(--y) + var(--band)),
        var(--shade) calc(var(--y) + var(--band))
    );
    pointer-events: none;
}
.container:not(#\#):not(#\#):not(#\#):not(#\#) {
    width: 100%;
    max-width: 75rem;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
    position: relative;
}
.container.wide:not(#\#):not(#\#):not(#\#):not(#\#) {
        max-width: 100rem;
        max-width: var(--container-wide);
    }
.container.prose:not(#\#):not(#\#):not(#\#):not(#\#) {
        max-width: 65ch;
        max-width: var(--container-prose);
    }
.container.flush:not(#\#):not(#\#):not(#\#):not(#\#) {
        padding-left: 0;
        padding-right: 0;
    }
.grid_auto:not(#\#):not(#\#):not(#\#):not(#\#) {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    grid-template-columns:
        repeat(auto-fit, minmax(min(var(--grid-min, 18rem), 100%), 1fr));
    grid-gap: 1.5rem;
    grid-gap: var(--grid-gap, var(--space-md));
    gap: 1.5rem;
    gap: var(--grid-gap, var(--space-md));
}
.button:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    gap: var(--space-2xs);

    padding: 0.5rem 1.5rem;

    padding: var(--space-2xs) var(--space-md);

    font-size: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);

    font-size: clamp(0.875rem, 0.84rem + 0.18vi, 0.9375rem);

    font-size: var(--text-sm);
    font-weight: 500;
    font-weight: var(--weight-medium);
    line-height: 1.15;
    line-height: var(--leading-tight);
    -webkit-text-decoration: none;
    text-decoration: none;
    white-space: nowrap;

    color: var(--color-accent-contrast);
    background-color: var(--color-accent);
    border: 1px solid transparent;
    border: var(--border-thin) solid transparent;
    border-radius: 0.5rem;
    border-radius: var(--radius-md);

    transition:
        background-color 120ms cubic-bezier(0.16, 1, 0.3, 1), border-color 120ms cubic-bezier(0.16, 1, 0.3, 1), color 120ms cubic-bezier(0.16, 1, 0.3, 1), transform 120ms cubic-bezier(0.16, 1, 0.3, 1);

    transition:
        background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.button:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        color: var(--color-accent-contrast);
        background-color: var(--color-accent-hover);
        -webkit-text-decoration: none;
        text-decoration: none;
    }
.button:active:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        transform: translateY(1px);
    }
.button[disabled]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.button[aria-disabled="true"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }
.button.outline:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        color: var(--color-accent);
        background-color: transparent;
        border-color: currentColor;
    }
.button.outline:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
            color: var(--color-accent-contrast);
            background-color: var(--color-accent);
        }
.button.ghost:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        color: #000000;
        color: var(--color-text);
        background-color: transparent;
    }
.button.ghost:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
            background-color: var(--color-surface-raised);
        }
.button.small:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        padding: 0.25rem 0.75rem;
        padding: var(--space-3xs) var(--space-xs);
        font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
        font-size: clamp(0.75rem, 0.72rem + 0.15vi, 0.8125rem);
        font-size: var(--text-xs);
    }
.button.large:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        padding: 0.75rem 2rem;
        padding: var(--space-xs) var(--space-lg);
        font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
        font-size: clamp(1rem, 0.95rem + 0.25vi, 1.125rem);
        font-size: var(--text-base);
    }
.button.block:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        display: flex;
        width: 100%;
    }
.card:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    padding: 1.5rem;
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border: var(--border-thin) solid var(--color-border);
    border-radius: 1rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-sm);

    transition:
        box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1), transform 220ms cubic-bezier(0.16, 1, 0.3, 1);

    transition:
        box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.card.interactive:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }
.card:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img:first-child {
        margin: calc(1.5rem * -1);
        margin: calc(var(--space-md) * -1);
        margin-bottom: 1.5rem;
        margin-bottom: var(--space-md);
        max-width: calc(100% + 1.5rem * 2);
        max-width: calc(100% + var(--space-md) * 2);
        border-top-left-radius: 1rem;
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: 1rem;
        border-top-right-radius: var(--radius-lg);
    }
/* positioning context for .nav_toggle, which has to live outside <header>
   so it can paint above the reveal circle. Sticky so the bar and the menu
   ride along with the scroll; the z-index sits here rather than on the bar
   because sticky opens its own stacking context, and the page headers that
   tuck up behind the curve come later in the DOM. */
.site_header_shell:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    position: sticky;
    top: 0;
    z-index: 200;
    z-index: var(--z-sticky);
}
.site_header:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    /* the reveal circle paints over the bar, as in the design: the mint green
       survives only to the left of the arc. Layer order inside the shell is
       header -> panel -> toggle. */
    position: relative;

    border-top: 5px solid #3EB885;

    border-top: var(--header-rule) solid var(--color-brand);
    background: #ECF6EF;
    background: var(--green-400);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 110px;
    height: var(--header-height);
    padding: 0 35px;
    padding: 0 var(--header-gutter);
}
.site_header:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .logo {
        transform: translateY(-15px);
        cursor: pointer;
    }
.site_header:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{

    border-bottom-left-radius: 50% max(16px, min(2.5vw, 40px));

    border-bottom-left-radius: 50% var(--header-curve);
    border-bottom-right-radius: 50% max(16px, min(2.5vw, 40px));
    border-bottom-right-radius: 50% var(--header-curve);

    margin-bottom: 30px;

    margin-bottom: var(--header-drop);
}
/* above the panel, so the × stays visible and clickable once the circle has
   covered the bar. Mirrors the bar's own box so it lands in the same spot. */
.nav_toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    position: absolute;
    top: 5px;
    top: var(--header-rule);
    right: 35px;
    right: var(--header-gutter);
    z-index: 400;
    z-index: var(--z-modal);

    display: flex;
    align-items: center;
    height: 110px;
    height: var(--header-height);
    transform: translateY(-15px);
}
.nav_toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 12px 8px;
        border: 0;
        background: none;
        color: #FFFFFF;
        color: var(--nav-panel-fg);
        cursor: pointer;
        transition: color 220ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: color var(--duration-base) var(--ease-out);
    }
.nav_toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button svg {
            /* the dots swell past the 46x11 box while pulsing */
            overflow: visible;
            pointer-events: none;
            transition: opacity 220ms linear;
            transition: opacity var(--duration-base) linear;
        }
.nav_toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button svg circle {
                transform-box: fill-box;
                transform-origin: center;
                /* shorter than the pulse: the cursor has already left */
                transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
                transition: transform 180ms var(--ease-out);
            }
/* the × lands on the dark circle, never on the mint bar */
.nav_toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button::after {
            content: "X";
            position: absolute;
            font-size: 2rem;
            font-weight: 700;
            line-height: 1;
            opacity: 0;
            transform-origin: center;
            transition: opacity 220ms linear, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: opacity var(--duration-base) linear, transform 180ms var(--ease-out);
        }
/* a pale green rather than the brand one, which is 2.45:1 on the panel */
.nav_toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button:hover {
            color: #7FD9AE;
        }
/* closed only, so it stops by itself the moment the nav opens */
.nav_toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button[aria-expanded="false"]:hover circle {
            animation: dot_pulse 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
            animation: dot_pulse 1.2s var(--ease-in-out) infinite;
        }
.nav_toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button[aria-expanded="false"]:hover circle:nth-child(2) {
                animation-delay: 150ms;
            }
.nav_toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button[aria-expanded="false"]:hover circle:nth-child(3) {
                animation-delay: 300ms;
            }
.nav_toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button[aria-expanded="true"] svg {
                opacity: 0;
            }
.nav_toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button[aria-expanded="true"]::after {
                opacity: 1;
            }
.nav_toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button[aria-expanded="true"]:hover::after {
                animation: x_pulse 900ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
                animation: x_pulse 900ms var(--ease-in-out) infinite;
            }
/* 11px dots 6px apart: 1.45 takes one to 16px, 1.55 is where neighbours touch */
/* the glyph is 32px tall inside a 44px button, so 1.3 leaves 2px */
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 300;
    z-index: var(--z-overlay);
    background: #576D6B;
    background: var(--nav-panel-bg);

    /* site_nav.css lays the nav out by the panel's width. The panel is the
       viewport, but a container query's rem follows the text size setting
       where a media query's doesn't, so larger text reflows the menu sooner */
    container: nav_panel / inline-size;

    /* the nav is fixed-height, so on a short viewport it has to scroll;
       the scrollbar itself is clipped away by the circle. No overscroll
       containment: once the panel is spent the wheel goes on to the page,
       which stays live behind the arc on anything wider than a phone */
    overflow-y: auto;

    /* collapsed: a zero-radius circle pinned to the top-right corner — except
       under reduced motion, where the token holds the full radius and the fade
       below carries the reveal instead. Every mode-dependent value here is a
       token from tokens/motion.css, which is the only place that knows about
       the visitor's motion preference. Closing runs on its own, shorter
       duration so it gets out of the way. */
    clip-path: circle(0 at 100% 0);
    clip-path: var(--reveal-collapsed-clip);
    opacity: 1;
    opacity: var(--reveal-collapsed-opacity);
    visibility: hidden;
    transition: clip-path 420ms cubic-bezier(0.65, 0, 0.35, 1), opacity 220ms linear, visibility 0s linear 420ms;
    transition: clip-path var(--duration-conceal) var(--ease-in-out), opacity var(--duration-base) linear, visibility 0s linear var(--duration-conceal);

    /* every row rises into place behind the arc */
}
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li,.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_actions {
        opacity: 0;
        translate: 0 14px;
        translate: 0 var(--nav-row-rise);
        transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1), translate 220ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: opacity var(--duration-base) var(--ease-out), translate var(--duration-base) var(--ease-out);
    }
/* the badges land a touch late, with a little overshoot */
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > ol > li > a::before {
        opacity: 0;
        scale: 0.5;
        scale: var(--nav-badge-pop);
        /* transform is the hover growth in site_nav.css; one list, or the
           shorthand there would wipe the entrance */
        transition: scale 400ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 120ms linear, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: scale var(--duration-slow) var(--ease-back), opacity var(--duration-fast) linear, transform var(--duration-base) var(--ease-out);
    }
/* one stagger slot per top-level item... */
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > * > li:nth-child(1) { --i: 1; }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > * > li:nth-child(2) { --i: 2; }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > * > li:nth-child(3) { --i: 3; }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > * > li:nth-child(4) { --i: 4; }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > * > li:nth-child(5) { --i: 5; }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > * > li:nth-child(6) { --i: 6; }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > * > li:nth-child(7) { --i: 7; }
/* ...one beat after Next Steps (7 + its column's 1) for the button, which
       otherwise has no index and would arrive first, on the bare base delay */
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_actions { --i: 9; }
/* ...and a fraction of a slot for its sublist, which inherits --i */
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav li li:nth-child(1) { --j: 0.35; }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav li li:nth-child(2) { --j: 0.70; }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav li li:nth-child(3) { --j: 1.05; }
/* the arc uncovers the right-hand column first, so the wave follows it
       in from the right rather than all three columns firing at once */
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > :nth-child(1) { --k: 2; }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > :nth-child(2) { --k: 1; }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > :nth-child(3) { --k: 0; }
/* keyed off <html data-nav="open">, which the menu button's script mirrors from
   its aria-expanded, rather than .nav_toggle:has([aria-expanded="true"]): :has()
   can't be compiled down, and older engines (webOS TVs) would never open the menu.
   :root keeps the specificity the :has() selector had. */
:root[data-nav="open"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_panel {
    clip-path: circle(61.875rem at 100% 0);
    clip-path: circle(var(--reveal-radius) at 100% 0);
    opacity: 1;
    visibility: visible;
    transition: clip-path 700ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms linear, visibility 0s;
    transition: clip-path var(--duration-reveal) var(--ease-out), opacity var(--duration-base) linear, visibility 0s;
}
[data-nav="open"]:root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_panel li {
        opacity: 1;
        translate: none;
        /* delayed on the way in only, so closing reads as one clean unit */
        transition-delay: var(--nav-stagger);
    }
[data-nav="open"]:root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_panel .nav_actions {
        opacity: 1;
        translate: none;
        /* delayed on the way in only, so closing reads as one clean unit */
        transition-delay: var(--nav-stagger);
    }
[data-nav="open"]:root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_panel .site_nav > ol > li > a::before {
        --badge-delay: calc(var(--nav-stagger) + var(--stagger-step));

        opacity: 1;
        scale: 1;
        /* per property: the hover growth (transform) must not wait its turn */
        transition-delay: var(--badge-delay), var(--badge-delay), 0s;
    }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li,
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_actions {
    --nav-stagger: calc(
        var(--stagger-delay) +
        (var(--i, 0) + var(--j, 0) + var(--k, 0)) * var(--stagger-step)
    );
}
/* the collapsed nav tucks into the circle's corner, so the circle stays;
   on a phone it grows to cover the screen, which a 990px circle nearly
   does anyway. On :root, not on the panel, because --reveal-collapsed-clip
   resolves this where it is declared. */
@media (max-width: 47.999rem) {
    :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        --reveal-radius: max(61.875rem, hypot(100vw, 100vh));
    }
}
/* only the phone locks the page: there the circle covers everything, while
   larger screens keep the page beside the arc and it can carry on scrolling */
@media (max-width: 47.999rem) {
    :root[data-nav="open"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) body {
        overflow: hidden;
    }
}
/* Hearo Labs: the same bar in the Labs' dark teal, with its wordmark and white dots */
.site_header_shell[data-masthead="labs"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_header {
        background: #004F59;
    }
.site_header_shell[data-masthead="labs"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_toggle button circle {
        fill: #FFFFFF;
    }
/* on :root because .nav_toggle sits outside <header> and reads the same tokens */
@media (max-width: 47.999rem) {
    :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        --header-height: 80px;
        --header-gutter: var(--container-gutter);
        --header-curve: 12px;
        --header-drop: 20px;
    }
        .site_header:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .logo {
            transform: translateY(-8px);
        }

            .site_header:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .logo img {
                width: 118px;
            }

    /* the wordmark is twice the logo's width, so it shrinks by the same ratio */
    [data-masthead="labs"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_header .logo img {
        width: 231px;
    }

    .nav_toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        transform: translateY(-8px);
    }

        .nav_toggle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button svg {
            width: 36px;
            height: auto;
        }
}
/* on the panel, not the nav: .nav_actions is a sibling and reads them too */
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    --nav-inset-inline: 100px;
    --nav-actions-gap: 59px;
}
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav {
    --nav-col-gap: 120px;
    --nav-inset-block: 84px;

    --nav-row-pitch: 62px;
    --nav-badge-size: 44px;
    --nav-badge-gap: 10px;
    --nav-row-lead: 9px;
    --nav-row-tail: 8px;
    --nav-row-pad: 8px;

    --nav-num-width: 178px;
    --nav-sub-indent: 56px;

    --nav-link-size: 1.3125rem;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-column-gap: 120px;
    grid-column-gap: var(--nav-col-gap);
    -moz-column-gap: 120px;
         column-gap: 120px;
    -moz-column-gap: var(--nav-col-gap);
         column-gap: var(--nav-col-gap);
    justify-content: end;
    align-items: start;

    padding-top: 84px;

    padding-top: var(--nav-inset-block);
    padding-right: var(--nav-inset-inline);
    color: #FFFFFF;
    color: var(--nav-panel-fg);
    font-size: 1.3125rem;
    font-size: var(--nav-link-size);
}
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav  > * {
        margin-top: 0;
        margin-bottom: 0;
    }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav ul,.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav ol,.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
/* the accessibility row opens a dialog, so it's a button dressed as a row */
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav a,.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav button {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: var(--nav-row-pitch);
        /* the inline pad keeps the words off the edge of the fill, which is
           the ruled box itself */
        padding: var(--nav-row-lead) var(--nav-row-pad) var(--nav-row-tail);
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
        border-bottom: 1px solid oklch(100% 0 0 / 0.35);
        border-bottom: var(--border-thin) solid var(--nav-panel-rule);
        border-left: 0;
        border-right: 0;
        border-top: 0;
        background: none;
        color: inherit;
        font: inherit;
        -webkit-text-decoration: none;
        text-decoration: none;
        white-space: nowrap;
        font-weight: 600;
        cursor: pointer;
        line-height: 1.15;
        line-height: var(--leading-tight);
        transition: background-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: background-color var(--duration-base) var(--ease-out);
    }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav a:hover,.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav button:hover,.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav a[aria-current="page"],.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav button[aria-current="page"] {
            background-color: #339D71;
            background-color: var(--color-brand-hover);
        }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav  > ul > li:first-child > a {
        border-top: 1px solid rgba(255, 255, 255, 0.35);
        border-top: 1px solid oklch(100% 0 0 / 0.35);
        border-top: var(--border-thin) solid var(--nav-panel-rule);
    }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav  > ol > li:first-child > a {
        border-top: 1px solid rgba(255, 255, 255, 0.35);
        border-top: 1px solid oklch(100% 0 0 / 0.35);
        border-top: var(--border-thin) solid var(--nav-panel-rule);
    }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav li ul a,.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav li ol a {
        padding-left: var(--nav-sub-indent);
    }
/* in flow under the nav, not pinned to the panel's bottom edge: the panel is
   viewport-high and the reveal circle is 990px, so anything anchored to the
   bottom sat outside the circle and was clipped away. The button's far corner
   now ends ~952px from the circle's center; one more numbered item would push
   it out again. */
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--nav-actions-gap);
    padding-right: var(--nav-inset-inline);
}
.nav_demo_btn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* 10px puts the 35px icon in the design's 54px button */
    padding: 10px 28px;
    background-color: #3EB885;
    background-color: var(--color-brand);
    color: #FFFFFF;
    color: var(--color-on-brand);
    font-size: 0.9375rem;
    font-weight: 500;
    -webkit-text-decoration: none;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 9999px;
    transition: background-color 220ms cubic-bezier(0.16, 1, 0.3, 1), scale 220ms cubic-bezier(0.16, 1, 0.3, 1), transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
    transition: background-color var(--duration-base) var(--ease-out), scale var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.nav_demo_btn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) svg {
        flex: none;
        width: 35px;
        height: 35px;
    }
.nav_demo_btn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) svg circle {
            transition: fill 220ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: fill var(--duration-base) var(--ease-out);
        }
.nav_demo_btn:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        background-color: #339D71;
        background-color: var(--color-brand-hover);
        color: #FFFFFF;
        color: var(--color-on-brand);
        -webkit-text-decoration: none;
        text-decoration: none;
        scale: 1.05;
        scale: var(--nav-btn-grow);

        /* the ring takes the panel color, so it reads as a hole punched through */
    }
.nav_demo_btn:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) svg circle {
            fill: #576D6B;
            fill: var(--nav-panel-bg);
        }
.nav_demo_btn:active:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        transform: translateY(1px);
    }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > ol {
    counter-reset: nav-section;
}
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > ol  > li {
        counter-increment: nav-section;
        padding-left: calc(var(--nav-badge-size) + var(--nav-badge-gap));
    }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > ol  > li > a {
        position: relative;
        min-width: var(--nav-num-width);
    }
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > ol > li > a::before {
            content: counter(nav-section, decimal-leading-zero);
            position: absolute;
            right: 100%;
            top: var(--nav-row-lead);
            margin-right: var(--nav-badge-gap);

            display: grid;
            align-items: center;
            justify-items: center;
            place-items: center;
            width: var(--nav-badge-size);
            height: var(--nav-badge-size);
            border-radius: 50%;
            background: #3EB885;
            background: var(--color-brand);
            color: #FFFFFF;
            color: var(--color-on-brand);
            font-size: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
            font-size: clamp(0.875rem, 0.84rem + 0.18vi, 0.9375rem);
            font-size: var(--text-sm);
        }
/* off the <li>, not the link: the sub-items are the link's siblings, and the
       badge should stay up while the cursor is anywhere in the group. transform,
       not scale: scale is the entrance pop in site_header.css. 10% because 5% on
       a 44px disc is 2px and does not register. */
.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > ol  > li:hover > a::before {
        transform: scale(1.1);
        transform: scale(var(--nav-badge-grow));
    }
/* the numbered sections take the left column and the two short lists share
   the right, so the whole menu fits a phone screen without scrolling. The
   block sits against the top-right corner, inside the reveal circle. A
   container query rather than a media query: its rem grows with the text
   size setting, so larger text moves to this layout on wider screens too
   (960px at 100%, 1440px at 150%) */
@container nav_panel (width < 60rem) {
    .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav {
        --nav-inset-block: 72px;
        --nav-row-pitch: 44px;
        --nav-badge-size: 28px;
        --nav-badge-gap: 8px;
        --nav-row-lead: 6px;
        --nav-row-tail: 6px;
        --nav-num-width: 0;
        --nav-link-size: 1rem;

        grid-auto-flow: row;
        grid-template-columns: minmax(0, 360px) auto;
        grid-template-rows: max-content 1fr;
        grid-template-areas:
            "sections top"
            "sections bottom";
        -moz-column-gap: 40px;
             column-gap: 40px;
        justify-content: end;
        padding-left: 35px;
        padding-right: 35px;
        padding-left: var(--header-gutter);
        padding-right: var(--header-gutter);
    }

        .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav  > ol {
            grid-area: sections;
        }

        .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav  > ul:first-child {
            grid-area: top;
        }

        /* runs straight on from the list above, so no second rule between them */
        .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav  > ul:last-child {
            grid-area: bottom;
            align-self: start;
        }

            .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > ul:last-child  > li:first-child > a {
                border-top: 0;
            }

        .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav  > ol > li > a::before {
            font-size: 0.6875rem;
        }

        .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav li ul a,.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav li ol a {
            padding-left: 12px;
            font-weight: 500;
        }

    .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_actions {
        margin-top: 0;
        padding-left: 35px;
        padding-right: 35px;
        padding-left: var(--header-gutter);
        padding-right: var(--header-gutter);
        padding-top: 1.5rem;
        padding-bottom: 2rem;
        padding-top: var(--space-md);
        padding-bottom: var(--space-lg);
    }
}
@supports not (container-type: inline-size) {
    @media (max-width: 59.999rem) {
    .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav {
        --nav-inset-block: 72px;
        --nav-row-pitch: 44px;
        --nav-badge-size: 28px;
        --nav-badge-gap: 8px;
        --nav-row-lead: 6px;
        --nav-row-tail: 6px;
        --nav-num-width: 0;
        --nav-link-size: 1rem;

        grid-auto-flow: row;
        grid-template-columns: minmax(0, 360px) auto;
        grid-template-rows: max-content 1fr;
        grid-template-areas:
            "sections top"
            "sections bottom";
        -moz-column-gap: 40px;
             column-gap: 40px;
        justify-content: end;
        padding-left: 35px;
        padding-right: 35px;
        padding-left: var(--header-gutter);
        padding-right: var(--header-gutter);
    }

        .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav  > ol {
            grid-area: sections;
        }

        .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav  > ul:first-child {
            grid-area: top;
        }

        /* runs straight on from the list above, so no second rule between them */
        .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav  > ul:last-child {
            grid-area: bottom;
            align-self: start;
        }

            .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > ul:last-child  > li:first-child > a {
                border-top: 0;
            }

        .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav  > ol > li > a::before {
            font-size: 0.6875rem;
        }

        .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav li ul a,.nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav li ol a {
            padding-left: 12px;
            font-weight: 500;
        }

    .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_actions {
        margin-top: 0;
        padding-left: 35px;
        padding-right: 35px;
        padding-left: var(--header-gutter);
        padding-right: var(--header-gutter);
        padding-top: 1.5rem;
        padding-bottom: 2rem;
        padding-top: var(--space-md);
        padding-bottom: var(--space-lg);
    }
    }
}
/* too narrow for two columns without cutting words off: the smallest phones
   at 100%, and any phone once the text is larger. One column, the short lists
   following the sections; the panel scrolls */
@container nav_panel (width < 23rem) {
    .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "sections"
            "top"
            "bottom";
    }

        .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav  > ul:first-child {
            margin-top: 1.5rem;
            margin-top: var(--space-md);
        }
}
@supports not (container-type: inline-size) {
    @media (max-width: 22.999rem) {
    .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "sections"
            "top"
            "bottom";
    }

        .nav_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav  > ul:first-child {
            margin-top: 1.5rem;
            margin-top: var(--space-md);
        }
    }
}
/* Hearo Labs wears its own colors in the menu too: night teal with lime for
   the numbers and for where you are. Dark type on the lime keeps it readable. */
.site_header_shell[data-masthead="labs"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_panel {
        --nav-panel-bg: #062C31;
        --nav-panel-rule: rgba(255, 255, 255, 0.18);
    }
.site_header_shell[data-masthead="labs"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav a:hover,.site_header_shell[data-masthead="labs"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav a[aria-current="page"],.site_header_shell[data-masthead="labs"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav button:hover,.site_header_shell[data-masthead="labs"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav button[aria-current="page"] {
        background-color: #CEF09D;
        color: #062C31;
    }
.site_header_shell[data-masthead="labs"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .site_nav > ol > li > a::before {
        background: transparent;
        box-shadow: inset 0 0 0 2px #CEF09D;
        color: #CEF09D;
    }
.site_header_shell[data-masthead="labs"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_demo_btn {
        background-color: #CEF09D;
        color: #062C31;
    }
.site_header_shell[data-masthead="labs"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_demo_btn svg circle {
            fill: #062C31;
        }
.site_header_shell[data-masthead="labs"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_demo_btn:hover {
            background-color: #FFFFFF;
            color: #062C31;
        }
.site_header_shell[data-masthead="labs"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav_toggle button:hover {
        color: #CEF09D;
    }
.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    margin: 0 auto;
    width: 100%;
    /* the stage is white on a white page, so past its design width it just
       gains margin instead of growing taller than the screen */
    max-width: 1920px;
}
.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) video {
        display: block;
        margin: 0 auto;
    }
/* an animated banner draws on a white 1920 x 848 stage that main.js scales
       to cover this frame, the same crop the videos got */
.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-scene] {
        position: relative;
        overflow: hidden;
        aspect-ratio: 1920 / 848;
        background: #fff;
    }
@supports not (aspect-ratio: 1 / 1) {
    .hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-scene] {
        --aspect-ratio: 1920 / 848;
    }
}
.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-scene]  > div {
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            transform-origin: 0 0;
            pointer-events: none;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
        }
.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .videos {
        display: grid;
        padding: 0;
        margin: 0;
        /* horizontal swipes are ours, vertical still scrolls the page */
        touch-action: pan-y;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
    }
.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .videos li {
            grid-area: 1 / 1;
            list-style: none;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 300ms ease, visibility 0s linear 300ms;
        }
.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .videos li.active {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transition: opacity 300ms ease, visibility 0s linear 0s;
            }
.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav {
        background: #DFF0E5;
        border-radius: 50px;

        display: flex;
        justify-content: center;
        padding: 0;
        align-items: center;
        height: 48px;
        max-width: 640px;
        margin: 0 auto;
    }
.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav li {
            list-style: none;
            display: flex;
            margin: 0 15px;
        }
.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav li button {
                position: relative;
                width: 11px;
                height: 11px;
                padding: 0;
                border: 0;
                background: #FFFFFF;
                cursor: pointer;
                border-radius: 50%;
                transition: background-color 300ms ease;

                /* enlarged hit area without changing the visual dot size */
            }
.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav li button::after {
                    content: "";
                    position: absolute;
                    top: -14px;
                    right: -14px;
                    bottom: -14px;
                    left: -14px;
                }
.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav li.active button {
                background: #3EB885;
                background: var(--color-brand);
            }
@media (prefers-reduced-motion: reduce) {
        .hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .videos li,.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .videos li.active,.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav li button {
            transition: none;
        }
    }
/* the subject and the handwriting sit in the middle 60% of the frame,
       so a centred crop keeps both as the box narrows */
@media (max-width: 67.499rem) {
        .hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) video {
            width: 100%;
            aspect-ratio: 16 / 10;
            -o-object-fit: cover;
               object-fit: cover;
        }
        @supports not (aspect-ratio: 1 / 1) {
        .hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) video {
            --aspect-ratio: 16 / 10;
        }
    }

        .hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-scene] {
            aspect-ratio: 16 / 10;
        }

        @supports not (aspect-ratio: 1 / 1) {
        .hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-scene] {
            --aspect-ratio: 16 / 10;
        }
    }
    }
@media (max-width: 47.999rem) {
        .hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) video,.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-scene] {
            aspect-ratio: 4 / 3;
        }
        @supports not (aspect-ratio: 1 / 1) {
        .hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) video,.hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-scene] {
            --aspect-ratio: 4 / 3;
        }
    }

        .hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav {
            width: calc(100% - 2 * 1.5rem);
            width: calc(100% - 2 * var(--container-gutter));
            height: 40px;
        }

            .hearo_banner:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .nav li {
                margin: 0 12px;
            }
    }
.intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    background: linear-gradient(180deg, rgba(223, 240, 229, 0.6) 0%, #FFFFFF 100%);
    border-radius: 50px 50px 0px 0px;
    position: relative;
    width: min(1370px, 100% - 2 * 1.5rem);
    width: min(1370px, 100% - 2 * var(--container-gutter));
    margin: 200px auto 0 auto;
    padding: 100px 0;
}
.intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):before {
        position: absolute;
        content: "";
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        width: 83px;
        height: 83px;
        background: url("/images/hi-circle.svg") no-repeat center;
        background-size: contain;
    }
.intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        font-style: normal;
        font-weight: 400;
        font-size: 1.25rem;
        line-height: 2.375rem;
        leading-trim: both;
        text-edge: cap;
        text-align: center;

        color: #000000;
    }
.intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
        font-style: normal;
        font-weight: 350;
        font-size: 4rem;
        line-height: 4.375rem;
        text-align: center;
        letter-spacing: 4px;

        color: #3EB885;

        /* 60 on 80 in the design; em keeps the ratio through the responsive sizes,
           and the tight line-height stops the smaller box from stretching its line */
    }
.intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 small {
            font-size: 0.75em;
            line-height: 1;
        }
.intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) img {
        width: 100%;
        max-width: 1708px;
    }
.intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
        width: min(960px, 100%);
        margin-top: 40px;
    }
.intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure  + p {
            margin-top: 48px;
        }
.intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) footer {
        margin-top: 160px;
        /* Bleed past the card: negative inline margin resolves the block to 1708px wide
           (or the viewport width when the viewport is narrower). */
        margin-left: calc((100% - min(1708px, 100vw)) / 2);
        margin-right: calc((100% - min(1708px, 100vw)) / 2);

        /* The artwork is visually right-heavy (monitor sits right of the PNG's midpoint); nudge left to compensate.
           Only when the viewport has slack, otherwise the cube gets pushed off the left edge. */
    }
@media (min-width: 1800px) {

    .intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) footer {
            transform: translateX(-3%);
    }
        }
@media (max-width: 89.999rem) {
.intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        padding: 80px 80px;
}

        .intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
            font-size: 3.5rem;
            line-height: 3.875rem;
            letter-spacing: 3px;
        }

        .intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) footer {
            margin-top: 120px;
        }
    }
@media (max-width: 67.499rem) {
.intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        margin-top: 160px;
        padding: 72px 40px;
}

        .intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
            font-size: 3rem;
            line-height: 3.375rem;
            letter-spacing: 2px;
        }

        .intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            font-size: 1.1875rem;
            line-height: 2.125rem;
        }

        .intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) footer {
            margin-top: 120px;
        }
    }
@media (max-width: 47.999rem) {
.intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        width: 100%;
        margin-top: 100px;
        padding: 64px 0;
        border-radius: 32px 32px 0 0;
}

        .intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
            font-size: 2.5rem;
            line-height: 2.875rem;
            letter-spacing: 2px;
            text-wrap: balance;
        }

        .intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            font-size: 1.125rem;
            line-height: 2rem;
        }

        .intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) footer {
            margin-top: 80px;
        }
    }
@media (max-width: 29.999rem) {
        .intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):before {
            top: -32px;
            width: 64px;
            height: 64px;
        }

        .intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
            font-size: 2rem;
            line-height: 2.375rem;
            letter-spacing: 1px;
        }

        .intro_statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            font-size: 1.0625rem;
            line-height: 1.875rem;
        }
    }
.video_embed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    width: min(1006px, 100% - 2 * 1.5rem);
    width: min(1006px, 100% - 2 * var(--container-gutter));
    aspect-ratio: 16 / 9;
    margin: 30px auto 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: #576D6B;
    background: var(--nav-panel-bg);
}
@supports not (aspect-ratio: 1 / 1) {
    .video_embed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        --aspect-ratio: 16 / 9;
    }
}
.video_embed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }
.illustration_header:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    /* the band stops growing before it fills the screen, so the page's title
       always shows beneath it on the first view; the explicit width keeps the
       cap from feeding back through the aspect ratio and narrowing the band */
    --cap: min(680px, 70svh);

    width: 100%;

    /* only ever seen before the first frame paints */
    background: #3BB983;
    margin-top: calc(-1 * (30px + max(16px, min(2.5vw, 40px))));
    margin-top: calc(-1 * (30px + max(16px, min(2.5vw, 40px))));
    margin-top: calc(-1 * (var(--header-drop) + var(--header-curve)));
}
.illustration_header:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) video {
        width: 100%;
        max-height: var(--cap);
        -o-object-fit: cover;
           object-fit: cover;
    }
/* a still illustration gets the same frame the videos have */
.illustration_header:has( > img):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        display: grid;
        align-items: center;
        justify-items: center;
        place-items: center;
        aspect-ratio: 1920 / 941;
        max-height: var(--cap);
        background: #3EB885;
        background: var(--color-brand);
    }
@supports not (aspect-ratio: 1 / 1) {
    .illustration_header:has( > img):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        --aspect-ratio: 1920 / 941;
    }
}
.illustration_header:has( > img):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img {
            width: min(calc(100% * var(--width) / 1920), var(--width) * 1px);
            max-height: 80%;
            -o-object-fit: contain;
               object-fit: contain;
        }
/* an animated scene draws on the brand green itself, so the frame is that
       colour and nothing seams. The stage is built at the design size and
       main.js scales it to cover the frame. */
.illustration_header[data-scene]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        position: relative;
        overflow: hidden;
        aspect-ratio: 1920 / 941;
        max-height: var(--cap);
        background: #3EB885;
        background: var(--color-brand);
    }
@supports not (aspect-ratio: 1 / 1) {
    .illustration_header[data-scene]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        --aspect-ratio: 1920 / 941;
    }
}
.illustration_header[data-scene]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > div {
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            transform-origin: 0 0;
            pointer-events: none;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
        }
@media (max-width: 47.999rem) {
        .illustration_header:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) video {
            aspect-ratio: 4 / 3;
        }
        @supports not (aspect-ratio: 1 / 1) {
        .illustration_header:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) video {
            --aspect-ratio: 4 / 3;
        }
    }

        .illustration_header[data-scene]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.illustration_header:has( > img):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
            aspect-ratio: 4 / 3;
        }

        @supports not (aspect-ratio: 1 / 1) {
        .illustration_header[data-scene]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.illustration_header:has( > img):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
            --aspect-ratio: 4 / 3;
        }
    }

        .illustration_header:has( > img):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > img {
            width: calc(100% * var(--width) / 1100);
        }
    }
.introduction:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 180px;

    width: min(1140px, 100% - 2 * 1.5rem);

    width: min(1140px, 100% - 2 * var(--container-gutter));
    margin: 180px auto 0 auto;
    margin: var(--gap) auto 0 auto;
    text-align: center;
}
.introduction:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p:first-child {
        width: -moz-max-content;
        width: max-content;
        margin: 0 auto;
        padding: 0 20px;
        background: #3EB885;
        background: var(--color-brand);
        color: #FFFFFF;
        color: var(--color-on-brand);
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.625rem;
        letter-spacing: 3px;
        text-transform: uppercase;
    }
.introduction:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
        margin: 20px 0 0;
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 3.625rem;
        font-weight: 300;
        line-height: 4.125rem;
        letter-spacing: 6px;
        text-wrap: balance;
    }
.introduction:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 + p {
        max-width: 960px;
        margin: 20px auto 0;
        color: #000000;
        font-size: 1.25rem;
        line-height: 2.25rem;
        text-wrap: pretty;
    }
@media (max-width: 89.999rem) {
.introduction:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
}

        .introduction:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
            font-size: 3.25rem;
            line-height: 3.75rem;
            letter-spacing: 4px;
        }
    }
@media (max-width: 67.499rem) {
.introduction:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 120px;
}

        .introduction:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
            font-size: 2.875rem;
            line-height: 3.375rem;
            letter-spacing: 3px;
        }

        .introduction:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 + p {
            font-size: 1.1875rem;
            line-height: 2.125rem;
        }
    }
@media (max-width: 47.999rem) {
.introduction:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
}

        .introduction:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
            font-size: 2.25rem;
            line-height: 2.625rem;
            letter-spacing: 2px;
            text-wrap: balance;
        }

        .introduction:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 + p {
            font-size: 1.125rem;
            line-height: 1.875rem;
        }
    }
@media (max-width: 29.999rem) {
        .introduction:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p:first-child {
            font-size: 0.875rem;
            line-height: 1.375rem;
            letter-spacing: 2px;
        }

        .introduction:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
            font-size: 1.875rem;
            line-height: 2.25rem;
            letter-spacing: 1px;
        }
    }
.feature_video:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --play: 35px;

    position: relative;
    width: min(1006px, 100% - 2 * 1.5rem);
    width: min(1006px, 100% - 2 * var(--container-gutter));
    aspect-ratio: 16 / 9;
    margin: 30px auto 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: #576D6B;
    background: var(--nav-panel-bg);
}
@supports not (aspect-ratio: 1 / 1) {
    .feature_video:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        --aspect-ratio: 16 / 9;
    }
}
.feature_video:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) img,.feature_video:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) video,.feature_video:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) iframe {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
.feature_video:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) img,.feature_video:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) video {
        -o-object-fit: cover;
           object-fit: cover;
    }
/* the loop fades up over the still once it has frames, so a slow
       connection just keeps the poster */
.feature_video:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) video {
        opacity: 0;
        transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: opacity var(--duration-slow) var(--ease-out);
    }
.feature_video[data-previewing]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) video {
        opacity: 1;
    }
.feature_video:has(template):not([data-playing]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        cursor: pointer;
    }
.feature_video:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button {
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        display: inline-flex;
        align-items: center;
        gap: 16px;
        padding: 0 27px 0 9px;
        height: 54px;
        border: 0;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        background: #3EB885;
        background: var(--color-brand);
        color: #FFFFFF;
        color: var(--color-on-brand);
        font-size: 0.875rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        white-space: nowrap;
    }
.feature_video:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button::before {
            content: "";
            width: var(--play);
            height: var(--play);
            background: url("/images/playhead.svg") no-repeat center / contain;
        }
.feature_video:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button:hover::before {
            background-image: url("/images/playhead-over.svg");
        }
.feature_video[data-playing]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button {
        display: none;
    }
@media (max-width: 47.999rem) {
        .feature_video:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button {
            height: 44px;
            padding-left: 20px;
            padding-right: 6px;
            font-size: 0.75rem;
        }

            .feature_video:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button::before {
                width: 30px;
                height: 30px;
            }
    }
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --rule: #C9D3CF;
    --gap: 200px;
    --play: 35px;

    display: grid;
    grid-template-columns: 1006px 1fr;
    grid-template-rows: auto auto 1fr;
    grid-column-gap: 40px;
    -moz-column-gap: 40px;
         column-gap: 40px;
    width: min(1558px, 100% - 2 * 1.5rem);
    width: min(1558px, 100% - 2 * var(--container-gutter));
    margin: 200px auto 0 auto;
    margin: var(--gap) auto 0 auto;
}
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > div {
        grid-row: 1 / -1;
        position: relative;
    }
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div video {
            width: 100%;
            border-radius: 16px;
            background: #576D6B;
            background: var(--nav-panel-bg);
        }
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div button {
            position: absolute;
            left: 50%;
            top: 50%;
            translate: -50% -50%;
            display: inline-flex;
            align-items: center;
            gap: 16px;
            padding: 0 27px 0 9px;
            height: 54px;
            border: 0;
            border-radius: 62.5rem;
            border-radius: var(--radius-full);
            background: #3EB885;
            background: var(--color-brand);
            color: #FFFFFF;
            color: var(--color-on-brand);
            font-size: 0.875rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            white-space: nowrap;
        }
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div button::before {
                content: "";
                width: var(--play);
                height: var(--play);
                background: url("/images/playhead.svg") no-repeat center / contain;
            }
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div button time {
                margin-left: 6px;
            }
.chapter_videos[data-playing]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div button {
        display: none;
    }
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        margin: 0;
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 2rem;
        font-weight: 400;
        line-height: 2.375rem;
        letter-spacing: 0;
    }
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 + p {
        margin: 5px 0 0;
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
        counter-reset: chapter;
        margin: 29px 0 0;
        padding: 0;
        list-style: none;
    }
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        counter-increment: chapter;
        position: relative;
        display: grid;
        grid-template-columns: var(--play) 1fr auto;
        align-items: center;
        grid-column-gap: 24px;
        -moz-column-gap: 24px;
             column-gap: 24px;
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px dotted var(--rule);
        font-size: 0.875rem;
    }
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li::before {
            content: "";
            width: var(--play);
            height: var(--play);
            background: url("/images/playhead-green.svg") no-repeat center / contain;
        }
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li button {
            justify-self: start;
            padding: 0;
            border: 0;
            background: none;
            color: #3EB885;
            color: var(--color-brand-ink);
            font-weight: 700;
            -webkit-text-decoration: underline;
            text-decoration: underline;
            text-underline-offset: 3px;
        }
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li button::before {
                content: counter(chapter) ". ";
            }
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li button::after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li[aria-current] button {
            -webkit-text-decoration: none;
            text-decoration: none;
        }
@media (max-width: 89.999rem) {
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        grid-template-columns: 3fr 2fr;
}
    }
@media (max-width: 67.499rem) {
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;

        grid-template-columns: 1fr;
        row-gap: 32px;
}

        .chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > div {
            grid-row: auto;
        }
    }
@media (max-width: 47.999rem) {
.chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
}

        .chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > div button {
            height: 44px;
            padding-left: 20px;
            padding-right: 6px;
            font-size: 0.75rem;
        }

            .chapter_videos:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div button::before {
                width: 30px;
                height: 30px;
            }
    }
.end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    --photo: 360px;
    --ring: 12px;
    --card: 440px;

    width: min(1720px, 100% - 2 * 1.5rem);

    width: min(1720px, 100% - 2 * var(--container-gutter));
    margin: 200px auto 0 auto;
    margin: var(--gap) auto 0 auto;
}
.end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding-top: 16px;
        border-top: var(--ring) solid #3EB885;
        border-top: var(--ring) solid var(--color-brand);
        font-size: 2.625rem;
        font-weight: 600;
        line-height: 3rem;
        letter-spacing: 0;
    }
.end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        display: grid;
        grid-template-columns: repeat(2, var(--card));
        justify-content: center;
        grid-gap: 56px 64px;
        gap: 56px 64px;
        margin: 64px 0 0;
        padding: 0;
        list-style: none;
    }
.end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        position: relative;
        margin: 0;

        /* the portrait, then its badge */
    }
.end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li  > img:first-child {
            width: var(--photo);
            height: var(--photo);
            margin: 14px 0 0 calc(var(--ring) + 14px);
            border-radius: 50%;
            -o-object-fit: cover;
               object-fit: cover;
            box-shadow: 0 0 0 var(--ring) #E8E8E8;
        }
.end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li  > img + img {
            position: absolute;
            top: 0;
            left: 10px;
            width: 100px;
            height: 100px;
        }
.end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
        margin: 28px 0 0;
        font-size: 1.875rem;
        font-weight: 600;
        line-height: 2.125rem;
        letter-spacing: 1px;
    }
.end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
        margin: 10px 0 0;
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
@media (max-width: 67.499rem) {
.end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
        --card: minmax(0, 1fr);
        --photo: 300px;
}

        .end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            gap: 48px 40px;
        }

        .end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
            font-size: 1.75rem;
            line-height: 2rem;
        }

        .end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            font-size: 1.0625rem;
            line-height: 1.6875rem;
        }
    }
@media (max-width: 47.999rem) {
.end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
        --photo: 260px;
        --ring: 10px;
}

        .end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 2rem;
            line-height: 2.375rem;
        }

        .end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            grid-template-columns: 1fr;
            margin-top: 48px;
        }

        /* the photo centres in the single column, the badge rides along */
        .end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li > img:first-child {
            margin-left: auto;
            margin-right: auto;
        }

        .end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li > img + img {
            left: calc(50% - var(--photo) / 2 - var(--ring) - 4px);
            width: 90px;
            height: 90px;
        }

        .end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
            font-size: 1.625rem;
            line-height: 1.875rem;
        }

        .end_users:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            font-size: 1.0625rem;
            line-height: 1.625rem;
        }
    }
.partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    --photo: 360px;
    --ring: 12px;
    --card: 450px;

    width: min(1720px, 100% - 2 * 1.5rem);

    width: min(1720px, 100% - 2 * var(--container-gutter));
    margin: 200px auto 0 auto;
    margin: var(--gap) auto 0 auto;
}
.partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding-top: 16px;
        border-top: var(--ring) solid #3EB885;
        border-top: var(--ring) solid var(--color-brand);
        font-size: 2.625rem;
        font-weight: 600;
        line-height: 3rem;
        letter-spacing: 0;
    }
.partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        display: grid;
        grid-template-columns: repeat(2, var(--card));
        justify-content: center;
        grid-gap: 56px 64px;
        gap: 56px 64px;
        margin: 64px 0 0;
        padding: 0;
        list-style: none;
    }
.partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        position: relative;
        margin: 0;

        /* an odd one out sits centred on its own row */
    }
.partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:last-child:nth-child(odd) {
            grid-column: 1 / -1;
            justify-self: center;
            width: var(--card);
        }
.partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li  > img:first-child {
            width: var(--photo);
            height: var(--photo);
            margin: 30px 0 0 calc(var(--ring) + 26px);
            border-radius: 52px;
            -o-object-fit: cover;
               object-fit: cover;
            box-shadow: 0 0 0 var(--ring) #E8E8E8;
        }
.partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li  > img + img {
            position: absolute;
            top: 0;
            left: 6px;
            width: 100px;
            height: 100px;
        }
.partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
        margin: 29px 0 0;
        font-size: 1.875rem;
        font-weight: 600;
        line-height: 2.125rem;
        letter-spacing: 1px;
    }
.partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
        margin: 10px 0 0;
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
@media (max-width: 67.499rem) {
.partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
        --card: minmax(0, 1fr);
        --photo: 300px;
}

        .partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            gap: 48px 40px;
        }

        .partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:last-child:nth-child(odd) {
            width: auto;
            justify-self: stretch;
        }

        .partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
            font-size: 1.75rem;
            line-height: 2rem;
        }

        .partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            font-size: 1.0625rem;
            line-height: 1.6875rem;
        }
    }
@media (max-width: 47.999rem) {
.partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
        --photo: 260px;
        --ring: 10px;
}

        .partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 2rem;
            line-height: 2.375rem;
        }

        .partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            grid-template-columns: 1fr;
            margin-top: 48px;
        }

        /* the photo centres in the single column, the badge rides along */
            .partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li  > img:first-child {
                margin-left: auto;
                margin-right: auto;
                border-radius: 40px;
            }

            .partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li  > img + img {
                left: calc(50% - var(--photo) / 2 - var(--ring) - 25px);
                width: 90px;
                height: 90px;
            }

        .partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
            font-size: 1.625rem;
            line-height: 1.875rem;
        }

        .partners:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            font-size: 1.0625rem;
            line-height: 1.625rem;
        }
    }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    --rule: #C9D3CF;
    --teal: rgba(97, 139, 145, 0.9);

    margin-top: 200px;

    margin-top: var(--gap);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
}
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2,.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 + p {
        width: min(1720px, 100%);
        margin-left: auto;
        margin-right: auto;
    }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin-left: max(0px, (100% - 1720px) / 2);
        padding-top: 16px;
        border-top: 14px solid #3EB885;
        border-top: 14px solid var(--color-brand);
        font-size: 2.625rem;
        font-weight: 600;
        line-height: 3rem;
        letter-spacing: 0;
    }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 + p {
        margin-top: 12px;
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.875rem;
    }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h3 {
        margin: 72px 0 0;
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 2.75rem;
        font-weight: 600;
        line-height: 3.25rem;
        letter-spacing: 0;
        text-align: center;
    }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h3 + p {
        max-width: 960px;
        margin: 8px auto 0;
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.875rem;
        text-align: center;
    }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > h3 + p a {
            color: inherit;
            -webkit-text-decoration: underline;
            text-decoration: underline;
            text-decoration-thickness: 2px;
            text-underline-offset: 4px;
            transition: text-decoration-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: text-decoration-color var(--duration-base) var(--ease-out);
        }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > h3 + p a:hover {
                text-decoration-color: rgba(62, 184, 133, 0.45);
            }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
        position: relative;
        margin: 24px auto 0;
        color: #FFFFFF;
    }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure img {
            max-width: 100%;
        }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure li {
            margin: 0;
        }
/* two ellipses, Hearo on the left, the partners on the right; the green
       one paints last so the overlap reads green */
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"] {
        width: min(1500px, 100%);
        aspect-ratio: 1777 / 582;
    }
@supports not (aspect-ratio: 1 / 1) {
    .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"] {
        --aspect-ratio: 1777 / 582;
    }
}
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: calc(100% * 1080 / 1777);
            border-radius: 50%;
        }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: calc(100% * 1080 / 1777);
            border-radius: 50%;
        }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]::before {
            right: 0;
            background: var(--teal);
        }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]::after {
            left: 0;
            background: rgba(62, 184, 133, 0.8);
        }

@supports (color: color-mix(in lch, red, blue)) {
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]::after {
            background: color-mix(in srgb, var(--color-brand) 80%, transparent);
        }
}
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]  > * {
            position: absolute;
            z-index: 1;
        }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]  > img:first-child {
            top: 31%;
            left: 21.4%;
            width: 14.35%;
        }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]  > img:nth-child(2) {
            top: 44%;
            left: 20.5%;
            width: 15.3%;
        }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]  > img:nth-child(3) {
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            width: 9.35%;
        }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]  > ul {
            top: 50%;
            left: 64.4%;
            translate: 0 -50%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 23.2%;
        }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"] > ul li {
                display: grid;
                align-items: center;
                justify-items: center;
                place-items: center;
                aspect-ratio: 206 / 130;
                padding: 10px 26px;
            }
@supports not (aspect-ratio: 1 / 1) {
    .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"] > ul li {
        --aspect-ratio: 206 / 130;
    }
}
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"] > ul img {
                max-height: 100%;
                filter: brightness(0) invert(1);
            }
/* a growing collection: past six partners, three across and smaller */
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"] > ul[data-many="3"] {
                left: 62%;
                grid-template-columns: repeat(3, 1fr);
                width: 28%;
            }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"] > ul[data-many="3"] li {
                    padding: 8px 12px;
                }
/* a lone logo on the last row sits in the middle */
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"] > ul[data-many="3"] li:last-child:nth-child(3n + 1) {
                    grid-column: 2;
                }
/* the hub logo alone in one ellipse; its partners are the list below */
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="hub"] {
        width: min(880px, 100%);

        /* the ellipse is a gradient rather than a radius, which would round
           the content box too and clip the logo's corners */
    }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="hub"]  > img {
            display: block;
            box-sizing: border-box;
            width: 100%;
            aspect-ratio: 1080 / 582;
            padding: 100px;
            background: radial-gradient(closest-side, #3EB885 99.5%, transparent 100%);
            background: radial-gradient(closest-side, var(--color-brand) 99.5%, transparent 100%);
            -o-object-fit: contain;
               object-fit: contain;
        }
@supports not (aspect-ratio: 1 / 1) {
    .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="hub"]  > img {
        --aspect-ratio: 1080 / 582;
    }
}
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
        width: min(972px, 100%);
        margin: 62px auto 0;
        padding: 0;
        list-style: none;
    }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol li {
            display: grid;
            grid-template-columns: 240px 1fr;
            align-items: center;
            min-height: 160px;
            margin: 0;
        }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol li + li {
                border-top: 1px dotted var(--rule);
            }
/* each logo is sized by eye in the design, so the width rides on the model */
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol img {
            width: calc(200 * 1px);
            width: calc(var(--width, 200) * 1px);
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            filter: brightness(0);
        }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol p {
            margin: 0;
            font-size: 1.125rem;
            font-weight: 300;
            line-height: 1.875rem;
        }
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol a {
            color: #3EB885;
            color: var(--color-brand-ink);
            font-weight: 700;
            -webkit-text-decoration: none;
            text-decoration: none;
        }
@media (max-width: 67.499rem) {
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
}

        .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
            font-size: 2.5rem;
            line-height: 2.875rem;
        }

        .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h3 {
            margin-top: 64px;
            font-size: 2.375rem;
            line-height: 2.875rem;
        }

        .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h3 + p,.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 + p {
            font-size: 1.1875rem;
            line-height: 1.8125rem;
        }
            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol li {
                grid-template-columns: 180px 1fr;
                min-height: 150px;
            }

            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol img {
                width: calc(200 * 0.8px);
                width: calc(var(--width, 200) * 0.8px);
            }

            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol p {
                font-size: 1.0625rem;
                line-height: 1.75rem;
            }
    }
/* the two ellipses stack on a phone, overlapping top to bottom */
@media (max-width: 47.999rem) {
.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
}

        .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
            font-size: 2rem;
            line-height: 2.375rem;
        }

        .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 + p,.partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h3 + p {
            font-size: 1.125rem;
            line-height: 1.6875rem;
        }

        .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h3 {
            margin-top: 48px;
            font-size: 2.125rem;
            line-height: 2.5625rem;
        }

        .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
            margin-top: 32px;
        }

        .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"] {
            aspect-ratio: 6 / 7;
        }

        @supports not (aspect-ratio: 1 / 1) {
        .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"] {
            --aspect-ratio: 6 / 7;
        }
    }

            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]::before {
                left: 0;
                right: 0;
                width: auto;
                height: 64%;
            }

            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]::after {
                left: 0;
                right: 0;
                width: auto;
                height: 64%;
            }

            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]::before {
                top: auto;
                bottom: 0;
            }

            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]::after {
                top: 0;
                bottom: auto;
            }

            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]  > img:first-child {
                top: 20%;
                left: 50%;
                translate: -50% -50%;
            }

            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]  > img:nth-child(2) {
                top: 20%;
                left: 50%;
                translate: -50% -50%;
            }

            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]  > img:first-child {
                width: 30%;
            }

            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]  > img:nth-child(2) {
                width: 42%;
            }

            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]  > img:nth-child(3) {
                width: 28%;
            }

            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"]  > ul {
                top: 77%;
                left: 50%;
                translate: -50% -50%;
                width: 55%;
            }

                .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"] > ul li {
                    padding: 6px 10px;
                }

                /* the lower ellipse is wide and shallow, so always three across */
                .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"] > ul[data-many] {
                    top: 78.5%;
                    left: 50%;
                    grid-template-columns: repeat(3, 1fr);
                    width: 62%;
                }

                    .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"] > ul[data-many] li {
                        padding: 2px 8px;
                    }

                    .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="venn"] > ul[data-many] li:last-child:nth-child(3n + 1) {
                        grid-column: 2;
                    }

        .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="hub"] > img {
            aspect-ratio: 5 / 3;
            padding: 28px 48px;
        }

        @supports not (aspect-ratio: 1 / 1) {
        .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-chart="hub"] > img {
            --aspect-ratio: 5 / 3;
        }
    }

        .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
            margin-top: 48px;
        }

            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol li {
                grid-template-columns: 1fr;
                row-gap: 16px;
                min-height: 0;
                padding-top: 32px;
                padding-bottom: 32px;
            }

            /* centred over the copy, a little smaller than on desktop */
            .partner_group:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol img {
                width: calc(200 * 0.85px);
                width: calc(var(--width, 200) * 0.85px);
                margin-left: auto;
                margin-right: auto;
            }
    }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    --rule: #ACACAC;
    --aside: 360px;
    --inset: 45px;

    width: min(1720px, 100% - 2 * 1.5rem);

    width: min(1720px, 100% - 2 * var(--container-gutter));
    margin: 200px auto 0 auto;
    margin: var(--gap) auto 0 auto;
}
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding-top: 16px;
        border-top: 14px solid #3EB885;
        border-top: 14px solid var(--color-brand);
        font-size: 2.625rem;
        font-weight: 600;
        line-height: 3rem;
        letter-spacing: 0;
    }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p {
        max-width: 854px;
        margin: 2px 0 0;
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.875rem;
    }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > div {
        margin-top: 64px;
    }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] {
        display: flex;
        margin: 0;
        padding: 0;
        border-bottom: 4px solid #3EB885;
        border-bottom: 4px solid var(--color-brand);
        list-style: none;
    }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] li {
            position: relative;
            margin: 0;

            /* a short dashed rule between tabs, dropped either side of the open one */
        }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] li + li::before {
                content: "";
                position: absolute;
                left: 0;
                top: 16px;
                height: 36px;
                border-left: 2px dashed var(--rule);
            }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] li:has([aria-selected="true"])::before {
                content: none;
            }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] li:has([aria-selected="true"]) + li::before {
                content: none;
            }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] button {
            height: 68px;
            padding: 0 44px 0 48px;
            border: 0;
            border-radius: 14px 14px 0 0;
            background: none;
            font-size: 1.125rem;
            font-weight: 600;
            line-height: 1.375rem;
            text-align: left;
            white-space: pre-line;
        }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] button[aria-selected="true"] {
                background: #3EB885;
                background: var(--color-brand);
                color: #FFFFFF;
                color: var(--color-on-brand);
            }
/* the tint starts under the tab line, not behind the tabs */
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tabpanel"]:not([hidden]) {
        display: grid;
        grid-template-columns: var(--aside) minmax(0, 1fr);
        grid-column-gap: 21px;
        -moz-column-gap: 21px;
             column-gap: 21px;
        margin: 0;
        padding: 21px 0 88px var(--inset);
        border-radius: 0 0 50px 50px;
        background: linear-gradient(180deg, #FFFFFF, rgba(223, 240, 229, 0.6));
    }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
        margin: 140px 0 0;
        padding: 0;
        list-style: none;
        border-top: 1px dashed var(--rule);
    }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol li {
            margin: 0;
            border-bottom: 1px dashed var(--rule);
        }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 72px;
            padding: 14px 0 14px 36px;
            border: 0;
            background: none;
            color: inherit;
            font-size: 1.5rem;
            font-weight: 600;
            line-height: 1.875rem;
            text-align: left;
        }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button::before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                translate: 0 -50%;
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
                border-left: 24px solid #3EB885;
                border-left: 24px solid var(--color-brand);
                opacity: 0;
            }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button[aria-current] {
                color: #3EB885;
                color: var(--color-brand-ink);
            }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button[aria-current]::before {
                    opacity: 1;
                }
/* the scene is a stack of layers over a fixed frame; each one is placed and
       sized in the frame's own pixels and scales with it */
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
        position: relative;
        width: 100%;
        max-width: 1253px;
        aspect-ratio: var(--w) / var(--h);
        margin: 0;
    }
@supports not (aspect-ratio: 1 / 1) {
    .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
        --aspect-ratio: var(--w) / var(--h);
    }
}
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure img {
            position: absolute;
            left: calc(var(--x) / var(--w) * 100%);
            top: calc(var(--y) / var(--h) * 100%);
            width: calc(var(--width) / var(--w) * 100%);
            height: auto;
        }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article {
        margin: 0;
    }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article h3 {
            margin: 21px 0 0 120px;
            font-size: 1.625rem;
            font-weight: 600;
            line-height: 2rem;
            letter-spacing: 0;
        }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article p {
            max-width: 900px;
            margin: 6px 0 0 120px;
            font-size: 1.125rem;
            line-height: 1.75rem;
        }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article p:last-child {
            margin-top: 22px;
            font-size: 1.125rem;
            font-weight: 600;
        }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article b {
            display: block;
        }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article a {
            display: inline-block;
            color: #3EB885;
            color: var(--color-brand-ink);
            -webkit-text-decoration: none;
            text-decoration: none;

            /* the pipe travels with the name before it, so a wrapped line never opens with one */
        }
.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article a:not(:last-child)::after {
                content: "|";
                margin-left: 14px;
                margin-right: 14px;
                color: #B8B8B8;
            }
@media (max-width: 89.999rem) {

.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --aside: 300px;
        --inset: 24px;
}

        .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
            margin-top: 120px;
        }

            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button {
                min-height: 64px;
                padding: 12px 0 12px 34px;
                font-size: 1.375rem;
                line-height: 1.75rem;
            }

                .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button::before {
                    border-top-width: 18px;
                    border-bottom-width: 18px;
                    border-left-width: 22px;
                }

        .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] button {
            padding-left: 32px;
            padding-right: 36px;
        }
            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article h3,.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article p {
                margin-left: 40px;
            }
    }
@media (max-width: 67.499rem) {

.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
}

        .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
            font-size: 2.375rem;
            line-height: 2.75rem;
        }

        .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p {
            font-size: 1.1875rem;
            line-height: 1.8125rem;
        }

        .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] button {
            padding-left: 20px;
            padding-right: 24px;
        }

        .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tabpanel"]:not([hidden]) {
            grid-template-columns: minmax(0, 1fr);
            padding: 24px 20px 48px;
        }

        /* the scenario list becomes a row of chips above the scene; they file in
           one after another when a category opens, so they read as buttons */
        .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 0;
            border: 0;
        }

            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol li {
                border: 0;
                animation: rise 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
                animation: rise var(--duration-slow) var(--ease-out) both;
            }

            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol li:nth-child(2) { animation-delay: 70ms; }
            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol li:nth-child(3) { animation-delay: 140ms; }
            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol li:nth-child(4) { animation-delay: 210ms; }
            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol li:nth-child(5) { animation-delay: 280ms; }
            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol li:nth-child(6) { animation-delay: 350ms; }

            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button {
                min-height: 0;
                padding: 8px 16px;
                border: 1px solid var(--rule);
                border-radius: 62.5rem;
                border-radius: var(--radius-full);
                color: inherit;
                font-size: 0.9375rem;
                line-height: 1.25rem;
                transition: border-color 120ms cubic-bezier(0.16, 1, 0.3, 1), color 120ms cubic-bezier(0.16, 1, 0.3, 1), scale 120ms cubic-bezier(0.16, 1, 0.3, 1);
                transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), scale var(--duration-fast) var(--ease-out);
            }

                .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button:hover {
                    border-color: #3EB885;
                    border-color: var(--color-brand);
                    color: #3EB885;
                    color: var(--color-brand-ink);
                }

                .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button:active {
                    scale: 0.96;
                }

                .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button::before {
                    content: none;
                }

                .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button[aria-current] {
                    border-color: #3EB885;
                    border-color: var(--color-brand);
                    background: #3EB885;
                    background: var(--color-brand);
                    color: #FFFFFF;
                    color: var(--color-on-brand);
                }

        .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
            margin-top: 24px;
        }
            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article h3 {
                font-size: 1.625rem;
                line-height: 2rem;
            }

            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article h3,.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article p {
                margin-left: 0;
            }

            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article p {
                font-size: 1.125rem;
                line-height: 1.6875rem;
            }
    }
@media (max-width: 47.999rem) {

.scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
}

        .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
            font-size: 2rem;
            line-height: 2.375rem;
        }

        .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p {
            font-size: 1.125rem;
            line-height: 1.6875rem;
        }

        /* four tabs won't fit in a row on a phone, so the strip folds into a menu:
           the open category shows with a chevron and the rest drop down under it */
        /* the panel runs edge to edge on a phone */
        .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tabpanel"]:not([hidden]) {
            margin-left: calc(-1 * 1.5rem);
            margin-right: calc(-1 * 1.5rem);
            margin-left: calc(-1 * var(--container-gutter));
            margin-right: calc(-1 * var(--container-gutter));
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            padding-left: var(--container-gutter);
            padding-right: var(--container-gutter);
            border-radius: 0;
        }

        .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] {
            flex-direction: column;
        }

            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] li {
                display: none;
            }

            /* the handle stays on top whichever tab it is */
            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] li:has([aria-selected="true"]) {
                order: -1;
            }

            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] li:has([aria-selected="true"]) {
                display: block;
            }

            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"][data-open] li {
                display: block;
            }

            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] li + li::before {
                content: none;
            }

            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] button {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                height: 60px;
                padding: 0 20px;
                border-radius: 0;
                font-size: 1rem;
                line-height: 1.25rem;
                white-space: normal;
            }

                .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] button[aria-selected="true"] {
                    border-radius: 14px 14px 0 0;
                }

                    .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] button[aria-selected="true"]::after {
                        content: "";
                        width: 10px;
                        height: 10px;
                        margin-top: -6px;
                        border-right: 2px solid;
                        border-bottom: 2px solid;
                        rotate: 45deg;
                        transition: rotate 120ms cubic-bezier(0.16, 1, 0.3, 1);
                        transition: rotate var(--duration-fast) var(--ease-out);
                    }
                .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"][data-open] button[aria-selected="true"]::after {
                    margin-top: 0;
                    margin-bottom: -6px;
                    rotate: 225deg;
                }

                .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"][data-open] li:not(:has([aria-selected="true"])) button {
                    border-bottom: 1px dashed var(--rule);
                }
            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article h3 {
                font-size: 1.375rem;
                line-height: 1.75rem;
            }

            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article p {
                font-size: 1.0625rem;
                line-height: 1.625rem;
            }

            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article p:last-child {
                font-size: 1rem;
            }

            .scenarios:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article a:not(:last-child)::after {
                margin-left: 8px;
                margin-right: 8px;
            }
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    --drop: 96px;
    --figure: 170px;
    --tile: 60px;
    --badge: 52px;
    --lime: #C2E32F;
    --rail: #0E3B2D;
    --pill: #089055;
    --rule: rgba(255, 255, 255, 0.55);
    /* the pace of a moment; main.js reads these */
    --hop: 900ms;
    --dwell: 2400ms;
    --hold: 7000ms;

    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1.9fr repeat(3, 1fr);
    grid-template-rows: repeat(7, auto) 96px auto;
    grid-template-rows: repeat(7, auto) var(--drop) auto;
    grid-template-areas:
        "title title title title"
        "lede lede lede lede"
        "tabs tabs tabs tabs"
        "home support family coordinator"
        "home support family coordinator"
        "home support family coordinator"
        "home-beat support-beat family-beat coordinator-beat"
        "drop drop drop drop"
        "hearo hearo hearo hearo";
    grid-column-gap: 40px;
    -moz-column-gap: 40px;
         column-gap: 40px;
    margin-top: 200px;
    margin-top: var(--gap);
    padding: 120px max(1.5rem, (100% - 1600px) / 2) 130px;
    padding: 120px max(var(--container-gutter), (100% - 1600px) / 2) 130px;
    background: #3EB885;
    background: var(--color-brand);
    color: #FFFFFF;
    color: var(--color-on-brand);
}
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul,.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        margin: 0;
    }
/* the thick bar over the title, as on the steps */
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
        grid-area: title;
        justify-self: center;
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding-top: 16px;
        border-top: 14px solid var(--rail);
        font-size: 2.75rem;
        font-weight: 600;
        line-height: 3.25rem;
        text-align: center;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 + p {
        grid-area: lede;
        justify-self: center;
        max-width: 960px;
        margin: 24px 0 0;
        font-size: 1.25rem;
        line-height: 1.875rem;
        text-align: center;
        text-wrap: balance;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > [role="tablist"] {
        grid-area: tabs;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-top: 56px;
        margin-bottom: 72px;
    }
/* solid dark-green pills, the same chip Jeff labels everything with */
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"] {
        display: grid;
        padding: 12px 26px 14px;
        border: 0;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        background: var(--pill);
        color: #FFFFFF;
        font: inherit;
        font-size: 1.1875rem;
        line-height: 1.5rem;
        text-align: left;
        cursor: pointer;
        transition: background 220ms cubic-bezier(0.16, 1, 0.3, 1), color 220ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"] time {
            font-size: 0.8125rem;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            opacity: 0.8;
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"]:hover {
            background: var(--rail);
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"][aria-selected="true"] {
            background: #FFFFFF;
            color: var(--rail);
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"]:focus-visible {
            outline: 3px solid var(--lime);
            outline-offset: 3px;
        }
/* the parties and the beats of the open moment share the module's grid, so a
       beat lands under its party and the drops line up with the line below */
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > ol,.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > [role="tabpanel"],.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > [role="tabpanel"] > ol {
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        grid-column: 1 / -1;
        grid-row: tabs-end / -1;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > [role="tabpanel"] > ol {
        grid-row: 1 / -1;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > [role="tabpanel"] {
        pointer-events: none;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > [role="tabpanel"][hidden] {
            display: none;
        }
/* each party spans three shared rows, name, line and picture, so the
       pictures sit level however the names wrap */
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party] {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: subgrid;
        align-content: start;
        justify-items: center;
        text-align: center;
        transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: opacity var(--duration-slow) var(--ease-out);
    }
/* Jeff's numbered badge from the steps, in the order a moment reaches each
       party; the line itself isn't a stop, so it isn't counted */
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > ol {
        counter-reset: party;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party]:not([data-party="hearo"]) {
        counter-increment: party;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party]:not([data-party="hearo"])  > h3::before {
            content: "0" counter(party);
            display: grid;
            align-items: center;
            justify-items: center;
            place-items: center;
            width: var(--badge);
            height: var(--badge);
            margin: 0 auto 18px;
            border: 3px solid var(--rule);
            border-radius: 50%;
            font-size: 1.125rem;
            font-weight: 500;
            letter-spacing: 0;
            transition: background 400ms cubic-bezier(0.16, 1, 0.3, 1), color 400ms cubic-bezier(0.16, 1, 0.3, 1), border-color 400ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: background var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out);
        }
/* reached: the badge fills like the open moment's tab */
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party][data-lit]:not([data-party="hearo"]) > h3::before {
            border-color: #FFFFFF;
            background: #FFFFFF;
            color: var(--rail);
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="home"] { grid-area: home; }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="support"] { grid-area: support; }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="family"] { grid-area: family; }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="coordinator"] { grid-area: coordinator; }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
        margin: 0;
        font-size: 1.375rem;
        font-weight: 700;
        line-height: 1.625rem;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party] > h3 {
        align-self: end;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party] > p {
        margin: 6px 0 0;
        font-size: 1.125rem;
        line-height: 1.5rem;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
        display: grid;
        justify-items: center;
        margin: 24px 0 0;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure img {
            height: var(--figure);
            width: auto;
            max-width: none;
            transition: scale 400ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 400ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: scale var(--duration-slow) var(--ease-back), filter var(--duration-slow) var(--ease-out);
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure figcaption {
            display: flex;
            gap: 6px;
            margin-top: 10px;
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) span {
        padding: 4px 12px;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        background: var(--pill);
        color: #FFFFFF;
        font-size: 0.875rem;
        line-height: 1rem;
        white-space: nowrap;
    }
/* the home: its screens on the left, the devices that notice on the right */
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="home"] {
        grid-template-columns: auto auto;
        -moz-column-gap: 24px;
             column-gap: 24px;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="home"]  > h3,.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="home"]  > p {
            grid-column: 1 / -1;
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="home"]  > ul {
            display: grid;
            grid-template-columns: repeat(4, var(--tile));
            grid-row: 3;
            grid-column: 2;
            grid-gap: 10px 8px;
            gap: 10px 8px;
            align-self: center;
            margin-top: 24px;
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-sensor] {
        display: grid;
        justify-items: center;
        grid-gap: 4px;
        gap: 4px;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-sensor] img {
            width: var(--tile);
            height: var(--tile);
            -o-object-fit: contain;
               object-fit: contain;
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-sensor] {

        transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);

        transition: opacity var(--duration-slow) var(--ease-out);
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-sensor] span {
            padding: 0;
            background: none;
            color: inherit;
            font-size: 0.6875rem;
            line-height: 0.8125rem;
            white-space: normal;
            text-align: center;
        }
/* the sensor that fires goes lime, the one that answers stays bright */
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-sensor][data-state] span {
            font-weight: 700;
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-sensor][data-state="trigger"] span {
            color: var(--lime);
        }
/* the beats: plain text under each party, stretched so every drop starts level */
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at] {
        position: relative;
        align-self: stretch;
        margin-top: 28px;
        padding: 0 0 24px;
        font-size: 1.125rem;
        line-height: 1.625rem;
        text-align: left;
        pointer-events: auto;
        transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: opacity var(--duration-slow) var(--ease-out);
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at] time {
            display: block;
            margin-bottom: 6px;
            font-size: 0.8125rem;
            font-weight: 600;
            line-height: 1.125rem;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
/* the tap down to the line, and where it plugs in */
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at]::before {
            content: "";
            position: absolute;
            left: 50%;
            pointer-events: none;
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at]::after {
            content: "";
            position: absolute;
            left: 50%;
            pointer-events: none;
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at]::after {
            top: 100%;
            height: var(--drop);
            border-left: 2px dotted var(--rule);
            translate: -1px 0;
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at]::before {
            top: calc(100% + var(--drop) - 6px);
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #FFFFFF;
            translate: -6px 0;
        }
/* the home column is wide for its devices; its beat keeps a reading width */
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at="home"] {
        grid-area: home-beat;
        justify-self: center;
        width: min(100%, 420px);
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at="support"] { grid-area: support-beat; }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at="family"] { grid-area: family-beat; }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at="coordinator"] { grid-area: coordinator-beat; }
/* Hearo is the line itself: a rail under every party, what it does on the
       left and its own beat on the right */
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="hearo"] {
        grid-area: hearo;
        grid-template-columns: auto;
        grid-template-rows: auto;
        justify-items: start;
        align-items: center;
        padding: 40px 48% 40px 56px;
        border-radius: 32px;
        background: var(--rail);
        color: #FFFFFF;
        text-align: left;
        transition: background 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: background var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out);
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="hearo"]  > ul {
            display: grid;
            grid-template-columns: repeat(2, auto);
            grid-gap: 14px 40px;
            gap: 14px 40px;
            font-size: 1.125rem;
            line-height: 1.5rem;
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="hearo"] > ul li {
                position: relative;
                padding-left: 20px;
            }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="hearo"] > ul li::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 9px;
                    width: 7px;
                    height: 7px;
                    border-radius: 50%;
                    background: var(--lime);
                }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at="hearo"] {
        grid-area: hearo;
        color: #FFFFFF;
        align-self: center;
        justify-self: end;
        width: calc(48% - 88px);
        margin: 0 48px 0 0;
        padding: 0;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at="hearo"]::before {
            content: none;
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at="hearo"]::after {
            content: none;
        }
/* while a moment plays, what it hasn't reached yet waits in the shade; the
       line itself is always there */
.ecosystem[data-playing]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party]:not([data-party="hearo"]):not([data-lit]),.ecosystem[data-playing]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at]:not(.does-not-exist):not([data-lit]) {
        opacity: 0.35;
    }
/* the devices a moment doesn't touch step back */
.ecosystem[data-playing]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-sensor]:not([data-state]) {
        opacity: 0.4;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party][data-ping] figure img {
        animation: ping 700ms cubic-bezier(0.16, 1, 0.3, 1);
        animation: ping 700ms var(--ease-out);
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="hearo"][data-lit] {
        background: #0A4A37;
    }
/* the pulse, drawn over everything by main.js */
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > svg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: visible;
        pointer-events: none;
    }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > svg path {
            fill: none;
            stroke: var(--lime);
            stroke-width: 4;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: opacity var(--duration-reveal) var(--ease-out);
        }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > svg path[data-done] {
                opacity: 0;
            }
.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > svg circle {
            fill: #FFFFFF;
        }
@media (max-width: 89.999rem) {

.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --figure: 140px;
        --tile: 52px;

        -moz-column-gap: 28px;

             column-gap: 28px;
        padding-top: 120px;
        padding-bottom: 130px;
}

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="home"] {
            -moz-column-gap: 16px;
                 column-gap: 16px;
        }

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at] {
            font-size: 1rem;
            line-height: 1.4375rem;
        }

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="hearo"] > ul {
            gap: 10px 28px;
            font-size: 1rem;
            line-height: 1.375rem;
        }
    }
/* under 67.5rem the line turns vertical: the parties stack down its right
       side in the order a moment reaches them, Hearo second, and every beat sits
       right under its party */
@media (max-width: 67.499rem) {

.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
        --rail-x: 20px;
        --indent: 52px;
        --badge: 34px;

        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas:
            "title"
            "lede"
            "tabs"
            "home"
            "home-beat"
            "hearo"
            "hearo-beat"
            "support"
            "support-beat"
            "family"
            "family-beat"
            "coordinator"
            "coordinator-beat";
        padding: 80px 1.5rem 100px;
        padding: 80px var(--container-gutter) 100px;
}

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
            font-size: 2.25rem;
            line-height: 2.75rem;
        }

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 + p {
            font-size: 1.125rem;
            line-height: 1.6875rem;
        }

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > [role="tablist"] {
            margin-top: 36px;
            margin-bottom: 48px;
        }

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"] {
            flex: 1 1 calc(50% - 6px);
            padding: 10px 18px 12px;
            font-size: 1rem;
            line-height: 1.3125rem;
        }

        /* the line itself, down the left */
        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > ol {
            position: relative;
        }

            .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > ol::before {
                content: "";
                position: absolute;
                top: 12px;
                bottom: 40px;
                left: var(--rail-x);
                border-left: 2px dotted var(--rule);
                translate: -1px 0;
            }

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party] {
            position: relative;
            grid-template-rows: none;
            justify-content: start;
            justify-items: start;
            margin-top: 48px;
            padding-left: var(--indent);
            text-align: left;

            /* where the party taps in */
        }
            .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party]::before {
                content: "";
                position: absolute;
                top: 7px;
                left: calc(var(--rail-x) - 7px);
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background: #FFFFFF;
            }

        /* on the vertical line the badge is the stop itself */
            .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party]:not([data-party="hearo"])  > h3::before {
                content: none;
            }

            .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party]:not([data-party="hearo"])::before {
                content: "0" counter(party);
                display: grid;
                align-items: center;
                justify-items: center;
                place-items: center;
                top: calc(13px - var(--badge) / 2);
                left: calc(var(--rail-x) - var(--badge) / 2);
                width: var(--badge);
                height: var(--badge);
                border: 2px solid #FFFFFF;
                background: #3EB885;
                background: var(--color-brand);
                color: #FFFFFF;
                font-size: 0.8125rem;
                font-weight: 600;
                line-height: 1;
                transition: background 400ms cubic-bezier(0.16, 1, 0.3, 1), color 400ms cubic-bezier(0.16, 1, 0.3, 1);
                transition: background var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out);
            }

            .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party][data-lit]:not([data-party="hearo"])::before {
                background: #FFFFFF;
                color: var(--rail);
            }

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="home"] {
            margin-top: 0;
        }

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
            justify-items: start;
            margin-top: 16px;
        }

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at] {
            justify-self: stretch;
            width: auto;
            margin: 16px 0 0 var(--indent);
        }

            .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at]::before {
                content: none;
            }

            .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at]::after {
                content: none;
            }

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="hearo"] {
            grid-template-columns: 1fr;
            margin-left: var(--indent);
            padding: 24px 28px;
            border-radius: 24px;
        }

            .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="hearo"]::before {
                left: calc(var(--rail-x) - var(--indent) - 7px);
            }

            .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="hearo"]  > ul {
                grid-template-columns: auto;
            }

        /* out from over the rail and onto the green, so the band's type again */
        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-at="hearo"] {
            grid-area: hearo-beat;
            justify-self: stretch;
            width: auto;
            margin: 16px 0 0 var(--indent);
            color: inherit;
        }

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > svg {
            display: none;
        }
    }
@media (max-width: 47.999rem) {

.ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
        --figure: 110px;
        --tile: 46px;
        --rail-x: 16px;
        --indent: 44px;
        --badge: 30px;

        padding-top: 64px;

        padding-bottom: 80px;
}

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
            font-size: 1.75rem;
            line-height: 2.125rem;
        }

        /* titles wrap here, and a full pill round on two lines reads as a blob */
        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"] {
            border-radius: 18px;
        }

        .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="home"] {
            grid-template-columns: auto;
        }

            .ecosystem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-party="home"]  > ul {
                grid-row: auto;
                grid-column: auto;
                margin-top: 16px;
            }
    }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    --badge: 80px;
    --arrow: 48px;
    --ring: #75959B;

    width: min(1720px, 100% - 2 * 1.5rem);

    width: min(1720px, 100% - 2 * var(--container-gutter));
    margin: 200px auto 0 auto;
    margin: var(--gap) auto 0 auto;
}
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding-top: 16px;
        border-top: 14px solid #3EB885;
        border-top: 14px solid var(--color-brand);
        font-size: 2.625rem;
        font-weight: 600;
        line-height: 3rem;
        letter-spacing: 0;
    }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p {
        max-width: 1004px;
        margin: 12px 0 0;
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.875rem;
    }
/* the toggle sits on the list's right edge, between the lede and step one */
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > button {
        display: flex;
        align-items: center;
        gap: 8px;
        width: -moz-max-content;
        width: max-content;
        margin: 32px 0 0 auto;
        margin-right: max(0px, (100% - 1100px) / 2);
        padding: 0;
        border: 0;
        background: none;
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
    }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > button::before {
            content: "\2013";
            display: grid;
            align-items: center;
            justify-items: center;
            place-items: center;
            width: 22px;
            height: 22px;
            border: 2px solid currentColor;
            border-radius: 50%;
            font-size: 1rem;
            line-height: 1;
        }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > button[aria-expanded="false"]::before {
            content: "+";
        }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
        counter-reset: step;
        width: min(1100px, 100%);
        margin: 14px auto 0;
        padding: 0;
        list-style: none;
    }
/* the badge straddles the top edge and the chevron hangs off the bottom.
       Both belong to the item, not the card, so the card can tween its height
       with overflow clipped and neither gets cut */
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        counter-increment: step;
        position: relative;
        margin: 0;
        padding-top: calc(var(--badge) / 2 + 4px);
        padding-bottom: var(--arrow);
    }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li + li {
            margin-top: 19px;
        }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:nth-child(1) { --tint: 10%; }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:nth-child(2) { --tint: 20%; }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:nth-child(3) { --tint: 30%; }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:nth-child(4) { --tint: 40%; }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:nth-child(5) { --tint: 50%; }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:nth-child(6) { --tint: 60%; }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li::before {
            content: "0" counter(step);
            position: absolute;
            top: 0;
            left: 50%;
            z-index: 2;
            translate: -50% 0;
            display: grid;
            align-items: center;
            justify-items: center;
            place-items: center;
            width: var(--badge);
            height: var(--badge);
            border: 4px solid var(--ring);
            border-radius: 50%;
            background: #3EB885;
            background: var(--color-brand);
            color: #FFFFFF;
            color: var(--color-on-brand);
            font-size: 1.625rem;
            font-weight: 500;
        }
/* the chevron pointing on to the next step, carrying the plus; the
           item's padding is its hit area, and a click there toggles the step */
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li::after {
            content: "+";
            position: absolute;
            bottom: 0;
            left: 50%;
            z-index: 1;
            translate: -50% 0;
            width: calc(var(--arrow) * 80 / 54);
            height: var(--arrow);
            background: color-mix(in srgb, #3EB885 var(--tint), #FFFFFF);
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            font-size: 2.5rem;
            line-height: 2.25rem;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
        }

@supports (color: color-mix(in lch, red, blue)) {
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li::after {
            background: color-mix(in srgb, var(--color-brand) var(--tint), #FFFFFF);
        }
}
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:has(details[open])::after {
            content: "\2013";
        }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details {
        position: relative;
        border-radius: 10px;
        background: color-mix(in srgb, #3EB885 var(--tint), #FFFFFF);
        text-align: center;
    }

@supports (color: color-mix(in lch, red, blue)) {
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details {
        background: color-mix(in srgb, var(--color-brand) var(--tint), #FFFFFF);
    }
}
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details  > p {
            max-width: 780px;
            margin: 0 auto;
            padding-top: 29px;
            font-size: 1.125rem;
            line-height: 2.25rem;
        }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > p::before {
                content: "";
                display: block;
                width: 350px;
                margin: 0 auto 27px;
                border-top: 2px dashed #FFFFFF;
            }
/* a cutout can stand on the card's bottom edge instead of sitting above it */
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details img {
            display: block;
            max-width: min(1000px, 90%);
            max-height: 440px;
            margin: 44px auto 0;
            padding-bottom: calc(50px * (1 - 0));
            padding-bottom: calc(50px * (1 - var(--flush, 0)));
        }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary {
        padding-top: 48px;
        padding-bottom: 36px;
        font-size: 1.75rem;
        font-weight: 500;
        line-height: 2.375rem;
        list-style: none;
        cursor: pointer;
    }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary::-webkit-details-marker {
            display: none;
        }
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details[open] summary {
        padding-bottom: 0;
    }
@media (max-width: 67.499rem) {
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
        --badge: 72px;
        --arrow: 44px;
}

        .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
            font-size: 2.375rem;
            line-height: 2.75rem;
        }

        .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p {
            font-size: 1.1875rem;
            line-height: 1.8125rem;
        }

        .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > button {
            margin-top: 24px;
        }

        .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
            margin-top: 12px;
        }

        .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li::before {
            font-size: 1.5rem;
        }

        .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li::after {
            font-size: 2.375rem;
            line-height: 2.125rem;
        }

            .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details  > p {
                padding-left: 24px;
                padding-right: 24px;
                font-size: 1.0625rem;
                line-height: 1.875rem;
            }

                .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > p::before {
                    width: min(350px, 100%);
                }

        .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary {
            padding-top: 44px;
            padding-bottom: 32px;
            font-size: 1.5rem;
            line-height: 2rem;
        }
    }
@media (max-width: 47.999rem) {
.steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
        --badge: 56px;
        --arrow: 34px;
}

        .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
            font-size: 2rem;
            line-height: 2.375rem;
        }

        .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p {
            font-size: 1.125rem;
            line-height: 1.6875rem;
        }

        .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li::before {
            border-width: 3px;
            font-size: 1.125rem;
        }

        .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li::after {
            font-size: 1.875rem;
            line-height: 1.625rem;
        }

            .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details  > p {
                padding-left: 16px;
                padding-right: 16px;
                font-size: 1rem;
                line-height: 1.6875rem;
            }

            .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details img {
                max-width: calc(100% - 32px);
                padding-bottom: calc(32px * (1 - 0));
                padding-bottom: calc(32px * (1 - var(--flush, 0)));
            }

        .steps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary {
            padding: 40px 16px 28px;
            font-size: 1.25rem;
            line-height: 1.75rem;
        }
    }
.toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    --stage: 980px;
    --height: 520px;
    /* Jeff's loop: each device holds, then cross-fades into the next */
    --hold: 2.4s;
    --fade: 0.8s;

    width: min(1720px, 100% - 2 * 1.5rem);

    width: min(1720px, 100% - 2 * var(--container-gutter));
    margin: 200px auto 0 auto;
    margin: var(--gap) auto 0 auto;
}
.toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding-top: 16px;
        border-top: 14px solid #3EB885;
        border-top: 14px solid var(--color-brand);
        font-size: 2.625rem;
        font-weight: 600;
        line-height: 3rem;
        letter-spacing: 0;
    }
.toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
        max-width: 888px;
        margin: 12px 0 0;
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.875rem;
    }
/* the devices share one cell; without js only the first is unhidden */
.toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        display: grid;
        width: min(var(--stage), 100%);
        height: var(--height);
        margin: 80px auto 0;
        padding: 0;
        list-style: none;
        overflow: clip;
    }
.toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul li {
            grid-area: 1 / 1;
            height: var(--height);
            margin: 0;
            transition: opacity var(--fade) cubic-bezier(0.65, 0, 0.35, 1);
            transition: opacity var(--fade) var(--ease-in-out);
        }
.toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul[data-cycling] li:not([data-current]) {
            opacity: 0;
        }
.toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul a {
            box-sizing: border-box;
            display: grid;
            grid-template-rows: minmax(0, 1fr);
            grid-template-columns: minmax(0, 1fr);
            align-items: center;
            justify-items: center;
            place-items: center;
            width: 100%;
            height: 100%;
            padding: 40px;
            transition: scale 220ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: scale var(--duration-base) var(--ease-out);
        }
.toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul a:hover {
                scale: 1.03;
            }
.toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            -o-object-fit: contain;
               object-fit: contain;
        }
.toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > a {
        position: relative;
        left: 50%;
        translate: -50% 0;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-top: 64px;
        padding: 0 27px 0 9px;
        height: 54px;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        background: #3EB885;
        background: var(--color-brand);
        color: #FFFFFF;
        color: var(--color-on-brand);
        font-size: 1.125rem;
        font-weight: 500;
        letter-spacing: 1px;
        -webkit-text-decoration: none;
        text-decoration: none;
        text-transform: uppercase;
    }
.toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > a::before {
            content: "";
            width: 35px;
            height: 35px;
            background: url("/images/read-on.svg") no-repeat center / contain;
        }
@media (max-width: 67.499rem) {
.toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
        --height: 440px;
}

        .toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 2.5rem;
            line-height: 2.875rem;
        }

        .toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            font-size: 1.25rem;
            line-height: 1.875rem;
        }

        .toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            margin-top: 64px;
        }

        .toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > a {
            margin-top: 40px;
        }
    }
@media (max-width: 47.999rem) {
.toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
        --height: 320px;
}

        .toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 2rem;
            line-height: 2.375rem;
        }

        .toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            font-size: 1.125rem;
            line-height: 1.6875rem;
        }

        .toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            margin-top: 40px;
        }

        .toolkit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > a {
            margin-top: 24px;
        }
    }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --rule: #BFBFBF;
    /* the sizer writes --size (1..3, continuous) and sets the smallest card the
       row will take; cards stretch to fill so the gaps stay the design's 26px,
       and the column count snaps through a view transition. the slope steepens
       past the middle so the run is 6 / 5 / 4 up to the default, then 3 / 2. */
    --size: 2;
    --card: max(calc(413px + (var(--size) - 2) * 148px), calc(413px + (var(--size) - 2) * 310px));

    width: min(1754px, 100% - 2 * 1.5rem);

    width: min(1754px, 100% - 2 * var(--container-gutter));
    margin: 60px auto 0 auto;
}
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h1 {
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding-top: 16px;
        border-top: 14px solid #3EB885;
        border-top: 14px solid var(--color-brand);
        font-size: 2.625rem;
        font-weight: 600;
        line-height: 3rem;
        letter-spacing: 0;
    }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h1 + p {
        max-width: 823px;
        margin: 3px 0 0;
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.875rem;
    }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) form {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 24px 32px;
        margin-top: 84px;
    }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label {
        position: relative;
        display: grid;
        grid-gap: 2px;
        gap: 2px;
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.625rem;
        letter-spacing: 0.18px;
        text-transform: uppercase;
    }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label::before {
            content: "";
            position: absolute;
            pointer-events: none;
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label::after {
            content: "";
            position: absolute;
            pointer-events: none;
        }
/* select arrow */
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has(select)::after {
            top: auto;
            right: 10px;
            bottom: 10px;
            left: auto;
            width: 24px;
            height: 21px;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            background: #000000;
        }
/* the sizer's small and large device glyphs either side of the track */
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([type="range"])::before {
            top: auto;
            right: auto;
            bottom: 14px;
            left: 23px;
            width: 14.5px;
            height: 14.5px;
            border-radius: 2.5px;
            background: var(--rule);
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([type="range"])::after {
            top: auto;
            right: auto;
            bottom: 8px;
            left: 147px;
            width: 27.5px;
            height: 27.5px;
            border-radius: 2.5px;
            background: var(--rule);
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([type="range"]) {
            margin-left: auto;
            margin-right: 33px;
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input,.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) select {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        width: 282px;
        height: 42px;
        padding: 0 16px;
        border: 1px solid var(--rule);
        border-radius: 6px;
        background: #FFFFFF;
        color: #000000;
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.625rem;
        letter-spacing: 0;
        text-transform: none;
    }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input::-moz-placeholder {
            color: #B6B6B6;
            opacity: 1;
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input::placeholder {
            color: #B6B6B6;
            opacity: 1;
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) select::-moz-placeholder {
            color: #B6B6B6;
            opacity: 1;
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) select::placeholder {
            color: #B6B6B6;
            opacity: 1;
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) select {
        padding-right: 44px;
    }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) select:has(option[value=""]:checked) {
            color: #B6B6B6;
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="search"] {
        width: 374px;
        padding: 0 52px 0 20px;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        background: #FFFFFF url("../images/search.svg") no-repeat right 21px center / 24px 26px;
    }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="search"]::-webkit-search-cancel-button {
            -webkit-appearance: none;
                    appearance: none;
        }
/* the bar is the design's 92px; the thumb travels 76 inside it so it clears
       the glyphs at both ends. track is thumb-height so nothing needs offsetting */
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="range"] {
        --track: linear-gradient(#E3E1E1, #E3E1E1) no-repeat center / 92px 6px;

        width: 200px;
        padding: 0 59.5px 0 43.5px;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        cursor: pointer;
    }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="range"]::-webkit-slider-runnable-track {
            height: 21px;
            background: var(--track);
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
                    appearance: none;
            width: 21px;
            height: 21px;
            border-radius: 50%;
            background: #000000;
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="range"]::-moz-range-track {
            height: 21px;
            background: var(--track);
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="range"]::-moz-range-thumb {
            width: 21px;
            height: 21px;
            border: 0;
            border-radius: 50%;
            background: #000000;
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(var(--card), 100%), 1fr));
        grid-gap: 40px 26px;
        gap: 40px 26px;
        margin: 106px 0 0;
        padding: 0;
        list-style: none;
    }
/* the card is the Figma component at 410: name, square tile with the scenario
       strip across its top, copy, link. everything scales from the card's width */
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        --tile: #DFF0E5;
        --strip: #75959B;

        position: relative;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto auto 1fr auto;
        margin: 0;
        container-type: inline-size;
        view-transition-class: device_card;
    }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li[hidden] {
            display: none;
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li  > img {
            grid-area: 2 / 1;
            aspect-ratio: 1;
            width: 100%;
            margin-top: 2px;
            -o-object-fit: contain;
               object-fit: contain;
            padding: calc(19.5cqi + 3%) 4.9% 4%;
            border-radius: 10px;
            background: var(--tile);
        }
@supports not (aspect-ratio: 1 / 1) {
    .device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li  > img {
        --aspect-ratio: 1;
    }
}
/* the strip shares the tile's grid row, so it sits across its top
           however many lines the name takes */
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li  > p:first-of-type {
            grid-area: 2 / 1;
            align-self: start;
            z-index: 1;
            min-height: 19.5cqi;
            margin: 2px 0 0;
            padding: 2.7cqi 2.4cqi;
            border-radius: 10px 10px 0 0;
            background: var(--strip);
            color: #FFFFFF;
            font-size: max(0.625rem, min(3.2cqi, 1rem));
            font-weight: 400;
            line-height: 1.55;
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li > p:first-of-type b {
                font-weight: 700;
                text-transform: uppercase;
            }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li  > p:last-of-type {
            margin: 3.9cqi 0 0;
            font-size: max(0.75rem, min(4.4cqi, 1.375rem));
            line-height: 1.5;
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li  > span {
            margin-top: 2.2cqi;
            color: #3EB885;
            color: var(--color-brand-ink);
            font-size: max(0.75rem, min(4.4cqi, 1.375rem));
            font-weight: 700;
            line-height: 1.5;
            -webkit-text-decoration: underline;
            text-decoration: underline;
            text-underline-offset: 3px;
            text-transform: uppercase;
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        margin: 0;
        font-size: max(0.9375rem, min(5.85cqi, 1.875rem));
        font-weight: 700;
        line-height: 1.45;
        letter-spacing: 0;
    }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 a {
            color: inherit;
            -webkit-text-decoration: none;
            text-decoration: none;
        }
.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 a::after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
@media (max-width: 67.499rem) {

        .device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) form {
            gap: 16px 24px;
        }

        .device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([type="range"]) {
            margin-right: 0;
        }

        .device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:not(:has([type="range"])) {
            width: calc((100% - 24px) / 2);
        }

        .device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input:not([type="range"]),.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) select {
            width: 100%;
        }

.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{

        /* narrower cards so the tablet still gets two or three up */
        --card: calc(300px + (var(--size) - 2) * 100px);
}

        .device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            grid-template-columns: repeat(auto-fill, minmax(min(var(--card), 100%), 1fr));
            margin-top: 80px;
        }

    }
@media (max-width: 47.999rem) {

        .device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h1 {
            font-size: 2rem;
            line-height: 2.5rem;
        }

        .device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h1 + p {
            font-size: 1.125rem;
            line-height: 1.625rem;
        }

        .device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) form {
            margin-top: 36px;
        }

        .device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:not(:has([type="range"])) {
            width: 100%;
        }

        .device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([type="range"]) {
            display: none;
        }

        .device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input,.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) select,.device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="search"] {
            width: 100%;
        }

        .device_grid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            margin-top: 36px;
        }

    }
/* filtering and resizing run through a view transition: cards glide to their
   new slot, leavers fade and shrink, arrivals fade in. calm motion cuts. */
:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-group(.device_card) {
    animation-duration: 400ms;
    animation-duration: var(--duration-slow);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-timing-function: var(--ease-out);
}
:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-old(.device_card):only-child {
    animation: 220ms cubic-bezier(0.65, 0, 0.35, 1) both device_card_leave;
    animation: var(--duration-base) var(--ease-in-out) both device_card_leave;
}
:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-new(.device_card):only-child {
    animation: 400ms cubic-bezier(0.16, 1, 0.3, 1) both device_card_arrive;
    animation: var(--duration-slow) var(--ease-out) both device_card_arrive;
}
@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-group(.device_card),
    :root:not([data-motion="full"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-old(.device_card),
    :root:not([data-motion="full"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-new(.device_card) {
        animation: none;
    }
}
:root[data-motion="reduced"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-group(.device_card),
:root[data-motion="reduced"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-old(.device_card),
:root[data-motion="reduced"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-new(.device_card) {
    animation: none;
}
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --tile: #DFF0E5;

    display: grid;
    grid-template-columns: 840px 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-column-gap: 38px;
    -moz-column-gap: 38px;
         column-gap: 38px;
    width: min(1716px, 100% - 2 * 1.5rem);
    width: min(1716px, 100% - 2 * var(--container-gutter));
    margin: 60px auto 0 auto;

    /* back on the left, previous and next at the photo's right edge */
}
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav {
        grid-area: 1 / 1;
        display: flex;
        gap: 66px;
    }
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav a {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            color: #3EB885;
            color: var(--color-brand-ink);
            font-size: 1.125rem;
            font-weight: 600;
            line-height: 2.25rem;
            letter-spacing: 0.18px;
            -webkit-text-decoration: none;
            text-decoration: none;
            text-transform: uppercase;
            white-space: nowrap;

            /* a 35px arrow with a 4px shaft, drawn rather than the circular overview one */
        }
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav a::before {
                content: "";
                width: 35px;
                height: 16px;
                background: currentColor;
                clip-path: polygon(0 50%, 40% 0, 40% 37.5%, 100% 37.5%, 100% 62.5%, 40% 62.5%, 40% 100%);
            }
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav a[rel="prev"] {
                margin-left: auto;
            }
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav a[rel="next"] {
                flex-direction: row-reverse;
                gap: 9px;
            }
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav a[rel="next"]::before {
                    rotate: 180deg;
                }
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img {
        grid-area: 2 / 1 / -1;
        aspect-ratio: 840 / 676;
        width: 100%;
        margin-top: 18px;
        -o-object-fit: contain;
           object-fit: contain;
        padding: 8%;
        border-radius: 10px;
        background: var(--tile);
    }
@supports not (aspect-ratio: 1 / 1) {
    .device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img {
        --aspect-ratio: 840 / 676;
    }
}
/* copy fills the second column from the row the photo starts on; rows are
       explicit so nothing drifts up beside the nav */
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > :not(nav):not(img) {
        grid-column: 2;
    }
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p:not(:has( > a)) {
        grid-row: 3;
    }
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        grid-row: 4;
    }
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
        grid-row: 2;
        margin: 2px 0 0;
        font-size: 3rem;
        font-weight: 600;
        line-height: 4.35rem;
        letter-spacing: 0;
    }
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
        margin: 21px 0 0;
        font-size: 1.125rem;
        line-height: 2.25rem;
    }
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        margin: 36px 0 0;
        padding-left: 20px;
        font-size: 1.125rem;
        line-height: 2.25rem;
    }
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        margin: 0;
    }
/* the maker's own product page, for anything that isn't ours */
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p:has( > a) {
        grid-row: 5;
        margin-top: 36px;
    }
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p a {
        color: #3EB885;
        color: var(--color-brand-ink);
        font-weight: 600;
        letter-spacing: 0.18px;
        text-transform: uppercase;
        -webkit-text-decoration: underline;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
@media (max-width: 89.999rem) {
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        grid-template-columns: 1fr 1fr;
}
    }
@media (max-width: 67.499rem) {
.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        grid-template-columns: 1fr;
        margin-top: 40px;
}

        .device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > :not(nav):not(img),.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p:not(:has( > a)),.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p:has( > a),.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul,.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
            grid-column: 1;
            grid-row: auto;
        }

        .device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img {
            grid-row: auto;
            margin-bottom: 24px;
        }

        .device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
            font-size: 2.25rem;
            line-height: 3rem;
        }

        .device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p,.device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            font-size: 1rem;
            line-height: 1.875rem;
        }

        .device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            margin-top: 24px;
        }
    }
@media (max-width: 47.999rem) {
        .device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav {
            gap: 24px;
        }

            .device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav a {
                gap: 8px;
                font-size: 0.875rem;
                line-height: 1.75rem;
            }

                .device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav a::before {
                    width: 26px;
                    height: 12px;
                }

        .device_detail:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
            font-size: 1.875rem;
            line-height: 2.5rem;
        }
    }
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 100px;
    --rule: #ACACAC;
    /* the row is inset 47px from the container edge, and each card carries 27px of that */
    --inset: calc(max(var(--container-gutter), (100% - 1716px) / 2) + 20px);

    margin-top: 100px;

    margin-top: var(--gap);
    padding: 0 0 83px;
    background: linear-gradient(180deg, #FFFFFF 0%, #ECF6EF 100%);
    background: linear-gradient(180deg, #FFFFFF 0%, var(--green-400) 100%);
}
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        width: min(1716px, 100% - 2 * 1.5rem);
        width: min(1716px, 100% - 2 * var(--container-gutter));
        margin: 0 auto;
        font-size: 1.875rem;
        font-weight: 600;
        line-height: 2.7188rem;
        letter-spacing: 0;
    }
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        display: flex;
        gap: 0;
        margin: 13px 0 0;
        padding: 0 var(--inset);
        list-style: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul::-webkit-scrollbar {
            display: none;
        }
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        position: relative;
        flex: 0 0 677px;
        margin: 0;
        padding: 0 27px;
        container-type: inline-size;
        scroll-snap-align: start;
        text-align: center;

        /* a dashed divider between cards, running the height of the scene minus its ends */
    }
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li + li::before {
            content: "";
            position: absolute;
            top: 26px;
            right: auto;
            bottom: auto;
            left: 0;
            height: calc((100cqi - 54px) * 410 / 623 - 44px);
            border-left: 1px dashed var(--rule);
        }
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li img {
            width: 100%;
            aspect-ratio: 623 / 410;
            -o-object-fit: contain;
               object-fit: contain;
        }
@supports not (aspect-ratio: 1 / 1) {
    .scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li img {
        --aspect-ratio: 623 / 410;
    }
}
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
        margin: 3px 0 0;
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 1.875rem;
        font-weight: 700;
        line-height: 2.7188rem;
        letter-spacing: 0;
    }
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a {
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 2.25rem;
        letter-spacing: 0.18px;
        text-transform: uppercase;
        text-underline-offset: 3px;
    }
/* the pager is a range: dragging it scrolls the list, scrolling the list moves it */
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label {
        --rule-track: #E3E1E1;

        display: flex;
        align-items: center;
        gap: 12px;
        width: min(585px, 100% - 2 * 1.5rem);
        width: min(585px, 100% - 2 * var(--container-gutter));
        height: 42px;
        margin: 56px auto 0;
        padding: 0 24px;
        border: 1px solid #BFBFBF;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        background: #FFFFFF;
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.6313rem;
    }
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="range"] {
        --track: linear-gradient(var(--rule-track), var(--rule-track)) no-repeat center / 100% 6px;

        flex: 1;
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        height: 21px;
        margin: 0;
        padding: 0;
        background: transparent;
        cursor: pointer;
    }
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="range"]::-webkit-slider-runnable-track {
            height: 21px;
            background: var(--track);
        }
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
                    appearance: none;
            width: 21px;
            height: 21px;
            border-radius: 50%;
            background: #000000;
        }
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="range"]::-moz-range-track {
            height: 21px;
            background: var(--track);
        }
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="range"]::-moz-range-thumb {
            width: 21px;
            height: 21px;
            border: 0;
            border-radius: 50%;
            background: #000000;
        }
/* while a pointer drags the list or the range, snapping would fight the hand */
.scenario_carousel[data-dragging]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        cursor: grab;
        scroll-behavior: smooth;
        scroll-padding-inline-start: 1.5rem;
        scroll-padding-inline-start: var(--container-gutter);
    }
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul:active {
            cursor: grabbing;
        }
@media (max-width: 67.499rem) {
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 60px;
}

        .scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 1.625rem;
            line-height: 2.25rem;
        }

        .scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
            flex-basis: 70vw;
        }

        .scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
            font-size: 1.625rem;
            line-height: 2.25rem;
        }
    }
@media (max-width: 47.999rem) {
.scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 40px;

        padding-bottom: 48px;
}

        .scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 1.375rem;
            line-height: 1.875rem;
        }

        .scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
            flex-basis: 85vw;
            padding-left: 12px;
            padding-right: 12px;
        }

        .scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
            font-size: 1.375rem;
            line-height: 1.875rem;
        }

        .scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a {
            font-size: 0.875rem;
            line-height: 1.75rem;
        }

        .scenario_carousel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label {
            margin-top: 32px;
        }
    }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --columns: minmax(0, 1fr) minmax(0, 940px);
    --gap: 80px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 940px);
    grid-template-columns: var(--columns);
    grid-template-rows: repeat(4, auto) 1fr;
    grid-column-gap: 80px;
    grid-column-gap: var(--gap);
    -moz-column-gap: 80px;
         column-gap: 80px;
    -moz-column-gap: var(--gap);
         column-gap: var(--gap);
    width: min(1720px, 100% - 2 * 1.5rem);
    width: min(1720px, 100% - 2 * var(--container-gutter));
    margin: 60px auto 0 auto;

    /* the same header as the device integrations below, so the page reads as one */
}
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h1 {
        grid-column: 1;
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding-top: 16px;
        border-top: 14px solid #3EB885;
        border-top: 14px solid var(--color-brand);
        font-size: 2.625rem;
        font-weight: 700;
        line-height: 3rem;
        letter-spacing: 0;
    }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h1 + p {
        grid-column: 1;
        margin: 12px 0 0;
        font-size: 1.25rem;
        line-height: 1.875rem;
        font-weight: 700;
    }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h1 + p + p {
        grid-column: 1;
        margin: 24px 0 0;
        font-size: 1.125rem;
        line-height: 2rem;
    }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
        grid-column: 1;
        margin: 56px 0 0;
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.5rem;
        letter-spacing: 3px;
        text-transform: uppercase;
    }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] {
        grid-column: 1;
        display: grid;
        align-content: start;
        margin-top: 8px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        counter-reset: depth;
    }
/* plain rows like the device list below; the picked one is simply the one at full strength */
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"] {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-gap: 2px 8px;
        gap: 2px 8px;
        padding: 18px 0;
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.12);
        background: none;
        color: rgba(0, 0, 0, 0.45);
        font: inherit;
        text-align: left;
        cursor: pointer;
        counter-increment: depth;
        transition: color 120ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: color var(--duration-fast) var(--ease-out);
    }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"]::before {
            content: counter(depth, decimal-leading-zero);
            grid-row: 1 / 3;
            font-size: 0.9375rem;
            font-weight: 600;
            line-height: 1.75rem;
            letter-spacing: 2px;
        }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"] strong {
            font-size: 1.375rem;
            line-height: 1.75rem;
        }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"] span {
            font-size: 1rem;
            line-height: 1.5rem;
        }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"]:hover {
            color: rgba(0, 0, 0, 0.75);
        }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"][aria-selected="true"] {
            color: #000000;
            color: var(--color-text);
        }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"][aria-selected="true"]::before {
                color: #3EB885;
                color: var(--color-brand-ink);
            }
/* every depth's picture sits in the same spot; only the selected one shows */
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tabpanel"] {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: center;
        margin: 0;
    }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tabpanel"] img {
            width: 100%;
            height: auto;
            aspect-ratio: 1200 / 891;
            -o-object-fit: contain;
               object-fit: contain;
        }
@supports not (aspect-ratio: 1 / 1) {
    .platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tabpanel"] img {
        --aspect-ratio: 1200 / 891;
    }
}
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
        max-width: 640px;
        margin-top: 24px;
        font-size: 1rem;
        line-height: 1.5rem;
    }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > figure + p {
        grid-column: 1 / -1;
        max-width: 1100px;
        margin: 72px 0 0;
        font-size: 1.125rem;
        line-height: 2rem;
    }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > a {
        grid-column: 1 / -1;
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-top: 32px;
        padding: 0 27px 0 9px;
        height: 54px;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        background: #3EB885;
        background: var(--color-brand);
        color: #FFFFFF;
        color: var(--color-on-brand);
        font-size: 1.125rem;
        font-weight: 500;
        letter-spacing: 1px;
        -webkit-text-decoration: none;
        text-decoration: none;
        text-transform: uppercase;
        transition: background-color 120ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: background-color var(--duration-fast) var(--ease-out);
    }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > a::before {
            content: "";
            width: 35px;
            height: 35px;
            background: url("/images/read-on.svg") no-repeat center / contain;
        }
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > a:hover {
            background: #339D71;
            background: var(--color-brand-hover);
        }
@media (max-width: 89.999rem) {
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --columns: minmax(0, 1fr) minmax(0, 680px);
        --gap: 56px;
}
    }
@media (max-width: 67.499rem) {
.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --columns: minmax(0, 1fr);

        grid-template-rows: none;
}

        .platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h1 {
            font-size: 2.25rem;
            line-height: 2.75rem;
        }

        .platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            -moz-column-gap: 32px;
                 column-gap: 32px;
        }

        .platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tabpanel"] {
            grid-column: 1;
            grid-row: auto;
            margin-top: 32px;
        }
    }
@media (max-width: 47.999rem) {
        .platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h1 {
            font-size: 1.75rem;
            line-height: 2.125rem;
        }

        .platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h1 + p + p,.platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > figure + p {
            font-size: 1.0625rem;
            line-height: 1.875rem;
        }

        .platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tablist"] {
            grid-template-columns: minmax(0, 1fr);
        }

        .platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"] {
            padding-top: 14px;
            padding-bottom: 14px;
        }

            .platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"] strong {
                font-size: 1.1875rem;
            }

            .platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [role="tab"] span {
                font-size: 0.9375rem;
            }

        .platform_depths:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > a {
            padding-right: 20px;
            font-size: 0.875rem;
            letter-spacing: 0.5px;
        }
    }
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --photo: 480px;
    --gap: 80px;

    width: min(1720px, 100% - 2 * 1.5rem);

    width: min(1720px, 100% - 2 * var(--container-gutter));
    margin: 250px auto 0 auto;
}
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding-top: 16px;
        border-top: 14px solid #3EB885;
        border-top: 14px solid var(--color-brand);
        font-size: 2.625rem;
        font-weight: 700;
        line-height: 3rem;
        letter-spacing: 0;
    }
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 + p {
        margin: 12px 0 0;
        font-size: 1.25rem;
        line-height: 1.875rem;
        font-weight: 700;
    }
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p + p {
        max-width: 960px;
        margin: 24px 0 0;
        font-size: 1.125rem;
        line-height: 2rem;
    }
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article {
        display: grid;
        grid-template-columns: var(--photo) minmax(0, 837px);
        grid-template-rows: repeat(5, auto) 1fr;
        grid-column-gap: var(--gap);
        -moz-column-gap: var(--gap);
             column-gap: var(--gap);
        margin-top: 112px;
    }
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article + article {
            margin-top: 96px;
        }
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article h3 {
            grid-column: 2;
            margin: 0 0 24px;
        }
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article h3 img {
                height: calc(var(--height) * 1px);
                max-width: 520px;
            }
/* every device sits centered in the same box, so they share one axis whatever their shape */
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article  > img {
            grid-column: 1;
            grid-row: 1 / -1;
            width: 100%;
            height: 400px;
            -o-object-fit: scale-down;
               object-fit: scale-down;
        }
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article p {
            grid-column: 2;
            margin: 0;
            font-size: 1.125rem;
            line-height: 2.25rem;
        }
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article h4 {
            grid-column: 2;
            margin: 36px 0 4px;
            color: #3EB885;
            color: var(--color-brand-ink);
            font-size: 0.9375rem;
            font-weight: 600;
            line-height: 1.5rem;
            letter-spacing: 3px;
            text-transform: uppercase;
        }
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article dl {
            grid-column: 2;
            margin: 8px 0 0;
            font-size: 1.125rem;
            line-height: 1.875rem;
        }
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article dl div {
                display: grid;
                grid-template-columns: 260px minmax(0, 1fr);
                grid-column-gap: 32px;
                -moz-column-gap: 32px;
                     column-gap: 32px;
                padding-top: 16px;
                padding-bottom: 16px;
                border-top: 1px solid rgba(0, 0, 0, 0.12);
            }
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article dl dt {
                font-weight: 600;
            }
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article dl dd {
                margin: 0;
            }
@media (max-width: 89.999rem) {
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --photo: 380px;
        --gap: 48px;
}
    }
@media (max-width: 67.499rem) {
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        margin-top: 160px;
}

        .integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
            font-size: 2.25rem;
            line-height: 2.75rem;
        }

        .integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 + p {
            font-size: 1.25rem;
            line-height: 1.75rem;
        }

        .integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article {
            grid-template-columns: minmax(0, 1fr);
            margin-top: 80px;
        }

            .integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article + article {
                margin-top: 80px;
            }

            .integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article h3,.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article h4,.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article p,.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article dl {
                grid-column: 1;
            }

            .integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article  > img {
                grid-row: 2;
                justify-self: center;
                width: auto;
                height: auto;
                max-height: 300px;
                margin-top: 16px;
                margin-bottom: 24px;
            }

            .integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article p,.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article dl {
                font-size: 1.0625rem;
                line-height: 1.875rem;
            }
    }
@media (max-width: 47.999rem) {
.integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        margin-top: 100px;
}

        .integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
            font-size: 1.75rem;
            line-height: 2.125rem;
        }

        .integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p + p {
            font-size: 1.0625rem;
            line-height: 1.875rem;
        }
            .integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article h3 img {
                height: min(var(--height) * 1px, 64px);
                max-width: 100%;
                -o-object-fit: contain;
                   object-fit: contain;
                -o-object-position: left center;
                   object-position: left center;
            }

            .integrations:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) article dl div {
                grid-template-columns: minmax(0, 1fr);
                row-gap: 4px;
            }
    }
/* Hearo Labs has its own palette and type; one module, the page in document order */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --teal: #10656D;
    --teal-deep: #004F59;
    --mint: #94CCC2;
    --mint-pale: #B8ECCB;
    --orange: #F89521;
    --lime: #CEF09D;
    --on-orange: #FFFFFF;

    margin-top: calc(-1 * (30px + max(16px, min(2.5vw, 40px))));

    margin-top: calc(-1 * (30px + max(16px, min(2.5vw, 40px))));

    margin-top: calc(-1 * (var(--header-drop) + var(--header-curve)));
    color: #004F59;
    color: var(--teal-deep);
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-family: var(--font-labs);
}
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > * {
        margin: 0;
    }
/* hero: logo over a faint grid, pixel blocks stepping down into the next band */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > header {
        /* the drawn grid: 20 x 14 squares of 50px, 10px apart, 180px down. The
           live board takes as many whole squares as fit above the readout */
        --cell: 50px;
        --gap: 10px;
        --board-top: 180px;
        --board-bottom: 60px;

        position: relative;
        z-index: 1;
        display: grid;
        justify-items: center;
        align-content: start;
        height: 1077px;
        padding-top: 363px;
        background: var(--teal) url("/images/labs/hero-grid.webp") no-repeat center 180px / 1190px auto;
        color: #FFFFFF;
        text-align: center;
    }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header img {
            width: min(778px, 80%);
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header p {
            margin: 30px 0 0;
            font-size: 2.4375rem;
            font-weight: 400;
            letter-spacing: 14px;
            text-transform: uppercase;
        }
/* the logo sits over the board until a few moves in, then steps aside;
           main.js lets clicks through wherever the logo has no ink */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header  > img,.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header  > p {
            position: relative;
            z-index: 1;
            pointer-events: none;
            transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1), translate 400ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: opacity var(--duration-slow) var(--ease-out), translate var(--duration-slow) var(--ease-out);
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header[data-playing] > img,.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header[data-playing] > p {
            opacity: 0;
            translate: 0 -48px;
        }
/* main.js lays a live board exactly over the drawn one */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header[data-game] {
            background-image: none;
        }
/* margin 0: the flow rule spaces anything after a paragraph, positioned or not */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board] {
            position: absolute;
            top: var(--board-top);
            margin: 0;
            left: 50%;
            display: grid;
            grid-template-columns: repeat(20, var(--cell));
            grid-template-columns: repeat(var(--cols, 20), var(--cell));
            grid-auto-rows: var(--cell);
            grid-gap: var(--gap);
            gap: var(--gap);
            translate: -50% 0;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
            -webkit-touch-callout: none;
            touch-action: manipulation;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board]  > span {
                position: relative;
                display: grid;
                align-items: center;
                justify-items: center;
                place-items: center;
                border: 1px solid rgba(255, 255, 255, 0.11);
                border-radius: calc(var(--cell) * 0.16);
                font-size: calc(var(--cell) * 0.6);
                font-weight: 600;
                line-height: 1;
                cursor: pointer;
                transition: background 120ms linear, border-color 120ms linear;
                transition: background var(--duration-fast) linear, border-color var(--duration-fast) linear;
            }
/* before the game, a click sends a ring of lime out from that square. The
               ring is one layer that only scales and fades, seen through a stencil
               of the squares, so it costs no repaint */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board]  > div {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                overflow: hidden;
                pointer-events: none;
                -webkit-mask: url("/images/labs/cell-mask.svg") 0 0 / calc(var(--cell) + var(--gap)) calc(var(--cell) + var(--gap)) repeat;
                        mask: url("/images/labs/cell-mask.svg") 0 0 / calc(var(--cell) + var(--gap)) calc(var(--cell) + var(--gap)) repeat;
            }
/* drawn small and scaled up on the GPU: a soft ring loses nothing
               to the stretch, and a board-wide one would be a huge layer to paint */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board]  > div > span {
                --size: 240px;

                position: absolute;
                top: calc(var(--y) - 240px / 2);
                top: calc(var(--y) - var(--size) / 2);
                left: calc(var(--x) - 240px / 2);
                left: calc(var(--x) - var(--size) / 2);
                width: 240px;
                width: var(--size);
                height: 240px;
                height: var(--size);
                border-radius: 50%;
                background: radial-gradient(closest-side, rgba(206, 240, 157, 0) 45%, rgba(206, 240, 157, var(--strength)) 78%, rgba(206, 240, 157, 0) 100%);
                animation: labs-ring 820ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
                animation: labs-ring 820ms var(--ease-out) forwards;
                will-change: transform, opacity;
            }
/* the highlight lands the instant the pointer does; only leaving fades */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board]  > span:not([data-open]):hover {
                border-color: rgba(255, 255, 255, 0.4);
                background: rgba(255, 255, 255, 0.06);
                transition: none;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board]  > [data-open] {
                border-color: transparent;
                background: var(--mint-pale);
                cursor: default;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board] > [data-open]::after {
                    content: attr(data-n);
                }
/* the original's colors, for the throwback */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board] [data-n="1"] { color: #0000FF; }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board] [data-n="2"] { color: #008000; }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board] [data-n="3"] { color: #FF0000; }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board] [data-n="4"] { color: #000080; }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board] [data-n="5"] { color: #800000; }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board] [data-n="6"] { color: #008080; }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board] [data-n="7"] { color: #000000; }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board] [data-n="8"] { color: #808080; }
/* a pennant on a pole */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board] > [data-flag]::before {
                    content: "";
                    position: absolute;
                    top: 22%;
                    right: auto;
                    bottom: 22%;
                    left: 42%;
                    width: 3px;
                    background: #FFFFFF;
                }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board] > [data-flag]::after {
                    content: "";
                    position: absolute;
                    top: 22%;
                    left: calc(42% + 3px);
                    width: 34%;
                    height: 32%;
                    background: var(--orange);
                    clip-path: polygon(0 0, 100% 50%, 0 100%);
                }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board]  > [data-wrong] {
                opacity: 0.4;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board]  > [data-mine],.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board]  > [data-boom] {
                border-color: transparent;
                background-color: var(--mint-pale);
                background-image:
                    radial-gradient(circle at 42% 42%, #FFFFFF 0,#FFFFFF 7%, #111111 8%,#111111 30%, transparent 31%),
                    linear-gradient(#111111, #111111),
                    linear-gradient(#111111, #111111);
                background-image:
                    radial-gradient(circle at 42% 42%, #FFFFFF 0 7%, #111111 8% 30%, transparent 31%),
                    linear-gradient(#111111, #111111),
                    linear-gradient(#111111, #111111);
                background-position: center;
                background-repeat: no-repeat;
                background-size: 100% 100%, 64% 3px, 3px 64%;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-board]  > [data-boom] {
                background-color: #FF2E2E;
            }
/* the throwback readout: mines left, the face that restarts, seconds */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-hud] {
            position: absolute;
            margin: 0;
            top: calc(var(--board-top) + 14 * (var(--cell) + var(--gap)) - var(--gap) + 14px);
            top: calc(var(--board-top) + var(--rows, 14) * (var(--cell) + var(--gap)) - var(--gap) + 14px);
            left: 50%;
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 5px 10px;
            border: 3px solid;
            border-color: #FFFFFF #808080 #808080 #FFFFFF;
            background: #C0C0C0;
            opacity: 0;
            visibility: hidden;
            translate: -50% 8px;
            transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1), translate 400ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 400ms;
            transition: opacity var(--duration-slow) var(--ease-out), translate var(--duration-slow) var(--ease-out), visibility 0s var(--duration-slow);
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-hud] output {
                padding: 2px 6px;
                border: 2px solid;
                border-color: #808080 #FFFFFF #FFFFFF #808080;
                background: #1A0000;
                color: #FF2A2A;
                font: 700 26px/1 "Courier New", monospace;
                letter-spacing: 2px;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-hud] button {
                display: grid;
                align-items: center;
                justify-items: center;
                place-items: center;
                width: 38px;
                height: 38px;
                padding: 0;
                border: 3px solid;
                border-color: #FFFFFF #808080 #808080 #FFFFFF;
                background: #C0C0C0;
                font-size: 1.375rem;
                line-height: 1;
                cursor: pointer;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-hud] button:active {
                    border-color: #808080 #FFFFFF #FFFFFF #808080;
                }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header[data-playing] [data-hud] {
            opacity: 1;
            visibility: visible;
            translate: -50% 0;
            transition-delay: 0s;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header[data-boom] [data-board] {
            animation: labs-boom 420ms cubic-bezier(0.16, 1, 0.3, 1);
            animation: labs-boom 420ms var(--ease-out);
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header[data-won] [data-board] > span {
            animation: labs-won 900ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d) * 28ms) both;
            animation: labs-won 900ms var(--ease-out) calc(var(--d) * 28ms) both;
        }
/* four teal columns hang off the bottom edge into the band below */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header::after {
            content: "";
            position: absolute;
            top: 100%;
            right: 0;
            bottom: auto;
            left: 0;
            height: 481px;
            background: var(--teal);
            clip-path: polygon(0 0, 100% 0, 100% 63%, 75% 63%, 75% 100%, 50% 100%, 50% 75.5%, 25% 75.5%, 25% 43.7%, 0 43.7%);
        }
/* the big statement on halftone waves */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section:nth-of-type(1) {
        /* the lime and orange tabs are this square, stacked */
        --tab: 150px;

        position: relative;
        padding: 560px 1.5rem 200px;
        padding: 560px var(--container-gutter) 200px;
        background: var(--mint) url("/images/labs/intro-wave.webp") no-repeat center / cover;
    }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(1) p {
            max-width: 1403px;
            margin: 0 auto;
            font-size: 2.625rem;
            font-weight: 400;
            line-height: 4.125rem;
            letter-spacing: 6px;
            text-align: center;
            text-transform: uppercase;
        }
/* the lime and orange tabs that hang off the bottom right */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(1)::before {
            content: "";
            position: absolute;
            right: 0;
            width: var(--tab);
            height: var(--tab);
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(1)::after {
            content: "";
            position: absolute;
            right: 0;
            width: var(--tab);
            height: var(--tab);
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(1)::before {
            bottom: var(--tab);
            background: var(--lime);
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(1)::after {
            bottom: 0;
            background: var(--orange);
        }
/* the boards */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section:nth-of-type(2) {
        display: grid;
        justify-items: center;
        grid-gap: 64px;
        gap: 64px;
        padding: 140px 1.5rem 100px;
        padding: 140px var(--container-gutter) 100px;
    }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(2) img:first-child {
            width: 321px;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(2) img:last-child {
            width: min(1222px, 100%);
        }
/* silicon stallion */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section:nth-of-type(3) {
        position: relative;
        display: grid;
        grid-template-columns: 903px 256px 248px;
        grid-template-rows: auto auto;
        justify-content: center;
        grid-column-gap: 120px;
        -moz-column-gap: 120px;
             column-gap: 120px;
        padding: 175px 1.5rem 200px;
        padding: 175px var(--container-gutter) 200px;
        background: var(--mint-pale);

        /* white stair blocks in the top left corner */
    }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3)::before {
            content: "";
            position: absolute;
            top: 0;
            right: auto;
            bottom: auto;
            left: 0;
            width: 441px;
            height: 181px;
            background: #FFFFFF;
            clip-path: polygon(0 0, 100% 0, 100% 39%, 32% 39%, 32% 77%, 16% 77%, 16% 100%, 0 100%);
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) h2 {
            grid-column: 1 / -1;
            justify-self: center;
            margin: 0 0 100px;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) h2 img {
                width: 583px;
                transform-origin: 60% 90%;
            }
/* the stallion rears while it whinnies */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) h2[data-rearing] img {
                animation: labs-rear 900ms cubic-bezier(0.16, 1, 0.3, 1);
                animation: labs-rear 900ms var(--ease-out);
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) figure {
            position: relative;
            margin: 0;
            padding: 62px;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) figure img {
                width: 100%;
            }
/* corner brackets */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) figure::before {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background:
                    url("/images/labs/corner.svg") no-repeat 0 0 / 100px,
                    url("/images/labs/corner.svg") no-repeat 100% 0 / 100px,
                    url("/images/labs/corner.svg") no-repeat 0 100% / 100px,
                    url("/images/labs/corner.svg") no-repeat 100% 100% / 100px;
                pointer-events: none;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) figure::after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background:
                    url("/images/labs/corner.svg") no-repeat 0 0 / 100px,
                    url("/images/labs/corner.svg") no-repeat 100% 0 / 100px,
                    url("/images/labs/corner.svg") no-repeat 0 100% / 100px,
                    url("/images/labs/corner.svg") no-repeat 100% 100% / 100px;
                pointer-events: none;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) figure::after {
                content: none;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) p {
            margin: 0;
            font-size: 2.625rem;
            font-weight: 300;
            line-height: 3.6875rem;
            letter-spacing: 4px;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) p:nth-of-type(1) {
            align-self: start;
            margin-top: 100px;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) p:nth-of-type(2) {
            align-self: start;
            margin-top: 260px;
        }
/* the devices that carry Labs boards */
/* inside every hub: the hub over the brace, what it runs on in a row beneath */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section:nth-of-type(4) {
        --hub: 260px;

        display: grid;
        justify-items: center;
        padding: 150px 1.5rem 120px;
        padding: 150px var(--container-gutter) 120px;
    }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) h2 {
            margin: 0 0 48px;
            font-size: 2.4375rem;
            font-weight: 400;
            letter-spacing: 14px;
            text-align: center;
            text-transform: uppercase;
        }
/* the two hubs share a row, so the brace reads as holding both */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4)  > div {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 96px;
        }
/* a shared image row keeps both captions on one line */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) figure {
            display: grid;
            grid-template-rows: var(--hub) auto;
            justify-items: center;
            align-items: start;
            grid-gap: 24px;
            gap: 24px;
            margin: 0;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) figure img {
                align-self: end;
                width: auto;
                height: var(--hub);
            }
/* the flat hub is wide and low; the kit is a cube */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) figure:first-child img {
            height: 200px;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) figcaption {
            display: grid;
            justify-items: center;
            grid-gap: 4px;
            gap: 4px;
            text-align: center;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) strong {
            font-size: 1.625rem;
            font-weight: 500;
            letter-spacing: 3px;
            text-transform: uppercase;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) figcaption span {
            max-width: 260px;
            font-size: 1.0625rem;
            font-weight: 300;
            line-height: 1.3;
            letter-spacing: 0.5px;
        }
/* the brace between the hubs and the row */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4)::before {
            content: "";
            order: 1;
            width: 730px;
            height: 56px;
            margin-top: 20px;
            margin-bottom: 48px;
            background: url("/images/labs/brace.svg") no-repeat center / contain;
        }
/* logos stay in their own colors: member and partner marks can't be recolored */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) ul {
            order: 2;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 40px 72px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) li {
            display: grid;
            grid-template-rows: 84px auto;
            justify-items: center;
            align-items: center;
            grid-gap: 14px;
            gap: 14px;

            /* wordmarks are wide; capping the width keeps them level with the square marks */
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) li img {
                width: auto;
                max-width: 200px;
                height: 56px;
                -o-object-fit: contain;
                   object-fit: contain;
            }
/* the member badge carries small type of its own, so it gets the full row height */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) li img[src*="zwave-member"] {
                height: 84px;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) li span {
            grid-row: 2;
            font-size: 0.9375rem;
            letter-spacing: 3px;
            text-transform: uppercase;
        }
/* made in the lab: every device at a glance, and the one you pick opens across its row */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section[data-lineup] {
        --cols: 4;
        --gap: 24px;
        --tile: #DAEDEA;
        --tile-hover: #C4E3DD;

        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
        grid-column-gap: 40px;
        -moz-column-gap: 40px;
             column-gap: 40px;
        width: min(1400px, 100% - 2 * 1.5rem);
        width: min(1400px, 100% - 2 * var(--container-gutter));
        margin-left: auto;
        margin-right: auto;
        padding-top: 150px;
        padding-bottom: 160px;
    }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] h2 {
            margin: 0;
            font-size: 4.0625rem;
            font-weight: 500;
            line-height: 1;
            letter-spacing: 3px;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup]  > p {
            justify-self: end;
            max-width: 560px;
            margin: 0;
            color: #000000;
            font-size: 1.375rem;
            font-weight: 300;
            line-height: 1.4;
            letter-spacing: 1px;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] ol {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
            grid-gap: var(--gap);
            gap: var(--gap);
            margin: 64px 0 0;
            padding: 0;
            list-style: none;
        }
/* the tile and its panel are both items of the grid, so a panel can take a whole row */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li {
            display: contents;
        }
/* the hero's rounded grid squares, scaled up */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button,.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > a {
            display: grid;
            grid-template-rows: minmax(0, 1fr) auto auto;
            aspect-ratio: 1;
            padding: 28px;
            border-radius: 22px;
            color: inherit;
            font: inherit;
            text-align: left;
            -webkit-text-decoration: none;
            text-decoration: none;
        }
@supports not (aspect-ratio: 1 / 1) {
    .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button,.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > a {
        --aspect-ratio: 1;
    }
}
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button {
            border: 0;
            background: var(--tile);
            cursor: pointer;
            transition: background 220ms cubic-bezier(0.16, 1, 0.3, 1), translate 220ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: background var(--duration-base) var(--ease-out), translate var(--duration-base) var(--ease-out);
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button img {
                width: 100%;
                height: 100%;
                min-height: 0;
                padding: 6% 12%;
                -o-object-fit: contain;
                   object-fit: contain;
                transition: scale 400ms cubic-bezier(0.16, 1, 0.3, 1), rotate 400ms cubic-bezier(0.16, 1, 0.3, 1);
                transition: scale var(--duration-slow) var(--ease-out), rotate var(--duration-slow) var(--ease-out);
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button:focus-visible {
                background: var(--tile-hover);
                translate: 0 -4px;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button:hover {
                background: var(--tile-hover);
                translate: 0 -4px;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button:focus-visible img {
                    scale: 1.04;
                    rotate: -2deg;
                }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button:hover img {
                    scale: 1.04;
                    rotate: -2deg;
                }
/* the open tile keeps its light square so dark devices stay visible; the ring
               matches the panel's teal and the notch joins the two */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button[aria-expanded="true"] {
                background: var(--tile-hover);
                box-shadow: inset 0 0 0 4px var(--teal);
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] strong {
            font-size: 1.875rem;
            font-weight: 500;
            line-height: 1.05;
            letter-spacing: 3px;
            text-transform: uppercase;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button span,.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > a span {
            margin-top: 6px;
            font-size: 1.1875rem;
            font-weight: 300;
            line-height: 1.25;
            letter-spacing: 0.5px;
        }
/* the last square is the invitation */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > a {
            grid-template-rows: auto;
            align-content: center;
            justify-items: start;
            gap: 12px;
            border: 3px dashed var(--mint);
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > a span {
                margin: 0;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > a em {
                margin-top: 8px;
                padding: 8px 18px;
                border-radius: 62.5rem;
                border-radius: var(--radius-full);
                background: var(--orange);
                color: var(--on-orange);
                font-size: 0.9375rem;
                font-style: normal;
                letter-spacing: 2px;
                text-transform: uppercase;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > a:focus-visible em {
                background: var(--teal-deep);
                color: #FFFFFF;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > a:hover em {
                background: var(--teal-deep);
                color: #FFFFFF;
            }
/* the open panel: --row and --col come from main.js, which knows where the row ends */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div {
            position: relative;
            grid-column: 1 / -1;
            grid-row: var(--row);
            display: grid;
            grid-template-columns: 5fr 7fr;
            grid-template-rows: auto auto 1fr auto;
            grid-column-gap: 56px;
            -moz-column-gap: 56px;
                 column-gap: 56px;
            padding: 48px 56px;
            border-radius: 22px;
            background: var(--teal);
            color: #FFFFFF;
            animation: labs-drop 400ms cubic-bezier(0.16, 1, 0.3, 1);
            animation: labs-drop var(--duration-slow) var(--ease-out);
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div[hidden] {
                display: none;
            }
/* the notch points back up at the tile that opened it */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div::before {
                content: "";
                position: absolute;
                top: -12px;
                left: calc((var(--col) + 0.5) * (100% + var(--gap)) / var(--cols) - 12px - var(--gap) / 2);
                width: 24px;
                height: 24px;
                border-radius: 3px;
                background: var(--teal);
                rotate: 45deg;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div  > img {
                grid-row: 1 / -1;
                width: 100%;
                aspect-ratio: 4 / 3;
                padding: 10%;
                border-radius: 16px;
                background: #FFFFFF;
                -o-object-fit: contain;
                   object-fit: contain;
            }
@supports not (aspect-ratio: 1 / 1) {
    .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div  > img {
        --aspect-ratio: 4 / 3;
    }
}
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div h3 {
                margin: 0 0 4px;
                font-size: 3rem;
                font-weight: 500;
                letter-spacing: 3px;
                text-transform: uppercase;
            }
/* the partner's credit: their mark in white beside the label, whatever colors it came in */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div p {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 10px 18px;
                margin: 0 0 26px;
                color: var(--lime);
                font-size: 1rem;
                letter-spacing: 3px;
                text-transform: uppercase;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div p img {
                    width: auto;
                    height: 44px;
                    max-width: 220px;
                    -o-object-fit: contain;
                       object-fit: contain;
                    filter: brightness(0) invert(1);
                }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div dl {
                display: grid;
                grid-gap: 4px;
                gap: 4px;
                margin: 0;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div dt {
                color: var(--lime);
                font-size: 0.9375rem;
                font-weight: 600;
                letter-spacing: 4px;
                text-transform: uppercase;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div dt:not(:first-child) {
                    margin-top: 18px;
                }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div dd {
                margin: 0;
                font-size: 1.375rem;
                font-weight: 300;
                line-height: 1.35;
                letter-spacing: 0.5px;
            }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div a {
                grid-column: 2;
                justify-self: start;
                margin-top: 30px;
                padding: 10px 22px;
                border-radius: 62.5rem;
                border-radius: var(--radius-full);
                background: var(--orange);
                color: var(--on-orange);
                font-size: 1.0625rem;
                letter-spacing: 2px;
                -webkit-text-decoration: none;
                text-decoration: none;
                text-transform: uppercase;
            }
/* get in touch: cubes on waves, the diagonal cut at the bottom */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > footer {
        position: relative;
        display: grid;
        justify-items: center;
        margin-top: 100px;
        padding: 200px 1.5rem 300px;
        padding: 200px var(--container-gutter) 300px;
        background: var(--teal) url("/images/labs/contact-wave.webp") no-repeat center / cover;
        color: #FFFFFF;
        text-align: center;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);
    }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer img {
            width: min(820px, 90%);
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer p {
            max-width: 1186px;
            margin: 40px 0 0;
            font-size: 2rem;
            font-weight: 300;
            line-height: 2.9375rem;
            letter-spacing: 5px;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer a {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 80px;
            padding: 0 24px 0 6px;
            height: 54px;
            border-radius: 62.5rem;
            border-radius: var(--radius-full);
            background: var(--orange);
            color: var(--on-orange);
            font-family: "GarantPro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji";
            font-family: var(--font-sans);
            font-size: 0.875rem;
            font-weight: 600;
            letter-spacing: 1px;
            -webkit-text-decoration: none;
            text-decoration: none;
            text-transform: uppercase;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer a::before {
                content: "";
                width: 35px;
                height: 35px;
                background: url("/images/labs/envelope-white.svg") no-repeat center / 21px 16px;
            }
/* the halftone waves: main.js draws them live and marks the section, the
       designer's still stays for calm motion and browsers without WebGL */
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > [data-wave] {
        isolation: isolate;
    }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > [data-wave][data-live] {
            background-image: none;
        }
.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > [data-wave] canvas {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
        }
@media (max-width: 89.999rem) {
        /* below 1440 the statement runs wide enough to reach the tabs, so it clears them */
        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section:nth-of-type(1) {
            --tab: 110px;

            padding-bottom: calc(110px * 2 + 48px);

            padding-bottom: calc(var(--tab) * 2 + 48px);
        }

        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section:nth-of-type(3) {
            grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
            -moz-column-gap: 60px;
                 column-gap: 60px;
        }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) p:nth-of-type(2) {
                grid-column: 2;
                margin-top: 40px;
            }
            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] strong {
                font-size: 1.625rem;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button span,.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > a span {
                font-size: 1.0625rem;
            }
    }
@media (max-width: 67.499rem) {
        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > header {
            --cell: 40px;
            --gap: 8px;
            --board-top: 150px;
            --board-bottom: 64px;

            height: 720px;


            padding-top: 200px;
            background-size: 900px auto;
        }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header p {
                font-size: 1.75rem;
                letter-spacing: 8px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header::after {
                height: 320px;
            }

        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section:nth-of-type(1) {
            --tab: 84px;

            padding-bottom: calc(84px * 2 + 40px);

            padding-top: 380px;

            padding-bottom: calc(var(--tab) * 2 + 40px);
        }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(1) p {
                font-size: 1.875rem;
                line-height: 3rem;
                letter-spacing: 4px;
            }

        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section:nth-of-type(3) {
            grid-template-columns: minmax(0, 1fr);
            padding-top: 120px;
            padding-bottom: 120px;
        }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) h2 {
                margin-bottom: 60px;
            }

                .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) h2 img {
                    width: min(583px, 100%);
                }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) figure {
                padding: 40px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) p {
                font-size: 1.875rem;
                line-height: 2.75rem;
                letter-spacing: 2px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) p:nth-of-type(1) {
                grid-column: 1;
                margin-top: 40px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) p:nth-of-type(2) {
                grid-column: 1;
                margin-top: 40px;
            }

        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section:nth-of-type(4) {
            --hub: 190px;

            padding-top: 100px;

            padding-bottom: 80px;
        }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) h2 {
                font-size: 1.75rem;
                letter-spacing: 8px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4)  > div {
                gap: 48px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) figure:first-child img {
                height: 150px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4)::before {
                width: min(730px, 90%);
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) ul {
                gap: 32px 48px;
            }

        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section[data-lineup] {
            --cols: 3;

            grid-template-columns: 1fr;
            row-gap: 20px;
            padding-top: 120px;
            padding-bottom: 120px;
        }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] h2 {
                font-size: 3rem;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup]  > p {
                justify-self: start;
                font-size: 1.25rem;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] ol {
                margin-top: 40px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button,.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > a {
                padding: 18px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] strong {
                font-size: 1.375rem;
                letter-spacing: 2px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button span,.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > a span {
                font-size: 0.9375rem;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div {
                grid-template-columns: 1fr;
                padding: 32px;
            }

                .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div  > img {
                    grid-row: auto;
                    max-width: 360px;
                    margin-bottom: 24px;
                }

                .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div a {
                    grid-column: auto;
                }

        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > footer {
            padding-top: 120px;
            padding-bottom: 200px;
        }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer p {
                font-size: 1.5rem;
                line-height: 2.25rem;
                letter-spacing: 3px;
            }
    }
@media (max-width: 47.999rem) {
        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > header {
            --cell: 34px;
            --gap: 6px;
            --board-top: 100px;
            --board-bottom: 58px;

            height: 520px;
            padding-top: 140px;
        }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header p {
                font-size: 1.25rem;
                letter-spacing: 5px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header::after {
                height: 220px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-hud] {
                gap: 10px;
                padding: 3px 8px;
            }

                .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-hud] output {
                    font-size: 1.125rem;
                }

                .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header [data-hud] button {
                    width: 30px;
                    height: 30px;
                    font-size: 1.0625rem;
                }

        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section:nth-of-type(1) {
            --tab: 56px;

            padding-bottom: calc(56px * 2 + 32px);

            padding-top: 260px;

            padding-bottom: calc(var(--tab) * 2 + 32px);
        }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(1) p {
                font-size: 1.375rem;
                line-height: 2.125rem;
                letter-spacing: 2px;
            }

        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section:nth-of-type(2) {
            gap: 40px;
            padding-top: 80px;
            padding-bottom: 60px;
        }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(2) img:first-child {
                width: 220px;
            }

        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section:nth-of-type(4) {
            --hub: 120px;
        }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) h2 {
                font-size: 1.25rem;
                letter-spacing: 5px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4)  > div {
                gap: 20px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) figure:first-child img {
                height: 92px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) strong {
                font-size: 1.125rem;
                letter-spacing: 2px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) figcaption span {
                font-size: 0.875rem;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) ul {
                gap: 24px 32px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) li {
                grid-template-rows: 60px auto;
            }

                .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) li img {
                    height: 40px;
                }

                .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) li img[src*="zwave-member"] {
                    height: 60px;
                }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(4) li span {
                font-size: 0.75rem;
                letter-spacing: 2px;
            }

        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section:nth-of-type(3) {
            padding-top: 80px;
            padding-bottom: 80px;
        }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3)::before {
                width: 220px;
                height: 90px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) figure {
                padding: 24px;
            }

                .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) figure::before {
                    background-size: 50px;
                }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(3) p {
                font-size: 1.5rem;
                line-height: 2.125rem;
            }

        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section[data-lineup] {
            --cols: 2;
            --gap: 12px;

            padding-top: 100px;

            padding-bottom: 100px;
        }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] h2 {
                font-size: 2.125rem;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup]  > p {
                font-size: 1.125rem;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] ol {
                margin-top: 32px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button,.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > a {
                padding: 14px;
                border-radius: 14px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] strong {
                font-size: 1.25rem;
                letter-spacing: 2px;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > button span,.labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > a span {
                font-size: 0.9375rem;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > a em {
                padding: 6px 12px;
                font-size: 0.8125rem;
            }

            .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div {
                padding: 24px 20px;
            }

                .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div h3 {
                    font-size: 1.875rem;
                }

                .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div p img {
                    height: 34px;
                }

                .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section[data-lineup] li > div dd {
                    font-size: 1.125rem;
                }

        .labs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > footer p {
            font-size: 1.25rem;
            line-height: 1.875rem;
            letter-spacing: 2px;
        }
    }
/* keyframes cannot nest inside a style rule, so they live out here */
.feature:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;

    width: min(1720px, 100% - 2 * 1.5rem);

    width: min(1720px, 100% - 2 * var(--container-gutter));
    margin: 200px auto 0 auto;
    margin: var(--gap) auto 0 auto;
    padding: 0 0 60px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ECF6EF 0%, #FFFFFF 60%);
    background: linear-gradient(180deg, var(--green-400) 0%, #FFFFFF 60%);
}
.feature:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding-top: 16px;
        border-top: 14px solid #3EB885;
        border-top: 14px solid var(--color-brand);
        font-size: 2.625rem;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0;
    }
.feature:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
        max-width: 860px;
        margin: 8px 0 0;
        font-size: 1.25rem;
        line-height: 1.875rem;
        font-weight: 700;
    }
.feature:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) img {
        width: min(1320px, 100%);
        margin: 48px auto 0;
    }
@media (max-width: 67.499rem) {
.feature:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
}

        .feature:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 2.25rem;
        }

        .feature:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            font-size: 1.1875rem;
            line-height: 1.75rem;
        }
    }
@media (max-width: 47.999rem) {
.feature:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;

        padding-bottom: 40px;
}

        .feature:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 1.75rem;
        }

        .feature:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            font-size: 1.0625rem;
            line-height: 1.5625rem;
        }

        .feature:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) img {
            margin-top: 32px;
        }
    }
.statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    --tint: rgba(123, 166, 170, 0.85);

    /* white type over a photo: a deep wash keeps it legible whatever's behind */
}
[data-contrast="more"]:root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .statement {
        --tint: rgba(28, 52, 56, 0.88);
    }
.statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{

    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 380px minmax(0, 900px);
    grid-template-rows: auto 1fr;
    justify-content: center;
    grid-column-gap: 80px;
    -moz-column-gap: 80px;
         column-gap: 80px;
    /* room between the title and the copy for the portrait to show through */
    grid-row-gap: 160px;
    row-gap: 160px;
    margin-top: var(--gap);
    padding: 120px 1.5rem;
    padding: 120px var(--container-gutter);
    color: #FFFFFF;
}
.statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img:first-child {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        filter: grayscale(1);
    }
.statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: var(--tint);
    }
.statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        grid-column: 1 / -1;
        margin: 0;
        font-size: 2.75rem;
        font-weight: 700;
        line-height: 3.25rem;
        letter-spacing: 0;
        text-align: center;
    }
.statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img:nth-of-type(2) {
        align-self: end;
        width: 100%;
    }
.statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
        align-self: center;
        margin: 0;
        font-size: 2.5rem;
        font-weight: 600;
        line-height: 3.5rem;
        letter-spacing: 0;
    }
@media (max-width: 89.999rem) {
.statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        grid-template-columns: 320px minmax(0, 1fr);
        -moz-column-gap: 60px;
             column-gap: 60px;
        row-gap: 120px;
}

        .statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            font-size: 2.125rem;
            line-height: 3rem;
        }
    }
@media (max-width: 67.499rem) {
.statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;

        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
        padding-top: 100px;
        padding-bottom: 80px;
}

        .statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 2.5rem;
            line-height: 3rem;
        }

        .statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img:nth-of-type(2) {
            width: min(380px, 100%);
            justify-self: center;
        }

        .statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            margin: 0;
            font-size: 2rem;
            line-height: 2.875rem;
        }
    }
@media (max-width: 47.999rem) {
.statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
}

        .statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 1.875rem;
            line-height: 2.25rem;
        }

        .statement:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            font-size: 1.5rem;
            line-height: 2.25rem;
        }
    }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    --card: 420px;
    --plate: 96px;
    --rest: #DFF0E5;
    --lit: #75959B;
    /* the idle cross-fade; hovered, the same fade runs quicker between shots */
    --cycle: 650ms;

    width: min(1720px, 100% - 2 * 1.5rem);

    width: min(1720px, 100% - 2 * var(--container-gutter));
    margin: 200px auto 0 auto;
    margin: var(--gap) auto 0 auto;
}
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 70px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
/* the row stretches every card to its tallest, and the plate takes up the
       difference, so a title on two lines doesn't leave its neighbours short */
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        position: relative;
        display: grid;
        grid-template-rows: auto 1fr;
        container-type: inline-size;
        width: var(--card);
        margin: 0;

        /* the founder sits alone on the first row */
    }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:first-child {
            margin-left: calc(50% - var(--card) / 2);
            margin-right: calc(50% - var(--card) / 2);
        }
/* the burst of shots, stacked; only the shown one is opaque */
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
        position: relative;
        aspect-ratio: 500 / 482;
        margin: 0;
        cursor: pointer;
    }
@supports not (aspect-ratio: 1 / 1) {
    .team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
        --aspect-ratio: 500 / 482;
    }
}
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure img {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -o-object-fit: contain;
               object-fit: contain;
            -o-object-position: bottom center;
               object-position: bottom center;
            opacity: 0;
            filter: blur(10px);
            scale: 1.04;
            /* grows upward into open space, never down into the plate; the
               figure isn't clipped so the blur halo fades out instead of
               meeting a hard edge */
            transform-origin: bottom center;
            transition:
                opacity var(--cycle) cubic-bezier(0.65, 0, 0.35, 1), filter var(--cycle) cubic-bezier(0.65, 0, 0.35, 1), scale var(--cycle) cubic-bezier(0.65, 0, 0.35, 1);
            transition:
                opacity var(--cycle) var(--ease-in-out), filter var(--cycle) var(--ease-in-out), scale var(--cycle) var(--ease-in-out);
        }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure img[data-shown] {
                opacity: 1;
                filter: none;
                scale: 1;
            }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure[data-flip] {
            --cycle: 380ms;
        }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details {
        display: contents;
    }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary {
        position: relative;
        display: grid;
        align-content: start;
        min-height: var(--plate);
        padding: 29px 20px 20px 74px;
        background: var(--rest);
        color: #3EB885;
        color: var(--color-brand-ink);
        list-style: none;
        cursor: pointer;
        transition:
            background 400ms cubic-bezier(0.16, 1, 0.3, 1), color 400ms cubic-bezier(0.16, 1, 0.3, 1);
        transition:
            background var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out);
    }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary::-webkit-details-marker {
            display: none;
        }
/* the +/– disc; the plus is two bars drawn on it rather than a glyph, so it
           sits dead centre and turns true. The upright bar is what leaves. */
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary::before {
            --bar: var(--color-brand);
            --stem: 16px;

            content: "";
            position: absolute;
            left: 13px;
            top: 34px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background:
                linear-gradient(#3EB885, #3EB885) center / 16px 2px no-repeat,
                linear-gradient(#3EB885, #3EB885) center / 2px 16px no-repeat,
                #FFFFFF;
            background:
                linear-gradient(var(--bar), var(--bar)) center / 16px 2px no-repeat,
                linear-gradient(var(--bar), var(--bar)) center / 2px var(--stem) no-repeat,
                #FFFFFF;
            transition:
                rotate 400ms cubic-bezier(0.34, 1.56, 0.64, 1), background-size 400ms cubic-bezier(0.16, 1, 0.3, 1);
            transition:
                rotate var(--duration-slow) var(--ease-back), background-size var(--duration-slow) var(--ease-out);
        }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary b {
            font-size: 1.75rem;
            font-weight: 600;
            line-height: 1.625rem;
        }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary span {
            font-size: 1.125rem;
            font-weight: 400;
            font-style: italic;
            line-height: 1.625rem;
        }
/* no bio yet: the name sits where everyone's does, without the plus */
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details:not(:has( > div)) summary {
        pointer-events: none;
        cursor: default;
    }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details:not(:has( > div)) summary::before {
            content: none;
        }
/* open: the plate goes teal and the bio screens the portrait */
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li[data-open] summary {
        background: var(--lit);
        color: #FFFFFF;
    }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li[data-open] summary::before {
            --bar: var(--lit);
            --stem: 0px;

            rotate: 180deg;
        }
/* as tall as the portrait, so it ends where the plate starts however tall the plate is */
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > div {
        position: absolute;
        left: 0;
        right: 0;
        top: -21px;
        height: calc(100cqi * 482 / 500 + 21px);
        display: flex;
        flex-direction: column;
        padding: 48px 30px 40px;
        background: rgba(62, 184, 133, 0.97);
        color: #FFFFFF;
        opacity: 0;
        translate: 0 40px;
        overflow: hidden;
        transition:
            opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), translate 420ms cubic-bezier(0.16, 1, 0.3, 1);
        transition:
            opacity var(--duration-conceal) var(--ease-out), translate var(--duration-conceal) var(--ease-out);
    }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > div::before {
            content: "";
            flex: none;
            width: 65px;
            margin-left: 4px;
            border-top: 3px solid #FFFFFF;
        }
/* the longest bios scroll inside the screen; the links stay put */
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > div p {
            flex: 1 1 auto;
            min-height: 0;
            margin: 12px 0 24px;
            font-size: 1.125rem;
            font-weight: 500;
            line-height: 1.875rem;
            overflow: auto;
            overscroll-behavior: contain;
        }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > div a {
            position: relative;
            flex: none;
            padding-left: 37px;
            color: #FFFFFF;
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.75rem;
            -webkit-text-decoration: underline;
            text-decoration: underline;
            word-break: break-all;
        }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > div a::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 28px;
                height: 28px;
                background: url("/images/envelope.svg") no-repeat center / 28px;
            }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > div a + a {
                margin-top: 9px;
            }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > div a + a::before {
                    background-image: url("/images/linkedin-teal.svg");
                }
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li[data-open] details > div {
        opacity: 1;
        translate: 0 0;
        transition-duration: 700ms;
        transition-duration: var(--duration-reveal);
    }
@media (max-width: 89.999rem) {
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --card: 440px;
}

        .team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            gap: 40px;
        }
    }
@media (max-width: 67.499rem) {
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
        --card: 100%;
}

        .team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            gap: 60px;
        }

        .team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
            width: min(500px, 100%);
        }

        .team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > div {
            padding: 60px 24px 36px;
        }
    }
@media (max-width: 47.999rem) {
.team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
        --plate: 96px;
}

        .team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary {
            padding: 24px 16px 16px 64px;
        }

            .team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary::before {
                top: 28px;
            }

            .team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary b {
                font-size: 1.625rem;
            }

            .team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary span {
                font-size: 1rem;
            }

        /* the bio still screens the portrait, but the card grows to fit the
           longest one instead of scrolling inside; a page that is already one
           column shouldn't scroll twice. main.js measures the open bio into
           --bio and the portrait stretches to hold it. */
        .team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
            /* pinned, or the aspect ratio would widen the box to match the taller height */
            width: 100%;
            min-height: 0px;
            min-height: var(--bio, 0px);
            transition: min-height 420ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: min-height var(--duration-conceal) var(--ease-out);
        }

        .team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li[data-open] figure {
            transition-duration: 700ms;
            transition-duration: var(--duration-reveal);
        }

        .team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > div {
            height: calc(max(100cqi * 482 / 500, 0px) + 21px);
            height: calc(max(100cqi * 482 / 500, var(--bio, 0px)) + 21px);
            padding: 40px 20px 28px;
        }

            .team:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > div p {
                flex: none;
                margin-bottom: 16px;
                font-size: 1rem;
                line-height: 1.625rem;
                overflow: visible;
            }
    }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    /* how far out of focus a tile starts; the calm variants zero these */
    --undeveloped-blur: 14px;
    --undeveloped-scale: 0.94;
    /* a swapped-in photo takes its time; nobody is waiting on it */
    --swap: calc(var(--duration-reveal) * 2);

    margin: 200px 0 0;

    margin: var(--gap) 0 0;
}
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-flow: dense;
        margin: 0;
        padding: 0;
        list-style: none;
    }
/* each tile develops on its own random delay, seeded from main.js */
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        position: relative;
        grid-column: span 1;
        grid-column: span var(--span, 1);
        aspect-ratio: 1;
        aspect-ratio: var(--span, 1);
        margin: 0;
        opacity: 0;
        filter: blur(var(--undeveloped-blur));
        scale: var(--undeveloped-scale);
        transition:
            opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) calc(0 * 40ms * 1.5), filter 700ms cubic-bezier(0.16, 1, 0.3, 1) calc(0 * 40ms * 1.5), scale 700ms cubic-bezier(0.16, 1, 0.3, 1) calc(0 * 40ms * 1.5);
        transition:
            opacity var(--duration-reveal) var(--ease-out) var(--delay), filter var(--duration-reveal) var(--ease-out) var(--delay), scale var(--duration-reveal) var(--ease-out) var(--delay);
        --delay: calc(var(--seed, 0) * var(--stagger-step) * 1.5);
    }
@supports not (aspect-ratio: 1 / 1) {
    .photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        --aspect-ratio: 1;
    }
}
@supports not (aspect-ratio: 1 / 1) {
    .photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        --aspect-ratio: var(--span, 1);
    }
}
.photo_wall[data-develop]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        opacity: 1;
        filter: none;
        scale: 1;
    }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li figure {
        position: relative;
        height: 100%;
        margin: 0;
        overflow: hidden;
    }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li a {
        display: block;
        height: 100%;
    }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li img,.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li video {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        transition: scale 400ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: scale var(--duration-slow) var(--ease-out);
    }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:focus-within img {
        scale: 1.04;
    }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:focus-within video {
        scale: 1.04;
    }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:hover img,.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:hover video {
        scale: 1.04;
    }
/* a reserve photo lands on top of the old one and develops the way the wall did */
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li figure + figure {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
        filter: blur(var(--undeveloped-blur));
        scale: var(--undeveloped-scale);
        transition:
            opacity var(--swap) cubic-bezier(0.16, 1, 0.3, 1), filter var(--swap) cubic-bezier(0.16, 1, 0.3, 1), scale var(--swap) cubic-bezier(0.16, 1, 0.3, 1);
        transition:
            opacity var(--swap) var(--ease-out), filter var(--swap) var(--ease-out), scale var(--swap) var(--ease-out);
    }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li figure[data-develop] {
        opacity: 1;
        filter: none;
        scale: 1;
    }
/* the label rides up on hover; the lightbox shows the same text */
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li figcaption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 40px 18px 14px;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        color: #FFFFFF;
        font-size: 0.875rem;
        line-height: 1.25rem;
        opacity: 0;
        translate: 0 8px;
        pointer-events: none;
        transition:
            opacity 220ms cubic-bezier(0.16, 1, 0.3, 1), translate 220ms cubic-bezier(0.16, 1, 0.3, 1);
        transition:
            opacity var(--duration-base) var(--ease-out), translate var(--duration-base) var(--ease-out);
    }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:hover figcaption,.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:focus-within figcaption {
        opacity: 1;
        translate: 0 0;
    }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption time {
            font-weight: 700;
        }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption span::before {
            content: " \00B7 ";
        }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption p {
            margin: 4px 0 0;
        }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog {
        width: min(1600px, 100% - 2 * 1.5rem);
        width: min(1600px, 100% - 2 * var(--container-gutter));
        max-height: 100vh;
        margin: auto;
        padding: 0;
        border: 0;
        background: none;
        color: #FFFFFF;
        overflow: visible;
    }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog::backdrop {
            background: rgba(0, 0, 0, 0.88);
        }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[open] {
            display: grid;
            grid-template-columns: 64px 1fr 64px;
            align-items: center;
            grid-column-gap: 20px;
            -moz-column-gap: 20px;
                 column-gap: 20px;
            /* no transform here: the X is fixed to the viewport corner */
            opacity: 1;
            transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: opacity var(--duration-slow) var(--ease-out);
        }
@starting-style {

        .photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[open] {
                opacity: 0;
        }
            }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[open]  > figure {
                scale: 1;
            }
@starting-style {

            .photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[open]  > figure {
                    scale: 0.96;
            }
                }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > figure {
            margin: 0;
            text-align: center;
            transition:
                opacity 220ms cubic-bezier(0.16, 1, 0.3, 1), scale 400ms cubic-bezier(0.16, 1, 0.3, 1);
            transition:
                opacity var(--duration-base) var(--ease-out), scale var(--duration-slow) var(--ease-out);
        }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > figure img,.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > figure video {
                display: block;
                max-width: 100%;
                max-height: 82vh;
                margin: 0 auto;
                -o-object-fit: contain;
                   object-fit: contain;
            }
/* the lightbox holds both and shows the one this photo needs */
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > figure [hidden] {
                display: none;
            }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-loading] > figure {
            opacity: 0;
        }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > figure > figcaption {
            margin-top: 16px;
            font-size: 1.125rem;
            line-height: 1.75rem;
        }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > figure > figcaption p {
                margin: 0;
            }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > figure > figcaption:empty {
                display: none;
            }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog button {
            padding: 0;
            border: 0;
            background: none;
            color: #FFFFFF;
            font-size: 4rem;
            font-weight: 300;
            line-height: 1;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: opacity var(--duration-base) var(--ease-out);
        }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog button:focus-visible {
                opacity: 1;
            }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog button:hover {
                opacity: 1;
            }
/* the X in the corner */
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > form {
            position: fixed;
            top: 24px;
            right: 32px;
        }
.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > form button {
                font-size: 3rem;
            }
@media (max-width: 67.499rem) {

.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
}

        .photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            grid-template-columns: repeat(4, 1fr);
        }

        .photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[open] {
            grid-template-columns: 40px 1fr 40px;
            -moz-column-gap: 8px;
                 column-gap: 8px;
        }

        .photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog button {
            font-size: 3rem;
        }
    }
@media (max-width: 47.999rem) {

.photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;

        /* six rows that fade out, as if the wall carries on below */
}
        .photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            grid-template-columns: repeat(2, 1fr);
            max-height: 300vw;
            overflow: clip;
            -webkit-mask-image: linear-gradient(#000 75%, transparent);
                    mask-image: linear-gradient(#000 75%, transparent);
        }

        .photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li figcaption {
            display: none;
        }

        .photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog {
            width: 100%;
        }

        .photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[open] {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
        }

            .photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[open]  > figure {
                grid-area: 1 / 1;
                padding-left: 12px;
                padding-right: 12px;
            }

            /* arrows sit over the picture on a phone */
            .photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[open]  > button {
                grid-area: 1 / 1;
                justify-self: start;
                z-index: 1;
            }

                .photo_wall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[open] > button[data-step="1"] {
                    justify-self: end;
                }
    }
/* calm: the wall is simply there. Two branches, same values, keep in sync. */
@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .photo_wall {
        --undeveloped-blur: 0px;
        --undeveloped-scale: 1;
    }
}
:root[data-motion="reduced"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .photo_wall {
    --undeveloped-blur: 0px;
    --undeveloped-scale: 1;
}
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    --dot: #289367;
    --ink: #1D2B27;
    --muted: #4E5E59;
    --rule: #D7E6DD;
    --field: #C9D5CF;
    --panel: 1180px;
    --side: 460px;

    width: min(1720px, 100% - 2 * 1.5rem);

    width: min(1720px, 100% - 2 * var(--container-gutter));
    margin: 200px auto 0 auto;
    margin: var(--gap) auto 0 auto;
    padding-bottom: 96px;
    border-radius: 0 0 50px 50px;
    background: linear-gradient(#FFFFFF, #ECF6EF);
    background: linear-gradient(#FFFFFF, var(--green-400));
}
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin: 0;
        padding-top: 16px;
        border-top: 14px solid #3EB885;
        border-top: 14px solid var(--color-brand);
        font-size: 2.625rem;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: 0;
    }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p {
        max-width: 966px;
        margin: 12px 0 0;
        font-size: 1.25rem;
        line-height: 1.875rem;
        font-weight: 500;
    }
/* four options, one card each, the whole card is the button */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
        counter-reset: mode;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-gap: 24px;
        gap: 24px;
        margin: 64px 0 0;
        padding: 0 48px;
        list-style: none;
    }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol li {
            counter-increment: mode;
            position: relative;
            display: flex;
            margin: 0;

            /* the letter, tucked in the corner */
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol li::after {
                content: counter(mode, upper-alpha);
                position: absolute;
                top: 28px;
                right: 28px;
                display: grid;
                align-items: center;
                justify-items: center;
                place-items: center;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background: #3EB885;
                background: var(--color-brand);
                color: #FFFFFF;
                color: var(--color-on-brand);
                font-size: 0.8125rem;
                font-weight: 700;
                pointer-events: none;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button {
            display: flex;
            flex-direction: column;
            align-items: start;
            width: 100%;
            margin: 0;
            padding: 32px 32px 28px;
            border: 1px solid var(--rule);
            border-radius: 24px;
            background: #FFFFFF;
            color: var(--ink);
            text-align: left;
            cursor: pointer;
            box-shadow: 0 1px 2px rgba(29, 43, 39, 0.04);
            transition: translate 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: translate var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);

            /* the icon in its green dot */
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button::before {
                content: "";
                width: 56px;
                height: 56px;
                margin-bottom: 28px;
                border-radius: 50%;
                background: #3EB885 var(--icon) no-repeat center / 28px;
                background: var(--color-brand) var(--icon) no-repeat center / 28px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button strong {
                font-size: 1.5rem;
                font-weight: 600;
                line-height: 1.2;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button span:first-of-type {
                margin-top: 10px;
                margin-bottom: 28px;
                color: var(--muted);
                font-size: 1.0625rem;
                font-weight: 500;
                line-height: 1.625rem;
            }
/* the action, pinned to the bottom so all four line up */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button span:last-of-type {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                margin-top: auto;
                color: var(--dot);
                font-size: 1rem;
                font-weight: 600;
                letter-spacing: 0.5px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button span:last-of-type::after {
                    content: "";
                    width: 16px;
                    height: 16px;
                    background: currentColor;
                    -webkit-mask: url("/images/next-steps/glyph-arrow.svg") no-repeat center / contain;
                            mask: url("/images/next-steps/glyph-arrow.svg") no-repeat center / contain;
                    rotate: 180deg;
                    transition: translate 220ms cubic-bezier(0.16, 1, 0.3, 1);
                    transition: translate var(--duration-base) var(--ease-out);
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button:focus-visible {
                border-color: #3EB885;
                border-color: var(--color-brand);
                box-shadow: 0 18px 40px -18px rgba(40, 147, 103, 0.45);
                translate: 0 -4px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button:hover {
                border-color: #3EB885;
                border-color: var(--color-brand);
                box-shadow: 0 18px 40px -18px rgba(40, 147, 103, 0.45);
                translate: 0 -4px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button:hover span:last-of-type::after {
                    translate: 4px 0;
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button:focus-visible span:last-of-type::after {
                    translate: 4px 0;
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button:focus-visible {
                outline: 3px solid #3EB885;
                outline: 3px solid var(--color-brand);
                outline-offset: 3px;
            }
/* every dialog is Jeff's green panel: copy on the green, the action on a
       white card inset in it */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog {
        --rise: 18px;
        --settle: 0.98;

        /* the layout lives here, not on [open]: closing drops [open] at the start
           of the fade, and anything hung on it would reflow mid-exit */
        grid-template-columns: var(--side) minmax(0, 1fr);
        width: min(var(--panel), 100% - 2 * 1.5rem);
        width: min(var(--panel), 100% - 2 * var(--container-gutter));
        max-width: none;
        max-height: calc(100dvh - 48px);
        /* the reset zeroes every margin, which is what centres a modal */
        margin: auto;
        padding: 0;
        border: 0;
        border-radius: 44px;
        background: #3EB885;
        background: var(--color-brand);
        color: var(--ink);
        /* it scrolls when it must (a short window, the booking details appearing),
           but never paints a bar: a password manager's menu dropping in under a
           focused field was flashing one up and narrowing the panel */
        overflow-x: hidden;
        overflow-y: auto;
        overflow: hidden auto;
        scrollbar-width: none;
        overscroll-behavior: contain;
        box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.45);

        /* closing: quick and out of the way */
        opacity: 0;
        translate: 0 calc(18px / 2);
        translate: 0 calc(var(--rise) / 2);
        scale: 0.98;
        scale: var(--settle);
        transition:
            opacity 220ms cubic-bezier(0.65, 0, 0.35, 1), translate 220ms cubic-bezier(0.65, 0, 0.35, 1), scale 220ms cubic-bezier(0.65, 0, 0.35, 1), display 220ms allow-discrete, overlay 220ms allow-discrete;
        transition:
            opacity var(--duration-base) var(--ease-in-out), translate var(--duration-base) var(--ease-in-out), scale var(--duration-base) var(--ease-in-out), display var(--duration-base) allow-discrete, overlay var(--duration-base) allow-discrete;
    }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog::backdrop {
            background: rgba(18, 32, 27, 0.6);
            -webkit-backdrop-filter: blur(3px);
                    backdrop-filter: blur(3px);
            opacity: 0;
            transition:
                opacity 220ms cubic-bezier(0.65, 0, 0.35, 1), display 220ms allow-discrete, overlay 220ms allow-discrete;
            transition:
                opacity var(--duration-base) var(--ease-in-out), display var(--duration-base) allow-discrete, overlay var(--duration-base) allow-discrete;
        }
/* opening: panel and backdrop arrive together, the panel rising into place */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[open] {
            display: grid;
            opacity: 1;
            translate: 0 0;
            scale: 1;
            transition:
                opacity 400ms cubic-bezier(0.16, 1, 0.3, 1), translate 400ms cubic-bezier(0.16, 1, 0.3, 1), scale 400ms cubic-bezier(0.16, 1, 0.3, 1), display 400ms allow-discrete, overlay 400ms allow-discrete;
            transition:
                opacity var(--duration-slow) var(--ease-out), translate var(--duration-slow) var(--ease-out), scale var(--duration-slow) var(--ease-out), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
        }
@starting-style {
        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[open] {
                opacity: 0;
                translate: 0 var(--rise);
                scale: var(--settle);
        }
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[open]::backdrop {
                opacity: 1;
                transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
                transition: opacity var(--duration-slow) var(--ease-out);
            }
@starting-style {

            .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[open]::backdrop {
                    opacity: 0;
            }
                }
/* the close button, a round X in the corner */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > form:first-child {
            position: absolute;
            top: 30px;
            right: 30px;
            z-index: 1;
            margin: 0;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > form:first-child button {
                position: relative;
                display: block;
                width: 44px;
                height: 44px;
                padding: 0;
                border: 0;
                border-radius: 50%;
                background: #ECF6EF;
                background: var(--green-400);
                color: var(--ink);
                cursor: pointer;
                transition: background-color 120ms cubic-bezier(0.16, 1, 0.3, 1);
                transition: background-color var(--duration-fast) var(--ease-out);
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > form:first-child button::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    margin: auto;
                    width: 18px;
                    height: 2px;
                    border-radius: 1px;
                    background: currentColor;
                    rotate: 45deg;
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > form:first-child button::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    margin: auto;
                    width: 18px;
                    height: 2px;
                    border-radius: 1px;
                    background: currentColor;
                    rotate: 45deg;
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > form:first-child button::after {
                    rotate: -45deg;
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > form:first-child button:hover {
                    background: var(--rule);
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > form:first-child button:focus-visible {
                    outline: 3px solid #3EB885;
                    outline: 3px solid var(--color-brand);
                    outline-offset: 2px;
                }
/* the green side */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > div:first-of-type {
            display: flex;
            flex-direction: column;
            padding: 60px 44px 44px 52px;
            color: #0B1F17;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > div:first-of-type h3 {
                margin: 0;
                color: #FFFFFF;
                font-size: 2.125rem;
                font-weight: 600;
                line-height: 1.12;
                letter-spacing: 0;

                /* the bar the section headings wear, in white */
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > div:first-of-type h3::before {
                    content: "";
                    display: block;
                    width: 96px;
                    height: 8px;
                    margin-bottom: 18px;
                    background: #FFFFFF;
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > div:first-of-type p {
                margin: 16px 0 0;
                font-size: 1.0625rem;
                line-height: 1.6875rem;
                font-weight: 500;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > div:first-of-type a {
                color: #FFFFFF;
                font-size: 1.25rem;
                font-weight: 600;
                -webkit-text-decoration: none;
                text-decoration: none;
            }
/* photos settle at the bottom of the panel */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > div:first-of-type figure {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 12px;
                gap: 12px;
                margin: auto 0 0;
                padding-top: 32px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > div:first-of-type figure img {
                    width: 100%;
                    aspect-ratio: 4 / 3;
                    border-radius: 12px;
                    -o-object-fit: cover;
                       object-fit: cover;
                }
@supports not (aspect-ratio: 1 / 1) {
    .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > div:first-of-type figure img {
        --aspect-ratio: 4 / 3;
    }
}
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > div:first-of-type figure img:only-child {
                    grid-column: 1 / -1;
                    aspect-ratio: 3 / 2;
                }
@supports not (aspect-ratio: 1 / 1) {
    .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > div:first-of-type figure img:only-child {
        --aspect-ratio: 3 / 2;
    }
}
/* the white side, inset in the green like a card on the panel. It's
           "whatever follows the copy", so a password manager's injected node
           can't knock it out the way :last-child did */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > div ~ div,.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > div ~ form {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 20px;
            margin: 14px 14px 14px 0;
            padding: 52px 52px 44px;
            border-radius: 30px;
            background: #FFFFFF;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog h4 {
            margin: 0;
            padding-right: 56px;
            font-size: 1.625rem;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: 0;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog h4 + p {
            margin: -8px 0 0;
            color: var(--muted);
            font-size: 1.0625rem;
            line-height: 1.625rem;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog label {
            display: grid;
            grid-gap: 8px;
            gap: 8px;
            align-self: stretch;
            margin: 0;
            font-size: 1rem;
            font-weight: 700;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog input:not([type="radio"]),.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog textarea {
            width: 100%;
            min-height: 50px;
            margin: 0;
            padding: 12px 16px;
            border: 1px solid var(--field);
            border-radius: 8px;
            background: #FFFFFF;
            color: var(--ink);
            font-size: 1.0625rem;
            font-weight: 500;
            transition: border-color 120ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 120ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog input:not([type="radio"])::-moz-placeholder {
                color: #9AA8A3;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog input:not([type="radio"])::placeholder {
                color: #9AA8A3;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog textarea:not(.does-not-exist)::-moz-placeholder {
                color: #9AA8A3;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog textarea:not(.does-not-exist)::placeholder {
                color: #9AA8A3;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog input:not([type="radio"]):hover,.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog textarea:not(.does-not-exist):hover {
                border-color: #A9BAB3;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog input:not([type="radio"]):focus-visible {
                border-color: #3EB885;
                border-color: var(--color-brand);
                outline: 0;
                box-shadow: 0 0 0 4px rgba(62, 184, 133, 0.22);
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog textarea:not(.does-not-exist):focus-visible {
                border-color: #3EB885;
                border-color: var(--color-brand);
                outline: 0;
                box-shadow: 0 0 0 4px rgba(62, 184, 133, 0.22);
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog textarea {
            min-height: 140px;
            resize: vertical;
        }
/* a choice as chips, the same language as the booking times: who's reaching
           out, asked as a question so the answer reads as "me" */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog fieldset {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            grid-gap: 8px;
            gap: 8px;
            align-self: stretch;
            margin: 0;
            padding: 0;
            border: 0;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog fieldset legend {
                margin-bottom: 10px;
                padding: 0;
                font-size: 1rem;
                font-weight: 700;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog fieldset label {
                display: block;
                position: relative;
                padding: 12px 14px;
                border: 1px solid var(--rule);
                border-radius: 62.5rem;
                border-radius: var(--radius-full);
                background: #FFFFFF;
                color: var(--ink);
                font-size: 1rem;
                font-weight: 600;
                text-align: center;
                cursor: pointer;
                transition: background-color 120ms cubic-bezier(0.16, 1, 0.3, 1), border-color 120ms cubic-bezier(0.16, 1, 0.3, 1), color 120ms cubic-bezier(0.16, 1, 0.3, 1);
                transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog fieldset label:hover {
                    border-color: #3EB885;
                    border-color: var(--color-brand);
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog fieldset label:has(:checked) {
                    border-color: #3EB885;
                    border-color: var(--color-brand);
                    background: #3EB885;
                    background: var(--color-brand);
                    color: #FFFFFF;
                    color: var(--color-on-brand);
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog fieldset label:has(:focus-visible) {
                    outline: 3px solid #3EB885;
                    outline: 3px solid var(--color-brand);
                    outline-offset: 2px;
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog fieldset input {
                position: absolute;
                opacity: 0;
                pointer-events: none;
            }
/* the one primary action per dialog */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog form:not(:first-child) > button {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-height: 56px;
            margin: 8px 0 0;
            padding: 0 28px 0 10px;
            border: 0;
            border-radius: 62.5rem;
            border-radius: var(--radius-full);
            background: #3EB885;
            background: var(--color-brand);
            color: #FFFFFF;
            color: var(--color-on-brand);
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 1px;
            -webkit-text-decoration: none;
            text-decoration: none;
            text-transform: uppercase;
            cursor: pointer;
            transition: background-color 120ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: background-color var(--duration-fast) var(--ease-out);
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog form > button[type="submit"],.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog form > a[style],.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog div > button[type="submit"],.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog div > a[style] {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-height: 56px;
            margin: 8px 0 0;
            padding: 0 28px 0 10px;
            border: 0;
            border-radius: 62.5rem;
            border-radius: var(--radius-full);
            background: #3EB885;
            background: var(--color-brand);
            color: #FFFFFF;
            color: var(--color-on-brand);
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 1px;
            -webkit-text-decoration: none;
            text-decoration: none;
            text-transform: uppercase;
            cursor: pointer;
            transition: background-color 120ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: background-color var(--duration-fast) var(--ease-out);
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog form > button[type="submit"]::before {
                content: "";
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: var(--dot) var(--icon) no-repeat center / 20px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog form > a[style]::before {
                content: "";
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: var(--dot) var(--icon) no-repeat center / 20px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog div > button[type="submit"]::before {
                content: "";
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: var(--dot) var(--icon) no-repeat center / 20px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog div > a[style]::before {
                content: "";
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: var(--dot) var(--icon) no-repeat center / 20px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog form:not(:first-child) > button::before {
                content: "";
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: var(--dot) var(--icon) no-repeat center / 20px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog form:not(:first-child) > button:hover {
                background: #339D71;
                background: var(--color-brand-hover);
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog form > button[type="submit"]:hover,.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog form > a[style]:hover,.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog div > button[type="submit"]:hover,.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog div > a[style]:hover {
                background: #339D71;
                background: var(--color-brand-hover);
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog form > button[type="submit"]:focus-visible {
                outline: 3px solid #3EB885;
                outline: 3px solid var(--color-brand);
                outline-offset: 3px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog form > a[style]:focus-visible {
                outline: 3px solid #3EB885;
                outline: 3px solid var(--color-brand);
                outline-offset: 3px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog div > button[type="submit"]:focus-visible {
                outline: 3px solid #3EB885;
                outline: 3px solid var(--color-brand);
                outline-offset: 3px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog div > a[style]:focus-visible {
                outline: 3px solid #3EB885;
                outline: 3px solid var(--color-brand);
                outline-offset: 3px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog form:not(:first-child) > button:focus-visible {
                outline: 3px solid #3EB885;
                outline: 3px solid var(--color-brand);
                outline-offset: 3px;
            }
/* talk: the number is the whole point, so it leads */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="talk"] > div ~ div {
        justify-content: center;
    }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="talk"] > div ~ div  > a:first-of-type {
            margin-top: -4px;
            color: var(--ink);
            font-size: 2.875rem;
            font-weight: 600;
            line-height: 1;
            -webkit-text-decoration: none;
            text-decoration: none;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="talk"] > div ~ div  > p {
            margin: 0;
            color: var(--muted);
            font-size: 1.0625rem;
            line-height: 1.625rem;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="talk"] > div ~ div > p a,.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="talk"] > div ~ div > p button {
                padding: 0;
                border: 0;
                background: none;
                color: var(--dot);
                font: inherit;
                font-weight: 600;
                -webkit-text-decoration: underline;
                text-decoration: underline;
                text-underline-offset: 3px;
                cursor: pointer;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="talk"] > div ~ div  > p:last-child {
            align-self: stretch;
            margin-top: 16px;
            padding-top: 24px;
            border-top: 1px solid var(--rule);
        }
/* schedule: our own picker over Calendly's open times. Days, then times, then
       the details, which only appear once there's a time to book */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] {
        --side: 420px;
    }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] form:not(:first-child) {
            gap: 18px;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset {
            display: flex;
            gap: 10px;

            /* "Pick a time" already names both rows; the legends stay for screen
               readers, and a visible one would be clipped by the scrolling day row */

        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset legend {
                position: absolute;
                width: 1px;
                height: 1px;
                margin: 0;
                overflow: hidden;
                clip-path: inset(50%);
                white-space: nowrap;
            }
/* the days scroll sideways, a card each, with an arrow pinned to either end.
           A fieldset won't shrink below its content unless told */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:first-of-type {
            align-self: stretch;
            min-width: 0;
            overflow-x: auto;
            padding-top: 4px;
            padding-bottom: 6px;
            scroll-snap-type: x mandatory;
            scroll-padding-inline: 50px;
            scrollbar-width: none;

            /* the arrows sit over the row's ends, taking no room of their own */
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:first-of-type button {
                position: sticky;
                z-index: 1;
                flex: none;
                align-self: center;
                width: 40px;
                height: 40px;
                padding: 0;
                border: 1px solid var(--rule);
                border-radius: 50%;
                background: #FFFFFF;
                color: var(--ink);
                box-shadow: 0 4px 14px rgba(29, 43, 39, 0.18);
                cursor: pointer;
                transition: opacity 120ms cubic-bezier(0.16, 1, 0.3, 1), color 120ms cubic-bezier(0.16, 1, 0.3, 1), border-color 120ms cubic-bezier(0.16, 1, 0.3, 1);
                transition: opacity var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:first-of-type button::before {
                    content: "";
                    display: block;
                    width: 16px;
                    height: 16px;
                    margin: auto;
                    background: currentColor;
                    -webkit-mask: url("/images/next-steps/glyph-arrow.svg") no-repeat center / contain;
                            mask: url("/images/next-steps/glyph-arrow.svg") no-repeat center / contain;
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:first-of-type button:hover {
                    border-color: #3EB885;
                    border-color: var(--color-brand);
                    color: var(--dot);
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:first-of-type button:focus-visible {
                    outline: 3px solid #3EB885;
                    outline: 3px solid var(--color-brand);
                    outline-offset: 2px;
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:first-of-type button:disabled {
                    opacity: 0;
                    pointer-events: none;
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:first-of-type button:first-of-type {
                left: 0;
                margin-right: -50px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:first-of-type button:last-of-type {
                right: 0;
                margin-left: -50px;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:first-of-type button:last-of-type::before {
                    rotate: 180deg;
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:first-of-type label {
                display: grid;
                flex: none;
                justify-items: center;
                grid-gap: 2px;
                gap: 2px;
                width: 76px;
                padding-top: 12px;
                padding-bottom: 10px;
                border-radius: 18px;
                scroll-snap-align: start;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:first-of-type label span:first-of-type {
                    font-size: 0.8125rem;
                    font-weight: 600;
                    letter-spacing: 0.5px;
                    text-transform: uppercase;
                    opacity: 0.75;
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:first-of-type label span:last-of-type {
                    font-size: 0.8125rem;
                    font-weight: 600;
                    letter-spacing: 0.5px;
                    text-transform: uppercase;
                    opacity: 0.75;
                }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:first-of-type label span:nth-of-type(2) {
                    font-size: 1.625rem;
                    font-weight: 600;
                    line-height: 1.1;
                }
/* the times sit in an even grid */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:nth-of-type(2) {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] fieldset:nth-of-type(2) label {
                padding: 12px 10px;
                border-radius: 62.5rem;
                border-radius: var(--radius-full);
                font-size: 1rem;
                font-weight: 600;
                text-align: center;
            }
/* nothing to fill in until there's a time to book */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] form:not(:has([name="start"]:checked)) > label:not(.does-not-exist) {
            display: none;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] form:not(:has([name="start"]:checked)) > button[type="submit"] {
            display: none;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] [role="status"] {
            margin: 0;
            font-size: 1.0625rem;
            font-weight: 600;
            line-height: 1.625rem;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] [role="status"]:empty {
                display: none;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] [role="status"] a {
                color: var(--dot);
            }
/* waiting on Calendly: ghost days where the real ones will land */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] form[data-state="loading"] fieldset:first-of-type {
                height: 104px;
                background: repeating-linear-gradient(90deg, #ECF6EF 0,#ECF6EF 76px, transparent 76px, transparent 86px) no-repeat 0 32px / 100% 72px;
                background: repeating-linear-gradient(90deg, var(--green-400) 0,var(--green-400) 76px, transparent 76px, transparent 86px) no-repeat 0 32px / 100% 72px;
                background: repeating-linear-gradient(90deg, #ECF6EF 0 76px, transparent 76px 86px) no-repeat 0 32px / 100% 72px;
                animation: booking_wait 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
                animation: booking_wait 1.2s var(--ease-in-out) infinite alternate;
            }

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) {
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] form[data-state="loading"] fieldset:first-of-type {
                background: repeating-linear-gradient(90deg, var(--green-400) 0 76px, transparent 76px 86px) no-repeat 0 32px / 100% 72px;
            }
}
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] form[data-state="loading"] fieldset:nth-of-type(2) {
                display: none;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] form[data-state="empty"] fieldset {
            display: none;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] form[data-state="booking"] button[type="submit"] {
            opacity: 0.6;
            pointer-events: none;
        }
/* booked: the confirmation is all that's left */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] form[data-state="booked"] {
            justify-content: center;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] form[data-state="booked"]  > :not([role="status"]) {
                display: none;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] form[data-state="booked"] [role="status"] {
                display: grid;
                justify-items: start;
                grid-gap: 20px;
                gap: 20px;
                font-size: 1.375rem;
                line-height: 2rem;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="schedule"] form[data-state="booked"] [role="status"]::before {
                    content: "";
                    width: 72px;
                    height: 72px;
                    background: url("/images/hi-circle.svg") no-repeat center / contain;
                }
/* the received state is one small centred card on the green */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="sent"] {
        --panel: 560px;

        grid-template-columns: 1fr;
        background: #3EB885;
        background: var(--color-brand);
    }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="sent"]  > div:first-of-type {
            align-items: center;
            padding: 64px 48px 48px;
            text-align: center;
        }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="sent"] > div:first-of-type::before {
                content: "";
                width: 84px;
                height: 84px;
                margin-bottom: 24px;
                background: url("/images/hi-circle.svg") no-repeat center / contain;
            }
/* the badge already heads this one */
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="sent"] > div:first-of-type h3::before {
                display: none;
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="sent"] > div:first-of-type form button {
                margin-top: 32px;
                background: #FFFFFF;
                color: var(--ink);
            }
.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="sent"] > div:first-of-type form button:hover {
                    background: #ECF6EF;
                    background: var(--green-400);
                }
@media (max-width: 89.999rem) {
        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
            padding: 0;
        }

        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button {
            padding: 28px 24px 24px;
        }

            .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button strong {
                font-size: 1.3125rem;
            }
    }
@media (max-width: 67.499rem) {

.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;

        padding-bottom: 72px;
        border-radius: 0 0 32px 32px;
}

        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
            font-size: 2.25rem;
        }

        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p {
            font-size: 1.1875rem;
            line-height: 1.75rem;
        }

        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-top: 48px;
        }

        /* stacked: the green side becomes a header, its photos under the copy */
        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog {
            grid-template-columns: minmax(0, 1fr);
        }

            .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > div:first-of-type {
                padding: 48px 40px 36px;
            }

                .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > div:first-of-type h3 {
                    padding-right: 56px;
                    font-size: 1.875rem;
                }

                .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > div:first-of-type figure {
                    padding-top: 24px;
                }

            .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > form:first-child button {
                background: rgba(255, 255, 255, 0.85);
            }

            .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > div ~ div,.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > div ~ form {
                margin: 0 12px 12px;
                padding: 36px;
            }

    }
@media (max-width: 47.999rem) {

.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;

        width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-left: var(--container-gutter);
        padding-right: var(--container-gutter);
        border-radius: 0;
}

        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > h2 {
            font-size: 1.75rem;
        }

        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p {
            font-size: 1.0625rem;
            line-height: 1.625rem;
        }

        /* a list: icon on the left, words on the right */
        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
            grid-template-columns: minmax(0, 1fr);
            gap: 12px;
            margin-top: 32px;
        }

            .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol li::after {
                display: none;
            }

            .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button {
                display: grid;
                grid-template-columns: 48px minmax(0, 1fr);
                grid-column-gap: 16px;
                -moz-column-gap: 16px;
                     column-gap: 16px;
                padding: 20px;
                border-radius: 18px;
            }

                .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button::before {
                    grid-row: 1 / span 3;
                    width: 48px;
                    height: 48px;
                    margin: 0;
                    background-size: 24px;
                }

                .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button strong {
                    font-size: 1.1875rem;
                }

                .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol button span:first-of-type {
                    margin-top: 4px;
                    margin-bottom: 12px;
                    font-size: 0.9375rem;
                    line-height: 1.375rem;
                }

        /* a phone gets the whole screen */
        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog {
            width: 100%;
            max-height: 100dvh;
            min-height: 100dvh;
            border-radius: 0;
            /* the white card takes whatever the header leaves, down to the bottom */
            grid-template-rows: auto 1fr;
        }

            .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > form:first-child {
                top: 12px;
                right: 12px;
            }

            .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > div:first-of-type {
                padding: 56px 1.5rem 28px;
                padding: 56px var(--container-gutter) 28px;
            }

                .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > div:first-of-type h3 {
                    font-size: 1.625rem;
                }

                .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog > div:first-of-type p {
                    font-size: 1rem;
                    line-height: 1.5625rem;
                }

            .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > div ~ div,.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog  > div ~ form {
                margin: 0;
                padding: 28px 1.5rem 40px;
                padding: 28px var(--container-gutter) 40px;
                border-radius: 24px 24px 0 0;
            }

            .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog form > button[type="submit"],.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog form > a[style],.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog div > button[type="submit"],.contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog div > a[style] {
                align-self: stretch;
                justify-content: center;
            }

        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="talk"] > div ~ div > a:first-of-type {
            font-size: 2.25rem;
        }

        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog fieldset label {
            padding-left: 8px;
            padding-right: 8px;
            font-size: 0.9375rem;
        }

        /* three choices don't fit across a phone without wrapping inside the pills */
        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="message"] fieldset {
            grid-template-columns: minmax(0, 1fr);
        }

        .contact_modes:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) dialog[data-mode="sent"] {
            grid-template-rows: none;
            align-content: center;
        }
    }
/* calm motion: the panels fade in place instead of rising */
@media (prefers-reduced-motion: reduce) {
        :root:not([data-motion="full"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .contact_modes dialog {
            --rise: 0px;
            --settle: 1;
        }
    }
[data-motion="reduced"]:root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .contact_modes dialog {
        --rise: 0px;
        --settle: 1;
    }
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 60px;
    --cell: 415px;

    display: grid;
    grid-template-columns: repeat(4, 415px);
    grid-template-columns: repeat(4, var(--cell));
    grid-auto-rows: 415px;
    grid-auto-rows: var(--cell);
    grid-auto-flow: dense;
    justify-content: center;
    grid-gap: 20px;
    gap: 20px;
    width: min(1720px, 100% - 2 * 1.5rem);
    width: min(1720px, 100% - 2 * var(--container-gutter));
    margin: 60px auto 0 auto;
    margin: var(--gap) auto 0 auto;
    padding: 0;
    list-style: none;
}
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        grid-column: span 1;
        grid-column: span var(--w, 1);
        grid-row: span 1;
        grid-row: span var(--h, 1);
        margin: 0;
        overflow: hidden;
        border-radius: 0;
        border-radius: var(--radius, 0);
        background: #EDEBE2 url("/images/paper-texture.jpg") center / cover;
    }
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a {
        position: relative;
        display: block;
        height: 100%;
        color: #FFFFFF;
        -webkit-text-decoration: none;
        text-decoration: none;
    }
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
            /* portraits; keep the face when a tile crops them square */
            -o-object-position: 50% 15%;
               object-position: 50% 15%;
            mix-blend-mode: multiply;
            transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: opacity var(--duration-slow) var(--ease-out);
        }
/* the colour photo is the same frame as the cutout, so the person holds still while the room comes in */
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a img + img {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0;
            mix-blend-mode: normal;
            transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: opacity var(--duration-slow) var(--ease-out);
        }
/* hover: the headline and a read-on pill, straight on the photo */
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a span {
            position: absolute;
            left: 0;
            right: 0;
            opacity: 0;
            text-align: center;
            transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: opacity var(--duration-base) var(--ease-out);
        }
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a span:first-of-type {
            top: 58%;
            padding-left: 24px;
            padding-right: 24px;
            font-size: 1.875rem;
            font-weight: 700;
            line-height: 1.1;
            /* enough to read on a busy photo without laying a shade over it */
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 18px rgba(0, 0, 0, 0.45);
        }
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a span:last-of-type {
            top: 72%;
            width: -moz-max-content;
            width: max-content;
            margin-left: auto;
            margin-right: auto;
            padding: 0 24px 0 8px;
            height: 54px;
            border-radius: 62.5rem;
            border-radius: var(--radius-full);
            background: #576D6B;
            background: var(--nav-panel-bg);
            font-size: 0.875rem;
            letter-spacing: 2px;
            line-height: 3.375rem;
            text-transform: uppercase;
        }
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a span:last-of-type::before {
                content: "";
                display: inline-block;
                width: 35px;
                height: 35px;
                margin: 0 10px -10px 0;
                background: url("/images/read-on.svg") no-repeat center / contain;
            }
/* the cutout steps out as the photo comes in, so the middle of the fade
           isn't the two stacked into something muddy */
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a:focus-visible img {
                opacity: 0;
            }
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a:hover img {
                opacity: 0;
            }
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a:focus-visible img + img {
                opacity: 1;
            }
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a:focus-visible span {
                opacity: 1;
            }
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a:hover img + img,.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a:hover span {
                opacity: 1;
            }
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a span {
            z-index: 1;
        }
@media (max-width: 89.999rem) {
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --cell: minmax(0, 1fr);

        grid-auto-rows: calc((100vw - 2 * 1.5rem - 60px) / 4);

        grid-auto-rows: calc((100vw - 2 * var(--container-gutter) - 60px) / 4);

        grid-auto-rows: calc((100vi - 2 * 1.5rem - 60px) / 4);
}

@supports (width: 1vi) {
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{

        grid-auto-rows: calc((100vi - 2 * var(--container-gutter) - 60px) / 4);
}
}
    }
@media (max-width: 67.499rem) {
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: calc((100vw - 2 * 1.5rem - 20px) / 2);
        grid-auto-rows: calc((100vw - 2 * var(--container-gutter) - 20px) / 2);
        grid-auto-rows: calc((100vi - 2 * 1.5rem - 20px) / 2);
}

@supports (width: 1vi) {
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        grid-auto-rows: calc((100vi - 2 * var(--container-gutter) - 20px) / 2);
}
}

        .mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
            grid-column: span min(1, 2);
            grid-column: span min(var(--w, 1), 2);
            grid-row: span 1;
        }

        .mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a span:first-of-type {
            font-size: 1.375rem;
        }
    }
@media (max-width: 47.999rem) {
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 40px;

        gap: 12px;
        grid-auto-rows: calc((100vw - 2 * 1.5rem - 12px) / 2);
        grid-auto-rows: calc((100vw - 2 * var(--container-gutter) - 12px) / 2);
        grid-auto-rows: calc((100vi - 2 * 1.5rem - 12px) / 2);
}

@supports (width: 1vi) {
.mason:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        grid-auto-rows: calc((100vi - 2 * var(--container-gutter) - 12px) / 2);
}
}
    }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --tan: #F1EFE6;
    --gap: 120px;
    --photo: 560px;
    --inset: max(var(--container-gutter), (100% - 1720px) / 2);

    display: grid;
    grid-template-columns: minmax(0, 1fr) 560px;
    grid-template-columns: minmax(0, 1fr) var(--photo);
    grid-template-areas:
        "back  back"
        "title photo"
        "story photo"
        "tools photo"
        "more  more";
    grid-template-rows: auto auto auto 1fr auto;
    grid-column-gap: 120px;
    -moz-column-gap: 120px;
         column-gap: 120px;
    margin-top: calc(-1 * (30px + max(16px, min(2.5vw, 40px))));
    margin-top: calc(-1 * (30px + max(16px, min(2.5vw, 40px))));
    margin-top: calc(-1 * (var(--header-drop) + var(--header-curve)));
    padding: 60px max(1.5rem, (100% - 1720px) / 2) 120px;
    padding: 60px var(--inset) var(--gap);
    background: #F1EFE6 url("/images/paper-texture.jpg") center top / 1920px auto;
    background: var(--tan) url("/images/paper-texture.jpg") center top / 1920px auto;
    color: #000000;
}
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > nav:first-child {
        grid-area: back;
    }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > nav:first-child a {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 12px 22px 12px 18px;
            border: 1.5px solid #000000;
            border-radius: 62.5rem;
            border-radius: var(--radius-full);
            color: #000000;
            font-size: 0.9375rem;
            font-weight: 600;
            letter-spacing: 1px;
            -webkit-text-decoration: none;
            text-decoration: none;
            text-transform: uppercase;
            transition: background-color 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms cubic-bezier(0.16, 1, 0.3, 1), color 220ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
        }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > nav:first-child a::before {
                content: "";
                width: 22px;
                height: 10px;
                background: currentColor;
                clip-path: polygon(0 50%, 40% 0, 40% 40%, 100% 40%, 100% 60%, 40% 60%, 40% 100%);
            }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > nav:first-child a:hover {
                border-color: #3EB885;
                border-color: var(--color-brand);
                background: #3EB885;
                background: var(--color-brand);
                color: #FFFFFF;
                color: var(--color-on-brand);
            }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > nav:first-child a:focus-visible {
                border-color: #3EB885;
                border-color: var(--color-brand);
                background: #3EB885;
                background: var(--color-brand);
                color: #FFFFFF;
                color: var(--color-on-brand);
            }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
        grid-area: title;
        margin: 80px 0 0;
        font-size: 5rem;
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: 0;
        text-wrap: balance;
    }
/* the photo sits alongside the story so a short one still fills the spread */
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
        grid-area: photo;
        align-self: start;
        margin: 80px 0 0;
    }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 4 / 5;
            -o-object-fit: cover;
               object-fit: cover;
            -o-object-position: 50% 20%;
               object-position: 50% 20%;
            border-radius: 10px;
        }
@supports not (aspect-ratio: 1 / 1) {
    .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure img {
        --aspect-ratio: 4 / 5;
    }
}
/* the scrawl: a real quote when there is one, otherwise the summary */
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote,.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
        margin: 36px 0 0 24px;
        padding: 0;
        border: 0;
        color: #000000;
        font-family: "Reenie Beanie", "Bradley Hand", cursive;
        font-family: var(--font-scrawl);
        font-size: 2.75rem;
        font-style: normal;
        line-height: 1.1;
        rotate: -3deg;
    }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) cite {
        display: block;
        margin-top: 12px;
        font-style: normal;
        text-align: right;
    }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section {
        grid-area: story;
        max-width: 760px;
        margin-top: 60px;
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 2rem;
    }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section p {
            margin: 0;
        }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section p + p {
                margin-top: 24px;
            }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section p:first-child::first-letter {
            float: left;
            margin: 6px 8px 0 0;
            font-size: 3.875rem;
            font-weight: 500;
            line-height: 0.8;
        }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) aside {
        grid-area: tools;
        max-width: 760px;
        margin-top: 60px;
    }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) aside h2 {
            margin: 0 0 20px;
            font-size: 0.8125rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) aside ul {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) aside li {
            padding: 8px 18px;
            border: 1.5px solid #000000;
            border-radius: 62.5rem;
            border-radius: var(--radius-full);
            font-size: 1rem;
            font-weight: 500;
        }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] {
        grid-area: more;
        margin-top: var(--gap);
        padding-top: 60px;
        border-top: 1px solid rgba(0, 0, 0, 0.15);
    }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] h2 {
            margin: 0 0 40px;
            font-size: 2.5rem;
            font-weight: 500;
            line-height: 1;
        }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] ul {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 415px), 1fr));
            grid-gap: 20px;
            gap: 20px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] a {
            position: relative;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            color: #000000;
            font-size: 1.5rem;
            font-weight: 600;
            line-height: 1.2;
            -webkit-text-decoration: none;
            text-decoration: none;
        }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] a:focus-visible {
                color: #3EB885;
                color: var(--color-brand-ink);
            }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] a:hover {
                color: #3EB885;
                color: var(--color-brand-ink);
            }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] img {
            grid-area: 1 / 1;
            width: 100%;
            aspect-ratio: 1;
            -o-object-fit: cover;
               object-fit: cover;
            -o-object-position: 50% 15%;
               object-position: 50% 15%;
            mix-blend-mode: multiply;
            transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: opacity var(--duration-slow) var(--ease-out);
        }
@supports not (aspect-ratio: 1 / 1) {
    .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] img {
        --aspect-ratio: 1;
    }
}
/* same frame as the cutout; the room and colour come in on hover while
           the cutout steps out */
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] img + img {
            opacity: 0;
            mix-blend-mode: normal;
        }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] a:focus-visible img {
            opacity: 0;
        }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] a:hover img {
            opacity: 0;
        }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] a:focus-visible img + img {
            opacity: 1;
        }
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] a:hover img + img {
            opacity: 1;
        }
@media (max-width: 89.999rem) {
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --photo: 440px;

        -moz-column-gap: 80px;

             column-gap: 80px;
}

        .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
            font-size: 4rem;
        }

        .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote,.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
            font-size: 2.375rem;
        }
    }
@media (max-width: 67.499rem) {
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 80px;
        --photo: 340px;

        -moz-column-gap: 48px;

             column-gap: 48px;
}

        .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
            margin-top: 56px;
            font-size: 3rem;
        }

        .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
            margin-top: 56px;
        }

        .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote,.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
            margin-left: 0;
            font-size: 2rem;
        }

        .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section {
            margin-top: 40px;
            font-size: 1.125rem;
            line-height: 1.8125rem;
        }

        .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] ul {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
        }
    }
/* one column: the photo and its scrawl come between the headline and the story */
@media (max-width: 47.999rem) {
.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "back"
            "title"
            "photo"
            "story"
            "tools"
            "more";
        grid-template-rows: none;
        padding-top: 40px;
}

        .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
            margin-top: 40px;
            font-size: 2.125rem;
        }

        .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
            margin-top: 32px;
        }

            .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure img {
                aspect-ratio: 1;
            }

            @supports not (aspect-ratio: 1 / 1) {
        .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure img {
            --aspect-ratio: 1;
        }
    }

        .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote,.story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
            font-size: 1.875rem;
        }

        .story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav[aria-label] h2 {
            font-size: 2rem;
        }
    }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --rule: #C9D3CF;
    --plate: #7DA7A7;

    width: min(1314px, 100% - 2 * 1.5rem);

    width: min(1314px, 100% - 2 * var(--container-gutter));
    margin: 60px auto 0 auto;
}
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) form {
        display: flex;
        flex-wrap: wrap;
        gap: 24px 32px;
    }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label {
        display: grid;
        grid-gap: 6px;
        gap: 6px;
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input,.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) select {
        min-width: 282px;
        height: 42px;
        padding: 0 16px;
        border: 1px solid var(--rule);
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        background: #FFFFFF;
        font-size: 0.9375rem;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
    }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="search"] {
        min-width: 374px;
    }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
        margin: 100px 0 0;
        padding: 0;
        list-style: none;
    }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li {
        position: relative;
        display: grid;
        grid-template-columns: 351px 1fr;
        grid-template-rows: auto auto auto auto 1fr;
        grid-column-gap: 100px;
        -moz-column-gap: 100px;
             column-gap: 100px;
        min-height: 500px;
        margin: 0;
        padding: 75px 20px 40px 75px;
        border-radius: 250px 16px 16px 250px;
        background: var(--plate);
        color: #FFFFFF;
    }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li + li {
            margin-top: 40px;
        }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li[hidden] {
            display: none;
        }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li  > img:first-child {
            grid-row: 1 / -1;
            align-self: start;
            width: 351px;
            height: 351px;
            border-radius: 50%;
            -o-object-fit: cover;
               object-fit: cover;
        }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) address {
        display: grid;
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto;
        grid-column-gap: 12px;
        -moz-column-gap: 12px;
             column-gap: 12px;
        justify-self: end;
        align-items: center;
        margin: -55px 0 20px;
        font-style: normal;
        font-size: 1rem;
        font-weight: 800;
        line-height: 1.3125rem;
    }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) address img {
            grid-row: 1 / -1;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            -o-object-fit: cover;
               object-fit: cover;
        }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) address b {
            text-transform: uppercase;
        }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) address span {
            font-weight: 500;
            font-style: italic;
        }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > p:first-of-type {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        font-size: 0.875rem;
        font-weight: 600;
    }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > p:first-of-type b {
            padding: 0 10px;
            background: #3EB885;
            background: var(--color-brand);
            color: #FFFFFF;
            color: var(--color-on-brand);
            font-weight: 700;
            line-height: 1.375rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        margin: 12px 0 0;
        max-width: 650px;
        font-size: 2.375rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0;
    }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 a {
            color: inherit;
            -webkit-text-decoration: none;
            text-decoration: none;
        }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 a::after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > p:last-of-type {
        max-width: 649px;
        margin: 16px 0 0;
        font-size: 1.125rem;
        line-height: 1.875rem;
    }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > span,.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > button {
        position: relative;
        z-index: 1;
        align-self: end;
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 0 24px 0 8px;
        height: 54px;
        border: 0;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        background: #3EB885;
        background: var(--color-brand);
        color: #FFFFFF;
        color: var(--color-on-brand);
        font-size: 0.875rem;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > span::before {
            content: "";
            width: 35px;
            height: 35px;
            background: url("/images/read-on.svg") no-repeat center / contain;
        }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > button::before {
            content: "";
            width: 35px;
            height: 35px;
            background: url("/images/read-on.svg") no-repeat center / contain;
        }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > button {
        margin-left: 190px;
    }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > button::before {
            background-image: url("/images/envelope.svg");
        }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > span {
        pointer-events: none;
    }
.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > span,.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > button {
        grid-row: 5;
        grid-column: 2;
    }
@media (max-width: 89.999rem) {
        .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li {
            grid-template-columns: 280px 1fr;
            -moz-column-gap: 60px;
                 column-gap: 60px;
            padding-left: 50px;
        }

            .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li  > img:first-child {
                width: 280px;
                height: 280px;
            }

        .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) address {
            margin-top: -40px;
        }
    }
@media (max-width: 67.499rem) {
        .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) form {
            gap: 16px 24px;
        }

        .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input,.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) select,.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="search"] {
            min-width: 240px;
        }

        .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
            margin-top: 60px;
        }

        .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li {
            grid-template-columns: 1fr;
            min-height: 0;
            padding: 40px 32px;
            border-radius: 16px;
        }

            .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li  > img:first-child {
                grid-row: auto;
                width: 200px;
                height: 200px;
                margin-bottom: 24px;
            }

        .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) address {
            justify-self: start;
            margin: 0 0 20px;
        }

        .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 1.75rem;
        }

        .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > span,.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > button {
            grid-row: auto;
            grid-column: 1;
            margin-top: 24px;
        }

        .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li > button {
            margin-left: 0;
        }
    }
@media (max-width: 47.999rem) {
        .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label {
            width: 100%;
        }

        .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input,.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) select,.post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="search"] {
            min-width: 0;
            width: 100%;
        }

        .post_list:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol > li {
            padding: 32px 20px;
        }
    }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    width: min(1720px, 100% - 2 * 1.5rem);
    width: min(1720px, 100% - 2 * var(--container-gutter));
    padding: 100px 100px 80px;
    border: 0;
    border-radius: 16px;
    background: #3EB885;
    background: var(--color-brand);
    color: #FFFFFF;
    color: var(--color-on-brand);
    text-align: center;
}
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop {
        background: rgba(0, 0, 0, 0.6);
    }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > form:first-child {
        position: absolute;
        top: 40px;
        right: 40px;
    }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > form:first-child button {
            padding: 0;
            border: 0;
            background: none;
            color: #FFFFFF;
            font-size: 2rem;
            font-weight: 700;
        }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        margin: 0;
        font-size: 3rem;
        font-weight: 700;
        letter-spacing: 0;
    }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        display: flex;
        justify-content: center;
        gap: 96px;
        margin: 60px 0 0;
        padding: 0;
        list-style: none;
    }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul li {
            margin: 0;
        }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul a {
            display: block;
            width: 79px;
            height: 79px;
            overflow: hidden;
            text-indent: 100%;
            white-space: nowrap;
            background: no-repeat center / contain;
        }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul a[data-share-to="facebook"] { background-image: url("/images/facebook.svg"); }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul a[data-share-to="x"]        { background-image: url("/images/x.svg"); }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul a[data-share-to="linkedin"] { background-image: url("/images/linkedin.svg"); }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul a[data-share-to="reddit"]   { background-image: url("/images/instagram.svg"); }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label {
        display: grid;
        grid-gap: 6px;
        gap: 6px;
        width: min(630px, 100%);
        margin: 60px auto 0;
        font-size: 1.375rem;
        font-weight: 800;
        text-align: left;
    }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input {
        width: 100%;
        padding: 8px 18px;
        border: 0;
        border-radius: 21px;
        background: #FFFFFF;
        color: #000000;
        font-size: 1.125rem;
    }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > button,.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > form:last-child button {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 40px 8px 0;
        padding: 0 24px 0 8px;
        height: 54px;
        border: 0;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        background: #576D6B;
        background: var(--nav-panel-bg);
        color: #FFFFFF;
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
    }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > button:not(.does-not-exist):not(does-not-exist)::before {
            content: "";
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: #FFFFFF url("/images/envelope.svg") no-repeat center / 20px;
        }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > form:last-child button::before {
            content: "";
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: #FFFFFF url("/images/envelope.svg") no-repeat center / 20px;
        }
.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > form:last-child {
        display: inline;
    }
@media (max-width: 67.499rem) {

.share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        padding: 64px 32px 40px;
}

        .share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 2rem;
        }

        .share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            gap: 32px;
        }

            .share:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul a {
                width: 56px;
                height: 56px;
            }
    }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --measure: 1006px;

    width: min(1720px, 100% - 2 * 1.5rem);

    width: min(1720px, 100% - 2 * var(--container-gutter));
    margin: 60px auto 0 auto;
}
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav a {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 1px;
        -webkit-text-decoration: none;
        text-decoration: none;
        text-transform: uppercase;
    }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav a::before {
            content: "";
            width: 26px;
            height: 10px;
            background: currentColor;
            clip-path: polygon(0 50%, 40% 0, 40% 40%, 100% 40%, 100% 60%, 40% 60%, 40% 100%);
        }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header {
        margin-top: 80px;
        text-align: center;
    }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header  > p:first-child {
            width: -moz-max-content;
            width: max-content;
            margin: 0 auto;
            padding: 0 12px;
            background: #3EB885;
            background: var(--color-brand);
            color: #FFFFFF;
            color: var(--color-on-brand);
            font-size: 0.875rem;
            font-weight: 700;
            line-height: 1.375rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header h1 {
            margin: 12px 0 0;
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: 0;
            text-wrap: balance;
        }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header address {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            margin-top: 40px;
            font-style: normal;
            font-size: 1rem;
            font-weight: 800;
            text-transform: uppercase;
        }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header address img {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                -o-object-fit: cover;
                   object-fit: cover;
            }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header address span {
                font-weight: 500;
                font-style: italic;
                text-transform: none;
            }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header  > p:last-of-type {
            margin: 8px 0 0;
            font-size: 1rem;
        }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header  > img {
            width: 100%;
            margin-top: 40px;
            padding: 40px;
            border-radius: 16px;
            background: #ECF6EF;
            background: var(--green-400);
        }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > div {
        max-width: var(--measure);
        margin: 100px auto 0;
        font-size: 1.125rem;
        line-height: 1.875rem;
    }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div .lede {
            margin: 0 0 56px;
            font-size: 1.75rem;
            font-weight: 500;
            line-height: 1.5;
            text-align: center;
            text-wrap: pretty;
        }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div h2 {
            margin: 48px 0 8px;
            font-size: 1.125rem;
            font-weight: 700;
            letter-spacing: 0;
        }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div h3 {
            margin: 24px 0 4px;
            font-size: 1.125rem;
            font-weight: 700;
            letter-spacing: 0;
        }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div p {
            margin: 0 0 16px;
        }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div ul {
            margin: 0 0 16px;
            padding-left: 24px;
        }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div ul li {
                margin: 0;
            }
/* the pull-quote panels */
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div aside {
            margin: 48px 0;
            padding: 36px 88px;
            border-radius: 16px;
            background: #576D6B;
            background: var(--nav-panel-bg);
            color: #FFFFFF;
            font-size: 1.875rem;
            font-weight: 700;
            line-height: 1.3;
            text-align: center;
        }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div aside b {
                display: block;
            }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div aside ul {
                margin: 8px 0 0;
                padding: 0;
                list-style: none;
                font-size: 1.5rem;
                font-weight: 600;
                line-height: 1.6;
            }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div figure {
            margin: 48px 0;
        }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div figure img {
                width: 100%;
                aspect-ratio: 1006 / 566;
                -o-object-fit: cover;
                   object-fit: cover;
                border-radius: 16px 16px 0 0;
            }
@supports not (aspect-ratio: 1 / 1) {
    .post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div figure img {
        --aspect-ratio: 1006 / 566;
    }
}
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div figure figcaption {
                padding: 16px 30px;
                border-radius: 0 0 16px 16px;
                background: #ECF6EF;
                background: var(--green-400);
                font-size: 1rem;
                line-height: 1.5;
            }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) footer {
        display: flex;
        justify-content: center;
        margin-top: 80px;
        margin-bottom: 0;
    }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) footer button {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 0 24px 0 8px;
            height: 54px;
            border: 0;
            border-radius: 62.5rem;
            border-radius: var(--radius-full);
            background: #3EB885;
            background: var(--color-brand);
            color: #FFFFFF;
            color: var(--color-on-brand);
            font-size: 0.875rem;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
.post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) footer button::before {
                content: "";
                width: 35px;
                height: 35px;
                background: url("/images/envelope.svg") no-repeat center / contain;
            }
@media (max-width: 67.499rem) {
        .post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header {
            margin-top: 48px;
        }

            .post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header h1 {
                font-size: 2.625rem;
            }

            .post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header  > img {
                padding: 20px;
            }

        .post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > div {
            margin-top: 60px;
        }

            .post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div .lede {
                font-size: 1.625rem;
            }

            .post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div aside {
                padding: 28px 32px;
                font-size: 1.625rem;
            }

                .post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div aside ul {
                    font-size: 1.125rem;
                }
    }
@media (max-width: 47.999rem) {
        .post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header h1 {
            font-size: 1.875rem;
        }

        .post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header address {
            flex-direction: column;
            text-align: center;
        }

        .post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > div {
            font-size: 1.0625rem;
            line-height: 1.75rem;
        }

            .post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div .lede {
                font-size: 1.375rem;
            }

            .post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div aside {
                font-size: 1.375rem;
            }
    }
.audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    --tint: rgba(123, 166, 170, 0.7);

    /* white type over a photo: a deep wash keeps it legible whatever's behind */
}
[data-contrast="more"]:root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .audiences {
        --tint: rgba(28, 52, 56, 0.88);
    }
.audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{

    position: relative;
    isolation: isolate;
    margin-top: var(--gap);
    padding: 120px 1.5rem;
    padding: 120px var(--container-gutter);
    color: #FFFFFF;
    text-align: center;
}
.audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        filter: grayscale(1);
    }
.audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: var(--tint);
    }
.audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        margin: 0;
        font-size: 2.75rem;
        font-weight: 700;
        line-height: 3.25rem;
        letter-spacing: 0;
    }
.audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        max-width: 1280px;
        margin: 260px auto 0;
        padding: 0;
        list-style: none;
    }
.audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        position: relative;
        margin: 0;
    }
.audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li img {
            width: 104px;
            height: 104px;
            margin-left: auto;
            margin-right: auto;
        }
.audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
        max-width: 300px;
        margin: 15px auto 0;
        font-size: 2rem;
        font-weight: 400;
        line-height: 2.375rem;
        letter-spacing: 0;
        text-wrap: balance;
    }
.audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a {
        display: inline-block;
        margin-top: 20px;
        color: inherit;
        font-size: 0.875rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-underline-offset: 5px;
    }
.audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
@media (max-width: 89.999rem) {
        .audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            margin-top: 220px;
        }
    }
@media (max-width: 67.499rem) {
.audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;

        padding-top: 100px;

        padding-bottom: 100px;
}

        .audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 2.375rem;
            line-height: 2.875rem;
        }

        .audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            margin-top: 180px;
        }

        .audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
            font-size: 1.75rem;
            line-height: 2rem;
        }
    }
@media (max-width: 47.999rem) {
.audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;

        min-height: auto;
        padding-top: 80px;
        padding-bottom: 80px;
}

        .audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 1.875rem;
            line-height: 2.25rem;
        }

        .audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            grid-template-columns: 1fr;
            row-gap: 56px;
            margin-top: 64px;
        }

        .audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li img {
            width: 90px;
            height: 90px;
        }

        .audiences:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
            font-size: 1.625rem;
            line-height: 1.875rem;
        }
    }
.testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    --copy: 921px;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: min(1720px, 100% - 2 * 1.5rem);
    width: min(1720px, 100% - 2 * var(--container-gutter));
    min-height: 985px;
    margin: 200px auto 0 auto;
    margin: var(--gap) auto 0 auto;
    padding: 91px 46px 0 921px;
    padding: 91px 46px 0 var(--copy);
    border-radius: 10px;
    background: #F4FDD6;
    color: #000000;

    /* green paper: the grain and the pencil both darken onto the colour, so
       the white of their scans drops away and the tint stays */
}
.testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: url("/images/paper-texture.jpg") center / cover;
        mix-blend-mode: darken;
    }
/* every sketch is cut at the card's bottom edge and pinned there; only
       where it sits and how wide it is change from page to page */
.testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img {
        position: absolute;
        bottom: 0;
        left: 32px;
        left: var(--left, 32px);
        width: 1215px;
        width: var(--width, 1215px);
        max-width: none;
        mix-blend-mode: darken;
        pointer-events: none;
    }
.testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        margin: 0;
        font-size: 2.5rem;
        font-weight: 500;
        line-height: 2.375rem;
        letter-spacing: 0.5px;
    }
.testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2::before {
            content: "";
            display: block;
            width: 344px;
            height: 14px;
            margin-bottom: 12px;
            background: #000000;
        }
.testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 + p {
        max-width: 465px;
        margin: 5px 0 0;
        font-size: 1.125rem;
        line-height: 1.75rem;
        letter-spacing: 0.5px;
    }
.testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote {
        max-width: 640px;
        margin: 94px 0 0 100px;
        padding: 0;
        border: 0;
        color: #000000;
        font-family: "Nothing You Could Do", "Bradley Hand", cursive;
        font-family: var(--font-hand);
        font-size: 2.3125rem;
        font-style: normal;
        line-height: 3.5rem;
        text-align: center;
        rotate: -6.8deg;
    }
.testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > a {
        position: absolute;
        top: 844px;
        left: 780px;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 0 27px 0 9px;
        height: 54px;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        background: #3EB885;
        background: var(--color-brand);
        color: #FFFFFF;
        color: var(--color-on-brand);
        font-size: 1.125rem;
        font-weight: 500;
        letter-spacing: 1px;
        -webkit-text-decoration: none;
        text-decoration: none;
        text-transform: uppercase;
    }
.testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > a::before {
            content: "";
            width: 35px;
            height: 35px;
            background: url("/images/read-on.svg") no-repeat center / contain;
        }
/* the copy can sit on the left with the sketch on the right */
.testimonial_teaser[data-copy="left"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        padding: 120px 46px 0 192px;
    }
.testimonial_teaser[data-copy="left"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote {
            margin-left: -131px;
        }
@media (max-width: 89.999rem) {
.testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --copy: 52%;

        min-height: 0;
        padding-top: 80px;
        padding-bottom: 120px;
}

        .testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img {
            width: 68%;
            left: -8%;
        }

        .testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote {
            max-width: none;
            margin: 60px 0 0;
            font-size: 1.875rem;
            line-height: 2.875rem;
        }

        /* once the card has no fixed height the button follows the quote */
        .testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > a {
            position: static;
            margin-top: 40px;
        }

        .testimonial_teaser[data-copy="left"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
            padding: 80px 50% 120px 6%;
        }

            .testimonial_teaser[data-copy="left"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img {
                left: auto;
                right: -8%;
            }

            .testimonial_teaser[data-copy="left"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote {
                margin-left: 0;
            }
    }
/* stacked: heading and quote read first, the sketch closes the card */
@media (max-width: 67.499rem) {
.testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;

        display: flex;
        flex-direction: column;
        padding: 56px 1.5rem 0;
        padding: 56px var(--container-gutter) 0;
}

        .testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img {
            position: static;
            order: 1;
            align-self: center;
            width: min(100%, 720px);
            margin: 32px 0 0;
        }

        .testimonial_teaser[data-copy="left"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
            padding: 56px 1.5rem 0;
            padding: 56px var(--container-gutter) 0;
        }

            .testimonial_teaser[data-copy="left"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote {
                margin-left: 0;
            }

        .testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 + p {
            max-width: 520px;
        }

        .testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote {
            align-self: center;
            max-width: 640px;
            margin: 48px 0 0;
            font-size: 1.875rem;
            line-height: 2.875rem;
            rotate: -4deg;
        }

        .testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > a {
            position: static;
            align-self: center;
            margin-top: 48px;
        }
    }
@media (max-width: 47.999rem) {
.testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;

        width: 100%;
        border-radius: 0;
}

        .testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 2rem;
        }

            .testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2::before {
                width: 200px;
                height: 10px;
            }

        .testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 + p {
            font-size: 1.0625rem;
            line-height: 1.625rem;
        }

        .testimonial_teaser:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote {
            margin-top: 40px;
            font-size: 1.625rem;
            line-height: 2.5rem;
        }
    }
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --rule: #C9D3CF;
    --gutter: 67px;
    --arrow: 50px;
    --gap: 200px;

    position: relative;
    width: min(719px, 100% - 2 * 1.5rem);
    width: min(719px, 100% - 2 * var(--container-gutter));
    margin: 200px auto 0 auto;
    margin: var(--gap) auto 0 auto;
    container-type: inline-size;
}
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        position: relative;
        width: -moz-max-content;
        width: max-content;
        margin-left: var(--gutter);
        padding: 0 20px;
        background: #3EB885;
        background: var(--color-brand);
        color: #FFFFFF;
        color: var(--color-on-brand);
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.4063rem;
        letter-spacing: 4px;
        text-transform: uppercase;

        /* dotted tail out to the module's edge; 100% here is the h2's own width */
    }
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2::after {
            content: "";
            position: absolute;
            left: 100%;
            top: 50%;
            width: calc(100cqi - var(--gutter) - 100%);
            border-bottom: 1px dotted var(--rule);
        }
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
        counter-reset: overview;
        margin: 0;
        padding: 0;
        list-style: none;
    }
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        counter-increment: overview;
        position: relative;
        display: grid;
        grid-template-columns: var(--gutter) 1fr var(--arrow);
        margin: 0;
        padding-top: 30px;
    }
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li::before {
            content: "0" counter(overview);
            margin-top: 17px;
            color: #3EB885;
            color: var(--color-brand-ink);
            font-size: 1.375rem;
            line-height: 1;
        }
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li:hover h3::after {
            translate: 6px 0;
            background-image: url("/images/arrow-right-over.svg");
        }
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
        margin: 0;
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 2.875rem;
        font-weight: 400;
        line-height: 3.25rem;
        letter-spacing: 1px;
    }
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 a {
            color: inherit;
            -webkit-text-decoration: none;
            text-decoration: none;

            /* the whole row is the click target */
        }
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 a::after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3::after {
            content: "";
            position: absolute;
            top: 30px;
            right: 0;
            width: var(--arrow);
            height: var(--arrow);
            background: url("/images/arrow-right.svg") no-repeat center / contain;
            transition: translate 220ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: translate var(--duration-base) var(--ease-out);
        }
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
        grid-column: 2 / -1;
        margin: 3px 0 0;
        padding: 0 68px 27px 0;
        border-bottom: 1px dotted var(--rule);
        color: #000000;
        font-size: 1.0625rem;
        line-height: 1.75rem;
    }
@media (max-width: 67.499rem) {
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
}
    }
@media (max-width: 47.999rem) {
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
        --gutter: 44px;
        --arrow: 44px;
}

        .overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
            padding-top: 22px;
        }

            .overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li::before {
                margin-top: 12px;
                font-size: 1.125rem;
            }

        .overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
            padding-right: calc(var(--arrow) + 12px);
            font-size: 2.25rem;
            line-height: 2.5rem;
        }

            .overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3::after {
                top: 22px;
            }

        .overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            padding: 0 0 22px;
            font-size: 1rem;
            line-height: 1.625rem;
        }
    }
@media (max-width: 29.999rem) {
.overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gutter: 30px;
        --arrow: 32px;
}

        .overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 0.75rem;
            letter-spacing: 3px;
        }

        .overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
            padding-right: calc(var(--arrow) + 8px);
            font-size: 1.75rem;
            line-height: 2rem;
            letter-spacing: 0;
            text-wrap: balance;
        }

            .overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3::after {
                top: 24px;
            }

        .overview:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            text-wrap: pretty;
        }
    }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --wash: var(--green-400);
    --deep: #0E3B2D;
    --lime: #C2E32F;
    --muted: rgba(0, 0, 0, 0.62);
    --rule: rgba(0, 0, 0, 0.12);
    --phone: 340px;
    --squircle: 22.4%;
    --lift: drop-shadow(0 30px 50px rgba(13, 48, 39, 0.22)) drop-shadow(0 8px 14px rgba(13, 48, 39, 0.12));
    /* the rise everything enters on; calm motion stills it */
    --rise: 32px;
}
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul,.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        margin: 0;
    }
/* opening: the title and a card per app, beside the apps on their devices.
       It tucks up behind the header's curve, as the illustration headers do */
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        grid-template-rows: auto auto 1fr;
        grid-column-gap: 80px;
        -moz-column-gap: 80px;
             column-gap: 80px;
        margin-top: calc(-1 * (30px + max(16px, min(2.5vw, 40px))));
        margin-top: calc(-1 * (30px + max(16px, min(2.5vw, 40px))));
        margin-top: calc(-1 * (var(--header-drop) + var(--header-curve)));
        padding: 200px max(1.5rem, (100% - 1600px) / 2) 140px;
        padding: 200px max(var(--container-gutter), (100% - 1600px) / 2) 140px;
        background: linear-gradient(var(--wash) 55%, #FFFFFF);
    }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header h1 {
            grid-column: 1;
            align-self: end;
            width: -moz-max-content;
            width: max-content;
            max-width: 100%;
            margin: 0;
            padding-top: 20px;
            border-top: 14px solid #3EB885;
            border-top: 14px solid var(--color-brand);
            font-size: 4.25rem;
            font-weight: 700;
            line-height: 1.05;
            letter-spacing: -0.01em;
            text-wrap: balance;
        }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header  > p {
            grid-column: 1;
            max-width: 600px;
            margin: 28px 0 0;
            font-size: 1.375rem;
            line-height: 2.25rem;
        }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header ul {
            grid-column: 1;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            grid-gap: 20px;
            gap: 20px;
            align-self: start;
            margin-top: 48px;
        }
/* every card as tall as the tallest, so a name on two lines doesn't leave the other short */
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header a {
            display: grid;
            grid-template-columns: 72px minmax(0, 1fr);
            grid-template-rows: 1fr auto auto 1fr;
            grid-column-gap: 18px;
            -moz-column-gap: 18px;
                 column-gap: 18px;
            height: 100%;
            padding: 18px 22px 18px 18px;
            border-radius: 24px;
            background: #FFFFFF;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
            box-shadow: var(--shadow-md);
            color: #000000;
            color: var(--color-text);
            -webkit-text-decoration: none;
            text-decoration: none;
            transition:
                translate 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
            transition:
                translate var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
        }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header a:hover {
                translate: 0 -4px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.07), 0 12px 32px rgba(0, 0, 0, 0.1);
                box-shadow: var(--shadow-lg);
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header a img {
                grid-row: 1 / -1;
                width: 72px;
                height: 72px;
                border-radius: var(--squircle);
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header a span {
                grid-row: 2;
                color: #3EB885;
                color: var(--color-brand-ink);
                font-size: 0.8125rem;
                font-weight: 600;
                line-height: 1.25rem;
                letter-spacing: 2.5px;
                text-transform: uppercase;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header a strong {
                grid-row: 3;
                font-size: 1.375rem;
                line-height: 1.75rem;
            }
/* the first device sits back, every one after stands in front of it, lower and to the right */
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header  > div {
            position: relative;
            grid-column: 2;
            grid-row: 1 / -1;
            align-self: center;
            padding-bottom: 12%;
        }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header > div::before {
                content: "";
                position: absolute;
                top: -6%;
                right: 4%;
                bottom: 2%;
                left: -2%;
                border-radius: 50%;
                background: radial-gradient(closest-side, rgba(62, 184, 133, 0.32), transparent);
                z-index: -1;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header > div img {
                display: block;
                height: auto;
                filter: var(--lift);
                animation: apps-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
                animation: apps-rise 900ms var(--ease-out) both;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header > div img:first-child {
                    width: 86%;
                }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header > div img + img {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    width: 27%;
                    animation-delay: 220ms;
                }
/* each app: its pitch, then a tour of its screens beside a phone that stays put */
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section {
        --tone: var(--color-text);
        --soft: var(--muted);
        --accent: var(--color-brand-ink);
        --track: var(--rule);

        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
        grid-template-rows: auto 1fr auto;
        grid-column-gap: 120px;
        -moz-column-gap: 120px;
             column-gap: 120px;
        padding: 160px max(1.5rem, (100% - 1600px) / 2);
        padding: 160px max(var(--container-gutter), (100% - 1600px) / 2);
        color: #000000;
        color: var(--tone);
        scroll-margin-block-start: 40px;

        /* every other app on the deep green of the apps' own dark mode, with the phone on the left */
    }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(even) {
            --tone: #FFFFFF;
            --soft: rgba(255, 255, 255, 0.78);
            --accent: var(--lime);
            --track: rgba(255, 255, 255, 0.18);

            grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
            background: var(--deep);
        }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(even)  > header {
                grid-column: 2;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(even)  > ol {
                grid-column: 2;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(even)  > p {
                grid-column: 2;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(even)  > figure {
                grid-column: 1;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(even)  > header a:focus-visible {
                outline-color: var(--lime);
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section  > header {
            grid-column: 1;
            display: grid;
            justify-items: start;
        }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > header  > img {
                width: 112px;
                height: 112px;
                margin-bottom: 36px;
                border-radius: var(--squircle);
                box-shadow: 0 12px 30px rgba(13, 48, 39, 0.25);
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > header p:first-of-type {
                margin: 0;
                color: var(--accent);
                font-size: 0.9375rem;
                font-weight: 600;
                line-height: 1.5rem;
                letter-spacing: 3px;
                text-transform: uppercase;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > header h2 {
                margin: 8px 0 0;
                font-size: 3.75rem;
                font-weight: 700;
                line-height: 1.05;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > header p:nth-of-type(2) {
                margin: 18px 0 0;
                font-size: 2rem;
                font-weight: 500;
                line-height: 1.25;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > header p:nth-of-type(3) {
                max-width: 660px;
                margin: 24px 0 0;
                color: var(--soft);
                font-size: 1.25rem;
                line-height: 2.125rem;
            }
/* the store badges */
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > header p:nth-of-type(4) {
                display: flex;
                flex-wrap: wrap;
                gap: 14px;
                margin: 36px 0 0;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > header p:nth-of-type(4) a {
                    display: block;
                    border-radius: 10px;
                    transition: translate 220ms cubic-bezier(0.16, 1, 0.3, 1);
                    transition: translate var(--duration-base) var(--ease-out);
                }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > header p:nth-of-type(4) a:hover {
                        translate: 0 -3px;
                    }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > header p:nth-of-type(4) img {
                    display: block;
                    width: auto;
                    height: 54px;
                }
/* the stops: the one being read is at full strength, its rule lit */
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section  > ol {
            grid-column: 1;
            margin-top: 72px;
            counter-reset: stop;
        }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li {
            display: grid;
            align-content: center;
            min-height: 52vh;
            padding-left: 44px;
            border-left: 3px solid var(--track);
            opacity: 0.38;
            counter-increment: stop;
            transition:
                opacity 400ms cubic-bezier(0.16, 1, 0.3, 1), border-color 400ms cubic-bezier(0.16, 1, 0.3, 1);
            transition:
                opacity var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out);
        }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li::before {
                content: counter(stop, decimal-leading-zero);
                color: var(--accent);
                font-size: 0.9375rem;
                font-weight: 600;
                line-height: 1.5rem;
                letter-spacing: 3px;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li[aria-current] {
                border-color: #3EB885;
                border-color: var(--color-brand);
                opacity: 1;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li h3 {
                margin: 6px 0 0;
                font-size: 2.125rem;
                font-weight: 700;
                line-height: 1.15;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li p {
                max-width: 540px;
                margin: 14px 0 0;
                color: var(--soft);
                font-size: 1.25rem;
                line-height: 2rem;
            }
/* each stop's own screen is for narrower layouts; here the phone shows it */
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li img {
                display: none;
            }
/* the phone holds still through the tour, centred in the window below the
           header, and never taller than that space (the screens are 720 × 1539) */
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section  > figure {
            --size: min(var(--phone), (100vh - var(--header-height) - 80px) * 720 / 1539);

            position: sticky;
            top: calc((100vh + 110px) / 2 - var(--size) * 1539 / 720 / 2);
            top: calc((100vh + var(--header-height)) / 2 - var(--size) * 1539 / 720 / 2);
            grid-column: 2;
            grid-row: 1 / -1;
            align-self: start;
            justify-self: center;
            display: grid;
            width: var(--size);
            margin: 0;
            filter: var(--lift);
        }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > figure::before {
                content: "";
                grid-area: 1 / 1;
                align-self: center;
                justify-self: center;
                width: 180%;
                aspect-ratio: 1;
                border-radius: 50%;
                background: radial-gradient(closest-side, rgba(62, 184, 133, 0.3), transparent);
                z-index: -1;
            }
@supports not (aspect-ratio: 1 / 1) {
    .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > figure::before {
        --aspect-ratio: 1;
    }
}
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > figure img {
                grid-area: 1 / 1;
                width: 100%;
                height: auto;
                opacity: 0;
                translate: 0 18px;
                scale: 0.97;
                transition:
                    opacity 400ms cubic-bezier(0.16, 1, 0.3, 1), translate 400ms cubic-bezier(0.16, 1, 0.3, 1), scale 400ms cubic-bezier(0.16, 1, 0.3, 1);
                transition:
                    opacity var(--duration-slow) var(--ease-out), translate var(--duration-slow) var(--ease-out), scale var(--duration-slow) var(--ease-out);
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > figure img[data-shown] {
                    opacity: 1;
                    translate: 0 0;
                    scale: 1;
                }
/* what it takes to get started */
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section  > p {
            grid-column: 1;
            max-width: 660px;
            margin: 56px 0 0;
            padding-top: 24px;
            border-top: 1px solid var(--track);
            color: var(--soft);
            font-size: 1.0625rem;
            line-height: 1.75rem;
        }
/* closing: the two icons with a message running between them */
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > footer {
        display: grid;
        justify-items: center;
        padding: 160px 1.5rem 40px;
        padding: 160px var(--container-gutter) 40px;
        text-align: center;
    }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer  > div {
            position: relative;
            display: flex;
            justify-content: space-between;
            width: min(440px, 100%);
            margin-bottom: 56px;

            /* the wire, dotted like the Hi circle's dot */
        }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer > div::before {
                content: "";
                position: absolute;
                left: 96px;
                right: 96px;
                top: calc(50% - 2px);
                height: 4px;
                background: radial-gradient(circle, rgba(62, 184, 133, 0.45) 2px, transparent 2.5px) 0 0 / 14px 4px repeat-x;
            }
/* the message itself, there and back */
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer > div::after {
                content: "";
                position: absolute;
                top: calc(50% - 8px);
                left: 96px;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background: #3EB885;
                background: var(--color-brand);
                box-shadow: 0 0 0 6px rgba(62, 184, 133, 0.2);
                animation: apps-message 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
                animation: apps-message 3.2s var(--ease-in-out) infinite;
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer > div img {
                width: 96px;
                height: 96px;
                border-radius: var(--squircle);
                box-shadow: 0 12px 30px rgba(13, 48, 39, 0.22);
            }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer h2 {
            margin: 0;
            font-size: 3rem;
            font-weight: 700;
            line-height: 1.1;
            text-wrap: balance;
        }
.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer p {
            max-width: 760px;
            margin: 20px 0 0;
            font-size: 1.25rem;
            line-height: 2.125rem;
        }
@media (prefers-reduced-motion: reduce) {
        :root:not([data-motion="full"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .apps {
            --rise: 0px;
        }

            :root:not([data-motion="full"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .apps  > footer > div::after {
                animation: none;
                left: calc(50% - 8px);
            }

            :root:not([data-motion="full"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .apps  > section > figure img {
                translate: none;
                scale: none;
            }
    }
[data-motion="reduced"]:root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .apps {
        --rise: 0px;
    }
[data-motion="reduced"]:root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .apps  > footer > div::after {
            animation: none;
            left: calc(50% - 8px);
        }
[data-motion="reduced"]:root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .apps  > section > figure img {
            translate: none;
            scale: none;
        }
@media (max-width: 89.999rem) {

.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --phone: 300px;
}

        .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > header {
            -moz-column-gap: 56px;
                 column-gap: 56px;
            padding-top: 170px;
        }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header h1 {
                font-size: 3.5rem;
            }

        .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section {
            grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
            -moz-column-gap: 72px;
                 column-gap: 72px;
        }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(even) {
                grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section  > header h2 {
                font-size: 3.25rem;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section  > header p:nth-of-type(2) {
                font-size: 1.75rem;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li h3 {
                font-size: 1.875rem;
            }
    }
/* one column: the devices under the title, and each stop carries its own screen */
@media (max-width: 67.499rem) {
        .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > header {
            grid-template-columns: minmax(0, 1fr);
            padding-top: 150px;
            padding-bottom: 100px;
        }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header  > div {
                grid-column: 1;
                grid-row: auto;
                width: min(640px, 100%);
                justify-self: center;
                margin-top: 64px;
            }

        .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section,.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section:nth-of-type(even) {
            grid-template-columns: minmax(0, 1fr);
            padding-top: 110px;
            padding-bottom: 110px;
        }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(even)  > header {
                grid-column: 1;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(even)  > ol {
                grid-column: 1;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(even)  > p {
                grid-column: 1;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:not(.does-not-exist)  > header,.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:not(.does-not-exist)  > ol,.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:not(.does-not-exist)  > p {
                grid-column: 1;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:nth-of-type(even)  > figure {
                display: none;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section:not(.does-not-exist)  > figure {
                display: none;
            }

        .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section > ol {
            display: grid;
            grid-gap: 72px;
            gap: 72px;
            margin-top: 64px;
        }

        .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section li {
            grid-template-columns: minmax(0, 1fr) 240px;
            grid-template-rows: auto auto 1fr;
            -moz-column-gap: 48px;
                 column-gap: 48px;
            align-content: start;
            min-height: 0;
            padding-left: 0;
            border: 0;
            opacity: 1;
        }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li::before {
                grid-column: 1;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li h3,.apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li p {
                grid-column: 1;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li::before {
                align-self: end;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li img {
                display: block;
                grid-column: 2;
                grid-row: 1 / -1;
                width: 100%;
                height: auto;
                filter: var(--lift);
            }
    }
@media (max-width: 47.999rem) {
        .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > header {
            padding-top: 120px;
            padding-bottom: 72px;
        }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header h1 {
                font-size: 2.625rem;
                border-top-width: 10px;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header  > p {
                font-size: 1.1875rem;
                line-height: 1.875rem;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header ul {
                grid-template-columns: minmax(0, 1fr);
                margin-top: 36px;
            }

        .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section {
            padding-top: 80px;
            padding-bottom: 80px;
        }
                .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > header  > img {
                    width: 88px;
                    height: 88px;
                    margin-bottom: 28px;
                }

                .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > header h2 {
                    font-size: 2.5rem;
                }

                .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > header p:nth-of-type(2) {
                    font-size: 1.5rem;
                }

                .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > header p:nth-of-type(3) {
                    font-size: 1.125rem;
                    line-height: 1.875rem;
                }

                .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section > header p:nth-of-type(4) img {
                    height: 48px;
                }

        .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > section li {
            grid-template-columns: minmax(0, 1fr);
            justify-items: start;
        }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li h3 {
                font-size: 1.625rem;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li p {
                font-size: 1.125rem;
                line-height: 1.875rem;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > section li img {
                grid-column: 1;
                grid-row: auto;
                justify-self: center;
                width: min(260px, 80%);
                margin-top: 32px;
            }

        .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > footer {
            padding-top: 100px;
        }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer  > div {
                width: min(320px, 100%);
            }

                .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer > div::before {
                    left: 72px;
                    right: 72px;
                }

                .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer > div::after {
                    left: 72px;
                    animation-name: apps-message-small;
                }

                .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer > div img {
                    width: 72px;
                    height: 72px;
                }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer h2 {
                font-size: 2.125rem;
            }

            .apps:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer p {
                font-size: 1.125rem;
                line-height: 1.875rem;
            }
    }
/* keyframes cannot nest inside a style rule, so they live out here */
/* across the wire between two 96px icons in a 440px row, and back */
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --deep: #0E3B2D;
    --lime: #C2E32F;
    --squircle: 22.4%;
    --lift: drop-shadow(0 30px 50px rgba(13, 48, 39, 0.22)) drop-shadow(0 8px 14px rgba(13, 48, 39, 0.12));
    /* the wire between the icons, and one trip along it there and back */
    --icon: 140px;
    --wire: 620px;
    --gap: 16px;
    --dot: 16px;
    --trip: 3.2s;
    /* how much of each phone stands above the bottom edge (the screens are 720 × 1539) */
    --phone: 300px;
    --showing: 0.56;
}
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        margin: 0;
    }
/* tucks up behind the header's curve, as the illustration headers do */
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > header {
        display: grid;
        justify-items: center;
        margin-top: calc(-1 * (30px + max(16px, min(2.5vw, 40px))));
        margin-top: calc(-1 * (30px + max(16px, min(2.5vw, 40px))));
        margin-top: calc(-1 * (var(--header-drop) + var(--header-curve)));
        padding: 220px 1.5rem 120px;
        padding: 220px var(--container-gutter) 120px;
        background: linear-gradient(#ECF6EF, #FFFFFF);
        background: linear-gradient(var(--green-400), #FFFFFF);
        text-align: center;
    }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header h1 {
            margin: 0;
            font-size: 4.5rem;
            font-weight: 700;
            line-height: 1.05;
            letter-spacing: -0.01em;
            text-wrap: balance;
        }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header p {
            max-width: 720px;
            margin: 24px 0 0;
            font-size: 1.375rem;
            line-height: 2.25rem;
            text-wrap: pretty;
        }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header ul {
            position: relative;
            display: flex;
            justify-content: space-between;
            width: min(var(--wire), 100%);
            margin-top: 80px;

            /* the wire, dotted like the Hi circle's dot */
        }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header ul::before {
                content: "";
                position: absolute;
                left: calc(var(--icon) + var(--gap));
                right: calc(var(--icon) + var(--gap));
                top: calc(var(--icon) / 2 - 2px);
                height: 4px;
                background: radial-gradient(circle, rgba(62, 184, 133, 0.45) 2px, transparent 2.5px) 0 0 / 14px 4px repeat-x;
            }
/* the message, out and back */
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header ul::after {
                content: "";
                position: absolute;
                top: calc(var(--icon) / 2 - var(--dot) / 2);
                left: calc(var(--icon) + var(--gap));
                width: var(--dot);
                height: var(--dot);
                border-radius: 50%;
                background: #3EB885;
                background: var(--color-brand);
                box-shadow: 0 0 0 6px rgba(62, 184, 133, 0.2);
                animation: apps-splash-trip var(--trip) cubic-bezier(0.65, 0, 0.35, 1) infinite;
                animation: apps-splash-trip var(--trip) var(--ease-in-out) infinite;
            }
/* exactly as wide as its icon, so the wire meets every icon at its edge; a
           longer name hangs centred beneath it, wrapping rather than pushing it in */
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header a {
            display: grid;
            grid-template-columns: var(--icon);
            justify-items: center;
            grid-gap: 16px;
            gap: 16px;
            color: #000000;
            color: var(--color-text);
            font-size: 1.0625rem;
            font-weight: 600;
            -webkit-text-decoration: none;
            text-decoration: none;
        }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header a span {
                width: -moz-max-content;
                width: max-content;
                max-width: calc(var(--icon) + 48px);
                text-align: center;
            }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header img {
            width: var(--icon);
            height: var(--icon);
            border-radius: var(--squircle);
            box-shadow: 0 14px 34px rgba(13, 48, 39, 0.24);
            animation: apps-splash-land var(--trip) cubic-bezier(0.16, 1, 0.3, 1) infinite;
            animation: apps-splash-land var(--trip) var(--ease-out) infinite;
        }
/* the right icon takes the message halfway through the trip, the left one as it ends */
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header li:first-child img {
            animation-delay: calc(var(--trip) / -2);
        }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header a:hover img {
            box-shadow: 0 18px 40px rgba(13, 48, 39, 0.3);
        }
/* the apps side by side, each in its own world: home on the light green,
       the support team on the deep green of the apps' own dark mode */
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > div {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
    }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section {
        --accent: var(--color-brand-ink);
        --soft: rgba(0, 0, 0, 0.66);

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 120px max(56px, (100% - 620px) / 2) 0;
        overflow: hidden;
        background: #ECF6EF;
        background: var(--green-400);
        scroll-margin-block-start: 40px;
    }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section:nth-child(even) {
            --accent: var(--lime);
            --soft: rgba(255, 255, 255, 0.8);

            background: var(--deep);
            color: #FFFFFF;
        }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section:nth-child(even) a:focus-visible {
                outline-color: var(--lime);
            }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section p:first-child {
            margin: 0;
            color: var(--accent);
            font-size: 0.9375rem;
            font-weight: 600;
            line-height: 1.5rem;
            letter-spacing: 3px;
            text-transform: uppercase;
        }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section h2 {
            margin: 8px 0 0;
            font-size: 3.25rem;
            font-weight: 700;
            line-height: 1.05;
        }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section h2 + p {
            margin: 16px 0 0;
            font-size: 1.75rem;
            font-weight: 500;
            line-height: 1.25;
        }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section h2 + p + p {
            margin: 22px 0 0;
            color: var(--soft);
            font-size: 1.1875rem;
            line-height: 2rem;
        }
/* the store badges */
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section h2 + p + p + p {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin: 32px 0 0;
        }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section h2 + p + p + p a {
                display: block;
                border-radius: 10px;
                transition: translate 220ms cubic-bezier(0.16, 1, 0.3, 1);
                transition: translate var(--duration-base) var(--ease-out);
            }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section h2 + p + p + p a:hover {
                    translate: 0 -3px;
                }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section h2 + p + p + p img {
                display: block;
                width: auto;
                height: 54px;
            }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section small {
            margin-top: 20px;
            color: var(--soft);
            font-size: 0.9375rem;
            line-height: 1.5rem;
        }
/* the devices stand at the foot of the half, cut off by its edge. A phone
           alone shows a little over half of itself; a tablet shows most of itself,
           with a phone standing in front of its right side (the cut-outs are
           720 × 1539 and 1600 × 1207) */
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section  > figure {
            --tablet: min(560px, 90%);

            position: relative;
            align-self: center;
            width: var(--phone);
            margin: auto 0 calc(var(--phone) * 1539 / 720 * (var(--showing) - 1));
            padding-top: 72px;
            filter: var(--lift);
        }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section > figure:has(img + img) {
                width: var(--tablet);
                margin-bottom: calc(var(--tablet) * 1207 / 1600 * -0.22);
            }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section > figure img {
                display: block;
                width: 100%;
                height: auto;
            }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section > figure img + img {
                position: absolute;
                right: -7%;
                bottom: 0;
                width: 30%;
                filter: drop-shadow(-10px 14px 22px rgba(13, 48, 39, 0.28));
            }
/* the devices rise into place as their half scrolls in, where the browser can tie it to the scroll */
@supports (animation-timeline: view()) {
        .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section > figure {
            animation: apps-splash-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 100%;
        }
    }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > footer {
        display: grid;
        justify-items: center;
        padding: 140px 1.5rem 40px;
        padding: 140px var(--container-gutter) 40px;
        text-align: center;
    }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer h2 {
            margin: 0;
            font-size: 3rem;
            font-weight: 700;
            line-height: 1.1;
            text-wrap: balance;
        }
.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer p {
            max-width: 760px;
            margin: 20px 0 0;
            font-size: 1.25rem;
            line-height: 2.125rem;
            text-wrap: pretty;
        }
@media (prefers-reduced-motion: reduce) {
            :root:not([data-motion="full"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .apps_splash  > header ul::after {
                animation: none;
                left: calc(50% - var(--dot) / 2);
            }

            :root:not([data-motion="full"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .apps_splash  > header img {
                animation: none;
            }

            :root:not([data-motion="full"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .apps_splash section > figure {
                animation: none;
            }
    }
[data-motion="reduced"]:root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .apps_splash  > header ul::after {
            animation: none;
            left: calc(50% - var(--dot) / 2);
        }
[data-motion="reduced"]:root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .apps_splash  > header img {
            animation: none;
        }
[data-motion="reduced"]:root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .apps_splash section > figure {
            animation: none;
        }
@media (max-width: 89.999rem) {
        .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > header {
            padding-top: 180px;
        }

            .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header h1 {
                font-size: 3.75rem;
            }

        .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section h2 {
            font-size: 2.875rem;
        }
    }
@media (max-width: 67.499rem) {

.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --icon: 112px;
        --wire: 500px;
}

        .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > header {
            padding-top: 150px;
            padding-bottom: 96px;
        }

        .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section {
            padding-top: 96px;
        }
    }
@media (max-width: 47.999rem) {

.apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --icon: 84px;
        --wire: 300px;
        --gap: 10px;
        --dot: 12px;
        --phone: 240px;
}

        .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > header {
            padding-top: 120px;
            padding-bottom: 72px;
        }

            .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header h1 {
                font-size: 2.625rem;
            }

            .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header p {
                font-size: 1.1875rem;
                line-height: 1.875rem;
            }

            .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header ul {
                margin-top: 56px;
            }

            .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > header a {
                font-size: 0.9375rem;
            }

        .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section {
            padding: 72px 1.5rem 0;
            padding: 72px var(--container-gutter) 0;
        }

            .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section h2 {
                font-size: 2.375rem;
            }

            .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section h2 + p {
                font-size: 1.4375rem;
            }

            .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section h2 + p + p {
                font-size: 1.125rem;
                line-height: 1.875rem;
            }

            .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section h2 + p + p + p img {
                height: 48px;
            }

        .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > footer {
            padding-top: 96px;
        }

            .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer h2 {
                font-size: 2.125rem;
            }

            .apps_splash:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > footer p {
                font-size: 1.125rem;
                line-height: 1.875rem;
            }
    }
/* keyframes cannot nest inside a style rule, so they live out here. The trip moves
   the dot's offset in the row rather than translating it, so 100% is the wire's
   length and it fits at every size */
/* an editor's own text and pictures, read like a post's body */
.rich_text:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 120px;

    width: min(860px, 100% - 2 * 1.5rem);

    width: min(860px, 100% - 2 * var(--container-gutter));
    margin: 120px auto 0;
    margin: var(--gap) auto 0;
    font-size: 1.1875rem;
    line-height: 2rem;
}
.rich_text:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > :first-child {
        margin-top: 0;
    }
.rich_text:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        margin: 48px 0 12px;
        font-size: 1.875rem;
        font-weight: 700;
        line-height: 1.2;
    }
.rich_text:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h3 {
        margin: 32px 0 8px;
        font-size: 1.375rem;
        font-weight: 700;
    }
.rich_text:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
        margin: 0 0 18px;
    }
.rich_text:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul,.rich_text:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ol {
        margin: 0 0 18px;
        padding-left: 24px;
    }
.rich_text:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        margin: 0;
    }
.rich_text:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 8px auto 40px;
    }
@media (max-width: 47.999rem) {
.rich_text:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 88px;

        font-size: 1.0625rem;
        line-height: 1.8125rem;
}
    }
.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 160px;
    --panel: var(--green-400);

    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* the empty first and last rows take any height the picture adds, so the quote centres against it */
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-column-gap: 80px;
    -moz-column-gap: 80px;
         column-gap: 80px;
    width: min(1600px, 100% - 2 * 1.5rem);
    width: min(1600px, 100% - 2 * var(--container-gutter));
    margin: 160px auto 0;
    margin: var(--gap) auto 0;
    padding: 0;

    /* the panel behind the portrait, quote and name; a pseudo-element can take a
       grid area, so the panel needs no wrapper of its own */
}
.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before {
        content: "";
        grid-column: 1;
        grid-row: 1 / -1;
        border-radius: 32px;
        background: var(--panel);
        z-index: -1;
    }
.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img[data-portrait] {
        grid-column: 1;
        grid-row: 2;
        width: 220px;
        height: auto;
        margin: 64px 0 0 64px;
    }
.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img[data-picture] {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: center;
        justify-self: center;
        width: min(560px, 100%);
        height: auto;
    }
.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote {
        grid-column: 1;
        grid-row: 3;
        margin: 36px 64px 0;
        padding: 0;
    }
.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote p {
            margin: 0;
            font-size: 1.75rem;
            font-weight: 500;
            line-height: 1.45;
            text-wrap: pretty;
        }
.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote p::before {
                content: "\201C";
            }
.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote p::after {
                content: "\201D";
            }
.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
        grid-column: 1;
        grid-row: 4;
        margin: 24px 64px 64px;
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 1rem;
        line-height: 1.625rem;
    }
.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption b {
            font-weight: 700;
        }
/* the picture first, the panel on the right */
.pull_quote[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before,.pull_quote[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img[data-portrait],.pull_quote[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote,.pull_quote[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
            grid-column: 2;
        }
.pull_quote[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img[data-picture] {
            grid-column: 1;
        }
/* no portrait and no picture: the quote alone, on the apps' deep green */
.pull_quote[data-layout="banner"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        --panel: #0E3B2D;

        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        color: #FFFFFF;
        text-align: center;
    }
.pull_quote[data-layout="banner"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote {
            grid-row: 1;
            margin: 88px max(64px, (100% - 1080px) / 2) 0;
        }
.pull_quote[data-layout="banner"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote p {
                font-size: 2.25rem;
                font-weight: 600;
                line-height: 1.35;
            }
.pull_quote[data-layout="banner"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
            grid-row: 2;
            margin: 28px 64px 88px;
            color: #C2E32F;
        }
@media (max-width: 89.999rem) {
.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        -moz-column-gap: 56px;
             column-gap: 56px;
}

        .pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote p {
            font-size: 1.5rem;
        }

        .pull_quote[data-layout="banner"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote p {
            font-size: 1.875rem;
        }
    }
/* one column: the panel, then the picture under it */
@media (max-width: 67.499rem) {
.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 120px;

        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
}

        .pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before,.pull_quote[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before {
            grid-column: 1;
            grid-row: 1 / 4;
        }

        .pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img[data-portrait] {
            grid-row: 1;
        }

        .pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote {
            grid-row: 2;
        }

        .pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
            grid-row: 3;
        }

        .pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img[data-portrait],.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote,.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption,.pull_quote[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > img[data-portrait],.pull_quote[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote,.pull_quote[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
            grid-column: 1;
        }

        .pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img[data-picture],.pull_quote[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > img[data-picture] {
            grid-column: 1;
            grid-row: 4;
            width: min(440px, 100%);
            margin-top: 48px;
        }
    }
@media (max-width: 47.999rem) {
.pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 88px;
}

        .pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img[data-portrait] {
            width: 160px;
            margin: 40px 0 0 28px;
        }

        .pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote {
            margin: 24px 28px 0;
        }

            .pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote p {
                font-size: 1.25rem;
            }

        .pull_quote:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
            margin: 18px 28px 40px;
            font-size: 0.9375rem;
        }
            .pull_quote[data-layout="banner"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote {
                margin: 56px 28px 0;
            }

                .pull_quote[data-layout="banner"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) blockquote p {
                    font-size: 1.4375rem;
                }

            .pull_quote[data-layout="banner"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
                margin: 20px 28px 56px;
            }
    }
.split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 160px;

    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-column-gap: 96px;
    -moz-column-gap: 96px;
         column-gap: 96px;
    align-items: center;
    width: min(1600px, 100% - 2 * 1.5rem);
    width: min(1600px, 100% - 2 * var(--container-gutter));
    margin: 160px auto 0;
    margin: var(--gap) auto 0;

    /* the same header as the feature and platform depths */
}
.split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin: 0 0 24px;
        padding-top: 16px;
        border-top: 14px solid #3EB885;
        border-top: 14px solid var(--color-brand);
        font-size: 2.625rem;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0;
    }
.split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > div {
        font-size: 1.1875rem;
        line-height: 2rem;
    }
.split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div p {
            margin: 0 0 16px;
        }
.split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div ul {
            display: grid;
            grid-gap: 10px;
            gap: 10px;
            margin: 8px 0 24px;
            padding: 0;
            list-style: none;
        }
.split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div li {
            position: relative;
            margin: 0;
            padding-left: 32px;
        }
.split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div li::before {
                content: "";
                position: absolute;
                left: 4px;
                top: 11px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #3EB885;
                background: var(--color-brand);
            }
.split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img {
        justify-self: center;
        width: min(560px, 100%);
        height: auto;
    }
.split[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    }
.split[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img {
            grid-column: 1;
            grid-row: 1;
        }
.split[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > div {
            grid-column: 2;
        }
@media (max-width: 89.999rem) {
.split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        -moz-column-gap: 64px;
             column-gap: 64px;
}

        .split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 2.25rem;
        }
    }
@media (max-width: 67.499rem) {
.split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 120px;
}

        .split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#),.split[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
            grid-template-columns: minmax(0, 1fr);
        }

        .split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img,.split[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > img {
            grid-column: 1;
            grid-row: 2;
            width: min(440px, 100%);
            margin-top: 40px;
        }

        .split[data-layout="flipped"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > div {
            grid-column: 1;
        }
    }
@media (max-width: 47.999rem) {
.split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 88px;
}

        .split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 1.875rem;
            border-top-width: 10px;
        }

        .split:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > div {
            font-size: 1.0625rem;
            line-height: 1.8125rem;
        }
    }
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 160px;

    margin: 160px 0 0;

    margin: var(--gap) 0 0;
    padding: 96px 1.5rem 120px;
    padding: 96px var(--container-gutter) 120px;
    background: #ECF6EF;
    background: var(--green-400);

    /* a small label over the cards */
}
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
        margin: 0 auto 48px;
        padding-bottom: 8px;
        border-bottom: 3px solid #000000;
        border-bottom: 3px solid var(--color-text);
        font-size: 0.9375rem;
        font-weight: 700;
        line-height: 1.5rem;
        letter-spacing: 1px;
    }
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 520px));
        justify-content: center;
        grid-gap: 64px 120px;
        gap: 64px 120px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 0;
        padding: 48px;
        border-radius: 24px;
        background: #FFFFFF;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.07), 0 12px 32px rgba(0, 0, 0, 0.1);
        box-shadow: var(--shadow-lg);

        /* the plus between partners */
    }
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li + li::before {
            content: "+";
            position: absolute;
            left: -60px;
            top: 50%;
            translate: -50% -50%;
            color: rgba(0, 0, 0, 0.25);
            font-size: 4rem;
            font-weight: 300;
            line-height: 1;
        }
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li  > img {
            width: auto;
            max-width: 100%;
            height: 48px;
            margin-bottom: 32px;
        }
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li  > p {
            margin: 0 0 12px;
            font-size: 1.0625rem;
            line-height: 1.75rem;
        }
/* the contact sits at the foot, so the two cards' contacts line up */
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li address {
            display: grid;
            grid-template-columns: 120px minmax(0, 1fr);
            grid-column-gap: 24px;
            -moz-column-gap: 24px;
                 column-gap: 24px;
            align-content: start;
            width: 100%;
            margin: auto 0 0;
            padding-top: 32px;
            border-top: 1px solid rgba(0, 0, 0, 0.12);
            font-size: 0.9375rem;
            font-style: normal;
            line-height: 1.5rem;
        }
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li address  > * {
                grid-column: 2;
            }
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li address img {
                grid-column: 1;
                grid-row: 1 / span 8;
                align-self: start;
                width: 120px;
                height: auto;
            }
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li address b {
                font-size: 1.0625rem;
            }
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li address a {
                color: #3EB885;
                color: var(--color-brand-ink);
                word-wrap: anywhere;
            }
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li  > a {
            display: inline-flex;
            align-items: center;
            margin-top: 32px;
            padding: 0 24px;
            height: 48px;
            border-radius: 62.5rem;
            border-radius: var(--radius-full);
            background: #3EB885;
            background: var(--color-brand);
            color: #FFFFFF;
            color: var(--color-on-brand);
            font-size: 0.9375rem;
            font-weight: 600;
            letter-spacing: 1px;
            -webkit-text-decoration: none;
            text-decoration: none;
            text-transform: uppercase;
            transition: background 220ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: background var(--duration-base) var(--ease-out);
        }
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li > a:hover {
                background: #339D71;
                background: var(--color-brand-hover);
            }
/* stacked, the plus sits between the cards instead */
@media (max-width: 67.499rem) {
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 120px;
}

        .partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
            gap: 96px;
        }

        .partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li + li::before {
            left: 50%;
            top: -48px;
        }
    }
@media (max-width: 47.999rem) {
.partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 88px;

        padding-top: 64px;

        padding-bottom: 80px;
}

        .partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
            padding: 32px 24px;
        }

        .partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li address {
            grid-template-columns: 88px minmax(0, 1fr);
            -moz-column-gap: 16px;
                 column-gap: 16px;
        }

            .partner_cards:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li address img {
                width: 88px;
            }
    }
/* The Remote Supports calculator from calc.hearo.net (calculator/App.jsx), Missouri only.
   Its stylesheet came over as it was, every rule scoped to the module so neither side leaks
   into the other. The stage is the 1463 x 1225 Figma frame less its own title, scaled to fit
   by the app; at 900px and under the app swaps to its phone layout. */
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 96px;
    --green: #3eb885;
    --green-dark: #169f6b;
    --red: #ff0000;
    --orange: #fea150;
    --line: #bfbfbf;
    --work-top: 0px;
    --field-height: 44px;

    display: block;
    width: min(1463px, 100% - 2 * 1.5rem);
    width: min(1463px, 100% - 2 * var(--container-gutter));
    margin: 96px auto 0;
    margin: var(--gap) auto 0;
    color: #000000;
    font-family: "GarantPro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji";
    font-family: var(--font-sans);
    font-synthesis: none;
}
@media (max-width: 47.999rem) {
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 64px;
}
    }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) * { box-sizing: border-box; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button, .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input { font: inherit; }
/* below the site's sticky header: switching Inputs and Results scrolls the calculator's top here */
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .calculator-shell { scroll-margin-block-start: calc(110px + 30px + 16px); scroll-margin-block-start: calc(var(--header-height) + var(--header-drop, 0px) + 16px); }
/* the site's own form styles pad every input and weight every label; the calculator draws its own */
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input { padding: 0; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label { font-weight: inherit; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button { color: inherit; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .app { overflow: hidden; background: #fff; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .calculator-shell { position: relative; width: 100%; overflow: hidden; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .calculator { position: absolute; top: 0; left: 50%; width: 1463px; height: 1225px; transform-origin: top center; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .controls { position: absolute; left: 0; top: var(--work-top); width: 362px; height: 1021px; overflow: visible; background: transparent; border-radius: 12px; z-index: 4; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .controls-head { height: 90px; padding: 0 24px; display: grid; align-items: center; justify-items: center; place-items: center; border-radius: 12px 12px 0 0; background: var(--green); color: #fff; text-align: center; text-transform: uppercase; font-size: 1.375rem; line-height: 1.375rem; font-weight: 700; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step { position: relative; width: 362px; padding: 20px 12px 0 46.5px; background: #f4f4f4; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step::after { content: ""; position: absolute; left: 12.5px; right: 12.5px; bottom: 0; height: 1px; background: #fff; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step-1 { height: 119px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step-2 { height: 170px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step-3 { height: 139px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step-4 { height: 126px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step-5 { height: 120px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step-6 { height: 121px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step-title { display: flex; align-items: center; gap: 10px; height: 36px; font-size: 1.125rem; line-height: 1.375rem; font-weight: 700; white-space: nowrap; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step-number { width: 36px; height: 36px; flex: 0 0 36px; display: grid; align-items: center; justify-items: center; place-items: center; color: #fff; background: var(--green); border-radius: 50%; font-size: 0.8125rem; line-height: 0.9375rem; letter-spacing: .03em; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .help { width: 19.4px; height: 19.4px; display: grid; align-items: center; justify-items: center; place-items: center; border-radius: 50%; background: #7da3a2; color: #fff; font-size: 0.8125rem; line-height: 1.1875rem; cursor: help; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step-control { margin: 8px 0 0 46.5px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .segmented { width: 177px; height: var(--field-height); display: grid; grid-template-columns: repeat(2, 1fr); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .segmented button { height: var(--field-height); border: 0; border-bottom: 1px solid #9d9d9d; padding: 0 4px 7px; background: transparent; font-size: 1.125rem; line-height: 1.3125rem; cursor: pointer; transition: color .22s ease, border-width .28s cubic-bezier(.16, 1, .3, 1), transform .18s ease; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .segmented button:hover { color: var(--green-dark); transform: translateY(-1px); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .segmented button:active { transform: translateY(1px) scale(.98); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .segmented button.active { border-bottom: 8px solid var(--green); padding-bottom: 0; color: var(--green); font-weight: 400; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .segmented button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .radio-list { display: grid; grid-gap: 0; gap: 0; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .radio-list label { display: flex; align-items: center; gap: 7px; min-height: 32px; font-size: 1.125rem; line-height: 2rem; cursor: pointer; white-space: nowrap; transition: color .18s ease, transform .18s ease; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .radio-list label:hover { color: var(--green-dark); transform: translateX(2px); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .radio-list input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 26.44px; height: 26.44px; margin: 0; border: 1px solid #bfbfbf; border-radius: 50%; background: #fff; transition: background .2s ease, border-width .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.16, 1, .3, 1); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .radio-list input:checked { border: 5.4px solid #fff; background: #000; box-shadow: 0 0 0 1px #bfbfbf; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .radio-list input:active { transform: scale(.86); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .radio-list small { color: #000; font-size: 1rem; font-style: italic; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .breakdown-list { width: 145px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .number-control { width: 130px; height: var(--field-height); display: grid; grid-template-columns: 1fr 28px; border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; transition: border-color .2s ease, box-shadow .26s ease, outline-color .2s ease, transform .24s cubic-bezier(.16, 1, .3, 1); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .number-control:hover { border-color: var(--green); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(23, 61, 45, .08); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .number-control.compact { width: 90px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .number-control:focus, .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .number-control:focus-visible, .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .number-control:focus-within { outline: 3px solid rgba(62, 184, 133, .38); border-color: var(--green-dark); transform: translateY(-1px); box-shadow: 0 7px 18px rgba(23, 61, 45, .11); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .number-control output { display: grid; align-items: center; justify-items: center; place-items: center; padding-left: 8px; font-size: 1.125rem; line-height: 1.625rem; font-weight: 400; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .number-arrows { display: grid; grid-template-rows: 1fr 1fr; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .number-arrows button { border: 0; padding: 0; background: #fff; cursor: pointer; font-size: 0.9375rem; line-height: 1; transition: color .16s ease, background .16s ease, transform .12s ease; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .number-arrows button:hover { color: var(--green-dark); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .number-arrows button:active { background: #e7f6ef; transform: scale(.78); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .number-arrows button:disabled { color: #aaa; cursor: default; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .input-with-icon { display: flex; align-items: center; gap: 10px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .control-icon { display: block; -o-object-fit: contain; object-fit: contain; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .monitor-control-icon { width: 32.44px; height: 25.23px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .person-control-icon { width: 18.16px; height: 46.46px; margin-top: -4px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .compare-row { height: 96px; padding: 18px 18px 15px; background: #e5f3e8; border-radius: 0 0 12px 12px; display: grid; align-content: center; justify-items: center; grid-gap: 9px; gap: 9px; font-size: 0.875rem; line-height: 1rem; font-weight: 700; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .toggle { border: 0; background: transparent; display: flex; align-items: center; gap: 11px; cursor: pointer; font-size: 0.875rem; line-height: 1rem; color: #000; letter-spacing: .04em; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .toggle:hover { transform: scale(1.025); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .toggle:active { transform: scale(.97); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .toggle i { width: 75px; height: 31.8px; padding: 3.8px; display: block; background: #aeb7b2; border: 1.27px solid #fff; border-radius: 64px; transition: background .28s ease, box-shadow .28s ease; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .toggle:hover i { box-shadow: 0 5px 15px rgba(23, 61, 45, .14); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .toggle b { display: block; width: 24.15px; height: 24.15px; border-radius: 50%; background: #fff; box-shadow: 2px 2px 0 rgba(0,0,0,.18); transition: transform .36s cubic-bezier(.16, 1.2, .3, 1), box-shadow .2s ease; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .toggle.on i { background: var(--orange); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .toggle.on b { transform: translateX(42px); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .reset { width: 362px; height: 40px; border: 0; background: transparent; color: var(--green); padding: 12px 0 0; font-size: 1rem; line-height: 1.625rem; font-weight: 700; -webkit-text-decoration: underline; text-decoration: underline; cursor: pointer; transition: color .2s ease, transform .2s ease; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .reset:hover { color: var(--green-dark); transform: translateY(-1px); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .reset:active { transform: translateY(1px); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .visual { position: absolute; left: 464.585px; top: var(--work-top); width: 998.415px; height: 1222.375px; isolation: isolate; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .motion-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-origin: 52% 72%; will-change: transform, opacity; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .scene { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#) .scene canvas { width: 100% !important; height: 100% !important; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric { position: absolute; z-index: 1; display: block; color: var(--green); font-weight: 700; text-align: center; transition: left .52s cubic-bezier(.16, 1, .3, 1), top .52s cubic-bezier(.16, 1, .3, 1), opacity .25s ease, transform .38s cubic-bezier(.16, 1, .3, 1); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric strong, .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric span, .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric small { display: block; white-space: nowrap; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric strong { font-size: 1.625rem; line-height: 1.375rem; letter-spacing: 0; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric span { font-size: 1.25rem; line-height: 1.375rem; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric small { font-size: 0.875rem; line-height: 1.375rem; text-transform: uppercase; letter-spacing: .05em; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric em { position: absolute; display: grid; align-items: center; justify-items: center; place-items: center; height: 25.91px; padding: 0; background: currentColor; color: #fff; font-size: 0.875rem; line-height: 1.0625rem; text-transform: uppercase; font-style: normal; letter-spacing: .04em; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-line { position: absolute; display: block; width: 2px; height: 30px; background: currentColor; transition: top .52s cubic-bezier(.16, 1, .3, 1), height .52s cubic-bezier(.16, 1, .3, 1); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-bracket { position: absolute; display: block; width: 36.252px; border-right: 5px solid currentColor; transition: left .52s cubic-bezier(.16, 1, .3, 1), top .52s cubic-bezier(.16, 1, .3, 1), height .52s cubic-bezier(.16, 1, .3, 1); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-bracket::before, .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-bracket::after { content: ""; position: absolute; right: -2px; width: 38px; height: 5px; background: currentColor; transform-origin: right center; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-bracket::before { top: 0; transform: rotate(-15.8deg); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-bracket::after { bottom: 0; transform: rotate(-15.8deg); }
/* The capacity bracket sits left of the wall, so its caps open inward to the right. */
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-net .metric-bracket { border-right: 0; border-left: 5px solid currentColor; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-net .metric-bracket::before, .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-net .metric-bracket::after { left: -2px; right: auto; transform-origin: left center; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-net .metric-bracket::before { transform: rotate(-15.8deg); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-net .metric-bracket::after { transform: rotate(-15.8deg); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-gross { left: 238.209px; top: 0; width: 228.412px; height: 69px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-gross .metric-line { left: 113.206px; top: 77.878px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-net { left: 20.415px; top: 461.048px; width: 191px; height: 64.92px; text-align: right; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-net .metric-bracket { left: 197.766px; top: -311.064px; height: 740.75px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-net em { left: 22px; top: 72.2px; width: 151.5px; background: var(--green); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-compare { left: 769.75px; top: 570.828px; width: 228.665px; height: 69px; color: var(--orange); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-compare.is-hidden { opacity: 0; transform: translateX(-10px) scale(.96); pointer-events: none; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-compare.is-visible { opacity: 1; transform: translateX(0) scale(1); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-compare .metric-bracket { left: -48.252px; top: -54.468px; height: 229.75px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-compare em { left: 66.138px; top: 71.3px; width: 98.943px; background: var(--orange); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-cost { left: 816.408px; top: 745.727px; width: 159.007px; height: 69.663px; color: var(--red); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-cost .metric-bracket { left: -48.243px; top: -20.471px; height: 123.75px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-salary { left: 332.816px; top: 1049.942px; width: 121.197px; height: 72px; color: var(--red); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .metric-salary .metric-line { left: 60.599px; top: -35.867px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mode-state .metric-cost { left: 788px; width: 210px; color: var(--orange); }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mode-state .metric-cost .metric-bracket { left: -48.243px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mode-state .metric-cost span { white-space: normal; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .scene-caption { position: absolute; z-index: 1; left: 0; top: 1144.375px; width: 785.832px; height: 78px; display: grid; align-content: start; justify-items: center; color: #222; font-size: 0.875rem; line-height: 1.375rem; text-align: center; font-style: italic; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .scene-caption p { margin: 0; max-width: 785.832px; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-results { display: none; }
.remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-view-switch, .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-results-cta { display: none; }
@media (max-width: 900px) {
  /* clip rather than hide: hidden makes .app a scroll container, and the Inputs/Results switch stops sticking */
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .app { overflow-x: hidden; overflow-x: clip; overflow-y: visible; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#) .calculator-shell { height: auto !important; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .calculator-shell { overflow: visible; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#) .calculator { transform: none !important; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .calculator { position: relative; top: auto; left: auto; width: min(100%, 540px); height: auto; margin: 0 auto; padding: 0; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-view-switch { position: sticky; top: calc(110px + 30px + 8px); top: calc(var(--header-height) + var(--header-drop, 0px) + 8px); z-index: 10; width: 100%; height: 48px; margin: 0 0 20px; padding: 4px; display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid rgba(62, 184, 133, .24); border-radius: 14px; background: rgba(245, 251, 248, .9); box-shadow: 0 10px 28px rgba(23, 61, 45, .08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-view-switch button { border: 0; border-radius: 10px; background: transparent; color: #53635c; font-size: 0.875rem; line-height: 1.125rem; font-weight: 800; cursor: pointer; transition: color .2s ease, background .28s ease, box-shadow .28s ease, transform .2s ease; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-view-switch button.active { background: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(22, 159, 107, .24); }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-view-switch button:active { transform: scale(.98); }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .controls { position: relative; left: auto; top: auto; width: 100%; height: auto; margin: 0 auto; transform-origin: top center; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .controls-head { height: 76px; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .controls-head, .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step, .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .reset { width: 100%; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-view-results .controls { display: none; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-view-inputs .mobile-results { display: none; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-results-cta { width: 100%; min-height: 74px; margin: 14px 0 0; padding: 12px 18px; border: 0; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--green); color: #fff; cursor: pointer; box-shadow: 0 12px 28px rgba(22, 159, 107, .2); text-align: left; transition: transform .2s ease, box-shadow .2s ease; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-results-cta:active { transform: scale(.985); box-shadow: 0 6px 18px rgba(22, 159, 107, .2); }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-results-cta span { font-size: 1rem; line-height: 1.25rem; font-weight: 800; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-results-cta strong { font-size: max(1.25rem, min(6vw, 1.625rem)); line-height: 1.75rem; white-space: nowrap; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-results { position: relative; display: block; width: 100%; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-results-heading { margin: 0 0 18px; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-results-kicker { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-results-kicker > span { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 10px; border-radius: 999px; background: #e4f5ed; color: var(--green-dark); font-size: 0.75rem; line-height: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-results-kicker button { border: 0; padding: 4px 0; background: transparent; color: var(--green-dark); font-size: 0.8125rem; line-height: 1.0625rem; font-weight: 800; -webkit-text-decoration: underline; text-decoration: underline; cursor: pointer; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-results-heading h2 { margin: 10px 0 5px; font-size: 1.875rem; line-height: 2rem; letter-spacing: -.025em; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-results-heading p { margin: 0; color: #56635e; font-size: 0.9375rem; line-height: 1.3125rem; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 10px; gap: 10px; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-kpi { min-width: 0; min-height: 126px; padding: 15px 13px 14px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid rgba(62, 184, 133, .2); border-radius: 14px; background: linear-gradient(145deg, #f7fffb, #e9f8f1); box-shadow: 0 12px 34px rgba(23, 61, 45, .07); color: var(--green-dark); transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-kpi:active { transform: scale(.985); box-shadow: 0 6px 18px rgba(23, 61, 45, .08); }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-kpi.tone-red { border-color: rgba(255, 0, 0, .14); background: linear-gradient(145deg, #fffafa, #fff0ef); color: var(--red); }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-kpi.tone-orange { border-color: rgba(254, 161, 80, .24); background: linear-gradient(145deg, #fffaf5, #fff1e3); color: #e6791b; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-kpi > span { min-height: 34px; color: #52625b; font-size: 0.75rem; line-height: 1rem; font-weight: 750; text-transform: uppercase; letter-spacing: .045em; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-kpi strong { margin-top: 5px; font-size: max(1.25rem, min(6vw, 1.6875rem)); line-height: 1.75rem; letter-spacing: -.025em; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-kpi small { margin-top: 3px; font-size: 0.6875rem; line-height: 0.9375rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-kpi em { margin-top: 8px; padding: 4px 7px; background: var(--green); color: #fff; font-size: 0.625rem; line-height: 0.75rem; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .055em; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-kpi.tone-red em { background: var(--red); }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-kpi.tone-orange em { background: var(--orange); }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-chart-card { margin: 12px 0; overflow: hidden; border: 1px solid rgba(62, 184, 133, .2); border-radius: 18px; background: radial-gradient(circle at 70% 35%, #fff 0,#fff 24%, #f4faf7 74%); background: radial-gradient(circle at 70% 35%, #fff 0 24%, #f4faf7 74%); box-shadow: 0 18px 46px rgba(23, 61, 45, .09); }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-chart-toolbar { min-height: 54px; padding: 14px 15px 10px; display: flex; align-items: baseline; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-chart-toolbar span { font-size: 1rem; line-height: 1.25rem; font-weight: 800; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-chart-scene { width: 100%; height: max(350px, min(98vw, 430px)); -moz-user-select: none; user-select: none; -webkit-user-select: none; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-kpi-grid-secondary .mobile-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 108px; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-caption { margin: 22px 8px 0; color: #4c5752; font-size: 0.8125rem; line-height: 1.25rem; text-align: center; font-style: italic; }
}
@media (max-width: 480px) {
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .calculator { width: 100%; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step { padding-left: 24px; padding-right: 8px; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step-control { margin-left: 44px; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .step-title { gap: 8px; font-size: 1.0625rem; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .radio-list label { font-size: 1rem; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .radio-list small { font-size: 0.875rem; }
  .remote_supports_calculator:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .mobile-chart-scene { height: max(340px, min(98vw, 410px)); }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]):not(#\#):not(#\#):not(#\#) .remote_supports_calculator *, :root:not([data-motion="full"]):not(#\#):not(#\#):not(#\#) .remote_supports_calculator *::before, :root:not([data-motion="full"]):not(#\#):not(#\#):not(#\#) .remote_supports_calculator *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
:root[data-motion="reduced"]:not(#\#):not(#\#):not(#\#) .remote_supports_calculator *, :root[data-motion="reduced"]:not(#\#):not(#\#):not(#\#) .remote_supports_calculator *::before, :root[data-motion="reduced"]:not(#\#):not(#\#):not(#\#) .remote_supports_calculator *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
.video_snippet:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    --size: 240px;

    display: grid;
    justify-items: center;
    align-content: start;
    width: min(740px, 100% - 2 * 1.5rem);
    width: min(740px, 100% - 2 * var(--container-gutter));
    margin: 200px auto 0 auto;
    margin: var(--gap) auto 0 auto;
    padding: 56px 1.5rem 36px;
    padding: 56px var(--container-gutter) 36px;
    background: #576D6B;
    background: var(--nav-panel-bg);
    border-radius: 62.5rem;
    border-radius: var(--radius-full);
    color: #FFFFFF;
    color: var(--nav-panel-fg);
}
.video_snippet:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) video {
        width: var(--size);
        height: var(--size);
        -o-object-fit: cover;
           object-fit: cover;
        border: 3px solid #8FA3A6;
    }
.video_snippet:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
        margin-top: 12px;
        font-size: 1.625rem;
        line-height: 2.5rem;
        text-align: center;
    }
@media (max-width: 67.499rem) {
.video_snippet:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
}
    }
@media (max-width: 47.999rem) {
.video_snippet:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
        --size: 200px;

        padding-top: 44px;

        padding-bottom: 44px;
}

        .video_snippet:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
            font-size: 1.25rem;
            line-height: 1.35;
        }
    }
@media (max-width: 29.999rem) {
.video_snippet:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --size: 160px;

        /* a full pill on a box this narrow eats the video's corners */
        border-radius: 40px;
        padding-top: 32px;
        padding-bottom: 28px;
}

        .video_snippet:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
            font-size: 1.125rem;
        }
    }
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --rule: #C9D3CF;
    --inset: 62px;
    --list: 1100px;
    --badge: 100px;
    --gap: 200px;

    position: relative;
    margin-top: calc(200px + 100px / 2);
    margin-top: calc(var(--gap) + var(--badge) / 2);
    /* side padding brings the content box down to the list width, so the
       see-all link can right-align to it with a plain auto margin */
    padding: 96px max(1.5rem, (100% - 1100px) / 2) 96px;
    padding: 96px max(var(--container-gutter), (100% - var(--list)) / 2) 96px;
    background: #ECF6EF;
    background: var(--green-400);
}
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img {
        position: absolute;
        top: calc(var(--badge) / -2);
        left: 50%;
        translate: -50% 0;
        width: var(--badge);
        height: var(--badge);
    }
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        margin: 0 0 56px;
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 2.75rem;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0;
        text-align: center;
    }
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details {
        margin: 0 0 10px;
        background: #FFFFFF;
        border: 1px solid var(--rule);
        border-radius: 8px;
    }
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details[open] summary {
            color: #3EB885;
            color: var(--color-brand-ink);
        }
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details[open] summary::before {
                content: "\2013";
            }
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary {
        position: relative;
        padding: 12px var(--inset);
        font-size: 1.25rem;
        line-height: 1.875rem;
        list-style: none;
        cursor: pointer;
    }
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary::-webkit-details-marker {
            display: none;
        }
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary::before {
            content: "+";
            position: absolute;
            left: calc(var(--inset) / 2 - 14px);
            top: 9px;
            width: 29px;
            font-size: 1.75rem;
            line-height: 1.875rem;
            text-align: center;
        }
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > p {
        margin: 23px 0 0;
        padding: 0 var(--inset) 11px;
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
/* back-to-back groups on the FAQs page share one mint band */
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + .faq {
        margin-top: 0;
        padding-top: 0;
    }
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + .faq  > img {
            position: static;
            translate: none;
            margin: 0 auto 24px;
        }
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > a {
        display: block;
        width: -moz-max-content;
        width: max-content;
        margin: 25px 0 0 auto;
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 1rem;
        line-height: 1.625rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-underline-offset: 6px;
    }
@media (max-width: 67.499rem) {
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;

        padding-top: 90px;

        padding-bottom: 80px;
}

        .faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            margin-bottom: 56px;
            font-size: 2.5rem;
        }
    }
@media (max-width: 47.999rem) {
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
        --badge: 90px;
        --inset: 48px;

        padding-top: 72px;

        padding-bottom: 60px;
}

        .faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            margin-bottom: 40px;
            font-size: 1.875rem;
        }

        .faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary {
            padding-top: 10px;
            padding-bottom: 10px;
            font-size: 1.125rem;
            line-height: 1.625rem;
        }

            .faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary::before {
                top: 8px;
                font-size: 1.5rem;
                line-height: 1.625rem;
            }

        .faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > p {
            margin-top: 12px;
            font-size: 1rem;
            line-height: 1.625rem;
        }

        .faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > a {
            font-size: 0.875rem;
        }
    }
@media (max-width: 29.999rem) {
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --inset: 40px;
}

        .faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 1.625rem;
        }

        .faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary,.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) details > p {
            padding-right: 16px;
        }

        .faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary {
            font-size: 1rem;
            line-height: 1.5rem;
        }

            .faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) summary::before {
                font-size: 1.375rem;
                line-height: 1.5rem;
            }
    }
.policy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 100px;

    width: min(860px, 100% - 2 * 1.5rem);

    width: min(860px, 100% - 2 * var(--container-gutter));
    margin: 100px auto 0;
    margin: var(--gap) auto 0;
    font-size: 1.125rem;
    line-height: 1.875rem;
}
.policy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section + section {
        margin-top: 48px;
    }
.policy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        margin: 0 0 12px;
        font-size: 1.875rem;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0;
    }
.policy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p,.policy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        margin: 0 0 16px;
    }
.policy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        padding-left: 24px;
    }
.policy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li + li {
        margin-top: 10px;
    }
.policy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a {
        color: inherit;
        text-underline-offset: 3px;
    }
.policy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p:last-child {
        margin-top: 48px;
        color: #4D4D4D;
        font-size: 1rem;
    }
@media (max-width: 47.999rem) {
.policy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 60px;
}

        .policy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 1.625rem;
        }
    }
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --gap: 200px;
    --inset: 140px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 540px;
    margin-top: 200px;
    margin-top: var(--gap);
    background: #3EB885;
    background: var(--color-brand);
    color: #FFFFFF;
    color: var(--color-on-brand);
}
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > div {
        align-self: center;
        padding-right: 1.5rem;
        padding-left: var(--inset);
        padding-right: var(--container-gutter);
    }
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        margin: 0;
        font-size: 2.75rem;
        font-weight: 350;
        line-height: 3.125rem;
        letter-spacing: 2px;
    }
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
        margin: 12px 0 0;
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.875rem;
        letter-spacing: 1px;
    }
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-top: 16px;
        padding: 0 24px 0 10px;
        height: 50px;
        background: #6B817F;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        color: #FFFFFF;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.625rem;
        letter-spacing: 1px;
        -webkit-text-decoration: none;
        text-decoration: none;
        text-transform: uppercase;
        transition: background-color 120ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: background-color var(--duration-fast) var(--ease-out);
    }
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a::before {
            content: "";
            width: 32px;
            height: 32px;
            background: url("/images/envelope.svg") no-repeat center / contain;
        }
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a:hover {
            background: #465957;
        }
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
        position: relative;
        margin: 0;
    }
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
        }
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
        position: absolute;
        bottom: 0;
        left: 50%;
        translate: -50% 0;
        padding: 0 20px;
        background: #000000;
        color: #FFFFFF;
        font-size: 0.9375rem;
        line-height: 2.5rem;
        letter-spacing: 4px;
        /* one line at the design's size, but a larger text setting wraps it
           rather than pushing it past the photo and the page */
        width: -moz-max-content;
        width: max-content;
        max-width: 100%;
    }
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption b {
            font-weight: 700;
            text-transform: uppercase;
        }
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption i {
            font-weight: 300;
        }
@media (max-width: 89.999rem) {
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --inset: 100px;
}
    }
/* the FAQ band butts straight against it */
.faq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) + .contact {
        --gap: 0px;
    }
@media (max-width: 67.499rem) {
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
        --inset: 56px;

        min-height: 460px;
}

        .contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 2.375rem;
            line-height: 2.625rem;
            letter-spacing: 2px;
        }

        .contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
            font-size: 1.0625rem;
            line-height: 1.75rem;
            letter-spacing: 1px;
        }

        .contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
            padding-left: 14px;
            padding-right: 14px;
            font-size: 0.8125rem;
            letter-spacing: 2px;
        }
    }
@media (max-width: 47.999rem) {
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
        --inset: var(--container-gutter);
}

        .contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) br {
            display: none;
        }
.contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{

        grid-template-columns: 1fr;
        min-height: auto;
}

        .contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > div {
            padding-top: 56px;
            padding-bottom: 48px;
        }

        .contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
            aspect-ratio: 3 / 2;
        }

        @supports not (aspect-ratio: 1 / 1) {
        .contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figure {
            --aspect-ratio: 3 / 2;
        }
    }

        .contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) figcaption {
            width: -moz-max-content;
            width: max-content;
            max-width: calc(100% - 2 * 1.5rem);
            max-width: calc(100% - 2 * var(--container-gutter));
            padding-top: 8px;
            padding-bottom: 8px;
            line-height: 1.5;
            text-align: center;
            white-space: normal;
        }
    }
@media (max-width: 29.999rem) {
        .contact:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 2rem;
            line-height: 2.125rem;
            letter-spacing: 1px;
        }
    }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --icon: 56px;
    --gap: 200px;

    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    margin-top: 200px;
    margin-top: var(--gap);
    padding: 0 1.5rem 80px;
    padding: 0 var(--container-gutter) 80px;
    color: #3EB885;
    color: var(--color-brand-ink);
    font-size: 1.0625rem;
}
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > a {
        grid-column: 1 / -1;
        justify-self: center;
        margin-bottom: 20px;
    }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > a img {
            width: 120px;
            height: 120px;
        }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p,.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav {
        margin: 0;
    }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) ul {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
    }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) li {
        margin: 0;
    }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:first-of-type li::before {
        content: "|";
        margin-left: 18px;
        margin-right: 18px;
    }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type {
        grid-column: 1 / -1;
        justify-self: center;
        margin-top: 45px;
    }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type ul {
            gap: 22px;
        }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type a {
            display: block;
            width: var(--icon);
            height: var(--icon);
            padding: 0;
            border: 0;
            overflow: hidden;
            text-indent: 100%;
            white-space: nowrap;
            background: no-repeat center / contain;
            transition: translate 120ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: translate var(--duration-fast) var(--ease-out);
        }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type button {
            display: block;
            width: var(--icon);
            height: var(--icon);
            padding: 0;
            border: 0;
            overflow: hidden;
            text-indent: 100%;
            white-space: nowrap;
            background: no-repeat center / contain;
            transition: translate 120ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: translate var(--duration-fast) var(--ease-out);
        }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type a:hover {
                translate: 0 -2px;
            }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type button:hover {
                translate: 0 -2px;
            }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type a[href*="facebook"]  { background-image: url("/images/facebook.svg"); }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type a[href*="x.com"]     { background-image: url("/images/x.svg"); }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type a[href*="instagram"] { background-image: url("/images/instagram.svg"); }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type a[href*="linkedin"]  { background-image: url("/images/linkedin.svg"); }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type button               { background-image: url("/images/accessibility.svg"); }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type a[href*="facebook"]:hover  { background-image: url("/images/facebook-over.svg"); }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type a[href*="x.com"]:hover     { background-image: url("/images/x-over.svg"); }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type a[href*="instagram"]:hover { background-image: url("/images/instagram-over.svg"); }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type a[href*="linkedin"]:hover  { background-image: url("/images/linkedin-over.svg"); }
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type button:hover               { background-image: url("/images/accessibility-over.svg"); }
@media (max-width: 67.499rem) {
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 160px;
}
    }
@media (max-width: 47.999rem) {
.site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --gap: 100px;
        --icon: 48px;

        grid-template-columns: 1fr;
        justify-items: center;
        padding-bottom: 56px;
        font-size: 0.9375rem;
        text-align: center;
}

        .site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > a img {
            width: 96px;
            height: 96px;
        }

        .site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:first-of-type {
            margin-top: 8px;
        }

            .site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:first-of-type ul {
                flex-wrap: wrap;
                justify-content: center;
                row-gap: 4px;
            }

            .site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:first-of-type li::before {
                margin-left: 12px;
                margin-right: 12px;
            }

            .site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:first-of-type li:first-child::before {
                content: none;
            }

        .site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type {
            margin-top: 32px;
        }

            .site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:last-of-type ul {
                gap: 14px;
            }
    }
@media (max-width: 29.999rem) {
            .site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:first-of-type ul {
                -moz-column-gap: 20px;
                     column-gap: 20px;
                row-gap: 6px;
            }

            .site_footer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) nav:first-of-type li::before {
                content: none;
            }
    }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --inset: 40px;
    --tile: 92px;
    --line: #DDE5E2;

    /* a sheet down the right edge rather than a centred modal, so most of the
       page stays visible while each setting lands on it */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(480px, 100%);
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 56px 40px 48px;
    padding: 56px var(--inset) 48px;
    border: 0;
    background: #FFFFFF;
    color: #000000;
    overflow-x: hidden;
    overflow-y: auto;
    overflow: hidden auto;
    overscroll-behavior: contain;
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.35);

    /* closing: quick and out of the way */
    opacity: 0;
    translate: 40px 0;
    transition:
        opacity 220ms cubic-bezier(0.65, 0, 0.35, 1), translate 220ms cubic-bezier(0.65, 0, 0.35, 1), display 220ms allow-discrete, overlay 220ms allow-discrete;
    transition:
        opacity var(--duration-base) var(--ease-in-out), translate var(--duration-base) var(--ease-in-out), display var(--duration-base) allow-discrete, overlay var(--duration-base) allow-discrete;

    /* light, and no blur: the point is to watch the page change behind it */
}
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop {
        background: rgba(18, 32, 27, 0.25);
        opacity: 0;
        transition:
            opacity 220ms cubic-bezier(0.65, 0, 0.35, 1), display 220ms allow-discrete, overlay 220ms allow-discrete;
        transition:
            opacity var(--duration-base) var(--ease-in-out), display var(--duration-base) allow-discrete, overlay var(--duration-base) allow-discrete;
    }
.accessibility_panel[open]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        opacity: 1;
        translate: 0 0;
        transition:
            opacity 400ms cubic-bezier(0.16, 1, 0.3, 1), translate 400ms cubic-bezier(0.16, 1, 0.3, 1), display 400ms allow-discrete, overlay 400ms allow-discrete;
        transition:
            opacity var(--duration-slow) var(--ease-out), translate var(--duration-slow) var(--ease-out), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
    }
@starting-style {

    .accessibility_panel[open]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
            opacity: 0;
            translate: 40px 0;
    }
        }
.accessibility_panel[open]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop {
            opacity: 1;
            transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: opacity var(--duration-slow) var(--ease-out);
        }
@starting-style {

        .accessibility_panel[open]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop {
                opacity: 0;
        }
            }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > form:first-child {
        position: absolute;
        top: 24px;
        right: 24px;
        margin: 0;
    }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > form:first-child button {
            position: relative;
            display: block;
            width: 44px;
            height: 44px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: #ECF6EF;
            background: var(--green-400);
            color: #000000;
            cursor: pointer;
            transition: background-color 120ms cubic-bezier(0.16, 1, 0.3, 1);
            transition: background-color var(--duration-fast) var(--ease-out);
        }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > form:first-child button::before {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                width: 18px;
                height: 2px;
                border-radius: 1px;
                background: currentColor;
                rotate: 45deg;
            }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > form:first-child button::after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                width: 18px;
                height: 2px;
                border-radius: 1px;
                background: currentColor;
                rotate: 45deg;
            }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > form:first-child button::after {
                rotate: -45deg;
            }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > form:first-child button:hover {
                background: var(--line);
            }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
        margin: 0;
        font-size: 2.25rem;
        font-weight: 600;
        line-height: 1.1;
    }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p {
        margin: 12px 0 0;
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
/* the one action in the panel, in the site's play-pill dress */
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-read="start"] {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        min-height: 60px;
        margin-top: 24px;
        padding: 0 24px 0 12px;
        border: 0;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        background: #3EB885;
        background: var(--color-brand);
        color: #FFFFFF;
        color: var(--color-on-brand);
        font: inherit;
        font-size: 1.125rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 120ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: background-color var(--duration-fast) var(--ease-out);
    }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-read="start"]::before {
            content: "";
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #FFFFFF url("/images/playhead-green.svg") no-repeat center / 38px;
        }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-read="start"]:hover {
            background: #339D71;
            background: var(--color-brand-hover);
        }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-read="start"]:focus-visible {
            outline: 3px solid #3EB885;
            outline: 3px solid var(--color-brand);
            outline-offset: 3px;
        }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-read="start"][hidden] {
            display: none;
        }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) fieldset {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        grid-gap: 10px;
        gap: 10px;
        margin: 32px 0 0;
        padding: 0;
        border: 0;
    }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) legend {
        margin-bottom: 12px;
        padding: 0;
        font-size: 0.9375rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
    }
/* the radios are whole tiles: the input covers its label, invisible, so
       the tile is the target and the radio group keeps arrow-key behaviour */
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([type="radio"]) {
        position: relative;
        display: grid;
        align-content: center;
        justify-content: center;
        place-content: center;
        justify-items: center;
        grid-gap: 4px;
        gap: 4px;
        min-height: 56px;
        padding: 10px 8px;
        border: 2px solid var(--line);
        border-radius: 20px;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        cursor: pointer;
        transition:
            border-color 120ms cubic-bezier(0.16, 1, 0.3, 1), background-color 120ms cubic-bezier(0.16, 1, 0.3, 1);
        transition:
            border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
    }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([type="radio"]):hover {
            border-color: #3EB885;
            border-color: var(--color-brand);
        }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([type="radio"]):has(:checked) {
            border-color: #3EB885;
            border-color: var(--color-brand);
            background: #ECF6EF;
            background: var(--green-400);
            box-shadow: inset 0 0 0 1px #3EB885;
            box-shadow: inset 0 0 0 1px var(--color-brand);
        }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([type="radio"]):has(:focus-visible) {
            outline: 3px solid #3EB885;
            outline: 3px solid var(--color-brand);
            outline-offset: 2px;
        }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([type="radio"]) input {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: 0;
            opacity: 0;
            cursor: pointer;
        }
/* each tile previews what it does with a sample */
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) fieldset:has([name="text"],[name="type"],[name="contrast"]) label {
        /* the samples grow, the labels under them stay on one line */
        grid-template-rows: 40px auto;
        align-items: end;
        min-height: var(--tile);
    }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) fieldset:has([name="text"],[name="type"],[name="contrast"]) label::before {
            content: "Aa";
            font-size: 1.625rem;
            font-weight: 500;
            line-height: 1;
        }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([name="text"][value="125"])::before { font-size: 2rem; }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([name="text"][value="150"])::before { font-size: 2.4375rem; }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([name="contrast"][value="standard"])::before { color: #3EB885; color: var(--color-brand); }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([name="contrast"][value="more"])::before     { color: #000000; font-weight: 700; }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([name="type"][value=""])::before        { font-family: "GarantPro", sans-serif; }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([name="type"][value="bold"])::before    { font-family: "GarantPro Heavier", sans-serif; }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([name="type"][value="legible"])::before { font-family: "Atkinson Hyperlegible Next", sans-serif; }
/* the reading aids are on/off, so they read as switches in a list */
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) fieldset:last-of-type {
        grid-auto-flow: row;
        gap: 0;
    }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([type="checkbox"]) {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        padding-top: 14px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--line);
        font-size: 1.125rem;
        line-height: 1.35;
        cursor: pointer;
    }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([type="checkbox"]) input {
            flex: none;
            width: 52px;
            height: 30px;
            margin: 0;
            border-radius: 62.5rem;
            border-radius: var(--radius-full);
            background:
                radial-gradient(circle, #FFFFFF 11px, transparent 12px) no-repeat left 3px center / 24px 24px,
                #B9C4C0;
            -webkit-appearance: none;
               -moz-appearance: none;
                    appearance: none;
            cursor: pointer;
            transition:
                background-position 220ms cubic-bezier(0.16, 1, 0.3, 1), background-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
            transition:
                background-position var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
        }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([type="checkbox"]) input:checked {
                background-position: right 3px center, 0 0;
                background-color: #3EB885;
                background-color: var(--color-brand);
            }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:has([type="checkbox"]) input:focus-visible {
                outline: 3px solid #3EB885;
                outline: 3px solid var(--color-brand);
                outline-offset: 2px;
            }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [type="reset"] {
        margin-top: 32px;
        padding: 14px 26px;
        border: 2px solid #000000;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        background: none;
        color: #000000;
        font: inherit;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 120ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: background-color var(--duration-fast) var(--ease-out);
    }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [type="reset"]:hover {
            background: #ECF6EF;
            background: var(--green-400);
        }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > p:last-child {
        margin-top: 24px;
        font-size: 1rem;
    }
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) > p:last-child a {
            color: #000000;
            -webkit-text-decoration: underline;
            text-decoration: underline;
            text-underline-offset: 3px;
        }
@media (max-width: 47.999rem) {
.accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --inset: 20px;
        --tile: 80px;

        padding-top: 40px;

        padding-bottom: 32px;
}

        .accessibility_panel:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h2 {
            font-size: 1.875rem;
        }
    }
.read_aloud:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --button: 64px;

    /* above the page, below any dialog, so the panel can still open over it */
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 500;
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 2 * 1.5rem);
    max-width: calc(100% - 2 * var(--container-gutter));
    padding: 8px 12px;
    border-radius: 62.5rem;
    border-radius: var(--radius-full);
    background: #576D6B;
    background: var(--nav-panel-bg);
    color: #FFFFFF;
    color: var(--nav-panel-fg);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.45);
    translate: -50% 0;
}
.read_aloud[hidden]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        display: none;
    }
.read_aloud:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button,.read_aloud:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label {
        display: grid;
        justify-items: center;
        align-content: center;
        grid-gap: 6px;
        gap: 6px;
        min-width: var(--button);
        min-height: var(--button);
        padding: 6px 8px;
        border: 0;
        border-radius: 20px;
        background: none;
        color: inherit;
        font: inherit;
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        transition: background-color 120ms cubic-bezier(0.16, 1, 0.3, 1);
        transition: background-color var(--duration-fast) var(--ease-out);
    }
.read_aloud:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button:hover,.read_aloud:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:hover {
            background: rgba(255, 255, 255, 0.14);
        }
.read_aloud:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button:focus-visible {
            outline: 3px solid #FFFFFF;
            outline-offset: -3px;
        }
.read_aloud:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) label:focus-visible {
            outline: 3px solid #FFFFFF;
            outline-offset: -3px;
        }
/* the glyphs are drawn rather than fetched: five shapes, one color */
.read_aloud:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) button::before {
        content: "";
        width: 18px;
        height: 18px;
        background: currentColor;
    }
.read_aloud:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-read="previous"]::before {
        clip-path: polygon(0 50%, 50% 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 50% 100%);
    }
.read_aloud:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-read="next"]::before {
        clip-path: polygon(0 0, 50% 50%, 50% 0, 100% 50%, 50% 100%, 50% 50%, 0 100%);
    }
.read_aloud:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-read="toggle"]::before {
        background: linear-gradient(to right, currentColor 0,currentColor 35%, transparent 35%,transparent 65%, currentColor 65%);
        background: linear-gradient(to right, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
    }
.read_aloud[data-state="paused"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-read="toggle"]::before {
        background: currentColor;
        clip-path: polygon(10% 0, 100% 50%, 10% 100%);
    }
.read_aloud:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) [data-read="stop"]::before {
        width: 15px;
        height: 15px;
        border-radius: 2px;
    }
.read_aloud:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) select {
        padding: 2px 4px;
        border: 0;
        border-radius: 8px;
        background: #FFFFFF;
        color: #000000;
        font: inherit;
        font-size: 0.8125rem;
        cursor: pointer;
    }
@media (max-width: 47.999rem) {

.read_aloud:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
        --button: 54px;

        bottom: 12px;
        gap: 0;
        padding: 6px;
}
    }
/* the passage being read, and the word within it when the voice reports one.
   Dark type on the yellow whatever the section's own colors. */
:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::highlight(read-aloud) {
    background-color: #FFF1A8;
    color: #000000;
}
:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::highlight(read-aloud-word) {
    background-color: #FFD43B;
    color: #000000;
}
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    --plate: #7DA7A7;

    position: relative;
    width: 1200px;
    height: 630px;
    overflow: hidden;
    background: #FFFFFF;
    color: #000000;
}
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header {
        position: absolute;
        top: 32px;
        right: 72px;
        bottom: auto;
        left: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header img {
            width: 222px;
            height: auto;
        }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header p {
            margin: 0;
            font-size: 2.875rem;
            font-weight: 600;
            line-height: 1;
        }
/* a column rather than the list card's grid: the clamped lines below
       would otherwise let the photo squeeze their rows */
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section {
        position: absolute;
        top: 99px;
        right: 72px;
        bottom: 30px;
        left: 72px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 36px 0 452px;
        border-radius: 250px 16px 16px 250px;
        background: var(--plate);
        color: #FFFFFF;
    }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section  > * {
            flex-shrink: 0;
        }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section  > img:first-child {
            position: absolute;
            top: 0;
            right: auto;
            bottom: 0;
            left: 76px;
            margin-top: auto;
            margin-bottom: auto;
            width: 350px;
            height: 350px;
            border-radius: 50%;
            -o-object-fit: cover;
               object-fit: cover;
        }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) address {
        display: grid;
        grid-template-columns: 80px auto;
        grid-column-gap: 12px;
        -moz-column-gap: 12px;
             column-gap: 12px;
        align-self: flex-end;
        align-items: center;
        font-style: normal;
        font-size: 1rem;
        line-height: 1.3125rem;
    }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) address img {
            grid-row: 1 / 3;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #DCE6E3;
            /* team frames are waist-up cutouts; the byline wants the face */
            -o-object-fit: cover;
               object-fit: cover;
            object-view-box: inset(0 28% 55% 28%);
        }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) address span {
            align-self: end;
        }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) address b {
            font-weight: 700;
            text-transform: uppercase;
        }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) address i {
            align-self: start;
        }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section > p:first-of-type {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 18px 0 0;
        font-size: 0.875rem;
        font-style: italic;
    }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section > p:first-of-type b {
            padding: 0 10px;
            background: #4F6564;
            font-style: normal;
            font-weight: 600;
            line-height: 1.625rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
        margin: 14px 0 0;
        font-size: 2.375rem;
        font-weight: 500;
        line-height: 1.2;
    }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 em {
            display: block;
            font-weight: 600;
        }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section > p:last-of-type {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        margin: 14px 0 0;
        font-size: 1.125rem;
        line-height: 1.875rem;
    }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section > span {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-top: 22px;
        padding: 0 24px 0 9px;
        height: 54px;
        border-radius: 62.5rem;
        border-radius: var(--radius-full);
        background: #3EB885;
        background: var(--color-brand);
        font-size: 1.0625rem;
        letter-spacing: 1px;
        text-transform: uppercase;
    }
.share_post:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section > span::before {
            content: "";
            width: 36px;
            height: 36px;
            background: url("/images/read-on.svg") no-repeat center / contain;
        }
.share_story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    position: relative;
    width: 1200px;
    height: 630px;
    overflow: hidden;
    background: #F1EFE6 url("/images/paper-texture.jpg") center / cover;
    color: #000000;

    /* the sketch is cut at its bottom edge, so pinning it there hides the crop */
}
.share_story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img:first-child {
        position: absolute;
        bottom: 0;
        left: 0;
        /* the sketches vary in shape: a fixed height keeps every face at one
           size, and a wide one loses its sides rather than crowding the copy */
        width: auto;
        max-width: 640px;
        height: 580px;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center bottom;
           object-position: center bottom;
        mix-blend-mode: multiply;
    }
.share_story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section {
        position: absolute;
        top: 123px;
        right: 87px;
        bottom: auto;
        left: 650px;
        padding-top: 22px;
        border-top: 12px solid #000000;
    }
.share_story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
        margin: 0;
        font-size: 3.25rem;
        font-weight: 500;
        line-height: 1.1;
    }
.share_story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        margin: 18px 0 0;
        font-size: 1.75rem;
        line-height: 2.375rem;
    }
/* the black wordmark, as on the stories card */
.share_story:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img:last-child {
        position: absolute;
        top: auto;
        right: 87px;
        bottom: 92px;
        left: auto;
        width: 265px;
        height: auto;
        filter: brightness(0);
    }
.share_device:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)
{
    position: relative;
    width: 1200px;
    height: 630px;
    overflow: hidden;
    background: #FFFFFF;
    color: #000000;

    /* the mint ground the catalogue card sits on */
}
.share_device:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before {
        content: "";
        position: absolute;
        top: 95px;
        right: auto;
        bottom: auto;
        left: 70px;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: #ECF6EF;
        background: var(--green-400);
    }
.share_device:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)  > img {
        position: absolute;
        top: 115px;
        right: auto;
        bottom: auto;
        left: 90px;
        width: 460px;
        height: 460px;
        -o-object-fit: contain;
           object-fit: contain;
    }
.share_device:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section {
        position: absolute;
        top: 70px;
        right: 80px;
        bottom: auto;
        left: 640px;
    }
.share_device:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header {
        display: flex;
        align-items: baseline;
        gap: 14px;
        margin-bottom: 70px;
    }
.share_device:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header img {
            width: 190px;
            height: auto;
        }
.share_device:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) header p {
            margin: 0;
            color: #3EB885;
            color: var(--color-brand-ink);
            font-size: 2.125rem;
            line-height: 1;
        }
.share_device:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
        margin: 0;
        font-size: 3.5rem;
        font-weight: 600;
        line-height: 1.1;
    }
.share_device:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section > p {
        margin: 22px 0 0;
        font-size: 1.5rem;
        line-height: 2.25rem;
    }
/* the maker, when there is one */
.share_device:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) section > p + p {
        margin-top: 26px;
        color: #3EB885;
        color: var(--color-brand-ink);
        font-size: 1.25rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
    }
.visually_hidden:not(:focus):not(:active):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.skip_link:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    position: absolute;
    top: 0.5rem;
    top: var(--space-2xs);
    left: 0.5rem;
    left: var(--space-2xs);
    z-index: 500;
    z-index: var(--z-toast);
    padding: 0.5rem 1rem;
    padding: var(--space-2xs) var(--space-sm);
    border: 2px solid #3EB885;
    border: 2px solid var(--color-brand);
    background-color: #FFFFFF;
    color: #000000;
    font: inherit;
    font-weight: 600;
    -webkit-text-decoration: underline;
    text-decoration: underline;
    cursor: pointer;
    border-radius: 0.25rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-md);
    transform: translateY(-200%);
}
.skip_link:focus:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
        transform: translateY(0);
    }
.text_center:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { text-align: center; }
.text_start:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { text-align: left; }
.text_end:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { text-align: right; }
.text_muted:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color: var(--color-text-muted); }
.text_subtle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color: var(--color-text-subtle); }
.text_accent:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { color: var(--color-accent); }
.text_sm:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { font-size: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem); font-size: clamp(0.875rem, 0.84rem + 0.18vi, 0.9375rem); font-size: var(--text-sm); }
.text_lg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); font-size: clamp(1.125rem, 1.05rem + 0.4vi, 1.375rem); font-size: var(--text-lg); }
.text_xl:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { font-size: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem); font-size: clamp(1.375rem, 1.2rem + 0.85vi, 1.875rem); font-size: var(--text-xl); }
.uppercase:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    letter-spacing: var(--tracking-wide);
}
.truncate:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-line-clamp: var(--lines, 1);
    line-clamp: 1;
    line-clamp: var(--lines, 1);
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.flow_tight:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { --flow-space: var(--space-2xs); }
.flow_loose:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { --flow-space: var(--space-lg); }
.mbs_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { margin-top: 0; }
.mbe_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { margin-bottom: 0; }
.hidden:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: none; }
@media (max-width: 47.999rem) {
    .hide_mobile:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: none; }
}
@media (min-width: 48rem) {
    .hide_desktop:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { display: none; }
}
.full_bleed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    width: 100vw;
    width: 100vi;
    margin-left: 50%;
    transform: translateX(-50%);
}
.no_scroll:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    overflow: hidden;
}
.page_home:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    --csstools-color-scheme--light:  ;
    color-scheme: dark;

    --color-surface: var(--purple-800);
    --color-surface-raised: var(--purple-700);
    --color-text: var(--gray-100);
    --color-text-muted: var(--gray-300);
    --color-text-subtle: var(--gray-400);
    --color-border: var(--purple-700);
    --color-accent: var(--purple-300);
    --color-accent-hover: var(--purple-200);
    --color-accent-contrast: var(--gray-950);

    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    min-height: 100svb;
    padding: 2rem;
    padding: var(--space-lg);
    text-align: center;
    background:
        radial-gradient(
            ellipse at 50% 0%,
            var(--purple-700) 0%,
            var(--purple-900) 55%,
            var(--purple-950) 100%
        );
    color: #000000;
    color: var(--color-text);
}
.page_home:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .home_inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        gap: var(--space-lg);
        max-width: 40rem;
    }
.page_home:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .home_logo {
        width: min(60vw, 22rem);
        width: min(60vi, 22rem);
        height: auto;
        filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
    }
.page_home:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) h1 {
        font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
        font-size: clamp(1.75rem, 1.4rem + 1.6vi, 2.75rem);
        font-size: var(--text-2xl);
        margin: 0;
    }
.page_home:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) p {
        color: var(--color-text-muted);
        text-wrap: pretty;
    }
.page_home:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a:not(.button) {
        color: var(--color-accent);
    }
.page_home:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) a:not(.button):hover {
            color: #000000;
            color: var(--color-text);
        }
.page_build:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}
.page_build:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .build_field {
        display: grid;
        grid-template-columns: minmax(12rem, 18rem) 1fr;
        grid-gap: 1rem;
        grid-gap: var(--space-sm);
        gap: 1rem;
        gap: var(--space-sm);
        align-items: center;
    }
@media (max-width: 47.999rem) {

    .page_build:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .build_field {
            grid-template-columns: 1fr;
            gap: 0.25rem;
            gap: var(--space-3xs);
    }
        }
.page_build:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input[type="text"] {
        width: 100%;
        max-width: 34rem;
    }
.page_build:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .build_results {
        max-height: 24rem;
        overflow-y: auto;
        padding: 1rem;
        padding: var(--space-sm);
        background-color: var(--color-surface-raised);
        border: 1px solid var(--color-border);
        border: var(--border-thin) solid var(--color-border);
        border-radius: 0.5rem;
        border-radius: var(--radius-md);
        font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
        font-family: var(--font-mono);
        font-size: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
        font-size: clamp(0.875rem, 0.84rem + 0.18vi, 0.9375rem);
        font-size: var(--text-sm);
    }
.page_build:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .build_ok { color: rgb(37, 152, 77); }
.page_build:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .build_fail { color: rgb(219, 66, 65); }