/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./styles/persona-switch.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
/* ---------------------------------------------------------------------------
 * Persona switcher ("Öğrenci / Veli / Öğretmen / …" pill row). Shared by the
 * persona heroes and the landing hero, so it lives outside persona.css.
 * Left-aligning the track on wide screens is up to each hero.
 * ------------------------------------------------------------------------- */

.ps-switch {
  width: 100%;
  min-width: 0;
}
.ps-switch__scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ps-switch__scroll::-webkit-scrollbar {
  display: none;
}
.ps-switch__scroll--fade {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
/* max-content + auto margins: centred when it fits, starts at the left edge
   (so every pill can be scrolled to) when it doesn't. */
.ps-switch__track {
  display: flex;
  gap: 6px;
  width: max-content;
  margin-inline: auto;
  padding: 2px 1px;
}
.ps-switch__pill {
  flex: none;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--v2-line);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--v2-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ps-switch__pill:hover {
  border-color: var(--v2-red);
  color: var(--v2-red);
}
.ps-switch__pill--on,
.ps-switch__pill--on:hover {
  background: var(--v2-red);
  border-color: var(--v2-red);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .ps-switch__pill {
    transition: none;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./styles/persona-teacher.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
/*
 * /ogretmen — page-specific styles (teacher persona). Every rule is scoped to
 * `.ps-page[data-persona="teacher"]` and every invented class is `ps-tch-*`
 * (see styles/persona.css header). Mock sizes are phone units (`--u`).
 */

/* Hero float: the "Ödev ver" done state carries a teal check, not a live dot */
.ps-page[data-persona="teacher"] .ps-float--chip::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2a9d8f
    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='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}
/* The done line is long; keep it on one line over the phone (it wrapped at 768px). */
.ps-page[data-persona="teacher"] .ps-float.ps-hv__float--over {
  width: max-content;
  max-width: none;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * ClassRosterScreen (Öğrenciler · Liste · 9-A)
 * ------------------------------------------------------------------------- */

.ps-page[data-persona="teacher"] .ps-tch-classcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ps-page[data-persona="teacher"] .ps-tch-classcard__breakdown {
  margin-top: calc(-6 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-classcard__week {
  font-size: calc(12.5 * var(--u));
  line-height: 1.35;
  color: #2d3748;
}
.ps-page[data-persona="teacher"] .ps-tch-classcard__week strong {
  color: #1f7a6f;
}
.ps-page[data-persona="teacher"] .ps-tch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
  margin-top: calc(2 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-action {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(6 * var(--u)) calc(9 * var(--u));
  border: 1px solid #e9ecf2;
  border-radius: calc(10 * var(--u));
  background: #fff;
  font-size: calc(11.5 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  color: #2d3748;
  white-space: nowrap;
}
.ps-page[data-persona="teacher"] .ps-tch-action svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-action--primary {
  border-color: #f44336;
  background: #f44336;
  color: #fff;
  font-weight: 800;
}
.ps-page[data-persona="teacher"] .ps-tch-action--code {
  font-variant-numeric: tabular-nums;
  letter-spacing: calc(0.3 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-action--quiet {
  border-color: transparent;
  background: transparent;
  padding-left: calc(4 * var(--u));
  color: #5b7c99;
}
.ps-page[data-persona="teacher"] .ps-tch-action__badge {
  min-width: calc(15 * var(--u));
  padding: 0 calc(4 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #f44336;
  color: #fff;
  font-size: calc(9.5 * var(--u));
  font-style: normal;
  font-weight: 800;
  line-height: calc(15 * var(--u));
  text-align: center;
}
.ps-page[data-persona="teacher"] .ps-tch-overline {
  margin: calc(2 * var(--u)) calc(4 * var(--u)) calc(-4 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-member {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(9 * var(--u)) 0;
}
.ps-page[data-persona="teacher"] .ps-tch-member__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(3 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-member__text strong {
  font-size: calc(13.5 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-member__sub {
  font-size: calc(11.5 * var(--u));
  color: #8a94a6;
}
.ps-page[data-persona="teacher"] .ps-tch-member__unread {
  flex: none;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: #f44336;
}

/* ---------------------------------------------------------------------------
 * BatchReviewScreen (Toplu ödev)
 * ------------------------------------------------------------------------- */

.ps-page[data-persona="teacher"] .ps-tch-batch__topic {
  font-size: calc(16 * var(--u));
  font-weight: 800;
  line-height: 1.25;
}
.ps-page[data-persona="teacher"] .ps-tch-batch__source {
  margin-top: calc(2 * var(--u));
  font-size: calc(12 * var(--u));
  color: #8a94a6;
}
.ps-page[data-persona="teacher"] .ps-tch-batch__chips {
  margin-top: calc(9 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-batch__counts {
  margin-top: calc(10 * var(--u));
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
  color: #5b7c99;
}
.ps-page[data-persona="teacher"] .ps-tch-batch__bar {
  margin-top: calc(6 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-batch__overline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: calc(2 * var(--u)) calc(4 * var(--u)) calc(-4 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-batch__all {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(5 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
  background: #fff1ee;
  font-size: calc(12 * var(--u));
  font-weight: 800;
  color: #e53935;
}
.ps-page[data-persona="teacher"] .ps-tch-batch__all svg {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-review {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(9 * var(--u)) 0;
}
.ps-page[data-persona="teacher"] .ps-tch-review__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-review__text strong {
  font-size: calc(13 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-review__mark {
  font-size: calc(10.5 * var(--u));
  font-weight: 600;
  color: #8a94a6;
}
.ps-page[data-persona="teacher"] .ps-tch-review__mark--done {
  color: #1f7a6f;
}
.ps-page[data-persona="teacher"] .ps-tch-review__mark--partial {
  color: #b7791f;
}
.ps-page[data-persona="teacher"] .ps-tch-review__evidence {
  font-size: calc(10.5 * var(--u));
  color: #5b7c99;
  white-space: nowrap;
}
.ps-page[data-persona="teacher"] .ps-tch-verdicts {
  flex: none;
  display: flex;
  gap: calc(4 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-verdict {
  --tch-v: #2a9d8f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(27 * var(--u));
  height: calc(26 * var(--u));
  border: 1px solid #e9ecf2;
  border-radius: calc(8 * var(--u));
  background: #fff;
  color: var(--tch-v);
}
.ps-page[data-persona="teacher"] .ps-tch-verdict svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-verdict--partial {
  --tch-v: #e09a1a;
}
.ps-page[data-persona="teacher"] .ps-tch-verdict--notDone {
  --tch-v: #b0342a;
}
.ps-page[data-persona="teacher"] .ps-tch-verdict--on {
  border-color: var(--tch-v);
  background: var(--tch-v);
  color: #fff;
}

/* ---------------------------------------------------------------------------
 * ClassJoinScreen (student side: "9-A sınıfına katılıyorsun")
 * ------------------------------------------------------------------------- */

.ps-page[data-persona="teacher"] .ps-tch-join__close {
  display: inline-flex;
  margin: 0 0 0 calc(4 * var(--u));
  color: #2d3748;
}
.ps-page[data-persona="teacher"] .ps-tch-join__close svg {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-join {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(8 * var(--u)) calc(12 * var(--u)) 0;
}
.ps-page[data-persona="teacher"] .ps-tch-join__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  border-radius: calc(15.5 * var(--u));
  background: rgba(91, 124, 153, 0.12);
  color: #5b7c99;
}
.ps-page[data-persona="teacher"] .ps-tch-join__tile svg {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-join__title {
  margin: calc(16 * var(--u)) 0;
  font-size: calc(22 * var(--u));
  font-weight: 800;
  line-height: 1.25;
}
.ps-page[data-persona="teacher"] .ps-tch-join__fact {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--u));
  margin-bottom: calc(12 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.4;
}
.ps-page[data-persona="teacher"] .ps-tch-join__fact svg {
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: #5b7c99;
}
.ps-page[data-persona="teacher"] .ps-tch-join__bar {
  position: absolute;
  left: calc(16 * var(--u));
  right: calc(16 * var(--u));
  bottom: calc(26 * var(--u));
  display: flex;
  gap: calc(10 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-join__bar .ps-app-btn {
  flex: 1;
}

/* AssignToScreen: split line + Devam in the bottom bar */
.ps-page[data-persona="teacher"] .ps-tch-tobar {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(30 * var(--u));
  border-top: 1px solid #eef1f5;
  background: #fff;
}
.ps-page[data-persona="teacher"] .ps-tch-tobar .ps-app-note {
  margin: 0;
}

/* BatchReviewScreen: undo bar of the verdict just given */
.ps-page[data-persona="teacher"] .ps-tch-undo {
  position: absolute;
  z-index: 3;
  left: calc(14 * var(--u));
  right: calc(14 * var(--u));
  bottom: calc(22 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: calc(14 * var(--u));
  background: #2d3748;
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(27, 37, 64, 0.25);
  font-size: calc(13 * var(--u));
  font-weight: 600;
  color: #fff;
}
.ps-page[data-persona="teacher"] .ps-tch-undo svg {
  flex: none;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}
.ps-page[data-persona="teacher"] .ps-tch-undo span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}
.ps-page[data-persona="teacher"] .ps-tch-undo em {
  font-style: normal;
  font-weight: 800;
  color: #ffb3a3;
}

/*
 * Mobile crops (< 900px show the top ~360px of a phone):
 * - the class-code sheet starts higher, so its code and buttons stay in view;
 * - every cropped phone keeps its own height (the crop is a flex row and
 *   would otherwise stretch the phone to 360px and squeeze its screen, which
 *   pulls bottom-anchored bars and sheets into view).
 */
@media (max-width: 899px) {
  .ps-page[data-persona="teacher"] #sinif .ps-app-sheet {
    top: calc(128 * var(--u));
  }
  .ps-page[data-persona="teacher"] .ps-crop {
    align-items: flex-start;
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./styles/persona.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************/
/*
 * Persona landing pages — /veli, /ogretmen, /ozel-ders-ogretmeni, /egitim-kocu.
 * Built on the landing's system (styles/site.css: `v2-*` tokens, header,
 * footer, buttons, section heads); everything here is `ps-*` and scoped under
 * `.ps-page`, which carries the persona (`data-persona`) and its accent.
 * Page builders put their own rules in styles/persona-<key>.css, every rule
 * starting with `.ps-page[data-persona="<key>"]` and every class they invent
 * prefixed `ps-par-*` / `ps-tch-*` / `ps-tut-*` / `ps-cch-*`.
 *
 * Background rhythm, top to bottom:
 * hero (cream → peach, like the landing hero, + corner blob) → trust strip
 * (white, v2) → features (white; each mock sits on a tinted `--ps-wash`
 * stage, rows alternate) → mid CTA (white strip) → extras (cream) → sides
 * (white, tinted panels) → steps (peach #fbe7db) → navy band (trust; on the
 * coach page the Koç band) → [coach: white trust band] → pricing (cream band,
 * white card) → FAQ (v2: cream items on white) → cross-links (cream) → final
 * (peach gradient, white card inside the container) → navy footer.
 * The white run trust → features → mid → sides is fine because the stages
 * and panels are tinted; two plain white sections never touch elsewhere.
 *
 * Light only (like the rest of the marketing site). Section padding 64px,
 * 78px from 1024px. Breakpoints 640 / 900 / 1000 / 1100 / 1200. Motion: the
 * 1px button lift and the live-dot pulse, both off with reduced motion.
 */

/* ---------------------------------------------------------------------------
 * Page scope and persona tokens (mirrored in lib/persona/registry.ts)
 * ------------------------------------------------------------------------- */

.ps-page {
  --ps-accent: #5e2a9c;
  --ps-wash: #efe9fb;
  --ps-phone-shadow: 0 40px 80px -30px rgba(27, 37, 64, 0.35);
  /* One warm halo on every persona page (the CornerBlob family). */
  --ps-halo: #fecaa2;
  --ps-peach-band: #fbe7db;
  background: #fff;
  color: var(--v2-navy);
  overflow-x: clip;
}
.ps-page[data-persona="parent"],
.ps-phone[data-persona="parent"] {
  --ps-accent: #5e2a9c;
  --ps-wash: #efe9fb;
  --ps-phone-shadow: 0 40px 80px -30px rgba(60, 30, 110, 0.35);
}
.ps-page[data-persona="teacher"],
.ps-phone[data-persona="teacher"] {
  --ps-accent: #178a4a;
  --ps-wash: #eef8f1;
  --ps-phone-shadow: 0 40px 80px -30px rgba(23, 90, 50, 0.3);
}
.ps-page[data-persona="tutor"],
.ps-phone[data-persona="tutor"] {
  --ps-accent: #1f7a70;
  --ps-wash: #e6f4f2;
  --ps-phone-shadow: 0 40px 80px -30px rgba(20, 90, 80, 0.3);
}
.ps-page[data-persona="coach"],
.ps-phone[data-persona="coach"] {
  --ps-accent: #8a5a00;
  --ps-wash: #fff6e3;
  --ps-phone-shadow: 0 40px 80px -30px rgba(120, 80, 0, 0.28);
}

/* Tone set for tiles, panels and cards (feature rows, sides). */
.ps-page .ps-tone--red {
  --tone-fg: #c8402c;
  --tone-bg: #fde3df;
  --tone-panel: #fff1ec;
}
.ps-page .ps-tone--blue {
  --tone-fg: #2f6fe4;
  --tone-bg: #d3e5fc;
  --tone-panel: #eef4fc;
}
.ps-page .ps-tone--green {
  --tone-fg: #178a4a;
  --tone-bg: #d8f3e1;
  --tone-panel: #eef8f1;
}
.ps-page .ps-tone--amber {
  --tone-fg: #9a6400;
  --tone-bg: #ffeec4;
  --tone-panel: #fff6e3;
}
.ps-page .ps-tone--lavender {
  --tone-fg: #5e2a9c;
  --tone-bg: #e6dcf8;
  --tone-panel: #f3eefc;
}

/* Shared small pieces ------------------------------------------------------ */

.ps-page .ps-caption {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8a90a0;
  text-align: center;
}

.ps-page .ps-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--v2-red);
  text-decoration: none;
}
.ps-page .ps-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ps-page .ps-link svg {
  width: 16px;
  height: 16px;
}

.ps-page .ps-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--tone-bg, var(--ps-wash));
  color: var(--tone-fg, var(--ps-accent));
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.ps-page .ps-tile svg {
  width: 22px;
  height: 22px;
}
.ps-page .ps-tile--accent {
  background: var(--ps-wash);
  color: var(--ps-accent);
}

.ps-page .ps-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ps-page .ps-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--v2-ink);
}
.ps-page .ps-checks svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--ps-accent);
}

/* Dark-band section head (navy): light title, salmon eyebrow, orange accent. */
.ps-page .ps-head--dark .v2-eyebrow {
  color: #ffb3a3;
}
.ps-page .ps-head--dark .v2-section-title {
  color: #fff;
}
.ps-page .ps-head--dark .v2-section-title em {
  color: var(--v2-orange);
}
.ps-page .ps-head--dark .v2-section-lead {
  color: rgba(255, 255, 255, 0.74);
}

/* Handwritten note (as `.v2-note`, but in flow-friendly form). */
.ps-page .ps-note {
  margin: 0;
  font-family: var(--font-caveat), "Segoe Print", "Comic Sans MS", cursive;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: #e8503a;
  text-align: center;
  pointer-events: none;
  user-select: none;
}
.ps-page .ps-note span {
  display: block;
}

/* Mobile crop of a tall mock: the top ~55% of the phone with a fade. The
 * phone keeps its own height (flex-start): a stretched phone would be squeezed
 * to 360px and pull bottom-anchored bars and sheets into view. */
@media (max-width: 899px) {
  .ps-page .ps-crop {
    align-items: flex-start;
    max-height: 360px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
    mask-image: linear-gradient(#000 72%, transparent);
  }
}

/* ---------------------------------------------------------------------------
 * Call to action
 * ------------------------------------------------------------------------- */

.ps-page .ps-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.ps-page .ps-ctas__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
/* Centred wherever the surrounding copy is centred. */
.ps-page .ps-hero .ps-ctas,
.ps-page .ps-mid .ps-ctas {
  align-items: center;
}
.ps-page .ps-hero .ps-ctas__row,
.ps-page .ps-mid .ps-ctas__row {
  justify-content: center;
}
@media (min-width: 1100px) {
  .ps-page .ps-hero .ps-ctas {
    align-items: flex-start;
  }
  .ps-page .ps-hero .ps-ctas__row {
    justify-content: flex-start;
  }
}
.ps-page .ps-cta-secondary {
  padding: 15px 22px;
  font-size: 15px;
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */

.ps-hero {
  position: relative;
  overflow-x: clip;
  background: linear-gradient(90deg, #fdfaf3 0%, #fdf8ef 50%, #feeee1 85%, #feeee1 100%);
  padding-bottom: 56px;
}
.ps-hero__grid {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding-top: 8px;
}
.ps-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 640px;
  text-align: center;
  justify-content: center;
}
.ps-hero__switch {
  order: 10;
  width: 100%;
  margin-top: 26px;
}
.ps-hero__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ps-accent);
}
.ps-hero__title {
  margin: 14px 0 0;
  font-size: clamp(32px, 8.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--v2-navy);
  text-wrap: balance;
}
.ps-hero__title em {
  display: block;
  font-style: normal;
  color: var(--v2-red);
}
.ps-hero__lead {
  margin: 18px 0 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--v2-muted);
}
.ps-hero__ctas {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ps-hero__facts {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
  text-align: left;
}
.ps-hero__facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--v2-ink);
}
.ps-hero__facts svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--ps-accent);
}
.ps-hero__visual {
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (min-width: 900px) {
  .ps-hero__switch {
    order: 0;
    margin: 0 0 22px;
  }
}
@media (min-width: 1100px) {
  .ps-hero {
    padding-bottom: 72px;
  }
  .ps-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    align-items: center;
    gap: 32px;
    padding-top: 20px;
  }
  .ps-hero__copy {
    align-items: flex-start;
    max-width: none;
    text-align: left;
  }
  .ps-hero__title {
    font-size: clamp(38px, 3.6vw, 54px);
  }
  .ps-hero__lead {
    font-size: clamp(15.5px, 1.2vw, 17px);
  }
  .ps-hero__ctas {
    align-items: flex-start;
    justify-content: flex-start;
  }
}

/* Persona switcher: styles/persona-switch.css. */

@media (min-width: 1100px) {
  .ps-hero__switch .ps-switch__track {
    margin-inline: 0;
  }
}

/* Hero visual: halo, phone, cat, floating card, note ----------------------- */

.ps-page .ps-hv {
  --ps-phone-w: 260px;
  --cat-w: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
}
.ps-page .ps-hv__stage {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  /* Room on the left for the cat's overhang, so nothing leaves the box. */
  padding: 8px 0 6px calc(var(--cat-w) * 0.7);
}
.ps-page .ps-hv__phone {
  position: relative;
  width: min(var(--ps-phone-w), 100%);
}
.ps-page .ps-hv__phone .ps-phone {
  position: relative;
  z-index: 1;
}
.ps-page .ps-hv__halo {
  /* Centred on the phone: half the difference of the stage's side paddings
     off the stage's centre. */
  position: absolute;
  z-index: 0;
  left: calc(50% + var(--cat-w) * 0.35);
  top: 6%;
  width: min(calc(var(--ps-phone-w) * 1.2), 100%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--ps-halo);
  opacity: 0.75;
}
.ps-page .ps-hv__cat {
  position: absolute;
  z-index: 2;
  left: calc(var(--cat-w) * -0.7);
  bottom: -4px;
  width: var(--cat-w);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 14px 18px rgba(80, 40, 20, 0.18));
}
.ps-page .ps-hv__note {
  display: none;
}
.ps-page .ps-float.ps-hv__float--over {
  display: none;
}
.ps-page .ps-float.ps-hv__float--flow {
  width: 100%;
  max-width: 340px;
  margin-bottom: 18px;
  position: relative;
  z-index: 3;
}

@media (min-width: 640px) {
  .ps-page .ps-hv {
    --ps-phone-w: clamp(250px, 23vw, 296px);
    --cat-w: calc(var(--ps-phone-w) * 0.6);
  }
  .ps-page .ps-hv__stage {
    padding: 12px calc(var(--ps-phone-w) * 0.36) 8px calc(var(--cat-w) * 0.82);
  }
  .ps-page .ps-hv__halo {
    left: calc(50% + var(--cat-w) * 0.41 - var(--ps-phone-w) * 0.18);
    width: calc(var(--ps-phone-w) * 1.32);
  }
  .ps-page .ps-hv__cat {
    left: calc(var(--cat-w) * -0.82);
    bottom: 2%;
  }
  .ps-page .ps-float.ps-hv__float--flow {
    display: none;
  }
  .ps-page .ps-float.ps-hv__float--over {
    display: flex;
    position: absolute;
    z-index: 3;
    top: 14%;
    left: calc(var(--cat-w) * -0.8);
    width: min(236px, calc(var(--ps-phone-w) * 0.8));
    transform: rotate(-3deg);
  }
  .ps-page .ps-hv__note {
    display: block;
    position: absolute;
    z-index: 2;
    top: 3%;
    right: calc(var(--ps-phone-w) * -0.36);
    width: calc(var(--ps-phone-w) * 0.34);
    font-size: clamp(24px, 2.2vw, 32px);
    transform: rotate(6deg);
  }
}

/* Floating card ------------------------------------------------------------ */

.ps-page .ps-float {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 14px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 36px -18px rgba(27, 37, 64, 0.45), 0 0 0 1px rgba(27, 37, 64, 0.05);
  text-align: left;
  pointer-events: none;
  user-select: none;
}
.ps-page .ps-float__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #8a94a6;
}
.ps-page .ps-float__icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #fff1e6;
  object-fit: cover;
}
.ps-page .ps-float__title {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--v2-navy);
}
.ps-page .ps-float__body {
  font-size: 13px;
  line-height: 1.4;
  color: var(--v2-muted);
}
.ps-page .ps-float--chip {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  width: auto;
}
.ps-page .ps-hv__float--flow.ps-float--chip {
  width: auto;
  max-width: 100%;
}
.ps-page .ps-float__chipText {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--v2-navy);
}
.ps-page .ps-float__live {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4caf50;
  box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.55);
  animation: ps-pulse 2s ease-out infinite;
}
@keyframes ps-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.55);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(76, 175, 80, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}
@media (min-width: 640px) {
  .ps-page .ps-hv__float--over.ps-float--chip {
    width: max-content;
    max-width: calc(var(--ps-phone-w) * 1.05);
  }
}

/* ---------------------------------------------------------------------------
 * Feature rows
 * ------------------------------------------------------------------------- */

.ps-features {
  background: #fff;
  padding: 64px 0;
}
.ps-features__caption {
  margin: -12px 0 0;
}
/* Headless continuation of rows: no head, and no top gap right after another block of rows. */
.ps-features--cont .ps-features__rows {
  margin-top: 0;
}
.ps-features + .ps-features--cont {
  padding-top: 0;
}
.ps-features__rows {
  display: grid;
  gap: 64px;
  margin-top: 40px;
}
.ps-frow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.ps-frow__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 560px;
}
.ps-frow__eyebrow {
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ps-accent);
}
.ps-frow__title {
  margin: 8px 0 0;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.22;
  color: var(--v2-navy);
}
.ps-frow__text {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--v2-muted);
}
.ps-frow__copy .ps-checks {
  margin-top: 18px;
}
.ps-frow__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--v2-muted);
}
.ps-frow__note svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: #8a90a0;
}
.ps-frow__visual {
  min-width: 0;
}
.ps-page .ps-stage {
  --ps-phone-w: 290px;
  position: relative;
  display: flex;
  justify-content: center;
  padding: 28px 18px;
  border-radius: 28px;
  background: var(--ps-wash);
}
.ps-page .ps-stage > .ps-crop {
  width: 100%;
  display: flex;
  justify-content: center;
}
.ps-page .ps-stage__cat {
  position: absolute;
  z-index: 2;
  top: -30px;
  right: 6px;
  width: 96px;
  height: auto;
  pointer-events: none;
}

@media (max-width: 899px) {
  .ps-page .ps-stage {
    padding-bottom: 0;
  }
  .ps-page .ps-stage__cat {
    width: 80px;
    top: -26px;
  }
}
@media (min-width: 900px) {
  .ps-frow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
  }
  .ps-frow--flip .ps-frow__copy {
    order: 2;
  }
  .ps-frow--flip .ps-frow__visual {
    order: 1;
  }
  .ps-features__rows {
    gap: 88px;
    margin-top: 56px;
  }
}
@media (min-width: 1200px) {
  .ps-frow {
    gap: 88px;
  }
  .ps-page .ps-stage {
    padding: 40px 28px;
  }
}

/* ---------------------------------------------------------------------------
 * Mid CTA strip
 * ------------------------------------------------------------------------- */

.ps-mid {
  background: #fff;
  padding: 0 0 64px;
}
.ps-mid__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 22px;
  border-radius: 24px;
  border: 1px solid #f1e6dc;
  background: #fff;
  box-shadow: 0 20px 40px -34px rgba(27, 37, 64, 0.5);
  text-align: center;
}
.ps-mid__text {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--v2-navy);
  max-width: 560px;
}
.ps-mid .ps-ctas {
  align-items: center;
}
@media (min-width: 900px) {
  .ps-mid__inner {
    flex-direction: row;
    justify-content: space-between;
    padding: 22px 26px 22px 32px;
    text-align: left;
  }
}

/* ---------------------------------------------------------------------------
 * Extras
 * ------------------------------------------------------------------------- */

.ps-extras {
  background: var(--v2-cream);
  padding: 64px 0;
}
.ps-extras__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.ps-extra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 22px 24px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #f1e6dc;
}
.ps-extra h3 {
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--v2-navy);
}
.ps-extra p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--v2-muted);
}
.ps-extra .ps-link {
  margin-top: 12px;
}
@media (min-width: 640px) {
  .ps-extras__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .ps-extras__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

/* ---------------------------------------------------------------------------
 * Sides
 * ------------------------------------------------------------------------- */

.ps-sides {
  background: #fff;
  padding: 64px 0;
}
.ps-sides__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.ps-side {
  padding: 26px 22px;
  border-radius: 26px;
  background: var(--tone-panel, var(--ps-wash));
}
.ps-side__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.ps-side__head h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--v2-navy);
}
.ps-side__cat {
  flex: none;
  width: 72px;
  height: auto;
}
.ps-side .ps-checks svg {
  color: var(--tone-fg, var(--ps-accent));
}
.ps-side .ps-link {
  margin-top: 18px;
}
.ps-sides__center {
  --ps-phone-w: 290px;
  order: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.ps-sides__center > .ps-crop,
.ps-sides__center > div:first-child {
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (min-width: 720px) {
  .ps-sides__grid:not(.ps-sides__grid--center) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .ps-sides__grid--center {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 28px;
    align-items: center;
  }
  .ps-sides__center {
    order: 0;
    --ps-phone-w: 270px;
    width: var(--ps-phone-w);
  }
  .ps-side {
    padding: 32px 28px;
  }
  .ps-side__cat {
    width: 96px;
  }
}

/* ---------------------------------------------------------------------------
 * Steps
 * ------------------------------------------------------------------------- */

.ps-steps {
  background: var(--ps-peach-band);
  padding: 64px 0;
}
.ps-steps__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.ps-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.ps-step {
  display: flex;
  flex-direction: column;
}
.ps-step__card {
  position: relative;
  overflow: hidden;
  flex: 1;
  padding: 24px 24px 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 40px -32px rgba(27, 37, 64, 0.45);
}
.ps-step__no {
  display: block;
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--ps-accent) 26%, #fff);
}
.ps-step__card h3 {
  margin: 12px 0 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--v2-navy);
}
.ps-step__card p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--v2-muted);
}
.ps-step__cat {
  position: absolute;
  top: 6px;
  right: 4px;
  width: 92px;
  height: auto;
  pointer-events: none;
}
.ps-steps__body:not(.ps-steps__body--visual) .ps-step__card h3 {
  padding-right: 80px;
}
.ps-steps__visual {
  --ps-phone-w: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.ps-steps__visual > div:first-child {
  width: 100%;
  display: flex;
  justify-content: center;
}
.ps-steps__note {
  margin: 22px auto 0;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.6;
  color: #6b5a4e;
  text-align: center;
}
@media (min-width: 900px) {
  .ps-steps__body:not(.ps-steps__body--visual) .ps-steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (min-width: 1000px) {
  .ps-steps__body--visual {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    align-items: center;
  }
  .ps-steps__visual {
    --ps-phone-w: 300px;
  }
}

/* ---------------------------------------------------------------------------
 * Band (navy / cream / white)
 * ------------------------------------------------------------------------- */

.ps-band {
  padding: 64px 0;
}
.ps-band--navy {
  background: linear-gradient(160deg, #202c4d 0%, #16203a 100%);
  color: #fff;
}
.ps-band--cream {
  background: var(--v2-cream);
}
.ps-band--white {
  background: #fff;
}
.ps-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.ps-band__head .v2-section-head {
  margin-bottom: 0;
}
.ps-band__cat {
  display: none;
  width: 180px;
  height: auto;
  margin-top: 22px;
}
.ps-band__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.ps-band--visual .ps-band__head .ps-band__cards {
  margin-top: 26px;
}
.ps-band__card {
  padding: 20px;
  border-radius: 20px;
}
.ps-band--navy .ps-band__card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.ps-band--cream .ps-band__card {
  background: #fff;
  border: 1px solid #f1e6dc;
}
.ps-band--white .ps-band__card {
  background: var(--v2-cream);
  border: 1px solid #f4ebe0;
}
.ps-band__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--ps-wash);
  color: var(--ps-accent);
}
.ps-band--navy .ps-band__icon {
  background: rgba(255, 138, 92, 0.16);
  color: var(--v2-orange);
}
.ps-band__icon svg {
  width: 20px;
  height: 20px;
}
.ps-band__card h3 {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}
.ps-band--navy .ps-band__card h3 {
  color: #fff;
}
.ps-band__card p {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--v2-muted);
}
.ps-band--navy .ps-band__card p {
  color: rgba(255, 255, 255, 0.72);
}
.ps-band__visual {
  --ps-phone-w: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.ps-band__visual > div:first-child {
  width: 100%;
  display: flex;
  justify-content: center;
}
.ps-band--navy .ps-caption {
  color: rgba(255, 255, 255, 0.55);
}
.ps-band--navy .ps-phone__body {
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.ps-band__foot {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--v2-muted);
}
.ps-band__foot p {
  margin: 0;
}
.ps-band--navy .ps-band__foot {
  color: rgba(255, 255, 255, 0.66);
}
.ps-band__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.ps-band__links a {
  font-weight: 700;
  color: var(--v2-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ps-band--navy .ps-band__links a {
  color: #ffb3a3;
}
@media (min-width: 720px) {
  .ps-band__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .ps-band__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 28px 56px;
    align-items: center;
  }
  .ps-band__cat {
    display: block;
  }
  .ps-band--visual .ps-band__cat {
    display: none;
  }
  .ps-band--visual .ps-band__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
  .ps-band__visual {
    --ps-phone-w: 300px;
  }
}

/* ---------------------------------------------------------------------------
 * Pricing note
 * ------------------------------------------------------------------------- */

.ps-pricing {
  background: var(--v2-cream);
  padding: 64px 0;
}
.ps-pricing__card {
  max-width: 860px;
  margin-inline: auto;
  padding: 30px 24px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid #f1e6dc;
  box-shadow: 0 30px 60px -48px rgba(27, 37, 64, 0.6);
  text-align: center;
}
.ps-pricing__title {
  margin: 12px 0 0;
  font-size: clamp(24px, 3.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--v2-navy);
}
.ps-pricing__text {
  margin: 12px auto 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--v2-muted);
}
.ps-pricing__chips {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ps-pricing__chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ps-wash);
  font-size: 14px;
  font-weight: 700;
  color: var(--v2-ink);
}
.ps-pricing__chips svg {
  width: 15px;
  height: 15px;
  color: var(--ps-accent);
}
.ps-pricing__note {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #8a90a0;
}
@media (min-width: 900px) {
  .ps-pricing__card {
    padding: 40px 48px;
  }
}

/* ---------------------------------------------------------------------------
 * Cross-links
 * ------------------------------------------------------------------------- */

.ps-cross {
  background: var(--v2-cream);
  padding: 64px 0;
}
.ps-cross__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.ps-cross__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 22px 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #f1e6dc;
  box-shadow: 0 20px 40px -34px rgba(27, 37, 64, 0.5);
}
.ps-cross__card {
  margin-top: 18px;
}
.ps-cross__cat {
  position: absolute;
  top: -24px;
  right: 14px;
  width: 72px;
  height: auto;
  pointer-events: none;
}
.ps-cross__card h3 {
  margin: 0;
  padding-right: 76px;
  font-size: 18px;
  font-weight: 800;
  color: var(--v2-navy);
}
.ps-cross__card p {
  margin: 10px 0 0;
  padding-right: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--v2-muted);
}
.ps-cross__card .ps-link {
  margin-top: auto;
  padding-top: 14px;
}
@media (min-width: 900px) {
  .ps-cross__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

/* ---------------------------------------------------------------------------
 * Final CTA
 * ------------------------------------------------------------------------- */

.ps-final {
  background: linear-gradient(180deg, var(--v2-cream) 0%, var(--v2-peach) 55%);
  padding: 56px 0 64px;
}
.ps-final__card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 34px 26px;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 40px 70px -50px rgba(27, 37, 64, 0.8);
}
.ps-final__copy {
  flex: 1;
  min-width: 0;
}
.ps-final__copy h2 {
  margin: 0;
  font-size: clamp(26px, 4.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--v2-navy);
  text-wrap: balance;
}
.ps-final__copy h2 em {
  font-style: normal;
  color: var(--v2-red);
}
.ps-final__copy > p {
  margin: 12px 0 22px;
  max-width: 600px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--v2-muted);
}
.ps-final .ps-ctas {
  align-items: flex-start;
}
.ps-final__cat {
  display: none;
  flex: none;
  width: 150px;
  height: auto;
}
@media (min-width: 720px) {
  .ps-final__cat {
    display: block;
  }
  .ps-final__card {
    padding: 40px 44px;
    gap: 32px;
  }
}
@media (min-width: 1024px) {
  .ps-final__cat {
    width: 190px;
  }
}

