/* Fonts, self-hosted (SIL Open Font License, see fonts/). Weight ranges match what the design asked for. */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600 800; font-display: swap; src: url("fonts/schibsted-grotesk-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600 800; font-display: swap; src: url("fonts/schibsted-grotesk-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: 'Jost'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/jost-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/jost-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; }

html, body { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 86.4px; }
/* The home link always lands on the very top of the page, never just under the bar */
#top { scroll-margin-top: 100vh; }
/* Plum behind the page so sub-pixel edges and overscroll at the bottom match the footer */
html, body { background-color: #3A0F33; }
/* Page scrollbar, mouse and trackpad only: the native bar is hidden and a thin thumb floats
   over the page in a see-through grey, so the page shows through behind it. Touch screens keep their own */
.v4-sb { display: none; }
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  .v4-sb { display: block; position: fixed; top: 0; right: 0; bottom: 0; width: 14.4px; z-index: 40; pointer-events: none; }
  .v4-sb-thumb { position: absolute; top: 0; right: 3.6px; width: 5.4px; min-height: 36px; border-radius: 899.1px; background-color: rgba(120, 112, 120, 0.4); pointer-events: auto; touch-action: none; will-change: transform; transition: width 160ms ease, background-color 220ms ease; }
  .v4-sb-thumb::before { content: ""; position: absolute; top: 0; bottom: 0; left: -5.4px; right: -3.6px; }
  .v4-sb-thumb.is-off { display: none; }
  .v4-sb.is-busy .v4-sb-thumb { background-color: rgba(120, 112, 120, 0.55); }
  .v4-sb .v4-sb-thumb:hover, .v4-sb .v4-sb-thumb.is-drag { width: 8.1px; background-color: rgba(120, 112, 120, 0.7); }
}
@media (prefers-reduced-motion: reduce) { .v4-sb-thumb { transition: none; } }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
/* Display type: Schibsted Grotesk for headings, Jost stays for everything you read */
h1, h2, h3, .v4-display, .v4-faqcard dt, .v4-lname { font-family: 'Schibsted Grotesk', 'Jost', system-ui, sans-serif; font-optical-sizing: auto; }
h2 { font-weight: 700 !important; letter-spacing: -0.025em !important; }
/* Closing headline: the hero headline style, in the same orange spaced capitals */
.v4-join-title { font-weight: 500 !important; letter-spacing: 0.16em !important; }

/* Page frame: full-width sections, edge to edge, divided by hairlines (as in Base Vison). */
.v4-page { padding: 0; min-height: 100vh; display: flex; flex-direction: column; }
/* <main> is a landmark only: its sections lay out as direct children of the page */
.v4-page > main { display: contents; }
/* Headings for screen readers and the document outline only.
   "h2." keeps this ahead of ".v4-card > *", which would put the heading back in the flow */
h2.v4-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Any spare height goes above the closing card's content, so the goddess always stands on the footer */
.v4-page > main > #join { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 0; }
.v4-page > main > #join > div { width: 100%; }
.v4-card { box-sizing: border-box; overflow: hidden; }
.v4-in { max-width: 1116px; margin: 0 auto; box-sizing: border-box; padding: clamp(28.8px, 3.5vw, 43.2px) clamp(18px, 5vw, 57.6px); }

/* Full-width top bar; a hairline and soft shadow appear once the page scrolls */
.v4-nav { position: sticky; top: 0; z-index: 20; background-color: rgba(253,230,217,0.92); backdrop-filter: blur(9px); transition: box-shadow 300ms ease; }
.v4-nav a.v4-navlink { color: #3A0F33; text-decoration: none; display: inline-flex; align-items: center; min-height: 39.6px; transition: color 250ms ease; }
.v4-nav a.v4-navlink:hover { color: #1C6B7A; }

/* One load sequence: headline lines rise out of a mask, then copy, then the stage. */
.v4-mask { display: block; overflow: hidden; padding-bottom: 0.24em; margin-bottom: -0.24em; }
@keyframes v4LineUp { from { transform: translateY(110%); } to { transform: none; } }
.v4-line { display: block; animation: v4LineUp 1100ms cubic-bezier(.16,.8,.24,1) 100ms both; }
.v4-l2 { animation-delay: 260ms; }
@keyframes v4Up { from { opacity: 0; transform: translateY(14.4px); } to { opacity: 1; transform: none; } }
.v4-up { animation: v4Up 800ms cubic-bezier(.2,.7,.2,1) both; }
.v4-a1 { animation-delay: 40ms; } .v4-a3 { animation-delay: 650ms; } .v4-a4 { animation-delay: 820ms; } .v4-a5 { animation-delay: 980ms; }
@keyframes v4Rise { from { opacity: 0; transform: translateY(25.2px); filter: blur(3.6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.v4-goddess { animation: v4Rise 1200ms cubic-bezier(.2,.7,.2,1) 400ms both; }
@keyframes v4Float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14.4px; } }
.v4-float { animation: v4Float 6s ease-in-out 1.6s infinite; }
@keyframes v4Chip { from { opacity: 0; transform: translateY(12.6px) scale(0.96); } to { opacity: 1; transform: none; } }
.v4-chip { animation: v4Chip 700ms cubic-bezier(.2,.7,.2,1) both; }
.v4-c1 { animation-delay: 1300ms; } .v4-c2 { animation-delay: 1550ms; }
@keyframes v4Bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5.4px; } }
.v4-bob1 { animation: v4Bob 5s ease-in-out 2.2s infinite; } .v4-bob2 { animation: v4Bob 6.5s ease-in-out 2.8s infinite; }
@keyframes v4Sway { 0%,100% { transform: skewX(0) rotate(0); } 17% { transform: skewX(-4deg) rotate(-1.5deg); } 31% { transform: skewX(1deg) rotate(.5deg); } 46% { transform: skewX(3.5deg) rotate(1.2deg); } 63% { transform: skewX(-1.5deg) rotate(-.4deg); } 71% { transform: skewX(-3deg) rotate(-1deg); } 88% { transform: skewX(2deg) rotate(.8deg); } }
@keyframes v4Lick { 0%,100% { transform: scale(1,1); } 9% { transform: scale(.96,1.09); } 22% { transform: scale(1.01,.97); } 30% { transform: scale(.98,1.04); } 47% { transform: scale(1.03,.94); } 55% { transform: scale(.97,1.11); } 69% { transform: scale(1.02,.98); } 81% { transform: scale(.99,1.05); } }
@keyframes v4Glow { 0%,100% { filter: brightness(1); } 14% { filter: brightness(1.12) drop-shadow(0 -2px 5.4px rgba(240,74,35,.5)); } 52% { filter: brightness(.95); } 68% { filter: brightness(1.15) drop-shadow(0 -2.7px 9px rgba(240,74,35,.55)); } }
@keyframes v4Ignite { 0% { opacity: 0; transform: scale(0.2, 0.1); } 60% { opacity: 1; transform: scale(1.05, 1.15); } 100% { opacity: 1; transform: none; } }
.v4-flame { transform-origin: 50% 92%; animation: v4Ignite 700ms cubic-bezier(.2,.7,.2,1) 1100ms both; }
.v4-sway { transform-origin: 50% 95%; animation: v4Sway 9.4s ease-in-out 1.4s infinite; }
.v4-lick { transform-origin: 50% 92%; animation: v4Lick 4.3s ease-in-out 1.5s infinite; }
.v4-glow { animation: v4Glow 6.7s ease-in-out 1.6s infinite; }
/* The confirmation takes exactly the space of the form it replaces, so nothing below moves */
.v4-joined { box-sizing: border-box; width: 100%; height: 59.4px; }
@media (min-width: 630px) and (max-width: 792px) { .v4-hero .v4-joined { height: 117px; } }
@media (max-width: 576px) { .v4-joined { height: 117px; } }
/* Joined: a short confetti burst from the confirmation */
.v4-confetti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 2; }
/* Each piece has its own fall time and fades out on its own, so they don't vanish together */
.v4-confetti i { position: absolute; left: 0; top: 0; opacity: 0; animation: v4Confetti var(--t, 3000ms) linear var(--s, 0ms) both, v4ConfettiFade var(--fd, 500ms) ease-in calc(var(--s, 0ms) + var(--f, 2500ms)) both; }
@keyframes v4Confetti { 0% { transform: translate(0, 0) scale(0.4) rotate(0); animation-timing-function: cubic-bezier(.1,.8,.3,1); } 22% { transform: translate(var(--x), var(--y)) scale(1) rotate(calc(var(--r) * 0.3)); animation-timing-function: cubic-bezier(.4,0,.8,.6); } 82% { transform: translate(calc(var(--x) * 1.2), calc(var(--y) + 171px)) rotate(calc(var(--r) * 0.9)); } 100% { transform: translate(calc(var(--x) * 1.25), calc(var(--y) + 207px)) rotate(var(--r)); } }
@keyframes v4ConfettiFade { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .v4-confetti { display: none; } }
/* Confirmation states answer the click */
@keyframes v4Pop { from { opacity: 0; transform: translateY(7.2px) scale(0.98); } to { opacity: 1; transform: none; } }
.v4-pop { animation: v4Pop 500ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes v4Pop2 { from { opacity: 0; transform: translateY(7.2px) scale(0.98); } to { opacity: 1; transform: none; } }
/* Bento cards follow the reader like the How it works steps: each one plays its
   animation once as it scrolls into view and then holds. Scrolling back up past it
   resets it, so it plays again on the way down. */
@media (prefers-reduced-motion: no-preference) {
  .v4-rstars > svg { transform-origin: center; }
  .v4-rbar { transform-origin: left center; }
  .v4-sh-body, .v4-bd-body, .v4-bd-mark { transform-box: fill-box; transform-origin: center; }
  .v4-sh-mark { stroke-dasharray: 1; }
  /* Waiting, before the card is reached */
  .v4-anim:not(.is-live) .v4-rstars > svg { opacity: 0.15; transform: scale(0.5); }
  .v4-anim:not(.is-live) .v4-rbar { transform: scaleX(0); }
  .v4-anim:not(.is-live) .v4-sh-mark { stroke-dashoffset: 1; }
  .v4-anim:not(.is-live) .v4-sh-body, .v4-anim:not(.is-live) .v4-bd-body { fill: #F1E8EE; }
  .v4-anim:not(.is-live) .v4-bd-mark { opacity: 0; }
  /* Outcomes, not stars: the stars land one by one, then the outcome bar fills */
  .v4-anim.is-live .v4-rstars > svg { animation: v4StarIn 520ms cubic-bezier(.3,.7,.3,1) both; }
  .v4-anim.is-live .v4-rstars > svg:nth-child(2) { animation-delay: 0.16s; }
  .v4-anim.is-live .v4-rstars > svg:nth-child(3) { animation-delay: 0.32s; }
  .v4-anim.is-live .v4-rstars > svg:nth-child(4) { animation-delay: 0.48s; }
  .v4-anim.is-live .v4-rstars > svg:nth-child(5) { animation-delay: 0.64s; }
  .v4-anim.is-live .v4-rbar { animation: v4BarIn 1300ms cubic-bezier(.45,0,.2,1) 0.3s both; }
  /* The star card settles in behind the outcome card, which stays in place; only its bar and numbers move */
  .v4-oback:has(.v4-anim:not(.is-live)) { opacity: 0; transform: translateY(10.8px); }
  .v4-oback:has(.v4-anim.is-live) { animation: v4StackIn 420ms cubic-bezier(.3,.7,.3,1) both; }
  /* Slower to join: the checks resolve one by one, green, green, then red, and the application is declined */
  .v4-anim:not(.is-live) .v4-gseg { transform: scaleX(0); }
  .v4-anim:not(.is-live) .v4-gwhy, .v4-anim:not(.is-live) .v4-gstat { opacity: 0; }
  .v4-gseg, .v4-gstat { transform-origin: left center; }
  .v4-gstat { display: inline-block; transform-origin: right center; }
  .v4-gate.is-live [data-gs="1"] .v4-sh-body { animation: v4ShieldGreen 420ms cubic-bezier(.3,.7,.3,1) 0.05s both; }
  .v4-gate.is-live [data-gs="1"] .v4-sh-mark { animation: v4MarkIn 260ms ease-in-out 0.16s both; }
  .v4-gate.is-live .v4-gseg[data-gs="1"] { animation: v4BarIn 320ms cubic-bezier(.45,0,.2,1) 0.14s both; }
  .v4-gate.is-live [data-gs="2"] .v4-sh-body { animation: v4ShieldGreen 420ms cubic-bezier(.3,.7,.3,1) 0.4s both; }
  .v4-gate.is-live [data-gs="2"] .v4-sh-mark { animation: v4MarkIn 260ms ease-in-out 0.51s both; }
  .v4-gate.is-live .v4-gseg[data-gs="2"] { animation: v4BarIn 320ms cubic-bezier(.45,0,.2,1) 0.49s both; }
  .v4-gate.is-live [data-gs="3"] .v4-sh-body { animation: v4ShieldRed 420ms cubic-bezier(.3,.7,.3,1) 0.75s both; }
  .v4-gate.is-live [data-gs="3"] .v4-sh-mark { animation: v4MarkIn 260ms ease-in-out 0.86s both; }
  .v4-gate.is-live .v4-gseg[data-gs="3"] { animation: v4BarIn 320ms cubic-bezier(.45,0,.2,1) 0.84s both; }
  .v4-gate.is-live .v4-gwhy { animation: v4Fade 300ms ease-out 0.9s both; }
  .v4-gate.is-live .v4-gstat { animation: v4StampIn 480ms cubic-bezier(.3,.7,.3,1) 1.1s both; }
  /* Starts fully hidden: the star pop starts faint (0.15), which let the word show while it waited its turn */
  @keyframes v4StampIn { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
  /* Spot a scam: the copycat turns red, then the real shop turns green */
  .v4-anim.is-live [data-sh="bad"] .v4-sh-body { animation: v4ShieldRed 420ms cubic-bezier(.3,.7,.3,1) 0.05s both; }
  .v4-anim.is-live [data-sh="bad"] .v4-sh-mark { animation: v4MarkIn 260ms ease-in-out 0.16s both; }
  .v4-anim.is-live [data-sh="ok"] .v4-sh-body { animation: v4ShieldGreen 420ms cubic-bezier(.3,.7,.3,1) 0.4s both; }
  .v4-anim.is-live [data-sh="ok"] .v4-sh-mark { animation: v4MarkIn 260ms ease-in-out 0.51s both; }
  .v4-anim.is-live [data-sh="bad2"] .v4-sh-body { animation: v4ShieldRed 420ms cubic-bezier(.3,.7,.3,1) 0.75s both; }
  .v4-anim.is-live [data-sh="bad2"] .v4-sh-mark { animation: v4MarkIn 260ms ease-in-out 0.86s both; }
  .v4-anim.is-live [data-sh="bad3"] .v4-sh-body { animation: v4ShieldRed 420ms cubic-bezier(.3,.7,.3,1) 1.1s both; }
  .v4-anim.is-live [data-sh="bad3"] .v4-sh-mark { animation: v4MarkIn 260ms ease-in-out 1.21s both; }
  /* Corner shields on the bento pictures */
  /* Corner badges: a short pause once the card is in view, then a slower fill and mark */
  .v4-anim.is-live .v4-bd-body { animation: v4BdBody 700ms cubic-bezier(.3,.7,.3,1) 0.35s both; }
  .v4-anim.is-live .v4-bd-mark { animation: v4BdMark 420ms cubic-bezier(.3,.7,.3,1) 0.62s both; }
}
@keyframes v4StarIn { 0% { opacity: 0.15; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes v4BarIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v4Fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v4StackIn { from { opacity: 0; transform: translateY(16.2px); } to { opacity: 1; transform: none; } }
@keyframes v4MarkIn { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes v4ShieldRed { 0% { fill: #F1E8EE; transform: scale(1); } 55% { fill: #D2391F; transform: scale(1.12); } 100% { fill: #D2391F; transform: scale(1); } }
@keyframes v4ShieldGreen { 0% { fill: #F1E8EE; transform: scale(1); } 55% { fill: #2E8B57; transform: scale(1.12); } 100% { fill: #2E8B57; transform: scale(1); } }
@keyframes v4BdBody { 0% { fill: #F1E8EE; transform: scale(1); } 55% { fill: #2E8B57; transform: scale(1.12); } 100% { fill: #2E8B57; transform: scale(1); } }
@keyframes v4BdMark { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
.v4-pop2 { animation: v4Pop2 500ms cubic-bezier(.2,.7,.2,1) both; }

/* The one action colour: teal, hover sweeps darker */
.v4-btn { position: relative; overflow: hidden; isolation: isolate; cursor: pointer; transition: scale 160ms ease; }
.v4-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: #135563; transform: scaleX(0); transform-origin: left center; transition: transform 700ms cubic-bezier(.5,.05,.25,1); }
.v4-btn:hover, .v4-btn:focus-visible { color: #FDE6D9 !important; }
.v4-btn:hover::before, .v4-btn:focus-visible::before { transform: scaleX(1); }
.v4-btn:focus-visible { outline: 2px solid #1C6B7A; outline-offset: 2.7px; }
.v4-btn:active { scale: 0.98; }
/* Sign up and Email us answer like the Buy button: brighten on hover, press in on click, no colour sweep */
.v4-btn.v4-btn-press { transition: scale 160ms ease, filter 160ms ease; }
.v4-btn.v4-btn-press::before { display: none; }
.v4-btn.v4-btn-press:hover { filter: brightness(1.12); }
.v4-btn.v4-btn-press:active { scale: 0.94; }
@media (prefers-reduced-motion: reduce) { .v4-btn.v4-btn-press { transition: none; } }
.v4-link { color: #3A0F33; text-decoration: underline; text-decoration-color: #C9A394; text-decoration-thickness: 1.5px; text-underline-offset: 4.5px; transition: color 250ms ease, text-decoration-color 250ms ease; }
.v4-link:hover { color: #1C6B7A; text-decoration-color: #1C6B7A; }
.v4-input { font-family: 'Jost', sans-serif; }
/* Focus: the field stays calm; its frame lifts with a soft plum halo instead of a second ring */
.v4-input { caret-color: #3A0F33; }
.v4-input::placeholder { color: #9A8294; opacity: 1; transition: color 160ms ease; }
.v4-input:focus { outline: none; border-color: transparent !important; }
.v4-input:focus::placeholder { color: #C8B6C2; }
@media (prefers-reduced-motion: reduce) { .v4-input::placeholder { transition: none; } }
.v4-foot a { color: #F3D3C4; text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; transition: color 200ms ease; }
.v4-foot a:hover { color: #FFFFFF; }

/* Hero */
.v4-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 64.8px); align-items: center; }
@media (min-width: 630px) { .v4-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
/* Optical left edge: pull the headline's F and the check icons back by their built-in side space,
   so their ink lines up with the logo, the intro text and the form */
.v4-hero h1 { margin-left: -0.065em !important; }
.v4-herochecks { margin-left: -2px !important; }
/* Hero on desktop: more air between the headline, the intro and the sign-up */
@media (min-width: 792.9px) { .v4-hero.v4-in { padding-top: clamp(57.6px, 6vw, 93.6px) !important; padding-bottom: clamp(57.6px, 6vw, 93.6px) !important; } .v4-herocol { gap: 50.4px !important; padding-top: clamp(36px, 4vw, 57.6px); } .v4-hero-goddess { top: clamp(-18px, -1.2vw, -9px); } .v4-herotext { gap: 27px !important; } .v4-herochecks { margin-top: 16.2px !important; } }
/* Narrow two-column hero: stack the email form so the button never drops awkwardly */
@media (min-width: 630px) and (max-width: 792px) { .v4-hero .v4-joinform { flex-direction: column; padding: 7.2px !important; } .v4-hero .v4-joinform input, .v4-hero .v4-joinform button { flex: none !important; width: 100%; } }
/* Below two columns the goddess moves into the top bar */
@media (max-width: 629.1px) { .v4-stage { display: none !important; } .v4-navmark { display: block !important; } }

/* Bento: one grid that carries every trust promise */
.v4-bento { display: grid; gap: 14.4px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "kyc" "reviews" "rating" "out" "check"; }
/* A second copycat in Spot a scam, only where the card sits beside Slower to join and has room */
.v4-check3 { display: none !important; }
@media (min-width: 648px) { .v4-check3 { display: flex !important; } }
.v4-check4 { display: none !important; }
@media (min-width: 792.9px) { .v4-check4 { display: flex !important; } }
@media (min-width: 648px) { .v4-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "kyc reviews" "rating rating" "out check"; } }
@media (min-width: 990px) { .v4-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "kyc kyc kyc reviews reviews reviews rating rating rating rating rating rating" "out out out out out check check check check check check check"; } }
/* The listings row runs to the screen edges; the first card lines up with the content edge */
.v4-page { overflow-x: clip; }
/* Paper texture: the page itself is one continuous sheet of fine grain and a soft mottle (no creases), above the
   section colours and below the content. Cards and inner surfaces are crumpled paper: grain multiplied in and
   creases laid on with soft light */
:root { --grain: url("assets/grain.webp"); --grain-light: url("assets/grain-light.webp"); --crumple: url("assets/crumple.webp"); }
:root { --paper: url("assets/grain.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='m' x='0' y='0' width='1000' height='1000' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.22  0 0 0 0 0.18  0 0 0 0.180 -0.068'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); --paper-light: url("assets/grain-light.webp"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='m' x='0' y='0' width='1000' height='1000' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.92  0 0 0 0 0.9  0 0 0 0.072 -0.027'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); --paper-grain: url("assets/grain.webp"); --paper-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='m' x='0' y='0' width='1000' height='1000' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.22  0 0 0 0 0.18  0 0 0 0.180 -0.068'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); }
.v4-page { position: relative; isolation: isolate; }
.v4-page::before, .v4-page::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; }
.v4-page::before { background-image: var(--paper-grain); background-size: 128px 128px; }
.v4-page::after { background-image: var(--paper-mottle); background-size: 1500px 1500px; }
/* Under the sticky header the mottle fades in, so the header and page read as one sheet */
.v4-page::after { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 234px); mask-image: linear-gradient(to bottom, transparent 0, #000 234px); }
/* Section content sits above the sheet */
.v4-card > * { position: relative; z-index: 2; }
/* The plum footer is its own sheet: light grain screened on, creases held back to about half strength by a plum veil */
.v4-foot { position: relative; z-index: 2; isolation: isolate; }
.v4-page > .v4-foot { background-image: var(--grain-light), linear-gradient(rgba(58,15,51,0.45), rgba(58,15,51,0.45)), var(--crumple) !important; background-size: 128px 128px, 100% 100%, 1024px 1024px; background-position: 0 0, 0 0, -610px -90px; background-repeat: repeat, no-repeat, repeat; background-blend-mode: screen, normal, soft-light; }
.v4-nav { background-image: var(--grain); background-size: 128px 128px; background-blend-mode: multiply; }
.v4-tile, .v4-faqcard, .hw-card, .hw-panel, .v4-lcard-face { background-image: var(--grain), var(--crumple); background-size: 128px 128px, 1024px 1024px; background-blend-mode: multiply, soft-light; }
.v4-rating, .v4-ask { background-image: var(--grain-light), var(--crumple); background-blend-mode: screen, soft-light; }
/* Each card picks up a different part of the crease pattern */
.v4-bento > :nth-child(2n), .hw-cards > :nth-child(2), .v4-faqgrid > :nth-child(2n) { background-position: 0 0, -330px -470px; }
.v4-bento > :nth-child(3n), .hw-cards > :nth-child(3), .v4-faqgrid > :nth-child(3n) { background-position: 0 0, -640px -150px; }
.v4-bento > :nth-child(5n), .v4-faqgrid > :nth-child(5n) { background-position: 0 0, -120px -760px; }
.v4-lcard:nth-child(2n) .v4-lcard-face { background-position: 0 0, -450px -300px; } .v4-lcard:nth-child(3n) .v4-lcard-face { background-position: 0 0, -780px -620px; }
.hw-panel { background-position: 0 0, -520px -380px; }
.v4-btn, .v4-btn::before { background-image: var(--grain-light), var(--crumple); background-size: 128px 128px, 1024px 1024px; background-blend-mode: screen, soft-light; }
/* end paper texture */
/* Inner textures. Inner surfaces (rows, fields, panels) carry the same grain and creases as the cards
   . Bars, buy buttons and dark rows get the rough light grain of the plum
   card. Shields get a light speckle, since dark grain would not show on them. Inner surfaces use a softer grain
   and fainter creases than the cards, so text and shapes on them stay as clear as on a plain surface */
:root { --grain-soft: url("assets/grain-soft.webp"); --crumple-soft: url("assets/crumple-soft.webp"); }
.px-in, .px-ico, .px-tex { background-image: var(--grain-soft), var(--crumple-soft); background-size: 128px 128px, 1024px 1024px; background-blend-mode: multiply, soft-light; }
.px-art { background-size: 128px 128px, 1024px 1024px, 100% 100%; background-repeat: repeat, repeat, no-repeat; background-blend-mode: multiply, soft-light, normal; }
.px-tail { background-image: var(--grain-soft); background-size: 128px 128px; background-blend-mode: multiply; }
.px-track { background-image: var(--grain-soft); background-size: 128px 128px; background-blend-mode: multiply; }
.px-rough, .px-bar, .v4-rbar, .v4-gseg, .hw-grow, .hw-seg1, .hw-seg2, .v4-lcard-buy, .v4-lcard-join { background-image: var(--grain-light), var(--crumple); background-size: 128px 128px, 1024px 1024px; background-blend-mode: screen, soft-light; }
/* Each surface picks up a different part of the crease pattern */
.px-in:nth-child(2n), .px-bar:nth-child(2n) { background-position: 0 0, -330px -470px; }
.px-in:nth-child(3n), .px-bar:nth-child(3n) { background-position: 0 0, -640px -150px; }
.px-art { background-position: 0 0, -450px -300px, 0 0; }
/* The step screens follow the same rules: the frame, its screens and rows carry the soft inner texture */
.hw-frame, .hw-screen, .hw-rows > div { background-image: var(--grain-soft), var(--crumple-soft); background-size: 128px 128px, 1024px 1024px; background-blend-mode: multiply, soft-light; }
.hw-rows > div:nth-child(2) { background-position: 0 0, -330px -470px; }
/* On desktop the screens sit inside the frame, which already carries the texture */
.hw-frame .hw-screen { background-image: none; }
svg:has(.v4-sh-body), svg:has(.v4-bd-body), svg:has(.hw-sh-body) { filter: url(#px-speck-soft); }
/* The bottom goddess wears the footer's paper: a plum sheet with light grain and softened creases, cut to her shape.
   The flame stays above it, untouched */
.v4-join-goddess { isolation: isolate; }
.v4-join-goddess::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-color: #3A0F33; background-image: var(--grain-light), linear-gradient(rgba(58,15,51,0.45), rgba(58,15,51,0.45)), var(--crumple); background-size: 128px 128px, 100% 100%, 1024px 1024px; background-position: 0 0, 0 0, -300px -40px; background-repeat: repeat, no-repeat, repeat; background-blend-mode: screen, normal, soft-light; -webkit-mask: url("assets/goddess.svg") center / 100% 100% no-repeat; mask: url("assets/goddess.svg") center / 100% 100% no-repeat; }
.v4-join-goddess > span { z-index: 2; }
/* end inner textures */
.v4-listings .v4-rail { margin-left: calc(50% - min(50vw, 1152px)); margin-right: calc(50% - min(50vw, 1152px)); padding: 43.2px calc(min(50vw, 1152px) - 50%) 43.2px; margin-top: -43.2px !important; margin-bottom: -28.8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-behavior: auto; cursor: grab; user-select: none; -webkit-user-select: none; }
.v4-listings .v4-rail.is-dragging { cursor: grabbing; }
.v4-listings .v4-railtrack { flex: none; }
.v4-listings .v4-railtrack > article { scroll-snap-align: start; }
.v4-listings .v4-rail.is-free { scroll-snap-type: none; }
/* Proximity: a tile's title sits with its text, apart from its picture */
.v4-tile > .v4-illo + h3 { margin-top: 9px !important; }
.v4-tile > h3 + p, .v4-rating h3 + p { margin-top: -5.4px !important; }
.v4-tile > p + * { margin-top: 9px !important; }
.v4-tile { box-sizing: border-box; border-radius: 19.8px; padding: clamp(21.6px, 2.6vw, 28.8px); background-color: #FDE6D9; border: 1.5px solid #000000; display: flex; flex-direction: column; min-width: 0; }

/* Example listings rail: fixed-size cards, more appear as the tile gets wider */
/* Cards stay flat (no 3D layers) until a card is pointed at, focused or flipped. Thirty 3D cards
   in the row made the browser paint them late while scrolling, so cards appeared after a pause */
.v4-lcard-in { position: relative; height: 100%; box-sizing: border-box; border: 1.5px solid #000000; border-radius: 14.4px; transition: transform 640ms cubic-bezier(0.45, 0, 0.25, 1); }
.v4-lcard:hover .v4-lcard-in, .v4-lcard:focus-within .v4-lcard-in, .v4-lcard.is-flipped .v4-lcard-in { transform-style: preserve-3d; }
.v4-lcard.is-flipped .v4-lcard-in { transform: rotateY(180deg); }
.v4-lcard-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.v4-lcard:hover .v4-lcard-front, .v4-lcard:focus-within .v4-lcard-front, .v4-lcard.is-flipped .v4-lcard-front { transform: translateZ(0.5px); }
.v4-lcard-front { transition: visibility 0s linear 0s; }
.v4-lcard.is-flipped .v4-lcard-front { visibility: hidden; transition-delay: 320ms; }
.v4-lcard-back { position: absolute; inset: 0; visibility: hidden; transition: visibility 0s linear 320ms; }
.v4-lcard:hover .v4-lcard-back, .v4-lcard:focus-within .v4-lcard-back, .v4-lcard.is-flipped .v4-lcard-back { transform: rotateY(180deg) translateZ(0.5px); }
.v4-lcard.is-flipped .v4-lcard-back { visibility: visible; transition-delay: 0s; }
.v4-lcard-in { cursor: pointer; }
/* Card back: once the card has turned, the price splits in steps like How it works step 2
   (the seller's share fills first, then the fair margin) and the rows land in the same order */
.v4-lcard-back > div[role="img"] > span { transform-origin: left center; }
@keyframes v4SegGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v4RowIn { from { opacity: 0; transform: translateY(7.2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .v4-lcard.is-flipped .v4-lcard-back > div[role="img"] > span:first-child { animation: v4SegGrow 560ms cubic-bezier(.45,0,.2,1) 0.36s both; }
  .v4-lcard.is-flipped .v4-lcard-back > div[role="img"] > span:nth-child(2) { animation: v4SegGrow 300ms cubic-bezier(.3,.7,.3,1) 0.93s both; }
  .v4-lcard.is-flipped .v4-lcard-back dl > div:nth-child(1) { animation: v4RowIn 360ms cubic-bezier(.3,.7,.3,1) 0.42s both; }
  .v4-lcard.is-flipped .v4-lcard-back dl > div:nth-child(2) { animation: v4RowIn 360ms cubic-bezier(.3,.7,.3,1) 0.95s both; }
  .v4-lcard.is-flipped .v4-lcard-back dl > div:nth-child(3) { animation: v4RowIn 420ms cubic-bezier(.3,.7,.3,1) 1.25s both; }
}
.v4-lcard-buy { transition: transform 160ms ease, filter 160ms ease; }
/* Listing cards: the Buy button and the button that takes its place have sharp corners */
.v4-lcard-buy, .v4-lcard-join { border-radius: 0 !important; }
/* Listing cards: the picture, the price rows and the small split bar have sharp corners; only the card itself is rounded */
.px-art, .v4-lcard-back dl > div, .v4-lcard-back [role="img"] > span { border-radius: 0 !important; }
/* Every button on the page has sharp corners, and so do the email fields that hold one */
.v4-btn, .v4-joinform, .v4-joinform .v4-input { border-radius: 0 !important; }
/* Progress bars and their tracks have square ends */
.px-track, .v4-rbar, .hw-grow, div:has(> .hw-seg1), .hw-seg1, .hw-seg2 { border-radius: 0 !important; }
.v4-lcard-buy:hover { filter: brightness(1.12); }
.v4-lcard-buy:active { transform: scale(0.94); }
.v4-lcard-join { transition: filter 160ms ease; }
.v4-lcard-join:hover { filter: brightness(1.12); }
.v4-lcard-buy:focus-visible, .v4-lcard-join:focus-visible { outline: 2px solid #3A0F33; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .v4-lcard-in, .v4-lcard-buy { transition: none; } }
.v4-dot { display: flex; align-items: center; height: 25.2px; padding: 0 2.7px; border: 0; background: none; cursor: pointer; }
.v4-dot span { display: block; width: 7.2px; height: 7.2px; border-radius: 899.1px; background-color: rgba(58,15,51,0.22); transition: width 300ms ease, background-color 300ms ease; }
.v4-dot:hover span { background-color: rgba(58,15,51,0.45); }
.v4-dot.is-on span { width: 19.8px; background-color: #3A0F33; }
.v4-dot:focus-visible { outline: 2px solid #1C6B7A; outline-offset: 1px; border-radius: 7.2px; }
@media (prefers-reduced-motion: reduce) { .v4-dot span { transition: none; } }
@media (min-width: 990px) { .v4-rating { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important; } }
/* In the narrower side by side layout the stars shrink a little so the rating fits its card */
@media (min-width: 990px) { .v4-oback .v4-rstars > svg { width: clamp(18px, 1.9vw, 24.3px); height: clamp(18px, 1.9vw, 24.3px); } }
.v4-rail { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.v4-rail::-webkit-scrollbar { display: none; }
.v4-rail:focus-visible { outline: 2px solid #1C6B7A; outline-offset: 2px; border-radius: 7.2px; }
.v4-railbtn { display: flex; align-items: center; justify-content: center; width: 39.6px; height: 39.6px; padding: 0; border-radius: 899.1px; border: 1.5px solid #3A0F33; background-color: transparent; color: #3A0F33; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.v4-railbtn:hover { background-color: #3A0F33; color: #FDE6D9; }
.v4-railbtn:focus-visible { outline: 2px solid #1C6B7A; outline-offset: 2px; }

/* How it works: step cards on the left, the selected step's screen on the right.
   The step follows the scroll; on phones every card stays open and carries its own screen. */
/* On desktop the block pins in the middle of the screen while scrolling steps through 1, 2, 3 */
#how.v4-card { overflow: clip; }
/* Desktop: while the block is held, the section's background takes on a soft tint of the
   selected step's colour; the top and bottom still fade into the neighbouring sections */
@media (min-width: 774.9px) {
  #how.hw-bgon { background-image: linear-gradient(to bottom, #E7E0E5 0, rgba(231,224,229,0) 216px, rgba(255,241,214,0) calc(100% - 216px), #FFF1D6 100%) !important; transition: background-color 700ms ease; }
  #how.hw-bg0 { background-color: #FEF1D9 !important; }
  #how.hw-bg1 { background-color: #FAEBF0 !important; }
  #how.hw-bg2 { background-color: #E8F3F4 !important; }
}
@media (prefers-reduced-motion: reduce) { #how.hw-bgon { transition: none !important; } }
/* Product cards, bento tiles and FAQ cards answer the mouse: they lift a little and cast a soft shadow */
@media (hover: hover) and (pointer: fine) {
  .v4-lcard { transition: transform 260ms cubic-bezier(.3,.7,.3,1); }
  .v4-lcard .v4-lcard-in { transition: transform 640ms cubic-bezier(0.45, 0, 0.25, 1), box-shadow 260ms ease; }
  .v4-faqcard { transition: transform 260ms cubic-bezier(.3,.7,.3,1), box-shadow 260ms ease; }
  .v4-lcard:hover, .v4-faqcard:not(.v4-ask):hover { transform: translateY(-3.6px); }
  .v4-lcard:hover .v4-lcard-in, .v4-faqcard:not(.v4-ask):hover { box-shadow: 0 14.4px 28.8px rgba(58,15,51,0.14); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .v4-lcard:hover, .v4-tile:hover, .v4-faqcard:hover { transform: none; }
}
.hw-pin { position: relative; }
.hw-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 14.4px; align-items: stretch; }
.hw-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10.8px; }
.hw-step { position: relative; }
.hw-hit { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.hw-hit:focus-visible { outline: 2.7px solid #1C6B7A; outline-offset: -2.7px; }
.hw-card { box-sizing: border-box; border-radius: 14.4px; border: 1.5px solid #000000; padding: clamp(16.2px, 2vw, 21.6px) clamp(18px, 2.4vw, 25.2px); background-color: #FFFBF2; transition: background-color 420ms ease; }
.hw-card.is-on.hw-c0 { background-color: #FCEBCB; } .hw-card.is-on.hw-c1 { background-color: #F6E3E9; } .hw-card.is-on.hw-c2 { background-color: #DCEBEC; }
.hw-num { background-color: #FFFBF2; color: #3A0F33; transition: background-color 400ms ease, color 400ms ease, transform 400ms cubic-bezier(.3,.7,.3,1); }
.hw-step.is-on .hw-num { background-color: #3A0F33; color: #FFF1D6; transform: scale(1.08); }
.hw-step.is-done .hw-num { background-color: #3A0F33; color: #FFF1D6; }
.hw-text { opacity: 0.7; transition: opacity 400ms ease; }
.hw-step.is-on .hw-text { opacity: 1; }
.hw-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms cubic-bezier(.3,.7,.3,1); }
.hw-more > div { overflow: hidden; }
.hw-card.is-on .hw-more { grid-template-rows: 1fr; }
.hw-inline { display: none; }
.hw-panel { position: relative; box-sizing: border-box; border-radius: 14.4px; border: 1.5px solid #000000; display: grid; place-items: center; padding: clamp(28.8px, 4vw, 50.4px) clamp(21.6px, 3vw, 43.2px) 57.6px; transition: background-color 420ms ease; }
.hw-p0 { background-color: #FCEBCB; } .hw-p1 { background-color: #F6E3E9; } .hw-p2 { background-color: #DCEBEC; }
.hw-shot { grid-area: 1 / 1; width: min(100%, 342px); opacity: 0; transform: translateY(12.6px) scale(0.98); transition: opacity 380ms ease, transform 480ms cubic-bezier(.3,.7,.3,1); pointer-events: none; }
.hw-shot.is-on, .hw-shot.is-wait { opacity: 1; transform: none; }
.hw-screen { min-height: 142.2px; display: flex; flex-direction: column; justify-content: center; }
.hw-shot .hw-screen { box-shadow: 0 12.6px 27px rgba(58,15,51,0.10); }
.hw-dots { position: absolute; left: 0; right: 0; bottom: 21.6px; display: flex; justify-content: center; gap: 7.2px; }
.hw-dot { width: 7.2px; height: 7.2px; border-radius: 8.1px; background-color: #3A0F33; opacity: 0.25; transition: width 380ms cubic-bezier(.3,.7,.3,1), opacity 380ms ease; }
.hw-dot.is-on { width: 19.8px; opacity: 1; }
/* Desktop: the block stands taller; the cards share the height and keep their text centred */
@media (min-width: 774.9px) {
  .hw-how { min-height: clamp(414px, 39vw, 522px); }
  .hw-cards { gap: 12.6px; }
  .hw-cards > .hw-card { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  .hw-shot { width: min(100%, 378px); }
  /* The screens stand taller in the big panel: more room around and between their rows */
  .hw-shot .hw-screen { min-height: 216px; padding: 21.6px 19.8px !important; }
  .hw-shot .hw-screen > div[aria-hidden="true"] { margin: 16.2px 0 !important; }
  .hw-shot .hw-rows > div { padding: 12.6px 14.4px !important; }
}
.hw-sh-body { transform-box: fill-box; transform-origin: center; }
.hw-sh-mark { stroke-dasharray: 1; }
.hw-grow, .hw-seg1, .hw-seg2 { transform-origin: left center; }
@keyframes hwShield { 0% { fill: #F1E8EE; transform: scale(1); } 55% { fill: #2E8B57; transform: scale(1.16); } 100% { fill: #2E8B57; transform: scale(1); } }
@keyframes hwMark { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hwGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  /* Each screen plays once, the first time its step is reached, then holds */
  .hw-anim:not(.is-play) .hw-sh-body { fill: #F1E8EE; }
  .hw-anim:not(.is-play) .hw-sh-mark { stroke-dashoffset: 1; }
  .hw-anim:not(.is-play) .hw-grow { transform: scaleX(0); }
  .hw-anim.is-play .hw-sh-body { animation: hwShield 420ms cubic-bezier(.3,.7,.3,1) 0.15s both; }
  .hw-anim.is-play .hw-sh-mark { animation: hwMark 260ms ease-in-out 0.26s both; }
  /* Step 3: same bar fill and timing as the seller card in "Outcomes, not stars" */
  .hw-anim.is-play .hw-grow { animation: hwGrow 1300ms cubic-bezier(.45,0,.2,1) 0.3s both; }
  /* Step 2: the price splits in steps, the maker's share first, then the fair margin */
  .hw-anim:not(.is-play) .hw-seg1, .hw-anim:not(.is-play) .hw-seg2 { transform: scaleX(0); }
  .hw-anim.is-play .hw-seg1 { animation: hwGrow 560ms cubic-bezier(.45,0,.2,1) 0.15s both; }
  .hw-anim.is-play .hw-seg2 { animation: hwGrow 300ms cubic-bezier(.3,.7,.3,1) 0.72s both; }
}
@media (max-width: 774px) {
  .hw-how { grid-template-columns: minmax(0, 1fr); }
  .hw-panel { display: none; }
  .hw-card .hw-more { grid-template-rows: 1fr; }
  .hw-inline { display: block; padding-top: 14.4px; }
}
.hw-frame { grid-area: 1 / 1; width: min(100%, 378px); box-sizing: border-box; display: grid; align-items: center; min-height: 216px; padding: 21.6px 19.8px; border-radius: 14.4px; background-color: #FFFDF8; color: #3A0F33; border: 1.5px solid #000000; box-shadow: 0 12.6px 27px rgba(58,15,51,0.10); }
.hw-frame .hw-shot { grid-area: 1 / 1; align-self: stretch; display: flex; width: 100% !important; transform: translateY(5.4px); transition: opacity 200ms ease, transform 200ms ease; }
.hw-frame .hw-shot.is-on, .hw-frame .hw-shot.is-wait { transform: none; transition: opacity 320ms ease 160ms, transform 420ms cubic-bezier(.3,.7,.3,1) 160ms; }
.hw-frame .hw-screen { flex: 1; justify-content: center; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) { .hw-more, .hw-shot, .hw-frame .hw-shot, .hw-dot, .hw-panel, .hw-card, .hw-num, .hw-text { transition: none !important; } }

/* FAQ rows */
.v4-qa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7.2px; padding: 23.4px 0; border-top: 1px solid #EBC3B1; }
.v4-faqgrid { display: grid; gap: 14.4px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.v4-faqcard { box-sizing: border-box; border: 1.5px solid #000000; border-radius: 19.8px; padding: clamp(19.8px, 2.4vw, 27px); display: flex; flex-direction: column; gap: 9px; min-width: 0; }
@media (min-width: 810px) { .v4-qa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(43.2px, 6vw, 86.4px); align-items: baseline; } }

@media (max-width: 648px) { .v4-navlink { display: none !important; } .v4-navrow { flex-wrap: nowrap !important; gap: 10.8px !important; } .v4-cta-sm { padding: 0 12.6px !important; font-size: 13.5px !important; white-space: nowrap; } }
/* Phones: compact hero with the goddess first, full-width form controls, tighter tiles */
@media (max-width: 576px) {
  .v4-chip { display: none !important; }
  .v4-hero { gap: 18px !important; }
  /* At the end of the page the top bar sits straight on the footer, with no sliver of the section above */
  .v4-page > footer { min-height: calc(100vh - 68.4px); min-height: calc(100svh - 68.4px); box-sizing: border-box; display: flex; flex-direction: column; }
  .v4-page > footer > div { width: 100%; }
  .v4-in { padding-top: 28.8px !important; padding-bottom: 28.8px !important; }
  #join > div { padding-top: 28.8px !important; }
  .v4-hero.v4-in { padding-top: 21.6px !important; padding-bottom: 28.8px !important; }
  .v4-joinform { flex-direction: column; padding: 7.2px !important; }
  .v4-joinform input { flex: none !important; width: 100%; }
  .v4-joinform button { flex: none !important; width: 100%; }
  .v4-bento { gap: 10.8px !important; }
  .v4-tile { padding: 19.8px !important; border-radius: 16.2px !important; }
  .v4-tile h3:not(.v4-display) { font-size: 18px !important; }
  .v4-qa { padding: 18px 0 !important; }
  .v4-qa dt { font-size: 17.1px !important; }
}
@media (max-width: 342px) {
  .v4-navrow { padding-left: 14.4px !important; padding-right: 14.4px !important; gap: 7.2px !important; }
  .v4-navrow img[alt="Fairmina"] { height: 14.4px !important; }
  .v4-navmark { width: 18px !important; height: 27px !important; }
  .v4-cta-sm { padding: 0 10.8px !important; font-size: 12.6px !important; }
}
@media (max-width: 504px) { .v4-foot-brand { grid-column: 1 / -1 !important; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .v4-line, .v4-up, .v4-goddess, .v4-float, .v4-chip, .v4-bob1, .v4-bob2, .v4-sway, .v4-lick, .v4-glow, .v4-pop, .v4-pop2, .v4-flame { animation: none !important; }
  .v4-btn::before, .v4-link { transition: none !important; }
}

/* ================= Phone fixes ================= */
@media (max-width: 576px) {
  /* The headline is one unbroken line sized from the column width; it was 12px wider than the column,
     which also pushed the paragraph under it past the right-hand page margin */
  #top h1 { font-size: min(27.9px, 5cqi) !important; margin-right: -0.16em; }
  /* iOS zooms the whole page when a field with text under 16px gets focus */
  .v4-input { font-size: 16px !important; }
  /* Tap targets: 44px is the smallest size a thumb hits reliably */
  .v4-nav .v4-btn, .v4-nav a { min-height: 44px !important; }
  .v4-foot a { min-height: 44px; }
  #check form .v4-input, #check form .v4-btn { min-height: 44px !important; }
  .v4-btn, .v4-foot a, .v4-nav a { touch-action: manipulation; }
}
/* On narrow phones the shop link field was squeezed to a few characters beside its button: stack them */
@media (max-width: 420px) {
  #check form { flex-direction: column; align-items: stretch !important; gap: 5.4px !important; padding: 5.4px !important; }
  #check form .v4-input { flex: none !important; width: 100%; box-sizing: border-box; padding: 0 9px !important; }
  #check form .v4-btn { flex: none !important; width: 100%; }
}
/* Check tiles: the rows of a boxed list are divided by lines */
.t1-row + .t1-row { border-top: 1px solid rgba(58,15,51,0.14); }
/* Product name beside the wordmark, as on Fairmina Signal */
.t1-product { display: inline-flex; align-items: center; height: clamp(18px, 1.9vw, 25.2px); font-family: 'Jost', system-ui, sans-serif; font-size: clamp(15.3px, 1.6vw, 19.8px); font-weight: 700; letter-spacing: 0.08em; margin-right: -0.08em; text-transform: uppercase; color: #1C6B7A; line-height: 1; padding-left: 12.6px; border-left: 1.5px solid rgba(58,15,51,0.28); }
@media (max-width: 359.9px) { .t1-product { font-size: 13.5px; letter-spacing: 0.04em; margin-right: -0.04em; padding-left: 7.2px; } }
/* How it works: the three example cards follow the check tiles. Thin plum lines, square marks, and rows as one boxed list with a green edge */
.hw-screen, .hw-frame { border-color: rgba(58,15,51,0.2) !important; border-width: 1px !important; }
.hw-screen .px-ico { border-radius: 0 !important; border: 1px solid rgba(58,15,51,0.35) !important; }
.hw-rows { border: 1px solid rgba(58,15,51,0.2); }
.hw-rows > div { background-color: #FFFFFF !important; box-shadow: inset 4px 0 0 #2E8B57; padding-left: 16.2px !important; }
.hw-rows > div + div { border-top: 1px solid rgba(58,15,51,0.14); }
/* Footer: on narrow screens the VAT number drops to its own line, so the divider before it is not needed */
@media (max-width: 359.9px) { .t1-footbar { display: none; } }
/* After signing up the field stays: it shows the address, and the button's place is taken by a green "Email sent" block */
.t1-sent { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 7.2px; padding: 5.4px; height: auto !important; background-color: #FFFFFF; border: 1.5px solid #000000; text-align: left; }
.t1-sent { cursor: pointer; }
/* Same box as the field it replaces (border, padding, font), so the typed address does not move */
.t1-sent-mail { flex: 1 1 180px; min-width: 0; box-sizing: border-box; display: flex; align-items: center; height: 46.8px; padding: 0 12.6px; border: 1.5px solid transparent; font-family: 'Jost', sans-serif; font-size: 15.3px; line-height: normal; color: #3A0F33; }
.t1-sent-mail > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.t1-sent-ok { flex: 0 0 auto; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7.2px; min-height: 46.8px; padding: 0 16.2px; background-color: #2E8B57; color: #FFFFFF; font-size: 15.3px; font-weight: 600; white-space: nowrap; }
.v4-hero .t1-sent { box-shadow: 0 9px 27px rgba(58,15,51,0.08); }
/* Sign up turns over like a tile: teal front, green back */
.t1-sent-ok { position: relative; overflow: hidden; isolation: isolate; min-width: 99.3px; animation: t1Flip 560ms linear both; }
.t1-sent-ok::before { content: ""; position: absolute; inset: 0; z-index: 0; background-color: #1C6B7A; background-image: var(--grain-light), var(--crumple); background-size: 128px 128px, 1024px 1024px; background-blend-mode: screen, soft-light; opacity: 0; animation: t1FlipFront 560ms steps(1, end) both; }
.t1-sent-was { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; color: #FDE6D9; opacity: 0; animation: t1FlipFront 560ms steps(1, end) both; }
.t1-sent-in { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7.2px; overflow: hidden; white-space: nowrap; animation: t1FlipBack 560ms steps(1, end) both; }
.t1-sent-tick { stroke-dasharray: 1; animation: v4MarkIn 300ms ease-out 440ms both; }
/* The confetti waits until the button has finished turning, and is not drawn at all before that */
.t1-sent .v4-confetti { animation: t1ConfettiShow 1ms linear 559ms both; }
.t1-sent .v4-confetti i { animation-delay: 560ms, calc(var(--f, 2500ms) + 560ms); }
@keyframes t1ConfettiShow { from { visibility: hidden; } to { visibility: visible; } }
@keyframes t1Flip { 0% { transform: perspective(540px) rotateX(0); animation-timing-function: cubic-bezier(.5,0,.9,.6); } 50% { transform: perspective(540px) rotateX(-90deg); animation-timing-function: steps(1, start); } 50.01% { transform: perspective(540px) rotateX(90deg); animation-timing-function: cubic-bezier(.35,.45,.6,1); } 100% { transform: perspective(540px) rotateX(0); } }
@keyframes t1Flip2 { 0% { transform: perspective(540px) rotateX(0); animation-timing-function: cubic-bezier(.5,0,.9,.6); } 50% { transform: perspective(540px) rotateX(-90deg); animation-timing-function: steps(1, start); } 50.01% { transform: perspective(540px) rotateX(90deg); animation-timing-function: cubic-bezier(.35,.45,.6,1); } 100% { transform: perspective(540px) rotateX(0); } }
/* Check shop turns over the same way on every press; the shields answer once it has landed */
/* Check shop does not change when pointed at */
.v4-btn.t1-still::before { display: none; }
.v4-btn.t1-still:hover, .v4-btn.t1-still:focus-visible { color: #FFFFFF !important; }
.t1-flip { animation: t1Flip 560ms linear both; }
.t1-flip2 { animation: t1Flip2 560ms linear both; }
svg[data-sh].v4-pop, svg[data-sh].v4-pop2 { animation-delay: 560ms; }
@media (prefers-reduced-motion: reduce) { .t1-flip, .t1-flip2 { animation: none !important; } }
@keyframes t1FlipFront { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes t1FlipBack { 0% { opacity: 0; max-width: 66.9px; } 50% { opacity: 1; max-width: 126px; } 100% { opacity: 1; max-width: 126px; } }
@media (prefers-reduced-motion: reduce) { .t1-sent-ok, .t1-sent-ok::before, .t1-sent-was, .t1-sent-in, .t1-sent-tick { animation: none !important; } }
@media (min-width: 630px) and (max-width: 792px) { .v4-hero .t1-sent { flex-direction: column; align-items: stretch; padding: 7.2px; } .v4-hero .t1-sent-mail, .v4-hero .t1-sent-ok { flex: none; width: 100%; } }
@media (max-width: 576px) { .t1-sent-mail { font-size: 16px; } }
@media (max-width: 576px) { .t1-sent { flex-direction: column; align-items: stretch; padding: 7.2px; } .t1-sent-mail, .t1-sent-ok { flex: none; width: 100%; } }