/* Phone layer. Loaded last on every page. Every rule sits inside a max-width query at or below 780px,
   so tablets in landscape, laptops, and desktops render exactly as before.
   Targets: 44px tap targets, 16px form text (stops iOS focus zoom), no sideways scroll at 320px,
   readable labels (no text under 11px), and tables that turn into cards instead of scroll boxes. */

@media (max-width:780px){
 /* Stop iOS zooming the page when a search field gets focus. */
 .search-box>input,.gx-search input{font-size:16px}
 /* Report data tables: never split a number or word in half; scroll as a last resort instead of overflowing the page. */
 .rpt-table-wrap{overflow-x:auto}
 .rpt-table-wrap th,.rpt-table-wrap td{overflow-wrap:normal;word-break:normal;hyphens:manual}
 .rpt-table-wrap td{white-space:nowrap}
 .rpt-table-wrap tbody th{min-width:9ch}
}

/* Header: the pack button reads "Free Pack" so the wordmark keeps readable type and nothing is pushed off-screen. */
@media (max-width:560px){
 .header-inner{gap:10px}
 .brand{min-width:0;gap:9px}
 .brand-mark{width:36px;height:36px}
 .brand-name{font-size:9px;letter-spacing:.06em;white-space:nowrap}
 .brand-name strong{font-size:24px}
 .nav-ctas{flex-shrink:0}
 .nav-ctas .button.small{min-height:44px;padding:10px 14px;font-size:14px;border-radius:12px}
 .nav-ctas .button.small .cta-long{display:none}
 .menu-toggle{width:44px;height:44px;flex-shrink:0}
}
@media (max-width:374px){
 .header-inner{width:calc(100% - 24px);gap:8px}
 .brand{gap:7px}
 .brand-mark{width:32px;height:32px}
 .brand-name{font-size:7.5px;letter-spacing:.03em}
 .brand-name strong{font-size:20px}
 .nav-ctas .button.small{padding:10px 11px;font-size:13px}
 .nav-ctas .button.small .icon{display:none}
}

/* Cookie notice: a compact bottom sheet that leaves most of the screen readable. */
@media (max-width:560px){
 .consent{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:12px;padding:14px 16px;font-size:14px;line-height:1.45}
 .consent-actions{flex-direction:row;gap:10px}
 .consent-actions .button{flex:1;min-height:44px;padding:10px 12px}
}

/* Home hero. */
@media (max-width:560px){
 .hero-redesign .hero-badge{font-size:10px;letter-spacing:.06em;line-height:1.45;padding:8px 14px;text-wrap:balance}
 .hero-redesign .hero-note{font-size:11px}
 /* Stats: number over label, four equal columns, so "5 projects" no longer touches the edge. */
 .hero-redesign .hero-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:30px;font-size:13px}
 .hero-redesign .hero-proof li{flex-direction:column;align-items:center;gap:6px;margin:0;padding:0 4px;text-align:center;border-right:1px solid rgba(211,225,255,.35)}
 .hero-redesign .hero-proof li:last-child{padding:0 4px;border:0}
 .hero-redesign .hero-proof b{font-size:30px}
}

/* Five-stage roadmap and "wherever you're starting" cards: badge beside the text instead of stacked above it.
   Each card drops from about 240px to about 120px tall. */
@media (max-width:640px){
 .roadmap-section .roadmap-track{gap:12px}
 .roadmap-section .roadmap-step,.roadmap-section .roadmap-step-featured{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:16px;align-items:start;min-height:0;margin-top:0;padding:18px 18px 18px 16px}
 .roadmap-section .roadmap-step:last-child{padding-right:18px}
 .roadmap-section .step-number,.roadmap-section .roadmap-step-featured .step-number{grid-row:1/4;width:56px;height:56px;margin:0;font-size:30px;border-radius:14px}
 .roadmap-section .roadmap-step h3,.roadmap-section .roadmap-step-featured h3{font-size:30px}
 .roadmap-section .roadmap-step p{margin:4px 0 8px;font-size:16px}
 .roadmap-section .chapter-label{margin-top:0;font-size:13px}

 .audience-grid{gap:12px}
 .audience-card{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;align-items:start;min-height:0;padding:20px 18px 20px 16px}
 .audience-number{grid-row:1/3;width:56px;height:56px;margin:0;font-size:30px;border-radius:14px}
 .audience-card h3{font-size:26px}
 .audience-card p{margin-top:6px;font-size:16px}
}

