/* SALATTO public page, mock-up #1064 v05.3. Shared by the EN, TH and RU pages.
   Two themes: light by default, dark by the device setting or the switch in the header (data-theme).
   Font: exactly the app's stack (Tailwind default sans); Thai comes from the system font, as in the app. */

/* Layout v05.2: a "soon" bar, a hero with the main promise and the large plate, four photo cards, the app in four
   phones (the video enlarges), short facts with device sync first, the Pro band for growers who sell, two plan
   cards, questions, the closing card (an invitation to a first step, the button, the plate and an open sunny
   photo). 1200 px column.
   Colours v05.3 (PO 03.11.2026): only the two approved brand colours carry accents - the green and the ONE product
   magenta #C128D2 (DEC-037; night shade #D065DB with dark text on it, the same values as frontend/src/index.css).
   The former lilac of Pro is gone: Pro is magenta. The green is the app's too (PO 03.11.2026): leaf #4F8C5A with
   white text by day, #8FD94F with dark text by night; small green text by day is the app's darker "ok" green
   #2E7D4F, so that it stays readable on the light background. Variable names (--lime) are kept from v04. */
:root {
  --bg: #F5F8F1; --surface: #FFFFFF; --soft: #EAF2E1; --ink: #0F170C; --muted: #55634C; --line: #DFE8D6;
  --lime: #4F8C5A; --lime-ink: #FFFFFF; --leaf: #2E7D4F; --magenta: #C128D2; --red: #D23B3B;
  --night: #101813; --night-surface: #18221B; --night-ink: #EEF5E9; --night-muted: #A7B6A2; --night-line: #2A3830;
  --pro: #C128D2; --pro-soft: #F8E5FA; --pro-ink: #FFFFFF; --pro-tint: #E7A1EE;
  --ic-green: #4F8C5A; --ic-green-bg: #E3EEDD; --ic-blue: #1E7FD8; --ic-blue-bg: #DDEEFF;
  --ic-magenta: #C128D2; --ic-magenta-bg: #F8E5FA;
  --wash: rgba(245, 248, 241, 1); --wash-0: rgba(245, 248, 241, 0);
  --hole: rgba(15, 23, 12, .08);
  --shadow: 0 20px 44px rgba(28, 48, 16, .14);
  --shadow-sm: 0 8px 22px rgba(28, 48, 16, .10);
  --bezel: #0B0F0C; --rim: #2A2F2B; --glass: #050706;
  --photo: none;
  --font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --wrap: 1200px; --r-lg: 28px; --r-md: 20px; --r-sm: 12px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0D1310; --surface: #151D18; --soft: #1A251E; --ink: #ECF3E8; --muted: #9EAF99; --line: #26322B;
  --lime: #8FD94F; --lime-ink: #10180F; --leaf: #8FD94F; --magenta: #D065DB; --red: #FF6B6B;
  --night: #121B16; --night-surface: #1A2620; --night-ink: #EEF5E9; --night-muted: #A7B6A2; --night-line: #2C3A32;
  --pro: #D065DB; --pro-soft: #2C1A2E; --pro-ink: #1A0C1D; --pro-tint: #E7A1EE;
  --ic-green: #8FD94F; --ic-green-bg: #1D2A1F; --ic-blue: #6AB6FF; --ic-blue-bg: #14283A;
  --ic-magenta: #D065DB; --ic-magenta-bg: #2C1A2E;
  --wash: rgba(13, 19, 16, 1); --wash-0: rgba(13, 19, 16, 0);
  --hole: rgba(236, 243, 232, .07);
  --shadow: 0 20px 44px rgba(0, 0, 0, .45); --shadow-sm: 0 8px 22px rgba(0, 0, 0, .35);
  /* Phone bodies lighter than the page, with a silver rim, so they do not merge with the dark background */
  --bezel: #3A453F; --rim: #B4BFB7; --glass: #050706;
  /* Daylight photos (cards, closing) a little dimmer at night: white foam glared on the dark page (PO 03.11.2026) */
  --photo: brightness(.82);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #0D1310; --surface: #151D18; --soft: #1A251E; --ink: #ECF3E8; --muted: #9EAF99; --line: #26322B;
  --lime: #8FD94F; --lime-ink: #10180F; --leaf: #8FD94F; --magenta: #D065DB; --red: #FF6B6B;
  --night: #121B16; --night-surface: #1A2620; --night-ink: #EEF5E9; --night-muted: #A7B6A2; --night-line: #2C3A32;
  --pro: #D065DB; --pro-soft: #2C1A2E; --pro-ink: #1A0C1D; --pro-tint: #E7A1EE;
  --ic-green: #8FD94F; --ic-green-bg: #1D2A1F; --ic-blue: #6AB6FF; --ic-blue-bg: #14283A;
  --ic-magenta: #D065DB; --ic-magenta-bg: #2C1A2E;
  --wash: rgba(13, 19, 16, 1); --wash-0: rgba(13, 19, 16, 0);
  --hole: rgba(236, 243, 232, .07);
  --shadow: 0 20px 44px rgba(0, 0, 0, .45); --shadow-sm: 0 8px 22px rgba(0, 0, 0, .35);
  /* Phone bodies lighter than the page, with a silver rim, so they do not merge with the dark background */
  --bezel: #3A453F; --rim: #B4BFB7; --glass: #050706;
  /* Daylight photos (cards, closing) a little dimmer at night: white foam glared on the dark page (PO 03.11.2026) */
  --photo: brightness(.82);
  color-scheme: dark;
}

/* Images that exist in two versions: the light one by default, the dark one in the dark theme */
.t-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .t-light { display: none !important; }
  :root:not([data-theme="light"]) .t-dark { display: block !important; }
  :root:not([data-theme="light"]) .i-moon { display: none; }
  :root:not([data-theme="light"]) .i-sun { display: block; }
}
:root[data-theme="dark"] .t-light { display: none !important; }
:root[data-theme="dark"] .t-dark { display: block !important; }
:root[data-theme="dark"] .i-moon { display: none; }
:root[data-theme="dark"] .i-sun { display: block; }
.i-sun { display: none; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 18px/1.6 var(--font); color: var(--ink); background: var(--bg); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.8vw, 46px); }
h3 { font-size: 20px; letter-spacing: -.01em; line-height: 1.25; }
:lang(th) h1, :lang(th) h2, :lang(th) h3 { letter-spacing: 0; line-height: 1.3; }
:lang(th) body { line-height: 1.75; }
.lede { font-size: clamp(18px, 1.7vw, 22px); color: var(--muted); max-width: 30em; margin-top: 18px; }
.wrap { max-width: calc(var(--wrap) + 2 * max(16px, env(safe-area-inset-left, 0px))); margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-sm { width: 16px; height: 16px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); color: var(--ink); padding: 8px 12px; z-index: 30; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
.nw { white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 14px;
  font: 700 17px var(--font); text-decoration: none; white-space: nowrap; border: 2px solid transparent; cursor: pointer; }
.btn-primary { background: var(--lime); color: var(--lime-ink); box-shadow: 0 10px 24px color-mix(in srgb, var(--lime) 35%, transparent); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-pro { background: var(--pro); color: var(--pro-ink); }
.btn-sm { padding: 10px 18px; font-size: 15px; border-radius: 12px; box-shadow: none; }
.btn-lg { padding: 18px 28px; font-size: 19px; border-radius: 16px; }

/* ---------- "Soon" bar (temporary, until registration opens) ---------- */
.soon { background: var(--night); color: var(--night-ink); font-size: 15px; font-weight: 600; }
.soon .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 42px; padding-block: 6px; text-align: center; }
.soon-tag { flex: none; background: var(--lime); color: var(--lime-ink); border-radius: 999px; padding: 2px 11px; font-size: 13px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Header ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand img { width: 40px; height: 40px; }
.wordmark { font: 800 24px var(--font); letter-spacing: .01em; color: var(--ink); }
.wordmark span { color: var(--magenta); }
.nav { display: flex; gap: 26px; font-size: 16px; font-weight: 600; }
.nav a { text-decoration: none; color: var(--ink); opacity: .82; }
.nav a:hover { opacity: 1; }
.top-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.signin { font-weight: 700; font-size: 16px; text-decoration: none; padding: 8px 6px; }
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 9px 10px;
  border-radius: 12px; font-size: 15px; font-weight: 600; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { background: var(--soft); }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 6px); min-width: 170px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 6px; }
.lang-menu li a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-size: 16px; }
.lang-menu li a:hover { background: var(--soft); }
.lang-menu a[aria-current] { font-weight: 800; color: var(--leaf); }
.theme-btn { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: transparent;
  border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.theme-btn:hover { background: var(--soft); }
@media (max-width: 1080px) { .nav { display: none; } }
@media (max-width: 640px) {
  .top .wrap { gap: 10px; height: 64px; }
  .signin, .lang-menu summary span { display: none; }
  .wordmark { font-size: 21px; }
  .brand img { width: 34px; height: 34px; }
}
.lbl-short { display: none; }
/* A phone: the header button says just "Start" (the hero has the full one right below). v05.3: the bound was 420 px
   and an iPhone Pro Max (440 px) got the full Russian label, 11 px past the screen (PO screenshot 03.11.2026, measured
   in WebKit: overflow from 421 to 440 px, none at 420). The full Russian header needs 467 px; 520 leaves room for
   wider system fonts. */
@media (max-width: 520px) { .top .lbl-long { display: none; } .top .lbl-short { display: inline; } .top .btn-sm { padding: 9px 14px; } }
/* 360 px (many Android phones): the Russian header was still 4 px too wide - tighter spacing only there. */
@media (max-width: 380px) { .top-end { gap: 6px; } .top .btn-sm { padding: 9px 10px; } .lang-menu summary { padding: 9px 6px; } }

/* ---------- Phone frame around a real screen ----------
   The screen keeps the phone's proportions itself (aspect-ratio on an element WITHOUT padding), and the body
   is only a padding around it. v04 put the ratio on the padded body and stretched the screen to height:100%:
   Chromium, current WebKit and WebKit 17 (Safari 17.6) then gave three different heights, and in Safari 17
   the screen ran 30 px below the body. With the ratio on the screen all three engines agree (test 03.11.2026). */
.phone { position: relative; padding: 10px; border-radius: 15% / 7%; background: var(--bezel);
  box-shadow: var(--shadow), 0 0 0 2.5px var(--rim); max-width: 100%; }
.phone::before { content: ""; position: absolute; top: calc(10px + 1.6%); left: 34.5%; width: 31%; height: 3.6%;
  border-radius: 999px; background: var(--glass); z-index: 2; }
.phone .screen { position: relative; aspect-ratio: 390 / 844; border-radius: 12.5% / 5.8%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 3px var(--glass); }
.phone .screen img, .phone .screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- Image slots: generated images, a lid pattern while waiting ---------- */
.ai-ph { display: block; width: 100%; height: 100%;
  background: radial-gradient(circle, var(--hole) 0 9px, transparent 10px) 0 0 / 34px 34px,
              linear-gradient(140deg, var(--soft), var(--surface)); }
.ai-label { position: absolute; left: 12px; bottom: 12px; z-index: 2; font: 700 12px/1.2 var(--font); letter-spacing: .02em;
  color: #fff; background: rgba(15, 23, 12, .72); border: 1px dashed rgba(255, 255, 255, .75); border-radius: 8px; padding: 5px 9px; }

/* ---------- Hero: the farm behind, one real phone in front ---------- */
.hero { position: relative; overflow: hidden; border-radius: 0 0 40px 40px; padding-block: 56px 64px; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img, .hero-bg .ai-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--wash) 0%, var(--wash) 30%, color-mix(in srgb, var(--wash) 70%, transparent) 50%, var(--wash-0) 78%),
              linear-gradient(0deg, var(--wash) 0%, var(--wash-0) 22%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(46px, 6.6vw, 88px); letter-spacing: -.038em; line-height: .98; }
:lang(th) .hero h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.2; }
/* What the product is, inside the h1 (for search) but drawn as a small label above the promise */
.kicker { display: table; margin-bottom: 20px; padding: 7px 15px; border-radius: 999px; font-size: 16px; font-weight: 800;
  letter-spacing: 0; line-height: 1.25; color: var(--leaf); background: color-mix(in srgb, var(--lime) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--lime) 55%, transparent); }
:lang(th) .hero h1 .kicker { font-size: 16px; line-height: 1.4; }
.hero .lede { color: color-mix(in srgb, var(--ink) 78%, var(--muted)); font-weight: 500; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.cta.center { justify-content: center; }
/* The large plate (as in v04): free plan and every device, bold, in a lime frame */
.plate { display: inline-flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 30px; padding: 16px 22px; border-radius: 20px;
  background: var(--surface); color: var(--ink); text-align: left; border: 2px solid var(--lime); box-shadow: var(--shadow-sm); }
.plate.center { display: flex; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.plate-item { display: flex; align-items: center; gap: 12px; }
.plate-item b { display: block; font-size: 21px; font-weight: 800; line-height: 1.2; }
.plate-item small { display: block; font-size: 14px; color: var(--muted); }
.tick { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); flex: none; }
.tick::after { content: ""; position: absolute; left: 11px; top: 6px; width: 7px; height: 13px; border: solid var(--lime-ink);
  border-width: 0 3px 3px 0; transform: rotate(45deg); }
.hero-visual { position: relative; display: flex; justify-content: center; padding-block: 8px; }
.hero-visual .phone { width: 290px; }
.chip { position: absolute; z-index: 3; background: var(--surface); color: var(--ink); border-radius: 18px; box-shadow: var(--shadow);
  padding: 14px 16px; font-size: 15px; line-height: 1.35; border: 1px solid var(--line); }
.chip b { display: block; }
.chip em { font-style: normal; font-weight: 700; color: var(--red); }
.chip-solution { left: 0; top: 34%; max-width: 210px; padding-left: 34px; }
.chip-solution .dot { position: absolute; left: 14px; top: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 20%, transparent); }
.chip-read { right: 0; bottom: 56px; }
.chip-read small { color: var(--muted); font-size: 13px; }
.chip-read .big { display: flex; align-items: baseline; gap: 14px; margin-top: 2px; }
.chip-read strong { font-size: 26px; line-height: 1.1; color: var(--leaf); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Sections ---------- */
.sec { padding-block: 96px; }
.sec-title { margin-bottom: 44px; max-width: 22em; }
.sec-title.center { margin-left: auto; margin-right: auto; text-align: center; }
.band-soft { background: var(--soft); }
.ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.ic-green { background: var(--ic-green-bg); color: var(--ic-green); }
.ic-blue { background: var(--ic-blue-bg); color: var(--ic-blue); }
.ic-magenta { background: var(--ic-magenta-bg); color: var(--ic-magenta); }
.ic-lime { background: var(--lime); color: var(--lime-ink); }
.ic-pro { background: color-mix(in srgb, var(--pro) 26%, transparent); color: var(--pro-tint); }
.tag-pro { display: inline-block; vertical-align: middle; font: 800 12px var(--font); letter-spacing: .02em; color: var(--pro-ink);
  background: var(--pro); border-radius: 7px; padding: 3px 8px; }

/* Photo cards: a picture, then an icon, a short title and one line */
.card-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; }
.pimg { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); }
.pimg img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo); }
.pbody { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 24px; }
.pbody p { color: var(--muted); font-size: 16px; margin-top: 6px; line-height: 1.5; }

