/*
 * Phoebe's own dark studio universe on the Foresense page: the Phoebe section (design v2, 8 October 2026).
 * The values are the same as the Phoebe app's (Phoebe: src/main/resources/static/css/phoebe.css,
 * "studio", design 2026-10-04). Change them there and here together.
 */
:root {
  --ph-satin: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 226, 236, 0.06) 20%, rgba(255, 255, 255, 0) 34%,
                rgba(255, 226, 236, 0.05) 56%, rgba(255, 255, 255, 0) 70%, rgba(255, 226, 236, 0.04) 86%, rgba(255, 255, 255, 0) 100%),
              radial-gradient(ellipse 70% 55% at 15% 0%, #3A1E28 0%, rgba(58, 30, 40, 0) 65%),
              radial-gradient(ellipse 60% 50% at 100% 100%, #2A1219 0%, rgba(42, 18, 25, 0) 70%),
              linear-gradient(180deg, #1C1115 0%, #110A0C 100%);
  --ph-satin-base: #110A0C;
  --ph-on-dark: #F3E9E4;
  --ph-on-dark-2: #D7C2C8;
  --ph-on-dark-muted: #BFA8AE;
  --ph-card: #F7F0EC;
  --ph-ink: #1E1418;
  --ph-ink-2: #4A3B41;
  --ph-ink-muted: #6E5A60;
  --ph-berry: #8E1B4B;
  --ph-rose: #E8A1BF;
  --ph-lacquer: radial-gradient(130% 90% at 50% 125%, rgba(214, 70, 140, 0.75) 0%, rgba(142, 27, 75, 0.45) 32%, rgba(142, 27, 75, 0) 62%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.10) 46%, rgba(255, 255, 255, 0) 50%),
                linear-gradient(180deg, #2B1A21 0%, #0B0708 100%);
  --ph-lacquer-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(240, 160, 200, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --ph-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --ph-body: 'Jost', 'Helvetica Neue', sans-serif;
}

/*
 * The Phoebe logo: the SVG files of the logo package (static/brand/), never "Phoebe" set in a font. The light files on
 * the dark satin; under 200 px wide the word mark. The height follows the width.
 */
.ph-logo { display: block; width: 200px; height: auto; }
.ph-logo-small { display: block; width: 90px; height: auto; }

.ph-satin { background: var(--ph-satin); background-color: var(--ph-satin-base); color: var(--ph-on-dark); font-family: var(--ph-body); }
.ph-lacquer { background: var(--ph-lacquer); box-shadow: var(--ph-lacquer-shadow); color: #FFFFFF; }

/* Focus stays visible on the dark surfaces. */
.ph-satin a:focus-visible, .ph-satin button:focus-visible { outline: 2px solid var(--ph-rose); outline-offset: 3px; }

/* The Phoebe section: a heading block, then cards of different sizes with small product snippets. The cards are light
   slate (#EEF1F5), not beige (design v2, 8 October 2026). */
.ph-section-inner { padding-top: 112px; padding-bottom: 112px; display: flex; flex-direction: column; gap: 48px; }
.ph-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 32px 64px; align-items: end; }
.ph-head-left, .ph-head-right { display: flex; flex-direction: column; }
.ph-head-left { gap: 24px; }
.ph-head-right { gap: 20px; }
.ph-section h2 { font-family: var(--ph-display); font-weight: 500; font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1.08; letter-spacing: 0; max-width: 18ch; }
.ph-lead { margin: 0; font-size: 1.15rem; line-height: 1.7; max-width: 34rem; color: var(--ph-on-dark-2); }
.ph-branches { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ph-branches li { font-size: 14px; color: var(--ph-on-dark); padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(243, 233, 228, 0.22); background: rgba(243, 233, 228, 0.05); }

.pb-grid { display: grid; gap: 18px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pb-a, .pb-d { grid-column: span 4; }
.pb-b, .pb-c { grid-column: span 2; }
.pb-e, .pb-f { grid-column: span 3; }
@media (max-width: 900px) {
  .pb-grid { grid-template-columns: minmax(0, 1fr); }
  .pb-a, .pb-b, .pb-c, .pb-d, .pb-e, .pb-f { grid-column: auto; }
}
.ph-card { background: #EEF1F5; color: #18202A; border-radius: 20px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.ph-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ph-card-number { font-family: var(--ph-display); font-size: 22px; color: var(--ph-berry); }
.ph-card-chip { font-family: var(--font, 'Geist', sans-serif); font-size: 12px; font-weight: 500; color: #4F5B69; padding: 4px 10px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px #D5DBE2; }
.ph-card h3 { font-family: var(--ph-body); font-weight: 500; font-size: 21px; line-height: 1.3; }
.ph-card p { margin: 0; font-size: 16px; line-height: 1.6; color: #4F5B69; }

/* Small product snippets at the bottom of each card (decorative, aria-hidden). */
.ph-snip { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ph-snip-tag { font-size: 13px; padding: 8px 12px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 0 0 1px #D5DBE2; color: #18202A; }
.ph-snip-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--ph-lacquer); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08); color: #FFFFFF; font-size: 13px; }
.ph-snip-pill .ph-snip-brand { font-family: var(--ph-display); }
.ph-snip-cal { flex: 1 1 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px; font-size: 13px; }
.ph-snip-time { color: #4F5B69; }
.ph-snip-busy { padding: 8px 12px; border-radius: 10px; background: repeating-linear-gradient(135deg, #D5DBE2 0 6px, #FFFFFF 6px 12px); color: #4F5B69; }
.ph-snip-slot { padding: 8px 12px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 0 0 1px #D5DBE2; }
.ph-snip-site { font-family: var(--ph-display); font-size: 18px; color: #18202A; }
.ph-snip-book { margin-left: auto; padding: 9px 16px; border-radius: 999px; background: #18202A; color: #FFFFFF; font-size: 13px; }