/* Section rhythm on wide screens (same as the landing). */
@media (min-width: 1024px) {
  .ps-features,
  .ps-extras,
  .ps-sides,
  .ps-steps,
  .ps-band,
  .ps-pricing,
  .ps-cross {
    padding-block: 78px;
  }
  .ps-mid {
    padding-bottom: 78px;
  }
  .ps-final {
    padding: 64px 0 78px;
  }
}

/* ===========================================================================
 * Phone frame and app screens (GROUND-visuals §1). All sizes are design
 * pixels of the 316×690 store phone times `--u`, so the phone scales cleanly.
 * ========================================================================= */

.ps-phone {
  width: min(var(--ps-phone-w, 316px), 100%);
  aspect-ratio: 316 / 690;
  container-type: inline-size;
  flex: none;
  margin-inline: auto;
  text-align: left;
}
.ps-phone__body {
  --u: calc(100cqw / 316);
  width: 100%;
  height: 100%;
  padding: calc(9 * var(--u));
  border-radius: calc(52 * var(--u));
  background: #15171c;
  box-shadow: var(--ps-phone-shadow);
}
.ps-phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(48 * var(--u)) calc(12 * var(--u)) 0;
  border-radius: calc(44 * var(--u));
  background: #f5f7fb;
  color: #2d3748;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  font-size: calc(13 * var(--u));
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.ps-phone__screen--form {
  background: #fff;
  padding: calc(50 * var(--u)) calc(16 * var(--u)) 0;
  gap: calc(12 * var(--u));
}
.ps-phone__screen--bare {
  padding: 0;
  gap: 0;
}
.ps-phone__island {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: calc(10 * var(--u));
  width: calc(92 * var(--u));
  height: calc(26 * var(--u));
  margin-left: calc(-46 * var(--u));
  border-radius: calc(13 * var(--u));
  background: #15171c;
}
.ps-phone__screen strong {
  font-weight: 700;
}

/* Icons */
.ps-app-ico {
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}
.ps-app-ico--sm {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}
.ps-app-ico--xs {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
}
.ps-app-ico--ink {
  color: #2d3748;
}
.ps-app-ico--steel {
  color: #5b7c99;
}
.ps-app-ico--muted {
  color: #8a94a6;
}
.ps-app-ico--red {
  color: #f44336;
}

/* Header */
.ps-app-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: calc(40 * var(--u));
  padding: 0 calc(2 * var(--u));
}
.ps-app-header > .ps-app-ico:first-child {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.ps-app-header__title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-weight: 800;
  line-height: 1.1;
}
.ps-app-header__sub {
  margin-top: calc(2 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 600;
  color: #8a94a6;
}
.ps-app-header__mail {
  position: relative;
  display: inline-flex;
}
.ps-app-dot {
  position: absolute;
  right: calc(-2 * var(--u));
  top: calc(-1 * var(--u));
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
  background: #f44336;
}

/* Card */
.ps-app-card {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  background: #fff;
  border: 1px solid #e9ecf2;
  border-radius: calc(16 * var(--u));
}
.ps-app-card--normal {
  padding: calc(12 * var(--u)) calc(14 * var(--u));
}
.ps-app-card--list {
  padding: calc(4 * var(--u)) calc(14 * var(--u));
  gap: 0;
}
.ps-app-card--roomy {
  padding: calc(14 * var(--u));
}
.ps-app-card--tight {
  padding: calc(10 * var(--u)) calc(12 * var(--u));
}
.ps-app-card--edge {
  border-left-width: calc(6 * var(--u));
  border-left-style: solid;
}

.ps-app-overline {
  font-size: calc(11 * var(--u));
  letter-spacing: calc(0.3 * var(--u));
  color: #8a94a6;
  text-transform: uppercase;
}

/* Avatar */
.ps-app-avatar {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.ps-app-avatar__dot {
  position: absolute;
  right: calc(-1 * var(--u));
  bottom: calc(-1 * var(--u));
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid #fff;
  background: #cbd5e0;
}
.ps-app-avatar__dot--on {
  background: #4caf50;
}

/* Chips */
.ps-app-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  border-radius: calc(5 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ps-app-chip--steel {
  background: rgba(91, 124, 153, 0.12);
  color: #5b7c99;
}
.ps-app-chip--teal {
  background: rgba(42, 157, 143, 0.14);
  color: #1f7a6f;
}
.ps-app-chip--amber {
  background: rgba(244, 167, 36, 0.16);
  color: #b7791f;
}
.ps-app-chip--red {
  background: rgba(244, 67, 54, 0.12);
  color: #c62828;
}
.ps-app-chip--grey {
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
}
.ps-app-chip--lavender {
  background: rgba(123, 31, 162, 0.12);
  color: #7b1fa2;
}
.ps-app-chip--outline {
  background: #fff;
  border-color: #5b7c99;
  color: #5b7c99;
}
.ps-app-chip--solid {
  background: #f44336;
  border-color: #f44336;
  color: #fff;
}
.ps-app-chip--big {
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  font-size: calc(11.5 * var(--u));
}
.ps-app-chip--big.ps-app-chip--outline {
  border-color: #e9ecf2;
  color: #2d3748;
  font-weight: 600;
}
.ps-app-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(5 * var(--u));
}
.ps-app-chips--strip {
  flex: none;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: calc(6 * var(--u));
}
.ps-app-chips--wrap {
  gap: calc(6 * var(--u));
}

/* Segmented tabs */
.ps-app-tabs {
  flex: none;
  display: flex;
  gap: calc(4 * var(--u));
  padding: calc(4 * var(--u));
  background: #fff;
  border: 1px solid #e9ecf2;
  border-radius: calc(14 * var(--u));
}
.ps-app-tabs__item {
  flex: 1;
  padding: calc(7 * var(--u)) 0;
  border-radius: calc(10 * var(--u));
  font-size: calc(12.5 * var(--u));
  font-weight: 600;
  text-align: center;
  color: #2d3748;
}
.ps-app-tabs__item--on {
  background: #f44336;
  color: #fff;
  font-weight: 800;
}
.ps-app-tabs--compact .ps-app-tabs__item {
  padding: calc(6 * var(--u)) 0;
}
.ps-phone__screen--form .ps-app-tabs {
  background: #f5f7fb;
  border-color: transparent;
}
.ps-phone__screen--form .ps-app-tabs__item {
  padding: calc(8 * var(--u)) 0;
  font-size: calc(13 * var(--u));
}

/* Metrics, bars */
.ps-app-metric3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(6 * var(--u));
  text-align: center;
}
.ps-app-metric3__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1 * var(--u));
  min-width: 0;
}
.ps-app-metric3__value {
  font-weight: 800;
  white-space: nowrap;
}
.ps-app-metric3__label {
  font-size: calc(10.5 * var(--u));
  color: #8a94a6;
}
.ps-app-bar {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.ps-app-bar__label {
  flex: 2;
  min-width: 0;
  font-size: calc(12 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-app-bar__track {
  flex: 3;
  height: calc(8 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #eef1f5;
  overflow: hidden;
}
.ps-app-bar__track span {
  display: block;
  height: 100%;
  border-radius: calc(4 * var(--u));
  background: #5b7c99;
}
.ps-app-bar__value {
  width: calc(70 * var(--u));
  flex: none;
  white-space: nowrap;
  text-align: right;
  font-size: calc(11 * var(--u));
  font-weight: 700;
  color: #5b7c99;
}
.ps-app-goalbar {
  display: block;
  height: calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background: #eef1f5;
  overflow: hidden;
}
.ps-app-goalbar span {
  display: block;
  height: 100%;
  border-radius: calc(3 * var(--u));
  background: #4caf50;
}
.ps-app-goalbar--amber span {
  background: #f4a724;
}
.ps-app-goalbar--teal span {
  background: #2a9d8f;
}

/* Buttons */
.ps-app-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(46 * var(--u));
  border-radius: calc(23 * var(--u));
  font-size: calc(15 * var(--u));
  white-space: nowrap;
}
.ps-app-btn--primary {
  background: #f44336;
  color: #fff;
  font-weight: 700;
}
.ps-app-btn--secondary {
  background: #fff;
  border: 1px solid #e9ecf2;
  color: #2d3748;
  font-weight: 600;
}

/* Rows and lines */
.ps-app-row + .ps-app-row {
  border-top: 1px solid #eef1f5;
}
.ps-app-live {
  font-size: calc(11 * var(--u));
  font-weight: 600;
  color: #8a94a6;
}
.ps-app-live--on {
  color: #4caf50;
}
.ps-app-muted {
  font-size: calc(12 * var(--u));
  color: #8a94a6;
}
.ps-app-small {
  font-size: calc(12.5 * var(--u));
}

/* Form fields (Ödev ver) */
.ps-app-field {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
}
.ps-app-field__label {
  font-size: calc(10.5 * var(--u));
  letter-spacing: calc(0.3 * var(--u));
  color: #8a94a6;
}
.ps-app-field__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(12 * var(--u));
  border: 1px solid #e9ecf2;
  border-radius: calc(12 * var(--u));
  background: #f8fafc;
  font-size: calc(13.5 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}
.ps-app-field__action {
  font-size: calc(12 * var(--u));
  font-weight: 700;
  color: #f44336;
}
.ps-app-choice {
  padding: calc(7 * var(--u)) calc(10 * var(--u));
  border: 1px solid #e9ecf2;
  border-radius: calc(12 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}
.ps-app-choice--on {
  background: #f44336;
  border-color: #f44336;
  color: #fff;
  font-weight: 700;
}
.ps-app-stephead {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ps-app-stephead strong {
  font-size: calc(18 * var(--u));
  font-weight: 800;
}
.ps-app-stephead span {
  font-size: calc(11 * var(--u));
  color: #8a94a6;
}
.ps-app-question {
  flex: none;
  font-size: calc(15 * var(--u));
  font-weight: 700;
}
.ps-app-link {
  flex: none;
  font-size: calc(12.5 * var(--u));
  font-weight: 700;
  color: #f44336;
}
.ps-app-note {
  flex: none;
  font-size: calc(12 * var(--u));
  line-height: 1.35;
  color: #8a94a6;
}
.ps-app-note--icon {
  display: flex;
  align-items: flex-start;
  gap: calc(6 * var(--u));
}
.ps-app-checklist {
  flex: none;
  display: flex;
  flex-direction: column;
}
.ps-app-checkrow {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) 0;
}
.ps-app-checkrow strong {
  font-size: calc(13 * var(--u));
}
.ps-app-check {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #f44336;
  color: #fff;
}
.ps-app-check svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}

/* Agenda */
.ps-app-pending {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 600;
}
.ps-app-pending > span:nth-child(2) {
  flex: 1;
}
.ps-app-tile {
  flex: none;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: calc(8 * var(--u));
}
.ps-app-lesson {
  display: flex;
  gap: calc(10 * var(--u));
  padding-left: calc(8 * var(--u));
  border-left: calc(3 * var(--u)) solid #cbd5e0;
}
.ps-app-lesson__time {
  flex: none;
  width: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
}
.ps-app-lesson__time strong {
  font-size: calc(13 * var(--u));
  font-weight: 800;
}
.ps-app-lesson__time span {
  font-size: calc(11 * var(--u));
  color: #8a94a6;
}
.ps-app-lesson__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
}
.ps-app-lesson__main > strong {
  font-size: calc(13 * var(--u));
}
.ps-app-lesson__main > span:not(.ps-app-chips) {
  font-size: calc(11.5 * var(--u));
  color: #8a94a6;
}
.ps-app-lesson__actions {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: calc(5 * var(--u));
}
.ps-app-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: calc(10 * var(--u));
}
.ps-app-act svg {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
}
.ps-app-act--done {
  background: rgba(42, 157, 143, 0.12);
  color: #2a9d8f;
}
.ps-app-act--missed {
  background: rgba(176, 52, 42, 0.1);
  color: #b0342a;
}
.ps-app-act--cancel {
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
}

/* Student page */
.ps-app-person {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.ps-app-person__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}
.ps-app-person__name {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
}
.ps-app-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ps-app-pager strong {
  font-size: calc(14 * var(--u));
  font-weight: 800;
}
.ps-app-pager__arrow {
  font-size: calc(16 * var(--u));
  color: #8a94a6;
}
.ps-app-pager__arrow--off {
  color: #cbd5e0;
}
.ps-app-chart {
  height: calc(120 * var(--u));
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(8 * var(--u));
  align-items: end;
}
.ps-app-chart__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
}
.ps-app-chart__bar {
  width: 100%;
  border-radius: calc(6 * var(--u)) calc(6 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u));
  background: #2a9d8f;
}
.ps-app-chart__bar--zero {
  height: calc(3 * var(--u));
  background: #cbd5e0;
}
.ps-app-chart__dot {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
}
.ps-app-chart__day {
  font-size: calc(10 * var(--u));
  color: #8a94a6;
}
.ps-app-legend {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-size: calc(11 * var(--u));
  color: #8a94a6;
}
.ps-app-legend span {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
}
.ps-app-foot {
  font-size: calc(11 * var(--u));
  color: #8a94a6;
}

