:root{--bg:#07090a;--ink:#f3f3e9;--muted:#a9b3a3;--accent:#d9fa49;--line:#ffffff26;--k:0;--shift:14vw;--ph:min(600px,74vh)}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--ink);font-family:'DM Sans',sans-serif;
  /* starfield behind the transparent globe */
  background:radial-gradient(1px 1px at 12% 22%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 73% 14%,#fff6 50%,transparent 51%),radial-gradient(1.5px 1.5px at 38% 78%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 88% 64%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 55% 40%,#fff4 50%,transparent 51%),radial-gradient(ellipse at 70% 50%,color-mix(in srgb,var(--accent) 9%,#07090a) 0,var(--bg) 60%) fixed}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--accent);text-shadow:0 0 28px color-mix(in srgb,var(--accent) 40%,transparent)}
a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:5px}

#map{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity 1.2s}.map-in #map{opacity:1}
/* The real-looking Earth sits over the map until the camera is low enough for the map to take over. */
#earth{position:fixed;inset:0;z-index:1;overflow:hidden;background:var(--bg);transition:opacity .3s,visibility .3s}
/* --fx/--fy: where Pratamnak sits in the film's last frame, the same spot as the map's padded centre. */
#earth{--fx:64%;--fy:50%}
#earth .frame{position:absolute;inset:0;transform-origin:var(--fx) var(--fy);will-change:transform}
#earth img,#earth video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fx) var(--fy);opacity:0}
#earth img{transition:opacity 1.4s}
#earth.lit img,#earth.rolling video{opacity:1}
#earth.rolling img{transition:none}
#earth video[hidden]{display:none}
.nomap #earth .frame{transform:none!important}
/* Ending: the same planet with every city light off, and one light, in the accent. JS keeps it on the map's globe. */
#end{position:fixed;inset:0;z-index:2;overflow:hidden;background:var(--bg);opacity:0;visibility:hidden;pointer-events:none}
#end .globe{position:absolute;left:0;top:0;aspect-ratio:1;will-change:transform}
#end img{display:block;width:100%;height:100%;-webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent);mask-image:radial-gradient(closest-side,#000 82%,transparent)}
#end i{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px;border-radius:50%;background:radial-gradient(circle,#fff 0,var(--accent) 8%,color-mix(in srgb,var(--accent) 35%,transparent) 22%,transparent 70%)}
/* Opening: each [data-at] appears at its second on the film clock; handing over to scroll reveals the rest with the same fade. */
[data-at]{transition:opacity .9s,translate .9s}
.film [data-at]:not(.seen){opacity:0;translate:0 14px}
.film .brand:not(.seen){translate:none}
.credits{position:fixed;z-index:20;right:12px;bottom:6px;margin:0;font-size:10px;color:var(--muted);background:#07090acc;padding:2px 6px;border-radius:4px}.credits a{color:var(--ink)}

.nav{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;gap:24px;padding:22px 6vw;font:700 11px 'Space Mono',monospace;letter-spacing:.04em;background:linear-gradient(#07090a 72%,transparent)}
.brand{display:block;line-height:0}.brand img{display:block;height:32px;width:auto}
.clock{margin:0 0 0 auto;color:var(--muted);display:flex;align-items:center;gap:8px}.clock b{color:var(--ink)}
.clock i,.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:pulse 2s infinite}
.accents{margin:0 0 0 4px;padding:0;border:0;display:flex;gap:8px}
.accents legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.accents label{display:block;width:24px;height:24px;border-radius:50%;background:var(--c);cursor:pointer;box-shadow:0 0 0 1px #ffffff40;transition:box-shadow .2s}
.accents input{position:absolute;opacity:0;width:24px;height:24px;margin:0;cursor:pointer}
.accents label:has(input:checked){box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--c)}
.accents label:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:5px}
/* shortcut: app mock-ups are lime PNGs, so purple tints them with a filter (pins shift too); re-render them if purple wins */
[data-accent=purple] .reel img{filter:hue-rotate(190deg)}
.jump{margin-left:auto;font-weight:400;color:var(--muted);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}.jump:hover{color:var(--ink);border-color:currentColor}
.jump+.clock{margin-left:0}
.draft{border:1px solid var(--accent);color:var(--accent);padding:6px 10px;text-transform:uppercase}

main{position:relative;z-index:10}
/* keeps panel text readable over bright map areas */
main:before{content:'';position:fixed;inset:0 auto 0 0;width:58vw;background:linear-gradient(90deg,#07090ae6 30%,transparent);pointer-events:none}
.ch{position:relative}
.stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:0 6vw;pointer-events:none}
.panel{position:relative;width:min(440px,40vw);min-height:340px}
.step{position:absolute;inset:auto 0 auto 0;top:50%;transform:translateY(-40%);opacity:0;transition:opacity .5s,transform .5s;pointer-events:none}
.step.on{opacity:1;transform:translateY(-50%);pointer-events:auto}
.eyebrow{display:flex;align-items:center;gap:10px;font:700 11px 'Space Mono',monospace;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
h1,h2{font-family:Unbounded,sans-serif;font-weight:800;letter-spacing:-.045em;line-height:1.02;margin:22px 0;text-shadow:0 4px 30px #000}
h1{font-size:clamp(40px,5.6vw,92px);width:max-content;max-width:88vw}
h2{font-size:clamp(34px,4.2vw,68px)}
.lede{font-size:17px;line-height:1.6;color:#d3dacd;text-shadow:0 2px 12px #000}
.lede b{color:var(--accent)}
.note{font:400 11px 'Space Mono',monospace;color:var(--muted);line-height:1.6}
.cue{font:700 11px 'Space Mono',monospace;margin-top:40px;letter-spacing:.06em}.cue span{display:inline-block;color:var(--accent);animation:bob 1.6s infinite}

/* Phone: the box-shadow dims everything but the screen, so the live map shows through as the app. */
#phone{position:fixed;z-index:5;left:calc(50% + var(--shift));top:50%;height:var(--ph);aspect-ratio:9/19;border:10px solid #0b0d0b;border-radius:46px;
  box-shadow:0 0 0 1px #ffffff30,0 0 60px color-mix(in srgb,var(--accent) 13%,transparent),0 0 0 300vmax #07090ad0;opacity:var(--k);transform:translate(-50%,-50%) scale(calc(1 + (1 - var(--k)) * 4));pointer-events:none}
#phone:before{content:'';position:absolute;top:10px;left:50%;translate:-50%;width:30%;height:22px;border-radius:20px;background:#0b0d0b}
.phone-bar{position:absolute;top:44px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;background:#0e120ee6;font-size:12px;border:1px solid var(--line)}
.phone-bar span{font:700 11px 'Space Mono',monospace;color:var(--accent)}
.phone-toggle{position:absolute;top:100px;left:50%;translate:-50%;display:flex;background:#0e120ee6;border-radius:20px;font:700 10px 'Space Mono',monospace;border:1px solid var(--line)}
.phone-toggle span{padding:6px 14px;border-radius:20px}.phone-toggle .on{background:var(--accent);color:#111}
.sheet{position:absolute;left:10px;right:10px;bottom:10px;padding:14px;border-radius:16px;background:#0e120ef0;border:1px solid var(--line);font-size:12px;opacity:0;translate:0 20px;transition:opacity .4s,translate .4s}
.sheet small{display:block;color:var(--muted);margin-top:4px;font-size:11px}
body[data-step=find-1] .sheet-find-1,body[data-step=find-2] .sheet-find-2,body[data-step=find-3] .sheet-find-3,body[data-step=find-4] .sheet-find-4,body[data-step=find-5] .sheet-find-5,body[data-step=find-6] .sheet-find-6,body[data-step=find-7] .sheet-find-7,body[data-step=lenses-1] .sheet-time,body[data-step=lenses-2] .sheet-trust{opacity:1;translate:0}
.sheet-time{display:flex;gap:12px;align-items:center}
.dial{width:44px;flex:none}.dial circle{fill:none;stroke:var(--accent);stroke-width:1.5}.dial line{stroke:var(--accent);stroke-width:2;stroke-linecap:round;transform-origin:20px 20px}
.ladder{list-style:none;margin:10px 0 0;padding:0;display:flex;gap:6px}
.ladder li{flex:1;text-align:center;padding:8px 2px;border-radius:8px;border:1px solid var(--line);font:700 9px 'Space Mono',monospace;color:var(--muted);transition:.3s}
.ladder li.on{background:var(--accent);color:#111;border-color:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 47%,transparent)}

/* The drop: JS places #pin on the map, moves the svg down onto it and spreads the ripples from the tip. */
#pin{position:fixed;z-index:6;left:0;top:0;width:0;height:0;pointer-events:none;will-change:transform}
#pin svg{position:absolute;left:-36px;top:-96px;width:72px;height:96px;transform-origin:50% 100%;overflow:visible;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--pin,var(--accent)) 70%,transparent))}
#pin.area svg{display:none}
body[data-ch=find] #pin svg{left:-27px;top:-72px;width:54px;height:72px}
#pin path{fill:var(--pin,var(--accent));stroke:#07090a;stroke-width:1.5}#pin circle{fill:#07090a}
.ripple{position:absolute;left:-50px;top:-50px;width:100px;height:100px;border-radius:50%;border:3px solid var(--pin,var(--accent));opacity:0}

/* Colour key: grows beside the phone as each content type lands. Narrow screens get the row of dots in the panel instead. */
#key{position:fixed;z-index:6;left:calc(50% + var(--shift) + var(--ph) * .2368 + 30px);top:50%;translate:0 -50%;width:170px;opacity:0;transition:opacity .4s;pointer-events:none}
#key.on{opacity:1}
#key ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:13px;color:var(--muted)}
#key li{display:flex;align-items:center;gap:10px;opacity:0;translate:-8px 0;transition:opacity .35s,translate .35s,color .35s}
#key li.on{opacity:1;translate:none}#key li.now{color:var(--ink);font-weight:700}
#key i{flex:none;width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 10px color-mix(in srgb,var(--c) 60%,transparent)}
#key p{margin:14px 0 0;font:400 10px/1.5 'Space Mono',monospace;color:var(--muted);opacity:0;transition:opacity .35s}
#key.more p{opacity:1}
.nomap #key,.nomap .kdots{display:none}
.kdots{display:none;align-items:center;gap:5px;margin:8px 0 0;font:700 9px 'Space Mono',monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kdots i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:none;animation:none}.kdots span{margin-left:6px}
#find .eyebrow i,#sell .eyebrow i{background:var(--c);box-shadow:0 0 12px var(--c)}
@media(max-width:1100px){#key{display:none}.kdots{display:flex}}

/* Owner footage slot: stays hidden until a real clip is present. */
#clip{position:fixed;z-index:4;left:calc(50% + var(--shift));top:50%;margin:0;width:min(400px,30vw);aspect-ratio:16/9;translate:-50% -135%;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px #ffffff30,0 20px 60px #000;opacity:0;transition:opacity .6s;pointer-events:none}
#clip.on{opacity:1}#clip[hidden]{display:none}
#clip video{display:block;width:100%;height:100%;object-fit:cover}

/* Record anatomy: layers pulled apart in 3D by --s */
.anatomy,.sell{position:fixed;z-index:5;left:calc(50% + var(--shift));top:50%;translate:-50% -50%;opacity:0;transition:opacity .5s;pointer-events:none}
body[data-ch=anatomy] .anatomy,body[data-ch=sell] .sell{opacity:1}
.anatomy{perspective:1400px}
.stack{--s:0;position:relative;width:300px;height:190px;transform-style:preserve-3d;transform:rotateX(calc(var(--s) * 58deg)) rotateZ(calc(var(--s) * -28deg))}
.layer{position:absolute;inset:0;border-radius:18px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:#0e120ed9;backdrop-filter:blur(6px);padding:16px 18px;display:flex;flex-direction:column;justify-content:flex-end;transform:translateZ(calc(var(--s) * var(--i) * var(--gap,40px)));box-shadow:0 0 30px color-mix(in srgb,var(--accent) 9%,transparent)}
.layer small{display:block;font:700 10px 'Space Mono',monospace;letter-spacing:.06em;color:var(--accent);text-transform:uppercase}
.layer b{display:block;margin-top:6px;font-size:15px;line-height:1.3}
.layer.base{background:var(--accent);color:#111;border:0}.layer.base small{color:#00000099}.layer.base b{font:800 19px Unbounded,sans-serif;letter-spacing:-.03em}

.sell{display:grid;gap:14px;justify-items:center;--q:0;--x:0}
.photo{position:relative;width:240px;height:170px;border-radius:16px;background:linear-gradient(135deg,#2c3a2c,#0e120e);border:1px solid var(--line);display:grid;place-items:center;font:700 11px 'Space Mono',monospace;color:var(--muted);transform:translateY(-160px)}
.chip{position:absolute;font:700 10px 'Space Mono',monospace;font-style:normal;background:#ff6b5a;color:#111;padding:6px 9px;border-radius:6px;white-space:nowrap;opacity:calc(1 - var(--x));transition:none}
.c1{left:-30px;top:18px;transform:translate(calc(var(--x) * -160px),calc(var(--x) * -40px)) rotate(calc(var(--x) * -25deg))}
.c2{right:-24px;top:70px;transform:translate(calc(var(--x) * 170px),calc(var(--x) * 10px)) rotate(calc(var(--x) * 20deg))}
.c3{left:10px;bottom:-12px;transform:translate(calc(var(--x) * -60px),calc(var(--x) * 120px)) rotate(calc(var(--x) * 15deg))}
.cell-tag{margin:0;opacity:var(--q);font:700 11px 'Space Mono',monospace;color:#06121f;background:#4f8cff;padding:8px 12px;border-radius:6px;transform:translateY(120px)}

.slider{display:grid;gap:10px;margin:28px 0 6px;font:700 11px 'Space Mono',monospace;letter-spacing:.04em;color:var(--muted)}
.slider b{color:var(--accent)}
input[type=range]{width:100%;accent-color:var(--accent);height:28px}
.actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:24px}
.button{display:inline-flex;gap:36px;background:var(--accent);color:#111;padding:18px 22px;font:700 11px 'Space Mono',monospace;box-shadow:0 0 40px color-mix(in srgb,var(--accent) 33%,transparent);transition:transform .2s}
.button:hover{transform:translateY(-3px)}
.text-link{font:700 11px 'Space Mono',monospace;border-bottom:1px solid}

.cats{list-style:none;margin:14px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cats li{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:6px;border:1px solid var(--line);font-size:13px;transition:.25s}
.cats li span{font:700 12px 'Space Mono',monospace;color:var(--muted)}
.cats li.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 22%,transparent)}.cats li.on span{color:var(--ink)}
.claims{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.claims li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11px}.claims li small{margin:0;white-space:nowrap;font:700 9px 'Space Mono',monospace;color:var(--accent)}
.fields{margin:10px 0 0;display:grid;gap:7px}
.fields div{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fields dt{font-size:11px;color:var(--muted)}.fields dd{margin:0;width:42%;height:8px;border-radius:4px;background:#ffffff22}

/* App mock-ups pan past as you scroll */
#screens .stick{background:#07090ae0}
.reel-wrap{position:absolute;top:0;bottom:0;right:0;left:calc(6vw + min(440px,40vw) + 40px);overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reel{display:flex;gap:32px;padding:0 40px;will-change:transform}
.reel figure{margin:0;flex:none;width:calc(min(620px,70vh) * .461)}
.reel img{display:block;width:100%;height:auto;border-radius:30px;border:6px solid #0b0d0b;box-shadow:0 0 0 1px #ffffff30,0 20px 60px #000}
.reel figcaption{margin-top:12px;font:700 11px 'Space Mono',monospace;color:var(--muted);line-height:1.5}

/* Plain reading section: the full list, for people who want it all at a glance */
.plain{position:relative;background:var(--bg);padding:120px 6vw 100px;border-top:1px solid var(--line)}
.plain h3{font:700 19px Unbounded,sans-serif;letter-spacing:-.03em;margin:14px 0 8px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.cards article{padding:22px;border:1px solid var(--line);border-radius:14px;background:#0e120e}
.cards article p:last-child{margin:0;line-height:1.55;color:#d3dacd;font-size:15px}.cards article b{color:var(--accent)}
.how{margin-top:64px}
/* How it works builds step by step: --i staggers the steps, each one's segment draws on to the next. */
.pipe{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;counter-reset:n}
.pipe>li{position:relative;padding-top:58px;counter-increment:n;--d:calc(var(--i) * .55s);opacity:0;translate:0 14px;transition:opacity .6s var(--d),translate .6s var(--d)}
.pipe>li.in{opacity:1;translate:none}
.pipe>li:before{content:counter(n);position:absolute;top:0;left:0;z-index:1;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#0e120e;border:2px solid var(--accent);color:var(--accent);font:700 13px 'Space Mono',monospace;box-shadow:0 0 22px color-mix(in srgb,var(--accent) 33%,transparent)}
.pipe>li:not(:last-child):after{content:'';position:absolute;top:19px;left:40px;width:calc(100% - 16px);height:2px;background:var(--accent);box-shadow:0 0 10px var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s linear calc(var(--d) + .35s)}
.pipe>li.in:after{transform:none}
.pipe p{margin:0;line-height:1.6;color:#d3dacd}
.tags{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{padding:5px 8px;border:1px solid var(--line);border-radius:6px;font:700 10px 'Space Mono',monospace;color:var(--muted)}

.wordmark{margin:0;line-height:0}.wordmark img{display:block;height:clamp(56px,6vw,96px);width:auto}
#pull h2{font-size:clamp(26px,2.8vw,44px)}
/* Path cards rise over the globe the pull-back leaves on screen. */
.paths{background:none;border:0;padding-top:0;min-height:calc(50vh + 190px);display:flex;flex-direction:column;justify-content:flex-end}
.path-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.path{display:flex;flex-direction:column;gap:12px;padding:30px 28px;min-height:300px;border:1px solid var(--line);border-radius:18px;background:#0e120eeb;transition:border-color .2s,transform .2s}
.path:hover{border-color:var(--accent);transform:translateY(-4px)}
.path h3{margin:0 0 6px;font-size:clamp(20px,1.9vw,28px);line-height:1.15}
.path p{margin:0;line-height:1.55;color:#d3dacd}
.path span{margin-top:auto;padding-top:14px;font:700 11px 'Space Mono',monospace;color:var(--accent)}

@keyframes pulse{50%{opacity:.35}}
@keyframes bob{50%{transform:translateY(5px)}}

@media(max-width:800px){
  :root{--shift:0px;--ph:56vh}
  #earth{--fx:50%;--fy:36%}
  main:before{display:none}
  .stack{--gap:30px}
  /* the text panel covers the phone's lower half, so these sheets sit above it */
  .sheet-find-1,.sheet-find-2,.sheet-find-3,.sheet-find-4,.sheet-find-5,.sheet-find-6,.sheet-find-7{top:128px;bottom:auto;padding:10px 12px}
  .fields{gap:4px;margin-top:6px}.claims{gap:3px;margin-top:6px}
  .cell-tag{transform:translateY(-10px)!important}
  .credits{left:0;right:0;bottom:0;text-align:center;border-radius:0;font-size:9px}
  .cats li{padding:5px 8px;font-size:12px}
  .reel-wrap{left:0;bottom:auto;height:50vh;top:60px;-webkit-mask-image:none;mask-image:none}
  .reel{gap:16px;padding:0 20px}.reel figure{width:calc(38vh * .461)}.reel img{border-radius:20px;border-width:4px}.reel figcaption{font-size:10px;margin-top:6px}
  .plain{padding:70px 5vw 60px}
  .cards,.path-cards{grid-template-columns:1fr}
  .how{margin-top:40px}
  .pipe{grid-template-columns:1fr}
  .pipe>li{padding:0 0 30px 58px;--d:0s}
  .pipe>li:not(:last-child):after{top:40px;left:19px;width:2px;height:calc(100% - 40px);transform:scaleY(0);transform-origin:50% 0;transition-delay:.3s}
  .path{min-height:0;padding:22px}
  #pin svg{left:-24px;top:-64px;width:48px;height:64px}
  body[data-ch=find] #pin svg{left:-15px;top:-40px;width:30px;height:40px}
  #clip{top:36%;width:70vw}
  .jump{font-size:10px;white-space:nowrap}
  .nav{gap:12px;padding:18px 4vw}
  .brand img{height:28px}
  .accents{gap:6px}.accents label,.accents input{width:20px;height:20px}
  .draft{padding:4px 6px;font-size:10px}
  /* the phone's text panel appears as one piece, so it is never an empty box */
  .film #dive .step [data-at]:not(.seen){opacity:1;translate:none}
  .clock{display:none}.accents{margin-left:0}
  .stick{align-items:flex-end;padding:0 5vw 26px}
  .panel{width:100%;min-height:300px}
  .step{top:auto;bottom:0;transform:translateY(20px);padding:20px;border-radius:18px;background:#07090ad9;backdrop-filter:blur(8px);border:1px solid var(--line)}
  .step.on{transform:none}
  h1{font-size:clamp(32px,9vw,46px);width:auto}
  h2{font-size:clamp(28px,8vw,40px);margin:14px 0}
  .lede{font-size:15px}
  #phone{top:36%;border-width:8px;border-radius:36px}
  .anatomy,.sell{top:36%}
  .photo{width:200px;height:130px;transform:translateY(-100px)}.cell-tag{transform:translateY(90px)}
  .stack{width:250px;height:160px}
  .layer b{font-size:13px}
}
@media(max-width:800px) and (max-height:780px){
  .phone-toggle{display:none}
  #pin svg{left:-18px;top:-48px;width:36px;height:48px}
  body[data-ch=find] #pin svg{left:-12px;top:-32px;width:24px;height:32px}
  .sheet-find-1,.sheet-find-2,.sheet-find-3,.sheet-find-4,.sheet-find-5,.sheet-find-6,.sheet-find-7{top:92px}
  h2{font-size:24px;margin:10px 0}.lede{font-size:14px;line-height:1.45}.step{padding:14px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}