/* 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: the five modules as one wall of tiles (Bo, 2026-11-15). Phones first: tiles stacked; wide screens: two big
   tiles over three. Each tile: a product object drawn in the site's card grammar, the name, the line, every feature as a
   label. Calm tints only. ---- */
.hbento { padding: 72px 16px 0; }
.hbento-head { margin-bottom: 24px; }
.hbento-head h2 { margin-bottom: 12px; }
.hbento-head .lead { color: var(--ink-2); }
.hbento-wall { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hb { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 22px; overflow: hidden; background: var(--hb-bg, #f1ebe1); }
.hb--google { --hb-bg: var(--tint-presence); --hb-2: var(--tint-presence-2); }
.hb--booking { --hb-bg: var(--tint-reservation); --hb-2: var(--tint-reservation-2); }
.hb--ticket { --hb-bg: var(--tint-ordering); --hb-2: var(--tint-ordering-2); }
.hb--tent { --hb-bg: var(--tint-dinein); --hb-2: var(--tint-dinein-2); }
.hb--wallet { --hb-bg: var(--tint-loyalty); --hb-2: var(--tint-loyalty-2); }
.hb-stage { height: 284px; }
.hb-text { padding: 18px 20px 22px; }
.hb-name { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.hb-name a { color: inherit; text-decoration: none; }
.hb-name a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.hb-name a:focus-visible { outline: none; }
.hb:has(.hb-name a:focus-visible) { outline: 2px solid var(--teal); outline-offset: 3px; }
.hb-line { margin: 6px 0 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.hb-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hb-chips li { padding: 5px 11px; border-radius: 99px; background: var(--hb-2, rgba(255,255,255,.72)); font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.hb { transition: transform .3s var(--ease-out), box-shadow .3s; }
.hb:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -28px rgba(15,42,48,.45); }

/* ---- the scenes: each stage holds one fixed-size canvas (.hbs, 328 × 264; wider in the two big tiles on wide screens)
   with two or three product objects layered on it. Objects are white cards with the resting shadow, real photos where
   they help. The canvas scales down as one piece where a tile gets narrow (--hbs-s). ---- */
.hb-stage { position: relative; }
.hbs { position: absolute; left: 50%; top: 50%; width: 328px; height: 264px; transform: translate(-50%, -50%) scale(var(--hbs-s, 1)); }
.hbs > * { position: absolute; }
.hbs p { margin: 0; }
.hbs img { display: block; }
.hbo { background: var(--white); color: var(--ink); text-align: left; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 34px -18px rgba(15,42,48,.45), 0 0 0 1px rgba(15,42,48,.05); }
.hbo-qr { fill: currentColor; }
.hbo-stars { display: inline-flex; gap: 1px; }
.hbo-stars svg { width: 12px; height: 12px; fill: #f4b400; }
.hbo-g-top { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 16px; color: var(--ink-3); }
/* a phone: dark body, a screen that holds a real site design or a small drawn screen */
.hbo-phone { padding: 5px; border-radius: 24px; background: #101b1d; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 1px 2px rgba(0,0,0,.2), 0 24px 36px -20px rgba(15,42,48,.6); }
.hbo-phone-screen { position: relative; height: 100%; border-radius: 19px; overflow: hidden; background: var(--white); }
.hbo-phone-screen img { width: 100%; height: auto; }

/* 1 · online presence: the restaurant's own site on a phone, its Google card, a review with the reply, the social profiles */
.hbs-p-phone { right: 2px; top: 0; width: 134px; height: 246px; transform: rotate(4deg); }
.hbs-p-phone .hbo-phone-screen { background: #f6efe3; }
.hbo-google { left: -6px; top: 10px; width: 178px; padding: 11px 12px 12px; transform: rotate(-2.5deg); z-index: 2; }
.hbo-g-name { display: block; margin-top: 5px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 22px; line-height: 1; font-weight: 600; }
.hbo-g-rate { display: flex; align-items: center; gap: 5px; margin-top: 5px !important; font-size: 12px; color: var(--ink-2); }
.hbo-g-meta { margin-top: 2px !important; font-size: 11.5px; color: var(--ink-3); }
.hbo-g-meta em { font-style: normal; color: #188038; font-weight: 600; }
.hbo-g-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 8px; height: 56px; border-radius: 8px; overflow: hidden; }
.hbo-g-photos i { background-size: 300% 200%; }
.hbo-g-actions { display: flex; gap: 5px; margin-top: 9px; }
.hbo-g-actions span { padding: 3px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px #dadce0; font-size: 11.5px; color: #1a73e8; font-weight: 600; }
.hbo-g-actions span.on { background: #1a73e8; color: #fff; box-shadow: none; }
.hbo-review { right: -8px; bottom: 0; width: 188px; padding: 10px 12px 10px; border-radius: 14px; transform: rotate(1.5deg); z-index: 3; }
.hbo-r-head { display: flex; align-items: center; gap: 7px; }
.hbo-r-head > i { flex: none; width: 24px; height: 24px; border-radius: 99px; background: var(--tint-presence-2); color: var(--teal); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; }
.hbo-r-head > span { display: grid; gap: 1px; flex: 1; }
.hbo-r-head b { font-size: 11.5px; line-height: 1.2; }
.hbo-r-head small { align-self: start; font-size: 10px; color: var(--ink-3); }
.hbo-r-text { margin-top: 6px !important; font-size: 11.5px; line-height: 1.45; color: var(--ink); }
.hbo-r-reply { margin-top: 7px !important; padding: 6px 8px; border-radius: 8px; background: var(--teal-soft); font-size: 11px; line-height: 1.4; color: var(--ink); }
.hbo-r-reply small { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1px; font-size: 10px; font-weight: 600; color: var(--teal); }
.hbo-r-reply em { display: inline-flex; align-items: center; gap: 2px; font-style: normal; }
.hbo-r-reply svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.hbo-social { left: -4px; bottom: 2px; display: flex; gap: 5px; z-index: 2; }
.hbo-social span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 7px; border-radius: 99px; background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 14px -10px rgba(15,42,48,.4); font-size: 10.5px; font-weight: 600; color: var(--ink); }
.hbo-social svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 2 · reservations: the "book on Google" sheet, the reminder text, the confirmed booking */
.hbo-sheet { left: 0; top: 0; width: 190px; padding: 11px 12px 13px; transform: rotate(-1.5deg); }
.hbo-s-place { display: flex; align-items: center; gap: 8px; margin-top: 8px !important; }
.hbo-s-place i { flex: none; width: 34px; height: 34px; border-radius: 9px; background-size: cover; background-position: 40% 60%; }
.hbo-s-place span { display: grid; }
.hbo-s-place b { font-size: 14px; line-height: 1.25; }
.hbo-s-place small { font-size: 11px; color: var(--ink-3); }
.hbo-s-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; }
.hbo-s-days span { display: grid; justify-items: center; padding: 4px 0 5px; border-radius: 9px; box-shadow: inset 0 0 0 1px #e3e6e4; }
.hbo-s-days small { font-size: 9.5px; line-height: 1.3; color: var(--ink-3); }
.hbo-s-days b { font-family: var(--font-display); font-size: 15px; line-height: 1.15; font-weight: 600; }
.hbo-s-days span.on { background: #e8f0fe; box-shadow: inset 0 0 0 1.5px #1a73e8; }
.hbo-s-days span.on small, .hbo-s-days span.on b { color: #1a73e8; }
.hbo-s-times { display: flex; gap: 4px; margin-top: 6px; }
.hbo-s-times span { padding: 4px 0; flex: 1; text-align: center; border-radius: 99px; box-shadow: inset 0 0 0 1px #e3e6e4; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.hbo-s-times span.on { background: #1a73e8; color: #fff; box-shadow: none; }
.hbo-s-cta { width: max-content; margin-top: 10px !important; padding: 5px 22px; border-radius: 99px; background: #1a73e8; color: #fff; font-size: 12px; font-weight: 600; }
.hbo-sms { right: 0; top: 4px; width: 150px; display: grid; gap: 4px; z-index: 2; transform-origin: 100% 100%; }
.hbo-sms small { justify-self: center; font-size: 10px; color: var(--ink-3); }
.hbo-sms p { position: relative; padding: 8px 11px; border-radius: 16px 16px 4px 16px; background: var(--teal); color: #fff; font-size: 11.5px; line-height: 1.45;
  box-shadow: 0 14px 22px -14px rgba(4,75,83,.7); }
.hbo-book { right: 0; bottom: 0; width: 200px; display: flex; gap: 11px; padding: 12px; align-items: stretch; transform: rotate(2deg); z-index: 3; }
.hbo-b-date { flex: none; width: 52px; border-radius: 11px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; text-align: center; box-shadow: inset 0 0 0 1px rgba(15,42,48,.1); }
.hbo-b-date small { padding: 3px 0; background: var(--teal); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; }
.hbo-b-date b { display: grid; place-items: center; font-family: var(--font-display); font-size: 27px; font-weight: 600; color: var(--ink); }
.hbo-b-text { display: grid; align-content: center; gap: 1px; min-width: 0; }
.hbo-b-ok { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--teal); }
.hbo-b-ok i { width: 16px; height: 16px; border-radius: 99px; background: var(--teal); color: #fff; display: grid; place-items: center; }
.hbo-b-ok svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.hbo-b-text > b { font-size: 16px; line-height: 1.25; }
.hbo-b-text > span { font-size: 12px; color: var(--ink-2); }
.hbo-b-tags { display: flex; gap: 4px; margin-top: 5px !important; }
.hbo-b-tags em { padding: 2px 7px; border-radius: 99px; background: var(--teal-soft); color: var(--teal); font-style: normal; font-size: 10px; font-weight: 600; white-space: nowrap; }

/* 3 · takeaway: the order coming in with nothing taken off, the kitchen ticket, the pizza going out */
.hbo-pizza { right: -44px; bottom: -8px; width: 196px; height: auto; filter: drop-shadow(0 14px 14px rgba(84,48,16,.35)); }
.hbo-ticket { left: 4px; top: 12px; width: 150px; padding: 11px 12px 20px; border-radius: 4px 4px 0 0; background: #fffdf7; font-family: var(--font-text); transform: rotate(-3deg); box-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.1)) drop-shadow(0 14px 12px rgba(84,48,16,.22));
  --torn: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x; }
.hbo-ticket::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fffdf7; border-radius: inherit; -webkit-mask: var(--torn); mask: var(--torn); }
.hbo-ticket { background: none; }
.hbo-t-station { padding-bottom: 5px; border-bottom: 2px solid var(--ink); text-align: center; font-size: 15px; font-weight: 800; letter-spacing: .08em; }
.hbo-t-head { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed rgba(15,42,48,.35); font-size: 11px; }
.hbo-t-head b { font-size: 12.5px; }
.hbo-ticket ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.hbo-ticket li { display: flex; gap: 6px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.hbo-ticket li em { display: block; width: max-content; margin-top: 2px; padding: 0 5px; background: var(--ink); color: #fffdf7; font-style: normal; font-size: 10.5px; }
.hbo-t-foot { margin-top: 8px !important; padding-top: 6px; border-top: 1px dashed rgba(15,42,48,.35); font-size: 10.5px; text-align: center; color: var(--ink-2); }
.hbo-note { right: 0; top: 4px; width: 204px; padding: 11px 12px 12px; z-index: 3; }
.hbo-n-head { display: flex; align-items: center; gap: 8px; }
.hbo-n-head i { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--teal); color: #fff; display: grid; place-items: center; }
.hbo-n-head svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hbo-n-head span { display: grid; flex: 1; min-width: 0; }
.hbo-n-head b { font-size: 12.5px; line-height: 1.25; }
.hbo-n-head small { font-size: 10.5px; line-height: 1.3; color: var(--ink-3); }
.hbo-n-head > small { align-self: start; }
.hbo-n-amount { margin-top: 7px !important; font-family: var(--font-display); font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.hbo-n-fee { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px !important; font-size: 10.5px; color: var(--ink-2); }
.hbo-n-fee em { padding: 2px 8px; border-radius: 99px; background: #e2f3e6; color: #17703a; font-style: normal; font-weight: 700; }

/* 4 · dine-in: the QR on the table, the menu on the guest's phone, the round's ticket in the kitchen */
.hbo-tent { left: -6px; bottom: 8px; display: grid; justify-items: center; z-index: 4; }
.hbo-tent-face { width: 98px; padding: 10px 10px 10px; border-radius: 9px 9px 3px 3px; background: linear-gradient(#fff, #f7f4ee); display: grid; justify-items: center; gap: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 26px -16px rgba(15,42,48,.55), 0 0 0 1px rgba(15,42,48,.05); transform: perspective(500px) rotateX(8deg); transform-origin: bottom; }
.hbo-tent-brand { font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", var(--font-display); font-size: 15px; letter-spacing: .04em; line-height: 1.1; color: var(--ink); }
.hbo-tent-face b { font-family: var(--font-display); font-size: 17px; line-height: 1.15; color: var(--ink); }
.hbo-tent-face .hbo-qr { width: 62px; height: 62px; color: var(--ink); margin: 3px 0; }
.hbo-tent-text { font-size: 10.5px; font-weight: 600; color: var(--ink-2); }
.hbo-tent-base { width: 116px; height: 9px; margin-top: -1px; border-radius: 3px; background: linear-gradient(#b89a6e, #9c7f55); box-shadow: 0 10px 14px -8px rgba(60,40,10,.5); }
.hbs-d-phone { left: 96px; top: 0; width: 136px; height: 262px; z-index: 3; }
.hbs-d-phone .hbo-phone-screen { display: flex; flex-direction: column; padding: 16px 6px 7px; background: #fbfaf7; }
.hbo-m-top { display: flex; justify-content: space-between; align-items: baseline; }
.hbo-m-top b { font-family: Impact, "Haettenschweiler", "Arial Narrow Bold", var(--font-display); font-weight: 400; font-size: 13px; letter-spacing: .04em; }
.hbo-m-top span { font-size: 10px; font-weight: 600; color: var(--ink-2); }
.hbo-m-round { display: flex; justify-content: space-between; align-items: center; margin-top: 6px !important; padding: 4px 4px 4px 8px; border-radius: 99px; background: var(--tint-dinein); font-size: 10px; font-weight: 600; color: var(--ink-2); }
.hbo-m-round em { padding: 1px 7px; border-radius: 99px; background: var(--teal); color: #fff; font-style: normal; }
.hbo-m-list { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 5px; }
.hbo-m-list li { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; line-height: 1.15; border-radius: 10px; background: var(--white); box-shadow: 0 0 0 1px rgba(15,42,48,.06); font-size: 11px; font-weight: 600; line-height: 1.2; }
.hbo-m-list i { flex: none; width: 34px; height: 34px; border-radius: 7px; background-size: 400% 100%; }
.hbo-m-list span { flex: 1; min-width: 0; }
.hbo-m-list b { flex: none; width: 18px; height: 18px; border-radius: 99px; background: var(--teal); color: #fff; display: grid; place-items: center; font-size: 10.5px; }
.hbo-m-cta { margin-top: auto !important; padding: 7px 0; border-radius: 99px; background: var(--sunny); text-align: center; font-size: 11px; font-weight: 700; color: var(--ink); }
.hbo-ticket--sm { left: auto; right: -8px; top: 30px; width: 106px; padding: 10px 9px 18px 16px; transform: rotate(3.5deg); z-index: 2; }
.hbo-ticket--sm .hbo-t-station { font-size: 13.5px; }
.hbo-ticket--sm .hbo-t-head b { font-size: 11.5px; }
.hbo-t-round { margin-top: 6px !important; padding: 1px 0; background: var(--ink); color: #fffdf7; text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; }
.hbo-ticket--sm li { font-size: 12px; }

/* 5 · guest engagement: the prize wheel, the stamp card in the guest's wallet, the invitation to write a review */
.hbo-wheel { right: 2px; top: 2px; width: 138px; height: 138px; border-radius: 99px; background: var(--white); padding: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 20px 30px -18px rgba(40,56,10,.6); }
.hbo-wheel-disc { position: relative; width: 100%; height: 100%; border-radius: 99px;
  rotate: 30deg; background: conic-gradient(#5d6c2c 0 60deg, #f6efe3 0 120deg, #c3d19d 0 180deg, #5d6c2c 0 240deg, #f6efe3 0 300deg, #ffc43a 0); box-shadow: inset 0 0 0 1px rgba(15,42,48,.08); }
.hbo-wheel-disc span { position: absolute; left: 50%; top: 50%; font-size: 10.5px; font-weight: 700; line-height: 1; white-space: nowrap; color: #33401a; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-41px); }
.hbo-wheel-disc span:nth-child(3n + 1) { color: #f6efe3; }
.hbo-wheel-hub { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 99px; background: var(--white); box-shadow: 0 2px 5px rgba(0,0,0,.25), inset 0 0 0 5px var(--white), inset 0 0 0 13px var(--teal); }
.hbo-wheel-pin { position: absolute; left: 50%; top: -5px; width: 16px; height: 20px; margin-left: -8px; background: var(--teal); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.hbo-wallet { left: 0; top: 52px; width: 222px; padding: 12px 14px 11px; border-radius: 16px; background: linear-gradient(135deg, #68782f, #55642a); color: #f6efe3; transform: rotate(-3deg); z-index: 2;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 22px 30px -18px rgba(40,56,10,.75), inset 0 1px 0 rgba(255,255,255,.14); }
.hbo-w-top { display: flex; justify-content: space-between; align-items: baseline; }
.hbo-w-top b { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 22px; line-height: 1; font-weight: 600; }
.hbo-w-top span { font-size: 10.5px; opacity: .8; }
.hbo-w-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0 9px; }
.hbo-w-stamps i { aspect-ratio: 1; border-radius: 99px; box-shadow: inset 0 0 0 1.5px rgba(246,239,227,.45); }
.hbo-w-stamps i.on { box-shadow: none; }
.hbo-w-stamps img { width: 100%; height: 100%; }
.hbo-w-reward { font-size: 11px; line-height: 1.4; opacity: .92; }
.hbo-w-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px !important; padding-top: 7px; border-top: 1px solid rgba(246,239,227,.25); font-size: 10.5px; opacity: .85; }
.hbo-w-foot .hbo-qr { width: 22px; height: 22px; color: #f6efe3; }
.hbo-invite { right: 0; bottom: 0; width: 238px; display: flex; align-items: center; gap: 9px; padding: 9px 10px 9px 11px; border-radius: 14px; transform: rotate(1.5deg); z-index: 3; }
.hbo-invite img { flex: none; }
.hbo-invite p { display: grid; flex: 1; min-width: 0; }
.hbo-invite b { font-size: 11.5px; line-height: 1.3; }
.hbo-invite span { font-size: 10.5px; line-height: 1.35; color: var(--ink-2); }
.hbo-invite em { flex: none; padding: 5px 10px; border-radius: 99px; background: var(--sunny); font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink); }

/* calm loops, each starting and resting on the finished picture; they run only while the tile is on screen (.is-in, set
   in Modules.astro) and not at all under reduced motion */
@keyframes hb-drop { 0%, 58%, 90%, 100% { opacity: 1; translate: 0 0; } 66%, 78% { opacity: 0; translate: 0 -14px; } }
@keyframes hb-pop { 0%, 58%, 90%, 100% { opacity: 1; scale: 1; } 66%, 78% { opacity: 0; scale: .86; } }
@keyframes hb-stamp { 0%, 58%, 88%, 100% { opacity: 1; scale: 1; } 66%, 78% { opacity: 0; scale: 1.7; } }
@keyframes hb-spin { to { rotate: 390deg; } }
@media (prefers-reduced-motion: no-preference) {
  .hbo-r-reply { animation: hb-pop 9s var(--ease-out) infinite paused; transform-origin: 0 0; }
  .hbo-sms { animation: hb-pop 10s var(--ease-out) infinite paused; }
  .hbo-note { animation: hb-drop 9s var(--ease-out) infinite paused; }
  .hbo-ticket--sm { animation: hb-drop 10s var(--ease-out) infinite paused; }
  .hbo-w-stamps i.last img { animation: hb-stamp 8s cubic-bezier(.3, 0, .2, 1) infinite paused; }
  .hbo-wheel-disc { animation: hb-spin 60s linear infinite paused; }
  .hb.is-in :is(.hbo-r-reply, .hbo-sms, .hbo-note, .hbo-ticket--sm, .hbo-w-stamps i.last img, .hbo-wheel-disc) { animation-play-state: running; }
}
@media (max-width: 359px) { .hbs { --hbs-s: .82; } }

@media (min-width: 900px) {
  .hbento { width: min(var(--wrap), calc(100% - 80px)); margin: 0 auto; padding: 128px 0 0; }
  .hbento-head { margin-bottom: 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 80px; align-items: end; }
  .hbento-head h2 { margin: 0; }
  .hbento-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .hb { grid-column: span 2; }
  .hb--big { grid-column: span 3; }
  .hb-stage { height: 296px; }
  .hb:not(.hb--big) .hbs { --hbs-s: .78; }
  .hb--big .hbs { width: 384px; }
  .hb--big .hbs-p-phone { right: 52px; }
  .hb--big .hbo-google { left: 0; width: 190px; }
  .hb--big .hbo-review { right: 0; width: 192px; }
  .hb--big .hbo-social { left: 4px; }
  .hb--big .hbo-sheet { left: 12px; }
  .hb--big .hbo-book { right: 14px; }
  .hb-text { padding: 20px 24px 26px; }
  .hb-name { font-size: 28px; }
}
@media (min-width: 1024px) { .hb:not(.hb--big) .hbs { --hbs-s: .9; } }
@media (min-width: 1200px) {
  .hb:not(.hb--big) .hbs { --hbs-s: 1; }
  .hb-stage { height: 308px; }
  .hb--big .hbs { width: 452px; --hbs-s: 1.08; }
  .hb--big .hbs-p-phone { right: 104px; }
  .hb--big .hbo-google { left: 4px; }
  .hb--big .hbo-social { left: 8px; }
  .hb--big .hbo-sheet { left: 26px; }
  .hb--big .hbo-sms { width: 170px; }
  .hb--big .hbo-book { right: 22px; }
}
@media (prefers-reduced-motion: reduce) { .hb { transition: none; } }
/* other languages run longer: labels in the scenes wrap instead of running off their cards (2026-11-15) */
.hbo-b-tags { flex-wrap: wrap; }
/* the phone menu scrolls under its order button rather than pushing it off the screen */
.hbs-d-phone .hbo-m-list { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.hbs-d-phone .hbo-m-cta { flex: none; }
/* ---- 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; }
}

/* ---- Rebuilt homepage (Bo, 2026-11-15): the trust line in the hero, the five modules as a row of cards, who we are.
   The process block comes from the module pages (components/module/Process.astro, module.css). ---- */
.hero-proof { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--teal-pale); text-align: center; letter-spacing: .01em; }
/* who we are: the facts, then the rules we keep */
.habout { padding: 88px 16px 8px; }
.habout-head h2 { margin-bottom: 12px; }
.habout-head .lead { color: var(--ink-2); }
.habout-facts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.habout-facts li { display: grid; gap: 4px; padding-top: 14px; border-top: 2px solid var(--teal); }
.habout-facts b { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1; letter-spacing: -.02em; color: var(--teal); }
.habout-facts span { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.habout-std { margin-top: 32px; }
.habout-std-label { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.habout-std ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.habout-std li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 99px; background: var(--teal-soft); font-size: 16px; font-weight: 600; }
.habout-std svg { width: 18px; height: 18px; fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .hero-proof { text-align: left; margin-top: 14px; }
  .habout { width: min(var(--wrap), calc(100% - 80px)); margin: 0 auto; }
  .habout { padding-top: 128px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 80px; }
  .habout-head { grid-row: span 2; }
  .habout-facts { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 32px; }
  .habout-facts b { font-size: 48px; }
  .habout-std { margin-top: 36px; }
}