:root {
  /* Balanced contrast: warm light surfaces, dark type, and visible greens. */
  --landing-bg: #f8f8f2;
  --landing-surface: #fdfefb;
  --landing-soft: #e8eee3;
  --landing-border: #c4cebf;
  --landing-border-strong: #a5b39e;
  --landing-text: #171d18;
  --landing-body: #39443b;
  --landing-muted: #4f5c51;
  --landing-how-bg: #e0e9db;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 112px; scroll-behavior: smooth; }
body { margin: 0; background: var(--landing-bg); color: var(--landing-text); font-family: var(--sp-font-landing); font-synthesis: none; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 6px; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
.container { width: min(1248px, calc(100% - 112px)); margin-inline: auto; }
.skip-link { position: fixed; left: 20px; top: -100px; padding: 12px 20px; background: var(--sp-forest); color: var(--sp-ivory); z-index: 20; }
.skip-link:focus { top: 12px; }
.site-header { --header-height: 74px; background: var(--landing-bg); border-bottom: 1px solid var(--landing-border); position: sticky; top: 0; z-index: 10; }
.header-inner { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand-link { --brand-width: 184px; flex: 0 0 auto; display: block; width: var(--brand-width); overflow: hidden; }
.brand-logo { display: block; position: relative; width: var(--brand-width); aspect-ratio: 604 / 180; }
.brand-link img { position: absolute; inset: 0; width: var(--brand-width); max-width: none; height: auto; }
/* Two matching crops keep the original logo artwork and symbol perfectly aligned. */
.brand-logo-symbol { clip-path: inset(0 72% 0 0); transform-origin: 14.57% 50%; }
.brand-logo-lettering { clip-path: inset(0 0 0 28%); transform: translateX(0); opacity: 1; }
.header-logo-ready .brand-link { transition: width 700ms cubic-bezier(.22, 1, .36, 1); }
.header-logo-ready .brand-logo-lettering { transition: transform 700ms cubic-bezier(.22, 1, .36, 1), opacity 420ms ease; }
.site-header.is-compact .brand-link { width: calc(var(--brand-width) * .28); }
.site-header.is-compact .brand-logo-lettering { transform: translateX(-24px); opacity: 0; }
.footer-brand img { width: 204px; height: auto; }
.desktop-nav { display: flex; gap: 34px; margin-left: auto; margin-right: 20px; font-size: 14px; }
.desktop-nav a, .back-top { padding-block: 12px; }
.desktop-nav a:hover, .mobile-nav a:hover, .back-top:hover { color: var(--sp-pine); text-decoration: underline; text-underline-offset: 6px; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.language-links { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.language-links a { padding-block: 8px; text-underline-offset: 5px; }
.language-links a[aria-current="page"] { font-weight: 600; text-decoration: underline; }
.language-links > span { opacity: .45; }
.language-links a:hover { text-decoration: underline; }
@media (min-width: 1001px) and (max-width: 1200px) {
  .header-inner { gap: 16px; }
  .desktop-nav { gap: 20px; margin-right: 0; font-size: 13px; }
  .header-actions { gap: 10px; }
  .header-actions .button-small { gap: 14px; padding-inline: 16px; }
}
.try-menu-wrap { position: relative; }
.try-menu-toggle { cursor: pointer; }
.try-menu-arrow { flex: none; transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
.try-menu-toggle[aria-expanded="true"] .try-menu-arrow { transform: rotate(90deg); }
.try-menu { position: absolute; z-index: 12; top: calc(100% + 12px); right: 0; display: grid; grid-template-rows: minmax(0, 0fr); width: 212px; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: grid-template-rows 320ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1); }
.try-menu.is-open { grid-template-rows: minmax(0, 1fr); opacity: 1; transform: translateY(0); pointer-events: auto; }
.try-menu::before { content: ""; position: absolute; inset: -12px 0 100%; }
.try-menu-inner { min-height: 0; overflow: hidden; padding: 6px; border: 1px solid var(--landing-border); border-radius: 14px; background: var(--landing-surface); box-shadow: 0 14px 32px #10251b18; }
.try-menu a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 14px; border-radius: 9px; font-size: 14px; }
.try-menu a:hover, .try-menu a:focus-visible { background: var(--landing-soft); color: var(--sp-forest); }
.link-arrow { width: 20px; height: 20px; flex: none; }
.try-menu .link-arrow { width: 17px; height: 17px; }
.button { min-height: 54px; display: inline-flex; justify-content: center; align-items: center; gap: 28px; padding: 16px 23px; border-radius: var(--sp-radius-control); border: 1px solid transparent; background: var(--sp-forest); color: #ffffff; font-size: 14px; font-weight: 500; white-space: nowrap; }
.button:hover { background: var(--sp-pine); }
.button span { font-size: 20px; line-height: 1; font-family: Arial, sans-serif; }
.button-small { min-height: 40px; padding: 9px 21px; gap: 25px; font-size: 13px; }
.menu-toggle { position: relative; display: none; border: 0; background: transparent; width: 44px; height: 44px; padding: 10px; }
.menu-toggle span { position: absolute; left: 22%; right: 22%; top: calc(50% - .75px); height: 1.5px; background: var(--landing-text); transition: transform 300ms ease, opacity 180ms ease; }
.menu-toggle span:first-child { transform: translateY(-7px); }
.menu-toggle span:last-child { transform: translateY(7px) scaleX(.65); transform-origin: left center; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); transform-origin: center; }
.mobile-nav { position: fixed; inset: calc(var(--header-height) + 1px) 0 0; height: calc(100dvh - var(--header-height) - 1px); background: var(--landing-bg); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 480ms cubic-bezier(.22, 1, .36, 1), visibility 480ms; }
.mobile-nav.is-open { visibility: visible; clip-path: inset(0); }
.mobile-nav-content { min-height: 100%; display: flex; flex-direction: column; gap: 48px; padding-top: clamp(28px, 7vh, 64px); padding-bottom: max(32px, env(safe-area-inset-bottom)); opacity: 0; transform: translateY(-16px); transition: opacity 220ms ease, transform 400ms cubic-bezier(.22, 1, .36, 1); }
.mobile-nav.is-open .mobile-nav-content { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.mobile-nav-links { display: flex; flex-direction: column; }
.mobile-nav-links a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--landing-border); font-size: clamp(28px, 5vw, 40px); font-weight: 500; letter-spacing: -.04em; }
.mobile-nav-links .link-arrow { width: 26px; height: 26px; color: var(--sp-pine); }
.mobile-nav-bottom { display: grid; gap: 18px; margin-top: auto; }
.mobile-nav-bottom .language-links { justify-content: center; color: var(--sp-forest); font-size: 13px; }
.mobile-nav-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mobile-nav-actions .button { justify-content: space-between; min-height: 62px; padding: 18px 22px; font-size: 15px; gap: 14px; }
.mobile-nav-actions .link-arrow { width: 30px; height: 30px; }
.mobile-nav-actions .button:hover { text-decoration: none; color: white; }
.mobile-nav-actions .mobile-login { background: var(--landing-soft); color: var(--sp-forest); border-color: var(--landing-border); }
.mobile-nav-actions .mobile-login:hover { background: #d9e4d2; color: var(--sp-forest); }
body.mobile-menu-open { overflow: hidden; }
@media (max-width: 420px) { .mobile-nav-actions { grid-template-columns: 1fr; } }
.hero { padding-top: 76px; padding-bottom: 88px; text-align: left; }
.hero-opening { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .95fr); align-items: center; gap: clamp(48px, 6vw, 96px); }
.hero-heading, .hero-copy { min-width: 0; }
.hero-copy { max-width: 460px; padding-top: 36px; }
.eyebrow { font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; }
.hero-heading > .eyebrow { color: var(--sp-pine); }
h1 { font-size: clamp(48px, 4.6vw, 68px); line-height: 1.06; font-weight: 600; letter-spacing: -.055em; margin-top: 24px; text-wrap: balance; }
h1 span { display: block; color: var(--sp-pine); }
.hero-description { font-size: 20px; line-height: 1.65; color: var(--landing-body); }
.text-link { display: inline-flex; gap: 20px; align-items: center; font-size: 14px; font-weight: 500; padding-bottom: 7px; border-bottom: 1px solid currentColor; }
.text-link:hover { color: var(--sp-pine); border-bottom-width: 2px; padding-bottom: 6px; }
.text-link span { font-size: 19px; line-height: 1; font-family: Arial, sans-serif; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 25px; }
.hero-actions .text-link { padding-top: 7px; color: var(--sp-forest); }
.video-trigger { min-height: 42px; gap: 9px; padding: 10px 15px; font-size: 13px; }
.video-trigger svg { width: 13px; height: 13px; }
.video-dialog { width: min(960px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); padding: 20px; border: 1px solid var(--landing-border); border-radius: 16px; background: var(--landing-surface); color: var(--landing-text); box-shadow: 0 20px 70px #0005; }
.video-dialog::backdrop { background: #07150dd9; }
.video-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.video-dialog-header h2 { font-size: 18px; font-weight: 500; }
.video-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--landing-soft); color: var(--sp-forest); font-size: 28px; line-height: 1; }
.video-close:hover { background: var(--landing-border); }
.video-dialog video { display: block; width: 100%; max-height: calc(100dvh - 140px); background: #000; }
@media (max-width: 900px) {
  .hero-opening { grid-template-columns: 1fr; gap: 28px; }
  .hero-copy { max-width: 620px; padding-top: 0; }
  .hero-description { font-size: 18px; }
}
.system-figure { --diagram-radius: 20px; width: calc(100% + var(--diagram-expand, 0px)); margin-top: 52px; margin-inline: calc(var(--diagram-expand, 0px) * -.5); border: 1px solid var(--landing-border-strong); border-radius: calc(var(--diagram-radius) * (1 - var(--diagram-progress, 0))); background: var(--sp-ivory); overflow: hidden; }
.figure-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 32px; text-align: left; }
.figure-heading { padding-top: 27px; }
.figure-heading .eyebrow { font-size: 11px; letter-spacing: .1em; }
.figure-label { font-size: 11px; color: var(--landing-muted); }
.diagram-stage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 30px; padding: 24px 32px 30px; text-align: left; }
.greenhouse-side { min-width: 0; }
.greenhouse-scene { position: relative; aspect-ratio: 4 / 3; }
.greenhouse-render { width: 100%; height: 100%; object-fit: contain; }
.wireless-point, .cloud-wireless { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sp-pine); box-shadow: 0 0 0 5px var(--sp-ivory); }
.wireless-point { position: absolute; transform: translate(-50%, -50%); }
.wireless-point img, .cloud-wireless img { width: 25px; height: 25px; }
.wireless-point small, .cloud-wireless small { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 17px; height: 17px; border: 2px solid var(--sp-ivory); border-radius: 50%; background: var(--sp-forest); color: var(--sp-ivory); font-size: 7px; line-height: 1; }
.outdoor-signal { left: 17%; top: 18%; }
.indoor-signal { left: 44.5%; top: 60%; }
.upper-box-signal { left: 98%; top: 33.3%; }
.lower-box-signal { left: 98%; top: 62%; }
.cloud-wireless { position: relative; width: 36px; height: 36px; box-shadow: none; }
.cloud-wireless img { width: 23px; height: 23px; }
.scene-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: var(--sp-pine); stroke-width: 1.5; stroke-dasharray: 4 5; }
.diagram-callout { position: absolute; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--landing-border-strong); border-radius: 10px; background: var(--landing-surface); box-shadow: 0 4px 16px #10251b06; }
.diagram-number { display: grid; place-items: center; flex-shrink: 0; width: 27px; height: 27px; border-radius: 50%; background: var(--sp-forest); color: var(--sp-ivory); font-size: 10px; font-weight: 500; }
.diagram-callout strong, .diagram-key strong { display: block; font-size: 12px; line-height: 1.5; font-weight: 500; }
.diagram-callout div > span { display: block; font-size: 10px; margin-top: 2px; color: var(--landing-muted); }
.leader-endpoints { fill: var(--sp-pine); stroke: var(--sp-ivory); stroke-width: 1.5; stroke-dasharray: none; }
.outdoor-callout { left: 20%; top: 1%; }
.indoor-callout { left: 0; bottom: 2%; }
.box-callout { right: 0; top: 1%; }
.diagram-key { display: none; }
.equipment-key { list-style: none; display: flex; justify-content: center; gap: 20px; padding: 10px 0 0; margin: 0; }
.equipment-key li { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--landing-body); }
.equipment-key svg { width: 19px; height: 19px; stroke: var(--sp-pine); fill: none; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.connected-side { position: relative; padding: 20px 0 0; }
.cloud-sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; text-align: center; }
.cloud-sources > div { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.cloud-sources > div > span:last-child { font-size: 9px; color: var(--landing-body); line-height: 1.5; }
.device-cloud-links { display: block; width: 100%; height: 34px; fill: none; stroke: var(--sp-pine); stroke-width: 1.2; stroke-dasharray: 3 4; }
.cloud-connection { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; text-align: center; }
.cloud-icon { width: 52px; height: 40px; flex-shrink: 0; stroke: var(--sp-pine); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cloud-connection strong { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; }
.cloud-connection span { display: block; font-size: 10px; color: var(--landing-muted); margin-top: 4px; }
.cloud-app-line { width: 1px; height: 24px; border-left: 1px dashed var(--sp-pine); margin-inline: auto; }
.web-app-illustration { background: var(--landing-surface); border: 1px solid var(--landing-border-strong); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px #0f3d2e09; }
.web-app-screenshot { display: block; width: 120.5%; max-width: none; height: auto; margin-left: -20.5%; }
.web-app-caption { padding: 16px 0 0; }
.web-app-caption > strong { font-size: 15px; font-weight: 500; }
.web-app-caption p { font-size: 11px; line-height: 1.7; color: var(--landing-body); margin-top: 7px; }
.web-app-caption > span { display: block; font-size: 9px; color: var(--landing-muted); margin-top: 10px; }
@media (min-width: 1001px) {
  .diagram-stage { width: calc(80% + 64px * var(--diagram-progress, 0)); max-width: calc(1200px + 64px * var(--diagram-progress, 0)); margin-inline: auto; grid-template-columns: minmax(0, 1fr) clamp(280px, 25vw, 340px); gap: calc(24px + 40px * var(--diagram-progress, 0)); padding: 18px 26px 24px; }
  .connected-side { padding-top: 12px; }
  .web-app-caption { padding-top: 12px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .diagram-stage { grid-template-columns: 1fr; }
  .connected-side { width: min(100%, 360px); margin-inline: auto; padding-top: 0; }
  .cloud-connection::before { display: none; }
  .equipment-key { padding-top: 20px; }
}
.section-space { padding-block: 108px; }
.section-intro { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.section-intro > .eyebrow { padding-top: 12px; }
h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.23; letter-spacing: -.045em; font-weight: 500; }
.section-intro div > p { max-width: 570px; font-size: 15px; line-height: 1.8; color: var(--landing-body); margin-top: 22px; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 50px; }
.product-card { border-top: 1px solid var(--landing-border-strong); padding: 25px 0 0; display: flex; flex-direction: column; }
.card-topline { display: flex; justify-content: space-between; align-items: flex-start; padding-right: 12px; height: 92px; }
.card-number { font-size: 11px; letter-spacing: .12em; color: var(--landing-muted); }
.product-icon { width: 42px; height: 42px; fill: none; stroke: var(--sp-pine); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
h3 { font-size: 20px; line-height: 1.4; letter-spacing: -.035em; font-weight: 500; }
.product-card > p { font-size: 14px; line-height: 1.85; color: var(--landing-body); margin-top: 16px; padding-right: 20px; flex: 1; }
.card-footer { font-size: 11px; color: var(--sp-pine); border-top: 1px solid var(--landing-border); margin-top: 28px; padding-top: 18px; }
.how-section { background: var(--landing-how-bg); color: var(--landing-text); padding-block: 88px; border-block: 1px solid var(--landing-border); }
.how-grid { display: block; }
.how-intro { text-align: center; margin-bottom: 52px; }
.how-intro .eyebrow { color: var(--sp-pine); margin-bottom: 16px; }
.how-intro h2 { font-size: clamp(28px, 2.6vw, 37px); }
.how-intro h2 span { color: var(--sp-pine); }
.light-link { color: var(--sp-forest); border-color: var(--sp-pine); margin-top: 28px; }
.light-link:hover { color: var(--sp-pine); }
.light-link:focus-visible { outline-color: var(--sp-pine); }
.how-stage { position: relative; }
.how-step-nav { display: flex; gap: 24px; justify-content: center; margin-bottom: 35px; }
.how-step-nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 12px; color: var(--landing-muted); }
.how-progress-track { display: none; }
.how-progress-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: #b5c5ac; flex-shrink: 0; }
.how-step-nav a:hover .how-progress-dot, .how-step-nav a.is-reached .how-progress-dot { background: var(--sp-pine); }
.how-step-nav a[aria-current="step"] .how-progress-dot { box-shadow: 0 0 0 6px #2e684f12; }
.how-panels { display: grid; gap: 80px; min-width: 0; }
.how-step { min-width: 0; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 84px; }
.how-copy { padding-left: 56px; }
.how-step-icon { width: 56px; height: 56px; fill: none; stroke: var(--sp-pine); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 26px; }
.how-icon-fill { fill: var(--sp-pine); stroke-width: 0; }
.how-step-topline { margin-bottom: 18px; color: var(--sp-pine); }
.how-step-topline .eyebrow { font-size: 11px; letter-spacing: .12em; }
.how-step h3 { font-size: clamp(34px, 3.2vw, 46px); letter-spacing: -.045em; line-height: 1.15; max-width: 480px; }
.how-copy > p { max-width: 445px; color: var(--landing-body); font-size: 15px; line-height: 1.9; margin-top: 24px; }
.how-visual { position: relative; width: 100%; background: var(--sp-ivory); border: 1px solid #c2ceb9; border-radius: 16px; overflow: hidden; }
.how-visual > img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.how-visual figcaption { position: absolute; bottom: 17px; left: 20px; right: 20px; color: var(--landing-muted); font-size: 10px; line-height: 1.5; }
.how-wireless-note { display: inline-flex; gap: 7px; align-items: center; }
.how-wireless-note img { width: 18px; height: 18px; background: var(--sp-pine); border-radius: 50%; padding: 3px; }
.how-app-visual { aspect-ratio: 3 / 2; min-height: 410px; padding: 28px 22px 42px; display: flex; align-items: center; }
/* Enhancement only: ordinary document scrolling drives the pinned product view. */
.how-section.is-scroll-story { height: calc(var(--how-stage-height) + var(--how-travel) + 176px); }
.is-scroll-story .how-grid { position: sticky; top: var(--how-sticky-top); }
.is-scroll-story .how-step-nav { position: absolute; z-index: 1; left: 0; top: 50%; width: 24px; height: 230px; transform: translateY(-50%); margin: 0; display: block; }
.is-scroll-story .how-progress-track { position: absolute; display: block; top: 0; bottom: 0; left: 11px; width: 2px; background: #b5c5ac; }
.is-scroll-story .how-progress-track > span { display: block; width: 100%; height: 100%; background: var(--sp-pine); transform: scaleY(var(--how-rail-progress, 0)); transform-origin: top; }
.is-scroll-story .how-step-nav a { position: absolute; left: -10px; top: 0; width: 44px; height: 44px; min-height: 0; transform: translateY(-50%); justify-content: center; }
.is-scroll-story .how-step-nav a:nth-of-type(2) { top: 50%; }
.is-scroll-story .how-step-nav a:nth-of-type(3) { top: 100%; }
.is-scroll-story .how-progress-dot { width: 9px; height: 9px; box-shadow: 0 0 0 4px var(--landing-how-bg); }
.is-scroll-story .how-step-nav a[aria-current="step"] .how-progress-dot { box-shadow: 0 0 0 4px var(--landing-how-bg), 0 0 0 9px #2e684f12; }
.is-scroll-story .how-nav-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-scroll-story .how-panels { gap: 0; }
.is-scroll-story .how-step { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.is-scroll-story .how-step.is-active { opacity: var(--how-step-opacity, 1); visibility: visible; }
.is-scroll-story .how-step.is-active > .how-copy { transform: translateY(var(--how-copy-y, 0px)); }
.is-scroll-story .how-step.is-active > .how-visual { transform: translateY(var(--how-image-y, 0px)); }
@media (min-width: 901px) and (max-height: 760px) {
  .is-scroll-story .how-intro { margin-bottom: 32px; }
  .is-scroll-story .how-intro .eyebrow { margin-bottom: 10px; }
  .is-scroll-story .how-intro h2 { font-size: 28px; }
  .is-scroll-story .how-step h3 { font-size: 35px; }
  .is-scroll-story .how-step-icon { width: 44px; height: 44px; margin-bottom: 18px; }
  .is-scroll-story .how-copy > p { font-size: 14px; margin-top: 18px; }
  .is-scroll-story .how-visual { height: calc(100vh - 320px); min-height: 0; aspect-ratio: auto; }
  .is-scroll-story .how-visual > img { height: 100%; object-fit: contain; }
  .is-scroll-story .how-app-visual { padding: 16px 18px 34px; }
}
@media (max-width: 900px) {
  .how-intro { margin-bottom: 30px; }
  .how-step-nav { gap: 24px; }
  .how-panels { gap: 50px; }
  .how-step { grid-template-columns: 1fr; gap: 24px; }
  .how-copy { padding-left: 0; }
  .how-copy > p { max-width: 560px; }
}
.news-section { padding-bottom: 24px; }
.news-heading { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 38px; }
.news-heading .eyebrow { color: var(--sp-pine); }
.news-heading > p { font-size: 13px; line-height: 1.8; color: var(--landing-muted); }
.news-controls:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.news-projects { display: flex; gap: 26px; }
.news-projects button { border: 0; border-bottom: 2px solid transparent; padding: 13px 0; background: transparent; color: var(--landing-muted); font-size: 13px; }
.news-projects button > span { font-size: 10px; margin-right: 10px; }
.news-projects button[aria-pressed="true"] { border-color: var(--sp-pine); color: var(--sp-forest); }
.news-projects button:hover { color: var(--sp-forest); }
.news-arrows { display: flex; align-items: center; gap: 8px; }
.news-counter { font-size: 11px; color: var(--landing-muted); font-variant-numeric: tabular-nums; margin-right: 14px; }
.news-arrows button { width: 42px; height: 42px; border: 1px solid var(--landing-border); border-radius: 50%; background: transparent; color: var(--sp-forest); font-size: 20px; font-family: Arial, sans-serif; }
.news-arrows button:hover { background: var(--landing-soft); border-color: var(--sp-pine); }
.news-stories { display: grid; gap: 24px; }
.news-card { display: grid; grid-template-columns: .85fr 1.15fr; gap: 38px; align-items: center; padding: 24px; border: 1px solid var(--landing-border); border-radius: 18px; background: var(--landing-surface); }
.news-card[hidden] { display: none; }
.news-copy { padding: 12px 12px 12px 10px; }
.news-copy .eyebrow { font-size: 10px; letter-spacing: .11em; color: var(--sp-pine); }
.news-category { display: block; margin-top: 11px; font-size: 11px; color: var(--landing-muted); }
.news-copy h3 { margin-top: 28px; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.18; letter-spacing: -.045em; }
.news-copy > p:not(.eyebrow) { margin-top: 20px; font-size: 13px; line-height: 1.9; color: var(--landing-body); max-width: 440px; }
.news-copy > p:not(.eyebrow) + p { margin-top: 12px; }
.news-project-name { display: block; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--landing-border); font-size: 11px; color: var(--sp-pine); }
.news-gallery { height: 430px; display: grid; grid-template-columns: 1.2fr .9fr; gap: 12px; min-width: 0; }
.news-gallery-upv { grid-template-rows: 1fr 1fr; }
.news-gallery-upv .news-photo-main { grid-row: 1 / 3; }
.news-photo { display: block; position: relative; min-width: 0; min-height: 0; border-radius: 10px; overflow: hidden; background: var(--landing-soft); }
.news-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1050px) { .news-card { gap: 24px; padding: 20px; } .news-gallery { height: 400px; gap: 10px; } .news-copy { padding-inline: 0; } .news-copy h3 { font-size: 30px; } }
@media (max-width: 760px) {
  .news-heading { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 25px; }
  .news-heading > p { font-size: 13px; }
  .news-controls:not([hidden]) { gap: 14px; flex-wrap: wrap; }
  .news-projects { gap: 22px; }
  .news-projects button { font-size: 12px; }
  .news-counter { display: none; }
  .news-arrows { gap: 6px; }
  .news-arrows button { width: 36px; height: 36px; }
  .news-card { grid-template-columns: 1fr; gap: 24px; padding: 18px; border-radius: 14px; }
  .news-copy { padding: 4px; }
  .news-copy h3 { font-size: 32px; margin-top: 22px; }
  .news-copy > p:not(.eyebrow) { font-size: 14px; }
  .news-project-name { margin-top: 22px; }
  .news-gallery { height: 320px; gap: 8px; }
  .news-photo { border-radius: 7px; }
}
.grower-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.grower-heading .eyebrow { color: var(--sp-pine); }
.testimonial-viewport { margin-top: 42px; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial-card { border: 1px solid var(--landing-border); border-radius: var(--sp-radius-card); padding: 28px; background: var(--landing-surface); display: flex; flex-direction: column; }
.quote-mark { display: block; color: var(--sp-pine); font-family: Georgia, serif; font-size: 58px; line-height: .85; }
.testimonial-card blockquote { font-size: 16px; line-height: 1.7; letter-spacing: -.015em; margin: 18px 0 32px; color: var(--landing-body); }
.testimonial-person { border-top: 1px solid var(--landing-border); padding-top: 20px; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 88px; }
.testimonial-person p { font-size: 19px; font-weight: 500; letter-spacing: -.035em; }
.testimonial-attribution { min-width: 0; }
.testimonial-attribution > span { display: block; font-size: 12px; line-height: 1.6; margin-top: 4px; color: var(--landing-muted); }
.testimonial-brand { width: 88px; height: 66px; flex-shrink: 0; }
.testimonial-brand img { width: 100%; height: 100%; object-fit: contain; }
/* Frame the official GROWA asset's transparent padding without altering it. */
.testimonial-brand-growa { position: relative; overflow: hidden; }
.testimonial-brand-growa img { position: absolute; width: 100px; max-width: none; height: auto; left: -6px; top: -5px; }
.testimonial-country { font-size: 30px; line-height: 1; padding-inline: 12px; flex-shrink: 0; }
.testimonial-controls { display: flex; align-items: center; gap: 10px; }
.testimonial-controls[hidden] { display: none; }
.testimonial-controls button { min-height: 42px; border: 1px solid var(--landing-border); border-radius: var(--sp-radius-control); background: transparent; color: var(--sp-forest); font: inherit; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.testimonial-next { width: 44px; }
.testimonial-next > span { font-size: 21px; }
.testimonial-controls button:hover { background: var(--landing-soft); border-color: var(--landing-border-strong); }
.grower-section.is-carousel .testimonial-viewport { overflow: hidden; }
.grower-section.is-carousel .testimonial-grid { display: flex; }
.grower-section.is-carousel .testimonial-card { flex: 0 0 calc((100% - 40px) / 3); min-width: 0; }
@media (min-width: 761px) and (max-width: 1050px) {
  .grower-section.is-carousel .testimonial-card { flex-basis: calc((100% - 20px) / 2); }
}
.site-footer { background: var(--sp-ink); color: var(--sp-ivory); padding-top: 42px; padding-bottom: 22px; }
.site-footer > .container { width: calc(100% - 112px); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.footer-brand p { font-size: 13px; line-height: 1.7; color: #d0ddca; margin-top: 15px; }
.footer-nav { display: flex; align-items: center; gap: 30px; font-size: 13px; }
.footer-nav a { padding-block: 12px; }
.footer-nav a:last-child { display: inline-flex; align-items: center; gap: 18px; padding: 13px 20px; background: var(--sp-pine); border-radius: var(--sp-radius-control); }
.footer-nav a:not(:last-child):hover, .site-footer .back-top:hover { color: var(--sp-mist); text-decoration: underline; text-underline-offset: 6px; }
.footer-nav a:last-child:hover { background: var(--sp-leaf); }
.site-footer a:focus-visible { outline-color: var(--sp-mist); }
.footer-wordmark { display: block; margin-top: 28px; }
.footer-wordmark svg { width: 100%; height: auto; opacity: .25; mask-image: linear-gradient(to bottom, #000 45%, #000c 60%, transparent 100%); }
.back-top { margin-left: auto; font-size: 12px; display: flex; gap: 14px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 8px; font-size: 11px; color: #d0ddca; }
.footer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.site-footer .language-links a:hover { color: var(--sp-ivory); }
@media (min-width: 1600px) { .container { width: min(1360px, calc(100% - 144px)); } }
@media (max-width: 1050px) { .container { width: calc(100% - 64px); } .desktop-nav { gap: 20px; margin-right: 0; } .header-inner { gap: 24px; } .how-grid { gap: 55px; } .product-grid { gap: 22px; } .testimonial-card { padding: 22px; } .section-intro { gap: 40px; } }
@media (max-width: 760px) {
  html { scroll-padding-top: 112px; }
  .container { width: calc(100% - 40px); }
  .site-header { --header-height: 68px; }
  .header-inner { gap: 16px; }
  .desktop-nav { display: none; }
  .header-actions { gap: 8px; }
  .menu-toggle { display: block; }
  .button-small { min-height: 42px; padding: 10px 13px; font-size: 12px; gap: 12px; }
  .hero { padding-top: 53px; padding-bottom: 56px; }
  .hero-heading > .eyebrow { font-size: 10px; letter-spacing: .11em; }
  h1 { font-size: clamp(41px, 8.8vw, 64px); margin-top: 24px; }
  .hero-description { font-size: 16px; line-height: 1.75; }
  .desktop-break { display: none; }
  .hero-actions { margin-top: 22px; }
  .system-figure { --diagram-radius: 14px; margin-top: 35px; }
  .figure-heading { margin-inline: 18px; gap: 12px; }
  .figure-heading { padding-top: 20px; }
  .figure-heading .eyebrow { font-size: 9px; }
  .figure-heading > .figure-label { display: none; }
  .diagram-stage { display: block; padding: 12px 18px 24px; }
  .greenhouse-scene { margin-inline: -10px; }
  .diagram-callout { padding: 0; border: 0; background: none; box-shadow: none; }
  .diagram-callout, .scene-leaders { display: none; }
  .wireless-point { width: 29px; height: 29px; box-shadow: 0 0 0 3px var(--sp-ivory); }
  .wireless-point img { width: 20px; height: 20px; }
  .wireless-point small { width: 15px; height: 15px; font-size: 6px; }
  .outdoor-signal { left: 21%; top: 17%; }
  .indoor-signal { left: 54%; top: 45.5%; }
  .upper-box-signal { left: 93%; top: 30%; }
  .lower-box-signal { left: 93%; top: 61%; }
  .diagram-callout .diagram-number { width: 23px; height: 23px; font-size: 9px; box-shadow: 0 0 0 3px var(--sp-ivory); }
  .outdoor-callout { left: 5%; top: 15%; }
  .indoor-callout { left: 40%; top: 41%; bottom: auto; }
  .box-callout { left: 80.5%; top: 59.5%; right: auto; }
  .diagram-key { display: grid; gap: 15px; list-style: none; padding: 8px 0 18px; margin: 0; }
  .diagram-key li { display: flex; align-items: center; gap: 12px; font-size: 11px; line-height: 1.8; color: var(--landing-muted); }
  .diagram-key strong { color: var(--landing-text); }
  .equipment-key { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 20px; padding: 20px 0; border-top: 1px solid var(--sp-border); }
  .equipment-key li { font-size: 12px; }
  .connected-side { border-top: 1px solid var(--sp-border); padding-top: 24px; }
  .cloud-connection strong { font-size: 13px; }
  .cloud-connection span { font-size: 11px; }
  .cloud-connection::before { display: none; }
  .web-app-caption p { font-size: 12px; }
  .web-app-caption > span { font-size: 10px; }
  .figure-label { font-size: 9px; }
  .section-space { padding-block: 66px; }
  .section-intro { grid-template-columns: 1fr; gap: 20px; }
  .section-intro > .eyebrow { padding: 0; }
  h2 { font-size: 32px; }
  .section-intro div > p { font-size: 14px; margin-top: 18px; }
  .product-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 34px; }
  .product-card { padding-top: 22px; }
  .card-topline { height: 64px; align-items: flex-start; }
  .product-card > p { max-width: 580px; padding-right: 0; margin-top: 12px; }
  .card-footer { margin-top: 20px; padding-top: 14px; }
  .how-section { padding-block: 58px; }
  .how-grid { grid-template-columns: 1fr; gap: 45px; }
  .how-intro h2 { font-size: 31px; }
  .how-step h3 { font-size: 34px; }
  .how-copy > p { font-size: 14px; }
  .how-step-topline .eyebrow { font-size: 9px; }
  .how-visual { border-radius: 12px; }
  .how-visual figcaption { left: 14px; right: 14px; bottom: 12px; font-size: 8px; }
  .how-app-visual { min-height: 320px; padding: 20px 14px 34px; }
  .grower-heading { align-items: center; }
  .testimonial-viewport { margin-top: 28px; }
  .testimonial-grid { grid-template-columns: 1fr; gap: 16px; }
  .grower-section.is-carousel .testimonial-card { flex-basis: 100%; }
  .testimonial-card { padding: 28px; }
  .testimonial-card blockquote { margin-block: 14px 24px; }
  .site-footer { padding-top: 34px; }
  .site-footer > .container { width: calc(100% - 40px); }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-brand img { width: 180px; }
  .footer-brand p { font-size: 12px; margin-top: 12px; }
  .footer-nav { flex-wrap: wrap; gap: 10px 24px; font-size: 12px; }
  .footer-nav a { padding-block: 8px; }
  .footer-nav a:last-child { gap: 10px; padding: 10px 14px; }
  .footer-wordmark { margin-block: 26px 12px; }
  .footer-bottom { flex-wrap: wrap; gap: 10px 20px; font-size: 10px; }
  .footer-bottom .back-top { font-size: 11px; }
}
@media (max-width: 390px) { .header-inner { gap: 8px; } .header-actions { gap: 0; } .button-small { padding: 10px; gap: 0; } .menu-toggle { width: 36px; padding-inline: 8px; } .hero > .eyebrow { font-size: 9px; } h1 { font-size: 39px; } .figure-heading .eyebrow { font-size: 8px; } }
@media (max-width: 360px) { .header-inner { width: calc(100% - 24px); gap: 4px; } .button-small { font-size: 11px; padding-inline: 8px; } .menu-toggle { width: 32px; } h1 { font-size: 35px; } }

/* Keep the complete brand lockup readable on phones. */
@media (max-width: 1000px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: block; }
  .header-actions > .try-menu-wrap { display: none; }
}
@media (max-width: 760px) {
  .brand-link { --brand-width: 180px; }
  .header-inner { gap: 12px; }
}
@media (max-width: 360px) {
  .brand-link { --brand-width: 180px; }
}

.how-app-visual.how-app-screenshot { aspect-ratio: 3 / 2; min-height: 0; padding: clamp(20px, 2.4vw, 32px) clamp(14px, 2vw, 28px) 12px; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.how-app-screenshot > img { display: block; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; object-position: top center; border: 1px solid var(--landing-border); border-radius: 8px; box-shadow: 0 10px 24px #10251b08; }
.how-app-screenshot > figcaption { position: static; font-size: 10px; line-height: 1.5; color: var(--landing-muted); }

.product-card .product-title { font-size: 20px; line-height: 1.4; letter-spacing: -.035em; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .header-logo-ready .brand-link, .header-logo-ready .brand-logo-lettering { transition: none; }
  .how-step-nav a { transition: none; }
  .try-menu, .try-menu-arrow { transition: none; }
  .mobile-nav, .mobile-nav-content, .menu-toggle span { transition: none; }
}

/* Legal navigation and readable, static policy pages. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-block: 18px; border-top: 1px solid #ffffff25; font-size: 12px; color: #d0ddca; }
.footer-legal a { padding-block: 8px; }
.footer-legal a:hover { color: var(--sp-ivory); text-decoration: underline; text-underline-offset: 5px; }
.legal-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; border-bottom: 1px solid var(--landing-border); }
.legal-header img { width: 184px; height: auto; }
.legal-back { font-size: 13px; }
.legal-back:hover { text-decoration: underline; text-underline-offset: 5px; }
.legal-main { max-width: 800px; padding-block: 72px 96px; }
.legal-main h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.12; letter-spacing: -.04em; margin-top: 18px; }
.legal-intro { margin-top: 24px; font-size: 18px; line-height: 1.75; color: var(--landing-body); }
.legal-updated { margin-top: 24px; font-size: 12px; color: var(--landing-muted); }
.legal-copy { margin-top: 44px; border-top: 1px solid var(--landing-border); }
.legal-copy section { margin-top: 32px; }
.legal-copy h2 { font-size: 21px; line-height: 1.4; letter-spacing: -.02em; }
.legal-copy p { margin-top: 12px; font-size: 15px; line-height: 1.85; color: var(--landing-body); overflow-wrap: anywhere; }
.legal-copy a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
 .legal-header { align-items: flex-start; flex-direction: column; gap: 16px; }
 .legal-main { padding-block: 44px 64px; }
 .footer-legal { gap: 4px 20px; }
}