/**
 * WNF shared page chrome - match thank-you / brief visual system.
 * Pages in a subfolder: <link href="../assets/wnf-shell.css" rel="stylesheet">
 */
:root{
  --y:#FDD419;
  --r:#F92357;
  --k:#000;
  --w:#fff;
  --font:Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pad:16px;
  --rad16:16px;
  --k-rgb:0,0,0;
  --w-rgb:255,255,255;
  /* 8px rhythm — spacing only */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;
}
body.theme-dark{
  --k:#fff;
  --w:#000;
  --k-rgb:255,255,255;
  --w-rgb:0,0,0;
  background:#000;
}
@media (max-width:340px){ :root{ --pad:12px; } }

*{ box-sizing:border-box; }
html{
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html::-webkit-scrollbar{
  width:0;
  height:0;
}
html, body{
  width:100%;
  min-height:100%;
  margin:0;
  padding:0;
  background:var(--y);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  color:var(--k);
}
body{
  overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
body::-webkit-scrollbar{
  width:0;
  height:0;
}
a{ color:inherit; text-decoration:none; }

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(var(--k-rgb),0.08) 1px, transparent 1.2px),
    radial-gradient(circle at 9px 13px, rgba(var(--k-rgb),0.06) 1px, transparent 1.2px);
  background-size:18px 18px, 28px 28px;
  background-position:0 0, 6px 10px;
  background-repeat:repeat;
  z-index:0;
}
body.bg-on::before{ opacity:0; }

#bgCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}
body.theme-dark #bgCanvas{ filter:invert(1); }
body.theme-dark .logoImg{ filter:invert(1); }

.themeToggle{
  position:fixed;
  top:calc(var(--pad) + env(safe-area-inset-top, 0px));
  right:calc(var(--pad) + 18px);
  z-index:200;
  min-width:44px;
  width:56px;
  height:32px;
  border:2px solid var(--k);
  border-radius:999px;
  background:rgb(var(--w-rgb));
  padding:2px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform 180ms ease-out, width 180ms ease-out, height 180ms ease-out;
  font-family:var(--font);
}
.themeKnob{
  width:24px;
  height:24px;
  border-radius:999px;
  background:var(--k);
  transform:translateX(0);
  transition:transform 180ms ease-out, width 180ms ease-out, height 180ms ease-out;
}
body.theme-dark .themeKnob{ transform:translateX(24px); }
@media (max-width:420px){
  .themeToggle{ width:44px; height:28px; }
  .themeKnob{ width:20px; height:20px; }
  body.theme-dark .themeKnob{ transform:translateX(16px); }
}

