@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Fredoka:wght@500;600;700&family=Nunito:wght@800;900;1000&display=swap");

:root{
  --landing-red:#df202b;
  --landing-blue-left:#0752b5;
  --landing-blue-mid:#073b99;
  --landing-blue-right:#082b80;
  --landing-navy:#071b50;
  --paper:#fffaf0;
  --touch:cubic-bezier(.2,.7,.2,1);
}

.landing-page{margin:0;background:var(--landing-blue-mid);overflow-x:hidden}
.landing-page main{overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.landing-page .topbar{position:relative;z-index:20;height:76px;padding-inline:clamp(24px,6vw,108px);background:#fff}
.landing-page .brand{gap:12px;font:700 clamp(29px,2.3vw,39px)/1 'Fredoka',sans-serif;letter-spacing:-1px}
.landing-page .brand img{width:57px;height:57px;object-fit:contain;border-radius:0}
.landing-page nav{gap:clamp(18px,2vw,30px);font:700 14px/1 'Nunito',sans-serif}
.landing-page nav a{position:relative;transition:color 180ms ease}
.landing-page nav a:not(.join)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform 180ms ease}
.landing-page nav a:not(.join):hover::after,.landing-page nav a:not(.join):focus-visible::after{transform:scaleX(1)}
.landing-page nav a:hover,.landing-page nav a:focus-visible{color:var(--landing-red)}

/* Shared controls */
.landing-page .join,.landing-page .walker{transition:transform 200ms var(--touch),box-shadow 200ms var(--touch),background-color 180ms ease}
.landing-page .join{box-shadow:0 5px 13px rgba(80,0,4,.18)}
.landing-page .join:hover,.landing-page .join:focus-visible{transform:translateY(-2px);box-shadow:0 9px 20px rgba(80,0,4,.25)}
.landing-page .walker:hover,.landing-page .walker:focus-visible{transform:translateY(-2px);box-shadow:0 7px 15px rgba(22,5,8,.16)}
.landing-page .join:active,.landing-page .walker:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(22,5,8,.16)}
.landing-page a:focus-visible,.landing-page button:focus-visible,.landing-page input:focus-visible{outline:3px solid #ffbf47;outline-offset:3px}

/* Hero: one seamless image, no inset panel or photographic strip */
.landing-page .hero{position:relative;min-height:410px;padding:50px clamp(28px,7vw,118px) 66px;color:#fff;background-image:linear-gradient(90deg,rgba(0,48,39,.84) 0%,rgba(0,52,40,.61) 34%,rgba(0,45,34,.07) 67%),url('hero-wide.webp');background-size:cover;background-position:68% center;background-repeat:no-repeat}
.landing-page .hero-copy{position:relative;z-index:4;width:min(100%,430px);margin-left:clamp(55px,9.5vw,160px)}
.landing-page .hero h1{margin:0;text-transform:uppercase;font:1000 clamp(42px,3.35vw,56px)/.9 'Nunito','Arial Rounded MT Bold',sans-serif;letter-spacing:2.7px;word-spacing:4px;text-shadow:0 2px 3px rgba(0,0,0,.24)}
.landing-page .hero h1 em{font-style:normal;color:#ef2932}
.landing-page .hero-copy>p{margin:18px 0 0;font:800 17px/1.38 'Nunito',sans-serif}
.hero-form{margin-top:22px}
.landing-page .email{height:46px;display:flex;align-items:center;gap:11px;max-width:420px;margin:0 0 14px;padding:0 14px;color:#68707c;background:#fff;border:1px solid transparent;border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,.18);transition:border-color 180ms ease,box-shadow 180ms ease}
.landing-page .email:focus-within{border-color:#ef2932;box-shadow:0 0 0 4px rgba(239,41,50,.18),0 6px 16px rgba(0,0,0,.18)}
.landing-page .email input{width:100%;border:0;outline:0;background:transparent;color:#283247;font:500 15px/1.2 Arial,sans-serif}
.email-icon{font-size:16px;color:#536071}
.landing-page .actions{display:flex;align-items:center;gap:14px}
.landing-page .actions .join,.landing-page .walker{height:45px;min-height:45px;padding-inline:31px;font-size:15px}
.landing-page .walker{display:flex;align-items:center;justify-content:center;border:2px solid var(--landing-red);border-radius:24px;background:#fff;color:var(--landing-red);text-decoration:none;font:700 15px/1 'Nunito',sans-serif}

/* One hand-cut boundary. The path lowers locally beneath the original rock. */
.landing-page .story{isolation:isolate;position:relative;z-index:1;margin:0;padding:48px clamp(24px,4vw,64px) 42px;min-height:620px;overflow:visible;clip-path:none;color:#fff;text-align:center;background:linear-gradient(90deg,var(--landing-blue-left) 0%,var(--landing-blue-mid) 55%,var(--landing-blue-right) 100%)}
.section-edge{position:absolute;z-index:2;left:0;top:-78px;width:100%;height:80px;filter:none}
.section-edge path{fill:url(#section-edge-blue)}

/* Static, subliminal brand texture */
.paw-field{position:absolute;z-index:-1;inset:0;pointer-events:none}
.paw{position:absolute;width:29px;height:29px;background:#fff;opacity:.024;filter:blur(.65px);transform:rotate(var(--paw-rotate,0deg));-webkit-mask:url('paw-mark.svg') center/contain no-repeat;mask:url('paw-mark.svg') center/contain no-repeat}
.paw-one{left:5%;top:24%;--paw-rotate:-17deg}.paw-two{right:7%;top:20%;--paw-rotate:13deg;width:24px}.paw-three{left:8%;bottom:17%;--paw-rotate:21deg;width:27px}.paw-four{right:6%;bottom:13%;--paw-rotate:-12deg}.paw-five{left:50%;bottom:6%;--paw-rotate:5deg;width:22px}

/* Story hierarchy */
.story-intro{position:relative;z-index:1;margin:0 auto 40px}
.landing-page .story h2{margin:0;text-transform:uppercase;font:900 clamp(34px,3vw,46px)/1.02 'Nunito',sans-serif;letter-spacing:.5px}
.landing-page .story h2 em{font-style:normal;color:#ef2932}
.landing-page .story-intro>p{margin:20px 0 0;font:700 clamp(18px,1.45vw,22px)/1.3 'Fredoka',sans-serif}

/* Handmade modular service composition */
.feature-grid{position:relative;z-index:1;width:min(100%,1260px);margin:auto;display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:26px;row-gap:24px;align-items:center}
.feature-card{--rest-y:0px;--rest-rotate:0deg;--art-scale:1;isolation:isolate;position:relative;min-height:210px;display:grid;grid-template-columns:44% minmax(0,1fr);align-items:center;gap:10px;padding:20px 22px 20px 16px;color:var(--landing-navy);text-align:left;background:transparent;border:0;filter:drop-shadow(0 8px 10px rgba(0,18,65,.18));transform:translateY(var(--rest-y)) rotate(var(--rest-rotate));transform-origin:50% 20%;transition:transform 205ms var(--touch),filter 205ms var(--touch)}
.feature-card::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(165deg,#fffefb,#fff9f0 70%,#fff6e8);border:1px solid rgba(120,80,40,.08);border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 4px 14px rgba(0,20,60,.10);transform:none}
.feature-card:hover{transform:translateY(calc(var(--rest-y) - 3px)) rotate(0deg);filter:drop-shadow(-1px 13px 14px rgba(0,15,55,.25))}
.landing-page .feature-grid .feature-icon{position:relative;z-index:1;width:100%;height:168px;display:grid;place-items:center;margin:0;background:transparent;border-radius:0;overflow:visible;transition:transform 205ms var(--touch)}
.feature-icon img{display:block;width:100%;height:100%;max-width:168px;max-height:154px;object-fit:contain;object-position:center;transform:scale(var(--art-scale));filter:drop-shadow(0 3px 3px rgba(22,34,59,.07));transition:transform 205ms var(--touch)}
.feature-card:hover .feature-icon img{transform:translate(-1px,-2px) rotate(-.6deg) scale(var(--art-scale))}
.feature-copy{position:relative;z-index:2;min-width:0}
.feature-card h3{margin:0 0 9px;color:var(--landing-navy);font:700 18px/1.14 'Fredoka',sans-serif}
.feature-card p{margin:0;color:#0a2459;font:500 13.5px/1.44 'Fredoka',sans-serif}

.card-health{width:100%;justify-self:stretch;min-height:210px;--rest-y:-3px;--rest-rotate:-.6deg;--art-scale:1.12}.card-health::before{border-radius:22px}
.card-walker{width:100%;justify-self:stretch;min-height:210px;--rest-y:4px;--rest-rotate:.5deg;--art-scale:1.12}.card-walker::before{border-radius:22px}
.card-support{width:100%;justify-self:stretch;min-height:210px;grid-template-columns:minmax(0,1fr) 46%;--rest-y:-3px;--rest-rotate:-.5deg;--art-scale:1.12}.card-support::before{border-radius:22px}
.card-nearby{width:100%;justify-self:stretch;min-height:210px;--rest-y:5px;--rest-rotate:.6deg;--art-scale:1.12}.card-nearby::before{border-radius:22px}
.card-places{width:100%;justify-self:stretch;min-height:210px;--rest-y:-2px;--rest-rotate:-.4deg;--art-scale:1.12}.card-places::before{border-radius:22px}
.card-lost{width:100%;justify-self:stretch;min-height:210px;grid-template-columns:minmax(0,1fr) 46%;--rest-y:4px;--rest-rotate:.5deg;--art-scale:1.12}.card-lost::before{border-radius:22px}
.card-support .feature-copy,.card-lost .feature-copy{grid-column:1;grid-row:1}.card-support .feature-icon,.card-lost .feature-icon{grid-column:2;grid-row:1}

/* Fixed artwork zones with optical corrections, never stretching or cropping */
.card-health .feature-icon img{max-width:172px;max-height:158px}.card-walker .feature-icon img{max-width:176px;max-height:158px}.card-support .feature-icon img{max-width:170px;max-height:158px}.card-nearby .feature-icon img{max-width:174px;max-height:160px}.card-places .feature-icon img{max-width:176px;max-height:160px}.card-lost .feature-icon img{max-width:170px;max-height:158px}

/* Tape and hand-drawn accents */
.tape{position:absolute;z-index:4;top:-9px;left:50%;width:38px;height:16px;border-radius:1.5px;background:rgba(232,200,132,.92);box-shadow:inset 0 0 0 1px rgba(145,100,40,.1),0 1px 3px rgba(0,0,0,.08);transform:translateX(-50%) rotate(3deg);pointer-events:none}
.tape::after{content:"";position:absolute;inset:0;opacity:.25;background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(255,255,255,.7) 6px 7px)}
.tape-pink{background:rgba(247,164,173,.9)}.tape-purple{background:rgba(170,139,210,.85)}.tape-beige{background:rgba(232,211,155,.94)}
.card-health .tape{left:40%;transform:translateX(-50%) rotate(4deg)}.card-walker .tape{left:58%;top:-8px;width:35px;transform:translateX(-50%) rotate(-5deg)}.card-support .tape{left:45%;top:-10px;width:40px;transform:translateX(-50%) rotate(6deg)}.card-nearby .tape{left:54%;top:-8px;width:36px;transform:translateX(-50%) rotate(-6deg)}.card-places .tape{left:48%;top:-9px;width:37px;transform:translateX(-50%) rotate(2deg)}.card-lost .tape{left:60%;top:-9px;width:34px;transform:translateX(-50%) rotate(-4deg)}
.card-doodle{position:absolute;z-index:3;right:12px;bottom:8px;color:#ef3e48;font:700 30px/1 'Caveat',cursive;transform:rotate(-9deg);pointer-events:none}.card-support .card-doodle{left:9px;right:auto}.card-places .card-doodle{right:9px;color:#169c9e}.paw-doodle{left:8px;right:auto;width:23px;height:23px;background:#8f63c1;-webkit-mask:url('paw-mark.svg') center/contain no-repeat;mask:url('paw-mark.svg') center/contain no-repeat;opacity:.85;transform:rotate(-18deg)}.lost-doodle{left:11px;right:auto;color:#f0a13b;font-size:25px;transform:rotate(12deg)}

/* Final action */
.landing-page .community-cta{position:relative;z-index:1;display:inline-block;margin-top:36px;padding:0;border:0;color:#fff;text-decoration:none;font:600 clamp(36px,3vw,44px)/1 'Caveat','Segoe Print',cursive;transform:rotate(-.5deg)}
.community-cta span{position:relative;display:inline-block}.community-cta span::after{content:"";position:absolute;left:2%;right:0;bottom:-7px;height:3px;border-radius:60% 35% 55% 40%;background:#fff;transform:scaleX(.72) rotate(-.5deg);transform-origin:left;transition:transform 220ms var(--touch)}
.community-cta:hover span::after,.community-cta:focus-visible span::after{transform:scaleX(1) rotate(-.5deg)}

/* Tablet */
@media(max-width:1050px){
  .landing-page .hero-copy{margin-left:clamp(30px,5.5vw,60px)}
  .feature-grid{width:min(100%,980px);column-gap:20px}
  .feature-card{width:100%;min-height:180px;grid-template-columns:45% minmax(0,1fr);padding-inline:15px}
  .card-support,.card-lost{grid-template-columns:minmax(0,1fr) 46%}
  .landing-page .feature-grid .feature-icon{height:142px}
  .feature-icon img{max-width:150px;max-height:140px}
  .feature-card h3{font-size:17px}.feature-card p{font-size:12.5px}
}

@media(max-width:900px){
  .landing-page .topbar{height:78px}.landing-page nav a:not(.signin):not(.join){display:none}
  .landing-page .hero{min-height:460px;padding-top:58px;background-position:62% center}
  .landing-page .hero-copy{width:min(100%,390px);margin-left:0}
  .feature-grid{width:min(100%,820px);grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px;row-gap:30px}
  .feature-card{grid-template-columns:46% minmax(0,1fr)}.card-support,.card-lost{grid-template-columns:minmax(0,1fr) 47%}
  .landing-page .story{min-height:auto;padding-bottom:48px}
}

/* Mobile */
@media(max-width:620px){
  .landing-page .topbar{padding-inline:15px}.landing-page .brand img{width:50px;height:50px}.landing-page .brand{font-size:27px}.landing-page .join.small{display:none}
  .landing-page .hero{min-height:540px;padding:48px 22px 74px;background-position:65% center;background-image:linear-gradient(90deg,rgba(0,45,35,.9),rgba(0,48,37,.55) 66%,rgba(0,40,30,.2)),url('hero-wide.webp')}
  .landing-page .hero-copy{width:100%}.landing-page .hero h1{font-size:43px;letter-spacing:2px}.landing-page .hero-copy>p{font-size:16px}
  .landing-page .email{max-width:none}.landing-page .actions{flex-direction:column;align-items:stretch}.landing-page .actions .join,.landing-page .walker{width:100%}
  .section-edge{top:-55px;height:58px}
  .landing-page .story{padding:46px 17px 42px}.story-intro{margin-bottom:36px}.landing-page .story h2{font-size:32px}.landing-page .story-intro>p{font-size:18px}
  .feature-grid{width:min(100%,400px);grid-template-columns:1fr;gap:26px}
  .feature-card{width:100%;min-height:176px;grid-template-columns:44% minmax(0,1fr);--rest-y:0px!important;padding:18px 17px 17px 13px}
  .card-support,.card-lost{grid-template-columns:minmax(0,1fr) 45%}
  .landing-page .feature-grid .feature-icon{height:140px}.feature-card h3{font-size:18px}.feature-card p{font-size:13px}.card-doodle{display:none}
  .landing-page .community-cta{margin-top:32px;font-size:36px}
}

@media(hover:none){
  .feature-card:hover{transform:translateY(var(--rest-y)) rotate(var(--rest-rotate));filter:drop-shadow(0 8px 10px rgba(0,18,65,.18))}
  .feature-card:hover .feature-icon img{transform:scale(var(--art-scale))}
  .landing-page .join:hover,.landing-page .walker:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .landing-page *,.landing-page *::before,.landing-page *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .feature-card:hover{transform:translateY(var(--rest-y)) rotate(var(--rest-rotate))}
  .feature-card:hover .feature-icon img{transform:scale(var(--art-scale))}
  .landing-page .join:hover,.landing-page .walker:hover{transform:none}
}