/* Connectio site — November 2026. Modern CSS: light-dark(), view transitions, scroll-driven reveals, container queries, :has() */
:root {
  color-scheme: light dark;
  --bg: light-dark(#f4fbf6, #07130d);
  --bg-2: light-dark(#e8f6ec, #0d2216);
  --surface: light-dark(#ffffff, #102018);
  --text: light-dark(#10231b, #eaf7ee);
  --dim: light-dark(#4b6356, #9db8a7);
  --line: light-dark(rgb(16 35 27 / 0.1), rgb(234 247 238 / 0.12));
  --primary: light-dark(#15803d, #22c55e);
  --on-primary: light-dark(#ffffff, #04210f);
  --accent: #4ade80;
  --danger: light-dark(#b91c1c, #f87171);
  --shadow: 0 1px 2px rgb(16 35 27 / 0.06), 0 12px 32px rgb(16 35 27 / 0.08);
  --r: 1.5rem;
  --maxw: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.6; font-size: 1.0625rem; min-block-size: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }
img, svg { max-inline-size: 100%; block-size: auto; display: block; }
a { color: var(--primary); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 0.4rem; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; margin: 0 0 0.6em; font-weight: 800; }
h1 { font-size: clamp(2.6rem, 6.5vw + 0.5rem, 5rem); }
h2 { font-size: clamp(1.9rem, 3.5vw + 0.5rem, 3rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
p { margin: 0 0 1em; text-wrap: pretty; }
.wrap { inline-size: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.visually-hidden { position: absolute; clip-path: inset(50%); overflow: hidden; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; background: var(--primary); color: var(--on-primary); padding: 0.6rem 1rem; border-radius: 0.6rem; z-index: 100; }
.skip:focus { inset-block-start: 1rem; }

/* ---- view transitions between pages (progressive enhancement) ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 0.25s ease-in both fade-out; }
  ::view-transition-new(root) { animation: 0.35s ease-out both fade-in; }
  .site-header { view-transition-name: site-header; }
  @keyframes fade-out { to { opacity: 0; } }
  @keyframes fade-in { from { opacity: 0; transform: translateY(0.5rem); } }
}

/* ---- header ---- */
.site-header { position: sticky; inset-block-start: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 78%, transparent); backdrop-filter: blur(18px) saturate(1.6); border-block-end: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 4rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; color: var(--text); text-decoration: none; }
.brand img { inline-size: 2.25rem; block-size: 2.25rem; border-radius: 0.6rem; }
.nav { display: none; gap: 0.25rem; align-items: center; }
.nav a { color: var(--text); text-decoration: none; padding: 0.55rem 0.9rem; border-radius: 999px; font-weight: 600; font-size: 0.97rem; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--bg-2); }
.menu-btn { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--text); inline-size: 2.75rem; block-size: 2.75rem; border-radius: 999px; display: grid; place-items: center; cursor: pointer; }
[popover].mobile-nav { inset: 4.5rem 1rem auto 1rem; margin: 0; inline-size: auto; max-inline-size: 26rem; margin-inline-start: auto; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 1.5rem; padding: 0.75rem; box-shadow: var(--shadow); }
[popover].mobile-nav a { display: block; padding: 0.9rem 1rem; border-radius: 0.9rem; color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.1rem; }
[popover].mobile-nav a:hover { background: var(--bg-2); }
[popover].mobile-nav::backdrop { background: rgb(0 0 0 / 0.25); }
@media (min-width: 52rem) { .nav { display: flex; } .menu-btn, .mobile-nav { display: none !important; } }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-block-size: 3.25rem; padding: 0.75rem 1.6rem; border-radius: 999px; font-weight: 700; font-size: 1.05rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; font-family: inherit; transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s; }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 24px color-mix(in oklab, var(--primary) 35%, transparent); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg-2); }
.btn[aria-disabled="true"] { opacity: 0.75; cursor: default; pointer-events: none; }
.btn-store { background: #000; color: #fff; border-color: #fff3; padding-inline: 1.4rem 1.6rem; gap: 0.75rem; text-align: start; line-height: 1.1; }
.btn-store small { display: block; font-size: 0.7rem; font-weight: 500; opacity: 0.85; }
.btn-store strong { font-size: 1.3rem; letter-spacing: -0.02em; }

/* ---- hero ---- */
.hero { position: relative; overflow: clip; isolation: isolate; padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2rem, 5vw, 4rem); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60rem 36rem at 85% -10%, color-mix(in oklab, var(--accent) 38%, transparent), transparent 60%),
    radial-gradient(40rem 30rem at -10% 40%, color-mix(in oklab, var(--primary) 20%, transparent), transparent 60%); }
.hero .wrap { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .hero .wrap { grid-template-columns: 1.1fr 0.9fr; } }
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.9rem; font-weight: 700; font-size: 0.9rem; color: var(--primary); margin-block-end: 1.25rem; }
.lede { font-size: clamp(1.15rem, 1.2vw + 0.9rem, 1.4rem); color: var(--dim); max-inline-size: 36rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-block-start: 1.75rem; }
.fine { font-size: 0.9rem; color: var(--dim); margin-block-start: 1rem; }
.hero-art { position: relative; justify-self: center; inline-size: min(100%, 24rem); }
.hero-art img { inline-size: 100%; block-size: auto; }
.hero-art .chip { position: absolute; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 1rem; padding: 0.6rem 0.9rem; font-weight: 700; font-size: 0.9rem; display: flex; gap: 0.5rem; align-items: center; }
.chip.c1 { inset-inline-start: 0; inset-block-start: 20%; } .chip.c2 { inset-inline-end: 0; inset-block-end: 12%; }
.dot { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent); }

/* ---- sections ---- */
section { padding-block: clamp(3rem, 7vw, 6rem); }
.section-head { max-inline-size: 42rem; margin-block-end: 2.5rem; }
.section-head p { color: var(--dim); font-size: 1.15rem; }
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.card-wrap { container-type: inline-size; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem; box-shadow: var(--shadow); display: grid; gap: 0.4rem; align-content: start; }
.card .ico { inline-size: 3rem; block-size: 3rem; border-radius: 1rem; display: grid; place-items: center; background: var(--bg-2); color: var(--primary); margin-block-end: 0.8rem; }
.card h3 { margin: 0; } .card p { margin: 0; color: var(--dim); font-size: 1rem; }
@container (min-width: 22rem) { .card { grid-template-columns: auto 1fr; column-gap: 1.2rem; } .card .ico { grid-row: span 2; margin: 0; } }

.steps { counter-reset: s; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); padding: 0; list-style: none; }
.steps li { counter-increment: s; background: var(--bg-2); border-radius: var(--r); padding: 1.6rem; position: relative; }
.steps li::before { content: counter(s); display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 800; margin-block-end: 1rem; }
.steps h3 { margin: 0 0 0.3rem; } .steps p { margin: 0; color: var(--dim); }

/* screenshot rail */
.rail { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 0.5rem 1.5rem; padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); scrollbar-width: thin; }
.rail figure { margin: 0; flex: 0 0 min(78vw, 17rem); scroll-snap-align: center; }
.rail img { border-radius: 1.6rem; box-shadow: var(--shadow); border: 1px solid var(--line); inline-size: 100%; }
.rail figcaption { text-align: center; font-weight: 700; margin-block-start: 0.8rem; }
@media (min-width: 64rem) { .rail { overflow: visible; margin-inline: 0; padding-inline: 0; } .rail figure { flex: 1 1 0; } }

/* plus */
.plus { background: linear-gradient(135deg, light-dark(#15803d, #0d2216), light-dark(#0a4a25, #123a22)); color: #fff; border-radius: calc(var(--r) * 1.6); padding: clamp(1.75rem, 5vw, 3.5rem); display: grid; gap: 2rem; }
@media (min-width: 52rem) { .plus { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.plus h2 { color: #fff; } .plus p { color: #d7f5df; }
.plus ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; }
.plus li { display: flex; gap: 0.7rem; align-items: start; font-weight: 600; }
.plus li svg { flex: none; margin-block-start: 0.2rem; color: var(--accent); }

/* faq */
details { background: var(--surface); border: 1px solid var(--line); border-radius: 1.2rem; padding: 0 1.4rem; }
details + details { margin-block-start: 0.8rem; }
summary { cursor: pointer; font-weight: 700; padding-block: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--primary); transition: rotate 0.2s; }
details[open] summary::after { rotate: 45deg; }
details:has(summary:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
details p { color: var(--dim); padding-block-end: 1.1rem; margin: 0; }

/* cta band */
.cta-band { text-align: center; padding-block: clamp(3rem, 7vw, 5rem); }
.cta-band .cta-row { justify-content: center; }

/* ---- footer ---- */
.site-footer { border-block-start: 1px solid var(--line); padding-block: 2.5rem; color: var(--dim); font-size: 0.97rem; }
.site-footer .wrap { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .site-footer .wrap { grid-template-columns: 1fr auto; align-items: center; } }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.site-footer a { color: var(--text); text-decoration: none; font-weight: 600; }
.site-footer a:hover { text-decoration: underline; }
.legal-note { font-size: 0.82rem; max-inline-size: 46rem; }

/* ---- article pages (privacy / terms) ---- */
.page-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 1rem; }
.page-hero h1 { font-size: clamp(2.2rem, 4.5vw + 0.5rem, 3.6rem); }
.meta { color: var(--dim); font-weight: 600; }
.prose { max-inline-size: 46rem; padding-block-end: 4rem; }
.prose h2 { font-size: clamp(1.4rem, 1.5vw + 1rem, 1.8rem); margin-block: 2.4rem 0.6rem; letter-spacing: -0.02em; }
.prose h3 { margin-block: 1.6rem 0.4rem; }
.prose ul { padding-inline-start: 1.3rem; } .prose li { margin-block-end: 0.4rem; }
.prose table { inline-size: 100%; border-collapse: collapse; font-size: 0.97rem; margin-block: 1rem; }
.prose th, .prose td { text-align: start; padding: 0.7rem 0.8rem; border-block-end: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--dim); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.callout { background: var(--bg-2); border-radius: 1.2rem; padding: 1.1rem 1.3rem; border-inline-start: 4px solid var(--primary); margin-block: 1.5rem; }
.callout p { margin: 0; }
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: 1.2rem; padding: 1.2rem 1.5rem; margin-block: 1.5rem; }
.toc ol { margin: 0; padding-inline-start: 1.2rem; columns: 2 14rem; } .toc a { text-decoration: none; font-weight: 600; }

/* ---- contact form ---- */
.contact-grid { display: grid; gap: 2rem; padding-block-end: 4rem; }
@media (min-width: 56rem) { .contact-grid { grid-template-columns: 1.3fr 1fr; align-items: start; } }
form.card { padding: clamp(1.4rem, 3vw, 2.2rem); gap: 1.2rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 700; font-size: 0.97rem; }
.field label .req { color: var(--danger); }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; inline-size: 100%; min-block-size: 3rem; padding: 0.75rem 1rem; border-radius: 0.9rem; border: 1.5px solid light-dark(#9aaea1, #4a6a57); background: var(--bg); color: var(--text); }
.field textarea { min-block-size: 9rem; resize: vertical; }
.field :is(input, select, textarea):user-valid { border-color: var(--primary); }
.field :is(input, select, textarea):user-invalid { border-color: var(--danger); background: color-mix(in oklab, var(--danger) 8%, var(--bg)); }
.err { display: none; color: var(--danger); font-weight: 600; font-size: 0.92rem; }
.err::before { content: "⚠ "; }
.field:has(:user-invalid) .err { display: block; }
.field:has(:user-invalid) label { color: var(--danger); }
.hp { position: absolute; inset-inline-start: -9999px; }
.side-card h3 { margin-block-end: 0.3rem; }
.side-card a { font-weight: 700; word-break: break-word; }
.notice { margin: 0; padding: 0.9rem 1.1rem; border-radius: 0.9rem; background: var(--bg-2); font-weight: 600; }
.notice[hidden] { display: none; }

/* ---- join landing ---- */
.join-card { max-inline-size: 30rem; margin-inline: auto; text-align: center; padding: 2.5rem 2rem; }
.join-card img { inline-size: 5rem; margin-inline: auto; border-radius: 1.3rem; margin-block-end: 1rem; }
.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 700; letter-spacing: 0.04em; background: var(--bg-2); border-radius: 1rem; padding: 0.7rem 1rem; margin-block: 1rem; word-break: break-all; }

/* ---- scroll-driven reveal (decorative → progressive enhancement, no fallback) ---- */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes reveal { from { opacity: 0; translate: 0 2.2rem; scale: 0.97; } }
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  }
}

/* validation state set by contact.js on failed submit (mirrors :user-invalid) */
.field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); background: color-mix(in oklab, var(--danger) 8%, var(--bg)); }
.field:has([aria-invalid="true"]) .err { display: block; }
.field:has([aria-invalid="true"]) label { color: var(--danger); }