/* ============================================================================
   Vicini. vicini.app

   This file used to be HoopMe's stylesheet, unedited, which is why the site
   rendered HoopMe's #fe5c01 in every button and link while the page's inline
   styles used Vicini's amber. Both values below now come from the app's own
   asset catalog: AccentColor (dark) #ffb340, LaunchBackground #0a0814.

   Type:  Bricolage Grotesque for display, Figtree for text. Warm and slightly
          irregular, because the product is a street of neighbors, not a feed.
   Idea:  dusk. One warm light in a blue-dark evening. Amber only ever appears
          where something is lit.
   ========================================================================= */

:root {
  /* Dusk. Every neutral carries the same indigo cast as the app's launch screen. */
  --ink:     #0a0814;
  --ink-2:   #0e0b1a;
  --surface: #141024;
  --surface-2: #1a1530;
  --line:        rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* The porch light. AccentColor from Assets.xcassets. */
  --amber:      #ffb340;
  --amber-deep: #e58e1a;
  --amber-dim:  rgba(255, 179, 64, 0.13);

  --text:    #f6f4fb;
  --muted:   #a7a2bd;
  --muted-2: #7d789a;

  --radius: 20px;
  --r-sm: 11px;
  --maxw: 1160px;
  --nav-h: 66px;

  /* Shadows carry the indigo of the ground, and the glow carries the amber. */
  --shadow: 0 26px 64px -26px rgba(4, 2, 12, 0.95);
  --glow:   0 0 70px -8px rgba(255, 179, 64, 0.32);

  --display: 'Bricolage Grotesque', ui-sans-serif, -apple-system, sans-serif;
  --sans:    'Figtree', ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}
/* The nav is sticky, so anchor targets must clear it. */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

body {
  font-family: var(--sans);
  font-weight: 420;
  background: var(--ink);
  color: var(--text);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 179, 64, 0.18);
  overflow-x: hidden;
}

/* Light spilling from the top of the page, as if from a window above. */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 620px; z-index: 0;
  background: radial-gradient(58% 100% at 50% -14%, rgba(255, 179, 64, 0.10), transparent 68%);
  pointer-events: none;
}

a { color: var(--amber); text-decoration: none; }
a:hover { color: #ffc76d; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 5px;
  text-decoration: none;
}

.skip {
  position: absolute; left: 14px; top: -80px; z-index: 100;
  padding: 10px 18px; border-radius: var(--r-sm);
  background: var(--amber); color: #1c1000; font-weight: 700; font-size: 0.92rem;
  transition: top .18s ease;
}
.skip:focus { top: 14px; color: #1c1000; }

.container {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto;
  /* Respects notch insets in landscape on iPhone. */
  padding: 0 max(26px, env(safe-area-inset-left)) 0 max(26px, env(safe-area-inset-right));
}
.narrow { max-width: 760px; }

h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

.display {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'opsz' 60, 'wdth' 100;
  letter-spacing: -0.028em;
  line-height: 1.04;
}

.label {
  font-family: var(--display);
  font-size: 0.73rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
}

/* ------------------------------------------------------------------ Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 8, 20, 0.78);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav .container { display: flex; align-items: center; gap: 22px; height: var(--nav-h); }
.brand {
  display: inline-flex; align-items: center; gap: 11px; margin-right: auto;
  font-family: var(--display); font-weight: 700;
  font-variation-settings: 'opsz' 20;
  font-size: 1.18rem; letter-spacing: -0.02em; color: var(--text);
}
.brand:hover { color: var(--text); }
.brand img { width: 31px; height: 31px; border-radius: 9px; }

.nav-links { display: flex; align-items: center; gap: 16px; }
.nav-links a {
  color: var(--muted); font-size: 0.93rem; font-weight: 550;
  padding: 10px 8px; position: relative; transition: color .18s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 5px;
  height: 2px; border-radius: 2px; background: var(--amber);
}
@media (max-width: 720px) { .nav-links a.hide-sm { display: none; } }

/* -------------------------------------------------------------- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 13px;
  font-family: var(--sans); font-weight: 650; font-size: 0.98rem; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { color: var(--text); background: var(--surface); border-color: rgba(255,255,255,.22); }
.btn-nav { padding: 9px 16px; font-size: 0.88rem; border-radius: 10px; }

/* ---------------------------------------------------------------- Shots ---- */
/* These are the App Store masters cut down to the phone itself, corners rounded
   into the alpha channel (see scripts/webshots.py). They used to be the whole
   1320x2868 marketing asset: caption band, dusk gradient, glow and all, pasted
   down as a rectangle with a 1px amber border drawn around it. That border was
   there to hide the seam, because the master's purple does not match the page's
   own --ink. Cropping to the device removes the seam and the border with it.

   Nothing is drawn around a shot now. The shadow is a drop-shadow rather than a
   box-shadow so it traces the rounded corners in the alpha instead of squaring
   them off, and the page background shows through where the corners were. */
.shot {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 26px 54px rgba(4, 2, 12, 0.9));
}
/* A lit screen throws light on what is behind it. */
.shot-lit { position: relative; }
.shot-lit::before {
  content: ""; position: absolute; inset: 6% 2%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 179, 64, 0.28), transparent 66%);
  filter: blur(46px); z-index: -1;
}

