/* ==========================================================================
   STAGE: the sample business page. Fully scoped to .stage and driven by --s-*.
   JS sets the colour tokens (after contrast checks) as inline custom properties:
     --s-bg --s-surface --s-ink --s-muted --s-accent --s-on-accent --s-accent2 --s-border-c
   The style (data-style) sets shape tokens only. Nothing here uses shell tokens.
   Fonts: --s-display / --s-body are set by the type selector.
   ========================================================================== */
.stage{
  /* defaults = neo-brutalism + LUKBRANDED palette, so it renders sensibly without JS */
  --s-bg:#F7F5F0;--s-surface:#FFFFFF;--s-ink:#111111;--s-muted:#4A5A72;--s-accent:#C9A227;--s-on-accent:#111111;--s-accent2:#0B1F3A;--s-border-c:#111111;
  --s-display:"Red Hat Display","Segoe UI",system-ui,sans-serif;--s-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --s-display-w:900;--s-display-ls:-.02em;--s-display-tt:none;
  --s-r:6px;--s-r-lg:12px;--s-bw:3px;--s-shadow:5px 5px 0 var(--s-border-c);--s-shadow-sm:3px 3px 0 var(--s-border-c);
  --s-blur:0px;--s-surface-a:1;--s-pad:1.1rem;--s-gap:.9rem;--s-btn-r:6px;--s-icon-r:6px;
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--s-bg);color:var(--s-ink);font-family:var(--s-body);font-size:1rem;line-height:1.55;
  transition:background-color 200ms ease,color 200ms ease;
}
.stage *{box-sizing:border-box}
.stage h3,.stage h4,.stage p,.stage ul,.stage figure,.stage blockquote{margin:0;padding:0}
.stage ul{list-style:none}
.stage__page{position:relative;z-index:1;display:grid;gap:calc(var(--s-gap)*1.4);padding:var(--s-pad)}
.stage__backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stage__backdrop .sh{position:absolute;display:none}

/* ---------------- shared element rules, all read tokens ---------------- */
.stage .s-nav{display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem;background:var(--s-surface);border:var(--s-bw) solid var(--s-border-c);border-radius:var(--s-r);box-shadow:var(--s-shadow-sm)}
.stage .s-brand{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--s-display);font-weight:var(--s-display-w);letter-spacing:var(--s-display-ls);font-size:1.05rem;color:var(--s-ink)}
.stage .s-brand__dot{width:.95rem;height:.95rem;border-radius:50%;background:var(--s-accent);border:2px solid var(--s-border-c)}
.stage .s-links{display:none;gap:1rem;margin-left:auto;font-size:.9rem;color:var(--s-muted)}
.stage .s-nav .s-btn{margin-left:auto}
.stage .s-links+.s-btn{margin-left:0}

.stage .s-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem 1.1rem;font-family:var(--s-display);font-weight:700;font-size:.95rem;line-height:1.1;color:var(--s-ink);background:var(--s-surface);border:var(--s-bw) solid var(--s-border-c);border-radius:var(--s-btn-r);box-shadow:var(--s-shadow-sm);text-align:center;cursor:default}
.stage .s-btn--primary{background:var(--s-accent);color:var(--s-on-accent)}
.stage .s-btn--sm{min-height:36px;padding:.3rem .8rem;font-size:.85rem}
button.s-btn{cursor:pointer}
.stage button.s-btn:active{transform:translate(2px,2px)}

.stage .s-hero{display:grid;gap:var(--s-gap);align-items:center;padding:calc(var(--s-pad)*1.2);background:var(--s-surface);border:var(--s-bw) solid var(--s-border-c);border-radius:var(--s-r-lg);box-shadow:var(--s-shadow)}
.stage .s-kicker{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--s-muted);margin-bottom:.4rem}
.stage .s-title{font-family:var(--s-display);font-weight:var(--s-display-w);letter-spacing:var(--s-display-ls);text-transform:var(--s-display-tt);font-size:clamp(1.7rem,1.2rem + 2.6vw,2.7rem);line-height:1.04;color:var(--s-ink);margin-bottom:.7rem;text-wrap:balance}
.stage .s-lede{color:var(--s-muted);max-width:34rem;margin-bottom:1rem}
.stage .s-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.stage .s-art{display:grid;place-items:center}
.stage .s-art svg{width:min(100%,180px);height:auto}
.stage .s-art__plate{fill:var(--s-accent2);opacity:.25}
.stage .s-art__cup{fill:var(--s-accent);stroke:var(--s-border-c);stroke-width:var(--s-bw);stroke-linejoin:round}
.stage .s-art__handle{stroke:var(--s-border-c);stroke-width:var(--s-bw)}
.stage .s-art__steam{stroke:var(--s-muted);stroke-width:4;stroke-linecap:round}

