:root{
  --ink:#191b1f; --paper:#f3f4f0; --card:#ffffff;
  --muted:#565a61; --dim:#878c93; --line:rgba(25,27,31,.14);
  --lime:#c2f000; --lime-2:#a8d400; --lime-ink:#41680a; --on-lime:#181a10;
  --display:'Archivo',sans-serif; --body:'Hanken Grotesk',sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--display)!important; font-weight:800!important; letter-spacing:-.02em!important; text-transform:none!important; }
body,input,select,textarea{ font-family:var(--body)!important; font-weight:400; }
code,.mono{ font-family:var(--mono)!important; }

.button.primary, input[type="submit"]{
  background-color:var(--lime)!important; color:var(--on-lime)!important;
  box-shadow:none!important; font-family:var(--display)!important; font-weight:800!important;
}
.button.primary:hover, input[type="submit"]:hover{
  background-color:var(--lime-2)!important; color:var(--on-lime)!important; box-shadow:0 10px 26px rgba(168,212,0,.34)!important;
}
.button:not(.primary):hover{ color:var(--lime-ink)!important; box-shadow:inset 0 0 0 1px var(--lime-ink)!important; }

.topbar{ background:#eaf0d6; border-bottom:1px solid rgba(25,27,31,.08); color:var(--ink); font-size:.82rem; }
.topbar .inner{ max-width:72em; margin:0 auto; padding:9px 2em; text-align:center; line-height:1.45; }
.topbar b{ color:var(--lime-ink); font-weight:700; }

#page-wrapper{ padding-top:0!important; }
#header{ position:relative!important; z-index:1000; }
@media (max-width:736px){ .topbar .inner{ font-size:.74rem; padding:8px 1.25em; } }

#header #logo a{ font-family:var(--display); font-weight:900; letter-spacing:-.02em; color:var(--ink)!important; }
#header #nav > ul > li > a{ color:var(--ink)!important; }
#header #nav > ul > li > a:hover{ color:var(--lime-ink)!important; }
#header #nav > ul > li > a.button.primary{ color:var(--on-lime)!important; }

#banner::before{ display:none!important; }
#banner{ min-height:auto!important; padding:3em 0 4.5em!important;
  background:
    radial-gradient(760px 460px at 86% -14%, rgba(194,240,0,.22), transparent 66%),
    radial-gradient(580px 400px at 2% 120%, rgba(84,128,241,.10), transparent 72%),
    linear-gradient(to right, rgba(25,27,31,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(25,27,31,.03) 1px, transparent 1px),
    var(--paper)!important;
  background-size:auto,auto,46px 46px,46px 46px!important;
}
#banner .content{ display:block!important; text-align:center; max-width:880px; margin:0 auto; }
#banner .content > .bx{ max-width:none; }
#banner .content h2{ font-size:clamp(2.15rem, 5vw, 3.75rem)!important; line-height:1.05!important; color:var(--ink)!important; }
#banner .content .bx > header > p{ font-size:1.22em; color:var(--muted)!important; max-width:40em; margin:.2em auto 0; line-height:1.55; }
.hkick{ display:inline-block; font-family:var(--mono); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--on-lime); background:var(--lime); padding:7px 17px; border-radius:999px; margin-bottom:1.5em; }
#banner .goto-next{ color:var(--ink)!important; opacity:.4; }

.conv{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px 22px; margin:2.2em auto 0!important; max-width:540px; box-shadow:0 22px 58px rgba(25,27,31,.15); }
.conv .code-row{ display:flex; gap:10px; align-items:stretch; margin-bottom:14px; flex-wrap:wrap; }
.conv .code-row .lab{ align-self:center; font-size:.8rem; color:var(--dim); font-weight:600; }
.conv .code{ font-family:var(--mono)!important; font-weight:700; font-size:1.34rem; letter-spacing:.1em; color:var(--ink); background:var(--paper); border:1px dashed var(--lime-2); border-radius:9px; padding:12px 18px; flex:1 1 auto; text-align:center; min-width:104px; }
.conv .copy{ font-family:var(--mono)!important; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; background:var(--ink); color:#fff; border:none; border-radius:9px; padding:0 18px; cursor:pointer; }
.conv .copy:hover{ background:var(--lime-ink); }
.conv .cta{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--lime); color:var(--on-lime)!important; font-family:var(--display); font-weight:800; font-size:1.16rem; padding:17px; border-radius:10px; box-shadow:0 14px 30px rgba(168,212,0,.36); text-decoration:none; transition:transform .15s, box-shadow .15s; }
.conv .cta:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(168,212,0,.44); color:var(--on-lime)!important; }
.conv .cta sup{ font-size:.56em; }
.conv .foot{ font-size:.74rem; color:var(--dim); line-height:1.5; margin:13px 0 0; }
.conv .foot sup{ color:var(--lime-ink); }