/* ----------------------------------------------------------------- Hero ---- */
.hero { padding: 72px 0 40px; }
.hero .container {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 72px; align-items: center;
}
@media (max-width: 940px) {
  .hero { padding: 46px 0 24px; }
  .hero .container { grid-template-columns: 1fr; gap: 46px; }
  .hero-art { max-width: 300px; margin: 0 auto; }
}
.hero-art { position: relative; width: 100%; max-width: 306px; margin-left: auto; }

.hero-mark { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.hero-mark img { width: 46px; height: 46px; border-radius: 13px; }
.hero-mark .label { color: var(--muted-2); }

.hero h1 { font-size: clamp(2.7rem, 5.8vw, 4.5rem); }
.hero h1 .lit { color: var(--amber); text-shadow: 0 0 34px rgba(255, 179, 64, 0.45); }
.say { color: var(--muted-2); font-size: 0.95rem; margin: 18px 0 0; font-style: italic; }
.hero .sub { color: var(--muted); font-size: clamp(1.06rem, 1.5vw, 1.22rem); max-width: 46ch; margin: 14px 0 32px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-note { color: var(--muted-2); font-size: 0.87rem; margin-top: 18px; }

/* ------------------------------------------------------------- Sections ---- */
.section { padding: 92px 0; }
.section + .section { padding-top: 0; }

.marker { display: flex; align-items: center; gap: 12px; color: var(--muted-2); margin-bottom: 20px; }
.marker::before { content: ""; width: 24px; height: 1px; background: var(--amber); flex: none; }

.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(1.95rem, 3.6vw, 2.9rem); }
.lede { color: var(--muted); margin-top: 16px; font-size: 1.06rem; max-width: 60ch; }

/* ---------------------------------------------------------- Porch light ----
   The signature feature gets a section of its own rather than a sixth of a
   card grid. */
.porch {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 64px; align-items: center;
  border-radius: 28px; border: 1px solid rgba(255, 179, 64, 0.24);
  background: linear-gradient(168deg, rgba(255, 179, 64, 0.075), var(--ink-2) 62%);
  padding: clamp(32px, 4.4vw, 58px);
}
@media (max-width: 900px) {
  .porch { grid-template-columns: 1fr; gap: 36px; }
  .porch .porch-art { max-width: 280px; margin: 0 auto; }
}
.porch::before {
  content: ""; position: absolute; top: -32%; left: 4%; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255, 179, 64, 0.17), transparent 66%);
  pointer-events: none;
}
.porch > * { position: relative; }
.porch .porch-art { width: 100%; max-width: 292px; margin-left: auto; }
.porch h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.porch p { color: var(--muted); margin-top: 18px; max-width: 46ch; }
.porch .lamp {
  width: 13px; height: 13px; border-radius: 50%; background: var(--amber);
  display: inline-block; margin-right: 10px; vertical-align: 1px;
  box-shadow: 0 0 0 0 rgba(255, 179, 64, .5);
  animation: glow 3.2s cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes glow {
  0%   { box-shadow: 0 0 14px 2px rgba(255, 179, 64, .55); }
  50%  { box-shadow: 0 0 26px 7px rgba(255, 179, 64, .28); }
  100% { box-shadow: 0 0 14px 2px rgba(255, 179, 64, .55); }
}

/* ---------------------------------------------------- Alternating rows ---- */
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px; align-items: center; padding: 56px 0;
}
.row + .row { border-top: 1px solid var(--line); }
/* Every other row puts the screenshot on the left, so the eye zig-zags down
   the page instead of running a straight column. */
