/* SLOP CENTER — menus. Owner: Menus UI.
   Direction: "PeopleFirst✦" — the HR benefits portal that wants you to know it cares.
   Cream paper, deep teal ink, coral for anything stamped, mustard for stars and sticky
   notes; friendly rounded display type; chunky "candy" buttons with a 3px under-edge.
   Signature moves: the wordmark that re-rolls its own letters (it was generated, after all)
   and Todd's coral rubber-stamp grade sitting next to a small, honest Integrity tag. */

.pf-root {
  --paper: #f8f2e6; --paper2: #f2eadb; --paper3: #e8dcc5; --card: #fffaf1;
  --line: #e0d3bb; --line2: #cdbd9f;
  --ink: #1f2d2b; --ink2: #4f5e5a; --ink3: #858f89;
  --teal: #0e7f78; --teal2: #0a625d; --teal3: #d4ebe4; --teal-hi: #16a094;
  --coral: #f2604c; --coral2: #cf4532; --coral3: #fde0d8;
  --mustard: #f0b23a; --mustard2: #8a6414; --mustard3: #fdf0c8;
  --lav: #b7a8ef;
  --round: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-in: cubic-bezier(.55, 0, 1, .45);
  --e-back: cubic-bezier(.34, 1.56, .64, 1);
  --safe-t: max(12px, env(safe-area-inset-top));
  --safe-b: max(12px, env(safe-area-inset-bottom));
  --safe-l: max(16px, env(safe-area-inset-left));
  --safe-r: max(16px, env(safe-area-inset-right));
  position: absolute; inset: 0; pointer-events: none;
  font-family: var(--sans); color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.pf-layer, .pf-teach-layer, .pf-coach-layer { position: absolute; inset: 0; pointer-events: none; }
:where(.pf-root) :where(h1, h2, h3, p, ol) { margin: 0; }

/* ================================================================ screens */
.pf-screen {
  position: absolute; inset: 0; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  opacity: 0; transition: opacity .26s var(--e-out);
}
.pf-screen.in { opacity: 1; }
.pf-screen.out { opacity: 0; pointer-events: none; transition: opacity .18s var(--e-in); }
.pf-screen > :where(:not(.pf-scrim)) { position: relative; z-index: 1; }
.pf-scrim { position: absolute; inset: 0; z-index: 0; }
.pf-scrim.title {
  background:
    linear-gradient(90deg, rgba(9,8,14,.9) 0%, rgba(9,8,14,.66) 36%, rgba(9,8,14,.2) 60%, rgba(9,8,14,.5) 100%),
    linear-gradient(0deg, rgba(9,8,14,.55), rgba(9,8,14,0) 45%);
}
.pf-scrim.dim { background: radial-gradient(120% 110% at 50% 50%, rgba(14,24,24,.58), rgba(6,9,10,.82)); }
.pf-scrim.night { background: rgba(9,8,14,.92); }
.pf-scrim.morning { background: linear-gradient(180deg, rgba(255,206,140,.22) 0%, rgba(20,16,12,.5) 55%, rgba(14,10,8,.72) 100%); }
.pf-scrim.portal {
  background:
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(160deg, rgba(10,58,54,.93), rgba(8,30,30,.95));
}
.pf-scrim.dusk { background: linear-gradient(180deg, rgba(34,20,58,.9) 0%, rgba(86,38,72,.8) 58%, rgba(214,112,78,.66) 100%); }
.pf-scrim.sunny { background: linear-gradient(165deg, rgba(252,206,128,.9), rgba(236,128,98,.86)); }
.pf-scrim.red { background: radial-gradient(120% 110% at 50% 45%, rgba(70,12,18,.78), rgba(18,4,7,.94)); }
.pf-scrim.black { background: radial-gradient(110% 100% at 50% 38%, #1d1a27 0%, #0b0a0f 70%); }

/* ================================================================ card */
.pf-card {
  position: relative; display: flex; flex-direction: column;
  width: min(560px, 100%); max-height: 100%;
  background: var(--paper); color: var(--ink);
  border-radius: 22px; overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(31,45,43,.08), inset 0 1px 0 #fffcf4,
    0 3px 0 var(--paper3),
    0 40px 80px -30px rgba(0,0,0,.75), 0 14px 30px -16px rgba(0,0,0,.45);
  transform: translateY(16px) scale(.985);
  transition: transform .5s var(--e-out);
}
.pf-screen.in .pf-card { transform: none; }
.pf-screen.out .pf-card { transform: translateY(8px) scale(.99); transition: transform .18s var(--e-in); }
.pf-card-body {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  touch-action: pan-y; -webkit-overflow-scrolling: touch;
  padding: 16px 20px 18px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
  /* scroll shadows: appear only when there is more content above/below */
  background:
    linear-gradient(var(--paper) 30%, rgba(248,242,230,0)) top / 100% 26px no-repeat local,
    linear-gradient(rgba(248,242,230,0), var(--paper) 70%) bottom / 100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(31,45,43,.16), rgba(31,45,43,0)) top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(31,45,43,.16), rgba(31,45,43,0)) bottom / 100% 10px no-repeat scroll,
    var(--paper);
}
.pf-foot {
  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 12px 20px 14px; background: var(--paper2); border-top: 1px solid var(--line);
}
.pf-foot.split { justify-content: space-between; }
.pf-foot .pf-fine { margin: 0; }

/* portal header bar */
.pf-bar {
  flex: none; display: flex; align-items: center; gap: 10px; min-height: 46px;
  padding: 8px 12px 8px 14px; background: var(--paper2); border-bottom: 1px solid var(--line);
}
.pf-logo { flex: none; display: flex; align-items: center; gap: 7px; }
.pf-logo svg { width: 24px; height: 24px; display: block; }
.pf-logo-t { font: 700 15px/1 var(--round); letter-spacing: -.01em; color: var(--ink); }
.pf-logo-t b { color: var(--coral); font-weight: 700; margin-left: 1px; }
.pf-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ink2); }
.pf-crumb::before { content: '›'; margin-right: 6px; color: var(--ink3); font-weight: 400; }
.pf-crumb:last-child { color: var(--ink); }
.pf-bar-r { margin-left: auto; flex: none; display: flex; align-items: center; }
.pf-chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  font: 700 12px/1 var(--round); color: var(--ink2); white-space: nowrap;
}
.pf-chip.ok { background: var(--teal3); color: var(--teal2); box-shadow: none; }
.pf-chip.bad { background: var(--coral3); color: var(--coral2); box-shadow: none; }

.pf-fine { font-size: calc(11.5px * var(--ts, 1)); line-height: 1.4; color: var(--ink3); margin-top: 12px; }
.pf-fine i { font-style: normal; color: var(--coral); }
.pf-fine span { font-style: italic; }
.pf-fine.center { text-align: center; }
.pf-over {
  display: flex; align-items: center; gap: 8px;
  font: 700 11px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(248,242,230,.72);
}
.pf-over.ink { color: var(--ink2); letter-spacing: .12em; }
.pf-svg { display: block; pointer-events: none; }
.pf-svg svg { display: block; width: 100%; height: auto; }