/* Goals and daily dots */
.ps-app-goal,
.ps-app-daily {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
}
.ps-app-goal__head,
.ps-app-daily__head {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-size: calc(12.5 * var(--u));
}
.ps-app-goal__head > span,
.ps-app-daily__head > span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-app-goal__head strong {
  font-size: calc(12 * var(--u));
  font-weight: 800;
  white-space: nowrap;
}
.ps-app-daily__head em {
  font-style: normal;
  font-size: calc(11 * var(--u));
  color: #8a94a6;
  white-space: nowrap;
}
.ps-app-daily__dots {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
}
.ps-app-daily__dots strong {
  margin-left: auto;
  font-size: calc(11 * var(--u));
  color: #5b7c99;
}
.ps-app-dayDot {
  flex: none;
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
}
.ps-app-dayDot--hit {
  background: #4caf50;
}
.ps-app-dayDot--partial {
  background: linear-gradient(90deg, #4caf50 50%, #e2e8f0 50%);
}
.ps-app-dayDot--miss {
  background: #fff;
  border: calc(1.5 * var(--u)) solid #cbd5e0;
}
.ps-app-dayDot--future {
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  margin: 0 calc(2 * var(--u));
  background: #e2e8f0;
}

/* Hafta rows */
.ps-app-totals {
  flex: none;
  padding: 0 calc(4 * var(--u));
  font-size: calc(12.5 * var(--u));
  line-height: 1.35;
  color: #8a94a6;
}
.ps-app-weekrow {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  padding: calc(9 * var(--u)) 0;
}
.ps-app-weekrow__main {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.ps-app-weekrow__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(2 * var(--u));
}
.ps-app-weekrow__text strong {
  font-size: calc(13.5 * var(--u));
}
.ps-app-weekrow__text > span:not(.ps-app-chips) {
  font-size: calc(11.5 * var(--u));
  color: #8a94a6;
}
.ps-app-weekrow__text .ps-app-chips {
  margin-top: calc(2 * var(--u));
}
.ps-app-weekrow__progress {
  padding-left: calc(46 * var(--u));
}
.ps-app-folded {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(11 * var(--u)) 0;
}
.ps-app-folded span {
  font-size: calc(11.5 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.4 * var(--u));
  color: #5b7c99;
}
.ps-app-folded em {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  color: #f44336;
}

/* Chat */
.ps-app-banner {
  flex: none;
  padding: calc(7 * var(--u)) calc(10 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(91, 124, 153, 0.1);
  font-size: calc(11 * var(--u));
  line-height: 1.35;
  color: #5b7c99;
}
.ps-app-day {
  align-self: center;
  font-size: calc(10.5 * var(--u));
  color: #8a94a6;
}
.ps-app-bubble {
  flex: none;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
  padding: calc(9 * var(--u)) calc(12 * var(--u));
  font-size: calc(13.5 * var(--u));
  line-height: 1.35;
}
.ps-app-bubble--theirs {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #e9ecf2;
  border-radius: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u));
}
.ps-app-bubble--mine {
  align-self: flex-end;
  background: #fff1ee;
  border: 1px solid #ffd7d6;
  border-radius: calc(16 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)) calc(16 * var(--u));
}
.ps-app-bubble__from {
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
  color: #5b7c99;
}
.ps-app-bubble__time {
  align-self: flex-end;
  font-size: calc(10.5 * var(--u));
  color: #7a8aa0;
}
.ps-app-composer {
  flex: none;
  margin-top: calc(6 * var(--u));
  height: calc(44 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(14 * var(--u));
  border: 1px solid #e9ecf2;
  border-radius: calc(22 * var(--u));
  background: #fff;
  font-size: calc(13.5 * var(--u));
  color: #8a94a6;
}

/* Invite sheet */
.ps-app-listrow {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) 0;
}
.ps-app-listrow strong {
  flex: 1;
  font-size: calc(13 * var(--u));
}
.ps-app-classhead {
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--u));
}
.ps-app-classhead strong {
  font-size: calc(16 * var(--u));
}
.ps-app-classhead span {
  font-size: calc(13 * var(--u));
  color: #5b7c99;
}
.ps-app-scrim {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: rgba(15, 20, 30, 0.35);
}
.ps-app-sheet {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(230 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  padding: calc(10 * var(--u)) calc(18 * var(--u)) 0;
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  background: #fff;
}
.ps-app-sheet__grabber {
  align-self: center;
  width: calc(32 * var(--u));
  height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #cbd5e0;
}
.ps-app-sheet__title {
  font-size: calc(18 * var(--u));
  font-weight: 800;
}
.ps-app-sheet__body {
  font-size: calc(13 * var(--u));
  line-height: 1.45;
  color: #8a94a6;
}
.ps-app-sheet__actions {
  display: flex;
  gap: calc(8 * var(--u));
}
.ps-app-sheet__actions .ps-app-btn {
  flex: 1;
}
.ps-app-code {
  padding: calc(16 * var(--u));
  border: 1px solid #e9ecf2;
  border-radius: calc(14 * var(--u));
  background: #f5f7fb;
  font-size: calc(24 * var(--u));
  font-weight: 800;
  letter-spacing: calc(3 * var(--u));
  text-align: center;
  color: #2d3748;
}

/* ---------------------------------------------------------------------------
 * Final QA pass: contrast, tap targets, mock fit, sticky bar clearance
 * ------------------------------------------------------------------------- */

/* Small grey text (eyebrows, captions, notes): the landing's #8a90a0 is
 * 3.19:1 on white and 2.67:1 on the peach band. #626a7d clears 4.5:1 on
 * white, cream, lavender and peach. Scoped to persona pages; the landing keeps
 * its own token (brand call). */
.ps-page .v2-eyebrow,
.ps-page .ps-caption,
.ps-page .ps-pricing__note,
.ps-page .ps-frow__note svg {
  color: #626a7d;
}
.ps-page .ps-head--dark .v2-eyebrow {
  color: #ffb3a3;
}
.ps-page .ps-band--navy .v2-eyebrow,
.ps-page .ps-band--navy .ps-caption {
  color: rgba(255, 255, 255, 0.7);
}
/* Steps sit on the peach band: darker lead and a deeper red accent (large
 * text, 3.92:1). */
.ps-page .ps-steps .v2-section-lead {
  color: #565f75;
}
.ps-page .ps-steps .v2-section-title em {
  color: #d93336;
}
/* Red text links: #ff4245 is 3.43:1 on white. Buttons keep the brand red;
 * inline text links use a deeper red (5.58:1 on white, 4.7:1 on the tints). */
.ps-page .ps-link,
.ps-page .ps-band__links a {
  color: #c8262a;
}
.ps-page .ps-band--navy .ps-band__links a {
  color: #ffb3a3;
}
/* Inline links get a taller hit area on touch screens. */
.ps-page .ps-link,
.ps-page .ps-band__links a {
  padding-block: 6px;
}
.ps-page .ps-cross__card .ps-link {
  padding-top: 14px;
}

/* Invite-code sheet hugs its content on desktop (no empty white below the
 * buttons). Below 900px the mock is cropped to its top, so the sheet stays
 * pinned high where the crop shows it. */
@media (min-width: 900px) {
  .ps-page .ps-app-sheet {
    top: auto;
    padding-bottom: calc(30 * var(--u));
  }
}

/* Lesson rows: slimmer mark buttons leave room for "Elif · Matematik" on one
 * line; a longer title ends in an ellipsis instead of wrapping. */
.ps-page .ps-app-lesson__actions {
  gap: calc(4 * var(--u));
}
.ps-page .ps-app-lesson__actions .ps-app-act {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border-radius: calc(8 * var(--u));
}
.ps-page .ps-app-lesson__actions .ps-app-act svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}
.ps-page .ps-app-lesson__main > strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Segmented tabs: four labels share the strip evenly and never push the last
 * (often active) tab past the edge. */
