:root {
      --ink: #083d52;
      --ink-deep: #022f43;
      --teal: #008b99;
      --teal-deep: #006f82;
      --teal-dark: #00495f;
      --sky: #dff5f8;
      --sky-2: #f2fbfc;
      --line: rgba(0, 123, 143, .22);
      --muted: #567184;
      --white: #fff;
      --shadow: 0 18px 45px rgba(0, 80, 98, .18);
      --radius: 8px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "Noto Sans JP", system-ui, sans-serif;
      color: var(--ink);
      background: #f7fcfd;
      line-height: 1.75;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    .container {
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
    }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 30;
      background: rgba(255, 255, 255, .9);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(6, 82, 103, .08);
    }
    .nav {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }
    .brand {
      display: flex;
      align-items: center;
      font-weight: 900;
      color: var(--ink);
      white-space: nowrap;
    }
    .brand-logo {
      width: auto;
      height: 58px;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      font-weight: 800;
      color: var(--ink);
      font-size: 15px;
    }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 12px 26px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.55);
      font-weight: 900;
      color: #fff;
      background: linear-gradient(135deg, var(--teal), var(--teal-dark));
      box-shadow: 0 14px 30px rgba(0, 91, 108, .24);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .button:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0, 91, 108, .3); }
    .button.secondary {
      color: var(--ink);
      background: rgba(255,255,255,.72);
      border-color: rgba(0, 124, 143, .38);
      box-shadow: none;
    }
    .button.small { min-height: 42px; padding: 9px 19px; border-radius: 999px; }
    .icon-circle {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: inline-grid;
      place-items: center;
      background: #fff;
      color: var(--teal-dark);
      flex: 0 0 auto;
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 0;
      background: #d8f0f4;
    }
    .hero picture {
      display: block;
    }
    .hero-visual {
      display: block;
      width: 100%;
      height: calc(100vh - 78px);
      min-height: 560px;
      object-fit: cover;
      object-position: center;
    }
    .hero-actions {
      display: flex;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 12px;
    }

    section {
      position: relative;
      padding: 88px 0;
      overflow: hidden;
    }
    .section-soft { background: linear-gradient(180deg, #fff, var(--sky-2)); }
    .section-blue {
      color: var(--ink);
      background:
        linear-gradient(135deg, rgba(0,139,153,.12), rgba(255,255,255,.92)),
        radial-gradient(circle at 92% 18%, rgba(0,139,153,.16), transparent 28%);
    }
    .section-head {
      max-width: 800px;
      margin: 0 auto 42px;
      text-align: center;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      font-weight: 900;
      color: var(--teal-deep);
      letter-spacing: .13em;
    }
    .eyebrow::before,
    .eyebrow::after {
      content: "";
      width: 38px;
      height: 1px;
      background: var(--teal);
    }
    h2 {
      margin: 0;
      color: var(--ink-deep);
      font-size: clamp(32px, 4.2vw, 52px);
      line-height: 1.25;
      font-weight: 900;
      letter-spacing: .03em;
    }
    .lead {
      margin: 18px auto 0;
      max-width: 760px;
      color: #3d6072;
      font-size: 18px;
      font-weight: 500;
    }
    .grid {
      display: grid;
      gap: 22px;
    }
    .grid.three { grid-template-columns: repeat(3, 1fr); }
    .grid.two { grid-template-columns: repeat(2, 1fr); }
    .card {
      padding: 28px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.86);
      border: 1px solid var(--line);
      box-shadow: 0 12px 34px rgba(0, 71, 91, .08);
    }
    .card h3 {
      margin: 0 0 12px;
      color: var(--ink-deep);
      font-size: 22px;
      line-height: 1.45;
      font-weight: 900;
    }
    .card p { margin: 0; color: #45687a; }
    .feature-card {
      display: grid;
      grid-template-columns: 112px 1fr;
      gap: 22px;
      align-items: center;
      min-height: 188px;
    }
    .feature-showcase {
      display: grid;
      grid-template-columns: 1fr;
      gap: 34px;
      max-width: 1160px;
      margin: 0 auto;
    }
    .feature-visual-card {
      min-height: auto;
      padding: clamp(24px, 4vw, 44px);
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 96% 4%, rgba(255,255,255,.92) 0 2px, transparent 3px) 0 0 / 18px 18px,
        radial-gradient(circle at 86% 8%, rgba(0,139,153,.12), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(237,250,253,.92));
      border: 1px solid rgba(0, 128, 148, .22);
      box-shadow: 0 18px 44px rgba(0, 71, 91, .12);
    }
    .feature-visual-card.wide {
      grid-column: 1 / -1;
      min-height: auto;
    }
    .feature-kicker {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 0 18px;
      margin-bottom: 18px;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(145deg, var(--teal), var(--teal-dark));
      font-weight: 900;
      box-shadow: 0 10px 20px rgba(0, 71, 91, .18);
    }
    .feature-visual-card h3 {
      margin: 0 0 10px;
      color: var(--ink-deep);
      font-size: clamp(30px, 4vw, 54px);
      line-height: 1.25;
      letter-spacing: .03em;
    }
    .feature-visual-card > p {
      margin: 0 0 24px;
      color: #31586a;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.7;
    }
    .magazine-visual {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 18px;
      align-items: center;
      min-height: 260px;
      margin-top: 24px;
      padding: 24px;
      border-radius: var(--radius);
      background:
        linear-gradient(145deg, rgba(0,70,92,.96), rgba(0,139,153,.9));
      color: #fff;
    }
    .magazine-stack {
      position: relative;
      min-height: 176px;
    }
    .magazine-cover {
      position: absolute;
      width: 116px;
      height: 150px;
      border-radius: 10px;
      background: #fff;
      border: 2px solid rgba(255,255,255,.72);
      box-shadow: 0 16px 28px rgba(0, 28, 38, .26);
    }
    .magazine-cover::before {
      content: "經理人";
      display: block;
      padding: 12px 10px 8px;
      color: var(--teal-dark);
      font-weight: 900;
      border-bottom: 1px solid rgba(0, 128, 148, .22);
    }
    .magazine-cover::after {
      content: "";
      display: block;
      width: 68px;
      height: 68px;
      margin: 20px auto 0;
      border-radius: 50%;
      background:
        linear-gradient(180deg, transparent 44%, var(--teal) 45% 54%, transparent 55%),
        linear-gradient(90deg, transparent 44%, var(--teal) 45% 54%, transparent 55%),
        rgba(0,139,153,.14);
      border: 2px solid rgba(0, 128, 148, .35);
    }
    .magazine-cover:nth-child(1) { left: 0; top: 18px; transform: rotate(-7deg); opacity: .72; }
    .magazine-cover:nth-child(2) { left: 50px; top: 0; transform: rotate(3deg); }
    .magazine-copy b {
      display: block;
      font-size: clamp(54px, 8vw, 92px);
      line-height: .9;
    }
    .magazine-copy span {
      display: block;
      margin-top: 10px;
      font-size: 22px;
      font-weight: 900;
    }
    .generated-diagram {
      width: 100%;
      margin-top: 22px;
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid rgba(0, 128, 148, .2);
      box-shadow: 0 14px 30px rgba(0, 71, 91, .08);
      overflow: hidden;
    }
    .generated-diagram svg {
      display: block;
      width: 100%;
      height: auto;
    }
    .feature-poster .generated-diagram {
      background:
        radial-gradient(circle at 94% 10%, rgba(255,255,255,.95) 0 2px, transparent 3px) 0 0 / 18px 18px,
        linear-gradient(135deg, #f7fdff, #dff4f8);
    }
    .feature-visual-card.image-only {
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
    }
    .feature-visual-card.image-only > :not(.feature-image-frame) {
      display: none;
    }
    .feature-image-frame {
      margin: 0;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid rgba(0, 128, 148, .2);
      box-shadow: 0 18px 44px rgba(0, 71, 91, .12);
      background: #eaf8fb;
    }
    .feature-image-frame img {
      display: block;
      width: 100%;
      height: auto;
    }
    .phase-flow {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      align-items: stretch;
    }
    .phase-box {
      position: relative;
      padding: 24px 20px;
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid var(--line);
      text-align: center;
    }
    .phase-box::after {
      content: "›";
      position: absolute;
      top: 50%;
      right: -16px;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: var(--teal-dark);
      font-size: 25px;
      font-weight: 900;
      z-index: 2;
    }
    .phase-box:last-child::after { content: none; }
    .phase-box h4,
    .matrix-card h4,
    .stage-card h4 {
      margin: 0 0 10px;
      color: var(--ink-deep);
      font-size: 21px;
      line-height: 1.35;
    }
    .phase-box ul {
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
      color: #45687a;
      font-weight: 700;
      line-height: 1.65;
      text-align: left;
    }
    .phase-box li {
      position: relative;
      padding-left: 22px;
      margin-top: 8px;
    }
    .phase-box li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .72em;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--teal);
    }
    .phase-icon {
      width: 72px;
      height: 72px;
      display: grid;
      place-items: center;
      margin: 0 auto 16px;
      border-radius: 50%;
      background: rgba(0, 139, 153, .12);
      border: 1px solid rgba(0, 128, 148, .24);
    }
    .phase-icon svg {
      width: 46px;
      height: 46px;
      fill: none;
      stroke: var(--teal-dark);
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .leadership-matrix {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      padding: 18px;
      border-radius: var(--radius);
      background:
        linear-gradient(90deg, rgba(0,139,153,.12), transparent),
        linear-gradient(180deg, transparent, rgba(0,70,92,.08));
      border: 1px solid rgba(0, 128, 148, .18);
    }
    .matrix-card {
      min-height: 130px;
      padding: 18px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.92);
      border: 1px solid var(--line);
    }
    .matrix-card p {
      margin: 0;
      color: #45687a;
      font-weight: 700;
      line-height: 1.55;
    }
    .stage-flow {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      align-items: stretch;
    }
    .stage-card {
      display: grid;
      align-content: start;
      min-height: 170px;
      padding: 18px 12px;
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid var(--line);
      text-align: center;
    }
    .stage-dot {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      margin: 0 auto 12px;
      border-radius: 50%;
      color: #fff;
      background: linear-gradient(145deg, var(--teal), var(--teal-dark));
      font-weight: 900;
    }
    .stage-card p {
      margin: 0;
      color: #45687a;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.5;
    }
    .scenario-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 22px;
    }
    .scenario-card {
      min-height: 240px;
      padding: 20px 16px;
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid var(--line);
      text-align: center;
    }
    .scenario-icon {
      width: 72px;
      height: 72px;
      display: grid;
      place-items: center;
      margin: 0 auto 14px;
      border-radius: 50%;
      background: rgba(0, 139, 153, .12);
      border: 1px solid rgba(0, 128, 148, .24);
    }
    .scenario-icon svg {
      width: 46px;
      height: 46px;
      fill: none;
      stroke: var(--teal-dark);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .scenario-card h4 {
      margin: 0 0 10px;
      color: var(--ink-deep);
      font-size: 22px;
      line-height: 1.35;
    }
    .scenario-card p {
      margin: 0;
      color: #45687a;
      font-weight: 700;
      line-height: 1.65;
      text-align: left;
    }
    .feature-illustration {
      width: 112px;
      height: 112px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.85), transparent 32%),
        linear-gradient(145deg, rgba(0,139,153,.18), rgba(0,73,95,.08));
      border: 1px solid rgba(0,123,143,.22);
    }
    .feature-illustration svg {
      width: 82px;
      height: 82px;
      fill: none;
      stroke: var(--teal-dark);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .feature-illustration .fill-teal { fill: rgba(0,139,153,.16); stroke: var(--teal); }
    .feature-illustration .fill-deep { fill: rgba(0,73,95,.12); stroke: var(--teal-dark); }
    .problem-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      max-width: 860px;
      margin: 0 auto;
    }
    .problem {
      position: relative;
      min-height: 0;
      padding: 22px 28px 22px 86px;
      border-radius: 999px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.98), rgba(235,250,252,.92));
      border: 1px solid rgba(0, 128, 148, .2);
      box-shadow: 0 12px 26px rgba(0, 79, 99, .07);
      overflow: hidden;
    }
    .problem:nth-child(even) {
      margin-left: 54px;
      background:
        linear-gradient(90deg, rgba(231,248,252,.96), rgba(255,255,255,.98));
    }
    .problem::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 28px;
      width: 28px;
      height: 28px;
      transform: translateY(-50%) rotate(45deg);
      border-radius: 8px;
      background: linear-gradient(145deg, var(--teal), var(--teal-dark));
      box-shadow: 0 8px 18px rgba(0, 75, 96, .18);
    }
    .problem::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 38px;
      width: 8px;
      height: 8px;
      transform: translateY(-50%);
      border-radius: 50%;
      background: #fff;
    }
    .problem p { margin: 0; }
    .problem strong { display: block; color: var(--ink-deep); font-size: 22px; line-height: 1.45; }
    .flow {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      counter-reset: step;
    }
    .flow-item {
      position: relative;
      min-height: 210px;
      padding: 24px 18px;
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid var(--line);
      text-align: center;
    }
    .flow-item::before {
      counter-increment: step;
      content: counter(step, decimal-leading-zero);
      display: inline-grid;
      place-items: center;
      width: 46px;
      height: 46px;
      margin-bottom: 14px;
      border-radius: 50%;
      color: #fff;
      font-weight: 900;
      background: linear-gradient(145deg, var(--teal), var(--teal-dark));
    }
    .flow-item h3 { margin: 0 0 8px; font-size: 19px; color: var(--ink-deep); }
    .flow-item p { margin: 0; font-size: 14px; color: #557285; }
    .outcome-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
      max-width: 920px;
      margin: 0 auto;
      counter-reset: outcome;
    }
    .outcome-card {
      position: relative;
      min-height: 210px;
      padding: 78px 28px 28px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(0, 128, 148, .22);
      box-shadow: 0 16px 34px rgba(0, 71, 91, .08);
    }
    .outcome-card::before {
      counter-increment: outcome;
      content: counter(outcome, decimal-leading-zero);
      position: absolute;
      top: 20px;
      left: 20px;
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      color: #fff;
      background: linear-gradient(145deg, var(--teal), var(--teal-dark));
      font-weight: 900;
    }
    .outcome-card h3 {
      margin: 0 0 10px;
      color: var(--ink-deep);
      font-size: 20px;
      line-height: 1.35;
    }
    .outcome-card p {
      margin: 0;
      color: #45687a;
      font-weight: 600;
      line-height: 1.65;
    }
    .why-panel {
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
    }
    .why-panel .lead {
      max-width: 820px;
      font-weight: 800;
    }
    .why-highlight {
      display: inline-block;
      margin: 26px auto 28px;
      padding: 18px 24px;
      border-radius: var(--radius);
      color: var(--ink-deep);
      background: #fff6d8;
      border-left: 6px solid #c99b2e;
      box-shadow: 0 12px 28px rgba(0, 71, 91, .08);
      font-size: 22px;
      font-weight: 900;
      line-height: 1.65;
      text-align: left;
    }
    .why-copy {
      display: grid;
      gap: 14px;
      max-width: 820px;
      margin: 0 auto;
      color: #31586a;
      font-size: 18px;
      font-weight: 650;
      line-height: 1.9;
      text-align: left;
    }
    .why-copy p { margin: 0; }
    .highlight {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 34px;
      align-items: center;
      padding: 42px;
      border-radius: var(--radius);
      color: #fff;
      background:
        linear-gradient(135deg, rgba(0,70,92,.96), rgba(0,139,153,.94)),
        radial-gradient(circle at 90% 20%, rgba(255,255,255,.22), transparent 28%);
      box-shadow: var(--shadow);
    }
    .highlight h2, .highlight h3 { color: #fff; }
    .highlight p { color: rgba(255,255,255,.86); }
    .highlight .grid .card h3 { color: var(--ink-deep) !important; }
    .highlight .grid .card p { color: #45687a !important; }
    .badge-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }
    .badge {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.28);
      font-weight: 800;
      color: #fff;
      font-size: 14px;
    }
    .timeline {
      display: grid;
      gap: 18px;
      max-width: 880px;
      margin: 0 auto;
    }
    .week {
      display: grid;
      grid-template-columns: 140px 1fr;
      gap: 18px;
      align-items: stretch;
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid var(--line);
      overflow: hidden;
      box-shadow: 0 10px 28px rgba(0, 71, 91, .08);
    }
    .week-label {
      display: grid;
      place-items: center;
      min-height: 132px;
      color: #fff;
      font-weight: 900;
      font-size: 24px;
      background: linear-gradient(145deg, var(--teal), var(--teal-dark));
    }
    .week-body { padding: 22px 24px; }
    .week-body h3 { margin: 0 0 8px; color: var(--ink-deep); font-size: 22px; }
    .week-body p { margin: 0; color: #496b7d; }
    .run-calendar {
      max-width: 1040px;
      margin: 0 auto;
      overflow-x: auto;
      border-radius: var(--radius);
      background: linear-gradient(180deg, #f4fbfd, #fff);
      border: 1px solid rgba(0, 128, 148, .2);
      box-shadow: var(--shadow);
    }
    .month-calendar {
      min-width: 860px;
      display: grid;
      grid-template-columns: 150px repeat(5, 1fr);
      border-top: 1px solid rgba(0, 81, 101, .35);
      border-left: 1px solid rgba(0, 81, 101, .35);
      color: var(--ink-deep);
    }
    .month-head,
    .month-week,
    .day-cell {
      border-right: 1px solid rgba(0, 81, 101, .35);
      border-bottom: 1px solid rgba(0, 81, 101, .35);
    }
    .month-head {
      min-height: 42px;
      display: grid;
      place-items: center;
      padding: 8px;
      color: #fff;
      background: linear-gradient(135deg, var(--teal), var(--teal-dark));
      font-weight: 900;
      line-height: 1.2;
    }
    .month-week {
      min-height: 170px;
      display: grid;
      place-items: center;
      padding: 12px;
      color: #fff;
      background: linear-gradient(145deg, var(--teal), var(--teal-dark));
      font-size: 17px;
      font-weight: 900;
      text-align: center;
      line-height: 1.35;
    }
    .day-cell {
      position: relative;
      min-height: 170px;
      padding: 54px 10px 12px;
      background: rgba(255, 255, 255, .92);
      color: #20495d;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.38;
    }
    .day-cell.is-email { background: #d9eff9; }
    .day-cell.is-highlight { background: #fff6d8; }
    .day-cell .date {
      position: absolute;
      top: 8px;
      left: 0;
      right: 0;
      color: var(--ink-deep);
      font-size: 15px;
      font-weight: 900;
      line-height: 1;
      text-align: center;
    }
    .day-cell strong {
      display: block;
      color: var(--ink-deep);
      font-weight: 900;
    }
    .day-cell .red {
      display: block;
      color: #e60012;
      font-weight: 900;
    }
    .calendar-legend {
      min-width: 860px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      padding: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,.9), #eefafd);
    }
    .calendar-icon {
      display: grid;
      justify-items: center;
      gap: 10px;
      min-height: 150px;
      padding: 20px 14px;
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid var(--line);
      color: var(--ink-deep);
      font-weight: 900;
      text-align: center;
      box-shadow: 0 12px 28px rgba(0, 71, 91, .08);
    }
    .calendar-icon svg {
      width: 74px;
      height: 74px;
      padding: 14px;
      border-radius: 50%;
      background: linear-gradient(145deg, rgba(0, 141, 151, .14), rgba(0, 62, 83, .12));
      fill: none;
      stroke: var(--teal-dark);
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .pricing {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      align-items: stretch;
    }
    .price-card {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 34px;
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }
    .price-card.featured {
      background: linear-gradient(180deg, #fff, #edfafd);
      border: 2px solid var(--teal);
    }
    .price-card .tag {
      position: absolute;
      top: 18px;
      right: 18px;
      padding: 6px 12px;
      border-radius: 999px;
      color: #fff;
      background: var(--teal);
      font-size: 13px;
      font-weight: 900;
    }
    .price-label {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      justify-content: center;
      min-height: 0;
      margin: 0 0 10px;
      padding: 0;
      color: var(--teal-dark);
      background: transparent;
      font-size: 24px;
      font-weight: 900;
      line-height: 1.25;
    }
    .price-card.featured .price-label {
      background: transparent;
      color: #a87918;
    }
    .price {
      margin: 12px 0 12px;
      color: var(--ink-deep);
      font-size: 36px;
      font-weight: 900;
    }
    .price small { font-size: 15px; color: var(--muted); }
    ul.clean {
      list-style: none;
      padding: 0;
      margin: 22px 0;
      display: grid;
      gap: 0;
    }
    ul.clean li {
      position: relative;
      min-height: 46px;
      padding-left: 28px;
      padding-top: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(0, 85, 105, .1);
      color: #426577;
      font-weight: 600;
    }
    ul.clean li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--teal);
      font-weight: 900;
    }
    ul.clean li.unavailable {
      color: #9aabb5;
    }
    ul.clean li.unavailable::before {
      content: "—";
      color: #b5c4cb;
    }
    .checkout-area {
      margin: 0 0 22px;
      padding-top: 0;
    }
    .checkout-area .button {
      width: 100%;
      min-height: 54px;
    }
    .faq {
      max-width: 880px;
      margin: 0 auto;
      display: grid;
      gap: 12px;
    }
    details {
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: 0 8px 20px rgba(0, 71, 91, .06);
    }
    summary {
      cursor: pointer;
      padding: 20px 24px;
      color: var(--ink-deep);
      font-weight: 900;
      list-style: none;
    }
    summary::-webkit-details-marker { display: none; }
    details p {
      margin: 0;
      padding: 0 24px 22px;
      color: #486a7b;
    }
    .cta {
      padding: 96px 0;
      text-align: center;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(0,55,75,.96), rgba(0,139,153,.92)),
        radial-gradient(circle at 16% 20%, rgba(255,255,255,.16), transparent 30%);
    }
    .cta h2 { color: #fff; }
    .cta .lead { color: rgba(255,255,255,.86); }
    .cta .button.secondary {
      color: #fff;
      background: rgba(255,255,255,.13);
      border-color: rgba(255,255,255,.42);
    }
    footer {
      padding: 38px 0;
      color: #d5edf2;
      background: #032f42;
    }
    footer .container {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: center;
    }

    @media (max-width: 1040px) {
      .nav-links a:not(.button) { display: none; }
      .flow { grid-template-columns: repeat(3, 1fr); }
      .feature-showcase { grid-template-columns: 1fr; }
    }

    @media (max-width: 780px) {
      .container { width: min(100% - 28px, 620px); }
      .nav { min-height: 68px; }
      .brand-logo { height: 44px; }
      .nav-links .button { padding-inline: 16px; font-size: 13px; }
      .hero-visual {
        height: auto;
        min-height: 0;
        object-fit: contain;
        object-position: center top;
      }
      section { padding: 66px 0; }
      .grid.three, .grid.two, .pricing, .problem-list, .highlight, .feature-showcase, .magazine-visual, .phase-flow, .stage-flow, .scenario-grid { grid-template-columns: 1fr; }
      .problem,
      .problem:nth-child(even) {
        margin-left: 0;
        border-radius: 18px;
        padding: 24px 22px 24px 68px;
      }
      .problem::before { left: 24px; width: 22px; height: 22px; border-radius: 6px; }
      .problem::after { left: 31px; width: 7px; height: 7px; }
      .problem strong { font-size: 19px; }
      .feature-visual-card { min-height: auto; }
      .feature-poster .generated-diagram { overflow-x: auto; }
      .feature-poster .generated-diagram svg { min-width: 720px; }
      .feature-image-frame { overflow: hidden; }
      .feature-image-frame img { min-width: 0; }
      .phase-box::after { content: none; }
      .feature-card { grid-template-columns: 92px 1fr; gap: 16px; }
      .feature-illustration { width: 92px; height: 92px; }
      .feature-illustration svg { width: 66px; height: 66px; }
      .flow { grid-template-columns: 1fr; }
      .outcome-grid { grid-template-columns: 1fr; }
      .outcome-card { min-height: auto; }
      .why-highlight { font-size: 18px; }
      .week { grid-template-columns: 1fr; }
      .week-label { min-height: 72px; }
      footer .container { display: block; }
    }