/* Foldcam: the folder and the file name. Coral-to-crimson from the app icon, the red record dot
   for anything that records, and iOS's system blue for folders and links, exactly as the app uses them.
   The app itself uses the system font, so the page does too; file names are set in the site's mono. */
.fc {
  --fc-bg: #0a0b0d;
  --fc-bg-2: #101217;
  --fc-card: #16181d;
  --fc-card-2: #1c1f26;
  --fc-line: #272b33;
  --fc-ink: #f4f5f7;
  --fc-ink-2: #c6cad2;
  --fc-muted: #949caa;
  --fc-coral: #ff6b4a;
  --fc-crimson: #e8214f;
  --fc-deep: #b5113e;
  --fc-red: #ff3b30;
  /* The timer capsule sits behind small white text, so it runs a shade deeper than the
     app's system red: #ff3b30 would only reach 3.5:1 against white at this size. */
  --fc-rec: #d70015;
  /* SwiftUI's .red and .yellow in dark mode, as the camera screen uses them. */
  --fc-sys-red: #ff453a;
  --fc-blue: #0a84ff;
  --fc-yellow: #ffd60a;
  --fc-grad: linear-gradient(135deg, #ff6b4a 0%, #e8214f 100%);
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
  background:
    radial-gradient(900px circle at 88% -8%, rgba(232, 33, 79, .16), transparent 60%),
    radial-gradient(760px circle at -8% 18%, rgba(255, 107, 74, .13), transparent 60%),
    var(--fc-bg);
  color: var(--fc-ink);
  font-family: var(--ui);
}
.fc::after { opacity: .05; }
.fc ::selection { background: var(--fc-coral); color: #16050a; }
.fc .nav { background: rgba(10, 11, 13, .62); }
.fc a:focus-visible, .fc button:focus-visible, .fc summary:focus-visible, .fc input:focus-visible {
  outline: 3px solid var(--fc-coral); outline-offset: 3px;
}
.fc section { max-width: 1200px; padding-block: clamp(56px, 8vw, 110px); }
.fc p { color: var(--fc-ink-2); font-size: 18px; line-height: 1.6; }
.fc .coral { color: var(--fc-coral); }
.fc .footer { border-top-color: var(--fc-line); }

/* ---------- Shared type ---------- */
.fc-display {
  font-size: clamp(64px, 11vw, 150px); font-weight: 800; line-height: .95; letter-spacing: -.045em; margin: 0;
  background: var(--fc-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fc-h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: 0 0 20px; }
.fc-h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
.fc-eyebrow {
  font-family: var(--code); font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fc-coral); margin: 0 0 16px; display: flex; align-items: center; gap: 10px;
}
.fc-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--fc-red); flex-shrink: 0; }
.fc-eyebrow.blue { color: #6fb6ff; }
.fc-eyebrow.blue::before { background: var(--fc-blue); }
.fc-lede { font-size: clamp(18px, 2vw, 21px) !important; color: var(--fc-ink-2) !important; max-width: 560px; }

/* A file name, the way the app writes it. */
.fc .fname {
  font-family: var(--code); font-size: 15px; font-weight: 500; color: var(--fc-ink);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--fc-line); border-radius: 10px;
  padding: 9px 14px; display: inline-block; max-width: 100%; overflow-wrap: anywhere;
}
.fc .fname .slug { color: var(--fc-coral); }
.fc .fname .stamp { color: var(--fc-muted); }

