/* dialpipeline.com, every page: the site sits in a browser window floating in a moving sky.
   Loaded by / and /for/*. The palette is the :root block at the top. */
/* The sky's colours, in one place. C, Indigo violet: David's pick, 2026-10-04 ("more purple and
   dark than blue"), from four renders on the live page. */
:root {
  --sky-base: #040309; --sky-1: rgba(108,80,255,.22); --sky-2: rgba(70,64,220,.18); --sky-3: rgba(130,90,255,.14);
  --aura-1: rgba(108,80,255,.24); --aura-2: rgba(72,66,230,.20);
  --gal-core: rgba(214,210,255,.18); --gal-ring: rgba(128,100,255,.12); --gal-arm1: rgba(128,100,255,.18); --gal-arm2: rgba(80,84,240,.16);
  --tag: #D6D4FF; --tag-glow: rgba(120,100,255,.65);
  --edge-line: rgba(130,125,255,.36); --edge-ring: rgba(100,80,255,.12); --edge-glow: rgba(100,80,255,.30); --edge-in: rgba(100,80,255,.08);
  --wave-a: #8C70FF; --wave-b: #B0A8FF; --wave-c: #6C68F0; --wave-glow: #7C70FF;
}
/* The frame: the site sits in a browser window floating in space. The page still scrolls
   natively; a fixed backdrop with a window-shaped hole covers everything outside the window. */
