/* TRY STYLEFORGE — the brand kit's colours and fonts only.
   Colours: Black #000000 · White #FFFFFF · Orange #fe5d39 · Purple #a438ff · Green #4fd533
            Bold Yellow #ffec38 · Gold #ffc538 · Light Blue #38b6ff · Dark Blue #3b66df
   Fonts:   Bebas (house, headlines) · Roboto (google 400/700, body — the house Montserrat file is the Thin weight, unusable for body).
            Demo pages load their own kit pairings. */

@font-face{font-family:'Bebas';src:url('/fonts/bebas.woff') format('woff');font-display:swap;}

:root{
  --black:#000000; --white:#FFFFFF; --orange:#fe5d39; --purple:#a438ff; --green:#4fd533;
  --yellow:#ffec38; --gold:#ffc538; --lblue:#38b6ff; --dblue:#3b66df;
  /* tints are the kit colours at an alpha — no new hues */
  --ink:var(--black); --paper:var(--white);
  --ink-70:rgba(0,0,0,.72); --ink-10:rgba(0,0,0,.10); --ink-05:rgba(0,0,0,.05);
  --paper-70:rgba(255,255,255,.78); --paper-15:rgba(255,255,255,.15);
  --head:'Bebas','Anton',Impact,sans-serif;
  --body:'Roboto',system-ui,sans-serif;
  --max:1180px; --gutter:16px; --radius:14px;
  --focus:0 0 0 3px var(--paper),0 0 0 6px var(--dblue);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--dblue);text-underline-offset:.15em}
a:hover{color:var(--ink)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:100;border-radius:8px}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3,.display{font-family:var(--head);font-weight:400;letter-spacing:.01em;line-height:.95;margin:0 0 .4em;text-transform:uppercase}
h1{font-size:clamp(48px,9vw,112px)}
h2{font-size:clamp(36px,5.5vw,64px)}
h3{font-size:clamp(26px,3.2vw,36px)}
h4{font-family:var(--body);font-size:1.05em;margin:0 0 .4em}
p{margin:0 0 1em}
.lede{font-size:clamp(18px,2vw,22px);max-width:36em;color:var(--ink-70)}
.eyebrow{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:15px;color:var(--orange);margin:0 0 10px}
.dark .eyebrow{color:var(--gold)}
.dark .lede{color:var(--paper-70)}

/* buttons — orange carries black text (contrast 6.8:1); black carries white */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:700;font-size:16px;line-height:1;
  padding:15px 22px;border-radius:999px;border:2px solid transparent;text-decoration:none;cursor:pointer;min-height:48px;
  transition:transform .15s ease,background .15s ease,color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--orange);color:var(--ink);border-color:var(--orange)}