/* ---------- Phone frame ---------- */
.fc .phone {
  position: relative; aspect-ratio: 1206 / 2622; width: 100%;
  border-radius: clamp(28px, 4vw, 46px); padding: clamp(6px, .8vw, 10px);
  background: linear-gradient(160deg, #2b2f36 0%, #07080a 45%, #1c1f24 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 50px 100px -30px rgba(0, 0, 0, .9);
}
.fc .phone > img, .fc .phone > .vf {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: clamp(22px, 3.3vw, 38px);
}
.fc .phone > img { background: #000; }
.fc-caption { font-size: 14px !important; color: var(--fc-muted) !important; margin: 16px auto 0; max-width: 360px; text-align: center; }

/* ---------- The camera screen, drawn in code ---------- */
/* The iPhone Simulator has no camera, so there is no screenshot of the viewfinder. This follows
   Foldcam/Camera/CameraView.swift on a 402 x 874 pt iPhone screen, in container units: 1 pt is
   100/402 cqw, so every size and offset below is the app's own value in points times 0.2488.
   Safe areas: 62 pt at the top, 34 pt at the bottom. It is never presented as a screenshot.
   Text inside it uses <b>/<i> on purpose: it is part of a drawing (role="img"), not page copy. */
.fc .phone > .vf {
  position: relative; overflow: hidden; container-type: inline-size; background: #000;
}
/* The feed: an abstract scene, no person or place. Video fills the screen; photo mode shows the
   whole 4:3 frame letterboxed (resizeAspect), 536 pt tall, centred. */
.vf-feed {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 45% at 66% 76%, rgba(255, 107, 74, .2), transparent 72%),
    radial-gradient(120% 90% at 48% 32%, #6a5f72 0%, #3b3442 38%, #171520 100%);
  transition: top .35s ease, height .35s ease;
}
.vf[data-mode="photo"] .vf-feed { top: 42.04cqw; bottom: auto; height: 133.33cqw; }
/* The shutter blink: black at 0.8, fading out over a quarter of a second. */
.vf-blink { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.vf-blink.on { animation: vf-blink .31s ease-out; }
@keyframes vf-blink { 0%, 19% { opacity: .8; } 100% { opacity: 0; } }
.vf b, .vf i { font-style: normal; font-weight: inherit; }
/* Top bar: 8 pt below the safe area, 16 pt in from each side. */
.vf-top {
  position: absolute; left: 3.98cqw; right: 3.98cqw; top: 17.41cqw; height: 9.95cqw;
  display: flex; align-items: center; justify-content: space-between; color: #fff;
}
.vf-round, .vf-slot { width: 9.95cqw; height: 9.95cqw; border-radius: 50%; flex-shrink: 0; }
.vf-round { display: grid; place-items: center; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vf-round svg { width: 4cqw; height: 4cqw; }
/* Before recording: the project name (headline, 17 pt) in a frosted capsule, 14/6 pt padding. */
.vf-pill {
  display: none; padding: 1.49cqw 3.48cqw; border-radius: 999px; background: rgba(255, 255, 255, .16);
  font-size: 4.23cqw; font-weight: 600 !important; letter-spacing: -.01em; white-space: nowrap;
}
/* Recording: a red capsule, 12/6 pt padding, an 8 pt white dot and a monospaced MM:SS. Drawn a
   shade deeper than the app's #ff453a so the white figures pass contrast at this size. */
.vf-timer {
  display: inline-flex; align-items: center; gap: 1.49cqw; padding: 1.49cqw 2.99cqw; border-radius: 999px;
  background: var(--fc-rec); font-family: var(--code); font-weight: 600 !important; font-size: 4.23cqw; letter-spacing: .02em;
}
.vf-dot { width: 1.99cqw; height: 1.99cqw; border-radius: 50%; background: #fff; }
.vf[data-mode="photo"] .vf-timer { display: none; }
.vf[data-mode="photo"] .vf-pill { display: inline-block; }
/* Lens buttons (back camera, on phones with more than one lens): 34 pt circles, the active one
   42 pt with the live zoom in yellow, 10 pt apart in a 6 pt capsule, 16 pt above the mode row. */
.vf-lenses {
  position: absolute; left: 50%; bottom: 47.51cqw; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2.49cqw; padding: 1.49cqw; border-radius: 999px; background: rgba(0, 0, 0, .25);
}
.vf-lenses b {
  width: 8.46cqw; height: 8.46cqw; border-radius: 50%; background: rgba(0, 0, 0, .45);
  display: grid; place-items: center; font-size: 3.23cqw; font-weight: 700 !important; color: #fff;
}
.vf-lenses .on { width: 10.45cqw; height: 10.45cqw; color: var(--fc-yellow); }
/* VIDEO / PHOTO: 14 pt semibold, 24 pt apart, the selected one yellow. While recording it is
   invisible but keeps its space, so nothing above it moves. */
.vf-modes {
  position: absolute; left: 0; right: 0; bottom: 36.32cqw; height: 7.21cqw;
  display: flex; align-items: center; justify-content: center; gap: 5.97cqw;
  font-size: 3.48cqw; font-weight: 600 !important; color: #fff; letter-spacing: .01em;
}
.vf[data-mode="video"] .vf-modes .vid, .vf[data-mode="photo"] .vf-modes .pho { color: var(--fc-yellow); }
.vf[data-mode="video"] .vf-modes { opacity: 0; }
/* Bottom bar: 24 pt above the safe area. Last photo (or an empty 52 pt slot), the shutter, and
   the switch-camera button, which stays at full strength while recording. */
.vf-bottom {
  position: absolute; left: 3.98cqw; right: 3.98cqw; bottom: 14.43cqw; height: 19.9cqw;
  display: flex; align-items: center; justify-content: space-between;
}
.vf-thumb { position: relative; width: 12.94cqw; height: 12.94cqw; border-radius: 2.49cqw; flex-shrink: 0; }
.vf[data-mode="photo"] .vf-thumb {
  box-shadow: inset 0 0 0 .5cqw #fff;
  background:
    linear-gradient(#8a9a7b, #8a9a7b) 22% 26% / 26% 24% no-repeat,
    linear-gradient(#2e3a55, #2e3a55) 78% 26% / 26% 24% no-repeat,
    linear-gradient(#b86a4b, #b86a4b) 22% 74% / 26% 24% no-repeat,
    linear-gradient(#c9a04a, #c9a04a) 78% 74% / 26% 24% no-repeat,
    linear-gradient(170deg, #d8d0c2, #938a7c);
}
.vf-count {
  display: none; position: absolute; top: -1.49cqw; right: -1.49cqw; padding: .25cqw 1.24cqw; border-radius: 999px;
  background: var(--fc-yellow); color: #000; font-size: 2.74cqw; font-weight: 700 !important; line-height: 1.3;
}
.vf[data-mode="photo"] .vf-count { display: block; }
/* An 80 pt ring with a 5 pt white stroke around a 64 pt disc: red to record, white for photos.
   While recording, the red becomes a 32 pt square with 8 pt corners. */
.vf-shutter {
  width: 19.9cqw; height: 19.9cqw; border-radius: 50%; box-shadow: inset 0 0 0 1.24cqw #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.vf-shutter i {
  display: block; width: 7.96cqw; height: 7.96cqw; border-radius: 1.99cqw; background: var(--fc-sys-red);
  transition: width .25s, height .25s, border-radius .25s, background-color .25s, transform .15s;
}
.vf[data-mode="photo"] .vf-shutter i { width: 15.92cqw; height: 15.92cqw; border-radius: 50%; background: #fff; }
.vf-shutter.pressed i { transform: scale(.92); }
.vf-flip { width: 12.94cqw; height: 12.94cqw; }
/* Pause takes the photo thumbnail's place while recording, as in the app. */
.vf .vf-pause { display: none; width: 12.94cqw; height: 12.94cqw; }
.vf .vf-pause svg { width: 5.4cqw; height: 5.4cqw; }
.vf[data-mode="video"] .vf-pause { display: grid; }
.vf[data-mode="video"] .vf-thumb { display: none; }
.vf-flip svg { width: 6.2cqw; height: 6.2cqw; }
/* Which state the drawing shows. */
.vf-switch {
  display: flex; justify-content: center; gap: 2px; margin: 18px 0 0; padding: 4px; width: max-content;
  position: relative; left: 50%; transform: translateX(-50%);
  border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--fc-line);
}
.vf-switch button {
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--fc-ink-2); background: none; border: 0; cursor: pointer;
  min-height: 40px; padding: 0 14px; border-radius: 999px; white-space: nowrap; transition: background .2s, color .2s;
}
.vf-switch button[aria-pressed="true"] { background: var(--fc-card-2); color: var(--fc-ink); box-shadow: 0 0 0 1px var(--fc-line) inset; }
.vf-switch button:hover { color: var(--fc-ink); }
.vf-switch { display: none; }
.js .vf-switch { display: flex; }

/* ---------- Hero ---------- */
.fc-hero { max-width: none !important; padding: clamp(36px, 6vw, 72px) var(--gutter) clamp(40px, 6vw, 80px) !important; }
.fc-hero-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 76px); align-items: center;
}
.fc-app-id { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; }
.fc-app-id img { width: 68px; height: 68px; border-radius: 16px; box-shadow: 0 16px 40px -12px rgba(232, 33, 79, .7); }
.fc-kicker { margin: 0; font-weight: 700; font-size: 18px !important; color: var(--fc-ink) !important; letter-spacing: -.01em; }
.fc-sub { margin: 2px 0 0; font-size: 14.5px !important; color: var(--fc-muted) !important; }
.fc-tagline {
  font-size: clamp(25px, 3.3vw, 40px) !important; font-weight: 700; letter-spacing: -.035em; line-height: 1.1;
  color: var(--fc-ink) !important; margin: 16px 0 14px;
}
.fc-tagline em { font-style: normal; color: var(--fc-coral); }
.fc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.fc-play {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 16px;
  padding: 10px 22px 10px 10px; border-radius: 999px; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14); transition: background .2s;
}
.fc-play:hover { background: rgba(255, 255, 255, .13); }
.fc-play i { width: 38px; height: 38px; border-radius: 50%; background: var(--fc-grad); display: grid; place-items: center; font-style: normal; font-size: 12px; padding-left: 3px; }
.fc-note { font-size: 14.5px !important; color: var(--fc-muted) !important; margin: 18px 0 0; max-width: 520px; }
.fc-hero-phone { justify-self: center; width: min(100%, 318px); }
.fc-hero-phone .phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 60px 120px -40px #000, 0 0 90px -30px rgba(232, 33, 79, .75); }

/* ---------- File-name marquee ---------- */
.fc-strip { position: relative; z-index: 2; overflow: hidden; border-block: 1px solid var(--fc-line); background: var(--fc-bg-2); padding: 14px 0; }
.fc-strip-track { display: flex; gap: 34px; width: max-content; animation: fc-slide 46s linear infinite; }
.fc-strip span {
  font-family: var(--code); font-size: 14.5px; font-weight: 500; color: var(--fc-muted); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
}
.fc-strip span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fc-coral); opacity: .7; }
.fc-strip span:nth-child(3n + 1) { color: var(--fc-ink-2); }
@keyframes fc-slide { to { transform: translateX(-50%); } }

/* ---------- Problem ---------- */
.fc-problem-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.fc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fc-compare .col { padding: 26px 28px; border-radius: 20px; border: 1px solid var(--fc-line); background: var(--fc-card); }
.fc-compare .col.good { background: linear-gradient(170deg, rgba(255, 107, 74, .1), rgba(232, 33, 79, .05)), var(--fc-card); border-color: rgba(255, 107, 74, .32); }
.fc-compare h3 { font-family: var(--code); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; color: var(--fc-muted); font-weight: 700; }
.fc-compare ul { list-style: none; margin: 0; padding: 0; }
.fc-compare li { padding: 11px 0; border-top: 1px solid var(--fc-line); display: flex; gap: 12px; align-items: flex-start; color: var(--fc-ink-2); font-size: 16.5px; line-height: 1.5; }
.fc-compare li span { flex: 1; min-width: 0; }
.fc-compare code { font-family: var(--code); font-size: .86em; background: rgba(255, 255, 255, .07); border-radius: 5px; padding: .1em .4em; }
.fc-compare li::before { content: "✕"; color: #7d8492; font-size: 13px; line-height: 1.6; flex-shrink: 0; }
.fc-compare .good li::before { content: "✓"; color: var(--fc-coral); font-weight: 700; }

/* ---------- Feature rows ---------- */
.fc-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 96px); align-items: center; }
.fc-feature.flip > :first-child { order: 2; }
.fc-feature-copy { max-width: 560px; }
.fc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.4vw, 28px); max-width: 540px; justify-self: center; width: 100%; }
.fc-duo .tilt-l { transform: rotate(-3.5deg) translateY(16px); }
.fc-duo .tilt-r { transform: rotate(3.5deg) translateY(-16px); }
.fc-duo .phone { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.fc-duo:hover .tilt-l { transform: rotate(-2deg) translateY(8px) scale(1.02); }
.fc-duo:hover .tilt-r { transform: rotate(2deg) translateY(-8px) scale(1.02); }
.fc-solo { max-width: 318px; justify-self: center; width: 100%; }
/* A crop of a Home Screen screenshot (the quick-action menu), shown as itself rather than in a phone. */
.fc-menu-shot { justify-self: center; width: 100%; max-width: 400px; }
.fc-menu-shot img {
  display: block; width: 100%; height: auto; border-radius: 28px; border: 1px solid var(--fc-line);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(232, 33, 79, .55);
}
.fc-menu-shot p { font-size: 14px !important; color: var(--fc-muted) !important; text-align: center; margin: 14px 0 0; }
.fc-facts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.fc-facts li { display: flex; gap: 12px; align-items: flex-start; color: var(--fc-ink-2); font-size: 16.5px; line-height: 1.5; }
.fc-facts li > span { flex: 1; min-width: 0; }
.fc-feature code, .fc-promise code { font-family: var(--code); font-size: .86em; background: rgba(255, 255, 255, .07); border-radius: 5px; padding: .1em .4em; }
.fc-facts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fc-grad); margin-top: 8px; flex-shrink: 0; }

