/* roc.css: the v2 "Roc" stylesheet. The rationale behind every rule: docs/experts/roc-css-notes.md */

/* 1  TOKENS */

:root {
  --ice: #DCEEFF;
  --ice-light: #F2F8FF;
  --ice-deep: #C7E1FA;
  --cocoa: #2B1A14;
  --cocoa-soft: #5E463B;
  --mist: #A9C3DB;
  --spark: #FF5C1F;
  --spark-on-cocoa: #FF8A5C;
  --spark-text: #B83A0A;
  --white: #FFFFFF;

  --font-sans: 'Archivo', system-ui, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, monospace;

  --r-card: 6px;
  --r-frame: 14px;
  --r-panel: 20px;
  --r-input: 12px;
  --r-pill: 999px;
}

/* 2  FONTS */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Martian Mono';
  src: url('/assets/fonts/martian-mono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-style: normal;
  font-display: swap;
}

/* 2b  METRIC-MATCHED FALLBACK FACES (R1-T1 Part B) */

/* >>> R1-T1 Part B block starts here >>> */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('ArialMT');
  font-weight: 100 425;
  font-style: normal;
  size-adjust: 98.3%;
  ascent-override: 89.318%;
  descent-override: 21.363%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('ArialMT');
  font-weight: 426 530;
  font-style: normal;
  size-adjust: 99.2%;
  ascent-override: 88.508%;
  descent-override: 21.169%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 531 590;
  font-style: normal;
  size-adjust: 94.9%;
  ascent-override: 92.518%;
  descent-override: 22.129%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 591 630;
  font-style: normal;
  size-adjust: 95.4%;
  ascent-override: 92.034%;
  descent-override: 22.013%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 631 900;
  font-style: normal;
  size-adjust: 97.1%;
  ascent-override: 90.422%;
  descent-override: 21.627%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Expanded Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 121.7%;
  ascent-override: 72.145%;
  descent-override: 17.256%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo SemiExpanded Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 109%;
  ascent-override: 80.55%;
  descent-override: 19.266%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Label Fallback';
  src: local('Arial'), local('ArialMT');
  font-weight: 100 530;
  font-style: normal;
  size-adjust: 99.8%;
  ascent-override: 87.976%;
  descent-override: 21.042%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Label Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 531 900;
  font-style: normal;
  size-adjust: 96.1%;
  ascent-override: 91.363%;
  descent-override: 21.852%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Martian Mono Fallback';
  src: local('Menlo Regular'), local('Menlo-Regular'), local('Courier New'), local('CourierNewPSMT');
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 116.27%;
  ascent-override: 86.007%;
  descent-override: 17.201%;
  line-gap-override: 0%;
}
:root {
  --stack-body: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  --stack-wide: 'Archivo', 'Archivo SemiExpanded Fallback', system-ui, sans-serif;
  --stack-mono: 'Martian Mono', 'Martian Mono Fallback', ui-monospace, monospace;
}
:root { --stack-label: 'Archivo', 'Archivo Label Fallback', system-ui, sans-serif; }
@media (min-width: 768px) {
  :root { --stack-wide: 'Archivo', 'Archivo Expanded Fallback', system-ui, sans-serif; }
}
/* <<< R1-T1 Part B block ends here <<< */

/* 3  BASE */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ice);
  color: var(--cocoa);
  font-family: var(--stack-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

a {
  color: var(--cocoa);
  transition: color .15s;
}

a:where(:hover) {
  color: var(--cocoa-soft);
}

:root {
  --focus-ring: var(--cocoa);
}

.on-cocoa {
  --focus-ring: var(--ice);
}

.on-ice {
  --focus-ring: var(--cocoa);
}

:focus-visible {
  outline: 3px solid var(--focus-ring, var(--cocoa));
  outline-offset: 3px;
}

:where(main, section, nav)[tabindex="-1"]:focus {
  outline: none;
}

[hidden] {
  display: none !important;
}

.mono {
  font-family: var(--stack-mono);
}

.wide,
.t-h1,
.t-h2,
.t-h3 {
  font-family: var(--stack-wide);
  font-variation-settings: 'wdth' 112;
}

@media (min-width: 768px) {
  .wide,
  .t-h1,
  .t-h2,
  .t-h3 {
    font-variation-settings: 'wdth' 125;
  }
}

@media (min-width: 768px) {
  .only-phone {
    display: none !important;
  }
}

@media not all and (min-width: 768px) {
  .only-desktop {
    display: none !important;
  }
}

.vh:where(:not(:focus-within, :active)) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.skip-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--cocoa);
  color: var(--ice);
  font-weight: 560;
  text-decoration: none;
}

details summary {
  cursor: pointer;
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

input,
select,
button,
textarea {
  font-family: inherit;
}

input[type=range] {
  accent-color: var(--cocoa);
  width: 100%;
}

@property --animation-reduced {
  syntax: '*';
  inherits: false;
  initial-value: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: var(--animation-reduced) !important;
    scroll-behavior: auto !important;
  }
}

/* 4  LAYOUT */

:root {
  --surface: var(--ice);
  --ink: var(--cocoa);
  --node-ahead: var(--mist);
}

.r-sec--ice-light {
  --surface: var(--ice-light);
  background: var(--surface);
}

.r-sec--cocoa {
  --surface: var(--cocoa);
  --ink: var(--ice);
  --node-ahead: var(--cocoa-soft);
  --focus-ring: var(--ice);
  background: var(--surface);
  color: var(--ink);
}

.r-wrap {
  position: relative;
  padding: var(--sec-pt-p, 0px) 24px var(--sec-pb-p, 96px) 56px;
}

@media (min-width: 768px) {
  .r-wrap {
    box-sizing: border-box;
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--sec-pt-d, 0px) 40px var(--sec-pb-d, 160px);
  }

  .r-col {
    margin-left: 80px;
  }

  .wrap {
    position: relative;
    box-sizing: border-box;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
  }
}

@media (min-width: 1200px) {
  .r-wrap,
  .wrap {
    padding-inline: 80px;
  }

  .r-col {
    margin-left: 120px;
  }
}

.spine {
  position: absolute;
  top: var(--spine-top-p, 0px);
  bottom: 0;
  left: 22.5px;
  width: 3px;
  background: repeating-linear-gradient(to bottom, var(--cocoa) 0 6px, transparent 6px 13px);
  opacity: .3;
}

@media (min-width: 768px) {
  .spine {
    top: var(--spine-top-d, 0px);
    left: 62.5px;
    background: repeating-linear-gradient(to bottom, var(--cocoa) 0 7px, transparent 7px 15px);
  }
}

@media (min-width: 1200px) {
  .spine {
    left: 118.5px;
  }
}

.node,
.snode {
  position: absolute;
  z-index: 4;
  box-sizing: content-box;
  width: 10px;
  height: 10px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
  transition: border-color .3s;
}

.node {
  top: var(--node-top-p, 10px);
  left: 16px;
}

.snode {
  top: 5px;
  left: -40px;
}

.node.ahead,
.snode.ahead {
  border-color: var(--node-ahead);
}

@media (min-width: 768px) {
  .node,
  .snode {
    width: 12px;
    height: 12px;
  }

  .node {
    top: var(--node-top-d, 14px);
    left: 55px;
  }

  .snode {
    top: 4px;
    left: -65px;
  }
}

@media (min-width: 1200px) {
  .node {
    left: 111px;
  }

  .snode {
    left: -89px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .node,
  .snode {
    transition: none;
  }
}

@media not all and (min-width: 768px) {
  .r-bleed,
  .card,
  .form-card {
    margin-left: -12px;
  }
}

.r-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-p, 24px);
}

.r-head {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.r-intro {
  margin: 0;
  color: var(--cocoa-soft);
  font-size: var(--intro-size-p, 17px);
}

@media (min-width: 768px) {
  .r-stack {
    gap: var(--stack-gap-d, 56px);
  }

  .r-head {
    gap: 20px;
    max-width: var(--head-max, 900px);
  }

  .r-intro {
    max-width: var(--intro-max, 640px);
    font-size: 20px;
  }
}

/* 5  COMPONENTS */

/* 5.1 Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--cocoa);
  color: var(--ice);
  font-weight: 560;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s;
}

.btn--outline {
  border: 2px solid var(--cocoa);
  background: transparent;
  color: var(--cocoa);
}

@media (hover: hover) {
  .btn:hover {
    background: var(--cocoa-soft);
    color: var(--ice);
  }

  .btn--outline:hover {
    border-color: var(--cocoa-soft);
    background: transparent;
    color: var(--cocoa-soft);
  }
}

.btn--nav {
  height: 44px;
  padding: 0 16px;
  font-size: 15px;
}

.btn--hero {
  display: flex;
  height: 54px;
  font-size: 17px;
}

.btn--cta {
  display: flex;
  height: 54px;
  font-size: 17px;
}

.btn--unsure {
  display: flex;
  height: 54px;
  font-size: 16px;
}

.btn--plan {
  display: flex;
  height: 50px;
  margin-top: auto;
  font-size: 16px;
}

.btn--compare {
  display: flex;
  height: 50px;
  font-size: 16px;
}

.btn--submit {
  height: 54px;
  font-size: 16px;
  font-weight: 600;
}

.btn--pause {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
}

.btn--holiday {
  display: flex;
  height: 50px;
  font-size: 16px;
}

@media not all and (min-width: 768px) {
  .btn--project {
    align-self: flex-start;
    justify-self: start;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 5px;
  }
}

@media (min-width: 768px) {
  .btn--nav {
    height: 48px;
    padding: 0 22px;
    font-size: 16px;
  }

  .btn--hero {
    display: inline-flex;
    padding: 0 26px;
  }

  .btn--cta,
  .btn--unsure {
    display: inline-flex;
    align-self: flex-start;
    height: 52px;
    padding: 0 24px;
  }

  .btn--unsure {
    font-size: 17px;
  }

  .btn--compare {
    display: inline-flex;
    align-self: center;
    height: 52px;
    padding: 0 26px;
    font-size: 17px;
  }

  .btn--submit {
    height: 56px;
    margin-top: 6px;
    font-size: 17px;
  }

  .btn--pause {
    padding: 0 18px;
    font-size: 15px;
  }

  .btn--holiday {
    display: inline-flex;
    justify-self: end;
    height: 52px;
    padding: 0 24px;
    white-space: nowrap;
  }

  .btn--project {
    justify-self: end;
    height: 48px;
    padding: 0 20px;
    font-size: 15px;
    white-space: nowrap;
  }
}

/* 5.2 Icon button */
.btn-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ice-light);
  color: var(--cocoa);
  cursor: pointer;
  transition: background-color .15s;
}

