/* Photo Expert — photoexpert.app
   Palette taken from the iOS app: near-black night sky, orange CTA, blue/green accents. */

:root {
  --bg: #05070c;
  --bg-2: #080b12;
  --surface: #0e131c;
  --surface-2: #141a25;
  --border: #1e2634;
  --border-hi: #2c3646;

  --text: #f2f5f9;
  --text-dim: #9aa5b4;
  --text-faint: #6c7889;

  --orange: #f97316;
  --orange-hi: #ff9147;
  --blue: #60a5fa;
  --green: #22c55e;
  --violet: #8b5cf6;

  --radius: 14px;
  --radius-lg: 20px;
  --maxw: 1140px;
  --header-h: 64px;

  --font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto is load-bearing: the width/height attributes would otherwise force
   the intrinsic height once max-width scales the element down, squashing the image. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }

:focus-visible {
  outline: 2px solid var(--orange-hi);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--orange); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Starfield ---------- */
#stars {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: .55;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(5, 7, 12, .72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  height: 100%; display: flex; align-items: center; gap: 20px;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); font-weight: 700; letter-spacing: -.02em; font-size: 1.05rem;
  text-decoration: none; flex: 0 0 auto;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; flex: 0 0 auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  color: var(--text-dim); font-size: .93rem; font-weight: 500;
  padding: 8px 12px; border-radius: 9px; text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

/* The generic .nav a rules above out-specify .btn — restate the button's own paint. */
.nav a.btn-primary,
.nav a.btn-primary:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-hi) 100%);
  padding: 11px 20px;
}

.nav-toggle {
  display: none; margin-left: auto;
  background: var(--surface-2); border: 1px solid var(--border-hi);
  color: var(--text); width: 40px; height: 40px; border-radius: 10px;
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg-2); border-bottom: 1px solid var(--border);
    padding: 12px 20px 20px; margin: 0;
    transform: translateY(-130%); transition: transform .28s ease;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { padding: 12px 10px; font-size: 1rem; }
  .nav .btn { margin-top: 8px; text-align: center; justify-content: center; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; line-height: 1;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-hi) 100%);
  color: #fff; box-shadow: 0 6px 24px -8px rgba(249, 115, 22, .8);
}
.btn-primary:hover { box-shadow: 0 10px 32px -8px rgba(249, 115, 22, .95); }
.btn-ghost {
  background: var(--surface-2); color: var(--text); border-color: var(--border-hi);
}
.btn-ghost:hover { background: #1b2231; }
.btn svg { width: 17px; height: 17px; }

/* ---------- Hero ---------- */
main { position: relative; z-index: 1; }

.hero { position: relative; padding: 84px 0 72px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  top: -280px; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 700px; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(249, 115, 22, .17), transparent 62%);
  filter: blur(20px);
}
.hero::after {
  content: ""; position: absolute; z-index: -1;
  bottom: -300px; right: -150px; width: 700px; height: 700px; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, .14), transparent 65%);
  filter: blur(20px);
}

