/* Arcos, arcos.cloud: the homepage sections. Loaded after base.css and shell.css, on the homepage only. */
/* grain, painted only on the dark bands so nothing repaints on scroll */
.hero::after,.screen--ink::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero,.screen--ink{position:relative}
.screen--ink > .shell{position:relative;z-index:1}
/* ---------- layout ---------- */
.screen{position:relative;padding-block:var(--sec);scroll-margin-top:calc(var(--nav-h) + .5rem);isolation:isolate}
.screen--ink{background:var(--ink);color:var(--bone)}
.screen--bone2{background:var(--bone-2)}
.screen--ink::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(56% 46% at 10% 4%,rgba(19,88,224,.18),transparent 66%),radial-gradient(46% 40% at 94% 98%,rgba(19,88,224,.1),transparent 70%)}
.head{text-align:center;margin-bottom:clamp(2.6rem,5.5vw,4.4rem)}
.head.left{text-align:left}
.eyebrow{display:block;font-weight:600;font-size:.9rem;letter-spacing:.01em;color:var(--blue-deep);margin-bottom:.9rem}
.screen--ink .eyebrow{color:var(--blue-lit)}
.head h2{max-width:19ch;margin-inline:auto}
.head.left h2{margin-inline:0}
.lede{font-size:clamp(1.06rem,1rem + .4vw,1.26rem);line-height:1.55;color:var(--grey);max-width:58ch;letter-spacing:-.011em}
.head .lede{margin:1.2rem auto 0}
.head.left .lede{margin-inline:0}
.screen--ink .lede{color:rgba(245,244,241,.74)}
/* the header is clear over the hero and turns to dark glass once the page moves (nav.js);
   with no script to watch the scroll it is always glass, so nothing reads through it */
html:not(.js) body.home .topbar{border-bottom-color:rgba(255,255,255,.1)}
html:not(.js) body.home .topbar::before{opacity:1}
html:not(.js) body.home .topbar::after{opacity:0}
/* ==========================================================================
   HERO: the orbit assembly. One screen, never pinned: just after load twelve glass
   chips fly from a scatter into the map on a clock, then the lines draw and turn into
   light (site.js). A small glass button at the foot says there is more below.
   ========================================================================== */
.hero{position:relative;background:radial-gradient(120% 90% at 50% 8%,#0E2A63 0%,#0A1A3C 42%,#070C18 78%);color:#fff;isolation:isolate}
.hero-track{position:relative}
.hero-pin{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:center}
.hero-pin .shell{position:relative;z-index:2;max-width:1340px;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.1fr);gap:clamp(1.5rem,3vw,2.6rem);align-items:center;padding-top:var(--nav-h)}
.hero-copy{position:relative}
.hero .eyebrow{color:rgba(255,255,255,.72);font-size:.92rem}
.hero h1{max-width:14ch;margin-bottom:1.2rem}
.hero h1 em{font-style:normal;color:var(--blue-lit);text-shadow:0 0 46px rgba(132,204,252,.4)}
/* a glint crosses "run for you." once after load and again when the map lights: a moving
   band over a solid base layer, so no glyph is ever without paint (and LCP never waits) */
.js .hero h1 em{background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) 108% 0/260% 100% no-repeat,
  linear-gradient(var(--blue-lit),var(--blue-lit));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero h1 em.glint{animation:glint 1.3s cubic-bezier(.45,.05,.35,1) both}
@keyframes glint{from{background-position:108% 0,0 0}to{background-position:-8% 0,0 0}}
.hero .lede{color:rgba(255,255,255,.86);max-width:46ch}
.hero .actions{margin-top:1.8rem}
/* the stage */
.orbit-stage{position:relative;aspect-ratio:1;width:min(100%,680px);margin-inline:auto;contain:layout style;
  /* the chip size before site.js measures the stage, and with no script at all:
     the same 9.8% clamp site.js writes here in pixels. The percentage resolves
     where it is used, on the absolutely placed chip, so it is 9.8% of this square
     stage; a fixed 64px piled the chips on top of one another on a phone. */
  --sz:clamp(34px,9.8%,62px)}
/* The map's lines, in the SVG's own 1000-unit box; the dash is in pathLength units, so
   one number draws a line whatever the stage size. The static markup is the finished
   map; site.js draws it in stems first, then twigs, once every piece is down. Lit, the
   wires turn to light: white-hot stems over a wide blue bloom, ice-blue twigs. */
.orbit-map{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.orbit-map path{fill:none;stroke-linecap:round}
.orbit-map .stem,.orbit-map .twig,.orbit-map .stem-bloom{stroke-dasharray:1 1;stroke-dashoffset:0}
.orbit-map .stem{stroke:rgba(170,212,255,.7);transition:stroke .8s var(--ease)}
.orbit-map .twig{stroke:rgba(132,196,252,.45);transition:stroke .8s var(--ease)}
.orbit-map .stem-bloom{stroke:rgba(47,107,255,0);transition:stroke 1s var(--ease)}
.hero.is-lit .orbit-map .stem,html:not(.js) .orbit-map .stem{stroke:#F4F9FF}
.hero.is-lit .orbit-map .twig,html:not(.js) .orbit-map .twig{stroke:rgba(190,224,255,.96)}
.hero.is-lit .orbit-map .stem-bloom,html:not(.js) .orbit-map .stem-bloom{stroke:rgba(61,123,255,.42)}
/* the light runs: a comet from each piece into the core, a dash on a 2-unit period with a
   long blue bloom and a white-hot head, so it reads as a streak, never a dot. Both ends of
   the dash sit off the path, so nothing shows until site.js runs it */
.orbit-map .run-b,.orbit-map .run-c{stroke-dasharray:.3 1.7;stroke-dashoffset:2.3;opacity:0}
.orbit-map .run-b{stroke:rgba(108,168,255,.6)}
.orbit-map .run-c{stroke:#fff;stroke-dasharray:.11 1.89;stroke-dashoffset:2.11}
.orbit-map .runs.on path{opacity:1}
.orbit-core{position:absolute;left:50%;top:50%;width:49%;translate:-50% -50%;z-index:2;display:grid;place-items:center;
  transform:scale(.72);opacity:.35;filter:blur(6px) saturate(.7);transition:transform 1.2s var(--spring-soft),opacity .9s var(--ease),filter .9s var(--ease)}
.hero.is-system .orbit-core,html:not(.js) .orbit-core{transform:none;opacity:1;filter:none}
.orbit-core img{width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(19,88,224,.55))}
.orbit-core .halo{position:absolute;inset:-30%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(19,88,224,.44),rgba(19,88,224,.13) 55%,transparent 72%);opacity:0;transition:opacity 1s var(--ease),transform 1s var(--spring-soft)}
.hero.is-system .orbit-core .halo,html:not(.js) .orbit-core .halo{opacity:1}
.hero.is-lit .orbit-core .halo,html:not(.js) .orbit-core .halo{transform:scale(1.1)}
/* the flare: a burst of light each time a comet lands in the core (site.js, opacity and scale only) */
.orbit-core .flare{position:absolute;inset:-18%;border-radius:50%;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(207,224,255,.55),rgba(61,123,255,.3) 40%,transparent 70%)}
/* the pieces: .sat is flown by site.js; .chip is a white glass disc (a third-party mark is
   only ever shown on white) with a lip, a blue caustic at the bottom, a lens gloss under
   the mark and a ring of light round the rim. It plays the landing pop. */
.sat{position:absolute;width:var(--sz);height:var(--sz);margin:calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);z-index:3}
/* Every chip's resting place, in percentages of the square stage, so the
   assembled map is what the stylesheet alone renders. site.js animates as an
   offset from these anchors and lands back on zero, and build/mapshot.mjs
   asserts that offset is under 1.5px at the end of the scroll, which is what
   stops the two copies of the geometry from drifting apart. */
