/* ============================================================
   Do Quantum - partnership page
   Layers on styles.css (container, buttons, sections, cred-strip,
   process, tracks, principles, CTA, footer). Responsive at
   320 / 768 / 1024. No hover states on cards that are not links.
   ============================================================ */

/* Header: the nav, mobile drawer, and toggle all come from styles.css, exactly
   as on the home page. The brand name must not wrap: the header is fixed, so a
   second line would push --header-h and the whole page down with it. */
.brand-name { white-space: nowrap; }

/* This page's nav labels are longer than the home page's, so between the 900px
   drawer breakpoint and roughly 1000px the row would run out of room and wrap
   each label onto two lines. Keep labels on one line and let the gap take the
   squeeze instead; it relaxes back to the site's 34px once there is room. The
   drawer at <=900 overrides this with its own gap. */
@media (min-width: 901px) {
  .nav-menu { gap: clamp(18px, 2.4vw, 34px); }
  .nav-menu a { white-space: nowrap; }
}

/* This page is a dense reference document rather than a landing page, so it runs
   at a tighter vertical rhythm than the home page to stay scannable. Scoped to
   body.pt so styles.css keeps its own spacing everywhere else. */
.pt .section { padding: clamp(50px, 7vh, 84px) 0; }
.pt .section-head { margin-bottom: 40px; }

/* ---------- Hero ---------- */
.pt-hero { padding: clamp(34px, 5vw, 64px) 0 0; }
.pt-hero-title { font-size: clamp(2rem, 4.8vw, 3.5rem); font-weight: 600; line-height: 1.07; letter-spacing: -.02em; }
.pt-hero-sub { margin-top: 24px; font-size: clamp(1.04rem, 1.5vw, 1.2rem); color: var(--gray); max-width: 62ch; }
.pt-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.pt-hero .cred-strip { margin-top: clamp(42px, 6vw, 64px); }

/* ---------- Shared bits ---------- */
.pt-note { margin-top: 18px; font-size: .92rem; color: var(--gray); }
.pt-note a { color: var(--purple-600); font-weight: 500; border-bottom: 1px solid var(--purple-200); }

/* A note closing out a block. It spans the full container: capping the measure
   left it visibly short of the full-width grid above and the quote below, which
   read as a layout bug rather than as a reading-width choice. */
.pt-foot { margin-top: 26px; font-size: .96rem; color: var(--gray); }
.pt-foot b { color: var(--heading); font-weight: 600; }
.pt-foot a { color: var(--purple-600); font-weight: 600; }

/* Sub-block inside a section, so related material can share one section's
   padding instead of paying for a whole section of its own. */
.pt-subhead { margin-top: clamp(50px, 6vw, 74px); padding-top: 36px; border-top: 1px solid var(--line); }
.pt-subhead h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.pt-subhead p { margin-top: 12px; color: var(--gray); max-width: 64ch; }

/* ---------- Why partner ---------- */
/* Three reasons side by side, numbered, under a purple rule. Its own treatment:
   three across avoids the stranded third card the site's two-column .principles
   grid would leave, and the open rule keeps it distinct from the boxed and
   hairline grids further down the page. */
.pt-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.pt-why-card { border-top: 2px solid var(--purple-600); padding-top: 20px; }
.pt-why-n { display: block; font-family: var(--serif); font-size: .95rem; font-weight: 600; color: var(--purple-500); }
.pt-why-card h3 { font-size: 1.3rem; margin: 8px 0 10px; }
.pt-why-card p { color: var(--gray); font-size: .98rem; }
.pt-why-card a { color: var(--purple-600); border-bottom: 1px solid var(--purple-200); transition: border-color .2s ease; }
.pt-why-card a:hover { border-color: var(--purple-600); }

/* ---------- TRL ---------- */
.pt-trl-purpose {
  font-family: var(--serif); font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 500;
  color: var(--heading); line-height: 1.4;
  border-left: 3px solid var(--purple-600); padding: 6px 0 6px 20px; max-width: 60ch;
}
/* The 1-to-9 ladder as one strip: level 2 is where teams present, 3 is the
   optional higher bar, the rest are context.
   Theme note: only --purple-50/500/600/700 and the neutrals flip for dark mode.
   --purple-100/200/300 stay light in both, so they must not be used here or the
   cells render as bright boxes on a dark page. */
.pt-scale { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; margin-top: 28px; }
.pt-scale li {
  display: flex; align-items: center; justify-content: center; height: 46px;
  border-radius: 4px; font-family: var(--serif); font-weight: 600; font-size: 1.02rem;
  background: var(--purple-50); border: 1px solid var(--line-strong); color: var(--gray);
}
/* Level 3, the optional higher bar: outlined, so it stays clearly secondary to
   level 2 in both themes. */
.pt-scale li.is-soft { background: transparent; border-color: var(--purple-500); color: var(--purple-700); }
/* Level 2, where teams present. --white inverts with the theme, so the numeral
   is white on deep purple in light mode and near-black on lilac in dark. */
.pt-scale li.is-mark { background: var(--purple-600); border-color: var(--purple-600); color: var(--white); }

/* Definition of the one level that matters to a partner. */
.pt-def { margin-top: 28px; border-left: 3px solid var(--purple-600); padding: 2px 0 2px 22px; }
.pt-def h4 { font-family: var(--serif); font-size: 1.18rem; font-weight: 600; }
.pt-def p { margin-top: 10px; font-size: .96rem; color: var(--gray); }
.pt-def b { color: var(--purple-700); font-weight: 600; }

