/* ============================================================
   ProductTrio design system, v1 (Sept 2026)

   The one place the brand's tokens and shared components live. Every page
   except the homepage and the course loads it (since 24 Sept 2026), and the
   page-family stylesheets (blog, services, case studies, jobs, tools) take
   their heading, eyebrow and text sizes from the tokens below. Their colour
   tokens are still their own copies; folding those in is the next step.

   Sections: 1 tokens · 2 type · 3 buttons · 4 cards, tags, eyebrows ·
             5 section rhythm and dark blocks · 6 the test / learning card ·
             7 motion
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root {
  /* ground and surfaces */
  --pt-canvas: #fdfaf0;
  --pt-surface: #ffffff;
  --pt-pearl: #f9f9f9;
  --pt-mint: #e9f2e8;
  --pt-tint: rgba(77, 83, 196, 0.08);

  /* ink */
  --pt-ink: #1d1d1d;
  --pt-ink-muted: #3b4c5b;
  --pt-ink-soft: #546681;
  --pt-ink-on-dark: #f9f9f9;
  --pt-ink-on-dark-muted: rgba(249, 249, 249, 0.72);

  /* accents: one primary, one warm, one soft */
  --pt-primary: #4d53c4;
  --pt-primary-hover: #343af0;
  --pt-gold: #dcb958;
  --pt-violet: #a599d9;
  --pt-success: #2dca73;

  /* the one dark. Nothing else on the site is navy. */
  --pt-dark: #1d1d1d;
  --pt-dark-gradient: radial-gradient(circle farthest-corner at 0% 0%, #1d1d1d 36%, #4d53c4);

  /* lines and depth */
  --pt-border: rgba(0, 0, 0, 0.10);
  --pt-border-strong: rgba(0, 0, 0, 0.18);
  --pt-shadow-card: 1px 1px 9px rgba(44, 62, 80, 0.10);
  --pt-shadow-lift: 0 20px 50px -20px rgba(29, 29, 29, 0.45);
  --pt-shadow-dark: 0 30px 70px -30px rgba(29, 29, 29, 0.35);

  /* radii: card, tile, pill. Three, not eleven. */
  --pt-r-card: 20px;
  --pt-r-tile: 14px;
  --pt-r-pill: 999px;
  --pt-r-dark: 28px;

  /* type */
  --pt-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pt-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pt-fs-display: clamp(38px, 4.6vw, 56px);
  /* one step below display, for long titles: articles, case studies, job posts */
  --pt-fs-title: clamp(32px, 3.6vw, 48px);
  --pt-fs-h2: clamp(30px, 3.2vw, 40px);
  --pt-fs-h3: clamp(22px, 2vw, 26px);
  --pt-fs-stat: clamp(36px, 3.4vw, 44px);
  --pt-fs-lead: 18px;
  /* long-form reading: articles, case studies, the 3W page */
  --pt-fs-read: 18px;
  --pt-fs-body: 16px;
  /* text inside cards and tiles */
  --pt-fs-card: 15.5px;
  --pt-fs-small: 14px;
  --pt-fs-caption: 13px;
  --pt-fs-eyebrow: 12px;

  /* rhythm: one section spacing, one gutter, one measure */
  --pt-section: clamp(64px, 9vw, 112px);
  --pt-gutter: 5vw;
  --pt-maxw: 1240px;
  --pt-measure: 62ch;

  /* motion: one easing, two durations */
  --pt-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --pt-fast: 180ms;
  --pt-slow: 420ms;
}

/* ---------- 2. type ---------- */
.pt-h1, .pt-h2, .pt-h3 { font-family: var(--pt-font); color: var(--pt-ink); margin: 0; text-wrap: balance; }
.pt-h1 { font-size: var(--pt-fs-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; }
.pt-h2 { font-size: var(--pt-fs-h2); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; }
.pt-h3 { font-size: var(--pt-fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.pt-lead { font-size: var(--pt-fs-lead); line-height: 1.5; color: var(--pt-ink-muted); max-width: var(--pt-measure); }
.pt-body { font-size: var(--pt-fs-body); line-height: 1.55; color: var(--pt-ink); }
.pt-small { font-size: var(--pt-fs-small); line-height: 1.5; color: var(--pt-ink-muted); }
.pt-stat { font-family: var(--pt-font); font-size: var(--pt-fs-stat); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--pt-primary); font-variant-numeric: tabular-nums; }
.pt-on-dark .pt-h1, .pt-on-dark .pt-h2, .pt-on-dark .pt-h3 { color: var(--pt-ink-on-dark); }
.pt-on-dark .pt-lead, .pt-on-dark .pt-body, .pt-on-dark .pt-small { color: var(--pt-ink-on-dark-muted); }

/* eyebrow: the small label above a heading. Mono, indigo, tracked. One style everywhere. */
.pt-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--pt-mono); font-size: var(--pt-fs-eyebrow); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--pt-primary);
  margin: 0 0 14px;
}
.pt-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .7; }
.pt-eyebrow.bare::before { display: none; }
.pt-on-dark .pt-eyebrow { color: var(--pt-gold); }

/* section header: eyebrow, heading, lead. Same object at the top of every section. */
.pt-section-head { max-width: 760px; margin: 0 0 40px; }
.pt-section-head.centre { margin-left: auto; margin-right: auto; text-align: center; }
.pt-section-head.centre .pt-eyebrow { justify-content: center; }
.pt-section-head .pt-lead { margin-top: 14px; }
.pt-section-head.centre .pt-lead { margin-left: auto; margin-right: auto; }

