@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --forest: #173d35;
  --forest-deep: #102c27;
  --teal: #44b8ad;
  --teal-soft: #d9eeea;
  --ivory: #f7f3ec;
  --paper: #fffdf9;
  --ink: #16241f;
  --muted: #6d7873;
  --line: rgba(23, 61, 53, 0.15);
  --coral: #b36a6c;
  --sand: #d9b680;
  --shadow: 0 24px 70px rgba(29, 50, 43, 0.13);
}

[hidden] { display: none !important; }
.beta-feedback { width:min(1180px,calc(100% - 40px)); margin:50px auto 70px; padding:36px; border:1px solid var(--line); border-radius:26px; background:var(--teal-soft); display:flex; align-items:center; justify-content:space-between; gap:30px; }
.beta-feedback h2 { font-size:clamp(1.5rem,3vw,2rem); margin:10px 0; }
.beta-feedback p { max-width:640px; }
.beta-feedback .button { flex-shrink:0; }
.footer-feedback { background:none; border:0; font:inherit; color:inherit; padding:0; text-decoration:underline; cursor:pointer; }
#feedback-dialog { border:1px solid var(--line); border-radius:28px; width:min(620px,calc(100% - 24px)); max-height:calc(100dvh - 32px); padding:36px; background:var(--ivory); color:var(--ink); box-shadow:var(--shadow); overflow:auto; }
#feedback-dialog::backdrop { background:rgba(16,44,39,.7); }
#feedback-dialog h2 { font-size:clamp(1.5rem,4vw,2rem); margin:10px 0; padding-right:28px; line-height:1.2; outline:none; }
#feedback-dialog .section-label { margin:0; padding-right:30px; }
.feedback-intro { margin:12px 0 24px; color:var(--muted); }
.feedback-close { position:absolute; right:18px; top:18px; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--forest); font-size:25px; cursor:pointer; }
.preview-close:focus,.feedback-close:focus { outline:none; }
.preview-close:focus-visible,.feedback-close:focus-visible { outline:2px solid var(--forest); outline-offset:3px; }
#beta-feedback-form fieldset { border:0; padding:0; margin:0 0 20px; }
#beta-feedback-form legend,#beta-feedback-form > label { display:block; font-weight:600; font-size:.95rem; margin-bottom:8px; }
.feedback-types { display:flex; gap:8px; flex-wrap:wrap; }
.feedback-types label { cursor:pointer; position:relative; }
.feedback-types input { position:absolute; opacity:0; width:1px; height:1px; }
.feedback-types span { display:block; padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:var(--paper); font-size:.9rem; }
.feedback-types input:checked + span { background:var(--forest); color:white; border-color:var(--forest); }
.feedback-types input:focus-visible + span { outline:2px solid var(--teal); outline-offset:3px; }
#beta-feedback-form select,#beta-feedback-form textarea,#feedback-email { font:inherit; width:100%; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:12px; }
#beta-feedback-form select { margin-bottom:20px; }
#beta-feedback-form textarea { min-height:120px; resize:vertical; }
#beta-feedback-form :is(select,textarea,input):focus-visible { outline:2px solid var(--forest); outline-offset:2px; }
.field-help,.feedback-notice { font-size:.8rem; color:#59665f; line-height:1.5; margin:6px 0 18px; }
.optional { color:var(--muted); font-weight:400; }
.feedback-submit { width:100%; margin-top:4px; }
.feedback-notice { margin-top:14px; margin-bottom:0; text-align:center; }
#feedback-response iframe { width:100%; height:360px; border:0; border-radius:12px; background:var(--paper); }
@media(max-width:700px) { .beta-feedback { flex-direction:column; align-items:flex-start; padding:24px; } #feedback-dialog { padding:26px 22px; } .beta-feedback .button { width:100%; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(68, 184, 173, 0.09), transparent 29rem),
    linear-gradient(180deg, #faf7f1 0%, var(--ivory) 100%);
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.55;
}

a { color: inherit; }
.site-header {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; letter-spacing: 0.18em; }
.brand img { width: 44px; height: 44px; border-radius: 13px; box-shadow: 0 8px 22px rgba(23, 61, 53, 0.14); }
.site-header nav { display: flex; align-items: center; gap: 30px; font-size: 0.94rem; }
.site-header nav a { text-decoration: none; color: #42514c; }
.site-header nav a:hover { color: var(--forest); }
.nav-contact { border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; background: rgba(255,255,255,0.5); }

.hero {
  width: min(1180px, calc(100% - 40px));
  min-height: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  gap: 54px;
  padding: 42px 0 64px;
}
.eyebrow, .section-label { color: var(--forest); font-weight: 700; letter-spacing: 0.16em; font-size: 0.76rem; }
.hero h1, .statement h2, .approach h2, .company h2, .contact h2, .legal-content h1 {
  font-family: 'Manrope', sans-serif;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 18px 0 24px;
}
.hero h1 { font-size: clamp(3.6rem, 5.3vw, 5.5rem); font-weight: 500; }
.hero-copy > p:not(.beta-note) { max-width: 620px; color: #52605b; font-size: 1.13rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 26px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 999px; text-decoration: none; font-weight: 700; }
.button-primary { border:0; background: var(--forest); color: white; box-shadow: 0 14px 34px rgba(23,61,53,0.22); }
.button-primary:focus:not(:focus-visible) {outline:none;}
.button-primary:focus-visible {outline:2px solid var(--forest);outline-offset:4px;}
.button-secondary { border: 1px solid var(--line); background: rgba(255,255,255,0.62); }
.button-light { background: var(--paper); color: var(--forest); }
.beta-note { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 0.86rem; }
.beta-note span { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(68,184,173,0.14); }

.product-preview { position: relative; min-height: 570px; display: grid; place-items: center; }
.product-preview::before { content: ''; position: absolute; inset: 7% -8% 3%; border-radius: 44% 56% 62% 38% / 48% 43% 57% 52%; background: linear-gradient(135deg, #e1ede7, #ecdcd4); filter: saturate(0.7); }
.phone { position: relative; z-index: 2; width: 320px; height: 630px; border-radius: 51px; padding: 13px; background: #1c2d28; box-shadow: 0 36px 90px rgba(18,44,38,0.27); transform: rotate(2deg); }
.phone-top { position: relative; height: 38px; border-radius: 38px 38px 0 0; background: #fbf9f5; display: flex; align-items: center; padding: 0 22px; font-size: 0.68rem; font-weight: 700; }
.phone-top i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 21px; border-radius: 99px; background: #080a09; }
.phone-body { height: calc(100% - 38px); border-radius: 0 0 38px 38px; overflow: hidden; padding: 28px 20px; background: linear-gradient(rgba(250,247,241,0.91), rgba(250,247,241,0.96)), url('assets/stone-a.png') center / cover; }
.phone-kicker { margin: 0; font-size: 0.65rem; letter-spacing: 0.22em; font-weight: 700; color: var(--forest); }
.phone-body h2 { margin: 10px 0 2px; font-size: 1.85rem; letter-spacing: -0.05em; }
.phone-subtitle { margin: 0 0 22px; color: var(--muted); }
.insight-card { background: rgba(255,255,255,0.78); border: 1px solid rgba(23,61,53,0.12); border-radius: 24px; padding: 18px; box-shadow: 0 16px 35px rgba(31,54,47,0.08); }
.insight-label { display: block; color: var(--teal); font-size: 0.6rem; letter-spacing: 0.14em; font-weight: 700; margin-bottom: 9px; }
.insight-card strong { display: block; font-size: 1rem; line-height: 1.35; }
.insight-card p { font-size: 0.72rem; color: var(--muted); margin: 10px 0 0; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.mini-grid div { background: rgba(255,255,255,0.72); border-radius: 18px; padding: 15px; border: 1px solid rgba(23,61,53,0.09); }
.mini-grid span { display: block; font-size: 0.55rem; letter-spacing: 0.13em; color: var(--muted); }
.mini-grid strong { font-size: 0.84rem; }
.quick-row { display: flex; justify-content: space-around; margin-top: 25px; }
.quick-row i { width: 49px; height: 49px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 9px rgba(68,184,173,0.1); }
.hero-copy > p.hero-summary { font-size: 1rem; }
.peptide-preview { padding: 16px 15px 12px; display: flex; flex-direction: column; gap: 0; }
.phone-brand { text-align: center; font-weight: 500; font-size: 15px; letter-spacing: .27em; margin-bottom: 15px; }
.phone-brand span { display: block; font-size: 5.8px; font-weight: 700; letter-spacing: .23em; text-transform: uppercase; margin-top: 4px; }
.peptide-preview .phone-kicker { font-size: 6px; letter-spacing: .17em; }
.peptide-preview h2 { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 29px; margin: 5px 0 3px; line-height: 1.1; }
.peptide-preview .phone-subtitle { font-size: 9px; margin: 0 0 11px; }
.library-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; background: #e5e6df; border-radius: 13px; margin-bottom: 13px; font-size: 9px; text-align: center; color: #64736b; }
.library-tabs > span { padding: 7px 0; border-radius: 10px; }
.library-tabs .selected { background: var(--forest); color: white; font-weight: 600; box-shadow: 0 3px 8px #173d3515; }
.library-heading { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; margin-bottom: 7px; }
.library-heading > span { font-size: 6px; font-weight: 500; color: var(--muted); }
.stack-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 12px; }
.stack-preview { min-height: 98px; padding: 9px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,249,.85); }
.stack-monogram { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 11px; font-weight: 600; color: #7474a3; background: #ebe9f2; box-shadow: 5px 3px 0 -1px #9896bd; margin-bottom: 10px; }
.stack-glow .stack-monogram { color: #967775; background: #f3e5e0; box-shadow: 5px 3px 0 -1px #c39b8c; }
.stack-preview strong { display: block; font-size: 10px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; margin-bottom: 7px; }
.compound-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.compound-chips > span { font-size: 5.7px; color: #62736a; padding: 2px 4px; background: #efeee8; border-radius: 8px; }
.compounds-heading { font-size: 8px; letter-spacing: .02em; margin-bottom: 7px; }
.peptide-preview-list { display: grid; gap: 7px; }
.peptide-preview-row { display: flex; align-items: center; gap: 9px; min-height: 50px; padding: 7px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,253,249,.88); }
.compound-monogram { width: 31px; height: 31px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; font-weight: 600; font-size: 11px; }
.compound-monogram.recovery { color: #628a76; background: #e9ede4; }
.compound-monogram.skin { color: #9a737b; background: #efe4e6; }
.peptide-preview-row > div { min-width: 0; }
.peptide-preview-row strong { display: block; font-size: 10.5px; line-height: 1.4; }
.peptide-preview-row > div > span { display: block; color: var(--muted); font-size: 7px; line-height: 1.5; margin-top: 2px; }
.compound-arrow { margin-left: auto; color: var(--muted); font-size: 13px; }
.phone-preview-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 2px; font-size: 7px; line-height: 10px; margin-top: auto; padding: 5px 0 0; color: var(--muted); }
.phone-preview-nav span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 1px; }
.phone-preview-nav svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.phone-preview-nav .selected { color: var(--forest); background: #eeece6; border: 1px solid #e2dfd7; border-radius: 10px; padding: 4px 0; }
.hero-preview-label { position: absolute; bottom: -40px; z-index: 2; width: 100%; text-align: center; font-size: 11px; color: #65756d; }
.orbit-one, .orbit-two { position: absolute; z-index: 1; border-radius: 50%; background: var(--teal); }
.orbit-one { width: 42px; height: 42px; left: 2%; top: 18%; }
.orbit-two { width: 20px; height: 20px; right: 8%; bottom: 16%; background: var(--coral); }

.statement { padding: 120px max(20px, calc((100vw - 1000px) / 2)); text-align: center; background: var(--forest); color: white; }
.statement .section-label { color: #8ad5cd; }
.statement h2 { font-size: clamp(2.5rem, 5vw, 4.7rem); font-weight: 500; max-width: 950px; margin-inline: auto; }
.statement-copy { max-width: 770px; margin: 0 auto; color: #c8d4cf; font-size: 1.06rem; }

.pillars { width: min(1180px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 100px 0; }
.pillar { min-height: 340px; border-radius: 32px; padding: 34px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(23,61,53,0.08); }
.pillar > span { margin-bottom: auto; font-size: 0.76rem; letter-spacing: 0.15em; font-weight: 700; }
.pillar h3 { font-family: 'Manrope', sans-serif; font-size: 1.75rem; letter-spacing: -0.04em; line-height: 1.1; margin: 40px 0 14px; }
.pillar p { margin: 0; color: #4d5b56; }
.pillar-green { background: #dde9e2; }
.pillar-teal { background: #d8edeb; }
.pillar-coral { background: #eedddb; }

.approach, .company { width: min(1180px, calc(100% - 40px)); margin: 0 auto; border-top: 1px solid var(--line); padding: 104px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.approach h2, .company h2, .contact h2 { font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 500; }
.approach-copy > p:not(.section-label), .company-details > p { color: #53615c; font-size: 1.03rem; }
.approach-list { display: grid; align-content: center; }
.approach-list div { display: grid; grid-template-columns: 130px 1fr; gap: 25px; border-bottom: 1px solid var(--line); padding: 24px 0; }
.approach-list span { font-weight: 700; color: var(--forest); }
.approach-list p { margin: 0; color: var(--muted); }
.company { background: rgba(255,255,255,0.37); border: 1px solid var(--line); border-radius: 34px; padding: 70px; margin-bottom: 100px; }
.company-details dl { margin: 34px 0 0; }
.company-details dl div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.company-details dt { color: var(--muted); }
.company-details dd { margin: 0; font-weight: 600; }
.company-details a { color: var(--forest); }

.contact { background: var(--forest-deep); color: white; padding: 90px max(20px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 45px; }
.contact .section-label { color: #8ad5cd; }
.contact p:not(.section-label) { color: #becdc7; }

footer { width: min(1180px, calc(100% - 40px)); margin: 0 auto; min-height: 150px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; font-size: 0.82rem; color: var(--muted); }
.footer-brand img { width: 36px; height: 36px; }
footer p { text-align: center; }
footer > div { display: flex; gap: 20px; }
footer a { text-decoration: none; }

.legal-page { background: linear-gradient(rgba(250,247,241,0.94), rgba(250,247,241,0.98)), url('assets/stone-b.png') top center / 100% auto; }
.legal-content { width: min(820px, calc(100% - 40px)); margin: 0 auto; padding: 90px 0 110px; }
.legal-content h1 { font-size: clamp(3rem, 7vw, 5.2rem); font-weight: 500; }
.legal-updated { color: var(--muted); margin-bottom: 60px; }
.legal-content section { border-top: 1px solid var(--line); padding: 30px 0 10px; }
.legal-content h2 { font-family: 'Manrope', sans-serif; font-size: 1.35rem; }
.legal-content p { color: #4e5c57; }
.legal-content a { color: var(--forest); font-weight: 600; }
.legal-footer { min-height: 110px; }

@media (max-width: 880px) {
  .site-header { min-height: 78px; }
  .site-header nav a:not(.nav-contact) { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 36px; }
  .hero-copy { text-align: center; }
  .hero-copy > p, .hero-actions, .beta-note { justify-content: center; margin-left: auto; margin-right: auto; }
  .product-preview { min-height: 650px; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { min-height: 270px; }
  .approach, .company { grid-template-columns: 1fr; gap: 36px; }
  .company { padding: 44px 30px; }
  .contact { align-items: flex-start; flex-direction: column; }
  footer { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 35px 0; }
}

@media (max-width: 520px) {
  .site-header, .hero, .pillars, .approach, .company, footer { width: min(100% - 28px, 1180px); }
  .brand span { font-size: 0.86rem; }
  .nav-contact { padding: 8px 13px; font-size: 0.82rem; }
  .hero h1 { font-size: 3.25rem; }
  .hero-actions { flex-direction: column; }
  .button { width: 100%; }
  .phone { width: 286px; height: 570px; }
  .peptide-preview .phone-brand { margin-bottom: 11px; }
  .peptide-preview { padding: 12px 12px 9px; }
  .peptide-preview .phone-brand { margin-bottom: 8px; }
  .peptide-preview h2 { font-size: 27px; }
  .peptide-preview .phone-subtitle { margin-bottom: 8px; }
  .peptide-preview .stack-preview { min-height: 82px; padding: 8px 7px; }
  .peptide-preview .stack-monogram { width: 23px; height: 23px; font-size: 9px; margin-bottom: 7px; }
  .peptide-preview .stack-preview strong { margin-bottom: 5px; font-size: 9px; }
  .peptide-preview .stack-preview-grid { margin-bottom: 8px; }
  .peptide-preview-row { min-height: 44px; padding: 6px; }
  .peptide-preview .compound-monogram { width: 27px; height: 27px; }
  .peptide-preview .library-tabs { margin-bottom: 8px; }
  .peptide-preview .library-heading { margin-bottom: 5px; }
  .peptide-preview .phone-preview-nav { padding: 6px 0 0; font-size: 6.5px; line-height: 9px; }
  .peptide-preview .phone-preview-nav span { gap: 3px; padding: 4px 0; }
  .peptide-preview .phone-preview-nav svg { width: 16px; height: 16px; }
  .peptide-preview .phone-preview-nav .selected { padding: 3px 0; }
  .product-preview::before { inset: 7% 0 3%; }
  .product-preview { min-height: 590px; }
  .statement { padding-top: 90px; padding-bottom: 90px; }
  .approach-list div, .company-details dl div { grid-template-columns: 1fr; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

button {font:inherit;cursor:pointer;} .hero-actions button {border:0;gap:10px;font-size:1rem;}
#app-preview {width:min(1030px,calc(100% - 28px));max-height:calc(100dvh - 32px);border:1px solid var(--line);border-radius:32px;padding:38px;background:var(--ivory);color:var(--ink);box-shadow:var(--shadow);overflow:auto;}
#app-preview::backdrop {background:rgba(10,30,25,.76);backdrop-filter:blur(8px);}
.preview-close {position:absolute;right:16px;top:12px;width:40px;height:40px;background:var(--paper);border:1px solid var(--line);border-radius:50%;font-size:26px;z-index:3;}
.tour-layout {display:grid;grid-template-columns:300px 1fr;gap:46px;align-items:center;}
.tour-device {position:relative;padding:9px;background:var(--forest-deep);border-radius:40px;box-shadow:0 22px 50px #173d3533;}
.tour-screen {border-radius:32px;overflow:hidden;aspect-ratio:390/844;background:var(--ivory);}
.tour-screen img {display:block;width:100%;height:auto;object-position:top;}
.device-speaker {position:absolute;top:14px;left:38%;width:24%;height:7px;border-radius:10px;background:#173d35;}
.tour-copy h2 {font-family:Manrope,sans-serif;font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.14;letter-spacing:-.04em;margin:14px 0;}
#tour-caption {color:#52605b;min-height:76px;font-size:1.05rem;}
.tour-chapters {display:flex;flex-wrap:wrap;gap:8px;margin:24px 0;}
.tour-chapters button,.tour-controls button {border:1px solid var(--line);border-radius:999px;background:var(--paper);padding:9px 14px;color:var(--forest);font-size:.83rem;}
.tour-chapters button[aria-pressed=true] {background:var(--forest);color:white;}
.tour-controls {display:flex;align-items:center;gap:12px;}.tour-controls #tour-play {background:var(--teal-soft);}.tour-controls span {font-size:.8rem;color:var(--muted);margin-left:auto;}
.preview-note {font-size:.73rem;color:var(--muted);margin:18px 0 26px;}
.launch-panel {display:flex;flex-wrap:wrap;align-items:center;gap:22px;padding-top:24px;border-top:1px solid var(--line);}
.launch-panel h3 {font-size:1rem;margin:0;}.launch-panel p {font-size:.82rem;color:var(--muted);}
.qr-wrap {position:relative;flex:none;background:white;border-radius:14px;padding:5px;}.qr-wrap img {display:block;}.qr-wrap span {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;font-size:9px;font-weight:700;background:white;color:var(--forest);border:1px solid var(--line);padding:3px 5px;border-radius:4px;}
.store-badges {display:flex;flex-wrap:wrap;gap:8px;}.store-badge {display:flex;align-items:center;gap:8px;background:var(--forest-deep);color:white;border-radius:9px;padding:8px 11px;font-size:16px;line-height:1.2;}.store-badge small {display:block;font-size:7px;letter-spacing:.06em;margin-bottom:3px;}
.hero-copy {align-self:start;padding-top:24px;}
.hero-launch {margin-top:28px;gap:18px;flex-wrap:nowrap;}
.hero-launch .qr-wrap img {width:112px;height:112px;}
.hero-launch p {margin:6px 0 12px;}
@media(max-width:960px){.hero-launch {justify-content:center;text-align:left;}}
@media(max-width:420px){.hero-copy{padding-top:0;}.hero h1{font-size:2.8rem;}.hero-copy > p:not(.beta-note){font-size:1rem;}.hero-actions{margin-top:22px;}.hero-launch {gap:12px;}.hero-launch .qr-wrap img{width:96px;height:96px;}.hero-launch h3{font-size:.88rem;}.hero-launch .store-badge{font-size:13px;padding:7px 9px;}.hero-launch p{font-size:.76rem;}}
.tour-scroll {animation:tour-pan 5.5s ease-in-out both;}@keyframes tour-pan {0%,20% {transform:translateY(0);}85%,100% {transform:translateY(var(--tour-offset,0px));}}
@media(max-width:760px){#app-preview{padding:44px 20px 24px;}.tour-layout{grid-template-columns:1fr;gap:28px;}.tour-device{width:220px;margin:auto;}.tour-copy{text-align:center;}#tour-caption{min-height:0;}.tour-chapters,.tour-controls{justify-content:center;}.tour-controls span{margin-left:0;}.launch-panel{text-align:left;justify-content:center;}.qr-wrap img{width:110px;height:110px;}}
@media(prefers-reduced-motion:reduce){.tour-scroll{animation:none;}}