/* Giveback Map landing page. Standalone so the page can go public without the company bundles.
   Product-led: large real screens carry the page. The look follows the prototype's redesign (next/): the Workbench base of
   ivory, ink and Newsreader; the Colorado scenes palette; and its scrapbook layer of paper grain, washi tape and tilted cards.
   Like the prototype, motion is drawn with tilt and overlap, never animated. */
@font-face{font-family:Newsreader;src:url('./newsreader.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url('./newsreader-italic.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:'DM Sans';src:url('./dm-sans.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}
:root{
  --ivory:#fffaf4;--paper:#fffefd;--ink:#17184b;--muted:#48496c;--line:#dcdbdf;--ledge:#0c0c2b;--ledge-card:#e3dbd8;
  --coral:#ff806f;--clay:#a4493d;--sky:#d6e8ee;--sky-warm:#f8e2c9;--sun:#f5c25a;--water:#86b9cc;--pine:#2f5944;
  --outline:1.5px solid var(--ink);
  /* The prototype's paper grain and kraft fibers (next/next.css). */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .09 0 0 0 0 .29 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fibers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .4' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .4 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  color:var(--ink);background:var(--ivory);font-family:'DM Sans',system-ui,sans-serif;font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:20px
}
*{box-sizing:border-box}body{margin:0;background:var(--ivory) var(--grain);background-image:var(--grain),var(--fibers)}main{overflow-x:clip}
a{color:inherit;text-underline-offset:4px}img{display:block;max-width:100%;height:auto}figure{margin:0}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
p{font-size:17px;line-height:1.7;margin:0 0 18px}
h1,h2{font-family:Newsreader,Georgia,serif;font-weight:550;letter-spacing:-.035em;margin:0}
h1{font-size:clamp(64px,7.6vw,112px);line-height:.95}h2{font-size:clamp(40px,4.3vw,58px);line-height:1.04}
h1 em,h2 em{font-style:italic;font-weight:450;color:var(--clay)}h1 em{white-space:nowrap}h2 em{display:block}
.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;line-height:1.5;margin-bottom:22px}
.eyebrow:before{content:'';flex:none;width:24px;height:2px;border-radius:2px;background:var(--coral)}
.skip-link{position:absolute;top:10px;left:12px;transform:translateY(-200%);z-index:10;background:var(--ink);color:var(--ivory);padding:12px 20px;border-radius:8px}.skip-link:focus{transform:none}
:focus-visible{outline:3px solid var(--clay);outline-offset:4px}

/* Header: the prototype's IDuh Genius lockup */
.site-header{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:84px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}.brand img{width:40px;height:40px;border-radius:50%}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-maker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.brand-maker strong{font-weight:800;color:var(--ink)}
.brand-app{font:600 22px/1.1 Newsreader,Georgia,serif;letter-spacing:-.02em}
.site-header nav{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:600}.site-header nav a{text-decoration:none}
.tour-link:hover{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.nav-cta{border:var(--outline);border-radius:999px;padding:10px 17px;background:var(--paper);box-shadow:0 3px 0 var(--ledge-card)}.nav-cta span{margin-left:10px}.nav-cta:hover{background:var(--sky-warm)}

/* Buttons and links */
.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:54px;padding:14px 22px;border-radius:12px;background:var(--ink);color:var(--ivory);font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 6px 0 var(--ledge);transition:transform .15s ease,box-shadow .15s ease}
.button:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ledge)}.button:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ledge)}
.text-link{font-size:15px;font-weight:600;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:7px}.text-link span{margin-left:6px}

/* Screens: browser and phone frames. Frames stay unclipped so tape can overhang; the screens inside are clipped. */
.browser{position:relative;border:var(--outline);border-radius:16px;background:var(--paper);box-shadow:0 8px 0 var(--ledge-card),0 26px 44px #17184b1a}
.browser-bar{display:flex;gap:7px;align-items:center;height:30px;padding-inline:14px;border-bottom:var(--outline);border-radius:15px 15px 0 0;background:var(--sky-warm)}
.browser-bar span{width:10px;height:10px;border:1.2px solid var(--ink);border-radius:50%;background:var(--paper)}.browser-bar span:first-child{background:var(--coral)}.browser-bar span:nth-child(2){background:var(--sun)}.browser-bar span:nth-child(3){background:var(--water)}
.browser>img,.browser>.shot{overflow:hidden;border-radius:0 0 15px 15px}
.phone{position:relative;padding:5px;border-radius:32px;background:var(--paper);box-shadow:0 0 0 1.5px var(--ink),6px 16px 26px #17184b26}
.phone>img,.phone>.shot{overflow:hidden;border-radius:27px}
.shot{position:relative}
.browser figcaption{position:absolute;right:4px;bottom:-34px;font-size:12px;color:var(--muted)}

/* Washi tape, as in the prototype: translucent, torn ends, a faint stripe. */
.taped{position:relative}
.tape{position:absolute;z-index:4;width:96px;height:24px;transform:rotate(var(--tilt,-6deg));background:var(--tape-c);mix-blend-mode:multiply;pointer-events:none;
  clip-path:polygon(3% 0,97% 0,100% 18%,96% 34%,100% 52%,96% 70%,100% 86%,97% 100%,3% 100%,0 84%,4% 66%,0 50%,4% 32%,0 16%)}
.tape:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#fff4 0 5px,#fff0 5px 11px)}
.tape-coral{--tape-c:#ff806f9e}.tape-sky{--tape-c:#86b9cca8}.tape-aspen{--tape-c:#eab84aa8}.tape-lavender{--tape-c:#b8aaf0a8}
.tape-tl{top:-10px;left:-18px}.tape-tr{top:-10px;right:-18px;--tilt:7deg}.tape-top{top:-12px;left:50%;margin-left:-48px;--tilt:-3deg}

/* Numbered markers on the real interface, matched by the numbered list beside it. */
.mark-dot{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border:var(--outline);border-radius:50%;background:var(--coral);color:var(--ink);font-size:13px;font-weight:800;line-height:1}
.mark-pin{position:absolute;z-index:3;left:var(--x);top:var(--y);transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--paper),0 4px 8px #17184b40}
.mark-list{display:grid;gap:16px;margin:30px 0 0;padding:0;list-style:none}
.mark-list li{display:flex;align-items:flex-start;gap:14px;font-size:16px;line-height:1.55}

/* Hero: the headline, then the product on a Front Range stage */
.hero{padding-block:52px 120px}
.hero-copy{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px 56px;align-items:end}
.hero-eyebrow{grid-column:1/-1;gap:9px;margin-bottom:0}.hero-eyebrow:before{width:9px;height:9px;border-radius:50%;background:var(--coral)}
.hero-description{margin:0 0 26px;font-size:19px;color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px}
.hero-note{margin:16px 0 0;font-size:13px;color:var(--muted)}
.hero-stage{position:relative;margin-top:60px;padding-bottom:30px}
/* A flat poster stage: sky block, and a sun with its ring, drawn like the scenes' sun. */
.stage-land{position:absolute;inset:18% 0 -40px;border:var(--outline);border-radius:28px;background:var(--sky);box-shadow:0 6px 0 var(--ledge-card)}
.stage-land:before{content:'';position:absolute;top:-12%;right:7%;width:clamp(90px,13vw,170px);aspect-ratio:1;border:var(--outline);border-radius:50%;background:var(--sun);box-shadow:0 0 0 14px var(--sky),0 0 0 15.5px var(--ink)}
.hero-browser{z-index:1;width:80%;margin-left:3%}
.hero-phone{position:absolute;z-index:2;right:3%;bottom:-8px;width:21%;max-width:250px;transform:rotate(4deg)}

/* Beats: one product idea each, on flat bands of the scene palette */
.beat{padding-block:120px;scroll-margin-top:0}
.beat-sky{background:var(--sky);border-block:var(--outline)}
.beat-warm{background:var(--sky-warm);border-block:var(--outline)}
.beat-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:72px;align-items:center}
.beat-flip .beat-grid{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr)}.beat-flip .beat-copy{order:2}
.beat-copy>p:not(.eyebrow){max-width:440px;margin-top:24px;font-size:18px;color:var(--muted)}
.beat-sky .beat-copy>p:not(.eyebrow),.beat-warm .beat-copy>p:not(.eyebrow){color:#34365f}
.beat-phones{display:flex;justify-content:center;align-items:flex-end}
.phone-back{width:42%;max-width:270px;transform:rotate(-6deg) translateY(-30px)}
.phone-front{z-index:2;width:48%;max-width:310px;margin-left:-8%;transform:rotate(3deg)}
.browser-tilt{transform:rotate(-1.5deg)}

/* On your phone: more screens pinned to a kraft wall, like the prototype's plan board (next.css .board-wall). */
.pocket{padding-block:104px 116px;background:#e9dcc6;background-image:var(--grain),var(--fibers);box-shadow:inset 0 12px 20px -16px #17184b55}
.pocket-heading{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:end;margin-bottom:64px}
.pocket-lede{margin:0;font-size:18px;color:#4a4458}
.pocket-hint{display:none}
.pocket-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 40px;margin:0;padding:0;list-style:none}
.pocket-wall li{min-width:0}
.pocket-wall figure{transform:rotate(var(--lean,-1.6deg))}
.pocket-wall li:nth-child(even) figure{--lean:1.8deg;margin-top:30px}
.pocket-wall li:nth-child(3n) figure{--lean:-2.4deg}
.pocket-wall li:nth-child(5n) figure{--lean:2.6deg}
.pocket-wall .phone{max-width:250px;margin-inline:auto}
.pocket-wall figcaption{max-width:250px;margin:20px auto 0;padding:10px 14px 12px;background:var(--paper);background-image:var(--grain);font-size:13px;line-height:1.5;color:var(--muted);box-shadow:0 3px 0 #17184b26;clip-path:polygon(0 4%,98% 0,100% 92%,2% 100%)}
.pocket-wall figcaption strong{display:block;margin-bottom:2px;font:600 19px/1.2 Newsreader,Georgia,serif;color:var(--ink)}

/* Test the Prototype, repeated at each step */
.beat-copy .button-try{margin-top:34px}
.pocket-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;margin:72px 0 0;font-size:14px;font-weight:600;color:#4a4458}

/* Close: a pine band */
.close{padding-block:96px;background:var(--pine);color:var(--ivory)}
.close .eyebrow{color:var(--ivory)}.close h2 em{color:var(--sky-warm)}
.close-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end}
.close-copy p{font-size:18px;color:#dbe7dd}
.close-actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px}.close .text-link{color:var(--ivory)}
.button-light{background:var(--ivory);color:var(--ink);border:var(--outline);box-shadow:0 6px 0 #1d3a2c}.button-light:hover{box-shadow:0 8px 0 #1d3a2c}.button-light:active{box-shadow:0 2px 0 #1d3a2c}

/* Footer: the Front Range again, as in the prototype */
.foot-art{height:120px;overflow:hidden;border-bottom:var(--outline);background:var(--sky)}
.foot-art img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.site-footer{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-block:34px 32px}
.footer-brand{font:550 28px/1.2 Newsreader,Georgia,serif;text-decoration:none}
.site-footer p{margin-top:6px;font-size:13px;color:var(--muted)}
.site-footer nav{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:26px;padding-top:8px;font-size:12px}
.site-footer small{grid-column:1/-1;font-size:11px;line-height:1.8;color:var(--muted)}

@media(max-width:1100px){
  .wrap{width:calc(100% - 64px)}
  .hero-copy{grid-template-columns:1fr}.hero-side{max-width:560px}
  .beat{padding-block:88px}
  .beat-grid,.beat-flip .beat-grid{grid-template-columns:1fr;gap:56px}.beat-flip .beat-copy{order:0}
  .beat-copy>p:not(.eyebrow){max-width:600px}
  .beat-visual{max-width:760px}
  .close-grid{grid-template-columns:1fr;gap:28px}
  .pocket{padding-block:88px}.pocket-heading{grid-template-columns:1fr;gap:20px;margin-bottom:48px}.pocket-lede{max-width:560px}
  .pocket-wall{gap:44px 24px}
}
@media(max-width:760px){
  .wrap{width:calc(100% - 32px)}
  .site-header{min-height:74px}.brand img{width:34px;height:34px}.brand-app{font-size:19px}.brand-maker{font-size:10px}
  .site-header nav{gap:0}.tour-link{display:none}.nav-cta{padding:9px 13px;font-size:12px}.nav-cta span{margin-left:6px}
  h1{font-size:clamp(50px,14vw,76px)}h2{font-size:clamp(38px,10.5vw,52px)}
  .eyebrow{font-size:10px;margin-bottom:18px}
  .hero{padding-block:30px 84px}.hero-description{font-size:17px}.hero-actions{gap:22px}.button{font-size:14px;gap:18px;padding:13px 18px}
  .hero-stage{margin-top:40px;padding-bottom:20px}
  .stage-land{inset:22% 0 -26px;border-radius:18px}.stage-land:before{box-shadow:0 0 0 8px var(--sky),0 0 0 9.5px var(--ink)}
  .hero-browser{width:100%;margin-left:0}
  .hero-phone{right:-2%;bottom:-30px;width:34%}
  .browser{border-radius:10px}.browser-bar{height:20px;gap:5px;padding-inline:9px;border-radius:9px 9px 0 0}.browser-bar span{width:7px;height:7px}
  .browser>img,.browser>.shot{border-radius:0 0 9px 9px}
  .phone{padding:3px;border-radius:20px}.phone>img,.phone>.shot{border-radius:17px}
  .tape{width:70px;height:18px}.tape-top{margin-left:-35px}
  .mark-dot{width:24px;height:24px;font-size:12px}.mark-pin{box-shadow:0 0 0 2px var(--paper),0 3px 6px #17184b40}
  .mark-list{gap:13px;margin-top:24px}.mark-list li{font-size:15px;gap:12px}
  .beat{padding-block:64px}.beat-grid{gap:44px}.beat-copy>p:not(.eyebrow){font-size:16px;margin-top:18px}
  .phone-back{width:44%;transform:rotate(-6deg) translateY(-18px)}.phone-front{width:52%}
  .browser figcaption{position:static;margin-top:12px;padding-inline:4px}
  .pocket{padding-block:64px 56px}.pocket-heading{margin-bottom:8px}.pocket-lede{font-size:16px}
  .pocket-hint{display:block;margin:14px 0 0;font-size:13px;font-weight:600;color:var(--clay)}
  .pocket-cta{margin-top:24px;justify-content:flex-start}.beat-copy .button-try{margin-top:28px}
  /* A swipeable strip on phones. */
  .pocket-wall{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:36px 16px 30px;scrollbar-width:none}
  .pocket-wall::-webkit-scrollbar{display:none}
  .pocket-wall li{flex:0 0 64%;scroll-snap-align:center}
  .pocket-wall li:nth-child(even) figure{margin-top:14px}
  .pocket-wall figcaption{margin-top:16px}
  .close{padding-block:64px}.close-copy p{font-size:16px}
  .foot-art{height:84px}
  .site-footer{grid-template-columns:1fr;gap:16px;padding-block:28px}.site-footer nav{justify-content:flex-start;gap:20px;padding:0}
}
@media(max-width:370px){
  .hero-actions{flex-direction:column;align-items:flex-start}
  .brand-maker{display:none}.nav-cta{padding:9px 11px}
}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}