/* The Consulting Room signup (#/signup and #/join in /app/), PSY-2603, October 28, 2026.
   Loaded only by the app shell (rebuild/app/index.html); every rule is scoped under .cr-join,
   the root viewJoin() and viewWelcome() in rebuild/assets/app.js render, so no other app view moves.
   Since October 30, 2026 (Seph: "model the homepage") the hero is the homepage hero, as the therapist
   family's room hero (chrome.css, .hero2--room, PR 119): a real member's portrait under --hero-grade,
   white type, the h1 at the homepage's .hero-title scale and weight pattern (600, a span.t-light opener
   at 300), the lede at 1.22rem in rgba(255,255,255,.94);
   the white form sheet overlaps the hero's lower edge the way the finder sheet does on the hub. Every
   heading below the hero is on the homepage's .display-l scale and weight. Type comes from the site's
   self-hosted fonts.css (Spectral 300 to 600); the italic 'Spectral Join' faces went with the italics. */

/* ---- shell: the view runs full bleed on cream ---- */
.app-wrap:has(> .cr-join) { max-width: none; padding: 0; overflow-wrap: normal; }
body:has(.cr-join) { background: #F8F1E6; }

.cr-join {
  --cr-cream: #F8F1E6; --cr-sheet: #FFFDF9; --cr-sand: #EFE4D2; --cr-ink: #2A211A; --cr-soft: #5E5145;
  --cr-line: #E2D5C0; --cr-line-2: #CDBBA0; --cr-honey: #E3AA3E; --cr-honey-ink: #C9881A; --cr-ochre: #8A5A12;
  --cr-wash: #F6E8C8; --cr-cocoa: #2A1E16; --cr-lit: #EDBE5E; --cr-on-cocoa: #F3E9DA; --cr-err: #9A2B12;
  --cr-serif: "Spectral", Georgia, "Times New Roman", serif;
  --cr-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* the homepage's .display-l: 44 px, 600 at 1280; 30.4 px at 390 (the family's h2.sec since PR 119) */
  --cr-display-l: 600 clamp(1.9rem, 3.6vw, 2.75rem)/1.1 var(--cr-serif);
  --cr-gut: 40px; --cr-max: 1200px; --cr-ease: cubic-bezier(.16, 1, .3, 1);
  --cr-overlap: 110px;
  background: var(--cr-cream); color: var(--cr-ink);
  font: 400 17px/1.6 var(--cr-sans); -webkit-font-smoothing: antialiased;
}
.cr-join *, .cr-join *::before, .cr-join *::after { box-sizing: border-box; }
.cr-join a { color: var(--cr-ochre); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cr-join :focus-visible { outline: 2px solid var(--cr-ochre); outline-offset: 3px; border-radius: 2px; }
.cr-join .cr-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.cr-join p { margin: 0; }
.cr-join .cr-wrap { max-width: var(--cr-max); margin: 0 auto; padding: 0 var(--cr-gut); }
/* every heading below the hero: the homepage's .display-l */
.cr-join .cr-leaving h2, .cr-join .cr-wait h3, .cr-join .cr-band h2, .cr-join.cr-state h1 {
  font: var(--cr-display-l); letter-spacing: -.024em; font-style: normal; color: inherit; margin: 0; text-wrap: balance; }

/* ---- the hero: the homepage's photo, grade and type ---- */
.cr-join .cr-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--hero-grade); color: var(--on-dark);
  padding: 40px 0 calc(var(--cr-overlap) + 40px); }
.cr-join .cr-photo { position: absolute; inset: 0 0 0 auto; width: 48%; z-index: -2; margin: 0; }
.cr-join .cr-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* PR 119's grade over the photo: 100% at its left edge, 88% a quarter in, so the copy sits on the grade (its bottom-up
   layer, which darkened the photo's foot for the caption, went with the caption) */
.cr-join .cr-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklch, var(--hero-grade) 55%, transparent) 0%, color-mix(in oklch, var(--hero-grade) 0%, transparent) 34%),
    linear-gradient(90deg, color-mix(in oklch, var(--hero-grade) 100%, transparent) 0%, color-mix(in oklch, var(--hero-grade) 88%, transparent) 25%, color-mix(in oklch, var(--hero-grade) 45%, transparent) 55%, color-mix(in oklch, var(--hero-grade) 4%, transparent) 100%); }
