/* Pocket Digicam — pastel pink, brushed silver and an LCD. No web fonts: system stacks only. */
:root {
  --paper: #FBF8FA;
  --paper-2: #F4EEF3;
  --ink: #2A2430;
  --ink-soft: #6E6576;
  --pink: #E2708F;
  --pink-deep: #C24E71;
  --pink-soft: #F6D5E0;
  --lilac: #8F7AD0;
  --lilac-soft: #E6DEF7;
  --silver-hi: #F8F7FB;
  --silver: #E9E7EE;
  --silver-lo: #C9C5D1;
  --lcd: #14161A;
  --lcd-text: #EAF4EE;
  --led: #FF8A1E;
  --line: #E7DFE6;
  --radius: 22px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
}
a { color: var(--pink-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
img, svg { max-width: 100%; }
code { font: 0.92em var(--mono); background: var(--paper-2); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.wrap { width: min(1080px, 100% - 32px); margin: 0 auto; }

/* header */
.top { position: sticky; top: 0; z-index: 5; background: rgba(251, 248, 250, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.brand svg { border-radius: 8px; flex: none; }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.top nav a { color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 600; padding: 6px 10px; border-radius: 999px; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); background: var(--pink-soft); }
@media (max-width: 560px) { .top nav .wide { display: none; } }

/* hero */
.hero { padding: 56px 0 40px; background: radial-gradient(120% 90% at 85% 0%, var(--pink-soft) 0%, transparent 60%), radial-gradient(90% 80% at 0% 100%, var(--lilac-soft) 0%, transparent 60%); }
.hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
@media (max-width: 820px) { .hero .wrap { grid-template-columns: 1fr; } }
.eyebrow { font: 700 13px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink-deep); margin: 0 0 14px; }
h1 { font-size: clamp(36px, 6vw, 58px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 18px; }
.lede { font-size: 19px; color: var(--ink-soft); margin: 0 0 26px; max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 700; padding: 13px 22px; border-radius: 999px; }
.btn:hover { color: #fff; background: var(--pink-deep); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:hover { background: var(--pink-soft); color: var(--ink); }
.note { font-size: 14px; color: var(--ink-soft); margin: 14px 0 0; }

/* the little camera in the hero */
.cam { position: relative; margin: 0 auto; width: min(420px, 100%); aspect-ratio: 1.45; border-radius: 34px; padding: 20px;
  background: linear-gradient(180deg, var(--silver-hi), var(--silver) 55%, var(--silver-lo));
  box-shadow: 0 30px 60px -30px rgba(163, 92, 120, 0.55), inset 0 1px 0 #fff; }
.cam::before { content: ""; position: absolute; top: -12px; left: 38px; width: 84px; height: 16px; border-radius: 10px 10px 0 0; background: #D9577D; }
.lcd { height: 100%; border-radius: 14px; background: var(--lcd); border: 8px solid #211E26; position: relative; overflow: hidden; display: grid; place-items: center; }
.lcd .scene { position: absolute; inset: 0; background: linear-gradient(180deg, #F7B38D 0%, #F29BB0 38%, #8F7AD0 70%, #3B3F52 100%); filter: saturate(1.2) contrast(1.1); }
.lcd .sun { position: absolute; left: 58%; top: 34%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFF4DA 0 40%, rgba(255, 244, 218, 0.4) 60%, transparent 70%); }
.lcd .hill { position: absolute; left: -10%; right: -10%; bottom: -30%; height: 62%; border-radius: 50% 50% 0 0; background: #2A2430; opacity: 0.9; }
.lcd .osd { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; font: 700 12px/1 var(--mono); color: var(--lcd-text); letter-spacing: 0.08em; }
.lcd .date { position: absolute; right: 14px; bottom: 12px; font: 700 20px/1 var(--mono); color: var(--led); text-shadow: 0 0 6px rgba(255, 138, 30, 0.7); letter-spacing: 0.06em; }

/* sections */
section { padding: 56px 0; }
section[id] { scroll-margin-top: 60px; }
section.alt { background: var(--paper-2); }
h2 { font-size: clamp(26px, 3.6vw, 36px); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 10px; }
.sub { color: var(--ink-soft); margin: 0 0 28px; max-width: 42em; }

.bodies { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.body { border-radius: var(--radius); padding: 18px 18px 16px; background: var(--chassis, var(--silver)); color: var(--ink); position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 12px 24px -20px rgba(42, 36, 48, 0.6); }
.body.dark { color: #F4F1F6; }
.plate { display: inline-block; font: 800 13px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.55); }
.body.dark .plate { background: rgba(0, 0, 0, 0.28); }
.body h3 { margin: 12px 0 2px; font-size: 20px; letter-spacing: -0.01em; }
.body .era { font: 600 13px/1.3 var(--mono); opacity: 0.75; margin: 0 0 8px; }
.body p { margin: 0; font-size: 15px; line-height: 1.5; }
.pro { position: absolute; top: 16px; right: 16px; font: 800 11px/1 var(--mono); letter-spacing: 0.1em; color: #fff; padding: 5px 8px; border-radius: 999px; background: linear-gradient(90deg, #D9577D, #8A6BD1); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: s; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.step::before { counter-increment: s; content: "0" counter(s); display: block; font: 800 22px/1 var(--mono); color: var(--led); margin-bottom: 10px; }
.step h3 { margin: 0 0 6px; font-size: 18px; }
.step p { margin: 0; color: var(--ink-soft); font-size: 15px; }

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }
.plan { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.plan.p { background: linear-gradient(160deg, #fff 0%, var(--pink-soft) 100%); border-color: #F0C3D2; }
.plan h3 { margin: 0 0 4px; font-size: 22px; }
.plan .price { margin: 0 0 14px; color: var(--ink-soft); font-size: 15px; }
.plan ul { margin: 0; padding-left: 20px; }
.plan li { margin: 4px 0; }

.promise { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.promise div { background: var(--lcd); color: var(--lcd-text); border-radius: var(--radius); padding: 20px; }
.promise b { display: block; font: 800 14px/1.2 var(--mono); letter-spacing: 0.08em; color: var(--led); margin-bottom: 6px; text-transform: uppercase; }
.promise p { margin: 0; font-size: 15px; opacity: 0.9; }

/* documents */
.doc { max-width: 760px; padding: 40px 0 64px; }
.doc h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 6px; }
.doc h2 { font-size: 23px; margin: 38px 0 10px; }
.doc h3 { font-size: 18px; margin: 24px 0 6px; }
.doc .upd { color: var(--ink-soft); font: 600 14px/1.4 var(--mono); margin: 0 0 22px; }
.doc .summary { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--pink); border-radius: 14px; padding: 16px 18px; }
.doc li { margin: 6px 0; }
.toc { background: var(--paper-2); border-radius: 14px; padding: 14px 18px; margin: 22px 0; }
.toc p { margin: 0 0 4px; font-weight: 700; }
.toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 28px; }
@media (max-width: 560px) { .toc ol { columns: 1; } }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; margin: 10px 0; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.tbl th { background: var(--paper-2); font-weight: 700; }
.tbl code { white-space: normal; }
.scroll { overflow-x: auto; }
details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 10px 0; }
summary { cursor: pointer; font-weight: 700; }
details[open] summary { margin-bottom: 6px; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 30px 0 40px; background: var(--paper-2); font-size: 15px; }
.foot .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: flex-start; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot nav a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.foot nav a:hover { color: var(--ink); }
.pkg { font: 13px/1.4 var(--mono); color: var(--ink-soft); margin-top: 6px; }
.fine { color: var(--ink-soft); font-size: 13px; margin: 18px 0 0; }

/* screenshots: an iPhone / Android switch over an edge-to-edge strip. Without :has() both strips show. */
.shots { padding-bottom: 40px; }
.seg { display: none; position: relative; gap: 4px; padding: 4px; margin: 0 0 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.seg label { font-weight: 700; font-size: 15px; padding: 8px 20px; border-radius: 999px; cursor: pointer; color: var(--ink-soft); user-select: none; }
.seg input:checked + label { background: var(--ink); color: #fff; }
.seg input:focus-visible + label { outline: 2px solid var(--pink-deep); outline-offset: 2px; }
.strip { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  --edge: max(16px, (100% - 1080px) / 2); padding: 20px var(--edge) 22px; scroll-padding-inline: var(--edge); scrollbar-width: thin; }
@supports selector(:has(*)) {
  .seg { display: inline-flex; }
  .shots:has(#os-iphone:checked) .strip-android, .shots:has(#os-android:checked) .strip-iphone { display: none; }
}
.strip figure { flex: 0 0 auto; width: clamp(196px, 58vw, 248px); margin: 0; scroll-snap-align: start; }
.strip img { display: block; width: 100%; height: auto; border: 6px solid #1D1A22; border-radius: 32px; background: #1D1A22; box-shadow: 0 26px 40px -28px rgba(42, 36, 48, 0.7); }
.strip-android img { border-radius: 24px; }
.strip figcaption { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.strip figcaption b { display: flex; align-items: center; gap: 6px; font: 800 13px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 3px; }
.strip .tag { font: 800 10px/1 var(--mono); color: #fff; padding: 4px 6px; border-radius: 999px; background: linear-gradient(90deg, #D9577D, #8A6BD1); }
.strip .credit { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); }
.strip .credit a { color: inherit; }
.shots .note { margin-top: 0; }