/* PlayArea OS home page stylesheet.
   Ported unchanged from the approved Orbit concept (src/product-windows.css,
   mini-scenes.css, index.css, enhancements.css, in that load order), with two
   additions marked "STATIC-SITE ADDITION" at the foot. The two typefaces are the
   site's own self-hosted files (assets/fonts), not a Google Fonts request. */
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url('/assets/fonts/nunito-v32-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url('/assets/fonts/nunito-v32-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/inter-v20-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/inter-v20-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Original website animation styles, scoped to the product windows. */
/* the window — a tiny screen framed in clay */
.product-window .bw { position: relative; width: 100%; aspect-ratio: 5/4; border-radius: var(--radius);
  border: 2px solid var(--teal-deep); padding: 9px; overflow: hidden;
  display: flex; flex-direction: column; gap: 5px;
  box-shadow: inset 0 2px 6px rgba(15, 76, 74, 0.10); }
.product-window .w1 { background: #fffdf4; }
.product-window .w2 { background: var(--teal-deep); }
.product-window .w3 { background: var(--pink-tint); }
.product-window .w4 { background: var(--green-tint); }
.product-window .w5 { background: #fdf6d8; }
.product-window .w6 { background: var(--slate-tint); }
.product-window .w7 { background: var(--teal-tint); }
.product-window .w8 { background: #fffdf4; }

/* shared loop keyframes (tile-options, verbatim family) */
@keyframes kRoll { 0%, 15% { transform: translateY(0); } 22%, 40% { transform: translateY(-100%); }
  47%, 65% { transform: translateY(-200%); } 72%, 90% { transform: translateY(-300%); }
  97%, 100% { transform: translateY(-400%); } }
@keyframes kPop { 0% { opacity: 0; transform: scale(0.3); } 7% { opacity: 1; transform: scale(1.15); }
  11% { transform: scale(1); } 78% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(0.5); } }
@keyframes kBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes kSweep { to { transform: rotate(360deg); } }
@keyframes kDraw { 0% { stroke-dashoffset: var(--dash); opacity: 1; }
  42% { stroke-dashoffset: 0; opacity: 1; } 74% { stroke-dashoffset: 0; opacity: 1; }
  86%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes kDrain { from { transform: scaleX(1); } to { transform: scaleX(0.06); } }
@keyframes kPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.55); opacity: 0.4; } }
@keyframes kBlinkSoft { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes kRow { 0% { opacity: 0; transform: translateX(-6px); } 5% { opacity: 1; transform: none; }
  84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes kTot { 0%, 16% { transform: translateY(0); } 22%, 30% { transform: translateY(-100%); }
  36%, 100% { transform: translateY(-200%); } }
@keyframes kSway { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
@keyframes kBarUp { 0% { transform: scaleY(0.08); } 12% { transform: scaleY(1); }
  82% { transform: scaleY(1); } 92%, 100% { transform: scaleY(0.08); } }

/* rolling digit strips — tabular, springy, staggered by --ph */
.product-window .strip { display: inline-flex; flex-direction: column; height: 1.18em; overflow: hidden;
  vertical-align: bottom; font-variant-numeric: tabular-nums; }
.product-window .strip i { font-style: normal; display: block; height: 1.18em; line-height: 1.18;
  animation: kRoll 9s var(--spring) infinite; animation-delay: var(--ph, 0s); }

/* window 1 — POS till (treatment B, verbatim) */
.product-window .bbar { height: 9px; border-radius: 5px; background: var(--teal-tint); flex: 0 0 auto; }
.product-window .brow { display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  font-weight: 800; font-size: 10.5px; color: var(--teal-deep);
  animation: kRow 7s ease infinite; animation-delay: var(--ph, 0s); }
.product-window .brow b { font-variant-numeric: tabular-nums; font-weight: 800; }
.product-window .brow.r2 { animation-delay: calc(var(--ph, 0s) + 0.8s); }
.product-window .brow.r3 { animation-delay: calc(var(--ph, 0s) + 1.6s); }
.product-window .btot { margin-top: auto; border-top: 1.5px dashed rgba(15, 76, 74, 0.28); padding-top: 5px;
  display: flex; align-items: baseline; justify-content: space-between;
  font-weight: 800; font-size: 11.5px; color: var(--teal-deep);
  animation: kRow 7s ease infinite; animation-delay: var(--ph, 0s); }
.product-window .btot b { font-variant-numeric: tabular-nums; }
.product-window .btot .strip i { animation: kTot 7s var(--spring) infinite; animation-delay: var(--ph, 0s); }

/* windows 1 + 5 wear the APP's approved tile art (Ahmad, 2026-09-21; the
   picture is written by scripts/website/build-tile-art-site.mjs from the app's
   own generated strings). The art fills the framed screen edge to edge, white
   behind it like the app's windows; the art's own transforms are SVG user-space
   (rotate(a cx cy)), so the site's fill-box re-origin above must not touch them. */
.product-window .bw.has-art { padding: 0; background: #fff; box-shadow: none; }
.product-window .bw .art { position: absolute; inset: 0; }
.product-window .bw .art svg { display: block; width: 100%; height: 100%; }
.product-window .bw .art svg * { transform-box: view-box; transform-origin: 0 0; }

/* POS — the site's own animated words sit on the picture's receipt paper
   (the paper is emptied by the build script). The box is the paper's place in
   the picture, as fractions of the window. */
.product-window .w1.has-art { container-type: inline-size; }   /* the words scale with the window */
.product-window .w1 .paper { position: absolute; left: 16.5%; top: 19.5%; width: 43%; height: 41%;
  display: flex; flex-direction: column; gap: 1.4cqw; padding: 2cqw 2cqw 1.4cqw; box-sizing: border-box;
  white-space: nowrap; letter-spacing: -0.1cqw; line-height: 1.2; }
.product-window .w1 .paper .brow { font-size: 4.4cqw; gap: 1.4cqw; }
.product-window .w1 .paper .btot { font-size: 4.7cqw; padding-top: 1.4cqw; margin-top: auto; border-top-width: 1px; }
.product-window .w1 .paper .strip, .product-window .w1 .paper .strip i { height: 1.2em; line-height: 1.2; }

/* Passes — the three cards float softly, out of step, over the picture; the
   wrapper carries the float so each card's own rotate() stays as drawn */
@keyframes kFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.product-window .w5 .pass-float { animation: kFloat 4.2s ease-in-out infinite; animation-delay: var(--ph, 0s); }
.product-window .w5 .pf2 { animation-duration: 4.8s; animation-delay: calc(var(--ph, 0s) - 1.4s); }
.product-window .w5 .pf3 { animation-duration: 5.4s; animation-delay: calc(var(--ph, 0s) - 2.6s); }

/* window 2 — play timer (treatment B, verbatim) */
.product-window .thead { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 8.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #bfe8e6; }
.product-window .thead b { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; }
.product-window .pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: kPulse 2.4s ease-in-out infinite; animation-delay: var(--ph, 0s); }
.product-window .ttime { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 2px 0; }
.product-window .ttime .big { font-family: var(--font-display); font-weight: 600;
  font-size: 23px; line-height: 1.18; color: #fff; font-variant-numeric: tabular-nums; }
.product-window .tname { font-size: 9px; font-weight: 700; color: #bfe8e6; }
.product-window .tbar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); overflow: hidden; flex: 0 0 auto; }
.product-window .tbar .fill { display: block; height: 100%; border-radius: 4px; background: var(--yellow);
  transform-origin: left; animation: kDrain 8s linear infinite; animation-delay: var(--ph, 0s); }
.product-window .trow2 { display: flex; justify-content: center; gap: 7px; font-weight: 700; font-size: 9px; color: #bfe8e6; }
.product-window .trow2 b { color: #fff; font-variant-numeric: tabular-nums; }
.product-window .trow2 b.warn { color: var(--yellow); animation: kBlinkSoft 1.4s ease-in-out infinite; }

/* window 3 — waivers (treatment B, verbatim) */
.product-window .phone { position: relative; margin: auto; width: 76%; background: #fff; border: 2px solid var(--teal-deep);
  border-radius: 12px; padding: 9px 9px 5px; transform: rotate(-2deg); }
.product-window .phone .ln { display: block; height: 5px; border-radius: 3px; background: #efdde5; margin-bottom: 5px; }
.product-window .phone .ln.short { width: 62%; }
.product-window .sigbox { display: block; width: 100%; height: auto; }
.product-window .bsig { animation: kDraw 5s ease-in-out infinite; animation-delay: var(--ph, 0s); }
.product-window .okchip { position: absolute; top: -9px; right: -9px; background: var(--green-ink); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 8.5px;
  padding: 3px 8px; border-radius: 999px;
  animation: kPop 5s ease infinite; animation-delay: calc(var(--ph, 0s) + 2.2s); }

/* window 4 — parties (treatment B, verbatim) */
.product-window .cal { margin: auto; width: 82%; background: #fff; border: 2px solid var(--teal-deep); border-radius: 10px; padding: 6px; }
.product-window .chead { background: var(--teal-deep); color: #fff; font-family: var(--font-display);
  font-weight: 600; font-size: 9px; letter-spacing: 0.12em; text-align: center;
  border-radius: 5px; padding: 2px 0; }
.product-window .cgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 5px; }
.product-window .cgrid i { display: block; aspect-ratio: 1; border-radius: 5px; background: var(--teal-tint); }
.product-window .cday { display: grid; place-items: center; aspect-ratio: 1; border-radius: 5px; background: var(--yellow);
  font-weight: 800; font-size: 10px; color: var(--ink); font-variant-numeric: tabular-nums; }
.product-window .cconf { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.product-window .cconf circle { animation: kPop 4.5s ease infinite; }
.product-window .cconf .f1 { animation-delay: var(--ph, 0s); }
.product-window .cconf .f2 { animation-delay: calc(var(--ph, 0s) + 1.5s); }
.product-window .cconf .f3 { animation-delay: calc(var(--ph, 0s) + 3s); }

/* window 5 — passes: a punch card stamping itself */
.product-window .pcard { margin: auto; width: 86%; background: #fff; border: 2px solid var(--teal-deep);
  border-radius: 10px; padding: 7px 8px 8px; }
.product-window .phead { font-family: var(--font-display); font-weight: 600; font-size: 8.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-deep); text-align: center; }
.product-window .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 6px; justify-items: center; }
.product-window .pgrid .slot { width: 18px; height: 18px; border-radius: 50%; border: 2px dashed rgba(15, 76, 74, 0.35); position: relative; }
.product-window .pgrid .slot .st { position: absolute; inset: -2px; border-radius: 50%; background: var(--teal);
  display: grid; place-items: center; animation: kPop 6.5s ease infinite; }
.product-window .pgrid .slot .st svg { width: 10px; height: 10px; }
.product-window .pgrid .slot:nth-child(1) .st { animation-delay: var(--ph, 0s); }
.product-window .pgrid .slot:nth-child(2) .st { animation-delay: calc(var(--ph, 0s) + 0.5s); }
.product-window .pgrid .slot:nth-child(3) .st { animation-delay: calc(var(--ph, 0s) + 1s); }
.product-window .pgrid .slot:nth-child(4) .st { animation-delay: calc(var(--ph, 0s) + 1.5s); }
.product-window .pgrid .slot:nth-child(5) .st { animation-delay: calc(var(--ph, 0s) + 2s); }
.product-window .pleft { margin-top: 6px; text-align: center; font-weight: 800; font-size: 9px; color: var(--pink-ink);
  animation: kBlinkSoft 2.8s ease-in-out infinite; animation-delay: var(--ph, 0s); }

/* window 6 — reports: a chart drawing itself, a number rolling */
.product-window .rtop { display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  font-weight: 800; font-size: 10px; color: var(--slate); }
.product-window .rtop b { font-variant-numeric: tabular-nums; font-size: 11.5px; }
.product-window .rchart { flex: 1; display: flex; align-items: stretch; }
.product-window .rchart svg { width: 100%; height: 100%; }
.product-window svg .rbar, .product-window .moment-scene svg .rbar {
  transform-box: fill-box; transform-origin: center bottom;
  animation: kBarUp 7s ease infinite; }
.product-window .rbar.b1 { animation-delay: var(--ph, 0s); }
.product-window .rbar.b2 { animation-delay: calc(var(--ph, 0s) + 0.18s); }
.product-window .rbar.b3 { animation-delay: calc(var(--ph, 0s) + 0.36s); }
.product-window .rbar.b4 { animation-delay: calc(var(--ph, 0s) + 0.54s); }
.product-window .rbar.b5 { animation-delay: calc(var(--ph, 0s) + 0.72s); }
.product-window .rline { animation: kDraw 7s ease-in-out infinite; animation-delay: calc(var(--ph, 0s) + 0.6s); }

/* window 7 — rota: the week filling itself in */
.product-window .wkcal { margin: auto; width: 88%; background: #fff; border: 2px solid var(--teal-deep); border-radius: 10px; padding: 6px; }
.product-window .wkhead { background: var(--teal-deep); color: #fff; font-family: var(--font-display);
  font-weight: 600; font-size: 8.5px; letter-spacing: 0.12em; text-align: center;
  border-radius: 5px; padding: 2px 0; }
.product-window .wkgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 5px; }
.product-window .wkgrid i { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--paper); position: relative; overflow: hidden; }
.product-window .wkgrid i::after { content: ""; position: absolute; inset: 0; border-radius: 4px;
  animation: kPop 8s ease infinite; }
.product-window .wkgrid i.sh1::after { background: var(--teal); animation-delay: var(--ph, 0s); }
.product-window .wkgrid i.sh2::after { background: var(--yellow); animation-delay: calc(var(--ph, 0s) + 0.35s); }
.product-window .wkgrid i.sh3::after { background: var(--pink); animation-delay: calc(var(--ph, 0s) + 0.7s); }
.product-window .wkgrid i.sh4::after { background: var(--green); animation-delay: calc(var(--ph, 0s) + 1.05s); }
.product-window .wkok { margin-top: 6px; text-align: center; font-family: var(--font-display); font-weight: 600;
  font-size: 9px; color: var(--green-ink); animation: kPop 8s ease infinite;
  animation-delay: calc(var(--ph, 0s) + 1.6s); }

/* window 8 — campaigns: a birthday note sending itself */
.product-window .bub { max-width: 88%; border-radius: 11px; padding: 5px 8px; font-weight: 700; font-size: 9px;
  text-align: left; animation: kRow 7.5s ease infinite; }
.product-window .bub svg { display: inline-block; vertical-align: -2px; width: 10px; height: 10px; }
.product-window .bub.out { align-self: flex-end; background: var(--teal-deep); color: #fff;
  border-bottom-right-radius: 3px; animation-delay: var(--ph, 0s); }
.product-window .bub.in2 { align-self: flex-start; background: #fff; color: var(--teal-deep);
  border: 1.5px solid var(--line); border-bottom-left-radius: 3px;
  animation-delay: calc(var(--ph, 0s) + 1.1s); }
.product-window .sentchip { margin-top: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-weight: 600; font-size: 8.5px; color: var(--green-ink);
  animation: kPop 7.5s ease infinite; animation-delay: calc(var(--ph, 0s) + 0.6s); }
.product-window .sentchip svg { width: 10px; height: 10px; }
/* Selected original application tile styles. */

.pa-scene-passes .sc-punch {
  flex: 1;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 9px;
}
.pa-scene-passes .sc-punch-head { inline-size: 44%; block-size: 6px; margin-inline: auto; }
.pa-scene-passes .sc-punch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  flex: 1;
  min-block-size: 0;
}
.pa-scene-forms .sc-clip { flex: 1; min-block-size: 0; inline-size: 100%; }
.pa-scene-forms .sc-clip-board {
  fill: var(--pa-surface);
  stroke: color-mix(in srgb, var(--pa-primary-dark) 85%, var(--tile-glow));
  stroke-width: 3;
}
.pa-scene-forms .sc-clip-clip { fill: color-mix(in srgb, var(--pa-primary-dark) 78%, var(--tile-glow)); }
.pa-scene-forms .sc-clip-cell {
  stroke: color-mix(in srgb, var(--pa-primary-dark) 40%, transparent);
  stroke-width: 2;
}
.pa-scene-forms .sc-clip-tick { stroke: var(--pa-surface); }
.pa-scene-forms .sc-clip-bar { fill: color-mix(in srgb, var(--tile-glow) 28%, var(--pa-surface)); }
.pa-scene-forms .sc-clip-count {
  fill: var(--pa-primary-dark);
  font-family: var(--pa-font-body);
  font-weight: 800;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.pa-scene-loyalty .sc-punch { flex: 1; min-block-size: 0; inline-size: 100%; }
.pa-scene-loyalty .sc-punch-card {
  fill: var(--pa-surface);
  stroke: color-mix(in srgb, var(--pa-primary-dark) 85%, var(--tile-glow));
  stroke-width: 3;
}
.pa-scene-loyalty .sc-punch-band { fill: color-mix(in srgb, var(--pa-primary-dark) 78%, var(--tile-glow)); }
.pa-scene-loyalty .sc-punch-star { fill: var(--pa-accent); }
.pa-scene-loyalty .sc-punch-cell {
  stroke: color-mix(in srgb, var(--tile-glow) 55%, var(--pa-surface));
  stroke-width: 2.5;
  fill: none;
}
.pa-scene-loyalty .sc-punch-tick {
  stroke: color-mix(in srgb, var(--pa-primary-dark) 80%, var(--tile-glow));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pa-scene-quicklinks .sc-globe {
  flex: 1;
  min-block-size: 0;
  align-self: center;
  inline-size: 62%;
  max-block-size: 86%;
  animation: pa-sc-breathe 8s ease-in-out infinite;
}
.pa-scene-quicklinks .sc-globe-sphere,
.pa-scene-quicklinks .sc-globe-line {
  stroke: color-mix(in srgb, var(--pa-primary-dark) 78%, var(--tile-glow));
  stroke-width: 2.4;
}
.pa-scene-quicklinks .sc-globe-mer {
  stroke: color-mix(in srgb, var(--pa-primary-dark) 45%, var(--tile-glow));
  stroke-width: 1.9;
  animation: pa-sc-meridian 9s linear infinite;
}
.pa-scene-quicklinks .sc-globe-dot { stroke: var(--pa-surface); stroke-width: 1.4; }
:root{--white:#fff;--ink:#30494c;--body:#64777a;--teal:#09b1b8;--mint:#08c2bb;--cyan:#04ccdd;--deep:#0a5f63;--dark:#073b3e;--wash:#e3f9f7;--wash-blue:#eaf9fc;--line:#e5eeee;--radius:14px;--font-sans:'Inter',Arial,sans-serif;--font-display:'Nunito','Arial Rounded MT Bold',Arial,sans-serif;color-scheme:light;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:112px}body{margin:0;background:#fff;color:var(--ink);font-family:var(--font-sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer}a{text-decoration:none;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #087f92;outline-offset:5px}button:disabled{cursor:default}img,video{display:block;max-width:100%}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--font-display);font-weight:900}h1{font-size:clamp(3rem,5.3vw,4.65rem);line-height:1.07;letter-spacing:-.045em}h2{font-size:clamp(2.35rem,3.8vw,3.4rem);line-height:1.12;letter-spacing:-.035em}h1 span,h2 span{color:var(--teal)}
.section-wrap{width:min(1160px,calc(100% - 80px));margin-inline:auto}.eyebrow{color:var(--deep);font-size:.76rem;font-weight:800;letter-spacing:.115em;line-height:1.5;margin-bottom:20px}
/* Darker tints of the brand teal keep words legible on white. */
h1 span,h2 span{color:#078f97}
.button{display:inline-flex;align-items:center;justify-content:center;border:2px solid transparent;border-radius:var(--radius);min-height:54px;padding:15px 26px;font-size:.875rem;line-height:1.2;font-weight:800;text-align:center;letter-spacing:.065em;text-transform:uppercase;transition:transform .17s ease,box-shadow .17s ease,background .17s ease}.button:hover{transform:translateY(-2px)}.button:active{transform:translateY(3px);box-shadow:none}.button-primary{background:var(--mint);color:var(--dark);border-color:var(--mint);box-shadow:0 4px 0 #069b9b}.button-primary:hover{background:#18d0c7;border-color:#18d0c7}.button-outline{background:#fff;color:var(--deep);border-color:#dce8e8;box-shadow:0 3px 0 #e5eeee}.button-outline:hover{background:#f5fdfc;border-color:#b9dedd}.button-small{min-height:43px;padding:11px 20px;font-size:.76rem}.text-link{display:inline-flex;margin-top:26px;color:var(--deep);font-size:.9rem;font-weight:800;border-bottom:2px solid #a5e9e5;padding-bottom:3px}.text-link:hover{color:#078995;border-color:#09b1b8}
.skip-link{position:fixed;left:20px;top:-100px;z-index:99;background:var(--deep);color:white;padding:10px 20px;border-radius:12px}.skip-link:focus{top:15px}
.site-header{height:94px;position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line)}.header-inner{max-width:1280px;margin:auto;padding:0 40px;height:100%;display:flex;align-items:center;gap:40px}.brand{display:flex;align-items:center;flex-shrink:0;width:238px;height:56px;overflow:hidden}.brand img{width:238px;max-width:none;height:auto}.main-nav{margin-left:auto;display:flex;align-items:center;gap:28px}.main-nav a{color:#526b6d;font-size:.84rem;font-weight:700;white-space:nowrap;transition:color .18s}.main-nav a:hover{color:var(--teal)}.header-actions{display:flex;align-items:center;gap:14px}.motion-toggle{border:0;background:transparent;color:#758a8b;border-radius:10px;width:36px;height:38px;display:grid;place-items:center}.motion-toggle:hover{background:var(--wash);color:var(--deep)}.motion-toggle:disabled{opacity:.6}.menu-toggle{display:none;border:0;background:white;color:var(--deep);width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px}.mobile-contact{display:none}
.hero{min-height:650px;display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;padding:26px 0 42px}.hero-stage{position:relative;height:566px;isolation:isolate}.hero-disc{width:394px;height:394px;background:var(--wash);border-radius:50%;position:absolute;left:62px;top:96px;z-index:-1}.hero-copy{padding-bottom:15px}.hero-copy .eyebrow{margin-bottom:19px}.lead{color:var(--body);max-width:460px;font-size:1.07rem;line-height:1.7;margin-top:24px}.hero-buttons{display:flex;flex-direction:column;gap:16px;margin-top:30px;max-width:340px}.hero-note{display:flex;align-items:center;gap:8px;margin-top:24px;color:#78898a;font-size:.8rem}.hero-note svg{color:var(--teal)}
.speech-bubble{position:absolute;border:2px solid #dcebea;border-bottom-width:4px;border-radius:20px 20px 20px 4px;background:#fff;color:var(--ink);font-family:var(--font-display);font-size:1.18rem;font-weight:800;line-height:1.45;padding:16px 24px;z-index:3}.hero-greeting{left:180px;top:22px;transform:rotate(3deg)}.hero-greeting strong{color:#07979f}.hero-greeting span{display:block;font-family:var(--font-sans);font-size:.77rem;font-weight:500;margin-top:2px;color:var(--body)}
.pai-character{display:block;border:0;padding:0;background:transparent;position:relative;transform-origin:50% 60%}button.pai-character{border-radius:45%}.pai-drift,.pai-artwork{display:block;width:100%;line-height:0}.pai-artwork svg{width:100%;height:auto;display:block;overflow:visible}.hero-pai{width:286px;position:absolute;left:111px;top:93px}
.sticker{display:inline-flex;align-items:center;gap:10px;position:absolute;z-index:5;border:2px solid #dcebe9;border-bottom-width:4px;border-radius:15px;padding:12px 16px;background:#fff;font-family:var(--font-display);font-size:.94rem;line-height:1.35;font-weight:800;white-space:nowrap}.sticker svg{color:var(--teal)}a.sticker:hover{border-color:var(--mint)}.sticker-timer{left:4px;top:172px;transform:rotate(-9deg)}.sticker-family{right:-4px;bottom:168px;transform:rotate(7deg)}.sticker-connected{left:32px;bottom:67px;transform:rotate(-6deg)}.hello-hint{position:absolute;bottom:1px;left:152px;color:#849998;font-size:.76rem}.scene-spark{position:absolute;color:#04bbca}.spark-one{left:46px;top:83px;transform:rotate(-12deg)}.spark-one svg{width:32px;height:32px}.spark-two{right:19px;top:210px;transform:rotate(12deg)}.spark-two svg{width:22px;height:22px}
.topic-band{border-block:2px solid var(--line)}.topic-strip{min-height:91px;display:flex;align-items:center;justify-content:space-between;gap:24px}.topic-strip a{display:flex;align-items:center;gap:10px;color:#5b7375;font-size:.875rem;font-weight:700;white-space:nowrap}.topic-strip svg{color:#09a6ae}.topic-strip a:hover{color:var(--deep)}
.story-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:76px;padding-block:88px;min-height:620px}.story-copy{max-width:480px}.story-copy>p:not(.eyebrow):not(.small-note){color:var(--body);font-size:1.04rem;line-height:1.75;margin-top:23px}.story-visual{position:relative;min-width:0}
.orbit-scene{position:relative;height:465px}.orbit-scene video,.orbit-scene .orbit-anim{width:100%;height:100%;object-fit:contain;border-radius:48%;-webkit-mask-image:radial-gradient(ellipse 62% 62% at 51% 48%,#000 48%,transparent 82%);mask-image:radial-gradient(ellipse 62% 62% at 51% 48%,#000 48%,transparent 82%)}.orbit-label{display:flex;align-items:center;gap:9px;position:absolute;padding:10px 16px;border:2px solid #d8efed;border-radius:12px;background:#fff;font-size:.86rem;font-weight:700;color:var(--deep)}.label-top{left:12px;top:16px;transform:rotate(-5deg)}.orbit-companion{position:absolute;width:123px;bottom:8px;right:0;transform:rotate(7deg)}
.checkin-scene{height:465px}.scene-disc{position:absolute;width:390px;height:390px;border-radius:50%;background:var(--wash-blue);left:26px;top:32px}.session-card{width:328px;position:absolute;left:28px;top:8px;background:#fff;border:2px solid #cce9e9;border-bottom-width:6px;border-radius:23px;padding:24px;transform:rotate(-5deg)}.session-heading{display:flex;align-items:center;gap:12px}.icon-tile{display:grid;place-items:center;width:47px;height:47px;border-radius:12px;background:var(--wash);color:#069ca4;flex-shrink:0}.session-heading strong{font-family:var(--font-display);font-size:1.05rem;font-weight:900;display:block}.session-heading div>span{color:var(--body);display:block;font-size:.75rem;line-height:1.4;margin-top:3px}.session-family{display:flex;gap:11px;align-items:center;border-block:1px solid var(--line);padding:16px 0;margin-top:20px}.initial-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#d7f6f4;color:var(--deep);font-family:var(--font-display);font-weight:900;flex-shrink:0}.session-family strong{display:block;font-size:.85rem}.session-family div>span{display:block;font-size:.75rem;color:var(--body)}.check-badge{display:grid;place-items:center;width:23px;height:23px;background:var(--mint);color:var(--dark);border-radius:50%;margin-left:auto;flex-shrink:0}
.timer-display{text-align:center;padding:24px 0 15px}.timer-display>span:first-child{display:block;font-size:.75rem;font-weight:700;color:#758d8e;letter-spacing:.12em}.timer-display strong{display:block;font-family:var(--font-display);font-size:2.65rem;font-weight:900;color:var(--deep);letter-spacing:-.03em;line-height:1.3;font-variant-numeric:tabular-nums}.timer-display strong span{color:#84deda;padding:0 2px}.timer-caption{font-size:.78rem;color:var(--body)}.session-progress{width:100%;height:9px;border-radius:20px;background:#e5f6f4;overflow:hidden}.session-progress span{display:block;width:82%;height:100%;background:var(--mint);border-radius:20px;transform-origin:left}.session-checks{display:flex;gap:14px;margin-top:17px}.session-checks span{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--deep);font-weight:600}.session-checks svg{color:#07a7a9;flex-shrink:0}.illustration-label{display:block;margin-top:12px;color:#7d9190;font-size:.75rem;text-align:center}.session-pai{position:absolute;width:174px;right:-14px;bottom:-3px;transform:rotate(7deg)}.session-bubble{font-size:.93rem;right:-7px;top:47px;padding:12px 16px;transform:rotate(6deg)}
.families-scene{height:440px}.family-disc{position:absolute;width:360px;height:360px;border-radius:50%;background:var(--wash);top:45px;left:80px}.approved-art{position:absolute}.approved-art img{width:100%;height:auto}.passes-art{width:209px;left:22px;top:3px;transform:rotate(-10deg);z-index:2}.profile-art{width:211px;right:3px;top:111px;transform:rotate(9deg)}.family-sticker{bottom:5px;left:23px;transform:rotate(-4deg)}
.pai-section{background:#f0fcfb;border-block:1px solid #e5f6f4}.pai-section .story-section{padding-block:65px}.assistant-scene{height:470px}.pai-halo{position:absolute;width:350px;height:350px;top:90px;left:59px;background:#d8f5f2;border-radius:50%}.assistant-pai{position:absolute;width:252px;left:115px;top:53px}.assistant-bubble{left:1px;top:26px;transform:rotate(-7deg)}.assistant-bubble strong{color:#078f97}.assistant-spark{position:absolute;top:55px;right:13px;color:var(--teal);transform:rotate(10deg)}.story-copy>.button{margin-top:30px}.small-note{margin-top:22px;font-size:.78rem;color:#6c8787}
.features-section{padding:95px 0 100px;text-align:center}.features-heading p:not(.eyebrow){color:var(--body);font-size:1.04rem;margin-top:23px}.feature-marquee{--tile-height:258px;margin:38px auto 34px;width:100%;overflow:hidden;padding:16px 0;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}.marquee-track{display:flex;width:max-content}.marquee-group{display:flex;align-items:center;gap:24px;padding-right:24px}.feature-tile{display:block;flex:none;height:var(--tile-height);width:calc(var(--tile-height)*var(--tile-ratio));transition:transform .2s ease}.feature-tile img{width:100%;height:100%;object-fit:contain}.feature-tile:hover,.feature-tile:focus-visible{transform:translateY(-7px)}.feature-marquee:hover .marquee-track,.feature-marquee:focus-within .marquee-track{animation-play-state:paused}
.site-footer{background:var(--deep);color:#fff}.footer-cta{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;min-height:430px;padding-top:36px}.footer-cta .eyebrow{color:#9deee6}.footer-cta h2{font-size:clamp(2.7rem,4.8vw,4rem);color:#fff}.footer-buttons{display:flex;gap:16px;margin-top:32px}.button-white{background:#fff;border-color:#fff;color:var(--deep);box-shadow:0 4px 0 #99d8d5}.button-white:hover{background:#e7fdf9}.button-footer{color:#fff;border-color:#559b9d;box-shadow:0 3px 0 #06494d}.button-footer:hover{background:#14767a}.footer-pai-wrap{height:375px;position:relative}.footer-pai{position:absolute;width:208px;right:27px;bottom:-6px;transform:rotate(8deg)}.footer-bubble{left:5px;top:39px;transform:rotate(-6deg);padding:14px 20px}
.footer-bottom{border-top:1px solid #398385;padding:32px 0;display:flex;align-items:center;gap:40px;font-size:.8rem}.footer-wordmark{font-family:var(--font-display);font-size:1.25rem;font-weight:900;letter-spacing:-.03em}.footer-wordmark span{color:#88e9df}.footer-bottom nav{display:flex;gap:25px;margin-left:auto}.footer-bottom nav a{color:#d3f3f0}.footer-bottom nav a:hover{color:#fff;text-decoration:underline}.footer-bottom>span{color:#a5d8d5}
/* All character paths and colors are the original approved artwork. */
.pai-artwork [data-part]{transform-box:view-box}.pai-artwork [data-part="arm-left"]{transform-origin:236px 741px}.pai-artwork [data-part="eye-left"]{transform-origin:286px 432px}.pai-artwork [data-part="shadow"]{transform-origin:366px 1077px}.pai-artwork [data-part="head"]{transform-origin:371px 660px}
@media(prefers-reduced-motion:no-preference){.pai-drift{animation:pai-float 5.4s ease-in-out infinite}.pai-artwork [data-part="arm-left"]{animation:pai-wave 7.5s ease-in-out .6s infinite}.pai-artwork [data-part="eye-left"]{animation:pai-blink 5.2s ease-in-out 1.1s infinite}.pai-artwork [data-part="head"]{animation:pai-curious 9s ease-in-out infinite}.pai-artwork [data-part="shadow"]{animation:pai-shadow 5.4s ease-in-out infinite}.pai-wave-again [data-part="arm-left"]{animation:pai-hello 1.3s ease-in-out 2}.hero-greeting{animation:bubble-bob 5s ease-in-out infinite}.spark-one,.spark-two,.assistant-spark{animation:sparkle 4.5s ease-in-out infinite}.spark-two{animation-delay:1.6s}.session-progress span{animation:progress-in 1.6s cubic-bezier(.2,.8,.2,1) both}.marquee-track{animation:feature-scroll 65s linear infinite}}
@keyframes pai-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-13px) rotate(1deg)}}@keyframes pai-wave{0%,9%,35%,100%{transform:rotate(0)}15%,27%{transform:rotate(13deg)}21%,32%{transform:rotate(-9deg)}}@keyframes pai-hello{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(18deg)}40%,80%{transform:rotate(-12deg)}}@keyframes pai-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.08)}}@keyframes pai-curious{0%,20%,50%,100%{transform:rotate(0)}30%,38%{transform:rotate(3deg)}}@keyframes pai-shadow{0%,100%{opacity:.65;transform:scaleX(1)}50%{opacity:.32;transform:scaleX(.83)}}@keyframes bubble-bob{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-5px) rotate(1deg)}}@keyframes sparkle{0%,100%{transform:scale(1) rotate(-8deg);opacity:.8}50%{transform:scale(1.15) rotate(12deg);opacity:1}}@keyframes progress-in{from{transform:scaleX(.08)}to{transform:scaleX(1)}}@keyframes feature-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero-stage:not(.in-view) *,.story-visual:not(.in-view) *,.footer-pai-wrap:not(.in-view) *,.feature-marquee:not(.in-view) *,.motion-paused *,.page-hidden *{animation-play-state:paused!important}.motion-paused .feature-marquee{overflow-x:auto;mask-image:none}.motion-paused .marquee-track{animation:none}.motion-paused .marquee-group[aria-hidden="true"]{display:none}
@media(min-width:1440px){.hero{min-height:690px;gap:85px}.hero-stage{height:586px}.hero-pai{width:300px;top:92px}.hero-disc{width:410px;height:410px}}
@media(max-width:1100px){
.header-inner{padding-inline:28px;gap:24px}.brand,.brand img{width:202px}.main-nav{gap:20px}.header-actions{gap:8px}.section-wrap{width:calc(100% - 64px)}.hero{gap:34px;min-height:615px}.hero-stage{height:505px}.hero-disc{width:325px;height:325px;left:25px;top:110px}.hero-pai{width:256px;top:92px;left:61px}.hero-greeting{left:112px;top:19px}.sticker{font-size:.81rem;gap:7px;padding:10px 11px}.sticker-timer{left:-10px;top:180px}.sticker-family{right:-7px;bottom:126px}.sticker-connected{left:10px;bottom:56px}.hello-hint{left:100px}.spark-one{left:14px}.hero-copy .eyebrow{font-size:.75rem}h1{font-size:3.7rem}.story-section{gap:45px;padding-block:74px;min-height:575px}.story-copy>p:not(.eyebrow):not(.small-note){font-size:1rem}.orbit-scene{height:400px}.checkin-scene{height:455px}.session-card{width:295px;left:6px;padding:20px}.session-pai{width:150px;right:-14px}.scene-disc{width:310px;height:310px;left:5px;top:45px}.session-bubble{right:-15px;top:0;font-size:.85rem}.families-scene{height:400px}.family-disc{width:285px;height:285px;left:40px}.passes-art{width:180px;left:6px;top:3px}.profile-art{width:180px;right:0;top:106px}.assistant-pai{left:71px;width:240px}.pai-halo{left:16px;width:320px;height:320px}.assistant-bubble{left:0;top:0}.topic-strip{gap:16px}.topic-strip a{font-size:.78rem;gap:7px}.footer-bubble{left:-20px}}
@media(max-width:850px){
.main-nav{display:none;position:absolute;left:24px;right:24px;top:80px;padding:20px;background:#fff;border:2px solid var(--line);border-bottom-width:5px;border-radius:16px;flex-direction:column;align-items:stretch;gap:0}.main-nav.is-open{display:flex}.main-nav a{padding:12px;font-size:1rem}.main-nav .mobile-contact{display:block;color:var(--deep)}.header-actions{margin-left:auto}.menu-toggle{display:flex}.site-header{height:84px}.hero{gap:24px}h1{font-size:3.2rem}.hero-stage{transform:scale(.9);transform-origin:center;margin-left:-24px}.lead{font-size:1rem}.hero-note{font-size:.75rem}.hero .eyebrow{max-width:270px}.hero-buttons{max-width:300px}.topic-strip{justify-content:flex-start;overflow:auto;scrollbar-width:thin;min-height:78px;gap:28px}.topic-strip a{font-size:.82rem;padding-block:10px}.story-section{gap:32px}.session-card{width:273px;left:0}.session-pai{width:130px;right:-8px}.session-bubble{top:-15px;font-size:.76rem}.scene-disc{width:260px;height:300px}.session-checks{gap:8px}.family-disc{width:255px;height:255px;left:4px}.passes-art{width:151px}.profile-art{width:157px}.families-scene{height:350px}.assistant-pai{width:225px;left:42px;top:80px}.pai-halo{width:265px;height:300px;left:10px;top:110px}.assistant-bubble{font-size:1rem}.assistant-spark{right:5px;top:75px}.footer-bottom{gap:24px;flex-wrap:wrap}.footer-bottom>span{flex-basis:100%}.footer-pai{right:5px;width:185px}.footer-bubble{left:-29px;top:20px;font-size:1rem}}
@media(max-width:700px){
html{scroll-padding-top:96px}.section-wrap{width:calc(100% - 40px)}.header-inner{padding-inline:16px;gap:12px}.brand,.brand img{width:202px}.site-header{height:76px}.header-contact{display:none}.header-actions{gap:0}.main-nav{top:70px;left:16px;right:16px}.hero{display:flex;flex-direction:column;gap:0;min-height:0;padding:23px 0 49px}.hero-stage{transform:none;margin:0;width:min(100%,385px);height:430px}.hero-disc{width:285px;height:285px;left:calc(50% - 142px);top:86px}.hero-pai{width:220px;left:calc(50% - 110px);top:64px}.hero-greeting{top:0;left:calc(50% - 18px);padding:10px 15px;font-size:1rem}.hero-greeting span{font-size:.75rem}.sticker{padding:9px 11px;font-size:.78rem;border-radius:12px}.sticker svg{width:19px;height:19px}.sticker-timer{left:-1px;top:141px}.sticker-family{right:-1px;bottom:109px}.sticker-connected{left:11px;bottom:57px}.hello-hint{bottom:9px;left:0;right:0;text-align:center;font-size:.75rem}.spark-one{top:51px;left:13px}.spark-two{top:147px;right:16px}.hero-copy{text-align:center;padding:10px 0 0;max-width:440px}.hero-copy .eyebrow{font-size:.75rem;max-width:none;margin-bottom:15px;letter-spacing:.07em}h1{font-size:3.4rem}.lead{margin:20px auto 0;font-size:1rem;max-width:355px;line-height:1.7}.hero-buttons{margin:26px auto 0;max-width:338px;gap:14px}.hero-note{justify-content:center;font-size:.75rem;margin-top:21px}.topic-strip{gap:27px;min-height:78px}.topic-strip a{font-size:.81rem}.story-section{display:flex;flex-direction:column;gap:31px;padding:67px 0;min-height:0}.story-copy{max-width:440px;text-align:center}.eyebrow{font-size:.75rem;margin-bottom:16px}h2{font-size:2.65rem}.story-copy>p:not(.eyebrow):not(.small-note){font-size:1rem;margin-top:20px}.story-visual{width:min(100%,410px)}.story-reverse .story-copy{order:-1}.orbit-scene{height:366px}.orbit-companion{width:109px;right:9px;bottom:2px}.label-top{left:13px;top:10px;font-size:.77rem}.checkin-scene{width:min(100%,360px);height:452px;margin-top:24px}.session-card{width:285px;left:9px;padding:20px}.session-checks{gap:12px}.scene-disc{width:310px;height:330px;left:15px;top:45px}.session-pai{width:139px;right:-3px;bottom:0}.session-bubble{right:0;top:-27px;font-size:.82rem}.families-scene{width:min(100%,362px);height:400px;margin-top:6px}.family-disc{width:305px;height:305px;left:27px}.passes-art{width:190px;left:12px}.profile-art{width:182px;right:9px;top:128px}.family-sticker{left:4px;bottom:0}.pai-section .story-section{padding-block:65px 45px}.assistant-scene{width:min(100%,360px);height:434px;margin-top:12px}.assistant-pai{width:230px;left:85px;top:52px}.pai-halo{width:303px;height:303px;left:39px;top:95px}.assistant-bubble{top:2px;left:9px}.assistant-spark{right:3px;top:84px}.story-copy>.button{width:100%;max-width:360px;padding-inline:16px;font-size:.8rem}.small-note{font-size:.75rem}.features-section{padding:70px 0 75px}.features-heading p:not(.eyebrow){font-size:1rem}.features-heading .eyebrow{font-size:.75rem}.feature-marquee{--tile-height:227px;margin-top:28px;margin-bottom:29px}.marquee-group{gap:15px;padding-right:15px}.footer-cta{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:63px}.footer-cta h2{font-size:3.1rem}.footer-buttons{justify-content:center;flex-wrap:wrap;gap:15px}.footer-buttons .button{min-width:147px;padding-inline:17px;font-size:.8rem}.footer-pai-wrap{width:min(100%,310px);height:311px;margin-top:15px}.footer-pai{width:175px;right:12px;bottom:0}.footer-bubble{left:0;top:24px;font-size:1rem}.footer-bottom{padding:25px 0 30px;gap:20px 14px;justify-content:center;text-align:center}.footer-bottom nav{margin:0;gap:20px}.footer-wordmark{width:100%}}
@media(max-width:360px){
.brand,.brand img{width:178px}h1{font-size:3rem}h2{font-size:2.3rem}.hero-stage{height:412px}.hero-greeting{left:145px;padding-inline:11px}.hero-greeting span{max-width:117px}.hero-disc{width:270px;height:270px;left:calc(50% - 135px)}.sticker{font-size:.75rem;gap:6px;padding-inline:9px}.sticker-timer{left:-6px}.sticker-family{right:-6px}.session-card{width:261px;left:5px;padding:18px}.session-pai{width:124px;right:-3px}.scene-disc{width:270px}.session-heading strong{font-size:.95rem}.session-checks{gap:8px}.family-disc{width:260px;height:290px}.passes-art{width:172px}.profile-art{width:164px}.pai-halo{width:265px;height:285px;left:15px}.assistant-pai{left:52px}}
.hero-note,.hello-hint,.small-note,.illustration-label{color:var(--body)}.hero-greeting strong,.assistant-bubble strong{color:var(--deep)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.feature-marquee{overflow-x:auto;mask-image:none}.marquee-group[aria-hidden="true"]{display:none}.button:hover,.button:active,.feature-tile:hover{transform:none}}
/* A product-first enhancement of the existing Orbit concept. */
.original-hero-art,.benefit-art,.product-window{
  --art-ink:#073f8c;--art-frame:#005ff4;--art-wash:#e6efff;--art-teal:#08c2bb;
  --art-yellow:#ffcd05;--art-pink:#f06496;--art-green:#7ac143;--art-green-ink:#3f7d1e;
  --art-pink-wash:#fdeef4;--art-green-wash:#eef7e4;--art-sig:#bf3e73;--art-fill:#fff;
  --art-sig-line:#dcb1c1;--sig-ink:#bf3e73;--sig-line:#dcb1c1;
}
.hero{grid-template-columns:1.08fr 1fr;gap:55px;min-height:620px;padding-block:34px 38px}
.hero-stage{height:535px;min-width:0}
.hero-copy{min-width:0}
.hero h1{font-size:clamp(3.4rem,5.7vw,5.1rem);line-height:1.06;letter-spacing:-.04em}
.hero h1 span{display:inline-block;font-size:clamp(1.9rem,3.25vw,2.85rem);letter-spacing:-.035em;white-space:nowrap;line-height:1.3}
.hero .lead{font-size:1.04rem;max-width:480px;margin-top:21px}
.hero-disc{width:390px;height:390px;left:48px;top:90px;background:#edfaf8}
.original-hero-art{position:absolute;width:100%;left:0;top:53px;z-index:1}
.original-hero-art svg{display:block;width:100%;height:auto;overflow:visible}
.hero-product-label{position:absolute;right:25px;top:18px;display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid #d5eae7;background:#fff;border-radius:12px;color:var(--deep);font-size:.81rem;font-weight:700;transform:rotate(3deg);z-index:3}
.hero-product-label svg{color:var(--teal);flex-shrink:0}
.hero-stage .hero-pai{width:149px;left:-10px;top:auto;bottom:-3px;z-index:3;transform:rotate(-7deg)}
.hero-stage .hero-greeting{left:125px;top:auto;bottom:13px;padding:10px 16px;font-size:1rem;transform:rotate(-3deg)}
.hero-greeting span{font-size:.78rem}
.hero-service-chip{position:absolute;top:106px;left:38px;display:flex;align-items:center;gap:8px;border:1px solid #cfe7e3;border-bottom-width:3px;background:white;border-radius:12px;padding:9px 12px;color:var(--deep);font-size:.78rem;font-weight:700;transform:rotate(-6deg);z-index:3;box-shadow:0 5px 20px #0a5f6310}
.hero-service-chip svg{color:#079b9c;flex-shrink:0}
.hero-buttons{max-width:340px;margin-top:26px;gap:13px}
.hero-note{font-size:.81rem;margin-top:22px}
.story-section{padding-block:64px;gap:66px;min-height:595px}
.story-copy>p:not(.eyebrow):not(.small-note){font-size:1rem;line-height:1.65;margin-top:20px}
.benefit-list{display:grid;gap:12px;margin-top:23px;text-align:left}
.benefit-item{display:flex;align-items:center;gap:13px}
.benefit-art{flex:0 0 49px;width:49px;height:49px;display:grid;place-items:center;background:#fff;border:1px solid #e4eaea;border-radius:15px;box-shadow:0 6px 16px #08c2bb0b;transform:rotate(-3deg)}
.benefit-item:nth-child(2) .benefit-art{transform:rotate(4deg);box-shadow:0 6px 16px #ffcd0512}
.benefit-item:nth-child(3) .benefit-art{transform:rotate(-2deg);box-shadow:0 6px 16px #f064960b}
.benefit-art svg{width:33px;height:33px;overflow:visible}
.benefit-item>span:last-child{min-width:0}
.benefit-item strong{display:block;font-size:.89rem;color:var(--deep);font-weight:750;line-height:1.4}
.benefit-item>span>span{display:block;font-size:.84rem;color:var(--body);line-height:1.45;margin-top:2px}
.story-copy .text-link{margin-top:21px;font-size:.88rem}
.pai-section .story-section{padding-block:58px;min-height:580px}
.assistant-scene{height:450px}
.assistant-scene .pai-halo{width:300px;height:300px;left:calc(50% - 150px);top:83px;background:#dcf6f2}
.assistant-scene .assistant-pai{width:221px;left:calc(50% - 110px);top:63px}
.pai-service{position:absolute;z-index:4;display:flex;align-items:center;gap:9px;min-height:60px;padding:9px 14px 9px 9px;border:1px solid #cde5e1;border-bottom-width:4px;background:#fff;border-radius:16px;color:var(--deep);font-family:var(--font-display);font-size:.91rem;font-weight:900;line-height:1.3;box-shadow:0 9px 24px #0a5f6308;transition:border-color .2s,box-shadow .2s}
.pai-service::after{content:'';position:absolute;width:10px;height:10px;bottom:-7px;left:24px;background:#fff;border-right:1px solid #cde5e1;border-bottom:1px solid #cde5e1;transform:rotate(45deg)}
.pai-service:hover,.pai-service.selected{border-color:#08b8b1;box-shadow:0 8px 22px #08c2bb20}
.pai-service.selected::after{border-color:#08b8b1}
.service-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e4f8f5;color:#078d91;flex-shrink:0}
.service-0{left:0;top:28px;transform:rotate(-7deg)}
.service-1{right:0;top:117px;transform:rotate(6deg)}
.service-1 .service-icon{background:#edf7e6;color:#4e7c31}
.service-2{left:-8px;top:256px;transform:rotate(-5deg)}
.service-2 .service-icon{background:#fff7db;color:#947024}
.service-3{right:-1px;bottom:28px;transform:rotate(4deg)}
.service-3 .service-icon{background:#e9f2ff;color:#276fc0}
.assistant-caption{position:absolute;bottom:-14px;left:0;right:0;text-align:center;font-size:.8rem;color:var(--body)}
.pai-service-detail{position:relative;display:grid;margin-top:23px;padding:18px 19px;background:#fff;border:1px solid #d8eeea;border-radius:17px;min-height:214px;text-align:left}
.pai-service-content{grid-area:1 / 1;min-width:0;visibility:hidden;pointer-events:none}
.pai-service-content.is-active{visibility:visible;pointer-events:auto}
.service-question{font-size:.83rem;color:#698280;display:block;line-height:1.45}
.pai-service-detail h3{font-size:1.18rem;color:var(--deep);font-weight:900;margin-top:9px;line-height:1.3}
.pai-service-detail p{font-size:.92rem;color:var(--body);line-height:1.6;margin-top:7px}
.pai-service-detail .text-link{font-size:.83rem;margin-top:10px}
.small-note{font-size:.82rem;margin-top:16px}
.features-section{padding:64px 0 68px}
.features-heading p:not(.eyebrow){margin-top:17px}
.product-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:27px}
.product-categories{display:flex;gap:5px;flex-wrap:wrap;text-align:left}
.product-categories button{padding:8px 13px;min-height:41px;background:#fff;color:#617677;border:1px solid transparent;border-radius:11px;font-size:.84rem;font-weight:650;white-space:nowrap}
.product-categories button[aria-pressed="true"]{color:var(--deep);background:#e8f9f6;border-color:#bde6de}
.product-categories button:hover{color:var(--deep);background:#f0faf8}
.slider-controls{display:flex;align-items:center;gap:7px;flex-shrink:0}
.slider-controls button{min-height:39px;border:1px solid #dbe9e6;border-radius:10px;background:#fff;padding:7px 10px;font-size:.81rem;font-weight:650;color:var(--deep)}
.slider-controls button:hover{background:#edf9f7}
.slider-controls .slider-play{display:grid;place-items:center;width:37px;padding:0}
.slider-controls button:disabled{opacity:.4}
.product-slider.feature-marquee{margin-top:10px;margin-bottom:8px;padding:17px 0 22px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:auto;touch-action:pan-x pan-y;mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent)}
.product-slider::-webkit-scrollbar{display:none}
.product-track.marquee-track{animation:none!important;transform:none;position:relative}
.product-group.marquee-group{align-items:stretch;gap:18px;padding-right:18px}
.product-tile.feature-tile{display:flex;flex-direction:column;align-items:stretch;text-align:center;gap:0;width:242px;height:302px;padding:11px 11px 12px;background:#fff;border:1px solid #e1e9e6;border-radius:23px;box-shadow:0 8px 17px color-mix(in srgb,var(--tile-color) 10%,transparent);position:relative;flex-shrink:0}
.product-tile>strong{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:9px;font-family:var(--font-display);font-size:1.02rem;line-height:1.15;font-weight:850;color:var(--deep);padding-inline:1px}
.product-benefit{font-size:.81rem;line-height:1.42;color:var(--body);display:block;max-width:214px;margin:0 auto}
.owner-label{font-size:.7rem;line-height:1.4;margin-top:3px;color:#7b656c}
.product-window{display:block;width:100%;height:174px;flex-shrink:0;text-align:left;overflow:hidden;border:2px solid #10457f;border-radius:15px;position:relative;background:#fff;
  --teal:#08c2bb;--teal-deep:#073f8c;--teal-tint:#e6efff;--yellow:#ffcd05;--pink:#f06496;--pink-tint:#fdeef4;--green:#7ac143;--green-tint:#eef7e4;--green-ink:#3f7d1e;--slate:#005ff4;--slate-tint:#e6efff;--paper:#e6efff;--line:#dce6eb;--spring:cubic-bezier(.34,1.4,.5,1);--ph:-1s;
  --pa-primary-dark:#073f8c;--pa-primary:#005ff4;--pa-surface:#fff;--pa-accent:#ffcd05;--pa-fun:#f06496;--pa-success:#7ac143;--pa-teal:#08c2bb;--tile-glow:#08c2bb;
}
.product-window .bw{height:100%;width:100%;border:0;border-radius:0;aspect-ratio:auto}
.product-window .art-pos{--art-ink:#0a5f63}
.product-window .w2{background:#005ff4;padding:13px 12px;gap:9px}
.product-window .thead{font-size:11px;color:#e6efff}
.product-window .ttime .big{font-size:34px}
.product-window .tname,.product-window .trow2{font-size:11px;color:#e6efff}
.product-window .ttime{margin:0}
.product-window .okchip{font-size:12px}
.product-window .chead,.product-window .wkhead{font-size:12px}
.product-window .rtop{font-size:11px;line-height:1.4;gap:5px}
.product-window .rtop b{font-size:12px}
.product-window .rchart{min-height:0}
.product-window .cal{width:75%;max-height:100%}
.product-window .cgrid{gap:3px;margin-top:4px}
.product-window .cgrid i,.product-window .cday{aspect-ratio:auto;height:27px}
.product-window .wkcal{width:86%;padding:7px}
.product-window .wkgrid{gap:4px}
.product-window .wkgrid i{aspect-ratio:auto;height:24px}
.product-window .wkok{font-size:10px}
.product-window .bub{font-size:12px;padding:10px 9px;line-height:1.4}
.product-window .sentchip{font-size:10px}
.product-window .w8{gap:10px}
.approved-window>svg,.picture-window img{display:block;width:100%;height:100%;object-fit:cover}
.picture-window.pai-window img{object-fit:contain;padding:5px}
.scene-window .pa-scene{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:8px}
.scene-window .pa-scene svg{display:block;width:100%;height:100%;max-height:100%}
.scene-window .sc-clip-cell{fill:#e6efff;stroke:#073f8c}
.scene-window .sc-clip-tick{stroke:#08a797;fill:none}
.scene-window .sc-punch-cell.is-on{fill:#d1f1e9;stroke:#0a5f63}
.product-caption{margin:4px 20px 21px;font-size:.8rem;line-height:1.5;color:#62797a}
.product-caption span{display:block;font-size:.75rem;color:#718383;margin-top:2px}
.motion-paused .product-track{animation:none}.motion-paused .product-slider{mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent)}
@media(prefers-reduced-motion:no-preference){
  .original-hero-art .ring-sweep{animation:original-sweep 6s linear infinite;transform-box:view-box;transform-origin:432px 178px}
  .original-hero-art .fl{transform-box:fill-box;transform-origin:center;animation:original-float 5.4s ease-in-out infinite}
  .original-hero-art .flb{animation-delay:1.3s;animation-duration:6.2s}.original-hero-art .flc{animation-delay:2.1s}.original-hero-art .fld{animation-delay:.7s;animation-duration:4.6s}
  .original-hero-art .sig{stroke-dasharray:170;stroke-dashoffset:170;animation:original-sign 1.4s 1s ease forwards}
  .original-hero-art .ballg{transform-box:fill-box;transform-origin:50% 100%;animation:original-bounce 1.9s cubic-bezier(.35,0,.65,1) infinite}
  .pai-service{animation:service-pop .65s cubic-bezier(.2,.8,.2,1) both}.service-1{animation-delay:.15s}.service-2{animation-delay:.3s}.service-3{animation-delay:.45s}
  .is-art-scan [id$="-scanLine"]{animation:invoice-scan 3s ease-in-out infinite alternate}
  .is-art-security [id$="-scannerLine"]{animation:security-scan 3s ease-in-out infinite alternate}
}
@keyframes original-sweep{to{transform:rotate(360deg)}}
@keyframes original-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes original-sign{to{stroke-dashoffset:0}}
@keyframes original-bounce{0%,100%{transform:translateY(0) scale(1.08,.9)}18%,82%{transform:translateY(-8px) scale(1)}50%{transform:translateY(-64px) scale(.96,1.05)}}
@keyframes service-pop{from{opacity:0;scale:.88}to{opacity:1;scale:1}}
@keyframes invoice-scan{from{transform:translateY(-48px)}to{transform:translateY(45px)}}
@keyframes security-scan{from{transform:translateY(-43px)}to{transform:translateY(42px)}}
@media(min-width:1440px){.hero{min-height:645px;gap:64px}.hero-stage{height:545px}.hero-stage .hero-pai{width:156px}.hero-disc{width:405px;height:405px}}
@media(max-width:1100px){
  .hero{gap:35px;min-height:575px}.hero-stage{height:474px}.hero-disc{width:318px;height:318px;left:25px;top:85px}.original-hero-art{top:54px}.hero-stage .hero-pai{width:137px;bottom:10px;left:-5px}.hero-stage .hero-greeting{left:113px;bottom:27px;padding:9px 12px}.hero-service-chip{left:13px;top:99px;font-size:.75rem}.hero-product-label{right:6px;top:19px;font-size:.76rem}.hero h1{font-size:4rem}.hero h1 span{font-size:2.15rem}.hero .lead{font-size:1rem}.story-section{gap:44px;padding-block:54px}.story-copy h2{font-size:2.8rem}.benefit-item{gap:10px}.benefit-art{flex-basis:44px;width:44px;height:44px}.benefit-item strong{font-size:.86rem}.benefit-item>span>span{font-size:.8rem}.assistant-scene .assistant-pai{width:201px;left:calc(50% - 100px);top:77px}.assistant-scene .pai-halo{width:267px;height:267px;left:calc(50% - 133px);top:110px}.pai-service{font-size:.81rem;padding:7px 10px 7px 7px;min-height:55px;gap:6px}.service-icon{width:30px;height:30px}.service-0{left:-3px;top:30px}.service-1{right:-3px;top:126px}.service-2{left:-4px;top:266px}.service-3{bottom:25px}.product-categories button{padding:8px 10px}.product-toolbar{gap:10px}
}
@media(max-width:850px){
  .hero{gap:25px}.hero-stage{transform:none;margin:0;height:435px}.hero-disc{width:285px;height:285px;left:12px;top:82px}.hero-stage .hero-pai{width:124px;bottom:15px}.hero-stage .hero-greeting{left:99px;bottom:35px;font-size:.85rem}.hero-greeting span{font-size:.73rem}.hero-service-chip{left:-3px;top:95px;padding:7px 9px;gap:5px}.hero-product-label{font-size:.73rem;padding:7px 10px;right:0}.hero h1{font-size:3.6rem}.hero h1 span{font-size:1.86rem}.hero-copy .eyebrow{font-size:.73rem;max-width:none}.hero-note{font-size:.74rem}.story-copy h2{font-size:2.55rem}.story-section{gap:34px}.assistant-scene .assistant-pai{width:184px;top:95px;left:calc(50% - 92px)}.assistant-scene .pai-halo{width:232px;height:265px;left:calc(50% - 116px)}.pai-service{font-size:.75rem;gap:5px;padding:7px}.service-icon{width:27px;height:27px}.service-icon svg{width:19px;height:19px}.service-0{top:33px}.service-1{top:136px}.service-2{top:275px}.service-3{bottom:18px}.product-toolbar{flex-wrap:wrap;justify-content:center;gap:12px}.product-categories{justify-content:center}.slider-controls button{min-height:36px}.pai-service-detail{padding:16px;min-height:255px}
}
@media(max-width:700px){
  .hero{padding:13px 0 37px;gap:0;min-height:0}.hero-stage{width:min(100%,385px);height:370px}.original-hero-art{width:96%;left:2%;top:31px}.hero-disc{width:262px;height:262px;left:calc(50% - 131px);top:54px}.hero-stage .hero-pai{width:110px;left:-1px;bottom:0}.hero-stage .hero-greeting{left:99px;bottom:3px;padding:8px 12px;font-size:.86rem}.hero-stage .hero-greeting span{font-size:.74rem}.hero-product-label{top:1px;right:4px;padding:6px 9px;font-size:.72rem;gap:6px}.hero-product-label svg{width:15px}.hero-service-chip{top:60px;left:4px;font-size:.7rem;padding:7px 9px}.hero-service-chip svg{width:16px;height:16px}.hero-copy{padding-top:17px;max-width:440px}.hero-copy .eyebrow{font-size:.73rem;letter-spacing:.075em;margin-bottom:11px}.hero h1{font-size:3.7rem;line-height:1.02}.hero h1 span{font-size:2rem;line-height:1.3;letter-spacing:-.035em}.hero .lead{max-width:370px;font-size:1rem;margin-top:16px;line-height:1.6}.hero-buttons{margin-top:23px;max-width:335px;gap:12px}.hero-note{font-size:.77rem;margin-top:18px}.topic-strip{min-height:68px}.story-section{padding-block:45px;gap:24px;min-height:0}.story-copy h2{font-size:2.55rem}.story-copy>p:not(.eyebrow):not(.small-note){font-size:1rem;line-height:1.6;margin-top:16px}.story-copy .eyebrow{font-size:.72rem;margin-bottom:13px}.benefit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:20px}.benefit-item{flex-direction:column;gap:8px;text-align:center;align-items:center}.benefit-art{width:42px;height:42px;flex-basis:42px;border-radius:13px}.benefit-art svg{width:29px;height:29px}.benefit-item strong{font-size:.81rem;font-weight:750;line-height:1.3}.benefit-item>span>span{display:none}.families-scene{height:365px}.families-scene .passes-art{width:177px}.families-scene .profile-art{width:169px;top:102px}.families-scene .family-disc{width:280px;height:280px}.story-copy .text-link{font-size:.83rem;margin-top:19px}.orbit-scene{height:320px}.checkin-scene{margin-top:22px;height:430px}.session-card{transform:rotate(-4deg) scale(.96);transform-origin:top left}.session-pai{width:134px}.pai-section .story-section{padding-block:45px 30px;gap:13px}.pai-section .story-copy{width:100%}.pai-service-detail{min-height:220px;margin-top:18px;padding:17px 18px}.pai-service-detail h3{font-size:1.13rem}.pai-service-detail p{font-size:.91rem;line-height:1.55}.pai-service-detail .text-link{margin-top:10px}.small-note{font-size:.77rem;margin-top:13px}.assistant-scene{width:min(100%,360px);height:396px;margin-top:5px}.assistant-scene .assistant-pai{width:188px;left:calc(50% - 94px);top:65px}.assistant-scene .pai-halo{width:267px;height:267px;left:calc(50% - 133px);top:80px}.pai-service{font-size:.79rem;min-height:51px;padding:7px 9px;gap:6px}.service-icon{width:29px;height:29px}.service-0{left:1px;top:17px}.service-1{right:0;top:108px}.service-2{left:0;top:231px}.service-3{right:3px;bottom:38px}.assistant-caption{bottom:0;font-size:.76rem}.features-section{padding:48px 0 52px}.features-heading .eyebrow{font-size:.7rem}.features-heading h2{font-size:2.55rem}.features-heading p:not(.eyebrow){font-size:1rem;margin-top:15px}.product-toolbar{margin-top:21px;flex-direction:column;gap:11px}.product-categories{gap:1px;flex-wrap:nowrap;width:100%;justify-content:center}.product-categories button{font-size:.75rem;padding:7px 8px;min-height:36px}.slider-controls button{font-size:.77rem;min-height:33px}.slider-controls .slider-play{width:34px}.product-slider.feature-marquee{margin-top:4px;padding-block:14px 20px}.product-tile.feature-tile{width:222px;height:287px;padding:10px}.product-window{height:157px}.product-tile>strong{font-size:.97rem;min-height:44px}.product-benefit{font-size:.8rem}.product-group.marquee-group{gap:15px;padding-right:15px}.product-caption{font-size:.76rem;margin-bottom:21px}.product-caption span{font-size:.73rem}.product-window .w2{gap:7px}.product-window .cal{width:75%}.product-window .cgrid i,.product-window .cday{height:23px}.product-window .wkgrid i{height:20px}.product-window .wkok{margin-top:4px}.product-window .bub{font-size:11px;padding:8px}.product-window .w8{gap:9px}
}
@media(max-width:360px){
  .hero-stage{height:342px}.original-hero-art{top:32px}.hero-disc{width:244px;height:244px;left:calc(50% - 122px)}.hero-stage .hero-pai{width:100px;bottom:0}.hero-stage .hero-greeting{left:89px;bottom:4px;font-size:.82rem}.hero-greeting span{font-size:.7rem}.hero h1{font-size:3.35rem}.hero h1 span{font-size:1.78rem}.hero-product-label{font-size:.66rem}.hero-service-chip{font-size:.66rem;left:1px;top:56px}.product-categories button{font-size:.71rem;padding:7px 6px}.story-copy h2,.features-heading h2{font-size:2.3rem}.benefit-item strong{font-size:.77rem}.pai-service{font-size:.74rem;padding:6px}.service-icon{width:27px;height:27px}.assistant-scene .assistant-pai{width:177px;top:74px}.service-1{top:115px}.service-2{top:242px}.service-3{bottom:32px}
}
@media(prefers-reduced-motion:reduce){
  .original-hero-art .sig{stroke-dashoffset:0}.pai-service{opacity:1;scale:1}.product-slider.feature-marquee{scroll-behavior:auto}.product-track{animation:none!important}.product-window .bsig,.product-window .rline{stroke-dashoffset:0;opacity:1}
}
.motion-paused .original-hero-art .sig{stroke-dashoffset:0}
.motion-paused .pai-service{animation:none;opacity:1;scale:1}
.invoice-detail-art{float:right;width:42px;height:42px;margin:0 0 6px 12px}
.pa-scene-quicklinks .sc-m2{animation-delay:-3s}
.pa-scene-quicklinks .sc-m3{animation-delay:-6s}
.pa-scene-quicklinks .sc-gd1{fill:var(--pa-accent)}
.pa-scene-quicklinks .sc-gd2{fill:var(--pa-fun)}
.pa-scene-quicklinks .sc-gd3{fill:var(--pa-success)}
.pa-scene-quicklinks .sc-gd4{fill:var(--pa-primary)}
.pa-scene-quicklinks .sc-globe{animation:none}
.pa-scene-quicklinks .sc-globe-mer{transform-box:fill-box;transform-origin:center}
@keyframes pa-sc-meridian{0%{transform:translateX(-21px) scaleX(.12);opacity:0}18%{opacity:1}50%{transform:translateX(0) scaleX(1)}82%{opacity:1}100%{transform:translateX(21px) scaleX(.12);opacity:0}}

@media(max-width:700px){.pai-section .story-reverse .story-copy{order:0}.pai-section .assistant-scene{margin-bottom:16px}}

/* 12: roomier mobile hero, a brighter Orbit, live PAi moments and unique product art. */
.orbit-scene{isolation:isolate;overflow:visible;background:#fff;border:0;border-radius:0;box-shadow:none}
.orbit-scene::before,.orbit-scene::after{display:none}
.orbit-scene video,.orbit-scene .orbit-anim{position:relative;z-index:0;width:100%;height:100%;margin:0;background:#fff;mix-blend-mode:normal}
.orbit-label,.orbit-companion{z-index:3}

.pai-live-popup{position:absolute;z-index:7;right:0;top:18px;width:278px;max-width:calc(100% - 24px);min-height:76px;display:grid;grid-template-columns:38px minmax(0,1fr) 55px;align-items:center;gap:10px;text-align:left;padding:10px 11px;border:1px solid #bfe2dc;border-bottom-width:4px;border-radius:18px;background:#fff;color:var(--deep);box-shadow:0 15px 36px #0a5f6318;cursor:pointer;animation:live-popup-in .45s ease-out both}
.pai-live-popup::after{content:'';position:absolute;left:54px;bottom:-8px;width:12px;height:12px;background:#fff;border-right:1px solid #bfe2dc;border-bottom:1px solid #bfe2dc;transform:rotate(45deg)}
.live-popup-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#e6f9f5,#edf3ff);color:#078d91}
.live-popup-copy{min-width:0}.live-popup-copy strong,.live-popup-copy small{display:block}.live-popup-copy strong{font-family:var(--font-display);font-size:.85rem;line-height:1.25;font-weight:900}.live-popup-copy small{margin-top:3px;color:#718685;font-size:.7rem;line-height:1.25}
.pai-ghost-popup{position:absolute;z-index:5;max-width:174px;padding:8px 11px;border:1px solid #d9e9e6;border-radius:12px;background:#ffffffdc;color:#64807e;font-size:.68rem;line-height:1.25;box-shadow:0 7px 20px #0a5f630c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ghost-left{left:0;top:180px;transform:rotate(-5deg)}.ghost-right{right:2px;bottom:70px;transform:rotate(4deg)}
.pai-moment-dots{position:absolute;z-index:8;left:50%;bottom:25px;display:flex;gap:6px;transform:translateX(-50%)}
.pai-moment-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#badbd7;transition:width .2s,background .2s}.pai-moment-dots button[aria-pressed="true"]{width:23px;border-radius:8px;background:#08a6a4}
.popup-mini{position:relative;display:flex;align-items:center;justify-content:center;width:55px;height:40px;border-radius:11px;background:#f0faf8;color:#086b70;overflow:hidden}
.popup-timer{gap:2px;font-family:var(--font-display)}.popup-timer b{font-size:.8rem}.popup-timer i{font-style:normal;animation:timer-blink 1s steps(1) infinite}
.popup-bars{align-items:end;gap:3px;padding:8px}.popup-bars i{width:6px;border-radius:3px 3px 1px 1px;background:#08b8b1;animation:bar-lift 1.8s ease-in-out infinite}.popup-bars i:nth-child(1){height:9px}.popup-bars i:nth-child(2){height:18px;animation-delay:.2s}.popup-bars i:nth-child(3){height:13px;animation-delay:.4s}.popup-bars i:nth-child(4){height:24px;animation-delay:.6s}
.popup-invoice{flex-direction:column;gap:4px;padding:8px}.popup-invoice>i{display:block;width:31px;height:3px;border-radius:3px;background:#b8d9d5}.popup-invoice>i:nth-child(2){width:25px}.popup-invoice span{position:absolute;left:8px;right:8px;top:7px;height:2px;background:#09bcb2;box-shadow:0 0 8px #09bcb2;animation:invoice-mini-scan 1.6s ease-in-out infinite alternate}
.popup-transfer{gap:7px}.popup-transfer i{width:8px;height:8px;border-radius:50%;background:#119da0;animation:transfer-dot 1.5s ease-in-out infinite}.popup-transfer i:nth-child(2){animation-delay:.18s}.popup-transfer i:nth-child(3){animation-delay:.36s}
.popup-calendar{flex-direction:column}.popup-calendar b{font-family:var(--font-display);font-size:1rem}.popup-calendar i{font-style:normal;font-size:.55rem;letter-spacing:.08em;color:#728988}
.popup-chat{gap:4px}.popup-chat i{width:6px;height:6px;border-radius:50%;background:#24b77e;animation:chat-dot 1.25s ease-in-out infinite}.popup-chat i:nth-child(2){animation-delay:.15s}.popup-chat i:nth-child(3){animation-delay:.3s}.popup-chat b{position:absolute;right:5px;bottom:3px;color:#0b9e70;font-size:.62rem}

.product-domain{align-self:center;margin-top:7px;padding:3px 7px;border-radius:999px;background:color-mix(in srgb,var(--tile-color) 13%,#fff);color:var(--deep);font-size:.59rem;line-height:1;font-weight:850;letter-spacing:.09em}
.product-domain+strong{margin-top:5px;min-height:31px}
.icon-window{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#fff 0 31%,#e9f8f5 32% 54%,#f8fbff 55%);color:#087f88}
.icon-window>svg{position:relative;z-index:2;stroke-width:1.55}.icon-window .icon-orbit{position:absolute;width:122px;height:122px;border:2px dashed #abdcd7;border-radius:50%;animation:icon-orbit-spin 13s linear infinite}.icon-window-line{position:absolute;display:block;width:43px;height:7px;border-radius:8px;background:#cbe8e4}.icon-window-line.line-one{left:18px;bottom:21px}.icon-window-line.line-two{width:28px;right:18px;top:22px;background:#dce8fb}
.icon-person{color:#176fa7}.icon-organisation{color:#08676d}.icon-till{color:#0a6f73;background:radial-gradient(circle at 50% 45%,#fff 0 31%,#fff7d9 32% 54%,#f8fbff 55%)}
.footer-logo{display:flex;align-items:center;width:232px;padding:0;background:transparent;border-radius:0;box-shadow:none}.footer-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 5px #68f2e8aa) drop-shadow(0 0 14px #1bbce966)}

@media(prefers-reduced-motion:no-preference){
  .orbit-scene.in-view::before{animation:orbit-aura 14s linear infinite}
  .feature-marquee.in-view .approved-window>svg,.feature-marquee.in-view .picture-window img,.feature-marquee.in-view .icon-window>svg{transform-origin:center;animation:tile-life 5.8s ease-in-out infinite}
  .feature-marquee.in-view .product-tile:nth-child(3n+2) .product-window>svg,.feature-marquee.in-view .product-tile:nth-child(3n+2) .picture-window img{animation-delay:-1.9s}
  .feature-marquee.in-view .product-tile:nth-child(3n) .product-window>svg,.feature-marquee.in-view .product-tile:nth-child(3n) .picture-window img{animation-delay:-3.7s}
}
@keyframes orbit-aura{to{transform:rotate(360deg)}}
@keyframes live-popup-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes timer-blink{50%{opacity:.28}}
@keyframes bar-lift{0%,100%{transform:scaleY(.72)}50%{transform:scaleY(1.08)}}
@keyframes invoice-mini-scan{from{transform:translateY(0)}to{transform:translateY(24px)}}
@keyframes transfer-dot{0%,100%{transform:translateX(-2px);opacity:.4}50%{transform:translateX(3px);opacity:1}}
@keyframes chat-dot{0%,70%,100%{transform:translateY(0)}35%{transform:translateY(-5px)}}
@keyframes icon-orbit-spin{to{transform:rotate(360deg)}}
@keyframes tile-life{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.015)}}

@media(max-width:700px){
  .original-hero-art .fla{scale:.62}.original-hero-art .flb{scale:.67}
  .hero-product-label,.hero-service-chip,.hero-stage .hero-greeting{display:none}
  .orbit-scene{height:320px}.orbit-scene video,.orbit-scene .orbit-anim{width:100%;height:100%;margin:0}.label-top{left:11px;top:10px}
  .pai-live-popup{left:0;right:0;margin-inline:auto;top:2px;width:254px;min-height:68px;grid-template-columns:34px minmax(0,1fr) 49px;gap:8px;padding:8px}.pai-live-popup::after{left:49px}.live-popup-icon{width:34px;height:34px}.popup-mini{width:49px;height:36px}.live-popup-copy strong{font-size:.78rem}.live-popup-copy small{font-size:.65rem}
  .ghost-left{left:0;top:172px}.ghost-right{right:0;bottom:68px}.pai-ghost-popup{max-width:142px;font-size:.61rem;padding:7px 9px}.pai-moment-dots{bottom:25px}
  .assistant-caption{bottom:-1px}.footer-logo{width:218px}.footer-bottom .footer-logo{margin-inline:auto}
}
@media(max-width:390px){
  .pai-live-popup{width:238px}.pai-ghost-popup{max-width:126px}
}

.motion-paused .orbit-scene::before,.motion-paused .popup-mini *,.motion-paused .icon-orbit,.motion-paused .feature-marquee .product-window>*{animation:none!important}

/* 14: final spacing, seamless Orbit and simplified brand placement. */
.hero h1 span{font-size:clamp(2.35rem,4.15vw,3.65rem);line-height:1.15}
.topic-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.topic-strip a{justify-content:center;width:100%}
.footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px}
.footer-logo{grid-column:2;grid-row:1;width:132px;justify-self:center}
.footer-logo img{filter:none}
.footer-bottom nav{grid-column:1;grid-row:1;justify-self:start;margin:0}
.footer-bottom>span{grid-column:3;grid-row:1;justify-self:end;text-align:right}

@media(max-width:700px){
  .hero h1 span{font-size:clamp(2.25rem,10.2vw,2.65rem);line-height:1.12;white-space:normal}
  .topic-strip{display:flex;justify-content:flex-start;gap:27px;overflow-x:auto}
  .topic-strip a{width:auto;justify-content:flex-start}
  #families .benefit-list{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,292px);margin-inline:auto;column-gap:24px}
  .orbit-scene{background:#fff}
  .orbit-scene video,.orbit-scene .orbit-anim{background:#fff;-webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 49%,#000 48%,rgba(0,0,0,.92) 64%,transparent 96%);mask-image:radial-gradient(ellipse 72% 78% at 50% 49%,#000 48%,rgba(0,0,0,.92) 64%,transparent 96%)}
  .footer-bottom{display:grid;grid-template-columns:1fr;justify-items:center;gap:18px;text-align:center}
  .footer-logo,.footer-bottom nav,.footer-bottom>span{grid-column:1;justify-self:center}
  .footer-logo{grid-row:1;width:120px;margin:0}
  .footer-bottom nav{grid-row:2}
  .footer-bottom>span{grid-row:3;text-align:center}
}

@media(max-width:360px){
  .hero h1 span{font-size:2.18rem}
}

/* ===== STATIC-SITE ADDITION 1: scroll reveal =====
   The concept used the Motion library for this. Here the <head> arms it
   (html.armed, only when motion is allowed) and home.js adds .in. The 4 s
   failsafe makes sure nothing stays hidden if the script never arrives. */
.reveal{transition:opacity .8s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0s),transform .8s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0s)}
.armed .reveal:not(.in){opacity:0;transform:translateY(26px);animation:reveal-failsafe .01s 4s forwards}
@keyframes reveal-failsafe{to{opacity:1;transform:none}}
/* ===== STATIC-SITE ADDITION 2: the [hidden] attribute =====
   The popups and filtered-out tiles use it; their display rules would otherwise win. */
.pai-live-popup[hidden],.product-tile[hidden]{display:none}
/* ===== STATIC-SITE ADDITION 3: the live tool count reads as plain text ===== */
.product-caption [data-count]{font:inherit}
/* ===== STATIC-SITE ADDITION 4: no sideways page scroll =====
   The soft discs behind the scenes are meant to bleed past their box; on a 320 px
   phone the family disc stuck out 7 px and let the whole page pan sideways (the
   concept snapshot did the same). `clip`, unlike `hidden`, makes no scroll
   container, so the sticky header keeps working. */
.site{overflow-x:clip}
/* ===== STATIC-SITE ADDITION 5: footer base (owner, 2026-10-07) =====
   Smaller logo, every link on one row, and the closing line last, all centred.
   The two footer buttons are the same size. */
.footer-base{border-top:1px solid #398385;padding:34px 0 30px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.footer-base-logo{display:block;width:88px}
.footer-base-logo img{display:block;width:100%;height:auto}
.footer-base nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;font-size:.84rem}
.footer-base nav a{color:#d3f3f0}
.footer-base nav a:hover{color:#fff;text-decoration:underline}
.footer-copy{color:#a5d8d5;font-size:.8rem}
.footer-buttons .button{min-width:230px;min-height:54px}
@media(max-width:700px){.footer-buttons .button{min-width:0;flex:1 1 220px}}
/* ===== STATIC-SITE ADDITION 9: FAQ and Trust, in the Orbit palette (owner, 2026-10-07) ===== */
.faq-section{padding-block:96px 104px;max-width:860px}
.faq-heading,.trust-heading{text-align:center}
.faq-heading p,.trust-heading p{margin-top:16px;color:var(--body);font-size:1.04rem}
.inline-link{color:var(--deep);font-weight:700;border-bottom:2px solid #9fe2dd}
.faq-list{margin-top:40px;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid #d8eeea;border-radius:16px;background:#fff;transition:background .2s}
.faq-item[open]{background:#f6fcfb}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font-weight:700;font-size:1.02rem;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'';flex:none;width:12px;height:12px;border-right:2.5px solid var(--deep);border-bottom:2.5px solid var(--deep);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq-item summary:focus-visible{outline:3px solid #087f92;outline-offset:3px;border-radius:16px}
.faq-body{padding:0 24px 20px;color:var(--body);font-size:.97rem;line-height:1.7}
.faq-body a{color:var(--deep);font-weight:700}
.trust-band{background:#f1faf9;border-top:1px solid #e1f2f0;padding-block:96px}
.trust-grid{margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.trust-tile{background:#fff;border:1px solid #d8eeea;border-radius:20px;padding:26px 24px;box-shadow:0 14px 34px #0a5f630d}
.trust-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--wash)}
.trust-icon svg{width:34px;height:34px;--art-paper:#0a5f63;--art-ink:#09b1b8;--art-yellow:#f5b800}
.trust-tile h3{margin-top:18px;font-size:1.12rem;line-height:1.3;color:var(--deep)}
.trust-tile p{margin-top:10px;color:var(--body);font-size:.93rem;line-height:1.65}
.trust-more{display:flex;width:max-content;margin:40px auto 0}
@media(max-width:1100px){.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.trust-grid{grid-template-columns:1fr}.faq-section{padding-block:64px 72px}.trust-band{padding-block:64px}.faq-item summary{padding:18px 18px}.faq-body{padding:0 18px 18px}.trust-more{width:100%}}
/* ===== STATIC-SITE ADDITION 10: the official header lockup (owner, 2026-10-07) =====
   Ahmad's header artwork (2026-10-07), trimmed to its edges: assets/home/playarea-os-header-logo.png,
   sized by height so it is never clipped. */
.brand{width:auto;height:auto;overflow:visible}
.brand img{width:auto;height:46px;max-width:none}
@media(max-width:1100px){.brand,.brand img{width:auto}.brand img{height:42px}}
@media(max-width:700px){.brand img{height:36px}}
.faq-more{display:flex;width:max-content;margin:32px auto 0}
@media(max-width:700px){.faq-more{width:100%}}
/* ===== STATIC-SITE ADDITION 11: PAi has a different pose in each place, and glides (owner, 2026-10-08) =====
   Orbit: points up at the orbit, head tilted toward it. Check-in: cheering, both arms up.
   PAi section: the hello wave, one arm tucked in thinking. Footer: a big wave goodbye.
   home.js adds a .pai-glide layer that drifts him a little as the page scrolls past. */
.pai-artwork{display:block}
.pai-artwork [data-part="arm-right"]{transform-origin:510px 746px}
.pai-artwork [data-part="antenna"]{transform-origin:462px 246px}
.pai-glide{display:block;will-change:transform;transform:translate3d(var(--gx,0px),var(--gy,0px),0) rotate(var(--gr,0deg))}
.orbit-companion .pai-artwork [data-part="arm-left"]{animation:pai-point 4.8s ease-in-out infinite}
.orbit-companion .pai-artwork [data-part="arm-right"]{transform:rotate(-18deg)}
.orbit-companion .pai-artwork [data-part="head"]{animation:none;transform:rotate(-7deg)}
.session-pai .pai-artwork [data-part="arm-left"]{animation:pai-cheer 1.9s ease-in-out infinite}
.session-pai .pai-artwork [data-part="arm-right"]{animation:pai-cheer-r 1.9s ease-in-out infinite}
.assistant-pai .pai-artwork [data-part="arm-right"]{transform:rotate(34deg)}
.footer-pai .pai-artwork [data-part="arm-left"]{animation:pai-hello 1.4s ease-in-out .4s infinite}
.footer-pai .pai-artwork [data-part="arm-right"]{transform:rotate(-22deg)}
@media(prefers-reduced-motion:no-preference){
  .pai-artwork [data-part="antenna"]{animation:pai-antenna 3.4s ease-in-out infinite}
  .session-pai .pai-artwork [data-part="antenna"]{animation-duration:1.9s}
}
@keyframes pai-point{0%,100%{transform:rotate(30deg)}50%{transform:rotate(38deg)}}
@keyframes pai-cheer{0%,100%{transform:rotate(30deg)}50%{transform:rotate(44deg)}}
@keyframes pai-cheer-r{0%,100%{transform:rotate(-46deg)}50%{transform:rotate(-60deg)}}
@keyframes pai-antenna{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(7deg)}}
@media(prefers-reduced-motion:reduce){
  .orbit-companion .pai-artwork [data-part="arm-left"]{transform:rotate(34deg)}
  .session-pai .pai-artwork [data-part="arm-left"]{transform:rotate(36deg)}
  .session-pai .pai-artwork [data-part="arm-right"]{transform:rotate(-52deg)}
}
/* ===== STATIC-SITE ADDITION 12: the orbit PAi's little story (owner, 2026-10-08) =====
   One 18 s loop. He points at the orbit for about 7 s, then: walks a few steps toward
   it, trips, his head pops off and rolls away, he gets up and gropes around for it,
   finds it, lifts it and screws it back on, blinks, and walks back to his spot.
   The head turns around its own centre (the translate pair moves the pivot from the
   neck to the middle of the head). Off screen it pauses; reduced motion never plays it. */
.orbit-companion .pai-drift{animation:pai-walk 18s linear infinite}
.orbit-companion .pai-artwork [data-part="robot"]{transform-origin:371px 1000px;animation:pai-trip 18s ease-in-out infinite}
.orbit-companion .pai-artwork [data-part="head"]{animation:pai-roll 18s ease-in-out infinite}
.orbit-companion .pai-artwork [data-part="arm-left"]{animation:pai-armL-story 18s ease-in-out infinite}
.orbit-companion .pai-artwork [data-part="arm-right"]{animation:pai-armR-story 18s ease-in-out infinite}
.orbit-companion .pai-artwork [data-part="eye-left"]{animation:pai-eye-story 18s ease-in-out infinite}
@keyframes pai-walk{
  0%,40%{transform:translate(0,0)}
  41.75%{transform:translate(-11px,-6px)}43.5%{transform:translate(-22px,0)}
  45.25%{transform:translate(-33px,-6px)}47%{transform:translate(-44px,0)}
  48.75%{transform:translate(-55px,-6px)}50.5%{transform:translate(-66px,0)}
  52.25%{transform:translate(-77px,-6px)}54%{transform:translate(-88px,0)}
  55%,66%{transform:translate(-92px,0)}
  68%{transform:translate(-106px,-4px)}70%{transform:translate(-120px,0)}
  72%{transform:translate(-135px,-4px)}74%,88%{transform:translate(-150px,0)}
  90%{transform:translate(-125px,-6px)}92%{transform:translate(-100px,0)}
  94%{transform:translate(-75px,-6px)}96%{transform:translate(-50px,0)}
  98%{transform:translate(-25px,-6px)}100%{transform:translate(0,0)}
}
@keyframes pai-trip{
  0%,54.5%{transform:rotate(0)}
  56%{transform:rotate(-34deg)}
  58%{transform:rotate(-28deg)}
  61%,100%{transform:rotate(0)}
}
@keyframes pai-roll{
  0%,55%{transform:translate(0px,0px) translate(0px,-230px) rotate(-7deg) translate(0px,230px)}
  57%{transform:translate(-60px,-50px) translate(0px,-230px) rotate(-40deg) translate(0px,230px)}
  59%{transform:translate(-260px,330px) translate(0px,-230px) rotate(-200deg) translate(0px,230px)}
  60%{transform:translate(-300px,270px) translate(0px,-230px) rotate(-250deg) translate(0px,230px)}
  64%,66%{transform:translate(-650px,340px) translate(0px,-230px) rotate(-540deg) translate(0px,230px)}
  70%{transform:translate(-481px,340px) translate(0px,-230px) rotate(-540deg) translate(0px,230px)}
  74%,76%{transform:translate(-300px,340px) translate(0px,-230px) rotate(-540deg) translate(0px,230px)}
  78%{transform:translate(-190px,150px) translate(0px,-230px) rotate(-620deg) translate(0px,230px)}
  80%{transform:translate(0px,-60px) translate(0px,-230px) rotate(-700deg) translate(0px,230px)}
  82%{transform:translate(0px,0px) translate(0px,-230px) rotate(-752deg) translate(0px,230px)}
  84%{transform:translate(0px,0px) translate(0px,-230px) rotate(-700deg) translate(0px,230px)}
  86%{transform:translate(0px,0px) translate(0px,-230px) rotate(-740deg) translate(0px,230px)}
  88%,100%{transform:translate(0px,0px) translate(0px,-230px) rotate(-727deg) translate(0px,230px)}
}
@keyframes pai-armL-story{
  0%,12%,24%,36%{transform:rotate(30deg)}
  6%,18%,30%,40%{transform:rotate(38deg)}
  41.75%,45.25%,48.75%,52.25%{transform:rotate(22deg)}
  43.5%,47%,50.5%,54%{transform:rotate(44deg)}
  56%{transform:rotate(72deg)}
  61%{transform:rotate(10deg)}
  66%,70%{transform:rotate(-40deg)}
  68%,72%{transform:rotate(-8deg)}
  74%{transform:rotate(-42deg)}
  76%{transform:rotate(-46deg)}
  78%{transform:rotate(-10deg)}
  80%{transform:rotate(52deg)}
  82%,87%{transform:rotate(44deg)}
  90%,94%,98%{transform:rotate(22deg)}
  88%,92%,96%,100%{transform:rotate(30deg)}
}
@keyframes pai-armR-story{
  0%,40%{transform:rotate(-18deg)}
  41.75%,45.25%,48.75%,52.25%{transform:rotate(-34deg)}
  43.5%,47%,50.5%,54%{transform:rotate(-8deg)}
  56%{transform:rotate(-72deg)}
  61%{transform:rotate(-18deg)}
  66%,70%{transform:rotate(-20deg)}
  68%,72%{transform:rotate(-52deg)}
  76%{transform:rotate(-30deg)}
  80%{transform:rotate(-58deg)}
  82%,87%{transform:rotate(-50deg)}
  90%,94%,98%{transform:rotate(-34deg)}
  88%,92%,96%,100%{transform:rotate(-18deg)}
}
@keyframes pai-eye-story{
  0%,55%,63%,87%,89.5%,100%{transform:scaleY(1)}
  57%,60%{transform:scaleY(.15)}
  88.5%{transform:scaleY(.1)}
}
/* ===== STATIC-SITE ADDITION 13: room for the orbit PAi's walk on iPhone (2026-10-08) =====
   His SVG now spans 1642 units wide instead of 742 (the extra is empty space to his left
   and above), so the box is 2.213 times wider and the robot draws at the same size and spot. */
.orbit-companion{width:272px;transform-origin:calc(100% - 62px) 60%}
@media(max-width:700px){.orbit-companion{width:241px;transform-origin:calc(100% - 55px) 60%}}
/* ===== STATIC-SITE ADDITION 14: the globe is an animated picture (2026-10-08) ===== */
.orbit-pic{display:contents}
.orbit-scene .orbit-anim{display:block}
/* ===== STATIC-SITE ADDITION 8: the call-to-action colour, white words (owner, 2026-10-07) =====
   One variable: --cta. Options shown to the owner: #08c2bb (today, 2.2:1 with white),
   #0a9ea5 (3.4:1), #06838a (4.5:1, passes WCAG AA). Ahmad chose #08c2bb on 2026-10-07. */
:root{--cta:#08c2bb;--cta-shadow:#069b9b;--cta-hover:#18d0c7}
.button-primary{background:var(--cta);border-color:var(--cta);color:#fff;box-shadow:0 4px 0 var(--cta-shadow)}
.button-primary:hover{background:var(--cta-hover);border-color:var(--cta-hover);color:#fff}

/* ===== STATIC-SITE ADDITION 6: hero wording on the left on laptop and desktop =====
   Phones keep the picture first, then the words (owner, 2026-10-07). */
@media(min-width:851px){.hero-copy{order:-1}}
@media(min-width:851px) and (max-width:1100px){.hero-stage{margin-left:0;margin-right:-24px}}
/* ===== STATIC-SITE ADDITION 7: the old site's header menu, in the Orbit header's type =====
   Product and Resources open on hover, keyboard focus or click (home.js pins them);
   on a phone they open inside the menu panel. */
.nav-group{position:relative}
.nav-group-btn{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;color:#526b6d;font-size:.84rem;font-weight:700;white-space:nowrap;transition:color .18s}
.nav-group-btn:hover,.nav-group.open .nav-group-btn{color:var(--teal)}
.nav-chev{transition:transform .18s}
.nav-group.open .nav-chev{transform:rotate(180deg)}
.nav-menu{display:none;position:absolute;top:calc(100% + 16px);left:-16px;min-width:210px;flex-direction:column;gap:2px;padding:10px;background:#fff;border:2px solid var(--line);border-bottom-width:5px;border-radius:16px;box-shadow:0 18px 40px #0a5f6318;z-index:40}
.nav-menu::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px}
.nav-menu a{padding:10px 12px;border-radius:10px;font-size:.88rem}
.nav-menu a:hover{background:var(--wash);color:var(--deep)}
.nav-group.open .nav-menu{display:flex}
@media(min-width:851px){.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{display:flex}.nav-group:hover .nav-chev,.nav-group:focus-within .nav-chev{transform:rotate(180deg)}}
@media(max-width:850px){
  /* a compact menu card under the menu button, not a full-width sheet (owner, 2026-10-08) */
  .main-nav{left:auto;right:24px;width:min(290px,calc(100% - 32px));padding:8px}
  .main-nav a{padding:9px 12px;font-size:.95rem}
  .nav-group-btn{width:auto;justify-content:flex-start;gap:6px;padding:9px 12px;font-size:.95rem}
  .nav-menu{position:static;min-width:0;padding:0 0 4px 12px;border:0;border-radius:0;box-shadow:none}
  .nav-menu::before{display:none}
  .nav-menu a{padding:7px 12px;font-size:.9rem}
}
@media(max-width:700px){.main-nav{right:16px}}