/* Concise product story, shared ClearFrame palette. */
.launch-hero{padding-top:70px;padding-bottom:50px}
.launch-hero h1{font-size:clamp(44px,5.6vw,80px)!important;line-height:1.06!important;margin:20px 0 24px;letter-spacing:-.055em!important}
.launch-hero .launch-description{font-size:19px;line-height:1.6;max-width:560px;margin:0 auto 28px}
.launch-hero .hero-actions{gap:24px;flex-wrap:wrap}
.landing-cta{--btn-h:44px;--btn-px:22px;--btn-fs:15px;--btn-icon:15px}
.landing-cta svg{flex:none;display:block}
.platform-links{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px;font-size:var(--cf-type-xs);color:var(--muted)}
.platform-links a{display:inline-flex;gap:7px;align-items:center;min-height:32px}.platform-links a:hover{color:var(--cf-text-blue)}
.platform-links small,.beta-label{font-size:var(--cf-type-2xs);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--muted);font-weight:var(--cf-weight-regular);white-space:nowrap}
.section{padding-block:48px}.section-heading{margin-bottom:24px}.section-heading h2{margin:0}.section-heading>p{max-width:320px;font-size:var(--cf-type-s)}
.value-grid{gap:18px;border:0}.value-grid article,.value-grid article+article{padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.value-grid h3{margin:18px 0 10px;font-size:20px!important}.value-grid p{font-size:var(--cf-type-s);margin:0;line-height:var(--cf-lineheight-l)}.feature-icon{width:34px;height:34px;font-size:20px}
.workflow-inline{display:flex;align-items:center;justify-content:center;gap:26px;padding:28px 0;margin-top:12px;font-size:13px;color:var(--muted);scroll-margin-top:140px}
.workflow-inline b{color:var(--text);font-weight:var(--cf-weight-medium);margin-right:8px}
.away-note{border-top:1px solid var(--line);padding-top:18px;font-size:13px;color:var(--muted)}
.away-note summary{cursor:pointer;color:var(--text);font-weight:var(--cf-weight-medium)}.away-note .beta-label{margin-left:8px}.away-note p{max-width:850px;line-height:1.7}
.comparison-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.comparison table{border-collapse:collapse;width:100%;min-width:780px;font-size:var(--cf-type-xs);line-height:var(--cf-lineheight-m)}
.comparison th,.comparison td{padding:20px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;font-weight:var(--cf-weight-regular)}
.comparison th[scope=row]{font-weight:var(--cf-weight-medium);width:22%;color:var(--text)}
.comparison td{color:var(--muted)}.comparison .cf-column{background:var(--cf-accent-soft);color:var(--text);font-weight:var(--cf-weight-medium)}
.comparison tr:last-child th,.comparison tr:last-child td{border-bottom:0}.comparison thead th{font-weight:var(--cf-weight-semibold)}
.comparison-brand{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:var(--cf-type-s)}.comparison-brand img{object-fit:contain;flex:none}

.comparison-sources{font-size:11px;color:var(--muted);margin-top:14px;line-height:1.7}.comparison-sources summary{cursor:pointer}.comparison-sources a{text-decoration:underline;text-underline-offset:3px}
.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:850px;margin-inline:auto;gap:20px}.plan{padding:28px}.plan .price{margin-top:24px}.plan ul{margin:8px 0 24px}.plan .button{width:100%;justify-content:space-between}.plan .allowance{min-height:0}
.pricing-note,.team-contact{text-align:center;color:var(--muted);font-size:var(--cf-type-xs)}.team-contact a{color:var(--cf-text-blue);text-decoration:underline;text-underline-offset:2px}.pricing-details{max-width:850px;margin:20px auto;padding:16px 20px}
.browser-try{margin:0 auto 55px}.browser-try>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:15px;font-weight:var(--cf-weight-medium);list-style:none}.browser-try>summary::-webkit-details-marker{display:none}.browser-try[open]>summary span{transform:rotate(45deg)}.browser-try-content{padding-top:24px}.browser-try .agent-workspace{max-width:none}
@media(max-width:700px){.launch-hero{padding-top:44px;padding-bottom:30px}.launch-hero .launch-description{font-size:16px}.section{padding-block:30px}.section-heading{display:block}.section-heading>p{margin-top:12px}.value-grid{grid-template-columns:1fr}.value-grid article,.value-grid article+article{padding:22px}.workflow-inline{gap:12px;justify-content:flex-start;flex-wrap:wrap;font-size:var(--cf-type-xs)}.workflow-inline>span[aria-hidden]{display:none}.platform-links{gap:6px 20px;max-width:340px;margin-inline:auto}.pricing-grid{grid-template-columns:1fr}.comparison th,.comparison td{padding:16px 14px}.away-note summary{line-height:1.9}.browser-try>summary{padding:18px}.hero-actions .text-link{font-size:13px}.launch-hero .hero-actions{gap:16px}}

/* Put ClearFrame’s independence and benefits first. Preserve original brand colors. */
.comparison-promise{display:flex;align-items:center;gap:28px;margin:0 0 26px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.comparison-promise strong{font-size:20px;letter-spacing:-.03em;white-space:nowrap}.comparison-promise p{margin:0;color:var(--muted);font-size:var(--cf-type-s)}
.comparison table{min-width:920px;table-layout:fixed}.comparison th:first-child{width:24%}.comparison .cf-column{width:23%;border-left:1px solid var(--blue);border-right:1px solid var(--blue)}
.comparison thead .cf-column{border-top:3px solid var(--blue)}.comparison tbody tr:last-child .cf-column{border-bottom:3px solid var(--blue)}
.comparison-brand{flex-direction:column;align-items:flex-start;gap:10px;font-size:15px}.comparison-brand img{width:40px;height:40px;filter:none}
.comparison-choice{display:block;font-size:9px;letter-spacing:var(--cf-tracking-wide);color:var(--cf-text-blue);margin-bottom:15px;font-weight:var(--cf-weight-semibold)}.brand-detail{display:block;font-size:11px;color:var(--muted);margin-top:9px}
.feature-status{display:flex;align-items:flex-start;gap:9px}.feature-check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:19px;height:19px;border-radius:50%;color:var(--cf-text-blue);background:var(--cf-accent-soft);font-weight:var(--cf-weight-bold);font-size:13px}.cf-column .feature-check{background:var(--blue);color:var(--bg)}
.feature-qualified{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;flex:none;border-radius:50%;color:#b42332;background:rgba(180,35,50,.09);font-size:17px;font-weight:var(--cf-weight-semibold);line-height:1}:root[data-theme=dark] .feature-qualified{color:#ff9aa6;background:rgba(255,154,166,.10)}.comparison-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}.comparison-bottom p{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px;margin:0}.legend-negative{margin-left:12px}
@media(max-width:700px){.comparison-promise{display:block}.comparison-promise p{margin-top:8px}.comparison-bottom{align-items:flex-start;flex-direction:column}.comparison table{min-width:800px}.comparison th:first-child{width:125px}.comparison .cf-column{width:145px}}

.comparison .comparison-group th{width:auto;padding:12px 18px;font-size:var(--cf-type-2xs);font-weight:var(--cf-weight-semibold);letter-spacing:.11em;color:var(--muted);background:var(--bg);border-top:1px solid var(--line)}

/* Technical story: reuse the landing page’s typography, cards and theme tokens. */
.engineering-story{scroll-margin-top:110px}.engineering-story .eyebrow{margin-bottom:16px}.engineering-story .beta-label{margin-left:10px;letter-spacing:normal;text-transform:none}.engineering-intro{max-width:760px;color:var(--muted);font-size:17px;line-height:1.7}.engineering-loop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;list-style:none;padding:0;margin:28px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;counter-reset:engineering-step;background:var(--surface)}.engineering-loop li{padding:20px 18px;font-size:13px;font-weight:var(--cf-weight-medium);counter-increment:engineering-step}.engineering-loop li+li{border-left:1px solid var(--line)}.engineering-loop li::before{content:"0" counter(engineering-step);display:block;margin-bottom:10px;color:var(--cf-text-blue);font:var(--cf-type-xs) ui-monospace,monospace}.engineering-details h3{font-size:17px}.engineering-note{color:var(--muted);font-size:var(--cf-type-xs);line-height:1.7;margin-top:18px;max-width:780px}@media(max-width:700px){.engineering-intro{font-size:15px}.engineering-loop{grid-template-columns:repeat(2,minmax(0,1fr))}.engineering-loop li:nth-child(3){border-left:0}.engineering-loop li:nth-child(n+3){border-top:1px solid var(--line)}.engineering-story .beta-label{display:inline-block;margin:8px 0 0 0}.engineering-story .eyebrow{display:flex;flex-direction:column;align-items:flex-start}}

