/* ===== Landingpage Base Styles (migrated from landingpage.html) ===== */

    :root {
      color-scheme: light;
      --page-bg: #ffffff;
      --surface: #ffffff;
      --surface-alt: #fafbfd;
      --text: #212529;
      --muted: #6c757d;
      --muted-blue: #556577;
      --muted-proof: #607891;
      --line: rgba(33, 37, 41, 0.08);
      --shadow-soft: rgba(15, 23, 42, 0.08);
      --shadow-deep: rgba(15, 23, 42, 0.05);
      --blue-soft: #d3e8ff;
      --blue-strong: #82b6ea;
      --pink-soft: #f2a9b8;
      --shadow: 0 22px 44px rgba(15, 23, 42, 0.06);
      --radius-xl: 2rem;
      --panel-border: rgba(33, 37, 41, 0.10);
      --section-alt-background: #ebf1fc;
      --hero-display-title-size: clamp(2.35rem, 4.45vw, 4.25rem);
      --section-display-title-size: clamp(2.15rem, 4vw, 3.75rem);
      --story-display-title-size: clamp(1.86rem, 3.35vw, 3.1rem);
    
      --color-rgba-255-255-255-0-96: rgba(255, 255, 255, 0.96);
      --color-rgba-255-255-255-0-75: rgba(255, 255, 255, 0.75);
      --color-rgba-255-255-255-0-8: rgba(255, 255, 255, 0.8);
      --color-rgba-15-23-42-0-04: rgba(15, 23, 42, 0.04);
      --color-hex-4f6377: #4f6377;
      --color-rgba-130-182-234-0-62: rgba(130, 182, 234, 0.62);
      --color-rgba-242-169-184-0-28: rgba(242, 169, 184, 0.28);
      --color-rgba-255-255-255-0-98: rgba(255, 255, 255, 0.98);
      --color-rgba-33-37-41-0-04: rgba(33, 37, 41, 0.04);
      --color-hex-41566d: #41566d;
      --color-rgba-211-232-255-0-62: rgba(211, 232, 255, 0.62);
      --color-rgba-242-169-184-0-14: rgba(242, 169, 184, 0.14);
      --color-rgba-255-255-255-0-24: rgba(255, 255, 255, 0.24);
      --color-rgba-15-23-42-0-18: rgba(15, 23, 42, 0.18);
      --color-rgba-15-23-42-0-2: rgba(15, 23, 42, 0.2);
      --color-rgba-15-23-42-0-045: rgba(15, 23, 42, 0.045);
      --color-rgba-33-37-41-0-12: rgba(33, 37, 41, 0.12);
      --color-rgba-130-182-234-0-65: rgba(130, 182, 234, 0.65);
      --color-rgba-242-169-184-0-8: rgba(242, 169, 184, 0.8);
      --color-rgba-211-232-255-0-72: rgba(211, 232, 255, 0.72);
      --color-rgba-33-37-41-0-06: rgba(33, 37, 41, 0.06);
      --color-hex-34577a: #34577a;
      --color-rgba-169-93-110-0-2: rgba(169, 93, 110, 0.2);
      --color-hex-6d3946: #6d3946;
      --color-rgba-211-232-255-0-92: rgba(211, 232, 255, 0.92);
      --color-rgba-52-87-122-0-2: rgba(52, 87, 122, 0.2);
      --color-hex-2f4f6d: #2f4f6d;
      --color-rgba-191-219-254-0-92: rgba(191, 219, 254, 0.92);
      --color-rgba-242-169-184-0-24: rgba(242, 169, 184, 0.24);
      --color-rgba-169-93-110-0-16: rgba(169, 93, 110, 0.16);
      --color-rgba-169-93-110-0-1: rgba(169, 93, 110, 0.1);
      --color-rgba-15-23-42-0-06: rgba(15, 23, 42, 0.06);
      --color-hex-33262b: #33262b;
      --color-hex-e89dad: #e89dad;
      --color-rgba-169-93-110-0-22: rgba(169, 93, 110, 0.22);
      --color-rgba-169-93-110-0-12: rgba(169, 93, 110, 0.12);
      --color-hex-2a1f23: #2a1f23;
      --color-rgba-15-23-42-0-03: rgba(15, 23, 42, 0.03);
      --color-rgba-211-232-255-0-42: rgba(211, 232, 255, 0.42);
      --color-rgba-242-169-184-0-085: rgba(242, 169, 184, 0.085);
      --color-hex-75414d: #75414d;
      --color-rgba-242-169-184-0-13: rgba(242, 169, 184, 0.13);
      --color-rgba-211-232-255-0-55: rgba(211, 232, 255, 0.55);
      --color-rgba-211-232-255-0-9: rgba(211, 232, 255, 0.9);
      --color-rgba-242-169-184-0-46: rgba(242, 169, 184, 0.46);
      --color-hex-6c5a51: #6c5a51;
      --color-hex-f2c4a0: #f2c4a0;
      --color-hex-7faedf: #7faedf;
      --color-hex-6f7f90: #6f7f90;
      --color-rgba-211-232-255-0-36: rgba(211, 232, 255, 0.36);
      --color-hex-4c6177: #4c6177;
      --color-rgba-33-37-41-0-16: rgba(33, 37, 41, 0.16);
      --color-hex-19344f: #19344f;
      --color-hex-7b90aa: #7b90aa;
      --color-rgba-242-169-184-0-22: rgba(242, 169, 184, 0.22);
      --color-hex-744b57: #744b57;
      --color-rgba-79-136-186-0-96: rgba(79, 136, 186, 0.96);
      --color-rgba-130-182-234-0-88: rgba(130, 182, 234, 0.88);
      --color-rgba-242-169-184-0-96: rgba(242, 169, 184, 0.96);
      --color-rgba-234-140-160-0-88: rgba(234, 140, 160, 0.88);
      --color-hex-1b5484: #1b5484;
      --color-rgba-130-182-234-0-98: rgba(130, 182, 234, 0.98);
      --color-rgba-130-182-234-0-18: rgba(130, 182, 234, 0.18);
      --color-rgba-211-232-255-0-8: rgba(211, 232, 255, 0.8);
      --color-hex-8a5662: #8a5662;
      --color-hex-364250: #364250;
      --color-rgba-176-80-85-0-14: rgba(176, 80, 85, 0.14);
      --color-rgba-130-182-234-0-26: rgba(130, 182, 234, 0.26);
      --color-rgba-130-182-234-0-42: rgba(130, 182, 234, 0.42);
      --color-rgba-211-232-255-0-4: rgba(211, 232, 255, 0.4);
      --color-rgba-15-23-42-0-07: rgba(15, 23, 42, 0.07);
      --color-rgba-130-182-234-0-36: rgba(130, 182, 234, 0.36);
      --color-hex-506882: #506882;
      --color-rgba-255-255-255-0-95: rgba(255, 255, 255, 0.95);
      --color-rgba-255-255-255-0-92: rgba(255, 255, 255, 0.92);
      --color-rgba-211-232-255-0-82: rgba(211, 232, 255, 0.82);
      --color-rgba-130-182-234-0-3: rgba(130, 182, 234, 0.3);
      --color-hex-365978: #365978;
      --color-rgba-247-251-255-0-98: rgba(247, 251, 255, 0.98);
      --color-rgba-130-182-234-0-9: rgba(130, 182, 234, 0.9);
      --color-rgba-242-169-184-0-9: rgba(242, 169, 184, 0.9);
      --color-rgba-211-232-255-0-7: rgba(211, 232, 255, 0.7);
      --color-hex-35587a: #35587a;
      --color-rgba-242-169-184-0-26: rgba(242, 169, 184, 0.26);
      --color-hex-6a3a47: #6a3a47;
      --color-rgba-247-251-255-0-88: rgba(247, 251, 255, 0.88);
      --color-hex-2f4153: #2f4153;
      --color-hex-3d6180: #3d6180;
      --color-hex-fff: #fff;
      --color-rgba-15-23-42-0-12: rgba(15, 23, 42, 0.12);
      --color-rgba-255-255-255-0-62: rgba(255, 255, 255, 0.62);
      --color-hex-3e5164: #3e5164;
      --color-hex-294968: #294968;
      --color-transparent: transparent;
}

    body{
      color: var(--text);
      background: var(--page-bg);
    }

    .site-shell {
      overflow: hidden;
    }

    .site-nav {
      position: relative;
      z-index: 1;
      background: var(--color-rgba-255-255-255-0-96);
      border-bottom: 1px solid var(--line);
    }

    .site-nav .navbar-brand {
      min-height: 50px;
    }

    .navbar-logo {
      display: block;
      width: 50px;
      height: 50px;
      flex: 0 0 auto;
      object-fit: contain;
    }

    .brand-mark {
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 999px;
      border: 1px solid var(--line);
      background:
        radial-gradient(circle at 30% 30%, var(--blue-soft), var(--color-transparent) 44%),
        radial-gradient(circle at 68% 70%, var(--pink-soft), var(--color-transparent) 42%),
        var(--page-bg);
      box-shadow: inset 0 1px 0 var(--color-rgba-255-255-255-0-75);
    }

    .brand-logo-image {
      display: block;
      width: 50px;
      height: auto;
      flex: 0 0 auto;
      object-fit: contain;
    }

    .brand-logo-mark {
      display: none;
    }

    .brand-aihomeworkmate .brand-logo-image {
      display: none;
    }

    .brand-aihomeworkmate .brand-logo-mark {
      display: inline-block;
    }

    .nav-link-lite {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .nav-link-lite:hover,
    .nav-link-lite:focus {
      color: var(--text);
    }

    .nav-link-lite.is-active,
    .nav-link-lite[aria-current="page"],
    .nav-link-lite.is-active:hover,
    .nav-link-lite.is-active:focus,
    .nav-link-lite[aria-current="page"]:hover,
    .nav-link-lite[aria-current="page"]:focus {
      color: var(--text);
    }

    .hero{
      padding: clamp(4.5rem, 7vw, 6rem) 0 clamp(3.25rem, 6vw, 4.5rem);
      background: var(--section-alt-background);
    }

    .eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.45rem 0.8rem;
      border-radius: 999px;
      border: 1px solid var(--panel-border);
      background: var(--color-rgba-255-255-255-0-8);
      color: var(--muted-proof);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .hero-title{
      font-family: Georgia, "Times New Roman", serif;
      font-size: var(--hero-display-title-size);
      line-height: 0.95;
      letter-spacing: -0.06em;
      max-width: 14ch;
    }

    .hero-copy{
      color: var(--muted-blue);
      font-size: 1.06rem;
      line-height: 1.7;
      max-width: 34rem;
    }

    .hero-meta {
      max-width: 42rem;
      color: var(--muted-blue);
      font-size: 0.9rem;
      margin-top: 1.25rem;
    }

    .proof-note {
      color: var(--muted-proof);
      font-size: 0.9rem;
      font-weight: 650;
    }

    .landing-section-white {
      background: var(--page-bg);
    }

    .landing-section-alt {
      background: var(--section-alt-background);
    }

    .support-section {
      padding: clamp(5rem, 9vw, 8rem) 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .support-section + .support-section {
      border-top: 0;
    }

    .homework-flow-section {
      padding: clamp(5rem, 9vw, 8rem) 0;
      border-bottom: 1px solid var(--line);
    }

    .homework-flow-shell {
      display: grid;
      grid-template-columns: minmax(18rem, 0.74fr) minmax(0, 1.26fr);
      align-items: start;
      gap: clamp(2rem, 6vw, 6rem);
    }

    .homework-flow-intro {
      position: sticky;
      top: 5.5rem;
    }

    .homework-flow-title {
      max-width: 11ch;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.5rem, 4.4vw, 4.5rem);
      line-height: 0.96;
      letter-spacing: -0.05em;
    }

    .homework-flow-copy {
      max-width: 30rem;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.65;
    }

    .homework-flow-note {
      max-width: 25rem;
      padding: 0.95rem 1.05rem;
      border: 1px solid var(--panel-border);
      border-radius: 1.3rem;
      background: var(--page-bg);
      box-shadow: 0 12px 28px var(--color-rgba-15-23-42-0-04);
      color: var(--color-hex-4f6377);
      line-height: 1.58;
    }

    .homework-flow-rail {
      position: relative;
      display: grid;
      gap: 1rem;
      padding-left: clamp(1.1rem, 3vw, 2rem);
    }

    .homework-flow-rail::before {
      content: "";
      position: absolute;
      top: 0.9rem;
      bottom: 0.9rem;
      left: 0.39rem;
      width: 1px;
      background: linear-gradient(180deg, var(--color-rgba-130-182-234-0-62), var(--color-rgba-242-169-184-0-28));
    }

    .homework-step {
      position: relative;
      overflow: visible;
      padding: 1.35rem 1.4rem 1.45rem;
      border: 1px solid var(--panel-border);
      border-radius: 1.65rem;
      background: var(--page-bg);
      box-shadow: 0 18px 36px var(--shadow-deep);
    }

    .homework-step::before {
      content: "";
      position: absolute;
      top: 1.55rem;
      left: calc(-1 * clamp(1.1rem, 3vw, 2rem));
      width: 0.78rem;
      height: 0.78rem;
      border-radius: 999px;
      background: var(--blue-strong);
      box-shadow: 0 0 0 0.45rem var(--color-rgba-255-255-255-0-98);
    }

    .homework-step.is-rose::before {
      background: var(--pink-soft);
    }

    .homework-step.is-blue {
      background: var(--page-bg);
    }

    .homework-step.is-rose {
      background: var(--page-bg);
    }

    .homework-step:nth-child(even) {
      margin-left: clamp(1rem, 4vw, 3rem);
    }

    .homework-step-head {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      margin-bottom: 0.95rem;
    }

    .homework-step-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.5rem;
      height: 2.5rem;
      padding-inline: 0.7rem;
      border-radius: 999px;
      background: var(--color-rgba-33-37-41-0-04);
      color: var(--color-hex-41566d);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.06em;
    }

    .homework-step.is-blue .homework-step-number {
      background: var(--color-rgba-211-232-255-0-62);
    }

    .homework-step.is-rose .homework-step-number {
      background: var(--color-rgba-242-169-184-0-14);
    }

    .homework-step-stage {
      color: var(--muted-proof);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .homework-step-title {
      max-width: 22ch;
      font-size: clamp(1.35rem, 2.1vw, 1.8rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.03em;
    }

    .homework-step-copy {
      max-width: 36rem;
      color: var(--muted);
      line-height: 1.62;
    }

    .story-row + .story-row {
      margin-top: clamp(5rem, 10vw, 8rem);
    }

    .story-copy {
      padding-inline: clamp(0rem, 2vw, 1.5rem);
    }

    .story-kicker {
      color: var(--muted-proof);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .story-title {
      font-family: Georgia, "Times New Roman", serif;
      letter-spacing: -0.05em;
      line-height: 0.96;
      max-width: 11ch;
      font-size: var(--story-display-title-size);
    }

    .story-body {
      max-width: 20rem;
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.65;
    }

    .landing-section-alt .story-body,
    .landing-section-alt .lp-governance-copy,
    .landing-section-alt .lp-stories-copy,
    .landing-section-alt .pricing-copy,
    .landing-section-alt .lp-integrity-copy {
      color: var(--muted-blue);
    }

    .editorial-row {
      display: block;
    }

    .editorial-copy {
      max-width: 58rem;
      padding-left: clamp(0rem, 1.5vw, 1rem);
      margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
    }

    .editorial-copy::before {
      display: none;
    }

    .editorial-copy .story-title {
      max-width: none;
    }

    .editorial-copy .story-body {
      max-width: 48rem;
    }

    .story-visual {
      position: relative;
      display: flex;
      align-items: center;
      min-height: clamp(22rem, 34vw, 31rem);
    }

    .story-visual::before {
      content: "";
      display: none;
    }

    .story-visual.is-right {
      justify-content: flex-end;
    }

    .story-visual.is-right::before {
      display: none;
    }

    .story-visual.is-left {
      justify-content: flex-start;
    }

    .story-visual.is-left::before {
      display: none;
    }

    .editorial-media {
      width: min(84%, 62rem);
      min-height: 0;
      margin-left: auto;
    }

    .story-frame {
      position: relative;
      z-index: 1;
      overflow: hidden;
      width: min(100%, 58rem);
      border: 1px solid var(--panel-border);
      border-radius: 2rem;
      background: var(--page-bg);
      box-shadow: 0 18px 36px var(--shadow-deep);
      padding: clamp(1rem, 2vw, 1.3rem);
    }

    .story-frame.is-right {
      margin-right: 0;
    }

    .story-frame.is-left {
      margin-left: 0;
    }

    .story-image {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      border-radius: 1rem;
      border: 1px solid var(--color-rgba-255-255-255-0-24);
      box-shadow: 0 22px 44px var(--color-rgba-15-23-42-0-18);
      transition: transform 0.35s ease, box-shadow 0.35s ease;
    }

    .story-frame:hover .story-image,
    .story-frame:focus-within .story-image {
      transform: translateY(-0.25rem);
      box-shadow: 0 28px 54px var(--color-rgba-15-23-42-0-2);
    }

    .guided-row {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      gap: clamp(2rem, 4vw, 4rem);
      align-items: center;
    }

    .guided-copy {
      max-width: none;
      margin-left: 0;
      margin-bottom: 0;
      padding-right: clamp(0rem, 1vw, 0.75rem);
      text-align: left;
    }

    .guided-copy .story-title {
      max-width: none;
      font-size: var(--story-display-title-size);
    }

    .guided-copy .story-body {
      max-width: none;
    }

    .guided-row .story-visual {
      width: 100%;
      min-height: 0;
      justify-content: flex-end;
    }

    .tutor-stage {
      position: relative;
      z-index: 1;
      width: min(100%, 58rem);
    }

    .tutor-stage.is-left {
      margin-left: 0;
    }

    .tutor-surface {
      padding: clamp(1.4rem, 2.4vw, 2rem);
      border-radius: 2rem;
      box-shadow: 0 18px 36px var(--shadow-deep);
    }

    .tutor-surface .conversation-stack {
      gap: 1rem;
    }

    .conversation-surface{
      border: 1px solid var(--panel-border);
      border-radius: var(--radius-xl);
      background: var(--page-bg);
      box-shadow: 0 18px 36px var(--color-rgba-15-23-42-0-045);
      padding: clamp(1.05rem, 2vw, 1.4rem);
    }


    .window-dot {
      width: 0.72rem;
      height: 0.72rem;
      border-radius: 999px;
      background: var(--color-rgba-33-37-41-0-12);
    }

    .window-dot.is-blue {
      background: var(--color-rgba-130-182-234-0-65);
    }

    .window-dot.is-pink {
      background: var(--color-rgba-242-169-184-0-8);
    }

    .conversation-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      background: var(--color-rgba-211-232-255-0-72);
      border: 1px solid var(--color-rgba-33-37-41-0-06);
      border-radius: 999px;
      color: var(--color-hex-34577a);
      font-size: 0.82rem;
      font-weight: 600;
    }

    .conversation-tag.is-approved {
      background: var(--color-rgba-242-169-184-0-28);
      border-color: var(--color-rgba-169-93-110-0-2);
      color: var(--color-hex-6d3946);
    }

    .conversation-tag.is-student-action {
      background: var(--color-rgba-211-232-255-0-92);
      border-color: var(--color-rgba-52-87-122-0-2);
      color: var(--color-hex-2f4f6d);
    }

    .conversation-stack {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }

    .message-row {
      display: flex;
      margin-bottom: 0;
    }

    .message-row.user {
      justify-content: flex-end;
    }

    .message-row.is-status {
      justify-content: center;
    }

    .chat-bubble {
      max-width: 84%;
      border-radius: 1.35rem;
      padding: 0.85rem 1rem;
      line-height: 1.5;
      box-shadow: 0 12px 26px var(--shadow-deep);
    }

    .chat-bubble.user {
      background: linear-gradient(135deg, var(--color-rgba-211-232-255-0-92), var(--color-rgba-191-219-254-0-92));
      border: 1px solid var(--color-rgba-33-37-41-0-06);
    }

    .chat-bubble.assistant {
      background: var(--color-rgba-255-255-255-0-96);
      border: 1px solid var(--line);
    }

    .chat-label {
      color: var(--blue-strong);
      font-size: 0.76rem;
      font-weight: 700;
    }

    .btn-soft{
      background: var(--page-bg);
      border: 1px solid var(--line);
      color: var(--text);
      transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

    .btn-soft:hover,
    .btn-soft:focus{
      background: var(--color-rgba-242-169-184-0-24);
      border-color: var(--color-rgba-169-93-110-0-16);
      box-shadow: 0 10px 22px var(--color-rgba-169-93-110-0-1);
      transform: translateY(-1px);
      color: var(--text);
    }

    .btn-soft:active{
      transform: translateY(0px);
      box-shadow: 0 6px 14px var(--color-rgba-15-23-42-0-06);
    }

    .btn-rose {
      background: var(--pink-soft);
      border: 1px solid var(--color-rgba-169-93-110-0-16);
      color: var(--color-hex-33262b);
      transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

    .btn-rose:hover,
    .btn-rose:focus {
      background: var(--color-hex-e89dad);
      border-color: var(--color-rgba-169-93-110-0-22);
      box-shadow: 0 10px 22px var(--color-rgba-169-93-110-0-12);
      transform: translateY(-1px);
      color: var(--color-hex-2a1f23);
    }

    .btn-rose:active {
      transform: translateY(0px);
      box-shadow: 0 6px 14px var(--color-rgba-169-93-110-0-1);
    }

    .footer-shell {
      border-top: 1px solid var(--line);
    }

    .workflow-section {
      padding: clamp(5rem, 9vw, 8rem) 0;
    }

    .homework-flow-grid-section {
      padding: clamp(4.5rem, 8vw, 7rem) 0;
      border-bottom: 1px solid var(--line);
    }

    .homework-flow-poster-section {
      padding: clamp(4.75rem, 8vw, 7.5rem) 0;
      border-bottom: 1px solid var(--line);
    }

    .homework-flow-poster-header {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 1.5rem 2.75rem;
      align-items: end;
      margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
    }

    .homework-flow-poster-title {
      max-width: 11ch;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.3rem, 4vw, 4rem);
      line-height: 0.98;
      letter-spacing: -0.05em;
    }

    .homework-flow-poster-copy {
      max-width: 36rem;
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.66;
    }

    .homework-flow-poster-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }

    .homework-poster-card {
      display: grid;
      gap: 0.95rem;
      min-height: 100%;
      padding: clamp(1.2rem, 1.8vw, 1.55rem);
      border: 1px solid var(--panel-border);
      border-radius: 1.55rem;
      background: var(--page-bg);
      box-shadow: 0 10px 22px var(--color-rgba-15-23-42-0-03);
    }

    .homework-poster-card.is-blue {
      background: var(--page-bg);
    }

    .homework-poster-card.is-rose {
      background: var(--page-bg);
    }

    .homework-poster-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }

    .homework-poster-card-headline {
      display: flex;
      align-items: center;
      gap: 0.95rem;
      min-width: 0;
    }

    .homework-poster-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3rem;
      height: 3rem;
      border-radius: 1rem;
      background: var(--color-rgba-33-37-41-0-04);
      color: var(--color-hex-41566d);
      font-size: 1.08rem;
      flex: 0 0 auto;
    }

    .homework-poster-card.is-blue .homework-poster-icon {
      background: var(--color-rgba-211-232-255-0-42);
      color: var(--color-hex-34577a);
    }

    .homework-poster-card.is-rose .homework-poster-icon {
      background: var(--color-rgba-242-169-184-0-085);
      color: var(--color-hex-75414d);
    }

    .homework-poster-step {
      color: var(--muted-proof);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .homework-poster-card-title {
      max-width: 16ch;
      font-size: clamp(1.45rem, 2.25vw, 1.9rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.035em;
    }

    .homework-poster-card-copy {
      max-width: 28rem;
      color: var(--muted);
      line-height: 1.62;
    }

    .homework-flow-grid-header {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 1.5rem 2.5rem;
      align-items: end;
      margin-bottom: clamp(2rem, 4vw, 3rem);
    }

    .homework-flow-grid-title {
      max-width: 12ch;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.2rem, 4vw, 3.9rem);
      line-height: 0.98;
      letter-spacing: -0.05em;
    }

    .homework-flow-grid-copy {
      max-width: 38rem;
      color: var(--muted);
      font-size: 1.01rem;
      line-height: 1.66;
    }

    .homework-flow-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }

    .homework-grid-card {
      display: grid;
      gap: 1rem;
      min-height: 100%;
      padding: 1.35rem 1.35rem 1.45rem;
      border: 1px solid var(--panel-border);
      border-radius: 1.6rem;
      background: var(--page-bg);
      box-shadow: 0 16px 34px var(--shadow-deep);
    }

    .homework-grid-card.is-blue {
      background: var(--page-bg);
    }

    .homework-grid-card.is-rose {
      background: var(--page-bg);
    }

    .homework-grid-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.9rem;
    }

    .homework-grid-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.9rem;
      height: 2.9rem;
      border-radius: 1rem;
      background: var(--color-rgba-33-37-41-0-04);
      color: var(--color-hex-41566d);
      font-size: 1.15rem;
      flex: 0 0 auto;
    }

    .homework-grid-card.is-blue .homework-grid-icon {
      background: var(--color-rgba-211-232-255-0-62);
      color: var(--color-hex-34577a);
    }

    .homework-grid-card.is-rose .homework-grid-icon {
      background: var(--color-rgba-242-169-184-0-13);
      color: var(--color-hex-75414d);
    }

    .homework-grid-step {
      color: var(--muted-proof);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .homework-grid-card-title {
      max-width: 16ch;
      font-size: clamp(1.24rem, 1.9vw, 1.55rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.03em;
    }

    .homework-grid-card-copy {
      color: var(--muted);
      line-height: 1.62;
    }

    .workflow-header {
      max-width: 42rem;
      margin-bottom: clamp(2.5rem, 5vw, 4rem);
    }

    .workflow-top {
      display: grid;
      grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.1fr);
      align-items: center;
      gap: clamp(2rem, 5vw, 5rem);
      margin-bottom: clamp(2.5rem, 5vw, 4rem);
    }

    .workflow-top .workflow-header {
      max-width: 36rem;
      margin-bottom: 0;
    }

    .workflow-title {
      max-width: 12ch;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.4rem, 4.2vw, 4.2rem);
      line-height: 0.97;
      letter-spacing: -0.05em;
    }

    .workflow-copy {
      max-width: 34rem;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.65;
    }

    .workflow-illustration {
      position: relative;
    }

    .workflow-illustration::before,
    .workflow-illustration::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      filter: blur(10px);
      pointer-events: none;
    }

    .workflow-illustration::before {
      width: 11rem;
      height: 11rem;
      top: -1.25rem;
      right: 8%;
      background: var(--color-rgba-211-232-255-0-55);
    }

    .workflow-illustration::after {
      width: 9rem;
      height: 9rem;
      bottom: -1rem;
      left: 6%;
      background: var(--color-rgba-242-169-184-0-24);
    }

    .approval-demo {
      position: relative;
      z-index: 1;
    }

    .approval-subtitle {
      display: none;
    }

    .approval-card {
      margin-top: 0;
      border: 1px solid var(--panel-border);
      border-radius: 1.55rem;
      background: var(--page-bg);
      padding: clamp(1rem, 2vw, 1.35rem);
      box-shadow: 0 16px 32px var(--color-rgba-15-23-42-0-045);
    }

    .approval-person {
      display: flex;
      align-items: center;
      gap: 0.85rem;
    }

    .approval-avatar {
      position: relative;
      flex: 0 0 auto;
      width: 3rem;
      height: 3rem;
      overflow: hidden;
      border: 1px solid var(--color-rgba-33-37-41-0-06);
      border-radius: 999px;
      background: linear-gradient(180deg, var(--color-rgba-211-232-255-0-9), var(--color-rgba-242-169-184-0-46));
      box-shadow: inset 0 1px 0 var(--color-rgba-255-255-255-0-75);
    }

    .approval-avatar-head,
    .approval-avatar-hair,
    .approval-avatar-body {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: block;
    }

    .approval-avatar-hair {
      top: 0.44rem;
      z-index: 3;
      width: 1.2rem;
      height: 0.75rem;
      border-radius: 0.7rem 0.7rem 0.3rem 0.3rem;
      background: var(--color-hex-6c5a51);
    }

    .approval-avatar-head {
      top: 0.68rem;
      z-index: 2;
      width: 1rem;
      height: 1.05rem;
      border-radius: 0.62rem;
      background: var(--color-hex-f2c4a0);
    }

    .approval-avatar-body {
      bottom: -0.02rem;
      width: 1.8rem;
      height: 1.15rem;
      border-radius: 0.9rem 0.9rem 0 0;
      background: var(--color-hex-7faedf);
    }

    .approval-email {
      font-size: clamp(1.3rem, 2vw, 1.6rem);
      font-weight: 700;
      letter-spacing: -0.03em;
    }

    .approval-label {
      margin-top: 1.2rem;
      color: var(--color-hex-6f7f90);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .approval-homework {
      margin-top: 0.4rem;
      font-size: 1.04rem;
      line-height: 1.5;
    }

    .approval-recommendation {
      margin-top: 1.15rem;
      border: 1px solid var(--panel-border);
      border-radius: 1.25rem;
      background: var(--page-bg);
      padding: 1rem 1.1rem;
    }

    .approval-recommendation-title {
      margin-top: 0.4rem;
      font-size: clamp(1.2rem, 1.8vw, 1.55rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.03em;
    }

    .approval-recommendation-copy {
      margin-top: 0.5rem;
      color: var(--muted);
      line-height: 1.55;
    }

    .approval-signals {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-top: 0.9rem;
    }

    .approval-signal {
      display: inline-flex;
      align-items: center;
      padding: 0.38rem 0.72rem;
      border-radius: 999px;
      border: 1px solid var(--color-rgba-33-37-41-0-06);
      background: var(--color-rgba-211-232-255-0-36);
      color: var(--color-hex-4c6177);
      font-size: 0.78rem;
      font-weight: 600;
    }

    .approval-actions {
      display: flex;
      gap: 0.8rem;
      margin-top: 1.2rem;
    }

    .approval-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.7rem 1.15rem;
      border-radius: 999px;
      border: 1px solid var(--color-rgba-33-37-41-0-16);
      background: var(--page-bg);
      color: var(--text);
      font-size: 0.98rem;
      font-weight: 600;
    }

    .approval-btn.is-primary {
      background: var(--blue-strong);
      border-color: var(--blue-strong);
      color: var(--color-hex-19344f);
    }

    .workflow-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(1.5rem, 3vw, 2.5rem);
      border-top: 1px solid var(--line);
      padding-top: clamp(1.5rem, 3vw, 2rem);
    }

    .workflow-mode {
      min-height: 100%;
      padding-right: clamp(0rem, 2vw, 1rem);
    }

    .workflow-mode + .workflow-mode {
      border-left: 1px solid var(--line);
      padding-left: clamp(1.5rem, 3vw, 2.5rem);
    }

    .workflow-mode-title {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.7rem, 2.6vw, 2.35rem);
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .workflow-mode-copy {
      max-width: 30rem;
      margin-top: 0.9rem;
      color: var(--muted);
      line-height: 1.65;
    }

    .workflow-note {
      margin-top: 1rem;
      color: var(--muted-proof);
      font-size: 0.86rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .stories-section {
      padding: clamp(5rem, 9vw, 8rem) 0;
      border-top: 1px solid var(--line);
    }

    .stories-header {
      max-width: 42rem;
      margin-bottom: clamp(2.5rem, 5vw, 4rem);
    }

    .stories-title {
      max-width: 12ch;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.4rem, 4.2vw, 4.2rem);
      line-height: 0.97;
      letter-spacing: -0.05em;
    }

    .stories-copy {
      max-width: 34rem;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.65;
    }

    .stories-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    .stories-item {
      padding-top: 1.2rem;
      border-top: 1px solid var(--line);
    }

    .stories-index {
      color: var(--color-hex-7b90aa);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .stories-item-title {
      margin-top: 0.85rem;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.5rem, 2.2vw, 2rem);
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .stories-item-copy {
      max-width: 18rem;
      margin-top: 0.7rem;
      color: var(--muted);
      line-height: 1.6;
    }

    .stories-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem 1.5rem;
      margin-top: clamp(2rem, 4vw, 3rem);
      padding-top: 1.2rem;
      border-top: 1px solid var(--line);
      color: var(--muted);
    }

    .insight-section {
      padding: clamp(5rem, 9vw, 8rem) 0;
      border-top: 1px solid var(--line);
    }

    .insight-header {
      max-width: 48rem;
      margin: 0 auto clamp(2.5rem, 5vw, 4rem);
      text-align: center;
    }

    .insight-title {
      max-width: 12ch;
      margin-inline: auto;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.5rem, 4.4vw, 4.4rem);
      line-height: 0.97;
      letter-spacing: -0.05em;
    }

    .insight-copy {
      max-width: 44rem;
      margin-inline: auto;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.65;
    }

    .insight-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
      gap: clamp(1.25rem, 3vw, 2rem);
      align-items: start;
    }

    .insight-dashboard {
      border: 1px solid var(--panel-border);
      border-radius: 2rem;
      background: var(--page-bg);
      box-shadow: 0 18px 36px var(--color-rgba-15-23-42-0-045);
    }

    .insight-dashboard-top {
      padding: 1.4rem 1.45rem 1rem;
      border-bottom: 1px solid var(--line);
    }

    .insight-dashboard-brand {
      display: block;
    }

    .insight-dashboard-name {
      margin-top: 0.3rem;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.8rem, 2.8vw, 2.35rem);
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .insight-dashboard-sub {
      max-width: 34rem;
      margin-top: 0.55rem;
      color: var(--muted);
      line-height: 1.6;
    }

    .insight-dashboard-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.76fr);
      gap: 1rem;
      padding: 1.25rem 1.45rem 1.45rem;
    }

    .insight-cluster,
    .insight-summary-grid {
      display: grid;
      gap: 0.9rem;
    }

    .insight-panel,
    .insight-stat {
      border: 1px solid var(--panel-border);
      border-radius: 1.2rem;
      background: var(--page-bg);
      padding: 1rem 1.05rem;
    }

    .insight-panel-title {
      color: var(--muted-proof);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .insight-request-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.75rem;
    }

    .insight-alert-chip {
      display: inline-flex;
      align-items: center;
      padding: 0.22rem 0.55rem;
      border-radius: 0.8rem;
      background: var(--color-rgba-242-169-184-0-22);
      color: var(--color-hex-744b57);
      font-size: 0.72rem;
      font-weight: 700;
    }

    .insight-request-copy {
      margin-top: 0.85rem;
      font-size: 1rem;
      line-height: 1.6;
    }

    .insight-mastery-list {
      display: grid;
      gap: 0.9rem;
      margin-top: 1rem;
    }

    .insight-mastery-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 0.8rem;
      align-items: center;
    }

    .insight-mastery-label {
      font-weight: 600;
    }

    .insight-mastery-score {
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .insight-mastery-track {
      grid-column: 1 / -1;
      height: 0.36rem;
      overflow: hidden;
      border-radius: 999px;
      background: var(--line);
    }

    .insight-mastery-fill {
      display: block;
      height: 100%;
      border-radius: 999px;
    }

    .insight-mastery-fill.is-blue {
      background: linear-gradient(90deg, var(--color-rgba-79-136-186-0-96), var(--color-rgba-130-182-234-0-88));
    }

    .insight-mastery-fill.is-pink {
      background: linear-gradient(90deg, var(--color-rgba-242-169-184-0-96), var(--color-rgba-234-140-160-0-88));
    }

    .insight-stat-value {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.9rem, 3vw, 2.45rem);
      line-height: 0.95;
      letter-spacing: -0.05em;
      color: var(--color-hex-1b5484);
    }

    .insight-stat-label {
      margin-top: 0.35rem;
      color: var(--muted);
      line-height: 1.5;
    }

    .insight-callout {
      border: 1px solid var(--panel-border);
      border-radius: 2rem;
      background: var(--page-bg);
      box-shadow: 0 18px 34px var(--color-rgba-15-23-42-0-045);
      padding: clamp(1.4rem, 3vw, 1.9rem);
    }

    .insight-callout-title {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.9rem, 3vw, 2.5rem);
      line-height: 0.98;
      letter-spacing: -0.04em;
      color: var(--color-hex-1b5484);
    }

    .insight-callout-copy {
      max-width: 21rem;
      margin-top: 1rem;
      color: var(--muted);
      line-height: 1.65;
    }

    .insight-callout-list {
      display: grid;
      gap: 0.85rem;
      padding: 0;
      margin: 1.4rem 0 0;
      list-style: none;
    }

    .insight-callout-list li {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.7rem;
      align-items: start;
      color: var(--text);
      line-height: 1.55;
    }

    .insight-callout-list li::before {
      content: "";
      width: 0.48rem;
      height: 0.48rem;
      margin-top: 0.5rem;
      border-radius: 999px;
      background: var(--color-rgba-130-182-234-0-98);
    }

    .pedagogy-section {
      padding: clamp(5rem, 9vw, 8rem) 0;
      border-top: 1px solid var(--line);
    }

    .pedagogy-shell {
      display: grid;
      grid-template-columns: minmax(18rem, 0.92fr) minmax(0, 1.08fr);
      gap: clamp(1.5rem, 4vw, 3rem);
      align-items: stretch;
      border: 1px solid var(--panel-border);
      border-radius: 2.2rem;
      background: var(--page-bg);
      box-shadow: 0 18px 36px var(--shadow-deep);
      padding: clamp(1.5rem, 3vw, 2.35rem);
    }

    .pedagogy-pill {
      display: inline-flex;
      align-items: center;
      padding: 0.42rem 0.85rem;
      border-radius: 999px;
      background: var(--color-rgba-242-169-184-0-24);
      color: var(--color-hex-744b57);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .pedagogy-title {
      max-width: 9ch;
      margin-top: 1rem;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.6rem, 4.4vw, 4.1rem);
      line-height: 0.96;
      letter-spacing: -0.06em;
    }

    .pedagogy-copy {
      max-width: 30rem;
      margin-top: 1rem;
      color: var(--muted);
      line-height: 1.68;
    }

    .pedagogy-principles {
      display: grid;
      gap: 1rem;
      margin-top: 1.7rem;
    }

    .pedagogy-principle {
      display: grid;
      grid-template-columns: 2.2rem 1fr;
      gap: 0.9rem;
      align-items: start;
      padding: 1rem 1rem 1.05rem;
      border: 1px solid var(--panel-border);
      border-radius: 1.2rem;
      background: var(--page-bg);
    }

    .pedagogy-badge {
      width: 2.2rem;
      height: 2.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--color-rgba-130-182-234-0-18);
      color: var(--color-hex-1b5484);
      font-size: 0.88rem;
      font-weight: 700;
      margin-top: 0.1rem;
    }

    .pedagogy-principle-title {
      font-size: clamp(1.2rem, 2vw, 1.5rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.03em;
    }

    .pedagogy-principle-copy {
      max-width: 28rem;
      margin-top: 0.35rem;
      color: var(--muted);
      line-height: 1.62;
    }

    .pedagogy-stage {
      display: grid;
      gap: 1rem;
      align-content: start;
    }

    .pedagogy-canvas {
      border: 1px solid var(--panel-border);
      border-radius: 1.8rem;
      background: var(--page-bg);
      padding: 1.2rem;
      box-shadow: inset 0 1px 0 var(--color-rgba-255-255-255-0-8);
    }

    .pedagogy-canvas-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-bottom: 0.9rem;
      margin-bottom: 0.95rem;
      border-bottom: 1px solid var(--line);
    }

    .pedagogy-canvas-kicker {
      color: var(--muted-proof);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .pedagogy-canvas-title {
      margin-top: 0.35rem;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.45rem, 2.1vw, 1.85rem);
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .pedagogy-canvas-note {
      color: var(--muted);
      font-size: 0.9rem;
      text-align: right;
    }

    .pedagogy-steps {
      display: grid;
      gap: 0.8rem;
    }

    .pedagogy-step {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.9rem;
      align-items: start;
      border: 1px solid var(--panel-border);
      border-radius: 1.15rem;
      background: var(--page-bg);
      padding: 0.95rem 1rem;
    }

    .pedagogy-step-number {
      min-width: 2.15rem;
      height: 2.15rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--color-rgba-242-169-184-0-24);
      color: var(--color-hex-744b57);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .pedagogy-step-title {
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .pedagogy-step-copy {
      margin-top: 0.28rem;
      color: var(--muted);
      line-height: 1.55;
    }

    .pedagogy-quote {
      border: 1px solid var(--panel-border);
      border-radius: 1.45rem;
      background: var(--page-bg);
      padding: 1rem 1.1rem;
    }

    .pedagogy-quote-copy {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.08rem;
      line-height: 1.5;
      font-style: italic;
      letter-spacing: -0.02em;
    }

    .pedagogy-quote-meta {
      margin-top: 0.75rem;
      color: var(--muted-proof);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .practice-section {
      padding: clamp(5rem, 9vw, 8rem) 0;
      border-top: 1px solid var(--line);
    }

    .practice-header {
      max-width: 52rem;
      margin: 0 auto clamp(2.5rem, 5vw, 3.8rem);
      text-align: center;
    }

    .practice-title {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.7rem, 4.8vw, 4.8rem);
      line-height: 0.95;
      letter-spacing: -0.06em;
    }

    .practice-note {
      margin-top: 1rem;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.45rem, 2.6vw, 2.15rem);
      font-style: italic;
      line-height: 1.15;
      color: var(--color-hex-1b5484);
      letter-spacing: -0.04em;
    }

    .practice-copy {
      max-width: 40rem;
      margin: 1rem auto 0;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.65;
    }

    .practice-layout {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(1.4rem, 3vw, 2.2rem);
      align-items: start;
    }

    .practice-column {
      display: grid;
      gap: 1rem;
      align-content: start;
    }

    .practice-item {
      display: grid;
      grid-template-columns: 3.25rem 1fr;
      gap: 0.9rem;
      align-items: start;
      padding-top: 1rem;
      border-top: 1px solid var(--line);
    }

    .practice-item-badge {
      width: 3.25rem;
      height: 3.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 1rem;
      font-size: 0.92rem;
      font-weight: 700;
      letter-spacing: 0;
    }

    .practice-item-badge.is-blue {
      background: var(--color-rgba-211-232-255-0-8);
      color: var(--color-hex-1b5484);
    }

    .practice-item-badge.is-pink {
      background: var(--color-rgba-242-169-184-0-22);
      color: var(--color-hex-8a5662);
    }

    .practice-item-title {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.55rem, 2vw, 1.95rem);
      font-weight: 400;
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .practice-item-copy {
      max-width: 25rem;
      margin-top: 0.55rem;
      color: var(--muted);
      line-height: 1.6;
    }

    .practice-card {
      border: 1px solid var(--panel-border);
      border-radius: 1.55rem;
      background: var(--page-bg);
      box-shadow: 0 16px 30px var(--color-rgba-15-23-42-0-04);
      padding: clamp(1rem, 1.9vw, 1.15rem);
    }

    .practice-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 0.85rem;
    }

    .practice-card-meta {
      display: grid;
      gap: 0.32rem;
    }

    .practice-card-kicker {
      color: var(--muted-proof);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .practice-card-note {
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.45;
      text-align: left;
    }

    .practice-message {
      border: 1px solid var(--panel-border);
      border-radius: 1.05rem;
      background: var(--page-bg);
      color: var(--color-hex-364250);
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.05rem, 1.55vw, 1.28rem);
      line-height: 1.45;
      padding: 0.95rem 1rem;
    }

    .practice-action {
      width: fit-content;
      margin-top: 0.85rem;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--color-rgba-255-255-255-0-98);
      color: var(--text);
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      padding: 0.72rem 1rem;
    }

    .practice-parent-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      border: 1px solid var(--panel-border);
      border-radius: 1.05rem;
      background: var(--page-bg);
      padding: 0.95rem 1rem;
    }

    .practice-parent-topic {
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: -0.02em;
    }

    .practice-parent-tag {
      display: inline-flex;
      align-items: center;
      padding: 0.35rem 0.55rem;
      border: 1px solid var(--color-rgba-176-80-85-0-14);
      border-radius: 999px;
      background: var(--color-rgba-242-169-184-0-14);
      color: var(--color-hex-8a5662);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .practice-outline-action {
      width: fit-content;
      margin-top: 0.85rem;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--color-rgba-255-255-255-0-96);
      color: var(--text);
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      padding: 0.72rem 1rem;
    }

    .integrity-section {
      padding: clamp(5rem, 9vw, 8rem) 0;
      border-top: 1px solid var(--line);
    }

    .integrity-header {
      max-width: 38rem;
      margin: 0 auto clamp(2.2rem, 4vw, 3.2rem);
      text-align: center;
    }

    .integrity-title {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.5rem, 4.3vw, 4.2rem);
      line-height: 0.96;
      letter-spacing: -0.05em;
    }

    .integrity-copy {
      max-width: 32rem;
      margin: 0 auto;
      color: var(--muted);
      line-height: 1.65;
    }

    .integrity-shell {
      max-width: 48rem;
      margin: 0 auto;
    }

    .integrity-item + .integrity-item {
      margin-top: 0.8rem;
    }

    .integrity-panel {
      border: 1px solid var(--panel-border);
      border-radius: 1.4rem;
      background: var(--page-bg);
      box-shadow: 0 16px 32px var(--color-rgba-15-23-42-0-04);
      transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }

    .integrity-panel:hover,
    .integrity-panel:focus-within {
      transform: translateY(-0.1rem);
      border-color: var(--color-rgba-130-182-234-0-26);
      box-shadow: 0 22px 40px var(--color-rgba-15-23-42-0-06);
    }

    .integrity-panel summary {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      list-style: none;
      cursor: pointer;
      padding: 1.05rem 1.15rem;
      font-size: clamp(0.94rem, 1.2vw, 1.04rem);
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .integrity-panel summary::-webkit-details-marker {
      display: none;
    }

    .integrity-panel summary::after {
      content: "+";
      flex: 0 0 auto;
      color: var(--muted-proof);
      font-size: 1.45rem;
      font-weight: 400;
      line-height: 1;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    .integrity-panel[open] summary::after {
      transform: rotate(45deg);
      color: var(--color-hex-1b5484);
    }

    .integrity-body {
      padding: 0 1.15rem 1.1rem;
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.6;
    }

    .integrity-body p + p {
      margin-top: 0.9rem;
    }

    .integrity-emphasis {
      color: var(--text);
      font-weight: 600;
    }

    .pricing-section {
      padding: clamp(5rem, 9vw, 8rem) 0;
      border-top: 1px solid var(--line);
    }

    .pricing-header {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.9rem;
      align-items: start;
      margin-bottom: clamp(2.2rem, 4vw, 3.25rem);
    }

    .pricing-title {
      max-width: none;
      font-family: Georgia, "Times New Roman", serif;
      font-size: var(--section-display-title-size);
      line-height: 0.97;
      letter-spacing: -0.05em;
    }

    .pricing-copy {
      max-width: none;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.65;
    }

    .pricing-shell {
      border-top: 1px solid var(--line);
      padding-top: clamp(1.6rem, 3vw, 2.1rem);
    }

    .pricing-grid-landing {
      max-width: 74rem;
      margin-inline: auto;
    }

    .pricing-option-col {
      max-width: 33rem;
    }

    .pricing-card-landing {
      display: flex;
      flex-direction: column;
      min-height: 100%;
      border: 1px solid var(--panel-border);
      border-radius: 1.8rem;
      background: var(--page-bg);
      box-shadow: 0 18px 34px var(--color-rgba-15-23-42-0-045);
      padding: clamp(1.25rem, 2.5vw, 1.7rem);
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }

    .pricing-card-landing.is-featured {
      border-color: var(--color-rgba-130-182-234-0-42);
      background:
        radial-gradient(circle at top right, var(--color-rgba-211-232-255-0-4), var(--color-transparent) 50%),
        var(--page-bg);
      box-shadow: 0 22px 42px var(--color-rgba-15-23-42-0-07);
      transform: translateY(-2px);
    }

    .pricing-card-landing:hover,
    .pricing-card-landing:focus-within {
      border-color: var(--color-rgba-130-182-234-0-36);
      box-shadow: 0 22px 44px var(--shadow-soft);
      transform: translateY(-2px);
    }

    .pricing-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.1rem;
    }

    .pricing-plan-eyebrow {
      color: var(--muted-proof);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .pricing-plan-title {
      margin-top: 0.5rem;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2rem, 3.5vw, 3rem);
      line-height: 0.98;
      letter-spacing: -0.05em;
    }

    .pricing-price-display {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
      margin-top: 1rem;
    }

    .pricing-price-display strong {
      font-size: clamp(2.4rem, 4vw, 3.5rem);
      line-height: 0.95;
      letter-spacing: -0.06em;
    }

    .pricing-price-display span {
      color: var(--muted);
      font-size: 1rem;
      font-weight: 600;
    }

    .pricing-summary {
      max-width: none;
      margin-top: 0.9rem;
      color: var(--muted);
      line-height: 1.55;
    }

    .pricing-badge-landing {
      display: inline-flex;
      align-items: center;
      padding: 0.38rem 0.7rem;
      border-radius: 999px;
      background: var(--color-rgba-242-169-184-0-28);
      border: 1px solid var(--color-rgba-169-93-110-0-12);
      color: var(--color-hex-744b57);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .pricing-body {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 1.15rem;
      padding-top: 1.15rem;
      border-top: 1px solid var(--line);
      flex: 1 1 auto;
    }

    .pricing-feature-list-landing {
      display: grid;
      gap: 0.75rem;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .pricing-feature-list-landing li {
      display: flex;
      align-items: flex-start;
      gap: 0.68rem;
      color: var(--text);
      line-height: 1.55;
    }

    .pricing-feature-list-landing li i {
      color: var(--color-hex-34577a);
      font-size: 1rem;
      margin-top: 0.16rem;
    }

    .pricing-panel-actions {
      display: grid;
      gap: 0.45rem;
      margin-top: auto;
      align-content: start;
    }

    .pricing-panel-actions .btn {
      width: 100%;
      justify-content: center;
      padding-top: 0.42rem;
      padding-bottom: 0.42rem;
      white-space: nowrap;
    }

    .pricing-panel-note {
      color: var(--muted);
      font-size: 0.84rem;
      line-height: 1.45;
    }

    .pricing-footnote {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem 1.5rem;
      margin-top: 1.35rem;
      padding-top: 1.2rem;
      border-top: 1px solid var(--line);
      color: var(--muted);
      text-align: center;
    }

    .pricing-common {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      justify-content: center;
    }

    .pricing-common-item {
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 0.85rem;
      border-radius: 999px;
      border: 1px solid var(--panel-border);
      background: var(--page-bg);
      color: var(--color-hex-506882);
      font-size: 0.84rem;
      font-weight: 600;
    }

    .pricing-smallprint {
      margin-top: 0.15rem;
      font-size: 0.82rem;
      line-height: 1.45;
      color: var(--muted);
      opacity: 0.92;
    }

    .closing-section {
      padding: 0 0 clamp(4rem, 8vw, 6rem);
    }

    .closing-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 1.5rem 2rem;
      border: 1px solid var(--panel-border);
      border-radius: 2rem;
      background: var(--page-bg);
      box-shadow: 0 18px 34px var(--color-rgba-15-23-42-0-045);
      padding: clamp(1.4rem, 3vw, 2rem);
    }

    .closing-title {
      max-width: 18ch;
      font-family: Georgia, "Times New Roman", serif;
      font-size: var(--section-display-title-size);
      line-height: 0.98;
      letter-spacing: -0.05em;
    }

    .closing-copy {
      max-width: 42rem;
      color: var(--muted);
      line-height: 1.65;
    }

    .mini-footer {
      padding: 1.7rem 0 2.4rem;
      color: var(--muted);
      font-size: 0.84rem;
    }

    .mini-footer a {
      color: inherit;
      text-decoration: none;
    }

    .mini-footer a:hover,
    .mini-footer a:focus {
      color: var(--text);
    }

    .mini-footer a.is-active,
    .mini-footer a.is-active:hover,
    .mini-footer a.is-active:focus {
      color: var(--text);
      font-weight: 600;
    }

    .mini-footer .d-flex.gap-3.gap-md-4 {
      flex-wrap: wrap;
      row-gap: 0.45rem;
    }

    .lp-refresh-shell {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: clamp(1.5rem, 4vw, 3rem);
      align-items: start;
    }

    .lp-shared-title {
      max-width: 18ch;
      font-family: Georgia, "Times New Roman", serif;
      font-size: var(--story-display-title-size);
      line-height: 0.98;
      letter-spacing: -0.05em;
    }

    .lp-refresh-copy {
      max-width: 44rem;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.68;
    }

    .lp-refresh-proof {
      max-width: 44rem;
      padding: 0.85rem 1rem;
      border: 1px solid var(--panel-border);
      border-radius: 1rem;
      background: var(--page-bg);
      color: var(--color-hex-506882);
      font-size: 0.92rem;
      line-height: 1.55;
    }

    .lp-refresh-timeline {
      background: var(--color-rgba-255-255-255-0-95);
      backdrop-filter: blur(8px);
      padding: clamp(1.1rem, 2vw, 1.5rem);
    }

    .lp-refresh-steps {
      display: grid;
      gap: 0.8rem;
    }

    .lp-refresh-step {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 0.85rem;
      align-items: start;
      padding: 0.85rem 0.95rem;
      border: 1px solid var(--panel-border);
      border-radius: 1rem;
      background: var(--color-rgba-255-255-255-0-92);
    }

    .lp-refresh-step-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2rem;
      height: 2rem;
      border-radius: 999px;
      background: var(--color-rgba-211-232-255-0-82);
      border: 1px solid var(--color-rgba-130-182-234-0-3);
      color: var(--color-hex-365978);
      font-size: 0.8rem;
      font-weight: 700;
      line-height: 1;
    }

    .lp-refresh-step-title {
      font-size: 1.02rem;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }

    .lp-refresh-step-copy {
      color: var(--muted);
      line-height: 1.58;
      font-size: 0.94rem;
    }

    .lp-governance-head {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.9rem;
      align-items: start;
      margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
    }

    .lp-governance-title {
      max-width: none;
      font-family: Georgia, "Times New Roman", serif;
      font-size: var(--section-display-title-size);
      line-height: 0.99;
      letter-spacing: -0.05em;
    }

    .lp-governance-copy {
      max-width: none;
      color: var(--muted);
      line-height: 1.65;
      font-size: 1rem;
    }

    .lp-governance-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }

    .lp-governance-card {
      min-height: 100%;
      padding: clamp(1rem, 1.7vw, 1.35rem);
    }

    .lp-governance-label {
      color: var(--muted-proof);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .lp-governance-card h3 {
      font-size: 1.16rem;
      line-height: 1.24;
      letter-spacing: -0.02em;
    }

    .lp-governance-list {
      margin: 0;
      padding-left: 1.1rem;
      display: grid;
      gap: 0.45rem;
      color: var(--muted);
      line-height: 1.52;
      font-size: 0.92rem;
    }

    .lp-governance-highlight {
      background: linear-gradient(180deg, var(--color-rgba-255-255-255-0-98), var(--color-rgba-247-251-255-0-98));
    }

    .lp-governance-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .lp-governance-chip {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      border: 1px solid var(--panel-border);
      background: var(--page-bg);
      padding: 0.35rem 0.75rem;
      color: var(--color-hex-506882);
      font-size: 0.78rem;
      font-weight: 600;
    }

    .lp-results-head {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.9rem;
      align-items: start;
      margin-bottom: clamp(1.8rem, 3vw, 2.8rem);
    }

    .lp-results-title {
      max-width: none;
      font-family: Georgia, "Times New Roman", serif;
      font-size: var(--section-display-title-size);
      line-height: 0.99;
      letter-spacing: -0.05em;
    }

    .lp-results-copy {
      max-width: none;
      color: var(--muted);
      line-height: 1.65;
      font-size: 1rem;
    }

    .lp-results-shell {
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
      gap: 1rem;
      align-items: start;
    }

    .lp-results-board {
      padding: clamp(1.1rem, 2vw, 1.5rem);
      background: var(--color-rgba-255-255-255-0-95);
      backdrop-filter: blur(8px);
    }

    .lp-results-metric-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.7rem;
      margin-bottom: 1rem;
    }

    .lp-results-metric {
      border: 1px solid var(--panel-border);
      border-radius: 0.95rem;
      background: var(--page-bg);
      padding: 0.8rem 0.85rem;
    }

    .lp-results-value {
      font-size: clamp(1.45rem, 2.4vw, 1.9rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.05;
    }

    .lp-results-label {
      margin-top: 0.3rem;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.4;
    }

    .lp-results-track-group {
      display: grid;
      gap: 0.65rem;
    }

    .lp-results-track-row {
      display: grid;
      grid-template-columns: minmax(8.5rem, 0.62fr) minmax(0, 1.38fr);
      gap: 0.7rem;
      align-items: center;
    }

    .lp-results-track-label {
      color: var(--color-hex-4f6377);
      font-size: 0.88rem;
      font-weight: 600;
    }

    .lp-results-track-bar {
      height: 0.62rem;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--page-bg);
      overflow: hidden;
    }

    .lp-results-fill {
      display: block;
      height: 100%;
      border-radius: 999px;
      background: var(--color-rgba-130-182-234-0-9);
    }

    .lp-results-fill.is-pink {
      background: var(--color-rgba-242-169-184-0-9);
    }

    .lp-results-side {
      display: grid;
      gap: 0.8rem;
    }

    .lp-results-note {
      min-height: 100%;
      padding: clamp(0.95rem, 1.5vw, 1.2rem);
    }

    .lp-results-note h3 {
      font-size: 1.06rem;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }

    .lp-results-note p {
      color: var(--muted);
      line-height: 1.58;
      font-size: 0.92rem;
    }

    .lp-stories-head {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.9rem;
      align-items: start;
      margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
    }

    .lp-stories-title {
      max-width: none;
      font-family: Georgia, "Times New Roman", serif;
      font-size: var(--section-display-title-size);
      line-height: 1;
      letter-spacing: -0.05em;
    }

    .lp-stories-copy {
      max-width: none;
      color: var(--muted);
      line-height: 1.65;
    }

    .lp-stories-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }

    .lp-story-card {
      min-height: 100%;
      padding: clamp(1rem, 1.8vw, 1.3rem);
      background: var(--color-rgba-255-255-255-0-96);
      backdrop-filter: blur(7px);
    }

    .lp-story-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.7rem;
      margin-bottom: 0.8rem;
    }

    .lp-story-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2rem;
      height: 2rem;
      border-radius: 999px;
      border: 1px solid var(--color-rgba-130-182-234-0-3);
      background: var(--color-rgba-211-232-255-0-72);
      color: var(--color-hex-365978);
      font-size: 0.82rem;
      font-weight: 700;
    }

    .lp-story-role {
      color: var(--muted-proof);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .lp-story-card-title {
      font-size: 1.08rem;
      line-height: 1.3;
      letter-spacing: -0.015em;
    }

    .lp-story-card-copy {
      color: var(--muted);
      line-height: 1.58;
      font-size: 0.92rem;
    }

    .lp-stories-footer {
      margin-top: 1.2rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem 1.2rem;
      color: var(--color-hex-4f6377);
      font-weight: 600;
    }

    .hero-test-row {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      gap: clamp(1.8rem, 4vw, 3.6rem);
      align-items: center;
    }

    .hero-test-copy {
      max-width: none;
      padding-right: clamp(0rem, 1vw, 0.6rem);
    }

    .hero-test-copy .story-title {
      max-width: none;
      font-size: var(--story-display-title-size);
    }

    .hero-test-copy .story-body {
      max-width: none;
    }

    .hero-test-note {
      margin-top: 1rem;
      color: var(--muted);
      line-height: 1.58;
    }

    .landing-section-alt .hero-test-note {
      color: var(--muted-blue);
    }

    .hero-test-surface {
      width: min(100%, 58rem);
      padding: clamp(1.2rem, 2.2vw, 1.6rem);
      border-radius: 2rem;
      box-shadow: 0 18px 36px var(--shadow-deep);
    }

    .software-shot-list {
      display: grid;
      gap: 0.65rem;
    }

    .software-shot-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 0.7rem;
      align-items: start;
      border: 1px solid var(--line);
      border-radius: 1rem;
      background: var(--page-bg);
      padding: 0.78rem 0.85rem;
    }

    .software-shot-icon {
      width: 1.85rem;
      height: 1.85rem;
      border-radius: 0.6rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--color-rgba-211-232-255-0-7);
      color: var(--color-hex-35587a);
      font-size: 0.95rem;
      flex: 0 0 auto;
    }

    .software-shot-icon.is-pink {
      background: var(--color-rgba-242-169-184-0-26);
      color: var(--color-hex-6a3a47);
    }

    .software-shot-title {
      font-size: 0.86rem;
      font-weight: 650;
      line-height: 1.35;
      letter-spacing: -0.01em;
    }

    .software-shot-copy {
      margin-top: 0.16rem;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.4;
    }

    .software-shot-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-top: 0.45rem;
    }

    .software-shot-tag {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--color-rgba-211-232-255-0-72);
      color: var(--color-hex-34577a);
      font-size: 0.72rem;
      font-weight: 600;
      padding: 0.22rem 0.56rem;
    }

    .software-shot-tag.is-pink {
      background: var(--color-rgba-242-169-184-0-24);
      color: var(--color-hex-6d3946);
      border-color: var(--color-rgba-169-93-110-0-2);
    }

    .software-shot-kpis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.55rem;
      margin-bottom: 0.65rem;
    }

    .software-shot-kpi {
      border: 1px solid var(--line);
      border-radius: 0.9rem;
      background: var(--color-rgba-247-251-255-0-88);
      padding: 0.58rem;
    }

    .software-shot-kpi-value {
      font-size: 1.04rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.03em;
    }

    .software-shot-kpi-label {
      margin-top: 0.28rem;
      color: var(--muted);
      font-size: 0.72rem;
      line-height: 1.35;
    }

    .software-shot-form {
      display: grid;
      gap: 0.52rem;
    }

    .software-shot-form-row {
      display: grid;
      grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
      gap: 0.56rem;
      align-items: center;
    }

    .software-shot-form-label {
      color: var(--muted-proof);
      font-size: 0.77rem;
      font-weight: 600;
    }

    .software-shot-form-value {
      border: 1px solid var(--line);
      border-radius: 0.76rem;
      background: var(--page-bg);
      padding: 0.36rem 0.52rem;
      font-size: 0.81rem;
      line-height: 1.35;
      color: var(--color-hex-2f4153);
    }

    .software-shot-cta {
      margin-top: 0.12rem;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      border-radius: 999px;
      border: 1px solid var(--color-rgba-169-93-110-0-2);
      background: var(--pink-soft);
      color: var(--color-hex-33262b);
      font-size: 0.76rem;
      font-weight: 650;
      padding: 0.4rem 0.7rem;
    }

    .lp-integrity-shell {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
      gap: 1.2rem 2.5rem;
      align-items: start;
    }

    .lp-integrity-copy {
      max-width: 44rem;
      color: var(--muted);
      line-height: 1.66;
    }

    .lp-integrity-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-top: 1rem;
    }

    .lp-integrity-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      border: 1px solid var(--panel-border);
      background: var(--page-bg);
      color: var(--color-hex-4f6377);
      font-size: 0.78rem;
      font-weight: 600;
      padding: 0.36rem 0.75rem;
    }

    .lp-integrity-faq {
      display: grid;
      gap: 0.55rem;
    }

    .lp-final-shell {
      margin-top: 1rem;
      background: linear-gradient(160deg, var(--color-rgba-255-255-255-0-98), var(--color-rgba-247-251-255-0-98));
    }

    .lp-final-list {
      margin-top: 1rem;
      padding-left: 1rem;
      color: var(--color-hex-4f6377);
      line-height: 1.55;
    }

    .lp-final-list li + li {
      margin-top: 0.2rem;
    }

    [data-hero] {
      opacity: 0;
      transform: translateY(2rem);
      animation: riseIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
      animation-delay: var(--delay, 0s);
    }

    @keyframes riseIn {
      to {
        opacity: 1;
        transform: none;
      }
    }

    [data-story] {
      opacity: 0;
      transform: translateY(2rem);
      animation: riseIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
      animation-delay: var(--delay, 0s);
    }

    @media (max-width: 991.98px) {
      .hero-title {
        max-width: none;
      }

      .editorial-row,
      .guided-row {
        display: block;
      }

      .story-title,
      .story-body {
        max-width: none;
      }

      .editorial-copy {
        max-width: none;
        padding-left: 0;
        margin-bottom: 1.75rem;
      }

      .editorial-media {
        width: 100%;
      }

      .guided-copy {
        max-width: none;
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 1.35rem;
        padding-right: 0;
        text-align: left;
      }

      .workflow-grid {
        grid-template-columns: 1fr;
      }

      .homework-flow-shell,
      .homework-flow-grid-header,
      .homework-flow-poster-header,
      .homework-flow-poster-grid,
      .homework-flow-grid,
      .workflow-top {
        grid-template-columns: 1fr;
      }

      .homework-flow-intro {
        position: static;
      }

      .workflow-top .workflow-header {
        max-width: none;
      }

      .insight-layout,
      .pedagogy-shell,
      .practice-layout,
      .stories-grid,
      .pricing-header,
      .closing-shell {
        grid-template-columns: 1fr;
      }

      .insight-dashboard-body {
        grid-template-columns: 1fr;
      }

      .insight-copy,
      .homework-flow-copy,
      .homework-flow-poster-copy,
      .insight-callout-copy,
      .pedagogy-principle-copy,
      .practice-copy,
      .practice-item-copy,
      .integrity-copy,
      .stories-item-copy,
      .pricing-copy,
      .pricing-summary,
      .closing-copy {
        max-width: none;
      }

      .homework-flow-title,
      .homework-flow-poster-title,
      .pedagogy-title,
      .practice-title,
      .insight-title {
        max-width: none;
      }

      .homework-flow-note {
        max-width: none;
      }

      .homework-step:nth-child(even) {
        margin-left: 0;
      }

      .pedagogy-canvas {
        min-height: 0;
      }

      .pedagogy-quote {
        width: auto;
      }

      .workflow-mode + .workflow-mode {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 1.5rem;
      }

      .pricing-panel-actions {
        align-items: flex-start;
        flex-direction: column;
      }

      .lp-refresh-shell,
      .lp-governance-head,
      .lp-governance-grid,
      .lp-results-head,
      .lp-results-shell,
      .lp-results-metric-grid,
      .lp-stories-head,
      .lp-stories-grid,
      .hero-test-row,
      .software-shot-kpis,
      .lp-integrity-shell {
        grid-template-columns: 1fr;
      }

      .lp-results-track-row {
        grid-template-columns: 1fr;
      }

      .software-shot-form-row {
        grid-template-columns: 1fr;
      }

      .lp-shared-title,
      .lp-governance-title,
      .lp-results-title,
      .lp-stories-title {
        max-width: none;
      }

      .lp-refresh-copy,
      .lp-governance-copy,
      .lp-results-copy,
      .lp-stories-copy,
      .lp-integrity-copy {
        max-width: none;
      }

      .hero-test-copy {
        padding-right: 0;
        margin-bottom: 1.35rem;
      }

      .lp-final-shell {
        grid-template-columns: 1fr;
      }

      .lp-stories-footer {
        align-items: flex-start;
        flex-direction: column;
      }

      .pricing-footnote {
        align-items: center;
        flex-direction: column;
      }

      .closing-shell .d-flex {
        justify-content: flex-start;
      }

      .story-frame.is-right,
      .story-frame.is-left,
      .tutor-stage.is-left {
        margin-inline: 0;
      }

      .chat-bubble {
        max-width: 100%;
      }
    }

    @media (max-width: 767.98px) {
      .site-nav.py-3 {
        padding-top: 0.45rem !important;
        padding-bottom: 0.45rem !important;
      }

      .site-nav .navbar-brand {
        font-size: 0.98rem;
      }

      .site-nav .brand-mark {
        width: 1.8rem;
        height: 1.8rem;
      }

      .mini-footer {
        text-align: center;
      }

      .mini-footer > .d-flex {
        justify-content: center;
      }

      .mini-footer > .d-flex.align-items-center.gap-2 {
        margin-bottom: 0.4rem;
      }

      .mini-footer .d-flex.gap-3.gap-md-4 {
        justify-content: center;
        column-gap: 0.9rem !important;
      }

      .hero {
        padding-top: 2.35rem;
      }

      .hero .eyebrow {
        margin-bottom: 0.9rem !important;
      }

      .site-shell .container-xxl {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
      }

      .conversation-surface,
      .story-frame,
      .tutor-surface {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
      }

      .hero .eyebrow,
      .hero .hero-title,
      .hero .story-kicker,
      .story-kicker,
      .story-title,
      .lp-shared-title,
      .lp-governance-title,
      .lp-results-title,
      .lp-stories-title,
      .pricing-title,
      .closing-title {
        text-align: center;
      }

      .hero .eyebrow {
        margin-inline: auto;
      }

      .hero .hero-title {
        margin-inline: auto;
      }

      .cta-group-primary {
        width: 100%;
        flex-direction: column;
        align-items: center;
      }

      .cta-group-primary .btn-rose {
        width: min(82%, 32rem);
        min-width: 16rem;
        margin-inline: auto;
      }

      .cta-group-primary .btn-soft {
        width: auto;
        min-width: 12rem;
        max-width: 17rem;
        margin-inline: auto;
      }

      .pricing-card-landing,
      .pricing-card-head,
      .pricing-body,
      .pricing-footnote {
        align-items: center;
        text-align: center;
      }

      .pricing-card-head {
        justify-content: center;
      }

      .pricing-badge-landing {
        display: none;
      }

      .pricing-price-display,
      .pricing-feature-list-landing li,
      .pricing-common {
        justify-content: center;
      }

      .pricing-body,
      .pricing-feature-list-landing {
        width: 100%;
      }
    }

/* ===== UK Subpage Extensions (same blue palette) ===== */

.uk-subpage .hero {
  padding: clamp(4.8rem, 8vw, 6.6rem) 0 clamp(3.5rem, 6vw, 4.6rem);
  border-bottom: 1px solid var(--line);
  background: var(--section-alt-background);
}

.uk-subpage .hero-shell {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}

.uk-subpage .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--color-rgba-255-255-255-0-8);
  color: var(--muted-proof);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.uk-subpage .hero-title {
  margin-inline: auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 4.8vw, 4.4rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  max-width: none;
}

.uk-subpage .hero-copy {
  max-width: 44rem;
  margin-inline: auto;
  color: var(--muted);
  line-height: 1.62;
  font-size: 1.03rem;
}

.uk-subpage .hero-actions {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.uk-subpage .hero-signals {
  margin-top: 1.7rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem 1.35rem;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 550;
}

.uk-subpage .support-section {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  border-bottom: 1px solid var(--line);
  background: var(--color-hex-fff);
}

.uk-subpage .support-section.alt {
  background: var(--section-alt-background);
}

.uk-subpage .story-row {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 3vw, 2.4rem);
  align-items: center;
}

.uk-subpage .story-kicker {
  margin-bottom: 1rem;
}

.uk-subpage .story-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.95rem, 3.3vw, 2.85rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-bottom: 0.9rem;
  max-width: none;
}

