/* ==========================================================================
   Future Life Group — 9flg.com
   One stylesheet drives all fifteen pages. Approved design system:
   light and confident, brand red from the FLG logo, ink navy, generous space.
   ========================================================================== */
:root{
  --ink:#0A1628; --ink2:#48546B; --muted:#7A8496;
  --red:#C0202A; --red-d:#9C161F; --red-soft:#FDF2F2;
  --gold:#C89B3C;
  --line:#E8EBF0; --bg:#fff; --soft:#F7F8FA; --navy:#0A1628;
  --head:"Plus Jakarta Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:20px; --rs:12px;
  --sh:0 2px 4px rgba(10,22,40,.03), 0 12px 32px rgba(10,22,40,.06);
  --sh-lg:0 24px 60px rgba(10,22,40,.12);
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--body);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
h1,h2,h3,h4{font-family:var(--head);font-weight:800;letter-spacing:-.028em;line-height:1.1;margin:0 0 .4em}
h1{font-size:clamp(2.3rem,4.8vw,4rem)}
h2{font-size:clamp(1.75rem,3.1vw,2.6rem)}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.012em}
p{margin:0 0 1em;color:var(--ink2)}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-d)}
img{max-width:100%;display:block}
.lede{font-size:1.14rem;color:var(--ink2);max-width:56ch}
.eyebrow{display:inline-block;font-family:var(--head);font-size:.74rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);background:var(--red-soft);padding:7px 15px;border-radius:99px;
  margin-bottom:20px}

/* reveal */
.rise{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ------------------------------------------------------------------ topbar */
.topbar{background:var(--soft);border-bottom:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.topbar .wrap{display:flex;gap:26px;padding:10px 28px;flex-wrap:wrap;align-items:center}
.topbar a{color:var(--ink2)}
.topbar a:hover{color:var(--red)}
@media(max-width:900px){.hide-md{display:none}}
@media(max-width:620px){.hide-sm{display:none}}

/* ------------------------------------------------------------------ header */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:13px 28px}
.logo img{height:52px;width:auto}
.menu{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-family:var(--head);
  font-weight:600;font-size:.95rem;align-items:center}
.menu>li{position:relative}
/* white-space:nowrap because the menu grew from five items to eight and
   "Free career test", "Your brand" and "Buy now" each broke onto two lines,
   making the whole header look like it had been assembled by accident. The
   gap tightens to match rather than letting items wrap. */
.menu>li>a{color:var(--ink);padding:14px 0;display:inline-block;white-space:nowrap}
.menu>li>a:hover,.menu>li>a.on{color:var(--red)}
.caret{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.5}
.dropdown{position:absolute;top:100%;left:-16px;min-width:266px;background:#fff;border-radius:16px;
  box-shadow:var(--sh-lg);padding:10px;list-style:none;margin:0;display:none;border:1px solid var(--line)}
.has-sub:hover .dropdown,.has-sub:focus-within .dropdown{display:block}
.dropdown a{display:block;padding:11px 15px;border-radius:10px;font-size:.93rem;color:var(--ink2);font-weight:500}
.dropdown a:hover{background:var(--red-soft);color:var(--red)}
.navcta{display:flex;align-items:center;gap:12px}
.burger{display:none;background:#fff;border:1px solid var(--line);border-radius:12px;width:48px;height:48px;
  cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.burger span:before,.burger span:after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.burger span:before{top:-6px}.burger span:after{top:6px}
@media(max-width:1060px){.menu,.navcta .btn{display:none}.burger{display:flex}}

/* ------------------------------------------------------------------ drawer */
.drawer{position:fixed;inset:0;background:rgba(10,22,40,.5);opacity:0;visibility:hidden;
  transition:opacity .22s ease;z-index:90}
.drawer.open{opacity:1;visibility:visible}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(90%,390px);background:#fff;
  overflow-y:auto;transform:translateX(100%);transition:transform .28s cubic-bezier(.3,.7,.3,1);padding-bottom:40px}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.drawer-head img{height:46px}
.drawer-close{background:none;border:none;font-size:2rem;line-height:1;color:var(--ink2);cursor:pointer}
.drawer nav ul{list-style:none;margin:0;padding:0}
.drawer nav>ul>li{border-bottom:1px solid var(--line)}
.drawer nav a{display:block;padding:16px 22px;color:var(--ink);font-family:var(--head);font-weight:600}
.drawer nav a:hover{background:var(--soft)}
.drawer summary{list-style:none;padding:16px 22px;font-family:var(--head);font-weight:700;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary:after{content:"+";font-size:1.35rem;color:var(--red);font-weight:400}
.drawer details[open] summary:after{content:"\2013"}
.drawer details ul a{padding-left:38px;font-weight:500;font-size:.94rem;color:var(--ink2);border-top:1px solid var(--line)}
.drawer-foot{padding:24px}
.drawer-foot .btn{width:100%;justify-content:center}
.drawer-foot p{margin-top:18px;font-size:.9rem;color:var(--muted)}

/* ----------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--red);color:#fff;
  padding:14px 27px;border-radius:var(--rs);font-family:var(--head);font-weight:700;font-size:.95rem;
  border:1px solid var(--red);cursor:pointer;transition:.18s}
.btn:hover{background:var(--red-d);border-color:var(--red-d);color:#fff;transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(192,32,42,.26)}
.btn.ghost,.btn.outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover,.btn.outline:hover{background:var(--soft);color:var(--ink);box-shadow:none}
.btn.light{background:#fff;color:var(--red);border-color:#fff}
.btn.light:hover{background:#F1F2F5;color:var(--red-d)}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* -------------------------------------------------------------------- hero */
.hero{position:relative;background:linear-gradient(180deg,#FBFCFE 0%,#fff 100%);overflow:hidden;
  padding:66px 0 74px;border-bottom:1px solid var(--line)}
.hero.big{padding:80px 0 90px}
.hero:before{content:"";position:absolute;top:-190px;right:-150px;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(192,32,42,.10),rgba(192,32,42,0) 66%);pointer-events:none}
.herogrid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}
@media(max-width:980px){.herogrid{grid-template-columns:1fr;gap:36px}}
.crumb{font-size:.84rem;color:var(--muted);margin-bottom:18px;display:flex;gap:9px;align-items:center}
.crumb a{color:var(--red)}
.heroimg{position:relative}
.heroimg img{border-radius:26px;box-shadow:var(--sh-lg);width:100%;aspect-ratio:4/3;object-fit:cover}
.heroimg:after{content:"";position:absolute;inset:auto -18px -18px auto;width:190px;height:190px;
  border-radius:26px;background:var(--red);opacity:.10;z-index:-1}
@media(max-width:980px){.heroimg{display:none}}
.trust{display:flex;gap:30px;flex-wrap:wrap;margin-top:36px;padding-top:26px;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--muted)}
.trust b{display:block;font-family:var(--head);font-weight:800;color:var(--ink);font-size:1rem}

/* ---------------------------------------------------------------- sections */
section{padding:84px 0}
section.soft{background:var(--soft)}
.secthead{max-width:62ch;margin-bottom:42px}
.secthead h2{margin-bottom:.35em}

