/* photos: --look cool (their site has no photographs; the mark and the instruments carry the page) */
/* mood: tech/spec-sheet — the reference's structure: stripe.com */
@import url(/assets/fonts/fonts.css);

:root{
  --bg:#ffffff; --alt:#f5f8fc; --surface:#ffffff;
  --ink:#111a2e; --head:#0d1f45; --mute:#41557b; --blue-ink:#0a4f94;
  --line:#e2e8f1; --line-2:#d3dce9;
  --hover-bg:#eef3fa; --hdr-bg:#ffffff;
  --accent:#0a5299; --accent-hover:#083f78; --blue:#0a63b7; --accent-ink:#ffffff; --focus:#2f86d8;
  --wing:#238ed6; --cyan:#5cc8ee; --tick:#6b8fb8; --cell:#e6edf6;
  --dark:#0d1f45; --dark-2:#132a5a; --dark-ink:#f4f7fc; --dark-mute:#a9bbd9; --dark-line:rgba(244,247,252,.14);
  --hero-shade:#0d1f45;
  --font-display:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:var(--font-display);
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:4px; --radius:4px; --r-lg:6px;
  --e1:0 1px 1px rgba(13,31,69,.04),0 6px 20px -10px rgba(13,31,69,.16);
  --e2:0 2px 4px rgba(13,31,69,.05),0 18px 40px -18px rgba(13,31,69,.28);
  --shadow:var(--e2);
  --ease:cubic-bezier(.33,1,.68,1);
  --wrap:1232px; --gut:clamp(20px,4vw,48px); --hdr:72px; --text:17px; --logo-w:168px;
  --h2:clamp(28px,2.6vw,36px); --sec-pad:clamp(56px,5.6vw,80px);
}

html{scroll-padding-top:calc(var(--hdr) + 12px)}
body{font-feature-settings:"ss01" 0;letter-spacing:-.003em}
::selection{background:#cfe3f8;color:var(--head)}
h1,h2,h3{color:var(--head);letter-spacing:-.02em;font-weight:500;font-kerning:normal;font-optical-sizing:auto}
.num{font-variant-numeric:lining-nums tabular-nums}

/* header */
.hdr{border-bottom-color:transparent;transition:transform .32s var(--ease),border-color .18s}
.hdr.solid{border-bottom-color:var(--line)}
.brand img{width:var(--logo-w)}
.nav a,.dd>button,.pm>summary{font-size:15px;font-weight:500;color:var(--ink)}
.nav a[aria-current="page"]{color:var(--blue-ink);font-weight:500}
.nav a:active{background:var(--line)}
.menu-btn{color:var(--head)}

/* buttons: one primary, one outlined, four states */
.btn{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.005em;background:var(--accent);color:var(--accent-ink);transition:background-color .18s var(--ease),color .18s,border-color .18s,box-shadow .18s var(--ease),transform .18s var(--ease)}
.btn:focus-visible,.card .x:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:translateY(1px)}
.btn svg{width:14px;height:14px;transition:transform .18s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn.line{background:#fff;color:var(--blue-ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.line:hover{box-shadow:inset 0 0 0 1px var(--accent);background:#fff}
.hdr-cta{min-height:40px}

/* Stripe's hairline guides on the light grounds, 1px outside each content edge so text never sits on one */
.g{background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));background-size:1px 100%;background-repeat:no-repeat;background-position:calc(50% - 568.5px) 0,calc(50% + 568.5px) 0}
@media (max-width:1240px){.g{background-image:none}}

