/* Yusr marketing site — shared header, footer and page components.
   Loaded after yusr-tokens.css by every public marketing page. Everything here is namespaced
   (.sx-* for the shared chrome, .pg-* for page components) so it cannot collide with the
   per-page styles that index/zakat/pricing/privacy still carry. Two themes only, Light (default) and
   Dark, both set through html[data-theme]. */

:root{
  --sx-page:var(--y-bg); --sx-surface:var(--y-surface-subtle); --sx-card:var(--y-surface);
  --sx-ink:var(--y-ink); --sx-soft:var(--y-ink-soft); --sx-faint:var(--y-muted);
  --sx-rule:var(--y-border); --sx-rule2:var(--y-border-strong);
  --sx-brand:var(--y-brand); --sx-brand-fill:var(--y-brand); --sx-mark:var(--y-brand);
  --sx-tint:rgba(47,93,71,.07); --sx-zakat:var(--y-zakat);
  --sx-shadow:0 1px 2px rgba(15,22,38,.06), 0 18px 40px -16px rgba(15,22,38,.22);
  --sx-shot:0 1px 2px rgba(15,22,38,.06), 0 20px 40px -18px rgba(15,22,38,.22);
  --sx-ease:cubic-bezier(.16,1,.3,1);
}
:root[data-theme="dark"]{
  --sx-page:var(--y-bg-dk); --sx-surface:var(--y-surface-dk); --sx-card:var(--y-surface-subtle-dk);
  --sx-ink:var(--y-ink-dk); --sx-soft:var(--y-ink-soft-dk); --sx-faint:var(--y-muted-dk);
  --sx-rule:var(--y-border-dk); --sx-rule2:var(--y-border-strong-dk);
  --sx-brand:var(--y-brand-dk); --sx-mark:var(--y-ink-dk); --sx-tint:rgba(107,156,133,.10); --sx-zakat:var(--y-zakat-dk);
  --sx-shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.65);
  --sx-shot:0 1px 2px rgba(0,0,0,.45), 0 22px 44px -18px rgba(0,0,0,.7);
}

/* ---- skip link, hidden helper ---- */
.skip-link{position:absolute;left:12px;top:-64px;z-index:1000;background:#2F5D47;color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;font-size:14px;text-decoration:none;}
.skip-link:focus{top:12px;}
.skip-link:focus-visible{outline:2px solid #fff;outline-offset:2px;}
main:focus{outline:none;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ======================================================================
   SHARED HEADER
   ====================================================================== */
.sx-header{position:sticky;top:0;z-index:50;background:var(--sx-page);border-bottom:1px solid var(--sx-rule);font-family:var(--y-font);color:var(--sx-ink);}
.sx-header *,.sx-footer *{box-sizing:border-box;}
/* Home only (body.home-fade): a frosted, translucent header whose bottom edge fades out, so the page blurs and fades under it as you scroll.
   Solid colour is the fallback where blur or color-mix are not supported. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) and (background:color-mix(in srgb,red 50%,transparent)){
  body.home-fade .sx-header{background:color-mix(in srgb,var(--sx-page) 74%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);border-bottom-color:transparent;}
  body.home-fade .sx-header::after{content:'';position:absolute;left:0;right:0;top:100%;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--sx-page) 74%,transparent),transparent);pointer-events:none;}
}
@media (prefers-reduced-transparency:reduce){ body.home-fade .sx-header{background:var(--sx-page);-webkit-backdrop-filter:none;backdrop-filter:none;} body.home-fade .sx-header::after{display:none;} }

.sx-wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
.sx-row{display:flex;align-items:center;gap:16px;height:68px;}
.sx-header :focus-visible,.sx-footer :focus-visible{outline:2px solid var(--sx-brand);outline-offset:2px;border-radius:6px;}

/* The Yusr wordmark next to the logo is set in VELISTA (the logo's own typeface); everything else stays in the site font. */
@font-face{font-family:'VELISTA';src:url('/VELISTA.woff2') format('woff2'),url('/VELISTA.woff') format('woff'),url('/VELISTA.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
.sx-word{font-family:'VELISTA',var(--y-font);font-weight:400;}
/* Lockup rule: mark height = 1.5x wordmark size, gap = 0.4x (em-based, holds at every breakpoint). */
.sx-brand{display:flex;align-items:center;gap:.4em;font-weight:600;font-size:25px;letter-spacing:-.01em;color:var(--sx-ink);text-decoration:none;flex-shrink:0;min-height:44px;}
.sx-mark{height:1.5em;width:.813em;flex-shrink:0;fill:currentColor;color:var(--sx-mark);}
@media (max-width:400px){ .sx-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;} }

.sx-nav{flex:1;min-width:0;}
.sx-list{display:flex;align-items:center;gap:2px;margin:0 0 0 8px;padding:0;list-style:none;}
.sx-link,.sx-trigger{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:none;
  font:500 14px/1 var(--y-font);color:var(--sx-soft);text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .18s,background .18s;}
.sx-link:hover,.sx-trigger:hover,.sx-trigger[aria-expanded="true"]{color:var(--sx-ink);background:var(--sx-surface);}
.sx-link[aria-current="page"],.sx-trigger[aria-current="true"]{color:var(--sx-ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--sx-brand);border-radius:8px 8px 0 0;}
.sx-zakat{color:var(--sx-ink);font-weight:600;}
.sx-zakat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sx-zakat);}
.sx-caret{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .18s;}
.sx-trigger[aria-expanded="true"] .sx-caret{transform:rotate(180deg);}

/* Features panel: three columns */
.sx-panel{display:none;position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);width:min(1160px,calc(100vw - 32px));
  background:var(--sx-page);border:1px solid var(--sx-rule);border-radius:16px;box-shadow:var(--sx-shadow);padding:26px 28px 24px;}
.sx-panel[data-open="true"]{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.sx-col-head{display:flex;flex-direction:column;gap:10px;color:var(--sx-ink);text-decoration:none;border-radius:10px;}
.sx-tile{width:44px;height:44px;border-radius:10px;background:var(--sx-brand-fill);display:grid;place-items:center;}
.sx-tile svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.sx-col-title{font-weight:600;font-size:17px;letter-spacing:-.01em;margin:0;}
.sx-col-head:hover .sx-col-title{text-decoration:underline;text-underline-offset:3px;}
.sx-col-promise{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--sx-soft);}
.sx-col-label{margin:16px 0 6px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--sx-faint);}
.sx-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;}
.sx-col li a{display:flex;align-items:center;min-height:36px;font-size:14px;color:var(--sx-ink);text-decoration:none;}
.sx-col li a:hover{text-decoration:underline;text-underline-offset:3px;}

