/* Three complete compositions. Desktop globals remain in styles.css.
   Compact: 768–1250 CSS px. Phone: up to 767 CSS px.
   Breakpoints follow content space, including a narrow desktop side panel. */
:root { --layout-mode: desktop; }

@media screen and (max-width: 1250px) {
  :root { --layout-mode: compact; }
  .canvas { max-width: 1024px; }
  .hero { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 28px 24px; background-size: auto 100%; }
  .brand { width: 220px; }
  .tagline { font-size: 11px; letter-spacing: 1px; }
  .positioning { align-self: flex-start; max-width: 600px; font-size: 15px; text-align: left; }
  .positioning br { display: none; }
  .hero h1 { align-self: stretch; margin: 12px 0 0; font-size: clamp(34px, 4vw, 44px); line-height: 1.17; letter-spacing: -1px; }
  .safe-space { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 24px; align-self: stretch; margin-top: 8px; padding: 20px; }
  .safe-title { border-bottom: 0; padding-bottom: 0; }
  .safe-title h2 { font-size: 23px; }
  .safe-space p { margin: 0; font-size: 17px; }
  .safe-space p br { display: none; }

  main { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 24px 0; }
  .section, .why, .audience { grid-column: 1; }
  .section-heading { grid-template-columns: 24px minmax(0, 1fr); gap: 8px 12px; }
  .section-heading h2 { justify-self: start; max-width: 100%; min-height: 36px; font-size: 16px; white-space: normal; }
  .section-heading p { grid-column: 2; }

  /* Three inputs, then a full-width result: no cramped four-column equation. */
  .approach-content { grid-template-columns: minmax(0, 1fr); }
  .equation { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); grid-template-rows: auto 28px auto; gap: 8px; padding: 24px 16px; }
  .equation-stack > .science:nth-of-type(1) { grid-area: 1 / 1; }
  .equation-stack > .science:nth-of-type(2) { grid-area: 1 / 3; }
  .equation-stack > .science:nth-of-type(3) { grid-area: 1 / 5; }
  .equation-stack > .operator:nth-of-type(1) { grid-area: 1 / 2; }
  .equation-stack > .operator:nth-of-type(2) { grid-area: 1 / 4; }
  .science { grid-template-rows: 80px auto auto; row-gap: 8px; }
  .science h3 { font-size: 19px; }
  .science p { max-width: 220px; font-size: 17px; }
  .science .blue-disc { width: 72px; height: 72px; }
  .science .icon { width: 46px; height: 46px; }
  .operator { margin-top: 16px; font-size: 32px; }
  .operator.equals { grid-column: 1 / -1; grid-row: 2; align-self: center; margin: 0; line-height: 28px; }
  .science.trajectory { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 92px; }
  .trajectory-picture { width: 128px; height: 80px; }
  .science.trajectory .icon { width: 128px; height: 80px; }
  .trajectory h3 { text-align: left; }
  .founder-source { justify-self: center; width: 100%; max-width: 560px; }

  .stat, .audience article { min-height: 220px; }
  .work-cards, .receive-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .feature, .receive .feature { grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; row-gap: 8px; min-height: 132px; padding: 20px; }
  .receive-cards { gap: 0; }
  .receive h3 { min-height: 0; }
  .receive .feature { align-items: center; }
  .receive .white-disc, .receive .feature > div:last-child { margin-top: 0; }
  .step-arrow { height: 28px; transform: rotate(90deg); }

  .example-content { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cycle-card { min-height: 180px; }
  .engagement { justify-self: center; width: 100%; max-width: 520px; }
  .cost-exposure table { flex: initial; font-size: 17px; }
  .cost-exposure th, .cost-exposure td { padding-block: 14px; }

  /* The VS label participates in flow instead of guessing the middle. */
  .comparison { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: stretch; gap: 8px; }
  .exposure-summary, .fee-summary { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 20px; }
  .money-summary, .time-summary { gap: 12px; }
  .comparison strong { font-size: 32px; }
  .time-summary { min-height: 0; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--risk-line); }
  .time-summary strong { font-size: 26px; }
  .percentage { padding: 20px 0 0; border-left: 0; border-top: 1px solid #b9ddef; }
  .percentage > strong { font-size: 40px; }
  .versus { position: static; align-self: center; justify-self: center; width: 40px; height: 40px; }
}