.cr-join .cr-hero-copy { max-width: 640px; }
.cr-join .cr-display { font: 600 clamp(2.7rem, 5.3vw, 4.5rem)/1.06 var(--cr-serif); letter-spacing: -.018em; margin: 0; color: var(--on-dark); text-wrap: initial; }
/* the homepage's weight pattern (main 6311bdfb, chrome.css .hero2--room h1 .t-light): 600 as the base, the opener in
   span.t-light at 300; never a 300 headline with one bold phrase */
.cr-join .cr-display .t-light { font-weight: 300; }
.cr-join .cr-display strong { font-weight: 600; }
.cr-join .cr-display .cr-line { display: block; }
.cr-join .cr-lede { font: 400 1.22rem/1.42 var(--cr-sans); color: rgba(255, 255, 255, .94); margin: 22px 0 0 !important; max-width: 34em; }
.cr-join .cr-held { margin: 18px 0 0 !important; padding: 12px 16px; background: var(--cr-wash); color: var(--cr-ink); border-left: 3px solid var(--cr-honey); font-size: 1rem; line-height: 1.5; max-width: 34em; }

/* ---- under the hero: the sheet (overlapping the hero's lower edge) and the trial timeline ---- */
.cr-join .cr-start { position: relative; z-index: 1; margin-top: calc(-1 * var(--cr-overlap)); padding-bottom: 56px; }
.cr-join .cr-start-grid { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: 56px; align-items: start; }
.cr-join .cr-notes { padding: 14px 4px 0; }
.cr-join .cr-notes > p { margin: 6px 0 0 !important; }

/* the white sheet with the honey top rule: email, ZIP, plan, the CTA */
.cr-join .cr-sheet { background: #fff; border-radius: 6px; padding: 30px 30px 20px; position: relative;
  box-shadow: 0 1px 0 rgba(42, 33, 26, .04), 0 30px 70px -30px rgba(60, 40, 15, .35); }
