#pawtrack-how-page {
      --ink: #16323a;
      --ink-deep: #0f2329;
      --paper: #f7f4ef;
      --white: #ffffff;
      --parent: #cb503a;
      --parent-deep: #a84731;
      --parent-soft: #fff2eb;
      --professional: #15808c;
      --professional-deep: #0e5a63;
      --professional-soft: #eaf7f7;
      --line: rgba(22, 50, 58, .16);
      width: 100%;
      color: var(--ink);
      color-scheme: light;
      font-family: "Plus Jakarta Sans", sans-serif;
      scrollbar-color: var(--professional) var(--paper);
    }
    #pawtrack-how-page * { box-sizing: border-box; }
    #pawtrack-how-page *::selection { background: #bfe6e7; color: var(--ink-deep); }
    #pawtrack-how-page a,
    #pawtrack-how-page button { font: inherit; }
    #pawtrack-how-page a:focus-visible,
    #pawtrack-how-page button:focus-visible,
    #pawtrack-how-page summary:focus-visible { outline: 3px solid var(--professional); outline-offset: 3px; }
    #pawtrack-how-page .pth-site { overflow: clip; border-radius: 18px; background: var(--paper); box-shadow: 0 24px 70px rgba(0,0,0,.16); }

    #pawtrack-how-page .pth-nav { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 72px; padding: 0 clamp(22px, 4vw, 54px); background: var(--paper); }
    #pawtrack-how-page .pth-nav::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 5px; background: linear-gradient(90deg, var(--parent) 0 46%, #84706b 50%, var(--professional) 54% 100%); }
    #pawtrack-how-page .pth-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-family: "Bricolage Grotesque", sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.025em; text-decoration: none; }
    #pawtrack-how-page .pth-logo img { width: 34px; height: 34px; object-fit: contain; }
    #pawtrack-how-page .pth-logo span span { color: var(--parent); }
    #pawtrack-how-page .pth-navlinks { display: flex; justify-content: center; gap: clamp(14px, 2.25vw, 30px); font-size: 13px; font-weight: 700; }
    #pawtrack-how-page .pth-navlinks a { color: var(--ink); text-decoration: none; }
    #pawtrack-how-page .pth-navlinks a[aria-current="page"] { color: var(--professional-deep); }
    #pawtrack-how-page .pth-account-area { display: flex; align-items: center; gap: 8px; }
    #pawtrack-how-page .pth-signin { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 8px 10px; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; }
    #pawtrack-how-page .pth-signin svg { width: 18px; height: 18px; }
    #pawtrack-how-page .pth-account { display: inline-flex; min-height: 42px; align-items: center; padding: 8px 15px; border: 1px solid var(--ink); border-radius: 12px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; }
    #pawtrack-how-page .pth-menu-toggle,
    #pawtrack-how-page .pth-mobile-nav { display: none; }
    #pawtrack-how-page .pth-mobile-nav[hidden] { display: none; }

    #pawtrack-how-page .pth-hero { display: grid; grid-template-columns: minmax(0, .88fr) minmax(500px, 1.12fr); min-height: 650px; }
    #pawtrack-how-page .pth-hero-copy { display: flex; justify-content: center; flex-direction: column; padding: 78px clamp(26px, 5.5vw, 84px) 104px; background: var(--paper); }
    #pawtrack-how-page .pth-hero h1 { max-width: 7.5ch; margin: 0; color: var(--ink-deep); font-size: clamp(54px, 5.8vw, 84px); font-weight: 600; letter-spacing: -.035em; line-height: .96; }
    #pawtrack-how-page .pth-hero-copy > p { max-width: 43ch; margin: 30px 0 0; color: #445c62; font-size: 17px; line-height: 1.62; }
    #pawtrack-how-page .pth-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 34px; }
    #pawtrack-how-page .pth-primary { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 12px; background: var(--ink); color: var(--white); font-weight: 800; text-decoration: none; }
    #pawtrack-how-page .pth-secondary { color: var(--ink); font-size: 14px; font-weight: 800; text-underline-offset: 5px; }

    #pawtrack-how-page .pth-track { display: flex; justify-content: center; flex-direction: column; padding: 72px clamp(30px, 5vw, 78px) 78px; background: var(--ink-deep); color: var(--white); }
    #pawtrack-how-page .pth-track h2 { max-width: 12ch; margin: 0 0 42px; font-size: clamp(38px, 4.4vw, 62px); letter-spacing: -.03em; line-height: 1; }
    #pawtrack-how-page .pth-track-grid { display: grid; grid-template-columns: 1fr 74px 1fr; align-items: stretch; }
    #pawtrack-how-page .pth-rail { display: grid; grid-template-rows: 42px repeat(3, minmax(68px, auto)); }
    #pawtrack-how-page .pth-rail strong { display: flex; align-items: center; font-size: 13px; }
    #pawtrack-how-page .pth-parent-rail strong { color: #f09a89; }
    #pawtrack-how-page .pth-professional-rail strong { color: #8fd3d7; }
    #pawtrack-how-page .pth-rail span { display: flex; align-items: center; border-top: 1px solid rgba(255,255,255,.2); color: #edf5f6; font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; line-height: 1.4; }
    #pawtrack-how-page .pth-parent-rail { text-align: right; }
    #pawtrack-how-page .pth-parent-rail strong,
    #pawtrack-how-page .pth-parent-rail span { justify-content: flex-end; }
    #pawtrack-how-page .pth-meet { position: relative; display: grid; grid-template-rows: 42px repeat(3, minmax(68px, auto)); place-items: center; }
    #pawtrack-how-page .pth-meet::before,
    #pawtrack-how-page .pth-meet::after { content: ""; position: absolute; top: 48px; bottom: 36px; width: 2px; }
    #pawtrack-how-page .pth-meet::before { left: 28px; background: var(--parent); }
    #pawtrack-how-page .pth-meet::after { right: 28px; background: var(--professional); }
    #pawtrack-how-page .pth-meet i { z-index: 1; display: block; width: 12px; height: 12px; border: 3px solid var(--ink-deep); border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px rgba(255,255,255,.44); }
    #pawtrack-how-page .pth-meet .pth-join { width: 22px; height: 22px; background: linear-gradient(90deg, var(--parent) 0 48%, var(--professional) 52% 100%); box-shadow: 0 0 0 5px rgba(255,255,255,.12); }
    #pawtrack-how-page .pth-shared { display: flex; min-height: 62px; align-items: center; justify-content: center; padding: 15px clamp(24px, 5vw, 72px); border-bottom: 1px solid #d9e5e4; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 800; line-height: 1.55; text-align: center; }

    #pawtrack-how-page .pth-prepare { display: grid; grid-template-columns: 1fr 1fr; }
    #pawtrack-how-page .pth-prepare > section { min-height: 440px; padding: clamp(64px, 8vw, 108px) clamp(28px, 7vw, 100px); }
    #pawtrack-how-page .pth-prepare-parent { background: var(--parent-soft); color: var(--parent-deep); }
    #pawtrack-how-page .pth-prepare-professional { background: var(--professional-soft); color: var(--professional-deep); }
    #pawtrack-how-page .pth-prepare h2 { max-width: 12ch; margin: 0; font-size: clamp(38px, 4.6vw, 64px); letter-spacing: -.03em; line-height: 1; }
    #pawtrack-how-page .pth-prepare p { max-width: 41ch; margin: 24px 0 0; color: #4f6469; font-size: 15px; line-height: 1.72; }
    #pawtrack-how-page .pth-prepare ul { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--ink); font-size: 14px; font-weight: 700; }
    #pawtrack-how-page .pth-prepare li { padding-top: 14px; border-top: 1px solid var(--line); }

    #pawtrack-how-page .pth-booking { display: grid; grid-template-columns: minmax(280px, .72fr) 1.28fr; gap: clamp(50px, 9vw, 134px); padding: clamp(84px, 10vw, 140px) clamp(24px, 7vw, 108px); background: var(--paper); }
    #pawtrack-how-page .pth-booking-copy { align-self: start; position: sticky; top: 116px; }
    #pawtrack-how-page .pth-booking h2 { max-width: 9ch; margin: 0; color: var(--ink-deep); font-size: clamp(46px, 5.6vw, 78px); letter-spacing: -.03em; line-height: 1; }
    #pawtrack-how-page .pth-booking-copy p { max-width: 37ch; margin: 25px 0 0; color: #52666b; font-size: 15px; line-height: 1.72; }
    #pawtrack-how-page .pth-booking-list { position: relative; border-top: 1px solid var(--line); }
    #pawtrack-how-page .pth-booking-list::before { content: ""; position: absolute; top: 0; bottom: 0; left: 20px; width: 2px; background: linear-gradient(var(--parent), #84706b 42% 58%, var(--professional)); }
    #pawtrack-how-page .pth-step { position: relative; display: grid; grid-template-columns: 42px minmax(125px, .48fr) 1.52fr; align-items: center; gap: 24px; padding: 31px 0 34px; border-bottom: 1px solid var(--line); }
    #pawtrack-how-page .pth-dot { z-index: 1; width: 14px; height: 14px; justify-self: center; border: 3px solid var(--paper); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px var(--line); }
    #pawtrack-how-page .pth-step-parent .pth-dot { background: var(--parent); }
    #pawtrack-how-page .pth-step-professional .pth-dot { background: var(--professional); }
    #pawtrack-how-page .pth-step-role { display: flex; align-items: center; align-self: stretch; color: var(--ink); font-size: 13px; font-weight: 800; line-height: 1.5; }
    #pawtrack-how-page .pth-step-parent .pth-step-role { color: var(--parent-deep); }
    #pawtrack-how-page .pth-step-professional .pth-step-role { color: var(--professional-deep); }
    #pawtrack-how-page .pth-step h3 { margin: 0 0 10px; color: var(--ink-deep); font-size: clamp(22px, 2vw, 29px); letter-spacing: -.02em; }
    #pawtrack-how-page .pth-step p { max-width: 56ch; margin: 0; color: #52666b; font-size: 14px; line-height: 1.72; }

    #pawtrack-how-page .pth-reviews { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(50px, 9vw, 128px); padding: clamp(76px, 9vw, 118px) clamp(24px, 7vw, 108px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #edf5f2; }
    #pawtrack-how-page .pth-reviews h2 { max-width: 11ch; margin: 0; color: var(--ink-deep); font-size: clamp(42px, 5vw, 68px); letter-spacing: -.03em; line-height: 1; }
    #pawtrack-how-page .pth-reviews-copy { align-self: center; }
    #pawtrack-how-page .pth-reviews-lead { max-width: 30ch; margin: 0; color: var(--professional-deep); font-size: clamp(24px, 3vw, 38px); font-weight: 750; letter-spacing: -.025em; line-height: 1.16; }
    #pawtrack-how-page .pth-reviews-copy p:last-child { max-width: 57ch; margin: 24px 0 0; color: #445c62; font-size: 15px; line-height: 1.75; }

    #pawtrack-how-page .pth-visible { padding: clamp(82px, 10vw, 136px) clamp(24px, 7vw, 108px); background: var(--white); }
    #pawtrack-how-page .pth-visible h2 { max-width: 12ch; margin: 0; color: var(--ink-deep); font-size: clamp(44px, 5.3vw, 74px); letter-spacing: -.03em; line-height: 1; }
    #pawtrack-how-page .pth-visible-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    #pawtrack-how-page .pth-visible-column { padding: 34px clamp(24px, 4vw, 56px) 42px 0; }
    #pawtrack-how-page .pth-visible-column + .pth-visible-column { padding-right: 0; padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid var(--line); }
    #pawtrack-how-page .pth-visible-column h3 { margin: 0 0 24px; font-size: clamp(24px, 2.3vw, 32px); letter-spacing: -.02em; }
    #pawtrack-how-page .pth-visible-column:first-child h3 { color: var(--parent-deep); }
    #pawtrack-how-page .pth-visible-column:last-child h3 { color: var(--professional-deep); }
    #pawtrack-how-page .pth-visible-column ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
    #pawtrack-how-page .pth-visible-column li { padding: 17px 0; border-top: 1px solid var(--line); color: #445c62; font-size: 14px; font-weight: 700; line-height: 1.55; }

    #pawtrack-how-page .pth-change { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(50px, 9vw, 128px); padding: clamp(78px, 9vw, 124px) clamp(24px, 7vw, 108px); background: var(--ink-deep); color: var(--white); }
    #pawtrack-how-page .pth-change h2 { max-width: 10ch; margin: 0; font-size: clamp(42px, 5vw, 70px); letter-spacing: -.03em; line-height: 1; }
    #pawtrack-how-page .pth-change-copy { align-self: center; }
    #pawtrack-how-page .pth-change-copy p { max-width: 55ch; margin: 0; color: #c7d6d8; font-size: 15px; line-height: 1.75; }
    #pawtrack-how-page .pth-change-copy p + p { margin-top: 20px; }

    #pawtrack-how-page .pth-questions { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(48px, 9vw, 130px); padding: clamp(80px, 10vw, 138px) clamp(24px, 7vw, 108px); background: var(--white); }
    #pawtrack-how-page .pth-questions h2 { max-width: 11ch; margin: 0; color: var(--ink-deep); font-size: clamp(42px, 5vw, 70px); letter-spacing: -.03em; line-height: 1; }
    #pawtrack-how-page .pth-faq { border-top: 1px solid var(--line); }
    #pawtrack-how-page .pth-faq details { border-bottom: 1px solid var(--line); }
    #pawtrack-how-page .pth-faq summary { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 20px; color: var(--ink); font-size: 16px; font-weight: 800; cursor: pointer; list-style: none; }
    #pawtrack-how-page .pth-faq summary::-webkit-details-marker { display: none; }
    #pawtrack-how-page .pth-faq summary::after { content: "+"; color: var(--professional); font-size: 24px; font-weight: 500; }
    #pawtrack-how-page .pth-faq details[open] summary::after { content: "−"; }
    #pawtrack-how-page .pth-faq p { max-width: 62ch; margin: -2px 0 24px; color: #52666b; font-size: 14px; line-height: 1.72; }

    #pawtrack-how-page .pth-close { display: grid; grid-template-columns: 1.02fr .98fr; }
    #pawtrack-how-page .pth-close-copy { display: flex; justify-content: center; flex-direction: column; min-height: 380px; padding: clamp(64px, 8vw, 104px) clamp(28px, 7vw, 100px); background: var(--paper); }
    #pawtrack-how-page .pth-close h2 { max-width: 12ch; margin: 0; color: var(--ink-deep); font-size: clamp(42px, 5vw, 70px); letter-spacing: -.03em; line-height: 1; }
    #pawtrack-how-page .pth-close-actions { display: grid; grid-template-columns: 1fr 1fr; min-height: 380px; }
    #pawtrack-how-page .pth-close-actions a { display: flex; align-items: center; justify-content: center; padding: 34px; color: var(--white); font-size: clamp(22px, 2.4vw, 34px); font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; }
    #pawtrack-how-page .pth-close-actions a:first-child { background: var(--parent); }
    #pawtrack-how-page .pth-close-actions a:last-child { background: var(--professional); }

    #pawtrack-how-page .pth-footer { position: relative; padding: clamp(56px, 7vw, 86px) clamp(24px, 6vw, 90px) 28px; background: var(--ink-deep); color: var(--white); }
    #pawtrack-how-page .pth-footer::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 5px; background: linear-gradient(90deg, var(--parent) 0 46%, #84706b 50%, var(--professional) 54% 100%); }
    #pawtrack-how-page .pth-footer-main { display: grid; grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(150px, 1fr)); gap: clamp(34px, 5vw, 72px); padding-bottom: 54px; }
    #pawtrack-how-page .pth-footer-brand { max-width: 29ch; }
    #pawtrack-how-page .pth-footer-wordmark { display: inline-block; margin-bottom: 18px; color: var(--white); font-family: "Bricolage Grotesque", sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -.025em; text-decoration: none; }
    #pawtrack-how-page .pth-footer-wordmark span { color: #e8735c; }
    #pawtrack-how-page .pth-footer-brand p { margin: 0; color: #c9d6d8; font-size: 14px; line-height: 1.7; }
    #pawtrack-how-page .pth-footer-group h3 { margin: 0 0 18px; font-size: 14px; }
    #pawtrack-how-page .pth-footer-links { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
    #pawtrack-how-page .pth-footer-links a { color: #c9d6d8; font-size: 13px; font-weight: 600; text-decoration: none; }
    #pawtrack-how-page .pth-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); color: #aebfc2; font-size: 12px; }
    #pawtrack-how-page .pth-footer-bottom a { color: #dce6e7; text-decoration: none; }

    @media (max-width: 1320px) {
      #pawtrack-how-page .pth-nav { grid-template-columns: 1fr auto; }
      #pawtrack-how-page .pth-navlinks,
      #pawtrack-how-page .pth-account-area { display: none; }
      #pawtrack-how-page .pth-menu-toggle { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--ink); border-radius: 11px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; }
      #pawtrack-how-page .pth-menu-toggle svg { width: 18px; height: 18px; }
      #pawtrack-how-page .pth-mobile-nav { position: absolute; z-index: 10; top: calc(100% + 1px); right: 0; left: 0; display: grid; gap: 2px; padding: 14px 16px 16px; background: var(--white); box-shadow: 0 18px 36px rgba(15,35,41,.16); }
      #pawtrack-how-page .pth-mobile-nav > a { display: flex; min-height: 44px; align-items: center; padding: 9px 10px; border-radius: 9px; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
      #pawtrack-how-page .pth-mobile-nav > a[aria-current="page"] { background: #f0f4f3; color: var(--ink-deep); }
      #pawtrack-how-page .pth-mobile-account { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
      #pawtrack-how-page .pth-mobile-account a { display: flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 10px; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; }
      #pawtrack-how-page .pth-mobile-account a:last-child { background: var(--ink); color: var(--white); }
      #pawtrack-how-page .pth-hero { grid-template-columns: 1fr; }
      #pawtrack-how-page .pth-track { min-height: 560px; }
      #pawtrack-how-page .pth-booking,
      #pawtrack-how-page .pth-reviews,
      #pawtrack-how-page .pth-change,
      #pawtrack-how-page .pth-questions { grid-template-columns: 1fr; }
      #pawtrack-how-page .pth-booking-copy { position: static; }
    }

    @media (max-width: 900px) {
      #pawtrack-how-page .pth-prepare,
      #pawtrack-how-page .pth-visible-grid,
      #pawtrack-how-page .pth-close { grid-template-columns: 1fr; }
      #pawtrack-how-page .pth-visible-column + .pth-visible-column { padding-right: 0; padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
      #pawtrack-how-page .pth-footer-main { grid-template-columns: 1fr 1fr; }
      #pawtrack-how-page .pth-footer-brand { grid-column: 1 / -1; }
      #pawtrack-how-page .pth-footer-links { gap: 2px; }
      #pawtrack-how-page .pth-footer-links a,
      #pawtrack-how-page .pth-footer-bottom a { display: flex; min-height: 44px; align-items: center; }
    }

    @media (max-width: 480px) {
      #pawtrack-how-page .pth-site { border-radius: 12px; }
      #pawtrack-how-page .pth-nav { min-height: 62px; padding-inline: 16px; }
      #pawtrack-how-page .pth-menu-toggle { min-width: 76px; }
      #pawtrack-how-page .pth-hero-copy { padding: 64px 20px 68px; }
      #pawtrack-how-page .pth-hero h1 { max-width: 9ch; font-size: clamp(44px, 12.5vw, 58px); }
      #pawtrack-how-page .pth-hero-actions { align-items: stretch; flex-direction: column; }
      #pawtrack-how-page .pth-secondary { display: inline-flex; min-height: 44px; align-items: center; }
      #pawtrack-how-page .pth-track { min-height: 0; padding: 60px 20px 66px; }
      #pawtrack-how-page .pth-track-grid { grid-template-columns: 1fr 52px 1fr; }
      #pawtrack-how-page .pth-meet::before { left: 17px; }
      #pawtrack-how-page .pth-meet::after { right: 17px; }
      #pawtrack-how-page .pth-rail span { font-size: 13px; }
      #pawtrack-how-page .pth-prepare > section { min-height: 0; padding: 64px 20px; }
      #pawtrack-how-page .pth-booking,
      #pawtrack-how-page .pth-reviews,
      #pawtrack-how-page .pth-visible,
      #pawtrack-how-page .pth-change,
      #pawtrack-how-page .pth-questions { padding-inline: 20px; }
      #pawtrack-how-page .pth-step { grid-template-columns: 32px 1fr; gap: 14px; }
      #pawtrack-how-page .pth-step-role { grid-column: 2; min-height: 0; }
      #pawtrack-how-page .pth-step > div:last-child { grid-column: 2; }
      #pawtrack-how-page .pth-booking-list::before { left: 15px; }
      #pawtrack-how-page .pth-close-copy { min-height: 0; padding: 70px 20px; }
      #pawtrack-how-page .pth-close-actions { grid-template-columns: 1fr; min-height: 0; }
      #pawtrack-how-page .pth-close-actions a { min-height: 150px; }
      #pawtrack-how-page .pth-footer { padding-inline: 20px; }
      #pawtrack-how-page .pth-footer-main { grid-template-columns: 1fr; gap: 34px; padding-bottom: 42px; }
      #pawtrack-how-page .pth-footer-brand { grid-column: auto; }
      #pawtrack-how-page .pth-footer-bottom { align-items: flex-start; flex-direction: column; }
    }

    @media (prefers-reduced-motion: no-preference) {
      #pawtrack-how-page .pth-primary,
      #pawtrack-how-page .pth-account,
      #pawtrack-how-page .pth-close-actions a { transition: transform 160ms ease, filter 160ms ease; }
      #pawtrack-how-page .pth-primary:hover,
      #pawtrack-how-page .pth-account:hover,
      #pawtrack-how-page .pth-close-actions a:hover { transform: translateY(-2px); filter: brightness(.97); }
    }