.uk-subpage .story-body {
  color: var(--muted);
  line-height: 1.65;
  max-width: 42rem;
  margin-bottom: 0;
}

.uk-subpage.pedagogy-page .story-body + .story-body {
  margin-top: 0.55rem;
}

.uk-subpage .conversation-surface {
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  background: var(--surface);
  box-shadow: 0 18px 35px var(--shadow-soft);
  padding: clamp(1rem, 2.1vw, 1.45rem);
}

.uk-subpage .pricing-section {
  padding: clamp(5rem, 9vw, 8rem) 0;
}

.contact-page .contact-hero {
  min-height: calc(100svh - 90px);
  display: grid;
  place-items: center;
  padding: clamp(3rem, 7vw, 5rem) 0;
  background: var(--section-alt-background);
}

.contact-page .contact-hero .hero-shell {
  max-width: 56rem;
}

.contact-page .contact-hero .hero-eyebrow {
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--panel-border);
  background: var(--color-rgba-255-255-255-0-8);
  color: var(--muted-proof);
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.contact-bubbles {
  max-width: 42rem;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.glass-bubble {
  border-radius: 1.25rem;
  border: 1px solid var(--color-rgba-15-23-42-0-12);
  background: var(--color-rgba-255-255-255-0-62);
  box-shadow: 0 14px 30px var(--shadow-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(1.15rem, 2.8vw, 1.7rem);
}

.contact-title {
  font-family: inherit;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  margin-bottom: 0.65rem;
  max-width: none;
}

.hero-email {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-hex-365978);
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.hero-muted {
  margin-top: 0;
  margin-bottom: 0.65rem;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.5vw, 1.02rem);
  line-height: 1.55;
}

.hero-muted-email {
  color: var(--color-hex-4f6377);
  font-weight: 600;
  text-decoration: none;
}

.hero-muted-email:hover,
.hero-muted-email:focus {
  color: var(--color-hex-3e5164);
  text-decoration: underline;
}

.hero-email:hover,
.hero-email:focus {
  color: var(--color-hex-294968);
  text-decoration: underline;
}

.contact-footer {
  border-top: 1px solid var(--line);
}

@media (max-width: 991.98px) {
  .uk-subpage .story-row {
    grid-template-columns: 1fr;
  }

  .uk-subpage .story-title {
    max-width: none;
  }
}

@media (max-width: 767.98px) {
  .uk-subpage .hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .uk-subpage .hero-actions .btn-rose {
    width: min(82%, 32rem);
    min-width: 16rem;
    margin-inline: auto;
  }

  .uk-subpage .hero-actions .btn-soft {
    width: auto;
    min-width: 12rem;
    max-width: 17rem;
    margin-inline: auto;
  }

  .uk-subpage .pricing-copy {
    text-align: center;
  }

  .uk-subpage .navbar-collapse {
    text-align: center;
  }

  .uk-subpage .navbar-nav {
    margin-left: 0 !important;
    align-items: center;
  }

  .uk-subpage .navbar-collapse > .d-flex {
    justify-content: center;
  }

  .uk-subpage.pedagogy-page .container-xxl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .uk-subpage.pedagogy-page .conversation-surface {
    padding: 0.8rem;
  }

  .contact-page .contact-hero {
    min-height: calc(100svh - 76px);
  }
}