.features-site {
  background:#f8f8f3;
  color:#172b32;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Noto Sans JP",sans-serif;
}

.features-header {
  max-width:1180px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:36px;
  padding:25px 24px;
  border-bottom:1px solid #dce3df;
  position:relative;
  z-index:20;
}

.features-brand {
  font-weight:850;
  font-size:25px;
  letter-spacing:-1.3px;
  color:#172b32;
  text-decoration:none;
}

.features-nav {
  display:flex;
  gap:25px;
  font-size:14px;
  font-weight:650;
}

.features-nav a {
  color:#536363;
  text-decoration:none;
  padding:8px 0;
}

.features-nav a[aria-current=page] {
  color:#183d37;
  border-bottom:2px solid #183d37;
}

.features-account {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:20px;
  font-size:13px;
}

.features-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 25px;
  border:1px solid #173e36;
  border-radius:5px;
  background:#173e36;
  color:white;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  line-height:1.5;
  white-space:normal;
}

.features-button:hover {
  background:#245447;
  color:white;
}

.features-button--small {
  min-height:38px;
  padding:8px 16px;
  font-size:12px;
}

.features-main {
  max-width:1180px;
  margin:auto;
  padding:0 24px;
}

.features-intro {
  padding:88px 0 65px;
  max-width:800px;
}

.features-eyebrow {
  font-size:11px;
  font-weight:750;
  letter-spacing:2.4px;
  color:#42715e;
  margin:0 0 24px;
}

.features-intro h1,.features-hero h1 {
  font-size:clamp(32px,4.4vw,57px);
  font-weight:750;
  line-height:1.48;
  letter-spacing:-1.5px;
  margin:0 0 24px;
}

.features-lead {
  font-size:15px;
  line-height:2.1;
  color:#526362;
  margin:0 0 32px;
}

.features-choices {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.features-choice {
  padding:35px 38px;
  position:relative;
  border-top:3px solid #4569ab;
  background:#ebeff6;
  border-radius:0 0 5px 5px;
}

.features-choice--live {
  border-color:#357466;
  background:#e6eeea;
}

.features-choice h2 {
  font-size:32px;
  font-weight:700;
  letter-spacing:-1px;
  margin:14px 0 12px;
}

.features-choice p {
  font-size:15px;
  line-height:1.8;
  margin:0 0 30px;
  color:#405653;
}

.features-number {
  font-size:11px;
  letter-spacing:2px;
  color:#62766e;
}

.features-text-link {
  display:inline-block;
  color:#264c41;
  text-decoration:underline;
  text-underline-offset:5px;
  font-weight:650;
  font-size:13px;
  padding:10px 0;
}

.features-unified-note {
  font-size:12px;
  color:#5c6e66;
  margin:26px 0 70px;
}

.features-footer {
  max-width:1180px;
  margin:auto;
  padding:28px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #dce3df;
}

.features-footer nav {
  display:flex;
  gap:25px;
  font-size:12px;
}

.features-hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:65px;
  align-items:center;
  padding:80px 0;
}

.features-hero--reading .features-eyebrow {
  color:#426595;
}

.features-hero--reading .features-button {
  background:#284b85;
  border-color:#284b85;
}

.features-hero h1 {
  font-size:clamp(30px,3.6vw,47px);
}

.features-cta {
  display:flex;
  gap:25px;
  align-items:center;
  flex-wrap:wrap;
}

.features-reading-sample,.features-conversation-sample {
  padding:26px;
  background:#fff;
  border:1px solid #d6dfd9;
  border-radius:8px;
  box-shadow:0 20px 50px #203e3610;
  transform:rotate(1deg);
}

.features-conversation-sample {
  background:#edf3ef;
  transform:rotate(-1deg);
  padding:28px;
}

.features-sample-top {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #dfe6e2;
  padding-bottom:16px;
  margin-bottom:20px;
  font-size:11px;
  color:#4a6261;
}

.features-sample-top span:first-child {
  font-weight:700;
  font-size:14px;
}

.features-sample-art {
  height:110px;
  background:#e5e6d9;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.features-sample-art span {
  font-size:65px;
  z-index:1;
  filter:grayscale(.3);
}

.features-sample-art i {
  position:absolute;
  background:#cbd4c2;
  width:190px;
  height:190px;
  border-radius:100%;
  left:-80px;
  top:10px;
}

.features-sample-art i:last-child {
  left:auto;
  right:-40px;
  top:-95px;
  background:#d9d0b8;
}

.features-reading-sample .features-eyebrow {
  margin-bottom:12px;
}

.features-reading-sample h2 {
  font-size:25px;
  font-weight:650;
  margin:0 0 15px;
  letter-spacing:-.6px;
}

.features-english {
  font-size:15px;
  line-height:1.9;
  color:#233638;
}

.features-translation {
  font-size:12px;
  line-height:1.9;
  margin:12px 0 18px;
  color:#75817e;
}

.features-sample-tags {
  display:flex;
  gap:9px;
  border-top:1px solid #e5eae6;
  padding-top:15px;
}

.features-sample-tags span {
  font-size:10px;
  color:#526861;
  padding:4px 9px;
  border:1px solid #dbe3dd;
  border-radius:20px;
}

.features-chat-label {
  font-size:11px;
  color:#667e71;
  letter-spacing:1px;
  margin:22px 0 14px;
}

.features-bubble {
  padding:15px 17px;
  border-radius:10px 10px 10px 0;
  background:white;
  font-size:14px;
  line-height:1.8;
  margin:12px 30px 12px 0;
  max-width:100%;
}

.features-bubble--user {
  margin:12px 0 12px 30px;
  background:#215849;
  color:white;
  border-radius:10px 10px 0 10px;
}

.features-chat-end {
  font-size:10px;
  color:#527467;
  margin-top:28px;
}

.features-chat-end span {
  color:#538371;
  letter-spacing:2px;
  margin-right:10px;
}

.features-explainer {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  border-top:1px solid #dce3df;
  padding:40px 0 60px;
}

.features-explainer h2 {
  font-size:17px;
  font-weight:700;
  margin:16px 0;
}

.features-explainer p {
  font-size:13px;
  line-height:2;
  color:#5b6b63;
}

.features-final-cta {
  border-top:1px solid #dce3df;
  padding:48px 0 65px;
  text-align:center;
}

.features-final-cta h2 {
  font-size:26px;
  margin:0 0 25px;
  font-weight:700;
}

.features-final-cta p {
  font-size:12px;
  color:#5b6b63;
  margin:20px 0 0;
}

.features-app-intro {
  padding:55px 0 35px;
}

.features-app-intro h1 {
  font-size:30px;
  font-weight:700;
}

.features-app-intro .features-eyebrow {
  margin-bottom:15px;
}

.features-choice>.features-button {
  margin-right:18px;
}

.features-account-menu {
  position:relative;
  font-size:12px;
  color:#314841;
}

.features-account-menu summary {
  cursor:pointer;
  white-space:nowrap;
  padding:10px 0;
}

.features-account-menu nav {
  position:absolute;
  right:0;
  top:100%;
  width:200px;
  padding:12px;
  background:white;
  border:1px solid #d7dfd9;
  border-radius:5px;
  box-shadow:0 10px 24px #173e3618;
  z-index:50;
  display:grid;
  text-align:left;
}

.features-account-menu nav a,.features-account-menu nav button,.features-credit {
  display:block;
  padding:10px;
  line-height:1.5;
}

.features-credit {
  font-weight:700;
  border-bottom:1px solid #edf0eb;
}

.features-account-menu nav a:hover,.features-account-menu nav button:hover {
  background:#edf4ef;
}

.eigobox-home-link {
  font-size:13px;
  font-weight:800;
  letter-spacing:-.5px;
  color:#263c3c;
  display:block;
  margin-bottom:5px;
}

.features-auth {
  max-width:650px;
  margin:45px auto;
}

.features-auth .field {
  width:100%;
}

.features-auth-note {
  font-size:13px;
  color:#596d64;
  margin:18px 0 28px;
}

.features-auth input:not([type=submit]):not([type=checkbox]) {
  font-size:16px;
  max-width:100%;
}

.features-auth .actions {
  width:100%;
}

.features-header a:focus-visible,.features-button:focus-visible,.features-text-link:focus-visible,.features-account-menu summary:focus-visible,.eigobox-home-link:focus-visible {
  outline:3px solid #7aab8c;
  outline-offset:4px;
}

.reading-mode-portal .eigobox-mode-portal__actions {
  gap:18px;
  flex-wrap:wrap;
}

.live-sidebar-mode-portal .eigobox-mode-portal__actions {
  align-items:flex-start;
}

.live-sidebar-mode-portal .features-account-menu {
  font-size:10px;
}

.live-sidebar-mode-portal .features-account-menu nav {
  right:auto;
  left:0;
}

@media(max-width:760px) {
  .features-header {
    gap:24px;
    flex-wrap:wrap;
    padding:20px;
  }
  .features-brand {
    font-size:23px;
  }
  .features-nav {
    gap:20px;
  }
  .features-account {
    gap:16px;
  }
  .features-main {
    padding:0 20px;
  }
  .features-intro {
    padding:55px 0 45px;
  }
  .features-intro h1 {
    font-size:38px;
  }
  .features-lead {
    font-size:14px;
  }
  .features-choices {
    gap:18px;
  }
  .features-choice {
    padding:25px;
  }
  .features-choice h2 {
    font-size:27px;
  }
  .features-choice p {
    font-size:13px;
  }
  .features-hero {
    grid-template-columns:1fr;
    gap:35px;
    padding:48px 0;
  }
  .features-hero h1 {
    font-size:37px;
  }
  .features-reading-sample,.features-conversation-sample {
    max-width:470px;
    width:100%;
    margin:auto;
    transform:none;
  }
  .features-explainer {
    gap:20px;
  }
  .features-explainer h2 {
    font-size:15px;
  }
  .features-footer {
    gap:20px;
    flex-wrap:wrap;
  }
  .features-footer nav {
    gap:15px;
  }
  .features-home-link {
    display:none;
  }
  .features-auth {
    margin:30px auto;
  }
}

@media(max-width:480px) {
  .features-header {
    gap:20px 25px;
  }
  .features-account {
    width:100%;
    justify-content:flex-end;
    border-top:1px solid #e4e9e4;
    padding-top:12px;
  }
  .features-account-menu nav {
    width:190px;
  }
  .features-header>.features-account:has(.features-account-menu) {
    width:auto;
    padding:0;
    border:0;
    margin-left:auto;
  }
  .features-header:has(.features-account-menu) {
    gap:18px;
  }
  .features-header:has(.features-account-menu) .features-nav {
    order:3;
    flex-basis:100%;
  }
  .features-intro {
    padding:45px 0 35px;
  }
  .features-intro h1 {
    font-size:32px;
    letter-spacing:-.7px;
  }
  .features-lead br {
    display:none;
  }
  .features-choices {
    grid-template-columns:1fr;
  }
  .features-choice {
    padding:27px;
  }
  .features-choice h2 {
    font-size:30px;
  }
  .features-choice p {
    font-size:14px;
    margin-bottom:20px;
  }
  .features-unified-note {
    font-size:11px;
    line-height:1.9;
    margin-bottom:40px;
  }
  .features-hero h1 {
    font-size:30px;
    letter-spacing:-.8px;
  }
  .features-cta {
    gap:12px;
  }
  .features-explainer {
    grid-template-columns:1fr;
    gap:27px;
  }
  .features-explainer h2 {
    font-size:17px;
    margin:10px 0;
  }
  .features-explainer p {
    margin:0;
  }
  .features-final-cta h2 {
    font-size:22px;
  }
  .features-final-cta p {
    font-size:11px;
    line-height:1.8;
  }
  .features-reading-sample,.features-conversation-sample {
    padding:19px;
  }
  .features-reading-sample h2 {
    font-size:22px;
  }
  .features-english {
    font-size:13px;
  }
  .features-bubble {
    font-size:12px;
    margin-right:15px;
  }
  .features-bubble--user {
    margin-right:0;
    margin-left:15px;
  }
  .features-app-intro {
    padding:30px 0;
  }
  .features-app-intro h1 {
    font-size:23px;
  }
  .reading-mode-portal {
    gap:10px;
  }
  .reading-mode-portal .eigobox-mode-portal__actions {
    gap:6px 14px;
    max-width:190px;
  }
  .reading-mode-portal .features-account-menu {
    flex-basis:100%;
    text-align:right;
  }
  .reading-mode-portal .reading-registration-link {
    min-width:0;
  }
  .features-auth-note {
    font-size:12px;
  }
  .features-auth {
    margin-top:25px;
  }
}

.reading-content-toolbar {
  flex-wrap:wrap;
  gap:12px;
}

.reading-content-toolbar nav {
  flex-wrap:wrap;
}

.reading-content-toolbar + div select {
  min-width:0;
  max-width:100%;
}