/* ==========================================================================
   Kenwise site v3: shared styles of the GENERATED product / school / distributor pages
   (subdomain_servers/www_app/build_v3_pages.py; Claude-Documentation/WEBSITE_V3_2026-09-28/
   SPEC_V3_BUILD.md section 7). Loaded only by those pages, after assets/kw_site.css.

   - Tokens, day/night palettes, the backdrop art, the top bar and the footer all come from
     kw_site.css; this file never redefines a shared token and never styles the frame.
   - Every class here starts with v3- (no clash with the frame's kw- names).
   - All text sits on a translucent panel or card (the art slides under loose text otherwise).
   - Phones first: one column up to 720 px; no fixed widths wider than 320 px.
   - The hidden attribute always wins (kw_site.css: [data-lang][hidden] {display:none !important}).
   ========================================================================== */

.v3-page { margin:0; font-family:var(--kw-font-body); font-size:17px; line-height:1.7; color:var(--text);
  -webkit-font-smoothing:antialiased; }
.v3-page *, .v3-page *::before, .v3-page *::after { box-sizing:border-box; }
.v3-main { display:block; overflow-x:clip; }
.v3-main p { margin:0; }
.v3-main a { color:var(--primary-strong); }
.v3-main a:focus-visible, .v3-main button:focus-visible, .v3-main input:focus-visible,
.v3-main select:focus-visible, .v3-main textarea:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
[data-mode="dark"] .v3-main a { color:var(--primary); }

.v3-wrap { max-width:1100px; margin:0 auto; padding:0 24px; }
.v3-panel {
  background:var(--kw-panel); border:1px solid var(--border); border-radius:24px;
  -webkit-backdrop-filter:var(--kw-blur); backdrop-filter:var(--kw-blur);
  padding:36px 40px;
}
.v3-main h1, .v3-main h2, .v3-main h3 { font-family:var(--kw-font-disp); margin:0; letter-spacing:-.012em; text-wrap:balance; }
.v3-h1 { font-size:clamp(1.85rem, 1.2rem + 2.6vw, 2.75rem); font-weight:800; line-height:1.2; margin:0 0 14px; }
.v3-h2 { font-size:clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); font-weight:800; line-height:1.25; }
.v3-h3 { font-size:1.08rem; font-weight:700; line-height:1.35; }
.v3-intro { color:var(--text-2); margin-top:10px !important; max-width:46em; }
.v3-main p, .v3-main li, .v3-main h1, .v3-main h2, .v3-main h3 { overflow-wrap:anywhere; }

/* ---------- hero ---------- */
.v3-hero { padding:44px 0 18px; }
.v3-hero-grid { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:28px; align-items:stretch; }
.v3-hero-solo { grid-template-columns:minmax(0, 1fr); }
.v3-hero-text { display:flex; flex-direction:column; justify-content:center; }
.v3-eyebrow { font-family:var(--kw-font-disp); font-weight:700; font-size:.9rem; color:var(--kw-loose-green); margin-bottom:10px !important; }
.v3-lede { color:var(--text-2); font-size:1.12rem; max-width:34em; }
.v3-status-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:2px 0 16px; }
.v3-badge-note { font-size:.92rem; font-weight:600; color:var(--text-2); }
.v3-cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.v3-hero-art { margin:0; border-radius:24px; overflow:hidden; border:1px solid var(--border); min-height:260px;
  background:var(--kw-card); box-shadow:var(--shadow-md); }
.v3-hero-art img { display:block; width:100%; height:100%; object-fit:cover; }
.v3-hero-ph { display:grid; place-items:center; color:var(--text-2);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--primary) 14%, var(--surface)), color-mix(in srgb, var(--secondary) 16%, var(--surface)));
  aspect-ratio:16 / 10; }
.v3-ph-ic { width:56px; height:56px; opacity:.55; }

