:root{
  --paper:#FFFFFF; --paper2:#EEF3F9; --paper3:#E1E9F3;
  --ink:#26303D; --ink2:#4C5A6C; --ink3:#8291A3; --ink4:#C3CEDA;
  --rule:rgba(30,37,48,0.10);
  --accent:#F1BA55; --accent-ink:#272727;
  --ochre:#A87B2E; --ochre-ink:#FFFFFF;
  --ochre-tint:rgba(168,123,46,0.14);
  --gold:#F1BA55;
  --up:#5FA05F;
  --series-blue:#4F7BB3;
  --page-bg:#F6F9FC;
  --nav-bg:rgba(255,255,255,0.92);
  --shadow-card:0 10px 26px rgba(38,48,61,0.09);
  --shadow-lip-accent:0 4px 0 #5f7fac;
  --shadow-lip-ochre:0 4px 0 #7f5e1f;
  --hero-grad:linear-gradient(160deg,#EEF3F9 0%,#F6F9FC 46%,#FFFFFF 100%);
  --print-bg:#FFFFFF; --print-ink:#26303D;
  --shadow-print:0 14px 30px rgba(38,48,61,0.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#272727; --paper2:#302D2A; --paper3:#3A3632;
    --ink:#EDE6DA; --ink2:#C9BFB0; --ink3:#948A7C; --ink4:#5C554C;
    --rule:rgba(237,230,218,0.10);
    --accent:#D4AA7D; --accent-ink:#1A1410;
    --ochre:#F3D98F; --ochre-ink:#2A2010;
    --ochre-tint:rgba(243,217,143,0.16);
    --gold:#F1BA55;
    --up:#7AC85F;
    --series-blue:#7DA6D9;
    --page-bg:#1F1F1F;
    --nav-bg:rgba(24,22,20,0.90);
    --shadow-card:0 10px 26px rgba(0,0,0,0.38);
    --shadow-lip-accent:0 4px 0 #a9825a;
    --shadow-lip-ochre:0 4px 0 #c2ab6a;
    --hero-grad:linear-gradient(160deg,#302D2A 0%,#272727 55%,#1F1F1F 100%);
    --shadow-print:0 14px 30px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"]{
  --paper:#272727; --paper2:#302D2A; --paper3:#3A3632;
  --ink:#EDE6DA; --ink2:#C9BFB0; --ink3:#948A7C; --ink4:#5C554C;
  --rule:rgba(237,230,218,0.10);
  --accent:#D4AA7D; --accent-ink:#1A1410;
  --ochre:#F3D98F; --ochre-ink:#2A2010;
  --ochre-tint:rgba(243,217,143,0.16);
  --gold:#F1BA55;
  --up:#7AC85F;
  --series-blue:#7DA6D9;
  --page-bg:#1F1F1F;
  --nav-bg:rgba(24,22,20,0.90);
  --shadow-card:0 10px 26px rgba(0,0,0,0.38);
  --shadow-lip-accent:0 4px 0 #a9825a;
  --shadow-lip-ochre:0 4px 0 #c2ab6a;
  --hero-grad:linear-gradient(160deg,#302D2A 0%,#272727 55%,#1F1F1F 100%);
  --shadow-print:0 14px 30px rgba(0,0,0,0.5);
}

*{box-sizing:border-box;}
/* Pages fade into each other instead of flashing white (browsers without it just load). */
@media (prefers-reduced-motion: no-preference){ @view-transition{navigation:auto;} }
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--page-bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; font-weight:600; margin:0; text-wrap:balance; color:var(--ink);}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;}
button{font:inherit;}
::selection{background:var(--accent); color:var(--accent-ink);}

.wrap{max-width:1120px; margin:0 auto; padding-inline:20px;}
.wrap-narrow{max-width:760px;}

/* ── Header ─────────────────────────────────────────────── */
header.site{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:var(--nav-bg); backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-top:3px solid var(--gold);
  border-bottom:1px solid var(--rule);
}
.navrow{display:flex; align-items:center; justify-content:space-between; padding-block:14px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer;}
.brand svg{display:block;}
.brand-mark{display:block; border-radius:22%; box-shadow:0 0 0 1px var(--rule);}
.brand-word{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:19px; letter-spacing:-0.2px; color:var(--ink);}
nav.primary{display:flex; align-items:center; gap:28px;}
nav.primary a{
  text-decoration:none; color:var(--ink2); font-size:14.5px; font-weight:600;
  letter-spacing:0.1px; cursor:pointer; padding-block:4px;
}
nav.primary a{position:relative;}
nav.primary a::after{content:""; position:absolute; left:-2px; right:-2px; bottom:-5px; height:7px; background:var(--ochre);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8'%3E%3Cpath d='M2 5 Q15 1 30 4.5 T58 3' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8'%3E%3Cpath d='M2 5 Q15 1 30 4.5 T58 3' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
nav.primary a.active, nav.primary a:hover{color:var(--ink);}
nav.primary a.active::after, nav.primary a:hover::after{transform:scaleX(1);}
.navactions{display:flex; align-items:center; gap:14px;}
.icon-btn{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0;
  background:var(--paper2); color:var(--ink2); border:1px solid var(--rule); border-radius:50%;
  cursor:pointer; transition:color .12s ease, background .12s ease;
}
.icon-btn:hover, .icon-btn[aria-current]{color:var(--ink); background:var(--paper3);}
.icon-btn svg{display:block;}
.theme-toggle .icon-moon{display:none;}
.theme-toggle.is-dark .icon-sun{display:none;}
.theme-toggle.is-dark .icon-moon{display:block;}
.hamburger{display:none; background:none; border:0; padding:6px; cursor:pointer;}
.hamburger span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px;}

/* ── Buttons ────────────────────────────────────────────── */
/* The green street sign: the call to action on every page and in the header. */
.sign-btn{
  display:inline-block; margin-top:16px; padding:10px 22px 11px; border-radius:6px;
  background:#2F6B4F; color:#F4F0E6; font-weight:700; font-size:16px; text-decoration:none;
  border:2px solid #F4F0E6; box-shadow:0 0 0 3px #2F6B4F, 0 6px 14px rgba(0,0,0,.18);
  transition:transform .25s cubic-bezier(.3,1.6,.5,1);
}
.sign-btn:hover{transform:translateY(-2px) rotate(-1deg);}
.sign-btn-sm{margin-top:0; padding:6px 14px 7px; font-size:13.5px; border-width:1.5px; box-shadow:0 0 0 2px #2F6B4F, 0 3px 8px rgba(0,0,0,.14);}
@media (prefers-reduced-motion: reduce){ .sign-btn, nav.primary a::after{transition:none;} }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:9999px; padding:12px 22px; font-weight:700; font-size:14.5px;
  text-decoration:none; cursor:pointer; border:0; transition:transform .12s ease, box-shadow .12s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--ochre); color:var(--ochre-ink); box-shadow:var(--shadow-lip-ochre);}
.btn-primary:hover{transform:translateY(-1px);}
.btn-primary:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,0.2);}
.btn-secondary{background:var(--paper2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule);}
.btn-secondary:hover{background:var(--paper3);}
.btn-ghost{background:transparent; color:var(--ochre); padding:12px 6px;}
.btn-sm{padding:9px 16px; font-size:13px;}
.btn-block{width:100%;}

/* ── Pages / sections ──────────────────────────────────────*/
section{padding-block:64px;}
section.tight{padding-block:44px;}
.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--ochre);
}
.lede{color:var(--ink2); font-size:17.5px; max-width:640px; margin-top:14px;}
.section-head{margin-bottom:40px;}
.section-head h2{font-size:clamp(26px,3.4vw,34px); margin-top:6px;}
.section-head-narrow{max-width:680px;}
.section-spaced{margin-top:64px;}
.section-head h2.section-sub{font-size:24px;}
.lede-sm{font-size:15.5px;}
.page-title{font-size:clamp(30px,4.4vw,44px); margin-top:8px;}
.legal-title{font-size:clamp(26px,3.6vw,36px); margin-top:8px; margin-bottom:10px;}

/* ── Hero ───────────────────────────────────────────────── */
.hero{background:var(--hero-grad); border-bottom:1px solid var(--rule);}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:52px; align-items:center; padding-block:76px;}
.hero h1{font-size:clamp(34px,5vw,54px); line-height:1.06; letter-spacing:-0.5px;}
.hero .lede{font-size:19px; max-width:520px;}
.hero-ctas{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap;}
.hero-art{position:relative; height:380px;}

.hero-badge{
  position:absolute; left:20px; bottom:20px; background:var(--paper); border-radius:16px; padding:14px 16px;
  box-shadow:var(--shadow-card); display:flex; gap:12px; align-items:center; max-width:250px;
}
.hero-badge .num{font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:22px; line-height:1;}
.hero-badge .lbl{font-size:12px; color:var(--ink3); margin-top:2px;}

/* ── Stat tiles ─────────────────────────────────────────── */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.stat-strip-3col{grid-template-columns:repeat(3,1fr);}
.stat-strip-2col{grid-template-columns:repeat(2,1fr);}
.stat-group + .stat-group{margin-top:32px;}
.stat-group-title{font-size:18px; margin-bottom:12px;}
.stat-card{
  background:var(--paper); border-radius:20px; padding:20px 18px; box-shadow:var(--shadow-card);
  border:1px solid var(--rule);
}
.stat-card .icon{width:34px; height:34px; border-radius:10px; background:var(--paper2); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--ochre);}
.stat-card .num{font-family:'Fraunces',Georgia,serif; font-size:30px; font-weight:700; letter-spacing:-0.3px;}
.stat-card .lbl{font-size:13px; color:var(--ink3); margin-top:2px; font-weight:600;}
.example-note{font-size:12.5px; color:var(--ink3); margin-top:14px; text-align:center;}
.example-note b{color:var(--ink2); border-bottom:1px dotted var(--ink4); cursor:help;}

/* ── How it works steps ───────────────────────────────────*/
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.steps-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1100px){ .steps-4{grid-template-columns:repeat(2,1fr);} }
.step-card{background:var(--paper); border-radius:20px; padding:26px; border:1px solid var(--rule); box-shadow:var(--shadow-card);}
.step-num{
  width:30px; height:30px; border-radius:50%; background:var(--paper2); color:var(--ink2);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; margin-bottom:16px;
}
.step-card h3{font-size:19px; margin-bottom:8px;}
.step-card p{color:var(--ink2); font-size:14.5px;}
.steps-compact .step-card h3{font-size:16px;}



