@font-face {
  font-family:Amiri;
  src:url('assets/fonts/Amiri-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:Amiri;
  src:url('assets/fonts/Amiri-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap
}
@font-face {
  font-family:Outfit;
  src:url('assets/fonts/Outfit-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
:root {
  color-scheme:light;
  --paper:#f7f4eb;
  --ink:#193b30;
  --muted:#53685d;
  --line:#cbd1c5;
  --soft:#e9ebdf;
  --accent:#205545;
  --on-accent:#f7f4eb;
  --stage:#dfe5d6;
  --display:Amiri,'Traditional Arabic',serif;
  --sans:Outfit,'Segoe UI',sans-serif
}
:root[data-theme=dark] {
  color-scheme:dark;
  --paper:#102b26;
  --ink:#eff2e5;
  --muted:#bccdc1;
  --line:#406056;
  --soft:#1b3a32;
  --accent:#d8e8c6;
  --on-accent:#15382d;
  --stage:#23483c
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme=light]) {
    color-scheme:dark;
    --paper:#102b26;
    --ink:#eff2e5;
    --muted:#bccdc1;
    --line:#406056;
    --soft:#1b3a32;
    --accent:#d8e8c6;
    --on-accent:#15382d;
    --stage:#23483c
  }
}
* {
  box-sizing:border-box
}
html {
  scroll-padding-top:30px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:20px/1.85 var(--display);
  text-rendering:optimizeLegibility
}
a {
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:5px
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
button {
  font:inherit
}
button,a.button {
  touch-action:manipulation
}
button[hidden] {
  display:none
}
::selection {
  background:var(--accent);
  color:var(--on-accent)
}
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}
main:focus {
  outline:none
}
.page-width {
  width:min(1180px,calc(100% - 96px));
  margin-inline:auto
}
.skip-link {
  position:fixed;
  inset-block-start:12px;
  inset-inline-start:12px;
  z-index:5;
  transform:translateY(-180%);
  background:var(--paper);
  padding:10px 18px
}
.skip-link:focus {
  transform:none
}
.site-header {
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line)
}
.brand {
  font-size:36px;
  font-weight:700;
  line-height:1.5;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:22px
}
.brand-note {
  font-size:17px;
  font-weight:400;
  color:var(--muted);
  border-inline-start:1px solid var(--line);
  padding-inline-start:22px
}
.site-header nav {
  display:flex;
  align-items:center;
  gap:24px;
  font-size:17px
}
.site-header nav>a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  text-decoration:none
}
.theme-toggle {
  min-height:44px;
  border:1px solid var(--line);
  border-radius:4px;
  background:transparent;
  color:var(--ink);
  padding:3px 14px;
  font-size:16px;
  cursor:pointer;
  transition:transform 140ms cubic-bezier(0.23, 1, 0.32, 1)
}
.hero {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:60px;
  align-items:center;
  padding-block:76px 94px
}
.eyebrow {
  font-size:17px;
  color:var(--muted);
  margin:0 0 22px
}
.hero h1 {
  font-size:clamp(62px,6.6vw,94px);
  line-height:1.3;
  font-weight:700;
  margin:0 0 24px;
}
.hero h1 span {
  color:var(--accent)
}
.hero-lede {
  max-width:445px;
  font-size:24px;
  line-height:1.9;
  margin:0 0 31px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:54px;
  padding:9px 24px;
  border:1px solid transparent;
  border-radius:4px;
  font-size:20px;
  text-decoration:none;
  transition:transform 140ms cubic-bezier(0.23, 1, 0.32, 1)
}
.button-primary {
  background:var(--accent);
  color:var(--on-accent)
}
.button span {
  margin-inline-start:13px;
  font-family:var(--sans);
  font-size:23px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:16px;
  min-height:44px;
  font-size:18px
}
.product-figure {
  margin:0;
  padding-inline-start:20px
}
.screenshot-stage {
  position:relative;
  background:var(--stage);
  padding:36px 30px 38px 62px;
  border-radius:2px 76px 2px 2px
}
.screenshot-stage img {
  display:block;
  width:min(100%,324px);
  height:auto;
  border-radius:9px;
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgb(16 43 38 / .13);
  margin-inline:auto
}
figcaption {
  font-size:14px;
  color:var(--muted);
  line-height:1.8;
  margin-top:14px;
  padding-inline:3px
}
figcaption a {
  display:inline-block;
  min-height:34px
}
.experience {
  display:grid;
  grid-template-columns:1fr 1.12fr;
  gap:110px;
  padding-block:70px 100px;
  border-top:1px solid var(--line)
}
h2 {
  font-size:46px;
  line-height:1.5;
  margin:0 0 16px;
  font-weight:700
}
.section-intro>p:last-child {
  max-width:330px;
  color:var(--muted);
  margin:0;
  font-size:21px
}
.experience-list {
  list-style:none;
  padding:0;
  margin:0
}
.experience-list li {
  display:grid;
  grid-template-columns:40px 1fr;
  gap:26px;
  padding-block:24px;
  border-top:1px solid var(--line)
}
.experience-list li:first-child {
  padding-top:0;
  border-top:0
}
.step-number {
  font:15px/2 var(--sans);
  color:var(--muted);
  padding-top:6px
}
.experience-list h3 {
  font-size:25px;
  margin:0 0 4px;
  line-height:1.6
}
.experience-list p {
  font-size:20px;
  color:var(--muted);
  margin:0;
  max-width:430px
}
.installation {
  background:var(--soft);
  color:var(--ink)
}
.install-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px;
  align-items:center;
  padding-block:68px 73px
}
.installation h2 {
  font-size:50px;
  line-height:1.45
}
.installation p {
  font-size:20px;
  margin:0;
  color:var(--muted)
}
.install-options {
  max-width:380px
}
.button-light {
  background:var(--accent);
  color:var(--on-accent);
  min-width:230px
}
.installation .release-note {
  font-size:14px;
  line-height:1.9;
  margin-top:18px;
  max-width:350px;
  color:var(--muted)
}
.firefox-note {
  border-top:1px solid var(--line);
  margin-top:27px;
  padding-top:20px
}
.firefox-note h3 {
  font-size:21px;
  margin:0 0 3px;
  font-weight:400
}
.firefox-note p {
  font-size:17px
}
.faq {
  padding-block:96px 90px;
  display:grid;
  grid-template-columns:1fr 1.12fr;
  gap:110px
}
.faq-list details {
  border-bottom:1px solid var(--line)
}
.faq-list details:first-child {
  border-top:1px solid var(--line)
}
summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  list-style:none;
  cursor:pointer;
  min-height:76px;
  padding-block:16px;
  font-size:21px;
  line-height:1.7
}
summary::-webkit-details-marker {
  display:none
}
summary::after {
  content:'+';
  font:24px/1 var(--sans);
  flex-shrink:0;
  color:var(--muted)
}
details[open] summary::after {
  content:'−'
}
details p {
  font-size:19px;
  color:var(--muted);
  line-height:1.9;
  margin:0 0 24px;
  padding-inline-end:24px
}
.site-footer {
  border-top:1px solid var(--line);
  padding-block:32px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.site-footer .brand {
  font-size:30px
}
.site-footer p {
  color:var(--muted);
  font-size:15px;
  margin:0
}
.site-footer nav {
  display:flex;
  align-items:center;
  gap:26px;
  font-size:16px;
  flex-wrap:wrap
}
.site-footer nav a {
  min-height:44px;
  display:inline-flex;
  align-items:center
}
.legacy-link {
  color:var(--muted)
}
@media(pointer:fine) {
  button:active:not(:focus-visible),.button:active:not(:focus-visible) {
    transform:scale(.97)
  }
}
@media(hover:hover) and (pointer:fine) {
  .button:hover {
    transform:translateY(-2px)
  }
  .theme-toggle:hover {
    background:var(--soft)
  }
  .text-link:hover,.site-header nav>a:hover,.site-footer a:hover {
    color:var(--accent)
  }
}
@media(min-width:1440px) {
  .hero {
    gap:90px
  }
  .product-figure {
    padding-inline-start:40px
  }
}
@media(max-width:1000px) {
  .page-width {
    width:calc(100% - 64px)
  }
  .brand-note {
    display:none
  }
  .hero {
    gap:35px;
    padding-block:60px 65px
  }
  .hero h1 {
    font-size:70px
  }
  .hero-lede {
    font-size:22px
  }
  .product-figure {
    padding-inline-start:0
  }
  .screenshot-stage {
    padding:30px 23px 36px 40px
  }
  .hero-actions {
    gap:14px
  }
  .experience,.faq {
    gap:50px
  }
  .install-inner {
    gap:50px
  }
  .site-footer nav {
    gap:18px
  }
}
@media(max-width:720px) {
  .page-width {
    width:calc(100% - 40px)
  }
  .site-header {
    min-height:86px;
    gap:12px
  }
  .brand {
    font-size:30px
  }
  .site-header nav {
    gap:16px;
    font-size:15px
  }
  .theme-toggle {
    padding:2px 10px;
    font-size:14px
  }
  .hero {
    grid-template-columns:1fr;
    gap:40px;
    padding-block:44px 46px
  }
  .eyebrow {
    font-size:16px;
    margin-bottom:16px
  }
  .hero h1 {
    font-size:68px;
    line-height:1.3;
    margin-bottom:20px
  }
  .hero-lede {
    font-size:23px;
    max-width:480px;
    margin-bottom:24px
  }
  .hero-copy {
    max-width:520px
  }
  .hero-actions {
    gap:20px
  }
  .product-figure {
    max-width:400px;
    width:100%;
    margin-inline:auto
  }
  .screenshot-stage {
    padding:30px 32px 38px 48px;
    border-start-end-radius:60px
  }
  .screenshot-stage img {
    max-width:290px
  }
  .experience,.faq {
    grid-template-columns:1fr;
    gap:35px;
    padding-block:46px 54px
  }
  h2 {
    font-size:39px
  }
  .section-intro>p:last-child {
    max-width:440px;
    font-size:20px
  }
  .experience-list li {
    gap:16px;
    padding-block:22px
  }
  .experience-list p {
    max-width:none
  }
  .install-inner {
    grid-template-columns:1fr;
    gap:32px;
    padding-block:46px 52px
  }
  .installation h2 {
    font-size:44px
  }
  .install-options {
    max-width:none
  }
  .firefox-note {
    max-width:440px
  }
  .faq {
    gap:28px
  }
  .site-footer {
    align-items:flex-start;
    padding-block:26px 30px
  }
  .site-footer nav {
    gap:4px 18px;
    max-width:230px
  }
  .site-footer nav a {
    font-size:15px
  }
  summary {
    font-size:20px;
    min-height:72px
  }
}
@media(max-width:380px) {
  .page-width {
    width:calc(100% - 32px)
  }
  .site-header nav {
    gap:11px
  }
  .site-header nav>a:first-child {
    display:none
  }
  .hero h1 {
    font-size:59px
  }
  .hero-lede {
    font-size:21px
  }
  .button {
    padding-inline:18px;
    font-size:19px
  }
  .hero-actions {
    gap:13px
  }
  .text-link {
    font-size:16px
  }
  .site-footer {
    flex-direction:column;
    gap:16px
  }
  .site-footer nav {
    max-width:none;
    gap:4px 16px
  }
  .screenshot-stage {
    padding-inline:26px 38px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .button,.theme-toggle {
    transition:none
  }
  button:active:not(:focus-visible),.button:active:not(:focus-visible),.button:hover {
    transform:none
  }
}