/* ==========================================================================
   /ally — page styles, expressed entirely in AllPoints design-system tokens.
   Load assets/allpoints-tokens.css first.

   Applies ALLPOINTS-DESIGN-SYSTEM.md (2026-09-11 handoff) as written: no
   gradients, 8px maximum radius, Lato 400/700 only, the spec type scale, the
   §6 component specs, the §7 semantic colours. Markup, copy, structure and
   every link on the page are unchanged.

   Nothing here is a raw hex. If a value needs changing, change the token.

   ── Decisions where the spec had no answer (§0.3 says use the nearest token
      and flag it). These are house rules now: every AllPoints page with a
      navy surface hits the same four. ─────────────────────────────────────

   [D1] No dark-surface text tokens exist. Text on navy uses the primary tint
        ramp the spec already ships: --ap-color-primary-border (#91CAFF) for
        uppercase labels, --ap-color-primary-bg (#E6F4FF) for running text.
        Measured 6.25:1 and 9.69:1 on #003D77 — both clear WCAG AA.

   [D2] §6.2's outline button assumes a light surface (#1D1D1D text), which is
        unreadable on navy. Restated with --ap-color-text-inverse on
        --ap-color-border-solid (6.76:1). The spec's hover — white fill, navy
        text and border — is kept exactly, and works on either surface.

   [D3] The spec has no small-button variant. The nav CTA is §6.1 at Base
        type on the 32px control height, so it stays a scaled primary button
        rather than a new component.

   [D4] The system has exactly one navy, so the footer cannot sit darker than
        the CTA band above it the way it does today. Rather than invent a
        second navy, the footer moves to the layout surface
        (--ap-color-bg-layout), which §6.5 already defines. Zero new values,
        and the band-to-footer transition still reads.

   ── One accessibility departure, deliberate ─────────────────────────────
   --ap-color-text-secondary (rgba(0,0,0,0.45)) measures 3.36:1 on white and
   fails WCAG AA for body text. The grey /ally uses today is 5.53:1, so
   mapping copy onto the token as §7 suggests would make this page LESS
   accessible than it is now. Body copy therefore uses --ap-color-text
   (16.86:1) — which is also what §8 says to do when unsure — and hierarchy
   is carried by size and weight instead of by contrast. The token is used
   nowhere on this page. Proposed amendment for marketing: rgba(0,0,0,0.65),
   which measures 7.00:1 and preserves the intent.
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--ap-font-family);
  font-size:var(--ap-text-base);
  line-height:var(--ap-leading-base);
  font-weight:var(--ap-font-weight-regular);
  color:var(--ap-color-text);
  background:var(--ap-color-bg-container);
  letter-spacing:0;
}
img{max-width:100%}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--ap-color-primary);
  outline-offset:2px;
  box-shadow:var(--ap-focus-ring);
}
/* Focus on a navy surface needs the inverse outline to be seen at all. */
.hero a:focus-visible,.fin a:focus-visible{outline-color:var(--ap-color-text-inverse)}

/* ── Launch strip → §6.6 tag colours, run full width ───────────────────── */
.strip{
  background:var(--ap-color-accent);
  color:var(--ap-color-primary);
  text-align:center;
  font-size:var(--ap-text-sm);
  line-height:var(--ap-leading-sm);
  font-weight:var(--ap-font-weight-bold);
  padding:var(--ap-space-sm) var(--ap-space);
}
.strip b{font-weight:var(--ap-font-weight-bold)}
.strip a{
  color:var(--ap-color-primary);
  font-weight:var(--ap-font-weight-bold);
  text-decoration:underline;
  text-underline-offset:4px;
  margin-left:var(--ap-space-xxs);
  white-space:nowrap;
}
.strip a:hover,.strip a:focus{color:var(--ap-color-primary-hover)}