/* Actions */
.sx-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto;}
.sx-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 18px;border-radius:999px;border:1px solid transparent;
  font:600 14px/1 var(--y-font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,transform .12s;}
.sx-btn::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;min-height:100%;transform:translateY(-50%);} /* 44px hit area */
.sx-btn:active{transform:translateY(1px);}
.sx-btn-primary{background:var(--sx-ink);color:var(--sx-page);}
.sx-btn-primary:hover{background:var(--sx-brand-fill);color:#fff;}
.sx-btn-quiet{background:transparent;color:var(--sx-ink);border-color:var(--sx-rule2);}
.sx-btn-quiet:hover{border-color:var(--sx-ink);}
.sx-login{background:var(--sx-card);}
.sx-lang{min-width:44px;padding-left:10px;padding-right:10px;font-size:12px;font-weight:800;}
.sx-lang[aria-pressed="false"]{font-weight:600;color:var(--sx-soft);}
.sx-theme{width:38px;height:38px;min-height:38px;padding:0;border-radius:8px;flex-shrink:0;}
.sx-theme::after{left:-5px;right:-4px;}
.sx-theme svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.sx-menu-btn{display:none;width:44px;min-height:44px;padding:0;border-radius:8px;}
.sx-menu-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}
.sx-menu-btn .sx-x{display:none;}
.sx-menu-btn[aria-expanded="true"] .sx-bars{display:none;}
.sx-menu-btn[aria-expanded="true"] .sx-x{display:block;}

/* Private-preview note (below the header on every marketing page) */
.sx-note{text-align:center;font:400 13px/1.5 var(--y-font);padding:9px 16px;color:var(--sx-soft);background:var(--sx-surface);border-bottom:1px solid var(--sx-rule);}

/* Mobile drawer */
.sx-drawer{display:none;border-top:1px solid var(--sx-rule);background:var(--sx-page);max-height:calc(100vh - 68px);overflow-y:auto;}
.sx-drawer[data-open="true"]{display:block;}
.sx-drawer .sx-wrap{padding-top:10px;padding-bottom:18px;}
.sx-d-group{margin:6px 0 10px;}
.sx-d-label{margin:10px 0 2px;font-size:12px;font-weight:600;color:var(--sx-faint);letter-spacing:.02em;}
.sx-d-link{display:flex;align-items:center;min-height:44px;font:500 15px/1.2 var(--y-font);color:var(--sx-ink);text-decoration:none;border-radius:8px;padding:0 4px;}
.sx-d-link[aria-current="page"]{font-weight:700;box-shadow:inset 3px 0 0 var(--sx-brand);padding-left:12px;}
.sx-d-sub{padding-left:14px;color:var(--sx-soft);font-weight:400;}
.sx-d-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;}