.cr-join .cr-sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 6px 6px 0 0; background: var(--cr-honey); }
.cr-join .cr-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "email zip" "plans cta" "plans why"; column-gap: 24px; align-items: start; }
.cr-join .cr-form > .cr-fld:has(#joinEmail) { grid-area: email; }
.cr-join .cr-form > .cr-fld:has(#joinZip) { grid-area: zip; }
.cr-join .cr-form > .cr-plans { grid-area: plans; }
.cr-join .cr-form > .cr-cta { grid-area: cta; }
.cr-join .cr-form > .cr-why-not { grid-area: why; }
.cr-join .cr-fld { margin: 0 0 18px; border: 0; padding: 0; min-width: 0; position: relative; }
.cr-join .cr-fld > label { display: block; font-weight: 600; font-size: 15px; margin: 0 0 8px; padding: 0; color: var(--cr-ink); }
.cr-join .cr-inp { display: block; width: 100%; max-width: none; font: 400 16px var(--cr-sans); color: var(--cr-ink); background: #fff;
  border: 1px solid var(--cr-line-2); border-radius: 4px; padding: 0 14px; height: 50px; margin: 0;
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.cr-join .cr-inp::placeholder { color: #7A6B5C; opacity: 1; }
.cr-join .cr-inp:hover { border-color: #B8A486; }
.cr-join .cr-inp:focus { outline: none; border-color: var(--cr-ochre); box-shadow: 0 0 0 3px rgba(227, 170, 62, .28); }
.cr-join .cr-inp:user-invalid { border-color: var(--cr-err); }
.cr-join .cr-help { font-size: 14px; color: var(--cr-soft); margin: 8px 0 0 !important; line-height: 1.45; }
.cr-join .cr-help b { color: var(--cr-ochre); font-weight: 600; }

/* the two plans: native radios drawn as blocks */
.cr-join .cr-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; border: 0; margin: 0; min-width: 0; }
.cr-join .cr-plan { position: relative; min-width: 0; display: grid; grid-template-columns: 20px 1fr; gap: 9px; border: 1px solid var(--cr-line-2); border-radius: 5px; background: #fff; padding: 14px 12px; cursor: pointer; margin: 0; font-weight: 400; transition: border-color .2s, background .2s; }
.cr-join .cr-plan:hover { border-color: var(--cr-ochre); }
.cr-join .cr-plan input { position: absolute; opacity: 0; margin: 0; width: 1px; height: 1px; }
.cr-join .cr-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--cr-line-2); margin-top: 3px; display: grid; place-items: center; transition: border-color .2s; }
.cr-join .cr-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cr-honey); transform: scale(0); transition: transform .25s var(--cr-ease); }
.cr-join .cr-plan:has(input:checked) { border-color: var(--cr-honey); background: #FFFBF1; box-shadow: inset 0 0 0 1px var(--cr-honey); }
.cr-join .cr-plan:has(input:checked) .cr-radio { border-color: var(--cr-honey); }
.cr-join .cr-plan:has(input:checked) .cr-radio::after { transform: scale(1); }
.cr-join .cr-plan:has(input:focus-visible) { outline: 2px solid var(--cr-ochre); outline-offset: 2px; }
.cr-join .cr-plan b { font: 500 23px/1.1 var(--cr-serif); display: block; color: var(--cr-ink); }
.cr-join .cr-plan b small { font: 400 14px var(--cr-sans); color: var(--cr-soft); }
.cr-join .cr-plan-note { display: block; font-size: 13px; color: var(--cr-soft); margin-top: 4px; line-height: 1.35; }
.cr-join .cr-save { display: inline-block; margin-top: 6px; font: 600 12px/1 var(--cr-sans); background: var(--cr-wash); color: var(--cr-ink); padding: 4px 7px; border-radius: 3px; }
.cr-join .cr-first { font-size: 14px; color: var(--cr-soft); line-height: 1.5; }
.cr-join .cr-first b { color: var(--cr-ink); font-weight: 600; }

/* the honey CTA: sand until the form is complete, the honey sweep once it is (the one gradient) */
.cr-join .cr-cta { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin: 0; border: 0; border-radius: 4px;
  font: 600 18px/1 var(--cr-sans); cursor: pointer; color: #5A4D40; background: var(--cr-sand); box-shadow: none;
  transition: background-position .5s, box-shadow .2s, color .2s; }
.cr-join .cr-cta.is-ready { color: var(--cr-ink); background-image: linear-gradient(to right, #E3AA3E 0%, #F2C14E 51%, #E3AA3E 100%); background-size: 200% auto; box-shadow: 0 10px 24px -12px rgba(138, 90, 14, .55); }
.cr-join .cr-cta.is-ready:hover, .cr-join .cr-cta.is-ready:focus-visible { background-position: right center; box-shadow: 0 14px 28px -12px rgba(138, 90, 14, .65); }
.cr-join .cr-cta:active { transform: translateY(1px); }
.cr-join .cr-cta:disabled { cursor: progress; transform: none; }
.cr-join .cr-cta:disabled::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(42, 33, 26, .25); border-top-color: var(--cr-ink); animation: cr-spin .8s linear infinite; }
@keyframes cr-spin { to { transform: rotate(360deg); } }
.cr-join .cr-why-not:empty { display: none; }
.cr-join .cr-why-not { font-size: 14px; color: var(--cr-soft); margin: 10px 0 0 !important; text-align: center; min-height: 1.45em; line-height: 1.45; }
.cr-join .cr-secure { display: block; font-size: 13px; color: var(--cr-soft); }
.cr-join .cr-secure svg { display: inline-block; vertical-align: -2px; margin-right: 7px; width: 15px; height: 15px; fill: none; stroke: var(--cr-soft); stroke-width: 1.6; }
.cr-join .cr-already { font-size: 14px; color: var(--cr-soft); }

/* leaving for Stripe: the sheet says where it is going while the browser navigates */
.cr-join .cr-leaving { display: none; text-align: left; padding: 6px 0 4px; }
.cr-join .cr-sheet.is-leaving form { display: none; }
.cr-join .cr-sheet.is-leaving .cr-leaving { display: block; }
.cr-join .cr-mark { width: 44px; height: 44px; display: block; }
.cr-join .cr-leaving h2 { margin-top: 14px; }
.cr-join .cr-leaving p { margin: 12px 0 0 !important; font-size: 16px; color: var(--cr-soft); }

/* the waitlist card (409 panel_full) and its joined state */
.cr-join .cr-wait:empty { display: none; }
.cr-join .cr-wait { margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid var(--cr-line); scroll-margin-top: 24px; }
.cr-join .cr-wait p { font-size: 15px; margin: 10px 0 0 !important; line-height: 1.5; }
.cr-join .cr-wait ul { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--cr-line); }
.cr-join .cr-wait li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cr-line); font-size: 15px; }
.cr-join .cr-wait li span { color: var(--cr-soft); text-align: right; }
.cr-join .cr-wait .cr-hold { color: var(--cr-soft); font-size: 14px; }
.cr-join .cr-wait .cr-fld { margin: 16px 0 0; max-width: 420px; }
.cr-join .cr-wait-btn { display: flex; width: 100%; max-width: 420px; align-items: center; justify-content: center; min-height: 52px; margin: 14px 0 0; border: 0; border-radius: 4px; background: var(--cr-ink); color: var(--cr-cream); font: 600 17px/1 var(--cr-sans); cursor: pointer; }
.cr-join .cr-wait-btn:hover { background: #45372C; }
.cr-join .cr-wait-btn:disabled { cursor: progress; opacity: .8; }
.cr-join .cr-wait.is-joined h3 { margin-top: 12px; }

/* the trial timeline: today at $0, thirty days, then the first charge (beside the sheet, under the hero's edge) */
.cr-join .cr-timeline { list-style: none; margin: 0; padding: calc(var(--cr-overlap) + 28px) 0 0; position: relative; }
.cr-join .cr-timeline::before { content: ""; position: absolute; left: 21px; top: calc(var(--cr-overlap) + 54px); bottom: 30px; width: 1px; background: var(--cr-line-2); }
.cr-join .cr-timeline li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 0 0 22px; position: relative; }
.cr-join .cr-dot { width: 44px; height: 44px; border-radius: 50%; background: var(--cr-sheet); border: 1px solid var(--cr-line-2); display: grid; place-items: center; font: 400 15px/1 var(--cr-serif); position: relative; z-index: 1; }
.cr-join .cr-timeline li:first-child .cr-dot { background: var(--cr-honey); border-color: var(--cr-honey); }
.cr-join .cr-timeline li:last-child .cr-dot { background: var(--cr-ink); border-color: var(--cr-ink); }
.cr-join .cr-dot svg { width: 22px; height: 22px; fill: none; stroke: var(--cr-cream); stroke-width: 1.5; stroke-linecap: round; }
.cr-join .cr-timeline b { display: block; font: 400 21px/1.25 var(--cr-serif); padding-top: 8px; }
.cr-join .cr-timeline b time { font-size: 15px; color: var(--cr-soft); margin-left: 4px; font-family: var(--cr-sans); }
.cr-join .cr-timeline span.cr-tl-note { display: block; font-size: 15px; color: var(--cr-soft); margin-top: 3px; line-height: 1.5; }

/* ---- the lower page reads like the homepage's sections (Seph, October 30, 2026) ---- */
/* the homepage's press strip (homepage-src.html .press): an uppercase label over the five logos in one row */
.cr-join .cr-press-strip { background: #FDFCFA; border-top: 1px solid var(--cr-line); border-bottom: 1px solid var(--cr-line); padding: 26px 0; }
.cr-join .cr-press-strip .cr-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cr-join .cr-press-label { font: 700 .74rem/1.6 var(--cr-sans); letter-spacing: .16em; text-transform: uppercase; color: #6B6155; }
.cr-join .cr-press-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px clamp(26px, 5vw, 56px); }
.cr-join .cr-press-logos img { height: 26px; width: auto; filter: grayscale(1); opacity: .62; }
/* the four reasons on cocoa, at the homepage's density (its dark .statement band: 56 px, 36 px on phones) */
.cr-join .cr-band { background: var(--cr-cocoa); color: var(--cr-on-cocoa); padding: 56px 0 60px; }
.cr-join .cr-eyebrow { font: 600 .78rem/1.6 var(--cr-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--cr-lit); margin: 0 0 10px !important; }
.cr-join .cr-band h2 { color: #FFFDF9; }
.cr-join .cr-why { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 48px; }
.cr-join .cr-why li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; font-size: 17px; line-height: 1.45; }
.cr-join .cr-ring { width: 44px; height: 44px; border: 1px solid rgba(243, 233, 218, .5); border-radius: 50%; display: grid; place-items: center; }
.cr-join .cr-ring svg { width: 22px; height: 22px; stroke: var(--cr-lit); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* the hub's trust facts in the homepage's provenance row (.prov-grid): a lede, figures between hairlines, credentials */
.cr-join .cr-facts { padding: 48px 0 56px; }
.cr-join .cr-facts-lede { max-width: 62ch; color: var(--cr-soft); font-size: 1.05rem; line-height: 1.55; }
.cr-join .cr-facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; border-top: 1px solid var(--cr-line); border-bottom: 1px solid var(--cr-line); }
.cr-join .cr-facts-grid > div { display: flex; flex-direction: column; gap: 4px; padding: 22px 28px; }
.cr-join .cr-facts-grid > div:first-child { padding-left: 0; }
.cr-join .cr-facts-grid > div + div { border-left: 1px solid var(--cr-line); }
.cr-join .cr-facts-grid b { font: 600 1.7rem/1.3 var(--cr-serif); letter-spacing: -.02em; color: var(--cr-ink); font-variant-numeric: lining-nums; }
.cr-join .cr-facts-grid span { font-size: .88rem; line-height: 1.45; color: var(--cr-soft); }
.cr-join .cr-creds { margin-top: 22px !important; font-size: 1rem; color: var(--cr-soft); }
/* the sticky site header (94 px at 1280, 88 at 390) never covers what the page scrolls to: focus, anchors, scrollIntoView */
html:has(.cr-join) { scroll-padding-top: 112px; }

/* ---- the welcome and signing-in states (viewWelcome) ---- */
.cr-join.cr-state { padding: 0 var(--cr-gut); }
.cr-join .cr-state-in { max-width: 520px; margin: 0 auto; padding: 72px 0 96px; text-align: center; }
.cr-join.cr-state h1 { margin: 18px 0 .25rem; }

/* ---- load motion, only when motion is welcome (app.js adds .cr-motion) ---- */
.cr-join.cr-motion .cr-display .cr-line { animation: cr-rise .8s var(--cr-ease) both; }
.cr-join.cr-motion .cr-display .cr-line + .cr-line { animation-delay: .12s; }
.cr-join.cr-motion .cr-sheet { animation: cr-rise .9s var(--cr-ease) .18s both; }
@keyframes cr-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---- widths ---- */
@media (min-width: 961px) {
  /* the copy stops a quarter into the photo, where the grade is still 88% (PR 119's rule) */
  .cr-join .cr-hero-copy { max-width: min(640px, calc(64vw - var(--cr-gut) - max(0px, (100vw - var(--cr-max)) / 2))); }
}
@media (max-width: 1099px) { .cr-join .cr-display { font-size: clamp(2.5rem, 5.6vw, 3.6rem); } }
@media (max-width: 1080px) {
  .cr-join .cr-start-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cr-join .cr-timeline { padding-top: 48px; max-width: 520px; }
  .cr-join .cr-timeline::before { top: 74px; }
}
@media (max-width: 960px) {
  /* the portrait behind the whole band, the copy over it: PR 119's phone grade, 76 to 94% everywhere */
  .cr-join { --cr-overlap: 64px; }
  .cr-join .cr-hero { padding: 28px 0 calc(var(--cr-overlap) + 32px); }
  .cr-join .cr-photo { width: 100%; }
  .cr-join .cr-photo::after { background: linear-gradient(180deg, color-mix(in oklch, var(--hero-grade) 80%, transparent) 0%, color-mix(in oklch, var(--hero-grade) 76%, transparent) 45%, color-mix(in oklch, var(--hero-grade) 80%, transparent) 75%, color-mix(in oklch, var(--hero-grade) 94%, transparent) 100%); }
    .cr-join .cr-form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "email" "zip" "plans" "cta" "why"; }
  .cr-join .cr-form > .cr-cta { margin-top: 18px; }
}
@media (max-width: 760px) {
  .cr-join .cr-display { font-size: clamp(2.2rem, 9vw, 2.9rem); }
  .cr-join .cr-lede { font-size: 1.08rem; margin-top: 16px !important; }
}
@media (max-width: 640px) {
  .cr-join { --cr-gut: 20px; font-size: 16px; }
  .cr-join .cr-sheet { padding: 28px 20px 18px; margin-left: -8px; margin-right: -8px; }
  .cr-join .cr-plans { grid-template-columns: 1fr; }
  .cr-join .cr-start { padding-bottom: 36px; }
  .cr-join .cr-band { padding: 36px 0 40px; }
  .cr-join .cr-why { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 22px; }
  .cr-join .cr-why li { font-size: 16px; gap: 14px; }
  .cr-join .cr-press-logos img { height: 22px; }
  .cr-join .cr-facts { padding: 36px 0 40px; }
  .cr-join .cr-facts-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cr-join .cr-facts-grid > div { padding: 18px 16px; }
  .cr-join .cr-facts-grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cr-join .cr-facts-grid > div:nth-child(n+3) { grid-column: 1 / -1; border-top: 1px solid var(--cr-line); }
}
@media (prefers-reduced-motion: reduce) {
  .cr-join *, .cr-join *::before, .cr-join *::after { animation: none !important; transition: none !important; }
  .cr-join .cr-cta:disabled::before { border-top-color: rgba(42, 33, 26, .25); border-right-color: var(--cr-ink); }
}