:root { --fx: 10px; --fy0: 54px; --fb: 14px; --bar0: 38px; --fr: 18px; --fy: var(--fy0); --bar: var(--bar0); }
@media (min-width: 900px) { :root { --fx: 56px; --fy0: 88px; --fb: 32px; --bar0: 42px; } }
/* Phones have a real browser bar right above ours: the window keeps its sky and edge, not a second bar. */
@media (max-width: 899px) { :root { --bar0: 0px; } html .fr-bar { display: none; } }
/* Flow uses the starting size; only fixed pieces follow the live size, so nothing reflows. */
html.framed body { padding: calc(var(--fy0) + var(--bar0)) var(--fx) var(--fb); }
html.framed header { top: calc(var(--fy) + var(--bar)); left: var(--fx); right: var(--fx); }
html.framed .hero { min-height: calc(100svh - var(--fy0) - var(--bar0) - var(--fb)); }
html.framed.lanes-on .lane-pin { top: calc(var(--fy) + var(--bar)); height: calc(100svh - var(--fy) - var(--bar) - var(--fb)); }
html.framed .lane-dots { bottom: calc(var(--fb) + 14px + env(safe-area-inset-bottom, 0px)); }
html.framed .sheet { z-index: 69; inset: calc(var(--fy) + var(--bar)) var(--fx) var(--fb); border-radius: 0 0 var(--fr) var(--fr); padding: 14px 18px 22px; animation: sheet-in .22s ease both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.fr-bar span { transition: height .2s ease; }
html.fr-tight .fr-bar i { width: 7px; height: 7px; }
html.fr-tight .fr-bar span { height: 20px; font-size: 11px; }
.fr-sky .tag { transition: opacity .2s ease; }
html.fr-tight .fr-sky .tag { opacity: 0; }
.fr-aura { position: absolute; inset: 0; background:
    radial-gradient(55% 35% at 8% 40%, var(--aura-1), transparent 70%),
    radial-gradient(45% 30% at 95% 70%, var(--aura-2), transparent 70%);
  transition: filter .8s ease, opacity .8s ease; }
  .fr-sky[data-sec="pricing"] .fr-aura { filter: brightness(1.35); }
.fr-sky[data-sec="start"] .fr-aura { filter: brightness(1.25) saturate(1.2); }
.fr-sky[data-sec="calls"] .fr-aura, .fr-sky[data-sec="how"] .fr-aura { filter: brightness(1.3); }
.fr-sky { position: fixed; inset: 0; z-index: 70; pointer-events: none; background:
    radial-gradient(60% 40% at 12% 30%, var(--sky-1), transparent 70%),
    radial-gradient(50% 35% at 92% 62%, var(--sky-2), transparent 70%),
    radial-gradient(80% 50% at 50% 0%, var(--sky-3), transparent 70%),
    var(--sky-base); }
/* The galaxy moves, and every move is a loop that lands where it started: the arms turn a
   full circle, each star layer drifts exactly one tile (so the next tile is the same sky),
   the bright stars twinkle back and forth, and a shooting star crosses now and then. */
.fr-gal { position: absolute; left: 50%; top: 50%; width: 230vmax; height: 230vmax; margin: -115vmax 0 0 -115vmax; opacity: .95;
  background:
    radial-gradient(closest-side, var(--gal-core), var(--gal-ring) 35%, transparent 72%) center / 46% 13% no-repeat,
    conic-gradient(from 0deg, transparent 0 8%, var(--gal-arm1) 17%, transparent 29%, transparent 50%, var(--gal-arm2) 66%, transparent 79%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 74%); mask-image: radial-gradient(closest-side, #000 18%, transparent 74%);
  animation: fr-turn 240s linear infinite; }
@keyframes fr-turn { to { transform: rotate(360deg); } }
.fr-st { position: absolute; inset: -440px; will-change: transform; }
.fr-st.s1 { background: radial-gradient(1.1px 1.1px at 12px 9px, rgba(255,255,255,0.72), transparent 75%), radial-gradient(1.1px 1.1px at 41px 33px, rgba(207,216,255,0.72), transparent 75%), radial-gradient(1.1px 1.1px at 88px 14px, rgba(143,168,255,0.72), transparent 75%), radial-gradient(1.1px 1.1px at 140px 61px, rgba(255,255,255,0.72), transparent 75%), radial-gradient(1.1px 1.1px at 23px 102px, rgba(207,216,255,0.72), transparent 75%), radial-gradient(1.1px 1.1px at 77px 131px, rgba(143,168,255,0.72), transparent 75%), radial-gradient(1.1px 1.1px at 163px 118px, rgba(255,255,255,0.72), transparent 75%), radial-gradient(1.1px 1.1px at 118px 152px, rgba(207,216,255,0.72), transparent 75%), radial-gradient(1.1px 1.1px at 180px 22px, rgba(143,168,255,0.72), transparent 75%), radial-gradient(1.1px 1.1px at 57px 74px, rgba(255,255,255,0.72), transparent 75%); background-size: 197px 167px; animation: fr-d1 220s linear infinite; }
.fr-st.s2 { background: radial-gradient(1.5px 1.5px at 60px 70px, rgba(255,255,255,0.88), transparent 75%), radial-gradient(1.5px 1.5px at 17px 192px, rgba(207,216,255,0.88), transparent 75%), radial-gradient(1.5px 1.5px at 201px 31px, rgba(143,168,255,0.88), transparent 75%), radial-gradient(1.5px 1.5px at 262px 151px, rgba(255,255,255,0.88), transparent 75%), radial-gradient(1.5px 1.5px at 134px 240px, rgba(207,216,255,0.88), transparent 75%), radial-gradient(1.5px 1.5px at 290px 262px, rgba(143,168,255,0.88), transparent 75%), radial-gradient(1.5px 1.5px at 98px 128px, rgba(255,255,255,0.88), transparent 75%); background-size: 313px 277px; animation: fr-d2 140s linear infinite; }
.fr-st.s3 { background: radial-gradient(2px 2px at 40px 20px, #fff, rgba(143,168,255,.6) 40%, transparent 75%), radial-gradient(2px 2px at 250px 140px, #fff, rgba(143,168,255,.6) 40%, transparent 75%), radial-gradient(2px 2px at 120px 300px, #fff, rgba(143,168,255,.6) 40%, transparent 75%), radial-gradient(2px 2px at 360px 250px, #fff, rgba(143,168,255,.6) 40%, transparent 75%); background-size: 419px 353px; animation: fr-d3 80s linear infinite; }
.fr-st.t1, .fr-st.t2 { background-size: 419px 353px; animation: fr-d3 80s linear infinite, fr-tw 3.6s ease-in-out infinite alternate; }
.fr-st.t1 { background-image: radial-gradient(3px 3px at 95px 160px, #fff, rgba(143,168,255,.55) 35%, transparent 75%); }
.fr-st.t2 { background-image: radial-gradient(2.6px 2.6px at 310px 60px, #fff, rgba(124,108,255,.55) 35%, transparent 75%); animation-delay: 0s, -1.8s; animation-duration: 80s, 4.7s; }
@keyframes fr-d1 { to { transform: translate3d(-197px, -167px, 0); } }
@keyframes fr-d2 { to { transform: translate3d(-313px, -277px, 0); } }
@keyframes fr-d3 { to { transform: translate3d(-419px, -353px, 0); } }
@keyframes fr-tw { from { opacity: .15; } to { opacity: 1; } }
.fr-shoot { position: absolute; left: -20%; top: 3%; width: 160px; height: 1.5px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(207,216,255,.95)); box-shadow: 0 0 8px rgba(143,168,255,.8);
  transform: rotate(4deg); animation: fr-shoot 13s linear infinite 4s; }
@keyframes fr-shoot {
  0%, 82% { opacity: 0; transform: translate3d(0, 0, 0) rotate(4deg); }
  84% { opacity: 1; }
  92% { opacity: 0; transform: translate3d(95vw, 6.6vw, 0) rotate(4deg); }
  100% { opacity: 0; transform: translate3d(95vw, 6.6vw, 0) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .fr-sky * { animation: none !important; } }
.fr-sky svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fr-sky .wave { fill: none; stroke-linecap: round; }
.fr-sky .tag { position: absolute; left: 0; right: 0; top: calc(var(--fy) / 2); transform: translateY(-50%); text-align: center; font: 600 13px var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--tag); text-shadow: 0 0 18px var(--tag-glow); }
.fr-bar { position: fixed; z-index: 71; left: var(--fx); right: var(--fx); top: var(--fy); height: var(--bar); border-radius: var(--fr) var(--fr) 0 0; background: linear-gradient(180deg, #121A2C, #0B1220); border: 1px solid rgba(120,150,255,.35); border-bottom-color: rgba(120,150,255,.18); display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.fr-bar i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.fr-bar i:nth-child(1) { background: #FF5F57; } .fr-bar i:nth-child(2) { background: #FEBC2E; } .fr-bar i:nth-child(3) { background: #28C840; }
.fr-bar span { flex: 1; min-width: 0; height: 24px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 6px; padding: 0 10px; font: 500 12px var(--sans); color: #C9D3EC; white-space: nowrap; overflow: hidden; }
.fr-bar span svg { width: 11px; height: 11px; flex: none; opacity: .7; }
.fr-edge { position: fixed; z-index: 71; left: var(--fx); right: var(--fx); top: var(--fy); bottom: var(--fb); border-radius: var(--fr); border: 1px solid var(--edge-line); box-shadow: 0 0 0 1px var(--edge-ring), 0 0 40px var(--edge-glow), inset 0 0 30px var(--edge-in); pointer-events: none; }