:root {
  --seam: #c65844;
  --pen: #c65844;
  --tick: #2E7D32;
  --code-bg: #1f2a1f;
  --code-ink: #e6f0e3;
  --code-dim: #9bb59a;
  --chrome: #eceeee;
  --chrome-dot: #c9cdce;
  --rule: rgba(61, 134, 68, .22);
  --stamp: #c65844;
}

[data-theme="dark"] {
  --seam: #e07a66;
  --pen: #e07a66;
  --tick: #6fbf73;
  --code-bg: #111611;
  --code-ink: #dbe8d9;
  --code-dim: #87a086;
  --chrome: #262626;
  --chrome-dot: #4a4a4a;
  --rule: rgba(111, 191, 115, .22);
  --stamp: #e07a66;
}

.pp-page section { padding-block: 72px; }
.pp-intro { max-width: 46em; margin-bottom: 36px; }
.pp-intro h2 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.8rem); line-height: 1.12; margin-bottom: 14px; }
.pp-intro p { margin: 0; color: var(--fg-2); font-size: 1.05rem; }
.pp-intro-row { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; }
.pp-intro-row > div:first-child { max-width: 40em; }

.pp-hero { position: relative; overflow: hidden; padding-block: 56px 88px !important; }
.pp-hero .gb-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.pp-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pp-copy h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.2rem); line-height: 1.05; }
.pp-copy p { margin: 0; max-width: 34em; color: var(--fg-2); font-size: 1.075rem; }
.pp-ctas { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.pp-fine { font-size: 13.5px; color: var(--fg-2); }

.pp-browser { position: relative; margin: 0 0 0 24px; min-width: 0; }
.pp-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--chrome); border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; }
.pp-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--chrome-dot); }
.pp-url { margin-left: 12px; padding: 4px 12px; border-radius: 999px; background: var(--bg); font-family: var(--mono); font-size: 11.5px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pp-site { border: 1px solid var(--border); border-radius: 0 0 10px 10px; background: var(--bg-2); padding: 0 18px 18px; }
.pp-site-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.pp-site-head strong { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--fg); }
.pp-site-head nav { display: flex; gap: 14px; font-size: 12.5px; color: var(--fg-2); }
.pp-site-head .pp-on { color: var(--fg); border-bottom: 2px solid var(--fg); }
.pp-frame { position: relative; background: var(--paper); border: 2px dashed var(--seam); border-radius: 6px; padding: 18px; }
.pp-frame-head { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--fg-2); letter-spacing: .04em; margin-bottom: 12px; }
.pp-q { margin: 0 0 12px; font-weight: 500; color: var(--fg); }
.pp-answer { min-height: 64px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--fg-2); font-size: 13.5px; }
.pp-marked { display: inline-block; margin-top: 12px; padding: 5px 10px; border-radius: 4px; background: var(--green); color: var(--on-green); font-size: 12.5px; font-weight: 700; }
.pp-site-foot { height: 34px; margin-top: 18px; border-top: 1px solid var(--border); }
.pp-callout { position: absolute; font-family: var(--display); font-size: 15px; line-height: 1.2; color: var(--seam); max-width: 11em; }
.pp-callout-ours { right: -8px; top: 44%; transform: translateX(100%) rotate(-3deg); padding-left: 14px; border-left: 2px solid var(--seam); }
.pp-callout-yours { left: -24px; bottom: -36px; transform: rotate(2deg); color: var(--fg-2); }

.pp-ways { background: var(--wash-2); }
.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.pp-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px 40px; padding: 26px 0; border-top: 1px solid var(--rule); align-items: start; }
.pp-step-text h3 { font-size: 1.5rem; margin: 6px 0 8px; }
.pp-step-text p { margin: 0; color: var(--fg-2); }
.pp-step-no { font-family: var(--mono); font-size: 13px; color: var(--accent-text); letter-spacing: .12em; }
.pp-code { margin: 0; padding: 16px 18px; border-radius: 6px; background: var(--code-bg); color: var(--code-ink); font-family: var(--mono); font-size: 12.5px; line-height: 1.6; overflow-x: auto; white-space: pre; }
.pp-result { grid-column: 2; margin: 0; padding-left: 14px; border-left: 3px solid var(--green); color: var(--fg-2); font-size: 14px; }

.pp-script { position: relative; max-width: 860px; background: var(--paper); border: 1px solid var(--border); border-radius: 4px; padding: 26px 28px 22px 64px; box-shadow: 0 24px 50px -36px var(--shadow); }
.pp-script::before { content: ""; position: absolute; top: 0; bottom: 0; left: 40px; border-left: 2px solid var(--pen); opacity: .45; }
.pp-script-q { margin: 0 0 16px; font-weight: 700; color: var(--fg); }
.pp-script-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; }
.pp-script-answer { margin: 0; color: var(--fg); line-height: 2; text-decoration: underline 1px var(--rule); text-underline-offset: 8px; }
.pp-margin { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-family: var(--display); font-size: 15px; color: var(--pen); }
.pp-margin li { position: relative; padding-left: 26px; transform: rotate(-1deg); }
.pp-margin li::before { position: absolute; left: 0; top: -2px; font-family: var(--body); font-weight: 700; font-size: 17px; }
.pp-margin .pp-tick::before { content: "\2713"; color: var(--tick); }
.pp-margin .pp-miss::before { content: "\2715"; color: var(--pen); }
.pp-script-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--fg-2); font-size: 14px; }
.pp-total { font-family: var(--display); font-size: 30px; color: var(--pen); border: 2px solid var(--pen); border-radius: 50%; padding: 6px 14px; transform: rotate(-4deg); }


.pp-ratecard { position: relative; background: var(--paper); border: 1px solid var(--border); border-radius: 6px; padding: 8px 8px 0; }
.pp-table-wrap { overflow-x: auto; }
.pp-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.pp-table th, .pp-table td { padding: 12px 14px; text-align: left; border-bottom: 1px dashed var(--rule); vertical-align: middle; }
.pp-table tbody th { font-weight: 500; color: var(--fg); width: 30%; }
.pp-tier { vertical-align: bottom !important; padding-top: 22px !important; border-bottom: 2px solid var(--fg) !important; }
.pp-tier-feature { background: var(--wash); }
.pp-tier-name { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 6px; }
.pp-price { display: flex; align-items: baseline; gap: 6px; font-family: var(--display); font-size: 26px; font-weight: 400; color: var(--fg); }
.pp-price-talk { font-family: var(--body); font-size: 15px; font-weight: 700; color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; }
.pp-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pp-yes { color: var(--tick); font-weight: 700; }
.pp-no { color: var(--fg-2); }
.pp-table tbody tr:hover th, .pp-table tbody tr:hover td { background: var(--wash-2); }
.pp-cta-row td { border-bottom: 0; padding-block: 18px 22px; }
.pp-tier-cta { white-space: nowrap; }
.pp-stamp { position: absolute; right: 18px; top: -38px; width: 220px; padding: 12px 14px; border: 2px solid var(--stamp); border-radius: 6px; background: var(--bg); color: var(--stamp); transform: rotate(3deg); font-size: 13px; line-height: 1.35; display: flex; flex-direction: column; gap: 4px; }
.pp-stamp strong { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.pp-notes { margin: 22px 0 0; padding-left: 18px; display: grid; gap: 8px; color: var(--fg-2); font-size: 14.5px; }

.pp-data h2 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.8rem); margin-bottom: 28px; }
.pp-data-list { list-style: none; margin: 0; padding: 0; counter-reset: pp-data; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.pp-data-list li { counter-increment: pp-data; position: relative; padding: 18px 0 18px 54px; border-top: 1px solid var(--border); font-size: 1.05rem; color: var(--fg); }
.pp-data-list li::before { content: counter(pp-data, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-family: var(--mono); font-size: 13px; color: var(--accent-text); letter-spacing: .1em; }
.pp-data-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 26px 0 0; }

.pp-closing { background: var(--green); color: var(--on-green); }
.pp-closing .gb-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.pp-closing h2 { color: var(--on-green); font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1.1; }
.pp-closing .gb-mark { background: transparent; color: var(--highlight); }
.pp-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pp-side p { margin: 0; opacity: .9; }
.pp-closing .gb-btn { background: var(--on-green); color: var(--green-deep); }
.pp-closing .gb-link { color: var(--on-green); }

@media (max-width: 991.98px) {
  .pp-hero .gb-wrap, .pp-closing .gb-wrap { grid-template-columns: minmax(0, 1fr); }
  .pp-browser { margin: 24px 0 40px; }
  .pp-callout-ours { position: static; display: block; transform: none; margin-top: 12px; }
  .pp-callout-yours { position: static; display: block; transform: none; margin-top: 6px; }
  .pp-step { grid-template-columns: minmax(0, 1fr); }
  .pp-result { grid-column: 1; }
  .pp-script-body { grid-template-columns: minmax(0, 1fr); }
  .pp-stamp { position: static; width: auto; transform: none; margin: 8px 8px 16px; }
}

@media (max-width: 575.98px) {
  .pp-page section { padding-block: 52px; }
  .gb-wrap { padding-inline: 16px; }
  .pp-data-list { grid-template-columns: minmax(0, 1fr); }
  .pp-script { padding: 22px 18px 18px 40px; }
  .pp-script::before { left: 24px; }
  .pp-site-head nav { display: none; }
}