/* Sections only the home page renders.
 *
 * Kept out of public.css for the reason written.css is: /pricing, /about and
 * sixteen written pages should not download rules for a lifecycle band they
 * will never show. Tokens -- --step-*, --band, --ink, --line -- come from
 * public.css, which every public page loads first.
 */

/* --------------------------------------------------------------------------
   One unit, start to finish
   -------------------------------------------------------------------------- */
.lifecycle { padding: clamp(2rem, 4vw, 3.5rem) 0; border-block: 1px solid var(--line); background: var(--surface-soft); }
.lifecycle-intro { max-width: 65ch; margin-bottom: 2.2rem; }
.lifecycle-intro h2 { margin: .3rem 0 .6rem; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.04em; line-height: 1.12; }
.lifecycle-intro .lede { margin: 0; color: var(--ink-soft); font-size: var(--step-lede); }

.lifecycle-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.lifecycle-step { position: relative; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .1rem .75rem; padding: 0 0 1.3rem; }
/* The rule between marks, stopping at the last one rather than trailing off. */
.lifecycle-step::before { position: absolute; top: 1.1rem; bottom: -.2rem; left: .62rem; width: 2px; background: var(--line); content: ""; }
.lifecycle-step:last-child { padding-bottom: 0; }
.lifecycle-step:last-child::before { display: none; }
.lifecycle-mark {
  position: relative; z-index: 1; width: 13px; height: 13px; margin: .36rem auto 0;
  border: 2px solid var(--ink-soft); border-radius: 50%; background: var(--surface);
}
/* Tone and shape together, so the sequence still reads in greyscale. */
.lifecycle-step.is-in .lifecycle-mark { border-color: var(--brand-primary); background: var(--brand-primary); }
.lifecycle-step.is-move .lifecycle-mark { border-color: var(--brand-primary); }
.lifecycle-step.is-good .lifecycle-mark { border-color: var(--brand-accent); background: var(--brand-accent); }
.lifecycle-step.is-cover .lifecycle-mark { border-color: var(--brand-accent); border-radius: 3px; }
.lifecycle-what { margin: 0; font-size: 1rem; line-height: 1.4; }
.lifecycle-what strong { font-weight: 680; }
.lifecycle-what span { color: var(--ink-soft); }
.lifecycle-detail { margin: .1rem 0 0; color: var(--ink-soft); font-size: var(--step-small); line-height: 1.5; }
.lifecycle-note { margin: 1.6rem 0 0; color: var(--ink-soft); font-size: var(--step-small); }

@media (min-width: 900px) {
  .lifecycle-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
  .lifecycle-step { padding: 0; }
  .lifecycle-step::before { display: none; }
}

/* --------------------------------------------------------------------------
   By trade
   -------------------------------------------------------------------------- */