.homeBtn,.tgBtn,.servicesBtn,.casesBtn,.blogBtn,.pricingBtn{
  position:fixed;
  z-index:560;
  width:48px;
  height:48px;
  box-sizing:border-box;
  border-radius:14px;
  border:1px solid rgba(var(--k-rgb),0.14);
  background:rgba(var(--w-rgb),0.38);
  box-shadow:
    0 3px 14px rgba(var(--k-rgb),0.08),
    inset 0 1px 0 rgba(var(--w-rgb),0.75);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  color:rgba(var(--k-rgb),1);
  text-decoration:none;
  left:auto;
  right:calc(var(--pad) + 18px);
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .16s ease-out;
  font-family:var(--font);
}
body.theme-dark .homeBtn,
body.theme-dark .tgBtn,
body.theme-dark .servicesBtn,
body.theme-dark .casesBtn,
body.theme-dark .blogBtn,
body.theme-dark .pricingBtn{
  background:rgba(var(--w-rgb),0.14);
  border-color:rgba(var(--k-rgb),0.14);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(var(--k-rgb),0.1);
}
.homeBtn::after,.tgBtn::after,.servicesBtn::after,.casesBtn::after,.blogBtn::after,.pricingBtn::after{
  content:attr(title);
  position:absolute;
  right:100%;
  margin-right:14px;
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  background:var(--k);
  color:var(--w);
  padding:8px 14px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.02em;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease-out;
  box-shadow:0 8px 24px rgba(var(--k-rgb),0.22);
}
.homeBtn::after{
  left:100%;
  right:auto;
  margin-left:14px;
  margin-right:0;
}
@media (hover:hover){
  .homeBtn:hover::after,.tgBtn:hover::after,.servicesBtn:hover::after,.casesBtn:hover::after,.blogBtn:hover::after,.pricingBtn:hover::after{ opacity:1; }
}
body.theme-dark .homeBtn::after,body.theme-dark .tgBtn::after,body.theme-dark .servicesBtn::after,body.theme-dark .casesBtn::after,body.theme-dark .blogBtn::after,body.theme-dark .pricingBtn::after{
  background:var(--w);
  color:var(--k);
  box-shadow:0 8px 28px rgba(0,0,0,0.45);
}
@media (hover:hover){
  .homeBtn:hover,.tgBtn:not(.tgFly):hover,.servicesBtn:hover,.casesBtn:hover,.blogBtn:hover,.pricingBtn:hover{
    background:rgba(var(--w-rgb),0.72);
    border-color:rgba(var(--k-rgb),0.22);
    box-shadow:
      0 5px 18px rgba(var(--k-rgb),0.12),
      inset 0 1px 0 rgba(var(--w-rgb),0.92);
  }
}
body.theme-dark .homeBtn:hover,
body.theme-dark .tgBtn:not(.tgFly):hover,
body.theme-dark .servicesBtn:hover,
body.theme-dark .casesBtn:hover,
body.theme-dark .blogBtn:hover,
body.theme-dark .pricingBtn:hover{
  background:rgba(var(--w-rgb),0.22);
  border-color:rgba(var(--k-rgb),0.22);
  box-shadow:
    0 6px 22px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(var(--k-rgb),0.12);
}
.homeBtn svg,.tgBtn svg,.servicesBtn svg,.casesBtn svg,.blogBtn svg,.pricingBtn svg{
  width:24px;
  height:24px;
  display:block;
  transform:translate3d(0,0,0);
  transition:opacity .16s ease-out, transform .16s ease-out;
}
.navLetter{
  display:block;
  font-size:20px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:0.04em;
  font-family:var(--font);
  transition:opacity .16s ease-out, transform .16s ease-out;
}
.homeBtn{
  top:calc(var(--pad) + env(safe-area-inset-top, 0px) + 36px);
  left:calc(var(--pad) + 18px);
  right:auto;
}
.servicesBtn{ top:calc(var(--pad) + env(safe-area-inset-top, 0px) + 90px); }
.casesBtn{ top:calc(var(--pad) + env(safe-area-inset-top, 0px) + 144px); }
.blogBtn{ top:calc(var(--pad) + env(safe-area-inset-top, 0px) + 198px); }
.pricingBtn{ top:calc(var(--pad) + env(safe-area-inset-top, 0px) + 252px); }
.tgBtn{ top:calc(var(--pad) + env(safe-area-inset-top, 0px) + 306px); }
@media (max-width:979px){
  .homeBtn{ left:auto; right:calc(var(--pad) + 18px); }
  .homeBtn::after{ left:auto; right:100%; margin-left:0; margin-right:14px; }
}
.homeBtn svg{ transform:translateY(-10%); }
@media (hover:hover){
  .homeBtn:hover svg{ transform:translateY(-10%) scale(1.2); opacity:.92; }
  .tgBtn:not(.tgFly):hover svg{ transform:translate3d(-8px,8px,0) scale(1.07); opacity:.92; }
  .servicesBtn:hover .navLetter,.casesBtn:hover .navLetter,.blogBtn:hover .navLetter,.pricingBtn:hover .navLetter{ transform:scale(1.08); opacity:.92; }
}
.homeBtn:active,.tgBtn:not(.tgFly):active,.servicesBtn:active,.casesBtn:active,.blogBtn:active,.pricingBtn:active{ transform:scale(0.96); }
.homeBtn:active svg{ transform:translateY(-10%) scale(.95); opacity:.92; }
.tgBtn:not(.tgFly):active svg{ transform:translate3d(-12px,12px,0) scale(1); opacity:.78; }
.homeBtn:focus-visible,.tgBtn:focus-visible,.servicesBtn:focus-visible,.casesBtn:focus-visible,.blogBtn:focus-visible,.pricingBtn:focus-visible{
  outline:2px solid var(--r);
  outline-offset:3px;
}

/* Scrollable content column (scorecard, library, about, …) — footer in flow like blog, not fixed over content */
.app--page{
  position:relative;
  z-index:1;
  min-height:100vh;
  width:100%;
  max-width:560px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  padding:
    calc(100px + env(safe-area-inset-top, 0px))
    var(--pad)
    calc(24px + env(safe-area-inset-bottom, 0px));
}
.app--page--wide{ max-width:720px; }

