/* Gibson from the Rubber Duckiee Adobe Fonts kit (loads only on domains the kit allows); Figtree stands in otherwise */
@font-face{font-family:canada-type-gibson;src:url(https://use.typekit.net/af/1c2c04/0000000000000000774d5010/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3) format("woff2"),url(https://use.typekit.net/af/1c2c04/0000000000000000774d5010/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3) format("woff"),url(https://use.typekit.net/af/1c2c04/0000000000000000774d5010/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3) format("opentype");font-display:swap;font-style:normal;font-weight:300;font-stretch:normal}
@font-face{font-family:canada-type-gibson;src:url(https://use.typekit.net/af/f37390/0000000000000000774d500f/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("woff2"),url(https://use.typekit.net/af/f37390/0000000000000000774d500f/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("woff"),url(https://use.typekit.net/af/f37390/0000000000000000774d500f/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("opentype");font-display:swap;font-style:normal;font-weight:500;font-stretch:normal}
/* Layout: centred search hero and card grid on the home page; guide pages pair a sticky step list with full-width screenshots */
:root{
  --ink:#34393b; --ink-2:#51595d; --duck:#c2d230; --duck-ink:#34393b;
  --paper:#ffffff; --mist:#f5f7fa; --line:#dfe3e6; --link:#5f6b16;
  --band:#34393b; --band-ink:#f5f7fa; --shot:#2b2b2b; --err:#b3261e;
  --font:canada-type-gibson,"Figtree",system-ui,sans-serif;
  --body:300; --medium:500;
  --measure:40rem; --wide:72rem; --radius:12px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --ink:#eef1f3; --ink-2:#b4bcc1; --paper:#1f2326; --mist:#272c30; --line:#3a4146; --link:#c2d230;
  --band:#2b3135; --band-ink:#eef1f3; --err:#ff8a80; color-scheme:dark } }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:var(--body);font-size:1.125rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
b,strong{font-weight:var(--medium)}
h1,h2,h3{font-weight:var(--medium);line-height:1.15;text-wrap:balance;margin:0}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--duck);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wide);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
kbd{font-family:inherit;font-size:.85em;font-weight:var(--medium);padding:.05em .4em;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--mist)}
button,input{font:inherit;color:inherit}

/* header */
.bar{border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1rem}
.mark{display:flex;white-space:nowrap;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-weight:var(--medium);font-size:1.05rem}
.mark-duck{width:2rem;height:2rem;fill:var(--duck);flex:none}
.mark-sub{font-weight:var(--body);color:var(--ink-2)}
.who{font-size:.95rem;color:var(--ink-2);text-align:right}
.who a,.who button{color:var(--link)}
.who .short{display:none}
@media (max-width:30rem){.who .long{display:none}.who .short{display:inline}.mark-sub{display:none}}

/* home */
.hero{background:var(--mist)}
.hero-in{padding-block:4rem 3rem;display:grid;gap:1.25rem;justify-items:center;text-align:center}
.hero h1{font-size:clamp(2.4rem,6vw,3.75rem);letter-spacing:-.01em}
.lead{margin:0;color:var(--ink-2);font-size:1.25rem;max-width:36rem}
.search{width:100%;max-width:40rem;margin-top:.5rem}
.search input{width:100%;font-size:1.25rem;padding:1rem 1.25rem 1rem 3.25rem;border:1px solid var(--line);border-radius:999px;background:var(--paper) no-repeat 1.25rem 50%/1.25rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351595d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");box-shadow:0 1px 2px rgba(52,57,59,.06)}
.search input:focus{outline:none;border-color:var(--duck);box-shadow:0 0 0 3px color-mix(in srgb,var(--duck) 45%,transparent)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:.35rem .95rem;font-size:.95rem;cursor:pointer;color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--duck);border-color:var(--duck);color:var(--duck-ink);font-weight:var(--medium)}
.results{padding-block:2.5rem 1rem}
.count{margin:0 0 1rem;color:var(--ink-2);font-size:1rem}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.card{display:grid;grid-template-rows:auto 1fr auto;gap:.5rem;height:100%;padding:1.4rem 1.5rem;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none;background:var(--paper);transition:border-color .15s}
.card:hover{border-color:var(--duck)}
.card h3{font-size:1.2rem}
.card p{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.5}
.card .meta{font-size:.9rem;color:var(--ink-2)}
.empty{text-align:center;padding:2rem 1rem;display:grid;gap:.5rem;justify-items:center}
.empty h3{font-size:1.3rem}
.empty p{margin:0;color:var(--ink-2);max-width:32rem}
.org{padding-block:3rem 0}
.org-in{background:var(--mist);border-radius:16px;padding:2.5rem clamp(1.25rem,4vw,3rem);display:grid;gap:1rem;justify-items:center;text-align:center}
.org-in h2{font-size:1.6rem}

/* unlock */
.unlock{display:grid;gap:.75rem;justify-items:center;width:100%;max-width:32rem}
.unlock-intro{margin:0;color:var(--ink-2)}
.unlock-form{display:flex;gap:.5rem;width:100%;flex-wrap:wrap;justify-content:center}
.unlock-form input{flex:1 1 14rem;min-width:0;padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:1.05rem}
.unlock-form input:focus{outline:none;border-color:var(--duck);box-shadow:0 0 0 3px color-mix(in srgb,var(--duck) 45%,transparent)}
.unlock-form input[name=code]{letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
button[type=submit],.button{border:0;border-radius:10px;padding:.8rem 1.4rem;background:var(--duck);color:var(--duck-ink);font-weight:var(--medium);cursor:pointer;text-decoration:none;display:inline-block}
button[type=submit][disabled]{opacity:.6;cursor:progress}
.linkish{background:none;border:0;padding:0;color:var(--link);text-decoration:underline;text-underline-offset:.18em;cursor:pointer;font-size:.95rem}
.unlock-msg:empty{display:none}
.unlock-msg{margin:0;font-size:.95rem;color:var(--ink-2)}
.unlock-msg.is-error{color:var(--err)}
.gate{padding-block:4rem 1rem}
.gate-in{max-width:36rem;margin:0 auto;display:grid;gap:1.25rem;justify-items:center;text-align:center}
.gate-in h1{font-size:clamp(1.9rem,4.5vw,2.6rem)}
.gate-back{margin:0}

/* guide */
.guide{padding-block:1.5rem 0}
.crumbs{font-size:.95rem}
.crumbs a{color:var(--ink-2)}
.g-head{display:grid;gap:1rem;justify-items:center;text-align:center;padding-block:2rem 3rem}
.g-head h1{font-size:clamp(2.2rem,5.5vw,3.5rem);letter-spacing:-.01em;max-width:20ch}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 0;margin:0;padding:0;list-style:none;font-size:1rem;color:var(--ink-2)}
.facts li{padding:0 1rem;border-left:1px solid var(--line)}
.facts li:first-child{border-left:0}
.updated{margin:0;font-size:.9rem;color:var(--ink-2)}
.g-body{display:grid;gap:3rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:64rem){.g-body{grid-template-columns:15rem minmax(0,1fr)}}
.toc{display:none}
@media (min-width:64rem){.toc{display:block;position:sticky;top:1.5rem;align-self:start;max-height:calc(100vh - 3rem);overflow:auto}}
.toc h2{font-size:1rem;margin-bottom:.75rem}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.toc a{display:grid;grid-template-columns:1.75rem 1fr;gap:.25rem;padding:.35rem .5rem;border-radius:8px;color:var(--ink-2);text-decoration:none;font-size:.95rem;line-height:1.35}
.toc a:hover{background:var(--mist);color:var(--ink)}
.toc a.is-current{background:var(--mist);color:var(--ink);font-weight:var(--medium)}
.toc-n{font-variant-numeric:tabular-nums}
.set+.set{padding-top:3.5rem}
.set h2{font-size:1.7rem;padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:2rem}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:3rem}
.step{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:1.25rem;align-items:start;scroll-margin-top:1.5rem}
.num{width:2.75rem;height:2.75rem;border-radius:50%;background:var(--duck);color:var(--duck-ink);display:grid;place-items:center;font-weight:var(--medium);font-size:1.15rem;font-variant-numeric:tabular-nums}
.step-body{display:grid;gap:.6rem;min-width:0}
.step-body h3{font-size:1.35rem;padding-top:.45rem}
.step-body p{margin:0;max-width:var(--measure)}
figure{margin:.75rem 0 0}
figure a{display:block;border-radius:10px}
figure img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--shot)}
.tips{padding-top:4rem}
.tips h2{font-size:1.7rem;margin-bottom:1.5rem}
.tips ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:44rem){.tips ul{grid-template-columns:1fr 1fr}}
.tips li{background:var(--mist);border-radius:var(--radius);padding:1.4rem 1.5rem;display:grid;gap:.3rem;align-content:start}
.tips li b{font-size:1.1rem}
.tips li span{color:var(--ink-2)}

/* help + footer */
.help{margin-top:5rem;background:var(--band);color:var(--band-ink)}
.help-in{padding-block:3rem;display:grid;gap:.75rem;justify-items:center;text-align:center}
.help-duck{width:2.75rem;height:2.75rem;fill:var(--duck)}
.help h2{font-size:1.6rem}
.help p{margin:0}
.help a{color:var(--band-ink)}
.contact{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.5rem;font-weight:var(--medium)}
.foot{padding-block:1.5rem;text-align:center;font-size:.95rem}
.foot a{color:var(--ink-2);text-decoration:none}

@media (max-width:30rem){
  body{font-size:1.0625rem}
  .hero-in{padding-block:2.75rem 2.25rem}
  .search input{font-size:1.1rem}
  .step{grid-template-columns:2.25rem minmax(0,1fr);gap:.9rem}
  .num{width:2.25rem;height:2.25rem;font-size:1rem}
  .step-body h3{padding-top:.2rem}
  .facts{gap:.35rem 1.25rem}
  .facts li{padding:0;border-left:0}
  .who{font-size:.85rem}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}