/*
 * World Liberty Fugitive Ink. One stylesheet for every page.
 * Source: site/site.css. build.mjs copies it to public/assets/site.css.
 *
 * Order: fonts, base, chrome (header, buttons, footer), home page sections,
 * shop forms, document-page classes, motion, small screens.
 * Every class is prefixed wlfi-. The document-page classes are listed in
 * src/shell.js.
 */

/* ------------------------------------------------------------------ fonts */
/* Latin subsets only, served from this origin. Licences: /assets/fonts/LICENSES.txt */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin.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;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-mono-400-latin.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;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-mono-500-latin.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;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin.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;
}

/* ------------------------------------------------------------------- base */

:root {
  --wlfi-ink: #1C1917;
  --wlfi-panel: #292524;
  --wlfi-line: #3A3532;
  --wlfi-gold: #E7AC08;
  --wlfi-pale: #FEED8B;
  --wlfi-orange: #FF4800;
  --wlfi-paper: #FAFAF9;
  --wlfi-soft: #D7D3D0;
  --wlfi-gutter: 32px;
  --wlfi-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --wlfi-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.wlfi-body {
  margin: 0;
  background: #1C1917;
  color: #FAFAF9;
  font-family: 'DM Sans', system-ui, sans-serif;
}

img, svg, video, canvas, iframe { max-width: 100%; }
img { height: auto; }

p, li, h1, h2, h3, h4, blockquote, label, dd, dt, figcaption { overflow-wrap: anywhere; }

a { color: #FEED8B; }
a:hover { color: #E7AC08; }
::selection { background: #FEED8B; color: #1C1917; }
mark { background: #FEED8B; color: #1C1917; padding: 1px 4px; }

:focus-visible { outline: 3px solid #FEED8B; outline-offset: 3px; }
.wlfi-on-light :focus-visible { outline-color: #1C1917; }
.wlfi-card :focus-visible { outline-color: #FEED8B; }

[hidden] { display: none !important; }

.wlfi-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wlfi-emblem-ink { fill: var(--wlfi-emblem-ink, #1C1917); }

.wlfi-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.wlfi-skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: #E7AC08; color: #1C1917; font-weight: 700; padding: 12px 18px; border-radius: 999px;
}
.wlfi-skip:hover { color: #1C1917; }
.wlfi-skip:focus { top: 12px; }

/* The page column. content-box so the 1320px is the text width, as in the design. */
.wlfi-wrap {
  box-sizing: content-box;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wlfi-gutter);
  padding-right: var(--wlfi-gutter);
}

/* ----------------------------------------------------------------- header */

.wlfi-header { position: relative; z-index: 5; background: #1C1917; border-bottom: 1px solid #3A3532; }
.wlfi-header-in {
  box-sizing: content-box; max-width: 1320px; margin: 0 auto; padding: 18px var(--wlfi-gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.wlfi-brand {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  color: #FAFAF9; text-decoration: none;
  font-family: var(--wlfi-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em;
}
.wlfi-brand:hover { color: #FAFAF9; }
.wlfi-brand svg { flex: none; }
.wlfi-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.wlfi-nav-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px;
  color: #D7D3D0; text-decoration: none; font-weight: 700; font-size: 15px;
}
.wlfi-nav-link:hover { color: #FEED8B; }

/* ---------------------------------------------------------------- buttons */

.wlfi-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 44px; padding: 12px 24px; border: 0; border-radius: 999px;
  font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1.3; text-decoration: none; cursor: pointer;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s;
}
.wlfi-btn:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 #FEED8B; }
.wlfi-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #FEED8B; }
.wlfi-btn:focus-visible { outline: 3px solid #FEED8B; outline-offset: 3px; }
.wlfi-on-light .wlfi-btn:focus-visible { outline-color: #1C1917; }
.wlfi-card .wlfi-btn:focus-visible { outline-color: #FEED8B; }

.wlfi-btn-primary,
.wlfi-btn-primary:hover,
.wlfi-btn-primary:focus-visible { background: #E7AC08; color: #1C1917; }

.wlfi-btn-quiet,
.wlfi-btn-quiet:hover,
.wlfi-btn-quiet:focus-visible { background: #1C1917; color: #FAFAF9; border: 2px solid #4A4440; padding: 10px 22px; }
.wlfi-btn-quiet:hover, .wlfi-btn-quiet:focus-visible { border-color: #FEED8B; }

.wlfi-btn:disabled,
.wlfi-btn[aria-disabled="true"],
.wlfi-btn:disabled:hover,
.wlfi-btn[aria-disabled="true"]:hover {
  background: #57534E; color: #FAFAF9; cursor: not-allowed; transform: none; box-shadow: none;
}
.wlfi-btn-quiet:disabled,
.wlfi-btn-quiet[aria-disabled="true"],
.wlfi-btn-quiet:disabled:hover,
.wlfi-btn-quiet[aria-disabled="true"]:hover { background: #292524; color: #A8A29E; border-color: #3A3532; }

.wlfi-btn-block { width: 100%; }
.wlfi-btn-nav { margin-left: 8px; padding: 10px 22px; }
/* display: block, not flex: the label has a tagged price inside it and flex would eat the spaces around it. */
.wlfi-btn-hero { display: block; padding: 20px 34px; font-size: 18px; line-height: normal; }
.wlfi-btn-quiet.wlfi-btn-hero { padding: 18px 30px; }
.wlfi-btn-buy {
  margin-top: 18px; width: 100%; min-height: 64px;
  font-family: var(--wlfi-display); font-weight: 800; font-size: 24px;
}

/* ------------------------------------------------------------------- hero */

.wlfi-hero { position: relative; background: #1C1917; min-height: 794px; overflow: hidden; }

.wlfi-scene { display: block; pointer-events: none; max-width: none; }
.wlfi-scene-hero { position: absolute; top: 0; right: 0; width: 62%; height: 100%; z-index: 3; }
.wlfi-scene-fixed { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 40; }

.wlfi-coin { position: absolute; z-index: 1; top: calc(54% - 40px); right: 30%; width: 0; height: 0; }
.wlfi-coin-ring {
  box-sizing: content-box;
  position: absolute; left: 0; width: min(620px, 44vw); height: min(620px, 44vw);
  transform: translate(50%, -50%);
  border-radius: 50%; background: #E7AC08; border: 10px solid #292524;
  box-shadow: 0 0 0 3px #E7AC08, 0 0 0 14px #1C1917, 0 0 0 16px #3A3532;
  display: flex; align-items: center; justify-content: center;
}
.wlfi-coin-ring svg { width: 61.3%; height: auto; }

.wlfi-hero-in { position: relative; z-index: 2; padding-top: 72px; padding-bottom: 140px; pointer-events: none; }
.wlfi-hero-pill {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  background: #3B2A12; color: #FEED8B; border: 2px solid #733D12; border-radius: 999px;
  padding: 6px 8px 6px 20px; font-weight: 700; font-size: 16px; text-decoration: none;
}
.wlfi-hero-pill:hover { color: #FEED8B; border-color: #E7AC08; }
.wlfi-hero-pill-cta { border: 2px solid #FEED8B; border-radius: 999px; padding: 4px 14px; white-space: nowrap; }
.wlfi-hero-caption {
  position: absolute; z-index: 2; left: var(--wlfi-gutter); right: var(--wlfi-gutter); bottom: 28px; margin: 0;
  font-family: var(--wlfi-mono); font-size: 13px; color: #D7D3D0; pointer-events: none;
}

/* Shown instead of the 3D bottle when WebGL is missing, or when scripts are off. */
.wlfi-hero-fallback {
  position: absolute; z-index: 2; right: 7%; top: 50%; transform: translateY(-50%);
  width: min(40vw, 560px); aspect-ratio: 4 / 3; object-fit: cover;
  border: 2px solid #E7AC08; border-radius: 28px; box-shadow: 10px 10px 0 #FEED8B;
}

/* ------------------------------------------------------------------- tape */

.wlfi-tape { position: relative; z-index: 6; height: 230px; margin-top: -40px; overflow-x: clip; }
@supports not (overflow-x: clip) { .wlfi-tape { overflow: hidden; } }
.wlfi-tape-a { position: absolute; left: -60px; right: -60px; top: 20px; transform: rotate(-2.6deg); box-shadow: 0 18px 0 rgba(0, 0, 0, 0.45); }
.wlfi-tape-b { position: absolute; left: -60px; right: -60px; top: 128px; transform: rotate(1.9deg); }
.wlfi-hazard { height: 16px; background: repeating-linear-gradient(-45deg, #1C1917 0 16px, #FEED8B 16px 32px); }

.wlfi-band { overflow: hidden; white-space: nowrap; }
.wlfi-band-top { background: #FF4800; padding: 14px 0; }
.wlfi-band-mid { background: #FEED8B; border-top: 4px solid #1C1917; border-bottom: 4px solid #1C1917; padding: 10px 0; }
.wlfi-band-footer { background: #FEED8B; border-top: 4px solid #1C1917; padding: 14px 0; }

.wlfi-marq, .wlfi-marq-rev { display: inline-flex; line-height: 1; text-transform: uppercase; color: #1C1917; }
.wlfi-marq-top { gap: 36px; font-family: var(--wlfi-display); font-weight: 800; font-size: 78px; letter-spacing: -0.04em; }
.wlfi-marq-mid { gap: 28px; font-family: var(--wlfi-mono); font-weight: 500; font-size: 30px; }
.wlfi-marq-footer { gap: 32px; font-family: var(--wlfi-display); font-weight: 800; font-size: 40px; }

/* ------------------------------------------------------------ shared type */

.wlfi-display { margin: 0; font-family: var(--wlfi-display); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; }
.wlfi-d-hero { margin: 28px 0 0; max-width: 900px; color: #FEED8B; font-size: clamp(84px, 12.5vw, 196px); line-height: 0.84; letter-spacing: -0.05em; }
.wlfi-d-section { font-size: clamp(56px, 7vw, 104px); }
.wlfi-d-box { font-size: clamp(56px, 7vw, 96px); }
.wlfi-d-buy { font-size: clamp(80px, 12vw, 180px); line-height: 0.82; letter-spacing: -0.05em; }
.wlfi-d-hat { font-size: clamp(72px, 10vw, 150px); line-height: 0.84; letter-spacing: -0.05em; }

.wlfi-tagline { margin: 18px 0 56px; font-family: var(--wlfi-display); font-weight: 800; font-size: clamp(32px, 4vw, 52px); line-height: 1; letter-spacing: -0.03em; color: #FEED8B; }
.wlfi-quote { margin: 0; font-family: var(--wlfi-display); font-weight: 800; font-size: 46px; letter-spacing: -0.03em; color: #FEED8B; }
.wlfi-pill { margin: 0; display: inline-block; border-radius: 999px; padding: 8px 18px; font-weight: 700; font-size: 15px; }

.wlfi-grid { display: grid; }
.wlfi-grid > * { min-width: 0; }
.wlfi-grid-steps { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; }
.wlfi-grid-receipts { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 48px 28px; }
.wlfi-grid-clauses { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 24px; }

/* ------------------------------------------------------------- inkonomics */

/* The stats are cut-paper slips now: see "cut paper" at the end of this file. */

.wlfi-sim {
  margin-top: 28px; background: #1C1917; border: 2px solid #E7AC08; border-radius: 28px; padding: 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 32px 64px;
}
.wlfi-range { width: 100%; height: 44px; accent-color: #E7AC08; cursor: pointer; }
.wlfi-sim-result {
  margin: 6px 0 0; font-family: var(--wlfi-display); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: #FEED8B;
  font-size: clamp(30px, 6vw, 84px);
  font-size: clamp(max(30px, min(48px, 8.6vw)), 6vw, 84px);
  overflow-wrap: normal;
}

/* -------------------------------------------------------------------- box */

.wlfi-box-photo {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 2px solid #E7AC08; border-radius: 28px; box-shadow: 10px 10px 0 #FEED8B;
}
.wlfi-box-item { display: flex; align-items: center; gap: 18px; background: #292524; border: 1px solid #3A3532; border-radius: 20px; padding: 18px 22px; }
.wlfi-box-num {
  flex: none; width: 48px; height: 48px; border-radius: 50%; background: #E7AC08; color: #1C1917;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px;
}
.wlfi-box-text { min-width: 0; font-size: 19px; font-weight: 500; }

/* ---------------------------------------------------------------- roadmap */

.wlfi-step-num {
  width: 88px; height: 88px; border-radius: 50%; background: #1C1917; color: #FEED8B;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wlfi-display); font-weight: 800; font-size: 40px;
}
.wlfi-step-text { margin: 20px 0 0; font-family: var(--wlfi-display); font-weight: 800; font-size: 46px; letter-spacing: -0.03em; }
.wlfi-step-text-small { font-size: 32px; line-height: 1.05; letter-spacing: -0.02em; }

/* --------------------------------------------------------------- receipts */

.wlfi-receipt { font-family: var(--wlfi-mono); }
.wlfi-receipt .wlfi-cut-in { background-color: #F5F5F4; color: #1C1917; padding: 32px 26px 42px; }
.wlfi-receipt-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #57534E; border-bottom: 2px dashed #1C1917; padding-bottom: 12px; }
.wlfi-receipt-title { margin: 16px 0 0; font-family: var(--wlfi-display); font-weight: 800; font-size: 28px; line-height: 1.05; letter-spacing: -0.02em; }
.wlfi-receipt-line { margin: 0; font-size: 14px; line-height: 1.55; }
.wlfi-receipt-tag { font-weight: 500; padding: 1px 6px; }
.wlfi-receipt-source { margin: 18px 0 0; padding-top: 12px; border-top: 2px dashed #1C1917; font-size: 12px; line-height: 1.5; color: #57534E; }

/* ------------------------------------------------------------- fine print */

.wlfi-clause .wlfi-cut-in { background-color: #FAFAF9; color: #1C1917; padding: 32px 30px 36px; }
.wlfi-clause-label { margin: 0; display: inline-block; background: #1C1917; color: #FEED8B; padding: 4px 10px; font-family: var(--wlfi-mono); font-weight: 500; font-size: 13px; }
.wlfi-clause-quote { margin: 18px 0 0; font-family: var(--wlfi-mono); font-size: 15px; line-height: 1.7; }
.wlfi-clause-plain { margin: 16px 0 0; font-family: var(--wlfi-display); font-weight: 800; font-size: clamp(22px, 2.1vw, 27px); line-height: 1.14; letter-spacing: -0.01em; color: #1C1917; }
.wlfi-clause-quote { margin-top: 16px; }
.wlfi-clause-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed #A8A29E; font-size: 16px; line-height: 1.5; color: #44403C; }

.wlfi-ours {
  margin-top: 56px; background: #FF4800; color: #1C1917; border-radius: 28px; padding: 36px 40px; box-shadow: 10px 10px 0 #FEED8B;
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px;
}
.wlfi-ours-title { margin: 0; font-family: var(--wlfi-display); font-weight: 800; font-size: 44px; letter-spacing: -0.03em; }
.wlfi-ours-list { margin: 0; padding-left: 26px; font-family: var(--wlfi-display); font-weight: 700; font-size: 24px; line-height: 1.45; }

/* -------------------------------------------------------------------- faq */

.wlfi-faq-item { border: 2px solid #E7AC08; border-radius: 22px; background: #1C1917; overflow: hidden; }
.wlfi-faq-btn {
  width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; background: #1C1917; color: #FAFAF9; border: 0; cursor: pointer; text-align: left;
  font-family: var(--wlfi-display); font-weight: 700; font-size: 26px;
}
.wlfi-faq-btn:hover { background: #34302C; color: #FAFAF9; }
.wlfi-faq-btn:focus-visible { background: #34302C; color: #FAFAF9; outline: 3px solid #FEED8B; outline-offset: -6px; border-radius: 20px; }
.wlfi-faq-btn > span { min-width: 0; overflow-wrap: anywhere; }
.wlfi-faq-icon { flex: none; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.wlfi-faq-btn[aria-expanded="true"] .wlfi-faq-icon { transform: rotate(45deg); }
.wlfi-faq-a p { margin: 0; padding: 0 24px 24px; font-size: 20px; line-height: 1.5; color: #D7D3D0; }
/* Without scripts nothing can open the answers, so they are all shown. */
@media (scripting: none) {
  .wlfi-faq-a[hidden] { display: block !important; }
  .wlfi-faq-icon { display: none; }
  .wlfi-hero-fallback[hidden] { display: block !important; }
}

/* ------------------------------------------------------------- shop cards */

.wlfi-card { min-width: 0; background: #1C1917; color: #FAFAF9; border-radius: 28px; padding: 32px; }
.wlfi-buy-card { max-width: 100%; }
/* On a document page the card sits on the page colour, so it needs its own edge. */
.wlfi-doc .wlfi-card { background: #292524; border: 1px solid #3A3532; }
.wlfi-buy-row { margin-top: 22px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.wlfi-buy-meta { margin: 0; min-width: 0; font-family: var(--wlfi-mono); font-size: 14px; color: #D7D3D0; }
.wlfi-buy-price { margin: 0; flex: none; font-family: var(--wlfi-display); font-weight: 800; font-size: 44px; color: #FEED8B; }
.wlfi-buy-fields { margin-top: 12px; display: grid; gap: 14px; }
.wlfi-buy-fields > * { min-width: 0; }
.wlfi-buy-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
.wlfi-buy-line { margin: 12px 0 0; font-size: 14px; line-height: 1.5; text-align: center; color: #FAFAF9; }
.wlfi-buy-line > [data-wlfi-shipping] { display: block; }
.wlfi-buy-small { margin: 12px 0 0; font-size: 14px; line-height: 1.5; text-align: center; color: #D7D3D0; }
.wlfi-buy-notice { margin-bottom: 18px; }

/* ------------------------------------------------------------------ forms */

.wlfi-form { display: grid; gap: 18px; max-width: 520px; }
.wlfi-form > * { min-width: 0; }
.wlfi-field { display: grid; gap: 6px; min-width: 0; }
.wlfi-field-row { display: flex; align-items: center; gap: 10px; }
.wlfi-label { font-size: 14px; line-height: 1.4; font-weight: 700; color: #D7D3D0; }
.wlfi-input, .wlfi-select {
  width: 100%; max-width: 100%; min-height: 44px; padding: 10px 12px;
  font-family: inherit; font-size: 16px; line-height: 1.3; color: #FAFAF9;
  background: #292524; border: 2px solid #7A726C; border-radius: 12px;
}
.wlfi-select { width: auto; min-width: 76px; cursor: pointer; }
.wlfi-input::placeholder { color: #A8A29E; opacity: 1; }
.wlfi-input:hover, .wlfi-select:hover { border-color: #D7D3D0; }
.wlfi-input:focus-visible, .wlfi-select:focus-visible { border-color: #FEED8B; outline: 3px solid #FEED8B; outline-offset: 2px; }
.wlfi-input:disabled, .wlfi-select:disabled { background: #1C1917; color: #A8A29E; border-color: #3A3532; cursor: not-allowed; }
textarea.wlfi-input { min-height: 120px; resize: vertical; }
.wlfi-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 700; color: #FAFAF9; cursor: pointer; }
.wlfi-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #E7AC08; cursor: pointer; }
.wlfi-check:has(input:disabled) { color: #A8A29E; cursor: not-allowed; }
.wlfi-hint { margin: 0; font-size: 14px; line-height: 1.5; color: #D7D3D0; }
.wlfi-error { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 700; color: #FFB4A1; }
.wlfi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wlfi-turnstile { min-width: 0; max-width: 100%; }
.wlfi-turnstile:empty { display: none; }

.wlfi-notice {
  margin: 0 0 24px; padding: 14px 18px; border: 2px solid #E7AC08; border-radius: 16px;
  background: #292524; color: #FAFAF9; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere;
}
.wlfi-notice-good { border-color: #FEED8B; background: #3B2A12; color: #FAFAF9; }
.wlfi-notice-bad { border-color: #FF4800; background: #3A1508; color: #FAFAF9; }
.wlfi-notice > :first-child { margin-top: 0; }
.wlfi-notice > :last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- footer */

.wlfi-footer { background: #1C1917; color: #FAFAF9; }
.wlfi-footer-in {
  box-sizing: content-box; max-width: 1320px; margin: 0 auto; padding: 96px var(--wlfi-gutter) 56px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px;
}
.wlfi-footer-in > * { min-width: 0; }
.wlfi-footer-notice { font-size: 14px; line-height: 1.65; color: #D7D3D0; }
.wlfi-footer-links { margin: 16px 0 0; }
/* The joke is that it cannot be read until it is selected. It is meant to match the background. */
.wlfi-invisible-ink { margin: 0; min-height: 120px; padding-top: 16px; color: #1C1917; font-size: 14px; line-height: 1.6; }

/* --------------------------------------------------------- document pages */

.wlfi-doc { box-sizing: content-box; max-width: 760px; margin: 0 auto; padding: 72px var(--wlfi-gutter) 104px; }
.wlfi-doc-wide { max-width: 1100px; }
.wlfi-doc a:not(.wlfi-btn) { color: #FEED8B; text-underline-offset: 3px; overflow-wrap: anywhere; }
.wlfi-doc a:not(.wlfi-btn):hover { color: #E7AC08; }

.wlfi-kicker {
  display: inline-block; margin: 0 0 20px; padding: 6px 16px; border-radius: 999px;
  background: #3B2A12; color: #FEED8B; border: 2px solid #733D12; font-weight: 700; font-size: 14px;
}
.wlfi-h1 { margin: 0 0 24px; font-family: var(--wlfi-display); font-weight: 800; font-size: clamp(40px, 7vw, 72px); line-height: 0.95; letter-spacing: -0.04em; color: #FEED8B; }
.wlfi-h2 { margin: 48px 0 12px; font-family: var(--wlfi-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; letter-spacing: -0.02em; color: #FAFAF9; }
.wlfi-h3 { margin: 32px 0 8px; font-family: var(--wlfi-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 22px); line-height: 1.2; color: #FAFAF9; }
.wlfi-lead { margin: 0 0 24px; font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; color: #D7D3D0; }
.wlfi-p { margin: 0 0 16px; font-size: 17px; line-height: 1.65; color: #F5F5F4; }
.wlfi-small { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #D7D3D0; }
.wlfi-mono { font-family: var(--wlfi-mono); }
.wlfi-list { margin: 0 0 16px; padding-left: 24px; font-size: 17px; line-height: 1.65; color: #F5F5F4; }
.wlfi-list li + li { margin-top: 6px; }
.wlfi-rule { border: 0; border-top: 1px solid #3A3532; margin: 40px 0; }

.wlfi-table-wrap { margin: 0 0 24px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #3A3532; border-radius: 16px; background: #1C1917; }
.wlfi-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.45; color: #F5F5F4; }
.wlfi-table th, .wlfi-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #3A3532; }
.wlfi-table thead th { background: #292524; color: #E7AC08; font-family: var(--wlfi-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.wlfi-table tbody tr:last-child > * { border-bottom: 0; }
.wlfi-table .wlfi-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ----------------------------------------------------------------- motion */

@keyframes wlfi-rv-in { from { opacity: 0; transform: translateY(70px) scale(.96); } to { opacity: 1; transform: var(--wlfi-tilt, none); } }
@keyframes wlfi-marq { to { transform: translateX(-50%); } }
@keyframes wlfi-bob { 50% { transform: translateY(-16px) rotate(-3deg); } }
@keyframes wlfi-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes wlfi-dip { 0% { transform: none; } 30% { transform: translateY(90px) rotate(-18deg); } 65% { transform: translateY(-18px) rotate(6deg); } 100% { transform: none; } }
@keyframes wlfi-splash { 0% { transform: scale(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes wlfi-scribble { to { stroke-dashoffset: 0; } }
@keyframes wlfi-coin { to { transform: translate(50%, -50%) rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .wlfi-rv { animation: wlfi-rv-in linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
  }
  .wlfi-marq { animation: wlfi-marq 18s linear infinite; }
  .wlfi-marq-rev { animation: wlfi-marq 22s linear infinite reverse; }
  .wlfi-bob { animation: wlfi-bob 4.2s ease-in-out infinite; }
  .wlfi-squid:hover { animation: wlfi-wiggle .5s ease-in-out 2; }
  .wlfi-dipping { animation: wlfi-dip .95s cubic-bezier(.3, 1.3, .5, 1); }
  .wlfi-splashing { animation: wlfi-splash .9s ease-out; }
  .wlfi-scribble path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: wlfi-scribble 2.4s ease-in-out infinite alternate; }
  .wlfi-coin-ring { animation: wlfi-coin 60s linear infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .wlfi-btn, .wlfi-cut, .wlfi-faq-icon { transition: none; }
  .wlfi-btn:hover, .wlfi-btn:active { transform: none; }
}

/* ---------------------------------------------------------- small screens */

@media (max-width: 820px) {
  .wlfi-scene-hero { width: 100%; }
  .wlfi-coin { display: none; }
  .wlfi-hero-fallback {
    position: relative; display: block; right: auto; top: auto; transform: none;
    width: calc(100% - 2 * var(--wlfi-gutter)); margin: -72px auto 96px;
  }
}

@media (max-width: 480px) {
  :root { --wlfi-gutter: 20px; }
  .wlfi-header-in { padding-top: 12px; padding-bottom: 12px; gap: 6px 16px; }
  .wlfi-nav { gap: 0 2px; }
  .wlfi-nav-link { padding: 10px 9px; }
  .wlfi-btn-nav { margin: 6px 0 4px 9px; }
  .wlfi-card { padding: 22px; border-radius: 24px; }
  .wlfi-sim { padding: 24px; }
  .wlfi-ours { padding: 28px 24px; }
  .wlfi-faq-btn { padding: 16px 18px; font-size: 22px; }
  .wlfi-faq-a p { padding: 0 18px 20px; font-size: 18px; }
  .wlfi-doc { padding-top: 48px; padding-bottom: 72px; }
}

/* ------------------------------------------------ ink soaking into the page */
/* One fixed layer, above every section's background and below its content.
   Sections keep their backgrounds where they are; what is inside them is
   lifted over the ink, so text and cards are never stained. :where() keeps
   these rules at zero specificity, so anything already positioned stays put. */
.wlfi-ink { position: fixed; top: 0; left: 0; width: 100%; height: 100%; max-width: none; z-index: 1; pointer-events: none; }
:where(.wlfi-has-ink main > section > *) { position: relative; z-index: 2; }
:where(.wlfi-has-ink main > :not(section):not(.wlfi-hero-track), .wlfi-has-ink .wlfi-hero > *, .wlfi-has-ink .wlfi-footer, .wlfi-has-ink .wlfi-footer ~ *) { position: relative; z-index: 2; }

/* ------------------------------------------------- the bottle on its table */
/* When the 3D bottle is running, the hero is pinned for a stretch of scroll
   (the track is taller than the hero by --wlfi-runway). That stretch is the
   resistance: the page holds still while the scroll pushes the bottle along
   the table. At the end of it the bottle goes over the edge and the page
   lets go. Without the bottle none of this applies and the hero is as before. */
.wlfi-tabletop { display: none; }
.wlfi-has-table { --wlfi-runway: 70vh; }
/* A real block, not padding: a pinned element may only travel within its parent's content. */
.wlfi-has-table .wlfi-hero-track::after { content: ""; display: block; height: var(--wlfi-runway); }
/* The hero's background is the page's own colour, so it can be see-through:
   a pinned element is its own layer, and this lets the ink show beneath it. */
.wlfi-has-table .wlfi-hero { position: sticky; top: 0; z-index: 2; background: transparent; overflow: clip; }
.wlfi-has-table .wlfi-tabletop {
  display: block; position: absolute; z-index: 1;
  top: min(600px, 68svh); right: 11%; width: 40%; height: 22px;
  border-top: 3px solid #E7AC08; border-radius: 3px 3px 12px 12px;
  background: linear-gradient(#5A3A16, #2B1B0A);
  box-shadow: 0 22px 30px -12px rgba(0, 0, 0, 0.75);
}
/* The bottle's shadow on the table. The scene moves and fades it. */
.wlfi-has-table .wlfi-tabletop::before {
  content: ""; position: absolute; top: -9px; left: var(--wlfi-shadow-x, 50%);
  width: var(--wlfi-shadow-w, 120px); height: 12px; margin-left: calc(var(--wlfi-shadow-w, 120px) / -2);
  border-radius: 50%; background: rgba(0, 0, 0, 0.6); filter: blur(5px);
  opacity: var(--wlfi-shadow, 0);
}
.wlfi-has-table .wlfi-coin { display: none; }

/* ------------------------------------------------------------ phone menu */
.wlfi-menu-btn { display: none; }
.wlfi-menu-btn-bars { display: block; position: relative; flex: none; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }

@media (max-width: 820px) {
  .wlfi-menu-ready .wlfi-menu-btn {
    display: inline-flex; align-items: center; gap: 12px; margin-left: auto;
    min-height: 48px; padding: 0 18px; border-radius: 999px; cursor: pointer;
    border: 2px solid #4A4440; background: #1C1917; color: #FAFAF9;
    font: inherit; font-weight: 700; font-size: 16px;
  }
  .wlfi-menu-ready .wlfi-menu-btn:hover { background: #34302C; color: #FAFAF9; border-color: #7A726C; }
  .wlfi-menu-ready .wlfi-menu-btn:focus-visible { background: #34302C; color: #FAFAF9; outline: 3px solid #FEED8B; outline-offset: 2px; }
  .wlfi-menu-ready .wlfi-menu-btn[aria-expanded="true"] { background: #FEED8B; color: #1C1917; border-color: #FEED8B; }
  .wlfi-menu-ready .wlfi-menu-btn[aria-expanded="true"]:hover { background: #E7AC08; color: #1C1917; border-color: #E7AC08; }
  .wlfi-menu-ready .wlfi-menu-btn[aria-expanded="true"] .wlfi-menu-btn-bars { box-shadow: none; transform: rotate(45deg); }
  .wlfi-menu-ready .wlfi-menu-btn[aria-expanded="true"] .wlfi-menu-btn-bars::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: currentColor; transform: rotate(90deg); }

  .wlfi-menu-ready .wlfi-header-in { flex-wrap: wrap; gap: 0 16px; }
  .wlfi-menu-ready .wlfi-nav { display: none; flex: 1 0 100%; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 10px 0 14px; }
  .wlfi-menu-ready .wlfi-nav-open .wlfi-nav { display: flex; }
  .wlfi-menu-ready .wlfi-nav-link {
    display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 8px 2px;
    border-bottom: 1px solid #3A3532; color: #FAFAF9;
    font-family: var(--wlfi-display); font-weight: 800; font-size: 24px; letter-spacing: -0.01em;
  }
  .wlfi-menu-ready .wlfi-nav-link::after { content: "\2192"; color: #E7AC08; font-weight: 500; }
  .wlfi-menu-ready .wlfi-nav-link:hover { color: #FEED8B; }
  .wlfi-menu-ready .wlfi-btn-nav { margin: 18px 0 0; width: 100%; min-height: 54px; justify-content: center; font-size: 17px; }

  /* Phone: the table is a stage across the top of the hero, and the words start below it. */
  .wlfi-has-table { --wlfi-runway: 62svh; }
  .wlfi-has-table .wlfi-tabletop { top: calc(44svh - 22px); left: var(--wlfi-gutter); right: 24%; width: auto; }
  .wlfi-has-table .wlfi-hero-in { padding-top: calc(44svh + 44px); }
}
@media (prefers-reduced-motion: reduce) { .wlfi-menu-btn-bars { transition: none; } }
@media (prefers-reduced-motion: reduce) { .wlfi-ink { display: none; } }

/* ------------------------------------------------------------ cut paper */
/* A piece of paper is two boxes. The inner one is cut to shape with a
   polygon (written by the build, a different cut for every piece). The outer
   one carries the tilt and the shadow, because a shadow drawn on the cut box
   itself would be cut off with it. */
.wlfi-cut {
  position: relative; min-width: 0; transform: var(--wlfi-tilt, none);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4)) drop-shadow(5px 11px 9px rgba(0, 0, 0, 0.42));
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), filter .35s;
}
/* Picking a piece up: it straightens and its shadow falls further away.
   !important because the scroll-reveal animation would otherwise hold the transform. */
.wlfi-cut:hover {
  transform: translateY(-7px) rotate(0deg) !important;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4)) drop-shadow(11px 24px 16px rgba(0, 0, 0, 0.5));
}
.wlfi-cut-in {
  position: relative; height: 100%;
  /* paper fibre: two faint sets of strands, not quite square to the sheet */
  background-image:
    repeating-linear-gradient(93deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(2deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 5px);
}

/* Inkonomics: slips laid out on the cloth, overlapping, none the same size. */
.wlfi-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 56px; }
.wlfi-slip { --wlfi-ink: #1C1917; }
.wlfi-slip .wlfi-cut-in { padding: 30px 30px 36px; color: var(--wlfi-ink); }
.wlfi-slip-gold .wlfi-cut-in { background-color: #E7AC08; }
.wlfi-slip-orange .wlfi-cut-in { background-color: #FF4800; }
.wlfi-slip-pale .wlfi-cut-in { background-color: #FEED8B; }
/* The dark slips are brown kraft paper, printed in cream. */
.wlfi-slip-dark { --wlfi-ink: #FAFAF9; }
.wlfi-slip-dark .wlfi-cut-in { background-color: #733D12; }
.wlfi-slip-label {
  margin: 0; padding-bottom: 8px; border-bottom: 2px solid currentColor;
  font-weight: 700; font-size: 16px; line-height: 1.2;
}
.wlfi-slip-value {
  margin: 18px 0 0; font-family: var(--wlfi-display); font-weight: 800;
  font-size: clamp(38px, 10.5vw, 60px); line-height: 0.94; letter-spacing: -0.035em;
  text-wrap: balance; overflow-wrap: anywhere;
}
.wlfi-slip-note { margin: 16px 0 0; max-width: 30ch; font-size: 17px; line-height: 1.42; }
/* A strip of tape holds each slip down. */
.wlfi-slip::before {
  content: ""; position: absolute; z-index: 1; top: -11px; left: var(--wlfi-tape-x, 38%);
  width: 84px; height: 25px; background: rgba(250, 250, 249, 0.3); transform: rotate(var(--wlfi-tape-r, -4deg));
}
.wlfi-slip:nth-child(3n)::before { --wlfi-tape-x: 62%; --wlfi-tape-r: 5deg; }
.wlfi-slip:nth-child(4n + 1)::before { --wlfi-tape-x: 18%; --wlfi-tape-r: -7deg; }

/* The slip with a window cut out of it. Its value is not printed on the paper:
   it sits in the hole, on the cloth, where the ink shows through. */
.wlfi-slip-window .wlfi-cut-in { min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; }
.wlfi-slip-window .wlfi-slip-value {
  position: absolute; left: 9%; right: 9%; top: 31%; height: 36%; margin: 0;
  display: grid; place-items: center; text-align: center; color: #FEED8B;
}

/* Phone: a loose pile. Each slip is narrower than the column and they overlap. */
.wlfi-board > .wlfi-slip { margin-right: 8%; }
.wlfi-board > .wlfi-slip:nth-child(even) { margin-right: 0; margin-left: 9%; }
.wlfi-board > .wlfi-slip + .wlfi-slip { margin-top: -14px; }

@media (min-width: 700px) {
  .wlfi-board { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 22px; }
  .wlfi-board > .wlfi-slip, .wlfi-board > .wlfi-slip:nth-child(even) { margin: 0; }
  .wlfi-board > .wlfi-slip { grid-column: span 3; }
  .wlfi-board > .wlfi-slip:nth-child(1) { grid-column: 1 / 5; }
  .wlfi-board > .wlfi-slip:nth-child(2) { grid-column: 5 / 7; margin-top: 30px; }
  .wlfi-board > .wlfi-slip:nth-child(3) { grid-column: 1 / 4; }
  .wlfi-board > .wlfi-slip:nth-child(4) { grid-column: 4 / 7; margin-top: -24px; }
  .wlfi-board > .wlfi-slip:nth-child(5) { grid-column: 1 / 3; }
  .wlfi-board > .wlfi-slip:nth-child(6) { grid-column: 3 / 7; }
  .wlfi-board > .wlfi-slip:nth-child(8) { margin-top: 22px; }
  .wlfi-slip-value { font-size: clamp(34px, 5.2vw, 52px); }
}

@media (min-width: 1080px) {
  .wlfi-board { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px 26px; align-items: start; }
  .wlfi-board > .wlfi-slip:nth-child(1) { grid-column: 1 / 6; grid-row: 1 / 3; margin-top: 18px; }
  .wlfi-board > .wlfi-slip:nth-child(2) { grid-column: 6 / 10; grid-row: 1; margin: 0; }
  .wlfi-board > .wlfi-slip:nth-child(3) { grid-column: 10 / 13; grid-row: 1 / 3; margin-top: 46px; }
  .wlfi-board > .wlfi-slip:nth-child(4) { grid-column: 5 / 10; grid-row: 2; margin: -8px 0 0 34px; }
  .wlfi-board > .wlfi-slip:nth-child(5) { grid-column: 1 / 4; grid-row: 3; margin-top: 6px; }
  .wlfi-board > .wlfi-slip:nth-child(6) { grid-column: 4 / 9; grid-row: 3; margin-top: -30px; }
  .wlfi-board > .wlfi-slip:nth-child(7) { grid-column: 9 / 13; grid-row: 3; margin-top: 4px; }
  .wlfi-board > .wlfi-slip:nth-child(8) { grid-column: 6 / 11; grid-row: 4; margin: -34px 0 0 0; }
  .wlfi-slip-value { font-size: clamp(40px, 3.5vw, 54px); }
  /* The first slip is the headline figure and is set larger. */
  .wlfi-board > .wlfi-slip:nth-child(1) .wlfi-cut-in { padding: 40px 40px 52px; }
  .wlfi-board > .wlfi-slip:nth-child(1) .wlfi-slip-value { font-size: clamp(64px, 7vw, 104px); }
  .wlfi-board > .wlfi-slip:nth-child(1) .wlfi-slip-note { font-size: 20px; }
}