/* ---------- Fact grid ---------- */
/* Hairline grid: 1px gaps over the divider colour, so the cards must match the
   section background and the count must stay even or a cell shows as a block. */
.pt-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pt-fact { background: var(--white); padding: 28px 26px; margin: 0; }
.section-alt .pt-fact { background: var(--paper); }
.pt-fact dt { font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--purple-600); }
.pt-fact dd { margin: 11px 0 0; color: var(--gray); }
.pt-fact dd strong { color: var(--heading); font-weight: 600; }

/* ---------- Hiring ---------- */
/* Phase label sitting in .pillar-ix's slot, in the site's tag voice rather than
   the serif numeral the home page uses there. */
.pt-when { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--purple-500); }

/* Feature panel, mirroring .path-feature on the home page. */
.pt-panel {
  margin-top: 28px; border: 1px solid var(--purple-200); border-radius: 6px;
  background: linear-gradient(180deg, var(--purple-50), var(--white));
  box-shadow: var(--shadow); padding: clamp(24px, 3vw, 36px);
}
.pt-panel h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-bottom: 12px; }
.pt-panel p { color: var(--gray); }

/* ---------- Mutual benefit: the interested -> competent -> compensated arc ---------- */
/* A rail of dots: horizontal on desktop, vertical once the steps stack. The dot
   is ::before, the rail to the next dot is ::after, so no extra markup. */
.pt-arc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.pt-arc-step { position: relative; padding-top: 40px; }
.pt-arc-step::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1;
  width: 16px; height: 16px; border-radius: 50%; background: var(--purple-600);
}
/* top:7px centres the 2px rail on the 16px dot; the negative inset carries it
   across the grid gap to the next dot. */
.pt-arc-step:not(:last-child)::after {
  content: ""; position: absolute; top: 7px; left: 16px; right: -34px; height: 2px;
  background: var(--purple-200);
}
.pt-arc-tag { font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--purple-500); }
.pt-arc-step h3 { font-size: 1.6rem; margin: 10px 0 12px; }
.pt-arc-step p { color: var(--gray); }

/* ---------- Problem areas ---------- */
/* The stages/areas a team can take on, listed inside each track card. Numbered
   for algorithms (they run in order), dotted for architecture (they do not). */
.pt-stage-head { margin-top: 26px; font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--purple-600); }
.pt-stages { display: grid; margin-top: 12px; border-top: 1px solid var(--line); }
.pt-stage { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: start; }
.pt-stage-n { font-family: var(--serif); font-weight: 600; font-size: 1rem; color: var(--purple-500); line-height: 1.5; }
.pt-stage-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple-300); justify-self: center; margin-top: .62em; }
.pt-stage b { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--heading); line-height: 1.35; }
.pt-stage span { display: block; margin-top: 3px; font-size: .93rem; color: var(--gray); }

.pt-quote { margin-top: 34px; border-left: 3px solid var(--purple-600); padding: 6px 0 6px 22px; }
.pt-quote p { font-family: var(--serif); font-size: clamp(1.12rem, 2vw, 1.4rem); font-weight: 500; color: var(--heading); line-height: 1.38; }
.pt-quote cite { display: block; margin-top: 12px; font-family: var(--sans); font-style: normal; font-size: .92rem; color: var(--gray-light); }

/* ---------- Terms ---------- */
.pt-terms { display: grid; border-top: 1px solid var(--line); }
.pt-term { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: start; }
.pt-term h3 { font-size: 1.15rem; }
.pt-term p { color: var(--gray); max-width: 68ch; }
.pt-term p a { color: var(--purple-600); border-bottom: 1px solid var(--purple-200); }

/* ---------- Footer ---------- */
/* Shared .footer styles from styles.css, with the simple one-row layout the
   other secondary pages use. */
.footer-simple { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; padding-bottom: 56px; }
.footer-simple .btn { flex: none; }

/* ============================================================
   Responsive: 1024 tablet-landscape / 768 tablet / 320 phone
   ============================================================ */

/* Tablet landscape and below: the site's own grids collapse at 920. */
@media (max-width: 920px) {
  .pt-why { grid-template-columns: 1fr; gap: 30px; }

  /* The arc stacks, so the rail runs down the left instead of across the top. */
  .pt-arc { grid-template-columns: 1fr; gap: 0; }
  .pt-arc-step { padding-top: 0; padding-left: 36px; padding-bottom: 30px; }
  .pt-arc-step:last-child { padding-bottom: 0; }
  .pt-arc-step::before { top: 5px; }
  .pt-arc-step:not(:last-child)::after {
    top: 21px; left: 7px; right: auto; bottom: -6px; width: 2px; height: auto;
  }
}

/* Tablet portrait (768) */
@media (max-width: 768px) {
  .pt-facts { grid-template-columns: 1fr; }
  .pt-term { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
}

@media (max-width: 560px) {
  .footer-simple { flex-direction: column; align-items: flex-start; }
}

/* Phone (320 - 480) */
@media (max-width: 480px) {
  .pt-hero .cred-strip { grid-template-columns: 1fr 1fr; }
  .pt-trl-purpose { padding-left: 16px; }
  .pt-quote, .pt-def { padding-left: 16px; }
  .pt-fact { padding: 22px 20px; }
  /* Nine cells across 280px: shrink the box, not the number. */
  .pt-scale { gap: 3px; }
  .pt-scale li { height: 34px; font-size: .84rem; border-radius: 3px; }
}