/* ── Nav ───────────────────────────────────────────────────────────────── */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ap-space);
  max-width:var(--ap-container-max);margin:0 auto;
  padding:var(--ap-space) var(--ap-space-xl);
  border-bottom:1px solid var(--ap-color-split);
}
.nav img{height:40px;display:block}
/* [D3] §6.1 at Base type */
.cta-sm{
  display:inline-flex;align-items:center;
  min-height:var(--ap-control);
  background:var(--ap-color-cta);
  color:var(--ap-color-text-inverse);
  font-size:var(--ap-text-base);line-height:var(--ap-leading-base);
  font-weight:var(--ap-font-weight-regular);
  padding:var(--ap-space-xxs) var(--ap-space-sm);
  border:none;border-radius:var(--ap-radius-lg);
  box-shadow:var(--ap-shadow-button);
  text-decoration:none;white-space:nowrap;
}
.cta-sm:hover,.cta-sm:focus{background:var(--ap-color-cta-hover);color:var(--ap-color-text-inverse)}

/* ── Hero ──────────────────────────────────────────────────────────────────
   Was linear-gradient(168deg,#0d3159,#0a2b50,#081f3a). §0.7 forbids
   gradients, so this is the flat brand navy.                               */
.hero{
  background:var(--ap-color-primary);
  color:var(--ap-color-text-inverse);
  padding:var(--ap-space-xxl) var(--ap-space-xl) 0;
  overflow:hidden;
}
.hero-grid{
  display:flex;gap:var(--ap-space-xl);align-items:flex-start;
  max-width:var(--ap-container-max);margin:0 auto;
}
.hero-copy{flex:1.15;padding-bottom:var(--ap-space-lg);min-width:0}
.eyebrow{                                           /* [D1] */
  font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm);
  letter-spacing:0;                            /* §2: letter-spacing is always 0 */
  text-transform:uppercase;
  color:var(--ap-color-primary-border);
  font-weight:var(--ap-font-weight-bold);
  margin:0 0 var(--ap-space-sm);
}
h1{
  font-size:var(--ap-text-h1);line-height:var(--ap-leading-h1);
  font-weight:var(--ap-font-weight-bold);
  letter-spacing:0;margin:0 0 var(--ap-space-sm);
  color:var(--ap-color-text-inverse);
  text-wrap:balance;
}
h1 .ally{color:var(--ap-color-accent)}    /* was #ff6a5e; gold is the only warm token — 5.51:1 on navy */
.sub{
  font-size:var(--ap-text-xl);line-height:var(--ap-leading-xl);
  color:var(--ap-color-text-inverse);
  margin:0 0 var(--ap-space-sm);
}
.lead{                                              /* [D1] */
  font-size:var(--ap-text-lg);line-height:var(--ap-leading-lg);
  color:var(--ap-color-primary-bg);
  max-width:52ch;margin:0 0 var(--ap-space-lg);
}
.btnrow{
  display:flex;gap:var(--ap-space-sm);align-items:flex-start;
  flex-wrap:wrap;margin-bottom:var(--ap-space-lg);
}
.stack{display:flex;flex-direction:column;align-items:center;gap:var(--ap-space-xs)}

/* §6.1 primary CTA, verbatim */
.btn-primary{
  display:inline-block;
  background:var(--ap-color-cta);
  color:var(--ap-color-text-inverse);
  font:var(--ap-font-weight-regular) var(--ap-text-lg)/22px var(--ap-font-family);
  padding:6px var(--ap-space) var(--ap-space-xs);
  border:none;border-radius:var(--ap-radius-lg);
  box-shadow:var(--ap-shadow-button);
  text-decoration:none;cursor:pointer;
}
.btn-primary:hover,.btn-primary:focus{background:var(--ap-color-cta-hover);color:var(--ap-color-text-inverse)}

/* §6.2 outline button, restated for the navy surface [D2] */
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--ap-space-xs);
  background:transparent;
  color:var(--ap-color-text-inverse);
  font:var(--ap-font-weight-regular) var(--ap-text-lg)/var(--ap-leading-lg) var(--ap-font-family);
  padding:7px var(--ap-space-sm);
  border:1px solid var(--ap-color-border-solid);
  border-radius:var(--ap-radius-lg);
  box-shadow:var(--ap-shadow-button);
  text-decoration:none;cursor:pointer;
}
.btn-ghost:hover,.btn-ghost:focus{
  background:var(--ap-color-bg-container);
  border-color:var(--ap-color-primary);
  color:var(--ap-color-primary);
}
.btn-ghost .tri{display:inline-flex;width:12px;height:12px;color:var(--ap-color-accent);flex:none}
.btn-ghost .tri svg{width:100%;height:100%;display:block}
.btn-ghost:hover .tri,.btn-ghost:focus .tri{color:var(--ap-color-primary)}