@media (hover: hover) {
  .btn-icon:hover {
    background: var(--ice-deep);
  }
}

@media (min-width: 768px) {
  .btn-icon {
    width: 48px;
    height: 48px;
  }
}

/* 5.3 Chips */
.chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--ice);
  color: var(--cocoa);
  font-size: 12px;
  font-weight: 600;
}

.chip--none {
  border: 1.5px dashed var(--cocoa);
  background: transparent;
}

.chip--result {
  background: var(--cocoa);
  color: var(--ice);
}

.chip--badge {
  padding: 4px 10px;
}

@media (min-width: 768px) {
  .chip {
    padding: 3px 10px;
    font-size: 13px;
  }

  .chip--badge {
    padding: 4px 10px;
  }
}

/* 5.4 Cards */
.card {
  border-radius: var(--r-card);
  background: var(--white);
}

.card--plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 20px;
  border-top: 3px dashed var(--ice-deep);
}

.card--featured {
  border-top: 0;
  box-shadow: 0 0 0 2px var(--cocoa);
}

.card--custom {
  border: 2px dashed var(--mist);
  background: transparent;
}

.card--ring {
  box-shadow: 0 0 0 2px var(--cocoa);
}

@media (min-width: 768px) {
  .card--plan {
    gap: 20px;
    padding: 28px 24px 26px;
  }

  .card--featured {
    border-top: 3px dashed var(--cocoa);
  }
}

/* 5.5 Fields */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
}

.input {
  -webkit-appearance: none;
  appearance: none;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--ice-deep);
  border-radius: var(--r-input);
  background: var(--white);
  color: var(--cocoa);
  font-size: 16px;
}

::placeholder {
  color: var(--cocoa-soft);
  opacity: 1;
}

@media (min-width: 768px) {
  .field {
    gap: 8px;
    font-size: 16px;
  }

  .input {
    height: 52px;
    padding: 0 16px;
    font-size: 17px;
  }
}

/* 5.6 Form card */
.form-card {
  --focus-ring: var(--cocoa);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 20px;
  border-radius: var(--r-panel);
  background: var(--ice-light);
  color: var(--cocoa);
}

.form-note {
  margin: 0;
  color: var(--cocoa-soft);
  font-size: 13px;
}

@media (min-width: 768px) {
  .form-card {
    gap: 20px;
    padding: 40px;
    border-radius: 24px;
  }

  .form-note {
    font-size: 14px;
  }
}

.form-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-hp > input {
  border: 0;
}

/* 5.7 FAQ rows */
.faq {
  padding: 0;
  border-top: 1px solid var(--ice-deep);
}

.faq:last-of-type {
  border-bottom: 1px solid var(--ice-deep);
}

.faq > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  font-size: 17px;
  font-weight: 620;
}

.faq__sign::before {
  content: '+';
}

.faq[open] .faq__sign::before {
  content: '\2212';
}

.faq__a {
  margin: -6px 0 0;
  padding-bottom: 16px;
  color: var(--cocoa-soft);
  font-size: 15px;
}

@media (min-width: 768px) {
  .faq > summary {
    gap: 16px;
    padding: 22px 0;
    font-size: 20px;
  }

  .faq__a {
    margin-top: -8px;
    padding-bottom: 22px;
    font-size: 18px;
  }
}

/* 5.8 Type */
.t-h1,
.t-h2,
.t-h3 {
  margin: 0;
  font-weight: 640;
}

.t-h1 {
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.015em;
}

.t-h2 {
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.t-h2--faq {
  font-size: 30px;
  letter-spacing: normal;
}

.t-h2--ask {
  font-size: 38px;
  line-height: 1;
  letter-spacing: normal;
}

@media not all and (min-width: 768px) {
  .t-h2--untracked {
    letter-spacing: normal;
  }
}

.t-h3 {
  font-size: 22px;
  line-height: 1.1;
}

.t-h3--p24 {
  font-size: 24px;
}

.t-title {
  margin: 0;
  font-size: 17px;
  font-weight: 620;
}

.t-label {
  color: var(--cocoa-soft);
  font-family: var(--stack-mono);
  font-size: 12px;
}

@media (min-width: 768px) {
  .t-h1 {
    font-size: 80px;
    line-height: .97;
  }

  .t-h2 {
    font-size: 56px;
    line-height: 1;
  }

  .t-h2--faq {
    letter-spacing: -0.01em;
  }

  .t-h2--ask {
    font-size: 64px;
    line-height: .98;
    letter-spacing: -0.015em;
  }

  .t-h3 {
    font-size: 30px;
  }

  .t-h3--d28 {
    font-size: 28px;
  }

  .t-title {
    font-size: 20px;
  }

  .t-label {
    font-size: 13px;
  }
}

/* 6  HEADER, MENU SHEET (R2-T1) AND THE FOOTER'S ROUTE MAP (R2-T6) */

html {
  scrollbar-gutter: stable;
}

html:has(#menu-sheet[open]),
html:has(#menu-sheet[open]) body {
  overflow: hidden;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lockup {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--cocoa);
  text-decoration: none;
}

.lockup__mark {
  display: block;
  width: 28px;
  height: 28px;
}

.lockup__eye {
  fill: var(--spark);
}

.lockup__word {
  font-family: var(--stack-wide);
  font-size: 21px;
  font-weight: 660;
  font-variation-settings: 'wdth' 125;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-links {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cocoa-soft);
  text-decoration: none;
  transition: color .15s;
}

.header-link {
  font-family: var(--stack-label);
}

.header-link:hover {
  color: var(--cocoa);
}

.header-link[aria-current="page"] {
  color: var(--cocoa);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
}

@media not all and (min-width: 360px) {
  .header-cta {
    display: none;
  }
}

@media not all and (min-width: 768px) {
  .site-header {
    padding: 18px 20px;
  }
}

@media (min-width: 768px) {
  .site-header {
    flex-wrap: wrap;
    gap: 24px;
    padding-block: 28px;
  }

  .lockup {
    gap: 10px;
  }

  .lockup__mark {
    width: 36px;
    height: 36px;
  }

  .lockup__word {
    font-size: 26px;
    letter-spacing: -0.005em;
  }
}

@media (min-width: 1024px) {
  .header-nav {
    flex-wrap: wrap;
    gap: 24px;
    font-size: 16px;
  }

  .header-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
  }

  .header-nav .menu-toggle {
    display: none;
  }
}

@media (min-width: 1200px) {
  .header-nav,
  .header-links {
    gap: 36px;
  }
}

#menu-sheet {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ice);
  color: var(--cocoa);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-top: 80px;
}

#menu-sheet::backdrop {
  background: transparent;
}

#menu-sheet:focus-visible {
  outline-offset: -3px;
}

@media (prefers-reduced-motion: no-preference) {
  #menu-sheet {
    transition: opacity 160ms cubic-bezier(.2, .8, .2, 1);
  }

  @starting-style {
    #menu-sheet[open] {
      opacity: 0;
    }
  }
}

.sheet-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ice);
}

.sheet-nav .r-col {
  display: flex;
  flex-direction: column;
}

.stations {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stations::before {
  position: absolute;
  top: 29.2px;
  bottom: 29.2px;
  left: -33.5px;
  width: 3px;
  background: repeating-linear-gradient(to bottom, var(--cocoa) 0 6px, transparent 6px 13px);
  opacity: .3;
  content: '';
}

.station {
  position: relative;
}

.station > a {
  display: block;
  padding: 16px 0;
  color: var(--cocoa);
  font-size: 24px;
  font-weight: 640;
  line-height: 1.1;
  text-decoration: none;
  transition: color .15s;
}

.station > a:hover {
  color: var(--cocoa-soft);
}

.station > a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.station > .snode {
  top: 21.2px;
}

.station > a[aria-current="page"] + .snode {
  background: var(--cocoa);
}

.sheet-cta {
  margin-top: 28px;
}

@media not all and (min-width: 768px) {
  .sheet-bar {
    padding: 18px 20px;
  }

  .sheet-nav {
    padding: 28px 24px 40px 56px;
  }
}

@media (min-width: 768px) {
  #menu-sheet {
    scroll-padding-top: 104px;
  }

  .sheet-bar {
    padding-block: 28px;
  }

  .sheet-nav {
    padding-block: 64px 40px;
  }

  .stations::before {
    top: 32.5px;
    bottom: 32.5px;
    left: -57.5px;
    background: repeating-linear-gradient(to bottom, var(--cocoa) 0 7px, transparent 7px 15px);
  }

  .station > a {
    font-size: 30px;
  }

  .station > .snode {
    top: 23.5px;
  }

  .sheet-cta {
    align-self: flex-start;
    margin-top: 40px;
  }
}

.site-footer {
  overflow-x: clip;
  border-top: 1px solid var(--cocoa-soft);
  background: var(--cocoa);
  color: var(--mist);
}

.site-map {
  position: relative;
  padding-left: 56px;
}

.site-map__mark {
  position: absolute;
  top: -2px;
  left: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ice);
}

.site-map__mark svg {
  display: block;
  width: 40px;
  height: 40px;
}

.site-map__eye {
  fill: var(--spark);
}

.site-map__line {
  position: absolute;
  top: 34px;
  bottom: 22px;
  left: 24.5px;
  width: 3px;
  background: var(--ice);
}

.site-map__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 36px 0 0;
  list-style: none;
}

.site-map__stop {
  position: relative;
}

.site-map__dot {
  position: absolute;
  top: 17px;
  left: -35px;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border: 3px solid var(--ice);
  border-radius: 50%;
  background: var(--cocoa);
}

.site-map__dot--here {
  top: 14px;
  left: -38px;
  width: 16px;
  height: 16px;
  border: 0;
  background: var(--spark);
}

.site-map__link {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--mist);
  font-size: 16px;
  font-weight: 450;
  text-decoration: none;
}

.site-map__link[aria-current="page"] {
  color: var(--ice);
  font-weight: 620;
}

.site-map__here {
  margin-left: 10px;
  color: var(--spark-on-cocoa);
  font-size: 12px;
}

.site-footer__base {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--cocoa-soft);
}

