/* ============================================================
   Citex-style landing page — structural clone
   ============================================================ */

:root{
  --slate-black:#0f0d0a;
  --grey:#57514a;
  --dark-grey:#4a453f;
  --alt-grey:#8d8781;
  --light-grey-outline:#e0ddda;
  --background:#f1f0ef;
  --white:#fff;
  --blue:#1f5ff2;
  /* hero / inner-hero / auth backdrop - the artwork, plus a ramp that stands in if it fails to load */
  --hero-art:url("assets/auth-gradient.jpg");
  --grad-base:#000;
  --grad-top:#02061f;
  --grad-mid:rgba(9,18,85,.92);
  --grad-low:rgba(61,149,220,.55);
  --pink:#ffb2d6;
  --radius-card:1.5rem;
  --font-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* display headings are the same family, just tighter and heavier */
  --font-display:var(--font-sans);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
@media(max-width:991px){html{font-size:15px}}

body{
  margin:0;
  background:var(--background);
  color:var(--slate-black);
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
*::selection{background:#000;color:#fff}

h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,5.6vw,4.1rem);line-height:1.04;font-family:var(--font-display);font-weight:600;letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,3.4vw,2.75rem);line-height:1.12}
h3{font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.2;font-weight:500}
p{margin:0}

.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em}
.has-shadow{text-shadow:0 2px 24px rgba(10,12,40,.28)}

/* ---------- utilities ---------- */
.padding-global{padding-left:2.5rem;padding-right:2.5rem}
.container-medium{width:100%;max-width:65rem;margin:0 auto}
.container-full{width:100%;position:relative}
.max-width-large{max-width:52rem}
.max-width-medium{max-width:38rem}
.max-width-small{max-width:26rem}
.align-center{margin-left:auto;margin-right:auto}
.text-align-center{text-align:center}
.spacer-xxtiny{height:.4rem}.spacer-xtiny{height:.6rem}.spacer-tiny{height:1rem}
.spacer-xxxsmall{height:1.25rem}.spacer-xxsmall{height:1.5rem}.spacer-medium{height:2.5rem}
.text-size-medium{font-size:1.25rem;line-height:1.45}
.text-size-regular{font-size:1rem;line-height:1.55}
.text-size-tiny{font-size:.85rem}
.text-colour-white{color:#fff}
.text-colour-white-70{color:rgba(255,255,255,.7)}
.text-colour-semi-transparent{color:rgba(255,255,255,.82)}
.text-colour-dark-grey{color:var(--dark-grey)}
.eyebrow{font-size:.8rem;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--alt-grey)}

/* ---------- buttons ---------- */
.button{
  display:inline-block;background:var(--slate-black);color:#fff;
  border:1px solid transparent;border-radius:200px;
  padding:.7rem 1.6rem;font-size:.938rem;font-weight:600;line-height:1.4;
  cursor:pointer;transition:background-color .25s,transform .25s,box-shadow .25s;
  box-shadow:inset 0 -2px 5px 2px rgba(255,255,255,.3);
  font-family:inherit;
}
.button:hover{background:#2a2621;transform:translateY(-1px)}
.button.is-white{
  background:#fff;color:var(--slate-black);
  border-color:#dedfec;
  box-shadow:inset 0 -2px 2px rgba(100,100,100,.08),0 2px 10px rgba(8,8,8,.12);
  padding:.85rem 2rem;font-size:1rem;
}
.button.is-white:hover{background:#f6f6f8}
/* ---- language selector ---- */
.lang-select{position:relative;margin-left:.3rem}
.lang-toggle{
  display:flex;align-items:center;gap:.35rem;
  background:transparent;border:0;cursor:pointer;font-family:inherit;
  color:var(--grey);border-radius:200px;padding:.4rem .6rem;
  transition:background-color .25s;
}
.lang-toggle:hover,.lang-select.is-open .lang-toggle{background:var(--background)}
.lang-flag{font-size:1.15rem;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.lang-caret{transition:transform .2s ease;color:var(--alt-grey)}
.lang-select.is-open .lang-caret{transform:rotate(180deg)}

.lang-menu{
  position:absolute;top:calc(100% + .6rem);left:50%;transform:translateX(-50%);
  z-index:60;margin:0;padding:.35rem;list-style:none;
  min-width:11rem;background:#fff;border:1px solid var(--light-grey-outline);
  border-radius:.85rem;
  box-shadow:0 2px 30px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.06);
}
.lang-menu li{margin:0;list-style:none}
.lang-menu a{
  display:flex;align-items:center;gap:.6rem;width:100%;
  background:transparent;border:0;cursor:pointer;font-family:inherit;
  color:var(--grey);text-align:left;border-radius:.6rem;
  padding:.5rem .65rem;font-size:.95rem;font-weight:500;
  text-decoration:none;white-space:nowrap;
  transition:background-color .2s,color .2s;
}
.lang-menu a .lang-flag{flex:none}
.lang-menu a:hover{background:var(--background);color:var(--slate-black)}
.lang-menu a[aria-selected="true"]{color:var(--slate-black);font-weight:600}

.button.is-nav-button{padding:.55rem 1.2rem}

/* ============================================================
   NAV  — white floating pill
   The pill stays with the reader the whole way down the page, and the
   padding here is the gap that keeps it floating clear of the top edge
   rather than stuck against it. Nothing may shift it upwards on scroll:
   the gap is smaller than 1.25rem on phones, so even a small nudge
   crops the pill against the top of the screen.
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto;z-index:50;
  background:transparent;padding:2.25rem 5rem 0;
  display:flex;justify-content:space-between;align-items:center;
}

.wrapper-full{
  width:100%;background:#fff;border:1px solid rgba(255,255,255,.19);border-radius:200px;
  display:flex;justify-content:space-between;align-items:center;
  padding:.6rem .7rem .6rem 1.2rem;position:relative;
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.03),0 2px 30px rgba(0,0,0,.1),
             0 1px 2px rgba(0,0,0,.05),0 2px 20px rgba(0,0,0,.02);
}

.brand{display:flex;align-items:center;gap:.7rem;margin-right:3rem;z-index:2}
.nav-logo{display:block}
.nav-logo.is-logomark{width:1.52rem;max-width:3rem;height:auto;flex:none}
.wordmark{font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1;color:var(--slate-black);letter-spacing:-.03em}

.nav-menu{display:flex;justify-content:flex-end;align-items:center}
.open-nav-line{display:none}
.nav-link{
  color:var(--grey);background:transparent;border-radius:200px;
  margin-left:.3rem;padding:.5rem .75rem;
  font-size:1.06rem;font-weight:500;line-height:1.4;
  transition:background-color .25s;
}
.nav-link:hover{background:var(--background)}
.nav-link.is-current{background:var(--background);color:var(--slate-black)}
.button.is-nav-button{
  display:flex;justify-content:center;align-items:center;gap:.5rem;
  margin-left:.7rem;padding:.62rem 1.35rem;font-size:1.02rem;line-height:1.5;color:#fff;
}

.menu-button{display:none;z-index:2;width:25px;height:28px;padding:0;cursor:pointer;position:relative;top:2px;
  -webkit-tap-highlight-color:transparent;user-select:none}
.menu-line,.menu-line-middle,.menu-line-bottom{
  background:var(--slate-black);width:25px;height:2px;position:relative;
  transition:transform .25s ease,opacity .2s ease;
}
.menu-line{top:5px}
.menu-line-middle{top:10px}
.menu-line-bottom{top:15px}
.menu-button.is-open .menu-line{transform:translateY(5px) rotate(45deg)}
.menu-button.is-open .menu-line-middle{opacity:0}
.menu-button.is-open .menu-line-bottom{transform:translateY(-5px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.page-wrapper{position:relative}
.gradient-top-section{
  position:absolute;inset:0;height:140vh;pointer-events:none;
  background-color:var(--grad-base);
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(var(--grad-top) 7%,var(--grad-mid) 46%,var(--grad-low) 78%,rgba(255,255,255,0)),
    var(--hero-art);
  background-size:64px 64px,64px 64px,auto,100% 100%;
  background-position:50% 0,50% 0,0 0,50% 0;
  background-repeat:repeat,repeat,no-repeat,no-repeat;
  background-blend-mode:normal,normal,soft-light,normal;
  -webkit-mask-image:linear-gradient(#000 0%,#000 62%,transparent 96%);
  mask-image:linear-gradient(#000 0%,#000 62%,transparent 96%);
  box-shadow:inset 0 0 12px 6px rgba(255,255,255,.15);
}
.section-hero{position:relative;padding:1rem 1rem 0;overflow:hidden}
.is-hero-container{padding-top:11rem}

.cloud{position:absolute;opacity:.95;filter:drop-shadow(0 12px 30px rgba(20,30,90,.18));will-change:transform}
.cloud-1{width:240px;top:8%;left:-85px}
.cloud-2{width:265px;top:9%;right:-95px}
.cloud-3{width:180px;top:34%;left:4%}
.cloud-4{width:150px;top:30%;right:6%;opacity:.75}
@media(max-width:991px){.cloud-3,.cloud-4{display:none}}
@media(max-width:767px){.cloud{display:none}}

.screenshot-holder{position:relative;z-index:1;padding:0 3rem;max-width:72rem;margin:0 auto}
.inner-screenshot{
  border:8px solid rgba(255,255,255,.22);border-bottom:none;
  border-radius:1.5rem 1.5rem 0 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%);
}
@media(max-width:767px){.screenshot-holder{padding:0}}

/* ---- "try a real demo" under the hero mock ---- */
.hero-demo{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:.6rem;padding:1.75rem 1rem 0;text-align:center}
.button.is-demo{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.72rem 1.5rem;font-size:.95rem;
  box-shadow:inset 0 -2px 5px 2px rgba(255,255,255,.3),0 10px 26px rgba(12,14,40,.18);
}
.button.is-demo svg{opacity:.75;transition:transform .25s}
.button.is-demo:hover svg{transform:translateX(3px)}
.hero-demo-dot{width:.45rem;height:.45rem;border-radius:999px;flex:none;background:#5cd6a4;
  box-shadow:0 0 0 .22rem rgba(92,214,164,.22)}
.hero-demo-note{font-size:.82rem;color:var(--alt-grey)}
@media(max-width:767px){.hero-demo{padding-top:1.25rem}
  .hero-demo-note{color:#000;font-weight:500}}

/* ---------- mock dashboard ---------- */
.ui{display:flex;background:#fff;text-align:left;font-size:.72rem;min-height:30rem}
.ui-side{width:11rem;flex:none;border-right:1px solid #eeecea;padding:1rem;background:#fbfaf9}
.ui-brand{display:flex;align-items:center;gap:.45rem;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;font-size:.95rem;color:var(--slate-black);margin-bottom:1.25rem}
.logomark{width:1.1rem;height:auto;display:inline-block;flex:none}
.logomark.small{width:.95rem;height:auto}
.ui-nav{display:flex;flex-direction:column;gap:.15rem}
.ui-nav span{padding:.42rem .6rem;border-radius:.5rem;color:var(--grey)}
.ui-nav .is-active{background:#fff;color:var(--slate-black);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.ui-main{flex:1;padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.85rem;min-width:0}
.ui-topbar{display:flex;justify-content:space-between;align-items:flex-start}
.ui-title{font-size:1rem;font-weight:600}
.ui-sub{color:var(--alt-grey)}
.ui-chips{display:flex;gap:.4rem}
.ui-chips span{border:1px solid #e8e6e3;border-radius:999px;padding:.25rem .7rem;color:var(--grey)}
.ui-chips .dark{background:var(--slate-black);color:#fff;border-color:var(--slate-black)}
.ui-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.ui-stat{border:1px solid #eeecea;border-radius:.75rem;padding:.65rem .75rem;display:flex;flex-direction:column;gap:.15rem}
.ui-stat span{color:var(--alt-grey);font-size:.68rem}
.ui-stat b{font-size:1.1rem;font-weight:600}
.ui-stat i,.up,.down{font-style:normal;font-size:.68rem;font-weight:600}
.up{color:#1a8f5c}.down{color:#c0453c}
.ui-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:.6rem}
.ui-card{border:1px solid #eeecea;border-radius:.85rem;padding:.75rem .85rem;background:#fff}
.ui-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;font-weight:600}
.ui-card-head em{font-style:normal;color:var(--alt-grey);font-weight:400}
.ui-chart{width:100%;height:5.5rem}
.ui-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.ui-bars li{display:grid;grid-template-columns:4.5rem 1fr 2rem;align-items:center;gap:.5rem;color:var(--grey)}
.bar{height:.4rem;border-radius:999px;background:#efeeec;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1f5ff2,#9470ff)}
.ui-bars b{text-align:right;font-weight:600;color:var(--slate-black)}
.ui-table{width:100%;border-collapse:collapse}
.ui-table th{text-align:left;color:var(--alt-grey);font-weight:500;padding:.3rem .4rem;border-bottom:1px solid #f0eeec}
.ui-table td{padding:.42rem .4rem;border-bottom:1px solid #f6f5f4;color:var(--grey)}
.ui-table tr.is-you td{background:#f5f8ff;color:var(--slate-black);font-weight:600}
.ui-table em{font-style:normal;background:#1f5ff2;color:#fff;border-radius:999px;padding:.05rem .4rem;font-size:.6rem;margin-left:.35rem}

/* ---- Geist Mono: figures, prompts, technical strings and AI citations ---- */
.ui-stat b,.ui-bars b,.ui-table td,
.gc-table td,.ring b,.am-score .ring b,
.gc-checks li,.am-list li,
.gc-list li{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
/* the label half of an insight row stays in the text face */
.gc-list .tag{font-family:var(--font-sans);letter-spacing:0}
.ui-table th{font-variant-numeric:tabular-nums}

/* ============================================================
   INTRO
   ============================================================ */
.section-intro{position:relative;padding-top:8rem;padding-bottom:2rem}
.intro-heading{font-size:clamp(1.5rem,2.7vw,2.15rem);line-height:1.3;font-weight:700;letter-spacing:-.02em}
.intro-heading .muted{color:var(--alt-grey);font-weight:500}
/* on a phone the grey runs the full width of the screen and loses the
   contrast it holds on a narrow desktop column, so the whole sentence is
   black there — the lighter weight alone carries the emphasis */
@media(max-width:767px){.intro-heading .muted{color:var(--slate-black)}}

/* ============================================================
   FEATURES
   ============================================================ */
.section-features{padding-top:4rem;padding-bottom:4rem}
.is-feature-flex{display:flex;flex-direction:column;gap:1.25rem}
.feature-card{
  background:#fff;border-radius:var(--radius-card);display:flex;overflow:hidden;
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.03),0 1px 2px rgba(0,0,0,.05),0 2px 20px rgba(0,0,0,.03);
}
.feature-card-left{width:50%;padding:3rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.feature-card-right{
  width:50%;padding:2.75rem;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:1rem;min-height:22rem;
}
/* all four panels frame the artwork exactly like the login/signup panel:
   the full image rather than a zoomed-in crop of its most saturated corner */
.tint-a,.tint-b,.tint-c,.tint-d{
  background-color:#0b1020;
  background-image:var(--hero-art);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:50% 50%;
}
/* and the same scrim, so the cards keep their contrast top and bottom */
.tint-a::after,.tint-b::after,.tint-c::after,.tint-d::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,20,.30) 0%,rgba(6,8,20,.10) 38%,rgba(6,8,20,.62) 100%);
}
.feature-card-right > *{position:relative;z-index:1}

.glass-card{
  background:rgba(255,255,255,.92);border-radius:1rem;padding:1rem 1.1rem;
  box-shadow:0 10px 40px rgba(20,10,40,.22);font-size:.85rem;
}
.glass-card.small{width:60%}
.glass-card.wide{width:100%}
.glass-card.offset{margin-left:auto;margin-top:-.4rem}
.gc-head{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:.6rem}
.gc-head em{font-style:normal;color:var(--alt-grey);font-weight:400;font-size:.78rem}
.gc-big{font-size:1.9rem;font-weight:600;line-height:1;font-family:var(--font-mono);letter-spacing:-.03em}
.gc-split{display:flex;gap:1rem;margin:.6rem 0;color:var(--grey);font-size:.8rem}
.gc-split b{color:var(--slate-black)}
.dot{display:inline-block;width:.5rem;height:.5rem;border-radius:999px;margin-right:.35rem}
.dot.blue{background:#1f5ff2}.dot.pink{background:#ff8fc0}
.gc-bar{height:.45rem;border-radius:999px;background:#efeeec;overflow:hidden}
.gc-bar i{display:block;height:100%;background:linear-gradient(90deg,#1f5ff2,#9470ff)}
.gc-table{width:100%;border-collapse:collapse;font-size:.8rem}
.gc-table td{padding:.35rem .3rem;border-bottom:1px solid #f2f0ee;color:var(--grey)}
.gc-table tr.is-you td{background:#f5f8ff;color:var(--slate-black);font-weight:600}
.gc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;font-size:.82rem;color:var(--grey)}
.gc-list li{display:flex;gap:.5rem;align-items:flex-start}
.tag{flex:none;background:#f0eefc;color:#6048f8;border-radius:999px;padding:.1rem .5rem;font-size:.68rem;font-weight:600}
.gc-checks{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem;font-size:.8rem;color:var(--grey)}
.gc-checks li::before,.am-list li::before{content:"✓";margin-right:.45rem;font-weight:700;color:#1a8f5c}
.gc-checks li.warn::before,.am-list li.warn::before{content:"!";color:#c98a1f}
.score{display:flex;align-items:baseline;gap:.5rem}
.score b{font-size:2.2rem;font-family:var(--font-mono);font-weight:600;letter-spacing:-.03em;line-height:1}
.score span{color:#1a8f5c;font-weight:600}
.gc-legend{display:flex;gap:.8rem;justify-content:center;font-size:.75rem;color:var(--grey);margin-top:.5rem}
.gc-legend i{display:inline-block;width:.5rem;height:.5rem;border-radius:999px;margin-right:.3rem}

.ring{position:relative;width:5rem;height:5rem;margin:0 auto}
.ring.big{width:6.5rem;height:6.5rem;margin:0}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring circle{fill:none;stroke-width:3.2;stroke-linecap:round}
.ring-bg{stroke:#eeecea}
.ring-fg{stroke:#1f5ff2;stroke-dasharray:calc(var(--p) * 0.974) 100}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.1rem;font-weight:600}
.donut-card{display:flex;flex-direction:column;align-items:center}
.donut{
  width:6rem;height:6rem;border-radius:999px;
  background:conic-gradient(#1f5ff2 0 calc(var(--a)*1%),#ff8fc0 0 calc(var(--b)*1%),#e7e5e2 0);
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 53%);
  mask:radial-gradient(circle,transparent 52%,#000 53%);
}

/* ============================================================
   MARQUEE
   ============================================================ */
.section-trust{padding-top:3rem;padding-bottom:4rem;overflow:hidden}
.trust-title{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.5rem}
.marquee{position:relative;height:3.75rem;margin-bottom:1rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{position:absolute;display:flex;gap:1rem;white-space:nowrap;will-change:transform}
.marquee[data-dir="left"] .track{animation:marquee-left 70s linear infinite}
.marquee[data-dir="right"] .track{animation:marquee-right 70s linear infinite}
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.track{animation:none!important}}
.marquee:hover .track{animation-play-state:paused}
.feature-pill{
  display:flex;align-items:center;gap:.625rem;flex:none;
  background:#fff;border:1px solid rgba(15,13,10,.05);border-radius:999px;
  padding:.5rem .938rem .5rem .5rem;font-size:.9rem;color:var(--dark-grey);
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.03),0 2px 20px rgba(0,0,0,.02),0 1px 2px rgba(0,0,0,.05);
}
/* the mark sits in a tinted disc — brand tints for features, neutral for the platform logos */
.pill-mark{
  width:1.75rem;height:1.75rem;border-radius:999px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.pill-mark svg{display:block}
.pill-mark.is-blue{background:rgba(31,95,242,.1);color:var(--blue)}
.pill-mark.is-pink{background:rgba(255,178,214,.45);color:var(--slate-black)}
.pill-mark.is-slate{background:rgba(15,13,10,.06);color:var(--slate-black)}
.pill-mark.is-logo{background:rgba(15,13,10,.045)}

/* ============================================================
   AUDIT CTA
   ============================================================ */
.section-audit-cta{padding-top:2rem;padding-bottom:4rem}
.audit-cta{
  border-radius:var(--radius-card);display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  padding:4rem 0 0 3rem;overflow:hidden;position:relative;
  background-color:var(--grad-base);
  background-image:
    linear-gradient(100deg,rgba(6,8,20,.58),rgba(6,8,20,.18) 58%,rgba(6,8,20,.02)),
    var(--hero-art);
  background-size:auto,cover;
  background-position:0 0,50% 92%;
  background-repeat:no-repeat,no-repeat;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.16),0 10px 40px rgba(0,0,0,.14);
}
.audit-cta-left{padding-bottom:4rem;max-width:30rem}
.audit-cta h2{margin-bottom:.75rem}
.form_label{display:block;color:#fff;font-size:.9rem;font-weight:500}
.form_label .dim{color:rgba(255,255,255,.7)}
.flex-form{display:flex;gap:.5rem}
.form_input{
  flex:1;min-height:3.5rem;background:#fff;color:var(--slate-black);
  border:1px solid #e7e7e7;border-radius:.6rem;padding:.5rem 1.25rem;font-size:.9rem;font-family:inherit;
  box-shadow:0 2px 5px rgba(0,0,0,.05);
}
.form_input:focus{outline:2px solid #4d65ff;outline-offset:2px}
.button.is-signup-form{border-radius:.6rem;padding:.5rem 1.5rem;min-height:3.5rem}
.form-msg{color:#fff;margin-top:.75rem;font-size:.9rem}
.image-collage-footer{width:28rem;flex:none;margin-top:auto}
.audit-mock{
  background:#fff;border-radius:1rem 0 0 0;padding:1.25rem;font-size:.85rem;
  box-shadow:0 -10px 50px rgba(0,0,0,.3);transform:translateY(0);
}
.am-head{display:flex;justify-content:space-between;font-weight:600;margin-bottom:1rem}
.am-head em{font-style:normal;color:var(--alt-grey);font-weight:400}
.am-score{display:flex;align-items:center;gap:1rem}
.am-label{font-family:var(--font-display);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.am-label span{display:block;font-family:var(--font-sans);font-size:.78rem;color:var(--alt-grey)}
.am-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem;color:var(--grey)}

/* ============================================================
   PRICING
   ============================================================ */
.section-pricing{padding-top:3rem;padding-bottom:4rem}
.pricing-head{text-align:center;margin-bottom:2.5rem}
.pricing-head p{margin-top:.6rem;color:var(--alt-grey)}
.pricing-tabs{
  display:inline-grid;grid-template-columns:1fr 1fr;justify-content:center;align-items:center;
  background:#fff;border:1px solid var(--light-grey-outline);border-radius:200px;
  padding:.25rem;text-align:center;margin-top:1.5rem;
}
.pricing-tab{
  border:0;cursor:pointer;font-family:inherit;
  color:var(--slate-brown);background:transparent;border-radius:200px;
  padding:.625rem 1.5rem;font-size:.75rem;font-weight:600;line-height:1;
  letter-spacing:.03rem;text-transform:uppercase;transition:color .25s,background-color .25s;
}
.pricing-tab.is-current{
  background:var(--slate-black);color:var(--white);
  box-shadow:inset 0 -2px 5px 2px rgba(255,255,255,.3);
}

.pricing-boxes-wrapper{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem;width:100%;margin-top:2.5rem;
}
.pricing-box{
  position:relative;overflow:hidden;background:#fff;border-radius:1rem;
  display:flex;flex-flow:column;padding:2rem 2rem 1rem;
}
.pricing-box.box-shadow{
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.03),
             0 .48px 1.25px -1.33px rgba(0,0,0,.15),
             0 1.83px 4.76px -2.67px rgba(0,0,0,.12),
             0 8px 20.8px -4px rgba(0,0,0,.03);
}
.pricing-strip{
  position:absolute;top:0;left:0;width:100%;height:.4rem;
  border-radius:1rem 1rem 0 0;
  background:linear-gradient(90deg,#1f5ff2,#9470ff 50%,#ffb2d6);
}
.pricing-header{display:flex;flex-flow:column;flex:1;justify-content:space-between;align-items:stretch}
/* the plan button runs the full card width, so the label alone left a dead
   right half - the arrow anchors that edge and slides on hover */
.button.is-plan{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding-left:1.5rem;padding-right:1.35rem;
}
.button.is-plan svg{flex:none;opacity:.75;transition:transform .25s}
.button.is-plan:hover svg{transform:translateX(3px)}
.plan-header{display:flex;flex-flow:column;align-items:flex-start;gap:.1rem}
.price-wrapper{display:flex;justify-content:flex-start;align-items:flex-end;gap:.3rem}
.timespan{position:relative;top:-.5rem}
.heading-style-h2{font-family:var(--font-sans);font-size:2.5rem;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.text-size-large{margin-bottom:0;font-size:1.5rem;line-height:1.4}
.text-weight-semibold{font-weight:600}
.text-colour-light-grey{color:var(--slate-brown)}
.text-size-xsmall{font-size:.82rem;line-height:1.4}

.checkmark-table{margin-top:1.75rem}
.checkmark-row{
  display:flex;justify-content:flex-start;align-items:center;gap:.5rem;
  border-bottom:1px solid var(--light-grey-outline);
  padding:.75rem 0 .75rem .219rem;
}
.checkmark-row.is-end{border-bottom:none}
.embed-icon{display:flex;flex-direction:column;justify-content:center;max-width:1rem;flex:none}

.pricing-note{text-align:center;color:var(--alt-grey);margin-top:1.5rem;font-size:.9rem}
.pricing-note a{color:var(--slate-black);text-decoration:underline}

/* ============================================================
   INNER PAGES  (FAQ)
   ============================================================ */
.hero-nav-wrapper{position:absolute;inset:0 0 auto}

.section-inner-hero{position:relative;padding-top:11rem;padding-bottom:2rem}
/* the backdrop lives in its own layer that runs past the bottom of the section,
   so the fade has real distance to travel instead of cutting off at the edge */
.section-inner-hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:0;right:0;top:0;bottom:-9rem;
  background-color:var(--grad-base);
  background-image:var(--hero-art);
  background-size:100% 150%;background-position:50% 0;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(#000 0%,#000 38%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.28) 84%,transparent 100%);
  mask-image:linear-gradient(#000 0%,#000 38%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.28) 84%,transparent 100%);
}
.section-inner-hero > *{position:relative;z-index:1}
.section-inner-hero h1{color:#fff;text-shadow:0 2px 24px rgba(6,8,20,.35)}
.section-inner-hero .text-colour-alt-grey{color:rgba(255,255,255,.78)}
.section-inner-hero .underlined-link{color:rgba(255,255,255,.85);text-decoration-color:rgba(255,255,255,.45)}
.section-inner-hero .underlined-link:hover{color:#fff;text-decoration-color:#fff}
.text-colour-alt-grey{color:var(--slate-brown)}
.underlined-link{
  color:var(--slate-brown);text-underline-offset:3px;
  text-decoration:underline #bbb5b4;text-decoration-thickness:1.5px;
  transition:color .25s,text-decoration-color .25s;
}
.underlined-link:hover{color:var(--slate-black);text-decoration-color:var(--slate-black)}

.section-faqs{padding-bottom:5rem}
.container-small{width:100%;max-width:48rem;margin-left:auto;margin-right:auto}
.container-small.is-faqs{margin-top:2rem}

.faq-container{display:flex;flex-flow:column;align-items:flex-start;gap:1rem}
.faq-wrapper{
  width:100%;color:var(--slate-black);cursor:pointer;background:#fff;
  border-radius:1rem;padding:1.5rem 2rem;
  font-size:1rem;font-weight:500;line-height:1.4;
  transition:background-color .25s;
}
.faq-wrapper:hover{background:#f5f5f5}
.faq-wrapper.box-shadow{
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.03),
             0 .48px 1.25px -1.33px rgba(0,0,0,.15),
             0 1.83px 4.76px -2.67px rgba(0,0,0,.12),
             0 8px 20.8px -4px rgba(0,0,0,.03);
}
.faq-head{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;color:var(--slate-black);font-size:17px}
.heading-style-h5{font-size:1.125rem;font-weight:500;line-height:1.1}
.code-arrow{flex:none;display:flex;align-items:center;transition:transform .25s ease}
.faq-wrapper.is-open .code-arrow{transform:rotate(180deg)}
.faq-answer{max-height:0;opacity:0;overflow:hidden;font-weight:400;
  transition:max-height .3s ease,opacity .25s ease,margin-top .3s ease}
.faq-wrapper.is-open .faq-answer{opacity:1;margin-top:.9rem}
.faq-answer .text-size-regular{color:var(--grey)}
.faq-answer a{color:var(--slate-brown)}

@media(max-width:991px){
  .section-inner-hero{padding-top:10.5rem}
}
@media(max-width:767px){
  .section-inner-hero{padding-top:9rem}
  .heading-style-h5{line-height:1.2}
}
@media(max-width:479px){
  .faq-wrapper{padding:1.25rem}
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.padding-smaller{padding:3.5rem 6rem}
.spacer-small{height:1.5rem}
.spacer-large{height:3rem}
.z-index-2{z-index:2;position:relative}
h4{font-family:var(--font-sans);font-size:1.5rem;font-weight:700;line-height:1.4;margin:0;color:var(--slate-black)}

.support-block{
  position:relative;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:1.25rem;
  max-width:35rem;margin:0 auto;padding:2rem;
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.03),0 1px 2px rgba(0,0,0,.05),0 0 20px rgba(0,0,0,.05);
}
.support-block .form_label{display:block;color:var(--slate-black);text-align:left;margin-bottom:.4rem;font-size:.95rem;font-weight:600;line-height:1.3}
.support-block .form_input{display:block;width:100%;font-family:inherit}
.form_input.is-text-area{min-height:8rem;padding-top:.75rem;resize:vertical}
.support-block .button{width:100%}

.form_message-success{color:var(--slate-black);background:var(--light-grey-outline);border-radius:1rem;padding:1.25rem;font-weight:500}
.form_message-success.is-tall{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  padding:8rem 1.25rem;
  background-color:var(--grad-base);
  background-image:linear-gradient(rgba(6,8,20,.46),rgba(6,8,20,.28)),var(--hero-art);
  background-size:auto,cover;background-position:0 0,50% 92%;background-repeat:no-repeat,no-repeat;
}
.checkmark-circle-icon{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:2.5rem;height:2.5rem;margin:0 auto;border:2px solid #fff;border-radius:200px;
}
.blurry-layer{z-index:1;position:absolute;inset:0;width:100%;height:100%;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(0,0,0,.08)}
.form_message-error{margin-top:1rem;padding:1rem 1.25rem;border-radius:.75rem;
  background:#fdecea;color:#8c2f26;font-size:.9rem}

/* ---- shared "home" FAQ block (homepage + contact) ---- */
.section-faqs.is-home-faqs{padding-top:4rem}
.faq-flex-wrapper{display:flex;justify-content:space-between;align-items:flex-start}
.faq-col-top{display:flex;flex-flow:column;gap:1.5rem;width:35%}
.faq-col-bottom{display:flex;flex-flow:column;gap:1rem;width:65%;max-width:39.438rem;margin-left:2rem}
.underline{color:var(--slate-brown);border-bottom:1px solid #bbb5b4;text-decoration:none;
  transition:color .25s,border-color .25s}
.underline:hover,.underline.is-current{color:var(--slate-black);border-bottom-color:var(--slate-black)}

@media(max-width:991px){
  .padding-smaller{padding:3rem 2rem}
  .spacer-large{height:2.5rem}
  .faq-flex-wrapper{flex-flow:column;gap:3.5rem}
  .faq-col-top{width:100%;text-align:center;align-items:center;gap:1rem}
  .faq-col-bottom{width:100%;margin:0 auto}
}
@media(max-width:767px){
  .padding-smaller{padding:2rem 1.5rem}
  .faq-flex-wrapper{gap:3rem}
  .section-faqs.is-home-faqs{padding-top:3rem}
}
@media(max-width:479px){
  .support-block{padding:1.25rem}
  .spacer-large{height:2rem}
  .section-faqs.is-home-faqs{padding-top:2rem;padding-bottom:2rem}
  .form_message-success.is-tall{padding:5rem 1.25rem}
}

/* ============================================================
   AUTH PAGES  (login / signup)
   ============================================================ */
.section-auth{
  position:relative;isolation:isolate;
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:2.5rem;
}
/* the artwork carries the bottom fade on its own layer, so the card on top
   stays fully opaque instead of being masked away with it */
.section-auth::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--grad-base);
  background-image:var(--hero-art);
  background-size:cover;background-position:50% 30%;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(#000 0%,#000 58%,transparent 100%);
  mask-image:linear-gradient(#000 0%,#000 58%,transparent 100%);
}
.auth-card{
  position:relative;
  width:100%;max-width:64rem;display:grid;grid-template-columns:1fr 1fr;
  background:#fff;border-radius:var(--radius-card);overflow:hidden;
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.03),0 1px 2px rgba(0,0,0,.05),0 20px 60px rgba(20,20,60,.14);
}

/* ---- left brand panel ---- */
.auth-panel{
  position:relative;overflow:hidden;display:flex;flex-flow:column;justify-content:space-between;
  padding:2.25rem 2.5rem;color:#fff;
  background-color:#0b1020;
  background-image:url("assets/auth-gradient.jpg");
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
}
/* the artwork is bright at the bottom, so the copy sitting there needs a scrim */
.auth-panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,20,.30) 0%,rgba(6,8,20,.10) 38%,rgba(6,8,20,.62) 100%);
}
.auth-brand{position:relative;z-index:1;display:flex;align-items:center;gap:.7rem}
.auth-brand img{width:2.2rem;height:auto}
.auth-brand span{font-family:var(--font-display);font-size:1.25rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.auth-tagline{
  position:relative;z-index:1;margin-top:auto;
  text-shadow:0 1px 12px rgba(0,0,0,.35);max-width:16ch;
  font-family:var(--font-display);font-size:1.6rem;font-weight:600;line-height:1.15;letter-spacing:-.03em;
}
.auth-proof{position:relative;z-index:1;margin-top:1.25rem;display:flex;align-items:center;gap:.75rem}
.avatar-stack{display:flex}
.avatar{
  width:1.9rem;height:1.9rem;border-radius:999px;margin-right:-.55rem;
  display:block;flex:none;object-fit:cover;background:rgba(255,255,255,.18);
  box-shadow:0 0 0 2px rgba(255,255,255,.55);
}
.auth-proof span{font-size:.75rem;color:rgba(255,255,255,.85)}

/* ---- right form panel ---- */
.auth-form{display:flex;flex-flow:column;justify-content:center;padding:2rem 2.75rem}
.auth-form form{display:flex;flex-flow:column;gap:.9rem}
.auth-form h1{font-family:var(--font-sans);font-size:1.35rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.auth-form .auth-sub{color:var(--alt-grey);font-size:.8rem;margin-top:.25rem}
.auth-fields{display:flex;flex-flow:column;gap:.75rem}
.auth-field{display:flex;flex-flow:column;gap:.4rem}
.auth-field .form_label{margin:0;font-size:.78rem;font-weight:600;color:var(--slate-black)}
.auth-field .form_input{min-height:2.7rem;width:100%;font-family:inherit}
.auth-label-row{display:flex;align-items:center;justify-content:space-between}
.auth-forgot{font-size:.72rem;color:var(--alt-grey)}
.auth-forgot:hover{color:var(--slate-black)}

.button.is-outline{
  display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;
  background:#fff;color:var(--slate-black);border:1px solid var(--light-grey-outline);
  box-shadow:inset 0 -2px 2px rgba(100,100,100,.05),0 1px 2px rgba(8,8,8,.06);
  border-radius:.6rem;padding:.7rem 1.2rem;
}
.button.is-outline:hover{background:#f7f6f5;transform:none}
.button.is-auth,.button.is-outline{padding-top:.65rem;padding-bottom:.65rem}
.button.is-outline svg{width:1rem;height:1rem;flex:none}
.button.is-auth{width:100%;border-radius:.6rem;padding:.8rem 1.2rem}

.auth-divider{display:flex;align-items:center;gap:.75rem}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--light-grey-outline)}
.auth-divider span{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--alt-grey)}

.auth-alt{text-align:center;font-size:.78rem;color:var(--alt-grey)}
.auth-alt a{color:var(--slate-black);font-weight:600}
.auth-alt a:hover{text-decoration:underline}
.auth-legal{text-align:center;font-size:.7rem;color:var(--alt-grey);line-height:1.5}
.auth-legal a{text-decoration:underline;text-underline-offset:2px}

/* auth.js writes into this when Supabase rejects a sign-in or sign-up */
.auth-error{
  margin:0;padding:.6rem .75rem;border-radius:.5rem;
  background:#fdeceb;border:1px solid #f5c2be;color:#9b241c;
  font-size:.76rem;line-height:1.45
}
.auth-resend{
  display:inline;margin-top:.4rem;padding:0;border:0;background:none;
  font:inherit;font-size:.78rem;font-weight:600;color:var(--slate-black);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer
}
.auth-resend[disabled]{color:var(--alt-grey);text-decoration:none;cursor:default}

.auth-success{
  display:flex;flex-flow:column;align-items:center;justify-content:center;gap:.75rem;
  text-align:center;padding:2rem 1rem;
}
.auth-success .checkmark-circle-icon{border-color:var(--slate-black)}
.auth-success .checkmark-circle-icon svg path{stroke:var(--slate-black)}

.auth-back{display:none;align-items:center;gap:.4rem;font-size:.8rem;color:var(--alt-grey);margin-bottom:.25rem}
.auth-back:hover{color:var(--slate-black)}

@media(max-width:767px){
  .section-auth{padding:2rem 1.5rem}
  .auth-back{display:flex}
  .auth-card{grid-template-columns:1fr;max-width:26rem}
  .auth-panel{display:none}
  .auth-form{padding:1.75rem}
}

/* ============================================================
   LEGAL PAGES  (terms / privacy)
   ============================================================ */
.section-legal{padding-bottom:0}
.white-box{
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:1.25rem;padding:2rem;
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.03),0 0 20px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.05);
}
.rte{text-align:left;color:var(--grey);font-size:.95rem;line-height:1.65}
.rte h4{margin:2rem 0 .6rem;line-height:1.2;color:var(--slate-black)}
.rte > h4:first-child{margin-top:0}
.rte p{margin:0 0 1rem}
.rte p:last-child{margin-bottom:0}
.rte ul{margin:0 0 1rem;padding-left:1.15rem}
.rte li{margin-bottom:.4rem}
.rte strong{color:var(--slate-black)}
.rte a{color:var(--grey);text-decoration:underline;text-underline-offset:2px}
.rte a:hover{color:var(--slate-black)}
.legal-notice{
  margin-bottom:1.5rem;padding:1rem 1.25rem;border-radius:.75rem;
  background:#fff8e6;border:1px solid #f0dfb0;color:#6b5320;font-size:.85rem;line-height:1.55;
}
.legal-notice strong{color:#4a3812}
.legal-toc{margin:0 0 2rem;padding:0 0 1.5rem;border-bottom:1px solid var(--light-grey-outline);
  list-style:none;columns:2;column-gap:2rem;font-size:.88rem}
.legal-toc li{margin-bottom:.4rem;break-inside:avoid}
.legal-toc a{color:var(--grey);text-decoration:none}
.legal-toc a:hover{color:var(--slate-black);text-decoration:underline}
@media(max-width:767px){
  .white-box{border-radius:1rem;padding:1.5rem}
  .legal-toc{columns:1}
}

/* ============================================================
   FOOTER  — dark slab, CTA card + link rows
   ============================================================ */
.section-footer{
  background:var(--slate-black);
  border-radius:3rem 3rem 0 0;
  padding-top:5rem;padding-bottom:1rem;
  position:relative;overflow:hidden;
}

.footer-cta{
  z-index:1;position:relative;overflow:hidden;
  display:flex;flex-flow:row;justify-content:space-between;align-items:center;
  text-align:left;border-radius:1.5rem;
  margin-bottom:5rem;padding:2.5rem 0 0 3rem;
  -webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);
  background-color:var(--grad-base);
  background-image:
    linear-gradient(100deg,rgba(6,8,20,.56),rgba(6,8,20,.16) 58%,rgba(6,8,20,0)),
    var(--hero-art);
  background-size:auto,cover;
  background-position:0 0,50% 92%;
  background-repeat:no-repeat,no-repeat;
  box-shadow:inset 0 2px rgba(255,255,255,.2);
}
.footer-cta-left{
  display:flex;flex-flow:column;justify-content:flex-start;align-items:flex-start;gap:.35rem;
  max-width:28rem;margin-bottom:2.5rem;
}
.footer-cta-left h2{margin-bottom:.25rem}
.button.is-white.borderless{border:1px solid #fff}
.button.is-white.borderless:hover{border-color:#f5f6f8}

.image-collage-footer{width:34rem;margin-top:auto;margin-left:auto;display:block;position:relative}
.dashboard-screen-small{
  border-radius:.5rem 0 0 0;margin-top:auto;overflow:hidden;
  box-shadow:0 -10px 50px rgba(0,0,0,.3);
}
.ui.is-mini{min-height:0;font-size:.55rem}
.ui.is-mini .ui-side{width:7.5rem;padding:.75rem}
.ui.is-mini .ui-main{gap:.45rem;padding:.7rem}
.ui.is-mini .ui-chart{height:2.9rem}
.ui.is-mini .ui-stat b{font-size:.85rem}
.ui.is-mini .ui-brand{margin-bottom:.7rem}
.ui.is-mini .ui-nav span{padding:.3rem .5rem}
.ui.is-mini .ui-stat{padding:.45rem .5rem}
.ui.is-mini .ui-card{padding:.55rem .65rem}
.ui.is-mini .ui-card-head{margin-bottom:.4rem}
.ui.is-mini .ui-table td{padding:.3rem .3rem}

.container-medium.footer-flex{
  display:flex;justify-content:space-between;align-items:center;gap:3rem;
  border-bottom:1px solid rgba(255,255,255,.1);
  margin-bottom:.75rem;padding-bottom:.75rem;
}
.footer-logo{display:flex;align-items:center;gap:1rem}
.footer-logomark{width:2.4rem;height:auto;flex:none}
.footer-wordmark{font-family:var(--font-display);font-size:1.3rem;font-weight:600;letter-spacing:-.03em;line-height:1;color:#fff}

.footer-link-wrapper{z-index:1;position:relative;display:flex;justify-content:flex-end;align-items:center}
.footer-link{
  display:block;color:var(--white);margin:0 .6rem;
  font-weight:500;text-decoration:none;transition:opacity .25s;
}
.footer-link:hover{opacity:.7}
.text-weight-normal{font-weight:400}
.text-size-small{font-size:.875rem;line-height:1.45}
.text-colour-opacity-70{opacity:.7}

.container-medium.is-small-footer{
  display:flex;justify-content:space-between;align-items:center;color:var(--white);
}
.badge-icon{display:none;justify-content:center;align-items:center;gap:.5rem;margin-top:.5rem}
.hidden{display:none}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:991px){
  .pricing-boxes-wrapper{grid-template-columns:1fr}
  .padding-global{padding-left:1.5rem;padding-right:1.5rem}
  .nav{padding-left:2.25rem;padding-right:2.25rem}
  .wrapper-full{padding-left:1rem;padding-right:1rem}
  .nav-logo.is-logomark{width:1.45rem}
  .is-hero-container{padding-top:8rem}
  .feature-card{flex-direction:column}
  .feature-card-left,.feature-card-right{width:100%}
  .feature-card-left{padding:2rem}
  .feature-card-right{min-height:18rem;padding:2rem}
  .trust-title{flex-direction:column;align-items:flex-start}
  .audit-cta{flex-direction:column;align-items:stretch;padding:2.5rem 2rem 0}
  .audit-cta-left{padding-bottom:1.5rem;max-width:none}
  .image-collage-footer{width:100%;max-width:40rem;margin:1.5rem auto 0}
  .section-footer{padding-top:4rem;padding-bottom:2rem}
  .footer-cta{flex-flow:column;margin-bottom:2rem;padding:4rem 2rem 0}
  .footer-cta-left{text-align:center;align-items:center;margin-bottom:1rem}
  .dashboard-screen-small{border-radius:.5rem .5rem 0 0}
  .ui-side{display:none}
  .ui-stats{grid-template-columns:repeat(2,1fr)}
  .ui-grid{grid-template-columns:1fr}
}
@media(max-width:767px){
  .nav{padding-top:1.5rem;padding-left:1.75rem;padding-right:1.75rem}
  .wrapper-full{width:100%;padding-right:1.5rem;position:static}
  .menu-button{display:block}
  .brand{margin-right:0}
  .nav-menu{
    position:fixed;inset:0;width:100vw;height:100vh;
    background:var(--background);
    flex-direction:column;justify-content:flex-start;align-items:center;
    padding:8rem 2.15rem 2rem;gap:.5rem;
    transform:translateX(100%);transition:transform .25s ease;
  }
  .nav-menu.is-open{transform:none}
  .nav-link{font-size:1.35rem;padding:.75rem 1rem;margin-left:0;color:var(--slate-black)}
  .nav-link:hover{background:transparent}
  .open-nav-line{display:block;width:100%;height:1px;background:var(--light-grey-outline);margin-bottom:1rem}
  .lang-select{margin-left:0}
  .lang-toggle{padding:.75rem 1rem;font-size:1.35rem}
  .lang-toggle .lang-flag{font-size:1.5rem}
  .lang-menu{position:static;transform:none;min-width:0;width:100%;box-shadow:none;margin-top:.5rem}
  .button.is-nav-button{margin-left:0;margin-top:1rem;padding:.7rem 1.6rem;font-size:1rem}
  /* stacked, the audit card sits right under its form - the desktop gutter
     between the two columns turns into dead gradient on a phone */
  .section-audit-cta{padding-top:1.5rem;padding-bottom:2.5rem}
  .audit-cta{padding:2rem 1.25rem 0}
  .audit-cta-left{padding-bottom:1rem}
  .image-collage-footer{margin-top:.75rem}
  /* the shot's bottom 9% is transparent shadow room; a margin percentage
     resolves against the width, and 6% of the width is that same strip */
  .audit-shot{margin-bottom:-6%}
}
@media(max-width:479px){
  .pricing-boxes-wrapper{margin-top:1.25rem}
  .pricing-tab{padding-left:1.25rem;padding-right:1.25rem}
  .text-size-large{font-size:1.25rem}
  .container-medium.footer-flex{flex-flow:column;gap:2rem}
  .footer-logo{margin:0 auto}
  .footer-link-wrapper{width:100%;justify-content:space-between}
  .footer-link-wrapper.is-legal{width:auto;justify-content:flex-end}
  .container-medium.is-small-footer{flex-flow:wrap-reverse}
  .footer-link{margin:0 .35rem}
  .nav{padding-top:1.15rem;padding-left:1rem;padding-right:1rem}
  .wrapper-full{padding-top:.4rem;padding-bottom:.4rem;padding-right:1rem}
  .nav-logo.is-logomark{width:1.3rem}
  .nav-menu{padding-top:7rem;padding-left:1.4rem;padding-right:1.5rem}
}
@media(max-width:600px){
  .flex-form{flex-direction:column}
  .footer-cta{padding:2.5rem 1.25rem 0}
  .glass-card.small{width:100%}
}

/* ---------- real product screenshots (replaces the old CSS mock UI) ---------- */
.hero-shot{width:100%;height:auto;display:block;background:#f3f2f1}
.feature-shot{
  width:100%;height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 18px 40px rgba(6,8,20,.35));
}
.feature-card-right{align-items:center;padding:2rem}
@media(min-width:992px){.feature-card-right{padding:2.25rem}}
.dashboard-screen-small .hero-shot{border-radius:.5rem 0 0 0}
@media(max-width:991px){
  .dashboard-screen-small .hero-shot{border-radius:.5rem .5rem 0 0}
}
.audit-shot{width:100%;height:auto;display:block;border-radius:1rem;
  filter:drop-shadow(0 18px 40px rgba(6,8,20,.4))}

/* ============================================================
   CONTENT PAGES  — blog, comparisons, free tools
   Three page families share one card language, so a reader moving from
   an article to a tool to a comparison never meets a new layout idiom.
   ============================================================ */

/* ---------- shared: breadcrumb, chips, card grid ---------- */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  font-size:.82rem;color:var(--alt-grey);margin-bottom:1rem;
}
.breadcrumb a{color:inherit;text-decoration:none}
/* on the dark inner hero the muted greys disappear, so both meta rows switch
   to a translucent white there */
.section-inner-hero .breadcrumb,.section-inner-hero .post-meta{color:rgba(255,255,255,.72)}
.section-inner-hero .breadcrumb a:hover{color:#fff}
.breadcrumb a:hover{color:var(--slate-black);text-decoration:underline}
.breadcrumb .sep{opacity:.5}

/* the chips sit under an inner hero, on the dark half of the gradient */
.hub-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.chip{
  background:rgba(255,255,255,.9);color:var(--dark-grey);
  border:1px solid rgba(255,255,255,.5);border-radius:999px;
  padding:.42rem .9rem;font-size:.85rem;font-weight:500;text-decoration:none;
  transition:background-color .25s,transform .25s;
}
.chip:hover{background:#fff;transform:translateY(-1px)}
.chip.is-current{background:var(--slate-black);color:#fff;border-color:transparent}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.card-grid.is-two{grid-template-columns:repeat(2,1fr)}
.content-card{
  display:flex;flex-direction:column;gap:.6rem;
  background:#fff;border-radius:var(--radius-card);padding:1.6rem;
  text-decoration:none;color:inherit;height:100%;
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.03),0 1px 2px rgba(0,0,0,.05),0 2px 20px rgba(0,0,0,.03);
  transition:transform .25s,box-shadow .25s;
}
a.content-card:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(6,8,20,.12)}
.content-card .card-title{font-size:1.12rem;font-weight:600;line-height:1.3;color:var(--slate-black);letter-spacing:-.01em}
.content-card .card-text{font-size:.9rem;line-height:1.55;color:var(--grey);margin:0}
.content-card .card-foot{
  margin-top:auto;padding-top:.9rem;display:flex;align-items:center;gap:.4rem;
  font-size:.85rem;font-weight:600;color:var(--slate-black);
}
.content-card .card-foot svg{transition:transform .25s}
a.content-card:hover .card-foot svg{transform:translateX(3px)}
.card-icon{
  width:2.4rem;height:2.4rem;border-radius:.85rem;flex:none;
  display:flex;align-items:center;justify-content:center;margin-bottom:.2rem;
  background:#f3f2f1;color:var(--slate-black);
}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.8rem;color:var(--alt-grey)}
.post-meta.is-centered{justify-content:center}
.post-meta .dot-sep{width:.2rem;height:.2rem;border-radius:999px;background:currentColor;opacity:.6}

/* a hub section that is not the first one needs air above it */
.hub-section{padding-top:3.5rem}
.hub-section:first-of-type{padding-top:1rem}
.hub-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.25rem}
.hub-head h2{font-size:1.6rem;letter-spacing:-.02em}
.hub-head p{font-size:.9rem;color:var(--grey);margin:.3rem 0 0}

/* ---------- article ---------- */
/* the aside carries the table of contents and rides along on desktop only;
   on phones it collapses above the text, where a reader expects it */
.article-layout{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:3rem;align-items:start}
.article-aside{position:sticky;top:7.5rem}
.article-toc{list-style:none;margin:0;padding:0;font-size:.85rem;border-left:1px solid var(--light-grey-outline)}
.article-toc li{margin:0}
.article-toc a{display:block;padding:.35rem 0 .35rem .9rem;color:var(--grey);text-decoration:none;margin-left:-1px;border-left:1px solid transparent}
.article-toc a:hover{color:var(--slate-black);border-left-color:var(--slate-black)}
.article-share{margin-top:1.5rem;font-size:.82rem;color:var(--alt-grey)}
.article-body{max-width:44rem}
.article-body h2{font-size:1.5rem;letter-spacing:-.02em;margin:2.5rem 0 .75rem;line-height:1.25;color:var(--slate-black)}
.article-body h3{font-size:1.12rem;margin:1.75rem 0 .5rem;color:var(--slate-black)}
.article-body > h2:first-child{margin-top:0}
.article-body p,.article-body li{font-size:1rem;line-height:1.7}
.article-lead{font-size:1.1rem;line-height:1.65;color:var(--dark-grey)}
.article-note{
  margin:1.75rem 0;padding:1.1rem 1.25rem;border-radius:1rem;
  background:#f7f6f5;border:1px solid var(--light-grey-outline);font-size:.92rem;line-height:1.6;color:var(--grey);
}
.article-note strong{color:var(--slate-black)}
.article-cta{
  margin-top:2.5rem;padding:1.75rem;border-radius:1.25rem;color:#fff;
  background-color:var(--grad-base);
  background-image:linear-gradient(100deg,rgba(6,8,20,.62),rgba(6,8,20,.2)),var(--hero-art);
  background-size:cover;background-position:50% 50%;
}
.article-cta h3{color:#fff;font-size:1.25rem;margin:0 0 .4rem}
.article-cta p{color:rgba(255,255,255,.75);font-size:.92rem;margin:0 0 1.1rem;max-width:32rem}

/* ---------- comparison ---------- */
.vs-marks{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem}
.vs-mark{
  display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.92);
  border-radius:999px;padding:.5rem 1rem;font-weight:600;font-size:.95rem;color:var(--slate-black);
}
.vs-mark img{width:1.25rem;height:auto;display:block}
.vs-versus{color:#fff;font-family:var(--font-mono);font-size:.85rem;opacity:.75}
/* the table is wider than a phone; it scrolls inside its own box rather than
   pushing the page sideways */
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;min-width:34rem;border-collapse:collapse;font-size:.92rem;text-align:left}
.compare-table th,.compare-table td{padding:.85rem 1rem;border-bottom:1px solid var(--light-grey-outline);vertical-align:top}
.compare-table thead th{font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--alt-grey);font-weight:600}
.compare-table tbody th{font-weight:500;color:var(--slate-black);width:34%}
.compare-table td{color:var(--grey)}
.compare-table .is-ours{background:#faf9f8;color:var(--slate-black)}
.compare-table tr:last-child th,.compare-table tr:last-child td{border-bottom:none}
.yes{color:#1a8f5c;font-weight:600}
.no{color:var(--alt-grey)}
.todo{color:#c98a1f;font-weight:500}
.verdict-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.verdict-card{background:#fff;border-radius:1.25rem;padding:1.5rem;border:1px solid var(--light-grey-outline)}
.verdict-card h3{font-size:1.05rem;margin:0 0 .5rem}
.verdict-card ul{margin:0;padding-left:1.1rem;color:var(--grey);font-size:.92rem;line-height:1.6}
.verdict-card li{margin-bottom:.35rem}

/* ---------- free tools ---------- */
/* the panel is the tool itself: one input, one button, and the strip of text
   under it that says what the reader gets back */
.tool-panel{
  background:#fff;border-radius:var(--radius-card);padding:1.75rem;
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.03),0 2px 30px rgba(6,8,20,.12);
}
/* .form_label is white for the dark audit card; inside this white panel it
   needs the page's own ink */
.tool-panel .form_label{display:block;margin-bottom:.4rem;color:var(--slate-black);font-weight:600}
.tool-note{font-size:.82rem;color:var(--alt-grey);margin:.75rem 0 0}
/* the FAQ accordion sits mid-page here, not tucked under a hero */
.section-faqs.is-inline-faqs{padding-top:4rem}
.section-faqs.is-inline-faqs h2{font-size:1.6rem;letter-spacing:-.02em}
.tool-status{
  margin-top:1rem;padding:.85rem 1rem;border-radius:.75rem;font-size:.88rem;
  background:#f7f6f5;border:1px dashed var(--light-grey-outline);color:var(--grey);
}
.tool-steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.tool-steps li{counter-increment:step;background:#fff;border-radius:1.25rem;padding:1.5rem;border:1px solid var(--light-grey-outline)}
.tool-steps li::before{
  content:counter(step,decimal-leading-zero);display:block;margin-bottom:.6rem;
  font-family:var(--font-mono);font-size:.8rem;color:var(--alt-grey);
}
.tool-steps h3{font-size:1.02rem;margin:0 0 .35rem}
.tool-steps p{font-size:.9rem;color:var(--grey);line-height:1.55;margin:0}
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem 1.5rem;font-size:.95rem;color:var(--grey)}
.checklist li{display:flex;gap:.55rem;line-height:1.5}
.checklist li::before{content:"✓";color:#1a8f5c;font-weight:700;flex:none}

/* ---------- responsive ---------- */
@media(max-width:1200px){
  .nav{padding-left:2.5rem;padding-right:2.5rem}
  .nav-link{font-size:.98rem;padding:.5rem .6rem;margin-left:.15rem}
  .brand{margin-right:1.5rem}
}
@media(max-width:991px){
  .card-grid,.card-grid.is-two,.tool-steps,.verdict-grid{grid-template-columns:repeat(2,1fr)}
  .article-layout{grid-template-columns:1fr;gap:2rem}
  .article-aside{position:static}
  .article-toc{border-left:0;border-top:1px solid var(--light-grey-outline);padding-top:.75rem}
  .article-toc a{padding-left:0;border-left:0}
  .nav{padding-left:1rem;padding-right:1rem}
  .nav-link{font-size:1.06rem}
}
@media(max-width:767px){
  .card-grid,.card-grid.is-two,.tool-steps,.verdict-grid,.checklist{grid-template-columns:1fr}
  .hub-head{flex-direction:column;align-items:flex-start}
  .content-card{padding:1.35rem}
  .tool-panel{padding:1.35rem}
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden fields but happily fill anything still in the layout. */
.form_hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}