/* Shared public resources. Commerce/account forms retain their existing layout. */
body.pp-design-pilot {
  --pp-design-space: 24px;
  --pp-design-rule: #d6e1e7;
  --pp-design-focus: #155b83;
}
.pp-design-pilot #content .entry-title {font-family:var(--pp-heading);text-wrap:balance;margin-bottom:12px}
.pp-design-pilot .pp-breadcrumb {margin-bottom:20px}
.pp-design-pilot #content .entry-content h2 {text-wrap:balance}
.pp-design-pilot #content .entry-content h3 {text-wrap:balance}
.pp-design-pilot #content .entry-content section {min-width:0}
.pp-design-pilot #content .entry-content h2[id],
.pp-design-pilot #content .entry-content h3[id] {scroll-margin-top:24px}
.pp-design-pilot #content .entry-content a {text-decoration-thickness:1px}
.pp-design-pilot #content a:focus-visible,
.pp-design-pilot #content button:focus-visible {outline:3px solid var(--pp-design-focus);outline-offset:4px}
.pp-design-pilot #content ::selection {background:#ffe39a;color:#19354a}
.pp-design-pilot #content .pp-actions {gap:12px;align-items:stretch}
.pp-design-pilot #content .pp-actions a {min-height:48px}
.pp-design-pilot #content .pp-offer {border-left-width:1px;background:#fff8e5}
.pp-design-pilot .pp-purchase-row {gap:18px}
.pp-design-pilot .pp-price,.pp-design-pilot .pp-choice-price {font-variant-numeric:tabular-nums}