.btn-primary:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-dark:hover{color:var(--paper);background:var(--dblue);border-color:var(--dblue)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.dark .btn-ghost{color:var(--paper);border-color:var(--paper)}
.dark .btn-ghost:hover{background:var(--paper);color:var(--ink)}
.btn svg{width:18px;height:18px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--ink-10)}
.site-header .bar{display:flex;align-items:center;gap:10px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand img{width:40px;height:40px}
.brand .word{font-family:var(--head);font-size:28px;line-height:1;letter-spacing:.02em}
.brand .word span{color:var(--orange)}
.nav{display:none}
.nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.nav a,.nav button{font:inherit;font-weight:700;font-size:14px;white-space:nowrap;color:var(--ink);background:none;border:0;padding:10px 9px;border-radius:8px;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav a:hover,.nav button:hover,.nav a[aria-current="page"]{background:var(--ink-05)}
.nav button svg{width:12px;height:12px;transition:transform .2s}
.nav button[aria-expanded="true"] svg{transform:rotate(180deg)}
.header-ctas{display:none;gap:8px;align-items:center}.header-ctas .btn-row{flex-wrap:nowrap}
.header-ctas .btn{padding:12px 16px;min-height:44px;font-size:15px}
.menu-toggle{font:inherit;font-weight:700;background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:12px 16px;min-height:44px;cursor:pointer}
@media (min-width:1024px){.nav{display:block}.header-ctas{display:flex}.menu-toggle{display:none}}

/* mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--ink-10);box-shadow:0 24px 48px -24px rgba(0,0,0,.35);display:none}
.mega[data-open="true"]{display:block}
.mega .wrap{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:28px;padding-top:28px;padding-bottom:32px}
.mega h3{font-size:18px;letter-spacing:.1em;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.mega h3.g-Prospecting{border-color:var(--purple)}.mega h3.g-Creative{border-color:var(--orange)}
.mega h3.g-Proof{border-color:var(--dblue)}.mega h3.g-Publishing{border-color:var(--green)}.mega h3.g-Platform{border-color:var(--gold)}
.mega ul{list-style:none;margin:0;padding:0}
.mega li a{display:block;padding:7px 8px;margin:0 -8px;border-radius:6px;color:var(--ink);text-decoration:none;font-weight:700;font-size:15px}
.mega li a small{display:block;font-weight:400;color:var(--ink-70);font-size:13px;line-height:1.35;margin-top:2px}
.mega li a:hover{background:var(--ink-05)}
.mega .area{background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:20px}
.mega .area h3{border-color:var(--gold);color:var(--paper)}
.mega .area p{color:var(--paper-70);font-size:14px;margin:0 0 10px}
.mega .area a{color:var(--gold)}
.demo-card{display:block;border:1px solid var(--ink-10);border-radius:var(--radius);padding:18px;text-decoration:none;color:var(--ink);background:var(--paper)}
.demo-card:hover{border-color:var(--ink)}
.demo-card .swatch{height:8px;border-radius:4px;margin-bottom:12px}
.demo-card strong{display:block;font-family:var(--head);font-size:24px;letter-spacing:.03em;text-transform:uppercase}
.demo-card span{color:var(--ink-70);font-size:14px}

/* mobile drawer */
.drawer{display:none;background:var(--paper);border-bottom:1px solid var(--ink-10)}
.drawer[data-open="true"]{display:block}
.drawer .wrap{padding-top:12px;padding-bottom:20px}
.drawer details{border-top:1px solid var(--ink-10)}
.drawer summary{font-weight:700;padding:14px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:'+';font-family:var(--head);font-size:22px}
.drawer details[open] summary::after{content:'–'}
.drawer ul{list-style:none;margin:0 0 12px;padding:0 0 0 12px}
.drawer li a{display:block;padding:9px 0;color:var(--ink);text-decoration:none;font-weight:700}
.drawer>.wrap>a{display:block;padding:14px 0;border-top:1px solid var(--ink-10);color:var(--ink);text-decoration:none;font-weight:700}
.drawer .btn-row{margin-top:16px}
@media (min-width:1024px){.drawer{display:none!important}}

/* sections */
section{padding:clamp(56px,8vw,112px) 0}
.dark{background:var(--ink);color:var(--paper)}
.dark a{color:var(--gold)}
.dark h1 span,.dark h2 span{color:var(--gold)}
.light h1 span,.light h2 span,h1 span.o{color:var(--orange)}
.hero{padding:clamp(64px,10vw,140px) 0 clamp(56px,8vw,100px);position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero .lede{margin-bottom:28px}
.hero-mark{position:absolute;right:-6vw;top:-4vw;width:min(52vw,560px);opacity:.14;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,#000 40%,transparent);mask:linear-gradient(180deg,#000 40%,transparent)}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:1fr 1fr}
@media (min-width:720px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{border:1px solid var(--ink-10);border-radius:var(--radius);padding:24px;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;gap:8px;text-decoration:none;position:relative}
.card:hover{border-color:var(--ink)}
.card .tag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tag-Prospecting{color:var(--purple)}.tag-Creative{color:var(--orange)}.tag-Proof{color:var(--dblue)}.tag-Publishing{color:var(--dblue)}.tag-Platform{color:var(--ink-70)}
.card h3{font-size:28px;margin:0}
.card p{color:var(--ink-70);margin:0;font-size:15px}
.card .more{margin-top:auto;font-weight:700;color:var(--ink)}
.dark .card{background:transparent;border-color:var(--paper-15);color:var(--paper)}
.dark .card p{color:var(--paper-70)}.dark .card .more{color:var(--gold)}
.dark .tag-Publishing{color:var(--green)}.dark .tag-Platform{color:var(--gold)}.dark .tag-Proof{color:var(--lblue)}
.stripe{height:6px;background:linear-gradient(90deg,var(--orange),var(--gold),var(--yellow),var(--green),var(--lblue),var(--dblue),var(--purple))}
.stat{font-family:var(--head);font-size:clamp(44px,6vw,72px);line-height:1;color:var(--orange)}
.dark .stat{color:var(--gold)}
.stat+p{color:var(--ink-70);font-size:15px}
.dark .stat+p{color:var(--paper-70)}
.two{display:grid;gap:32px;align-items:center}
@media (min-width:860px){.two{grid-template-columns:1.1fr .9fr}}
.callout{border-left:6px solid var(--orange);padding:6px 0 6px 20px;font-size:1.1em}
.dark .callout{border-color:var(--gold)}
.list{padding-left:1.2em}.list li{margin-bottom:.4em}
blockquote{font-family:var(--head);font-size:clamp(28px,4vw,44px);line-height:1.05;text-transform:uppercase;margin:0;letter-spacing:.01em}
blockquote cite{display:block;font-family:var(--body);font-size:15px;text-transform:none;letter-spacing:0;margin-top:14px;color:var(--ink-70);font-style:normal}
.dark blockquote cite{color:var(--paper-70)}

/* faq */
.faq details{border-top:1px solid var(--ink-10)}
.faq details:last-child{border-bottom:1px solid var(--ink-10)}
.faq summary{cursor:pointer;font-weight:700;padding:18px 40px 18px 0;position:relative;list-style:none;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:12px;font-family:var(--head);font-size:30px;color:var(--orange)}
.faq details[open] summary::after{content:'–'}
.faq .a{padding:0 0 20px;color:var(--ink-70);max-width:60ch}
.dark .faq details{border-color:var(--paper-15)}.dark .faq .a{color:var(--paper-70)}.dark .faq summary::after{color:var(--gold)}

/* forms */
form.sf{display:grid;gap:16px;max-width:620px}
form.sf .row{display:grid;gap:16px}
@media (min-width:600px){form.sf .row{grid-template-columns:1fr 1fr}}
form.sf label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
form.sf label .req{color:var(--orange)}
form.sf input:not([type=checkbox]),form.sf select,form.sf textarea{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:2px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);min-height:48px}
form.sf textarea{min-height:140px;resize:vertical}
form.sf input:focus-visible,form.sf select:focus-visible,form.sf textarea:focus-visible{box-shadow:var(--focus);border-radius:10px}
form.sf .check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15px}
form.sf .check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--orange)}
form.sf .hint{font-size:14px;color:var(--ink-70);margin:0}
form.sf .btn{justify-self:start}
form.sf [hidden]{display:none!important}
.form-done{border:2px solid var(--green);background:var(--ink);color:var(--paper);padding:24px;border-radius:var(--radius);max-width:620px}
.form-done h3{color:var(--green);margin:0 0 6px}
.form-done p{margin:0;color:var(--paper-70)}
.form-error{color:var(--orange);font-weight:700;margin:0}
.dark form.sf input:not([type=checkbox]),.dark form.sf select,.dark form.sf textarea{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.dark form.sf .hint{color:var(--paper-70)}
.newsletter{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;max-width:520px}
.newsletter .field{flex:1 1 220px}
.newsletter input{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:2px solid var(--paper);border-radius:10px;min-height:48px;background:var(--paper);color:var(--ink)}
.newsletter label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}

/* blog */
.post{max-width:70ch}
.post p,.post li{font-size:18px;line-height:1.7}
.post h2{font-size:clamp(30px,4vw,44px);margin-top:1.4em}
.meta{font-size:14px;color:var(--ink-70);margin:0 0 24px}
.dark .meta{color:var(--paper-70)}

/* footer */
.site-footer{background:var(--ink);color:var(--paper);padding:56px 0 32px}
.site-footer .cols{display:grid;gap:32px}
@media (min-width:860px){.site-footer .cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.site-footer h3{font-size:20px;letter-spacing:.1em;color:var(--gold);margin-bottom:12px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
.site-footer a{color:var(--paper);text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.site-footer p{color:var(--paper-70);font-size:15px}
.site-footer .legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--paper-15);font-size:13px;color:var(--paper-70);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}

/* mobile sticky call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--ink-10)}
.callbar .btn{justify-content:center;width:100%}
@media (min-width:1024px){.callbar{display:none}}
@media (max-width:1023px){body{padding-bottom:84px}}

/* motion — subtle reveals; content is visible without JS and under reduced motion */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-delay="1"]{transition-delay:.08s}.js .reveal[data-delay="2"]{transition-delay:.16s}.js .reveal[data-delay="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* demo bar (top of the showcase pages) */
.demo-bar{background:var(--ink);color:var(--paper);font-size:14px;padding:10px 0}
.demo-bar .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between}
.demo-bar a{color:var(--gold)}
.demo-bar strong{color:var(--gold)}