.app--page > .footerLink{
  position:static;
  left:auto;
  right:auto;
  bottom:auto;
  z-index:1;
  flex-shrink:0;
  margin-top:auto;
  padding-top:24px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  width:100%;
  box-sizing:border-box;
}

/* Footer internal-link hub — crawlable cross-links so no content page is an SEO orphan */
.app--page > .wnf-foot-nav{
  margin-top:auto;
  padding-top:28px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 16px;
  width:100%;
  box-sizing:border-box;
}
.app--page > .wnf-foot-nav + .footerLink{
  margin-top:12px;
  padding-top:14px;
}
.wnf-foot-nav a{
  font-family:var(--font);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.02em;
  color:rgba(var(--k-rgb),0.55);
  text-decoration:none;
  transition:color 0.16s ease, transform 0.16s ease;
}
body.theme-dark .wnf-foot-nav a{ color:rgba(255,255,255,0.55); }
@media (hover:hover){
  .wnf-foot-nav a:hover{ color:var(--r); transform:translateY(-1px); }
}
.wnf-foot-nav a:focus-visible{ outline:2px solid var(--r); outline-offset:3px; border-radius:4px; }

/* Panel = dialogueWindow-style card */
.wnf-panel{
  background:var(--w);
  border-radius:var(--rad16);
  box-shadow:0 12px 32px rgba(var(--k-rgb),0.14);
  border:2px solid transparent;
  padding:var(--s-5) calc(var(--s-4) + var(--s-1));
  margin-bottom:var(--s-3);
}
body.theme-dark .wnf-panel{
  background:#0b0b0b;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 12px 32px rgba(0,0,0,0.62);
}

.wnf-h1{
  font-size:clamp(26px, 6vw, 34px);
  font-weight:800;
  margin:0 0 var(--s-3);
  line-height:1.18;
  letter-spacing:-0.02em;
  color:var(--k);
}
.wnf-lead{
  font-weight:600;
  font-size:15px;
  line-height:1.55;
  margin:0 0 var(--s-4);
  opacity:0.9;
  color:var(--k);
}

.wnf-chiprow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:16px;
  font-weight:700;
  font-size:13px;
}
.wnf-chip{
  border:2px solid var(--k);
  border-radius:999px;
  padding:6px 12px;
  background:rgba(var(--w-rgb),0.55);
}
body.theme-dark .wnf-chip{ background:rgba(255,255,255,0.08); }

.wnf-callout{
  font-weight:700;
  font-size:13px;
  margin:0 0 20px;
  padding:12px 14px;
  border:2px solid var(--k);
  border-radius:var(--rad16);
  background:rgba(var(--k-rgb),0.06);
}
body.theme-dark .wnf-callout{ background:rgba(255,255,255,0.06); }

.wnf-grid{ display:grid; gap:var(--s-3); }

