/* The online page is a preparation guide. Typography comes from the shared role system. */
.online-page { --online-gap:72px; --online-columns:repeat(2,minmax(0,1fr)); }
.online-opening,.online-section-heading,.online-workspace,.online-survey,.online-handoff,.online-faq,.online-contact-grid { display:grid; grid-template-columns:var(--online-columns); gap:var(--online-gap); }
.online-opening { align-items:center; padding-block:56px 64px; }
.online-page h1 em,.online-page h2 em { color:var(--sage); }
.online-intro .copy { max-width:515px; }
.online-promise { margin-block:26px 18px; }
.online-opening-stack { position:relative; isolation:isolate; justify-self:end; width:min(100%,480px); }
.online-site-photo { position:absolute; z-index:-2; left:calc(-1 * clamp(0px,60vw - 650px,320px)); top:12%; width:min(100%,430px); margin:0; padding:12px; background:#f8f6ef; box-shadow:0 18px 40px #263b351a; transform:rotate(-12deg); }
.online-site-photo img { display:block; width:100%; height:auto; }
.online-letter { position:relative; width:100%; padding:32px 36px 28px; background:#e5e9d9; border-top:2px solid var(--sage); }
.online-letter::after { content:''; position:absolute; inset:10px -10px -10px 10px; border:1px solid #7b83644d; pointer-events:none; z-index:-1; }
.online-letter-top { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:22px; }
.online-letter-top .eyebrow { margin:0; }
.online-letter-top .link-leaf { width:28px; height:32px; color:var(--sage); }
.online-letter-list { margin:23px 0 18px; }
.online-letter-list>div { display:grid; grid-template-columns:115px 1fr; gap:20px; border-top:1px solid #7b83644d; padding-block:15px; }
.online-letter-list>div:last-child { border-bottom:1px solid #7b83644d; }
.online-letter-list dd { margin:0; color:var(--muted); }
.online-letter .subpage-note { color:var(--muted); }
.online-page .online-letter .text-link { margin-top:18px; }
.online-preparation { border-top:1px solid var(--line); padding-block:64px; }
.online-section-heading { align-items:end; margin-bottom:36px; }
.online-section-heading .copy { max-width:480px; }
.online-workspace { align-items:start; }
.online-baseplan { margin:0; background:#e5e9d9; padding:22px 28px; }
.online-sheet-label { display:flex; justify-content:space-between; gap:20px; padding-bottom:20px; color:var(--muted); }
.online-baseplan img { display:block; width:min(100%,360px); height:auto; margin:auto; box-shadow:0 8px 24px #263b350d; }
.online-baseplan figcaption { margin-top:20px; text-align:center; color:var(--muted); }
.online-data-heading { display:flex; align-items:baseline; gap:20px; }
.online-detail-index { flex:none; color:var(--muted); }
.online-data-list details>div { padding:0 24px 22px 34px; }
.online-data-list details>div p+p { margin-top:12px; }
.online-data-list summary { padding-block:20px; }
.online-margin-note { border-left:2px solid var(--sage); margin-top:26px; padding-left:18px; color:var(--muted); max-width:480px; }
.online-survey { align-items:center; border-top:1px solid var(--line); padding-block:64px; }
.online-survey .copy { margin-top:24px; max-width:510px; }
.online-survey-list { margin:20px 0; padding:0; list-style:none; max-width:510px; color:var(--muted); }
.online-survey-list li { position:relative; padding-left:18px; }
.online-survey-list li+li { margin-top:12px; }
.online-survey-list li::before { content:''; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:var(--sage); }
.online-survey-list strong { font-weight:500; color:var(--ink); }
.online-survey .subpage-note { max-width:460px; color:var(--muted); }
.online-survey-plan { position:relative; margin:0; padding:18px 18px 0; background:#ebe7dc; }
.online-survey-plan img { display:block; width:100%; max-width:510px; height:auto; margin:auto; }
.online-survey-plan figcaption { display:flex; justify-content:space-between; gap:24px; padding-block:18px; color:var(--muted); }
.online-survey-plan figcaption span:last-child { max-width:190px; text-align:right; }
.online-handoff { padding:30px 32px; background:#e5e9d9; align-items:center; }
.online-handoff>div:first-child { display:flex; align-items:center; gap:24px; }
.online-handoff .link-leaf { flex:none; color:var(--sage); }
.online-handoff .subpage-supporting { color:var(--muted); }
.online-handoff-links { display:flex; flex-wrap:wrap; gap:12px 28px; }
.online-page .online-handoff-links .text-link { margin-top:18px; }
.online-faq { padding-block:64px; align-items:start; }
.online-contact { background:#dce6c4; padding-block:60px; }
.online-contact-grid { align-items:center; }
.online-contact h2 em { color:var(--ink); }
.online-contact .copy { max-width:440px; }
.online-contact .button { margin-top:22px; background:var(--ink); color:var(--paper); }
@media(max-width:1200px) {
  .online-opening-stack { padding-top:120px; }
  .online-site-photo { top:20px; left:8px; width:85%; transform:rotate(-8deg); }
  .online-letter { width:calc(100% - 24px); margin-left:24px; }
}
@media(max-width:1100px) {
  .online-page { --online-gap:40px; }
  .online-opening { padding-block:45px 50px; }
  .online-letter { padding:26px; }
  .online-letter-list>div { grid-template-columns:1fr; gap:5px; padding-block:12px; }
  .online-baseplan { padding:20px; }
  .online-survey-plan figcaption { flex-direction:column; gap:5px; }
  .online-survey-plan figcaption span:last-child { max-width:none; text-align:left; }
}
@media(max-width:800px) {
  .online-page { --online-columns:minmax(0,1fr); --online-gap:30px; }
  .online-opening { padding-block:38px 48px; gap:34px; }
  .online-opening-stack { justify-self:center; width:100%; max-width:560px; padding-top:135px; padding-right:10px; }
  .online-site-photo { width:min(85%,400px); }
  .online-letter { padding:25px; }
  .online-letter-list>div { grid-template-columns:115px 1fr; gap:16px; }
  .online-preparation,.online-survey,.online-faq { padding-block:48px; }
  .online-section-heading { gap:22px; margin-bottom:28px; }
  .online-baseplan { width:100%; max-width:560px; justify-self:center; }
  .online-data-list details>div { padding-right:15px; }
  .online-survey { gap:28px; }
  .online-survey-plan { width:100%; max-width:560px; justify-self:center; padding:14px 14px 0; }
  .online-handoff { padding:26px 24px; gap:20px; }
  .online-handoff>div:first-child { gap:18px; }
  .online-contact { padding-block:48px; }
}
@media(max-width:450px) {
  .online-letter { padding:22px; }
  .online-letter-list>div { grid-template-columns:1fr; gap:5px; }
  .online-baseplan { padding:18px; }
  .online-sheet-label { gap:12px; }
  .online-data-heading { gap:14px; }
  .online-data-list details>div { padding-left:28px; }
}