@media (max-width:1120px){
  .sx-list{display:none;}
  .sx-menu-btn{display:inline-flex;}
}
@media (max-width:600px){
  .sx-wrap{padding:0 18px;}
  .sx-row{gap:8px;}
  .sx-brand{font-size:20px;}
  .sx-actions .sx-theme{display:none;}
  .sx-btn{padding:9px 14px;font-size:12.5px;}
  /* On a phone Log in is the one button in the bar (Get started sits in the menu), filled, and stays >=14px (identity.spec). */
  .sx-actions .sx-start{display:none;}
  .sx-actions .sx-login{font-size:14px;background:var(--sx-ink);color:var(--sx-page);border-color:transparent;}
  .sx-actions .sx-login:hover{background:var(--sx-brand-fill);color:#fff;}
}
/* <=430px: only the language you can switch to is shown (as on the existing pages). */
@media (max-width:430px){
  .sx-actions .sx-lang[aria-pressed="true"]{display:none;}
  .sx-actions .sx-lang{opacity:1;font-weight:800;}
}
@media (max-width:360px){
  .sx-actions{gap:6px;}
  .sx-actions .sx-btn-primary{padding:9px 10px;}
}

/* Static fallback (visible only if the script never runs): a plain, working link list */
.sx-fallback{max-width:1180px;margin:0 auto;padding:12px 28px;font:500 14px/1.4 var(--y-font);}
.sx-fallback ul{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;padding:0;list-style:none;}
.sx-fallback a{color:var(--sx-ink);display:inline-flex;align-items:center;min-height:44px;}

/* ======================================================================
   SHARED FOOTER
   ====================================================================== */
footer.sx-footer{border:0;background:var(--sx-page);color:var(--sx-faint);font-family:var(--y-font);padding:40px 16px 16px;}
/* A dark emerald panel, inset from the page edge, in Light and Dark */
footer.sx-footer{--ft-bg:#0F2A1E;--ft-ink:#FFFFFF;--ft-soft:#B8C9BF;--ft-rule:rgba(255,255,255,.14);}
:root[data-theme="dark"] footer.sx-footer{--ft-bg:#143324;}
footer.sx-footer > .sx-wrap{max-width:1240px;background:var(--ft-bg);border-radius:20px;padding:0 44px;}
footer.sx-footer .sx-brand,footer.sx-footer .sx-word{color:var(--ft-ink);}
footer.sx-footer .sx-mark{color:var(--ft-ink);}
.sx-foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px;padding:48px 0 32px;font-size:14px;}
.sx-foot-brand{display:flex;flex-direction:column;gap:12px;}
.sx-foot-brand p{margin:0;max-width:30ch;font-size:13px;line-height:1.5;color:var(--ft-soft);}
.sx-foot-h{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--ft-ink);}
.sx-foot-col{display:flex;flex-direction:column;gap:2px;}
.sx-foot-col a,.sx-foot-brand a{display:inline-flex;align-items:center;min-height:32px;color:var(--ft-soft);text-decoration:none;}
.sx-foot-col a:hover,.sx-foot-brand a:hover{color:var(--ft-ink);text-decoration:underline;text-underline-offset:3px;}
.sx-foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;padding:18px 0 26px;border-top:1px solid var(--ft-rule);font-size:13px;color:var(--ft-soft);}
.sx-foot-base a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--ft-rule);color:var(--ft-ink);}
.sx-foot-base a:hover{background:rgba(255,255,255,.08);}
.sx-foot-base svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;}
@media (max-width:760px){ .sx-foot-grid{grid-template-columns:1fr 1fr;} .sx-foot-brand{grid-column:1/-1;} footer.sx-footer{padding:28px 10px 10px;} footer.sx-footer > .sx-wrap{padding:0 22px;} }

/* ======================================================================
   PAGE COMPONENTS (feature pages, households, help)
   ====================================================================== */
.pg{font-family:var(--y-font);color:var(--sx-ink);background:var(--sx-page);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.pg *{box-sizing:border-box;}
.pg h1,.pg h2,.pg h3{font-family:var(--y-font);font-weight:600;margin:0;letter-spacing:-.02em;line-height:1.12;color:var(--sx-ink);}
.pg main a{color:var(--sx-brand);text-underline-offset:3px;}
.pg main a:hover{color:var(--sx-ink);}
.pg :focus-visible{outline:2px solid var(--sx-brand);outline-offset:3px;border-radius:4px;}
.pg-wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

.pg-hero{padding:64px 0 56px;}
.pg-hero .pg-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;}
.pg-hero-solo .pg-wrap{grid-template-columns:minmax(0,820px);}
.pg-sec,.pg-related{scroll-margin-top:84px;}
.pg-crumb{margin:0 0 18px;font-size:14px;color:var(--sx-faint);}
.pg main .pg-crumb a{color:var(--sx-faint);text-decoration:none;}
.pg main .pg-crumb a:hover{color:var(--sx-ink);text-decoration:underline;}
.pg-hero h1{font-size:clamp(34px,4.6vw,54px);}
.pg-lede{margin:20px 0 0;font-size:18px;line-height:1.55;color:var(--sx-soft);max-width:54ch;}
.pg-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}
.pg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 24px;border-radius:999px;border:1px solid transparent;font:600 14px/1 var(--y-font);text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s;}
.pg a.pg-btn-primary{background:var(--sx-ink);color:var(--sx-page);}
.pg a.pg-btn-primary:hover{background:var(--sx-brand-fill);color:#fff;}
.pg a.pg-btn-quiet{background:transparent;color:var(--sx-ink);border-color:var(--sx-rule2);}
.pg a.pg-btn-quiet:hover{border-color:var(--sx-ink);}

.pg-shot{margin:0;}
.pg-shot-frame{background:var(--sx-tint);border-radius:18px;padding:22px;}
.pg-shot img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--sx-rule);box-shadow:var(--sx-shot);background:#fff;}
.pg-shot figcaption{margin:12px 2px 0;font-size:13px;color:var(--sx-faint);}