.ps-page .ps-app-tabs {
  gap: calc(2 * var(--u));
}
.ps-page .ps-app-tabs__item {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: calc(2 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The fixed mobile sticky bar (bottom 12px, ~56px tall) must not cover the
 * footer's last row when the page is scrolled to the end. */
@media (max-width: 1023px) {
  .ps-page .v2-footer__bottom {
    padding-bottom: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-page .ps-float__live {
    animation: none;
  }
  .ps-page .v2-btn:hover,
  .ps-page .ps-switch__pill {
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 * Month Ajanda (screens/MonthAgendaScreen: tutor hero, coach Görüşmeler row)
 * ------------------------------------------------------------------------- */

.ps-mag-pending {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
  color: #2d3748;
}
.ps-mag-pending > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.ps-mag-pending__tile {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  flex-shrink: 0;
  border-radius: calc(5 * var(--u));
  background: rgba(123, 31, 162, 0.14);
}
.ps-mag-kinds {
  display: flex;
  flex-shrink: 0;
  gap: calc(5 * var(--u));
  overflow: hidden;
}
.ps-mag-kind {
  flex-shrink: 0;
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border: 1px solid #e9ecf2;
  border-radius: 999px;
  background: #fff;
  font-size: calc(10.5 * var(--u));
  font-weight: 600;
  color: #8a94a6;
}
.ps-mag-kind--on {
  border-color: rgba(244, 67, 54, 0.35);
  background: rgba(244, 67, 54, 0.08);
  color: #c62828;
  font-weight: 700;
}
.ps-mag-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(4 * var(--u));
}
.ps-mag-month strong {
  font-size: calc(14 * var(--u));
  font-weight: 800;
}
.ps-mag-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(3 * var(--u));
}
.ps-mag-cal__wd {
  padding-bottom: calc(2 * var(--u));
  text-align: center;
  font-size: calc(9 * var(--u));
  color: #8a94a6;
}
.ps-mag-cal__cell {
  min-width: 0;
  height: calc(37 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  padding: calc(3 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #f8fafc;
  overflow: hidden;
}
.ps-mag-cal__cell--empty {
  background: transparent;
}
.ps-mag-cal__cell--today {
  background: #fff;
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) #f44336;
}
.ps-mag-cal__no {
  font-size: calc(9 * var(--u));
  font-weight: 700;
  color: #2d3748;
}
.ps-mag-cal__cell--today .ps-mag-cal__no {
  color: #f44336;
}
.ps-mag-cal__chip {
  display: block;
  padding: calc(0.5 * var(--u)) calc(2 * var(--u));
  border-left: calc(2 * var(--u)) solid;
  border-radius: calc(2 * var(--u));
  font-size: calc(7.5 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.ps-mag-cal__chip--elif {
  background: rgba(64, 77, 213, 0.12);
  border-color: #404dd5;
  color: #2e38a8;
}
.ps-mag-cal__chip--can {
  background: rgba(230, 81, 0, 0.12);
  border-color: #e65100;
  color: #a33a00;
}
.ps-mag-cal__chip--zeynep {
  background: rgba(123, 31, 162, 0.12);
  border-color: #7b1fa2;
  color: #6a1b8a;
}
.ps-mag-cal__chip--deniz {
  background: rgba(80, 159, 224, 0.14);
  border-color: #509fe0;
  color: #1f6aa8;
}
.ps-mag-dayhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ps-mag-dayhead strong {
  font-size: calc(13 * var(--u));
  font-weight: 800;
}
.ps-mag-agenda {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding-left: calc(9 * var(--u));
  border-left: calc(3 * var(--u)) solid;
}
.ps-mag-agenda__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  font-size: calc(11 * var(--u));
  color: #626a7d;
}
.ps-mag-agenda__text strong {
  font-size: calc(12.5 * var(--u));
  color: #2d3748;
}