/* Fluid layouts between the approved 402px phone and 1024px desktop views.
   This stylesheet is loaded only within that range. */
:root {
  --tablet-gutter: clamp(20px, calc(20px + (100vw - 402px) * .06), 56px);
  --tablet-space: clamp(40px, calc(40px + (100vw - 402px) * .064), 80px);
}
body { background: var(--cream); }
.site-shell { max-width: none; }
.site-header { padding-inline: var(--tablet-gutter); }
.site-menu, .menu-open .site-header { width: 100%; }
.site-menu { padding-inline: var(--tablet-gutter); }
.site-menu nav, .site-menu > .button { width: 100%; max-width: 660px; margin-inline: auto; }
#main > * { width: 100%; min-width: 0; }
#main .section { padding: var(--tablet-space) var(--tablet-gutter); align-items: stretch; }
#main .section > p { text-align: left; }
#main .section > p.body-inset, #main .section .narrow { width: 100%; max-width: 66ch; }
#main > [data-name="Section"] { padding-block: var(--tablet-space); }
#main > [data-name="Section"] > [data-name="Container"] { padding-inline: var(--tablet-gutter); }
#main [data-name="Heading Margin"], #main [data-name^="Slot "] { min-width: 0; }
#main [class~="w-[362px]"] { width: 100%; max-width: 100%; }
#main [data-name="Heading Margin"] > .font-serif { max-width: 100%; }
#main [data-name^="Slot "] .font-sans:is([class~="text-[16px]"], [class~="text-[20px]"]) { width: 100%; max-width: 66ch; text-align: left; }
#main [data-name^="Slot "] [data-name="Container"]:is([class~="w-[173px]"], [class~="w-[267px]"]) { width: 100%; max-width: 66ch; }
#main .section > :is(h1, h2) { text-align: left; }
#main .section > h2:not(.display) { font-size: clamp(32px, 4.9vw, 48px); }
#main .section > .button { width: min(100%, 436px); align-self: center; }
#main .metric { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; }
#main .metric-label { max-width: 24ch; }
#main .metric-value { white-space: nowrap; }
#main .home-numbers .metric-value { font-size: clamp(32px, 4.2vw, 42px); }
#main .hero-home { padding-inline: var(--tablet-gutter); height: clamp(725px, 80vw, 800px); }
#main .hero-home h1 { max-width: 600px; align-self: center; }
#main .intro-statement { min-height: 0; gap: 48px; }
#main .intro-statement p { font-size: clamp(28px, 4vw, 40px); max-width: 760px; margin-inline: auto; }
#main > .photo-heading { height: auto !important; aspect-ratio: 5 / 4; }
#main .photo-heading .eyebrow { left: var(--tablet-gutter); width: calc(100% - var(--tablet-gutter) * 2); }
#main .home-numbers h2 { max-width: 660px; }
#main .founder-note { align-items: center; }
#main .founder-note blockquote { max-width: 660px; }
#main .founder-note .photo { width: 276px; }
#main .home-path .step-list { max-height: none; mask-image: none; }
#main :is(.engine-hero, .owner-hero) > p { width: min(100%, 436px); max-width: 100%; text-align: left; }
#main .owner-profile .support-list p { max-width: 48ch; }
#main .owner-process .step { max-width: none; }
#main .owner-process .step > div > p { width: auto; }
#main .engine-flywheel > h2 { max-width: 660px; }
#main .engine-platform .carousel-track { width: calc(100% + var(--tablet-gutter) * 2); margin-inline: calc(var(--tablet-gutter) * -1); padding-inline: calc((100vw - 174px) / 2); }
#main .owner-paths .carousel-track { width: calc(100% + var(--tablet-gutter) * 2); padding-inline: var(--tablet-gutter); scroll-padding-inline: var(--tablet-gutter); }
#main .territory-list li { display: grid; grid-template-columns: auto minmax(12px, 1fr) auto; align-items: center; gap: 12px; }
#main .territory-list li > span { grid-column: 1; grid-row: 1; }
#main .territory-list li::after { grid-column: 2; grid-row: 1; }
#main .territory-list li > small { grid-column: 3; grid-row: 1; white-space: nowrap; }
#main .legal :is(p, li) { text-align: left; }
footer.design-footer { width: 100%; }
footer.design-footer > div { padding-inline: var(--tablet-gutter); }