.also{
  font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm);
  color:var(--ap-color-primary-bg);                 /* [D1] */
  margin:0;white-space:nowrap;
  display:flex;align-items:center;gap:var(--ap-space-xxs);
}
.also .ic-inline{width:13px;height:13px;flex:none;display:block}
.also a{                                            /* §6.3 */
  color:var(--ap-color-text-inverse);
  font-weight:var(--ap-font-weight-bold);
  text-decoration:underline;text-underline-offset:4px;
}
.also a:hover,.also a:focus{text-underline-offset:5px}

.sites{padding-bottom:var(--ap-space-lg);max-width:460px}
.sites-h{                                           /* [D1] */
  font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm);
  letter-spacing:0;text-transform:uppercase;
  color:var(--ap-color-primary-border);
  font-weight:var(--ap-font-weight-bold);
  margin-bottom:var(--ap-space-xs);
}
.pills{display:flex;flex-wrap:wrap;gap:var(--ap-space-xs)}
/* §6.6 tags. Was border-radius:999px, which §4 forbids. */
.pills span{
  background:transparent;
  border:1px solid var(--ap-color-primary-border);
  color:var(--ap-color-primary-bg);                 /* [D1] */
  font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm);
  font-weight:var(--ap-font-weight-regular);
  padding:1px var(--ap-space-xs);
  border-radius:var(--ap-radius-sm);
  white-space:nowrap;
}

/* ── Hero panel (the Ally card mock) → §6.5 ────────────────────────────── */
.hero-visual{flex:1;position:relative;min-height:396px}
.panel{
  background:var(--ap-color-bg-elevated);
  border:1px solid var(--ap-color-border-secondary);
  border-radius:var(--ap-radius-lg);
  box-shadow:var(--ap-shadow-popup);
  width:min(400px,100%);
  position:absolute;right:var(--ap-space-lg);top:6px;
  color:var(--ap-color-text);overflow:hidden;
}
.panel-h{
  background:var(--ap-color-primary);color:var(--ap-color-text-inverse);
  display:flex;align-items:center;gap:var(--ap-space-xs);
  padding:var(--ap-space-sm) var(--ap-space);
}
.panel-h img{height:16px}
.panel-h .nm{font-weight:var(--ap-font-weight-bold);font-size:var(--ap-text-lg)}
.panel-h .tag{font-size:var(--ap-text-sm);color:var(--ap-color-primary-border);font-style:italic}
.panel-b{padding:var(--ap-space)}
.panel-li{
  color:var(--ap-color-success-text);
  font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm);
  font-weight:var(--ap-font-weight-bold);
  margin-bottom:var(--ap-space-xs);
}
.panel-pn{
  font-weight:var(--ap-font-weight-bold);
  font-size:var(--ap-text-lg);line-height:var(--ap-leading-lg);
  margin-bottom:var(--ap-space-xxs);
}
.panel-sku{font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm);margin-bottom:var(--ap-space-sm)}
.panel-sku em{color:var(--ap-color-success-text);font-style:normal;font-weight:var(--ap-font-weight-bold)}
/* §7 Success family */
.pricebox{
  background:var(--ap-color-success-bg);
  border:1px solid var(--ap-color-success-border);
  border-radius:var(--ap-radius);
  padding:var(--ap-space-sm) var(--ap-space);
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--ap-space-sm);
}
.pricebox .yp{font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm)}
.pricebox .amt{
  font-size:var(--ap-text-h3);line-height:var(--ap-leading-h3);
  font-weight:var(--ap-font-weight-bold);color:var(--ap-color-success-text);
}
.pricebox .save{
  text-align:right;font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm);
  color:var(--ap-color-success-text);font-weight:var(--ap-font-weight-bold);
}
.pricebox .save small{display:block;font-weight:var(--ap-font-weight-regular);color:var(--ap-color-text)}
.addbtn{
  background:var(--ap-color-primary);color:var(--ap-color-text-inverse);
  text-align:center;font-weight:var(--ap-font-weight-bold);
  font-size:var(--ap-text-base);line-height:var(--ap-leading-base);
  border-radius:var(--ap-radius-lg);
  padding:var(--ap-space-xs);min-height:var(--ap-control-lg);
  display:flex;align-items:center;justify-content:center;
}
.mascot{position:absolute;right:392px;top:210px;width:150px}

