/* Noo design tokens (direction F · Orbits).
   Source of truth: docs/VISUAL_IDENTITY.md. Keep identity/tokens.json in sync.
   Paths are relative to identity/; copy the fonts with this file or adjust the url()s. */

@font-face { font-family: "Syne"; src: url(fonts/Syne-var.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(fonts/AtkinsonHyperlegibleNext-var.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  /* Neutrals */
  --noo-ink: #14143A;        /* text, active chip, icon ground, primary button */
  --noo-paper: #F2F3FF;      /* app background, never cream */
  --noo-surface: #FFFFFF;    /* cards, sheets, tab bar */
  --noo-dusk: #5A5B78;       /* meta text */
  --noo-line: #DADCF0;       /* hairlines, never text */
  --noo-seen: #C9CBE0;       /* seen rings, suggestion rings, never text */

  /* Circles: a circle's colour marks everything only that circle sees.
     -fill for rings, dots, badges; -text for words. Never colour without the name. */
  --noo-family: #FF4D2E;   --noo-family-text: #C42E14;
  --noo-friends: #4C5BFF;  --noo-friends-text: #3B44E0;
  --noo-places: #F5B700;   --noo-places-text: #8A6100;   /* yellow is 1.8:1 on white: always with a name or badge */
  --noo-outside: var(--noo-seen); --noo-outside-text: var(--noo-dusk);

  /* Fonts. Atkinson's zero is slashed; it has no plain-zero alternate, so no font-feature-settings. */
  --noo-font-display: "Syne", -apple-system, system-ui, sans-serif;                        /* 20 px and up only */
  --noo-font-text: "Atkinson Hyperlegible Next", -apple-system, system-ui, sans-serif;     /* everything you read */

  /* Type scale: size / line height */
  --noo-display: 800 32px/36px var(--noo-font-display);     /* letter-spacing: -0.02em. Phone headlines: 2-3 lines on 393 px */
  --noo-display-xl: 800 44px/46px var(--noo-font-display);  /* letter-spacing: -0.02em. Desktop and marketing only, never in the app */
  --noo-title-l: 800 28px/32px var(--noo-font-display);     /* letter-spacing: -0.02em */
  --noo-title: 700 22px/26px var(--noo-font-display);       /* letter-spacing: -0.01em */
  --noo-card-title: 700 18px/22px var(--noo-font-text);
  --noo-body-l: 400 17px/24px var(--noo-font-text);
  --noo-body: 400 16px/22px var(--noo-font-text);
  --noo-label: 700 15px/20px var(--noo-font-text);
  --noo-meta: 400 14px/18px var(--noo-font-text);
  --noo-tab: 700 12px/14px var(--noo-font-text);            /* the only size below 14 px */

  /* Shape and space */
  --noo-radius-card: 30px; --noo-radius-media: 22px; --noo-radius-chip: 999px; --noo-radius-sheet: 30px;
  --noo-space-1: 4px; --noo-space-2: 8px; --noo-space-3: 12px; --noo-space-4: 16px; --noo-space-5: 24px; --noo-space-6: 32px;
  --noo-gutter: 16px; --noo-card-margin: 12px; --noo-card-padding: 12px;

  /* Rings */
  --noo-ring-row: 64px; --noo-ring-row-stroke: 4.5px; --noo-ring-seen-stroke: 2.5px; --noo-ring-row-max: 12;
  --noo-ring-byline: 38px; --noo-ring-byline-stroke: 3px; --noo-ring-gap: 4px;
  --noo-post-button: 50px;

  /* Icons */
  --noo-icon-stroke: 1.8; --noo-icon: 24px; --noo-icon-tab: 27px;
}

/* joinnoo.com: the homepage, in the Orbits identity (docs/VISUAL_IDENTITY.md). Appended to
   identity/tokens.css by site/build.py. Circle colours are reserved for circles: here they appear
   only in the logo and in the app's own screens. Links are ink and underlined. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noo-paper);color:var(--noo-ink);font:var(--noo-body-l)}
a{color:var(--noo-ink);text-decoration:underline;text-underline-offset:.18em}
a:focus-visible{outline:3px solid var(--noo-ink);outline-offset:3px;border-radius:6px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{margin:0}
p{margin:0 0 .75rem}
ul,ol{margin:0;padding:0;list-style:none}

.skip{position:absolute;left:-999px;top:0;background:var(--noo-ink);color:#fff;padding:.6rem 1rem;border-radius:0 0 12px 0}
.skip:focus{left:0;z-index:10}

.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--noo-space-3) var(--noo-space-5);max-width:72rem;margin:0 auto;padding:var(--noo-space-4) var(--noo-space-4) 0}
.brand{display:inline-block;line-height:0}
.brand:focus-visible{border-radius:8px}
.wordmark{height:40px;width:auto}
.langs ul{display:flex;flex-wrap:wrap;gap:var(--noo-space-1) var(--noo-space-2)}
.langs a{display:inline-block;padding:.45rem .7rem;font:var(--noo-label);text-decoration:none;border-radius:var(--noo-radius-chip);color:var(--noo-dusk)}
.langs a:hover{background:var(--noo-surface);color:var(--noo-ink)}
.langs a[aria-current]{background:var(--noo-ink);color:#fff}

/* The menu (T314): one line under the logo on a phone, scrolling sideways if it must; in the
   header's row on a wide screen. The current page is underlined, not filled: the fill is the
   language switch's. */
.menu{order:3;flex-basis:100%;margin:0 calc(-1 * var(--noo-space-4));overflow-x:auto;scrollbar-width:none}
.menu ul{display:flex;gap:var(--noo-space-1);padding:0 var(--noo-space-3);white-space:nowrap}
.menu a{display:inline-block;padding:.55rem .7rem;font:var(--noo-label);color:var(--noo-ink);text-decoration:none;border-radius:var(--noo-radius-chip)}
.menu a:hover{background:var(--noo-surface)}
.menu a[aria-current]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.45em}
@media (min-width:1100px){
  .menu{order:1;flex-basis:auto;margin:0;overflow:visible}
  .menu ul{padding:0}
  .langs{order:2}
}

main{max-width:72rem;margin:0 auto;padding:0 var(--noo-space-4)}
section{padding:var(--noo-space-6) 0}
h2{font:var(--noo-title-l);letter-spacing:-.02em;margin-bottom:var(--noo-space-4)}
h3{font:var(--noo-title);letter-spacing:-.01em;margin-bottom:var(--noo-space-2)}
.lead{font:var(--noo-body-l);max-width:42rem}
.note{font:var(--noo-meta);color:var(--noo-dusk);max-width:42rem}
.kicker{font:var(--noo-label);color:var(--noo-dusk);margin-bottom:var(--noo-space-3)}

.btn{display:inline-block;font:var(--noo-label);font-size:1.0625rem;line-height:1.2;padding:.9rem 1.4rem;border-radius:var(--noo-radius-chip);text-decoration:none;border:2px solid var(--noo-ink)}
.btn.primary{background:var(--noo-ink);color:#fff}
.btn.ghost{background:transparent;color:var(--noo-ink)}
.btn.huge{display:block;text-align:center;font-size:1.25rem;padding:1.15rem 1.5rem}
.btn:hover{box-shadow:0 0 0 3px var(--noo-line)}
.cta{display:flex;flex-wrap:wrap;gap:var(--noo-space-3);margin-top:var(--noo-space-5)}

.hero{display:grid;gap:var(--noo-space-6);padding-top:var(--noo-space-6)}
.hero h1{font:var(--noo-display);letter-spacing:-.02em;margin-bottom:var(--noo-space-4)}
.hero h1{font-size:1.7rem;line-height:1.18} /* the pitch is a full sentence: smaller than the app's 32 px on a phone */
@media (min-width:700px){.hero h1{font-size:2rem;line-height:2.25rem}}
.hero-shot{position:relative;justify-self:center;width:min(100%,17.5rem)}
.hero-shot::before,.hero-shot::after{content:"";position:absolute;border:2px solid var(--noo-line);border-radius:50%;z-index:0}
.hero-shot::before{inset:8% -42% 8% -42%}
.hero-shot::after{inset:20% -70% 20% -70%}
.hero-shot img,.shots img{position:relative;z-index:1;border-radius:34px;border:1px solid var(--noo-line);box-shadow:0 14px 40px rgba(20,20,58,.14);background:var(--noo-surface)}

.cards{display:grid;gap:var(--noo-space-4)}
.cards li{background:var(--noo-surface);border-radius:var(--noo-radius-card);padding:var(--noo-space-5)}
.cards p:last-child{margin-bottom:0}

.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--noo-space-5) var(--noo-space-4);margin-top:var(--noo-space-5)}
.shots figure{margin:0}
.shots figcaption{font:var(--noo-meta);color:var(--noo-dusk);margin-top:var(--noo-space-3);max-width:16rem}

.book .cards a{font:var(--noo-label)}
.cards.links h3 a{text-decoration-thickness:2px}
.next .stores{margin-top:var(--noo-space-5)}

.invited{background:var(--noo-surface);border-radius:var(--noo-radius-card);padding:var(--noo-space-5);margin:var(--noo-space-5) 0 var(--noo-space-6);border:2px solid var(--noo-ink)}
.invited .big{margin:var(--noo-space-5) 0 var(--noo-space-3)}
.invited h3{margin-top:var(--noo-space-5)}
.steps{display:grid;gap:var(--noo-space-4);counter-reset:step;margin-top:var(--noo-space-4)}
.steps li{counter-increment:step;position:relative;padding-left:3.4rem}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--noo-ink);color:#fff;font:var(--noo-title);display:flex;align-items:center;justify-content:center}
.steps h4{font:var(--noo-card-title);margin-bottom:.15rem}
.stores{display:flex;flex-wrap:wrap;gap:var(--noo-space-3)}

.foot{max-width:72rem;margin:0 auto;padding:var(--noo-space-5) var(--noo-space-4) var(--noo-space-6);border-top:2px solid var(--noo-line);font:var(--noo-meta);color:var(--noo-dusk)}
.foot a{color:var(--noo-ink)}
.foot .langs a{color:var(--noo-dusk)}
.foot .langs a[aria-current]{color:#fff}
.foot .legal{display:flex;flex-wrap:wrap;gap:var(--noo-space-2) var(--noo-space-5);margin:var(--noo-space-4) 0}
.foot .site ul{display:flex;flex-wrap:wrap;gap:var(--noo-space-2) var(--noo-space-5);margin-bottom:var(--noo-space-4);font:var(--noo-label)}
.foot-langs{margin-bottom:var(--noo-space-2)}

/* The long pages (the principles, how Home ranks): the legal pages' look. */
.doc{max-width:46rem;padding-top:var(--noo-space-5);padding-bottom:var(--noo-space-6)}
.doc h1{font:var(--noo-display);letter-spacing:-.02em;margin-bottom:var(--noo-space-4)}
.doc h2{margin-top:var(--noo-space-6);padding-top:var(--noo-space-4);border-top:2px solid var(--noo-line)}
.doc .version{margin:0 0 var(--noo-space-4);color:var(--noo-dusk)}
.doc .table{overflow-x:auto;background:var(--noo-surface);border-radius:12px;margin:1rem 0}
.doc form.card{background:var(--noo-surface);border-radius:var(--noo-radius-card);padding:var(--noo-space-5);margin:1rem 0}
.doc label{display:block;font-weight:700;margin:var(--noo-space-2) 0}
.doc input[type=email]{width:100%;font:inherit;padding:.7rem .8rem;border:2px solid var(--noo-line);border-radius:12px;background:var(--noo-paper)}
.doc button{font:inherit;font-weight:700;margin-top:var(--noo-space-4);padding:.8rem 1.2rem;border:0;border-radius:999px;background:var(--noo-ink);color:#fff}
.doc ul{list-style:disc;padding-left:1.4rem}
.doc li{margin:.25rem 0}
.doc blockquote{margin:1rem 0;padding:.75rem 1rem;background:var(--noo-surface);border-left:4px solid var(--noo-ink);border-radius:8px}
.doc .table{overflow-x:auto;background:var(--noo-surface);border-radius:12px;margin:1rem 0}
.doc table{border-collapse:collapse;width:100%;font-size:.95rem}
.doc th,.doc td{text-align:left;vertical-align:top;padding:.55rem .7rem;border-bottom:1px solid var(--noo-line)}
.doc code{font-size:.9em;overflow-wrap:anywhere}

/* The site's pages (T314, site/pages): the long pages' look, with the app's screens. */
.doc .lead{font:var(--noo-body-l);color:var(--noo-ink);margin-bottom:var(--noo-space-4)}
.doc figure{margin:var(--noo-space-5) 0;width:min(100%,15rem)}
.doc figure img{border-radius:30px;border:1px solid var(--noo-line);box-shadow:0 14px 40px rgba(20,20,58,.14);background:var(--noo-surface)}
.doc figcaption{font:var(--noo-meta);color:var(--noo-dusk);margin-top:var(--noo-space-3)}
.doc a{overflow-wrap:anywhere}
.page-why h2:last-of-type + p + ul{font:var(--noo-meta)}
.single{max-width:46rem}
.single .invited{margin-top:var(--noo-space-5)}
.invited h1{font:var(--noo-title-l);letter-spacing:-.02em;margin-bottom:var(--noo-space-4)}
.invited h2{font:var(--noo-title);margin-top:var(--noo-space-5)}

@media (min-width:700px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shots{grid-template-columns:repeat(4,minmax(0,1fr))}
  .invited{padding:var(--noo-space-6)}
  .invited .big{max-width:26rem}
}
@media (min-width:960px){
  .hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;padding-top:3.5rem;padding-bottom:3rem}
  .hero h1{font:var(--noo-display-xl);letter-spacing:-.02em}
  .hero-shot{width:min(100%,19rem)}
  section{padding:3rem 0}
}
@media (prefers-reduced-motion:no-preference){.btn{transition:box-shadow .15s}}