/* Furniture whitepaper landing page. Standalone: the fonts, colors and buttons match the Bevy site, but nothing loads from it. */

/* Base */
:root {
  --font-heading-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --inter-letter-spacing: -0.045em;
}
* {
  box-sizing: border-box;
}
body {
  background: #F5F2ED;
  font-family: var(--font-body-family);
  margin: 0;
  padding: 0;
}
.page-width-narrow {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}
.overflow-hidden {
  overflow: hidden;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Buttons */
.btn {
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0;
  text-transform: capitalize;
  padding: 16px 48px;
  min-height: 64px;
  border-radius: 40px;
  border: 1px solid;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  outline: 0;
  box-shadow: none;
  gap: 10px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  font-family: inherit;
}
.btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.btn span {
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  /* Grows from the bottom centre. 150% covers the whole button whatever its size; the old fixed 100px origin left
     the top of short buttons (like the header's) unfilled. */
  clip-path: circle(0% at 50% 100%);
  transform: translate3d(0, 0, 0);
}
.btn:hover::after {
  clip-path: circle(150% at 50% 100%);
}
.btn svg {
  display: block;
  width: 16px;
  height: auto;
  position: relative;
  z-index: 1;
}
/* Filled buttons: white with dark text on the landing page, black with white text in the form. No outline, soft
   shadow. */
.btn-primary {
  border: 0;
  background: #fff;
  color: #000;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.18);
}
.btn-primary::after {
  background: rgba(0, 0, 0, 0.08);
}
/* Shimmer: a soft diagonal band of light sweeps across every 4 seconds, behind the label. A faded warm yellow on the
   white buttons (white would be invisible), white on the black ones. */
.btn-primary {
  --fw-shimmer: rgba(255, 224, 102, 0.28);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, var(--fw-shimmer) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: fw-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fw-shimmer {
  0% {
    transform: translateX(-120%);
  }
  35%,
  100% {
    transform: translateX(120%);
  }
}
.fw-overlay .btn-primary {
  --fw-shimmer: rgba(255, 255, 255, 0.28);
  background: #000;
  color: #fff;
}
.fw-overlay .btn-primary::after {
  background: rgba(255, 255, 255, 0.18);
}
/* The ring would otherwise take the dark text colour and vanish on the dark sections. */
.btn-primary:focus-visible {
  outline-color: #fff;
}
.btn-secondary {
  color: #fff;
  background: transparent;
  border-color: #fff;
}
.btn-secondary::after {
  background: #fff;
}
.btn-secondary:hover {
  color: #000;
}
.btn-tertiary {
  color: #000;
  background: transparent;
  border-color: #000;
}
.btn-tertiary::after {
  background: #000;
}
.btn-tertiary:hover {
  color: #fff;
}
@media screen and (max-width: 989px) {
  .btn {
    min-height: 48px;
  }
  .btn-primary {
    padding: 17px 24px;
  }
  .btn-secondary {
    padding: 13.85px 41.55px;
  }
  .page-width-narrow {
    padding: 0 20px;
  }
}

/* Page */
.fw {
  --fw-teal: #008080;
  --fw-teal-soft: #5EA6A4;
  --fw-dark: #050808;
  --fw-soft: #F6F6F6;
  --fw-line: #E1E2E4;
  --fw-ink-soft: #4E4D51;
  --fw-ink-muted: #666666;
  --fw-on-dark-soft: #CECED3;
  --fw-on-dark-muted: #A5A4AC;
  --fw-on-dark-line: rgba(255, 255, 255, 0.14);
  --fw-error: #B3261E;
  --fw-radius-section: 40px;
  --fw-section-y: clamp(56px, 6vw, 80px);
  --fw-hero-gap: 13px;
  --fw-acc-indent: clamp(52px, 4.6vw, 66px);
  --fw-acc-size: clamp(20px, 1.8vw, 26px);
  --fw-page: #F5F2ED;

  position: relative;
  color: #000;
  background: var(--fw-page);
  /* Stops the hero's top margin collapsing through this wrapper, which would push the header down. */
  display: flow-root;
}
.fw [hidden] {
  display: none !important;
}
.fw-sprite {
  position: absolute;
}

/* Shared type */
/* Small label chip above headings. */
/* Section labels: plain text above the heading, no pill. */
.fw-eyebrow {
  display: block;
  font-size: clamp(20px, 1.67vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #4E4D51;
  margin: 0 0 clamp(14px, 1.4vw, 20px);
}
.fw-eyebrow--light {
  color: rgba(255, 255, 255, 0.82);
}
/* Two-tone headings on a dark background: a bright first line, and a dimmer ending. */
.fw-hero-title,
.fw-end .fw-h2 {
  color: var(--fw-on-dark-muted);
}
.fw-title-lead {
  display: block;
  color: #fff;
}
.fw-h2 {
  font-weight: 400;
  font-size: clamp(30px, 3.5vw, 52px);
  line-height: 1.1;
  letter-spacing: var(--inter-letter-spacing);
  text-wrap: balance;
  margin: 0;
}
.fw-lede {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  letter-spacing: -0.01em;
  margin: 24px 0 0;
}
.fw-cta-row {
  margin-top: 36px;
}

/* Sections fade up as they scroll into view. Only applies once script.js has run, so nothing stays hidden without it. */
.js .fw-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.js .fw-reveal--2 {
  transition-delay: 0.15s;
}
.js .fw-reveal--3 {
  transition-delay: 0.3s;
}
.js .fw-reveal--4 {
  transition-delay: 0.45s;
}
.js .is-visible .fw-reveal {
  opacity: 1;
  transform: none;
}

/* Header */
.fw-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
}
.fw-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
}
.fw-lockup-link {
  color: #fff;
  border-radius: 4px;
}
.fw-lockup-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}
.fw-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.fw-lockup svg {
  display: block;
}
.fw-lockup-shopify {
  width: 104px;
  height: 29px;
}
.fw-lockup-bevy {
  width: 67px;
  height: 25px;
}
.fw-lockup-x {
  font-size: 18px;
  line-height: 1;
  color: var(--fw-on-dark-muted);
}
/* On the cream form overlay the wordmarks switch to black. */
.fw-overlay .fw-lockup {
  color: #000;
}
.fw-overlay .fw-lockup-x {
  color: var(--fw-ink-muted);
}
.fw .fw-header-cta {
  min-height: 44px;
  padding: 10px 26px;
  font-size: 14px;
}

