/* ==========================================================================
   sms.css: the Smart Monitoring System page (sol-monitoring.html) only.

   Palette for this page: deep emerald, warm ivory and charcoal, with the
   company orange kept for what you click and for "Included". Everything is
   scoped to body.sms or to sms- classes, so site.css and every other page are
   untouched. Built on site.css: nav, mega menu, sheet, footer, buttons,
   language switch and entrances all come from there.
   ========================================================================== */

.sms{
  --em-950:#071A15; --em-900:#0B241E; --em-850:#0E2C25; --em-800:#12372E; --em-700:#184237;
  --em-600:#1F5A47; --em-500:#2D6E57; --em-400:#4F8C71; --em-300:#86B39A; --em-200:#BCD5C5; --em-100:#E1ECE4;
  --iv:#F6F3EA; --iv-2:#EEE9DC; --iv-3:#E5DECC; --paper:#FCFAF5;
  --ink:#13211C; --ch:#2A312D; --ch-2:#525D56; --ch-3:#5F6A63;
  --hair:#DDD6C5; --hair-2:#CCC4B0;
  --or:var(--accent,#E05616); --or-hi:var(--accent-hover,#F0752E); --or-ink:#B84510;
  --sms-subnav:0px;                  /* the page menu was removed; kept so the
                                        shared farm-pulse.css has its variable */
  --page-subnav:var(--sms-subnav);   /* read by farm-pulse.css */
  --sms-gap:clamp(72px,10.5vh,132px);
  background:var(--iv);
}
.sms main{background:var(--iv)}
.sms-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* anchors clear the fixed bar and the sticky page menu */
.sms main [id]{scroll-margin-top:calc(var(--nav-h) + 18px)}
/* over the dark bands that scroll as ordinary page, the bar keeps a dark ground
   (the same rule the home and agriculture pages use) */
.nav.over-flat:not(.menu-open){background:rgba(9,30,24,.86);border-bottom-color:rgba(246,243,234,.12);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}

/* ------------------------------ shared type ------------------------------ */
.sms-sec{position:relative;padding:var(--sms-gap) var(--pad);color:var(--ch)}
.sms-wrap{max-width:var(--maxw);margin:0 auto;position:relative}
.sms-k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--em-500);display:flex;align-items:center;gap:12px;margin:0 0 22px}
.sms-k::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6;flex:0 0 auto}
.sms-h2{font-family:var(--display);font-weight:300;font-size:clamp(2.15rem,4.4vw,3.8rem);
  line-height:1.03;letter-spacing:-.024em;color:var(--ink);max-width:17ch}
.sms-lede{margin-top:22px;color:var(--ch-2);font-size:clamp(1.02rem,1.22vw,1.18rem);line-height:1.62;max-width:56ch}
.sms-head{margin-bottom:clamp(40px,6vh,68px)}
/* heading on the left, its explanation on the right, so a wide screen is not
   half empty beside every heading */
.sms-head.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px clamp(32px,5vw,96px);
  align-items:end}
.sms-head.split .sms-lede{margin-top:0;max-width:46ch;justify-self:end;padding-bottom:.35em}
@media (max-width:900px){
  .sms-head.split{grid-template-columns:1fr}
  .sms-head.split .sms-lede{justify-self:start;padding-bottom:0}
}
.sms-mini{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;color:var(--ch-3);margin:0 0 10px;line-height:1.4}
.sms-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ch-3)}
.sms-tag::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid currentColor}
.sms-inc-tag{display:inline-flex;align-items:center;font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--or-ink);border:1px solid rgba(224,86,22,.45);
  background:rgba(224,86,22,.07);border-radius:999px;padding:4px 10px;line-height:1.2;white-space:nowrap}

/* ------------------------------ badge ------------------------------ */
.sms-badge{display:inline-flex;align-items:center;gap:10px;margin:0;
  font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:.01em;line-height:1.2;
  padding:9px 16px 9px 10px;border-radius:999px;background:var(--iv);color:var(--em-800);
  box-shadow:0 0 0 1px rgba(224,86,22,.55),0 10px 30px -12px rgba(0,0,0,.45)}
.sms-badge svg{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--or);color:#fff;padding:5px}
.sms-badge-dark{background:rgba(224,86,22,.14);color:#FFD9C2;box-shadow:inset 0 0 0 1px rgba(240,117,46,.6)}

/* ================================ 01 HERO ================================ */
.sms-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;background:var(--em-950);color:var(--iv);overflow:hidden;isolation:isolate}
/* The picture box keeps the photograph's own 16:10 shape and sits below the
   bar, right-aligned: on a wide screen the whole station stays in frame and
   clear of the menu, and the empty field on its left fades into the ground
   the words sit on. */
.sms-hero-media{position:absolute;z-index:-2;display:block;margin:0;right:0;bottom:0;
  top:calc(var(--nav-h) * .74);
  width:min(100%,calc((100vh - var(--nav-h) * .74) * 1.6));
  width:min(100%,calc((100svh - var(--nav-h) * .74) * 1.6));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.sms-hero-media img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 70px);mask-image:linear-gradient(180deg,transparent 0,#000 70px)}
.sms-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(7,26,21,.92) 0%,rgba(7,26,21,.8) 28%,rgba(7,26,21,.42) 50%,rgba(7,26,21,.06) 66%,rgba(7,26,21,0) 76%),
  linear-gradient(0deg,rgba(7,26,21,.9) 0%,rgba(7,26,21,.35) 22%,rgba(7,26,21,0) 42%),
  linear-gradient(180deg,rgba(7,26,21,.62) 0%,rgba(7,26,21,.18) 14%,rgba(7,26,21,0) 26%)}
.sms-hero-in{width:100%;max-width:calc(var(--maxw) + var(--pad) * 2);margin:0 auto;
  padding:calc(var(--nav-h) + clamp(40px,8vh,96px)) var(--pad) clamp(44px,8vh,92px);
  display:grid;grid-template-columns:minmax(0,1fr);align-items:end}
.sms-hero-copy{max-width:790px}
.sms-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sand);display:flex;align-items:center;gap:12px;margin:0 0 clamp(18px,2.6vh,28px)}
.sms-eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.sms-h1{font-family:var(--display);font-weight:300;color:var(--iv);margin:0;
  font-size:clamp(2.55rem,5.15vw,4.9rem);line-height:1.02;letter-spacing:-.026em;text-wrap:balance}
.sms-h1 span{display:block;color:var(--em-200)}
.sms-hero-lede{margin-top:clamp(18px,2.8vh,28px);max-width:52ch;color:rgba(246,243,234,.86);
  font-size:clamp(1.03rem,1.3vw,1.22rem);line-height:1.6}
.sms-hero .sms-badge{margin-top:clamp(22px,3.2vh,32px)}
.sms-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.4vh,34px)}
.sms-btn-ghost{border-color:rgba(246,243,234,.46);color:var(--iv)}
.sms-btn-ghost:hover{border-color:var(--iv);transform:translateY(-2px)}
/* The weighing platform sits with the words, not over the station: a small
   horizontal card on the dark side of the hero, clear of the photograph. */
.sms-hero-inset{margin:clamp(22px,3.2vh,32px) 0 0;width:max-content;max-width:100%;
  display:flex;align-items:center;gap:14px;padding:10px 20px 10px 12px;border-radius:20px;
  background:rgba(8,28,22,.52);border:1px solid rgba(246,243,234,.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.6)}
.sms-hero-inset svg{display:block;width:58px;height:auto;aspect-ratio:400/440;flex:0 0 auto;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.35))}
.sms-hero-inset figcaption{display:grid;gap:3px}
.sms-hero-inset b{font-family:var(--body);font-weight:600;font-size:13.5px;color:var(--iv);line-height:1.3}
.sms-hero-inset .sms-tag{color:rgba(246,243,234,.66)}
@media (max-width:560px){
  .sms-hero-inset{width:100%;max-width:340px;gap:12px;padding:10px 16px 10px 10px}
  .sms-hero-inset svg{width:46px}
  .sms-hero-inset b{font-size:12.5px}
}
.sms-hero-note{position:absolute;right:var(--pad);top:calc(var(--nav-h) + 14px);margin:0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(246,243,234,.6)}

@media (max-width:1100px){
  .sms-hero-in{grid-template-columns:1fr}
  .sms-hero-copy{max-width:min(600px,58vw)}
}
@media (max-width:760px){
  .sms-hero{min-height:0;justify-content:flex-start}
  .sms-hero-media{position:relative;inset:auto;top:auto;width:auto;height:min(62svh,560px);z-index:0;
    -webkit-mask-image:none;mask-image:none}
  .sms-hero-media img{object-position:50% 12%;-webkit-mask-image:none;mask-image:none}
  .sms-hero-media::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(7,26,21,.55) 0%,rgba(7,26,21,0) 22%,rgba(7,26,21,0) 60%,rgba(7,26,21,1) 100%)}
  .sms-hero::before{display:none}
  .sms-hero-in{padding:0 var(--pad) 46px;margin-top:-34px;position:relative;z-index:1}
  .sms-hero-copy{max-width:none}
  /* the card stays with the words here too, full width under the buttons */
  .sms-hero-inset{width:100%;max-width:none;margin-top:20px;padding:10px 16px 10px 10px;border-radius:18px}
  .sms-hero-inset b{font-size:12.5px}
  .sms-hero-inset .sms-tag{font-size:8.5px;letter-spacing:.12em}
  .sms-hero-note{top:calc(var(--nav-h) + 6px);left:var(--pad);right:auto}
  .sms-h1{font-size:clamp(2.1rem,9.3vw,2.55rem)}
  .sms-cta .btn{flex:1 1 100%}
}

/* ------------------------------ strip ------------------------------ */
.sms-strip{background:var(--em-900);color:var(--iv);border-top:1px solid rgba(246,243,234,.08);
  padding:0 var(--pad)}
.sms-strip ul{list-style:none;margin:0 auto;padding:0;max-width:var(--maxw);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sms-strip li{display:flex;align-items:center;gap:14px;padding:22px 18px;font-size:14.5px;font-weight:500;
  line-height:1.3;border-left:1px solid rgba(246,243,234,.1)}
.sms-strip li:first-child{border-left:0;padding-left:0}
.sms-strip svg{width:30px;height:30px;flex:0 0 auto;color:var(--em-300)}
.sms-strip li.is-inc svg{color:#F4A06C}
@media (max-width:900px){
  .sms-strip ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sms-strip li{padding:16px 12px;font-size:13.5px}
  .sms-strip li:nth-child(odd){border-left:0;padding-left:0}
  .sms-strip li:nth-child(n+3){border-top:1px solid rgba(246,243,234,.1)}
}

/* ============================ 02 THREE SIGNALS ============================ */
/* Each signal is a card on paper over the site's second ivory, with the emerald
   marks used elsewhere on the site: a numbered chip, a ringed vignette and
   emerald column labels. */
.sms-ov{background:var(--iv-2)}
/* the opening note takes an emerald rule, so the header reads as designed rather than plain */
.sms-ov .sms-head.split .sms-lede{border-left:2px solid var(--em-200);padding-left:clamp(16px,1.6vw,22px)}
@media (max-width:900px){.sms-ov .sms-head.split .sms-lede{border-left:0;padding-left:0}}
.sms-sig{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:clamp(14px,1.8vw,22px)}
.sms-sig-row{display:grid;grid-template-columns:minmax(290px,1.08fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3vw,48px);padding:clamp(24px,3.2vh,34px) clamp(22px,2.6vw,34px);
  background:var(--paper);border:1px solid var(--hair);border-radius:26px;
  position:relative;align-items:start;transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.sms-sig-row:hover{border-color:var(--em-200);box-shadow:0 26px 50px -42px rgba(19,33,28,.5)}
.sms-sig-id{display:flex;align-items:center;gap:clamp(16px,1.8vw,24px);position:relative;z-index:1}
.sms-vig{margin:0;flex:0 0 auto;width:clamp(112px,10.4vw,148px);aspect-ratio:1;border-radius:24px;overflow:hidden;
  box-shadow:0 18px 36px -26px rgba(19,33,28,.5);position:relative;
  outline:1px solid var(--em-100);outline-offset:4px}
.sms-vig svg{display:block;width:100%;height:100%}
.sms-sig-n{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:22px;
  padding:0 9px;border-radius:999px;background:var(--em-100);color:var(--em-600);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em}
.sms-sig-name{font-family:var(--display);font-weight:300;font-size:clamp(2.1rem,3.6vw,3.2rem);
  line-height:1;letter-spacing:-.026em;color:var(--ink);margin:8px 0 8px}
.sms-sig-where{margin:0;color:var(--ch-2);font-size:.95rem}
.sms-sig-where .sms-inc-tag{margin-left:8px;vertical-align:2px}
.sms-sig-col{padding-top:4px}
.sms-sig-col .sms-mini{color:var(--em-500)}
.sms-sig-col p{margin:0;color:var(--ch);font-size:1rem;line-height:1.66}
.sms-sig-col .sms-fine{margin-top:10px;font-size:.86rem;color:var(--ch-3);line-height:1.5}
.sms-sig-col a{color:var(--em-600);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;
  gap:8px;margin-top:14px;font-size:.95rem}
.sms-sig-col a::after{content:"\2193";transition:transform .35s var(--ease)}
.sms-sig-col a:hover::after{transform:translateY(3px)}
.sms-sig-end{display:inline-flex;align-items:center;gap:16px;margin-top:clamp(20px,2.6vh,28px);text-decoration:none;
  color:var(--ink);font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,1.6vw,1.35rem);
  padding-left:clamp(22px,2.6vw,34px);position:relative}
.sms-sig-end i{width:15px;height:15px;border-radius:50%;background:var(--em-600);
  box-shadow:0 0 0 6px rgba(45,110,87,.16);flex:0 0 auto}
.sms-sig-end span{border-bottom:1px solid var(--hair-2);padding-bottom:2px;transition:border-color .3s var(--ease)}
.sms-sig-end:hover span{border-color:var(--ink)}
@media (max-width:980px){
  .sms-sig-row{grid-template-columns:1fr 1fr;gap:22px 32px}
  .sms-sig-id{grid-column:1/-1}
  .sms-sig-end{padding-left:0}
}
@media (max-width:640px){
  .sms-sig-row{grid-template-columns:1fr;gap:18px}
  .sms-vig{width:104px;border-radius:22px}
}

/* ============================ 03 WEIGHT SENSOR ============================ */
.sms-w{background:var(--em-900);color:var(--iv);overflow:hidden}
.sms-w::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(50% 46% at 22% 58%,rgba(134,179,154,.16),transparent 70%),
  radial-gradient(44% 40% at 92% 6%,rgba(224,86,22,.10),transparent 70%)}
.sms-w .sms-h2{color:var(--iv);max-width:15ch;margin-top:22px}
.sms-w .sms-lede{color:rgba(246,243,234,.8)}
.sms-w-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4.4vw,72px);
  align-items:center}
.sms-w-vis{margin:0;position:relative;border-radius:30px;padding:clamp(20px,3vw,40px) clamp(14px,2.4vw,34px) 18px;
  background:radial-gradient(70% 62% at 50% 44%,rgba(246,243,234,.09),rgba(246,243,234,0) 72%),
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.18));
  border:1px solid rgba(246,243,234,.1)}
.sms-w-vis figcaption{position:absolute;left:22px;top:20px}
.sms-w-vis .sms-tag{color:rgba(246,243,234,.62)}
.sms-w-read{position:absolute;right:clamp(16px,2vw,26px);top:clamp(16px,2vw,24px);text-align:right;
  padding:12px 16px;border-radius:16px;background:rgba(7,26,21,.66);border:1px solid rgba(246,243,234,.14);
  min-width:148px}
.sms-w-read span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--em-300)}
.sms-w-read b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(1.9rem,3.2vw,2.6rem);
  letter-spacing:-.02em;line-height:1.05;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--iv)}
.sms-w-read i{display:block;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:rgba(246,243,234,.6);margin-top:4px;font-variant-numeric:tabular-nums}
.sms-w-read i:empty{display:none}
.sms-w-read .sms-fade{transition:opacity .28s var(--ease)}
.sms-w-read.swap .sms-fade{opacity:0}

/* the drawing's moving parts: water in, water out, water up. The growing medium
   darkens as it wets and lightens as it dries; the colour is a registered
   property so it can ease inside the drawing's <use> copy. */
@property --sms-medium{syntax:"<color>";inherits:true;initial-value:#7b5b3e}
.sms-w-vis{--sms-medium:#86654a;transition:--sms-medium 1.3s var(--ease)}
.sms-w-vis[data-state="after"]{--sms-medium:#3a2718}
.sms-w-vis[data-state="later"]{--sms-medium:#5e452f}
/* The moving water sits in small HTML layers over the drawing. Only transform and
   opacity change, so the browser moves them without repainting the drawing, and
   each loop runs only in the moment that shows it, only while on screen.
   1em inside .sms-fx is one unit of the drawing (its viewBox is 420 wide, from x -10, y -14). */
.sms-w-art{position:relative;container-type:inline-size}
.sms-w-art svg{display:block;width:100%;height:auto;max-height:560px;overflow:visible}
.sms-fx{position:absolute;inset:0;font-size:calc(100cqw / 420);pointer-events:none}
.sms-fx i{position:absolute;display:block;opacity:0;will-change:transform,opacity}
.sms-fx svg{display:block;width:100%;height:100%;overflow:visible}
.fx-sun{left:32em;top:30em;width:52em;height:52em;transition:opacity .6s var(--ease)}
.fx-drop{left:167.5em;top:200em;width:7em;height:7em;background:#9ED0EA;border-radius:0 50% 50% 50%;rotate:45deg}
.fx-drain{top:384em;width:6em;height:6em;background:#9ED0EA;border-radius:0 50% 50% 50%;rotate:45deg}
.fx-drain.d1{left:167em}.fx-drain.d2{left:245em}
.fx-vap{width:14em;height:46em}
.fx-vap path{fill:none;stroke:#E8F1EC;stroke-width:2.2;stroke-linecap:round}
.fx-vap.v1{left:135em;top:160em}.fx-vap.v2{left:189em;top:158em}.fx-vap.v3{left:255em;top:160em}
.fx-vap.v4{left:121em;top:70em}.fx-vap.v5{left:279em;top:50em}
.sms-w-vis[data-state="later"] .fx-sun{opacity:1}
.sms-w.play .sms-w-vis[data-state="after"] .fx-drop{animation:sms-fall 1.3s cubic-bezier(.5,0,1,1) infinite}
.sms-w.play .sms-w-vis[data-state="after"] .fx-drop.d2{animation-delay:.43s}
.sms-w.play .sms-w-vis[data-state="after"] .fx-drop.d3{animation-delay:.86s}
.sms-w.play .sms-w-vis[data-state="after"] .fx-drain{animation:sms-drain 1.9s ease-in infinite}
.sms-w.play .sms-w-vis[data-state="after"] .fx-drain.d2{animation-delay:.9s}
.sms-w.play .sms-w-vis[data-state="later"] .fx-vap{animation:sms-rise 3.4s ease-out infinite}
.sms-w.play .sms-w-vis[data-state="later"] .fx-vap.v2{animation-delay:1.1s}
.sms-w.play .sms-w-vis[data-state="later"] .fx-vap.v3{animation-delay:2.2s}
.sms-w.play .sms-w-vis[data-state="later"] .fx-vap.v4{animation-delay:.6s}
.sms-w.play .sms-w-vis[data-state="later"] .fx-vap.v5{animation-delay:1.7s}
@keyframes sms-fall{0%{translate:0 -6em;opacity:0}15%{opacity:1}85%{opacity:1}100%{translate:0 20em;opacity:0}}
@keyframes sms-drain{0%{translate:0 -4em;opacity:0}20%{opacity:.9}100%{translate:0 14em;opacity:0}}
@keyframes sms-rise{0%{translate:0 8em;opacity:0}30%{opacity:.7}100%{translate:0 -26em;opacity:0}}
/* the ring round the chosen hotspot rests while its section is off screen (sms.js adds .play) */
.sms-inc:not(.play) .sms-hs::before{animation-play-state:paused}

/* tabs: the weight demo's moments */
.sms-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:999px;max-width:100%;overflow-x:auto;
  scrollbar-width:none;background:rgba(246,243,234,.08);border:1px solid rgba(246,243,234,.14)}
.sms-tabs::-webkit-scrollbar{display:none}
.sms-tabs [role="tab"]{appearance:none;border:0;cursor:pointer;white-space:nowrap;min-height:44px;
  padding:0 18px;border-radius:999px;background:transparent;color:rgba(246,243,234,.78);
  font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:.005em;
  transition:background .3s var(--ease),color .3s var(--ease)}
.sms-tabs [role="tab"]:hover{color:var(--iv);background:rgba(246,243,234,.08)}
.sms-tabs [role="tab"][aria-selected="true"]{background:var(--iv);color:var(--em-900)}
.sms-tabs [role="tab"]:focus-visible{outline:2px solid var(--or-hi);outline-offset:2px;border-radius:999px}
/* without script the tabs would do nothing, so they are not shown */
html:not(.js) .sms-tabs{display:none}

.sms-w-demo{min-width:0}
/* ------------------------------ weight chart ------------------------------ */
.sms-chart{margin:22px 0 0;border-radius:22px;padding:18px 18px 14px 14px;
  background:rgba(7,26,21,.5);border:1px solid rgba(246,243,234,.12)}
.sms-chart-hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:0 2px 10px 6px}
.sms-chart-t{margin:0;font-size:13.5px;font-weight:600;color:var(--iv)}
.sms-chart-leg{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:rgba(246,243,234,.7)}
.sms-chart-leg span{display:inline-flex;align-items:center;gap:7px}
.sms-chart-leg i{display:inline-block;width:16px;height:2px;border-radius:2px;background:var(--em-200)}
.sms-chart-leg i.ev{width:10px;height:10px;border-radius:2px;background:rgba(111,180,214,.34);
  box-shadow:inset 0 0 0 1px rgba(142,200,228,.6)}
.sms-plot-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
.sms-yunit{grid-column:1;grid-row:1;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:rgba(246,243,234,.62);padding:0 8px 6px 0;text-align:right}
.sms-yax{grid-column:1;grid-row:2;position:relative;width:44px}
.sms-yax span{position:absolute;right:8px;transform:translateY(-50%);font-family:var(--mono);font-size:11px;
  color:rgba(246,243,234,.62);font-variant-numeric:tabular-nums;line-height:1}
.sms-plot{grid-column:2;grid-row:2;position:relative;height:clamp(210px,24vw,290px);
  border-left:1px solid rgba(246,243,234,.28);border-bottom:1px solid rgba(246,243,234,.28)}
.sms-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sms-plot .grid path{stroke:rgba(246,243,234,.09);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.sms-plot .ev-irr{fill:rgba(111,180,214,.22)}
.sms-plot .ev-drain{fill:rgba(111,180,214,.1);transition:fill .5s var(--ease)}
.sms-plot .area{fill:url(#smsChartFill);opacity:.9}
.sms-plot .ln{fill:none;stroke:rgba(188,213,197,.42);stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.sms-plot .seg{fill:none;stroke:var(--iv);stroke-width:3.2;vector-effect:non-scaling-stroke;stroke-linejoin:round;
  stroke-linecap:round;opacity:0;transition:opacity .45s var(--ease)}
.sms-xax{grid-column:2;grid-row:3;position:relative;height:28px}
.sms-xax span{position:absolute;top:8px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;
  color:rgba(246,243,234,.62);font-variant-numeric:tabular-nums;white-space:nowrap}
.sms-xax span:first-child{transform:none}
.sms-xax span:last-of-type{transform:translateX(-100%)}
.sms-xunit{position:absolute;right:0;top:-22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:rgba(246,243,234,.5)}
.sms-ev{position:absolute;top:-2px;transform:translateX(-4px);display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:#9ED0EA;white-space:nowrap;pointer-events:none}
.sms-ev svg{width:12px;height:12px;position:static}
.sms-ev-drain{top:auto;bottom:6px;color:rgba(158,208,234,.8);font-weight:500;opacity:0;transition:opacity .4s var(--ease)}
.sms-pt{position:absolute;left:var(--x);top:var(--y);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--em-900);border:2px solid rgba(188,213,197,.6);
  transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.sms-pl{position:absolute;left:var(--x);top:var(--y);font-family:var(--mono);font-size:11.5px;line-height:1.3;
  color:var(--iv);white-space:nowrap;opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
  font-variant-numeric:tabular-nums}
.sms-pl b{font-family:var(--body);font-weight:600;font-size:13px}
.sms-pl small{display:block;color:rgba(246,243,234,.6);font-size:10.5px}
/* each point says which side its label sits */
.sms-pl.l-ur{transform:translate(12px,-100%)}
.sms-pl.l-r{transform:translate(14px,-50%)}
.sms-pl.l-dr{transform:translate(12px,8px)}
.sms-pl.l-u{transform:translate(-50%,calc(-100% - 12px))}
.sms-pl.l-ul{transform:translate(calc(-100% - 12px),-100%)}
.sms-pl.l-dl{transform:translate(calc(-100% - 12px),8px)}

/* states: dim everything, then bring the part of the day in question forward */
.sms-chart[data-state] .ln{stroke:rgba(188,213,197,.3)}
.sms-chart[data-state="before"] .seg-before,
.sms-chart[data-state="after"] .seg-after,
.sms-chart[data-state="later"] .seg-later{opacity:1}
.sms-chart[data-state="before"] .p-800,
.sms-chart[data-state="after"] .p-830,.sms-chart[data-state="after"] .p-900,
.sms-chart[data-state="later"] .p-1400,.sms-chart[data-state="later"] .p-1800{
  transform:scale(1.25);border-color:var(--iv);background:var(--or)}
.sms-chart[data-state="before"] .pl-800,
.sms-chart[data-state="after"] .pl-830,.sms-chart[data-state="after"] .pl-900,
.sms-chart[data-state="later"] .pl-1400,.sms-chart[data-state="later"] .pl-1800{opacity:1}
.sms-chart[data-state="after"] .ev-drain{fill:rgba(111,180,214,.26)}
.sms-chart[data-state="after"] .sms-ev-drain{opacity:1}
/* no script: the whole day, every label */
html:not(.js) .sms-pl{opacity:1}
html:not(.js) .sms-plot .ln{stroke:var(--iv)}

.sms-w-panel{margin-top:18px;min-height:8.8em}
.sms-w-state h3{font-family:var(--body);font-size:.84rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--em-300);margin:0 0 8px;font-variant-numeric:tabular-nums}
.sms-w-state p{margin:0;color:rgba(246,243,234,.88);font-size:1.03rem;line-height:1.66;max-width:60ch}
html:not(.js) .sms-w-state+.sms-w-state{margin-top:18px}
.sms-demo-note{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;line-height:1.7;
  text-transform:uppercase;color:rgba(246,243,234,.52)}
.sms-w-more{margin-top:clamp(44px,6vh,72px);padding-top:clamp(28px,4vh,40px);
  border-top:1px solid rgba(246,243,234,.14)}
.sms-w-adv h3{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.3vw,2rem);color:var(--iv);
  letter-spacing:-.018em;margin-bottom:18px}
.sms-w-adv ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:rgba(246,243,234,.12);border:1px solid rgba(246,243,234,.12);border-radius:18px;overflow:hidden}
.sms-w-adv li{background:var(--em-900);padding:20px 20px 22px;color:rgba(246,243,234,.9);font-size:.98rem;line-height:1.55;
  display:flex;flex-direction:column;gap:12px}
.sms-w-adv li svg{width:24px;height:24px;color:var(--em-300)}
.sms-what{margin-top:clamp(18px,2.4vw,26px);border-radius:18px;border:1px solid rgba(246,243,234,.18);background:rgba(246,243,234,.04)}
.sms-what summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:20px 22px;font-family:var(--display);font-weight:400;font-size:clamp(1.12rem,1.6vw,1.3rem);
  color:var(--iv);letter-spacing:-.01em;min-height:44px}
.sms-what summary::-webkit-details-marker{display:none}
.sms-what summary:focus-visible{outline:2px solid var(--or-hi);outline-offset:3px;border-radius:18px}
.sms-what .sms-pm{flex:0 0 auto}
.sms-what .sms-a{padding:0 22px 22px;display:grid;gap:12px}
.sms-what .sms-a p{margin:0;color:rgba(246,243,234,.84);font-size:.98rem;line-height:1.66}
.sms-what .sms-a p b{color:var(--iv);font-weight:600}
@media (max-width:1000px){
  .sms-w-grid{grid-template-columns:1fr}
  .sms-w-vis{max-width:560px;margin:0 auto;width:100%}
  .sms-w-adv ul{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .sms-w-adv ul{grid-template-columns:1fr}
  .sms-w-read{min-width:0;padding:9px 12px}
  .sms-chart{padding:14px 12px 10px 8px}
  .sms-yax{width:36px}
  .sms-xax span:nth-child(even){display:none}
  .sms-yax span:nth-child(even){display:none}
  .sms-tabs [role="tab"]{padding:0 14px;font-size:13.5px}
  .sms-w .sms-tabs{display:flex;width:100%}
  .sms-w .sms-tabs [role="tab"]{flex:1 1 auto;padding:0 10px}
  .sms-ev-drain{display:none}
}

/* plus / minus used by every disclosure */
.sms-pm{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid currentColor;opacity:.75}
.sms-pm::before,.sms-pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;
  background:currentColor;transform:translate(-50%,-50%);transition:transform .35s var(--ease)}
.sms-pm::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] > summary .sms-pm::after{transform:translate(-50%,-50%) rotate(0deg)}

/* ============================== 04A TELEGRAM ============================== */
/* The bot preview (.fp-shell and everything in it) is the supplied component and
   is not touched anywhere. What this page re-skins is the editorial column beside
   it, so the words, the numbers and the button read as the rest of the site.
   Scoped to body.sms, so the other product pages keep the component as delivered. */
body.sms #jp-farm-pulse .fp-editorial .fp-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--em-500);display:flex;align-items:center;gap:12px}
body.sms #jp-farm-pulse .fp-editorial .fp-eyebrow::before{content:"";width:26px;height:1px;
  background:currentColor;opacity:.6;flex:0 0 auto}
body.sms #jp-farm-pulse .fp-editorial h2{font-family:var(--display);font-weight:300;color:var(--ink);
  font-size:clamp(2.15rem,4.4vw,3.6rem);line-height:1.03;letter-spacing:-.024em}
body.sms #jp-farm-pulse .fp-editorial h2 em{font-style:normal;color:var(--em-600)}
body.sms #jp-farm-pulse .fp-editorial .fp-lead{color:var(--ch-2);font-size:clamp(1.02rem,1.22vw,1.18rem);
  line-height:1.62;max-width:46ch}
body.sms #jp-farm-pulse .fp-editorial .fp-primary{background:var(--or);color:#fff;border:0;border-radius:999px;
  min-height:52px;padding:0 26px;font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:.01em;
  box-shadow:0 18px 32px -22px rgba(224,86,22,.85);transition:background .3s var(--ease),transform .3s var(--ease)}
body.sms #jp-farm-pulse .fp-editorial .fp-primary:hover{background:var(--or-hi);transform:translateY(-2px)}
body.sms #jp-farm-pulse .fp-editorial .fp-primary:focus-visible{outline:2px solid var(--or);outline-offset:3px}
body.sms #jp-farm-pulse .fp-editorial .fp-caption{color:var(--ch-3);font-size:.86rem}
body.sms #jp-farm-pulse .fp-editorial .fp-steps li{color:var(--ch-2);border-top:1px solid var(--hair)}
body.sms #jp-farm-pulse .fp-editorial .fp-steps li b{font-family:var(--mono);color:var(--em-500);
  font-weight:400;letter-spacing:.14em}
