/*
Theme Name:   FastCash
Theme URI:    https://fastcash4iphone.com
Author:       FastCash
Description:  Standalone theme for the FastCash trade-in platform, carrying the approved 11a desktop and 10a mobile designs. Built for Elementor (free) — the theme owns the header, footer and page templates, because Theme Builder is a Pro feature and a site should not depend on one.
Version:      2.12.0
Requires at least: 6.4
Requires PHP: 8.1
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  fastcash
Tags:         e-commerce, custom-menu, custom-logo, full-width-template, block-styles

Design tokens are extracted from the approved design files, not eyeballed.
Change a value here and it changes everywhere — theme, plugin front end, and
the WordPress admin screens all read the same names.
*/

/* ── Tokens ─────────────────────────────────────────────────── */
:root{
  --fc-green:        oklch(0.46 0.15 152);
  --fc-green-deep:   oklch(0.40 0.13 152);
  --fc-green-bright: oklch(0.52 0.17 152);
  --fc-green-ink:    oklch(0.42 0.12 157);
  --fc-lime:         oklch(0.87 0.20 126);

  --fc-ink:          oklch(0.19 0.02 155);
  --fc-ink-2:        oklch(0.26 0.02 155);
  --fc-ink-3:        oklch(0.30 0.02 155);
  --fc-body:         oklch(0.42 0.02 150);
  --fc-muted:        oklch(0.52 0.02 150);
  --fc-muted-2:      oklch(0.70 0.015 145);

  --fc-white:        oklch(1 0 0);
  --fc-paper:        oklch(0.988 0.004 150);
  --fc-tint:         oklch(0.99 0.012 140);
  --fc-tint-2:       oklch(0.96 0.012 150);
  --fc-mint:         oklch(0.955 0.055 148);
  --fc-mint-2:       oklch(0.945 0.048 148);

  --fc-line:         oklch(0.93 0.012 150);
  --fc-line-2:       oklch(0.94 0.008 150);
  --fc-line-3:       oklch(0.87 0.015 145);
  --fc-line-dark:    oklch(1 0 0 / 0.12);

  --fc-amber:        oklch(0.78 0.16 85);
  --fc-red:          oklch(0.55 0.16 32);

  --fc-font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --fc-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fc-t-display: clamp(30px, 4.2vw, 58px);
  --fc-t-h1:      clamp(30px, 4vw, 48px);
  --fc-t-h2:      clamp(28px, 3.6vw, 44px);
  --fc-t-h3:      clamp(26px, 3.2vw, 38px);
  --fc-t-h4:      clamp(22px, 2.5vw, 30px);
  --fc-t-lede:    clamp(15px, 1.3vw, 17.5px);

  --fc-r-sm:6px; --fc-r:11px; --fc-r-md:14px; --fc-r-lg:16px; --fc-r-xl:20px;
  --fc-shadow:   0 1px 3px oklch(0 0 0 / 0.06);
  --fc-shadow-2: 0 16px 32px -18px oklch(0.55 0.16 150 / 0.8);

  --fc-gut: clamp(18px, 4vw, 48px);
  --fc-max: 1320px;
  --fc-header-h: 72px;
}

/* ── Reset, lightly ─────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; font-family:var(--fc-font); font-size:16px; line-height:1.6;
  color:var(--fc-body); background:var(--fc-white); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--fc-green); text-decoration:none; }
a:hover{ color:var(--fc-green-deep); }
button{ font:inherit; }

/* Heading scale, taken from the layouts.
   The big clamps belong to page titles ONLY — the banner and the homepage
   hero. Applying them globally is what turned "My offers" and "Payouts" into
   page-sized headings inside a panel. The design sizes its own headings inline
   wherever it cares; these are the defaults for everything that does not. */
h1,h2,h3,h4,h5{ color:var(--fc-ink); margin:0 0 .5em; }
h1{ font-size:clamp(26px,3.2vw,38px); font-weight:800; letter-spacing:-.035em; line-height:1.05; }
h2{ font-size:22px; font-weight:700; letter-spacing:-.024em; line-height:1.2; }
h3{ font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.25; }
h4{ font-size:17px; font-weight:600; letter-spacing:-.015em; }
h5{ font-size:15px; font-weight:600; }

/* Only the banner and the hero carry a page-sized title. */
.fc-banner h1{ font-size:clamp(30px,4vw,46px); letter-spacing:-.038em; line-height:1.02; }
p{ margin:0 0 1em; }

/* Anyone tabbing gets a visible ring. Removing it is an accessibility
   regression that is invisible to whoever removed it. */
:focus-visible{ outline:2px solid var(--fc-green); outline-offset:3px; border-radius:3px; }

.fc-skip{
  position:absolute; left:-9999px; top:0; background:var(--fc-ink); color:#fff;
  padding:12px 20px; z-index:9999; border-radius:0 0 var(--fc-r) 0;
}
.fc-skip:focus{ left:0; color:#fff; }

.fc-wrap{ max-width:var(--fc-max); margin:0 auto; padding-inline:var(--fc-gut); }
.fc-money{ font-family:var(--fc-mono); font-weight:600; letter-spacing:-.02em; }
.fc-kicker{
  font-family:var(--fc-mono); font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fc-green);
}

/* ── Header ─────────────────────────────────────────────────── */
.fc-header{
  background:var(--fc-white); border-bottom:3px solid var(--fc-green-ink);
  position:sticky; top:0; z-index:100;
}
.admin-bar .fc-header{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .fc-header{ top:46px; } }

.fc-header-inner{
  max-width:var(--fc-max); margin:0 auto; padding:14px var(--fc-gut);
  display:flex; align-items:center; gap:18px;
}
.fc-brand{ display:flex; flex-direction:column; gap:2px; text-decoration:none; }
.fc-brand strong{ font-size:20px; font-weight:800; letter-spacing:-.03em; color:var(--fc-ink); }
.fc-brand strong em{ font-style:normal; color:var(--fc-green); }
.fc-brand span{ font-size:11.5px; color:var(--fc-muted); }

.fc-nav{ display:flex; gap:4px; margin-left:14px; }
.fc-nav a{
  color:var(--fc-ink-2); font-size:14.5px; font-weight:600; padding:9px 13px;
  border-radius:var(--fc-r); transition:background .14s ease, color .14s ease;
}
.fc-nav a:hover, .fc-nav .current-menu-item > a{ background:var(--fc-mint); color:var(--fc-green-deep); }

.fc-header-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.fc-track{ font-size:14px; font-weight:600; color:var(--fc-ink-2); padding:9px 13px; }
.fc-box{
  display:inline-flex; align-items:center; gap:8px; background:var(--fc-ink); color:#fff;
  border-radius:var(--fc-r-md); padding:11px 17px; font-size:14px; font-weight:700;
}
.fc-box:hover{ background:var(--fc-green-deep); color:#fff; }
.fc-box .count{ font-family:var(--fc-mono); }

.fc-burger{ display:none; background:none; border:0; padding:10px; cursor:pointer; margin-left:auto; }
.fc-burger span{ display:block; width:22px; height:2px; background:var(--fc-ink); margin:4px 0; border-radius:2px; }

@media (max-width:960px){
  .fc-nav, .fc-track{ display:none; }
  .fc-burger{ display:block; }
  .fc-nav.is-open{
    display:flex; flex-direction:column; position:absolute; left:0; right:0; top:100%;
    background:var(--fc-white); border-bottom:1px solid var(--fc-line);
    padding:10px var(--fc-gut) 18px; margin:0; gap:2px;
  }
  .fc-nav.is-open a{ padding:14px 12px; font-size:16px; }
}

/* ── Buttons ────────────────────────────────────────────────── */
.fc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:15.5px; line-height:1; padding:15px 26px;
  border-radius:var(--fc-r-md); border:1.5px solid transparent; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .12s ease;
}
.fc-btn-primary{ background:var(--fc-green); color:#fff; box-shadow:var(--fc-shadow-2); }
.fc-btn-primary:hover{ background:var(--fc-green-deep); color:#fff; }
.fc-btn-ghost{ background:var(--fc-white); color:var(--fc-ink); border-color:var(--fc-line); }
.fc-btn-ghost:hover{ border-color:var(--fc-green); color:var(--fc-green-deep); }
.fc-btn:active{ transform:translateY(1px); }

/* ── Bands and cards ────────────────────────────────────────── */
.fc-band-white{ background:var(--fc-white); }
.fc-band-paper{ background:var(--fc-paper); }
.fc-band-mint { background:var(--fc-mint-2); }
.fc-band-dark {
  background:linear-gradient(160deg, var(--fc-ink) 0%, oklch(0.24 0.045 158) 100%); color:#fff;
}
.fc-band-dark h1,.fc-band-dark h2,.fc-band-dark h3{ color:#fff; }
.fc-band-dark .fc-kicker{ color:var(--fc-lime); }
.fc-section{ padding:clamp(48px,7vw,88px) 0; }

.fc-card{
  background:var(--fc-white); border:1px solid var(--fc-line);
  border-radius:var(--fc-r-lg); box-shadow:var(--fc-shadow);
}

/* ── Content ────────────────────────────────────────────────── */
.fc-content{ max-width:760px; margin:0 auto; padding:clamp(36px,6vw,72px) var(--fc-gut); }
.fc-content h2{ margin-top:1.6em; }
.fc-content ul,.fc-content ol{ padding-left:1.3em; margin-bottom:1em; }
.fc-content li{ margin-bottom:.4em; }
.fc-content blockquote{
  border-left:3px solid var(--fc-green); padding-left:20px; margin:1.5em 0;
  color:var(--fc-ink-2); font-size:18px;
}

/* ── Footer ─────────────────────────────────────────────────── */
.fc-footer{ background:var(--fc-ink); color:oklch(0.78 0.02 150); padding:clamp(44px,6vw,68px) 0 30px; }
.fc-footer-grid{ display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:34px; }
.fc-footer h5{
  color:#fff; font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  margin:0 0 14px; font-weight:700;
}
.fc-footer a{ color:oklch(0.78 0.02 150); display:block; padding:5px 0; font-size:14.5px; }
.fc-footer a:hover{ color:#fff; }
.fc-footer-bottom{
  border-top:1px solid var(--fc-line-dark); margin-top:36px; padding-top:22px;
  font-size:12.5px; display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between;
}
.fc-footer-legal{ display:flex; gap:16px; flex-wrap:wrap; }
@media (max-width:860px){ .fc-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .fc-footer-grid{ grid-template-columns:1fr; } }

/* ── Mobile (10a) ───────────────────────────────────────────── */
@media (max-width:782px){
  :root{ --fc-gut:18px; }
  /* 10a is built on generous tap targets. Nothing interactive below 48px. */
  .fc-btn{ min-height:52px; width:100%; padding:16px 24px; }
  .fc-box{ min-height:48px; }
}

/* ── Elementor ──────────────────────────────────────────────── */
/* Elementor sets its own container width; keep ours so a page built in the
   editor lines up with a page built in a template. */
.elementor-section.elementor-section-boxed > .elementor-container{ max-width:var(--fc-max); }
.elementor-page .fc-content{ max-width:none; padding:0; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ── App screens ────────────────────────────────────────────────
   Checkout, confirmation and dashboard. WooCommerce prints its own
   field markup and we restyle it here rather than rebuilding the
   fields — rebuilding looks identical and silently drops validation.
   ─────────────────────────────────────────────────────────────── */
.fc-checkout, .fc-confirm, .fc-dash{ background:var(--fc-paper); padding-block:clamp(32px,5vw,64px); }

.fc-checkout-head, .fc-confirm-head{ margin-bottom:28px; }
.fc-checkout-lede{ color:var(--fc-body); font-size:var(--fc-t-lede); max-width:58ch; }
.fc-back{ font-size:14.5px; font-weight:600; }
.fc-offer-number{ font-size:15px; color:var(--fc-body); }
.fc-offer-number strong{ color:var(--fc-ink); font-size:17px; margin-left:6px; }

.fc-checkout-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:start; }
@media (max-width:960px){ .fc-checkout-grid{ grid-template-columns:1fr; } }
.fc-checkout-side{ position:sticky; top:calc(var(--fc-header-h) + 16px); }
@media (max-width:960px){ .fc-checkout-side{ position:static; } }

.fc-step{
  background:var(--fc-white); border:1px solid var(--fc-line);
  border-radius:var(--fc-r-xl); margin-bottom:18px; overflow:hidden;
}
.fc-step-head{
  display:flex; align-items:center; gap:14px; padding:20px 24px;
  border-bottom:1px solid var(--fc-line-2);
}
.fc-step-head h2{ font-size:20px; font-weight:750; letter-spacing:-.024em; margin:0; }
.fc-step-n{
  width:30px; height:30px; flex:none; border-radius:10px; background:var(--fc-mint);
  color:var(--fc-green); display:grid; place-items:center;
  font-family:var(--fc-mono); font-size:14px; font-weight:600;
}
.fc-step-body{ padding:22px 24px; }
.fc-hint{ font-size:13.5px; color:var(--fc-muted); line-height:1.6; }
.fc-center{ text-align:center; }
.fc-pill-free{
  margin-left:auto; font-size:11.5px; font-weight:700; padding:5px 11px;
  border-radius:99px; background:var(--fc-mint); color:var(--fc-green);
}

/* WooCommerce fields, restyled */
.fc-fields .form-row{ margin:0 0 16px; padding:0; }
.fc-fields label{ display:block; font-size:13px; font-weight:600; color:var(--fc-ink); margin-bottom:6px; }
.fc-fields input[type=text], .fc-fields input[type=email], .fc-fields input[type=tel],
.fc-fields input[type=password], .fc-fields textarea, .fc-fields select, .fc-fields .select2-selection{
  width:100%; border:1px solid var(--fc-line-3); border-radius:var(--fc-r-md);
  padding:13px 15px; font-family:inherit; font-size:15.5px; background:var(--fc-white);
  color:var(--fc-ink);
}
.fc-fields input:focus, .fc-fields select:focus, .fc-fields textarea:focus{
  outline:none; border-color:var(--fc-green); box-shadow:0 0 0 3px oklch(0.46 0.15 152 / .12);
}
.fc-fields .required{ color:var(--fc-red); text-decoration:none; }
.woocommerce-invalid input{ border-color:var(--fc-red); }

/* Carrier picker */
.fc-carrier-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; margin:16px 0; }
.fc-carrier{
  display:flex; flex-direction:column; gap:3px; padding:16px;
  border:1.5px solid var(--fc-line); border-radius:var(--fc-r-lg); cursor:pointer;
  background:var(--fc-white); transition:border-color .16s ease, background .16s ease;
}
.fc-carrier:hover{ border-color:var(--fc-green-bright); }
.fc-carrier:has(input:checked){ border-color:var(--fc-green); background:var(--fc-mint); }
.fc-carrier input{ position:absolute; opacity:0; pointer-events:none; }
.fc-carrier-name{ font-weight:700; font-size:15.5px; color:var(--fc-ink); }
.fc-carrier-eta{ font-size:12.5px; color:var(--fc-muted); }
.fc-carrier-cost{ font-size:12.5px; font-weight:700; color:var(--fc-green); }

/* Order review */
.woocommerce-checkout-review-order table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.woocommerce-checkout-review-order th,
.woocommerce-checkout-review-order td{ padding:11px 0; border-bottom:1px solid var(--fc-line-2); text-align:left; }
.woocommerce-checkout-review-order td{ text-align:right; font-family:var(--fc-mono); }
.woocommerce-checkout-review-order .order-total td{ font-size:19px; color:var(--fc-green); font-weight:600; }
#place_order{
  width:100%; margin-top:16px; background:var(--fc-green); color:#fff; border:0;
  border-radius:var(--fc-r-md); padding:17px 26px; font-family:inherit; font-weight:700;
  font-size:16px; cursor:pointer; box-shadow:var(--fc-shadow-2);
}
#place_order:hover{ background:var(--fc-green-deep); }

.fc-assurances{ list-style:none; padding:0; margin:18px 0 0; }
.fc-assurances li{ position:relative; padding:7px 0 7px 24px; font-size:13.5px; color:var(--fc-body); }
.fc-assurances li::before{ content:"✓"; position:absolute; left:0; color:var(--fc-green); font-weight:700; }

.fc-steplist, .fc-timeline{ margin:0; padding-left:1.15em; }
.fc-steplist li, .fc-timeline li{ margin-bottom:9px; font-size:15px; color:var(--fc-body); }
.fc-notice-soft{
  background:var(--fc-mint); border:1px solid oklch(0.88 0.05 148);
  border-radius:var(--fc-r-md); padding:14px 17px; font-size:14.5px; color:var(--fc-ink-2);
}

/* Dashboard */
.fc-dash-head{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:22px; }
.fc-dash-head h1{ margin:0; font-size:clamp(26px,3.2vw,38px); }
.fc-dash-head .fc-btn{ margin-left:auto; width:auto; }
.fc-dash-status{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--fc-ink); color:#fff; border-radius:var(--fc-r-xl);
  padding:20px 24px; margin-bottom:20px;
}
.fc-dash-status-label{
  font-family:var(--fc-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fc-lime); border:1px solid var(--fc-line-dark); padding:5px 10px; border-radius:99px;
}
.fc-dash-status strong{ font-size:18px; font-weight:700; letter-spacing:-.02em; }
.fc-dash-status .fc-money{ margin-left:auto; font-size:20px; color:var(--fc-lime); }
.fc-dash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media (max-width:860px){ .fc-dash-grid{ grid-template-columns:1fr; } }
.fc-activity{ list-style:none; padding:0; margin:0; }
.fc-activity li{
  display:flex; gap:14px; justify-content:space-between; padding:11px 0;
  border-bottom:1px solid var(--fc-line-2); font-size:14px;
}
.fc-activity li span:first-child{ font-family:var(--fc-mono); color:var(--fc-green); }
.fc-empty{ color:var(--fc-muted); font-size:14px; padding:16px 0; }

/* ── Mobile, design 10a ─────────────────────────────────────────
   10a is not a squeezed 11a. It stacks to a single column, drops
   category and payout grids to 2-up, and puts a 48px floor under
   everything you can tap. A 44px target is the accessibility
   minimum; the design chose more, and on a page where someone is
   entering a price that judgement is worth keeping.
   ─────────────────────────────────────────────────────────────── */
@media (max-width:782px){
  /* Anything interactive clears the thumb test. */
  .fc-btn, .fc-box, .fc-carrier, #place_order{ min-height:52px; }
  .fc-nav.is-open a{ min-height:48px; display:flex; align-items:center; }
  .fc-fields input, .fc-fields select, .fc-fields textarea{ min-height:52px; font-size:16px; }

  /* 16px on inputs is deliberate: iOS Safari zooms the viewport on
     focus for anything smaller, which throws the layout sideways
     mid-form. */

  .fc-checkout-grid, .fc-dash-grid{ grid-template-columns:1fr; }
  .fc-carrier-grid{ grid-template-columns:1fr 1fr; }
  .fc-step{ border-radius:var(--fc-r-lg); }
  .fc-step-head{ padding:16px 18px; }
  .fc-step-body{ padding:18px; }
  .fc-step-head h2{ font-size:18px; }

  .fc-dash-head{ flex-direction:column; align-items:stretch; }
  .fc-dash-head .fc-btn{ margin-left:0; width:100%; }
  .fc-dash-status{ flex-direction:column; align-items:flex-start; gap:10px; }
  .fc-dash-status .fc-money{ margin-left:0; }

  .fc-activity li{ flex-wrap:wrap; gap:4px 12px; }

  /* The footer becomes a single readable column rather than four
     cramped ones. */
  .fc-footer-grid{ grid-template-columns:1fr; gap:26px; }
  .fc-footer-bottom{ flex-direction:column; gap:12px; }
}

/* Very small phones: the two-up grids give up gracefully. */
@media (max-width:400px){
  .fc-carrier-grid{ grid-template-columns:1fr; }
}


/* ── Fixes found on the live site, 7 Aug ────────────────────────
   Each of these was visible only once the pages were rendered.
   ─────────────────────────────────────────────────────────────── */

/* The tracking page inherited no colour tokens, so its submit button
   was white text on a transparent background — present, but invisible.
   The plugin's front-end blocks each declare their own; this gives the
   same set to anything that misses them. */
.fc4i-track, .fc4i-offer, .fc4i-confirm-shell{
  --fc-g: var(--fc-green);
  --fc-line: oklch(0.93 0.012 150);
  --fc-mut: var(--fc-muted);
}

/* Empty states: a single grey sentence in a box reads like a failure.
   Give them room and a way onward. */
.fc4i-notice{
  max-width:520px; margin:clamp(28px,6vw,64px) auto; padding:34px 28px;
  border:1px solid var(--fc-line); border-radius:var(--fc-r-xl);
  background:var(--fc-white); text-align:center; color:var(--fc-body);
}


/* ── Page banner ────────────────────────────────────────────────
   Every inner page opens with the same band, so the site reads as
   one thing rather than a set of pages that share a header. It is
   full-bleed, but its CONTENTS sit on the same container as the
   header — that alignment is the whole point of it.
   ─────────────────────────────────────────────────────────────── */
.fc-banner{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 300px at 88% -40%, oklch(0.87 0.20 126 / .22), transparent 62%),
    linear-gradient(175deg, var(--fc-mint) 0%, oklch(0.975 0.022 150) 100%);
  border-bottom:1px solid oklch(0.90 0.03 148);
}
/* A hairline of brand colour, so the band ends deliberately. */
.fc-banner::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--fc-green) 0%, var(--fc-lime) 55%, transparent 100%);
}
.fc-banner-inner{
  max-width:var(--fc-max); margin:0 auto;
  padding:clamp(30px,4.5vw,52px) var(--fc-gut) clamp(28px,4vw,46px);
  display:flex; align-items:flex-end; gap:28px; flex-wrap:wrap;
}
.fc-banner-text{ flex:1 1 420px; min-width:0; }
.fc-crumbs{
  display:flex; align-items:center; gap:7px; margin-bottom:11px;
  font-family:var(--fc-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fc-green-deep);
}
.fc-crumbs a{ color:var(--fc-green-deep); opacity:.72; }
.fc-crumbs a:hover{ opacity:1; }
.fc-crumbs i{ opacity:.4; font-style:normal; }
.fc-banner h1{ margin:0; font-size:clamp(30px,4vw,46px); font-weight:800;
  letter-spacing:-.038em; line-height:1.02; }
