/* PocketPortal's site wears the app's own look: deep space and gunmetal, keys with a lower lip, amber for "on"
   and for what to do next, and the event horizon's blue only inside the gate. The one loud thing is the gate in
   the hero, locking its chevrons as the page opens; everything after it stays quiet. */
:root {
  color-scheme: dark;

  --space: #070b12;                  /* the page */
  --space-2: #0b111b;                /* a quieter band */
  --deck: rgba(15, 21, 29, 0.96);    /* the phone's toolbar */
  --key: #232c38;                    /* key and button faces */
  --key-hover: #2b3644;
  --key-down: #334050;
  --key-edge: #0b0f15;               /* a key's lower lip */
  --amber: #ff9a3c;                  /* on, and the next thing to do */
  --amber-hover: #ffa953;
  --amber-edge: #b45f1c;
  --amber-ink: #2a1203;              /* text on amber */
  --horizon: #4fb4ff;
  --ink: #e8eef5;
  --ink-dim: #93a4b8;
  --rule: rgba(255, 255, 255, 0.09);

  --gutter: 16px;
  --wrap: 1120px;
  --display: "Instrument Sans", system-ui, -apple-system, sans-serif;
}

@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--space);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, ol, figure, pre { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* A column of reading width, on the page's left edge like everything else. */
.narrow > * { max-width: 760px; }

/* ------------------------------------------------------------------ type */

/* Headlines in the family's condensed cut, tight and large; body text at its normal width. */
h1, h2 { font-stretch: 78%; font-weight: 650; letter-spacing: -0.01em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(48px, 9vw, 96px); }
h2 { font-size: clamp(34px, 5.4vw, 56px); }
h3 { font-size: 19px; font-weight: 600; line-height: 1.3; }
p { text-wrap: pretty; }
strong { font-weight: 600; color: var(--ink); }

.lead { margin-top: 18px; color: var(--ink-dim); font-size: clamp(18px, 2.2vw, 21px); line-height: 1.55; max-width: 62ch; }

code {
  padding: 0.05em 0.4em 0.1em;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
}

/* Keys named in the copy look like the key row's. */
kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0 0.4em 0.08em;
  border-radius: 6px;
  background: var(--key);
  box-shadow: inset 0 -2px 0 var(--key-edge), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font: inherit;
  font-size: 0.9em;
  font-weight: 600;
  text-align: center;
}

/* ------------------------------------------------------------------ buttons */

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 12px;
  background: var(--key);
  box-shadow: inset 0 -3px 0 var(--key-edge), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: background 120ms ease, transform 80ms ease;
}

.btn:hover { background: var(--key-hover); }
.btn:active { background: var(--key-down); transform: translateY(1px); box-shadow: inset 0 -2px 0 var(--key-edge); }
.btn-amber { background: var(--amber); box-shadow: inset 0 -3px 0 var(--amber-edge); color: var(--amber-ink); }
.btn-amber:hover { background: var(--amber-hover); }
.btn-amber:active { background: var(--amber); box-shadow: inset 0 -2px 0 var(--amber-edge); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  padding: 28px 0 72px;
  background:
    radial-gradient(60% 50% at 78% 38%, rgba(47, 123, 255, 0.16), transparent 70%),
    radial-gradient(40% 40% at 10% 0%, rgba(255, 154, 60, 0.06), transparent 70%);
}

.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; } .hero { padding: 48px 0 110px; } }

.brandline { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-size: 18px; font-weight: 600; }
.brandline img { border-radius: 9px; }
.lede { margin-top: 22px; color: var(--ink-dim); font-size: clamp(18px, 2.3vw, 21px); line-height: 1.55; max-width: 34ch; }
.fine { margin-top: 18px; color: var(--ink-dim); font-size: 15px; max-width: 46ch; }

.hero-art { position: relative; width: min(100%, 560px); margin-inline: auto; aspect-ratio: 1 / 1.06; }
/* The artwork's gate takes three quarters of its square, the rest its glow: drawn larger, so the ring is the size
   it was. */
.gate { position: absolute; top: -8%; left: -8%; width: 100%; }
.hero-phone { position: absolute; right: 0; bottom: 0; width: 44%; }

/* The gate: the icon's artwork unlit under it lit, the lit one shown through a sweep that steps round a chevron at a
   time, from the top, so each locks amber in turn. Its square fades out past the ring, into the page. */
