/*
 * Marketing site. Page-level layout only; everything reusable lives in
 * design/system.css and every colour comes from design/tokens.css.
 */

body { overflow-x: hidden; }
.sr-only { position: absolute; left: -9999px; }
/* The header is what sticks, not the nav inside it: a sticky element only
   sticks within its parent, and the nav's parent is exactly as tall as the nav. */
.site-header { position: sticky; top: 0; z-index: 20; }
.site-header .nav { position: static; }
/* Once the page has scrolled, the header takes a light wash of the brand purple:
   enough to show it has lifted off the page, not so much it competes with it.
   site.js sets `.scrolled`. */
.site-header .nav { transition: background-color var(--motion-slow) var(--motion-ease), border-color var(--motion-slow) var(--motion-ease), box-shadow var(--motion-slow) var(--motion-ease); }
.site-header.scrolled .nav { background: color-mix(in srgb, var(--accent-tint) 88%, transparent); border-bottom-color: color-mix(in srgb, var(--accent-light) 60%, transparent); box-shadow: 0 8px 24px -18px rgba(43, 32, 180, .35); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
@media (prefers-reduced-motion: reduce) { .site-header .nav { transition: none; } }

/* Anchored sections land clear of the sticky header. */
main section[id] { scroll-margin-top: 68px; }

/* --- easing in ------------------------------------------------------------------ */
/* site.js marks what starts below the fold with `.reveal`, then `.in` as it
   scrolls into view: a short rise and fade, siblings a beat apart (--i). It
   moves with `translate`, so anything that also lifts on hover keeps its own
   `transform`. Without the script, or with reduced motion, nothing is hidden. */
.reveal { opacity: 0; translate: 0 22px; transition: opacity 700ms var(--motion-ease) calc(var(--i, 0) * 90ms), translate 700ms var(--motion-ease) calc(var(--i, 0) * 90ms); }
.reveal.in { opacity: 1; translate: none; }
@media print { .reveal { opacity: 1; translate: none; } } /* printing never scrolls anything into view */
/* After a jump to a section, site.js sets `.jumped`: no more easing in, so the section lands whole. */
html.jumped .reveal { opacity: 1; translate: none; transition: none; } /* html: outranks .feat.reveal */
.feat.reveal { transition: opacity 700ms var(--motion-ease) calc(var(--i, 0) * 90ms), translate 700ms var(--motion-ease) calc(var(--i, 0) * 90ms), transform var(--motion-slow) var(--motion-ease), box-shadow var(--motion-slow) var(--motion-ease); }

/* site.js sets `.form-in-view` while the hero's or the closer's address field
   is on screen, so the header's copy of the button steps aside. `visibility`
   takes it out of the tab order too, and it keeps its space, so nothing shifts. */
.site-header [data-copy-address] { transition: opacity var(--motion-base) var(--motion-ease), visibility var(--motion-base); }
.site-header.form-in-view [data-copy-address] { opacity: 0; visibility: hidden; }

/* --- hero --------------------------------------------------------------------- */
/* The words on the left; on the right, the whole idea in one picture. Below
   1100px the two stack, the words centred on top. */
.hero { padding-block: clamp(36px, 5vw, 80px) clamp(40px, 5vw, 80px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(32px, 3.5vw, 56px); align-items: center; }
.hero .copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
.hero h1 { max-width: 12ch; font-size: clamp(38px, 4.4vw, 62px); }
.hero .lede { max-width: 44ch; }
.hero .form { width: min(460px, 100%); }
/* After a copy, what to do with the address. Stays once shown. */
.next { display: flex; flex-direction: column; gap: 6px; margin: -8px 0 0; font-size: 15px; color: var(--body); }
.next[hidden] { display: none; }
.next p { margin: 0; }
.panel .next { margin: -6px 0 0; color: #fff; }
.panel .next > p { font-weight: 500; }
/* Where people stall is inside the mail app, so the three most used say
   where their Forward is. Closed until asked. */
.howto summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--accent-text); }
.howto summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.howto ul { display: grid; gap: 4px; margin: 8px 0 6px; padding: 0; list-style: none; font-size: 15px; line-height: 1.45; text-align: left; }
.howto li { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); column-gap: 8px; }
.howto b { color: var(--ink); font-weight: 600; }
.howto p { font-size: 14px; color: var(--muted); text-align: left; }
.panel .howto summary { color: #fff; }
.panel .howto b { color: #fff; }
.panel .howto ul, .panel .howto p { color: rgba(255,255,255,.82); }
/* How much has been sorted so far, under the headline. site.js fills it in
   from /api/stats and opens it; until then (and without the script, or while
   the totals are small) it takes no room, its negative margin cancelling the
   column's gap. */
.sofar { display: grid; grid-template-rows: 0fr; margin-bottom: -20px; opacity: 0; transition: grid-template-rows var(--motion-slow) var(--motion-ease), margin var(--motion-slow) var(--motion-ease), opacity var(--motion-slow) var(--motion-ease); }
.sofar.on { grid-template-rows: 1fr; margin-bottom: 0; opacity: 1; }
.sofar-card { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); min-height: 0; overflow: hidden; padding: 14px 22px 14px 18px; border: 1px solid color-mix(in srgb, var(--accent-light) 70%, transparent); border-radius: 18px; background: linear-gradient(135deg, var(--accent-tint), color-mix(in srgb, var(--accent-tint) 40%, var(--card))); }
.sofar:not(.on) .sofar-card { padding-block: 0; border-width: 0; }
.sofar-live { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
.sofar-live i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.sofar-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: sofar-ping 2.4s var(--motion-ease) infinite; }
@keyframes sofar-ping { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
.sofar-figs { display: flex; gap: clamp(16px, 2vw, 28px); padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid color-mix(in srgb, var(--accent-light) 70%, transparent); }
.sofar-figs p { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.sofar-figs b { font: 600 clamp(28px, 2.6vw, 38px)/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.sofar-figs span { font-size: 14px; color: var(--muted); }
@media (max-width: 1099px) {
  .sofar-figs p { align-items: center; }
}
@media (max-width: 479px) {
  .sofar-card { flex-direction: column; gap: 10px; padding: 14px 20px; }
  .sofar-live { flex-direction: row; align-items: center; gap: 8px; }
  .sofar-figs { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sofar, .sofar-live i::after { transition: none; animation: none; }
}
/* For anyone not ready to forward: a look at what comes back. */
.peek { display: inline-flex; align-items: center; gap: 6px; margin-top: -6px; font-size: 15px; font-weight: 600; text-decoration: none; }
.peek svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.peek svg { transition: transform var(--motion-slow) var(--motion-ease); }
.peek:hover { text-decoration: underline; text-underline-offset: 3px; }
.peek:hover svg { transform: translateY(3px); }
@media (max-width: 1099px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .hero .copy { align-items: center; text-align: center; }
  .hero h1 { max-width: 22ch; }
  .hero .lede { max-width: 56ch; }
}

/* The demo: three short scenes on a loop, played by reel.js in the property
   page's own styles. Forwarded attachments renamed and sorted, a portal link
   opened and its files fetched, then a later email filling the same page, what
   is still missing, and the zip. The stage is a fixed design size scaled to
   its box, so nothing reflows mid-scene; below 560px reel.js switches it to a
   taller layout, the email above the page. The bar under it is the progress
   and the way to skip; the button pauses. Without the script the stage stays
   hidden and a still of the first scene shows instead. */
.reel { margin: 0; width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.reel-stage { position: relative; width: 100%; aspect-ratio: 720 / 560; }
.reel.tall .reel-stage { aspect-ratio: 380 / 770; }
.reel:not(.on) .reel-stage, .reel:not(.on) .reel-bar { display: none; }
.reel-poster { display: block; width: 100%; height: auto; }
.reel-fit { position: absolute; left: 0; top: 0; width: 720px; height: 560px; transform-origin: 0 0; text-align: left; }
.reel.tall .reel-fit { width: 380px; height: 770px; }

.r-cap { position: absolute; left: 0; right: 0; top: 0; height: 36px; }
.r-cap span { position: absolute; inset: 0; text-align: center; font: 600 21px/1.25 var(--font-display); letter-spacing: -.01em; color: var(--ink); opacity: 0; text-wrap: balance; }
.r-cap em { font-style: normal; color: var(--accent-text); }
.reel.tall .r-cap { height: 48px; }
.reel.tall .r-cap span { font-size: 18px; }

/* The email, and the Forward it goes through. */
.r-mail { position: absolute; left: 0; top: 60px; width: 296px; padding: 14px 16px 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-3); transform-origin: 50% 0; opacity: 0; }
.reel.tall .r-mail { right: 0; width: auto; top: 56px; z-index: 2; } /* over the waiting page until it shrinks clear */
.r-top { display: flex; align-items: center; gap: 9px; }
.r-top .avatar { width: 30px; height: 30px; font-size: 11px; }
.r-top .avatar.a2 { background: var(--ink); color: var(--bg); }
.r-top .avatar.a3 { background: var(--muted); }
.r-who { display: flex; flex-direction: column; font-size: 12px; line-height: 1.3; color: var(--muted); }
.r-who b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.r-subj { margin-top: 10px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.r-body { margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--body); }
.r-att { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.r-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); font-size: 12px; color: var(--body); white-space: nowrap; }
.r-chip svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.r-chip.gone { opacity: .35; }
.r-link { width: 100%; border-style: dashed; border-color: var(--accent-light); background: var(--card); color: var(--accent-text); font-weight: 600; }
.r-link svg { stroke: var(--accent-text); }
.r-lt { display: inline-flex; align-items: center; gap: 5px; }
.r-link .r-busy, .r-link .r-found, .r-link.busy .r-lt, .r-link.found .r-lt { display: none; }
.r-link.busy .r-busy, .r-link.found .r-found { display: inline-flex; }
.r-found svg { stroke-width: 2.4; }
.r-spin { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--accent-light); border-top-color: var(--accent); border-radius: 50%; }
.r-foot { position: relative; height: 52px; margin: 14px -16px 0; border-top: 1px solid var(--line); }
.r-act, .r-cmp { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.r-cmp { opacity: 0; }
.r-btn { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.r-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.r-btn.r-pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.r-btn.r-pri.done { background: var(--accent-hover); border-color: var(--accent-hover); }
.r-to { display: flex; align-items: center; flex: 1; min-width: 0; height: 30px; padding: 0 10px; border: 1.5px solid var(--accent-light); border-radius: 8px; overflow: hidden; font-size: 13px; color: var(--ink); white-space: nowrap; }
.r-tl { margin-right: 7px; color: var(--muted); }
.r-caret { flex: none; width: 1.5px; height: 15px; margin-left: 1px; background: var(--accent); }

/* The page, and what slides up over it. */
.r-page { position: absolute; left: 312px; top: 44px; width: 408px; opacity: 0; }
.reel.tall .r-page { left: 0; width: 380px; }
.r-page .st { padding: 6px 10px; }
.r-page .ti { padding: 4px 6px; }
.r-over { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-3); opacity: 0; }
.r-oh { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--body); }
.r-oh b { color: var(--ink); font-weight: 600; }
.r-zb { width: 18px; height: 22px; font-size: 6px; }
.r-ok { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent-text); }
.r-ok svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.r-folders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin-top: 10px; }
.r-folder { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); }
.r-folder svg { width: 16px; height: 16px; flex: none; fill: var(--accent-tint); stroke: var(--accent-text); stroke-width: 1.5; stroke-linejoin: round; }
.r-folder em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--muted); }