.site-footer__base p {
  margin: 0;
}

.site-footer__mail {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-block: -1.15625px;
  color: var(--ice);
}

@media (hover: hover) {
  .site-map__link:not([aria-current]):hover {
    color: var(--ice);
  }

  .site-footer__mail:hover {
    color: var(--mist);
  }
}

@media not all and (min-width: 768px) {
  .site-footer__in {
    padding: 32px 24px 40px;
    font-size: 14px;
  }
}

@media (min-width: 768px) {
  .site-footer__in {
    padding-block: 64px 40px;
  }

  .site-map {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: start;
    padding-left: 0;
  }

  .site-map__mark {
    position: static;
    display: block;
    width: 56px;
    height: 56px;
    margin-top: 2px;
  }

  .site-map__mark svg {
    width: 56px;
    height: 56px;
  }

  .site-map__line {
    top: 49.5px;
    right: -100vw;
    bottom: auto;
    left: 34px;
    width: auto;
    height: 3px;
  }

  .site-map__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    padding: 0;
  }

  .site-map__stop {
    padding-top: 66px;
  }

  .site-map__dot {
    top: 43px;
    left: 0;
    box-sizing: content-box;
  }

  .site-map__dot--here {
    top: 43px;
    left: 0;
  }

  .site-map__link {
    text-wrap: balance;
  }

  .site-map__here {
    position: absolute;
    top: 16px;
    left: 0;
    margin-left: 0;
  }

  .site-footer__base {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    margin-top: 48px;
    padding-top: 24px;
    font-size: 15px;
  }

  .site-footer__brand {
    color: var(--ice);
  }

  .site-footer__word {
    font-size: 20px;
    font-weight: 660;
    letter-spacing: -0.005em;
  }

  .site-footer__tagline {
    margin-left: 16px;
    color: var(--mist);
  }

  .site-footer__end {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
  }

  .site-footer__mail {
    margin-block: -10.375px;
  }
}

@media (min-width: 1200px) {
  .site-map {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

/* 7  HOME HERO (R2-T1; the loop and the measured line, 7.1–7.2, R2-T2) */

.r-hero__in {
  position: relative;
}

.hero-sub {
  margin: 18px 0 0;
  color: var(--cocoa-soft);
  font-size: 17px;
  line-height: 1.5;
}

.hero-actions {
  margin-top: 22px;
}

.hero-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-top: 6px;
  font-size: 16px;
  text-underline-offset: 4px;
}

.hero-small {
  margin: 2px 0 0;
  color: var(--cocoa-soft);
  font-size: 14px;
  text-align: center;
}

.inbox {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: 28px 0 0 36px;
  padding: 14px 0 6px;
  border-radius: 18px;
  background: var(--ice-light);
}

.inbox__head {
  display: flex;
  justify-content: space-between;
  padding: 0 16px 8px;
  color: var(--cocoa-soft);
  font-size: 12px;
}

.inbox__row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--ice-deep);
  line-height: 1.35;
}

.inbox__row--read {
  color: var(--cocoa-soft);
}

.inbox__dot {
  padding-top: 5px;
}

.inbox__dot svg {
  width: 10px;
  height: 10px;
}

.unread {
  fill: var(--spark);
}

.inbox__body {
  line-height: 1.35;
}

.inbox__from {
  font-size: 14px;
  font-weight: 640;
}

.inbox__subj {
  margin-top: 2px;
  font-size: 14px;
}

.inbox__time {
  color: var(--cocoa-soft);
  font-size: 12px;
}

@media not all and (min-width: 768px) {
  .r-hero__in {
    padding: 28px 20px 56px;
  }
}

@media (min-width: 768px) {
  .r-hero__in {
    min-height: 720px;
  }

  .hero-row {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    padding-top: 64px;
  }

  .hero-text {
    display: flex;
    flex: 1 1 640px;
    flex-direction: column;
    gap: 28px;
    max-width: 740px;
  }

  .hero-sub {
    max-width: 540px;
    margin: 0;
    font-size: 20px;
    line-height: 1.45;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 8px;
  }

  .hero-link {
    display: inline-flex;
    height: auto;
    min-height: 44px;
    margin-top: 0;
    font-size: 17px;
  }

  .hero-small {
    margin: 0;
    font-size: 15px;
    text-align: start;
  }

  .hero-card {
    flex: 0 0 520px;
    margin-left: auto;
  }

  .inbox {
    box-sizing: border-box;
    width: 520px;
    height: 384px;
    margin: 0;
    padding: 22px 0;
    border-radius: 22px;
    box-shadow: 0 30px 60px color-mix(in srgb, var(--cocoa) 10%, transparent);
  }

  .inbox__head {
    padding: 0 24px 12px;
    font-size: 13px;
  }

  .inbox__row {
    grid-template-columns: 20px 1fr auto;
    gap: 12px;
    padding: 16px 24px;
    line-height: inherit;
  }

  .inbox__more {
    line-height: 1.35;
  }

  .inbox__dot {
    padding-top: 6px;
  }

  .inbox__dot svg {
    width: 12px;
    height: 12px;
  }

  .inbox__from,
  .inbox__subj {
    font-size: 15px;
  }

  .inbox__subj {
    margin-top: 3px;
  }

  .inbox__row--read .inbox__from {
    font-weight: 560;
  }

  .inbox__prev {
    margin-top: 3px;
    font-size: 14px;
  }

  .inbox__prev--clip {
    max-width: 370px;
    overflow: visible;
    color: var(--cocoa-soft);
    text-overflow: clip;
    white-space: normal;
  }

  .inbox__time {
    font-size: 13px;
  }
}

/* 7.1 The inbox loop (R2-T2) */
.inbox .land {
  animation: br-land 7s cubic-bezier(.2, .8, .2, 1) infinite;
}

.inbox .unread {
  transform-box: fill-box;
  transform-origin: center;
  animation: br-dot 7s ease-out infinite;
}

@media (min-width: 768px) {
  .inbox .push {
    animation: br-push 7s cubic-bezier(.2, .8, .2, 1) infinite;
  }
}

.r-hero.is-paused :is(.land, .push, .unread, .line) {
  animation-play-state: paused;
}

@keyframes br-land {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }

  9% {
    transform: none;
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@media (min-width: 768px) {
  @keyframes br-land {
    0% {
      transform: translateY(-40px);
      opacity: 0;
    }

    9% {
      transform: none;
      opacity: 1;
    }

    100% {
      opacity: 1;
    }
  }
}

@keyframes br-push {
  0% {
    transform: translateY(-78px);
  }

  9%,
  100% {
    transform: none;
  }
}

@keyframes br-dot {
  0%,
  9% {
    transform: scale(0);
  }

  13% {
    transform: scale(1.4);
  }

  16%,
  100% {
    transform: scale(1);
  }
}

@keyframes br-line {
  0%,
  13% {
    stroke-dashoffset: 1;
  }

  48%,
  100% {
    stroke-dashoffset: 0;
  }
}

/* 7.2 The measured line (R2-T2) */
.r-hero {
  position: relative;
}

.hero-line {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
}

.hero-line.is-measured {
  visibility: visible;
}

.hero-line .line {
  fill: none;
  stroke: var(--cocoa);
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: br-line 7s cubic-bezier(.45, 0, .2, 1) infinite;
}

.inbox .land, .inbox .unread, .inbox .push, .hero-line .line { animation-iteration-count: 1; animation-fill-mode: forwards; }

@media (min-width: 768px) {
  .r-hero__in {
    padding-bottom: 120px;
  }
}

@media (min-width: 1380px) {
  .r-hero__in {
    padding-bottom: 89.37px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inbox :is(.land, .push, .unread),
  .hero-line .line {
    animation: none;
  }

  .hero-line .line {
    stroke-dashoffset: 0;
  }
}

/* 7.3 Laptop, 1200-1439: the 1440 hero scaled down (R7-T0, D-G3-2 4.8) */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .r-hero {
    --k: tan(atan2(100vw - 160px, 1280px));
  }

  .r-hero__in {
    min-height: calc(720px * var(--k));
    padding-bottom: 89.37px;
  }

  .hero-row {
    flex-wrap: nowrap;
    gap: calc(60px * var(--k));
    padding-top: calc(64px * var(--k));
  }

  .hero-text {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(740px * var(--k));
    gap: calc(28px * var(--k));
  }

  .hero-text .t-h1 {
    font-size: calc(80px * var(--k));
  }

  .hero-sub {
    max-width: calc(540px * var(--k));
    font-size: calc(20px * var(--k));
  }

  .hero-actions {
    gap: calc(24px * var(--k));
    margin-top: calc(8px * var(--k));
  }

  .hero-actions .btn--hero {
    height: max(44px, calc(54px * var(--k)));
    padding: 0 calc(26px * var(--k));
    font-size: calc(17px * var(--k));
  }

  .hero-link {
    font-size: calc(17px * var(--k));
  }

  .hero-small {
    font-size: calc(15px * var(--k));
  }

  .hero-card {
    flex: 0 0 calc(520px * var(--k));
  }

  .inbox {
    width: calc(520px * var(--k));
    height: calc(384px * var(--k));
    padding: calc(22px * var(--k)) 0;
    border-radius: calc(22px * var(--k));
    box-shadow: 0 calc(30px * var(--k)) calc(60px * var(--k)) color-mix(in srgb, var(--cocoa) 10%, transparent);
  }

  .inbox__head {
    padding: 0 calc(24px * var(--k)) calc(12px * var(--k));
    font-size: calc(13px * var(--k));
  }

  .inbox__row {
    grid-template-columns: calc(20px * var(--k)) 1fr auto;
    gap: calc(12px * var(--k));
    padding: calc(16px * var(--k)) calc(24px * var(--k));
  }

  .inbox__dot {
    padding-top: calc(6px * var(--k));
  }

  .inbox__dot svg {
    width: calc(12px * var(--k));
    height: calc(12px * var(--k));
  }

  .inbox__from,
  .inbox__subj {
    font-size: calc(15px * var(--k));
  }

  .inbox__subj,
  .inbox__prev {
    margin-top: calc(3px * var(--k));
  }

  .inbox__prev {
    font-size: calc(14px * var(--k));
  }

  .inbox__prev--clip {
    max-width: calc(370px * var(--k));
  }

  .inbox__time {
    font-size: calc(13px * var(--k));
  }

  @keyframes br-land {
    0% {
      transform: translateY(calc(-40px * var(--k)));
      opacity: 0;
    }

    9% {
      transform: none;
      opacity: 1;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes br-push {
    0% {
      transform: translateY(calc(-78px * var(--k)));
    }

    9%,
    100% {
      transform: none;
    }
  }
}

/* 8  HOME FINAL ASK (#start) */

.ask {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ask-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ask-step {
  position: relative;
}

.ask-step strong {
  font-size: 17px;
  font-weight: 620;
}

@media (min-width: 768px) {
  .ask {
    gap: 40px;
  }

  .ask-steps {
    gap: 26px;
  }

  .ask-step {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .ask-step strong {
    font-size: 20px;
  }

  .ask-step__note {
    color: var(--mist);
  }
}

.ask-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

@media (min-width: 768px) {
  .ask-grid {
    gap: 40px;
  }

  .ask-grid > .form-card {
    max-width: 440px;
  }

  .ask > .t-h2 {
    text-wrap: balance;
  }
}

@media (min-width: 1200px) {
  .ask-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    align-items: start;
    gap: 80px;
  }

  .ask-grid > .form-card {
    max-width: none;
    margin-top: 180px;
  }

  .ask > .t-h2 {
    text-wrap: wrap;
  }
}

/* 8.1 Laptop, 1200-1439: the 1440 final ask scaled down (R7-T0, D-G3-2 4.8) */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  #start {
    --k: tan(atan2(100vw - 280px, 1160px));
  }

  #start .ask {
    gap: calc(40px * var(--k));
    font-size: calc(18px * var(--k));
  }

  #start .t-h2--ask {
    font-size: calc(64px * var(--k));
  }

  #start .ask-steps {
    gap: calc(26px * var(--k));
  }

  #start .ask-step {
    gap: calc(4px * var(--k));
  }

  #start .ask-step strong {
    font-size: calc(20px * var(--k));
  }

  #start .ask-step > .snode {
    top: calc(13px * var(--k) - 9px);
  }

  #start .ask-grid {
    grid-template-columns: minmax(0, 1fr) calc(520px * var(--k));
    gap: calc(80px * var(--k));
  }

  #start .ask-grid > .form-card {
    gap: calc(20px * var(--k));
    margin-top: calc(180px * var(--k));
    padding: calc(40px * var(--k));
    border-radius: calc(24px * var(--k));
  }
  #start .form-card .field {
    gap: calc(8px * var(--k));
    font-size: calc(16px * var(--k));
  }

  #start .form-card .input {
    height: max(42px, calc(52px * var(--k)));
    padding: 0 calc(16px * var(--k));
    border-radius: calc(12px * var(--k));
    font-size: calc(17px * var(--k));
  }

  #start .form-card .input--select {
    height: max(44px, calc(54px * var(--k)));
    padding-right: calc(40px * var(--k));
  }

  #start .form-card .btn--submit {
    height: max(44px, calc(56px * var(--k)));
    margin-top: calc(6px * var(--k));
    font-size: calc(17px * var(--k));
  }

  #start .form-card .form-note {
    font-size: calc(14px * var(--k));
  }
}

