/* Mobile-first motion layer. Base content remains visible without JS/support. */
.osp-flagship { --ease-arrive: cubic-bezier(.16,1,.3,1); --touch: 44px; }
.claude-icon,.agent-avatar,.message-symbol { font-variant-emoji: text; }
.flag-hero { position: relative; isolation: isolate; background: #07090d; overflow: hidden; }
.flag-hero::before {
  content: ''; position: absolute; z-index: -2; inset: -25px 0 -60px;
  background: url('/workspace-assets/brand/lunar-horizon.webp') center bottom / cover no-repeat;
  opacity: .82; transform-origin: center bottom; pointer-events: none;
}
.flag-hero::after {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,#07090d 0%,#07090de8 23%,#07090d66 65%,#07090d 100%),
    radial-gradient(ellipse at 82% 57%,#f3986440,transparent 46%);
}
.hero-intro h1 em { color: #d5c3b9; }
.hero-intro h1 { text-wrap: balance; }
.hero-note { color: #b6b8bf; }
.flag-nav { position: relative; z-index: 5; }
.flag-nav a, .hero-actions a { -webkit-tap-highlight-color: transparent; }
.button-primary { box-shadow: 0 3px 0 #0003, 0 0 38px #ef775019, inset 0 1px #ffd8c66b; }
.button-primary:hover { box-shadow: 0 8px 32px #ed775033; }
.button:active { transform: scale(.97); }
.workbench { position: relative; border-color: #6b6055; box-shadow: 0 0 0 5px #eeb99508, 0 30px 80px #0007; }
.workbench::before {
  content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; z-index: 2;
  background: linear-gradient(90deg,transparent,#f3c6a3,transparent); pointer-events: none;
}
.workbench-top { min-height: 65px; flex-wrap: wrap; }
.workbench-model { margin-left: auto; font-size: 14px; min-height: 44px; max-width: 185px; padding: 8px 28px 8px 12px; border: 1px solid #52555d; border-radius: 8px; color: #f2efe7; background: #242830; }
.workbench > .sample-selector { display: flex; gap: 18px; align-items: center; padding: 12px 20px; margin: 0; border-bottom: 1px solid #353a44; background: #13171e; }
.workbench > .sample-selector label { font-size: 13px; margin: 0; white-space: nowrap; }
.workbench > .sample-selector select { width: auto; flex: 1; font-size: 16px; min-height: 44px; max-width: 380px; border-radius: 8px; }
.workspace-tabs { position: relative; }
.workspace-tabs button { min-height: 48px; font-size: 14px; }
.workspace-tabs button[aria-selected=true] { background: linear-gradient(0deg,#ef987715,transparent); }
.provider-card { position: relative; overflow: hidden; border-radius: 15px; }
.provider-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 10% 0%, #eba98515, transparent 65%); opacity: 0;
  transition: opacity .4s ease;
}
.provider-card[aria-pressed=true]::after { opacity: 1; }
.provider-card[aria-pressed=true] { box-shadow: 0 0 0 1px #e9b59733, 0 14px 35px #0004; }
.provider-icon { transition: transform .45s var(--ease-arrive), color .3s; }
.provider-card[aria-pressed=true] .provider-icon { transform: translateY(-3px) scale(1.07); }
.provider-card:active { transform: scale(.98); }
.provider-card:focus-visible { outline-offset: 3px; }
.provider-detail { border-left: 2px solid #de9b7b; padding: 10px 15px; background: #f4c29806; }
.steps-grid article { position: relative; }
.step-number { color: #edb799; border-bottom-color: #bb8a654a; }
.hosting-options article { background: linear-gradient(150deg,#202125,#11151b 65%); border-radius: 14px; }
.faq-list details { transition: background .25s ease; }
.faq-list details[open] { background: #ffffff03; }
.faq-list summary { min-height: 44px; align-items: center; }
.faq-list summary::after { flex: 0 0 24px; text-align: center; }
.flag-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
/* Small, finite entrance and interaction animations; no scroll interception. */
@keyframes osp-arrive { from { opacity: .25; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes osp-settle { from { transform: scale(1.07) translateY(10px); opacity: .3; } to { transform: scale(1) translateY(0); opacity: .82; } }
@keyframes osp-emphasis { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@keyframes osp-lunar-scroll { from { transform: translateY(0) scale(1); } to { transform: translateY(65px) scale(1.035); } }
@keyframes osp-heading-scroll { from { opacity: .55; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion=paused]) .hero-intro > * { animation: osp-arrive 1s var(--ease-arrive) both; }
  html:not([data-motion=paused]) .hero-intro h1 { animation-delay: .08s; }
  html:not([data-motion=paused]) .hero-intro .flag-lede { animation-delay: .18s; }
  html:not([data-motion=paused]) .hero-intro .hero-actions { animation-delay: .28s; }
  html:not([data-motion=paused]) .hero-intro .hero-note { animation-delay: .38s; }
  html:not([data-motion=paused]) .flag-hero::before { animation: osp-settle 2s var(--ease-arrive) both; }
  html:not([data-motion=paused]) .hero-intro h1 em {
    background: linear-gradient(100deg,#baa79e 0%,#f6eee0 35%,#e3ad8a 50%,#baa79e 70%);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: osp-emphasis 3.4s ease-out 1 both;
  }
  html:not([data-motion=paused]) .will-reveal.is-arrived { animation: osp-arrive .8s var(--ease-arrive) both; }
  html:not([data-motion=paused]) .provider-card { transition: transform .3s var(--ease-arrive), border-color .3s, background .3s, box-shadow .3s; }
  @supports (animation-timeline: view()) {
    html:not([data-motion=paused]) .flag-hero { view-timeline-name: --lunar; view-timeline-axis: block; }
    html:not([data-motion=paused]) .flag-hero::before { animation: osp-lunar-scroll linear both; animation-timeline: --lunar; animation-range: exit 0% exit 100%; }
  }
}
@media (max-width: 720px) {
  .osp-flagship { -webkit-text-size-adjust: 100%; }
  .wrap { width: calc(100% - 40px); padding-left: env(safe-area-inset-left,0); padding-right: env(safe-area-inset-right,0); }
  .announcement { min-height: 44px; font-size: 11px; padding: 5px 14px; }
  .announcement a { min-height: 34px; display: inline-flex; align-items: center; }
  .flag-nav { min-height: 115px; padding-block: 15px 7px; gap: 8px; }
  .flag-nav nav { padding-top: 7px; }
  .flag-nav nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
  .flag-nav .button { min-height: 44px; font-size: 12px; padding: 9px 12px; border-radius: 10px; }
  .flag-brand { font-size: 18px; }
  .flag-hero { min-height: 635px; min-height: max(620px,calc(100svh - 160px)); padding-top: 30px; display: flex; flex-direction: column; }
  .flag-hero::before { inset: 0 -36% -65px; background-size: auto 100%; opacity: .8; }
  .flag-hero::after { background: linear-gradient(180deg,#07090d 0%,#07090dd9 33%,#07090d3b 70%,#07090d 100%),radial-gradient(ellipse at 70% 73%,#ee9e604a,transparent 65%); }
  .hero-intro .micro-label { font-size: 11px; letter-spacing: .09em; margin-bottom: 22px; }
  .osp-flagship h1 { font-size: clamp(43px,11.6vw,72px); letter-spacing: -.067em; line-height: 1.04; }
  .hero-intro h1 em { display: inline-block; max-width: 100%; font-size: .94em; line-height: 1.07; }
  .flag-lede { font-size: 17px; line-height: 1.7; color: #c1c3ca; max-width: 430px; margin-top: 25px; margin-bottom: 23px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 400px; }
  .hero-actions .button { font-size: 15px; min-height: 54px; padding: 14px 18px; border-radius: 12px; }
  .hero-actions .quiet-link { display: flex; justify-content: center; align-items: center; font-size: 14px; min-height: 44px; }
  .hero-note { font-size: 12px; text-align: center; margin-top: 7px; max-width: 400px; }
  .horizon-caption { margin-top: auto; padding-top: 55px; padding-bottom: 22px; font-size: 9px; letter-spacing: .05em; }
  .workspace-section { padding-top: 45px; }
  .osp-flagship h2 { font-size: clamp(36px,10.4vw,50px); line-height: 1.08; }
  .micro-label { font-size: 11px; margin-bottom: 16px; }
  .section-top>p { font-size: 16px; line-height: 1.8; color: #b9bdc7; }
  .demo-notice { font-size: 12px; padding: 15px 0; line-height: 1.75; }
  .demo-label { font-size: 11px; }
  .workbench { border-radius: 18px; margin-inline: -6px; }
  .workbench-top { padding: 13px 14px; gap: 9px; }
  .workbench-top strong { font-size: 14px; }
  .sample-badge { font-size: 10px; }
  .workbench-model { margin-left: 0; width: 100%; max-width: none; font-size: 16px; }
  .workbench>.sample-selector { display: block; padding: 13px 14px; }
  .workbench>.sample-selector label { font-size: 12px; margin-bottom: 7px; }
  .workbench>.sample-selector select { width: 100%; max-width: none; font-size: 16px; padding: 10px 12px; }
  .workbench-body { display: flex; flex-direction: column; }
  .project-pane { order: 0; }
  .agent-pane { order: 1; padding: 22px 18px; border-top: 1px solid #343943; border-bottom: 0; }
  .agent-pane-top strong { font-size: 15px; }
  .agent-pane-top div>span { font-size: 12px; }
  .conversation { margin-top: 18px; }
  .user-prompt { font-size: 14px; padding: 14px; margin-left: 12px; }
  .agent-message { font-size: 14px; }
  .message-foot { font-size: 13px; }
  .file-changes { font-size: 12px; }
  .workspace-tabs { padding-inline: 6px; }
  .workspace-tabs button { flex: 1; font-size: 14px; min-height: 49px; }
  .demo-panel { padding: 10px; }
  .preview-address { font-size: 11px; gap: 6px; padding: 10px; }
  .preview-address span:last-child { font-size: 10px; }
  .sample-site { padding: 25px 20px 22px; min-height: 405px; }
  .sample-site h3 { font-size: clamp(40px,12vw,58px); }
  .sample-site>p { font-size: 14px; line-height: 1.6; }
  .sample-nav strong { font-size: 13px; }
  .sample-kicker { font-size: 10px; }
  .sample-cta { font-size: 12px; padding: 12px 14px; }
  .sample-bottom { font-size: 10px; }
  .code-panel { padding: 20px; min-height: 440px; }
  .code-panel p { font-size: 14px; }
  .code-panel pre { font-size: 12px; }
  .code-heading { font-size: 11px; flex-wrap: wrap; }
  .workbench-footer { font-size: 11px; line-height: 1.7; padding: 14px; }
  .workbench-footer a { min-height: 36px; display: inline-flex; align-items: center; }
  .workspace-points { padding-top: 7px; }
  .workspace-points p { font-size: 13px; line-height: 1.6; }
  .provider-grid { gap: 12px; }
  .provider-card { padding: 22px 16px 17px; border-radius: 14px; min-width: 0; }
  .provider-name { font-size: 18px; }
  .provider-type { font-size: 11px; min-height: 34px; }
  .provider-copy { font-size: 14px; line-height: 1.7; margin-bottom: 20px; }
  .provider-action { font-size: 12px; line-height: 1.6; }
  .provider-detail { font-size: 14px; line-height: 1.75; padding: 13px; }
  .section-disclaimer { font-size: 12px; line-height: 1.8; }
  .steps-section { padding-block: 64px; }
  .steps-grid { gap: 30px; }
  .step-number { font-size: 13px; padding-bottom: 15px; }
  .steps-grid h3 { font-size: 25px; }
  .steps-grid p, .hosting-options p, .hosting-options li { font-size: 16px; line-height: 1.8; }
  .hosting-intro>p:not(.micro-label) { font-size: 16px; }
  .hosting-note, .hosting-boundary, .plan-state { font-size: 13px; }
  .faq-list summary { font-size: 16px; line-height: 1.5; gap: 12px; }
  .faq-list p { font-size: 16px; margin-right: 12px; }
  .closing-section>p:last-child { font-size: 13px; }
  .osp-flagship section[id] { scroll-margin-top: 24px; }
}
@media (max-width: 360px) {
  .flag-brand { font-size: 16px; }
  .flag-nav .button { font-size: 11px; padding-inline: 8px; }
  .provider-grid { grid-template-columns: 1fr; }
  .provider-type { min-height: 0; }
  .sample-dashboard-metrics { gap: 4px; }
  .sample-dashboard-metrics>div { padding: 10px 6px; }
}
html[data-motion=paused] { scroll-behavior: auto; }
html[data-document-hidden] *, html[data-document-hidden] *::before, html[data-document-hidden] *::after { animation-play-state: paused !important; }
html[data-motion=paused] *, html[data-motion=paused] *::before, html[data-motion=paused] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .osp-flagship *, .osp-flagship *::before, .osp-flagship *::after { animation: none !important; transition: none !important; }
}