/* Homepage components for the Microsoft 365 repositioning (2026-08-31).
 *
 * Loaded LAST on index.html only, so nothing here can reach the generated
 * pages or fight the shared cascade. Everything uses the existing tokens, so
 * it inherits the light Apple theme below the hero band without restating a
 * single colour of its own.
 *
 * Deliberately NOT card grids. The problem list, the outcomes and the process
 * are lists with hairline rules, because they are lines of text rather than
 * separate objects, and the site's own rule is not to put every section in a
 * box. The one boxed element is the offer, which earns it: it is the single
 * thing the page is selling.
 */

/* ---------- the eight recognizable problems ---------- */
.problem-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.problem-list li { border-bottom: 1px solid var(--line); }
.problem-list a {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--text);
  text-decoration: none;
}
.problem-list a::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: .55em;
  border-radius: 50%;
  background: var(--ap-blue, #0066cc);
}
.problem-list a::after {
  content: "\2192";
  margin-left: auto;
  padding-left: var(--s-2);
  color: var(--muted);
  transition: transform .18s ease;
}
.problem-list a:hover,
.problem-list a:focus-visible { color: var(--ap-blue, #0066cc); }
.problem-list a:hover::after,
.problem-list a:focus-visible::after { transform: translateX(4px); }

/* ---------- the productized offer ---------- */
.offer {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-6);
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 18px);
  background: var(--panel);
}
.offer-main h2 { margin-top: var(--s-1); }
.offer-main .lead { margin-bottom: var(--s-3); }
.offer-limit {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: .95rem;
  color: var(--muted);
}
.offer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.offer-side {
  padding-left: var(--s-6);
  border-left: 1px solid var(--line);
}
.offer-side .h3 { margin-bottom: var(--s-2); }

/* ---------- outcomes and process ---------- */
.outcome-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-6);
}
.outcome-list li {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
}
.steps-list {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: var(--s-2);
  max-width: 62ch;
}
.steps-list li { padding-left: .35em; line-height: 1.5; }
.ownership-note {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  max-width: 66ch;
  color: var(--muted);
}

/* ---------- founder ---------- */
.founder { max-width: 68ch; }
.founder h2 { margin-bottom: var(--s-2); }
.founder p + p { margin-top: var(--s-2); }

/* ---------- partner form, used on /partners ---------- */
.partner-form { max-width: 46rem; margin-top: var(--s-3); }
.partner-form .field { margin-bottom: var(--s-2); }
.partner-form label { display: block; margin-bottom: .35rem; font-weight: 600; }
.partner-form input,
.partner-form select,
.partner-form textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg, #fff);
  color: var(--text);
  font: inherit;
}
.partner-form textarea { resize: vertical; min-height: 7rem; }
.partner-form .form-status { margin-top: var(--s-2); min-height: 1.25rem; }

@media (max-width: 900px) {
  .offer { grid-template-columns: 1fr; padding: var(--s-4); }
  .offer-side { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: var(--s-4); }
  .outcome-list { grid-template-columns: 1fr; }
  .problem-list a { font-size: 1.0625rem; }
}






}

/* THE SEVENTH MENU ITEM (2026-09-01, owner asked for Security Review back).
   Seven items plus two actions need about 130px more than 1440 gives. Rather
   than drop the phone button, the digits step back below 1700 and the button
   keeps its label, so the affordance survives at every width and the number
   returns on a wide screen. It is also still in the mobile action bar, the
   footer and on /contact. */
@media (max-width: 1699px) {
  .site-header .nav-call .nav-call-num { display: none; }
}

/* HOMEPAGE NAV GAPS (2026-09-01). The homepage header runs its own, much wider
   link gaps (body.story-dark in hero-ribbon.css: 1.9rem, 3.2rem, 3.8rem at
   successive breakpoints). Those were set for four items. With seven the row
   ran past the viewport from 1200 up, on the homepage only. These bring the
   homepage in line with the rest of the site until there is genuinely room. */
@media (min-width: 900px) and (max-width: 1439px) {
  body.story-dark .nav-links { gap: 1.6rem; }
}
@media (min-width: 1440px) and (max-width: 1699px) {
  body.story-dark .nav-links { gap: 2.1rem; }
}
@media (min-width: 1700px) {
  body.story-dark .nav-links { gap: 2.6rem; }
}