/* ============================================================
   benefits + newsletter + footer
   ============================================================ */
/* ============================================================
   benefits — a thin service strip: full-bleed rules, contained content
   ============================================================ */
.ben{
  padding-block:var(--space-lg) 0;
  border-top:1px solid var(--rule);
  /* the strip runs straight into the dark footer — no closing rule, no white gap */
  margin-bottom:var(--space-lg);
}
/* the columns carry their own air, so the grid is pulled back out by it
   and the first column's text still lines up with the page gutter */
.ben__grid{
  --benpad:clamp(24px,2.4vw,40px);
  display:grid;grid-template-columns:repeat(4,1fr);
  width:calc(100% - (var(--gutter) - var(--benpad)) * 2);
  max-width:calc(var(--max) - var(--gutter) * 2 + var(--benpad) * 2);
  margin-inline:auto;
}
.ben__i{
  display:grid;gap:9px;align-content:start;
  padding:clamp(4px,.6vw,10px) var(--benpad);
  border-right:1px solid var(--rule);
}
.ben__i:last-child{border-right:0}
.ben__top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:clamp(12px,1.3vw,19px)}
.ben__n{font-size:var(--t-label);letter-spacing:var(--ls-label);color:var(--ink-25);font-variant-numeric:tabular-nums}
.ben__t{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  transition:color .35s var(--ease)}
.ben__d{font-size:var(--t-meta);color:var(--ink-70);max-width:30ch;line-height:1.5}

/* one icon set, one weight, no boxes around it */
/* the viewBox carries 2 units of margin and the svg does not clip, so a hovered
   sparkle or arrow never loses its edge */
.ben__ic{
  width:30px;height:30px;flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;color:var(--ink-45);
  transition:color .35s var(--ease);
}
.ic-arrow{transition:transform .28s var(--ease)}
.ic-spark{transform-box:fill-box;transform-origin:center;transition:transform .3s var(--ease)}
.ic-turn{transform-box:view-box;transform-origin:50% 50%;transition:transform .32s var(--ease)}
.ic-check{stroke-dasharray:10;stroke-dashoffset:0}
@keyframes ben-draw{from{stroke-dashoffset:10}to{stroke-dashoffset:0}}

@media (hover:hover){
  .ben__i:hover .ben__ic{color:var(--ink)}
  .ben__i:hover .ben__t{color:var(--ink)}
  .ben__i:hover .ic-arrow{transform:translateX(3.5px)}
  .ben__i:hover .ic-spark{transform:scale(1.22) rotate(12deg)}
  .ben__i:hover .ic-turn{transform:rotate(20deg)}
  .ben__i:hover .ic-check{animation:ben-draw .34s var(--ease)}
}
@media (prefers-reduced-motion:reduce){
  .ic-arrow,.ic-spark,.ic-turn{transition:none}
  .ben__i:hover .ic-arrow,.ben__i:hover .ic-spark,.ben__i:hover .ic-turn{transform:none}
  .ben__i:hover .ic-check{animation:none}
}

/* two by two, with the rules still drawing the grid */
@media (max-width:860px){
  .ben__grid{--benpad:clamp(14px,3vw,22px);grid-template-columns:1fr 1fr}
  .ben__i{padding-block:clamp(16px,2.4vw,24px)}
  .ben__i:nth-child(odd){border-right:1px solid var(--rule)}
  .ben__i:nth-child(even){border-right:0}
  .ben__i:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .ben__t{letter-spacing:.11em}
  .ben__d{max-width:none}
}
@media (max-width:360px){
  .ben__grid{grid-template-columns:1fr}
  .ben__i{border-right:0;border-bottom:1px solid var(--rule)}
  .ben__i:last-child{border-bottom:0}
}

/* ---------- dark tail ---------- */
/* The tail sits one layer behind the page and is pinned to the bottom of the
   viewport, so the last light section slides up over it and uncovers it.
   No animation — the reveal is pure scroll + positioning. */