/* Hero */
/* The hero is a rounded panel inset from the page edges, and the only place the gradient appears: black behind
   the copy, building to a bright corner at the bottom right, with a glow at the bottom left. */
/* --fw-hero-p runs from 0 to 1 as the hero scrolls away (set by script.js). It grows the cover and narrows the
   background panel; neither changes the layout. */
.fw-hero {
  --fw-hero-p: 0;
  --fw-hero-narrow: 7%; /* how far each side of the background pulls in at the end */
  position: relative;
  isolation: isolate;
  width: calc(100% - 2 * var(--fw-hero-gap));
  /* Flush with the top of the window; inset only at the sides and below. */
  margin: 0 auto var(--fw-hero-gap);
  color: #fff;
}
/* The background panel: square at the top, rounded at the bottom. It narrows by clipping its sides, so the content
   above it never moves. The gradient is the fallback for the glass canvas, in the same three greens. */
.fw-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 0 var(--fw-radius-section) var(--fw-radius-section);
  background:
    radial-gradient(55% 45% at 10% 100%, #558B48 0, rgba(85, 139, 72, 0) 100%),
    radial-gradient(70% 70% at 85% 95%, #558B48 0, rgba(85, 139, 72, 0.5) 35%, rgba(85, 139, 72, 0) 75%),
    radial-gradient(90% 80% at 55% 70%, #082219 0, rgba(8, 34, 25, 0) 100%),
    #031411;
  clip-path: inset(0 calc(var(--fw-hero-p) * var(--fw-hero-narrow)) round 0 0 var(--fw-radius-section) var(--fw-radius-section));
}
/* Noise texture over the gradient, multiplied in. It tiles at its own pixel size (750px), so the grain stays the
   same size on every screen instead of stretching with it. */
.fw-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fw-noise-image) 0 0 / 750px 750px repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Fractal glass layer: sits over the CSS gradient, under the content, and fades in once its first frame is drawn. */
.fw-hero-glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.fw-hero-glass.is-ready {
  opacity: 1;
}
.fw-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding-top: clamp(112px, 15vh, 148px);
  padding-bottom: clamp(64px, 10vh, 104px);
}
.fw-hero-title {
  font-weight: 400;
  font-size: clamp(38px, 5.3vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  margin: 0;
}
.fw-hero-sub {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--fw-on-dark-muted);
  margin: 24px 0 0;
  max-width: 520px;
}
/* The cover grows by up to 20% as the hero scrolls away, using transform so the layout stays put. Its shadow drops
   lower and spreads wider as it grows, as if it were lifting off the page. */