/* ---------- Name it demo ---------- */
.fc-namer { margin-top: 26px; padding: 22px; border-radius: 20px; background: var(--fc-card); border: 1px solid var(--fc-line); }
.fc-namer label { display: block; font-family: var(--code); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fc-muted); margin-bottom: 9px; font-weight: 700; }
.fc-namer input {
  font: inherit; font-size: 17px; color: var(--fc-ink); width: 100%; padding: 12px 16px; border-radius: 12px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--fc-line); outline: none;
}
.fc-namer input:focus { border-color: var(--fc-coral); }
.fc-namer .out { margin-top: 18px; }
.fc-namer .out p { margin: 0 0 9px; font-family: var(--code); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fc-muted); font-weight: 700; }
.fc-namer .out p.hint { margin-top: 14px; font-size: 14.5px !important; color: var(--fc-muted) !important; letter-spacing: 0; text-transform: none; font-family: var(--ui); font-weight: 400; }

/* ---------- Storage path ---------- */
.fc-paths { display: grid; gap: 12px; margin-top: 24px; }
.fc-path {
  display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--fc-line);
  font-family: var(--code); font-size: 14.5px; color: var(--fc-ink); overflow-wrap: anywhere;
}
.fc-path svg { flex-shrink: 0; }

/* ---------- Film ---------- */
.fc-film-head { text-align: center; margin-bottom: clamp(26px, 4vw, 44px); }
.fc-film-head .fc-eyebrow { justify-content: center; }
.fc-film-frame {
  border-radius: 22px; overflow: hidden; border: 1px solid var(--fc-line); aspect-ratio: 16 / 9;
  box-shadow: 0 60px 140px -60px rgba(232, 33, 79, .8), 0 30px 90px -50px rgba(255, 107, 74, .6);
}
.fc-film-frame video { width: 100%; height: 100%; display: block; background: #000; }

/* ---------- Promise ---------- */
.fc-promise {
  position: relative; overflow: hidden; border-radius: 30px;
  margin: 0 var(--gutter) !important; max-width: 1200px; padding: clamp(44px, 7vw, 86px) clamp(22px, 4vw, 56px) !important;
  background: linear-gradient(165deg, rgba(255, 107, 74, .1), rgba(232, 33, 79, .04)), var(--fc-bg-2);
  border: 1px solid var(--fc-line);
}
@media (min-width: 1328px) { .fc-promise { margin: 0 auto !important; } }
.fc-promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.fc-promise-grid div { background: rgba(255, 255, 255, .04); border: 1px solid var(--fc-line); border-radius: 16px; padding: 20px; }
.fc-promise-grid b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.fc-promise-grid span { color: var(--fc-muted); font-size: 15px; line-height: 1.5; display: block; }
.fc-promise .fc-h2 { max-width: 780px; }

/* ---------- Support and FAQ ---------- */
.fc-support { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.fc-support a, .fc-faq a { color: var(--fc-coral); font-weight: 600; text-underline-offset: 3px; }
.fc-faq details { background: var(--fc-card); border: 1px solid var(--fc-line); border-radius: 16px; padding: 16px 20px; margin-bottom: 10px; }
.fc-faq summary { font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; letter-spacing: -.015em; }
.fc-faq summary::-webkit-details-marker { display: none; }
.fc-faq summary::after { content: "+"; font-size: 24px; line-height: .9; color: var(--fc-coral); transition: transform .3s; flex-shrink: 0; }
.fc-faq details[open] summary::after { transform: rotate(45deg); }
.fc-faq details p { margin: 12px 0 0; font-size: 16px; }
.fc-faq details p + p { margin-top: 10px; }

/* ---------- Privacy page ---------- */
.fc .doc-body a, .fc .tldr a { color: var(--fc-coral); }
.fc .tldr { background: linear-gradient(165deg, rgba(255, 107, 74, .1), rgba(232, 33, 79, .05)); border-color: rgba(255, 107, 74, .34); }
.fc .tldr li::marker { color: var(--fc-coral); }
.fc .doc-body h2 { font-size: clamp(27px, 3.4vw, 36px); letter-spacing: -.03em; }
.fc .doc-body code { font-family: var(--code); font-size: .86em; background: rgba(255, 255, 255, .06); border: 1px solid var(--fc-line); border-radius: 6px; padding: .1em .4em; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .fc-hero-inner, .fc-feature, .fc-support, .fc-compare { grid-template-columns: 1fr; }
  .fc-feature.flip > :first-child { order: 0; }
  .fc-hero-phone { width: min(72%, 290px); }
  .fc-promise-grid { grid-template-columns: 1fr 1fr; }
  .fc-hero-copy { text-align: left; }
}
@media (max-width: 560px) {
  .fc-promise-grid { grid-template-columns: 1fr; }
  .fc-duo { max-width: 420px; }
  .fc p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-strip-track { animation: none; }
  .vf-feed, .vf-shutter i { transition: none; }
}