/* flow-root keeps the last section's bottom margin inside main, so the light
   layer paints all the way down and never lets the tail show early */
main{position:relative;z-index:1;background:var(--milk);display:flow-root}
.tail{position:sticky;bottom:0;z-index:0;background:var(--dark);color:var(--on-dark)}
/* a phone keeps the plain flow: sticky bottom and a dynamic address bar
   are a bad combination on mobile Safari */
@media (max-width:860px){.tail{position:static}}
/* the sign-in pages are a single screen, so the reveal would only show as a
   band of empty light between the form and the footer */
body.auth-page .tail{position:static}
body.auth-page .auth{min-height:calc(100svh - var(--bar-h) - 1px)}

/* newsletter: the heading and the field read as one block, not two columns apart */
.news{padding-block:calc(var(--section-large) / 2);border-bottom:1px solid var(--line-dark)}
.news__grid{
  display:grid;grid-template-columns:minmax(0,45fr) minmax(0,50fr);
  gap:clamp(26px,3.4vw,64px);align-items:end;
}
.news__lead{display:grid;gap:clamp(12px,1.3vw,20px)}
.news__t{font-family:var(--display);font-weight:300;line-height:.98;letter-spacing:-.022em;
  font-size:clamp(2.1rem,4.2vw,3.6rem);text-wrap:balance}
.news__t em{font-style:italic}
.news__p{color:rgba(242,237,230,.62);max-width:min(100%,700px);font-size:var(--t-body)}
.news__side{display:grid;gap:14px;align-content:end}

.nform{display:flex;align-items:center;gap:18px;border-bottom:1px solid rgba(242,237,230,.26);
  padding-bottom:14px;transition:border-color .4s var(--ease)}
.nform:focus-within{border-color:var(--on-dark)}
.nform input{
  flex:1;min-width:0;background:none;border:0;outline:none;border-radius:0;color:var(--on-dark);
  font-size:clamp(1.0625rem,1.1vw,1.25rem);padding:6px 0;
}
.nform input::placeholder{color:rgba(242,237,230,.4)}
.nform button{
  flex:none;font-size:var(--t-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;color:var(--on-dark);
  transition:color .35s var(--ease)}
.nform button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.3;
  transition:transform .45s var(--slow)}
.nform button:hover svg,.nform:focus-within button svg{transform:translateX(4px)}
.nform button:hover{color:var(--accent-soft)}
.news__note{font-size:var(--t-label);letter-spacing:.06em;color:rgba(242,237,230,.42)}
.news__ok{font-size:var(--t-meta);color:var(--accent-soft);min-height:1em}