/* 9  HOME GAP (#gap) */

.gap-lists {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.gap-list__title {
  margin-bottom: 12px;
}

.gap-list--now {
  color: var(--cocoa-soft);
}

.gap-list__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gap-list__items > li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.gap-list__dot {
  flex: 0 0 10px;
  height: 10px;
  border-radius: 50%;
}

.gap-list--now .gap-list__dot {
  border: 2px dashed var(--cocoa-soft);
}

.gap-list--full .gap-list__dot {
  box-sizing: border-box;
  border: 3px solid var(--cocoa);
}

@media (min-width: 768px) {
  .gap-lists {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
    max-width: 1000px;
  }

  .gap-list__title {
    margin-bottom: 18px;
  }

  .gap-list__items,
  .gap-list__items > li {
    gap: 14px;
  }

  .gap-list__dot {
    transform: translateY(1px);
  }
}

@media (min-width: 1024px) {
  .gap-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.stat-line {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.stat-line sup {
  font-size: .5em;
}

.footnotes {
  margin: 0;
  padding-left: 18px;
  color: var(--cocoa-soft);
  font-size: 13px;
}

@media (min-width: 768px) {
  .stat-line {
    max-width: 1000px;
    font-size: 32px;
    line-height: 1.2;
  }

  .stat-line sup {
    font-size: .45em;
    font-weight: 500;
  }

  .footnotes {
    max-width: 900px;
    font-size: 14px;
  }
}

.calc {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 20px;
  border-radius: 22px;
  background: var(--ice-light);
}

.calc__in,
.calc__out {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.calc__intro {
  margin: 8px 0 0;
  color: var(--cocoa-soft);
  font-size: 16px;
}

.calc__label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}

.calc__row {
  display: flex;
  justify-content: space-between;
}

.calc__val {
  font-weight: 400;
}

.calc__field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--ice-deep);
  border-radius: var(--r-input);
  background: var(--white);
  font-weight: 400;
}

.calc__field:focus-within {
  outline: 3px solid var(--focus-ring, var(--cocoa));
  outline-offset: 3px;
}

input.input, textarea.input, select.input, .calc__field { border-color: var(--cocoa-soft); }

.calc__unit {
  color: var(--cocoa-soft);
}

.calc__rev {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cocoa);
  font-size: 17px;
}

.calc__hint {
  color: var(--cocoa-soft);
  font-size: 14px;
  font-weight: 400;
}

.calc__result {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--ice-deep);
}

.calc__caption {
  color: var(--cocoa-soft);
  font-size: 15px;
}

.calc__fig {
  font-size: min(52px, 100cqi / (var(--fig-d, 5) * .664 + var(--fig-c, 1) * .293 + .594));
  font-weight: 640;
  line-height: 1;
  letter-spacing: -0.02em;
}

.calc__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--cocoa-soft);
}

.calc__formula {
  font-size: 12px;
  line-height: 1.6;
}

.calc__note {
  font-size: 13px;
}

@media (min-width: 768px) {
  .calc {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    max-width: 1120px;
    padding: 48px;
    border-radius: 28px;
  }

  .calc__in {
    gap: 28px;
  }

  .calc__out {
    justify-content: space-between;
    gap: 28px;
  }

  .calc__label {
    font-size: 16px;
  }

  .calc__field {
    height: 52px;
    padding: 0 16px;
  }

  .calc__rev {
    font-size: 18px;
  }

  .calc__result {
    gap: 6px;
    padding-top: 0;
    border-top: 0;
  }

  .calc__caption {
    font-size: 16px;
  }

  .calc__fig {
    font-size: min(88px, 100cqi / (var(--fig-d, 5) * .767 + var(--fig-c, 1) * .301 + .66));
  }

  .calc__foot {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ice-deep);
    font-size: 14px;
  }

  .calc__formula,
  .calc__note {
    font-size: inherit;
    line-height: inherit;
  }
}

@media (min-width: 1024px) {
  .calc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 10  HOME FLOWS (#build) */

.flows-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.flows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flows__head {
  display: flex;
  justify-content: space-between;
  padding: 0 0 8px;
  color: var(--cocoa-soft);
  font-size: 13px;
}

.flows__head .mono {
  font-size: 12px;
}

.flow {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--ice-deep);
}

.flow:last-child {
  border-bottom: 1px solid var(--ice-deep);
}

.flow__name {
  margin: 0;
  font-size: 18px;
  font-weight: 620;
}

.flow__value {
  font-size: 15px;
  white-space: nowrap;
}

.flow__price--none {
  color: var(--cocoa-soft);
}

.flow__branch,
.flow__node {
  display: none;
}

.flows-source {
  margin: -8px 0 0;
  color: var(--cocoa-soft);
  font-size: 13px;
}

@media (min-width: 768px) {
  .flows-block {
    max-width: 980px;
  }

  .flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: stretch;
    gap: 32px;
    padding: 28px 0;
  }

  .flow__branch {
    position: absolute;
    top: 45px;
    left: -56px;
    display: block;
    width: 20px;
    height: 3px;
    background: var(--ink);
  }

  .flow__node {
    position: absolute;
    top: 39px;
    left: -40px;
    display: block;
    width: 9px;
    height: 9px;
    border: 3px solid var(--ink);
    border-radius: 50%;
    background: var(--surface);
  }

  .flow__name {
    margin-bottom: 6px;
    font-size: 24px;
  }

  .flow__desc {
    margin: 0;
    color: var(--cocoa-soft);
  }

  .flow__value {
    text-align: right;
    white-space: normal;
  }

  .flow__price {
    display: block;
    font-family: var(--stack-wide);
    font-size: 34px;
    font-variation-settings: 'wdth' 125;
    font-weight: 640;
  }

  .flows-source {
    margin: 0;
    font-size: 14px;
  }
}

@media (min-width: 1200px) {
  .flow__branch {
    left: -80px;
    width: 44px;
  }
}

/* 11  THE SHOPPER TEST (#audit) */

.tl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 0 -12px;
}

.tl__panel {
  padding: 24px 20px 24px 54px;
  border-radius: 16px;
  background: var(--ice-light);
}

.tl__track {
  position: relative;
}

.tl__rule {
  position: absolute;
  top: 8px;
  bottom: 14px;
  left: -25.5px;
  width: 3px;
  background: var(--cocoa);
}

.tl__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl__stop {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tl__node {
  position: absolute;
  top: 3px;
  left: -31px;
  width: 10px;
  height: 10px;
  border: 3px solid var(--cocoa);
  border-radius: 50%;
  background: var(--ice-light);
}

.tl__node--none {
  border-style: dashed;
}

.tl__node--end {
  top: 0;
  left: -34px;
  width: 22px;
  height: 22px;
  border: 0;
  background: var(--spark);
}

.tl__time {
  color: var(--cocoa-soft);
  font-size: 12px;
}

.tl__what {
  font-size: 16px;
  font-weight: 620;
  line-height: 1.3;
}

.figcap {
  color: var(--cocoa-soft);
  font-size: 13px;
}

@media (min-width: 768px) {
  .tl {
    margin: 0;
  }

  .figcap {
    font-size: 14px;
  }
}

@media (min-width: 1024px) {
  .tl {
    gap: 14px;
  }

  .tl__panel {
    padding: 36px 24px 34px;
    border-radius: var(--r-panel);
  }

  .tl__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
  }

  .tl__rule {
    top: 37px;
    right: 0;
    bottom: auto;
    left: 6px;
    width: auto;
    height: 3px;
  }

  .tl__stop {
    gap: 8px;
    padding-top: 62px;
  }

  .tl__time {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
  }

  .tl__node {
    top: 31px;
    left: 0;
    width: 12px;
    height: 12px;
  }

  .tl__node--end {
    top: 29px;
    left: -2px;
    width: 22px;
    height: 22px;
  }

  .tl__what {
    font-size: 17px;
  }

  .tl__what {
    text-wrap: balance;
  }
}