.pg-sec{padding:56px 0;border-top:1px solid var(--sx-rule);}
/* Overlapping cards (Households hero): a photo behind, the app screenshot in front. */
.pg-stack{position:relative;padding-bottom:26%;}
.pg-stack-photo{display:block;width:80%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 85%;border:8px solid var(--sx-card);border-radius:22px;box-shadow:var(--sx-shadow);}
.pg-shot-frame.pg-stack-shot{position:absolute;right:0;bottom:0;width:88%;padding:8px;background:var(--sx-card);border-radius:18px;box-shadow:var(--sx-shadow);}
.pg-stack-shot img{box-shadow:none;}
.pg-sec .pg-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.pg-sec.pg-flip .pg-wrap>:first-child{order:2;}
.pg-sec.pg-solo .pg-wrap{grid-template-columns:minmax(0,760px);}
.pg-sec h2{font-size:clamp(26px,3vw,36px);}
.pg-sec p{margin:14px 0 0;color:var(--sx-soft);font-size:16px;max-width:58ch;}
.pg-ticks{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.pg-ticks li{position:relative;min-height:56px;display:flex;align-items:center;padding:12px 16px 12px 64px;color:var(--sx-ink);font-size:15px;line-height:1.45;background:var(--sx-card);border:1px solid var(--sx-rule);border-radius:16px;}
.pg-ticks li::before{content:"";position:absolute;left:12px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:10px;background-color:var(--sx-brand-fill);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:18px 18px;background-position:center;background-repeat:no-repeat;}
.pg-fact{margin-top:18px;padding:14px 16px;border-left:3px solid var(--sx-brand);background:var(--sx-surface);border-radius:0 10px 10px 0;font-size:14px;color:var(--sx-soft);}

.pg-limits{background:var(--sx-surface);}
.pg-limits h2{font-size:clamp(24px,2.6vw,32px);}
.pg-limits ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px;}
.pg-limits li{position:relative;padding-left:26px;color:var(--sx-ink);font-size:15px;}
.pg-limits li::before{content:"–";position:absolute;left:6px;color:var(--sx-faint);font-weight:700;}

.pg-related{padding:56px 0;border-top:1px solid var(--sx-rule);}
.pg-related h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:22px;}
.pg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.pg-card{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--sx-rule);border-radius:14px;background:var(--sx-card);color:var(--sx-ink);text-decoration:none;transition:border-color .2s,transform .2s;}
.pg a.pg-card{color:var(--sx-ink);}
.pg-card:hover{border-color:var(--sx-ink);transform:translateY(-2px);}
.pg-card strong{font-size:17px;letter-spacing:-.01em;}
.pg-card span{font-size:14px;color:var(--sx-soft);line-height:1.5;}

.pg-close{padding:72px 0;text-align:center;border-top:1px solid var(--sx-rule);background:var(--sx-tint);}
.pg-close h2{font-size:clamp(28px,3.4vw,42px);}
.pg-close p{margin:14px auto 0;color:var(--sx-soft);max-width:52ch;}
.pg-close .pg-cta-row{justify-content:center;}

/* Help / FAQ */
.pg-faq{display:grid;gap:10px;margin-top:20px;}
.pg-faq details{border:1px solid var(--sx-rule);border-radius:12px;background:var(--sx-card);}
.pg-faq summary{cursor:pointer;list-style:none;padding:16px 48px 16px 18px;position:relative;font-weight:600;font-size:16px;min-height:44px;}
.pg-faq summary::-webkit-details-marker{display:none;}
.pg-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;color:var(--sx-faint);}
.pg-faq details[open] summary::after{content:"–";}
.pg-faq .pg-ans{padding:0 18px 18px;color:var(--sx-soft);font-size:15px;}
.pg-faq .pg-ans p{margin:0 0 10px;max-width:70ch;}
.pg-steps{margin:18px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:14px;}
.pg-steps li{counter-increment:s;position:relative;padding-left:44px;font-size:15px;color:var(--sx-ink);}
.pg-steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--sx-tint);color:var(--sx-brand);font-weight:700;display:grid;place-items:center;font-size:14px;}
.pg-steps strong{display:block;}
.pg-steps span{color:var(--sx-soft);}
.pg-toc{display:flex;flex-wrap:wrap;gap:8px 10px;margin:22px 0 0;padding:0;list-style:none;}
.pg main .pg-toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--sx-rule2);border-radius:999px;color:var(--sx-ink);text-decoration:none;font-size:14px;font-weight:500;}
.pg main .pg-toc a:hover{border-color:var(--sx-ink);}

