:root {
  color-scheme: light;
  --mist: #F1F6F2;
  --pine: #19382A;
  --moss: #35664B;
  --celadon: #B8CBBE;
  --copper: #99633D;
  --display: 'Aleo', 'Rockwell', Georgia, serif;
  --body: 'Public Sans', 'Trebuchet MS', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--mist); scroll-padding-top: 2rem; }
body { margin: 0; color: var(--pine); background: var(--mist); font-family: var(--body); font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
a:hover { color: var(--moss); text-decoration-thickness: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--copper); outline-offset: 5px; }
::selection { color: var(--mist); background: var(--moss); }
.skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 10; padding: .55rem .85rem; background: var(--pine); color: var(--mist); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); color: var(--mist); }
.masthead { padding: 27px 24px 20px; text-align: center; }
.brand { display: inline-block; font-family: var(--display); text-decoration: none; line-height: 1.06; }
.brand span { display: block; font-size: 33px; font-weight: 700; }
.brand strong { display: block; margin-top: 4px; font-size: 25px; font-weight: 400; }
.purpose { margin: 11px 0 8px; font-size: 16px; line-height: 1.5; }
.navigation { margin: 0 auto; max-width: 960px; font-size: 16px; line-height: 1.9; }
.navigation a { display: inline; padding-block: 5px; }
.navigation a[aria-current='page'] { text-decoration-thickness: 3px; }
main { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.opening { position: relative; padding: 38px 0 0; }
.opening::before { content: ''; display: block; width: 60px; height: 6px; margin: 0 auto 26px; background: var(--moss); }
h1, h2, h3 { font-family: 'Aleo', 'Rockwell', Georgia, serif; font-weight: 500; }
h1 { max-width: 900px; margin: 0 auto 23px; text-align: center; font-size: clamp(39px, 4.4vw, 61px); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.scope-statement { max-width: 780px; margin: 0 auto; text-align: center; font-size: 17px; line-height: 1.7; }
.code-definitions { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; margin: 27px -15px 0; }
.code-clause { position: relative; min-width: 0; padding: 18px 33px 18px 46px; }
.brace { position: absolute; top: -5px; color: var(--moss); font-family: var(--display); font-size: 185px; line-height: 1; font-weight: 400; pointer-events: none; }
.brace-open { left: -15px; }
.brace-close { right: -13px; }
.code-clause:first-child .brace-open { top: -10px; left: -37px; font-size: 205px; }
dt { margin: 0; }
.code-heading { display: flex; align-items: center; gap: 15px; }
.code-word { display: inline-block; font-family: var(--display); font-size: clamp(38px, 4vw, 52px); font-weight: 700; line-height: 1.16; letter-spacing: -.025em; user-select: text; -webkit-user-select: text; }
.copy-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 80px; min-height: 44px; padding: 5px 10px; border: 2px solid var(--pine); border-radius: 0; color: var(--pine); background: transparent; font-size: 16px; line-height: 1.3; cursor: pointer; }
.copy-button:hover { background: var(--pine); color: var(--mist); }
.copy-button .ti { display: inline-block; width: 16px; height: 16px; font-size: 16px; line-height: 1; }
dd { margin: 9px 0 0 18px; font-size: 16px; line-height: 1.65; }
dd strong { display: block; font-weight: 600; }
.offer-record { max-width: 800px; margin: 15px auto 0; text-align: center; font-size: 16px; line-height: 1.7; }
.offer-record span { display: inline; }
.copy-status { min-height: 1.6em; margin: 2px 0 0; text-align: center; font-size: 16px; }
.notice-body { max-width: 810px; margin: 69px auto 0; }
.notice-body h2 { margin: 0 0 23px; font-size: clamp(29px, 3vw, 39px); line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.notice-body h3 { margin: 0 0 9px; font-size: 25px; line-height: 1.35; }
.notice-section { margin: 0 0 62px; }
.notice-section::before, .clause-section::before { content: ''; display: block; width: 44px; height: 5px; margin-bottom: 24px; background: var(--moss); }
p { margin: 0 0 19px; }
p:last-child { margin-bottom: 0; }
.notice-clauses { list-style: none; padding: 0; margin: 0; }
.notice-clauses li { position: relative; margin-bottom: 35px; padding-left: 62px; }
.clause-number { position: absolute; left: 0; top: -2px; color: var(--copper); font-family: var(--display); font-size: 27px; line-height: 1.5; }
.clause-section { margin: 0 0 64px; }
.remedy-note { position: relative; max-width: 580px; margin: 62px 0 65px auto; padding-left: 34px; }
.remedy-note::before { content: ''; position: absolute; top: 4px; left: 0; width: 6px; height: 48px; background: var(--copper); }
.remedy-note h2 { font-size: 27px; margin-bottom: 14px; }
.remedy-note p { font-size: 16px; }
.surface { width: calc(100% + 110px); margin: 64px -55px; }
.surface img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; }
.surface .surface-reserve { aspect-ratio: 5 / 1; background: var(--celadon); object-fit: contain; }
.surface figcaption { max-width: 690px; margin: 14px 0 0 55px; font-size: 16px; line-height: 1.6; }
.inner .opening { padding-top: 46px; }
.inner h1 { max-width: 900px; font-size: clamp(37px, 4.4vw, 57px); }
.inner .notice-body { margin-top: 63px; }
.question-list { margin: 0; padding: 0; }
.question { position: relative; margin-bottom: 36px; padding-top: 25px; border-top: 2px solid var(--celadon); }
.question:first-child { border-top: 5px solid var(--moss); }
.question h2 { font-size: clamp(25px, 2.5vw, 31px); margin-bottom: 15px; }
.closing { max-width: 810px; margin: 55px auto 70px; padding-top: 28px; border-top: 2px solid var(--celadon); }
.scope-index { margin: 25px 0 0; padding-left: 1.6em; }
.scope-index li { margin-bottom: 9px; padding-left: .4em; }
.scope-index li::marker { color: var(--moss); }
.site-footer { max-width: 1100px; margin: 0 auto; padding: 30px 32px 44px; border-top: 5px solid var(--moss); text-align: center; font-size: 16px; line-height: 1.7; }
.site-footer p + p { margin-top: 8px; }
.error-page .notice-body { min-height: 140px; }
@media (min-width: 1500px) {
  .opening { padding-top: 51px; }
  .code-definitions { margin-top: 35px; }
}
@media (max-width: 760px) {
  .masthead { padding: 21px 20px 12px; }
  .brand span { font-size: 28px; }
  .brand strong { font-size: 22px; }
  .purpose { margin: 8px 0 5px; font-size: 16px; }
  .navigation { max-width: 570px; font-size: 16px; line-height: 1.75; }
  main { padding: 0 25px; }
  .opening { padding-top: 23px; }
  .opening::before { width: 46px; height: 5px; margin-bottom: 21px; }
  h1 { font-size: clamp(34px, 6.5vw, 48px); margin-bottom: 18px; }
  .scope-statement { font-size: 16px; line-height: 1.65; }
  .code-definitions { grid-template-columns: 1fr; gap: 7px; max-width: 470px; margin: 16px auto 0; }
  .code-clause { padding: 9px 24px 10px 37px; }
  .brace { top: -2px; font-size: 146px; }
  .brace-open { left: -12px; }
  .brace-close { right: -12px; }
  .code-clause:first-child .brace-open { top: -7px; left: -23px; font-size: 160px; }
  .code-word { font-size: 39px; }
  .code-heading { gap: 15px; }
  .copy-button { min-width: 77px; }
  dd { font-size: 16px; line-height: 1.55; margin: 5px 0 0 12px; }
  .offer-record { margin-top: 15px; font-size: 16px; }
  .offer-record span { display: block; }
  .notice-body { margin-top: 42px; }
  .notice-clauses li { padding-left: 43px; margin-bottom: 31px; }
  .clause-number { font-size: 23px; }
  .notice-body h3 { font-size: 23px; }
  .surface { width: calc(100% + 16px); margin: 43px -8px; }
  .surface figcaption { margin-left: 8px; font-size: 16px; }
  .remedy-note { margin-block: 45px; padding-left: 23px; }
  .notice-section { margin-bottom: 43px; }
  .inner .opening { padding-top: 28px; }
  .inner h1 { font-size: 38px; }
  .inner .notice-body { margin-top: 43px; }
  .closing { margin-block: 44px 52px; }
  .site-footer { margin-inline: 25px; padding: 25px 0 33px; font-size: 16px; }
}
@media (max-width: 370px) {
  main { padding-inline: 21px; }
  .code-word { font-size: 30px; }
  .copy-button { min-width: 69px; padding-inline: 6px; }
  .copy-button .ti { display: none; }
  .code-heading { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}