@media (min-width: 1200px) {
  .tl__panel {
    padding-inline: 40px;
  }
}

@media (min-width: 1280px) {
  .tl__time {
    font-size: 13px;
  }

  .tl__what {
    text-wrap: wrap;
  }
}

.deliv {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.deliv__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
}

.deliv__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 15px;
  line-height: 1.45;
}

.audit-lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
}

.written__h {
  margin-top: 16px;
}

@media (min-width: 768px) {
  .deliv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .deliv__card {
    gap: 12px;
    padding: 28px;
  }

  .deliv__list {
    gap: 8px;
    padding-left: 20px;
    font-size: 17px;
    line-height: inherit;
  }

  .audit-lead {
    max-width: 900px;
    font-size: 20px;
  }

  .written__h {
    margin-top: 24px;
  }
}

.finding {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 14px;
}

.finding__chip {
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 640;
}

.finding__h {
  margin: 0;
  font-size: 18px;
  font-weight: 640;
  line-height: 1.3;
}

.finding__p {
  margin: 0;
  color: var(--cocoa-soft);
  font-size: 15px;
}

.finding__src {
  color: var(--cocoa-soft);
  font-size: 13px;
}

.written {
  display: flex;
  flex-direction: column;
  margin-top: 60px;
}

@media not all and (min-width: 390px) {
  .written {
    margin-top: 76px;
  }
}

.report {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 0 -12px;
}

.report__frame {
  position: relative;
}

.report__note {
  position: absolute;
  right: 0;
  bottom: calc(100% + 20.9px);
  left: 112px;
  max-width: 210px;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.report__arrow {
  position: absolute;
  top: -48px;
  left: 50px;
  z-index: 1;
  overflow: visible;
}

.report__arrow path {
  fill: none;
  stroke: var(--cocoa);
  stroke-linejoin: miter;
  stroke-width: 2;
}

.report__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1532 / 1136;
  border-radius: 10px;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--cocoa) 10%, transparent);
}

.report > .figcap {
  position: relative;
}

.marks {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.marks__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  font-size: 17px;
}

.marks__list > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.marks__list dt {
  font-weight: 640;
}

.marks__list dd {
  margin: 0;
  color: var(--cocoa-soft);
}

.audit-unseen {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--ice-deep);
  font-size: 16px;
}

@media (min-width: 768px) {
  .written {
    gap: 56px;
    margin-top: 28px;
  }

  .report {
    gap: 12px;
    max-width: 700px;
    margin: 0;
  }

  .report__note {
    top: -60px;
    bottom: auto;
    left: 262px;
    max-width: none;
    font-size: 16px;
    line-height: 1.4;
  }

  .report__arrow {
    top: -54px;
    left: 178px;
  }

  .report__img {
    aspect-ratio: 700 / 519;
    border-radius: 12px;
    box-shadow: 0 30px 60px color-mix(in srgb, var(--cocoa) 10%, transparent);
  }

  .audit-unseen {
    padding-top: 20px;
    font-size: 17px;
  }
}

@media (min-width: 1200px) {
  .written {
    display: grid;
    grid-template-columns: minmax(0, 700px) minmax(336px, 1fr);
    gap: 64px;
    align-items: start;
  }

  .report__note {
    right: auto;
    white-space: nowrap;
  }

  .marks {
    padding-top: 8px;
  }
}

.checks {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.checks__h {
  margin-top: 8px;
}

.checks__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  column-gap: 14px;
  row-gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.35;
}

.checks__list > li {
  display: flex;
  gap: 8px;
}

.checks__n {
  min-width: 20px;
  color: var(--cocoa-soft);
}

@media (min-width: 768px) {
  .checks {
    gap: 22px;
  }

  .checks__h {
    margin-top: 0;
  }

  .checks__list {
    column-gap: 28px;
    row-gap: 12px;
    padding-top: 22px;
    border-top: 1px solid var(--ice-deep);
    font-size: 16px;
    line-height: inherit;
  }

  .checks__list > li {
    gap: 12px;
  }

  .checks__n {
    min-width: 22px;
  }
}

@media (min-width: 1024px) {
  .checks__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
  }
}

/* 12  WORK YOU CAN CHECK */

.proof,
.proof__result {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.proof__fig {
  font-size: 54px;
  font-weight: 640;
  line-height: 1;
  letter-spacing: -0.02em;
}

.proof__unit {
  margin-top: -14px;
  font-size: 14px;
}

.proof__claim {
  margin: 0;
  font-size: 16px;
}

.proof__src {
  margin: -8px 0 0;
  color: var(--cocoa-soft);
  font-size: 13px;
}

.quote {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.quote--rule {
  margin-top: 4px;
  padding-left: 16px;
  border-left: 1px solid var(--ice-deep);
}

.quote--rule + .quote {
  margin-top: 8px;
}

.quote__text {
  margin: 0;
  font-size: 19px;
  font-weight: 450;
  line-height: 1.4;
}

.quote__by {
  color: var(--cocoa-soft);
  font-size: 13px;
}

@media (min-width: 768px) {
  .proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: start;
  }

  .proof__result {
    grid-column: 1 / -1;
    gap: 14px;
  }

  .proof__fig {
    font-size: 76px;
    line-height: .95;
  }

  .proof__unit {
    margin-top: 0;
    font-size: 15px;
  }

  .proof__claim {
    margin-top: 6px;
    font-size: 17px;
  }

  .proof__src {
    margin-top: 0;
    font-size: 14px;
  }

  .quote {
    gap: 16px;
  }

  .quote--rule {
    margin-top: 0;
    padding-left: 28px;
  }

  .quote--rule + .quote {
    margin-top: 0;
  }

  .quote__text {
    font-size: 24px;
    line-height: 1.35;
  }

  .quote__by {
    font-size: 15px;
  }
}

@media (min-width: 1440px) {
  .proof {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .proof__result {
    grid-column: auto;
  }
}

.gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--ice-deep);
}

.gallery__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gallery__intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--cocoa-soft);
  font-size: 14px;
}

.gallery__row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 6px;
  margin: -2px -24px 0 -6px;
  padding: 6px 24px 8px 6px;
}

.gallery__item {
  display: flex;
  flex: 0 0 220px;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  scroll-snap-align: start;
}

.gallery__item figcaption {
  color: var(--cocoa-soft);
  font-size: 13px;
}

.gallery__item strong {
  color: var(--cocoa);
  font-weight: 620;
}

.mailbox {
  height: 440px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--white);
  scrollbar-width: none;
}

.mailbox::-webkit-scrollbar {
  display: none;
}

.mailbox img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .gallery {
    gap: 24px;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .gallery__head {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding-top: 32px;
    border-top: 1px solid var(--ice-deep);
  }

  .gallery__intro {
    justify-content: normal;
    gap: 16px;
    font-size: 15px;
  }

  .gallery__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
    overflow: visible;
    scroll-snap-type: none;
    margin: 0;
    padding: 0;
  }

  .gallery__item {
    gap: 10px;
  }

  .gallery__item figcaption {
    font-size: 14px;
  }

  .mailbox {
    height: 544px;
    overflow: hidden auto;
    border-radius: 14px;
    box-shadow: 0 1px 0 var(--ice-deep);
  }
}

@media (min-width: 1024px) {
  .gallery__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.gallery [data-gallery-toggle][hidden] {
  display: inline-flex !important;
  visibility: hidden;
}

.gallery [data-gallery-toggle] {
  min-width: 119.734375px;
}

.gallery__row:focus-visible {
  outline-offset: -3px;
}

@media (min-width: 768px) {
  .gallery [data-gallery-toggle] {
    min-width: 134px;
  }
}

/* 13  PRICING */

.plans {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.plan__flag {
  margin-bottom: -8px;
}

.plan__flag:empty {
  height: 27px;
}

.plan__name {
  margin: 0;
  font-size: 19px;
  font-weight: 640;
}

.plan__price {
  margin: 0;
}

.plan__fig {
  font-size: 46px;
  font-weight: 640;
  line-height: 1;
}

.plan__unit {
  color: var(--cocoa-soft);
  font-size: 12px;
}

.plan__price > .plan__unit {
  display: block;
  margin-top: 6px;
}

.plan__for {
  margin: 0;
  color: var(--cocoa-soft);
  font-size: 15px;
}

.plan__term {
  margin: -6px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.plan__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--ice-deep);
  list-style: none;
  font-size: 15px;
  line-height: 1.45;
}

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.plan__head > .chip {
  align-self: center;
}

.plans-brief {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.plan-lead__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.plan-lead__head > .chip {
  align-self: center;
}

.plan-lead__price {
  margin: 0;
}

.plan-lead__fig {
  font-size: 46px;
  font-weight: 640;
  line-height: 1;
}

.plan-lead__price > .plan__unit {
  white-space: nowrap;
}

.plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 20px;
}

.card--custom.plan-row {
  padding: 20px 18px;
}

.plan-row__name {
  margin: 0;
  font-size: 17px;
  font-weight: 640;
}

.plan-row__note {
  color: var(--cocoa-soft);
  font-size: 14px;
}

.plan-row__fig {
  font-size: 32px;
  font-weight: 640;
}

.plan-row__fig--word {
  font-size: 22px;
}

.projects {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 18px;
}

.projects__head {
  margin-bottom: 6px;
}

.projects__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--ice-deep);
}

.project__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.project__row strong {
  font-size: 16px;
  font-weight: 640;
}

.project__price {
  font-size: 20px;
  font-weight: 640;
}

.project__what {
  color: var(--cocoa-soft);
  font-size: 14px;
}

.projects__all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 560;
  text-underline-offset: 5px;
}