@media (max-width:900px){
  .pg-hero{padding:40px 0 36px;}
  .pg-hero .pg-wrap,.pg-sec .pg-wrap{grid-template-columns:1fr;gap:32px;}
  .pg-sec.pg-flip .pg-wrap>:first-child{order:0;}
  .pg-cards{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .pg-wrap{padding:0 18px;}
  .pg-lede{font-size:16px;}
  .pg-shot-frame{padding:12px;border-radius:14px;}
  .pg-sec{padding:40px 0;}
}
@media (prefers-reduced-motion: reduce){
  .sx-link,.sx-trigger,.sx-btn,.sx-caret,.pg-btn,.pg-card{transition:none;}
  .pg-card:hover{transform:none;}
}

/* ======================================================================
   ABOUT PAGE
   ====================================================================== */
.pill-label{display:inline-block;margin:0 0 16px;padding:5px 12px;border:1px solid var(--sx-rule);border-radius:999px;background:var(--sx-surface);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sx-soft);}
.ab-hero{text-align:center;padding-bottom:36px;}
.ab-hero .pg-wrap{display:block;}
.ab-hero h1{max-width:18ch;margin:0 auto;font-weight:400;letter-spacing:-.02em;line-height:1.08;font-size:clamp(38px,5.4vw,66px);}
.ab-hero .pg-lede{margin-left:auto;margin-right:auto;}
.ab-hero .pg-cta-row{justify-content:center;}
.ab-photo-sec .pg-wrap,.ab-stats-sec .pg-wrap,.ab-story-sec .pg-wrap,.ab-apart-sec .pg-wrap{max-width:1180px;margin:0 auto;padding:0 28px;display:block;}
.ab-photo{margin:0;}
.ab-photo img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:50% 70%;border-radius:28px;}
.ab-photo figcaption,.ab-story-photo figcaption{margin:8px 4px 0;font-size:12px;color:var(--sx-faint);}
.ab-stats-sec{padding:28px 0 0;}
.ab-stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--sx-card);border:1px solid var(--sx-rule);border-radius:24px;box-shadow:var(--sx-shadow);overflow:hidden;}
.ab-stat{padding:36px 28px;display:flex;flex-direction:column;gap:14px;}
.ab-stat + .ab-stat{border-left:1px solid var(--sx-rule);}
.ab-num{font-size:clamp(44px,5vw,64px);font-weight:400;letter-spacing:-.03em;line-height:1;color:var(--sx-ink);font-variant-numeric:tabular-nums;}
.ab-lab{font-size:14px;line-height:1.5;color:var(--sx-soft);max-width:26ch;}
.ab-story-sec{padding:28px 0 0;}
.ab-story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center;background:var(--sx-card);border:1px solid var(--sx-rule);border-radius:28px;padding:28px;}
.ab-story-photo{margin:0;}
.ab-story-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:62% 60%;border-radius:20px;}
.ab-story-text h2{margin:0;font-size:clamp(26px,3vw,38px);font-weight:400;letter-spacing:-.02em;line-height:1.2;}
.ab-story-text p{margin:16px 0 0;font-size:16px;line-height:1.65;color:var(--sx-soft);max-width:56ch;}
.ab-story-text .ab-sign{color:var(--sx-ink);font-weight:600;}
.ab-apart-sec{padding:56px 0 64px;}
.ab-apart{background:var(--sx-card);border:1px solid var(--sx-rule);border-radius:32px;padding:56px 40px 48px;}
.ab-apart-head{text-align:center;max-width:56ch;margin:0 auto 40px;}
.ab-apart-head h2{margin:0;font-size:clamp(30px,3.6vw,46px);font-weight:400;letter-spacing:-.02em;}
.ab-apart-head p{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--sx-soft);}
.ab-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.ab-card{grid-column:span 2;display:flex;flex-direction:column;gap:12px;min-height:200px;padding:22px;background:var(--sx-page);border:1px solid var(--sx-rule);border-radius:22px;color:var(--sx-ink);text-decoration:none;transition:border-color .15s,transform .15s;}
.ab-card:nth-child(n+4){grid-column:span 3;}
.ab-card:hover{border-color:var(--sx-ink);transform:translateY(-2px);}
.pg a.ab-card{color:var(--sx-ink);}
.ab-card h3{margin:auto 0 0;font-size:18px;letter-spacing:-.01em;}
.ab-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--sx-soft);}
.ab-tile{width:44px;height:44px;border-radius:12px;background:var(--sx-brand-fill);display:grid;place-items:center;flex:none;}
.ab-tile svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:900px){
  .ab-stats{grid-template-columns:1fr 1fr;}
  .ab-stat:nth-child(3){border-left:0;}
  .ab-stat:nth-child(n+3){border-top:1px solid var(--sx-rule);}
  .ab-story{grid-template-columns:1fr;gap:24px;padding:20px;}
  .ab-story-photo img{aspect-ratio:3/2;}
  .ab-apart{padding:36px 20px 28px;border-radius:24px;}
  .ab-bento{grid-template-columns:1fr 1fr;}
  .ab-card,.ab-card:nth-child(n+4){grid-column:span 1;}
  .ab-card:last-child{grid-column:span 2;}
}
@media (max-width:600px){
  .ab-photo-sec .pg-wrap,.ab-stats-sec .pg-wrap,.ab-story-sec .pg-wrap,.ab-apart-sec .pg-wrap{padding:0 18px;}
  .ab-photo img{aspect-ratio:4/3;border-radius:22px;}
  .ab-stat{padding:24px 18px;}
  .ab-bento{grid-template-columns:1fr;}
  .ab-card,.ab-card:nth-child(n+4),.ab-card:last-child{grid-column:span 1;}
  .ab-card{min-height:0;}
}

/* ======================================================================
   GIVING PAGE: example card (example figures only)
   ====================================================================== */
.gx-card{margin:0;padding:22px 24px 18px;background:var(--sx-card);border:1px solid var(--sx-rule);border-radius:26px;box-shadow:var(--sx-shadow);}
.gx-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.gx-title{font-size:18px;font-weight:600;letter-spacing:-.01em;}
.gx-badge{padding:4px 10px;border-radius:8px;background:var(--y-brand-dark);color:#fff;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.gx-list{list-style:none;margin:0;padding:0;}
.gx-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid var(--sx-rule);}
.gx-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.gx-main b{font-weight:600;font-size:15px;}
.gx-amt{font-size:22px;letter-spacing:-.02em;}
.gx-tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap;}
.gx-tag svg{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--sx-brand-fill);fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.gx-ok .gx-tag{color:var(--sx-brand);}
.gx-need .gx-tag{color:var(--sx-faint);}
.gx-est{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0 6px;border-top:2px solid var(--sx-rule2);font-size:14px;color:var(--sx-soft);}
.gx-est b{font-size:24px;font-weight:500;letter-spacing:-.02em;color:var(--sx-ink);}
.gx-card figcaption{margin:10px 0 0;font-size:12px;color:var(--sx-faint);}

/* ======================================================================
   CONTACT PAGE
   ====================================================================== */
.ct-sec{padding:56px 0 80px;}
.ct-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start;}
.ct-photo{margin:0;padding:8px;border-radius:26px;background:var(--sx-card);box-shadow:var(--sx-shadow),0 0 0 1px var(--sx-rule);}
.ct-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:19px;}
.ct-photo figcaption{padding:8px 6px 2px;font-size:12px;color:var(--sx-faint);}
.ct-body h1{font-size:clamp(34px,4.4vw,52px);font-weight:400;}
.ct-lede{margin:16px 0 28px;color:var(--sx-soft);font-size:16px;max-width:52ch;}
.ct-form{display:grid;gap:20px;}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.ct-field label{display:block;margin:0 0 8px;font-size:14px;font-weight:500;color:var(--sx-ink);}
.ct-req{font-weight:400;color:var(--sx-faint);font-size:12px;}
.ct-input{display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--sx-rule2);border-radius:12px;background:var(--sx-surface);}
.ct-input svg{width:18px;height:18px;flex:none;stroke:var(--sx-ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ct-input input,.ct-field textarea{width:100%;border:0;background:transparent;color:var(--sx-ink);font:400 15px/1.4 var(--y-font);padding:13px 0;}
.ct-field textarea{border:1px solid var(--sx-rule2);border-radius:12px;background:var(--sx-surface);padding:13px 14px;resize:vertical;min-height:140px;}
.ct-input input:focus,.ct-field textarea:focus{outline:none;}
.ct-input:focus-within,.ct-field textarea:focus{border-color:var(--sx-brand);box-shadow:0 0 0 3px var(--sx-tint);}
.ct-input input::placeholder,.ct-field textarea::placeholder{color:var(--sx-faint);}
.ct-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.ct-actions .pg-btn[disabled]{opacity:.5;cursor:not-allowed;}
.ct-social{display:flex;gap:12px;}
.ct-tile{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--sx-card);color:var(--sx-ink);box-shadow:0 8px 18px -10px rgba(15,22,38,.35),0 0 0 1px var(--sx-rule);}
.ct-tile svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ct-note,.ct-status{margin:0;font-size:13px;color:var(--sx-faint);}
.ct-status{color:var(--sx-soft);font-size:14px;}
.ct-help{margin:22px 0 0;font-size:14px;}
@media (max-width:860px){.ct-grid{grid-template-columns:1fr;gap:32px;}.ct-photo{max-width:420px;}.ct-row{grid-template-columns:1fr;}.ct-sec{padding:36px 0 56px;}}

/* FAQ: one rounded card per question, with a square +/- button (Startly-style) */
.pg-faq{gap:14px;margin-top:28px;}
.pg-faq details{border-radius:20px;box-shadow:0 1px 2px rgba(15,22,38,.05);transition:box-shadow .2s;}
.pg-faq details[open]{box-shadow:var(--sx-shadow);}
.pg-faq summary{padding:22px 76px 22px 26px;font-weight:500;font-size:clamp(16px,1.6vw,19px);min-height:64px;display:flex;align-items:center;}
.pg-faq summary::after{content:"+";right:20px;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--sx-rule2);background:var(--sx-card);color:var(--sx-ink);font-size:22px;line-height:1;box-shadow:0 6px 14px -8px rgba(15,22,38,.35);}
.pg-faq details[open] summary::after{content:"\2212";}
.pg-faq .pg-ans{padding:0 26px 24px;font-size:15.5px;}
#faq .pg-wrap > div > h2{text-align:center;font-size:clamp(30px,4vw,46px);font-weight:400;}
#faq .pg-wrap > div > h2::after{content:"";display:block;width:38px;height:2px;margin:22px auto 0;background:var(--sx-rule2);}

/* ======================================================================
   FOR ENTERPRISE (Kitab) — same building blocks as the Home page
   ====================================================================== */