.stage .s-cards{display:grid;gap:var(--s-gap)}
.stage .s-card{padding:var(--s-pad);background:var(--s-surface);border:var(--s-bw) solid var(--s-border-c);border-radius:var(--s-r-lg);box-shadow:var(--s-shadow-sm)}
.stage .s-card h4{font-family:var(--s-display);font-weight:var(--s-display-w);letter-spacing:var(--s-display-ls);font-size:1.05rem;line-height:1.2;color:var(--s-ink);margin:.7rem 0 .3rem}
.stage .s-card p{font-size:.93rem;color:var(--s-muted)}
.stage .s-icon{display:block;width:2.4rem;height:2.4rem;border:var(--s-bw) solid var(--s-border-c);border-radius:var(--s-icon-r);background:var(--s-accent)}
.stage .s-icon--2{background:var(--s-accent2);border-radius:50%}
.stage .s-icon--3{background:var(--s-surface);clip-path:none;transform:rotate(45deg) scale(.82)}

.stage .s-quote{padding:var(--s-pad);background:var(--s-accent);color:var(--s-quote-ink,var(--s-on-accent));border:var(--s-bw) solid var(--s-border-c);border-radius:var(--s-r-lg);box-shadow:var(--s-shadow-sm)}
.stage .s-quote blockquote p{font-family:var(--s-display);font-weight:var(--s-display-w);letter-spacing:var(--s-display-ls);font-size:1.2rem;line-height:1.25}
.stage .s-quote figcaption{margin-top:.5rem;font-size:.82rem}

.stage .s-form{display:grid;gap:.5rem;padding:var(--s-pad);background:var(--s-surface);border:var(--s-bw) solid var(--s-border-c);border-radius:var(--s-r-lg);box-shadow:var(--s-shadow-sm)}
.stage .s-form h4{font-family:var(--s-display);font-weight:var(--s-display-w);letter-spacing:var(--s-display-ls);font-size:1.1rem;color:var(--s-ink)}
.stage .s-form label{font-weight:700;font-size:.9rem;color:var(--s-ink)}
.stage .s-input{width:100%;min-height:44px;padding:.5rem .75rem;font:inherit;color:var(--s-ink);background:var(--s-bg);border:var(--s-bw) solid var(--s-border-c);border-radius:var(--s-r)}
.stage .s-input::placeholder{color:var(--s-muted);opacity:1}
.stage .s-note{font-size:.82rem;color:var(--s-muted)}
.stage .s-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;padding:.7rem .2rem 0;border-top:var(--s-bw) solid var(--s-border-c);font-size:.82rem;color:var(--s-muted)}

@media (min-width:560px){
  .stage .s-links{display:flex}
  .stage .s-hero{grid-template-columns:1.3fr .7fr}
  .stage .s-cards{grid-template-columns:repeat(3,1fr)}
}
.stage--mini .s-nav,.stage--mini .s-quote,.stage--mini .s-form,.stage--mini .s-footer{display:none}
.stage--mini .s-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.stage--mini .s-card{padding:.7rem}
.stage--mini .s-card h4{font-size:.9rem;overflow-wrap:anywhere}
.stage--mini .s-hero{padding:1rem}
.stage--mini .s-card p{display:none}
.stage--mini .s-lede{display:none}
.stage--mini .s-hero{grid-template-columns:1fr}
.stage--mini .s-art{display:none}
.stage--mini .s-title{font-size:clamp(1.5rem,1.1rem + 1.8vw,2.1rem)}
.stage--mini .s-icon{width:1.8rem;height:1.8rem}

/* =========================== 1. NEO-BRUTALISM (default values above) =========================== */
.stage[data-style="neo"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0V32' fill='none' stroke='%23000' stroke-opacity='.06'/%3E%3C/svg%3E")}

/* =========================== 2. GLASSMORPHISM =========================== */
.stage[data-style="glass"]{
  --s-r:16px;--s-r-lg:22px;--s-bw:1px;--s-btn-r:999px;--s-icon-r:14px;
  --s-shadow:0 10px 30px rgba(0,0,0,.18);--s-shadow-sm:0 4px 14px rgba(0,0,0,.14);
  --s-blur:14px;--s-glass-bg:var(--s-glass-fill);
  --s-display-w:700;--s-display-ls:-.01em;
}
.stage[data-style="glass"] .stage__backdrop .sh{display:block;border-radius:50%;filter:none}
.stage[data-style="glass"] .stage__backdrop .sh1{width:60%;aspect-ratio:1;left:-10%;top:-12%;background:var(--s-accent)}
.stage[data-style="glass"] .stage__backdrop .sh2{width:55%;aspect-ratio:1;right:-14%;top:30%;background:var(--s-accent2)}
.stage[data-style="glass"] .stage__backdrop .sh3{width:40%;aspect-ratio:1;left:20%;bottom:-14%;background:var(--s-accent);opacity:.7}
.stage[data-style="glass"] .s-nav,.stage[data-style="glass"] .s-hero,.stage[data-style="glass"] .s-card,.stage[data-style="glass"] .s-form{
  background:var(--s-glass-fill,rgba(255,255,255,.7));border-color:var(--s-glass-edge,rgba(255,255,255,.65));
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .stage[data-style="glass"]:not([data-reduce-transparency]) .s-nav,
  .stage[data-style="glass"]:not([data-reduce-transparency]) .s-hero,
  .stage[data-style="glass"]:not([data-reduce-transparency]) .s-card,
  .stage[data-style="glass"]:not([data-reduce-transparency]) .s-form{-webkit-backdrop-filter:blur(var(--s-blur));backdrop-filter:blur(var(--s-blur))}
}
/* Solid tinted fallback: unsupported browsers or reduce-transparency */
.stage[data-style="glass"][data-reduce-transparency] .s-nav,
.stage[data-style="glass"][data-reduce-transparency] .s-hero,
.stage[data-style="glass"][data-reduce-transparency] .s-card,
.stage[data-style="glass"][data-reduce-transparency] .s-form{background:var(--s-surface);border-color:var(--s-border-c)}
@media (prefers-reduced-transparency:reduce){
  .stage[data-style="glass"] .s-nav,.stage[data-style="glass"] .s-hero,.stage[data-style="glass"] .s-card,.stage[data-style="glass"] .s-form{background:var(--s-surface);border-color:var(--s-border-c);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .stage[data-style="glass"] .s-nav,.stage[data-style="glass"] .s-hero,.stage[data-style="glass"] .s-card,.stage[data-style="glass"] .s-form{background:var(--s-surface)}
}

/* =========================== 3. MINIMAL / SWISS EDITORIAL =========================== */
.stage[data-style="swiss"]{
  --s-r:0px;--s-r-lg:0px;--s-bw:0px;--s-btn-r:0px;--s-icon-r:0px;--s-shadow:none;--s-shadow-sm:none;
  --s-display-w:700;--s-display-ls:-.03em;--s-pad:1.3rem;--s-gap:1.1rem;
}
.stage[data-style="swiss"] .s-nav,.stage[data-style="swiss"] .s-hero,.stage[data-style="swiss"] .s-card,.stage[data-style="swiss"] .s-form,.stage[data-style="swiss"] .s-quote{background:transparent;border:0;border-top:2px solid var(--s-ink);padding-inline:0}
.stage[data-style="swiss"] .s-nav{border-top:0;border-bottom:2px solid var(--s-ink)}
.stage[data-style="swiss"] .s-btn{border:2px solid var(--s-ink);background:transparent;box-shadow:none}
.stage[data-style="swiss"] .s-btn--primary{background:var(--s-accent);border-color:var(--s-accent)}
.stage[data-style="swiss"] .s-quote{background:transparent;color:var(--s-ink);border-top-width:6px;border-top-color:var(--s-accent)}
.stage[data-style="swiss"] .s-quote blockquote p{font-size:1.6rem}
.stage[data-style="swiss"] .s-icon{border:0;width:1.6rem;height:.5rem;margin-bottom:.2rem}
.stage[data-style="swiss"] .s-icon--2,.stage[data-style="swiss"] .s-icon--3{border-radius:0;transform:none}
.stage[data-style="swiss"] .s-title{font-size:clamp(2rem,1.3rem + 3.4vw,3.4rem)}
.stage[data-style="swiss"] .s-input{border:0;border-bottom:2px solid var(--s-ink);background:transparent;padding-inline:0}
.stage[data-style="swiss"] .s-footer{border-top:2px solid var(--s-ink)}
.stage[data-style="swiss"] .s-art__cup{stroke-width:0}
.stage[data-style="swiss"] .s-art__handle{stroke-width:6}
.stage[data-style="swiss"] .s-art__steam{stroke-width:3}
.stage[data-style="swiss"] .s-art__plate{display:none}

/* =========================== 4. DARK + NEON =========================== */
.stage[data-style="neon"]{
  --s-r:10px;--s-r-lg:14px;--s-bw:1.5px;--s-btn-r:8px;--s-icon-r:10px;
  --s-shadow:0 0 0 1px var(--s-accent),0 0 22px color-mix(in srgb,var(--s-accent) 45%,transparent);
  --s-shadow-sm:0 0 14px color-mix(in srgb,var(--s-accent) 35%,transparent);
  --s-display-w:800;--s-display-ls:.01em;
}
.stage[data-style="neon"] .s-nav,.stage[data-style="neon"] .s-hero,.stage[data-style="neon"] .s-card,.stage[data-style="neon"] .s-form{border-color:color-mix(in srgb,var(--s-accent) 70%,var(--s-bg))}
.stage[data-style="neon"] .s-title{text-shadow:0 0 18px color-mix(in srgb,var(--s-accent) 55%,transparent)}
.stage[data-style="neon"] .s-btn{border-color:var(--s-accent)}
.stage[data-style="neon"] .s-btn--primary{box-shadow:0 0 18px color-mix(in srgb,var(--s-accent) 60%,transparent)}
.stage[data-style="neon"] .s-quote{border-color:var(--s-accent);box-shadow:var(--s-shadow-sm)}
.stage[data-style="neon"] .s-brand__dot{box-shadow:0 0 10px var(--s-accent)}

/* =========================== 5. CLAYMORPHISM =========================== */
.stage[data-style="clay"]{
  --s-r:22px;--s-r-lg:30px;--s-bw:0px;--s-btn-r:999px;--s-icon-r:50%;
  --s-shadow:10px 10px 22px rgba(0,0,0,.18),-8px -8px 18px rgba(255,255,255,.55),inset 0 -6px 10px rgba(0,0,0,.08),inset 0 6px 10px rgba(255,255,255,.5);
  --s-shadow-sm:6px 6px 14px rgba(0,0,0,.16),-5px -5px 12px rgba(255,255,255,.5),inset 0 -4px 8px rgba(0,0,0,.07),inset 0 4px 8px rgba(255,255,255,.45);
  --s-display-w:600;--s-display-ls:0;--s-pad:1.3rem;--s-gap:1.1rem;
}
.stage[data-style="clay"] .s-nav,.stage[data-style="clay"] .s-hero,.stage[data-style="clay"] .s-card,.stage[data-style="clay"] .s-form,.stage[data-style="clay"] .s-quote,.stage[data-style="clay"] .s-btn{border:0}
.stage[data-style="clay"] .s-btn{box-shadow:var(--s-shadow-sm)}
.stage[data-style="clay"] .s-icon{border:0;box-shadow:var(--s-shadow-sm)}
.stage[data-style="clay"] .s-input{border:0;border-radius:16px;background:var(--s-bg);box-shadow:inset 4px 4px 9px rgba(0,0,0,.14),inset -4px -4px 9px rgba(255,255,255,.6)}
.stage[data-style="clay"] .s-brand__dot{border:0;box-shadow:var(--s-shadow-sm)}
.stage[data-style="clay"] .s-art__cup,.stage[data-style="clay"] .s-art__handle{stroke-width:0}
.stage[data-style="clay"] .s-art__handle{stroke:var(--s-accent);stroke-width:12}
.stage[data-style="clay"] .s-footer{border-top:0}

/* =========================== 6. BENTO GRID (rearranged tiles) =========================== */
.stage[data-style="bento"]{--s-r:18px;--s-r-lg:24px;--s-bw:2px;--s-btn-r:12px;--s-icon-r:12px;--s-shadow:none;--s-shadow-sm:none;--s-display-w:800;--s-display-ls:-.02em;--s-gap:.7rem}
.stage[data-style="bento"] .stage__page{grid-template-columns:repeat(6,1fr);gap:.7rem;align-items:stretch}
.stage[data-style="bento"] .stage__page>*{grid-column:span 6;min-width:0}
.stage[data-style="bento"] .s-nav{grid-column:span 6;order:1}
.stage[data-style="bento"] .s-hero{grid-column:span 6;order:2;grid-template-columns:1fr;background:var(--s-surface)}
.stage[data-style="bento"] .s-cards{display:contents}
.stage[data-style="bento"] .s-card{order:3;grid-column:span 3}
.stage[data-style="bento"] .s-card:nth-child(1){background:var(--s-accent2);color:var(--s-on-accent2,var(--s-surface))}
.stage[data-style="bento"] .s-card:nth-child(1) h4{color:var(--s-on-accent2,var(--s-surface))}
.stage[data-style="bento"] .s-card:nth-child(1) p{color:var(--s-on-accent2,var(--s-surface))}
.stage[data-style="bento"] .s-card:nth-child(3){grid-column:span 6}
.stage[data-style="bento"] .s-quote{order:4;grid-column:span 6}
.stage[data-style="bento"] .s-form{order:5;grid-column:span 6}
.stage[data-style="bento"] .s-footer{order:6;grid-column:span 6}
@media (min-width:640px){
  .stage[data-style="bento"] .s-hero{grid-column:span 4;grid-row:span 2;order:2}
  .stage[data-style="bento"] .s-art{display:grid}
  .stage[data-style="bento"] .s-nav{order:1}
  .stage[data-style="bento"] .s-card:nth-child(1){grid-column:span 2;order:3}
  .stage[data-style="bento"] .s-card:nth-child(2){grid-column:span 2;order:3}
  .stage[data-style="bento"] .s-card:nth-child(3){grid-column:span 2;order:5}
  .stage[data-style="bento"] .s-quote{grid-column:span 4;order:5}
  .stage[data-style="bento"] .s-form{grid-column:span 6;order:6}
  .stage[data-style="bento"] .s-footer{order:7}
}
.stage[data-style="bento"] .s-btn{box-shadow:none}
.stage[data-style="bento"] .s-quote{box-shadow:none}

/* =========================== 7. RETRO / Y2K =========================== */
.stage[data-style="retro"]{
  --s-r:14px;--s-r-lg:18px;--s-bw:2px;--s-btn-r:999px;--s-icon-r:50%;
  --s-shadow:3px 3px 0 var(--s-border-c);--s-shadow-sm:2px 2px 0 var(--s-border-c);
  --s-display-w:900;--s-display-ls:.01em;--s-display-tt:uppercase;
}
/* Gradients are allowed here, and only here (brief: Retro style in the Style Lab) */
.stage[data-style="retro"]{background-image:linear-gradient(180deg,var(--s-bg) 0%,color-mix(in srgb,var(--s-accent) 28%,var(--s-bg)) 100%)}
.stage[data-style="retro"] .s-btn--primary{background-image:linear-gradient(180deg,color-mix(in srgb,var(--s-accent) 70%,#fff) 0%,var(--s-accent) 55%,color-mix(in srgb,var(--s-accent) 80%,#000) 100%)}
.stage[data-style="retro"] .s-nav{background-image:linear-gradient(90deg,var(--s-accent2),var(--s-accent2-end,var(--s-accent2)));color:var(--s-on-accent2,#fff)}
.stage[data-style="retro"] .s-nav .s-brand,.stage[data-style="retro"] .s-nav .s-links{color:var(--s-on-accent2,#fff)}
.stage[data-style="retro"] .s-title{font-size:clamp(1.5rem,1.1rem + 2.2vw,2.3rem);-webkit-text-stroke:0}
.stage[data-style="retro"] .s-hero{background-image:linear-gradient(135deg,var(--s-surface) 55%,color-mix(in srgb,var(--s-accent) 22%,var(--s-surface)))}
.stage[data-style="retro"] .s-icon{background-image:radial-gradient(circle at 30% 28%,#fff 0,transparent 38%),linear-gradient(var(--s-accent),var(--s-accent))}
.stage[data-style="retro"] .s-kicker{display:inline-block;padding:.15rem .6rem;border:2px solid var(--s-border-c);border-radius:999px;background:var(--s-surface)}

/* =========================== 8. LUXURY =========================== */
.stage[data-style="luxury"]{
  --s-r:0px;--s-r-lg:0px;--s-bw:1px;--s-btn-r:0px;--s-icon-r:0px;--s-shadow:none;--s-shadow-sm:none;
  --s-display-w:700;--s-display-ls:.005em;--s-pad:1.4rem;--s-gap:1.1rem;
}
.stage[data-style="luxury"] .s-title{font-weight:var(--s-display-w);font-size:clamp(1.9rem,1.3rem + 3vw,3.1rem);line-height:1.08}
.stage[data-style="luxury"] .s-nav,.stage[data-style="luxury"] .s-hero,.stage[data-style="luxury"] .s-card,.stage[data-style="luxury"] .s-form{background:var(--s-surface);border-color:color-mix(in srgb,var(--s-accent) 75%,transparent)}
.stage[data-style="luxury"] .s-btn{border-color:var(--s-accent);background:transparent;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;box-shadow:none}
.stage[data-style="luxury"] .s-btn--primary{background:var(--s-accent);color:var(--s-on-accent)}
.stage[data-style="luxury"] .s-kicker{color:var(--s-accent-text,var(--s-accent))}
.stage[data-style="luxury"] .s-card h4{font-size:1.1rem}
.stage[data-style="luxury"] .s-icon{background:transparent;border-color:var(--s-accent);transform:rotate(45deg) scale(.7)}
.stage[data-style="luxury"] .s-icon--2,.stage[data-style="luxury"] .s-icon--3{border-radius:0}
.stage[data-style="luxury"] .s-quote{background:transparent;color:var(--s-ink);border-color:var(--s-accent);border-inline:0}
.stage[data-style="luxury"] .s-quote blockquote p{font-style:italic;font-size:1.35rem;font-weight:var(--s-display-w)}
.stage[data-style="luxury"] .s-art__cup{fill:transparent;stroke:var(--s-accent);stroke-width:2}
.stage[data-style="luxury"] .s-art__handle{stroke:var(--s-accent);stroke-width:2}
.stage[data-style="luxury"] .s-art__steam{stroke:var(--s-accent);stroke-width:2}
.stage[data-style="luxury"] .s-art__plate{fill:var(--s-accent);opacity:.18}
.stage[data-style="luxury"] .s-input{background:transparent;border-color:color-mix(in srgb,var(--s-accent) 70%,transparent)}
.stage[data-style="luxury"] .s-brand__dot{border-radius:0;transform:rotate(45deg);background:var(--s-accent)}

/* Style switch: short colour transition only; nothing animates under reduced motion */
.stage .s-nav,.stage .s-hero,.stage .s-card,.stage .s-form,.stage .s-quote,.stage .s-btn,.stage .s-input{transition:background-color 200ms ease,border-color 200ms ease,color 200ms ease,box-shadow 200ms ease,border-radius 200ms ease}
@media (prefers-reduced-motion:reduce){.stage,.stage *{transition:none!important}}