.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
}
@media (max-width: 940px) {
  .hero { padding: 56px 0 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-copy { text-align: center; }
  .hero-cta, .hero-meta { justify-content: center; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  background: rgba(249, 115, 22, .1);
  border: 1px solid rgba(249, 115, 22, .28);
  color: var(--orange-hi); font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 22px;
}
.eyebrow svg { width: 15px; height: 15px; }

.hero h1 { margin-bottom: 18px; }
.hero h1 .grad {
  background: linear-gradient(100deg, var(--orange) 10%, #fbbf24 55%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lede { font-size: 1.12rem; color: var(--text-dim); max-width: 56ch; margin-bottom: 30px; }
.hero-copy .lede { margin-inline: 0; }
@media (max-width: 940px) { .hero-copy .lede { margin-inline: auto; } }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  color: var(--text-faint); font-size: .87rem;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta svg { width: 15px; height: 15px; color: var(--green); }

/* The screenshots are already device mockups — no CSS bezel, or we'd draw a second one. */
.phone { margin: 0 auto; width: min(310px, 80vw); }
.phone img {
  width: 100%;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .85));
}

/* ---------- Sections ---------- */
.section { padding: 84px 0; position: relative; }
.section--alt { background: linear-gradient(180deg, transparent, var(--bg-2) 12%, var(--bg-2) 88%, transparent); }
.section-head { max-width: 660px; margin: 0 auto 52px; text-align: center; }
.section-head p { color: var(--text-dim); margin-bottom: 0; }
.kicker {
  display: block; color: var(--orange); font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px;
}

/* ---------- Feature cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 940px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--border-hi); background: var(--surface-2); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-dim); font-size: .93rem; margin-bottom: 0; }

.card-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: rgba(249, 115, 22, .12); color: var(--orange-hi);
  border: 1px solid rgba(249, 115, 22, .22);
}
.card-icon svg { width: 22px; height: 22px; }
.card-icon.is-blue { background: rgba(96, 165, 250, .12); border-color: rgba(96, 165, 250, .22); color: var(--blue); }
.card-icon.is-green { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .22); color: var(--green); }
.card-icon.is-violet { background: rgba(139, 92, 246, .12); border-color: rgba(139, 92, 246, .22); color: var(--violet); }

/* ---------- Screenshot viewer ----------
   The mockups have different canvas widths (738–900px) but all are 1600px tall,
   so pinning the stage height and letting width follow makes every phone render
   at the same size. Never constrain both axes: that is what squashed them. */
.viewer { display: grid; justify-items: center; gap: 30px; }

.viewer-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.viewer-stage::before {
  content: ""; position: absolute; z-index: -1;
  width: 70%; height: 70%; border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, .13), transparent 68%);
  filter: blur(30px);
}
/* Height is set on the image itself, not as a percentage of the stage: an auto-sized
   grid/flex track resolves a percentage against its own content, so the 1600px mockup
   would size the track that then sizes the image. object-fit guards the aspect ratio
   if max-width ever clamps the box on a narrow screen. */
.viewer-stage img {
  height: clamp(400px, 58vh, 640px);
  width: auto; max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 55px rgba(0, 0, 0, .85));
  transition: opacity .25s ease;
}
.viewer-stage img.is-swapping { opacity: 0; }

.viewer-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 720px;
}
.viewer-tabs button {
  font: inherit; font-size: .87rem; font-weight: 500;
  color: var(--text-dim); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.viewer-tabs button:hover { color: var(--text); background: var(--surface-2); }
.viewer-tabs button[aria-selected="true"] {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-hi) 100%);
  box-shadow: 0 6px 20px -8px rgba(249, 115, 22, .9);
}

.viewer-caption {
  margin: 0; min-height: 1.6em; text-align: center;
  color: var(--text-faint); font-size: .9rem; max-width: 52ch;
}

@media (max-width: 620px) {
  .viewer-stage img { height: clamp(360px, 52vh, 480px); }
  .viewer-tabs button { padding: 8px 14px; font-size: .82rem; }
}

/* ---------- Sign-in / OAuth panel ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
}
@media (max-width: 620px) { .panel { padding: 26px 20px; } }

.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
@media (max-width: 860px) { .panel-grid { grid-template-columns: 1fr; gap: 30px; } }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative; padding-left: 32px; margin-bottom: 16px;
  color: var(--text-dim); font-size: .95rem;
}
.checklist li strong { color: var(--text); font-weight: 600; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(34, 197, 94, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.scopes { display: grid; gap: 12px; }
.scope {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.scope code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .82rem; color: var(--orange-hi);
  background: rgba(249, 115, 22, .08);
  border: 1px solid rgba(249, 115, 22, .2);
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.scope p { margin: 6px 0 0; font-size: .88rem; color: var(--text-dim); }
.scope-body { min-width: 0; }
.scope-body strong { font-size: .95rem; }

.note {
  margin-top: 28px; padding: 18px 20px;
  background: rgba(96, 165, 250, .07);
  border: 1px solid rgba(96, 165, 250, .22);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-dim); font-size: .9rem;
}
.note :last-child { margin-bottom: 0; }
.note strong { color: var(--text); }

/* ---------- Link list ---------- */
.links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 760px) { .links { grid-template-columns: 1fr; } }

