/* ==========================================================================
   Punch! Software (punchsoftware.com) — tokens + sections only this shop has.
   Paper ground, slate ink, an evergreen garden band. Headlines at normal width.
   ========================================================================== */
:root {
  --pn-ground: #FAFAF8;  --pn-band: #EFEEE9;  --pn-sheet: #FFFFFF;
  --pn-ink: #1A2226;     --pn-steel: #5B6469;
  --pn-rule: #E2E1DB;    --pn-rule-2: #CBCAC2;
  --pn-green: #00A855;   --pn-green-ink: #00843F;  --pn-green-dk: #006A32;
  --pn-redline: #C4452F;
  --pn-ever: #103B2D; --pn-ever-2: #0B2D22; --pn-ever-tx: #E4EEE8; --pn-ever-mu: #9FBDAE;
  /* tiers: one green ramp, deeper = more capable */
  --pn-t1: #A7D8B2; --pn-t2: #62BE80; --pn-t3: #1E9A56; --pn-t4: #0E6C3D; --pn-t5: #0B3F2A;
  --pn-display-stretch: 100%; --pn-display-weight: 780;
  --pn-logo-h: 40px;
  --pn-hero-l: .92fr; --pn-hero-r: 1.08fr;
  --pn-hero-size: clamp(2.8rem, 5.6vw, 5rem);
  --pn-chooser-qs: 2;
  --bs-primary-rgb: 0, 132, 63;
}
.pn-hero .pn-display em { font-style: normal; color: var(--pn-green-ink); }
.pn-chooser { grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .pn-chooser { grid-template-columns: 1fr; } }

/* hero scene chips */
.pn-scenes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pn-scene { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid var(--pn-rule-2); border-radius: 30px; background: var(--pn-sheet); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 620; }
.pn-scene img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.pn-scene[aria-pressed="true"] { border-color: var(--pn-ink); box-shadow: inset 0 0 0 1px var(--pn-ink); }

/* edition card top: cover + floors drawn to the real floor count */
.pn-ed__top { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: end; margin: 18px 0 14px; }
.pn-ed__top img { width: 92px; height: auto; border-radius: 2px; box-shadow: 0 10px 18px -8px rgba(26,34,38,.45); }
.pn-ed__floors { display: grid; gap: 6px; color: var(--pn-green-ink); }
.pn-ed__floors span { font: 500 .7rem var(--pn-f-mono); color: var(--pn-steel); }
/* one bar per floor, stacked from the bottom: 4, 4, 6, 12, 20 */
.pn-floorbars { display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 1.2px; height: 64px; width: 46px; }
.pn-ed__floors .pn-floorbars { color: var(--pn-green-ink); }
.pn-floorbars i { display: block; height: 2px; background: currentColor; border-radius: .5px; flex: none; }

/* in-app demos */
.pn-demo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(26px, 4vw, 60px); align-items: center; }
@media (max-width: 960px) { .pn-demo { grid-template-columns: 1fr; } }
.pn-demo__tabs { display: grid; border-top: 1.5px solid var(--pn-ink); }
.pn-demo__tab { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--pn-rule); background: none; text-align: left; cursor: pointer; font: inherit; color: var(--pn-ink); }
.pn-demo__tab b { font-weight: 720; font-size: 1.08rem; letter-spacing: -.01em; }
.pn-demo__tab span { grid-column: 1 / -1; color: var(--pn-steel); font-size: .9rem; line-height: 1.45; display: none; }
.pn-demo__tab .pn-chip { grid-column: 2; grid-row: 1; align-self: center; }
.pn-demo__tab[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--pn-green); padding-left: 14px; }
.pn-demo__tab[aria-selected="true"] b { color: var(--pn-green-ink); }
.pn-demo__tab[aria-selected="true"] span { display: block; }
.pn-growth { position: relative; aspect-ratio: 1200 / 571; border-radius: 4px; overflow: hidden; background: #DDE3DE; }
.pn-growth img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s; }
.pn-growth__steps { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 4px; padding: 4px; background: rgba(20,26,28,.72); border-radius: 4px; }
.pn-growth__steps button { border: 0; background: none; color: #fff; font: 600 .74rem var(--pn-f-mono); padding: 6px 10px; border-radius: 3px; cursor: pointer; }
.pn-growth__steps button[aria-pressed="true"] { background: #fff; color: var(--pn-ink); }

/* rooms gallery */
.pn-rooms { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 150px; gap: 10px; }
.pn-room { position: relative; margin: 0; border-radius: 4px; overflow: hidden; background: #DDE3DE; }
.pn-room img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pn-room:hover img { transform: scale(1.035); }
.pn-room figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; background: rgba(255,255,255,.94); border-radius: 2px; font: 500 .72rem var(--pn-f-mono); color: var(--pn-ink); }
.pn-room--a { grid-column: span 6; grid-row: span 3; } .pn-room--b, .pn-room--c { grid-column: span 3; grid-row: span 2; }
.pn-room--d, .pn-room--e { grid-column: span 3; grid-row: span 1; } .pn-room--f, .pn-room--g, .pn-room--h { grid-column: span 4; grid-row: span 2; }
@media (max-width: 860px) { .pn-rooms { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; } .pn-room { grid-column: span 1 !important; grid-row: span 1 !important; } .pn-room--a { grid-column: span 2 !important; grid-row: span 2 !important; } }

/* Copilot: the evergreen band */
.pn-ever { background: var(--pn-ever); color: var(--pn-ever-tx); }
.pn-ever .pn-label { color: #7FD4A2; }
.pn-ever .pn-h2 { color: #fff; }
.pn-ever .pn-lede { color: var(--pn-ever-mu); }
.pn-cp { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
@media (max-width: 980px) { .pn-cp { grid-template-columns: 1fr; } }
.pn-cp__caps { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); }
.pn-cp__caps li { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.pn-cp__caps b { color: #fff; font-weight: 700; }
.pn-cp__caps span { color: var(--pn-ever-mu); font-size: .92rem; line-height: 1.45; }
.pn-cp__buy { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; padding: 18px 20px; border-radius: 4px; background: var(--pn-ever-2); }
.pn-cp__buy b { color: #fff; font-weight: 740; font-size: 1.05rem; display: block; }
.pn-cp__buy span { font-size: .86rem; color: var(--pn-ever-mu); }
.pn-cp__buy .pn-btn { background: #fff; color: var(--pn-ever); }
.pn-cp__buy .pn-btn:hover { background: #7FD4A2; color: var(--pn-ever-2); }
.pn-flip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .pn-flip { grid-template-columns: repeat(2, 1fr); } }
.pn-flip button { position: relative; aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: 3px; overflow: hidden; cursor: pointer; background: #1B4A3A; }
.pn-flip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.pn-flip img + img { opacity: 0; }
.pn-flip button:hover img + img, .pn-flip button[aria-pressed="true"] img + img { opacity: 1; }
.pn-flip span { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; background: rgba(11,45,34,.84); color: #fff; font: 500 .68rem var(--pn-f-mono); border-radius: 2px; }
.pn-flip__note { margin-top: 10px; font: .74rem var(--pn-f-mono); color: var(--pn-ever-mu); }
.pn-quoteline { margin: 28px 0 0; padding-left: 16px; border-left: 2px solid var(--pn-green); }
.pn-quoteline p { font-size: 1.05rem; line-height: 1.5; color: #fff; }
.pn-quoteline cite { display: block; margin-top: 8px; font-style: normal; font-size: .84rem; color: var(--pn-ever-mu); }

/* plans & pros */
.pn-pros { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
@media (max-width: 960px) { .pn-pros { grid-template-columns: 1fr; } }
.pn-plan { border: 1px solid var(--pn-rule-2); border-radius: 4px; overflow: hidden; background: #fff; }
.pn-plan img { width: 100%; height: auto; }
.pn-pros__list { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1.5px solid var(--pn-ink); }
.pn-pros__list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 13px 0; border-bottom: 1px solid var(--pn-rule); }
.pn-pros__list b { font-weight: 700; }
.pn-pros__list span:not(.pn-chip) { grid-column: 1; color: var(--pn-steel); font-size: .88rem; line-height: 1.45; }
.pn-pros__list .pn-chip { grid-row: 1; grid-column: 2; align-self: start; }

/* brands, specialty titles, content packs */
.pn-brandrow { display: flex; flex-wrap: wrap; border-block: 1px solid var(--pn-rule); }
.pn-brandrow span { flex: 1 1 12%; min-width: 120px; padding: 18px 10px; text-align: center; font-stretch: 112%; font-weight: 760; font-size: 1.05rem; letter-spacing: .02em; color: #3D474C; border-left: 1px solid var(--pn-rule); }
.pn-brandrow span:first-child { border-left: 0; }
.pn-extras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
@media (max-width: 1000px) { .pn-extras { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pn-extras { grid-template-columns: 1fr; } }
.pn-xcard { display: grid; grid-template-columns: 74px 1fr; gap: 14px; padding: 16px; background: var(--pn-sheet); border: 1px solid var(--pn-rule); border-radius: 4px; align-items: start; }
.pn-xcard img { width: 74px; height: auto; border-radius: 2px; box-shadow: 0 8px 14px -8px rgba(26,34,38,.5); }
.pn-xcard b { display: block; font-weight: 720; line-height: 1.25; }
.pn-xcard p { color: var(--pn-steel); font-size: .84rem; line-height: 1.45; margin-top: 4px; }
.pn-xcard .pn-price { margin-top: 8px; font: 600 .86rem var(--pn-f-mono); color: var(--pn-ink); }
.pn-packs { margin-top: 14px; padding: 18px 20px; background: var(--pn-sheet); border: 1px solid var(--pn-rule); border-radius: 4px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px 24px; align-items: center; }
@media (max-width: 860px) { .pn-packs { grid-template-columns: 1fr; } }
.pn-packs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pn-packs li { padding: 5px 10px; border: 1px solid var(--pn-rule-2); border-radius: 20px; font-size: .82rem; }
.pn-packs li em { font-style: normal; font-family: var(--pn-f-mono); font-size: .72rem; color: var(--pn-steel); margin-left: 4px; }

/* proof + learn */
.pn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1.5px solid var(--pn-ink); }
@media (max-width: 760px) { .pn-stats { grid-template-columns: 1fr; } }
.pn-stat { padding: 26px 24px 24px; border-left: 1px solid var(--pn-rule); }
.pn-stat:first-child { border-left: 0; padding-left: 0; }
.pn-stat b { display: block; font-weight: 780; font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: -.035em; line-height: 1; }
.pn-stat span { display: block; margin-top: 8px; color: var(--pn-steel); font-size: .92rem; max-width: 32ch; }
.pn-learn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
@media (max-width: 960px) { .pn-learn { grid-template-columns: 1fr; } }