@media screen and (max-width: 767px) {
  :root { --layout-mode: mobile; }
  .mobile-keep { white-space: nowrap; }
  .work-cards h3 br { display: none; }
  .cycle-card p br { display: initial; }
  .canvas { max-width: 520px; }
  .hero { gap: 12px; padding: 24px 20px; }
  .brand { width: 200px; }
  .tagline { max-width: 100%; font-size: 10px; letter-spacing: .7px; }
  .positioning { font-size: 14px; line-height: 1.45; }
  .hero h1 { font-size: clamp(28px, 7vw, 36px); letter-spacing: -.7px; }
  .safe-space { display: flex; flex-direction: column; align-items: stretch; gap: 16px; border-radius: 22px; }
  .safe-title { gap: 12px; }
  .safe-title h2 { font-size: 22px; }
  .lock { width: 30px; height: 42px; }

  main { gap: 16px; padding: 8px 12px 0; }
  .section { padding: 12px; border-radius: 20px; }
  .section-heading { grid-template-columns: 20px minmax(0, 1fr); gap: 8px 10px; margin-bottom: 16px; }
  .section-heading .number { font-size: 17px; }
  .section-heading h2 { padding: 8px 12px; font-size: 14px; }
  .section-heading p { grid-column: 1 / -1; font-size: 15px; }

  /* A phone reads one concept per row, with full-size editable copy. */
  .equation { display: flex; flex-direction: column; gap: 8px; padding: 20px 12px; }
  .science, .science.trajectory { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 12px; width: 100%; min-height: 76px; margin: 0; text-align: left; justify-items: start; align-items: center; }
  .science .blue-disc, .trajectory-picture { grid-column: 1; grid-row: 1 / 3; width: 64px; height: 64px; }
  .science .icon { width: 42px; height: 42px; }
  .science h3 { grid-column: 2; grid-row: 1; align-self: end; min-height: 0; font-size: 18px; line-height: 1.25; }
  .science p { grid-column: 2; grid-row: 2; align-self: start; font-size: 17px; line-height: 1.4; }
  .operator, .operator.equals { align-self: flex-start; width: 64px; height: 24px; margin: 0; font-size: 26px; line-height: 24px; }
  .trajectory h3 { grid-row: 1 / 3; align-self: center; }
  .science.trajectory .icon { width: 64px; height: 48px; }
  .founder-source { max-width: 100%; min-height: 272px; padding: 20px 16px; }
  .founder-source > h3 { font-size: 15px; }
  .mindprint { font-size: 17.5px; }
  .founder { left: 28px; top: 148px; gap: 8px; }
  .founder .blue-disc { width: 48px; height: 48px; }
  .founder .icon { width: 40px; height: 40px; }
  .founder strong { font-size: 15px; }
  .company-branches { right: 16px; top: 110px; width: 90px; }
  .source-connections { left: 100px; top: 116px; width: calc(100% - 220px); }

  .stats, .audience-columns { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stat { min-height: 0; padding: 20px; }
  .stat > strong { font-size: 56px; }
  .audience article { min-height: 0; padding: 20px; }
  .feature, .receive .feature { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; padding: 20px 16px; min-height: 128px; }
  .feature > .white-disc, .feature > .delivery-symbol { width: 56px; }
  .feature .white-disc::before { width: 56px; height: 56px; top: -28px; }
  .feature .white-disc .icon { left: 9px; }
  .calendar-period { left: -14px; top: 33px; }
  .white-disc { width: 56px; height: 56px; }
  .feature h3 { font-size: 19px; }
  .receive h3 { font-size: 25px; }

  /* The same four-step loop becomes an upright timeline, not squeezed boxes.
     Its return rail is decorative; every card and arrow remains in the DOM. */
  .ceo-cycle { position: relative; padding-left: 28px; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 28px 1fr 28px 1fr 28px 1fr; }
  .cycle-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; gap: 8px 12px; min-height: 0; padding: 16px; }
  .cycle-card .responsive-composition > .icon { grid-column: 1; grid-row: 1 / 3; width: 36px; height: 36px; margin: 0; }
  .cycle-card h3 { grid-column: 2; grid-row: 1; min-height: 0; font-size: 18px; line-height: 1.25; }
  .cycle-card p { grid-column: 2; grid-row: 2; margin: 0; font-size: 17px; }
  .overloaded { grid-area: 1 / 1; }
  .searching { grid-area: 3 / 1; }
  .hired { grid-area: 5 / 1; }
  .more-overloaded { grid-area: 7 / 1; }
  .to-search { grid-area: 2 / 1; }
  .to-hired { grid-area: 4 / 1; }
  .to-more { grid-area: 6 / 1; }
  .to-search .icon, .to-hired .icon, .to-more .icon { width: 20px; height: 20px; transform: rotate(90deg); }
  .to-start { grid-area: auto; display: block; position: absolute; left: 0; top: calc(12.5% - 10.5px); bottom: calc(12.5% - 10.5px); width: 18px; border: 1.25px solid #8aafcc; border-right: 0; border-radius: 8px 0 0 8px; }
  .to-start .icon { position: absolute; right: -6px; top: -8px; width: 16px; height: 16px; transform: none; }
  .cost-exposure { padding: 16px 12px; }
  .cost-exposure table { font-size: 15.5px; }
  .cost-exposure th::before { margin-right: 5px; }
  .cost-exposure th, .cost-exposure td { padding-block: 12px; }
  .receipt { padding: 20px; }
  .comparison { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .exposure-summary, .fee-summary { padding: 20px; }
  .versus { width: 36px; height: 36px; }
}

@media screen and (max-width: 359px) {
  .mobile-relaxed { white-space: normal; }
  .mobile-relaxed .mobile-tail { white-space: nowrap; }
}

/* Center the complete horizontal icon + copy composition. */
.receive .feature { display:flex; align-items:center; justify-content:center; }
.receive .feature > .delivery-layout { display:flex; width:fit-content; max-width:100%; column-gap:16px; align-items:flex-start; }
.receive .delivery-layout > .delivery-copy { display:block; flex:0 1 auto; min-width:0; width:max-content; padding-top:17px; }
.receive .delivery-layout > .white-disc, .receive .delivery-symbol { flex:none; width:64px; }
.receive .delivery-symbol { display:flex; flex-direction:column; align-items:center; position:static; height:auto; width:84px; margin:0; }
.receive .delivery-layout .white-disc { display:flex; position:relative; align-items:center; justify-content:center; flex:none; width:64px; height:64px; margin:0; background:var(--disc); }
.receive .delivery-layout .white-disc::before { display:none; }
.receive .delivery-layout .white-disc .icon { position:static; width:38px; height:38px; }
.receive .feature h3 { min-height:0; margin:0; text-align:left; }
.receive .feature p { margin:8px 0 0; text-align:left; }
.receive .feature p br { display:initial; }
.receive .calendar-period { position:static; width:84px; margin:8px 0 0; text-align:center; }
@media screen and (min-width:1251px) and (max-width:1339px), screen and (max-width:359px) {
 .receive .feature > .delivery-layout { column-gap:8px; }
}
@media screen and (min-width:1251px) and (max-width:1339px) {
 .receive .responsive-phrase { white-space:normal; }
}

/* Mobile parity: center the intact icon-left/copy-right composition, as in 05.
   Contents wrappers are transparent to the approved desktop/tablet grids. */
.responsive-composition, .responsive-copy { display:contents; }
@media screen and (max-width:767px) {
 .science, .science.trajectory, .cycle-card {
   display:flex; align-items:center; justify-content:center;
 }
 .science > .responsive-composition, .cycle-card > .responsive-composition {
   display:flex; width:fit-content; max-width:100%; gap:12px; align-items:flex-start;
 }
 .science .responsive-copy, .cycle-card .responsive-copy {
   display:block; flex:0 1 auto; min-width:0; width:max-content;
 }
 .science .responsive-copy { padding-top:20.75px; }
 .science .blue-disc, .science .trajectory-picture { flex:none; }
 .science h3, .science p, .cycle-card h3, .cycle-card p { margin:0; text-align:left; }
 .science p { max-width:none; margin-top:8px; }
 .science.trajectory .responsive-copy { padding-top:9.5px; }
 .cycle-card .responsive-copy { padding-top:14.75px; }
 .cycle-card .responsive-composition > .icon { flex:none; }
 .cycle-card p { margin-top:8px; }
 .operator, .operator.equals { align-self:center; }
}

/* Source: saved FBD Canva 04/05; FUPT light palette and type family retained. */
.coverage-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.coverage-card { display:flex; flex-direction:column; min-width:0; padding:22px; border-radius:var(--radius-card); background:var(--card); }
.coverage-heading { display:flex; align-items:center; gap:18px; min-height:64px; }
.coverage-heading .white-disc { flex:none; width:64px; height:64px; }
.coverage-heading .coverage-glyph { display:block; width:44px; height:44px; }
.coverage-heading h3 { margin:0; font-size:18px; line-height:1.3; }
.questions { list-style:none; display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); flex:1; margin:18px 0 0; padding:0; }
.questions li { position:relative; padding:14px 0 14px 18px; font-size:17px; line-height:1.45; color:var(--navy); text-wrap:pretty; }
.questions li::before { content:""; position:absolute; left:0; top:calc(14px + .53em); width:5px; height:5px; border-radius:50%; background:var(--blue); }
.receive.unified-delivery .feature { min-height:136px; padding:22px 16px; }
.receive.unified-delivery .delivery-layout { align-items:center; gap:12px; }
.receive.unified-delivery .delivery-copy { padding:0; }
.receive.unified-delivery .feature h3 { font-size:22px; line-height:27px; }
.receive.unified-delivery .feature p { margin:10px 0 0; font-size:14px; line-height:20px; white-space:nowrap; }
.receive.unified-delivery .delivery-symbol { width:64px; gap:6px; }
.receive.unified-delivery .calendar-period { width:auto; margin:0; font-size:14px; line-height:20px; white-space:nowrap; }
.receive.unified-delivery .delivery-glyph { display:block; width:44px; height:44px; }
@media(max-width:1250px) and (min-width:768px) {
 .receive.unified-delivery .receive-cards { grid-template-columns:1fr 24px 1fr; gap:12px 8px; }
 .receive.unified-delivery .step-arrow { transform:none; }
 .receive.unified-delivery .step-arrow:nth-child(4) { display:none; }
}
@media(max-width:767px) {
 .coverage-cards { grid-template-columns:1fr; gap:14px; }
 .coverage-card { padding:20px 16px; }
 .coverage-heading { gap:16px; }
 .coverage-heading h3 { font-size:19px; }
 .questions { grid-template-rows:repeat(3,auto); margin-top:16px; }
 .questions li { font-size:17px; }
 .receive.unified-delivery .feature { padding:22px 16px; }
}
@media(max-width:359px) {
 .receive.unified-delivery .delivery-layout { gap:10px; }
 .receive.unified-delivery .feature { padding:22px 12px; }
}

@media (min-width:768px) and (max-width:1100px) { .coverage-cards { grid-template-columns:1fr; } }

/* Shared FUPT spacing: 01 heading/copy reference; 02 list reference. */
:root {
 --heading-copy-gap:8px;
 --list-heading-gap:12px;
 --list-item-gap:8px;
 --list-indent:24px;
 --list-text-inset:2px;
 --list-card-pad-block:16px;
 --list-card-pad-inline:12px;
}
.science { row-gap:var(--heading-copy-gap); }
.cycle-card p,
.receive.unified-delivery .feature p { margin-top:var(--heading-copy-gap); }
.audience article, .coverage-card { padding:var(--list-card-pad-block) var(--list-card-pad-inline); }
.audience h3 { margin-bottom:var(--list-heading-gap); }
.coverage-heading { margin-bottom:var(--list-heading-gap); }
.audience ul, .coverage .questions {
 display:block; flex:none; list-style:disc; margin:0; padding:0 0 0 var(--list-indent);
 font-size:var(--font-body); line-height:var(--line-body);
}
.audience li, .coverage .questions li {
 padding:0 0 0 var(--list-text-inset); margin:0 0 var(--list-item-gap);
 font-size:inherit; line-height:inherit;
}
.audience li:last-child, .coverage .questions li:last-child { margin-bottom:0; }
.coverage .questions li::before { display:none; }
.coverage .questions li::marker { color:#2c5c91; font-size:.8em; }
.equation-stack { display:contents; }
@media(max-width:767px) {
 :root { --list-card-pad-block:20px; --list-card-pad-inline:20px; }
 .equation { align-items:center; }
 .equation-stack { display:flex; flex-direction:column; gap:8px; width:max-content; max-width:100%; }
 .equation-stack > .science, .equation-stack > .science.trajectory { width:100%; }
 .equation-stack .science > .responsive-composition { width:100%; }
 .equation-stack .science .responsive-copy { flex:0 1 auto; width:auto; }
 .equation-stack .operator { align-self:center; }
}

@media(min-width:768px) { .science .responsive-copy p { margin-top:0; } }

/* Review: bullet lists share their heading's text column; icon width no longer
   becomes vertical whitespace between heading and the first item. */
.audience article, .coverage-card { display:flex; flex-direction:row; align-items:flex-start; gap:10px; }
.audience article > .icon { flex:none; width:36px; height:36px; padding:8px; box-sizing:content-box; border-radius:50%; background:var(--disc); }
.audience .list-copy, .coverage .list-copy { flex:1; min-width:0; }
.audience .list-copy { padding-top:calc((52px - 16px * 1.3) / 2); }
.coverage .list-copy { padding-top:calc((64px - 18px * 1.3) / 2); }
.audience h3, .coverage h3 { display:block; min-height:0; margin:0 0 var(--list-heading-gap); }
.coverage-card > .white-disc { flex:none; width:64px; height:64px; }
.coverage-glyph { display:block; width:44px; height:44px; }
.audience .list-copy ul, .coverage .list-copy ul { padding-left:16px; }
@media(max-width:767px) {
 .coverage-card { gap:16px; }
 .coverage .list-copy { padding-top:calc((64px - 19px * 1.3) / 2); }
}

/* Desktop lock card: remove obsolete forced breaks; natural text flow fits two complete clauses. */
@media screen and (min-width:1251px) { .safe-space p br { display:none; } }