/* The landing page's Haas scale: 130px display, 35px lead, 16px body at 1512px. */
.onboarding-body { min-height:100vh; background:var(--paper); --card-radius:16px; }
.onboarding-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem; height:5.625rem; position:relative; }
.onboarding-header::after { content:""; position:absolute; left:1.25rem; right:1.25rem; bottom:0; height:1px; background:repeating-linear-gradient(90deg,#ccc 0 2px,transparent 2px 4px); }
.onboarding-header img { width:6.5rem; }
.brief-close { width:11rem; }
.brief-close .btn-icon-content,.back-button .btn-icon-content,.review-button .btn-icon-content { background:#eee; }
.onboarding-shell { width:77rem; max-width:calc(100% - 5rem); margin:auto; padding:3rem 0 2.5rem; min-height:calc(100vh - 5.625rem); display:flex; flex-direction:column; overflow:visible; }
.progress-row { display:grid; grid-template-columns:5rem 1fr 5rem; align-items:center; gap:1.25rem; margin-bottom:4rem; font-size:var(--type-body); }
.progress-track { background:#e0e0e0; height:2px; border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; background:var(--ink); transition:width .6s var(--ease); }
.project-price { text-align:right; font-variant-numeric:tabular-nums; }
.question-stage { width:100%; margin:0; }
.eyebrow { margin-bottom:1.5rem; font-size:var(--type-body); color:#6c6c6c; }
.question-heading { display:grid; grid-template-columns:5rem minmax(0,1fr); column-gap:1.25rem; row-gap:2rem; align-items:baseline; margin-bottom:3rem; }
.question-heading .eyebrow { grid-column:1; grid-row:1; margin:0; white-space:nowrap; }
.question-step h1 { grid-column:1 / -1; grid-row:2; max-width:77rem; font-size:var(--type-display); line-height:.9; letter-spacing:-.04em; margin:0; outline:none; text-wrap:balance; }
.helper { font-size:var(--type-body); line-height:1.4; max-width:58rem; margin-bottom:2rem; color:#777; }
.question-heading .helper { grid-column:2; grid-row:1; margin:0; }
.choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.choice-card,.check-card { padding:1.75rem; text-align:left; border:1px solid #d2d2d2; background:#f2f2f2; border-radius:var(--card-radius); color:var(--ink); transition:background .3s,color .3s,border-color .3s,transform .45s var(--ease); }
.choice-card { min-height:15rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; }
.choice-index { color:#777; font-size:var(--type-body); }
.choice-card strong { font-size:var(--type-lead); line-height:1; letter-spacing:-.01em; margin:auto 0 1.5rem; }
.choice-card small { font-size:var(--type-body); }
.choice-card::after { content:""; position:absolute; top:1.75rem; right:1.75rem; width:1.25rem; height:1.25rem; border:1px solid #aaa; border-radius:50%; }
.choice-card[aria-pressed=true]::after { border:5px solid var(--paper); background:var(--ink); }
.choice-card[aria-pressed=true],.check-card.selected,.domain-options .selected { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.choice-card[aria-pressed=true] .choice-index { color:#aaa; }
.card-label { min-width:0; }
.card-word-mask { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; }
.card-word { display:block; line-height:1.2; text-shadow:0 1.5em currentColor; transition:transform .525s var(--ease); transition-delay:calc(var(--word-index,0) * .018s); }
@media(hover:hover) and (pointer:fine) {
  :is(.choice-card,.check-card,.domain-options button,.upload-area):hover { border-color:#b5b5b5; background:#e5e5e5; transform:translateY(-2px) scale(1.008); }
  :is(.choice-card[aria-pressed=true],.check-card.selected,.domain-options .selected):hover { background:#373737; border-color:#373737; }
  :is(.choice-card,.check-card,.domain-options button,.upload-area):hover .card-word { transform:translateY(-1.5em); }
}
:is(.choice-card,.check-card,.domain-options button):focus-visible .card-word,
.upload-area:focus-within .card-word { transform:translateY(-1.5em); }
:is(.choice-card,.check-card,.domain-options button,.upload-area):active { transform:scale(.995); }
.field { display:block; margin:2rem 0; }
.field-label { display:block; margin-bottom:1rem; font-size:var(--type-body); line-height:1.2; }
.field-label em { font-style:normal; color:#777; }
.field input,.field textarea { width:100%; background:transparent; border:0; border-bottom:1px solid #bbb; padding:1rem 0 1.25rem; font-size:var(--type-lead); line-height:1.1; letter-spacing:-.01em; color:var(--ink); transition:border-color .3s,box-shadow .3s; }
.field input::placeholder,.field textarea::placeholder { color:#a0a0a0; opacity:1; }
.field textarea { min-height:10rem; resize:vertical; }
.field input:focus,.field textarea:focus { outline:none; border-color:var(--ink); box-shadow:0 1px 0 var(--ink); }
.inline-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.75rem; }
.inline-fields input { font-size:var(--type-lead); }
.check-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.check-card { min-height:5.5rem; padding:1.35rem; line-height:1.2; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.tick { flex:none; display:grid; place-items:center; width:1.25rem; height:1.25rem; border:1px solid #aaa; border-radius:50%; color:transparent; font-size:.8rem; }
.selected .tick { color:var(--ink); background:var(--paper); border-color:var(--paper); }
.page-notice { padding:1.5rem 1.75rem; background:#ededed; border-radius:var(--card-radius); margin:2rem 0 1.5rem; line-height:1.3; }
.page-notice strong { display:block; margin-bottom:.5rem; font-size:var(--type-body); }
.upload-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.upload-area { border:1px dashed #bbb; border-radius:var(--card-radius); background:#f2f2f2; min-height:12rem; padding:1.75rem; display:flex; flex-direction:column; justify-content:space-between; gap:1rem; position:relative; cursor:pointer; overflow:hidden; transition:background .3s,color .3s,border-color .3s,transform .45s var(--ease); }
.upload-area>span { font-size:var(--type-lead); letter-spacing:-.01em; line-height:1; }
.upload-area input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.upload-area small { font-size:var(--type-body); color:#777; line-height:1.25; overflow-wrap:anywhere; }
.upload-area:focus-within { outline:2px solid var(--ink); outline-offset:4px; }
.domain-options { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin:2rem 0; max-width:38rem; }
.domain-options button { background:#f2f2f2; border:1px solid #d2d2d2; border-radius:var(--card-radius); padding:2rem; min-height:7rem; font-size:var(--type-lead); text-align:left; transition:background .3s,color .3s,transform .45s var(--ease); }
.onboarding-actions { display:flex; align-items:center; justify-content:space-between; margin-top:3rem; padding-top:2rem; border-top:1px dashed #ccc; }
.onboarding-actions>div { display:flex; align-items:center; gap:1.5rem; }
.back-button { border:0; background:none; padding:0; width:10rem; }
.back-button .btn-icon-icon { transform:rotate(180deg); }
.review-button { border:0; background:none; padding:0; width:14.5rem; }
.review-button[hidden] { display:none; }
.continue-button { display:inline-block; border:0; background:var(--ink); color:var(--paper); border-radius:.5rem; padding:1.1rem 1.25rem; min-width:14.5rem; text-align:left; }
.continue-button.btn-icon-link { padding:0; width:auto; }
.onboarding-body .btn-icon-link:focus-visible .btn-icon-content__text { transform:translateY(-1.5em); }
.onboarding-body .btn-icon-link:focus-visible .btn-icon-icon__bg { transform:rotate(90deg); }
.onboarding-body .btn-icon-link:focus-visible .btn-icon-icon__arrow { transform:translateX(200%); }
.onboarding-body .btn-icon-link:focus-visible .btn-icon-content__bg { transform:translateY(0) rotate(0); }
.continue-button:disabled { opacity:.6; }
.key-hint { color:#777; font-size:var(--type-body); }
.draft-preference { display:flex; align-items:center; gap:.65rem; width:fit-content; margin-top:1.5rem; color:#707070; font-size:var(--type-body); cursor:pointer; }
.draft-preference input { width:16px; height:16px; margin:0; accent-color:var(--ink); }
.form-error { color:#a52323; min-height:1rem; margin-top:1.25rem; line-height:1.3; }
.reset-brief { align-self:flex-start; border:0; background:none; color:#777; text-decoration:underline; padding:0; margin-top:2rem; font-size:var(--type-body); }
.review-card { display:grid; grid-template-columns:14rem 1fr 3rem; gap:1.75rem; padding:1.75rem 0; border-top:1px dashed #bbb; line-height:1.3; }
.review-card h3 { font-size:var(--type-body); color:#777; }
.review-card p { white-space:pre-wrap; overflow-wrap:anywhere; }
.review-card button { border:0; background:none; text-decoration:underline; align-self:start; }
.order-total { display:flex; justify-content:space-between; padding:1.75rem; background:var(--ink); color:var(--paper); border-radius:var(--card-radius); font-size:var(--type-lead); margin-top:2rem; }
.payment-summary { margin:2rem 0; }
.payment-summary>div { display:flex; justify-content:space-between; padding:1.75rem 0; border-bottom:1px dashed #bbb; }
.payment-message { color:#777; line-height:1.3; }
.success-content { justify-content:center; }
.success-content h1 { font-size:var(--type-display); line-height:.9; letter-spacing:-.04em; margin-bottom:2.5rem; }
.success-content>p:not(.eyebrow) { font-size:var(--type-lead); max-width:46rem; line-height:1.1; letter-spacing:-.01em; }
.success-actions { display:flex; gap:2rem; align-items:center; margin-top:3rem; }
@media(prefers-reduced-motion:reduce) {
  .onboarding-body .card-word { transform:none !important; transition:none; }
}

/* A slightly calmer question-title scale; landing-page and mobile type stay intact. */
@media(min-width:801px) {
  .question-step h1 { font-size:calc(var(--type-display) * .88); }
}

/* Carry the mobile landing-page scale through its existing brief flow. */
@media(max-width:800px) {
  :root:has(.onboarding-body) { font-size:16px; }
  .onboarding-body {
    --type-display:50px; --type-lead:25px; --type-body:16px;
    font-size:16px; min-width:0; -webkit-text-size-adjust:100%; text-size-adjust:100%;
  }
  .onboarding-header { height:auto; min-height:86px; padding:12px; gap:12px; }
  .onboarding-header::after { left:12px; right:12px; }
  .onboarding-header img { width:95px; }
  .onboarding-header .secure { display:none; }
  .brief-close { width:155px; }
  .onboarding-shell { width:auto; max-width:none; margin:0 12px; padding:32px 0; min-height:calc(100svh - 86px); }
  .progress-row { grid-template-columns:62px minmax(0,1fr) 64px; gap:12px; margin-bottom:40px; }
  .question-heading { grid-template-columns:68px minmax(0,1fr); gap:24px 12px; margin-bottom:32px; }
  .question-step h1 { line-height:1; letter-spacing:-.03em; text-wrap:initial; }
  .choice-grid,.inline-fields,.upload-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .choice-card { min-height:152px; padding:20px; }
  .choice-card::after { top:20px; right:20px; }
  .choice-card strong { margin:24px 0 12px; }
  .check-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .check-card { min-height:80px; padding:16px; }
  .field { margin:24px 0; }
  .field input,.field textarea,.inline-fields input { font-size:25px; }
  .field textarea { min-height:160px; }
  .page-notice { padding:20px; }
  .upload-area { min-height:170px; padding:20px; }
  .domain-options { gap:12px; margin:24px 0; }
  .domain-options button { padding:20px; min-height:100px; }
  .onboarding-actions { flex-wrap:wrap; align-items:start; gap:12px; margin-top:32px; padding-top:24px; }
  .back-button { width:120px; }
  .onboarding-actions > div { display:contents; }
  .continue-button.btn-icon-link { min-width:0; width:calc(100% - 132px); margin-left:auto; }
  .review-button { width:100%; order:3; }
  .key-hint { width:100%; order:4; font-size:14px; line-height:1.3; color:#777; }
  .review-card { grid-template-columns:minmax(0,1fr) 44px; gap:12px; padding:24px 0; }
  .review-card h3 { grid-column:1; }
  .review-card p { grid-column:1; grid-row:2; }
  .review-card button { grid-column:2; grid-row:1 / 3; min-height:44px; }
  .order-total { padding:20px; gap:12px; }
  .draft-preference { line-height:1.3; min-height:44px; }
  .reset-brief { min-height:44px; margin-top:12px; }
  .onboarding-body .site-legal-nav { padding:0 12px 24px; margin-top:0; }
  .success-content h1 { line-height:1; letter-spacing:-.03em; }
  .success-actions { flex-wrap:wrap; gap:16px; }
}
@media(max-width:374px) {
  .onboarding-body { --type-display:40px; }
}
