/* Arcos, arcos.cloud: the base every page loads first. Tokens, type, layout and buttons.
   Page chrome (header, nav, drawer, footer) and the sub-page shell are in shell.css;
   the homepage sections are in site.css, which only the homepage loads. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter.woff2) format("woff2")}

:root{
  color-scheme:light;
  --blue:#1358E0;--blue-hot:#0C48D8;--blue-deep:#0B3FA8;--blue-lit:#6CB2FC;--blue-glow:rgba(19,88,224,.5);
  --ink:#0F1216;--ink-2:#161A20;--ink-3:#212730;--ink-4:#2C333E;
  --bone:#F5F4F1;--bone-2:#E9E7E2;--bone-3:#DEDAD2;
  --grey:#5C6068;--grey-2:#A2A7B0;
  --line:rgba(15,18,22,.12);--line-d:rgba(255,255,255,.12);
  --nav-h:84px;--sec:clamp(4.5rem,8vw,7rem);--shell:1240px;--pad:clamp(1.15rem,3.6vw,2.75rem);--r:18px;--r-lg:26px;
  --ease:cubic-bezier(.22,.68,.24,1);--out:cubic-bezier(.16,1,.3,1);
  --sh:0 2px 6px rgba(15,18,22,.05),0 12px 34px -12px rgba(15,18,22,.18);
  --sh-lg:0 6px 14px rgba(15,18,22,.08),0 36px 74px -22px rgba(15,18,22,.34);
}
@media (max-width:640px){:root{--nav-h:72px}}

*,*::before,*::after{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bone);color:var(--ink);overflow-x:clip;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .22vw,1.12rem);line-height:1.58;letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video,svg{max-width:100%;display:block}
p{margin:0}ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4{margin:0;font-family:"Archivo","Inter",sans-serif;font-weight:800;font-stretch:108%;letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(2.3rem,5vw,4.2rem);letter-spacing:-.048em}
h2{font-size:clamp(1.75rem,2.8vw,2.5rem);letter-spacing:-.042em}
h3{font-size:clamp(1.18rem,1.6vw,1.5rem);letter-spacing:-.03em;line-height:1.16}
h4{font-size:clamp(1.02rem,1.2vw,1.16rem);letter-spacing:-.024em;line-height:1.24}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:6px;box-shadow:0 0 0 6px var(--blue)}
.screen--bone2 :focus-visible,.screen--close :focus-visible,.legalpage :focus-visible,.dpanel :focus-visible{outline-color:var(--ink)}
.skip{position:fixed;left:-9999px;top:0;z-index:999;background:var(--blue);color:#fff;padding:1rem 1.5rem;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- layout ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.shell-mid{max-width:960px}
main section[id],main [id]{scroll-margin-top:calc(var(--nav-h) + .5rem)}
#main:focus{outline:none}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:600;font-size:1rem;
  letter-spacing:-.012em;padding:.95rem 1.75rem;border-radius:999px;border:2px solid transparent;min-height:54px;overflow:hidden;isolation:isolate;
  transition:transform .36s var(--out),box-shadow .36s var(--out),background-color .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease)}
.btn .lbl{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.55rem}
/* "See if it fits your business" can wrap in a narrow card: two centered, balanced lines, never a ragged left edge */
.btn .lbl{text-align:center;text-wrap:balance}
.btn .lbl:not(:has(svg)){gap:0}
/* a telephone number and an email address never break mid-value; ordinary button
   labels must still be free to wrap, or a long one is clipped on a small phone */
.btn[href^="tel:"] .lbl,.btn[href^="mailto:"] .lbl{white-space:nowrap}
/* the price belongs on the button where it fits on one line; below that it wraps
   and leaves the arrow stranded beside a two-line label, and the card two screens
   down carries the number anyway */
@media (max-width:400px){.btn .lbl .wide{display:none}}
/* a full-width card button has 56px of side padding it does not need on a 320px
   phone, and without it "Talk through the numbers" wrapped away from its icon */
