@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Poppins:wght@400;500;600;700;800&display=swap");

      :root {
        --bg: #fff9f1;
        --bg-warm: #fef4e2;
        --surface: rgba(255, 255, 255, 0.9);
        --surface-solid: #ffffff;
        --surface-soft: #fff8ee;
        --border: #f2d6c8;
        --text: #4a4643;
        --heading: #3f3b38;
        --muted: #606060;
        --muted-2: #857c76;
        --brand: #ec8b61;
        --brand-strong: #de7750;
        --brand-soft: #f49e7f;
        --brand-pale: #fde6da;
        --cream: #fef4e2;
        --sand: #fff7ea;
        --shadow-lg: 0 32px 100px rgba(122, 80, 61, 0.14);
        --shadow-md: 0 24px 70px rgba(122, 80, 61, 0.1);
        --radius-xl: 28px;
        --radius-lg: 22px;
        --radius-md: 18px;
        --container: 1180px;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", sans-serif;
        color: var(--text);
        background:
          radial-gradient(circle at top left, rgba(244, 158, 127, 0.28), transparent 24%),
          radial-gradient(circle at top right, rgba(236, 139, 97, 0.16), transparent 22%),
          linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 42%, var(--bg) 100%);
      }

      a {
        color: inherit;
        text-decoration: none;
      }

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

      .container {
        width: min(var(--container), calc(100% - 2rem));
        margin: 0 auto;
      }

      .section {
        padding: 72px 0;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        border: 1px solid rgba(236, 139, 97, 0.26);
        background: rgba(255, 255, 255, 0.82);
        border-radius: 999px;
        padding: 0.65rem 0.95rem;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--brand-strong);
        box-shadow: 0 10px 30px rgba(236, 139, 97, 0.12);
      }

      .section-heading {
        max-width: 720px;
      }

      .section-heading.center {
        margin: 0 auto;
        text-align: center;
      }

      .section-heading h2 {
        margin: 1rem 0 0;
        font-size: clamp(2rem, 3.5vw, 3rem);
        line-height: 1.08;
        letter-spacing: -0.04em;
        font-family: "Fraunces", Georgia, serif;
        font-weight: 700;
        color: var(--heading);
      }

      .section-heading p {
        margin: 1rem 0 0;
        font-size: 1.08rem;
        line-height: 1.75;
        color: var(--muted);
      }

      .site-header {
        position: sticky;
        top: 0;
        z-index: 30;
        padding-top: 16px;
      }

      .site-header__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.7);
        background: rgba(255, 255, 255, 0.74);
        backdrop-filter: blur(14px);
        padding: 0.9rem 1rem;
        border-radius: 999px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
      }

      .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid rgba(236, 139, 97, 0.28);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.95);
        color: var(--brand-strong);
        cursor: pointer;
        flex: 0 0 auto;
        transition:
          background-color 0.18s ease,
          border-color 0.18s ease;
      }

      .nav-toggle:hover {
        border-color: rgba(236, 139, 97, 0.48);
        background: #fff;
      }

      .nav-toggle__icon {
        position: relative;
        display: block;
        width: 18px;
        height: 2px;
        background: currentColor;
        border-radius: 999px;
        transition: background-color 0.18s ease;
      }

      .nav-toggle__icon::before,
      .nav-toggle__icon::after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        background: currentColor;
        border-radius: 999px;
        transition:
          transform 0.18s ease,
          top 0.18s ease;
      }

      .nav-toggle__icon::before {
        top: -6px;
      }

      .nav-toggle__icon::after {
        top: 6px;
      }

      .nav-toggle[aria-expanded="true"] .nav-toggle__icon {
        background: transparent;
      }

      .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
        top: 0;
        transform: rotate(45deg);
      }

      .nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
        top: 0;
        transform: rotate(-45deg);
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 0.85rem;
      }

      .brand__mark {
        width: 44px;
        height: 44px;
        border-radius: 18px;
        background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 100%);
        color: var(--cream);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        box-shadow: 0 14px 30px rgba(236, 139, 97, 0.22);
      }

      .brand__text strong {
        display: block;
        font-size: 0.95rem;
        color: var(--heading);
      }

      .brand__text span {
        display: block;
        margin-top: 0.15rem;
        font-size: 0.78rem;
        color: var(--muted-2);
      }

      .nav {
        display: none;
        gap: 1.4rem;
        align-items: center;
        color: var(--muted);
        font-size: 0.95rem;
      }

      .nav a {
        display: block;
      }

      .nav a:hover {
        color: var(--text);
      }

      @media (max-width: 979px) {
        .nav {
          position: absolute;
          top: calc(100% + 0.55rem);
          left: 0;
          right: 0;
          z-index: 40;
          flex-direction: column;
          align-items: stretch;
          gap: 0.25rem;
          padding: 0.55rem;
          border: 1px solid var(--border);
          border-radius: var(--radius-lg);
          background: rgba(255, 255, 255, 0.98);
          box-shadow: var(--shadow-md);
        }

        .nav.is-open {
          display: flex;
        }

        .nav a {
          padding: 0.85rem 1rem;
          border-radius: 14px;
          font-weight: 600;
          color: var(--heading);
        }

        .nav a:hover,
        .nav a:focus-visible {
          background: var(--brand-pale);
          color: var(--brand-strong);
        }

        .brand__logo {
          max-width: min(148px, 52vw);
        }

        .hero__copy h1 {
          max-width: none;
        }

        .section {
          padding: 56px 0;
        }

        .preview-shell {
          max-width: 100%;
        }

        .closing__panel {
          padding: 1.75rem 1.25rem;
        }
      }

      .hero {
        padding: 40px 0 48px;
      }

      .hero__grid {
        display: grid;
        gap: 2.5rem;
        align-items: center;
      }

      .hero__copy h1 {
        margin: 1.25rem 0 0;
        font-size: clamp(2.7rem, 6vw, 5rem);
        line-height: 0.98;
        letter-spacing: -0.055em;
        max-width: 13ch;
        font-family: "Fraunces", Georgia, serif;
        color: var(--heading);
      }

      .hero__copy p.lead {
        margin: 1.4rem 0 0;
        max-width: 40rem;
        font-size: 1.12rem;
        line-height: 1.85;
        color: var(--muted);
      }

      .hero__actions,
      .closing__actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-top: 2rem;
      }

      .site-header__actions {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        margin-left: auto;
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 0.95rem 1.35rem;
        border-radius: 999px;
        border: 1px solid transparent;
        font-size: 0.98rem;
        font-weight: 700;
        transition:
          transform 0.18s ease,
          background-color 0.18s ease,
          border-color 0.18s ease,
          color 0.18s ease;
      }

      .button:hover {
        transform: translateY(-1px);
      }

      .button--primary {
        background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
        color: #fff;
        box-shadow: 0 18px 50px rgba(236, 139, 97, 0.26);
      }

      .button--primary:hover {
        background: linear-gradient(135deg, var(--brand-strong) 0%, #cf6944 100%);
      }

      .button--secondary {
        border-color: rgba(236, 139, 97, 0.28);
        background: rgba(255, 255, 255, 0.9);
        color: var(--brand-strong);
      }

      .button--secondary:hover {
        border-color: rgba(236, 139, 97, 0.48);
        color: var(--heading);
      }

      .button--download {
        width: 100%;
        min-height: 58px;
        padding: 1rem 1.5rem;
        font-size: 1.05rem;
        letter-spacing: -0.01em;
        box-shadow: 0 22px 60px rgba(236, 139, 97, 0.34);
        animation: download-glow 2.8s ease-in-out infinite;
      }

      @keyframes download-glow {
        0%,
        100% {
          box-shadow: 0 22px 60px rgba(236, 139, 97, 0.34);
        }

        50% {
          box-shadow: 0 24px 72px rgba(236, 139, 97, 0.48);
        }
      }

      .button--header-cta {
        min-height: 40px;
        padding: 0.55rem 0.95rem;
        font-size: 0.82rem;
        box-shadow: 0 14px 36px rgba(236, 139, 97, 0.28);
      }

      .button--ghost {
        min-height: auto;
        padding: 0.65rem 0.35rem;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        font-weight: 600;
        font-size: 0.92rem;
      }

      .button--ghost:hover {
        transform: none;
        color: var(--brand-strong);
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .button--ghost-light {
        color: rgba(255, 247, 234, 0.92);
      }

      .button--ghost-light:hover {
        color: #fff;
      }

      .cta-band {
        padding: 0 0 40px;
      }

      .cta-band .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        text-align: center;
        padding: 1.6rem 1.25rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: linear-gradient(135deg, rgba(253, 230, 218, 0.72), rgba(255, 255, 255, 0.95));
        box-shadow: var(--shadow-md);
      }

      .cta-band p {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--heading);
      }

      .microcopy {
        margin-top: 1rem;
        font-size: 0.95rem;
        line-height: 1.6;
        color: var(--muted-2);
      }

      .hero__stats {
        display: grid;
        gap: 1rem;
        margin-top: 2rem;
      }

      .glass-card,
      .card,
      .faq,
      .comparison,
      .step,
      .example-panel {
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--surface-solid);
        box-shadow: var(--shadow-md);
      }

      .glass-card {
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(10px);
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);
      }

      .hero__stat {
        padding: 1.1rem 1rem;
      }

      .hero__stat strong {
        display: block;
        font-size: 1.7rem;
        letter-spacing: -0.04em;
        color: var(--heading);
      }

      .hero__stat span {
        display: block;
        margin-top: 0.4rem;
        font-size: 0.95rem;
        line-height: 1.55;
        color: var(--muted);
      }

      .preview-shell {
        position: relative;
        max-width: 560px;
        margin: 0 auto;
      }

      .preview-shell::before,
      .preview-shell::after {
        content: "";
        position: absolute;
        border-radius: 999px;
        filter: blur(42px);
        opacity: 0.7;
        z-index: 0;
      }

      .preview-shell::before {
        width: 140px;
        height: 140px;
        left: -24px;
        top: 54px;
        background: rgba(244, 158, 127, 0.55);
      }

      .preview-shell::after {
        width: 180px;
        height: 180px;
        right: -18px;
        bottom: 30px;
        background: rgba(236, 139, 97, 0.28);
      }

      .preview {
        position: relative;
        z-index: 1;
        padding: 1.1rem;
        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.78);
        backdrop-filter: blur(12px);
        box-shadow: 0 30px 120px rgba(15, 23, 42, 0.18);
      }

      .phone-frame {
        background: #7a5c4d;
        border-radius: 30px;
        padding: 0.45rem;
      }

      .phone-screen {
        border-radius: 26px;
        padding: 1.25rem;
        background:
          radial-gradient(circle at top, rgba(244, 158, 127, 0.22), transparent 36%),
          linear-gradient(180deg, #fffdf8 0%, #fff9f1 46%, #fef4e2 100%);
      }

      .preview__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
      }

      .preview__header h3 {
        margin: 0.45rem 0 0;
        font-size: 2rem;
        letter-spacing: -0.04em;
        font-family: "Fraunces", Georgia, serif;
        color: var(--heading);
      }

      .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: 0.52rem 0.85rem;
        font-size: 0.76rem;
        font-weight: 700;
        background: #fff;
        color: var(--muted);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
      }

      .mini-label,
      .mini-title {
        margin: 0;
      }

      .mini-label {
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--brand-strong);
      }

      .signal-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin-top: 1.2rem;
      }

      .signal {
        border: 1px solid transparent;
        border-radius: 20px;
        padding: 0.85rem 0.8rem;
      }

      .signal small {
        display: block;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        opacity: 0.82;
      }

      .signal strong {
        display: block;
        margin-top: 0.35rem;
        font-size: 0.95rem;
      }

      .signal--amber {
        background: #fff3ea;
        border-color: #f8c1aa;
        color: #bb6846;
      }

      .signal--rose {
        background: #fde6da;
        border-color: #f6b599;
        color: #b55a3f;
      }

      .signal--sky {
        background: #fff9ef;
        border-color: #f3d4b2;
        color: #8d6b57;
      }

      .signal--emerald {
        background: #fff6f1;
        border-color: #f3c7b4;
        color: #7d695d;
      }

      .recommendation {
        margin-top: 1rem;
        border: 1px solid var(--border);
        border-radius: 24px;
        background: #fff;
        padding: 1rem;
      }

      .recommendation p {
        margin: 0.5rem 0 0;
        color: var(--muted);
        line-height: 1.7;
      }

      .two-column {
        display: grid;
        gap: 1.5rem;
      }

      .list-panel {
        padding: 1.7rem;
      }

      .bullet-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 1rem;
      }

      .bullet-list li {
        display: flex;
        align-items: flex-start;
        gap: 0.9rem;
        color: var(--muted);
        line-height: 1.75;
      }

      .bullet-list li::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: var(--brand);
        margin-top: 0.55rem;
        flex: 0 0 auto;
      }

      .cards-grid {
        display: grid;
        gap: 1.25rem;
        margin-top: 2.5rem;
      }

      .card {
        padding: 1.55rem;
      }

      .card h3 {
        margin: 0;
        font-size: 1.28rem;
        letter-spacing: -0.03em;
        color: var(--heading);
      }

      .step h3 {
        margin: 1rem 0 0;
        font-size: 1.28rem;
        letter-spacing: -0.03em;
        color: var(--heading);
      }

      .card p,
      .step p {
        margin: 0.7rem 0 0;
        line-height: 1.75;
        color: var(--muted);
      }

      .example-layout {
        display: grid;
        gap: 1.5rem;
        align-items: center;
      }

      .example-panel {
        overflow: hidden;
      }

      .example-panel__top {
        padding: 1.6rem;
        border-bottom: 1px solid #f1f5f9;
        background: linear-gradient(135deg, #fde6da 0%, #fff2d5 52%, #fff7ea 100%);
      }

      .example-panel__top h3 {
        margin: 0.7rem 0 0;
        font-size: 2rem;
        letter-spacing: -0.04em;
        font-family: "Fraunces", Georgia, serif;
        color: var(--heading);
      }

      .example-panel__top-row {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .example-panel__body {
        padding: 1.6rem;
        display: grid;
        gap: 1.25rem;
      }

      .split-cards {
        display: grid;
        gap: 1rem;
      }

      .soft-box,
      .soft-box--green,
      .soft-box--amber {
        padding: 1.15rem;
        border-radius: 24px;
      }

      .soft-box {
        background: #fff9f3;
      }

      .soft-box--green {
        background: #fff2ea;
      }

      .soft-box--amber {
        background: #fff4e7;
        border: 1px solid #f7d3b6;
      }

      .soft-box strong,
      .soft-box--green strong,
      .soft-box--amber strong {
        display: block;
        margin-top: 0.6rem;
        font-size: 1.05rem;
        line-height: 1.55;
      }

      .comparison-grid,
      .steps-grid {
        display: grid;
        gap: 1.25rem;
        margin-top: 2.5rem;
      }

      .comparison,
      .step {
        padding: 1.6rem;
      }

      .comparison__badge {
        display: inline-flex;
        border-radius: 999px;
        padding: 0.5rem 0.85rem;
        font-size: 0.8rem;
        font-weight: 700;
      }

      .comparison--before {
        background: #fff;
      }

      .comparison--before .comparison__badge {
        background: #fff2ea;
        color: #9a5d46;
      }

      .comparison--after {
        border-color: #f2c1ab;
        background: rgba(253, 230, 218, 0.72);
      }

      .comparison--after .comparison__badge {
        background: #ec8b61;
        color: #fff;
      }

      .comparison ul {
        list-style: none;
        padding: 0;
        margin: 1.35rem 0 0;
        display: grid;
        gap: 1rem;
      }

      .comparison li {
        display: flex;
        gap: 0.85rem;
        align-items: flex-start;
        line-height: 1.72;
        color: var(--muted);
      }

      .comparison li::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 999px;
        margin-top: 0.55rem;
        flex: 0 0 auto;
      }

      .comparison--before li::before {
        background: #94a3b8;
      }

      .comparison--after li::before {
        background: var(--brand);
      }

      .context-card {
        padding: 2rem 1.5rem;
      }

      .step__number {
        display: inline-block;
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--brand-strong);
      }

      .faq-stack {
        display: grid;
        gap: 1rem;
        margin-top: 2.5rem;
      }

      .faq {
        padding: 1.35rem 1.4rem;
      }

      .faq summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        font-weight: 700;
        font-size: 1.08rem;
      }

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

      .faq summary span:last-child {
        font-size: 1.6rem;
        color: var(--brand-strong);
        transition: transform 0.18s ease;
      }

      .faq[open] summary span:last-child {
        transform: rotate(45deg);
      }

      .faq p {
        margin: 1rem 0 0;
        color: var(--muted);
        line-height: 1.75;
      }

      .closing {
        padding: 0 0 88px;
      }

      .closing__panel {
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 34px;
        padding: 2rem 1.5rem;
        color: #fff;
        background: linear-gradient(135deg, #ec8b61 0%, #de7750 48%, #c96743 100%);
        box-shadow: 0 30px 120px rgba(187, 104, 70, 0.28);
      }

      .closing__panel h2 {
        margin: 0.8rem 0 0;
        font-size: clamp(2rem, 3vw, 3rem);
        line-height: 1.08;
        letter-spacing: -0.04em;
        font-family: "Fraunces", Georgia, serif;
      }

      .closing__panel p {
        margin: 1rem 0 0;
        max-width: 42rem;
        line-height: 1.8;
        color: rgba(226, 232, 240, 0.94);
      }

      .closing .eyebrow {
        background: rgba(255, 255, 255, 0.08);
        color: #fff7ea;
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow: none;
      }

      .closing .button--download {
        animation: none;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
      }

      .closing .button--primary {
        background: #fff7ea;
        color: var(--brand-strong);
      }

      .closing .button--primary:hover {
        background: #f8fafc;
      }

      .closing .button--secondary {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.18);
        color: #fff;
      }

      .closing .button--secondary:hover {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.3);
      }

      @media (min-width: 720px) {
        .container {
          width: min(var(--container), calc(100% - 3rem));
        }

        .hero__actions,
        .closing__actions {
          flex-direction: row;
          flex-wrap: wrap;
          align-items: center;
        }

        .hero__actions .button--download,
        .closing__actions .button--download,
        .cta-band .button--download {
          width: auto;
          min-width: 240px;
        }

        .hero__stats,
        .split-cards,
        .comparison-grid,
        .steps-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

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

        .example-panel__top-row {
          flex-direction: row;
          align-items: flex-start;
          justify-content: space-between;
        }
      }

      @media (min-width: 980px) {
        .nav-toggle {
          display: none;
        }

        .site-header__actions {
          margin-left: 0;
          order: 3;
        }

        .button--header-cta {
          min-height: 44px;
          padding: 0.7rem 1.2rem;
          font-size: 0.92rem;
        }

        .nav {
          display: flex;
          position: static;
          flex-direction: row;
          align-items: center;
          order: 2;
          margin-left: auto;
          padding: 0;
          border: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
        }

        .nav a {
          display: inline;
          padding: 0;
          border-radius: 0;
          font-weight: 400;
          color: var(--muted);
        }

        .nav a:hover,
        .nav a:focus-visible {
          background: transparent;
          color: var(--text);
        }

        .hero {
          padding: 56px 0 72px;
        }

        .hero__grid,
        .two-column,
        .example-layout {
          grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
        }

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

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

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

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

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

        .closing__panel {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 2rem;
          align-items: center;
          padding: 2.6rem 3rem;
        }

        .closing__actions {
          flex-direction: column;
          width: 240px;
        }
      }

      .brand__logo {
        width: auto;
        height: 44px;
        object-fit: contain;
      }

      .brand__logo--footer {
        height: 52px;
      }

      .site-footer {
        padding: 0 0 48px;
      }

      .site-footer__inner {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
        text-align: center;
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: rgba(255, 255, 255, 0.82);
        padding: 2rem 1.5rem;
        box-shadow: var(--shadow-md);
      }

      .site-footer__brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
      }

      .site-footer__brand p {
        margin: 0;
        max-width: 28rem;
        line-height: 1.7;
        color: var(--muted);
        font-size: 0.95rem;
      }

      .site-footer__links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem 1.25rem;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .site-footer__links a {
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--brand-strong);
      }

      .site-footer__links a:hover {
        color: var(--heading);
      }

      .site-footer__copy {
        margin: 0;
        font-size: 0.85rem;
        color: var(--muted-2);
      }

      .legal-page {
        padding: 32px 0 72px;
      }

      .legal-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--surface-solid);
        padding: 2rem 1.5rem;
        box-shadow: var(--shadow-md);
      }

      .legal-card h1 {
        margin: 1rem 0 0;
        font-size: clamp(2rem, 4vw, 2.75rem);
        line-height: 1.1;
        letter-spacing: -0.04em;
        font-family: "Fraunces", Georgia, serif;
        color: var(--heading);
      }

      .legal-card > p:first-of-type {
        margin-top: 1.25rem;
        color: var(--muted);
        line-height: 1.75;
      }

      .legal-card h2 {
        margin: 2rem 0 0;
        font-size: 1.25rem;
        color: var(--heading);
      }

      .legal-card h3 {
        margin: 1.35rem 0 0;
        font-size: 1.05rem;
        color: var(--heading);
      }

      .legal-card p,
      .legal-card li {
        margin: 0.85rem 0 0;
        line-height: 1.75;
        color: var(--muted);
      }

      .legal-card ul {
        margin: 0.85rem 0 0;
        padding-left: 1.25rem;
      }

      .legal-card a {
        color: var(--brand-strong);
        font-weight: 600;
      }

      .legal-card a:hover {
        color: var(--heading);
      }

      .back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--brand-strong);
      }

      .back-link:hover {
        color: var(--heading);
      }

      @media (min-width: 720px) {
        .legal-card {
          padding: 2.5rem 2.75rem;
        }
      }