/* hero: white, the stat line, a two-tone sentence, their ring-and-circuit mark off the right edge */
.hero{background:var(--bg);color:var(--ink);min-height:clamp(540px,calc(100svh - var(--hdr) - 96px),660px)}
.hero .copy{padding-block:clamp(48px,7vh,80px);max-width:var(--wrap)}
.hero .live{display:flex;align-items:baseline;gap:8px;font-size:16px;font-weight:600;color:var(--head)}
.hero .live b{font-weight:600;color:var(--blue-ink);font-variant-numeric:lining-nums tabular-nums}
.hero h1{margin-top:22px;max-width:15.5em;font-size:clamp(34px,3.4vw,50px);font-weight:500;line-height:1.1;letter-spacing:-.025em;color:var(--head);text-shadow:none}
.hero h1 .t1{color:var(--head)}
.hero h1 .t2{color:var(--blue-ink)}
.hero .lede{margin-top:20px;max-width:min(46ch,50vw);color:var(--mute);font-size:clamp(17px,1.35vw,20px);line-height:1.5}
.hero .acts{margin-top:36px;justify-content:flex-start}
.hero-bg{pointer-events:none}
.mark{position:absolute;top:50%;right:max(-12vw,-180px);width:min(56vw,820px);height:auto;max-width:none;translate:0 -50%}
.mark .trk{fill:none;stroke:var(--line-2);stroke-width:1.5}
.mark .tk{stroke:var(--tick);stroke-width:2}
.mark .tk.big{stroke:var(--head);stroke-width:3}
.mark .arc{fill:none;stroke:var(--blue);stroke-width:12;stroke-linecap:round}
.mark .lit{fill:none;stroke:var(--cyan);stroke-width:12;stroke-linecap:round}
.mark .in{fill:none;stroke:var(--wing);stroke-width:2}
.mark .tr{fill:none;stroke:var(--blue);stroke-width:6;stroke-linejoin:round;stroke-linecap:round}
.mark .nd{fill:#fff;stroke:var(--blue);stroke-width:6}
.mark .eye{fill:#fff;stroke:var(--head);stroke-width:4}
.mark .pupil{fill:var(--blue)}
.js-motion .mark .dr{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s var(--ease) .15s forwards}
.js-motion .mark .d2{animation-delay:.25s}.js-motion .mark .d3{animation-delay:.5s}.js-motion .mark .d4{animation-delay:.75s}
.js-motion .mark .pop{opacity:0;animation:pop .6s var(--ease) 1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}

/* partner strip under the hero, between hairlines */
.strip{border-block:1px solid var(--line)}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;padding-block:28px}
.phero+.strip{border-top:0}
.strip .sec-label{margin-bottom:8px}
.strip p:not(.sec-label){color:var(--mute);font-size:16px;line-height:1.45}
.strip .logos{flex:none;display:flex;align-items:center;gap:56px}
.strip img{height:auto}

/* section heads: Stripe's two-tone lead, left */
.sec-head>h2,.sec-head>.lead2{text-wrap:balance}
.lead2{font-size:var(--h2);line-height:1.18;letter-spacing:-.02em;font-weight:500;max-width:30ch}
.lead2 .t2,p.lead2.t2{color:var(--mute)}
.sec-head p.lead2{margin:0;font-size:var(--h2);font-family:var(--font-display)}
.sec-head .lead2{max-width:46ch}

/* services: Stripe's bento, 2/3 + 1/3 then 1/3 + 2/3 */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{position:relative;display:flex;flex-direction:column;padding:28px 28px 30px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e1);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.card:hover{border-color:var(--tick);box-shadow:var(--e2)}
.card.wide{grid-column:span 2}
.card h3{padding-right:64px;font-size:clamp(22px,1.9vw,26px);line-height:1.2}
.card .sub{margin-top:8px;color:var(--mute);font-size:17px;line-height:1.45;max-width:36ch}
.card .x{position:absolute;top:24px;right:28px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--r-sm);background:var(--hover-bg);color:var(--blue-ink);cursor:pointer;transition:background-color .18s,color .18s}
.card .x:hover{background:var(--accent);color:#fff}
.card .x:active{transform:translateY(1px)}
.card .x svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.card .x[aria-expanded=true] svg{transform:rotate(45deg)}
.card .body{display:grid;gap:24px;margin-top:24px;flex:1}
.card.wide .body{grid-template-rows:1fr auto}
.card.wide .inst{grid-template-columns:300px minmax(0,1fr);align-items:center;column-gap:40px}
.card.wide .inst .fact{font-size:19px;max-width:22ch}
.card.wide .inc ul{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.inc h4{margin:0 0 12px;font-size:16px;font-weight:500;color:var(--mute);letter-spacing:0}
.inc li{position:relative;padding:9px 0 9px 22px;border-top:1px solid var(--line);font-size:16px;line-height:1.4;color:var(--ink)}
.inc li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:10px;border:2px solid var(--accent);border-radius:50%;background:#fff}

/* the instruments: a quiet screen inside the card, drawn from their own facts */
.inst{display:grid;align-content:space-between;gap:18px;padding:0 20px 22px;background:var(--alt);border:1px solid var(--line);border-radius:var(--r-sm)}
.inst svg{width:100%;height:auto}
.inst .fact{font-size:16px;font-weight:600;line-height:1.35;color:var(--head)}
.inst .fact+.fact{margin-top:6px;font-weight:500;color:var(--mute)}
.dial .trk{fill:none;stroke:var(--cell);stroke-width:14}
.dial .val{fill:none;stroke:var(--blue);stroke-width:14;stroke-dasharray:1;stroke-dashoffset:.17;transition:stroke-dashoffset 1.4s var(--ease)}
.dial .tk{fill:none;stroke:var(--tick);stroke-width:2}
.dial .tk.end{stroke:var(--head);stroke-width:3}
.dial .hub{fill:#fff;stroke:var(--head);stroke-width:3}
.dial .ndl{stroke:var(--head);stroke-width:3;stroke-linecap:round;transition:opacity .4s var(--ease) 1.1s}
.js-motion .inst:not(.on) .dial .val{stroke-dashoffset:1}
.js-motion .inst:not(.on) .dial .ndl{opacity:0}
.lay{position:relative}
.lay .lit{position:absolute;inset:0;clip-path:inset(0 0 0 0);transition:clip-path 1.8s cubic-bezier(.45,0,.55,1)}
.js-motion .inst:not(.on) .lay .lit{clip-path:inset(0 100% 0 0)}
.grid24 .onc{fill:var(--blue)}
.grid24 .scan{display:none}
.grid24 .off{fill:#cfdff0}
.lay .lit{width:100%;height:100%}
.js-motion .inst.on .lay .grid24.lit{transition:none;animation:sweep 6.4s linear infinite}
@keyframes sweep{0%{clip-path:inset(0 100% 0 0)}18%{clip-path:inset(0 72% 0 0)}82%{clip-path:inset(0 0 0 72%)}100%{clip-path:inset(0 0 0 100%)}}
.grid24 .ax{fill:none;stroke:var(--head);stroke-width:2}
.snap .day{fill:none;stroke:var(--head);stroke-width:2}
.snap .t{fill:none;stroke:var(--tick);stroke-width:3}
.snap .n{fill:#fff;stroke:var(--blue);stroke-width:2}
.layers circle{fill:none;stroke-width:10}
.layers .l1{stroke:var(--head)}.layers .l2{stroke:var(--accent)}.layers .l3{stroke:var(--wing)}.layers .l4{stroke:var(--tick)}
.layers .core{fill:#fff;stroke:var(--head);stroke-width:3}
.layers .core-in{fill:var(--accent);stroke:none}
.layers .ring{stroke-dasharray:1;stroke-dashoffset:0}
.js-motion .layers .ring{stroke-dashoffset:1}
.js-motion .inst.on .layers .ring{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease);transition-delay:calc(var(--i) * 140ms)}

/* navy proof bands */
.night{position:relative;background:var(--dark);color:var(--dark-ink);overflow:hidden}
.night h2,.night h3{color:var(--dark-ink)}
.night .lead2 .t2{color:var(--dark-mute)}
.sec-head .lead2.wide2{max-width:none}
.night .sec-head p{color:var(--dark-mute)}
.figs{display:grid;grid-template-columns:1fr 1fr 1.6fr 1fr;gap:32px 40px;margin-top:clamp(48px,6vw,80px);padding-top:36px;border-top:1px solid var(--dark-line)}
.figs b{display:block;font-family:var(--font-display);font-size:clamp(40px,4.2vw,60px);font-weight:500;line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:lining-nums proportional-nums}
.figs li{display:flex;flex-direction:column;justify-content:flex-end}
.figs li:nth-child(3) b{font-size:clamp(30px,3.1vw,46px);white-space:nowrap}
.figs span{display:block;margin-top:14px;color:var(--dark-mute);font-size:16px}
.figs .lit-n{color:var(--cyan)}


/* reasons: Stripe's three columns */
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.cols3>div{padding-top:28px;border-top:1px solid var(--line)}
.cols3 h3{font-size:20px;font-weight:600}
.cols3 p{margin-top:10px;color:var(--mute);font-size:17px;line-height:1.55}

/* process: the tiles become a static path joined by their circuit trace */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.steps::before{content:"";position:absolute;left:10px;right:0;top:9px;height:2px;background:var(--blue);transform-origin:left;transition:transform 1.4s var(--ease)}
.steps::after{content:"";position:absolute;left:9px;right:0;top:22px;height:8px;background:linear-gradient(90deg,var(--tick) 1.5px,transparent 0) 0 0/24px 100% repeat-x}
.js-motion .steps:not(.on)::before{transform:scaleX(0)}
.steps li{position:relative;padding-top:52px}
.steps li::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border:3px solid var(--blue);border-radius:50%;background:#fff;box-sizing:border-box;transition:border-color .3s var(--ease) .3s}
.steps li:nth-child(2)::before{transition-delay:.6s}
.steps li:nth-child(3)::before{transition-delay:.9s}
.steps li:nth-child(4)::before{transition-delay:1.2s;border-color:var(--head);background:radial-gradient(circle,var(--blue) 0 4px,#fff 4.5px)}
.js-motion .steps:not(.on) li::before{border-color:var(--cell)}
.steps .n{color:var(--blue-ink);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.steps h3{margin-top:6px;font-size:22px}
.steps p{margin-top:10px;color:var(--mute);font-size:17px;line-height:1.55}

/* about, on navy: Stripe's long developer band */
.about-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);margin-top:clamp(40px,5vw,64px);padding-top:40px;border-top:1px solid var(--dark-line)}
.about-top h3{font-size:24px}
.about-top .story p{margin-top:16px;font-size:18px;line-height:1.6}
.vals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:clamp(48px,5vw,72px);padding-top:32px;border-top:1px solid var(--dark-line)}
.vals h3{font-size:20px;font-weight:600}
.vals p{margin-top:8px;font-size:17px;line-height:1.6}

/* closing ask on the pale ground: the heads' 7/5 split, its hours a ledger as tall as the ask */
.ask{background:var(--alt)}
.ask .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}
.ask .sec-head{max-width:none;margin:0}
.ask h2{font-size:var(--h2);line-height:1.18}
.ask .lead{margin-top:14px;max-width:none;color:var(--mute);font-size:19px;line-height:1.5;text-wrap:balance}
.ask .acts{justify-content:flex-start;margin-top:28px}
.ask .info{display:grid}
.ask .info>div{display:grid;grid-template-rows:auto 1fr 1fr;border-bottom:1px solid var(--line)}
.ask h3,.inc h3{padding:13px 0 12px;border-top:1px solid var(--head);font-family:var(--font-mono);font-size:14px;font-weight:500;line-height:1.6;letter-spacing:0;color:var(--mute)}
.ask .info p,.ask .inc li{position:relative;display:flex;align-items:center;padding:12px 0 12px 22px;border-top:1px solid var(--line);font-size:16px;line-height:1.4;color:var(--ink)}
.ask .info p::before,.ask .inc li::before{content:"";position:absolute;left:0;top:calc(50% - 5px);width:10px;height:10px;border:2px solid var(--accent);border-radius:50%}

/* footer on Stripe's pale ground */
.foot{background:var(--alt);color:var(--mute);border-top:1px solid var(--line);font-size:16px}
.foot-col ul{gap:0}.foot-col li{display:flex;align-items:center;min-height:44px}
.foot a{color:var(--head)}
.foot .brand img{width:180px}
.foot-h{color:var(--head)}
.foot .foot-base{border-top-color:var(--line);gap:6px 24px;padding-block:20px 28px;font-size:14px;line-height:1.5;text-wrap:balance}
.foot-base>:last-child{flex-basis:100%;font-family:var(--font-body)}
.callbar a{font-size:16px;letter-spacing:-.005em;transition:background-color .18s var(--ease)}
.callbar a:active{background:var(--dark-2)}.callbar a:first-child:active{background:var(--accent-hover)}
.foot-map iframe{background:var(--line)}
.foot-col a{min-width:44px}
.foot-spec{margin-top:6px;color:var(--blue-ink);font-weight:600}

/* links from a home section to its page */
.more-link{margin-top:clamp(28px,3vw,40px)}
.more-link a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--blue-ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line-2);transition:border-color .18s var(--ease),color .18s}
.more-link a svg{width:14px;height:14px;transition:transform .18s var(--ease)}
.more-link a:hover{border-bottom-color:currentColor}.more-link a:hover svg{transform:translateX(3px)}
.more-link a:active{color:var(--accent-hover)}
.night .more-link a{color:var(--cyan);border-bottom-color:var(--dark-line)}

/* inner pages: the page title on white, their mark off the right edge, as the home hero */
.phero{background:var(--bg);color:var(--ink);min-height:clamp(440px,58svh,580px);border-bottom:1px solid var(--line)}
.phero .copy{padding-block:clamp(56px,8vh,88px);max-width:var(--wrap)}
.phero .live{display:flex;align-items:baseline;gap:8px;font-size:16px;font-weight:600;color:var(--head)}
.phero h1{margin-top:20px;max-width:17em;font-size:clamp(34px,3.6vw,52px);font-weight:500;line-height:1.1;letter-spacing:-.025em;color:var(--head);text-shadow:none}
.phero h1 .t2{color:var(--blue-ink)}
.phero .lede{margin-top:20px;max-width:min(52ch,56vw);color:var(--mute);font-size:clamp(17px,1.35vw,20px);line-height:1.5}
.phero .acts{margin-top:32px;justify-content:flex-start}
/* the 4% puts the outer tick, not the drawing's empty margin, on the content edge */
.phero .mark{top:50%;right:max(var(--gut),calc((100vw - 1136px)/2));width:min(30vw,420px);translate:4% -50%}

/* the process on navy */
.night .steps h3{color:var(--dark-ink)}
.night .steps p{color:rgba(244,247,252,.82)}
.night .steps .n{color:var(--cyan)}
.night .steps::before{background:var(--cyan)}
.night .steps li::before{border-color:var(--cyan);background:var(--dark)}
.night .steps li:nth-child(4)::before{border-color:var(--dark-ink);background:radial-gradient(circle,var(--cyan) 0 4px,var(--dark) 4.5px)}
.night p.lead2.t2{color:var(--dark-mute)}

/* every section head: label, then the heading at full width; a description splits 7fr/5fr beside it */
.sec-label{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--font-mono);font-size:16px;font-weight:500;line-height:1.3;letter-spacing:0;color:var(--blue-ink)}
.sec-label::before{content:"";flex:none;width:8px;height:8px;border:2px solid currentColor;border-radius:50%}
.night .sec-label{color:var(--cyan)}
.sec-head .sec-label{max-width:none;margin:0 0 16px;font-size:16px;color:var(--blue-ink);text-align:left}
.sec-head .sec-label:last-child{margin-bottom:0}
.night .sec-head .sec-label{color:var(--cyan)}
.sec:not(.ask):has(.sec-head){padding-top:0}
.sec:not(.ask) .sec-head{max-width:none;margin-bottom:clamp(36px,4vw,56px);padding-top:var(--sec-pad)}
/* the hairline runs between the registration marks; under a full-bleed one it would double up */
.g .sec-head{border-top:1px solid var(--line)}
.strip+.g .sec-head,.phero+.g .sec-head{border-top:0}
.sec:not(.ask) .sec-head>.lead2~p{margin:12px 0 0;max-width:none;font-family:var(--font-body);font-size:clamp(17px,1.3vw,19px);line-height:1.55;letter-spacing:-.003em}
@media (min-width:861px){
  .sec:not(.ask) .sec-head:has(>.lead2~p){display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px;align-items:first baseline}
  .sec-head>.sec-label{grid-column:1/-1}
  .sec:not(.ask) .sec-head>.lead2~p{margin-top:0}
  /* two paragraphs would stack into a tall column beside one heading line: run them side by side under it */
  .sec:not(.ask) .sec-head:has(>.lead2~p~p){grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-head:has(>.lead2~p~p)>.lead2{grid-column:1/-1;margin-bottom:16px}
}
/* registration marks where the column guides meet each section edge */
.g{position:relative}
.g::after{content:"";position:absolute;top:-5px;left:calc(50% - 574px);width:1148px;height:11px;pointer-events:none;
  background:linear-gradient(var(--tick),var(--tick)) 5px 0/1px 11px no-repeat,linear-gradient(var(--tick),var(--tick)) 0 5px/11px 1px no-repeat,
  linear-gradient(var(--tick),var(--tick)) right 5px top 0/1px 11px no-repeat,linear-gradient(var(--tick),var(--tick)) right 0 top 5px/11px 1px no-repeat}
.hero.g::after,.phero.g::after{display:none}
/* these sit under a full-bleed hairline: put the marks on it */
.strip::after,.strip+.g::after,.phero+.g::after{top:-6px}
@media (max-width:1240px){.g::after{display:none}}
.tint{background-color:var(--alt)}
/* instrument console bar: the platform each instrument runs on */
.inst-bar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -20px;padding:12px 20px;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:14px;font-weight:500;color:var(--mute)}
.inst-bar::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue)}
.inst .fact{letter-spacing:-.005em}
/* figures carry a meter drawn from the figure itself */
.figs .meter{display:block;height:6px;margin-top:18px;background:var(--dark-line);position:relative;overflow:hidden}
.figs .meter::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--v,1));transition:transform 1.4s var(--ease);background:var(--fill,var(--dark-ink))}
.figs .meter.up{--v:.999;--fill:var(--cyan)}
.figs .meter.h24::after{background:linear-gradient(90deg,var(--dark-ink) calc(100% - 2px),transparent 0) 0 0/calc(100%/24) 100% repeat-x}
.figs .meter.two::after{background:linear-gradient(90deg,var(--dark-ink) 0 calc(50% - 2px),transparent calc(50% - 2px) calc(50% + 2px),var(--dark-ink) calc(50% + 2px))}
.figs .meter.n50::after{background:linear-gradient(90deg,var(--dark-ink) 2px,transparent 0) 0 0/calc(100%/50) 100% repeat-x}
.js-motion .figs:not(.on) .meter::after{transform:scaleX(0)}
.figs span{font-family:var(--font-mono);font-size:16px;letter-spacing:0}
/* mono for every small technical figure */
.hero .live,.phero .live{align-items:center;font-family:var(--font-mono);font-size:16px;font-weight:500;color:var(--blue-ink)}
.hero .live::before,.phero .live::before{content:"";flex:none;width:8px;height:8px;border:2px solid currentColor;border-radius:50%}
.steps .n,.foot-base{font-family:var(--font-mono)}
.inc h4{font-family:var(--font-mono);font-size:14px}
.foot-h{font-family:var(--font-mono);font-size:14px;font-weight:500;color:var(--mute)}
/* the hero ring: one cyan sweep orbits it, slowly, as their monitoring never stops */
.mark .sweep{fill:none;stroke:var(--cyan);stroke-width:12;stroke-linecap:round;stroke-dasharray:.14 .86;animation:sweep-ring 28s linear infinite}
@keyframes sweep-ring{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.js-motion .mark .sweep{opacity:0;animation:sweep-ring 28s linear infinite,pop .8s var(--ease) 1.2s forwards}

/* open service blocks instead of boxes in boxes */
#servicios .card{background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:28px 0 0}
#servicios .card:hover{box-shadow:none;border-top-color:var(--tick)}
#servicios .svc{gap:48px 40px}
.card .x{background:transparent;border:1px solid var(--line);width:36px;height:36px}
.card .x:hover{background:var(--hover-bg);color:var(--blue-ink)}
.card h3{padding-right:52px}
#servicios .card .x{top:22px;right:0}
.card.wide .sub{max-width:58ch}
.figs{grid-template-columns:repeat(4,minmax(0,1fr))}
.figs li:nth-child(3) b{font-size:clamp(28px,2.6vw,38px);white-space:normal;line-height:1.05}
/* the column holding the email never gets narrower than it */
@media (min-width:1081px){.foot-grid{grid-template-columns:1fr minmax(max-content,1fr) 1fr 1fr;column-gap:48px}}

/* Plataforma: the family tiles, the panel under the header, its accordion in the phone sheet */
[data-f=bcdr]{--t:#0a5299}[data-f=rmm]{--t:#0a63b7}[data-f=cyber]{--t:#0d1f45}[data-f=cloud]{--t:#1f7fc4}[data-f=gestion]{--t:#41557b}
.tile{flex:none;display:grid;place-items:center;width:32px;height:32px;overflow:hidden;border-radius:var(--r-lg);background:var(--t);color:#fff}
.tile svg{width:20px;height:20px}
.pm>summary{position:relative;list-style:none}
.pm>summary::-webkit-details-marker,.pm-m>summary::-webkit-details-marker{display:none}
.pm>summary:hover,.pm[open]>summary{background:var(--hover-bg)}
.pm>summary:active{background:var(--line)}
.pm:has([aria-current="page"])>summary{color:var(--blue-ink)}
.pm>summary svg{width:12px;height:12px;transition:transform .18s var(--ease)}
.pm[open]>summary svg{transform:rotate(180deg)}
/* carries the pointer across the gap between Plataforma and the panel */
.pm[open]>summary::after{content:"";position:absolute;inset:100% 0 auto;height:14px}
.pm-panel{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - var(--hdr));overflow:auto;background:var(--surface);border-block:1px solid var(--line);box-shadow:var(--e2)}
.pm[open] .pm-panel{animation:pm-in .16s var(--ease)}
@keyframes pm-in{from{opacity:0;transform:translateY(-6px)}}
/* subgrid starts every column's rows on one line, however long its promise runs */
.pm-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 24px;margin-inline:-10px;padding-block:32px}
.pm-col{display:grid;grid-row:span 2;grid-template-rows:subgrid}
.nav .pm-fam{display:block;padding:8px 10px;border-radius:var(--r-lg);white-space:normal}
.pm-fam b{display:block;color:var(--head);font-size:16px;font-weight:600;line-height:1.25}
.pm-fam small{display:block;margin-top:6px;color:var(--mute);font-size:14px;font-weight:400;line-height:1.4}
.pm-col ul{display:grid;align-content:start;gap:2px}
.nav .pm-col li a{display:flex;gap:12px;min-height:50px;padding:6px 10px;border-radius:var(--r-lg);line-height:1.25;white-space:normal}
.pm-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:12px;border-top:1px solid var(--line)}
.nav .pm-all{gap:10px;margin-left:-10px;border-radius:var(--r-lg);color:var(--blue-ink);font-weight:600}
.pm-all svg{width:14px;height:14px;transition:transform .18s var(--ease)}
.pm-all:hover svg{transform:translateX(3px)}
.pm-logos{display:flex;align-items:center;gap:28px}
.pm-m>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer}
.pm-m>summary::after{content:"";width:10px;height:10px;margin-right:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .18s var(--ease)}
.pm-m[open]>summary::after{transform:rotate(-135deg)}
.sheet nav a.sub{display:flex;align-items:center;min-height:44px}