/* The real sample sheets lead the comparison; text and prices share a baseline. */
.pp-design-pilot .pp-product-choices {gap:24px;margin:24px 0 32px;grid-template-columns:repeat(3,minmax(0,1fr))}
.pp-design-pilot .pp-product-choices>section {padding:20px;border:1px solid var(--pp-design-rule);border-radius:12px;background:#fff}
.pp-design-pilot .pp-product-choices .pp-choice-preview {height:294px;gap:12px;margin:0 0 20px;padding:12px 0;background:#f7fafb;border-radius:8px}
.pp-design-pilot #content .pp-choice-preview>p {display:contents;margin:0}
.pp-design-pilot .pp-choice-preview picture {display:contents}
.pp-design-pilot .pp-choice-preview img {width:210px;height:auto;max-height:272px;max-width:86%;object-fit:contain;box-shadow:2px 5px 12px #19354a17;border:0}
.pp-design-pilot .pp-choice-preview-both img {width:43%;max-width:130px;max-height:242px}
.pp-design-pilot #content .pp-choice-body h2 {font-size:25px;margin:0 0 8px}
.pp-design-pilot .pp-choice-body {margin-bottom:20px}
.pp-design-pilot #content .pp-choice-body p {margin:0 0 8px;line-height:1.45}
.pp-design-pilot #content .pp-choice-price {margin:0 0 14px}
.pp-design-pilot .pp-choice-footer {margin-top:auto}
.pp-design-pilot #content .pp-choice-footer .pp-button {min-height:48px;padding:12px}
.pp-design-pilot .pp-choice-preview:hover {background:#eef5f7}
.pp-design-pilot #content .pp-panel {border-left-width:1px;border-radius:12px}
.pp-design-pilot .pp-cards:not(.pp-product-choices) {gap:24px;align-items:stretch}
.pp-design-pilot .pp-cards:not(.pp-product-choices)>section {padding:24px;border-radius:12px}
.pp-design-pilot .pp-cards:not(.pp-product-choices)>section>a.pp-button:last-child {margin-top:auto}
.pp-design-pilot #content .pp-cards:not(.pp-product-choices)>section>p {line-height:1.55}
.pp-design-pilot #content .pp-panel {padding:24px}
.pp-design-pilot .pp-letter {min-width:0}
.pp-design-pilot .pp-pete-note {padding:18px 22px;background:#fffaf0;border-radius:12px;gap:20px}
.pp-design-pilot .pp-note-pete {width:54px;height:81px}
.pp-design-pilot #content .pp-pete-note .pp-pete-quote {font-size:22px}
.pp-design-pilot #content .pp-pete-note p:last-child {max-width:78ch;font-size:15px}

/* Hub: begin with a useful choice, then the familiar Pete note. */
.pp-design-hub #content .entry-content>p:first-child {max-width:80ch;margin-bottom:16px}
.pp-design-start {display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:12px 0 24px}
.pp-design-downloads {display:flex;gap:20px;flex-wrap:wrap}
.pp-design-pilot #content .pp-design-downloads a {display:inline-flex;align-items:center;min-height:44px}
.pp-design-hub #both {scroll-margin-top:24px}

/* Product: retain the offer, show the sheet at a useful and comfortable size. */
.pp-design-product-lead {grid-template-columns:minmax(0,1fr) 320px;gap:40px;margin-top:0}
.pp-design-product-lead>div>p:first-child {font-size:18px;line-height:1.55;max-width:64ch}
.pp-design-product #content .pp-design-product-lead ul {margin-top:16px;margin-bottom:20px}
.pp-design-product #content .pp-design-product-lead li {line-height:1.5;margin:8px 0}
.pp-design-product-lead figure {padding:0;border:0;border-radius:0;width:100%;max-width:320px;justify-self:center}
.pp-design-product-lead figure img {box-shadow:3px 7px 18px #19354a16;border:1px solid var(--pp-design-rule)}
.pp-design-product-lead figcaption {padding-top:12px;font-size:14px;text-align:center}
.pp-design-product #content .pp-offer {padding:18px 20px;margin:20px 0 16px}
.pp-design-product .pp-design-product-lead .pp-actions {display:flex;margin:12px 0}
.pp-design-product #content .pp-design-product-lead .pp-actions a {background:white;color:var(--pp-blue);font-size:14px;padding:10px 14px}

/* Samples: six complete, uncropped pages, with small familiar character art. */
.pp-design-samples .pp-sample-intro {position:relative;padding:20px 130px 20px 24px;background:#fffaf0;border:1px solid #eadbb5;border-radius:12px}
.pp-design-mascot {position:absolute;right:28px;top:22px;width:72px;height:121px;object-fit:contain;margin:0}
.pp-design-samples #content .pp-sample-intro>p:first-of-type {max-width:72ch}
.pp-design-samples #content .pp-sample-intro>p:has(.pp-design-mascot) {margin:0}
.pp-design-samples #content .pp-sample-intro .pp-note {margin:12px 0 0}
.pp-design-samples .pp-sample-section {margin:32px 0 40px;padding-top:24px}
.pp-design-samples #content .pp-sample-section>h2 {margin:0 0 12px;font-size:26px}
.pp-design-samples .pp-sample-section>p {max-width:76ch}
.pp-design-samples .pp-sample-contents {gap:24px;margin:24px 0}
.pp-design-samples .pp-sample-sheet img {box-shadow:2px 5px 12px #19354a17;border:1px solid var(--pp-design-rule)}
.pp-design-samples .pp-sample-sheet figcaption {font-size:15px;font-weight:600;color:var(--pp-ink)}

/* Lesson: demonstration and paper practice belong together. */
.pp-design-lesson #content .entry-byline {display:none}
.pp-design-lesson-stage {display:grid;grid-template-columns:minmax(0,1.95fr) minmax(280px,1fr);gap:28px;align-items:start;margin:24px 0}
.pp-design-demo-column,.pp-design-paper-column {min-width:0}
.pp-design-video {margin:0;float:none;width:100%}
.pp-design-player {position:relative;aspect-ratio:4/3;background:white;border:1px solid var(--pp-design-rule);box-sizing:border-box}
.pp-design-player iframe {position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.pp-design-video figcaption {font-size:14px;line-height:1.5;text-align:right;margin:10px 0 0}
.pp-design-lesson #content .pp-related {padding:20px 0 0;border:0;border-top:1px solid var(--pp-design-rule);background:transparent;border-radius:0;margin:24px 0 0}
.pp-design-lesson #content .pp-related strong {font-family:var(--pp-heading);font-size:19px}
.pp-design-lesson #content .pp-related>div {gap:8px}
.pp-design-lesson #content .pp-related a {flex:1;min-height:46px;padding:10px;font-size:14px}
.pp-design-lesson #content .pp-letter-worksheet {display:block;clear:none;margin:0;padding:24px;background:#fffaf0;border:1px solid #eadbb5;border-radius:12px}
.pp-design-lesson .pp-letter-worksheet-preview {float:right;width:72px;max-width:72px;margin:0 0 14px 16px}
.pp-design-lesson #content .pp-design-paper-label {font-size:15px;color:var(--pp-blue);margin:0 0 8px}
.pp-design-lesson #content .pp-letter-worksheet h2 {font-family:var(--pp-heading);font-size:23px;line-height:1.25;min-height:0;margin:0 0 18px}
.pp-design-lesson #content .pp-letter-worksheet p:not(.pp-design-paper-label) {clear:both;line-height:1.5}
.pp-design-lesson #content .pp-letter-worksheet .pp-actions {display:grid;grid-template-columns:1fr;margin:18px 0;gap:10px;clear:both}
.pp-design-lesson #content .pp-letter-worksheet .pp-actions a {padding:12px 10px;font-size:14px}

@media (max-width:900px) {
  .pp-design-pilot .pp-product-choices {gap:16px}
  .pp-design-pilot .pp-product-choices>section {padding:16px}
  .pp-design-pilot .pp-product-choices .pp-choice-preview {height:248px}
  .pp-design-pilot .pp-choice-preview img {max-height:222px}
  .pp-design-product-lead {grid-template-columns:minmax(0,1fr) 260px;gap:28px}
  .pp-design-lesson-stage {grid-template-columns:minmax(0,1fr);gap:28px}
  .pp-design-lesson #content .pp-letter-worksheet {display:grid;grid-template-columns:100px minmax(0,1fr);gap:24px}
  .pp-design-lesson .pp-letter-worksheet-preview {float:none;width:100%;max-width:100px;margin:0}
  .pp-design-lesson #content .pp-letter-worksheet .pp-actions {display:flex;flex-wrap:wrap}
}
@media (max-width:700px) {
  .pp-design-product-lead {grid-template-columns:minmax(0,1fr)}
  .pp-design-product-lead figure {justify-self:center;max-width:300px}
  .pp-design-samples .pp-sample-intro {padding:20px}
  .pp-design-mascot {position:static;float:right;width:48px;height:81px;margin:0 0 8px 16px}
  .pp-design-samples .pp-sample-intro .pp-actions {clear:both}
  .pp-design-samples .pp-sample-contents {gap:12px}
}
@media (max-width:600px) {
  .pp-design-pilot .pp-product-choices {grid-template-columns:minmax(0,1fr);gap:20px}
  .pp-design-pilot .pp-product-choices>section {display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:16px}
  .pp-design-pilot .pp-product-choices .pp-choice-preview {grid-row:1/3;align-self:start;height:164px;padding:8px;margin:0}
  .pp-design-pilot .pp-choice-preview img {max-height:150px;max-width:100%;width:100%}
  .pp-design-pilot .pp-choice-preview-both {flex-direction:column;gap:4px}
  .pp-design-pilot .pp-choice-preview-both img {max-height:72px;width:54px}
  .pp-design-pilot .pp-choice-body {margin:0}
  .pp-design-pilot #content .pp-choice-body h2 {font-size:22px}
  .pp-design-pilot #content .pp-choice-body p {font-size:15px}
  .pp-design-pilot #content .pp-choice-body .pp-note {font-size:13px}
  .pp-design-pilot .pp-choice-footer {grid-column:2;margin:0}
  .pp-design-pilot #content .pp-choice-price {font-size:25px;margin-bottom:10px}
  .pp-design-pilot #content .pp-choice-footer .pp-button {font-size:13px;padding:10px 8px}
  .pp-design-start {display:block;margin-bottom:20px}
  .pp-design-start>.pp-button {width:100%}
  .pp-design-downloads {justify-content:space-between;gap:12px;margin-top:8px;font-size:14px}
  .pp-design-pilot .pp-pete-note {padding:18px;gap:16px}
  .pp-design-pilot .pp-cards:not(.pp-product-choices) {gap:20px}
  .pp-design-pilot .pp-cards:not(.pp-product-choices)>section {padding:20px}
  .pp-design-pilot #content .pp-panel {padding:20px}
  .pp-design-pilot #content .pp-sample-section>h2 {font-size:23px}
  .pp-design-product .pp-design-product-lead .pp-actions {display:grid;grid-template-columns:1fr}
  .pp-design-samples .pp-sample-contents {gap:8px}
  .pp-design-samples #content .pp-sample-intro .pp-actions {display:flex;gap:10px}
  .pp-design-samples #content .pp-sample-intro .pp-actions a {flex:1;padding:10px;font-size:14px}
  .pp-design-samples .pp-sample-sheet figcaption {font-size:13px}
  .pp-design-lesson-stage {margin-top:20px}
  .pp-design-lesson #content .pp-letter-worksheet {display:block;padding:20px}
  .pp-design-lesson .pp-letter-worksheet-preview {float:right;width:66px;margin-left:14px}
  .pp-design-lesson #content .pp-letter-worksheet .pp-actions {display:grid;grid-template-columns:1fr}
}
@media (max-width:360px) {
  .pp-design-pilot .pp-product-choices>section {grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px}
  .pp-design-pilot .pp-product-choices .pp-choice-preview {height:140px}
}
@media print {
  .pp-design-pilot .pp-design-start,.pp-design-pilot .pp-design-downloads {display:none}
  .pp-design-lesson-stage {display:block}
}