/* === Homepage wireframe sections — pixel-perfect import === */
/* latin-ext */
@font-face {
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../homepage-sections/813b968a-4a1b-4fd8-a67c-5480df834890.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../homepage-sections/67d7d667-5d1e-4d70-93d0-ab7fb75a6d13.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../homepage-sections/4674fc78-909c-472f-b5a8-fb0b69907d01.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../homepage-sections/5ce1b058-6795-4fcd-9991-143964383f86.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../homepage-sections/1f2e70aa-2a53-482e-9504-0d31161e2bd0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../homepage-sections/801f0e5d-b727-4f96-9cc2-deac78a7099b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../homepage-sections/4674fc78-909c-472f-b5a8-fb0b69907d01.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../homepage-sections/5ce1b058-6795-4fcd-9991-143964383f86.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../homepage-sections/1f2e70aa-2a53-482e-9504-0d31161e2bd0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../homepage-sections/801f0e5d-b727-4f96-9cc2-deac78a7099b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../homepage-sections/4674fc78-909c-472f-b5a8-fb0b69907d01.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../homepage-sections/5ce1b058-6795-4fcd-9991-143964383f86.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../homepage-sections/1f2e70aa-2a53-482e-9504-0d31161e2bd0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../homepage-sections/801f0e5d-b727-4f96-9cc2-deac78a7099b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../homepage-sections/4674fc78-909c-472f-b5a8-fb0b69907d01.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../homepage-sections/5ce1b058-6795-4fcd-9991-143964383f86.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../homepage-sections/1f2e70aa-2a53-482e-9504-0d31161e2bd0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../homepage-sections/801f0e5d-b727-4f96-9cc2-deac78a7099b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../homepage-sections/06ebc0dc-df6c-4df4-a1d0-014256242645.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../homepage-sections/844dfc78-cf3f-4ac6-af78-858c1835b300.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../homepage-sections/efa09d73-1432-41bd-a61e-cdf8a0540376.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../homepage-sections/2acbc95c-970a-481e-87c8-b27e1ed799d1.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../homepage-sections/a63b8647-61be-412e-bc9b-6f34ad077234.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../homepage-sections/fd33413e-2d9c-4193-974a-f631c9728bb9.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../homepage-sections/65844e34-8879-47f3-a399-9b4639a67d6b.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../homepage-sections/e20cbd39-618c-4e7d-9713-fca9732dec58.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../homepage-sections/df27ca77-0167-4222-b16e-914e06e931c7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../homepage-sections/168b5826-190c-478d-94e7-70e8bcfaa387.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../homepage-sections/86e182a5-5347-4da2-9e27-4d6f9d24afff.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../homepage-sections/4766bb2f-751a-41ff-9542-03a53adb0601.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* scoped layout */

  .wfx{
    --ink: #1a1a1a;
    --ink-soft: #4a4a4a;
    --ink-faint: #888;
    --paper: #f6f3ec;
    --paper-2: #efe9dc;
    --line: #2b2b2b;
    --accent-red: #c2362e;
    --accent-blue: #2f5fb3;
    --accent-pink: #c64a8a;
    --accent-green: #4a7a3a;
    --accent-amber: #c98a2b;
    --accent-purple: #6a4a8a;
    --hand: 'Patrick Hand', 'Caveat', cursive;
    --hand-loose: 'Architects Daughter', 'Caveat', cursive;
    --hand-script: 'Caveat', cursive;
  }
  .wfx *{ box-sizing: border-box; }
  .wfx, .wfx{ margin:0; padding:0; background: var(--paper); color: var(--ink); font-family: var(--hand); }
  .wfx{
    min-height: 100vh;
    background-image:
      radial-gradient(circle at 20% 10%, rgba(0,0,0,0.025), transparent 40%),
      radial-gradient(circle at 80% 90%, rgba(0,0,0,0.03), transparent 40%);
  }
  .wfx .paper-grid{
    position: fixed; inset: 0;
    background-image:
      linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
  }

  .wfx .app{
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 32px 80px;
  }

  /* Top header strip - mimics the wireframes */
  .wfx .doc-header{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 2px solid var(--line);
    padding-bottom: 14px;
    margin-bottom: 30px;
  }
  .wfx .doc-header h1{
    font-family: var(--hand-loose);
    font-size: 30px; margin: 0; letter-spacing: 1px;
  }
  .wfx .doc-header h1 .sub{
    font-family: var(--hand-script);
    font-weight: 400; color: var(--ink-faint);
    font-size: 22px; margin-left: 10px;
  }
  .wfx .doc-header .meta{
    font-family: var(--hand); color: var(--ink-faint);
    font-size: 16px;
  }

  /* Section frame — every section is wrapped in one of these */
  .wfx .section{
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    padding: 22px 26px 26px;
    margin-bottom: 22px;
    position: relative;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.08);
  }
  .wfx .section .stripe{
    position: absolute;
    top: 14px; bottom: 14px; left: -3px;
    width: 8px;
    border-radius: 4px;
    background: var(--accent-red);
  }
  .wfx .section .tag{
    position: absolute;
    top: -12px; left: 18px;
    background: var(--paper);
    padding: 0 8px;
    font-family: var(--hand-script);
    font-size: 16px;
    color: var(--ink-faint);
  }
  .wfx .section h2{
    font-family: var(--hand-loose);
    font-size: 24px;
    margin: 0 0 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .wfx .section .lede{
    font-family: var(--hand);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-mid);
    max-width: 640px;
    margin: -6px 0 20px;
  }

  .wfx .section.hero .stripe{ background: var(--accent-red); }
  .wfx .section.steps .stripe{ background: var(--accent-green); }
  .wfx .section.tabs .stripe{ background: var(--accent-purple); }
  .wfx .section.gallery .stripe{ background: #6aa84f; }
  .wfx .section.subs .stripe{ background: #c9622b; }
  .wfx .section.heartbeat .stripe{ background: linear-gradient(180deg, #c64a8a 0%, #2f5fb3 60%, var(--accent-amber) 100%); }
  .wfx .section.poll .stripe{ background: var(--accent-pink); }
  .wfx .section.antarctica .stripe{ background: linear-gradient(180deg, #5fa8d3 0%, #b8e0ed 50%, #f0f7fa 100%); }

  /* Top bar wrap — positioning context for mega menus */
  .wfx .top-bar-wrap{
    position: sticky;
    top: 12px;
    z-index: 50;
    margin-bottom: 22px;
  }
  .wfx .top-bar-wrap .top-bar{ position: relative; top: 0; margin-bottom: 0; }

  /* === Notification + Menu bar === */
  .wfx .top-bar{
    border: 2px solid var(--line);
    border-radius: 10px;
    background: var(--paper-2);
    margin-bottom: 22px;
    overflow: hidden;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.08);
    position: sticky;
    top: 12px;
    z-index: 50;
    transition: padding 0.25s ease, box-shadow 0.25s ease;
  }
  .wfx .top-bar.is-stuck{
    box-shadow: 6px 8px 0 rgba(0,0,0,0.14);
  }
  .wfx .top-bar.is-stuck .notif-strip{ max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-bottom-color: transparent; }
  .wfx .top-bar.is-stuck .menu-bar{ padding: 8px 20px; }
  .wfx .top-bar.is-stuck .menu-bar .logo{ font-size: 20px; }
  .wfx .top-bar.is-stuck .menu-bar .icons .icon{ width: 32px; height: 32px; }
  .wfx .notif-strip{
    border-bottom: 1.5px dashed var(--ink-soft);
    padding: 8px 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    font-family: var(--hand-script);
    font-size: 16px;
    color: var(--ink-soft);
    background: rgba(0,0,0,0.02);
    max-height: 60px;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.25s ease;
  }
  .wfx .notif-strip.is-closed{ max-height: 0 !important; padding: 0 16px !important; opacity: 0; border-bottom: 0; }
  .wfx .notif-strip .marquee{
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    height: 22px;
  }
  .wfx .notif-strip .marquee .msg{
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .wfx .notif-strip .marquee .msg.active{ opacity: 1; }
  .wfx .notif-strip .dots{
    display: flex; gap: 5px; align-items: center;
    margin-left: 8px;
  }
  .wfx .notif-strip .dots .dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink-faint); cursor: pointer;
    transition: background 0.2s ease;
  }
  .wfx .notif-strip .dots .dot.active{ background: var(--accent-amber); }
  .wfx .notif-strip .marker{
    font-family: var(--hand-loose);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-faint);
    cursor: pointer;
    user-select: none;
  }
  .wfx .notif-strip .close-x{
    background: none; border: none; padding: 2px 8px;
    font-size: 14px; color: var(--ink-faint); cursor: pointer;
    font-family: var(--hand-loose);
  }
  .wfx .notif-strip .close-x:hover{ color: var(--ink); }
  .wfx .menu-bar{
    padding: 14px 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 22px;
  }
  .wfx .menu-bar .logo{
    font-family: var(--hand-loose);
    font-size: 26px; letter-spacing: 1.5px;
    text-align: center;
  }
  .wfx .menu-bar .logo .plus{ color: var(--accent-amber); }

  .wfx .menu-bar .nav-left{ justify-content: flex-start !important; }
  .wfx .menu-bar .nav-right{ justify-content: flex-end !important; }
  .wfx .menu-bar .right-cluster{ justify-content: flex-end; width: 100%; }
  .wfx .menu-bar .nav{
    display: flex; gap: 8px; list-style: none; padding: 0; margin: 0;
    font-family: var(--hand);
    font-size: 17px; color: var(--ink-soft);
    align-items: center;
    justify-content: center;
  }
  .wfx .menu-bar .nav li{
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    display: flex; align-items: center; gap: 4px;
  }
  .wfx .menu-bar .nav li:hover{ background: rgba(0,0,0,0.04); color: var(--ink); }
  .wfx .menu-bar .nav li a{
    color: inherit; text-decoration: none; display: block;
  }
  .wfx .menu-bar .nav li .caret{
    font-size: 10px; opacity: 0.5; margin-left: 2px;
  }
  .wfx .menu-bar .nav li.primary{
    background: var(--ink);
    color: var(--paper);
    border-radius: 6px;
    padding: 8px 18px;
    font-family: var(--hand-loose);
    letter-spacing: 0.8px;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.18);
    position: relative;
  }
  .wfx .menu-bar .nav li.primary:hover{ background: var(--ink); color: var(--paper); }
  .wfx .menu-bar .nav li.has-mega.is-open{ background: rgba(0,0,0,0.06); }
  .wfx .menu-bar .nav li.primary.is-open{ background: var(--ink); color: var(--paper); }
  .wfx .mega-menu[hidden]{ display: none !important; }
  .wfx .menu-bar .nav li.has-mega::after{
    content: '↓';
    font-size: 11px; opacity: 0.55; margin-left: 4px;
  }

  .wfx .menu-bar .right-cluster{
    display: flex; gap: 10px; align-items: center;
  }
  .wfx .menu-bar .lang-switch{
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    font-family: var(--hand);
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
    background: var(--paper);
  }
  .wfx .menu-bar .lang-switch .flag{
    width: 16px; height: 12px;
    border: 1px solid var(--ink-faint);
    background: linear-gradient(to bottom, #fff 33%, #1f3a8a 33% 66%, #d12d2d 66%);
    display: inline-block;
  }
  .wfx .menu-bar .lang-switch .lang-sep{
    color: var(--ink-faint);
  }
  .wfx .menu-bar .lang-switch .active{ color: var(--ink); font-weight: 600; }

  .wfx .menu-bar .icons{ display: flex; gap: 10px; align-items: center; }
  .wfx .menu-bar .icons .icon{
    width: 36px; height: 36px;
    border: 1.5px solid var(--line); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hand-script); font-size: 14px;
    background: var(--paper); cursor: pointer;
    position: relative;
  }
  .wfx .menu-bar .icons .icon:hover{ background: var(--paper-2); }
  .wfx .menu-bar .icons .icon .badge{
    position: absolute; top: -4px; right: -4px;
    background: var(--accent-red); color: var(--paper);
    border-radius: 999px;
    font-family: var(--hand-loose); font-size: 9px;
    padding: 1px 5px; line-height: 1.2;
  }

  /* Mega menu — click-to-open, overlays content */
  .wfx .mega-menu{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    border: 2px solid var(--ink);
    border-radius: 10px;
    background: var(--paper);
    padding: 22px 24px;
    box-shadow: 4px 8px 0 rgba(0,0,0,0.12);
  }
  .wfx .mega-menu .mega-tag{
    position: absolute; top: -12px; left: 18px;
    background: var(--accent-amber);
    color: var(--ink);
    font-family: var(--hand-loose); font-size: 10px; letter-spacing: 1.5px;
    padding: 3px 10px;
    text-transform: uppercase;
  }
  .wfx .mega-menu .mega-grid--full{ grid-template-columns: 1fr !important; }
  .wfx .mega-menu .mega-grid{
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: start;
  }
  .wfx .mega-menu .mega-cards{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
  }
  .wfx .mega-menu .mega-col h5{
    font-family: var(--hand-loose);
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1.5px dashed var(--ink-faint);
  }
  .wfx .mega-menu .mega-col h5.shop-title{
    font-size: 22px;
    letter-spacing: 3px;
    color: var(--ink);
    border-bottom: 2px solid var(--ink);
    padding-bottom: 10px;
    margin-bottom: 14px;
  }
  .wfx .mega-menu .mega-col ul{
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
    font-family: var(--hand-script);
    font-size: 17px;
    color: var(--ink-soft);
  }
  .wfx .mega-menu .mega-col li:hover{ color: var(--ink); cursor: pointer; }
  .wfx .mega-menu .mega-feature{
    border: 1.5px solid var(--line);
    border-radius: 8px;
    background: var(--paper-2);
    padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
  }
  .wfx .mega-menu .mega-feature .feat-img{
    aspect-ratio: 4/3;
    background: repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 6px, transparent 6px 12px);
    border: 1.5px dashed var(--ink-faint);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-faint);
    font-family: var(--hand-script);
    font-size: 13px;
  }
  .wfx .mega-menu .mega-feature .feat-title{
    font-family: var(--hand-loose);
    font-size: 16px;
    color: var(--ink);
  }
  .wfx .mega-menu .mega-feature .feat-desc{
    font-family: var(--body);
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.45;
    margin: -2px 0 6px;
  }
  .wfx .mega-menu .mega-feature .feat-btn{
    align-self: flex-start;
    font-family: var(--body);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 5px 10px;
    border: 1.2px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    border-radius: 3px;
    cursor: pointer;
  }
  .wfx .mega-menu .mega-feature .feat-btn:hover{ background: var(--ink); color: var(--paper); }
  .wfx .mega-menu .mega-foot{
    grid-column: 1 / -1;
    display: flex; justify-content: flex-end;
    border-top: 1px dashed var(--ink-faint);
    padding-top: 10px;
    margin-top: 4px;
  }
  .wfx .mega-menu .mega-foot .read-all{
    font-family: var(--body);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 16px;
    background: var(--ink);
    color: var(--paper);
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  .wfx .mega-menu .mega-feature .feat-cta{
    font-family: var(--hand-script);
    color: var(--accent-amber);
    font-size: 14px;
  }

  /* Sticky-state preview annotation */
  .wfx .scroll-state-note{
    margin-top: 10px;
    font-family: var(--hand-script);
    color: var(--ink-faint);
    font-size: 13px;
    display: flex; gap: 6px; align-items: center;
  }
  .wfx .scroll-state-note::before{
    content: 'on scroll →';
    color: var(--accent-amber);
    font-family: var(--hand-loose);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  /* === Hero === */
  .wfx .hero-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
  }
  .wfx .hero-media{
    aspect-ratio: 21/9;
    border: 2px solid var(--line);
    border-radius: 8px;
    background: var(--paper-2);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
  }
  .wfx .hero-media .play-circle{
    width: 72px; height: 72px;
    border-radius: 50%; border: 2px solid var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hand-loose); font-size: 22px;
    background: var(--paper);
  }
  .wfx .hero-media .label{
    font-family: var(--hand-script); font-size: 18px; color: var(--ink-faint);
  }
  .wfx .hero-overlay{
    position: absolute;
    left: 24px; right: 24px; bottom: 24px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    z-index: 2;
  }
  .wfx .hero-overlay-text{
    background: rgba(245, 241, 232, 0.88);
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 14px 18px;
    max-width: 520px;
    backdrop-filter: blur(2px);
  }
  .wfx .hero-overlay-text h3{
    font-family: var(--hand-loose); font-size: 32px; margin: 0 0 6px; line-height: 1.05;
  }
  .wfx .hero-overlay-text p{
    font-family: var(--hand); font-size: 15px; color: var(--ink-soft);
    line-height: 1.45; margin: 0;
  }
  .wfx .hero-overlay-cta{
    display: flex; gap: 12px; align-items: center;
  }
  .wfx .btn.on-media{
    background: var(--paper);
  }
  .wfx .btn.on-media.primary{
    background: var(--ink); color: var(--paper);
  }
  .wfx .hero-play{
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .wfx .hero-label{
    position: absolute; top: 14px; left: 18px;
    z-index: 1;
  }
  .wfx .hero-annot-row{
    margin-top: 10px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  .wfx .hero-media .scribbles{
    position: absolute; inset: 0;
    background-image:
      repeating-linear-gradient(135deg, transparent 0 18px, rgba(0,0,0,0.04) 18px 19px);
    pointer-events: none;
  }
  .wfx .hero-copy{
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: start;
    margin-top: 22px;
  }
  .wfx .hero-copy h3{
    font-family: var(--hand-loose); font-size: 38px; margin: 0 0 12px; line-height: 1.05;
  }
  .wfx .hero-copy p{
    font-family: var(--hand); font-size: 17px; color: var(--ink-soft);
    line-height: 1.5; margin: 0 0 18px;
  }
  .wfx .hero-cta-row{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .wfx .btn{
    border: 2px solid var(--line);
    background: var(--paper);
    padding: 10px 22px;
    font-family: var(--hand);
    font-size: 17px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 120ms, box-shadow 120ms;
    text-decoration: none;
    color: var(--ink);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .wfx .btn:hover{ transform: translate(-1px,-1px); box-shadow: 2px 2px 0 rgba(0,0,0,0.15); }
  .wfx .btn.primary{ background: var(--ink); color: var(--paper); }
  .wfx .btn.lg{ padding: 12px 26px; font-size: 18px; }
  .wfx .annot-callout{
    position: relative;
    font-family: var(--hand-script);
    font-size: 14px;
    color: var(--accent-red);
    padding-left: 18px;
  }
  .wfx .annot-callout::before{
    content: '↳';
    position: absolute;
    left: 0; top: -2px;
    font-size: 18px;
  }
  .wfx .hero-cta-annot{
    margin-top: 10px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    font-family: var(--hand-script); font-size: 13px; color: var(--ink-faint);
  }

  /* === Audiences (3 expandable cards) === */
  .wfx .audiences-row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    margin-top: 6px;
    transition: grid-template-columns 420ms cubic-bezier(.4,.1,.2,1);
  }
  .wfx .audiences-row.has-open[data-open="0"]{ grid-template-columns: 2.4fr 1fr 1fr; }
  .wfx .audiences-row.has-open[data-open="1"]{ grid-template-columns: 1fr 2.4fr 1fr; }
  .wfx .audiences-row.has-open[data-open="2"]{ grid-template-columns: 1fr 1fr 2.4fr; }
  .wfx .aud-card{
    position: relative;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: var(--paper-2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    transition: background 220ms;
    cursor: pointer;
  }
  .wfx .aud-card.is-open{
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--accent-amber);
  }
  .wfx .aud-card .aud-image{
    position: relative;
    flex: 1;
    min-height: 260px;
    background-image:
      repeating-linear-gradient(135deg, rgba(0,0,0,0.045) 0 6px, transparent 6px 12px);
    border-bottom: 1.5px dashed var(--ink-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .wfx .aud-card .aud-image::after{
    content: 'image placeholder';
    position: absolute;
    bottom: 8px; right: 10px;
    font-family: var(--hand-script);
    font-size: 11px;
    color: var(--ink-faint);
    opacity: 0.7;
  }
  /* Wireframe icon inside image area */
  .wfx .aud-icon{
    width: 64%;
    max-width: 200px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wfx .aud-icon svg{
    width: 100%; height: 100%;
    stroke: var(--ink);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .wfx .aud-card .aud-tag{
    position: absolute;
    top: 14px; left: 14px;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    padding: 6px 14px 6px 10px;
    display: flex; align-items: center; gap: 7px;
    font-family: var(--hand-loose);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink);
    z-index: 2;
  }
  .wfx .aud-card .aud-tag .tag-dot{
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
  }
  .wfx .aud-card:nth-child(1) .aud-tag .tag-dot{ background: var(--accent-pink); }
  .wfx .aud-card:nth-child(2) .aud-tag .tag-dot{ background: var(--accent-amber); }
  .wfx .aud-card:nth-child(3) .aud-tag .tag-dot{ background: var(--accent-blue); }
  .wfx .aud-card .aud-plus{
    position: absolute;
    top: 12px; right: 12px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hand-loose);
    font-size: 22px;
    color: var(--ink);
    cursor: pointer;
    z-index: 2;
    transition: transform 320ms cubic-bezier(.4,.1,.2,1), background 200ms;
    line-height: 1;
  }
  .wfx .aud-card .aud-plus:hover{ background: var(--paper-2); }
  .wfx .aud-card.is-open .aud-plus{
    background: var(--ink);
    color: var(--paper);
    transform: rotate(45deg);
  }
  .wfx .aud-card .aud-body{
    padding: 18px 18px 18px;
    display: flex; flex-direction: column;
    gap: 10px;
  }
  .wfx .aud-card .aud-title{
    font-family: var(--hand-loose);
    font-size: 26px;
    line-height: 1.1;
    color: var(--ink);
    margin: 0;
  }
  .wfx .aud-card .aud-title em{
    font-family: var(--hand-script);
    font-style: italic;
    font-weight: 400;
    color: var(--ink-soft);
  }
  .wfx .aud-card .aud-expand{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 420ms cubic-bezier(.4,.1,.2,1);
  }
  .wfx .aud-card.is-open .aud-expand{ grid-template-rows: 1fr; }
  .wfx .aud-card .aud-expand-inner{
    overflow: hidden;
    min-height: 0;
  }
  .wfx .aud-card .aud-expand-inner > *{
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 260ms, transform 260ms;
    transition-delay: 0ms;
  }
  .wfx .aud-card.is-open .aud-expand-inner > *{
    opacity: 1;
    transform: none;
    transition-delay: 180ms;
  }
  .wfx .aud-card .aud-desc{
    font-family: var(--hand);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 6px 0 12px;
  }
  .wfx .aud-card .aud-bullets{
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1.5px dashed var(--ink-faint);
    padding-top: 12px;
  }
  .wfx .aud-card .aud-bullets li{
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-family: var(--hand);
    font-size: 14px;
    color: var(--ink-soft);
  }
  .wfx .aud-card .aud-bullets li::before{
    content: '→';
    font-family: var(--hand-loose);
    color: var(--accent-amber);
    font-size: 14px;
    flex-shrink: 0;
  }
  .wfx .aud-card .aud-bullets li b{
    color: var(--ink);
    font-weight: 400;
    font-family: var(--hand-loose);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    margin-right: 4px;
  }
  .wfx .aud-card .aud-cta-row{
    display: flex; gap: 8px; align-items: center;
    flex-wrap: wrap;
  }
  .wfx .aud-card .aud-cta-row .btn{ padding: 8px 16px; font-size: 14px; }
  .wfx .aud-card .aud-quote{
    font-family: var(--hand-script);
    font-size: 14px;
    color: var(--ink-faint);
    border-left: 2px dashed var(--ink-faint);
    padding-left: 10px;
    margin-top: 10px;
  }
  /* Collapsed (non-open) cards in expanded row keep image, hide title bottom less */
  .wfx .audiences-row.has-open .aud-card:not(.is-open) .aud-title{
    font-size: 18px;
  }
  .wfx .audiences-legend{
    margin-top: 14px;
    text-align: center;
    font-family: var(--hand-script);
    font-size: 15px;
    color: var(--ink-faint);
  }
  .wfx .section.audiences .stripe{ background: var(--accent-pink); }

  /* === 7 Steps === */
  .wfx .steps-row{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 14px;
  }
  .wfx .step-circle{
    position: relative;
    aspect-ratio: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    perspective: 800px;
    transition: transform 120ms;
    border-radius: 0;
  }
  .wfx .step-circle:hover{ transform: translateY(-3px); }
  .wfx .step-flip{
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    transition: transform 500ms cubic-bezier(.4,.1,.2,1);
  }
  .wfx .step-circle.flipped .step-flip{ transform: rotateY(180deg); }
  .wfx .step-face{
    position: absolute; inset: 0;
    border: 2px solid var(--line);
    border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--paper);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    padding: 0 10px;
    text-align: center;
  }
  .wfx .step-face.back{
    transform: rotateY(180deg);
    background: var(--paper-2);
    border-style: dashed;
  }
  .wfx .step-face.back .desc{
    font-family: var(--hand-script);
    font-size: 11px;
    line-height: 1.3;
    color: var(--ink-soft);
  }
  .wfx .step-circle .n{
    font-family: var(--hand-loose);
    font-size: 28px; line-height: 1;
  }
  .wfx .step-circle .ttl{
    font-family: var(--hand-script);
    font-size: 13px;
    color: var(--ink-faint);
    margin-top: 4px;
    padding: 0 6px;
  }
  .wfx .step-circle.featured .step-face.front{
    background: var(--ink); color: var(--paper);
    box-shadow: 4px 4px 0 var(--accent-amber);
  }
  .wfx .step-circle.featured .step-face.front .ttl{ color: rgba(255,255,255,0.75); }
  .wfx .step-face.front::after{
    content: '+';
    position: absolute;
    right: 10px; bottom: 8px;
    width: 20px; height: 20px;
    border: 1.5px solid var(--ink-soft);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hand-loose);
    font-size: 16px; line-height: 1;
    color: var(--ink-soft);
    background: var(--paper);
  }
  .wfx .step-circle.featured .step-face.front::after{
    border-color: rgba(255,255,255,0.6);
    color: var(--paper);
    background: transparent;
  }
  .wfx .step-face.back::after{
    content: '×';
    position: absolute;
    right: 10px; bottom: 8px;
    width: 20px; height: 20px;
    border: 1.5px dashed var(--ink-soft);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hand-loose);
    font-size: 16px; line-height: 1;
    color: var(--ink-soft);
  }

  .wfx .steps-conn{
    height: 22px;
    background-image:
      radial-gradient(circle, rgba(0,0,0,0.35) 1.5px, transparent 1.5px);
    background-size: 10px 10px;
    background-position: 0 50%;
    background-repeat: repeat-x;
    margin: 0 8% 14px;
    opacity: 0.5;
  }
  .wfx .steps-legend{
    text-align: center;
    font-family: var(--hand-script);
    font-size: 16px;
    color: var(--ink-faint);
  }
  .wfx .steps-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 0;
  }
  .wfx .steps-footer .steps-legend{
    text-align: left;
    flex: 1;
  }
  .wfx .btn-more{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--hand);
    font-size: 15px;
    text-decoration: none;
    box-shadow: 2px 2px 0 var(--ink);
    transition: transform .12s ease, box-shadow .12s ease;
    white-space: nowrap;
  }
  .wfx .btn-more:hover{
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--ink);
  }

  /* === Science / Technology / Results tabs === */
  .wfx .tab-row{
    display: flex; gap: 0;
    margin-bottom: 18px;
    border-bottom: 1.5px dashed var(--ink-soft);
  }
  .wfx .tab{
    flex: 1;
    padding: 12px 14px 10px;
    background: none;
    border: none;
    border-right: 1.5px dashed var(--ink-soft);
    font-family: var(--hand);
    font-size: 18px;
    color: var(--ink-soft);
    cursor: pointer;
    text-align: center;
    position: relative;
  }
  .wfx .tab:last-child{ border-right: none; }
  .wfx .tab.active{ color: var(--ink); background: rgba(0,0,0,0.04); }
  .wfx .tab.active::after{
    content: ''; position: absolute;
    left: 12px; right: 12px; bottom: -2px;
    height: 3px; background: var(--ink); border-radius: 2px;
  }
  .wfx .tab .num{
    font-family: var(--hand-loose);
    font-size: 11px; letter-spacing: 1.5px;
    color: var(--ink-faint);
    display: block;
    text-transform: uppercase;
  }

  .wfx .tab-panel{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 14px;
    align-items: stretch;
  }
  .wfx .panel-card{
    border: 1.5px solid var(--line);
    border-radius: 8px;
    background: var(--paper-2);
    padding: 14px;
    min-height: 200px;
    display: flex; flex-direction: column;
  }
  .wfx .panel-card .img{
    flex: 1;
    border: 1.5px dashed var(--ink-soft);
    border-radius: 6px;
    margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hand-script);
    font-size: 13px;
    color: var(--ink-faint);
    background:
      repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,0.025) 12px 13px);
  }
  .wfx .panel-card .lines{
    height: 38px;
    background-image:
      linear-gradient(transparent 0 7px, rgba(0,0,0,0.18) 7px 8px),
      linear-gradient(transparent 0 16px, rgba(0,0,0,0.18) 16px 17px),
      linear-gradient(transparent 0 25px, rgba(0,0,0,0.18) 25px 26px);
  }
  .wfx .panel-card.with-arrow .img{
    position: relative;
  }
  .wfx .panel-card.with-arrow .img::after{
    content: '↗';
    position: absolute;
    bottom: 8px; right: 12px;
    font-family: var(--hand-loose);
    font-size: 22px;
    color: var(--accent-amber);
  }
  .wfx .panel-card .cap{
    margin-top: 8px;
    font-family: var(--hand-script);
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.35;
  }
  .wfx .tab-content[hidden]{ display: none; }

  .wfx .panel-more{
    display: block;
    margin-top: 22px;
    text-align: right;
    font-family: var(--hand-script);
    font-size: 15px;
    color: var(--ink-mid);
    text-decoration: none;
  }
  .wfx .panel-more span{
    border-bottom: 1px dashed var(--ink-soft);
    padding-bottom: 1px;
  }
  .wfx .panel-more:hover span{
    color: var(--ink);
    border-bottom-color: var(--ink);
  }

  /* === Editorial collage layout for tab panels === */
  .wfx .collage{
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.1fr;
    grid-template-rows: auto auto;
    gap: 18px;
    align-items: stretch;
  }
  .wfx .collage .hero-photo{
    grid-row: 1 / span 2;
    grid-column: 1;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background:
      repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,0.04) 14px 15px),
      var(--paper-2);
    min-height: 420px;
    display: flex; align-items: end;
    padding: 16px;
    font-family: var(--hand-script);
    font-size: 14px;
    color: var(--ink-soft);
  }
  .wfx .collage .metric-card, .wfx .collage .chart-card, .wfx .collage .quote-card, .wfx .collage .stat-card{
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    padding: 14px 16px;
    display: flex; flex-direction: column;
    gap: 8px;
  }
  .wfx .collage .chart-card{
    grid-column: 2;
    grid-row: 1;
    background: var(--paper-2);
    min-height: 200px;
  }
  .wfx .collage .stat-card{
    grid-column: 2;
    grid-row: 2;
    background: #2b2520;
    color: var(--paper);
    border-color: #2b2520;
    min-height: 200px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .wfx .collage .quote-card{
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-content: center;
    padding: 32px 28px;
  }
  .wfx .collage .kicker{
    font-family: var(--hand-loose);
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--ink-faint);
  }
  .wfx .collage .stat-card .kicker{ color: rgba(255,255,255,0.55); }
  .wfx .collage .big-num{
    font-family: var(--hand);
    font-size: 56px; line-height: 1;
    color: var(--ink);
  }
  .wfx .collage .stat-card .big-num{ color: var(--paper); font-size: 72px; }
  .wfx .collage .stat-card .lbl{
    font-family: var(--hand-script);
    font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255,255,255,0.7);
  }
  .wfx .collage .stat-card .head{
    font-family: var(--hand);
    font-size: 22px;
    color: var(--paper);
    margin-top: 6px;
  }
  .wfx .collage .stat-card .body{
    font-family: var(--hand-script);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,0.78);
    max-width: 28ch;
  }
  .wfx .collage .chart-area{
    flex: 1;
    border: 1px dashed var(--ink-soft);
    border-radius: 6px;
    background:
      repeating-linear-gradient(0deg, transparent 0 18px, rgba(0,0,0,0.05) 18px 19px),
      repeating-linear-gradient(90deg, transparent 0 28px, rgba(0,0,0,0.05) 28px 29px);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hand-script);
    font-size: 13px;
    color: var(--ink-faint);
    min-height: 110px;
  }
  .wfx .collage .quote-card .qmark{
    font-family: var(--hand);
    font-size: 38px; line-height: 1;
    color: var(--ink-soft);
  }
  .wfx .collage .quote-card .qtext{
    font-family: var(--hand);
    font-size: 26px;
    line-height: 1.25;
    color: var(--ink);
  }
  .wfx .collage .quote-card .qauthor{
    font-family: var(--hand-script);
    font-size: 14px;
    color: var(--ink-faint);
    margin-top: 10px;
  }
  .wfx .panel-head{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 28px;
    align-items: start;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1.5px dashed var(--line);
  }
  .wfx .panel-head h3{
    margin: 0;
    font-family: var(--hand);
    font-size: 32px;
    line-height: 1.05;
    color: var(--ink);
  }
  .wfx .panel-head p{
    margin: 4px 0 0;
    font-family: var(--hand-script);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 56ch;
  }

  /* === Gallery + social proof === */
  .wfx .gallery-grid{
    columns: 5;
    column-gap: 12px;
  }
  .wfx .gallery-tile{
    break-inside: avoid;
    margin-bottom: 12px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: block;
    background: var(--paper);
  }
  .wfx .gallery-tile .media{
    position: relative;
    background:
      repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,0.05) 14px 15px),
      var(--paper-2);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-faint);
    font-family: var(--hand-script);
    font-size: 13px;
    text-align: center;
    padding: 10px;
  }
  .wfx .gallery-tile.t-tall .media{ aspect-ratio: 3/5; }
  .wfx .gallery-tile.t-portrait .media{ aspect-ratio: 4/5; }
  .wfx .gallery-tile.t-square .media{ aspect-ratio: 1/1; }
  .wfx .gallery-tile.t-wide .media{ aspect-ratio: 4/3; }
  .wfx .gallery-tile .overlay{
    position: absolute;
    left: 10px; right: 10px; bottom: 10px;
    background: rgba(245, 241, 232, 0.92);
    border: 1.5px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: var(--hand);
    font-size: 13px;
    line-height: 1.3;
    color: var(--ink);
  }
  .wfx .gallery-tile .overlay .who{
    font-family: var(--hand-loose);
    font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--ink-faint);
    display: block; margin-top: 4px;
  }
  .wfx .gallery-tile.video .media::before{
    content: '▶';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: var(--ink);
  }
  .wfx .gallery-tile.video .badge{
    position: absolute; top: 8px; left: 8px;
    background: var(--ink); color: var(--paper);
    font-family: var(--hand-loose);
    font-size: 9px; letter-spacing: 1.5px;
    padding: 3px 8px; border-radius: 999px;
  }
  .wfx .gallery-tile.text-tile{
    padding: 18px 16px;
    font-family: var(--hand);
    font-size: 18px; line-height: 1.3;
    color: var(--ink);
  }
  .wfx .gallery-tile.text-tile.dark{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .wfx .gallery-tile.text-tile .qmark{
    font-family: var(--hand);
    font-size: 36px; line-height: 0.5;
    display: block; margin-bottom: 12px;
    color: var(--ink-soft);
  }
  .wfx .gallery-tile.text-tile.dark .qmark{ color: rgba(255,255,255,0.6); }
  .wfx .gallery-tile.text-tile .who{
    margin-top: 12px;
    font-family: var(--hand-loose);
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-faint);
    display: block;
  }
  .wfx .gallery-tile.text-tile.dark .who{ color: rgba(255,255,255,0.55); }
  .wfx .gallery-tile.stat{
    padding: 18px 16px; text-align: center;
  }
  .wfx .gallery-tile.stat .big{
    font-family: var(--hand);
    font-size: 44px; line-height: 1; color: var(--ink);
  }
  .wfx .gallery-tile.stat .lbl{
    font-family: var(--hand-loose);
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 6px; display: block;
  }
  .wfx .gallery-tile.audio .media{ flex-direction: column; gap: 10px; padding: 16px 12px; background: var(--paper); }
  .wfx .gallery-tile.audio .wave{
    width: 100%; height: 56px;
    background-image: repeating-linear-gradient(to right, var(--ink) 0 2px, transparent 2px 5px);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  }
  .wfx .gallery-tile .caption{
    font-family: var(--hand-script);
    font-size: 13px;
    color: var(--ink-soft);
    padding: 8px 12px 12px;
    line-height: 1.35;
  }

  /* === Subscriptions === */
  .wfx .subs-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .wfx .sub-card{
    border: 2px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    isolation: isolate;
    background: var(--paper-2);
    padding: 18px 16px;
    min-height: 240px;
    display: flex; flex-direction: column;
    position: relative;
    transition: transform 120ms, box-shadow 120ms;
  }
  .wfx .sub-card:hover{ transform: translate(-2px, -2px); box-shadow: 4px 4px 0 rgba(0,0,0,0.12); }
  .wfx .sub-card .bg-photo{
    position: absolute; inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg, rgba(246,243,236,0.55) 0%, rgba(246,243,236,0.92) 60%, var(--paper) 100%),
      repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,0.06) 14px 15px),
      var(--paper-2);
    display: flex; align-items: flex-start; justify-content: flex-end;
    padding: 10px;
    font-family: var(--hand-script);
    font-size: 11px;
    color: var(--ink-faint);
  }
  .wfx .sub-card.bg-classical .bg-photo{ background-color: #2a2620; }
  .wfx .sub-card.bg-space .bg-photo{ background-color: #1a2238; }
  .wfx .sub-card.bg-globe .bg-photo{ background-color: #3d2a1f; }
  .wfx .sub-card .corner-tag{
    position: absolute; top: 10px; left: 14px;
    font-family: var(--hand-loose);
    font-size: 11px; letter-spacing: 1.5px;
    color: var(--ink-faint);
    text-transform: uppercase;
  }
  .wfx .sub-card h3{
    font-family: var(--hand-loose);
    font-size: 24px;
    margin: 36px 0 10px;
    line-height: 1.1;
    letter-spacing: 0.5px;
  }
  .wfx .sub-card .desc{
    font-family: var(--hand);
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.4;
    flex: 1;
    margin-bottom: 14px;
  }
  .wfx .sub-card .footer-row{
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1.5px dashed var(--ink-soft);
    padding-top: 10px;
  }
  .wfx .sub-card .price{
    font-family: var(--hand-loose);
    font-size: 18px;
  }
  .wfx .sub-card .price .per{
    font-family: var(--hand-script);
    font-size: 14px;
    color: var(--ink-faint);
    margin-left: 4px;
  }

  /* === Heartbeat featured === */
  .wfx .hb-feature{
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: center;
    background:
      linear-gradient(180deg, rgba(198, 74, 138, 0.05), rgba(47, 95, 179, 0.05) 50%, rgba(201, 138, 43, 0.06));
    border: 1.5px dashed var(--ink-soft);
    border-radius: 8px;
    padding: 22px;
  }
  .wfx .hb-feature .bottle-stage{
    aspect-ratio: 0.9/1;
    border: 1.5px dashed var(--ink-soft);
    border-radius: 8px;
    background: var(--paper);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .wfx .hb-feature .bottle-stage svg{
    width: 70%; max-width: 240px; height: auto;
  }
  .wfx .hb-feature .bottle-stage .pulse{
    position: absolute;
    top: 20px; left: 50%; transform: translateX(-50%);
    width: 70%;
    height: 30px;
    opacity: 0.6;
  }
  .wfx .hb-feature .copy h3{
    font-family: var(--hand-loose);
    font-size: 32px;
    margin: 0 0 6px;
    letter-spacing: 0.5px;
  }
  .wfx .hb-feature .copy .kicker{
    display: inline-block;
    font-family: var(--hand-loose);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-red);
    border: 1.5px solid var(--accent-red);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
  }
  .wfx .hb-feature .copy p{
    font-family: var(--hand);
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0 0 14px;
    max-width: 420px;
  }
  .wfx .hb-feature .icons-row{
    display: flex; gap: 12px;
    margin: 14px 0 18px;
    font-family: var(--hand-script);
    font-size: 14px;
    color: var(--ink-faint);
  }
  .wfx .hb-feature .icons-row .ic{
    width: 38px; height: 38px;
    border: 1.5px solid var(--ink); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hand-loose); font-size: 16px;
    background: var(--paper);
  }
  .wfx .hb-feature .icons-row .ic.circle{ border-radius: 50%; }
  .wfx .hb-feature .icons-row .ic.square{ border-radius: 4px; }
  .wfx .hb-feature .icons-row .ic.triangle{
    border: none;
    background: transparent;
    position: relative;
  }
  .wfx .hb-feature .icons-row .ic.triangle::before{
    content: '';
    position: absolute; inset: 0;
    background: var(--paper);
    clip-path: polygon(50% 8%, 92% 92%, 8% 92%);
    border: 1.5px solid var(--ink);
  }
  .wfx .hb-feature .icons-row .ic.triangle::after{
    content: '';
    position: absolute; inset: 4px;
    clip-path: polygon(50% 8%, 92% 92%, 8% 92%);
    background: transparent;
    border: 1.5px solid var(--ink);
  }

  /* === FAQ === */
  .wfx .faq-list{
    display: flex; flex-direction: column;
    border-top: 1.5px dashed var(--ink-faint);
  }
  .wfx .faq-item{
    border-bottom: 1.5px dashed var(--ink-faint);
  }
  .wfx .faq-item summary{
    list-style: none;
    cursor: pointer;
    padding: 18px 4px;
    font-family: var(--hand-loose);
    font-size: 22px;
    color: var(--ink);
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
  }
  .wfx .faq-item summary::-webkit-details-marker{ display: none; }
  .wfx .faq-item summary::after{
    content: '+';
    font-family: var(--hand-loose);
    font-size: 28px;
    color: var(--accent-amber);
    transition: transform 0.2s ease;
    line-height: 1;
  }
  .wfx .faq-item[open] summary::after{ content: '−'; transform: rotate(0deg); }
  .wfx .faq-item .faq-body{
    padding: 0 4px 20px;
  }
  .wfx .faq-item .faq-body p{
    font-family: var(--body);
    font-size: 15px; line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
    max-width: 760px;
  }

  /* === Antarctica expedition === */
  .wfx .antarctica-grid{
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 28px;
    align-items: stretch;
  }
  .wfx .antarctica-photo{
    border: 1.5px solid var(--ink-soft);
    border-radius: 8px;
    background:
      repeating-linear-gradient(90deg, transparent 0 28px, rgba(0,0,0,0.03) 28px 29px),
      repeating-linear-gradient(0deg, transparent 0 28px, rgba(0,0,0,0.03) 28px 29px),
      linear-gradient(160deg, #eaf3f8 0%, #d3e6f0 60%, #b8d3e0 100%);
    min-height: 320px;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .wfx .antarctica-photo::before{
    content: '';
    position: absolute;
    bottom: 18%; left: -10%; right: -10%;
    height: 60%;
    background:
      linear-gradient(180deg, transparent 0%, transparent 40%, #ffffff 40%, #f3f8fb 100%);
    clip-path: polygon(0% 70%, 12% 55%, 24% 65%, 38% 45%, 52% 60%, 66% 40%, 80% 58%, 92% 48%, 100% 60%, 100% 100%, 0% 100%);
    opacity: 0.85;
  }
  .wfx .antarctica-photo .ph-label{
    position: relative;
    font-family: var(--hand-script);
    font-size: 28px;
    color: var(--ink-soft);
    letter-spacing: 1px;
    transform: rotate(-3deg);
  }
  .wfx .antarctica-copy{
    display: flex; flex-direction: column; gap: 16px;
  }
  .wfx .antarctica-copy p{
    font-family: var(--hand);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
  }
  .wfx .antarctica-actions{
    display: flex; gap: 12px; margin-top: auto; flex-wrap: wrap;
  }
  .wfx .antarctica-actions .btn{
    flex: 1; min-width: 140px;
  }

  /* === Donate overlay === */
  .wfx .donate-overlay{
    position: fixed; inset: 0;
    background: rgba(20, 16, 10, 0.55);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
  }
  .wfx .donate-overlay.open{ display: flex; }
  .wfx .donate-modal{
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 10px;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.18);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 30px;
    position: relative;
  }
  .wfx .donate-modal .close-x{
    position: absolute; top: 12px; right: 14px;
    background: transparent; border: none;
    font-family: var(--hand-script); font-size: 28px;
    color: var(--ink-soft); cursor: pointer; line-height: 1;
  }
  .wfx .donate-modal h3{
    font-family: var(--hand-loose);
    font-size: 28px;
    margin: 0 0 4px;
    line-height: 1.05;
  }
  .wfx .donate-modal .lead{
    font-family: var(--hand-script);
    font-size: 18px;
    color: var(--accent-amber);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    text-transform: uppercase;
  }
  .wfx .donate-modal p{
    font-family: var(--hand);
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin: 0 0 12px;
  }
  .wfx .donate-perk{
    border: 1.5px dashed var(--accent-amber);
    border-radius: 6px;
    padding: 12px 14px;
    margin: 14px 0 18px;
    background: rgba(201, 138, 43, 0.07);
  }
  .wfx .donate-perk .perk-tag{
    font-family: var(--hand-loose);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent-amber);
    margin-bottom: 4px;
  }
  .wfx .donate-perk .perk-text{
    font-family: var(--hand);
    font-size: 14px;
    color: var(--ink);
    line-height: 1.5;
  }
  .wfx .donate-amounts{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 14px 0 10px;
  }
  .wfx .amount-chip{
    border: 1.5px solid var(--line);
    background: var(--paper);
    border-radius: 6px;
    padding: 12px 6px;
    font-family: var(--hand-loose);
    font-size: 18px;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s;
  }
  .wfx .amount-chip:hover{ transform: translate(-1px,-1px); box-shadow: 2px 2px 0 rgba(0,0,0,0.12); }
  .wfx .amount-chip.selected{
    border-width: 2.5px;
    border-color: var(--accent-amber);
    background: rgba(201, 138, 43, 0.1);
    box-shadow: 3px 3px 0 var(--accent-amber);
  }
  .wfx .donate-custom{
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 18px;
  }
  .wfx .donate-custom label{
    font-family: var(--hand-script);
    font-size: 16px;
    color: var(--ink-soft);
  }
  .wfx .donate-custom input{
    flex: 1;
    border: none;
    border-bottom: 1.5px dashed var(--ink-soft);
    background: transparent;
    font-family: var(--hand-loose);
    font-size: 18px;
    color: var(--ink);
    padding: 6px 4px;
    outline: none;
  }
  .wfx .donate-custom input:focus{ border-bottom-color: var(--accent-amber); }
  .wfx .paypal-btn{
    width: 100%;
    background: #ffc439;
    border: 2px solid #1a1a1a;
    border-radius: 6px;
    padding: 14px 20px;
    font-family: var(--hand-loose);
    font-size: 18px;
    color: #1a1a1a;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: all 0.15s;
  }
  .wfx .paypal-btn:hover{ transform: translate(-1px,-1px); box-shadow: 3px 3px 0 rgba(0,0,0,0.2); }
  .wfx .paypal-btn .pp-mark{
    font-family: 'Helvetica', sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 18px;
    letter-spacing: -0.5px;
  }
  .wfx .paypal-btn .pp-mark .p1{ color: #003087; }
  .wfx .paypal-btn .pp-mark .p2{ color: #009cde; }
  .wfx .donate-fineprint{
    margin-top: 12px;
    font-family: var(--hand);
    font-size: 12px;
    color: var(--ink-faint);
    text-align: center;
  }
  @media (max-width: 520px) {
    .wfx .donate-amounts{ grid-template-columns: repeat(2, 1fr); }
  }

  /* === Poll === */
  .wfx .poll-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 22px;
  }
  .wfx .poll-card{
    border: 1.5px solid var(--line);
    border-radius: 8px;
    background: var(--paper-2);
    padding: 14px;
    display: flex; flex-direction: column;
    min-height: 180px;
    position: relative;
  }
  .wfx .poll-card .artist{
    flex: 1;
    border: 1.5px dashed var(--ink-soft);
    border-radius: 6px;
    margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hand-loose);
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--ink);
    text-align: center;
    padding: 10px;
    background:
      repeating-linear-gradient(135deg, transparent 0 16px, rgba(0,0,0,0.03) 16px 17px),
      var(--paper);
  }
  .wfx .poll-card .meta{
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--hand-script);
    font-size: 14px;
    color: var(--ink-faint);
    margin-bottom: 8px;
  }
  .wfx .poll-card .vote-bar{
    height: 6px;
    border-radius: 3px;
    background: rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
  }
  .wfx .poll-card .vote-bar .fill{
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--accent-pink);
    border-radius: 3px;
  }
  .wfx .poll-card .vote-btn{
    border: 2px solid var(--line);
    background: var(--paper);
    padding: 8px 12px;
    font-family: var(--hand-loose);
    font-size: 14px; letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
  }
  .wfx .poll-card.voted .vote-btn{
    background: var(--ink); color: var(--paper);
  }
  .wfx .poll-card.voted .vote-btn::before{
    content: '✓ '; color: var(--accent-amber);
  }

  .wfx .email-capture{
    border-top: 1.5px dashed var(--ink-soft);
    padding-top: 18px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
  }
  .wfx .email-capture .lead{
    font-family: var(--hand-script);
    font-size: 18px;
    color: var(--ink-soft);
  }
  .wfx .email-capture .form{
    display: flex; gap: 8px;
    max-width: 460px; width: 100%;
  }
  .wfx .email-capture input{
    flex: 1;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    padding: 9px 14px;
    font-family: var(--hand);
    font-size: 16px;
    background: var(--paper);
    outline: none;
  }
  .wfx .email-capture input:focus{ border-color: var(--accent-pink); }

  /* Footer notes */
  .wfx .notes{
    margin-top: 32px;
    border-top: 2px dashed var(--ink-soft);
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    font-family: var(--hand);
    color: var(--ink-soft);
    font-size: 15px;
  }
  .wfx .notes h4{
    font-family: var(--hand-loose);
    color: var(--ink);
    margin: 0 0 6px;
    font-size: 17px;
  }
  .wfx .notes p{ margin: 0 0 8px; line-height: 1.45; }

  /* === Site footer === */
  .wfx .site-footer{
    margin-top: 48px;
    background: var(--ink);
    color: var(--paper);
    padding: 48px 40px 32px;
    font-family: var(--hand);
    position: relative;
    border-radius: 10px;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.18);
    overflow: hidden;
  }
  .wfx .site-footer::before{
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--accent-amber) 0 14px, transparent 14px 22px);
    opacity: 0.55;
  }
  .wfx .footer-top{
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 24px; flex-wrap: wrap;
    margin-bottom: 36px;
  }
  .wfx .footer-brand{
    font-family: var(--hand-loose);
    font-size: 36px;
    color: var(--paper);
    letter-spacing: 0.5px;
    line-height: 1;
  }
  .wfx .footer-brand .plus{ color: var(--accent-amber); }
  .wfx .footer-pay{
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  }
  .wfx .footer-pay .pay-card{
    background: var(--paper);
    color: var(--ink);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: var(--hand-loose);
    font-size: 12px;
    letter-spacing: 0.5px;
    min-width: 56px;
    text-align: center;
    border: 1.5px solid #2a2a2a;
  }
  .wfx .footer-pay .pay-card.dark{
    background: #0a0a0a; color: var(--paper); border-color: #2a2a2a;
  }
  .wfx .footer-pay .pay-card.amex{
    background: #2671b8; color: #fff;
  }
  .wfx .footer-pay .pay-card.master{
    background: #ff5f00; color: #fff;
  }
  .wfx .footer-pay .pay-card.visa{
    background: #1a1f71; color: #fff;
  }
  .wfx .footer-pay .pay-card.paypal{
    background: #f5f5f5; color: #003087;
  }
  .wfx .footer-pay .pay-card .pp-i{ color: #009cde; }

  .wfx .footer-grid{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 36px 28px;
    padding-bottom: 32px;
    border-bottom: 1.5px dashed rgba(246, 243, 236, 0.25);
  }
  .wfx .footer-newsletter h4, .wfx .footer-col h4{
    font-family: var(--hand-loose);
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent-amber);
    margin: 0 0 18px;
    font-weight: 400;
  }
  .wfx .footer-newsletter .nl-lead{
    font-family: var(--hand-loose);
    font-size: 26px;
    color: var(--paper);
    line-height: 1.15;
    margin: 0 0 18px;
    max-width: 320px;
  }
  .wfx .nl-form{
    display: flex; align-items: center;
    border: 1.5px solid rgba(246, 243, 236, 0.4);
    border-radius: 999px;
    padding: 4px 4px 4px 18px;
    max-width: 360px;
    background: rgba(246, 243, 236, 0.06);
  }
  .wfx .nl-form input{
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--paper);
    font-family: var(--hand);
    font-size: 14px;
    padding: 8px 0;
  }
  .wfx .nl-form input::placeholder{ color: rgba(246, 243, 236, 0.55); }
  .wfx .nl-form button{
    background: var(--paper);
    color: var(--ink);
    border: none;
    border-radius: 999px;
    width: 34px; height: 34px;
    cursor: pointer;
    font-family: var(--hand-loose);
    font-size: 16px;
    transition: transform 0.15s;
  }
  .wfx .nl-form button:hover{ transform: translateX(2px); }
  .wfx .footer-newsletter .nl-fineprint{
    margin-top: 14px;
    font-size: 12px;
    color: rgba(246, 243, 236, 0.55);
    line-height: 1.5;
    max-width: 320px;
  }
  .wfx .footer-newsletter .nl-fineprint a{
    color: rgba(246, 243, 236, 0.85);
    text-decoration: underline;
    text-decoration-style: dashed;
  }
  .wfx .footer-col ul{
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
  }
  .wfx .footer-col a{
    font-family: var(--hand);
    font-size: 14px;
    color: var(--paper);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.15s;
  }
  .wfx .footer-col a:hover{ opacity: 1; text-decoration: underline; text-decoration-style: dashed; }
  .wfx .footer-col .ext::after{
    content: ' ↗';
    font-size: 12px;
    color: var(--accent-amber);
  }

  .wfx .footer-bottom{
    margin-top: 28px;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 18px; flex-wrap: wrap;
  }
  .wfx .footer-legal{
    display: flex; gap: 22px; flex-wrap: wrap;
    font-family: var(--hand);
    font-size: 13px;
    color: rgba(246, 243, 236, 0.65);
  }
  .wfx .footer-legal a{
    color: inherit;
    text-decoration: none;
  }
  .wfx .footer-legal a:hover{ text-decoration: underline; text-decoration-style: dashed; color: var(--paper); }
  .wfx .footer-lang{
    border: 1.5px solid rgba(246, 243, 236, 0.4);
    border-radius: 999px;
    padding: 8px 18px;
    color: var(--paper);
    font-family: var(--hand-loose);
    font-size: 13px;
    letter-spacing: 0.5px;
    background: transparent;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .wfx .footer-lang:hover{ background: rgba(246, 243, 236, 0.08); }
  .wfx .footer-meta{
    margin-top: 16px;
    font-family: var(--hand);
    font-size: 12px;
    color: rgba(246, 243, 236, 0.55);
    line-height: 1.6;
    max-width: 720px;
  }
  .wfx .footer-meta a{ color: rgba(246, 243, 236, 0.85); text-decoration: underline; text-decoration-style: dashed; }

  @media (max-width: 920px) {
    .wfx .site-footer{ padding: 44px 24px 28px; }
    .wfx .footer-grid{ grid-template-columns: 1fr 1fr; }
    .wfx .footer-newsletter{ grid-column: 1 / -1; }
    .wfx .footer-bottom{ flex-direction: column; align-items: stretch; }
    .wfx .footer-lang{ align-self: flex-start; }
  }

  /* responsive squish */
  .wfx @media (max-width: 920px){
    .hero-row, .tab-panel, .subs-grid, .poll-grid, .hb-feature, .panel-head, .hero-copy, .collage, .antarctica-grid { grid-template-columns: 1fr; }
    .tab-panel { grid-template-columns: 1fr 1fr; }
    .collage .hero-photo, .collage .chart-card, .collage .stat-card, .collage .quote-card { grid-column: 1; grid-row: auto; }
    .gallery-grid { columns: 2; }
    .steps-row { grid-template-columns: repeat(4, 1fr); }
  }