/* tracknotes layout; typography comes from the shared system. */
@layer page {
  .studio-covers__layout {
    display: grid;
    gap: 36px;
  }
  .studio-report-preview {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0,.46fr) minmax(0,.54fr);
    gap: 20px;
    align-items: center;
    max-width: 420px;
  }
  .studio-report-preview__page {
    display: block;
    background: var(--paper-bg);
    border: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(0,0,0,.2);
  }
  .studio-report-preview__page img {
    display: block;
    width: 100%;
    height: auto;
  }
  .studio-report-preview figcaption {
    min-width: 0;
  }
  .studio-report-preview__label {
    color: var(--accent-bright);
    font: 400 var(--type-meta)/1.6 var(--font-body);
    letter-spacing: .15em;
    text-transform: uppercase;
    margin: 0 0 8px;
  }
  .studio-report-preview__title {
    font: 400 23px/1.15 var(--font-display);
    color: var(--text);
    margin: 0 0 12px;
  }
  .studio-report-preview__meta {
    font-size: var(--type-meta);
    line-height: 1.7;
    color: var(--text-dim);
    margin: 0 0 12px;
  }
  .studio-report-preview__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    color: var(--accent-bright);
    font-size: var(--type-small);
    line-height: 1.5;
    border-bottom: 1px solid var(--line);
  }
  .studio-covers__areas {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .studio-covers__area {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr);
    gap: 16px;
    padding: 26px 0;
    border-top: 1px solid var(--line);
  }
  .studio-covers__area:last-child {
    border-bottom: 1px solid var(--line);
  }
  .studio-covers__number {
    font: 400 var(--type-body)/1.5 var(--font-body);
    color: var(--accent-bright);
    padding-top: 4px;
  }
  .studio-covers__area h3 {
    font: 400 25px/1.15 var(--font-display);
    margin: 0 0 13px;
    color: var(--text);
  }
  .studio-covers__area p {
    font-size: var(--type-body);
    line-height: 1.7;
    color: var(--text-dim);
    margin: 0;
    max-width: 530px;
  }
  .studio-report-preview a:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 5px;
  }
  @media(min-width:1000px) {
    .studio-covers__layout {
      grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
      gap: clamp(44px,5vw,72px);
      align-items: start;
    }
    .studio-report-preview {
      display: block;
      max-width: none;
      padding: 26px;
      background: var(--surface-panel);
      border: 1px solid var(--line);
    }
    .studio-report-preview__page {
      max-width: 350px;
      margin: 0 auto;
    }
    .studio-report-preview figcaption {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 0 20px;
      margin-top: 22px;
    }
    .studio-report-preview__label {
      grid-column: 1/-1;
    }
    .studio-report-preview__title {
      font-size: 25px;
      margin-bottom: 7px;
    }
    .studio-report-preview__meta {
      grid-column: 1;
      margin: 0;
    }
    .studio-report-preview__link {
      grid-column: 2;
      grid-row: 2/4;
      align-self: end;
    }
    .studio-covers__area {
      grid-template-columns: 42px minmax(0,1fr);
      gap: 24px;
      padding: 32px 0;
    }
    .studio-covers__number {
      font-size: var(--type-ui);
      padding-top: 5px;
    }
    .studio-covers__area h3 {
      font-size: 30px;
    }
  }
  .wizard__panel.studio-submission {
    padding: 0;
    display: grid;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
  }
  .studio-submission .tn-summary {
    padding: 22px 20px;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--line);
    min-width: 0;
  }
  .studio-submission .tn-selected {
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    max-width: none;
  }
  .studio-submission .tn-selected__label {
    display: block;
    font-size: 10px;
    margin-bottom: 12px;
    color: var(--accent-bright);
  }
  .studio-submission .tn-selected__select {
    font-size: var(--type-ui);
    line-height: 1.4;
    padding: 14px 36px 14px 14px;
    width: 100%;
    min-height: 54px;
    white-space: normal;
  }
  .tn-summary__delivery {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
  }
  .tn-summary__mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    color: var(--accent-bright);
    flex: none;
    font-size: 20px;
  }
  .tn-summary__delivery p {
    font-size: var(--type-body);
    line-height: 1.5;
    color: var(--text);
    margin: 0;
  }
  .tn-summary__delivery p span {
    display: block;
    font-size: var(--type-body);
    color: var(--text-dim);
  }
  .tn-summary__note {
    font-size: var(--type-body);
    line-height: 1.7;
    color: var(--text-dim);
    margin: 20px 0 0;
  }
  .studio-submission .tn-workspace {
    padding: 26px 20px;
    min-width: 0;
  }
  .studio-submission .tn-stepper {
    max-width: none;
    margin: 0 0 30px;
    gap: 14px;
    align-items: center;
  }
  .studio-submission .tn-step-dot {
    flex-direction: row;
    gap: 10px;
  }
  .studio-submission .tn-step-dot__circle {
    width: 30px;
    height: 30px;
    font-size: var(--type-meta);
  }
  .studio-submission .tn-step-dot__label {
    font-size: var(--type-meta);
    letter-spacing: .12em;
  }
  .studio-submission .tn-step-line {
    margin: 0;
    top: auto;
    flex: 1;
  }
  .studio-submission .tn-pane__title {
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 10px;
    outline: none;
  }
  .studio-submission .tn-pane__subtitle {
    font-size: var(--type-body);
    line-height: 1.6;
    margin: 0 0 24px;
  }
  .studio-submission .tn-track-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 0 26px;
    width: 100%;
    border: 1px solid var(--line);
    background: var(--bg-deep);
  }
  .studio-submission .tn-track-toggle button {
    min-height: 48px;
    font-size: var(--type-meta);
    padding: 12px 8px;
    letter-spacing: .1em;
  }
  .studio-submission .tn-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .studio-submission .tn-col {
    gap: 22px;
  }
  .studio-submission .form-field {
    margin-bottom: 0;
  }
  .studio-submission .form-label,.studio-submission .tn-focus__title {
    font-size: 10px;
    letter-spacing: .11em;
    line-height: 1.6;
    margin: 0 0 10px;
    display: block;
  }
  .studio-submission .form-input,.studio-submission .form-select,.studio-submission .form-textarea {
    font-size: var(--type-ui);
    line-height: 1.5;
    padding: 14px;
    border: 1px solid var(--line);
    box-shadow: none;
    border-radius: 0;
    min-height: 52px;
  }
  .studio-submission .form-select {
    padding-right: 36px;
  }
  .studio-submission .form-textarea {
    resize: vertical;
  }
  .studio-submission .tn-focus-hint {
    font-size: var(--type-small);
    line-height: 1.65;
    margin-top: 9px;
  }
  .studio-submission .tn-focus-list {
    gap: 8px;
    margin: 0;
  }
  .studio-submission .tn-focus-check {
    padding: 12px;
    min-height: 48px;
    gap: 12px;
    border: 1px solid var(--line);
    font-size: var(--type-body);
    line-height: 1.4;
    background: var(--bg-deep);
  }
  .studio-submission .tn-focus-check.is-selected {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--text);
  }
  .studio-submission .tn-focus-check input {
    width: 20px;
    height: 20px;
  }
  .studio-submission .tn-upload-zone {
    padding: 24px 16px;
    min-height: 180px;
    border-color: var(--accent);
    background: var(--bg-deep);
  }
  .studio-submission .tn-upload-zone__label {
    font-size: var(--type-body);
    line-height: 1.5;
  }
  .studio-submission .tn-upload-zone__hint {
    line-height: 1.6;
  }
  .studio-submission .tn-upload-filename {
    overflow-wrap: anywhere;
  }
  .studio-submission .tn-nav {
    border-top: 1px solid var(--line);
    padding-top: 22px;
    margin-top: 30px;
  }
  .studio-submission .tn-nav .btn {
    min-height: 52px;
    padding: 14px 18px;
    font-size: var(--type-small);
    letter-spacing: .08em;
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
  }
  .studio-submission .tn-nav .btn:hover {
    background: var(--accent-bright);
  }
  .studio-submission .tn-nav .btn::before {
    display: none;
  }
  .studio-submission .tn-nav .btn {
    justify-content: center;
    transition: background-color .18s ease,border-color .18s ease,color .18s ease;
    transform: none;
  }
  .studio-submission .tn-nav .btn:active {
    transform: none;
    background: var(--accent-bright);
  }
  .studio-submission .tn-nav .btn--ghost:hover {
    background: none;
    color: var(--accent-bright);
  }
  .studio-submission .tn-actions {
    padding: 0 20px 26px;
  }
  .studio-submission .tn-actions[hidden] {
    display: none;
  }
  .studio-submission .tn-actions .tn-nav {
    display: none;
    margin: 0;
  }
  .studio-submission .tn-actions .tn-nav.is-active {
    display: flex;
  }
  .studio-submission .tn-nav .btn--ghost {
    background: none;
    color: var(--text-dim);
    border-color: transparent;
    padding-left: 0;
  }
  .studio-submission .tn-nav .btn:disabled {
    opacity: .6;
    cursor: wait;
  }
  .studio-submission .tn-small-print {
    font-size: var(--type-small);
    line-height: 1.7;
    margin: 0;
    color: var(--text-dim);
  }
  .studio-submission .tn-err {
    font-size: var(--type-body);
    line-height: 1.6;
    margin-top: 18px;
  }
  .studio-submission .tn-success {
    text-align: left;
    padding: 24px 0;
  }
  .studio-submission .tn-success p {
    margin-inline: 0;
    max-width: 480px;
  }
  .studio-submission .tn-success__note {
    max-width: 480px!important;
  }
  .studio-submission :is(button,select,input,textarea,[role=button]):focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 3px;
  }
  @media(min-width:760px) {
    .studio-submission .tn-workspace {
      padding: 32px;
    }
    .studio-submission .tn-summary {
      padding: 26px 32px;
    }
    .studio-submission .tn-grid {
      grid-template-columns: 1fr 1fr;
      gap: 26px;
    }
    .studio-submission .tn-track-toggle {
      max-width: 360px;
    }
    .studio-submission .tn-actions {
      padding: 0 32px 32px;
    }
  }
  @media(min-width:1100px) {
    .wizard__panel.studio-submission {
      grid-template-columns: minmax(0,1fr) 320px;
      align-items: stretch;
    }
    .studio-submission .tn-summary {
      grid-column: 2;
      grid-row: 1;
      padding: 34px 24px;
      border-bottom: 0;
      border-left: 1px solid var(--line);
    }
    .studio-submission .tn-workspace {
      grid-column: 1;
      grid-row: 1/3;
      padding: 34px;
    }
    .studio-submission .tn-actions {
      grid-column: 2;
      grid-row: 2;
      padding: 0 24px 34px;
      background: var(--bg-deep);
      border-left: 1px solid var(--line);
      display: flex;
      align-items: flex-end;
    }
    .studio-submission .tn-actions .tn-nav {
      width: 100%;
      padding-top: 24px;
    }
    .studio-submission .tn-actions .btn {
      width: 100%;
    }
    .studio-submission .tn-actions .has-back {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
    .studio-submission .tn-stepper {
      max-width: 340px;
    }
    .studio-submission .tn-pane__title {
      font-size: 32px;
    }
  }
  @media(prefers-reduced-motion:reduce) {
    .studio-submission * {
      scroll-behavior: auto;
      transition: none;
    }
  }
  .tn-hero {
    position: relative;
    min-height: clamp(680px,95svh,960px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
    padding-top: calc(var(--nav-h) + 40px);
    padding-bottom: clamp(56px,8vw,96px);
    overflow: hidden;
    background: #000;
  }
  .tn-hero__bg {
    position: absolute;
    inset: -12% 0;
    z-index: 0;
    will-change: transform;
    background: center/cover no-repeat
    url("/Assets/Website imagery/pexels-cottonbro-5650531_optimised.webp");
  }
  @media not all and (min-width:768px) {
    .tn-hero__bg {background-image:url("/Assets/heroes/tracknotes-mobile.webp");}
  }
  .tn-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(130% 105% at 50% 48%,rgba(10,8,6,.58) 0%,rgba(10,8,6,.40) 45%,rgba(10,8,6,.26) 100%),
    linear-gradient(180deg,rgba(10,8,6,.30) 0%,rgba(10,8,6,.14) 38%,rgba(10,8,6,.54) 100%);
  }
  .tn-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
  }
  .tn-hero h1 {
    font-size: clamp(48px,10vw,128px);
    font-weight: 300;
    letter-spacing: -0.025em;
    line-height: .94;
    margin-block: 16px 0;
  }
  .tn-hero__sub {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(17px,2.1vw,26px);
    line-height: 1.34;
    color: var(--text-dim);
    max-width: 600px;
    margin: clamp(20px,3vw,30px) auto 0;
  }
  .tn-hero__cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: clamp(30px,4vw,44px);
  }
  .tn-hero .eyebrow.reveal {
    transition-delay: 0ms;
  }
  .tn-hero h1.reveal {
    transition-delay: 130ms;
  }
  .tn-hero .tn-hero__sub.reveal {
    transition-delay: 290ms;
  }
  .tn-hero .tn-hero__cta.reveal {
    transition-delay: 450ms;
  }
  .covers__intro {
    max-width: var(--measure);
    margin-bottom: var(--head-gap);
  }
  .covers__intro h2 {
    margin-block: 14px 16px;
  }
  .covers__intro p {
    color: var(--text-dim);
  }
  .tiers-section {
    background: var(--drawer-bg);
  }
  .tn-selected {
    display: block;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--terracotta);
    border-radius: 0;
    background: var(--bg-1);
  }
  .tn-selected__label {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 8px;
  }
  .tn-selected__select {
    width: 100%;
  }
  .sample-band {
    position: relative;
    overflow: hidden;
    background: var(--bg-1);
    min-height: 340px;
    display: flex;
    align-items: center;
  }
  .sample-band .container {
    position: relative;
    z-index: 2;
  }
  .sample-card {
    max-width: 600px;
    background: var(--surface-panel);
    border: 1px solid var(--line);
    padding: clamp(26px,3.5vw,40px);
  }
  .sample-card h2 {
    margin-block: 10px 12px;
  }
  .sample-card__intro {
    color: var(--text-dim);
    font-size: var(--type-body);
    line-height: 1.6;
    margin: 0 0 24px;
    max-width: 440px;
  }
  .sample-card__row {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex-wrap: nowrap;
  }
  .sample-card__thumb {
    flex: 0 0 clamp(124px,42%,198px);
    border: 1px solid var(--line);
    box-shadow: 0 16px 36px rgba(0,0,0,.55);
    transition: transform .35s ease,box-shadow .35s ease;
  }
  .sample-card__thumb img {
    display: block;
    width: 100%;
    height: auto;
  }
  .sample-card__thumb:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 46px rgba(0,0,0,.6);
  }
  .sample-card__opts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .sample-card__opts .dl-btn {
    width: 100%;
    min-width: 0;
    flex: 1 1 0;
  }
  @media(max-width:560px) {
    .sample-card {
      padding: 20px;
    }
    .sample-card__row {
      gap: 13px;
    }
    .sample-card__opts {
      gap: 10px;
    }
  }
  @media(max-width:379px) {
    .sample-card__thumb {
      flex: 0 0 38%;
    }
  }
  @media(max-width:359px) {
    .sample-card__row {
      flex-wrap: wrap;
      align-items: center;
    }
    .sample-card__thumb {
      flex: 0 0 132px;
    }
    .sample-card__opts {
      flex: 1 1 100%;
    }
    .sample-card__opts .dl-btn {
      flex: 0 0 auto;
    }
  }
  .sample-band__grid {
    display: grid;
    gap: clamp(22px,2.4vw,30px);
    align-items: start;
  }
  .sample-band__faq {
    max-width: 600px;
    background: var(--surface-panel);
    border: 1px solid var(--line);
    padding: clamp(26px,3.5vw,40px);
    scroll-margin-top: calc(var(--nav-h) + 28px);
  }
  @media(min-width:1080px) {
    .sample-band__grid {
      grid-template-columns: minmax(0,.9fr) minmax(0,1fr);
    }
    .sample-card,.sample-band__faq {
      max-width: none;
    }
    .sample-card__thumb {
      flex: 0 0 clamp(140px,48%,220px);
    }
  }
  @media(max-width:560px) {
    .sample-band__faq {
      padding: 20px;
    }
  }
  .wizard-section {
    background: var(--drawer-bg);
  }
  .wizard__intro {
    max-width: var(--measure);
    margin: 0 0 clamp(28px,3.5vw,40px);
  }
  .wizard__intro h2 {
    margin-block: 14px 16px;
  }
  .wizard__intro p {
    color: var(--text-dim);
  }
  .wizard__panel {
    --ink: var(--text);
    --ink-dim: var(--text-dim);
    --ink-muted: var(--muted);
    --terracotta: var(--accent);
    --stone: var(--surface-panel);
    --stone-card: var(--bg-deep);
    --stone-3: var(--bg-3);
    --error: var(--error-bright);
    color-scheme: dark;
    max-width: none;
    margin-inline: 0;
    background: var(--surface-panel);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(26px,3.2vw,40px);
    box-shadow: 0 28px 70px rgba(0,0,0,.40);
  }
  @media(max-width:560px) {
    .wizard__panel {
      padding: 22px 18px;
    }
  }
  .wizard__panel #tnWizard {
    max-width: none!important;
    width: 100%;
  }
  .wizard__panel .form-input,
.wizard__panel .form-select,
.wizard__panel .form-textarea {
    background: var(--bg-deep);
    color: var(--text);
    border: 1px solid rgba(0,0,0,.5);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.45);
  }
  .wizard__panel .form-input:focus,
.wizard__panel .form-select:focus,
.wizard__panel .form-textarea:focus {
    border-color: var(--accent);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.45),0 0 0 1px var(--accent);
  }
  .wizard__panel .form-input::placeholder,
.wizard__panel .form-textarea::placeholder {
    color: var(--muted);
  }
  .wizard__panel .form-select option {
    background-color: var(--bg-deep);
    color: var(--text);
  }
  .tn-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  @media(min-width:760px) {
    .tn-grid {
      grid-template-columns: 1fr 1fr;
      column-gap: clamp(28px,4vw,52px);
      row-gap: 24px;
    }
  }
  .tn-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
  }
  .tn-col .tn-focus__title {
    margin-top: 0;
  }
  .tn-col .tn-track-toggle {
    margin-bottom: 0;
  }
  .tn-col .tn-context-textarea {
    margin-bottom: 0;
  }
  .tn-col .tn-small-print {
    margin-bottom: 0;
  }
  .tn-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    margin-bottom: clamp(30px,4vw,44px);
  }
  .tn-topbar .tn-stepper {
    margin-bottom: 0;
    flex: 0 0 300px;
    max-width: 300px;
  }
  .tn-topbar .tn-selected {
    margin-bottom: 0;
    flex: 1 1 320px;
    max-width: 480px;
    min-width: 0;
  }
  @media(max-width:620px) {
    .tn-topbar .tn-stepper {
      flex: 1 1 100%;
      max-width: none;
    }
    .tn-topbar .tn-selected {
      flex: 1 1 100%;
      max-width: none;
    }
  }
  .netlify-hidden {
    display: none;
  }
  .tn-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: clamp(32px,4vw,48px);
    max-width: 400px;
  }
  .tn-step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: none;
  }
  .tn-step-dot__circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    font-family: var(--font-body);
    font-size: var(--type-small);
    color: var(--ink-dim);
    transition: all .3s ease;
    background: var(--stone);
  }
  .tn-step-dot.is-active .tn-step-dot__circle {
    border-color: var(--terracotta);
    background: var(--terracotta);
    color: var(--accent-ink);
    font-weight: 600;
  }
  .tn-step-dot.is-done .tn-step-dot__circle {
    border-color: var(--terracotta);
    background: var(--accent-dim);
    color: var(--terracotta);
  }
  .tn-step-dot__label {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
    white-space: nowrap;
  }
  .tn-step-dot.is-active .tn-step-dot__label {
    color: var(--terracotta);
  }
  .tn-step-line {
    flex: 1;
    height: 1.5px;
    background: var(--line);
    margin-bottom: 24px;
    transition: background .3s;
  }
  .tn-step-line.is-done {
    background: var(--terracotta);
  }
  .tn-pane {
    display: none;
  }
  .tn-pane.is-active {
    display: block;
  }
  .tn-pane__title {
    font-family: var(--font-display);
    font-size: clamp(20px,2.4vw,28px);
    font-weight: 400;
    margin-bottom: 24px;
    color: var(--ink);
  }
  .tn-pane__subtitle {
    font-size: var(--type-body);
    color: var(--ink-dim);
    margin-top: -18px;
    margin-bottom: 24px;
  }
  .tn-track-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 20px;
    width: fit-content;
  }
  .tn-track-toggle button {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 9px 20px;
    color: var(--ink-dim);
    border-right: 1px solid var(--line);
    transition: background .2s,color .2s;
  }
  .tn-track-toggle button:last-child {
    border-right: none;
  }
  .tn-track-toggle button.is-active {
    background: var(--terracotta);
    color: var(--accent-ink);
  }
  .tn-upload-zone {
    border: 1.5px dashed var(--line);
    border-radius: 0;
    padding: clamp(24px,3vw,36px);
    text-align: center;
    cursor: pointer;
    transition: border-color .2s,background .2s;
    margin-bottom: 8px;
    background: var(--stone-card);
  }
  .tn-upload-zone:hover,.tn-upload-zone.is-over {
    border-color: var(--terracotta);
    background: var(--accent-dim);
  }
  .tn-upload-zone__icon {
    font-size: 28px;
    margin-bottom: 8px;
    opacity: 0.4;
  }
  .tn-upload-zone__label {
    font-size: var(--type-body);
    color: var(--ink-dim);
    margin-bottom: 4px;
  }
  .tn-upload-zone__hint {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    color: var(--muted);
    letter-spacing: 0.06em;
  }
  .tn-upload-zone input[type=file] {
    display: none;
  }
  .tn-upload-filename {
    font-family: var(--font-body);
    font-size: var(--type-small);
    color: var(--terracotta);
    letter-spacing: 0.04em;
    margin-top: 6px;
    min-height: 16px;
  }
  .tn-track-mode {
    display: none;
  }
  .tn-track-mode.is-active {
    display: block;
  }
  .tn-focus__title {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
    display: block;
    margin-top: 24px;
  }
  .tn-focus-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 10px;
  }
  .tn-focus-check {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 2px;
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: 1.3;
    color: var(--ink-dim);
    transition: color .18s;
  }
  .tn-focus-check:hover {
    color: var(--ink);
  }
  .tn-focus-check.is-selected {
    color: var(--ink);
  }
  .tn-focus-check input {
    width: 17px;
    height: 17px;
    flex: none;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent);
  }
  .tn-focus-hint {
    font-size: var(--type-small);
    color: var(--muted);
    margin-top: 4px;
  }
  .tn-context-textarea {
    margin-bottom: 20px;
  }
  .tn-small-print {
    font-size: var(--type-small);
    color: var(--muted);
    line-height: 1.55;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-bottom: 24px;
  }
  .tn-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 24px;
  }
  .tn-nav.has-back {
    justify-content: space-between;
  }
  .tn-err {
    font-size: var(--type-body);
    color: var(--error);
    margin-top: 10px;
    display: none;
  }
  .tn-err.is-visible {
    display: block;
  }
  .tn-success {
    text-align: center;
    padding: clamp(48px,6vw,80px) 24px;
  }
  .tn-success__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1.5px solid var(--terracotta);
    background: var(--accent-dim);
    font-size: 24px;
    color: var(--terracotta);
    margin-bottom: 20px;
  }
  .tn-success h3 {
    font-family: var(--font-display);
    font-size: clamp(24px,3.5vw,36px);
    font-weight: 300;
    color: var(--ink);
    margin-bottom: 12px;
  }
  .tn-success p {
    color: var(--ink-dim);
    font-size: var(--type-body);
    line-height: 1.6;
    max-width: 400px;
    margin-inline: auto;
  }
  .tn-success__note {
    font-size: var(--type-body)!important;
    color: var(--ink-muted)!important;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-ink);
    max-width: 400px!important;
  }
  .tn-success__note a {
    color: var(--accent);
    border-bottom: 1px solid rgba(201,164,92,.4);
  }
  .faq__head {
    margin-bottom: clamp(24px,3vw,36px);
  }
  .faq__head h2 {
    margin-block: 12px 0;
  }
  .faq-list {
    display: flex;
    flex-direction: column;
  }
  .faq-item {
    border-bottom: 1px solid var(--line);
  }
  .faq-item:first-child {
    border-top: 1px solid var(--line);
  }
  .faq-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 18px 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: clamp(15px,1.5vw,18px);
    font-weight: 400;
    color: var(--text);
    transition: color .2s;
  }
  .faq-btn:hover {
    color: var(--accent);
  }
  .faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.4,0,.2,1);
  }
  .faq-body p {
    color: var(--text-dim);
    font-size: var(--type-ui);
    line-height: 1.7;
    padding-bottom: 22px;
  }
  .close-cta {
    background: var(--drawer-bg);
    text-align: center;
    padding-block: clamp(80px,12vw,160px);
    position: relative;
    overflow: hidden;
  }
  .close-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("/Assets/Website imagery/pexels-tstudio-34805588-10433481_optimised.webp") center/cover no-repeat;
    opacity: .28;
  }
  .close-cta .container {
    position: relative;
    z-index: 3;
  }
  .close-cta h2 {
    font-style: italic;
    max-width: 900px;
    margin-inline: auto;
    margin-block: 20px 44px;
  }
  .close-cta h2 em {
    font-style: normal;
    color: var(--accent);
  }
  .design-section .tn-concept {
    background: #0e1912;
  }
  .design-section .tn-concept .section-wrap {
    padding-bottom: 35px;
  }
  .design-section .tn-concept h3 {
    font: 400 28px/1.2 var(--display);
    letter-spacing: -.02em;
    margin: 0;
  }
  .design-section .tn-price {
    font: 400 30px/1.16 var(--display);
    letter-spacing: -.02em;
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--gold);
  }
  .design-section .tn-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 13px;
  }
  .design-section .tn-features li {
    position: relative;
    padding-left: 16px;
    font-size: var(--type-body);
    line-height: 1.8;
    color: var(--white);
  }
  .design-section .tn-features li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 3px;
    height: 3px;
    background: var(--gold);
  }
  .design-section .tn-smallprint {
    border-top: 1px solid var(--line);
    padding-top: 20px;
    margin-top: 28px;
    font-size: var(--type-meta);
    line-height: 1.9;
    color: var(--text-dim);
    max-width: 100%;
  }
  .design-section .sample-link {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--display);
    font-size: var(--type-body);
    line-height: 1.3;
    text-decoration: none;
    color: var(--gold);
    min-height: 44px;
    flex-shrink: 0;
  }
  .design-section .sample-link>span {
    display: block;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }
  .design-section .sample-link small {
    display: block;
    text-decoration: none;
    font: 400 10px/1.5 var(--body);
    letter-spacing: .02em;
    margin-top: 8px;
    color: var(--dim);
  }
  .design-section .sample-link svg {
    width: 20px;
    height: 20px;
  }
  .design-section .sample-link:hover {
    color: var(--white);
  }
  .design-section .scope-map {
    background: var(--surface-illustration);
    overflow: hidden;
    padding: 18px 12px;
    height: 165px;
  }
  .design-section .scope-map svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .design-section .map-bar,.design-section .map-dot {
    fill: var(--accent);
  }
  .design-section .map-wire,.design-section .map-frame {
    fill: none;
    stroke: #779b85;
    stroke-width: 1;
  }
  .design-section .map-note {
    opacity: .2;
  }
  .design-section .map-note.is-active {
    opacity: 1;
  }
  .design-section .map-note rect {
    fill: #14291d;
    stroke: var(--accent);
    stroke-width: 1;
  }
  .design-section .map-note path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1;
  }
  .design-section .map-note circle {
    fill: var(--accent);
  }
  .design-section .tn-brief {
    background: var(--surface-review);
  }
  .design-section .brief-layout {
    display: grid;
    grid-template-columns: minmax(0,1.17fr) minmax(0,.83fr);
    gap: 64px;
    align-items: start;
  }
  .design-section .question-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 21px;
  }
  .design-section .question-head>span {
    font: 500 var(--type-meta) var(--mono);
    color: var(--gold);
  }
  .design-section .question-head h3 {
    font-size: 29px;
    letter-spacing: -.02em;
  }
  .design-section .format-options {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
  }
  .design-section .format-options button {
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: start;
    padding: 19px 15px;
    background: none;
    border: 1px solid var(--line);
    min-height: 145px;
  }
  .design-section .format-options strong {
    font: 400 24px/1.2 var(--display);
  }
  .design-section .format-options small {
    color: var(--dim);
    font-size: 10px;
    line-height: 1.7;
    margin-top: 8px;
  }
  .design-section .format-options button>span {
    margin-top: auto;
    padding-top: 18px;
    font: 400 21px var(--display);
    color: var(--gold);
  }
  .design-section .format-options button[aria-pressed=true] {
    border-color: var(--gold);
    background: var(--surface-selected);
  }
  .design-section .format-options button:hover,.design-section .depth-options button:hover {
    background: #ffffff06;
  }
  .design-section .brief-depth {
    margin-top: 37px;
  }
  .design-section .question-intro {
    font-size: var(--type-body);
    color: var(--dim);
    margin: -8px 0 20px;
  }
  .design-section .depth-options {
    border-top: 1px solid var(--line);
  }
  .design-section .depth-options button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: first baseline;
    text-align: left;
    gap: 20px;
    padding: 20px 16px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-left: 2px solid transparent;
  }
  .design-section .depth-options strong {
    font: 400 25px/1.2 var(--display);
    display: block;
  }
  .design-section .depth-options small {
    display: block;
    font-size: var(--type-meta);
    line-height: 1.7;
    color: var(--dim);
    margin-top: 6px;
  }
  .design-section .depth-options .tn-price {
    font-size: 25px;
  }
  .design-section .depth-options button[aria-pressed=true] {
    border-left-color: var(--gold);
    background: var(--surface-selected);
  }
  .design-section .depth-options button[aria-pressed=true] strong {
    color: var(--gold);
  }
  .design-section .brief-included {
    margin-top: 23px;
    padding: 21px 0 0;
    border: 0;
    border-top: 1px solid var(--line);
  }
  .design-section .brief-included .label {
    font-size: 10px;
  }
  .design-section .brief-included p {
    font-size: var(--type-body);
    line-height: 1.9;
    color: var(--dim);
    margin-top: 8px;
  }
  .design-section .brief-summary {
    background: var(--paper);
    color: var(--ink);
    --white: var(--paper-ink);
    --dim: var(--paper-secondary);
    --gold: var(--paper-accent);
    --line: #1835262b;
    position: sticky;
    top: 148px;
  }
  .design-section .brief-summary>header {
    padding: 28px;
    border-bottom: 1px solid var(--line);
  }
  .design-section .brief-summary>header>.label {
    font-size: 10px;
    margin-bottom: 14px;
  }
  .design-section .brief-summary>header>div {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: first baseline;
    gap: 22px;
  }
  .design-section .brief-summary h3 {
    font-size: 30px;
    letter-spacing: -.025em;
  }
  .design-section .brief-summary .tn-price {
    font-size: 30px;
  }
  .design-section .brief-summary-body {
    padding: 0 28px 28px;
  }
  .design-section .brief-summary-facts>div {
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
  }
  .design-section .brief-summary-facts dt {
    font-size: 10px;
    color: var(--paper-label);
  }
  .design-section .brief-summary-facts dd {
    font-size: var(--type-body);
    line-height: 1.7;
    margin-top: 6px;
  }
  .design-section .brief-summary-facts dd small {
    display: block;
    font-size: var(--type-small);
    color: var(--paper-secondary);
    line-height: 1.8;
    margin-top: 5px;
  }
  .design-section .brief-sample {
    padding: 15px 0 22px;
  }
  .design-section .brief-summary .btn {
    width: 100%;
  }
  .design-section .report-excerpt {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    padding: 28px 36px 25px;
  }
  .design-section .excerpt-top {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    border-bottom: 1px solid #18352626;
    padding-bottom: 17px;
    font: 500 10px/1.8 var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--paper-label);
  }
  .design-section .excerpt-body {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 40px;
    padding: 30px 0 27px;
  }
  .design-section .excerpt-index>span:first-child {
    font: 300 50px/1 var(--display);
  }
  .design-section .excerpt-index>p {
    font: 500 10px/1.7 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--paper-label);
    margin-top: 13px;
  }
  .design-section .time-mark {
    display: inline-block;
    margin-top: 24px;
    padding: 6px 11px;
    border: 1px solid #8e703d66;
    background: #c9a45c13;
    font: 500 var(--type-body) var(--mono);
    color: #7c5d2b;
  }
  .design-section .excerpt-body blockquote {
    padding: 0;
    margin: 0;
    font-size: var(--type-body);
    line-height: 1.9;
    color: var(--paper-body);
    max-width: 760px;
  }
  .design-section .excerpt-body blockquote p+p {
    margin-top: 15px;
  }
  .design-section .excerpt-advice {
    font: 400 25px/1.4 var(--display);
    color: var(--paper-ink);
    border-left: 2px solid #ae8745;
    padding-left: 18px;
  }
  .design-section .excerpt-body mark {
    color: var(--paper-ink);
    background: #c9a45c33;
    padding: 1px 4px;
  }
  .design-section .report-excerpt figcaption {
    border-top: 1px solid #18352626;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    font-size: var(--type-meta);
    color: #5b6c58;
  }
  .design-section .report-excerpt figcaption>a {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 400 var(--type-body) var(--display);
    min-height: 44px;
    color: #6f5427;
    text-underline-offset: 5px;
  }
  .design-section .report-excerpt figcaption svg {
    width: 18px;
    height: 18px;
  }
  @container(max-width:1050px) {
    .design-section .brief-layout {
      gap: 32px;
    }
    .design-section .brief-summary>header {
      padding: 22px;
    }
    .design-section .brief-summary-body {
      padding: 0 22px 22px;
    }
    .design-section .brief-summary h3,.design-section .brief-summary .tn-price {
      font-size: 27px;
    }
    .design-section .format-options button {
      padding: 17px 12px;
    }
    .design-section .format-options strong {
      font-size: 22px;
    }
    .design-section .format-options button>span {
      font-size: 19px;
    }
    .design-section .question-head h3 {
      font-size: 26px;
    }
    .design-section .excerpt-body {
      grid-template-columns: 140px 1fr;
      gap: 30px;
    }
  }
  @container(max-width:800px) {
    .design-section .brief-layout {
      grid-template-columns: 1fr;
    }
    .design-section .brief-summary {
      position: static;
      margin-top: 3px;
    }
    .design-section .brief-summary>header>div {
      grid-template-columns: 1fr auto;
    }
    .design-section .brief-summary h3 {
      font-size: 32px;
    }
    .design-section .brief-summary .tn-price {
      font-size: 32px;
    }
    .design-section .brief-summary-facts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 22px;
    }
    .design-section .brief-summary-facts>div:first-child {
      grid-column: 1/-1;
    }
    .design-section .excerpt-body {
      grid-template-columns: 105px 1fr;
      gap: 26px;
    }
    .design-section .report-excerpt {
      padding-inline: 25px;
    }
  }
  @container(max-width:500px) {
    .design-section .tn-concept .section-wrap {
      padding: 32px 20px 27px;
    }
    .design-section .tn-concept .section-head {
      margin-bottom: 30px;
    }
    .design-section .sample-link small {
      font-size: var(--type-meta);
      margin-top: 7px;
    }
    .design-section .scope-map {
      height: 135px;
      padding: 13px 7px;
    }
    .design-section .tn-smallprint {
      font-size: 10px;
      line-height: 1.9;
    }
    .design-section .question-head {
      gap: 12px;
      margin-bottom: 18px;
    }
    .design-section .question-head h3 {
      font-size: 25px;
    }
    .design-section .question-head>span {
      font-size: 10px;
    }
    .design-section .format-options {
      gap: 6px;
    }
    .design-section .format-options button {
      padding: 15px 10px;
      min-height: 139px;
    }
    .design-section .format-options strong {
      font-size: 20px;
    }
    .design-section .format-options small {
      font-size: var(--type-meta);
      line-height: 1.6;
      margin-top: 9px;
    }
    .design-section .format-options button>span {
      font-size: 19px;
      padding-top: 14px;
    }
    .design-section .brief-depth {
      margin-top: 30px;
    }
    .design-section .question-intro {
      font-size: var(--type-small);
    }
    .design-section .depth-options button {
      padding: 18px 12px;
    }
    .design-section .depth-options strong,.design-section .depth-options .tn-price {
      font-size: 23px;
    }
    .design-section .depth-options small {
      font-size: 10px;
    }
    .design-section .brief-included p {
      font-size: var(--type-small);
    }
    .design-section .brief-summary>header {
      padding: 22px 18px;
    }
    .design-section .brief-summary h3,.design-section .brief-summary .tn-price {
      font-size: 28px;
    }
    .design-section .brief-summary>header>div {
      gap: 14px;
    }
    .design-section .brief-summary-body {
      padding: 0 18px 22px;
    }
    .design-section .brief-summary-facts {
      display: block;
    }
    .design-section .brief-summary-facts dd {
      font-size: var(--type-body);
    }
    .design-section .brief-summary-facts dd small {
      font-size: var(--type-meta);
    }
    .design-section .report-excerpt {
      padding: 22px 18px 18px;
    }
    .design-section .excerpt-top {
      display: grid;
      gap: 6px;
      font-size: var(--type-meta);
    }
    .design-section .excerpt-body {
      grid-template-columns: 1fr;
      gap: 21px;
      padding: 23px 0;
    }
    .design-section .excerpt-index {
      display: grid;
      grid-template-columns: 36px 1fr auto;
      align-items: center;
      gap: 12px;
    }
    .design-section .excerpt-index>span:first-child {
      font-size: 32px;
    }
    .design-section .excerpt-index>p {
      font-size: var(--type-meta);
      margin-top: 0;
    }
    .design-section .time-mark {
      font-size: var(--type-meta);
      padding: 6px 9px;
      margin-top: 0;
    }
    .design-section .excerpt-body blockquote {
      font-size: var(--type-body);
      line-height: 1.9;
    }
    .design-section .excerpt-advice {
      font-size: 23px;
      line-height: 1.45;
      padding-left: 13px;
    }
    .design-section .report-excerpt figcaption {
      display: block;
      font-size: 10px;
      line-height: 1.8;
    }
    .design-section .report-excerpt figcaption>a {
      font-size: var(--type-body);
      margin-top: 8px;
    }
  }
  @container(max-width:350px) {
    .design-section .tn-concept .section-wrap {
      padding-inline: 16px;
    }
    .design-section .format-options {
      grid-template-columns: 1fr;
    }
    .design-section .format-options button {
      display: grid;
      grid-template-columns: 1fr auto;
      min-height: 75px;
      row-gap: 5px;
      padding: 14px;
    }
    .design-section .format-options strong {
      grid-column: 1;
      grid-row: 1;
    }
    .design-section .format-options small {
      grid-column: 1;
      grid-row: 2;
      margin-top: 0;
    }
    .design-section .format-options button>span {
      grid-column: 2;
      grid-row: 1/3;
      align-self: center;
      padding: 0;
      font-size: 21px;
    }
    .design-section .depth-options strong,.design-section .depth-options .tn-price {
      font-size: 21px;
    }
    .design-section .brief-summary h3,.design-section .brief-summary .tn-price {
      font-size: 25px;
    }
  }
  @container(max-width:350px) {
    .design-section .brief-summary>header>div {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }
  .design-section .brief-summary>.scope-map {
    height: 160px;
    border-bottom: 1px solid #1835262b;
    padding: 14px 13px;
  }
  .design-section .brief-example {
    border-top: 1px solid var(--line);
    margin-top: 44px;
    padding-top: 30px;
  }
  .design-section .brief-example>header {
    display: grid;
    grid-template-columns: minmax(0,1fr) 380px;
    align-items: end;
    gap: 44px;
    margin-bottom: 24px;
  }
  .design-section .brief-example>header h3 {
    font-size: 34px;
    letter-spacing: -.025em;
    line-height: 1.2;
  }
  .design-section .brief-example>header p {
    font-size: var(--type-small);
    line-height: 1.85;
    color: var(--dim);
    max-width: 380px;
  }
  @container(max-width:1050px) {
    .design-section .brief-example>header {
      grid-template-columns: minmax(0,1fr) 300px;
      gap: 30px;
    }
    .design-section .brief-summary>.scope-map {
      height: 150px;
    }
  }
  @container(max-width:800px) {
    .design-section .brief-example>header {
      grid-template-columns: 1fr;
      gap: 13px;
    }
    .design-section .brief-example>header p {
      max-width: 550px;
    }
    .design-section .brief-example>header h3 {
      font-size: 31px;
    }
    .design-section .brief-summary>.scope-map {
      height: 170px;
    }
  }
  @container(max-width:500px) {
    .design-section .brief-example {
      margin-top: 32px;
      padding-top: 25px;
    }
    .design-section .brief-example>header {
      margin-bottom: 21px;
    }
    .design-section .brief-example>header h3 {
      font-size: 29px;
    }
    .design-section .brief-example>header p {
      font-size: var(--type-meta);
    }
    .design-section .brief-summary>.scope-map {
      height: 140px;
      padding: 13px 9px;
    }
  }
  @media(max-height:900px) {
    .design-section .tn-brief .brief-summary {
      position: static;
    }
  }
  @media(prefers-reduced-motion:reduce) {
    .design-section .map-bar,.design-section .map-note {
      transition: none;
    }
    .design-section .brief-summary>.scope-map .map-bar {
      animation: none;
    }
  }
  .design-section .brief-included>p {
    margin-top: 0;
  }
  .design-section .brief-included .tn-features {
    margin-top: 18px;
    gap: 9px;
  }
  .design-section .brief-included .tn-features li {
    font-size: var(--type-body);
    line-height: 1.8;
    color: var(--dim);
  }
  @container(max-width:500px) {
    .design-section .brief-included .tn-features li {
      font-size: var(--type-small);
    }
  }
  .design-section .tn-brief .format-options {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .design-section .tn-brief .format-options button {
    display: flex;
    min-height: 145px;
  }
  .design-section .tn-brief .format-options button>span {
    padding-top: 18px;
  }
  .design-section .excerpt-carousel {
    min-width: 0;
  }
  .design-section .excerpt-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
  }
  .design-section .excerpt-topics button {
    font: 400 var(--type-body)/1.4 var(--display);
    color: var(--dim);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    min-height: 48px;
    padding: 10px 0;
  }
  .design-section .excerpt-topics button[aria-pressed=true] {
    color: var(--gold);
    border-bottom-color: var(--gold);
  }
  .design-section .excerpt-topics button:hover {
    color: var(--white);
  }
  .design-section .excerpt-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    position: relative;
  }
  .design-section .excerpt-track::-webkit-scrollbar {
    display: none;
  }
  .design-section .excerpt-track:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 5px;
  }
  .design-section .excerpt-slide {
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .design-section .excerpt-slide>.report-excerpt {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .design-section .excerpt-slide .excerpt-body {
    flex: 1;
    align-content: start;
  }
  .design-section .excerpt-slide .excerpt-body blockquote {
    min-width: 0;
  }
  .design-section .excerpt-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 18px;
  }
  .design-section .excerpt-status {
    font: 500 var(--type-small)/1.6 var(--mono);
    color: var(--gold);
  }
  .design-section .excerpt-status span {
    font: 400 var(--type-body)/1.6 var(--body);
    color: var(--dim);
    margin-left: 16px;
  }
  .design-section .excerpt-controls>div {
    display: flex;
    gap: 8px;
  }
  .design-section .excerpt-controls button {
    width: 48px;
    height: 46px;
    background: none;
    border: 1px solid var(--line);
    color: var(--gold);
    font: 400 25px/1 var(--display);
  }
  .design-section .excerpt-controls button:hover:enabled {
    background: #c9a45c16;
    border-color: var(--gold);
  }
  .design-section .excerpt-controls button:disabled {
    opacity: .3;
    cursor: default;
  }
  @container(max-width:500px) {
    .design-section .tn-brief .format-options button {
      padding: 17px 13px;
      min-height: 140px;
    }
    .design-section .tn-brief .format-options strong {
      font-size: 23px;
    }
    .design-section .tn-brief .format-options button>span {
      font-size: 23px;
    }
    .design-section .excerpt-topics {
      gap: 0 18px;
      margin-bottom: 17px;
    }
    .design-section .excerpt-topics button {
      font-size: var(--type-body);
      min-height: 44px;
    }
    .design-section .excerpt-slide .excerpt-body {
      padding-block: 23px;
    }
    .design-section .excerpt-controls {
      gap: 12px;
      padding-top: 14px;
    }
    .design-section .excerpt-status span {
      display: block;
      margin: 3px 0 0;
      font-size: var(--type-meta);
    }
    .design-section .excerpt-controls button {
      width: 44px;
      height: 44px;
    }
  }
  @container(max-width:350px) {
    .design-section .tn-brief .format-options button {
      padding-inline: 10px;
    }
    .design-section .tn-brief .format-options strong,.design-section .tn-brief .format-options button>span {
      font-size: 21px;
    }
    .design-section .tn-brief .format-options button>span {
      align-self: start;
    }
    .design-section .excerpt-topics {
      column-gap: 16px;
    }
    .design-section .excerpt-topics button {
      font-size: var(--type-body);
    }
  }
  .design-section .map-scan {
    fill: none;
    stroke: #edd294;
    stroke-width: 2;
    opacity: 0;
    pointer-events: none;
  }
  .design-section .brief-summary>.scope-map {
    height: 185px;
    padding-block: 17px;
  }
  .design-section .brief-summary-facts>div:first-child {
    grid-column: 1/-1;
  }
  @container(max-width:800px) {
    .design-section .brief-summary>.scope-map {
      height: 180px;
    }
  }
  @container(max-width:500px) {
    .design-section .brief-summary>.scope-map {
      height: 165px;
      padding-block: 16px;
    }
  }
  @media(prefers-reduced-motion:no-preference) {
    .design-section .brief-summary .is-waiting :is(.map-bar,.map-card,.map-dot,.map-stem,.map-frame,.map-wire) {
      opacity: 0;
    }
    .design-section .brief-summary .is-revealed .map-bar {
      transform-box: fill-box;
      transform-origin: center;
      animation: brief-wave-arrive 580ms cubic-bezier(.2,.65,.25,1) both;
      animation-delay: calc(var(--i,0)*6ms + var(--track,0)*110ms);
    }
    .design-section .brief-summary .is-revealed .map-stem {
      stroke-dasharray: 1;
      animation: brief-line-draw 300ms ease-out both;
      animation-delay: calc(var(--note,0)*130ms + 260ms);
    }
    .design-section .brief-summary .is-revealed .map-card {
      transform-box: fill-box;
      transform-origin: center;
      animation: brief-note-arrive 500ms cubic-bezier(.16,1,.3,1) both;
      animation-delay: calc(var(--note,0)*130ms + 390ms);
    }
    .design-section .brief-summary .is-revealed .map-writing {
      stroke-dasharray: 1;
      animation: brief-line-draw 420ms ease-out both;
      animation-delay: calc(var(--note,0)*130ms + 650ms);
    }
    .design-section .brief-summary .is-revealed .map-note .map-dot {
      transform-box: fill-box;
      transform-origin: center;
      animation: brief-dot-arrive 650ms ease-out both;
      animation-delay: calc(var(--note,0)*130ms + 280ms);
    }
    .design-section .brief-summary .is-revealed .map-frame {
      stroke-dasharray: 1;
      animation: brief-line-draw 600ms ease-out both;
      animation-delay: calc(var(--track,0)*120ms + 180ms);
    }
    .design-section .brief-summary .is-revealed .map-wire {
      stroke-dasharray: 1;
      animation: brief-line-draw 1s ease-out both;
    }
    .design-section .brief-summary .is-revealed .map-project .map-dot {
      transform-box: fill-box;
      transform-origin: center;
      animation: brief-dot-arrive 650ms ease-out both;
      animation-delay: calc(var(--track,0)*120ms + 280ms);
    }
    .design-section .brief-summary .is-revealed .map-scan {
      animation: brief-signal-pass 1400ms linear 140ms both;
    }
  }
  @keyframes brief-wave-arrive {
    from {
      opacity: 0;
      transform: scaleY(.12);
    }
    to {
      opacity: 1;
      transform: scaleY(1);
    }
  }
  @keyframes brief-line-draw {
    from {
      opacity: 0;
      stroke-dashoffset: 1;
    }
    to {
      opacity: 1;
      stroke-dashoffset: 0;
    }
  }
  @keyframes brief-note-arrive {
    from {
      opacity: 0;
      transform: translateY(10px) scale(.92);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes brief-dot-arrive {
    0% {
      opacity: 0;
      transform: scale(.2);
    }
    45% {
      opacity: 1;
      transform: scale(1.7);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes brief-signal-pass {
    0% {
      opacity: 0;
      transform: translateX(0);
    }
    12% {
      opacity: .4;
    }
    80% {
      opacity: .3;
    }
    100% {
      opacity: 0;
      transform: translateX(370px);
    }
  }
  .design-section .report-excerpt figcaption {
    justify-content: flex-end;
  }
}

/* Approved review-to-submission workspace. */
@layer page {
  body[data-tracknotes-flow] .tn-hero {min-height:580px;height:72svh;max-height:760px}
  .tn-flow-intro {background:var(--bg-1)}
  .tn-flow-intro>.section-wrap {padding-block:clamp(36px,5vw,64px)}
  .tn-flow-intro-grid {display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,90px);align-items:center}
  .tn-flow-intro .type-section {margin-bottom:20px}
  .tn-flow-intro .type-body+.type-body {margin-top:14px}
  .tn-flow-intro p {color:var(--text-dim)}
  .tn-flow-intro .sidequote {margin:0}
  .tn-flow-intro .sidequote blockquote {font:400 clamp(21px,2vw,28px)/1.45 var(--font-display)}
  .tn-flow-clients .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  @media(prefers-reduced-motion:reduce) {
    .tn-flow-clients .ticker__track-wrap {mask-image:none;-webkit-mask-image:none}
    .tn-flow-clients .ticker__track {width:auto;flex-wrap:wrap;justify-content:center;will-change:auto}
    .tn-flow-clients .ticker__item {font-size:var(--type-body);padding:6px 12px;gap:24px}
    .tn-flow-clients .ticker__item.is-repeat {display:none}
  }
  .tn-flow-proof .brief-example {margin:0;border:0;padding:0}
  .tn-flow-proof .section-head {margin-bottom:32px}
  .tn-flow-proof .report-excerpt figcaption {display:none}
  .tn-flow-proof .excerpt-controls {margin-bottom:24px}
  .tn-flow-proof .tn-flow-downloads {display:flex;gap:12px 28px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px;color:var(--text-dim);font-size:var(--type-body)}
  .tn-flow-downloads>a {color:var(--accent);text-decoration:underline;text-underline-offset:5px;padding-block:8px}
  .tn-flow-checkout {background:var(--surface-review)}
  .tn-flow-desk {border:1px solid var(--line);background:var(--surface-panel);scroll-margin-top:130px}
  .tn-flow-progress {display:flex;gap:24px;padding-inline:clamp(20px,3vw,36px);border-bottom:1px solid var(--line)}
  .tn-flow-progress button {font:500 var(--type-small)/1.5 var(--font-label);letter-spacing:.02em;min-height:58px;position:relative;color:var(--muted);text-align:left}
  .tn-flow-progress button[aria-current=step] {color:var(--text)}
  .tn-flow-progress button[aria-current=step]::after {content:'';position:absolute;bottom:-1px;inset-inline:0;height:2px;background:var(--accent)}
  .tn-flow-progress button:disabled {cursor:default}
  .tn-flow-progress b {color:var(--accent);margin-right:8px;font-weight:500}
  .tn-flow-desk-grid {display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);grid-template-areas:'main receipt';align-items:stretch;background:var(--paper-bg)}
  .tn-flow-main {grid-area:main;min-width:0;padding:clamp(22px,3vw,36px);background:var(--surface-panel)}
  .tn-flow-advance {background:var(--surface-panel)}
  .tn-flow-stage[hidden],.tn-flow-desk [hidden] {display:none!important}
  .tn-flow-stage {animation:tn-flow-arrive .24s ease both;background:var(--surface-panel)}
  .tn-flow-stage>h3 {margin-bottom:12px}
  .tn-flow-stage .tn-flow-heading {margin:0 0 18px;font:400 var(--type-title)/1.2 var(--font-display);letter-spacing:-.02em;outline:none}
  .tn-flow-stage .tn-flow-question+.tn-flow-question {margin-top:32px}
  .tn-flow-formats {display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .tn-flow-formats button {padding:18px;text-align:left;border:1px solid var(--line);display:grid;gap:8px;min-width:0;min-height:124px;align-content:start}
  .tn-flow-formats strong {font:400 22px/1.2 var(--font-display)}
  .tn-flow-formats small {font:400 var(--type-small)/1.6 var(--font-body);color:var(--text-dim)}
  .tn-flow-formats span {font:400 22px/1.2 var(--font-display);color:var(--accent);margin-top:8px}
  .tn-flow-formats [aria-pressed=true],.tn-flow-levels [aria-pressed=true] {background:var(--surface-selected);border-color:var(--accent)}
  .tn-flow-levels {display:grid;gap:0}
  .tn-flow-levels button {display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:82px;padding:16px;border:1px solid transparent;border-top-color:var(--line);text-align:left;min-width:0}
  .tn-flow-levels strong {display:block;font:400 22px/1.2 var(--font-display)}
  .tn-flow-levels small {display:block;color:var(--text-dim);font:400 var(--type-small)/1.5 var(--font-body);margin-top:6px}
  .tn-flow-levels .tn-flow-price {font:400 26px/1.2 var(--font-display);color:var(--accent);white-space:nowrap}
  .tn-flow-question-hint {font-size:var(--type-small);color:var(--text-dim);margin:0 0 12px!important}
  .tn-flow-actions {margin-top:30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .tn-flow-actions .btn {flex:1;min-width:0}
  .tn-flow-actions .btn--ghost {flex:0 0 auto}
  .tn-flow-checkout .tn-flow-receipt.brief-summary {grid-area:receipt;display:block;position:sticky;top:100px;min-width:0;width:100%;margin:0;background:var(--paper-bg);color:var(--paper-ink);border:0;align-self:start}
  .tn-flow-checkout .tn-flow-receipt .tn-flow-receipt-head {padding:28px}
  .tn-flow-receipt-head .label {color:var(--paper-label);margin-bottom:12px}
  .tn-flow-receipt-line {display:flex;gap:20px;justify-content:space-between;align-items:baseline}
  .tn-flow-receipt-line h3 {font:400 var(--type-title)/1.2 var(--font-display);letter-spacing:-.02em;min-width:0}
  .tn-flow-receipt-line .tn-flow-receipt-price {font:400 var(--type-title)/1.2 var(--font-display);color:var(--paper-accent);white-space:nowrap}
  .tn-flow-checkout .tn-flow-receipt .tn-flow-receipt-tools {display:flex;justify-content:flex-start;align-items:center;gap:24px;flex-wrap:wrap}
  .tn-flow-receipt .tn-flow-receipt-details {padding:0 28px 28px}
  .tn-flow-receipt .tn-flow-receipt-copy {font:400 var(--type-body)/1.7 var(--font-body);color:var(--paper-secondary);padding-block:24px;border-bottom:1px solid var(--line-ink)}
  .tn-flow-receipt .tn-flow-receipt-facts {display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding-top:20px;font-size:var(--type-body)}
  .tn-flow-receipt-facts span {color:var(--paper-label);font:500 var(--type-meta)/1.5 var(--font-label);text-transform:uppercase;letter-spacing:.06em}
  .tn-flow-receipt .tn-flow-receipt-sample {display:inline-block;padding-block:10px;margin-top:12px;color:var(--paper-accent);text-decoration:underline;text-underline-offset:4px;font-size:var(--type-body)}
  .tn-flow-receipt .scope-map {padding:26px 18px;min-height:0;height:auto;max-height:none;aspect-ratio:auto;background:var(--surface-illustration)}
  .tn-flow-receipt .scope-map svg {display:block;width:100%;height:auto;max-height:none}
  .tn-flow-receipt .tn-flow-edit,.tn-flow-receipt .tn-flow-receipt-toggle {border:0;background:none;padding:8px 0;min-height:40px;color:var(--paper-accent);text-decoration:underline;text-underline-offset:4px;font:400 var(--type-body)/1.5 var(--font-body)}
  .tn-flow-receipt .tn-flow-receipt-toggle {display:none}
  .tn-flow-form {margin:0}
  .tn-flow-form .tn-flow-fields {display:grid;gap:20px}
  .tn-flow-person {display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .tn-flow-form .form-field {margin:0;min-width:0}
  .tn-flow-form label.form-label {display:block;margin-bottom:9px}
  .tn-flow-form :is(.form-input,.form-select,.form-textarea) {width:100%;border:1px solid var(--control-border);background:var(--surface-input);box-shadow:none;padding:13px 14px;min-height:50px;min-width:0}
  .tn-flow-form .form-textarea {resize:vertical}
  .tn-flow-method {display:flex;gap:0;border-bottom:1px solid var(--line);margin:20px 0 24px}
  .tn-flow-method button {padding:10px 20px;min-height:46px;color:var(--text-dim);border-bottom:2px solid transparent;font-size:var(--type-body)}
  .tn-flow-method [aria-pressed=true] {color:var(--accent);border-color:var(--accent)}
  .tn-flow-help {font:400 var(--type-small)/1.6 var(--font-body);color:var(--text-dim);margin-top:9px!important}
  .tn-flow-upload {display:block;width:100%;padding:24px;border:1px dashed var(--control-border);background:var(--surface-input);text-align:left;font:400 var(--type-ui)/1.5 var(--font-body);color:var(--text)}
  .tn-flow-upload span {display:block;margin-top:5px;font-size:var(--type-small);color:var(--text-dim);overflow-wrap:anywhere}
  .tn-flow-extra {margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .tn-flow-extra>summary {cursor:pointer;min-height:52px;padding-block:16px;color:var(--text-dim);font-size:var(--type-body)}
  .tn-flow-extra>div {display:grid;gap:20px;padding:6px 0 24px}
  .tn-flow-focus {display:grid;gap:12px;grid-template-columns:1fr 1fr}
  .tn-flow-focus label {display:flex;gap:10px;align-items:start;font-size:var(--type-small);color:var(--text-dim)}
  .tn-flow-focus input {accent-color:var(--accent);width:18px;height:18px;flex:none}
  .tn-flow-extra legend {font:500 var(--type-meta)/1.5 var(--font-label);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:14px}
  .tn-flow-extra fieldset {border:0}
  .tn-flow-error {font-size:var(--type-body);line-height:1.6;color:var(--error-bright);margin-top:16px!important}
  .tn-flow-terms {font:400 var(--type-small)/1.65 var(--font-body);color:var(--text-dim);margin-top:18px!important}
  .tn-flow-done {padding-block:36px}
  .tn-flow-done h3 {margin-bottom:16px}
  .tn-flow-done p {color:var(--text-dim);margin-bottom:24px;font-size:var(--type-body);line-height:1.7}
  .tn-flow-faq-grid {display:grid;grid-template-columns:minmax(200px,.6fr) minmax(0,1.4fr);gap:clamp(30px,6vw,80px);align-items:start}
  .tn-flow-faq .faq-list {margin-top:0}
  .tn-flow-faq .faq-body {height:auto;max-height:none;overflow:visible}
  .tn-flow-faq .faq-body[hidden] {display:none}
  .tn-flow-faq .faq__head {margin:0}
  @keyframes tn-flow-arrive {from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media(max-width:900px) {
    .tn-flow-intro-grid,.tn-flow-faq-grid {grid-template-columns:1fr;gap:28px}
    .tn-flow-desk-grid {grid-template-columns:1fr;grid-template-areas:'main' 'receipt'}
    .tn-flow-checkout .tn-flow-receipt.brief-summary {position:static;top:auto}
    .tn-flow-main {display:contents}
    .tn-flow-stage {padding:24px 20px;grid-area:main}
    .tn-flow-stage .tn-flow-actions {margin-bottom:0}
    .tn-flow-desk[data-mode=review] .tn-flow-desk-grid {grid-template-areas:'main' 'receipt' 'advance'}
    .tn-flow-advance {grid-area:advance;padding:20px;margin:0;display:flex}
    .tn-flow-advance .btn {width:100%}
    .tn-flow-desk[data-mode=send] .tn-flow-desk-grid {grid-template-areas:'receipt' 'main'}
    .tn-flow-desk[data-mode=send] .tn-flow-receipt .scope-map {display:none}
    .tn-flow-desk[data-mode=send] .tn-flow-receipt-details {display:none}
    .tn-flow-desk[data-mode=send] .tn-flow-receipt.is-expanded .tn-flow-receipt-details {display:block}
    .tn-flow-desk[data-mode=send] .tn-flow-receipt .tn-flow-receipt-toggle {display:inline-block}
    .tn-flow-desk[data-mode=send] .tn-flow-receipt-head {padding:20px}
    .tn-flow-checkout .tn-flow-receipt .tn-flow-receipt-head {padding:24px 20px}
    .tn-flow-receipt .tn-flow-receipt-details {padding:0 20px 24px}
    .tn-flow-receipt-line {gap:16px}
    .tn-flow-receipt .tn-flow-receipt-tools {display:flex;gap:24px;flex-wrap:wrap}
    .tn-flow-proof .report-excerpt {padding:24px 20px}
  }
  @media(min-width:901px) {
    .tn-flow-advance {padding:0 36px 34px;margin:0;grid-column:1;grid-row:2}
    .tn-flow-advance .btn {width:100%}
    .tn-flow-desk[data-mode=review] .tn-flow-receipt {grid-row:1/3}
  }
  @media(max-width:560px) {
    body[data-tracknotes-flow] .tn-hero {min-height:530px;height:78svh;max-height:650px}
    .tn-flow-person,.tn-flow-focus {grid-template-columns:1fr}
    .tn-flow-progress {gap:18px;padding-inline:20px}
    .tn-flow-progress button {font-size:11px}
    .tn-flow-progress b {margin-right:5px}
    .tn-flow-formats button {padding:14px;min-height:126px}
    .tn-flow-formats strong,.tn-flow-formats span,.tn-flow-levels strong {font-size:20px}
    .tn-flow-levels .tn-flow-price {font-size:24px}
    .tn-flow-receipt-line h3,.tn-flow-receipt-line .tn-flow-receipt-price {font-size:24px}
    .tn-flow-form .tn-flow-actions {display:grid;grid-template-columns:1fr;gap:10px}
    .tn-flow-form .tn-flow-actions .btn--ghost {order:2}
    .tn-flow-proof .tn-flow-downloads {gap:4px 20px}
  }
  @media(prefers-reduced-motion:reduce) {.tn-flow-stage{animation:none}.tn-flow-desk *{scroll-behavior:auto!important}}
}
@layer typography {
}