.fw-book {
  position: relative;
  width: min(100%, 460px, 62vh);
  aspect-ratio: 612 / 792;
  margin-inline: auto;
  transform: scale(calc(1 + 0.2 * var(--fw-hero-p)));
  will-change: transform;
}
/* The shadow drops lower and softens as the cover grows. */
.fw-book img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px 6px 6px 3px;
  filter:
    drop-shadow(0 calc(24px + 20px * var(--fw-hero-p)) calc(28px + 24px * var(--fw-hero-p)) rgba(0, 0, 0, 0.5))
    drop-shadow(0 calc(4px + 4px * var(--fw-hero-p)) calc(8px + 6px * var(--fw-hero-p)) rgba(0, 0, 0, 0.3));
  /* Breathing: a slow rise and fall with a hint of growth, on the image so it stacks with the scroll growth on
     .fw-book. Off for reduced motion (see the reduced-motion rule at the end). */
  animation: fw-breathe 6s ease-in-out infinite;
}
@keyframes fw-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.012);
  }
}

/* What this whitepaper covers */
.fw-covers,
.fw-why,
.fw-quote {
  position: relative;
  /* Sits straight on the page fill; one section of space between blocks, not two. */
  padding: var(--fw-section-y) 0 0;
}
.fw-quote {
  padding-bottom: var(--fw-section-y);
}
.fw-quote[hidden] {
  display: none;
}
/* While the testimonial is hidden, the tiles section takes over its bottom spacing before the closing block. */
.fw-why:has(+ .fw-quote[hidden]) {
  padding-bottom: var(--fw-section-y);
}
.fw-covers-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
/* The book slides in from off-screen on the left, so the section clips sideways overflow. */
.fw-covers {
  overflow-x: clip;
}

/* Flipbook under the section heading. script.js sets three values on .fw-flip-stage as the section scrolls:
   --enter (0 to 1) slides the closed book in from the left and fades it up; --f1 and --f2 (0 to 1) turn leaf 1 and
   leaf 2. The stage is a two-page spread, shifted left by a page while the book is closed (see .fw-flip-stage).
   Pages keep the same size throughout. */
/* The slide-in and fade live on the wrapper: fading the stage itself would flatten its 3D and break the leaf order. */
/* The area holds the book and its fog, so the fog is exactly as tall as the book. */
.fw-flip-area {
  position: relative;
  margin-top: clamp(32px, 4vw, 48px);
}
.fw-flipbook {
  --enter: 0;
  --f1: 0;
  --f2: 0;
  max-width: 600px;
  opacity: var(--enter);
  transform: translateX(calc((1 - var(--enter)) * -110%));
}
/* Closed, the cover sits on the left, in line with the heading. As the first page turns, the book moves right by
   one page width, so the open spread still starts in line with the heading. */
.fw-flip-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1224 / 792;
  perspective: 1800px;
  transform-style: preserve-3d;
  transform: translateX(calc((1 - var(--f1)) * -50%));
}
.fw-flip-base,
.fw-flip-leaf {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
}
/* The page left under the last turn: a short "keep reading" page that opens the form. */
.fw-flip-base {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 12%;
  background: #FBFAF7;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 10px 30px rgba(3, 20, 17, 0.16), 0 2px 6px rgba(3, 20, 17, 0.1);
  /* A fixed depth just behind the leaves, on its own layer, so iOS Safari doesn't re-sort it against the turning page
     each frame (which made its text flicker). */
  transform: translateZ(-1px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.fw-flip-base::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 12%);
  pointer-events: none;
}
.fw-flip-base-title {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.fw .fw-flip-base-btn {
  align-self: flex-start;
  min-height: 0;
  margin-top: 6px;
  padding: 10px 16px;
  font-size: 12px;
  white-space: nowrap;
  background: #000;
  color: #fff;
  box-shadow: none;
}
/* No shimmer inside the book: repainting it during a page turn made the label flicker on phones. */
.fw .fw-flip-base-btn::before {
  animation: none;
  display: none;
}
/* On small screens the page is only about 170px wide: a smaller button. */
@media screen and (max-width: 639px) {
  .fw-flip-base {
    padding: 10%;
  }
  .fw .fw-flip-base-btn {
    padding: 8px 12px;
    font-size: 11px;
  }
}
/* A leaf turns on its left edge, the spine. The tiny translateZ keeps the leaves in order: leaf 1 sits on top while
   both are on the right, and leaf 2 lands on top of it on the left. */
.fw-flip-leaf {
  transform-origin: left center;
  transform-style: preserve-3d;
}
.fw-flip-leaf--1 {
  --f: var(--f1);
  transform: rotateY(calc(var(--f1) * -180deg)) translateZ(2px);
}
.fw-flip-leaf--2 {
  --f: var(--f2);
  transform: rotateY(calc(var(--f2) * -180deg)) translateZ(1px);
}
.fw-flip-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 10px 30px rgba(3, 20, 17, 0.16), 0 2px 6px rgba(3, 20, 17, 0.1);
}
.fw-flip-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fw-flip-face--front {
  border-radius: 0 4px 4px 0;
}
.fw-flip-face--back {
  transform: rotateY(180deg);
  border-radius: 4px 0 0 4px;
}
/* Shading. The front of a turning page darkens as it lifts away from the light, the back starts in shadow and
   brightens as it lands, and both keep a soft shadow where the paper curves into the spine. */