.fc-banner p{ margin:12px 0 0; max-width:56ch; font-size:var(--fc-t-lede);
  color:var(--fc-ink-2); line-height:1.6; }

/* Right-hand slot: a figure worth stating. Never decoration — if a
   page has nothing to say here, the slot is omitted entirely. */
.fc-banner-aside{ flex:0 0 auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.fc-banner-stat{
  background:oklch(1 0 0 / .72); border:1px solid oklch(1 0 0 / .9);
  border-radius:var(--fc-r-lg); padding:14px 20px; min-width:132px;
}
.fc-banner-stat small{ display:block; font-family:var(--fc-mono); font-size:9.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--fc-muted); margin-bottom:4px; }
.fc-banner-stat b{ display:block; font-family:var(--fc-mono); font-size:22px; font-weight:600;
  letter-spacing:-.03em; color:var(--fc-green); }
.fc-banner-stat b.plain{ color:var(--fc-ink); }

/* Dark variant for pages carrying a result rather than a task. */
.fc-banner.is-dark{
  background:
    radial-gradient(800px 320px at 85% -30%, oklch(0.46 0.15 152 / .55), transparent 60%),
    linear-gradient(165deg, var(--fc-ink) 0%, oklch(0.23 0.04 158) 100%);
  border-bottom-color:transparent;
}
.fc-banner.is-dark h1{ color:#fff; }
.fc-banner.is-dark p{ color:oklch(0.80 0.02 150); }
.fc-banner.is-dark .fc-crumbs, .fc-banner.is-dark .fc-crumbs a{ color:var(--fc-lime); }
.fc-banner.is-dark .fc-banner-stat{ background:oklch(1 0 0 / .07); border-color:oklch(1 0 0 / .14); }
.fc-banner.is-dark .fc-banner-stat small{ color:oklch(0.72 0.02 150); }
.fc-banner.is-dark .fc-banner-stat b{ color:var(--fc-lime); }
.fc-banner.is-dark .fc-banner-stat b.plain{ color:#fff; }

@media (max-width:782px){
  .fc-banner-inner{ align-items:flex-start; gap:18px; }
  .fc-banner-aside{ width:100%; }
  .fc-banner-stat{ flex:1 1 auto; }
}

/* ── Page body — one container, the same one as the header ──── */
.fc-page{ padding-block:clamp(28px,4vw,52px); background:var(--fc-paper); }
.fc-page-inner{ max-width:var(--fc-max); margin:0 auto; padding-inline:var(--fc-gut); }
/* Forms and single messages get a narrow column CENTRED inside that
   container, rather than floating at an arbitrary offset. */
.fc-page-narrow{ max-width:560px; margin-inline:auto; }

/* ── My Account, aligned to the site ────────────────────────── */
.woocommerce-account .woocommerce{ max-width:var(--fc-max); margin-inline:auto;
  padding-inline:var(--fc-gut); }
/* WooCommerce floats this column left at 30% width in its own stylesheet.
   Without overriding that, the pills stack into a narrow block beside the
   content instead of sitting in a row across the top — which is exactly what
   they did. */
.woocommerce-account .woocommerce-MyAccount-navigation{
  float:none; width:100%; margin:0 0 22px;
}
.fc-acct-nav{ display:flex; gap:7px; flex-wrap:wrap; margin:0; list-style:none;
  padding:0; }
.fc-acct-nav a{ display:block; padding:10px 16px; border-radius:var(--fc-r);
  background:var(--fc-white); border:1px solid var(--fc-line); font-size:14px;
  font-weight:600; color:var(--fc-ink-2); }
.fc-acct-nav a:hover{ border-color:var(--fc-green); color:var(--fc-green-deep); }
.fc-acct-nav .is-active a{ background:var(--fc-green); border-color:var(--fc-green); color:#fff; }
/* 240px matches the layout's own sidebar column. */
.fc-acct-grid{ display:grid; grid-template-columns:minmax(210px,240px) minmax(0,1fr); gap:clamp(18px,2.6vw,30px);
  align-items:start; }
@media (max-width:900px){ .fc-acct-grid{ grid-template-columns:1fr; } }
.fc-acct-side{ display:grid; gap:14px; }
.fc-side-card{ background:var(--fc-white); border:1px solid var(--fc-line);
  border-radius:var(--fc-r-xl); padding:20px; }
.fc-who{ display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.fc-avatar{ width:44px; height:44px; border-radius:14px; background:var(--fc-mint);
  color:var(--fc-green-deep); display:grid; place-items:center; font-weight:700; font-size:15px; }
.fc-who b{ display:block; font-size:15.5px; }
.fc-who small{ color:var(--fc-muted); font-size:13px; }
.fc-side-links{ display:grid; gap:6px; }
.fc-side-links a{ display:flex; justify-content:space-between; padding:11px 14px;
  border-radius:var(--fc-r); background:var(--fc-tint-2); font-size:14.5px; font-weight:600;
  color:var(--fc-ink-2); }
.fc-side-links a:hover{ background:var(--fc-mint); color:var(--fc-green-deep); }
.fc-side-links a.on{ background:var(--fc-green); color:#fff; }
.fc-side-links a span{ font-family:var(--fc-mono); opacity:.7; }
.woocommerce-account .woocommerce-MyAccount-content{ float:none; width:auto; }


/* ── Breathing room and the welcome box ─────────────────────────
   The header, banner and first panel were touching, which is what
   made the pages read as one merged block.
   ─────────────────────────────────────────────────────────────── */
.fc-header{ margin-bottom:0; }
.fc-banner{ margin-top:0; }
.fc-page{ padding-block:clamp(26px,3.4vw,42px); }
.fc-page-inner > * + *{ margin-top:18px; }

/* A welcome box on the account overview: who you are, what is happening,
   and the one action worth offering. */
.fc-welcome{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  background:linear-gradient(120deg, var(--fc-mint) 0%, oklch(0.985 0.012 150) 70%);
  border:1px solid oklch(0.90 0.03 148); border-radius:var(--fc-r-xl);
  padding:20px 24px; margin-bottom:20px;
}
.fc-welcome-text{ flex:1 1 320px; min-width:0; }
.fc-welcome h2{ margin:0; font-size:21px; font-weight:750; letter-spacing:-.022em; }
.fc-welcome p{ margin:6px 0 0; font-size:14.5px; color:var(--fc-ink-2); }
.fc-welcome .fc-btn{ width:auto; }
@media (max-width:640px){ .fc-welcome .fc-btn{ width:100%; } }

/* Panels need space between them, not just inside them. */
.fc-step + .fc-step{ margin-top:16px; }
.fc-tab > * + *{ margin-top:16px; }

/* ── Checkout: a calmer surface ──────────────────────────────────
   This is the screen where someone hands over bank details for a
   device they are about to post to strangers. It should feel
   settled, not transactional. Everything below is built from the
   existing tokens — no new colours, so it cannot drift from the
   rest of the site.

   The moves: a soft mint page so white cards lift off it, a warm
   green rule down the left of each numbered section so progress
   reads at a glance, generous white inside the cards, and one
   reassurance strip carrying the three promises rather than
   repeating them beside every control.
   ─────────────────────────────────────────────────────────────── */
.fc-co{
  background:
    radial-gradient(1200px 420px at 82% -10%, oklch(0.87 0.20 126 / .10), transparent 60%),
    linear-gradient(180deg, oklch(0.965 0.030 150) 0%, oklch(0.985 0.012 150) 46%, oklch(0.99 0.006 150) 100%);
}

/* Cards: white, softly lifted, with a green hairline rather than grey. */
.fc-co section,
.fc-co .fc-card,
.fc-co [class*="card"]{
  background:oklch(1 0 0);
  border:1px solid oklch(0.93 0.020 150);
  box-shadow:0 1px 2px oklch(0.42 0.12 157 / .04), 0 12px 28px -20px oklch(0.42 0.12 157 / .28);
}

/* The numbered sections get a quiet spine, so the eye can see how
   far along it is without a progress bar shouting about it. */
.fc-co-step{ position:relative; overflow:hidden; }
.fc-co-step::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, oklch(0.42 0.12 157), oklch(0.87 0.20 126));
  opacity:.75;
}

/* Inputs: resting state warm, focus state unmistakable. A field that
   does not visibly respond makes people re-type. */
.fc-co input{
  background:oklch(0.988 0.006 150);
  border-color:oklch(0.90 0.018 150);
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.fc-co input:hover{ border-color:oklch(0.82 0.04 150); }
.fc-co input:focus{
  background:oklch(1 0 0);
  border-color:oklch(0.55 0.15 152);
  box-shadow:0 0 0 4px oklch(0.55 0.15 152 / .12);
  outline:none;
}
.fc-co input::placeholder{ color:oklch(0.66 0.02 150); }
.fc-in-mono{ font-family:'JetBrains Mono',ui-monospace,monospace; letter-spacing:.04em; font-size:14.5px; }
.fc-opt{ font-style:normal; font-weight:400; color:oklch(0.58 0.02 150); font-size:12px; margin-left:6px; }

/* Choosable things: a hover that says "this is a button". */
.fc-co button[style*="cursor:pointer"]:hover{
  border-color:oklch(0.55 0.15 152);
  background:oklch(0.975 0.020 150);
}

/* The reassurance strip — the three promises, stated once. */
.fc-reassure{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;
  max-width:1320px; margin:0 auto 20px; padding:0 clamp(18px,4vw,48px);
}
.fc-reassure div{
  display:flex; gap:12px; align-items:flex-start;
  background:oklch(1 0 0 / .72); border:1px solid oklch(0.92 0.025 150);
  border-radius:16px; padding:16px 18px; backdrop-filter:blur(4px);
}
.fc-reassure .ico{
  flex:none; width:32px; height:32px; border-radius:10px;
  background:oklch(0.955 0.055 148); color:oklch(0.42 0.12 157);
  display:grid; place-items:center; font-size:15px;
}
.fc-reassure b{ display:block; font-size:14.5px; letter-spacing:-.01em; }
.fc-reassure span.t{ display:block; font-size:13px; color:oklch(0.52 0.02 150); margin-top:2px; }

/* The money panel stays the darkest thing on the page, so the eye
   lands on the figure and not on the chrome around it. */
.fc-co [style*="oklch(0.19"], .fc-co [style*="oklch(0.2 "]{
  box-shadow:0 20px 50px -26px oklch(0.19 0.02 155 / .55);
}

/* ── The total ────────────────────────────────────────────────
   The item boxes now carry every detail, so the review panel is
   the boxes plus one figure. It deserves weight: this is the
   number the whole visit was about.
   ─────────────────────────────────────────────────────────── */
.fc-review{ margin-top:16px; }
.fc-total{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:14px;
  padding:22px 24px; border-radius:20px; position:relative; overflow:hidden;
  background:
    radial-gradient(520px 180px at 88% -30%, oklch(0.87 0.20 126 / .22), transparent 62%),
    linear-gradient(150deg, oklch(0.19 0.02 155) 0%, oklch(0.24 0.045 158) 100%);
  color:oklch(1 0 0);
  box-shadow:0 22px 50px -28px oklch(0.19 0.02 155 / .7);
}
.fc-total::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, oklch(0.42 0.12 157), oklch(0.87 0.20 126) 60%, transparent);
}
.fc-total-text{ flex:1 1 200px; min-width:0; }
.fc-total-label{
  display:block; font-size:16px; font-weight:750; letter-spacing:-.018em;
}
.fc-total-note{
  display:block; margin-top:4px; font-size:12.5px; color:oklch(0.82 0.02 150);
}
.fc-total-fig{
  font-size:clamp(30px,3.4vw,40px); font-weight:800; letter-spacing:-.038em;
  color:oklch(0.87 0.20 126); line-height:1;
}

/* ── The three promises ───────────────────────────────────────
   Under the figure they qualify, not in a strip across the top:
   the moment a visitor reads a number is the moment they wonder
   what the catch is, so the answer belongs there.
   ─────────────────────────────────────────────────────────── */
.fc-assure{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:2px; }
.fc-assure li{
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 4px; position:relative;
}
.fc-assure li + li::before{
  content:""; position:absolute; left:44px; right:4px; top:0; height:1px;
  background:oklch(0.94 0.012 150);
}
.fc-assure-ico{
  flex:none; width:32px; height:32px; border-radius:11px;
  background:oklch(0.955 0.055 148); color:oklch(0.42 0.12 157);
  display:grid; place-items:center; font-size:14px;
  box-shadow:inset 0 0 0 1px oklch(0.90 0.04 148);
}
.fc-assure-txt{
  font-size:13px; line-height:1.55; color:oklch(0.50 0.02 150); min-width:0;
}
.fc-assure-txt b{
  display:block; font-size:14px; font-weight:700; letter-spacing:-.012em;
  color:oklch(0.24 0.03 155); margin-bottom:1px;
}

.fc-payout-fields{margin-top:16px}
.fc-fl{display:block;font-size:13px;font-weight:650;color:oklch(0.38 0.02 150);margin-bottom:6px}
.fc-in{width:100%;padding:15px 16px;border-radius:13px;border:1.5px solid oklch(0.89 0.014 150);
 background:oklch(0.985 0.004 150);font:inherit;font-size:15.5px;outline:none}
.fc-in-mono{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.04em;font-size:14.5px}
.fc-fh{margin:10px 0 0;font-size:13px;color:oklch(0.52 0.02 150);line-height:1.6}
[data-payout]{background:oklch(0.985 0.006 150);border:1px solid oklch(0.93 0.020 150);
 border-radius:16px;padding:20px}
[data-payout][hidden]{display:none}

.fc-boxitems{display:grid;gap:12px}
.fc-boxitem{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:18px;align-items:start;
 background:#fff;border:1px solid oklch(0.93 0.020 150);border-radius:18px;padding:18px 20px;
 box-shadow:0 1px 2px oklch(0.42 0.12 157 / .04)}
.fc-boxitem-img{width:92px;height:92px;border-radius:14px;overflow:hidden;background:oklch(0.96 0.012 150)}
.fc-boxitem-img img{width:100%;height:100%;object-fit:cover}
.fc-tile{display:block;width:100%;height:100%;
 background:repeating-linear-gradient(135deg,oklch(0.93 0.012 150) 0 8px,oklch(0.965 0.01 150) 8px 16px)}
.fc-boxitem h3{margin:0 0 10px;font-size:17px;font-weight:750;letter-spacing:-.018em}
.fc-boxitem-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:6px 18px;margin:0}
.fc-boxitem-specs div{display:flex;gap:6px;font-size:13.5px;min-width:0}
.fc-boxitem-specs dt{color:oklch(0.55 0.02 150);flex:none}
.fc-boxitem-specs dd{margin:0;font-weight:600;color:oklch(0.26 0.02 155)}
.fc-boxitem-price{text-align:right}
.fc-boxitem-label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
 color:oklch(0.55 0.02 150);font-family:'JetBrains Mono',monospace}
.fc-boxitem-price strong{display:block;font-size:24px;color:oklch(0.42 0.12 157);letter-spacing:-.03em}
.fc-boxitem-lock{display:block;font-size:12px;color:oklch(0.55 0.02 150);margin-top:2px}
@media(max-width:720px){.fc-boxitem{grid-template-columns:64px minmax(0,1fr)}
 .fc-boxitem-img{width:64px;height:64px}.fc-boxitem-price{grid-column:1/-1;text-align:left}}

.fc-editrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;
 border:1px solid oklch(0.93 0.020 150);border-radius:16px;padding:18px 20px;margin-top:12px}
.fc-editrow b{font-size:15px}
.fc-editrow p{margin:3px 0 0;font-size:13.5px;color:oklch(0.52 0.02 150)}
.fc-editrow button,.fc-editrow a{margin-left:auto;border:1.5px solid oklch(0.90 0.014 150);
 background:#fff;border-radius:12px;padding:10px 16px;font:inherit;font-size:14px;font-weight:600;
 cursor:pointer;color:inherit;text-decoration:none}
.fc-editrow button:hover,.fc-editrow a:hover{border-color:oklch(0.42 0.12 157)}


/* Seller self-service rows: a summary that opens the form in place. */
.fc-editrow-wrap{ margin-top:12px; }
.fc-editrow-wrap > summary{ list-style:none; cursor:pointer; }
.fc-editrow-wrap > summary::-webkit-details-marker{ display:none; }
.fc-editbtn{
  margin-left:auto; border:1.5px solid oklch(0.90 0.014 150); background:#fff;
  border-radius:12px; padding:10px 16px; font-size:14px; font-weight:600;
}
.fc-editrow-wrap[open] .fc-editbtn{ border-color:oklch(0.42 0.12 157); color:oklch(0.42 0.12 157); }
.fc-editform{
  background:#fff; border:1px solid oklch(0.93 0.020 150); border-top:0;
  border-radius:0 0 16px 16px; padding:20px 20px 22px; margin-top:-8px;
}
.fc-editform .fc-btn{ width:auto; margin-top:16px; }

/* IBAN feedback. Colour alone would not do — the note says what is wrong. */
.fc-in-bad{ border-color:oklch(0.55 0.16 32)!important;
  box-shadow:0 0 0 4px oklch(0.55 0.16 32 / .10)!important; }
.fc-in-good{ border-color:oklch(0.45 0.13 152)!important; }
.fc-iban-note{ margin-top:8px!important; }


/* Device silhouettes. Drawn, not photographed — they inherit the surrounding
   colour so one palette change moves them all. */
.fc-art{ width:100%; height:100%; display:block; padding:14%; box-sizing:border-box;
  fill:oklch(0.80 0.03 150); }
.fc-art .fc-art-screen{ fill:oklch(0.93 0.015 150); }
.fc-art-watch{ padding:10%; }
.fc-art-laptop{ padding:16% 10%; }
.fc-boxitem-img .fc-art{ background:oklch(0.975 0.010 150); }


/* ── WooCommerce's own checkout fields, in our clothes ────────────
   WooCommerce renders the billing form itself — that is deliberate,
   because it owns validation, sessions and order creation. But it
   ships its own markup, so without this the fields appear raw next
   to designed cards, which is what "messed up" looked like.
   ─────────────────────────────────────────────────────────────── */
