/* GENERATED by build_pages.py from home-v5.html: header, strip, close card, footer.
   Do not edit. Change home-v5 and rebuild. */
/* ---- header ------------------------------------------------------------
   Sits on the purple hero. On scroll it becomes a solid cream bar with ink
   text and the ink logo, the reference's wab-header-scrolled swap. */
.site-header{position:sticky;top:0;z-index:50;background:var(--purple);color:var(--white);
  transition:background-color var(--t2) ease-in-out,color var(--t2) ease-in-out,
             box-shadow var(--t2) ease-in-out}
.site-header .bar{display:flex;align-items:center;gap:var(--s6);min-height:88px}
.site-header .logo{display:block;height:48px;flex:none}
.site-header .logo img{height:48px;width:auto;display:block}
.site-header .logo .ink{display:none}
.site-header.stuck{background:var(--cream);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.site-header.stuck .logo .white{display:none}
.site-header.stuck .logo .ink{display:block}
.site-nav{display:flex;align-items:center;gap:var(--s2);margin-inline:auto}
.site-nav>li{position:relative}
.site-nav a,.site-nav button{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;
  border-radius:var(--r-pill);font:inherit;font-weight:500;font-size:var(--small);color:inherit;
  background:none;border:0;text-decoration:none;cursor:pointer;
  transition:background-color var(--t1) ease-in-out}
.site-nav a:hover,.site-nav button:hover,.site-nav button[aria-expanded="true"]{background:rgba(255,255,255,.12)}
.site-header.stuck .site-nav a:hover,.site-header.stuck .site-nav button:hover,
.site-header.stuck .site-nav button[aria-expanded="true"]{background:var(--cream-deep)}
.site-nav button svg{width:14px;height:14px;transition:transform var(--t1) ease-in-out}
.site-nav button[aria-expanded="true"] svg{transform:rotate(180deg)}
.site-header .ctas{display:flex;gap:var(--s3);flex:none}
.site-header .ctas .btn{min-height:44px;padding:10px 22px;font-size:var(--small)}
.site-header .ctas .btn-outline{color:var(--white);border-color:var(--white)}
.site-header .ctas .btn-outline:hover{background:var(--white);color:var(--purple)}
.site-header.stuck .ctas .btn-outline{color:var(--ink);border-color:var(--ink)}
.site-header.stuck .ctas .btn-outline:hover{background:var(--ink);color:var(--white)}

/* The dropdown panel: the hello-charles mega menu. White, 24px, shadow, three
   columned groups (the carousel's three stages), a bold heading and rows of
   20px line icon + label. Hrefs are the product pages the matching cards link to. */
.menu{position:absolute;top:calc(100% + 12px);left:0;transform:translateY(8px);width:max-content;
  background:var(--white);color:var(--ink);border-radius:var(--r);box-shadow:var(--shadow-lg);
  padding:var(--s6) var(--s7);display:grid;grid-template-columns:repeat(3,auto);gap:var(--s9);
  opacity:0;visibility:hidden;
  transition:opacity var(--t2) ease-in-out,transform var(--t2) ease-in-out,visibility 0s linear var(--t2)}
.menu.open,.site-nav>li:hover>.menu,.site-nav>li:focus-within>.menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu h4{font-size:var(--small);font-weight:700;color:var(--ink);margin:0 0 var(--s3);padding-inline:8px}
.menu ul{display:grid;gap:2px}
.menu a{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 8px;border-radius:var(--r-sm);
  color:var(--ink);text-decoration:none;font-weight:500;font-size:var(--small);white-space:nowrap}
.menu a svg{width:20px;height:20px;flex:none;color:var(--ink-soft);transition:color var(--t1) ease-in-out}
.menu a:hover{background:var(--cream-deep)}
.menu a:hover svg{color:var(--ink)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;color:inherit;
  border-radius:50%;cursor:pointer;place-items:center}
.burger svg{width:24px;height:24px}
@media (max-width:1100px){
  .site-header .ctas .btn-outline{display:none}
}
@media (max-width:960px){
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--purple);
    flex-direction:column;align-items:stretch;padding:var(--s4) var(--gutter) var(--s6);gap:0;
    border-top:1px solid var(--purple-line)}
  .site-header.stuck .site-nav{background:var(--cream);border-top-color:var(--line)}
  .site-header.open .site-nav{display:flex;overflow-y:auto;overscroll-behavior:contain}
  .site-nav a,.site-nav button{width:100%;justify-content:space-between;padding:14px 8px;border-radius:12px;font-size:var(--body)}
  .menu{position:static;width:auto;grid-template-columns:1fr;gap:var(--s4);box-shadow:none;padding:0 0 var(--s3) var(--s3);
    background:transparent;color:inherit;display:none;opacity:1;visibility:visible;transform:none}
  .menu.open{display:grid}
  .site-nav>li:hover>.menu{display:none}.site-nav>li:hover>.menu.open{display:grid}
  .menu h4{color:inherit;opacity:.7;margin-bottom:var(--s1)}
  .menu a{color:inherit;white-space:normal;min-height:44px}.menu a svg{color:inherit;opacity:.8}
  .site-header.stuck .menu a:hover{background:var(--cream-deep)}
  .menu a:hover{background:rgba(255,255,255,.1)}
  .burger{display:grid}
  .site-header .ctas{margin-left:0}
  .site-header .ctas .btn-gold{min-height:40px;padding:8px 16px}
}

