/* =================================================================
   Willow portefeuille: temporary campaign page, offer runs to 31 Dec 2026

   Shared by willow-portefeuille.html and nl/willow-portefeuille.html.

   The page follows the structure of VLAIO's kmo-portefeuille page (section
   tabs, a notice band, a summary card beside the text, one button and a list
   of links) in Willow's colours and type. Everything else is the site's own
   parts (.page-head, .sec-head, .feat-pair, .compare-table, .btn, .cta-card).
   Only what the site has no component for lives here, and each block says why:

   .pf-tabs    Sticky section tabs. The nav has no sub-navigation; scrollspy
               in willow-portefeuille.js marks the section being read.
   .pf-alert   The notice band under the tabs.
   .pf-hero    Split hero: copy left, summary card right. The same "split"
               family as customers and home (see the hero scale in
               styles.css), but those two keep their grid in their own sheets.
   .pf-links   Chevron link list under the button.
   .pf-offer   The summary card: countdown and the facts.
   .pf-timer   Countdown boxes, last thing in the card, driven by
               willow-portefeuille.js.
   .pf-bars    The 70/30 comparison. No chart component exists.
   .pf-note    The founder's note: quote, then portrait and signature.
   .pf-why     The heading across the top, the video and the note below it.
   .pf-video   The video well. The site has no video component (pages that
               show a video style it themselves), and this one is portrait.
   .pf-play    The big play button over the poster. The native bar's play icon
               is small and Chrome draws no large one. The script reveals it, so
               without JavaScript the native controls still work on their own.
   .pf-check   The eligibility checklist panel.
   .faq-*      The pricing page's accordion look, on <details> so it works from
               the keyboard and without JavaScript. faq-item still has no home
               in styles.css; pricing, comparison and two tool pages each carry
               their own copy.
   .pf-band    The paper surface for alternate sections. Pages may not use
               style="", so the band is a class.

   Serif headings are left out on purpose: DM Serif Display is for pull
   quotes only (foundations.md). Every px value below already exists elsewhere
   on the site (check-design E3).

   VLAIO's green, for what the page says about the scheme: the icon in the notice
   band and the kmo-portefeuille's 30% in the bars. vlaio.be's tab bar and buttons
   are #009945 (Kjell's print screen, 2026-10-15); this is the darker shade it
   uses for the active tab (#007d37), which Kjell asked for on 2026-10-19 and which
   carries white text at 5.3:1. The notice band itself stays light blue: a solid
   green band clashed with the blue tab bar (Kjell, 2026-10-19).
   ================================================================= */
