/* Plus Jakarta Sans, self-hosted (SIL Open Font License 1.1, assets/fonts/OFL.txt).
   One variable file per subset covers every weight the site uses (400 to 800). */
@font-face {
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}
@font-face {
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}
:root {
  color-scheme:light;
  --paper:#F8FAFC;
  --surface:#fff;
  --ink:#1B2A4A;
  --muted:#5A6577;
  --line:#E2E8F0;
  --accent:#2E6B9E;
  --bluewash:#DBEAFE;
  --radius:12px;
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--paper);
  color:var(--ink)
}

:root[data-theme=dark] {
  color-scheme:dark;
  --paper:#0F172A;
  --surface:#1B2A4A;
  --ink:#F8FAFC;
  --muted:#94A3B8;
  --line:#5A6577;
  --accent:#60A5FA;
  --bluewash:#1B2A4A
}

* {
  box-sizing:border-box
}
body {
  margin:0;
  font-size:16px;
  line-height:1.7
}
a {
  color:var(--accent);
  text-underline-offset:5px
}
a:hover {
  text-decoration-thickness:2px
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  font:inherit;
  cursor:pointer
}
button:focus-visible,a:focus-visible,summary:focus-visible,video:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}
img {
  max-width:100%;
  display:block
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  line-height:1.15;
  /* -.04em collapsed Plus Jakarta Sans's word spaces at display sizes ("A betterway"); the same loosening
     vantalect.com made after its by-eye review. */
  letter-spacing:-.035em;
  word-spacing:.06em
}
h1 {
  font-size:clamp(2.8rem,6vw,5.3rem);
  font-weight:600
}
h2 {
  font-size:clamp(2rem,3vw,3.1rem);
  font-weight:600
}
h3 {
  font-size:1.3rem;
  letter-spacing:-.025em
}
p {
  max-width:68ch
}
sup {
  font-size:.45em;
  vertical-align:super
}
small,.meta {
  font-size:.875rem;
  color:var(--muted)
}
.wrap {
  width:min(1280px,calc(100% - 96px));
  margin:auto
}
.skip {
  position:fixed;
  left:16px;
  top:-100px;
  background:var(--surface);
  padding:12px;
  z-index:100
}
.skip:focus {
  top:8px
}
.header {
  background:var(--paper);
  border-bottom:1px solid var(--line)
}
.header-inner {
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.brand {
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap
}
.brand strong {
  font-size:1.5rem;
  letter-spacing:.13em
}
.brand span {
  font-size:1rem;
  border-left:1px solid var(--line);
  padding-left:16px;
  font-weight:500
}
.nav {
  display:flex;
  align-items:center;
  gap:29px
}
.nav a {
  color:var(--muted);
  text-decoration:none;
  font-size:.9rem;
  font-weight:600
}
.nav a[aria-current=page] {
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:12px
}
.theme {
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  border-radius:50%;
  width:40px;
  height:40px;
  font-size:20px;
  line-height:1
}
.hero {
  position:relative;
  min-height:590px;
  isolation:isolate;
  background:#0F172A;
  color:#F8FAFC;
  overflow:hidden
}
.hero>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
  z-index:-2
}
.hero:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(15,23,42,.90),rgba(15,23,42,.46) 50%,rgba(15,23,42,.04));
  z-index:-1
}
.hero-copy {
  padding:85px 0 88px;
  max-width:720px
}
.hero h1 {
  max-width:620px;
  margin-bottom:25px
}
.hero p {
  font-size:1.125rem;
  max-width:500px;
  color:#E2E8F0;
  margin-bottom:30px
}
.kicker {
  font-size:.9rem;
  font-weight:600;
  margin-bottom:26px
}
.actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:48px;
  padding:12px 22px;
  border-radius:6px;
  background:var(--accent);
  color:var(--surface);
  text-decoration:none;
  font-size:.9rem;
  font-weight:700;
  border:1px solid transparent
}
.hero .button {
  background:#F8FAFC;
  color:#1B2A4A
}
.hero .button.secondary {
  background:transparent;
  color:#F8FAFC;
  border-color:#94A3B8
}
.button.secondary {
  background:transparent;
  color:var(--ink);
  border-color:var(--line)
}
.intro-line {
  display:flex;
  gap:35px;
  justify-content:space-between;
  align-items:center;
  padding:26px 0;
  border-bottom:1px solid var(--line)
}
.intro-line p {
  margin:0;
  font-size:.95rem
}
.intro-line a {
  white-space:nowrap;
  font-size:.9rem
}
.section {
  padding:76px 0
}
.section-head {
  display:flex;
  gap:32px;
  align-items:end;
  justify-content:space-between;
  margin-bottom:35px
}
.section-head h2 {
  margin-bottom:0
}
.section-head p {
  max-width:410px;
  margin:0;
  color:var(--muted)
}
.feature {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:55px;
  align-items:center
}
.feature-image {
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  display:block;
  background:#0F172A
}
.feature-image img {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover
}
.play-label {
  position:absolute;
  bottom:20px;
  left:20px;
  background:#F8FAFC;
  color:#1B2A4A;
  border-radius:50px;
  padding:10px 18px;
  font-size:.9rem;
  font-weight:700
}
.feature h2 {
  font-size:2.6rem
}
.feature p {
  color:var(--muted)
}
.feature .meta {
  display:block;
  margin-bottom:16px
}
.resource-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}
.resource {
  padding:28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface)
}
.resource p {
  color:var(--muted);
  font-size:.95rem
}
.resource a {
  font-size:.9rem;
  font-weight:700
}
.resource h3 {
  margin-bottom:12px
}
.wash {
  background:var(--bluewash)
}
.contact-band {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  padding:50px 0
}
.contact-band h2 {
  font-size:2.2rem;
  margin-bottom:12px
}
.contact-band p {
  margin:0;
  color:var(--muted)
}
.footer {
  padding:42px 0;
  border-top:1px solid var(--line)
}
.footer-top,.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:center
}
.footer-links {
  display:flex;
  gap:24px
}
.footer a {
  font-size:.9rem;
  color:var(--muted)
}
.footer-bottom {
  margin-top:28px;
  font-size:.8rem;
  color:var(--muted)
}
.page-intro {
  padding:65px 0 40px
}
.page-intro h1 {
  font-size:clamp(2.8rem,5vw,4.4rem);
  max-width:900px;
  margin-bottom:22px
}
.page-intro p {
  font-size:1.1rem;
  color:var(--muted)
}
.breadcrumbs {
  font-size:.875rem;
  margin-bottom:22px;
  color:var(--muted)
}
.cinema {
  padding:0 0 55px
}
.cinema video {
  width:100%;
  max-height:68vh;
  aspect-ratio:16/9;
  background:#0F172A;
  display:block;
  border-radius:var(--radius)
}
.video-info {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:30px;
  margin-top:22px
}
.video-info h2 {
  font-size:1.8rem;
  margin-bottom:10px
}
.video-info p {
  color:var(--muted);
  margin-bottom:8px
}
.video-info .actions {
  flex-shrink:0
}
.video-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px 24px
}
.film {
  scroll-margin-top:20px
}
.film button {
  display:block;
  padding:0;
  border:0;
  border-radius:10px;
  overflow:hidden;
  background:#0F172A;
  position:relative;
  width:100%
}
.film img {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover
}
.film button:after {
  content:'▶';
  position:absolute;
  bottom:13px;
  left:14px;
  border-radius:50%;
  background:#F8FAFC;
  color:#1B2A4A;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  font-size:14px
}
.film button:hover img {
  opacity:.85
}
.film h3 {
  margin:17px 0 8px
}
.film p {
  font-size:.9rem;
  color:var(--muted);
  margin-bottom:8px
}
.film a {
  font-size:.875rem
}
.duration {
  position:absolute;
  right:12px;
  bottom:14px;
  color:#F8FAFC;
  background:#0F172A;
  padding:2px 9px;
  font-size:.8rem;
  border-radius:4px
}
.group-heading {
  margin:35px 0 25px;
  font-size:1.8rem
}
.promo-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px 24px
}
.promo-grid video {
  width:100%;
  aspect-ratio:16/9;
  background:#0F172A;
  border-radius:10px;
  display:block
}
.promo-grid video.portrait {
  aspect-ratio:9/16;
  max-height:550px
}
.format-toggle {
  display:flex;
  gap:8px;
  margin:14px 0
}
.format-toggle button {
  font-size:.8rem;
  padding:6px 12px;
  border:1px solid var(--line);
  color:var(--ink);
  background:var(--surface);
  border-radius:5px
}
.format-toggle button[aria-pressed=true] {
  background:var(--bluewash);
  border-color:var(--accent)
}
.press-layout {
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:60px
}
.press-nav {
  position:sticky;
  top:25px;
  align-self:start
}
.press-nav a {
  display:block;
  padding:8px 0;
  font-size:.9rem;
  text-decoration:none
}
.press-body>section {
  padding-bottom:55px;
  margin-bottom:45px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:24px
}
.press-body h2 {
  font-size:2.25rem
}
.press-body h3 {
  margin-top:25px
}
.press-body h4 {
  font-size:1.1rem
}
.press-body p,.press-body li {
  color:var(--muted)
}
table {
  border-collapse:collapse;
  width:100%;
  margin:25px 0
}
td,th {
  padding:12px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top
}
td:first-child {
  font-weight:600
}
dl {
  display:grid;
  grid-template-columns:130px 1fr;
  gap:12px
}
dd {
  margin:0
}
.documents {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.document-link {
  padding:19px 20px;
  border:1px solid var(--line);
  border-radius:8px;
  text-decoration:none;
  display:block;
  font-weight:600
}
.document-link span {
  display:block;
  font-size:.8rem;
  font-weight:400;
  color:var(--muted);
  margin-top:5px
}
.asset-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.asset-list a {
  font-size:.9rem;
  padding:15px 0;
  border-bottom:1px solid var(--line)
}
.document-body {
  max-width:850px;
  padding-bottom:80px
}
.document-body h1 {
  font-size:2.5rem
}
.document-body h2 {
  font-size:1.8rem;
  margin-top:40px
}
.document-body h3 {
  margin-top:30px
}
.table-scroll {
  overflow:auto
}
.portrait-photo {
  width:150px;
  height:150px;
  object-fit:cover;
  border-radius:10px;
  float:right;
  margin:0 0 22px 28px
}
.notice {
  font-size:.875rem;
  color:var(--muted)
}
.hidden {
  display:none
}

@media(max-width:1000px) {
  .wrap {
  width:calc(100% - 48px)
}
.nav {
  gap:17px
}
.nav a {
  font-size:.8rem
}
.brand strong {
  font-size:1.15rem
}
.brand span {
  font-size:.85rem
}
.feature {
  gap:30px
}
.feature h2 {
  font-size:2rem
}
.press-layout {
  grid-template-columns:160px minmax(0,1fr);
  gap:30px
}
.resource-grid,.video-grid,.promo-grid {
  grid-template-columns:repeat(2,1fr)
}

}

@media(max-width:700px) {
  .wrap {
  width:calc(100% - 36px)
}
.header-inner {
  padding:18px 0;
  display:block
}
.brand {
  margin-bottom:18px
}
.nav {
  gap:20px;
  flex-wrap:wrap
}
.nav a {
  font-size:.8rem
}
.theme {
  margin-left:auto;
  width:32px;
  height:32px
}
.hero {
  min-height:570px
}
.hero-copy {
  padding:70px 0
}
.hero h1 {
  font-size:3.2rem;
  max-width:360px
}
.hero>img {
  object-position:63% center
}
.hero:after {
  background:rgba(15,23,42,.60)
}
.intro-line,.section-head,.contact-band,.footer-top,.footer-bottom,.video-info {
  display:block
}
.intro-line a {
  display:inline-block;
  margin-top:14px
}
.section {
  padding:48px 0
}
.section-head p {
  margin-top:18px
}
.feature {
  grid-template-columns:1fr;
  gap:25px
}
.feature h2 {
  font-size:2.4rem
}
.resource-grid,.video-grid,.promo-grid,.documents,.asset-list {
  grid-template-columns:1fr
}
.contact-band .button {
  margin-top:24px
}
.footer-links {
  flex-wrap:wrap;
  margin-top:20px
}
.footer-bottom p {
  margin:12px 0
}
.page-intro {
  padding:42px 0 25px
}
.page-intro h1 {
  font-size:2.7rem
}
.press-layout {
  display:block
}
.press-nav {
  position:static;
  display:flex;
  gap:10px 22px;
  flex-wrap:wrap;
  margin-bottom:35px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line)
}
.press-nav a {
  padding:0
}
.cinema video {
  max-height:none
}
.video-info .actions {
  margin-top:18px
}
.portrait-photo {
  float:none;
  margin:0 0 22px;
  width:130px;
  height:130px
}
.press-body>section {
  padding-bottom:32px;
  margin-bottom:32px
}
dl {
  grid-template-columns:1fr
}
dd {
  margin-bottom:15px
}

}