.spotlight .content h2{ color:var(--ink); }
.spotlight .content p{ color:var(--muted); }

.spotlight a:not(.button), #four a:not(.button), #five a:not(.button), #footer a{ color:var(--lime-ink); }
.spotlight a:not(.button):hover, #footer a:hover{ color:#2f4a00; }

#footer{ background:#ebece7!important; border-top:1px solid var(--line); color:var(--muted); }
#footer .fmega{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:26px; text-align:left; max-width:72em; margin:0 auto 28px; }
#footer .fmega h4{ font-family:var(--mono); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); margin-bottom:12px; }
#footer .fmega ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
#footer .fmega a{ color:var(--muted); font-size:.85rem; }
#footer .fmega a:hover{ color:var(--lime-ink); }
#footer .copyright{ color:var(--dim)!important; border-top:1px solid var(--line); padding-top:18px; }
#footer .copyright li{ border-left-color:var(--line)!important; }
#footer .copyright a{ color:var(--lime-ink); }

.cardgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:16px; text-align:left; }
a.ucard{ display:flex!important; flex-direction:column; gap:7px; padding:20px 20px 18px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 20px rgba(25,27,31,.06); text-decoration:none!important; border-bottom:1px solid var(--line)!important; transition:transform .15s, box-shadow .15s, border-color .15s; }
a.ucard:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(25,27,31,.10); border-color:var(--lime-2)!important; }
.ucard .tag{ align-self:flex-start; font-family:var(--mono); font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--lime-ink); border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.ucard h3{ font-family:var(--display); font-weight:800; font-size:1.04rem; color:var(--ink)!important; margin:7px 0 0!important; line-height:1.3; }
.ucard p{ font-size:.88rem; color:var(--muted); line-height:1.5; margin:0; }
.ucard .go{ margin-top:auto; padding-top:8px; font-family:var(--mono); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--lime-ink); }
.ucard .go::after{ content:' \2192'; }

@media (max-width:980px){
  #banner{ padding:2em 0 3.5em!important; }
  #banner .content .bx > header > p{ font-size:1.1em; }
}
@media (max-width:736px){
  #banner{ padding:1.4em 0 2.5em!important; }
  .hkick{ margin-bottom:1em; font-size:.68rem; }
  #banner .content .bx > header > p{ font-size:1.02em; }
  .conv{ margin-top:1.5em!important; padding:20px 18px; }
  .conv .code{ font-size:1.2rem; }
  .conv .cta{ font-size:1.05rem; padding:15px; }
}

button,.conv .copy,.cb-yes,.cb-no{ min-height:44px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; }
.lang-dropdown summary{ min-height:44px; box-sizing:border-box; display:flex; align-items:center; }

#nav .nav-drop{ position:relative; }
#nav .nav-drop-btn{ font:inherit; background:transparent; border:0; cursor:pointer; color:var(--ink)!important; padding:.5em .7em; }
#nav .nav-drop-btn:hover{ color:var(--lime-ink)!important; }
#nav .nav-drop-menu{ position:absolute; top:100%; right:0; margin-top:8px; width:min(700px,calc(100vw - 3em)); display:grid; grid-template-columns:repeat(4,1fr); gap:12px 22px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 22px 54px rgba(25,27,31,.18); padding:20px 24px; text-align:left; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:80; }
#nav .nav-drop:hover .nav-drop-menu, #nav .nav-drop.is-open .nav-drop-menu{ opacity:1; visibility:visible; transform:translateY(0); }
#nav .nav-drop-menu::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:14px; }  
#nav .nav-drop-col h4{ font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--dim)!important; margin:0 0 .55em; }
#nav .nav-drop-col a{ display:block; color:var(--ink)!important; font-size:.9rem; line-height:1.3; padding:.34em 0; text-decoration:none; }
#nav .nav-drop-col a:hover{ color:var(--lime-ink)!important; }
#nav .nav-drop-col a.all{ margin-top:.5em; color:var(--lime-ink)!important; font-weight:700; }
@media (max-width:1280px){ #nav .nav-drop-menu{ grid-template-columns:repeat(2,1fr); width:min(480px,calc(100vw - 3em)); } }