/* ---------- buttons ---------- */
.v3-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px;
  padding:13px 26px; border-radius:999px; border:1.5px solid transparent;
  font-family:var(--kw-font-disp); font-weight:700; font-size:1rem; line-height:1.2; text-align:center;
  text-decoration:none; cursor:pointer; transition:box-shadow .2s, transform .12s, border-color .15s, color .15s;
}
.v3-main a.v3-btn-primary, .v3-btn-primary { background:var(--primary-strong); color:var(--on-primary); box-shadow:0 10px 24px -10px var(--primary); }
.v3-btn-primary:hover { box-shadow:0 14px 30px -10px var(--primary); }
.v3-btn:active { transform:translateY(1px); }
.v3-main a.v3-btn-ghost, .v3-btn-ghost { background:var(--kw-card); color:var(--text); border-color:var(--border); }
.v3-btn-ghost:hover { border-color:var(--primary); }
.v3-btn[disabled] { opacity:.6; cursor:progress; }

/* ---------- status badges: available = green, pilot = amber, planned / coming soon = grey-blue + clock ---------- */
.v3-badge {
  display:inline-flex; align-items:center; gap:6px; flex:none; width:max-content; max-width:100%;
  padding:4px 11px 4px 9px; border-radius:999px;
  font-family:var(--kw-font-disp); font-size:.8rem; font-weight:700; line-height:1.35; white-space:nowrap;
  background:var(--kw-st-soon-bg); color:var(--kw-st-soon-fg);
}
.v3-badge .v3-ic { width:15px; height:15px; flex:none; }
.v3-badge-available { background:var(--kw-st-ok-bg); color:var(--kw-st-ok-fg); }
.v3-badge-pilot { background:var(--kw-st-pilot-bg); color:var(--kw-st-pilot-fg); }
.v3-badge-lg { font-size:.9rem; padding:6px 14px 6px 11px; }
.v3-badge-lg .v3-ic { width:17px; height:17px; }

/* ---------- sections ---------- */
.v3-sec { padding:18px 0; scroll-margin-top:84px; }
.v3-sec:last-child { padding-bottom:64px; }
.v3-prose { display:flex; flex-direction:column; gap:14px; margin-top:16px; max-width:46em; color:var(--text); }
.v3-grid { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.v3-card {
  display:flex; flex-direction:column; gap:8px; padding:22px 22px 24px;
  background:var(--kw-card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-sm);
}
.v3-card p { color:var(--text-2); font-size:.98rem; }
.v3-feature-top { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 12px; }
.v3-feature-top .v3-h3 { flex:1 1 150px; }

.v3-steps { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset:none; }
.v3-step { display:flex; gap:14px; align-items:flex-start; padding:20px; background:var(--kw-card);
  border:1px solid var(--border); border-radius:18px; }
.v3-step p { color:var(--text-2); font-size:.98rem; margin-top:4px !important; }
.v3-step-n { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--primary-soft); color:var(--on-primary-soft); font-family:var(--kw-font-disp); font-weight:800; font-size:1.05rem; }

.v3-facts { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.v3-fact { padding:20px 22px; background:var(--kw-card); border:1px solid var(--border); border-radius:18px; }
.v3-fact-v { font-family:var(--kw-font-disp); font-weight:800; font-size:1.9rem; line-height:1.15; color:var(--primary-strong); }
[data-mode="dark"] .v3-fact-v { color:var(--primary); }
.v3-fact-l { color:var(--text-2); font-size:.95rem; margin-top:6px !important; }

.v3-products > li { display:flex; }
.v3-main a.v3-product { flex:1; color:var(--text); text-decoration:none; transition:border-color .15s, box-shadow .2s, transform .15s; }
.v3-main a.v3-product:hover { border-color:var(--primary); box-shadow:var(--shadow-md); }
.v3-product .v3-h3 { margin-top:6px; }
.v3-more { display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:8px;
  font-family:var(--kw-font-disp); font-weight:700; font-size:.92rem; color:var(--primary-strong); }
[data-mode="dark"] .v3-more { color:var(--primary); }
.v3-more .v3-ic { width:16px; height:16px; }

/* ---------- enquiry forms (behaviour: assets/kw_v3.js) ---------- */
.v3-sec-form .v3-panel { max-width:820px; margin:0 auto; }
.v3-form { margin-top:22px; }
.v3-form.is-done { display:none; }
.v3-required-note { font-size:.88rem; color:var(--text-2); margin-bottom:14px !important; }
.v3-fields { display:grid; gap:16px 18px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.v3-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.v3-field-wide { grid-column:1 / -1; }
.v3-field label { font-family:var(--kw-font-disp); font-weight:700; font-size:.93rem; line-height:1.35; }
.v3-req { color:color-mix(in srgb, var(--error) 55%, var(--text)); }  /* >= 4.5:1 in both modes */
.v3-field input, .v3-field select, .v3-field textarea {
  width:100%; min-height:48px; margin:0; padding:11px 14px;
  font:inherit; font-size:1rem; line-height:1.4; color:var(--text);
  background:var(--surface); border:1.5px solid color-mix(in srgb, var(--text-2) 45%, var(--surface)); border-radius:12px;
}
.v3-field textarea { min-height:120px; resize:vertical; }
.v3-field input:focus, .v3-field select:focus, .v3-field textarea:focus { border-color:var(--primary); }
.v3-field-err { display:none; font-size:.86rem; font-weight:600; color:color-mix(in srgb, var(--error) 55%, var(--text)); }
.v3-field.is-invalid input, .v3-field.is-invalid select, .v3-field.is-invalid textarea { border-color:var(--error); }
.v3-field.is-invalid .v3-field-err { display:block; }
.v3-hp { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.v3-consent { margin:18px 0 !important; font-size:.9rem; color:var(--text-2); }
.v3-form-err { display:none; margin-top:14px !important; padding:12px 14px; border-radius:12px; font-size:.95rem;
  background:color-mix(in srgb, var(--error) 12%, var(--surface)); color:color-mix(in srgb, var(--error) 50%, var(--text));
  border:1px solid color-mix(in srgb, var(--error) 35%, transparent); }
.v3-main .v3-form-err a { color:inherit; font-weight:700; }
.v3-form-err.is-on { display:block; }
.v3-form-ok { display:none; margin-top:22px; padding:22px; border-radius:16px; text-align:center;
  background:var(--kw-st-ok-bg); color:var(--kw-st-ok-fg); }
.v3-form-ok.is-on { display:block; }
.v3-form-ok:focus { outline:none; }
.v3-ok-ic { width:34px; height:34px; margin:0 auto 6px; display:block; }
.v3-ok-title { font-family:var(--kw-font-disp); font-weight:800; font-size:1.12rem; }
.v3-email-note { margin-top:18px !important; font-size:.95rem; color:var(--text-2); }
.v3-main .v3-email-note a { font-weight:700; }

/* ---------- narrow screens ---------- */
@media (max-width: 860px) {
  .v3-hero-grid { grid-template-columns:minmax(0, 1fr); }
  .v3-hero-art { min-height:0; }
  .v3-hero-art img { aspect-ratio:16 / 10; height:auto; }
}
@media (max-width: 720px) {
  .v3-panel { padding:24px 22px; border-radius:20px; }
  .v3-hero { padding-top:24px; }
  .v3-fields { grid-template-columns:minmax(0, 1fr); }
  .v3-cta-row .v3-btn { flex:1 1 220px; }
}
@media (max-width: 420px) {
  .v3-wrap { padding:0 16px; }
  .v3-panel { padding:20px 16px; }
  .v3-card, .v3-step, .v3-fact { padding:18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-btn, .v3-main a.v3-product { transition:none; }
}
@media print {
  .v3-panel, .v3-card { -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; }
  .v3-sec-form { display:none; }
}