/* phones and small tablets */
@media (max-width:1080px){
  .svc{grid-template-columns:1fr 1fr}
  .card.wide{grid-column:span 2}
  .vals{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .card.wide .inst{grid-template-columns:1fr}
  .strip .wrap{flex-direction:column;align-items:flex-start;gap:16px}
  .svc{grid-template-columns:1fr}
  .card.wide{grid-column:auto}
  .card.wide .body{grid-template-columns:1fr}
  .card.wide .inc ul{grid-template-columns:1fr}
  .figs{grid-template-columns:1fr 1fr;justify-content:stretch}
  .cols3{grid-template-columns:1fr;gap:28px}
  .steps{grid-template-columns:1fr;gap:28px}
  .steps::before{left:9px;right:auto;top:10px;bottom:0;width:2px;height:auto;transform-origin:top}
  .steps::after{left:22px;right:auto;top:10px;bottom:0;width:8px;height:auto;background:linear-gradient(180deg,var(--tick) 1.5px,transparent 0) 0 0/100% 24px repeat-y}
  .js-motion .steps:not(.on)::before{transform:scaleY(0)}
  .steps::before{left:10px}
  .steps li{padding:0 0 0 48px}
  .about-top,.ask .wrap{grid-template-columns:1fr}
}
@media (max-width:700px){
  .hero{min-height:0}
  .hero .lede,.phero .lede{max-width:none}
  /* mono breaks the tagline before a separator at this width */
  .foot-base{font-family:var(--font-body)}
  .phero{min-height:0}
  .phero .copy{padding-top:236px;padding-bottom:40px}
  .phero .mark{top:16px;right:16px;width:208px;translate:none}
  .phero h1{font-size:clamp(30px,8vw,36px);line-height:1.12}
  .hero .copy{padding-top:252px;padding-bottom:36px}
  .mark{top:0;right:-84px;width:264px;translate:none}
  .hero h1{font-size:clamp(30px,8.2vw,36px);line-height:1.12}
  .hero .acts .btn{flex:0 0 auto}
  .lead2.wide2{font-size:24px;line-height:1.25}
  .figs{gap:28px 24px}.figs li:first-child{grid-column:1/-1}.figs li:nth-child(3){order:1;grid-column:1/-1}.figs li:nth-child(3) b{white-space:nowrap;font-size:40px}.figs li{justify-content:flex-start}
  .card .inst{padding:16px}
  .card.wide .inst svg{max-width:280px;margin-inline:auto}
  .vals{grid-template-columns:1fr}
  .card{padding:22px 20px 24px}
  .card .x{top:16px;right:20px;width:44px;height:44px}
  .strip .logos{gap:40px}
  .strip .wrap{padding-block:24px}
  .foot-col[aria-label] ul{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
}
.nf{min-height:60vh;display:grid;align-content:center}.nf.phero{border-bottom:0}.nf .lead2{margin-left:-.03em;font-size:clamp(72px,10vw,140px);line-height:1;color:var(--head);letter-spacing:-.04em;font-variant-numeric:lining-nums proportional-nums}