/* ------------------------------------------------------------------- cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;transition:.22s;
  display:flex;flex-direction:column}
.card:hover{box-shadow:var(--sh-lg);transform:translateY(-5px)}
.cardimg{aspect-ratio:16/10;overflow:hidden;background:var(--soft)}
.cardimg img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .cardimg img{transform:scale(1.06)}
.cardbody{padding:28px}
.csub{font-family:var(--head);font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--red);margin-bottom:10px}
.card p{margin:0;font-size:.95rem}
section.soft .card{box-shadow:0 2px 4px rgba(10,22,40,.03),0 10px 26px rgba(10,22,40,.05)}

/* -------------------------------------------------------------- statistics */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:46px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(max-width:820px){.statband{grid-template-columns:repeat(2,1fr)}}
.statband .stat{padding:36px 24px;text-align:center;border-right:1px solid var(--line)}
.statband .stat:last-child{border-right:none}
@media(max-width:820px){
  .statband .stat:nth-child(2){border-right:none}
  .statband .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
.statband b{display:block;font-family:var(--head);font-weight:800;font-size:clamp(2rem,4vw,2.9rem);
  color:var(--red);letter-spacing:-.03em;line-height:1}
.statband span{font-size:.87rem;color:var(--muted);display:block;margin-top:9px}

/* ------------------------------------------------------------------- split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:34px}}
.split.flip .splittext{order:2}
.split.flip .splitimg{order:1}
@media(max-width:900px){.split.flip .splittext{order:1}.split.flip .splitimg{order:2}}
.splitimg img{border-radius:var(--r);box-shadow:var(--sh-lg);aspect-ratio:4/3;object-fit:cover;width:100%}

/* ------------------------------------------------------------------ checks */
.checks{list-style:none;margin:26px 0 0;padding:0}
.checks li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink2);font-size:.97rem}
.checks li:last-child{border-bottom:none}
.tick{flex:0 0 22px;height:22px;border-radius:50%;background:var(--red-soft);position:relative;margin-top:2px}
.tick:after{content:"";position:absolute;left:7px;top:6px;width:5px;height:10px;border:solid var(--red);
  border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------------------------------------------------------------- cta band */
.ctaband{background:var(--navy);color:#fff;text-align:center;position:relative;overflow:hidden}
.ctaband:before{content:"";position:absolute;top:-170px;left:50%;transform:translateX(-50%);width:820px;
  height:420px;background:radial-gradient(ellipse at center,rgba(192,32,42,.32),transparent 70%);pointer-events:none}
.ctaband .wrap{position:relative}
.ctaband h2{color:#fff;max-width:22ch;margin-inline:auto}
.ctaband p{color:#AEB8C9;max-width:58ch;margin-inline:auto}
.ctaband .cta{justify-content:center}

/* ---------------------------------------------------------------- timeline */
.timeline{margin-top:36px;border-left:2px solid var(--line);padding-left:30px;max-width:78ch}
.timeline .ev{position:relative;margin-bottom:32px}
.timeline .ev:before{content:"";position:absolute;left:-37px;top:9px;width:12px;height:12px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 5px var(--red-soft)}
.timeline .ev b{display:block;font-family:var(--head);font-weight:800;font-size:1.2rem;color:var(--ink);
  margin-bottom:.3em;letter-spacing:-.02em}
.timeline .ev p{margin:0 0 .5em;font-size:.97rem}

/* ------------------------------------------------------------------- legal */
.legal{max-width:76ch}
.legal h2{margin-bottom:.6em}
.legal h3{font-family:var(--head);font-size:1.16rem;font-weight:800;margin:2em 0 .4em;color:var(--ink)}
.legal ul{padding-left:22px;color:var(--ink2)}
.legal li{margin-bottom:10px}

/* ----------------------------------------------------------------- contact */
.contactgrid{display:grid;grid-template-columns:1.2fr .8fr;gap:34px}
@media(max-width:900px){.contactgrid{grid-template-columns:1fr}}
.formcard{background:#fff;border-radius:var(--r);padding:34px;box-shadow:var(--sh)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.frow{grid-template-columns:1fr}}
.field{display:block;margin-bottom:16px}
.field span{display:block;font-family:var(--head);font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--rs);font:inherit;font-size:.96rem;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-soft)}
.notice{background:#ECFDF3;border:1px solid #A6E9C1;color:#0A6C3D;padding:14px 16px;border-radius:var(--rs);
  margin-bottom:18px;font-size:.94rem}
.contactside{display:flex;flex-direction:column;gap:16px}
.ccard{background:var(--soft);border-radius:var(--r);padding:26px}
.ccard h3{margin-bottom:.35em}
.ccard p{margin:0;font-size:.96rem}
.dim{color:var(--muted);font-size:.88rem}
.offices{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px}
@media(max-width:1000px){.offices{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.offices{grid-template-columns:1fr}}
.office{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:28px;border-top:3px solid var(--red)}
.office h3{color:var(--red);margin-bottom:.5em}
.office p{margin:0;font-size:.94rem;line-height:1.7}

/* -------------------------------------------------------------------- team */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:36px}
@media(max-width:980px){.people{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.people{grid-template-columns:1fr}}
.person{text-align:center}
.pimg{border-radius:var(--r);overflow:hidden;background:var(--soft);margin-bottom:18px;box-shadow:var(--sh)}
.pimg img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .6s ease}
.person:hover .pimg img{transform:scale(1.05)}
.person h3{margin-bottom:.15em}
.prole{font-family:var(--head);font-size:.78rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--red)}

/* ------------------------------------------------------------------ footer */
footer{background:var(--navy);color:#8B95A8;padding:64px 0 30px;font-size:.92rem}
footer a{color:#C2CADA}
footer a:hover{color:#fff}
footer p{color:#8B95A8}
.fcols{display:grid;grid-template-columns:1.5fr .85fr .85fr .85fr .85fr 1.05fr;gap:26px}
@media(max-width:1200px){.fcols{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:760px){.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fcols{grid-template-columns:1fr}}
footer h4{color:#fff;font-family:var(--head);font-size:.76rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:10px}
.flogo{background:#fff;border-radius:12px;padding:10px 14px;display:inline-block;margin-bottom:18px}
.flogo img{height:44px}
.fcontact li b{color:#fff;font-weight:700;font-family:var(--head)}
.frule{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;text-align:center;
  color:#6B7688;font-size:.85rem}

/* ==========================================================================
   OFFER PAGES — one advert, one argument, one action.
   Scoped to the .o* classes so nothing above changes. Every block is optional
   and the page decides the order, which is what makes the type reusable.
   ========================================================================== */
.ohero{background:linear-gradient(180deg,var(--red-soft) 0%,#fff 78%);padding:60px 0 54px;
  border-bottom:1px solid var(--line)}
/* Two columns only when there IS a second thing to put in one. The grid
   reserved 45% of the front page for a hero image that most pages do not set,
   so the headline sat squeezed into the left while half the screen stayed
   blank. :has() lets the layout follow the content instead of assuming it. */
.oherogrid{display:grid;grid-template-columns:1fr;gap:52px;align-items:center}
.oherogrid:has(.oheroimg),.oherogrid:has(.osignup-form){grid-template-columns:1.15fr .85fr}
.ohero h1{font-size:clamp(2.1rem,4.3vw,3.4rem);margin-bottom:.35em}
.obadge{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-size:.76rem;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red);background:#fff;
  border:1px solid #F6D3D5;padding:8px 16px;border-radius:99px;margin-bottom:20px;box-shadow:var(--sh)}
.obadge:before{content:"";width:8px;height:8px;border-radius:50%;background:#16A34A;
  box-shadow:0 0 0 4px rgba(22,163,74,.16)}
/* The hero's button row. Renamed from .octa because a navy CALL-TO-ACTION
   BAND further down this file claims the same class, and being later it
   won — so the two hero buttons sat inside a black rectangle with 56px of
   padding on the front page. Two blocks, two names. */
.oherocta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn.wa{background:#128C7E;border-color:#128C7E}
.btn.wa:hover{background:#0E6F64;border-color:#0E6F64}
.onote{font-size:.85rem;color:var(--muted);margin-top:16px}
.oheroimg img{border-radius:var(--r);box-shadow:var(--sh-lg);width:100%}
@media(max-width:860px){
  /* :has() out-specifies a bare class, so the two-column rule above BEAT this
     media query and the checkout stayed side-by-side on a phone — the four
     fields on the page that takes money were 100px wide on a 375px screen.
     Matching the specificity is what actually turns it off. */
  .oherogrid,
  .oherogrid:has(.oheroimg),
  .oherogrid:has(.osignup-form){grid-template-columns:1fr;gap:34px}
  .oheroimg{order:-1}
}

/* pill strip — light on purpose. A full-width dark band here reads as the end of
   the page and visitors stop scrolling before they reach the offer. */
.opills{background:linear-gradient(180deg,#fff 0%,var(--soft) 100%);padding:22px 0 26px;
  border-bottom:1px solid var(--line)}
.opills .wrap{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.opill{font-family:var(--head);font-size:.83rem;font-weight:600;color:var(--ink2);
  background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 16px;
  box-shadow:0 1px 2px rgba(10,22,40,.04)}
.opill:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--red);margin-right:9px;vertical-align:middle}

/* keep going — the cue that stops the hero reading as the whole page */
.oscroll{display:inline-flex;align-items:center;gap:10px;margin-top:24px;
  font-family:var(--head);font-weight:600;font-size:.9rem;color:var(--ink2)}
.oscroll:hover{color:var(--red)}
.ochev{width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line);
  position:relative;flex:none;animation:onudge 1.8s ease-in-out infinite}
.ochev:after{content:"";position:absolute;left:50%;top:46%;width:7px;height:7px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:translate(-50%,-50%) rotate(45deg)}
@keyframes onudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.ochev{animation:none}}

/* benefit cards */
.obenefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.obenefit{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;
  box-shadow:var(--sh);transition:transform .25s ease,box-shadow .25s ease}
.obenefit:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
@media(max-width:900px){.obenefits{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.obenefits{grid-template-columns:1fr}}

/* numbered services */
.oservices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.oservice{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;
  display:flex;flex-direction:column;box-shadow:var(--sh)}
.onum{font-family:var(--head);font-weight:800;font-size:1.6rem;color:var(--red);margin-bottom:14px;
  letter-spacing:-.03em}
.onum span{font-size:.9rem;color:var(--muted);font-weight:700}
.oservice p{flex:1}
.olink{font-family:var(--head);font-weight:700;font-size:.9rem}
.olink:after{content:" \2192"}
@media(max-width:900px){.oservices{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.oservices{grid-template-columns:1fr}}

/* trust strip — facts, not logos */
.otrust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.otrustitem{background:var(--soft);border:1px solid var(--line);border-radius:var(--rs);
  padding:20px 22px}
.otrustitem b{display:block;font-family:var(--head);font-size:1.05rem;margin-bottom:5px}
.otrustitem span{font-size:.87rem;color:var(--muted)}
@media(max-width:900px){.otrust{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.otrust{grid-template-columns:1fr}}

/* scrolling strip */
.omarqwrap{overflow:hidden}
.omarq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.omarqtrack{display:flex;gap:12px;width:max-content;animation:omarq 38s linear infinite}
.omarqwrap:hover .omarqtrack{animation-play-state:paused}
@keyframes omarq{to{transform:translateX(-50%)}}
.ochip{background:#fff;border:1px solid var(--line);border-radius:99px;padding:10px 20px;
  font-family:var(--head);font-weight:600;font-size:.9rem;white-space:nowrap;color:var(--ink2)}
@media(prefers-reduced-motion:reduce){.omarqtrack{animation:none;flex-wrap:wrap;width:auto}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;padding:0;margin:-1px}

/* quote cards */
.ovoices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ovoice{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;
  box-shadow:var(--sh)}
.ovoice blockquote{margin:0 0 18px;font-size:1.02rem;color:var(--ink);line-height:1.65}
.ovoice blockquote:before{content:"\201C";font-family:var(--head);font-size:3rem;color:var(--red);
  line-height:0;display:block;height:22px}
.ovoice figcaption b{display:block;font-family:var(--head)}
.ovoice figcaption span{font-size:.87rem;color:var(--muted)}
@media(max-width:900px){.ovoices{grid-template-columns:1fr}}

/* faq accordion */
.ofaq{max-width:860px;margin:0 auto}
.ofaq details{background:#fff;border:1px solid var(--line);border-radius:var(--rs);margin-bottom:12px;
  overflow:hidden}
.ofaq summary{cursor:pointer;list-style:none;padding:20px 56px 20px 24px;font-family:var(--head);
  font-weight:700;position:relative}
.ofaq summary::-webkit-details-marker{display:none}
.ofaq summary:after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:400;color:var(--red);line-height:1}
.ofaq details[open] summary:after{content:"\2013"}
.ofaqbody{padding:0 24px 22px}
.ofaqbody p{margin:0}

/* sticky action bar — phones only */
.obar{display:none}
@media(max-width:760px){
  .obar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;
    z-index:80;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .obar a{text-align:center;padding:12px 6px;border-radius:var(--rs);font-family:var(--head);
    font-weight:700;font-size:.9rem;border:1px solid var(--line);color:var(--ink)}
  .obar a.wa{background:#128C7E;border-color:#128C7E;color:#fff}
  .obar a.solid{background:var(--red);border-color:var(--red);color:#fff}
  body{padding-bottom:76px}
}

/* offers index — the list page that every offer link hangs off */
.oindex{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.oitem{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;
  box-shadow:var(--sh);display:flex;flex-direction:column}
.oitem h3{font-size:1.22rem;margin-bottom:.5em}
.oitem h3 a{color:var(--ink)}
.oitem h3 a:hover{color:var(--red)}
.oitem p{flex:1}
.oitemfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.ourl{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;
  color:var(--ink2);background:var(--soft);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;user-select:all;word-break:break-all}
@media(max-width:820px){.oindex{grid-template-columns:1fr}}

/* price tiers */
.oprice{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.otier{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:30px 26px;display:flex;flex-direction:column;box-shadow:var(--sh)}
.otier.pick{border-color:var(--red);box-shadow:var(--sh-lg)}
.otag{position:absolute;top:-12px;left:26px;background:var(--red);color:#fff;font-family:var(--head);
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:99px}
.otier h3{font-size:1.05rem;margin-bottom:.35em}
.ofig{font-family:var(--head);font-weight:800;font-size:clamp(1.5rem,2.4vw,2rem);
  letter-spacing:-.03em;color:var(--ink);margin-bottom:14px;line-height:1.15}
.otier p{flex:1;font-size:.94rem}
.otier .btn{width:100%;margin-top:8px}
.opricenote{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;
  font-size:.87rem;color:var(--muted)}
.opricenote li:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--muted);margin-right:9px;vertical-align:middle}
@media(max-width:1000px){.oprice{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.oprice{grid-template-columns:1fr}}


/* cost comparison — the per-seat maths done for the reader */
.ocmp{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  box-shadow:var(--sh)}
.ocmprow{display:grid;grid-template-columns:1fr 1.1fr 1.1fr;gap:0;align-items:center;
  border-bottom:1px solid var(--line)}
.ocmprow:last-child{border-bottom:none}
.ocmprow>span{padding:18px 22px}
.ocmphead{background:var(--soft);font-family:var(--head);font-weight:800;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ocmpthem{color:var(--ink2)}
.ocmpus{font-family:var(--head);font-weight:800;color:var(--red);
  background:linear-gradient(90deg,rgba(192,32,42,.04),rgba(192,32,42,.08))}
@media(max-width:720px){
  .ocmprow{grid-template-columns:1fr}
  .ocmphead{display:none}
  .ocmprow{padding:6px 0}
  .ocmprow>span{padding:8px 20px;display:flex;justify-content:space-between;gap:16px}
  .ocmprow>span:before{content:attr(data-l);color:var(--muted);font-size:.85rem}
}

/* ── Sign-up card + call-to-action band ──────────────────────────────────────
   For advert landing pages. The form sits ON the page: a stranger who has to
   click through to a second page before they can start mostly does not. */
.osignup{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:start}
.osignup-said h2{margin-bottom:.3em}
.oticks{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;gap:.6rem}
.oticks li{position:relative;padding-left:30px;color:var(--ink2)}
.oticks li:before{content:"✓";position:absolute;left:0;top:-1px;color:#12855C;font-weight:800}
.osignup-form{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--sh-lg)}
.osignup-form h3{font-family:var(--head);font-size:1.15rem;margin:0 0 1rem}
.osignup-form label{display:block;font-size:.82rem;color:var(--ink2);margin-bottom:.75rem}
.osignup-form input{display:block;width:100%;margin-top:.3rem;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--rs);font:inherit;font-size:.95rem}
.osignup-form input:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-soft)}
.osignup-form button{width:100%;margin-top:.4rem;background:var(--red);color:#fff;border:0;
  border-radius:var(--rs);padding:14px;font-family:var(--head);font-weight:700;
  font-size:1rem;cursor:pointer}
.osignup-form button:hover{background:var(--red-d)}
.osignup-form .dim{font-size:.8rem;color:var(--muted);margin:.9rem 0 0;text-align:center}

.octa{background:var(--navy);color:#fff;text-align:center;padding:56px 0}
.octa h2{color:#fff;margin-bottom:.35em}
.octa p{color:#C3CBD8;max-width:640px;margin:0 auto 1.4rem}

@media(max-width:860px){
  .osignup{grid-template-columns:1fr;gap:26px}
  .octa{padding:40px 0}
}

/* ── Advert pages (paid traffic) ─────────────────────────────────────────────
   Logo and one button. Every menu item is a way off a page you paid for. */
.adshead .nav{justify-content:space-between}
.adshero{padding-top:34px}
.adshero .oherogrid{align-items:center}
.adshero h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.adsticks{margin-top:1.2rem}
.adsform{position:relative}
/* On a phone the form must be the FIRST thing under the headline — Meta traffic
   is mostly phones, and a form below three screens of prose is a form nobody
   reaches. Grid order does what the markup cannot. */
/* Wide: headline top-left, promises under it, form filling the right column.
   Named areas rather than source order, because the markup is ordered for the
   PHONE — headline, then form, then promises. */
@media(min-width:861px){
  .adshero .oherogrid{display:grid;grid-template-columns:1.05fr .95fr;
    grid-template-areas:"lede form" "proof form";align-items:start;gap:0 44px}
  .adshero .oherogrid > div:first-child{grid-area:lede}
  .adshero .adsform{grid-area:form}
  .adshero .adsproof{grid-area:proof}
}
/* Phone: source order wins — headline, FORM, then the promises. Left inside the
   headline block the form sat 894px down, past a whole screen on a 375px
   handset, and Meta traffic is mostly handsets. */
@media(max-width:860px){
  .adshero .oherogrid{display:grid;grid-template-columns:1fr;gap:0}
  .adshero .adsform{margin-top:18px}
  .adshero .adsproof{margin-top:20px}
  .adshero .adsticks{margin-top:0}
}

/* ── Advert pages: the visual layer ──────────────────────────────────────────
   The first version of these pages was text on white. Both reference pages in
   this market carry 100+ images, product panels and video; ours carried none,
   and on a phone it read like a document rather than a product. A Meta advert
   is judged in the first second, so the product has to be VISIBLE. */

.adshero{position:relative;overflow:hidden;
  background:linear-gradient(160deg,#FFF6F6 0%,#FFFFFF 42%,#F3F7FF 100%)}
.adshero:before{content:"";position:absolute;top:-180px;right:-160px;width:620px;height:620px;
  border-radius:50%;background:radial-gradient(circle,rgba(192,32,42,.10),transparent 62%);
  pointer-events:none}
.adshero:after{content:"";position:absolute;bottom:-220px;left:-140px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,rgba(18,133,92,.10),transparent 62%);
  pointer-events:none}
.adshero .wrap{position:relative;z-index:1}
.osignup-form.adsform{border:0;box-shadow:0 30px 70px rgba(10,22,40,.16),0 2px 6px rgba(10,22,40,.05)}

/* The product, drawn rather than photographed — a real screen would leak a real
   customer's data, and stock photography is not the product. */
.adsmock{margin:26px 0 0;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(10,22,40,.14);border:1px solid var(--line)}
.adsmock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#F4F6F9;
  border-bottom:1px solid var(--line)}
.adsmock-bar i{width:10px;height:10px;border-radius:50%;background:#D9DEE7;display:block}
.adsmock-bar span{margin-left:8px;font-size:.72rem;color:var(--muted)}
.adsrow{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid #F1F3F7}
.adsrow:last-child{border-bottom:0}
.adsav{width:34px;height:34px;border-radius:50%;flex:0 0 34px;display:flex;align-items:center;
  justify-content:center;font-size:.8rem;font-weight:700;color:#fff;background:var(--navy)}
.adsav.g{background:#12855C}.adsav.r{background:var(--red)}.adsav.b{background:#2B5FBF}
.adsrow b{display:block;font-size:.83rem}
.adsrow p{margin:2px 0 0;font-size:.78rem;color:var(--ink2)}
.adstag{margin-left:auto;font-size:.66rem;font-weight:700;padding:3px 9px;border-radius:99px;
  background:#ECFDF3;color:#0B6B48;white-space:nowrap}
.adstag.due{background:#FEF3E7;color:#8A5300}
.adstag.new{background:#EEF3FF;color:#274B9B}

/* Cards: colour and lift, instead of four grey boxes in a row. */
.adspage .obenefit{border-radius:16px;border:1px solid var(--line);
  box-shadow:0 2px 4px rgba(10,22,40,.03),0 14px 34px rgba(10,22,40,.06);
  transition:transform .18s ease, box-shadow .18s ease}
.adspage .obenefit:hover{transform:translateY(-3px);
  box-shadow:0 8px 12px rgba(10,22,40,.05),0 26px 54px rgba(10,22,40,.11)}
.adspage .obenefit h3{position:relative;padding-left:44px;min-height:32px;display:flex;
  align-items:center}
.adspage .obenefit h3:before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:32px;height:32px;border-radius:9px;
  background:linear-gradient(140deg,var(--red-soft),#EEF3FF)}
.adspage .otrustitem{border-radius:14px;background:#fff;border:1px solid var(--line);
  padding:16px 18px;box-shadow:0 10px 26px rgba(10,22,40,.05)}
.adspage .ovoice{border-radius:16px;box-shadow:0 14px 34px rgba(10,22,40,.07)}
.adspage .octa{background:linear-gradient(135deg,#0A1628 0%,#16305A 100%)}

@media(max-width:860px){
  .adsmock{margin-top:20px}
  .adshero:before,.adshero:after{display:none}
}


/* On-this-page navigation for long offer pages. The anchor sits ABOVE its
   section with scroll-margin, or a jump lands with the heading hidden under
   the sticky header. */
.oanchor{display:block;height:0;scroll-margin-top:90px}
.ojump{background:var(--bg2,#f7f8fa);border-block:1px solid var(--line)}
.ojump .wrap{padding:14px 20px}
.ojump span{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.ojump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ojump a{display:inline-block;font-size:.85rem;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink);text-decoration:none;background:#fff;
  min-height:36px;line-height:1.4}
.ojump a:hover{border-color:var(--red);color:var(--red)}