.fc-co .woocommerce-billing-fields > h3,
.fc-co .woocommerce-additional-fields > h3{
  font-size:16px; font-weight:750; letter-spacing:-.018em;
  margin:0 0 16px; color:var(--fc-ink);
}
.fc-co .woocommerce-billing-fields__field-wrapper{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
}
@media (max-width:820px){
  .fc-co .woocommerce-billing-fields__field-wrapper{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .fc-co .woocommerce-billing-fields__field-wrapper{ grid-template-columns:minmax(0,1fr); }
}
/* Address and anything long take the full row. */
.fc-co #billing_address_1_field,
.fc-co #billing_address_2_field,
.fc-co #billing_country_field{ grid-column:1 / -1; }

.fc-co .form-row{ margin:0; padding:0; }
.fc-co .form-row label{
  display:block; font-size:13px; font-weight:650; color:oklch(0.38 0.02 150);
  margin-bottom:6px;
}
.fc-co .form-row label .required{ color:oklch(0.55 0.16 32); text-decoration:none; }
.fc-co .form-row .input-text,
.fc-co .form-row select,
.fc-co .select2-container .select2-selection--single{
  width:100%; box-sizing:border-box; height:auto;
  padding:15px 16px; border-radius:13px;
  border:1.5px solid oklch(0.89 0.014 150);
  background:oklch(0.988 0.006 150);
  font:inherit; font-size:15.5px; color:var(--fc-ink);
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.fc-co .form-row .input-text:hover,
.fc-co .form-row select:hover{ border-color:oklch(0.82 0.04 150); }
.fc-co .form-row .input-text:focus,
.fc-co .form-row select:focus{
  background:oklch(1 0 0); border-color:oklch(0.55 0.15 152);
  box-shadow:0 0 0 4px oklch(0.55 0.15 152 / .12); outline:none;
}
.fc-co .form-row .input-text::placeholder{ color:oklch(0.66 0.02 150); }
.fc-co .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.4; padding:0; color:var(--fc-ink);
}
.fc-co .select2-container--default .select2-selection--single .select2-selection__arrow{ top:14px; right:10px; }
.fc-co .woocommerce-input-wrapper{ display:block; }

/* Validation, in the design's language rather than Woo's default red bar. */
.fc-co .woocommerce-invalid .input-text{
  border-color:oklch(0.55 0.16 32);
  box-shadow:0 0 0 4px oklch(0.55 0.16 32 / .10);
}
.fc-co .woocommerce-validated .input-text{ border-color:oklch(0.45 0.13 152); }

/* The coupon box: this is a trade-in, nobody is paying, so it only
   confuses. Hidden rather than removed — a promo code still applies
   through the offer itself. */
.fc-co .woocommerce-form-coupon-toggle,
.fc-co .checkout_coupon{ display:none !important; }


/* Payout and carrier choices, rendered by the plugin in the design's shape. */
.fc-co .fc4i-choice{
  display:flex; align-items:center; gap:12px; padding:16px 17px;
  border:1.5px solid oklch(0.90 0.014 150); border-radius:14px; background:#fff;
  margin-bottom:10px; cursor:pointer; min-height:74px;
  transition:border-color .15s ease, background .15s ease;
}
.fc-co .fc4i-choice:hover{ border-color:oklch(0.55 0.15 152); }
.fc-co .fc4i-choice input{ position:absolute; opacity:0; pointer-events:none; }
.fc-co .fc4i-choice-dot{
  flex:none; width:20px; height:20px; border-radius:50%;
  border:2.5px solid oklch(0.86 0.02 150); background:#fff;
}
.fc-co .fc4i-choice:has(input:checked){
  border-color:oklch(0.42 0.12 157); background:oklch(0.965 0.03 150);
}
.fc-co .fc4i-choice:has(input:checked) .fc4i-choice-dot{
  border-color:oklch(0.42 0.12 157); background:oklch(0.42 0.12 157);
  box-shadow:inset 0 0 0 3px #fff;
}
.fc-co .fc4i-choice-text{ flex:1; min-width:0; }
.fc-co .fc4i-choice-text b{ display:block; font-size:16px; font-weight:750; letter-spacing:-.018em; }
.fc-co .fc4i-choice-text small{ display:block; margin-top:3px; font-size:13.5px; color:oklch(0.48 0.02 150); }
.fc-co .fc4i-choice-bonus{
  margin-left:auto; font-style:normal; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:8px;
  background:oklch(0.960 0.075 88); color:oklch(0.38 0.09 82);
}

/* The three consents: one per line, with room to read them. */
.fc-co .fc4i-consents label,
.fc-co .fc4i-payout > label{
  display:flex; gap:11px; align-items:flex-start;
  padding:12px 0; font-size:14px; line-height:1.55; color:var(--fc-ink-2);
  border-bottom:1px solid oklch(0.95 0.008 150);
}
.fc-co .fc4i-payout > label:last-of-type{ border-bottom:0; }
.fc-co .fc4i-payout input[type="checkbox"]{ margin-top:2px; flex:none; }


/* ── Payout methods: a grid, and their fields on demand ───────────
   Four stacked full-width cards pushed the rest of the form off the
   screen, and every method's fields were visible at once — asking
   for bank details from someone who has not chosen bank transfer.
   ─────────────────────────────────────────────────────────────── */
.fc-co .fc4i-payout{ display:block; }
.fc-co .fc4i-payout .fc4i-choice{ margin:0; }

/* The plugin prints the four labels in sequence; this makes them a grid
   without needing a wrapper around them. */
.fc-co .fc4i-payout{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
.fc-co .fc4i-payout > h3,
.fc-co .fc4i-payout > p,
.fc-co .fc4i-payout > label:not(.fc4i-choice),
.fc-co .fc4i-payout > .fc4i-payout-total,
.fc-co .fc4i-payout > input[type="hidden"]{ grid-column:1 / -1; }
@media (max-width:640px){
  .fc-co .fc4i-payout{ grid-template-columns:minmax(0,1fr); }
}

/* Detail panels stay closed until a method is chosen. */
.fc-co .fc-payout-fields [data-payout]{ display:none; }
.fc-co .fc-payout-fields [data-payout].is-open{ display:block; }

/* Back and the submit share a row and a height. */
.fc-co .fc-actions{
  display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; margin-top:22px;
}
.fc-co .fc-actions > a,
.fc-co .fc-actions > button,
.fc-co .fc-actions > .button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:60px; padding:0 28px; border-radius:15px;
  font-size:16.5px; font-weight:750; letter-spacing:-.01em;
  box-sizing:border-box; text-decoration:none; cursor:pointer;
}


/* The single consent: a real checkbox, not a button that submits nothing. */
.fc-co .fc-consent{
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  padding:16px; border:1.5px solid oklch(0.90 0.014 150);
  border-radius:13px; background:#fff; margin-top:14px;
}
.fc-co .fc-consent:hover{ border-color:oklch(0.55 0.15 152); }
.fc-co .fc-consent input[type="checkbox"]{ width:20px; height:20px; flex:none; margin:0; }
.fc-co .fc-consent span{ font-size:14px; line-height:1.55; color:oklch(0.34 0.02 155); }
.fc-co .fc-consent:has(input:checked){ border-color:oklch(0.42 0.12 157); background:oklch(0.975 0.02 150); }

/* Radio alignment. The card is two lines; the dot belongs on the optical
   centre of both, not the top of the first. */
.fc-co .fc4i-choice{ align-items:center !important; gap:14px !important; }
.fc-co .fc4i-choice-dot{ margin:0 !important; align-self:center !important; }
.fc-co .fc4i-choice-text{ padding:0 !important; }
.fc-co .fc4i-choice-text b{ line-height:1.25; }

/* Detail panels: closed until a method is chosen, whatever the markup says. */
.fc-co [data-payout]{ display:none; }
.fc-co [data-payout].is-open{ display:block; }


/* Action row: one height for both controls, stated strongly enough to beat
   WooCommerce's own .button padding, which was making them different sizes. */
.fc-co .fc-actions{ display:flex !important; align-items:stretch !important; gap:12px; }
.fc-co .fc-actions > button,
.fc-co .fc-actions > a,
.fc-co .fc-actions button.button,
.fc-co .fc-actions #place_order{
  min-height:64px !important; height:64px !important;
  padding:0 30px !important; margin:0 !important;
  border-radius:16px !important; font-size:16.5px !important; font-weight:750 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  line-height:1 !important; box-sizing:border-box !important;
}


/* The visible dot must follow the real radio even where :has() is unsupported;
   the script mirrors the state onto the label as .is-picked. */
.fc-co .fc4i-choice.is-picked{
  border-color:oklch(0.42 0.12 157) !important;
  background:oklch(0.965 0.03 150) !important;
}
.fc-co .fc4i-choice.is-picked .fc4i-choice-dot{
  border-color:oklch(0.42 0.12 157) !important;
  background:oklch(0.42 0.12 157) !important;
  box-shadow:inset 0 0 0 3px #fff !important;
}
/* Even spacing: the dot sits inside the card, never against its border. */
.fc-co .fc4i-payout .fc4i-choice{ padding:16px 18px !important; gap:14px !important; }


/* Room under the payout grid: the cards were touching the note beneath them. */
.fc-co .fc4i-payout{ margin-bottom:22px !important; }
.fc-co .fc4i-payout + p,
.fc-co .fc-payout-fields{ margin-top:18px !important; }


/* Asked for only when the picked address has no postcode — the FedEx label
   uses the seller as the shipper, so an order cannot ship without one. */
.fc-co .fc4i-address-manual{
  margin-top:10px; padding:14px 15px; border-radius:13px;
  background:oklch(0.97 0.012 90); border:1px solid oklch(0.90 0.03 90);
}
.fc-co .fc4i-address-manual[hidden]{ display:none; }
.fc-co .fc4i-address-manual .fc4i-help{ margin:0 0 10px; font-size:12.5px; color:oklch(0.42 0.06 70); }
.fc-co .fc4i-manual-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.fc-co .fc4i-manual-row label{ display:block; font-size:12px; font-weight:650; color:oklch(0.38 0.02 150); }
.fc-co .fc4i-manual-row input{
  margin-top:5px; width:100%; padding:11px 13px; border-radius:10px;
  border:1.5px solid oklch(0.89 0.014 150); background:#fff; font-size:14.5px; outline:none;
}
@media (max-width:640px){ .fc-co .fc4i-manual-row{ grid-template-columns:1fr; } }

/* Address and city suggestions from our own endpoint. */
.fc-co .fc4i-suggest{
  list-style:none; margin:0; padding:6px; z-index:20;
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  max-height:290px; overflow-y:auto;
  background:#fff; border:1px solid oklch(0.90 0.014 150); border-radius:13px;
  box-shadow:0 18px 40px -28px oklch(0.2 0.04 155 / .6);
}
.fc-co .fc4i-suggest[hidden]{ display:none; }
.fc-co .fc4i-suggest li{
  padding:10px 12px; border-radius:9px; cursor:pointer;
  display:flex; flex-direction:column; gap:1px;
}
.fc-co .fc4i-suggest li:hover,
.fc-co .fc4i-suggest li.is-active{ background:oklch(0.965 0.03 150); }
.fc-co .fc4i-suggest-main{ font-size:14.5px; font-weight:600; color:oklch(0.24 0.02 155); }
.fc-co .fc4i-suggest-sub{ font-size:12.5px; color:oklch(0.55 0.02 150); }

/* Why a lookup produced nothing — silence here reads as a broken field. */
.fc-co .fc4i-address-note{
  display:block; margin-top:8px; padding:10px 13px; border-radius:11px;
  background:oklch(0.97 0.012 90); font-size:12.5px; color:oklch(0.42 0.06 70);
}
.fc-co .fc4i-address-note[hidden]{ display:none; }

/* The tick and the verified line carry inline display rules from the design,
   and an inline display beats the hidden attribute. Without this they show on
   an empty field and claim an address was checked when none was. */
.fc-co .fc4i-address-ok[hidden]{ display:none !important; }

/* Selected cards were being clipped at the grid edge: the border sits outside
   the track unless the grid has room for it. */
.fc-co .fc4i-payout{ padding:2px !important; overflow:visible !important; }
.fc-co .fc4i-choice{ box-sizing:border-box !important; overflow:visible !important; }


/* Endpoint pages list everything themselves, so they use the full width
   rather than leaving a column of links beside a list of the same things. */
.fc-acct-grid.is-wide{ grid-template-columns:minmax(0,1fr) !important; }


/* The whole offer card is one link. */
.fc-offercard{ transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.fc-offercard:hover{
  border-color:oklch(0.72 0.10 150) !important;
  box-shadow:0 16px 34px -28px oklch(0.2 0.04 155 / .6);
}
.fc-offercard:hover .fc-offercard-cta{ background:oklch(0.965 0.03 150); }


/* Checkout supplies its own container.
   page.php stops wrapping it (so the tinted background can run full bleed) and
   the template's inner .fc-wrap was removed to fix the double-container squeeze
   — which left the form with nothing holding it at all. This is that container. */
.fc-co{ padding-inline:clamp(16px,4vw,48px); padding-block:clamp(28px,4vw,52px); }
.fc-co > *{ max-width:1320px; margin-inline:auto; }
.fc-co .fc-checkout-grid{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);
  gap:clamp(16px,2vw,26px); align-items:start; width:100%;
}
@media (max-width:960px){
  .fc-co .fc-checkout-grid{ grid-template-columns:minmax(0,1fr); }
}
/* Never let a long label force a column narrower than its content. */
.fc-co .fc-step, .fc-co .fc-checkout-main, .fc-co aside{ min-width:0; }

/* ── Sign in ──────────────────────────────────────────────────────────
   The page somebody lands on when they want to know what happened to
   their device, so it carries the same weight as the rest of the site
   rather than WooCommerce's two bare forms. */
.fc-auth{
  min-height:72vh; display:grid; place-items:center; padding:40px 18px 70px;
  background:
    radial-gradient(1100px 460px at 50% -14%, oklch(0.955 0.055 148) 0%, transparent 62%),
    oklch(0.985 0.006 150);
}
.fc-auth-card{
  width:100%; max-width:452px; background:#fff; border:1px solid oklch(0.92 0.01 150);
  border-radius:22px; padding:clamp(24px,3vw,34px);
  box-shadow:0 34px 70px -46px oklch(0.22 0.05 155 / .5);
}
.fc-auth-head{ text-align:center; margin-bottom:20px; }
.fc-auth-mark{
  display:inline-block; font-weight:800; font-size:17px; letter-spacing:-0.025em;
  color:oklch(0.24 0.03 155); margin-bottom:14px;
}
.fc-auth-mark em{ font-style:normal; color:oklch(0.52 0.17 152); }
.fc-auth-head h1{ margin:0; font-size:clamp(23px,2.5vw,27px); letter-spacing:-0.03em; font-weight:800; }
.fc-auth-head p{ margin:7px auto 0; max-width:34ch; font-size:14px; line-height:1.55; color:oklch(0.50 0.02 150); }

.fc-auth-note{ border-radius:12px; padding:11px 14px; font-size:13.5px; line-height:1.5; margin-bottom:16px; }
.fc-auth-note-ok{ background:oklch(0.955 0.055 148); border:1px solid oklch(0.88 0.06 148); color:oklch(0.30 0.08 152); }
.fc-auth-note-info{ background:oklch(0.96 0.03 240); border:1px solid oklch(0.88 0.05 245); color:oklch(0.38 0.12 250); }

