/* Application & AI page (GT-Lambda, step C). Model: GT-Alpha full page 28B-40. Colours come only from the tokens in site.css.
   Hero, .sect, .stage, .figure.map and buttons are the site.css components used on Home. */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main section[id]{scroll-margin-top:104px}
.nb{white-space:nowrap}

/* chapter head: heading left, text or photograph right */
.chapter-head{display:grid;grid-template-columns:340px minmax(0,1fr);column-gap:64px;align-items:start;margin-bottom:96px}
.chapter-head.tight{margin-bottom:40px}
.chapter-head h2{font-size:40px;line-height:1.15;letter-spacing:-.01em;margin:0 0 20px;color:var(--text)}
.chapter-head .lead{font-size:26px;line-height:1.3;font-weight:700;color:var(--text);margin:0;max-width:22ch}
.chapter-head .text p{font-size:19px;line-height:1.6;color:var(--muted);margin:0 0 20px;max-width:58ch}
.chapter-head .text p:last-child{margin-bottom:0}
.chapter-head .text.below{margin-top:32px}
.chapter-head .photo{aspect-ratio:4/3;max-width:640px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.chapter-head .photo picture{display:block;width:100%;height:100%}
.chapter-head .photo img{width:100%;height:100%;max-width:none;object-fit:cover}

/* panels: a heading in the left column, ruled content in the right */
.cpanel{display:grid;grid-template-columns:340px minmax(0,1fr);column-gap:64px;padding-top:40px;border-top:1px solid var(--line)}
.cpanel + .cpanel{margin-top:96px}
.cpanel > h3{font-size:26px;line-height:1.25;margin:0;color:var(--text);max-width:14ch}
.ruled{list-style:none;margin:0;padding:0}
.ruled > li{padding-block:24px;border-top:1px solid var(--line)}
.ruled > li:first-child{border-top:0;padding-top:0}
.ruled strong{display:block;font-size:22px;line-height:1.3;color:var(--text);margin-bottom:6px}
.ruled span{display:block;font-size:19px;line-height:1.55;color:var(--muted);max-width:60ch}
ol.ruled{counter-reset:n}
ol.ruled > li{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:baseline;counter-increment:n;font-size:19px;line-height:1.55;color:var(--text);max-width:70ch}
ol.ruled > li::before{content:counter(n,decimal-leading-zero);font-size:22px;font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums}
.note{grid-column:2;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.note p{font-size:17px;line-height:1.55;color:var(--muted);margin:0 0 8px;max-width:62ch}
.note p.stat{font-size:19px;color:var(--text);margin-top:20px}
.note p.stat:first-child{margin-top:0}
.note.first{margin-top:0;padding-top:0;border-top:0}
.api-wrap{margin-top:96px}

/* pilot: the one bold thing on this page, on the navy stage */
.pilot-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:end;margin-bottom:96px}
.pilot-head h2{font-size:40px;line-height:1.15;letter-spacing:-.01em;color:#fff;margin:0 0 24px}
.pilot-head p{font-size:19px;line-height:1.6;color:var(--stage-text-2);margin:0;max-width:44ch}
.pilot-head .pilot-figure{max-width:none;font-size:88px;line-height:1;letter-spacing:-.02em;font-weight:700;color:#fff;margin:0 0 16px;font-variant-numeric:tabular-nums}
.pilot-head .pilot-figure-note{font-size:19px;line-height:1.5;color:var(--on-navy-muted);margin:0}
.pilot-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.pilot-steps > li{counter-increment:s;display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1fr);column-gap:48px;padding-block:36px;border-top:1px solid var(--stage-line)}
.pilot-steps > li:last-child{border-bottom:1px solid var(--stage-line)}
.pilot-steps > li::before{content:counter(s,decimal-leading-zero);font-size:40px;line-height:1;font-weight:700;color:var(--on-navy-muted);font-variant-numeric:tabular-nums}
.pilot-steps h3{font-size:26px;line-height:1.25;color:#fff;margin:0 0 8px}
.pilot-steps p{font-size:19px;line-height:1.55;color:var(--stage-text-2);margin:0;max-width:46ch}
.pilot-steps .receive{font-size:17px;line-height:1.5;color:var(--stage-text-2)}
.pilot-steps .receive b{display:block;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-navy-muted);margin-bottom:6px}
.stage .cta{margin-top:64px}

/* free apps and free SaaS: filters, category list, entries (built by src/pages/render/application-ai.mjs) */
.free-head{display:grid;grid-template-columns:340px minmax(0,1fr);column-gap:64px;align-items:start;margin-bottom:64px}
.free-head h2{font-size:40px;line-height:1.15;letter-spacing:-.01em;margin:0;color:var(--text)}
.free-head p{font-size:19px;line-height:1.6;color:var(--muted);margin:0 0 16px;max-width:58ch}
.dl-tools{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-bottom:var(--s5)}
.filter-group{display:flex;flex-direction:column;gap:var(--s1)}
.filter-label{font-weight:700;font-size:var(--fs-0);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.chip{min-height:44px;padding:8px 18px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-0);font-weight:700;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .12s ease}
.chip:hover{border-color:var(--accent)}
.chip:active,.dl-more:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.dl-jump{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s3)}
.dl-jump [role="tab"]{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-0);font-weight:700;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
.dl-jump [role="tab"]:hover{border-color:var(--accent)}
.dl-jump [role="tab"][aria-selected="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.dl-jump [role="tab"][hidden]{display:none}
.dl-jump [role="tab"]::after,.dl-jump [role="tab"]::before{display:none!important}
.dl-jump [role="tab"]{box-shadow:none!important}
.dl-n{font-size:13px;min-width:22px;padding:1px 6px;border-radius:999px;background:rgba(12,24,68,.10);font-variant-numeric:tabular-nums;text-align:center}
.dl-jump [aria-selected="true"] .dl-n{background:rgba(255,255,255,.22)}
.dl-js .dl-group:not(.is-active){display:none}
.dl-groups{display:flex;flex-direction:column;gap:var(--s5)}
.dl-group{display:flex;flex-direction:column;scroll-margin-top:104px}
.dl-group > h3{font-size:26px;line-height:1.25;padding-bottom:var(--s2);border-bottom:2px solid var(--accent);margin:0 0 var(--s1)}
.dl-item{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,2.2fr);gap:var(--s1) var(--s4);padding-block:var(--s2);border-bottom:1px solid var(--line);align-items:start}
.dl-main{display:flex;flex-direction:column;gap:4px}
.dl-main h4{font-size:var(--fs-1);margin:0}
.dl-main p{font-size:var(--fs-0);line-height:1.4;margin:0}
.dl-meta{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr);gap:2px var(--s2);font-size:var(--fs-0);line-height:1.35}
.dl-meta dt{color:var(--muted)}
.dl-meta dd{margin:0}
.dl-meta dd:nth-of-type(n+3){grid-column:2 / -1}
.dl-side{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-0);line-height:1.35}
.dl-bahasa{display:flex;gap:10px;align-items:flex-start;max-width:none;margin:0}
.dl-bahasa .mark{flex:0 0 16px;width:16px;height:16px;margin-top:2px;border-radius:50%;border:2px solid var(--accent)}
.dl-bahasa[data-level="yes"] .mark{background:var(--accent)}
.dl-bahasa[data-level="partly"] .mark{background:linear-gradient(90deg,var(--accent) 50%,transparent 50%)}
.dl-checked{color:var(--muted);font-size:var(--fs-0);max-width:none;margin:0}
.dl-side .link-arrow{font-size:var(--fs-0);color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.dl-side .link-arrow::after{content:"\00a0\2192"}
.dl-js:not(.is-filtered) .dl-group:not(.is-open) .dl-extra{display:none}
.dl-more,.dl-reset{min-height:44px;padding:8px 22px;border-radius:999px;border:2px solid var(--text);background:transparent;color:var(--text);font:inherit;font-size:var(--fs-0);font-weight:700;cursor:pointer;transition:border-color .2s ease,color .2s ease,transform .12s ease}
.dl-more{align-self:flex-start;margin-top:var(--s2)}
.dl-more:hover,.dl-reset:hover{border-color:var(--accent)}
.dl-empty{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.dl-empty p{font-weight:700;margin:0}

@media (max-width:960px){
  .chapter-head,.pilot-head,.free-head{grid-template-columns:1fr;row-gap:32px;margin-bottom:56px}
  .chapter-head h2,.pilot-head h2,.free-head h2{font-size:30px}
  .chapter-head .lead{font-size:22px;max-width:none}
  .chapter-head .photo{max-width:520px}
  .cpanel{grid-template-columns:1fr;row-gap:24px}
  .cpanel > h3{font-size:22px;max-width:none}
  .cpanel + .cpanel{margin-top:64px}
  .note{grid-column:1}
  .api-wrap{margin-top:56px}
  .ruled strong{font-size:20px}
  .ruled span,ol.ruled > li{font-size:18px}
  .pilot-head .pilot-figure{font-size:48px}
  .pilot-steps > li{grid-template-columns:56px minmax(0,1fr);row-gap:16px;padding-block:28px}
  .pilot-steps > li::before{font-size:30px}
  .pilot-steps .receive{grid-column:2}
  .pilot-steps h3{font-size:22px}
  .pilot-steps p{font-size:18px}
  .dl-item{grid-template-columns:1fr}
  .dl-meta{grid-template-columns:max-content minmax(0,1fr)}
  .dl-meta dd:nth-of-type(n+3){grid-column:auto}
  .dl-group > h3{font-size:22px}
}
@media (max-width:600px){
  .pilot-steps > li{grid-template-columns:40px minmax(0,1fr);column-gap:16px}
}
/* Section gaps (GT-Delta gate 2, 28 Oct): content to content at most 96 px on desktop and 48 px on phones. */
main .sect,main .sect + .sect,main .sect:has(+ .stage),main .sect:last-child{padding-block:40px}
main .stage{padding-block:56px}
.home-hero > .wrap{padding-bottom:40px}
/* 29A-26: the heading keeps at least 48 px from the photo edge at 1440 (the text column ends at 664 px, the photo starts at 720) */
@media (min-width:961px){.home-hero .hero-media{width:50%}}
@media (max-width:760px){
  main .sect,main .sect + .sect,main .sect:has(+ .stage),main .sect:last-child{padding-block:16px}
  main .stage{padding-block:32px}
  .home-hero > .wrap{padding-block:32px 24px}
  .chapter-head,.pilot-head,.free-head{margin-bottom:32px}
}

/* 29A-07: compact drawing bands (receive, eight needs, pilot) and the explainer reader. Wide screens only; phones keep their own stack. */
@media (min-width:760px){
  #custom-application-receive,#needs,#ai-solution-pilot{padding-block:60px}
  #custom-application-receive .dg-pad,#ai-solution-pilot .dg-pad{margin-block:0}
  /* receive: heading and the sentence under the drawing share one row above it */
  .rcv-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:56px;align-items:end;margin-bottom:20px}
  .rcv-head h2{margin:0}
  .rcv-head .rtl-foot{margin:0 0 4px;font-size:19px;line-height:1.5}
  /* eight needs: the two figures sit side by side under the heatmap */
  #needs .needs-head{margin-bottom:20px}
  #needs .needs-head h2{margin-bottom:0}
  #needs .needs-dg .needs-units{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;margin-top:8px;align-items:center}
  #needs .needs-dg .needs-units .dg-wide{max-width:none}
  #needs .needs-grid.needs-dg .needs-units > .dg{grid-column:1;grid-row:1}
  #needs .needs-grid.needs-dg .needs-units .unit{grid-column:2!important;grid-row:1!important}
  #needs .needs-dg .unit{grid-template-columns:168px minmax(0,1fr);column-gap:28px}
  #needs .ugrid{max-width:168px}
  #needs .unit .stat{font-size:19px}
  /* pilot */
  .pilot-top{margin-bottom:24px}
  #ai-solution-pilot .pl-stage{padding:12px 16px 4px}
  #ai-solution-pilot .pilot{row-gap:20px}
  #ai-solution-pilot .pstep{min-height:0}
  #ai-solution-pilot .ladder{margin-top:28px}
  #ai-solution-pilot .ladder li.r1{min-height:84px}
  #ai-solution-pilot .ladder li.r2{min-height:104px}
  #ai-solution-pilot .ladder li.r3{min-height:124px}
  #ai-solution-pilot .ladder-foot{margin-top:16px}
  /* explainers: one topic at a time, photo beside the title, stage in its own shape */
  #explainers .tc-reader{padding-block:56px}
  #explainers .tc-reader > .wrap{gap:20px}
  #explainers .tc-reader h2{max-width:none}
  #explainers .tc-tab{flex-basis:208px;height:108px;padding:12px 16px}
  #explainers .tc-card{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:40px;row-gap:20px;align-items:start}
  #explainers .tc-card > .tc-head{grid-column:1;grid-row:1}
  #explainers .tc-card > .tc-an{grid-column:2;grid-row:1}
  #explainers .tc-card > .tc-an img{aspect-ratio:16/9;object-fit:cover}
  #explainers .tc-card:not(:has(> .tc-an)) > .tc-head{grid-column:1/-1}
  #explainers .tc-card > .tc-body,#explainers .tc-card > .tc-more{grid-column:1/-1;grid-row:auto}
  #explainers .tc-card > .tc-path-slot,#explainers .tc-card > :not(.tc-head):not(.tc-an){grid-column:1/-1}
  #explainers .tc-panel{gap:12px}
}