.fw-flip-face::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fw-flip-face--front::after {
  background-color: rgba(0, 0, 0, calc(var(--f) * 0.4));
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 10%);
}
.fw-flip-face--back::after {
  background-color: rgba(0, 0, 0, calc((1 - var(--f)) * 0.4));
  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 10%);
}
/* Fog: the page colour fading to clear across the left margin, so the book emerges from it rather than appearing. */
/* Sits just left of the book's column, reaching off the screen's left edge (the section clips the overflow), and
   fades to clear exactly where the column starts, so it never covers text or the book at rest. */
.fw-flip-fog {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  z-index: 1;
  width: 50vw;
  background: linear-gradient(90deg, var(--fw-page) 0, var(--fw-page) 75%, rgba(245, 242, 237, 0) 100%);
  pointer-events: none;
}
/* On desktop the first accordion heading lines up with the section heading, not the label above it: it starts
   below the label's line height plus its bottom margin. */
.fw-acc {
  list-style: none;
  margin: calc(1.3 * clamp(20px, 1.67vw, 24px) + clamp(14px, 1.4vw, 20px)) 0 0;
  padding: 0;
}
.fw-acc-heading {
  margin: 0;
  font: inherit;
}
.fw-acc-item + .fw-acc-item .fw-acc-heading {
  border-top: 1px solid var(--fw-line);
}
/* Number, title and icon share one top edge, so a wrapped title never pushes its number out of line. */
.fw-acc-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 32px 0;
  font-size: var(--fw-acc-size);
  line-height: 1.2;
  letter-spacing: -0.025em;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}
/* The first heading starts level with the section label on the left. */
.fw-acc-item:first-child .fw-acc-trigger {
  padding-top: 0;
}
.fw-acc-trigger:focus-visible {
  outline: 2px solid var(--fw-teal);
  outline-offset: 4px;
  border-radius: 4px;
}
/* Step number: a fixed-width column so titles and bullets line up, muted until the step is open. */
.fw-acc-num {
  flex: none;
  /* The trigger's 24px gap follows, so title and bullets both start at --fw-acc-indent. */
  width: calc(var(--fw-acc-indent) - 24px);
  color: #A5A4AC;
  transition: color 0.3s ease;
}
.fw-acc-item.is-open .fw-acc-num {
  color: var(--fw-teal);
}
.fw-acc-title {
  display: block;
  flex: 1;
}
/* A bare black plus that turns into a minus when open. */
.fw-acc-icon {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  /* Centres the icon on the title's first line, since the row is top-aligned. */
  margin-top: calc(var(--fw-acc-size) * 0.6 - 20px);
}
.fw-acc-icon::before,
.fw-acc-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 1px;
  background: #000;
  transition: transform 0.3s ease;
}
.fw-acc-icon::after {
  transform: rotate(90deg);
}
.fw-acc-item.is-open .fw-acc-icon::after {
  transform: rotate(0deg);
}
.fw-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, visibility 0.3s;
}
.fw-acc-item.is-open .fw-acc-panel {
  grid-template-rows: 1fr;
  visibility: visible;
}
.fw-acc-panel-clip {
  overflow: hidden;
  min-height: 0;
}
.fw-acc-points {
  list-style: none;
  margin: 0;
  padding: 0 0 28px var(--fw-acc-indent);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--fw-ink-soft);
  /* Two columns of short points, read across. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}
.fw-acc-points li {
  position: relative;
  padding-left: 26px;
}
@media screen and (max-width: 420px) {
  .fw-acc-points {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Check mark: two borders of a small box, turned 45 degrees. */