@property --sweep { syntax: "<angle>"; inherits: true; initial-value: 360deg; }
.gate {
  aspect-ratio: 1;
  --sweep: 360deg;
  animation: dial 1.4s steps(7, end) 0.35s both;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 88%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 88%, transparent 100%);
}
.gate img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gate-lit {
  -webkit-mask-image: conic-gradient(from -25.72deg, #000 var(--sweep), transparent 0);
  mask-image: conic-gradient(from -25.72deg, #000 var(--sweep), transparent 0);
}
@keyframes dial { from { --sweep: 0deg; } to { --sweep: 360deg; } }
@keyframes tap { 0% { opacity: 0.9; transform: scale(0.6); } 70% { opacity: 0; transform: scale(2.2); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gate { animation: none; } }

/* ------------------------------------------------------------------ phones */

/* An iPhone drawn in CSS, its screen the phone app's own toolbar and trays. Sizes are in em of the frame's font
   size, so a phone scales as one piece. */
.phone {
  --w: 300px;
  font-size: calc(var(--w) / 30);
  width: var(--w);
  max-width: 100%;
  aspect-ratio: 300 / 620;
  padding: 0.55em;
  border-radius: 4.6em;
  background: linear-gradient(160deg, #3a414c, #12161c 55%, #2a3039);
  box-shadow: 0 2.4em 5em rgba(0, 0, 0, 0.55), inset 0 0 0 0.12em rgba(255, 255, 255, 0.10);
}

.hero-phone { --w: 240px; }
@media (min-width: 960px) { .hero-phone { --w: 250px; } }
@media (max-width: 520px) { .hero-phone { --w: 46vw; } }

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 4.1em;
  background: #000;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  line-height: 1.3;
}

.status { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 4.4em; padding: 0 3.2em; font-size: 1.25em; font-weight: 600; }
.status .pill { position: absolute; left: 50%; top: 1.05em; width: 9em; height: 2.6em; border-radius: 2em; background: #000; transform: translateX(-50%); }

.picture { position: absolute; inset: 0; width: 100%; height: 100%; }

.bar { position: relative; z-index: 2; margin-top: auto; padding-bottom: 2.6em; background: var(--deck); border-top: 0.1em solid var(--rule); }
.tools { display: flex; padding: 0.7em 0.6em 0; }
.tool { flex: 1 1 0; display: grid; justify-items: center; gap: 0.35em; min-width: 0; color: var(--ink); }
.tool svg { width: 2.4em; height: 2.4em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool span { font-size: 0.82em; letter-spacing: -0.02em; color: var(--ink-dim); white-space: nowrap; }
.tool.on, .tool.on span { color: var(--amber); }
.tool.off { opacity: 0.35; }

/* The hero's phone is a picture of the app (scripts/make-shots.sh): a window at Phone size, its prompt waiting. The
   tap ring sits on the prompt's Allow button in that picture, which art/shots/demo.css lays out. */
.taphere { position: absolute; left: 70.7%; top: 76.6%; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%; border: 0.25em solid var(--amber); animation: tap 1.6s ease-out 2.8s infinite; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .taphere { animation: none; opacity: 0.8; } }

.termhead em { white-space: nowrap; padding: 0.35em 0.8em; border-radius: 0.8em; background: var(--key); box-shadow: inset 0 -0.15em 0 var(--key-edge); font-style: normal; font-weight: 600; }

/* A tray, over the picture. */
.panel { padding: 0.9em 1em 0.4em; }

/* The hero, Windows and Files are pictures of the real phone app (scripts/make-shots.sh), under the status bar. */
.screen > .shotimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Terminal. */
.term .screen, .screen.term { background: #0b1017; }
.tty { flex: 1 1 auto; padding: 0.4em 1.4em; overflow: hidden; color: #dbe3ec; font-family: ui-monospace, Menlo, monospace; font-size: 1.05em; line-height: 1.45; white-space: pre; }
.tty .p { color: #6cb6ff; }
.tty .g { color: #7ee787; }
.cur { background: var(--amber); }
.termhead { display: flex; align-items: center; gap: 0.5em; padding: 0.8em 1em 0.2em; font-size: 1em; }
.termhead span { flex: 1 1 auto; white-space: nowrap; }
.termhead span i { font-style: normal; color: var(--ink-dim); margin-left: 0.3em; }
.termhead .big { font-size: 1.25em; padding-block: 0.2em; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5em; }
.tiles span { display: grid; justify-items: center; gap: 0.35em; padding: 0.75em 0 0.6em; border-radius: 0.9em; background: var(--key); box-shadow: inset 0 -0.2em 0 var(--key-edge); font-size: 0.85em; color: var(--ink-dim); white-space: nowrap; }
.tiles b { color: var(--ink); font-size: 1.35em; line-height: 1.1; font-weight: 600; }
.tiles svg { width: 1.9em; height: 1.9em; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* The lock screen, with two alerts. */
.lockscreen .screen { background: radial-gradient(120% 70% at 50% 0%, #1d3a63, #070b12 70%); }
.clock { margin-top: 2.2em; text-align: center; font-size: 6.4em; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.clock span { display: block; margin-bottom: 0.15em; font-size: 0.2em; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.notes { margin-top: auto; padding-bottom: 3.4em; }
.note { display: flex; gap: 0.9em; margin: 0.8em 0.9em 0; padding: 1.1em; border-radius: 1.7em; background: rgba(40, 52, 70, 0.72); backdrop-filter: blur(12px); font-size: 1.05em; }
.note img { width: 3em; height: 3em; border-radius: 0.75em; flex: none; }
.note div { flex: 1 1 auto; min-width: 0; }
.note b { display: block; font-weight: 600; }
.note span { color: #c6d1de; }
.note i { font-style: normal; color: var(--ink-dim); font-size: 0.9em; white-space: nowrap; }

/* ------------------------------------------------------------------ sections */

.section { padding: 84px 0; }
@media (min-width: 960px) { .section { padding: 120px 0; } }
.why { padding-top: 24px; }
.why h2 { color: var(--ink); }

.feature { display: grid; gap: 40px; align-items: center; padding: 56px 0; border-top: 1px solid var(--rule); }
.feature:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; padding: 88px 0; }
  .feature.flip .copy { order: 2; }
}
.feature h3 { font-family: var(--display); font-size: clamp(28px, 3.6vw, 40px); font-stretch: 80%; font-weight: 650; line-height: 1.08; }
.feature .copy p { margin-top: 18px; color: var(--ink-dim); font-size: 18px; max-width: 46ch; }
.shot { display: grid; justify-items: center; gap: 16px; }
.shot .phone { --w: min(300px, 78vw); }
/* The features' trays are opaque: unblurred, the windows behind showed through as hard-edged ghosts. */
.shot .bar { background: #0f151d; }
.shot figcaption { color: var(--ink-dim); font-size: 14px; text-align: center; }

.more { background: var(--space-2); border-block: 1px solid var(--rule); }
.grid { display: grid; gap: 40px 48px; margin-top: 48px; padding: 0; list-style: none; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid svg { width: 28px; height: 28px; fill: none; stroke: var(--amber); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.grid h3 { margin-top: 12px; }
.grid p { margin-top: 6px; color: var(--ink-dim); font-size: 16px; }

/* How it works: one path, Mac to phone, so the steps are numbered by the line between them. */
.path { display: grid; gap: 0; margin-top: 48px; padding: 0; list-style: none; counter-reset: step; }
.path li { position: relative; padding: 0 0 36px 52px; }
.path li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--amber); color: var(--amber); font-weight: 700; font-size: 15px; }
.path li:not(:last-child)::after { content: ""; position: absolute; left: 15.5px; top: 40px; bottom: 8px; width: 1px; background: var(--rule); }
.path p { margin-top: 6px; color: var(--ink-dim); max-width: 60ch; }
@media (min-width: 900px) {
  .path { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .path li { padding: 52px 0 0; }
  .path li:not(:last-child)::after { left: 44px; right: -28px; top: 15.5px; bottom: auto; width: auto; height: 1px; }
}

.split { display: grid; gap: 36px; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; } }
.steps { display: grid; gap: 28px; padding: 0; list-style: none; }
.steps li { display: flex; gap: 18px; }
.num { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--amber); color: var(--amber-ink); font-weight: 700; font-size: 15px; }
.steps p { margin-top: 4px; color: var(--ink-dim); }

.privacy { background: var(--space-2); border-block: 1px solid var(--rule); }
.statement { margin: 22px 0 18px; font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; line-height: 1.35; }
.privacy p:last-child { color: var(--ink-dim); }

/* Price: the one card on the page, since it's the one thing to decide. */
.price { display: grid; gap: 48px; }
@media (min-width: 900px) { .price { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.pricecard { padding: 36px 32px; border-radius: 24px; background: linear-gradient(180deg, #121a26, #0c121b); box-shadow: inset 0 0 0 1px var(--rule), 0 30px 80px rgba(0, 0, 0, 0.4); }
.pricecard h2 { font-size: clamp(48px, 7vw, 72px); }
.pricecard ul, .needs ul { margin-top: 20px; padding-left: 1.1em; color: var(--ink-dim); }
.pricecard li, .needs li { margin-top: 6px; }
.pricecard li::marker, .needs li::marker { color: var(--amber); }
.needs h3 + ul { margin-top: 10px; }
.needs ul + h3 { margin-top: 32px; }

.faq { margin-top: 32px; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--amber); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 22px; color: var(--ink-dim); max-width: 64ch; }
.faq a { color: var(--amber); }

.foot { padding: 40px 0 56px; border-top: 1px solid var(--rule); }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink-dim); font-size: 15px; line-height: 1.4; }
.brand img { border-radius: 10px; }
.foot-links { display: flex; gap: 24px; padding: 0; list-style: none; }
.foot-links a { color: var(--ink-dim); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }