/* The inner pages: About, Features, Contact.

   These three were the site's weakest documents — a narrow column of prose, a
   grid of nine identical cards, and three cards carrying a phone number. The
   homepage carries the site's design and they carried none of it.

   What is here is layout only. Every colour, size and duration comes from
   tokens.css, every card is the .card from components.css, and every heading
   goes through display_lines() so the existing reveal owns it. Nothing in this
   file draws a screen the product does not have — see agents.md §4c. The
   visuals are the DOMAIN (a unit's address, a company's mark), never the app.

   Sections:
     1. Shared page head
     2. About  — hierarchy ladder, tenets, the maker panel
     3. Features — the lead feature, the three groups
     4. Contact — channels, the honest notes */

/* ==================================================== 1. Shared page head */

/* Heading and lede on the left, one object on the right. On a phone the object
   follows the words rather than sitting above them: the heading is the reason
   the reader stayed. */
.page-head {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .page-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
/* The copy column is its own size container. Without this the display heading
   inside it is sized in cqi against the .container--wide two columns out, so
   it is set for twice the width it actually has and runs out of its column. */
.page-head__copy { container-type: inline-size; }
.page-head__lede { margin-top: var(--space-8); max-width: 54ch; }
.page-head__meta {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.page-head__meta li { display: flex; align-items: center; gap: var(--space-2); }
/* The separator trails its own item rather than leading the next one, so a
   line that wraps never starts with an orphaned dot. */
.page-head__meta li:not(:last-child)::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-4);
  margin-left: var(--space-3);
}
.page-head__meta strong { color: var(--ink-2); font-weight: 500; }

/* ============================================================== 2. ABOUT */

/* ------------------------------------------------------- the unit address */

/* Project > Building/Wing > Floor > Unit, indented one step at a time, which
   is the whole of a builder's inventory said once. It is not a screen and does
   not pretend to be one: no chrome, no window, no controls — four lines of
   type on the page ground, ending in the address the app actually prints. */
.ladder {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(97, 95, 255, 0.10), transparent 60%),
    var(--surface);
}
.ladder__step {
  --depth: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
  margin-left: calc(var(--depth) * clamp(0.75rem, 2.4vw, 1.5rem));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  border: 1px solid var(--line);
}
/* The elbow that ties a step to the one above it. */
.ladder__step::before {
  content: '';
  position: absolute;
  left: calc(clamp(0.75rem, 2.4vw, 1.5rem) * -0.5);
  top: -0.6rem;
  bottom: 50%;
  width: 1px;
  background: var(--line-strong);
}
.ladder__step:first-child::before { display: none; }
.ladder__step::after {
  content: '';
  position: absolute;
  left: calc(clamp(0.75rem, 2.4vw, 1.5rem) * -0.5);
  top: 50%;
  width: calc(clamp(0.75rem, 2.4vw, 1.5rem) * 0.5);
  height: 1px;
  background: var(--line-strong);
}
.ladder__step:first-child::after { display: none; }

.ladder__level { color: var(--ink-3); font-size: var(--text-sm); }
.ladder__name { color: var(--ink); font-weight: 600; }

.ladder__step--unit { border-color: var(--brand-line); background: var(--brand-wash); }
.ladder__step--unit .ladder__name { color: var(--brand-ink); }

.ladder__foot {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.ladder__addr {
  color: var(--ink);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-lift);
}

/* ------------------------------------------------------- two-column prose */

/* A 64ch column of body copy alone in a 94rem container reads as a leftover.
   Two columns of it fill the measure and read as a spread. */
.cols { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 58rem) {
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cols p { color: var(--ink-2); max-width: 54ch; }
.cols p + p { margin-top: var(--space-5); }

/* --------------------------------------------------------------- tenets */

/* Three tests the product is measured against. The numeral is decoration and
   is aria-hidden in the markup; the heading carries the meaning. */
.tenets { display: grid; gap: var(--space-4); margin-top: clamp(3rem, 7vw, 5rem); }
@media (min-width: 58rem) {
  .tenets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tenet { display: grid; align-content: start; gap: var(--space-4); }
.tenet__no {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 92, 'wght' 700;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--line-bright);
}
.tenet__title { font-size: var(--text-lg); font-weight: 600; color: var(--ink); }
.tenet__text { color: var(--ink-2); font-size: var(--text-sm); line-height: var(--leading-snug); }

/* ----------------------------------------------------------- the maker */

/* Where PropCircle is credited to the company that builds it. The mark is
   Ertekaaz's, not PropCircle's, so it is given its own ground and its own
   room rather than being set beside the product's own lockup. */
.maker {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
  align-items: stretch;
}
@media (min-width: 62rem) {
  .maker { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
/* The lockup as the company draws it: the mark above the words, centred under
   it. Not the mark and the wordmark set side by side — that is a lockup we
   invented, and it is not ours to invent. */
.maker__logo {
  display: grid;
  place-items: center;
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 62rem) {
  .maker__logo {
    padding-bottom: 0;
    padding-right: clamp(1.5rem, 4vw, 3rem);
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
}
.maker__lockup { width: auto; height: clamp(8rem, 17vw, 13rem); opacity: 0.94; }

.maker__body { display: grid; gap: var(--space-6); align-content: center; }
.maker__body p { color: var(--ink-2); }
.maker__legal {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--ink-3);
}
/* Baseline, not stretch. A .link carries padding-block to leave room for its
   underline rule, and under the default `stretch` that padding pushed the
   value's text below the label sitting next to it. */
.maker__legal div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}
.maker__legal dt { color: var(--ink-4); min-width: 7rem; }
.maker__legal dd { color: var(--ink-2); }

/* =========================================================== 3. FEATURES */

/* ------------------------------------------------------- the lead feature */

/* The dashboard, given the room the other eight share between them, because it
   is the one a builder opens first. The phone is the real screenshot in the
   real frame — the only depiction of the software the site allows. */
.lead-feature {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
  border-color: var(--line-strong);
  background:
    radial-gradient(90% 80% at 15% 0%, rgba(97, 95, 255, 0.14), transparent 62%),
    var(--surface);
  container-type: inline-size;
}
@media (min-width: 64rem) {
  /* The machine is the hero of this panel, so it takes the larger share and
     runs out past the panel's right padding to the edge of the rounding. */
  .lead-feature {
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
    padding-right: 0;
  }
  .lead-feature__device { margin-right: calc(clamp(1.75rem, 4.5vw, 3.5rem) * -0.2); }
}
.lead-feature__body { display: grid; gap: var(--space-6); justify-items: start; container-type: inline-size; }
.lead-feature__title { font-size: clamp(1.7rem, 7cqi, 2.6rem); font-weight: 600; }
.lead-feature__text { color: var(--ink-2); max-width: 42ch; }

/* A desk tool on a desk machine, and the machine comes with its screen already
   on it — nothing to letterbox and nothing to pin to the top, because the shot
   is the desktop dashboard at its own proportions. */
.lead-feature__device { justify-self: end; width: 100%; }
.lead-feature__device .device--mac { max-width: none; }

/* ---------------------------------------------------------- the groups */

/* Eight features in three groups, named for what the reader is trying to find
   out rather than for the part of the app they live in. */
.grp + .grp { margin-top: clamp(3rem, 7vw, 5.5rem); }

/* The name and a rule under it. It had a sub-lead beside it and that was one
   sentence too many: the group's cards say the same thing with examples. */
.grp__head {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.grp__cards { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) {
  .grp__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
  .grp__cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A card here is the shared .card; only the internals are set. */
.fcard { display: grid; align-content: start; gap: var(--space-4); }

/* ============================================================ 4. CONTACT */

.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 64rem) {
  .contact-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
}

/* Each channel is one large target with the address set as the thing it is —
   something to be read off a screen and dialled, not a caption under a title. */
.channels { display: grid; gap: var(--space-4); }
.channel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.channel:hover {
  border-color: var(--brand-line);
  background: var(--surface-1);
  transform: translateY(-2px);
}
.channel__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--brand-lift);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.channel__icon .icon { width: 1.25rem; height: 1.25rem; }
.channel:hover .channel__icon { background: var(--brand); color: #fff; }

.channel__label { color: var(--ink-3); font-size: var(--text-sm); }
.channel__value {
  display: block;
  margin-top: var(--space-1);
  color: var(--ink);
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.channel__go { color: var(--ink-4); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.channel__go .icon { width: 1.1rem; height: 1.1rem; }
.channel:hover .channel__go { color: var(--ink); transform: translate(3px, -3px); }

/* The panel beside the channels. It says what a reply can and cannot be while
   the product is still being built, because a contact page that implies a demo
   nobody can give is a broken promise with a phone number on it. */
.contact-aside { display: grid; gap: var(--space-6); padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.contact-aside__title { font-size: var(--text-lg); font-weight: 600; }
.contact-aside .points { gap: var(--space-5); }
.contact-aside__foot {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.contact-aside__by {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.contact-aside__by img { height: 3.25rem; width: auto; opacity: 0.9; }
.contact-aside__by strong { display: block; color: var(--ink-2); font-weight: 500; }