/* C120: Websites service page stylesheet for websites/index.html; menu chrome is shared through ../site-shell.css. */
    :root {
      --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --max-width: 1180px;
      --max-wide: 1320px;
      --radius: 8px;
      --radius-lg: 26px;
      --radius-xl: 34px;
      --ease-out: cubic-bezier(.2, .8, .2, 1);
      --ease-soft: cubic-bezier(.22, 1, .36, 1);
      --red: #E1192D;
    }

    /* C003: Theme variables are selected by websites/theme.js and the shared menu theme controls. */
    html[data-theme="light"] {
      --bg: #f7f5f2;
      --bg-elevated: #ffffff;
      --bg-muted: #efeeeb;
      --bg-band: #f1efec;
      --text: #111111;
      --text-muted: #66666c;
      --line: rgba(17, 17, 17, .11);
      --line-strong: rgba(17, 17, 17, .2);
      --accent: #E1192D;
      --accent-strong: #B91224;
      /* Brand red stays #E1192D for fills, rules, and buttons. Small red *text* uses a
         tuned shade so it clears WCAG AA against this theme's background. */
      --accent-text: #C9152A;
      --accent-soft: rgba(225, 25, 45, .09);
      --glass: rgba(255, 255, 255, .76);
      --shadow-soft: 0 24px 70px rgba(17, 17, 17, .1);
      --shadow-lift: 0 36px 100px rgba(17, 17, 17, .16);
      --screen-shade: rgba(17, 17, 17, .06);
    }

    html[data-theme="dark"] {
      --bg: #0d0d0e;
      --bg-elevated: #171719;
      --bg-muted: #212124;
      --bg-band: #121213;
      --text: #f5f5f7;
      --text-muted: #b1b1b9;
      --line: rgba(255, 255, 255, .12);
      --line-strong: rgba(255, 255, 255, .24);
      --accent: #E1192D;
      --accent-strong: #ff3448;
      --accent-text: #ff5c6b;
      --accent-soft: rgba(225, 25, 45, .16);
      --glass: rgba(24, 24, 26, .76);
      --shadow-soft: 0 24px 70px rgba(0, 0, 0, .5);
      --shadow-lift: 0 40px 110px rgba(0, 0, 0, .62);
      --screen-shade: rgba(255, 255, 255, .05);
    }

    * {
      box-sizing: border-box;
    }

    html {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      scroll-behavior: smooth;
      background: var(--bg);
      color: var(--text);
    }

    body {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      margin: 0;
      overflow-x: hidden;
      font-family: var(--font-sans);
      line-height: 1.55;
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    }

    @supports (overflow: clip) {
      html,
      body {
        overflow-x: clip;
      }
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    summary {
      font: inherit;
    }

    img,
    svg {
      display: block;
      max-width: 100%;
    }

    h1,
    h2,
    h3,
    p,
    figure {
      margin: 0;
    }

    ul,
    ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    ::-moz-selection {
      background-color: #E1192D;
      color: #ffffff;
    }

    ::selection {
      background-color: #E1192D;
      color: #ffffff;
    }

    :focus-visible {
      outline: 3px solid color-mix(in srgb, var(--accent), transparent 22%);
      outline-offset: 3px;
    }

    .skip-link {
      position: fixed;
      left: 1rem;
      top: 1rem;
      z-index: 200;
      transform: translateY(-150%);
      border-radius: var(--radius);
      background: var(--text);
      color: var(--bg);
      padding: .75rem 1rem;
      transition: transform .2s ease;
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    /* C002/C120: Header selectors match websites/index.html and ../site-menu.js. */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg-elevated), transparent 16%);
      -webkit-backdrop-filter: blur(22px) saturate(1.35);
      backdrop-filter: blur(22px) saturate(1.35);
    }

    .nav-shell {
      width: min(100% - 2rem, var(--max-wide));
      min-height: 74px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      color: var(--text);
      font-size: 1rem;
      font-weight: 850;
      white-space: nowrap;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: .35rem;
    }

    .nav-link,
    .app-menu summary {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      font-size: .9rem;
      font-weight: 780;
      padding: .52rem .9rem;
      transition: color .2s ease, background .2s ease, transform .2s ease;
    }

    .nav-link:hover,
    .nav-link:focus-visible,
    .app-menu summary:hover,
    .app-menu summary:focus-visible {
      background: var(--bg-muted);
      color: var(--text);
      outline: none;
      transform: translateY(-1px);
    }

    .app-menu {
      position: relative;
    }

    .app-menu summary {
      list-style: none;
    }

    .app-menu summary::-webkit-details-marker {
      display: none;
    }

    .app-menu summary::after {
      content: "";
      width: .45rem;
      height: .45rem;
      margin-left: .55rem;
      border-bottom: 2px solid currentColor;
      border-right: 2px solid currentColor;
      transform: translateY(-.1rem) rotate(45deg);
      transition: transform .2s ease;
    }

    .app-menu[open] summary::after {
      transform: translateY(.1rem) rotate(225deg);
    }

    .app-menu-list {
      position: absolute;
      right: 0;
      top: calc(100% + .55rem);
      width: min(78vw, 258px);
      display: grid;
      gap: .25rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--bg-elevated);
      box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
      padding: .45rem;
    }

    .app-menu-list a {
      border-radius: calc(var(--radius) - 2px);
      color: var(--text-muted);
      font-size: .92rem;
      font-weight: 750;
      padding: .72rem .8rem;
      transition: background .2s ease, color .2s ease;
    }

    .app-menu-list a:hover,
    .app-menu-list a:focus-visible {
      background: var(--bg-muted);
      color: var(--text);
      outline: none;
    }

    /* C120: Shared typography and layout primitives for every section on the page. */
    .section {
      position: relative;
      width: min(100% - 2rem, var(--max-wide));
      margin: 0 auto;
      padding: clamp(4.5rem, 9vw, 8rem) 0;
      scroll-margin-top: 90px;
    }

    .band {
      width: 100%;
      max-width: none;
      background: var(--bg-band);
      border-block: 1px solid var(--line);
    }

    .band > * {
      width: min(100% - 2rem, var(--max-wide));
      margin-inline: auto;
    }

    .eyebrow,
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      color: var(--accent-text);
      font-size: .76rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .1em;
    }

    .eyebrow::before,
    .section-kicker::before {
      content: "";
      width: 26px;
      height: 2px;
      flex: 0 0 auto;
      border-radius: 999px;
      background: currentColor;
    }

    .section-heading {
      display: grid;
      grid-template-columns: minmax(0, .68fr) minmax(260px, .32fr);
      align-items: end;
      gap: 2rem;
      margin-bottom: clamp(2rem, 4vw, 3.4rem);
    }

    .section-heading h2 {
      margin-top: .7rem;
      max-width: 18ch;
      font-size: clamp(2.15rem, 5vw, 4.1rem);
      font-weight: 860;
      line-height: 1.02;
      letter-spacing: -.02em;
      text-wrap: balance;
    }

    .section-heading > p {
      color: var(--text-muted);
      font-size: 1.02rem;
      line-height: 1.7;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      min-height: 50px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      padding: .84rem 1.25rem;
      font-size: .94rem;
      font-weight: 850;
      white-space: nowrap;
      transition: transform .2s ease, box-shadow .2s ease, background .25s ease, border-color .25s ease, color .25s ease;
    }

    .button::after {
      content: "";
      width: 7px;
      height: 7px;
      border-top: 2px solid currentColor;
      border-right: 2px solid currentColor;
      transform: rotate(45deg);
      transition: transform .22s var(--ease-out);
    }

    .button.primary {
      background: var(--accent);
      color: #ffffff;
      box-shadow: 0 18px 44px color-mix(in srgb, var(--accent), transparent 72%);
    }

    .button.secondary {
      border-color: var(--line-strong);
      background: color-mix(in srgb, var(--bg-elevated), transparent 8%);
      color: var(--text);
    }

    .button:hover,
    .button:focus-visible {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--accent), var(--line) 46%);
      box-shadow: var(--shadow-soft);
    }

    .button:hover::after,
    .button:focus-visible::after {
      transform: translateX(3px) rotate(45deg);
    }

    .chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: .45rem;
    }

    .chip-row li {
      border: 1px solid color-mix(in srgb, var(--accent), var(--line) 72%);
      border-radius: 999px;
      background: color-mix(in srgb, var(--bg-elevated), transparent 20%);
      color: var(--accent-text);
      font-size: .78rem;
      font-weight: 850;
      padding: .42rem .68rem;
    }

    .chip-row--lg li {
      font-size: .84rem;
      padding: .5rem .82rem;
    }

    .project-link {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      width: fit-content;
      color: var(--accent-text);
      font-size: .95rem;
      font-weight: 850;
    }

    .project-link::after {
      content: "";
      width: 7px;
      height: 7px;
      border-top: 2px solid currentColor;
      border-right: 2px solid currentColor;
      transform: rotate(45deg);
      transition: transform .22s var(--ease-out);
    }

    .project-link:hover::after,
    .project-link:focus-visible::after {
      transform: translateX(3px) rotate(45deg);
    }

    /* C120: Device frames. Each mockup PNG has a fully transparent screen cutout, so the
       screenshot is layered underneath and the frame is painted on top. The screen rects
       below were measured from the alpha channel of the source art in Assets/Websites/
       and match real hardware resolutions (Studio Display 5120x2880, iMac 4480x2520,
       MacBook Pro 16" 3456x2234, iPad Pro 13" 2752x2064, iPhone 17 Pro Max 1320x2866). */
    .device {
      position: relative;
      width: 100%;
    }

    /* The frame is a <picture> where the art is theme-dependent and a bare <img> where it
       is not, so both forms need the sizing rule. */
    .device-frame {
      position: relative;
      z-index: 2;
      display: block;
      width: 100%;
      pointer-events: none;
    }

    img.device-frame,
    .device-frame img {
      width: 100%;
      height: auto;
    }

    .device-screen {
      position: absolute;
      z-index: 1;
      overflow: hidden;
      background: var(--bg-muted);
    }

    .device-screen img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
    }

    .device-screen picture {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* C120: Only archived full-page captures scroll. Native overflow preserves trackpad,
       wheel, touch, and keyboard behavior, while allowing the page to keep scrolling once
       the visitor reaches either end of the capture. */
    .device-screen--archive {
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior-y: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-color: color-mix(in srgb, var(--text), transparent 58%) transparent;
      scrollbar-width: thin;
      touch-action: pan-y;
    }

    .device-screen--archive img {
      display: block;
      width: 100%;
      height: auto;
      min-height: 100%;
      object-fit: initial;
    }

    .device-screen--archive:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: -3px;
    }

    .device-screen--archive::-webkit-scrollbar {
      width: 6px;
    }

    .device-screen--archive::-webkit-scrollbar-track {
      background: transparent;
    }

    .device-screen--archive::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: color-mix(in srgb, var(--text), transparent 58%);
    }

    /* Screen cutout geometry, as a percentage of each frame image. */
    .device--studio .device-screen {
      left: 2.5926%;
      top: 3.3654%;
      width: 94.8148%;
      height: 69.2308%;
    }

    .device--imac .device-screen {
      left: 2.9832%;
      top: 3.7037%;
      width: 94.1176%;
      height: 62.2222%;
    }

    .device--macbook .device-screen {
      left: 9.4366%;
      top: 10.669%;
      width: 81.1268%;
      height: 78.662%;
    }

    .device--ipad .device-screen {
      left: 4.1333%;
      top: 5.1304%;
      width: 91.7333%;
      height: 89.7391%;
    }

    .device--phone .device-screen {
      left: 5.102%;
      top: 2.2333%;
      width: 89.7959%;
      height: 95.5333%;
      border-radius: 13.5% / 6.25%;
    }

    /* C120: Hero. */
    .hero {
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid var(--line);
      padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
    }

    .hero-glow {
      position: absolute;
      inset: -20% -10% auto -10%;
      height: 130%;
      background:
        radial-gradient(46% 38% at 16% 22%, color-mix(in srgb, var(--accent), transparent 88%), transparent 70%),
        radial-gradient(44% 38% at 90% 34%, color-mix(in srgb, var(--accent-strong), transparent 90%), transparent 68%);
      pointer-events: none;
    }

    html[data-theme="dark"] .hero-glow {
      background:
        radial-gradient(50% 42% at 14% 24%, color-mix(in srgb, var(--accent), transparent 80%), transparent 72%),
        radial-gradient(46% 40% at 92% 32%, color-mix(in srgb, var(--accent-strong), transparent 86%), transparent 70%);
    }

    .hero-mark {
      position: absolute;
      right: -4%;
      top: 6%;
      width: min(38vw, 420px);
      height: auto;
      opacity: .05;
      pointer-events: none;
    }

    html[data-theme="dark"] .hero-mark {
      opacity: .08;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      width: min(100% - 2rem, var(--max-wide));
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, .46fr) minmax(0, .54fr);
      align-items: center;
      gap: clamp(2.5rem, 5vw, 4.5rem);
    }

    .hero h1 {
      margin-top: 1.1rem;
      font-size: clamp(2.6rem, 5.4vw, 4.6rem);
      font-weight: 880;
      line-height: 1;
      letter-spacing: -.032em;
      text-wrap: balance;
    }

    .hero h1 em {
      font-style: normal;
      color: var(--accent);
    }

    .hero-copy {
      max-width: 46ch;
      margin-top: 1.35rem;
      color: var(--text-muted);
      font-size: clamp(1rem, 1.35vw, 1.12rem);
      line-height: 1.75;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .7rem;
      margin-top: 1.9rem;
    }

    .hero-facts {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(1.2rem, 3vw, 2.4rem);
      margin-top: 2.4rem;
      padding-top: 1.6rem;
      border-top: 1px solid var(--line);
    }

    .hero-facts li {
      display: grid;
      gap: .1rem;
    }

    .hero-facts strong {
      font-size: 1.32rem;
      font-weight: 880;
      letter-spacing: -.01em;
    }

    .hero-facts span {
      color: var(--text-muted);
      font-size: .84rem;
      font-weight: 600;
    }

    /* The Studio Display frame includes its stand, so the stage leaves a little breathing
       room below the device without crowding the following section. */
    .hero-stage {
      position: relative;
      padding-bottom: 4%;
    }

    .hero-device--display {
      width: 100%;
    }

    /* C120: Project cards. */
    .project-list {
      display: grid;
      gap: clamp(3rem, 6vw, 6rem);
    }

    .project {
      display: grid;
      grid-template-columns: minmax(0, .58fr) minmax(0, .42fr);
      align-items: center;
      gap: clamp(1.8rem, 4vw, 4rem);
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: color-mix(in srgb, var(--bg-elevated), transparent 6%);
      box-shadow: var(--shadow-soft);
      padding: clamp(1.4rem, 3vw, 3rem);
    }

    .project:nth-child(even) .project-visual {
      order: 2;
    }

    .project-visual {
      position: relative;
      padding-bottom: 3%;
    }

    .project-phone {
      position: absolute;
      right: -1%;
      bottom: 0;
      width: 15%;
      z-index: 3;
    }

    .project-industry {
      color: var(--text-muted);
      font-size: .8rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .1em;
    }

    .project-name {
      margin-top: .5rem;
      font-size: clamp(1.7rem, 2.9vw, 2.5rem);
      font-weight: 870;
      line-height: 1.04;
      letter-spacing: -.02em;
    }

    .project-summary {
      margin-top: .9rem;
      color: var(--text-muted);
      font-size: 1rem;
      line-height: 1.72;
    }

    .project-body .chip-row {
      margin-top: 1.25rem;
    }

    .project-body .project-link {
      margin-top: 1.4rem;
    }

    .project-fallback {
      display: grid;
      gap: .6rem;
      color: var(--text-muted);
    }

    .project-fallback a {
      color: var(--accent);
      font-weight: 850;
    }

    /* C120: Managed-service grid. */
    .care-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }

    .care-card {
      display: grid;
      align-content: start;
      gap: .6rem;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: color-mix(in srgb, var(--bg-elevated), transparent 4%);
      padding: clamp(1.3rem, 2.2vw, 1.9rem);
      transition: transform .32s var(--ease-out), border-color .32s ease, box-shadow .32s ease;
    }

    .care-card:hover {
      transform: translateY(-4px);
      border-color: color-mix(in srgb, var(--accent), var(--line) 60%);
      box-shadow: var(--shadow-soft);
    }

    .care-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: var(--accent-soft);
      color: var(--accent);
    }

    .care-icon svg {
      width: 24px;
      height: 24px;
    }

    .care-card h3 {
      font-size: 1.08rem;
      font-weight: 860;
      letter-spacing: -.01em;
    }

    .care-card p {
      color: var(--text-muted);
      font-size: .95rem;
      line-height: 1.68;
    }

    /* C120: Pricing plan. */
    .plan {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-xl);
      background:
        radial-gradient(60% 90% at 8% 0%, var(--accent-soft), transparent 62%),
        color-mix(in srgb, var(--bg-elevated), transparent 2%);
      box-shadow: var(--shadow-soft);
      padding: clamp(1.5rem, 3.4vw, 3.2rem);
    }

    .plan-head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: clamp(1.2rem, 3vw, 2.6rem);
      padding-bottom: clamp(1.5rem, 3vw, 2.4rem);
      border-bottom: 1px solid var(--line);
    }

    .plan-price {
      display: grid;
    }

    .plan-amount {
      font-size: clamp(3rem, 6vw, 4.6rem);
      font-weight: 900;
      line-height: .95;
      letter-spacing: -.04em;
    }

    .plan-period {
      color: var(--text-muted);
      font-size: .9rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .1em;
    }

    .plan-lede {
      max-width: 46ch;
      color: var(--text-muted);
      font-size: 1.02rem;
      line-height: 1.72;
    }

    .plan-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(1.4rem, 3vw, 2.6rem);
      padding-top: clamp(1.5rem, 3vw, 2.4rem);
    }

    .plan-col-title {
      margin-bottom: 1rem;
      font-size: .82rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .1em;
    }

    .plan-col-note {
      margin: -.25rem 0 1rem;
      color: var(--text-muted);
      font-size: .9rem;
      line-height: 1.55;
    }

    .check-list,
    .cross-list {
      display: grid;
      gap: .58rem;
    }

    .check-list li,
    .cross-list li {
      position: relative;
      padding-left: 1.7rem;
      font-size: .95rem;
      line-height: 1.55;
    }

    .check-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .34rem;
      width: 1rem;
      height: .55rem;
      border-left: 2.5px solid var(--accent);
      border-bottom: 2.5px solid var(--accent);
      transform: rotate(-45deg);
    }

    .check-list--soft li {
      color: var(--text-muted);
    }

    .check-list--soft li::before {
      border-color: color-mix(in srgb, var(--accent), var(--text-muted) 45%);
    }

    .cross-list li {
      color: var(--text-muted);
    }

    .cross-list li::before,
    .cross-list li::after {
      content: "";
      position: absolute;
      left: .18rem;
      top: .68rem;
      width: .8rem;
      height: 2px;
      border-radius: 2px;
      background: var(--line-strong);
    }

    .cross-list li::before {
      transform: rotate(45deg);
    }

    .cross-list li::after {
      transform: rotate(-45deg);
    }

    .plan-note {
      margin-top: clamp(1.4rem, 3vw, 2.2rem);
      padding-top: 1.4rem;
      border-top: 1px solid var(--line);
      color: var(--text-muted);
      font-size: .92rem;
      line-height: 1.7;
    }

    /* C120: Founding client offer. */
    .founding {
      position: relative;
      overflow: hidden;
      display: grid;
      justify-items: start;
      gap: 1rem;
      border: 1px solid color-mix(in srgb, var(--accent), var(--line) 55%);
      border-radius: var(--radius-xl);
      background:
        radial-gradient(70% 120% at 92% 8%, var(--accent-soft), transparent 60%),
        color-mix(in srgb, var(--bg-elevated), transparent 4%);
      box-shadow: var(--shadow-soft);
      padding: clamp(1.8rem, 4vw, 3.6rem);
    }

    .founding-mark {
      position: absolute;
      right: -2%;
      top: -18%;
      width: min(30%, 240px);
      height: auto;
      opacity: .07;
      pointer-events: none;
    }

    html[data-theme="dark"] .founding-mark {
      opacity: .13;
    }

    .founding h2 {
      max-width: 20ch;
      font-size: clamp(1.9rem, 4vw, 3.2rem);
      font-weight: 870;
      line-height: 1.04;
      letter-spacing: -.025em;
    }

    .founding-copy {
      max-width: 62ch;
      color: var(--text-muted);
      font-size: 1.02rem;
      line-height: 1.75;
    }

    .founding-copy--fine {
      max-width: 76ch;
      font-size: .92rem;
    }

    .founding-actions {
      margin-top: .8rem;
    }

    /* C120: "Your website manager" request rows. */
    .ask-list {
      display: grid;
      gap: .6rem;
    }

    .ask-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: baseline;
      gap: 1.4rem;
      border-bottom: 1px solid var(--line);
      padding: clamp(1rem, 2.2vw, 1.7rem) .2rem;
    }

    .ask-q {
      font-size: clamp(1.25rem, 3vw, 2.15rem);
      font-weight: 850;
      line-height: 1.14;
      letter-spacing: -.02em;
      text-wrap: balance;
    }

    .ask-a {
      color: var(--accent-text);
      font-size: clamp(1rem, 1.8vw, 1.35rem);
      font-weight: 880;
      white-space: nowrap;
    }

    .ask-footnote {
      max-width: 58ch;
      margin-top: clamp(1.8rem, 3vw, 2.6rem);
      color: var(--text-muted);
      font-size: 1.02rem;
      line-height: 1.75;
    }

    /* C120: Photography split layout. */
    .split {
      display: grid;
      grid-template-columns: minmax(0, .46fr) minmax(0, .54fr);
      align-items: center;
      gap: clamp(2rem, 5vw, 4.5rem);
    }

    .split-copy h2 {
      margin-top: .7rem;
      max-width: 16ch;
      font-size: clamp(2.05rem, 4.4vw, 3.5rem);
      font-weight: 865;
      line-height: 1.03;
      letter-spacing: -.025em;
    }

    .split-copy p {
      max-width: 52ch;
      margin-top: 1.1rem;
      color: var(--text-muted);
      font-size: 1.02rem;
      line-height: 1.75;
    }

    .split-copy .chip-row {
      margin-top: 1.6rem;
    }

    .split-copy .project-link {
      margin-top: 1.6rem;
    }

    /* C120: Year-one growth rail. */
    .growth {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(1rem, 2.5vw, 2rem);
    }

    .growth::before {
      content: "";
      position: absolute;
      left: 6px;
      right: 6px;
      top: 9px;
      height: 2px;
      border-radius: 999px;
      background: var(--line-strong);
    }

    .growth::after {
      content: "";
      position: absolute;
      left: 6px;
      right: 6px;
      top: 9px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), var(--accent-strong));
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 1.6s var(--ease-soft);
    }

    .growth.in-view::after {
      transform: scaleX(1);
    }

    .growth-step {
      position: relative;
      padding-top: 2.4rem;
    }

    .growth-dot {
      position: absolute;
      left: 0;
      top: 2px;
      width: 16px;
      height: 16px;
      border: 3px solid var(--bg-band);
      border-radius: 999px;
      background: var(--line-strong);
      transition: background .5s ease, transform .5s var(--ease-out);
    }

    .growth.in-view .growth-step .growth-dot {
      background: var(--accent);
    }

    .growth-when {
      font-size: clamp(1.15rem, 2.2vw, 1.6rem);
      font-weight: 880;
      letter-spacing: -.02em;
    }

    .growth-step--final .growth-when {
      color: var(--accent-text);
    }

    .growth-points {
      display: grid;
      gap: .38rem;
      margin-top: .8rem;
    }

    .growth-points li {
      position: relative;
      padding-left: 1rem;
      color: var(--text-muted);
      font-size: .95rem;
      line-height: 1.55;
    }

    .growth-points li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .62rem;
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent), transparent 40%);
    }

    /* C120: Process steps use a CSS counter for numbering. */
    .steps {
      counter-reset: step;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
    }

    .step-card {
      counter-increment: step;
      display: grid;
      align-content: start;
      gap: .6rem;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: color-mix(in srgb, var(--bg-elevated), transparent 4%);
      padding: clamp(1.3rem, 2.2vw, 1.9rem);
    }

    .step-card::before {
      content: "0" counter(step);
      color: var(--accent-text);
      font-size: .84rem;
      font-weight: 900;
      letter-spacing: .1em;
    }

    .step-card h3 {
      font-size: 1.24rem;
      font-weight: 865;
      letter-spacing: -.015em;
    }

    .step-card p {
      color: var(--text-muted);
      font-size: .95rem;
      line-height: 1.68;
    }

    /* C120: Compact service terms. The summary is intentionally scannable; ownership and
       offboarding detail use cards and native disclosure instead of legal-page paragraphs. */
    .terms-panel {
      overflow: hidden;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-xl);
      background: color-mix(in srgb, var(--bg-elevated), transparent 2%);
      box-shadow: var(--shadow-soft);
    }

    .terms-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-bottom: 1px solid var(--line);
    }

    .terms-summary li {
      display: grid;
      align-content: start;
      gap: .25rem;
      min-width: 0;
      padding: clamp(1.25rem, 2.4vw, 2rem);
    }

    .terms-summary li + li {
      border-left: 1px solid var(--line);
    }

    .terms-summary strong {
      font-size: clamp(1.15rem, 2vw, 1.5rem);
      font-weight: 880;
      letter-spacing: -.02em;
    }

    .terms-summary span {
      color: var(--text-muted);
      font-size: .88rem;
      line-height: 1.5;
    }

    .domain-callout {
      display: grid;
      grid-template-columns: minmax(0, .62fr) minmax(260px, .38fr);
      align-items: center;
      gap: clamp(1rem, 3vw, 2.5rem);
      margin: clamp(1.25rem, 3vw, 2.25rem);
      border-radius: var(--radius-lg);
      background: var(--accent-soft);
      padding: clamp(1.3rem, 3vw, 2.25rem);
    }

    .terms-label {
      color: var(--accent-text);
      font-size: .72rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .1em;
    }

    .domain-callout h3 {
      margin-top: .35rem;
      font-size: clamp(1.8rem, 4vw, 3.2rem);
      font-weight: 890;
      line-height: 1;
      letter-spacing: -.03em;
      text-wrap: balance;
    }

    .domain-callout > p {
      color: var(--text-muted);
      font-size: 1rem;
      line-height: 1.7;
    }

    .ownership-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      padding: 0 clamp(1.25rem, 3vw, 2.25rem);
    }

    .ownership-card {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--bg-muted);
      padding: clamp(1.15rem, 2vw, 1.6rem);
    }

    .ownership-card h3 {
      margin-top: .45rem;
      font-size: 1.08rem;
      font-weight: 860;
      letter-spacing: -.01em;
    }

    .ownership-card > p:last-child {
      margin-top: .55rem;
      color: var(--text-muted);
      font-size: .9rem;
      line-height: 1.65;
    }

    .buyout {
      margin: clamp(1.25rem, 3vw, 2.25rem);
      border-block: 1px solid var(--line);
      padding-block: clamp(1.25rem, 3vw, 2.25rem);
    }

    .buyout-heading {
      display: grid;
      grid-template-columns: minmax(0, .58fr) minmax(260px, .42fr);
      align-items: end;
      gap: clamp(1rem, 3vw, 2.5rem);
    }

    .buyout-heading h3 {
      margin-top: .35rem;
      font-size: clamp(1.75rem, 3.5vw, 2.8rem);
      font-weight: 890;
      line-height: 1;
      letter-spacing: -.03em;
    }

    .buyout-heading > p {
      color: var(--text-muted);
      font-size: .94rem;
      line-height: 1.65;
    }

    .buyout-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: .65rem;
      margin-top: 1.25rem;
    }

    .buyout-grid > div {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--bg-muted);
      padding: 1rem;
    }

    .buyout-grid dt {
      color: var(--text-muted);
      font-size: .76rem;
      font-weight: 750;
      line-height: 1.4;
    }

    .buyout-grid dd {
      margin: .35rem 0 0;
      font-size: clamp(1.15rem, 2vw, 1.45rem);
      font-weight: 880;
      letter-spacing: -.02em;
    }

    .buyout-note {
      margin-top: .9rem;
      color: var(--text-muted);
      font-size: .82rem;
      line-height: 1.6;
    }

    .terms-billing {
      margin: clamp(1.25rem, 3vw, 2.25rem);
      color: var(--text-muted);
      font-size: .94rem;
      line-height: 1.7;
    }

    .terms-billing strong,
    .terms-ending strong {
      color: var(--text);
    }

    .terms-details {
      border-top: 1px solid var(--line);
    }

    .terms-details summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      cursor: pointer;
      list-style: none;
      padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.25rem, 3vw, 2.25rem);
      font-size: 1.05rem;
      font-weight: 850;
    }

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

    .terms-details summary::after {
      content: "+";
      flex: 0 0 auto;
      color: var(--accent-text);
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 1;
    }

    .terms-details[open] summary::after {
      content: "−";
    }

    .terms-details-note {
      margin-left: auto;
      color: var(--text-muted);
      font-size: .82rem;
      font-weight: 700;
    }

    .terms-details-body {
      border-top: 1px solid var(--line);
      padding: clamp(1.25rem, 3vw, 2.25rem);
    }

    .offboarding-list {
      counter-reset: offboarding;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .75rem 1.5rem;
    }

    .offboarding-list li {
      counter-increment: offboarding;
      display: grid;
      grid-template-columns: 1.8rem minmax(0, 1fr);
      gap: .7rem;
      color: var(--text-muted);
      font-size: .92rem;
      line-height: 1.6;
    }

    .offboarding-list li::before {
      content: counter(offboarding);
      width: 1.8rem;
      height: 1.8rem;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent-text);
      font-size: .75rem;
      font-weight: 900;
    }

    .terms-ending {
      margin-top: 1.25rem;
      border-top: 1px solid var(--line);
      padding-top: 1.25rem;
      color: var(--text-muted);
      font-size: .9rem;
      line-height: 1.7;
    }

    /* C120: FAQ list built from native <details> so it works without JavaScript. */
    .faq-layout {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    .faq-group > h3 {
      margin-bottom: .85rem;
      font-size: .8rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .1em;
    }

    .faq {
      display: grid;
      gap: .5rem;
      max-width: 62rem;
    }

    .faq-layout .faq {
      max-width: none;
    }

    .faq-item {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: color-mix(in srgb, var(--bg-elevated), transparent 6%);
      padding: 0 clamp(1rem, 2vw, 1.6rem);
      transition: border-color .3s ease, background .3s ease;
    }

    .faq-item[open] {
      border-color: color-mix(in srgb, var(--accent), var(--line) 62%);
    }

    .faq-item.is-animating {
      overflow: hidden;
      will-change: height;
    }

    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      cursor: pointer;
      list-style: none;
      padding: 1.15rem 0;
      font-size: clamp(1rem, 1.5vw, 1.14rem);
      font-weight: 830;
      letter-spacing: -.01em;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      content: "";
      width: 11px;
      height: 11px;
      flex: 0 0 auto;
      border-bottom: 2.5px solid var(--accent);
      border-right: 2.5px solid var(--accent);
      transform: translateY(-3px) rotate(45deg);
      transition: transform .28s var(--ease-out);
    }

    .faq-item[open]:not(.is-closing) summary::after {
      transform: translateY(2px) rotate(225deg);
    }

    .faq-item > p {
      max-width: 74ch;
      padding: 0 0 1.3rem;
      color: var(--text-muted);
      font-size: .98rem;
      line-height: 1.75;
    }

    /* C120: Closing call to action. */
    .closing {
      width: min(100% - 2rem, var(--max-wide));
      margin: 0 auto clamp(4rem, 8vw, 7rem);
      overflow: hidden;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-xl);
      background:
        radial-gradient(70% 130% at 12% 0%, var(--accent-soft), transparent 60%),
        color-mix(in srgb, var(--bg-elevated), transparent 2%);
      box-shadow: var(--shadow-soft);
      scroll-margin-top: 90px;
    }

    .closing-inner {
      display: grid;
      justify-items: center;
      gap: 1rem;
      padding: clamp(3rem, 7vw, 6rem) clamp(1.2rem, 4vw, 3rem);
      text-align: center;
    }

    .closing h2 {
      max-width: 20ch;
      font-size: clamp(2.1rem, 5vw, 4rem);
      font-weight: 880;
      line-height: 1.02;
      letter-spacing: -.03em;
      text-wrap: balance;
    }

    .closing-copy {
      max-width: 56ch;
      color: var(--text-muted);
      font-size: 1.04rem;
      line-height: 1.75;
    }

    .closing-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .7rem;
      margin-top: 1rem;
    }

    /* C004/C002: Shared footer sizing; chrome comes from ../site-shell.css. */
    .site-footer {
      width: min(100% - 2rem, var(--max-wide));
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      border-top: 1px solid var(--line);
      padding: 1.5rem 0 2rem;
      color: var(--text-muted);
      font-size: .9rem;
    }

    /* C120: Motion. Everything below is opt-in and disabled for reduced-motion users. */
    @media (prefers-reduced-motion: no-preference) {
      .hero .eyebrow,
      .hero h1,
      .hero-copy,
      .hero-actions,
      .hero-facts,
      .hero-stage {
        opacity: 0;
        animation: page-rise .82s var(--ease-soft) both;
      }

      .hero h1 { animation-delay: .07s; }
      .hero-copy { animation-delay: .14s; }
      .hero-actions { animation-delay: .21s; }
      .hero-facts { animation-delay: .28s; }

      .hero-stage {
        animation: stage-rise 1.15s var(--ease-soft) .12s both;
      }

      /* C120: Reveal/stagger classes are activated by websites/script.js. */
      .motion-ready .reveal {
        opacity: 0;
        transform: translateY(38px);
        filter: blur(5px);
        transition: opacity .85s var(--ease-soft), transform .85s var(--ease-soft), filter .75s var(--ease-soft);
      }

      .motion-ready .reveal.in-view {
        opacity: 1;
        transform: none;
        filter: none;
      }

      .motion-ready .project.reveal,
      .motion-ready .plan.reveal,
      .motion-ready .founding.reveal,
      .motion-ready .terms-panel.reveal,
      .motion-ready .closing.reveal {
        transform: translateY(46px) scale(.982);
      }

      .motion-ready .project.reveal.in-view,
      .motion-ready .plan.reveal.in-view,
      .motion-ready .founding.reveal.in-view,
      .motion-ready .terms-panel.reveal.in-view,
      .motion-ready .closing.reveal.in-view {
        transform: none;
      }

      .motion-ready .split-copy.reveal {
        transform: translateX(-42px);
      }

      .motion-ready .split-media.reveal {
        transform: translateX(42px) scale(.975);
      }

      .motion-ready .split-copy.reveal.in-view,
      .motion-ready .split-media.reveal.in-view {
        transform: none;
      }

      .motion-ready .stagger > * {
        opacity: 0;
        transform: translateY(26px) scale(.985);
        transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
        transition-delay: calc(var(--i, 0) * 70ms);
      }

      .motion-ready .stagger.in-view > * {
        opacity: 1;
        transform: none;
      }

      .motion-ready .project .project-body > *,
      .motion-ready .plan.reveal .plan-grid > * {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .62s var(--ease-soft), transform .62s var(--ease-soft);
      }

      .motion-ready .project.in-view .project-body > *,
      .motion-ready .plan.reveal.in-view .plan-grid > * {
        opacity: 1;
        transform: none;
      }

      .motion-ready .project.in-view .project-body > *:nth-child(2),
      .motion-ready .plan.reveal.in-view .plan-grid > *:nth-child(2) { transition-delay: 80ms; }
      .motion-ready .project.in-view .project-body > *:nth-child(3),
      .motion-ready .plan.reveal.in-view .plan-grid > *:nth-child(3) { transition-delay: 150ms; }
      .motion-ready .project.in-view .project-body > *:nth-child(4) { transition-delay: 220ms; }
      .motion-ready .project.in-view .project-body > *:nth-child(5) { transition-delay: 290ms; }

      html.theme-transitioning .device-screen picture {
        animation: screenshot-theme-swap .52s var(--ease-soft) both;
      }

      .ask-row {
        transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft), border-color .3s ease, padding-left .35s var(--ease-out);
      }

      .ask-row:hover {
        border-color: color-mix(in srgb, var(--accent), var(--line) 55%);
        padding-left: .9rem;
      }

      /* C120: Scroll-linked polish where the browser supports view() timelines. */
      @supports (animation-timeline: view()) {
        .hero-stage {
          animation: stage-rise 1.15s var(--ease-soft) .12s both, stage-drift linear both;
          animation-timeline: auto, view();
          animation-range: normal, contain 0% cover 100%;
        }

        .project-device .device-screen:not(.device-screen--archive) img,
        .split-media .device-screen:not(.device-screen--archive) img {
          animation: screen-settle linear both;
          animation-timeline: view();
          animation-range: cover 8% cover 56%;
        }

        .growth::after {
          transition: none;
          transform: scaleX(0);
          animation: rail-fill linear both;
          animation-timeline: view();
          animation-range: cover 22% cover 62%;
        }
      }
    }

    @keyframes page-rise {
      from { opacity: 0; transform: translateY(22px); }
      to { opacity: 1; transform: none; }
    }

    @keyframes stage-rise {
      from { opacity: 0; transform: translateY(52px) scale(.96); }
      to { opacity: 1; transform: none; }
    }

    @keyframes stage-drift {
      from { translate: 0 3%; }
      to { translate: 0 -3%; }
    }

    /* The screenshot settles out of a slight zoom; it never goes below 1, so no edge shows. */
    @keyframes screen-settle {
      from { transform: scale(1.07); }
      to { transform: none; }
    }

    @keyframes rail-fill {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    @keyframes screenshot-theme-swap {
      from { opacity: .35; transform: scale(1.012); }
      to { opacity: 1; transform: none; }
    }

    /* C120: Responsive steps mirror the rest of the site's breakpoints. */
    @media (max-width: 1080px) {
      .care-grid,
      .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .plan-head {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .plan-head .button {
        grid-column: 1 / -1;
        justify-self: start;
      }

      .growth {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2.4rem;
      }

      .growth::before,
      .growth::after {
        display: none;
      }

      .growth-step {
        padding-top: 0;
        padding-left: 2rem;
      }

      .growth-dot {
        top: .45rem;
        background: var(--accent);
      }

      .terms-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        border-bottom: 0;
        padding: 1rem;
      }

      .terms-summary li {
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--bg-muted);
      }

      .terms-summary li + li {
        border-left: 1px solid var(--line);
      }

      .buyout-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (max-width: 900px) {
      .hero-inner,
      .split,
      .project,
      .section-heading {
        grid-template-columns: 1fr;
      }

      .hero-inner {
        gap: clamp(2.5rem, 7vw, 3.5rem);
      }

      .section-heading {
        align-items: start;
        gap: 1.1rem;
      }

      .hero-stage {
        width: min(100%, 560px);
        margin-inline: auto;
      }

      .project:nth-child(even) .project-visual {
        order: 0;
      }

      .project-visual {
        width: min(100%, 560px);
        margin-inline: auto;
      }

      .split-media {
        width: min(100%, 560px);
        margin-inline: auto;
      }

      .domain-callout,
      .buyout-heading,
      .ownership-grid,
      .faq-layout {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      .care-grid,
      .steps,
      .plan-grid,
      .growth {
        grid-template-columns: 1fr;
      }

      .ask-row {
        grid-template-columns: 1fr;
        gap: .3rem;
      }

      .ask-a {
        white-space: normal;
      }

      .hero-facts {
        gap: 1.1rem 1.6rem;
      }

      .terms-summary,
      .offboarding-list {
        grid-template-columns: 1fr;
      }

      .buyout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .buyout-grid > div:last-child {
        grid-column: 1 / -1;
      }

      .terms-details-note {
        display: none;
      }

      .nav-actions .nav-link {
        display: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }

      .reveal,
      .stagger > * {
        opacity: 1;
        transform: none;
      }

      .growth::after {
        transform: scaleX(1);
      }
    }