/* A document on its way: the attachment's chip turning into the page's tile. */
.r-fly { position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; }
.r-fly .r-raw { position: absolute; left: 0; top: 0; bottom: 0; height: auto; min-width: 100%; }
.r-fly .r-clean { position: absolute; inset: 0; }
.r-fly.flying > * { box-shadow: var(--shadow-2); }

.r-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.r-cursor path { fill: #15191E; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }

.r-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; opacity: 0; color: var(--ink); }
.r-end .wm { width: auto; height: 60px; }
.r-end p { margin: 0; max-width: 18ch; font: 600 26px/1.2 var(--font-display); letter-spacing: -.01em; text-align: center; text-wrap: balance; }

/* The progress bar: one segment a scene, each a button to jump to it. */
.reel-bar { display: flex; align-items: center; gap: 14px; }
.reel-toggle { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; }
.reel-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.reel-toggle .play, .reel-toggle.paused .pause { display: none; }
.reel-toggle.paused .play { display: block; }
.reel-steps { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.reel-steps button { display: flex; flex-direction: column; gap: 7px; width: 100%; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); text-align: left; cursor: pointer; }
.reel-steps button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reel-steps button[aria-current] { color: var(--ink); font-weight: 600; }
.reel-steps i { display: block; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.reel-steps b { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); }
.reel-steps .short, .reel.tall .reel-steps .long { display: none; }
.reel.tall .reel-steps .short { display: inline; }
.reel-toggle:focus-visible, .reel-steps button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The page in the demo: a browser window drawn in the property page's own styles. */
.window { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-3); overflow: hidden; text-align: left; }
.chrome { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.chrome span { margin-left: 10px; flex: 1; min-width: 0; padding: 3px 10px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pg-h1 { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); line-height: 1.2; }
.pg-h1 span { font-family: var(--font-text); font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.pg-dl { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 12px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pg-dl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* The count leads, as on the page; the key documents still missing under it.
   Three lines are held for it whatever it says, so nothing below moves. */
.pg-tally { display: flex; align-items: flex-start; gap: 12px; }
.pg-count { flex: none; margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.2; }
.pg-count b { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.pg-keys { --hl: 0; flex: 1; min-width: 0; height: 4.05em; margin: 0 -6px; padding: 0 6px; border-radius: 6px; background: color-mix(in srgb, var(--accent-tint) calc(var(--hl) * 100%), transparent); font-size: 11.5px; line-height: 1.35; color: var(--body); overflow: hidden; }
.pg-keys svg { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pg-ask { display: inline-block; margin-left: 6px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pg-ask svg { stroke: currentColor; }
.board { flex: 1; border: 1px solid var(--line); border-radius: var(--radius-md); }
.st { display: grid; gap: 5px; padding: 7px 10px; }
.st + .st { border-top: 1px solid var(--line); }
.st-h { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; }
.st-h .ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent-tint); color: var(--accent-text); flex: none; }
.st-h svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-h em { font-style: normal; font-size: 11px; line-height: 17px; min-width: 17px; padding: 0 5px; border-radius: 99px; background: var(--accent-tint); color: var(--accent-text); text-align: center; }
.tl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.ti { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px; border: 1px solid var(--accent-light); background: var(--accent-tint); border-radius: var(--radius-sm); }
.fb { position: relative; display: grid; align-content: end; justify-items: center; flex: none; width: 16px; height: 20px; padding-bottom: 2px; border-radius: 3px; background: var(--accent); color: var(--on-accent); font-size: 5.5px; font-weight: 700; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); }
.fb::before { content: ""; position: absolute; top: 0; right: 0; width: 6px; height: 6px; background: var(--accent-light); border-bottom-left-radius: 1.5px; }
.tn { display: flex; flex-direction: column; min-width: 0; font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.tn { overflow-wrap: break-word; hyphens: auto; }
.tn small { font-size: 11px; font-weight: 400; color: var(--muted); }
/* The address drops under the street. */
.pg-head { flex-wrap: wrap; align-items: flex-start; }
.pg-h1 span { display: block; margin: 0; }

/* --- portals row ------------------------------------------------------------------ */
/* A quiet strip under the hero: each portal's own logo, all in one grey. The
   logos are the brands' published SVGs (site/assets/logo-*.svg), painted
   through a CSS mask so they take the theme's grey. PropertyFiles and Eagle
   only publish raster logos, so theirs are set in type the way the originals
   are. Heights are tuned by eye so no one logo shouts over the others. */
.logos { padding-block: clamp(28px, 4vw, 48px) clamp(36px, 5vw, 56px); border-block: 1px solid var(--line); }
.logos .wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.logos-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.logos .eyebrow { font-size: 14px; }
.logos h2 { max-width: 1000px; font: 500 clamp(17px, 1.7vw, 20px)/1.4 var(--font-display); color: var(--muted); letter-spacing: 0; text-wrap: balance; }
.marks { --mark: color-mix(in srgb, var(--ink) 50%, var(--bg)); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 32px; width: 100%; max-width: 1000px; align-items: center; }
.marks li { display: flex; align-items: center; justify-content: center; height: 40px; min-width: 0; color: var(--mark); white-space: nowrap; line-height: 1; transition: color var(--motion-slow) var(--motion-ease); }
.marks li:hover { color: color-mix(in srgb, var(--ink) 80%, var(--bg)); }
.marks .logo { display: block; flex: none; max-width: 100%; height: var(--h, 24px); aspect-ratio: var(--ar); background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.marks .wm { display: inline-flex; align-items: center; }
.m-vault { --src: url(/assets/logo-vaultre.svg); --ar: 3.04; --h: 30px; }
.m-psuite { --src: url(/assets/logo-propertysuite.svg); --ar: 4.75; --h: 28px; }
.m-raywhite { --src: url(/assets/logo-raywhite.svg); --ar: 5.22; --h: 22px; }
.m-harcourts { --src: url(/assets/logo-harcourts.svg); --ar: 4.63; --h: 25px; }
.m-bayleys { --src: url(/assets/logo-bayleys.svg); --ar: 3.91; --h: 28px; }
.m-tallpoppy { --src: url(/assets/logo-tallpoppy.svg); --ar: 4.71; --h: 26px; }
.m-agentsend { --src: url(/assets/logo-agentsend.svg); --ar: 5.69; --h: 23px; }
.m-heyzine { --src: url(/assets/logo-heyzine.svg); --ar: 3.05; --h: 32px; }
.m-gdrive { --src: url(/assets/logo-gdrive.svg); --ar: 1.14; --h: 20px; }
.m-gdocs { --src: url(/assets/logo-gdocs.svg); --ar: .73; --h: 22px; }
/* PropertyFiles: one word, "Property" bold, in a Helvetica-like grotesque. */
.m-pfiles .wm { display: inline; font: 400 19px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.01em; }
.m-pfiles b { font-weight: 700; }
/* Eagle, now MRI's: a small "mri" over a large lowercase "eagle crm", like Vault CRM beside it. */
.m-eagle .wm { flex-direction: column; align-items: flex-start; text-align: left; font: 600 21px/.9 "Avenir Next", Avenir, "Century Gothic", system-ui, sans-serif; letter-spacing: -.02em; }
.m-eagle small { font-size: 10px; letter-spacing: 0; margin-bottom: 1px; }
.m-gdrive .wm, .m-gdocs .wm { gap: 8px; font: 400 18px/1 "Product Sans", "Google Sans", "Helvetica Neue", Arial, sans-serif; }
@media (max-width: 960px) { .marks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .marks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 14px; }
  .marks li { height: 32px; }
  .marks .logo { height: calc(var(--h, 24px) * .72); }
  .m-pfiles .wm { font-size: 14px; }
  .m-eagle .wm { font-size: 15.5px; } .m-eagle small { font-size: 8px; }
  .m-gdrive .wm, .m-gdocs .wm { gap: 5px; font-size: 13px; }
}

.avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-mid), var(--accent)); color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* --- how it works: a flow of three ------------------------------------------ */
/* The numbers lead, joined by a dashed line on a wide screen so the three read
   as one flow. On a phone they run down the page, each number beside its heading. */
.flow { --gap: clamp(28px, 4vw, 56px); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.flow .step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "num num" "h h" "p p"; row-gap: 14px; align-content: start; min-width: 0; }
.flow .num { grid-area: num; position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 20px/1 var(--font-display); box-shadow: 0 0 0 6px var(--bg-soft); }
.flow .step:not(:last-child)::after { content: ""; position: absolute; top: 23px; left: 64px; right: calc(-1 * var(--gap) + 8px); height: 2px; background: repeating-linear-gradient(90deg, var(--accent-light) 0 6px, transparent 6px 12px); }
.flow h3 { grid-area: h; margin: 4px 0 0; font-size: clamp(22px, 2vw, 26px); font-weight: 600; letter-spacing: -.01em; }
.flow p { grid-area: p; color: var(--body); font-size: 16px; line-height: 1.6; }
/* The address, as a pill: it's the one thing in the section to act on. */
.addr-pill { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px 1px 8px; border: 1px solid var(--accent-light); border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent-text); font-weight: 600; font-size: .94em; line-height: 1.6; white-space: nowrap; vertical-align: baseline; }
/* The address in running text: a click copies it, and "Copied" sits over it
   for the hold rather than beside it, so the line doesn't reflow. */
.is-copyable { position: relative; cursor: pointer; white-space: nowrap; }
a.is-copyable { border-radius: 4px; }
.addr-pill.is-copyable:hover { border-color: var(--accent); }
.is-copyable.done::after { content: "Copied"; position: absolute; inset: -1px; display: flex; align-items: center; justify-content: center; border-radius: inherit; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.addr-pill svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .flow .step { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "num h" ". p"; column-gap: 16px; row-gap: 6px; }
  .flow .step:not(:last-child)::after { top: 52px; bottom: -26px; left: 21px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--accent-light) 0 6px, transparent 6px 12px); }
  .flow .num { width: 44px; height: 44px; font-size: 19px; }
  .flow h3 { align-self: center; margin: 0; }
}

