/* Public welcome and account access, alongside the shared experience styles. */
.experience-landing, .experience-auth { background: var(--paper, #F5F3EE); color: var(--ink, #352A2D); }
.welcome-page, .welcome-auth-layout, .welcome-auth-simple { font-family: 'Source Sans 3', Arial, sans-serif; }
.welcome-page *, .welcome-auth-layout *, .welcome-auth-simple * { box-sizing: border-box; }
.welcome-page h1, .welcome-page h2, .welcome-page h3, .welcome-auth-layout h1, .welcome-auth-layout h2, .welcome-auth-simple h1 { font-family: 'Fraunces', Georgia, serif; color: var(--berry, #741F3E); font-weight: 900; letter-spacing: -.035em; }
.welcome-page h1 em, .welcome-page h2 em, .welcome-auth-story h1 em { font-weight: 600; }
.welcome-page p, .welcome-auth-layout p, .welcome-auth-simple p { line-height: 1.6; }
.welcome-page .eyebrow, .welcome-auth-layout .eyebrow, .welcome-auth-simple .eyebrow { color: var(--berry, #741F3E); font-family: 'Source Sans 3', Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.welcome-page .fine, .welcome-auth-layout .fine, .welcome-auth-simple .fine { color: var(--muted, #635450); font-size: 13px; }
.welcome-hero { overflow: clip; background: var(--peach, #F9CEBC); border-bottom: 1px solid var(--line, #DED7CF); }
.welcome-hero-grid { display: grid; grid-template-columns: 1.16fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; padding-top: 68px; padding-bottom: 76px; }
.welcome-hero-grid > *, .welcome-section-heading > *, .welcome-foundation > *, .welcome-trial > *, .welcome-auth-layout > * { min-width: 0; }
.welcome-copy h1 { margin: 16px 0 24px; font-size: clamp(44px, 5.7vw, 80px); line-height: .99; }
.welcome-copy h1 em { display: inline-block; margin-top: .14em; }
.welcome-lead { max-width: 480px; margin: 0 0 28px; font-size: 19px; }
.welcome-actions { display: flex; gap: 16px 22px; align-items: center; flex-wrap: wrap; }
.welcome-actions + .fine { margin-top: 14px; }
.welcome-copy .welcome-descriptor { margin: 0 0 16px; font-size: 16px; font-weight: 600; line-height: 1.5; }
.welcome-actions .button, .welcome-tool .button { white-space: normal; text-align: center; }
.welcome-text-link { display: inline-flex; gap: 8px; align-items: center; padding: 8px 0; border: 0; background: transparent; color: var(--berry, #741F3E); font-family: inherit; font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.welcome-host-demo { margin-top: 12px; }
.welcome-letter { position: relative; display: block; margin: 12px; padding: 36px 36px 28px; border: 1px solid var(--line, #DED7CF); background: var(--white, #FFFDFA); box-shadow: 0 1px 0 #ded7cf, 0 3px 0 #f9f6ef, 0 4px 0 #d8d1c8, 0 4px 8px #352a2d10, 4px 16px 28px #352a2d20; color: var(--ink, #352A2D); transform: rotate(2deg); text-decoration: none; }
.welcome-letter::before { position: absolute; content: ''; inset: 8px; border: 1px solid var(--line, #DED7CF); pointer-events: none; }
.welcome-letter-photos { position: absolute; z-index: 1; top: -36px; right: -14px; width: 62%; max-width: 300px; height: auto; aspect-ratio: 1.1; pointer-events: none; }
.welcome-polaroid { position: absolute; display: block; width: 100%; padding: 8px 8px 0; border: 1px solid #e6e0d7; background: var(--white, #FFFDFA); box-shadow: 0 1px 2px #352a2d18, 2px 3px 6px #352a2d18; }
.welcome-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.welcome-polaroid-back { z-index: 1; top: -15px; right: 32px; padding-bottom: 28px; transform: rotate(-9deg); box-shadow: 0 1px 2px #352a2d14; }
.welcome-polaroid-front { z-index: 2; top: 4px; right: 0; transform: rotate(8deg); }
.welcome-polaroid-front > span { display: block; padding: 7px 0 8px; color: var(--ink, #352A2D); font-family: "Caveat", cursive; font-size: 22px; font-weight: 500; line-height: 1.1; text-align: center; }
.welcome-paperclip { position: absolute; top: 8px; right: 36px; width: 22px; height: 54px; overflow: visible; transform: rotate(8deg); fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Scale the attached prints with the actual letter, including their paper details. */
@supports (container-type: inline-size) and (width: 1cqi) {
  .welcome-letter, .welcome-letter-photos { container-type: inline-size; }
  .welcome-letter-photos {
    width: clamp(160px, 74cqi, 300px); max-width: 62%;
    top: clamp(-56px, -12cqi, -26px);
    right: clamp(-24px, -3cqi, -6px);
  }
  .welcome-polaroid { padding: clamp(5px, 3cqi, 9px) clamp(5px, 3cqi, 9px) 0; }
  .welcome-polaroid-back { top: clamp(-17px, -5cqi, -9px); right: clamp(18px, 11cqi, 34px); padding-bottom: clamp(22px, 10cqi, 30px); }
  .welcome-polaroid-front > span { padding: clamp(6px, 3cqi, 9px) 0 clamp(7px, 3cqi, 9px); font-size: clamp(16px, 8cqi, 23px); }
  .welcome-paperclip { top: clamp(4px, 2cqi, 8px); right: clamp(20px, 12cqi, 38px); width: clamp(18px, 8cqi, 24px); height: clamp(44px, 19.6cqi, 59px); }
}
.welcome-paperclip-back { z-index: 0; }
.welcome-paperclip-front { z-index: 3; filter: drop-shadow(.5px 1px .5px #352a2d35); }
.welcome-clip-edge { stroke: #747976; stroke-width: 2.8; }
.welcome-clip-metal { stroke: #c4c7c2; stroke-width: 1.8; }
.welcome-clip-light { stroke: #f5f5ef; stroke-width: .65; transform: translate(-.35px, -.35px); }
.welcome-letter-top { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line, #DED7CF); color: var(--muted, #635450); font-size: 12px; font-weight: 600; }
.welcome-letter-kicker { margin: 26px 0 10px; color: var(--muted, #635450); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.welcome-letter h2 { margin: 0 0 20px; font-size: clamp(32px, 3vw, 45px); line-height: 1.08; }
.welcome-letter > p:not(.welcome-letter-kicker):not(.welcome-letter-signature) { max-width: 30ch; font-size: 17px; }
.welcome-letter-shortcuts { display: grid; gap: 10px; margin: 24px 0; }
.welcome-letter-shortcuts span { display: flex; gap: 12px; align-items: center; font-size: 15px; }
.welcome-letter-shortcuts .icon { color: var(--berry, #741F3E); }
.welcome-letter-signature { margin: 24px 0 28px; color: var(--berry, #741F3E); font-size: 15px; }
.welcome-letter-signature em { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 600; }
.welcome-letter-open { display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line, #DED7CF); color: var(--berry, #741F3E); font-weight: 700; font-size: 14px; }
.welcome-benefits { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px 24px; padding-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line, #DED7CF); }
.welcome-benefits span { display: flex; gap: 9px; align-items: center; color: var(--muted, #635450); font-size: 14px; }
.welcome-page .icon { flex: 0 0 auto; width: 20px; height: 20px; }
.welcome-section { padding-top: 78px; padding-bottom: 78px; }
.welcome-section-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end; margin-bottom: 38px; }
.welcome-section h2, .welcome-journey h2, .welcome-final h2 { margin: 12px 0 22px; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.08; }
.welcome-section-heading > p { max-width: 48ch; color: var(--muted, #635450); font-size: 17px; }
.welcome-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.welcome-features article { padding: 24px 0 12px; border-top: 1px solid var(--line, #DED7CF); }
.welcome-step { color: var(--berry, #741F3E); font-size: 12px; font-weight: 700; }
.welcome-features h3 { margin: 28px 0 12px; font-size: 25px; line-height: 1.15; }
.welcome-features p { margin: 0; color: var(--muted, #635450); font-size: 16px; }
.welcome-section-action { margin-top: 36px; }
.welcome-section-action p { margin: 0; }
.welcome-foundation { display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; border-top: 1px solid var(--line, #DED7CF); }
.welcome-foundation > div > p:not(.eyebrow) { max-width: 48ch; color: var(--muted, #635450); font-size: 17px; }
.welcome-checks { display: grid; gap: 18px; margin: 26px 0 0; padding: 0; list-style: none; }
.welcome-checks li { display: flex; gap: 12px; color: var(--muted, #635450); line-height: 1.5; }
.welcome-checks .icon { margin-top: 2px; color: var(--berry, #741F3E); }
.welcome-checks strong { display: block; color: var(--ink, #352A2D); }
.welcome-outputs { align-self: start; padding: 30px 32px; border: 1px solid var(--line, #DED7CF); background: var(--white, #FFFDFA); }
.welcome-outputs > .eyebrow { margin-top: 0; }
.welcome-outputs article { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line, #DED7CF); }
.welcome-outputs article:last-child { padding-bottom: 0; }
.welcome-outputs article > .icon { margin-top: 2px; color: var(--berry, #741F3E); }
.welcome-outputs h3 { margin: 0 0 5px; color: var(--ink, #352A2D); font-family: 'Source Sans 3', Arial, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 0; }
.welcome-outputs h3 span { display: inline-block; margin-left: 4px; color: var(--muted, #635450); font-size: 11px; font-weight: 400; }
.welcome-outputs p { margin: 0; color: var(--muted, #635450); font-size: 15px; }
.welcome-journey { padding: 72px 0; background: var(--peach, #F9CEBC); border-top: 1px solid var(--line, #DED7CF); border-bottom: 1px solid var(--line, #DED7CF); }
.welcome-journey-intro { max-width: 55ch; font-size: 17px; }
.welcome-journey-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 42px; }
.welcome-journey-steps article { padding-top: 18px; border-top: 1px solid #741f3e38; }
.welcome-journey-steps small { color: var(--muted, #635450); font-size: 12px; font-weight: 600; }
.welcome-journey-steps h3 { margin: 20px 0 12px; font-size: 23px; line-height: 1.2; }
.welcome-journey-steps p { margin: 0; font-size: 15px; }
.welcome-trial { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 42px; border: 1px solid var(--line, #DED7CF); background: var(--white, #FFFDFA); }
.welcome-trial .eyebrow { margin-top: 0; }
.welcome-trial-details { align-self: center; padding: 12px 0 12px 36px; border-left: 1px solid var(--line, #DED7CF); }
.welcome-trial-details h3 { margin-top: 0; font-size: 25px; }
.welcome-trial-details ul { display: grid; gap: 12px; padding-left: 18px; color: var(--ink, #352A2D); }
.welcome-trial-details p { color: var(--muted, #635450); font-size: 14px; }
.welcome-faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: 60px; padding-top: 12px; }
.welcome-faq-list details { padding: 20px 0; border-top: 1px solid var(--line, #DED7CF); }
.welcome-faq-list details:last-child { border-bottom: 1px solid var(--line, #DED7CF); }
.welcome-faq-list summary { color: var(--ink, #352A2D); font-size: 17px; font-weight: 600; cursor: pointer; }
.welcome-faq-list p { padding-left: 19px; color: var(--muted, #635450); font-size: 15px; }
.welcome-tool { display: flex; justify-content: space-between; gap: 32px; align-items: center; padding-top: 32px; padding-bottom: 32px; border-top: 1px solid var(--line, #DED7CF); border-bottom: 1px solid var(--line, #DED7CF); }
.welcome-tool h2 { margin: 8px 0 12px; font-size: clamp(27px, 2.6vw, 36px); line-height: 1.1; }
.welcome-tool p { max-width: 52ch; margin-bottom: 0; color: var(--muted, #635450); }
.welcome-tool .eyebrow { margin-top: 0; }
.welcome-tool .button { flex-shrink: 0; }
.welcome-final { padding-top: 74px; padding-bottom: 74px; text-align: center; }
.welcome-final .welcome-actions { justify-content: center; }
.welcome-auth-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; padding-top: 60px; padding-bottom: 80px; }
.welcome-auth-story { padding-top: 28px; }
.welcome-auth-story h1 { margin: 18px 0 24px; font-size: clamp(42px, 5vw, 67px); line-height: 1.06; overflow-wrap: break-word; }
.welcome-auth-story > p:not(.eyebrow):not(.fine) { max-width: 37ch; font-size: 18px; }
.welcome-auth-note { display: flex; gap: 16px; align-items: center; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line, #DED7CF); color: var(--berry, #741F3E); }
.welcome-auth-note > .icon { width: 30px; height: 30px; flex-shrink: 0; }
.welcome-auth-note p { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 23px; font-style: italic; font-weight: 600; line-height: 1.35; }
.welcome-auth-checks { display: grid; gap: 16px; padding: 0; margin: 28px 0; list-style: none; }
.welcome-auth-checks li { display: flex; gap: 10px; align-items: start; line-height: 1.5; }
.welcome-auth-checks .icon { flex: 0 0 20px; margin-top: 2px; color: var(--berry, #741F3E); }
.welcome-auth-panel { position: relative; padding: 40px; border: 1px solid var(--line, #DED7CF); background: var(--white, #FFFDFA); box-shadow: 0 8px 20px #352a2d06; }
.welcome-auth-panel::before { position: absolute; content: ''; inset: 7px; border: 1px solid var(--line, #DED7CF); pointer-events: none; }
.welcome-auth-panel > .eyebrow { margin-top: 0; }
.welcome-auth-panel h2, .welcome-auth-simple h1 { margin: 12px 0 18px; font-size: 33px; line-height: 1.15; overflow-wrap: break-word; }
.welcome-auth-panel form { margin: 24px 0; }
.welcome-auth-panel .full { width: 100%; white-space: normal; text-align: center; justify-content: center; }
.welcome-auth-panel > p { color: var(--muted, #635450); font-size: 15px; }
.welcome-auth-panel .field { min-width: 0; }
.welcome-auth-panel .help { font-size: 13px; line-height: 1.5; }
.welcome-auth-panel form > .help { margin-bottom: 20px; }
.welcome-auth-panel form > .button { min-width: 160px; }
.welcome-auth-panel form > .field:last-of-type { margin-bottom: 24px; }
.welcome-outputs .outputs-label { margin: 0 0 20px; color: var(--muted); font-size: 15px; font-weight: 600; }
.welcome-auth-panel .help ul { padding-left: 20px; margin: 8px 0; }
.welcome-form-errors { color: var(--berry, #741F3E); font-size: 14px; line-height: 1.5; }
.welcome-form-errors ul { padding-left: 20px; }
.welcome-auth-divider { display: flex; gap: 12px; align-items: center; margin: 28px 0 20px; color: var(--muted, #635450); font-size: 12px; }
.welcome-auth-divider::before, .welcome-auth-divider::after { content: ''; flex: 1; border-top: 1px solid var(--line, #DED7CF); }
.welcome-auth-simple { max-width: 600px; padding-top: 64px; padding-bottom: 80px; }
.welcome-page a:focus-visible, .welcome-page button:focus-visible, .welcome-page summary:focus-visible, .welcome-auth-layout a:focus-visible, .welcome-auth-layout button:focus-visible, .welcome-auth-simple a:focus-visible, .welcome-auth-simple button:focus-visible { outline: 3px solid var(--berry, #741F3E); outline-offset: 5px; }
@media (max-width: 900px) {
  .welcome-hero-grid { gap: 32px; padding-top: 48px; padding-bottom: 56px; }
  .welcome-copy h1 { font-size: clamp(40px, 5.6vw, 60px); }
  .welcome-lead { font-size: 17px; }
  .welcome-letter { margin: 8px; padding: 28px 26px 24px; }
  .welcome-letter h2 { font-size: 34px; }
  .welcome-section-heading, .welcome-foundation { gap: 36px; }
  .welcome-features { gap: 20px; }
  .welcome-journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome-trial { padding: 32px; gap: 32px; }
  .welcome-trial-details { padding-left: 26px; }
  .welcome-faq { grid-template-columns: .65fr 1.35fr; gap: 36px; }
  .welcome-tool { align-items: start; flex-direction: column; }
  .welcome-auth-layout { gap: 36px; }
  .welcome-auth-panel { padding: 32px 28px; }
  .welcome-auth-panel h2 { font-size: 30px; }
}
@media (max-width: 680px) {
  .welcome-hero-grid { grid-template-columns: 1fr; gap: 30px; padding-top: 36px; padding-bottom: 40px; }
  .welcome-copy h1 { max-width: 11ch; font-size: clamp(39px, 10.5vw, 58px); }
  .welcome-lead { max-width: 34ch; }
  .welcome-actions { gap: 14px 20px; }
  .welcome-actions .button { max-width: 100%; }
  .welcome-letter { max-width: 460px; margin: 12px 8px; padding: 28px; }
  .welcome-letter-photos { right: 0; width: clamp(144px, calc(52% - 28px), 210px); max-width: 52%; }
  @supports (width: 1cqi) {
    .welcome-letter-photos { width: clamp(144px, 52cqi, 210px); }
  }
  .welcome-letter h2 { font-size: 38px; }
  .welcome-letter > p:not(.welcome-letter-kicker):not(.welcome-letter-signature) { font-size: 16px; }
  .welcome-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .welcome-benefits span { gap: 7px; font-size: 12px; }
  .welcome-section { padding-top: 48px; padding-bottom: 48px; }
  .welcome-section-heading, .welcome-foundation, .welcome-trial, .welcome-faq { grid-template-columns: 1fr; gap: 24px; }
  .welcome-section-heading { margin-bottom: 24px; }
  .welcome-section-heading > p { margin: 0; font-size: 16px; }
  .welcome-features { grid-template-columns: 1fr; gap: 14px; }
  .welcome-features article { padding: 22px 0 14px; }
  .welcome-features h3 { margin-top: 14px; }
  .welcome-outputs { padding: 26px; }
  .welcome-journey { padding: 48px 0; }
  .welcome-journey-steps { gap: 26px 20px; margin-top: 28px; }
  .welcome-journey-steps h3 { font-size: 21px; }
  .welcome-journey-steps small { font-size: 11px; }
  .welcome-trial { padding: 28px 24px; }
  .welcome-trial-details { border-left: 0; border-top: 1px solid var(--line, #DED7CF); padding: 24px 0 0; }
  .welcome-trial-details p { margin-bottom: 0; }
  .welcome-faq { padding-top: 0; }
  .welcome-faq h2 { margin-bottom: 0; }
  .welcome-faq-list summary { font-size: 16px; }
  .welcome-tool { gap: 24px; padding-top: 28px; padding-bottom: 28px; }
  .welcome-tool .button { max-width: 100%; }
  .welcome-final { padding-top: 48px; padding-bottom: 48px; }
  .welcome-auth-layout { grid-template-columns: 1fr; gap: 30px; padding-top: 26px; padding-bottom: 48px; }
  .welcome-auth-story { padding-top: 0; }
  .welcome-auth-story h1 { font-size: clamp(39px, 10vw, 54px); }
  .welcome-registration-story h1 { font-size: clamp(32px, 8vw, 43px); }
  .welcome-auth-story > p:not(.eyebrow):not(.fine) { font-size: 17px; }
  .welcome-auth-note { display: none; }
  .welcome-auth-checks { gap: 12px; margin: 22px 0; }
  .welcome-auth-panel { padding: 30px 24px; }
  .welcome-auth-panel h2, .welcome-auth-simple h1 { font-size: 30px; }
  .welcome-auth-simple { padding-top: 32px; padding-bottom: 48px; }
}
@media (max-width: 360px) {
  .welcome-copy h1 { font-size: 37px; }
  .welcome-letter { margin: 10px 5px; padding: 26px 22px; transform: rotate(1deg); }
  .welcome-letter h2 { font-size: 33px; }
  .welcome-journey-steps { grid-template-columns: 1fr; }
  .welcome-auth-panel { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) { .welcome-letter { transform: none; } }

/* Give the desktop prints their own room beside the letter's salutation. */
@media (min-width: 901px) {
  .welcome-letter { margin-left: -32px; margin-right: 56px; }
  .welcome-letter-photos { top: -54px; right: -52px; }
}
@media (min-width: 1200px) {
  .welcome-hero-grid { padding-top: 80px; }
  .welcome-letter { margin-left: -72px; margin-right: 96px; }
  .welcome-letter-photos { top: -60px; right: -96px; }
}