/* ================================================================ buttons */
.pf-btn {
  --b-bg: var(--card); --b-fg: var(--ink); --b-edge: var(--line2); --b-ring: transparent; --b-hover: var(--b-bg);
  position: relative; appearance: none; -webkit-appearance: none; border: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: 14px;
  background: var(--b-bg); color: var(--b-fg); text-align: left;
  font: 700 calc(16px * var(--ts, 1))/1.1 var(--round); letter-spacing: -.005em;
  box-shadow: 0 3px 0 var(--b-edge), inset 0 0 0 1.5px var(--b-ring);
  transition: transform .14s var(--e-back), box-shadow .14s var(--e-out), background-color .15s, color .15s;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.pf-btn:hover { background: var(--b-hover); }
.pf-btn:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 0 0 var(--b-edge), inset 0 0 0 1.5px var(--b-ring); transition-duration: 60ms; }
.pf-btn:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }
.pf-btn.primary { --b-bg: var(--teal); --b-fg: #fbf7ef; --b-edge: var(--teal2); --b-hover: #11887f; }
.pf-btn.secondary, .pf-btn.back { --b-bg: var(--card); --b-fg: var(--ink); --b-edge: var(--line2); --b-ring: var(--line); --b-hover: #fff; }
.pf-btn.quiet { --b-bg: transparent; --b-fg: var(--teal2); --b-edge: transparent; --b-hover: var(--teal3); box-shadow: none; }
.pf-btn.danger { --b-bg: transparent; --b-fg: var(--coral2); --b-edge: transparent; --b-hover: var(--coral3); box-shadow: none; }
.pf-btn.locked { --b-bg: transparent; --b-fg: var(--ink3); --b-edge: transparent; box-shadow: none; cursor: not-allowed;
  background-image: linear-gradient(90deg, var(--line2) 50%, transparent 0), linear-gradient(90deg, var(--line2) 50%, transparent 0),
                    linear-gradient(0deg, var(--line2) 50%, transparent 0), linear-gradient(0deg, var(--line2) 50%, transparent 0);
  background-size: 10px 1.5px, 10px 1.5px, 1.5px 10px, 1.5px 10px; background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 0 0, 0 100%, 0 0, 100% 0; }
.pf-btn.back-dark { --b-bg: rgba(255,255,255,.1); --b-fg: #f3eee4; --b-edge: rgba(0,0,0,.45); --b-ring: rgba(255,255,255,.14); --b-hover: rgba(255,255,255,.16); }
.pf-btn.confirm { --b-bg: var(--coral); --b-fg: #fff; --b-edge: var(--coral2); --b-ring: transparent; --b-hover: var(--coral); animation: pfNudge .35s var(--e-back); }
@keyframes pfNudge { 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }
.pf-btn[disabled] { cursor: not-allowed; }
.pf-btn-i { flex: none; display: inline-grid; place-items: center; width: 1.25em; font-size: 1.05em; line-height: 1; }
.pf-btn-i svg { width: 17px; height: 17px; display: block; }
.pf-btn.busy .pf-btn-i { animation: pfSpin .8s linear infinite; }
@keyframes pfSpin { to { transform: rotate(360deg); } }
.pf-btn-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-btn-l { white-space: nowrap; }
.pf-btn-s { font: 600 calc(11.5px * var(--ts, 1))/1.15 var(--sans); letter-spacing: .01em; opacity: .74; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-btn.xl { width: 100%; min-height: 56px; font-size: calc(19px * var(--ts, 1)); border-radius: 16px; }
.pf-btn.sm { min-height: 44px; padding: 0 16px; font-size: calc(15px * var(--ts, 1)); border-radius: 12px; }
.pf-stack { display: flex; flex-direction: column; gap: 9px; }
.pf-stack > .pf-btn { width: 100%; justify-content: flex-start; padding-left: 16px; }
.pf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pf-row2 > .pf-btn { width: 100%; }

/* ================================================================ TITLE */
.pf-title { padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.pf-title-wrap {
  width: 100%; max-width: 1240px; max-height: 100%; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 344px); align-items: center; gap: 28px;
}
.pf-title-l { color: #f8f2e6; min-width: 0; }
.pf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(242,96,76,.28); }
.pf-word {
  margin: 12px 0 10px -.03em;
  font: 700 clamp(54px, 10.5vh + 3.2vw, 156px)/.84 var(--round); letter-spacing: -.035em;
  color: #f8f2e6;
}
.pf-word-row { display: block; white-space: nowrap; }
.pf-ch {
  position: relative; display: inline-block;
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px));
  text-shadow: .05em .045em 0 var(--coral), -.028em -.022em 0 rgba(22,160,148,.9);
  transition: transform .5s var(--e-back);
}
.pf-ch.smear::after {
  content: attr(data-ch); position: absolute; left: .09em; top: -.05em; color: #f8f2e6; opacity: .22;
  filter: blur(1.2px); text-shadow: none; transform: skewX(-8deg);
}
.pf-ch.misfire { color: #fde7a6; animation: pfMis .26s steps(3) infinite; }
@keyframes pfMis { 0% { transform: rotate(var(--r)) translate(1px, var(--y)); } 50% { transform: rotate(calc(var(--r) * -1)) translate(-2px, var(--y)); } 100% { transform: rotate(var(--r)) translate(0, calc(var(--y) + 1px)); } }
.pf-ch.dup { opacity: .55; margin-left: -.32em; filter: blur(.6px); }
.pf-spark {
  display: inline-block; vertical-align: top; margin: .02em 0 0 .08em;
  font-size: .42em; color: var(--mustard); text-shadow: 0 0 .4em rgba(240,178,58,.6);
  animation: pfTwinkle 3.2s ease-in-out infinite;
}
@keyframes pfTwinkle { 0%, 100% { transform: rotate(0) scale(1); opacity: 1; } 45% { transform: rotate(90deg) scale(.72); opacity: .7; } 55% { transform: rotate(100deg) scale(1.12); opacity: 1; } }
.pf-sub { font: 600 clamp(12.5px, .9vw + .9vh, 19px)/1.3 var(--sans); letter-spacing: .05em; color: rgba(248,242,230,.86); }
.pf-tag { margin-top: 14px; font: 500 clamp(11.5px, .6vw + .6vh, 14px)/1.3 var(--sans); color: rgba(248,242,230,.5); }

.pf-title-card { width: 100%; justify-self: end; }
.pf-title-card .pf-card-body { padding: 16px 18px 14px; }
.pf-hello { font: 700 calc(20px * var(--ts, 1))/1.15 var(--round); letter-spacing: -.01em; }
.pf-hello-sp { color: var(--coral); }
.pf-hello-sub { margin: 4px 0 14px; font-size: calc(13.5px * var(--ts, 1)); color: var(--ink2); }
.pf-illo-plant { position: absolute; right: 12px; bottom: 6px; width: 34px; opacity: .95; }
.pf-title-card .pf-fine { padding-right: 40px; }

/* ================================================================ SETTINGS */
.pf-settings-card { width: min(900px, 100%); }
.pf-set-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pf-group { background: var(--card); border-radius: 16px; padding: 12px 14px 4px; box-shadow: inset 0 0 0 1px var(--line); }
.pf-group h3 { font: 800 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--teal2); margin: 2px 0 6px; }
.pf-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 0; border-top: 1px dashed var(--line); }
.pf-group h3 + .pf-set-row { border-top: 0; }
.pf-set-row.col { flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: 10px; }
.pf-set-t { font: 700 calc(15px * var(--ts, 1))/1.2 var(--round); }
.pf-set-d { font-size: calc(12px * var(--ts, 1)); line-height: 1.35; color: var(--ink2); margin-top: 2px; }
.pf-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border-radius: 13px; background: var(--paper3); }
.pf-seg-b {
  appearance: none; border: 0; margin: 0; cursor: pointer; min-height: 44px; padding: 0 4px; border-radius: 10px; min-width: 0;
  background: transparent; color: var(--ink2); font: 700 calc(14px * min(var(--ts, 1), 1.12))/1 var(--round); white-space: nowrap;
  transition: background-color .15s, color .15s, box-shadow .15s, transform .12s var(--e-back);
  touch-action: manipulation;
}
.pf-seg-b:active { transform: scale(.96); }
.pf-seg-b[aria-checked="true"] { background: #fff; color: var(--teal2); box-shadow: 0 1px 0 var(--line2), 0 3px 8px -3px rgba(0,0,0,.18); }
.pf-seg-b:focus-visible { outline: 3px solid var(--mustard); outline-offset: 1px; }
.pf-seg-b .ts1 { font-size: 14px; } .pf-seg-b .ts2 { font-size: 17px; } .pf-seg-b .ts3 { font-size: 20px; }

.pf-switch {
  position: relative; flex: none; width: 58px; height: 44px; padding: 0; border: 0; margin: 0;
  background: transparent; cursor: pointer; touch-action: manipulation;
}
.pf-switch::before {
  content: ''; position: absolute; left: 3px; right: 3px; top: 7px; bottom: 7px; border-radius: 15px;
  background: var(--line2); transition: background-color .2s;
}
.pf-knob {
  position: absolute; left: 6px; top: 10px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.12);
  transition: transform .26s var(--e-back);
}
.pf-switch[aria-checked="true"]::before { background: var(--teal); }
.pf-switch[aria-checked="true"] .pf-knob { transform: translateX(22px); }
.pf-switch:focus-visible { outline: 3px solid var(--mustard); outline-offset: -2px; border-radius: 16px; }

.pf-slider { display: flex; align-items: center; gap: 10px; flex: none; }
.pf-set-row.vol { gap: 0; padding-bottom: 4px; }
.pf-set-row.vol .pf-set-l { display: flex; align-items: baseline; justify-content: space-between; }
.pf-set-row.vol .pf-slider { width: 100%; }
.pf-set-row.vol .pf-range { width: 100%; height: 36px; }
.pf-val { min-width: 40px; text-align: right; font: 700 13px/1 var(--round); color: var(--ink2); font-variant-numeric: tabular-nums; }
.pf-range { -webkit-appearance: none; appearance: none; width: 120px; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: none; --v: 50%; }
.pf-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(var(--teal), var(--teal)) 0 0 / var(--v) 100% no-repeat, var(--paper3); }
.pf-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--teal), 0 2px 6px rgba(0,0,0,.25); }
.pf-range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--paper3); }
.pf-range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--teal); }
.pf-range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--teal), 0 2px 6px rgba(0,0,0,.25); }
.pf-range:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; border-radius: 8px; }
.pf-settings-card .pf-foot .pf-fine { max-width: 46ch; }

/* ================================================================ PAUSE + CHEAT SHEET */
.pf-pause-card { width: min(420px, 100%); }
.pf-pause-head { display: flex; align-items: center; gap: 14px; }
.pf-cup { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: var(--teal3); }
.pf-pause-head h2 { font: 700 calc(22px * var(--ts, 1))/1.1 var(--round); letter-spacing: -.01em; }
.pf-pause-head p { font-size: calc(13px * var(--ts, 1)); color: var(--ink2); margin-top: 4px; }
.pf-statline { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; }
.pf-statline span { font: 700 12px/1 var(--round); color: var(--ink2); background: var(--paper2); box-shadow: inset 0 0 0 1px var(--line); padding: 6px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.pf-pause-card .pf-btn.danger { justify-content: center; }

.pf-cheat-card { width: min(940px, 100%); }
.pf-cheat-card .pf-card-body { position: relative; }
.pf-cheat-card .pf-card-body::before {
  content: ''; position: absolute; right: 26px; top: -18px; width: 92px; height: 92px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, transparent 56%, rgba(130,84,36,.16) 58%, rgba(130,84,36,.08) 63%, transparent 66%);
  transform: rotate(20deg);
}
.pf-cheat-note { font: italic 600 calc(13px * var(--ts, 1))/1.3 var(--sans); color: var(--ink2); margin: 0 0 12px; }
.pf-fault-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 9px; }
.pf-fault {
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 14px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line), inset 4px 0 0 var(--fc);
}
.pf-fault-i {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 21px;
  background: color-mix(in srgb, var(--fc) 18%, #fff);
}
.pf-fault-n { font: 700 calc(15px * var(--ts, 1))/1.2 var(--round); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pf-sev { font: 800 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 3px 5px 2px; border-radius: 5px; background: var(--paper3); color: var(--ink2); transform: translateY(-1px); }
.pf-sev.s2 { background: var(--mustard3); color: var(--mustard2); }
.pf-sev.s3 { background: var(--coral3); color: var(--coral2); }
.pf-fault-t { font-size: calc(12.5px * var(--ts, 1)); line-height: 1.38; color: var(--ink2); margin-top: 3px; }
.pf-locked-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--ink3); font-weight: 600; }
.pf-locked-note .pf-svg { width: 15px; color: var(--ink3); }