.fw-acc-points li::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 11px;
  border: solid var(--fw-teal);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Problems get a cross instead: two short bars crossed at 45 degrees. */
.fw-acc-points--cons li::before,
.fw-acc-points--cons li::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 1px;
  width: 13px;
  height: 2px;
  border: 0;
  border-radius: 1px;
  background: var(--fw-error);
  transform: rotate(45deg);
}
.fw-acc-points--cons li::after {
  transform: rotate(-45deg);
}

/* Why it is important */
.fw-why-head {
  max-width: 900px;
}
.fw-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding: 0;
}
.fw-tile {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: clamp(24px, 2.4vw, 32px);
  background: #fff;
  border-radius: 16px;
}
/* Line icon above each tile heading, sitting closer to the heading than the tile's usual gap. Its stroke uses the
   blue-to-green gradient defined once in index.html (#fw-icon-gradient). */
.fw-tile-icon {
  flex: none;
  width: 32px;
  height: 32px;
  margin-bottom: -12px;
  fill: none;
  stroke: url(#fw-icon-gradient) #4770FF;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fw-tile-title {
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.12;
  letter-spacing: var(--inter-letter-spacing);
  margin: 0;
}
.fw-tile-text {
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--fw-ink-soft);
  margin: auto 0 0;
}

/* Testimonial */
.fw-quote-figure {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  margin: 0;
}
.fw-quote-text {
  position: relative;
  padding-left: clamp(0px, 5vw, 72px);
}
.fw-quote-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
@media screen and (max-width: 989px) {
  .fw-quote-figure {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}
/* The star mark (assets/bevy/images/2027-furniture-whitepaper/star.svg) in place of a quotation mark: above the quote on narrow screens, in the left
   gutter beside its first line on desktop. */
.fw-quote-text::before {
  content: '';
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 20px;
  background: var(--fw-star-image) center / contain no-repeat;
}
@media screen and (min-width: 990px) {
  .fw-quote-text::before {
    position: absolute;
    top: 4px;
    left: 0;
    margin: 0;
  }
}
.fw-quote-figure blockquote {
  font-size: clamp(25px, 2.8vw, 40px);
  line-height: 1.22;
  letter-spacing: var(--inter-letter-spacing);
  margin: 0;
}
.fw-quote-figure figcaption {
  font-size: 16px;
  line-height: 1.4;
  color: var(--fw-ink-soft);
  margin-top: 32px;
}
.fw-quote-figure strong {
  display: block;
  font-weight: 500;
  color: #000;
}

/* Ending CTA */
/* Shares the hero's three greens. The glass canvas covers this block and the footer below it as one surface; this
   gradient is the fallback until it loads. */
.fw-end {
  position: relative;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(55% 60% at 10% 0%, rgba(85, 139, 72, 0.7) 0, rgba(85, 139, 72, 0) 100%),
    radial-gradient(60% 70% at 90% 0%, rgba(85, 139, 72, 0.6) 0, rgba(85, 139, 72, 0) 100%),
    #031411;
}
.fw-end-inner {
  /* More room than the other blocks so the closing ask stands on its own. */
  padding-top: clamp(96px, 11vw, 180px);
  padding-bottom: clamp(96px, 11vw, 180px);
  text-align: center;
}
.fw-end .fw-h2 {
  max-width: 820px;
  margin-inline: auto;
}
.fw-end .fw-lede {
  color: var(--fw-on-dark-soft);
  margin-top: 20px;
}

/* Footer */
.fw-footer {
  /* Overlaps by a pixel so the grey page can't show as a hairline when the sections land on fractional pixels. */
  position: relative;
  margin-top: -1px;
  /* The base colour the closing block's glass fades into at its bottom edge, so the two meet without a seam. Solid on
     purpose: it doesn't depend on the glass loading or measuring correctly (an earlier see-through footer could show
     the cream page on iPhone). */
  background: #031411;
  color: var(--fw-on-dark-muted);
  font-size: 14px;
  line-height: 1.5;
}
/* The hero's noise texture over the closing block and the footer, multiplied in, tiled at its own 750px size. In the
   closing block it sits above the glass and below the copy; in the footer the links are lifted above it. */
.fw-end::after,
.fw-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fw-noise-image) 0 0 / 750px 750px repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.fw-end::after {
  z-index: -1;
}
.fw-footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.fw-footer-inner::before {
  content: '';
  flex: 0 0 100%;
  height: 1px;
  background: var(--fw-on-dark-line);
  margin-bottom: 12px;
}
.fw-footer p {
  margin: 0;
}
.fw-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fw-footer a {
  color: inherit;
  text-underline-offset: 3px;
}
.fw-footer a:hover {
  color: #fff;
}

/* Sticky download bar: floats above the bottom of the screen, inside the page's content width. Hidden below the
   bottom edge until script.js adds .is-visible, then rises and fades in; it drops away the same way. */
.fw-sticky {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 50;
  width: min(1240px, calc(100% - 40px));
  color: #000;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(3, 20, 17, 0.22), 0 4px 12px rgba(3, 20, 17, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(100% + 28px));
  transition:
    transform 0.4s cubic-bezier(0.55, 0, 1, 0.45),
    opacity 0.3s ease,
    visibility 0s linear 0.4s;
}
.fw-sticky.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    visibility 0s;
}
.fw-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 14px 14px 14px 28px;
}
.fw-sticky-title {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
/* Black button on the white bar, like the form's. */
.fw .fw-sticky-btn {
  --fw-shimmer: rgba(255, 255, 255, 0.28);
  flex: none;
  min-height: 52px;
  padding: 12px 32px;
  background: #000;
  color: #fff;
}
.fw .fw-sticky-btn::after {
  background: rgba(255, 255, 255, 0.18);
}
.fw .fw-sticky-btn:focus-visible {
  outline-color: var(--fw-teal);
}

/* Overlay */
.fw-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: #000;
  background: var(--fw-page);
  --fw-overlay-top: clamp(110px, 16vh, 160px);
}
/* On touch screens script.js focuses the dialog itself (not a field), so it gets no outline. */
.fw-overlay:focus {
  outline: none;
}
/* Both halves share the page's cream fill, and sit inside the same 1240px content width as the landing page
   (page-width-narrow: 1320px less 40px each side), so the logo lands where the header logo does. */
.fw-overlay[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-inline: max(40px, calc((100% - 1240px) / 2));
  /* Slides up from the bottom of the screen. backwards, not both: a transform held after the animation would stop
     the fixed close button staying fixed. */
  animation: fw-overlay-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
/* script.js adds this before closing, and closes the dialog once the slide down ends. */
.fw-overlay.is-closing {
  animation: fw-overlay-out 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
/* The page dims behind the form as it rises, and brightens again as it drops. */
.fw-overlay::backdrop {
  background: rgba(3, 20, 17, 0.6);
  animation: fw-backdrop-in 0.5s ease backwards;
}
.fw-overlay.is-closing::backdrop {
  animation: fw-backdrop-out 0.35s ease forwards;
}
@keyframes fw-overlay-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
@keyframes fw-overlay-out {
  from {
    transform: none;
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes fw-backdrop-in {
  from {
    opacity: 0;
  }
}
@keyframes fw-backdrop-out {
  to {
    opacity: 0;
  }
}
/* A bare cross, level with the logo, its right edge on the container line where the form ends. The 44px box
   keeps the tap target; the cross sits at its right edge. */
.fw-overlay-close {
  position: absolute;
  top: 27px;
  right: max(40px, calc((100% - 1240px) / 2));
  z-index: 2;
  display: grid;
  place-items: center end;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  cursor: pointer;
  transition: color 0.2s ease;
}
.fw-overlay-close:hover {
  color: var(--fw-teal);
}
.fw-overlay-close:focus-visible {
  outline: 2px solid var(--fw-teal);
  outline-offset: 2px;
}
.fw-overlay-copy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Same top offset as the form column, so the label and the first field start on one line. */
  padding: var(--fw-overlay-top) clamp(24px, 4vw, 64px) 0 0;
}
/* The logo sits above that line, where the header logo is. */
.fw-overlay-copy > .fw-lockup {
  position: absolute;
  top: 34px;
  left: 0;
}
.fw-overlay-title {
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.04;
  letter-spacing: var(--inter-letter-spacing);
  margin: 0;
}
.fw-overlay-sub {
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--fw-ink-soft);
  margin: 18px 0 0;
}
.fw-overlay-main {
  overflow-y: auto;
  display: flex;
  /* Starts level with the title, below the "Free whitepaper" label (its line height plus its bottom margin). */
  padding: calc(var(--fw-overlay-top) + 1.3 * clamp(20px, 1.67vw, 24px) + clamp(14px, 1.4vw, 20px)) 0 32px clamp(24px, 4vw, 64px);
}
.fw-overlay-main-inner {
  width: 100%;
  max-width: 540px;
  /* Right edge on the container line, matching the page. */
  margin: 0 0 auto auto;
}
/* base.css draws the focus ring in the button's white text color, which would vanish on this white panel. */
.fw-overlay-main .btn:focus-visible {
  outline-color: var(--fw-teal);
}

/* Form */
.fw-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 24px;
}
.fw-form-intro {
  width: 100%;
  margin-bottom: 4px;
}
.fw-form-title {
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.15;
  letter-spacing: var(--inter-letter-spacing);
  margin: 0;
}
.fw-form-sub {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--fw-ink-soft);
  margin: 8px 0 0;
}
.fw-field {
  width: 100%;
}
.fw-field--half {
  width: calc(50% - 12px);
}
.fw-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.fw-field label span[aria-hidden] {
  color: var(--fw-teal);
  margin-left: 2px;
}
.fw-field input:not([type='checkbox']),
.fw-field select {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 6px;
  padding: 0 14px;
  /* Subtle stroke so the white fields hold their edge on the cream background. */
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: 8px;
  background-color: #fff;
  color: #000;
  font: inherit;
  font-size: 16px;
  letter-spacing: -0.01em;
  outline: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fw-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
}
.fw-field select:invalid {
  color: var(--fw-ink-muted);
}
.fw-field select option,
.fw-field select optgroup {
  color: #000;
}
.fw-field input:not([type='checkbox']):focus,
.fw-field select:focus {
  border-color: var(--fw-teal);
  box-shadow: 0 0 0 1px var(--fw-teal);
}
.fw-field.has-error input:not([type='checkbox']),
.fw-field.has-error select {
  border-color: var(--fw-error);
  box-shadow: 0 0 0 0.5px var(--fw-error);
}
.fw-field-error {
  font-size: 13px;
  line-height: 1.4;
  color: var(--fw-error);
  margin: 6px 0 0;
}
.fw-field-error:empty {
  display: none;
}
.fw .fw-consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--fw-ink-soft);
  cursor: pointer;
}
.fw-consent input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid #000;
  border-radius: 4px;
  background: #fff center / 16px no-repeat;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.fw-consent input:checked {
  border-color: var(--fw-teal);
  background-color: var(--fw-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fw-consent input:focus-visible {
  outline: 2px solid var(--fw-teal);
  outline-offset: 2px;
}
.fw-field.has-error .fw-consent input {
  border-color: var(--fw-error);
}
.fw-consent a {
  color: inherit;
  text-underline-offset: 2px;
}
.fw-consent a:hover {
  color: var(--fw-teal);
}
.fw-consent-field .fw-field-error {
  padding-left: 32px;
}
.fw-form-submit {
  width: 100%;
}
.fw-form-submit .btn {
  width: 100%;
}
.fw-form-submit .btn:disabled {
  opacity: 0.7;
  cursor: progress;
}
.fw-form-message {
  font-size: 14px;
  line-height: 1.4;
  color: var(--fw-error);
  margin: 12px 0 0;
}
/* Stays rendered while empty, because screen readers can miss a role="alert" that only appears when it fills. */
.fw-form-message:empty {
  margin: 0;
}
.fw-honeypot {
  position: absolute;
  left: -9999px;
}
.fw-recaptcha-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fw-ink-muted);
  margin: 12px 0 0;
}
.fw-recaptcha-note a {
  color: inherit;
  text-underline-offset: 2px;
}
.fw-recaptcha-note a:hover {
  color: var(--fw-teal);
}
/* The floating badge would sit over the sticky download bar; the notice under the submit button replaces it. */
.grecaptcha-badge {
  visibility: hidden;
}
/* Keeps autofilled fields white instead of the browser's tinted fill. */
.fw-field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px #fff inset;
}
.fw-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px #fff inset, 0 0 0 2px var(--fw-teal);
}

/* Success state */
.fw-success:focus {
  outline: 0;
}
/* After a successful submit the overlay keeps only the logos, the close button, and the check, heading and download
   button centred on the screen. The form column spans the full width, sitting over the copy column, which now only
   holds the logos. */
