/* ============================================================================
   Flow — shared premium layer
   ----------------------------------------------------------------------------
   Loaded after each page's own <style>, so it upgrades the existing markup
   rather than replacing it. One file, cached once, applied everywhere except
   the homepage — which already carries this language natively and is the
   reference this layer is matched to.

   Two hard rules, learned from the phone-zoom bug: no filter:blur() on large
   boxes, and no backdrop-filter on cards. Every glow here is a gradient, and
   every animation is opacity or transform, so the compositor never has to
   rasterize an offscreen surface per element.
   ========================================================================== */

:root{
  --p-glow:rgba(59,116,255,.30);
  --p-glow-soft:rgba(59,116,255,.13);
  --p-ring:rgba(59,116,255,.55);
  --p-top:rgba(255,255,255,.82);
  --p-bot:rgba(240,245,255,.55);
  --p-gloss:rgba(255,255,255,.9);
  --p-line:rgba(20,44,100,.13);
  --p-line-hi:rgba(20,44,100,.22);
  --p-shadow:0 1px 2px rgba(11,20,45,.05), 0 18px 38px -26px rgba(11,20,45,.34);
  --p-shadow-lg:0 2px 5px rgba(11,20,45,.06), 0 40px 80px -40px rgba(11,20,45,.42);
  --p-amb1:rgba(59,116,255,.10);
  --p-amb2:rgba(120,170,255,.07);
  --p-net:52,104,230; --p-net-a:.42;
  --p-ease:cubic-bezier(.22,1,.36,1);
}
:root[data-theme="dark"]{
  --p-glow:rgba(59,116,255,.5);
  --p-glow-soft:rgba(59,116,255,.16);
  --p-ring:rgba(91,140,255,.7);
  --p-top:rgba(228,236,250,.09);
  --p-bot:rgba(9,13,24,.34);
  --p-gloss:rgba(255,255,255,.13);
  --p-line:rgba(150,166,204,.16);
  --p-line-hi:rgba(150,166,204,.30);
  --p-shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -26px rgba(0,0,0,.85);
  --p-shadow-lg:0 2px 5px rgba(0,0,0,.55), 0 44px 90px -44px rgba(0,0,0,.95);
  --p-amb1:rgba(59,116,255,.17);
  --p-amb2:rgba(59,116,255,.09);
  --p-net:150,170,220; --p-net-a:.38;
}

/* --- ambient ground -------------------------------------------------------
   One fixed layer, not background-attachment:fixed and not a blurred orb. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1000px 640px at 84% -8%, var(--p-amb1), transparent 62%),
    radial-gradient(820px 620px at 6% 14%, var(--p-amb2), transparent 58%);
}
#p-net{position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:.5}

/* --- reading-rhythm scroll progress --------------------------------------- */
.p-progress{
  position:fixed; inset-block-start:0; inset-inline-start:0; height:2px; width:0; z-index:60;
  background:linear-gradient(90deg, var(--accent, #2452D9), var(--accent-2, #3B74FF));
  box-shadow:0 0 12px var(--p-glow); transition:width .1s linear;
}

/* --- header --------------------------------------------------------------- */
header.site{
  border-bottom:0 !important;
  background:linear-gradient(180deg, #0B1020 0%, #07090F 100%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 14px 34px -26px rgba(0,0,0,.9);
}
header.site::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent-2,#3B74FF) 22%, #8FB4FF 50%, var(--accent-2,#3B74FF) 78%, transparent);
  opacity:.85;
}
header.site{position:sticky; z-index:40}
header.site .brand img{filter:drop-shadow(0 0 20px rgba(120,160,255,.35))}
header.site nav a{position:relative; transition:color .22s}
header.site nav a::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:-5px; height:1.5px; border-radius:2px;
  background:var(--accent-2,#3B74FF); transform:scaleX(0); transform-origin:100% 50%; transition:transform .3s var(--p-ease);
}
header.site nav a:hover::after{transform:scaleX(1); transform-origin:0 50%}
.theme-btn, .menu-btn{transition:border-color .25s, background .25s, transform .25s var(--p-ease)}
.theme-btn:hover, .menu-btn:hover{transform:translateY(-1px)}

/* --- mobile nav overlay ----------------------------------------------------
   Same dark gradient as header.site plus the ambient glow every other full-
   screen surface on the site uses, so opening the menu doesn't feel like a
   different, older product. Pure gradients + transform/opacity only — no
   blur, so this stays fine under the phone-zoom constraint above. */
.mobile-nav{
  background:
    radial-gradient(900px 560px at 88% -6%, var(--p-amb1), transparent 60%),
    radial-gradient(760px 520px at 8% 106%, var(--p-amb2), transparent 58%),
    linear-gradient(180deg, #0B1020 0%, #07090F 100%) !important;
  gap:6px !important;
  padding-block:32px;
  overflow-y:auto;
}
.mobile-nav a{transition:color .2s, transform .2s var(--p-ease)}
.mobile-nav a:hover, .mobile-nav a:focus-visible{transform:translateY(-1px)}
/* Secondary group (Glance, About, Insights, Privacy, Terms) is deliberately quieter than the five primary links. Earlier: Privacy/Terms render like every other top-level menu link now — previously
   singled out with a smaller, dimmer, side-by-side treatment that read as
   inconsistent with the rest of the menu. */
.mobile-nav-legal{display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 20px; max-width:340px; margin:18px auto 0; padding-top:16px; border-top:1px solid rgba(128,140,170,.25)}
.mobile-nav .mobile-nav-legal a{font-size:.95rem; font-weight:500; opacity:.72; padding:6px 0}

/* --- type ----------------------------------------------------------------- */
h1.title{
  --p-ink:var(--txt-hi, var(--ink, #0A0E18));
  letter-spacing:-.022em; text-wrap:balance;
  background-image:linear-gradient(180deg, var(--p-ink) 76%, color-mix(in srgb, var(--p-ink) 72%, transparent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--accent-2, #3B74FF);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:currentColor; box-shadow:0 0 10px var(--p-glow);
}
article h2, .sec-head h2{position:relative; letter-spacing:-.012em; text-wrap:balance}
article h2::before{
  content:""; position:absolute; inset-inline-start:-1px; inset-block-start:6px;
  width:3px; height:18px; border-radius:2px;
  background:linear-gradient(180deg, var(--accent-2,#3B74FF), transparent);
  box-shadow:0 0 14px var(--p-glow);
}
/* Centred panel headings carry no text indent, so the marker would sit against
   the panel edge rather than beside the words. */
.cta h2::before, .sec-head h2::before, .cta-box h2::before{display:none}
.lead{color:var(--muted, var(--ink-2, inherit)); font-size:1.19rem; line-height:1.7; text-wrap:pretty}
article a, .lead a{
  text-decoration:none; background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .3s var(--p-ease);
}
article a:hover, .lead a:hover{background-size:100% 1px}

/* --- article reading depth --------------------------------------------------
   The body copy on the article template read as flat, generic long-form text —
   the one place on the site with no depth language at all. This gives the
   drop cap real presence and puts a very soft ambient glow behind the column,
   the same vocabulary the homepage already uses, without touching contrast. */
article{position:relative}
article::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset-inline:-12vw; inset-block-start:-6vw; height:60vw; max-height:640px;
  background:radial-gradient(640px 420px at 18% 0%, var(--p-amb1), transparent 62%);
}
/* Drop cap is a blog-post convention, not a generic <article> style — scoping
   it to article.post keeps it off contact/about/security/pricing/solutions
   pages, which also wrap their body copy in a bare <article> for the other
   shared article styling (heading marker, link underline, ambient glow). */
article.post>p:first-of-type::first-letter{
  background-image:linear-gradient(180deg, var(--cat,var(--accent-2,#3B74FF)) 40%, color-mix(in srgb, var(--cat,#3B74FF) 55%, transparent));
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
  filter:drop-shadow(0 2px 16px var(--p-glow));
}
article h2{margin-block-start:52px}

/* --- surfaces ------------------------------------------------------------- */
.card, .cta, .note, .panel, .installbox, .formcard, .choicepanel, .stepcard, .specimen{
  position:relative; isolation:isolate;
  background:
    linear-gradient(180deg, var(--p-gloss) 0%, transparent 16%),
    linear-gradient(180deg, var(--p-top), var(--p-bot)) !important;
  border:1px solid var(--p-line) !important;
  box-shadow:var(--p-shadow);
}
.card, .stepcard, .choicepanel{
  border-radius:16px;
  transition:transform .35s var(--p-ease), box-shadow .35s var(--p-ease), border-color .35s var(--p-ease);
}
.card:hover, .stepcard:hover, .choicepanel:hover{
  transform:translateY(-3px);
  border-color:var(--p-line-hi) !important;
  box-shadow:var(--p-shadow-lg);
}
/* A hairline of light along the top edge — the cheapest possible depth cue. */
.card::before, .cta::before, .specimen::before, .installbox::before, .formcard::before{
  content:""; position:absolute; inset-inline:14%; inset-block-start:0; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, var(--p-ring), transparent);
  opacity:.55; pointer-events:none;
}
.cta, .installbox, .formcard, .specimen{border-radius:20px; box-shadow:var(--p-shadow-lg)}
.cta{overflow:hidden}
.cta::after{
  content:""; position:absolute; inset:-40% 20% auto 20%; height:150%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle, var(--p-glow-soft) 0%, transparent 62%);
}
.note{border-radius:14px; padding:16px 18px; border-inline-start:3px solid var(--accent-2,#3B74FF) !important}

/* --- the Do It button ------------------------------------------------------
   There were three separate implementations of this button on the site — one on
   the homepage, one on the trial page, one copied into all thirty articles — and
   a flat .btn pill on top of that for "Contact us", "Request pricing" and the
   rest. This is the single canonical version, and because the layer loads after
   each page's own CSS it wins everywhere. Its tokens are prefixed --p- so they
   never collide with a page's local --glass-* set.

   Markup: <a class="doit"><span class="shell"></span><span class="ring"></span>
           <span class="shine"></span>Label</a>
   ------------------------------------------------------------------------- */
:root{
  --p-doit-top:rgba(255,255,255,.97); --p-doit-bot:rgba(219,230,250,.72);
  --p-doit-border:rgba(40,70,150,.3); --p-doit-gloss:rgba(255,255,255,.95);
  --p-doit-text:#123ccb; --p-doit-ring:#2f5bd8; --p-doit-ring-hi:#1A4EF5;
  --p-doit-inner:rgba(14,32,80,.12);
}
:root[data-theme="dark"]{
  --p-doit-top:rgba(228,236,250,.2); --p-doit-bot:rgba(9,13,24,.34);
  --p-doit-border:rgba(228,236,250,.3); --p-doit-gloss:rgba(255,255,255,.55);
  --p-doit-text:#e6efff; --p-doit-ring:#5b8cff; --p-doit-ring-hi:#9dbcff;
  --p-doit-inner:rgba(14,32,80,.24);
}

.doit{
  --pad-y:16px; --pad-x:34px;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:var(--pad-y) var(--pad-x); border:0; cursor:pointer; isolation:isolate;
  border-radius:999px; background:transparent; -webkit-tap-highlight-color:transparent;
  font-family:var(--sans, var(--disp, inherit)); font-weight:700; font-size:1.04rem;
  color:var(--p-doit-text) !important; text-decoration:none; text-shadow:0 1px 10px var(--p-glow);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.doit .shell{
  position:absolute; inset:0; border-radius:inherit; z-index:-2;
  background:linear-gradient(180deg, var(--p-doit-gloss) 0%, transparent 24%),
             linear-gradient(180deg, var(--p-doit-top), var(--p-doit-bot));
  border:1px solid var(--p-doit-border);
  box-shadow:inset 0 1.5px 0 var(--p-doit-gloss), inset 0 -12px 26px var(--p-doit-inner),
             0 16px 46px -10px var(--p-glow);
  transition:box-shadow .3s;
}
.doit .ring{
  position:absolute; inset:6px; border-radius:999px; z-index:-1;
  border:2px solid var(--p-doit-ring);
  box-shadow:0 0 12px var(--p-glow), inset 0 0 0 1px rgba(255,255,255,.28),
             inset 0 0 11px color-mix(in srgb, var(--p-doit-ring) 42%, transparent);
  transition:box-shadow .3s, border-color .3s;
}
.doit .shine{position:absolute; inset:0; border-radius:inherit; overflow:hidden; z-index:-1}
.doit .shine::before{
  content:""; position:absolute; inset-block:-40%; inline-size:40%; inset-inline-start:-60%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-18deg);
}
.doit:hover{transform:translateY(-2px) scale(1.035)}
.doit:hover .shell{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -10px 22px var(--p-doit-inner),
             0 20px 60px -8px var(--p-glow);
}
.doit:hover .ring{border-color:var(--p-doit-ring-hi); box-shadow:0 0 22px var(--p-glow), inset 0 0 16px var(--p-glow)}
.doit:hover .shine::before{animation:p-sweep .85s cubic-bezier(.3,.6,.2,1) forwards}
.doit:active{transform:translateY(0) scale(.99)}
.doit:focus-visible{outline:2px solid var(--p-doit-ring-hi); outline-offset:4px}
.doit.sm{--pad-y:12px; --pad-x:24px; font-size:.94rem}
.doit.lg{--pad-y:20px; --pad-x:48px; font-size:1.28rem}

/* Secondary actions stay the same component, just quieter — a different weight
   of the same button, never a different button. */
.doit.ghost .shell{background:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.doit.ghost .ring{border-color:color-mix(in srgb, var(--p-doit-ring) 55%, transparent); box-shadow:none}
.doit.ghost{color:var(--txt-hi, var(--ink, inherit)) !important; text-shadow:none}
.doit.ghost:hover .ring{border-color:var(--p-doit-ring); box-shadow:0 0 16px var(--p-glow)}

.doit .btn-spin{
  display:none; width:18px; height:18px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--p-doit-text) 30%, transparent);
  border-top-color:var(--p-doit-text); animation:p-spin .7s linear infinite;
}
.doit.loading{cursor:default}
.doit.loading .btn-label, .doit.loading #trialBtnLabel{opacity:0}
.doit.loading .btn-spin{display:block}

@keyframes p-sweep{to{inset-inline-start:130%}}
@keyframes p-spin{to{transform:rotate(360deg)}}

/* --- the Do It button, Glance-tuned ----------------------------------------
   Same shell/ring/shine construction as .doit — Glance is family, not a
   different button — but tuned for "a glance": a thinner ring, a shorter
   glow throw, and a quicker hover response than Flow's heavier, more
   deliberate original. The weight difference is the point, not an oversight.
   ------------------------------------------------------------------------- */
.doit.glance{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.doit.glance .shell{box-shadow:inset 0 1.5px 0 var(--p-doit-gloss), inset 0 -9px 20px var(--p-doit-inner), 0 10px 30px -10px var(--p-glow); transition:box-shadow .22s}
.doit.glance .ring{inset:4px; border-width:1.5px; box-shadow:0 0 8px var(--p-glow), inset 0 0 0 1px rgba(255,255,255,.24), inset 0 0 7px color-mix(in srgb, var(--p-doit-ring) 38%, transparent); transition:box-shadow .22s, border-color .22s}
.doit.glance:hover{transform:translateY(-1.5px) scale(1.025)}
.doit.glance:hover .shell{box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -8px 18px var(--p-doit-inner), 0 14px 36px -8px var(--p-glow)}
.doit.glance:hover .ring{box-shadow:0 0 14px var(--p-glow), inset 0 0 10px var(--p-glow)}
.doit.glance:hover .shine::before{animation-duration:.6s}

/* Legacy .btn is gone from the markup; this remains only so a stray one would
   still look like it belongs rather than like a browser default. */
.btn{
  position:relative; border-radius:999px; letter-spacing:.01em;
  background:linear-gradient(180deg, color-mix(in srgb, var(--cat,#1A4EF5) 88%, #ffffff), var(--cat,#1A4EF5)) !important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.42), 0 16px 40px -14px var(--p-glow);
  transition:transform .3s var(--p-ease), box-shadow .3s var(--p-ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--p-ring); outline-offset:3px}

/* --- details / FAQ -------------------------------------------------------- */
details{border-radius:14px; transition:border-color .3s var(--p-ease)}
details[open]{border-color:var(--p-line-hi) !important}
summary{cursor:pointer; transition:color .2s}
summary:focus-visible{outline:2px solid var(--p-ring); outline-offset:2px; border-radius:8px}

/* --- code / tables / quotes ---------------------------------------------- */
article blockquote{
  margin:26px 0; padding:16px 20px; border-radius:12px;
  border-inline-start:3px solid var(--accent-2, var(--accent, #3B74FF));
  background:linear-gradient(180deg, var(--p-top), var(--p-bot));
  box-shadow:var(--p-shadow);
}
article table{border-collapse:separate; border-spacing:0; width:100%; border-radius:12px; overflow:hidden; box-shadow:var(--p-shadow); margin:24px 0}
article th{background:linear-gradient(180deg, var(--p-top), var(--p-bot)); text-align:start}
article th, article td{padding:11px 14px; border-bottom:1px solid var(--p-line)}
article tr:last-child td{border-bottom:0}

/* --- footer --------------------------------------------------------------- */
footer.site{position:relative; padding-top:44px}
footer.site::before{
  content:""; position:absolute; inset-inline:0; inset-block-start:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--p-line-hi), transparent);
}
footer.site a{transition:color .22s}
footer.site a:hover{color:var(--accent-2,#3B74FF)}

/* --- motion --------------------------------------------------------------- */
/* .p-reveal is added from flow-premium.js only below the first viewport.
   Above-the-fold title, lead and note stay at opacity 1 with no JS wait. */
.p-reveal{opacity:0; transform:translateY(16px); transition:opacity .7s var(--p-ease), transform .7s var(--p-ease)}
.p-reveal.p-in{opacity:1; transform:none}
.p-reveal[data-d="1"]{transition-delay:.06s}
.p-reveal[data-d="2"]{transition-delay:.12s}
.p-reveal[data-d="3"]{transition-delay:.18s}
.p-reveal[data-d="4"]{transition-delay:.24s}

@media (prefers-reduced-motion: reduce){
  .p-reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .card:hover, .stepcard:hover, .choicepanel:hover, .btn:hover, .theme-btn:hover, .menu-btn:hover{transform:none}
  .p-progress{transition:none}
  #p-net{display:none}
}

/* Phones: the ambient canvas is decoration, and decoration is the first thing
   that should go when the compositor is under pressure. */
@media (max-width:640px){
  #p-net{opacity:.32}
  .card::before, .cta::before, .specimen::before, .installbox::before, .formcard::before{display:none}
}