@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto!important
}

}

.screenshot-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:40px 28px
}
.screenshot-card>a:first-child {
  display:block;
  color:var(--ink);
  text-decoration:none
}
.screenshot-card img {
  width:100%;
  height:auto;
  aspect-ratio:1.44;
  object-fit:cover;
  object-position:top;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface)
}
.screenshot-card h2,.screenshot-card h3 {
  font-size:1.25rem;
  margin:18px 0 9px
}
.screenshot-card p {
  font-size:.875rem;
  color:var(--muted)
}
.screenshot-card .actions {
  font-size:.875rem
}
.screenshot-filters {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:20px 0 32px
}
.screenshot-filters button {
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--ink);
  background:var(--surface);
  font-size:.9rem
}
.screenshot-filters button[aria-pressed=true] {
  border-color:var(--accent);
  background:var(--bluewash)
}
.website-shot {
  max-width:940px
}
.website-shot img {
  border:1px solid var(--line);
  border-radius:10px;
  margin-bottom:22px
}
dialog {
  width:min(1400px,94vw);
  max-height:94vh;
  padding:25px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
  color:var(--ink)
}
dialog::backdrop {
  background:rgba(15,23,42,.85)
}
dialog form {
  float:right
}
dialog h2 {
  font-size:1.5rem;
  padding-right:110px
}
dialog img {
  width:100%;
  height:auto;
  margin:25px 0
}
dialog[open] {
  display:block
}
[hidden] {
  display:none!important
}
.video-grid video {
  width:100%;
  background:#0F172A;
  aspect-ratio:16/9
}
 @media(max-width:700px) {
  .screenshot-grid {
  grid-template-columns:1fr
}
.nav {
  gap:15px
}
.nav a {
  font-size:.75rem
}
.header-inner .brand {
  margin-bottom:14px
}

}

.swatches {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin:24px 0
}
.swatches span {
  display:block;
  height:70px;
  border:1px solid var(--line);
  border-radius:6px;
  margin-bottom:10px
}
.swatches strong,.swatches code {
  display:block;
  font-size:.875rem
}
.swatches code {
  color:var(--muted)
}
td:first-child {
  font-weight:400
}
 @media(max-width:700px) {
  .swatches {
  grid-template-columns:1fr 1fr
}

}


@media(max-width:700px) {
 .header-inner {position:relative;}
 .nav {gap:10px 20px;}
 .nav a {font-size:.875rem;}
 .theme {position:absolute;top:16px;right:0;}
}
.feature > *, .resource-grid > *, .video-grid > *, .screenshot-grid > *, .press-layout > * {min-width:0;}
h1, h2, h3, .button, .press-body {overflow-wrap:anywhere;}
.button {max-width:100%;}
.play-label {max-width:calc(100% - 40px);}

/* Target size (WCAG 2.2 SC 2.5.8). Standalone links get a box at least 24 px tall; a link inside running
   text gets vertical padding, which enlarges its target without moving the line it sits on. */
.nav a,.footer a,.breadcrumbs a,.actions a:not(.button),article > a:not(.button),.page-intro > a:not(.button) {
  display:inline-flex;
  align-items:center;
  min-height:32px
}
.brand {
  min-height:32px
}
article.screenshot-card > a {
  display:block
}
p a,li a,td a,dd a {
  padding-block:4px
}
th[scope=row] {
  font-weight:600
}
.table-scroll:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:4px
}

/* The Renkara wordmark: the brand guide's own outlines (Plus Jakarta Sans 700), inline so it takes the theme's ink. */
.brand .wordmark {
  display:block;
  height:24px;
  width:auto
}
@media(max-width:1000px) {
  .brand .wordmark {
    height:20px
  }
}