:root { --vlaio-green: #007d37; }

/* ---- Section tabs ---- */
.pf-tabs { position: sticky; top: var(--nav-h); z-index: 50; margin-top: var(--nav-h); background: var(--blue); }
.pf-tabs ul { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.pf-tabs ul::-webkit-scrollbar { display: none; }
.pf-tabs a { display: block; padding: 20px 24px; color: var(--white); font-size: 15px; font-weight: 600; white-space: nowrap; transition: background 0.15s; }
.pf-tabs a:hover { background: rgba(12,19,56,0.22); }
.pf-tabs a[aria-current="true"] { background: var(--ink); }
.pf-tabs a:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }

/* ---- Notice band ---- */
.pf-alert { background: var(--blue-soft); border-bottom: 1px solid var(--rule); padding: 20px 0; }
.pf-alert .wrap { display: flex; align-items: center; gap: 20px; }
.pf-alert-icon { flex: none; }
.pf-alert-icon svg { display: block; width: 40px; height: 40px; }
.pf-alert-icon circle { fill: var(--vlaio-green); }
.pf-alert-icon path { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; }
.pf-alert p { font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 110ch; }
.pf-alert a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Split hero ---- */
.page-head.pf-head { padding: 56px 0 64px; }
.pf-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.9fr);
  gap: 56px;
  align-items: start;
}
.pf-hero h1 {
  font-size: var(--hero-h1-split);
  max-width: var(--hero-max-split);
}
.pf-ctas { margin-top: 32px; }
.pf-links { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pf-links a { position: relative; display: inline-block; padding-left: 20px; color: var(--blue); font-size: 17px; font-weight: 600; }
.pf-links a::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.44em;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.pf-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Summary card ---- */
.pf-side { display: flex; flex-direction: column; gap: 24px; }
.pf-offer {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: 0 1px 6px rgba(12,19,56,0.12);
}
.pf-offer h2 { font-size: var(--t-h6); letter-spacing: -0.012em; line-height: 1.25; }
.pf-countdown { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.pf-until { font-size: 14px; color: var(--ink-3); }
.pf-timer { display: flex; gap: 8px; margin-top: 12px; }
.pf-timer[hidden] { display: none; }
.pf-timer span {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  border-radius: var(--r-md);
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
  font-weight: 500;
}
.pf-timer b {
  display: block;
  font-size: var(--t-h5);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pf-ended { margin-top: 12px; padding: 12px 16px; border-radius: var(--r-md); background: var(--cream-2); font-size: 14px; }
.pf-facts { margin: 24px 0 0; border-top: 1px solid var(--rule); }
.pf-fact { margin-top: 20px; }
.pf-fact dt { font-size: 14px; color: var(--ink-3); }
.pf-fact dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.pf-fact dd p + p { margin-top: 8px; }
.pf-card-note { margin-top: 24px; font-size: 13px; color: var(--ink-3); }

/* ---- Alternate surface ---- */
.pf-band { background: var(--paper); }

/* ---- 70/30 bars ----
   The kmo-portefeuille's 30% is VLAIO's green (see the top of this file), so
   the old payer reads as VLAIO next to Willow's blue. */
.pf-bars { display: flex; flex-direction: column; gap: 32px; max-width: 920px; }
.pf-bar-label { font-size: 15px; font-weight: 500; }
.pf-bar { display: flex; height: 64px; margin-top: 12px; border-radius: var(--r-lg); overflow: hidden; }
.pf-bar .pf-you,
.pf-bar .pf-cover {
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.pf-bar .pf-you { flex: 7; background: var(--ink); color: var(--cream); }
.pf-bar .pf-cover { flex: 3; }
.pf-bar.is-old .pf-cover { background: var(--vlaio-green); color: var(--white); }
.pf-bar.is-now .pf-cover { background: var(--blue); color: var(--white); }
.pf-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; padding: 0; font-size: 13px; color: var(--ink-2); }
.pf-legend li { display: inline-flex; align-items: center; gap: 8px; }
.pf-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--ink); }
.pf-legend li.is-old::before { background: var(--vlaio-green); }
.pf-legend li.is-now::before { background: var(--blue); }
.pf-source { margin-top: 32px; font-size: 13px; color: var(--ink-3); }

/* ---- Why Willow does this: the heading, then the video and the founder's note ----
   The heading runs the full width. Under it the video takes 40% and the note
   card 60%, as tall as the video (the card stretches to the row). On a narrow
   screen the order is heading, video, note. */
.pf-why {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-areas: "head head" "video note";
  column-gap: 48px;
}
.pf-why .sec-head { grid-area: head; }
.pf-video { position: relative; grid-area: video; align-self: start; }
.pf-video video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: var(--ink); box-shadow: 0 1px 6px rgba(12,19,56,0.12); }
.pf-play {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  padding: 0;
  border: 4px solid var(--white);
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 4px 24px rgba(12,19,56,0.32);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.pf-play[hidden] { display: none; }
.pf-play:hover { background: var(--blue-deep); transform: scale(1.06); }
.pf-play:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* The triangle's weight sits left of its box, so it is nudged right. */
.pf-play svg { width: 40px; height: 40px; margin-left: 4px; }
.pf-play path { fill: var(--white); stroke: var(--white); stroke-width: 2; stroke-linejoin: round; }
.pf-note {
  grid-area: note;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  margin: 0;
  padding: 40px;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 6px rgba(12,19,56,0.12);
}
.pf-note blockquote { margin: 0; font-size: var(--t-h5); line-height: 1.3; letter-spacing: -0.014em; color: var(--ink); }
.pf-note blockquote p + p { margin-top: 20px; }
.pf-note figcaption { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--ink-3); }
.pf-note figcaption img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.pf-note figcaption strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }

/* ---- Eligibility checklist ---- */
.pf-check {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 32px;
  max-width: 920px;
  box-shadow: 0 1px 6px rgba(12,19,56,0.12);
}
.pf-check p { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.pf-list { list-style: none; margin: 24px 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pf-list li { position: relative; padding-left: 36px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.pf-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  /* The check renders from a fallback font and sits high: see --optical-glyph */
  padding-top: calc(2 * var(--optical-glyph));
}
.pf-check a,
.faq-a a,
.pf-source a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.pf-check .pf-fine { margin-bottom: 0; font-size: 13px; color: var(--ink-3); }

/* ---- Price table: only the highlighted column is new ---- */
.pf-table th:not(:first-child) { text-align: center; }
.pf-table td.pf-now { color: var(--blue); font-weight: 600; }
@media (max-width: 1100px) {
  /* Four short columns fit a phone. The global 580px minimum would push the
     price you actually pay behind a sideways scroll. */
  .compare-table.pf-table { min-width: 0; }
  /* The tab list bleeds to the screen edge and scrolls sideways. */
  .pf-tabs .wrap { padding: 0; }
  /* The video is under 500px tall here, so the note steps down from h5 to h6
     size to stay about as tall as the video. */
  .pf-note blockquote { font-size: var(--t-h6); line-height: 1.4; letter-spacing: -0.012em; }
}
@media (max-width: 1000px) {
  /* Then the heading, the video and the note stack. */
  .pf-why { grid-template-columns: 1fr; grid-template-areas: "head" "video" "note"; row-gap: 40px; }
  .pf-why .sec-head { margin-bottom: 0; }
  .pf-video { max-width: 380px; }
}

/* ---- FAQ accordion (pricing's look, on <details>) ---- */
.faq-list { max-width: 920px; }
.faq-item { border-top: 1px solid var(--rule); padding: 20px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  cursor: pointer;
  list-style: none;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q .indic {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  /* Optically centre the "+": see --optical-plus. */
  padding-top: calc(2 * var(--optical-plus));
  line-height: 1;
  letter-spacing: 0;
  transition: transform 0.2s;
}
.faq-item[open] .indic { background: var(--blue); color: var(--white); transform: rotate(45deg); }
.faq-q:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.faq-a { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }

@media (max-width: 1000px) {
  .pf-hero { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .page-head.pf-head { padding: 40px 0; }
  .pf-tabs a { padding: 16px 18px; }
  .pf-alert { padding: 16px 0; }
  .pf-offer, .pf-check { padding: 24px; }
  .compare-table.pf-table th, .compare-table.pf-table td { padding: 12px 8px; }
  .compare-table.pf-table td.feat { width: auto; }
  .pf-bar { height: 56px; }
  .pf-bar .pf-you, .pf-bar .pf-cover { padding: 0 16px; font-size: 20px; }
  .pf-note { padding: 24px; }
  .pf-note blockquote { font-size: var(--t-body-lg); }
  .pf-play { width: 72px; height: 72px; }
  .pf-play svg { width: 32px; height: 32px; }
  .faq-q { font-size: 17px; gap: 20px; }
}
@media (max-width: 460px) {
  .compare-table.pf-table th { font-size: 11px; letter-spacing: 0.02em; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-q .indic, .pf-tabs a { transition: none; }
  .pf-play { transition: none; }
}