/* The system. One set of numbers for the site, the plain pages and the client page.
   site.css and portal.css take every space, size, radius and font size from these tokens.
   The only numbers of their own are drawings: the phone frame, the ad engine, hairlines.

   Spacing   a 4px base on an 8px rhythm: 4 8 12 16 20 24 32 40 48 64 80 112 144.
   Type      Apple's text styles, 12 13 15 17 20 22 28 34, then 40 48 64 80 for display.
             Line height 1.47 for reading, 1.2 for titles, 1.1 from 34px up, 1 for display.
             Weights: 400 text, 500 labels and buttons, 600 titles. Nothing in between.
             Tracking: 0 at 12 to 13, -1% for text, -2% at 20 to 22, -3.5% for titles, -5% for display.
   Radius    8 12 16 24 32 and pill. Every card is 24. A shape that sits 12px or less inside
             another follows its curve (inner = outer minus the gap); further in, it takes 16.
   Controls  48 for main buttons and fields, 40 for small buttons, 32 for segments.
             On a touch screen everything you tap is at least 44, at any width.
   Devices   phone under 744px, iPad 744 to 1023px, desktop 1024px and up. Each one sets its
             own gutter, section spacing, card padding, gaps and display sizes below.
   Rules     Sections are one --section apart; a block that belongs to the one above sits
             half that. A title is one --stack above its content. Cards sit one --gap apart.
             Text inside a card starts one --pad from its edge, whatever is inside. */

@font-face {
  font-family: "Inter Tight";
  src: url(/fonts/inter-tight.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Colour: graphite, deliberately dark only. */
  --bg: #141416;
  --card: #1d1d20;
  --sheet: #222226;
  --raise: #28282c;
  --fill: #36363a;
  --thumb: #4a4a4f;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --line-3: rgba(255, 255, 255, .24);
  --wash: rgba(255, 255, 255, .04);
  --wash-2: rgba(255, 255, 255, .1);
  --glass: rgba(20, 20, 22, .76);
  --ink: #f5f5f7;
  --on-ink: #050505;
  --soft: #c7c7cc;
  --muted: #8e8e93;
  --faint: #636366;
  --accent: #ff5a1f;
  --accent-ink: #ff8a5c;
  --accent-soft: rgba(255, 90, 31, .14);
  --accent-line: rgba(255, 90, 31, .35);
  --ok: #30d158;
  --ok-soft: rgba(48, 209, 88, .12);
  --bad: #ff453a;

  /* Spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s28: 112px; --s36: 144px;

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter Tight", "Segoe UI", Roboto, sans-serif;
  --t-cap: .75rem;      /* 12 */
  --t-foot: .8125rem;   /* 13 */
  --t-sub: .9375rem;    /* 15 */
  --t-body: 1.0625rem;  /* 17 */
  --t-3: 1.25rem;       /* 20 */
  --t-2: 1.375rem;      /* 22 */
  --t-1: 1.75rem;       /* 28 */
  --t-large: 2.125rem;  /* 34 */
  --t-40: 2.5rem;
  --t-48: 3rem;
  --t-64: 4rem;
  --t-80: 5rem;
  /* Tracking: tighter as type grows, none on small text (Apple's own curve, rounded). */
  --tr-small: 0;
  --tr-body: -0.01em;
  --tr-title: -0.02em;
  --tr-head: -0.035em;
  --tr-display: -0.05em;

  /* Radius */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* Controls and icons */
  --h-lg: 48px;
  --h-md: 40px;
  --h-sm: 32px;
  --i-sm: 16px; --i-md: 20px; --i-lg: 24px;

  /* Widths */
  --content: 1024px;
  --narrow: 720px;
  --w-sheet: 512px;
  --measure: 62ch;

  /* Motion */
  --spring: cubic-bezier(.2, 1.25, .35, 1);
  --ease: cubic-bezier(.22, .8, .2, 1);

  /* Phone, the default */
  --gutter: 20px;
  --section: var(--s20);
  --pad: var(--s5);
  --gap: var(--s3);
  --stack: var(--s6);
  --bar: 56px;
  --t-display: var(--t-48);
  --t-h1: var(--t-large);
  --t-h2: var(--t-1);
  --t-lead: var(--t-2);

  --gl: max(var(--gutter), env(safe-area-inset-left, 0px));
  --gr: max(var(--gutter), env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

/* iPad */
@media (min-width: 744px) {
  :root {
    --gutter: 32px;
    --section: var(--s28);
    --pad: var(--s6);
    --gap: var(--s4);
    --stack: var(--s8);
    --bar: 64px;
    --t-display: var(--t-64);
    --t-h1: var(--t-40);
    --t-h2: var(--t-large);
    --t-lead: var(--t-1);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --section: var(--s36);
    --pad: var(--s8);
    --gap: var(--s5);
    --stack: var(--s10);
    --t-display: var(--t-80);
    --t-h1: var(--t-48);
    --t-h2: var(--t-40);
  }
}

/* Touch screens of any size: nothing you tap under 44. */
@media (pointer: coarse) {
  :root { --h-md: 44px; --h-sm: 44px; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + var(--s4)); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.47 var(--sans); letter-spacing: var(--tr-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
/* A faint light at the top, like a screen in a dark room. */
body::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 900px; background: radial-gradient(130% 75% at 55% -5%, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 45%, transparent 75%); pointer-events: none; }
body.locked { overflow: hidden; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: var(--accent); color: #fff; }
h1, h2, h3 { text-wrap: balance; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The page frame: one pair of equal gutters, content no wider than --content. */
.wrap { width: 100%; max-width: calc(var(--content) + var(--gl) + var(--gr)); margin-inline: auto; padding-left: var(--gl); padding-right: var(--gr); }

/* Buttons: one pill for both pages (.pill on the site, .btn on the client page). */
.pill, .btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--h-lg); padding: 0 var(--s6); border-radius: var(--r-pill); border: 1px solid var(--ink);
  background: var(--ink); color: var(--on-ink); font-size: var(--t-body); letter-spacing: var(--tr-body); font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: transform .35s var(--spring), background .25s var(--ease), border-color .25s var(--ease), box-shadow .3s, opacity .2s;
}
.pill:hover, .btn:hover { background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .06); }
.pill:active, .btn:active { transform: scale(.96); transition-duration: .1s; }
.pill-line, .btn-line { background: var(--wash); color: var(--ink); border-color: var(--line-2); }
.pill-line:hover, .btn-line:hover { background: rgba(255, 255, 255, .09); border-color: var(--line-3); box-shadow: none; }
.pill-small, .btn-small { min-height: var(--h-md); padding: 0 var(--s4); font-size: var(--t-sub); letter-spacing: var(--tr-body); }
.pill-full, .btn-full { width: 100%; }
.btn:disabled { opacity: .4; cursor: default; transform: none; }

/* Cards: the same surface everywhere. */
.card { position: relative; background: var(--card); border: .5px solid var(--line-2); border-radius: var(--r-lg); padding: var(--pad); min-width: 0; }

/* Toast: a pill from the top (.toast on the site, #toast on the client page). */
.toast, #toast { position: fixed; z-index: 70; left: 50%; top: calc(var(--s4) + env(safe-area-inset-top, 0px)); max-width: calc(100vw - var(--s8)); transform: translate(-50%, calc(-100% - var(--s10))); opacity: 0; padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: rgba(44, 44, 46, .92); color: var(--ink); border: .5px solid var(--line-2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font-size: var(--t-sub); letter-spacing: var(--tr-body); font-weight: 500; pointer-events: none; transition: transform .5s var(--spring), opacity .3s; }
.toast.show, #toast.show { transform: translate(-50%, 0); opacity: 1; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}