/* ---- announcement strip ---- */
.strip{background:var(--gold-soft);color:var(--ink)}
.strip .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:56px;font-size:var(--small);font-weight:500}
.strip .arrow{color:var(--ink);flex:none}
@media (max-width:600px){
  .strip .container{min-height:44px;padding-block:var(--s2);gap:var(--s3)}
  .strip .container>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .hero .btn-row .btn-gold{order:-1}
  .hero .btn-row .btn{width:100%}
}

/* ---- close card + footer, per references/FOOTER.md ---- */
.close .block{padding-block:var(--s11)}
.close .block h2{max-width:20ch;margin-inline:auto}
.close .block .lede{margin:var(--s5) auto 0}
.close .block .btn-row{justify-content:center;margin-top:var(--s7)}
.close .block .btn-note{text-align:center}
/* ~80px of cream between the card and the footer. The gap is the separator. */
.close{padding-bottom:var(--s11)}
.site-footer{background:var(--purple);color:var(--white);padding-top:var(--s10)}
.site-footer .main{display:grid;grid-template-columns:1.3fr repeat(6,1fr);gap:var(--s7)}   /* six link columns since Compare (28 Sep) */
.site-footer .brand{display:flex;flex-direction:column;gap:var(--s6)}
.site-footer .brand img{height:34px;width:auto;display:block;align-self:flex-start}
.site-footer .brand p{color:var(--mist);font-size:var(--small);max-width:26ch;margin:0}
.site-footer .social{display:flex;gap:var(--s4)}
.site-footer .social a{width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.6);
  display:grid;place-items:center;color:var(--white);transition:background-color var(--t1) ease-in-out}
.site-footer .social a:hover{background:rgba(255,255,255,.12)}
.site-footer .social svg{width:20px;height:20px}
.site-footer h3{font-size:var(--body);font-weight:700;margin-bottom:var(--s5)}
.site-footer .col-links li{line-height:34px}
.site-footer .col-links a{color:var(--white);text-decoration:none;font-size:var(--body)}
.site-footer .col-links a:hover{color:var(--lilac)}
.site-footer .authority{margin-top:var(--s9);padding-top:var(--s6);border-top:1px solid rgba(255,255,255,.16)}
.site-footer .marks{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5) var(--s8)}
.site-footer .marks img{height:28px;width:auto;display:block;opacity:.85}
.site-footer .marks .aa img{height:40px}
.site-footer .authority p{margin:var(--s5) 0 0;color:var(--mist);font-size:var(--small);max-width:none}
.site-footer .bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  flex-wrap:wrap;min-height:60px;margin-top:var(--s6);padding-block:var(--s4);
  border-top:1px solid rgba(255,255,255,.16);color:var(--mist);font-size:var(--small)}
.site-footer .legal{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center;font-size:var(--small)}
.site-footer .legal a{color:var(--mist);text-decoration:none}
.site-footer .legal a:hover{color:var(--white)}
.site-footer .lang{display:inline-flex;align-items:center;gap:6px}
.site-footer .lang svg{width:18px;height:18px}
@media (max-width:1100px){.site-footer .main{grid-template-columns:repeat(3,1fr)}.site-footer .brand{grid-column:1/-1}}
@media (max-width:768px){.site-footer .main{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.site-footer .main{grid-template-columns:1fr}}