@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body,
  h1,
  h2,
  h3,
  p,
  ul,
  ol,
  dl,
  dd,
  fieldset {
    margin: 0;
  }

  ul,
  ol {
    padding: 0;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

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

  [hidden] {
    display: none !important;
  }
}

@layer tokens {
  :root {
    color-scheme: light;

    --color-ink: #181510;
    --color-muted: #655f52;
    --color-canvas: #fbf7ec;
    --color-panel: #fffdf7;
    --color-panel-strong: #fff7dc;
    --color-border: #dfd3b8;
    --color-border-strong: #c9a94f;
    --color-gold: #e3ad2f;
    --color-gold-soft: #f7dfa0;
    --color-gold-strong: #c78a14;
    --color-blue: #1f63ad;

    --shadow-panel: 0 18px 50px rgb(55 43 18 / 0.12);
    --shadow-tight: 0 8px 22px rgb(55 43 18 / 0.1);

    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --radius-sm: 0.4rem;
    --radius-md: 0.8rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;

    --app-max: 92rem;
  }
}

@layer base {
  body {
    min-height: 100vh;
    color: var(--color-ink);
    background:
      radial-gradient(circle at 8% 0%, rgb(227 173 47 / 0.18), transparent 20rem),
      radial-gradient(circle at 92% 12%, rgb(247 223 160 / 0.38), transparent 24rem),
      linear-gradient(180deg, var(--color-canvas), #fffdf8 58rem, var(--color-canvas));
    font-family: var(--font-body);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
  }

  a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
  }

  a:hover {
    color: var(--color-gold-strong);
  }

  :focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 4px;
  }

  h1,
  h2,
  h3 {
    line-height: 1.05;
    text-wrap: balance;
  }

  h1,
  h2 {
    font-family: var(--font-display);
    font-weight: 740;
    letter-spacing: -0.035em;
  }

  .panel-heading h2 span {
    display: block;
  }

  h1 {
    font-size: clamp(2.6rem, 5vw, 4.75rem);
  }

  h2 {
    font-size: clamp(1.8rem, 3.4vw, 3rem);
  }

  h3 {
    font-size: 1.15rem;
  }

  p {
    color: var(--color-muted);
    text-wrap: pretty;
  }

  fieldset {
    padding: 0;
    border: 0;
  }

  legend {
    padding: 0;
  }
}

@layer layout {
  .app-container {
    width: min(100% - 1.5rem, var(--app-max));
    margin-inline: auto;
  }

  .app-main {
    padding-block: var(--space-5) var(--space-7);
  }

  .app-shell {
    display: grid;
    gap: var(--space-5);
    max-width: 72rem;
    min-width: 0;
  }

  @media (min-width: 62rem) {
    .app-main {
      min-height: calc(100vh - 7rem);
      padding-block: var(--space-6);
    }
  }
}

@layer components {
  .skip-link {
    position: fixed;
    inset-block-start: var(--space-4);
    inset-inline-start: var(--space-4);
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    color: var(--color-ink);
    background: var(--color-gold-soft);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transform: translateY(-150%);
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    background: rgb(251 247 236 / 0.9);
    border-block-end: 1px solid var(--color-border);
    backdrop-filter: blur(16px);
  }

  .header-shell,
  .footer-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .header-shell {
    min-height: 4.75rem;
    padding-block: var(--space-2);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-ink);
    text-decoration: none;
  }

  .brand-mark {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border: 1px solid rgb(199 138 20 / 0.35);
    border-radius: 50%;
    box-shadow: var(--shadow-tight);
  }

  .brand-copy {
    display: grid;
    line-height: 1.08;
  }

  .brand-copy strong {
    font-weight: 900;
    letter-spacing: -0.03em;
  }

  .site-nav {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-4);
    margin-inline-start: var(--space-5);
    font-size: 0.94rem;
    font-weight: 780;
  }

  .site-nav a:not(.button) {
    color: var(--color-muted);
    text-decoration: none;
  }

  .site-nav a:not(.button):hover {
    color: var(--color-ink);
  }

  .nav-cta {
    margin-inline-start: auto;
  }

  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--color-ink);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .nav-toggle-lines,
  .nav-toggle-lines::before,
  .nav-toggle-lines::after {
    display: block;
    width: 1.2rem;
    height: 2px;
    content: "";
    background: currentColor;
    border-radius: 999px;
  }

  .nav-toggle-lines::before {
    transform: translateY(-0.4rem);
  }

  .nav-toggle-lines::after {
    transform: translateY(0.3rem);
  }

  .js .nav-toggle {
    display: flex;
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.74rem 1rem;
    font-weight: 850;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
  }

  .button-primary {
    color: var(--color-ink);
    background: linear-gradient(180deg, var(--color-gold-soft), var(--color-gold));
    border-color: rgb(199 138 20 / 0.35);
    box-shadow: var(--shadow-tight);
  }

  .button-secondary {
    color: var(--color-ink);
    background: var(--color-panel);
    border-color: var(--color-border);
  }

  .button-wide {
    width: 100%;
  }

  .workspace {
    max-width: 72rem;
    width: 100%;
    min-width: 0;
    margin-inline: auto;
    overflow: hidden;
    background: rgb(255 253 247 / 0.86);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-panel);
  }

  .eyebrow {
    color: var(--color-gold-strong);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .fact-list {
    display: grid;
    gap: var(--space-2);
  }

  .fact-list div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: rgb(255 255 255 / 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .fact-list dt {
    color: var(--color-muted);
    font-weight: 760;
  }

  .fact-list dd {
    font-family: var(--font-mono);
    font-weight: 760;
  }

  .workspace-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-3);
    background: rgb(241 234 216 / 0.68);
    border-block-end: 1px solid var(--color-border);
  }

  .workspace-tab {
    min-height: 2.75rem;
    color: var(--color-muted);
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-weight: 850;
  }

  .workspace-tab[aria-selected="true"] {
    color: var(--color-ink);
    background: var(--color-panel);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-tight);
  }

  .workspace-panel {
    padding: var(--space-5);
  }

  .workspace-panel[hidden] {
    display: none;
  }

  .panel-heading {
    display: grid;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
  }

  .panel-heading > p {
    max-width: 44rem;
  }

  .compact-heading {
    margin-block-end: var(--space-4);
  }

  .shaft-wizard {
    display: grid;
    gap: var(--space-4);
  }

  .shaft-wizard[data-transition="active"][data-transition-direction="forward"] .wizard-stage {
    animation: wizard-stage-forward 256ms ease-out;
  }

  .shaft-wizard[data-transition="active"][data-transition-direction="back"] .wizard-stage {
    animation: wizard-stage-back 256ms ease-out;
  }

  @keyframes wizard-stage-forward {
    from {
      opacity: 0.25;
      transform: translateX(0.9rem);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes wizard-stage-back {
    from {
      opacity: 0.25;
      transform: translateX(-0.9rem);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .decision-trail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    list-style: none;
  }

  .decision-trail button {
    min-height: 2.25rem;
    padding: 0.45rem 0.72rem;
    color: var(--color-muted);
    cursor: pointer;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 820;
  }

  .decision-trail button[aria-current="true"] {
    color: var(--color-ink);
    background: var(--color-gold-soft);
    border-color: var(--color-border-strong);
  }

  .decision-trail button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
  }

  .wizard-stage {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-tight);
  }

  .wizard-stage h3 {
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  }

  .choice-grid,
  .form-grid,
  .compare-grid,
  .info-grid,
  .faq-grid {
    display: grid;
    gap: var(--space-3);
  }

  .choice-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    min-height: 5.4rem;
    padding: var(--space-4);
    color: inherit;
    text-align: left;
    cursor: pointer;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .choice-card {
    transition:
      background 160ms ease,
      border-color 160ms ease,
      box-shadow 160ms ease,
      transform 160ms ease;
  }

  .choice-card:hover,
  .choice-card:focus-visible,
  .choice-card[aria-pressed="true"] {
    background: var(--color-panel-strong);
    border-color: var(--color-border-strong);
  }

  .choice-card:focus-visible {
    box-shadow: 0 0 0 4px rgb(247 223 160 / 0.45);
  }

  .choice-dot {
    position: relative;
    width: 1.12rem;
    height: 1.12rem;
    background: #fffefa;
    border: 2px solid var(--color-gold-strong);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--color-panel);
  }

  .choice-card[aria-pressed="true"] .choice-dot::after {
    position: absolute;
    inset: 0.24rem;
    content: "";
    background: var(--color-gold-strong);
    border-radius: 50%;
  }

  .choice-copy,
  .form-grid label {
    display: grid;
    gap: 0.15rem;
  }

  .choice-copy small,
  .form-note {
    color: var(--color-muted);
  }

  .choice-copy small {
    white-space: nowrap;
  }

  .choice-price {
    justify-self: end;
    padding: 0.54rem 0.72rem;
    white-space: nowrap;
    background: rgb(247 223 160 / 0.62);
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 900;
  }

  .wizard-summary {
    display: grid;
    gap: var(--space-2);
    padding: 0;
    list-style: none;
  }

  .wizard-summary li {
    padding: var(--space-3);
    background: #fffefa;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .form-grid label > span {
    font-size: 0.86rem;
    font-weight: 850;
  }

  input,
  select,
  textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.72rem 0.85rem;
    color: var(--color-ink);
    background: #fffefa;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  textarea {
    resize: vertical;
  }

  .form-wide {
    grid-column: 1 / -1;
  }

  .subsection-heading {
    display: grid;
    gap: var(--space-1);
    margin-block-end: var(--space-4);
  }

  .wizard-actions,
  .send-panel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
  }

  .wizard-actions {
    justify-content: flex-end;
  }

  .wizard-actions:has([data-wizard-back]:not([hidden])) {
    justify-content: space-between;
  }

  .send-panel {
    justify-content: space-between;
  }

  .send-panel {
    align-items: start;
  }

  .send-panel p:first-child {
    flex-basis: 100%;
  }

  .compare-card,
  .info-grid article,
  .faq-group {
    padding: var(--space-4);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-tight);
  }

  .selected-card {
    background: var(--color-panel-strong);
    border-color: var(--color-border-strong);
  }

  .compare-card {
    display: grid;
    gap: var(--space-3);
  }

  .spec-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
  }

  .spec-list li {
    padding: 0.45rem 0.62rem;
    background: #fffefa;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
  }

  .info-grid {
    margin-block-start: var(--space-4);
  }

  .info-grid article {
    box-shadow: none;
  }

  .faq-group {
    display: grid;
    gap: var(--space-3);
  }

  details {
    background: #fffefa;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  summary {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font-weight: 850;
    list-style: none;
  }

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

  summary::after {
    flex: 0 0 auto;
    color: var(--color-gold-strong);
    content: "+";
    font-family: var(--font-mono);
  }

  details[open] summary::after {
    content: "–";
  }

  details p {
    padding: 0 var(--space-4) var(--space-4);
  }

  .site-footer {
    padding-block: var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }

  .footer-shell {
    color: var(--color-muted);
    font-size: 0.92rem;
  }

  @media (min-width: 42rem) {
    .choice-grid,
    .form-grid,
    .compare-grid,
    .info-grid,
    .faq-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 62rem) {
    .js .nav-toggle {
      display: none;
    }

    .panel-heading:has(> p) {
      grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.9fr);
      align-items: start;
    }

    .faq-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 61.999rem) {
    .header-shell {
      flex-wrap: wrap;
    }

    .site-nav {
      flex-basis: 100%;
      flex-direction: column;
      align-items: stretch;
      margin-inline-start: 0;
      padding-block: var(--space-4);
    }

    .js .site-nav {
      display: none;
    }

    .js .site-nav[data-open="true"] {
      display: flex;
    }

    .js .nav-cta {
      margin-inline-start: 0;
    }

    .js .nav-cta,
    .send-panel .button {
      width: 100%;
    }

    .workspace-panel {
      padding: var(--space-4);
    }

    .panel-heading {
      gap: var(--space-3);
      margin-block-end: var(--space-4);
    }

    .workspace-tabs {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-1);
      padding-block-end: var(--space-3);
    }

    .workspace-tab {
      padding-inline: var(--space-2);
      font-size: 0.82rem;
    }

    .choice-card {
      grid-template-columns: auto minmax(0, 1fr);
      row-gap: var(--space-2);
      column-gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
    }

    .choice-copy small {
      white-space: normal;
    }

    .choice-price {
      grid-column: 2;
      justify-self: start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}