.fw-overlay.is-success .fw-overlay-copy-text {
  display: none;
}
.fw-overlay.is-success .fw-overlay-copy {
  grid-row: 1;
  grid-column: 1;
}
.fw-overlay.is-success .fw-overlay-main {
  grid-row: 1;
  grid-column: 1 / -1;
  padding: 96px 0;
}
.fw-overlay.is-success .fw-overlay-main-inner {
  max-width: 440px;
  margin: auto;
}
.fw-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fw-success[hidden] {
  display: none;
}
.fw-success-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: rgba(0, 128, 128, 0.12);
  color: var(--fw-teal);
}
.fw-success .btn {
  margin-top: 28px;
}

/* Tablet and phone */
@media screen and (max-width: 989px) {
  .fw {
    --fw-radius-section: 28px;
    --fw-hero-gap: 5px;
  }
  .fw-header-inner {
    padding-top: 20px;
  }
  .fw-hero-grid,
  .fw-covers-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Stacked here: label, heading, accordion, then the flipbook last. The heading column's wrapper steps aside
     (display: contents) so the flipbook can be reordered below the accordion; spacing moves to margins. */
  .fw-covers-grid {
    gap: 0;
  }
  .fw-covers-grid > div {
    display: contents;
  }
  .fw-acc {
    margin-top: 32px;
  }
  .fw-flip-area {
    order: 1;
    margin-top: 48px;
  }
  /* Bullets start under the step number rather than the title, for more room on narrow screens. */
  .fw-acc-points {
    padding-left: 0;
  }
  /* Tighter gap between the number and the title: 12px instead of the row's 24px. The number keeps a fixed width
     so all six titles still line up. */
  .fw-acc-num {
    width: 1.4em;
    margin-right: -12px;
  }
  .fw-hero-grid {
    padding-top: 100px;
    padding-bottom: 56px;
  }
  /* The copy sits above the cover here, so the color stays in the lower part of the hero. */
  .fw-hero {
    --fw-hero-narrow: 4%;
  }
  .fw-hero-bg {
    background:
      radial-gradient(90% 28% at 0% 100%, #558B48 0, rgba(85, 139, 72, 0) 100%),
      radial-gradient(130% 52% at 100% 100%, #558B48 0, rgba(85, 139, 72, 0.5) 30%, rgba(85, 139, 72, 0) 75%),
      radial-gradient(120% 50% at 50% 80%, #082219 0, rgba(8, 34, 25, 0) 100%),
      #031411;
    /* Three quarters of the hero's height, so the cover reaches out below the panel. */
    bottom: 25%;
  }
  .fw-hero-title {
    font-size: clamp(38px, 8vw, 64px);
  }
  .fw-book {
    width: min(72%, 340px);
  }
  .fw-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fw-overlay[open] {
    display: block;
    overflow-y: auto;
    padding-inline: 0;
  }
  .fw-overlay-close {
    position: fixed;
    top: 14px;
    right: 20px;
  }
  .fw-overlay-copy {
    padding: 22px 20px 0;
  }
  .fw-overlay-copy > .fw-lockup {
    position: static;
  }
  /* Two lines: 34px where "Connecting the showroom" fits (screens about 430px and up), scaling down with the
     screen below that so the first line still fits inside the 20px margins. */
  .fw-overlay-title {
    font-size: min(34px, calc((100vw - 40px) / 11.6));
  }
  .fw-overlay-copy-text {
    margin-top: 24px;
  }
  .fw-overlay-main {
    display: block;
    overflow: visible;
    padding: 28px 20px 40px;
  }
  /* Fills the screen below the logos so the message sits in the middle, as on desktop. */
  .fw-overlay.is-success .fw-overlay-main {
    display: flex;
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    padding: 32px 20px 80px;
  }
}

@media screen and (max-width: 639px) {
  .fw .fw-header-cta {
    display: none;
  }
  /* Stacked on phones: the title above a full-width button. */
  .fw-sticky {
    bottom: 10px;
    width: calc(100% - 20px);
    border-radius: 18px;
  }
  .fw-sticky-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
    text-align: center;
  }
  .fw .fw-sticky-btn {
    width: 100%;
    min-height: 48px;
  }
  .fw-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
  .fw-acc-points {
    padding-right: 0;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fw *,
  .fw *::before,
  .fw *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .fw-reveal {
    opacity: 1;
    transform: none;
  }
}