/* Jymply website (21 Oct): the look of the reference Rodney chose, with Jymply's words. Home, Start, Privacy.
   Text: Helvetica Neue where the phone has it (iPhone, Mac); Inter Tight everywhere else, so Android and Windows
   never fall back to Arial. Labels: Space Mono. Colours: ink #0A0A0A, greys #6B6B6B / #9A9A9A, lines at 10%,
   footer #EF4824 with #0B0E14 text. */
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/fonts/space-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/fonts/space-mono-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --bg:#fff;--ink:#0a0a0a;--dim:#6b6b6b;--faint:#9a9a9a;--line:#0a0a0a1a;--line-strong:#0a0a0a29;
  --footer-bg:#ef4824;--footer-ink:#0b0e14;--footer-r:clamp(28px,7vw,120px);
  --sans:"Helvetica Neue","Inter Tight",Helvetica,Arial,sans-serif;--mono:"Space Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);--pad:24px;--nav-h:76px;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:inherit}
:where(a,button,input){transition:color .15s var(--ease),background-color .15s var(--ease),border-color .15s var(--ease),opacity .15s var(--ease)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:11px;line-height:1.7}
.wrap{max-width:1400px;margin:0 auto;padding:0 var(--pad)}

/* Menu bar: the name on the left, one button on the right, frosted glass that fades out downwards. */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;height:var(--nav-h)}
.nav-glass{position:absolute;inset:0 0 auto 0;height:140%;pointer-events:none;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:color-mix(in srgb,var(--bg) 58%,transparent);-webkit-mask-image:linear-gradient(#000 0,#000000eb 38%,#0000);mask-image:linear-gradient(#000 0,#000000eb 38%,#0000)}
.nav .wrap{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--sans);font-weight:700;font-size:22px;letter-spacing:-.035em;text-decoration:none;line-height:1}
.pill-sm{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px;background:var(--ink);color:#fff;text-decoration:none;border-radius:9999px;padding:12px 18px;line-height:1}
.pill-sm:hover{background:#2c2e33}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:9999px;font:500 16px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer}
.btn:hover{background:#2c2e33;border-color:#2c2e33}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--ink);background:#fff}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn[disabled]{opacity:.55;cursor:default}

/* First screen */
.hero{position:relative;padding-top:calc(var(--nav-h) + 28px)}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.035;pointer-events:none;mix-blend-mode:multiply}
.hero-grid{position:relative;display:grid;gap:8px}
.eyebrow{display:inline-block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.175em;font-size:11px;line-height:1;padding:9px 14px;border:1px solid var(--line-strong);border-radius:9999px;color:var(--ink)}
h1{font-family:var(--sans);font-weight:500;font-size:clamp(2.3rem,7.2vw,3.4rem);line-height:1.06;letter-spacing:-.015em;margin:26px 0 18px}
h1 .dim{color:var(--dim);display:block}
.lead{color:var(--dim);font-size:17px;line-height:1.6;margin:0 0 28px;max-width:34ch}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.fine{color:var(--dim);margin:22px 0 0}
.agent{position:relative;margin:28px calc(-1 * var(--pad)) 0;}
.agent canvas{display:block;width:100%;aspect-ratio:760/700;height:auto}
.agent-cap{text-align:center;margin-top:-6px;min-height:52px}
.agent-cap .mono{font-weight:700;font-size:11.5px;letter-spacing:.25em;color:var(--ink)}
.agent-cap .sub{font-size:14px;color:var(--dim);margin-top:2px}
.agent-cap .mono,.agent-cap .sub{transition:opacity .45s var(--ease)}
.agent-cap.swap .mono,.agent-cap.swap .sub{opacity:0}

/* Sections */
.sec{padding:88px 0 0}
.sec .label{color:var(--dim)}
h2{font-family:var(--sans);font-weight:500;font-size:clamp(1.9rem,5.6vw,2.9rem);line-height:1.08;letter-spacing:-.02em;margin:14px 0 30px;max-width:18ch}
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:0 12px;padding:22px 0;border-bottom:1px solid var(--line)}
.steps .n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--dim);padding-top:4px}
.steps b{display:block;font-weight:500;font-size:19px;letter-spacing:-.01em;margin-bottom:4px}
.steps p{margin:0;color:var(--dim);font-size:16px}
.points{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.points li{padding:18px 0;border-bottom:1px solid var(--line);color:var(--dim);font-size:16px}
.points b{color:var(--ink);font-weight:500}
.end{text-align:center;padding:120px 0 110px}
.end h2{margin:14px auto 12px}
.end p{color:var(--dim);margin:0 0 30px}

/* The explainer (How it works): a framed animation with its caption and a Pause button. */
.film{margin:0}
.film canvas{display:block;width:100%;height:auto;aspect-ratio:420/560;border:1px solid var(--line);border-radius:20px;background:#fff}
.film-cap{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:14px;min-height:46px}
.film-cap .mono{font-weight:700;color:var(--ink);font-size:11px;letter-spacing:.22em}
.film-cap .sub{font-size:14px;color:var(--dim)}
.film-cap .mono,.film-cap .sub{transition:opacity .45s var(--ease)}
.film-cap.swap .mono,.film-cap.swap .sub{opacity:0}
.film-pause{flex:none;font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:10px;background:#fff;color:var(--ink);border:1px solid var(--line-strong);border-radius:9999px;padding:9px 14px;cursor:pointer}
.film-pause:hover{border-color:var(--ink)}
.steps3{margin-top:36px}
/* The last screen: a sphere of dots that opens into a cloud as you scroll, then the words. */
.sphere-sec{position:relative;height:170vh;padding:0}
.sphere-sec .sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sphere-sec canvas{position:absolute;inset:0;width:100%;height:100%}
.end-copy{position:relative}
html.js .end-copy{opacity:0}

/* Footer: orange, rounded on top, a giant name cut by the bottom edge. */
.foot{background:var(--footer-bg);color:var(--footer-ink);border-radius:var(--footer-r) var(--footer-r) 0 0;overflow:hidden;padding:56px 0 0;margin-top:0}
.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;max-width:520px}
.foot-links a{text-decoration:none;font-size:16px}
.foot-links a:hover{text-decoration:underline;text-underline-offset:4px}
.foot .mono{margin-top:40px;font-weight:700;color:var(--footer-ink)}
.foot .copy{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:10px;margin-top:14px;opacity:.85}
/* the whole name across the width (it measures about 3.3 times its size), cut only by the bottom edge */
.giant{font-family:var(--sans);font-weight:700;letter-spacing:-.055em;font-size:calc((min(100vw, 1400px) - 2 * var(--pad)) / 3.45);line-height:.74;margin:28px 0 0 -0.03em;white-space:nowrap;transform:translateY(.12em)}

/* Start page */
.page{padding-top:calc(var(--nav-h) + 40px);min-height:80vh}
.narrow{max-width:520px}
.field{display:flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;margin:8px 0 14px;background:#fff}
.field:focus-within{border-color:var(--ink)}
.field span{display:flex;align-items:center;padding:0 14px;font-size:18px;color:var(--dim);border-right:1px solid var(--line)}
.field input{flex:1;min-width:0;border:0;outline:0;font:400 20px/1 var(--sans);padding:18px 14px;background:transparent;color:var(--ink);letter-spacing:.01em}
label.l{display:block;font-size:14px;color:var(--dim);margin-top:30px}
.page .btn{width:100%;min-height:58px;font-size:17px}
.status{min-height:24px;margin:12px 0 0;color:var(--ink);font-size:15px}
.small{color:var(--dim);font-size:14px;margin:10px 0 0}
.priv li{padding:18px 0}

/* Opening (once a visit): dots gather into the name, then the page. */
.intro{display:none}
html.js:not(.no-intro) .intro{display:block;position:fixed;inset:0;z-index:50;background:#fff;transition:opacity .5s var(--ease)}
.intro canvas{position:absolute;inset:0;width:100%;height:100%}
.intro .mono{position:absolute;left:var(--pad);bottom:calc(28px + env(safe-area-inset-bottom));color:var(--dim);letter-spacing:.3em;font-size:10px}
.intro.out{opacity:0;pointer-events:none}
html.js:not(.no-intro) .rise{opacity:0;transform:translateY(14px)}
html.js.shown .rise{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js.shown .rise:nth-child(2){transition-delay:.06s}html.js.shown .rise:nth-child(3){transition-delay:.12s}html.js.shown .rise:nth-child(4){transition-delay:.18s}html.js.shown .rise:nth-child(5){transition-delay:.24s}

@media (min-width:640px){:root{--pad:40px;--nav-h:84px}.mono{font-size:11.5px}.eyebrow{font-size:12px}}
@media (min-width:1024px){
  .hero{min-height:100vh;display:flex;align-items:center;padding-top:var(--nav-h)}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:40px;width:100%}
  h1{font-size:clamp(3.4rem,5.1vw,5.2rem);line-height:.95;letter-spacing:-.025em;margin-top:30px}
  .lead{font-size:18px;max-width:36ch}
  .agent{margin:0}
  .steps li{grid-template-columns:72px 1fr}
  .film canvas{aspect-ratio:960/560}
  .steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:0;margin-top:72px}
  .steps3 li{display:block;border-top:1px solid var(--line);border-bottom:0;padding-top:22px}
  .steps3 .n{display:block;margin-bottom:14px}
  .two:has(.film){grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}
  .sec{padding-top:140px}
  .two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
  .two h2{margin-top:14px}
  .end{padding:180px 0 160px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}