/* JuanLink website — tokens from the JuanLink Design System (light, marketing) */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --blue-50:#eef6fc;--blue-100:#d6e9f7;--blue-200:#add3ef;--blue-300:#79b6e3;--blue-400:#5ba7e0;--blue-500:#1f7bc2;
  --blue-600:#1667a6;--blue-700:#145487;--blue-800:#12426a;--blue-900:#112a47;--blue-950:#0a1a2e;
  --surface:#f6f8fb;--raised:#ffffff;--sunken:#edf1f6;--line:#dce3ec;--line-strong:#8796aa;
  --ink:#0f1b2d;--muted:#4a5a6e;--subtle:#5f6e82;
  --primary:var(--blue-600);--primary-hover:var(--blue-700);--primary-soft:#e4f0fa;--focus:var(--blue-500);
  --success:#12754a;--danger:#b42a2a;--danger-soft:#fbe7e5;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;
  --shadow-md:0 6px 16px -4px rgba(17,42,71,.14),0 2px 4px rgba(17,42,71,.06);
  --shadow-lg:0 20px 40px -12px rgba(17,42,71,.25);
  --wrap:1160px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--raised);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:var(--primary)}a:hover{color:var(--primary-hover)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;background:var(--raised);padding:8px 12px;border-radius:var(--r-sm);z-index:100}