/* Clear outcome, a single first action, then the objections that matter. */
.launch-hero{padding-top:60px;padding-bottom:36px}
.launch-hero .launch-description{max-width:635px;font-size:var(--cf-copy-s-size);line-height:1.65}
.launch-hero .micro{font-size:var(--cf-copy-xs-size);color:var(--muted);margin-top:16px}
.launch-hero .platform-links{margin-top:20px;font-size:14px}
.value-grid p{font-size:var(--cf-type-m)}.value-grid h3{font-size:20px!important}
.landing-deep-dive{margin-bottom:24px}
.landing-deep-dive>summary{display:flex;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;padding:22px 24px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:var(--cf-type-m)}
.landing-deep-dive>summary::-webkit-details-marker{display:none}
.landing-deep-dive[open]>summary span{transform:rotate(45deg)}
.observatory-feature{display:flex;align-items:center;justify-content:space-between;gap:32px;border-top:1px solid var(--line);margin-top:12px}
.observatory-feature h2{font-size:30px;letter-spacing:-.04em;line-height:var(--cf-lineheight-xs);margin:12px 0}
.observatory-feature p:not(.eyebrow){max-width:650px;font-size:var(--cf-type-m);color:var(--muted)}
.observatory-feature .button{flex:none}
@media(max-width:700px){.launch-hero h1{font-size:clamp(36px,9.5vw,55px)!important}.launch-hero .micro{font-size:var(--cf-copy-xs-size)}.observatory-feature{align-items:flex-start;flex-direction:column;gap:14px}.observatory-feature h2{font-size:27px}.value-grid p{font-size:16px}.landing-deep-dive>summary{padding:18px;font-size:15px}.launch-hero .platform-links{font-size:13px}.launch-hero .phone-beta{margin-top:24px}}
.product-proof{max-width:1080px;margin:38px auto 0;text-align:left}.product-proof img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 65px var(--cf-shadow-color)}.product-proof figcaption{font-size:13px;color:var(--muted);line-height:1.6;text-align:center;max-width:650px;margin:13px auto 0}
@media(max-width:700px){.product-proof{margin-top:26px}.product-proof figcaption{font-size:var(--cf-type-xs);text-align:left}.product-proof img{border-radius:9px}}

/* Hero particle globe: decorative, behind the copy. Mounted by /globe.js only on
   hardware WebGL without reduced motion; otherwise the dot-grid below stays. */
.launch-hero{position:relative;isolation:isolate}
.launch-hero>:not(.hero-globe){position:relative;z-index:1}
.hero-globe{position:absolute;inset:-40px 0 auto;height:min(760px,92vw);z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--blue) 14%,transparent) 0,transparent 58%),
    radial-gradient(color-mix(in srgb,var(--blue) 26%,transparent) 1px,transparent 1.4px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 46%,#000 30%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 46%,#000 30%,transparent 72%)}
.hero-globe canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1s ease}
.hero-globe.is-live{background:none}
.hero-globe.is-live canvas{opacity:.85}
@media(max-width:700px){.hero-globe{inset:-20px 0 auto;height:110vw}}

/* Wide screens: copy on the left, globe on the right. Narrow screens keep the
   centred copy with the globe behind it. */
@media(min-width:1000px){
  .launch-hero{text-align:left}
  .launch-hero>.eyebrow,.launch-hero>h1,.launch-hero>.launch-description,.launch-hero>.hero-actions,.launch-hero>.micro,.launch-hero>.platform-links,.launch-hero>.phone-beta{max-width:min(560px,50%)}
  .launch-hero>h1{max-width:660px}
  .launch-hero .launch-description{margin-inline:0}
  .launch-hero .hero-actions,.launch-hero .platform-links{justify-content:flex-start}
  .launch-hero .phone-beta{margin-inline:0}
  .hero-globe{inset:-20px -4% auto auto;width:52%;height:640px;
    -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 38%,transparent 70%);mask-image:radial-gradient(circle at 50% 50%,#000 38%,transparent 70%)}
}
.hero-globe.is-dragging{cursor:grabbing}
@media(hover:hover) and (pointer:fine){.hero-globe.is-live{user-select:none}}

/* Below 1000px the globe leaves the background and takes its own row under the
   copy (as on mazehq.com); the copy stays left-aligned at every width. */
@media(max-width:999px){
  .launch-hero{text-align:left}
  .launch-hero .launch-description{margin-inline:0}
  .launch-hero .hero-actions,.launch-hero .platform-links{justify-content:flex-start}
  .launch-hero .phone-beta{margin-inline:0}
  .hero-globe{position:relative;inset:auto;width:100%;height:min(88vw,460px);margin:12px 0 4px;
    -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 42%,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000 42%,transparent 72%)}
}

/* Product screenshot framed like a stage: hairline-bordered panel, a drifting dot
   field behind it (WebGL when available, a static dot grid otherwise), and the
   window lifted with a soft blue edge. */
.product-proof{max-width:1180px}
.proof-frame{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);border-radius:6px;
  padding:clamp(22px,6vw,72px) clamp(14px,8vw,110px);background:color-mix(in srgb,var(--blue) 3%,var(--surface,transparent))}
.proof-field{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(color-mix(in srgb,var(--blue) 38%,transparent) 1px,transparent 1.5px) 0 0/9px 9px;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 45%,rgba(0,0,0,.55) 100%);mask-image:radial-gradient(ellipse at 50% 50%,#000 45%,rgba(0,0,0,.55) 100%)}
.proof-field.is-live{background:none;opacity:.95}
.proof-field canvas{display:block;width:100%;height:100%}
.proof-window{position:relative;z-index:1;max-width:900px;margin-inline:auto;border-radius:16px;box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 14%,transparent),0 24px 70px -18px color-mix(in srgb,var(--blue) 24%,transparent),0 0 110px color-mix(in srgb,var(--blue) 12%,transparent)}
  box-shadow:0 0 0 7px color-mix(in srgb,var(--blue) 12%,transparent),0 0 70px color-mix(in srgb,var(--blue) 22%,transparent),0 30px 80px var(--cf-shadow-color)}
.proof-window img{border-radius:12px;box-shadow:none}
@media(max-width:700px){.proof-window{border-radius:10px;box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 12%,transparent),0 0 40px color-mix(in srgb,var(--blue) 20%,transparent)}.proof-window img{border-radius:8px}}

/* Breathing room between the hero stage and the first content section. */
.launch-hero{margin-bottom:clamp(56px,9vw,128px)}

/* The three promises sit directly under the stage as one joined panel, the way
   mazehq.com attaches its tab row: hairline columns, a gradient bar on the
   column you point at. Static (no tab switching) because there is one screenshot. */
.proof-frame{border-radius:6px 6px 0 0}
.proof-tabs{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:0;padding:0;border:1px solid var(--line);border-top:0;border-radius:0 0 6px 6px;overflow:hidden}
.proof-tabs li{position:relative;padding:clamp(20px,3vw,34px) clamp(18px,3.2vw,42px) clamp(24px,3.6vw,44px);transition:background .25s ease}
.proof-tabs li+li{border-left:1px solid var(--line)}
.proof-tabs li::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#a9c9ec,#28b5f4 60%,#087cff);opacity:0;transition:opacity .25s ease}
.proof-tabs li:hover,.proof-tabs li:focus-within{background:color-mix(in srgb,var(--blue) 6%,transparent)}
.proof-tabs li:hover::before,.proof-tabs li:focus-within::before{opacity:1}
.proof-tab-title{display:flex;align-items:center;gap:12px;margin-bottom:clamp(14px,2.4vw,28px)}
.proof-tab-icon{display:inline-grid;place-items:center;width:28px;height:28px;color:var(--cf-text-blue);font-size:20px;line-height:1}
.proof-tab-title strong{font-size:clamp(17px,1.7vw,21px);font-weight:var(--cf-weight-medium);line-height:1.25}
.proof-tabs p{margin:0;color:var(--muted);font-size:var(--cf-type-s);line-height:var(--cf-lineheight-l)}
@media(max-width:800px){.proof-tabs{grid-template-columns:1fr}.proof-tabs li+li{border-left:0;border-top:1px solid var(--line)}}

