/* Test D (ui 1, 5 Nov 2026): the passport family (04 and 05, the lesson, Invest, Confirmed), to the client's screens
   of 4 Nov: a blue sky hero with the company and its picture, a white tab row, then soft tinted cards with clay icons. */
:root {
  --pp-blue: #1f6bf0;
  --pp-navy: #141a5c;
  --pp-sky-1: #1d63ef;
  --pp-sky-2: #6fb6ff;
  --pp-purple: #7b4dff;
  --pp-green: #17a35a;
  --pp-yellow: #ffd231;
  --pp-yellow-2: #ffbf1a;
  --pp-tick: #22b55e;
}
body { background: #f1f3fb; }

/* ---- the hero */
.pp-hero {
  position: relative;
  padding: 12px 16px 46px;
  color: #fff;
  background:
    radial-gradient(120% 70% at 100% 100%, rgb(80 200 120 / 55%) 0, transparent 45%),
    radial-gradient(90% 60% at 0% 100%, rgb(70 190 110 / 45%) 0, transparent 40%),
    linear-gradient(170deg, var(--pp-sky-1) 0%, #3a86ff 55%, var(--pp-sky-2) 100%);
  overflow: hidden;
}
.pp-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.pp-brand { display: flex; justify-content: center; align-items: center; gap: 6px; }
.pp-brand img { width: 34px; height: 34px; object-fit: contain; transform: rotate(-8deg); }
.pp-brand span { display: grid; font: 800 17px/1.1 var(--td-font); text-shadow: 0 1px 2px rgb(10 30 90 / 30%); }
.pp-brand small { font: 700 12px/1 var(--td-font); text-align: center; opacity: 0.95; }
.pp-heart {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #fff; cursor: pointer; box-shadow: 0 1px 0 rgb(16 18 58 / 6%);
}
.pp-heart svg { width: 24px; height: 24px; fill: none; stroke: #ef3b55; stroke-width: 2.2; }
.pp-heart[aria-pressed='true'] svg { fill: #ef3b55; }
.pp-co { display: grid; grid-template-columns: 64px minmax(0, 1fr) 112px; gap: 10px; align-items: center; margin-top: 14px; }
.pp-logo { width: 64px; height: 64px; border-radius: 50%; background: #fff; object-fit: contain; padding: 6px; box-shadow: 0 3px 10px rgb(10 30 90 / 25%); }
.pp-name h1 { font: 800 30px/1.05 var(--td-font); letter-spacing: -0.6px; text-shadow: 0 2px 4px rgb(10 30 90 / 25%); }
.pp-tag, .pp-subtitle { margin: 6px 0 0; font: 600 14px/1.3 var(--td-font); }
.pp-subtitle { font: 800 19px/1.15 var(--td-font); }
.pp-art { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 8px 10px rgb(10 30 90 / 30%)); }
.pp-chips { display: flex; gap: 8px; margin-top: 12px; }
.pp-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 8px; border-radius: 99px;
  background: #fff; color: var(--td-ink); font: 700 13px/1 var(--td-font);
}
.pp-chip img { width: 20px; height: 20px; object-fit: contain; }

/* ---- the tab row, over the hero's foot */
.pp-tabs {
  position: relative; z-index: 2; display: grid; gap: 2px; margin: -30px 12px 0; padding: 6px;
  border-radius: 22px; background: #fff; box-shadow: 0 6px 18px rgb(20 30 90 / 12%);
}
.pp-tabs.v04 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pp-tabs.v05 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-tabs a {
  display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 56px; padding: 4px 2px;
  border-radius: 16px; color: var(--pp-navy); text-decoration: none; font: 700 12px/1.1 var(--td-font); text-align: center;
}
.pp-tabs.v05 a { grid-auto-flow: column; gap: 5px; min-height: 48px; }
.pp-tabs a svg { width: 24px; height: 24px; color: var(--pp-purple); }
.pp-tabs a[aria-current='page'] { background: var(--pp-blue); color: #fff; }
.pp-tabs a[aria-current='page'] svg { color: #fff; }

/* ---- the variant switch (a reviewer's control, not part of the app) */
.pp-variant {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 10px 16px 0; padding: 6px;
  border-radius: 14px; background: #fff7d6; box-shadow: 0 0 0 1.5px #e0b400; font: 700 12.5px/1 var(--td-font); color: #5a4300;
}
.pp-variant a {
  min-height: 36px; display: inline-grid; place-items: center; padding: 0 12px; border-radius: 10px; color: #5a4300; text-decoration: none;
}
.pp-variant a[aria-current='true'] { background: #5a4300; color: #fff7d6; }

/* ---- the cards */
.pp-body { display: grid; gap: 14px; padding: 16px 12px 0; }
.pp-body > * { min-width: 0; }
.pp-card { position: relative; border-radius: 22px; padding: 16px; background: #fff; box-shadow: 0 2px 10px rgb(20 30 90 / 6%); }
.pp-card h2 { display: flex; align-items: center; gap: 8px; font: 800 20px/1.15 var(--td-font); color: var(--pp-navy); letter-spacing: -0.3px; }
.pp-card h2 img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.pp-card .see { margin-left: auto; font: 700 13px/1 var(--td-font); color: var(--pp-navy); text-decoration: none; white-space: nowrap; }
.pp-card .see::after { content: ' ›'; }
.t-cream { background: linear-gradient(160deg, #fff9ef, #fdf1df); }
.t-sky { background: linear-gradient(160deg, #f1f7ff, #e4efff); }
.t-lilac { background: linear-gradient(160deg, #f6f1ff, #ece2ff); }
.t-mint { background: linear-gradient(160deg, #effbf4, #def5e8); }
.t-pink { background: linear-gradient(160deg, #fff1f4, #ffe3ea); }

/* Company at a Glance: four tiles in a row with dividers */
.pp-glance ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 0 0; padding: 0; list-style: none; }
.pp-glance li { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 0 4px; text-align: center; }
.pp-glance li + li { border-left: 1.5px solid rgb(20 30 90 / 10%); }
.pp-glance img { width: 40px; height: 40px; object-fit: contain; }
.pp-glance .lb { font: 600 11.5px/1.2 var(--td-font); color: var(--td-ink-2); }
.pp-glance .vl { font: 800 15px/1.15 var(--td-font); color: var(--td-ink); }

/* What it does + Why it's interesting, side by side */
.pp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-two .pp-card { padding: 14px 12px; }
.pp-two h2 { font-size: 17px; align-items: flex-start; }
.pp-two p { margin: 8px 0 0; font: 500 13px/1.4 var(--td-font); color: #2d3150; }
.pp-two .pic { width: 64px; height: 64px; object-fit: contain; margin: 6px 0 0 auto; }
.pp-ticks { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.pp-ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; font: 500 13px/1.35 var(--td-font); color: #2d3150; }
.pp-ticks li::before {
  content: ''; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pp-tick) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* the news card */
.pp-news-row {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) 20px; gap: 12px; align-items: center; margin-top: 12px; padding: 8px;
  border-radius: 18px; background: #fff; box-shadow: 0 2px 8px rgb(20 30 90 / 8%); color: inherit; text-decoration: none;
}
.pp-news-row .pic { position: relative; height: 92px; border-radius: 14px; background: linear-gradient(160deg, #e7f8ec, #c9eed4); display: grid; place-items: center; }
.pp-news-row .pic img { width: 76px; height: 76px; object-fit: contain; }
.pp-news-row .new { position: absolute; left: 6px; top: 6px; padding: 3px 8px; border-radius: 8px; background: var(--pp-yellow); font: 800 11px/1 var(--td-font); color: var(--td-ink); }
.pp-news-row b { display: block; font: 800 15px/1.2 var(--td-font); color: var(--pp-navy); }
.pp-news-row span { display: block; margin-top: 4px; font: 500 12.5px/1.35 var(--td-font); color: var(--td-ink-2); }
.pp-news-row time { display: block; margin-top: 4px; font: 700 11.5px/1 var(--td-font); color: var(--td-ink-2); }
.pp-news-row .ch { width: 10px; height: 10px; border-top: 2.5px solid var(--pp-navy); border-right: 2.5px solid var(--pp-navy); transform: rotate(45deg); }

/* the Learn & Explore banner with the wolf */
.pp-learn {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px; align-items: end; overflow: hidden; padding: 14px 14px 14px 0;
  color: #fff; background: linear-gradient(120deg, #6a3df0, #8f5cff 60%, #a879ff);
}
.pp-learn .wolf { width: 132px; height: 150px; object-fit: contain; object-position: bottom; margin: -6px 0 -14px -10px; }
.pp-learn h2 { color: #fff; font-size: 21px; }
.pp-learn p { margin: 6px 0 10px; font: 600 13px/1.35 var(--td-font); }
.pp-learn .td-pill { min-height: 40px; color: var(--pp-navy); }

/* the Invest (Virtual) banner */
.pp-invest { color: #fff; background: linear-gradient(120deg, #0f8f4b, #17a35a 55%, #2fc27a); overflow: hidden; }
.pp-invest h2 { color: #fff; font-size: 21px; }
.pp-invest h2 svg { width: 26px; height: 26px; }
.pp-invest p { margin: 6px 0 0; max-width: 64%; font: 600 13px/1.35 var(--td-font); }
.pp-invest .coins { position: absolute; right: 8px; top: 6px; width: 96px; height: 96px; object-fit: contain; }
.pp-invest .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pp-btn {
  display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; min-height: 56px; padding: 6px 12px; border-radius: 99px;
  background: #fff; color: var(--pp-navy); text-decoration: none; font: 800 14.5px/1.15 var(--td-font); border: 0; cursor: pointer;
}
.pp-btn small { display: block; font: 600 11.5px/1.2 var(--td-font); }
.pp-btn img, .pp-btn svg { width: 30px; height: 30px; object-fit: contain; }
.pp-btn.gold { background: linear-gradient(180deg, var(--pp-yellow), var(--pp-yellow-2)); box-shadow: inset 0 -3px 0 rgb(170 110 0 / 25%); }

/* More quizzes: three tiles */
.pp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pp-tile {
  display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 6px 12px; border-radius: 16px; background: #fff;
  box-shadow: 0 2px 8px rgb(20 30 90 / 8%); text-align: center; color: inherit; text-decoration: none;
}
.pp-tile img { width: 56px; height: 56px; object-fit: contain; }
.pp-tile b { font: 800 13px/1.2 var(--td-font); color: var(--pp-navy); }
.pp-tile span { font: 500 11.5px/1.3 var(--td-font); color: var(--td-ink-2); }

/* Missions: a pink card, the words and the pill on the left, the trophy on the right */
.pp-missions { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; align-items: center; }
.pp-missions p { margin: 6px 0 12px; font: 500 13px/1.35 var(--td-font); color: #2d3150; }
.pp-missions .trophy { width: 84px; height: 84px; object-fit: contain; }
.pp-missions .td-pill { color: var(--pp-navy); box-shadow: 0 2px 8px rgb(20 30 90 / 10%); }

/* a reviewer's line on a page filled with Starbucks's words */
.pp-unfilled { margin: 10px 16px 0; padding: 10px 12px; border-radius: 12px; background: #fff; font: 600 13px/1.4 var(--td-font); }
.pp-unfilled a { color: var(--pp-blue); }

/* the Remember line (Invest and Confirmed) */
.pp-remember { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; background: linear-gradient(160deg, #eef5ff, #e2edff); }
.pp-remember .i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--pp-blue); color: var(--pp-blue); font: 800 18px/1 var(--td-font); }
.pp-remember b { display: block; font: 800 14px/1.2 var(--td-font); color: var(--pp-blue); }
.pp-remember span { font: 600 13px/1.35 var(--td-font); color: var(--pp-navy); }

/* the big gold button and its quieter partner */
.pp-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 0 18px; border: 0;
  border-radius: 99px; background: linear-gradient(180deg, var(--pp-yellow), var(--pp-yellow-2)); color: var(--pp-navy);
  font: 800 17px/1.1 var(--td-font); text-decoration: none; cursor: pointer; box-shadow: inset 0 -4px 0 rgb(170 110 0 / 25%), 0 4px 12px rgb(170 110 0 / 18%);
}
.pp-cta svg { width: 26px; height: 26px; }
.pp-cta.quiet { background: #fff; box-shadow: 0 2px 10px rgb(20 30 90 / 10%); }
.pp-cta[aria-pressed='true'] { background: #e8f8ee; }
.pp-cta .chev { width: 9px; height: 9px; border-top: 2.6px solid currentColor; border-right: 2.6px solid currentColor; transform: rotate(45deg); }

@media (max-width: 370px) {
  .pp-co { grid-template-columns: 56px minmax(0, 1fr) 96px; }
  .pp-logo { width: 56px; height: 56px; }
  .pp-art { width: 96px; height: 96px; }
  .pp-name h1 { font-size: 27px; }
  .pp-tabs a { font-size: 11px; }
}