@media (max-width:400px){.plan-body .actions .btn{padding-inline:1rem;font-size:.95rem}}
.btn svg{flex:none;transition:transform .36s var(--out)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:hover svg.ar{transform:translateX(4px)}
.btn-ink{background:var(--ink);color:var(--bone);box-shadow:var(--sh)}
.btn-ink:hover{background:#000;box-shadow:var(--sh-lg)}
.btn-ghost{border-color:var(--line);color:var(--ink);background-color:rgba(255,255,255,.55);
  background-image:linear-gradient(180deg,rgba(255,255,255,.2),rgba(179,179,179,.2))}
.btn-ghost:hover{border-color:var(--ink);background-color:#fff;background-image:none}
.screen--ink .btn-ghost,.screen--ink2 .btn-ghost,.hero .btn-ghost,.drawer .btn-ghost{border-color:rgba(255,255,255,.34);color:#fff;background-color:rgba(255,255,255,.07);background-image:none}
.screen--ink .btn-ghost:hover,.screen--ink2 .btn-ghost:hover,.hero .btn-ghost:hover,.drawer .btn-ghost:hover{border-color:#fff;background-color:rgba(255,255,255,.16)}
.btn-lg{font-size:1.06rem;padding:1.05rem 2.2rem;min-height:62px}
.btn-full{width:100%}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
.actions.center{justify-content:center}
@media (max-width:560px){.actions .btn{width:100%}}

/* ---------- motion and glass, the critical part (pages/README.md, "Motion"): the first screen's glass; the rest is late (motion.css) ---------- */
:root{
  --spring-pop:cubic-bezier(.34,1.56,.64,1);--spring-soft:cubic-bezier(.2,.9,.25,1.02);--spring-gel:cubic-bezier(.3,1.8,.5,1);
  --ease-out:cubic-bezier(.05,.7,.1,1);--ease-in:cubic-bezier(.5,0,.9,.4);--t-tap:120ms}

/* .btn-blue is gel; a milk button (on blue) is plain white until its glass arrives */
.btn-blue{border-color:transparent;transition:transform .62s var(--spring-gel),translate .7s var(--spring-soft),box-shadow .36s var(--ease-out),background-color .28s var(--ease)}
.btn-blue:hover{transform:none}
.btn-blue:active{transform:scale(.965);transition-duration:var(--t-tap)}
.btn-blue{color:#fff;background:linear-gradient(180deg,#3F7CFA 0%,#1F63EE 42%,#1358E0 70%,#1150D6 100%) #1358E0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.66),inset 0 -1.5px 0 rgba(170,206,255,.42),inset 0 -8px 14px -8px rgba(3,18,70,.4),inset 0 0 0 1px rgba(255,255,255,.14),
    0 2px 4px rgba(4,14,44,.35),0 14px 34px -12px rgba(19,88,224,.95)}
.btn-blue:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1.5px 0 rgba(170,206,255,.5),inset 0 -8px 14px -8px rgba(3,18,70,.4),inset 0 0 0 1px rgba(255,255,255,.18),
    0 3px 6px rgba(4,14,44,.35),0 22px 44px -12px rgba(19,88,224,1)}
.btn-blue::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:radial-gradient(130% 95% at 50% -35%,rgba(255,255,255,.32),rgba(255,255,255,.08) 48%,rgba(255,255,255,0) 64%),
    radial-gradient(36% 110% at 10% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 72%)}
.btn-milk,.pg-end .btn-blue,.pg--pricing #foundation .btn-blue{color:var(--ink);background:#fff}
.btn .lbl{z-index:3}

/* glass surfaces. Never opacity, filter, mask or blend on an ANCESTOR of one */
.g-dark,.g-milk,.g-sapphire,.pg-hero-copy,.pg-hero .pg-figure,.pg-end,.pg--pricing .plan{position:relative;isolation:isolate}
.g-dark,.pg-hero-copy,.pg-hero .pg-figure{border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.028) 45%,rgba(255,255,255,.05)),rgba(15,18,22,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 0 1px rgba(255,255,255,.08),
    0 1px 1px rgba(0,0,0,.3),0 30px 60px -32px rgba(0,0,0,.8);transition:box-shadow .9s var(--ease)}
/* a sub-page's headline pane gets its blur late, with the water (motion.css) */
.g-dark{-webkit-backdrop-filter:blur(16px) saturate(170%) brightness(1.05);backdrop-filter:blur(16px) saturate(170%) brightness(1.05)}
/* lit */
.g-dark.is-on,html:not(.js) .g-dark,.pg-hero-copy,.pg-hero .pg-figure{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(132,186,255,.22),
  0 1px 1px rgba(0,0,0,.3),0 30px 60px -32px rgba(0,0,0,.8),0 0 0 1px rgba(61,123,255,.18),0 24px 70px -30px rgba(19,88,224,.55)}
/* sapphire: solid blue here, its light and depth late; milk glass (.g-milk) is all late */
.g-sapphire,.pg-end,.pg--pricing #foundation{color:#fff;overflow:clip;background:#1358E0}
.g-sapphire > :not(canvas):not(.g-rim),.pg-end > :not(canvas):not(.g-rim),.pg--pricing #foundation > :not(canvas):not(.g-rim){position:relative;z-index:2}

/* the water's boxes, sized here so nothing moves */
.fluid-wrap{position:absolute;inset:0;z-index:-1;overflow:clip;pointer-events:none}
.fluid{position:sticky;top:0;display:block;width:100%;height:100vh;height:100svh;opacity:0;transition:opacity 1.6s var(--ease)}
.caustic{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.8s var(--ease)}
.fluid.on,.caustic.on{opacity:1}
@media (prefers-reduced-motion:reduce){.fluid,.caustic{transition:none}}

/* the founder's photo (a real camera still, 2026-09-29): liquid glass around it, one gloss
   sweep when it arrives (motion.css adds .shine on reveal), the caption under it */
.portrait-glass{position:relative;border-radius:28px;padding:6px;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.35));
  box-shadow:inset 0 1.5px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),0 1px 2px rgba(15,18,22,.08),0 34px 70px -30px rgba(3,18,70,.5)}
.portrait-glass picture,.portrait-img{display:block}
.portrait-img{width:100%;height:auto;border-radius:22px;border:0}
.portrait-glass::after{content:"";position:absolute;inset:6px;border-radius:22px;pointer-events:none;
  background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%) 130% 0/260% 100% no-repeat}
.shine .portrait-glass::after,.portrait-glass.shine::after{animation:portrait-sheen 1.6s .35s var(--ease) both}
@keyframes portrait-sheen{to{background-position:-40% 0}}
.pg-hero .portrait-glass{background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.07));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.16),0 44px 90px -34px rgba(0,0,0,.75)}
@media (prefers-reduced-motion:reduce){.portrait-glass::after{animation:none!important}}

/* an app icon: a small white squircle like a home-screen icon (pricing rows, lists) */
.pic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;color:var(--blue);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(15,18,22,.06),0 1px 2px rgba(15,18,22,.1),0 6px 14px -8px rgba(3,18,70,.4)}
.pic svg{width:19px;height:19px}