/* ── Get involved ─────────────────────────────────────────*/
.type-nav{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:32px;}
.type-nav-item{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  background:var(--paper); border:1px solid var(--rule); border-radius:16px; padding:16px 18px;
  cursor:pointer; box-shadow:var(--shadow-card); transition:transform .12s ease, border-color .12s ease; font:inherit;
}
.type-nav-item:hover{transform:translateY(-2px); border-color:var(--ochre);}
.type-nav-item .icon{width:38px; height:38px; border-radius:11px; background:var(--paper2); color:var(--ochre); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.type-nav-title{display:block; font-weight:700; font-size:14.5px; color:var(--ink);}
.type-nav-sub{display:block; font-size:12.5px; color:var(--ink3); margin-top:2px;}
a.type-nav-item{text-decoration:none; color:inherit;}
.split{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}

/* ── Download ─────────────────────────────────────────────*/
.store-row{display:flex; gap:14px; flex-wrap:wrap;}
.store-btn{
  display:flex; align-items:center; gap:10px; background:var(--ink); color:var(--paper); border-radius:14px;
  padding:12px 20px; text-decoration:none; box-shadow:var(--shadow-card);
}
.store-btn[aria-disabled="true"]{opacity:0.5; cursor:not-allowed; box-shadow:none;}
.store-btn .lines .l1{font-size:10.5px; opacity:0.75;}
.store-btn .lines .l2{font-size:16px; font-weight:700; font-family:'Fraunces',Georgia,serif;}
.waitlist-form input{
  border:1px solid var(--rule); background:var(--paper); color:var(--ink); border-radius:12px;
  padding:11px 13px; font:inherit; font-size:14.5px;
}
.waitlist-form input:invalid:not(:placeholder-shown){box-shadow:0 0 0 1px #c0392b;}
.form-status{font-size:13px; margin-top:10px; min-height:1.3em;}
.form-status.is-ok{color:var(--up);}
.form-status.is-err{color:#c0392b;}

/* ── Contact / forms ──────────────────────────────────────*/
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; font-weight:700; color:var(--ink2); margin-bottom:6px;}
.field input, .field textarea{
  width:100%; border:1px solid var(--rule); background:var(--paper); color:var(--ink); border-radius:12px;
  padding:11px 13px; font:inherit; font-size:14.5px;
}
.field textarea{min-height:110px; resize:vertical;}
.social-row{display:flex; gap:10px; margin-top:18px;}
.social-icon{text-decoration:none; transition:transform .15s ease; width:38px; height:38px; border-radius:50%; background:var(--paper2); display:flex; align-items:center; justify-content:center; color:var(--ink2);}
a.social-icon:hover{transform:translateY(-2px);}

/* ── Footer ────────────────────────────────────────────────*/
footer.site{background:var(--paper); padding-bottom:28px; margin-top:96px;}
/* A low wall along the top with a cat asleep on it: every page ends on a small scene. */
.foot-wall{position:relative; height:44px; border-top:6px solid #C8BBA6;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='44'%3E%3Cpath d='M0 21H92M0 43H92M1 0V21M47 22V43' stroke='%23C8BBA6' stroke-width='2' fill='none'/%3E%3C/svg%3E") 0 0/92px 44px, #D9CDBB;}
:root[data-theme="dark"] .foot-wall{border-top-color:#2E3459; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='44'%3E%3Cpath d='M0 21H92M0 43H92M1 0V21M47 22V43' stroke='%23333A61' stroke-width='2' fill='none'/%3E%3C/svg%3E") 0 0/92px 44px, #3C4470;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .foot-wall{border-top-color:#2E3459; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='44'%3E%3Cpath d='M0 21H92M0 43H92M1 0V21M47 22V43' stroke='%23333A61' stroke-width='2' fill='none'/%3E%3C/svg%3E") 0 0/92px 44px, #3C4470;} }
.foot-wall .wrap{position:relative; height:100%;}
.foot-cat{position:absolute; right:clamp(8px,8vw,120px); bottom:calc(100% + 4px); display:block;}
.foot-zzz text{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:11px; fill:var(--ink3); opacity:0; animation:foot-z 4.2s ease-out infinite;}
.foot-zzz text:nth-child(2){font-size:13px; animation-delay:1.4s;}
.foot-zzz text:nth-child(3){font-size:15px; animation-delay:2.8s;}
@keyframes foot-z{0%{opacity:0; transform:translateY(4px);} 30%{opacity:.9;} 100%{opacity:0; transform:translateY(-8px);}}
@media (prefers-reduced-motion: reduce){ .foot-zzz text{animation:none; opacity:.7;} }
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding-top:44px;}
.foot-brand{align-self:start;}
.foot-line{margin-top:12px; font-family:'Caveat',cursive; font-weight:600; font-size:22px; line-height:1.1; max-width:260px; color:var(--ink2); transform:rotate(-1.5deg); transform-origin:left;}
.foot-col a{display:block; text-decoration:none; color:var(--ink2); font-weight:600; font-size:14px; margin-bottom:10px; cursor:pointer;}
.foot-col a:hover{color:var(--ink);}
.foot-bottom{margin-top:30px; padding-top:18px; border-top:1px solid var(--rule); font-size:12.5px; color:var(--ink3);}

.legal-box{background:var(--paper); border:1px solid var(--rule); border-radius:20px; padding:36px; color:var(--ink2); font-size:14.5px; line-height:1.7;}

/* ── Responsive ────────────────────────────────────────────*/
@media (max-width:900px){
  /* The phone menu is a note pinned under the header, like the notes on Get involved. */
  nav.primary{position:fixed; top:74px; left:16px; right:16px; background:#FFFDF8; flex-direction:column; align-items:stretch; padding:30px 22px 12px; gap:0; border-radius:3px; box-shadow:0 14px 26px rgba(20,12,6,.22); transform:translateY(-10px) rotate(-.6deg); opacity:0; pointer-events:none; transition:transform .22s cubic-bezier(.3,1.4,.5,1), opacity .16s ease;}
  nav.primary::before{content:""; position:absolute; left:50%; top:10px; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #F08A6A, #C8433E 70%); box-shadow:0 3px 4px rgba(0,0,0,.3);}
  nav.primary a, nav.primary a.active, nav.primary a:hover{padding:12px 4px; color:#2B2622; font-size:16px; border-bottom:1px dashed #D9CDBB;}
  nav.primary a:last-child{border-bottom:0;}
  nav.primary a::after{left:2px; right:auto; width:64px; bottom:6px;}
  nav.primary.open{transform:translateY(0) rotate(-.6deg); opacity:1; pointer-events:auto;}
  .hamburger{display:block;}
  .navactions .sign-btn{display:none;}
  .hero-grid{grid-template-columns:1fr; padding-block:40px;}
  .hero-art{height:280px; order:-1;}
  .stat-strip{grid-template-columns:1fr 1fr;}
  .steps, .type-nav{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr; gap:24px;}
  .split{grid-template-columns:1fr; gap:24px;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:26px;}
  .foot-brand{grid-column:1/-1;}
}
@media (max-width:520px){
  .stat-strip{grid-template-columns:1fr 1fr;}
  /* Long figures (e.g. "1.5–2M") don't fit two-up on small phones. */
  .stat-strip-stack{grid-template-columns:1fr;}
}
@media (max-width:360px){
  /* Keep the brand on one line next to the header icons. */
  .navactions{gap:8px;}
  .brand{gap:8px;}
  .brand-word{font-size:17px; white-space:nowrap;}
}

/* ── Legal pages (privacy.html, terms.html) ───────────────*/
.legal-doc{color:var(--ink2); font-size:15px; line-height:1.7;}
.legal-doc .legal-meta{color:var(--ink3); font-size:13.5px; margin-bottom:22px;}
.legal-doc h3{font-size:20px; margin:34px 0 10px; scroll-margin-top:84px;}
.legal-doc h4{font-size:15px; font-weight:700; color:var(--ink); margin:20px 0 6px;}
.legal-doc p{margin:0 0 12px;}
.legal-doc ul{margin:0 0 14px; padding-left:22px;}
.legal-doc li{margin-bottom:6px;}
.legal-doc a{color:var(--ochre); font-weight:600;}
.legal-doc .legal-box{margin-bottom:8px;}
.legal-doc .legal-box ul{margin-bottom:0;}

/* ── Instant prints (Home hero, How it works) ─────────────*/
/* Cats shown the way the app shows them: a white instant print, held slightly crooked. */
.prints{position:relative; height:430px;}
.print{
  position:absolute; margin:0; width:52%; background:var(--print-bg); padding:10px 10px 0; border-radius:6px;
  box-shadow:var(--shadow-print); transition:transform .25s ease;
}
.print img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:2px;}
.print figcaption{font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:16px; color:var(--print-ink); padding:9px 4px 11px;}
.print-a{left:4%; top:6%; transform:rotate(-7deg);}
.print-b{right:2%; top:0; transform:rotate(5deg); width:46%;}
.print-c{left:26%; top:34%; transform:rotate(-1.5deg); z-index:1;}
.prints .hero-badge{z-index:2; left:auto; right:0; bottom:6px;}
@media (hover:hover){ .print:hover{transform:rotate(0) scale(1.03); z-index:3;} }
@media (prefers-reduced-motion: reduce){ .print{transition:none;} }

/* ── Live map (impact.html) ────────────────────────────*/
.cat-map-wrap{position:relative; margin-top:28px; border-radius:20px; overflow:hidden; border:1px solid var(--rule); box-shadow:var(--shadow-card); isolation:isolate;}
.cat-map{height:min(70vh,560px); min-height:380px; background:var(--paper2);}
.cat-map-status{position:absolute; z-index:500; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; padding:10px 16px; border-radius:999px; background:var(--paper); color:var(--ink2); font-size:14.5px; box-shadow:var(--shadow-card); text-align:center; max-width:calc(100% - 32px);}
.cat-map-note{color:var(--ink3); font-size:14px; margin-top:12px; max-width:680px;}
/* A cat on the map: a tiny instant print standing on its spot, with how many cats it stands for. */
.map-print-wrap{background:none; border:0;}
.map-print{position:relative; display:block; width:64px; height:74px; padding:4px 4px 0; background:var(--print-bg); border-radius:4px; box-shadow:0 4px 10px rgba(38,48,61,0.35); transition:transform .15s ease;}
.cat-map .map-print-wrap .map-print img{display:block; width:56px; height:56px; object-fit:cover; border-radius:2px; background:var(--paper2);}
.map-print-count{position:absolute; top:-8px; right:-8px; min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:12.5px; font-weight:700; line-height:24px; text-align:center; box-shadow:0 0 0 2px var(--print-bg);}
@media (hover:hover){ .map-print-wrap:hover .map-print{transform:scale(1.08);} }
@media (prefers-reduced-motion: reduce){ .map-print{transition:none;} }
.map-panel{margin-top:24px;}
.map-panel-title{font-size:20px;}
.map-panel-prints{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:16px;}
.map-panel-prints .print{position:relative; width:auto; padding:6px 6px 0;}
.map-panel-prints .print:nth-child(odd){transform:rotate(-2deg);}
.map-panel-prints .print:nth-child(even){transform:rotate(2deg);}
.map-panel-prints .print-name{display:block; font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:13px; color:var(--print-ink); padding:6px 2px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.map-panel-more{color:var(--ink3); font-size:14px; margin-top:14px;}
@media (max-width:760px){ .map-panel-prints{grid-template-columns:repeat(3,1fr);} }

/* ── App screens (Home, How it works) ─────────────────────*/
.screens{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.screen-shot{
  background:var(--paper2); border:1px solid var(--rule); border-radius:24px; padding:24px 0;
  display:flex; justify-content:center;
}
.screen-shot img{width:68%; height:auto; filter:drop-shadow(0 10px 18px rgba(38,48,61,0.18));}
.screen-card h3{font-size:19px; margin-top:16px;}
.screen-card p{color:var(--ink2); font-size:14.5px; margin-top:6px;}


@media (max-width:900px){
  .prints{height:360px;}
  .screens{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .prints{height:300px;}
  .print figcaption{font-size:14px; padding:7px 2px 9px;}
  .screens{gap:14px;}
  .screen-shot{padding:16px 0; border-radius:18px;}
  .screen-shot img{width:74%;}
  .screen-card h3{font-size:16px;}
  .screen-card p{font-size:13px;}
}