/* ==========================================================================
   Be AI — Be Family View Standard + elevation layer.

   Enqueued at wp_enqueue_scripts priority 100, i.e. AFTER be-shell.css (99)
   and after beai.css, so these declarations win on source order without
   specificity tricks.

   1. TYPE — the Be Connect 2026 scale the owner reads as "natural", measured
      at 1440px on 2026-10-08: body 15.5 / h2 32 / card title 17.5. Be AI sets
      headings in Fraunces (a serif, so it reads a touch smaller at the same
      px) and body in Manrope (large x-height, like Poppins), so body sits at
      16 and the heading ramp is nudged up ~1px against Be Online's Hanken.
      Before this file, measured live: h1 65.5 / h2 50.4 / body 17.5 @1440 —
      poster sizes, which is what "too big and zoomed in" means.

   2. FRAME — wrapper 1440 (was 1800, which made 1920 screens read zoomed),
      one shared section rhythm, chrome under the 120px ceiling.

   3. ELEVATION — the Be Connect site.css treatment: one consistent hover
      lift, one focus ring, tactile press. Additive only; no recolouring.

   4. TABLET — 768-1024 gets touch-sized controls and the app shell's tab bar
      (the shell shows it to 899px, which covers iPad portrait).
   ========================================================================== */

:root{
  /* --- type (solved so it actually interpolates, never sits on its floor) - */
  --be-body:16px;
  --be-body-card:15.25px;
  --be-small:13.5px;
  --be-eyebrow:11.5px;
  --be-h1-hero:clamp(36px,calc(22px + 2.85vw),63px);
  --be-h1-page:clamp(31px,calc(23px + 1.6vw),47px);
  --be-h2:clamp(25px,calc(20px + 1vw),35px);
  --be-h3:clamp(18px,calc(16.6px + .3vw),21px);
  --be-h3-card:clamp(16.5px,calc(15.6px + .2vw),18.5px);
  --be-lede:clamp(16px,calc(15.3px + .18vw),18px);
  --be-lede-hero:clamp(16.5px,calc(15.4px + .28vw),19.5px);
  --be-btn:15.5px;

  /* --- frame ------------------------------------------------------------ */
  /* FULL BLEED, like Be Online and Be Connect. Measured live at 1920 on
     2026-10-10: both run content edge to edge with a ~44-48px gutter, while
     Be AI was boxed at 1440 and started its h1 288px in from the edge. That
     gap is what "not using full width" means. The container goes full; the
     TEXT keeps a measure, element by element, which is the only part that
     needs one. */
  --max:none;
  --gutter:clamp(18px,3vw,52px);
  --sec-y:clamp(30px,3.1vw,48px);
  --be-ring:0 0 0 3px rgba(198,60,30,.26);
  --be-lift:0 18px 40px -22px rgba(64,48,32,.45);
}

body{font-size:var(--be-body)}

/* --- headings ------------------------------------------------------------ */
h1{font-size:var(--be-h1-page);line-height:1.1}
.hero--home h1{font-size:var(--be-h1-hero);line-height:1.06;max-width:18ch}
.hero-page-in h1{font-size:var(--be-h1-page);max-width:30ch}
h2{font-size:var(--be-h2);line-height:1.14}
.split h2,.split--wide h2,.statement h2,.score-intro h2{font-size:var(--be-h2)}
.prose h2{font-size:var(--be-h2)}
h3{font-size:var(--be-h3);line-height:1.25}
/* a card title is its own token — never the section h3, which is what made
   Be Online's card titles 28px */
.card h3,.plan h2,.levels-key b,.notice h2,.score-next h3{font-size:var(--be-h3-card);line-height:1.3}
.plan h2{font-family:var(--f-head);letter-spacing:var(--head-ls)}

/* No cap on a hero lede, a section lead or a CTA paragraph - the house rule
   from 2026-10-06 ("why is text in this section not aligned to full width").
   Long-form reading prose keeps its measure; see .prose below. */
.hero .lede,.close-in .lede,.score-band .lede,.hero-page-in .lede{max-width:none}

/* --- body, ledes, labels -------------------------------------------------- */
.lede{font-size:var(--be-lede);line-height:1.6}
.hero .lede,.hero-page-in .lede{font-size:var(--be-lede-hero);line-height:1.58}
.card p,.ind span,.family span:not(.k),.levels-key p{font-size:var(--be-body-card)}
.card .cap,.muted-p,.seq li span,.flowv span{font-size:var(--be-small)}
.eyebrow{font-size:var(--be-eyebrow)}
.k,.menu-col .menu-h,.ftr h2,.ribbon,.fam-chip span,.levels-key .mono,
.cover thead th,.agenda-foot .mono,.q1-text .mono{font-size:var(--be-eyebrow)}
.prose{font-size:calc(var(--be-body) + .5px);line-height:1.68}

/* --- chrome: brand bar 40 + header 72 keeps the pair under the 120 ceiling.
       Touch pointers keep the 44px tap target the accessibility-ready tag
       is claimed on; only mouse pointers get the tighter bar. -------------- */
.hdr-in{min-height:72px}
@media (pointer:fine){
  .bebar a{min-height:40px}
  .bebar .bebar-pay span{padding-block:.26rem}
}
@media (max-width:899px){ .hdr-in{min-height:64px} }

/* --- buttons -------------------------------------------------------------- */
.btn{font-size:var(--be-btn);min-height:48px}
.btn--sm{font-size:14.5px;min-height:44px}

/* ==========================================================================
   ELEVATION — one hover lift, one focus ring, one press. Site-wide.
   ========================================================================== */
html{scroll-behavior:smooth}
::selection{background:var(--ai-deep);color:#fff}

.btn,.card,.ind a,.family a,.plan,.contact-cards a,.faq details{
  transition:transform .16s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(64,48,32,.5)}
.btn:active{transform:translateY(0)}
.card:hover,.ind a:hover,.family a:hover,.contact-cards a:hover{box-shadow:var(--be-lift)}
.plan:hover{transform:translateY(-3px);box-shadow:var(--be-lift)}
a.card:active,.ind a:active,.family a:active{transform:translateY(0) scale(.995)}

/* ==========================================================================
   TABLET — 768-1024. The shell's tab bar covers to 899px; this makes the
   band above it feel like an app too: bigger touch targets, two-up cards,
   and the mega menu out of the way.
   ========================================================================== */
@media (min-width:900px) and (max-width:1100px){
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btn{min-height:50px}
  .nav>li>a,.nav>li>button{padding-block:.7rem}
}
@media (pointer:coarse){
  .card .more,.ftr li a,.bebar a{min-height:44px}
  .faq summary{min-height:56px}
}

/* The app shell owns the bottom of a phone screen: give the closing band and
   the footer room so nothing hides behind the tab bar. */
@media (max-width:899px){
  html.be-has-tabbar .ftr{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}

/* ==========================================================================
   BRAND LOCKUP — the tagline belongs next to the mark, on every width.
   The master logo carries it as four justified grey lines, which is set for
   large reproduction; at a 72px header that is illegible and the grey fails
   contrast. So it is live text in the house label style: readable, selectable,
   and it scales. It sits OUTSIDE the home link, so it is not part of the
   link's target. Two lines keeps it narrow enough for a 390px header beside
   the burger (measured: ~180px for the longer line at 11.5px).
   ========================================================================== */
.brandline{display:flex;align-items:center;gap:clamp(9px,1vw,14px);min-width:0}
.brandline .logo{flex:none}
.brandline-tag{
  flex:none;max-width:20em;
  padding-left:clamp(9px,1vw,14px);
  border-left:1px solid var(--hair-2);
  font-family:var(--f-mono);font-size:var(--be-eyebrow);font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.32;
  color:var(--ai-ink);
}
.drawer-top .brandline-tag{border-left-color:var(--hair-2)}
@media (max-width:420px){
  .brandline{gap:8px}
  .brandline-tag{font-size:10.5px;letter-spacing:.05em;padding-left:8px;max-width:17.6em}
}

/* the section rail hides once the footer is reached (see beai.js chk()) */
.rail.rail--off{opacity:0;pointer-events:none;transition:opacity .2s}
.rail a span{max-width:none}

/* ==========================================================================
   FOOTER — rebuilt for full-bleed width.

   The old footer put each link group in a flex-wrap row beside a 110px
   label. That was fine in an 1800px box; across the full viewport the links
   stretched into a thin ragged line and orphaned the last one ("AI Managed"
   alone on its own row). The house rule is two compact rows and no
   multi-column link farms, so: brand block, then the groups as real columns
   that stay dense whatever the width.
   ========================================================================== */
.ftr-top{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(0,2.2fr);
  gap:clamp(22px,3vw,64px);
  align-items:start;
}
.ftr-rows{gap:clamp(16px,1.8vw,28px)}
.ft-row{
  display:grid;
  grid-template-columns:minmax(96px,auto) minmax(0,1fr);
  gap:.2rem clamp(14px,1.6vw,28px);
  align-items:start;
}
.ftr h2{margin:.5rem 0 0}
/* links as dense columns instead of one long wrapping line */
.ftr .ft-row ul{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:0 clamp(12px,1.4vw,26px);
  align-items:start;
}
.ftr .ft-row li a{min-height:38px;padding:.15rem 0}
@media (max-width:900px){
  .ftr-top{grid-template-columns:minmax(0,1fr)}
  .ft-row{grid-template-columns:minmax(0,1fr);gap:.1rem}
  .ftr .ft-row ul{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .ftr h2{margin:.7rem 0 .1rem}
}
@media (pointer:coarse){ .ftr .ft-row li a{min-height:44px} }

/* The hero is sized by its copy, not by the graphic. min-height was forcing
   62vh even when the words needed far less, which is what made it "massive". */
.hero-in{min-height:0}
.hero-visual{min-height:0}
.hero{padding-block:clamp(28px,3.4vw,58px) clamp(26px,2.8vw,48px)}
@media (min-width:1000px){ .hero-visual{min-height:380px} }

/* ==========================================================================
   MOBILE / TABLET APP MENU — the Be Connect sheet pattern.

   Read off beconnect.nz on a phone: a full-screen sheet with a greeting,
   a search field, a row of quick actions, services as cards, the rest as
   chips, a help list and a family line. Same skeleton, Be AI's warm ground
   instead of Be Connect's navy, and the section labels are <p class="am-h">
   rather than headings so nothing lands before the page h1.
   ========================================================================== */
.drawer.appm{padding:0;background:var(--paper);display:none}
.drawer.appm.open{display:flex;flex-direction:column}

.am-top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:none;
  padding:10px var(--gutter);min-height:64px;
  background:var(--paper);border-bottom:1px solid var(--hair);
  position:sticky;top:0;z-index:2;
}
.am-logo{display:inline-flex;align-items:center;min-height:44px}
.am-logo img{height:34px;width:auto}
.am-x{
  width:46px;height:46px;flex:none;display:grid;place-items:center;
  border-radius:14px;border:1px solid var(--hair-2);background:var(--surface);color:var(--ink);
}
.am-x svg{width:22px;height:22px}
.am-x:hover{border-color:var(--edge)}

.am-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px var(--gutter) calc(96px + env(safe-area-inset-bottom))}

.am-hello{display:grid;gap:.15rem;margin:0 0 14px}
.am-hello b{font-family:var(--f-head);font-weight:600;font-size:clamp(28px,7vw,34px);line-height:1.08;letter-spacing:var(--head-ls);color:var(--ink)}
.am-hello span{font-size:var(--be-body);color:var(--muted)}

.am-search{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:0 14px;min-height:52px;margin-bottom:16px;
  border:1.5px solid var(--edge);border-radius:var(--r-pill);background:var(--surface);
}
.am-search:focus-within{border-color:var(--ink);box-shadow:var(--be-ring)}
.am-search .am-sicon{width:19px;height:19px;flex:none;color:var(--ai-ink)}
.am-search input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font:inherit;font-size:16px;color:var(--ink);padding:0;
}
.am-search input::placeholder{color:var(--muted)}

.am-results{display:grid;gap:4px;margin:-6px 0 16px}
.am-results a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;align-items:center;
  padding:11px 14px;min-height:50px;border-radius:var(--r-md);
  border:1px solid var(--hair);background:var(--surface);color:var(--ink);font-weight:600;font-size:15.5px;
}
.am-results a:hover{border-color:var(--ai);color:var(--ink)}
.am-results a em{font-style:normal;font-family:var(--f-mono);font-size:var(--be-eyebrow);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.am-results p{margin:0;padding:12px 2px;color:var(--muted);font-size:15px}

.am-sec{margin-top:22px}
.am-h{
  margin:0 0 10px;font-family:var(--f-mono);font-size:var(--be-eyebrow);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}

/* quick actions: four square tiles */
.am-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.amq{
  display:grid;gap:5px;justify-items:center;text-align:center;align-content:start;
  padding:12px 6px;border-radius:var(--r-md);
  border:1px solid var(--hair);background:var(--surface);color:var(--ink);
  transition:transform .16s var(--ease),border-color .2s,box-shadow .2s;
}
.amq:hover,.amq:active{border-color:var(--ai);transform:translateY(-2px);box-shadow:var(--be-lift);color:var(--ink)}
.amq i{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--ai-deep);color:#fff}
.amq i svg{width:20px;height:20px}
.amq b{font-size:13px;font-weight:700;line-height:1.2}
.amq span{font-size:11.5px;color:var(--muted);line-height:1.2}
@media (max-width:430px){ .amq span{display:none} .amq{padding:12px 4px} .amq b{font-size:12.5px} }

/* services as cards, two up */
.am-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.am-tiles a{
  position:relative;overflow:hidden;display:grid;gap:3px;align-content:start;
  padding:14px;border-radius:var(--r-md);
  border:1px solid var(--hair);background:var(--surface);color:var(--ink);
  transition:transform .16s var(--ease),border-color .2s,box-shadow .2s;
}
.am-tiles a::after{
  content:"";position:absolute;right:-26px;top:-26px;width:72px;height:72px;border-radius:50%;
  background:radial-gradient(circle,rgba(216,70,38,.16),transparent 70%);pointer-events:none;
}
.am-tiles a:hover,.am-tiles a:active{border-color:var(--ai);transform:translateY(-2px);box-shadow:var(--be-lift);color:var(--ink)}
.am-tiles i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--ai-wash);color:var(--ai-ink);margin-bottom:6px}
.am-tiles i svg{width:19px;height:19px}
.am-tiles b{font-size:15px;font-weight:700;line-height:1.25}
.am-tiles span{font-size:12.5px;color:var(--muted);line-height:1.3}

/* everything else: chips, then a plain help list */
.am-chips{display:flex;flex-wrap:wrap;gap:7px}
.am-chips a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 15px;
  border-radius:var(--r-pill);border:1px solid var(--hair-2);background:var(--surface);
  color:var(--ink);font-size:14.5px;font-weight:600;
}
.am-chips a:hover,.am-chips a:active{border-color:var(--ai);color:var(--ai-ink)}

.am-help{display:grid;gap:2px}
.am-help a{
  display:flex;align-items:center;gap:12px;min-height:50px;padding:0 4px;
  color:var(--ink-2);font-size:15.5px;border-bottom:1px solid var(--hair);
}
.am-help a:last-child{border-bottom:0}
.am-help svg{width:18px;height:18px;flex:none;color:var(--ai-ink)}
.am-help a:hover{color:var(--ai-ink)}

.am-fam{
  display:flex;align-items:center;gap:10px;margin-top:22px;min-height:50px;
  padding:0 14px;border-radius:var(--r-md);background:var(--ai-wash);
  border:1px solid var(--ai-wash-2);color:var(--ink);font-size:14.5px;font-weight:600;
}
.am-fam .dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}
.am-fam span{flex:1;min-width:0}
.am-fam svg{width:16px;height:16px;color:var(--ai-ink)}

/* tablet: the sheet gets room, so the grids widen rather than stretch */
@media (min-width:620px){
  .am-body{padding-inline:clamp(24px,5vw,64px)}
  .am-quick{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .am-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .am-hello b{font-size:38px}
}
@media (min-width:900px){
  .am-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .am-body{padding-top:26px}
}