.row:nth-child(even) .row-art { order: -1; }
@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; gap: 34px; padding: 42px 0; }
  .row:nth-child(even) .row-art { order: 0; }
  .row-art { max-width: 270px; margin: 0 auto; }
}
.row .row-art { width: 100%; max-width: 292px; margin: 0 auto; }
.row h3 { font-family: var(--display); font-variation-settings: 'opsz' 32; font-weight: 700; font-size: 1.62rem; letter-spacing: -0.022em; margin-bottom: 10px; }
.row p { color: var(--muted); font-size: 1.02rem; max-width: 46ch; }
.row p + p { margin-top: .9em; }

/* Translation has nothing of ours to photograph: it happens inside the system's
   own sheet. Rather than pad it out with a screenshot of someone else's UI, or
   leave half a two-column row empty, it runs full width. */
.row-wide { grid-template-columns: minmax(0, 1fr); }
.row-wide p { max-width: 64ch; }

/* -------------------------------------------------------------- Privacy ---- */
.trust {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 780px) { .trust { grid-template-columns: 1fr; } }
.trust > div { background: var(--ink-2); padding: 30px 28px; }
.trust h3 { font-size: 1.04rem; font-weight: 700; margin-bottom: 7px; letter-spacing: -0.012em; }
.trust p { color: var(--muted); font-size: 0.94rem; }

/* --------------------------------------------------------------- Plus ---- */
.plus {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 56px; align-items: start;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--ink-2); padding: clamp(30px, 4vw, 50px);
}
@media (max-width: 860px) { .plus { grid-template-columns: 1fr; gap: 34px; } }
.plus h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.plus .price {
  font-family: var(--display); font-variation-settings: 'opsz' 40;
  font-size: 2.4rem; font-weight: 700; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums lining-nums; margin-top: 20px;
}
.plus .price small { font-family: var(--sans); font-size: 0.98rem; font-weight: 450; color: var(--muted); letter-spacing: 0; margin-left: 8px; }
.plus .trial { color: var(--muted-2); font-size: 0.9rem; margin-top: 6px; }
.plus .plus-why { margin-top: 22px; }
.plus ul { list-style: none; display: grid; gap: 18px; }
.plus li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; }
.plus li svg { width: 20px; height: 20px; stroke: var(--amber); fill: none; stroke-width: 1.9; margin-top: 3px; }
.plus li strong { display: block; font-weight: 650; font-size: 1rem; margin-bottom: 3px; letter-spacing: -0.01em; }
.plus li p { color: var(--muted); font-size: 0.94rem; }

/* ------------------------------------------------------------ CTA band ---- */
.cta {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: clamp(36px, 5vw, 64px);
  background: linear-gradient(168deg, var(--surface), var(--ink-2));
  border: 1px solid var(--line-strong);
}
.cta::before {
  content: ""; position: absolute; top: -48%; right: -6%; width: 470px; height: 470px;
  background: radial-gradient(circle, rgba(255, 179, 64, 0.15), transparent 66%);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); max-width: 17ch; }
