/* FTR Media — theme v3 (black / white, lime accent #CDF22B).
   Loaded after site.css and nav.css on every page by build.js. */
:root{
  --lime:#CDF22B;--ink:#0B0B0C;--ink-2:#161618;--ink-3:#26262A;--paper:#F3F3F1;--line:#E4E4E0;
  --teal:var(--ink);--pink:var(--ink);--pink-hover:#000;
  --sky:var(--paper);--sky-0:var(--paper);--sky-2:#c8c8cf;--sky-3:#E9E9E4;--sand:var(--paper);
  --display:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:1240px;--r:28px;
}
body{background:#fff;color:var(--ink);font-family:var(--body);letter-spacing:-.01em}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;font-stretch:105%;letter-spacing:-.025em}
.wrap{padding:0 24px}
:focus-visible{outline-color:var(--ink)}
::selection{background:var(--lime);color:var(--ink)}

/* ---------- buttons & links ---------- */
.btn{font:700 16px/1 var(--body);letter-spacing:-.005em}
.btn-pink{background:var(--lime);color:var(--ink)}
.btn-pink:hover{background:#d9ff3c;box-shadow:0 10px 26px rgba(205,242,43,.35)}
.btn-line{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.circle-btn{background:var(--lime)}
.circle-btn:hover{background:#d9ff3c}
.circle-btn svg{stroke:var(--ink)}
.link{background-image:linear-gradient(var(--lime),var(--lime));background-size:100% 3px}

/* ---------- header ---------- */
.nav{background:var(--ink);color:#fff}
.nav.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.08)}
.logo{color:inherit;font:800 22px/1 var(--display);font-stretch:110%;letter-spacing:-.02em}
.menu>a,.dd-btn{color:#fff;font:500 15px/1 var(--body);letter-spacing:0;padding:10px 15px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.menu>a:hover,.dd-btn:hover,.dd:focus-within>.dd-btn{background:var(--lime);color:var(--ink);box-shadow:none}
.menu>a[aria-current],.dd.cur>.dd-btn{box-shadow:inset 0 0 0 1px var(--lime);color:var(--lime);border-radius:999px}
.menu>a[aria-current]:hover,.dd.cur>.dd-btn:hover{color:var(--ink)}
.dd-panel{background:var(--ink-2);box-shadow:0 24px 60px rgba(0,0,0,.45);border:1px solid var(--ink-3)}
.dd-panel a{color:#fff;font:700 16px/1.2 var(--display);font-stretch:105%}
.dd-panel a small{font-family:var(--body);color:#a9a9b0;opacity:1}
.dd-panel a:hover,.dd-panel a[aria-current]{background:var(--ink-3);color:var(--lime)}
.burger{background:var(--lime)}
.burger svg{stroke:var(--ink)}
@media (max-width:980px){
  .mnav:not([hidden]){background:var(--ink);border-top:1px solid var(--ink-3)}
  .mnav b{color:var(--lime);font-family:var(--body)}
  .mnav a{color:#fff;font-family:var(--display);font-stretch:105%}
  .mnav a[aria-current]{color:var(--lime)}
  .mnav a.btn{color:var(--ink)}
}

/* ---------- page hero (dark) ---------- */
.phero{background:var(--ink);color:#fff;padding:36px 0 96px;position:relative;isolation:isolate;overflow:hidden}
/* animated square pattern (assets/hero-fx.js) + a soft shade behind the text */
.hero-fx{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;pointer-events:none}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,.2) 55%,rgba(11,11,12,0) 100%)}
.phero h1{color:#fff;font-weight:900;font-stretch:118%;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;font-size:clamp(40px,6vw,82px)}
.phero h1 .pink,.phero .pink{color:var(--lime)}
.phero .lead{color:rgba(255,255,255,.84)}
.phero .btn-line{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.phero .btn-line:hover{background:#fff;color:var(--ink)}
.crumbs a{opacity:.7}.crumbs a:hover{color:var(--lime);opacity:1}
.phero.article h1{text-transform:none;font-stretch:105%;font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(36px,4.8vw,62px);max-width:22ch}
.meta span{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
/* hand-drawn art on dark */
.phero .ink{stroke:#fff}
.phero .ink.pk{stroke:var(--lime)}
.phero .fill-white{fill:var(--ink-3)}
.phero .fill-pink{fill:var(--lime)}
.phero .fill-teal{fill:#fff}

/* ---------- sections ---------- */
.h2{font-weight:900;font-stretch:118%;text-transform:uppercase;letter-spacing:-.015em;line-height:.95;font-size:clamp(34px,4.6vw,64px)}
.pink{color:var(--ink);background:var(--lime);padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.phero .pink,.answer .pink,.card.t3 .pink{background:none;padding:0}
.sub{color:#45454b}
.ink{stroke:var(--ink)}.ink.pk{stroke:var(--ink)}
.fill-teal{fill:var(--ink)}.fill-pink{fill:var(--lime)}

.tldr{background:var(--paper)}
.tldr .q{color:var(--ink)}
.tldr li::marker{color:var(--ink)}

/* cards: paper / white / black */
.card{background:var(--paper)}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(11,11,12,.1)}
.card.t1{background:#fff;box-shadow:inset 0 0 0 2px var(--line)}
.card.t3{background:var(--ink);color:#fff}
.card.t3 p{color:#c4c4ca}
.card.t3 .doodle .l{stroke:#fff}
.card.t3 .doodle .p{fill:var(--lime)}
.card.t3 a{color:var(--lime)}
.doodle .l{stroke:var(--ink)}
.doodle .p{fill:var(--lime)}
.card h3{font-stretch:108%}

/* steps: dark cards, lime numbers */
.step{background:var(--ink);color:#fff;border:1px solid var(--ink-3);transition:border-color .3s}
.step:hover{border-color:var(--lime)}
.step .n{font:900 44px/1 var(--display);font-stretch:125%;color:var(--lime)}
.step p{color:#b9b9bf}
.step a{color:var(--lime)}

.panel{background:var(--paper)}
.checks li::before{background-color:var(--ink)}

/* tables */
.tbl{background:var(--paper)}
.tbl th{background:var(--ink);color:#fff;font-family:var(--display);font-stretch:105%}
.tbl th,.tbl td{border-bottom-color:#fff}

/* pricing */
.plan{background:var(--paper)}
.plan.feat{background:var(--ink);color:#d7d7dc}
.plan .tag{background:var(--lime);color:var(--ink)}
.plan h3{font-weight:900;font-stretch:118%;text-transform:uppercase;letter-spacing:-.01em}
.plan .price{color:var(--ink);font-weight:900;font-stretch:110%}
.plan.feat .checks li::before{background-color:var(--lime);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230B0B0C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.plan.feat .btn-pink{background:var(--lime);color:var(--ink)}
.addon{background:var(--paper)}

/* articles */
.toc{background:var(--paper)}
.toc a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px}
.prose h2,.prose h3{font-stretch:105%}
.prose li::marker{color:var(--ink)}
.prose a{text-decoration-color:var(--lime);text-decoration-thickness:3px}
.prose a:hover{background:var(--lime)}
.answer{background:var(--ink);color:#fff}
.answer b.lbl{color:var(--lime);font-family:var(--body);font-weight:700;letter-spacing:.08em}
.answer a{color:var(--lime)}
.note{background:var(--paper);border-left-color:var(--lime)}
.math{background:var(--paper)}
.cta-inline{background:var(--lime);color:var(--ink)}
.cta-inline h3{color:var(--ink);font-weight:900;font-stretch:115%;text-transform:uppercase;letter-spacing:-.01em}
.cta-inline .btn-pink{background:var(--ink);color:#fff}
.cta-inline .btn-pink:hover{background:#000;box-shadow:none}
.cta-inline a:not(.btn){color:var(--ink)}

/* blog list */
.post{background:var(--paper)}
.post:nth-child(2){background:var(--ink);color:#fff}
.post:nth-child(2) .k{color:var(--lime);opacity:1}
.post:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(11,11,12,.1)}
.post .k{color:var(--ink);opacity:.6}
.post h3{font-stretch:105%}

/* faq */
.vlabel{font-weight:900;font-stretch:120%;text-transform:uppercase}
.faq details{border-bottom-color:var(--line)}
.faq summary{font-stretch:105%}
.faq .pm{background:var(--paper)}
.faq .pm svg{stroke:var(--ink)}
.faq details[open] .pm{background:var(--lime)}
.faq details[open] .pm svg{stroke:var(--ink)}

/* related */
.related a{background:var(--paper);font-stretch:105%}
.related a:hover{background:var(--lime)}
.related a span{color:#6b6b72}
.related a:hover span{color:var(--ink)}

/* contact */
.opt{background:var(--paper)}
.opt.alt{background:var(--ink);color:#fff}
.opt.alt .ink{stroke:#fff}.opt.alt .fill-pink{fill:var(--lime)}.opt.alt .fill-white{fill:var(--ink-3)}
.cal{box-shadow:inset 0 0 0 2px var(--line)}
.form{background:var(--paper)}
.field label i{color:var(--ink)}
.field input,.field select,.field textarea{color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(205,242,43,.5)}

/* studio gallery */
.gallery .shot{background:var(--paper)}
.gallery .bg{fill:var(--paper)}

/* ---------- footer (dark) ---------- */
.foot{margin-top:0;border-radius:40px 40px 0 0;background:var(--ink)}
.foot-l{background:var(--ink);color:#fff}
.foot-l p{color:#b9b9bf}
.foot-cols h3{color:var(--lime);font-family:var(--body)}
.foot-cols a{color:#fff;font:600 15px/1.35 var(--body)}
.foot-cols a:hover{color:var(--lime)}
.foot-r{background:var(--ink-2);color:#b9b9bf}
.foot-r h2{color:#fff;font-weight:900;font-stretch:118%;text-transform:uppercase;letter-spacing:-.01em;line-height:.95}
.foot-r .link{color:var(--lime)!important;background-image:linear-gradient(var(--lime),var(--lime))}
.foot-r .offices{color:#b9b9bf}
.foot-r .squig path{stroke:var(--lime);stroke-width:5}
.foot-r .socials a{background:rgba(255,255,255,.08)!important;color:#fff!important}
.foot-r .socials a:hover,.foot-r .socials a:focus-visible{background:var(--lime)!important;color:var(--ink)!important}
.copy{color:#8c8c93;opacity:1}

/* reveal */
.rv{translate:0 24px}

/* ---------- display font: Archivo Black at standard width ---------- */
*,*::before,*::after{font-stretch:100%!important}
h1,h2,.h2,.disp,.vlabel,.plan h3,.hplan h3,.hcard h3,.ptxt h3,.work h3,.foot-r h2,.cta-inline h3{letter-spacing:-.035em}
main section.hero .stage h1{font-size:clamp(42px,8.8vw,126px);line-height:.88}
main section.hero .g1{top:-70px;right:0}
main section.hero .s1{top:230px;right:70px;width:120px}