/* ==========================================================================
   5-Piece Canvas Wall Art — section styles, group A
   Sections 7-11 of the MagicPath design
   "5-Piece Canvas — Luxury Product Page (Desktop + Mobile)".

       §7   .fpc-why       "Why choose five panels?" + single-vs-five compare
       §8   .fpc-story     product story / definition block
       §9   .fpc-layouts   layout chooser gallery  (#fpc-layouts)
       §10  .fpc-insp      room inspiration gallery + category filter
       §11  .fpc-upload    upload / dropzone

   Loads AFTER five-piece-canvas-v2.css and builds on its tokens, resets and
   shared classes (.fpc-section, .fpc-shell, .fpc-kicker, .fpc-h2, .fpc-h3,
   .fpc-lede, .fpc-btn, .fpc-textlink, .fpc-visually-hidden). Nothing here
   redeclares them.

   ---------------------------------------------------------------------------
   RULES THIS FILE OBEYS

   * Every selector begins with `.fpc-page`. There is not one bare element
     selector and not one global rule, so this file cannot reach any other
     page on the site.
   * No element-level resets are written here at all, so the `:where()` trap
     (`.fpc-page button` is 0,1,1 and silently beats a 0,1,0 component class)
     cannot occur. The foundation already owns every reset.
   * No font-family on any heading. single-product-detail.css declares
     `h1..h6,p,span,label,a{font-family:inherit!important}`; the foundation
     answers it with a matching !important. Serif is set here only on <b> and
     <em>, which that rule does not touch, so no !important is needed.
   * Images are double-scoped (e.g. `.fpc-page .fpc-insp .fpc-insp__photo`) to
     outrank ancestor `img{height:auto;object-fit:contain}` rules.
   * Bootstrap's .container / .row / .col-* are never used — mobile.css forces
     `.container{width:1200px!important}` on phones.

   TYPE SCALE — the design's body copy sits at 7-13px, a canvas artefact.
   Mapped onto the foundation's readable ramp:

       design 7-8px   -> --fpc-fs-micro (11px)  letter-spaced uppercase ONLY
       design 9-10px  -> --fpc-fs-xs    (12px)
       design 11px    -> --fpc-fs-sm    (13px)
       design 12px    -> --fpc-fs-md    (14px)
       design 13px    -> --fpc-fs-lg    (15px)

   Four design values at 8px are NOT uppercase — §7's "Made to fill statement
   walls", §9's "Try this arrangement", §10's card paragraph and its CTA. micro
   is reserved for letter-spaced uppercase, so those take --fpc-fs-xs/sm
   instead. Flagged deliberately; nothing readable drops below 12px.

   Display sizes keep the design's own values: .fpc-h2 / .fpc-h2--lg clamps
   from the foundation, plus the three flat card titles the design sets at
   17px (§7), 15px (§9), 18px (§10) and 22px (§11) — all at or above 14px.
   ========================================================================== */


/* ==========================================================================
   §7 — .fpc-why   "Why choose five panels?"
   design: .ppx-why / .ppx-compare-cards / .ppx-compare-image
   ========================================================================== */

.fpc-page .fpc-why {
    background: #fffdf8;
    border-bottom: 1px solid #eee6da;
    padding-top: 68px;
    padding-bottom: 68px;
}

.fpc-page .fpc-why__inner {
    display: grid;
    grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 76px);
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
}

.fpc-page .fpc-why__copy { min-width: 0; }

.fpc-page .fpc-why .fpc-textlink {
    margin-top: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ad8a50;
}

/* ---- the two comparison cards ---- */

.fpc-page .fpc-why__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
}

.fpc-page .fpc-why__card {
    min-width: 0;
    padding: 13px;
    border: 1px solid #e5ddd1;
    background: #faf7f0;
}

.fpc-page .fpc-why__card--featured {
    border-color: #c5a572;
    background: #f8f0e2;
}

.fpc-page .fpc-why__card > small {
    display: block;
    color: #927043;
    font-size: var(--fpc-fs-micro);
    font-weight: 700;
    letter-spacing: 1px;
}

.fpc-page .fpc-why__title {
    margin: 4px 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
}

.fpc-page .fpc-why__card > p {
    margin: 5px 0;
    color: #81776a;
    font-size: var(--fpc-fs-xs);
    line-height: 1.65;
}

.fpc-page .fpc-why__card > b {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #7c6338;
    font-size: var(--fpc-fs-xs);
    font-weight: 700;
}

.fpc-page .fpc-why__card > b svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---- the media well: real photo, or the design's CSS artwork as fallback ---- */

.fpc-page .fpc-why__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(120px, 15vw, 170px);
    margin-bottom: 13px;
    overflow: hidden;
    background: linear-gradient(135deg, #e7ddd0, #f3eadb);
}

/* double-scoped: beats ancestor img{height:auto;object-fit:contain} */
.fpc-page .fpc-why .fpc-why__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.fpc-page .fpc-why__media--single i {
    width: 55%;
    height: 62%;
    border: 7px solid #f8f5ec;
    background: linear-gradient(145deg, #b5ab90, #809079 48%, #cdb697);
    box-shadow: 0 7px 14px #33271928;
}

.fpc-page .fpc-why__media--five {
    gap: 4px;
    padding: 0 8%;
}

.fpc-page .fpc-why__media--five i {
    flex: 1;
    min-width: 0;
    height: 58%;
    border: 3px solid #f9f5ec;
    background: linear-gradient(145deg, #9eaa91, #e2d6c3 40%, #7c8d79);
    box-shadow: 0 6px 10px #3327192a;
}


/* ==========================================================================
   §8 — .fpc-story   product story / definition block
   design: .ppx-product-story
   ========================================================================== */

.fpc-page .fpc-story {
    display: grid;
    grid-template-columns: minmax(0, .65fr) minmax(0, 1fr);
    gap: 40px;
    padding: 36px clamp(20px, 7.5vw, 116px);
    background: #f5efe4;
    border-bottom: 1px solid #e6dccb;
}

.fpc-page .fpc-story__head { min-width: 0; }

/* the design sets a flat 28px here, 30px at 900px and 25px at 600px — one
   clamp reproduces all three without a media query */
.fpc-page .fpc-story__title { font-size: clamp(25px, 3.4vw, 30px); }


/* ==========================================================================
   §9 — .fpc-layouts   layout chooser gallery
   design: .ppx-section#layouts / .ppx-layout-samples / .ppx-sample
   ========================================================================== */

.fpc-page .fpc-layouts { background: #f7f4ed; }

.fpc-page .fpc-layouts__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.fpc-page .fpc-layouts__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
}

.fpc-page .fpc-layouts__headingcopy { min-width: 0; }

.fpc-page .fpc-layouts__count {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding-left: 15px;
    border-left: 1px solid #d9cebc;
    color: #a27d43;
    font-family: var(--fpc-serif);
    font-size: 34px;
    font-weight: 500;
    line-height: 1;
}

.fpc-page .fpc-layouts__count small {
    color: #8b8070;
    font-family: var(--fpc-sans);
    font-size: var(--fpc-fs-xs);
    font-weight: 400;
    line-height: 1.4;
}

/* ---- the six sample cards ---- */

.fpc-page .fpc-layouts__samples {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: 28px;
}

.fpc-page .fpc-layouts__sample {
    display: block;
    min-width: 0;
    padding: 0;
    border: 1px solid #e4dbce;
    background: #fffdf8;
    text-align: left;
    transition: transform .2s ease, box-shadow .2s ease;
}

.fpc-page .fpc-layouts__sample:hover,
.fpc-page .fpc-layouts__sample:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 12px 22px #40301b0c;
}

.fpc-page .fpc-layouts__scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 156px;
    padding: 25px 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #e9e2d7, #f6f0e5 52%, #ded0ba);
}

/* the design's wall hairline behind the panels */
.fpc-page .fpc-layouts__scene::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14%;
    height: 1px;
    background: #bcaa8e;
}

.fpc-page .fpc-layouts__panels {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.3%;
    width: 85%;
    height: 80%;
    min-height: 0;
    filter: drop-shadow(0 5px 5px #4a392425);
}

/* the five panels. height comes from the design's per-layout array via an
   inline style; max-height:100% keeps the >100% values inside the scene,
   exactly as the design's .ppx-panel does. */
.fpc-page .fpc-layouts__panel {
    flex: 1 1 0;
    min-width: 0;
    max-height: 100%;
    border: 1px solid #c5b292;
    background: linear-gradient(150deg, #b09b7b, #e7dbc7 45%, #8d9480);
    box-shadow: 1px 3px 6px #2d231d38;
}

.fpc-page .fpc-layouts__scene i {
    position: absolute;
    top: 10px;
    left: 12px;
    color: #8c7a60;
    font-size: var(--fpc-fs-micro);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1px;
}

.fpc-page .fpc-layouts__sample > b {
    display: block;
    padding: 13px 14px 2px;
    font-family: var(--fpc-serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}

.fpc-page .fpc-layouts__sample > small {
    display: block;
    padding: 0 14px;
    color: #8a8175;
    font-size: var(--fpc-fs-xs);
}

.fpc-page .fpc-layouts__sample > em {
    display: block;
    padding: 10px 14px 13px;
    color: #94703a;
    font-size: var(--fpc-fs-sm);
    font-style: normal;
    font-weight: 700;
}

/* ---- editorial tip ---- */

.fpc-page .fpc-layouts__tip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 13px 15px;
    border: 1px solid #e2d9cc;
    background: #fbf9f4;
    color: #7b705e;
    font-size: var(--fpc-fs-sm);
    line-height: 1.6;
}

.fpc-page .fpc-layouts__tip svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #987341;
}

.fpc-page .fpc-layouts__tip b { color: #51483b; }


/* ==========================================================================
   §10 — .fpc-insp   room inspiration gallery + category filter
   design: .ppx-inspiration / .ppx-filter-row / .ppx-inspiration-card
   ========================================================================== */

.fpc-page .fpc-insp {
    padding: 75px clamp(20px, 7.5vw, 116px);
    background: #fbfaf6;
}

.fpc-page .fpc-insp__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
}

.fpc-page .fpc-insp__headingcopy { min-width: 0; }

/* ---- filters ---- */

.fpc-page .fpc-insp__filters {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin: 20px 0;
}

/* 44px floor: the design's 8px/8px-padding chip is a 26px tap target */
.fpc-page .fpc-insp__filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid #e4dbcf;
    background: #fffdf9;
    color: #7c7060;
    font-size: var(--fpc-fs-xs);
    font-weight: 600;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.fpc-page .fpc-insp__filter.is-selected {
    border-color: #b18b4f;
    background: #e9ddc8;
    color: #60471f;
}

/* ---- the grid ---- */

.fpc-page .fpc-insp__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.fpc-page .fpc-insp__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #e5ddd1;
    background: #fffefa;
}

.fpc-page .fpc-insp__card[hidden] { display: none; }

.fpc-page .fpc-insp__media {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 175px;
    padding: 15px;
    overflow: hidden;
    background: linear-gradient(135deg, #cdc0ad, #efe5d4 52%, #b9ab95);
    color: #fff;
}

/* double-scoped: beats ancestor img{height:auto;object-fit:contain} */
.fpc-page .fpc-insp .fpc-insp__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* the design's exact overlay gradient, lifted off the background-image
   shorthand so a real <img> can sit underneath it */
.fpc-page .fpc-insp__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #171610a8, transparent 58%);
}

/* CSS fallback when a photo slot does not resolve */
.fpc-page .fpc-insp__mock {
    position: absolute;
    inset: 18% 12% 32%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3%;
}

.fpc-page .fpc-insp__mock i {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 2px solid #f6efe2;
    background: linear-gradient(145deg, #9eaa91, #e2d6c3 40%, #7c8d79);
    box-shadow: 0 6px 10px #3327192a;
}

.fpc-page .fpc-insp__label {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 5px;
    min-width: 0;
}

.fpc-page .fpc-insp__group {
    color: #ead3a9;
    font-size: var(--fpc-fs-micro);
    font-weight: 700;
    letter-spacing: 1px;
}

.fpc-page .fpc-insp__label b {
    font-family: var(--fpc-serif);
    font-size: clamp(16px, 1.3vw, 18px);
    font-weight: 500;
    line-height: 1.15;
}

.fpc-page .fpc-insp__card > p {
    min-height: 33px;
    margin: 0;
    padding: 11px 12px 3px;
    color: #81776b;
    font-size: var(--fpc-fs-xs);
    line-height: 1.6;
}

.fpc-page .fpc-insp__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: calc(100% - 24px);
    min-height: 44px;
    margin: 10px 12px 12px;
    padding: 7px 0;
    border-top: 1px solid #eee5d8;
    color: #8c682f;
    font-size: var(--fpc-fs-sm);
    font-weight: 700;
    text-align: left;
    transition: color .2s ease;
}

.fpc-page .fpc-insp__cta svg { width: 14px; height: 14px; flex-shrink: 0; }

.fpc-page .fpc-insp__cta:hover,
.fpc-page .fpc-insp__cta:focus-visible { color: #6d4f1f; }


/* ==========================================================================
   §11 — .fpc-upload   upload / dropzone
   design: .ppx-upload-section / .ppx-upload-card / .ppx-dropzone
   ========================================================================== */

.fpc-page .fpc-upload {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, .85fr);
    align-items: center;
    gap: clamp(35px, 6.5vw, 98px);
    padding: 80px clamp(20px, 7.5vw, 116px);
    background: #ece5d9;
}