.skip:focus{left:12px}
.eyebrow{font:600 12px/16px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.section{padding-block:88px}
.section.alt{background:var(--surface)}
.section-head{display:grid;gap:12px;max-width:640px;margin-bottom:44px}
.section-head h2{font-size:clamp(28px,4vw,40px);line-height:1.15;font-weight:800}
.section-head p{font-size:17px;line-height:1.6;color:var(--muted)}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 22px;border-radius:var(--r-md);border:1px solid transparent;font:600 15px/20px var(--sans);text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s;white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover);color:#fff}
.btn-secondary{background:var(--raised);color:var(--ink);border-color:var(--line-strong)}.btn-secondary:hover{background:var(--sunken);color:var(--ink)}
.btn-white{background:#fff;color:var(--blue-700)}.btn-white:hover{background:var(--blue-50);color:var(--blue-800)}
.btn-ghost-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}.btn-ghost-white:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-lg{min-height:52px;padding:14px 26px;font-size:16px}
.btn-block{width:100%}
.on-blue :focus-visible{outline-color:#fff}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:#fff;z-index:60}
.header-row{display:flex;align-items:center;gap:24px;min-height:68px}
.brand img{width:132px;height:auto}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{color:var(--muted);text-decoration:none;font:600 14.5px/20px var(--sans);padding:8px 12px;border-radius:var(--r-sm)}
.nav a:hover{color:var(--ink);background:var(--sunken)}
.header-cta{display:flex;gap:10px}
.header-cta .btn{min-height:40px;padding:9px 16px;font-size:14.5px}
@media (max-width:900px){.nav{display:none}.header-cta{margin-left:auto}}
@media (max-width:440px){.header-cta .btn-secondary{display:none}.brand img{width:116px}}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--primary);color:#fff}
.hero-wave{position:absolute;left:0;right:0;bottom:-10px;width:100%;height:auto;pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding-block:72px 96px}
.hero-copy{display:grid;gap:22px;min-width:0}
.pill{justify-self:start;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(214,233,247,.55);color:var(--blue-100);border-radius:999px;padding:5px 12px;font:600 12px/16px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.pill i{width:7px;height:7px;border-radius:50%;background:#7ee2b0}
.tagline{font:600 16px/22px var(--sans);color:var(--blue-100)}
.hero h1{font-size:clamp(38px,6vw,64px);line-height:1.04;font-weight:800;letter-spacing:-.035em}
.hero h1 .price{white-space:nowrap}
.hero-sub{font-size:18px;line-height:1.6;color:var(--blue-100);max-width:34em}
.offer{justify-self:start;display:flex;align-items:center;gap:12px;background:#fff;color:var(--blue-900);border-radius:14px;padding:12px 18px 12px 12px;box-shadow:0 10px 24px -10px rgba(10,26,46,.5)}
.offer-ic{width:38px;height:38px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex:none}
.offer-ic .ico{width:20px;height:20px;stroke-width:2.6}
.offer b{display:block;font:800 17px/22px var(--display)}
.offer span{display:block;font:400 14px/19px var(--sans);color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.hero-card{background:#fff;color:var(--ink);border-radius:var(--r-xl);padding:28px;box-shadow:var(--shadow-lg);display:grid;gap:18px;min-width:0}
.hero-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tag{display:inline-block;background:var(--primary);color:#fff;font:700 11px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.hero-card .plan-name{font:700 18px/24px var(--display)}
.speed-big{display:flex;align-items:baseline;gap:8px;color:var(--blue-900)}
.speed-big b{font:800 72px/1 var(--display);letter-spacing:-.04em}
.speed-big span{font:700 16px/1 var(--sans);color:var(--primary);letter-spacing:.06em;text-transform:uppercase}
.hero-card .for{color:var(--muted);font-size:15px}
.hero-card .price-row{display:flex;align-items:baseline;gap:6px;padding-top:16px;border-top:1px solid var(--line)}
.hero-card .price-row b{font:800 34px/1 var(--display);letter-spacing:-.02em;color:var(--primary);font-variant-numeric:tabular-nums}
.hero-card .price-row span{color:var(--muted);font-size:15px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:22px}
.checks .ico{width:20px;height:20px;color:var(--success);stroke-width:2.6;margin-top:1px}
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:52px 84px}.hero-card{max-width:440px}}
@media (max-width:520px){.offer{justify-self:stretch}.hero-actions .btn{flex:1 1 100%}}

/* inclusions strip */
.strip{background:var(--blue-900);color:#fff}
.strip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px;padding-block:18px;font:600 15px/22px var(--sans)}
.strip-row span{display:inline-flex;align-items:center;gap:8px}
.strip-row .ico{color:var(--blue-300);stroke-width:2.6}

/* plans */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
@media (max-width:1060px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{position:relative;display:flex;flex-direction:column;gap:18px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px 24px;min-width:0}
.plan.popular{border:2px solid var(--primary);box-shadow:var(--shadow-md)}
.plan .tag{position:absolute;top:-12px;left:22px}
.plan h3{font-size:20px;line-height:26px;font-weight:700}
.plan .for{margin-top:2px;color:var(--muted);font-size:14.5px;line-height:21px;min-height:42px}
@media (max-width:600px){.plan .for{min-height:0}}
.plan .speed{display:flex;align-items:baseline;gap:6px;color:var(--blue-900)}
.plan .speed b{font:800 48px/1 var(--display);letter-spacing:-.04em}
.plan .speed span{font:700 13px/1 var(--sans);color:var(--primary);letter-spacing:.08em;text-transform:uppercase}
.plan .price{display:flex;align-items:baseline;gap:4px}
.plan .price b{font:800 30px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan.popular .price b{color:var(--primary)}
.plan .price span{color:var(--muted);font-size:15px}
.plan .checks{flex:1;padding-top:18px;border-top:1px solid var(--line)}
.plans-note{margin-top:28px;text-align:center;color:var(--muted);font-size:15px}

/* why */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
@media (max-width:960px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.why{grid-template-columns:minmax(0,1fr)}}
.why-item{display:grid;gap:12px;align-content:start}
.why-ic{width:48px;height:48px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.why-ic .ico{width:24px;height:24px;stroke-width:1.9}
.why-item h3{font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.01em}
.why-item p{color:var(--muted);font-size:15.5px;line-height:1.6}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:step}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{position:relative;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;gap:10px;align-content:start}
.steps li::before{counter-increment:step;content:counter(step);width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font:800 16px/1 var(--display)}
.steps h3{font-size:17px;line-height:24px;font-weight:700;letter-spacing:-.01em}
.steps p{color:var(--muted);font-size:15px;line-height:1.6}

/* apply */
.apply-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
@media (max-width:960px){.apply-grid{grid-template-columns:minmax(0,1fr);gap:36px}}
.apply-copy{display:grid;gap:18px;align-content:start}
.apply-copy h2{font-size:clamp(28px,4vw,40px);line-height:1.15;font-weight:800}
.apply-copy p{color:var(--muted);font-size:17px}
.call-card{display:flex;gap:14px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--raised)}
.call-card .why-ic{flex:none}
.call-card small{display:block;font:600 12px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)}
.call-card a{font:800 22px/28px var(--display);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.call-card a:hover{color:var(--primary)}
.form-card{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-xl);padding:32px;box-shadow:var(--shadow-md)}
@media (max-width:560px){.form-card{padding:22px 18px}}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
.form .full{grid-column:1/-1}
@media (max-width:560px){.form{grid-template-columns:minmax(0,1fr)}}
.field{display:grid;gap:6px;min-width:0}
.field label{font:600 14px/20px var(--sans)}
.field label .opt{font-weight:400;color:var(--subtle)}
.field input,.field select,.field textarea{width:100%;min-width:0;font:400 16px/24px var(--sans);color:var(--ink);background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:11px 12px;appearance:none;-webkit-appearance:none}
.field textarea{resize:vertical;min-height:84px}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.field input::placeholder,.field textarea::placeholder{color:var(--subtle)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.field .hint{font-size:13px;line-height:18px;color:var(--subtle)}
.field .err{display:none;font:600 13px/18px var(--sans);color:var(--danger)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--danger)}
.field.invalid .err{display:block}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:21px;color:var(--muted)}
.consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--primary);flex:none}
.consent.invalid{color:var(--danger)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-error{display:none;gap:10px;align-items:flex-start;background:var(--danger-soft);color:var(--danger);border-radius:var(--r-md);padding:12px 14px;font:600 14px/20px var(--sans)}
.form-error.show{display:flex}
.form-done{display:grid;gap:14px;text-align:left}
.form-done .why-ic{background:#e3f3ea;color:var(--success)}
.form-done h3{font-size:24px;line-height:30px;font-weight:800}
.form-done p{color:var(--muted)}
.form-done .ref{font-family:var(--mono);font-size:15px;color:var(--ink);background:var(--sunken);border-radius:var(--r-sm);padding:2px 8px}
.btn[aria-busy="true"]{opacity:.7;cursor:progress}

/* pay band */
.pay-band{background:var(--blue-900);color:#fff}
.pay-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-block:44px}
.pay-row h2{font-size:clamp(24px,3vw,30px);line-height:1.2;font-weight:800}
.pay-row p{color:var(--blue-200);margin-top:8px;max-width:40em}

/* faq */
.faq{display:grid;gap:12px;max-width:820px}
.faq details{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);padding:0 22px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font:700 17px/24px var(--display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{color:var(--primary);transition:transform .2s}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--muted);font-size:15.5px;line-height:1.65;max-width:62ch}

/* footer */
.site-footer{background:var(--blue-950);color:var(--blue-200);padding-block:56px 40px;padding-bottom:max(40px,env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:36px}
@media (max-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot-brand{display:grid;gap:14px;align-content:start}
.foot-brand img{width:150px;height:auto}
.site-footer h3{font:600 12px/16px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:12px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer a{color:var(--blue-200);text-decoration:none}.site-footer a:hover{color:#fff}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid rgba(173,211,239,.2);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px}

/* privacy page */
.doc{max-width:760px;padding-block:56px 80px}
.doc h1{font-size:clamp(30px,4vw,40px);line-height:1.15;font-weight:800;margin-bottom:8px}
.doc h2{font-size:21px;line-height:28px;font-weight:700;margin:36px 0 10px}
.doc p,.doc li{color:var(--muted);font-size:16px;line-height:1.7}
.doc p+p{margin-top:12px}
.doc ul{padding-left:20px}
