/* V4 repaired components. Existing Giftin palette, Outfit and illustrated assets.
   Marketing: variance 6, motion 3, density 4. Preserve the established light theme.
   Surfaces 16px, fields 10px, action pills. No new framework or asset dependency. */
.rb-page { --muted: #625970; background: #fff; }
.rb-page .wrap { max-width: 1200px; }
.rb-page .site-nav { background: #ffffffed; }
.rb-page .page-intro { padding: 130px 0 52px; }
.rb-page .page-intro h1 { max-width: 22ch; font-size: clamp(36px,4.5vw,62px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.rb-page .page-intro p { max-width: 65ch; font-size: 19px; }
.rb-tint { background: #faf7ff; }
.rb-jump-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-bottom: 36px; color: #6427b8; font-size: 15px; }
.rb-jump-nav a { text-decoration: underline; text-underline-offset: 4px; padding: 8px 0; }
.rb-tool-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 17px; }
.rb-tool-table th,.rb-tool-table td { padding: 22px; text-align: left; vertical-align: top; border-bottom: 1px solid #e4d8ef; }
.rb-tool-table thead th { background: #f3eafb; font-size: 20px; line-height: 1.3; }
.rb-tool-table thead th:first-child { width: 16%; font-size: 15px; }
.rb-tool-table th img { margin-bottom: 12px; }
.rb-tool-table tbody th { font-size: 15px; font-weight: 650; }
.rb-tool-table td { color: #574966; }
.rb-tool-table tbody tr:nth-child(even) { background: #fcfaff; }
.rb-process { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; list-style: none; padding: 0; counter-reset: process; }
.rb-process li { position: relative; counter-increment: process; padding-top: 48px; }
.rb-process li::before { content: counter(process); display: grid; place-items: center; position: absolute; top: 0; width: 32px; height: 32px; border-radius: 50%; background: #7132ca; color: #fff; font-weight: 700; }
.rb-process li:not(:last-child)::after { content: '→'; position: absolute; right: 0; top: -4px; color: #8f64b8; font-size: 26px; }
.rb-process strong { font-size: 19px; }
.rb-process p { color: #625970; margin-top: 8px; }
.rb-editorial-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; padding-top: 28px; border-top: 1px solid #e4d8ef; }
.rb-editorial-pair h3 { font-size: 18px; margin-bottom: 10px; }
.rb-editorial-pair p { max-width: 50ch; color: #574966; }
.rb-prose { max-width: 780px!important; font-size: 18px; }
.rb-prose h2 { font-size: clamp(28px,3vw,36px); line-height: 1.2; letter-spacing: -.025em; margin: 52px 0 18px; text-wrap: balance; }
.rb-prose h2:first-child { margin-top: 0; }
.rb-prose p { color: #625970; margin: 14px 0; }
.rb-prose ul,.rb-checklist { padding-left: 24px; }
.rb-prose li { margin: 12px 0; }
.rb-followups { margin: 32px 0; }
.rb-followups h3 { font-size: 21px; }
.rb-page .copy-block { box-shadow: none; border-radius: 12px; }
.rb-page .copy-block pre { font: inherit; white-space: pre-wrap; }
.rb-examples .case-section { padding: 40px 0 64px; }
.rb-examples .section-head { max-width: 760px; }
.rb-examples .example-jumps { margin: 28px 0 0; }
.rb-example-list { display: block; }
.rb-example { padding: 64px 0; border-bottom: 1px solid #e4d8ef; }
.rb-example:last-child { border-bottom: 0; }
.rb-example-topic { color: #7132ca; font-size: 16px; font-weight: 650; margin-bottom: 10px; }
.rb-example h2 { max-width: 30ch; font-size: clamp(28px,3vw,38px); line-height: 1.17; letter-spacing: -.025em; text-wrap: balance; margin-bottom: 22px; }
.rb-example-body>p { max-width: 70ch; color: #625970; margin: 14px 0; font-size: 18px; }
.rb-example-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 28px 0; }
.rb-example-option { display: flex; flex-direction: column; min-width: 0; }
.rb-example-option>p { font-size: 21px; margin-bottom: 14px; }
.rb-example .copy-block { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin: 0; padding: 24px; background: #f6f0fd; border: 0; box-shadow: none; border-radius: 16px; height: auto; }
.rb-example-option>.copy-block { flex: 1; }
.rb-example .copy-block pre { padding: 0; background: none; color: #40314e; font-family: inherit; font-size: 17px; line-height: 1.65; max-height: none; overflow: visible; }
.rb-example .copy-block button { position: static; margin-top: auto; min-height: 44px; border: 1px solid #cab2e2; box-shadow: none; background: #fff; color: #5b298e; font-size: 14px; }
.rb-example .constraint-row { display: flex; flex-wrap: wrap; gap: 8px 28px; background: none; padding: 14px 0; margin: 0; border: 0; border-radius: 0; color: #625970; font-size: 15px; }
.rb-example .constraint-row span { background: none; border: 0; padding: 0; border-radius: 0; }
.rb-example-body>.copy-block { max-width: 820px; margin: 24px 0; }
.rb-boundary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 22px 0; color: #553467; }
.rb-history { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin: 28px 0; padding: 0; }
.rb-history li { border-top: 2px solid #d9c1f1; padding-top: 14px; }
.rb-history strong,.rb-history span { display: block; }
.rb-history span { margin-top: 6px; color: #625970; }
.rb-known-facts { font-size: 22px!important; color: #342448!important; }
.rb-editorial .article-layout,.rb-editorial .guide-layout { display: block; }
.rb-editorial .article-main,.rb-editorial .guide-prose { max-width: none; min-width: 0; }
.rb-editorial .direct-answer,.rb-editorial .guide-answer { max-width: 780px; border: 0; border-radius: 12px; background: #f6f0fd; box-shadow: none; }
.rb-editorial .article-main>p,.rb-editorial .guide-prose>p,.rb-editorial article>ul,.rb-editorial article>blockquote,.rb-editorial article>.copy-block,.rb-editorial article>.copyable-guide-prompt { max-width: 780px; }
.rb-editorial article>h2 { max-width: 780px; font-size: clamp(28px,3vw,36px); line-height: 1.2; margin: 44px 0 18px; letter-spacing: -.025em; text-wrap: balance; }
.rb-editorial article>p { font-size: 18px; line-height: 1.7; }
.rb-editorial .guide-hero-copy h1 { font-size: clamp(36px,3.7vw,52px); line-height: 1.1; letter-spacing: -.03em; }
.rb-editorial .inner-hero,.rb-editorial .inner-hero-copy { min-height: 0; }
.rb-editorial .inner-hero-copy { padding: 130px 0 64px; }
.rb-editorial .inner-hero h1 { font-size: clamp(36px,4.2vw,60px); line-height: 1.1; letter-spacing: -.03em; max-width: 22ch; }
.rb-editorial .inner-hero p { max-width: 58ch; }
.rb-editorial .article-section,.rb-editorial .guide-article { padding: 44px 0 64px; }
.rb-editorial .copy-block { background: #f6f0fd; border: 0; padding: 24px; margin: 24px 0; }
.rb-editorial .copy-block pre { padding: 0; font-size: 17px; line-height: 1.65; color: #40314e; }
.rb-editorial .copy-block button { position: static; box-shadow: none; margin-top: 18px; }
.rb-editorial .copyable-guide-prompt { background: #f6f0fd; border: 0; border-radius: 16px; box-shadow: none; }
.rb-editorial .copyable-guide-prompt>p { white-space: pre-wrap; font: 17px/1.65 var(--font); }
.rb-editorial .guide-prose blockquote { border: 0; border-radius: 12px; background: #f6f0fd; padding: 20px 24px; }
.rb-contents { max-width: 780px; margin-bottom: 32px; border-bottom: 1px solid #e4d8ef; padding: 0 0 16px; }
.rb-contents summary { cursor: pointer; padding: 12px 0; font-weight: 650; }
.rb-contents nav { display: flex; flex-wrap: wrap; gap: 10px 22px; background: none; padding: 12px 0; border: 0; box-shadow: none; }
.rb-contents a { color: #6427b8; font-size: 15px; }
.rb-recipient-plan { margin: 32px 0 44px; }
.rb-plan-header { padding: 24px; background: #f3eafb; }
.rb-plan-header h2 { font-size: 28px; margin: 0 0 10px; line-height: 1.2; }
.rb-plan-header p { margin: 0; font-size: 17px; }
.rb-recipient-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 17px; }
.rb-recipient-table th,.rb-recipient-table td { text-align: left; vertical-align: top; padding: 20px; border-bottom: 1px solid #e4d8ef; }
.rb-recipient-table thead th { font-size: 15px; color: #5b4870; background: #fcfaff; }
.rb-recipient-table th:nth-child(2) { width: 12%; }
.rb-recipient-table tbody th img { width: 40px; height: 40px; margin-bottom: 8px; }
.rb-recipient-table td { color: #625970; }
.rb-boundary-panels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 28px 0 44px; }
.rb-boundary-panels section { padding: 24px; border-radius: 16px; background: #f6f0fd; }
.rb-boundary-panels section:nth-child(2) { background: #faf8fc; }
.rb-boundary-panels section:last-child { background: #fff2f8; }
.rb-boundary-panels h3 { font-size: 24px; margin: 14px 0 10px; }
.rb-boundary-panels p { font-size: 16px; color: #625970; }
.rb-boundary-panels ul { padding-left: 20px; font-size: 16px; }
.rb-boundary-panels li { margin: 10px 0; }
.rb-decision { display: grid; grid-template-columns: 1fr 32px 1fr; gap: 24px; max-width: 880px; padding: 26px 0; }
.rb-decision p { font-size: 17px; color: #625970; margin-top: 8px; }
@media(max-width:900px) {
  .rb-editorial .inner-hero-copy { padding: 112px 0 48px; }
  .rb-boundary-panels { grid-template-columns: 1fr; gap: 16px; }
  .rb-recipient-table,.rb-recipient-table tbody { display: block; }
  .rb-recipient-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rb-recipient-table tr { display: block; padding: 12px 0 24px; border-bottom: 1px solid #e4d8ef; }
  .rb-recipient-table tbody th { display: flex; align-items: center; gap: 12px; border: 0; padding: 12px 0; }
  .rb-recipient-table tbody th img { margin: 0; }
  .rb-recipient-table td { display: grid; grid-template-columns: 85px 1fr; gap: 14px; border: 0; padding: 8px 0; }
  .rb-recipient-table td::before { content: attr(data-label); color: #342448; font-size: 15px; font-weight: 650; }
  .rb-decision { grid-template-columns: 1fr; gap: 16px; }
  .rb-decision>span { display: none; }
}

/* Guide hub: problem-led index rather than a feature-heavy landing page. */
.rb-hub-hero { padding: 126px 0 44px; background: #faf7ff; }
.rb-hub-intro { display: grid; grid-template-columns: 1fr 420px; align-items: center; gap: 54px; margin-top: 24px; }
.rb-hub-intro h1 { font-size: clamp(42px,5vw,68px); line-height: 1.04; letter-spacing: -.03em; max-width: 14ch; }
.rb-hub-intro p { max-width: 52ch; margin-top: 20px; color: #625970; font-size: 20px; }
.rb-hub-intro img { width: 420px; height: 236px; object-fit: cover; border-radius: 16px; }
.rb-hub-groups { padding: 60px 0 76px; }
.rb-hub-groups>.wrap { display: grid; gap: 68px; }
.rb-hub-group-head { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; }
.rb-hub-group-head h2 { font-size: 30px; line-height: 1.15; }
.rb-hub-group-head p { color: #625970; margin-top: 5px; }
.rb-hub-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; }
.rb-hub-links a { display: block; padding: 22px 0; border-bottom: 1px solid #e4d8ef; }
.rb-hub-links strong,.rb-hub-links span { display: block; }
.rb-hub-links strong { font-size: 19px; font-weight: 650; }
.rb-hub-links span { position: relative; padding-right: 28px; margin-top: 6px; color: #625970; }
.rb-hub-links b { position: absolute; right: 0; color: #7132ca; }
.rb-hub-links a:hover strong { color: #7132ca; }

/* Debugger: a visible symptom index followed by focused repair prompts. */
.rb-debugger .guide-prose { max-width: 100%; }
.rb-debugger .guide-prose>p,.rb-debugger .guide-prose>h2,.rb-debugger .guide-prose>.copyable-guide-prompt,.rb-debugger .guide-prose>blockquote,.rb-debugger .guide-prose>ul { margin-left: auto; margin-right: auto; }
.rb-diagnosis { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin: 0 0 54px; }
.rb-diagnosis a { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 20px 0; border-bottom: 1px solid #e4d8ef; }
.rb-diagnosis span { font-size: 18px; font-weight: 650; }
.rb-diagnosis small { color: #625970; font-size: 15px; }
.rb-diagnosis b { grid-column: 2; grid-row: 1/3; align-self: center; color: #7132ca; }
.rb-debugger .guide-prose>h2[id^="failure-"] { padding-top: 18px; }
.rb-debugger .copyable-guide-prompt { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; padding: 24px; }
.rb-debugger .copyable-guide-prompt .copy-button { position: static; min-height: 44px; }

/* Last-minute feasibility is a three-way decision, not another bullet list. */
.rb-tomorrow .guide-prose { max-width: 100%; }
.rb-tomorrow .guide-prose>p,.rb-tomorrow .guide-prose>h2,.rb-tomorrow .guide-prose>.copyable-guide-prompt,.rb-tomorrow .guide-prose>ul { margin-left: auto; margin-right: auto; }
.rb-deadline-map { margin: 44px 0 56px; }
.rb-deadline-map>h2 { font-size: clamp(28px,3vw,38px); margin-bottom: 24px; letter-spacing: -.025em; }
.rb-deadline-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.rb-deadline-columns>div { padding: 24px; border-radius: 16px; background: #f2eafb; }
.rb-deadline-columns>div:nth-child(2) { background: #fff2f8; }
.rb-deadline-columns>div:nth-child(3) { background: #faf8fc; }
.rb-deadline-columns h3 { font-size: 22px; margin: 14px 0 10px; }
.rb-deadline-columns ul { padding-left: 20px; }
.rb-deadline-columns li { margin: 9px 0; color: #554766; }
.rb-now-later { display: grid; grid-template-columns: 1fr 36px 1fr; align-items: center; gap: 20px; max-width: 780px; margin: 24px auto 30px; padding: 24px; background: #f6f0fd; border-radius: 16px; }
.rb-now-later strong,.rb-now-later span { display: block; }
.rb-now-later strong { font-size: 19px; }
.rb-now-later span { color: #625970; margin-top: 6px; }
.rb-now-later i { color: #7132ca; font-size: 28px; font-style: normal; }

@media(max-width:900px) {
  .rb-hub-intro { grid-template-columns: 1fr; gap: 30px; }
  .rb-hub-intro img { width: 100%; height: auto; }
  .rb-hub-links { grid-template-columns: 1fr; }
  .rb-diagnosis { grid-template-columns: 1fr; }
  .rb-deadline-columns { grid-template-columns: 1fr; }
  .rb-debugger .copyable-guide-prompt { grid-template-columns: 1fr; }
  .rb-now-later { grid-template-columns: 1fr; }
  .rb-now-later i { transform: rotate(90deg); }
}

/* Editorial guide index and long-form reading layout. */
.rb-hub-hero { padding: clamp(112px,10vw,148px) 0 clamp(52px,6vw,84px); background: #faf7ff; }
.rb-hub-masthead { display: grid; grid-template-columns: minmax(260px,.74fr) minmax(0,1.45fr); gap: clamp(38px,6vw,84px); align-items: end; margin-top: 28px; }
.rb-hub-masthead > div { align-self: center; }
.rb-hub-masthead h1 { max-width: 11ch; font-size: clamp(44px,5vw,68px); line-height: 1.02; letter-spacing: -.035em; }
.rb-hub-masthead > div > p { max-width: 34ch; margin-top: 20px; color: #625970; font-size: 19px; line-height: 1.62; }
.rb-hub-feature { display: grid; grid-template-columns: minmax(0,.88fr) minmax(300px,1.12fr); min-height: 390px; overflow: hidden; border-radius: 16px; background: #26163b; color: #fff; }
.rb-hub-feature-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px,3.2vw,46px); }
.rb-hub-feature-copy > span { color: #d8c3f2; font-size: 14px; font-weight: 650; }
.rb-hub-feature-copy h2 { margin-top: 18px; color: #fff; font-size: clamp(28px,2.8vw,40px); line-height: 1.08; letter-spacing: -.03em; }
.rb-hub-feature-copy p { margin-top: 16px; color: #ded4e8; line-height: 1.6; }
.rb-hub-feature-copy b { margin-top: 28px; font-size: 15px; }
.rb-hub-feature-copy i { margin-left: 10px; font-style: normal; }
.rb-hub-feature img { width: 100%; height: 100%; object-fit: cover; }
.rb-hub-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 30px; padding-bottom: 30px; }
.rb-hub-filters a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; color: #5c5068; font-size: 14px; font-weight: 600; }
.rb-hub-filters a:first-child,.rb-hub-filters a:hover,.rb-hub-filters a:focus-visible { background: #f0e8f8; color: #4f237e; }
.rb-hub-library { padding: 30px 0 clamp(72px,8vw,112px); }
.rb-hub-library-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 34px; }
.rb-hub-library-head h2 { font-size: clamp(30px,3vw,42px); line-height: 1.1; }
.rb-hub-library-head p { margin-top: 8px; color: #625970; }
.rb-hub-library-head > a { color: #6427b8; font-weight: 650; }
.rb-hub-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(42px,5vw,68px) 34px; }
.rb-hub-card { display: grid; align-content: start; min-width: 0; scroll-margin-top: 110px; }
.rb-hub-card img { width: 100%; aspect-ratio: 1.78; object-fit: cover; border-radius: 14px; background: #f1eafa; }
.rb-hub-card > span { margin-top: 18px; color: #76518b; font-size: 13px; font-weight: 650; }
.rb-hub-card h3 { margin-top: 8px; max-width: 27ch; font-size: clamp(23px,2.1vw,31px); line-height: 1.13; letter-spacing: -.025em; transition: color 180ms ease-out; }
.rb-hub-card p { max-width: 54ch; margin-top: 9px; color: #625970; line-height: 1.58; }
.rb-hub-card:hover h3 { color: #6427b8; }
.rb-hub-card--wide { grid-column: 1 / -1; grid-template-columns: minmax(0,1.36fr) minmax(280px,.64fr); column-gap: 34px; align-items: center; padding-bottom: 4px; }
.rb-hub-card--wide img { grid-row: 1 / 5; aspect-ratio: 1.9; }
.rb-hub-card--wide > span { margin-top: 0; }
.rb-hub-card--wide h3 { font-size: clamp(30px,3vw,44px); }

.guide-detail .guide-page-hero { padding: clamp(108px,9vw,136px) 0 clamp(44px,5vw,64px); }
.guide-detail .guide-hero-inner { max-width: 1200px; grid-template-columns: minmax(0,1.02fr) minmax(360px,.98fr); gap: clamp(38px,6vw,78px); }
.guide-detail .guide-page-hero h1,.rb-editorial .guide-hero-copy h1 { max-width: 15ch; font-size: clamp(42px,4.5vw,62px); line-height: 1.04; letter-spacing: -.035em; }
.guide-detail .guide-deck { max-width: 46ch; font-size: 18px; }
.guide-detail .guide-hero-art img { aspect-ratio: 1.42; }
.guide-detail .guide-article,.rb-editorial .guide-article { padding: clamp(44px,5vw,68px) 0 clamp(76px,8vw,112px); }
.guide-detail .guide-layout,.rb-editorial .guide-layout,.guide-detail:has(.rb-hard-map) .guide-layout { display: grid; grid-template-columns: minmax(190px,230px) minmax(0,720px); gap: clamp(42px,6vw,86px); justify-content: center; align-items: start; }
.guide-detail .guide-prose,.rb-editorial .guide-prose,.guide-detail:has(.rb-hard-map) .guide-prose { grid-column: 2; max-width: 720px; width: 100%; }
.guide-detail .guide-aside,.rb-editorial .guide-aside,.guide-detail:has(.rb-hard-map) .guide-aside { grid-column: 1; grid-row: 1; display: flex; position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow: auto; padding: 0 0 12px; }
.guide-detail .guide-toc { padding-top: 2px; }
.guide-detail .guide-toc h2 { font-size: 14px; color: #342448; }
.guide-detail .guide-toc a { position: relative; padding: 7px 0 7px 15px; color: #6b6074; }
.guide-detail .guide-toc a::before { content: ''; position: absolute; left: 0; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: #cab3df; }
.guide-detail .guide-takeaway,.guide-detail .guide-next,.guide-detail .guide-try { display: none; }
.guide-detail .guide-answer,.rb-editorial .guide-answer { max-width: 720px; margin-bottom: 48px; padding: 24px 28px; }
.guide-detail .guide-prose > p,.rb-editorial .guide-prose > p,.guide-detail .guide-prose section > p,.guide-detail .guide-prose li { max-width: 68ch; font-size: 17px; line-height: 1.76; }
.guide-detail .guide-prose > section,.guide-detail .guide-prose section { margin-bottom: 52px; }
.guide-detail .guide-prose h2,.rb-editorial article > h2 { margin: 52px 0 18px; font-size: clamp(28px,2.6vw,36px); line-height: 1.16; }
.guide-detail .guide-prose h2:first-child { margin-top: 0; }

@media(max-width:980px) {
  .rb-hub-masthead { grid-template-columns: 1fr; }
  .rb-hub-masthead h1 { max-width: 15ch; }
  .rb-hub-masthead > div > p { max-width: 56ch; }
  .guide-detail .guide-layout,.rb-editorial .guide-layout,.guide-detail:has(.rb-hard-map) .guide-layout { grid-template-columns: minmax(170px,210px) minmax(0,1fr); gap: 34px; }
  .guide-detail .guide-hero-inner { grid-template-columns: 1.08fr .92fr; gap: 32px; }
}
@media(max-width:760px) {
  .rb-hub-hero { padding-top: 104px; }
  .rb-hub-masthead { margin-top: 18px; gap: 32px; }
  .rb-hub-masthead h1 { font-size: clamp(40px,12vw,54px); }
  .rb-hub-feature { grid-template-columns: 1fr; }
  .rb-hub-feature-copy { order: 2; }
  .rb-hub-feature img { max-height: 290px; aspect-ratio: 1.7; }
  .rb-hub-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .rb-hub-filters::-webkit-scrollbar { display: none; }
  .rb-hub-filters a { flex: 0 0 auto; }
  .rb-hub-library-head { display: block; }
  .rb-hub-library-head > a { display: inline-block; margin-top: 16px; }
  .rb-hub-card-grid { grid-template-columns: 1fr; gap: 44px; }
  .rb-hub-card--wide { grid-column: auto; display: grid; grid-template-columns: 1fr; gap: 0; }
  .rb-hub-card--wide img { grid-row: auto; }
  .rb-hub-card--wide > span { margin-top: 18px; }
  .rb-hub-card h3,.rb-hub-card--wide h3 { font-size: clamp(25px,7.5vw,32px); }
  .guide-detail .guide-hero-inner { grid-template-columns: 1fr; }
  .guide-detail .guide-page-hero h1,.rb-editorial .guide-hero-copy h1 { max-width: 18ch; font-size: clamp(36px,10vw,48px); }
  .guide-detail .guide-hero-art img { aspect-ratio: 1.55; }
  .guide-detail .guide-layout,.rb-editorial .guide-layout,.guide-detail:has(.rb-hard-map) .guide-layout { display: flex; flex-direction: column; gap: 28px; }
  .guide-detail .guide-prose,.rb-editorial .guide-prose,.guide-detail:has(.rb-hard-map) .guide-prose { order: 2; max-width: none; }
  .guide-detail .guide-aside,.rb-editorial .guide-aside,.guide-detail:has(.rb-hard-map) .guide-aside { order: 1; display: block; position: static; width: 100%; max-height: none; overflow: visible; }
  .guide-detail .guide-toc { padding: 16px 20px; border: 1px solid #e4d8ef; border-radius: 12px; }
  .guide-detail .guide-toc h2 { margin-bottom: 6px; }
  .guide-detail .guide-toc a { padding-top: 6px; padding-bottom: 6px; }
  .guide-detail .guide-answer,.rb-editorial .guide-answer { margin-bottom: 38px; padding: 22px; }
}
@media(prefers-reduced-motion:reduce) {
  .rb-hub-card h3 { transition: none; }
}

/* Birthday prompt: put the usable prompt first, then scan the four birthday-specific clues. */
.birthday-hero.inner-hero { min-height: 0; background-position: center 42%; }
.birthday-hero .inner-veil { background: linear-gradient(90deg,#fff9fff2 0%,#fff9ffb8 52%,#fff9ff2e 100%); }
.birthday-hero .inner-hero-copy { min-height: 0; padding: 132px 0 68px; }
.birthday-hero h1 { max-width: 18ch; font-size: clamp(38px,4.5vw,60px); line-height: 1.06; }
.birthday-hero .inner-hero-copy>p { max-width: 48ch; font-size: 19px; }
.birthday-hero+.article-section .article-layout { display: block; }
.birthday-hero+.article-section .article-main { max-width: none; }
.birthday-hero+.article-section .article-main>p,.birthday-hero+.article-section .article-main>h2,.birthday-hero+.article-section .article-main>ul,.birthday-hero+.article-section .article-main>.copy-block,.birthday-hero+.article-section .article-main>.brief-compare,.birthday-hero+.article-section .article-main>.direct-answer { max-width: 780px; }
.birthday-hero+.article-section .article-aside { display: none; }
.birthday-hero+.article-section .article-main>h2 { margin-top: 48px; font-size: clamp(28px,3vw,36px); line-height: 1.2; }
.birthday-hero+.article-section .article-main>p { font-size: 18px; line-height: 1.7; color: #625970; }
.birthday-hero+.article-section .copy-block { background: #f6f0fd; border: 0; box-shadow: none; border-radius: 16px; }
.birthday-hero+.article-section .copy-block pre { white-space: pre-wrap; font: 17px/1.65 var(--font); }
.birthday-hero+.article-section .brief-compare { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 24px; align-items: stretch; max-width: 100%; margin: 26px 0; }
.birthday-hero+.article-section .brief-compare>div { width: auto; min-width: 0; margin: 0; padding: 24px; border-radius: 16px; }
.birthday-hero+.article-section .brief-compare>div:first-child { background: #faf8fc; border: 1px solid #e4d8ef; }
.birthday-hero+.article-section .brief-compare p { margin: 8px 0 0; font-size: 17px; line-height: 1.55; }
.rb-birthday-cues { margin: 50px 0 60px; }
.rb-birthday-cues>h2 { font-size: clamp(28px,3vw,38px); margin-bottom: 24px; letter-spacing: -.025em; }
.rb-cue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 42px; }
.rb-cue-grid>div { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding: 24px 0; border-top: 1px solid #e4d8ef; }
.rb-cue-grid img { grid-row: 1/3; }
.rb-cue-grid h3 { font-size: 21px; margin: 0 0 6px; }
.rb-cue-grid p { color: #625970; }
.rb-cue-grid a { color: #6427b8; text-decoration: underline; text-underline-offset: 3px; }

/* “Has everything”: a diagnostic matrix before the detailed explanations. */
.rb-hard-map { margin: 42px 0 56px; }
.rb-hard-map>h2 { font-size: clamp(28px,3vw,38px); margin-bottom: 18px; letter-spacing: -.025em; }
.rb-hard-rows { border-top: 1px solid #e4d8ef; }
.rb-hard-rows>div { display: grid; grid-template-columns: 48px 160px 1fr 220px; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid #e4d8ef; }
.rb-hard-rows strong { font-size: 18px; }
.rb-hard-rows span { color: #625970; }
.rb-hard-rows b { color: #6427b8; font-size: 15px; }
.guide-detail:has(.rb-hard-map) .guide-layout { display: block; }
.guide-detail:has(.rb-hard-map) .guide-prose { max-width: none; }
.guide-detail:has(.rb-hard-map) .guide-aside { display: none; }
.guide-detail:has(.rb-hard-map) .guide-prose>p,.guide-detail:has(.rb-hard-map) .guide-prose>h2,.guide-detail:has(.rb-hard-map) .guide-prose>blockquote,.guide-detail:has(.rb-hard-map) .guide-prose>.copyable-guide-prompt { max-width: 780px; }
.guide-detail:has(.rb-hard-map) .guide-prose>h2 { font-size: clamp(28px,3vw,36px); }

@media(max-width:900px) {
  .birthday-hero .inner-hero-copy { padding: 112px 0 48px; }
  .birthday-hero .inner-veil { background: #fff9ffe8; }
  .rb-cue-grid { grid-template-columns: 1fr; }
  .birthday-hero+.article-section .brief-compare { grid-template-columns: 1fr; }
  .rb-hard-rows>div { grid-template-columns: 48px 1fr; align-items: start; }
  .rb-hard-rows img { grid-row: 1/4; }
  .rb-hard-rows span,.rb-hard-rows b { grid-column: 2; }
}
@media(max-width:900px) {
  .rb-example { padding: 40px 0; }
  .rb-example-pair { grid-template-columns: 1fr; gap: 24px; }
  .rb-example .copy-block { padding: 20px; }
  .rb-history { grid-template-columns: 1fr; gap: 16px; }
}
@media(max-width:900px) {
  .rb-page .page-intro { padding: 110px 0 32px; }
  .rb-tool-table,.rb-tool-table tbody { display: block; }
  .rb-tool-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rb-tool-table tr { display: block; margin-bottom: 26px; }
  .rb-tool-table tbody th { display: block; background: #f3eafb; font-size: 18px; padding: 14px 18px; }
  .rb-tool-table td { display: block; padding: 14px 18px; }
  .rb-tool-table td::before { content: attr(data-label); display: block; color: #342448; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
  .rb-process { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .rb-editorial-pair { grid-template-columns: 1fr; gap: 24px; }
}
.home-v4 { --muted: #625970; background: #fff; }
.home-v4 .wrap { max-width: 1200px; }
.home-v4 h1,.home-v4 h2,.home-v4 h3 { letter-spacing: -.03em; text-wrap: balance; }
.home-v4 .site-nav { background: #ffffffed; }
.home-v4 a:focus-visible,.home-v4 button:focus-visible,.home-v4 input:focus-visible,.home-v4 select:focus-visible,.home-v4 textarea:focus-visible { outline: 3px solid #7c3aed; outline-offset: 4px; }
.rb-hero { position: relative; isolation: isolate; padding: 142px 0 64px; overflow: hidden; }
.rb-hero-sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rb-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#fff9ffed,#fff9ff65 70%),linear-gradient(0deg,#fff,transparent 30%); }
.rb-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 64px; }
.rb-kicker { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #6832a0; margin-bottom: 20px; }
.rb-hero h1 { font-size: clamp(44px,5.3vw,76px); line-height: 1.04; font-weight: 850; }
.rb-hero h1 span { color: #b12ba6; }
.rb-lede { margin-top: 24px; font-size: 20px; line-height: 1.6; max-width: 48ch; color: #554766; }
.rb-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; margin-top: 30px; }
.rb-primary { display: inline-flex; gap: 14px; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 999px; background: #7132ca; color: white; font-weight: 700; font-size: 16px; line-height: 1.4; transition: background .16s,transform .16s; }
.rb-primary:hover { background: #5822aa; transform: translateY(-2px); }
.rb-primary:active { transform: translateY(0); }
.rb-text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #6427b8; font-weight: 650; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #d6bdf6; }
.rb-text-link:hover { text-decoration-color: currentColor; }
.rb-brief-preview { padding: 28px; background: #fff; border-radius: 16px; box-shadow: 0 18px 55px #4a245719; }
.rb-person { display: flex; align-items: center; gap: 14px; }
.rb-person img { width: 56px; height: 56px; object-fit: contain; }
.rb-person strong,.rb-person span { display: block; }
.rb-person strong { font-size: 20px; }
.rb-person span { color: var(--muted); font-size: 14px; }
.rb-clues { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; padding: 0; }
.rb-clues li { background: #f5edff; color: #5c357b; font-size: 14px; border-radius: 999px; padding: 6px 12px; }
.rb-preview-direction { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #635474; }
.rb-brief-preview blockquote { margin: 16px 0 20px; font-size: 18px; line-height: 1.65; }
.rb-brief-preview figcaption { display: flex; align-items: center; gap: 10px; border-top: 1px solid #e7def3; padding-top: 16px; color: #655773; font-size: 14px; }
.rb-flow { display: flex; align-items: center; justify-content: center; gap: 36px; padding: 24px 0 48px; }
.rb-flow span { color: var(--muted); font-size: 14px; }
.rb-flow b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 3px; }
.rb-flow i { font-size: 26px; color: #a383c3; font-style: normal; }
.rb-section-heading { margin-bottom: 36px; }
.rb-section-heading h2,.rb-repair-intro h2,.rb-routes h2 { font-size: clamp(28px,3.2vw,40px); line-height: 1.15; }
.rb-section-heading p,.rb-repair-intro p { max-width: 65ch; font-size: 18px; color: var(--muted); margin-top: 14px; }
.rb-builder { padding: 64px 0 32px; background: #faf7ff; overflow: visible; }
.rb-builder::after { display: none; }
.rb-builder .builder-shell { background: none; border: 0; box-shadow: none; backdrop-filter: none; border-radius: 0; padding: 0; }
.rb-builder .builder { margin-top: 0; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 48px; }
.rb-builder .builder-form { display: flex; flex-direction: column; gap: 28px; }
.rb-field-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; min-width: 0; margin: 0; padding: 0 0 28px; border: 0; border-bottom: 1px solid #e4d8ef; }
.rb-field-group:last-child { border-bottom: 0; padding-bottom: 0; }
.rb-field-group legend { padding: 0 0 18px; font-size: 21px; font-weight: 700; width: 100%; }
.rb-field-group legend img { display: inline-block; vertical-align: middle; margin-right: 8px; width: 32px; height: 32px; object-fit: contain; }
.rb-builder .bstep>label::before { display: none; }
.rb-builder .builder-form .bfield label { font-size: 15px; font-weight: 600; }
.rb-builder .builder-form input,.rb-builder .builder-form select,.rb-builder .builder-form textarea { font-size: 16px; border-radius: 10px; background: #fff; }
.rb-builder .builder-form input::placeholder,.rb-builder .builder-form textarea::placeholder { color: #766b81; }
.rb-builder .builder-form .sr-only-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.rb-builder .budget-row select { width: 92px; flex: 0 0 92px; padding: 10px; }
.rb-builder .builder-form .quick-picks { margin-top: 0; }
.rb-builder .builder-form .qchip { font-size: 13px; min-height: 44px; }
.rb-builder .field-label-row { display: flex; align-items: center; gap: 12px; margin-bottom: .4rem; }
.rb-builder .field-label-row label { margin: 0; }
.rb-builder .field-label-row .link-btn { min-height: 44px; }
.rb-builder .builder-form .ochip { min-height: 44px; font-size: 14px; }
.rb-builder .builder-form textarea { min-height: 102px; }
.rb-builder .bfield:has(#detail) { grid-column: 1/-1; }
.rb-builder .opt-tag { color: #6c5f78; }
.rb-builder .builder-output { top: 94px; padding: 26px; border: 1px solid #dacbec; border-radius: 16px; box-shadow: none; background: #fff; }
.rb-builder .builder-output .output-title { font-size: 25px; margin: 0; }
.rb-builder .builder-output-top { margin-top: 14px; }
.rb-builder .builder-mascot { width: 56px; }
.rb-builder .prompt-text { padding: 20px 0; border: 0; border-radius: 0; background: none; font-size: 16px; line-height: 1.65; max-height: 440px; overflow: auto; color: #453952; }
.rb-builder .profile-recap { padding: 0 0 20px; margin-bottom: 20px; border: 0; border-bottom: 1px solid #e7def3; border-radius: 0; background: none; box-shadow: none; }
.rb-builder .recap-facts { display: none; }
.rb-builder .builder-actions { flex-direction: column; align-items: flex-start; gap: 10px; }
.rb-builder .builder-actions .rb-primary { width: 100%; }
.rb-builder .open-note { color: #625970; font-size: 14px; line-height: 1.5; }
.rb-builder .handoff { flex-wrap: wrap; gap: 8px; }
.rb-builder .handoff-label { width: 100%; font-size: 13px; color: #625970; }
.rb-builder .handoff-btn { background: #fff; color: #342448; border: 1px solid #d8c9e7; min-height: 44px; box-shadow: none; font-size: 14px; }
.rb-copy-status { color: #58358a; font-size: 14px; }
.rb-copy-status:empty { display: none; }
.rb-builder .builder-foot { padding-top: 24px; }
.rb-app { position: relative; isolation: isolate; overflow: hidden; padding: 58px 20px; background: linear-gradient(135deg,#f8f1ff 0%,#fff5fb 56%,#f0ebff 100%); }
.rb-app::before,.rb-app::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); }
.rb-app::before { width: 280px; height: 280px; left: -110px; top: -170px; background: #debdff66; }
.rb-app::after { width: 240px; height: 240px; right: -80px; bottom: -160px; background: #ffb8de55; }
.rb-app-inner { display: grid; grid-template-columns: 92px minmax(0,1fr) auto; gap: 26px; align-items: center; max-width: 1040px!important; padding: 28px 30px; border-radius: 16px; background: #fffffff0; box-shadow: 0 8px 18px #4a24571f; }
.rb-app-inner>img { width: 92px; height: 92px; border-radius: 16px; object-fit: cover; box-shadow: 0 8px 16px #542a7c24; }
.rb-app h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.rb-app p { font-size: 15px; line-height: 1.55; color: #625370; margin-top: 8px; max-width: 58ch; }
.rb-app p a { text-decoration: underline; text-underline-offset: 3px; }
.rb-app .store-row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 0; }
.rb-app .store-button { width: 190px; min-height: 60px; padding: .68rem 1rem; gap: .7rem; box-shadow: 0 8px 18px #1d14252b; }
.rb-app .store-button svg { width: 28px; height: 28px; }
.rb-app .store-button small { font-size: .68rem; white-space: nowrap; }
.rb-app .store-button strong { font-size: 1.05rem; white-space: nowrap; }
.rb-section { padding: 80px 0; }
.rb-proof { background: #fff; }
.rb-comparison { display: grid; grid-template-columns: .72fr 40px 1.28fr; gap: 20px; align-items: start; }
.rb-comparison h3 { font-size: 17px; font-weight: 700; margin-bottom: 16px; }
.rb-comparison p { font-size: 18px; line-height: 1.65; }
.rb-prompt-before { padding: 24px 0; }
.rb-prompt-before .rb-explain { font-size: 15px; color: var(--muted); margin-top: 18px; max-width: 30ch; }
.rb-prompt-before img { width: 100px; height: 90px; object-fit: contain; margin-top: 16px; }
.rb-compare-arrow { font-size: 32px; color: #9364ba; padding-top: 68px; }
.rb-prompt-after { background: #f6efff; border-radius: 16px; padding: 28px; }
.rb-prompt-after p+p { margin-top: 16px; }
.rb-prompt-after mark { background: #e7d7fb; color: #45216c; border-radius: 3px; padding: 0 2px; }
.rb-reasoning { margin-top: 32px; border-top: 1px solid #e7def3; }
.rb-reasoning>div { display: grid; grid-template-columns: 32px minmax(0,1fr) 32px minmax(0,1.5fr); gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid #e7def3; }
.rb-reasoning strong { font-size: 16px; font-weight: 600; }
.rb-reasoning p { font-size: 16px; color: #625370; }
.rb-reasoning>div>span { color: #8955b1; }
.rb-caption { font-size: 14px; color: var(--muted); margin: 20px 0 12px; }
.rb-repair-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
.rb-repair-intro>img { width: 180px; height: 140px; object-fit: cover; border-radius: 16px; margin-bottom: 24px; }
.rb-repair-list a { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; border-bottom: 1px solid #e7def3; }
.rb-repair-list a:first-child { border-top: 1px solid #e7def3; }
.rb-repair-list strong { display: block; font-size: 19px; font-weight: 650; }
.rb-repair-list small { display: block; color: var(--muted); margin-top: 5px; font-size: 16px; }
.rb-repair-list a:hover strong { color: #7132ca; }
.rb-routes { background: #faf7ff; padding: 48px 0; }
.rb-routes h2 { font-size: 28px; }
.rb-route-links { display: flex; flex-wrap: wrap; gap: 20px 36px; margin-top: 24px; }
.rb-route-links a { display: flex; flex: 1 1 260px; align-items: center; gap: 12px; min-height: 56px; font-weight: 600; }
.rb-route-links b { margin-left: auto; color: #7132ca; }
.rb-footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
@media(max-width:1000px) {
  .rb-hero-grid { gap: 32px; }
  .rb-hero h1 { font-size: 54px; }
  .rb-brief-preview { padding: 22px; }
  .rb-builder .builder { gap: 28px; grid-template-columns: 1fr 1fr; }
  .rb-field-group { grid-template-columns: 1fr; }
  .rb-app-inner { grid-template-columns: 72px 1fr; }
  .rb-app-inner>img { width: 72px; height: 72px; border-radius: 16px; }
  .rb-app .store-row { grid-column: 1/-1; justify-content: flex-start; padding-left: 98px; }
  .rb-repair-layout { gap: 36px; }
}
@media(max-width:900px) {
  .home-v4 .wrap { width: calc(100% - 36px); }
  .rb-hero { padding: 112px 0 36px; }
  .rb-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .rb-hero h1 { font-size: clamp(38px,10.8vw,60px); }
  .rb-lede { font-size: 18px; margin-top: 20px; }
  .rb-kicker { font-size: 12px; margin-bottom: 16px; }
  .rb-actions { gap: 12px; margin-top: 24px; }
  .rb-actions .rb-primary { font-size: 15px; }
  .rb-brief-preview blockquote { font-size: 17px; }
  .rb-flow { justify-content: flex-start; flex-wrap: wrap; gap: 14px; padding: 12px 0 36px; }
  .rb-flow span { flex: 1 1 100%; display: flex; gap: 12px; align-items: baseline; }
  .rb-flow b { min-width: 130px; font-size: 16px; }
  .rb-flow i { display: none; }
  .rb-builder { padding: 44px 0 24px; }
  .rb-builder .builder { grid-template-columns: 1fr; gap: 32px; }
  .rb-section-heading { margin-bottom: 28px; }
  .rb-section-heading p { font-size: 17px; }
  .rb-builder .builder-shell { padding: 0; }
  .rb-field-group { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 14px; }
  .rb-builder .bfield:has(#timing),.rb-builder .bfield:has(#location),.rb-builder .bfield:has(textarea) { grid-column: 1/-1; }
  .rb-builder .builder-output { position: static; padding: 20px; }
  .rb-builder .prompt-text { max-height: none; }
  .rb-app { padding: 36px 16px; }
  .rb-app-inner { grid-template-columns: minmax(0,1fr); gap: 16px; padding: 22px; border-radius: 16px; }
  .rb-app-inner>img { width: 80px; height: 80px; border-radius: 16px; }
  .rb-app h2 { font-size: 21px; }
  .rb-app p { max-width: none; }
  .rb-app .store-row { grid-column: 1; padding-left: 0; display: grid; grid-template-columns: minmax(0,1fr); }
  .rb-app .store-button { width: 100%; min-width: 0; justify-content: center; }
  .rb-section { padding: 48px 0; }
  .rb-comparison { grid-template-columns: 1fr; gap: 12px; }
  .rb-prompt-before { padding: 0; }
  .rb-prompt-before img { display: none; }
  .rb-compare-arrow { padding: 0; transform: rotate(90deg); width: 32px; }
  .rb-prompt-after { padding: 22px; }
  .rb-reasoning>div { grid-template-columns: 32px 1fr; gap: 8px 14px; }
  .rb-reasoning>div>span { display: none; }
  .rb-reasoning p { grid-column: 2; }
  .rb-repair-layout { grid-template-columns: 1fr; gap: 28px; }
  .rb-repair-intro>img { width: 130px; height: 100px; }
  .rb-routes { padding: 36px 0; }
  .rb-footer-grid { grid-template-columns: 1fr 1fr; }
  .rb-footer-grid>.footer-col:first-child { grid-column: 1/-1; }
}
@media(prefers-reduced-motion:reduce) { html:has(.home-v4),html:has(.rb-page),.home-v4 *, .home-v4 *::before, .home-v4 *::after,.rb-page *,.rb-page *::before,.rb-page *::after { scroll-behavior: auto; transition: none; animation: none; } }

/* Keep every current guide on the same editorial reading grid. These rules sit
   after page-specific layouts so a wide comparison can break out inside the
   article without turning the entire article into a 1200px text column. */
.guide-detail .guide-layout,
.rb-editorial .guide-layout,
.guide-detail:has(.rb-hard-map) .guide-layout {
  display: grid;
  grid-template-columns: minmax(190px,230px) minmax(0,720px);
  gap: clamp(42px,6vw,86px);
  justify-content: center;
  align-items: start;
}
.guide-detail .guide-prose,
.rb-editorial .guide-prose,
.guide-detail:has(.rb-hard-map) .guide-prose {
  grid-column: 2;
  max-width: 720px;
  width: 100%;
}
.guide-detail .guide-aside,
.rb-editorial .guide-aside,
.guide-detail:has(.rb-hard-map) .guide-aside {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  position: sticky;
  top: 104px;
  max-height: calc(100vh - 128px);
  overflow: auto;
}
@media(max-width:980px) {
  .guide-detail .guide-layout,
  .rb-editorial .guide-layout,
  .guide-detail:has(.rb-hard-map) .guide-layout { grid-template-columns: minmax(170px,210px) minmax(0,1fr); gap: 34px; }
}
@media(max-width:760px) {
  .guide-detail .guide-layout,
  .rb-editorial .guide-layout,
  .guide-detail:has(.rb-hard-map) .guide-layout { display: flex; flex-direction: column; gap: 28px; }
  .guide-detail .guide-prose,
  .rb-editorial .guide-prose,
  .guide-detail:has(.rb-hard-map) .guide-prose { order: 2; max-width: none; }
  .guide-detail .guide-aside,
  .rb-editorial .guide-aside,
  .guide-detail:has(.rb-hard-map) .guide-aside { order: 1; display: block; position: static; width: 100%; max-height: none; overflow: visible; }
}

/* ==========================================================================
   v5: the live site's cinematic hero merged into the v4 builder-first home,
   the guide reading rail, bigger guide heroes and the hub feature card.
   Kept last so it settles the older layered rules above.
   ========================================================================== */

/* -- Home hero: the app scene carries the mood, the copy carries the task. -- */
.rb-hero--scene { display: flex; align-items: center; min-height: min(52vw, 820px); padding: 118px 0 88px; }
.rb-hero--scene .rb-hero-sky { object-position: 78% top; }
.rb-hero--scene::after {
  background:
    linear-gradient(90deg, #fffffff2 0%, #ffffffd9 28%, #ffffff70 46%, #fff0 62%),
    linear-gradient(0deg, #fff 0%, #fff0 22%);
}
.rb-hero--scene .rb-hero-grid { grid-template-columns: minmax(0, 620px); }
.rb-hero--scene .rb-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  padding: 9px 18px 9px 14px; border-radius: 999px; background: #1d1640; color: #fff;
  font-size: 13px; letter-spacing: .1em; box-shadow: 0 10px 24px #1d16402e;
}
.rb-hero--scene .rb-kicker > span { width: 8px; height: 8px; border-radius: 50%; background: #ff8a5c; box-shadow: 0 0 0 4px #ff8a5c33; }
.rb-hero--scene h1 { font-size: clamp(48px, 5.6vw, 84px); line-height: 1; letter-spacing: -.035em; }
.rb-hero--scene .rb-lede { max-width: 40ch; }
.rb-hero--scene h1 span { background: linear-gradient(90deg, #e2399a, #9c4ee6 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rb-hero--scene .rb-lede { color: #3f3552; }
.rb-hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 34px; color: #3f3552; font-weight: 600; font-size: 15px; }
.rb-faces { display: flex; flex: none; }
.rb-faces img { width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; background: #f6efff; object-fit: contain; box-shadow: 0 6px 14px #43286a1f; }
.rb-faces img + img { margin-left: -14px; }

/* Between tablet and desk the gift box sits right behind the copy column,
   so the veil reaches further in. */
@media (min-width: 901px) and (max-width: 1240px) {
  .rb-hero--scene::after { background: linear-gradient(90deg, #fffffff5 0%, #ffffffe6 38%, #ffffff99 56%, #fff0 74%), linear-gradient(0deg, #fff 0%, #fff0 22%); }
  .rb-hero--scene .rb-hero-copy { max-width: 540px; }
}
@media (max-width: 900px) {
  /* Stacked like the live app page: the whole scene on top, copy underneath.
     Anchored right so the phone never gets cut in half. */
  .rb-hero--scene { display: block; min-height: 0; padding: 68px 0 28px; }
  .rb-hero--scene .rb-hero-sky {
    position: relative; inset: auto; z-index: 0; display: block;
    height: clamp(290px, 76vw, 480px); object-position: 100% 42%;
    -webkit-mask-image: linear-gradient(180deg, #000 82%, #0000 100%);
    mask-image: linear-gradient(180deg, #000 82%, #0000 100%);
  }
  .rb-hero--scene::after { display: none; }
  .rb-hero--scene .rb-hero-grid { position: relative; z-index: 1; margin-top: -30px; }
  .rb-hero--scene .rb-kicker { font-size: 12px; margin-bottom: 20px; }
  .rb-hero--scene h1 { font-size: clamp(42px, 12.4vw, 64px); }
  .rb-hero--scene .rb-actions { flex-direction: column; align-items: flex-start; }
  .rb-hero--scene .rb-lede { max-width: 46ch; }
  .rb-hero--scene .rb-actions .rb-text-link { align-self: flex-start; }
  .rb-hero-proof { margin-top: 26px; font-size: 14px; }
  .rb-faces img { width: 44px; height: 44px; }
}

/* -- Guide article hero: one large image, no caption. -- */
.guide-detail .guide-page-hero { padding: clamp(104px, 8vw, 128px) 0 clamp(40px, 5vw, 64px); background: linear-gradient(180deg, #fbf8ff, #f5eefd); }
.guide-detail .guide-hero-inner { max-width: 1240px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.guide-detail .guide-hero-art { position: relative; margin: 0; }
.guide-detail .guide-hero-art img {
  display: block; width: 100%; aspect-ratio: 1.34; object-fit: cover; border-radius: 24px;
  box-shadow: 0 30px 70px #4a24572b, 0 0 0 1px #ffffffb3 inset;
}
.guide-detail .guide-hero-art::after { content: ''; position: absolute; inset: 0; border-radius: 24px; box-shadow: inset 0 0 0 1px #ffffff8c; pointer-events: none; }
.guide-detail .guide-hero-art img[src$="lego-porsche.webp"] { object-fit: contain; padding: 0; background: linear-gradient(135deg, #fff7dd, #f8f2ff); }

/* -- Guide reading rail: contents plus the builder, sticky beside the text. -- */
.guide-detail .guide-layout, .rb-editorial .guide-layout, .guide-detail:has(.rb-hard-map) .guide-layout {
  grid-template-columns: minmax(220px, 260px) minmax(0, 720px); gap: clamp(40px, 5vw, 80px);
}
.guide-detail .guide-aside.rb-rail { flex-direction: column; gap: 32px; max-height: none; overflow: visible; padding: 0; }
.rb-rail-toc { display: flex; flex-direction: column; }
.guide-detail .rb-rail-toc h2 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #76518b; }
.guide-detail .rb-rail-toc a { padding: 6px 0 6px 16px; font-size: 14px; line-height: 1.4; border-left: 2px solid #eadff5; color: #6b6074; transition: color .15s, border-color .15s; }
.guide-detail .rb-rail-toc a::before { display: none; }
.guide-detail .rb-rail-toc a:hover { color: #6427b8; }
.rb-rail-toc { max-height: calc(100vh - 470px); min-height: 180px; overflow-y: auto; scrollbar-width: thin; }
.guide-detail .rb-rail-toc a.is-current { color: #2a1d3d; font-weight: 650; border-left-color: #7132ca; }
.rb-rail-cta { display: block; padding-top: 28px; border-top: 1px solid #eadff5; }
.rb-rail-cta img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 14px 34px #4a24571f; transition: transform .25s; }
.rb-rail-cta strong { display: block; margin-top: 18px; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; color: #1d1640; }
.rb-rail-cta span { display: block; margin-top: 8px; color: #625970; font-size: 15px; line-height: 1.55; }
.rb-rail-cta b { display: inline-block; margin-top: 14px; color: #6427b8; font-size: 15px; }
.rb-rail-cta i { font-style: normal; display: inline-block; transition: transform .2s; }
.rb-rail-cta:hover img { transform: translateY(-3px); }
.rb-rail-cta:hover i { transform: translateX(4px); }
/* Keep the rail's height inside the viewport on short screens: the contents
   list gives way first, the builder block stays. */
@media (min-width: 761px) and (max-height: 820px) {
  .rb-rail-cta img { aspect-ratio: 16 / 9; }
}
@media (min-width: 761px) and (max-height: 700px) {
  .guide-detail .guide-aside.rb-rail { position: static; }
}
@media (max-width: 980px) {
  .guide-detail .guide-layout, .rb-editorial .guide-layout, .guide-detail:has(.rb-hard-map) .guide-layout { grid-template-columns: minmax(180px, 210px) minmax(0, 1fr); gap: 36px; }
  .guide-detail .guide-hero-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .guide-detail .guide-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .guide-detail .guide-page-hero { padding-top: 76px; }
  .guide-detail .guide-hero-art { order: -1; margin: 0 calc(50% - 50vw); }
  .guide-detail .guide-hero-art img, .guide-detail .guide-hero-art::after { border-radius: 0; box-shadow: none; }
  .guide-detail .guide-hero-art img { aspect-ratio: 1.5; }
  /* No sticky rail on phones: contents go above the text, the builder below. */
  .guide-detail .guide-aside.rb-rail { display: contents; }
  .guide-detail .rb-rail-toc { order: 1; max-height: none; padding: 16px 20px; border: 1px solid #e4d8ef; border-radius: 14px; }
  .guide-detail .rb-rail-toc a { border-left: 0; padding-left: 0; }
  .rb-rail-cta { order: 3; display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 24px 0 0; }
  .rb-rail-cta img { grid-row: 1 / 4; aspect-ratio: 1; }
  .rb-rail-cta strong { margin-top: 0; font-size: 20px; }
  .rb-rail-cta span { font-size: 14px; }
  .rb-rail-cta b { margin-top: 8px; }
}

/* -- Guides hub feature: one wide scene, copy on the dark side. -- */
.rb-hub-masthead { grid-template-columns: 1fr; gap: 40px; align-items: start; }
.rb-hub-masthead > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; }
.rb-hub-masthead h1 { max-width: 12ch; }
.rb-hub-masthead > div > p { max-width: 40ch; margin: 0 0 8px; }
.rb-hub-feature { position: relative; display: flex; align-items: center; min-height: clamp(380px, 36vw, 480px); isolation: isolate; border-radius: 24px; box-shadow: 0 30px 70px #26163b33; }
.rb-hub-feature img { position: absolute; inset: 0; z-index: -2; object-position: 70% 50%; transition: transform .6s ease-out; }
.rb-hub-feature::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #26163b 0%, #26163bf0 30%, #26163b8c 50%, #26163b00 72%); }
.rb-hub-feature-copy { max-width: 560px; padding: clamp(32px, 4vw, 56px); }
.rb-hub-feature-copy h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.04; }
.rb-hub-feature-copy h2 em { font-style: normal; color: #ff9fd0; }
.rb-hub-feature-copy p { max-width: 42ch; }
.rb-hub-feature:hover img { transform: scale(1.03); }
@media (max-width: 760px) {
  .rb-hub-masthead > div { grid-template-columns: 1fr; }
  .rb-hub-feature { display: grid; min-height: 0; border-radius: 18px; background: #26163b; }
  .rb-hub-feature img { position: static; z-index: auto; height: auto; max-height: none; aspect-ratio: 1.6; }
  .rb-hub-feature::before { display: none; }
  .rb-hub-feature-copy { padding: 26px 24px 30px; }
  .rb-hub-feature-copy h2 { font-size: clamp(30px, 8.6vw, 38px); }
}
@media (prefers-reduced-motion: reduce) {
  .rb-rail-cta img, .rb-rail-cta i, .rb-hub-feature img { transition: none; }
}

/* -- Shared scene hero (audit #4): one rule for every inner page hero whose
   picture used to sit under a near-opaque veil. The copy keeps a paper field
   on the left, the scene reads clearly on the right; on phones the whole
   scene becomes a banner above the copy instead of a faint wash behind it. -- */
.rb-scene { position: relative; isolation: isolate; min-height: 0; background: #fbf7ff var(--hero-bg) right center / cover no-repeat !important; }
.rb-scene .inner-veil, .page-intro.rb-scene::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, #fbf7fffa 0%, #fbf7fff0 34%, #fbf7ff99 50%, #fbf7ff14 66%, #fbf7ff00 80%),
    linear-gradient(180deg, #fff0 72%, #fff 100%) !important;
}
.rb-scene .inner-hero-copy { min-height: clamp(460px, 40vw, 580px); padding: 124px 0 64px; display: flex; flex-direction: column; justify-content: center; }
.page-intro.rb-scene { padding: 140px 0 88px; }
.rb-scene h1 { max-width: min(15ch, 54%); }
.rb-scene h1 + p, .rb-scene .intro-narrow > p { max-width: min(46ch, 50%); }
@media (max-width: 1100px) {
  .rb-scene h1 { max-width: min(16ch, 62%); }
  .rb-scene h1 + p, .rb-scene .intro-narrow > p { max-width: min(46ch, 58%); }
}
@media (max-width: 760px) {
  .inner-hero.rb-scene, .page-intro.rb-scene { background-size: 100% auto !important; background-position: center 68px !important; padding: calc(68px + 50vw) 0 32px; }
  .rb-scene .inner-veil, .page-intro.rb-scene::before { background: linear-gradient(180deg, #fbf7ff00 calc(68px + 34vw), #fbf7ff calc(68px + 56vw)) !important; }
  .rb-scene .inner-hero-copy { min-height: 0; padding: 0; }
  .rb-scene h1, .rb-scene h1 + p, .rb-scene .intro-narrow > p { max-width: none; }
}

/* -- Homepage "Still getting generic ideas?": the picture is the anchor of
   the block, not a thumbnail. -- */
.rb-repair-intro > img { width: 100%; max-width: 440px; height: auto; aspect-ratio: 4 / 3; border-radius: 20px; box-shadow: 0 22px 50px #4a245724; }
@media (max-width: 760px) { .rb-repair-intro > img { width: 100%; height: auto; max-width: none; aspect-ratio: 16 / 10; } }

/* -- "AI is useful. It is not psychic.": full-bleed dark scene, text on the
   picture, no card. Sits between the guide and the app band. -- */
.rb-truth { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 9vw, 128px) 0; color: #fff; background: #1b1232 url('/assets/visuals/dusk-forest-glow.webp') center 70% / cover no-repeat; }
.rb-truth::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #160d2ceb 0%, #160d2cb8 45%, #160d2c8c 100%), linear-gradient(180deg, #160d2c66, #160d2c00 30%, #160d2c00 70%, #160d2c80); }
.rb-truth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.rb-truth-kicker { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ffc6a3; }
.rb-truth h2 { margin-top: 18px; color: #fff; font-size: clamp(44px, 5.4vw, 80px); line-height: 1; letter-spacing: -.04em; }
.rb-truth h2 span { color: #ffab7a; }
.rb-truth-copy > p:not(.rb-truth-kicker) { margin-top: 22px; max-width: 34ch; color: #e7dcf3; font-size: 19px; line-height: 1.6; }
.rb-truth-copy img { width: 120px; height: auto; margin-top: 30px; filter: drop-shadow(0 12px 24px #0007); }
.rb-truth-list ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ffffff2e; }
.rb-truth-list li { display: flex; align-items: center; gap: 16px; padding: 17px 0; border-bottom: 1px solid #ffffff2e; font-size: 19px; font-weight: 600; color: #fff; }
.rb-truth-list svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #ff8a6b2e; stroke: #ffab7a; stroke-width: 2.6; stroke-linecap: round; fill: none; }
.rb-truth-list a { display: inline-block; margin-top: 26px; color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: #ffab7a; text-underline-offset: 6px; }
.rb-truth-list a span { display: inline-block; transition: transform .2s; }
.rb-truth-list a:hover span { transform: translateX(4px); }
@media (max-width: 760px) {
  .rb-truth-grid { grid-template-columns: 1fr; gap: 32px; }
  .rb-truth-copy img { display: none; }
  .rb-truth-list li { font-size: 17px; padding: 14px 0; }
}

@media (max-width: 520px) {
  .rb-hero--scene .rb-actions { align-items: stretch; }
  .rb-hero--scene .rb-actions .rb-text-link { align-self: flex-start; }
}

/* -- Shared footer: the home page does not load guide-refresh.css, so the
   footer rules live here too and every page renders the same footer. -- */
.site-footer { padding: 56px 0 24px; background: #f8f6fc; }
.footer-intro { display: flex; align-items: center; gap: 30px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.footer-intro .footer-brand { flex-shrink: 0; }
.footer-intro .footer-brand img { width: 166px; }
.footer-intro p { max-width: 290px; color: #5f566e; font-size: .95rem; }
.footer-start { margin-left: auto; font-weight: 650; color: #6330ae; }
.site-footer .footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; padding-top: 32px; }
.footer-col h2 { margin: 0 0 14px; font-size: 1rem; font-weight: 650; letter-spacing: 0; }
.site-footer .footer-col { margin: 0; min-width: 0; }
.site-footer .footer-col a { font-size: .88rem; color: #5f566e; margin: 0; padding: 5px 0; line-height: 1.6; }
.site-footer a:hover { color: #6330ae; text-decoration: underline; text-underline-offset: 4px; }
.site-footer .footer-bottom { align-items: center; margin-top: 32px; color: #62596e; }
.footer-bottom > div { display: flex; gap: 24px; }
.site-footer .footer-bottom a { color: inherit; font-weight: 450; }
@media (max-width: 1000px) {
  .footer-intro { flex-wrap: wrap; }
  .footer-intro p { flex: 1; }
}
@media (max-width: 760px) {
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .footer-intro { display: grid; gap: 16px; }
  .footer-start { margin: 0; }
  .site-footer .footer-bottom { display: flex; flex-wrap: wrap; gap: 16px 24px; }
  .footer-bottom > span:nth-child(2) { display: none; }
}

/* ==========================================================================
   Nav polish. Kept last so it settles every older nav rule.
   ========================================================================== */

/* Nav: solid white from the first pixel on every page, no scroll fade. */
.home-v4 .site-nav, .home-v4 .site-nav.scrolled,
.rb-page .site-nav, .rb-page .site-nav.scrolled { background: #fff; }

/* Giftin app link: the real app icon plus a quiet label, set apart from the
   site links by a hairline. No box, no shadow, no lift. */
.site-nav .nav-app {
  min-height: 0; gap: 10px; padding: 0 0 0 clamp(14px, 1.4vw, 20px); margin-left: 4px;
  border: 0; border-left: 1px solid #35234d1f; border-radius: 0;
  background: none; box-shadow: none; color: var(--ink);
  font-size: .88rem; font-weight: 760; transition: color .16s ease;
}
.site-nav .nav-app::before {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 8px;
  background: url("/assets/icons/app-icon.webp") center / 114% no-repeat;
}
.site-nav .nav-app > span { color: #8a8398; font-size: .8em; transition: color .16s ease, transform .16s ease; }
.site-nav .nav-app:hover, .site-nav .nav-app:hover > span { color: var(--purple); background: none; box-shadow: none; transform: none; }
.site-nav .nav-app:hover > span { transform: translate(1px, -1px); }
.site-nav .nav-app:active { transform: none; }
@media (max-width: 1100px) {
  .site-nav .nav-app { width: 100%; justify-content: flex-start; margin: 8px 0 0; padding: 14px 4px 4px; border-left: 0; border-top: 1px solid #35234d14; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav .nav-app, .site-nav .nav-app > span { transition: none; }
  .site-nav .nav-app:hover > span { transform: none; }
}

/* Occasion chips: tighter so the choices read as one group, not scattered
   buttons. Height stays 44px for touch. */
.rb-builder .builder-form .occasion-chips { gap: 6px; }
.rb-builder .builder-form .ochip { padding: 0 13px; gap: 6px; }

/* ==========================================================================
   Home interaction layer. Neighbouring sections never share a device: the
   proof cards, then a numbered text list, then picture tiles. One arrow style
   site-wide: a small text arrow after a word that slides on hover.
   Transform and color only, hover-capable pointers only, off for reduced motion.
   ========================================================================== */
:root { --ease-out: cubic-bezier(.2,.8,.2,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); }

/* The one arrow: text, not a shape. */
.rb-go { display: inline-flex; align-items: center; gap: 6px; color: #6427b8; font-weight: 700; font-size: 15px; white-space: nowrap; }
.rb-go i, .rb-primary > span, .rb-text-link > span { display: inline-block; font-style: normal; transition: transform .22s var(--ease-out); }

/* -- "Still getting generic ideas?": numbered list, the reader's words first. -- */
.rb-fix-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.rb-fix-list li + li { border-top: 1px solid #e7def3; }
.rb-fix-list a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; padding: 22px 0; }
.rb-fix-num { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #d9c6f3; font-variant-numeric: tabular-nums; transition: color .2s var(--ease-out); }
.rb-fix-copy strong { display: block; font-size: 20px; font-weight: 700; color: #1d1640; letter-spacing: -.01em; }
.rb-fix-copy small { display: block; margin-top: 4px; font-size: 16px; color: var(--muted); }
.rb-fix-list .rb-go { text-decoration: underline; text-decoration-color: #0000; text-underline-offset: 5px; transition: text-decoration-color .2s var(--ease-out); }
@media (max-width: 640px) {
  .rb-fix-list a { grid-template-columns: 44px minmax(0, 1fr); padding: 18px 0; }
  .rb-fix-num { font-size: 26px; }
  .rb-fix-list .rb-go { grid-column: 2; }
}

/* -- "Start with your situation": the picture is the button. -- */
.rb-routes { background: #fff; }
.rb-route-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.rb-route-tiles a { position: relative; display: block; overflow: hidden; border-radius: 20px; aspect-ratio: 4 / 3; isolation: isolate; background: #f1eafa; }
.rb-route-tiles img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .45s var(--ease-out); }
.rb-route-tiles a::after { content: ""; position: absolute; inset: 45% 0 0; z-index: -1; background: linear-gradient(180deg, #1d164000, #1d1640b3); }
.rb-route-tiles span { position: absolute; left: 22px; right: 22px; bottom: 20px; color: #fff; font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-shadow: 0 1px 12px #1d164059; transition: transform .3s var(--ease-out); }
@media (max-width: 900px) {
  .rb-route-tiles { grid-template-columns: 1fr; gap: 14px; }
  .rb-route-tiles a { aspect-ratio: 16 / 7; }
}

/* -- Guide "Keep reading" rows: title plus the text arrow, no shapes. -- */
.rb-related a { justify-content: flex-start; }
.rb-related strong::after { content: " \2192"; color: #6427b8; display: inline-block; margin-left: 6px; transition: transform .22s var(--ease-out); }

/* Hero CTAs, faces, pictures, builder chips. */
.rb-primary:active { transform: scale(.97); }
.rb-faces img { position: relative; transition: transform .25s var(--ease-spring); }
.rb-repair-intro > img, .rb-prompt-before img, .builder-mascot { transition: transform .3s var(--ease-out); }
.rb-builder .ochip, .rb-builder .qchip { transition: transform .2s var(--ease-out), border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
.rb-builder .handoff-btn img { transition: transform .25s var(--ease-spring); }

@media (hover: hover) and (pointer: fine) {
  .rb-fix-list a:hover .rb-fix-num { color: #7132ca; }
  .rb-fix-list a:hover .rb-go { text-decoration-color: currentColor; }
  .rb-fix-list a:hover .rb-go i, .rb-primary:hover > span, .rb-text-link:hover > span { transform: translateX(4px); }

  .rb-route-tiles a:hover img { transform: scale(1.06); }
  .rb-route-tiles a:hover span { transform: translateY(-4px); }

  .rb-related a:hover strong { color: #7132ca; }
  .rb-related a:hover strong::after { transform: translateX(4px); }

  .rb-faces img:hover { z-index: 1; transform: translateY(-4px) scale(1.12); }
  .rb-repair-intro:hover > img { transform: scale(1.03); }
  .rb-prompt-before img:hover, .builder-mascot:hover { transform: scale(1.08) rotate(-4deg); }
  .rb-builder .ochip:not(.is-on):hover, .rb-builder .qchip:hover { transform: translateY(-2px); background: #faf6ff; }
  .rb-builder .handoff-btn:hover img { transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .rb-go i, .rb-primary > span, .rb-text-link > span, .rb-fix-num, .rb-route-tiles img, .rb-route-tiles span,
  .rb-related strong::after, .rb-faces img, .rb-repair-intro > img, .rb-prompt-before img, .builder-mascot,
  .rb-builder .ochip, .rb-builder .qchip, .rb-builder .handoff-btn img { transition: none; }
  .rb-fix-list a:hover .rb-go i, .rb-primary:hover > span, .rb-text-link:hover > span, .rb-route-tiles a:hover img,
  .rb-route-tiles a:hover span, .rb-related a:hover strong::after, .rb-faces img:hover, .rb-repair-intro:hover > img,
  .rb-prompt-before img:hover, .builder-mascot:hover, .rb-builder .ochip:hover, .rb-builder .qchip:hover,
  .rb-builder .handoff-btn:hover img { transform: none; }
}

/* ==========================================================================
   Builder v6: six inputs in three bands instead of eleven in three boxes.
   Band 1 is a sentence with two inline pickers, band 2 the limits side by
   side, band 3 the person. The card keeps one action row.
   ========================================================================== */
.rb-builder .builder-form { gap: 0; }
.rb-builder .bq { padding: 28px 0; border-top: 1px solid #e7def3; }
.rb-builder .bq:first-child { padding-top: 4px; border-top: 0; }
.rb-builder .bq-label { display: block; margin-bottom: .45rem; font-size: 15px; font-weight: 600; color: var(--ink); }

/* Sentence row: the pickers read as part of the sentence. */
.rb-builder .bq-sentence { margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.45; letter-spacing: -.02em; color: #1d1640; }
.rb-builder .bq-pickwrap { position: relative; display: inline-block; white-space: nowrap; }
.rb-builder .bq-pickface {
  display: inline-block; padding: 0 1.05em 2px 0; border-bottom: 2px dashed #cdb3f0; color: #7132ca;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237132ca' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0 center / .62em;
  transition: border-color .2s var(--ease-out);
}
/* The real select: invisible, covering the word, normal size so its list is too. */
.rb-builder .builder-form .bq-pick {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--ink); background: #fff; border: 0; appearance: auto;
}
.rb-builder .bq-pickwrap:hover .bq-pickface { border-bottom-color: #7132ca; }
.rb-builder .bq-pickwrap:has(.bq-pick:focus-visible) .bq-pickface { outline: 3px solid #7c3aed; outline-offset: 4px; border-radius: 4px; }
.rb-builder .bq-extra:has(:not([hidden])) { margin-top: 14px; }
.rb-builder .bq-extra input { max-width: 360px; }
.rb-builder .bq-example { margin-top: 10px; min-height: 36px; padding: 0; font-size: 14px; font-weight: 650; color: #6427b8; text-decoration: underline; text-decoration-color: #d6bdf6; text-underline-offset: 4px; background: none; border: 0; }
.rb-builder .bq-example:hover { text-decoration-color: currentColor; }

/* Limits side by side. */
.rb-builder .bq--limits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.rb-builder .bq--limits .quick-picks { margin-top: 10px; }
.rb-builder .bq-when { margin-top: 0 !important; }
.rb-builder .qchip.is-on { border-color: #7132ca; background: #f1e8fc; color: #5a22a8; }

/* The person. */
.rb-builder .bq--clues { display: grid; gap: 24px; }
.rb-builder .bq--clues .quick-picks { margin-top: 10px; }
.rb-builder .builder-form #detail { min-height: 88px; }

/* Card: prompt, style, one action row. */
.rb-builder .builder-output .prompt-text { padding: 16px 0 18px; }
.rb-builder .bq-styles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 18px; }
.rb-builder .bq-styles > span { margin-right: 4px; font-size: 13px; font-weight: 700; color: #625970; }
.rb-builder .bq-styles .recipe { display: inline-flex; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid #e0d3ef; background: #fff; font-size: 13px; font-weight: 650; color: #342448; }
.rb-builder .bq-styles .recipe.is-on { border-color: #7132ca; background: #f1e8fc; color: #5a22a8; }
.rb-builder .bq-actions { display: flex; align-items: center; gap: 8px; }
.rb-builder .bq-actions .rb-primary { flex: 1; min-height: 52px; }
.rb-builder .bq-actions .handoff-btn { display: grid; place-items: center; flex: none; width: 52px; height: 52px; min-height: 0; padding: 0; border-radius: 14px; border: 1px solid #d8c9e7; background: #fff; }
.rb-builder .bq-actions .handoff-btn img { width: 22px; height: 22px; }
.rb-builder .bq-actions .handoff-btn:hover { border-color: #7132ca; }
.rb-builder .bq-actions .handoff-btn.is-copied { border-color: #278f67; }
.rb-builder .rb-copy-status:empty { display: none; }
.rb-builder .rb-copy-status { margin: 10px 0 0; font-size: 14px; color: #625970; }

/* Phone copy bar: only while the form is on screen and the card is not. */
.bq-mobilebar { display: none; }
@media (max-width: 900px) {
  .rb-builder .bq--limits { grid-template-columns: 1fr; gap: 24px; }
  .rb-builder .bq-sentence { font-size: 24px; }
  .bq-mobilebar { display: block; position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 70; }
  .bq-mobilebar .rb-primary { width: 100%; min-height: 52px; box-shadow: 0 12px 30px #1d164040; }
}

/* Article pages outside /guides/ (the Prompts page) use the same reading
   rail as the guides: contents with the current section, then the builder. */
.article-aside.rb-rail { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 32px; }
.article-aside .rb-rail-toc h2 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #76518b; }
.article-aside .rb-rail-toc a { padding: 6px 0 6px 16px; font-size: 14px; font-weight: 500; line-height: 1.4; border-left: 2px solid #eadff5; color: #6b6074; transition: color .15s, border-color .15s; }
.article-aside .rb-rail-toc a::before { display: none; }
.article-aside .rb-rail-toc a:hover { color: #6427b8; }
.article-aside .rb-rail-toc a.is-current { color: #2a1d3d; font-weight: 650; border-left-color: #7132ca; }
@media (min-width: 761px) and (max-height: 700px) { .article-aside.rb-rail { position: static; } }
@media (max-width: 760px) {
  .article-aside.rb-rail { position: static; }
  .article-aside .rb-rail-toc { max-height: none; padding: 16px 20px; border: 1px solid #e4d8ef; border-radius: 14px; }
  .article-aside .rb-rail-toc a { border-left: 0; padding-left: 0; }
}

/* Prompts page article: the same reading rhythm as the guides. */
.article-layout:has(> .article-aside.rb-rail) .article-main > h2 { margin: 56px 0 16px; font-size: clamp(28px, 3vw, 36px); line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; scroll-margin-top: 105px; }
.article-layout:has(> .article-aside.rb-rail) .article-main > h3 { margin: 28px 0 10px; font-size: 19px; line-height: 1.3; color: #1d1640; }
.article-layout:has(> .article-aside.rb-rail) .article-main > p, .article-layout:has(> .article-aside.rb-rail) .article-main > ul li { max-width: 68ch; font-size: 17px; line-height: 1.75; color: #453952; }
.article-layout:has(> .article-aside.rb-rail) .article-main > ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.article-layout:has(> .article-aside.rb-rail) .article-main > ul li { position: relative; padding-left: 22px; }
.article-layout:has(> .article-aside.rb-rail) .article-main > ul li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: #b995ec; }
.article-layout:has(> .article-aside.rb-rail) .article-main > ul li a { color: #6427b8; text-decoration: underline; text-decoration-color: #d6bdf6; text-underline-offset: 4px; }
.article-layout:has(> .article-aside.rb-rail) .article-main > ul li a:hover { text-decoration-color: currentColor; }
.article-layout:has(> .article-aside.rb-rail) .article-main .direct-answer { margin-bottom: 36px; padding: 22px 26px; border: 0; border-radius: 14px; background: #f6f0fd; box-shadow: none; }
.article-layout:has(> .article-aside.rb-rail) .article-main .direct-answer span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #76518b; }
.article-layout:has(> .article-aside.rb-rail) .article-main .direct-answer p { margin: 0; font-size: 18px; line-height: 1.6; color: #2a1d3d; }
.article-layout:has(> .article-aside.rb-rail) .article-main .copy-block { margin: 20px 0 24px; padding: 24px; border: 0; border-radius: 16px; background: #f6f0fd; box-shadow: none; }
.article-layout:has(> .article-aside.rb-rail) .article-main .copy-block pre { margin: 0; padding: 0; background: none; font: 16px/1.65 var(--font); color: #40314e; white-space: pre-wrap; }
.article-layout:has(> .article-aside.rb-rail) .article-main .copy-block button { position: static; margin-top: 16px; min-height: 44px; border: 1px solid #cab2e2; border-radius: 999px; background: #fff; color: #5b298e; box-shadow: none; font-size: 14px; }

/* Rail pull-quote for articles without a contents list. */
.rb-rail-note { margin: 0; padding-left: 18px; border-left: 2px solid #7132ca; }
.rb-rail-note figcaption { margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #76518b; }
.rb-rail-note blockquote { margin: 0; padding: 0; border: 0; background: none; font-size: 19px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; color: #1d1640; }

/* Builder v6.1: fewer, matching shapes. One joined budget field, one
   segmented "when" switch at the same height, small quick picks, tighter
   bands, reset as a text link. */
.rb-builder .bq { padding: 22px 0; }
.rb-builder .bq--limits, .rb-builder .bq--clues { border-top: 0; }
.rb-builder .bq--limits { padding-bottom: 6px; align-items: start; }
.rb-builder .bq--clues { gap: 20px; }
.rb-builder .builder-form .bfield label, .rb-builder .bq-label { margin-bottom: 8px; }

/* Budget: currency and amount are one field. */
.rb-builder .budget-row { display: flex; height: 48px; border: 1px solid #dccdee; border-radius: 12px; background: #fff; overflow: hidden; }
.rb-builder .budget-row:focus-within { border-color: #7132ca; box-shadow: 0 0 0 3px #7132ca22; }
.rb-builder .builder-form .budget-row select { flex: 0 0 86px; width: 86px; height: 100%; min-height: 0; padding: 0 8px 0 12px; border: 0; border-right: 1px solid #eadff5; border-radius: 0; background-color: #faf7ff; font-size: 15px; }
.rb-builder .builder-form .budget-row input { flex: 1; min-width: 0; height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.rb-builder .builder-form .budget-row input:focus, .rb-builder .builder-form .budget-row select:focus { outline: 0; box-shadow: none; }

/* When: a four-part switch, same height as the budget field. */
.rb-builder .quick-picks.bq-when { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; height: 48px; border: 1px solid #dccdee; border-radius: 12px; background: #fff; overflow: hidden; }
.rb-builder .bq-when .qchip { min-height: 0; height: 100%; padding: 0 4px; border: 0; border-left: 1px solid #eadff5; border-radius: 0; background: none; font-size: 13px; font-weight: 650; color: #453952; white-space: nowrap; }
.rb-builder .bq-when .qchip:first-child { border-left: 0; }
.rb-builder .bq-when .qchip.is-on { background: #7132ca; color: #fff; border-left-color: #7132ca; }
.rb-builder .bq-when .qchip.is-on + .qchip { border-left-color: #7132ca; }

/* Quick picks: small helpers, not buttons competing with the fields. */
.rb-builder .bq .quick-picks:not(.bq-when) { gap: 6px; margin-top: 8px; }
.rb-builder .bq .quick-picks:not(.bq-when) .qchip { min-height: 34px; padding: 0 12px; font-size: 13px; }

/* Fields share one height. */
.rb-builder .builder-form .tag-field { min-height: 48px; padding: 5px 12px; align-items: center; border-color: #dccdee; border-radius: 12px; }
.rb-builder .builder-form .tag-field .tag-input { min-height: 36px; height: 36px; }
.rb-builder .builder-form #detail { min-height: 76px; }

/* Reset is a quiet text link. */
.rb-builder .builder-foot { padding-top: 8px; }
.rb-builder .builder-foot .reset-btn { min-height: 36px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 14px; font-weight: 600; color: #6b6074; text-decoration: underline; text-decoration-color: #d9cce8; text-underline-offset: 4px; }
.rb-builder .builder-foot .reset-btn:hover { color: #6427b8; text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .rb-builder .bq-when .qchip:hover { transform: none; background: #f6f0fd; } .rb-builder .bq-when .qchip.is-on:hover { background: #7132ca; } }

/* Builder v6.2: occasion icon row, sentence as confirmation, one tools row,
   starter phrases under the details box. */
.rb-builder .bq--who { padding-bottom: 20px; }
.rb-builder .bq-occasions { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 18px; }
.rb-builder .otile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 70px; padding: 8px 2px; border: 1px solid #e6dbf2; border-radius: 14px; background: #fff;
  font: inherit; font-size: 12px; font-weight: 650; color: #453952; cursor: pointer;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.rb-builder .otile img { width: 30px; height: 30px; object-fit: contain; transition: transform .25s var(--ease-spring); }
.rb-builder .otile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rb-builder .otile.is-on { border-color: #7132ca; background: #f6f0fd; color: #5a22a8; box-shadow: inset 0 0 0 1px #7132ca; }
.rb-builder .otile:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .rb-builder .otile:not(.is-on):hover { border-color: #c9b0ec; transform: translateY(-2px); }
  .rb-builder .otile:hover img { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { .rb-builder .otile, .rb-builder .otile img { transition: none; } .rb-builder .otile:hover, .rb-builder .otile:hover img { transform: none; } }

.rb-builder .bq-sentence { font-size: clamp(22px, 2vw, 26px); line-height: 1.4; }
.rb-builder .bq-occword { color: #1d1640; }

.rb-builder .bq-tools { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 14px; color: #b3a6c2; }
.rb-builder .bq-tools .bq-example { margin: 0; }
.rb-builder .bq-tools .reset-btn { min-height: 36px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 14px; font-weight: 600; color: #6b6074; text-decoration: underline; text-decoration-color: #d9cce8; text-underline-offset: 4px; }
.rb-builder .bq-tools .reset-btn:hover { color: #6427b8; text-decoration-color: currentColor; }

.rb-builder .bq-starters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rb-builder .bq-starters .qchip { min-height: 32px; padding: 0 12px; font-size: 13px; border-style: dashed; }

@media (max-width: 640px) {
  .rb-builder .bq-occasions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Example and start over sit at the right end of the builder heading. */
.rb-builder .rb-section-heading:has(.bq-tools) { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.rb-builder .rb-section-heading .bq-tools { margin: 0 0 4px; }

/* Scene heroes: the headline stays on the clear left side of the picture.
   On Examples the intro lines up with the content below instead of centring. */
.page-intro.rb-scene h1 { max-width: 580px; font-size: clamp(40px, 4.2vw, 60px); line-height: 1.05; }
.page-intro.rb-scene .intro-narrow > p { max-width: 460px; }
.rb-examples .example-intro { max-width: 68ch; margin: 0 0 8px; font-size: 17px; line-height: 1.7; }
@media (max-width: 760px) { .page-intro.rb-scene h1, .page-intro.rb-scene .intro-narrow > p { max-width: none; } }

/* Guides hub filter: text tabs with a sliding ink line and live counts,
   sticky under the nav. No pills, no boxes. */
.rb-hub-filters { position: sticky; top: var(--nav-h, 78px); z-index: 30; display: flex; justify-content: flex-start; flex-wrap: nowrap; gap: 32px; margin-top: 8px; padding: 0; background: #fff; border-bottom: 1px solid #eee6f5; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }
.rb-hub-filters button { position: relative; display: inline-flex; align-items: baseline; gap: 7px; min-height: 0; padding: 20px 0 17px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 650; color: #6b6074; cursor: pointer; white-space: nowrap; transition: color .2s var(--ease-out); }
.rb-hub-filters button span { font-size: 12px; font-weight: 700; color: #a597b5; font-variant-numeric: tabular-nums; transition: color .2s var(--ease-out); }
.rb-hub-filters button:hover, .rb-hub-filters button[aria-pressed="true"] { color: #1d1640; }
.rb-hub-filters button[aria-pressed="true"] span { color: #7132ca; }
.rb-hub-filters button:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; border-radius: 4px; }
.rb-filter-ink { position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; border-radius: 2px; background: #7132ca; pointer-events: none; transition: transform .35s var(--ease-out), width .35s var(--ease-out); }
.rb-hub-card.is-in { animation: rbCardIn .42s var(--ease-out) both; }
@keyframes rbCardIn { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 760px) {
  .rb-hub-filters { gap: 24px; overflow-x: auto; scrollbar-width: none; }
  .rb-hub-filters::-webkit-scrollbar { display: none; }
  .rb-hub-filters button { padding: 16px 0 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .rb-filter-ink { transition: none; } .rb-hub-card.is-in { animation: none; } }

/* In-article app card: one concrete line about the app, then the stores. */
.rb-app-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px 18px; align-items: center; max-width: 720px; margin: 20px 0 8px; padding: 22px 24px; border-radius: 18px; background: linear-gradient(135deg, #f7f0ff, #fdf2f8); }
.rb-app-card > img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 8px 20px #4a245724; }
.rb-app-card > div > strong { display: block; font-size: 19px; line-height: 1.3; color: #1d1640; letter-spacing: -.01em; }
.rb-app-card > div > p { margin: 4px 0 0 !important; font-size: 15px !important; line-height: 1.55 !important; color: #5a4f66; max-width: none !important; }
.rb-app-card .store-row { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) { .rb-app-card { grid-template-columns: 48px minmax(0, 1fr); padding: 18px; } .rb-app-card > img { width: 48px; height: 48px; } .rb-app-card .store-row { grid-column: 1 / -1; } }

.rb-app-card .store-button, .rb-app-card .store-button strong, .rb-app-card .store-button small { color: #fff; }
.rb-app-card .store-button { text-decoration: none; }