/* Leave a note: "On the desk" design */
:root {
  --desk: #e6ecef;          /* page background */
  --card: #ffffff;
  --chip: #eef3f6;
  --ink: #16202a;
  --muted: #4c5a67;
  /* no color accents: buttons and highlights use the ink color */
  --blue: #16202a;
  --blue-dark: #000000;
  --blue-soft: #dde2e6;
  --blue-text: #16202a;
  --note: #ffe873;
  --note-edge: #f5d94f;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { overflow-x: clip; scroll-padding-top: env(safe-area-inset-top, 0px); background: var(--desk); }
/* ---------- AURA: "horizon below the fold" ----------
   A warm peach-to-pink glow rising from just below the first screen, plus a faint lavender further down.
   Plain CSS gradients painted once with the page: no images, no animation, no blur.
   TO ROLL BACK: delete this block (down to "end AURA"). The page goes back to the flat gray. */
body {
  background:
    radial-gradient(120vmax 55vmax at 50% 118vh, rgba(255,200,130,.6), rgba(255,194,218,.3) 42%, transparent 70%),
    radial-gradient(70vmax 50vmax at 80% 185vh, rgba(220,203,246,.4), transparent 70%),
    var(--desk) !important;
  background-repeat: no-repeat !important;
}
/* Phones: the glow rises a bit faster than the page as you scroll, so it clears the recent-notes heading.
   Done with a CSS scroll-linked animation of a transform, which the browser runs off the main thread
   (no JavaScript, no repainting). Browsers without scroll-linked animations just show the still glow. */
@media (max-width: 600px) {
  body { isolation: isolate; overflow: clip; background: var(--desk) !important; }
  body::before {
    content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 190vh; z-index: -1; pointer-events: none;
    background:
      radial-gradient(120vmax 55vmax at 50% 118vh, rgba(255,200,130,.6), rgba(255,194,218,.3) 42%, transparent 70%),
      radial-gradient(70vmax 50vmax at 80% 172vh, rgba(220,203,246,.4), transparent 70%);
    background-repeat: no-repeat;
  }
  @supports (animation-timeline: scroll()) {
    body::before { animation: aura-rise linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes aura-rise { to { transform: translateY(-45vh); } }
/* ---------- end AURA ---------- */
body {
  position: relative;
  margin: 0;
  min-height: 100svh;
  display: flex; flex-direction: column;   /* keeps the footer at the bottom of the page */
  background: var(--desk);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--blue-text); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
/* quick double taps on buttons (like picking colors) never zoom the page on phones and iPads */
button, a, label, input, select, textarea, summary, [role="button"], [role="radio"] { touch-action: manipulation; }
/* a focus ring only shows for keyboard users, not after a tap */
body.np-touch :focus-visible { outline: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: 1; }

/* ---------- frame ---------- */
.site-head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 0;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 18px;
}
.wordmark { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); text-decoration: none; }
.wordmark img { width: 60px; height: auto; transform: rotate(-32deg); filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.wordmark span { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; }
.demo-flag { font-size: .875rem; color: var(--muted); background: var(--card); padding: 4px 12px; border-radius: 999px; }
main { flex: 1 0 auto; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px 72px; }
/* black footer: site links and policies, then copyright and the listing credits */
.site-foot { width: 100%; background: #111418; color: #aeb7bf; font-size: .9375rem; }
.site-foot a { color: inherit; }
.foot-inner { max-width: 1180px; margin: 0 auto; padding: 48px 24px 36px; display: flex; justify-content: space-between; align-items: flex-start; gap: 32px 48px; flex-wrap: wrap; }
/* back to the top: same size and line as the column headings, so it lines up with them */
.foot-top { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; cursor: pointer;
  color: #fff; font: inherit; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.foot-top svg { flex-shrink: 0; transition: transform .15s ease; }
.foot-top:hover { text-decoration: underline; }
.foot-top:hover svg { transform: translateY(-2px); }
.foot-cols { display: flex; gap: 32px 72px; flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot-col h2 { margin: 0 0 4px; color: #fff; font-family: var(--sans); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.foot-col a { color: #d5dbe0; text-decoration: none; }
.foot-chev { display: none; flex-shrink: 0; }
/* desktop and tablet: three columns — Scroll to top, then About and Policies as tidy rows with dividers */
@media (min-width: 601px) {
  .foot-inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 56px; align-items: start; }
  .foot-cols { display: contents; }
  .foot-col { align-items: stretch; gap: 0; }
  .foot-col h2 { margin: 0 0 10px; color: #8b959e; }
  .foot-col a { display: flex; align-items: center; justify-content: space-between; min-height: 44px;
    border-bottom: 1px solid rgba(255,255,255,.1); }
  .foot-col a:first-of-type { border-top: 1px solid rgba(255,255,255,.1); }
  .foot-cols .foot-col a:hover, .foot-cols .foot-col a:focus-visible { text-decoration: none; }
  .foot-chev { display: block; opacity: .5; }
  .foot-top { justify-self: start; padding: 12px 18px; border-radius: 999px; background: rgba(255,255,255,.08); }
  .foot-copy { margin-left: 18px; }   /* logo lines up with the Scroll to top arrow (the pill's 18px inner padding) */
  .foot-top:hover { text-decoration: none; background: rgba(255,255,255,.14); }
}
.foot-col a:hover, .foot-col a:focus-visible { color: #fff; text-decoration: underline; }
/* desktop: each link lights up in one of the sticky note colors */
@media (hover: hover) and (pointer: fine) {
  .foot-col a { transition: color .15s ease; text-underline-offset: 3px; }
  .foot-col:nth-child(1) a:nth-of-type(1) { --hi: #ffe873; }   /* About Notegasm: yellow */
  .foot-col:nth-child(1) a:nth-of-type(2) { --hi: #ffc2da; }   /* FAQ: pink */
  .foot-col:nth-child(1) a:nth-of-type(3) { --hi: #ffcf9e; }   /* Contact us: orange */
  .foot-col:nth-child(2) a:nth-of-type(1) { --hi: #c3e6f8; }   /* Terms of use: light blue */
  .foot-col:nth-child(2) a:nth-of-type(2) { --hi: #dccbf6; }   /* Privacy policy: purple */
  .foot-col:nth-child(2) a:nth-of-type(3) { --hi: #a8e98c; }   /* Community guidelines: green (the Search confetti green) */
  .foot-col a:hover { color: var(--hi, #fff); }
}
.site-foot :focus-visible { outline-color: #fff; }
.foot-bottom { width: calc(100% - 48px); max-width: 1132px; margin: 0 auto; padding: 4px 0 32px;
  display: flex; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; font-size: .8125rem; color: #8b959e; }
.foot-bottom .foot-line + .foot-line { margin-left: 6px; }
/* the Notegasm wordmark, in white, leading the © line */
.foot-copy { display: flex; align-items: center; flex-wrap: wrap; }
.foot-logo { flex: none; display: block; height: 24px; width: auto; margin-right: 10px; color: #fff; }
.foot-made::before { content: "·"; margin-right: 6px; }
/* footer pages (placeholders for now) */
.info-page { max-width: 680px; margin: 0 auto; padding: 72px 0 48px; }
.info-page h1 { font-size: clamp(2.4rem, 7vw, 3.75rem); margin: 18px 0 22px; }
/* text starts under the tip of the Home arrow, not the pill's edge */
.info-page h1, .info-page .info-body { padding: 0 17px; }
.info-body p { margin: 0 0 1.1em; font-size: 1.125rem; line-height: 1.6; }
.info-body .info-made { margin-top: 1.8em; color: var(--muted); font-size: 1rem; }
.info-body .info-signoff { font-family: var(--display); font-weight: 700; font-size: 1.125rem; }
/* house rules: numbered, each with its own heading */
.rules { list-style: none; counter-reset: rule; margin: 0 0 8px; padding: 0; }
.rules li { counter-increment: rule; position: relative; padding: 0 0 6px 52px; }
.rules li::before { content: counter(rule); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1rem; }
.rules h2 { margin: 4px 0 8px; font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.15; }
/* guidelines: same layout, no numbers, a small yellow note in place of each */
.rules.plain li { counter-increment: none; padding-left: 40px; }
.rules.plain li::before { content: ""; top: 6px; width: 20px; height: 20px; border-radius: 3px; transform: rotate(-6deg);
  background: linear-gradient(160deg, #ffe873 55%, #f5d94f 100%); box-shadow: 0 1px 1px rgba(60,50,0,.18), 0 4px 6px -3px rgba(60,50,0,.35); }
.rules.plain li:nth-child(even)::before { transform: rotate(5deg); }
.info-body .info-intro { font-size: 1.25rem; line-height: 1.5; margin-bottom: 1.6em; }
.info-body .rules-end { margin-top: 1.4em; font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.35; }
.info-body a { color: var(--ink); }
/* still to be written: stands out so it can't slip through to launch */
.info-body mark.todo { background: #fff1a6; color: #6b5300; padding: 1px 4px; border-radius: 4px; font-style: italic; }
/* Contact us window: small, plain, and dark like the footer, over a lighter dimmed page */
.contact { z-index: 45; display: grid; place-items: center; padding: 26px; overflow-y: auto;   /* room for the yellow border */
  background: rgba(150,162,170,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* a white card on a rounded sticky-note-yellow border */
.contact-card { width: min(100%, 380px); display: grid; gap: 10px; background: #fff; color: var(--ink); border-radius: 22px; padding: 18px;
  box-shadow: 0 0 0 10px #ffe873, 0 0 0 11px rgba(22,32,42,.12), 0 30px 60px -20px rgba(0,0,0,.5); animation: contact-in .18s ease; }
@keyframes contact-in { from { opacity: 0; transform: translateY(6px); } }
.contact-head, .contact-done { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.contact-head h2 { margin: 0; font-size: 1.1875rem; letter-spacing: -.02em; }
.contact-done p { margin: 0; font-weight: 600; }
.contact-x { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--chip); color: var(--ink); cursor: pointer; }
.contact-x:hover { background: #dde2e6; }
.contact-card input, .contact-card select, .contact-card textarea {
  display: block; width: 100%; padding: 9px 12px; border: 1.5px solid #d3dade; border-radius: 10px;
  background-color: #f4f7fa; color: var(--ink); font: inherit; font-size: .9375rem; outline: none; resize: vertical; }
.contact-card select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316202a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.contact-card select option { background: #fff; color: var(--ink); }
.contact-card input:focus, .contact-card select:focus, .contact-card textarea:focus { border-color: var(--ink); }
.contact-card ::placeholder { color: #7c8893; }
.contact-card :focus-visible { outline-color: var(--ink); }
.contact-bot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.contact-error { margin: 0; color: #c0392b; font-size: .875rem; }
.contact-error:empty { display: none; }
.contact-error a { color: inherit; font-weight: 700; }
.contact-send { width: 100%; min-height: 42px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.contact-send:hover { background: #000; }
.contact-send:disabled { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .contact-card { animation: none; } }
/* FAQ: questions that open and close */
.faq-item { background: var(--card); border-radius: 18px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(22,32,42,.06); overflow: hidden; transition: box-shadow .25s ease; }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; font-weight: 700; font-size: 1.0625rem; border-radius: 18px;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* hover: a soft light from the left (a touch of gray fading to white), and the question lifts a little */
.faq-item summary { transition: background .25s ease; }
.faq-item summary:hover { background: radial-gradient(120% 180% at 0% 50%, #eef2f5 0%, #f7f9fb 40%, #fff 75%); }
.faq-item:has(summary:hover) { box-shadow: 0 10px 24px -14px rgba(22,32,42,.35); }
.faq-item[open] summary:hover { background: none; }
.faq-icon { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--chip); transition: transform .2s ease, background .2s ease; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 1px; background: var(--ink); transform: translate(-50%, -50%); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s ease; }
.faq-item[open] .faq-icon { background: var(--ink); }
.faq-item[open] .faq-icon::before { background: #fff; }
.faq-item[open] .faq-icon::after { background: #fff; transform: translate(-50%, -50%) rotate(0deg); }   /* plus becomes minus */
.info-body .faq-item p { margin: 0; padding: 0 20px 20px; font-size: 1.0625rem; color: var(--muted); animation: faq-in .22s ease; }
.info-body .faq-item p:not(:last-child) { padding-bottom: 10px; }   /* answers with more than one paragraph */
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .info-body .faq-item p { animation: none; } .faq-icon, .faq-icon::after { transition: none; } }

/* ---------- home ---------- */
.hero {
  max-width: 780px; margin: 0 auto; padding: 24px 0;
  min-height: 100svh;
  display: flex; flex-direction: column;
  text-align: center;
}
/* the search bar sits in the exact middle of the first screen */
.hero-top { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-top .lede { margin-bottom: 0; }
.hero-bottom { flex: 1 1 0; min-height: 0; }   /* results drop down over the page below */
.hero .search { margin-top: 27px; margin-bottom: 30px; }   /* about equal space above and below keeps it centered */
.hero .search-status { margin-top: -14px; }
.hero h1 { font-size: clamp(2.9rem, 8.4vw, 5.25rem); line-height: calc(.95em - 4px); letter-spacing: -.035em; margin: 0 auto 16px; }   /* lines 4px closer on desktop */
.lede { color: var(--muted); font-size: 1.1875rem; line-height: calc(1.55em - 5px); margin: 0 auto 30px; max-width: 30em; text-wrap: balance; }   /* even lines, set a little closer */
.search {
  position: relative; z-index: 10;   /* the intro note falls behind the search bar */
  display: flex; align-items: center; gap: 8px;
  width: 80%; margin-left: auto; margin-right: auto;
  height: 61px; padding: 0 8px 0 20px;
  background: var(--card); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(22,32,42,.08), 0 14px 32px -14px rgba(22,32,42,.35);
  text-align: left;
}
.search:focus-within { box-shadow: 0 0 0 3px var(--blue), 0 14px 32px -14px rgba(22,32,42,.35); }
.search-icon { display: flex; color: var(--muted); flex-shrink: 0; }
.search input {
  flex: 1; min-width: 0; height: 100%;
  font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: transparent; border: 0; outline: none;
}
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-left: 6px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c5a67' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.go {
  position: relative; flex-shrink: 0; height: 46px; padding: 0 22px;
  font: inherit; font-size: 1rem; font-weight: 700; color: #fff;
  background: var(--blue); border: 0; border-radius: 999px; cursor: pointer;
  transition: transform .15s ease;
}
/* confetti pop: tiny sticky notes burst out around the button on hover */
.go:hover, .go:focus-visible { transform: scale(1.05); }
.go .bit {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 1.5px;
  box-shadow: 0 1px 1px rgba(60,50,0,.18); opacity: 0; pointer-events: none;
}
.go:hover .bit, .go:focus-visible .bit { animation: go-burst .65s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes go-burst {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .go:hover .bit, .go:focus-visible .bit { animation: none; }
  .go:hover, .go:focus-visible { transform: none; }
}
.go:hover { background: var(--blue-dark); }
.search-credit { position: relative; z-index: 1; width: fit-content; max-width: calc(100% - 16px); margin: 8px 8px 0 auto; padding: 3px 10px;
  border-radius: 999px; background: var(--desk); font-size: .75rem; line-height: 1.4; color: var(--muted); text-align: center; }
.search-credit[hidden] { display: none; }
@media (max-width: 600px) { .search-credit { margin: 8px auto 0; font-size: .6875rem; } }
.search-credit a { color: inherit; text-underline-offset: 2px; }
.search-status { margin: 14px 8px 8px; font-size: .9375rem; color: var(--muted); text-align: left; }
.hero .search-status:empty { margin: 0; }                /* takes no space when there's nothing to say */
.hero .results { margin-top: 12px; }
.r-credit { padding: 6px 16px 2px; font-size: .75rem; color: var(--muted); text-align: right; list-style: none; }
.hero .search-status, .hero .results { width: 80%; margin-left: auto; margin-right: auto; }
.results {
  list-style: none; margin: 0; padding: 8px;
  position: relative;
  overflow-y: auto; overscroll-behavior: contain;   /* scrolls inside the box; the page stays put */
  box-shadow: 0 14px 32px -14px rgba(22,32,42,.35);
  background: var(--card); border-radius: 24px; text-align: left;
}
.results:empty { display: none; }
.r-row { display: flex; align-items: center; gap: 4px; border-radius: 16px; }
.r-row:hover, .r-row.active { background: var(--chip); }   /* the highlighted suggestion opens when you press Search */
.r-link { flex: 1; min-width: 0; display: block; padding: 12px 16px; border-radius: 16px; color: var(--ink); text-decoration: none; }
/* the little sticky note on the right: write a note without opening the page */
.r-write {
  flex-shrink: 0; width: 48px; height: 48px; margin-right: 6px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 14px; cursor: pointer; color: var(--ink);
}
.r-note {
  position: relative; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 30%;   /* squircle */
  background: linear-gradient(160deg, var(--note) 55%, var(--note-edge) 100%);
  box-shadow: 0 1px 1px rgba(60,50,0,.14), 0 5px 8px -4px rgba(60,50,0,.4);
  transform: rotate(-5deg);
  transition: transform .18s ease, box-shadow .18s ease;
}
.r-write:hover .r-note, .r-write:focus-visible .r-note { transform: rotate(3deg) translateY(-2px) scale(1.08); box-shadow: 0 2px 2px rgba(60,50,0,.14), 0 10px 14px -6px rgba(60,50,0,.45); }
.r-fan { display: none; }            /* the colored notes behind: desktop only */
.r-top { display: contents; }
/* Desktop: a bigger note that sits square in the row, its corners following the curve of the
   results box (box radius 24px, note 12px in from the edge, so note radius 12px). Mousing over
   it fans out a pink, blue and purple note from behind, a hint that you pick a color when writing. */
@media (min-width: 601px) {
  .r-write { width: 50px; height: 50px; margin-right: 12px; padding: 0; border-radius: 12px; }   /* same gap right as above and below */
  /* up 2px so the note, with its drop shadow, looks centered in the row */
  .r-note { width: 46px; height: 46px; background: none; box-shadow: none; transform: translateY(-2px); }
  .r-write:hover .r-note, .r-write:focus-visible .r-note { transform: translateY(-2px); box-shadow: none; }
  .r-fan, .r-top {
    position: absolute; inset: 0; border-radius: 12px;
    box-shadow: 0 1px 1px rgba(60,50,0,.14), 0 5px 8px -4px rgba(60,50,0,.35);
    transform-origin: 50% 120%; transition: transform .35s cubic-bezier(.3,1.5,.5,1);
  }
  .r-fan { display: block; box-shadow: none; opacity: 0; transition: transform .35s cubic-bezier(.3,1.5,.5,1), opacity .12s ease; }   /* hidden behind until hover, so shadows don't stack up */
  .r-write:hover .r-fan, .r-write:focus-visible .r-fan { opacity: 1; box-shadow: 0 4px 8px -5px rgba(40,30,60,.35); }
  .r-fan:nth-child(1) { background: #dccbf6; }   /* purple */
  .r-fan:nth-child(2) { background: #c3e6f8; }   /* light blue */
  .r-fan:nth-child(3) { background: #ffc2da; }   /* pink */
  .r-top { display: grid; place-items: center; background: linear-gradient(160deg, var(--note) 55%, var(--note-edge) 100%); }
  .r-top svg { width: 21px; height: 21px; }
  .r-write:hover .r-fan:nth-child(1), .r-write:focus-visible .r-fan:nth-child(1) { transform: rotate(-30deg) translateY(-2px); }
  .r-write:hover .r-fan:nth-child(2), .r-write:focus-visible .r-fan:nth-child(2) { transform: rotate(-19deg) translateY(-2px); }
  .r-write:hover .r-fan:nth-child(3), .r-write:focus-visible .r-fan:nth-child(3) { transform: rotate(-8deg) translateY(-2px); }
  .r-write:hover .r-top, .r-write:focus-visible .r-top { transform: rotate(4deg) translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .r-fan, .r-top { transition: none; } }
.r-name { display: block; font-weight: 700; }
.r-sub { display: block; font-size: .9375rem; color: var(--muted); }
.r-street, .r-city { display: none; }   /* phones only */
.recent { margin-top: 8px; }
.sec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 30px; }
.sec-head h2 { font-size: clamp(1.875rem, 4vw, 2.25rem); margin: 0; }
.sec-head p { margin: 0; color: var(--muted); }

/* ---------- wall of notes ---------- */
.wall {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 36px 30px;
}
.wall-note { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wn-paper {
  position: relative; display: block;
  aspect-ratio: 1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.045) 0, rgba(0,0,0,0) 14%),
    linear-gradient(160deg, var(--note) 60%, var(--note-edge) 100%);
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 1px 1px rgba(60, 50, 0, .12), 0 8px 14px -8px rgba(60, 50, 0, .35);
  transition: transform .2s ease;
}
.wn-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
a.wn-paper:hover { transform: rotate(var(--tilt, 0deg)) translateY(-3px); }
.wn-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: .875rem; color: var(--muted); }
.wn-biz { width: 100%; font-size: 1rem; color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wn-action {
  font: inherit; font-size: .875rem; color: var(--muted);
  min-height: 32px; background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.wn-action:disabled { text-decoration: none; cursor: default; }
.just-posted .wn-paper { animation: stick .55s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes stick {
  from { opacity: 0; transform: rotate(var(--tilt, 0deg)) translateY(-40px) scale(1.12); }
}

.biz-credit { margin: 2px 0 0; font-size: .75rem; color: var(--muted); }

/* Desktop: the headline, subheader and search bar sit together in the middle of the first screen.
   Search results hang below without moving them. (Phones center the search bar itself.) */
@media (min-width: 601px) {
  .hero { justify-content: center; padding-bottom: 84px; }   /* 60px more below than above lifts the group 30px */
  .hero-top { flex: none; }
  .hero-bottom { flex: none; height: 0; }
  .hero .search { margin-bottom: 0; }
  .hero .search-status { margin-top: 14px; }
  /* desktop search bar 10% smaller all round; the results below match its width */
  .hero .search { width: 72%; height: 55px; padding: 0 7px 0 18px; gap: 7px; }
  .hero .search-icon svg { width: 20px; height: 20px; }
  .hero .search input { font-size: .95rem; }
  .hero .go { height: 41px; padding: 0 20px; font-size: .9rem; }
  .hero .search-status, .hero .results { width: 72%; }
}

/* ---------- intro: the note that falls off the headline ---------- */
.intro-word { display: inline-block; }
/* hero: the last word rolls between business, location and situation (see app.js) */
.roll { display: inline-block; position: relative; white-space: nowrap;
        clip-path: inset(0 -.08em .04em -.08em);            /* a one-line window the words roll through */
        transition: width .45s cubic-bezier(.4,0,.2,1); }
.roll-ghost { visibility: hidden; }
.roll.has-desc { clip-path: inset(-.02em -.08em -.26em -.08em); }   /* words with q, y, g: room for their tails */
.roll-w { position: absolute; left: 0; top: 0; }
.roll-sizer { position: absolute; visibility: hidden; white-space: nowrap; pointer-events: none; }
.intro-note {
  position: fixed; z-index: 5;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.05) 0, rgba(0,0,0,0) 14%),
    linear-gradient(160deg, var(--note) 60%, var(--note-edge) 100%);
  box-shadow: 0 1px 1px rgba(60,50,0,.14), 0 6px 10px -6px rgba(60,50,0,.35);
  pointer-events: none;
  will-change: transform;
}
.intro-note.lifted { box-shadow: 0 2px 2px rgba(60,50,0,.14), 0 22px 30px -12px rgba(60,50,0,.45); }
.intro-note canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-bottom { position: relative; z-index: 20; }   /* search results drop down over everything */

/* ---------- business page: name on top, notes scattered from the middle of the screen down ---------- */
.biz-loading { margin-top: 40px; }
.biz-top {
  position: relative;
  min-height: 50vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 88px 0 28px; text-align: center;
}
.biz-top .back-pill { position: absolute; left: 0; top: 20px; margin: 0; }
/* share: a pill mirroring Search; on computers it opens a small dark window under it */
.share-pill { position: absolute; right: 0; top: 20px; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 18px 0 15px; border: 0; border-radius: 999px; background: var(--card);
  color: var(--ink); font: 600 .9375rem var(--sans); cursor: pointer; }
.share-pill:hover { background: var(--chip); }
.share-pop { position: absolute; right: 0; top: 74px; z-index: 30; width: min(340px, 100%);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: 14px;
  background: #111418; color: #fff; text-align: left; box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); }
.share-pop :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.share-title { margin: 0; font: 800 1.0625rem var(--display); letter-spacing: -.02em; }
.share-url { display: flex; gap: 6px; }
.share-url input { flex: 1; min-width: 0; padding: 9px 12px; border: 1.5px solid #313943; border-radius: 10px;
  background: #1b2027; color: #fff; font: inherit; font-size: .9375rem; outline: none; text-overflow: ellipsis; }
.share-url input:focus { border-color: #fff; }
.share-copy { min-width: 76px; border: 0; border-radius: 999px; background: #fff; color: #111418; font: 700 .9375rem var(--sans); padding: 0 16px; cursor: pointer; }
.share-copy:hover { background: #e6ecef; }
.share-qr { justify-self: start; padding: 2px 0; border: 0; background: none; color: #d5dbe0; font: 600 .875rem var(--sans);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.share-qr:hover { color: #fff; }
.biz-name { font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: .95; letter-spacing: -.035em; margin: 6px 0 0; max-width: 12em; }
.biz-top .addr { margin: 0; color: var(--muted); font-size: 1.125rem; }
.biz-top .map-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 1rem; font-weight: 700; }
.note-count { margin: 0; color: var(--muted); font-size: .9375rem; }

#scatter { position: relative; isolation: isolate; overflow-x: clip; margin-bottom: 24px; --s: 200px; }
.sn {
  position: absolute; left: 0; top: 0;
  width: var(--s); height: var(--s);
  padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  transition: transform .25s ease;
}
.sn-paper {
  position: absolute; inset: 0; display: block;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.045) 0, rgba(0,0,0,0) 14%),
    linear-gradient(160deg, var(--note) 60%, var(--note-edge) 100%);
  box-shadow: 0 1px 1px rgba(60,50,0,.12), 0 8px 14px -8px rgba(60,50,0,.35);
  transition: box-shadow .25s ease;
}
.sn canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sn-when {
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  white-space: nowrap; padding: 4px 10px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: .8125rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.sn:hover, .sn:focus-visible { z-index: 100 !important; transform: translate(var(--x), calc(var(--y) - 6px)) rotate(calc(var(--r) * .4)) scale(1.06); }
.sn:hover .sn-paper, .sn:focus-visible .sn-paper { box-shadow: 0 2px 2px rgba(60,50,0,.14), 0 24px 32px -14px rgba(60,50,0,.45); }
.sn:hover .sn-when, .sn:focus-visible .sn-when { opacity: 1; }
.sn:focus-visible { outline: none; }
.sn:focus-visible .sn-paper { outline: 3px solid var(--ink); outline-offset: 3px; }
/* notes stick on as they scroll into view */
.sn.pending { opacity: 0; transform: translate(var(--x), calc(var(--y) - 30px)) rotate(calc(var(--r) - 6deg)) scale(1.12); }
.sn.stuck { transition: transform .45s cubic-bezier(.2,.9,.3,1.2), opacity .25s ease; }
.sn.just { animation: sn-stick .6s cubic-bezier(.2,.9,.3,1.15); }
@keyframes sn-stick { from { opacity: 0; transform: translate(var(--x), calc(var(--y) - 60px)) rotate(calc(var(--r) - 10deg)) scale(1.2); } }
/* "Your note": a blank note first in the pile, with the pencil lying on it */
.sn.yours { z-index: 90 !important; }
.sn.yours .sn-paper {
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 10px 18px;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.045) 0, rgba(0,0,0,0) 14%),
    linear-gradient(160deg, #fff3a8 60%, #ffe873 100%);
  box-shadow: 0 1px 1px rgba(60,50,0,.12), 0 14px 24px -10px rgba(60,50,0,.45);
  font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--muted);
}
.sn-cta-m { display: none; }
@media (max-width: 600px) {
  .sn-cta-d { display: none; }
  .sn-cta-m { display: inline; }
}
.sn-tag {
  position: absolute; left: 50%; top: -18px; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: .8125rem; font-weight: 700; white-space: nowrap;
}
.sn.yours img {
  position: absolute; width: calc(var(--s) * 1.288); left: calc(var(--s) * -.1 + 45px); top: calc(var(--s) * .35);
  transform: rotate(-24deg);
  filter: drop-shadow(4px 8px 5px rgba(0,0,0,.2));
  pointer-events: none; -webkit-user-drag: none;
}

/* ---------- dialogs: the writing desk and the note viewer ---------- */
html.dialog-open { overflow: hidden; }
.dialog { position: fixed; inset: 0; z-index: 25; }
.desk { display: flex; flex-direction: column; background: var(--desk); overflow: hidden; }
.desk-head {
  width: 100%; max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 24px 0;
}
.desk-title { margin: 0; color: var(--muted); font-size: .9375rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-title strong { color: var(--ink); }
.desk-close, .viewer-close {
  flex-shrink: 0; min-height: 44px; padding: 0 18px;
  font: inherit; font-size: .9375rem; font-weight: 700;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--ink);
}
.desk .stage { flex: 1 1 auto; }
.viewer {
  z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: 28px; padding: 20px;
  background: rgba(22,32,42,.8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.viewer-card { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.viewer-paper {
  position: relative; width: min(calc(100vw - 32px), 400px, calc(100svh - 230px)); aspect-ratio: 1;
  touch-action: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.045) 0, rgba(0,0,0,0) 14%),
    linear-gradient(160deg, var(--note) 60%, var(--note-edge) 100%);
  box-shadow: 0 2px 2px rgba(0,0,0,.14), 0 30px 40px -18px rgba(0,0,0,.5);
  transform: rotate(var(--tilt, -2deg));
  transition: transform .2s ease;
}
.viewer-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.viewer-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.viewer-time { color: #fff; font-size: .9375rem; font-weight: 600; }
.viewer-info { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 8px; text-align: center; }
.viewer-line { display: flex; align-items: center; gap: 10px; }

/* gallery: step through the business's notes with the arrows, the keyboard, or a swipe */
.viewer-count { color: #fff; font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.viewer-count:empty { display: none; }
.viewer-nav {
  flex-shrink: 0; width: 56px; height: 56px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--card); color: var(--ink);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.55);
  transition: transform .15s ease, opacity .15s ease;
}
.viewer-nav svg { width: 26px; height: 26px; }
.viewer-nav:hover:not(:disabled) { transform: scale(1.07); }
.viewer-nav:active:not(:disabled) { transform: scale(.96); }
.viewer-nav:disabled { opacity: .28; cursor: default; }
.viewer-nav[hidden] { display: none; }
@keyframes viewer-from-right { from { opacity: 0; transform: translateX(48px) rotate(var(--tilt, -2deg)); } }
@keyframes viewer-from-left  { from { opacity: 0; transform: translateX(-48px) rotate(var(--tilt, -2deg)); } }
.viewer-paper.slide-left  { animation: viewer-from-right .3s cubic-bezier(.2,.8,.2,1); }
.viewer-paper.slide-right { animation: viewer-from-left .3s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .viewer-paper.slide-left, .viewer-paper.slide-right { animation: none; }
}
/* desktop and tablet: a much bigger note, arrows either side */
@media (min-width: 601px) {
  .viewer-paper { width: min(calc((100vw - 260px) * .8 * .83), calc((100svh - 150px) * .8 * .83), 478px); }   /* 17% smaller again */
}
/* phones: full-width note, arrows either side of the controls underneath */
@media (max-width: 600px) {
  .viewer {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
    grid-template-areas: "info info info" "paper paper paper" "prev meta next";
    align-content: center; justify-items: center; gap: 14px 8px; padding: 16px;
  }
  .viewer-card { display: contents; }
  .viewer-info { grid-area: info; margin: -23px 0 8px; }
  .viewer-paper { grid-area: paper; width: min(calc((100vw - 32px) * .93), 372px, calc((100svh - 230px) * .93)); }
  .viewer-meta { grid-area: meta; gap: 8px; margin-top: 15px; }
  .viewer-nav { width: 44px; height: 44px; align-self: start; margin-top: 15px; }
  .viewer-nav svg { width: 22px; height: 22px; }
  .viewer-nav.prev { grid-area: prev; margin-left: 18px; }
  .viewer-nav.next { grid-area: next; margin-right: 18px; }
}

/* ---------- recently left on desktop: deal the pile out to the left ---------- */
.recent > .sec-head { display: none; }                         /* desktop shows the heading inside the pinned stage */
.recent-deal { width: 100vw; margin-left: calc(50% - 50vw); }  /* full width, so notes can slide off the screen edge */
.deal-track { position: relative; }
.deal-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.deal-head { position: absolute; left: max(24px, calc(50% - 566px)); top: 11vh; z-index: 60; }
.deal-head h2 { margin: 0 0 6px; font-size: 2.25rem; }
.deal-head p { margin: 0; color: var(--muted); }
.deal-note {
  position: absolute; left: 0; top: 0;
  width: var(--s, 280px); height: var(--s, 280px);
  display: block; color: var(--ink); text-decoration: none;
  will-change: transform;
}
.deal-paper {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.045) 0, rgba(0,0,0,0) 14%),
    linear-gradient(160deg, var(--note) 60%, var(--note-edge) 100%);
  box-shadow: 0 1px 1px rgba(60,50,0,.12), 0 8px 14px -8px rgba(60,50,0,.35);
  transition: box-shadow .2s ease;
}
.deal-note.lifted .deal-paper { box-shadow: 0 2px 2px rgba(60,50,0,.14), 0 26px 34px -14px rgba(60,50,0,.45); }
.deal-note.landed:hover .deal-paper { box-shadow: 0 2px 2px rgba(60,50,0,.14), 0 20px 28px -12px rgba(60,50,0,.45); }
.deal-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.deal-label {
  position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .9375rem; font-weight: 700; opacity: 0; transition: opacity .2s ease;
}
.deal-note.landed .deal-label { opacity: 1; }
.deal-caption, .deal-meta { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 70; }
.deal-caption { gap: 2px; }
.deal-caption .biz { font-size: 1.125rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.deal-caption .time { font-size: .875rem; color: var(--muted); }
.deal-meta { gap: 8px; }
.deal-meta .count { padding: 5px 12px; border-radius: 999px; background: var(--card); font-size: .8125rem; font-weight: 700; }
.deal-meta .hint { display: flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--muted); transition: opacity .2s; }

/* ---------- recently left on phones: flip the pile ---------- */
.recent-flip { display: none; }
.flip-track { position: relative; }
.flip-stage {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  overflow: hidden;   /* flicked notes leave the screen without widening the page */
}
.pile { position: relative; width: var(--s, 272px); height: var(--s, 272px); }
.flip-note {
  position: absolute; left: 0; top: 0;
  width: var(--s, 272px); height: var(--s, 272px);
  display: block;
  will-change: transform;
}
.flip-paper {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.045) 0, rgba(0,0,0,0) 14%),
    linear-gradient(160deg, var(--note) 60%, var(--note-edge) 100%);
  box-shadow: 0 1px 1px rgba(60,50,0,.12), 0 8px 14px -8px rgba(60,50,0,.35);
  transition: box-shadow .2s ease;
}
.flip-note.lifted .flip-paper { box-shadow: 0 2px 2px rgba(60,50,0,.14), 0 24px 32px -14px rgba(60,50,0,.45); }
.flip-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.flip-caption { min-height: 50px; margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }   /* clear of the tilted notes hanging below the pile */
.flip-caption .biz { font-size: 1.125rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.flip-caption .time { font-size: .875rem; color: var(--muted); }
.flip-meta { display: flex; flex-direction: column; align-items: center; gap: 8px; }   /* counter centered, hint underneath */
.flip-meta .count { padding: 5px 12px; border-radius: 999px; background: var(--card); font-size: .8125rem; font-weight: 700; }
.flip-meta .hint { display: flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--muted); transition: opacity .2s; }
.flip-done { padding: 8px 0 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.flip-done-title { margin: 0; font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; transition: opacity .22s ease, transform .22s ease; }
.flip-done-title.swap { opacity: 0; transform: translateY(6px); }
@media (min-width: 601px) { .flip-done-title { font-size: 1.2rem; } }   /* 20% smaller on desktop */
@media (max-width: 600px) { .flip-done-title { font-size: 1.125rem; } }   /* 25% smaller on phones */
.flip-cta { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .9375rem; font-weight: 700; text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--ink); transition: background .18s ease, color .18s ease; }
/* the pencil stays tucked away until hover (desktop): then the button flips to white and the pencil slides in */
.cta-pencil { width: 0; height: 16px; opacity: 0; margin-left: -8px; flex-shrink: 0; transform: translateX(-8px);
  transition: width .2s ease, opacity .2s ease, margin .2s ease, transform .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .flip-cta:hover { background: #fff; color: var(--ink); }
  .flip-cta:hover .cta-pencil { width: 16px; opacity: 1; margin-left: 0; transform: none; }
}
.flip-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- business page ---------- */
.back-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; margin: 20px 0 16px; padding: 0 18px 0 14px;
  background: var(--card); border-radius: 999px;
  color: var(--ink); font-size: .9375rem; font-weight: 600; text-decoration: none;
}
.back-pill:hover { background: var(--chip); }
.biz-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 26px 28px; background: var(--card); border-radius: 24px;
}
.chip-cat { padding: 5px 12px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: .8125rem; font-weight: 700; }
.biz-card h1 { font-size: clamp(2.1rem, 5vw, 3rem); margin: 0; max-width: 20em; }
.biz-card .addr { margin: 0; color: var(--muted); }
.map-link { font-size: .9375rem; font-weight: 600; color: var(--ink); text-underline-offset: 3px; }
.not-found { font-size: 2rem; margin: 12px 0 10px; }
.wall-sec { margin-top: 8px; }
.count-chip { padding: 4px 12px; border-radius: 999px; background: var(--card); font-size: .875rem; font-weight: 700; }
.wall-empty { margin: -12px 0 24px; color: var(--muted); }

@media (max-width: 600px) {
  .site-head { padding: 14px 16px 0; }
  .wordmark img { width: 48px; }
  .wordmark span { font-size: 1.3rem; }
  main { padding: 0 16px 56px; }
  /* phones: the footer links are a tidy list, one full-width row each, grouped under their headings */
  .foot-inner { padding: 36px 24px 28px; flex-direction: column-reverse; align-items: stretch; gap: 26px; }
  .foot-cols { flex-direction: column; gap: 26px; }
  .foot-col { align-items: stretch; gap: 0; }
  .foot-col h2 { margin: 0 0 8px; color: #8b959e; }
  .foot-col a { display: flex; align-items: center; justify-content: space-between; min-height: 48px;
    border-bottom: 1px solid rgba(255,255,255,.1); font-size: 1rem; }
  .foot-col a:first-of-type { border-top: 1px solid rgba(255,255,255,.1); }
  .foot-col a:hover, .foot-col a:focus-visible { text-decoration: none; }
  .foot-chev { display: block; opacity: .55; }
  .foot-top { justify-content: center; width: 100%; min-height: 48px; border-radius: 999px; background: rgba(255,255,255,.08); }
  .foot-bottom { width: calc(100% - 48px); padding: 16px 0 calc(env(safe-area-inset-bottom, 0px) + 28px); flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .foot-line { display: block; }
  .foot-made::before { content: none; }
  .foot-bottom .foot-line + .foot-line { margin-left: 0; }
  .foot-copy { flex-direction: column; }
  .foot-logo { height: 22px; margin: 0 0 10px; }
  .info-page { padding-top: 40px; }
  /* text lines up with the tip of the Home arrow (17px in from the pill), same gap on the right */
  .hero h1 { font-size: min(2.55rem, calc((100vw - 40px) / 7.9)); line-height: .95; margin-bottom: 12px; }   /* subheader sits 4px closer */
  /* smaller subheader that wraps on its own into two even, centered lines */
  .lede { font-size: min(.9375rem, calc((100vw - 32px) / 21)); line-height: calc(1.45em - 4px); max-width: none; text-wrap: balance; }
  .hero .search { margin-top: 27px; margin-bottom: 26px; }   /* the bar stays put while the subheader moves up */
  .hero .search-status { margin-top: -12px; }
  .hero .search-status, .hero .results { width: auto; }   /* results use the full width on phones */
  .hero .results { margin-top: -14px; }                    /* sit close under the bar (which keeps 26px below it for centering) */
  /* suggestions a touch smaller on phones */
  .r-link { padding: 11px 14px; }
  .r-name { font-size: 1rem; }
  .r-sub { display: none; }
  .r-street, .r-city { display: block; font-size: .875rem; line-height: 1.4; color: var(--muted); }
  /* the street stays on one line; if it's too long, the end fades out instead of wrapping */
  .r-street { white-space: nowrap; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  /* full width on phones */
  /* phones: the bar is 10% smaller than full width */
  .search { width: 90%; height: 50px; padding: 0 4px 0 14px; gap: 4px; }
  .search input { font-size: 1rem; }
  .go { height: 42px; padding: 0 15px; font-size: .9375rem; }
  .biz-card { padding: 22px; }
  .biz-top { padding-top: 76px; }
  .biz-top .back-pill, .share-pill { top: 12px; }
  .share-pop { top: 66px; }
  #scatter { width: 100vw; margin-left: calc(50% - 50vw); }   /* phones: the wall uses the whole screen width */
  .desk-head { padding-left: 16px; padding-right: 16px; }
  .back-pill { margin: 12px 0 12px; }
  .np-stage .np-tools { flex-wrap: nowrap; gap: 6px; }       /* one row, so the note never moves */
  .np-stage .np-tools button { padding: 0 12px; }
  .np-stage { padding-top: 12px; }
  /* phones: the note as big as the screen allows (12px from the edges), with the room around it tightened
     so the resting pencil still shows at the bottom */
  .np-stage .np-pad { width: min(calc(100vw - 24px), 460px, calc(100svh - 308px)); margin-top: 4px; }
  .np-stage { padding-bottom: 64px; }
  .np-stage .np-colors { margin-top: 14px; }
  .np-stage .np-sign { margin-top: 10px; }
  .np-stage .np-prompt:empty { display: none; }
  .recent { overflow-x: clip; }
  .recent-flip { display: block; }
  .recent-deal { display: none; }
  .recent > .sec-head { display: flex; margin-bottom: 0; }
  /* bigger notes on phones: two per row */
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
}

/* ---------- writing pad ---------- */
body.np-holding { cursor: none; }
.np-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  overflow-x: clip;       /* the peeled flap can't widen the page */
  padding: 22px 0 52px;   /* the page script stretches this so the desk sits at the bottom of the first screen */
  user-select: none; -webkit-user-select: none;
}
.np-top {
  /* fixed room for the buttons, so the sticky note never moves */
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; min-height: 40px;
}
.np-prompt {
  /* a gentle two-line message under the note, in a dotted outline */
  margin: 18px 0 0; max-width: 30em;
  padding: 8px 16px;
  border: 1.5px dotted rgba(76, 90, 103, .35); border-radius: 16px;
  font-size: .875rem; font-weight: 500; line-height: 1.45;
  white-space: pre-line; text-align: center; color: rgba(76, 90, 103, .9);
  opacity: 0; transform: translateY(4px);
  transition: opacity .45s ease, transform .45s ease;
}
.np-prompt:empty { visibility: hidden; }
/* the five color dots under the note */
.np-colors { display: flex; gap: 12px; margin-top: 20px; }
.np-dot {
  position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(160deg, var(--c) 55%, var(--e) 100%);
  box-shadow: inset 0 0 0 1px rgba(22,32,42,.12);
  transition: transform .15s ease;
}
.np-dot::before { content: ""; position: absolute; inset: -10px; }        /* bigger tap target */
.np-dot:hover { transform: scale(1.1); }
.np-dot[aria-checked="true"] { transform: scale(1.15); box-shadow: inset 0 0 0 1px rgba(22,32,42,.12), 0 0 0 2px var(--desk), 0 0 0 3.5px var(--ink); }
.np-dot-name {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%);
  white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: .8125rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 3;
}
.np-dot:hover .np-dot-name, .np-dot:focus-visible .np-dot-name { opacity: 1; }
@media (hover: none), (max-width: 600px) { .np-dot-name { display: none; } }
/* lined paper: a divider, then a pale circle with blue lines, left of the colors */
.np-colors { align-items: center; }
.np-dots { display: flex; gap: 12px; }
.np-colors-div { width: 1px; height: 22px; margin: 0 2px; background: rgba(22,32,42,.2); }
.np-lines {
  position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: #f4f7fa; transition: transform .15s ease;
}
.np-lines::before { content: ""; position: absolute; inset: -10px; }        /* bigger tap target */
.np-lines-ic { position: absolute; inset: 0; width: 24px; height: 24px; display: block; transition: opacity .12s ease; }
.np-lines:hover { transform: scale(1.1); }
.np-lines[aria-pressed="true"] { transform: scale(1.15); box-shadow: 0 0 0 2px var(--desk), 0 0 0 3.5px var(--ink); }
/* lines on: hovering shows a plain dot, what you'd go back to */
.np-lines[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 1.4px #6aa9e8, 0 0 0 2px var(--desk), 0 0 0 3.5px var(--ink); }
.np-lines[aria-pressed="true"]:hover .np-lines-ic { opacity: 0; }
.np-lines:hover .np-dot-name, .np-lines:focus-visible .np-dot-name { opacity: 1; }
@media (hover: none) { .np-lines[aria-pressed="true"]:hover .np-lines-ic { opacity: 1; } }   /* phones: a tap shouldn't leave it looking plain */
/* checkered paper button: a little checkerboard in the chosen note's two colors */
.np-checks {
  position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: conic-gradient(var(--note-check, #f086ad) 25%, var(--note, #ffc2da) 0 50%, var(--note-check, #f086ad) 0 75%, var(--note, #ffc2da) 0) 50% 50% / 12px 12px;
  box-shadow: inset 0 0 0 1px rgba(22,32,42,.12); transition: transform .15s ease;
}
.np-checks::before { content: ""; position: absolute; inset: -10px; }
.np-checks:hover { transform: scale(1.1); }
.np-checks[aria-pressed="true"] { transform: scale(1.15); box-shadow: inset 0 0 0 1px rgba(22,32,42,.12), 0 0 0 2px var(--desk), 0 0 0 3.5px var(--ink); }
.np-checks:hover .np-dot-name, .np-checks:focus-visible .np-dot-name { opacity: 1; }
.np-colors > .np-lines + .np-grad, .np-colors > .np-grad + .np-checks { margin-left: -2px; }

/* gradient paper button: the chosen color fading corner to corner */
.np-grad {
  position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, var(--note-check, #f2c62e), var(--note, #ffe873) 45%, #fff);
  box-shadow: inset 0 0 0 1px rgba(22,32,42,.12); transition: transform .15s ease;
}
.np-grad::before { content: ""; position: absolute; inset: -10px; }
.np-grad:hover { transform: scale(1.1); }
.np-grad[aria-pressed="true"] { transform: scale(1.15); box-shadow: inset 0 0 0 1px rgba(22,32,42,.12), 0 0 0 2px var(--desk), 0 0 0 3.5px var(--ink); }
.np-grad:hover .np-dot-name, .np-grad:focus-visible .np-dot-name { opacity: 1; }

/* a note on gradient paper: the color strongest in the top-left corner, fading to near-white at the bottom-right */
.np-stage.gradient .np-sheet,
.gradient .sn-paper, .gradient .deal-paper, .gradient .flip-paper, .viewer-paper.gradient {
  background: linear-gradient(135deg, var(--note-check) 0%, var(--note) 30%, #fbf8f8 82%, #f6f3f3 100%);
}

/* a note on checkered paper: big even squares, darker shade of the note's color, under the drawing.
   About 7.2 squares across, cut part-way into the first row and column, like the reference swatch. */
.np-stage.checkered .np-sheet::before,
.checkered .sn-paper::before, .checkered .deal-paper::before, .checkered .flip-paper::before, .viewer-paper.checkered::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(var(--note-check) 25%, transparent 0 50%, var(--note-check) 0 75%, transparent 0)
              -6.5% -11.9% / 27.8% 27.8%;
}

/* a note on lined paper: blue rules across it, under the drawing (the pad, the wall, the piles, the viewer) */
.np-stage.lined .np-sheet::before,
.lined .sn-paper::before, .lined .deal-paper::before, .lined .flip-paper::before, .viewer-paper.lined::before {
  /* covers the whole note (a box edge part-way down shows as a faint seam once the note is tilted);
     8 rules, one every 10% from 24% down, and the mask keeps them off the top strip */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent calc(100% - 1.5px), rgba(106,169,232,.75) calc(100% - 1.5px)) 0 14% / 100% 10% repeat-y;
  -webkit-mask-image: linear-gradient(to bottom, transparent 16%, #000 16%, #000 96%, transparent 96%);
          mask-image: linear-gradient(to bottom, transparent 16%, #000 16%, #000 96%, transparent 96%);
}
.np-stage.zoomed .np-colors { visibility: hidden; }  /* the zoomed note covers them */
/* "Add your name": a small white tag button under the colors; opens a short field with a check */
.np-sign { display: flex; justify-content: center; margin-top: 16px; min-height: 36px; }
/* computers: the tag becomes the field in the same spot, with "Sign your note (optional)" under it */
.np-sign { flex-direction: column; align-items: center; gap: 8px; }
.np-sign-cap { display: none; margin: 0; font: 500 .8125rem var(--sans); color: var(--muted); }
.np-sign-cap b { font-family: var(--display); font-weight: 800; font-size: .875rem; color: var(--ink); }
.np-sign.editing .np-sign-cap { display: block; }
.np-sign.editing .np-sign-edit { width: 300px; max-width: calc(100vw - 32px); min-height: 40px; box-shadow: inset 0 0 0 1.5px var(--ink), 0 10px 22px -14px rgba(22,32,42,.45); }
.np-sign.editing .np-sign-edit input { flex: 1; width: auto; }
.np-sign-btn, .np-sign-edit { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; border-radius: 999px; background: var(--card); color: var(--ink); }
.np-sign-btn { max-width: 240px; padding: 0 14px; border: 0; font: 600 .875rem var(--sans); cursor: pointer; transition: background .15s ease; }
.np-sign-btn:hover { background: var(--chip); }
.np-sign-btn svg, .np-sign-edit > svg { flex-shrink: 0; }
.np-sign-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-sign-btn.signed .np-sign-text { font-weight: 700; }
.np-sign-edit { margin: 0; padding: 0 5px 0 14px; gap: 6px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.np-sign-edit[hidden], .np-sign-btn[hidden] { display: none; }
.np-sign-edit input { width: 160px; min-width: 0; padding: 6px 0; border: 0; outline: none; background: transparent; font: 600 .9375rem var(--sans); color: var(--ink); }
.np-sign-edit input::placeholder { color: #8b959e; font-weight: 500; }
.np-sign-ok { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer; }
.np-stage.zoomed .np-sign { visibility: hidden; }
/* touch screens: the name field floats above the keyboard over a light dim */
.np-sign-sheet { position: fixed; left: 0; right: 0; top: 0; height: 100%; z-index: 300; background: rgba(22,32,42,.4);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 24px 20px; animation: np-sign-in .18s ease; }
@keyframes np-sign-in { from { opacity: 0; } }
.np-sign-title span { font-family: var(--sans); font-weight: 500; font-size: .9375rem; letter-spacing: 0; opacity: .85; }
.np-sign-float { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.np-sign-title { margin: 0; color: #fff; font: 800 1.125rem var(--display); letter-spacing: -.02em; text-shadow: 0 1px 8px rgba(22,32,42,.35); }
.np-sign-sheet .np-sign-edit { width: 75%; min-width: min(268px, 100%); max-width: 315px; min-height: 46px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.55); }
.np-sign-sheet .np-sign-edit input { flex: 1; width: auto; font-size: 1rem; }   /* 16px keeps iPhones from zooming in */
.np-sign-sheet .np-sign-ok { width: 32px; height: 32px; }
/* the name in the close-up view */
.viewer-signed { color: #fff; font-size: .9375rem; font-weight: 600; opacity: .8; max-width: min(18em, 80vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-signed:empty { display: none; }
.np-prompt.show { opacity: 1; transform: none; }
.np-stage.zoomed .np-prompt { opacity: 0; }
/* ---------- full-screen drawing (desktop zoom) ---------- */
.np-full-bg {
  position: fixed; inset: 0; z-index: 40; background: var(--desk);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.np-stage.zoomed .np-full-bg { opacity: 1; visibility: visible; }
.np-stage.zoomed .np-pad { z-index: 41; }
.np-stage.zoomed .np-corner { display: none; }          /* pure drawing: no peeling in full screen */
.np-stage.zoomed .np-zoom { visibility: hidden; }
.np-full-bar {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px; z-index: 42;
  display: flex; gap: 8px;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.np-stage.zoomed .np-full-bar { opacity: 1; visibility: visible; }
.np-full-bar button {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: .9375rem; font-weight: 600;
  min-height: 44px; padding: 0 16px;
  color: var(--ink); background: var(--card);
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(22,32,42,.1), 0 8px 16px -8px rgba(22,32,42,.35);
}
.np-full-bar button:hover { background: var(--chip); }
.np-full-bar button:disabled { opacity: .4; cursor: default; }
.np-full-bar .np-primary { background: var(--ink); color: #fff; }
.np-full-bar .np-primary:hover { background: #000; }          /* zoomed in, the note sits perfectly straight for precise drawing */        /* the zoomed note covers where it sits */
.np-tools {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  min-height: 38px;
  visibility: hidden; opacity: 0;
  transition: opacity .25s ease, visibility .25s;
  cursor: auto;
}
.np-stage.holding .np-tools, .np-stage.has-ink .np-tools { visibility: visible; opacity: 1; }
.np-tools button {
  font: inherit; font-size: .9375rem; font-weight: 600;
  min-height: 40px; padding: 0 16px;
  color: var(--ink); background: var(--card);
  border: 0; border-radius: 999px;
  cursor: pointer;
}
.np-tools button:hover { background: var(--chip); }
.np-tools button:disabled { opacity: .4; cursor: default; }
.np-tools .np-primary { background: var(--blue); color: #fff; }
.np-tools .np-primary:hover { background: var(--blue-dark); }
.np-tools [data-act="drop"] { display: none; }
.np-stage.holding .np-tools [data-act="drop"] { display: inline-block; }

.np-pad {
  position: relative;
  width: min(calc(100vw - 40px), 430px, calc(100svh - 300px));   /* 30% bigger than the old 330px, if the screen allows */
  min-width: 260px;
  aspect-ratio: 1;
  margin-top: 14px;
  /* the note you write on sits straight; full-screen zoom moves it to the middle of the window and scales it up */
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--z, 1));
  transition: transform .4s cubic-bezier(.3, 1.1, .4, 1);
  z-index: 1;
}
/* the magnifier sits just outside the note's top-right corner and follows it as it grows */
.np-zoom {
  position: absolute; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 14px; background: var(--card); color: var(--ink); cursor: pointer;
  box-shadow: 0 1px 2px rgba(22,32,42,.1), 0 8px 16px -8px rgba(22,32,42,.35);
  transition: background .15s ease;
}
.np-zoom:hover { background: var(--chip); }
.np-zoom-out { display: none; }
.np-stage.zoomed .np-zoom-in { display: none; }
.np-stage.zoomed .np-zoom-out { display: block; }
.np-zoom-tip {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: .8125rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.np-zoom:hover .np-zoom-tip, .np-zoom:focus-visible .np-zoom-tip { opacity: 1; }
@media (max-width: 600px) { .np-zoom { display: none; } }
.np-sheet {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.045) 0, rgba(0,0,0,0) 14%),
    linear-gradient(160deg, var(--note) 60%, var(--note-edge) 100%);
}
.np-under { box-shadow: 0 1px 1px rgba(60, 50, 0, .12), 0 10px 18px -8px rgba(60, 50, 0, .35); }
.np-note::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 38%; height: 18%;
  background: linear-gradient(to top left, rgba(0,0,0,.05), rgba(0,0,0,0) 60%);
  pointer-events: none;
}
.np-note canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pinch-zoom; }   /* one finger draws; two fingers zoom the page */
.np-flap {
  position: absolute; left: -100%; top: -100%;
  width: 300%; height: 300%;
  overflow: visible; pointer-events: none;
  filter: drop-shadow(1px 5px 5px rgba(60, 50, 0, .28));
}
.np-corner { position: absolute; bottom: -8px; width: 56px; height: 56px; cursor: grab; touch-action: none; z-index: 2; }
.np-corner.right { right: -8px; }
.np-corner.left { left: -8px; }
.np-corner.grabbing { cursor: grabbing; }

.np-pencil {
  position: absolute; left: 0; top: 0;
  width: 312px; height: 34px;
  z-index: 30;
  visibility: hidden;
  cursor: grab; touch-action: none;
  will-change: transform;
}
.np-pencil img {
  display: block; width: 100%; height: 100%;
  pointer-events: none; -webkit-user-drag: none; user-select: none;
  filter: drop-shadow(0 2px 1.5px rgba(0,0,0,.25));
  transition: filter .25s ease;
}
/* clips the pencil so it never makes the page scroll sideways */
.np-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 30; }
.np-pencil { pointer-events: auto; }
body.np-holding .np-pencil { pointer-events: none; }
body.np-holding .np-pencil img { filter: drop-shadow(10px 14px 6px rgba(0,0,0,.18)); }
.np-shadow {
  position: absolute; left: 0; top: 0; height: 10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.22), rgba(0,0,0,0));
  pointer-events: none; opacity: 0; z-index: 29;
}

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  transform: translate(-50%, 12px);
  max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: #fff;
  font-size: .9375rem;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (max-width: 370px) {
  /* the narrowest phones: slightly tighter buttons so all four stay on one row */
  .np-stage .np-tools { gap: 4px; }
  .np-stage .np-tools button { padding: 0 9px; font-size: .875rem; }
}