/* ── Video band ────────────────────────────────────────────────────────── */
.vid{
  background:var(--ap-color-bg-layout);
  padding:var(--ap-space-xxl) var(--ap-space-xl);
  text-align:center;
}
h2{
  font-size:var(--ap-text-h2);line-height:var(--ap-leading-h2);
  font-weight:var(--ap-font-weight-bold);
  letter-spacing:0;margin:0 0 var(--ap-space-xs);
  text-wrap:balance;
}
.vid p{margin:0 auto var(--ap-space);font-size:var(--ap-text-lg);line-height:var(--ap-leading-lg);max-width:65ch}
.player{
  max-width:960px;margin:0 auto;
  border-radius:var(--ap-radius-lg);overflow:hidden;
  box-shadow:var(--ap-shadow-popup);
  background:var(--ap-color-text);line-height:0;
}
.player video{width:100%;aspect-ratio:16/9;display:block}

/* ── Benefit cards → §6.5 ──────────────────────────────────────────────── */
.ben{background:var(--ap-color-bg-container);padding:var(--ap-space-xxl) var(--ap-space-xl)}
.cards{display:flex;gap:var(--ap-space-sm);max-width:1080px;margin:0 auto}
.card{
  flex:1;
  background:var(--ap-color-bg-container);
  border:1px solid var(--ap-color-border-secondary);
  border-radius:var(--ap-radius-lg);
  padding:var(--ap-space-lg);
}
.card .ic{
  width:var(--ap-control-lg);height:var(--ap-control-lg);
  border-radius:var(--ap-radius-lg);
  background:var(--ap-color-primary);color:var(--ap-color-text-inverse);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--ap-text-xl);font-weight:var(--ap-font-weight-bold);
  margin-bottom:var(--ap-space-sm);flex:none;
}
.card .ic svg{width:20px;height:20px;display:block}
.card h3{
  margin:0 0 var(--ap-space-xs);
  font-size:var(--ap-text-h4);line-height:var(--ap-leading-h4);
  font-weight:var(--ap-font-weight-bold);
}
.card p{margin:0;font-size:var(--ap-text-base);line-height:var(--ap-leading-base)}

/* ── Phone section ─────────────────────────────────────────────────────── */
.mob{background:var(--ap-color-bg-layout);padding:var(--ap-space-xxl) var(--ap-space-xl)}
.mob-in{max-width:1080px;margin:0 auto}
.mob-head{text-align:center;margin-bottom:var(--ap-space-xl)}
/* §2: a heading may be navy when it acts as a section title on a light ground */
.mob .eyebrow{color:var(--ap-color-primary);margin-bottom:var(--ap-space-xs)}
.mob .lead2{margin:0 auto;font-size:var(--ap-text-lg);line-height:var(--ap-leading-lg);max-width:58ch}
.mob-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--ap-space-xl);align-items:start}
.mob .player{max-width:none}
.mob .cap{
  font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm);
  text-align:center;margin:var(--ap-space-sm) 0 0;
}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{
  display:flex;gap:var(--ap-space-sm);align-items:flex-start;
  padding:var(--ap-space-sm) 0;
  border-bottom:1px solid var(--ap-color-split);
}
.steps li:last-child{border-bottom:0}
/* Was a 30px circle (15px radius). §4: 8px is the maximum. */
.steps .n{
  counter-increment:s;
  width:var(--ap-control);height:var(--ap-control);
  border-radius:var(--ap-radius-lg);
  background:var(--ap-color-primary);color:var(--ap-color-text-inverse);
  font-weight:var(--ap-font-weight-bold);font-size:var(--ap-text-base);
  display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;
}
.steps .n::before{content:counter(s)}
.steps h3{
  margin:0 0 var(--ap-space-xxs);
  font-size:var(--ap-text-h5);line-height:var(--ap-leading-h5);
  font-weight:var(--ap-font-weight-bold);
}
.steps p{margin:0;font-size:var(--ap-text-base);line-height:var(--ap-leading-base)}

.how{
  background:var(--ap-color-bg-container);
  border:1px solid var(--ap-color-border-secondary);
  border-radius:var(--ap-radius-lg);
  padding:var(--ap-space-lg);
  margin-top:var(--ap-space-lg);
  display:grid;grid-template-columns:1fr auto;gap:var(--ap-space-xl);align-items:center;
}
.how h3{
  margin:0 0 var(--ap-space-sm);
  font-size:var(--ap-text-h5);line-height:var(--ap-leading-h5);
  font-weight:var(--ap-font-weight-bold);
}
.how ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--ap-space-xs) var(--ap-space-lg);
}
.how li{
  font-size:var(--ap-text-base);line-height:var(--ap-leading-base);
  padding-left:var(--ap-space-md);position:relative;
}
.how li::before{
  content:"";position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:50%;background:var(--ap-color-primary);
}
.how li b{font-weight:var(--ap-font-weight-bold)}
.go{
  text-align:center;
  border-left:1px solid var(--ap-color-split);
  padding-left:var(--ap-space-lg);min-width:180px;
}
.go .qr{
  width:118px;height:118px;display:block;margin:0 auto var(--ap-space-xs);
  background:var(--ap-color-bg-container);
  border:1px solid var(--ap-color-border-secondary);
  border-radius:var(--ap-radius-lg);
  padding:var(--ap-space-xs);
}
.go .qr svg{width:100%;height:100%;display:block}
.go a.url{                                          /* §6.3 */
  color:var(--ap-color-primary);
  font:var(--ap-font-weight-bold) var(--ap-text-base)/19.5px var(--ap-font-family);
  text-decoration:none;
}
.go a.url:hover,.go a.url:focus{text-decoration:underline;text-underline-offset:5px}
.go .ask{font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm);margin:var(--ap-space-xs) 0 0}

/* ── Final band + footer ───────────────────────────────────────────────── */
.fin{
  background:var(--ap-color-primary);color:var(--ap-color-text-inverse);
  text-align:center;padding:var(--ap-space-xxl) var(--ap-space-xl);
}
.fin h2{margin-bottom:var(--ap-space-md);color:var(--ap-color-text-inverse)}
.fin .sub2{
  color:var(--ap-color-primary-bg);                 /* [D1] */
  font-size:var(--ap-text-base);line-height:var(--ap-leading-base);
  margin:var(--ap-space) 0 0;
}
.fin .sub2 a{
  color:var(--ap-color-text-inverse);font-weight:var(--ap-font-weight-bold);
  text-decoration:underline;text-underline-offset:4px;
}
/* [D4] layout surface instead of a second, darker navy */
footer{
  background:var(--ap-color-bg-layout);
  color:var(--ap-color-text);
  font-size:var(--ap-text-sm);line-height:var(--ap-leading-sm);
  display:flex;justify-content:space-between;gap:var(--ap-space-xs);
  padding:var(--ap-space-lg) var(--ap-space-xl);flex-wrap:wrap;
}
footer a{
  color:var(--ap-color-primary);text-decoration:none;
  margin-left:var(--ap-space-lg);font-weight:var(--ap-font-weight-bold);
}
footer a:hover{text-decoration:underline;text-underline-offset:4px}

/* ── Tablet (§3, ≤991px) ───────────────────────────────────────────────── */
@media (max-width:991px){
  .hero-grid{flex-direction:column;gap:0}
  .hero-visual{min-height:0;width:100%;padding-bottom:var(--ap-space-lg)}
  .panel{position:relative;right:auto;top:auto;margin-top:6px}
  .mascot{right:var(--ap-space-xs);top:-64px;width:92px;z-index:2}
  .sites{max-width:none}
  .btnrow{flex-direction:column;align-items:stretch;gap:var(--ap-space-xs)}
  .stack{align-items:stretch}
  .btn-primary,.btn-ghost,.cta-sm{text-align:center;justify-content:center}
  .also{white-space:normal;justify-content:center}
  .cards{flex-direction:column;gap:var(--ap-space-sm)}
  .card{display:flex;gap:var(--ap-space-sm);align-items:flex-start;padding:var(--ap-space)}
  .card .ic{margin:2px 0 0}
  .card h3{font-size:var(--ap-text-h5);line-height:var(--ap-leading-h5);margin:0 0 var(--ap-space-xxs)}
  .mob-grid{grid-template-columns:1fr}
  .how{grid-template-columns:1fr;gap:var(--ap-space)}
  .how ul{grid-template-columns:1fr}
  .go{border-left:0;padding-left:0;border-top:1px solid var(--ap-color-split);padding-top:var(--ap-space)}
  .go .qr{display:none}
  footer{flex-direction:column}
  footer a{margin:0 var(--ap-space) 0 0}
}

/* ── Phone step-down (§6.1 / §6.2, ≤601px) ─────────────────────────────── */
@media (max-width:601px){
  .hero,.vid,.ben,.mob,.fin,.nav,footer{
    padding-left:var(--ap-space);padding-right:var(--ap-space);
  }
  .btn-primary,.cta-sm{
    font-size:var(--ap-text-base);line-height:20px;
    padding:5px 14px;border-radius:var(--ap-radius-sm);
  }
  .btn-ghost{font-size:var(--ap-text-base);line-height:20px}
  h1{font-size:var(--ap-text-h2);line-height:var(--ap-leading-h2)}
  h2{font-size:var(--ap-text-h3);line-height:var(--ap-leading-h3)}
  .sub{font-size:var(--ap-text-lg);line-height:var(--ap-leading-lg)}
  .lead,.vid p,.mob .lead2{font-size:var(--ap-text-base);line-height:var(--ap-leading-base)}
}

/* ── Holding page (2026-10-09) ─────────────────────────────────────────────
   /ally is a single navy hero with the notice and the mascot. Everything below
   is scoped to body.holding so the rules above stay exactly as they shipped. */
body.holding{min-height:100vh;display:flex;flex-direction:column}
body.holding .nav{width:100%}            /* body is a column flexbox: auto margins would otherwise shrink-and-centre the nav */
body.holding main{flex:1;display:flex;flex-direction:column}
body.holding .hero{flex:1;padding-bottom:var(--ap-space-xxl)}
body.holding .hero-grid{align-items:center}
body.holding .hero-copy{padding-bottom:0}
body.holding .hero-visual{min-height:0;display:flex;justify-content:center;align-items:center}
body.holding .hero-visual .mascot{position:static;width:260px;max-width:60%}
body.holding .lead{margin-bottom:var(--ap-space-md)}
body.holding .note{
  color:var(--ap-color-primary-bg);                 /* [D1] */
  font-size:var(--ap-text-base);line-height:var(--ap-leading-base);
  margin:var(--ap-space) 0 0;
}
body.holding .note a{color:var(--ap-color-text-inverse);font-weight:var(--ap-font-weight-bold);text-decoration:underline;text-underline-offset:4px}
.nav .nav-link{
  color:var(--ap-color-primary);font-weight:var(--ap-font-weight-bold);
  text-decoration:none;white-space:nowrap;
}
.nav .nav-link:hover,.nav .nav-link:focus{text-decoration:underline;text-underline-offset:4px}
@media (max-width:991px){
  body.holding .hero-visual{order:-1;padding-bottom:var(--ap-space)}
  body.holding .hero-visual .mascot{width:150px}
}