/* ============================================================================
   Synergy — luckycat.ie/synergy
   ----------------------------------------------------------------------------
   The Synergy visual universe inside the Lucky Cat site. Values follow the
   Synergy brand tokens (colour package 04, "Signal & Bloom"): blue for the
   assistant, coral for the product, and nothing else (owner decision 24/09:
   no violet). Motion: blue travels in from the assistant, coral arrives at the app.
   Mobile first. Every animated state has a complete static resting state; the
   motion rules only apply under html.motion (added by /assets/motion.js when
   JavaScript runs and reduced motion is not requested).
   ========================================================================= */

:root {
  --syn-assistant: #2D4AD9;
  --syn-assistant-deep: #2239AE;
  --syn-app: #C9452E;
  --syn-ink: #171614;
  --syn-muted: #565046;
  --syn-rule: #E6E1D7;
  --syn-rule-soft: #F1ECE3;
  --syn-surface: #FAF8F3;
  --syn-surface-2: #F3EFE7;
  --syn-raised: #FFFFFF;
  --syn-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --syn-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --syn-wrap: 1180px;
  --syn-gutter: 16px;
  --syn-ease: cubic-bezier(.16, 1, .3, 1);
  --syn-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  /* the shared consent banner (lc-consent.js) paints with the site's names */
  --cream: var(--syn-surface);
  --forest: var(--syn-ink);
}
@media (min-width: 640px) { :root { --syn-gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--syn-surface);
  color: var(--syn-ink);
  font-family: var(--syn-serif);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--syn-assistant); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--syn-app); }
:focus-visible { outline: 2px solid var(--syn-assistant); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 300;
  background: var(--syn-ink); color: #fff; padding: 10px 14px; font-family: var(--syn-mono); font-size: 13px;
}
.skip:focus { left: 8px; }