/* ================================================================ CREDITS */
.pf-credits-wrap { width: min(620px, 100%); height: 100%; display: flex; flex-direction: column; gap: 10px; }
.pf-roll {
  flex: 1 1 auto; min-height: 0; overflow: auto; touch-action: pan-y; scrollbar-width: none; outline: none;
  -webkit-mask-image: linear-gradient(transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(transparent 0, #000 16%, #000 84%, transparent 100%);
  color: #f3eee4; text-align: center;
}
.pf-roll::-webkit-scrollbar { display: none; }
.pf-roll-in { padding: 34vh 12px 30vh; display: flex; flex-direction: column; gap: 16px; }
.pf-cr-h { font: 700 clamp(44px, 8vh + 2vw, 84px)/.9 var(--round); letter-spacing: -.03em; text-shadow: .05em .045em 0 var(--coral), -.028em -.022em 0 rgba(22,160,148,.9); }
.pf-cr-h2 { font: 700 26px/1.1 var(--round); margin-top: 22px; color: var(--mustard); }
.pf-cr-s { font: 600 13px/1.3 var(--sans); letter-spacing: .08em; color: rgba(243,238,228,.7); margin-top: -6px; }
.pf-cr-g { font: 700 13px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mustard); margin-top: 18px; }
.pf-cr-r { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 15px; line-height: 1.3; }
.pf-cr-r span { text-align: right; color: rgba(243,238,228,.6); }
.pf-cr-r b { text-align: left; font-weight: 650; }
.pf-cr-p { font-size: 14px; line-height: 1.5; color: rgba(243,238,228,.68); max-width: 46ch; margin: 6px auto 0; }
.pf-credits-foot { flex: none; display: flex; justify-content: center; }

/* ================================================================ MORNING (time card) */
.pf-morning-card { width: min(600px, 100%); }
.pf-tc { display: flex; gap: 16px; align-items: stretch; }
.pf-tc-day {
  position: relative; flex: none; width: 98px; border-radius: 12px 12px 12px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px 0 12px;
  background: #f1d99f; color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(120,86,20,.22), 0 2px 0 #d9bd79;
}
.pf-tc-day::before {
  content: ''; position: absolute; top: 7px; left: 50%; width: 30px; height: 7px; margin-left: -15px; border-radius: 4px;
  background: var(--paper); box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.pf-tc-n { font: 700 54px/.9 var(--round); letter-spacing: -.04em; }
.pf-tc-w { font: 800 12px/1 var(--sans); letter-spacing: .22em; color: rgba(31,45,43,.6); }
.pf-punch {
  position: absolute; inset: 14px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid var(--coral2); border-radius: 10px; color: var(--coral2); background: rgba(241,217,159,.78);
  font-family: var(--mono); opacity: 0; transform: rotate(-14deg) scale(1.7);
  transition: opacity .12s, transform .32s cubic-bezier(.2, 1.5, .4, 1);
}
.pf-punch b { font: 800 26px/1 var(--round); letter-spacing: .06em; }
.pf-punch span { font-size: 11px; font-weight: 700; margin-top: 3px; }
.pf-morning.punched .pf-punch { opacity: .94; transform: rotate(-11deg) scale(1); }
.pf-tc-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.pf-tc-title { font: 700 calc(30px * var(--ts, 1))/1.04 var(--round); letter-spacing: -.02em; margin: 7px 0 9px; text-wrap: balance; }
.pf-infi {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  background: #ece5fb; color: #4c2fa3; font: 600 calc(12.5px * var(--ts, 1))/1 var(--sans);
}
.pf-infi b { font-weight: 800; }
.pf-infi-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #a855f7, #ec4899); box-shadow: 0 0 0 3px rgba(168,85,247,.18); }
.pf-ini {
  position: relative; margin: 16px 4px 2px; padding: 12px 16px 13px;
  background: var(--mustard3); border-radius: 3px 14px 14px 14px;
  transform: rotate(-.7deg);
  box-shadow: 0 1px 0 #ead69a, 0 8px 18px -10px rgba(90,64,10,.5);
}
.pf-ini-k { font: 800 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mustard2); }
.pf-ini-t { font: 700 calc(19px * var(--ts, 1))/1.2 var(--round); margin-top: 6px; }
.pf-ini-r { font-size: calc(13px * var(--ts, 1)); color: var(--ink2); margin-top: 4px; }
.pf-morning-card .pf-foot { background: var(--paper); border-top: 0; padding-top: 4px; }

/* ================================================================ REVIEW */
.pf-review-card { width: min(1080px, 100%); }
.pf-rv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.pf-rv-head h2 { font: 700 calc(20px * var(--ts, 1))/1.1 var(--round); letter-spacing: -.01em; }
.pf-rv-head span { font-size: 12.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-rv-grid { display: grid; grid-template-columns: minmax(170px, .78fr) minmax(250px, 1.3fr) minmax(220px, 1fr); gap: 18px; align-items: start; }
.pf-rv-a { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pf-rv-k { font: 800 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.pf-rv-cap { font-size: 11.5px; color: var(--ink3); font-weight: 600; margin-top: 2px; }

.pf-stamp {
  position: relative; width: 136px; height: 136px; margin: 8px 0 4px; color: var(--coral);
  opacity: 0; transform: rotate(-22deg) scale(1.9);
  transition: opacity .1s linear, transform .34s cubic-bezier(.2, 1.45, .4, 1);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -4 3.5'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -4 3.5'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  -webkit-mask-size: 140px 140px; mask-size: 140px 140px;
}
.pf-stamp.land { opacity: 1; transform: rotate(-9deg) scale(1); }
.pf-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pf-stamp .o { fill: none; stroke: currentColor; stroke-width: 7; }
.pf-stamp .i { fill: none; stroke: currentColor; stroke-width: 2.5; }
.pf-stamp .ring { fill: currentColor; font: 700 14.5px var(--round); letter-spacing: 1.6px; }
.pf-stamp-g { position: absolute; inset: 0; display: grid; place-items: center; font: 700 64px/1 var(--round); letter-spacing: -.06em; padding: 4px 6px 0 0; -webkit-text-stroke: 1.5px currentColor; }

.pf-integ {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 7px 12px 7px 7px; border-radius: 13px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-align: left;
}
.pf-integ-g { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font: 700 21px/1 var(--round); background: var(--paper3); color: var(--ink); }
.pf-integ-g.gA, .pf-integ-g.gB { background: var(--teal3); color: var(--teal2); }
.pf-integ-g.gC { background: var(--mustard3); color: var(--mustard2); }
.pf-integ-g.gD, .pf-integ-g.gF { background: var(--coral3); color: var(--coral2); }
.pf-integ-t b { display: block; font: 700 14px/1.1 var(--round); }
.pf-integ-t span { font-size: 11.5px; color: var(--ink3); font-weight: 600; }

.pf-m { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 6px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.pf-m-l { font: 800 11px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink3); }
.pf-m-v { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 700 calc(21px * var(--ts, 1))/1 var(--round); font-variant-numeric: tabular-nums; }
.pf-m-v small { font: 600 calc(12.5px * var(--ts, 1))/1.2 var(--sans); color: var(--ink2); }
.pf-m.sm .pf-m-v { font-size: calc(15.5px * var(--ts, 1)); }
.pf-meter { grid-column: 2; display: block; height: 7px; border-radius: 4px; background: var(--paper3); overflow: hidden; }
.pf-bar-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--teal-hi)); transition: width .9s var(--e-out) .1s; }
.pf-pill { font: 700 11px/1 var(--round); padding: 4px 7px; border-radius: 999px; background: var(--paper3); color: var(--ink2); }
.pf-pill.ok { background: var(--teal3); color: var(--teal2); }
.pf-pill.bad { background: var(--coral3); color: var(--coral2); }
.pf-stars { position: relative; display: inline-block; font-size: 17px; line-height: 1; letter-spacing: 1px; }
.pf-stars-bg { color: var(--line2); }
.pf-stars-fg { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--mustard); }
.pf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 9px 0 8px; border-bottom: 1px dashed var(--line); }
.pf-tile { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.pf-tile b { font: 700 calc(23px * var(--ts, 1))/1 var(--round); font-variant-numeric: tabular-nums; }
.pf-tile span { font-size: 11.5px; font-weight: 650; color: var(--ink2); white-space: nowrap; }
.pf-tile.caught b { color: var(--teal2); } .pf-tile.missed b { color: var(--coral2); } .pf-tile.false b { color: var(--mustard2); }
.pf-wu { display: inline-flex; gap: 4px; }
.pf-wu i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--line2); }
.pf-wu i.on { background: var(--coral); box-shadow: none; }