/* Caption sits on the stage, directly under the window. */
.proof-frame figcaption{position:relative;z-index:1;margin:clamp(16px,2.4vw,26px) auto 0;max-width:650px;text-align:center}
/* Soft veil: the dots blur and fade toward the bottom edge so the caption reads without a box. */
.proof-frame::after{content:"";position:absolute;inset:auto 0 0;height:clamp(90px,14vw,150px);z-index:0;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--surface) 78%,transparent),transparent);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  -webkit-mask-image:linear-gradient(to top,#000 35%,transparent);mask-image:linear-gradient(to top,#000 35%,transparent)}
@media(max-width:700px){.proof-frame figcaption{text-align:left}}

/* "Your project. Your choices. Your way back." as a centred statement over a drifting
   particle terrain, framed by hairlines and hatch bands (after mazehq.com). */
.statement-stage{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;min-height:clamp(420px,54vw,640px);
  border-inline:1px solid var(--line);padding:clamp(72px,10vw,120px) clamp(18px,5vw,64px) clamp(150px,22vw,260px)}
.statement-stage::before,.statement-stage::after{content:"";position:absolute;inset-inline:0;height:26px;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 6px);border-block:1px solid var(--line)}
.statement-stage::before{top:0}.statement-stage::after{bottom:0}
.wave-field{position:absolute;inset:34% 0 26px;z-index:0;pointer-events:none;
  background:radial-gradient(color-mix(in srgb,var(--blue) 30%,transparent) 1px,transparent 1.5px) 0 0/10px 10px;opacity:.45;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%);mask-image:linear-gradient(to bottom,transparent,#000 45%)}
.wave-field.is-live{background:none;opacity:1}
.wave-field canvas{display:block;width:100%;height:100%}
.statement-title{position:relative;z-index:1;margin:0;text-align:center;font-size:clamp(30px,5.4vw,70px)!important;line-height:1.14!important;letter-spacing:-.04em!important;font-weight:var(--cf-weight-medium)!important}
.statement-title .line{display:block}
.statement-stage.is-scrub .w{opacity:.2;transition:opacity .4s ease}
.statement-stage.is-scrub .w.is-lit{opacity:1}
@media(max-width:700px){.statement-stage{border-inline:0;min-height:420px}}

/* The stage runs edge to edge; its content stays on the page column. main clips the
   few pixels 100vw adds for a scrollbar, so nothing scrolls sideways. */
main{overflow-x:clip}
.product-proof{max-width:none;width:100vw;margin:clamp(72px,11vw,170px) calc(50% - 50vw) 0}
.proof-frame{border-radius:0;border-inline:0;padding-inline:clamp(14px,8vw,110px)}
.proof-tabs{border:0;border-bottom:1px solid var(--line);border-radius:0;padding-inline:max(0px,calc((100vw - 1180px) / 2))}
.proof-tabs li:first-child{border-left:1px solid var(--line)}.proof-tabs li:last-child{border-right:1px solid var(--line)}
@media(max-width:800px){.proof-tabs li:first-child{border-left:0}.proof-tabs li:last-child{border-right:0}}
@media(max-width:700px){.product-proof{margin-top:clamp(56px,14vw,88px)}}

/* Corner brackets on the primary call to action (after the bracketed buttons on mazehq.com):
   four 1px L-shaped corners that slide in from the button's edge on hover or focus. */
.button.primary{position:relative;overflow:visible}
.button.primary::before{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;--k:#fff;--l:12px;--w:1px;
  background:
    linear-gradient(var(--k),var(--k)) 0 0/var(--l) var(--w),linear-gradient(var(--k),var(--k)) 0 0/var(--w) var(--l),
    linear-gradient(var(--k),var(--k)) 100% 0/var(--l) var(--w),linear-gradient(var(--k),var(--k)) 100% 0/var(--w) var(--l),
    linear-gradient(var(--k),var(--k)) 0 100%/var(--l) var(--w),linear-gradient(var(--k),var(--k)) 0 100%/var(--w) var(--l),
    linear-gradient(var(--k),var(--k)) 100% 100%/var(--l) var(--w),linear-gradient(var(--k),var(--k)) 100% 100%/var(--w) var(--l);
  background-repeat:no-repeat;filter:drop-shadow(0 0 4px rgba(255,255,255,.45));transition:opacity .2s ease,inset .25s ease}
.button.primary:hover::before,.button.primary:focus-visible::before{opacity:1;inset:-5px}
@media(prefers-reduced-motion:reduce){.button.primary::before{transition:none}}

/* The statement stage runs edge to edge like the screenshot stage above it. */
.statement-stage{width:100vw;margin-inline:calc(50% - 50vw);border-inline:0}
@media(max-width:700px){.statement-stage{border-inline:0}}

/* Steps and the remote-agents note take the same hairline-cell treatment as the
   tab row above: full-bleed rules, three cells on the page column. */
.workflow-inline{display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:stretch;justify-content:stretch;width:100vw;margin:0 calc(50% - 50vw);padding:0 max(0px,calc((100vw - 1180px) / 2));border-bottom:1px solid var(--line);font-size:var(--cf-type-s)}
.workflow-inline>span[aria-hidden]{display:none}
.workflow-inline>span{position:relative;display:flex;align-items:baseline;gap:14px;padding:clamp(24px,3.4vw,44px) clamp(18px,3.2vw,42px);border-left:1px solid var(--line);transition:background .25s ease}
.workflow-inline>span:last-of-type{border-right:1px solid var(--line)}
.workflow-inline>span::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#a9c9ec,#28b5f4 60%,#087cff);opacity:0;transition:opacity .25s ease}
.workflow-inline>span:hover{background:color-mix(in srgb,var(--blue) 6%,transparent)}.workflow-inline>span:hover::before{opacity:1}
.workflow-inline b{margin:0;font-size:clamp(18px,1.9vw,24px);color:var(--cf-text-blue)}
.workflow-inline>span{font-size:clamp(17px,1.7vw,21px);color:var(--text)}
.away-note{width:100vw;margin:0 calc(50% - 50vw);padding:clamp(20px,3vw,32px) max(clamp(18px,3.2vw,42px),calc((100vw - 1180px) / 2 + clamp(18px,3.2vw,42px)));border-top:0;border-bottom:1px solid var(--line);font-size:var(--cf-type-s)}
.away-note summary{display:flex;align-items:center;gap:12px;font-size:clamp(17px,1.7vw,21px)}
@media(max-width:800px){.workflow-inline{grid-template-columns:1fr;padding-inline:0}.workflow-inline>span{border-left:0;border-top:1px solid var(--line)}.workflow-inline>span:last-of-type{border-right:0}.away-note{padding-inline:20px}}

/* Light theme: white brackets would vanish, so they use the logo's deep blue. */
:root:not([data-theme=dark]) .button.primary::before{--k:#087cff;filter:drop-shadow(0 0 4px rgba(8,124,255,.35))}

/* Pause/play control for the decorative canvases. Shown by /globe.js only when an
   animation is running. */
.motion-toggle{position:relative;z-index:2;margin:14px 0 0;padding:6px 12px;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--muted);font:inherit;font-size:var(--cf-type-xs);cursor:pointer;transition:color .15s ease,border-color .15s ease}
.motion-toggle[hidden]{display:none}
.motion-toggle:hover{color:var(--text);border-color:color-mix(in srgb,var(--text) 40%,var(--line))}
.motion-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Pause control sits in the bottom-right corner of the globe stage. */
.launch-hero>.motion-toggle{display:block;margin:0 0 0 auto}
.launch-hero>.motion-toggle[hidden]{display:none}
@media(min-width:1000px){.launch-hero>.motion-toggle{position:absolute;top:612px;right:0;margin:0}}

/* Square the surfaces to match the hairline stages and the sharp buttons: cards, plans,
   panels, fields, dialogs and tags take a 2px corner. Circles (dots, checks, progress
   bars) and the screenshot window keep their shape. */
:root{--cf-radius-control:2px;--cf-radius-card:2px}
.plan,.platform-card,.platform-icon,.platform-select,.platform-notify input[type=email],.download-browser,.direction-loop,.pricing-details,
.comparison-scroll,.browser-try>summary,.landing-deep-dive>summary,.engineering-loop,.phone-beta,.phone-feature-card,.store-hero,
.cf-account-page main,#account-dialog,#account-dialog input,#team-account form,#team-account select,#team-account .team-member,#team-account #team-seat-review,
.obs-card,.obs-server-card,.obs-empty,.obs-notice,.obs-command,.obs-metric,.obs-table-wrap,.obs-detail,.obs-facts div,.obs-search,.obs-field input,.obs-field select,
.obs-guide-disclosure,.obs-guide-menu input,.obs-guide-figure,.obs-guide-commands{border-radius:2px}
.platform-status,.beta-label,.platform-links small,.phone-beta-tag,.obs-tag,.obs-badge,.panel-tag{border-radius:2px}
dialog#signup-dialog{border-radius:2px}


/* Softer lift for the screenshot window, and a caption that stays readable: the veil under it
   is denser and the text uses the full text colour instead of the muted one. */
@media(max-width:700px){.proof-window{box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 14%,transparent),0 14px 40px -14px color-mix(in srgb,var(--blue) 24%,transparent)}}
.proof-field{-webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 35%,rgba(0,0,0,.35) 100%),linear-gradient(to bottom,#000 55%,transparent 92%);-webkit-mask-composite:source-in;mask-image:radial-gradient(ellipse at 50% 42%,#000 35%,rgba(0,0,0,.35) 100%),linear-gradient(to bottom,#000 55%,transparent 92%);mask-composite:intersect}
.proof-frame::after{height:clamp(120px,17vw,190px);background:linear-gradient(to top,color-mix(in srgb,var(--bg) 94%,transparent) 30%,transparent);-webkit-mask-image:linear-gradient(to top,#000 55%,transparent);mask-image:linear-gradient(to top,#000 55%,transparent)}
.proof-frame figcaption{color:var(--text);font-size:clamp(14px,1.3vw,16px);line-height:1.5}

/* Pricing as a stage (after the closing call to action on mazehq.com): a centred headline over
   a drifting particle terrain, with the plans as one joined row of translucent, blurred cells
   that sit in front of the terrain. */
.pricing-stage{position:relative;isolation:isolate;width:100vw;max-width:none;margin-inline:calc(50% - 50vw);padding:clamp(72px,10vw,140px) max(20px,calc((100vw - 1180px) / 2)) clamp(72px,9vw,120px);overflow:hidden}
.pricing-stage>.wave-field{inset:42% 0 auto;height:min(760px,46%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 78%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 78%,transparent)}
.pricing-stage .section-heading{display:block;text-align:center;margin-bottom:clamp(40px,6vw,72px)}
.pricing-stage .section-heading h2{font-size:clamp(32px,5vw,64px)!important;line-height:1.08!important;letter-spacing:-.04em!important;font-weight:var(--cf-weight-medium)!important;margin:12px 0 18px}
.pricing-stage .section-heading>p{margin-inline:auto;max-width:520px;color:var(--muted)}
.pricing-stage .pricing-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;gap:0;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 52%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pricing-stage .plan{position:relative;border:0;border-radius:0;box-shadow:none;background:transparent;padding:clamp(22px,2.6vw,34px)}
.pricing-stage .plan+.plan{border-left:1px solid var(--line)}
.pricing-stage .plan.featured{background:color-mix(in srgb,var(--blue) 7%,transparent);box-shadow:none}
.pricing-stage .plan.featured::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#a9c9ec,#28b5f4 60%,#087cff)}
.pricing-stage .pricing-grid>.plan:last-child{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
@media(max-width:1000px){.pricing-stage .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pricing-stage .plan:nth-child(3){border-left:0}.pricing-stage .plan:nth-child(n+3):not(:last-child){border-top:1px solid var(--line)}}
@media(max-width:700px){.pricing-stage .pricing-grid{grid-template-columns:1fr}.pricing-stage .plan+.plan{border-left:0;border-top:1px solid var(--line)}}

/* Enterprise is a wide cell, so it lays out as a row: name, price and summary on the left,
   the three points in the middle, the action on the right. */
@media(min-width:1000px){
  .pricing-stage .pricing-grid>.plan:last-child{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.3fr) auto;grid-template-areas:"top list cta" "price list cta" "note list cta";column-gap:clamp(28px,5vw,72px);align-items:center;align-content:center;padding-block:clamp(22px,2.4vw,30px)}
  .pricing-stage .pricing-grid>.plan:last-child .plan-top{grid-area:top;justify-content:flex-start;gap:14px}
  .pricing-stage .pricing-grid>.plan:last-child .price{grid-area:price;margin:8px 0 6px;font-size:clamp(32px,3.4vw,44px)}
  .pricing-stage .pricing-grid>.plan:last-child .allowance{grid-area:note;min-height:0;margin:0}
  .pricing-stage .pricing-grid>.plan:last-child ul{grid-area:list;margin:0;padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--line)}
  .pricing-stage .pricing-grid>.plan:last-child .button{grid-area:cta;width:auto;margin:0;align-self:center;white-space:nowrap}
}

/* Secondary buttons: two diagonal corner ticks (top-left, bottom-right), a quieter echo of the
   primary button's four brackets. Muted colour, no glow. */
.button.secondary{position:relative;overflow:visible}
.button.secondary::before{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;--k:color-mix(in srgb,var(--text) 55%,transparent);--l:7px;--w:1px;
  background:
    linear-gradient(var(--k),var(--k)) 0 0/var(--l) var(--w),linear-gradient(var(--k),var(--k)) 0 0/var(--w) var(--l),
    linear-gradient(var(--k),var(--k)) 100% 100%/var(--l) var(--w),linear-gradient(var(--k),var(--k)) 100% 100%/var(--w) var(--l);
  background-repeat:no-repeat;transition:opacity .2s ease,inset .25s ease}
.button.secondary:hover::before,.button.secondary:focus-visible::before{opacity:1;inset:-4px}
@media(prefers-reduced-motion:reduce){.button.secondary::before{transition:none}}