/* FindMy — landing page template styles
 * Requires findmy-tokens.css (design-system variables) loaded first.
 * All selectors are prefixed .fml- so the file can drop into any theme. */

.fml { background:#fff; color:var(--fg-2); font-family:var(--font-sans); }
.fml *, .fml *::before, .fml *::after { box-sizing:border-box; }
.fml img { max-width:100%; height:auto; }
.fml h1,.fml h2,.fml h3,.fml h4 { font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); color:var(--fg-1); margin:0; }
.fml h1 { font-size:clamp(34px,5.4vw,58px); line-height:1.08; letter-spacing:-0.015em; }
.fml h2 { font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:-0.01em; }
.fml h3 { font-size:23px; line-height:1.2; }
.fml h4 { font-size:var(--fs-h4); line-height:var(--lh-h4); }
.fml p { margin:0; text-wrap:pretty; }
.fml .fm-overline { font-size:var(--fs-overline); line-height:var(--lh-overline); letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-3); font-weight:var(--fw-medium); font-style:normal; }
.fml .fm-coord { font-family:var(--font-mono); font-size:var(--fs-caption); letter-spacing:0.04em; color:var(--fm-teal); }

/* Buttons */
.fml-btn { display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 18px; border:0; border-radius:var(--radius-sm); background:var(--fm-teal); color:#fff; text-decoration:none; white-space:nowrap; font-family:inherit; font-size:14px; font-weight:var(--fw-medium); cursor:pointer; transition:background var(--duration-base) var(--easing-standard), transform var(--duration-fast) var(--easing-standard); }
.fml-btn:hover { background:var(--fm-teal-dark); color:#fff; }
.fml-btn:active { transform:translateY(1px); }
.fml-btn:focus-visible { outline:2px solid var(--fm-teal); outline-offset:2px; }
.fml-btn img { width:14px; height:14px; flex:none; display:block; }
.fml-btn--lg { height:50px; padding:0 26px; font-size:16px; }
.fml-btn--lg img { width:16px; height:16px; }
.fml-btn--block { display:flex; justify-content:center; height:46px; width:100%; font-size:15px; }
.fml-btn--ghost { background:transparent; border:1px solid rgba(255,255,255,0.45); color:#fff; }
.fml-btn--ghost:hover { background:rgba(255,255,255,0.12); border-color:#fff; }

/* Header */
.fml-header { position:sticky; top:0; z-index:var(--z-sticky); display:flex; align-items:center; gap:28px; padding:14px 40px; background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--fm-border); }
.fml-logo { display:flex; align-items:flex-start; text-decoration:none; }
.fml .fml-header .fml-logo img { height:26px; max-height:26px; width:auto; max-width:none; display:block; }
.fml-nav { margin-left:12px; align-self:stretch; }
.fml-nav__list { display:flex; align-items:stretch; flex-wrap:nowrap; gap:26px; list-style:none; margin:0; padding:0; height:100%; }
.fml-nav__list > li { display:flex; align-items:center; }
.fml-nav__list > li > a { white-space:nowrap; }
@media (min-width:1241px) { .fml-nav__list > li > a { display:inline-flex; align-items:center; align-self:stretch; padding-block:0; padding-bottom:14px; margin-bottom:-15px; } }
@media (max-width:1360px) { .fml-nav__list { gap:16px; } .fml-nav__list > li > a { font-size:13px; } }
.fml-nav a { font-size:14px; color:var(--fg-2); text-decoration:none; transition:color var(--duration-fast) var(--easing-standard); }
.fml-nav a:hover { color:var(--fm-teal); }
.fml-nav .current-menu-item > a, .fml-nav .current_page_item > a { color:var(--fm-teal); }
/* Two-level menu: hover/focus dropdown on desktop */
.fml-nav__list > li { position:relative; }
.fml-nav .menu-item-has-children > a { display:inline-flex; align-items:center; white-space:nowrap; }
.fml-nav .menu-item-has-children > a::after { content:''; display:block; flex:none; width:6px; height:6px; margin-left:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.fml-nav .sub-menu .menu-item-has-children > a::after { display:none; }
/* A panel the width of its own columns, hung under the item that opens it —
   the menu is one dropdown of two short groups, and a full-bleed band across
   the header for that reads as a mistake rather than a mega menu. */
.fml-nav .sub-menu { position:absolute; top:calc(100% + 10px); left:-14px; right:auto; display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px 8px; width:max-content; max-width:min(calc(100vw - 32px), 760px); margin:0; padding:18px 14px 16px; list-style:none; background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-2); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard), visibility 0s var(--duration-fast); pointer-events:none; z-index:var(--z-sticky); }
.fml-nav .sub-menu > li { flex:none; min-width:200px; }
/* A column of its own, ruled off from the one before it. */
.fml-nav .sub-menu > li + li { padding-left:8px; border-left:1px solid var(--fm-divider); }
/* Bridges the gap to the panel so the pointer can travel without closing it. */
.fml-nav .sub-menu::before { content:''; position:absolute; left:0; right:0; top:-12px; height:12px; }
.fml-nav__list > li > a:hover + .sub-menu, .fml-nav__list > li > .sub-menu:hover, .fml-nav__list > li:focus-within > .sub-menu { opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; pointer-events:auto; }
.fml-nav .sub-menu > li > a { display:block; padding:9px 12px; border-radius:var(--radius-sm); font-size:15px; color:var(--fg-1); }
.fml-nav .sub-menu > li > a:hover { background:var(--bg-2); color:var(--fm-teal-dark); }
/* A second-level item that has children becomes a column heading */
.fml-nav .sub-menu > li.menu-item-has-children > a { padding:2px 12px 10px; font-size:var(--fs-overline); letter-spacing:0.12em; text-transform:uppercase; font-weight:var(--fw-medium); color:var(--fm-teal); }
.fml-nav .sub-menu > li.menu-item-has-children > a:hover { background:none; }
.fml-nav .sub-menu .sub-menu { position:static; display:flex; flex-direction:column; gap:1px; padding:0; margin:0; width:auto; max-width:none; background:none; border:0; border-radius:0; box-shadow:none; opacity:1; visibility:inherit; transform:none; pointer-events:auto; }
.fml-nav .sub-menu .sub-menu::before { display:none; }
.fml-nav .sub-menu .sub-menu > li { position:relative; min-width:0; padding-left:0; border-left:0; }
.fml-nav .sub-menu .sub-menu a { display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:var(--radius-sm); font-size:14.5px; white-space:nowrap; color:var(--fg-1); }
.fml-nav .sub-menu .sub-menu a:hover { background:var(--bg-2); color:var(--fm-teal-dark); }
/* The model rows carry the same colour as their card on the E-bjella page, so
   the three are recognisable before the name is read. */
/* In a column that has dots, the rows without one keep the same text edge. */
.fml-nav .sub-menu .sub-menu:has(.fml-nav__bell) a::before, .fml-nav .sub-menu .sub-menu:has(.fml-nav__animal) a::before { content:''; flex:none; width:8px; height:8px; border-radius:var(--radius-circle); background:transparent; }
/* A species row is led by the animal it is about, drawn rather than tinted —
   the portraits carry their own colour, so they sit on no ground of ours. */
.fml-nav .sub-menu .sub-menu .fml-nav__animal > a::before { width:24px; height:24px; background:center/24px 24px no-repeat; }
/* The E-bjella rows show the bell itself; the intro page gets the Findmy mark. */
.fml-nav .sub-menu .sub-menu .fml-nav__bell > a::before { width:24px; height:24px; border-radius:0; background:center/contain no-repeat; }
.fml-nav .sub-menu .sub-menu .fml-nav__bell--bla > a::before { background-image:url(../icons/ebjelle/bla.png); }
.fml-nav .sub-menu .sub-menu .fml-nav__bell--gronn > a::before { background-image:url(../icons/ebjelle/gronn.png); }
.fml-nav .sub-menu .sub-menu .fml-nav__bell--rod > a::before { background-image:url(../icons/ebjelle/rod.png); }
.fml-nav .sub-menu .sub-menu .fml-nav__bell--intro > a::before { background-image:url(../img/findmy-mark.png); background-size:20px 20px; }
.fml-nav .sub-menu .sub-menu .fml-nav__animal--sau > a::before { background-image:url(../icons/animals/sau.svg); }
.fml-nav .sub-menu .sub-menu .fml-nav__animal--reinsdyr > a::before { background-image:url(../icons/animals/reinsdyr.svg); }
.fml-nav .sub-menu .sub-menu .fml-nav__animal--ku > a::before { background-image:url(../icons/animals/ku.svg); }
.fml-nav .sub-menu .sub-menu .fml-nav__animal--hest > a::before { background-image:url(../icons/animals/hest.svg); }
.fml-nav .sub-menu .sub-menu .fml-nav__animal--geit > a::before { background-image:url(../icons/animals/geit.svg); }
/* Fourth level, if a menu ever goes that deep: a column beside its parent item */
.fml-nav .sub-menu .sub-menu .sub-menu { position:absolute; top:-10px; left:100%; margin-left:16px; width:210px; padding:10px; background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-sm); box-shadow:var(--shadow-2); opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--duration-fast) var(--easing-standard); }
.fml-nav .sub-menu > li:last-child .sub-menu .sub-menu { left:auto; right:100%; margin-left:0; margin-right:16px; }
.fml-nav .sub-menu .sub-menu > li:hover > .sub-menu, .fml-nav .sub-menu .sub-menu > li:focus-within > .sub-menu { opacity:1; visibility:visible; pointer-events:auto; }
.fml-nav .sub-menu .sub-menu > li.menu-item-has-children > a { background:var(--bg-2); }
/* Rows inside that flyout, not the third-level rows above — written loosely,
   these matched both and undid the third level's own layout. */
