/* Ontiqo house style for websites.
   One file, copied into every site at deploy time (tools/sync_house.py). Edit it
   here, never in a site's copy. The design and the reasons for it live in
   ../design/house-style.html.

   A site sets its product with <html data-product="leaf"> (or any name below).
   Without one it wears the company colours. Light and dark follow the system;
   a site with its own switch sets data-theme="light" or "dark" on <html>. */

/* ---------- fonts (self-hosted, latin; SIL OFL, see fonts/) ---------- */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/figtree-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/figtree-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/figtree-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/figtree-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens: light ---------- */
:root{
  /* Grey neutrals, no colour cast (chosen 2026-10-14) */
  --ground:#F4F4F4; --surface:#FFFFFF; --raised:#F9F9F9; --line:#E3E3E3; --line-2:#D2D2D2;
  --ink:#222222; --ink-2:#555555; --ink-3:#696969;
  /* company */
  --ontiqo-blue:#286DAB; --ontiqo-orange:#EE8A33; --orange-ink:#B85F12; --warm:#FDF1E6;
  /* status: never the only signal */
  --ok:#1F7A45; --warn:#9A5B00; --bad:#B4372C;
  /* the product: --product for fills, --product-ink for text and links, --on-product for text on a fill */
  --product:#286DAB; --product-ink:#1F5A90; --on-product:#FFFFFF; --product-wash:#EAF1F8;
  --eyebrow:var(--orange-ink);
  /* type */
  --display:"Poppins","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --text:"Figtree","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:"Cascadia Mono","SF Mono",ui-monospace,Consolas,monospace;
  /* scale */
  --t-12:.75rem; --t-13:.8125rem; --t-14:.875rem; --t-16:1rem; --t-18:1.125rem; --t-20:1.25rem; --t-24:1.5rem; --t-32:2rem; --t-44:2.75rem; --t-60:3.75rem;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r1:4px; --r2:8px; --r3:12px; --r4:16px;
  --shadow:0 1px 2px rgb(0 0 0/.06),0 10px 28px -14px rgb(0 0 0/.22);
  --ease:cubic-bezier(.2,.8,.2,1);
  --measure:66ch; --page:1920px; --gutter:clamp(16px,4vw,72px);
  /* hero glow: colour and strength (dark is stronger) */
  --glow:var(--product); --glow-strength:16%;
  color-scheme:light;
}
/* ---------- tokens: dark (system, and an explicit switch) ---------- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#141414; --surface:#1C1C1C; --raised:#222222; --line:#2F2F2F; --line-2:#3C3C3C;
  --ink:#E9E9E9; --ink-2:#B7B7B7; --ink-3:#9B9B9B;
  --orange-ink:#F0A05A; --warm:#2E241B;
  --ok:#5CC88A; --warn:#E8B24C; --bad:#F07A70;
  --product:#6BA7DA; --product-ink:#8BBCE6; --on-product:#0F1720; --product-wash:#1A2530;
  --shadow:0 1px 2px rgb(0 0 0/.4),0 12px 30px -14px rgb(0 0 0/.7);
  --glow-strength:30%;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ground:#141414; --surface:#1C1C1C; --raised:#222222; --line:#2F2F2F; --line-2:#3C3C3C;
  --ink:#E9E9E9; --ink-2:#B7B7B7; --ink-3:#9B9B9B;
  --orange-ink:#F0A05A; --warm:#2E241B;
  --ok:#5CC88A; --warn:#E8B24C; --bad:#F07A70;
  --product:#6BA7DA; --product-ink:#8BBCE6; --on-product:#0F1720; --product-wash:#1A2530;
  --shadow:0 1px 2px rgb(0 0 0/.4),0 12px 30px -14px rgb(0 0 0/.7);
  --glow-strength:30%;
  color-scheme:dark;
}

/* ---------- product colours (house values, AA on surface in both themes) ---------- */
/* Works on <html> (a product site) or on any element (a product card on ontiqo.com). */
[data-product="leaf"]{--product:#2C6E49;--product-ink:#2C6E49;--on-product:#fff;--product-wash:#E8F2EC}
[data-product="guestbay"]{--product:#0F766E;--product-ink:#0F766E;--on-product:#fff;--product-wash:#E6F3F1}
[data-product="omninput"]{--product:#0B6E9E;--product-ink:#0B6E9E;--on-product:#fff;--product-wash:#E6F1F7}
[data-product="longtom"]{--product:#1D4E89;--product-ink:#1D4E89;--on-product:#fff;--product-wash:#E9EEF5}
[data-product="echofiles"]{--product:#5B3FD9;--product-ink:#5B3FD9;--on-product:#fff;--product-wash:#EFECFC}
[data-product="aigo"]{--product:#B8325E;--product-ink:#B8325E;--on-product:#fff;--product-wash:#F8E9EE}
[data-product="quidex"]{--product:#FFC72C;--product-ink:#8A6D00;--on-product:#15181C;--product-wash:#FFF6D9}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-product="leaf"],:root:not([data-theme="light"]) [data-product="leaf"]{--product:#7ECFA4;--product-ink:#7ECFA4;--on-product:#0E1A13;--product-wash:#17241D}
  :root:not([data-theme="light"])[data-product="guestbay"],:root:not([data-theme="light"]) [data-product="guestbay"]{--product:#4FC7B8;--product-ink:#4FC7B8;--on-product:#0B1A18;--product-wash:#14231F}
  :root:not([data-theme="light"])[data-product="omninput"],:root:not([data-theme="light"]) [data-product="omninput"]{--product:#6CC9EA;--product-ink:#6CC9EA;--on-product:#0A1820;--product-wash:#14212A}
  :root:not([data-theme="light"])[data-product="longtom"],:root:not([data-theme="light"]) [data-product="longtom"]{--product:#7FB2F0;--product-ink:#7FB2F0;--on-product:#0C1626;--product-wash:#172131}
  :root:not([data-theme="light"])[data-product="echofiles"],:root:not([data-theme="light"]) [data-product="echofiles"]{--product:#A898FF;--product-ink:#A898FF;--on-product:#140F2A;--product-wash:#1E1A30}
  :root:not([data-theme="light"])[data-product="aigo"],:root:not([data-theme="light"]) [data-product="aigo"]{--product:#F28AAE;--product-ink:#F28AAE;--on-product:#2A0E18;--product-wash:#2A1A20}
  :root:not([data-theme="light"])[data-product="quidex"],:root:not([data-theme="light"]) [data-product="quidex"]{--product:#FFC72C;--product-ink:#FFC72C;--on-product:#15181C;--product-wash:#2A2414}
}
:root[data-theme="dark"][data-product="leaf"],:root[data-theme="dark"] [data-product="leaf"]{--product:#7ECFA4;--product-ink:#7ECFA4;--on-product:#0E1A13;--product-wash:#17241D}
:root[data-theme="dark"][data-product="guestbay"],:root[data-theme="dark"] [data-product="guestbay"]{--product:#4FC7B8;--product-ink:#4FC7B8;--on-product:#0B1A18;--product-wash:#14231F}
:root[data-theme="dark"][data-product="omninput"],:root[data-theme="dark"] [data-product="omninput"]{--product:#6CC9EA;--product-ink:#6CC9EA;--on-product:#0A1820;--product-wash:#14212A}
:root[data-theme="dark"][data-product="longtom"],:root[data-theme="dark"] [data-product="longtom"]{--product:#7FB2F0;--product-ink:#7FB2F0;--on-product:#0C1626;--product-wash:#172131}
:root[data-theme="dark"][data-product="echofiles"],:root[data-theme="dark"] [data-product="echofiles"]{--product:#A898FF;--product-ink:#A898FF;--on-product:#140F2A;--product-wash:#1E1A30}
:root[data-theme="dark"][data-product="aigo"],:root[data-theme="dark"] [data-product="aigo"]{--product:#F28AAE;--product-ink:#F28AAE;--on-product:#2A0E18;--product-wash:#2A1A20}
:root[data-theme="dark"][data-product="quidex"],:root[data-theme="dark"] [data-product="quidex"]{--product:#FFC72C;--product-ink:#FFC72C;--on-product:#15181C;--product-wash:#2A2414}
/* On a product site, eyebrows take the product's colour; on ontiqo.com they stay orange. */
html[data-product]{--eyebrow:var(--product-ink)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1.0625rem/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--product-ink);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--product);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.15;letter-spacing:-.015em;margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.25rem,5.2vw,var(--t-60));letter-spacing:-.025em}
h2{font-size:clamp(1.5rem,3vw,var(--t-32))}
h3{font-size:var(--t-20)}
p{margin:0}
code,kbd{font-family:var(--mono);font-size:.9em}
::selection{background:color-mix(in srgb,var(--product) 28%,transparent)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Full width up to HD (1920px), then centred. Running text keeps its own measure. */
.wrap{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-48px;background:var(--surface);color:var(--ink);padding:8px 14px;border-radius:var(--r2);z-index:10}
.skip:focus{top:12px}

/* ---------- header ---------- */
.site-header{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.site-header .wrap{display:flex;align-items:center;gap:var(--s5);min-height:64px}
.lockup{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.lockup .mark{width:30px;height:30px}
.lockup .name{font:600 1.0625rem/1 var(--display);letter-spacing:-.01em}
.lockup .word{height:17px;width:auto}
.lockup .by{display:flex;align-items:center;gap:6px;margin-left:6px;padding-left:12px;border-left:1px solid var(--line-2);font:500 var(--t-13) var(--text);color:var(--ink-3)}
.lockup .by img,.lockup .by svg{width:14px;height:14px}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:var(--s5);font-size:var(--t-14)}
.site-nav a{color:var(--ink-2);text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a,.lockup .by{white-space:nowrap}
@media (max-width:980px){.lockup .by{display:none}}
@media (max-width:780px){.site-nav .opt{display:none}}
@media (max-width:520px){.site-nav .btn{display:none}.site-nav{gap:var(--s4)}}

/* ---------- type helpers ---------- */
.eyebrow{display:block;font:600 var(--t-12)/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow)}
.lede{font-size:clamp(var(--t-18),2vw,var(--t-20));line-height:1.55;color:var(--ink-2);max-width:56ch}
.muted{color:var(--ink-3)}
.fine{font-size:var(--t-13);color:var(--ink-3)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:var(--r2);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:600 var(--t-16)/1.2 var(--text);text-decoration:none;cursor:pointer;transition:background .12s var(--ease),border-color .12s var(--ease),transform .12s var(--ease)}
.btn:hover{border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--product);border-color:transparent;color:var(--on-product)}
.btn.primary:hover{background:color-mix(in srgb,var(--product) 88%,var(--ink))}
.btn.small{min-height:36px;padding:6px 14px;font-size:var(--t-14)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4)}

/* ---------- sections ---------- */
.hero{position:relative;isolation:isolate;overflow-x:clip;padding-block:clamp(56px,10vw,128px) clamp(32px,6vw,64px);display:grid;gap:var(--s5)}
.hero h1{max-width:16ch;font-size:clamp(2.5rem,6.4vw,5.5rem);letter-spacing:-.03em;line-height:1.04}
/* One glow, behind the hero headline only, in one colour: the product's (Ontiqo blue
   on ontiqo.com). An oval centred on the headline and sized to it, so it sits behind the
   words at every width. Stronger in dark, a faint wash in light. Purely decorative. */
.hero h1{position:relative}
.hero h1::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;width:125%;aspect-ratio:2/1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) var(--glow-strength),transparent),transparent)}
.section{padding-block:clamp(28px,4vw,56px);display:grid;gap:var(--s6)}
.section-head{display:grid;gap:var(--s3);max-width:60ch}
.grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--min,300px)),1fr))}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5);display:grid;gap:var(--s3);align-content:start;min-width:0}
.card p{color:var(--ink-2)}

/* A product card links to a product. It carries its own data-product, so its accent is that product's. */
.product-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;display:grid;grid-template-rows:auto 1fr;color:var(--ink);text-decoration:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.product-card:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.product-card .shot{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:var(--raised);border-bottom:1px solid var(--line)}
.product-card .body{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:var(--s5);align-content:start}
.product-card .icon{grid-row:span 2;width:44px;height:44px;border-radius:10px}
.product-card .name{font:600 var(--t-18)/1.25 var(--display);align-self:end}
.product-card .line{font-size:var(--t-14);color:var(--ink-3);align-self:start}
.product-card .say{grid-column:1/-1;margin-top:var(--s3);font-size:var(--t-16);color:var(--ink-2)}
.product-card .meta{grid-column:1/-1;margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:var(--t-13);color:var(--ink-3)}
.product-card .host{font-weight:600;color:var(--product-ink)}
.product-card .host::after{content:" →";transition:margin .2s var(--ease)}
.product-card:hover .host::after{margin-left:3px}

.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--raised);border:1px solid var(--line);font:600 var(--t-12)/1.4 var(--text);color:var(--ink-2)}

/* A software box: icon, name (links to the site), one line, then the right download for
   the visitor's system (get.js picks it; without the script every option shows). */
.boxes{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--min,440px)),1fr));grid-auto-rows:1fr}
.list-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr auto;gap:4px 20px;padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r4);color:var(--ink);min-width:0;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.list-card:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.list-card .icon{grid-row:1/4;width:76px;height:76px}
.list-card .name{font:600 var(--t-20)/1.25 var(--display);color:var(--ink);text-decoration:none;align-self:end}
.list-card .name:hover{color:var(--product-ink)}
.list-card .line{font-size:var(--t-16);color:var(--ink-2)}
.list-card .get{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.get .note{display:inline;background:none;padding:0;border-radius:0;font-size:var(--t-14);color:var(--ink-3)}
.list-card .get .site{margin-left:auto;font-weight:600;font-size:var(--t-14);color:var(--product-ink);text-decoration:none}
.list-card .get .site::after{content:" →"}
.get [data-for][hidden]{display:none!important}

/* ---------- slideshow (needs slides.js; works as a swipeable strip without it) ---------- */
.slides{position:relative;display:grid;gap:var(--s4)}
.slides-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;border-radius:var(--r4)}
.slides-track::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(20px,3vw,40px);background:color-mix(in srgb,var(--product) 7%,var(--surface));border:1px solid var(--line);border-radius:var(--r4);color:var(--ink);text-decoration:none;min-width:0}
.slide .shot{width:100%;max-height:min(520px,52vh);aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:var(--r3);border:1px solid var(--line);box-shadow:var(--shadow);background:var(--raised)}
.slide .text{display:grid;gap:var(--s3);align-content:center;min-width:0}
.slide .icon{width:64px;height:64px;border-radius:14px}
.slide .name{font:600 clamp(1.75rem,3vw,2.75rem)/1.1 var(--display);letter-spacing:-.02em}
.slide .line{font-size:var(--t-20);color:var(--ink-2);max-width:30ch}
.slide .go{margin-top:var(--s3);font-weight:600;color:var(--product-ink)}
.slide .go::after{content:" →"}
@media (max-width:820px){.slide{grid-template-columns:1fr}.slide .text{order:-1}}
/* A slideshow inside a hero's half: the picture leads, the words stay modest. */
.hero .slide{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:clamp(16px,2vw,32px);padding:clamp(14px,1.6vw,24px)}
.hero .slide .name{font-size:clamp(1.25rem,1.9vw,1.9rem)}
.hero .slide .line{font-size:var(--t-16)}
@media (max-width:820px){.hero .slide{grid-template-columns:1fr}}
.slide picture{display:block;min-width:0}
.slides-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.slides-nav .dot{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:600 var(--t-13)/1 var(--text);padding:8px 12px;border-radius:999px;cursor:pointer}
.slides-nav .dot[aria-current="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.slides-nav .arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:18px;cursor:pointer}
.slides-nav .arrow:first-child{margin-right:var(--s2)}
.slides-nav .spacer{flex:1}

/* A screenshot in a frame */
.frame{border-radius:var(--r3);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--raised)}

