/* FieldBots Website — 1:1 rebuild of the live fieldbots.com design.
   Tokens extracted from the original (2026-06-06): Rubik body 16/26.7 #152A3F,
   Plus Jakarta Sans headings 700, buttons navy r4 14.4/28.8, panels #F4F4F9,
   trust band #2953C6, cards white r8-12 shadow rgba(0,0,0,.08) 0 4 12. */
:root{
  --navy:#152a3f; --grey:#6c757d; --panel:#f4f4f9; --blue:#2953c6; --red:#e2001a;
  --shadow:0 4px 12px rgba(0,0,0,.08); --r-panel:24px;
  --head:"Plus Jakarta Sans",sans-serif; --body:"Rubik",sans-serif;
  --title:"Roboto",sans-serif; /* live .title-element (h1 + CTA heading) is Roboto 700 */
}
*{box-sizing:border-box}
body{margin:0;padding-top:110px;font-family:var(--body);font-size:16px;line-height:1.667;color:var(--navy);background:#fff}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
h1,h2,h3,h4,h5,h6{font-family:var(--head);font-weight:700;color:var(--navy);line-height:1.25;margin:.2em 0 .5em}
h1{font-family:var(--title);font-size:clamp(2.2rem,4.8vw,3.625rem);line-height:1.25} /* live: Roboto 700 58/72.5 */
h2{font-size:clamp(1.8rem,4vw,2.875rem)} /* live: 46px */
h3{font-size:1.5rem}
h4{font-size:1.25rem}
h5{font-size:1.375rem}
h6{font-size:1.125rem;margin:0}
p{margin:.5em 0 1em}
img{max-width:100%;height:auto}
a{color:var(--navy)}
/* every text link gets the in-your-face link blue (feedback 2026-06-07) */
p a,li a,td a{color:var(--blue)}
.center{text-align:center}
[id]{scroll-margin-top:96px} /* anchors vs. fixed header */

/* header — transparent on top; scrolled: white 70% + blur(20), 110px → 70px
   (values measured on the live .wsmainfull.scroll, transition .45s ease-in-out) */
header{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;
  -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  transition:background .45s ease-in-out,box-shadow .45s ease-in-out,backdrop-filter .45s ease-in-out}
header.scrolled{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 2px 3px rgba(96,96,96,.1)}
.header-row{display:flex;align-items:center;justify-content:space-between;height:110px;transition:height .45s ease-in-out}
header.scrolled .header-row{height:70px}
.logo{flex:none} /* never let the flex row squeeze the logo */
.logo img{height:34px;width:auto;max-width:none;display:block} /* max-width:none beats the global img{max-width:100%} → ratio always kept */
.logo-text{font-family:var(--head);font-weight:800;font-size:1.5rem;text-decoration:none;color:var(--navy)}
.logo-text span{color:var(--navy)}.logo-text sup{font-size:.5em;color:var(--grey)}
nav{display:flex;gap:2px;align-items:center}
.nav-item{position:relative}
.nav-item>a{display:flex;align-items:center;gap:6px;padding:11px 14px;color:var(--navy);text-decoration:none;font-family:var(--head);font-weight:600;font-size:15px;border-radius:6px}
.nav-item>a:hover{background:var(--panel)}
.nav-item>a svg{opacity:.7}
.nav-item .dropdown{display:none;position:absolute;left:0;top:100%;background:#fff;border-radius:10px;box-shadow:0 12px 32px rgba(21,42,63,.14);min-width:240px;padding:8px}
.nav-item:hover .dropdown{display:block}
.dropdown a{display:flex;align-items:center;padding:9px 14px;color:var(--navy);text-decoration:none;border-radius:6px;font-family:var(--head);font-weight:600;font-size:14px}
/* external dropdown targets (radar.*) carry an icon at the RIGHT edge (feedback 2026-06-07) */
.dropdown a .ext{width:12px;height:12px;margin-left:auto;padding-left:10px;box-sizing:content-box;opacity:.55;flex:none}
.dropdown a:hover{background:var(--panel)}
a.login{background:var(--navy);color:#fff;font-family:var(--head);font-weight:600;font-size:15px;text-decoration:none;padding:12px 26px;border-radius:8px;margin-left:12px}
a.login:hover{opacity:.92}
/* tablet (1100–1199px): tighter nav so logo + items + lang switcher + login fit
   (live: li>a padding 10px 10px 10px 8px, margin 0 5px; desktoplogo img max-height 34px).
   Below 1100px the desktop nav cannot fit (needs ~1021px incl. language switcher)
   → the burger/drawer takes over earlier than live's 991px (see media block below). */
@media (min-width:1100px) and (max-width:1199px){
  .nav-item>a{padding:11px 9px 11px 8px;gap:4px}
  a.login{padding:12px 16px;margin-left:6px}
}
.nav-item>a,a.login{white-space:nowrap} /* never wrap items like "Fleet Owners" to two lines */
.burger{display:none;background:none;border:0;padding:10px 4px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--navy);margin:5px 0;border-radius:2px;transition:transform .2s,opacity .2s}
.subtoggle{display:none;background:none;border:0;padding:12px 16px;cursor:pointer;color:var(--navy)}
.subtoggle svg{display:block;transition:transform .2s}

/* buttons — live .btn: 16px Rubik 500, line-height 1, pad 12.8/27.2 → 45px high */
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin:1.4em 0 .4em}
.btn-row.center{justify-content:center}
.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;font-family:var(--body);font-weight:500;font-size:16px;line-height:1;padding:12.8px 27.2px;border-radius:4px;border:2px solid var(--navy);transition:opacity .15s}
.btn:hover{opacity:.9}
.btn-outline{background:transparent;color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff;opacity:1}
.btn-light{background:#fff;color:var(--navy);border-color:#fff}

/* sections & panels — hero background stays tinted all the way down (live:
   hero-2.jpg image, no fade to white) → clear edge against the white logo band */
.hero{padding:72px 0 48px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle 26px at 38% 28%, rgba(255,255,255,.85) 0 60%, transparent 62%),
    radial-gradient(circle 34px at 10% 86%, rgba(255,255,255,.7) 0 55%, transparent 60%),
    radial-gradient(120% 90% at 80% 0%, rgba(106,90,205,.10), transparent 60%),
    linear-gradient(180deg,#f2f1fa 0%,#f5f4fb 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative}
.hero h1{max-width:620px}
.hero-grid>div:first-child p{font-size:18px} /* live hero subtitle: p-lg 18/30 */
.hero-video video{width:100%;display:block;border-radius:14px;background:#1d2733;box-shadow:0 18px 48px rgba(21,42,63,.25)}
.checklist{list-style:none;padding:0;margin:.6em 0 1em}
/* own tick graphic INLINE before the bold lead — no emoji, no hanging indent:
   wrapped lines start at the left margin like live (feedback 2026-06-07) */
.checklist li{padding:6px 0}
.tick{display:inline-block;width:17px;height:17px;margin-right:9px;vertical-align:-2px} /* also used inline in the robots-teaser note (Contract Cleaners) */
/* hero without media (live /fieldbots-connect-plus/): copy spans the full width */
.hero-grid.solo{grid-template-columns:1fr}
.hero-grid.solo>div:first-child{max-width:1080px}
.sec{padding:32px 0}
.panel{max-width:min(1240px,calc(100% - 56px));margin:0 auto;background:var(--panel);background-image:radial-gradient(circle at 85% 10%,rgba(41,83,198,.06),transparent 45%);border-radius:var(--r-panel);padding:72px 64px} /* min(): keep side gutters when the viewport is narrower than the box */
.panel-blue{background:var(--blue);background-image:none;color:#fff}
.panel-blue h2,.panel-blue p{color:#fff}
.eyebrow{display:block;font-family:var(--head);font-size:13.6px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--navy);margin-bottom:14px}
.panel-blue .eyebrow{color:#fff}
.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.two-col .media img{display:block;margin:0 auto;max-height:620px}
/* pictures get rounded corners sitewide (feedback 2026-06-07) */
.two-col .media img,.img-strip img,.apps-media img,.hero-img img{border-radius:14px}
.sec-intro{max-width:760px;font-size:21px} /* live section subline: s-21 21/35 */
/* live: feature-grid + testimonial sections have centered heading + subline */
.sec-center h2{text-align:center}
.sec-center .sec-intro{text-align:center;margin-left:auto;margin-right:auto}
/* live .section-title widgets center heading AND description at EVERY width
   (e.g. fleet "Why FieldBots" → "Our approach covers the entire lifecycle.",
   feedback 2026-06-07) — plain intro <p>s in centered sections follow suit */
.sec-center>.wrap>p{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
/* fully-centered section (headline + paragraphs + buttons), wrap or panel */
.sec-allcenter{text-align:center}
.sec-allcenter p{max-width:760px;margin-left:auto;margin-right:auto}
.sec-allcenter .btn-row{justify-content:center}
.sec-quotes .sec-intro{color:var(--grey)} /* live: clients subline is grey */
/* full-bleed whitesmoke band ("Get started in 3 steps" on the live homepage) */
.sec-grey{background:var(--panel);padding:70px 0}
.img-strip{display:grid;gap:24px;margin:36px auto}
.img-strip.n2{grid-template-columns:repeat(2,1fr)}
.img-strip.n3{grid-template-columns:repeat(3,1fr)}
.img-strip.n4{grid-template-columns:repeat(4,1fr)}
.img-strip.n5{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.img-strip img{width:100%;object-fit:cover}
.img-strip.bleed{margin-top:0}
/* /our-team/ asymmetric photo collage (matches WP original). aspect-ratio gives
   the grid a definite height so the fr rows resolve (otherwise they collapse to
   content height and the images blow up). */
.team-collage{display:grid;gap:18px;margin:36px auto;aspect-ratio:16/9;
  grid-template-columns:1.1fr 1.1fr 1.5fr 1.5fr;
  grid-template-rows:1.3fr 1fr 1fr;
  grid-template-areas:"a a c c" "b b c c" "b b d e"}
.team-collage img{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block}

/* feature list */
h5.kf{margin-top:1.2em}
ul.dots{padding-left:22px;margin:.4em 0 1em}
ul.dots li{margin:8px 0}
ul.dots.lead li{margin:14px 0} /* bold lead + <br> + copy (live FieldBots-Connect/cleaner lists) */

/* icon boxes (/fieldbots-connect-plus/): each h3 mini-section in its own tinted
   panel with its own icon, centered (feedback 2026-06-07) */
.icon-box{text-align:center;padding:64px 56px}
.icon-box .box-icon{width:132px;margin:0 auto 14px;display:block}
.icon-box p{max-width:820px;margin:.4em auto}
/* "Two ways of integration" (/integrations/): both offers side by side in
   tinted boxes like live, stacked on mobile (feedback 2026-06-07) */
.duo-boxes{display:grid;gap:24px;margin-top:28px}
.duo-box{max-width:none;margin:0;padding:40px 36px}
.duo-box h3{margin-top:0}
@media (min-width:768px){.duo-boxes{grid-template-columns:1fr 1fr}}
/* desktop: all boxes side by side, mobile stacked (feedback 2026-06-07) */
.icon-boxes{max-width:min(1240px,calc(100% - 56px));margin:0 auto;display:grid;gap:24px}
.icon-boxes .icon-box{max-width:none;margin:0}
@media (min-width:992px){
  .icon-boxes.n2{grid-template-columns:repeat(2,1fr)}
  .icon-boxes.n3{grid-template-columns:repeat(3,1fr)}
  .icon-boxes .icon-box{padding:48px 32px}
}

/* icon cards (Why FieldBots) — live fbox-11: icon (blob + glyph/img) left, text right.
   Feedback 2026-06-07 (Hospitality, gilt sitewide): icon sits HIGHER (the blob has
   ~20px inner padding — negative top margin cancels it against the h4 baseline)
   and the text column closer to the icon (gap 24→14px). */
.icon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 64px;margin:30px 0;text-align:left}
.icon-card{display:flex;gap:14px;align-items:flex-start}
.icon-card .why-icon{flex:none;margin:-14px 0 0;width:96px;height:96px}
.icon-card h4{margin:.1em 0 .25em}
.icon-card p{margin:0;color:var(--navy)}
.why-icon .glyph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;fill:var(--navy)}
.icon-card .why-icon img{inset:20px}

/* image cards (Intelligence/Maintain/Connect/Benefits) */
.card-grid{display:grid;gap:24px;margin:36px 0}
.card-grid.n3{grid-template-columns:repeat(3,1fr)}
.card-grid.n4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.card img{width:100%;aspect-ratio:4/3;object-fit:contain;padding:14px 14px 0}
.card-body{padding:10px 22px 22px}
.card-body h5{font-size:1.125rem;margin:.4em 0 .3em}
.card-body p{margin:0;color:var(--navy)}

/* quotes — live .review-2: faded quote deco on top (flaticon 75px navy @ .1),
   text, then round avatar NEXT TO name + title in the author row */
.quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:36px}
.quote{background:#fff;border-radius:8px;box-shadow:var(--shadow);padding:32px 35px 30px;margin:0}
.quote .qmark{display:block;height:56px;margin-bottom:-28px;opacity:.1}
.quote .qmark svg{width:56px;height:56px;fill:var(--navy)}
.quote blockquote{position:relative;margin:0 0 22px}
.quote figcaption{display:flex;align-items:center;gap:14px}
.quote .avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none;margin:0}
.quote figcaption h6{margin:0}
.quote figcaption span{color:var(--grey);font-size:.95rem}

/* trust band */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 56px;text-align:center}
.trust-item img{height:150px;object-fit:contain;margin-bottom:8px}
.trust-item p{margin:0;color:#fff}

/* robots */
.mfr-nav{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 28px}
.mfr-chip{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;box-shadow:var(--shadow);padding:14px 22px;text-decoration:none;font-family:var(--head);font-weight:700;color:var(--navy)}
.mfr-chip img{height:30px;width:auto;object-fit:contain}
.group-h{margin-top:1.6em}
.robot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:24px 0 40px}
.robot-card{display:flex;flex-direction:column;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:26px;text-decoration:none;color:var(--navy);transition:transform .12s}
a.robot-card:hover{transform:translateY(-3px)}
.cat{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--grey)}
.robot-card h3{font-size:1.35rem;margin:.3em 0 .2em}
.robot-card .level{font-size:.95rem;color:var(--navy)}
.robot-card .level strong{font-family:var(--head)}
.robot-card img{width:100%;aspect-ratio:1/1;object-fit:contain;margin:10px 0 6px}
.robot-card .noimg{width:100%;aspect-ratio:1/1;background:var(--panel);border-radius:8px;margin:10px 0 6px}
/* "connect ready" badge on preview pictures (Notion Connect Ready?) — like the live *-sim images;
   layered BEHIND the robot shot, same as the level badge on the detail hero (feedback 2026-06-07) */
.card-media{position:relative;display:block}
.card-media img{position:relative;z-index:1}
.cr-badge{position:absolute;z-index:0;top:14px;right:0;display:flex;align-items:center;gap:6px;pointer-events:none}
.cr-badge .cr-txt{font-family:var(--head);font-weight:800;font-size:13px;line-height:1.05;color:var(--navy);text-align:right;text-transform:lowercase}
.cr-badge svg{width:27px;height:27px;flex:none}
.more{font-family:var(--head);font-weight:700;color:var(--navy);text-decoration:underline}
.more.soon{color:var(--grey);text-decoration:none}

/* detail page */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:6px 0 36px}
.stat{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:30px;text-align:center}
.stat h2{margin:0}
.stat span{color:var(--grey)}
.radar .btn-light{margin-top:4px}
.radar .two-col{align-items:center}
.radar .media img{width:100%;border-radius:14px}
/* integration-level badge — own layer BEHIND the Notion product shot (live bakes it in) */
.hero-shot{position:relative;display:block}
.hero-shot img{position:relative;z-index:1;width:100%}
.lvl-badge{position:absolute;z-index:0;top:-10px;right:-10px;width:172px;height:172px;border-radius:50%;background:#b9504c;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;font-family:var(--head);font-weight:800;font-size:23px;line-height:1.2}
.lvl-badge svg{width:36px;height:36px;fill:#fff}
@media (max-width:767px){.lvl-badge{width:118px;height:118px;font-size:16px;gap:5px;top:-4px;right:-4px}.lvl-badge svg{width:24px;height:24px}
  .btn-row.center-sm{justify-content:center}}
table.spec{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
table.spec th{background:var(--navy);color:#fff;font-family:var(--head);text-align:left;padding:13px 18px}
table.spec td{padding:12px 18px;border-top:1px solid #eceff3}
table.spec td.yes{font-weight:700}
table.spec td.no{color:var(--grey)}
table.spec tr.lvl th{background:var(--blue)}
table.spec+table.spec,h3.spec-label+table.spec{margin-top:14px}
h3.spec-label{margin:26px 0 0}
img.sim{max-height:460px}
.accordion details{background:#fff;border-radius:10px;box-shadow:var(--shadow);margin-bottom:12px;padding:0 22px}
.accordion summary{cursor:pointer;font-family:var(--head);font-weight:700;font-size:1.1rem;padding:16px 0}
.dist{display:flex;gap:18px;align-items:flex-start;padding:16px 0;border-top:1px solid #eceff3}
.dist img{width:120px;object-fit:contain;flex:none}
.dist p{margin:.2em 0;color:var(--navy)}

/* forms (→ Slack webhooks, CONCEPT §6) */
.fb-form{max-width:560px;display:grid;gap:14px;margin:24px 0}
.fb-form label{display:grid;gap:6px;font-family:var(--head);font-weight:600;font-size:.95rem}
.fb-form input,.fb-form textarea{font:inherit;font-family:var(--body);padding:12px 14px;border:1px solid #d6dce3;border-radius:6px;background:#fff}
.fb-form input:focus,.fb-form textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.fb-form .hp{position:absolute;left:-9999px}
.fb-form .btn{justify-self:start}
.form-status{font-weight:600}

/* component placeholder (template parts still to build) */
.component-todo{border:2px dashed #c8d0da;border-radius:12px;padding:22px 26px;margin:26px 0;background:rgba(244,244,249,.6)}
.component-todo p{margin:0;color:var(--grey);font-size:.95rem}

/* template components: logo marquee, Why-FieldBots grid, compare table
   (hero slider removed 2026-06-07: slides now render statically in the strip) */
.logo-marquee{overflow:hidden;margin:36px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;width:max-content;align-items:center;animation:logo-scroll 40s linear infinite}
.logo-track>*{flex:none;display:flex;align-items:center;margin-right:72px}
.logo-track img{height:42px;width:auto;object-fit:contain}
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes logo-scroll{to{transform:translateX(-50%)}}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 48px;margin:42px 0;text-align:center}
.why-card h4{margin:0 0 .35em} /* icon sits ABOVE title + copy (feedback 2026-06-07) */
.why-card p{margin:.6em 0 0;color:var(--navy)}
.why-icon{position:relative;width:104px;height:104px;margin:0 auto}
.why-card .why-icon{margin:0 auto 16px}
.why-icon svg{position:absolute;inset:0;width:100%;height:100%;fill:rgba(22,128,255,.1)}
.why-icon img{position:absolute;inset:24px;width:56px;height:56px;object-fit:contain}
table.compare td:nth-child(n+2),table.compare th:nth-child(n+2){text-align:center;width:170px}
table.compare td.yes{color:var(--blue)}
.sec-video .btn-row{justify-content:center}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none}}

/* feature grid — live 'image top, centered title + text' 3-col sections
   (fleet grow / serves your industry); app-cards = mini cards in the
   'best-in-class apps' two-column layout; steps = numbered list (live: circles) */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 48px;margin:42px 0;text-align:center}
.feature-grid.n2,.feature-grid.n4{grid-template-columns:repeat(2,1fr)}
.feature-grid .fcard img{width:100%;border-radius:14px;margin-bottom:18px}
.feature-grid .fcard h4{margin:.2em 0 .4em;font-size:1.35rem}
.feature-grid .fcard p{margin:0}
/* fbox feature cards — live martex_features widget (h3 + screenshot + copy
   triplets, /fieldbots-intelligence/): white shadowed card r-12, screenshot
   centered on a whitesmoke gradient strip, h5 + text LEFT-aligned, 2-up ≥768 */
.fbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:42px 0;text-align:left}
.fbox{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:34px 40px}
.fbox .fbox-img{background:linear-gradient(rgba(244,244,249,.8),var(--panel));border-radius:10px;display:flex;align-items:center;justify-content:center;padding:18px;margin-bottom:22px}
.fbox .fbox-img img{max-width:100%;max-height:230px;border-radius:8px}
.fbox h5{margin:0 0 .45em;font-size:1.35rem}
.fbox p{margin:0;color:var(--grey)}
@media (max-width:767px){.fbox-grid{grid-template-columns:1fr}.fbox{padding:26px 24px}}
.apps-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;margin-top:10px}
.apps-media img{width:100%;margin-bottom:18px}
.app-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.app-cards .fcard{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:24px 24px 20px}
.app-cards .fcard img{width:100%;aspect-ratio:4/3;object-fit:contain;margin-bottom:10px}
.app-cards .fcard h4{margin:.2em 0 .3em;font-size:1.2rem}
.app-cards .fcard p{margin:0}
/* /help-center/ Resources in the apps-cols arrangement: 2×2 instead of the 4-up row */
.apps-cols .card-grid.n4.res-grid{grid-template-columns:1fr 1fr;margin:0}
ol.steps{list-style:none;counter-reset:step;padding:0;margin:24px 0}
ol.steps li{counter-increment:step;position:relative;padding:0 0 28px 64px}
ol.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  background:var(--navy);color:#fff;font-family:var(--head);font-weight:700;display:flex;align-items:center;justify-content:center}
ol.steps li:not(:last-child)::after{content:"";position:absolute;left:19px;top:48px;bottom:6px;width:2px;background:#dfe3ec}
ol.steps h4{margin:.35em 0 .3em}
ol.steps p{margin:0}
.two-col.media-first .media{order:-1}

/* testimonial slider — 3 cards per view, scroll-snap + dots (page JS).
   proximity (not mandatory) + no overflow wrapper: vertical wheel must keep
   scrolling the page when the cursor sits on the carousel */
.quote-slider{margin-top:36px}
.quote-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:6px}
.quote-track::-webkit-scrollbar{display:none}
.quote-track .quote{scroll-snap-align:start;display:flex;flex-direction:column}
.quote-track blockquote{flex:1}
.slider-dots{display:flex;gap:10px;justify-content:center;margin-top:26px}
.slider-dots button{width:10px;height:10px;border-radius:50%;border:0;background:#c9ced9;cursor:pointer;padding:0}
.slider-dots button.active{background:var(--navy)}

/* radar band — full-bleed blue band edge to edge, no radius (live, ~325px total) */
.radar-band{background:var(--blue);padding:36px 0}
.radar-band h2,.radar-band p,.radar-band .eyebrow{color:#fff}
.radar-band .radar-logo img{max-width:420px;width:100%}

/* closing CTA — navy box; .cta-img = live bg image with fixed-background
   (parallax) effect, plain navy + blue diagonal as fallback without the asset */
.cta-dark{background:var(--navy);background-image:none;color:#fff;text-align:center;position:relative;overflow:hidden;border-radius:16px}
.cta-dark h2{font-family:var(--title)} /* live CTA heading: Roboto 700 */
.cta-dark::after{content:"";position:absolute;right:-120px;bottom:-160px;width:55%;height:150%;
  background:var(--blue);transform:rotate(24deg);border-radius:24px}
.cta-dark.cta-img{background:var(--navy) url(/images/import/home_cta-bg.jpg) center/cover no-repeat;
  background-attachment:fixed}
.cta-dark.cta-img::after{display:none}
@media (max-width:1024px){.cta-dark.cta-img{background-attachment:scroll}}
.cta-dark>*{position:relative;z-index:1}
.cta-dark h2,.cta-dark p{color:#fff}
.cta-dark .btn{background:#fff;color:var(--navy);border-color:#fff}
.cta-dark .btn:hover{opacity:.92}
.cta-note{font-family:var(--head);font-weight:600;margin-top:18px}

/* settings switcher (language / currency / units, Microbots picker logic) + scroll-to-top */
.nav-item.lang>a .flag{width:24px;height:12px;border-radius:2px}
.set-dd{min-width:260px;padding:12px}
.set-block{margin-bottom:12px}
.set-block:last-child{margin-bottom:4px}
.set-h{display:block;font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.set-langs .lang-opt{display:flex;align-items:center;gap:8px;padding:7px 10px}
.set-langs .lang-opt .flag{width:24px;height:12px;border-radius:2px;flex:none}
.set-langs .lang-opt.active{background:var(--panel)}
.set-row{display:flex;flex-wrap:wrap;gap:6px}
.set-row .cur-btn,.set-row .unit-btn{border:1px solid #dde3ea;background:#fff;color:var(--navy);
  font-family:var(--head);font-weight:600;font-size:12px;padding:5px 9px;border-radius:6px;cursor:pointer;
  transition:background .15s,color .15s}
.set-row .cur-btn:hover,.set-row .unit-btn:hover{background:var(--panel)}
.set-row .cur-btn.active,.set-row .unit-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
@media (max-width:1099px){
  .set-dd{padding:4px 16px 12px 28px}
  .set-row{padding-top:2px}
}
.to-top{position:fixed;right:26px;bottom:26px;z-index:60;width:48px;height:48px;border-radius:50%;border:0;
  background:#1d2733;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 8px 22px rgba(21,42,63,.3);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s,transform .25s,visibility .25s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--navy)}

@media (max-width:980px){
  .feature-grid,.feature-grid.n4{grid-template-columns:1fr}
  .apps-cols{grid-template-columns:1fr}
  .app-cards{grid-template-columns:repeat(2,1fr)}
  .quote-track{grid-auto-columns:calc(100% - 24px)}
}
@media (max-width:560px){.app-cards{grid-template-columns:1fr}}

/* entrance animations — rebuilds the WOW.js/animate.css fadeInLeft/Right/Up
   of the original; classes are added by page JS, so nothing is hidden without JS */
.anim{opacity:0}
.anim-up{transform:translateY(40px)}
.anim-left{transform:translateX(-44px)}
.anim-right{transform:translateX(44px)}
.anim.in{opacity:1;transform:none;transition:opacity .9s ease-out,transform .9s ease-out}
@media (prefers-reduced-motion:reduce){.anim{opacity:1;transform:none}}

/* video */
.sec-video{margin:32px 0}
.sec-video video{width:100%;max-width:960px;display:block;margin:0 auto;border-radius:12px;box-shadow:var(--shadow)}

/* legal pages (Site Notice, Privacy Policy) — like the live inner-page-hero */
.legal-hero{padding:48px 0}  /* body has 110px top padding → ~160px like live */
.legal-hero h1{max-width:none;text-align:center}
.legal-intro{text-align:center;font-size:18px;margin:0 0 60px}
.legal-body{max-width:900px;margin:0 auto;color:var(--grey)}
.legal-body h2{font-size:1.5rem;margin:1.8em 0 .7em}
.legal-body p{margin:0 0 16px}
/* link blue also on the legal pages — imprint & co (feedback 2026-06-07) */
.legal-body a{color:var(--blue);text-decoration:none}
.legal-body a:hover{text-decoration:underline}
.legal-center{text-align:center}

/* global pre-footer newsletter signup (photo + Tally embed, like live) */
.newsletter{margin-top:40px}
.newsletter .media img{max-height:480px;object-fit:cover}

/* footer */
footer{margin-top:72px}
.footer-cols{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:32px;padding:56px 28px}
.flogo img{height:36px}
@media (max-width:980px){.fcol.flogo{display:none}} /* live mobile footer: no extra logo */
@media (max-width:640px){ /* live: copyright + policies stacked, centered */
  .footer-legal{flex-direction:column;gap:8px;text-align:center}
  .legal-links a{margin:0 10px}
}
.fcol h6{font-size:1.125rem;margin:0 0 .9em}
.fcol a{display:block;color:var(--grey);text-decoration:none;padding:5px 0}
.fcol a:hover{color:var(--navy)}
.fcol .ficons{display:flex;gap:16px;padding:8px 0}
.fcol .ficons a{display:inline-flex;padding:0;color:var(--grey)}
.fcol .ficons a:hover{color:var(--navy)}
.footer-bar{background:var(--navy);color:#fff}
.footer-legal{display:flex;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:16px;font-size:.95rem}
.legal-links a{color:#fff;text-decoration:none;margin-left:24px}
.legal-links a:hover{text-decoration:underline}

@media (max-width:980px){
  .hero-grid,.two-col{grid-template-columns:1fr}
  .panel{padding:48px 28px;border-radius:18px}
  .robot-grid,.card-grid.n4{grid-template-columns:repeat(2,1fr)}
  .card-grid.n3,.trust-grid,.img-strip.n3,.img-strip.n4{grid-template-columns:repeat(2,1fr)}
  .quote-grid,.icon-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr 1fr}
  /* collage reflows to two columns: big selfie spans the top, rest below.
     drop the fixed aspect-ratio and let each photo size by its own ratio */
  .team-collage{gap:16px;aspect-ratio:auto;grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:"c c" "a b" "d e"}
  .team-collage img{aspect-ratio:3/2;height:auto}
}
@media (max-width:560px){
  .team-collage{grid-template-columns:1fr;
    grid-template-areas:"c" "a" "b" "d" "e"}
}

/* mobile/tablet header — burger + drawer. Applies up to 1099px (wider than the
   980px layout breakpoint above): the desktop nav incl. language switcher needs
   ~1021px and would squeeze the logo on tablets. */
@media (max-width:1099px){
  /* mobile header: constant 72px, solid white when the menu is open */
  body{padding-top:72px}
  .header-row,header.scrolled .header-row{height:72px}
  body.nav-open header{background:rgba(255,255,255,.96);z-index:90}

  /* mobile menu — like the live wsmenu drawer: 350px panel sliding in from the
     right (.25s ease-in-out), dark overlay on the rest, items LEFT-aligned
     like the live wsmenu (feedback 2026-06-07) */
  .burger{display:block;position:relative;z-index:80} /* stays clickable above the drawer */
  /* NOTE: the header's backdrop-filter makes it the containing block for fixed
     descendants, so bottom:0/inset:0 resolve against the 72px header and clip
     the drawer — use explicit viewport heights instead. */
  nav{display:flex;position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(350px,85vw);
    flex-direction:column;align-items:stretch;gap:0;text-align:left;
    background:#fff;padding:88px 28px calc(28px + env(safe-area-inset-bottom));
    box-shadow:-8px 0 28px rgba(21,42,63,.18);
    overflow-y:auto;z-index:70;visibility:hidden;transform:translateX(100%);
    transition:transform .25s ease-in-out,visibility .25s ease-in-out}
  body.nav-open nav{visibility:visible;transform:none}
  body.nav-open{overflow:hidden} /* lock page scroll while the drawer is open */
  .nav-overlay{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:65;background:rgba(0,0,0,.45);
    opacity:0;visibility:hidden;transition:opacity .25s ease-in-out,visibility .25s ease-in-out;cursor:pointer}
  body.nav-open .nav-overlay{opacity:1;visibility:visible}
  body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .burger span:nth-child(2){opacity:0}
  body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-item{display:block;position:relative;border-top:1px solid #eceff3}
  .nav-item>a{justify-content:flex-start;padding:13px 36px 13px 16px;border-radius:0}
  .nav-item>a:hover{background:none}
  .nav-item>a svg{display:none}
  .subtoggle{display:block;position:absolute;top:0;right:0;padding:14px 10px}
  .nav-item.open .subtoggle svg{transform:rotate(180deg)}
  /* submenu accordion: animated open/close (live: slideToggle) */
  .nav-item .dropdown,.nav-item:hover .dropdown{display:block;position:static;width:100%;min-width:0;
    box-shadow:none;border-radius:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav-item.open .dropdown{max-height:480px;padding-bottom:12px}
  .dropdown a{padding:9px 16px 9px 28px;color:var(--grey)}
  a.login{margin:18px 0 0;text-align:center}
}
@media (min-width:1100px){
  .nav-overlay{display:none}
}
/* mobile: headlines and lead copy centered (live responsive.css centers
   titles, subtitles and button groups below 768px) */
@media (max-width:767px){
  h1,h2,.sec h3,.eyebrow,.cat{text-align:center}
  .sec h3.h3-list{text-align:left} /* list headlines stay left, like their bullets (feedback 2026-06-07) */
  .eyebrow,.cat{display:block}
  .hero-grid>div:first-child{text-align:center}
  .hero .btn-row,.two-col .btn-row{justify-content:center}
  .sec-intro,.two-col p{text-align:center}
  ul.dots,ol.steps,.checklist{text-align:left}
  /* Why-FieldBots tiles: centered on small breakpoints (feedback 2026-06-07);
     headline closer to its icon — the blob's ~20px inner padding already adds
     visual space, so the flex gap shrinks to 4px (feedback round 4) */
  .icon-card{flex-direction:column;align-items:center;text-align:center;gap:4px}
  .icon-card .why-icon{margin:0 auto}
}
@media (max-width:560px){
  .robot-grid,.card-grid.n4,.card-grid.n3,.trust-grid,.img-strip.n3,.img-strip.n4,.why-grid{grid-template-columns:1fr}
}

/* pricing plan cards (/pricing/) */
.pricing-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:36px 0}
.price-card{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:32px 28px;text-align:center}
.price-card h3{margin:0 0 .2em}
.price-card .price{font-family:var(--head);font-size:1.5rem;font-weight:700;color:var(--navy)}
.price-card .price span{font-size:.95rem;color:var(--grey);font-weight:400}
.price-card img{max-width:200px;margin:16px auto;display:block}
.price-card ul.checks{list-style:none;padding:0;margin:20px 0;text-align:left}
.price-card .checks li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid #ececf3}
.price-card .checks li:last-child{border-bottom:0}
.price-card .checks li::before{content:"\2713";position:absolute;left:2px;top:9px;color:var(--blue);font-weight:700}
.price-card .checks li span{display:block;color:var(--grey);font-size:.9rem}
.contact-cards .card img{aspect-ratio:1/1;object-fit:cover;padding:0}
.contact-cards .card-body{padding-top:16px}
/* icon-only mail link like live (far fa-paper-plane), feedback 2026-06-07:
   the icon sits at the RIGHT edge, level with the name */
.contact-cards .tm-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.contact-cards .tm-head h5{margin:0}
.contact-cards .tm-mail{display:inline-flex;flex:none;color:var(--navy)}
.contact-cards .tm-mail:hover{color:var(--blue)}
.contact-cards .tm-mail svg{width:20px;height:20px}
/* /our-team/: 7 portraits → 4-up rows like live */
.card-grid.n7{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.card-grid.n7{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.card-grid.n7{grid-template-columns:1fr}}
/* /company/ "This is FieldBots": two left-aligned text columns under the
   centered header (live Elementor two-column layout) */
.text-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px 56px;margin-top:36px;text-align:left}
.text-cols h3{margin:0 0 .4em}
.text-cols p{margin:0}
@media (max-width:767px){.text-cols{grid-template-columns:1fr}}
@media (max-width:860px){.pricing-cards{grid-template-columns:1fr}}

/* press releases (/press/ grid + /portfolio/ article pages) */
.press-grid .press-card{text-decoration:none;color:var(--navy);transition:transform .12s;display:flex;flex-direction:column}
.press-grid .press-card:hover{transform:translateY(-3px)}
.press-grid .press-card img{aspect-ratio:5/3;object-fit:cover;padding:0}
.press-grid .press-card .noimg{aspect-ratio:5/3;background:var(--panel)}
.press-grid .card-body{padding:18px 22px 22px}
.pr-date{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--grey)}
.press-grid h5{margin:.35em 0 .3em}
.press-grid .card-body p{color:var(--grey)}
.pr-article{max-width:880px}
.pr-article h2{font-size:clamp(1.45rem,3vw,2rem);margin-bottom:.8em}
.pr-article h3{margin-top:1.6em}
.pr-article .btn-row{margin-top:2.2em}
@media (max-width:640px){.press-grid.card-grid.n3{grid-template-columns:1fr}}
/* case-study article pages (/portfolio/ emoji slugs) */
.pr-article .pr-img{margin:1.4em 0}
.pr-article .pr-img img{width:100%;border-radius:12px}
.video-embed{position:relative;aspect-ratio:16/9;margin:1.4em 0}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:12px}
/* help center: topic boxes (hero) + tabbed accordion + resource cards */
.hero-hc .hero-grid.solo{text-align:center}
.hc-topics{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:1080px;margin:36px auto 6px}
.topic-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fff;border:1px solid #e3e3ee;border-radius:14px;padding:26px 12px;cursor:pointer;font:600 16px/1.3 "Plus Jakarta Sans",sans-serif;color:var(--navy);box-shadow:var(--shadow)}
.topic-box svg{width:26px;height:26px;fill:#b9c0cc}
.topic-box.active{background:#152A3F;color:#fff;border-color:#152A3F}
.topic-box.active svg{fill:#fff}
@media (max-width:900px){.hc-topics{grid-template-columns:repeat(2,1fr)}.hc-topics .topic-box:last-child{grid-column:1/-1;justify-self:center;width:62%;min-width:220px}}
@media (max-width:560px){.hc-topics{grid-template-columns:1fr}.hc-topics .topic-box:last-child{width:100%}}
.hc-tabs .tab-pane{display:none}
.hc-tabs .tab-pane.active{display:block}
.acc-item{background:#fff;border:1px solid #e3e3ee;border-radius:8px;margin-bottom:10px;box-shadow:0 4px 12px rgba(0,0,0,.04)}
.acc-item summary{cursor:pointer;font:600 16px/1.4 "Plus Jakarta Sans",sans-serif;padding:16px 48px 16px 20px;list-style:none;position:relative}
.acc-item summary::-webkit-details-marker{display:none} /* kein Browser-Marker-Artefakt oben rechts */
.acc-item summary::marker{content:""}
.acc-item summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font:400 24px/1 "Rubik",sans-serif;color:var(--navy)}
.acc-item[open] summary::after{content:"−"}
.acc-item .acc-panel{padding:0 20px 16px}
.acc-item .acc-panel p{margin:.4em 0}
.acc-panel .acc-sub{margin:1em 0 .3em}
.acc-panel ol,.acc-panel ul{margin:.3em 0 .9em;padding-left:1.4em}
.acc-panel li{margin:.35em 0}
.res-grid .res-card .pr-date{font-size:13px;color:#667}
.res-card .card-body{display:flex;flex-direction:column;align-items:flex-start;height:100%;padding:18px 22px 22px}
.res-card .btn.res-dl{margin-top:auto;padding:10px 20px;font-size:14px}
.res-card .card-body p{margin-bottom:16px}
@media (max-width:900px){.card-grid.n4.res-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.card-grid.n4.res-grid{grid-template-columns:1fr}}
/* case-grid (live /health-care/ References): 3-col portfolio row — one card stays
   1/3 wide; h5 ABOVE the photo; photo = rounded click target, dark overlay + eye on hover */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.case-card h5{font-size:24px;margin:0 0 14px}
.case-preview{position:relative;display:block;border-radius:14px;overflow:hidden}
.case-preview img{width:100%;display:block;border-radius:0} /* wrapper rounds the corners */
.case-preview::after{content:"";position:absolute;inset:0;background:rgba(21,42,63,0);transition:background .25s}
.case-preview:hover::after{background:rgba(21,42,63,.45)}
.case-eye{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .25s;z-index:1}
.case-eye svg{width:35px;height:35px}
.case-preview:hover .case-eye{opacity:1}
@media (max-width:767px){.case-grid{grid-template-columns:1fr}} /* live row-cols-1 below md */