.fpc-page .fpc-upload__copy { min-width: 0; }
.fpc-page .fpc-upload__copy .fpc-h2 { margin-top: 12px; }
.fpc-page .fpc-upload__copy > .fpc-lede { margin-bottom: 18px; }

.fpc-page .fpc-upload__list {
    display: grid;
    gap: 10px;
    margin: 19px 0 0;
}

.fpc-page .fpc-upload__list li {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: #51483d;
    font-size: var(--fpc-fs-sm);
    line-height: 1.55;
}

.fpc-page .fpc-upload__list svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #92713e;
}

.fpc-page .fpc-upload__tip {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid #d7ccba;
}

.fpc-page .fpc-upload__tip > span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: #f7f0e3;
    color: #997640;
}

.fpc-page .fpc-upload__tip p {
    min-width: 0;
    color: #7a7062;
    font-size: var(--fpc-fs-xs);
    line-height: 1.65;
}

.fpc-page .fpc-upload__tip b { color: #463d31; }

/* ---- the card + dropzone ---- */

.fpc-page .fpc-upload__card {
    min-width: 0;
    padding: 14px;
    border: 1px solid #e2d8c8;
    background: #fcfaf6;
    box-shadow: 0 18px 40px #51402b10;
}

.fpc-page .fpc-upload__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 270px;
    padding: 25px 16px;
    border: 1.5px dashed #c5b79f;
    background: linear-gradient(145deg, #fdfbf7, #f7f1e7);
    text-align: center;
}

.fpc-page .fpc-upload__card.is-dragover .fpc-upload__zone {
    border-color: #a98549;
    background: linear-gradient(145deg, #fbf4e6, #f1e6d2);
}

.fpc-page .fpc-upload__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #f0e4ce;
    color: #8f6c37;
}

.fpc-page .fpc-upload__icon svg { width: 22px; height: 22px; }
.fpc-page .fpc-upload__icon svg[hidden] { display: none; }

.fpc-page .fpc-upload__state {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    width: 100%;
}

.fpc-page .fpc-upload__state[hidden] { display: none; }

.fpc-page .fpc-upload__title {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

.fpc-page .fpc-upload__state > p {
    margin: 5px 0 0;
    color: #8a8174;
    font-size: var(--fpc-fs-sm);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.fpc-page .fpc-upload__state > small {
    margin-top: 11px;
    color: #9e9382;
    font-size: var(--fpc-fs-xs);
    line-height: 1.5;
}

.fpc-page .fpc-upload__state .fpc-btn { margin-top: 16px; }
.fpc-page .fpc-upload__state .fpc-textlink { margin-top: 10px; }

.fpc-page .fpc-upload__error {
    margin-top: 10px;
    color: #a3322c;
    font-size: var(--fpc-fs-sm);
    text-align: center;
}

.fpc-page .fpc-upload__error[hidden] { display: none; }

.fpc-page .fpc-upload__privacy {
    margin-top: 11px;
    color: #9d9281;
    font-size: var(--fpc-fs-xs);
    line-height: 1.5;
    text-align: center;
}

.fpc-page .fpc-upload__privacy span { margin-right: 6px; }


/* ==========================================================================
   RESPONSIVE — the design's breakpoint set, consolidated.
   1200 / 1024 / 900 / 767 / 540 / 420, matching the audited wave.
   ========================================================================== */

@media (max-width: 1200px) {
    .fpc-page .fpc-why,
    .fpc-page .fpc-insp,
    .fpc-page .fpc-upload {
        padding-left: clamp(22px, 4vw, 48px);
        padding-right: clamp(22px, 4vw, 48px);
    }
    .fpc-page .fpc-upload { gap: clamp(22px, 3vw, 38px); }
    .fpc-page .fpc-insp__grid { gap: 10px; }
}

@media (max-width: 1024px) {
    .fpc-page .fpc-insp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fpc-page .fpc-insp__media { min-height: 165px; }
    .fpc-page .fpc-layouts__samples { gap: 10px; }
    .fpc-page .fpc-layouts__scene { height: 140px; }
}

@media (max-width: 900px) {
    .fpc-page .fpc-why__inner,
    .fpc-page .fpc-story,
    .fpc-page .fpc-upload { grid-template-columns: minmax(0, 1fr); }

    .fpc-page .fpc-story { gap: 22px; }

    .fpc-page .fpc-upload__copy { max-width: 760px; }
    .fpc-page .fpc-upload__card {
        width: 100%;
        max-width: 760px;
        margin-inline: auto;
        padding: 16px;
    }
    .fpc-page .fpc-upload__zone { min-height: 230px; }

    .fpc-page .fpc-layouts__heading,
    .fpc-page .fpc-insp__heading { align-items: flex-start; gap: 12px; }
}

@media (max-width: 800px) {
    .fpc-page .fpc-layouts__samples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
    .fpc-page .fpc-layouts__scene { height: 135px; }
    .fpc-page .fpc-upload { gap: 22px; padding: 56px 20px; }
    .fpc-page .fpc-upload__card { max-width: 650px; }
}

@media (max-width: 767px) {
    .fpc-page .fpc-why { padding-top: 48px; padding-bottom: 48px; }
    .fpc-page .fpc-insp { padding: 48px 20px; }

    .fpc-page .fpc-layouts__heading,
    .fpc-page .fpc-insp__heading { flex-direction: column; }

    .fpc-page .fpc-layouts__count {
        gap: 6px;
        padding-left: 9px;
        font-size: 27px;
    }
    .fpc-page .fpc-layouts__count small { line-height: 1.45; }

    .fpc-page .fpc-layouts__samples { gap: 10px; margin-top: 22px; }
    .fpc-page .fpc-layouts__scene { height: clamp(110px, 32vw, 150px); padding: 18px 9px; }
    .fpc-page .fpc-layouts__sample > b { padding: 11px 10px 3px; font-size: 14px; }
    .fpc-page .fpc-layouts__sample > small { padding: 0 10px; }
    .fpc-page .fpc-layouts__sample > em { padding: 9px 10px 11px; }
    .fpc-page .fpc-layouts__tip { gap: 9px; padding: 12px; }

    .fpc-page .fpc-insp__filters { margin: 18px 0; }
    .fpc-page .fpc-insp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .fpc-page .fpc-insp__media { min-height: clamp(140px, 39vw, 190px); padding: 12px; }
    .fpc-page .fpc-insp__card > p { min-height: 0; padding: 10px 10px 3px; }
    .fpc-page .fpc-insp__cta { width: calc(100% - 20px); margin: 9px 10px 10px; }

    .fpc-page .fpc-upload__list { gap: 10px; margin-top: 17px; }
    .fpc-page .fpc-upload__list li { gap: 8px; }
    .fpc-page .fpc-upload__tip { gap: 10px; margin-top: 18px; padding-top: 13px; }
    .fpc-page .fpc-upload__card { padding: 10px; }
    .fpc-page .fpc-upload__zone { min-height: 220px; padding: 22px 14px; }
    .fpc-page .fpc-upload__icon { width: 48px; height: 48px; }
}

@media (max-width: 600px) {
    .fpc-page .fpc-why__inner { gap: 20px; }
    .fpc-page .fpc-why__cards { gap: 8px; }
    .fpc-page .fpc-why__card { padding: 9px; }
    .fpc-page .fpc-why__media { height: clamp(96px, 26vw, 130px); }
    .fpc-page .fpc-why__title { font-size: 15px; }

    .fpc-page .fpc-story { padding: 36px 15px; gap: 14px; }
    .fpc-page .fpc-insp__filters { gap: 5px; margin: 15px 0; }
    .fpc-page .fpc-insp__filter { padding: 8px 11px; }
    .fpc-page .fpc-insp__grid { gap: 8px; }
}

@media (max-width: 420px) {
    .fpc-page .fpc-why,
    .fpc-page .fpc-insp,
    .fpc-page .fpc-story,
    .fpc-page .fpc-upload { padding-left: 15px; padding-right: 15px; }

    .fpc-page .fpc-layouts__samples { grid-template-columns: minmax(0, 1fr); }
    .fpc-page .fpc-layouts__scene { height: 175px; }
    .fpc-page .fpc-insp__media { min-height: 190px; }
}

@media (max-width: 360px) {
    .fpc-page .fpc-why__cards,
    .fpc-page .fpc-insp__grid { grid-template-columns: minmax(0, 1fr); }
    .fpc-page .fpc-layouts__count { font-size: 24px; }
    .fpc-page .fpc-upload__title { font-size: 20px; }
}

/* The foundation already damps every transition under reduced motion; this
   block additionally removes the sample card's translate, which is movement
   rather than a timed transition. */
@media (prefers-reduced-motion: reduce) {
    .fpc-page .fpc-layouts__sample:hover,
    .fpc-page .fpc-layouts__sample:focus-visible { transform: none; }
}