/* ---------- 3. buttons ---------- */
.pt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--pt-font); font-size: var(--pt-fs-body); font-weight: 600; line-height: 1;
  padding: 15px 30px; border-radius: var(--pt-r-pill);
  border: 1px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--pt-fast) var(--pt-ease), color var(--pt-fast) var(--pt-ease),
              border-color var(--pt-fast) var(--pt-ease), transform var(--pt-fast) var(--pt-ease),
              box-shadow var(--pt-slow) var(--pt-ease);
}
.pt-btn:focus-visible { outline: 2px solid var(--pt-primary); outline-offset: 3px; }
.pt-btn-primary { background: var(--pt-primary); color: var(--pt-pearl); }
.pt-btn-primary:hover { background: var(--pt-primary-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--pt-shadow-lift); }
.pt-btn-outline { background: transparent; color: var(--pt-ink); border-color: var(--pt-primary); }
.pt-btn-outline:hover { background: var(--pt-primary); color: var(--pt-pearl); }
.pt-btn-ghost { background: transparent; color: var(--pt-primary); padding-left: 0; padding-right: 0; border-radius: 0; }
.pt-btn-ghost:hover { gap: 14px; }
.pt-btn-sm { padding: 10px 22px; font-size: 15px; }
.pt-on-dark .pt-btn-primary { background: var(--pt-pearl); color: var(--pt-primary); }
.pt-on-dark .pt-btn-primary:hover { background: #fff; color: var(--pt-primary-hover); }
.pt-on-dark .pt-btn-outline { color: var(--pt-ink-on-dark); border-color: rgba(249, 249, 249, 0.4); }
.pt-on-dark .pt-btn-outline:hover { background: var(--pt-pearl); color: var(--pt-ink); border-color: var(--pt-pearl); }
.pt-btn .arrow { width: 16px; height: 16px; transition: transform var(--pt-fast) var(--pt-ease); }
.pt-btn:hover .arrow { transform: translateX(3px); }
.pt-friction { font-size: var(--pt-fs-caption); color: var(--pt-ink-soft); margin-top: 12px; }
.pt-on-dark .pt-friction { color: var(--pt-ink-on-dark-muted); }

/* ---------- 4. cards, tags, eyebrows ---------- */
.pt-card {
  background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-r-card);
  box-shadow: var(--pt-shadow-card);
  transition: transform var(--pt-slow) var(--pt-ease), box-shadow var(--pt-slow) var(--pt-ease), border-color var(--pt-fast) var(--pt-ease);
}
.pt-card.lift:hover { transform: translateY(-4px); box-shadow: var(--pt-shadow-lift); border-color: var(--pt-border-strong); }
.pt-tile { background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-r-tile); }
.pt-tag {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--pt-r-pill);
  font-family: var(--pt-font); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
  background: var(--pt-mint); color: var(--pt-primary);
}
.pt-tag.indigo { background: var(--pt-tint); }
.pt-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 5. section rhythm and dark blocks ---------- */
.pt-section { padding-block: var(--pt-section); padding-inline: var(--pt-gutter); }
.pt-wrap { width: 100%; max-width: var(--pt-maxw); margin-inline: auto; }
.pt-dark {
  background-color: var(--pt-dark); background-image: var(--pt-dark-gradient);
  color: var(--pt-ink-on-dark); border-radius: var(--pt-r-dark); box-shadow: var(--pt-shadow-dark);
}

/* ---------- 6. the test card that becomes a learning card ---------- */
/* The method as an object: dashed edges and mono labels echo the artefacts the
   workshops actually run on. Hover or focus flips it; a tap toggles it. */
.pt-flip { perspective: 1600px; }
.pt-flip-inner {
  position: relative; width: 100%; aspect-ratio: 5 / 4.2;
  transform-style: preserve-3d; transition: transform 720ms var(--pt-ease);
  cursor: pointer; outline: none;
}
.pt-flip:hover .pt-flip-inner, .pt-flip-inner:focus-visible, .pt-flip-inner.is-flipped { transform: rotateY(180deg); }
.pt-flip-inner:focus-visible { box-shadow: 0 0 0 3px var(--pt-tint); }
.pt-face {
  position: absolute; inset: 0; padding: 22px 24px; display: flex; flex-direction: column;
  background: var(--pt-surface); border: 1px dashed var(--pt-border-strong); border-radius: var(--pt-r-tile);
  box-shadow: 12px 12px 0 var(--pt-tint);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.pt-face.back { transform: rotateY(180deg); border-style: solid; border-color: var(--pt-primary); box-shadow: 12px 12px 0 rgba(220, 185, 88, 0.28); }
.pt-face .head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px dashed var(--pt-border-strong);
  font-family: var(--pt-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pt-ink-soft); }
.pt-face .head b { color: var(--pt-ink); font-weight: 600; }
.pt-face.back .head { border-bottom-style: solid; border-color: rgba(77, 83, 196, 0.3); }
.pt-face .f { margin-top: 14px; }
.pt-face .fk { font-family: var(--pt-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pt-primary); }
.pt-face .fv { font-size: 15px; line-height: 1.45; color: var(--pt-ink); margin-top: 4px; }
.pt-face .fv.big { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.pt-face .hint { margin-top: auto; padding-top: 12px; font-family: var(--pt-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--pt-ink-soft); text-align: right; }
@media (max-width: 480px) { .pt-flip-inner { aspect-ratio: 5 / 5.2; } .pt-face { padding: 18px; } }

/* ---------- 7. motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pt-btn, .pt-card, .pt-flip-inner { transition: none; }
  .pt-btn:hover, .pt-card.lift:hover { transform: none; }
  .pt-flip:hover .pt-flip-inner { transform: none; }
  .pt-flip-inner.is-flipped { transform: rotateY(180deg); }
}