/* Layout for category 66. Shared fag-* components and brand-tokens.css own
   colors, typography and controls. Calculated text contrasts: acc/white 4.97,
   acc/surf 4.56, brand/white 6.80, mut/surf 5.60. No new font requests. */
#fa-letter-hub{max-width:1200px;padding:24px;color:var(--fg)}
#fa-letter-hub figure{margin:0;min-width:0}
#fa-letter-hub>section{margin:0;background:var(--bg)!important;position:static;z-index:auto}
#fa-letter-hub>section.fag-intro,#fa-letter-hub>section.flh-closing{background:var(--surf)!important}
#fa-letter-hub a:focus-visible,#fa-letter-hub summary:focus-visible{outline:3px solid var(--brand)!important;outline-offset:4px}
#fa-letter-hub h1{font-size:52px;font-weight:700;line-height:1.1;text-wrap:balance}
#fa-letter-hub h2{font-size:36px;font-weight:600;line-height:1.2;text-wrap:balance}
#fa-letter-hub h3{font-size:24px;font-weight:600;line-height:1.3}
#fa-letter-hub p{max-width:68ch;line-height:1.6}
#fa-letter-hub .fag-intro{grid-template-columns:minmax(0,1fr) 280px;gap:32px;padding:24px;background:var(--surf);border-radius:var(--r-card);margin:0}
#fa-letter-hub .fag-eyebrow{font-size:14px}
#fa-letter-hub .flh-hero-photo{width:280px;max-width:100%;justify-self:end}
#fa-letter-hub img{display:block;max-width:100%;height:auto;object-fit:contain}
#fa-letter-hub .flh-hero-photo img{width:100%;border-radius:var(--r)}
#fa-letter-hub figcaption{color:var(--mut);font-size:14px;line-height:1.5}
#fa-letter-hub .flh-hero-photo figcaption{margin-top:8px}
#fa-letter-hub .flh-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
#fa-letter-hub .fag-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;font-size:16px;line-height:1.5;margin:0;text-decoration:none}
#fa-letter-hub .fag-cta:hover{background:var(--acc);text-decoration:underline}
#fa-letter-hub .flh-secondary{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}
#fa-letter-hub .fag-meta{margin:8px 0 0}
#fa-letter-hub .flh-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:24px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--mut)}
#fa-letter-hub .flh-benefits strong{display:block;color:var(--brand);font-weight:600}
#fa-letter-hub .flh-height-picker{padding:24px 0;border-bottom:1px solid var(--line);scroll-margin-top:24px}
#fa-letter-hub .flh-height-title{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
#fa-letter-hub .flh-height-title h2{font-size:26px}
#fa-letter-hub .flh-height-title a{font-size:14px;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
#fa-letter-hub .flh-height-picker>p{color:var(--mut)}
#fa-letter-hub .flh-sizes{display:flex;flex-wrap:wrap;gap:8px;background:var(--bg)!important;border:0}
#fa-letter-hub .flh-sizes a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 24px;border:1px solid var(--line-2);border-radius:var(--r-btn)!important;font-size:16px;font-weight:500}
#fa-letter-hub .flh-sizes a:hover{background:var(--surf);border-color:var(--acc)}
#fa-letter-hub .flh-height-extras{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-top:16px;font-size:14px}
#fa-letter-hub .flh-height-extras details{max-width:640px;border:0;margin:0;padding:0}
#fa-letter-hub .flh-height-extras summary{color:var(--acc)}
#fa-letter-hub .flh-alphabet{display:inline-flex;align-items:center;min-height:44px;padding:8px 0}
#fa-letter-hub .flh-image-section,#fa-letter-hub .flh-workshop{padding:48px 0;border-bottom:1px solid var(--line)}
#fa-letter-hub .flh-section-title{margin-bottom:24px}
#fa-letter-hub .flh-section-title p{color:var(--mut);margin:0}
#fa-letter-hub .flh-application-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
#fa-letter-hub .fag-product{padding:0;overflow:hidden;border-radius:var(--r-card)}
#fa-letter-hub .fag-product>img{width:100%;height:180px!important;background:var(--surf);object-fit:scale-down}
#fa-letter-hub .fag-product figcaption{padding:16px;display:flex;flex-direction:column;flex:1}
#fa-letter-hub .fag-product h3{color:var(--fg)}
#fa-letter-hub .fag-product p{font-size:15px;margin-bottom:8px}
#fa-letter-hub .fag-product a{font-size:15px;font-weight:600;display:inline-flex;align-items:center;min-height:44px;margin-top:auto}
#fa-letter-hub .flh-workshop-intro{display:grid;grid-template-columns:1fr 1.5fr;gap:32px}
#fa-letter-hub .flh-workshop-intro p{color:var(--mut)}
#fa-letter-hub .flh-workshop-strip{margin-top:24px}
#fa-letter-hub .flh-workshop-strip img{width:100%;border-radius:var(--r)}
#fa-letter-hub .flh-workshop-strip figcaption{margin-top:8px}
#fa-letter-hub .flh-info{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;padding:48px 0}
#fa-letter-hub .flh-info p{color:var(--mut)}
#fa-letter-hub .flh-support{padding:24px;background:var(--surf);border-radius:var(--r-card);margin-top:24px}
#fa-letter-hub .flh-support strong{display:block;margin-bottom:8px}
#fa-letter-hub .flh-support a{display:inline-flex;align-items:center;min-height:44px}
#fa-letter-hub .flh-closing{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--surf);padding:24px;border-radius:var(--r-card);margin-bottom:24px}
#fa-letter-hub .flh-closing h2{font-size:26px}
#fa-letter-hub .flh-closing p{margin:0;color:var(--mut)}
@media(max-width:992px){
 #fa-letter-hub .fag-intro{grid-template-columns:minmax(0,1fr) 240px;gap:24px}
 #fa-letter-hub .flh-application-grid{gap:16px}
 #fa-letter-hub .flh-info{gap:24px}
}
@media(max-width:768px){
 #fa-letter-hub{padding:16px}
 #fa-letter-hub h1{font-size:34px}
 #fa-letter-hub h2{font-size:26px}
 #fa-letter-hub h3{font-size:20px}
 #fa-letter-hub .flh-height-title{display:block}
 #fa-letter-hub .flh-height-extras{display:block}
 #fa-letter-hub .flh-workshop-intro,#fa-letter-hub .flh-info{grid-template-columns:1fr;gap:24px}
}
@media(max-width:600px){
 #fa-letter-hub .fag-intro{grid-template-columns:minmax(0,1fr) 96px;gap:12px;padding:16px}
 #fa-letter-hub .flh-intro-copy{display:contents}
 #fa-letter-hub .flh-intro-copy>.fag-eyebrow{grid-column:1/-1;grid-row:1;margin:0}
 #fa-letter-hub .flh-intro-copy>h1{grid-column:1/-1;grid-row:2;font-size:34px;margin:0;text-wrap:initial}
 #fa-letter-hub .flh-intro-copy>h1 span{display:block;padding-right:80px}
 #fa-letter-hub .flh-intro-copy>p{grid-column:1/-1;grid-row:3;margin:0}
 #fa-letter-hub .flh-hero-photo{grid-column:2;grid-row:2;width:64px;align-self:end}
 #fa-letter-hub .flh-hero-photo figcaption{display:none}
 #fa-letter-hub .flh-hero-actions{grid-column:1/-1;grid-row:4;display:flex;gap:4px}
 #fa-letter-hub .flh-hero-actions>a{width:100%;text-align:center;justify-content:center}
 #fa-letter-hub .flh-intro-copy>.fag-meta{grid-column:1/-1;grid-row:5;font-size:14px}
 #fa-letter-hub .fag-cta{padding:12px 16px}
 #fa-letter-hub .flh-benefits{grid-template-columns:1fr;gap:8px;padding:16px 0}
 #fa-letter-hub .flh-benefits strong{display:inline;margin-right:8px}
 #fa-letter-hub .flh-sizes a{flex:1 1 auto;padding:8px 16px;white-space:nowrap}
 #fa-letter-hub .flh-application-grid{grid-template-columns:1fr}
 #fa-letter-hub .fag-product{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:stretch}
 #fa-letter-hub .fag-product>img{height:100%!important;min-height:150px}
 #fa-letter-hub .fag-product figcaption{padding:12px}
 #fa-letter-hub .flh-closing{display:block;padding:16px}
 #fa-letter-hub .flh-closing .fag-cta{width:100%;margin-top:16px}
}