@font-face {
  font-family: "Noto Sans";
  src: url("noto-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("noto-bold.woff") format("woff");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --sky: #E4F0FF;
  --cobalt: #294D91;
  --ink: #1D2D4C;
  --cloud: #F8FBFD;
  --denim: #A5BFDB;
  --display: "Cabin", "Noto Sans", sans-serif;
  --body: "Noto Sans", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 2rem; }
body { margin: 0; background: var(--sky); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.65; }
button, input { font: inherit; }
a { color: var(--cobalt); text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
::selection { background: var(--cobalt); color: var(--cloud); }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1rem; }
h1, h2, h3, .masthead, .process-name, .code-text, .offer-percent { font-family: var(--display); font-weight: 600; }
h1, h2, h3 { line-height: 1.1; margin: 0; }
h1 { font-size: clamp(2.6rem, 5.3vw, 4.6rem); letter-spacing: -.028em; max-width: 16ch; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.015em; }
h3 { font-size: 1.4rem; }
.skip { position: absolute; top: -100px; left: 1rem; z-index: 10; background: var(--cloud); padding: .75rem 1rem; border-radius: 8px; }
.skip:focus { top: 1rem; }
.shell { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.site-header { display: grid; grid-template-columns: 1fr 2.2fr; align-items: stretch; margin-top: 30px; border-bottom: 2px solid var(--cobalt); }
.masthead { display: flex; gap: 16px; align-items: center; padding: 4px 24px 27px 0; text-decoration: none; font-size: 27px; line-height: 1.02; color: var(--ink); }
.masthead img { width: 40px; height: 44px; flex: 0 0 40px; }
.masthead span { display: block; }
.process-ribbon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.process-ribbon a { position: relative; padding: 4px 22px 24px; text-decoration: none; border-left: 1px solid var(--denim); }
.process-ribbon a:hover { background: var(--cloud); }
.process-ribbon a[aria-current="page"]::after { position: absolute; content: ""; height: 6px; background: var(--cobalt); bottom: -1px; left: 22px; right: 22px; }
.process-name { display: block; font-size: 25px; line-height: 1.1; margin-bottom: 8px; }
.process-detail { color: var(--ink); font-size: 16px; line-height: 1.4; display: block; max-width: 17ch; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 16px; padding-top: 28px; }
.breadcrumbs .separator { width: 18px; height: 12px; border-left: 3px solid var(--cobalt); border-bottom: 3px solid var(--cobalt); }
.page-intro { position: relative; padding-top: 58px; padding-bottom: 35px; }
.page-intro .context { margin-bottom: 20px; font-size: 16px; color: var(--cobalt); }
.page-intro .lead { max-width: 69ch; font-size: 18px; margin-top: 22px; margin-bottom: 0; line-height: 1.6; }
.checked { display: flex; align-items: center; gap: 10px; margin-top: 22px; margin-bottom: 0; font-size: 16px; }
.checked::before { content: ""; display: inline-block; height: 12px; width: 12px; background: var(--cobalt); border-radius: 2px; }
.home-intro { padding-top: 50px; padding-bottom: 30px; }
.home-intro h1 { max-width: 18ch; }
.home-intro .lead { max-width: 72ch; }
.entry-map { position: relative; padding-left: 48px; padding-bottom: 8px; }
.entry-map::before { content: ""; position: absolute; top: 40px; bottom: 0; left: 0; width: 8px; background: var(--cobalt); border-radius: 8px; }
.entry-action { position: relative; display: grid; grid-template-columns: .85fr 1.5fr; gap: 32px; padding: 24px 30px; background: var(--cloud); border-radius: 8px; }
.entry-action::before { content: ""; position: absolute; left: -48px; top: 40px; width: 48px; height: 8px; background: var(--cobalt); }
.entry-action h2 { font-size: 28px; }
.entry-action p { margin-bottom: 7px; }
.conditional { display: inline-flex; gap: 10px; align-items: baseline; font-size: 16px; font-weight: 600; line-height: 1.55; text-decoration: underline; }
.conditional img { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; align-self: center; }
.choose-label { margin-top: 26px; margin-bottom: 42px; font-size: 23px; }
.code-fork { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.code-fork::before { content: ""; position: absolute; top: -24px; left: 24%; right: 24%; height: 8px; background: var(--cobalt); border-radius: 8px; }
.code-fork::after { content: ""; position: absolute; left: calc(50% - 4px); top: -53px; width: 8px; height: 37px; background: var(--cobalt); }
.code-leaf { position: relative; padding: 24px 30px; background: var(--cloud); border-radius: 8px; min-width: 0; }
.code-leaf::before { content: ""; position: absolute; width: 8px; height: 24px; top: -24px; left: calc(50% - 4px); background: var(--cobalt); }
.offer-label { font-size: 16px; margin: 0 0 2px; }
.offer-percent { font-size: 31px; line-height: 1.2; margin-bottom: 2px; color: var(--cobalt); }
.offer-conditions { margin: 0 0 12px; font-size: 16px; }
.copy-line { display: flex; align-items: center; gap: 20px; justify-content: space-between; margin-bottom: 10px; }
.code-text { font-size: clamp(2.2rem, 3.5vw, 3.25rem); color: var(--ink); line-height: 1.2; -webkit-user-select: text; user-select: text; }
.copy-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; min-height: 44px; border: 2px solid var(--cobalt); color: var(--cobalt); background: var(--cloud); border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 600; }
.copy-button:hover { background: var(--sky); }
.copy-button img { width: 19px; height: 19px; }
.code-leaf .conditional { font-weight: 400; }
.module-caption { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 17px 0 0; font-size: 16px; }
.module-caption p { margin-bottom: 0; }
.copy-status { font-size: 16px; min-height: 1.7em; margin: 4px 0 0; }
.home-body { padding-left: 48px; }
.help-action { position: relative; padding: 44px 30px 42px; border-bottom: 1px solid var(--denim); }
.help-action h2 { margin-bottom: 24px; }
.help-action p { max-width: 69ch; }
.home-body .help-action::before { content: ""; position: absolute; top: -1px; bottom: 0; left: -48px; width: 8px; background: var(--cobalt); }
.home-body .help-action::after { content: ""; position: absolute; top: 60px; left: -48px; width: 31px; height: 8px; background: var(--cobalt); }
.home-body #inspect { background: var(--cloud); border-radius: 8px; margin: 0 -30px 0 0; }
.home-body #escalate::before { bottom: 45px; border-radius: 0 0 8px 8px; }
.home-body #escalate { border-bottom: 0; padding-bottom: 56px; }
.pause-picture { margin: 0; }
.pause-picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--cloud); }
.home-pause { width: 288px; float: right; margin: 38px -35px 24px 48px; transform: translateY(24px); }
.home-body::after { content: ""; display: block; clear: both; }
.question-section { background: var(--cloud); margin-top: 12px; padding-block: 52px 62px; }
.questions-wrap { max-width: 1000px; }
.question-section h2 { margin-bottom: 30px; }
.question { padding: 28px 0; border-top: 1px solid var(--denim); }
.question h2, .question h3 { font-size: 25px; line-height: 1.2; margin-bottom: 18px; max-width: 34ch; }
.question p { max-width: 74ch; }
.more-questions { margin-bottom: 0; padding-top: 20px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 860px) 1fr; align-items: start; gap: 58px; margin-bottom: 55px; }
.article-copy { min-width: 0; }
.article-copy .help-action { padding: 30px 0 34px; }
.article-copy .help-action:first-child { padding-top: 8px; }
.article-copy .help-action:last-child { border-bottom: 0; }
.article-picture { width: calc(100% + 25px); margin-top: 13px; }
.article-picture img { aspect-ratio: 3 / 4; }
.route-how-to-use .article-copy { padding-left: 48px; border-left: 8px solid var(--cobalt); }
.route-how-to-use .help-action::before { content: ""; position: absolute; left: -48px; top: 48px; width: 30px; height: 8px; background: var(--cobalt); }
.route-how-to-use .help-action:first-child::before { top: 22px; }
.route-code-not-working #conditions { background: var(--cloud); padding: 30px; border-radius: 8px; margin: 0 -30px; }
.route-code-not-working #ask-oath { margin-top: 14px; border-top: 8px solid var(--cobalt); }
.route-confirm-discount #payment { background: var(--cloud); padding: 30px; border-radius: 8px; margin: 0 -30px; border-left: 8px solid var(--cobalt); }
.route-where-to-enter #still-missing { padding-left: 30px; border-left: 8px solid var(--cobalt); }
.route-about .article-layout { grid-template-columns: minmax(0, 900px); }
.route-about .article-copy .help-action { padding-left: 35px; border-left: 8px solid var(--cobalt); margin-bottom: 24px; }
.faq-page { max-width: 940px; margin: 0 0 60px; padding: 0 0 0 36px; border-left: 8px solid var(--cobalt); }
.faq-page .question:first-child { border-top: 0; padding-top: 10px; }
.site-footer { margin-top: 40px; padding-block: 36px; border-top: 2px solid var(--cobalt); display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px 70px; }
.footer-purpose { max-width: 60ch; font-size: 16px; margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; align-content: start; justify-content: end; font-size: 16px; }
.copyright { font-size: 16px; margin: 0; }
.not-found { max-width: 760px; padding-bottom: 80px; }
.not-found p { margin-top: 24px; }
@media (min-width: 1350px) {
  .article-layout { grid-template-columns: minmax(0, 860px) 235px; gap: 80px; }
  .article-picture { margin-top: 55px; }
}
@media (max-width: 1000px) {
  .shell { width: calc(100% - 64px); }
  .site-header { grid-template-columns: 1fr 2.5fr; }
  .masthead { gap: 10px; font-size: 24px; }
  .masthead img { width: 30px; flex-basis: 30px; }
  .process-ribbon a { padding-inline: 16px; }
  .process-detail { max-width: 13ch; }
  .copy-line { flex-wrap: wrap; gap: 10px; }
  .home-pause { width: 210px; margin-right: 0; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 175px; gap: 38px; }
  .article-picture { width: 100%; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .shell { width: calc(100% - 36px); }
  .site-header { display: block; margin-top: 19px; }
  .masthead { padding: 0 0 22px; font-size: 25px; gap: 12px; }
  .masthead .brand-words { display: flex; gap: 7px; align-items: baseline; }
  .masthead img { height: 30px; width: 30px; }
  .process-ribbon a { padding: 13px 11px 17px; border-top: 1px solid var(--denim); }
  .process-ribbon a:first-child { border-left: 0; padding-left: 0; }
  .process-ribbon a[aria-current="page"]::after { left: 10px; right: 10px; }
  .process-name { font-size: 22px; margin-bottom: 0; }
  .process-detail { display: none; }
  .breadcrumbs { font-size: 16px; padding-top: 22px; gap: 10px; }
  .page-intro { padding-top: 34px; padding-bottom: 30px; }
  .page-intro .context { margin-bottom: 14px; }
  h1 { font-size: clamp(2.35rem, 8.8vw, 3.5rem); max-width: 18ch; line-height: 1.08; }
  .page-intro .lead { font-size: 16px; margin-top: 18px; }
  .checked { margin-top: 16px; }
  .home-intro { padding-top: 30px; padding-bottom: 23px; }
  .home-intro .context { display: none; }
  .home-intro h1 { max-width: 18ch; }
  .entry-map { padding-left: 18px; }
  .entry-map::before { width: 6px; top: 30px; }
  .entry-action { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
  .entry-action::before { left: -18px; width: 18px; top: 30px; height: 6px; }
  .entry-action h2 { font-size: 25px; }
  .entry-action p { margin-bottom: 7px; }
  .choose-label { font-size: 21px; margin: 22px 0 35px; }
  .code-fork { gap: 12px; }
  .code-fork::before { top: -21px; height: 6px; }
  .code-fork::after { top: -36px; height: 21px; width: 6px; left: calc(50% - 3px); }
  .code-leaf { padding: 15px 12px; display: flex; flex-direction: column; }
  .code-leaf::before { width: 6px; height: 21px; top: -21px; left: calc(50% - 3px); }
  .offer-label, .offer-conditions { font-size: 16px; line-height: 1.5; }
  .offer-percent { font-size: 27px; }
  .offer-conditions { margin-bottom: 12px; }
  .copy-line { display: flex; flex-direction: column; align-items: stretch; margin-top: auto; gap: 10px; }
  .code-text { font-size: clamp(1.65rem, 7vw, 2.1rem); }
  .copy-button { width: 100%; padding: 7px 10px; }
  .module-caption { display: block; margin-top: 15px; line-height: 1.55; }
  .module-caption p + p { margin-top: 7px; }
  .copy-status { line-height: 1.5; min-height: 24px; }
  .home-body { padding-left: 18px; }
  .help-action { padding: 30px 14px; }
  .help-action h2 { margin-bottom: 18px; }
  .home-body .help-action::before { width: 6px; left: -18px; }
  .home-body .help-action::after { left: -18px; width: 22px; height: 6px; top: 42px; }
  .home-body #inspect { margin: 0; }
  .home-pause { width: 150px; margin: 12px 0 14px 20px; transform: none; }
  .question-section { margin-top: 0; padding-block: 34px; }
  .question-section h2 { margin-bottom: 24px; }
  .question h2, .question h3 { font-size: 23px; }
  .article-layout { display: flex; flex-direction: column; gap: 28px; }
  .article-picture { width: 180px; margin: 0 0 0 auto; }
  .article-picture img { aspect-ratio: 4 / 3; }
  .article-copy .help-action { padding-bottom: 30px; }
  .route-how-to-use .article-copy { padding-left: 24px; border-width: 6px; }
  .route-how-to-use .help-action::before { left: -24px; width: 16px; height: 6px; top: 43px; }
  .route-how-to-use .help-action:first-child::before { top: 19px; }
  .route-code-not-working #conditions { margin: 0; padding: 24px 18px; }
  .route-confirm-discount #payment { margin: 0; padding: 24px 18px; border-width: 6px; }
  .route-where-to-enter #still-missing { padding-left: 18px; border-width: 6px; }
  .route-about .article-copy .help-action { padding-left: 20px; border-width: 6px; }
  .faq-page { padding-left: 20px; border-width: 6px; }
  .site-footer { margin-top: 20px; display: block; padding-block: 28px; }
  .footer-links { justify-content: start; margin-block: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; animation: none; transition: none; }
}