.industries { padding: var(--band) 0; }
.industries-head { max-width: 58ch; margin-bottom: 1.6rem; }
.industries-head h2 { margin: .3rem 0 .6rem; font-size: var(--step-section); letter-spacing: -.04em; }
.industries-head .lede { margin: 0; color: var(--ink-soft); font-size: var(--step-lede); line-height: 1.6; }
.industry-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: .8rem; margin: 0; padding: 0; list-style: none;
}
.industry-grid a {
  display: block; min-height: 44px; padding: 1.1rem 1.15rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.industry-grid a:hover { border-color: var(--brand-primary); background: var(--surface-soft); }
.industry-grid strong { display: block; margin-bottom: .2rem; font-size: 1rem; }
.industry-grid span { color: var(--ink-soft); font-size: var(--step-small); }

/* --------------------------------------------------------------------------
   However you are set up
   -------------------------------------------------------------------------- */
.operations { padding: var(--band) 0; border-top: 1px solid var(--line); }
.operations-head { margin-bottom: 1.8rem; }
.operations-head h2 { margin: .3rem 0 0; font-size: var(--step-section); letter-spacing: -.04em; }
.operations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 2rem; }
.operations-card { border-top: 2px solid var(--line); padding-top: 1.25rem; }
.operations-card > a { display: inline-block; padding-block: .5rem; }
.operations-local { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.operations-local p { max-width: 65ch; margin: 0; color: var(--ink-soft); }
.operations-local nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.operations-local a { display: inline-block; padding-block: .5rem; }
.operations-card h3 { margin: 0 0 .5rem; font-size: var(--step-sub); letter-spacing: -.02em; }
.operations-card p { margin: 0 0 1rem; max-width: 46ch; color: var(--ink-soft); line-height: 1.6; }
/* --------------------------------------------------------------------------
   Offline
   Nothing in here is styled as a failure: losing signal is the condition the
   product was built for, and a red banner would say the opposite.
   -------------------------------------------------------------------------- */
.offline-band { padding: var(--band) 0; background: #241C2E; color: #e4f1f3; }
.offline-copy { max-width: 65ch; margin-bottom: 2.2rem; }
.offline-copy .eyebrow { color: var(--sr-link); }
.offline-copy h2 { margin: .3rem 0 .7rem; color: #fff; font-size: var(--step-section); letter-spacing: -.04em; line-height: 1.05; }
.offline-copy .lede { margin: 0; color: #bcd6dc; font-size: var(--step-lede); }
.offline-copy .lede a { color: #fff; text-decoration: underline; text-underline-offset: .15em; }
.offline-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: .8rem; margin: 0; padding: 0; list-style: none; counter-reset: offline;
}
.offline-step {
  padding: 1.05rem 1.1rem; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px; background: rgba(255, 255, 255, .05);
}
.offline-tag {
  display: inline-block; margin-bottom: .55rem; padding: .18rem .5rem;
  border-radius: 999px; background: rgba(255, 255, 255, .12);
  color: #cfe6ea; font-size: .7rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.offline-step strong { display: block; color: #fff; font-size: 1.05rem; }
.offline-sub { display: block; margin-top: .2rem; color: #a9c6cd; font-size: var(--step-small); line-height: 1.45; }
.offline-step.is-syncing { border-color: rgba(127, 212, 196, .4); }
.offline-step.is-syncing .offline-tag { background: rgba(127, 212, 196, .2); color: #bdf0e3; }
.offline-step.is-done { border-color: #39a98c; background: rgba(57, 169, 140, .14); }
.offline-step.is-done .offline-tag { background: #39a98c; color: #04261e; }
.offline-note { margin: 1.3rem 0 0; max-width: 80ch; color: #bcd6dc; font-size: .875rem; }

/* --------------------------------------------------------------------------
   Customer story
   Renders only when one has been written. See _customer_story.html.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Pricing, in three lines
   -------------------------------------------------------------------------- */
.plan-preview { padding: var(--band) 0; border-top: 1px solid var(--line); background: var(--surface-soft); }
.plan-preview-head { max-width: 44ch; margin-bottom: 1.8rem; }
.plan-preview-head h2 { margin: .3rem 0 .5rem; font-size: var(--step-section); letter-spacing: -.04em; }
.plan-preview-head .lede { margin: 0; color: var(--ink-soft); font-size: var(--step-lede); }
.plan-preview-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: .8rem; margin: 0 0 1.4rem; padding: 0; list-style: none;
}
.plan-preview-card {
  padding: 1.25rem 1.2rem; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface);
}
.plan-preview-card.is-free { border-color: var(--brand-accent); }
.plan-preview-name { display: block; color: var(--ink-soft); font-size: var(--step-small); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.plan-preview-price { margin: .5rem 0 .35rem; font-size: var(--step-sub); font-weight: 800; letter-spacing: -.035em; }
.plan-preview-cur { margin-right: .22rem; color: var(--ink-soft); font-size: .62em; font-weight: 650; }
.plan-preview-per { margin-left: .1rem; color: var(--ink-soft); font-size: .5em; font-weight: 600; }
.plan-preview-room { margin: 0; color: var(--ink-soft); font-size: var(--step-small); line-height: 1.5; }
.plan-preview-more { margin: 0; }


/* --------------------------------------------------------------------------
   The home page on a phone

   Most of this page already stacks on its own -- the grids are auto-fit and
   the type is fluid -- so what was left was not breakage but density. Six
   bands of full-width cards one under another is a long scroll that reads as
   one undifferentiated column, and two of the headings were competing with
   the heading above them.

   Three rules, applied where each one earns its place:

   * a card heading is a card heading, not a second section heading;
   * anything short enough to sit two across does, which halves the scroll
     without shrinking a word of it;
   * nothing is centred that the rest of the page sets from the left margin.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* 28px section heading over a 22px card heading is not a hierarchy, it is
     two headings. The card drops to body-and-a-bit, which is what it is. */
  .operations-card h3 { font-size: 1.125rem; }
  .operations-head, .industries-head, .lifecycle-intro,
  .offline-copy, .plan-preview-head { margin-bottom: 1.5rem; }
  .operations-grid { gap: 2.2rem; }

  /* Four steps of three words each. Stacked they were four full-width boxes
     and a long thumb; two across they are one glance, and the sequence still
     reads in the order it is written. */
  .offline-steps { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .offline-step { padding: .85rem .9rem; }
  .offline-step strong { font-size: .95rem; }
  .offline-tag { margin-bottom: .45rem; font-size: .64rem; }

  /* Same again for the trades: a name and half a line each. */
  .industry-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .industry-grid a { padding: .9rem .85rem; }
  .industry-grid strong { font-size: .92rem; line-height: 1.25; }
  .industry-grid span { font-size: .78rem; line-height: 1.35; }

  /* The plans stay one per row. A price is the one thing on this page that
     has to be read rather than scanned. */
  .plan-preview-grid { grid-template-columns: 1fr; gap: .6rem; }
  .plan-preview-card { padding: 1rem 1.1rem; }
  .plan-preview-price { margin: .3rem 0 .25rem; }

  .lifecycle-step { padding-bottom: 1.1rem; }
}

/* Brand scene and category headline, with the same reading order at every width. */
.landing-hero { padding-block: clamp(2rem, 4vw, 4rem); }
.landing-hero .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
.landing-hero h1 { max-width: 17ch; margin-bottom: 1.25rem; color: var(--ink); font-size: clamp(2.25rem, 4.8vw, 4.5rem); line-height: 1.06; font-weight: 800; }
.hero-signature { margin: 0 0 1rem; color: var(--ink); font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 750; letter-spacing: -.02em; }
.hero-promise { display: block; color: var(--ink); margin-bottom: .5rem; }
.brand-scene { position: relative; min-width: 0; margin: 0; padding-bottom: 1rem; }
.brand-scene > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 78% 50%; }
.scene-caption { position: absolute; bottom: 2.5rem; left: -1rem; padding: 1rem 1.25rem; background: #241C2E; color: #F6F2E9; }
.scene-caption span, .scene-caption strong { display: block; }
.scene-caption strong { font-size: 1.5rem; }
.brand-product { padding-block: var(--band); scroll-margin-top: 6rem; }

/* Keep all three detailed sample records, arranged for comparison. */
.record-examples { padding-block: var(--band); }
.records-intro { max-width: 60ch; margin-bottom: 2rem; }
.records-intro h2 { margin: .3rem 0 .75rem; font-size: var(--step-section); line-height: 1.1; letter-spacing: -.04em; }
.records-intro > p:last-child { color: var(--ink-soft); }
.record-examples-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.record-example { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 6rem; }
.record-example .story-copy { flex: 1; margin-bottom: 1rem; }
.record-example .story-copy h3 { margin: 0 0 .75rem; font-size: 1.35rem; letter-spacing: -.025em; }
.record-example .story-copy p:not(.eyebrow) { margin: 0; max-width: none; }
.record-example .story-screen { flex: 1; width: 100%; }
.record-example .screen-body { padding: 1.15rem; }
.record-example .screen-title { flex-wrap: wrap; }
.record-example .screen-title h4 { margin: .2rem 0 0; font-size: 1.15rem; }
.record-example .serial-focus { color: #F6F2E9; }
.record-example .serial-focus small { font-size: .75rem; }
.record-example .handover-people { gap: 1.5rem; }
.record-example .record-trail li { color: #F5CBA7; }
.record-example .record-fields dd { overflow-wrap: anywhere; }
.offline-copy .eyebrow { color: #F5CBA7; }
.plan-preview-more .text-link { color: var(--sr-link); }

@media (max-width: 1000px) {
  .record-examples-grid { grid-template-columns: 1fr; }
  .record-example { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
}
@media (max-width: 800px) {
  .landing-hero .hero-grid { grid-template-columns: 1fr; }
  .landing-hero h1 { max-width: 19ch; }
  .scene-caption { left: 0; }
  .brand-scene > img { max-height: 400px; }
}
@media (max-width: 600px) {
  .record-example { display: flex; gap: 0; }
  .record-examples-grid { gap: 2.5rem; }
  .brand-scene > img { aspect-ratio: 1.3; max-height: 320px; }
  .landing-hero .hero-grid { gap: 1.5rem; }
}

/* Text enlarged to 200%: a long word in the headline, or a sample screen's
   min-content width, must not push the page sideways. */
.landing-hero h1 { overflow-wrap: break-word; }
.landing-hero .hero-grid > *, .brand-product, .brand-product *, .offline-band * { min-width: 0; }