/* THE PUBLIC PAGES — the landing page and the two documents anybody can read without an account.
 *
 * The lined look, applied to prose. Three marks and no fourth: the SEAM under the header, a RULE
 * between sections, and one MARKER on whatever the reader should press. No corners, no shadows, no
 * boxed cards — a legal document drawn as a stack of tiles reads as a thing designed to be skimmed
 * past, and these are documents somebody may one day need to rely on.
 *
 * Every colour is a token from style.css. theme.js is the only writer of a colour in this product,
 * and prefers-color-scheme is not used anywhere. */

/* PADDING-BLOCK, NEVER THE SHORTHAND. site.css loads after style.css, so "padding: X 0" here
   silently overrode .wrap-s "padding: 0 var(--gut)" and jammed every public page against the left
   edge of the screen. The vertical padding belongs to this rule; the side gutter belongs to .wrap
   and must not be touched by anything that also wants a vertical one. */
.site-main { padding-block: var(--space-12); }

/* ── a document ────────────────────────────────────────────────────────────────────────────── */

.doc { max-width: 68ch; }
.doc .page-title { font-size: clamp(28px, 4.5vw, 42px); line-height: 1.12; margin: var(--space-2) 0 var(--space-4); }
.doc .page-sub { color: var(--ink-soft); font-size: calc(16px + var(--ui-text-step, 0px)); }
.doc .stamp { color: var(--ink-faint); font-size: 13px; margin-top: var(--space-4); }

.doc section { border-top: var(--w-rule) solid var(--hair-dk); padding-top: var(--space-6); margin-top: var(--space-8); }
.doc h2 { font-size: calc(19px + var(--ui-text-step, 0px)); font-weight: 500; margin-bottom: var(--space-4); }
.doc h3 { font-size: calc(15px + var(--ui-text-step, 0px)); font-weight: 500; margin: var(--space-6) 0 var(--space-2); }
.doc p, .doc li { line-height: 1.65; }
.doc ul, .doc ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.doc li { margin-bottom: var(--space-2); }
.doc strong { font-weight: 500; }

/* A definition list is how "who sees what" reads best: the name, then the one thing it is given. */
.doc dl { margin: 0; }
.doc dt { font-weight: 500; margin-top: var(--space-4); }
.doc dd { margin: var(--space-1) 0 0; color: var(--ink-soft); }

/* THE ONE BOX, and on these pages it is reserved for the sentence a reader would be worst off
   missing — not for decoration. */
.doc .keep {
  border-left: var(--w-edge) solid var(--ink);
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  margin: var(--space-6) 0;
}
.doc .keep p:last-child { margin-bottom: 0; }

.doc .contents { border-top: var(--w-rule) solid var(--hair-dk); padding-top: var(--space-4); margin-top: var(--space-8); }
.doc .contents ol { list-style: none; padding: 0; margin: 0; }
.doc .contents li { margin-bottom: var(--space-2); }

/* ── the footer every public page carries ──────────────────────────────────────────────────── */

.site-foot {
  margin-top: var(--space-12); padding-top: var(--space-8);
  border-top: var(--w-rule) solid var(--hair-dk);
  color: var(--ink-soft); font-size: 13px;
}
.foot-in {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8); align-items: start; padding-bottom: var(--space-8);
}
.foot-col p { margin: 0 0 var(--space-2); line-height: 1.6; }
.foot-col a { color: var(--ink-soft); text-decoration: none;
  border-bottom: var(--w-rule) solid var(--hair-dk); }
.foot-col a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.foot-h { margin: 0 0 var(--space-3); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.foot-line { margin-top: var(--space-3); }
.foot-legal { font-family: var(--font-mono); font-size: 11px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
.foot-social { display: flex; gap: var(--space-3); }
/* Marks, not links, until the accounts exist — so no hover affordance and no pointer. */
.foot-icon { display: inline-flex; width: 22px; height: 22px; color: var(--ink-soft); }
.foot-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }

@media (max-width: 860px) { .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-in { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 860px) {
  .site-main { padding-block: var(--space-8); }
  .doc section { margin-top: var(--space-6); }
}

/* ── public landing composition ───────────────────────────────────────────────────────────────
   The landing page is intentionally wider than the reading documents. On larger screens the
   opening gets a quiet piece of air beside it and each section has a consistent editorial rail;
   on smaller screens those same relationships collapse without becoming a shrunken desktop. */
.site-page .wrap {
  max-width: 1600px;
  padding-inline: clamp(20px, 5.4vw, 88px);
}

.site-page .top-in {
  min-height: clamp(72px, 7vw, 96px);
}

.site-page .site-main {
  padding-block: clamp(40px, 7vw, 104px);
}

/* THE OPENING, REBUILT AROUND THE FILM (2 Nov 2026). Two columns that end on the same line: the
   title on the left, and on the right the sentence and the buttons, set against the title's
   baseline. The moving image the frame below was kept for now exists, so it takes the full width
   under them, and the phone moves down to the section about what it shows.
   Sized to what it holds, still: at 1440x900 the buttons and the top of the film are both in the
   first frame. */
.site-page .lede {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  column-gap: clamp(40px, 8vw, 160px);
  align-items: end;
  max-width: none;
  padding: clamp(8px, 2vw, 24px) 0 clamp(36px, 4.5vw, 64px);
}
.site-page .lede-say { min-width: 0; max-width: 560px; }
/* `.hint{display:block}` in style.css outranks the browser's own [hidden] rule, so the empty hint
   that waits for a phone number used to hold a row and its margins even while hidden. */
.site-page .lede .hint[hidden] { display: none; }

/* THE FILM. Edge to edge of the page's rail, square, no frame: the picture is the frame. What it is
   is said underneath in words — that the person and the place are generated — in the same mono the
   site uses for every label, so it reads as a fact about the picture rather than as small print. */
.site-page .film { margin: 0 0 clamp(24px, 4vw, 56px); }
.site-page .film-frame { margin: 0; }
.site-page .film-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--glass-2);
}
.site-page .film-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-8);
  align-items: start;
  padding-top: 18px;
}
.site-page .film-line {
  grid-row: 1 / span 2;
  margin: 0;
  max-width: 26ch;
  font-size: clamp(22px, 2.5vw, 38px);
  line-height: 1.12;
  letter-spacing: clamp(-1.2px, -.06vw, -.4px);
}
/* THE DISCLOSURE IS READ, NOT SMALL PRINT: 12px in --ink-soft, the size and tone of the phone's own
   note, not the 10px faint mono of a label. It sits under a photorealistic person. */
.site-page .film-note {
  margin: 6px 0 0;
  max-width: 34ch;
  text-align: right;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* THE ONE MARKER, on the one thing here that can be pressed. A word, not an icon: "Pause" and
   "Play" say what will happen. 44px tall for a thumb. */
.site-page .film-toggle {
  justify-self: end;
  min-height: 44px;
  /* 44 wide too, so "Play" and "Pause" sit in the same box and the button does not move. */
  min-width: 44px;
  padding: 0;
  border: 0;
  border-bottom: var(--w-mark) solid var(--ink);
  background: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-page .film-toggle[hidden] { display: none; }

/* THE CONSOLE, RECORDED (Pier reads your week): the real console on a demo account, square like the
   film, with its Pause under it and no caption (decided 3 Nov). Two recordings of one take and the
   width picks: the desktop console from 1300px, where the column is about 770px or wider and its
   text reads at 0.77x or better; below that the console's own phone layout, 300px wide like the phone
   in After every call, also 0.77x, because the desktop one would set its text under 10px. The hidden
   one is display:none, which the page's player reads as "not shown": it never plays or downloads.
   ONE EDGE, a hairline. The film needs none, but this is a dark screen, and on the dark theme its
   ground meets the page's at about 1:1 — the console's own header then read as the page's, menu
   and Sign out included. In the light theme the line sits against the clip's dark edge and is all
   but invisible.
   THE STILL UNDER IT. A lazy <picture> of the first frame, its source picked by the same width; a
   recording with no frame yet is transparent, so the still shows until playback paints over it,
   and it stays for a reader who asked for less motion, without JavaScript, or if the file fails. */
.site-page .screens { margin: var(--space-8) 0 0; }
/* overflow hidden: a playing video's layer is snapped up to a pixel past its box at some widths, and
   painted over the hairline on that side; clipped to the frame, it cannot reach the line. */
.site-page .screens-frame { position: relative; overflow: hidden; outline: var(--w-rule) solid var(--hair-ink); background: var(--glass-2); }
.site-page .screens-still,
.site-page .screens-still img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* The still is not a control. Focus is put on it only so that something says what is shown when a
   recording fails under a keyboard, and like the console's own such targets it draws no ring (the
   house rule, checks/check-ui.js): a ring would frame a picture as something to press. */
.site-page .screens-still img:focus { outline: none; }
.site-page .screens-video { position: relative; width: 100%; height: auto; }
.site-page .screens-wide { display: block; aspect-ratio: 1600 / 1280; }
.site-page .screens-narrow { display: none; aspect-ratio: 780 / 1600; }
.site-page .screens-controls {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}
@media (max-width: 1299px) {
  .site-page .screens { max-width: 300px; }
  .site-page .screens-wide { display: none; }
  .site-page .screens-narrow { display: block; }
}

/* AFTER EVERY CALL: the words, and beside them the phone that shows those words arriving. A third
   column on this one strip, and .strip.after rather than .after so it outranks the two-column rule
   every strip shares below.
   WHOLE-NUMBER fr. With fractions below 1, once the first and last columns sat at their minimums the
   middle one was given only 36% of what was left, and the paragraph shrank to 60px wide at 821px. */
.site-page .strip.after {
  grid-template-columns: minmax(170px, 27fr) minmax(0, 36fr) minmax(280px, 37fr);
  align-items: start;
}
.site-page .strip.after > .after-say { grid-column: 2; max-width: 46ch; }
.site-page .after-say p { font-size: clamp(15px, 1.12vw, 18px); line-height: 1.68; }
.site-page .strip.after > .hero-phone { grid-column: 3; justify-self: end; }
/* Too narrow for three columns and too wide for one: the phone goes under the words. */
@media (min-width: 821px) and (max-width: 1080px) {
  .site-page .strip.after { grid-template-columns: minmax(170px, 27fr) minmax(0, 73fr); }
  .site-page .strip.after > .hero-phone { grid-column: 2; justify-self: start; margin-top: var(--space-8); }
}

/* THE PHONE'S FRAME. The four corner brackets and "AUSTRALIAN NUMBER / ALWAYS ON" were first drawn
   on an empty square beside the headline ("this slot is going to hold a moving image"), then around
   the phone. They stay with the phone. NO BORDER still: the brackets say "frame" and an outline
   would say it twice. */
.site-page .hero-phone {
  position: relative;
  width: 100%;
  max-width: 372px;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 36px 36px 46px;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 54px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / 2px 54px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 54px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 2px 54px no-repeat;
}
.site-page .hero-phone::after {
  content: "AUSTRALIAN NUMBER / ALWAYS ON";
  position: absolute;
  right: 14px;
  bottom: 18px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  pointer-events: none;
}

/* A PICTURE OF A PHONE, SO IT KEEPS A PHONE'S CORNERS. The only rounded shapes on the site, on
   purpose: squared off, the bezel and the bubbles stop reading as a phone and a Messages thread,
   and that recognition is the whole picture. Every colour is still a token, so it turns with
   Light and Dark like everything else. */
.site-page .hero-phone-device {
  width: min(300px, 100%);
  /* AN IPHONE 17'S OWN PROPORTIONS: 71.5 x 149.6 mm, Apple's published body size. The thread takes
     whatever height that leaves and keeps the newest text at the bottom, as Messages does; on a
     narrow column the oldest one slides up under the header rather than stretching the phone. */
  aspect-ratio: 71.5 / 149.6;
  display: flex;
  flex-direction: column;
  border: 9px solid var(--ac-deep);
  border-radius: 40px;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}
.site-page .hero-phone-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  padding-inline: 22px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.site-page .hero-phone-bar i { display: block; width: 78px; height: 20px; border-radius: 12px; background: var(--ac-deep); }
.site-page .hero-phone-head {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding-block: 4px 10px;
  border-bottom: var(--w-rule) solid var(--hair-dk);
  font-size: 12px;
}
.site-page .hero-phone-head b { font-weight: 500; }
.site-page .hero-phone-av { width: 36px; height: 36px; border-radius: 50%; background: var(--glass-2); display: grid; place-items: center; }
.site-page .hero-phone-av .brand-mark { width: 15px; height: 15px; }
.site-page .hero-phone-av .brand-mark i { height: 3px; }
.site-page .hero-phone-bar,
.site-page .hero-phone-head,
.site-page .hero-phone-compose { flex: none; }
.site-page .hero-phone-thread { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 10px 14px; }
.site-page .hero-phone-when { margin: 4px 0 0; text-align: center; font-size: 10px; color: var(--ink-soft); }
.site-page .hero-phone-text {
  align-self: flex-start;
  max-width: 88%;
  margin: 0;
  padding: 8px 11px;
  border-radius: 17px 17px 17px 5px;
  background: var(--glass-2);
  font-size: 12.5px;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.site-page .hero-phone-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.site-page .hero-phone-compose { display: flex; padding: 8px 10px 14px; border-top: var(--w-rule) solid var(--hair-dk); }
.site-page .hero-phone-compose span {
  flex: 1;
  border: var(--w-rule) solid var(--hair-ink);
  border-radius: 18px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--ink-soft);
}
.site-page .hero-phone-note { margin: 0; max-width: 300px; text-align: center; font-size: 12px; color: var(--ink-soft); }
.site-page .lede .page-title {
  font-size: clamp(48px, 6.4vw, 100px);
  line-height: .96;
  letter-spacing: clamp(-3px, -.22vw, -1px);
  margin: 0;
  /* TWO LINES, broken where the markup breaks them. An 8ch cap wrapped "Realestate +" a second time,
     so the title took three lines and pushed the film half out of the first frame. */
  max-width: none;
}
.site-page .lede .page-sub {
  max-width: 54ch;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.55;
  margin-bottom: 32px;
}
.site-page .lede .actions { margin-bottom: 14px; }
.site-page .lede .hint { font-size: 12px; }

.site-page .strip {
  display: grid;
  grid-template-columns: minmax(170px, .27fr) minmax(0, .73fr);
  column-gap: clamp(32px, 7vw, 128px);
  max-width: none;
  margin-top: 0;
  padding: clamp(34px, 4vw, 60px) 0 clamp(48px, 7vw, 104px);
}
.site-page .strip + .strip { margin-top: 0; }
.site-page .strip .section-label {
  grid-column: 1;
  margin: 2px 0 0;
  line-height: 1.7;
}
.site-page .strip > :not(.section-label) { grid-column: 2; }
.site-page .strip > p {
  max-width: 68ch;
  font-size: clamp(15px, 1.12vw, 18px);
  line-height: 1.68;
}
.site-page .strip .hint { font-size: 13px; }

.site-page .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 72px);
}
.site-page .steps li {
  min-width: 0;
  padding: 48px 0 0;
  border-top: var(--w-rule) solid var(--hair-dk);
}
.site-page .steps li::before { top: 16px; left: 0; }
.site-page .steps h3 { font-size: clamp(18px, 1.5vw, 22px); margin-bottom: 14px; }
.site-page .steps p { font-size: 15px; line-height: 1.68; }

.site-page .keep {
  max-width: 72ch;
  padding: 0 0 0 20px;
  margin: 0 0 28px;
}
.site-page .keep p { font-size: clamp(17px, 1.45vw, 22px); line-height: 1.5; }
.site-page .facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 5vw, 90px);
}
.site-page .facts dt {
  padding-top: 20px;
  margin-top: 0;
  font-size: clamp(16px, 1.25vw, 19px);
}
.site-page .facts dd { margin-bottom: 28px; line-height: 1.65; }
.site-page .closing { padding-bottom: 20px; }
.site-page .closing .page-title { font-size: clamp(40px, 5vw, 72px); }

@media (max-width: 820px) {
  .site-page .lede {
    grid-template-columns: 1fr;
    row-gap: 28px;
    padding-bottom: 40px;
  }
  .site-page .lede .page-title { font-size: clamp(48px, 11vw, 76px); }
  /* One column: the words under the picture, the note under the words, the button last. */
  .site-page .film-caption { grid-template-columns: 1fr; row-gap: 12px; }
  .site-page .film-line { grid-row: auto; }
  .site-page .film-note { text-align: left; margin-top: 0; }
  .site-page .film-toggle { justify-self: start; }
  /* One column: the phone follows the words, in reading order, in the middle of the screen. */
  .site-page .strip.after { grid-template-columns: 1fr; }
  .site-page .strip.after > .after-say,
  .site-page .strip.after > .hero-phone { grid-column: 1; }
  .site-page .strip.after > .hero-phone { justify-self: center; }
  /* The console's phone recording sits where the phone above does: the middle of the screen. */
  .site-page .strip > .screens { justify-self: center; }
  .site-page .strip {
    grid-template-columns: 1fr;
    row-gap: 26px;
  }
  .site-page .strip .section-label,
  .site-page .strip > :not(.section-label) { grid-column: 1; }
  .site-page .steps { gap: 28px; }
}

@media (max-width: 560px) {
  .site-page .top-in { min-height: 72px; }
  .site-page .site-main { padding-block: 32px; }
  .site-page .lede { row-gap: 24px; padding-top: 8px; padding-bottom: 32px; }
  .site-page .lede .page-title { font-size: clamp(44px, 14vw, 62px); }
  .site-page .lede .page-sub { font-size: 17px; }
  .site-page .hero-phone {
    padding: 26px 22px 40px;
    background-size: 36px 2px, 2px 36px, 36px 2px, 2px 36px;
  }
  .site-page .hero-phone::after { font-size: 8px; right: 10px; bottom: 14px; }
  .site-page .steps,
  .site-page .facts { grid-template-columns: 1fr; }
  .site-page .steps li { padding-top: 42px; }
  .site-page .strip > p { font-size: 16px; }
  .site-page .site-foot { margin-top: 20px; }
}

/* ── every public page ─────────────────────────────────────────────────────────────────────── */

.site-page { display: flex; flex-direction: column; min-height: 100%; }
.site-nav { display: flex; gap: var(--space-6); margin-left: auto; font-size: 14px; }
.site-nav a { color: var(--ink-soft); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }

/* ── the landing page ──────────────────────────────────────────────────────────────────────── */

/* THE OPENING. Sized to what it holds rather than to the viewport: a 100vh hero pushes the page
   itself out of the first frame, which is the one a link preview and a skimming reader both get. */
.lede { max-width: 62ch; padding-bottom: var(--space-12); }
.lede .page-title { font-size: clamp(34px, 6vw, 56px); line-height: 1.05; margin: 0 0 var(--space-4); }
.lede .page-sub { color: var(--ink-soft); font-size: calc(17px + var(--ui-text-step, 0px)); margin-bottom: var(--space-8); }
.lede .actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); }
.lede .hint { color: var(--ink-faint); font-size: 13px; }

/* A section is a RULE and what sits under it. The second of the three marks, and the only one the
   body of this page uses — no cards, no tiles, no boxes. */
.strip { border-top: var(--w-rule) solid var(--hair-dk); padding-top: var(--space-6); margin-top: var(--space-12); max-width: 74ch; }
.strip .section-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--space-6); }
.strip > p { max-width: 68ch; }
.strip .hint { color: var(--ink-soft); font-size: 13px; }

/* THREE STEPS, AND THEY ARE NUMBERED BECAUSE THEY HAPPEN IN THAT ORDER. Numbering that encodes
   nothing is decoration; this is a sequence, so the numbers carry something true. */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li { counter-increment: step; position: relative; padding: 0 0 var(--space-6) var(--space-8); }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 2px;
  font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: 13px;
}
.steps h3 { font-size: calc(17px + var(--ui-text-step, 0px)); font-weight: 500; margin: 0 0 var(--space-2); }
.steps p { margin: 0; color: var(--ink-soft); }

/* Four plain facts. A definition list, because that is what they are. */
.facts { margin: 0; }
.facts dt { font-weight: 500; padding-top: var(--space-4); border-top: var(--w-rule) solid var(--hair-dk); }
.facts dt:first-of-type { border-top: 0; padding-top: 0; }
.facts dd { margin: var(--space-2) 0 var(--space-6); color: var(--ink-soft); }

.closing { border-top: var(--w-rule) solid var(--hair-dk); }
.closing .page-title { font-size: clamp(26px, 4vw, 38px); margin: 0 0 var(--space-3); }
.closing .page-sub { color: var(--ink-soft); margin-bottom: var(--space-6); }

@media (max-width: 860px) {
  .strip { margin-top: var(--space-8); }
  .lede { padding-bottom: var(--space-8); }
}

/* THE LEGAL IDENTIFICATION. Who is actually responsible, set apart from the prose around it so
   somebody looking for it can find it without reading. The details come from company.js and a check
   asserts these documents still say what that file says. */
.doc .entity { line-height: 1.7; }
.doc .entity strong { font-weight: 500; }