/* navigation: the brand column is wider, the rest step down in weight */
.foot{padding-block:clamp(44px,4.6vw,72px) 0}
.foot__grid{
  display:grid;grid-template-columns:minmax(0,28fr) minmax(0,16fr) minmax(0,16fr) minmax(0,18fr) minmax(0,16fr);
  gap:clamp(22px,2.6vw,40px);
}
.foot__brand{display:grid;gap:14px;align-content:start;max-width:34ch}
.foot__mark{display:flex;align-items:center}
/* white on the dark footer, from the same sprite the header uses */
.foot__logo{height:21px;width:auto;fill:var(--on-dark,#F2EDE6);flex:none}
.foot__blurb{color:rgba(242,237,230,.56);font-size:var(--t-meta);line-height:1.6}

.fgroup__h{margin:0}
.fgroup__h button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:rgba(242,237,230,.72);text-align:left;
}
.fgroup__ico{display:none;width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;
  transition:transform .4s var(--slow)}
.fgroup__body{display:grid;grid-template-rows:1fr}
.fgroup__body ul{display:grid;gap:11px;padding-top:16px}
.foot ul a{
  display:inline-flex;align-items:center;gap:7px;font-size:var(--t-meta);color:rgba(242,237,230,.88);
  background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;
  background-position:0 100%;background-repeat:no-repeat;
  transition:color .3s var(--ease),background-size .45s var(--slow);
}
.foot ul a:hover{color:var(--on-dark);background-size:100% 1px}
.fout{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;
  transition:transform .4s var(--slow)}
.foot ul a:hover .fout{transform:translate(3px,-1px)}

/* the social column is a single row of marks, not a third link list */
.fgroup--social .fgroup__h{color:rgba(242,237,230,.72);font-size:var(--t-label);
  letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.fsocial{display:flex;align-items:center;gap:12px;padding-top:16px}
.fsocial a{
  width:39px;height:39px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;
  color:rgba(255,255,255,.88);background:transparent;
  transition:border-color .25s var(--ease),background-color .25s var(--ease),
             color .25s var(--ease),transform .25s var(--ease);
}
.fsocial a:hover{
  border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.04);
  color:#fff;transform:translateY(-1px);
}
.fsocial svg{
  width:19px;height:19px;display:block;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}

.foot__legal{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line-dark);margin-top:clamp(34px,3.8vw,56px);padding-block:18px 22px;
  font-size:var(--t-label);letter-spacing:.08em;color:rgba(242,237,230,.46);
}
.foot__legal a{transition:color .3s var(--ease)}
.foot__legal a:hover{color:var(--on-dark)}
.foot__legal nav{display:flex;gap:22px;flex-wrap:wrap}
/* credit and legal links travel together on the right, parted by one hairline */
.foot__legal-r{display:flex;align-items:center;flex-wrap:wrap;margin-left:auto}
.foot__legal-r nav{padding-right:clamp(14px,1.4vw,20px)}
.foot__legal-r .foot__by{position:relative;padding-left:clamp(14px,1.4vw,20px)}
.foot__legal-r .foot__by::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:15px;background:rgba(242,237,230,.22);
}
.foot__by a{
  color:rgba(242,237,230,.68);position:relative;
  transition:color .2s var(--ease);
}
.foot__by a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease);
}
.foot__by a:hover{color:var(--on-dark)}
.foot__by a:hover::after{transform:scaleX(1)}

@media (max-width:1100px){
  .foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
  .foot__brand{grid-column:1/4;max-width:46ch}
}
@media (max-width:860px){
  .news__grid{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
  .news__t{font-size:clamp(2rem,8vw,2.8rem)}
  .foot__grid{grid-template-columns:1fr;gap:0}
  .foot__brand{grid-column:1;max-width:none;margin-bottom:26px}
  /* the groups collapse so the footer is not twenty links in a row */
  .fgroup{border-top:1px solid var(--line-dark)}
  .fgroup--social{padding-block:15px 4px}
  .fsocial{padding-top:14px}
  .fgroup__h button{padding-block:15px}
  .fgroup__ico{display:block}
  .fgroup.is-open .fgroup__ico{transform:rotate(45deg)}
  .fgroup__body{grid-template-rows:0fr;transition:grid-template-rows .4s var(--slow)}
  .fgroup.is-open .fgroup__body{grid-template-rows:1fr}
  .fgroup__body ul{overflow:hidden;padding-top:0;padding-bottom:0}
  .fgroup.is-open .fgroup__body ul{padding-bottom:18px}
  .foot__legal{margin-top:24px;flex-direction:column;align-items:flex-start;gap:14px}
  /* on a phone the right group drops to its own lines, same order, no hairline */
  .foot__legal-r{flex-direction:column;align-items:flex-start;gap:12px;margin-left:0}
  .foot__legal-r nav{padding-right:0}
  .foot__legal-r .foot__by{padding-left:0}
  .foot__legal-r .foot__by::before{display:none}
}
@media (min-width:861px){
  .fgroup__h button{pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
  .fgroup__body{transition:none}
  .nform button svg,.fout{transition:none}
}