.sat[data-group="0"][data-slot="0"]{left:10.023%;top:37.156%}
.sat[data-group="0"][data-slot="1"]{left:13.793%;top:24.648%}
.sat[data-group="0"][data-slot="2"]{left:24.258%;top:16.826%}
.sat[data-group="1"][data-slot="0"]{left:75.742%;top:16.826%}
.sat[data-group="1"][data-slot="1"]{left:86.207%;top:24.648%}
.sat[data-group="1"][data-slot="2"]{left:89.977%;top:37.156%}
.sat[data-group="2"][data-slot="0"]{left:91.060%;top:58.789%}
.sat[data-group="2"][data-slot="1"]{left:88.601%;top:69.975%}
.sat[data-group="2"][data-slot="2"]{left:81.973%;top:79.441%}
.sat[data-group="2"][data-slot="3"]{left:72.302%;top:85.578%}
.sat[data-group="3"][data-slot="0"]{left:20.174%;top:79.557%}
.sat[data-group="3"][data-slot="1"]{left:12.025%;top:67.918%}
.hero.is-sorting .sat{will-change:transform}
.chip{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;isolation:isolate;
  background:radial-gradient(120% 100% at 32% 10%,#fff 0%,#FDFEFF 38%,#EEF3FC 70%,#DCE6F7 100%);
  box-shadow:inset 0 1.5px 0 #fff,inset 0 -2.5px 4px rgba(19,88,224,.16),inset 0 0 0 .5px rgba(15,18,22,.1),0 1px 1.5px rgba(4,8,18,.3),0 12px 26px -10px rgba(4,8,18,.7);
  transition:box-shadow .8s var(--ease)}
.chip::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.4px;z-index:2;pointer-events:none;
  background:conic-gradient(from 210deg,rgba(255,255,255,0),#fff 40deg,rgba(255,255,255,0) 90deg,rgba(255,255,255,0) 190deg,rgba(120,170,255,.6) 230deg,rgba(255,255,255,0) 280deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.chip::after{content:"";position:absolute;left:16%;right:16%;top:6%;height:40%;border-radius:50%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0))}
.chip svg,.chip .igx{position:relative;z-index:1;width:56%;height:56%}
.hero.is-lit .chip,html:not(.js) .chip{box-shadow:inset 0 1.5px 0 #fff,inset 0 -2.5px 4px rgba(19,88,224,.2),inset 0 0 0 .5px rgba(15,18,22,.1),
  0 0 0 1px rgba(108,178,252,.55),0 0 26px -4px rgba(61,123,255,.75),0 12px 26px -10px rgba(4,8,18,.7)}
/* the landing: the swell snaps back on the gel spring and a ring of light leaves the chip */
.sat::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;z-index:-1;
  box-shadow:0 0 0 1.5px rgba(172,210,255,.85),0 0 14px rgba(61,123,255,.5)}
.sat.landed .chip{animation:land .64s var(--spring-gel) both}
.sat.landed::after{animation:ripple .9s var(--ease-out) both}
@keyframes land{from{transform:scale(1.18)}to{transform:none}}
@keyframes ripple{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
/* as a comet leaves a chip its rim flashes */
.sat.send .chip::before{animation:rimflash .7s var(--ease-out) both}
@keyframes rimflash{0%{filter:none}30%{filter:brightness(1.8) drop-shadow(0 0 4px #9CC8FF)}100%{filter:none}}
.sat .lab{position:absolute;left:50%;top:calc(100% + .3rem);translate:-50% 0;white-space:nowrap;font-size:.76rem;font-weight:600;letter-spacing:.01em;
  color:rgba(255,255,255,.9);opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.hero.is-system .sat:hover .lab,.hero.is-system .sat:focus-within .lab{opacity:1}
/* branch names on wide screens: sentence case in small blue glass, no tracking */
.orbit-tag{position:absolute;z-index:4;translate:-50% -50%;white-space:nowrap;pointer-events:none;font-size:.8rem;font-weight:600;color:#fff;
  padding:.28rem .72rem;border-radius:999px;background:linear-gradient(180deg,rgba(47,107,255,.5),rgba(19,88,224,.32));
  -webkit-backdrop-filter:blur(8px) saturate(160%);backdrop-filter:blur(8px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(150,196,255,.35);opacity:0;transform:scale(.9);
  transition:opacity .6s var(--ease),transform .7s var(--spring-pop),box-shadow .7s var(--ease)}
.orbit-tag[data-group="0"]{left:27.811%;top:34.463%}
.orbit-tag[data-group="1"]{left:72.189%;top:34.463%}
.orbit-tag[data-group="2"]{left:72.189%;top:65.537%}
.orbit-tag[data-group="3"]{left:27.811%;top:65.537%}
.hero.is-lit .orbit-tag,html:not(.js) .orbit-tag{opacity:1;transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(150,196,255,.5),0 0 18px -6px rgba(108,178,252,.6)}
/* on smaller screens the four labels stay (Arno, 2026-09-29: bring them back on the phone),
   smaller and without the background blur, which a phone pays for on every frame */
@media (max-width:1080px){
  .orbit-tag{font-size:.75rem;padding:.2rem .6rem;-webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(180deg,rgba(47,107,255,.78),rgba(19,88,224,.62))}
}
/* Tablets and phones: one column, the words first. The hero is one screen tall and never
   holds the page (2026-09-29), so the map sorts on its clock while the thumb moves on. */
@media (max-width:960px){
  .hero-pin{align-items:flex-start;min-height:0}
  .hero-pin .shell{grid-template-columns:1fr;gap:.6rem;padding-top:calc(var(--nav-h) + .6rem);align-content:start;height:100%}
  .orbit-stage{width:min(100%,max(260px,40svh));order:-1;margin-bottom:.1rem}
  .hero h1{max-width:16ch;font-size:clamp(1.9rem,7.4vw,2.6rem)}
  .hero .lede{font-size:1rem}
  .hero .actions{margin-top:1.1rem}
  .sat .lab{display:none}
}
@media (max-width:560px){
  .orbit-stage{width:min(100%,max(220px,37svh))}
  .hero .lede{font-size:.98rem;line-height:1.5}
  .hero h1{margin-bottom:.9rem}
}
/* without JS, with reduced motion or in a short window the system is simply there, assembled and lit */
html:not(.js) .hero-track,.no-anim .hero-track{height:auto}
html:not(.js) .hero-pin,.no-anim .hero-pin{position:relative;height:auto;min-height:100svh}
/* more below: one small liquid-glass button at the foot of the hero. The chevron dips and
   brightens on a slow loop (never gone, so the button is never empty), and the button bows out once the page has moved (site.js sets
   html.scrolled). It links to the next section, so a tap works too */
.hero-more{position:absolute;left:50%;bottom:max(20px,env(safe-area-inset-bottom));z-index:3;display:grid;place-items:center;
  width:46px;height:46px;margin-left:-23px;border-radius:50%;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.2),0 10px 26px -10px rgba(0,0,0,.6);
  transition:opacity .45s var(--ease),transform .6s var(--spring-soft)}
.hero-more svg{display:block;animation:more 2.6s var(--ease) infinite}
@keyframes more{0%,100%{transform:translateY(-1px);opacity:.62}50%{transform:translateY(3px);opacity:1}}
.hero-more:active{transform:scale(.92)}
html.scrolled .hero-more{opacity:0;transform:translateY(8px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.hero-more svg{animation:none}}
html:not(.js) .hero-more{display:none}
/* the second way on is a plain text link, not a second button */
.hero .actions{align-items:center;column-gap:1.6rem}
.hero-link{display:inline-flex;align-items:center;gap:.45rem;min-height:48px;font-weight:600;color:#fff;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:5px}
.hero-link:hover{text-decoration-color:#fff}
.hero-link svg{transition:transform .5s var(--spring-pop)}
.hero-link:hover svg{transform:translateX(5px)}
@media (max-width:759px){
  .hero .actions{margin-top:1rem;row-gap:.1rem}
  .hero-link{min-height:44px}
}
/* and on a phone the words come first and the map fills the screen under them: the H1
   and the first button sit inside the first 600px, and the map sorts in the space
   below "See the pricing" instead of leaving it as bare footage. The eyebrow (the H1
   already says who it is for) is left to the wider screens */
@media (max-width:560px){
  .hero-pin .shell{padding-top:calc(var(--nav-h) + .9rem);padding-bottom:1rem;gap:.3rem}
  .orbit-stage{order:0;width:min(100%,max(240px,43svh))}
  .hero .eyebrow{display:none}
  .hero h1{margin-bottom:.75rem}
  .hero .actions{margin-top:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .orbit-map .runs{display:none}
  .orbit-map path,.chip,.orbit-core,.orbit-core .halo,.orbit-tag{transition:none}
}
/* ---------- the system: the water, the ribbon, four liquid-glass columns ----------
   The ground without WebGL, and under the canvas until it fades in: the old navy blobs,
   painted once. fluid.js lays the moving water over it (.fluid-wrap, base.css), and a
   seam at the top carries the hero's night down into it. */
#system{padding-top:0;background:radial-gradient(60% 40% at 12% 8%,rgba(19,88,224,.32),transparent 70%),radial-gradient(50% 38% at 92% 46%,rgba(11,63,168,.34),transparent 72%),
  radial-gradient(60% 40% at 30% 96%,rgba(19,88,224,.2),transparent 70%),var(--ink)}
#system .fluid-wrap::after,#faq .fluid-wrap::after{content:"";position:absolute;left:0;right:0;top:0;height:140px;background:linear-gradient(180deg,#070C18,rgba(7,12,24,0))}
#faq .fluid-wrap::after{background:linear-gradient(180deg,var(--ink),rgba(15,18,22,0))}
/* the ribbon: platforms gliding past as clear glass on a dark ground (no blur: the water
   under them is already soft, and fourteen moving blurred pills would cost too much).
   Without script, a still row that scrolls sideways; motion.js doubles the set and
   motion.css runs it */
.ribbon{position:relative;z-index:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:2.2rem var(--pad) 1.4rem;margin-bottom:clamp(2.6rem,6vw,4.6rem)}
.ribbon::-webkit-scrollbar{display:none}
.rtrack{display:flex;width:max-content}
.rset{display:flex;gap:.7rem;padding-right:.7rem}
.rpill{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;padding:.42rem 1.05rem .42rem .42rem;border-radius:999px;
  font-size:.92rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:rgba(255,255,255,.92);
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 50%,rgba(255,255,255,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.08),0 8px 20px -12px rgba(0,0,0,.7)}
/* the words are drawn from data-l, so they are never page text */
.rpill[data-l]::after{content:attr(data-l)}
.rchip{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
  background:radial-gradient(120% 100% at 32% 10%,#fff 0%,#F4F7FD 60%,#DCE6F7 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1.5px 3px rgba(19,88,224,.18),0 2px 5px rgba(0,0,0,.35)}
.rchip svg,.rchip .igx{width:17px;height:17px;color:var(--blue)}
/* Instagram's mark carries its own gradient, painted on the glyph and masked to
   its shape, so every chip on the page keeps the same white ground. A gradient
   declared inside an SVG <symbol> is not painted through <use>, hence the mask. */
/* the Instagram glyph (drawn in CSS); called .igx because the iPhone kit's glass buttons are .ig */
.igx{display:block;width:60%;height:60%;
  background:radial-gradient(circle at 28% 106%,#fdf497 0%,#fd5949 42%,#d6249f 62%,#285AEB 94%);
  -webkit-mask:url(img/ig-glyph.svg) center/contain no-repeat;mask:url(img/ig-glyph.svg) center/contain no-repeat}
/* Four glass columns (.g-dark, base.css) on one shared set of rows. The grid owns the
   rows (heading, line, three items) and every column and its item list take them as a
   subgrid, so each heading, line and item starts at the same height in all four
   columns, however many lines a neighbour's words run to. On a laptop a 64px channel
   above the columns carries the route; on a phone the 44px gaps carry its S-bends. */
.sysgrid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto);gap:clamp(.9rem,1.4vw,1.3rem);padding-top:64px}
@media (max-width:1080px){.sysgrid{grid-template-columns:repeat(2,1fr);padding-top:0}}
@media (max-width:600px){.sysgrid{grid-template-columns:1fr;row-gap:44px;padding-top:12px}}
.syscol{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;padding:1.5rem 1.4rem 1.4rem;z-index:1}
.syscol > :not(.g-rim):not(.g-under):not(.spot){position:relative;z-index:2}
.syscol h3{margin-bottom:.4rem;color:#fff;white-space:nowrap;transition:color .8s var(--ease)}
.js .syscol:not(.is-on) h3{color:rgba(255,255,255,.8)}
.syscol > p{font-size:.94rem;color:var(--grey-2);line-height:1.5;margin-bottom:1.1rem}
.sysitems{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:.5rem}
.sysitem{display:grid;grid-template-columns:40px 1fr;gap:.8rem;align-items:start;padding:.75rem .8rem;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);text-align:left;width:100%;color:var(--bone);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .4s var(--ease),transform .5s var(--spring-pop)}
.sysitem:active{transform:scale(.975)}
@media (hover:hover){.sysitem:hover{border-color:rgba(108,178,252,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);transform:translateX(3px)}}
.sysitem .ic{width:40px;height:40px;border-radius:11px;flex:none;
  background:radial-gradient(120% 100% at 32% 10%,#fff 0%,#F6F8FD 60%,#E2EAF8 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1.5px 3px rgba(19,88,224,.16),0 3px 8px -3px rgba(0,0,0,.5)}
.sysitem > span + span{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5rem;row-gap:.15rem}
.sysitem > span + span > b{flex:0 1 auto}
.sysitem b{display:block;font-weight:600;font-size:.96rem;letter-spacing:-.015em;line-height:1.3}
.sysitem > span + span > span{display:block;flex:1 0 100%;font-size:.85rem;color:var(--grey-2);line-height:1.4}
/* the one tag: plain words, no box. Everything without it is the Foundation. */
.sysitem > span + span > .plan{flex:0 0 auto;order:0;font-size:.8rem;font-weight:600;line-height:1.3;color:var(--blue-lit)}
/* four narrow columns: the tag cannot sit beside the name, so it follows the caption */
@media (min-width:1081px){.sysitem > span + span > .plan{order:2}}
.sysfoot{margin-top:clamp(1.4rem,2.6vw,2rem);text-align:center;font-size:.92rem;color:var(--grey-2);text-wrap:balance;transition:color 1s var(--ease)}
.sysgrid.done + .sysfoot{color:rgba(245,244,241,.92)}
@media (max-width:640px){
  .sysitem{grid-template-columns:38px 1fr}
  .sysitem .ic{width:38px;height:38px;border-radius:10px}
  .sysfoot{text-align:left}
}
/* Foundation first: what a client buys on day one keeps the full glass, and what
   they stack on later sits back a step. Same layout, same icons, less weight. */
.sysitem[data-when="later"]{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018));border-color:rgba(255,255,255,.045)}
.sysitem[data-when="later"] b{color:rgba(245,244,241,.82)}

/* ---------- built to turn a search into a call: one device, four stories ----------
   The first story ("Written for your trade", the website) plays on a real MacBook, the other
   three on a real iPhone (ios.css, the device kit), with the four stories as glass buttons, each
   with its app icon; the one playing is Arcos blue with a line that fills while its lap plays,
   so it reads as "tap one to play it" without any instruction on the page. On a phone the
   devices are small enough that heading, device and the four buttons fit one screen (Arno,
   2026-09-29, after stonesystems.io); the stories' lines show on wider screens and stay in the
   page for search. Only one device is shown at a time (the others carry [hidden]); site.js
   switches them and hands each lap on.
   The stage is ONE fixed box that holds either device (2026-10-01), so the buttons never move
   when the story changes: as tall as the tallest story (the form story, whose lead card hangs
   below its phone), every iPhone at its top, the MacBook (landscape, far shorter) in its
   middle. On a phone the Pause button sits in the box's lower right corner, beside the
   devices, instead of on a row of its own under them. */
.feat{display:grid;gap:1rem;align-items:center;margin-inline:auto}
.feat-stage{display:grid;justify-items:center;min-width:0;min-height:473px}
.feat-slot{position:relative;display:grid;justify-items:center;align-content:start;width:100%}
.feat-slot:has(.ios.mac){align-content:center}
.feat-slot[hidden]{display:none}
.feat-slot:not([hidden]){animation:featin .45s var(--ease-out) both}
@keyframes featin{from{opacity:0;transform:scale(.985)}}
.feat .ios{--pw:200}
.feat .ios-fig{display:grid;justify-items:center;gap:.35rem;margin:0;position:static}
.feat .ios-fig:has(> .ios.mac){width:100%;max-width:none}
.feat .ios-fig .viz-cap{max-width:34ch;text-align:center;justify-content:center;margin-top:0;position:static}
.feat .ios-fig .viz-cap > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.feat .ios-fig .viz-btn{min-height:32px;font-size:.8rem;position:absolute;right:0;bottom:0}
/* the MacBook says in words what it shows, in the room the landscape screen leaves */
.feat .ios-fig .ios.mac ~ .viz-cap > span{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;padding-top:.55rem}
/* the MacBook: the content's width with the 16 px page gutters (16 px from each edge of the
   screen), then a step up on wider screens */
.feat .ios.mac{--mw:288;margin-inline:calc((100% - var(--mw) * 1px) / 2)}
@media (min-width:360px){.feat .ios.mac{--mw:328}}
@media (min-width:375px){.feat .ios.mac{--mw:343}}
@media (min-width:390px){.feat .ios.mac{--mw:358}}
@media (min-width:393px){.feat .ios.mac{--mw:361}}
@media (min-width:412px){.feat .ios.mac{--mw:380}}
@media (min-width:430px){.feat .ios.mac{--mw:398}}
@media (min-width:512px){.feat .ios.mac{--mw:480}}
@media (min-width:600px){.feat .ios.mac{--mw:540}}
@media (min-width:768px){.feat .ios.mac{--mw:620}}
/* until the device kit (late) arrives, a device keeps its exact box and shows nothing, so the
   page never shifts and never shows raw screen markup; ios.css makes it visible. The box holds
   its ratio only while what is inside it cannot stretch it: no content-based minimum height,
   and the unstyled screen markup clipped (the kit sets overflow back to visible) */
.ios{display:block;width:calc(var(--pw,300) * 1px);aspect-ratio:433 / 905;visibility:hidden;min-height:0;overflow:hidden}
.ios.mac{width:calc(var(--mw,960) * 1px);aspect-ratio:1500 / 912}
/* the MacBook in the "Your website" panel (2026-10-01): under the words, never in the kit's
   narrow phone column, as wide as the panel lets it be read (8 px from the panel's edges on a
   phone, the panel's own text width on a wide screen), centered */
.dbody:has(> .ios-fig > .ios.mac){display:block;overflow-x:hidden}
.dbody:has(> .ios-fig > .ios.mac) > .ios-fig{position:relative;margin:.2rem 0 1.1rem;padding:1rem 0 .2rem}
.dbody .ios-fig > .ios.mac{--mw:280;margin-inline:calc((100% - var(--mw) * 1px) / 2)}
@media (min-width:360px){.dbody .ios-fig > .ios.mac{--mw:320}}
@media (min-width:375px){.dbody .ios-fig > .ios.mac{--mw:335}}
@media (min-width:390px){.dbody .ios-fig > .ios.mac{--mw:350}}
@media (min-width:393px){.dbody .ios-fig > .ios.mac{--mw:352}}
@media (min-width:412px){.dbody .ios-fig > .ios.mac{--mw:370}}
@media (min-width:430px){.dbody .ios-fig > .ios.mac{--mw:388}}
@media (min-width:480px){.dbody .ios-fig > .ios.mac{--mw:432}}
@media (min-width:520px){.dbody .ios-fig > .ios.mac{--mw:470}}
@media (min-width:600px){.dbody .ios-fig > .ios.mac{--mw:540}}
@media (min-width:700px){.dbody .ios-fig > .ios.mac{--mw:630}}
@media (min-width:760px){.dbody .ios-fig > .ios.mac{--mw:680}}
.feat-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:0;padding:0;list-style:none}
.feat-it{position:relative;overflow:hidden;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(15,18,22,.08),0 1px 2px rgba(15,18,22,.06),0 10px 24px -16px rgba(3,18,70,.45);
  transition:background .45s var(--ease),box-shadow .45s var(--ease),transform .5s var(--spring-pop)}
.feat-it h3{margin:0;font-size:.95rem;line-height:1.25;letter-spacing:-.01em}
.feat-tab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:.6rem;width:100%;min-height:52px;padding:.55rem .7rem}
.feat-tab::after{content:"";position:absolute;inset:0}
.feat-tab:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:18px}
.feat-tab .pic{width:32px;height:32px;border-radius:9px}
.feat-tab .pic svg{width:18px;height:18px}
.feat-it p{display:none;margin:0;padding:0 1rem 1rem 3.65rem;color:var(--grey);max-width:none}
.feat-it .feat-stat{font-size:.86rem;padding-top:.45rem}
.feat-it .feat-stat .src{position:relative;z-index:1;white-space:nowrap}
.feat-it:active{transform:scale(.97)}
@media (hover:hover){.feat-it:not(.is-on):hover{transform:translateY(-2px)}}
/* the story playing: Arcos blue, white words, and its lap as a line along the bottom edge */
.feat-it.is-on{background-color:#1358E0;background-image:linear-gradient(180deg,#2B6CF0,#1358E0);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 28px -12px rgba(19,88,224,.7)}
.feat-it.is-on h3{color:#fff}
.feat-it.is-on p{color:rgba(255,255,255,.88)}
.feat-it.is-on .src{color:#fff}
.feat-it::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.9);transform:scaleX(0);transform-origin:0 50%;z-index:1}
.feat-it.is-running::before{animation:featbar var(--lap,12s) linear both}
@keyframes featbar{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.feat-it.is-running::before{animation:none}.feat-slot:not([hidden]){animation:none}}
@media (min-width:900px){
  /* the stage takes what the titles leave, so the MacBook gets the width it needs to be read */
  .feat{grid-template-columns:minmax(0,1fr) 360px;gap:clamp(2rem,4vw,3.6rem)}
  .feat-stage{min-height:720px}
  /* the titles keep one box too: as tall as with the longest story open, its top fixed */
  .feat-list{min-height:494px;align-content:start}
  .feat .ios{--pw:282}
  .feat .ios.mac{--mw:430}
  .feat .ios-fig .viz-cap{position:relative}
  .feat .ios-fig .viz-cap > span{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
  .feat .ios-fig .viz-btn{position:static}
  .feat-list{grid-template-columns:1fr;gap:.7rem}
  .feat-it h3{font-size:1.2rem}
  .feat-tab{min-height:64px;padding:.85rem 1rem;gap:.85rem}
  .feat-tab .pic{width:36px;height:36px;border-radius:10px}
  /* only the story playing opens to its line and source; the others stay one-line buttons */
  .feat-it p{display:block;max-height:0;opacity:0;overflow:hidden;padding-bottom:0;transition:max-height .5s var(--ease-out),opacity .35s var(--ease),padding .5s var(--ease-out)}
  .feat-it.is-on p{max-height:9rem;opacity:1;padding-bottom:1rem}
  .feat-it.is-on p + p{padding-top:.1rem}
  #features{padding-block:3rem 3.4rem}
  #features .head{margin-bottom:1.6rem}
}
@media (min-width:1024px){.feat .ios.mac{--mw:540}}
@media (min-width:1200px){.feat{grid-template-columns:minmax(0,1fr) 400px}.feat-stage{min-height:744px}.feat-list{min-height:460px}.feat .ios{--pw:292}.feat .ios.mac{--mw:640}}
@media (min-width:1300px){.feat .ios.mac{--mw:680}}
@media (max-width:370px){.feat .ios{--pw:190}.feat-stage{min-height:452px}.feat-it h3{font-size:.88rem}}
/* the section itself sits tighter on a phone so heading, iPhone and buttons share one screen */
@media (max-width:899px){#features{padding-block:1.6rem 2.2rem}#features .head{margin-bottom:.9rem}}
/* on a phone the MacBook story is one block: the MacBook, then its line and its Pause button as
   one row right under it (the way a figure on the sub-pages carries them), the block centered in
   the stage the iPhones need, so the room it leaves is even above and below, never a hole */
@media (max-width:899px){
  .feat .ios-fig .ios.mac ~ .viz-cap{width:100%;max-width:none;justify-content:space-between;text-align:left}
  .feat .ios-fig .ios.mac ~ .viz-cap .viz-btn{position:static;min-height:44px}
}
/* each product sits in a dark glass phone frame (shell.css, shared with the sub-pages) */

/* ---------- pricing: the Foundation in sapphire glass, the Ecosystem in milk glass ----------
   Over a still blue pool, painted once (a drifting pool next to the running water cost a
   restyle on every frame the water drew). The glass is base.css's .g-sapphire and
   .g-milk; the water inside the Foundation is canvas.caustic (fluid.js, after load). */
#pricing{overflow:clip;background:radial-gradient(62vmax 62vmax at 12% 70%,rgba(19,88,224,.13),rgba(19,88,224,.04) 50%,transparent 70%),
  radial-gradient(56vmax 56vmax at 100% 0%,rgba(108,178,252,.2),rgba(108,178,252,.05) 50%,transparent 70%),
  radial-gradient(60vmax 60vmax at 62% 118%,rgba(19,88,224,.12),transparent 66%),var(--bone-2)}
#pricing .head{margin-bottom:clamp(2rem,4vw,3.2rem)}
.prices{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem;align-items:stretch}
@media (min-width:900px){.prices{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(1rem,2vw,1.6rem)}}
.pcol{display:flex;flex-direction:column;align-items:flex-start;border-radius:32px;padding:clamp(1.6rem,3vw,2.4rem);--pl:var(--line)}
.pcol h3{font-size:22px;letter-spacing:-.03em;line-height:1.2}
.pcol .amt{display:flex;align-items:baseline;gap:.55rem;margin-top:.9rem;line-height:1}
.pcol .amt b{font-family:"Archivo",sans-serif;font-weight:800;font-stretch:108%;font-size:52px;letter-spacing:-.05em;line-height:1}
.pcol .amt > span{font-size:18px;color:var(--grey)}
@media (min-width:900px){.pcol .amt b{font-size:64px}}
.pcol .pterms{margin-top:.9rem;color:var(--ink)}
.pcol .quoted{margin-top:.9rem;font-family:"Archivo",sans-serif;font-weight:800;font-stretch:108%;font-size:28px;letter-spacing:-.04em;line-height:1.1}
.plist{align-self:stretch;margin-top:1.6rem;border-bottom:1px solid var(--pl)}
.plist li{border-top:1px solid var(--pl)}
.plist li,.plist a{display:block;padding-block:.78rem;font-size:1.02rem;font-weight:500;line-height:1.35;color:var(--ink)}
/* each row is a way on: a chevron that nudges on a spring, not an underline */
.plist a{position:relative;margin-block:-.78rem;padding-right:2rem}
/* every row leads with its app icon: a small white squircle like a home-screen icon, the
   brand's own colours where there is a brand (Arno, 2026-09-29: "we need more icons") */
.plist a:has(.pic){display:flex;align-items:center;gap:.85rem}
.g-sapphire .pic{box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(3,20,78,.3),0 8px 18px -8px rgba(3,20,78,.7)}
.g-sapphire .plist a .pic{text-shadow:none}
.plist a::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;margin-top:-4px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;
  transform:rotate(45deg);opacity:.55;transition:transform .5s var(--spring-pop),opacity .3s var(--ease)}
.plist a:hover::after{transform:translateX(4px) rotate(45deg);opacity:1}
.pcol .palt{margin-top:1rem;color:var(--grey)}
.pact{display:flex;flex-direction:column;align-items:stretch;gap:.6rem;align-self:stretch;margin-top:auto;padding-top:1.6rem}
.tlink{align-self:flex-start;min-height:44px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(15,18,22,.35);text-underline-offset:4px}
.tlink:hover{color:var(--blue-deep);text-decoration-color:currentColor}
/* the Foundation: white on sapphire, with a soft shade under the words so the moving
   light never takes their contrast */
.g-sapphire{--pl:rgba(255,255,255,.18)}
.g-sapphire .amt > span{color:rgba(255,255,255,.92)}
.g-sapphire .pterms,.g-sapphire .plist li,.g-sapphire .plist a{color:#fff}
.g-sapphire .palt{color:rgba(255,255,255,.9)}
.g-sapphire h3,.g-sapphire .amt,.g-sapphire .pterms,.g-sapphire .palt,.g-sapphire .plist a{text-shadow:0 1px 2px rgba(3,20,78,.28),0 2px 16px rgba(3,20,78,.42)}
.g-sapphire :focus-visible{outline-color:#fff}
.g-milk .quoted{color:var(--blue)}

/* phones: the same sections, closer together */
@media (max-width:600px){
  .screen{padding-block:3rem}
  .frame .viz.pan{max-width:252px}
  .qa .q{min-height:56px}
  .head{margin-bottom:2rem}
  .sysgrid{column-gap:.75rem}
  .syscol{padding:1.2rem 1rem 1rem}
  .syscol > p{margin-bottom:.9rem}
  .sysitem{padding:.62rem .7rem;gap:.7rem}
  .plist li,.plist a{padding-block:.6rem}
  .plist a{margin-block:-.6rem}
  .qa .q{padding:.85rem 1.1rem}
  .qa .a-in{padding:0 1.1rem 1.15rem}
  .pact{align-self:stretch}
}
/* the plain bone sections need the ink focus ring (the white one is meant for the dark bands) */
#features :focus-visible,#about :focus-visible,#contact :focus-visible{outline-color:var(--ink)}

/* ---------- about ---------- */
.about{max-width:1000px;display:grid;grid-template-columns:clamp(170px,21vw,250px) minmax(0,1fr);column-gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.about > :not(.about-face){grid-column:2}
.about-face{grid-row:1 / span 3;margin:0}
.about-face figcaption{margin-top:.7rem;font-size:.86rem;font-weight:600;color:var(--grey);text-align:center}
@media (max-width:759px){
  .about{grid-template-columns:1fr}
  .about > :not(.about-face){grid-column:1}
  .about-face{grid-row:auto;width:min(44vw,180px);margin-bottom:1.3rem}
  .about-face figcaption{text-align:left}
}
.about h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
.about .lede{margin-top:1.1rem}
.about .more{margin-top:1.2rem}
.about .more:not(:has(a)){display:none}
.about .more a{display:inline-block;padding-block:.6rem;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(15,18,22,.35)}
.about .more a:hover{color:var(--blue-deep)}
/* ---------- FAQ: glass questions over the water ----------
   Each item is a pane of dark glass without its own blur (seven blurred panes over
   moving water is more than a phone should draw); open, its rim lights. */
#faq{background:radial-gradient(60% 40% at 88% 10%,rgba(19,88,224,.26),transparent 70%),radial-gradient(56% 40% at 8% 92%,rgba(11,63,168,.3),transparent 72%),var(--ink)}
.acc{display:grid;gap:.65rem}
.qa{border:1px solid rgba(255,255,255,.1);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025) 50%,rgba(255,255,255,.045)),rgba(22,26,32,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 20px 40px -28px rgba(0,0,0,.8);transition:border-color .36s var(--ease),box-shadow .6s var(--ease)}
.qa:hover,.qa[open]{border-color:rgba(108,178,252,.45)}
.qa[open]{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px rgba(61,123,255,.16),0 24px 60px -30px rgba(19,88,224,.6)}
.qa .q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;text-align:left;padding:1.1rem 1.4rem;cursor:pointer;list-style:none;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:clamp(1rem,1.2vw,1.14rem);letter-spacing:-.028em;line-height:1.3;color:var(--bone);transition:color .28s var(--ease)}
.qa .q::-webkit-details-marker{display:none}
.qa .q::marker{content:""}
.qa:hover .q,.qa[open] .q{color:var(--blue-lit)}
.qa .pm{flex:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--line-d);display:grid;place-items:center;position:relative;
  transition:transform .6s var(--spring-pop),background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:transform .5s var(--spring-pop),opacity .28s var(--ease)}
.qa .pm::before{width:13px;height:2.2px}
.qa .pm::after{width:2.2px;height:13px}
.qa[open] .pm{background:var(--blue);border-color:var(--blue);color:#fff;transform:rotate(180deg)}
.qa[open] .pm::after{transform:scaleY(0);opacity:0}
.qa .a-in{padding:0 1.4rem 1.3rem;color:var(--grey-2);font-size:1rem;line-height:1.6;max-width:70ch}
@media (prefers-reduced-motion:no-preference){
  .qa[open] .a-in{animation:qain .6s var(--spring-soft)}
}
@keyframes qain{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.qa .a-in a{color:var(--blue-lit);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.qa .a-in a:hover{color:#fff}
/* ---------- contact: the quick form, inline ---------- */
/* the quick form on milk glass, over a still pool */
#contact{background:radial-gradient(60vmax 50vmax at 0% 100%,rgba(19,88,224,.11),transparent 62%),radial-gradient(50vmax 40vmax at 100% 0%,rgba(108,178,252,.16),transparent 62%),var(--bone)}
#contact .bk--inline{padding:.35rem clamp(1.1rem,3vw,1.8rem) .5rem;border-top:0;border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.56));-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 1.5px 0 #fff,inset 0 -1px 0 rgba(15,18,22,.05),inset 0 0 0 1px rgba(255,255,255,.7),0 1px 2px rgba(15,18,22,.06),0 34px 70px -40px rgba(15,18,22,.45)}
#contact .bk--inline .bk-nav{background:transparent}
#contact .head{margin-bottom:1.4rem}
#contact .head h2{max-width:22ch}
.contact-form{max-width:640px}
.contact-form.bk--inline{border-top:0}
.contact-alt{max-width:640px;margin-top:1.4rem;color:var(--grey)}
.contact-alt a{display:inline-block;padding-block:.55rem;margin-block:-.55rem;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(15,18,22,.35)}
.contact-alt a:hover{color:var(--blue-deep)}
.contact-alt a[href^="tel:"]{white-space:nowrap}
/* ---------- demo modal ----------
   Only the closed state is here, so the dialog is hidden from the first paint; the panel
   itself (everything below) is assets/demo.css, which nav.js loads after the page has
   loaded ("late" in pages/index.json): it is never seen before a tap.
   Opening a piece of the system should feel like going inside the thing that
   was orbiting in the hero, so the panel is built from the hero's own parts: a
   navy ground lit from above left, a glass slab with a lit rim and a contact
   shadow, the same grain, and one radius ramp (22 / 14 / 8 / pill) instead of
   the eight different corners it used to carry. */
.demo{position:fixed;inset:0;z-index:860;display:flex;align-items:center;justify-content:center;padding:clamp(.7rem,3vw,2rem);opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility 0s linear .22s}
.demo.on{opacity:1;visibility:visible;transition:opacity .22s var(--ease),visibility 0s}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ==========================================================================
   ADDITIONS FOR THE REBUILD
   ========================================================================== */
/* the sat labels need a readable ground on the busy field */
.sat .lab{padding:.14rem .5rem;border-radius:7px;background:rgba(7,12,24,.86);z-index:5}
@media (max-width:1080px){
  .sat .lab{display:none}
}
/* the copy always sits on its own ground (the gradients are in HERO GROUND below) */
.hero-pin::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
/* the mark's sheen: a band of light crosses the mark once when the map lights (site.js adds
   .go), masked to the mark's own shape. It never loops: the old 9s loop restyled the page
   60 times a second for as long as it was open, hero on screen or not. */
.orbit-core .sheen{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(102deg,transparent 34%,rgba(255,255,255,.55) 47%,rgba(214,236,255,.3) 53%,transparent 66%);
  background-size:260% 100%;background-repeat:no-repeat;background-position:190% 0;mix-blend-mode:screen;
  -webkit-mask-image:url(img/arcos-mark-260.webp);mask-image:url(img/arcos-mark-260.webp);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.orbit-core .sheen.go{animation:marksheen 1.8s var(--ease-out) both}
@keyframes marksheen{0%{opacity:1;background-position:190% 0}100%{opacity:1;background-position:-90% 0}}
/* ==========================================================================
   ONE CONTRACT FOR EVERY ICON CHIP
   Five places on the page put a mark in a rounded box, and each used to size
   and colour it its own way, which is how a chip ended up inheriting a dark
   section's bone text colour and how a text-column rule squashed a glyph into
   a third of its box. One rule now owns the box, one variable owns the glyph
   size, and every context states its own colour instead of inheriting one.
   ========================================================================== */
.sysitem .ic,.dashmock .row .ic{
  display:grid;grid-template:1fr/1fr;place-items:center;padding:0;gap:0;box-sizing:border-box;font-size:0}
.sysitem .ic::after{content:none}
.sysitem .ic>svg,.dashmock .row .ic>svg,.sysitem .ic>.igx,.dashmock .row .ic>.igx{
  width:var(--ics);height:var(--ics);aspect-ratio:1}
.sysitem .ic{--ics:24px;color:var(--blue)}
.dashmock .row .ic{--ics:14px;color:var(--blue)}
/* a third-party mark is only ever shown on white, per Google's and Meta's own rules */
.ic[data-brand],.num[data-brand]{background:#fff;box-shadow:inset 0 0 0 1px rgba(15,18,22,.08)}
/* ==========================================================================
   HERO GROUND: real footage of Munich at night, the Frauenkirche, under the map
   (Felix-Mittermeier, Pixabay). The picture is the loop's first frame; the video sits
   on it at opacity 0 and only fades in on 'playing', so a refused or slow play leaves
   the still, never a blank box or a play button. A dark veil lifts partway once the
   map is lit, so the city's lights come up with the system. Scrims keep the copy
   on near black; the footage is never tinted.
   ========================================================================== */
.hero-photo{position:absolute;inset:0;z-index:0;display:block;pointer-events:none;overflow:hidden}
.hero-photo picture,.hero-photo img,.hero-video{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 38%}
/* the city sinks into the night of #system under the ribbon: no seam at the hero's lower edge */
.hero-photo::before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:clamp(120px,18svh,160px);background:linear-gradient(180deg,rgba(7,12,24,0),rgba(7,12,24,.55) 45%,#070C18)}
.hero-video{opacity:0;transition:opacity .9s var(--ease)}
.hero-video.is-playing{opacity:1}
.hero-photo::after{content:"";position:absolute;inset:0;background:rgba(5,9,18,.34);transition:opacity 1.4s var(--ease)}
/* .75 of .34 keeps the lit veil at about .26. Over the Munich loop the eyebrow's
   darkest-case pixel then measures 5.3:1 at 1440 and 6.2:1 on a phone, and the
   bloom still reads over the lit old town */
.hero.is-lit .hero-photo::after{opacity:.75}
@media (prefers-reduced-motion:reduce){
  .hero-photo::after{transition:none}
  .hero-video{display:none}
}
.hero-pin::before{background:
  linear-gradient(180deg,rgba(5,9,18,.5) 0%,rgba(5,9,18,0) 18%,rgba(5,9,18,0) 70%,rgba(5,9,18,.72) 100%),
  linear-gradient(100deg,rgba(5,9,18,.92) 0%,rgba(5,9,18,.86) 32%,rgba(5,9,18,.4) 56%,rgba(5,9,18,.1) 100%)}
.hero-copy::before{content:"";position:absolute;inset:-14% -22% -14% -30%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(5,9,18,.55),rgba(5,9,18,.3) 62%,transparent)}
.orbit-stage::before{content:"";position:absolute;inset:4%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(5,9,18,.32),rgba(5,9,18,.16) 60%,transparent)}
/* The navy blobs under the map used to supply the bloom at the lit moment. Over a
   photograph the stage has to carry it itself, so the lights still come on around
   the mark. It only fades in at is-lit, and sits under the chips and the lines. */
.orbit-stage::after{content:"";position:absolute;inset:6%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(19,88,224,.52),rgba(19,88,224,.22) 46%,rgba(108,178,252,.07) 70%,transparent);
  opacity:0;transform:scale(.86);transition:opacity 1.2s var(--ease),transform 1.4s var(--out)}
.hero.is-lit .orbit-stage::after,html:not(.js) .orbit-stage::after{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .orbit-stage::after{transition:none}
}
@media (max-width:960px){
  .hero-photo img,.hero-video{object-position:50% 0%}
  .hero-copy::before{inset:-6% -12%}
  .hero-pin::before{background:linear-gradient(180deg,rgba(5,9,18,.46) 0%,rgba(5,9,18,.2) 16%,rgba(5,9,18,.3) 36%,rgba(5,9,18,.82) 51%,rgba(5,9,18,.92) 100%)}
}
/* a phone reads the words first, so the dark sits under them and the city stays
   bright behind the map below */
@media (max-width:560px){
  .hero-pin::before{background:linear-gradient(180deg,rgba(5,9,18,.6) 0%,rgba(5,9,18,.62) 30%,rgba(5,9,18,.5) 44%,rgba(5,9,18,.16) 58%,rgba(5,9,18,.2) 84%,rgba(5,9,18,.66) 100%)}
}