/* The app: the video and three screens, all four in one row on a computer, two by two on a phone */
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; align-items: start; }
.shot .phone { width: 100%; max-width: 250px; margin: 0 auto; }
.shot figcaption { margin-top: 18px; text-align: center; font-size: 15px; color: var(--muted); line-height: 1.45; }
.shot figcaption b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.vctl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.vbtn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 15px var(--font); cursor: pointer; }
.vbtn:hover { border-color: var(--muted); }
.vbtn .i { width: 18px; height: 18px; stroke-width: 2.4; }
.vbtn .i-tri { fill: currentColor; stroke-width: 1.4; }
.vbtn[data-state="playing"] .i-tri, .vbtn[data-state="paused"] .i-pause { display: none; }
/* The small video opens large: the whole screen is a button, plus a corner badge */
.shot video, .shot [data-open-shot] { cursor: zoom-in; }
.vzoom { position: absolute; z-index: 2; right: 8%; bottom: 3.5%; width: 40px; height: 40px; border-radius: 12px; border: 0;
  display: grid; place-items: center; background: rgba(15, 23, 12, .72); color: #fff; cursor: zoom-in; }
.vzoom .i { width: 20px; height: 20px; stroke-width: 2.2; }
/* Enlarged (v05.3): the video or a screen, the phone as tall as the VISIBLE window allows (svh: with the browser
   toolbars shown), the buttons above it. At the bottom the iPhone Safari toolbar covered them (PO 03.11.2026).
   Height budget: padding 2 x 12, buttons 48, gap 12, phone frame 20, 26 to spare = 130. */
.vbox { padding: 0; border: 0; margin: auto; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; }
.vbox::backdrop { background: rgba(6, 10, 7, .9); }
.vbox-in { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top, 0px)) 12px 12px; }
.vbox { --pw: min(calc(100vw - 24px), calc((100vh - 130px) * 390 / 844 + 20px)); }
@supports (height: 100svh) {
  .vbox { max-height: 100svh; --pw: min(calc(100vw - 24px), calc((100svh - 130px) * 390 / 844 + 20px)); }
}
.vbox .phone { width: var(--pw); }
.vbox-ctl { display: flex; justify-content: space-between; gap: 12px; width: max(var(--pw), 280px); }
.vbox[data-mode="shot"] .vbox-ctl { justify-content: flex-end; }
.vbox[data-mode="shot"] [data-vbtn], .vbox[data-mode="shot"] video, .vbox[data-mode="video"] .vbox-shot { display: none; }
.vbox-shot { position: absolute; inset: 0; }
.vbtn-lg { min-height: 48px; padding: 10px 20px 10px 14px; font-size: 17px; }
.vbtn-lg .i { width: 22px; height: 22px; }
.vbox-close { margin-left: auto; }

/* Short facts; device sync first and wider: it matters most to a team */
.facts-band { padding-block: 48px; border-bottom: 1px solid var(--line); }
.facts { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 22px 28px; align-items: center; }
.facts li { display: flex; align-items: flex-start; gap: 14px; }
.facts h3 { font-size: 17px; line-height: 1.3; }
.facts p { margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.facts .fact-sync { grid-row: span 2; align-self: stretch; align-items: center; gap: 20px; padding: 26px 28px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--lime) 16%, var(--surface)); border: 2px solid var(--lime); }
.fact-sync .ic { width: 60px; height: 60px; border-radius: 18px; }
.fact-sync .ic .i { width: 30px; height: 30px; }
.fact-sync h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.01em; }
.fact-sync p { font-size: 17px; color: var(--ink); opacity: .82; margin-top: 8px; max-width: 34em; }

/* Pro for growers who sell: the promise with an example report, then six questions an owner asks */
.band-night { background: var(--night); color: var(--night-ink); }
.biz { position: relative; overflow: hidden; }
.biz::before { content: ""; position: absolute; right: -10%; top: -30%; width: 60%; height: 90%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pro) 32%, transparent), transparent); }
.biz .wrap { position: relative; }
.biz-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pro-badge { display: inline-block; font: 800 14px var(--font); letter-spacing: .04em; color: var(--pro-ink); background: var(--pro);
  border-radius: 999px; padding: 6px 14px; }
.biz h2 { margin-top: 18px; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.03em; }
.biz .lede { margin-top: 18px; color: var(--night-muted); }
.biz .btn-pro { margin-top: 30px; }
.chart { background: var(--surface); color: var(--ink); border-radius: var(--r-md); padding: 24px 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.chart-head small { color: var(--muted); font-size: 12px; border: 1px dashed var(--line); border-radius: 6px; padding: 2px 6px; }
.bars { display: grid; gap: 12px; }
.bar { display: grid; grid-template-columns: 116px minmax(0, 1fr) 44px; gap: 12px; align-items: center; font-size: 14px; }
.track { height: 12px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--pro) 55%, var(--surface)), var(--pro)); }
.val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.chart-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.chart-kpis small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; }
.chart-kpis b { font-size: 24px; font-variant-numeric: tabular-nums; }
.biz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.biz-grid li { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: var(--r-md);
  background: var(--night-surface); border: 1px solid var(--night-line); }
.biz-grid .ic { margin-bottom: 10px; }
.biz-grid small { font-size: 15px; font-weight: 700; color: var(--pro-tint); }
.biz-grid h3 { font-size: 20px; line-height: 1.25; color: var(--night-ink); }
.biz-grid p { font-size: 15px; line-height: 1.5; color: var(--night-muted); }
/* Метка «в разработке» у невыпущенных строк Pro (#1075, решение PO 04.11.2026). */
.dev-tag { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 1px 9px; border: 1.5px solid currentColor; border-radius: 999px;
  font: 700 12px/1.5 var(--font); letter-spacing: .02em; color: var(--magenta); white-space: nowrap; }
.biz-grid .dev-tag { color: var(--pro-tint); }

/* Pricing: two plan cards */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 940px; margin: 0 auto; align-items: stretch; }
.plan-card { display: flex; flex-direction: column; gap: 22px; padding: 32px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); }
.plan-card.pro { border: 2px solid var(--pro); background: linear-gradient(180deg, var(--pro-soft), var(--surface) 55%); }
.plan-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.plan { font-size: 28px; font-weight: 800; }
.pro .plan { color: var(--pro); }
.price { font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price small { font-size: 16px; font-weight: 600; color: var(--muted); }
/* Pro prices (PO 03.11.2026): the month in the head, the year with its saving under it, the terms under the button */
.pro-year { margin-top: -12px; font-size: 16px; font-weight: 700; color: var(--pro); }
.pro-terms { margin-top: -10px; font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; }
.for { flex-basis: 100%; font-size: 15px; color: var(--muted); }
.pro-plus { font-size: 16px; font-weight: 700; color: var(--pro); }
.ticks { display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 34px; font-size: 17px; line-height: 1.4; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--leaf); }
.pro .ticks li::before { background: var(--pro); }
.ticks li::after { content: ""; position: absolute; left: 8px; top: 5px; width: 5px; height: 10px; border: solid var(--surface);
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.plan-card .btn { margin-top: auto; width: 100%; }
.plans-note { margin: 26px auto 0; max-width: 46em; text-align: center; color: var(--muted); font-size: 16px; }
.plans-note a { color: var(--ink); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative; font-size: 19px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 30px; font-weight: 400; color: var(--muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq p { padding: 0 44px 24px 0; color: var(--muted); }
.faq a { color: var(--ink); }

/* Closing v05.3b: a bright card - the invitation, the button and the plate beside an open sunny photo. Nothing covers
   the photo and nothing darkens it (PO 03.11.2026: the text hid the centre of the old background, the dusk was gloomy). */
.closing-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center;
  padding: 56px; border-radius: 36px; border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--ic-green-bg), var(--surface) 62%); box-shadow: var(--shadow-sm); }
.closing h2 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.03em; }
.closing .lede { margin-top: 18px; color: color-mix(in srgb, var(--ink) 78%, var(--muted)); }
.closing .cta { margin-top: 30px; }
.closing .plate { margin-top: 26px; }
.closing-img { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: var(--soft);
  box-shadow: var(--shadow); }
.closing-img img, .closing-img .ai-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The closing has its own night photo (14, the same shot in the evening, PO 03.11.2026) - not dimmed. */

/* Footer */
footer { background: var(--night); color: var(--night-ink); padding-block: 56px 40px; }
footer .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
footer .wordmark { color: var(--night-ink); }
footer .about { margin-top: 10px; color: var(--night-muted); font-size: 15px; max-width: 30em; }
footer ul { display: grid; gap: 8px; font-size: 15px; }
footer ul a { text-decoration: none; color: var(--night-muted); }
footer ul a:hover, footer ul a[aria-current] { color: var(--night-ink); }
footer .legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--night-line); color: var(--night-muted); font-size: 14px; }

