/* Landing only. Shared shell, upload editor and photo studio keep their own styles.
   Tailwind Plus section references: docs/design/print-and-frame.md. */
.pf-landing { --pf-muted:#596477; --pf-rule:#e2e7ed; }
.pf-landing ~ .site-footer { margin-top:0; }
.pf-landing .pf-wrap { width:100%; max-width:1440px; padding-inline:32px; }
.pf-hero { position:relative; overflow:hidden; }
.pf-landing .pf-arrival { position:relative; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:72px; padding-block:36px; }
.pf-landing .pf-intro { max-width:480px; padding-block:24px; }
.pf-breadcrumb { display:flex; align-items:center; gap:10px; margin-bottom:32px; font-size:13px; color:#596477; }
.pf-breadcrumb a { color:inherit; text-decoration:none; }
.pf-breadcrumb a:hover { text-decoration:underline; text-underline-offset:3px; }
.pf-landing .pf-eyebrow { font-weight:700; letter-spacing:1.6px; }
.pf-landing h1 { margin:12px 0 20px; font-size:clamp(38px,3.6vw,52px); font-weight:700; line-height:1.12; letter-spacing:-.7px; }
.pf-landing .pf-lead { color:#596477; font-size:20px; line-height:1.6; }
.pf-landing .pf-button { min-height:50px; border-radius:7px; font-size:17px; font-weight:600; }
.pf-landing .pf-primary { background:#293a60; color:#fff; }
.pf-landing .pf-primary:hover { background:#364f7b; box-shadow:none; }
.pf-landing :is(button,a,summary):focus-visible { outline-color:#546ea6; }
/* The whole hero accepts files; the drop overlay appears only during a file drag. */
.pf-drop-overlay { position:absolute; z-index:2; inset:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border:2px dashed #426957; border-radius:10px; background:#edf5f0f5; color:#426957; font-size:24px; font-weight:600; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s,visibility .15s; }
.pf-drop-overlay svg { width:32px; height:32px; }
.pf-hero.is-dragging .pf-drop-overlay { opacity:1; visibility:visible; }
/* Match the approved gallery-wall concept. Normalize transparent image margins
   inside each box so the visible frame edges have the same horizontal/vertical gap. */
.pf-hero-gallery { display:grid; grid-template-columns:minmax(0,1.667fr) minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:clamp(14px,2.2vw,24px); width:100%; max-width:620px; margin:0 0 0 auto; }
.pf-hero-frame { position:relative; width:100%; filter:drop-shadow(4px 10px 7px #20273522); }
.pf-hero-frame img { position:absolute; display:block; height:auto; max-width:none; }
.pf-hero-frame--oak { grid-column:1; grid-row:1 / span 2; aspect-ratio:539 / 687; }
.pf-hero-frame--oak img { width:111.3173%; left:-5.5659%; top:-2.329%; }
.pf-hero-frame--black { grid-column:2; grid-row:1; align-self:end; aspect-ratio:461 / 460; }
.pf-hero-frame--black img { width:104.1215%; left:-2.1692%; top:-2.1739%; }
.pf-hero-frame--silver { grid-column:2; grid-row:2; align-self:start; aspect-ratio:560 / 457; }
.pf-hero-frame--silver img { width:100%; left:0; top:0; }
.pf-landing .pf-intro>.pf-button { margin:28px 0 0; }
.pf-landing .pf-how { background:#fff; border:0; padding:64px 0 0; }
.pf-landing .pf-three { gap:64px; }
.pf-incentive { text-align:center; }
.pf-incentive-art { display:block; width:112px; height:112px; margin:0 auto 20px; }
.pf-landing .pf-three h2 { margin:0 0 12px; color:#202735; font-size:21px; font-weight:700; line-height:1.3; }
.pf-landing .pf-three p { max-width:360px; margin-inline:auto; color:#596477; font-size:16px; line-height:1.65; }
.pf-landing .pf-story { gap:80px; padding-block:96px; }
.pf-landing .pf-story>img { border-radius:8px; height:auto; aspect-ratio:1.25; object-fit:cover; }
.pf-landing .pf-story h2,.pf-landing .pf-closing h2 { font-size:38px; font-weight:700; line-height:1.16; letter-spacing:-.7px; }
.pf-landing .pf-story p:not(.pf-eyebrow),.pf-landing .pf-story ul { color:#596477; }
.pf-landing .pf-story li { padding-block:7px; }
.pf-landing .pf-text-button { min-height:44px; }
.pf-landing .pf-questions { max-width:864px; padding-bottom:96px; }
.pf-landing .pf-questions>h2 { font-size:34px; font-weight:700; letter-spacing:-.5px; }
.pf-landing .pf-questions summary::after { color:#293a60; }
.pf-landing .pf-questions details p { color:#596477; font-size:16px; }
.pf-landing .pf-questions a { text-decoration:underline; text-underline-offset:3px; }
.pf-landing .pf-closing { background:#293a60; color:#fff; padding-block:56px; }
.pf-landing .pf-closing h2 { color:#fff; }
.pf-landing .pf-closing p { color:#fff; opacity:.8; font-size:18px; }
.pf-landing .pf-closing .pf-primary { flex:none; background:#fff; color:#293a60; }
.pf-landing .pf-closing .pf-primary:hover { background:#f1f4f9; }
@media(max-width:1199px) and (min-width:768px) {
    .pf-landing .pf-arrival { gap:40px; }
}
@media(max-width:991px) {
    .pf-landing .pf-wrap { padding-inline:24px; }
    .pf-landing .pf-arrival { gap:32px; }
    .pf-landing h1 { font-size:38px; }
    .pf-landing .pf-lead { font-size:18px; }
    .pf-landing .pf-three { gap:32px; }
    .pf-landing .pf-story { gap:36px; padding-block:64px; }
    .pf-landing .pf-story h2,.pf-landing .pf-closing h2 { font-size:32px; }
    .pf-landing .pf-story p:not(.pf-eyebrow) { font-size:17px; }
    .pf-landing .pf-questions { padding-bottom:64px; }
}
@media(max-width:767px) {
    .pf-landing .pf-wrap { padding-inline:18px; }
    .pf-landing .pf-arrival { grid-template-columns:1fr; gap:0; padding-block:0 24px; }
    .pf-landing .pf-intro { max-width:480px; padding-block:24px 28px; }
    .pf-breadcrumb { margin-bottom:22px; }
    .pf-landing h1 { font-size:38px; margin:12px 0 18px; letter-spacing:-.5px; }
    .pf-landing .pf-lead { font-size:18px; }
    .pf-landing .pf-intro>.pf-button { margin-top:24px; width:auto; }
    .pf-hero-gallery { max-width:480px; gap:14px; margin:0 auto; }
    .pf-landing .pf-how { padding-block:36px 0; }
    .pf-landing .pf-three { grid-template-columns:1fr; gap:28px; }
    .pf-incentive { display:grid; grid-template-columns:80px minmax(0,1fr); align-items:center; gap:16px; text-align:left; }
    .pf-incentive-art { width:80px; height:80px; margin:0; }
    .pf-landing .pf-three h2 { font-size:20px; margin-bottom:8px; }
    .pf-landing .pf-three p { max-width:none; font-size:15px; }
    .pf-landing .pf-story { grid-template-columns:1fr; padding-block:48px; gap:28px; }
    .pf-landing .pf-story h2,.pf-landing .pf-closing h2 { font-size:30px; }
    .pf-landing .pf-questions { padding-bottom:48px; }
    .pf-landing .pf-questions>h2 { text-align:left; font-size:28px; }
    .pf-landing .pf-questions summary { font-size:18px; }
    .pf-landing .pf-closing { padding-block:40px; }
    .pf-landing .pf-closing>.pf-wrap { display:block; }
    .pf-landing .pf-closing .pf-button { width:auto; margin-top:24px; }
}
@media(max-width:374px) {
    .pf-landing h1 { font-size:34px; }
    .pf-incentive { grid-template-columns:64px minmax(0,1fr); gap:12px; }
    .pf-incentive-art { width:64px; height:64px; }
}

@media(prefers-reduced-motion:reduce) { .pf-drop-overlay { transition:none; } }