/* ---------- prose (legal, support, about) ---------- */
.prose{max-width:var(--measure);display:grid;gap:var(--s4);padding-block:clamp(40px,7vw,80px)}
.prose h1{font-size:clamp(2rem,4vw,var(--t-44));margin-bottom:var(--s2)}
.prose h2{font-size:var(--t-24);margin-top:var(--s5)}
.prose h3{font-size:var(--t-18);margin-top:var(--s3)}
.prose p,.prose li{color:var(--ink-2)}
.prose ul,.prose ol{margin:0;padding-left:1.25em;display:grid;gap:var(--s2)}
.prose strong{color:var(--ink)}
.prose .updated{font-size:var(--t-14);color:var(--ink-3)}

/* ---------- notes ---------- */
.note{background:var(--warm);border-radius:var(--r3);padding:var(--s4) var(--s5);display:grid;gap:4px}

/* ---------- footer: compact, two lines of links and the legal line ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--raised);font-size:var(--t-14);color:var(--ink-2);margin-top:var(--s7)}
.site-footer .cols{display:grid;gap:var(--s2);padding-block:var(--s5) var(--s3)}
.site-footer .cols>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--s4)}
.site-footer h2{font:600 var(--t-14)/1.5 var(--text);letter-spacing:0;margin:0;min-width:5.5rem;color:var(--ink)}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px var(--s4)}
.site-footer a{color:var(--ink-2);text-decoration:none}
.site-footer a:hover{color:var(--ink);text-decoration:underline}
.site-footer .legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border-top:1px solid var(--line);padding-block:var(--s3) var(--s4);color:var(--ink-3);font-size:var(--t-13)}
.site-footer .legal img,.site-footer .legal svg{width:16px;height:16px}

/* ---------- forms ---------- */
.form{display:grid;gap:var(--s5);max-width:680px}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:var(--t-14);color:var(--ink)}
.field label .muted{font-weight:400}
.field input,.field select,.field textarea{font:400 var(--t-16)/1.5 var(--text);color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r2);padding:11px 13px;width:100%;min-width:0}
.field textarea{resize:vertical;min-height:10rem}
.field select{max-width:420px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--product);outline-offset:1px;border-color:transparent}
.field .hint{font-size:var(--t-14);color:var(--ink-3)}
.field .hint[hidden]{display:none}
/* the spam trap: off-screen for people, still in the form for bots */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- product site components ---------- */
.site-nav .btn.primary{color:var(--on-product)}
.site-nav .btn.primary:hover{color:var(--on-product)}
.hero .get{margin-top:var(--s2)}
.hero-media{margin-top:clamp(24px,4vw,48px)}
@media (min-width:1200px){
  .hero:has(.hero-media){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(40px,4vw,80px);align-items:center}
  .hero:has(.hero-media)>*{grid-column:1}
  .hero:has(.hero-media)>.hero-media{grid-column:2;grid-row:1/span 8;margin-top:0}
  .hero:has(.hero-media) h1{font-size:clamp(2.5rem,4.2vw,4.5rem)}
}
.shot-frame{display:block;width:100%;border-radius:var(--r3);border:1px solid var(--line);box-shadow:var(--shadow);background:var(--raised);overflow:hidden}
.shot-frame img{width:100%;height:auto}
/* light and dark screenshots: <picture class="themed"> with both; CSS shows the right one */
.themed .dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .themed .light{display:none}:root:not([data-theme="light"]) .themed .dark{display:block}}
:root[data-theme="dark"] .themed .light{display:none}
:root[data-theme="dark"] .themed .dark{display:block}