.wrap { max-width: var(--syn-wrap); margin: 0 auto; padding: 0 var(--syn-gutter); }
.label {
  font-family: var(--syn-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--syn-muted);
}
.tnum { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- header --------------------------------------------------------------- */
.syn-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(246, 243, 236, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--syn-rule);
}
.syn-head-in { display: flex; align-items: center; gap: 12px; height: 60px; }
.syn-lockup { display: flex; align-items: center; gap: 10px; color: var(--syn-ink); text-decoration: none; min-width: 0; }
.syn-lockup:hover { color: var(--syn-ink); }
.syn-lockup .lc { width: 26px; height: 26px; flex: none; }
.syn-lockup .rule { width: 1px; height: 22px; background: #DFD9CD; flex: none; }
.syn-lockup .mark { width: 20px; height: 20px; flex: none; }
.syn-lockup .word { font-family: var(--syn-serif); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; }
.syn-head .brandnav-menu { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.syn-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.syn-nav .nl { display: none; font-family: var(--syn-mono); font-size: 0.8rem; color: var(--syn-muted); text-decoration: none; white-space: nowrap; }
.syn-nav .nl:hover { color: var(--syn-ink); }
@media (min-width: 980px) { .syn-nav .nl { display: inline; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  font-family: var(--syn-mono); font-size: 0.82rem; letter-spacing: 0.02em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s var(--syn-ease), color .2s var(--syn-ease), border-color .2s var(--syn-ease), transform .2s var(--syn-ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--syn-assistant); color: #fff; }
.btn-primary:hover { background: var(--syn-assistant-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--syn-ink); border-color: var(--syn-ink); }
.btn-ghost:hover { background: var(--syn-ink); color: var(--syn-surface); }
.syn-head .btn { min-height: 40px; padding: 8px 12px; font-size: 0.75rem; }
@media (max-width: 419px) { .syn-head .btn .long { display: none; } }

/* --- sections ------------------------------------------------------------- */
/* Containment as the page's own grammar, not as decoration.

   The mark is two brackets facing each other and the gap between them is the part
   Synergy writes. Until now that idea stopped at the logo: every section was divided by
   the same full-width hairline any editorial site uses, so with the mark covered the
   page had a serif and three colours and nothing structural that was its own.

   A section rule that turns down at both ends says "this is held", which is what the
   product does. It costs one pseudo-element, introduces no new colour, and it is the
   one thing on the page that could not be lifted onto another brand without bringing
   the idea with it. The ticks are 9px: long enough to read as a bracket, short enough
   that it never closes into a box -- a closed box would say "finished", and the whole
   claim is that something passes through. */
.sec { padding: clamp(64px, 10vw, 128px) 0; }
.sec > .wrap { position: relative; }
.sec > .wrap::before {
  content: "";
  position: absolute;
  top: calc(clamp(64px, 10vw, 128px) / -2);
  left: var(--syn-gutter);
  right: var(--syn-gutter);
  height: 9px;
  border: 1px solid var(--syn-rule);
  border-bottom: 0;
  pointer-events: none;
}
/* The closing bracket, under the last section: the same form, inverted, so the page
   ends held rather than trailing off. */
.sec:last-of-type > .wrap::after {
  content: "";
  position: absolute;
  bottom: calc(clamp(64px, 10vw, 128px) / -2);
  left: var(--syn-gutter);
  right: var(--syn-gutter);
  height: 9px;
  border: 1px solid var(--syn-rule);
  border-top: 0;
  pointer-events: none;
}
.sec-num { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sec-num::after { content: ""; flex: 1; height: 1px; background: var(--syn-rule); max-width: 120px; }
.sec h2 { font-size: clamp(2.1rem, 6.4vw, 3.8rem); max-width: 18ch; }
.sec .intro { margin-top: 18px; max-width: 52ch; color: var(--syn-muted); font-size: 1.2rem; }

/* --- hero ----------------------------------------------------------------- */
.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 8vw, 96px); }
.hero-grid { display: grid; gap: 40px; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 64px; } }
.hero .kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 22px; }
.hero .kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--syn-assistant); }
.hero h1 { font-size: clamp(2.9rem, 12vw, 5.8rem); letter-spacing: -0.035em; line-height: 0.96; max-width: 11ch; }
.hero h1 em { font-style: italic; color: var(--syn-assistant); }
.hero .lede { margin-top: 24px; font-size: clamp(1.25rem, 2.8vw, 1.55rem); line-height: 1.4; max-width: 30ch; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* assistants -> Synergy -> your app */
.converge { margin: 0 auto; width: 100%; max-width: 340px; }
@media (min-width: 980px) { .converge { max-width: 440px; } }
.converge svg { width: 100%; height: auto; overflow: visible; }
.cv-src rect { fill: var(--syn-raised); stroke: #D9DEF7; stroke-width: 1; }
.cv-src text { font-family: var(--syn-serif); font-size: 19px; fill: var(--syn-ink); text-anchor: middle; }
.cv-line { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.cv-in { stroke: url(#g-in); }
.cv-out { stroke: url(#g-out); }
.cv-dot { opacity: 0; }
.cv-halo { fill: none; stroke: var(--syn-assistant); stroke-width: 1; opacity: .25; transform-box: fill-box; transform-origin: center; }
.cv-mark path { transform-box: fill-box; }
.cv-name { font-family: var(--syn-serif); font-size: 20px; font-weight: 500; fill: var(--syn-ink); text-anchor: middle; letter-spacing: -0.3px; }
.cv-app rect { fill: #FFFCFB; stroke: #F1D8D1; }
.cv-app .t1 { font-family: var(--syn-serif); font-size: 22px; font-weight: 500; fill: var(--syn-ink); text-anchor: middle; }
.cv-app .t2 { font-family: var(--syn-mono); font-size: 11px; fill: var(--syn-app); text-anchor: middle; letter-spacing: .6px; }

@supports (offset-path: path("M0 0")) {
  html.motion .cv-dot { opacity: 1; offset-rotate: 0deg; animation: cv-travel 4.8s var(--syn-ease-in-out) infinite; }
  html.motion .cv-d1 { offset-path: path("M56 52 C56 120 180 110 180 170"); }
  html.motion .cv-d2 { offset-path: path("M180 52 L180 170"); animation-delay: .5s; }
  html.motion .cv-d3 { offset-path: path("M304 52 C304 120 180 110 180 170"); animation-delay: 1s; }
  html.motion .cv-d4 { offset-path: path("M180 280 L180 332"); animation-name: cv-deliver; }
}
@keyframes cv-travel {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  38% { offset-distance: 100%; opacity: 1; }
  44%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes cv-deliver {
  0%, 52% { offset-distance: 0%; opacity: 0; }
  56% { opacity: 1; }
  74% { offset-distance: 100%; opacity: 1; }
  80%, 100% { offset-distance: 100%; opacity: 0; }
}
html.motion .cv-halo { animation: cv-halo 4.8s var(--syn-ease) infinite; }
@keyframes cv-halo {
  0%, 38% { transform: scale(.7); opacity: 0; }
  46% { transform: scale(1); opacity: .5; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}
html.motion .cv-mark .br-l { animation: br-close-l 4.8s var(--syn-ease) infinite; }
html.motion .cv-mark .br-r { animation: br-close-r 4.8s var(--syn-ease) infinite; }
@keyframes br-close-l { 0%, 34% { transform: none; } 44% { transform: translateX(5px); } 58%, 100% { transform: none; } }
@keyframes br-close-r { 0%, 34% { transform: none; } 44% { transform: translateX(-5px); } 58%, 100% { transform: none; } }

/* --- demo: Siri / Gemini / ChatGPT --------------------------------------- */
.demo-sec { background: linear-gradient(180deg, var(--syn-surface) 0%, var(--syn-surface-2) 100%); }
.demo { margin-top: 36px; }
.demo-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--syn-ink); background: var(--syn-raised); max-width: 620px; position: relative; }
.demo-tabs button {
  font-family: var(--syn-serif); font-size: 1.3rem; line-height: 1.1; color: var(--syn-ink);
  background: transparent; border: 0; padding: 12px 8px; min-height: 64px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: background-color .35s var(--syn-ease), color .35s var(--syn-ease);
}
.demo-tabs button + button { border-left: 1px solid var(--syn-rule); }
.demo-tabs button span { font-family: var(--syn-mono); font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--syn-muted); transition: color .35s var(--syn-ease); }
.demo-tabs button:hover { background: var(--syn-surface-2); }
.demo-tabs button[aria-selected="true"] { background: var(--syn-ink); color: #fff; }
.demo-tabs button[aria-selected="true"] span { color: #CFC8BB; }
.demo-tabs .tab-name { font-weight: 400; display: inline-flex; align-items: center; gap: 7px; }
/* the OpenAI Blossom exactly as supplied: black on light, OpenAI's own white file on dark */
.demo-tabs .oai { width: 18px; height: 18px; }
.demo-tabs .oai.on-dark, .demo-tabs [aria-selected="true"] .oai.on-light { display: none; }
.demo-tabs [aria-selected="true"] .oai.on-dark { display: block; }
.demo-tabs button:focus-visible { outline-offset: -4px; outline-color: #fff; box-shadow: inset 0 0 0 2px var(--syn-assistant); }

.stage { margin-top: 28px; padding: 22px 16px 20px; background: var(--syn-raised); border: 1px solid var(--syn-rule); }
@media (min-width: 640px) { .stage { padding: 32px; } }
.stage + .stage { margin-top: 20px; }
.demo.is-tabs .stage + .stage { margin-top: 28px; }
.stage[hidden] { display: none; }
.stage-h { font-family: var(--syn-mono); font-size: 0.72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--syn-muted); font-weight: 400; margin-bottom: 18px; }
.demo.is-tabs .stage-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.flowline { display: grid; justify-items: center; align-items: center; }
@media (min-width: 1000px) {
  .flowline { grid-template-columns: minmax(250px, 1.15fr) minmax(40px, .35fr) auto minmax(40px, .35fr) minmax(230px, 1fr); justify-items: stretch; }
}

/* devices: neutral frames, not any maker's product */
.device { width: 100%; max-width: 220px; justify-self: center; }
@media (min-width: 1000px) { .device { max-width: 250px; } .phone { aspect-ratio: 9 / 17; } }
.phone {
  aspect-ratio: 9 / 15; border-radius: 34px; padding: 9px; background: #1E1D1B;
  box-shadow: 0 30px 50px -34px rgba(23, 22, 20, .55), inset 0 0 0 1px #34322E;
}
.phone .screen {
  position: relative; height: 100%; border-radius: 26px; overflow: hidden;
  background:
    radial-gradient(120% 60% at 20% 0%, #E9ECFB 0%, rgba(233,236,251,0) 60%),
    radial-gradient(90% 50% at 100% 100%, #FBEDE8 0%, rgba(251,237,232,0) 70%),
    #F7F4EE;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 14px;
}
.phone .screen::before { content: ""; position: absolute; top: 10px; left: 50%; width: 54px; height: 6px; margin-left: -27px; border-radius: 3px; background: #1E1D1B; opacity: .85; }
.phone.android .screen::before { width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; }
.scr-app .droid { display: inline-block; width: 26px; height: 15px; margin: 0 8px 0 0; vertical-align: -2px; }
.scr-app { position: absolute; top: 34px; left: 16px; font-family: var(--syn-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--syn-muted); }
.sheet { background: rgba(255,255,255,.92); border: 1px solid #E3E6F6; border-radius: 20px; padding: 16px 16px 14px; box-shadow: 0 10px 30px -18px rgba(45, 74, 217, .45); }
.req { font-size: 1.12rem; line-height: 1.3; color: var(--syn-ink); }
.req .w { display: inline-block; }
.listen { display: flex; gap: 5px; margin-top: 12px; height: 8px; }
.listen i { width: 6px; height: 6px; border-radius: 50%; background: var(--syn-assistant); opacity: .35; }

.browser { max-width: 330px; aspect-ratio: 4 / 3.1; border: 1px solid #D8D2C6; border-radius: 10px; background: #fff; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 50px -36px rgba(23, 22, 20, .5); }
.browser .bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--syn-rule-soft); background: var(--syn-surface-2); }
.browser .bar i { width: 8px; height: 8px; border-radius: 50%; background: #D5CEC1; }
.browser .bar .site { display: inline-flex; align-items: center; gap: 7px; }
.browser .bar .site img { width: 14px; height: 14px; }
.browser .bar span { margin-left: 8px; font-family: var(--syn-mono); font-size: .72rem; color: var(--syn-muted); padding: 3px 10px; background: #fff; border: 1px solid var(--syn-rule); border-radius: 6px; }
.browser .screen { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; background: radial-gradient(90% 60% at 50% 0%, #EEF0FB 0%, rgba(238,240,251,0) 70%), #FDFCFA; }
.prompt { border: 1px solid #DCE0F5; border-radius: 16px; padding: 14px 14px 12px; background: #fff; box-shadow: 0 10px 26px -18px rgba(45, 74, 217, .45); }
.prompt .req { font-size: 1.05rem; }

/* the wires: blue in, coral out to the app */
.wire { position: relative; width: 2px; height: 44px; margin: 10px 0; background: var(--syn-rule); }
.wire span { position: absolute; inset: 0; transform-origin: top; }
.w-in span { background: var(--syn-assistant); }
.w-out span { background: linear-gradient(180deg, var(--syn-assistant), var(--syn-app)); }
.wire span::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: currentColor; opacity: 0; }
.w-in span::after { color: var(--syn-assistant); }
.w-out span::after { color: var(--syn-app); }
@media (min-width: 1000px) {
  .wire { width: auto; height: 2px; margin: 0 14px; }
  .wire span { transform-origin: left; }
  .wire span::after { left: auto; right: -4px; top: 50%; bottom: auto; margin: -4.5px 0 0; }
}

.syn-node { text-align: center; padding: 6px 4px; min-width: 150px; }
.brackets { width: 56px; height: 56px; margin: 0 auto; overflow: visible; }
.brackets path { fill: none; stroke-width: 7.5; transform-box: fill-box; }
.brackets .br-l { stroke: var(--syn-assistant); }
.brackets .br-r { stroke: var(--syn-app); }
.syn-node .nm { margin-top: 6px; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; position: relative; }
.syn-node .does { margin-top: 4px; font-family: var(--syn-mono); font-size: .72rem; line-height: 1.55; color: var(--syn-assistant); }
.syn-node .brackets { filter: drop-shadow(0 0 0 rgba(142, 63, 191, 0)); }

.app-card { width: 100%; max-width: 300px; justify-self: center; background: #FFFCFB; border: 1px solid #F1D8D1; padding: 16px 18px 18px; position: relative; }
.app-name { display: flex; align-items: center; gap: 8px; font-family: var(--syn-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--syn-app); }
.app-name::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--syn-app); }
.app-name.app-lc { color: var(--syn-ink); letter-spacing: 0; text-transform: none; font-size: .78rem; }
.app-name.app-lc::before { display: none; }
.app-name.app-lc img { width: 18px; height: 18px; border-radius: 4px; }
.app-name .tillr { font-family: Nunito, system-ui, sans-serif; font-weight: 900; font-size: 1.05rem; letter-spacing: -0.03em; }
.app-name .tillr i { font-style: normal; color: #c96b10; }
.app-name small { font-family: var(--syn-mono); font-size: .66rem; color: var(--syn-muted); }
.app-wait { display: none; margin-top: 12px; font-family: var(--syn-mono); font-size: .78rem; color: var(--syn-muted); }
.app-rows { margin: 12px 0 0; display: grid; gap: 0; }
.app-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--syn-rule-soft); }
.app-rows dt { font-family: var(--syn-mono); font-size: .74rem; color: var(--syn-muted); }
.app-rows dd { margin: 0; font-size: 1.05rem; text-align: right; }
.app-ok { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: #EEF6F1; color: #1F6B45; border: 1px solid #1F6B45; font-family: var(--syn-mono); font-size: .8rem; }

.back { margin-top: 18px; text-align: center; font-family: var(--syn-mono); font-size: .78rem; color: var(--syn-muted); }
.back span { color: var(--syn-assistant); margin-right: 4px; }
@media (min-width: 1000px) { .back { text-align: right; } }
.state { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--syn-rule-soft); font-size: .98rem; color: var(--syn-muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }

.demo-foot { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
.demo-foot .status-link { flex-basis: 100%; }
.demo-foot .status-link a { font-family: var(--syn-mono); font-size: .82rem; color: var(--syn-assistant); display: inline-block; padding: 12px 0; }
.demo-foot p { font-family: var(--syn-mono); font-size: .8rem; color: var(--syn-muted); }
/* 24/09: what exists today, said next to the demo that leads with Siri. */
.demo-foot .demo-status { flex-basis: 100%; color: var(--syn-ink); }
.cta-mail { margin-top: 12px; font-family: var(--syn-mono); font-size: .82rem; color: var(--syn-muted); }
.cta-mail a { color: var(--syn-assistant); }
.replay { font-family: var(--syn-mono); font-size: .78rem; min-height: 44px; padding: 8px 14px; background: transparent; border: 1px solid var(--syn-rule); color: var(--syn-ink); cursor: pointer; transition: border-color .2s var(--syn-ease); }
.replay:hover { border-color: var(--syn-ink); }
.replay[hidden] { display: none; }

/* the sequence, only under html.motion; .is-play resets, s1..s5 advance */
html.motion .stage.is-play .req .w { opacity: 0; transform: translateY(6px); }
html.motion .stage.is-play.s1 .req .w { opacity: 1; transform: none; transition: opacity .38s var(--syn-ease), transform .38s var(--syn-ease); transition-delay: calc(var(--i) * 55ms); }
html.motion .stage.is-play.s1:not(.s3) .listen i { animation: listen 1s var(--syn-ease-in-out) infinite; }
html.motion .stage.is-play .listen i:nth-child(2) { animation-delay: .15s; }
html.motion .stage.is-play .listen i:nth-child(3) { animation-delay: .3s; }
@keyframes listen { 0%, 100% { opacity: .25; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }

html.motion .stage.is-play .wire span { transform: scaleY(0); }
@media (min-width: 1000px) { html.motion .stage.is-play .wire span { transform: scaleX(0); } }
html.motion .stage.is-play.s2 .w-in span,
html.motion .stage.is-play.s4 .w-out span { transform: none; transition: transform .7s var(--syn-ease-in-out); }
html.motion .stage.is-play.s2:not(.s3) .w-in span::after,
html.motion .stage.is-play.s4:not(.s5) .w-out span::after { animation: arrive .7s var(--syn-ease-in-out) both; }
@keyframes arrive { 0%, 70% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: scale(1); } }

html.motion .stage.is-play .syn-node .nm,
html.motion .stage.is-play .syn-node .does { opacity: .35; }
html.motion .stage.is-play.s3 .syn-node .nm,
html.motion .stage.is-play.s3 .syn-node .does { opacity: 1; transition: opacity .5s var(--syn-ease); }
html.motion .stage.is-play.s3:not(.s4) .brackets .br-l { transform: translateX(6px); transition: transform .45s var(--syn-ease); }
html.motion .stage.is-play.s3:not(.s4) .brackets .br-r { transform: translateX(-6px); transition: transform .45s var(--syn-ease); }
html.motion .stage.is-play.s4 .brackets path { transform: none; transition: transform .6s var(--syn-ease); }
html.motion .stage.is-play.s3 .brackets { animation: meet 1.1s var(--syn-ease) both; }
@keyframes meet {
  0% { filter: drop-shadow(0 0 0 rgba(142, 63, 191, 0)); }
  40% { filter: drop-shadow(0 0 14px rgba(142, 63, 191, .55)); }
  100% { filter: drop-shadow(0 0 0 rgba(142, 63, 191, 0)); }
}

html.motion .stage.is-play .app-rows div,
html.motion .stage.is-play .app-ok,
html.motion .stage.is-play .back { opacity: 0; transform: translateY(6px); }
html.motion .stage.is-play.s4:not(.s5) .app-wait { display: block; animation: wait 1s var(--syn-ease-in-out) infinite; }
@keyframes wait { 50% { opacity: .4; } }
html.motion .stage.is-play.s5 .app-rows div { opacity: 1; transform: none; transition: opacity .45s var(--syn-ease), transform .45s var(--syn-ease); }
html.motion .stage.is-play.s5 .app-rows div:nth-child(2) { transition-delay: 90ms; }
html.motion .stage.is-play.s5 .app-rows div:nth-child(3) { transition-delay: 180ms; }
html.motion .stage.is-play.s5 .app-ok { opacity: 1; transform: none; transition: opacity .45s var(--syn-ease) .36s, transform .45s var(--syn-ease) .36s; animation: confirm 1.2s var(--syn-ease) .5s both; }
html.motion .stage.is-play.s5 .w-in span::before {
  content: ""; position: absolute; left: 50%; top: 100%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: #1F6B45; box-shadow: 0 0 0 4px rgba(31, 107, 69, .15); animation: return-v .9s var(--syn-ease-in-out) .7s both;
}
@keyframes return-v { 0% { top: 100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 0; opacity: 0; } }
@media (min-width: 1000px) {
  html.motion .stage.is-play.s5 .w-in span::before { top: 50%; left: 100%; animation-name: return-h; }
  @keyframes return-h { 0% { left: 100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
}
html.motion .stage.is-play.s5 .back { opacity: 1; transform: none; transition: opacity .5s var(--syn-ease) .9s, transform .5s var(--syn-ease) .9s; }
@keyframes confirm { 0% { box-shadow: 0 0 0 0 rgba(31, 107, 69, .35); } 100% { box-shadow: 0 0 0 12px rgba(31, 107, 69, 0); } }
html.motion .stage.is-play.s4 .app-card { border-color: #E3B3A6; transition: border-color .5s var(--syn-ease); }

/* panel change */
html.motion .demo.is-tabs .stage.is-enter { animation: stage-in .5s var(--syn-ease) both; }
@keyframes stage-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- examples ------------------------------------------------------------- */
.verbs { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--syn-rule); border: 1px solid var(--syn-rule); }
@media (min-width: 860px) { .verbs { grid-template-columns: repeat(4, 1fr); } }
.verbs li { position: relative; background: var(--syn-raised); padding: 20px 16px 22px; display: flex; flex-direction: column; gap: 10px; min-height: 168px; transition: background-color .3s var(--syn-ease); }
@media (min-width: 640px) { .verbs li { padding: 24px 22px 26px; } }
.verbs svg { width: 26px; height: 26px; fill: none; stroke: var(--syn-assistant); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.verbs b { font-family: var(--syn-mono); font-weight: 500; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--syn-ink); }
.verbs q { font-size: 1.28rem; line-height: 1.25; letter-spacing: -0.01em; quotes: "\201C" "\201D"; }
/* bracket corners close in on hover: the mark, as a response */
.verbs li::before, .verbs li::after { content: ""; position: absolute; top: 12px; bottom: 12px; width: 8px; border: 2px solid; opacity: 0; transition: opacity .3s var(--syn-ease), transform .3s var(--syn-ease); pointer-events: none; }
.verbs li::before { left: 8px; border-right: 0; border-color: var(--syn-assistant); transform: translateX(-6px); }
.verbs li::after { right: 8px; border-left: 0; border-color: var(--syn-app); transform: translateX(6px); }
@media (hover: hover) {
  .verbs li:hover { background: #FDFCFA; }
  .verbs li:hover::before, .verbs li:hover::after { opacity: 1; transform: none; }
}

/* --- how it works --------------------------------------------------------- */
.how { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .how { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.how li { background: var(--syn-raised); border: 1px solid var(--syn-rule); padding: 24px 22px 28px; }
.how .glyph { display: flex; align-items: center; height: 44px; margin-bottom: 18px; }
.how .h-app .glyph i { width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--syn-app); background: #FBF1EE; }
.how .h-syn .glyph svg { width: 40px; height: 40px; }
.how .h-syn .glyph path { fill: none; stroke-width: 7.5; }
.how .h-syn .glyph .br-l { stroke: var(--syn-assistant); }
.how .h-syn .glyph .br-r { stroke: var(--syn-app); }
.how .h-ask .glyph i { position: relative; width: 46px; height: 2px; background: linear-gradient(90deg, var(--syn-assistant), var(--syn-app)); }
.how .h-ask .glyph i::after { content: ""; position: absolute; right: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--syn-app); }
.how .n { font-family: var(--syn-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--syn-assistant); }
.how h3 { margin-top: 8px; font-size: 1.65rem; }
.how li > p:last-child { margin-top: 10px; color: var(--syn-muted); }

/* --- status chips --------------------------------------------------------- */
/* 0.66rem is 10.56px, and these three words -- verified, prepared, experimental --
   are what the Synergy Ready seal MEANS. The brand contract says each surface
   carries its own status; that is not something to set below 12px. */
.status { font-family: var(--syn-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 7px; border: 1px solid; white-space: nowrap; }
.status.available { color: #1F6B45; border-color: #1F6B45; background: #EEF6F1; }
.status.prepare { color: var(--syn-assistant); border-color: var(--syn-assistant); background: #F2F4FD; }
.status.priority { color: var(--syn-ink); border-color: var(--syn-ink); background: var(--syn-raised); }
.status.experimental { color: var(--syn-muted); border-color: var(--syn-muted); background: var(--syn-surface); }

/* --- offers --------------------------------------------------------------- */
.offers { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 960px) { .offers { grid-template-columns: 1.15fr 1fr 1fr; align-items: stretch; } }
.offer { background: var(--syn-raised); border: 1px solid var(--syn-rule); padding: 24px; display: flex; flex-direction: column; transition: border-color .3s var(--syn-ease), transform .3s var(--syn-ease); }
@media (hover: hover) { .offer:hover { border-color: #CFC8BB; } }
.offer.featured { border: 1px solid var(--syn-assistant); box-shadow: 0 18px 40px -28px rgba(45, 74, 217, 0.45); }
.offer .kind { font-family: var(--syn-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--syn-muted); }
.offer h3 { margin-top: 10px; font-size: 1.75rem; }
.offer .price { margin-top: 14px; font-size: 2.6rem; letter-spacing: -0.03em; line-height: 1; }
.offer .price small { font-family: var(--syn-mono); font-size: 0.78rem; letter-spacing: 0; color: var(--syn-muted); margin-left: 6px; }
.offer .price.soft { font-size: 1.5rem; line-height: 1.2; }
.offer ul { list-style: none; margin: 18px 0 24px; padding: 0; flex: 1; }
.offer li { padding: 9px 0 9px 20px; border-top: 1px solid var(--syn-rule-soft); position: relative; color: var(--syn-muted); font-size: 1rem; }
.offer li::before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 1px; background: var(--syn-app); }
.offer .btn { width: 100%; }

/* --- final CTA ------------------------------------------------------------ */
.final { background: var(--syn-ink); color: var(--syn-surface); border-top: 0; text-align: center; }
.final-in { display: flex; flex-direction: column; align-items: center; }
.final-mark { width: 64px; height: 64px; overflow: visible; }
.final-mark path { fill: none; stroke-width: 7.5; transform-box: fill-box; }
.final-mark .br-l { stroke: #6F84F0; }
.final-mark .br-r { stroke: #E0735D; }
html.motion .final-mark .br-l { animation: br-close-l 4.8s var(--syn-ease) infinite; }
html.motion .final-mark .br-r { animation: br-close-r 4.8s var(--syn-ease) infinite; }
.final h2 { margin-top: 22px; color: #fff; max-width: 16ch; }
.final p.lead { margin-top: 16px; color: #D8D2C6; font-size: 1.3rem; }
.final p.lead b { color: #fff; font-weight: 500; }
.final .cta { margin-top: 28px; }
.final .btn { min-height: 52px; padding: 14px 24px; font-size: .9rem; }
.final .direct { margin-top: 20px; font-family: var(--syn-mono); font-size: 0.8rem; color: #BDB6A8; max-width: 56ch; line-height: 1.7; }
.final .direct a { color: #fff; }

/* --- details + FAQ -------------------------------------------------------- */
.details-grid { display: grid; gap: 56px; }
@media (min-width: 960px) { .details-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.sec h2.h-small { font-size: clamp(1.7rem, 4vw, 2.3rem); }
.faq { margin-top: 26px; border-top: 1px solid var(--syn-ink); }
.faq details { border-bottom: 1px solid var(--syn-rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative;
  font-size: 1.2rem; line-height: 1.3; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-family: var(--syn-mono); color: var(--syn-assistant); font-size: 1.2rem; transition: transform .3s var(--syn-ease); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 18px; max-width: 64ch; color: var(--syn-muted); font-size: 1.05rem; }
.faq details p b { color: var(--syn-ink); font-weight: 500; }
html.motion .faq details[open] > :not(summary) { animation: stage-in .4s var(--syn-ease) both; }
.plat { list-style: none; margin: 0; padding: 0 0 18px; display: grid; gap: 12px; }
.plat li { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: baseline; font-size: 1rem; color: var(--syn-muted); }
.plat .status { justify-self: start; }
.plat b { color: var(--syn-ink); font-weight: 500; }
@media (max-width: 420px) { .plat li { grid-template-columns: 1fr; gap: 4px; } }

/* --- footer --------------------------------------------------------------- */
.syn-foot { padding: 48px 0 56px; border-top: 1px solid var(--syn-rule); }
.syn-foot .grid { display: grid; gap: 32px; }
@media (min-width: 800px) { .syn-foot .grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.syn-foot .brand { display: flex; align-items: center; gap: 10px; }
.syn-foot .brand img { width: 28px; height: 28px; }
.syn-foot .brand b { font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; }
.syn-foot .by { margin-top: 8px; color: var(--syn-muted); }
.syn-foot h2 { font-family: var(--syn-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--syn-muted); font-weight: 400; margin-bottom: 12px; }
.syn-foot nav a { display: block; padding: 6px 0; color: var(--syn-ink); text-decoration: none; font-size: 1rem; }
.syn-foot nav a:hover { color: var(--syn-assistant); }
.syn-foot .fine { margin-top: 36px; font-family: var(--syn-mono); font-size: 0.7rem; color: var(--syn-muted); line-height: 1.65; max-width: 110ch; }

/* small phones: the three assistant tabs have to fit side by side */
@media (max-width: 459px) { .demo-tabs button { font-size: 1.08rem; padding: 10px 4px; } .demo-tabs button span { font-size: .58rem; letter-spacing: .06em; } .demo-tabs .tab-name { gap: 5px; } .demo-tabs .oai { width: 15px; height: 15px; } }