/* These figures must stay together while their labels use the remaining space. */
#main [data-section="the_numbers_headline_economics"] [data-name="Slot 1 details"] .font-serif {
  width: auto; height: auto; margin-left: auto; white-space: nowrap;
  font-size: clamp(48px, 7vw, 64px);
}
#main [data-section="the_numbers_headline_economics"] [data-name="Slot 1 details"] .font-sans { flex: 1; min-width: 0; }
#main [data-section="the_opportunity_the_category"] .category-growth { flex-direction: row; align-items: center; gap: 12px; margin-left: auto; }
#main [data-section="the_opportunity_the_category"] [data-name="Slot 3 details"] .font-sans { width: auto; max-width: 34ch; flex: 1; }
#main [data-section="the_opportunity_the_category"] .category-growth > .font-serif { width: auto; height: auto; }
#main [data-section="the_opportunity_the_category"] .category-growth .rotate-90 { rotate: 0deg; }
/* The chart contains positioned artwork and keeps its own coordinate system. */
#main [data-section="the_opportunity_competitive_landscape"] [data-name="Slot 1 details"] > div { width: 362px; max-width: 100%; align-self: center; }

@media (min-width: 600px) {
  #main .section > p, #main .body-inset { font-size: 18px; line-height: 1.5; }
  #main .section > p.small-print { font-size: 12px; }
  #main .intro-statement > p { font-size: clamp(28px, 4vw, 40px); line-height: 1.2; }
  #main [data-name="Heading Margin"] > .font-serif { font-size: 40px; }
  #main [data-name^="Slot "] .font-sans:is([class~="text-[16px]"], [class~="text-[20px]"]) { font-size: 18px; }
  #main [data-name^="Slot "] [data-name="Image Container"] { width: min(100%, 500px); height: auto; aspect-ratio: 4 / 3; margin-inline: auto; }
  #main [data-section="the_opportunity_the_category"] [data-name="Image Container"] { aspect-ratio: 4 / 5; }
  #main [data-section="the_opportunity_the_category"] [data-name="Image Container"] img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  #main [data-section="the_opportunity_white_space"] [data-name="Slot 1 details"] > div { flex-direction: row; gap: 24px; }
  #main [data-section="the_opportunity_white_space"] [data-name="Slot 1 details"] [data-name="Divider Horizontal"] { display: none; }
  #main [data-section="the_opportunity_white_space"] [data-name="Slot 1 details"] > div > div:not([data-name]) { flex: 1; min-width: 0; flex-direction: column; gap: 24px; border-block: 1px solid #23232255; padding-block: 24px; }
  #main [data-section="the_opportunity_white_space"] [data-name="Slot 1 details"] [class*="w-["] { width: 100%; }
  #main [data-section="the_opportunity_white_space"] [data-name="Slot 1 details"] .font-serif { height: auto; text-align: left; }
  #main [data-section="the_opportunity_why_now"] [data-name="Slot 2 details"] > div { width: 100%; }
  #main [data-section="the_opportunity_why_now"] [data-name="Button"] > .size-full,
  #main [data-section="the_opportunity_why_now"] [data-name="Button"]:has(> p) { display: flex; align-items: center; gap: 12px; padding-block: 9px; }
  #main [data-section="the_legacy_three_beliefs"] [data-name="Slot 3 details"] > div > .flex { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
  #main [data-section="the_legacy_three_beliefs"] [data-name="Slot 3 details"] [class~="w-[173px]"] { width: 100%; }
  #main [data-section="the_legacy_three_beliefs"] [data-name="Slot 3 details"] .font-sans { font-size: 16px; }
  #main [data-section="the_legacy_three_standards"] [data-name="Slot 1 details"] :is([class~="w-[267px]"], [class~="w-[268px]"]) { width: 100%; }
  #main [data-section="the_legacy_three_standards"] [data-name="Slot 1 details"] .font-sans { font-size: 16px; }
  #main .testimonial-track { width: 100%; max-width: 100%; align-items: start; }
  #main .testimonial-track > div { flex: 1; min-width: 0; }
  #main .testimonial-track > div > div, #main .testimonial-track :is(.font-serif, .font-sans) { width: 100%; }
  #main .home-numbers { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
  #main .home-numbers .eyebrow { grid-column: 1 / -1; }
  #main .home-numbers h2 { grid-column: 1; grid-row: 2; }
  #main .home-numbers .metric-stack { grid-column: 2; grid-row: 2 / 4; }
  #main .home-numbers .small-print { grid-column: 1 / -1; grid-row: 4; margin: 0; }
  #main .home-numbers .text-link { grid-column: 1 / -1; grid-row: 5; justify-self: end; }
  #main .home-numbers .metric { grid-template-columns: 1fr; gap: 16px; padding-block: 24px; }
  #main .home-numbers .metric-label { max-width: none; }
  #main .home-numbers .metric-value { justify-self: end; }
  #main .story-section > .photo, #main .engine-then .old-terminal { width: min(100%, 500px); align-self: center; }
  #main .owner-profile .support-list, #main .owner-team .team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
  #main .owner-profile .support-list li { padding-block: 24px; }
  #main .owner-team .team-grid h3 { font-size: 24px; }
  #main .owner-team .team-grid p { font-size: 14px; }
  #main .inquiry-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  #main .inquiry-form > :is(.form-row, .field:has(textarea), .field-help, .form-status, .button, [role="alert"]) { grid-column: 1 / -1; }
  #main .inquiry-form .field { min-width: 0; }
  #main .financial-row dt { width: 35%; font-size: 12px; }
  #main .financial-row dd { font-size: 32px; }
  #main .investment-rows { font-size: 14px; }
  #main .investment-rows :is(dt, dd) { font-size: 14px; line-height: 1.5; }
  #main .legacy-hero { height: 480px; }
  footer.design-footer > div > div:first-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer.design-footer > div > div:first-child > div:last-child { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  #main [data-section="the_opportunity_the_category"] [data-name="Slot 3 details"] > div { flex-direction: row; align-items: stretch; gap: 24px; }
  #main [data-section="the_opportunity_the_category"] [data-name="Slot 3 details"] [data-name="Divider Horizontal"] { display: none; }
  #main [data-section="the_opportunity_the_category"] [data-name="Slot 3 details"] > div > div:not([data-name]) { flex: 1; min-width: 0; flex-direction: column; gap: 24px; border-block: 1px solid #ffffff55; padding-block: 24px; }
  #main [data-section="the_opportunity_the_category"] [data-name="Slot 3 details"] [class*="w-["] { width: 100%; }
  #main [data-section="the_opportunity_the_category"] [data-name="Slot 3 details"] .font-sans { flex: none; }
  #main [data-section="the_opportunity_the_category"] [data-name="Slot 3 details"] h2 { height: auto; font-size: clamp(24px, 3.3vw, 32px); white-space: nowrap; }
  #main [data-section="the_opportunity_the_category"] .category-growth { margin-left: 0; }
  #main [data-section="the_opportunity_the_category"] .category-growth > .font-serif { width: auto; }
  .page-index #main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-index #main > * { grid-column: 1 / -1; }
  #main .home-opportunity { grid-column: 1; grid-row: 3; }
  #main .home-opportunity-photo { grid-column: 2; grid-row: 3; }
  #main [data-section="index_operating_platform"] { grid-column: 2; grid-row: 5; }
  #main .home-engine-photo { grid-column: 1; grid-row: 5; }
  #main :is(.home-opportunity, [data-section="index_operating_platform"]) { padding-inline: 32px; }
  #main :is(.home-opportunity, [data-section="index_operating_platform"]) > h2 { font-size: 32px; }
  #main :is(.home-opportunity-photo, .home-engine-photo) { aspect-ratio: auto; }
  #main :is(.home-opportunity-photo, .home-engine-photo) > .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  #main .home-opportunity-photo > .photo { content: url("images/desktop-home-opportunity.02108f81bd11.jpg"); object-position: 57% center; }
  #main .home-opportunity .metric-value { font-size: 48px; }
  #main .home-opportunity .metric { gap: 16px; }
  #main [data-section="index_operating_platform"] > .photo { width: 100%; height: auto; }
  #main .home-invitation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
  #main .home-invitation > :is(.eyebrow, h2, p, .button) { grid-column: 1 / -1; }
  #main .home-invitation > .rule { display: none; }
  #main .home-invitation .territory-title { grid-column: 1; grid-row: 4; margin: 0; }
  #main .home-invitation .territory-list { grid-column: 1; grid-row: 5; margin: 0; }
  #main .home-invitation > .photo { grid-column: 2; grid-row: 4 / 6; align-self: center; }
  #main .home-invitation > .button { justify-self: center; }
}