/* OpenFetch website: quiet, Apple / Figma-like; the same accent as the app (the fetching dog's coat) */
:root{--ink:#1d1d1f;--ink-2:#6e6e73;--line:#e5e5ea;--fill:#f5f5f7;--bg:#fff;--accent:#a85a25;--accent-ink:#fff;--max:1040px;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--ink:#f5f5f7;--ink-2:#a1a1a6;--line:#2c2c2e;--fill:#1c1c1e;--bg:#000;--accent:#e0915a;--accent-ink:#1d1d1f}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--accent)}
img,svg{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
header.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:20px;height:56px}
.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none}
.wm{display:block;height:20px;width:auto;color:var(--ink)}
.wm .acc{fill:var(--accent)}
nav.main{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:14px}
nav.main a{color:var(--ink-2);text-decoration:none}
nav.main a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;white-space:nowrap}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{border-color:var(--line);color:var(--ink);background:var(--bg)}
.btn.ghost:hover{background:var(--fill)}
nav.main .btn{padding:7px 14px;font-size:13px}
.pill{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.02em;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.hero{padding:72px 0 40px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,54px);line-height:1.06;letter-spacing:-.02em;margin:14px 0 16px}
.hero p.lead{font-size:clamp(17px,1.6vw,19px);color:var(--ink-2);margin:0 0 26px;max-width:34em}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.small{font-size:13px;color:var(--ink-2)}
.hero .small{margin-top:14px}
.art{width:100%;height:auto;color:var(--ink-2)}
.art .f0{fill:color-mix(in srgb,currentColor 4%,transparent)}.art .f1{fill:color-mix(in srgb,currentColor 7%,transparent)}
.art .bg{fill:var(--bg)}.art .acs{stroke:var(--accent)}
.art .a1{fill:color-mix(in srgb,var(--accent) 30%,var(--bg))}.art .a2{fill:color-mix(in srgb,var(--accent) 55%,var(--bg))}
.art .g1{fill:color-mix(in srgb,currentColor 18%,var(--bg))}.art .g2{fill:color-mix(in srgb,currentColor 32%,var(--bg))}
.more{margin-top:16px}
section{padding:56px 0;border-top:1px solid var(--line)}
section h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.01em;margin:0 0 8px}
section > .wrap > p.sub{color:var(--ink-2);margin:0 0 28px;max-width:40em}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--fill);border-radius:16px;padding:22px}
.card h3{margin:6px 0 6px;font-size:17px}
.card p{margin:0;color:var(--ink-2);font-size:15px}
.num{font-size:13px;font-weight:700;color:var(--accent)}
.regions{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.regions .card ul{margin:8px 0 0;padding-left:18px;color:var(--ink-2);font-size:15px}
.soon{color:var(--ink-2)}
footer{border-top:1px solid var(--line);padding:28px 0 40px;font-size:13px;color:var(--ink-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
footer a{color:var(--ink-2)}
/* text pages: terms, privacy, data sources */
.doc{max-width:760px;margin:0 auto;padding:48px 20px 64px}
.doc h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;margin:0 0 6px}
.doc h2{font-size:21px;margin:36px 0 8px}
.doc p,.doc li{color:var(--ink)}
.doc .meta{color:var(--ink-2);font-size:14px;margin:0 0 28px}
.tbl{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0 4px}
.tbl th,.tbl td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-weight:600;color:var(--ink-2);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.tblWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tag{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--fill);color:var(--ink-2);white-space:nowrap}
.doc .lead{font-size:18px;line-height:1.55;color:var(--ink)}
.doc.wide .tbl col.src{width:44%}.doc.wide .tbl col.pub{width:24%}.doc.wide .tbl col.lic{width:20%}.doc.wide .tbl col.kind{width:12%}
.tag.off{background:color-mix(in srgb,#d97706 16%,transparent);color:#b45309}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:44px;gap:28px}
  .grid3,.regions{grid-template-columns:1fr}
  nav.main a:not(.btn){display:none}
}
/* forms: Pro waitlist and feedback (plain HTML posts, no scripts) */
.form{display:grid;gap:18px;margin-top:8px}
.form label{display:grid;gap:6px;font-weight:600;font-size:15px}
.form .opt{font-weight:400;color:var(--ink-2);font-size:13px}
.form input[type=email],.form input[type=text],.form select,.form textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
/* Apple Store logic: actions (buttons) are pills; fields and choices are rounded boxes; cards are larger rounded boxes */
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:1px;border-color:var(--accent)}
.form fieldset{border:1px solid var(--line);border-radius:12px;padding:12px 16px 14px;margin:0;display:grid;gap:8px}
.form legend{font-weight:600;font-size:15px;padding:0 4px}
.form label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.form label.check input{margin-top:5px;accent-color:var(--accent)}
.form .btn{justify-self:start;cursor:pointer}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.doc .btn + .btn{margin-left:8px}
/* landing page only (body.landing), inspired by HAY: calm ground, tidy grid, a few soft colour fields, one small playful moment.
   Logo sits in the top middle and hops on load and on hover; the pixel dog trots under the hero. CSS only (the CSP allows no inline script). */
.landing{--t1:#f7e6d6;--t2:#e3ebdc;--t3:#dde7f1;--t4:#f3f1ec;--tile-ink:var(--ink)}
@media (prefers-color-scheme:dark){.landing{--t1:#33251b;--t2:#212a22;--t3:#1d2630;--t4:#1c1c1e}}
.landing header.top{border-bottom-color:transparent}
.landing header.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;height:64px}
.landing header.top .brand{grid-column:2;padding:6px}
.landing header.top nav.main{grid-column:3;justify-self:end;margin-left:0}
.landing .wm{height:24px;overflow:visible;animation:wmIn .7s cubic-bezier(.2,.8,.2,1) both}
.landing .wm .acc{transform-box:fill-box;transform-origin:50% 100%;animation:wmHop 1s steps(6,end) .6s both}
.landing .brand:hover .wm .acc,.landing .brand:focus-visible .wm .acc{animation:wmHop2 .7s steps(5,end)}
@keyframes wmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes wmHop{0%,100%{transform:none}20%{transform:translateY(-14%)}40%{transform:none}60%{transform:translateY(-8%)}80%{transform:none}}
@keyframes wmHop2{0%,100%{transform:none}40%{transform:translateY(-14%)}70%{transform:none}}
.l-hero{text-align:center;padding:88px 20px 24px;display:flex;flex-direction:column;align-items:center}
.l-hero h1{font-size:clamp(36px,6.2vw,68px);line-height:1.02;letter-spacing:-.03em;margin:18px 0 18px;font-weight:600;text-wrap:balance}
.l-hero .lead{font-size:clamp(17px,1.6vw,19px);color:var(--ink-2);max-width:36em;margin:0 0 28px}
.l-hero .cta{justify-content:center}
.l-hero .small{margin:14px 0 0}
.l-opens{margin:10px 0 0;font-size:13px;color:var(--ink-2);display:flex;flex-wrap:wrap;justify-content:center;gap:2px 12px}
.l-opens b{font-weight:600;color:var(--ink)}
.l-opens span{white-space:nowrap}
/* the dog fetches (Jacky 22 Oct 2026): a messy heap of sticks on the left, a tidy stack on the right, every stick the same
   one the dog carries. The dog ferries the sticks one by one to the stack and, once the heap is empty, back again, on repeat.
   Hovering adds a hop. One pixel of the sprite = 2.5 px */
.l-run{position:relative;width:min(640px,100%);height:60px;margin:44px auto 0;border-bottom:1px solid var(--line);--far:calc(100% - 108px);cursor:pointer}
.l-run .heap{position:absolute;left:74px;bottom:0;width:110px;height:22.5px}
.l-run .stack{position:absolute;right:0;bottom:0;width:32.5px;height:35px}
.l-dog{position:absolute;bottom:-1px;left:0;width:80px;height:50px;animation:fetchRun 46.7s linear infinite}
.l-dog .dog{width:80px;height:50px;display:block}
.dog .stk{opacity:0;animation:fetchStk 46.7s steps(1) infinite}
.l-run .h0{animation:fetchH0 46.7s steps(1) infinite}.l-run .h1{animation:fetchH1 46.7s steps(1) infinite}.l-run .h2{animation:fetchH2 46.7s steps(1) infinite}.l-run .h3{animation:fetchH3 46.7s steps(1) infinite}.l-run .h4{animation:fetchH4 46.7s steps(1) infinite}
.l-run .r0{animation:fetchR0 46.7s steps(1) infinite}.l-run .r1{animation:fetchR1 46.7s steps(1) infinite}.l-run .r2{animation:fetchR2 46.7s steps(1) infinite}.l-run .r3{animation:fetchR3 46.7s steps(1) infinite}.l-run .r4{animation:fetchR4 46.7s steps(1) infinite}
/* pointer on the scene (a tap on phones): an extra hop straight away, while the fetching carries on */
.l-run:hover .dog{animation:fetchHop .6s steps(6,end)}
@keyframes fetchHop{0%,100%{transform:none}17%{transform:translateY(-7px)}33%{transform:translateY(-11px)}50%{transform:translateY(-12px)}67%{transform:translateY(-9px)}83%{transform:translateY(-4px)}}
@keyframes fetchRun{0.000%{left:0;transform:scaleX(1)}0.857%{left:0;transform:scaleX(1)}5.572%{left:var(--far);transform:scaleX(1)}6.429%{left:var(--far);transform:scaleX(1)}6.430%{left:var(--far);transform:scaleX(-1)}11.143%{left:0;transform:scaleX(-1)}11.144%{left:0;transform:scaleX(1)}12.000%{left:0;transform:scaleX(1)}16.715%{left:var(--far);transform:scaleX(1)}17.572%{left:var(--far);transform:scaleX(1)}17.573%{left:var(--far);transform:scaleX(-1)}22.286%{left:0;transform:scaleX(-1)}22.287%{left:0;transform:scaleX(1)}23.143%{left:0;transform:scaleX(1)}27.858%{left:var(--far);transform:scaleX(1)}28.715%{left:var(--far);transform:scaleX(1)}28.716%{left:var(--far);transform:scaleX(-1)}33.429%{left:0;transform:scaleX(-1)}33.430%{left:0;transform:scaleX(1)}34.286%{left:0;transform:scaleX(1)}39.001%{left:var(--far);transform:scaleX(1)}39.858%{left:var(--far);transform:scaleX(1)}39.859%{left:var(--far);transform:scaleX(-1)}44.572%{left:0;transform:scaleX(-1)}44.573%{left:0;transform:scaleX(1)}45.429%{left:0;transform:scaleX(1)}50.144%{left:var(--far);transform:scaleX(1)}51.001%{left:var(--far);transform:scaleX(1)}51.858%{left:var(--far);transform:scaleX(1)}51.859%{left:var(--far);transform:scaleX(-1)}56.195%{left:66px;transform:scaleX(-1)}57.052%{left:66px;transform:scaleX(-1)}57.053%{left:66px;transform:scaleX(1)}61.389%{left:var(--far);transform:scaleX(1)}62.247%{left:var(--far);transform:scaleX(1)}62.248%{left:var(--far);transform:scaleX(-1)}66.584%{left:66px;transform:scaleX(-1)}67.441%{left:66px;transform:scaleX(-1)}67.442%{left:66px;transform:scaleX(1)}71.778%{left:var(--far);transform:scaleX(1)}72.635%{left:var(--far);transform:scaleX(1)}72.636%{left:var(--far);transform:scaleX(-1)}76.973%{left:66px;transform:scaleX(-1)}77.830%{left:66px;transform:scaleX(-1)}77.831%{left:66px;transform:scaleX(1)}82.167%{left:var(--far);transform:scaleX(1)}83.024%{left:var(--far);transform:scaleX(1)}83.025%{left:var(--far);transform:scaleX(-1)}87.361%{left:66px;transform:scaleX(-1)}88.218%{left:66px;transform:scaleX(-1)}88.219%{left:66px;transform:scaleX(1)}92.556%{left:var(--far);transform:scaleX(1)}93.413%{left:var(--far);transform:scaleX(1)}93.414%{left:var(--far);transform:scaleX(-1)}97.750%{left:66px;transform:scaleX(-1)}98.607%{left:66px;transform:scaleX(-1)}99.571%{left:0;transform:scaleX(-1)}99.572%{left:0;transform:scaleX(1)}100%{left:0;transform:scaleX(1)}}
@keyframes fetchStk{0%{opacity:0}0.857%{opacity:0}0.858%{opacity:1}6.429%{opacity:1}6.430%{opacity:0}12.000%{opacity:0}12.001%{opacity:1}17.572%{opacity:1}17.573%{opacity:0}23.143%{opacity:0}23.144%{opacity:1}28.715%{opacity:1}28.716%{opacity:0}34.286%{opacity:0}34.287%{opacity:1}39.858%{opacity:1}39.859%{opacity:0}45.429%{opacity:0}45.430%{opacity:1}51.001%{opacity:1}51.002%{opacity:0}51.858%{opacity:0}51.859%{opacity:1}57.052%{opacity:1}57.053%{opacity:0}62.247%{opacity:0}62.248%{opacity:1}67.441%{opacity:1}67.442%{opacity:0}72.635%{opacity:0}72.636%{opacity:1}77.830%{opacity:1}77.831%{opacity:0}83.024%{opacity:0}83.025%{opacity:1}88.218%{opacity:1}88.219%{opacity:0}93.413%{opacity:0}93.414%{opacity:1}98.607%{opacity:1}98.608%{opacity:0}100%{opacity:0}}
@keyframes fetchH0{0%{opacity:1}0.857%{opacity:1}0.858%{opacity:0}98.607%{opacity:0}98.608%{opacity:1}100%{opacity:1}}
@keyframes fetchR0{0%{opacity:0}6.429%{opacity:0}6.430%{opacity:1}93.413%{opacity:1}93.414%{opacity:0}100%{opacity:0}}
@keyframes fetchH1{0%{opacity:1}12.000%{opacity:1}12.001%{opacity:0}88.218%{opacity:0}88.219%{opacity:1}100%{opacity:1}}
@keyframes fetchR1{0%{opacity:0}17.572%{opacity:0}17.573%{opacity:1}83.024%{opacity:1}83.025%{opacity:0}100%{opacity:0}}
@keyframes fetchH2{0%{opacity:1}23.143%{opacity:1}23.144%{opacity:0}77.830%{opacity:0}77.831%{opacity:1}100%{opacity:1}}
@keyframes fetchR2{0%{opacity:0}28.715%{opacity:0}28.716%{opacity:1}72.635%{opacity:1}72.636%{opacity:0}100%{opacity:0}}
@keyframes fetchH3{0%{opacity:1}34.286%{opacity:1}34.287%{opacity:0}67.441%{opacity:0}67.442%{opacity:1}100%{opacity:1}}
@keyframes fetchR3{0%{opacity:0}39.858%{opacity:0}39.859%{opacity:1}62.247%{opacity:1}62.248%{opacity:0}100%{opacity:0}}
@keyframes fetchH4{0%{opacity:1}45.429%{opacity:1}45.430%{opacity:0}57.052%{opacity:0}57.053%{opacity:1}100%{opacity:1}}
@keyframes fetchR4{0%{opacity:0}51.001%{opacity:0}51.002%{opacity:1}51.858%{opacity:1}51.859%{opacity:0}100%{opacity:0}}
.dog .fB,.dog .fH,.dog .sB,.dog .sH,.dog [class^=u]{opacity:0}
.dog .fA,.dog .sA{animation:dogA 1.6s steps(1) infinite}
.dog .fB,.dog .sB{animation:dogB 1.6s steps(1) infinite}
.dog .fH,.dog .sH{animation:dogH 1.6s steps(1) infinite}
.dog .dJ{animation:dogJ 1.6s steps(1) infinite}
.dog .dB{animation:dogC 1.6s steps(1) infinite}
.dog .u0{animation:dogU0 1.6s steps(1) infinite}.dog .u1{animation:dogU1 1.6s steps(1) infinite}.dog .u2{animation:dogU2 1.6s steps(1) infinite}.dog .u3{animation:dogU3 1.6s steps(1) infinite}
@keyframes dogA{0%{opacity:1}12.5%{opacity:0}25%{opacity:1}37.5%{opacity:0}}
@keyframes dogB{0%{opacity:0}12.5%{opacity:1}25%{opacity:0}37.5%{opacity:1}62.5%{opacity:0}87.5%{opacity:1}}
@keyframes dogH{0%{opacity:0}62.5%{opacity:1}87.5%{opacity:0}}
@keyframes dogJ{0%{transform:none}62.5%{transform:translateY(-3px)}75%{transform:translateY(-4px)}87.5%{transform:none}}
@keyframes dogC{0%{transform:none}50%{transform:translateY(1px)}62.5%{transform:none}}
@keyframes dogU0{0%{opacity:1}12.5%{opacity:0}25%{opacity:1}37.5%{opacity:0}}
@keyframes dogU1{0%{opacity:0}12.5%{opacity:1}25%{opacity:0}37.5%{opacity:1}50%{opacity:0}}
@keyframes dogU2{0%{opacity:0}87.5%{opacity:1}}
@keyframes dogU3{0%{opacity:0}87.5%{opacity:1}}
.landing section.l-sec{border-top:none;padding:64px 0}
.landing section.l-sec h2{line-height:1.15;text-wrap:balance}
.l-eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.l-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.l-tile{background:var(--t4);color:var(--tile-ink);border-radius:6px;padding:28px 26px 30px;min-width:0}
.l-tile.t1{background:var(--t1)}.l-tile.t2{background:var(--t2)}.l-tile.t3{background:var(--t3)}
.l-tile h3{font-size:19px;letter-spacing:-.01em;margin:0 0 8px}
.l-tile p,.l-tile li{color:var(--ink-2);font-size:15px;margin:0}
.l-n{display:block;font-size:13px;font-weight:600;color:var(--accent);margin:0 0 44px;font-variant-numeric:tabular-nums}
.l-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.l-facts{margin:8px 0 0;display:grid;gap:0}
.l-facts > div{padding:16px 0;border-top:1px solid var(--line)}
.l-facts dt{font-weight:600;margin:0 0 4px}
.l-facts dd{margin:0;color:var(--ink-2);font-size:15px}
.l-art{display:flex;align-items:center;justify-content:center;padding:28px}
.l-art .bg{fill:var(--t4)}
.l-regions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.l-regions h3{font-size:24px}
.l-regions ul{margin:10px 0 0;padding-left:18px;display:grid;gap:4px}
.l-crs{margin:24px 0 0!important;font-size:12px!important;letter-spacing:.04em;color:var(--ink-2)}
.l-pro{text-align:center}
.l-pro .wrap{background:var(--fill);border-radius:6px;padding:56px 24px;max-width:calc(var(--max) - 40px)}
.l-pro .sub{margin-left:auto!important;margin-right:auto!important}
.l-pro .cta{justify-content:center}
.landing footer{border-top-color:transparent}
/* product clips: the real app on a soft colour field */
.l-heroshot{margin-top:48px}
.l-frame{position:relative;border-radius:10px;overflow:hidden;background:var(--fill);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent),0 18px 40px -18px color-mix(in srgb,var(--ink) 35%,transparent);aspect-ratio:16/10}
.l-frame video,.l-frame img{display:block;width:100%;height:100%;object-fit:cover}
.l-still{display:none!important}
.l-steps{list-style:none;margin:0;padding:0;display:grid;gap:72px}
.l-step{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:48px;align-items:start}
.l-stxt{position:sticky;top:110px;padding-top:24px}
.l-stxt h3{font-size:24px;letter-spacing:-.01em;margin:0 0 10px}
.l-stxt p{color:var(--ink-2);margin:0;max-width:26em}
.l-stxt .l-n{margin-bottom:14px}
.l-media{border-radius:6px;padding:clamp(16px,3.5vw,40px);background:var(--t4)}
.l-media.t1{background:var(--t1)}.l-media.t2{background:var(--t2)}.l-media.t3{background:var(--t3)}
/* step 4: what lands in Rhino, drawn as its layer panel */
.l-layers{background:var(--bg);border-radius:10px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent),0 18px 40px -18px color-mix(in srgb,var(--ink) 35%,transparent);font-size:14px;max-width:440px;margin:0 auto;overflow:hidden}
.l-lhead{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);padding:12px 16px;border-bottom:1px solid var(--line)}
.l-lrow{display:flex;align-items:center;gap:10px;padding:7px 16px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-lrow em{font-style:normal;color:var(--ink-2);font-size:12px;margin-left:auto;padding-left:12px}
.l-lrow.l0{font-weight:600}.l-lrow.l1{padding-left:34px;font-weight:600}.l-lrow.l2{padding-left:52px}
.sw{flex:none;width:11px;height:11px;border-radius:2px;background:var(--ink)}
.sw.s1{background:#8a6a3d}.sw.s2{background:#b08850}.sw.s3{background:#c8763f}.sw.s4{background:#3f8f3a}.sw.s5{background:#3567b5}.sw.s6{background:#7a4fa8}.sw.s7{background:#c23b5a}
.l-lfoot{font-size:12px;color:var(--ink-2);padding:12px 16px;background:var(--fill)}
/* the problem: everything you would otherwise collect yourself, in a heap */
.l-mess{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10px 8px;padding:40px 28px;min-height:360px}
.l-chip{display:inline-block;font-size:14px;padding:7px 13px;border-radius:999px;background:var(--bg);color:var(--ink-2);box-shadow:0 0 0 1px var(--line);white-space:nowrap}
.l-chip.ca{transform:rotate(-6deg)}.l-chip.cb{transform:rotate(4deg) translateY(6px)}.l-chip.cc{transform:rotate(-3deg)}.l-chip.cd{transform:rotate(7deg) translateY(-4px)}
.l-chip.ce{transform:rotate(-9deg) translateY(4px)}.l-chip.cf{transform:rotate(3deg);background:var(--t1);color:var(--ink)}.l-chip.cg{transform:rotate(-4deg) translateY(-6px)}
.l-chip.ch{transform:rotate(8deg)}.l-chip.ci{transform:rotate(-2deg) translateY(5px);background:var(--t3);color:var(--ink)}.l-chip.cj{transform:rotate(5deg)}
.l-chip.ck{transform:rotate(-7deg) translateY(-3px)}.l-chip.cl{transform:rotate(2deg);background:var(--t2);color:var(--ink)}.l-chip.cm{transform:rotate(-5deg) translateY(4px)}.l-chip.cn{transform:rotate(6deg) translateY(-5px)}
@media (max-width:820px){
  .l-step{grid-template-columns:1fr;gap:20px}
  .l-stxt{position:static;padding-top:0}
  .l-steps{gap:48px}
  .l-mess{min-height:0;padding:28px 16px}
  .l-flip > .l-art{order:2}
}
@media (max-width:820px){
  .l-hero{padding-top:56px}
  .l-tiles,.l-split,.l-regions{grid-template-columns:1fr}
  .l-n{margin-bottom:20px}
  .l-split{gap:28px}
  .l-pro .wrap{margin:0 16px}
}
@media (max-width:520px){.landing header.top nav.main{display:none}}
/* less motion asked for: the logo and the clips hold still; the small dog keeps fetching (Jacky 23 Oct 2026: many work PCs switch
   animations off, and the dog is the one playful moment) but skips the hover hop */
@media (prefers-reduced-motion:reduce){.landing .wm,.landing .wm .acc{animation:none!important}.l-run:hover .dog{animation:none}.l-vid{display:none}.l-still{display:block!important}}
/* landing on desktop (Jacky 24 Oct 2026): use the width of a laptop or monitor, bigger product shots, more air between sections; phone layout above is unchanged */
@media (min-width:1100px){
  .landing{--max:1280px}
  .landing .wrap{padding-left:40px;padding-right:40px}
  .landing .l-hero{padding-top:64px;padding-bottom:32px}
  .landing section.l-sec{padding:104px 0}
  .l-steps{gap:112px}
  .l-step{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:72px}
  .l-stxt h3{font-size:28px}
  .l-stxt p{font-size:17px}
  .l-media{padding:clamp(32px,3.5vw,56px)}
  .l-layers{max-width:560px;font-size:15px}
  .l-split{gap:80px}
  .l-pro .wrap{padding:80px 40px;max-width:calc(var(--max) - 80px)}
}
@media (min-width:1600px){.landing{--max:1400px}}
/* every other page on a desktop: the same width and side margins as the landing page (Jacky 24 Oct 2026: pages were a narrow
   centred column). Text pages: title column on the left that stays in view, reading column on the right (kept to ~70 characters).
   Data sources: title and intro side by side, then the tables across the full width. Short pages (thanks, 404) stay centred. */
@media (min-width:1100px){
  :root{--max:1280px}
  .wrap{padding-left:40px;padding-right:40px}
  main.doc{max-width:var(--max);padding:88px 40px 112px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 96px;align-items:start}
  .docHead{position:sticky;top:120px}
  .doc h1{font-size:48px;line-height:1.05;margin:0 0 14px}
  .docBody{max-width:70ch}
  .docBody > h2:first-child,.docBody > p:first-child{margin-top:0}
  .doc h2{font-size:22px;margin:44px 0 10px}
  main.doc.wide{grid-template-columns:1fr;gap:0}
  .doc.wide .docHead{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px 96px;padding-bottom:40px;border-bottom:1px solid var(--line)}
  .doc.wide .docHead h1{grid-row:1/3}
  .doc.wide .docHead .meta{grid-column:2;grid-row:2;margin:0}
  .doc.wide .docHead .lead{grid-column:2;grid-row:1;margin:0}
  .doc.wide .docBody{max-width:none}
  .doc.wide .docBody h2{margin:56px 0 4px;font-size:26px}
  .doc.wide .tbl{table-layout:fixed;font-size:15px}
  .doc.wide .tbl th,.doc.wide .tbl td{padding:14px 16px 14px 0}
  .docBody .form fieldset{grid-template-columns:1fr 1fr;column-gap:24px}
  .docBody .form legend{grid-column:1/-1}
  main.doc.short{display:block;max-width:640px;padding:140px 20px 160px;text-align:center}
  main.doc.short .btn{margin-top:8px}
}
@media (min-width:1600px){:root{--max:1400px}}