:root {
  color-scheme:light;
  --bg:#fafaf9;
  --surface:#fff;
  --tint:#f0f1ef;
  --text:#17202c;
  --muted:#606977;
  --line:#dce0e3;
  --amber:#f5b700;
  --steel:#18222f;
  --shadow:0 24px 80px #17202c12;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  scroll-behavior:smooth;
  scroll-padding-top:104px
}
:root[data-theme=dark] {
  color-scheme:dark;
  --bg:#111820;
  --surface:#18212c;
  --tint:#151e28;
  --text:#edf0f4;
  --muted:#a6b1c0;
  --line:#303a47;
  --shadow:0 24px 80px #0004
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.65
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
a,button {
  touch-action:manipulation
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--amber);
  outline-offset:5px
}
img {
  display:block;
  max-width:100%;
  height:auto
}
svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
p {
  color:var(--muted);
  margin:0 0 1.4rem
}
h1,h2,h3 {
  line-height:1.13;
  letter-spacing:-.045em;
  margin:0
}
h1 {
  font-size:clamp(2.75rem,5.1vw,5rem);
  font-weight:850
}
h2 {
  font-size:clamp(2.25rem,3.6vw,3.5rem);
  font-weight:800
}
h3 {
  font-size:1.2rem;
  letter-spacing:-.025em
}
figure {
  margin:0
}
figcaption {
  font-size:.75rem;
  color:var(--muted);
  padding:12px 18px;
  line-height:1.6
}
.wrap {
  max-width:1240px;
  margin-inline:auto;
  padding-inline:32px
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.72rem;
  letter-spacing:.16em;
  font-weight:750;
  margin-bottom:22px;
  color:var(--muted)
}
.skip-link {
  position:fixed;
  top:8px;
  inset-inline-start:8px;
  z-index:100;
  transform:translateY(-160%);
  background:var(--amber);
  color:var(--steel);
  padding:10px 18px
}
.skip-link:focus {
  transform:none
}
.header {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--line)
}
.header-inner {
  height:82px;
  display:flex;
  align-items:center;
  gap:32px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.06em;
  font-size:1.15rem;
  flex-shrink:0
}
.brand img {
  border-radius:7px
}
.beta-tag {
  font-size:.57rem;
  letter-spacing:.1em;
  border:1px solid var(--line);
  border-radius:3px;
  padding:3px 6px;
  font-weight:750
}
.header nav {
  display:flex;
  gap:24px;
  font-size:.8rem;
  font-weight:650;
  margin-inline:auto
}
.header a:hover,.footer-links a:hover {
  color:#b98200
}
[data-theme=dark] .header a:hover,[data-theme=dark] .footer-links a:hover {
  color:var(--amber)
}
.toolbar {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.75rem;
  font-weight:650
}
.language,.theme-toggle {
  display:grid;
  place-items:center;
  min-width:44px;
  height:44px;
  border:1px solid var(--line);
  background:transparent;
  border-radius:6px
}
.theme-toggle svg {
  width:17px;
  height:17px
}
.sign-in {
  padding:9px 15px;
  background:var(--amber);
  color:var(--steel);
  border-radius:6px;
  white-space:nowrap
}
.header .sign-in:hover {
  color:var(--steel);
  background:#ffc72c
}
.menu-toggle {
  display:none;
  background:transparent;
  border:1px solid var(--line);
  border-radius:6px;
  padding:7px 10px
}
.hazard-stripe {
  height:5px;
  background:repeating-linear-gradient(-50deg,var(--amber) 0,var(--amber) 9px,#17202c 9px,#17202c 18px)
}
.hero {
  padding-top:76px;
  background:radial-gradient(ellipse at 50% 17%,#f5b7000c,transparent 60%)
}
.hero-copy {
  text-align:center;
  max-width:1120px
}
.hero .eyebrow {
  justify-content:center
}
.status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#bc8500
}
.hero h1 span {
  color:#a67400
}
[data-theme=dark] .hero h1 span {
  color:var(--amber)
}
.hero-intro {
  font-size:1.16rem;
  max-width:650px;
  margin:26px auto 28px;
  line-height:1.7
}
.actions {
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  background:var(--amber);
  color:var(--steel);
  padding:13px 22px;
  border:1px solid var(--amber);
  border-radius:7px;
  font-size:.85rem;
  font-weight:750;
  line-height:1.5;
  transition:background .2s,transform .2s
}
.button:hover {
  background:#ffca32;
  transform:translateY(-2px)
}
.button-outline {
  background:transparent;
  color:var(--text);
  border-color:var(--line)
}
.button-outline:hover {
  background:var(--tint)
}
.beta-note {
  font-size:.76rem;
  margin:17px 0 0
}
.dashboard-frame {
  margin-top:44px
}
.window-bar {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:13px 13px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px;
  font:600 .6rem ui-monospace,monospace;
  letter-spacing:.07em;
  color:var(--muted)
}
.window-bar>span:first-child {
  letter-spacing:.2em;
  color:#b3bac3
}
.window-status {
  color:#7d5700
}
[data-theme=dark] .window-status {
  color:var(--amber)
}
.dashboard-frame .zoom {
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 9px 9px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:block
}
.zoom {
  cursor:zoom-in
}
.dashboard-frame img {
  width:100%;
  height:auto
}
.dashboard-frame figcaption {
  text-align:center
}
.proof-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding-block:32px 45px;
  border-bottom:1px solid var(--line);
  text-align:center
}
.proof-strip div {
  display:flex;
  flex-direction:column;
  gap:5px;
  border-inline-end:1px solid var(--line)
}
.proof-strip div:last-child {
  border:0
}
.proof-strip strong {
  font-size:1.1rem;
  font-weight:750
}
.proof-strip span {
  font-size:.72rem;
  color:var(--muted)
}
.section {
  padding-block:90px
}
.section-heading {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  align-items:end;
  margin-bottom:40px
}
.section-heading p {
  max-width:430px;
  margin:0;
  font-size:1rem
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.feature-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:29px
}
.feature-card>svg {
  color:#ab7900;
  margin-bottom:30px;
  width:28px;
  height:28px
}
[data-theme=dark] .feature-card>svg {
  color:var(--amber)
}
.feature-card h3 {
  margin-bottom:14px
}
.feature-card p {
  font-size:.86rem;
  line-height:1.8;
  margin:0
}
.tinted {
  background:var(--tint);
  border-block:1px solid var(--line)
}
.report-support {
  max-width:76ch;
  margin:-12px 0 28px;
  font-size:.92rem
}
.report-contact {
  margin:24px 0 0;
  font-size:.9rem
}
.showcase {
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow)
}
.tabs {
  display:flex;
  border-bottom:1px solid var(--line);
  background:var(--bg)
}
.tabs a {
  flex:1;
  text-align:center;
  padding:18px 10px;
  font-size:.8rem;
  font-weight:700;
  border-bottom:3px solid transparent
}
.tabs a[aria-selected=true] {
  border-color:var(--amber);
  background:var(--surface)
}
.tabs a:hover {
  background:var(--surface)
}
.showcase-panel {
  scroll-margin-top:140px
}
.showcase-panel+[aria-labelledby] {
  border-top:1px solid var(--line)
}
.showcase-panel[hidden] {
  display:none
}
.panel-bar {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:13px 24px;
  border-bottom:1px solid var(--line);
  font:.7rem ui-monospace,monospace;
  color:var(--muted)
}
.panel-bar a {
  text-decoration:underline;
  text-underline-offset:4px
}
pre {
  margin:0;
  background:#131e2a;
  color:#d0e0ef;
  overflow-x:auto;
  padding:30px;
  font-size:.9rem;
  line-height:1.8;
  tab-size:2
}
code {
  font-family:ui-monospace,"Cascadia Code","Liberation Mono",monospace
}
.panel-caption {
  padding:16px 24px;
  font-size:.78rem;
  margin:0;
  border-top:1px solid var(--line)
}
.showcase-panel>.zoom {
  display:block
}
.showcase-panel>.zoom img {
  width:100%
}
.showcase-panel .pdf-preview {
  padding:28px;
  background:var(--tint)
}
.pdf-preview img {
  width:100%;
  max-width:530px;
  margin:auto;
  box-shadow:var(--shadow)
}
.studio-layout {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:50px;
  align-items:center
}
.studio-layout h2 {
  font-size:clamp(2rem,3vw,3rem);
  margin-bottom:24px
}
.studio-layout p {
  font-size:.9rem
}
.studio-points {
  padding:0;
  margin:30px 0;
  list-style:none
}
.studio-points li {
  padding-inline-start:20px;
  border-inline-start:2px solid var(--amber);
  margin-bottom:22px
}
.studio-points h3 {
  font-size:.9rem;
  letter-spacing:0;
  margin-bottom:6px
}
.studio-points p {
  font-size:.82rem;
  margin:0
}
.studio-frame {
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--shadow)
}
.studio-frame>a {
  display:block
}
.infrastructure {
  background:var(--steel);
  color:#f4f6f8
}
.infrastructure p,.infrastructure .eyebrow {
  color:#aab7c6
}
.infra-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  padding-top:30px;
  border-top:1px solid #ffffff26
}
.infra-grid .eyebrow {
  color:var(--amber);
  margin-bottom:22px
}
.infra-grid h3 {
  font-size:1.05rem;
  min-height:2.4rem;
  margin-bottom:12px
}
.infra-grid p {
  font-size:.83rem;
  margin:0
}
.pricing-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center
}
.pricing-layout>div p {
  margin-top:24px;
  max-width:440px
}
.pricing-card {
  padding:36px;
  border:1px solid var(--line);
  border-top:4px solid var(--amber);
  background:var(--surface);
  border-radius:9px
}
.pricing-card .eyebrow {
  color:#9b6c00
}
[data-theme=dark] .pricing-card .eyebrow {
  color:var(--amber)
}
.pricing-card h3 {
  font-size:2rem;
  margin-bottom:20px
}
.pricing-card p {
  font-size:.9rem
}
.pricing-card .button {
  width:100%;
  gap:12px
}
.pricing-card small {
  display:block;
  margin-top:14px;
  font-size:.72rem;
  color:var(--muted)
}
.about-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px
}
.about-layout h2 {
  margin-bottom:24px
}
.about-layout p {
  font-size:.9rem
}
.about-layout p a,.text-link {
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:4px
}
.faq h3 {
  font-size:1.5rem;
  margin-bottom:24px
}
.faq details {
  border-bottom:1px solid var(--line);
  padding-block:18px
}
.faq summary {
  font-size:.86rem;
  font-weight:700;
  cursor:pointer;
  list-style:none;
  display:flex;
  gap:16px;
  justify-content:space-between
}
.faq summary:after {
  content:'+';
  color:var(--muted);
  font-size:1.2rem
}
.faq details[open] summary:after {
  content:'−'
}
.faq details p {
  font-size:.82rem;
  line-height:1.8;
  margin:14px 0 0
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:35px;
  padding-block:50px
}
.footer-inner p {
  font-size:.78rem;
  margin-top:14px;
  margin-bottom:14px
}
.footer-inner small {
  font-size:.7rem;
  color:var(--muted)
}
.footer-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:45px;
  row-gap:10px;
  font-size:.76rem;
  align-content:center;
  color:var(--muted)
}
.lightbox {
  max-width:96vw;
  max-height:95vh;
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px;
  background:var(--surface);
  color:var(--text)
}
.lightbox::backdrop {
  background:#050b14d9
}
.lightbox img {
  max-height:82vh;
  max-width:90vw;
  object-fit:contain
}
.lightbox-close {
  display:block;
  margin-inline-start:auto;
  margin-bottom:12px;
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:5px;
  padding:8px 14px;
  font-size:.8rem
}
#main:focus {
  outline:none
}
@media(min-width:1600px) {
  .hero {
    padding-top:90px
  }
}
@media(max-width:1100px) {
  .header-inner {
    gap:20px
  }
  .header nav {
    gap:14px
  }
  .beta-tag {
    display:none
  }
  .wrap {
    padding-inline:26px
  }
  .studio-layout {
    gap:30px
  }
  .feature-card {
    padding:24px
  }
  .pricing-layout {
    gap:45px
  }
  .section-heading {
    gap:45px
  }
}
@media(max-width:900px) {
  .header-inner {
    height:72px
  }
  .toolbar {
    margin-inline-start:auto
  }
  .header nav {
    position:absolute;
    top:77px;
    inset-inline:0;
    padding:20px 26px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    gap:0;
    display:none
  }
  .header nav a {
    padding:10px 0
  }
  .header nav.is-open {
    display:flex
  }
  .menu-toggle {
    display:block
  }
  .no-js .header {
    position:relative
  }
  .no-js .header-inner {
    height:auto;
    flex-wrap:wrap;
    padding-block:18px
  }
  .no-js .header nav {
    position:static;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    order:3;
    width:100%;
    padding:0;
    border:0;
    gap:16px
  }
  .no-js .header nav a {
    padding:0
  }
  .no-js .menu-toggle,.no-js .theme-toggle {
    display:none
  }
  .feature-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .studio-layout {
    grid-template-columns:1fr
  }
  .studio-frame {
    max-width:800px
  }
  .infra-grid {
    grid-template-columns:repeat(2,1fr);
    gap:30px
  }
  .section-heading {
    grid-template-columns:1fr;
    gap:20px
  }
  .section-heading p {
    max-width:600px
  }
  .about-layout {
    gap:40px
  }
  .hero {
    padding-top:54px
  }
  .hero-intro {
    font-size:1rem
  }
  .section {
    padding-block:65px
  }
}
@media(max-width:600px) {
  .wrap {
    padding-inline:20px
  }
  .header-inner {
    gap:12px
  }
  .toolbar {
    gap:7px
  }
  .brand {
    font-size:1rem;
    gap:8px
  }
  .brand img {
    width:30px;
    height:30px
  }
  .sign-in {
    padding:8px 10px;
    font-size:.68rem
  }
  .menu-toggle {
    font-size:.7rem;
    padding:7px
  }
  .menu-toggle span {
    display:none
  }
  .language,.theme-toggle {
    min-width:44px;
    height:44px
  }
  .hero {
    padding-top:42px
  }
  .hero h1 {
    font-size:2.15rem;
    letter-spacing:-.05em
  }
  .hero .eyebrow {
    font-size:.6rem;
    letter-spacing:.1em
  }
  .hero-intro {
    font-size:.92rem
  }
  .actions {
    gap:10px
  }
  .actions .button {
    font-size:.75rem;
    padding:12px 15px;
    gap:12px
  }
  .beta-note {
    font-size:.7rem
  }
  .dashboard-frame {
    margin-top:30px
  }
  .window-bar {
    padding:10px 12px;
    font-size:.52rem
  }
  .dashboard-frame figcaption {
    font-size:.65rem;
    padding-inline:0
  }
  .proof-strip {
    padding-block:26px
  }
  .proof-strip strong {
    font-size:.82rem
  }
  .proof-strip span {
    font-size:.61rem
  }
  .proof-strip div {
    padding-inline:8px
  }
  .feature-grid {
    grid-template-columns:1fr
  }
  .feature-card {
    padding:24px
  }
  .feature-card>svg {
    margin-bottom:18px
  }
  .section {
    padding-block:50px
  }
  .section-heading {
    margin-bottom:28px
  }
  .section-heading p {
    font-size:.9rem
  }
  .eyebrow {
    font-size:.64rem
  }
  .tabs a {
    font-size:.65rem;
    padding:15px 5px
  }
  .panel-bar {
    font-size:.6rem;
    padding:12px;
    flex-wrap:wrap
  }
  .panel-caption {
    padding:14px;
    font-size:.7rem
  }
  pre {
    font-size:.7rem;
    padding:20px;
    line-height:1.8
  }
  .pdf-preview {
    padding:16px!important
  }
  .infra-grid {
    grid-template-columns:1fr;
    gap:25px
  }
  .infra-grid h3 {
    min-height:0
  }
  .infra-grid article {
    padding-bottom:20px;
    border-bottom:1px solid #ffffff1f
  }
  .infra-grid .eyebrow {
    margin-bottom:10px
  }
  .pricing-layout,.about-layout {
    grid-template-columns:1fr;
    gap:28px
  }
  .pricing-card {
    padding:24px
  }
  .footer-inner {
    flex-direction:column;
    padding-block:35px
  }
  .footer-links {
    gap:13px 25px
  }
  .lightbox {
    padding:10px
  }
  .lightbox img {
    max-width:88vw
  }
  .no-js .toolbar {
    margin-inline-start:0
  }
  .no-js .header-inner {
    justify-content:space-between
  }
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
}