.wnf-card{
  border:2px solid var(--k);
  border-radius:var(--rad16);
  padding:16px;
  background:rgba(var(--w-rgb),0.92);
  box-shadow:0 8px 24px rgba(var(--k-rgb),0.08);
}
body.theme-dark .wnf-card{ background:#141414; }
.wnf-card--pop{
  border-color:var(--r);
  box-shadow:0 12px 32px rgba(249,35,87,0.12);
}
.wnf-card h2{
  margin:0 0 var(--s-2);
  font-size:17px;
  font-weight:800;
  line-height:1.22;
}
.wnf-price{
  font-weight:800;
  font-size:19px;
  color:var(--r);
  margin-bottom:8px;
}
.wnf-card p{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.5;
  opacity:0.92;
}
.wnf-card ul{
  margin:0;
  padding-left:18px;
  font-size:13px;
  line-height:1.55;
}
.wnf-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.wnf-badge{
  font-size:9px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:8px;
  border:2px solid var(--k);
}

.wnf-ctaRow{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-3);
  margin-top:var(--s-5);
}
.wnf-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:var(--rad16);
  font-weight:800;
  font-size:14px;
  border:2px solid var(--k);
  background:var(--r);
  color:#fff;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, box-shadow .15s ease;
}
.wnf-cta:focus-visible{
  outline:3px solid var(--r);
  outline-offset:3px;
}
.wnf-cta:active{ transform:translateY(1px); }
@media (hover:hover){ .wnf-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(var(--k-rgb),0.15); } }
.wnf-cta--ghost{
  background:rgb(var(--w-rgb));
  color:var(--k);
}
body.theme-dark .wnf-cta--ghost{ background:#1a1a1a; color:#fff; }

.wnf-link{
  color:var(--r);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
}
.wnf-link:focus-visible{
  outline:2px solid var(--r);
  outline-offset:3px;
  border-radius:4px;
}

.wnf-f7{
  margin-top:28px;
  padding:18px;
  border:2px dashed rgba(var(--k-rgb),0.35);
  border-radius:var(--rad16);
  background:rgba(var(--k-rgb),0.04);
}
body.theme-dark .wnf-f7{ border-color:rgba(255,255,255,0.25); background:rgba(255,255,255,0.04); }
.wnf-f7 h3{
  margin:0 0 12px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.1em;
}
.wnf-f7 .wnf-day{ font-weight:800; font-size:13px; margin-top:12px; }
.wnf-f7 p{ margin:4px 0 0; font-size:13px; line-height:1.5; opacity:0.9; }

/* Horizontal timeline strip */
.wnf-track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:12px;
  margin:16px -6px 0;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.wnf-track::-webkit-scrollbar{
  width:0;
  height:0;
}
.wnf-phase{
  flex:0 0 min(260px, 82vw);
  scroll-snap-align:start;
  border:2px solid var(--k);
  border-radius:var(--rad16);
  padding:14px;
  background:rgba(var(--w-rgb),0.92);
}
body.theme-dark .wnf-phase{ background:#141414; }
.wnf-phase .wk{
  font-weight:800;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--r);
  margin-bottom:8px;
}
.wnf-phase h2{ margin:0 0 8px; font-size:15px; font-weight:800; }
.wnf-phase p{ margin:0; font-size:13px; line-height:1.5; opacity:0.9; }

.footerLink{
  position:fixed;
  left:0;
  right:0;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  display:flex;
  justify-content:center;
  gap:10px;
  align-items:center;
  text-decoration:none;
  color:rgba(var(--k-rgb),0.70);
  font-weight:700;
  font-size:12px;
  z-index:100;
  transition:transform 120ms ease-out;
}
@media (hover:hover){ .footerLink:hover{ transform:translateY(-1px); } }
.footerLink:active{ transform:translateY(1px); }
.logoWrap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform 160ms ease-out;
  transform-origin:center;
}
@media (hover:hover){ .footerLink:hover .logoWrap{ transform:translate(4px,-2px) rotate(10deg) scale(1.18); } }
.footerLink.is-pressed .logoWrap{ transform:scale(0.88); }
@keyframes footerSpin{ to{ transform:rotate(360deg); } }
.footerLink.is-pressed .logoImg, .footerLink.is-pressed .logoFallback{ animation:footerSpin 0.4s linear infinite; }
.logoImg{ height:28px; width:auto; display:none; }
.logoFallback{
  height:28px;
  padding:0 10px;
  border:2px solid var(--k);
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:11px;
  color:var(--k);
  text-transform:uppercase;
}
.logoWrap.is-loaded .logoImg{ display:block; }
.logoWrap.is-loaded .logoFallback{ display:none; }

/* Current page: slightly stronger fill/border, same glass treatment as siblings (no extra ring) */
.homeBtn[aria-current="page"],
.servicesBtn[aria-current="page"],
.casesBtn[aria-current="page"],
.blogBtn[aria-current="page"],
.pricingBtn[aria-current="page"]{
  background:rgba(var(--k-rgb),0.1);
  border:1px solid rgba(var(--k-rgb),0.22);
  box-shadow:
    0 2px 14px rgba(var(--k-rgb),0.1),
    inset 0 1px 0 rgba(var(--w-rgb),0.75);
}
body.theme-dark .homeBtn[aria-current="page"],
body.theme-dark .servicesBtn[aria-current="page"],
body.theme-dark .casesBtn[aria-current="page"],
body.theme-dark .blogBtn[aria-current="page"],
body.theme-dark .pricingBtn[aria-current="page"]{
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(var(--k-rgb),0.2);
  box-shadow:
    0 4px 18px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(var(--k-rgb),0.1);
}

/* Touch / keyboard: show nav title pseudo-tooltip without hover */
@media (hover:none){
  .homeBtn:focus-visible::after,
  .tgBtn:focus-visible::after,
  .servicesBtn:focus-visible::after,
  .casesBtn:focus-visible::after,
  .blogBtn:focus-visible::after,
  .pricingBtn:focus-visible::after{
    opacity:1;
  }
}