.promises {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.promises p {
  margin: 0;
  font-size: 15px;
}

.promises strong {
  font-weight: 640;
}

.plans-foot {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.market {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--ice-deep);
}

.market p {
  margin: 0;
}

.market__fig {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

.market__text {
  font-size: 15px;
}

.market__src {
  color: var(--cocoa-soft);
  font-size: 13px;
}

@media (min-width: 768px) {
  .plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
  }

  .plan__name {
    font-size: 21px;
  }

  .plan__price {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    min-height: 76px;
  }

  .plan__fig {
    font-size: 56px;
    letter-spacing: -0.02em;
  }

  .plan__fig--word {
    font-size: 46px;
  }

  .plan__unit {
    font-size: 13px;
  }

  .plan__price > .plan__unit {
    margin-top: 0;
  }

  .plan__term {
    margin-top: -8px;
  }

  .plan__list {
    gap: 10px;
    padding-top: 16px;
  }

  .projects {
    gap: 20px;
    margin-top: 0;
    padding-top: 12px;
  }

  .projects__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 0;
  }

  .projects__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  .project {
    gap: 6px;
    padding: 20px 0 0;
    border-top: 2px solid var(--cocoa);
  }

  .project__row strong {
    font-size: 18px;
  }

  .project__price {
    font-size: 26px;
  }

  .project__what {
    font-size: 15px;
  }

  .projects__all {
    margin-top: 0;
    font-size: 17px;
  }

  .promises {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--ice-deep);
  }

  .promises p {
    font-size: 18px;
  }

  .plans-foot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 56px;
  }

  .market {
    gap: 10px;
    padding-top: 0;
    border-top: 0;
  }

  .market__fig {
    font-size: 32px;
    line-height: 1.15;
  }

  .market__text {
    font-size: 17px;
  }

  .market__src {
    font-size: 14px;
  }

  .promises--col {
    display: flex;
    gap: 16px;
    padding-top: 0;
    border-top: 0;
  }
}

@media (min-width: 1440px) {
  .plans,
  .projects__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 14  FOUNDER (R2-T6) */

.founder__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.founder__text p {
  margin: 0;
}

.founder strong {
  font-weight: 640;
}

.founder__id {
  display: flex;
  align-items: center;
  gap: 14px;
}

.founder__id p {
  font-size: 15px;
  line-height: 1.4;
}

.founder__badge {
  display: flex;
  flex: 0 0 64px;
  align-items: center;
  justify-content: center;
  height: 64px;
  border-radius: 50%;
  background: var(--ice-deep);
}

.founder__line {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
}

.founder__promises {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--ice-deep);
  list-style: none;
  color: var(--cocoa-soft);
  font-size: 15px;
}

.founder svg {
  display: block;
  fill: none;
}

.fi-paper {
  fill: var(--ice-light);
  stroke: var(--cocoa);
}

.fi-fill {
  fill: var(--cocoa);
}

.fi-ink {
  stroke: var(--cocoa);
}

.fi-soft {
  stroke: var(--cocoa-soft);
}

.fi-mist {
  stroke: var(--mist);
}

.fi-stop {
  fill: var(--ice-deep);
  stroke: var(--cocoa);
}

.fi-spark {
  fill: var(--spark);
}

@media (min-width: 768px) {
  .founder {
    display: flex;
    flex-direction: column;
    gap: 56px;
  }

  .founder__art {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 360px;
    height: 440px;
    border-radius: var(--r-panel);
    background: var(--ice-deep);
  }

  .founder__text {
    gap: 24px;
    max-width: 680px;
  }

  .founder__line {
    font-size: 32px;
    line-height: 1.3;
  }

  .founder__by {
    font-size: 17px;
  }

  .founder__promises {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 32px;
    padding-top: 20px;
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .founder {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: center;
    gap: 72px;
  }
}

/* 15  FAQ (#faq) */

.faq-split {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 768px) {
  .faq-split {
    gap: 40px;
  }

  .faq-list {
    max-width: 680px;
  }
}

@media (min-width: 1200px) {
  .faq-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
    gap: 72px;
  }
}

/* 16  THE ROUTE (R2-T7) */

/* 16.1 The overlay (js/roc-route.js) */
main:has(> .route) {
  position: relative;
}

.route {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  visibility: hidden;
}

.route.is-ready {
  visibility: visible;
}

.route__line {
  position: absolute;
  z-index: 3;
  height: var(--route-h);
}

.route__line--trail {
  --route-h: calc(var(--route-s) - var(--route-t));
  top: var(--route-t);
  left: calc(var(--route-x) - 1.5px);
  width: 3px;
  overflow: clip;
}

.route__line--in {
  --route-h: var(--route-l1);
  top: var(--route-s);
  left: var(--route-lx);
  width: 8px;
  overflow-x: visible;
  overflow-y: clip;
}

.route__mark {
  position: sticky;
  top: 62vh;
  top: 62dvh;
  display: block;
  height: 0;
}

.route__line--trail .route__mark::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3px;
  height: 100000px;
  background: var(--cocoa);
}

.route__in {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 8px;
  height: var(--route-h);
  overflow: visible;
}

.route__in path {
  fill: none;
  stroke: var(--ice);
  stroke-width: 3px;
}

.route__rail {
  position: absolute;
  z-index: 6;
  top: calc(var(--route-t) - var(--route-tip) / 2);
  left: calc(var(--route-x) - var(--route-tip) / 2);
  width: var(--route-tip);
  height: calc(var(--route-s) + var(--route-l1) - var(--route-t) + var(--route-tip));
}

.route__tip,
.route__end {
  display: block;
  width: var(--route-tip);
  height: var(--route-tip);
  border-radius: 50%;
  background: var(--spark);
  box-shadow: 0 0 0 3px var(--route-ring, var(--ice));
}

.route__tip {
  position: sticky;
  top: calc(62vh - var(--route-tip) / 2);
  top: calc(62dvh - var(--route-tip) / 2);
}

.route__turn {
  position: absolute;
  z-index: 3;
  top: var(--route-s);
  left: 0;
  overflow: visible;
}

.route__turn path,
.route__turn circle {
  fill: none;
  stroke-width: 3px;
}

@supports (transform: translateY(round(1.5px, 1px))) {
  .route__turn { top: 0; transform: translateY(round(var(--route-s), 1px)); }
  .route__line--in { top: round(var(--route-s), 1px); transform: none; }
}

.route__track {
  stroke: var(--ice);
  stroke-dasharray: 7 8;
  opacity: .32;
}

.route__arc {
  stroke: var(--ice);
  stroke-dasharray: 1;
  stroke-dashoffset: var(--route-off, 1);
}

.route__stub {
  stroke: var(--cocoa);
  opacity: 0;
}

.route__ring {
  stroke: var(--ice);
  stroke-width: 2px;
  stroke-dasharray: 3 4;
  opacity: .5;
}

.route__end {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  visibility: hidden;
  transform: translate(var(--route-ex, 0), var(--route-ey, 0));
}

.route.is-turn .route__tip,
.route.is-end .route__tip {
  visibility: hidden;
}

.route.is-turn .route__end,
.route.is-end .route__end {
  visibility: inherit;
}

.route.is-end .route__mark {
  position: absolute;
  top: auto;
  bottom: 0;
}

.route.is-end .route__end {
  width: var(--route-tip-end);
  height: var(--route-tip-end);
}

.route.is-end .route__arc {
  stroke-dashoffset: 0;
}

.route.is-end .route__stub {
  opacity: 1;
}

.route.is-end .route__ring {
  opacity: 0;
}

.route-boot :is(.node, .snode) {
  transition: none;
}

/* 16.2 Without JS */
@media (scripting: none) {
  main:has(> .route) .r-wrap:has(> .spine)::after {
    content: '';
    position: absolute;
    z-index: 3;
    top: var(--spine-top-p, 0px);
    bottom: 0;
    left: 22.5px;
    width: 3px;
    background: var(--cocoa);
  }

  [data-route-end] [type="submit"] {
    position: relative;
  }

  [data-route-end] [type="submit"]::before,
  [data-route-end] [type="submit"]::after {
    content: '';
    position: absolute;
    top: 50%;
  }

  [data-route-end] [type="submit"]::before {
    right: 100%;
    width: 20px;
    height: 3px;
    margin-top: -1.5px;
    background: var(--cocoa);
  }

  [data-route-end] [type="submit"]::after {
    z-index: 6;
    right: calc(100% + 20px - 8px);
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--spark);
    box-shadow: 0 0 0 3px var(--cocoa);
  }

  @supports (anchor-name: --a) {
    [data-route-end] form {
      anchor-name: --route-card;
    }

    [data-route-end] [type="submit"] {
      anchor-name: --route-button;
    }

    [data-route-end] > .r-wrap::before {
      content: '';
      position: absolute;
      z-index: 3;
      top: 0;
      right: anchor(--route-card left);
      bottom: calc(anchor(--route-button center) - 1.5px);
      left: 22.5px;
      border: 0 solid var(--ice);
      border-width: 0 0 3px 3px;
      border-bottom-left-radius: 13.5px;
    }
  }
}

@media (scripting: none) and (min-width: 768px) {
  main:has(> .route) .r-wrap:has(> .spine)::after {
    top: var(--spine-top-d, 0px);
    left: 62.5px;
  }

  [data-route-end] [type="submit"]::before {
    width: 40px;
  }

  [data-route-end] [type="submit"]::after {
    right: calc(100% + 40px - 10px);
    width: 20px;
    height: 20px;
    margin-top: -10px;
  }

  @supports (anchor-name: --a) {
    [data-route-end] > .r-wrap::before {
      left: 62.5px;
      border-bottom-left-radius: 25.5px;
    }
  }
}

@media (scripting: none) and (min-width: 1200px) {
  main:has(> .route) .r-wrap:has(> .spine)::after {
    left: 118.5px;
  }

  @supports (anchor-name: --a) {
    [data-route-end] > .r-wrap::before {
      left: 118.5px;
    }
  }
}

/* 17  PRICING HERO (R3-T1) */

.p-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.p-hero p {
  margin: 0;
}

.p-hero__eyebrow {
  color: var(--cocoa-soft);
  font-size: 13px;
}

.p-hero__intro {
  color: var(--cocoa-soft);
  font-size: 17px;
  line-height: 1.5;
}

.p-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.p-hero__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  font-size: 16px;
  text-underline-offset: 4px;
}

.p-hero__note {
  color: var(--cocoa-soft);
  font-size: 15px;
}

