/* Complete page-specific Japanese glyph coverage; real variable weights. */
@font-face {
  font-family: 'Lumina Sans';
  src: url('assets/sorieliq-sans.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  font-family: 'Lumina Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  font-weight: 400;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { font-weight: 500; }
.hero-heading h1 { font-weight: 500; letter-spacing: .025em; line-height: 1.45; }
h2 { letter-spacing: .035em; line-height: 1.55; }
h3 { letter-spacing: .025em; line-height: 1.6; }
p { letter-spacing: .025em; line-height: 1.9; }
.hero-heading p { font-weight: 400; font-size: 20px; letter-spacing: .06em; }
.logo { font-family: 'Lumina Sans',sans-serif; font-weight: 500; letter-spacing: .23em; }
.logo span { font-weight: 300; }
/* Preserve the supplied logo pixels; display only its central lockup area. */
.logo { display:block;position:relative;width:280px;aspect-ratio:1300 / 280;overflow:hidden;flex-shrink:0; }
.logo img { position:absolute;width:118.153846%;max-width:none;height:auto;left:-9.230769%;top:-128.571429%; }
footer .logo { width:250px; }
@media(max-width:1100px) { .site-header .logo { width:230px; } }
@media(max-width:767px) { .site-header .logo { width:220px; } footer .logo { width:230px; } }
@media(max-width:359px) { .site-header .logo { width:205px; } }
.eyebrow { font-weight: 500; letter-spacing: .24em; line-height: 1.6; }
.site-header nav { font-weight: 500; letter-spacing: .025em; }
.mode-switch button { font-weight: 500; letter-spacing: .04em; }
.mode-caption { font-weight: 500; letter-spacing: .04em; }
.hero .mode-caption {
  color:#102642;
  background:rgba(255,255,255,.93);
  padding:7px 20px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  box-shadow:0 2px 12px rgba(16,38,66,.07);
  text-shadow:none;
}
.hero[data-mode=movie] .mode-caption {
  color:#fff;
  background:rgba(16,38,66,.94);
  border-color:rgba(255,255,255,.22);
  text-shadow:none;
}
@media(max-width:767px) {
  .hero .mode-caption,.hero[data-mode=movie] .mode-caption {
    color:#102642;background:transparent;border:0;box-shadow:none;padding:0;text-shadow:none;
  }
}
.equipment button { font-weight: 500; letter-spacing: .02em; }
.equipment-description strong { font-weight: 600; }
.time-switch button { font-weight: 400; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.time-switch button[aria-pressed=true] { font-weight: 500; }
.time-switch button>span:first-of-type { font-size: 16px; letter-spacing: .06em; }
.step-number { font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.faq-list button { font-weight: 500; letter-spacing: .02em; }
.small-note,footer p { font-weight: 400; letter-spacing: .015em; }
.control-hint,.demo-label { letter-spacing: .025em; }
.solid-button,.outline-button { font-weight: 500; letter-spacing: .02em; }
@media(min-width:1200px) { .site-header nav { font-size:14px;gap:26px; } }
@media(max-width:767px) {
  .hero-heading h1 { font-size:32px;line-height:1.5;letter-spacing:.015em; }
  .hero-heading p { font-size:16px;letter-spacing:.015em; }
  h2 { font-size:28px;line-height:1.65;letter-spacing:.02em; }
  p { line-height:1.9;letter-spacing:.02em; }
  .mode-caption { font-size:15px;letter-spacing:.01em; }
  .mode-switch button { font-size:15px; }
  .section-heading>p:last-child { font-size:16px; }
  .control-hint { font-size:13px;letter-spacing:0; }
  .eyebrow { font-size:11px;letter-spacing:.2em; }
  .day-copy h3 { font-size:21px;line-height:1.65; }
  .steps-list h3 { font-size:22px; }
}
@media(max-width:359px) {
  .hero-heading h1 { font-size:28px;letter-spacing:0; }
  .hero-heading p { font-size:14px; }
  .mode-caption { font-size:13px; }
}

/* Supplied SORIELIQ wordmark, with the surrounding whitespace cropped by CSS. */
.logo{aspect-ratio:1240 / 220}.logo img{width:123.870968%;left:-12.096774%;top:-181.818182%}

/* Pre-cropped, compressed wordmark; preserve the existing logo viewport. */
.logo img{position:static;width:100%;max-width:100%;height:auto;left:auto;top:auto}