.fc-auth-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
  background:oklch(0.965 0.008 150); border-radius:12px; margin-bottom:20px;
}
.fc-auth-tabs a{
  text-align:center; padding:9px 10px; border-radius:9px; font-size:13.5px; font-weight:650;
  color:oklch(0.45 0.02 150); text-decoration:none;
}
.fc-auth-tabs a.is-on{ background:#fff; color:oklch(0.30 0.10 152); box-shadow:0 1px 3px rgba(15,28,20,.10); }

.fc-auth-label{ display:block; font-size:13px; font-weight:650; color:oklch(0.38 0.02 150); margin:0 0 6px; }
.fc-auth-input{
  width:100%; padding:13px 14px; border-radius:12px; border:1.5px solid oklch(0.90 0.014 150);
  background:oklch(0.985 0.004 150); font-size:15px; font-family:inherit;
  color:oklch(0.19 0.02 155); outline:none; margin-bottom:15px; transition:.14s ease;
}
.fc-auth-input:focus{
  border-color:oklch(0.46 0.15 152); background:#fff;
  box-shadow:0 0 0 3px oklch(0.46 0.15 152 / .10);
}
.fc-auth-pass{ position:relative; }
.fc-auth-eye{
  position:absolute; top:11px; right:10px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:650; color:oklch(0.46 0.15 152); padding:4px 6px;
}
.fc-auth-sum{ max-width:130px; font-family:"JetBrains Mono", ui-monospace, monospace; }

.fc-auth-remember{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:oklch(0.42 0.02 150); margin-bottom:18px; }
.fc-auth-go{
  width:100%; padding:15px 20px; border:0; border-radius:13px; background:oklch(0.46 0.15 152);
  color:#fff; font:inherit; font-size:16px; font-weight:700; cursor:pointer; transition:background .15s ease;
}
.fc-auth-go:hover{ background:oklch(0.38 0.13 152); }
.fc-auth-foot{ margin:16px 0 0; font-size:13px; line-height:1.55; color:oklch(0.50 0.02 150); text-align:center; }

.fc-auth-perks{
  margin-top:22px; padding-top:18px; border-top:1px solid oklch(0.94 0.008 150);
  display:grid; gap:8px;
}
.fc-auth-perks span{ font-size:12.5px; color:oklch(0.45 0.02 150); }

.fc4i-account-block{
  margin:18px 0; padding:15px 16px; border-radius:14px;
  background:oklch(0.975 0.008 150); border:1px solid oklch(0.91 0.012 150);
}
.fc4i-account-toggle{ display:flex; gap:11px; align-items:flex-start; cursor:pointer; }
.fc4i-account-toggle strong{ display:block; font-size:14px; }
.fc4i-account-toggle small{ display:block; margin-top:2px; font-size:12.5px; line-height:1.5; color:oklch(0.52 0.02 150); }
.fc4i-account-pass{ margin-top:13px; }
.fc4i-account-pass label{ display:block; font-size:13px; font-weight:650; margin-bottom:6px; }
.fc4i-account-pass input{
  width:100%; padding:13px 14px; border-radius:12px; border:1.5px solid oklch(0.90 0.014 150);
  background:#fff; font-size:15px; font-family:inherit; outline:none;
}
.fc4i-account-pass input:focus{ border-color:oklch(0.46 0.15 152); box-shadow:0 0 0 3px oklch(0.46 0.15 152 / .10); }

/* ── A revised offer, waiting on the customer ─────────────────────────
   Drawn by the plugin, which knows whether one is pending. Amber rather
   than red: a revision is a decision to make, not a failure. */
.fc-amend{
  border:1px solid oklch(0.90 0.05 85); background:oklch(0.985 0.02 90);
  border-radius:18px; padding:20px 22px; margin-bottom:20px;
}
.fc-amend-head strong{ display:block; font-size:19px; letter-spacing:-0.02em; margin-bottom:5px; }
.fc-amend-head p{ margin:0; font-size:14px; line-height:1.6; color:oklch(0.45 0.06 70); }
.fc-amend-compare{
  display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; margin:18px 0;
}
.fc-amend-box{ text-align:center; padding:14px; border-radius:13px; border:1px solid oklch(0.90 0.02 150); background:#fff; }
.fc-amend-box.is-new{ border-color:oklch(0.86 0.06 148); background:oklch(0.97 0.04 148); }
.fc-amend-box span{
  display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  font-weight:750; color:oklch(0.55 0.02 150);
}
.fc-amend-box b{
  display:block; margin-top:4px; font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:27px; font-weight:800; letter-spacing:-0.03em; color:oklch(0.40 0.13 152);
}
.fc-amend-box b.was{ color:oklch(0.65 0.02 150); text-decoration:line-through; }
.fc-amend-arrow{ font-size:20px; color:oklch(0.70 0.02 150); }
.fc-amend-msg{
  background:#fff; border:1px solid oklch(0.92 0.01 150); border-radius:12px;
  padding:13px 15px; font-size:13.5px; line-height:1.6; color:oklch(0.32 0.02 155);
}
.fc-amend-msg span{
  display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:oklch(0.55 0.02 150); font-weight:750; margin-bottom:4px;
}
.fc-amend-acts{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px; }
.fc-amend-yes,.fc-amend-no{
  border-radius:12px; padding:13px 20px; font:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
}
.fc-amend-yes{ border:0; background:oklch(0.46 0.15 152); color:#fff; }
.fc-amend-yes:hover{ background:oklch(0.38 0.13 152); }
.fc-amend-no{ background:#fff; border:1.5px solid oklch(0.90 0.02 150); color:oklch(0.30 0.02 155); font-weight:650; }
.fc-amend-by{ font-size:12.5px; line-height:1.5; color:oklch(0.50 0.04 80); max-width:32ch; }
.fc-amend-signin{
  margin:16px 0 0; padding:13px 15px; border-radius:12px; background:#fff;
  border:1px solid oklch(0.92 0.01 150); font-size:13.5px; color:oklch(0.42 0.02 150);
}

/* ── Tracked offer, signed out ────────────────────────────────────── */
.fc-track{max-width:820px;margin:0 auto;background:#fff;border:1px solid oklch(0.92 0.012 150);border-radius:20px;padding:26px}
.fc-track-head{padding-bottom:18px;border-bottom:1px solid oklch(0.95 0.008 150);margin-bottom:18px}
.fc-track-num{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:oklch(0.46 0.13 152)}
.fc-track-head h2{margin:5px 0 0;font-size:24px;letter-spacing:-.025em}
.fc-track-rows{margin-top:18px}
.fc-track-rows div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid oklch(0.96 0.006 150);font-size:14px}
.fc-track-rows div:last-child{border-bottom:0}
.fc-track-rows span{color:oklch(0.52 0.02 150)}
.fc-track-rows b.mono{font-family:"JetBrains Mono",monospace;font-size:13px}
.fc-track-locked{margin-top:20px;padding:20px;border-radius:14px;background:oklch(0.975 0.008 150);border:1px dashed oklch(0.85 0.02 150);text-align:center}
.fc-track-locked b{display:block;font-size:16px;margin-bottom:5px}
.fc-track-locked p{margin:0 auto 15px;max-width:46ch;font-size:13.5px;line-height:1.6;color:oklch(0.50 0.02 150)}
.fc-track-locked .fc-auth-go{width:auto;padding:14px 24px}

/* ── Sign-in modal ────────────────────────────────────────────────── */
.fc-login-back{position:fixed;inset:0;z-index:99999;background:oklch(0.22 0.05 155 / .55);display:grid;place-items:center;padding:24px}
.fc-login-back[hidden]{display:none}
.fc-login-box{position:relative;width:min(420px,94vw);background:#fff;border-radius:20px;padding:26px;
  box-shadow:0 34px 70px -30px oklch(0.2 0.05 155 / .6);max-height:90vh;overflow-y:auto}
.fc-login-box h3{margin:0 0 5px;font-size:21px;letter-spacing:-.025em}
.fc-login-box p{margin:0 0 18px;font-size:13.5px;color:oklch(0.50 0.02 150)}
.fc-login-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:0;
  background:oklch(0.95 0.008 150);color:oklch(0.45 0.02 150);font-size:17px;cursor:pointer}
.fc-login-foot{margin:14px 0 0 !important;text-align:center;font-size:13px}
.fc-track-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}
@media(max-width:640px){.fc-track-steps{grid-template-columns:1fr 1fr}}
.fc-track-bar{display:block;height:7px;border-radius:99px;background:oklch(0.92 0.014 150)}
.fc-track-bar.is-done{background:oklch(0.46 0.15 152)}
.fc-track-bar.is-now{background:oklch(0.72 0.10 150)}
.fc-track-step{display:block;margin-top:9px;font-weight:700;font-size:13.5px}
.fc-track-step.is-off{color:oklch(0.62 0.02 150);font-weight:600}
.fc-login-head{text-align:center;margin-bottom:20px}
.fc-login-head .fc-auth-mark{margin-bottom:12px}
.fc-login-box h3{margin:0;font-size:23px;letter-spacing:-.03em;font-weight:800}
.fc-login-box .fc-login-head p{margin:7px auto 0;max-width:32ch;font-size:13.5px;line-height:1.55;color:oklch(0.50 0.02 150)}
.fc-login-box form{text-align:left}
.fc-login-box .fc-auth-go{width:100%}

/* The footer wordmark, matching the header — same lime 4 on the dark bar. */
.fc-footer-brand{ color:#fff; font-size:19px; font-weight:800; letter-spacing:-.03em; }
.fc-footer-brand em{ font-style:normal; color:oklch(0.87 0.20 126); }
/* The wordmark wherever it sits inside monospace text — the shipping label,
   for one. It has to override the surrounding font, not inherit it. */
.fc-brand-inline{
  font-family:"Schibsted Grotesk",-apple-system,system-ui,sans-serif;
  font-weight:800; font-size:15px; letter-spacing:-.025em;
  color:oklch(0.19 0.02 155); text-transform:none;
}
.fc-brand-inline em{ font-style:normal; color:oklch(0.46 0.15 152); }

/* Where the box goes. Real details only — the drawn label this replaced
   had a fake barcode and a checkerboard posing as a QR code. */
.fc-ship-to{
  display:block; margin-top:16px; padding:18px 20px; border-radius:14px;
  border:1px solid oklch(0.90 0.02 150); background:oklch(0.985 0.006 150);
}
.fc-ship-cap{
  display:block; font-family:"JetBrains Mono",monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:oklch(0.52 0.02 150); margin-bottom:7px;
}
.fc-ship-to .fc-brand-inline{ display:block; font-size:19px; }
.fc-ship-addr{
  display:block; margin-top:5px; font-size:14.5px; line-height:1.6; color:oklch(0.32 0.02 155);
}
.fc-ship-row{
  display:flex; justify-content:space-between; gap:12px; margin-top:13px;
  padding-top:13px; border-top:1px solid oklch(0.94 0.01 150); font-size:13.5px;
}
.fc-ship-row b{ color:oklch(0.52 0.02 150); font-weight:600; }
.fc-ship-row code{
  font-family:"JetBrains Mono",monospace; font-size:13px; background:none; color:oklch(0.19 0.02 155);
}
.fc-ship-note{
  display:block; margin-top:12px; font-size:12.5px; line-height:1.55; color:oklch(0.52 0.02 150);
}

/* Device drawings. Colours are variables so one file serves light and dark. */
.fc-dev-art{
  --fc-b:oklch(0.93 0.012 150); --fc-e:oklch(0.66 0.02 150);
  --fc-s:oklch(0.985 0.004 150); --fc-l:oklch(0.86 0.014 150);
}
.fc-dev-art svg{ height:100%; width:auto; max-width:100%; display:block; margin:0 auto; }
.fc-dark .fc-dev-art, .fc-on-dark .fc-dev-art{
  --fc-b:oklch(0.30 0.03 155); --fc-e:oklch(0.55 0.04 152);
  --fc-s:oklch(0.22 0.02 155); --fc-l:oklch(0.40 0.03 152);
}

/* ── Telling us it is posted ──────────────────────────────────────── */
.fc-posted{ margin-top:16px; padding-top:16px; border-top:1px solid oklch(0.95 0.008 150); }
.fc-posted h3{ margin:0 0 5px; font-size:15.5px; letter-spacing:-.015em; }
.fc-posted-sub{ margin:0 0 14px; font-size:13px; line-height:1.55; color:oklch(0.52 0.02 150); max-width:52ch; }
.fc-posted-label{ display:block; font-size:12.5px; font-weight:650; margin-bottom:5px; }
.fc-posted-label i{ font-style:normal; color:oklch(0.55 0.02 150); font-weight:400; }
.fc-posted-input{
  width:100%; padding:12px 13px; margin-bottom:13px; font:inherit; font-size:14px;
  border:1.5px solid oklch(0.92 0.012 150); border-radius:11px; background:oklch(0.985 0.004 150);
}
.fc-posted-input:focus{ outline:0; border-color:oklch(0.46 0.15 152); background:#fff; }

/* The receipt: a drop zone rather than the browser's own file button, which
   is inconsistent across browsers and looks unfinished. */
.fc-posted-drop{
  display:block; position:relative; margin-bottom:14px; padding:18px; text-align:center;
  border:2px dashed oklch(0.86 0.02 150); border-radius:13px;
  background:oklch(0.985 0.004 150); cursor:pointer;
}
.fc-posted-drop:hover{ border-color:oklch(0.46 0.15 152); background:oklch(0.975 0.012 150); }
.fc-posted-drop input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.fc-posted-drop b{ display:block; font-size:14px; margin-bottom:2px; }
.fc-posted-drop span{ font-size:12px; color:oklch(0.52 0.02 150); }

.fc-posted-go{
  border:0; border-radius:12px; padding:13px 22px; font:inherit; font-size:14.5px;
  font-weight:700; cursor:pointer; background:oklch(0.46 0.15 152); color:#fff;
}
.fc-posted-go:hover{ background:oklch(0.41 0.15 152); }

.fc-posted-done{
  background:oklch(0.96 0.03 150); border:1px solid oklch(0.88 0.06 150);
  border-radius:13px; padding:15px 17px;
}
.fc-posted-done b{ display:block; font-size:14.5px; color:oklch(0.40 0.13 152); margin-bottom:4px; }
.fc-posted-done p{ margin:0; font-size:13px; line-height:1.55; color:oklch(0.38 0.06 152); }
.fc-posted-rows{ border:1px solid oklch(0.92 0.012 150); border-radius:12px; margin-top:12px; }
.fc-posted-rows div{
  display:flex; justify-content:space-between; gap:12px; padding:10px 13px;
  border-bottom:1px solid oklch(0.96 0.006 150); font-size:13px;
}
.fc-posted-rows div:last-child{ border-bottom:0; }
.fc-posted-rows span{ color:oklch(0.52 0.02 150); }
.fc-posted-hint{ margin:11px 0 0 !important; font-size:12.5px; color:oklch(0.52 0.02 150); }
.fc-posted-undo{
  border:0; background:none; padding:0; font:inherit; font-size:12.5px; font-weight:700;
  color:oklch(0.46 0.15 152); cursor:pointer; text-decoration:underline;
}

/* The pointer shown just after checkout, where they cannot have posted yet. */
.fc-posted-point{
  margin-top:15px; padding:15px 17px; border-radius:13px;
  background:oklch(0.97 0.03 90); border:1px solid oklch(0.87 0.09 88);
}
.fc-posted-point b{ display:block; font-size:14.5px; margin-bottom:4px; color:oklch(0.45 0.09 70); }
.fc-posted-point p{ margin:0 !important; font-size:13.5px; line-height:1.6; color:oklch(0.45 0.07 70); max-width:56ch; }
.fc-posted-point a{ color:oklch(0.46 0.15 152); font-weight:700; }

/* ── Popular devices we buy ─────────────────────────────────────────────
   Six across, stepping to four, three and two. The tile count is trimmed
   to a multiple of six in fastcash_popular_devices(), so no breakpoint
   ends on an orphan row — the fault the old ten-card grid had at four. */
.fc-pop-grid{
  margin-top:28px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px;
}
.fc-pop-tile{
  position:relative; display:flex; flex-direction:column; align-items:center;
  padding:14px 8px 13px; border-radius:16px; background:var(--fc-white);
  border:1px solid var(--fc-line-2); overflow:hidden; color:inherit; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fc-pop-tile::before{
  /* The panel has to end BELOW the artwork, not through it. Art block is
     72px tall sitting under 14px of padding, so 92px clears it and gives the
     tile a clean two-tone split instead of a band across each silhouette. */
  content:""; position:absolute; inset:0 0 auto; height:92px;
  background:var(--fc-pop-tint, var(--fc-mint));
  border-bottom:1px solid oklch(0 0 0 / 0.055);
}
.fc-pop-tile:hover{
  transform:translateY(-3px); border-color:oklch(0.76 0.10 150);
  box-shadow:0 14px 26px -18px oklch(0.40 0.06 152 / 0.8);
}
.fc-pop-tile:focus-visible{ outline:2px solid var(--fc-green); outline-offset:3px; }
.fc-pop-art{
  position:relative; display:grid; place-items:center; height:78px; width:100%;
  perspective:520px;
  /* The silhouettes read these four. They are scoped to .fc-dev-art further
     up, and these tiles are not .fc-dev-art — without this the drawings fall
     back to the grey hex baked into each SVG and clash with the tinted band. */
  --fc-b:oklch(0.93 0.012 150); --fc-e:oklch(0.66 0.02 150);
  --fc-s:oklch(0.985 0.004 150); --fc-l:oklch(0.86 0.014 150);
}
.fc-pop-art svg{ height:100%; width:auto; max-width:100%; display:block; }
.fc-pop-name{
  margin-top:13px; font-weight:650; font-size:12.5px; line-height:1.3;
  letter-spacing:-.01em; text-align:center; color:var(--fc-ink-2);
}
.fc-pop-price{ margin-top:4px; font-family:var(--fc-mono); font-size:11px; font-weight:700; color:var(--fc-green); }
.fc-pop-price.fc-pop-quote{ color:var(--fc-muted); }

@media (max-width:1100px){ .fc-pop-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:720px){
  .fc-pop-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .fc-pop-art{ height:64px; }
  .fc-pop-tile::before{ height:78px; }
  .fc-pop-name{ font-size:11.5px; }
}
@media (max-width:400px){ .fc-pop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ── Popular devices: ambient flip ──────────────────────────────────────
   Three tiles at a time, chosen at random by the script in
   parts/popular-devices.php, staggered so they never fire in unison.

   The animation is on the SVG rather than the tile so it cannot fight the
   tile's own hover transform — the two would otherwise both write to
   `transform` and whichever ran last would win, making a hover mid-flip
   jump. The perspective lives on the parent because a transformed element
   cannot supply its own. */
.fc-pop-art svg{ backface-visibility:visible; transform-style:preserve-3d; }
.fc-pop-tile.fc-pop-flip .fc-pop-art svg{
  animation:fcPopFlip 1.15s cubic-bezier(.45,.05,.3,1);
}

/* ── The same tiles inside the quote form ───────────────────────────────
   wizard.php renders its "Popular devices" list with these classes now.
   Five across, three rows. The grid used to sit on the wrapper while the
   cards were injected into the child, so it had one grid item and the
   cards stacked in a column. */
.fc-pop-grid-wizard,
/* Also matched on the attribute. The class is added by wizard.php, so if the
   plugin has not replaced — a cached copy, or an upload merged as a patch —
   the class is absent and the list falls back to stacking in one column. The
   attribute is on that element in every version of the file, so this rule
   lands regardless. Scoped to .fc4i-wiz so it cannot reach anything else. */
.fc4i-wiz [data-list="popular"]{
  margin-top:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
/* A button does not inherit type or alignment the way the anchor tiles do. */
button.fc-pop-tile{
  font:inherit; text-align:center; cursor:pointer; -webkit-appearance:none; appearance:none;
}
@media (max-width:1100px){ .fc-pop-grid-wizard, .fc4i-wiz [data-list="popular"]{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:720px){  .fc-pop-grid-wizard, .fc4i-wiz [data-list="popular"]{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:400px){  .fc-pop-grid-wizard, .fc4i-wiz [data-list="popular"]{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@keyframes fcPopFlip{
  from{ transform:rotateY(0); }
  to{ transform:rotateY(360deg); }
}


/* ══ Homepage banners ══════════════════════════════════════════════════
   Lifted verbatim from the approved preview. The banners are configured
   from Theme Design → Banners, which writes CSS variables onto the section
   rather than generating rules — so nothing here changes per setting, and
   what was approved is what ships.

   Variables the markup supplies:
     --fc-h1 / --fc-h1-tab        Option 1 minimum height, desktop / tablet
     --fc-h2 / --fc-h2-tab        Option 2 the same
     --fc-h2-pad, --fc-h2-align   Option 2 padding and vertical alignment
     --fc-sweep, --fc-sweep-o     connecting arrow colour and opacity
     --fc-sweep-y, -y-low         its vertical position
   Mobile is deliberately absent from all of them: the banners take the
   height of their content on a phone.
   ══════════════════════════════════════════════════════════════════════ */

.fc-hero1{
  background:var(--fc-hero1-bg, linear-gradient(180deg, oklch(0.975 0.030 150), oklch(0.985 0.014 200)));
  padding:clamp(30px,4vw,60px) 0 0; overflow:hidden;
  min-height:var(--fc-h1, auto);
  display:flex; flex-direction:column; justify-content:center;
}
.fc-hero1-grid{
  max-width:var(--fc-max); margin:0 auto; width:100%;
  padding:0 clamp(18px,4vw,48px);
  display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.36fr) minmax(0,0.82fr);
  gap:clamp(16px,2.6vw,34px); align-items:center;
}
/* display:contents lets the two photos act as grid items in their own right,
   so the text can sit between them on a desktop while they stay a single
   unit — with the arrow across them — everywhere else. */
.fc-hero1-grid{ position:relative; }

/* The sweep sits on its own layer underneath. Everything else in the grid is
   lifted one step above it, so the line passes behind the wording and behind
   the photographs without touching either. */
.fc-hero1-pair,.fc-hero1-text,.fc-hero1-media{ position:relative; z-index:1; }

/* A grid item in the middle column, not an overlay across the whole hero.
   Negative margins carry it into the two gaps so it starts at the right edge
   of the left photo and finishes at the left edge of the right one. Sharing
   the cell with the wording is deliberate — z-index keeps it behind. */
.fc-sweep{
  grid-column:2; grid-row:1; align-self:center; justify-self:stretch;
  margin-inline:calc(-1 * clamp(16px,2.6vw,34px));
  transform:translateY(var(--fc-sweep-y, 26%));
  z-index:0; pointer-events:none; display:none;
  color:var(--fc-sweep, oklch(0.60 0.18 150));

  /* Held well back. At full strength the line competes with the paragraph it
     passes behind — the eye reads it as sitting on top even though it is not. */
  opacity:var(--fc-sweep-o, 0.3);
}
/* Belt and braces on the layering: the wording and the photographs are lifted
   two steps, so nothing about source order or a stacking context can put the
   line in front of them. */
.fc-hero1-text,.fc-hero1-media{ z-index:2; }

/* ── Placement: four ways to stop the line interfering with the wording ──
   All four reuse the same wave. The two masked ones simply hide the parts of
   it that would cross the text, which is cheaper and more reliable than
   drawing separate geometry for each case. */

/* B · soft knockout — the line fades out where the wording sits and returns
       either side of it, so nothing ever crosses a letter. */
[data-swpos="b"] .fc-sweep{
  -webkit-mask-image:radial-gradient(ellipse 44% 66% at 50% 44%,
    transparent 38%, rgba(0,0,0,.35) 60%, #000 82%);
          mask-image:radial-gradient(ellipse 44% 66% at 50% 44%,
    transparent 38%, rgba(0,0,0,.35) 60%, #000 82%);
}

/* C · beneath the content — the wave sits under the buttons and rating
       instead of behind the paragraph. It crosses nothing at all. */
[data-swpos="c"] .fc-sweep{
  align-self:end;
  transform:translateY(var(--fc-sweep-y-low, 52%));
}

/* D · gaps only — visible in the two gutters between the photos and the
       wording, hidden across the middle entirely. */
[data-swpos="d"] .fc-sweep{
  -webkit-mask-image:linear-gradient(to right, #000 0 15%, transparent 27% 73%, #000 85% 100%);
          mask-image:linear-gradient(to right, #000 0 15%, transparent 27% 73%, #000 85% 100%);
}
/* With only the gutters visible, the spark disappears for most of its journey
   and reappears on the right. That reads as intended: something crossing
   behind the wording and emerging on the far side. */

/* the travelling highlight */
.fc-sweep .flow{ display:none; }
[data-sweep="41"] .flow-a,[data-sweep="42"] .flow-a,[data-sweep="43"] .flow-a,
[data-sweep="46"] .flow-a,[data-sweep="44"] .flow-b,[data-sweep="45"] .flow-c{ display:block; }
/* The trail. Same 3.6s rhythm as the spark, so the bright segment sits just
   behind the dot rather than drifting away from it. */
.fc-sweep .flow{ display:none; }
[data-anim="spark"] .flow-a,[data-anim="twin"] .flow-a,[data-anim="comet"] .flow-a{ display:none; }
.fc-sweep .flow use{
  stroke-dasharray:86 2400; stroke-dashoffset:2400;
  opacity:0; filter:blur(.3px);
  animation:fcFlow 3.6s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes fcFlow{
  0%   { stroke-dashoffset:2440; opacity:0; }
  10%  { opacity:.9; }
  86%  { opacity:.9; }
  100% { stroke-dashoffset:1520; opacity:0; }
}

/* The spark sits above the sweep's own opacity, so the dot stays crisp even
   when the wave itself is held back at 30%. */
.fc-sweep .spark{ display:none; }
/* Which shape's spark and trail are in play, and whether they show at all. */
[data-anim="spark"] .flow-a,[data-anim="twin"] .flow-a,[data-anim="comet"] .flow-a,
[data-anim="spark"] .flow-b,[data-anim="twin"] .flow-b,[data-anim="comet"] .flow-b,
[data-anim="spark"] .flow-c,[data-anim="twin"] .flow-c,[data-anim="comet"] .flow-c{ display:block; }
.fc-sweep .flow-b,.fc-sweep .flow-c{ display:none; }
[data-sweep="44"] .flow-a,[data-sweep="45"] .flow-a{ display:none !important; }
[data-anim="spark"][data-sweep="44"] .flow-b,[data-anim="twin"][data-sweep="44"] .flow-b,
[data-anim="comet"][data-sweep="44"] .flow-b,
[data-anim="spark"][data-sweep="45"] .flow-c,[data-anim="twin"][data-sweep="45"] .flow-c,
[data-anim="comet"][data-sweep="45"] .flow-c{ display:block !important; }

[data-sweep="41"] .spark-a,[data-sweep="42"] .spark-a,[data-sweep="43"] .spark-a,
[data-sweep="46"] .spark-a,[data-sweep="44"] .spark-b,[data-sweep="45"] .spark-c{ display:block; }
.fc-sweep .spark2{ display:none; }
[data-anim="twin"][data-sweep="41"] .spark2-a,[data-anim="twin"][data-sweep="42"] .spark2-a,
[data-anim="twin"][data-sweep="43"] .spark2-a,[data-anim="twin"][data-sweep="46"] .spark2-a,
[data-anim="twin"][data-sweep="44"] .spark2-b,[data-anim="twin"][data-sweep="45"] .spark2-c{ display:block; }
[data-anim="draw"] .spark,[data-anim="dash"] .spark,[data-anim="breathe"] .spark,
[data-anim="comet"] .spark,[data-anim="none"] .spark{ display:none !important; }
[data-anim="draw"] .flow,[data-anim="dash"] .flow,[data-anim="breathe"] .flow,
[data-anim="none"] .flow{ display:none !important; }
[data-anim="none"] .sw use{ animation:none; stroke-dashoffset:0; }
.fc-sweep .spark-dot{ animation:fcSpark 3.6s cubic-bezier(.4,0,.6,1) infinite; }
.fc-sweep .spark-glow{ animation:fcSparkGlow 3.6s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes fcSpark{
  0%,100%{ opacity:0; }
  9%     { opacity:1; }
  88%    { opacity:1; }
}
@keyframes fcSparkGlow{
  0%,100%{ opacity:0; }
  9%     { opacity:.26; }
  50%    { opacity:.4; }
  88%    { opacity:.26; }
}
.fc-sweep svg{ width:100%; height:clamp(110px,13vw,172px); display:block; overflow:visible; }
.fc-sweep .sw{ display:none; }
[data-sweep="1"] .fc-sweep,[data-sweep="2"] .fc-sweep,[data-sweep="3"] .fc-sweep{ display:block; }
[data-sweep="1"] .sw1,[data-sweep="2"] .sw2,[data-sweep="3"] .sw3,
[data-sweep="4"] .sw4,[data-sweep="5"] .sw5{ display:block; }
[data-sweep="41"] .sw41,[data-sweep="42"] .sw42,[data-sweep="43"] .sw43,
[data-sweep="44"] .sw44,[data-sweep="45"] .sw45,[data-sweep="46"] .sw46{ display:block; }
[data-sweep="4"] .fc-sweep,[data-sweep="5"] .fc-sweep,
[data-sweep="41"] .fc-sweep,[data-sweep="42"] .fc-sweep,[data-sweep="43"] .fc-sweep,
[data-sweep="44"] .fc-sweep,[data-sweep="45"] .fc-sweep,[data-sweep="46"] .fc-sweep{ display:block; }

/* A <use> draws in exactly as a path does. The beaded one already owns a dash
   pattern, so drawing it would fight itself — that one fades instead. */
/* ── Animation. Each option is a combination of three pieces: the wave
   drawing itself in, a bright trail, and a spark riding the curve. Gating
   them by data-anim keeps one set of geometry serving all of them. ── */

/* draw-in — shared by every option except marching and none */
[data-anim="spark"] .sw use,[data-anim="draw"] .sw use,[data-anim="breathe"] .sw use,
[data-anim="twin"] .sw use,[data-anim="comet"] .sw use{
  stroke-dasharray:2000; stroke-dashoffset:2000; animation:fcDraw 1.7s ease-out .25s forwards;
}
.fc-sweep .sw43 use{ stroke-dasharray:0.1 15; stroke-dashoffset:0; animation:fcInk 1s ease-out .3s backwards; }

/* marching — the wave itself becomes a run of dashes travelling rightward */
[data-anim="dash"] .sw use{
  stroke-dasharray:11 13; stroke-dashoffset:0; animation:fcMarch 1.5s linear infinite;
}
@keyframes fcMarch{ to{ stroke-dashoffset:-24; } }

/* breathing — the whole line swells and settles, no travel at all */
[data-anim="breathe"] .fc-sweep{ animation:fcBreathe 5s ease-in-out 1.6s infinite; }
@keyframes fcBreathe{
  0%,100%{ opacity:calc(var(--fc-sweep-o, .3) * .55); }
  50%    { opacity:var(--fc-sweep-o, .3); }
}

/* comet — a long tapered trail, slower, and no leading dot */
[data-anim="comet"] .flow use{
  stroke-dasharray:260 2400; animation:fcFlow 5.2s cubic-bezier(.36,0,.64,1) infinite;
  stroke-width:5; filter:blur(1.1px);
}
[data-sweep="3"] .fc-sweep{ opacity:.9; }

/* Drawn once on arrival rather than looping — a line that keeps redrawing
   itself behind the headline is a distraction, not an accent. */
.fc-sweep .sw path{ stroke-dasharray:2000; stroke-dashoffset:2000; animation:fcDraw 1.6s ease-out .25s forwards; }
.fc-sweep path.sw{ stroke-dasharray:2000; stroke-dashoffset:2000; animation:fcDraw 1.6s ease-out .25s forwards; }
/* A filled shape has no stroke to draw, so it arrives by fading instead. */
.fc-sweep .sw5 path{ stroke-dasharray:none; stroke-dashoffset:0; animation:fcInk 1s ease-out .3s backwards; }
@keyframes fcInk{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
[data-sweep="2"] .sw2{ stroke-dasharray:none; }
@keyframes fcDraw{ to{ stroke-dashoffset:0; } }

.fc-hero1-pair{ display:contents; }
.fc-hero1-media-a{ grid-column:1; grid-row:1; }
.fc-hero1-text{ grid-column:2; grid-row:1; }
.fc-hero1-media-b{ grid-column:3; grid-row:1; }
.fc-hero1-arrow{ display:none; }
.fc-hero1-media{ margin:0; border-radius:22px; overflow:hidden; aspect-ratio:3/4; background:oklch(0.94 0.02 150); }
.fc-hero1-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.fc-hero1-text{ text-align:center; min-width:0; }
.fc-hero1-kicker{
  margin:0; font-family:var(--fc-mono); font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:oklch(0.52 0.14 156);
}
.fc-hero1-title{
  margin:14px 0 0; font-size:clamp(32px,4.2vw,58px); line-height:1.0;
  letter-spacing:-.04em; font-weight:800; color:var(--fc-ink);
}
.fc-hero1-title em{ font-style:normal; color:var(--fc-green); }
.fc-hero1-lede{
  margin:16px auto 0; max-width:34ch; font-size:clamp(15px,1.3vw,17.5px);
  line-height:1.55; color:var(--fc-body);
}
.fc-hero1-cta{ margin-top:22px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.fc-hero1-primary{
  padding:16px 28px; border-radius:13px; background:oklch(0.52 0.17 152);
  color:oklch(0.99 0.012 140); font-weight:750; font-size:16px; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.fc-hero1-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -16px oklch(0.40 0.10 152/.9); }
.fc-hero1-secondary{
  padding:16px 24px; border-radius:13px; border:1.5px solid oklch(0.88 0.02 150);
  background:var(--fc-white); color:var(--fc-ink-2); font-weight:650; font-size:16px; text-decoration:none;
}
.fc-hero1-rating{ margin:16px 0 0; font-size:13.5px; color:var(--fc-body); }
.fc-hero1-stars{ color:oklch(0.78 0.15 78); }
.fc-hero1-rating strong{ color:var(--fc-ink); }

/* ── tablet: text leads, photos share a row beneath it ───────────────── */
@media (max-width:900px){
  /* The photos are adjacent here, so the chevron between them carries the
     idea and a long sweep would have nothing to span. */
  .fc-sweep{ display:none !important; }
  .fc-hero1{ min-height:var(--fc-h1-tab, auto); }
  .fc-hero1-grid{ grid-template-columns:1fr; gap:clamp(20px,3.4vw,30px); }

  /* The pair becomes a real element again: two photos, the arrow laid over
     the seam between them, and the wording underneath. */
  .fc-hero1-pair{
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,2.4vw,16px);
    position:relative; grid-column:1; grid-row:1; align-items:stretch;
  }
  .fc-hero1-media-a,.fc-hero1-media-b{ grid-column:auto; grid-row:auto; }
  .fc-hero1-text{ grid-column:1; grid-row:2; }
  .fc-hero1-media{ aspect-ratio:4/5; }
  .fc-hero1-arrow{
    display:block; position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%); z-index:3; pointer-events:none;
    width:clamp(42px,11vw,56px); height:clamp(42px,11vw,56px);
  }
  .fc-hero1-arrow svg{ width:100%; height:100%; display:block; }

  /* All six live in the markup; the one on show is chosen by data-arrow, so
     switching is a single attribute rather than a re-render. */
  .fc-av{ display:none; width:100%; height:100%; }
  [data-arrow="1"] .fc-av1,[data-arrow="2"] .fc-av2,[data-arrow="3"] .fc-av3,
  [data-arrow="4"] .fc-av4,[data-arrow="5"] .fc-av5,[data-arrow="6"] .fc-av6{ display:block; }

  /* 1 · solid badge */
  [data-arrow="1"] .fc-hero1-arrow{
    filter:drop-shadow(0 10px 18px oklch(0.30 0.06 152 / .34));
    animation:fcPulse 2.6s ease-in-out infinite;
  }
  /* 2 · frosted glass */
  [data-arrow="2"] .fc-hero1-arrow{
    filter:drop-shadow(0 10px 20px oklch(0.20 0.02 155 / .30));
    backdrop-filter:blur(3px); border-radius:50%;
  }
  /* 3 · travelling chevrons */
  [data-arrow="3"] .fc-hero1-arrow{
    width:clamp(58px,16vw,80px); height:auto;
    filter:drop-shadow(0 4px 10px oklch(1 0 0 / .9));
  }
  [data-arrow="3"] .c{ animation:fcStep 1.6s ease-in-out infinite; }
  [data-arrow="3"] .c2{ animation-delay:.18s; }
  [data-arrow="3"] .c3{ animation-delay:.36s; }
  /* 4 · connector across the seam */
  [data-arrow="4"] .fc-hero1-arrow{
    width:min(62%,260px); height:auto;
    filter:drop-shadow(0 8px 16px oklch(0.20 0.02 155 / .22));
  }
  [data-arrow="4"] .dash{ animation:fcDash 1.4s linear infinite; }
  /* 5 · hand-drawn */
  [data-arrow="5"] .fc-hero1-arrow{
    width:clamp(66px,19vw,96px); height:auto;
    filter:drop-shadow(0 3px 8px oklch(1 0 0 / .95));
    animation:fcTiltA 3.4s ease-in-out infinite;
  }
  /* ── chevron family ─────────────────────────────────────────────────
     Every one of these is the chevron idea made clearer: a casing behind
     it, a white halo around it, or fewer and heavier strokes. Thin green
     lines alone disappear over a busy photograph. */
  [data-arrow="31"] .fc-av31,[data-arrow="32"] .fc-av32,[data-arrow="33"] .fc-av33,
  [data-arrow="34"] .fc-av34,[data-arrow="35"] .fc-av35,[data-arrow="36"] .fc-av36{ display:block; }

  .fc-cap{
    display:flex; align-items:center; justify-content:center;
    padding:8px 14px; border-radius:999px;
    box-shadow:0 12px 26px -14px oklch(0.20 0.02 155 / .55);
  }
  .fc-cap-w{ background:var(--fc-white); }
  .fc-cap-g{ background:var(--fc-green); }
  .fc-cap svg{ width:100%; height:auto; display:block; }

  [data-arrow="31"] .fc-hero1-arrow,[data-arrow="32"] .fc-hero1-arrow{
    width:clamp(74px,20vw,98px); height:auto;
  }
  [data-arrow="33"] .fc-hero1-arrow{
    width:clamp(70px,19vw,94px); height:auto;
    filter:drop-shadow(0 6px 14px oklch(0.20 0.02 155 / .28));
  }
  [data-arrow="34"] .fc-hero1-arrow{ width:clamp(96px,27vw,130px); height:auto; }
  [data-arrow="35"] .fc-hero1-arrow{ width:clamp(90px,25vw,120px); height:auto; }
  [data-arrow="36"] .fc-hero1-arrow{
    width:clamp(62px,17vw,82px); height:auto;
    filter:drop-shadow(0 6px 14px oklch(0.20 0.02 155 / .30));
  }

  [data-arrow="31"] .c,[data-arrow="32"] .c,[data-arrow="33"] .c,
  [data-arrow="34"] .c,[data-arrow="36"] .c{ animation:fcStep 1.6s ease-in-out infinite; }
  [data-arrow="31"] .c2,[data-arrow="32"] .c2,[data-arrow="33"] .c2,
  [data-arrow="36"] .c2{ animation-delay:.18s; }
  [data-arrow="31"] .c3,[data-arrow="32"] .c3,[data-arrow="33"] .c3{ animation-delay:.36s; }
  [data-arrow="34"] .c3{ animation-delay:.18s; }
  [data-arrow="34"] .dash{ animation:fcDash 1.4s linear infinite; }
  [data-arrow="35"] .glide{ animation:fcGlide 2.1s cubic-bezier(.45,0,.35,1) infinite; }

  @keyframes fcGlide{
    0%     { transform:translateX(10px); opacity:0; }
    18%    { opacity:1; }
    78%    { opacity:1; }
    100%   { transform:translateX(66px); opacity:0; }
  }

  /* 6 · labelled pill */
  [data-arrow="6"] .fc-hero1-arrow{ width:auto; height:auto; }
  .fc-av6-pill{
    display:flex; align-items:center; gap:7px; white-space:nowrap;
    padding:9px 16px 9px 13px; border-radius:999px;
    background:var(--fc-white); color:var(--fc-green);
    font-size:clamp(12px,3.2vw,14px); font-weight:750; letter-spacing:-.01em;
    box-shadow:0 12px 26px -14px oklch(0.20 0.02 155 / .5);
  }
  .fc-av6-pill svg{ width:17px; height:17px; flex:none; }

  @keyframes fcPulse{
    0%,100%{ transform:translate(-50%,-50%) scale(1); }
    50%    { transform:translate(-50%,-50%) scale(1.07); }
  }
  @keyframes fcTiltA{
    0%,100%{ transform:translate(-50%,-50%) rotate(-3deg); }
    50%    { transform:translate(-50%,-50%) rotate(3deg); }
  }
  @keyframes fcStep{
    0%,100%{ opacity:.28; transform:translateX(-3px); }
    45%    { opacity:1;   transform:translateX(3px); }
  }
  @keyframes fcDash{ to{ stroke-dashoffset:-22; } }
}
/* ── phone: one photo, wide and short, and the buttons stack ─────────── */
@media (prefers-reduced-motion:reduce){
  .fc-hero1-arrow,.fc-av .c,.fc-av .dash,.fc-av .glide{ animation:none !important; }
  .fc-sweep .sw,.fc-sweep .sw path,.fc-sweep .sw use{ animation:none !important; stroke-dashoffset:0 !important; }
  .fc-sweep .flow,.fc-sweep .spark,.fc-sweep .spark2{ display:none !important; }
  .fc-sweep{ animation:none !important; }
}
@media (max-width:560px){
  .fc-hero1{ min-height:auto; padding-top:24px; }
  .fc-hero1-title{ font-size:clamp(30px,8.5vw,40px); }
  .fc-hero1-lede{ font-size:15.5px; }
  .fc-hero1-cta{ flex-direction:column; align-items:stretch; }
  .fc-hero1-primary,.fc-hero1-secondary{ text-align:center; }
  .fc-hero1-media{ aspect-ratio:var(--fc-hero1-ratio, 3/4); border-radius:16px; }
}

.fc-hero2{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  background:var(--fc-hero2-bg, oklch(0.972 0.008 150)); overflow:hidden;
  min-height:var(--fc-h2, clamp(360px,42vw,660px));
}
.fc-hero2-text{
  display:flex; align-items:var(--fc-h2-align, center);
  padding:var(--fc-h2-pad, clamp(32px,5vw,84px)) clamp(20px,4vw,64px);
}
.fc-hero2-inner{ max-width:34rem; margin-left:auto; }
.fc-hero2-kicker{
  margin:0; font-family:var(--fc-mono); font-size:12.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fc-green);
}
.fc-hero2-title{
  margin:18px 0 0; font-size:clamp(34px,4.6vw,62px); line-height:1.02;
  letter-spacing:-.045em; font-weight:800; color:var(--fc-ink);
}
.fc-hero2-title em{ font-style:normal; color:var(--fc-green); }
.fc-hero2-lede{ margin:20px 0 0; max-width:46ch; font-size:clamp(15px,1.25vw,18px); line-height:1.6; color:var(--fc-body); }
.fc-hero2-cta{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
.fc-hero2-primary{
  padding:17px 30px; border-radius:12px; background:var(--fc-green);
  color:oklch(0.99 0.012 140); font-weight:750; font-size:16px; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.fc-hero2-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -16px oklch(0.40 0.10 152/.9); }
.fc-hero2-secondary{
  padding:17px 26px; border-radius:12px; border:1.5px solid oklch(0.88 0.02 150);
  background:var(--fc-white); color:var(--fc-ink-2); font-weight:650; font-size:16px; text-decoration:none;
}
.fc-hero2-rating{ margin:26px 0 0; font-size:14.5px; color:var(--fc-body); }
.fc-hero2-stars{ color:oklch(0.78 0.15 78); }
.fc-hero2-rating strong{ color:var(--fc-ink); }
.fc-hero2-media{ position:relative; min-height:0; }
.fc-hero2-media img{ width:100%; height:100%; object-fit:cover; display:block; min-height:300px; }
.fc-hero2-card{
  position:absolute; top:clamp(16px,2.4vw,34px); right:clamp(16px,2.4vw,34px);
  background:var(--fc-white); border-radius:14px; padding:14px 20px 16px;
  box-shadow:0 18px 36px -22px oklch(0.20 0.02 155/.55); display:grid; gap:2px;
}
.fc-hero2-card-label{
  font-family:var(--fc-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--fc-muted);
}
.fc-hero2-card-amount{ font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--fc-ink); }
.fc-hero2-card-device{ font-size:13.5px; color:var(--fc-body); }
.fc-hero2-pill{
  position:absolute; left:clamp(16px,2.4vw,34px); bottom:clamp(16px,2.4vw,34px);
  background:var(--fc-white); border-radius:999px; padding:11px 20px;
  font-size:14.5px; font-weight:600; color:var(--fc-ink-2);
  box-shadow:0 14px 30px -20px oklch(0.20 0.02 155/.5); display:flex; align-items:center; gap:9px;
}
.fc-hero2-dot{ width:9px; height:9px; border-radius:50%; background:var(--fc-green); }

@media (max-width:900px){
  .fc-hero2{ grid-template-columns:1fr; min-height:var(--fc-h2-tab, auto); }
  .fc-hero2-text{ padding:clamp(28px,6vw,44px) clamp(20px,5vw,40px); }
  .fc-hero2-inner{ margin-left:0; max-width:none; }
  .fc-hero2-media{ order:-1; aspect-ratio:16/10; }
  .fc-hero2-media img{ min-height:0; }
}
@media (max-width:560px){
  .fc-hero2{ min-height:auto; }
  .fc-hero2-title{ font-size:clamp(30px,8.5vw,40px); }
  .fc-hero2-cta{ flex-direction:column; align-items:stretch; }
  .fc-hero2-primary,.fc-hero2-secondary{ text-align:center; }
  .fc-hero2-media{ aspect-ratio:var(--fc-hero2-ratio, 4/3); }
  .fc-hero2-card{ top:12px; right:12px; padding:10px 14px 12px; }
  .fc-hero2-card-amount{ font-size:22px; }
  .fc-hero2-pill{ left:12px; bottom:12px; padding:9px 15px; font-size:13px; }
}

/* ── Settings that change arrangement rather than measurement ────────────
   Written as attributes on the section, so each is one selector rather than
   a variable the layout has to interpret. */

/* Option 2 · photo on the left instead of the right */
.fc-hero2[data-media-left] .fc-hero2-text{ order:2; }
.fc-hero2[data-media-left] .fc-hero2-inner{ margin-left:0; margin-right:auto; }
.fc-hero2[data-media-left] .fc-hero2-media{ order:1; }
.fc-hero2[data-media-left] .fc-hero2-card{ right:auto; left:clamp(16px,2.4vw,34px); }
.fc-hero2[data-media-left] .fc-hero2-pill{ left:auto; right:clamp(16px,2.4vw,34px); }

@media (max-width:900px){
  /* wording before the photographs */
  .fc-hero1[data-textfirst] .fc-hero1-pair{ grid-row:2; }
  .fc-hero1[data-textfirst] .fc-hero1-text{ grid-row:1; }
  .fc-hero2[data-textfirst] .fc-hero2-media{ order:2; }
  .fc-hero2[data-textfirst] .fc-hero2-text{ order:1; }
  /* photo left keeps its side on one column too */
  .fc-hero2[data-media-left] .fc-hero2-media{ order:-1; }
}

@media (max-width:560px){
  /* buttons side by side instead of full width */
  .fc-hero1[data-ctainline] .fc-hero1-cta,
  .fc-hero2[data-ctainline] .fc-hero2-cta{ flex-direction:row; align-items:center; flex-wrap:wrap; }
  .fc-hero1[data-ctainline] .fc-hero1-primary,.fc-hero1[data-ctainline] .fc-hero1-secondary,
  .fc-hero2[data-ctainline] .fc-hero2-primary,.fc-hero2[data-ctainline] .fc-hero2-secondary{ text-align:center; }
  /* the two floating pieces, hidden on a phone if asked */
  .fc-hero2[data-nocard-mobile] .fc-hero2-card{ display:none; }
  .fc-hero2[data-nopill-mobile] .fc-hero2-pill{ display:none; }
}


/* ══ Devices card ══════════════════════════════════════════════════════
   Layout D: a coloured box framing the brand and the live price, with the
   table on a white panel — dark text on white reads better than white on
   colour, and the table is the part people actually read.
   Colours arrive as variables from Theme Design -> Devices card.
   ══════════════════════════════════════════════════════════════════════ */
.fc-dc-sec{ padding:clamp(44px,6vw,84px) clamp(16px,4vw,48px); background:var(--fc-white); }
.fc-dc-inner{ max-width:1180px; margin:0 auto; }
.fc-dc-head{ text-align:center; max-width:46rem; margin:0 auto clamp(26px,3.6vw,40px); }
.fc-dc-kicker{
  margin:0; font-family:var(--fc-mono); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fc-green);
}
.fc-dc-title{
  margin:14px 0 0; font-size:clamp(28px,4vw,50px); line-height:1.03;
  letter-spacing:-.04em; font-weight:800; color:var(--fc-ink);
}
.fc-dc-title em{ font-style:normal; color:var(--fc-green); }
.fc-dc-lede{ margin:14px 0 0; font-size:clamp(14.5px,1.2vw,17px); line-height:1.6; color:var(--fc-body); }

.fc-dc{
  border-radius:24px; overflow:hidden; color:oklch(0.99 0.012 140);
  background:linear-gradient(162deg, var(--fc-dc-from, oklch(0.42 0.14 154)), var(--fc-dc-to, oklch(0.31 0.10 158)));
  box-shadow:0 30px 56px -34px oklch(0.30 0.10 155 / .55);
}

/* header */
.fc-dc-top{ display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; padding:16px clamp(18px,2.4vw,30px); }
.fc-dc-badge{
  display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px;
  background:oklch(1 0 0 / .16); font-family:var(--fc-mono); font-size:10px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
}
.fc-dc-badge::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--fc-dc-accent, var(--fc-lime));
  box-shadow:0 0 0 0 oklch(0.87 0.20 126 / .7); animation:fcDcPing 2s ease-out infinite;
}
@keyframes fcDcPing{ to{ box-shadow:0 0 0 9px oklch(0.87 0.20 126 / 0); } }
.fc-dc-brand{ font-size:14.5px; font-weight:750; letter-spacing:-.02em; }
.fc-dc-brand em{ font-style:normal; color:var(--fc-dc-accent, var(--fc-lime)); }
.fc-dc-next{ margin-left:auto; display:flex; align-items:baseline; gap:8px; font-size:12.5px; opacity:.92; }
.fc-dc-next-label{
  font-family:var(--fc-mono); font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; opacity:.65;
}
.fc-dc-next-name{ font-weight:700; }
.fc-dc-dots{ display:flex; gap:6px; }
.fc-dc-dot{
  width:7px; height:7px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:oklch(1 0 0 / .32); transition:background .2s ease, transform .2s ease;
}
.fc-dc-dot.is-on{ background:var(--fc-dc-accent, var(--fc-lime)); transform:scale(1.4); }
.fc-dc-pause{
  width:28px; height:28px; border-radius:50%; cursor:pointer; flex:none;
  background:oklch(1 0 0 / .14); border:1px solid oklch(1 0 0 / .2); display:grid; place-items:center;
}
.fc-dc-pause-i{ width:7px; height:9px; border-left:2.5px solid currentColor; border-right:2.5px solid currentColor; }
.fc-dc.is-paused .fc-dc-pause-i{
  width:0; height:0; border:0; border-left:9px solid currentColor;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.fc-dc-progress{ height:2px; background:oklch(1 0 0 / .14); overflow:hidden; }
.fc-dc-bar{ display:block; height:100%; width:0; background:var(--fc-dc-accent, var(--fc-lime)); }

/* device and price, one compact line */
.fc-dc-stage{ position:relative; padding:18px clamp(18px,2.4vw,30px); }
.fc-dc-slide{
  display:flex; align-items:center; gap:14px;
  opacity:0; visibility:hidden; position:absolute; inset:18px clamp(18px,2.4vw,30px) auto;
  transition:opacity .42s ease;
}
.fc-dc-slide.is-on{ opacity:1; visibility:visible; position:relative; inset:auto; }
.fc-dc-art{
  width:34px; height:46px; flex:none; display:grid; place-items:center;
  --fc-b:oklch(0.62 0.05 150); --fc-e:oklch(0.86 0.08 148);
  --fc-s:oklch(0.30 0.05 156); --fc-l:oklch(0.52 0.06 152);
}
/* Capped for the same reason as the grid: a wide silhouette sized by height
   will otherwise run past its panel. */
.fc-dc-art svg{ height:100%; width:auto; max-width:100%; display:block; }
.fc-dc-id{ display:grid; gap:1px; min-width:0; }
.fc-dc-name{ font-size:17px; font-weight:750; letter-spacing:-.02em; line-height:1.2; }
.fc-dc-row-label{
  font-family:var(--fc-mono); font-size:10px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; opacity:.62;
}
.fc-dc-price{
  margin-left:auto; font-size:32px; font-weight:800; letter-spacing:-.035em; line-height:1;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.fc-dc-price em{ font-style:normal; font-size:.56em; vertical-align:.3em; margin-right:1px; opacity:.75; }
.fc-dc-byhand{ font-size:19px; font-weight:750; opacity:.85; }

/* the table */
.fc-dc-facts{
  display:grid; grid-template-columns:repeat(var(--fc-dc-cols, 2), minmax(0,1fr));
  gap:0 clamp(24px,4vw,56px); padding:0 clamp(18px,2.4vw,30px) 6px;
}
.fc-dc-fact{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid oklch(1 0 0 / .13);
}
.fc-dc-k{ font-size:14px; opacity:.87; }
.fc-dc-v{ font-size:15px; font-weight:700; text-align:right; }

/* the approved treatment: the table on white */
.fc-dc-panelled .fc-dc-facts{
  margin:0 clamp(18px,2.4vw,30px) clamp(18px,2.4vw,26px);
  padding:6px clamp(16px,2vw,24px);
  background:var(--fc-white); border-radius:16px;
}
.fc-dc-panelled .fc-dc-fact{ border-bottom:1px solid var(--fc-line); }
.fc-dc-panelled .fc-dc-fact:last-child,
.fc-dc-panelled .fc-dc-facts > .fc-dc-fact:nth-last-child(-n+1){ border-bottom:0; }
.fc-dc-panelled .fc-dc-k{ color:var(--fc-body); opacity:1; }
.fc-dc-panelled .fc-dc-v{ color:var(--fc-ink); }

.fc-dc-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:0 clamp(18px,2.4vw,30px) 20px; }
.fc-dc-cta{
  padding:14px 26px; border-radius:11px; text-decoration:none; font-weight:750; font-size:15px;
  background:var(--fc-dc-accent, var(--fc-lime)); color:var(--fc-dc-on, oklch(0.24 0.06 150));
  transition:transform .18s ease;
}
.fc-dc-cta:hover{ transform:translateY(-2px); }
.fc-dc-note{ font-size:12.5px; opacity:.85; }

@media (max-width:820px){
  .fc-dc-next{ order:9; margin-left:0; width:100%; }
  .fc-dc-facts{ grid-template-columns:repeat(min(2, var(--fc-dc-cols, 2)), minmax(0,1fr)); }
}
@media (max-width:560px){
  .fc-dc-facts{ grid-template-columns:1fr; }
  .fc-dc-price{ font-size:27px; }
  .fc-dc-name{ font-size:15.5px; }
  .fc-dc-foot{ flex-direction:column; align-items:stretch; text-align:center; }
  .fc-dc-cta{ text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .fc-dc-badge::before,.fc-dc-slide{ animation:none !important; transition:none !important; }
}

/* Shown to administrators only, when the devices card has nothing to print. */
.fc-dc-empty{
  display:grid; gap:6px; padding:20px 24px; border-radius:16px;
  border:1px dashed oklch(0.72 0.10 60); background:oklch(0.985 0.030 80);
  font-size:14.5px; line-height:1.6; color:oklch(0.36 0.06 60);
}
.fc-dc-empty strong{ font-size:15.5px; color:oklch(0.30 0.08 55); }
.fc-dc-empty-note{ font-size:12.5px; opacity:.75; }

/* ══ Inspected section ═════════════════════════════════════════════════
   A photo band with the content card lifted over its lower edge. The photo
   is never darkened; the words sit on white, which is why they stay legible
   whatever the photograph does.
   Configured from Theme Design -> Inspected section.
   ══════════════════════════════════════════════════════════════════════ */
.fc-is{ background:var(--fc-white); }
.fc-is-band{ height:clamp(220px, 30vw, var(--fc-is-band, 430px)); }
.fc-is-band img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:var(--fc-is-focus, 46% 30%);
}
.fc-is-wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(16px,4vw,48px) clamp(44px,6vw,88px); }
.fc-is-card{
  position:relative; z-index:2;
  margin-top:calc(-1 * clamp(40px, 7vw, var(--fc-is-lift, 96px)));
  background:var(--fc-white); border-radius:24px;
  padding:clamp(26px,3.2vw,50px);
  box-shadow:0 36px 68px -36px oklch(0.20 0.02 155 / .45);
}

/* Heading left, intro right, so the card is not a narrow column of text
   inside a wide box. */
.fc-is-head{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(16px,3vw,52px); align-items:end;
  padding-bottom:clamp(22px,2.6vw,32px); border-bottom:1px solid var(--fc-line);
}
.fc-is-kicker{
  margin:0; font-family:var(--fc-mono); font-size:12px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--fc-green);
}
.fc-is-title{
  margin:14px 0 0; font-size:clamp(27px,3.6vw,44px); line-height:1.05;
  letter-spacing:-.04em; font-weight:800; color:var(--fc-ink);
}
.fc-is-title em{ font-style:normal; color:var(--fc-green); }
.fc-is-lede{ margin:0; font-size:clamp(14.5px,1.15vw,16.5px); line-height:1.62; color:var(--fc-body); }

.fc-is-boxes{
  margin-top:clamp(22px,2.6vw,34px);
  display:grid; grid-template-columns:repeat(var(--fc-is-cols, 4), minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);
}
.fc-is-box{
  position:relative; display:grid; gap:9px; padding:20px; border-radius:16px;
  border:1px solid var(--fc-is-edge, oklch(0.91 0.038 148));
  background:var(--fc-white);
  box-shadow:0 14px 26px -20px oklch(0.30 0.04 152 / .5);
}
[data-shade="s2"] .fc-is-box{
  background:linear-gradient(180deg, var(--fc-is-tint, oklch(0.968 0.034 148)), var(--fc-white) 78%);
}
[data-shade="s1"] .fc-is-box{ background:var(--fc-is-tint, oklch(0.968 0.034 148)); }

/* Each of these is targeted, not "any span inside the box". A blanket
   `.fc-is-box span` rule outscores a single class and would paint the seal
   and the icon body-grey however the file is ordered. */
.fc-is-box strong{ display:block; font-size:15.5px; letter-spacing:-.02em; line-height:1.3; color:var(--fc-ink); }
.fc-is-box .fc-is-note{ font-size:13.5px; line-height:1.55; color:var(--fc-body); }
.fc-is-box .fc-is-i{
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:oklch(0.945 0.060 148); color:var(--fc-is-icon, var(--fc-green));
}
.fc-is-box .fc-is-i svg{ width:20px; height:20px; }
.fc-is-box .fc-is-seal{
  position:absolute; top:-10px; right:-10px; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--fc-is-seal, oklch(0.52 0.17 152));
  color:#fff; font-size:14px; font-weight:900; line-height:1;
  box-shadow:0 0 0 3px var(--fc-white), 0 6px 12px -6px oklch(0.35 0.10 152 / .8);
}

@media (max-width:1000px){
  .fc-is-head{ grid-template-columns:1fr; align-items:start; }
  .fc-is-boxes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .fc-is-boxes{ grid-template-columns:1fr; }
  .fc-is-card{ margin-top:-40px; border-radius:20px; }
}

/* ══ About section ═════════════════════════════════════════════════════
   A colour band carries the heading, the history panel lifts over its lower
   edge, and the columns sit beneath a rule. The panel's border is painted to
   the border box while the white fill is painted to the padding box, so the
   effect can never sit over the words.
   Configured from Theme Design -> About section.
   ══════════════════════════════════════════════════════════════════════ */

/* The angle must be a registered property or it cannot be interpolated —
   without this the travelling arc jumps from 0 to 360 instead of turning. */
@property --fc-ab-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.fc-ab{ background:var(--fc-white); }
.fc-ab-w{ max-width:1180px; margin:0 auto; }
.fc-ab-band{
  color:oklch(0.97 0.02 165);
  background:linear-gradient(160deg, var(--fc-ab-from, oklch(0.33 0.09 165)), var(--fc-ab-to, oklch(0.25 0.07 170)));
  padding:clamp(46px,6vw,88px) clamp(18px,4vw,48px) clamp(72px,9vw,128px);
}
.fc-ab-band h2{
  /* Colour stated, not inherited. The theme has a global
     `h1,h2,h3,h4,h5{ color:var(--fc-ink) }`, and any matching rule beats an
     inherited value however specific the ancestor is — which is why the
     heading came out near-black on the dark band. */
  color:var(--fc-ab-head, oklch(0.98 0.015 165));
  margin:0; max-width:22ch; font-size:clamp(29px,4.4vw,56px); line-height:1.03;
  letter-spacing:-.045em; font-weight:800; text-wrap:balance;
}
.fc-ab-sub{
  margin:16px 0 0; max-width:46ch; font-size:clamp(16px,1.5vw,20px); font-weight:600;
  color:var(--fc-ab-sub, oklch(0.87 0.11 165));
}
.fc-ab-low{ padding:0 clamp(18px,4vw,48px) clamp(46px,6vw,92px); }

.fc-ab-hist{
  transform:translateY(calc(-1 * var(--fc-ab-lift, 62px)));
  background:var(--fc-white); padding:clamp(24px,3vw,40px) clamp(24px,3.2vw,46px);
  box-shadow:0 30px 56px -36px oklch(0.25 0.04 165 / .55);
  border:2px solid transparent;
}
.fc-ab-hist p{ margin:0; font-size:clamp(15.5px,1.25vw,17.5px); line-height:1.74; color:var(--fc-body); }

.fc-ab-rib{
  display:grid; grid-template-columns:repeat(var(--fc-ab-cols, 3), minmax(0,1fr));
  gap:clamp(20px,3.2vw,48px); margin-top:clamp(-32px,-2.2vw,-14px);
  border-top:2px solid var(--fc-ab-rule, oklch(0.33 0.09 165)); padding-top:clamp(22px,2.6vw,34px);
}
.fc-ab-n{
  display:block; font-family:var(--fc-mono); font-size:11px; font-weight:700;
  letter-spacing:.14em; color:var(--fc-ab-c2, oklch(0.52 0.17 152));
}
.fc-ab-lab{
  display:block; margin-top:9px; font-family:var(--fc-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--fc-ab-lab, oklch(0.42 0.10 165));
}
.fc-ab-rib strong{
  display:block; margin-top:12px; font-size:clamp(17.5px,1.85vw,23px); line-height:1.26;
  letter-spacing:-.03em; color:oklch(0.19 0.03 165); text-wrap:balance;
}
.fc-ab-rib p{ margin:12px 0 0; font-size:14.5px; line-height:1.66; color:var(--fc-body); max-width:40ch; }

/* ── the border effects ─────────────────────────────────────────────── */
[data-edge="arc"] .fc-ab-hist{
  background:
    linear-gradient(var(--fc-white),var(--fc-white)) padding-box,
    conic-gradient(from var(--fc-ab-ang),
      var(--fc-ab-dim, oklch(0.90 0.02 165)) 0 62%,
      var(--fc-ab-c1, oklch(0.87 0.20 126)) 74%,
      var(--fc-ab-c2, oklch(0.52 0.17 152)) 82%,
      var(--fc-ab-dim, oklch(0.90 0.02 165)) 92% 100%) border-box;
  animation:fcAbTurn var(--fc-ab-speed, 4.5s) linear infinite;
}
[data-edge="conic"] .fc-ab-hist{
  background:
    linear-gradient(var(--fc-white),var(--fc-white)) padding-box,
    conic-gradient(from var(--fc-ab-ang),
      var(--fc-ab-c2, oklch(0.52 0.17 152)),
      var(--fc-ab-c1, oklch(0.87 0.20 126)),
      var(--fc-ab-rule, oklch(0.33 0.09 165)),
      var(--fc-ab-c2, oklch(0.52 0.17 152))) border-box;
  animation:fcAbTurn var(--fc-ab-speed, 4.5s) linear infinite;
}
[data-edge="sweep"] .fc-ab-hist{
  background:
    linear-gradient(var(--fc-white),var(--fc-white)) padding-box,
    linear-gradient(90deg, var(--fc-ab-c2, oklch(0.52 0.17 152)), var(--fc-ab-c1, oklch(0.87 0.20 126)),
      var(--fc-ab-rule, oklch(0.33 0.09 165)), var(--fc-ab-c1, oklch(0.87 0.20 126)),
      var(--fc-ab-c2, oklch(0.52 0.17 152))) border-box;
  background-size:auto, 320% 100%;
  animation:fcAbSlide var(--fc-ab-speed, 4.5s) ease-in-out infinite;
}
[data-edge="glow"] .fc-ab-hist{
  background:
    linear-gradient(var(--fc-white),var(--fc-white)) padding-box,
    linear-gradient(120deg, var(--fc-ab-c2, oklch(0.52 0.17 152)), var(--fc-ab-c1, oklch(0.87 0.20 126))) border-box;
  animation:fcAbGlow var(--fc-ab-speed, 4.5s) ease-in-out infinite;
}
[data-edge="dashes"] .fc-ab-hist{
  background:
    linear-gradient(var(--fc-white),var(--fc-white)) padding-box,
    repeating-linear-gradient(90deg, var(--fc-ab-c2, oklch(0.52 0.17 152)) 0 14px,
      transparent 14px 26px) border-box;
  background-size:auto, 26px 100%;
  animation:fcAbMarch calc(var(--fc-ab-speed, 4.5s) / 4) linear infinite;
}
[data-edge="corner"] .fc-ab-hist{ position:relative; border:1px solid var(--fc-ab-dim, oklch(0.90 0.02 165)); }
[data-edge="corner"] .fc-ab-hist::before,
[data-edge="corner"] .fc-ab-hist::after{
  content:""; position:absolute; width:34px; height:34px; pointer-events:none;
  animation:fcAbCorner var(--fc-ab-speed, 4.5s) ease-in-out infinite;
}
[data-edge="corner"] .fc-ab-hist::before{
  top:-2px; left:-2px;
  border-top:3px solid var(--fc-ab-c2, oklch(0.52 0.17 152));
  border-left:3px solid var(--fc-ab-c2, oklch(0.52 0.17 152));
}
[data-edge="corner"] .fc-ab-hist::after{
  right:-2px; bottom:-2px; animation-delay:calc(var(--fc-ab-speed, 4.5s) / 2);
  border-bottom:3px solid var(--fc-ab-c1, oklch(0.87 0.20 126));
  border-right:3px solid var(--fc-ab-c1, oklch(0.87 0.20 126));
}
[data-edge="none"] .fc-ab-hist{ border:1px solid var(--fc-ab-dim, oklch(0.90 0.02 165)); }

@keyframes fcAbTurn{ to{ --fc-ab-ang:360deg; } }
@keyframes fcAbSlide{ 0%,100%{ background-position:0 0, 0% 50%; } 50%{ background-position:0 0, 100% 50%; } }
@keyframes fcAbGlow{
  0%,100%{ box-shadow:0 30px 56px -36px oklch(0.25 0.04 165 / .55), 0 0 0 0 oklch(0.62 0.16 140 / .28); }
  50%    { box-shadow:0 30px 56px -36px oklch(0.25 0.04 165 / .55), 0 0 34px 4px oklch(0.62 0.16 140 / .28); }
}
@keyframes fcAbMarch{ to{ background-position:0 0, 26px 0; } }
@keyframes fcAbCorner{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

/* Motion is decoration on this panel, so it goes entirely when asked. The
   colour stays, because colour is not motion. */
@media (prefers-reduced-motion:reduce){
  .fc-ab-hist,
  [data-edge="corner"] .fc-ab-hist::before,
  [data-edge="corner"] .fc-ab-hist::after{ animation:none !important; }
}

@media (max-width:960px){
  .fc-ab-rib{ grid-template-columns:1fr; gap:clamp(22px,3vw,32px); }
  .fc-ab-rib p{ max-width:56ch; }
}

/* ══ Call-to-action strip ══════════════════════════════════════════════
   Stands on its own between the About section and the devices card, so it
   carries its own band rather than borrowing one from a section above.
   ══════════════════════════════════════════════════════════════════════ */
.fc-cta{
  background:var(--fc-white);
  border-top:1px solid var(--fc-line);
  padding:clamp(30px,4vw,56px) clamp(18px,4vw,48px);
}
.fc-cta-bar{
  max-width:1320px; margin:0 auto;
  display:flex; align-items:center; gap:14px 26px; flex-wrap:wrap;
  padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px); border-radius:18px;
  background:linear-gradient(120deg, oklch(0.24 0.05 155), oklch(0.17 0.03 158));
}
.fc-cta-lead{
  font-weight:750; font-size:clamp(16px,1.5vw,19px); letter-spacing:-.02em;
  color:oklch(0.98 0.012 145);
}
.fc-cta-note{ font-size:14.5px; line-height:1.5; color:oklch(0.80 0.015 145); max-width:52ch; }
.fc-cta-btn{
  margin-left:auto; padding:15px 26px; border-radius:12px; text-decoration:none; white-space:nowrap;
  background:var(--fc-lime); color:oklch(0.22 0.06 150); font-weight:750; font-size:15.5px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.fc-cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px -18px oklch(0.70 0.18 128 / .65);
}

@media (max-width:760px){
  /* margin-left:auto is what pins the button right on a wide bar; it has to
     go here or the button sits hard against the text once they stack. */
  .fc-cta-btn{ margin-left:0; width:100%; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .fc-cta-btn{ transition:none; }
  .fc-cta-btn:hover{ transform:none; }
}

/* ══ Devices grid section ══════════════════════════════════════════════
   Its own classes throughout. The `fc-pop-` family is rendered by the sell
   page AND by the plugin's quote wizard, so this section must not share a
   single selector with it — a change here would otherwise reach both.
   Configured from Theme Design -> Devices grid.
   ══════════════════════════════════════════════════════════════════════ */
.fc-dg{
  background:oklch(0.975 0.024 235);
  border-top:1px solid oklch(0.93 0.02 235);
  padding:clamp(44px,6vw,76px) clamp(18px,4vw,48px);
}
.fc-dg-w{ max-width:1320px; margin:0 auto; }
.fc-dg-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 24px;
}
.fc-dg-kicker{
  display:inline-flex; padding:6px 14px; border-radius:999px;
  background:oklch(0.945 0.060 148); font-family:var(--fc-mono); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:oklch(0.44 0.12 157);
}
.fc-dg-title{
  /* Stated, not inherited: the theme has a global h1–h5 colour rule and any
     rule that matches the element beats an inherited value. */
  color:oklch(0.20 0.02 155);
  margin:14px 0 0; font-size:clamp(28px,3.6vw,44px); font-weight:800;
  letter-spacing:-.035em; line-height:1.05;
}
.fc-dg-sub{ margin:8px 0 0; font-size:16px; color:oklch(0.46 0.015 150); }
.fc-dg-all{
  flex:none; padding:15px 24px; border-radius:14px; text-decoration:none;
  background:var(--fc-white); border:1px solid oklch(0.91 0.01 150);
  font-weight:650; font-size:15px; color:oklch(0.26 0.02 155);
  transition:transform .18s ease, box-shadow .18s ease;
}
.fc-dg-all:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -16px oklch(0.30 0.02 155 / .5); }

.fc-dg-grid{
  margin-top:28px; display:grid; gap:12px;
  grid-template-columns:repeat(var(--fc-dg-cols, 6), minmax(0,1fr));
}
.fc-dg-tile{
  position:relative; display:flex; flex-direction:column; align-items:center; overflow:hidden;
  min-width:0;
  border-radius:16px; background:var(--fc-white); border:1px solid oklch(0.92 0.012 150);
  text-decoration:none; padding-bottom:14px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fc-dg-tile:hover{
  transform:translateY(-3px); border-color:oklch(0.86 0.05 148);
  box-shadow:0 16px 30px -20px oklch(0.30 0.03 155 / .55);
}
.fc-dg-tile::before{
  content:""; position:absolute; inset:0 0 auto; height:92px;
  background:var(--fc-dg-tint, oklch(0.960 0.048 148));
  border-bottom:1px solid oklch(0.92 0.014 150);
}
.fc-dg-art{
  position:relative; z-index:1; height:78px; margin:7px 0 0; display:grid; place-items:center;
  width:100%; min-width:0;
  perspective:520px;
  --fc-b:oklch(0.93 0.012 150); --fc-e:oklch(0.66 0.02 150);
  --fc-s:oklch(0.985 0.004 150); --fc-l:oklch(0.86 0.014 150);
}
/* max-width is the whole point: these silhouettes are sized by height, and a
   wide one — the keyboard is 1.83:1 — renders 143px across at 78px tall. In a
   three-column phone grid the column is about 110px, so it escaped the tile,
   then the grid, then the page, and left a white strip down the right. */
.fc-dg-art svg{ height:100%; width:auto; max-width:100%; display:block; }
.fc-dg-name{
  position:relative; z-index:1; margin-top:16px; padding:0 10px; text-align:center;
  font-size:13.5px; font-weight:700; letter-spacing:-.015em; color:oklch(0.20 0.02 155);
}
.fc-dg-price{
  position:relative; z-index:1; margin-top:4px; font-family:var(--fc-mono); font-size:12.5px;
  font-weight:600; color:oklch(0.44 0.12 157);
}
.fc-dg-quote{ color:oklch(0.52 0.02 150); font-weight:500; }

/* The slow card turn, driven by theme.js one tile at a time. */
.fc-dg-tile.is-flipping .fc-dg-art svg{ animation:fcDgFlip 1.15s cubic-bezier(.4,0,.2,1); }
@keyframes fcDgFlip{
  0%   { transform:rotateY(0); }
  100% { transform:rotateY(360deg); }
}

@media (max-width:1100px){
  .fc-dg-grid{ grid-template-columns:repeat(var(--fc-dg-tcols, 4), minmax(0,1fr)); }
  /* Printed for the widest screen, so the tail is dropped here rather than
     chosen on the server — a cached page cannot know which width it is for. */
  .fc-dg-t-hide{ display:none; }
}
@media (max-width:720px){
  .fc-dg-grid{ grid-template-columns:repeat(var(--fc-dg-mcols, 3), minmax(0,1fr)); gap:10px; }
  .fc-dg-m-hide{ display:none; }
  .fc-dg-tile::before{ height:76px; }
  .fc-dg-art{ height:64px; }
  .fc-dg-name{ font-size:12.5px; margin-top:13px; }
  .fc-dg-all{ width:100%; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .fc-dg-tile,.fc-dg-all{ transition:none; }
  .fc-dg-tile.is-flipping .fc-dg-art svg{ animation:none; }
}

/* ══ Reviews ═══════════════════════════════════════════════════════════
   Three columns drifting at different speeds. Each column prints its cards
   twice and the track moves by half its own height, which is what makes the
   loop seamless — one copy would visibly snap back at the end.
   Configured from Theme Design -> Reviews.
   ══════════════════════════════════════════════════════════════════════ */
.fc-rv{
  background:var(--fc-rv-bg, oklch(0.982 0.030 88));
  padding:clamp(44px,6vw,84px) 0;
}
.fc-rv-w{ max-width:1320px; margin:0 auto; padding:0 clamp(18px,4vw,48px); }
.fc-rv-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:18px 32px; margin-bottom:clamp(26px,3.2vw,42px);
}
.fc-rv-kicker{
  display:inline-flex; padding:6px 14px; border-radius:999px; background:oklch(1 0 0 / .7);
  font-family:var(--fc-mono); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fc-rv-accent, oklch(0.44 0.12 157));
}
.fc-rv-title{
  /* Stated, not inherited: the theme has a global h1–h5 colour rule, and any
     rule matching the element beats an inherited value. */
  color:oklch(0.20 0.02 155);
  margin:14px 0 0; max-width:24ch; font-size:clamp(26px,3.4vw,42px);
  font-weight:800; letter-spacing:-.035em; line-height:1.06;
}
.fc-rv-score{ display:grid; gap:4px; justify-items:end; }
.fc-rv-num{
  font-size:clamp(34px,4vw,52px); font-weight:800; letter-spacing:-.05em; line-height:1;
  color:var(--fc-rv-accent, oklch(0.44 0.12 157)); font-variant-numeric:tabular-nums;
}
.fc-rv-count{
  font-family:var(--fc-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fc-muted);
}
.fc-rv-stars{ color:var(--fc-rv-star, oklch(0.78 0.15 78)); letter-spacing:.08em; font-size:13.5px; }
.fc-rv-stars i{ color:oklch(0.88 0.02 78); font-style:normal; }

.fc-rv-cols{
  display:grid; grid-template-columns:repeat(var(--fc-rv-cols, 3), minmax(0,1fr));
  gap:16px; overflow:hidden;
  height:clamp(360px, 44vw, var(--fc-rv-height, 540px));
  padding:0 clamp(18px,4vw,48px); max-width:1320px; margin:0 auto;
}
[data-rv-fade] .fc-rv-cols{
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}
.fc-rv-col{ overflow:hidden; }
.fc-rv-track{
  display:grid; gap:16px;
  animation:fcRvUp var(--fc-rv-dur, 34s) linear infinite;
}
.fc-rv-col.is-down .fc-rv-track{ animation-name:fcRvDown; }
[data-rv-pause] .fc-rv-cols:hover .fc-rv-track{ animation-play-state:paused; }
@keyframes fcRvUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes fcRvDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }

.fc-rv-card{
  display:grid; gap:9px; padding:20px 22px; border-radius:16px;
  background:var(--fc-rv-card, oklch(1 0 0));
  border:1px solid var(--fc-rv-edge, oklch(0.92 0.014 150));
}
.fc-rv-card p{ margin:0; font-size:14.5px; line-height:1.6; color:oklch(0.28 0.02 155); }
.fc-rv-who{ font-weight:750; font-size:14px; color:oklch(0.20 0.02 155); }
.fc-rv-who i{ display:block; font-style:normal; font-weight:400; font-size:12.5px; color:var(--fc-muted); }

@media (max-width:900px){
  /* Four columns of narrow cards is unreadable, so the count is capped here
     rather than left to whatever the setting says. */
  .fc-rv-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fc-rv-col:nth-child(n+3){ display:none; }
}
@media (max-width:560px){
  .fc-rv-cols{ grid-template-columns:1fr; }
  .fc-rv-col:nth-child(n+2){ display:none; }
  .fc-rv-score{ justify-items:start; }
}
@media (prefers-reduced-motion:reduce){
  /* The drift is the whole effect, so with it off the section becomes a plain
     column that can be scrolled instead. */
  .fc-rv-track{ animation:none !important; }
  .fc-rv-cols{ height:auto; overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .fc-rv-card[aria-hidden="true"]{ display:none; }
}

/* ══ Site header ═══════════════════════════════════════════════════════
   One set of elements; the layout is chosen by data-style. Full width by
   default — --fc-hd-max is `none` unless a width is set.
   Configured from Theme Design -> Header.
   ══════════════════════════════════════════════════════════════════════ */
.fc-hd{
  position:relative; z-index:40;
  background:var(--fc-hd-bg, oklch(1 0 0));
  border-bottom:1px solid var(--fc-hd-edge, oklch(0.92 0.012 150));
}
.fc-hd[data-sticky]{ position:sticky; top:0; }
.fc-hd-in{
  max-width:var(--fc-hd-max, none); margin:0 auto;
  padding:0 clamp(14px,3vw,40px);
  display:flex; align-items:center; gap:clamp(10px,1.8vw,24px);
}
.fc-hd-main .fc-hd-in{ height:var(--fc-hd-h, 76px); }
/* The logo is the theme's own `.fc-brand`, untouched — same size, same tagline,
   same green digit. Only the colour follows the header setting, so recolouring
   a dark header still works without changing the mark itself. */
.fc-hd-logo{ flex:none; }
.fc-hd .fc-brand strong{ color:var(--fc-hd-text, oklch(0.19 0.02 155)); }
.fc-hd .fc-brand strong em{ color:var(--fc-green); font-style:normal; }

/* fastcash_menu() prints bare <li> with no <ul> — items_wrap is '%3$s' — so the
   nav element itself is the flex container and the items are styled directly.
   Targeting `ul` here matched nothing and left a bulleted list. */
.fc-hd-nav{ display:flex; gap:2px; align-items:center; }
.fc-hd-nav li{ list-style:none; margin:0; padding:0; }
.fc-hd-nav a{
  display:block; padding:9px 12px; border-radius:9px; text-decoration:none;
  font-size:14.5px; font-weight:600; white-space:nowrap;
  color:var(--fc-hd-link, oklch(0.32 0.02 155));
}
.fc-hd-nav a:hover{ background:oklch(0.5 0 0 / .07); }
.fc-hd-nav .current-menu-item > a,
.fc-hd-nav .current_page_item > a{
  background:var(--fc-hd-on-bg, oklch(0.945 0.060 148));
  color:var(--fc-hd-on-fg, oklch(0.40 0.12 157));
}

.fc-hd-acts{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.fc-hd-quiet{
  font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap;
  color:var(--fc-hd-link, oklch(0.32 0.02 155));
}
.fc-hd-cta{
  padding:11px 20px; border-radius:11px; text-decoration:none; white-space:nowrap;
  background:var(--fc-hd-cta-bg, oklch(0.46 0.15 152));
  color:var(--fc-hd-cta-fg, oklch(0.99 0.012 140));
  font-size:14px; font-weight:750;
}
.fc-hd-box,.fc-hd-user{
  display:flex; align-items:center; gap:8px; text-decoration:none; white-space:nowrap;
  border:1px solid var(--fc-hd-edge, oklch(0.92 0.012 150));
  color:var(--fc-hd-link, oklch(0.32 0.02 155));
  font-size:14px; font-weight:650;
}
.fc-hd-box{ padding:10px 15px; border-radius:11px; }
/* Square, the same corner as My Box. It carries only an icon on a phone, so it
   is sized rather than padded — a padded box with no text is not square. */
.fc-hd-user{ padding:9px 14px 9px 11px; border-radius:11px; }
.fc-hd-box svg,.fc-hd-user svg{ width:18px; height:18px; flex:none; }
.fc-hd-box-n{
  display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:var(--fc-hd-cta-bg, oklch(0.46 0.15 152)); color:var(--fc-hd-cta-fg, #fff);
  font-family:var(--fc-mono); font-size:11px;
}
/* Signed in, the name is the point, so it is given the weight. */
.fc-hd-user.is-in{ border-color:transparent; background:var(--fc-hd-on-bg, oklch(0.945 0.060 148));
  color:var(--fc-hd-on-fg, oklch(0.40 0.12 157)); font-weight:750; }

.fc-hd-burger{
  display:none; width:42px; height:42px; border-radius:11px; flex:none; cursor:pointer;
  border:1px solid var(--fc-hd-edge, oklch(0.92 0.012 150)); background:transparent;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.fc-hd-burger i{ display:block; width:17px; height:2px; border-radius:2px;
  background:var(--fc-hd-link, oklch(0.32 0.02 155)); }

.fc-hd-util{ background:var(--fc-hd-util-bg, oklch(0.19 0.02 155)); color:var(--fc-hd-util-fg, oklch(0.88 0.012 145)); }
.fc-hd-util .fc-hd-in{ padding-top:7px; padding-bottom:7px; justify-content:space-between; font-size:12.5px; }
.fc-hd-util-r{ display:flex; gap:18px; }
.fc-hd-util a{ color:inherit; text-decoration:none; }
.fc-hd-row2{ border-top:1px solid var(--fc-hd-edge, oklch(0.92 0.012 150)); }
.fc-hd-row2 .fc-hd-nav{ padding-top:5px; padding-bottom:5px; }

.fc-hd-drawer{ display:none; border-top:1px solid var(--fc-hd-edge, oklch(0.92 0.012 150));
  padding:14px clamp(14px,3vw,40px) 20px; }
.fc-hd.is-open .fc-hd-drawer{ display:grid; gap:14px; }
.fc-hd-drawer-nav{ display:grid; }
.fc-hd-drawer-nav li{ list-style:none; margin:0; padding:0; }
.fc-hd-drawer-nav a{
  display:block; padding:13px 2px; text-decoration:none; font-size:16px; font-weight:700;
  border-bottom:1px solid var(--fc-hd-edge, oklch(0.92 0.012 150));
  color:var(--fc-hd-text, oklch(0.19 0.02 155));
}
.fc-hd-drawer-user{ display:grid; }
.fc-hd-drawer-user a{ padding:11px 2px; font-size:14.5px; text-decoration:none;
  color:var(--fc-hd-link, oklch(0.32 0.02 155)); }
.fc-hd-drawer-cta{
  padding:15px; border-radius:12px; text-align:center; text-decoration:none; font-weight:750; font-size:15.5px;
  background:var(--fc-hd-cta-bg, oklch(0.46 0.15 152)); color:var(--fc-hd-cta-fg, oklch(0.99 0.012 140));
}

@media (max-width:1080px){
  /* One rule for every layout: burger left, logo centred, actions right. */
  .fc-hd-burger{ display:flex; }
  .fc-hd-nav,.fc-hd-row2,.fc-hd-cta,.fc-hd-box-t,.fc-hd-quiet{ display:none; }
  .fc-hd-main .fc-hd-in{ height:64px; position:relative; justify-content:space-between; }
  .fc-hd-logo{ position:absolute; left:50%; transform:translateX(-50%); align-items:center; }
  /* The tagline does not fit beside a burger and a box, so only the name shows. */
  .fc-hd-logo span{ display:none; }
  .fc-hd-acts{ margin-left:0; gap:8px; }
  /* Both icons the same 40px square. My Box was 44 wide against the account
     icon's 40, which is the sort of two-pixel difference you cannot unsee once
     they sit next to each other. */
  /* justify-content, not place-items: these are flex boxes, and justify-items
     has no effect in flex — the icon stayed pinned at flex-start. */
  .fc-hd-box{
    width:40px; height:40px; padding:0; gap:0; border-radius:11px;
    justify-content:center; align-items:center;
  }
  /* No name on a phone. A burger, a centred logo, My Box and an icon already
     fill the row; adding a name pushed it past the viewport and left a white
     strip down the right. The green fill and the tick say "signed in" without
     it. */
  .fc-hd-user-t{ display:none; }
  .fc-hd-util-l{ display:none; }
  .fc-hd-util .fc-hd-in{ justify-content:center; }
}

/* ══ Site footer ═══════════════════════════════════════════════════════
   Thin: a support bar, one row of links, a copyright line, then the small
   print. Configured from Theme Design -> Footer.
   ══════════════════════════════════════════════════════════════════════ */
.fc-ft{ background:var(--fc-ft-bg, oklch(0.17 0.02 155)); color:var(--fc-ft-text, oklch(0.86 0.012 145)); }
.fc-ft[data-light]{ border-top:1px solid var(--fc-line); }
.fc-ft-in{ max-width:var(--fc-ft-max, none); margin:0 auto; padding:0 clamp(18px,4vw,48px); }
.fc-ft-bar .fc-ft-in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 24px; padding-top:24px; padding-bottom:20px;
}
.fc-ft-sup{ display:grid; gap:2px; }
.fc-ft-lab{
  font-family:var(--fc-mono); font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; opacity:.75;
}
.fc-ft-phone{
  font-size:19px; font-weight:800; letter-spacing:-.025em; text-decoration:none; white-space:nowrap;
  color:var(--fc-ft-acc, oklch(0.87 0.20 126));
}
.fc-ft-hours{ font-size:12.5px; opacity:.8; }
.fc-ft-btn{
  padding:12px 22px; border-radius:11px; text-decoration:none; white-space:nowrap;
  background:var(--fc-ft-btn, oklch(0.87 0.20 126)); color:var(--fc-ft-btn-fg, oklch(0.20 0.05 150));
  font-weight:750; font-size:14.5px;
}
.fc-ft-logo .fc-ft-in{ padding-top:26px; padding-bottom:4px; }
.fc-ft-logo a{ text-decoration:none; display:inline-block; }
/* .fc-footer-brand carries the original footer logo styling; only the colour is
   allowed to follow the footer setting. */
.fc-ft[data-light] .fc-footer-brand{ color:var(--fc-ft-text, oklch(0.19 0.02 155)); }
.fc-ft[data-light] .fc-footer-brand em{ color:var(--fc-green); }
.fc-ft-brand{ font-size:17px; font-weight:800; letter-spacing:-.03em; }
.fc-ft-marks{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; opacity:.85; }
.fc-ft-marks i{ color:var(--fc-ft-acc, oklch(0.87 0.20 126)); font-style:normal; font-weight:800; margin-right:6px; }
.fc-ft-mid .fc-ft-in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px 20px; padding-bottom:18px;
}
.fc-ft-links{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.fc-ft-links li{ list-style:none; margin:0; padding:0; }
.fc-ft-links a{ font-size:13.5px; text-decoration:none; color:var(--fc-ft-link, oklch(0.82 0.012 145)); }
.fc-ft-links a:hover{ opacity:.75; }
.fc-ft-legal .fc-ft-in{
  padding-top:14px; padding-bottom:16px; font-size:12px; opacity:.75;
  border-top:1px solid var(--fc-ft-edge, oklch(1 0 0 / .1));
}
/* The smallest type on the page, and still legible — 12px at 1.65 rather than
   9px grey on grey, which looks like something being hidden. */
.fc-ft-disc{ border-top:1px solid var(--fc-ft-edge, oklch(1 0 0 / .1)); }
.fc-ft-disc .fc-ft-in{ padding-top:16px; padding-bottom:26px; }
.fc-ft-disc p{
  margin:0 0 10px; max-width:96ch; font-size:12px; line-height:1.65;
  color:var(--fc-ft-disc, oklch(0.62 0.012 145));
}
.fc-ft-disc p:last-child{ margin-bottom:0; }

/* one line */
.fc-ft[data-style="oneline"] .fc-ft-bar .fc-ft-in{ padding-bottom:14px; }
.fc-ft[data-style="oneline"] .fc-ft-mid .fc-ft-in{ padding-top:0; }
/* centred */
.fc-ft[data-style="centre"] .fc-ft-bar .fc-ft-in{ flex-direction:column; text-align:center;
  padding-top:clamp(30px,3.6vw,48px); }
.fc-ft[data-style="centre"] .fc-ft-sup{ justify-items:center; }
.fc-ft[data-style="centre"] .fc-ft-phone{ font-size:clamp(26px,3.4vw,40px); letter-spacing:-.04em; }
.fc-ft[data-style="centre"] .fc-ft-mid .fc-ft-in{ justify-content:center; }
.fc-ft[data-style="centre"] .fc-ft-links{ justify-content:center; }

@media (max-width:760px){
  .fc-ft-bar .fc-ft-in,.fc-ft-mid .fc-ft-in{ flex-direction:column; align-items:flex-start; }
  .fc-ft-btn{ width:100%; text-align:center; }
  .fc-ft[data-style="centre"] .fc-ft-in{ align-items:center; }
}

/* the two legal links beside the copyright line */
.fc-ft-legal .fc-ft-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 18px; }
.fc-ft-legal-links{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.fc-ft-legal-links a{ font-size:12px; text-decoration:none; color:var(--fc-ft-link, oklch(0.82 0.012 145)); }
.fc-ft-legal-links a:hover{ opacity:.75; }

/* ══ Legal pages ═══════════════════════════════════════════════════════
   Privacy and terms. The contents list is built from the headings in the
   page's own content, so a section added in the editor appears here without
   a code change.
   ══════════════════════════════════════════════════════════════════════ */
.fc-lg{ background:var(--fc-white); }
.fc-lg-w{ max-width:1180px; margin:0 auto; padding:0 clamp(18px,4vw,48px); }
.fc-lg-head{
  background:linear-gradient(170deg, oklch(0.975 0.020 150), var(--fc-white));
  border-bottom:1px solid var(--fc-line);
  padding:clamp(38px,5vw,72px) 0 clamp(28px,3.4vw,44px);
}
.fc-lg-kick{
  display:inline-flex; padding:6px 14px; border-radius:999px; background:oklch(0.945 0.060 148);
  font-family:var(--fc-mono); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:oklch(0.44 0.12 157);
}
.fc-lg-head h1{
  color:oklch(0.19 0.02 155); margin:16px 0 0; max-width:20ch;
  font-size:clamp(30px,4.4vw,52px); font-weight:800; letter-spacing:-.04em; line-height:1.04;
  text-wrap:balance;
}
.fc-lg-lede{ margin:16px 0 0; max-width:58ch; font-size:clamp(15.5px,1.3vw,18px); line-height:1.65; color:var(--fc-body); }
.fc-lg-date{
  display:block; margin-top:18px; font-family:var(--fc-mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--fc-muted);
}
.fc-lg-body{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(24px,5vw,72px);
  padding-top:clamp(30px,4vw,56px); padding-bottom:clamp(44px,6vw,88px);
}
/* min-width:0 keeps a long unbroken string — a URL in the text — from forcing
   the grid column wider than its share. */
.fc-lg-main{ min-width:0; }
.fc-lg-toc{ position:sticky; top:24px; align-self:start; min-width:0; }
.fc-lg-toc-t{
  font-family:var(--fc-mono); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fc-muted);
}
.fc-lg-toc ol{ margin:12px 0 0; padding:0; list-style:none; counter-reset:t; display:grid; gap:2px; }
.fc-lg-toc li{ counter-increment:t; }
.fc-lg-toc a{
  display:block; padding:7px 10px; border-radius:8px; text-decoration:none;
  font-size:13.5px; line-height:1.4; color:var(--fc-ink-2);
}
.fc-lg-toc a::before{
  content:counter(t,decimal-leading-zero) " ";
  font-family:var(--fc-mono); font-size:11px; color:var(--fc-muted);
}
.fc-lg-toc a:hover{ background:oklch(0.965 0.012 150); color:var(--fc-green); }
.fc-lg-help{
  margin-top:22px; padding:16px; border-radius:14px;
  background:oklch(0.968 0.030 150); display:grid; gap:3px;
}
.fc-lg-help strong{ font-size:13.5px; color:oklch(0.22 0.03 155); }
.fc-lg-help a{
  font-size:17px; font-weight:800; letter-spacing:-.025em;
  color:oklch(0.40 0.12 157); text-decoration:none;
}
.fc-lg-help span{ font-size:12px; color:var(--fc-muted); }

.fc-lg-short{
  padding:clamp(20px,2.4vw,28px); border-radius:18px;
  background:oklch(0.972 0.030 150); border:1px solid oklch(0.91 0.04 148);
}
.fc-lg-short-t{
  font-family:var(--fc-mono); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:oklch(0.44 0.12 157);
}
.fc-lg-short ul{ margin:12px 0 0; padding:0; list-style:none; display:grid; gap:9px; }
.fc-lg-short li{
  position:relative; padding-left:26px; font-size:15px; line-height:1.55;
  color:oklch(0.24 0.02 155); font-weight:600;
}
.fc-lg-short li::before{ content:"\2713"; position:absolute; left:0; top:0; font-weight:800; color:var(--fc-green); }
.fc-lg-short-n{ display:block; margin-top:14px; font-size:12.5px; color:var(--fc-muted); }

/* The content comes from the editor, so the headings are styled where they
   land rather than being wrapped in a class we control. */
.fc-lg-text h2{
  color:oklch(0.19 0.02 155); margin:clamp(28px,3.4vw,44px) 0 14px;
  font-size:clamp(19px,2.2vw,26px); font-weight:800; letter-spacing:-.03em; line-height:1.25;
  display:flex; gap:12px; align-items:baseline; scroll-margin-top:24px;
}
.fc-lg-n{ font-family:var(--fc-mono); font-size:12px; font-weight:700; color:oklch(0.62 0.10 152); flex:none; }
.fc-lg-text p{ margin:0 0 12px; max-width:70ch; font-size:15.5px; line-height:1.72; color:var(--fc-body); }
.fc-lg-text strong{ color:oklch(0.20 0.02 155); }
.fc-lg-text ul,.fc-lg-text ol{ margin:0 0 14px; padding-left:20px; max-width:70ch; }
.fc-lg-text li{ margin-bottom:7px; font-size:15.5px; line-height:1.72; color:var(--fc-body); }
.fc-lg-text a{ color:var(--fc-green); }

@media (max-width:900px){
  .fc-lg-body{ grid-template-columns:1fr; }
  .fc-lg-toc{ position:static; padding-bottom:8px; border-bottom:1px solid var(--fc-line); }
  .fc-lg-toc ol{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fc-lg-help{ margin-top:16px; }
}
@media (max-width:560px){ .fc-lg-toc ol{ grid-template-columns:1fr; } }

/* The running bar above the devices grid. */
.fc-dg-bar{ margin-top:22px; display:flex; align-items:center; gap:14px; }
.fc-dg-bar[data-pos="head"]{ margin-top:14px; }
.fc-dg-track{
  flex:1; height:3px; border-radius:3px; overflow:hidden;
  background:oklch(0.90 0.02 220);
}
.fc-dg-fill{
  display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg, oklch(0.52 0.17 152), oklch(0.80 0.19 126));
}
.fc-dg-note{
  font-family:var(--fc-mono); font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:oklch(0.48 0.06 220); white-space:nowrap;
}
.fc-dg-pause{
  width:28px; height:28px; border-radius:50%; flex:none; cursor:pointer;
  border:1px solid oklch(0.86 0.02 220); background:var(--fc-white);
  display:grid; place-items:center;
}
.fc-dg-pause i{
  display:block; width:7px; height:9px;
  border-left:2.5px solid oklch(0.40 0.04 220); border-right:2.5px solid oklch(0.40 0.04 220);
}
.fc-dg.is-paused .fc-dg-pause i{
  width:0; height:0; border:0; border-left:9px solid oklch(0.40 0.04 220);
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
/* The tile fades before it is swapped. `hidden` is what the script toggles, so
   the fade class only ever sits on something still on screen. */
.fc-dg-tile{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .32s ease; }
.fc-dg-tile.is-out{ opacity:0; transform:translateY(6px); }
.fc-dg-tile[hidden]{ display:none; }

@media (max-width:720px){ .fc-dg-note{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .fc-dg-tile.is-out{ opacity:1; transform:none; }
}

/* ══ Questions ═════════════════════════════════════════════════════════
   Heading, intro and the support card on the left; the questions on the
   right. Real <details> elements, so they open with no JavaScript.
   Configured from Theme Design -> Questions.
   ══════════════════════════════════════════════════════════════════════ */
.fc-fq{
  background:var(--fc-fq-bg, oklch(0.982 0.022 30));
  padding:clamp(44px,6vw,84px) clamp(18px,4vw,48px);
}
.fc-fq-w{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.4fr);
  gap:clamp(24px,4vw,64px); align-items:start;
}
.fc-fq-side{ position:sticky; top:24px; }
.fc-fq-kick{
  display:inline-flex; padding:6px 14px; border-radius:999px;
  background:var(--fc-fq-card, oklch(1 0 0));
  font-family:var(--fc-mono); font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--fc-fq-acc, oklch(0.44 0.12 157));
}
.fc-fq-side h2{
  color:oklch(0.19 0.02 155); margin:14px 0 0; font-size:clamp(27px,3.6vw,44px);
  font-weight:800; letter-spacing:-.035em; line-height:1.06; text-wrap:balance;
}
.fc-fq-lede{ margin:14px 0 0; max-width:34ch; font-size:15.5px; line-height:1.65; color:var(--fc-body); }

.fc-fq-help{
  margin-top:22px; padding:20px; border-radius:16px;
  background:var(--fc-fq-card, oklch(1 0 0));
  border:1px solid var(--fc-fq-edge, oklch(0.93 0.014 30));
  display:grid; gap:3px;
}
.fc-fq-help-t{
  font-family:var(--fc-mono); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fc-muted);
}
.fc-fq-tel{
  margin-top:4px; font-size:21px; font-weight:800; letter-spacing:-.03em;
  color:var(--fc-fq-acc, oklch(0.44 0.12 157)); text-decoration:none;
}
.fc-fq-hours{ font-size:12.5px; color:var(--fc-muted); }
/* A hairline between the two: phoning and emailing are two choices, not one
   run-on block of contact details. */
.fc-fq-mail{
  margin-top:12px; padding-top:12px;
  border-top:1px solid var(--fc-fq-edge, oklch(0.93 0.014 30));
  font-size:15px; font-weight:700; letter-spacing:-.015em;
  color:oklch(0.24 0.02 155); text-decoration:none; word-break:break-word;
}
.fc-fq-mail:hover{ color:var(--fc-fq-acc, oklch(0.44 0.12 157)); }
.fc-fq-reply{ font-size:12.5px; line-height:1.5; color:var(--fc-muted); }

/* Tracking answers the question instead of asking someone to, so it is a
   button on the card rather than a third line of contact details. */
.fc-fq-track{
  margin-top:16px; padding:13px 14px; border-radius:12px; text-decoration:none;
  background:oklch(0.958 0.040 148); border:1px solid oklch(0.90 0.05 148);
  display:flex; align-items:center; gap:12px;
  transition:background .18s ease, transform .18s ease;
}
.fc-fq-track:hover{ background:oklch(0.945 0.055 148); transform:translateY(-1px); }
.fc-fq-track-i{
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px; flex:none;
  background:var(--fc-white); color:oklch(0.42 0.12 155);
}
.fc-fq-track-i svg{ width:18px; height:18px; }
.fc-fq-track-t{ display:grid; gap:1px; min-width:0; }
.fc-fq-track-t b{ font-size:14.5px; font-weight:750; letter-spacing:-.015em; color:oklch(0.22 0.03 155); }
.fc-fq-track-t span{ font-size:12px; line-height:1.4; color:oklch(0.44 0.04 152); }
.fc-fq-track-go{ margin-left:auto; font-size:16px; font-weight:800; color:oklch(0.42 0.12 155); flex:none; }

/* min-width:0 keeps a long unbroken word in an answer from forcing this grid
   column wider than its share. */
.fc-fq-list{ min-width:0; }
.fc-fq-item{
  background:var(--fc-fq-card, oklch(1 0 0)); border-radius:16px; margin-bottom:10px;
  border:1px solid var(--fc-fq-edge, oklch(0.93 0.014 30)); overflow:hidden;
}
.fc-fq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px;
  padding:18px 22px; font-size:15.5px; font-weight:750; letter-spacing:-.015em;
  color:oklch(0.20 0.02 155);
}
.fc-fq-item summary::-webkit-details-marker{ display:none; }
.fc-fq-mark{ margin-left:auto; position:relative; width:16px; height:16px; flex:none; }
.fc-fq-mark::before,.fc-fq-mark::after{
  content:""; position:absolute; inset:50% 0 auto; height:2px; border-radius:2px;
  background:var(--fc-fq-acc, oklch(0.44 0.12 157)); transform:translateY(-50%);
}
.fc-fq-mark::after{ transform:translateY(-50%) rotate(90deg); transition:transform .2s ease; }
.fc-fq-item[open] .fc-fq-mark::after{ transform:translateY(-50%) rotate(0); }
.fc-fq-a{ padding:0 22px 20px; }
.fc-fq-a p{ margin:0; max-width:70ch; font-size:15px; line-height:1.68; color:var(--fc-body); }

/* ══ Closing band ══════════════════════════════════════════════════════ */
.fc-ct{
  padding:clamp(40px,5vw,76px) clamp(18px,4vw,48px);
  background:linear-gradient(150deg, var(--fc-ct-from, oklch(0.26 0.06 155)), var(--fc-ct-to, oklch(0.17 0.03 158)));
}
.fc-ct-w{ max-width:1180px; margin:0 auto; text-align:center; display:grid; justify-items:center; gap:14px; }
.fc-ct h2{
  color:var(--fc-ct-head, oklch(0.99 0.012 145)); margin:0; max-width:20ch;
  font-size:clamp(27px,3.8vw,46px); font-weight:800; letter-spacing:-.04em;
  line-height:1.05; text-wrap:balance;
}
.fc-ct p{ margin:0; max-width:46ch; font-size:16px; line-height:1.6; color:var(--fc-ct-text, oklch(0.84 0.012 145)); }
.fc-ct-btn{
  margin-top:6px; padding:16px 30px; border-radius:13px; text-decoration:none;
  font-weight:750; font-size:16px;
  background:var(--fc-ct-btn, oklch(0.87 0.20 126)); color:var(--fc-ct-btn-fg, oklch(0.20 0.05 150));
  transition:transform .18s ease, box-shadow .18s ease;
}
.fc-ct-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -18px oklch(0.70 0.18 128 / .6); }
.fc-ct-note{
  font-family:var(--fc-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fc-ct-text, oklch(0.72 0.012 145)); opacity:.85;
}
/* Small on purpose: it is for the person who is not ready to click, and must
   not compete with the button. */
.fc-ct-contact{ margin-top:4px; font-size:13.5px; color:var(--fc-ct-text, oklch(0.78 0.012 145)); }
.fc-ct-contact a{ color:var(--fc-ct-btn, oklch(0.87 0.20 126)); text-decoration:none; font-weight:650; }
.fc-ct-contact a:hover{ text-decoration:underline; }

@media (max-width:900px){
  .fc-fq-w{ grid-template-columns:1fr; }
  .fc-fq-side{ position:static; }
}
@media (prefers-reduced-motion:reduce){
  .fc-fq-track,.fc-ct-btn{ transition:none; }
  .fc-fq-track:hover,.fc-ct-btn:hover{ transform:none; }
}

/* ══ Mobile header ═════════════════════════════════════════════════════
   Everything below is inside the 1080px query or scoped to a class that
   only exists there. The desktop header is untouched by this block.
   ══════════════════════════════════════════════════════════════════════ */

/* Inert above the breakpoint: no scrim, no handle, nothing painted. */
.fc-hd-scrim{ display:none; }
.fc-hd-grab{ display:none; }
.fc-hd-tick{ display:none; }

@media (max-width:1080px){
  /* ── the burger, with a dot travelling its middle bar ──────────────── */
  [data-dot] .fc-hd-burger .fc-hd-dot{ position:relative; overflow:visible; }
  [data-dot] .fc-hd-burger .fc-hd-dot::after{
    content:""; position:absolute; top:50%; left:0; width:5px; height:5px; border-radius:50%;
    background:oklch(0.80 0.19 126); transform:translate(-1px,-50%);
    animation:fcHdDot 2.4s cubic-bezier(.6,0,.4,1) infinite;
  }
  /* Nothing should be moving while the menu is open and being read. */
  .fc-hd.is-open .fc-hd-burger .fc-hd-dot::after{ animation:none; opacity:0; }

  /* The burger folds into a cross, so one button both opens and closes. */
  .fc-hd-burger i{ transition:transform .26s cubic-bezier(.4,0,.2,1), opacity .18s ease; }
  .fc-hd.is-open .fc-hd-burger i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .fc-hd.is-open .fc-hd-burger i:nth-child(2){ opacity:0; transform:scaleX(.3); }
  .fc-hd.is-open .fc-hd-burger i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  /* ── the account icon ──────────────────────────────────────────────── */
  .fc-hd-user{
    position:relative; overflow:visible;
    width:40px; height:40px; padding:0; gap:0; border-radius:11px;
    justify-content:center; align-items:center;
  }
  .fc-hd-tick{
    display:grid; place-items:center; position:absolute; top:-5px; right:-5px;
    width:17px; height:17px; border-radius:50%;
    box-shadow:0 0 0 2px var(--fc-hd-bg, oklch(1 0 0));
  }
  .fc-hd-tick svg{ width:10px; height:10px; }

  /* Signed in: filled green, lime tick. */
  .fc-hd-user.is-in{
    border-color:transparent; background:var(--fc-green); color:oklch(0.99 0.012 140);
  }
  .fc-hd-user.is-in .fc-hd-tick{ background:var(--fc-lime); color:oklch(0.20 0.05 150); }

  /* Signed out: mint fill, green ring, tick on green. */
  /* The ring is drawn with an inset shadow, not a thicker border: a 2px border
     would make this icon 2px taller than My Box beside it. */
  .fc-hd-user.is-out{
    border-color:var(--fc-green); box-shadow:inset 0 0 0 1px var(--fc-green);
    background:oklch(0.96 0.045 148); color:oklch(0.40 0.12 157);
  }
  .fc-hd-user.is-out .fc-hd-tick{ background:var(--fc-green); color:oklch(0.99 0.012 140); }

  /* ── the menu, as a sheet ──────────────────────────────────────────── */
  .fc-hd-scrim{
    display:block; position:fixed; inset:0; z-index:38;
    background:oklch(0.20 0.02 155 / .45); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .26s ease;
  }
  [data-menu="sheet"].fc-hd.is-open .fc-hd-scrim{ opacity:1; pointer-events:auto; }

  [data-menu="sheet"] .fc-hd-drawer{
    display:grid; gap:14px; position:fixed; left:0; right:0; bottom:0; z-index:39;
    max-height:82vh; overflow-y:auto;
    background:var(--fc-hd-bg, oklch(1 0 0)); border-top:0;
    border-radius:22px 22px 0 0; padding:10px 20px calc(24px + env(safe-area-inset-bottom));
    transform:translateY(100%); transition:transform .32s cubic-bezier(.3,.8,.3,1);
    box-shadow:0 -20px 50px -30px oklch(0.2 0.02 155 / .7);
  }
  [data-menu="sheet"].fc-hd.is-open .fc-hd-drawer{ transform:none; }
  [data-menu="sheet"] .fc-hd-grab{
    display:block; width:42px; height:4px; border-radius:99px; margin:2px auto 4px;
    background:oklch(0.88 0.012 150);
  }

  /* The links arrive in sequence once the sheet has started to rise. */
  [data-menu="sheet"].fc-hd.is-open .fc-hd-drawer-nav li,
  [data-menu="sheet"].fc-hd.is-open .fc-hd-drawer-user a{
    animation:fcHdIn .34s cubic-bezier(.2,.7,.3,1) both;
  }
  [data-menu="sheet"].fc-hd.is-open .fc-hd-drawer-nav li:nth-child(2){ animation-delay:45ms; }
  [data-menu="sheet"].fc-hd.is-open .fc-hd-drawer-nav li:nth-child(3){ animation-delay:90ms; }
  [data-menu="sheet"].fc-hd.is-open .fc-hd-drawer-nav li:nth-child(4){ animation-delay:135ms; }
  [data-menu="sheet"].fc-hd.is-open .fc-hd-drawer-nav li:nth-child(5){ animation-delay:180ms; }
  [data-menu="sheet"].fc-hd.is-open .fc-hd-drawer-nav li:nth-child(n+6){ animation-delay:225ms; }
  [data-menu="sheet"].fc-hd.is-open .fc-hd-drawer-user a{ animation-delay:250ms; }
}

@keyframes fcHdDot{
  0%{ left:0; opacity:0; }
  15%{ opacity:1; }
  70%{ left:100%; opacity:1; }
  85%,100%{ left:100%; opacity:0; }
}
@keyframes fcHdIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .fc-hd-burger .fc-hd-dot::after{ animation:none !important; opacity:0; }
  .fc-hd-drawer,.fc-hd-scrim,.fc-hd-burger i{ transition:none !important; }
  .fc-hd-drawer-nav li,.fc-hd-drawer-user a{ animation:none !important; }
}

/* ══ Sideways overflow guard ═══════════════════════════════════════════
   Something on the page is wider than the viewport and I have not yet been
   able to identify it by reading the stylesheet. This stops the sideways
   scroll while that is found.

   `clip` rather than `hidden` on purpose: `overflow-x:hidden` turns the
   element into a scroll container, which silently kills `position:sticky` on
   the header. `clip` does not.

   This is a containment, not a fix. When the real cause is found, remove it —
   visit any page with ?fcdebug=1 to have the culprit named on screen.
   ══════════════════════════════════════════════════════════════════════ */
@supports (overflow-x: clip){
  html,body{ overflow-x:clip; }
}

/* ══ What we buy ═══════════════════════════════════════════════════════
   Search in the header, categories down the side, a grid beside them.
   Filtering happens in the browser against categories worked out on the
   server, so tapping one costs no request.
   Configured from Theme Design -> What we buy.
   ══════════════════════════════════════════════════════════════════════ */
.fc-wh{
  background:linear-gradient(170deg, oklch(0.972 0.030 150), var(--fc-white));
  border-bottom:1px solid var(--fc-line);
  padding:clamp(34px,4.6vw,66px) 0 clamp(24px,3vw,40px);
}
.fc-wh-w{ max-width:1320px; margin:0 auto; padding:0 clamp(18px,4vw,48px); }
.fc-wh-kick{
  display:inline-flex; padding:6px 14px; border-radius:999px; background:oklch(0.945 0.060 148);
  font-family:var(--fc-mono); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:oklch(0.44 0.12 157);
}
.fc-wh h1{
  color:oklch(0.19 0.02 155); margin:16px 0 0; max-width:20ch;
  font-size:clamp(30px,4.4vw,52px); font-weight:800; letter-spacing:-.04em; line-height:1.04;
  text-wrap:balance;
}
.fc-wh p{ margin:14px 0 0; max-width:56ch; font-size:clamp(15px,1.25vw,17px); line-height:1.65; color:var(--fc-body); }

.fc-wb-search{
  display:flex; align-items:center; gap:10px; width:min(100%,560px); margin-top:20px;
  padding:8px 8px 8px 16px; border-radius:16px; background:var(--fc-white);
  border:1.5px solid oklch(0.88 0.03 148);
  box-shadow:0 18px 36px -28px oklch(0.30 0.03 155 / .6);
}
.fc-wb-mag{ font-size:19px; color:var(--fc-muted); }
.fc-wb-search input{
  flex:1; min-width:0; border:0; background:0; font:15px var(--fc-font); color:var(--fc-ink);
}
.fc-wb-search input:focus{ outline:none; }
.fc-wb-search button{
  padding:13px 22px; border-radius:11px; border:0; cursor:pointer; white-space:nowrap;
  background:var(--fc-green); color:oklch(0.99 0.012 140); font:750 14.5px var(--fc-font);
}

.fc-wb{ background:var(--fc-white); padding:clamp(24px,3vw,40px) 0 clamp(44px,6vw,80px); }
.fc-wb-w{ max-width:1320px; margin:0 auto; padding:0 clamp(18px,4vw,48px); }
.fc-wb-split{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(20px,3vw,44px); align-items:start;
}
.fc-wb-side{ position:sticky; top:24px; min-width:0; }
.fc-wb-main{ min-width:0; }
.fc-wb-side-t{
  font-family:var(--fc-mono); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fc-muted);
}
.fc-wb-side nav{ display:grid; gap:2px; margin-top:12px; }
.fc-wb-side button{
  display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%;
  padding:11px 12px; border-radius:10px; border:0; background:0; cursor:pointer;
  font:600 14.5px var(--fc-font); color:var(--fc-ink-2); text-align:left; white-space:nowrap;
}
.fc-wb-side button i{ font-style:normal; font-family:var(--fc-mono); font-size:11.5px; color:var(--fc-muted); }
.fc-wb-side button:hover{ background:oklch(0.965 0.012 150); }
.fc-wb-side button.on{ background:oklch(0.945 0.060 148); color:oklch(0.40 0.12 157); }
.fc-wb-note{
  margin-top:18px; padding:16px; border-radius:14px; background:oklch(0.968 0.030 150);
  display:grid; gap:4px;
}
.fc-wb-note strong{ font-size:13.5px; color:oklch(0.22 0.03 155); }
.fc-wb-note span{ font-size:12.5px; line-height:1.55; color:var(--fc-body); }
.fc-wb-note a{ color:oklch(0.40 0.12 157); font-weight:700; text-decoration:none; white-space:nowrap; }

.fc-wb-grid{
  display:grid; grid-template-columns:repeat(var(--fc-wb-cols, 4), minmax(0,1fr)); gap:12px;
}
.fc-wb-tile{
  position:relative; display:flex; flex-direction:column; align-items:center; overflow:hidden;
  border-radius:16px; background:var(--fc-white); border:1px solid oklch(0.92 0.012 150);
  text-decoration:none; padding-bottom:14px; min-width:0;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fc-wb-tile[hidden]{ display:none; }
.fc-wb-tile:hover{
  transform:translateY(-3px); border-color:oklch(0.86 0.05 148);
  box-shadow:0 16px 30px -20px oklch(0.30 0.03 155 / .55);
}
.fc-wb-tile::before{
  content:""; position:absolute; inset:0 0 auto; height:92px;
  background:var(--fc-wb-tint, oklch(0.960 0.048 148));
  border-bottom:1px solid oklch(0.92 0.014 150);
}
.fc-wb-art{
  position:relative; z-index:1; height:78px; width:100%; min-width:0; margin:7px 0 0;
  display:grid; place-items:center;
  --fc-b:oklch(0.93 0.012 150); --fc-e:oklch(0.66 0.02 150);
  --fc-s:oklch(0.985 0.004 150); --fc-l:oklch(0.86 0.014 150);
}
/* Capped, or a wide silhouette sized by height escapes its tile. */
.fc-wb-art svg{ height:100%; width:auto; max-width:100%; display:block; }
.fc-wb-name{
  position:relative; z-index:1; margin-top:16px; padding:0 10px; text-align:center;
  font-size:13.5px; font-weight:700; letter-spacing:-.015em; color:oklch(0.20 0.02 155);
}
.fc-wb-price{
  position:relative; z-index:1; margin-top:4px; font-family:var(--fc-mono); font-size:12.5px;
  color:oklch(0.44 0.12 157);
}
.fc-wb-empty{ margin:26px 0 0; font-size:15px; color:var(--fc-body); }

.fc-wb-acts{
  margin-top:clamp(22px,2.6vw,32px); display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
.fc-wb-btn{
  padding:15px 28px; border-radius:13px; text-decoration:none; font-weight:700; font-size:15.5px;
  white-space:nowrap; transition:transform .18s ease, box-shadow .18s ease;
}
.fc-wb-btn:hover{ transform:translateY(-2px); }
.fc-wb-btn-quiet{ border:1px solid oklch(0.91 0.012 150); background:var(--fc-white); color:oklch(0.26 0.02 155); }
.fc-wb-btn-go{ background:var(--fc-green); color:oklch(0.99 0.012 140); }
.fc-wb-btn-go:hover{ box-shadow:0 16px 30px -18px oklch(0.40 0.10 152 / .9); }

@media (max-width:1100px){ .fc-wb-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px){
  .fc-wb-split{ grid-template-columns:1fr; }
  .fc-wb-side{ position:static; }
  /* The list becomes a scrolling strip; min-width:0 is what lets it scroll
     rather than stretch the page. */
  .fc-wb-side nav{
    grid-auto-flow:column; grid-auto-columns:max-content; gap:6px;
    overflow-x:auto; min-width:0; padding-bottom:6px;
  }
  .fc-wb-side button{ border:1px solid oklch(0.91 0.012 150); }
}
@media (max-width:520px){
  .fc-wb-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fc-wb-acts{ flex-direction:column; }
  .fc-wb-btn{ text-align:center; }
  .fc-wb-search{ flex-wrap:wrap; }
  .fc-wb-search button{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .fc-wb-tile,.fc-wb-btn{ transition:none; }
  .fc-wb-tile:hover,.fc-wb-btn:hover{ transform:none; }
}
@keyframes vBump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.09); } 100%{ transform:scale(1); } }