@media (min-width: 768px) {
  .p-hero {
    gap: 28px;
    max-width: 900px;
  }

  .p-hero__eyebrow {
    font-size: 14px;
  }

  .p-hero__intro {
    max-width: 640px;
    font-size: 20px;
    line-height: 1.45;
  }

  .p-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-top: 8px;
  }

  .p-hero__link {
    display: inline-flex;
    height: auto;
    min-height: 44px;
    font-size: 17px;
  }
}

/* 18  PRICING COMPARE (#compare) */

.cmp-yes path {
  stroke: var(--cocoa);
}

.cmp-no {
  color: var(--cocoa-soft);
}

.cmp-switch {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.plan-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--white);
}

.tab {
  flex: 1;
  height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--cocoa);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}

.tab.on {
  background: var(--cocoa);
  color: var(--ice);
}

@media (hover: hover) {
  .tab:not(.on):hover {
    background: var(--ice-light);
  }
}

@media (forced-colors: active) {
  .cmp-yes path {
    stroke: CanvasText;
  }

  .cmp-no {
    color: CanvasText;
  }

  .tab.on {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

.cmp-panel {
  padding: 4px 16px 12px;
  border-radius: var(--r-card);
  background: var(--white);
}

.cmp-panel__name {
  margin: 0;
  padding-top: 14px;
  font-size: 17px;
  font-weight: 640;
}

.cmp-grp {
  padding-top: 18px;
}

.cmp-grp__name {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cocoa);
  font-size: 14px;
  font-weight: 640;
}

.cmp-rows {
  margin: 0;
}

.cmp-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ice-deep);
  font-size: 15px;
  line-height: 1.35;
}

.cmp-row dd {
  flex: 0 0 auto;
  max-width: 46%;
  margin: 0;
  text-align: right;
}

.cmp-card {
  padding: 8px 8px 16px;
  border-radius: var(--r-card);
  background: var(--white);
}

.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.4;
}

.cmp col {
  width: 20%;
}

.cmp .cmp__label-col {
  width: 40%;
}

.cmp th,
.cmp td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ice-deep);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.cmp thead th,
.cmp thead td {
  border-bottom: 0;
}

.cmp .g {
  background: var(--ice-light);
}

.cmp thead .g {
  border-radius: var(--r-card) var(--r-card) 0 0;
}

.cmp__plan {
  display: block;
  font-size: 18px;
  font-weight: 640;
}

.cmp__price {
  color: var(--cocoa-soft);
  font-size: 13px;
}

.cmp .grp th {
  padding-top: 30px;
  border-bottom: 2px solid var(--cocoa);
  font-size: 15px;
  font-weight: 640;
}

/* 19  PRICING */

.incl {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.incl__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--ice-deep);
}

.incl__n {
  color: var(--cocoa-soft);
  font-size: 12px;
}

.incl__title {
  margin: 0;
  font-size: 17px;
  font-weight: 620;
}

.incl__text {
  margin: 0;
  color: var(--cocoa-soft);
  font-size: 15px;
}

.chip--season {
  gap: 8px;
}

.chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--spark);
}

.holiday {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
}

.holiday__main {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.holiday__head,
.proj__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.holiday__name {
  margin: 0;
  font-size: 22px;
  font-weight: 640;
  line-height: 1.1;
}

.holiday__fig {
  font-size: 28px;
  font-weight: 640;
  white-space: nowrap;
}

.holiday__unit,
.proj__unit {
  color: var(--cocoa-soft);
  font-size: 12px;
}

.holiday__what {
  margin: 0;
  color: var(--cocoa-soft);
  font-size: 15px;
}

.proj-group {
  margin-top: 12px;
}

.proj-group__name {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--cocoa);
  font-size: 16px;
  font-weight: 640;
}

.proj-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.proj,
.proj__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proj {
  padding: 18px 0;
  border-top: 1px solid var(--ice-deep);
}

.proj__name {
  margin: 0;
  font-size: 18px;
  font-weight: 640;
}

.proj__fig {
  font-size: 26px;
  font-weight: 640;
  white-space: nowrap;
}

.proj__what {
  margin: 0;
  color: var(--cocoa-soft);
  font-size: 15px;
}

.holiday__price,
.proj__price {
  margin: 0;
}

@media (min-width: 768px) {
  .incl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 48px;
  }

  .incl__item {
    gap: 8px;
    padding-top: 20px;
  }

  .incl__n {
    font-size: 13px;
  }

  .incl__title {
    font-size: 20px;
  }

  .incl__text {
    font-size: 16px;
  }

  .chip--season {
    padding: 4px 12px;
  }

  .holiday {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px 32px;
    padding: 32px 36px;
  }

  .holiday__main {
    grid-column: 1 / -1;
  }

  .holiday__name {
    font-size: 30px;
  }

  .holiday__what {
    max-width: 640px;
    font-size: 17px;
  }

  .holiday__price .holiday__fig,
  .proj__price .proj__fig {
    display: block;
    line-height: 1.1;
  }

  .holiday__price .holiday__fig {
    font-size: 44px;
  }

  .holiday__price .holiday__unit,
  .proj__price .proj__unit {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
  }

  .proj-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 0;
  }

  .proj-group__name {
    padding-bottom: 12px;
    font-size: 17px;
  }

  .proj-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }

  .proj {
    gap: 12px;
    padding: 24px 0;
  }

  .proj__main {
    gap: 0;
  }

  .proj__name {
    margin-bottom: 6px;
    font-size: 22px;
  }

  .proj__what {
    max-width: 620px;
    font-size: 16px;
  }

  .proj__price .proj__fig {
    font-size: 36px;
  }

  .proj .btn--project {
    align-self: flex-start;
  }
}

@media (min-width: 1024px) {
  .incl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .holiday {
    grid-template-columns: minmax(0, 1fr) 210px 200px;
    gap: 32px;
  }

  .holiday__main {
    grid-column: auto;
  }

  .holiday__price,
  .proj__price {
    text-align: right;
  }

  .proj-list {
    display: block;
  }

  .proj {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px 170px;
    align-items: start;
    gap: 32px;
  }
}

/* 20  PRICING QUOTE FORM (#quote, no board) (R3-T3) */

.quote-sec,
.quote-sec__head,
.quote-sec__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quote-sec__head .t-h2 {
  text-wrap: balance;
}

.quote-sec__intro {
  margin: 0;
  color: var(--cocoa-soft);
  font-size: 16px;
}

.quote-form {
  container-type: inline-size;
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.field__label {
  display: block;
}

.select-wrap {
  position: relative;
  display: block;
}

.select-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 19px;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 2px solid var(--cocoa);
  border-bottom: 2px solid var(--cocoa);
  transform: rotate(45deg);
  pointer-events: none;
}

.input--select {
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  padding-right: 40px;
  cursor: pointer;
}

.input--area {
  display: block;
  height: auto;
  padding: 13px 14px;
  line-height: 1.45;
  resize: vertical;
}

.quote-form .input:user-invalid {
  border-color: var(--cocoa);
  box-shadow: inset 0 0 0 1px var(--cocoa);
}

.quote-form .input::-webkit-calendar-picker-indicator {
  display: none !important;
}

.quote-status {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.quote-status:not(:empty) {
  margin-bottom: 6px;
}

.quote-form[aria-busy="true"] .btn--submit {
  background: var(--cocoa-soft);
  cursor: progress;
}

.quote-done {
  gap: 10px;
  opacity: 1;
  transition: opacity .2s cubic-bezier(.23, 1, .32, 1);
}

@starting-style {
  .quote-done {
    opacity: 0;
  }
}

.quote-done:focus {
  outline: none;
}

.quote-done p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .quote-done {
    transition: none;
  }
}

.quote-alt {
  margin: 0;
  color: var(--cocoa-soft);
  font-size: 14px;
}

.quote-alt a {
  padding-block: 15px;
}

@media (min-width: 768px) {
  .quote-sec {
    gap: 48px;
  }

  .quote-sec__head {
    gap: 20px;
    max-width: 900px;
  }

  .quote-sec__intro {
    max-width: 640px;
    font-size: 20px;
  }

  .quote-sec__body {
    gap: 20px;
    max-width: 640px;
  }

  .field-row {
    gap: 20px;
  }

  @container (min-width: 456px) {
    .field-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .input--select {
    height: 54px;
  }

  .input--area {
    padding: 14px 16px;
  }

  .quote-status {
    font-size: 16px;
  }

  .quote-status:not(:empty) {
    margin-bottom: 8px;
  }

  .quote-alt {
    font-size: 15px;
  }
}

@media (min-width: 1200px) {
  .quote-sec {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
    gap: 72px;
  }

  .quote-sec__body {
    max-width: none;
  }
}

/* 21  INNER PAGES */

@media (min-width: 768px) {
  .header-nav {
    min-height: 48px;
  }
}

@media not all and (min-width: 768px) {
  .incl--long {
    gap: 18px;
  }
}

@media (min-width: 1024px) {
  .incl--long {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .incl--long {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.quiz {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quiz__progress {
  margin: 1em 0;
}

.quiz__steps {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quiz__q {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.quiz__legend {
  padding: 0;
}

.quiz__stem {
  margin: 0;
  color: var(--cocoa-soft);
  font-size: 15px;
}

.quiz__q > .quiz__stem {
  margin-top: 12px;
}

.quiz__opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.quiz__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  height: auto;
  min-height: 50px;
  line-height: 1.35;
  cursor: pointer;
}

.quiz__opt > input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--cocoa);
}

.quiz__opt:has(> input:checked) {
  border-color: var(--cocoa);
  box-shadow: 0 0 0 1px var(--cocoa);
}

.quiz__nav {
  display: flex;
  gap: 12px;
}

.quiz__nav > .btn {
  flex: 1 1 0;
  margin-top: 0;
}

.quiz__nav > .btn:disabled {
  border-color: var(--ice-deep);
  background: var(--ice-deep);
  color: var(--cocoa-soft);
  cursor: default;
}

.quiz__nav > .btn--outline:disabled {
  background: transparent;
}

.quiz__score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.quiz__n {
  font-size: 52px;
  font-weight: 640;
  line-height: 1;
  letter-spacing: -0.02em;
}

.quiz__unit {
  color: var(--cocoa-soft);
  font-size: 14px;
}

.quiz__band {
  margin-top: 4px;
}

.quiz__nojs {
  display: none;
}

.quiz-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .quiz__steps {
    gap: 28px;
  }

  .quiz__stem {
    font-size: 16px;
  }

  .quiz__opts {
    gap: 12px;
  }

  .quiz__opt {
    min-height: 52px;
  }

  .quiz__n {
    font-size: 88px;
  }

  .quiz__unit {
    font-size: 15px;
  }

  .quiz-form {
    gap: 20px;
  }
}

@media (min-width: 1200px) {
  .incl--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tl__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

@media (min-width: 768px) {
  .tl__head {
    gap: 12px;
  }
}

@media (min-width: 1024px) {
  .tl--v {
    gap: 10px;
  }

  .tl--v .tl__panel {
    padding: 24px 20px 24px 54px;
    border-radius: 16px;
  }

  .tl--v .tl__list {
    display: flex;
    gap: 22px;
  }

  .tl--v .tl__rule {
    top: 8px;
    right: auto;
    bottom: 14px;
    left: -25.5px;
    width: 3px;
    height: auto;
  }

  .tl--v .tl__stop {
    gap: 5px;
    padding-top: 0;
  }

  .tl--v .tl__time {
    position: static;
    white-space: normal;
  }

  .tl--v .tl__node {
    top: 3px;
    left: -31px;
    width: 10px;
    height: 10px;
  }

  .tl--v .tl__what {
    font-size: 16px;
    text-wrap: wrap;
  }
}

@media (min-width: 1200px) {
  .tl--v .tl__panel {
    padding-inline: 54px 20px;
  }
}

@media (min-width: 1280px) {
  .tl--v .tl__time {
    font-size: 12px;
  }
}

.report--ifmc .report__img {
  aspect-ratio: 1200 / 786;
}

.work-row {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.founder--ruled {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--ice-deep);
}

@media (min-width: 768px) {
  .founder--ruled {
    margin-top: 0;
    padding-top: 32px;
  }
}

@media (min-width: 1024px) {
  .work-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: 56px;
  }
}

.checks__list--10 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-auto-flow: row;
}

@media (min-width: 768px) {
  .checks__list--10 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
  }
}

.quiz-done {
  display: flex;
  flex-direction: column;
}

/* 22  THANK-YOU (/thank-you.html) (R4-T2) */

.ask-steps--ice {
  max-width: 680px;
}

.ask-steps--ice .ask-step__note {
  color: var(--cocoa-soft);
}

@media (min-width: 768px) {
  .thanks > .btn--compare {
    align-self: flex-start;
  }
}

/* 22.1 The coach variant, at #coach (R7-T0 item 6) */
#coach.thanks--coach:not(:target) {
  display: none;
}

#coach.thanks--coach:target ~ .thanks {
  display: none;
}

#coach.thanks--coach {
  scroll-margin-top: 100vh;
}

/* 23  F1 FIX PASS (F1-T3, F1-T5) */

/* 23.1 Hero eyebrow (F1-T3) */
.hero-eyebrow {
  margin: 0 0 18px;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .hero-eyebrow {
    margin: 0;
  }
}

@media (min-width: 1200px) and (max-width: 1439.98px) {
  .hero-eyebrow {
    margin-top: calc(-44px * var(--k));
    font-size: max(12px, calc(14px * var(--k)));
  }
}

/* 23.2 Founder image slot (F1-T3) */
.founder__fig {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.founder__art--img {
  overflow: hidden;
}

.founder__art--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder__li {
  padding-block: 14px;
}

.founder__badge--img {
  overflow: hidden;
}

.founder__badge--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

/* 23.3 Steps on ice with their notes at every width ("When you say yes", thank-you) (F1-T3) */
.ask-steps--ice .ask-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ask-steps--ice .ask-step__note {
  color: var(--cocoa-soft);
  font-size: 15px;
}

@media (min-width: 768px) {
  .ask-steps--ice .ask-step__note {
    font-size: 18px;
  }
}

/* 23.3.1 Links in running text: a 44px hit area that doesn't move the line (F1-T5) */
.promises a,
.form-note a,
.flows-source a,
.market__src a,
.footnotes a,
.faq__a a,
.holiday__promise a,
.ask-step__note a,
.p-hero__note a,
.p-hero__intro a,
.legal a {
  padding-block: 16px;
  text-underline-offset: 3px;
}

/* 23.3.2 The proof figure, CA$6.87K: one character longer than CA$7.53, so it gives way below 342px (F1-T5) */
@media not all and (min-width: 768px) {
  .proof__fig {
    font-size: min(54px, 15.8vw);
  }
}

/* 23.4 Intake lines (F1-T3) */
.form-note--intake {
  padding-top: 12px;
  border-top: 1px solid var(--ice-deep);
}

.plans-cap {
  margin: -10px 0 0;
  color: var(--cocoa-soft);
  font-size: 15px;
}

@media (min-width: 768px) {
  .form-note--intake {
    padding-top: 16px;
  }

  .plans-cap {
    margin-top: -32px;
    font-size: 16px;
  }
}

@media (min-width: 1200px) and (max-width: 1439.98px) {
  #start .form-card .form-note--intake {
    padding-top: calc(16px * var(--k));
  }
}

/* 23.5 Consent checkbox (F1-T3) */
.consent {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}

.consent__ctl {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
}

.consent__ctl > input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: block;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid var(--cocoa-soft);
  border-radius: var(--r-card);
  background: var(--white);
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}

.consent__ctl > input:checked {
  border-color: var(--cocoa);
  background: var(--cocoa);
}

.consent__ctl > input:user-invalid,
.consent__ctl > input[aria-invalid="true"] {
  border-color: var(--cocoa);
  box-shadow: 0 0 0 1px var(--cocoa);
}

.consent__tick {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  color: var(--ice);
  opacity: 0;
  pointer-events: none;
}

.consent__ctl > input:checked + .consent__tick {
  opacity: 1;
}

.consent-field {
  display: flex;
  flex-direction: column;
}

.consent__error {
  margin: 0 0 0 36px;
  font-size: 15px;
  font-weight: 600;
}

@media (hover: hover) {
  .consent:hover > .consent__ctl > input:not(:checked) {
    border-color: var(--cocoa);
  }
}

@media (min-width: 768px) {
  .consent {
    font-size: 16px;
  }

  .consent__error {
    font-size: 16px;
  }
}

@media (min-width: 1200px) and (max-width: 1439.98px) {
  #start .form-card .consent,
  #start .form-card .consent__error {
    font-size: calc(16px * var(--k));
  }
}

@media (forced-colors: active) {
  .consent__ctl > input:checked {
    background: Highlight;
  }

  .consent__tick {
    color: HighlightText;
  }
}

/* 23.6 Footer fine print (F1-T3) */
.site-footer__fine {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--cocoa-soft);
  font-size: 14px;
}

.site-footer__fine p {
  margin: 0;
}

.site-footer__fine a {
  color: var(--ice);
  text-underline-offset: 4px;
}

.site-footer__fine a[aria-current="page"] {
  font-weight: 620;
  text-decoration: none;
}

.site-footer__more a,
.site-footer__small a {
  padding-block: 16px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: -12px 0 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-inline: -3px;
  padding-inline: 3px;
}

.site-footer__small {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (hover: hover) {
  .site-footer__fine a:hover {
    color: var(--mist);
  }
}

@media (min-width: 768px) {
  .site-footer__fine {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 48px;
    margin-top: 24px;
    padding-top: 24px;
  }

  .site-footer__more {
    grid-column: 1;
  }

  .site-footer__links {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: -11px 0 0;
  }

  .site-footer__small {
    grid-column: 1;
    max-width: 720px;
  }
}

/* 23.7 Long text (legal pages) (F1-T3) */
.legal {
  max-width: 680px;
}

.legal h2 {
  margin: 48px 0 0;
  scroll-margin-top: 24px;
}

.legal h3 {
  margin: 28px 0 0;
}

.legal p,
.legal ul,
.legal ol {
  margin: 14px 0 0;
}

.legal ul,
.legal ol {
  padding-left: 22px;
}

.legal li + li {
  margin-top: 6px;
}

.legal a {
  text-underline-offset: 3px;
}

.legal-toc {
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--ice-deep);
  list-style: none;
}

.legal-toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.legal__panel {
  margin-top: 48px;
  padding: 24px 20px 28px;
  border-radius: var(--r-panel);
  background: var(--ice-light);
  scroll-margin-top: 24px;
}

.legal .legal__panel > h2 {
  margin-top: 0;
}

@media not all and (min-width: 768px) {
  .legal__panel {
    margin-left: -12px;
  }
}

@media (min-width: 768px) {
  .legal h2 {
    margin-top: 64px;
  }

  .legal p,
  .legal ul,
  .legal ol {
    margin-top: 16px;
  }

  .legal__panel {
    margin-top: 64px;
    padding: 40px;
  }
}

.legal table {
  width: 100%;
  margin: 16px 0 0;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}

.legal th,
.legal td {
  padding: 12px 12px 12px 0;
  border-top: 1px solid var(--ice-deep);
  text-align: left;
  vertical-align: top;
}

.legal thead th {
  border-top: 0;
  color: var(--cocoa-soft);
  font-family: var(--stack-mono);
  font-size: 12px;
  font-weight: 400;
}

.legal tbody th {
  width: 52%;
  font-weight: 600;
}

@media (min-width: 768px) {
  .legal table {
    font-size: 16px;
  }
}

/* 23.8 Short pages: the footer at the bottom of the window (F1-T3) */
.page-fill {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

@media (min-width: 768px) {
  .page-fill > .wrap {
    width: 100%;
  }
}

.page-fill > main {
  flex: 1 0 auto;
}

/* 23.9 Stations on a page (404) (F1-T3) */
.stations--page::before {
  display: none;
}

/* 23.10 Quote form, a fixed-price project picked (F1-T3) */
.quote-sec:not([data-picked="fixed"]) .quote-sec__intro--picked,
.quote-sec[data-picked="fixed"] .quote-sec__intro--quote,
.quote-sec:not([data-picked="fixed"]) .quote-sec__title--picked,
.quote-sec[data-picked="fixed"] .quote-sec__title--quote {
  display: none;
}

/* 23.11 The footer's end group on its own row at 768-779 (F1-T10 E2, D-F1E-2) */
@media (min-width: 768px) and (max-width: 779.98px) {
  .site-footer__end {
    flex-basis: 100%;
  }
}