/* Home page layout (approved blend 4c, 2026-10-21): hero + art, The Safe Click 2x2 card, Tools + Glossary, Meet GiggleByte strip.
   Only loaded by index.html. Generated from the approved mockup and pruned to rules that match this page. */
.hm{max-width:var(--content-max);margin:0 auto;padding:var(--space-7) var(--space-6) var(--space-8)}
.hm-hero{display:grid;grid-template-columns:1fr;gap:var(--space-7);align-items:center;margin-bottom:var(--space-7)}
.hm-hero h1{margin:0 0 var(--space-4);font-size:48px;line-height:54px;max-width:22ch}
.hm-hero h1 em{font-style:normal;color:var(--primary-text)}
.hm-hero .gb-hero__lead{margin:0}
.hm-art{max-width:300px}
.hm-grid{display:grid;gap:var(--space-5)}
.hm-card{--p:var(--primary);--p-soft:var(--primary-soft);--p-text:var(--primary-text);position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6) var(--space-6) var(--space-5);background:var(--surface-raised);color:var(--ink);border:var(--border-w,1px) solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.hm-card::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:var(--p)}
.hm-card--news{--p:var(--secondary);--p-soft:var(--secondary-soft);--p-text:var(--secondary-text)}
.hm-card--tools{--p:var(--primary)}
.hm-card--gloss{--p:var(--parent);--p-soft:var(--parent-soft);--p-text:var(--parent-text)}
.hm-card__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-md);background:var(--p-soft);color:var(--p-text)}
.hm-card__icon svg{width:30px;height:30px}
.hm-card__eyebrow{margin:0;font-size:var(--text-label-size);line-height:var(--text-label-line);font-weight:700;color:var(--p-text)}
.hm-card__title{margin:0;font-size:30px;line-height:36px}
.hm-card__text{margin:0;color:var(--ink-muted)}
.hm-card__cta{margin-top:auto;display:inline-flex;align-items:center;min-height:48px;font-weight:700;color:var(--primary-text);text-underline-offset:4px}
.hm-card__cta::after{content:"";position:absolute;inset:0}
.hm-card:has(.hm-card__cta:hover){box-shadow:var(--shadow-lift)}
.hm-card__cta:focus-visible{outline:none}
.hm-card:has(.hm-card__cta:focus-visible){outline:3px solid var(--focus-ring);outline-offset:3px}
.hm-card--news .gb-signup{max-width:none;margin-top:var(--space-2)}
:root[data-persona="senior"] .hm-card--news .gb-signup{padding:0;border:0;background:transparent}
.hm-grid--blend{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;grid-template-areas:'news news tools' 'news news gloss'}
.hm-grid--blend .hm-card--news{grid-area:news;border:var(--sig-border) solid var(--sig-ink);box-shadow:var(--sig-offset) var(--sig-offset) 0 var(--sig-ink);padding:var(--space-7) var(--space-7) var(--space-6);display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-7);align-content:start}
.hm-grid--blend .hm-card--news>*{grid-column:1}
.hm-grid--blend .hm-card--news{align-content:stretch;grid-template-rows:auto auto auto auto auto 1fr}
.hm-grid--blend .hm-card--news .gb-signup{grid-column:2;grid-row:1/7;align-self:center;margin:0}
.hm-news__past{margin-top:var(--space-2)!important}
.hm-news__past::after{display:none}
.hm-grid--blend .hm-card--news .hm-card__text{max-width:30ch}
.hm-grid--blend .hm-card--news::before{height:12px}
.hm-grid--blend .hm-card--news .hm-card__icon{width:72px;height:72px}
.hm-grid--blend .hm-card--news .hm-card__icon svg{width:40px;height:40px}
.hm-grid--blend .hm-card--news .hm-card__title{font-size:44px;line-height:50px}
.hm-grid--blend .hm-card--news .hm-card__text{font-size:var(--text-body-lg-size);line-height:var(--text-body-lg-line)}
:root:not([data-persona="senior"]) .hm-grid--blend .hm-card--news .gb-signup__row .gb-input{flex-basis:100%}
.hm-grid--blend .hm-card--news .gb-signup__row .gb-btn{width:100%}
.hm-grid--blend .hm-card--tools{grid-area:tools}
.hm-grid--blend .hm-card--gloss{grid-area:gloss}
.hm-band{--p:var(--teen);position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-2) var(--space-5);align-items:center;margin-top:var(--space-5);padding:calc(var(--space-5) + 8px) var(--space-6) var(--space-5);background:var(--surface-raised);color:var(--ink);border:var(--border-w,1px) solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.hm-band::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:var(--p)}
.hm-band__byte{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-md);background:var(--surface-sunken);border:1px solid var(--line)}
.hm-band__byte svg{width:44px;height:44px;display:block}
.hm-band__title{margin:0;font-size:26px;line-height:32px}
.hm-band__text{margin:var(--space-1) 0 0;color:var(--ink-muted)}
.hm-band .gb-btn{position:static}
.hm-band .gb-btn::after{content:"";position:absolute;inset:0}
.hm-band:has(.gb-btn:focus-visible){outline:3px solid var(--focus-ring);outline-offset:3px}
:root[data-persona="teen"] .hm-band{border-radius:4px}
:root[data-persona="teen"] .hm-band__title{text-transform:uppercase;font-weight:1000}
:root[data-persona="senior"] .hm-grid--blend{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:none}
:root[data-persona="senior"] .hm-grid--blend>*{grid-area:auto!important}
:root[data-persona="senior"] .hm-grid--blend .hm-card--news{display:flex}
:root[data-persona="senior"] .hm-band{border:2px solid var(--line);box-shadow:none}
:root[data-persona="senior"] .hm-band__title{font-size:32px;line-height:40px}
:root[data-persona="senior"] .hm-band__text{font-size:22px;line-height:34px}
:root[data-persona="senior"] .hm-grid--blend .hm-card--news .hm-card__title{font-size:36px;line-height:44px}
@media (max-width:1080px){
.hm-grid--blend .hm-card--news{display:flex}
}
@media (max-width:860px){
.hm-grid--blend{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:none}
.hm-grid--blend>*{grid-area:auto!important}
.hm-grid--blend .hm-card--news{padding:var(--space-6) var(--space-5) var(--space-5)}
.hm-grid--blend .hm-card--news .hm-card__icon{width:56px;height:56px}
.hm-grid--blend .hm-card--news .hm-card__icon svg{width:30px;height:30px}
.hm-grid--blend .hm-card--news .hm-card__title{font-size:30px;line-height:36px}
.hm-band{grid-template-columns:1fr;gap:var(--space-3);padding:var(--space-6) var(--space-5) var(--space-5)}
.hm-band .gb-btn{justify-self:start}
:root[data-persona="senior"] .hm-band__title{font-size:28px;line-height:36px}
}
:root[data-persona="teen"] .hm-card{border-radius:4px}
:root[data-persona="teen"] .hm-card__title,:root[data-persona="teen"] .hm-hero h1{text-transform:uppercase;font-weight:1000;letter-spacing:-.02em}
:root[data-persona="teen"] .hm-hero h1 em{color:#121417;background:#C6FF4D;padding:0 .12em;display:inline-block;transform:rotate(-2deg)}
:root[data-persona="teen"] .hm-card__icon{border:2px solid currentColor;border-radius:4px}
:root[data-persona="parent"] .hm-hero h1 em{border-bottom:4px solid var(--secondary)}
:root[data-persona="senior"] .hm{max-width:900px}
:root[data-persona="senior"] .hm-card{box-shadow:none;border:2px solid var(--line);gap:var(--space-4)}
:root[data-persona="senior"] .hm-card__title{font-size:34px;line-height:42px}
:root[data-persona="senior"] .hm-card__text{font-size:22px;line-height:34px}
:root[data-persona="senior"] .hm-card__cta{font-size:22px;min-height:56px}
:root[data-persona="senior"] .hm-hero h1 em{font-style:italic}
:root[data-persona="senior"] .hm-hero{grid-template-columns:1fr;text-align:center}
:root[data-persona="senior"] .hm-hero .gb-hero__lead{margin:0 auto}
:root[data-persona="senior"] .hm-art{margin:0 auto;max-width:220px;order:-1}
@media (max-width:860px){
.hm{padding:var(--space-6) var(--space-5) var(--space-7)}
.hm-hero{grid-template-columns:1fr;grid-template-areas:none}
.hm-hero{gap:var(--space-5);margin-bottom:var(--space-6)}
.hm-hero .hm-art{display:none}
.hm-card{padding:var(--space-6) var(--space-5) var(--space-5)}
.hm-hero h1{font-size:34px;line-height:1.18}
:root[data-persona="teen"] .hm-hero h1{font-size:clamp(34px,10vw,40px);line-height:1.12}
:root[data-persona="senior"] .hm-hero h1{font-size:38px;line-height:1.25}
.hm-card__title{font-size:26px;line-height:32px}
:root[data-persona="senior"] .hm-card__title{font-size:30px;line-height:38px}
}
.hm-card__top{display:flex;align-items:center;gap:var(--space-3)}
.hm{padding-top:var(--space-6);padding-bottom:var(--space-7)}
.hm-hero{margin-bottom:var(--space-6)}
.hm-grid{gap:var(--space-4)}
.hm-card{gap:var(--space-2);padding:calc(var(--space-4) + 8px) var(--space-5) var(--space-3)}
.hm-card__icon{width:44px;height:44px}
.hm-card__icon svg{width:26px;height:26px}
.hm-card__title{font-size:26px;line-height:32px}
.hm-card__cta{margin-top:auto}
.hm-grid--blend .hm-card--news{display:flex;flex-direction:column;gap:var(--space-3);padding:calc(var(--space-5) + 12px) var(--space-6) var(--space-5)}
.hm-grid--blend .hm-card--news .gb-signup{grid-column:auto;grid-row:auto;align-self:start;margin:0;gap:var(--space-2)}
.hm-grid--blend .hm-card--news .hm-card__text{max-width:32ch}
.hm-news__past{margin:0!important}
.hm-band{margin-top:var(--space-4);padding:calc(var(--space-3) + 8px) var(--space-5) var(--space-3)}
.hm-band__byte{width:48px;height:48px}
.hm-band__byte svg{width:38px;height:38px}
:root[data-persona="senior"] .hm-card{gap:var(--space-3);padding:calc(var(--space-5) + 8px) var(--space-5) var(--space-4)}
:root[data-persona="senior"] .hm-grid--blend .hm-card--news{padding:calc(var(--space-5) + 12px) var(--space-5) var(--space-5)}
:root[data-persona="senior"] .hm-band{padding:calc(var(--space-4) + 8px) var(--space-5) var(--space-4)}
@media (max-width:860px){
.hm{padding-top:var(--space-5)}
.hm-hero{margin-bottom:var(--space-5)}
.hm-card{padding:calc(var(--space-4) + 8px) var(--space-4) var(--space-3)}
.hm-grid--blend .hm-card--news{padding:calc(var(--space-4) + 12px) var(--space-4) var(--space-4)}
.hm-grid--blend .hm-card--news .hm-card__title{font-size:30px;line-height:36px}
.hm-band{padding:calc(var(--space-4) + 8px) var(--space-4) var(--space-3);gap:var(--space-2)}
:root[data-persona="senior"] .hm-card,:root[data-persona="senior"] .hm-band{padding:calc(var(--space-4) + 8px) var(--space-4) var(--space-4)}
}
.hm-grid--blend .hm-card--news.hm-n4{grid-template-columns:1fr 330px!important;grid-template-areas:'lead art' 'form form'!important;grid-template-rows:1fr auto!important;row-gap:var(--space-4)}
.hm-grid--blend .hm-n4>.hm-n4__lead{grid-area:lead;display:flex;flex-direction:column;justify-content:center;gap:var(--space-3)}
.hm-grid--blend .hm-n4 .hm-card__title{font-size:40px;line-height:46px}
.hm-grid--blend .hm-n4 .hm-card__text{font-size:var(--text-body-lg-size);line-height:var(--text-body-lg-line)}
.hm-grid--blend .hm-n4>.hm-n4__titles{grid-area:titles}
.hm-grid--blend .hm-n4>.hm-n4__copy{grid-area:copy}
.hm-grid--blend .hm-n4>.hm-n4__form{grid-area:form}
.hm-grid--blend .hm-card--news.hm-n4{display:grid;grid-template-columns:1fr 240px;grid-template-areas:'titles art' 'copy art' 'form form';grid-template-rows:auto 1fr auto;column-gap:var(--space-6);row-gap:var(--space-3);align-content:start}
.hm-n4__titles{grid-area:titles;display:flex;flex-direction:column;gap:var(--space-1)}
.hm-n4__copy{grid-area:copy;display:flex;flex-direction:column;gap:var(--space-1);align-items:flex-start}
.hm-n4__form{grid-area:form;border-top:1px solid var(--line);padding-top:var(--space-3)}
.hm-n4 .gb-signup{max-width:none;margin:0}
:root:not([data-persona="senior"]) .hm-grid--blend .hm-n4 .gb-signup__row .gb-input{flex-basis:240px}
.hm-grid--blend .hm-n4 .gb-signup__row .gb-btn{width:auto}
.hm-band__link{margin:0!important}
.hm-words{display:flex;flex-wrap:wrap;gap:0 var(--space-4);margin:0;padding:0;list-style:none}
.hm-words a{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:48px;font-weight:700;color:var(--primary-text);text-underline-offset:4px}
:root[data-persona="senior"] .hm-words a{font-size:22px;min-height:56px}
:root[data-persona="senior"] .hm-grid--blend .hm-n4>.hm-n4__lead{display:contents}
:root[data-persona="senior"] .hm-grid--blend .hm-card--news.hm-n4{grid-template-rows:none!important;grid-template-areas:'art' 'titles' 'copy' 'form'!important;grid-template-columns:1fr!important;display:grid;grid-template-columns:1fr;grid-template-areas:'art' 'titles' 'copy' 'form';grid-template-rows:none}
:root[data-persona="senior"] .hm-grid--blend .hm-n4 .gb-signup__row .gb-btn{width:100%}
@media (max-width:1080px){
.hm-grid--blend .hm-card--news.hm-n4{display:grid}
}
@media (max-width:860px){
.hm-grid--blend .hm-n4>.hm-n4__lead{display:contents}
.hm-grid--blend .hm-card--news.hm-n4{grid-template-columns:1fr 100px!important;grid-template-areas:'titles art' 'copy copy' 'form form'!important;grid-template-rows:none!important;column-gap:var(--space-3);row-gap:var(--space-3)}
.hm-grid--blend .hm-n4 .hm-card__title{font-size:28px;line-height:34px}
:root[data-persona="senior"] .hm-grid--blend .hm-n4 .hm-card__title{font-size:32px;line-height:40px}
.hm-grid--blend .hm-n4 .gb-signup__row .gb-btn{width:100%}
}
@media (max-width:374px){
.hm-grid--blend .hm-card--news.hm-n4{grid-template-columns:1fr!important;grid-template-areas:'art' 'titles' 'copy' 'form'!important}
}
.hm-hero.hm-hero--art{grid-template-columns:1fr 280px;gap:var(--space-7);align-items:center}
.hm-hero--art .hm-hero__art{display:block;max-width:280px;margin:0}
.hm-grid--blend .hm-card--news.hm-n4{display:flex!important;flex-direction:column;gap:var(--space-3)}
.hm-grid--blend .hm-n4>.hm-n4__lead{display:flex;flex-direction:column;justify-content:flex-start;gap:var(--space-2)}
.hm-n4__lead .hm-card__icon{width:56px;height:56px;margin-bottom:var(--space-1)}
.hm-n4__lead .hm-card__icon svg{width:30px;height:30px}
.hm-grid--blend .hm-n4 .hm-card__title{font-size:44px;line-height:50px}
.hm-grid--blend .hm-n4 .hm-card__text{max-width:44ch}
.hm-grid--blend .hm-n4>.hm-n4__form{margin-top:auto;padding-top:var(--space-4)}
:root[data-persona="senior"] .hm-hero--art{grid-template-columns:1fr}
:root[data-persona="senior"] .hm-hero--art .hm-hero__art{order:-1;margin:0 auto;max-width:220px}
@media (max-width:860px){
.hm-hero.hm-hero--art{grid-template-columns:1fr;gap:var(--space-4)}
.hm-hero--art .hm-hero__art{display:block!important;max-width:200px;padding:var(--space-2)}
:root[data-persona="senior"] .hm-hero--art .hm-hero__art{max-width:170px;padding:0}
:root[data-persona="parent"] .hm-hero--art .hm-hero__art,:root[data-persona="teen"] .hm-hero--art .hm-hero__art{display:none!important}
.hm-grid--blend .hm-n4 .hm-card__title{font-size:30px;line-height:36px}
.hm-n4__lead .hm-card__icon{width:48px;height:48px}
.hm-grid--blend .hm-n4>.hm-n4__form{padding-top:var(--space-3)}
}
/* Teen is a dark world: the newsletter eyebrow/icon use the dark-theme gold so they pass AA on #1D2026 */
:root[data-persona="teen"] .hm-card--news{--p-text:#F6C25A;--p-soft:#3A2F14}
/* spacing 2026-10-21: a little more breathing room on desktop (~25-40% more gaps and card padding). The 2x2 newsletter card still matches the Tools + Glossary stack (equal 1fr rows). */
@media (min-width:1024px){
.hm{padding-top:var(--space-7)}
.hm-hero.hm-hero--art{margin-bottom:52px}
.hm-grid.hm-grid--blend{gap:30px}
.hm-grid--blend .hm-card{padding:calc(30px + 8px) var(--space-6) 18px}
.hm-grid--blend .hm-card--news.hm-n4{padding:calc(32px + 12px) 40px 30px;gap:var(--space-4)}
.hm-band{margin-top:30px;padding:calc(18px + 8px) var(--space-6) 18px}
}
@media (max-width:860px){.hm-grid.hm-grid--blend{gap:24px}.hm-band{margin-top:24px}}

/* header-footer-align 2026-10-22: Seniors desktop hero = approved Parent layout (text left, Byte family art right of the headline, above the cards).
   Older Seniors rules centred the text and put the art on top at every width. Phones (<=860px) keep the centred stack with the art on top. */
@media (min-width:861px){
:root[data-persona="senior"] .hm-hero,:root[data-persona="senior"] .hm-hero.hm-hero--art{grid-template-columns:minmax(0,1fr) 280px;text-align:left}
:root[data-persona="senior"] .hm-hero .gb-eyebrow,:root[data-persona="senior"] .hm-hero h1,:root[data-persona="senior"] .hm-hero .gb-hero__lead{text-align:left}
:root[data-persona="senior"] .hm-hero .gb-hero__lead{margin:0}
:root[data-persona="senior"] .hm-hero .gb-eyebrow{padding-left:0;padding-right:0}
:root[data-persona="senior"] .hm-hero--art .hm-hero__art{order:0;margin:0;max-width:280px}
}