.fml-nav .sub-menu .sub-menu .sub-menu a { display:block; padding:10px 14px; border-radius:var(--radius-sm); font-size:15px; white-space:normal; color:var(--fg-1); }
.fml-nav .sub-menu .sub-menu .sub-menu a:hover { background:var(--bg-2); color:var(--fm-teal-dark); }
.fml-footer__links .sub-menu { list-style:none; margin:6px 0 0; padding:0 0 0 12px; display:flex; flex-direction:column; gap:8px; }
.fml-footer__links .sub-menu a { color:rgba(255,255,255,0.55); font-size:13px; }
.fml-actions { display:flex; align-items:center; gap:16px; margin-left:auto; }
.fml-burger { display:none; }
.fml-lang-mobile { display:none; }
.fml-lang { display:flex; border:1px solid var(--fm-border-strong); border-radius:var(--radius-pill); overflow:hidden; }
.fml-lang a { font-family:var(--font-mono); font-size:11px; font-weight:var(--fw-bold); letter-spacing:0.08em; padding:5px 13px; background:#fff; color:var(--fg-3); text-decoration:none; }
.fml-lang a:hover { color:var(--fm-teal); }
.fml-lang a.is-active { background:var(--fm-teal); color:#fff; }

/* Hero */
.fml-hero { position:relative; padding:132px 40px 108px; text-align:center; overflow:hidden; }
.fml-hero__bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.fml-hero__bg::after { content:''; position:absolute; inset:0; background-image:linear-gradient(180deg, rgba(31,33,36,0.34) 0%, rgba(31,33,36,0.56) 46%, rgba(0,57,52,0.86) 100%); }
.fml-hero__grid { position:absolute; inset:0; background-image:repeating-linear-gradient(0deg,rgba(255,255,255,0.055) 0 1px,transparent 1px 58px),repeating-linear-gradient(90deg,rgba(255,255,255,0.055) 0 1px,transparent 1px 58px); }
.fml-hero__corners span { position:absolute; width:26px; height:26px; }
.fml-hero__corners span:nth-child(1) { top:20px; left:20px; border-top:1px solid rgba(255,255,255,0.4); border-left:1px solid rgba(255,255,255,0.4); }
.fml-hero__corners span:nth-child(2) { top:20px; right:20px; border-top:1px solid rgba(255,255,255,0.4); border-right:1px solid rgba(255,255,255,0.4); }
.fml-hero__corners span:nth-child(3) { bottom:20px; left:20px; border-bottom:1px solid rgba(255,255,255,0.4); border-left:1px solid rgba(255,255,255,0.4); }
.fml-hero__corners span:nth-child(4) { bottom:20px; right:20px; border-bottom:1px solid rgba(255,255,255,0.4); border-right:1px solid rgba(255,255,255,0.4); }
.fml-hero__inner { position:relative; max-width:860px; margin:0 auto; }
.fml-hero h1 { color:#fff; margin-bottom:20px; text-wrap:balance; }
.fml .fml-hero .fml-hero__sub { font-size:19px; line-height:1.55; color:rgba(255,255,255,0.88); margin-left:auto; margin-right:auto; max-width:660px; text-align:center; }
.fml-hero__ctas { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px; }
.fml-hero__points { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin-top:38px; }
.fml-point { display:flex; align-items:center; gap:8px; font-size:13.5px; color:rgba(255,255,255,0.8); }
.fml-point img { width:14px; height:14px; flex:none; display:block; }
.fml-scrollhint { width:1px; height:46px; margin:52px auto 0; background-image:linear-gradient(180deg,rgba(255,255,255,0.55),rgba(255,255,255,0)); }
.fml-coordpill { display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; padding:5px 14px 5px 12px; border:1px solid rgba(255,255,255,0.22); border-radius:var(--radius-pill); background:rgba(255,255,255,0.07); }
.fml-coordpill span.fml-ping { position:relative; display:inline-flex; width:8px; height:8px; flex:none; }
.fml-ping i { position:absolute; inset:0; border-radius:50%; background:var(--fm-teal-60); animation:fml-ping 2.6s var(--easing-out) infinite; }
.fml-ping b { position:relative; width:8px; height:8px; border-radius:50%; background:var(--fm-teal-40); }
.fml-coordpill em { font-family:var(--font-mono); font-style:normal; font-size:11.5px; letter-spacing:0.06em; color:rgba(255,255,255,0.82); }
@keyframes fml-ping { 0%{transform:scale(1);opacity:.55} 70%{transform:scale(3.4);opacity:0} 100%{transform:scale(3.4);opacity:0} }
@media (prefers-reduced-motion:reduce) { .fml-ping i { animation:none; } }

/* Vision band */
.fml-vision { position:relative; background:var(--fm-teal); color:#fff; padding:76px 40px; overflow:hidden; }
.fml-vision__ring { position:absolute; top:-110px; right:-80px; width:340px; height:340px; border:1px solid rgba(255,255,255,0.22); border-radius:50%; }
.fml-vision__ring--sm { top:-46px; right:-16px; width:220px; height:220px; border-color:rgba(255,255,255,0.14); }
.fml-vision__inner { position:relative; max-width:1000px; margin:0 auto; display:flex; align-items:center; gap:52px; }
.fml-vision__photo { flex:0 0 200px; width:200px; height:200px; border-radius:50%; overflow:hidden; background-size:cover; background-position:center; box-shadow:0 0 0 3px rgba(255,255,255,0.45),0 0 0 12px rgba(255,255,255,0.12); margin:0 auto; }
.fml-vision__text { flex:1; text-align:left; }
.fml-vision__text .fm-overline { color:rgba(255,255,255,0.72); margin-bottom:16px; }
.fml-vision__text p { font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:29px; line-height:1.34; color:#fff; }

/* Kundehistorier */
.fml-customers__head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; }
.fml-customers__intro { max-width:640px; }
.fml-customers__intro .fm-overline { color:var(--fm-teal); margin-bottom:12px; }
.fml-customers__intro h2 { margin-bottom:10px; }
.fml-customers__intro p { margin:0; font-size:16px; color:var(--fg-3); }
.fml-customers__nav { display:flex; flex:none; gap:8px; }
.fml-customers__arrow { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--fm-teal); border-radius:var(--radius-lg); background:var(--fm-teal-20); color:var(--fm-teal-dark); cursor:pointer; transition:background var(--duration-base) var(--easing-standard), color var(--duration-base) var(--easing-standard); }
.fml-customers__arrow:hover { background:var(--fm-teal); color:#fff; }
.fml-customers__arrow svg { display:block; width:18px; height:18px; pointer-events:none; }
/* No scroll snapping: mandatory snap would drag the drift back a card at a time. */
.fml-customers__track { display:flex; gap:24px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; outline:none; }
.fml-customers__track::-webkit-scrollbar { height:0; }
.fml-customers__track:focus-visible { border-radius:var(--radius-lg); box-shadow:var(--shadow-focus); }
.fml-customer { flex:0 0 clamp(258px,72vw,400px); margin:0; display:flex; flex-direction:column; gap:16px; }
.fml-customer img, .fml-customer__placeholder { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:var(--bg-3); }
.fml-customer figcaption { display:flex; flex-direction:column; gap:6px; }
/* The customer's own words, in the display face the brand quotes in. */
.fml .fml-customer__quote { margin:0 0 4px; font-family:var(--font-display); font-style:italic; font-size:18px; line-height:1.45; color:var(--fg-1); text-wrap:pretty; }
.fml-customer__name { font-size:15px; font-weight:var(--fw-medium); line-height:1.3; color:var(--fg-1); }
.fml-customer__role { font-size:14px; line-height:1.45; color:var(--fg-3); }
.fml-customer__tag { align-self:flex-start; margin-top:8px; padding:7px 11px; border-radius:var(--radius-pill); background:var(--fm-teal-20); color:var(--fm-teal-darker); font-size:12px; font-weight:var(--fw-medium); line-height:1; }
.fml-customers__foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-top:32px; }
.fml-customers__dots { display:flex; align-items:center; gap:8px; }
.fml-customers__dots button { width:8px; height:8px; padding:0; border:0; border-radius:var(--radius-pill); background:var(--fm-border-strong); cursor:pointer; transition:width var(--duration-base) var(--easing-standard), background var(--duration-base) var(--easing-standard); }
.fml-customers__dots button.is-active { width:24px; background:var(--fm-teal); }
.fml-customers__counter { font-family:var(--font-mono); font-size:14px; letter-spacing:0.04em; color:var(--fg-3); }

/* Sections */
.fml-section { padding:96px 40px; }
.fml-section--alt { background:var(--bg-2); }
.fml-wrap { max-width:1100px; margin:0 auto; }
.fml-head { text-align:center; max-width:620px; margin:0 auto 46px; }
.fml-head .fm-overline { color:var(--fm-teal); margin-bottom:12px; }
.fml-head h2 { margin-bottom:10px; }
.fml-head p { color:var(--fg-3); font-size:16px; }

/* Pillars */
.fml-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.fml-pillar { display:flex; flex-direction:column; background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; transition:border-color var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard), transform var(--duration-base) var(--easing-standard); }
.fml-pillar:hover { border-color:var(--fm-teal-40); box-shadow:var(--shadow-1); transform:translateY(-2px); }
.fml-pillar__media { position:relative; display:block; aspect-ratio:16/9; background:var(--bg-3) center/cover no-repeat; border-bottom:1px solid var(--fm-divider); }
/* The °-circle motif: a white disc holding the pillar's glyph, straddling the photo edge. */
.fml-pillar__icon { position:absolute; left:50%; bottom:-26px; transform:translateX(-50%); width:64px; height:64px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px var(--fm-border); display:flex; align-items:center; justify-content:center; }
.fml-pillar__icon img { width:26px; height:26px; display:block; }
.fml-pillar__beta { position:absolute; top:12px; left:14px; font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.45); }
.fml-pillar__body { display:flex; flex-direction:column; gap:10px; padding:42px 24px 24px; text-align:center; flex:1 1 auto; }
.fml-pillar__body h3 { font-size:21px; }
.fml-pillar__body p { font-size:14.5px; line-height:1.55; color:var(--fg-2); text-wrap:pretty; }
.fml-pillar__more { display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:auto; padding-top:14px; font-size:13.5px; font-weight:var(--fw-medium); color:var(--fm-teal-dark); }
.fml-pillar__more img { width:15px; height:15px; transition:transform var(--duration-base) var(--easing-standard); }
.fml-pillar:hover .fml-pillar__more img { transform:translateX(3px); }

/* Pillar page: value proposition */
.fml-pillarvp { padding:80px 40px; border-bottom:1px solid var(--fm-border); }
.fml-pillarvp.fml-section--alt { background:var(--bg-2); }
.fml-pillarvp__inner { display:flex; gap:28px; align-items:flex-start; }
.fml-pillarvp__icon { width:64px; height:64px; flex:none; border-radius:50%; background:var(--fm-teal-20); display:flex; align-items:center; justify-content:center; }
.fml-pillarvp__icon img { width:28px; height:28px; display:block; }
.fml-pillarvp__text .fm-overline { color:var(--fm-teal); margin-bottom:14px; }
.fml-pillarvp__claim { margin:0 0 16px; max-width:26ch; font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:clamp(26px,3.4vw,38px); line-height:1.18; color:var(--fg-1); text-wrap:pretty; }
.fml-pillarvp__body { max-width:62ch; font-size:17px; line-height:1.65; color:var(--fg-2); }

/* Pillar page: what you get control of */
.fml-controls { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--fm-border); border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; }
.fml-controls li { background:#fff; display:flex; gap:18px; padding:26px 26px 28px; }
.fml-controls__num { font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; color:var(--fm-teal); padding-top:3px; }
.fml-controls h4 { font-size:16.5px; margin-bottom:6px; }
.fml-controls p { font-size:14px; line-height:1.55; color:var(--fg-2); }

/* Integrations */
.fml-ext { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.fml-ext-card { background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg); padding:22px; display:flex; flex-direction:column; gap:9px; text-decoration:none; transition:transform var(--duration-base) var(--easing-out), border-color var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard); }
.fml-ext-card:hover { transform:translateY(-3px); border-color:var(--fm-teal-40); box-shadow:var(--shadow-2); }
.fml-ext-card__top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fml-ext-card__top img { width:15px; height:15px; flex:none; display:block; }
.fml-ext-card h4 { font-size:17px; }
.fml-ext-card p { font-size:13px; color:var(--fg-2); line-height:1.5; }
.fml-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fm-teal-dark); background:var(--fm-teal-20); border-radius:var(--radius-pill); padding:4px 9px; }
.fml-soon { margin-top:auto; padding-top:6px; }
.fml-badge { display:inline-flex; align-items:center; gap:6px; border-radius:var(--radius-pill); padding:3px 10px; font-size:12px; line-height:1.4; }
.fml-badge--warn { background:var(--status-warning-bg); color:#8A6212; }
.fml-badge--warn i { width:6px; height:6px; border-radius:50%; background:var(--status-warning); }

/* Hardware */
.fml-prods { display:flex; gap:24px; }
.fml-prod { position:relative; flex:1; background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--duration-base) var(--easing-out), box-shadow var(--duration-base) var(--easing-standard); }
.fml-prod:hover { transform:translateY(-3px); box-shadow:var(--shadow-3); }
.fml-prod__bar { height:4px; background:var(--fm-teal); }
.fml-prod__bar--olive { background:var(--fm-olive); }
.fml-prod__bar--slate { background:var(--fm-slate); }
.fml-prod__bar--danger { background:var(--status-danger); }
.fml-prod__body { padding:26px; display:flex; flex-direction:column; gap:14px; flex:1; }
.fml-prod__body .fm-overline { color:var(--fg-4); }
.fml-prod p { font-size:14px; line-height:1.55; color:var(--fg-2); }
.fml-conn { display:flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid var(--fm-border); border-radius:var(--radius-sm); background:var(--bg-2); align-self:flex-start; }
.fml-conn img { width:15px; height:15px; flex:none; display:block; }
.fml-conn span { font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.04em; color:var(--fg-2); }
.fml-prod.is-featured::after { content:''; position:absolute; inset:0; border:1px solid var(--fm-teal); border-radius:var(--radius-lg); pointer-events:none; }
.fml-prod.is-featured .fml-prod__body .fm-overline { max-width:calc(100% - 96px); }
.fml-prod__flag { position:absolute; top:18px; right:18px; font-size:11px; font-weight:var(--fw-medium); letter-spacing:0.06em; text-transform:uppercase; color:#fff; background:var(--fm-teal); border-radius:var(--radius-pill); padding:4px 11px; }

/* Testimonial */
.fml-quote { position:relative; padding:92px 40px; border-top:1px solid var(--fm-border); border-bottom:1px solid var(--fm-border); overflow:hidden; }
.fml-quote__inner { position:relative; max-width:760px; margin:0 auto; text-align:center; }
.fml-quote__mark { position:absolute; z-index:0; top:-78px; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-style:italic; font-weight:var(--fw-bold); font-size:118px; line-height:1; color:var(--fm-teal-20); pointer-events:none; user-select:none; }
.fml-quote__photo { position:relative; z-index:1; width:74px; height:74px; border-radius:50%; margin:0 auto 26px; background-color:#fff; background-size:cover; background-position:center; box-shadow:0 0 0 2px var(--fm-teal-40),0 0 0 8px var(--fm-teal-20); }
.fml-quote__text { position:relative; font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:26px; line-height:1.48; color:var(--fg-1); margin-bottom:22px; }
.fml-quote__by { display:flex; align-items:center; justify-content:center; gap:12px; }
.fml-quote__by i { width:28px; height:1px; background:var(--fm-border-strong); }
.fml-quote__by span { font-size:13.5px; color:var(--fg-3); }

/* Pricing */
.fml-price-card { max-width:460px; margin:0 auto; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-2); overflow:hidden; }
.fml-price-card__bar { height:4px; background:var(--fm-teal); }
.fml-price-card__body { padding:36px 34px 34px; text-align:center; }
.fml-price-card__body .fm-overline { color:var(--fm-teal); }
.fml-price__amount { font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:52px; line-height:1; letter-spacing:-0.02em; color:var(--fg-1); margin-top:14px; }
.fml-price__period { font-size:13.5px; color:var(--fg-3); margin-top:10px; }
.fml-price__rule { height:1px; background:var(--fm-divider); margin:26px 0; }
.fml-price-list { display:flex; flex-direction:column; gap:11px; text-align:left; }
.fml-price-item { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; color:var(--fg-2); }
.fml-price-item img { width:16px; height:16px; flex:none; display:block; margin-top:3px; }
.fml-price-card .fml-btn { margin-top:28px; }
.fml-price__note { font-size:12px; color:var(--fg-4); margin-top:14px; }

/* Contact — Contact Form 7 */
.fml-contact__inner { max-width:620px; margin:0 auto; }
.fml-cf7 label { display:block; font-size:var(--fs-overline); line-height:var(--lh-overline); letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-3); font-weight:var(--fw-medium); margin-bottom:7px; }
.fml-cf7 .fml-form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.fml-cf7 p { margin:0 0 18px; }
.fml-cf7 input[type=text], .fml-cf7 input[type=email], .fml-cf7 input[type=tel], .fml-cf7 input[type=number], .fml-cf7 textarea, .fml-cf7 select { width:100%; padding:0 13px; height:44px; border:1px solid var(--fm-border-strong); border-radius:var(--radius-sm); font:inherit; font-size:14px; color:var(--fg-1); background:#fff; outline:none; transition:border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard); }
.fml-cf7 textarea { height:auto; min-height:118px; padding:12px 13px; line-height:1.55; resize:vertical; }
.fml-cf7 input:focus, .fml-cf7 textarea:focus, .fml-cf7 select:focus { border-color:var(--fm-teal); box-shadow:0 0 0 3px var(--fm-teal-20); }
.fml-cf7 input[type=submit], .fml-cf7 button[type=submit] { display:inline-flex; align-items:center; height:46px; padding:0 24px; border:0; border-radius:var(--radius-sm); background:var(--fm-teal); color:#fff; font:inherit; font-size:15px; font-weight:var(--fw-medium); cursor:pointer; transition:background var(--duration-base) var(--easing-standard); }
.fml-cf7 input[type=submit]:hover { background:var(--fm-teal-dark); }
.fml-cf7 .fml-form-foot { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.fml-cf7 .fml-form-note { font-size:12px; color:var(--fg-4); max-width:300px; line-height:1.45; }
.fml-cf7 .wpcf7-not-valid-tip { font-size:12px; color:#8A6212; margin-top:6px; }
.fml-cf7 .wpcf7-not-valid { border-color:var(--status-warning); }
.fml-cf7 .wpcf7-response-output { display:flex; align-items:center; gap:9px; margin:0; padding:12px 14px; border:1px solid var(--fm-border-strong); border-radius:var(--radius-sm); font-size:13.5px; }
.fml-cf7 form.sent .wpcf7-response-output { border-color:var(--status-success); background:var(--status-success-bg); color:#4D5F12; }
.fml-cf7 form.invalid .wpcf7-response-output, .fml-cf7 form.unaccepted .wpcf7-response-output { border-color:var(--status-warning); background:var(--status-warning-bg); color:#8A6212; }
.fml-cf7 .wpcf7-spinner { margin-left:10px; }

/* Footer */
.fml-footer { background:var(--fg-1); color:rgba(255,255,255,0.68); padding:60px 40px 26px; }
.fml-footer__grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; }
.fml .fml-footer .fml-footer__grid img { height:30px; max-height:30px; width:auto; max-width:none; display:block; margin-bottom:14px; }
.fml-footer p { font-size:13.5px; line-height:1.6; max-width:330px; color:rgba(255,255,255,0.6); }
.fml-footer .fm-overline { color:rgba(255,255,255,0.45); margin-bottom:14px; }
.fml-footer__links { font-size:13.5px; }
.fml-footer__links .fml-nav__list { display:flex; flex-direction:column; align-items:flex-start; gap:9px; list-style:none; margin:0; padding:0; }
.fml-footer__links a { color:rgba(255,255,255,0.7); text-decoration:none; transition:color var(--duration-fast) var(--easing-standard); }
.fml-footer__links a:hover { color:#fff; }
.fml-footer__links a.fml-mail { color:var(--fm-teal-60); }
.fml-footer__links a.fml-mail:hover { color:var(--fm-teal-40); }
.fml-footer__links span { color:rgba(255,255,255,0.6); }
.fml-footer__bottom { max-width:1100px; margin:40px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,0.13); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.fml-footer__bottom small { font-size:12px; color:rgba(255,255,255,0.42); }
.fml-footer__bottom .fm-coord { color:var(--fm-teal-60); }
.fml-footer__bottom small > span { margin:0 6px; }
.fml .fml-footer__privacy { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.fml .fml-footer__privacy:hover { color:#fff; }

/* Section-page hero */
.fml-pagehero { position:relative; padding:72px 40px 64px; background:var(--bg-2); border-bottom:1px solid var(--fm-border); overflow:hidden; }
.fml-pagehero__bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.fml-pagehero__bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(31,33,36,0.42) 0%, rgba(0,57,52,0.78) 100%); }
/* Same width as .fml-wrap, so the heading starts where the sections below do;
   the heading itself keeps its old measure. */
.fml-pagehero__inner { position:relative; max-width:1100px; margin:0 auto; }
.fml-pagehero .fm-overline { color:var(--fm-teal); margin-bottom:12px; }
.fml-pagehero h1 { max-width:840px; font-size:clamp(30px,4vw,44px); line-height:1.1; letter-spacing:-0.015em; }
.fml-pagehero p { margin-top:14px; font-size:17.5px; line-height:1.55; color:var(--fg-3); max-width:640px; }
.fml-pagehero.has-image { background:var(--fg-1); border-bottom:0; padding:104px 40px 92px; }
.fml-pagehero.has-image h1 { color:#fff; }
.fml-pagehero.has-image p { color:rgba(255,255,255,0.82); }
.fml-pagehero.has-image .fm-overline { color:var(--fm-teal-60); }

/* Closing CTA band */
.fml-band { background:var(--fm-teal); color:#fff; padding:56px 40px; }
.fml-band__inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.fml-band h2 { color:#fff; }
.fml-band p { margin-top:10px; font-size:16px; color:rgba(255,255,255,0.82); }
.fml-btn--onteal { background:#fff; color:var(--fm-teal-dark); flex:none; }
.fml-btn--onteal:hover { background:rgba(255,255,255,0.9); color:var(--fm-teal-dark); }

/* Optional product photo. The shop cards (.fml-prod__img) crop a photograph to
   fill the band; the model cards (.fml-prod__photo) centre a cut-out whole on a
   wash of the model's own colour. */
.fml-prod__img { height:170px; background-size:cover; background-position:center; border-bottom:1px solid var(--fm-border); }
.fml-prod--olive { --tone:var(--fm-olive); }
.fml-prod--slate { --tone:var(--fm-slate); }
.fml-prod--danger { --tone:var(--status-danger); }
.fml-prod__photo { display:flex; align-items:center; justify-content:center; overflow:hidden; height:196px; padding:22px; background:color-mix(in oklab, var(--tone, var(--fm-teal)) 10%, #fff); border-bottom:1px solid var(--fm-border); }
.fml .fml-prod__photo img { display:block; width:auto; height:100%; max-width:100%; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(31,33,36,0.14)); }

/* WordPress editor content */
.fml-prose { max-width:720px; margin:0 auto; font-size:16.5px; line-height:1.65; color:var(--fg-2); }
.fml-prose > * + *, .fml-prose article > * + * { margin-top:20px; }
.fml-prose h2 { margin-top:40px; }
.fml-prose h3, .fml-prose h4 { margin-top:32px; }
.fml-prose p { margin:0; }
.fml-prose ul, .fml-prose ol { padding-left:22px; }
.fml-prose li + li { margin-top:8px; }
.fml-prose a { color:var(--fm-teal-dark); overflow-wrap:anywhere; }
.fml-prose strong { font-weight:var(--fw-medium); color:var(--fg-1); }
.fml-prose img { border-radius:var(--radius-lg); display:block; height:auto; }
.fml-prose figure { margin:0; }
.fml-prose figcaption { font-size:13px; color:var(--fg-3); margin-top:8px; }
.fml-prose blockquote { margin:0; padding-left:20px; border-left:1px solid var(--fm-teal-40); font-family:var(--font-display); font-style:italic; font-size:20px; line-height:1.45; color:var(--fg-1); }
.fml-prose table { width:100%; border-collapse:collapse; font-size:14.5px; }
.fml-prose th, .fml-prose td { border:1px solid var(--fm-border); padding:10px 12px; text-align:left; }
.fml-prose th { background:var(--bg-2); font-weight:var(--fw-medium); }

/* Situations */
.fml-sit { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.fml-sit-card { background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg); padding:24px 22px 26px; display:flex; flex-direction:column; gap:12px; transition:border-color var(--duration-base) var(--easing-standard); }
.fml-sit-card:hover { border-color:var(--fm-teal-40); }
.fml-sit-card__icon { width:40px; height:40px; border-radius:var(--radius-sm); background:var(--fm-teal-20); display:flex; align-items:center; justify-content:center; }
.fml-sit-card__icon img { width:19px; height:19px; display:block; }
.fml-sit-card h4 { font-size:16.5px; }
.fml-sit-card p { font-size:14px; line-height:1.55; color:var(--fg-2); }

/* Early intervention */
.fml-earlier { padding:96px 40px; border-top:1px solid var(--fm-border); border-bottom:1px solid var(--fm-border); }
.fml-earlier.fml-section--alt { background:var(--bg-2); }
.fml-earlier__inner { display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:start; }
.fml-earlier__lead .fm-overline { color:var(--fm-teal); margin-bottom:16px; }
.fml-earlier__lead blockquote { margin:0 0 18px; font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:32px; line-height:1.26; color:var(--fg-1); text-wrap:pretty; }
.fml-earlier__lead p { font-size:16.5px; line-height:1.65; color:var(--fg-2); }
.fml-earlier__photo { margin-top:28px; height:230px; border-radius:var(--radius-lg); background-size:cover; background-position:center; }
.fml-earlier__steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; background:var(--fm-border); border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; }
.fml-earlier__steps li { background:#fff; display:flex; gap:18px; padding:24px 24px 26px; }
.fml-earlier__num { font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; color:var(--fm-teal); padding-top:3px; }
.fml-earlier__steps h4 { font-size:16px; margin-bottom:6px; }
.fml-earlier__steps p { font-size:14px; line-height:1.55; color:var(--fg-2); }

/* Grazing season */
.fml-seasons { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.fml-season { background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg); padding:26px 24px 28px; display:flex; flex-direction:column; gap:10px; }
.fml-season__top { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.fml-season__top img { width:20px; height:20px; display:block; }
.fml-season__period { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fm-teal); }
.fml-season h4 { font-size:19px; }
.fml-season p { font-size:14px; line-height:1.55; color:var(--fg-2); }
.fml-season__list { list-style:none; margin:8px 0 0; padding:14px 0 0; border-top:1px solid var(--fm-border); display:flex; flex-direction:column; gap:9px; }
.fml-season__list li { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--fg-2); }
.fml-season__list img { width:14px; height:14px; flex:none; margin-top:3px; }

/* More than tracking */
.fml-compare { border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; background:#fff; }
.fml-compare__head, .fml-compare__row { display:grid; grid-template-columns:0.8fr 1fr 1.15fr; gap:24px; padding:16px 26px; align-items:center; }
.fml-compare__head { background:var(--bg-2); border-bottom:1px solid var(--fm-border); }
.fml-compare__head span { font-size:var(--fs-overline); letter-spacing:0.12em; text-transform:uppercase; font-weight:var(--fw-medium); color:var(--fg-3); }
.fml-compare__head .fml-compare__b { color:var(--fm-teal); }
.fml-compare__row + .fml-compare__row { border-top:1px solid var(--fm-border); }
.fml-compare__row .fml-compare__topic { font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:15.5px; color:var(--fg-1); }
.fml-compare__a, .fml-compare__b { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; }
.fml-compare__a { color:var(--fg-3); }
.fml-compare__b { color:var(--fg-1); }
.fml-compare__a img, .fml-compare__b img { width:15px; height:15px; flex:none; margin-top:2px; }

/* Farmer stories */
.fml-stories { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fml-story { margin:0; background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg); padding:28px 26px; display:flex; flex-direction:column; gap:20px; }
.fml-story blockquote { margin:0; font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:19px; line-height:1.42; color:var(--fg-1); text-wrap:pretty; }
.fml-story figcaption { display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:18px; border-top:1px solid var(--fm-border); }
.fml-story__photo { width:44px; height:44px; flex:none; border-radius:50%; background:var(--bg-3) center/cover no-repeat; box-shadow:0 0 0 1px var(--fm-border); }
.fml-story__who { display:flex; flex-direction:column; gap:2px; }
.fml-story__who strong { font-size:14px; font-weight:var(--fw-medium); color:var(--fg-1); }
.fml-story__who em { font-style:normal; font-size:12.5px; color:var(--fg-3); }
a.fml-story { text-decoration:none; color:inherit; transition:transform var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard); cursor:pointer; }
a.fml-story:hover { transform:translateY(-2px); box-shadow:var(--shadow-1); border-color:var(--fm-teal-40); }
.fml-story__cta { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:var(--fw-medium); color:var(--fm-teal-dark); }
.fml-story__cta img { width:14px; height:14px; transition:transform var(--duration-base) var(--easing-standard); }
a.fml-story:hover .fml-story__cta img { transform:translateX(3px); }
.fml-stories__more { text-align:center; margin-top:32px; }
.fml-link { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:var(--fw-medium); color:var(--fm-teal-dark); text-decoration:none; }
.fml-link img { width:14px; height:14px; }
.fml-link:hover { color:var(--fm-teal); }

/* Beitekontrollen for sau */
.fml-beitehero { position:relative; min-height:76vh; display:flex; align-items:flex-end; padding:0 40px; overflow:hidden; background:var(--fg-1); }
.fml-beitehero__bg { position:absolute; inset:0; background:var(--fg-1) center/cover no-repeat; background-position:52% 58%; animation:fml-beitezoom 2600ms cubic-bezier(.16,.8,.24,1) both; }
/* Sideways for the copy column, plus a foot of shade: the copy sits on the
   bottom edge, and a bright sky there leaves the overline unreadable. */
.fml-beitehero__scrim { position:absolute; inset:0; background:linear-gradient(90deg,rgba(20,26,25,0.70) 0%,rgba(20,26,25,0.44) 46%,rgba(20,26,25,0.06) 78%,rgba(20,26,25,0.22) 100%),linear-gradient(0deg,rgba(20,26,25,0.42) 0%,rgba(20,26,25,0.12) 46%,rgba(20,26,25,0) 72%); }
.fml-beitehero__inner { position:relative; width:100%; padding:120px 0 68px; }
/* White rather than a teal tint: the overline sits wherever the photo puts
   it, and a pale tint on a pale sky is unreadable. */
.fml .fml-beitehero__label { color:rgba(255,255,255,0.88); margin:22px 0 14px; text-shadow:0 1px 8px rgba(0,20,18,0.6); }
.fml-beitehero h1 { color:#fff; max-width:14ch; font-size:clamp(34px,5.2vw,62px); line-height:1.06; margin-bottom:22px; }
.fml-beitehero__sub { max-width:52ch; margin:0; font-size:19px; line-height:1.55; color:rgba(255,255,255,0.92); text-shadow:0 1px 10px rgba(0,20,18,0.4); }
.fml-beitehero h1 { text-shadow:0 2px 16px rgba(0,20,18,0.4); }
.fml-beitehero .fml-coordpill { background:rgba(16,30,28,0.42); border-color:rgba(255,255,255,0.3); }
.fml-beitehero .fml-coordpill em { color:#fff; }
.fml-beitehero__ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
@keyframes fml-beitezoom { from { transform:scale(1.09); } to { transform:none; } }
@media (prefers-reduced-motion:reduce) { .fml-beitehero__bg { animation:none; } }

/* The reveal only ever adds a class, so no-JS keeps every section visible. */
[data-fml-reveal] { opacity:0; transform:translateY(22px); transition:opacity 620ms cubic-bezier(.16,.8,.24,1), transform 620ms cubic-bezier(.16,.8,.24,1); }
[data-fml-reveal].is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { [data-fml-reveal] { opacity:1; transform:none; transition:none; } }

.fml-beitevalues { background:var(--bg-2); border-bottom:1px solid var(--fm-border); padding:0 40px; }
.fml-beitevalues__grid { display:grid; grid-template-columns:repeat(3,1fr); }
.fml-beitevalue { padding:34px 28px; border-right:1px solid var(--fm-border); }
.fml-beitevalue:first-child { padding-left:0; }
.fml-beitevalue:last-child { padding-right:0; border-right:0; }
.fml-beitevalue__num { font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; color:var(--fg-3); }
.fml-beitevalue h4 { margin:8px 0 6px; font-size:20px; }
.fml-beitevalue p { margin:0; font-size:14.5px; line-height:1.55; color:var(--fg-3); }

.fml-beitebasis { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:56px; align-items:start; }
.fml .fml-beitebasis__label { color:var(--fm-teal-darker); margin-bottom:16px; }
.fml-beitebasis__title { margin:0 0 18px; font-size:clamp(26px, 3.2vw, 38px); line-height:1.12; }
.fml-beitebasis__lead { margin:0 0 18px; font-size:19px; line-height:1.6; color:var(--fg-1); }
.fml-beitebasis__body { margin:0 0 14px; font-size:16.5px; line-height:1.65; color:var(--fg-2); }
.fml-beitebasis__body:last-child { margin-bottom:0; }
.fml-beitefig { margin:0; border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-3); }
.fml-beitefig img { display:block; width:100%; height:340px; object-fit:cover; }
.fml-beitefig figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; padding:14px 16px; border-top:1px solid var(--fm-border); background:#fff; font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.05em; color:var(--fg-3); }
.fml-beitefig__meta { color:var(--fm-border-strong); }

.fml-beitestatement { position:relative; padding:104px 40px; background:var(--fm-teal); color:#fff; overflow:hidden; }
.fml-beitestatement__ring { position:absolute; top:-140px; right:-90px; width:420px; height:420px; border:1px solid rgba(255,255,255,0.2); border-radius:50%; }
.fml-beitestatement__ring--sm { top:-60px; right:-10px; width:260px; height:260px; border-color:rgba(255,255,255,0.13); }
.fml-beitestatement__inner { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px; align-items:start; }
.fml-beitestatement__media { margin:0; border-radius:var(--radius-lg); overflow:hidden; }
.fml-beitestatement__media img { display:block; width:100%; height:400px; object-fit:cover; object-position:50% 40%; }
.fml-beitestatement h2 { color:#fff; font-size:clamp(30px,3.8vw,46px); line-height:1.1; margin-bottom:26px; }
.fml-beitestatement p { margin:0 0 16px; font-size:17.5px; line-height:1.65; color:rgba(255,255,255,0.94); }
.fml-beitestatement p:last-child { margin-bottom:0; }

.fml-beitetoolbox__head { max-width:620px; margin-bottom:34px; }
.fml-beitetoolbox__head .fm-overline { color:var(--fm-teal-darker); margin-bottom:14px; }
.fml-beitetoolbox__head h2 { margin-bottom:10px; }
.fml-beitetoolbox__head p { margin:0; font-size:16px; color:var(--fg-3); }
.fml-beitetabs { display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--fm-border); margin-bottom:30px; }
.fml-beitetab { appearance:none; border:0; background:transparent; padding:12px 18px; font-family:var(--font-sans); font-size:15.5px; font-weight:var(--fw-medium); color:var(--fg-3); cursor:pointer; box-shadow:inset 0 -2px 0 0 transparent; transition:color var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard); }
.fml-beitetab:hover { color:var(--fm-teal-darker); }
.fml-beitetab.is-active { color:var(--fm-teal-darker); box-shadow:inset 0 -2px 0 0 var(--fm-teal); }
/* These carry their own display, which would beat the UA's [hidden] rule. */
.fml-beitetabs[hidden], .fml-beitetool[hidden], .fml-beitealarmpanel[hidden] { display:none; }
.fml-beitetool { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:52px; align-items:center; }
.fml-beitetool:focus-visible { outline:none; box-shadow:var(--shadow-focus); border-radius:var(--radius-lg); }
.fml-beitetool__text h3 { margin:0 0 14px; font-size:26px; line-height:1.2; }
.fml-beitetool__text p { margin:0 0 20px; font-size:16.5px; line-height:1.65; color:var(--fg-2); }
.fml-beitepoints { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.fml-beitepoints li { display:flex; align-items:flex-start; gap:11px; font-size:15.5px; line-height:1.5; }
.fml-beitepoints img { width:19px; height:19px; margin-top:2px; flex:none; }
.fml-beitealarms { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.fml-beitealarm { appearance:none; padding:7px 15px; border:1px solid var(--fm-border-strong); border-radius:var(--radius-pill); background:#fff; font-family:var(--font-sans); font-size:14px; color:var(--fg-2); cursor:pointer; transition:background var(--duration-base) var(--easing-standard), color var(--duration-base) var(--easing-standard), border-color var(--duration-base) var(--easing-standard); }
.fml-beitealarm.is-active { background:var(--fm-teal); border-color:var(--fm-teal); color:#fff; }
.fml-beitealarmbox { min-height:120px; margin-bottom:22px; padding:18px 20px; border:1px solid var(--fm-border); border-left:3px solid var(--fm-teal); border-radius:var(--radius-md); background:#fff; }
.fml-beitealarmpanel__label { margin-bottom:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-3); }
.fml-beitealarmbox p { margin:0; font-size:15.5px; line-height:1.6; color:var(--fg-2); }
.fml-beitetool__media { position:relative; display:flex; flex-direction:column; align-items:center; margin:0; }
/* The quote sits under the photograph rather than inside it: burned-in text
   cannot be translated, selected or read aloud. */
.fml-beitetool__quote { align-self:stretch; display:flex; flex-direction:column; gap:6px; margin-top:14px; }
.fml .fml-beitetool__quote blockquote { margin:0; font-family:var(--font-display); font-style:italic; font-size:17px; line-height:1.45; color:var(--fg-1); text-wrap:pretty; }
.fml-beitetool__quote cite { font-style:normal; font-size:13.5px; color:var(--fg-3); }
.fml-beitetool__media img { display:block; width:100%; height:auto; }
.fml-beitetool__media--phone img { max-width:320px; }
.fml-beitetool__media--framed img { height:400px; object-fit:cover; border:1px solid var(--fm-border); border-radius:var(--radius-lg); }
/* Without a caption the figure is just the framed picture, as before. */
.fml-beitetool__media--framed:not(:has(.fml-beitetool__quote)) { border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; }
.fml-beitetool__media--framed:not(:has(.fml-beitetool__quote)) img { border:0; border-radius:0; }
/* A caption under a framed screenshot, set like the Utgangspunktet figure's. */
.fml-beitetool__caption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; align-self:stretch; padding:12px 16px; border-top:1px solid var(--fm-border); background:#fff; font-family:var(--font-mono); font-size:11px; letter-spacing:0.05em; color:var(--fg-3); }
.fml-beitetool__media--framed:has(.fml-beitetool__caption) img { height:300px; }
.fml-beitebadge { position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:var(--radius-pill); background:rgba(255,255,255,0.94); font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; color:var(--fg-1); }
.fml-beitebadge i { width:7px; height:7px; border-radius:50%; background:var(--status-danger); }

.fml .fml-beitestories__label { color:var(--fm-teal-darker); margin-bottom:30px; }
.fml-beitepull { margin:0 0 84px; max-width:900px; }
.fml-beitepull blockquote { margin:0; }
/* With a portrait, the photo sits beside the quote and the quote gets the rest. */
.fml-beitepull.has-image { display:grid; grid-template-columns:minmax(160px, 260px) 1fr; gap:48px; align-items:center; max-width:1100px; }
.fml-beitepull__image { display:block; width:100%; aspect-ratio:3 / 4; object-fit:cover; border-radius:var(--radius-lg); }
.fml-beitepull p { margin:0 0 22px; font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:clamp(24px,3vw,34px); line-height:1.28; color:var(--fg-1); }
.fml-beitepull footer { display:flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.05em; color:var(--fg-3); }
.fml-beitepull footer i { width:34px; height:1px; background:var(--fm-teal-40); }
.fml-beiteperson { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:52px; align-items:center; }
.fml-beiteperson .fm-overline { color:var(--fg-3); margin-bottom:14px; }
.fml-beiteperson h3 { margin:0 0 18px; font-size:28px; line-height:1.18; }
.fml-beiteperson p { margin:0 0 14px; font-size:16.5px; line-height:1.65; color:var(--fg-2); }
.fml-beiteperson p:last-child { margin-bottom:0; }
.fml-beiteperson__media { margin:0; border-radius:var(--radius-lg); overflow:hidden; }
.fml-beiteperson__media img { display:block; width:100%; height:420px; object-fit:cover; transition:transform 600ms cubic-bezier(.16,.8,.24,1); }
.fml-beiteperson__media:hover img { transform:scale(1.03); }

.fml-beitecontact { position:relative; padding:96px 40px; background:var(--fm-teal); color:#fff; overflow:hidden; }
.fml-beitecontact__ring { position:absolute; bottom:-160px; left:-120px; width:460px; height:460px; border:1px solid rgba(255,255,255,0.18); border-radius:50%; }
.fml-beitecontact__inner { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px; align-items:start; }
.fml-beitecontact__text .fm-overline { color:rgba(255,255,255,0.72); margin-bottom:14px; }
.fml-beitecontact h2 { color:#fff; font-size:clamp(28px,3.6vw,44px); line-height:1.1; margin-bottom:18px; }
.fml-beitecontact__text p { max-width:46ch; margin:0 0 28px; font-size:17px; line-height:1.6; color:rgba(255,255,255,0.92); }
.fml-beitecontact__points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.fml-beitecontact__points li { display:flex; align-items:center; gap:11px; font-size:16px; }
.fml-beitecontact__points img { width:20px; height:20px; flex:none; }
.fml-beitecard { padding:28px; border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-2); }
.fml-beitecard h4 { margin:0 0 10px; font-size:22px; }
.fml-beitecard p { margin:0 0 20px; font-size:15.5px; line-height:1.6; color:var(--fg-2); }
.fml-beitecard__note { margin:14px 0 0; font-size:12.5px; line-height:1.5; color:var(--fg-3); }

/* Tilbudsskjema */
.fml-offerform { max-width:720px; margin:0 auto; }
.fml-offerform--bare { max-width:none; }
.fml-offerform__card { background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-2); overflow:hidden; }
.fml-offerform__head { padding:24px 26px 20px; border-bottom:1px solid var(--fm-divider); }
.fml-offerform__head .fm-overline { color:var(--fm-teal-darker); margin-bottom:8px; }
.fml-offerform__head h2 { margin:0 0 8px; font-size:clamp(23px,3.2vw,29px); line-height:1.15; }
.fml-offerform__head p { max-width:56ch; margin:0; font-size:15px; line-height:1.5; color:var(--fg-3); }
.fml-offerform__notice { margin:16px 26px 0; padding:11px 14px; border:1px solid var(--status-warning); border-radius:var(--radius-sm); background:var(--status-warning-bg); font-size:13.5px; color:#8A6212; }
.fml-offerform__group { padding:20px 26px 0; }
.fml-offerform__labels { display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; margin-bottom:10px; font-size:14px; font-weight:var(--fw-medium); color:var(--fg-1); }
.fml-offerform__labels span:first-child { flex:4; }
.fml-offerform__labels span + span { flex:1; }
.fml-offerform__labels em { font-style:normal; font-weight:400; font-size:13px; color:var(--fg-4); }
/* Available to screen readers, not to the eye. WordPress markup expects this
   class to exist and the theme did not define it. */
.screen-reader-text { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* The trap is for robots; keep it out of sight and out of the tab order. */
.fml-offerform__trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.fml-offerform__tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
/* The border stays 2.5px whatever the state: growing it on select moved every
   tile beside it by a pixel. The weight of a thicker edge comes from an inset
   shadow, which takes no room. */
.fml-tile { position:relative; display:flex; align-items:center; justify-content:center; min-height:58px; padding:8px 6px; border:2.5px solid var(--fm-border-strong); border-radius:var(--radius-md); background:#fff; font-size:14.5px; font-weight:var(--fw-medium); color:var(--fg-2); text-align:center; cursor:pointer; transition:border-color var(--duration-base) var(--easing-standard), background var(--duration-base) var(--easing-standard), color var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard); }
.fml-tile input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.fml-tile:hover { border-color:var(--fm-teal-40); }
.fml-tile:has(input:checked) { border-color:var(--fm-teal); background:var(--fm-teal-20); color:var(--fm-teal-darker); box-shadow:inset 0 0 0 1px var(--fm-teal); }
.fml-tile:has(input:focus-visible) { box-shadow:var(--shadow-focus); }

.fml-offerform__cov { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fml-cov { position:relative; display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:66px; padding:11px 42px 11px 14px; border:2.5px solid var(--tone, var(--fm-border-strong)); border-radius:var(--radius-md); background:#fff; cursor:pointer; transition:background var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard); }
.fml-cov input { position:absolute; opacity:0; width:100%; height:100%; top:0; left:0; margin:0; cursor:pointer; }
.fml-cov__title { font-size:14.5px; font-weight:var(--fw-medium); color:var(--fg-1); }
.fml-cov__desc { font-size:12.5px; line-height:1.4; color:var(--fg-3); }
/* Border colour carries how much coverage each answer means. */
.fml-cov--success { --tone:var(--status-success); }
.fml-cov--warning { --tone:var(--status-warning); }
.fml-cov--danger { --tone:var(--status-danger); }
.fml-cov--muted { --tone:var(--fm-border-strong); }
/* Picked: the card takes its own colour as a wash and gets a tick, so the
   answer is readable at a glance rather than a half-pixel of extra border. */
.fml-cov:has(input:checked) { background:color-mix(in oklab, var(--tone) 14%, #fff); box-shadow:inset 0 0 0 1px var(--tone); }
.fml-cov:has(input:checked) .fml-cov__title { color:var(--fg-1); }
.fml-cov:has(input:checked) .fml-cov__desc { color:var(--fg-2); }
.fml-cov__tick { position:absolute; top:50%; right:13px; width:20px; height:20px; transform:translateY(-50%); background:var(--tone); -webkit-mask:url(../icons/circle-check-teal.svg) center/contain no-repeat; mask:url(../icons/circle-check-teal.svg) center/contain no-repeat; opacity:0; transition:opacity var(--duration-fast) var(--easing-standard); }
.fml-cov:has(input:checked) .fml-cov__tick { opacity:1; }
.fml-cov:has(input:focus-visible) { box-shadow:var(--shadow-focus); }

.fml-offerform__row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.fml-field { margin:0 0 12px; }
.fml-field label { display:block; margin-bottom:5px; font-size:13px; font-weight:var(--fw-medium); color:var(--fg-2); }
.fml-field label em { font-style:normal; font-weight:400; color:var(--fg-4); }
.fml-field input, .fml-field textarea { width:100%; box-sizing:border-box; padding:0 12px; height:44px; border:1px solid var(--fm-border-strong); border-radius:var(--radius-sm); font:inherit; font-size:15px; color:var(--fg-1); background:#fff; outline:none; transition:border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard); }
.fml-field textarea { height:auto; padding:10px 12px; line-height:1.5; resize:vertical; }
/* The animal count: a question of its own, narrow, with the unit inside the box
   so the number reads as "120 dyr". */
.fml-count { position:relative; display:block; max-width:180px; }
.fml-offerform .fml-count input[type=number] { padding-right:56px; -moz-appearance:textfield; appearance:textfield; }
.fml-count input[type=number]::-webkit-inner-spin-button, .fml-count input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.fml-count__unit { position:absolute; top:22px; right:12px; transform:translateY(-50%); font-size:14px; color:var(--fg-4); pointer-events:none; }
.fml-field input:focus, .fml-field textarea:focus { border-color:var(--fm-teal); box-shadow:0 0 0 3px var(--fm-teal-20); }

.fml-offerform__error { display:block; margin:8px 0 0; font-size:13px; color:#8A6212; }
/* Required is marked on the field, optional is spelled out — between the two
   there is nothing left to guess at. */
.fml-req { border:0; text-decoration:none; color:var(--fm-teal); font-size:13px; }
.fml-offerform__labels .fml-req { font-size:14px; }
.fml-offerform__foot { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:18px; padding:18px 26px 22px; border-top:1px solid var(--fm-divider); }
.fml-offerform__fine { max-width:34ch; margin:0; font-size:13px; line-height:1.5; color:var(--fg-4); }

.fml-offerform__done { padding:44px 26px 46px; text-align:center; }
.fml-offerform__check { display:flex; align-items:center; justify-content:center; width:54px; height:54px; margin:0 auto 18px; border-radius:50%; background:var(--fm-teal); }
.fml-offerform__done h2 { margin:0 0 10px; font-size:25px; line-height:1.2; }
.fml-offerform__done p { max-width:44ch; margin:0 auto 20px; font-size:16px; line-height:1.55; color:var(--fg-3); }
.fml-offerform__summary { display:inline-block; padding:12px 18px; border-radius:var(--radius-sm); background:var(--bg-3); font-size:14px; line-height:1.7; color:var(--fg-2); text-align:left; }
.fml-offerform__again { margin:20px 0 0; }
.fml-offerform__call { margin:14px 2px 0; font-size:13px; line-height:1.6; color:var(--fg-4); }
.fml-offerform__call a { text-decoration:none; }

/* Hva er Beitekontrollen */
.fml-system__intro { display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:40px 56px; align-items:end; margin-bottom:52px; }
.fml-system__intro .fm-overline { color:var(--fm-teal); margin-bottom:14px; }
.fml-system__intro h2 { margin:0; font-size:clamp(28px,3.6vw,42px); line-height:1.14; }
.fml-system__lead { display:flex; flex-direction:column; gap:16px; }
.fml-system__lead p { margin:0; font-size:17px; line-height:1.6; color:var(--fg-2); }
.fml-system__lead .fml-system__sub { font-size:15px; color:var(--fg-3); }

/* Bell to platform to farmer. An ordered list, because that is what it is. */
.fml-system__flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0 0 64px; padding:26px 22px; list-style:none; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:var(--bg-2); }
.fml-flowstep { position:relative; display:flex; flex-direction:column; gap:10px; padding:6px 36px 6px 14px; }
.fml-flowstep + .fml-flowstep::before { content:''; position:absolute; left:0; top:15%; width:1px; height:70%; background:var(--fm-divider); }
.fml-flowstep__head { display:flex; align-items:center; gap:10px; }
.fml-flowstep__icon { display:flex; align-items:center; justify-content:center; flex:none; width:38px; height:38px; border:1px solid var(--fm-teal-40); border-radius:50%; background:#fff; }
.fml-flowstep__icon img { display:block; width:18px; height:18px; }
.fml-flowstep.is-brand .fml-flowstep__icon { border-color:var(--fm-teal); background:var(--fm-teal); }
.fml-flowstep.is-brand .fml-flowstep__icon img { width:20px; height:20px; object-fit:contain; }
.fml-flowstep__step { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-4); }
.fml-flowstep.is-brand .fml-flowstep__step { color:var(--fm-teal); }
.fml-flowstep h4 { margin:0; font-size:17px; }
.fml-flowstep p { margin:0; font-size:13.5px; line-height:1.55; color:var(--fg-3); }

.fml-system__head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:24px; }
.fml-system__head h3 { margin:0; font-size:24px; }
.fml-system__head span { font-size:14px; color:var(--fg-3); }

.fml-system__tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.fml-tool { display:flex; flex-direction:column; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:#fff; overflow:hidden; color:inherit; text-decoration:none; transition:box-shadow var(--duration-base) var(--easing-standard), border-color var(--duration-base) var(--easing-standard); }
a.fml-tool:hover { box-shadow:var(--shadow-2); border-color:var(--fm-teal-40); }
/* A ratio, not a fixed height: the card is a third of the row on desktop and
   the full width on a phone, and 120px there would slice the photo to a strip. */
.fml-tool__media { position:relative; display:block; aspect-ratio:3/1; background:var(--bg-3); overflow:hidden; }
.fml-tool__media img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 15%; }
.fml-tool__scrim { position:absolute; inset:0; background:linear-gradient(to top,rgba(31,33,36,0.28),rgba(31,33,36,0) 55%); }
.fml-tool__badge { position:absolute; top:10px; right:12px; padding:3px 7px; border-radius:var(--radius-xs); background:rgba(255,255,255,0.92); font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg-2); }
.fml-tool__icon { position:absolute; bottom:10px; left:12px; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.94); box-shadow:var(--shadow-1); }
.fml-tool__icon img { display:block; width:17px; height:17px; }
.fml-tool__body { display:flex; flex-direction:column; gap:9px; flex:1; padding:18px 20px 22px; }
.fml-tool__body h4 { margin:0; }
.fml-tool__vp { font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:14.5px; line-height:1.45; color:var(--fm-teal); }
.fml-tool__text { font-size:13.5px; line-height:1.55; color:var(--fg-3); }

.fml-system__foot { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:28px; padding-top:22px; border-top:1px solid var(--fm-divider); }
.fml-system__foot .fm-coord { color:var(--fm-teal); }
.fml-system__foot span:last-child { font-size:14px; color:var(--fg-3); }

/* News */
.fml-news { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.fml-news-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; transition:transform var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard); }
.fml-news-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-1); border-color:var(--fm-teal-40); }
.fml-news-card__media { display:block; aspect-ratio:16/10; background:var(--bg-3) center/cover no-repeat; border-bottom:1px solid var(--fm-divider); }
.fml-news-card__body { padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; }
.fml-news-card__meta { display:flex; align-items:center; gap:10px; }
.fml-news-card__meta time { font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; color:var(--fg-4); }
.fml-news-card h4 { font-size:16.5px; }
.fml-news-card p { font-size:13.5px; line-height:1.55; color:var(--fg-2); }
.fml-pagehero__cta { margin-top:20px; }
.fml-empty { text-align:center; padding:56px 0; font-size:15px; color:var(--fg-3); }
#nyheter.fml-section, #bondehistorier.fml-section { padding-bottom:128px; }

/* Full article (news post / farmer story) */
.fml-article { padding:64px 40px 80px; }
.fml-article__inner { max-width:720px; margin:0 auto; }
.fml-article__back { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:var(--fw-medium); color:var(--fm-teal-dark); text-decoration:none; margin-bottom:28px; }
.fml-article__back img { width:13px; height:13px; transform:rotate(180deg); }
.fml-article__back:hover { color:var(--fm-teal); }
.fml-article__lead { margin:0 0 18px; font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:24px; line-height:1.4; color:var(--fg-1); }
.fml-article__byline { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--fg-3); margin-bottom:32px; padding-bottom:24px; border-bottom:1px solid var(--fm-border); }
.fml-article__byline strong { color:var(--fg-1); font-weight:var(--fw-medium); }
.fml-article .fml-pillartags { margin:0 0 26px; }
.fml-news-card .fml-pillartags { margin-top:4px; }

/* Om oss */
.fml-abouthero { position:relative; display:flex; align-items:flex-end; min-height:560px; padding:120px 40px 56px; overflow:hidden; background:var(--fg-1); }
.fml-abouthero__img { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.fml-abouthero__scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(31,33,36,0.32) 0%,rgba(31,33,36,0.28) 40%,rgba(0,57,52,0.88) 100%); }
.fml-abouthero__inner { position:relative; z-index:2; width:100%; }
.fml-abouthero h1 { max-width:14ch; margin:0 0 20px; font-size:clamp(40px,6.4vw,72px); line-height:1.04; color:#fff; }
.fml-abouthero p { max-width:620px; margin:0; font-size:19px; line-height:1.55; color:rgba(255,255,255,0.9); }
.fml-abouthero .fml-coordpill { margin-bottom:22px; padding:5px 14px; }
.fml-abouthero__dot { width:8px; height:8px; flex:none; border-radius:var(--radius-circle); background:var(--fm-teal-40); }

.fml-aboutstats { position:relative; padding:64px 40px; background:var(--fm-teal); color:#fff; overflow:hidden; }
.fml-aboutstats__ring { position:absolute; top:-140px; right:-90px; width:360px; height:360px; border:1px solid rgba(255,255,255,0.22); border-radius:50%; }
.fml-aboutstats__grid { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.fml-aboutstat { display:flex; flex-direction:column; gap:8px; }
.fml-aboutstat strong { font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:clamp(38px,4.6vw,54px); line-height:1; }
.fml-aboutstat span { font-size:15px; color:rgba(255,255,255,0.82); }

.fml-aboutstory__grid { display:grid; grid-template-columns:1fr 420px; gap:64px; align-items:start; }
.fml-aboutstory h2 { max-width:20ch; margin:0 0 22px; }
.fml-aboutstory .fm-overline { color:var(--fm-teal-darker); margin-bottom:14px; }
.fml-aboutstory p { margin:0 0 18px; font-size:17px; line-height:1.62; }
.fml-aboutstory p:last-child { margin-bottom:0; }
.fml-aboutstory__side { display:flex; flex-direction:column; gap:16px; }
.fml-aboutnote { display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--fm-border); border-radius:var(--radius-md); background:var(--bg-2); font-size:14px; line-height:1.5; }
.fml-aboutnote img { width:22px; height:22px; flex:none; display:block; }

/* One figure treatment for every picture on the page. */
.fml-aboutfig { margin:0; }
.fml-aboutfig__media { display:block; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:var(--bg-3); overflow:hidden; }
.fml-aboutfig__media img { display:block; width:100%; height:auto; }
.fml-aboutfig figcaption { margin:12px 0 0; font-size:13.5px; line-height:1.5; color:var(--fg-3); }
.fml-aboutfig--tall .fml-aboutfig__media img { height:420px; object-fit:cover; }
.fml-aboutfig--short .fml-aboutfig__media img { height:200px; object-fit:cover; }
.fml-aboutportrait { max-width:640px; margin:56px auto 0; }
.fml-aboutportrait .fml-aboutfig__media { display:block; border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; }
.fml-aboutportrait .fml-aboutfig__media img { display:block; width:100%; height:auto; }
.fml-aboutportrait figcaption { margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--fg-3); }

.fml-aboutdev { padding:96px 40px; background:var(--bg-2); border-top:1px solid var(--fm-border); border-bottom:1px solid var(--fm-border); }
.fml-aboutdev__head { max-width:600px; margin-bottom:48px; }
.fml-aboutdev__head .fm-overline { color:var(--fm-teal-darker); margin-bottom:14px; }
.fml-aboutdev__head h2 { margin:0; }
.fml-aboutdev__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.fml-aboutdev .fml-aboutfig__media img { height:300px; object-fit:cover; }

.fml-aboutteam__head { max-width:620px; margin-bottom:44px; }
.fml-aboutteam__head .fm-overline { color:var(--fm-teal-darker); margin-bottom:14px; }
.fml-aboutteam__head h2 { margin:0 0 16px; }
.fml-aboutteam__head p { margin:0; font-size:17px; line-height:1.6; color:var(--fg-2); }
.fml-aboutteam__gallery { display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:start; }
.fml-aboutteam__side { display:flex; flex-direction:column; gap:20px; }

.fml-callband { position:relative; padding:88px 40px; background:var(--fm-teal); color:#fff; overflow:hidden; }
.fml-callband__ring { position:absolute; bottom:-160px; left:-70px; width:380px; height:380px; border:1px solid rgba(255,255,255,0.2); border-radius:50%; }
.fml-callband__inner { position:relative; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
.fml-callband h2 { max-width:24ch; margin:0 0 14px; color:#fff; }
.fml-callband p { max-width:52ch; margin:0; font-size:17px; line-height:1.6; color:rgba(255,255,255,0.88); }
.fml-callband__actions { display:flex; flex-direction:column; gap:12px; }
.fml-callband__actions .fml-btn { justify-content:center; }
.fml-callband__coord { font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; color:rgba(255,255,255,0.75); text-align:center; }

/* Pagination */.fml-pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:40px; flex-wrap:wrap; }
.fml-pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 8px; border-radius:var(--radius-sm); font-size:13.5px; color:var(--fg-2); text-decoration:none; }
.fml-pagination a.page-numbers:hover { background:var(--bg-2); }
.fml-pagination .page-numbers.current { background:var(--fm-teal); color:#fff; }
.fml-pagination .page-numbers.dots { color:var(--fg-4); }

/* FAQ */
.fml-faq { max-width:820px; margin:0 auto; border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; background:#fff; }
.fml-faq__item + .fml-faq__item { border-top:1px solid var(--fm-border); }
.fml-faq__item summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 26px; cursor:pointer; list-style:none; font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:17px; color:var(--fg-1); }
.fml-faq__item summary::-webkit-details-marker { display:none; }
.fml-faq__item summary:hover { color:var(--fm-teal); }
.fml-faq__item summary img { width:16px; height:16px; flex:none; transition:transform var(--duration-base) var(--easing-standard); }
.fml-faq__item[open] summary img { transform:rotate(180deg); }
.fml-faq__item p { padding:0 26px 24px; margin:0; max-width:64ch; font-size:15px; line-height:1.65; color:var(--fg-2); }

/* Resources */
.fml-res { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.fml-res-card { background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg); padding:24px 22px 26px; display:flex; flex-direction:column; gap:10px; text-decoration:none; transition:transform var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard); }
a.fml-res-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-1); }
.fml-res-card__icon { width:38px; height:38px; border-radius:50%; background:var(--fm-teal-20); display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
.fml-res-card__icon img { width:18px; height:18px; display:block; }
.fml-res-card .fml-tag { align-self:flex-start; }
.fml-res-card h4 { font-size:16px; }
.fml-res-card p { font-size:13.5px; line-height:1.55; color:var(--fg-2); }
.fml-res-card__meta { margin-top:auto; padding-top:14px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--fm-gray-40); }

/* Non-binding offer */
.fml-offer { position:relative; background:var(--fm-teal); color:#fff; padding:76px 40px; overflow:hidden; }
.fml-offer__ring { position:absolute; bottom:-140px; left:-70px; width:360px; height:360px; border:1px solid rgba(255,255,255,0.2); border-radius:50%; }
.fml-offer__inner { position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.fml-offer__text .fm-overline { color:rgba(255,255,255,0.72); margin-bottom:14px; }
.fml-offer__text h2 { color:#fff; margin-bottom:12px; }
.fml-offer__text p { font-size:16.5px; line-height:1.6; color:rgba(255,255,255,0.86); max-width:46ch; }
.fml-offer__points { list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:11px; }
.fml-offer__points li { display:flex; gap:11px; align-items:flex-start; font-size:15px; line-height:1.5; color:rgba(255,255,255,0.92); }
.fml-offer__points img { width:16px; height:16px; flex:none; margin-top:3px; }
.fml-offer__note { margin-top:14px; font-size:13px; color:rgba(255,255,255,0.72); }

/* Hero feature flag */
.fml-herofeatures { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:34px; }
.fml-heroflag { display:inline-flex; align-items:center; gap:12px; padding:10px 18px 10px 14px; max-width:640px; text-align:left; border:1px solid rgba(255,255,255,0.28); border-radius:var(--radius-pill); background:rgba(0,0,0,0.22); text-decoration:none; transition:background var(--duration-base) var(--easing-standard), border-color var(--duration-base) var(--easing-standard); }
.fml-heroflag:hover { background:rgba(0,0,0,0.34); border-color:rgba(255,255,255,0.5); }
.fml-heroflag > img { width:16px; height:16px; flex:none; display:block; }
.fml-heroflag__tag { flex:none; white-space:nowrap; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:#fff; background:var(--fm-teal); border-radius:var(--radius-pill); padding:3px 9px; }
.fml-heroflag__text { font-size:14px; line-height:1.45; color:rgba(255,255,255,0.9); }

/* Health monitoring */
.fml-health { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.fml-health__lead h3 { font-size:24px; margin-bottom:14px; }
.fml-health__lead p { font-size:16.5px; line-height:1.65; color:var(--fg-2); }
.fml-health__lead p + p { margin-top:16px; }
.fml-health__photo { margin-top:26px; height:220px; border-radius:var(--radius-lg); background-size:cover; background-position:center; }
.fml-health__how { background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg); padding:30px 28px 32px; }
.fml-health__how-top { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.fml-health__how-top h3 { font-size:20px; }
.fml-health__icon { width:42px; height:42px; flex:none; border-radius:50%; background:var(--fm-teal-20); display:flex; align-items:center; justify-content:center; }
.fml-health__icon img { width:20px; height:20px; display:block; }
.fml-health__how p { font-size:15px; line-height:1.6; color:var(--fg-2); }
.fml-health__signals { list-style:none; margin:16px 0 20px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.fml-health__signals li { font-size:13.5px; color:var(--fm-teal-dark); background:var(--fm-teal-20); border-radius:var(--radius-pill); padding:6px 13px; }
.fml-health__note { padding-top:18px; border-top:1px solid var(--fm-border); }
.fml-health__note p { font-size:14px; line-height:1.6; color:var(--fg-3); }
.fml-health__note p + p { margin-top:12px; }

/* Benefits + example */
.fml-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
/* Exactly four cards read better as 2×2 than as 3 + a lone orphan. */
.fml-benefits:has(> :nth-child(4):last-child) { grid-template-columns:repeat(2,1fr); }
.fml-benefit { background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg); padding:24px 22px 26px; display:flex; flex-direction:column; gap:11px; }
.fml-benefit__icon { width:40px; height:40px; border-radius:var(--radius-sm); background:var(--fm-teal-20); display:flex; align-items:center; justify-content:center; }
.fml-benefit__icon img { width:19px; height:19px; display:block; }
.fml-benefit h4 { font-size:16.5px; }
.fml-benefit p { font-size:14px; line-height:1.55; color:var(--fg-2); }
.fml-example { margin-top:28px; padding:30px 32px; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:var(--bg-2); }
.fml-example .fm-overline { color:var(--fm-teal); margin-bottom:12px; }
.fml-example p { font-size:16px; line-height:1.65; color:var(--fg-2); max-width:78ch; }
.fml-example__note { margin-top:16px; font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:19px; line-height:1.45; color:var(--fg-1); }

/* PushToFind */
.fml-push { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.fml-push__lead p { font-size:16.5px; line-height:1.65; color:var(--fg-2); }
.fml-push__lead p + p { margin-top:16px; }
.fml-push__photo { margin-top:26px; height:220px; border-radius:var(--radius-lg); background-size:cover; background-position:center; }
.fml-push__how { background:#fff; border:1px solid var(--fm-border); border-radius:var(--radius-lg); padding:30px 28px 32px; }
.fml-push__how-top { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.fml-push__how-top h3 { font-size:20px; }
.fml-push__icon { width:42px; height:42px; flex:none; border-radius:50%; background:var(--fm-teal-20); display:flex; align-items:center; justify-content:center; }
.fml-push__icon img { width:20px; height:20px; display:block; }
.fml-push__how > p { font-size:15px; line-height:1.6; color:var(--fg-2); }
.fml-push__steps { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.fml-push__steps li { display:flex; gap:16px; }
.fml-push__num { font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; color:var(--fm-teal); padding-top:3px; }
.fml-push__steps h4 { font-size:15.5px; margin-bottom:4px; }
.fml-push__steps p { font-size:14px; line-height:1.55; color:var(--fg-2); }
.fml-push__note { margin-top:20px; padding-top:18px; border-top:1px solid var(--fm-border); }
.fml-push__note p { font-size:14px; line-height:1.6; color:var(--fg-3); }

/* Pillar tags on front-page sections */
.fml-pillartags { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.fml-head .fml-pillartags { justify-content:center; }
.fml-pillartag { display:inline-flex; align-items:center; height:28px; padding:0 13px; border:1px solid var(--fm-teal-40); border-radius:var(--radius-pill); background:var(--fm-teal-20); color:var(--fm-teal-dark); font-size:12.5px; font-weight:var(--fw-medium); text-decoration:none; transition:background var(--duration-base) var(--easing-standard), border-color var(--duration-base) var(--easing-standard); }
.fml-pillartag:hover { background:var(--fm-teal); border-color:var(--fm-teal); color:#fff; }
.fml-earlier__lead .fml-pillartags { margin-top:18px; }
.fml-pillartags--sm { margin-top:14px; }
.fml-sit-card .fml-pillartags--sm { margin-top:auto; padding-top:14px; }
.fml-pillartag--sm { height:23px; padding:0 10px; font-size:11px; }

/* E-bjella */
.fml-btn--outline { background:transparent; border:1px solid var(--fm-border-strong); color:var(--fg-1); }
.fml-btn--outline:hover { background:var(--bg-2); border-color:var(--fm-teal); color:var(--fg-1); }

.fml-ebcrumb { padding:16px 40px; background:var(--bg-2); }
.fml-ebcrumb__inner { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-4); }
.fml-ebcrumb a { color:var(--fg-3); text-decoration:none; }
.fml-ebcrumb a:hover { color:var(--fm-teal-dark); }
.fml-ebcrumb__here { color:var(--fg-2); }

.fml-ebhero { padding:56px 40px 80px; }
.fml-ebhero__inner { display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.fml .fml-ebhero__label { color:var(--fm-teal); margin-bottom:14px; }
.fml-ebhero h1 { font-size:clamp(38px,5.2vw,62px); line-height:1.06; margin-bottom:20px; }
.fml-ebhero .fml-ebhero__lead { max-width:520px; margin-bottom:18px; font-size:19px; line-height:1.55; color:var(--fg-2); }
.fml-ebhero__sub { max-width:520px; font-size:16px; line-height:1.6; color:var(--fg-3); }
.fml-ebhero__ctas { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.fml-ebhero__media { position:relative; display:flex; align-items:center; justify-content:center; min-height:340px; }
/* The disc sits behind the trio, a ground for three cut-out photos that would
   otherwise float on the page. */
.fml-ebhero__disc { position:absolute; width:min(420px,92%); aspect-ratio:1; border:1px solid var(--fm-teal-40); border-radius:var(--radius-circle); background:var(--bg-2); }
.fml-ebhero__bells { position:relative; display:flex; align-items:flex-end; justify-content:center; width:100%; }
.fml-ebhero__bells img { display:block; width:32%; max-width:210px; height:auto; filter:drop-shadow(0 14px 22px rgba(0,20,18,0.14)); }
.fml-ebhero__bells img:nth-child(2) { position:relative; z-index:2; width:40%; max-width:260px; margin:0 -6%; filter:drop-shadow(0 18px 28px rgba(0,20,18,0.18)); }
.fml-ebhero__coord { position:absolute; right:8px; bottom:0; color:var(--fg-4); }

/* Hairlines as grid gaps rather than per-cell borders: the row keeps its rules
   when it wraps to three columns and then to one. */
.fml-ebfacts { border-top:1px solid var(--fm-border); border-bottom:1px solid var(--fm-border); background:var(--fm-border); }
.fml-ebfacts__grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; }
.fml-ebfact { display:flex; flex-direction:column; gap:8px; padding:26px 24px; background:var(--bg-2); }
.fml-ebfact > img { display:block; width:20px; height:20px; opacity:0.55; }
.fml-ebfact__title { font-size:14.5px; font-weight:var(--fw-medium); color:var(--fg-1); }
.fml-ebfact p { font-size:13px; line-height:1.5; color:var(--fg-3); }

.fml-ebcoverage { position:relative; overflow:hidden; padding:84px 40px; background:var(--fm-teal); color:#fff; }
.fml-ebcoverage__ring { position:absolute; top:-130px; right:-90px; width:360px; height:360px; border:1px solid rgba(255,255,255,0.2); border-radius:var(--radius-circle); }
.fml-ebcoverage__ring--sm { top:-60px; right:-20px; width:230px; height:230px; border-color:rgba(255,255,255,0.13); }
.fml-ebcoverage__inner { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.fml .fml-ebcoverage__label { color:rgba(255,255,255,0.72); margin-bottom:14px; }
.fml-ebcoverage h2 { margin-bottom:16px; font-size:32px; color:#fff; }
.fml-ebcoverage p { max-width:520px; font-size:16.5px; line-height:1.6; color:rgba(255,255,255,0.88); }
.fml-ebcoverage__steps { display:flex; flex-direction:column; gap:14px; }
.fml-ebstep { display:flex; align-items:flex-start; gap:16px; padding:20px; border:1px solid rgba(255,255,255,0.24); border-radius:var(--radius-lg); background:rgba(255,255,255,0.07); }
.fml-ebstep__icon { display:flex; flex:none; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-circle); background:rgba(255,255,255,0.14); }
.fml-ebstep__icon img { display:block; width:19px; height:19px; }
.fml-ebstep__title { margin-bottom:5px; font-size:15.5px; font-weight:var(--fw-medium); color:#fff; }
.fml-ebstep p { font-size:14px; line-height:1.55; color:rgba(255,255,255,0.82); }

.fml-ebpicker { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:34px; }
.fml-ebpicker__label { font-size:13.5px; color:var(--fg-3); }
.fml-ebpicker__chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.fml-ebchip { font:inherit; font-size:13.5px; padding:8px 16px; border:1px solid var(--fm-border-strong); border-radius:var(--radius-pill); background:#fff; color:var(--fg-2); cursor:pointer; transition:background var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard); }
.fml-ebchip:hover { border-color:var(--fm-teal); }
.fml-ebchip.is-active { border-color:var(--fm-teal); background:var(--fm-teal); color:#fff; }
.fml-ebchip:focus-visible { outline:2px solid var(--fm-teal); outline-offset:2px; }
.fml-ebpicker__note { max-width:620px; font-size:14px; line-height:1.55; color:var(--fg-3); text-align:center; }

.fml-ebmodels__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; }
/* One tone per model, mixed down for the photo ground and the pill so the three
   cards read as a set rather than three colour schemes. */
.fml-ebmodel { --tone:var(--fm-slate); position:relative; display:flex; flex-direction:column; border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; background:#fff; box-shadow:var(--shadow-1); transition:border-color var(--duration-base) var(--easing-standard), box-shadow var(--duration-base) var(--easing-standard); }
.fml-ebmodel--olive { --tone:var(--fm-olive); }
.fml-ebmodel--danger { --tone:var(--status-danger); }
.fml-ebmodel.is-recommended { border-color:var(--fm-teal); box-shadow:var(--shadow-3); }
.fml-ebmodel__rule { display:block; height:4px; background:var(--tone); }
.fml-ebmodel__photo { position:relative; display:flex; justify-content:center; overflow:hidden; padding:26px 26px 0; background:color-mix(in oklab, var(--tone) 10%, #fff); }
.fml-ebmodel__disc { position:absolute; bottom:-52px; left:50%; transform:translateX(-50%); width:230px; height:230px; border-radius:var(--radius-circle); background:color-mix(in oklab, var(--tone) 22%, #fff); }
.fml-ebmodel__photo img { position:relative; display:block; width:170px; height:auto; filter:drop-shadow(0 12px 18px rgba(31,33,36,0.14)); }
.fml-ebmodel__badge { position:absolute; top:18px; right:18px; padding:4px 11px; border-radius:var(--radius-pill); background:var(--fm-teal); color:#fff; font-size:11px; font-weight:var(--fw-medium); letter-spacing:0.06em; text-transform:uppercase; }
.fml-ebmodel__body { display:flex; flex:1; flex-direction:column; gap:13px; padding:24px 26px 28px; }
.fml-ebmodel__body h3 { font-size:23px; }
.fml-ebmodel__pill { display:inline-flex; align-self:flex-start; align-items:center; gap:9px; padding:8px 12px; border:1px solid color-mix(in oklab, var(--tone) 45%, #fff); border-radius:var(--radius-sm); background:color-mix(in oklab, var(--tone) 12%, #fff); }
.fml-ebmodel__pill em { font-family:var(--font-mono); font-style:normal; font-size:11.5px; letter-spacing:0.04em; color:var(--fg-1); }
.fml-ebmodel__dot { flex:none; width:8px; height:8px; border-radius:var(--radius-circle); background:var(--tone); }
.fml-ebmodel__body p { font-size:14.5px; line-height:1.6; color:var(--fg-2); }
.fml-ebmodel__traits { display:flex; flex-direction:column; gap:9px; margin:0; padding:13px 0 0; border-top:1px solid var(--fm-divider); list-style:none; }
.fml-ebmodel__traits li { position:relative; padding-left:16px; font-size:13.5px; line-height:1.5; color:var(--fg-2); }
.fml-ebmodel__traits li::before { content:''; position:absolute; top:7px; left:0; width:7px; height:7px; border-radius:var(--radius-circle); background:var(--tone); }
.fml-ebmodels__cta { display:flex; justify-content:center; margin-top:36px; }

.fml-ebdur { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.fml .fml-ebdur__label { color:var(--fm-teal); margin-bottom:12px; }
.fml-ebdur h2 { margin-bottom:16px; }
.fml-ebdur p { font-size:16.5px; line-height:1.6; color:var(--fg-2); }
.fml-ebdur p + p { margin-top:14px; }
.fml-ebdur__grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; background:var(--fm-border); }
.fml-ebdur__cell { display:flex; flex-direction:column; gap:9px; padding:24px; background:#fff; }
.fml-ebdur__cell img { display:block; width:20px; height:20px; opacity:0.55; }
.fml-ebdur__title { font-size:15px; font-weight:var(--fw-medium); color:var(--fg-1); }
.fml-ebdur__cell p { font-size:13.5px; line-height:1.5; color:var(--fg-3); }

.fml-ebspecs { border-top:1px solid var(--fm-border); }
.fml-ebspecs__inner { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.fml-ebspecs__media { margin:0; border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; background:#fff; box-shadow:var(--shadow-1); }
.fml-ebspecs__media img { display:block; width:100%; height:auto; }
.fml .fml-ebspecs__label { color:var(--fm-teal); margin-bottom:12px; }
.fml-ebspecs h2 { margin-bottom:22px; }
.fml-ebspecs__list { display:flex; flex-direction:column; margin:0; }
.fml-ebspec { display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid var(--fm-divider); }
.fml-ebspec dt { font-size:14.5px; color:var(--fg-3); }
.fml-ebspec dd { margin:0; font-size:14.5px; font-weight:var(--fw-medium); color:var(--fg-1); text-align:right; }

.fml-ebapproval__inner { max-width:720px; margin:0 auto; padding:0 40px; }
.fml-ebapproval .fm-overline { color:var(--fm-teal); margin-bottom:12px; }
.fml-ebapproval h2 { margin-bottom:16px; }
.fml-ebapproval p { font-size:16.5px; line-height:1.6; color:var(--fg-2); }

.fml-ebband { padding:76px 40px; background:var(--fg-1); color:#fff; }
.fml-ebband__inner { display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; }
.fml-ebband h2 { margin-bottom:12px; font-size:30px; color:#fff; }
.fml-ebband p { max-width:520px; font-size:16px; line-height:1.6; color:rgba(255,255,255,0.72); }
.fml-ebband__ctas { display:flex; flex-wrap:wrap; gap:12px; }

/* Responsive */
@media (max-width:1080px) {
  .fml-pillars { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .fml-aboutstory__grid, .fml-aboutdev__grid, .fml-aboutteam__gallery, .fml-callband__inner { grid-template-columns:1fr; }
  .fml-aboutstats__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:1020px) {
  .fml-system__intro { grid-template-columns:1fr; }
  .fml-system__flow { grid-template-columns:1fr 1fr; gap:18px 0; }
  .fml-flowstep + .fml-flowstep::before { display:none; }
  .fml-system__tools { grid-template-columns:1fr 1fr; }
}
@media (max-width:1240px) {
  .fml-header { position:relative; flex-wrap:wrap; gap:12px; padding:12px 20px; }
  .fml-actions .fml-lang { display:none; }
  .fml-lang-mobile { order:5; width:100%; }
  .fml-menu-toggle:checked ~ .fml-lang-mobile { display:flex; padding-top:4px; }
  .fml-menu-toggle:checked ~ .fml-lang-mobile .fml-lang { display:inline-flex; }
  .fml-nav { display:none; order:4; width:100%; }
  .fml-menu-toggle:checked ~ .fml-nav { display:block; }
  .fml-nav__list { flex-direction:column; align-items:stretch; gap:0; padding-top:8px; border-top:1px solid var(--fm-divider); margin-top:12px; }
  .fml-nav__list > li + li { border-top:1px solid var(--fm-divider); }
  .fml-nav a { display:block; padding:12px 2px; font-size:15px; }
  .fml-nav__list { align-items:stretch; height:auto; }
  .fml-nav .sub-menu { position:static; display:block; opacity:1; visibility:visible; transition:none; transform:none; pointer-events:auto; min-width:0; margin:0 0 10px; padding:0 0 0 14px; border:0; border-left:1px solid var(--fm-divider); border-radius:0; box-shadow:none; }
  .fml-nav .sub-menu > li > a, .fml-nav .sub-menu .sub-menu a { padding:9px 2px; font-size:14px; color:var(--fg-3); border-radius:0; }
  .fml-nav .sub-menu > li.menu-item-has-children > a { padding:12px 2px 4px; }
  .fml-nav .sub-menu > li { width:auto; }
  .fml-nav .sub-menu .sub-menu { margin:0; padding:0 0 0 12px; }
  .fml-nav .sub-menu .sub-menu .sub-menu { position:static; opacity:1; visibility:visible; pointer-events:auto; width:auto; margin:0; padding:0 0 0 12px; background:none; border:0; border-radius:0; box-shadow:none; }
  .fml-nav .menu-item-has-children > a::after { display:none; }
  .fml-nav .menu-item-has-children > a { display:block; }
  .fml-burger { display:flex; flex-direction:column; justify-content:center; gap:4px; width:44px; height:44px; padding:0 11px; order:3; flex:none; cursor:pointer; }
  .fml-burger span { display:block; height:1.5px; background:var(--fg-2); border-radius:2px; }
  .fml-actions { gap:10px; }
  .fml-btn { padding:0 14px; }
}
@media (max-width:860px) {
  .fml-header { padding:12px 20px; }
  .fml-pagehero { padding:56px 20px 48px; }
  .fml-pagehero.has-image { padding:76px 20px 68px; }
  .fml-band { padding:48px 20px; }
  .fml-hero { padding:96px 20px 76px; }
  .fml-section, .fml-vision, .fml-quote { padding-left:20px; padding-right:20px; }
  .fml-section { padding-top:64px; padding-bottom:64px; }
  .fml-news { grid-template-columns:1fr; }
  .fml-abouthero { min-height:460px; padding:96px 20px 44px; }
  .fml-aboutstats, .fml-aboutdev, .fml-callband { padding-left:20px; padding-right:20px; }
  .fml-aboutdev { padding-top:64px; padding-bottom:64px; }
  .fml-aboutportrait { margin-top:36px; }
  .fml-system__flow { grid-template-columns:1fr; padding:18px 16px; }
  .fml-flowstep { padding:6px 0; }
  .fml-system__tools { grid-template-columns:1fr; }
  .fml-system__intro { margin-bottom:36px; }
  .fml-offerform__row3 { grid-template-columns:1fr; }
  .fml-offerform__tiles { grid-template-columns:1fr 1fr; }
  .fml-offerform__cov { grid-template-columns:1fr; }
  .fml-offerform__head, .fml-offerform__group { padding-left:18px; padding-right:18px; }
  .fml-offerform__foot { padding-left:18px; padding-right:18px; }
  /* Shrink rather than run off the card: the coverage label is a long line. */
  .fml-offerform__labels span:first-child, .fml-offerform__labels span + span { flex:0 1 auto; min-width:0; }
  .fml-beitehero { min-height:auto; padding:0 20px; }
  .fml-beitehero__inner { padding:96px 0 56px; }
  .fml-beitevalues { padding:0 20px; }
  .fml-beitevalues__grid { grid-template-columns:1fr; }
  .fml-beitevalue { padding:26px 0; border-right:0; border-bottom:1px solid var(--fm-border); }
  .fml-beitevalue:last-child { border-bottom:0; }
  .fml-beitebasis, .fml-beitestatement__inner, .fml-beitetool, .fml-beiteperson, .fml-beitecontact__inner { grid-template-columns:1fr; gap:32px; }
  .fml-beitestatement, .fml-beitecontact { padding-left:20px; padding-right:20px; }
  .fml-beitetool__media { order:-1; }
  .fml-beitepull { margin-bottom:48px; }
  .fml-beitepull.has-image { grid-template-columns:1fr; gap:24px; }
  .fml-beitepull__image { max-width:220px; }
  .fml-customers__head { align-items:flex-start; margin-bottom:24px; }
  .fml-customers__foot { margin-top:24px; }
  .fml-article { padding-left:20px; padding-right:20px; }
  .fml-vision__inner { flex-direction:column; text-align:center; }
  .fml-vision__text { text-align:center; }
  .fml-pillars { grid-template-columns:1fr; }
  .fml-ext { grid-template-columns:1fr 1fr; }
  .fml-prods { flex-direction:column; }
  .fml-footer__grid { grid-template-columns:1fr; }
  .fml-cf7 .fml-form-row { grid-template-columns:1fr; }
}
@media (max-width:560px) { .fml-ext { grid-template-columns:1fr; } }
@media (max-width:1080px) {
  .fml-sit { grid-template-columns:1fr 1fr; }
  .fml-res { grid-template-columns:1fr 1fr; }
  .fml-earlier__inner { grid-template-columns:1fr; gap:40px; }
  .fml-offer__inner { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:860px) {
  .fml-sit, .fml-seasons, .fml-stories { grid-template-columns:1fr; }
  .fml-earlier { padding:64px 20px; }
  .fml-offer { padding:56px 20px; }
  .fml-compare__head { display:none; }
  .fml-compare__row { grid-template-columns:1fr; gap:10px; padding:20px 22px; }
  .fml-compare__row .fml-compare__topic { font-size:17px; }
  .fml-faq__item summary { padding:18px 20px; font-size:16px; }
  .fml-faq__item p { padding:0 20px 20px; }
}
@media (max-width:560px) { .fml-res { grid-template-columns:1fr; } }
@media (max-width:1080px) {
  .fml-health, .fml-push { grid-template-columns:1fr; gap:32px; }
  .fml-benefits { grid-template-columns:1fr 1fr; }
}
@media (max-width:860px) {
  .fml-benefits { grid-template-columns:1fr; }
  .fml-heroflag { flex-wrap:wrap; border-radius:var(--radius-lg); }
  .fml-example { padding:24px 22px; }
}
@media (max-width:1080px) {
  .fml-pillars { grid-template-columns:1fr 1fr; }
}
@media (max-width:860px) {
  .fml-pillars { grid-template-columns:1fr; }
  .fml-pillarvp { padding:56px 20px; }
  .fml-pillarvp__inner { flex-direction:column; gap:20px; }
  .fml-controls { grid-template-columns:1fr; }
}
@media (max-width:1080px) {
  .fml-ebfacts__grid { grid-template-columns:repeat(3,1fr); }
  .fml-ebmodels__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:860px) {
  .fml-ebcrumb { padding:14px 20px; }
  .fml-ebhero { padding:36px 20px 56px; }
  .fml-ebhero__inner { grid-template-columns:1fr; gap:36px; }
  .fml-ebhero__media { min-height:260px; }
  .fml-ebfacts__grid { grid-template-columns:1fr 1fr; }
  .fml-ebcoverage { padding:56px 20px; }
  .fml-ebcoverage__inner { grid-template-columns:1fr; gap:32px; }
  .fml-ebmodels__grid { grid-template-columns:1fr; }
  .fml-ebdur, .fml-ebspecs__inner { grid-template-columns:1fr; gap:32px; }
  /* The drawing leads on a narrow screen only if it follows the words it labels. */
  .fml-ebspecs__media { order:2; }
  .fml-ebapproval__inner { padding:0; }
  .fml-ebband { padding:56px 20px; }
  .fml-ebband__inner { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:560px) {
  .fml-ebfacts__grid { grid-template-columns:1fr; }
  .fml-ebdur__grid { grid-template-columns:1fr; }
  .fml-ebspec { flex-direction:column; gap:2px; }
  .fml-ebspec dd { text-align:left; }
}

/* Verdiforslag */
/* The wash is mixed from the brand teal rather than added as a token: the
   tokens file is an unmodified copy of the design system. */
.fml-vp { padding:88px 40px; background:color-mix(in oklab, var(--fm-teal) 6%, #fff); }
.fml-vp__inner { display:flex; flex-direction:column; gap:56px; }
.fml-vp__head { display:grid; grid-template-columns:1.1fr 0.9fr; gap:32px; align-items:end; }
.fml .fml-vp__label { color:var(--fm-teal); margin-bottom:14px; }
.fml-vp__head h2 { font-size:clamp(30px,4.2vw,46px); line-height:1.12; text-wrap:balance; }
.fml .fml-vp .fml-vp__sub { font-size:16.5px; line-height:1.6; color:var(--fg-3); }
.fml-vp__grid { display:grid; gap:1px; border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; background:var(--fm-border); }
.fml-vp__grid--1 { grid-template-columns:1fr; }
.fml-vp__grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fml-vp__grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.fml-vpcard { display:flex; flex-direction:column; gap:12px; padding:38px 34px 34px; background:#fff; }
.fml-vpcard__top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }
.fml-vpcard__top img { display:block; flex:none; width:26px; height:26px; }
.fml-vpcard__num { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-circle); background:var(--fm-teal-20); font-family:var(--font-mono); font-size:12px; font-weight:var(--fw-bold); letter-spacing:0.06em; color:var(--fg-1); }
.fml-vpcard h4 { font-size:22px; }
.fml-vpcard p { font-size:15.5px; line-height:1.6; color:var(--fg-2); }
/* Pinned to the foot so the tag rows line up across cards of unequal copy. */
.fml-vpcard__tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:26px; }
.fml-vptag { display:inline-flex; align-items:center; height:24px; padding:0 11px; border:1px solid var(--fm-teal-20); border-radius:var(--radius-pill); background:color-mix(in oklab, var(--fm-teal) 6%, #fff); color:var(--fm-teal-dark); font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; transition:background var(--duration-fast) var(--easing-standard); }
a.fml-vptag:hover { background:var(--fm-teal-20); color:var(--fm-teal-dark); }
.fml-vptag--olive { border-color:color-mix(in oklab, var(--fm-olive) 35%, #fff); background:color-mix(in oklab, var(--fm-olive) 12%, #fff); color:#4A5612; }
a.fml-vptag--olive:hover { background:color-mix(in oklab, var(--fm-olive) 22%, #fff); color:#4A5612; }
.fml-vptag--danger { border-color:color-mix(in oklab, var(--status-danger) 30%, #fff); background:var(--status-danger-bg); color:#9E2D1F; }
a.fml-vptag--danger:hover { background:color-mix(in oklab, var(--status-danger) 26%, #fff); color:#9E2D1F; }
.fml-vp__cta { display:flex; justify-content:center; }
.fml-vp__coord { display:flex; align-items:center; gap:14px; }
.fml-vp__coord span[aria-hidden] { flex:1; height:1px; background:var(--fm-border); }
@media (max-width:900px) {
  .fml-vp__head { grid-template-columns:1fr; align-items:start; }
  .fml-vp__grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .fml-vp { padding:56px 20px; }
  .fml-vp__inner { gap:36px; }
  .fml-vpcard { padding:30px 24px 26px; }
}
@media (max-width:620px) {
  .fml-vp__grid--2, .fml-vp__grid--4 { grid-template-columns:1fr; }
}

/* Species pages: the one-line band and the year table */
.fml-beiteplan { display:grid; grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr); gap:56px; align-items:start; }
.fml .fml-beiteplan__label { margin-bottom:14px; color:var(--fm-teal-darker); }
.fml-beiteplan h2 { margin-bottom:16px; font-size:clamp(26px, 3.2vw, 38px); line-height:1.12; }
.fml-beiteplan p { margin:0 0 16px; font-size:16.5px; line-height:1.65; color:var(--fg-2); }
.fml-beiteplan__media { margin:28px 0 0; overflow:hidden; border-radius:var(--radius-lg); }
.fml-beiteplan__media img { display:block; width:100%; height:380px; object-fit:cover; object-position:50% 72%; }
.fml-beiteplan .fml-howplan h4 { margin-bottom:4px; font-size:20px; }
@media (max-width:900px) { .fml-beiteplan { grid-template-columns:1fr; gap:32px; } }
.fml-beitesystem { padding-top:80px; padding-bottom:80px; border-top:1px solid var(--fm-border); background:#fff; }
.fml-beitesystem__inner { display:grid; grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr); gap:52px; }
.fml .fml-beitesystem .fm-overline { margin-bottom:14px; color:var(--fg-3); }
.fml-beitesystem h3 { font-size:26px; line-height:1.2; }
.fml-beitesystem__text { display:flex; flex-direction:column; gap:18px; }
.fml-beitesystem__text p { font-size:16.5px; line-height:1.65; color:var(--fg-2); }
@media (max-width:900px) { .fml-beitesystem__inner { grid-template-columns:1fr; gap:24px; } }
.fml-beiteline { padding:44px 40px; border-bottom:1px solid var(--fm-border); background:color-mix(in oklab, var(--fm-teal) 6%, #fff); }
.fml .fml-beiteline p { font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:clamp(20px,2.6vw,30px); line-height:1.3; color:var(--fm-teal-darker); text-wrap:balance; }
.fml-beiteyear__head { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:end; margin-bottom:44px; }
.fml .fml-beiteyear__label { color:var(--fm-teal); margin-bottom:14px; }
.fml-beiteyear__head h2 { margin-bottom:16px; }
.fml-beiteyear p { font-size:16.5px; line-height:1.65; color:var(--fg-2); }
.fml-beiteyear__table { border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; background:#fff; }
.fml-beiteyear__row { display:grid; grid-template-columns:150px minmax(0,1fr) minmax(0,1fr); gap:24px; padding:22px 24px; border-bottom:1px solid var(--fm-divider); }
.fml-beiteyear__row:last-of-type { border-bottom:0; }
.fml-beiteyear__row--head { padding:14px 24px; background:var(--bg-3); border-bottom:1px solid var(--fm-border); font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-3); }
.fml-beiteyear__period { font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.04em; color:var(--fg-3); }
.fml-beiteyear__name { margin-bottom:6px; font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:17px; color:var(--fg-1); }
.fml .fml-beiteyear__row p { font-size:14.5px; line-height:1.55; color:var(--fg-3); }
.fml .fml-beiteyear__gives { font-size:15px; color:var(--fg-2); }
.fml .fml-beiteyear__source { padding:18px 24px; border-top:1px solid var(--fm-divider); font-size:12.5px; line-height:1.55; color:var(--fg-4); }
@media (max-width:900px) {
  .fml-beiteyear__head { grid-template-columns:1fr; gap:20px; align-items:start; }
  .fml-beiteyear__row { grid-template-columns:1fr; gap:8px; }
  .fml-beiteyear__row--head { display:none; }
}
@media (max-width:860px) {
  .fml-beiteline { padding:32px 20px; }
}

/* Hero, photo variant (parts/hero-photo.php) */
/* The same height as parts/hero.php stands at, so swapping one block for the
   other leaves the rest of the page where it was. That hero is padding-driven
   and lands on 905px at every desktop width; this one carries less copy, so it
   takes the number directly — capped at the screen below the header, so on a
   laptop the buttons land on the fold rather than under an empty band. The copy
   still sets the floor: a short screen grows the hero rather than clipping it. */
.fml-herophoto { position:relative; display:flex; align-items:stretch; padding:0 40px; min-height:min(905px, calc(100svh - 68px)); overflow:hidden; isolation:isolate; background:var(--fg-1); text-align:left; --fml-gut:max(40px, calc((100% - 1100px) / 2)); }
/* `.fml img` sets height:auto with two classes, so this needs the same reach
   or the photo covers only the top of the section. */
.fml .fml-herophoto__img { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:58% 45%; }
/* Anchored to the copy column rather than the viewport, so the text keeps its
   ground once the column centres on a wide screen; the open side of the photo
   is left alone rather than dimmed flat. */
.fml-herophoto__scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(to right, rgba(16,30,28,0.68) 0, rgba(16,30,28,0.6) var(--fml-gut), rgba(16,30,28,0.34) calc(var(--fml-gut) + 560px), rgba(16,30,28,0) calc(var(--fml-gut) + 900px)); }
/* The same measure and gutter as .fml-section > .fml-wrap, so the headline
   starts on the line every section below it starts on. */
.fml-herophoto__inner { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:24px; width:100%; padding:40px 0 32px; }
.fml-herophoto h1 { max-width:14ch; font-size:clamp(36px,5vw,66px); line-height:1.06; color:#fff; text-shadow:0 2px 18px rgba(0,20,18,0.35); text-wrap:balance; }
.fml .fml-herophoto .fml-herophoto__sub { max-width:520px; font-size:clamp(17px,1.5vw,21px); line-height:1.5; color:rgba(255,255,255,0.94); }
/* The buttons sit at the foot of the column, whatever the copy above runs to. */
.fml-herophoto__ctas { display:flex; flex-wrap:wrap; gap:14px; margin-top:auto; padding-top:8px; }
.fml-herophoto .fml-btn--lg { height:54px; padding:0 28px; font-size:17px; }
.fml-herophoto .fml-btn--ghost { border-color:rgba(255,255,255,0.6); background:rgba(16,30,28,0.5); }
.fml-herophoto .fml-btn--ghost:hover { background:rgba(16,30,28,0.66); border-color:#fff; }
.fml .fml-herophoto__pill { gap:10px; margin:0; padding:8px 18px; border-color:rgba(255,255,255,0.34); background:none; }
.fml .fml-herophoto__pill em { font-size:14px; color:#fff; }
.fml-herophoto__dot { width:8px; height:8px; flex:none; border-radius:var(--radius-circle); background:#2FBFAE; }
@media (max-width:860px) {
  .fml-herophoto { padding:0 20px; min-height:min(840px, calc(100svh - 64px)); --fml-gut:20px; }
  /* One column wide, so a sideways scrim would flatten the whole photo:
     darken the bands the copy sits in and leave the middle alone. */
  .fml-herophoto__scrim { background:linear-gradient(180deg, rgba(16,30,28,0.6) 0%, rgba(16,30,28,0.34) 42%, rgba(16,30,28,0.3) 62%, rgba(16,30,28,0.66) 100%); }
  .fml-herophoto__inner { padding:32px 0 28px; }
}

/* ---------------------------------------------------------------------------
   Rovdyr
   The page is about a situation rather than an animal, so it borrows the
   species hero and centres it, and keeps its own sections below.
--------------------------------------------------------------------------- */
.fml-beitehero--center .fml-beitehero__inner { display:flex; flex-direction:column; align-items:center; text-align:center; padding:132px 0 104px; }
.fml-beitehero--center h1 { max-width:20ch; }
.fml-beitehero--center .fml-beitehero__sub { max-width:60ch; }
.fml-beitehero--center .fml-beitehero__scrim,
.fml-beitehero--center + .fml-beitehero__scrim { background:linear-gradient(180deg,rgba(20,26,25,0.44) 0%,rgba(20,26,25,0.5) 55%,rgba(20,26,25,0.6) 100%); }
.fml-beitehero--center .fml-beitehero__ctas { justify-content:center; }

/* The story: photograph and account side by side, the farmer's own sentences
   in a row beneath so they can be translated without touching the picture. */
.fml-rovstory { border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:#fff; overflow:hidden; }
.fml-rovstory__top { display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); align-items:stretch; }
.fml .fml-rovstory__img { display:block; width:100%; height:100%; min-height:340px; object-fit:cover; }
.fml-rovstory__body { padding:44px 44px 40px; }
.fml .fml-rovstory__meta { color:var(--fm-teal-dark); margin-bottom:12px; }
.fml-rovstory__body h3 { margin:0 0 18px; font-size:clamp(22px,2.4vw,28px); }
.fml-rovstory__body p { margin:0 0 14px; font-size:16px; line-height:1.6; color:var(--fg-2); }
.fml-rovstory__by { display:flex; align-items:center; gap:14px; margin-top:26px; padding-top:22px; border-top:1px solid var(--fm-divider); }
.fml-rovstory__by span { width:32px; height:1px; flex:none; background:var(--fm-border-strong); }
.fml-rovstory__by strong { display:block; font-size:15px; font-weight:var(--fw-medium); color:var(--fg-1); }
.fml-rovstory__by em { font-size:14px; color:var(--fg-3); }
.fml-rovstory__quotes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--fm-border); border-top:1px solid var(--fm-border); }
.fml-rovstory__quotes blockquote { margin:0; padding:30px 26px; background:var(--bg-2); }
.fml-rovstory__quotes p { margin:0; font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:18px; line-height:1.45; color:var(--fg-1); }

/* Three cards divided by rules rather than gaps: one surface, three columns. */
.fml-rovhelp { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--fm-border); border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; }
.fml-rovhelp__card { display:flex; flex-direction:column; gap:12px; padding:30px 26px 32px; background:#fff; }
.fml-rovhelp__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fml-rovhelp__icon { display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:var(--radius-circle); background:var(--fm-teal-20); }
.fml-rovhelp__icon img { width:21px; height:21px; display:block; }
.fml-rovhelp__num { font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; color:var(--fm-gray-40); }
.fml-rovhelp__card h4 { margin:0; }
.fml-rovhelp__card p { margin:0; font-size:14px; line-height:1.55; color:var(--fg-2); }

/* Copy beside a framed figure, with the caveat set as an advisory note. */
.fml-rovsplit { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
.fml .fml-rovsplit__label { color:var(--fm-teal); margin-bottom:12px; }
.fml-rovsplit h2 { margin:0 0 16px; }
.fml-rovsplit p { margin:0 0 16px; font-size:16px; line-height:1.6; color:var(--fg-2); }
.fml-rovnote { margin:0; padding:14px 16px; border:1px solid var(--status-warning); border-radius:var(--radius-sm); background:var(--status-warning-bg); font-size:14px; line-height:1.55; color:#6F4E0C; }
.fml-rovfigure { margin:0; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-1); overflow:hidden; }
.fml .fml-rovfigure img { display:block; width:100%; height:auto; }
.fml-rovfigure figcaption { padding:16px 20px; border-top:1px solid var(--fm-divider); font-size:13.5px; line-height:1.55; color:var(--fg-3); }

/* Edge to edge: the photograph holds one half of the band, the list the other. */
.fml-rovwatch { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; background:var(--bg-2); border-top:1px solid var(--fm-border); border-bottom:1px solid var(--fm-border); }
.fml-rovwatch__media { min-height:420px; background:var(--bg-3) center/cover no-repeat; }
.fml-rovwatch__body { display:flex; flex-direction:column; justify-content:center; padding:72px 48px; }
.fml .fml-rovwatch__label { color:var(--fm-teal); margin-bottom:12px; }
.fml-rovwatch__body h2 { margin:0 0 16px; }
.fml-rovwatch__body > p { margin:0 0 22px; font-size:16px; line-height:1.6; color:var(--fg-2); }
.fml-rovwatch__points { display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; }
.fml-rovwatch__points li { display:flex; align-items:flex-start; gap:10px; }
.fml-rovwatch__points img { width:16px; height:16px; flex:none; margin-top:4px; display:block; }
.fml-rovwatch__points span { font-size:15px; line-height:1.55; color:var(--fg-2); }

/* What we put together afterwards, on a darkened photograph. */
.fml-rovsupport { position:relative; padding:0 40px; overflow:hidden; background:var(--fg-1); }
.fml-rovsupport__bg { position:absolute; inset:0; background:var(--fg-1) center/cover no-repeat; }
.fml-rovsupport__scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(45,48,51,0.72) 0%,rgba(35,38,41,0.78) 100%); }
.fml-rovsupport__ring { position:absolute; top:-120px; right:-90px; width:340px; height:340px; border:1px solid rgba(255,255,255,0.2); border-radius:var(--radius-circle); }
.fml-rovsupport__inner { position:relative; padding:96px 0; }
.fml-rovsupport__head { max-width:640px; margin-bottom:46px; }
.fml .fml-rovsupport__label { color:#fff; margin-bottom:12px; }
.fml-rovsupport__head h2 { margin:0 0 14px; color:#fff; }
.fml-rovsupport__head p { margin:0; font-size:17px; line-height:1.6; color:rgba(255,255,255,0.9); }
.fml-rovsupport__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.fml-rovcard { display:flex; flex-direction:column; gap:10px; padding:24px; border:1px solid rgba(255,255,255,0.22); border-radius:var(--radius-lg); background:rgba(31,33,36,0.42); }
.fml-rovcard__num { font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; color:rgba(255,255,255,0.6); }
.fml-rovcard h4 { margin:0; font-size:17px; color:#fff; }
.fml-rovcard p { margin:0; font-size:14px; line-height:1.55; color:rgba(255,255,255,0.86); }

/* The closing card: one button, and the address for those who would rather write. */
.fml-rovcontact { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center; padding:40px; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:#fff; }
.fml-rovcontact h3 { margin:0 0 10px; }
.fml-rovcontact p { margin:0; max-width:560px; font-size:15.5px; line-height:1.6; color:var(--fg-2); }
.fml-rovcontact__actions { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.fml-rovcontact__mail { font-size:14px; color:var(--fm-teal-dark); text-decoration:none; }
.fml-rovcontact__mail:hover { text-decoration:underline; }

@media (max-width:900px) {
  .fml-rovstory__top { grid-template-columns:1fr; }
  .fml-rovstory__body { padding:32px 26px 30px; }
  .fml-rovstory__quotes { grid-template-columns:1fr; }
  .fml-rovhelp { grid-template-columns:1fr; }
  .fml-rovsplit { grid-template-columns:1fr; gap:32px; }
  .fml-rovwatch { grid-template-columns:1fr; }
  .fml-rovwatch__media { min-height:260px; }
  .fml-rovwatch__body { padding:44px 20px; }
  .fml-rovsupport { padding:0 20px; }
  .fml-rovsupport__inner { padding:64px 0; }
  .fml-rovsupport__grid { grid-template-columns:1fr; }
  .fml-rovcontact { grid-template-columns:1fr; padding:28px 24px; }
  .fml-beitehero--center .fml-beitehero__inner { padding:104px 0 72px; }
}

/* ---------------------------------------------------------------------------
   Beitehistorier — a single story
--------------------------------------------------------------------------- */
.fml-storyhero { position:relative; display:flex; align-items:flex-end; min-height:440px; padding:0 40px; overflow:hidden; background:var(--fg-1); }
.fml-storyhero__bg { position:absolute; inset:0; background:var(--fg-1) center 45%/cover no-repeat; }
.fml-storyhero__scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(31,33,36,0) 30%,rgba(31,33,36,0.62) 72%,rgba(31,33,36,0.84) 100%),linear-gradient(180deg,rgba(0,0,0,0.04) 0%,rgba(0,0,0,0.16) 100%); }
.fml-storyhero__inner { position:relative; width:100%; padding:96px 0 48px; }
.fml-storyhero__crumbs { display:flex; align-items:center; gap:12px; margin-bottom:20px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:#fff; }
.fml-storyhero__crumbs i { width:22px; height:1px; background:rgba(255,255,255,0.4); }
.fml-storyhero__crumbs span:last-child { color:rgba(255,255,255,0.85); }
.fml-storyhero h1 { max-width:20ch; margin:0 0 20px; font-size:clamp(34px,5.2vw,58px); line-height:1.06; color:#fff; }
.fml-storyhero__sub { max-width:62ch; margin:0; font-size:19px; line-height:1.55; color:#fff; }
.fml-storyhero__meta { margin:26px 0 0; font-size:14px; color:rgba(255,255,255,0.86); }

/* The heading rule: what this is on the left, who it is about on the right. */
.fml-storyrule { display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.fml .fml-storyrule .fm-overline { color:var(--fm-teal); margin:0; }
.fml-storyrule i { flex:1; height:1px; background:var(--fm-border); }
.fml-storyrule__name { font-family:var(--font-mono); font-size:14px; font-weight:var(--fw-bold); letter-spacing:0.08em; text-transform:uppercase; color:var(--fm-teal-dark); }

.fml-storypair { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:stretch; }
.fml-storypair + .fml-storypair { margin-top:24px; }
.fml-storypair__media { display:flex; margin:0; }
.fml .fml-storypair__media img { display:block; width:100%; height:100%; min-height:360px; object-fit:cover; border-radius:var(--radius-lg); }
.fml-storypair__body { display:flex; flex-direction:column; justify-content:center; }
.fml-storypair__body h2 { margin:0 0 16px; font-size:clamp(24px,2.7vw,32px); line-height:1.2; }
.fml-storypair__body p { margin:0 0 14px; font-size:16.5px; line-height:1.6; color:var(--fg-2); }
.fml-storypair__by { margin-top:16px; font-size:14px; color:var(--fg-3); }
.fml-storyquote { display:flex; flex-direction:column; justify-content:center; padding:36px 34px; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:var(--bg-2); }
.fml-storyquote blockquote { margin:0; }
.fml-storyquote blockquote p { margin:0 0 14px; font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:clamp(20px,2.3vw,27px); line-height:1.32; color:var(--fg-1); }
.fml-storyquote .fml-storypair__by { margin:0 0 18px; }
.fml-storyquote > p { margin:0; font-size:16px; line-height:1.6; color:var(--fg-2); }

/* What the sensors report: four cards, description then what to do about it. */
.fml-storysignals { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--fm-border); border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; }
.fml-storysignal { display:flex; flex-direction:column; gap:12px; padding:28px 24px; background:#fff; }
.fml-storysignal__top { display:flex; align-items:center; justify-content:space-between; }
/* The app's own map pin, shown as the app draws it rather than tucked into a
   teal disc: the card explains the marker the farmer is looking at. */
.fml .fml-storysignal__pin { display:block; width:40px; height:auto; flex:none; }
.fml-storysignal__num { font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; color:var(--fm-gray-40); }
.fml-storysignal h3 { margin:0; font-size:19px; }
.fml-storysignal p { margin:0; font-size:14.5px; line-height:1.55; color:var(--fg-2); }
.fml-storysignal__note { font-size:14px; color:var(--fg-3); }
.fml-storyfoot { display:flex; align-items:flex-start; gap:9px; margin:18px 0 0; font-size:13.5px; color:var(--fg-3); }
.fml-storyfoot img { width:15px; height:15px; flex:none; margin-top:2px; display:block; }

/* Why stillness is worth an alert. */
.fml-storywhy { display:grid; grid-template-columns:1.35fr 1fr; gap:56px; align-items:start; }
.fml .fml-storywhy__label { color:var(--fm-teal); margin-bottom:14px; }
.fml-storywhy h2 { margin:0 0 18px; font-size:clamp(26px,3vw,34px); line-height:1.18; }
.fml-storywhy p { margin:0 0 16px; font-size:17px; line-height:1.62; color:var(--fg-2); }
.fml-storywhy__figure { margin:0; }
.fml .fml-storywhy__figure img { display:block; width:100%; height:auto; border-radius:var(--radius-lg); }
.fml-storywhy__figure figcaption { margin-top:10px; font-size:13px; color:var(--fg-3); }

/* One morning, step by step. */
.fml-storytime { max-width:880px; }
.fml-storytime__head { margin-bottom:38px; }
.fml .fml-storytime__label { color:var(--fm-teal); margin-bottom:12px; }
.fml-storytime__head h2 { margin:0 0 10px; font-size:clamp(26px,3vw,34px); }
.fml-storytime__head p { margin:0; max-width:60ch; font-size:16px; color:var(--fg-3); }
.fml-storystep { display:grid; grid-template-columns:86px 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--fm-border); }
.fml-storytime__rows .fml-storystep:last-child { border-bottom:1px solid var(--fm-border); }
.fml-storystep__time { font-family:var(--font-mono); font-size:15px; color:var(--fm-teal-dark); }
.fml-storystep h3 { margin:0 0 6px; font-size:18px; }
.fml-storystep p { margin:0; font-size:15.5px; line-height:1.55; color:var(--fg-2); }
.fml-storypush { display:flex; align-items:center; gap:12px; max-width:440px; margin-top:12px; padding:14px 16px; border:1px solid #E8C9C3; border-radius:var(--radius-md); background:#fff; box-shadow:var(--shadow-2); }
.fml .fml-storypush__mark { width:30px; height:30px; flex:none; display:block; padding:5px; border-radius:6px; background:var(--fm-teal); }
.fml-storypush__app { display:block; margin-bottom:3px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-4); }
.fml-storypush strong { font-size:14.5px; font-weight:var(--fw-medium); color:var(--fg-1); }
.fml-storybadge { display:inline-flex; align-items:center; margin-top:10px; padding:5px 11px; border-radius:var(--radius-pill); background:var(--bg-3); font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-3); }

/* The same flock in the app: legend, map, and the walk out. */
.fml-storyapp__head { max-width:60ch; margin-bottom:40px; }
.fml .fml-storyapp__label { color:var(--fm-teal); margin-bottom:12px; }
.fml-storyapp__head h2 { margin:0 0 16px; font-size:clamp(26px,3vw,34px); }
.fml-storyapp__head p { margin:0; font-size:17px; line-height:1.62; color:var(--fg-2); }
.fml-storyapp { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:28px; align-items:start; }
.fml-storyapp__col { display:flex; flex-direction:column; gap:14px; }
.fml-storyapp__step { font-family:var(--font-mono); font-size:14px; font-weight:var(--fw-bold); letter-spacing:0.08em; text-transform:uppercase; color:var(--fm-teal-dark); }
.fml-storyapp__note { margin:0; font-size:14px; line-height:1.55; color:var(--fg-2); }
.fml-storyalarms { display:grid; margin:0; padding:0; list-style:none; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:#fff; overflow:hidden; }
.fml-storyalarms li { display:flex; align-items:center; gap:12px; padding:13px 14px; }
.fml-storyalarms li + li { border-top:1px solid var(--fm-divider); }
.fml .fml-storyalarms img { width:26px; height:auto; flex:none; display:block; }
.fml-storyalarms strong { display:block; font-size:14.5px; font-weight:var(--fw-regular); color:var(--fg-1); }
.fml-storyalarms span { font-size:13px; line-height:1.45; color:var(--fg-3); }
/* The three columns line up on one height, so the legend, the phone and the
   photograph read as one row rather than three of different lengths. */
.fml-storyapp__phone { display:flex; justify-content:center; height:480px; padding:7px; border:1px solid var(--fm-border); border-radius:22px; background:#fff; box-shadow:var(--shadow-2); }
.fml .fml-storyapp__phone img { display:block; width:auto; max-width:100%; height:100%; object-fit:contain; border-radius:16px; }
.fml .fml-storyapp__photo { display:block; width:100%; height:480px; object-fit:cover; border:1px solid var(--fm-border); border-radius:var(--radius-lg); }

/* Three settings, as rows: the choice on the left, what it is set to on the right. */
.fml-storyset { max-width:880px; }
.fml-storyset__head { margin-bottom:32px; }
.fml .fml-storyset__label { color:var(--fm-teal); margin-bottom:12px; }
.fml-storyset__head h2 { margin:0 0 10px; font-size:clamp(26px,3vw,34px); }
.fml-storyset__head p { margin:0; max-width:60ch; font-size:16px; color:var(--fg-3); }
.fml-storyset__rows { border:1px solid var(--fm-border); border-radius:var(--radius-lg); overflow:hidden; }
.fml-storyset__row { display:flex; align-items:center; gap:16px; padding:20px 22px; background:#fff; }
.fml-storyset__row + .fml-storyset__row { border-top:1px solid var(--fm-divider); }
.fml-storyset__icon { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:var(--radius-circle); background:var(--fm-teal-20); }
.fml-storyset__icon img { width:18px; height:18px; display:block; }
.fml-storyset__row > div { flex:1; }
.fml-storyset__row strong { display:block; margin-bottom:3px; font-size:16px; font-weight:var(--fw-regular); color:var(--fg-1); }
.fml-storyset__row span { font-size:14px; color:var(--fg-3); }
.fml-storyset__value { flex:none; padding:5px 11px; border-radius:var(--radius-pill); background:var(--fm-teal-20); font-family:var(--font-mono); font-style:normal; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--fm-teal-dark); }

/* The closing band, on teal. */
.fml-storycta { position:relative; padding:80px 40px; overflow:hidden; background:var(--fm-teal); }
.fml-storycta__ring { position:absolute; bottom:-140px; left:-60px; width:360px; height:360px; border:1px solid rgba(255,255,255,0.18); border-radius:var(--radius-circle); }
.fml-storycta__inner { position:relative; max-width:720px; text-align:center; }
.fml-storycta h2 { margin:0 0 14px; font-size:clamp(26px,3.2vw,36px); color:#fff; }
.fml-storycta p { margin:0 auto 30px; max-width:54ch; font-size:17px; line-height:1.6; color:rgba(255,255,255,0.9); }
.fml-storycta__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.fml-storycta .fml-btn--ghost { border-color:rgba(255,255,255,0.45); color:#fff; }
.fml-storycta .fml-btn--ghost:hover { background:rgba(255,255,255,0.12); }

@media (max-width:900px) {
  .fml-storyhero { padding:0 20px; }
  .fml-storyhero__inner { padding:80px 0 40px; }
  .fml-storypair, .fml-storywhy { grid-template-columns:1fr; gap:28px; }
  .fml-storysignals { grid-template-columns:1fr 1fr; }
  .fml-storycta { padding:64px 20px; }
}

@media (max-width:620px) {
  .fml-storysignals { grid-template-columns:1fr; }
  .fml-storystep { grid-template-columns:1fr; gap:6px; }
  .fml .fml-storypair__media img { min-height:240px; }
}

/* The app section keeps its own ground so it reads apart from the tinted
   section above it. */
.fml-storyappsec { background:var(--bg-3); }

/* ---------------------------------------------------------------------------
   The offer form as Contact Form 7 renders it
   The fields are the theme's own markup (inc/offer-cf7.php), so what is left is
   CF7's wrappers, its validation tips and its response line.
--------------------------------------------------------------------------- */
/* CF7 wraps every control; the tiles and the coverage cards have to stay direct
   children of their grid for the layout to hold. */
.fml-offerform__tiles > .wpcf7-form-control-wrap,
.fml-offerform .fml-field > .wpcf7-form-control-wrap,
.fml-offerform .fml-count > .wpcf7-form-control-wrap { display:contents; }
.fml-offerform__cf7 .fml-offerform__group + .fml-offerform__group { padding-top:18px; }
/* The label text in a CF7 template sits in a span, not a <label> of its own. */
.fml-offerform__cf7 .fml-field { display:block; margin:0 0 12px; }
.fml-offerform__cf7 .fml-field > span:first-child { display:block; margin-bottom:5px; font-size:13px; font-weight:var(--fw-medium); color:var(--fg-2); }
.fml-offerform__cf7 .fml-field em { font-style:normal; font-weight:400; color:var(--fg-4); }
.fml-offerform__cf7 .fml-field input, .fml-offerform__cf7 .fml-field textarea { width:100%; box-sizing:border-box; padding:0 12px; height:44px; border:1px solid var(--fm-border-strong); border-radius:var(--radius-sm); font:inherit; font-size:15px; color:var(--fg-1); background:#fff; outline:none; transition:border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard); }
.fml-offerform__cf7 .fml-field textarea { height:auto; padding:10px 12px; line-height:1.5; resize:vertical; }
.fml-offerform__cf7 .fml-field input:focus, .fml-offerform__cf7 .fml-field textarea:focus { border-color:var(--fm-teal); box-shadow:0 0 0 3px var(--fm-teal-20); }
/* CF7's own messages, in the wording the rest of the form uses: red, with an
   alert icon, so a missing answer is hard to scroll past. */
.fml-offerform__cf7 { --fml-invalid:var(--status-danger); --fml-invalid-ink:#9E2D1F; --fml-invalid-wash:color-mix(in oklab, var(--status-danger-bg) 45%, #fff); --fml-invalid-halo:0 0 0 3px color-mix(in oklab, var(--status-danger) 22%, transparent); }
.fml-offerform__cf7 .wpcf7-not-valid-tip { display:flex; align-items:center; gap:6px; margin:8px 0 0; font-size:13px; font-weight:var(--fw-medium); line-height:1.4; color:var(--fml-invalid-ink); }
.fml-offerform__cf7 .wpcf7-not-valid-tip::before { content:""; flex:none; width:14px; height:14px; background:currentColor; -webkit-mask:url(../icons/triangle-alert-tealdark.svg) center/contain no-repeat; mask:url(../icons/triangle-alert-tealdark.svg) center/contain no-repeat; }
.fml-offerform__cf7 .fml-tile .wpcf7-not-valid-tip, .fml-offerform__cf7 .fml-cov .wpcf7-not-valid-tip { display:none; }
.fml-offerform__cf7 .fml-offerform__tilewrap > .wpcf7-not-valid-tip,
.fml-offerform__cf7 .fml-offerform__cov > .wpcf7-not-valid-tip { grid-column:1 / -1; }

/* The field with a problem: its label turns red and the control gets a red
   edge and a light wash. Tiles and coverage cards get a halo instead of a red
   border — the cards' borders already carry the coverage colour. */
.fml-offerform__cf7 .fml-field:has(.wpcf7-not-valid-tip) > span:first-child,
.fml-offerform__cf7 .fml-offerform__group:has(.fml-offerform__tilewrap > .wpcf7-not-valid-tip) .fml-offerform__labels span:first-child,
.fml-offerform__cf7 .fml-offerform__group:has(.fml-offerform__cov > .wpcf7-not-valid-tip) .fml-offerform__labels span { color:var(--fml-invalid-ink); }
.fml-offerform__cf7 .fml-field .wpcf7-not-valid { border-color:var(--fml-invalid); background:var(--fml-invalid-wash); }
.fml-offerform__cf7 .fml-field .wpcf7-not-valid:focus { border-color:var(--fml-invalid); box-shadow:var(--fml-invalid-halo); }
.fml-offerform__cf7 .fml-offerform__tilewrap:has(> .wpcf7-not-valid-tip) .fml-tile { border-color:var(--fml-invalid); box-shadow:var(--fml-invalid-halo); }
.fml-offerform__cf7 .fml-offerform__cov:has(> .wpcf7-not-valid-tip) .fml-cov { box-shadow:var(--fml-invalid-halo); }

/* The line under the button: amber for a send that failed, red with the list of
   fields to fix when the form was not filled in. */
.fml-offerform__cf7 .wpcf7-response-output { margin:16px 26px 0; padding:11px 14px; border:1px solid var(--status-warning); border-radius:var(--radius-sm); background:var(--status-warning-bg); font-size:13.5px; line-height:1.5; color:#8A6212; }
.fml-offerform__cf7 form.invalid .wpcf7-response-output { border-color:var(--fml-invalid); background:var(--fml-invalid-wash); color:var(--fml-invalid-ink); }
.fml-offerform__cf7 form.sent .wpcf7-response-output { border-color:var(--fm-teal); background:var(--fm-teal-20); color:var(--fm-teal-darker); }
.fml-offerform__missing { display:block; margin-top:2px; font-weight:var(--fw-bold); }
.fml-offerform__cf7 .wpcf7-spinner { margin:0 0 0 10px; }
.fml-offerform__cf7 .fml-offerform__foot { margin-top:18px; }

/* ── Subscription: calculator and tier table ──────────────────────────────
   Colours are the FindMy design system's own values (tailwind_tokens.css in
   the Claude Design project), which differ slightly from this theme's older
   tokens: blue = Blå, olive = Grønn, danger = Rød, and the teal 5% wash
   behind the total. */
.fml-tone--blue   { --tone:hsl(210 70% 50%);     --tone-soft:hsl(205 80% 91%);         --tone-ink:hsl(210 70% 30%); }
.fml-tone--olive  { --tone:var(--fm-olive);      --tone-soft:hsl(72 50% 88%);          --tone-ink:hsl(70 68% 20%); }
.fml-tone--danger { --tone:hsl(7 64% 46%);       --tone-soft:hsl(10 76% 90%);          --tone-ink:hsl(9 68% 28%); }

.fml-section--tight { padding-top:8px; }
.fml-head--start { text-align:left; margin-left:0; max-width:660px; margin-bottom:28px; }

.fml-subcalc { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }
.fml-subcalc__models { flex:1.4 1 460px; display:flex; flex-direction:column; gap:20px; min-width:0; }
.fml-subcalc__model { display:flex; flex-direction:column; gap:18px; padding:24px 26px; border-radius:var(--radius-lg); background:var(--tone-soft); color:var(--tone-ink); }
.fml-subcalc__dim { transition:opacity var(--duration-fast) var(--easing-standard); }
.fml-subcalc__model.is-empty .fml-subcalc__dim { opacity:.45; }
.fml-subcalc__top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.fml-subcalc__top h3 { font-size:22px; color:var(--tone-ink); }
.fml-subcalc__top p { margin-top:4px; font-size:14px; }
.fml-subcalc__year { text-align:right; }
.fml-subcalc__year strong { display:block; font-family:var(--font-mono); font-size:20px; font-weight:400; color:var(--fg-1); }
.fml-subcalc__fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px; }
.fml-subcalc__field { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:var(--fw-medium); }
.fml-subcalc__field > label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fml-subcalc__note { font-size:13px; line-height:1.45; }
.fml-subcalc__meta { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13px; }

.fml-stepper { display:flex; height:44px; border-radius:var(--radius-sm); overflow:hidden; background:#fff; transition:box-shadow var(--duration-fast) var(--easing-standard); }
.fml-stepper:focus-within { box-shadow:0 0 0 2px var(--fm-teal); }
.fml-subcalc__model.is-empty .fml-stepper:has(input[name=qty]) { box-shadow:inset 0 0 0 2px var(--fm-teal); }
.fml-stepper button { flex:none; width:44px; border:0; background:transparent; font:inherit; font-size:20px; color:var(--fg-1); cursor:pointer; }
.fml-stepper button:hover { background:var(--bg-3); }
.fml-stepper input { flex:1; min-width:0; border:0; text-align:center; font-family:var(--font-mono); font-size:17px; color:var(--fg-1); background:transparent; outline:none; -moz-appearance:textfield; }
.fml-stepper input::-webkit-inner-spin-button, .fml-stepper input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

.fml-subcalc__sum { flex:1 1 340px; max-width:420px; box-sizing:border-box; position:sticky; top:88px; display:flex; flex-direction:column; gap:22px; min-width:0; padding:28px 24px; border-radius:var(--radius-lg); background:hsl(173 36% 96%); }
.fml-subcalc__sum h2 { margin-bottom:16px; font-size:34px; }
.fml-subcalc__sum h4 { font-size:16px; }
.fml-subcalc__totalwrap { container-type:inline-size; }
.fml-subcalc__total { font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:clamp(44px, var(--fs, 22cqi), 84px); line-height:1; letter-spacing:-0.02em; white-space:nowrap; color:var(--fm-teal-dark); }
.fml-subcalc__total span { font-size:0.4em; letter-spacing:0; }
.fml-subcalc__permonth { margin-top:6px; font-size:18px; font-weight:var(--fw-medium); color:var(--fg-1); }
.fml-subcalc__peryear { margin-top:4px; font-size:14px; color:hsl(176 100% 20%); }
.fml-subcalc__peryear span { font-family:var(--font-mono); }
.fml-subcalc__row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid rgba(0,140,128,0.15); font-size:15px; color:var(--fg-1); }
.fml-subcalc__row[hidden] { display:none; }
.fml-subcalc__row small { display:block; margin-top:1px; font-size:12px; color:var(--fg-3); }
.fml-subcalc__rowname { flex:1; }
.fml-subcalc__rowqty { font-size:14px; color:var(--fg-3); text-align:right; }
.fml-subcalc__rowqty small { margin-top:0; font-family:var(--font-mono); }
.fml-subcalc__row--all { border-bottom:0; font-weight:var(--fw-medium); }
.fml-subcalc__row--all[hidden] { display:none; }
.fml-subcalc__amount { font-family:var(--font-mono); white-space:nowrap; text-align:right; }
.fml-subcalc__amount--col { min-width:110px; }
.fml-subcalc__yearsub { display:flex; flex-direction:column; gap:2px; font-size:13px; }
.fml-subcalc__yearsub small { font-size:12px; }
.fml-subcalc__yearsub [data-out=year] { font-family:var(--font-mono); }
.fml-subcalc__yearsub[hidden], .fml-subcalc__none[hidden] { display:none; }
.fml-subcalc__listhead { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:4px; }
.fml-subcalc__listhead h4 { margin:0; }
/* The cost breakdown folds away; the sums below it stay visible. */
.fml-subcalc__details > summary { list-style:none; cursor:pointer; margin-bottom:0; padding:4px 0; border-bottom:1px solid rgba(0,140,128,0.15); }
.fml-subcalc__details > summary::-webkit-details-marker { display:none; }
.fml-subcalc__details > summary h4 { flex:1; }
.fml-subcalc__details > summary img { width:16px; height:16px; flex:none; align-self:center; transition:transform var(--duration-fast) var(--easing-standard); }
.fml-subcalc__details[open] > summary img { transform:rotate(180deg); }
.fml-subcalc__details > summary:focus-visible { outline:2px solid var(--fm-teal); outline-offset:2px; border-radius:2px; }
.fml-subcalc__listhead span { font-size:12px; color:var(--fg-3); }
.fml-subcalc__none { padding:11px 0; font-size:14px; color:var(--fg-3); }
.fml-subcalc__custom { margin:0; padding:11px 14px; border-radius:var(--radius-sm); background:var(--status-info-bg); font-size:14px; line-height:1.45; color:#3D5566; }
.fml-subcalc__custom[hidden] { display:none; }

.fml-subtiers { overflow-x:auto; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:#fff; }
.fml-subtiers table { width:100%; min-width:460px; border-collapse:collapse; font-size:15px; }
.fml-subtiers th, .fml-subtiers td { padding:12px 20px; text-align:right; font-family:var(--font-mono); font-weight:400; color:var(--fg-1); }
.fml-subtiers thead th { padding-top:14px; padding-bottom:14px; font-family:var(--font-sans); font-size:14px; font-weight:var(--fw-medium); color:var(--fg-3); }
.fml-subtiers th:first-child { text-align:left; }
.fml-subtiers tbody th, .fml-subtiers tbody td { border-top:1px solid var(--fm-divider); }
.fml-subtiers td { transition:background var(--duration-fast) var(--easing-standard); }
.fml-subtiers td.is-mine { background:rgba(0,140,128,0.12); font-weight:var(--fw-bold); }
.fml-subtiers__note { margin-top:14px; font-size:14px; color:var(--fg-3); }

.fml-subbuild__parts { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:1px; overflow:hidden; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:var(--fm-border); }
.fml-subbuild__part { display:flex; flex-direction:column; gap:10px; padding:26px; background:#fff; }
.fml-subbuild__part p { font-size:14px; line-height:1.55; }
.fml-subbuild__who { font-family:var(--font-mono); font-size:12px; color:var(--fg-3); }
.fml-subbuild__price { margin-top:auto; font-family:var(--font-mono); font-size:14px; color:var(--fg-1); }
.fml-subbuild__price span { display:block; margin-top:2px; font-family:var(--font-sans); font-size:12px; color:var(--fg-3); }
.fml-subbuild__example { display:flex; flex-wrap:wrap; gap:32px; margin-top:40px; padding:clamp(20px, 3vw, 32px); border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:#fff; }
.fml-subbuild__text { flex:1 1 260px; display:flex; flex-direction:column; gap:14px; }
.fml-subbuild__text p { font-size:15px; line-height:1.55; }
.fml-subbuild__sum { border-top:1px solid var(--fm-divider); font-size:14px; }
.fml-subbuild__sum > div { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--fm-divider); }
.fml-subbuild__sum > div > span:last-child { font-family:var(--font-mono); color:var(--fg-1); white-space:nowrap; }
.fml-subbuild__sum > .is-total { padding-top:12px; border-bottom:0; font-weight:var(--fw-medium); color:var(--fg-1); }
.fml-subbuild__sum > .is-year { padding:4px 0 0; border-bottom:0; font-size:13px; color:var(--fg-3); }
.fml-subbuild__sum > .is-year > span:last-child { color:inherit; }
.fml-subbuild__chart { flex:2 1 420px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.fml-subbuild__bar-head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.fml-subbuild__toggle { display:inline-flex; padding:3px; border-radius:var(--radius-md); background:var(--bg-3); }
.fml-subbuild__toggle button { height:32px; padding:0 14px; border:0; border-radius:var(--radius-sm); background:transparent; font:inherit; font-size:14px; color:var(--fg-3); cursor:pointer; }
.fml-subbuild__toggle button[aria-pressed=true] { background:#fff; color:var(--fg-1); box-shadow:var(--shadow-1); }
.fml-subbuild__legend { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13px; }
.fml-subbuild__legend > span { display:flex; align-items:center; gap:8px; }
.fml-subbuild__legend i, .fml-subbuild__bar i { display:block; background:var(--fm-teal); }
.fml-subbuild__legend i { width:12px; height:12px; border-radius:2px; }
.fml-subbuild__legend i.is-data, .fml-subbuild__bar i.is-data { background:hsl(210 70% 50%); }
.fml-subbuild__bars { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:6px; align-items:end; border-bottom:1px solid var(--fm-border-strong); }
.fml-subbuild__month { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.fml-subbuild__val { font-family:var(--font-mono); font-size:11px; color:var(--fg-3); white-space:nowrap; }
.fml-subbuild__bar { display:flex; flex-direction:column; justify-content:flex-end; width:100%; max-width:44px; height:200px; }
.fml-subbuild__bar i:first-child { border-radius:3px 3px 0 0; }
.fml-subbuild__name { font-size:12px; color:var(--fg-3); }
.fml-subbuild__month.is-on .fml-subbuild__val, .fml-subbuild__month.is-on .fml-subbuild__name { color:var(--fg-1); }
.fml-subbuild__month.is-on .fml-subbuild__name { font-weight:var(--fw-medium); }
.fml-subbuild__caption { font-size:12px; color:var(--fg-3); }
[data-view=total] .fml-view-per, [data-view=per] .fml-view-total { display:none; }

.fml-subsend { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:16px; }
.fml-subsend__card { display:flex; flex-direction:column; gap:14px; padding:26px; border-radius:var(--radius-lg); background:var(--tone-soft); color:var(--tone-ink); }
.fml-subsend__head { display:flex; align-items:center; gap:12px; font-size:13px; }
.fml-subsend__head h4 { color:var(--tone-ink); }
.fml-subsend__icons { display:flex; align-items:center; gap:6px; flex:none; }
.fml-subsend__icons > span { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#fff; }
.fml-subsend__icons img { width:20px; height:20px; }
.fml-subsend__icons b { font-size:18px; font-weight:var(--fw-medium); }
.fml-subsend__card p { font-size:14px; line-height:1.55; color:var(--fg-1); }
.fml-subsend__pays { margin-top:auto; padding-top:12px; border-top:1px solid currentColor; border-top-color:color-mix(in srgb, var(--tone-ink) 20%, transparent); font-size:13px; }

@media (max-width:860px) {
  .fml-subcalc__model { padding:20px; }
  .fml-subcalc__sum { position:static; max-width:none; }
  .fml-subbuild__bars { gap:3px; }
  .fml-subbuild__val { writing-mode:vertical-rl; transform:rotate(180deg); }
  .fml-subbuild__bar { height:140px; }
}

/* ── Slik funker det ─────────────────────────────────────────────────────── */
.fml-section--flushbottom { padding-bottom:0; }
.fml-section--ruled { border-top:1px solid var(--fm-border); border-bottom:1px solid var(--fm-border); }
.fml-head--wide { max-width:640px; margin-bottom:40px; }
.fml-head--start .fm-overline { color:var(--fm-teal-dark); }
.fml-head--wide h2, .fml-howsetup h2 { margin-bottom:12px; font-size:clamp(28px, 3.5vw, 40px); }
.fml-head--wide p { font-size:18px; color:var(--fg-2); }

.fml-howhero { position:relative; display:flex; align-items:flex-end; min-height:620px; padding:0 40px clamp(40px, 7vw, 80px); background:var(--fm-teal-darker); color:#fff; overflow:hidden; }
.fml-howhero__bg { position:absolute; inset:0; background-size:cover; background-position:center 40%; }
.fml-howhero__bg::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.38); }
.fml-howhero__inner { position:relative; width:100%; }
.fml-howhero h1 { max-width:640px; margin-bottom:16px; font-size:clamp(44px, 7vw, 80px); line-height:1.05; color:#fff; }
.fml-howhero p { max-width:640px; font-size:clamp(18px, 2vw, 21px); line-height:1.5; color:#fff; }

.fml-howsteps { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.fml-howstep { display:flex; flex-direction:column; gap:8px; padding:24px; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:#fff; color:var(--fg-2); text-decoration:none; transition:border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard); }
a.fml-howstep:hover { border-color:var(--fm-teal-40); box-shadow:var(--shadow-1); }
.fml-howstep__top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.fml-howstep__num { font-family:var(--font-mono); font-size:14px; color:var(--fm-teal-dark); }
.fml-howstep__icons { display:flex; gap:8px; align-items:center; }
.fml-howstep__icons img { display:block; width:auto; height:32px; }
.fml-howstep h3 { color:var(--fg-1); }
.fml-howstep__text { font-size:15px; }

.fml-howsetup { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:48px; align-items:start; }
.fml-howsetup .fm-overline { margin-bottom:12px; color:var(--fm-teal-dark); }
.fml-howsetup h2 { margin-bottom:16px; }
.fml-howsetup__lead { margin-bottom:32px; font-size:18px; }
.fml-howsetup__note { margin-top:24px; font-size:15px; color:var(--fg-3); }
.fml-howflow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14px; color:var(--fg-1); }
.fml-howflow__arrow { color:var(--fg-3); }
.fml-howflow__stack { display:flex; flex-direction:column; gap:6px; }
.fml-howchip { display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:#fff; }
.fml-howchip--sm { padding:8px 14px; }
.fml-howchip img { width:16px; height:16px; }

.fml-howplan { padding:28px; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:#fff; }
.fml-howplan__head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:4px; }
.fml-howplan__tabs { display:flex; gap:2px; padding:3px; border-radius:var(--radius-lg); background:var(--bg-3); }
.fml-howplan__tabs button { padding:6px 14px; border:0; border-radius:var(--radius-md); background:transparent; font:inherit; font-size:14px; color:var(--fg-2); cursor:pointer; }
.fml-howplan__tabs button[aria-selected=true] { background:#fff; color:var(--fg-1); box-shadow:0 1px 2px rgba(0,0,0,0.08); }
.fml-howplan__tabs button:focus-visible { outline:2px solid var(--fm-teal); outline-offset:1px; }
.fml-howplan__panel[hidden] { display:none; }
.fml-howplan__intro { margin-bottom:20px; font-size:14px; color:var(--fg-3); }
.fml-howplan__row { display:grid; grid-template-columns:90px 1fr auto; gap:12px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--fm-divider); font-size:14px; }
.fml-howplan__date { font-family:var(--font-mono); color:var(--fg-1); }
.fml-howplan__freq { font-family:var(--font-mono); font-size:13px; color:var(--fg-1); text-align:right; }
.fml-howplan__bar { display:flex; gap:2px; height:10px; margin:20px 0 8px; border-radius:999px; overflow:hidden; }
.fml-howplan .is-level-1 { background:rgba(0,138,125,0.45); }
.fml-howplan .is-level-2 { background:var(--fm-teal); }
.fml-howplan .is-level-3 { background:var(--fm-amber); }
.fml-howplan__months { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:12px; color:var(--fg-3); }
.fml-howplan__legend { display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; font-size:12px; color:var(--fg-3); }
.fml-howplan__legend span { display:flex; align-items:center; gap:6px; }
.fml-howplan__legend i { width:10px; height:10px; border-radius:2px; }
.fml-howplan__note { display:flex; gap:10px; align-items:flex-start; margin-top:20px; padding:10px 14px; border-radius:var(--radius-sm); background:hsl(205 25% 91%); font-size:14px; line-height:1.45; color:hsl(203 42% 24%); }
.fml-howplan__note img { flex:none; width:16px; height:16px; margin-top:2px; }

.fml-howways { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:16px; margin-bottom:32px; }
.fml-howway { display:flex; flex-direction:column; gap:12px; padding:28px; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:#fff; }
.fml-howway h3 { display:flex; align-items:center; gap:10px; color:var(--fg-1); }
.fml-howway h3 span { font-size:24px; font-style:normal; }
.fml-howway p { font-size:16px; }
.fml-howway--dark { border-color:transparent; background:var(--fm-teal-darker); }
.fml-howway--dark h3, .fml-howway--dark p { color:#fff; }

.fml-howmodels { display:flex; flex-direction:column; gap:12px; }
.fml-howmodel { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:24px; align-items:center; padding:20px 24px; border:1px solid var(--fm-border); border-radius:var(--radius-lg); background:#fff; }
.fml-howmodel__id { display:flex; align-items:center; gap:16px; }
.fml-howmodel__id img { display:block; width:56px; height:auto; }
.fml-howmodel__id h3 { color:var(--fg-1); }
.fml-howmodel__id span { font-size:14px; }
.fml-howmodel__path { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:var(--fw-medium); color:var(--fg-1); }
.fml-howmodel__ways { flex:1; min-width:40px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.fml-howmodel__ways span { display:flex; align-items:center; gap:8px; }
.fml-howmodel__ways b { font-size:15px; font-weight:var(--fw-medium); }
.fml-howmodel__ways i { font-size:28px; font-style:normal; line-height:1; color:var(--fm-teal-dark); }

.fml-howshots { display:flex; flex-wrap:wrap; gap:24px; }
.fml-howshot { display:flex; flex-direction:column; gap:12px; min-width:0; margin:0; flex:1 1 400px; }
.fml-howshot img { display:block; width:100%; height:auto; border:1px solid var(--fm-border); border-radius:var(--radius-lg); }
.fml-howshot:nth-child(1) { flex:2 1 560px; }
.fml-howshot:nth-child(2) { flex:1 1 280px; }
.fml-howshot:nth-child(2) img { aspect-ratio:4 / 5; object-fit:cover; border:0; }
.fml-howshot:nth-child(n+3) img { aspect-ratio:16 / 10; object-fit:cover; object-position:left top; }
.fml-howshot figcaption { font-size:15px; }
.fml-howshot strong { font-weight:var(--fw-medium); color:var(--fg-1); }

@media (max-width:860px) {
  .fml-howhero { min-height:520px; padding-left:20px; padding-right:20px; }
  .fml-howplan { padding:20px; }
  .fml-howplan__row { grid-template-columns:72px 1fr auto; }
}

/* ── E-bjelle model pages ──────────────────────────────────────────────────
   One set of blocks for every model; the model's colours come in as custom
   properties. Values are the FindMy design system's (tailwind_tokens.css). */
.fml-model--gronn { --model-disc:hsl(135 50% 89%); --model-soft:hsl(135 50% 89%); --model-ink:hsl(145 60% 22%); --model-face:50% 60%; }
.fml-model--bla   { --model-disc:hsl(205 25% 91%); --model-soft:hsl(205 80% 91%); --model-ink:hsl(210 70% 30%); --model-face:42% 30%; }
.fml-model--rod   { --model-disc:hsl(10 76% 90%);  --model-soft:hsl(10 76% 90%);  --model-ink:hsl(9 68% 28%);   --model-face:50% 45%; }
.fml-model .fm-overline { color:var(--fm-teal-dark); }
.fml-model__title { margin-bottom:32px; }

.fml-modelhero { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:48px; align-items:center; }
.fml-modelhero__copy { display:flex; flex-direction:column; gap:20px; }
.fml-modelhero h1 { font-size:clamp(34px, 4.6vw, 52px); line-height:1.1; }
.fml-modelhero__lead { max-width:540px; font-size:18px; line-height:1.55; }
.fml-modelhero__text { max-width:540px; font-size:16px; line-height:1.55; color:var(--fg-3); }
.fml-modelhero__ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.fml-modelhero__bell { position:relative; display:flex; justify-content:center; align-items:center; padding:24px 0; }
.fml-modelhero__bell::before { content:''; position:absolute; width:min(100%, 440px); aspect-ratio:1 / 1; border-radius:50%; background:var(--model-disc); }
.fml-modelhero__bell img { position:relative; display:block; width:100%; max-width:300px; height:auto; }

.fml-modelintro { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:48px; align-items:center; }
.fml-modelintro__media { margin:0; aspect-ratio:3 / 2; overflow:hidden; border-radius:var(--radius-md); background:var(--bg-3); }
.fml-modelintro__media img { display:block; width:100%; height:100%; object-fit:cover; }
.fml-modelintro__copy { display:flex; flex-direction:column; gap:16px; }
.fml-modelintro__copy p { font-size:16px; line-height:1.6; }
.fml-modelintro__note { font-size:15px !important; color:var(--fg-3); }

.fml-modelfeatures { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:1px; overflow:hidden; border:1px solid var(--fm-border); border-radius:var(--radius-md); background:var(--fm-border); }
.fml-modelfeature { display:flex; flex-direction:column; gap:12px; padding:26px 24px; background:#fff; }
.fml-modelfeature__icon { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:hsl(173 36% 96%); }
.fml-modelfeature__icon img { width:20px; height:20px; }
.fml-modelfeature h4 { hyphens:auto; overflow-wrap:anywhere; }
.fml-modelfeature p { font-size:14px; line-height:1.55; }
.fml-modelfeatures__cta { margin-top:32px; }

.fml-modelspecs { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:48px; align-items:start; }
.fml-modelspecs__col { display:flex; flex-direction:column; gap:20px; }
.fml-modelspecs__lead { font-size:16px; line-height:1.6; }
.fml-modeldims { position:relative; aspect-ratio:5 / 4; overflow:hidden; border-radius:var(--radius-md); background:var(--bg-3); font-size:clamp(11px, 1.5vw, 15px); color:var(--fg-1); }
.fml-modeldims__bell { position:absolute; left:31%; top:17%; width:34%; }
.fml-modeldims__bell img { display:block; width:100%; height:auto; }
.fml-modeldims__bell svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; color:var(--fg-3); }
.fml-modeldims__m { position:absolute; white-space:nowrap; }
.fml-modeldims__m--top { left:48.6%; top:-3.2%; transform:translate(-50%, -125%); }
.fml-modeldims__m--loop { left:12%; top:10%; transform:translate(-100%, -50%); }
.fml-modeldims__m--side { left:110%; top:51%; transform:translateY(-50%); }
.fml-modeldims__m--front { left:36%; top:106.5%; transform:translateX(-50%) rotate(2.3deg); }
.fml-modeldims__m--depth { left:88%; top:104%; transform:rotate(-29deg); transform-origin:left top; }
.fml-modeldims__weight { position:absolute; left:6%; top:44%; display:flex; flex-direction:column; gap:2px; }
.fml-modeldims__weight strong { font-size:1.25em; font-weight:var(--fw-medium); }
.fml-modeldims__weight span { font-size:0.85em; color:var(--fg-3); }
.fml-modelspecs__rows { margin:0; border-bottom:1px solid var(--fm-border); }
.fml-modelspecs__rows > div { display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--fm-border); font-size:15px; }
.fml-modelspecs__rows dt { color:var(--fg-3); }
.fml-modelspecs__rows dd { margin:0; font-weight:var(--fw-medium); color:var(--fg-1); text-align:right; }
.fml-modelspecs__note { margin-top:-8px; font-size:13px; color:var(--fg-3); }
.fml-modelspecs__points { margin:0; padding:0; list-style:none; border-top:1px solid var(--fm-border); }
.fml-modelspecs__points li { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--fm-border); font-size:15px; }
.fml-modelspecs__points img { flex:none; width:18px; height:18px; margin-top:2px; }
.fml-modelspecs__link { font-size:15px; color:var(--fg-3); }

.fml-modelexample { display:flex; flex-direction:column; gap:12px; padding:20px 22px; border-radius:var(--radius-lg); background:var(--model-soft); }
.fml-modelexample__head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fml-modelexample__head h4 { color:var(--model-ink); }
.fml-modelexample__tag { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; background:var(--model-ink); color:#fff; font-family:var(--font-mono); font-size:12px; }
.fml-modelexample__sum { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.fml-modelexample__sum strong { font-size:32px; font-weight:var(--fw-medium); color:var(--fg-1); }
.fml-modelexample__sum span { font-size:15px; color:var(--model-ink); }
.fml-modelexample p { font-size:14px; line-height:1.55; color:var(--fg-1); }
.fml-modelexample__legend { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--fg-1); }
.fml-modelexample__legend span { display:flex; align-items:center; gap:8px; }
.fml-modelexample__legend i { width:12px; height:12px; border-radius:2px; }
.fml-modelexample .is-base { background:var(--fm-teal); }
.fml-modelexample .is-data { background:hsl(210 70% 50%); }
.fml-modelexample .is-sat { background:hsl(140 55% 42%); }
.fml-modelexample__legend i.is-avg { width:14px; height:0; border-radius:0; border-top:1px dashed var(--model-ink); }
.fml-modelexample__bars { position:relative; display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:4px; align-items:end; height:120px; padding-top:8px; border-bottom:1px solid color-mix(in srgb, var(--model-ink) 35%, transparent); }
.fml-modelexample__bar { display:flex; flex-direction:column; justify-content:flex-end; height:100%; min-width:0; }
.fml-modelexample__bar i { display:block; }
.fml-modelexample__bar i:first-child { border-radius:3px 3px 0 0; }
.fml-modelexample__avg { position:absolute; left:0; right:0; z-index:1; height:0; border-top:1px dashed var(--model-ink); pointer-events:none; }
.fml-modelexample__months { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:4px; margin-top:-6px; font-size:11px; text-align:center; color:var(--model-ink); }
.fml-modelexample__months .is-on { font-weight:var(--fw-medium); color:var(--fg-1); }

.fml-modelquote { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap:48px; align-items:center; }
.fml-modelquote__photo { justify-self:center; width:100%; max-width:440px; aspect-ratio:1 / 1; overflow:hidden; border-radius:50%; box-shadow:0 0 0 1px var(--fm-border), 0 0 0 12px var(--bg-2), 0 0 0 13px var(--fm-teal); }
.fml-modelquote__photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--model-face, 50% 40%); }
.fml-modelquote__copy { display:flex; flex-direction:column; gap:20px; }
.fml-modelquote blockquote { margin:0; font-family:var(--font-display); font-style:italic; font-weight:var(--fw-medium); font-size:clamp(22px, 2.6vw, 28px); line-height:1.35; color:var(--fg-1); }
.fml-modelquote__by { display:flex; flex-direction:column; gap:2px; font-size:15px; }
.fml-modelquote__by span { font-weight:var(--fw-medium); color:var(--fg-1); }
.fml-modelquote__by small { font-size:13px; color:var(--fg-3); }