.points{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.points h3{font-size:var(--t-18);margin-bottom:4px}
.points p{color:var(--ink-2)}

.section>.feature+.feature{margin-top:var(--s4)}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.feature.flip>.media{order:2}
.feature .text{display:grid;gap:var(--s3);align-content:center;max-width:36rem}
/* the screenshot fills its half up to a moderate size, then stops growing */
.feature .media{max-width:920px;width:100%}
.feature.flip>.media{justify-self:end}
/* tall screenshots stop at a sensible height and show their top, so rows stay balanced */
.feature .media img{width:100%;max-height:min(620px,68vh);object-fit:cover;object-position:top left}
.feature ul{margin:0;padding-left:1.1em;display:grid;gap:var(--s2);color:var(--ink-2)}
.feature p{color:var(--ink-2)}
@media (max-width:860px){.feature{grid-template-columns:1fr}.feature.flip>.media{order:0}}

.tiles{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));grid-auto-rows:1fr}
.tiles .card h3{font-size:var(--t-18)}

.band{display:grid;gap:var(--s4);justify-items:start;padding:clamp(28px,5vw,56px);border-radius:var(--r4);background:color-mix(in srgb,var(--product) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--product) 18%,var(--line))}
.band .fine{margin-top:-4px}
.band .needs{width:100%}