.cta p { color: var(--muted); margin: 18px 0 30px; max-width: 52ch; }

/* -------------------------------------------------------------- Footer ---- */
.footer { border-top: 1px solid var(--line); padding: 48px 0 66px; margin-top: 44px; }
.footer .container { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.footer .brand { font-size: 1rem; margin-right: 0; }
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); font-size: 0.92rem; padding: 10px 8px; }
.footer-links a:hover { color: var(--text); }
.footer .copy { color: var(--muted-2); font-size: 0.83rem; width: 100%; max-width: 70ch; line-height: 1.7; }

/* --------------------------------------------------- Legal / doc pages ---- */
.doc { padding: 64px 0 88px; }
.doc h1 { font-family: var(--display); font-variation-settings: 'opsz' 72; font-weight: 700; font-size: clamp(2rem, 4vw, 2.7rem); letter-spacing: -0.03em; line-height: 1.06; }
.doc .meta { font-family: var(--display); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin: 14px 0 34px; }
.doc h2 { font-size: 1.26rem; font-weight: 700; letter-spacing: -0.016em; margin-top: 2.3em; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.doc h3 { font-size: 1.04rem; font-weight: 650; margin-top: 1.6em; color: var(--text); }
.doc p, .doc li { color: #cdc9dd; max-width: 72ch; }
/* The display face ligates "(c)" into a copyright glyph, which turns
   "Article 6(1)(c)" into "Article 6(1)©". Statute citations have to survive
   verbatim, so legal pages opt out of ligatures. */
.doc { font-variant-ligatures: none; }
.doc p { margin-top: .8em; }
.doc ul, .doc ol { padding-left: 1.35em; margin: 10px 0; }
.doc li { margin: 6px 0; }
.doc strong { color: var(--text); font-weight: 650; }
.doc a { text-decoration: underline; text-underline-offset: 3px; }

.callout { background: var(--amber-dim); border-left: 2px solid var(--amber); padding: 16px 20px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 1.5em 0; }
.callout p { margin-top: 0; }
.ph { background: var(--amber-dim); color: var(--amber); border-radius: 5px; padding: 2px 7px; font-size: 0.9em; }

.doc .mailto { font-size: 1.18rem; font-weight: 650; margin-top: .5em; }

.faq { border-top: 1px solid var(--line); padding: 26px 0; }
.faq:last-of-type { border-bottom: 1px solid var(--line); }
.faq h3 { margin: 0 0 8px; font-size: 1.07rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.faq p { margin: 0; color: var(--muted); }

/* ---- Reduced motion. The glow and the hover lifts are decoration, so remove
   them outright rather than shortening them. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .porch .lamp { animation: none; box-shadow: 0 0 14px 2px rgba(255, 179, 64, .55); }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* Stacked CTAs should agree on width rather than sizing to their labels. */
@media (max-width: 460px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
}

/* ---- App Store badge ----
   Apple's own artwork, white variant, which is the one they publish for dark
   backgrounds. Their guidelines say to use the supplied file rather than redraw
   it, and never to recolor it, so the link carries the motion and the image is
   left alone. Height stays above their 40px web minimum. */
.badge {
  display: inline-block; line-height: 0; border-radius: 9px;
  transition: transform .16s cubic-bezier(.2,.8,.3,1);
}
.badge:hover { transform: translateY(-2px); }
.badge:active { transform: translateY(0) scale(.985); }
.badge img { display: block; height: 55px; width: auto; }   /* matches the ghost button beside it */

/* "Android coming soon" sits under the platform line rather than competing with
   the download itself. */
.soon {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  color: var(--muted-2); font-size: 0.84rem; font-weight: 600;
}
.soon::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .6; flex: none;
}

/* The badge is a fixed-size image, so it should not stretch with the buttons
   when the CTA row goes vertical. */
@media (max-width: 460px) {
  .hero-cta .badge { align-self: flex-start; }
  .badge img { height: 48px; }
}