/* ===================================================================== DataDad site — landing pages (index.html, uptime.html). Loads after ds.css. Product visuals are the product components; only the Analytics shot (home) and the monitor detail (uptime) sit in a browser frame. This file adds page layout, the hero ground, sections, forms, the footer, and the event journey. Hero ground: :root[data-hero=cobalt] (set on ). ===================================================================== */ :root{ --hero-bg:var(--page); --hero-ink:var(--text); --hero-ink2:var(--text2); --hero-line:color-mix(in srgb,var(--line) 75%,transparent); --hero-glow:radial-gradient(52% 58% at 76% 46%,color-mix(in srgb,var(--tile) 92%,transparent),transparent 72%); --hero-dad:var(--text); --hero-lens:var(--page); --hero-chip:var(--tile); --hero-chip-ink:var(--text2); --hero-chip-line:var(--line); --cta-bg:var(--accent); --cta-ink:var(--on-accent); --cta-hover:var(--accent-ink); --lp-max:1200px; --lp-gutter:32px; } :root[data-hero=cobalt]{ --hero-bg:linear-gradient(180deg,#18217a 0%,#1a2586 58%,#1d2a93 100%); --hero-ink:#ffffff; --hero-ink2:#c9d0fb; --hero-line:#ffffff0c; --hero-glow:radial-gradient(60% 70% at 78% 40%,#3f55e855,transparent 70%),radial-gradient(40% 50% at 8% 0%,#ffffff10,transparent 70%); --hero-dad:#ffffff; --hero-lens:#1b2580; --hero-chip:#ffffff14; --hero-chip-ink:#e6eaff; --hero-chip-line:#ffffff2e; --cta-bg:#ffffff; --cta-ink:#1b2580; --cta-hover:#e6eaff; } :root[data-hero=cobalt][data-theme=dark]{ --hero-bg:linear-gradient(180deg,#121a5c,#151f6c); --hero-lens:#141c5e; --cta-ink:#141c5e } @media (prefers-color-scheme:dark){ :root[data-hero=cobalt]:not([data-theme=light]){ --hero-bg:linear-gradient(180deg,#121a5c,#151f6c); --hero-lens:#141c5e; --cta-ink:#141c5e } } body.lp{background:var(--page);color:var(--text);font-size:15px;line-height:1.55;overflow-x:hidden} .wrap{max-width:var(--lp-max);margin:0 auto;padding-inline:var(--lp-gutter)} .skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--tile);color:var(--text);padding:8px 12px;border-radius:8px;border:1px solid var(--line)} .skip:focus{top:12px} /* ---------- header ---------- */ .site-head{display:flex;align-items:center;gap:28px;padding-block:18px} .site-head .brand{display:inline-flex;align-items:center;gap:9px;font-weight:650;font-size:17px;letter-spacing:-.015em;color:var(--hero-ink);text-decoration:none} .site-head .brand svg{width:32px;height:32px;color:var(--hero-dad)} .site-head .brand .dot{color:var(--hero-ink2)} :root:not([data-hero=cobalt]) .site-head .brand .dot{color:var(--accent)} .site-nav{display:flex;gap:4px;margin-left:auto} .site-nav a{color:var(--hero-ink2);font-size:14px;font-weight:500;padding:7px 11px;border-radius:9px;text-decoration:none;white-space:nowrap} .site-nav a:hover{color:var(--hero-ink);background:color-mix(in srgb,var(--hero-ink) 7%,transparent)} .site-nav a[aria-current=page]{color:var(--hero-ink)} .site-nav small{font-size:11px;font-weight:600;color:var(--hero-ink2);border:1px solid var(--hero-chip-line);border-radius:999px;padding:1px 7px;margin-left:6px} .head-cta{display:flex;gap:8px;align-items:center} .btn.login{background:transparent;border-color:var(--hero-chip-line);color:var(--hero-ink)} .btn.login:hover{border-color:var(--hero-ink2)} .btn.cta{background:var(--cta-bg);border-color:var(--cta-bg);color:var(--cta-ink);font-weight:600} .btn.cta:hover{background:var(--cta-hover);border-color:var(--cta-hover)} .btn.cta svg{color:currentColor} /* ---------- hero ---------- */ .hero-band{background:var(--hero-glow),var(--hero-bg);color:var(--hero-ink);position:relative;isolation:isolate} .hero-band::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--hero-line) 1px,transparent 1px),linear-gradient(90deg,var(--hero-line) 1px,transparent 1px);background-size:36px 36px;background-position:-1px -1px;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 100%);mask-image:linear-gradient(180deg,#000 40%,transparent 100%)} .hero{display:grid;grid-template-columns:minmax(0,10fr) minmax(0,14fr);gap:40px 56px;align-items:center;padding-block:24px 64px} .hero h1{font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);letter-spacing:-.022em;font-size:clamp(42px,4.7vw,68px);line-height:.98;text-wrap:balance;margin-bottom:22px} .hero .lead{font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--hero-ink2);max-width:34ch;margin-bottom:28px;text-wrap:pretty} .hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap} .hero-actions .btn.cta{padding:12px 20px;font-size:15px;border-radius:12px} .textlink{color:var(--hero-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:color-mix(in srgb,var(--hero-ink) 40%,transparent)} .textlink:hover{text-decoration-color:currentColor} .hero-foot{margin-top:36px;display:flex;gap:18px;flex-wrap:wrap;color:var(--hero-ink2);font-size:14px} .hero-foot span{display:inline-flex;align-items:center;gap:7px} .hero-foot svg{width:16px;height:16px} /* ---------- sections ---------- */ main.lpmain>section{padding-block:96px 0} .sec-head{display:grid;gap:14px;max-width:680px;margin-bottom:36px} .sec-head .dad{margin-bottom:4px} .sec-head h2,.split-copy h2{font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);letter-spacing:-.02em;font-size:clamp(32px,3.6vw,48px);line-height:1.04;text-wrap:balance} .sec-head p,.split-copy p{color:var(--text2);font-size:17px;line-height:1.55;max-width:56ch;text-wrap:pretty} .frame.shot{box-shadow:0 1px 2px #1b2b4a10,0 30px 60px -38px #1b2b4a59} .frame.shot .frame-body{padding:16px} .frame .bento{gap:14px} .feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px;margin-top:36px} .feats h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px} .feats p{color:var(--text2);font-size:14.5px} .duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 56px;align-items:center} .duo.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} .split-copy{display:grid;gap:14px;align-content:start} .outcome{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px;border:1px solid var(--line);border-radius:14px;background:var(--tile);overflow:hidden} .outcome>div{padding:14px 16px} .outcome>div+div{border-left:1px solid var(--line)} .outcome span{display:block;font-size:12.5px;color:var(--text2)} .outcome strong{display:block;font-size:28px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2} .outcome em{font-style:normal;font-size:13px;font-weight:600} .toggle{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14px;color:var(--text)} .toggle .sw{width:40px;height:24px;border-radius:999px;background:var(--line2);position:relative;transition:background .2s;flex:none} .toggle .sw::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s} .toggle[aria-pressed=true] .sw{background:var(--good)} .toggle[aria-pressed=true] .sw::after{transform:translateX(16px)} /* infrastructure diagram */ .pipe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:stretch;position:relative} .node{position:relative;background:var(--tile);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--e-tile);display:grid;gap:6px;align-content:start;margin-right:44px;z-index:1} .node:last-child{margin-right:0} .node b{font-size:14.5px;font-weight:600} .node span{font-size:13px;color:var(--text2)} .node .who{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px} .node .who i{font-style:normal;font-size:12px;border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--text2);background:var(--tile2)} .node .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent-ink);margin-bottom:4px} .node .ico svg{width:17px;height:17px} .link{position:absolute;top:50%;right:-44px;width:44px;height:2px;background:var(--line2);overflow:hidden} .link::after{content:"";position:absolute;top:-2px;left:-10px;width:6px;height:6px;border-radius:50%;background:var(--accent);animation:dd-packet 1.6s linear infinite} .node:nth-child(2) .link::after{animation-delay:.4s}.node:nth-child(3) .link::after{animation-delay:.8s} @keyframes dd-packet{to{left:48px}} .branch{margin-top:14px;display:flex;justify-content:flex-end} .branch .node{margin:0;max-width:calc(50% - 22px)} .branch .node::before{content:"";position:absolute;left:40px;top:-15px;width:2px;height:14px;background:var(--line2)} .infra-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;margin-top:36px} /* privacy */ .priv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px} .priv b{display:block;font-size:16px;font-weight:600;margin:10px 0 6px} .priv p{color:var(--text2);font-size:14.5px} .priv .mk{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:30px;padding:0 10px;border-radius:8px;border:1.5px solid var(--text);font-weight:700;font-size:12.5px;letter-spacing:.02em} .nobanner{display:flex;align-items:center;gap:14px;margin-top:36px;padding:14px 16px;border:1px dashed var(--line2);border-radius:14px;color:var(--text2);font-size:14px;background:var(--tile)} .nobanner svg{width:22px;height:22px;color:var(--good);flex:none} /* FAQ */ .faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px 56px;align-items:start} .faq details{border-bottom:1px solid var(--line)} .faq details:first-child{border-top:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 2px;font-weight:600;font-size:15.5px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";width:9px;height:9px;border-right:1.8px solid var(--text2);border-bottom:1.8px solid var(--text2);transform:rotate(45deg);transition:transform .2s;flex:none;margin-right:4px} .faq details[open] summary::after{transform:rotate(-135deg)} .faq details p{color:var(--text2);padding:0 2px 18px;max-width:62ch} /* beta / signup */ .join{margin-top:96px;background:var(--hero-glow),var(--hero-bg);color:var(--hero-ink);position:relative;isolation:isolate} .join::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--hero-line) 1px,transparent 1px),linear-gradient(90deg,var(--hero-line) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:linear-gradient(0deg,#000 30%,transparent 100%);mask-image:linear-gradient(0deg,#000 30%,transparent 100%)} .join-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 64px;align-items:center;padding-block:88px} .join-copy{display:grid;gap:16px} .join-copy h2{font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);letter-spacing:-.022em;font-size:clamp(38px,4.4vw,60px);line-height:1;text-wrap:balance} .join-copy p{color:var(--hero-ink2);font-size:17px;max-width:40ch} .join-copy .dad-say{color:var(--dad-ink)} .join .dad-mark,.hero-band .dad-mark{color:var(--hero-dad)} .src-plat{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} .src-plat h3{font-size:13.5px;font-weight:600;margin-bottom:10px} .form-card{background:var(--tile);color:var(--text);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--e-hero);display:grid;gap:14px} .form-card h3{font-size:18px;font-weight:600;letter-spacing:-.01em} .form-card .sub{color:var(--text2);font-size:14px;margin-top:-8px} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .fgrid .full{grid-column:1/-1} .form-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px} .form-foot p{max-width:36ch} .form-status{font-size:14px;font-weight:600;color:var(--up-ink)} .form-status:empty{display:none} .form-card .alt{font-size:13.5px;color:var(--text2);border-top:1px solid var(--line);padding-top:14px} /* footer */ .site-foot{border-top:1px solid var(--line);margin-top:0;color:var(--text2);font-size:14px} .foot-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:28px 48px;padding-block:48px 40px} .foot-brand p{margin-top:10px;color:var(--muted)} .site-foot .brand{display:inline-flex;align-items:center;gap:8px;font-weight:650;color:var(--text);text-decoration:none;font-size:16px;letter-spacing:-.015em} .site-foot .brand svg{width:24px;height:24px} .site-foot .brand .dot,.site-head .brand .dot{color:var(--accent)} :root[data-hero=cobalt] .site-head .brand .dot{color:#8ea0ff} .foot-nav{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px 40px} .foot-group h2{font-size:13px;font-weight:650;color:var(--text);margin-bottom:12px} .foot-group h2 a{color:inherit;text-decoration:none} .foot-group ul{list-style:none;padding:0;margin:0;display:grid;gap:8px} .foot-tools ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px} .foot-group a{color:var(--text2);text-decoration:none} .foot-group a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px} .foot-bottom{grid-column:1/-1;display:flex;gap:8px 24px;flex-wrap:wrap;justify-content:space-between;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)} @media (max-width:860px){ .foot-grid{grid-template-columns:minmax(0,1fr)} .foot-nav{grid-template-columns:minmax(0,1fr)} } @media (max-width:520px){ .foot-tools ul{grid-template-columns:minmax(0,1fr)} } /* uptime page bits */ .mhead{padding:2px 4px 2px} .mh-title{font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);letter-spacing:var(--display-track);font-size:22px;line-height:1.15} .steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:st} .steps li{counter-increment:st;display:grid;gap:6px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--tile)} .steps li::before{content:counter(st);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent-wash2);color:var(--accent-ink);font-weight:700;font-size:13px;margin-bottom:6px} .steps h3{font-size:16px;font-weight:600} .steps p{color:var(--text2);font-size:14.5px} .knock-note{font-size:13px;color:var(--hero-ink2);margin-top:14px;display:flex;align-items:center;gap:8px} /* ---------- responsive ---------- */ /* ---------- widgets on the page, without a browser frame ---------- */ .tile.lift{box-shadow:var(--e-hero)} .rev-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;align-items:stretch} .rev-main{padding:22px 22px 16px} .rev-head{display:flex;gap:12px 24px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px} .rev-head h3{font-size:14px;font-weight:600;color:var(--text2)} .rev-fig{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:2px} .rev-fig b{font-family:var(--font-display);font-weight:700;font-stretch:var(--display-stretch);font-size:36px;letter-spacing:-.025em;line-height:1.1} .delta{font-size:13px;font-weight:600}.delta.up{color:var(--up-ink)} .rev-head .legend{margin-left:auto} /* wide (landscape) stat tiles: figures on the left, the trend on the right */ .rev-side{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr);gap:12px} .tile.stat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);grid-template-rows:auto auto auto;column-gap:18px;align-items:center;padding:14px 18px} .stat-l{grid-column:1;font-size:12.5px;color:var(--text2)} .stat-v{grid-column:1;font-size:26px;font-weight:650;letter-spacing:-.02em;line-height:1.2} .stat-d{grid-column:1;font-size:12.5px;color:var(--muted)}.stat-d.up{color:var(--up-ink);font-weight:600} .tile.stat svg{grid-column:2;grid-row:1 / 4;width:100%;height:52px;align-self:center} .naked{border-top:2px solid var(--text);padding-top:14px} .naked-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px} .naked-head h3{font-size:15px;font-weight:600} .naked .ctable td,.naked .ctable th{background:transparent} .stack{position:relative;padding-bottom:4px} .stack-top{position:relative;z-index:2;margin-right:48px} .stack-top .banner{box-shadow:var(--e-pop);background:color-mix(in srgb,var(--c) 7%,var(--tile))} .stack-under{margin:-22px 0 0 36px;padding-top:40px} /* ---------- infrastructure: the production globe journey, restyled ---------- */ .gscene{--g-surface:var(--tile);--g-tint:color-mix(in srgb,var(--accent) 9%,var(--tile));--g-wire:color-mix(in srgb,var(--accent) 24%,var(--line)); --surface:var(--tile);--tint:var(--g-tint);--wire:var(--g-wire);--accent-bright:color-mix(in srgb,var(--accent) 60%,#fff); position:relative;padding:8px 0 0} /* No card around the globe. The whole section sits on a full-width "sky" band instead: a soft cobalt wash, a glow behind the sphere, and the hero's faint grid fading out at the edges. */ main.lpmain>section#infrastructure{position:relative;isolation:isolate;padding-bottom:88px;margin-top:40px} #infrastructure::before,#infrastructure::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;pointer-events:none} #infrastructure::before{background: radial-gradient(34% 46% at 27% 66%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 72%), radial-gradient(30% 40% at 80% 62%,color-mix(in srgb,var(--s3) 7%,transparent),transparent 70%), linear-gradient(180deg,var(--page),color-mix(in srgb,var(--accent) 6%,var(--page)) 22%,color-mix(in srgb,var(--accent) 7%,var(--page)) 78%,var(--page))} #infrastructure::after{background-image:linear-gradient(color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px);background-size:44px 44px; -webkit-mask-image:radial-gradient(60% 60% at 40% 62%,#000,transparent 75%);mask-image:radial-gradient(60% 60% at 40% 62%,#000,transparent 75%)} :root[data-theme=dark] #infrastructure::before{background: radial-gradient(34% 46% at 27% 66%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 72%), radial-gradient(30% 40% at 80% 62%,color-mix(in srgb,var(--s3) 8%,transparent),transparent 70%), linear-gradient(180deg,var(--page),color-mix(in srgb,var(--accent) 9%,var(--page)) 22%,color-mix(in srgb,var(--accent) 10%,var(--page)) 78%,var(--page))} .g-stagebox{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,330px);gap:16px;align-items:center} .g-svg{display:block;width:100%;height:auto;overflow:visible} .gscene text{font-family:var(--font-ui);fill:var(--text)} .g-lbl{font-size:12px;font-weight:600} .g-sub{font-size:11.5px;fill:var(--muted)!important} .g-route{fill:none;stroke:var(--g-wire);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} .g-route.conv{stroke:color-mix(in srgb,var(--s3) 45%,var(--line))} .g-route.app{stroke:color-mix(in srgb,var(--accent) 50%,var(--line));stroke-width:1.6} .g-route.ads{stroke-dasharray:3 4} .g-packet{fill:var(--accent);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 45%,transparent))} .g-packet.conv{fill:var(--s3);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--s3) 45%,transparent))} .g-packet.ad{fill:var(--muted);filter:none} .g-tile{fill:var(--g-surface);stroke:var(--g-wire);stroke-width:1;transition:stroke .2s} .g-net-tile{fill:#fff;stroke:var(--g-wire);stroke-width:1} .g-frame{fill:var(--g-tint);fill-opacity:.55;stroke:var(--g-wire);stroke-width:1} .gscene [data-info]{cursor:help;outline:none} .gscene [data-info].on .g-tile,.gscene [data-info]:focus-visible .g-tile,.gscene [data-info].on .g-net-tile,.gscene [data-info]:focus-visible .g-net-tile,.gscene [data-info]:focus-visible .g-frame{stroke:var(--accent);stroke-width:2} .gscene [data-info]:focus-visible .g-lbl{text-decoration:underline} .g-stage.hit>.g-tile,.g-net.hit>.g-net-tile{animation:g-hit .5s ease-out} @keyframes g-hit{0%{stroke:var(--accent);stroke-width:2.4}100%{stroke:var(--g-wire);stroke-width:1}} .gscene .svg-card{fill:var(--tile);stroke:var(--line);stroke-width:1;filter:drop-shadow(0 4px 10px #1b2b4a14)} .gscene .geo-callout text.small{font-size:10.5px;fill:var(--muted)} .gscene .geo-callout text.label{font-size:11.5px;font-weight:600} /* At phone size the globe is scaled down; its city cards would be too small to read. */ .g-svg.mobile #globe-event-cards{display:none} .g-dash{position:relative;padding:16px;box-shadow:var(--e-hero);outline:none} .g-dash:focus-visible{box-shadow:0 0 0 2px var(--focus),var(--e-hero)} .g-dash::before{content:"";position:absolute;left:-17px;top:50%;width:17px;height:1.6px;background:color-mix(in srgb,var(--accent) 50%,var(--line))} .g-dash .th{margin-bottom:10px} .g-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .g-kpi{border:1px solid var(--line);border-radius:12px;padding:10px 11px 8px;display:grid;gap:1px;background:var(--tile);transition:background .5s} .g-kpi.hit{animation:g-kpi .7s ease-out} @keyframes g-kpi{0%{background:var(--accent-wash)}100%{background:var(--tile)}} .g-k{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)} .g-k i{width:8px;height:8px;border-radius:50%} .g-v{font-size:19px;font-weight:650;letter-spacing:-.015em;line-height:1.25} .g-kpi small{font-size:11px;color:var(--muted)} .g-sp svg{display:block;width:100%;height:28px;margin-top:4px} .g-pause{position:absolute;top:0;left:0;z-index:3;width:30px;height:30px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--tile) 88%,transparent);color:var(--text2);cursor:pointer;opacity:.7;transition:opacity .15s,color .15s} .g-pause:hover,.g-pause:focus-visible{opacity:1;color:var(--text)} .g-pause svg{width:14px;height:14px} @media (max-width:1080px){ .hero{grid-template-columns:minmax(0,1fr);gap:24px} .hero .lead{max-width:46ch} .stage{max-width:760px;width:100%;margin-inline:auto} .duo,.duo.rev{grid-template-columns:minmax(0,1fr)} .duo.rev .split-copy{order:-1} .faq{grid-template-columns:minmax(0,1fr)} .join-grid{grid-template-columns:minmax(0,1fr)} .site-nav a.opt{display:none} } @media (max-width:980px){ .rev-grid{grid-template-columns:minmax(0,1fr)} .rev-side{grid-template-columns:repeat(2,minmax(0,1fr))} .g-stagebox{grid-template-columns:minmax(0,1fr) minmax(250px,290px)} } @media (max-width:860px){ :root{--lp-gutter:20px} .site-nav{display:none} .head-cta{margin-left:auto} .pipe{grid-template-columns:minmax(0,1fr);gap:28px} .node{margin-right:0} .link{top:auto;bottom:-29px;right:auto;left:28px;width:2px;height:28px} .link::after{top:-10px;left:-2px;animation-name:dd-packet-v} @keyframes dd-packet-v{to{top:32px}} .branch{justify-content:flex-start} .branch .node{max-width:none;width:100%} .feats,.priv,.infra-notes,.steps{grid-template-columns:minmax(0,1fr);gap:22px} } @media (max-width:700px){ .g-stagebox{grid-template-columns:minmax(0,1fr);gap:14px} .g-dash::before{left:50%;top:-15px;width:1.6px;height:15px} .gscene{padding:4px 0 0} } @media (max-width:720px){ :root{--lp-gutter:16px} .thread{--thread-h:610px} .bcard{padding:16px 14px 14px} .mini{grid-template-columns:minmax(0,1fr);gap:8px} .mk{display:flex;align-items:baseline;gap:8px} .mk small{margin-top:0} .stack-top{margin-right:16px} .stack-under{margin-left:14px} .rev-head .legend{margin-left:0} .rev-side{grid-template-columns:minmax(0,1fr)} .tile.stat{grid-template-columns:minmax(0,1fr) minmax(0,42%)} main.lpmain>section{padding-block:72px 0} .hero{padding-block:8px 44px} .stage{padding-top:74px} .peek{width:100px;right:10%} .hands{top:65px;width:142px;right:calc(10% - 21px)} .anno-layer{display:none} .caption{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin-top:14px;display:grid;gap:8px} .brief-bar>span{display:none} .qchip{font-size:13px;padding:6px 11px} .fgrid{grid-template-columns:minmax(0,1fr)} .outcome strong{font-size:24px} .head-cta .btn.cta{display:none} .frame.shot .frame-body{padding:10px} .frame-bar .addr{display:none} } @media (prefers-reduced-motion:reduce){ .msg,.mini,.kchecks i.fresh,.kdays i.today,.mchart .leak,.mchart .today{animation:none} .caption{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin-top:14px;display:grid;gap:8px} .anno-layer{display:none} } /* ---------- funnel story (home) ---------- */ .fs-tile{padding:22px 24px 24px} .fstory{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,300px);gap:28px 36px;margin-top:6px} .fs-cols{display:grid;grid-template-columns:130px minmax(0,1fr) 104px;gap:14px;font-size:12px;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--line)} .fs-cols span:last-child{text-align:right} .fs-rows{list-style:none;padding:0;margin:0;display:grid} .fs-row{display:grid;grid-template-columns:130px minmax(0,1fr) 104px;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--grid)} .fs-row:last-child{border-bottom:0} .fs-name{font-size:13.5px;font-weight:500} .fs-track{position:relative;height:30px;border-radius:6px;background:var(--grid)} .fs-bar,.fs-lost{position:absolute;top:0;bottom:0;left:0;border-radius:6px;transition:width .8s cubic-bezier(.3,.7,.2,1),left .8s cubic-bezier(.3,.7,.2,1)} .fs-bar{background:var(--s1);z-index:1} .fs-lost{z-index:0;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ghost) 30%,transparent) 0 5px,transparent 5px 9px)} .fs-lost.leak{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--crit) 55%,transparent) 0 5px,color-mix(in srgb,var(--crit) 16%,transparent) 5px 9px);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--crit) 60%,transparent)} .fs-row.fixed .fs-lost.leak{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ghost) 30%,transparent) 0 5px,transparent 5px 9px);box-shadow:none} .fs-lostlbl{position:absolute;z-index:2;top:50%;transform:translateY(-50%);font-size:12.5px;font-weight:650;color:var(--down-ink);white-space:nowrap;transition:left .8s cubic-bezier(.3,.7,.2,1);text-shadow:0 0 3px var(--tile),0 0 3px var(--tile)} .fs-row.fixed .fs-lostlbl{color:var(--up-ink)} .fs-row.is-leak .fs-name::after{content:"Biggest drop";display:block;width:max-content;margin-top:3px;font-size:11.5px;font-weight:600;color:var(--down-ink);background:color-mix(in srgb,var(--crit) 12%,transparent);border-radius:6px;padding:1px 7px} .fs-row.is-leak.fixed .fs-name::after{content:"Fixed";color:var(--up-ink);background:color-mix(in srgb,var(--good) 14%,transparent)} .fs-val{text-align:right;font-variant-numeric:tabular-nums;line-height:1.25} .fs-val b{font-size:15px;font-weight:650} .fs-val small{display:block;font-size:11.5px;color:var(--muted)} .fstory.offscreen .fs-cursor,.fstory.offscreen .fs-cursor i,.fstory.offscreen .fs-fix::after{animation-play-state:paused} /* impact panel */ .fs-side{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:14px;background:var(--tile2);border:1px solid var(--line);align-self:start} .fs-cap{font-size:12.5px;color:var(--text2)} .fs-revline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .fs-big{font-family:var(--font-display);font-weight:700;font-stretch:var(--display-stretch);font-size:40px;letter-spacing:-.03em;line-height:1.05} .fs-gain{font-size:13px;font-weight:700;color:var(--up-ink);background:color-mix(in srgb,var(--good) 14%,transparent);border-radius:7px;padding:2px 8px} .fs-was{font-size:12.5px;color:var(--muted);min-height:2.6em} .fs-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:8px 0 14px;padding-top:12px;border-top:1px solid var(--line)} .fs-kv dt{font-size:12px;color:var(--muted)} .fs-kv dd{margin:0;font-size:18px;font-variant-numeric:tabular-nums} .fs-kv dd b{font-weight:650} .fs-act{position:relative} .fs-fix{position:relative;width:100%;justify-content:center;padding:13px 18px;font-size:15px;font-weight:650;border-radius:12px;overflow:visible} .fs-fix svg{width:18px;height:18px} .fs-fix.primary{box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent) 70%,transparent)} .fs-fix::after{content:"";position:absolute;left:var(--tx,62%);top:var(--ty,55%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:color-mix(in srgb,var(--on-accent) 55%,transparent);opacity:0;pointer-events:none} .fs-hint{font-size:12.5px;color:var(--text2);margin-top:4px} .fs-cursor{position:absolute;left:0;top:0;width:26px;height:26px;pointer-events:none;opacity:0;z-index:2;filter:drop-shadow(0 3px 5px #0b102040)} .fs-cursor svg{width:26px;height:26px;display:block} /* one tap cycle, 5s: the pointer glides in, presses, the button ripples, the pointer leaves */ .fstory.trying .fs-cursor{animation:fs-cursor 5s cubic-bezier(.45,.05,.25,1) 1.2s infinite} .fstory.trying .fs-fix::after{animation:fs-ripple 5s ease-out 1.2s infinite} .fstory.trying .fs-fix{animation:fs-press 5s ease 1.2s infinite} @keyframes fs-cursor{ 0%{opacity:0;transform:translate(260px,110px)} 8%{opacity:1} 34%{transform:translate(calc(var(--cx,160px)),24px)} 40%{transform:translate(calc(var(--cx,160px)),24px) scale(.86)} 46%{transform:translate(calc(var(--cx,160px)),24px) scale(1)} 70%{opacity:1;transform:translate(calc(var(--cx,160px)),24px)} 86%,100%{opacity:0;transform:translate(calc(var(--cx,160px) + 60px),90px)}} @keyframes fs-ripple{0%,39%{opacity:0;transform:scale(.4)}41%{opacity:1;transform:scale(1)}62%,100%{opacity:0;transform:scale(9)}} @keyframes fs-press{0%,38%,48%,100%{transform:none}41%{transform:scale(.97)}} .fstory.still .fs-cursor{opacity:1;transform:translate(calc(var(--cx,160px) + 26px),34px)} .fstory.tried .fs-cursor{opacity:0;transition:opacity .25s} @media (max-width:900px){ .fstory{grid-template-columns:minmax(0,1fr)} .fs-side{align-self:stretch} } @media (max-width:600px){ .fs-tile{padding:16px 14px 18px} .fs-cols{display:none} .fs-row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px;padding:10px 0 14px} .fs-name{grid-column:1} .fs-val{grid-column:2;grid-row:1} .fs-track{grid-column:1 / 3;height:24px} .fs-row.is-leak .fs-name::after{display:inline-block;margin:0 0 0 8px} .fs-lostlbl{font-size:12px} .fs-big{font-size:34px} } @media (prefers-reduced-motion:reduce){ .fs-bar,.fs-lost,.fs-lostlbl{transition:none} } /* ---------- campaigns card + privacy icons ---------- */ .camp-tile{padding:20px 22px 10px} .camp-tile .th{margin-bottom:8px} .priv>div{display:grid;grid-template-columns:auto;align-content:start} .priv .cicon{display:block;width:76px;height:76px;margin-bottom:8px} :root[data-theme=dark] .priv .cicon{filter:saturate(.9) brightness(.94)} @media (max-width:860px){ .priv>div{grid-template-columns:64px minmax(0,1fr);column-gap:16px} .priv .cicon{width:64px;height:64px;grid-row:1 / 3;margin:0} .priv b{margin-top:6px} } /* infrastructure providers: logo, what they do, and the availability target (as on production) */ .provider{display:flex;flex-direction:column;gap:8px;height:100%} .provider h3{margin-top:4px} .provider p{color:var(--text2);max-width:58ch;margin-bottom:10px} .plogo{display:block;flex:none;height:34px;width:auto;max-width:150px;object-fit:contain;object-position:left center} .plogo.hz{height:22px;margin-block:6px 6px} :root[data-theme=dark] .plogo.cf{filter:brightness(0) invert(1)} .avail{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);max-width:420px} .avail-k{font-size:12.5px;color:var(--muted)} .avail strong{font-size:22px;font-weight:650;letter-spacing:-.02em} .avail-sq{grid-column:1/-1;display:grid;grid-template-columns:repeat(30,1fr);gap:3px;margin-top:4px} .avail-sq i{aspect-ratio:1;border-radius:2px;background:var(--good-soft)} .gscene{position:relative} /* ---------- production contracts: forms, benchmark, keys ---------- */ /* Spam trap: kept out of sight and out of the tab order; people never fill it. */ .form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} .form-card{position:relative} .form-status[data-error=true]{color:var(--down-ink)} .signup-card form{display:grid;gap:8px} .signup-card .field{margin-top:6px} .signup-card .btn{justify-content:center;margin-top:10px} .field-help,.form-note{font-size:12.5px;color:var(--muted)} .form-note{text-align:center} .signup-message{padding:12px 14px;border-radius:10px;background:var(--accent-wash);color:var(--text);font-size:14px} .signup-message.error{background:color-mix(in srgb,var(--crit) 10%,var(--tile));color:var(--down-ink)} /* Trial to paid, compared with the industry median. */ .fs-bench{display:grid;gap:6px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--text2)} .fs-bench-head{display:flex;justify-content:space-between;gap:12px} .fs-bench-head strong{color:var(--text);font-weight:600} .fs-bench-head span{font-size:12.5px;color:var(--muted)} .fs-bench p b{font-size:18px;color:var(--text)} .fs-bench-div{color:var(--line2);margin-inline:6px} .fs-bench small{font-size:12.5px;color:var(--muted)} .fs-bench a{color:var(--text2)} .fs-bench details summary{cursor:pointer;font-size:13px;color:var(--text2);width:max-content} .fs-bench details p{font-size:13px;margin-top:6px;max-width:70ch} .fs-noscript{margin:0;padding-left:20px;display:grid;gap:4px;color:var(--text2)} .noscript-note{background:var(--tile);color:var(--text);border-radius:14px;padding:18px} /* Legend keys (classes, so pages need no inline styles). */ .key-accent{background:var(--accent)} .key-wash{background:var(--accent-wash2)} .key-s1{background:var(--s1)} .key-s3{background:var(--s3)} .key-s8{background:var(--s8)} .gfoot .key i.key-event{background:var(--hero-ink)} .gfoot .key i.key-revenue{background:#46e0a2} .live-tile{display:flex;flex-direction:column} .m-day{margin-top:4px} .infra-notes{margin-top:28px} .foot-uptime{display:inline-flex;line-height:0;border-radius:7px;transition:opacity .15s} .foot-uptime:hover{opacity:.85} .foot-uptime img{height:24px;width:auto} /* four-group footer: 4 columns, then 2, then 1 */ .foot-nav4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:860px){ .foot-nav4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:340px){ .foot-nav4{grid-template-columns:minmax(0,1fr)} } .foot-bottom .foot-uptime img{display:block}