/* Look First Sites. Base: AuthKit (lit glass, glows) + Origin Financial (night-sky atmosphere, white pills). Type: Inter Tight + Inter. */
:root {
  color-scheme: dark;
  --ink: #0f1011;        /* page */
  --raised: #17181b;     /* panels */
  --white: #ffffff;
  --mist: #d8e4f4;       /* body text */
  --muted: #9aa3b5;      /* secondary text */
  --line: rgba(186, 215, 247, .14);
  --indigo: #4b49aa;     /* sky glow */
  --haze: #90b8f0;       /* sky glow */
  --violet: #847dff;     /* decorative only */
  --ocean: #00b3dd;      /* decorative only */
  --rose: #dd90d8;       /* decorative only */
  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, sans-serif;
  --p: 0;                /* scroll progress of the hero, set by main.js */
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--ink); scroll-behavior: smooth; }
body { color: var(--mist); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--haze); outline-offset: 3px; border-radius: 999px; }

/* Nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(16px, 4vw, 48px); background: rgba(15, 16, 17, .55); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); }
.logo { font: 600 21px/1 var(--display); color: var(--white); letter-spacing: -.03em; }
.nav .logo { display: inline-flex; align-items: center; gap: 10px; }
.nav .logo img { border-radius: 8px; }
.nav nav { display: flex; gap: 22px; align-items: center; font-size: 15px; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Tubelight menu (21st.dev "Tubelight Navbar", ayushmxxn): a glass pill with a lit tube over one link.
   main.js moves the light to the link you point at, or else to the section on screen. */
.tube { position: relative; display: flex; gap: 6px; padding: 4px; list-style: none; border-radius: 999px; background: rgba(186, 214, 247, .04); border: 1px solid var(--line);
  backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.tube a { position: relative; z-index: 1; display: flex; align-items: center; padding: 7px 20px; border-radius: 999px; font-size: 14px; font-weight: 500;
  white-space: nowrap; color: rgba(216, 228, 244, .8); transition: color .2s; }
.tube a:hover, .tube a.on { color: var(--haze); }
.tube a .ic { display: none; }
.tube .mark { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; opacity: 0; background: rgba(144, 184, 240, .1);
  transition: opacity .2s, left .45s cubic-bezier(.3, 1.2, .5, 1), width .45s cubic-bezier(.3, 1.2, .5, 1); } /* opacity first: main.js fades it in alone */
.tube .mark i { position: absolute; top: -9px; left: 50%; width: 32px; height: 4px; margin-left: -16px; border-radius: 4px 4px 0 0; background: var(--haze);
  box-shadow: 0 0 10px 2px rgba(144, 184, 240, .55); }
.tube .mark i::before, .tube .mark i::after { content: ""; position: absolute; border-radius: 999px; background: rgba(144, 184, 240, .25); }
.tube .mark i::before { width: 48px; height: 24px; top: -8px; left: -8px; filter: blur(12px); }
.tube .mark i::after { width: 32px; height: 24px; top: -4px; left: 0; filter: blur(12px); background: rgba(132, 125, 255, .25); }

/* Buttons: Flow button (21st.dev "FlowButton", xubohuah). On hover a circle fills it from the middle, the corners square off,
   and an arrow slides in from the left as the right one leaves. Sizes are the site's own, so the arrows sit closer in than the original. */
.pill { --ease: cubic-bezier(.23, 1, .32, 1); --nudge: 10px; --edge: 12px; --arrow: 14px; position: relative; isolation: isolate; display: inline-flex; align-items: center;
  height: 44px; padding: 0 22px; overflow: hidden; border-radius: 100px; font: 500 15px var(--sans); cursor: pointer;
  transition: border-radius .6s var(--ease), color .6s var(--ease), box-shadow .6s var(--ease), transform .2s; }
.pill:active { transform: scale(.95); }
.pill > span { position: relative; z-index: 1; transform: translateX(calc(var(--nudge) * -1)); transition: transform .8s ease-out; }
.pill > i { position: absolute; z-index: 0; top: 50%; left: 50%; width: 16px; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; opacity: 0;
  transition: width .8s cubic-bezier(.19, 1, .22, 1), opacity .8s cubic-bezier(.19, 1, .22, 1); }
.pill .ic { position: absolute; z-index: 2; width: var(--arrow); height: var(--arrow); transition: left .8s cubic-bezier(.34, 1.56, .64, 1), right .8s cubic-bezier(.34, 1.56, .64, 1); }
.pill .in { left: -25%; }
.pill .out { right: var(--edge); }
.pill:is(:hover, :focus-visible) { border-radius: 12px; box-shadow: 0 0 26px rgba(132, 125, 255, .45); }
.pill:is(:hover, :focus-visible) > span { transform: translateX(var(--nudge)); }
.pill:is(:hover, :focus-visible) > i { width: max(320px, 120%); opacity: 1; } /* 120%: still reaches the corners of the full-width buttons */
.pill:is(:hover, :focus-visible) .in { left: var(--edge); }
.pill:is(:hover, :focus-visible) .out { right: -25%; }
.pill.solid { background: var(--white); color: #000; }
.pill.solid > i { background: linear-gradient(135deg, var(--violet), var(--indigo)); }
.pill.solid:is(:hover, :focus-visible) { color: var(--white); }
.pill.ghost { color: var(--white); background: rgba(186, 214, 247, .06); box-shadow: inset rgba(186, 215, 247, .28) 0 0 0 1px; }
.pill.ghost > i { background: var(--haze); }
.pill.ghost:is(:hover, :focus-visible) { color: var(--ink); box-shadow: inset rgba(186, 215, 247, 0) 0 0 0 1px, 0 0 26px rgba(132, 125, 255, .45); } /* same shadow list, so it fades */
.nav .pill { --nudge: 7px; --edge: 7px; --arrow: 12px; height: 38px; padding: 0 16px; font-size: 14px; }

/* The pinned scroll stage */
.reveal { height: 360vh; position: relative; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; } /* dvh: grows when a phone's address bar hides, so no gap opens under the hero */
.sky { position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 70% 0%, rgba(144, 184, 240, .22), transparent 70%),
    radial-gradient(50% 60% at 15% 10%, rgba(75, 73, 170, .45), transparent 70%),
    radial-gradient(80% 60% at 50% 110%, rgba(132, 125, 255, .14), transparent 70%),
    var(--ink); }
.sky::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; opacity: .35;
  mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); }

/* Hero beam: same light as the footer. --hb is set by main.js; the headline is lit where the beam crosses it. */
.sticky { --hb: -20%; }
.hero-beam { position: absolute; inset: 0; pointer-events: none; filter: blur(22px);
  background: linear-gradient(118deg, transparent calc(var(--hb) - 12%), rgba(132, 125, 255, .12) calc(var(--hb) - 5%), rgba(144, 184, 240, .34) var(--hb), rgba(132, 125, 255, .1) calc(var(--hb) + 4%), transparent calc(var(--hb) + 10%)); }
.copy h1 { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(118deg, transparent calc(var(--hb) - 10%), rgba(255, 255, 255, .9) calc(var(--hb) - 2.5%), #fff var(--hb), rgba(255, 255, 255, .5) calc(var(--hb) + 4%), transparent calc(var(--hb) + 10%)),
    linear-gradient(180deg, #98a3bd, #616c88);
  background-size: var(--fw, 100%) var(--fh, 100%), 100% 100%; background-position: calc(var(--wx, 0px) * -1) calc(var(--wy, 0px) * -1), 0 0; background-repeat: no-repeat; }
.hero { position: relative; height: 100%; max-width: 1200px; margin: 0 auto; padding: 96px clamp(16px, 4vw, 48px) 32px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 48px; }
h1 { font: 600 clamp(46px, 7vw, 100px)/.95 var(--display); color: var(--white); letter-spacing: -.045em; max-width: 9.5ch; text-wrap: balance; }
.copy > p { margin-top: 28px; max-width: 34ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--mist); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* Phone: lit from above, soft halo */
.phone { justify-self: center; position: relative; width: min(300px, 100%); aspect-ratio: 9 / 19; border-radius: 48px; padding: 10px;
  background: linear-gradient(160deg, #23252b, #0c0d10 60%);
  box-shadow: inset rgba(216, 236, 248, .22) 0 1px 1px, inset rgba(168, 216, 245, .06) 0 24px 48px,
              rgba(0, 0, 0, .55) 0 30px 60px, rgba(132, 125, 255, .18) 0 0 120px 20px; }
.screen { height: 100%; border-radius: 39px; background: #050608; padding: 54px 14px 16px; overflow: hidden;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: #f2f4f8; }
.thread-head { display: flex; gap: 10px; align-items: center; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-weight: 600; font-size: 14px; line-height: 1.2; }
.thread-head small { font-weight: 400; color: #8b93a3; font-size: 12px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, var(--violet), var(--indigo)); }
.msg { background: #1d1f25; border-radius: 18px 18px 18px 5px; padding: 9px 13px; margin-top: 8px; max-width: 86%; }
.card { display: block; margin-top: 8px; width: 86%; border-radius: 16px; overflow: hidden; background: #1d1f25; }
.thumb { display: block; height: 96px;
  background: radial-gradient(70% 90% at 30% 0%, rgba(144, 184, 240, .55), transparent 70%), linear-gradient(135deg, var(--indigo), #1b1c3a); }
.url { display: block; padding: 8px 12px; font-size: 12px; color: #c2c8d4; }
/* Animated by main.js: these start hidden, then appear in order */
.msg, .card { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease, box-shadow .3s ease; }
.is-on { opacity: 1; transform: none; }
.card.tapped { box-shadow: rgba(132, 125, 255, .6) 0 0 22px 2px; transform: scale(.97); }

/* What the link opens into: a browser window that stops short of full screen. main.js grows it out of the
   link card with clip-path, fades in the lift and the dim behind it, and sets --x (where the line sits, 0–100). */
.box { position: absolute; z-index: 5; left: 50%; top: calc(50% + 10px); transform: translate(-50%, -50%);
  width: min(1120px, calc(100% - 2 * clamp(16px, 4vw, 48px))); height: min(640px, calc(100% - 190px)); border-radius: 18px; }
.dim { position: absolute; inset: 0; z-index: 4; background: rgba(9, 10, 12, .88); opacity: 0; pointer-events: none; }
.lift { z-index: 4; opacity: 0; background: var(--ink); pointer-events: none;
  box-shadow: rgba(0, 0, 0, .29) 0 9px 20px, rgba(0, 0, 0, .26) 0 37px 37px, rgba(0, 0, 0, .15) 0 84px 50px,
              rgba(132, 125, 255, .3) 0 0 90px 6px, rgba(144, 184, 240, .14) 0 -24px 70px; }
.opened { --x: 0; visibility: hidden; overflow: hidden; background: var(--ink); }
.opened::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  box-shadow: inset rgba(216, 230, 248, .22) 0 0 0 1px, inset rgba(216, 236, 248, .1) 0 1px 0 1px; } /* the stroke */
.opened.live { cursor: ew-resize; touch-action: pan-y; user-select: none; }
.bar { position: absolute; inset: 0 0 auto; height: 44px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 0 14px; font-size: 12px; background: #17181c; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.bar-side { display: flex; align-items: center; gap: 14px; }
.bar-side.end { justify-content: flex-end; }
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #34363d; }
.address { display: flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 8px; color: var(--mist); background: rgba(255, 255, 255, .06); white-space: nowrap; }
.address svg { color: var(--muted); }
.address small { margin-left: 4px; padding-left: 9px; border-left: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.view { position: absolute; inset: 44px 0 0; overflow: hidden; }
.site { position: absolute; inset: 0; overflow: hidden; isolation: isolate; } /* keeps each site's layers inside it */

/* The new site: a sample gym, made up for this page (layout after our Evolve demo: full-bleed photo, copy on the quiet side) */
.new-site { color: #c9ced8; background: #0d0f13; }
.ns-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 35%; }
.new-site::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(10, 11, 14, .92), rgba(10, 11, 14, .72) 36%, rgba(10, 11, 14, 0) 66%),
              linear-gradient(0deg, rgba(10, 11, 14, .85), rgba(10, 11, 14, 0) 34%); }
.ns-nav, .ns-hero, .ns-classes { position: relative; z-index: 2; }
.ns-nav { display: flex; align-items: center; gap: 24px; padding: 16px clamp(18px, 3vw, 36px); font-size: 14px; }
.ns-nav b { margin-right: auto; font: 600 19px/1 var(--display); color: #fff; letter-spacing: -.02em; }
.new-site i { font-style: normal; font-weight: 500; color: #1a0c05; background: #ff7a45; padding: 9px 18px; border-radius: 999px; }
.ns-hero { max-width: 540px; padding: clamp(12px, 5vh, 56px) clamp(18px, 3vw, 36px) 0; }
.ns-kicker { font-size: 14px; color: #ff9a70; }
.new-site h2 { margin-top: 12px; font: 600 clamp(30px, min(4.4vw, 7vh), 60px)/.95 var(--display); color: #fff; letter-spacing: -.045em; text-wrap: balance; }
.ns-hero > p:not(.ns-kicker) { margin-top: 16px; max-width: 36ch; font-size: clamp(15px, 1.3vw, 17px); }
.ns-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ns-actions span { padding: 9px 18px; border-radius: 999px; color: #fff; box-shadow: inset rgba(255, 255, 255, .3) 0 0 0 1px; }
.ns-classes { position: absolute; left: clamp(18px, 3vw, 36px); right: clamp(18px, 3vw, 36px); bottom: 18px; display: flex; gap: 12px; }
.ns-classes > span { flex: 0 1 240px; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; font-size: 13px;
  background: rgba(13, 15, 19, .78); box-shadow: inset rgba(255, 255, 255, .1) 0 0 0 1px; }
.ns-classes img { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; }
.ns-classes b { display: block; font: 600 15px/1.3 var(--sans); color: #fff; }

/* The old site: the same photos, the way a dated small-business site uses them. Shown left of the line. */
.old-site { clip-path: inset(0 calc(100% - var(--x) * 1%) 0 0); padding: 10px clamp(10px, 2vw, 20px); text-align: center; color: #111;
  font: 15px/1.3 "Times New Roman", Times, serif; background: repeating-conic-gradient(#cdcdcd 0 25%, #c1c1c1 0 50%) 0 0 / 14px 14px; }
.os-bar { padding: 8px; font: bold 26px/1 "Arial Black", Arial, sans-serif; letter-spacing: .08em; color: #ff0; background: #000080; border: 3px outset #8080ff; }
.os-nav { margin-top: 8px; padding: 5px; background: #e4e4e4; border: 2px outset #fff; font-size: 14px; }
.old-site u { color: #0000ee; }
.os-ticker { margin-top: 10px; font-weight: bold; color: #e00000; }
.os-hero { display: block; width: 100%; height: 24%; margin-top: 10px; object-fit: fill; border: 4px ridge #8080ff; filter: saturate(1.5) contrast(1.15); }
.old-site h2 { margin-top: 12px; font: bold clamp(22px, 2.8vw, 34px)/1.15 "Times New Roman", Times, serif; color: #800000; text-decoration: underline; }
.old-site > p:not(.os-ticker) { max-width: 46ch; margin: 8px auto 0; }
.os-thumbs { display: flex; justify-content: center; gap: 18px; margin-top: 12px; font-size: 14px; }
.os-thumbs img { display: block; width: 92px; height: 92px; margin-bottom: 3px; object-fit: fill; border: 3px solid #0000ee; filter: saturate(1.4); }
.old-site > .os-small { margin-top: 12px; font-size: 12px; color: #333; }

/* Labels in the window bar, and the line. Labels fade when their side gets narrow (opacity set by main.js). */
.tag { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: #fff;
  background: rgba(255, 255, 255, .06); box-shadow: inset rgba(255, 255, 255, .22) 0 0 0 1px; opacity: 0; transition: opacity .3s; }
.divider { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); z-index: 3; width: 2px; margin-left: -1px; pointer-events: none;
  background: rgba(255, 255, 255, .92); box-shadow: 0 0 14px rgba(144, 184, 240, .8); opacity: 0; transition: opacity .4s; }
.opened.live .divider { opacity: 1; }
.handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; color: #fff; cursor: ew-resize; pointer-events: auto;
  background: rgba(15, 16, 17, .6); backdrop-filter: blur(6px); border: 1.5px solid rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 6px rgba(132, 125, 255, .18), 0 0 26px rgba(132, 125, 255, .45); }
.handle:focus-visible { outline: 2px solid var(--haze); outline-offset: 4px; }

/* Scroll cue: pulses gently until the hero lets go */
.keep { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 6px; pointer-events: none;
  font-size: 13px; color: var(--mist); padding: 8px 14px; border-radius: 999px; background: rgba(5, 6, 15, .55); box-shadow: inset rgba(186, 215, 247, .18) 0 0 0 1px; backdrop-filter: blur(8px);
  animation: keep-pulse 1.8s ease-in-out infinite; transition: opacity .3s; }
.keep.gone { opacity: 0; animation: none; }
@keyframes keep-pulse { 50% { opacity: .35; } }

/* Sections below the hero: left heading, right content */
.band { position: relative; padding: clamp(88px, 12vw, 160px) 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.lead { position: sticky; top: 120px; }
h2 { font: 600 clamp(38px, 4.8vw, 68px)/1 var(--display); color: var(--white); letter-spacing: -.04em; text-wrap: balance; }
.lead p { margin-top: 20px; max-width: 30ch; color: var(--muted); }
.lead a { color: var(--white); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--haze); }
.how { background: radial-gradient(50% 40% at 0% 0%, rgba(75, 73, 170, .28), transparent 70%); }
.faq { background: radial-gradient(45% 50% at 100% 20%, rgba(144, 184, 240, .1), transparent 70%); }
.contact { background: radial-gradient(60% 60% at 80% 60%, rgba(132, 125, 255, .16), transparent 70%); }
.why { background: radial-gradient(45% 50% at 100% 30%, rgba(75, 73, 170, .22), transparent 70%); }

.analysis { background: radial-gradient(50% 50% at 0% 60%, rgba(144, 184, 240, .1), transparent 70%); }

/* Why look first: three ways compared. Our column sits on a lit glass panel (.us-col, behind the table);
   when main.js adds .on, a band of light runs down it and our answers brighten row by row. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.why-head h2 { max-width: 14ch; }
.why-head p { margin-top: 20px; max-width: 46ch; color: var(--muted); }
.compare { position: relative; margin-top: clamp(56px, 6vw, 80px); }
.us-col { position: absolute; top: -20px; bottom: -20px; left: 54%; width: 23%; border-radius: 24px; overflow: hidden;
  background: radial-gradient(120% 40% at 50% 0%, rgba(132, 125, 255, .3), transparent 70%), rgba(22, 22, 58, .85);
  box-shadow: inset 0 2px rgba(196, 190, 255, .9), inset 0 0 0 1px rgba(144, 184, 240, .3), 0 40px 100px -30px rgba(132, 125, 255, .5); } /* top line matches the other columns' caps */
.us-col::after { content: ""; position: absolute; left: 0; right: 0; top: -35%; height: 35%; filter: blur(8px);
  background: linear-gradient(180deg, transparent, rgba(144, 184, 240, .28) 55%, rgba(255, 255, 255, .35) 62%, transparent);
  transition: transform 1.8s cubic-bezier(.45, 0, .2, 1); }
.compare.on .us-col::after { transform: translateY(390%); }
.compare table { position: relative; width: 100%; border-collapse: collapse; table-layout: fixed; }
.c-label { width: 31%; }
.compare th, .compare td { padding: 20px 22px; text-align: left; vertical-align: middle; font-size: 15px; line-height: 1.45; }
.compare thead th { vertical-align: bottom; padding-bottom: 26px; text-align: center; font: 600 clamp(24px, 2.4vw, 29px)/1.15 var(--display); letter-spacing: -.02em; color: var(--white); } /* centred: the icon sits over the name, not over a ragged left edge */
.compare thead th span { display: block; margin-top: 12px; font: 400 13px/1.4 var(--sans); letter-spacing: 0; color: var(--muted); }
.compare thead th span::before { content: ""; display: block; width: 32px; height: 1px; margin: 0 auto 12px; background: currentColor; opacity: .5; } /* a short rule between the name and its tagline */
/* An icon over each name on a tinted tile: wrench for doing it yourself, code brackets for a developer, our logo for us. */
.compare thead th::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 18px; border-radius: 11px;
  background: var(--icon) center / 22px no-repeat, rgba(var(--c, 132, 125, 255), .14); box-shadow: inset 0 0 0 1px rgba(var(--c, 132, 125, 255), .4); }
.compare thead th:nth-child(2) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dd90d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }
.compare thead th:nth-child(4) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300b3dd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 18 6-6-6-6'/%3E%3Cpath d='m8 6-6 6 6 6'/%3E%3C/svg%3E"); }
.compare thead th.us::before { background: url("favicon.svg") center / contain no-repeat; box-shadow: 0 6px 20px -6px rgba(132, 125, 255, .8); }
.compare thead th.us { color: var(--white); }
.compare thead th.us span { color: var(--mist); }
.compare tbody tr { border-top: 1px solid var(--line); }
.compare tbody tr:first-child { border-top: 2px solid rgba(216, 230, 248, .22); } /* sets the column names apart from the rows */
.compare tbody th { font-weight: 500; color: var(--white); }
.compare tbody td { color: var(--muted); }
/* The other two columns each get a colour (a line over the name, a tint and an edge down the column) so a row reads across. */
.compare tr > :nth-child(2) { --c: 221, 144, 216; } /* do it yourself: rose */
.compare tr > :nth-child(4) { --c: 0, 179, 221; }   /* hire a developer: ocean */
/* The header cell is the column's cap: same tint, rounded top, the colour along its top edge. */
.compare thead th:is(:nth-child(2), :nth-child(4)) { padding-top: 30px; border-radius: 16px 16px 0 0; background: rgba(var(--c), .07);
  box-shadow: inset 0 2px rgba(var(--c), .75), inset 1px 0 rgba(var(--c), .28); }
.compare tbody td:is(:nth-child(2), :nth-child(4)) { background: rgba(var(--c), .045); box-shadow: inset 1px 0 rgba(var(--c), .28); }
.compare tbody tr:last-child td:is(:nth-child(2), :nth-child(4)) { border-radius: 0 0 16px 16px; }
.compare tbody tr:hover > th { background: rgba(186, 214, 247, .04); }
.compare tbody tr:hover > td:not(.us) { background: rgba(var(--c), .09); }
.compare td.us { color: var(--white); font-weight: 500; transition: opacity .5s calc(.12s + var(--i, 0) * .2s); }
.compare.armed td.us { opacity: .2; }
.compare.on td.us { opacity: 1; }
.yes, .no { white-space: nowrap; }
.yes { font-size: 0 !important; }
.compare td.yes { text-align: center; } /* a lone tick sits in the middle of its column, under the centred header */
.yes::before, .no::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.yes::before { margin-right: 0; width: 20px; height: 20px; color: var(--mist);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.us.yes::before { width: 28px; height: 28px; vertical-align: middle; -webkit-mask: none; mask: none; filter: drop-shadow(0 0 8px rgba(144, 184, 240, .6));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='13.5' fill='%2390b8f0' fill-opacity='.18' stroke='%2390b8f0' stroke-opacity='.5'/%3E%3Cpath d='M20 10 12 18l-4-4' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.no { white-space: normal; }
.no::before { opacity: .5;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.compare tfoot td { padding-top: 28px; padding-bottom: 6px; }
.compare td b { display: block; margin-bottom: 2px; font: 600 clamp(17px, 1.5vw, 19px)/1.25 var(--display); letter-spacing: -.02em; color: var(--mist); }
.compare td.us b { color: var(--white); }
.compare-note { margin-top: 44px; max-width: 70ch; font-size: 13px; color: var(--muted); }
.compare tfoot td.us { padding-left: 12px; padding-right: 12px; }
.compare tfoot .pill { width: 100%; height: auto; min-height: 44px; padding: 10px 26px; justify-content: center; /* 26px: room for the arrows if the label wraps */ text-align: center; line-height: 1.3; }

/* Free analysis: an example report with score rings that fill when it comes into view (main.js adds .on). */
.report { margin: 0; border-radius: 28px; padding: clamp(24px, 3.5vw, 40px);
  background: linear-gradient(180deg, rgba(186, 214, 247, .07), rgba(186, 214, 247, .02));
  box-shadow: inset rgba(216, 236, 248, .2) 0 1px 1px, inset 0 0 0 1px var(--line), rgba(0, 0, 0, .5) 0 30px 60px -20px; }
.report figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; font: 600 18px var(--display); color: var(--white); }
.report-note { font: 400 14px var(--sans); color: var(--muted); }
.scan-top { margin-top: 24px; display: flex; gap: 20px; align-items: center; color: var(--muted); line-height: 1.5; }
.scan-top strong { font: 600 20px var(--display); color: var(--white); letter-spacing: -.02em; }
.ring { position: relative; flex: none; width: 96px; }
.ring svg { display: block; width: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: rgba(186, 214, 247, .1); stroke-width: 9; }
.ring .bar { stroke: var(--violet); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px rgba(132, 125, 255, .7)); transition: stroke-dashoffset 1.4s cubic-bezier(.16, 1, .3, 1); }
.report.done .bar { stroke-dashoffset: calc(100 - var(--v)); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 30px var(--display); color: var(--white); letter-spacing: -.03em; }
/* Each check spins until main.js marks it .done, then shows pass (haze tick) or fail (rose cross) and what was measured. */
.checks { list-style: none; padding: 0; margin-top: 24px; border-top: 1px solid var(--line); }
.checks li { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--mist); }
.checks li:last-child { border-bottom: 0; padding-bottom: 0; }
.dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(186, 214, 247, .15); border-top-color: var(--haze); animation: spin .8s linear infinite;
  display: grid; place-items: center; font: 700 11px/1 var(--sans); color: #0b0c14; }
.checks li:not(.done) .dot { animation-play-state: var(--scan, paused); }
.report.on { --scan: running; }
.checks li.done .dot { animation: none; border: 0; background: var(--rose); box-shadow: 0 0 10px rgba(221, 144, 216, .55); }
.checks li.done .dot::after { content: "\2715"; }
.checks li.done[data-ok] .dot { background: var(--haze); box-shadow: 0 0 10px rgba(144, 184, 240, .55); }
.checks li.done[data-ok] .dot::after { content: "\2713"; }
.val { font-size: 14px; color: var(--muted); text-align: right; opacity: 0; transition: opacity .3s; }
.checks li.done .val { opacity: 1; }
.checks li.done:not([data-ok]) .val { color: #f0b8ec; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Who's behind this: a blurred copy of the face drifts toward the pointer (21st.dev glow card, without its refracting ring). */
.person { display: grid; gap: 18px; max-width: 56ch; }
.glow-card { --px: 0; --py: 0; position: relative; height: 240px; overflow: hidden; border-radius: 24px; isolation: isolate;
  background: var(--raised); box-shadow: inset 0 0 0 1px rgba(144, 184, 240, .35), 0 0 48px -12px rgba(132, 125, 255, .45); container-type: size; } /* the same lit edge and halo as an open question */
.face { flex: none; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(216, 230, 248, .25); }
.face.ghost { position: absolute; left: calc(50% - 52px); top: calc(50% - 52px); box-shadow: none; z-index: -1; pointer-events: none; opacity: .35;
  transform: translate(calc(var(--px) * 50cqi), calc(var(--py) * 50cqh)) scale(4); filter: blur(25px) saturate(2) brightness(1.2); will-change: transform; }
.glow-inner { height: 100%; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; color: var(--muted); line-height: 1.5; }
.glow-inner strong { font: 600 22px var(--display); color: var(--white); letter-spacing: -.02em; }
.person a, .foot-note a { color: var(--white); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--haze); }
.bio { display: grid; gap: 14px; font-size: 17px; color: var(--mist); }
.bio p:first-child { font: 500 clamp(19px, 1.8vw, 22px)/1.4 var(--display); color: var(--white); letter-spacing: -.01em; }
.reach { display: grid; margin-top: 6px; }
.reach div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.reach dt { color: var(--muted); }
.reach dd { margin: 0; color: var(--white); text-align: right; }

/* How it works: numbered rail that fills with light as you scroll (21st.dev "Growth Story Timeline") */
.steps { --fill: 0px; position: relative; list-style: none; padding: 0 0 0 64px; counter-reset: step; }
.steps::before, .steps::after { content: ""; position: absolute; left: 19px; top: 20px; width: 2px; border-radius: 2px; }
.steps::before { bottom: var(--end, 20px); background: var(--line); }
.steps::after { height: var(--fill); max-height: calc(100% - 20px - var(--end, 20px)); background: linear-gradient(var(--violet), var(--haze));
  box-shadow: 0 0 14px 1px rgba(132, 125, 255, .6); }
.step { position: relative; counter-increment: step; padding-bottom: clamp(48px, 7vw, 88px); }
.step:last-child { padding-bottom: 0; }
.step::before { content: counter(step); position: absolute; left: -64px; top: 0; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font: 600 15px var(--display); color: var(--muted); background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line); transition: color .4s, background .4s, box-shadow .4s; }
.step:last-child::before { left: -70px; top: -6px; width: 52px; height: 52px; font-size: 19px; } /* the finish: bigger, same centre on the rail */
.step.lit::before { color: var(--white); background: #24224f; box-shadow: inset 0 0 0 1px rgba(144, 184, 240, .6), 0 0 24px 2px rgba(132, 125, 255, .55); }
.step h3 { font: 600 clamp(24px, 2.6vw, 34px)/1.1 var(--display); color: var(--white); letter-spacing: -.03em; padding-top: 4px; }
.step p { margin-top: 12px; max-width: 46ch; color: var(--muted); transition: color .4s; }
.step.lit p { color: var(--mist); }

/* FAQ: native <details>; the open one lights up (21st.dev "Accordion Active Background") */
:root { interpolate-size: allow-keywords; }
.qs { display: grid; gap: 12px; }
.qs details { border-radius: 18px; background: rgba(186, 214, 247, .03); box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, box-shadow .3s; }
.qs details[open] { background: rgba(132, 125, 255, .08); box-shadow: inset 0 0 0 1px rgba(144, 184, 240, .35), 0 0 48px -12px rgba(132, 125, 255, .45); }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 24px; font: 500 clamp(17px, 1.5vw, 19px)/1.35 var(--sans); color: var(--white); border-radius: 18px; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 1.5px solid var(--haze); border-bottom: 1.5px solid var(--haze);
  transform: translateY(-3px) rotate(45deg); transition: transform .3s; }
.qs details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.qs details::details-content { height: 0; overflow: clip; transition: height .35s ease, content-visibility .35s allow-discrete; }
.qs details[open]::details-content { height: auto; }
.qs details p { padding: 0 24px 24px; max-width: 60ch; color: var(--mist); }

/* Contact: glass panel with a light that follows the pointer round its edge (21st.dev "Glowing Effect", Cursor style) */
@property --start { syntax: "<number>"; inherits: true; initial-value: 0; }
.where { font-size: 15px; }
.panel { --start: 0; --active: 0; position: relative; border-radius: 28px; padding: clamp(24px, 3.5vw, 40px);
  background: linear-gradient(180deg, rgba(186, 214, 247, .07), rgba(186, 214, 247, .02));
  box-shadow: inset rgba(216, 236, 248, .2) 0 1px 1px, inset 0 0 0 1px var(--line), rgba(0, 0, 0, .5) 0 30px 60px -20px;
  transition: --start .9s cubic-bezier(.16, 1, .3, 1); }
.glow-edge { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: var(--active); transition: opacity .4s;
  background: conic-gradient(from calc((var(--start) - 40) * 1deg), transparent 0deg, var(--violet) 20deg, var(--haze) 40deg, var(--rose) 60deg, transparent 80deg);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-composite: xor; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: block; font-size: 14px; font-weight: 500; color: var(--mist); }
.form label:nth-child(3) { grid-column: 1 / -1; }
.form label span { font-weight: 400; color: var(--muted); }
.form input { display: block; width: 100%; margin-top: 8px; height: 48px; padding: 0 16px; border: 0; border-radius: 12px; font: 400 16px var(--sans); color: var(--white);
  background: rgba(5, 6, 15, .45); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.form input::placeholder { color: #626a7c; }
.form input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--haze), 0 0 0 4px rgba(144, 184, 240, .15); }
.form button { justify-self: start; border: 0; cursor: pointer; margin-top: 6px; }
.status { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.status:empty { display: none; }

/* Footer: a slow beam of light through a giant, bottom-cropped wordmark (21st.dev "Light Beam Footer") */
.foot { --b: 58%; --px: 50%; --py: 50%; --g: 0; position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(56px, 8vw, 96px);
  background: #05060f; border-top: 1px solid var(--line); }
.foot-sky { position: absolute; inset: 0; z-index: -1; }
.foot-beam { position: absolute; inset: 0; filter: blur(18px);
  background: linear-gradient(118deg, transparent calc(var(--b) - 11%), rgba(132, 125, 255, .1) calc(var(--b) - 5%), rgba(144, 184, 240, .3) var(--b), rgba(132, 125, 255, .08) calc(var(--b) + 4%), transparent calc(var(--b) + 9%)); }
.foot-glow { position: absolute; inset: 0; opacity: var(--g); background: radial-gradient(circle 360px at var(--px) var(--py), rgba(132, 125, 255, .14), transparent 70%); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 32px; align-items: start; }
.foot-note { margin-top: 10px; font-size: 14px; color: var(--muted); }
.foot nav { display: grid; gap: 10px; font-size: 15px; color: var(--mist); }
.foot nav a:hover { color: var(--white); }
.wordmark { margin-top: clamp(40px, 7vw, 96px); overflow: hidden; height: .78em; font: 600 22vw/1 var(--display); letter-spacing: -.055em;
  white-space: nowrap; text-align: center; user-select: none; }
.wordmark span { display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(118deg, transparent calc(var(--b) - 9%), rgba(216, 228, 244, .55) calc(var(--b) - 1.5%), rgba(216, 228, 244, .75) var(--b), rgba(216, 228, 244, .15) calc(var(--b) + 3.5%), transparent calc(var(--b) + 8%)),
    linear-gradient(180deg, #2b2a6b, #0b0c1c 85%);
  background-size: var(--fw, 100%) var(--fh, 100%), 100% 100%; background-position: calc(var(--wx, 0px) * -1) calc(var(--wy, 0px) * -1), 0 0; background-repeat: no-repeat; }

/* Phone widths: stack the headline over the phone */
@media (max-width: 800px) {
  .reveal { height: 250vh; } /* shorter scroll moment on phones */
  .box { width: calc(100% - 24px); height: calc(100% - 170px); }
  .dots, .address small { display: none; }
  .bar { gap: 8px; padding: 0 10px; }
  .address { padding: 5px 10px; }
  .ns-nav span, .ns-classes { display: none; }
  .ns-nav i { padding: 7px 14px; font-size: 13px; }
  .ns-photo { object-position: 74% 35%; }
  .new-site::before { background: linear-gradient(0deg, rgba(10, 11, 14, .95), rgba(10, 11, 14, .6) 48%, rgba(10, 11, 14, 0) 72%); }
  .ns-hero { position: absolute; left: 0; right: 0; bottom: 20px; padding: 0 18px; }
  .new-site h2 { font-size: 34px; }
  .ns-hero > p:not(.ns-kicker) { display: none; }
  .ns-actions { margin-top: 18px; }
  .os-bar { font-size: 20px; }
  .os-nav { font-size: 12px; }
  .os-hero { height: 20%; }
  .os-thumbs { gap: 10px; font-size: 12px; }
  .os-thumbs img { width: 64px; height: 64px; }
  /* Comparison on phones: the three answers stay side by side under each question; column names stick under the nav. */
  .us-col { display: none; }
  .compare { margin-top: 40px; }
  .compare table, .compare tbody, .compare tfoot { display: block; }
  .compare colgroup, .compare thead td, .compare tfoot td:not(.us), .compare thead th span { display: none; }
  .compare thead { display: block; position: sticky; top: 74px; z-index: 2; background: rgba(15, 16, 17, .7); backdrop-filter: blur(14px); }
  .compare tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 6px; }
  .compare th, .compare td { padding: 10px; font-size: 14px; }
  .compare thead th { padding: 12px 10px; font: 600 15px/1.2 var(--display); letter-spacing: -.02em; }
  .compare thead th::before { width: 28px; height: 28px; margin-bottom: 10px; border-radius: 8px; background-size: 16px; }
  .compare thead th.us::before { background-size: contain; }
  .compare tbody th { grid-column: 1 / -1; padding: 22px 0 8px; font-size: 15px; }
  .compare td b { margin-bottom: 4px; font-size: 15px; line-height: 1.3; }
  .compare td.us { font-weight: 400; color: var(--mist); } /* the panel marks our column; the bold lead carries the answer */
  /* Our cells carry the desktop panel's light: violet glow from the top, lit edge, soft halo. */
  .compare .us { border-radius: 12px; background: radial-gradient(120% 90% at 50% 0%, rgba(132, 125, 255, .38), transparent 75%), rgba(22, 22, 58, .9);
    box-shadow: inset 0 0 0 1px rgba(144, 184, 240, .4), 0 8px 28px -8px rgba(132, 125, 255, .6); }
  .compare tbody td:is(:nth-child(2), :nth-child(4)), .compare tbody tr:last-child td:is(:nth-child(2), :nth-child(4)) { border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(var(--c), .25); }
  .compare thead th:is(:nth-child(2), :nth-child(4)) { padding-top: 12px; border-radius: 12px; box-shadow: inset 0 2px rgba(var(--c), .75), inset 0 0 0 1px rgba(var(--c), .25); }
  .compare thead th.us { box-shadow: inset 0 2px rgba(196, 190, 255, .9), inset 0 0 0 1px rgba(144, 184, 240, .4), 0 8px 28px -8px rgba(132, 125, 255, .6); }
  .compare tfoot .us { grid-column: 1 / -1; background: none; box-shadow: none; padding: 28px 0 0; }
  .hero { grid-template-columns: 1fr; align-content: start; gap: 28px; padding-top: 92px; }
  h1 { font-size: clamp(42px, 12vw, 64px); }
  .copy > p { margin-top: 16px; }
  .actions { margin-top: 22px; }
  .phone { width: min(230px, 62vw, calc((100svh - 150px) * 9 / 19)); } /* never taller than the screen below the nav */
  .screen { padding-top: 36px; }
  /* Menu on phones: the links turn into icons on a bar docked at the bottom of the screen. It stays hidden over the scroll hero,
     so nothing covers the phone there, and fades in once the hero has left the bottom of the screen (main.js adds .shown). */
  .nav { backdrop-filter: none; background: rgba(15, 16, 17, .9); } /* a blur here would trap the docked bar inside the header */
  .tube { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .tube.shown { opacity: 1; visibility: visible; }
  .tube a { padding: 9px 20px; }
  .tube a .ic { display: block; }
  .tube a .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .split, .foot-grid { grid-template-columns: 1fr; }
  .lead { position: static; }
  .steps { padding-left: 56px; }
  .step::before { left: -56px; }
  .step:last-child::before { left: -62px; }
  .form { grid-template-columns: 1fr; }
  .form label:nth-child(3) { grid-column: auto; }
}
@media (max-width: 800px) and (max-height: 760px) { .copy > p { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .msg, .card, .step::before, .step p, .qs details, .qs summary::after, .panel, .ring .bar, .val, .compare td.us { transition: none; }
  .us-col::after { display: none; }
  .keep { animation: none; }
  .divider, .tag { transition: none; }
  .dot { animation: none; }
  .qs details::details-content { transition: none; }
  .tube, .tube .mark, .pill, .pill > span, .pill > i, .pill .ic { transition: none; } /* the light jumps; buttons switch straight to their hover look */
  .pill:active { transform: none; }
}

/* Samsung Internet repaints pages darker in its dark mode unless the page ships its own prefers-color-scheme: dark styles.
   This page is already dark, so the rule just says so; it stops the hero text and white buttons being darkened. */
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }