@font-face{font-family:'PagePerfect Nohemi';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/Nohemi-Regular-CrOZruC8.woff2') format('woff2')}
@font-face{font-family:'PagePerfect Nohemi';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/Nohemi-Medium-B6_cffN2.woff2') format('woff2')}
@font-face{font-family:'PagePerfect Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/jizBRFtNs2ka5fXjeivQ4LroWlx-2zI.ttf') format('truetype')}
.pp-home-feature{
--loud-orange:#CC4700;--loud-orange-deep:#AD3C00;
--loud-text:#3E3E3E;--loud-dark:#1B1B1B;--loud-white:#FFFFFF;
--loud-peach:#FEDFCE;--loud-cream:#F8FCDA;--loud-lavender:#CEDFFE;
--loud-muted:#5D5D5D;--loud-line:#EDEDED;
--loud-font-primary:'PagePerfect Nohemi',Arial,sans-serif;--loud-font-display:'PagePerfect Instrument Serif',Georgia,serif;
--loud-font-reading:'PagePerfect Satoshi',Arial,sans-serif;
--loud-control-weight:500;--loud-control-size:1rem;--loud-control-line-height:1.4;
--loud-status-success-foreground:#166534;--loud-status-success-background:#DCFCE7;--loud-status-success-border:#15803D;
--loud-status-warning-foreground:#713F12;--loud-status-warning-background:#FEF08A;--loud-status-warning-border:#854D0E;
--loud-status-error-foreground:#991B1B;--loud-status-error-background:#FEE2E2;--loud-status-error-border:#B91C1C;
}
/* Layout stays local to the PagePerfect homepage feature. Brand values are generated from the shared Loud package. */
.pp-home-shell { margin-block: 1rem 2rem; }
.pp-home-feature { box-sizing: border-box; display: grid; gap: 2rem; padding: 1.5rem; border-radius: .875rem; background: var(--loud-dark); color: var(--loud-white); font-family: var(--loud-font-primary); font-weight: 400; }
.pp-home-feature *, .pp-home-feature *::before, .pp-home-feature *::after { box-sizing: border-box; }
.pp-home-copy, .pp-home-visual { min-width: 0; }
.pp-home-feature p { margin: 0; }
.pp-home-name { display: flex; align-items: center; gap: .875rem; font-size: 1.5rem; line-height: 1.4; }
.pp-home-mark { display: flex; align-items: flex-end; gap: .25rem; width: 1.875rem; height: 1.875rem; flex: 0 0 1.875rem; }
.pp-home-mark i { display: block; width: .4375rem; height: 45%; background: var(--loud-orange); }
.pp-home-mark i:nth-child(2) { height: 72%; }
.pp-home-mark i:nth-child(3) { height: 100%; }
.pp-home-feature h2 { margin: 1.5rem 0; font-family: var(--loud-font-display); font-weight: 400; font-size: clamp(2.75rem, 4.9vw, 5.25rem); line-height: 1.06; letter-spacing: 0; color: var(--loud-white); text-wrap: balance; }
.pp-home-feature .pp-home-description { max-width: 38rem; font-size: 1.125rem; line-height: 1.6; }
.pp-home-feature .pp-home-rhythm { max-width: 38rem; margin-top: 1rem; font-size: 1rem; line-height: 1.6; color: var(--loud-peach); }
.pp-home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.75rem; }
.pp-home-feature .pp-home-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; max-width: 100%; padding: .875rem 1.25rem; border: 2px solid transparent; border-radius: 100px; background: var(--loud-orange); color: var(--loud-white); font-family: var(--loud-font-primary); font-size: 1rem; font-weight: 500; line-height: 1.4; text-align: center; text-decoration: none; touch-action: manipulation; transition: background-color 150ms ease; }
.pp-home-feature .pp-home-primary:visited { color: var(--loud-white); }
.pp-home-feature .pp-home-primary:hover, .pp-home-feature .pp-home-primary:active { background: var(--loud-orange-deep); color: var(--loud-white); }
.pp-home-feature .pp-home-pricing { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 0; color: var(--loud-white); font-size: 1rem; font-weight: 500; line-height: 1.4; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; touch-action: manipulation; }
.pp-home-feature .pp-home-pricing:visited, .pp-home-feature .pp-home-pricing:hover, .pp-home-feature .pp-home-pricing:active { color: var(--loud-white); }
.pp-home-feature .pp-home-pricing:hover { text-decoration-thickness: 2px; }
.pp-home-feature a:focus-visible { outline: 3px solid var(--loud-orange-deep); outline-offset: 3px; box-shadow: 0 0 0 3px var(--loud-white); }
.pp-home-visual { align-self: center; max-width: 29rem; width: 100%; margin-inline: auto; }
.pp-home-network { display: block; width: 100%; height: auto; }
.pp-home-connection { stroke: var(--loud-orange); stroke-width: 3; }
.pp-home-orbit { stroke: var(--loud-white); stroke-width: 1; stroke-dasharray: 2 8; }
.pp-home-hub { fill: var(--loud-orange); }
.pp-home-hub-mark { fill: var(--loud-white); }
.pp-home-page rect { stroke: var(--loud-white); stroke-width: 1; }
.pp-home-page path { stroke: var(--loud-text); stroke-width: 3; stroke-linecap: round; }
.pp-home-page-one rect { fill: var(--loud-peach); }
.pp-home-page-two rect { fill: var(--loud-lavender); }
.pp-home-page-three rect { fill: var(--loud-cream); }
.pp-home-feature .pp-home-caption { margin: 1rem auto 0; font-size: 1rem; line-height: 1.6; text-align: center; }
@media (min-width: 768px) {
  .pp-home-shell { margin-block: 1rem 3rem; }
  .pp-home-feature { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 2rem; padding: 2.5rem; border-radius: 3rem; }
}
@media (min-width: 1024px) {
  .pp-home-feature { padding: 3.5rem; gap: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-home-feature .pp-home-primary { transition: none; }
}