/* Generated by prototypes/design-h/export_astro.py from the approved logo intro (prototypes/logo-motion, 2026-09-25). Do not edit by hand. */
:root { --written: 2.11s; --leave: 2.66s; --swap: 3.3s; --cards: 2.96s; }
.play #s-o1{animation:d-o1 0.384s linear both; animation-delay:calc(0.22s - var(--at, 0s))}@keyframes d-o1{0%{stroke-dashoffset:1.0772;animation-timing-function:cubic-bezier(.5,0,.8,.6)}22%{stroke-dashoffset:0.7800;animation-timing-function:cubic-bezier(.3,.2,.6,.9)}62%{stroke-dashoffset:0.4000;animation-timing-function:cubic-bezier(.3,0,.5,1)}86%{stroke-dashoffset:0.1000;animation-timing-function:ease-out}100%{stroke-dashoffset:0.0000}}.play #s-k-stem{animation:d-k-stem 0.199s linear both; animation-delay:calc(0.744s - var(--at, 0s))}@keyframes d-k-stem{0%{stroke-dashoffset:1.1082;animation-timing-function:cubic-bezier(.5,0,.8,.7)}28%{stroke-dashoffset:0.7800;animation-timing-function:cubic-bezier(.35,.1,.5,1)}82%{stroke-dashoffset:0.1400;animation-timing-function:ease-out}100%{stroke-dashoffset:0.0000}}.play #s-k-arm{animation:d-k-arm 0.148s linear both; animation-delay:calc(1.043s - var(--at, 0s))}@keyframes d-k-arm{0%{stroke-dashoffset:1.1359;animation-timing-function:cubic-bezier(.5,0,.8,.7)}30%{stroke-dashoffset:0.7000;animation-timing-function:cubic-bezier(.35,.1,.45,1)}100%{stroke-dashoffset:0.0000}}.play #s-k-leg{animation:d-k-leg 0.101s linear both; animation-delay:calc(1.271s - var(--at, 0s))}@keyframes d-k-leg{0%{stroke-dashoffset:1.2521;animation-timing-function:cubic-bezier(.45,0,.7,.6)}55%{stroke-dashoffset:0.4000;animation-timing-function:ease-out}100%{stroke-dashoffset:0.0000}}.play #s-o2{animation:d-o2 0.375s linear both; animation-delay:calc(1.522s - var(--at, 0s))}@keyframes d-o2{0%{stroke-dashoffset:1.0787;animation-timing-function:cubic-bezier(.5,0,.8,.6)}22%{stroke-dashoffset:0.7800;animation-timing-function:cubic-bezier(.3,.2,.6,.9)}62%{stroke-dashoffset:0.4000;animation-timing-function:cubic-bezier(.3,0,.5,1)}86%{stroke-dashoffset:0.1000;animation-timing-function:ease-out}100%{stroke-dashoffset:0.0000}}.play #s-tail{animation:d-tail 0.143s linear both; animation-delay:calc(1.967s - var(--at, 0s))}@keyframes d-tail{0%{stroke-dashoffset:1.1231;animation-timing-function:cubic-bezier(.6,0,.9,.4)}45%{stroke-dashoffset:0.7200;animation-timing-function:cubic-bezier(.4,0,.9,.6)}100%{stroke-dashoffset:0.0000}}
/* The cards rise on a spring. The plain-bezier line is the fallback for browsers without linear() easing. */
.play .note {
  --d: var(--cards);
  animation: land .5s cubic-bezier(.22, 1.2, .36, 1) backwards, land-fade .3s ease-out backwards;
  animation: land .5s linear(0.0000, 0.0164 2.5%, 0.0589 5.0%, 0.1189 7.5%, 0.1896 10.0%, 0.2660 12.5%, 0.3440 15.0%, 0.4208 17.5%, 0.4942 20.0%, 0.5631 22.5%, 0.6264 25.0%, 0.6838 27.5%, 0.7351 30.0%, 0.7804 32.5%, 0.8200 35.0%, 0.8542 37.5%, 0.8834 40.0%, 0.9082 42.5%, 0.9289 45.0%, 0.9461 47.5%, 0.9602 50.0%, 0.9716 52.5%, 0.9808 55.0%, 0.9880 57.5%, 0.9935 60.0%, 0.9978 62.5%, 1.0009 65.0%, 1.0031 67.5%, 1.0046 70.0%, 1.0056 72.5%, 1.0061 75.0%, 1.0063 77.5%, 1.0062 80.0%, 1.0060 82.5%, 1.0056 85.0%, 1.0052 87.5%, 1.0047 90.0%, 1.0042 92.5%, 1.0037 95.0%, 1.0033 97.5%, 1.0028) backwards, land-fade .3s ease-out backwards;
  animation-delay: calc(var(--d) - var(--at, 0s)), calc(var(--d) - var(--at, 0s));
}
.play .note:nth-child(2) { --d: calc(var(--cards) + .07s); }
.play .note:nth-child(3) { --d: calc(var(--cards) + .14s); }
/* ---- Homepage only: hero with the logo intro, client websites, the day in three fields, the team, start and price ---- */

