/* Editorial paper, real product scenes, existing light/dark tokens. */
body:has(.hello-page){
  background:var(--bg)
}
body:has(.hello-page) .phone-shell{
  max-width:none;
  width:100%;
  background:var(--bg);
  box-shadow:none;
  min-height:100dvh
}
body:has(.hello-page) .page-content{
  padding:0;
  max-width:none;
  overflow:visible
}
.hello-page{
  --hello-hair:#2C2420;
  --hello-avatar-ink:#FFFFFF;
  --hello-footer-height:98px;
  max-width:1180px;
  margin:0 auto;
  padding:30px 48px 18px;
  color:var(--text);
  font-family:var(--font-ui)
}
.hello-page *,.hello-page *::before,.hello-page *::after{
  box-sizing:border-box
}
.hello-page a{
  color:inherit;
  text-decoration:none
}
.hello-page button{
  font:inherit;
  cursor:pointer
}
.hello-page :is(a,button):focus-visible{
  outline:3px solid var(--text);
  outline-offset:5px
}
.hello-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:28px
}
.hello-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  font-weight:750;
  letter-spacing:-1px
}
.hello-brand-mark{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm)
}
.hello-header-actions{
  display:flex;
  align-items:center;
  gap:24px;
  font-size:13px
}
.hello-page .hello-skip{
  display:flex;
  align-items:center;
  gap:4px;
  min-height:44px;
  color:var(--text-sec)
}
.hello-language{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:8px
}
.hello-tabs{
  display:flex;
  gap:28px;
  border-top:1px solid var(--line-strong);
  padding-top:16px
}
.hello-tab{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  color:var(--text-ter);
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  padding:8px 0;
  font-size:14px
}
.hello-tab[aria-selected="true"]{
  color:var(--text);
  border-bottom-color:var(--text);
  font-weight:700
}
.hello-step-no{
  font:11px var(--font-mono)
}
.hello-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:48px;
  min-height:clamp(400px,55dvh,480px);
  padding:34px 0
}
.hello-panel[hidden]{
  display:none
}
.hello-copy{
  max-width:470px
}
.hello-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--text-sec);
  margin:0 0 23px
}
.hello-rule{
  width:26px;
  height:1px;
  background:var(--text-sec)
}
.hello-copy h1{
  font-family:var(--font-display);
  font-size:clamp(36px,4.5vw,54px);
  font-weight:650;
  letter-spacing:-1.8px;
  line-height:1.23;
  margin:0 0 23px;
  word-break:keep-all;
  text-wrap:balance
}
.hello-description{
  color:var(--text-sec);
  font-size:16px;
  line-height:1.8;
  max-width:380px;
  margin:0;
  word-break:keep-all;
  text-wrap:pretty
}
.hello-takeaway{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--text-sec);
  font-size:13px;
  line-height:1.6;
  margin-top:22px
}
.hello-takeaway svg{
  flex-shrink:0;
  margin-top:1px
}
.hello-scene-controls{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:32px
}
.hello-back{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:transparent;
  color:var(--text)
}
.hello-back:disabled{
  opacity:.3;
  cursor:default
}
.hello-position{
  font:12px var(--font-mono);
  white-space:nowrap
}
.hello-position span{
  color:var(--text-ter)
}
.hello-next{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:12px;
  min-height:44px;
  border:0;
  background:none;
  color:var(--text);
  font-size:13px;
  font-weight:650
}
.hello-final-note{
  margin-left:12px;
  font-size:13px;
  color:var(--text-sec)
}
.hello-visual{
  min-width:0
}
.hello-art{
  position:relative;
  max-width:460px;
  height:405px;
  margin:0 auto
}
.hello-art::before{
  content:'';
  position:absolute;
  inset:26px 0 12px;
  border-radius:48% 48% 38% 45%;
  background:var(--surface-alt);
  opacity:.65
}
.hello-art .card{
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-2);
  margin:0
}
.hello-encounter{
  position:absolute;
  width:100%;
  height:180px;
  top:-8px;
  left:0
}
.hello-note-tag{
  position:absolute;
  top:118px;
  right:10px;
  z-index:1;
  display:flex;
  gap:7px;
  align-items:center;
  color:var(--text-sec);
  font-size:11px;
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:var(--r-full);
  padding:8px 12px;
  transform:rotate(4deg)
}
.hello-person-card{
  position:absolute;
  top:158px;
  left:22px;
  right:22px;
  padding:22px;
  transform:rotate(-3deg)
}
.hello-person-top{
  display:flex;
  align-items:center;
  gap:14px
}
.hello-portrait{
  width:60px;
  height:60px;
  flex-shrink:0;
  border-radius:50%
}
.hello-person-top .hello-person-name{
  font:600 23px var(--font-display);
  color:var(--text);
  margin:0 0 4px
}
.hello-person-top p{
  font-size:12px;
  line-height:1.5;
  color:var(--text-sec);
  margin:0
}
.hello-card-icon{
  color:var(--text-ter);
  margin-left:auto
}
.hello-detail-line{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:10px;
  font-size:12px;
  line-height:1.6;
  margin-top:14px
}
.hello-detail-line>span{
  color:var(--text-ter)
}
.hello-detail-line strong{
  font-weight:500
}
.hello-tags{
  display:flex;
  gap:6px;
  margin-top:16px
}
.hello-tags span{
  font-size:11px;
  background:var(--tag-bg);
  color:var(--tag-fg);
  padding:5px 9px;
  border-radius:var(--r-full)
}
.hello-margin-note{
  position:absolute;
  bottom:-5px;
  right:26px;
  color:var(--text-sec);
  font-size:12px;
  font-style:italic;
  display:flex;
  align-items:center;
  gap:7px
}
.hello-example-label{
  margin:24px 0 0;
  text-align:center;
  font-size:11px;
  color:var(--text-ter)
}
.hello-record-card{
  position:absolute;
  top:26px;
  left:4px;
  right:32px;
  padding:22px;
  transform:rotate(-3deg);
  z-index:1
}
.hello-card-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--text-sec);
  font-size:11px;
  line-height:1.5
}
.hello-card-heading>span:first-child{
  display:flex;
  align-items:center;
  gap:7px;
  font-weight:650
}
.hello-wave{
  display:flex;
  height:66px;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin:14px 0
}
.hello-wave i{
  width:4px;
  height:var(--wave-height);
  background:var(--text-sec);
  opacity:.65;
  border-radius:var(--r-full)
}
.hello-record-card blockquote{
  font-size:15px;
  line-height:1.7;
  margin:0 0 15px;
  word-break:keep-all
}
.hello-record-bottom{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  color:var(--text-sec)
}
.hello-record-bottom>span:last-child{
  margin-left:auto
}
.hello-mini-avatar{
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  border-radius:50%;
  background:var(--av-2);
  color:var(--hello-avatar-ink)
}
.hello-flow-line{
  position:absolute;
  left:64px;
  top:205px;
  height:90px;
  width:80px;
  border-left:1px dashed var(--text-ter);
  border-bottom:1px dashed var(--text-ter);
  border-radius:0 0 0 20px
}
.hello-summary-card{
  position:absolute;
  top:260px;
  left:65px;
  right:0;
  padding:20px;
  z-index:2;
  transform:rotate(2deg)
}
.hello-ai-heading{
  color:var(--accent)
}
.hello-summary-card>p{
  font-size:13px;
  margin:12px 0 10px;
  line-height:1.6
}
.hello-promise{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--accent);
  background:var(--accent-bg);
  border-radius:var(--r-sm);
  padding:9px;
  font-size:12px;
  line-height:1.5
}
.hello-art-record .hello-margin-note{
  bottom:-25px
}
.hello-reminder-card{
  position:absolute;
  top:26px;
  left:16px;
  right:36px;
  padding:23px;
  transform:rotate(-3deg)
}
.hello-reminder-card .hello-person-top{
  margin:22px 0 18px
}
.hello-recall{
  padding:14px;
  background:var(--surface-alt);
  border-radius:var(--r-sm)
}
.hello-recall>span{
  font-size:11px;
  color:var(--text-ter)
}
.hello-recall>p{
  font-size:13px;
  line-height:1.65;
  margin:5px 0 0
}
.hello-contact-demo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  padding:11px;
  margin-top:14px;
  font-size:13px;
  font-weight:650
}
.hello-message{
  position:absolute;
  top:318px;
  right:0;
  left:78px;
  padding:16px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  transform:rotate(3deg)
}
.hello-message svg{
  flex-shrink:0;
  margin-top:2px;
  color:var(--av-2)
}
.hello-message p{
  font-size:13px;
  line-height:1.6;
  margin:0
}
.hello-art-reconnect .hello-margin-note{
  bottom:-23px
}
.hello-orbit{
  position:absolute;
  top:-6px;
  right:0;
  color:var(--av-2);
  transform:rotate(14deg)
}
.hello-footer{
  border-top:1px solid var(--line-strong);
  padding:24px 0 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.hello-footer-copy{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--text-sec);
  font-size:12px
}
.hello-footer-title{
  color:var(--text);
  font-size:16px;
  font-weight:650
}
.hello-footer-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px
}
.hello-page .hello-primary{
  background:var(--primary);
  color:var(--on-primary);
  border-radius:var(--r-md);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:52px;
  min-width:265px;
  padding:14px 23px;
  font-size:15px;
  font-weight:700;
  border:0;
  cursor:pointer;
  box-shadow:var(--shadow-1)
}
.hello-primary:hover{
  filter:brightness(.95)
}
.hello-page .hello-secondary{
  font-size:12px;
  color:var(--text-sec);
  min-height:44px;
  display:flex;
  align-items:center
}
.hello-credit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--text-ter);
  font-size:11px;
  margin:20px 0 0
}
.hello-noscript{
  font-size:13px;
  text-align:center
}
.hello-panel:not([hidden]) .hello-art{
  animation:hello-arrive 180ms ease both
}
@keyframes hello-arrive{
  from{
    opacity:0;
    transform:translateY(8px)
  }
  to{
    opacity:1;
    transform:none
  }
}
.hello-message-label{
  display:block;
  color:var(--text-ter);
  font-size:10px;
  margin-bottom:5px
}
.hello-beta{
  text-align:center;
  font-size:12px;
  color:var(--text-sec);
  margin:16px 0 0
}
.hello-name-form{
  max-width:460px;
  margin:0 auto 24px;
  padding:18px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  background:var(--surface)
}
.hello-name-form label{
  display:block;
  font-size:14px;
  font-weight:650;
  margin-bottom:10px
}
.hello-name-form input:not([type="hidden"]){
  width:100%;
  min-height:44px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--bg);
  color:var(--text);
  padding:10px;
  font:14px var(--font-ui)
}
.hello-name-form p{
  font-size:12px;
  color:var(--text-sec);
  margin:8px 0 0;
  line-height:1.6
}
@media(max-width:720px){
  .hello-page{
    max-width:480px;
    padding:12px 20px calc(var(--hello-footer-height) + 16px + env(safe-area-inset-bottom,0px))
  }
  .hello-header{
    padding-bottom:8px
  }
  .hello-brand{
    font-size:18px;
    gap:8px
  }
  .hello-brand-mark{
    width:30px;
    height:30px
  }
  .hello-brand-mark svg{
    width:19px
  }
  .hello-header-actions{
    gap:4px;
    font-size:11px
  }
  .hello-tabs{
    gap:0;
    justify-content:space-between;
    padding-top:6px
  }
  .hello-page .hello-tab{
    font-size:12px;
    gap:5px
  }
  .hello-step-no{
    font-size:10px
  }
  .hello-panel{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:12px 0 24px;
    min-height:0
  }
  .hello-copy{
    width:100%;
    order:2
  }
  .hello-visual{
    width:100%;
    order:1
  }
  .hello-eyebrow,.hello-takeaway{
    display:none
  }
  .hello-copy h1{
    font-size:30px;
    letter-spacing:-1px;
    margin-bottom:12px
  }
  .hello-description{
    font-size:14px;
    line-height:1.7
  }
  .hello-scene-controls{
    margin-top:12px
  }
  .hello-back{
    width:44px;
    height:44px
  }
  .hello-position{
    font-size:11px
  }
  .hello-art{
    height:min(335px,42dvh);
    max-width:365px
  }
  .hello-art::before{
    inset:8px 0
  }
  .hello-encounter{
    height:108px;
    top:0
  }
  .hello-note-tag{
    top:70px;
    right:0;
    font-size:10px;
    padding:6px 8px
  }
  .hello-person-card{
    top:90px;
    left:6px;
    right:6px;
    padding:16px;
    transform:none
  }
  .hello-person-top{
    gap:10px
  }
  .hello-person-top .hello-person-name{
    font-size:20px
  }
  .hello-person-top p{
    font-size:11px
  }
  .hello-portrait{
    width:46px;
    height:46px
  }
  .hello-detail-line{
    grid-template-columns:66px 1fr;
    font-size:11px;
    margin-top:9px
  }
  .hello-tags{
    margin-top:10px
  }
  .hello-tags span{
    padding:4px 8px
  }
  .hello-margin-note{
    display:none
  }
  .hello-example-label{
    margin:8px 0 0;
    font-size:10px
  }
  .hello-record-card{
    top:0;
    left:0;
    right:14px;
    padding:14px;
    transform:none
  }
  .hello-wave{
    height:36px;
    gap:4px;
    margin:8px 0
  }
  .hello-wave i{
    max-height:36px;
    width:3px
  }
  .hello-record-card blockquote{
    font-size:12px;
    line-height:1.6;
    margin-bottom:8px
  }
  .hello-record-bottom{
    font-size:10px
  }
  .hello-summary-card{
    top:171px;
    left:22px;
    padding:14px;
    transform:none
  }
  .hello-summary-card>p{
    font-size:12px;
    margin:8px 0
  }
  .hello-promise{
    font-size:11px;
    padding:8px
  }
  .hello-flow-line{
    display:none
  }
  .hello-reminder-card{
    top:0;
    left:0;
    right:12px;
    padding:14px;
    transform:none
  }
  .hello-reminder-card .hello-person-top{
    margin:10px 0
  }
  .hello-recall{
    padding:10px
  }
  .hello-recall>p{
    font-size:12px;
    line-height:1.5
  }
  .hello-contact-demo{
    padding:8px;
    margin-top:10px;
    min-height:36px;
    font-size:12px
  }
  .hello-message{
    top:254px;
    left:22px;
    padding:12px;
    transform:none
  }
  .hello-message p{
    font-size:11px;
    line-height:1.5
  }
  .hello-message-label{
    font-size:9px;
    margin-bottom:3px
  }
  .hello-footer{
    position:fixed;
    z-index:5;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:480px;
    flex-direction:column;
    text-align:center;
    padding:0 20px env(safe-area-inset-bottom,0px);
    gap:0;
    background:var(--bg)
  }
  .hello-footer-copy{
    display:none
  }
  .hello-footer-actions{
    width:100%;
    gap:0
  }
  .hello-page .hello-primary{
    width:100%;
    min-width:0;
    height:52px
  }
  .hello-page .hello-secondary{
    justify-content:center;
    min-height:44px;
    font-size:12px
  }
  .hello-credit{
    margin-top:14px;
    font-size:10px
  }
  .hello-name-form{
    margin-top:0
  }
  .hello-beta{
    font-size:11px
  }
}
@media(max-width:360px){
  .hello-page{
    padding-left:16px;
    padding-right:16px
  }
  .hello-brand{
    font-size:16px
  }
  .hello-page .hello-tab{
    font-size:11px
  }
  .hello-copy h1{
    font-size:27px
  }
}
@media(max-width:720px) and (max-height:700px){
  .hello-encounter,.hello-note-tag{
    display:none
  }
  .hello-person-card{
    top:0;
    padding:14px
  }
  .hello-tags{
    margin-top:9px
  }
  .hello-wave{
    height:20px;
    margin:6px 0
  }
  .hello-wave i{
    max-height:20px
  }
  .hello-record-bottom{
    display:none
  }
  .hello-record-card blockquote{
    margin:0
  }
  .hello-summary-card{
    top:123px
  }
  .hello-art-reconnect .hello-message{
    display:none
  }
}
@media(prefers-reduced-motion:reduce){
  .hello-panel:not([hidden]) .hello-art{
    animation:none
  }
}

/* Keep the existing narrative illustrations; tune only the material and tone. */
.hello-visual{background:color-mix(in srgb,var(--surface-alt) 60%,var(--bg));border-color:var(--line);box-shadow:none}
.hello-page .hello-primary{box-shadow:none;transition:transform 120ms ease,background-color 120ms ease}
.hello-page .hello-primary:active{transform:scale(.99)}
@media(prefers-reduced-motion:reduce){.hello-page *{animation:none!important;transition:none!important;transform:none!important}}

/* Real-action previews: quiet, user-paced, and never a data entry form. */
.hello-demo{padding:24px;min-width:0;text-align:left}
.hello-demo-label{margin:0 0 16px;color:var(--text-sec);font-size:.8125rem}
.hello-demo-screen{padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--text)}
.hello-demo-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:1rem}
.hello-demo-instruction{font-size:.875rem;line-height:1.65;margin:20px 0;color:var(--text-sec)}
.hello-demo-field{padding:16px;background:var(--surface-alt);border-radius:12px;font-size:.9375rem;line-height:1.6;margin-bottom:20px}
.hello-demo-field>span{display:block;font-size:.8125rem;color:var(--text-sec);margin-bottom:8px}
.hello-demo-field p{margin:6px 0 0}
.hello-page .hello-demo-target{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--primary);border-radius:14px;background:var(--primary);color:var(--on-primary);font-size:.9375rem;line-height:1.5;outline:5px solid color-mix(in srgb,var(--primary) 12%,transparent);outline-offset:4px}
.hello-page .hello-demo-target:focus-visible{outline:3px solid var(--text);outline-offset:5px}
.hello-demo-target:disabled{opacity:.7}
.hello-demo-result{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:.875rem;line-height:1.65}
.hello-demo-result p{margin:8px 0 0;color:var(--text-sec)}
.hello-demo-result[hidden]{display:none}
.hello-demo-channels{display:flex;flex-wrap:wrap;gap:8px}
.hello-demo-channels span{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:12px}
.hello-demo-safety{margin:16px 0 0;font-size:.75rem;line-height:1.6;color:var(--text-sec)}
@media(max-width:700px){.hello-demo{padding:16px}.hello-demo-screen{padding:18px}.hello-demo-instruction{margin:14px 0}.hello-demo-field{padding:12px}.hello-panel{gap:20px}.hello-copy{order:1}.hello-visual{order:2}.hello-copy h1{font-size:1.5rem;letter-spacing:-.02em}.hello-description{margin-bottom:0}.hello-demo-result{margin-top:20px}}

/* Readability floor (audience 40+): no intro text under 12px, including the
   narrow-screen overrides above. Loaded last so it wins over them. */
.hello-page :is(.hello-tab,.hello-eyebrow,.hello-note-tag,.hello-tags span,.hello-example-label,
.hello-card-heading,.hello-record-bottom,.hello-recall>span,.hello-credit,.hello-message-label,
.hello-header-actions,.hello-step-no,.hello-position,.hello-person-top p,.hello-detail-line,
.hello-promise,.hello-message p,.hello-beta){font-size:12px}