/* Privacy, website terms and error pages share the landing navigation and themes. */
.legal-page {
  max-width: 900px;
  padding-block: 60px 80px;
}
.legal-page > .eyebrow {
  margin-top: 38px;
}
.legal-page h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
}
.legal-date {
  margin-top: 18px;
  font-size: .78rem;
}
.legal-intro {
  font-size: 1.05rem;
  max-width: 650px;
  margin-bottom: 40px;
}
.legal-content section {
  padding-block: 26px;
  border-top: 1px solid var(--line);
}
.legal-content h2, .error-page h2 {
  font-size: 1.35rem;
  letter-spacing: -.025em;
  margin-bottom: 15px;
}
.legal-content p {
  font-size: .92rem;
  line-height: 1.9;
  margin: 0;
}
.legal-content a {
  text-decoration: underline;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.error-page > p {
  margin-top: 22px;
}
.error-page section {
  margin-top: 45px;
}

/* Landing sections: steps, before/after, audience, comparison, trust, final action. */
[hidden] {
  display:none!important
}
.language-switch {
  display:flex;
  gap:6px
}
.language {
  padding-inline:8px
}
.menu-toggle {
  min-height:44px;
  min-width:44px
}
.nav-sign-in {
  display:none
}
.actions .text-link,.final-cta .text-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-inline:10px;
  font-size:.9rem
}
.beta-note .text-link {
  margin-inline-start:6px
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  list-style:none;
  padding:0;
  margin:0 0 40px
}
.steps li {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:26px
}
.step-number {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--amber);
  color:var(--steel);
  font-weight:800;
  margin-bottom:18px
}
.steps h3 {
  margin-bottom:10px
}
.steps p {
  font-size:.9rem;
  margin:0
}
.before-after {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  align-items:center;
  margin-bottom:40px
}
.before-after figure {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden
}
.before-after .eyebrow {
  margin:0;
  padding:12px 18px;
  border-bottom:1px solid var(--line)
}
.before-after img {
  width:100%
}
.before-after-arrow {
  font-size:2rem;
  color:#8a6000
}
[data-theme=dark] .before-after-arrow {
  color:var(--amber)
}
[dir=rtl] .before-after-arrow {
  transform:scaleX(-1)
}
.section-cta {
  margin-top:36px;
  display:flex;
  justify-content:center
}
.audience-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  list-style:none;
  padding:0;
  margin:0
}
.audience-grid li {
  border-inline-start:3px solid var(--amber);
  padding-inline-start:18px
}
.audience-grid h3 {
  font-size:1.05rem;
  margin-bottom:10px
}
.audience-grid p {
  font-size:.88rem;
  margin:0
}
.samples {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 24px;
  margin-top:28px;
  padding:18px 22px;
  border:1px dashed var(--line);
  border-radius:10px
}
.samples h3 {
  font-size:.95rem;
  letter-spacing:0
}
.samples a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:.88rem;
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:4px
}
.compare {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.compare article {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:30px
}
.compare article:last-child {
  border-top:4px solid var(--amber)
}
.compare img {
  border-radius:7px;
  margin-bottom:16px
}
.compare-tag {
  font-size:.8rem;
  font-weight:700;
  margin:6px 0 16px
}
.compare ul {
  padding-inline-start:20px;
  margin:0 0 24px;
  color:var(--muted);
  font-size:.9rem
}
.compare li {
  margin-bottom:6px
}
.trust-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px
}
.trust-layout h2 {
  font-size:clamp(2rem,3vw,3rem);
  margin-bottom:24px
}
.trust-layout p {
  font-size:.92rem
}
.trust-layout p a {
  font-weight:650
}
.trust-facts>div {
  padding-block:18px;
  border-bottom:1px solid var(--line)
}
.trust-facts>div:first-child {
  padding-top:0
}
.trust-facts h3 {
  margin-bottom:8px
}
.trust-facts p {
  margin:0;
  font-size:.88rem
}
.final-cta {
  text-align:center
}
.final-cta h2 {
  margin-bottom:16px
}
.final-cta>p {
  font-size:1.05rem
}
.next-steps {
  max-width:620px;
  margin:36px auto 0;
  text-align:start;
  color:var(--muted);
  font-size:.9rem;
  padding-inline-start:22px
}
.next-steps li {
  margin-bottom:8px
}
.mobile-bar {
  display:none
}
pre[dir=ltr] {
  text-align:left
}
/* Arabic: system Arabic faces, no negative tracking (it breaks letter joining). */
:root[lang=ar] {
  font-family:"Noto Sans Arabic","Segoe UI","Geeza Pro","Tahoma",Inter,system-ui,sans-serif
}
[lang=ar] h1,[lang=ar] h2,[lang=ar] h3,[lang=ar] .eyebrow {
  letter-spacing:0
}
[lang=ar] h1 {
  line-height:1.35
}
[lang=ar] h2 {
  line-height:1.3
}
@media(max-width:1100px) {
  .audience-grid {
    grid-template-columns:repeat(2,1fr);
    gap:28px
  }
}
@media(max-width:900px) {
  .nav-sign-in {
    display:block
  }
  .header .sign-in {
    display:none
  }
  .steps,.compare,.trust-layout {
    grid-template-columns:1fr
  }
  .trust-layout {
    gap:30px
  }
  .before-after {
    grid-template-columns:1fr;
    gap:10px
  }
  .before-after-arrow,[dir=rtl] .before-after-arrow {
    transform:rotate(90deg);
    justify-self:center
  }
}
@media(max-width:600px) {
  .audience-grid {
    grid-template-columns:1fr
  }
  .language-switch {
    gap:4px
  }
  .language {
    padding-inline:4px;
    font-size:.7rem
  }
  .compare article {
    padding:22px
  }
  .mobile-bar {
    display:flex;
    gap:10px;
    position:fixed;
    inset-inline:0;
    bottom:0;
    z-index:30;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--bg);
    border-top:1px solid var(--line)
  }
  .mobile-bar .button {
    flex:1;
    min-height:48px
  }
  .mobile-bar-whatsapp {
    display:grid;
    place-items:center;
    width:48px;
    border:1px solid var(--line);
    border-radius:7px
  }
  body {
    padding-bottom:72px
  }
}
[lang=ar] .eyebrow {
  font-size:.82rem
}