/* Homepage-only reading rhythm. Shared production styles intentionally stay
   untouched. One reading column + one image replaces the old nested hero grid. */
#welcome { --home-gutter: max(32px, calc((100vw - 1200px) / 2)); }
#welcome .welcome-hero {
  display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(28px, 4vw, 60px);
  padding: 44px var(--home-gutter) 36px; min-height: 0;
  align-items: center; border: 0;
}
#welcome .welcome-copy { display: block; min-width: 0; min-height: 0; padding: 0; }
#welcome .beginner-badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px;
  padding: 8px 12px; border: 1px solid #b8d9d2; border-radius: 8px;
  background: #e2f0eb; color: #235e55; font-size: 14px; font-weight: 700; line-height: 1.4;
}
#welcome .welcome-copy h1 {
  margin: 0 0 22px; font-size: clamp(52px, 5.5vw, 80px);
  line-height: .98; letter-spacing: -.035em;
}
#welcome .welcome-copy h1 em { color: #bd4a34; }
#welcome .hero-intro { margin: 0 0 24px; max-width: 49ch; font-size: 19px; line-height: 1.6; color: #4c5b6b; }
#welcome .welcome-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0; }
#welcome .welcome-actions #start-new-button, #welcome .home-final .button {
  width: auto; min-height: 52px; padding: 14px 22px; border: 0; border-radius: 8px;
  background: #286e69; color: #fff; font-size: 17px; font-weight: 700;
}
#welcome .welcome-actions #start-new-button:hover, #welcome .home-final .button:hover { background: #1f5956; }
#welcome .hero-how-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--ink); text-underline-offset: 5px; }
#welcome .trust-line { margin: 14px 0 0; gap: 6px 14px; color: #4c625b; font-size: 13px; line-height: 1.5; }
#welcome .welcome-choice { margin: 20px 0 0; max-width: none; font-size: 14px; line-height: 1.6; color: #586574; }
#welcome .welcome-choice a { display: inline-block; min-height: 44px; padding-top: 9px; color: #286e69; font-weight: 700; text-underline-offset: 4px; }
#welcome .welcome-art {
  min-height: 0; height: auto; width: 100%; aspect-ratio: 1 / 1;
  align-self: center; border-radius: 18px; isolation: isolate;
  /* No still behind the loops: the 3D Family fox painted here showed on
     every load before the first frame, and the owner asked for it gone. The
     navy ground and the "about to begin" sweep from cartoons.css show instead. */
  background: radial-gradient(120% 90% at 68% 18%, #1b3550 0%, #12243a 45%, #0d1c31 100%);
  box-shadow: 0 14px 36px rgba(13,28,49,.13);
}
#welcome .welcome-art:after { inset: 14px; border-radius: 9px; }
/* Keep the shared dim-to-colour hover treatment, without changing the crop. */
#welcome .welcome-art video.hero-loop { transform: none; }
#welcome .welcome-art .frame-note { font-size: 11px; }
#welcome .note-a { top: 34px; left: 30px; }
#welcome .note-b { top: 43%; right: 24px; }
#welcome .note-c { bottom: 74px; left: 30px; }
#welcome .hero-art-caption { position: absolute; z-index: 2; inset: auto 0 0; margin: 0; padding: 30px 24px 22px; background: linear-gradient(transparent, rgba(13,28,49,.93)); color: #fff; font-size: 13px; text-align: center; }
#welcome .hero-props { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin: 0; padding: 24px var(--home-gutter); background: #eaf0e9; border-block: 1px solid #d7e1d9; }
#welcome .hero-props li { border: 0; padding: 0; gap: 5px; }
#welcome .hero-props b { font-size: 16px; color: #234f4b; }
#welcome .hero-props span { font-size: 14px; line-height: 1.5; color: #52635d; }
#welcome #main > .hero-continue { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; max-width: none; margin: 24px var(--home-gutter) 0; padding: 16px 20px; }
#welcome .continue-copy { display: grid; gap: 5px; min-width: 0; }
#welcome .continue-copy strong { overflow-wrap: anywhere; font-size: 19px; }
#welcome .hero-continue-label { font-size: 10px; line-height: 1.4; }
#welcome .hero-continue .button { flex-shrink: 0; width: auto; min-height: 48px; margin: 0; padding: 12px 18px; font-size: 15px; background: #286e69; color: white; }
#welcome :is(.made-section,.how-section,.styles-section,.difference-section,.costs-section,.own-section) { padding: 56px var(--home-gutter); border-bottom: 1px solid #dedfdc; }
#welcome .section-head { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0 48px; max-width: none; align-items: end; }
#welcome .section-kicker { grid-column: 1 / -1; margin: 0 0 14px; font-size: 12px; line-height: 1.5; letter-spacing: .12em; color: #a63e2e; }
#welcome .section-head h2 { font-size: clamp(34px, 3.5vw, 46px); line-height: 1.08; letter-spacing: -.02em; }
#welcome .section-lede { margin: 0; max-width: 52ch; font-size: 17px; line-height: 1.6; color: #536170; }
#welcome :is(.made-grid,.how-steps,.difference-grid,.cost-grid,.own-grid) { margin: 28px 0 0; gap: 16px; }
#welcome :is(.made-grid,.cost-grid,.own-grid) { grid-template-columns: repeat(4,minmax(0,1fr)); }
#welcome :is(.how-steps,.difference-grid) { grid-template-columns: repeat(3,minmax(0,1fr)); }
#welcome :is(.made-grid,.how-steps,.difference-grid,.cost-grid) > li { padding: 24px; border: 1px solid #dce0da; border-radius: 12px; background: #fff; min-width: 0; }
#welcome .made-grid li:first-child { grid-column: auto; border-top: 1px solid #dce0da; }
#welcome .made-grid li { display: flex; flex-direction: column; }
#welcome h3 { margin: 0 0 10px; font: 700 19px/1.3 "DM Sans",sans-serif; letter-spacing: -.02em; }
#welcome :is(.made-grid,.how-steps,.difference-grid) p { margin: 0; font-size: 16px; line-height: 1.55; color: #536170; }
#welcome .use-case-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 12px; background: #e2f0eb; color: #286e69; font-size: 28px; line-height: 1; }
#welcome .made-grid li:nth-child(2) .use-case-icon { background: #fce8df; color: #a63e2e; }
#welcome .made-grid li:nth-child(3) .use-case-icon { background: #e6e8f7; color: #53528a; }
#welcome .made-grid li:nth-child(4) .use-case-icon { background: #f7edce; color: #745d24; }
#welcome .use-case-example { display: block; margin-top: auto; padding-top: 20px; font-size: 12px; line-height: 1.5; color: #65716e; }
#welcome .how-section { background: #edf3ef; scroll-margin-top: 20px; }
#welcome .how-number { margin-bottom: 8px; background: #dbecea; color: #285f5b; }
#welcome .section-more { margin: 20px 0 0; }
#welcome .section-more a, #welcome .cost-note a { display: inline-flex; align-items: center; min-height: 44px; color: #285f5b; font-weight: 700; text-underline-offset: 4px; }
#welcome .styles-section { background: #fffdf8; }
#welcome .style-strip { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; margin-top: 28px; }
#welcome .style-strip span { color: #48596b; font-size: 12px; line-height: 1.4; }
#welcome .style-strip img { border-radius: 10px; }
#welcome .more-styles { margin-top: 26px; padding-top: 6px; border-top: 1px solid #dedfdc; }
#welcome .more-styles summary { padding: 16px 0; cursor: pointer; color: #285f5b; font-weight: 700; }
#welcome .more-styles summary span { margin-left: 12px; color: #536170; font-size: 14px; font-weight: 400; }
#welcome .more-styles .style-strip { margin-top: 8px; }
#welcome .difference-section { background: #14243b; }
#welcome .difference-section h2, #welcome .difference-section h3 { color: #fffdf8; }
#welcome .difference-section .section-kicker { color: #ffab94; }
#welcome .difference-section .section-lede, #welcome .difference-grid p { color: #c9d3dc; }
#welcome .difference-grid > li { padding: 20px 22px; border-color: #47566a; background: #1b2e45; }
#welcome .cost-grid b { font: 700 22px/1.25 "DM Sans",sans-serif; letter-spacing: -.025em; }
#welcome .cost-grid li:first-child { background: #eaf3ed; border-color: #bbd4c7; }
#welcome .cost-grid span, #welcome .own-grid span { font-size: 15px; color: #536170; line-height: 1.6; }
#welcome .cost-note { max-width: none; margin-top: 20px; background: transparent; border-left: 3px solid #95b9ac; border-radius: 0; padding: 0 0 0 16px; color: #536170; font-size: 14px; }
#welcome .own-section { background: #fffdf8; }
#welcome .own-grid li { padding: 0 16px; background: transparent; border-left: 2px solid #a7c5b8; }
#welcome .own-grid b { font-size: 16px; }
#welcome .home-final { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 44px var(--home-gutter); background: #e2eee6; }
#welcome .home-final h2 { margin: 0; font: 400 clamp(32px,3vw,42px)/1.12 "Libre Caslon Display",Georgia,serif; }
#welcome .home-final p:not(.section-kicker) { margin: 12px 0 0; color: #465f53; font-size: 15px; }
#welcome .home-final-action { flex-shrink: 0; }
#welcome .home-final-action p { font-size: 13px!important; text-align: center; }
#welcome .signin-section { padding: 32px var(--home-gutter); }
#welcome .welcome-footer { padding: 24px var(--home-gutter); }
@media (prefers-reduced-motion: reduce) {
  /* The controller loads a still first frame without playing it. Do not hide
     that frame with the legacy video rule in the shared stylesheet. */
  #welcome .welcome-art video.hero-loop { display: block; transition: none; }
}
@media (max-width: 1100px) {
  #welcome :is(.made-grid,.cost-grid,.own-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #welcome .welcome-copy h1 { font-size: 62px; }
  #welcome .hero-intro { font-size: 17px; }
}
@media (max-width: 800px) {
  #welcome { --home-gutter: 24px; }
  #welcome .welcome-hero { grid-template-columns: 1fr; padding-top: 32px; gap: 28px; }
  #welcome .welcome-copy h1 { font-size: 64px; }
  #welcome .hero-intro { max-width: 58ch; }
  #welcome .welcome-art { aspect-ratio: 16 / 9; max-height: none; }
  #welcome .hero-props { gap: 20px; }
  #welcome .section-head { grid-template-columns: 1fr; gap: 0; }
  #welcome .section-lede { margin-top: 16px; max-width: 62ch; }
  #welcome :is(.how-steps,.difference-grid) { grid-template-columns: 1fr; }
  #welcome .how-steps li { flex-direction: row; gap: 18px; }
  #welcome .how-number { flex: 0 0 38px; }
  #welcome .style-strip { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  #welcome .home-final { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  #welcome { --home-gutter: 20px; }
  #welcome .welcome-copy h1 { font-size: clamp(44px,12vw,60px); margin-bottom: 18px; }
  #welcome .beginner-badge { font-size: 12px; margin-bottom: 18px; padding: 8px 10px; }
  #welcome .hero-intro { font-size: 17px; line-height: 1.55; margin-bottom: 20px; }
  #welcome .welcome-actions { gap: 8px 18px; }
  #welcome .welcome-actions #start-new-button { font-size: 16px; }
  #welcome .hero-how-link { font-size: 14px; }
  #welcome .trust-line { font-size: 14px; gap: 6px 12px; }
  #welcome .welcome-choice { margin-top: 14px; font-size: 13px; }
  #welcome .welcome-art { aspect-ratio: 4 / 3; border-radius: 12px; }
  #welcome .frame-note { padding: 6px 8px; }
  #welcome .note-a { top: 25px; left: 22px; }
  #welcome .note-c { bottom: 62px; left: 22px; }
  #welcome .hero-art-caption { font-size: 11px; padding: 26px 18px 18px; }
  #welcome .hero-props { grid-template-columns: 1fr; gap: 16px; padding-block: 22px; }
  #welcome .hero-props li { border-left: 2px solid #91b7a6; padding-left: 14px; }
  #welcome #main > .hero-continue { flex-direction: column; align-items: flex-start; gap: 14px; }
  #welcome :is(.made-section,.how-section,.styles-section,.difference-section,.costs-section,.own-section) { padding-block: 38px; }
  #welcome :is(.made-grid,.cost-grid,.own-grid) { grid-template-columns: 1fr; }
  #welcome .made-grid > li { padding: 20px; display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; }
  #welcome .use-case-icon { width: 36px; height: 36px; margin: 0; font-size: 24px; grid-row: 1 / 4; }
  #welcome .made-grid h3 { font-size: 18px; }
  #welcome .use-case-example { padding-top: 12px; }
  #welcome .section-kicker { font-size: 12px; margin-bottom: 12px; }
  #welcome .section-head h2 { font-size: 36px; }
  #welcome .section-lede { font-size: 16px; }
  #welcome .how-steps > li { padding: 20px 16px; gap: 12px; }
  #welcome .how-steps h3 { font-size: 18px; }
  #welcome .style-strip { gap: 18px 12px; }
  #welcome .style-strip span { font-size: 10px; letter-spacing: .04em; }
  #welcome .more-styles summary span { display: block; margin: 6px 0 0; font-size: 13px; }
  #welcome .cost-grid > li { padding: 20px; }
  #welcome .home-final { padding-block: 36px; }
}