s in DOM order, and the 3 .funnel-mobile-marker divs
(added for the risk-marker pills) now come before the 6 .funnel-node
divs, shifting the first .funnel-system pair from the 7th/8th div to
the 10th/11th. Any time a div is added/removed before this point in
the markup, these indices need to move with it. */
.funnel-system:nth-of-type(10),
.funnel-system:nth-of-type(11){ margin-top:280px; }
/* .funnel-system-label is a
and the icon above is a , so
these are two separate nth-of-type counts (each counts only among
same-tag siblings, unaffected by the marker divs) — the label's own
count still starts at 1. Without shifting the label to match, the
icon drops 280px into the gap while its label stays put, desyncing
the pair. */
.funnel-system-label:nth-of-type(1),
.funnel-system-label:nth-of-type(2){ margin-top:280px; }
.funnel-transition{ padding-top:0; margin-top:48px; max-width:100%; }
.funnel-transition-connector{ display:none; }
/* The manual
after "marketing" was tuned for desktop's much wider,
larger-font headline — at 30px on a narrow mobile column it forces
an early break and then wraps AGAIN within each half anyway, costing
an extra line for no benefit. Letting it wrap naturally across the
full width uses the space better. */
.funnel-transition h2 br{ display:none; }
/* 30px matches every other section headline on mobile (see #fordel,
#system, #cadence below) — only the hero h1 and .section-final's
headline keep their own larger sizes. */
.funnel-transition h2{ font-size:30px !important; line-height:1.18 !important; margin-top:16px; }
/* Desktop centers everything with position:absolute + top:50% against a
tall fixed-height stage. On mobile the stage height is content-driven
instead, so that whole scheme (including the badge's leftover
translateY(-50%)) was fighting the real layout: the week box clipped
off the left edge and the badge sat shifted above the heading instead
of level with the box. Flexbox replaces it outright: box and content
as two row items sharing the same top edge is what actually guarantees
"the line through the box center" and "badge level with the box". */
/* padding-bottom:0 (not the 28px desktop uses) so the rail — which
spans this container's full top:0 to bottom:0 — ends exactly at the
verdict box's own bottom edge instead of continuing past it into
empty space below the box. */
.cost-timeline{ margin:64px auto 0; max-width:100%; padding:0 20px 0; }
.cost-timeline::before{ left:48px; }
.cost-timeline-stage{
display:flex;
align-items:flex-start;
gap:18px;
min-height:0;
padding-left:0;
margin-bottom:36px;
}
.cost-timeline-content{
position:static;
width:auto;
flex:1 1 auto;
transform:none;
text-align:left !important;
}
.cost-timeline-badge{ transform:none; }
.cost-timeline-connector{ display:none; }
/* DOM order is content, then week (desktop alternates which side each
lands on visually via absolute positioning) — order:-1 is needed to
actually put the week box first/left in the flex row to sit on the
line, otherwise it flows after content and ends up stranded on the
right, disconnected from the line entirely. */
.cost-timeline-week{
position:static;
order:-1;
flex-shrink:0;
transform:none;
width:56px; height:56px;
border-radius:16px;
}
.cost-timeline-week strong{ font-size:18px; }
.cost-timeline-content h4{ font-size:19px; }
/* The box's own left padding edge (22px box padding + the container's
22.7px left offset) lands almost exactly on the timeline rail at
48px — so left-aligning the text (instead of desktop's centered)
makes the rail flow straight into where the copy starts, rather
than the rail cutting across a centered paragraph off to its side
the way it did before, which read as broken/misaligned since every
other line on the page runs centered but this was the one place a
line visibly crossed through a block of centered text. */
/* radius-lg (28px) is wider than the 25.3px gap between the box's own
left edge (22.7px) and the rail at 48px, so the rounded bottom-left
corner was sweeping past the rail's x position before reaching the
box's true bottom edge — a visible notch between the rail and the
box. A smaller radius here keeps the corner's arc inside that gap. */
.cost-timeline-verdict{ margin:36px 0 0 0; max-width:100%; padding:20px 22px; text-align:left; border-radius:14px; }
.cost-timeline-verdict p{ font-size:15.5px; }
/* No connecting line between the verdict box and "How it works" at all
now — the rail stops flush at the box (see .cost-timeline padding
above) and the pill has no lead-in line either (see
#system .section-head-connector below), instead of trying to
visually bridge the two. */
.cost-timeline-bend{ display:none; }
/* No orange line touching the "How it works" pill at all on mobile. */
#system .section-head-connector{ display:none; }
/* Also a floating standalone bar with nothing above or below it to
connect to on mobile (it's a desktop-only decorative element between
the hero and #system) — without this it was still rendering at its
default desktop position/size, showing up as an orphan orange line
with empty space on both sides of it. */
.section-bridge-line{ display:none; }
/* Same orphan-line issue as #system/#cadence above, just never given
the matching override: #fordel's pill has nothing above it on
mobile to connect to either. */
#fordel .section-head-connector{ display:none; }
/* Uppercase + bold at the default clamp() size wraps this specific
headline to 5 very uneven lines (several down to a single short
word) on a ~350px-wide mobile column — shrinking it to 2-3 balanced
lines uses the width much better. Scoped to #fordel only, not the
shared .section-head h2 rule every other section's headline uses. */
/* !important needed: the unscoped brand-override block (further down
this file) sets h2 font-size with !important at every breakpoint, so
a plain declaration here would silently lose to it. */
#fordel .section-head h2{ font-size:30px !important; line-height:1.18 !important; }
/* Same 30px as #fordel — every section headline on mobile matches now
except the hero h1 and .section-final's, which keep their own larger
sizes (see those rules for why). */
#system .section-head h2, #cadence .section-head h2{ font-size:30px !important; line-height:1.18 !important; }
/* Matches the 30px section headlines above (see #cadence) — the process
card h3s used their own larger 34px, which read visibly bigger than
every other headline on the page once those were normalized. */
.process-copy h3{ font-size:30px !important; line-height:1.18 !important; }
.cost-timeline-bend path{
fill:none;
stroke:var(--signal-blue);
stroke-width:3;
stroke-linecap:round;
opacity:0.7;
}
.two-card-row, .compare-row, .cap-grid, .fee-grid{ grid-template-columns:1fr; }
.process-row, .process-row-reverse{ grid-template-columns:1fr; direction:ltr; padding:28px; }
/* .process-list::before is a center spine meant to run behind desktop's
alternating left/right cards, visually connecting them. On mobile the
rows above are forced to grid-template-columns:1fr — full-width,
stacked, no left/right split — so that spine has nothing left to
connect; it just shows as a stray vertical segment in the gaps
between cards (hidden behind the cards themselves the rest of the
time), which is the disconnected "line going into nothing" look. */
.process-list::before{ display:none; }
.timeline-line{ left:18px; }
.timeline-step, .timeline-step-right{ width:calc(100% - 56px); margin-left:56px !important; }
.timeline-step:not(.timeline-step-right) .timeline-marker, .timeline-step-right .timeline-marker{ left:-56px; right:auto; }
.loop-wrap{
max-width:100%; aspect-ratio:auto; cursor:default;
display:flex; flex-direction:column; gap:12px;
counter-reset:loopstep;
}
.loop-svg{ display:none; }
.loop-hub-card{
display:flex; align-items:center; gap:14px;
background:var(--graphite);
border-radius:var(--radius-lg);
padding:20px 22px;
box-shadow:var(--shadow-card);
order:-1;
}
.loop-hub-card-icon{
display:flex; align-items:center; justify-content:center;
width:44px; height:44px; border-radius:12px; flex-shrink:0;
background:rgba(255,255,255,0.1); color:var(--warm-metal);
}
.loop-hub-card-icon svg{ width:22px; height:22px; }
.loop-hub-card-text{ display:flex; flex-direction:column; }
.loop-hub-card-label{
font-size:11px; font-weight:700; letter-spacing:0.1em;
color:var(--warm-metal); text-transform:uppercase;
}
.loop-hub-card-title{ font-size:16.5px; font-weight:800; color:#fff; margin-top:2px; }
.loop-node{
position:relative; left:auto !important; top:auto !important; transform:none; text-align:left;
display:grid; grid-template-columns:38px 1fr; align-items:center; column-gap:14px; row-gap:1px;
width:100%; height:auto; border-radius:18px;
padding:14px 18px;
}
.loop-node:hover, .loop-node.is-near{ transform:none; }
.loop-node:not(:last-of-type)::after{
content:''; position:absolute; left:32px; top:100%; width:2px; height:12px;
background:var(--limestone-line); z-index:1;
}
.loop-node-icon{
grid-row:span 2; align-self:center;
width:38px; height:38px; border-radius:11px; margin-bottom:0;
background:var(--icon-blue-bg, #ffe8e1);
}
.loop-node-icon svg{ width:19px; height:19px; }
.loop-node-num{ display:none; }
.loop-node-title{ font-size:15px; margin-top:0; }
.loop-node-sub{ display:block; }
.dash-stage{ padding:52px 20px 56px; border-radius:28px; margin-top:44px; }
.dash-toast{ top:-14px; right:14px; padding:9px 14px; font-size:12px; }
.dash-badge-float{ left:8px; bottom:-20px; padding:12px 16px; border-radius:16px; }
.dash-badge-float-num{ font-size:20px; }
.dash-badge-float-label{ font-size:11px; }
.cadence-grid{ grid-template-columns:1fr; }
.cost-card{ padding:28px; }
.cost-row{ font-size:14px; flex-direction:column; align-items:flex-start; gap:4px; }
.section-final{ padding-top:96px; padding-bottom:96px; }
.deco{ transform:scale(0.6) rotate(var(--deco-rot, 0deg)); }
.deco-1{ transform:scale(0.6) rotate(-9deg); top:4%; left:2%; }
.deco-2{ transform:scale(0.6) rotate(11deg); top:8%; right:0%; }
.deco-3{ transform:scale(0.55) rotate(-7deg); bottom:26%; left:0%; }
.deco-4{ transform:scale(0.6) rotate(6deg); bottom:16%; right:2%; }
.deco-6, .deco-7{ display:none; }
.deco-5{ top:44%; left:-4%; }
.footer-inner{ flex-direction:column; gap:14px; text-align:center; }
/* Desktop's row layout (gap:20px, no wrap control) wraps onto two
uneven lines on a narrow mobile column (email alone, then Privacy
Policy + Terms of Service crammed together). Stacking each link on
its own centered line reads cleanly instead. */
.footer-links{ flex-direction:column; align-items:center; gap:10px; }
}
@media (max-width:760px) and (prefers-reduced-motion: reduce){
.funnel-node,
.funnel-system,
.funnel-system-label{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
.funnel-mobile-marker{
opacity:1;
transform:translate(-50%,-50%);
transition:none;
}
}
/* =====================================================
FYNZA VISUAL REFERENCE: Full Theme Override
===================================================== */
/* ---- 1. Color System -------------------------------- */
:root{
--orange: #d05f3b;
--orange-dim: #b04e2d;
--navy: #1c2d6e;
--navy-card: #18245c;
/* Override existing tokens */
--signal-blue: #d05f3b;
--signal-blue-dim: #b04e2d;
--graphite: #1c2d6e;
--graphite-soft: #1c2d6e;
--graphite-card: #18245c;
--limestone: #ecebe6;
--limestone-card: #ffffff;
--limestone-line: rgba(28,45,110,.09);
--ink: #14171b;
--ink-soft: #565b62;
--ink-faint: #8a8f97;
--warm-metal: #e8a070;
--icon-blue-bg: #ffe8e1;
--icon-blue-fg: #d05f3b;
--icon-metal-bg: #fff0e8;
--icon-metal-fg: #b04e2d;
--icon-green-bg: #ffe8e1;
--icon-green-fg: #d05f3b;
--shadow-card: 0 2px 4px rgba(28,45,110,.05), 0 18px 40px -14px rgba(28,45,110,.14);
--shadow-lift: 0 24px 70px -18px rgba(28,45,110,.28);
}
/* ---- 2. Body: warm cream + white dot grid ---------- */
body{
background-color:#ecebe6;
background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.92) 1.2px, transparent 0);
background-size:18px 18px;
color:var(--ink);
}
/* ---- 3. Orange bloom at top (fixed layer) ----------- */
body::before{
content:'';
position:fixed;
inset:0;
pointer-events:none;
z-index:-1;
background:
radial-gradient(ellipse 90% 38% at 50% -2%, rgba(208,95,59,.30), transparent 62%),
radial-gradient(ellipse 26% 18% at 0% 100%, rgba(208,95,59,.12), transparent 55%),
radial-gradient(ellipse 26% 18% at 100% 100%, rgba(208,95,59,.12), transparent 55%);
}
/* ---- 4. Hero: remove the old blue-tinted bg -------- */
.hero-bg{ background:none !important; }
/* ---- 5. Hero headline: ALL CAPS, bigger, navy ------ */
.hero-h1{
font-size:clamp(2.6rem,5.8vw,4.6rem) !important;
font-weight:900 !important;
letter-spacing:-0.04em !important;
line-height:0.98 !important;
text-transform:uppercase !important;
color:var(--ink) !important;
}
@media(max-width:760px){
.hero-h1{ font-size:clamp(1.8rem,7.6vw,3.1rem) !important; }
}
/* ---- 6. All section h2: ALL CAPS, 900w, navy ------- */
.section-head h2, h2{
text-transform:uppercase !important;
font-size:clamp(2.4rem,5vw,4rem) !important;
font-weight:900 !important;
letter-spacing:-0.045em !important;
line-height:0.96 !important;
color:var(--ink) !important;
}
/* ---- 7. Accent colour ------------------------------- */
.accent,.accent-underline{ color:#d05f3b !important; }
/* ---- 8. Pill badges ---------------------------------- */
.pill{ background:#fff; border-color:rgba(28,45,110,.12); color:var(--ink); }
.pill-static{ color:#d05f3b !important; }
.pill-link:hover{ border-color:#d05f3b; color:#d05f3b; }
.pill-on-dark{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.24); color:rgba(255,255,255,.92); }
/* ---- 9. Buttons ------------------------------------- */
.btn-primary{
background:#d05f3b !important;
box-shadow:0 1px 2px rgba(208,95,59,.18), 0 10px 26px -10px rgba(208,95,59,.52) !important;
}
.btn-primary:hover{ background:#b04e2d !important; }
::selection{ background:#d05f3b; color:#fff; }
:focus-visible{ outline-color:#d05f3b; }
/* ---- 10. Nav ---------------------------------------- */
.nav{
max-width:1280px;
background:transparent !important;
border:none !important;
box-shadow:none !important;
padding:10px 44px !important;
}
.nav-logo{ color:var(--ink) !important; font-weight:900 !important; }
/* ---- 11. Eyebrow ------------------------------------ */
.eyebrow{ color:#d05f3b !important; }
.eyebrow-inverse{ color:#ffb08a !important; }
/* ---- 12. Funnel viz: solid orange lines + circles -- */
.funnel-path{
stroke:#d05f3b !important;
stroke-width:2.2 !important;
}
.funnel-path-dot{ fill:#d05f3b !important; }
.funnel-node-icon:not(.funnel-node-icon-sm){
border-radius:50% !important;
border:4px solid #fff !important;
box-shadow:0 14px 30px -6px rgba(208,95,59,.5), 0 0 0 1px rgba(28,45,110,.06) !important;
width:78px !important; height:78px !important;
transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease) !important;
}
.funnel-node-icon.logo-badge{ background:#fff !important; }
.funnel-node-icon:not(.funnel-node-icon-sm) svg{ width:30px !important; height:30px !important; }
.funnel-node-icon.logo-badge svg{ width:36px !important; height:36px !important; }
.funnel-node:hover .funnel-node-icon{
transform:scale(1.08) !important;
box-shadow:0 18px 36px -6px rgba(208,95,59,.6), 0 0 0 1px rgba(28,45,110,.08) !important;
}
.funnel-chip{
background:#fff !important;
border-color:rgba(28,45,110,.10) !important;
color:var(--ink) !important;
font-weight:700 !important;
}
/* ---- 13. Cards -------------------------------------- */
.card-dark{ background:#1c2d6e !important; }
.highlight-bar{ background:#ffe8df !important; }
.highlight-bar strong{ color:#b04e2d !important; }
.highlight-bar-dark{ background:#1c2d6e !important; }
.highlight-bar-dark strong{ color:#ffb08a !important; }
.icon-badge-blue{ background:#ffe8e1 !important; color:#d05f3b !important; }
.icon-badge-metal{ background:#fff0e8 !important; color:#b04e2d !important; }
.icon-badge-green{ background:#ffe8e1 !important; color:#d05f3b !important; }
/* ---- 14. Process numbers ---------------------------- */
.process-num{ background:#d05f3b !important; }
/* ---- 15. Timeline ----------------------------------- */
.timeline-line-fill{ background:#d05f3b !important; }
.timeline-step.is-active .timeline-marker{ background:#d05f3b !important; border-color:#d05f3b !important; }
.timeline-marker{ color:var(--ink) !important; }
/* ---- 16. Dark capability section (navy) ------------- */
.section-dark{ background:#1c2d6e !important; }
.cap-card{ background:rgba(12,22,80,.50) !important; border-color:rgba(255,255,255,.10) !important; }
.cap-card:hover{ border-color:rgba(208,95,59,.55) !important; }
.cap-card li::before{ background:#d05f3b !important; }
.icon-badge-dark{ background:rgba(255,255,255,.10) !important; color:rgba(255,255,255,.88) !important; }
/* ---- 17. Growth loop -------------------------------- */
/* Colors resolve via the CSS custom properties redefined in the
:root override above (--ink, --signal-blue, --warm-metal), so no
per-element overrides are needed here. */
/* ---- 18. Dashboard ---------------------------------- */
.dash-topbar{ background:#1c2d6e !important; }
.dash-quality-bar div{ background:var(--warm-metal) !important; }
.dash-toast-dot{ background:#d05f3b !important; }
.dash-up{ color:#d05f3b !important; }
.dash-card-ai{ background:#1c2d6e !important; }
.dash-ai-check{ color:#ffb08a !important; }
/* ---- 19. Cost table --------------------------------- */
.cost-row-total{ background:#1c2d6e !important; }
.cost-caveat{ color:#8a94b0 !important; }
/* ---- 20. Compare cards ------------------------------ */
.compare-row .card-dark{ background:#d05f3b !important; }
/* ---- 21. Cadence ------------------------------------ */
.cadence-tag{ color:#d05f3b !important; }
/* ---- 27. Vores fordel comparison --------------------- */
/* Colors resolve via the --signal-blue custom property redefined in the
:root override above, so no per-element overrides are needed here. */
/* ---- 22. Form --------------------------------------- */
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
border-color:#d05f3b !important;
}
/* ---- 23. FAQ ---------------------------------------- */
.faq-item summary::after{ color:#d05f3b !important; }
/* ---- 24. Soft text ---------------------------------- */
.section-lede,.hero-sub{ color:#546280 !important; }
.hero-micro{ color:#8a94b0 !important; }
/* ---- 25. Footer ------------------------------------- */
.footer{ border-top-color:rgba(28,45,110,.09) !important; }
/* ---- 26. Mock card details -------------------------- */
.mock-tag-ok{ background:#ffe8df !important; color:#b04e2d !important; }
.mock-bar div{ background:#d05f3b !important; }
/* ==========================================================================
Legal pages (Privacy Policy / Terms of Service)
========================================================================== */
.legal-hero{ padding-top:180px; padding-bottom:40px; }
.legal-back{
display:inline-flex; align-items:center; gap:8px;
font-size:14px; font-weight:700; color:var(--ink-soft);
margin-bottom:28px;
transition:color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.legal-back svg{ width:13px; height:13px; flex-shrink:0; transition:transform var(--dur-fast) var(--ease); }
.legal-back:hover{ color:var(--signal-blue); gap:11px; }
.legal-back:hover svg{ transform:translateX(-2px); }
.legal-hero h1{
font-size:clamp(2.4rem, 5vw, 3.4rem);
font-weight:900; letter-spacing:-0.02em; line-height:1.05;
color:var(--ink); margin-top:18px;
}
.legal-updated{ margin-top:16px; font-size:14px; color:var(--ink-faint); font-weight:500; }
.legal-toc{
display:flex; flex-wrap:wrap; gap:10px;
margin:8px 0 0;
padding-bottom:40px;
border-bottom:1px solid var(--limestone-line);
}
.legal-toc a{
font-size:13.5px; font-weight:700; color:var(--ink-soft);
padding:9px 16px;
border-radius:var(--radius-pill);
background:var(--limestone-card);
border:1px solid var(--limestone-line);
transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.legal-toc a:hover{ color:var(--signal-blue); border-color:var(--signal-blue); background:var(--icon-blue-bg); }
.legal-body{ padding-top:8px; }
.legal-section{
padding:44px 0;
border-bottom:1px solid var(--limestone-line);
display:grid; grid-template-columns:56px 1fr; gap:24px;
scroll-margin-top:110px;
}
.legal-section:last-child{ border-bottom:none; padding-bottom:0; }
.legal-num{
display:flex; align-items:center; justify-content:center;
width:40px; height:40px;
border-radius:50%;
background:linear-gradient(150deg, var(--signal-blue), var(--signal-blue-dim));
color:#fff; font-weight:800; font-size:14px;
box-shadow:0 8px 16px -7px rgba(208,95,59,.5), inset 0 1px 1px rgba(255,255,255,.3);
flex-shrink:0;
}
.legal-section h2{ font-size:22px; font-weight:800; letter-spacing:-0.01em; color:var(--ink); margin-bottom:14px; }
.legal-section h3{ font-size:16px; font-weight:700; color:var(--ink); margin:22px 0 8px; }
.legal-section p{ font-size:15.5px; line-height:1.7; color:var(--ink-soft); margin-bottom:14px; }
.legal-section p:last-child{ margin-bottom:0; }
.legal-section ul{ display:flex; flex-direction:column; gap:10px; margin:14px 0; padding-left:0; list-style:none; }
.legal-section ul:last-child{ margin-bottom:0; }
.legal-section li{ display:flex; align-items:flex-start; gap:12px; font-size:15.5px; line-height:1.6; color:var(--ink-soft); }
.legal-section li::before{
content:''; flex-shrink:0; margin-top:9px;
width:6px; height:6px; border-radius:50%;
background:var(--signal-blue);
}
.legal-section strong{ color:var(--ink); font-weight:700; }
.legal-link{ color:var(--signal-blue); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.legal-callout{
margin:22px 0; padding:22px 24px;
border-radius:var(--radius-md);
background:var(--icon-blue-bg);
border:1px solid rgba(208,95,59,.18);
font-size:14.5px; line-height:1.65; color:var(--ink);
}
.legal-callout:last-child{ margin-bottom:0; }
.legal-callout strong{ color:var(--ink); }
.legal-cross-link{
margin-top:28px;
font-size:14.5px; color:var(--ink-faint);
text-align:center;
}
@media (max-width:640px){
.legal-hero{ padding-top:140px; }
.legal-section{ grid-template-columns:1fr; gap:14px; }
.legal-num{ width:34px; height:34px; font-size:12.5px; }
}
/* ---- 14. Mobile nav: the brand-override block above forces
`.nav{ padding:10px 44px !important; }` at every width (section 10,
unscoped by any media query). On a ~360-400px viewport that 44px side
padding alone eats ~22% of the header's width, which is what was
squeezing the logo inward and stranding the hamburger short of the
true right edge no matter what the mobile nav rules further up set.
This needs matching !important, placed after that block, to win. ---- */
@media (max-width:760px){
.nav{ padding:8px 8px 8px 16px !important; }
}