.pf-stub {
  position: relative; margin-top: 6px; padding: 13px 14px 9px; border-radius: 4px 4px 10px 10px;
  background: #fff; box-shadow: 0 1px 0 var(--line2), 0 10px 20px -14px rgba(0,0,0,.4);
  font-family: var(--mono); font-size: calc(13px * var(--ts, 1));
}
.pf-stub::before {
  content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 10px;
  background: radial-gradient(circle at 6px 5px, var(--paper) 3.6px, transparent 4.2px) 0 0 / 12px 10px repeat-x;
}
.pf-stub-h { display: flex; justify-content: space-between; padding-bottom: 7px; margin-bottom: 3px; border-bottom: 1px solid var(--line);
  font: 800 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.pf-pay-r { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; }
.pf-pay-r span { color: var(--ink2); white-space: nowrap; }
.pf-pay-r i { flex: 1; min-width: 10px; border-bottom: 1.5px dotted var(--line2); transform: translateY(-3px); }
.pf-pay-r b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-pay-r.plus b { color: var(--teal2); } .pf-pay-r.minus b { color: var(--coral2); }
.pf-pay-r.total { margin-top: 4px; padding-top: 8px; border-top: 2px solid var(--ink); }
.pf-pay-r.total span { color: var(--ink); font-weight: 700; } .pf-pay-r.total b { font-size: 1.25em; }

.pf-port { position: relative; display: inline-block; border-radius: 50%; overflow: hidden; background: var(--paper3); }
.pf-port canvas { display: block; width: 100%; height: 100%; }
.pf-quote { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; }
.pf-quote-p { flex: none; width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px #8b6cf0; }
.pf-quote-b { position: relative; min-width: 0; padding: 9px 12px 10px; border-radius: 4px 14px 14px 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.pf-quote-n { font: 800 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 5px; }
.pf-quote-t { font: 600 calc(14.5px * var(--ts, 1))/1.35 var(--sans); }
.pf-illo-star { position: absolute; left: 12px; bottom: 6px; width: 50px; pointer-events: none; z-index: 2; }
.pf-review-card .pf-foot { padding-left: 74px; }

/* ================================================================ EVENING */
.pf-eve-wrap { display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%; height: 100%; }
.pf-phone {
  flex: none; display: flex; flex-direction: column; width: 290px; height: min(calc(100% - 18px), 540px);
  padding: 10px 9px 12px; border-radius: 34px; background: #0f0e14; color: #eeeef2;
  box-shadow: 0 0 0 2px #2b2934, 0 0 0 7px #0a090d, 0 0 0 8px #34313d, 0 34px 70px -24px rgba(0,0,0,.8);
  transform: rotate(-2.2deg) translateY(10px); transition: transform .6s var(--e-out);
}
.pf-screen.in .pf-phone { transform: rotate(-2.2deg); }
.pf-ph-status { display: flex; justify-content: space-between; padding: 2px 14px 7px; font: 700 12px/1 var(--sans); }
.pf-ph-ic { letter-spacing: -1px; opacity: .8; font-size: 11px; }
.pf-ph-app { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 22px 22px 8px 8px; background: linear-gradient(180deg, #34b0ee, #1f8fd2); color: #fff; }
.pf-ph-app b { display: block; font: 700 15px/1.1 var(--round); }
.pf-ph-app span { font-size: 11px; opacity: .85; }
.pf-ph-av { flex: none; width: 34px; height: 34px; background: #e3f4fd; }
.pf-ph-thread { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 12px 4px 4px; scrollbar-width: none; }
.pf-bub { display: inline-block; max-width: 94%; padding: 9px 12px; border-radius: 16px 16px 16px 5px; background: #2a2933; font-size: calc(14px * var(--ts, 1)); line-height: 1.35; }
.pf-rc-list { margin-top: 9px; padding: 3px 12px; border-radius: 14px; background: #1b1a22; }
.pf-rc {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.07); font-size: calc(13.5px * var(--ts, 1)); line-height: 1.3;
  opacity: 0; transform: translateY(6px); transition: opacity .3s var(--e-out), transform .45s var(--e-out);
}
.pf-rc:last-child { border-bottom: 0; }
.pf-rc-list.on .pf-rc { opacity: 1; transform: none; }
.pf-rc b { flex: none; font: 700 13px/1 var(--mono); color: #ff8f80; }
.pf-rc.pos b { color: #7ef0c4; }
.pf-rc-total { display: flex; justify-content: space-between; padding: 10px 12px 2px; font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pf-rc-total b { font: 700 14px/1 var(--mono); letter-spacing: 0; color: #fff; }

.pf-evening-card { width: min(410px, 100%); }
.pf-eve-title { font: 700 calc(22px * var(--ts, 1))/1.1 var(--round); letter-spacing: -.01em; }
.pf-bal { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.pf-bal span { font: 800 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.pf-bal-v { font: 700 calc(40px * var(--ts, 1))/1 var(--round); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pf-rent { display: flex; align-items: center; gap: 13px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.pf-rent > span:last-child { font: 700 calc(15px * var(--ts, 1))/1.15 var(--round); }
.pf-rent small { display: block; margin-top: 3px; font: 500 calc(12px * var(--ts, 1))/1.3 var(--sans); color: var(--ink2); }
.pf-rent-s { flex: none; padding: 6px 8px; border: 2.5px solid currentColor; border-radius: 6px; font: 800 12px/1 var(--sans); letter-spacing: .14em; transform: rotate(-5deg); }
.pf-rent.paid .pf-rent-s { color: var(--teal); }
.pf-rent.missed .pf-rent-s { color: var(--coral2); }
.pf-rent.due .pf-rent-s { color: var(--ink3); }
.pf-tmrw { margin-top: 12px; overflow: hidden; border-radius: 12px; background: #1b1724; color: #fff; }
.pf-tmrw-k { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #e43c3c; font: 800 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.pf-tmrw-k span { padding: 3px 5px; border-radius: 4px; background: #fff; color: #e43c3c; letter-spacing: .04em; }
.pf-tmrw-h { padding: 9px 12px 4px; font: 800 calc(14.5px * var(--ts, 1))/1.22 var(--sans); text-transform: uppercase; letter-spacing: .01em; }
.pf-tmrw-l { padding: 2px 12px 10px; font-size: calc(13px * var(--ts, 1)); line-height: 1.35; color: rgba(255,255,255,.74); }
.pf-tmrw-h:last-child { padding-bottom: 11px; }
.pf-saved { font: 700 12px/1 var(--round); color: var(--ink3); padding: 7px 10px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.pf-saved.ok { color: var(--teal2); background: var(--teal3); box-shadow: none; }

/* ================================================================ WEEKEND */
.pf-weekend-card { width: min(720px, 100%); }
.pf-mail { padding: 2px 12px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: calc(13px * var(--ts, 1)); }
.pf-mail > div { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.pf-mail > div + div { border-top: 1px solid var(--line); }
.pf-mail > div > span:first-child { width: 56px; color: var(--ink3); font-weight: 600; }
.pf-mail-auto { margin-left: auto; padding: 4px 6px; border-radius: 5px; background: var(--mustard3); color: var(--mustard2); font: 800 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.pf-wk-p { margin: 11px 2px 13px; font-size: calc(14.5px * var(--ts, 1)); line-height: 1.45; color: var(--ink2); }
.pf-wk-k { font: 800 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--teal2); }
.pf-wk-list { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pf-wk-b {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff;
  box-shadow: 0 1px 0 var(--line2); font: 600 calc(14.5px * var(--ts, 1))/1.35 var(--sans);
  opacity: 0; transform: translateX(-12px); transition: opacity .35s var(--e-out), transform .55s var(--e-out);
}
.pf-wk-list.on .pf-wk-b { opacity: 1; transform: none; }
.pf-wk-d { flex: none; margin-top: 1px; padding: 5px 6px; border-radius: 6px; background: var(--teal3); color: var(--teal2); font: 800 11px/1 var(--sans); letter-spacing: .12em; }
.pf-illo-sun { position: absolute; right: 12px; top: 5px; width: 54px; pointer-events: none; }
.pf-weekend-card .pf-bar { padding-right: 76px; }

/* ================================================================ GAME OVER */
.pf-over-card { width: min(540px, 100%); }
.pf-over-card .pf-card-body { padding-top: 20px; }
.pf-over-stamp {
  display: inline-block; margin: 0 0 14px 2px; padding: 8px 12px 7px; border: 3.5px solid currentColor; border-radius: 9px;
  color: var(--coral2); font: 800 22px/1 var(--sans); letter-spacing: .22em; transform: rotate(-5deg);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -5 3.4'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -5 3.4'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
.pf-over-t { font: 700 calc(30px * var(--ts, 1))/1.05 var(--round); letter-spacing: -.02em; }
.pf-over-s { margin-top: 6px; font: 600 calc(15px * var(--ts, 1))/1.3 var(--sans); color: var(--ink2); }
.pf-over-p { margin-top: 12px; font-size: calc(14px * var(--ts, 1)); line-height: 1.5; color: var(--ink2); }

/* ================================================================ ENDING */
.pf-ending { flex-direction: column; color: #f3eee4; cursor: pointer; }
.pf-end-stage { flex: 1 1 auto; width: min(1000px, 100%); min-height: 0; }
.pf-end-step {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(12px); transition: opacity .5s var(--e-out), transform .7s var(--e-out);
}
.pf-end-step.on { opacity: 1; transform: none; }
.pf-end-step.leave { opacity: 0; transform: translateY(-10px); transition-duration: .3s; transition-timing-function: var(--e-in); }
.pf-end-step > * { max-height: 100%; }
.pf-end-title { text-align: center; padding: 0 16px; }
.pf-end-k { font: 800 12px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--mustard); }
.pf-end-k.ink { color: var(--teal2); }
.pf-end-title h1 {
  margin: 16px 0 12px; font: 700 clamp(42px, 7vw + 2vh, 104px)/.92 var(--round); letter-spacing: -.035em; text-wrap: balance;
  text-shadow: .045em .04em 0 var(--coral), -.025em -.02em 0 rgba(22,160,148,.85);
}
.pf-end-title p { max-width: 36ch; margin: 0 auto; font: 500 clamp(15px, 1vw + 1vh, 20px)/1.4 var(--sans); color: rgba(243,238,228,.75); }
.pf-end-slide { display: flex; align-items: center; gap: clamp(20px, 4vw, 54px); padding: 0 24px; }
.pf-art {
  position: relative; flex: none; width: clamp(150px, 30vh + 5vw, 320px); aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 24px; overflow: hidden; background: #221f2c;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -20px rgba(0,0,0,.85);
  transform: rotate(-1.5deg);
}
.pf-art-p { width: 100%; height: 100%; border-radius: 0; background: #2a2636; }
.pf-art.scene { background: radial-gradient(90% 70% at 50% 30%, rgba(255,255,255,.22), transparent 60%), linear-gradient(165deg, var(--c2), var(--c1)); }
.pf-art-g { font-size: clamp(56px, 10vh + 2vw, 120px); line-height: 1; filter: drop-shadow(0 10px 18px rgba(0,0,0,.4)); }
.pf-art-w { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 800 11.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.pf-end-t { max-width: 30ch; font: 600 clamp(18px, 1.3vw + 1.2vh, 27px)/1.42 var(--sans); text-wrap: pretty; }
.pf-end-epi { padding: 0 16px; }
.pf-end-epi-card {
  max-width: 620px; padding: 24px 30px 26px; border-radius: 20px; background: var(--paper); color: var(--ink);
  transform: rotate(-.6deg); box-shadow: 0 30px 70px -26px rgba(0,0,0,.85);
}
.pf-end-epi-card p { margin-top: 12px; font: 500 calc(17px * var(--ts, 1))/1.55 var(--sans); }
.pf-end-credits { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; height: 100%; padding: 4px 0; cursor: default; }
.pf-end-credits .pf-roll { width: min(600px, 100%); }
.pf-end-credits .pf-roll-in { padding: 12vh 12px 16vh; }
.pf-unlock {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 9px 18px 9px 9px; border-radius: 16px;
  background: linear-gradient(135deg, var(--teal), var(--teal-hi)); color: #fbf7ef;
  box-shadow: 0 12px 30px -10px rgba(22,160,148,.65), inset 0 1px 0 rgba(255,255,255,.2);
}
.pf-unlock > span { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.18); font: 700 26px/1 var(--round); }
.pf-unlock b { display: block; font: 700 17px/1.1 var(--round); }
.pf-unlock small { font-size: 12.5px; opacity: .85; }
.pf-end-btns { flex: none; display: flex; gap: 10px; }
.pf-end-dots { flex: none; display: flex; gap: 7px; padding: 12px; transition: opacity .3s; }
.pf-end-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background-color .3s; }
.pf-end-dots i.on { background: var(--mustard); }
.pf-end-hint { position: absolute; right: var(--safe-r); bottom: var(--safe-b); font: 600 12.5px/1 var(--sans); color: rgba(243,238,228,.5); transition: opacity .3s; animation: pfHint 2.4s ease-in-out infinite; }
@keyframes pfHint { 50% { opacity: .35; } }
.pf-end-skip { position: absolute !important; top: var(--safe-t); right: var(--safe-r); z-index: 3; }
.pf-ending.at-end { cursor: default; }
.pf-ending.at-end .pf-end-dots, .pf-ending.at-end .pf-end-hint, .pf-ending.at-end .pf-end-skip { opacity: 0; pointer-events: none; animation: none; visibility: hidden; }

/* ================================================================ TEACH card (non-blocking, from Dee's side) */
.pf-teach {
  --fc: var(--teal);
  position: absolute; pointer-events: auto;
  left: calc(max(10px, env(safe-area-inset-left)) + 56px); top: calc(max(8px, env(safe-area-inset-top)) + 54px);
  width: min(290px, 40vw); padding: 12px 14px 12px; border-radius: 18px;
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 4px 0 var(--fc), 0 0 0 1px rgba(31,45,43,.1), 0 26px 50px -18px rgba(0,0,0,.7), 0 8px 18px -10px rgba(0,0,0,.4);
  opacity: 0; transform: translateX(-30px) rotate(-3deg);
  transition: opacity .24s var(--e-out), transform .6s var(--e-back);
}
.pf-teach.in { opacity: 1; transform: rotate(-.8deg); }
.pf-teach.out { opacity: 0; transform: translateX(-20px) rotate(-2deg); transition: opacity .2s var(--e-in), transform .26s var(--e-in); }
.pf-teach.rm, .pf-teach.rm.in { transform: none; transition: opacity .2s linear; }
.pf-teach-h { display: flex; align-items: center; gap: 10px; }
.pf-teach-p { flex: none; width: 36px; height: 36px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px #e0a43a; }
.pf-teach-k { font: 800 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--coral2); }
.pf-teach-from { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--ink3); }
.pf-teach-m { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0 10px; }
.pf-teach-i {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px;
  background: color-mix(in srgb, var(--fc) 20%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fc) 50%, transparent);
}
.pf-teach.in .pf-teach-i { animation: pfWiggle .7s var(--e-out) .35s; }
.pf-teach.rm .pf-teach-i { animation: none; }
@keyframes pfWiggle { 20% { transform: rotate(-12deg) scale(1.1); } 45% { transform: rotate(9deg) scale(1.1); } 70% { transform: rotate(-4deg); } }
.pf-teach-n { font: 700 calc(18px * var(--ts, 1))/1.15 var(--round); letter-spacing: -.01em; }
.pf-teach-t { margin-top: 3px; font-size: calc(13.5px * var(--ts, 1)); line-height: 1.38; color: var(--ink2); }
.pf-teach-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-teach-f > span { font-size: 11.5px; color: var(--ink3); font-weight: 600; }

/* left-handed: the HUD stack moves top-left on phones, so the card drops below it */
@media (max-width: 999px) { .pf-root.lefty .pf-teach { top: calc(max(8px, env(safe-area-inset-top)) + 126px); } }

/* ================================================================ COACH card (one at a time) */
.pf-coach {
  position: absolute; pointer-events: auto; cursor: pointer;
  width: max-content; max-width: min(330px, 44vw); padding: 10px 14px 9px; border-radius: 16px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 2.5px var(--teal), 0 18px 40px -14px rgba(0,0,0,.7);
  opacity: 0; transition: opacity .22s var(--e-out), transform .5s var(--e-back);
}
.pf-coach.in { opacity: 1; }
.pf-coach.out { opacity: 0; transition: opacity .18s var(--e-in); }
.pf-coach-k { font: 800 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--teal2); }
.pf-coach-k span { color: var(--coral); }
.pf-coach-t { margin-top: 5px; font: 650 calc(15px * var(--ts, 1))/1.35 var(--sans); text-wrap: pretty; }
.pf-coach-x { margin-top: 5px; font-size: 11px; color: var(--ink3); }
.pf-coach-arrow {
  position: absolute; width: 32px; height: 32px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 3px rgba(248,242,230,.9), 0 6px 14px rgba(0,0,0,.4);
  display: none; place-items: center;
}
.pf-coach-arrow::before {
  content: ''; width: 9px; height: 9px; border-top: 3px solid #fbf7ef; border-right: 3px solid #fbf7ef;
  transform: translate(-2px, 2px) rotate(-45deg); /* points up */
}
.pf-coach.t-none { left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 62px); transform: translate(-50%, -8px); }
.pf-coach.t-none.in { transform: translate(-50%, 0); }
/* up */
.pf-coach.t-up { left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 100px); transform: translate(-50%, 10px); }
.pf-coach.t-up.in { transform: translate(-50%, 0); }
.pf-coach.t-up .pf-coach-arrow { display: grid; left: 50%; top: -46px; margin-left: -16px; animation: pfBobY 1.1s ease-in-out infinite reverse; }
/* down / phone / keyboard */
.pf-coach.t-down, .pf-coach.t-phone, .pf-coach.t-keyboard { left: 50%; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 104px); transform: translate(-50%, -10px); }
.pf-coach.t-down.in, .pf-coach.t-phone.in, .pf-coach.t-keyboard.in { transform: translate(-50%, 0); }
.pf-coach.t-down .pf-coach-arrow, .pf-coach.t-phone .pf-coach-arrow, .pf-coach.t-keyboard .pf-coach-arrow { display: grid; left: 50%; bottom: -46px; margin-left: -16px; animation: pfBobY 1.1s ease-in-out infinite; }
.pf-coach.t-down .pf-coach-arrow::before, .pf-coach.t-phone .pf-coach-arrow::before, .pf-coach.t-keyboard .pf-coach-arrow::before { transform: translate(-2px, -2px) rotate(135deg); }
/* monitor: above the screen, pointing down at it */
.pf-coach.t-monitor { left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 60px); transform: translate(-50%, -10px); }
.pf-coach.t-monitor.in { transform: translate(-50%, 0); }
.pf-coach.t-monitor .pf-coach-arrow { display: grid; left: 50%; bottom: -46px; margin-left: -16px; animation: pfBobY 1.1s ease-in-out infinite; }
.pf-coach.t-monitor .pf-coach-arrow::before { transform: translate(-2px, -2px) rotate(135deg); }
/* left / right */
.pf-coach.t-left { left: calc(max(10px, env(safe-area-inset-left)) + 104px); top: 50%; transform: translate(12px, -50%); }
.pf-coach.t-left.in { transform: translate(0, -50%); }
.pf-coach.t-left .pf-coach-arrow { display: grid; left: -46px; top: 50%; margin-top: -16px; animation: pfBobX 1.1s ease-in-out infinite reverse; }
.pf-coach.t-left .pf-coach-arrow::before { transform: translate(2px, 0) rotate(-135deg); }
.pf-coach.t-right { right: calc(max(10px, env(safe-area-inset-right)) + 104px); top: 50%; transform: translate(-12px, -50%); }
.pf-coach.t-right.in { transform: translate(0, -50%); }
.pf-coach.t-right .pf-coach-arrow { display: grid; right: -46px; top: 50%; margin-top: -16px; animation: pfBobX 1.1s ease-in-out infinite; }
.pf-coach.t-right .pf-coach-arrow::before { transform: translate(-2px, 0) rotate(45deg); }
/* measured placement (menus.js placeCoach): inline left/top/width; the arrow hugs the card edge */
.pf-coach.js { transform: translate(var(--cx, 0), var(--cy, 0)); }
.pf-coach.js.in { transform: none; }
.pf-coach.js.a-r { --cx: -10px; } .pf-coach.js.a-l { --cx: 10px; } .pf-coach.js.a-u { --cy: 10px; } .pf-coach.js.a-d { --cy: -10px; }
.pf-coach.js .pf-coach-arrow { display: grid; margin: 0; }
.pf-coach.js.a-r .pf-coach-arrow { right: -20px; left: auto; top: calc(var(--ay, 50%) - 16px); bottom: auto; animation: pfBobX 1.1s ease-in-out infinite; }
.pf-coach.js.a-r .pf-coach-arrow::before { transform: translate(-2px, 0) rotate(45deg); }
.pf-coach.js.a-l .pf-coach-arrow { left: -20px; right: auto; top: calc(var(--ay, 50%) - 16px); bottom: auto; animation: pfBobX 1.1s ease-in-out infinite reverse; }
.pf-coach.js.a-l .pf-coach-arrow::before { transform: translate(2px, 0) rotate(-135deg); }
.pf-coach.js.a-u .pf-coach-arrow { top: -20px; bottom: auto; left: clamp(4px, calc(var(--ax, 50%) - 16px), calc(100% - 36px)); animation: pfBobY 1.1s ease-in-out infinite reverse; }
.pf-coach.js.a-u .pf-coach-arrow::before { transform: translate(-2px, 2px) rotate(-45deg); }
.pf-coach.js.a-r { padding-right: 22px; } .pf-coach.js.a-l { padding-left: 22px; }
.pf-coach.rm.js { transform: none; }
@keyframes pfBobY { 50% { transform: translateY(5px); } }
@keyframes pfBobX { 50% { transform: translateX(5px); } }
.pf-coach.rm { transition: opacity .2s linear; }
.pf-coach.rm .pf-coach-arrow { animation: none; }

.pf-glow { position: absolute; pointer-events: none; opacity: 0; transition: opacity .4s var(--e-out); }
.pf-glow.in { opacity: 1; animation: pfGlow 1.6s ease-in-out infinite; }
.pf-glow.out { opacity: 0; animation: none; }
.pf-glow.rm.in { animation: none; opacity: .8; }
.pf-glow.t-left { left: 0; top: 0; bottom: 0; width: 110px; background: linear-gradient(90deg, rgba(22,200,182,.55), rgba(22,200,182,0)); }
.pf-glow.t-right { right: 0; top: 0; bottom: 0; width: 110px; background: linear-gradient(270deg, rgba(22,200,182,.55), rgba(22,200,182,0)); }
.pf-glow.t-up { left: 0; right: 0; top: 0; height: 90px; background: linear-gradient(180deg, rgba(22,200,182,.55), rgba(22,200,182,0)); }
.pf-glow.t-down, .pf-glow.t-phone { left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(0deg, rgba(22,200,182,.55), rgba(22,200,182,0)); }
.pf-glow.t-keyboard { left: 20%; right: 20%; bottom: 0; height: 140px; background: radial-gradient(50% 100% at 50% 100%, rgba(22,200,182,.42), rgba(22,200,182,0)); }
.pf-glow.t-monitor, .pf-glow.t-none { display: none; }
@keyframes pfGlow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ================================================================ reduce motion */
.pf-root.rm .pf-card, .pf-screen.rm .pf-card,
.pf-root.rm .pf-phone, .pf-screen.rm .pf-phone { transition: none; }
.pf-screen.rm .pf-card { transform: none; }
.pf-screen.rm .pf-phone { transform: rotate(-2.2deg); }
.pf-root.rm .pf-spark, .pf-root.rm .pf-end-hint, .pf-root.rm .pf-ch.misfire { animation: none; }
.pf-root.rm .pf-end-step { transform: none; }
.pf-root.rm .pf-stamp { transition: opacity .2s linear; transform: rotate(-9deg); }

/* ================================================================ responsive */
/* short landscape phones (844×390 and friends) */
@media (max-height: 460px) {
  .pf-root { --safe-t: max(10px, env(safe-area-inset-top)); --safe-b: max(10px, env(safe-area-inset-bottom)); }
  .pf-card { border-radius: 18px; }
  .pf-bar { min-height: 40px; padding: 6px 10px 6px 12px; }
  .pf-logo svg { width: 21px; height: 21px; }
  .pf-logo-t { font-size: 14px; }
  .pf-card-body { padding: 11px 16px 12px; }
  .pf-foot { padding: 9px 16px 10px; }
  .pf-btn { min-height: 44px; }
  .pf-stack { gap: 7px; }
  .pf-btn.xl { min-height: 50px; }

  .pf-title-wrap { gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(280px, 312px); }
  .pf-word { margin: 8px 0 8px -.03em; }
  .pf-tag { margin-top: 10px; }
  .pf-title-card .pf-card-body { padding: 11px 14px 10px; }
  .pf-hello { font-size: calc(17px * var(--ts, 1)); }
  .pf-hello-sub { margin: 2px 0 10px; font-size: calc(12.5px * var(--ts, 1)); }
  .pf-title-card .pf-fine { margin-top: 8px; }
  .pf-illo-plant { width: 28px; bottom: 4px; }

  .pf-set-row { min-height: 48px; padding: 4px 0; }
  .pf-group { padding: 9px 12px 2px; }
  /* settings must fit at Larger text: Done moves up into the header bar, the footer goes */
  .pf-settings-card .pf-bar { min-height: 54px; padding-right: 116px; }
  .pf-settings-card .pf-bar-r { display: none; }
  .pf-settings-card .pf-foot { position: absolute; top: 0; right: 0; z-index: 2; padding: 5px 10px 0 0; background: none; border: 0; }
  .pf-settings-card .pf-foot .pf-fine { display: none; }
  .pf-settings-card .pf-card-body { padding: 8px 14px 8px; }
  .pf-settings-card .pf-set-row.col { gap: 6px; padding-bottom: 7px; }

  .pf-pause-head h2 { font-size: calc(19px * var(--ts, 1)); }
  .pf-cup { width: 44px; height: 44px; font-size: 22px; border-radius: 13px; }
  .pf-statline { margin: 9px 0 10px; }

  .pf-tc-n { font-size: 46px; }
  .pf-tc-day { width: 86px; padding: 14px 0 10px; }
  .pf-tc-title { font-size: calc(26px * var(--ts, 1)); margin: 5px 0 7px; }
  .pf-ini { margin-top: 12px; padding: 10px 14px 11px; }
  .pf-ini-t { font-size: calc(17px * var(--ts, 1)); }

  .pf-rv-head { margin-bottom: 6px; }
  .pf-rv-head h2 { font-size: calc(17px * var(--ts, 1)); }
  .pf-rv-grid { gap: 14px; }
  .pf-stamp { width: 108px; height: 108px; margin: 5px 0 2px; }
  .pf-stamp-g { font-size: 48px; }
  .pf-stamp .ring { font-size: 15.5px; }
  .pf-integ { margin-top: 8px; }
  .pf-integ-g { width: 34px; height: 34px; font-size: 18px; }
  .pf-m { padding: 5px 0; row-gap: 5px; }
  .pf-m-v { font-size: calc(18px * var(--ts, 1)); }
  .pf-m.sm .pf-m-v { font-size: calc(14px * var(--ts, 1)); }
  .pf-tiles { padding: 6px 0 6px; gap: 6px; }
  .pf-tile { padding: 6px 8px; }
  .pf-tile b { font-size: calc(19px * var(--ts, 1)); }
  .pf-stub { padding: 10px 12px 6px; font-size: calc(12px * var(--ts, 1)); }
  .pf-pay-r { padding: 3px 0; }
  .pf-quote { margin-top: 9px; }
  .pf-quote-p { width: 38px; height: 38px; }
  .pf-quote-t { font-size: calc(13px * var(--ts, 1)); }
  .pf-illo-star { width: 40px; bottom: 3px; }
  .pf-review-card .pf-foot { padding-left: 60px; }

  .pf-phone { width: 262px; border-radius: 30px; }
  .pf-eve-wrap { gap: 18px; }
  .pf-eve-title { font-size: calc(19px * var(--ts, 1)); }
  .pf-bal { margin-top: 8px; }
  .pf-bal-v { font-size: calc(33px * var(--ts, 1)); }
  .pf-rent { margin-top: 9px; padding: 8px 10px; }
  .pf-tmrw { margin-top: 9px; }
  .pf-tmrw-h { padding-top: 7px; }

  .pf-wk-p { margin: 9px 2px 10px; }
  .pf-wk-b { padding: 8px 11px; }

  .pf-over-card .pf-card-body { padding-top: 14px; }
  .pf-over-stamp { font-size: 18px; margin-bottom: 10px; }
  .pf-over-t { font-size: calc(25px * var(--ts, 1)); }

  .pf-teach { top: calc(max(8px, env(safe-area-inset-top)) + 52px); padding: 10px 12px; width: min(268px, 38vw); }
  .pf-teach-m { margin: 8px 0 8px; }
  .pf-teach-i { width: 40px; height: 40px; font-size: 21px; }
  .pf-teach-n { font-size: calc(16.5px * var(--ts, 1)); }
  .pf-teach-t { font-size: calc(12.5px * var(--ts, 1)); }
  .pf-coach.t-up { top: calc(max(8px, env(safe-area-inset-top)) + 96px); }
  .pf-coach.t-down, .pf-coach.t-phone, .pf-coach.t-keyboard { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 100px); }
  .pf-art { border-radius: 18px; }
}
/* narrow (portrait / small windows): stack */
@media (max-width: 760px) {
  .pf-title-wrap { grid-template-columns: 1fr; gap: 16px; align-content: center; overflow: auto; }
  .pf-title-card { justify-self: stretch; max-width: 420px; }
  .pf-set-grid { grid-template-columns: 1fr 1fr; }
  .pf-rv-grid { grid-template-columns: 1fr 1fr; }
  .pf-rv-c { grid-column: 1 / -1; }
  .pf-eve-wrap { flex-direction: column; overflow: auto; justify-content: flex-start; }
  .pf-phone { height: 360px; }
  .pf-end-slide { flex-direction: column; text-align: center; }
  .pf-teach { width: min(304px, calc(100% - 24px)); }
  .pf-coach { max-width: calc(100% - 40px); }
}
@media (max-width: 520px) {
  .pf-set-grid, .pf-rv-grid { grid-template-columns: 1fr; }
}
/* roomy desktop */
@media (min-width: 1100px) and (min-height: 700px) {
  .pf-bar { min-height: 52px; padding: 10px 16px; }
  .pf-logo svg { width: 27px; height: 27px; }
  .pf-logo-t { font-size: 16.5px; }
  .pf-card-body { padding: 20px 26px 22px; }
  .pf-foot { padding: 14px 26px 18px; }
  .pf-btn { min-height: 52px; }
  .pf-title-wrap { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; }
  /* keep the wordmark in the monitor's dark upper-left, clear of the screensaver lines lower down */
  .pf-title-wrap { align-self: stretch; height: 100%; }
  .pf-title-l { align-self: start; margin-top: max(56px, 8vh); max-width: 36vw; }
  .pf-word { font-size: clamp(54px, 6.4vw + 2vh, 132px); }
  .pf-title-card .pf-card-body { padding: 22px 24px 18px; }
  .pf-hello { font-size: calc(24px * var(--ts, 1)); }
  .pf-hello-sub { font-size: calc(15px * var(--ts, 1)); margin-bottom: 18px; }
  .pf-stack { gap: 11px; }
  .pf-illo-plant { width: 40px; right: 16px; }
  .pf-stamp { width: 164px; height: 164px; }
  .pf-stamp-g { font-size: 72px; }
  .pf-rv-grid { gap: 26px; }
  .pf-rv-head h2 { font-size: calc(24px * var(--ts, 1)); }
  .pf-m { padding: 9px 0; }
  .pf-tile b { font-size: calc(27px * var(--ts, 1)); }
  .pf-illo-star { width: 60px; }
  .pf-review-card .pf-foot { padding-left: 90px; }
  .pf-morning-card { width: 640px; }
  .pf-tc-day { width: 112px; }
  .pf-tc-n { font-size: 64px; }
  .pf-tc-title { font-size: calc(36px * var(--ts, 1)); }
  .pf-phone { width: 320px; }
  .pf-evening-card { width: 440px; }
  .pf-bal-v { font-size: calc(46px * var(--ts, 1)); }
  .pf-teach { width: 330px; top: 84px; left: 76px; }
  .pf-coach { max-width: 360px; }
}