.needs{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));margin:0}
.needs div{display:grid;gap:4px}
.needs dt{font-weight:600}
.needs dd{margin:0;color:var(--ink-2)}

/* ---------- unified help ---------- */
.help-page{display:grid;gap:var(--s6);padding-block:clamp(40px,7vw,80px);max-width:calc(var(--measure) + 2 * var(--gutter))}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
a.chip{text-decoration:none}
a.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.help-topic{display:grid;gap:var(--s2);scroll-margin-top:84px}
.help-topic h2{font-size:var(--t-24);margin-bottom:var(--s2)}
details.qa{border:1px solid var(--line);border-radius:var(--r3);background:var(--surface)}
details.qa summary{cursor:pointer;list-style:none;padding:var(--s4) var(--s5);font-weight:600;display:flex;justify-content:space-between;gap:var(--s4)}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";font:500 1.25rem/1 var(--text);color:var(--ink-3)}
details.qa[open] summary::after{content:"−"}
details.qa .answer{padding:0 var(--s5) var(--s5);display:grid;gap:var(--s3);color:var(--ink-2)}
details.qa .answer ul,details.qa .answer ol{margin:0;padding-left:1.2em;display:grid;gap:4px}
.help-more{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;padding:var(--s5);border-radius:var(--r3);background:var(--raised);border:1px solid var(--line)}

/* ---------- the arc: Ontiqo's one moving thing, monochrome ---------- */
.arc{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.2em;color:inherit}
.arc .o{transform-origin:20px 20px;animation:arc-turn 2.4s linear infinite}
.arc .i{transform-origin:20px 20px;animation:arc-turn 1.6s linear infinite reverse}
@keyframes arc-turn{to{transform:rotate(360deg)}}
/* markup:
<svg class="arc" viewBox="0 0 40 40" aria-hidden="true"><g class="o"><circle cx="20" cy="20" r="16" fill="none" stroke="currentColor" stroke-width="4" stroke-dasharray="21.1 4"/></g><g class="i"><path d="M20 12A8 8 0 0 1 20 28" fill="none" stroke="currentColor" stroke-width="4"/><path d="M20 28A8 8 0 0 1 20 12" fill="none" stroke="currentColor" stroke-opacity=".4" stroke-width="4"/></g></svg> */

/* ---------- 404 ---------- */
.lost{padding-block:clamp(64px,12vw,140px);display:grid;gap:var(--s4);justify-items:start}
.lost .code{font:600 var(--t-14) var(--mono);color:var(--ink-3)}