/* ---------- Narrow screens ---------- */
@media (max-width: 1100px) {
  .card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts .fact-sync { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 980px) {
  .closing-card { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px; }
  .closing-img { order: -1; }
  .hero { padding-block: 40px 48px; border-radius: 0 0 28px 28px; }
  .hero-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-bg::after { background: linear-gradient(180deg, var(--wash) 0%, color-mix(in srgb, var(--wash) 88%, transparent) 46%,
    color-mix(in srgb, var(--wash) 30%, transparent) 70%, var(--wash) 100%); }
  .hero-bg img, .hero-bg .ai-ph { object-position: 60% 80%; }
  .hero-visual { max-width: 520px; width: 100%; margin: 0 auto; }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; max-width: 600px; margin: 0 auto; }
  .faq-grid { gap: 24px; }
  .biz-top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .biz .chart { max-width: 560px; }
  footer .wrap { grid-template-columns: minmax(0, 1fr); }
  .sec { padding-block: 72px; }
}
@media (max-width: 760px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts .fact-sync { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .soon { font-size: 14px; }
  .soon .wrap { gap: 10px; }
  .card-row { grid-template-columns: minmax(0, 1fr); }
  .pbody { flex-direction: row; }
  .hero-visual .phone { width: 220px; }
  .chip { padding: 10px 12px; font-size: 14px; }
  .chip-solution { left: 0; top: 18%; max-width: 205px; padding-left: 28px; }
  .chip-solution .dot { left: 11px; top: 16px; }
  .chip-read { right: 0; bottom: 24px; }
  .chip-read strong { font-size: 20px; }
  .chip-read .big { gap: 10px; }
  .btn-lg { padding: 16px 22px; font-size: 18px; width: 100%; }
  .kicker { font-size: 14px; padding: 6px 12px; margin-bottom: 16px; }
  :lang(th) .hero h1 .kicker { font-size: 14px; }
  .plate { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; width: 100%; }
  .plate.center { width: 100%; }
  .plate-item b { font-size: 19px; }
  .sec-title { margin-bottom: 32px; }
  .shots { gap: 26px 14px; }
  .shot figcaption { font-size: 14px; }
  .shot figcaption b { font-size: 16px; }
  .vbtn { padding: 6px 12px 6px 10px; font-size: 14px; }
  .vzoom { width: 34px; height: 34px; border-radius: 10px; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .facts .fact-sync { grid-column: auto; flex-direction: column; align-items: flex-start; padding: 22px; gap: 14px; }
  .fact-sync p { font-size: 16px; }
  .biz-grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; gap: 14px; }
  .biz-grid li { padding: 20px; }
  .chart { padding: 20px; }
  .bar { grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 10px; font-size: 13px; }
  .plan-card { padding: 24px; }
  .closing-card { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 14px 14px 24px; border-radius: 28px; }
  .closing-img { order: -1; border-radius: 18px; }
  .closing-copy { padding: 0 6px; }
  .closing .cta { margin-top: 24px; }
}

/* "Soon" (v05.3): sign-up and Pro open with the launch - their buttons open this small dialog */
.soon-box { width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 24px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.soon-box::backdrop { background: rgba(6, 10, 7, .6); }
.soon-in { display: grid; gap: 12px; padding: 28px; }
.soon-in .soon-tag { justify-self: start; }
.soon-box h2 { font-size: 26px; line-height: 1.15; letter-spacing: -.01em; }
.soon-box p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.soon-ctl { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.soon-box[data-mode="pro"] [data-for="signup"], .soon-box[data-mode="signup"] [data-for="pro"] { display: none; }

/* Ширины столбиков примера отчёта - классами, а не атрибутом style: строгий CSP страницы на salatto.app
   (style-src 'self') встроенные стили не пропускает (#1064, DEC-147 п. 4). */
.fill.w86 { width: 86%; } .fill.w78 { width: 78%; } .fill.w64 { width: 64%; } .fill.w58 { width: 58%; }