/* Free pack band: headline lines sized to fit on one line each, so no word is left alone on a line; tile labels readable. */
@media (max-width:560px){
 .resources-band-redesign h2{font-size:10.4vw}
 .resources-band-redesign .eyebrow{font-size:11px}
 .pack-benefits>a{min-height:76px}
 .pack-benefits strong{font-size:15px}
 .pack-benefits small{font-size:13px;margin-top:3px}
}

/* ZeroToAIMastery article carousel: wider centre card, date and read time kept on one line. */
@media (max-width:620px){
 .article-reel-section{--cw:min(86vw,360px)}
 .reel-meta{white-space:nowrap;font-size:12.5px}
 .reel-meta time{flex-shrink:0}
}

/* Plinth banner (About and guides): crop keeps the whole plinth and its "Skills → Products → Opportunities" line in view. */
@media (max-width:560px){
 .book-launch-redesign .book-launch-background{aspect-ratio:1.3;object-position:right bottom}
}

/* Tables marked t-stack at build time (4+ columns, or 3 wordy ones): one card per row, column name as label.
   Replaces the old 560px-wide scroll box that cut columns off on phones. */
@media (max-width:640px){
 .table-wrap:has(>table.t-stack),.rpt-table-wrap:has(>table.t-stack){overflow:visible;border:0;background:none;border-radius:0}
 table.t-stack{display:block;width:100%;min-width:0;border:0;background:none}
 /* The report's wide tables stack here, so their transposed phone copies are not needed. */
 .rpt-table-wrap:has(>table.t-stack) .rpt-t-flip{display:none}
 /* Two-column tables fit a phone as they are: drop the 560px minimum that forced a scroll box. */
 .table-wrap .data-table{min-width:0}
 table.t-stack caption{display:block;padding:0 2px 10px;text-align:left}
 table.t-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
 table.t-stack tbody{display:grid;gap:10px}
 table.t-stack tr{display:block;padding:14px 16px;border:1px solid var(--line,#dde3ee);border-radius:14px;background:#fff}
 table.t-stack :is(th,td){display:grid;grid-template-columns:minmax(88px,34%) minmax(0,1fr);gap:12px;align-items:baseline;width:auto;min-width:0;padding:7px 0;border:0;border-top:1px solid #eef1f6;background:none;text-align:left;white-space:normal;overflow-wrap:break-word;word-break:normal}
 table.t-stack :is(th,td):before{content:attr(data-label);font-size:12px;font-weight:700;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5f6b85)}
 /* First cell is the card title. */
 table.t-stack tr>:first-child{display:block;padding:0 0 8px;border-top:0;font-size:17px;font-weight:700;line-height:1.35;color:var(--ink,#0b1230)}
 table.t-stack tr>:first-child:before{content:none}
 /* Report cards on navy chapters. */
 .rpt-ch-navy table.t-stack tr{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
 .rpt-ch-navy table.t-stack :is(th,td){border-top-color:rgba(255,255,255,.08)}
 .rpt-ch-navy table.t-stack :is(th,td):before{color:#9eabd3}
 .rpt-ch-navy table.t-stack tr>:first-child{color:#fff}
}

/* Two-column guide tables at 320px: slimmer cell padding so long single words fit without a scroll box. */
@media (max-width:400px){
 .table-wrap .data-table :is(th,td){padding:12px 10px}
 body:not([data-page="home"]) .table-wrap .data-table thead th,.table-wrap .data-table thead th{font-size:13px;letter-spacing:.05em}
}

/* Footer: whole-row tap areas of 40px (same visual rhythm, the gap moves inside the link). */
@media (max-width:560px){
 .footer-top>div:not(:first-child)>a{min-height:40px;margin-bottom:0;padding:9px 0}
 .footer-bottom a,.footer-bottom button{min-height:40px;display:inline-flex;align-items:center}
}