/* borrowanything.app — the company site, in the app's own look: a black lookbook, warm white type, fine lines,
   sharp corners, corner marks like a contact sheet. Tokens are the app's (ui/app.css :root). Phone first; two columns from 900 px. */

:root {
  --bg: #0b0b0c;
  --ink: #f4f3ef;
  --ink-2: rgba(244, 243, 239, .64);
  --ink-3: rgba(244, 243, 239, .52);
  --line: rgba(244, 243, 239, .1);
  --line-2: rgba(244, 243, 239, .2);
  --tap: cubic-bezier(.23, 1, .32, 1);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --serif: "New York", ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --pad: 20px;
  --max: 1120px;
  color-scheme: dark;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
h1, h2, p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
::selection { background: rgba(244, 243, 239, .9); color: var(--bg); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* ── the name: 'Borrow' large, a very small italic serif 'anything' on its baseline (the app's wordmark) ── */
.bar .wrap { display: flex; align-items: center; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; }
.brand b { font-weight: 650; font-size: 21px; letter-spacing: -.025em; }
.brand b em { font: italic 400 14px/1 var(--serif); letter-spacing: 0; color: var(--ink-2); }
.mark { width: 15px; height: 15px; position: relative; display: block; flex: none; }
.mark::before, .mark::after { content: ""; position: absolute; width: 9.5px; height: 9.5px; }
.mark::before { left: 0; top: 0; border: 1.5px solid var(--ink); }
.mark::after { right: 0; bottom: 0; background: var(--ink); }

main { flex: 1 0 auto; }

/* a fine label: mono, small caps, a number before it, like a lookbook's index */
.kicker { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: 10px; align-items: center; }
.kicker span { color: var(--ink-3); }

/* ── home ── */
.hero { display: grid; gap: 44px; padding-top: 28px; padding-bottom: 56px; }
.hero h1 { font: 650 clamp(42px, 11.4vw, 84px)/.96 var(--sans); letter-spacing: -.04em; }
.hero h1 em { font: italic 400 1.08em/1 var(--serif); letter-spacing: -.02em; }
.hero .sub { margin-top: 20px; max-width: 32em; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.soon { margin-top: 28px; display: inline-flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.35; text-wrap: balance; }
@media (max-width: 399px) { .soon { font-size: 14px; gap: 10px; } }
.soon i { width: 7px; height: 7px; flex: none; margin-top: calc((1.35em - 7px) / 2); background: var(--ink); animation: blink 2.4s var(--tap) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* FROM → ON ME: two photos with crop marks at the corners, as the app's share card shows a borrow */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.pair figure { margin: 0; display: grid; gap: 12px; }
.shot { position: relative; aspect-ratio: 4 / 7; background: #000; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.shot::after {
  content: ""; position: absolute; inset: -7px; pointer-events: none;
  --c: rgba(244, 243, 239, .5); --l: 11px; --w: 1px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) left top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) right top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--l) no-repeat;
}
.pair figcaption { order: -1; }
.pair .to { width: 22px; height: 22px; margin-top: 22px; fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: square; }
.ai { margin-top: 18px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }

/* the page comes in once, softly (the app's settle), photos after the words */
.hero .copy > *, .hero .look { animation: rise .7s var(--tap) both; }
.hero .copy > :nth-child(2) { animation-delay: .06s; }
.hero .copy > :nth-child(3) { animation-delay: .12s; }
.hero .look { animation: settle .9s var(--tap) .18s both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes settle { from { opacity: 0; transform: scale(.985); filter: blur(6px); } }

@media (min-width: 900px) {
  :root { --pad: 40px; }
  .bar .wrap { height: 80px; }
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 72px; padding-top: 6vh; padding-bottom: 10vh; min-height: calc(100dvh - 80px - 120px); }
  .hero .sub { font-size: 19px; margin-top: 26px; }
  .soon { margin-top: 36px; }
  .pair { gap: 20px; }
  .look { max-width: 520px; justify-self: end; width: 100%; }
}

/* ── text pages: support, privacy, terms ── */
.page { padding-top: 36px; padding-bottom: 72px; }
.page > * { max-width: 640px; }
.page h1 { font: 650 clamp(36px, 9vw, 56px)/1 var(--sans); letter-spacing: -.035em; margin: 14px 0 0; }
.page .lead { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.page section { padding: 26px 0; border-top: 1px solid var(--line); }
.page section:first-of-type { margin-top: 40px; }
.page h2 { font: 600 17px/1.3 var(--sans); letter-spacing: -.01em; margin: 12px 0 8px; }
.page section p:not(.kicker) { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.page section p:not(.kicker) + p { margin-top: 10px; }
.mail { color: var(--ink); background: linear-gradient(var(--line-2), var(--line-2)) left bottom / 100% 1px no-repeat; transition: background-size .25s var(--tap); }
@media (hover: hover) { .mail:hover { background-image: linear-gradient(var(--ink), var(--ink)); } }
.page .soon { margin-top: 32px; }

/* ── footer ── */
.foot { border-top: 1px solid var(--line); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-top: 22px; padding-bottom: 26px; font-size: 13px; color: var(--ink-3); }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot nav a { color: var(--ink-2); padding: 6px 0; transition: color .2s; }
.foot nav a[aria-current="page"] { color: var(--ink); }
@media (hover: hover) { .foot nav a:hover { color: var(--ink); } }

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