@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500;600;700;800&family=Fraunces:opsz,wght,SOFT,WONK@9..144,500..800,70,0&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --clay: #9a5533;
  --sand: #b49b73;
  --moss: #4b472e;
  --ink: #202016;
  --muted: #686354;
  --hairline: #d8cdb8;
  --field: #fffdf8;
  --panel: #f7f1e6;
  --canvas: #e8dcc7;
  --rail: #312f20;
  --success: #315138;
  --danger: #7b3a1d;
  --shadow: 0 26px 70px rgba(49, 47, 32, .14);
  --soft-shadow: 0 12px 34px rgba(49, 47, 32, .08);
  --futura: "Futura PT", Futura, "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  --display: "Fraunces", Georgia, serif;
  --body: "Epilogue", "Avenir Next", "Century Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font-family: var(--futura);
  font-synthesis: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  background:
    linear-gradient(90deg, rgba(49,47,32,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(49,47,32,.04) 1px, transparent 1px),
    radial-gradient(circle at 12% 0, rgba(180,155,115,.20), transparent 28%),
    var(--canvas);
  background-size: 44px 44px;
}

.skipLink {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 20;
  padding: 10px 14px;
  background: var(--rail);
  color: var(--field);
  border-radius: 8px;
}
.skipLink:focus { top: 16px; }

.pageShell {
  width: min(1460px, calc(100% - 40px));
  margin: 24px auto;
  display: grid;
  grid-template-columns: 328px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.infoRail {
  position: sticky;
  top: 24px;
  min-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%),
    var(--rail);
  color: var(--field);
  box-shadow: var(--shadow);
}
.infoRail::before {
  content: "";
  position: absolute;
  inset: auto -78px -78px auto;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(180,155,115,.35);
  border-radius: 50%;
}
.brandLockup {
  padding: 0 0 26px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.brandLogo {
  display: block;
  width: 100%;
  max-width: 232px;
  height: auto;
  filter: brightness(0) invert(1);
}
.railIntro { padding: 32px 0 24px; }
.eyebrow,
.sectionLabel {
  margin: 0 0 10px;
  color: var(--clay);
  font-family: var(--futura);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.infoRail .eyebrow { color: var(--sand); }
h1, h2, h3, h4 {
  margin: 0;
  color: var(--moss);
  font-family: var(--futura);
  font-weight: 800;
  letter-spacing: 0;
}
h1 {
  color: var(--field);
  font-size: 2.25rem;
  line-height: .96;
  text-transform: uppercase;
}
h2 {
  max-width: 820px;
  font-size: clamp(2.2rem, 4vw, 4.65rem);
  line-height: .94;
  text-transform: uppercase;
}
h3 { font-size: 1.32rem; line-height: 1.15; }
h4 { margin: 22px 0 7px; font-size: 1rem; }

.railText,
.introText,
.copyBlock p,
.copyBlock li,
.footerNote,
label,
input,
button {
  font-size: .95rem;
  line-height: 1.58;
}
.railText {
  margin: 15px 0 0;
  max-width: 250px;
  color: rgba(255,255,255,.72);
}
.sectionNav {
  display: grid;
  gap: 0;
  margin: 2px 0 24px;
}
.sectionNav a {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  border-top: 1px solid rgba(255,255,255,.11);
  color: rgba(255,255,255,.83);
  text-decoration: none;
  font-weight: 800;
  transition: color .18s ease, background .18s ease, padding-left .18s ease;
}
.sectionNav a:first-child { background: rgba(255,255,255,.06); }
.sectionNav a:last-child { border-bottom: 1px solid rgba(255,255,255,.11); }
.sectionNav a:hover,
.sectionNav a:focus-visible {
  padding-left: 8px;
  color: var(--field);
  background: rgba(255,255,255,.06);
  outline: none;
}
.sectionNav span {
  color: var(--sand);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}
.completionCard {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
}
.completionTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.68);
}
.completionTop strong { color: var(--field); }
.progressTrack {
  height: 6px;
  overflow: hidden;
  margin: 12px 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
}
.progressTrack span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--sand), var(--clay));
  transition: width .28s ease;
}
.completionCard p,
.railFoot {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.45;
}
.railFoot {
  position: relative;
  z-index: 1;
  margin-top: 20px;
}

.formPanel {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid rgba(75,71,46,.14);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.panelHeader {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 28px;
  align-items: start;
  padding: 52px 56px 38px;
  border-bottom: 1px solid var(--hairline);
  background:
    linear-gradient(90deg, rgba(255,253,248,.55), rgba(255,253,248,0)),
    var(--panel);
}
.introText {
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--muted);
}
.headerBrandMark {
  display: grid;
  place-items: center;
  width: 122px;
  height: 122px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--field);
  box-shadow: var(--soft-shadow);
}
.headerEmblem {
  width: 84px;
  height: 84px;
  object-fit: contain;
}
.readingNote {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  margin: 0;
  padding: 18px 56px;
  border-bottom: 1px solid var(--hairline);
  background: #eee4d2;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.readingNote strong {
  color: var(--moss);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.consentForm {
  display: grid;
  gap: 0;
}
.sectionCard {
  padding: 36px 56px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(255,253,248,.34);
  scroll-margin-top: 24px;
}
.sectionCard:nth-of-type(even) { background: rgba(255,253,248,.58); }
.sectionHead {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.fieldGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.compactGrid,
.singleGrid { grid-template-columns: 1fr; }
.span2 { grid-column: span 2; }
label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--moss);
  font-weight: 800;
}
input {
  width: 100%;
  min-height: 54px;
  padding: 13px 15px;
  border: 1px solid #cfc2aa;
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  font-family: var(--futura);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input:hover { border-color: #ab9b80; }
input:focus {
  outline: none;
  border-color: var(--clay);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(154,85,51,.16);
}
.copyBlock {
  padding: 0 0 22px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}
.copyBlock h4:first-child { margin-top: 0; }
.copyBlock p,
.copyBlock li { color: var(--muted); }
.copyBlock ul {
  margin: 12px 0 0;
  padding-left: 20px;
}
.crisisBlock {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid rgba(154,85,51,.28);
  border-radius: 12px;
  background: #efe0cb;
}
.crisisBlock h4 {
  margin-top: 0;
  color: var(--clay);
}
.checks {
  display: grid;
  gap: 10px;
}
.checkRow {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 15px 16px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--field);
  font-weight: 600;
}
.checkRow input,
.toggleRow input {
  width: 18px;
  min-height: 18px;
  margin: 3px 0 0;
  accent-color: var(--clay);
}
.toggleRow {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--field);
}
.signatureGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.signatureCard {
  padding: 20px;
  border: 1px solid #cfc2aa;
  border-radius: 12px;
  background: var(--field);
  box-shadow: 0 1px 0 rgba(49,47,32,.04);
}
.signatureTitle {
  margin: 0 0 12px;
  color: var(--moss);
  font-weight: 800;
}
.signatureButton,
.submitButton,
.secondaryButton {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 13px 18px;
  font-family: var(--futura);
  font-weight: 800;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.signatureButton,
.submitButton {
  color: var(--field);
  background: var(--clay);
  box-shadow: 0 10px 18px rgba(154,85,51,.18);
}
.signatureButton:hover,
.submitButton:hover {
  transform: translateY(-1px);
  background: #814326;
  box-shadow: 0 14px 24px rgba(154,85,51,.24);
}
.secondaryButton {
  color: var(--moss);
  border-color: var(--hairline);
  background: var(--field);
}
.secondaryButton:hover { border-color: var(--clay); }
.signaturePreview {
  display: block;
  width: 100%;
  margin-top: 14px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: white;
}
.formFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 56px 36px;
  background: rgba(255,253,248,.5);
}
.footerNote {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.statusMessage {
  margin: 0;
  padding: 18px 50px;
  border-top: 1px solid var(--hairline);
  font-weight: 800;
}
.statusSuccess {
  background: rgba(49,81,56,.14);
  color: var(--success);
}
.statusError {
  background: rgba(154,85,51,.13);
  color: var(--danger);
}
.signatureDialog {
  width: min(900px, calc(100% - 24px));
  border: 0;
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 30px 80px rgba(34,28,18,.25);
}
.signatureDialog::backdrop { background: rgba(32,32,22,.58); }
.dialogShell {
  padding: 26px;
  background: var(--panel);
}
.dialogHead { margin-bottom: 15px; }
#signatureCanvas {
  width: 100%;
  height: 260px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--field);
  touch-action: none;
}
.dialogActions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.hidden { display: none !important; }

@media (max-width: 1100px) {
  .pageShell { grid-template-columns: 1fr; }
  .infoRail {
    position: relative;
    top: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 28px;
  }
  .brandLockup { grid-column: 1 / -1; }
  .railIntro { padding: 0; }
  .sectionNav { margin: 0; }
  .completionCard { align-self: end; margin-top: 0; }
  .railFoot { display: none; }
}

@media (max-width: 720px) {
  .pageShell {
    width: calc(100% - 20px);
    margin: 10px auto;
    gap: 10px;
  }
  .infoRail,
  .formPanel {
    border-radius: 8px;
  }
  .infoRail {
    display: block;
    padding: 22px;
  }
  .railIntro { padding: 23px 0 15px; }
  .sectionNav { margin: 0 0 18px; }
  .panelHeader {
    grid-template-columns: 1fr;
    padding: 30px 22px 26px;
  }
  .headerBrandMark {
    width: 92px;
    height: 92px;
  }
  .headerEmblem {
    width: 66px;
    height: 66px;
  }
  .readingNote {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 22px;
  }
  .sectionCard { padding: 24px 22px; }
  .fieldGrid,
  .signatureGrid { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .formFooter {
    align-items: stretch;
    flex-direction: column;
    padding: 24px 22px 28px;
  }
  .statusMessage { padding: 16px 20px; }
  .submitButton,
  .signatureButton,
  .secondaryButton { width: 100%; }
  .dialogActions { flex-direction: column; }
  h2 { font-size: 2.55rem; }
}

/* Mobile/tablet-first intake composition. The form is the product, so the navigation rail is intentionally gone. */
.pageShell { width: min(920px, calc(100% - 28px)); display: block; margin: 18px auto 48px; }
.infoRail { display: none; }
.formPanel { min-height: 0; border-radius: 22px; background: #fbf7ef; box-shadow: 0 22px 60px rgba(49,47,32,.13); }
.mobileHeader { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 30px; border-bottom: 1px solid var(--hairline); background: #312f20; color: #fffdf8; }
.brandLogo { display: none; }
.brandMark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fffdf8; overflow: hidden; }
.brandMark img { width: 38px; height: 38px; object-fit: contain; }
.brandWordmark { color: #fffdf8; font-family: Georgia, 'Times New Roman', serif; font-size: 30px; line-height: .9; letter-spacing: -.04em; }
.brandWordmark small { display: block; margin-top: 5px; color: var(--sand); font-family: var(--futura); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.mobileHeaderMeta { display: grid; gap: 4px; text-align: right; color: var(--sand); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.mobileHeaderMeta span:last-child { color: #fffdf8; font-size: 13px; letter-spacing: .04em; }
.completionCard { margin: 0; padding: 18px 30px; border: 0; border-bottom: 1px solid rgba(180,155,115,.35); border-radius: 0; background: #4b472e; color: #fffdf8; }
.completionTop { font-size: 12px; }
.completionCard p { color: rgba(255,253,248,.72); }
.panelHeader { grid-template-columns: minmax(0, 1fr) 88px; gap: 22px; padding: 38px 44px 32px; background: #fbf7ef; }
.panelHeader h2 { max-width: 680px; font-size: clamp(2rem, 6vw, 4.7rem); letter-spacing: -.055em; }
.headerBrandMark { width: 88px; height: 88px; border-radius: 18px; }
.headerEmblem { width: 62px; height: 62px; }
.readingNote { padding: 16px 44px; background: #efe5d3; }
.sectionCard { padding: 32px 44px; }
.sectionCard:nth-of-type(even) { background: #fffdf8; }
.sectionHead { margin-bottom: 18px; }
label { font-size: .92rem; }
input { min-height: 52px; border-radius: 12px; }
.signatureGrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.formFooter { padding: 26px 44px 32px; }

@media (max-width: 720px) {
  .pageShell { width: calc(100% - 14px); margin: 7px auto 28px; }
  .formPanel { border-radius: 16px; }
  .mobileHeader { padding: 18px 18px; }
  .brandWordmark { font-size: 25px; }
  .mobileHeaderMeta { font-size: 8px; }
  .completionCard { padding: 16px 18px; }
  .panelHeader { grid-template-columns: 1fr; padding: 30px 22px 26px; }
  .headerBrandMark { width: 76px; height: 76px; }
  .readingNote { padding: 15px 22px; }
  .sectionCard { padding: 26px 22px; }
  .signatureGrid { grid-template-columns: 1fr; }
  .formFooter { padding: 24px 22px 28px; }
}

/* Mindset Forms UI kit refresh: organic, mobile-first, and calmer for repeat use. */
body {
  color: #2f2f21;
  font-family: var(--body);
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at 10% 0%, rgba(192,142,58,.18), transparent 30%),
    radial-gradient(circle at 100% 16%, rgba(96,108,56,.14), transparent 26%),
    linear-gradient(135deg, rgba(180,155,115,.18), rgba(232,220,199,.78)),
    #e8dcc7;
  background-size: auto;
}

.pageShell {
  width: min(1080px, calc(100% - 32px));
  margin: 24px auto 56px;
}

.formPanel {
  overflow: clip;
  border: 1px solid rgba(75,71,46,.14);
  border-radius: 28px;
  background: #e8dcc7;
  box-shadow: 0 26px 72px rgba(49,47,32,.14);
}

.mobileHeader {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 24px 34px;
  border-bottom: 1px solid rgba(232,220,199,.18);
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 38%),
    #4b472e;
}

.brandMark {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(232,220,199,.42);
  background: #e8dcc7;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.32);
}

.brandMark img {
  width: 42px;
  height: 42px;
}

.brandWordmark {
  font-family: var(--body);
  font-size: clamp(1.7rem, 5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -.04em;
}

.brandWordmark small {
  margin-top: 5px;
  color: #d4b895;
  font-family: var(--body);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.mobileHeaderMeta {
  min-width: 128px;
  padding: 10px 12px;
  border: 1px solid rgba(232,220,199,.22);
  border-radius: 999px;
  color: #d4b895;
  font-size: .58rem;
  letter-spacing: .1em;
  background: rgba(255,255,255,.045);
}

.mobileHeaderMeta span:last-child {
  color: #fffdf8;
  font-size: .72rem;
  letter-spacing: .02em;
}

.completionCard {
  display: grid;
  gap: 12px;
  padding: 20px 34px;
  border-bottom: 1px solid rgba(75,71,46,.12);
  background: #606c38;
}

.completionTop {
  align-items: center;
  color: rgba(255,253,248,.78);
  font-size: .78rem;
  font-weight: 600;
}

.completionTop strong {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,253,248,.14);
  font-size: .76rem;
}

.progressTrack {
  height: 9px;
  margin: 0;
  background: rgba(255,253,248,.2);
}

.progressTrack span {
  background: linear-gradient(90deg, #d4b895, #c66b3d);
}

.completionCard p {
  color: rgba(255,253,248,.78);
  font-size: .78rem;
}

.panelHeader {
  display: block;
  padding: 46px 54px 38px;
  border-bottom: 1px solid rgba(75,71,46,.13);
  background:
    linear-gradient(135deg, rgba(255,253,248,.52), rgba(232,220,199,.18)),
    #e8dcc7;
}

.eyebrow,
.sectionLabel {
  color: #9a5533;
  font-family: var(--body);
  font-size: .68rem;
  letter-spacing: .14em;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 760;
  letter-spacing: 0;
}

.panelHeader h2 {
  max-width: 760px;
  color: #4b472e;
  font-size: clamp(2.45rem, 8vw, 5.25rem);
  line-height: .9;
  text-transform: none;
}

.introText {
  max-width: 700px;
  margin-top: 20px;
  color: #686354;
  font-size: 1rem;
  line-height: 1.75;
}

.readingNote {
  grid-template-columns: 170px 1fr;
  padding: 20px 54px;
  border-bottom: 1px solid rgba(75,71,46,.14);
  background: #d4b895;
  color: rgba(47,47,33,.78);
}

.readingNote strong {
  font-family: var(--body);
  letter-spacing: .12em;
}

.sectionCard {
  margin: 0;
  padding: 38px 54px;
  border-bottom: 1px solid rgba(75,71,46,.13);
  background: #f8f0df;
}

.sectionCard:nth-of-type(even) {
  background: #efe4cf;
}

.sectionHead {
  margin-bottom: 24px;
}

.sectionHead h3 {
  color: #4b472e;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.fieldGrid {
  gap: 18px;
}

label {
  gap: 9px;
  color: #4b472e;
  font-size: .87rem;
  font-weight: 700;
}

input {
  min-height: 58px;
  padding: 15px 16px;
  border: 1px solid rgba(75,71,46,.22);
  border-radius: 18px;
  background: rgba(255,253,248,.82);
  color: #202016;
  font-family: var(--body);
  font-size: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}

input:hover {
  border-color: rgba(154,85,51,.54);
}

input:focus {
  border-color: #9a5533;
  background: #fffdf8;
  box-shadow: 0 0 0 4px rgba(154,85,51,.15), inset 0 1px 0 rgba(255,255,255,.7);
}

.copyBlock {
  margin: 0;
  padding: 0;
  border: 0;
}

.copyBlock h4 {
  color: #606c38;
  font-size: 1.13rem;
}

.copyBlock p,
.copyBlock li {
  color: #5f594b;
  font-size: .98rem;
  line-height: 1.78;
}

.crisisBlock {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid rgba(154,85,51,.2);
  border-radius: 24px;
  background: rgba(212,184,149,.42);
}

.checks {
  gap: 12px;
}

.checkRow,
.toggleRow,
.signatureCard {
  border: 1px solid rgba(75,71,46,.16);
  border-radius: 22px;
  background: rgba(255,253,248,.78);
  box-shadow: 0 10px 28px rgba(49,47,32,.06);
}

.checkRow {
  padding: 17px 18px;
  color: #4b472e;
  font-weight: 600;
  line-height: 1.55;
}

.toggleRow {
  padding: 16px 18px;
}

.signatureGrid {
  gap: 18px;
  margin-top: 20px;
}

.signatureCard {
  padding: 22px;
}

.signatureTitle {
  color: #4b472e;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 720;
}

.signatureButton,
.submitButton,
.secondaryButton {
  min-height: 52px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: .92rem;
  font-weight: 800;
}

.signatureButton,
.submitButton {
  background: #9a5533;
  box-shadow: 0 12px 22px rgba(154,85,51,.18);
}

.signatureButton:hover,
.submitButton:hover {
  background: #7d4329;
}

.secondaryButton {
  color: #4b472e;
  background: #e8dcc7;
}

.signaturePreview {
  min-height: 92px;
  border-color: rgba(75,71,46,.18);
  border-radius: 18px;
  background: #fffdf8;
}

.formFooter {
  padding: 30px 54px 38px;
  background: #4b472e;
}

.footerNote {
  color: rgba(255,253,248,.74);
}

.footerNote strong {
  color: #d4b895;
}

.statusMessage {
  padding: 18px 54px;
  border-top: 0;
}

.signatureDialog {
  width: min(820px, calc(100% - 24px));
  border-radius: 28px;
  background: transparent;
}

.dialogShell {
  padding: 26px;
  border: 1px solid rgba(75,71,46,.16);
  border-radius: 28px;
  background: #e8dcc7;
}

.dialogHead h3 {
  font-size: 2rem;
}

#signatureCanvas {
  height: min(48vh, 300px);
  border: 1px solid rgba(75,71,46,.22);
  border-radius: 22px;
  background:
    linear-gradient(180deg, transparent calc(100% - 48px), rgba(96,108,56,.2) calc(100% - 47px), transparent calc(100% - 46px)),
    #fffdf8;
}

.dialogActions {
  align-items: center;
}

@media (min-width: 900px) {
  .fieldGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #details .fieldGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #details .fieldGrid label:nth-child(1),
  #details .fieldGrid label:nth-child(4),
  #details .fieldGrid label:nth-child(5) {
    grid-column: span 3;
  }

  #details .fieldGrid label:nth-child(2),
  #details .fieldGrid label:nth-child(3) {
    grid-column: span 3;
  }
}

@media (max-width: 720px) {
  .pageShell {
    width: calc(100% - 16px);
    margin: 8px auto 30px;
  }

  .formPanel {
    border-radius: 24px;
  }

  .mobileHeader {
    grid-template-columns: auto 1fr;
    padding: 18px;
  }

  .mobileHeaderMeta {
    grid-column: 1 / -1;
    justify-self: start;
    min-width: 0;
    text-align: left;
  }

  .brandMark {
    width: 50px;
    height: 50px;
  }

  .brandWordmark {
    font-size: 1.85rem;
  }

  .completionCard,
  .panelHeader,
  .readingNote,
  .sectionCard,
  .formFooter,
  .statusMessage {
    padding-left: 20px;
    padding-right: 20px;
  }

  .panelHeader {
    padding-top: 34px;
    padding-bottom: 30px;
  }

  .panelHeader h2 {
    font-size: clamp(2.25rem, 14vw, 3.45rem);
  }

  .readingNote,
  .fieldGrid,
  .signatureGrid {
    grid-template-columns: 1fr;
  }

  .sectionCard {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  input {
    min-height: 56px;
  }

  .formFooter {
    align-items: stretch;
    gap: 18px;
  }

  .dialogShell {
    padding: 18px;
  }

  #signatureCanvas {
    height: 260px;
  }
}

/* Task Manager reference system: same Mindset workspace language, adapted for public forms. */
:root {
  --tm-bg: #faf8f5;
  --tm-surface: #ffffff;
  --tm-subtle: #f5f2ed;
  --tm-subtle-2: #eee9e1;
  --tm-border: #ddd5c9;
  --tm-border-soft: #ece7df;
  --tm-ink: #3d3224;
  --tm-muted: #8a7d6e;
  --tm-accent: #9A5533;
  --tm-accent-hover: #7e4428;
  --tm-accent-light: rgba(154,85,51,0.08);
  --tm-gold: #B49B73;
  --tm-olive: #4B472E;
  --tm-mint: #5a8a6a;
  --tm-red: #b84233;
  --tm-radius: 12px;
  --tm-radius-lg: 16px;
  --tm-radius-xl: 20px;
  --tm-shadow-sm: 0 1px 3px rgba(75,71,46,0.06);
  --tm-shadow: 0 4px 16px rgba(75,71,46,0.08);
  --tm-shadow-lg: 0 8px 32px rgba(75,71,46,0.1);
  --body: "Plus Jakarta Sans", system-ui, sans-serif;
  --display: "Plus Jakarta Sans", system-ui, sans-serif;
}

body {
  color: var(--tm-ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(154,85,51,0.07), transparent 48%),
    var(--tm-bg);
}

.pageShell {
  width: min(1120px, calc(100% - 32px));
  margin: 24px auto 56px;
}

.formPanel {
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-xl);
  background: var(--tm-surface);
  box-shadow: var(--tm-shadow-lg);
}

.mobileHeader {
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--tm-border);
  background: var(--tm-surface);
  color: var(--tm-ink);
}

.brandMark {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

.brandMark img {
  width: 100%;
  height: 100%;
}

.brandWordmark {
  color: var(--tm-ink);
  font-family: var(--body);
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.brandWordmark small {
  margin-top: 4px;
  color: var(--tm-muted);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.mobileHeaderMeta {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--tm-border);
  border-radius: 999px;
  color: var(--tm-muted);
  background: var(--tm-subtle);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.mobileHeaderMeta span:last-child {
  color: var(--tm-accent);
  font-size: 11px;
  font-weight: 800;
}

.completionCard {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--tm-border);
  background: var(--tm-subtle);
  color: var(--tm-ink);
}

.completionTop {
  color: var(--tm-muted);
  font-size: 12px;
  font-weight: 600;
}

.completionTop strong {
  color: var(--tm-ink);
  background: var(--tm-surface);
  box-shadow: var(--tm-shadow-sm);
}

.progressTrack {
  height: 7px;
  background: var(--tm-subtle-2);
}

.progressTrack span {
  background: linear-gradient(90deg, var(--tm-accent), var(--tm-gold));
}

.completionCard p {
  color: var(--tm-muted);
  font-size: 12px;
}

.panelHeader {
  padding: 32px 36px 28px;
  border-bottom: 1px solid var(--tm-border);
  background: var(--tm-surface);
}

.eyebrow,
.sectionLabel {
  color: var(--tm-muted);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--tm-ink);
  font-family: var(--body);
  font-weight: 800;
}

.panelHeader h2 {
  max-width: 820px;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-transform: none;
}

.introText {
  max-width: 720px;
  margin-top: 14px;
  color: var(--tm-muted);
  font-size: 14px;
  line-height: 1.65;
}

.readingNote {
  grid-template-columns: 150px 1fr;
  gap: 18px;
  padding: 14px 36px;
  border-bottom: 1px solid var(--tm-border);
  background: var(--tm-subtle);
  color: var(--tm-muted);
  font-size: 13px;
}

.readingNote strong {
  color: var(--tm-ink);
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.sectionCard {
  margin: 0;
  padding: 28px 36px;
  border-bottom: 1px solid var(--tm-border);
  background: var(--tm-surface);
  position: relative;
}

.sectionCard:nth-of-type(even) {
  background: var(--tm-bg);
}

.sectionCard::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--section-accent, rgba(154,85,51,0.28));
}

.sectionCard + .sectionCard {
  border-top: 12px solid var(--section-break, #efe4cf);
}

#details {
  --section-accent: #c08e3a;
  --section-break: #f3ead9;
}

#agreement {
  --section-accent: #8b9d83;
  --section-break: #e9deca;
}

#support {
  --section-accent: #b08b6e;
  --section-break: #f0dfd8;
}

#confirmation {
  --section-accent: #9a5533;
  --section-break: #eadfcf;
}

#signatures {
  --section-accent: #606c38;
  --section-break: #e7e8d8;
}

.sectionHead {
  margin-bottom: 18px;
}

.sectionHead h3 {
  color: var(--tm-ink);
  font-size: 20px;
  letter-spacing: -0.02em;
}

.fieldGrid {
  gap: 16px;
}

label {
  color: var(--tm-ink);
  font-size: 13px;
  font-weight: 600;
}

input {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--tm-border);
  border-radius: 10px;
  background: var(--tm-bg);
  color: var(--tm-ink);
  font-family: var(--body);
  font-size: 14px;
  box-shadow: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

input:hover {
  border-color: var(--tm-gold);
}

input:focus {
  border-color: var(--tm-accent);
  background: var(--tm-surface);
  box-shadow: 0 0 0 3px rgba(154,85,51,0.12);
}

.copyBlock h4 {
  color: var(--tm-ink);
  font-size: 15px;
  font-weight: 800;
}

.copyBlock h5 {
  margin: 16px 0 8px;
  color: var(--tm-ink);
  font-size: 13px;
  font-weight: 800;
}

.sectionNote {
  margin: 0 0 14px;
  color: var(--tm-muted);
  font-size: 13px;
  line-height: 1.55;
}

.standaloneNote {
  margin-top: -4px;
}

.copyBlock p,
.copyBlock li {
  color: var(--tm-muted);
  font-size: 13px;
  line-height: 1.6;
}

.copyBlock + .copyBlock {
  margin-top: 18px;
}

.crisisBlock {
  margin-top: 18px;
  margin-bottom: 24px;
  padding: 16px 18px;
  border: 1px solid rgba(184,66,51,0.18);
  border-radius: var(--tm-radius);
  background: rgba(184,66,51,0.05);
}

.crisisBlock h4 {
  color: var(--tm-red);
}

.crisisBlock + .copyBlock {
  margin-top: 0;
  padding-top: 2px;
}

.checkRow,
.toggleRow,
.signatureCard {
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  background: var(--tm-surface);
  box-shadow: var(--tm-shadow-sm);
}

.checkRow {
  padding: 14px 16px;
  color: var(--tm-ink);
  font-size: 13px;
  font-weight: 600;
}

.toggleRow {
  padding: 12px 14px;
}

.signatureGrid {
  gap: 16px;
}

.signatureCard {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.clientSignatureCard {
  background:
    linear-gradient(135deg, rgba(192,142,58,0.12), rgba(255,253,248,0.96));
  border-color: rgba(192,142,58,0.34);
}

.clinicianSignatureCard {
  background:
    linear-gradient(135deg, rgba(139,157,131,0.16), rgba(255,253,248,0.96));
  border-color: rgba(139,157,131,0.38);
}

.signatureTitle {
  color: var(--tm-ink);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 0;
}

.signatureButton,
.submitButton,
.secondaryButton {
  min-height: 44px;
  border-radius: 10px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}

.signatureButton,
.submitButton {
  background: var(--tm-accent);
}

.signatureButton:hover,
.submitButton:hover {
  background: var(--tm-accent-hover);
  box-shadow: none;
}

.secondaryButton {
  color: var(--tm-ink);
  border-color: var(--tm-border);
  background: var(--tm-surface);
}

.secondaryButton:hover {
  color: var(--tm-accent);
  border-color: var(--tm-accent);
}

.signaturePreview {
  min-height: 76px;
  border-color: var(--tm-border);
  border-radius: 10px;
  background: var(--tm-bg);
}

.thanksBlock {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  background: var(--tm-subtle);
}

.thanksBlock p:last-child {
  margin-bottom: 0;
  color: var(--tm-accent);
  font-weight: 800;
}

.formFooter {
  padding: 20px 36px 28px;
  border-top: 0;
  background: var(--tm-surface);
}

.footerNote {
  color: var(--tm-muted);
  font-size: 13px;
}

.footerNote strong {
  color: var(--tm-accent);
}

.statusMessage {
  padding: 14px 36px;
  border-top: 1px solid var(--tm-border);
  font-size: 13px;
}

.statusSuccess {
  background: rgba(90,138,106,0.08);
  color: var(--tm-mint);
}

.statusError {
  background: rgba(184,66,51,0.08);
  color: var(--tm-red);
}

.thankYouPage {
  min-height: min(680px, calc(100vh - 32px));
  padding: 48px 36px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 16%, rgba(192,142,58,0.16), transparent 34%),
    linear-gradient(180deg, var(--tm-surface), var(--tm-bg));
}

.isSubmitted .mobileHeader,
.isSubmitted .completionCard,
.isSubmitted .panelHeader,
.isSubmitted .readingNote,
.isSubmitted .consentForm,
.isSubmitted .statusMessage {
  display: none;
}

.thankYouMark {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(154,85,51,0.18);
  border-radius: 24px;
  background: rgba(255,253,248,0.86);
  box-shadow: var(--tm-shadow-sm);
}

.thankYouMark img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.thankYouPage h2 {
  max-width: 520px;
  font-size: clamp(2rem, 8vw, 3.5rem);
  line-height: .95;
}

.thankYouPage > p:not(.eyebrow):not(.thankYouFoot) {
  max-width: 520px;
  margin: 0;
  color: var(--tm-muted);
  font-size: 15px;
  line-height: 1.65;
}

.thankYouReference {
  width: min(100%, 420px);
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  background: var(--tm-surface);
  box-shadow: var(--tm-shadow-sm);
}

.thankYouReference span {
  display: block;
  margin-bottom: 5px;
  color: var(--tm-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.thankYouReference strong {
  color: var(--tm-ink);
  font-size: 16px;
}

.thankYouFoot {
  margin: 12px 0 0;
  color: var(--tm-accent);
  font-size: 13px;
  font-weight: 800;
}

.signatureDialog {
  width: min(760px, calc(100% - 24px));
  border-radius: var(--tm-radius-xl);
}

.dialogShell {
  padding: 24px;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-xl);
  background: var(--tm-surface);
  box-shadow: var(--tm-shadow-lg);
}

.dialogHead h3 {
  font-size: 22px;
}

#signatureCanvas {
  height: min(46vh, 280px);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  background:
    linear-gradient(180deg, transparent calc(100% - 44px), rgba(154,85,51,0.16) calc(100% - 43px), transparent calc(100% - 42px)),
    var(--tm-bg);
}

@media (min-width: 900px) {
  .fieldGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #details .fieldGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .pageShell {
    width: calc(100% - 16px);
    margin: 8px auto 32px;
  }

  .formPanel {
    border-radius: var(--tm-radius-lg);
  }

  .mobileHeader {
    grid-template-columns: auto 1fr;
    padding: 14px 16px;
  }

  .mobileHeaderMeta {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: left;
  }

  .brandWordmark {
    font-size: 1.12rem;
  }

  .brandWordmark small {
    font-size: 10px;
  }

  .completionCard,
  .panelHeader,
  .readingNote,
  .sectionCard,
  .formFooter,
  .statusMessage,
  .thankYouPage {
    padding-left: 16px;
    padding-right: 16px;
  }

  .panelHeader {
    padding-top: 24px;
    padding-bottom: 22px;
  }

  .panelHeader h2 {
    font-size: clamp(2rem, 12vw, 2.75rem);
  }

  .readingNote {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .sectionCard {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .sectionHead h3 {
    font-size: 18px;
  }

  .fieldGrid,
  .signatureGrid {
    grid-template-columns: 1fr;
  }

  input {
    min-height: 48px;
  }

  .formFooter {
    align-items: stretch;
  }

  .signatureDialog {
    width: calc(100% - 16px);
  }

  .dialogShell {
    padding: 16px;
  }

  #signatureCanvas {
    height: 250px;
  }
}

/* ───────────── Premium polish pass ───────────── */
/* A calmer, editorial layer: serif display type, warmer surfaces, softer geometry.
   Overrides the Task Manager reference system for a more finished, adult feel. */
:root {
  --p-cream: #f6efe1;
  --p-cream-warm: #fbf5e8;
  --p-surface: #fdfaf3;
  --p-elevated: #ffffff;
  --p-border: #e6dcc7;
  --p-border-soft: #efe6d4;
  --p-hairline: rgba(75, 71, 46, 0.10);
  --p-ink: #2c2a20;
  --p-ink-soft: #4b472e;
  --p-muted: #7c7460;
  --p-muted-2: #a19781;
  --p-terracotta: #9a5533;
  --p-terracotta-deep: #7d4229;
  --p-terracotta-soft: rgba(154, 85, 51, 0.10);
  --p-olive: #606c38;
  --p-gold: #c08e3a;
  --p-shadow-xs: 0 1px 2px rgba(49, 47, 32, 0.05);
  --p-shadow-sm: 0 2px 8px rgba(49, 47, 32, 0.06);
  --p-shadow: 0 12px 32px rgba(49, 47, 32, 0.09), 0 2px 6px rgba(49, 47, 32, 0.05);
  --p-shadow-lg: 0 28px 64px rgba(49, 47, 32, 0.13), 0 4px 10px rgba(49, 47, 32, 0.06);
  --p-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body {
  color: var(--p-ink);
  background:
    radial-gradient(ellipse at 12% -6%, rgba(154, 85, 51, 0.08), transparent 42%),
    radial-gradient(ellipse at 100% 8%, rgba(96, 108, 56, 0.06), transparent 38%),
    linear-gradient(180deg, #f2ead9 0%, #ecdfc7 100%);
}

.pageShell {
  width: min(1080px, calc(100% - 40px));
  margin: 36px auto 64px;
}

.formPanel {
  overflow: clip;
  border: 1px solid var(--p-border);
  border-radius: 24px;
  background: var(--p-surface);
  box-shadow: var(--p-shadow-lg);
}

/* Header: brand line stays clean, no heavy dark bar */
.mobileHeader {
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  padding: 22px 32px;
  border-bottom: 1px solid var(--p-hairline);
  background: var(--p-elevated);
  color: var(--p-ink);
}

.brandMark {
  width: 44px;
  height: 44px;
  padding: 4px;
  border: 1px solid var(--p-border);
  border-radius: 12px;
  background: var(--p-cream-warm);
  box-shadow: var(--p-shadow-xs), var(--p-inset-highlight);
}

.brandMark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brandWordmark {
  color: var(--p-ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.0;
}

.brandWordmark small {
  margin-top: 6px;
  color: var(--p-muted);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Progress row: quiet, cream, more editorial */
.completionCard {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px 32px 18px;
  border-bottom: 1px solid var(--p-hairline);
  background: var(--p-cream-warm);
  color: var(--p-ink-soft);
}

.completionTop {
  color: var(--p-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.completionTop strong {
  padding: 5px 11px;
  border: 1px solid var(--p-border);
  border-radius: 999px;
  background: var(--p-elevated);
  color: var(--p-terracotta);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  box-shadow: var(--p-shadow-xs);
}

.progressTrack {
  height: 5px;
  border-radius: 999px;
  background: #e6dcc7;
}

.progressTrack span {
  background: linear-gradient(90deg, var(--p-gold), var(--p-terracotta));
}

.completionCard p {
  color: var(--p-muted);
  font-size: 12px;
  letter-spacing: 0.01em;
}

/* Editorial page header */
.panelHeader {
  padding: 48px 44px 36px;
  border-bottom: 1px solid var(--p-hairline);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(192, 142, 58, 0.09), transparent 60%),
    var(--p-elevated);
}

.eyebrow,
.sectionLabel {
  color: var(--p-terracotta);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1, h2, h3, h4, h5,
.brandWordmark,
.signatureTitle,
.thankYouPage h2 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 500;
}

.panelHeader h2 {
  max-width: 760px;
  margin-top: 4px;
  color: var(--p-ink);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-transform: none;
  font-variation-settings: "SOFT" 40, "WONK" 0;
}

.introText {
  max-width: 640px;
  margin-top: 18px;
  color: var(--p-muted);
  font-size: 15px;
  line-height: 1.72;
}

.readingNote {
  grid-template-columns: 160px 1fr;
  gap: 22px;
  padding: 18px 44px;
  border-bottom: 1px solid var(--p-hairline);
  background: var(--p-cream-warm);
  color: var(--p-muted);
  font-size: 13px;
  line-height: 1.6;
}

.readingNote strong {
  color: var(--p-ink-soft);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Sections: alternating cream, no chunky break, subtle side rule */
.sectionCard {
  margin: 0;
  padding: 44px 44px 40px;
  border-bottom: 1px solid var(--p-hairline);
  background: var(--p-elevated);
  position: relative;
}

.sectionCard:nth-of-type(even) {
  background: var(--p-cream-warm);
}

.sectionCard::before {
  content: none;
}

.sectionCard + .sectionCard {
  border-top: 0;
}

/* Section accent as a soft top-left ornament instead of a hard stripe */
.sectionCard::after {
  content: "";
  position: absolute;
  top: 44px;
  left: 0;
  width: 3px;
  height: 32px;
  border-radius: 0 3px 3px 0;
  background: var(--section-accent, var(--p-terracotta));
  opacity: 0.85;
}

#details { --section-accent: var(--p-gold); }
#agreement { --section-accent: var(--p-olive); }
#support { --section-accent: var(--p-terracotta); }
#confirmation { --section-accent: var(--p-terracotta-deep); }
#signatures { --section-accent: var(--p-olive); }

.sectionHead {
  margin-bottom: 24px;
}

.sectionHead h3 {
  color: var(--p-ink);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 550;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.sectionLabel {
  margin-bottom: 8px;
}

/* Fields: refined borders, gentle focus */
.fieldGrid { gap: 18px; }

label {
  color: var(--p-ink-soft);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

input {
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--p-border);
  border-radius: 10px;
  background: var(--p-elevated);
  color: var(--p-ink);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--p-shadow-xs);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input::placeholder { color: var(--p-muted-2); }

input:hover {
  border-color: #d3c5a6;
}

input:focus {
  outline: none;
  border-color: var(--p-terracotta);
  background: #fffdf8;
  box-shadow: 0 0 0 4px rgba(154, 85, 51, 0.10), var(--p-shadow-xs);
}

/* Body copy inside sections: better hierarchy */
.copyBlock h4 {
  margin-top: 22px;
  color: var(--p-ink-soft);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 550;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.copyBlock h4:first-child { margin-top: 0; }

.copyBlock h5 {
  margin: 18px 0 8px;
  color: var(--p-ink-soft);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.copyBlock p,
.copyBlock li {
  color: var(--p-muted);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.72;
}

.copyBlock ul { margin: 8px 0 0; padding-left: 22px; }
.copyBlock li { margin: 4px 0; }

.sectionNote {
  color: var(--p-muted);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
}

/* Crisis: elegant tinted card, not shouty */
.crisisBlock {
  margin-top: 22px;
  margin-bottom: 24px;
  padding: 20px 22px;
  border: 1px solid rgba(184, 66, 51, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.6), rgba(255, 253, 248, 0.2)),
    rgba(184, 66, 51, 0.06);
  box-shadow: var(--p-shadow-sm), var(--p-inset-highlight);
}

.crisisBlock h4 {
  margin-top: 0;
  color: var(--p-terracotta-deep);
}

/* Confirmation checkboxes: quiet cards */
.checks { gap: 10px; }

.checkRow {
  padding: 15px 16px;
  border: 1px solid var(--p-border);
  border-radius: 12px;
  background: var(--p-elevated);
  color: var(--p-ink-soft);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  box-shadow: var(--p-shadow-xs);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.checkRow:hover {
  border-color: #d3c5a6;
  box-shadow: var(--p-shadow-sm);
}

.checkRow input,
.toggleRow input {
  accent-color: var(--p-terracotta);
}

.toggleRow {
  padding: 14px 16px;
  border: 1px solid var(--p-border);
  border-radius: 12px;
  background: var(--p-elevated);
  color: var(--p-ink-soft);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--p-shadow-xs);
}

/* Signature cards: tactile, subtly tinted */
.signatureGrid { gap: 18px; margin-top: 20px; }

.signatureCard {
  padding: 20px;
  border: 1px solid var(--p-border);
  border-radius: 16px;
  background: var(--p-elevated);
  box-shadow: var(--p-shadow-sm), var(--p-inset-highlight);
}

.clientSignatureCard {
  background:
    linear-gradient(140deg, rgba(192, 142, 58, 0.10) 0%, transparent 50%),
    var(--p-elevated);
  border-color: rgba(192, 142, 58, 0.30);
}

.clinicianSignatureCard {
  background:
    linear-gradient(140deg, rgba(96, 108, 56, 0.10) 0%, transparent 50%),
    var(--p-elevated);
  border-color: rgba(96, 108, 56, 0.30);
}

.signatureTitle {
  margin: 0 0 14px;
  color: var(--p-ink);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 550;
  font-size: 17px;
  letter-spacing: -0.005em;
}

.signaturePreview {
  min-height: 88px;
  border: 1px solid var(--p-border);
  border-radius: 10px;
  background: #ffffff;
}

/* Buttons: premium terracotta with restrained shadow */
.signatureButton,
.submitButton,
.secondaryButton {
  min-height: 48px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

.signatureButton,
.submitButton {
  color: #fffdf8;
  background: linear-gradient(180deg, #a75c37 0%, var(--p-terracotta) 100%);
  box-shadow: 0 10px 22px rgba(154, 85, 51, 0.24), var(--p-inset-highlight);
}

.signatureButton:hover,
.submitButton:hover {
  background: linear-gradient(180deg, #92492a 0%, var(--p-terracotta-deep) 100%);
  box-shadow: 0 14px 28px rgba(154, 85, 51, 0.28), var(--p-inset-highlight);
  transform: translateY(-1px);
}

.submitButton {
  min-height: 56px;
  padding: 16px 32px;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.secondaryButton {
  color: var(--p-ink-soft);
  border-color: var(--p-border);
  background: var(--p-elevated);
  box-shadow: var(--p-shadow-xs);
}

.secondaryButton:hover {
  color: var(--p-terracotta);
  border-color: var(--p-terracotta);
  background: var(--p-elevated);
}

/* Closing "thank you" block inside form */
.thanksBlock {
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px solid var(--p-border);
  border-radius: 16px;
  background:
    linear-gradient(140deg, rgba(192, 142, 58, 0.08), transparent 60%),
    var(--p-cream-warm);
  box-shadow: var(--p-inset-highlight);
}

.thanksBlock p {
  color: var(--p-ink-soft);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.65;
}

.thanksBlock p:last-child {
  margin-top: 8px;
  margin-bottom: 0;
  color: var(--p-terracotta);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 550;
  font-size: 16px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

/* Footer submit area */
.formFooter {
  padding: 28px 44px 36px;
  border-top: 1px solid var(--p-hairline);
  background: var(--p-cream-warm);
}

.footerNote {
  color: var(--p-muted);
  font-size: 13px;
}

/* Thank-you screen: editorial and calm */
.thankYouPage {
  min-height: min(680px, calc(100vh - 32px));
  padding: 64px 44px;
  gap: 18px;
  background:
    radial-gradient(circle at 50% 12%, rgba(192, 142, 58, 0.18), transparent 40%),
    linear-gradient(180deg, var(--p-elevated) 0%, var(--p-cream-warm) 100%);
}

.thankYouMark {
  width: 84px;
  height: 84px;
  border: 1px solid var(--p-border);
  border-radius: 26px;
  background: var(--p-elevated);
  box-shadow: var(--p-shadow-sm), var(--p-inset-highlight);
}

.thankYouMark img { width: 52px; height: 52px; }

.thankYouPage h2 {
  max-width: 560px;
  color: var(--p-ink);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: none;
}

.thankYouPage > p:not(.eyebrow):not(.thankYouFoot) {
  max-width: 480px;
  color: var(--p-muted);
  font-size: 15.5px;
  line-height: 1.72;
}

.thankYouReference {
  width: min(100%, 380px);
  margin-top: 8px;
  padding: 18px 20px;
  border: 1px solid var(--p-border);
  border-radius: 14px;
  background: var(--p-elevated);
  box-shadow: var(--p-shadow-sm);
}

.thankYouReference span {
  color: var(--p-muted);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.thankYouReference strong {
  color: var(--p-terracotta);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 550;
  font-size: 20px;
  letter-spacing: 0.02em;
}

.thankYouFoot {
  margin-top: 16px;
  color: var(--p-terracotta);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 550;
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

/* Signature dialog */
.signatureDialog {
  border-radius: 20px;
}

.dialogShell {
  padding: 26px;
  border: 1px solid var(--p-border);
  border-radius: 20px;
  background: var(--p-elevated);
  box-shadow: var(--p-shadow-lg);
}

.dialogHead h3 {
  color: var(--p-ink);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 550;
  font-size: 22px;
  letter-spacing: -0.02em;
}

#signatureCanvas {
  border: 1px solid var(--p-border);
  border-radius: 14px;
  background:
    linear-gradient(180deg, transparent calc(100% - 46px), rgba(154, 85, 51, 0.18) calc(100% - 45px), transparent calc(100% - 44px)),
    var(--p-cream-warm);
}

@media (max-width: 720px) {
  .pageShell {
    width: calc(100% - 20px);
    margin: 14px auto 32px;
  }
  .formPanel { border-radius: 18px; }
  .mobileHeader { padding: 16px 18px; }
  .panelHeader { padding: 30px 20px 26px; }
  .readingNote { padding: 16px 20px; grid-template-columns: 1fr; }
  .sectionCard { padding: 32px 20px 28px; }
  .sectionCard::after { top: 32px; }
  .sectionHead h3 { font-size: 1.35rem; }
  .formFooter { padding: 24px 20px 30px; }
  .thankYouPage { padding: 48px 24px; }
}

/* ---------------------------------------------------------- phone format */

/*
 * iOS zooms the page when a focused field renders below 16px and does not zoom
 * back out, which strands a client mid-form on a magnified page. The fix is the
 * font size; disabling pinch zoom would be worse, since this form is long and
 * some clients will want to magnify it.
 */
@media (max-width: 1024px), (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Thumb-sized targets, per the iOS guideline of 44px. */
  .signatureButton,
  .submitButton,
  button {
    min-height: 44px;
  }

  /* The signature box is the one thing that must be comfortable to draw in. */
  #signatureCanvas {
    min-height: 180px;
    touch-action: none;
  }
}