.link-row {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
  color: var(--text); text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.link-row:hover {
  text-decoration: none; border-color: var(--border-hi);
  background: var(--surface-2); transform: translateX(3px);
}
.link-row .ic {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border-hi); color: var(--orange-hi);
}
.link-row:hover .ic { background: #1b2231; }
.link-row .ic svg { width: 18px; height: 18px; }
.link-row .meta { min-width: 0; flex: 1; }
.link-row .meta strong { display: block; font-size: .96rem; font-weight: 600; }
.link-row .meta span {
  display: block; color: var(--text-faint); font-size: .82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-row .arrow { color: var(--text-faint); flex: 0 0 auto; }
.link-row .arrow svg { width: 16px; height: 16px; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: 60px 40px; text-align: center;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(249, 115, 22, .22), transparent 60%),
    var(--surface);
  border: 1px solid var(--border-hi);
}
.cta-band h2 { margin-bottom: 12px; }
.cta-band p { color: var(--text-dim); max-width: 52ch; margin: 0 auto 28px; }
@media (max-width: 620px) { .cta-band { padding: 40px 22px; } }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  padding: 56px 0 32px; margin-top: 40px;
  position: relative; z-index: 1;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 44px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-about p {
  color: var(--text-faint); font-size: .88rem; max-width: 34ch; margin: 14px 0 0;
}
.footer-col h4 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-faint); margin-bottom: 16px; font-weight: 700;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--text-dim); font-size: .9rem; }
.footer-col a:hover { color: var(--text); text-decoration: none; }

.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between;
  color: var(--text-faint); font-size: .84rem;
}
.footer-bottom address { font-style: normal; line-height: 1.6; }

/* ---------- Legal pages ---------- */
.legal-hero {
  padding: 64px 0 40px; border-bottom: 1px solid var(--border);
  background: radial-gradient(90% 140% at 50% -30%, rgba(249, 115, 22, .1), transparent 62%);
}
.legal-hero p { color: var(--text-dim); margin-bottom: 0; }
.legal-hero .updated {
  display: inline-block; margin-top: 14px; padding: 5px 14px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border-hi);
  color: var(--text-faint); font-size: .8rem;
}

.legal-layout {
  display: grid; grid-template-columns: 250px 1fr; gap: 56px;
  padding: 56px 0 80px; align-items: start;
}
@media (max-width: 940px) {
  .legal-layout { grid-template-columns: 1fr; gap: 0; padding-top: 36px; }
  .toc { display: none; }
}

.toc { position: sticky; top: calc(var(--header-h) + 28px); }
.toc h4 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-faint); margin-bottom: 14px;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: 2px; }
.toc a {
  display: block; padding: 7px 12px; border-radius: 8px;
  color: var(--text-dim); font-size: .87rem; line-height: 1.4;
  border-left: 2px solid transparent;
}
.toc a::before { content: counter(toc) ". "; color: var(--text-faint); }
.toc a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.toc a.is-active {
  color: var(--orange-hi); background: rgba(249, 115, 22, .07);
  border-left-color: var(--orange); text-decoration: none;
}

.legal-body { max-width: 76ch; font-size: .97rem; }
.legal-body section { padding-top: 8px; margin-bottom: 44px; }
.legal-body h2 {
  font-size: 1.4rem; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.legal-body h3 { font-size: 1.03rem; margin: 26px 0 8px; color: var(--text); }
.legal-body p, .legal-body li { color: var(--text-dim); }
.legal-body strong { color: var(--text); font-weight: 600; }
.legal-body ul { padding-left: 22px; margin: 0 0 1rem; }
.legal-body li { margin-bottom: 8px; }
.legal-body code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .85em; color: var(--orange-hi);
  background: rgba(249, 115, 22, .08); border: 1px solid rgba(249, 115, 22, .18);
  padding: 2px 6px; border-radius: 5px;
}
.legal-body a { text-decoration: underline; text-underline-offset: 2px; }

.table-wrap { overflow-x: auto; margin: 0 0 1rem; border-radius: var(--radius); border: 1px solid var(--border); }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .89rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); }
th { background: var(--surface-2); color: var(--text); font-weight: 600; white-space: nowrap; }
td { color: var(--text-dim); vertical-align: top; }
tr:last-child td { border-bottom: none; }

.callout {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--orange); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 22px; margin: 0 0 1.2rem;
}
.callout :last-child { margin-bottom: 0; }
.callout h3 { margin-top: 0; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 1.2rem; }
.steps li {
  counter-increment: step; position: relative;
  padding: 0 0 22px 52px; margin: 0;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(249, 115, 22, .12); border: 1px solid rgba(249, 115, 22, .3);
  color: var(--orange-hi); font-weight: 700; font-size: .88rem;
}
.steps li::after {
  content: ""; position: absolute; left: 15.5px; top: 34px; bottom: 4px; width: 1px;
  background: var(--border);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps strong { display: block; color: var(--text); margin-bottom: 3px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }