/* Shotjoin website. Colours are the brand's (Brand/brand.json, design/tokens.css, App/Theme.swift):
   ink and white, with amber only where a join needs a look. Nunito (SIL Open Font License, see
   /assets/fonts/OFL.txt) sets every word, SemiBold for headlines, Regular for the rest, as the brand
   page says for the web. Light or dark follows the visitor's device. No scripts. */
@font-face{font-family:"Nunito";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/nunito-400.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/nunito-600.woff2") format("woff2")}

:root{
  color-scheme:light dark;
  --ground:#F5F5F7; --surface:#FFFFFF; --fill:#E8E8ED; --line:rgba(0,0,0,.09);
  --ink:#1D1D1F; --on-ink:#FFFFFF; --text:#1D1D1F; --text-2:#6E6E73;
  --card:#1D1D1F; --card-line:rgba(255,255,255,0); --stage:#0B0B0C; --amber:#FF9F0A;
  --focus:#1D1D1F;
  --font:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#000000; --surface:#1C1C1E; --fill:#2C2C2E; --line:rgba(255,255,255,.13);
    --ink:#F5F5F7; --on-ink:#1D1D1F; --text:#F5F5F7; --text-2:#98989D;
    --card:#1C1C1E; --card-line:rgba(255,255,255,.10);
    --focus:#F5F5F7;
  }
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;background:var(--ground);color:var(--text);
  font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:rgba(0,0,0,0)}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0}
img,svg{display:block}
main{flex:1 0 auto;display:flex;flex-direction:column}
a{color:var(--text);text-decoration-thickness:1px;text-underline-offset:3px}
a:active{opacity:.6}
a:focus-visible,summary:focus-visible,.shot-row:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-64px;z-index:30;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--on-ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
[id]{scroll-margin-top:24px}
.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
@media (min-width:600px){.wrap{padding-inline:32px}}

/* ---------- Header ---------- */
.site-head{padding-top:env(safe-area-inset-top,0px)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.lockup{display:inline-flex;align-items:center;min-height:44px;flex-shrink:0}
.lockup img{width:107px;height:32px}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:10px;border-radius:999px;color:var(--text-2);text-decoration:none;font-weight:600;font-size:16px}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--text)}

/* ---------- Home: hero ---------- */
.hero{padding-block:clamp(28px,7vw,72px) clamp(32px,6vw,56px)}
.hero-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-icon{width:clamp(96px,22vw,128px);height:auto;aspect-ratio:1;margin-bottom:22px}
.hero-name{font:600 clamp(46px,11vw,80px)/1.04 var(--font);letter-spacing:-.01em;color:var(--ink)}
.hero-tag{margin-top:10px;font:600 clamp(24px,5.4vw,38px)/1.18 var(--font);letter-spacing:-.01em;color:var(--ink)}
.hero-line{margin-top:14px;max-width:27em;color:var(--text-2);font-size:clamp(17px,2.3vw,20px);line-height:1.45;text-wrap:balance}
.soon{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:8px}
.soon-pill{display:inline-flex;align-items:center;min-height:40px;padding:8px 18px;border-radius:999px;background:var(--fill);color:var(--text);font-weight:600;font-size:16px;line-height:1.2}
.soon-req{color:var(--text-2);font-size:15px}

/* ---------- Home: the App Store shots ----------
   Each card is laid out like brand board 11 (236 × 512 there): the headline on the ink, the app's
   screen below it running off the bottom. Sizes inside are in cqw of the card, so a card of any
   width keeps the board's proportions. A real App Store screenshot (1320 × 2868) replaces a card's
   drawing as it is: see website/README.md. */
.shots{padding-block:8px clamp(48px,8vw,88px)}
.shot-row{display:grid;grid-auto-flow:column;grid-auto-columns:min(68vw,280px);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px max(16px,env(safe-area-inset-left,0px)) 10px;scroll-padding-inline:16px}
.shot-row::-webkit-scrollbar{display:none}
@media (min-width:880px){
  .shot-row{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,300px));justify-content:center;gap:32px;overflow:visible;padding-inline:32px}
}
.shot{scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.shot-card{container-type:inline-size;position:relative;width:100%;aspect-ratio:1320/2868;border-radius:11.9% / 5.47%;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line);overflow:hidden}
.shot-card > img{position:absolute;inset:0;width:100%;height:100%}
.shot-title{position:absolute;left:8.47cqw;right:8.47cqw;top:12.7cqw;font:600 9.75cqw/11.86cqw var(--font);letter-spacing:-.01em;color:#FFFFFF;text-wrap:balance}
.shot-screen{position:absolute;inset:0;width:100%;height:100%}
.shot-screen text{font-family:ui-rounded,"SF Pro Rounded",var(--font)}
.shot.full .shot-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.shot figcaption{color:var(--text-2);font-weight:600;font-size:15px}

/* ---------- Home: privacy ---------- */
.private{padding-bottom:clamp(56px,9vw,104px)}
.private-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;max-width:640px;margin-inline:auto;
  padding:clamp(28px,5vw,44px) clamp(20px,5vw,48px);border-radius:28px;background:var(--surface)}
.private-card svg{width:30px;height:30px;color:var(--ink);margin-bottom:4px}
.private-card h2{font:600 clamp(22px,4.4vw,30px)/1.2 var(--font);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.private-card p{color:var(--text-2);font-size:clamp(17px,2.2vw,19px);text-wrap:balance}
.private-card a{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-weight:600}

/* ---------- Footer ---------- */
.site-foot{border-top:1px solid var(--line);padding-block:20px calc(28px + env(safe-area-inset-bottom,0px));color:var(--text-2);font-size:15px}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px}
.foot-nav{display:flex;flex-wrap:wrap;gap:0 20px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--text);text-decoration:none;font-weight:600}
.foot-nav a:hover{text-decoration:underline}
.foot-meta{padding-block:10px}

/* ---------- Support, legal and 404 pages ---------- */
.page-head{padding-block:clamp(20px,5vw,48px) clamp(20px,4vw,36px)}
.page-head .wrap{display:flex;flex-direction:column;gap:10px}
.eyebrow{font-weight:600;font-size:15px;color:var(--text-2)}
.h1{font:600 clamp(32px,6.4vw,52px)/1.1 var(--font);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.meta{color:var(--text-2);font-size:16px}
.meta a{display:inline-flex;align-items:center;min-height:44px}
.page-head .lede{max-width:34em;color:var(--text-2);font-size:clamp(17px,2.2vw,19px)}
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding-block:8px clamp(64px,9vw,104px)}
@media (min-width:1000px){.doc-layout{grid-template-columns:220px minmax(0,1fr);gap:64px}}
.toc{align-self:start;border-radius:18px;background:var(--surface);padding:0 16px}
.toc-side{display:none}
@media (min-width:1000px){.toc{display:none}.toc-side{display:block;align-self:start;position:sticky;top:24px}.toc-side p{font-weight:600;font-size:15px;color:var(--text-2);padding-bottom:6px}}
.toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;
  font-weight:600;font-size:15px;color:var(--text-2)}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";width:8px;height:8px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.toc[open] summary::after{transform:translateY(2px) rotate(225deg)}
.toc ol,.toc-side ol{list-style:none;display:flex;flex-direction:column;padding-bottom:10px}
.toc a,.toc-side a{display:flex;align-items:center;min-height:44px;padding-block:4px;color:var(--text-2);text-decoration:none;font-size:15px;line-height:1.3}
.toc a:hover,.toc-side a:hover{color:var(--text)}
.doc{max-width:68ch;display:flex;flex-direction:column;gap:14px;min-width:0;overflow-wrap:break-word}
.doc h2{font:600 clamp(22px,3.6vw,26px)/1.25 var(--font);letter-spacing:-.01em;color:var(--ink);margin-top:26px}
.doc > h2:first-child{margin-top:0}
.doc h3{font:600 18px/1.35 var(--font);color:var(--text);margin-top:8px}
.doc h3 + p{margin-top:-8px}
.doc ul,.doc ol{padding-left:1.3em;display:flex;flex-direction:column;gap:8px}
.doc li::marker{color:var(--text-2)}
.doc ol > li::marker{font-weight:600}
.doc b{font-weight:600}
.who{list-style:none;padding:0 !important;gap:0 !important;border-top:1px solid var(--line)}
.who li{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--line)}
.who li span{color:var(--text-2)}
.not-found{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;padding-block:48px 96px}
.not-found .links{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:6px}
.not-found .links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}