/* --- the page you get: real screenshots, desktop left, phone right ------------- */
/* The desktop shot sits left and stays mostly clear; the phone stands in
   front of its right edge, overlapping only a strip. On a phone, the phone shot
   alone, with a few callouts pinned to its edges. */
.shots { position: relative; margin: 0; padding-right: clamp(0px, 17vw, 220px); }
.browser { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-3); }
.browser-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.browser-bar span { margin-left: 14px; flex: 0 1 320px; height: 22px; border-radius: 6px; background: var(--card); color: var(--muted); font-size: 12.5px; line-height: 22px; padding-inline: 10px; overflow: hidden; white-space: nowrap; }
.shots img { display: block; width: 100%; height: auto; }
.handset { position: absolute; right: 0; top: clamp(24px, 5vw, 64px); width: clamp(170px, 22%, 260px); padding: 8px; border-radius: 40px; background: #0B0F1A; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -20px rgba(15, 18, 40, .45), var(--shadow-3); }
.handset img { border-radius: 31px; }
/* A few callouts hang off the phone's left edge, over the desktop shot. */
.callout { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--accent-light); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); box-shadow: var(--shadow-3); font-size: 13px; font-weight: 600; white-space: nowrap; }
.callout b { color: var(--accent-text); font-size: 15px; }
.callout svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.callout.c1 { top: 15%; right: 88%; }
.callout.c2 { top: max(26%, calc(15% + 48px)); right: 94%; } /* never on top of c1 */
.callout.c3 { bottom: 16%; right: 86%; }
.shots figcaption { margin-top: 20px; font-size: 15px; color: var(--muted); text-align: center; }
.shots figcaption a { color: var(--accent-text); font-weight: 600; }
@media (max-width: 720px) {
  .shots { padding: 0; }
  .browser { display: none; } /* a phone reads the phone shot, full size */
  .handset { position: relative; top: auto; right: auto; width: min(290px, 76%); margin-inline: auto; }
  /* There is no room beside the phone, and over it they hid what they
     named, so they sit under it: one, then two side by side. */
  .handset { margin-bottom: 120px; }
  .callout.c1 { top: calc(100% + 16px); left: 50%; right: auto; transform: translateX(-50%); }
  .callout.c2 { top: calc(100% + 64px); right: calc(50% + 4px); }
  .callout.c3 { top: calc(100% + 64px); bottom: auto; left: calc(50% + 4px); right: auto; }
}

/* --- questions --------------------------------------------------------------- */
/* What stops people forwarding a LIM to an address they found a minute ago,
   answered from the privacy page and the terms. Closed until asked. The heading
   and an at-a-glance card sit on the left and stay put while the answers open. */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 8px; }
.faq-side .sect-head { margin-bottom: 20px; }
.faq-art { display: flex; flex-direction: column; gap: 18px; max-width: 380px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px, var(--accent-tint); }
.fa-lock { display: flex; align-items: center; gap: 12px; }
.fa-shield { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 22px -12px rgba(43, 32, 180, .7); }
.fa-shield svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fa-url { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card); box-shadow: var(--shadow-1); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-url svg, .fa-ic svg, .q-ic svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fa-url svg { color: var(--accent-text); }
.fa-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fa-facts li { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-1); font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.fa-facts li > span:last-child { display: flex; flex-direction: column; }
.fa-facts b { font: 600 16px/1.2 var(--font-display); color: var(--ink); }
.fa-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-tint); color: var(--accent-text); }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; gap: 14px; padding: 18px 0; cursor: pointer; list-style: none; font: 600 clamp(17px, 1.6vw, 19px)/1.35 var(--font-display); color: var(--ink); transition: color var(--motion-base) var(--motion-ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq .q-t { flex: 1; }
.q-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-tint); color: var(--accent-text); transition: background-color var(--motion-slow) var(--motion-ease), color var(--motion-slow) var(--motion-ease); }
.q-ic svg { width: 18px; height: 18px; }
.faq details[open] .q-ic, .faq summary:hover .q-ic { background: var(--accent); color: var(--on-accent); }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: translateY(-3px) rotate(45deg); transition: transform var(--motion-slow) var(--motion-ease); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq summary:hover { color: var(--accent-text); }
.faq details p { margin: -2px 0 22px 50px; max-width: 64ch; color: var(--body); font-size: 16px; line-height: 1.6; }
/* The answer slides open where the browser can animate to its natural height. */
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--motion-slow) var(--motion-ease), content-visibility var(--motion-slow) allow-discrete; }
.faq details[open]::details-content { block-size: auto; block-size: calc-size(auto, size); }
@media (max-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .faq-side { position: static; }
  .faq-art { display: none; } /* the answers carry it; on a phone the card is only more scroll */
}
@media (max-width: 600px) { .faq details p { margin-left: 0; } .q-ic { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .faq summary::after, .q-ic { transition: none; } .faq details::details-content { transition: none; } }

/* --- share: the question and the buttons, beside the text you'd send ------- */
/* Its own full-width grey band, a dot grid fading in toward the right. On the
   right, the conversation the buttons start: a friend drowning in attachments,
   the reply with the address and a link preview. On a narrow screen the thread
   drops under the buttons. */
.section.share-sect { position: relative; overflow: hidden; background: radial-gradient(60% 120% at 100% 100%, var(--accent-tint), transparent 70%), var(--bg-soft); }
.share-sect::before { content: ""; position: absolute; inset: 0; background: radial-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); pointer-events: none; }
.share-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: center; gap: 32px clamp(32px, 6vw, 96px); }
.share-copy { position: relative; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.share-card .sect-head { margin: 0; gap: 10px; }
.share-card h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.02em; }
.share-card .lede { font-size: 17px; color: var(--body); }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-row .btn { gap: 8px; background: var(--card); box-shadow: var(--shadow-1); }
.share-row .btn { transition: border-color var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease); }
.share-row .btn:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.share-row .btn svg { color: var(--accent-text); }
.share-row .btn[hidden] { display: none; }
.share-row .btn.copy > span { gap: 8px; }

.chat { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 16px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-3); font-family: var(--font-system); font-size: 15px; line-height: 1.35; }
.bub { max-width: 82%; margin: 0; padding: 9px 13px; border-radius: 18px; }
.bub p { margin: 0; }
.bub.in { align-self: flex-start; background: var(--bg-soft); color: var(--ink); border-bottom-left-radius: 6px; }
.bub.out { align-self: flex-end; display: flex; flex-direction: column; gap: 9px; padding-bottom: 11px; background: #4B3DF5; color: #fff; border-bottom-right-radius: 6px; }
.bub.out b { font-weight: 600; }
.bub-link { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.14); font-size: 12.5px; color: rgba(255,255,255,.75); }
.bub-link > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.bub-link b { color: #fff; font-size: 13px; }
.bub-link .mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: #070B1A; }
@media (max-width: 860px) {
  .share-card { grid-template-columns: minmax(0, 1fr); }
  .chat { max-width: 400px; }
}

/* Feature cards: a little working example of the feature on top, then the
   icon, the name and a sentence. The examples are drawn in the page's own
   chips, so they theme with it. */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feats { grid-template-columns: 1fr; gap: 12px; } }
/* Each card takes its rows from the grid, so a heading that wraps to two lines
   pushes its whole row down and the sentences under it still start level. */
.feats > .feat { grid-row: span 3; grid-template-rows: subgrid; }
.feat { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "demo demo" "ic h" "p p"; column-gap: 12px; row-gap: 10px; align-content: start; min-width: 0; padding: 14px 14px 24px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform var(--motion-slow) var(--motion-ease), box-shadow var(--motion-slow) var(--motion-ease); }
.feat:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.feat .demo { grid-area: demo; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 6px; height: 104px; margin-bottom: 6px; padding: 12px; border-radius: 12px; background: radial-gradient(color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px, var(--accent-tint); overflow: hidden; }
.feat .ic { grid-area: ic; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; margin-left: 10px; }
.feat .ic svg { width: 22px; height: 22px; }
.feat h3 { grid-area: h; align-self: center; margin-left: 10px; font-size: 18px; font-weight: 600; }
.feat > p { grid-area: p; padding-inline: 10px; font-size: 15px; line-height: 1.5; color: var(--body); }
.demo .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.demo .chip.on { border-color: var(--accent-light); color: var(--accent-text); }
.demo svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.demo .plus { font-weight: 700; color: var(--accent-text); }
.mini-f { display: inline-grid; place-items: end center; width: 16px; height: 20px; padding-bottom: 2px; border-radius: 2px; background: var(--accent); color: var(--on-accent); font-size: 5.5px; font-weight: 700; clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%); }
.mini-f.z { background: var(--muted); color: #fff; }
.rename s { font: 12px var(--font-mono, ui-monospace, monospace); color: var(--muted); }
.rename .arr { color: var(--accent-text); }
.tally { flex-direction: column; gap: 6px; }
.tally .n { font-size: 13px; color: var(--muted); line-height: 1.1; } .tally .n b { font: 600 22px var(--font-display); color: var(--ink); }
.tally .miss { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--body); text-align: center; }
.tally .miss svg { width: 13px; height: 13px; stroke: var(--muted); }
.tally .ask { padding-block: 4px; font-size: 12px; }
.props { flex-direction: column; gap: 4px; }
.feat .demo.props { padding-block: 6px; }
.props .chip { padding-block: 4px; }
.props .chip:not(.on) { color: var(--muted); }
.tree { flex-direction: column; align-items: flex-start; gap: 3px; width: auto; font-size: 12.5px; }
.tree .zip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.tree .dir { position: relative; margin-left: 22px; padding-left: 20px; color: var(--body); }
.tree .dir::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 10px; margin-top: -5px; border-radius: 2px; background: var(--accent-mid); }
.tree .dir::after { content: ""; position: absolute; left: -12px; top: -4px; width: 8px; height: 12px; border-left: 1px solid var(--accent-light); border-bottom: 1px solid var(--accent-light); }
.key { flex-direction: column; gap: 8px; }
.feat .demo:is(.tally, .props, .tree, .key) { flex-wrap: nowrap; }
/* On a phone six cards stacked were the longest stretch of the page, so they
   become a list: no examples, no card, the icon beside the name and sentence. */
@media (max-width: 600px) {
  .feats { gap: 0; border-top: 1px solid var(--line); }
  .feat .demo { display: none; }
  .feats > .feat { grid-row: auto; grid-template-rows: none; grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "ic h" "ic p"; column-gap: 14px; row-gap: 4px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
  .feat:hover { transform: none; box-shadow: none; }
  .feat .ic { width: 36px; height: 36px; margin-left: 0; border-radius: 10px; align-self: start; }
  .feat .ic svg { width: 19px; height: 19px; }
  .feat h3 { margin-left: 0; font-size: 17px; align-self: start; }
  .feat > p { padding-inline: 0; font-size: 15px; }
}

/* The closing band: one deep-blue panel, the words and the address on the
   left, the reply you get back on the right. */
.panel { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 40px; padding: clamp(28px, 5vw, 64px); border-radius: 28px; overflow: hidden; color: #fff; background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.18), transparent 55%), linear-gradient(135deg, #5A4DFF 0%, #4B3DF5 45%, #2F23B8 100%); box-shadow: 0 30px 60px -30px rgba(43, 32, 180, .6); }
.panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.5px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); pointer-events: none; }
.panel-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.panel h2 { color: #fff; max-width: 16ch; }
.panel .lede { color: rgba(255,255,255,.82); max-width: 44ch; }
.panel .form { width: min(460px, 100%); border-color: transparent; background: #fff; }
.panel .form input { color: #15191E; }
.panel .form .btn.dark { background: #15191E; color: #fff; }
.panel .form .copied { color: #4B3DF5; }
.panel .fine { font-size: 15px; color: rgba(255,255,255,.72); }
/* The reply: an email card, tilted. The inbox row, then the email itself. */
.reply { position: relative; justify-self: center; width: min(320px, 100%); padding: 24px 12px; }
.reply-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: #fff; color: #15191E; box-shadow: 0 24px 50px -18px rgba(10, 6, 60, .55); transform: rotate(2deg); }
.reply-top { display: flex; align-items: center; gap: 10px; }
.reply-top .mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #4B3DF5; }
.reply-top .who { display: flex; justify-content: space-between; flex: 1; font-size: 13px; color: #6E7681; }
.reply-top .who b { color: #15191E; font-weight: 600; }
.reply-subj { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 600; line-height: 1.3; }
/* Inside: the email as it arrives, drawn from src/email/templates.ts. The grey
   page, the wordmark, the white panel with the address, the one button, then
   the first section's file rows, cut off to say there is more. Email clients
   get the system font, so this does too. */
.reply-mail { display: flex; flex-direction: column; gap: 8px; margin: 2px -16px -16px; padding: 12px 12px 0; border-radius: 0 0 16px 16px; background: #F3F3F7; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; height: 330px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.rm-brand { padding: 0 2px; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.rm-panel { border: 1px solid #E3E5EA; border-radius: 8px; background: #fff; }
.rm-band { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 13px 14px; }
.rm-band + .rm-band { border-top: 1px solid #E3E5EA; }
.rm-h { font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.rm-sub { margin-top: -3px; font-size: 13px; color: #6E7681; }
.rm-p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: #4B525C; }
.rm-p b { color: #15191E; font-weight: 600; }
.rm-btn { margin-top: 5px; padding: 7px 13px; border-radius: 5px; background: #4B3DF5; color: #fff; font-size: 13px; font-weight: 600; }
.rm-sect { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.rm-sect i { padding: 0 6px; border-radius: 999px; background: #EFEDFF; color: #3A2ED0; font-style: normal; font-size: 13px; line-height: 18px; }
.rm-file { display: flex; align-items: flex-start; gap: 9px; align-self: stretch; padding: 7px 9px; border: 1px solid #E4E1FF; border-radius: 5px; background: #EFEDFF; }
.rm-f { display: grid; place-items: end center; flex: none; width: 21px; height: 26px; padding-bottom: 4px; box-sizing: border-box; border-radius: 3px; background: #4B3DF5; color: #fff; font-size: 7px; font-weight: 700; letter-spacing: 0.03em; line-height: 1; }
.rm-file > span:last-child { display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; color: #6E7681; }
.rm-file b { color: #15191E; font-weight: 600; }
@media (max-width: 860px) {
  .panel { grid-template-columns: minmax(0, 1fr); gap: 8px; border-radius: 22px; }
  .panel::before { -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000); mask-image: linear-gradient(180deg, transparent 40%, #000); }
  .reply { width: min(300px, 92%); }
}

/* --- footer ------------------------------------------------------------------------- */
/* The design system's dark footer: what Unpack is and its address, three
   columns of links, then the credits line. */
.footer .brand { color: var(--on-dark); }
.footer .about p { margin: 14px 0 0; max-width: 36ch; line-height: 1.55; }
.footer .about .addr { color: var(--on-dark); font-weight: 600; }
.footer .credits { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; }
/* Below 760px what Unpack is spans the top and the links sit two to a row, phones included. */
@media (max-width: 760px) { .footer .cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .footer .about { grid-column: 1 / -1; } }

/* Where the address and its button stack, the "Copied" note would take a
   line of its own; it sits at the end of the address instead. */
@media (max-width: 420px) {
  .form { position: relative; row-gap: 6px; }
  .form .copied { position: absolute; right: 16px; top: 15px; }
}