.service-note{max-width:480px;margin:12px auto 0;color:#a4b8cf;font-size:11px;line-height:1.6;text-align:center}
.pearl-art{transition:top .8s ease,left .8s ease,opacity .5s ease}
.app-shell[data-scene="workspace"] .pearl-art{visibility:hidden}
#submit-label{font:inherit;letter-spacing:inherit}
.thinking{max-width:620px;margin:0 auto;padding:300px 24px 70px;text-align:center}
.thinking h1{font-size:48px;margin:15px 0 25px}
.thinking-panel{padding:24px;border-radius:22px}
.thinking-panel>p{font-size:14px;color:var(--muted)}
.thinking-panel .quiet-note{font-size:11px;margin-top:12px}
.thinking-spark{display:block;color:var(--gold);font-size:32px;margin-bottom:12px;animation:glimmer 3s ease-in-out infinite}
.thinking[aria-busy="false"] .thinking-spark{animation:none}
.thinking>.text-button{margin-top:22px}
.thinking-recovery{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:20px}
.thinking .error{margin-top:18px;line-height:1.7}
.ai-insight{padding:22px 24px;border-radius:20px;margin-top:20px}
.ai-insight>p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.7;margin-top:10px}
.ai-insight>.quiet-note{font-size:11px!important;color:#a9bbd0!important}
.ai-insight .text-button{margin-top:10px;min-height:40px;color:var(--blue)}
.ai-insight .text-button:disabled{color:var(--muted)}
#refinement{border:1px solid var(--line);border-radius:12px;background:#071627;padding:14px;min-height:120px;font-size:16px;margin-top:10px}
#refinement:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.app-shell[data-scene="thinking"] .pearl-art{top:-5px}
@media(max-width:600px){.service-note{font-size:10px;max-width:300px}.thinking{padding:230px 24px 35px}.thinking h1{font-size:34px}.thinking .eyebrow{font-size:8px}.thinking-panel{padding:23px 18px}.thinking-panel>p{font-size:13px}.thinking>.text-button{font-size:12px}.ai-insight{padding:18px;margin-top:18px;border-radius:16px}.ai-insight>p:not(.eyebrow){font-size:12px}.ai-insight .eyebrow{font-size:8px}}
/* Desktop uses the available width; the phone keeps its approved composition. */
@media(min-width:1000px){
  .site-header{height:112px;padding-left:6%;padding-right:6%}
  .landing{max-width:1280px;padding:70px 6% 54px;text-align:left}
  .hero-copy,.landing form,.landing .benefits,.landing>.reassurance,.landing>.service-note{width:49%;max-width:550px}
  .hero-copy h1{font-size:clamp(40px,3.55vw,52px);line-height:1.08}
  .hero-copy .eyebrow{font-size:9px;letter-spacing:.14em;margin-bottom:20px}
  .desktop-intro{font-size:15px;margin-top:22px}
  .landing .field-label{margin-top:34px;font-size:12px}
  .landing textarea{font-size:16px;min-height:55px}
  .landing .sample-button{text-align:left;margin-top:18px}
  .landing .benefits{justify-content:space-between;margin:30px 0 0;padding:0 5px}
  .landing .benefits small{font-size:9px;letter-spacing:.06em}
  .landing .pearl-button{max-width:none}
  .landing>.reassurance,.landing>.service-note{text-align:left;margin-left:0;margin-right:0}
  .landing>.reassurance{margin-top:26px}
  .landing>.service-note{font-size:10px}
  .pearl-art{left:76%;top:35px;width:790px;height:430px}
  .pearl-texture{background-position:center -145px}
  .app-shell[data-scene="thinking"] .pearl-art{left:50%;top:-35px;width:620px;height:330px}
  .app-shell[data-scene="thinking"] .pearl-texture{background-position:center -114px}
  .thinking{padding-top:295px}
  .app-shell[data-scene="assembly"] .pearl-art{left:50%;width:650px;height:340px}
  .app-shell[data-scene="assembly"] .pearl-texture{background-position:center -119px}
  .assembly-details{max-width:640px}
  .preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);column-gap:70px;row-gap:0;max-width:1220px;padding:55px 50px 60px}
  .preview-heading{grid-column:1;grid-row:1;padding:0 0 20px;min-height:0}
  .preview-heading h1{font-size:48px;max-width:460px;margin-top:20px}
  .preview-heading>p:not(.eyebrow){font-size:15px;max-width:330px}
  .preview-tiles{grid-column:2;grid-row:1 / span 6;gap:20px;align-self:start;margin-top:30px}
  .preview-tile{min-height:230px;padding:29px 23px;border-radius:24px}
  .tile-title{font-size:31px;margin-top:25px}
  .tile-description{font-size:13px;max-width:85%;line-height:1.6}
  .preview-summary,.ai-insight,.preview>.pearl-button,.preview>.reassurance,.preview-controls{grid-column:1}
  .preview-summary{margin-top:10px}
  .preview>.pearl-button{margin-top:24px}
  .preview>.reassurance{font-size:11px}
  .preview-controls{justify-content:space-between;margin-top:16px;gap:20px}
  .app-shell[data-scene="preview"] .pearl-art{left:calc(50% + 420px);top:-130px;width:360px;height:200px;opacity:.55}
  .app-shell[data-scene="preview"] .pearl-texture{background-position:center -66px}
  .workspace{max-width:1280px;padding:32px 6% 70px}
  .workspace-layout{grid-template-columns:220px minmax(0,1fr);gap:34px}
  .module-content{min-height:440px}
  .module-nav button{font-size:14px;padding:15px 14px}
  .module-intro{font-size:14px;max-width:690px}
  .record-copy strong{font-size:15px}
  .record-copy small{font-size:12px}
  .record-status{font-size:11px}
  .module-stat span{font-size:12px}
  .module-stat small{font-size:11px}
  .workspace-heading{margin-bottom:30px}
  .workspace-note{text-align:right}
}
@media(min-width:1000px) and (max-height:800px){.landing{padding-top:38px;padding-bottom:28px}.hero-copy h1{font-size:46px}.landing .field-label{margin-top:24px}.landing .benefits{margin-top:25px}.landing>.reassurance{margin-top:18px}.pearl-art{top:16px}}