body.sms #jp-farm-pulse .fp-editorial .fp-weight{background:var(--paper);border:1px solid var(--hair);
  border-radius:20px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
body.sms #jp-farm-pulse .fp-editorial .fp-weight:hover{border-color:var(--em-300);
  box-shadow:0 24px 44px -38px rgba(19,33,28,.55)}
body.sms #jp-farm-pulse .fp-editorial .fp-weight strong{color:var(--ink)}
body.sms #jp-farm-pulse .fp-editorial .fp-weight small{color:var(--ch-3)}
body.sms #jp-farm-pulse .fp-editorial .fp-weight-icon{background:var(--em-100);color:var(--em-600)}
body.sms #jp-farm-pulse .fp-editorial .fp-arrow{color:var(--em-600)}
/* A footnote under the supplied component, on its own ground colour, so it
   reads as part of that section without touching anything inside it. */
.sms-fpnote{position:relative;z-index:1;background:#f5f2e9;padding:0 max(24px,calc((100% - 1240px) / 2)) 64px;margin:-24px 0 0}
.sms-fpnote p{margin:0;max-width:76ch;font-size:12.5px;line-height:1.7;color:#65746a}
@media (min-width:901px){.sms-fpnote{padding-left:max(var(--pad),calc((100% - var(--maxw)) / 2));
  padding-right:max(var(--pad),calc((100% - var(--maxw)) / 2))}}
@media (max-width:900px){.sms-fpnote{padding:0 24px 48px;margin-top:-12px}}
@media (max-width:680px){.sms-fpnote{padding:0 18px 42px;margin-top:-10px}}

/* ============================== 05 CONNECTS ============================== */
.sms-cx{background:var(--em-950);color:var(--iv);overflow:hidden}
.sms-cx::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(246,243,234,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(246,243,234,.05) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 80%)}
.sms-cx .sms-k{color:var(--em-300)}
.sms-cx .sms-h2{color:var(--iv)}
.sms-cx .sms-lede{color:rgba(246,243,234,.78)}
.sms-cx-grp{display:flex;align-items:center;gap:14px;margin-bottom:18px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--em-300)}
.sms-cx-grp::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(134,179,154,.5),rgba(134,179,154,0))}
.sms-cx-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(10px,1.2vw,18px);position:relative}
.sms-cx-node{position:relative;padding:18px 16px 20px;border-radius:18px;background:rgba(246,243,234,.04);
  border:1px solid rgba(246,243,234,.12);display:flex;flex-direction:column;gap:10px;min-width:0}
.sms-cx-node::after{content:"";position:absolute;top:39px;left:100%;width:clamp(10px,1.2vw,18px);height:2px;
  background:linear-gradient(90deg,rgba(134,179,154,.25),rgba(134,179,154,.9));z-index:1}
.sms-cx-node:last-child::after{display:none}
.sms-cx-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:rgba(134,179,154,.14);color:var(--em-200)}
.sms-cx-ico svg{width:24px;height:24px}
.sms-cx-n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--em-300)}
.sms-cx-node h3{font-family:var(--display);font-weight:400;font-size:clamp(1.02rem,1.25vw,1.18rem);
  line-height:1.2;letter-spacing:-.01em;color:var(--iv)}
.sms-cx-node p{margin:0;font-size:.88rem;line-height:1.52;color:rgba(246,243,234,.72)}
.sms-cx-node.is-link{border-style:dashed;background:transparent}
/* a reading in transit: one soft pulse per link, running left to right */
.sms-cx-node .pulse{position:absolute;top:36px;left:100%;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:var(--em-200);box-shadow:0 0 10px var(--em-300);opacity:0;z-index:2}
.sms-cx.play .sms-cx-node .pulse{animation:sms-hop 4.2s var(--ease) infinite}
.sms-cx-node:nth-child(2) .pulse{animation-delay:.7s!important}.sms-cx-node:nth-child(3) .pulse{animation-delay:1.4s!important}
.sms-cx-node:nth-child(4) .pulse{animation-delay:2.1s!important}.sms-cx-node:nth-child(5) .pulse{animation-delay:2.8s!important}
@keyframes sms-hop{0%{transform:translateX(0);opacity:0}6%{opacity:1}14%{transform:translateX(clamp(10px,1.2vw,18px));opacity:0}100%{opacity:0}}
.sms-cx-opt{margin-top:clamp(18px,2.6vh,26px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(10px,1.2vw,18px)}
.sms-cx-opt .sms-cx-grp{grid-column:1/5;align-self:center;margin:0}
.sms-cx-opt .sms-cx-node{grid-column:5/7;border-style:dashed;border-color:rgba(240,160,108,.55);
  background:rgba(224,86,22,.06);flex-direction:row;align-items:flex-start;gap:16px}
.sms-cx-opt .sms-cx-node::after{display:none}
.sms-cx-opt .sms-cx-node::before{content:"";position:absolute;left:calc(75% + 4px);bottom:100%;width:2px;
  height:clamp(18px,2.6vh,26px);background:repeating-linear-gradient(180deg,rgba(240,160,108,.7) 0 4px,transparent 4px 8px)}
.sms-cx-opt .sms-cx-ico{background:rgba(224,86,22,.14);color:#F4A06C;flex:0 0 auto}
.sms-cx-opt .sms-cx-n{color:#F4A06C}
.sms-cx-opt .sms-cx-grp{color:#F4A06C}
.sms-cx-opt .sms-cx-grp::after{background:linear-gradient(90deg,rgba(240,160,108,.5),rgba(240,160,108,0))}
.sms-cx-notes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);margin-top:clamp(40px,6vh,64px);
  padding-top:clamp(26px,4vh,36px);border-top:1px solid rgba(246,243,234,.14)}
.sms-cx-notes h3{font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,1.7vw,1.45rem);color:var(--iv);
  letter-spacing:-.012em;margin-bottom:10px}
.sms-cx-notes p{margin:0;color:rgba(246,243,234,.78);line-height:1.66;font-size:1rem;max-width:56ch}
@media (max-width:1100px){
  .sms-cx-flow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}
  .sms-cx-node:nth-child(3)::after{display:none}
  .sms-cx-node:nth-child(3) .pulse{display:none}
  .sms-cx-opt{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sms-cx-opt .sms-cx-grp{grid-column:1/2}
  .sms-cx-opt .sms-cx-node{grid-column:2/4}
}
@media (max-width:700px){
  .sms-cx-flow{grid-template-columns:1fr;gap:14px;padding-left:22px}
  .sms-cx-flow::before{content:"";position:absolute;left:5px;top:22px;bottom:22px;width:2px;
    background:linear-gradient(180deg,rgba(134,179,154,.3),rgba(134,179,154,.9))}
  .sms-cx-node{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:14px 14px 16px}
  .sms-cx-node::before{content:"";position:absolute;left:-22px;top:32px;width:12px;height:12px;border-radius:50%;
    background:var(--em-950);border:2px solid var(--em-300)}
  .sms-cx-node::after,.sms-cx-node .pulse{display:none}
  .sms-cx-node h3{flex:1 1 60%}
  .sms-cx-node p{flex:1 1 100%}
  .sms-cx-n{display:none}
  .sms-cx-opt{grid-template-columns:1fr;padding-left:22px}
  .sms-cx-opt .sms-cx-grp,.sms-cx-opt .sms-cx-node{grid-column:1/-1}
  .sms-cx-opt .sms-cx-node::before{right:auto;left:-17px;bottom:auto;top:-18px;height:50px}
  .sms-cx-notes{grid-template-columns:1fr}
}

/* ============================== 06 INCLUDED ============================== */
.sms-inc-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.4vw,72px);align-items:center}
.sms-inc-fig{margin:0;position:relative;border-radius:30px;overflow:hidden;background:var(--paper);
  border:1px solid var(--hair);box-shadow:0 40px 70px -50px rgba(19,33,28,.5)}
.sms-inc-art{position:relative}
.sms-inc-fig svg{display:block;width:100%;height:auto}
.sms-inc-fig figcaption{position:absolute;left:20px;bottom:16px;right:20px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(246,243,234,.7);line-height:1.6}
.sms-part{transition:opacity .45s var(--ease),filter .45s var(--ease)}
/* the parts not in question fade to a pale, opaque grey (never see-through) */
.js .sms-inc-fig[data-active] .sms-part{filter:grayscale(1) brightness(1.18) contrast(.62)}
.js .sms-inc-fig[data-active="solar"] .part-solar,.js .sms-inc-fig[data-active="logger"] .part-logger,
.js .sms-inc-fig[data-active="lora"] .part-lora,.js .sms-inc-fig[data-active="probe"] .part-probe,
.js .sms-inc-fig[data-active="weather"] .part-weather,.js .sms-inc-fig[data-active="weight"] .part-weight{opacity:1;filter:none}
.sms-hs{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;
  border:0;padding:0;background:transparent;cursor:pointer;border-radius:50%;display:grid;place-items:center;z-index:2}
.sms-hs .dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--iv);color:var(--em-800);font-family:var(--mono);font-size:12px;font-weight:600;
  box-shadow:0 0 0 2px var(--em-700),0 8px 18px -6px rgba(0,0,0,.5);transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.sms-hs::before{content:"";position:absolute;inset:5px;border-radius:50%;border:2px solid var(--iv);opacity:0}
.sms-hs:hover .dot{transform:scale(1.1)}
.sms-hs[aria-pressed="true"] .dot{background:var(--or);color:#fff;box-shadow:0 0 0 2px #fff,0 8px 18px -6px rgba(0,0,0,.5)}
.sms-hs[aria-pressed="true"]::before{animation:sms-ring 2.2s var(--ease) infinite}
@keyframes sms-ring{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.65);opacity:0}}
.sms-hs:focus-visible{outline:2px solid var(--or);outline-offset:2px;border-radius:50%}
.sms-hs .lbl{position:absolute;left:calc(100% - 2px);top:50%;transform:translate(0,-50%);white-space:nowrap;
  background:var(--em-900);color:var(--iv);font-family:var(--body);font-size:12.5px;font-weight:600;padding:6px 11px;
  border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.sms-hs.lbl-left .lbl{left:auto;right:calc(100% - 2px)}
.sms-hs:hover .lbl,.sms-hs:focus-visible .lbl{opacity:1}
html:not(.js) .sms-hs{display:none}
.sms-inc-panel{min-height:320px;display:flex;flex-direction:column;justify-content:center}
.sms-inc-item{padding:4px 0}
.js .sms-inc-item{animation:sms-in .45s var(--ease)}
@keyframes sms-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html:not(.js) .sms-inc-item+.sms-inc-item{margin-top:26px;padding-top:26px;border-top:1px solid var(--hair)}
.sms-inc-item .sms-inc-cat{margin:0 0 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ch-3)}
.sms-inc-cat b{font-weight:400;color:var(--em-500)}
.sms-inc-item h3{font-family:var(--display);font-weight:300;font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.05;
  letter-spacing:-.022em;color:var(--ink);margin:0 0 16px}
.sms-inc-item p{margin:0;color:var(--ch);font-size:1.04rem;line-height:1.68;max-width:48ch}
.sms-inc-item .sms-fine{margin-top:12px;color:var(--ch-3);font-size:.9rem}
.sms-inc-hint{margin-top:22px;color:var(--ch-3);font-size:.9rem}
html:not(.js) .sms-inc-hint{display:none}
/* Two matched cards: same paper, same rhythm, equal height. What separates them
   is the chip in the header, not a different frame. */
.sms-inc-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);
  margin-top:clamp(40px,6vh,64px);align-items:stretch}
.sms-inc-box{display:flex;flex-direction:column;border-radius:24px;padding:clamp(24px,2.6vw,32px);
  background:var(--paper);border:1px solid var(--hair)}
.sms-inc-box h3{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:400;
  font-size:clamp(1.22rem,1.7vw,1.45rem);color:var(--ink);letter-spacing:-.012em;margin:0}
.sms-inc-box h3 svg{width:22px;height:22px;color:var(--em-600);flex:0 0 auto}
.sms-inc-box h3 .sms-inc-ic{flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:var(--em-100);
  display:grid;place-items:center}
.sms-inc-box > p{margin:12px 0 0;color:var(--ch-3);font-size:.92rem;line-height:1.55}
.sms-inc-box .sms-inc-chip{align-self:flex-start;margin-top:14px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--em-600);
  border:1px solid var(--em-200);border-radius:999px;padding:6px 12px}
.sms-inc-box ul{list-style:none;margin:18px 0 0;padding:0}
.sms-inc-box li{padding:12px 0;border-top:1px solid var(--hair);color:var(--ch);font-size:.98rem;line-height:1.5;
  display:flex;gap:12px}
.sms-inc-box li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--em-400);margin-top:9px}
.sms-inc-box.cfg li::before{background:transparent;border:1.5px solid var(--em-400)}
.sms-inc-foot{margin:22px 0 0;color:var(--ch-3);font-size:.92rem}
@media (max-width:980px){
  .sms-inc-grid{grid-template-columns:1fr}
  .sms-inc-fig{max-width:620px;margin:0 auto;width:100%}
  .sms-inc-panel{min-height:0}
  .sms-inc-more{grid-template-columns:1fr}
}
@media (max-width:980px){
  .sms-inc-fig figcaption{position:static;padding:12px 18px 14px;color:var(--ch-3);background:var(--paper)}
}
@media (max-width:560px){ .sms-hs .lbl{display:none} }

/* ============================ 07 APPLICATIONS ============================ */
.sms-app-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);grid-template-rows:auto auto;
  gap:clamp(14px,1.8vw,24px)}
.sms-use{position:relative;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:var(--paper);
  border:1px solid var(--hair);margin:0}
.sms-use-a{grid-row:1/3}
.sms-use-b,.sms-use-c{flex-direction:row}
.sms-use figure{margin:0;position:relative;overflow:hidden;background:var(--iv-3)}
/* the photographs fill their frames without setting the height: the words do */
.sms-use-a figure{flex:1 1 auto;min-height:320px}
.sms-use-b figure,.sms-use-c figure{flex:0 0 44%;min-height:270px}
.sms-use img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.sms-use:hover img{transform:scale(1.03)}
.sms-use figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 12px;
  background:linear-gradient(0deg,rgba(7,26,21,.78),rgba(7,26,21,0));color:rgba(246,243,234,.9);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;line-height:1.55}
.sms-use-tx{padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:10px}
.sms-use-a .sms-use-tx{padding:clamp(24px,2.8vw,38px)}
.sms-use-sig{display:flex;flex-wrap:wrap;gap:6px}
.sms-use-sig span{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--em-600);background:var(--em-100);
  border-radius:999px;padding:4px 10px}
.sms-use h3{font-family:var(--display);font-weight:300;font-size:clamp(1.55rem,2.4vw,2.2rem);line-height:1.08;
  letter-spacing:-.02em;color:var(--ink);margin-top:4px}
.sms-use-a h3{font-size:clamp(1.9rem,3.2vw,2.8rem)}
.sms-use p{margin:0;color:var(--ch-2);font-size:.99rem;line-height:1.62}
.sms-use p b{color:var(--ink);font-weight:600}
@media (max-width:900px){
  .sms-app-grid{grid-template-columns:1fr}
  .sms-use-a{grid-row:auto}
  .sms-use-a figure{aspect-ratio:4/3;min-height:0;flex:none}
}
@media (max-width:620px){
  .sms-use-b,.sms-use-c{flex-direction:column}
  .sms-use-b figure,.sms-use-c figure{aspect-ratio:4/3;flex:none;min-height:0}
}

/* ============================ 08 INSTALLATION ============================ */
.sms-ins{background:var(--iv-2)}
.sms-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.4vw,34px);counter-reset:st;position:relative}
.sms-steps::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:1px;background:var(--hair-2)}
.sms-step{position:relative}
.sms-step .no{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--iv-2);border:1px solid var(--em-500);color:var(--em-700);font-family:var(--mono);font-size:13px}
.sms-step:first-child .no{background:var(--em-800);border-color:var(--em-800);color:var(--iv)}
.sms-step h3{font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.15;
  letter-spacing:-.014em;color:var(--ink);margin:20px 0 10px}
.sms-step p{margin:0;color:var(--ch-2);font-size:.97rem;line-height:1.6}
.sms-shape{margin-top:clamp(40px,6vh,64px);border-radius:26px;background:var(--paper);border:1px solid var(--hair);
  padding:clamp(24px,3vw,40px)}
.sms-shape h3{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.3vw,2rem);color:var(--ink);
  letter-spacing:-.018em;margin-bottom:clamp(18px,2.6vh,26px)}
.sms-shape dl{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,34px)}
.sms-shape dt{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink);font-size:1rem}
.sms-shape dt svg{width:24px;height:24px;color:var(--em-500);flex:0 0 auto}
.sms-shape dd{margin:8px 0 0;color:var(--ch-2);font-size:.95rem;line-height:1.6}
@media (max-width:980px){
  .sms-steps{grid-template-columns:1fr 1fr;row-gap:34px}
  .sms-steps::before{display:none}
  .sms-shape dl{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .sms-steps{grid-template-columns:1fr;gap:0;padding-left:0}
  .sms-step{display:grid;grid-template-columns:48px 1fr;column-gap:18px;padding-bottom:26px}
  .sms-step::before{content:"";position:absolute;left:24px;top:48px;bottom:0;width:1px;background:var(--hair-2)}
  .sms-step:last-child::before{display:none}
  .sms-step h3{margin:10px 0 8px}
  .sms-step h3,.sms-step p{grid-column:2}
  .sms-step .no{grid-row:1/3}
  .sms-shape dl{grid-template-columns:1fr}
}

/* =============================== 09 ENQUIRE =============================== */
/* the other-systems section now sits above it, so it opens close, as on the sibling pages */
.sms-enq{padding-top:calc(var(--sms-gap) * .35);padding-bottom:calc(var(--sms-gap) * .8)}
.sms-enq-card{position:relative;overflow:hidden;border-radius:34px;background:var(--em-850);color:var(--iv);
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4.4vw,72px);
  padding:clamp(28px,5vw,72px)}
.sms-enq-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(52% 44% at 8% 4%,rgba(134,179,154,.16),transparent 70%),
  radial-gradient(44% 40% at 96% 96%,rgba(224,86,22,.1),transparent 70%)}
.sms-enq-card > *{position:relative}
.sms-enq .sms-k{color:var(--em-300)}
.sms-enq .sms-h2{color:var(--iv);max-width:13ch}
.sms-enq .sms-lede{color:rgba(246,243,234,.8)}
.sms-enq-call{margin-top:clamp(24px,4vh,40px);display:grid;gap:6px}
.sms-enq-call span{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--em-300)}
.sms-enq-call a{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:-.015em;
  color:var(--iv);text-decoration:none;border-bottom:1px solid rgba(246,243,234,.3);padding-bottom:6px;
  justify-self:start;transition:border-color .3s var(--ease)}
.sms-enq-call a:hover{border-color:var(--iv)}
.sms-form{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px;align-content:start}
.sms-field{display:grid;gap:8px;min-width:0}
.sms-field.full{grid-column:1/-1}
.sms-field label{font-size:13px;font-weight:600;color:var(--em-200);letter-spacing:.01em}
.sms-field input,.sms-field select{width:100%;min-height:52px;border-radius:14px;border:1px solid rgba(246,243,234,.22);
  background:rgba(7,26,21,.45);color:var(--iv);font-family:var(--body);font-size:1rem;padding:0 16px;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.sms-field input::placeholder{color:rgba(246,243,234,.42)}
.sms-field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6F3EA' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.sms-field select option{color:#13211C;background:#fff}
.sms-field input:hover,.sms-field select:hover{border-color:rgba(246,243,234,.4)}
.sms-field input:focus,.sms-field select:focus{outline:none;border-color:var(--or-hi);background:rgba(7,26,21,.65);
  box-shadow:0 0 0 3px rgba(224,86,22,.22)}
.sms-form-act{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.sms-form-act .btn{flex:1 1 auto;white-space:nowrap}
.sms-form-act .btn svg{width:20px;height:20px;flex:0 0 auto}
.sms-btn-line{border-color:rgba(246,243,234,.46);color:var(--iv)}
.sms-btn-line:hover{border-color:var(--iv);transform:translateY(-2px)}
.sms-form-note{grid-column:1/-1;margin:2px 0 0;font-size:.86rem;color:rgba(246,243,234,.66);line-height:1.55}
@media (max-width:900px){.sms-enq-card{grid-template-columns:1fr}}
@media (max-width:560px){
  .sms-form{grid-template-columns:1fr}
  .sms-enq-card{border-radius:26px}
}
/* the narrowest phones: the button words may take two lines rather than push the card wide */
@media (max-width:420px){
  .sms-form-act .btn{white-space:normal;flex-basis:100%;text-align:center}
}

/* ============================== touch targets ============================== */
@media (max-width:820px),(pointer:coarse){
  .sms-sig-col a,.sms-sig-end,.sms-qa .sms-a a{min-height:44px;display:inline-flex;align-items:center}
}

/* =============================== the vignettes =============================== */
.sms-vig-soil{background:#6b5037}
.sms-vig-weather{background:linear-gradient(180deg,#DDE9E4,#F3F0E6)}
.sms-vig-weight{background:radial-gradient(80% 70% at 50% 40%,#1F5A47,#0E2C25)}

/* ============================== reduced motion ============================== */
@media (prefers-reduced-motion:reduce){
  .sms-subnav{transition:none}
  .sms-fx .fx-drop,.sms-fx .fx-drain,.sms-fx .fx-vap{display:none}
  .sms-hs::before{display:none}
  .sms-cx .pulse{display:none}
}

/* ================================== print ================================== */
@media print{
  @page{margin:14mm 12mm}
  .sms{background:#fff!important;color:#111}
  .sms main{background:#fff!important}
  .nav,.mega,.megaveil,.sheet,.skip,.env,.sms-subnav,.sms-float,.sms-tabs,.sms-hs,.sms-hero-inset,
  .sms-inc-hint,.sms-w-read,.sms-cx-node .pulse,.fp-reset,.fp-primary,.fp-caption,.fp-weight,footer .fnav{display:none!important}
  .rise,.stag>*{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important;box-shadow:none!important}
  .sms-sec{padding:12mm 0!important;break-inside:auto}
  .sms-wrap{max-width:none}
  .sms-h2{font-size:24pt;color:#111!important}
  .sms-lede,.sms-sec p,.sms-sec li,.sms-sec dd{color:#222!important}
  .sms-k,.sms-mini,.sms-tag{color:#2D6E57!important}
  /* the hero prints as a picture with its words under it */
  .sms-hero{min-height:0!important;background:#fff!important;color:#111!important;display:block}
  .sms-hero::before{display:none}
  .sms-hero-media{position:static!important;height:auto!important}
  .sms-hero-media img{height:auto!important;max-height:90mm;object-fit:cover}
  .sms-hero-media::after{display:none!important}
  .sms-hero-in{padding:8mm 0 0!important;margin:0!important;display:block}
  .sms-h1,.sms-h1 span{color:#111!important;font-size:30pt}
  .sms-hero-lede,.sms-eyebrow,.sms-hero-note{color:#333!important;position:static}
  .sms-cta{display:none}
  .sms-badge{box-shadow:none;border:1px solid #E05616}
  .sms-strip{background:#fff!important;color:#111!important;border:0;padding:0}
  .sms-strip li{border-color:#ccc!important}
  /* dark bands print light */
  .sms-w,.sms-cx,.sms-enq-card{background:#fff!important;color:#111!important}
  .sms-w::before,.sms-cx::before,.sms-enq-card::before{display:none}
  .sms-w .sms-h2,.sms-cx .sms-h2,.sms-enq .sms-h2,.sms-w-adv h3,.sms-cx-node h3,.sms-cx-notes h3,.sms-what summary{color:#111!important}
  .sms-w .sms-lede,.sms-cx .sms-lede,.sms-enq .sms-lede,.sms-w-state p,.sms-cx-node p,.sms-cx-notes p,.sms-what .sms-a p,.sms-w-adv li,.sms-demo-note,.sms-form-note{color:#222!important}
  .sms-w-vis{background:#0E2C25!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;max-width:110mm;margin:0 auto}
  .sms-chart{background:#0E2C25!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}
  .sms-what .sms-a p b{color:#111!important}
  .sms-chart .sms-chart-t{color:#F6F3EA!important}
  .sms-chart .sms-chart-leg{color:rgba(246,243,234,.78)!important}
  .sms-w-adv li{background:#fff!important}
  .sms-w-adv ul{background:#ccc!important}
  .sms-w-state[hidden],.sms-w-state{display:block!important;margin-top:4mm}
  .sms-pl{opacity:1!important}
  .sms-plot .seg{opacity:0!important}
  .sms-cx-node{background:#fff!important;border-color:#bbb!important;break-inside:avoid}
  .sms-cx-ico{background:#eef3ef!important;color:#2D6E57!important}
  /* every part of the station, listed */
  .sms-inc-item[hidden]{display:block!important}
  .sms-inc-item{animation:none!important;margin-top:5mm}
  .sms-inc-fig{max-width:120mm;break-inside:avoid}
  .js .sms-inc-fig[data-active] .sms-part{filter:none!important}
  .sms-use,.sms-step,.sms-inc-box,.sms-qa{break-inside:avoid}
  .sms-use figcaption{position:static;background:none;color:#444}
  details > .sms-a{display:grid!important}
  details::details-content{content-visibility:visible!important;display:block!important}
  .sms-form,.sms-float{display:none!important}
  .sms-enq-call a{color:#111!important}
  .sms-form{display:none!important}
  .sms-enq-card{background:#fff!important;color:#111!important;padding:0!important}
  .sms-enq-card::before{display:none}
  .sms-enq .sms-h2,.sms-enq-call a{color:#111!important}
  #jp-farm-pulse{padding:10mm 0!important;break-inside:avoid}
  .sms-fpnote{padding:0 0 6mm!important;margin:0!important;background:#fff!important}
  footer{background:#fff!important;color:#111!important}
  footer p,footer .fmeta,footer .fbot{color:#333!important}
  footer .logo{filter:none!important}
}