.fe-hero{padding:64px 0 120px;}
.fe-hero-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center;gap:64px;}
.fe-copy h1{font-size:clamp(40px,5.4vw,70px);font-weight:400;line-height:1.04;letter-spacing:-.03em;max-width:12ch;margin-top:2px;}
.fe-sub{font-size:17px;color:var(--sx-soft);margin:20px 0 28px;max-width:44ch;line-height:1.6;}
.fe-tags{margin-top:48px;}
.fe-tags p{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sx-faint);}
.fe-tags ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;}
.fe-tags li{padding:7px 14px;border:1px solid var(--sx-rule2);border-radius:999px;font-weight:600;font-size:14px;color:var(--sx-soft);}
.fe-visual{position:relative;margin:0;}
.fe-stage{position:relative;}
.fe-photo{border-radius:30px;overflow:hidden;aspect-ratio:1.9/1;background:var(--sx-surface);}
.fe-photo img{display:block;width:100%;height:100%;object-fit:cover;}
.fe-fcard{position:absolute;background:var(--sx-card);color:var(--sx-ink);box-shadow:0 18px 44px -14px rgba(20,32,26,.28),0 0 0 1px var(--sx-rule);}
.fe-fhead{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:600;}
.fe-badge{padding:4px 10px;border-radius:8px;background:#0F2A1E;color:#fff;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;}
.fe-fcard-a{left:-34px;top:-40px;width:260px;padding:16px 18px;border-radius:24px;}
.fe-checks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;}
.fe-checks li{display:flex;align-items:center;gap:8px;font-size:13px;}
.fe-checks svg{width:16px;height:16px;flex:none;stroke:var(--sx-brand);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.fe-checks b{margin-left:auto;font-weight:600;color:var(--sx-brand);}
.fe-fcard-b{right:-26px;bottom:-56px;width:min(330px,60%);padding:22px 24px;border-radius:30px;}
.fe-chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.fe-chips li{padding:6px 12px;border-radius:999px;background:var(--sx-tint);color:var(--sx-brand);font-size:13px;font-weight:600;}
.fe-visual figcaption{margin:70px 4px 0;font-size:12px;color:var(--sx-faint);max-width:52ch;}
.fe-facts{background:#0F2A1E;color:#fff;padding:22px 0;}
:root[data-theme="dark"] .fe-facts{background:#143324;}
.fe-facts .pg-wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px;}
.fe-facts p{margin:0;font-size:15px;font-weight:500;color:#fff;}
.fe-flow{padding:92px 0;}
.fe-flow-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center;}
.fe-flow-photo{margin:0;}
.fe-flow-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:28px;}
.fe-flow-photo figcaption,.fe-band figcaption{margin-top:8px;font-size:12px;color:var(--sx-faint);}
.fe-flow h2,.fe-head h2{font-size:clamp(28px,3.4vw,42px);font-weight:400;}
.fe-steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:22px;}
.fe-steps li{display:flex;gap:16px;align-items:flex-start;}
.fe-n{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--sx-tint);color:var(--sx-brand);font-weight:700;font-size:15px;}
.fe-steps h3{margin:2px 0 4px;font-size:17px;font-weight:600;}
.fe-steps p{margin:0;color:var(--sx-soft);font-size:15px;}
.fe-inside{padding:84px 0;background:var(--sx-surface);}
.fe-inside.fe-alt{background:var(--sx-page);}
.fe-head{max-width:640px;margin:0 auto 44px;text-align:center;}
.fe-head .pill-label{margin-bottom:20px;}
.fe-rule{display:block;width:38px;height:2px;margin:22px auto;background:var(--sx-rule2);}
.fe-head p:last-child{margin:0;color:var(--sx-soft);font-size:17px;}
.fe-grid{list-style:none;margin:0 auto;padding:0;max-width:1040px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px;}
.fe-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;}
.fe-grid li{display:flex;gap:16px;align-items:flex-start;}
.fe-ico{flex:none;width:64px;height:64px;display:grid;place-items:center;border-radius:14px;background:var(--sx-card);color:var(--sx-brand);box-shadow:0 10px 24px -12px rgba(15,22,38,.35),0 0 0 1px var(--sx-rule);}
.fe-ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.fe-grid h3{margin:2px 0 4px;font-size:16px;font-weight:600;}
.fe-grid p{margin:0;color:var(--sx-soft);font-size:15px;line-height:1.5;}
.fe-zk{padding:20px 0 84px;}
.fe-zk-card{max-width:820px;margin:0 auto;padding:34px 36px;border-radius:24px;background:var(--sx-card);box-shadow:var(--sx-shadow),0 0 0 1px var(--sx-rule);}
.fe-zk-card h2{font-size:clamp(22px,2.4vw,28px);font-weight:500;}
.fe-zk-card p{margin:14px 0 0;color:var(--sx-soft);max-width:62ch;}
.fe-band{margin:0;}
.fe-band img{display:block;width:100%;height:clamp(240px,34vw,460px);object-fit:cover;}
.fe-band figcaption{padding-top:8px;padding-bottom:8px;}
.fe-close{padding:80px 16px;}
.fe-close-band{max-width:1120px;margin:0 auto;padding:64px 28px 44px;border-radius:28px;background:#0F2A1E;color:#fff;text-align:center;}
:root[data-theme="dark"] .fe-close-band{background:#143324;}
.fe-close-band h2{font-size:clamp(30px,4vw,48px);font-weight:400;color:#fff;}
.fe-close-band p{color:rgba(255,255,255,.78);font-size:16px;margin:16px auto 30px;max-width:50ch;}
.fe-close-band .pg-cta-row{justify-content:center;}
.fe-close-btn{background:#fff;color:#0F2A1E;border-color:#fff;}
.fe-close .fe-close-ghost,.fe-close-band .fe-close-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.fe-close-band a.pg-btn:hover{opacity:.9;}
.fe-by{margin:34px auto 0;font-size:13px;color:rgba(255,255,255,.65);}
@media (max-width:860px){
  .fe-hero{padding:40px 0 90px;}
  .fe-hero-grid,.fe-flow-grid{grid-template-columns:1fr;gap:40px;}
  .fe-photo{aspect-ratio:3/4;border-radius:28px;}
  .fe-fcard-a{left:14px;top:-26px;width:220px;}
  .fe-fcard-b{right:14px;bottom:-44px;width:min(270px,70%);padding:18px 20px;border-radius:26px;}
  .fe-visual figcaption{margin-top:62px;}
  .fe-facts .pg-wrap{grid-template-columns:1fr;}
  .fe-flow,.fe-inside{padding:56px 0;}
  .fe-grid,.fe-grid-2{grid-template-columns:1fr;gap:24px;}
  .fe-close{padding:48px 12px;}
}

/* For Enterprise: audience cards, Quebec/Canada terms table, questions */
.fe-aud{padding:84px 0 24px;}
.fe-aud-grid{list-style:none;margin:0 auto;padding:0;max-width:1040px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.fe-aud-grid li{padding:24px 22px 26px;background:var(--sx-card);border:1px solid var(--sx-rule);border-radius:20px;}
.fe-aud-grid h3{margin:0 0 8px;font-size:17px;font-weight:600;}
.fe-aud-grid p{margin:0;color:var(--sx-soft);font-size:15px;line-height:1.5;}
.fe-terms{padding:84px 0;background:var(--sx-surface);}
.fe-terms-wrap{max-width:860px;margin:0 auto;border:1px solid var(--sx-rule);border-radius:20px;overflow:hidden;background:var(--sx-card);}
.fe-terms-table{width:100%;border-collapse:collapse;font-size:15px;}
.fe-terms-table thead th{padding:14px 18px;text-align:left;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sx-faint);background:var(--sx-tint);border-bottom:1px solid var(--sx-rule);}
.fe-terms-table tbody th,.fe-terms-table tbody td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--sx-rule);vertical-align:top;}
.fe-terms-table tbody tr:last-child th,.fe-terms-table tbody tr:last-child td{border-bottom:0;}
.fe-terms-table tbody th{font-weight:700;color:var(--sx-ink);}
.fe-terms-table td:nth-child(2){font-weight:600;color:var(--sx-brand);}
.fe-terms-table td:last-child{color:var(--sx-soft);}
.fe-faq{padding:84px 0 40px;}
.fe-faq .pg-faq{max-width:820px;margin:0 auto;}
@media (max-width:1000px){.fe-aud-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:860px){.fe-aud,.fe-terms,.fe-faq{padding:56px 0 28px;}}
@media (max-width:560px){
  .fe-aud-grid{grid-template-columns:1fr;}
  .fe-terms-table thead th,.fe-terms-table tbody th,.fe-terms-table tbody td{padding:12px 10px;font-size:14px;}
}

/* Readable line length: roughly 60-80 characters (about 60ch). Answers, steps and notes were running 90-110 characters wide. */
p.faq-a,.pg-faq .pg-ans,.pg-steps li,.compare-note,.context-note{max-width:60ch;}
.context-note{margin-left:auto;margin-right:auto;}

/* Full-width photo hero (Households, For Enterprise), desktop only: the photo runs behind the frosted header and the headline, like Home.
   The scrim uses the page colour, so it fades to cream in Light and to the dark navy in Dark. Phones keep the card layout. */
@media (min-width:861px){
  body.hero-full .pg-hero,body.hero-full .fe-hero{position:relative;min-height:min(760px,100vh);background:var(--sx-page) var(--hero-img) var(--hero-pos,50% 50%)/cover no-repeat;}
  body.hero-full .pg-hero::before,body.hero-full .fe-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--sx-page) 94%,transparent) 0%,color-mix(in srgb,var(--sx-page) 86%,transparent) 36%,color-mix(in srgb,var(--sx-page) 0%,transparent) 68%),linear-gradient(180deg,color-mix(in srgb,var(--sx-page) 55%,transparent) 0,transparent 160px);}
  body.hero-full .pg-hero .pg-wrap,body.hero-full .fe-hero-grid{position:relative;}
  body.hero-full .pg-hero{padding:170px 0 90px;}
  body.hero-full .fe-hero{padding:170px 0 120px;}
  /* the <img>s stay in the page for their descriptions; the photo itself is the section background */
  body.hero-full .pg-stack-photo,body.hero-full .fe-photo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);border:0;box-shadow:none;}
  body.hero-full .pg-stack{padding-bottom:0;}
  body.hero-full .pg-shot-frame.pg-stack-shot{position:relative;width:100%;box-shadow:0 18px 44px -14px rgba(20,32,26,.28);}
  body.hero-full .fe-fcard-b{right:0;top:0;bottom:auto;}
  body.hero-full .fe-fcard-a{left:auto;right:90px;top:150px;}
  body.hero-full .fe-visual{min-height:440px;}
  body.hero-full .fe-visual figcaption{position:absolute;right:0;bottom:0;margin:0;}
  body.hero-full .fe-visual figcaption span,body.hero-full .pg-stack-fig figcaption span{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--sx-card);color:var(--sx-soft);}
}

/* Photo-hero pages (Home, Households, For Enterprise), desktop: the header sits over the photo and fades out from fully solid at its top edge to
   fully transparent at its bottom edge; the blur under it fades the same way. The preview note floats as a small pill instead of a full-width strip. */
@media (min-width:861px){
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) and (background:color-mix(in srgb,red 50%,transparent)){
    body.hero-full .sx-header,body.home-fade .sx-header{margin-bottom:-68px;background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;}
    /* one smooth ramp: fully solid behind the nav row, then fading to nothing over the 44px below it (the blur fades the same way) */
    body.hero-full .sx-header::before,body.home-fade .sx-header::before{content:'';position:absolute;left:0;right:0;top:0;bottom:-44px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,var(--sx-page) 0%,var(--sx-page) 52%,color-mix(in srgb,var(--sx-page) 0%,transparent) 100%);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%);}
    body.hero-full .sx-header::after,body.home-fade .sx-header::after{display:none;}
    body.hero-full .sx-note,body.home-fade .sx-note{position:absolute;top:78px;left:50%;transform:translateX(-50%);z-index:5;width:max-content;max-width:calc(100% - 32px);border:0;border-radius:999px;padding:6px 16px;background:color-mix(in srgb,var(--sx-page) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
  }
}