/* The sun's position along its path: 0 = left horizon, 1 = right horizon */
@property --t { syntax: "<number>"; inherits: false; initial-value: 0.5; }

/* ---- Hero, on the brand's teal. The header mark is not there at first; the intro brings it in ---- */
.hero { background: var(--teal); color: #fff; border-radius: 0 0 22px 22px; }
.hero .btn-primary { background: var(--sunny); color: var(--ink); }
.hero .btn-primary:hover { background: #ffd062; }

/* The intro (white plate, teal sauce writes the mark, the mark flies to the header, three notifications land) is the approved
   layout A of prototypes/logo-motion. Its timing, masks and stroke keyframes are generated into src/components/intro/. */
.slot { position: relative; height: 296px; margin: 0 16px; perspective: 700px; }
/* Referral mode: the extra line above the H1 takes a little from everything, so the plate keeps showing above the cards */
.ref-mode .slot { height: 250px; }
.ref-mode.ref-long .slot { height: 240px; }
.ref-mode h1 { font-size: 31px; }
.ref-mode .hero-text { padding-top: 18px; }
.ref-mode .hero-text .lead { margin-bottom: 14px; }
.plate-wrap { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 1; }
html:not(.play):not(.pre) .sauce { display: none; }   /* the end state: the plate as wallpaper, the mark in the header, the cards on the plate */
.play .slot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 360px; height: 300px; transform: translate(-50%, -52%);
  background: radial-gradient(closest-side, rgba(255,255,255,.09), rgba(255,255,255,0) 72%); pointer-events: none;
}
.done .slot::before { display: none; }
.plate-card {
  position: absolute; inset: 0; border-radius: 18px; overflow: hidden; transform: translateZ(0);
  box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 24px 48px -22px rgba(0,0,0,.7);
}
.plate-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
/* the picture pushes in very slowly while the sauce writes; it settles and stays as the wallpaper */
.play .plate-photo {
  animation: push var(--leave) cubic-bezier(.2,.5,.3,1) both;
  animation-delay: calc(0s - var(--at, 0s));
}
@keyframes push { from { transform: scale(1); } to { transform: scale(1.04); } }

/* The sauce: the teal sauce pre-rendered by Chrome (logo-motion/bake.py) is revealed stroke by stroke through the masks; WebKit
   would render the #wet filter blurry on retina screens, so the live filter stays only on the bead at the nozzle. */
.sauce {
  position: relative; width: 176px; height: auto; color: var(--teal); display: block; overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(40,20,0,.25)) drop-shadow(0 3px 4px rgba(40,20,0,.14));
}
.pre .sauce { visibility: hidden; }
.ref-mode .sauce { width: 150px; }
.play .sauce { transform-origin: 0 0; animation: swap 1ms linear both; animation-delay: calc(var(--swap) - var(--at, 0s)); transition: filter .3s ease; }
.done .sauce { filter: none; }
@keyframes swap { from { opacity: 1; } to { opacity: 0; } }
.play:not(.done) .sauce-body .live { filter: url(#wet); }
.sauce .s { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 3; stroke-dashoffset: 0; }
/* Teal to cream while the mark flies over the teal hero, so it stays legible all the way to the header.
   The #oko symbol fills with currentColor, so the colour is set here too. */
.sauce-cream { fill: var(--cream); color: var(--cream); opacity: 0; }
.play .sauce-cream { animation: tint .3s cubic-bezier(.4,0,.2,1) both; animation-delay: calc(var(--leave) - var(--at, 0s)); }
@keyframes tint { from { opacity: 0; } to { opacity: 1; } }
.done #bead, .done .wake { display: none; }

/* The header mark appears the moment the flying sauce lands on it */
.pre .header .logo .mark { visibility: hidden; }
.play .header .logo .mark { animation: show 1ms linear both; animation-delay: calc(var(--swap) - var(--at, 0s)); }
@keyframes show { from { opacity: 0; } to { opacity: 1; } }

/* The three notifications, on the lower edge of the plate */
.stack { list-style: none; margin: 0; padding: 0; position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: grid; gap: 8px; }
.ref-mode .stack { gap: 6px; }
.pre .stack { visibility: hidden; }
.note {
  display: flex; align-items: flex-start; gap: 12px; min-width: 0; /* a grid item: long titles truncate instead of widening it */
  background: var(--white); color: var(--ink); border-radius: 22px; padding: 12px 14px 13px 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.08), 0 8px 24px -12px rgba(0,0,0,.35);
}
.ref-mode .note { padding: 9px 12px 10px 10px; }
/* They rise on a spring while the mark is on its way (the rule with the spring curve is generated: components/intro/intro.css) */
@keyframes land { from { transform: translateY(18px) scale(.97); } to { transform: none; } }
@keyframes land-fade { from { opacity: 0; } to { opacity: 1; } }
/* Reduced motion: the end state, faded in */
.rm .header .logo .mark, .rm .stack { animation: rm-fade .3s ease-out both; }
@keyframes rm-fade { from { opacity: 0; } to { opacity: 1; } }
/* ?at=<seconds>: hold that frame */
.at * { animation-play-state: paused !important; }

.hero-text { padding: 26px 16px 44px; }
.hero-text .lead { color: var(--teal-pale); margin-bottom: 20px; }
.hero-text h1 { margin-bottom: 12px; }
.ref { font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -.005em; color: var(--sunny); margin-bottom: 8px; text-wrap: balance; overflow-wrap: anywhere; }
.ref b { font-weight: 600; color: #fff; }
.hero .assure { color: var(--teal-pale); }
.price-line { font-size: 16px; line-height: 1.5; color: var(--teal-pale); margin-top: 18px; text-align: center; text-wrap: pretty; }
.price-line b { display: block; color: #fff; font-weight: 600; }
.hero ::selection { background: var(--sunny); color: var(--ink); }
.hero :focus-visible { outline-color: var(--sunny); }

/* ---- Websites: light ---- */
.section { padding: 72px 16px 8px; }
.section-head { padding: 0 0 28px; }
.section-head h2 { margin-bottom: 14px; }
#h-sites { text-wrap: pretty; }
.sites {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 16px 8px;
  scroll-snap-type: x mandatory; scroll-padding-left: 16px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sites::-webkit-scrollbar { display: none; }
.sites:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; border-radius: 8px; }
.site { flex: 0 0 160px; scroll-snap-align: start; display: grid; gap: 10px; text-decoration: none; border-radius: 18px; }
.site-frame {
  display: block; height: 310px; border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: 0 16px 36px -18px rgba(15,42,48,.45), 0 1px 2px rgba(15,42,48,.08), inset 0 0 0 1px rgba(15,42,48,.1);
}
.site-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.site-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .01em; padding: 0 2px; display: block; line-height: 1.3; }
.site-city { display: block; font-family: var(--font-text); font-size: 13px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.module-link { margin-top: 6px; }
.sites-note .link { margin-right: 10px; margin-bottom: 8px; }
.sites-note { padding: 12px 16px 0; font-size: 13px; color: var(--ink-3); }
/* The proof: three facts, on their own tinted block, noticed at a glance */
.company {
  margin: 36px 16px 56px; padding: 18px 20px; border-radius: 18px; background: var(--teal-soft); color: var(--ink);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 15px; font-weight: 500; line-height: 1.4;
}
.company > span { flex: 1 1 190px; }
.company b { flex: none; font-family: var(--font-display); font-weight: 600; font-size: 32px; letter-spacing: -.02em; line-height: 1; color: var(--teal); }
.company .company-who { display: block; font-weight: 600; color: var(--ink); }
.company .company-what { display: block; color: var(--ink-2); }

/* ---- The day: three colour fields, rounded blocks on the ground, never touching.
   Each opens with a small sun path in the page flow; the sun rides it as that field scrolls by, with the time attached.
   A quiet detail, not a feature: it stays this small and never becomes a fixed clock. ---- */
.day { display: grid; gap: 10px; padding: 0 0 8px; }
.field { position: relative; padding: 56px 0 8px; border-radius: 22px; view-timeline: --field block; }
.field .shot { margin-top: 0; }
#room-photo { object-position: 42% 100%; }
#printer-photo { object-position: 50% 8%; }
#qr-photo { object-position: 62% 62%; }

/* The sky band: the sun's path, drawn as one thin pour like the swash under the mark, a little fuller at sunrise and thinning
   to nothing at sunset. Nothing else lives in this band, so the sun never covers content. */
.sky { position: relative; height: 88px; margin: 0 16px 20px; container-type: inline-size; }
.sky-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sky-path path { fill: var(--sky-line); }
.sun {
  --t: var(--t-rest);
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px;
  border-radius: 99px; background: var(--sun);
  box-shadow: 0 0 0 3px var(--sun-ring);
  pointer-events: none;
  /* Quadratic path y = 67 − 148·t·(1−t): the centreline of the drawn pour */
  transform: translate(calc(var(--t) * 100cqw), calc((67 - 148 * var(--t) * (1 - var(--t))) * 1px));
}
/* The crescent: a field-coloured disc hiding most of a cream disc drawn as its shadow. No clipping, so the label stays visible. */
.sun.moon { background: var(--teal); box-shadow: -7px 4px 0 0 var(--sun); }
/* The time sits directly under its sun or moon */
.clock {
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; line-height: 1;
  color: var(--ink);
}
.field-berry .clock, .field-night .clock { color: #fff; }
@keyframes ride { from { --t: var(--t0); } to { --t: var(--t1); } }
/* Only where the browser can drive it from scroll. Elsewhere the animation must not exist at all,
   or its end keyframe would outrank the inline --t the JS fallback writes. */
@supports (animation-timeline: --x) {
  .motion .sun {
    animation: ride linear both;
    animation-timeline: --field;
    animation-range: entry 0% exit 100%;
  }
}

.beat-text { padding: 36px 16px 72px; }
.beat-head { padding: 0 16px 16px; }
.beat-proof { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; margin-bottom: 24px; text-wrap: balance; }
.modules { list-style: none; padding: 0; display: grid; gap: 20px; }
.modules li { display: grid; gap: 10px; justify-items: start; }
.modules p { color: var(--field-2); font-size: 16px; line-height: 1.5; }
.modules h3 a { color: inherit; }   /* the field's own ink or white */

/* ---- The team: light, any time of day ---- */
.team { padding: 96px 16px 72px; }
.team h2 { margin-bottom: 14px; }
.promise { margin: 32px 0 28px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.promise b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.2; margin-bottom: 4px; letter-spacing: -.005em; }
/* The team at work. A generated, illustrative picture (the team prefers not to show faces), so: backs and hands, no faces;
   the footer says photos are illustrative. Flat, like every picture that has no notification on it. */
.team-photo { margin-top: 28px; border-radius: 18px; overflow: hidden; background: var(--teal-soft); }
.team-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.self { margin-top: 28px; font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.team .link { margin-top: 10px; }

/* ---- One system, three screens: light, on the ground between the day and the team. Three tiles like the notifications',
   no colour block: the heading says it, the tiles only point at who holds which screen. ---- */
.system { padding: 72px 16px 0; }
.system .section { padding: 0; }
.system .section-head { padding-bottom: 0; }
.system .lead { max-width: 34em; }
.system-items { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 28px; }
.system-items li { display: grid; justify-items: start; }
.system-items h3 { margin-top: 12px; }
.system-items p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.tile-guests, .tile-dashboard { background: var(--teal-soft); color: var(--teal); }
.tile-manager { background: var(--teal); color: var(--cream); }   /* the OKO Manager app: its icon, like .app-icon */
.tile-manager .mark { width: 27px; height: auto; }

/* ---- Small tablets (the centred 560px column): more room for the plate ---- */
@media (min-width: 481px) and (max-width: 899px) {
  .slot, .ref-mode .slot, .ref-mode.ref-long .slot { height: 380px; }
  .sauce, .ref-mode .sauce { width: 220px; }
  .stack { left: 50%; right: auto; width: min(400px, calc(100% - 20px)); transform: translateX(-50%); }
  .shot .photo { height: 360px; }
}

/* ---- Wide screens (900px and up): each screen in two columns, same order and content as on the phone ---- */
@media (min-width: 900px) {
  /* Hero: the plate on the left, the text on the right (the phone's order, read left to right).
     On wide screens the written mark stays on the plate: a big plate emptied by the flight read as a blank (Bo, 2026-09-27),
     and a plate that keeps its sauce OKO says where the logo comes from even to those who skip or return. So no flight and no
     logo in the hero header here; the sticky bar carries the logo once the hero is scrolled past. Phones keep the flight. */
  .hero {
    margin: 12px 12px 0; border-radius: 22px; padding: 0 max(28px, calc((100% - var(--wrap)) / 2 - 12px)) 80px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "header header" "slot text";
    column-gap: 72px; align-items: center;
  }
  .header { grid-area: header; height: 96px; padding: 0; }
  .header .logo { display: none; }
  .header .nav-inline { margin-left: auto; }
  .header-actions { display: none; }   /* the pill is hidden in the hero and the menu button gives way to the row */
  .slot { grid-area: slot; height: 600px; margin: 0; }
  /* the mark sits on the upper middle of the plate, clear of the three notifications on the lower part */
  .plate-wrap { align-items: start; padding-top: 148px; }
  .sauce, .ref-mode .sauce { width: 280px; }
  .play .slot::before { width: 640px; height: 600px; top: 38%; }
  html:not(.play):not(.pre) .sauce { display: block; }
  .play .sauce { animation: none; }
  .play .sauce-cream { animation: none; }
  .done .sauce { filter: drop-shadow(0 1px 1px rgba(40,20,0,.25)) drop-shadow(0 3px 4px rgba(40,20,0,.14)); }
  .rm .sauce { animation: rm-fade .3s ease-out both; }
  /* end state without the intro: the pre-rendered sauce once the script has loaded it, the flat mark until then (and without JS) */
  html:not(.play):not(.pre) .sauce-cream { opacity: 1; fill: var(--teal); color: var(--teal); }
  html.baked-on:not(.play):not(.pre) .sauce-cream { opacity: 0; }
  .stack { left: 50%; right: auto; bottom: 22px; width: min(400px, calc(100% - 44px)); transform: translateX(-50%); }
  .hero-text { grid-area: text; padding: 0; }
  .hero-text h1 { margin-bottom: 20px; }
  .hero-text .lead { font-size: 21px; line-height: 1.43; margin-bottom: 36px; max-width: 30em; }
  .hero .assure { margin-top: 22px; max-width: 30em; }
  .price-line { text-align: left; margin-top: 28px; }
  /* Referral mode has the room it needs here: keep the full sizes */
  .ref-mode .slot, .ref-mode.ref-long .slot { height: 600px; }
  .ref-mode h1 { font-size: clamp(42px, 3.2vw + 6px, 52px); }
  .ref-mode .hero-text { padding-top: 0; }
  .ref-mode .hero-text .lead { margin-bottom: 36px; }
  .ref-mode .stack { gap: 8px; }
  .ref-mode .note { padding: 12px 14px 13px 12px; }
  .ref { font-size: 19px; margin-bottom: 14px; }

  /* Websites: the heading, the note and the proof on the left; the three sites side by side on the right, no scrolling */
  .sites-layout {
    width: min(var(--wrap), calc(100% - 80px)); margin: 0 auto; padding: 128px 0 112px;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px;
    grid-template-areas: "intro sites" "note sites" "company sites"; grid-template-rows: auto auto 1fr;
  }
  .sites-layout > .section { grid-area: intro; padding: 0; }
  .section-head { padding-bottom: 28px; }
  .sites { grid-area: sites; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; padding: 0; scroll-snap-type: none; }
  .site-frame { height: auto; aspect-ratio: 160 / 310; }
  .sites-note { grid-area: note; padding: 0; }
  .company { grid-area: company; align-self: end; margin: 40px 0 0; }
  /* No client site with permission yet: the text and the proof card side by side, no empty gallery column */
  .sites-empty .sites-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "intro company"; grid-template-rows: auto; align-items: center; padding: 96px 0 88px; }
  .sites-empty .section-head { padding-bottom: 0; }
  .sites-empty .company { margin: 0; align-self: center; }

  .day { gap: 12px; padding: 0 12px 12px; }
  /* The day: the heading and modules beside the picture, the picture changing sides at 12:30. The sun's path stays as small
     as on the phone, above the heading in the text column: a full-width band left the top of each block empty and showed two
     suns at once (Bo, 2026-09-27). */
  .field {
    padding: 80px max(28px, calc((100% - var(--wrap)) / 2));
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 80px;
    /* the empty 1fr rows above and below centre the sun-heading-modules group against the picture */
    grid-template-areas: ". shot" "sky shot" "head shot" "text shot" ". shot"; grid-template-rows: 1fr auto auto auto 1fr;
  }
  .field-berry { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "shot ." "shot sky" "shot head" "shot text" "shot ."; }
  .field .sky { grid-area: sky; width: min(100%, 400px); margin: 0 0 28px; }
  .beat-head { grid-area: head; padding: 0 0 24px; }
  .field .shot { grid-area: shot; align-self: center; margin: 0; }
  .shot .photo { height: 460px; }
  .beat-text { grid-area: text; padding: 0; }
  .modules { gap: 24px; }
  .beat-proof { font-size: 21px; max-width: 26em; }
  .modules p { max-width: 34em; }

  /* One system: the same column as the websites block, the three screens side by side */
  .system { width: min(var(--wrap), calc(100% - 80px)); margin: 0 auto; padding: 128px 0 0; }
  .system-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 40px; }

  /* The team: what we promise on the left, a day of messages on the right, the team photo across the bottom */
  .team {
    width: min(var(--wrap), calc(100% - 80px)); margin: 0 auto; padding: 136px 0 120px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px;
    grid-template-areas: "h chat" "lead chat" "promise chat" "link chat" "slot slot"; grid-template-rows: auto auto auto 1fr auto;
  }
  .team h2 { grid-area: h; margin-bottom: 20px; }
  .team .lead { grid-area: lead; }
  .promise { grid-area: promise; margin: 36px 0 28px; }
  .team .link { grid-area: link; align-self: start; justify-self: start; margin-top: 0; }
  .chat { grid-area: chat; align-self: start; }
  .team-photo { grid-area: slot; margin-top: 72px; }
  .team-photo img { aspect-ratio: 21 / 9; object-position: 50% 62%; }
  /* no team photo on the page for now: the grid ends with the link row */
  .team { grid-template-areas: "h chat" "lead chat" "promise chat" "link chat"; grid-template-rows: auto auto auto 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sun, .note, .plate-photo, .plate-card { animation: none !important; }
}