:root {
      --ink: #f7f3e8;
      --paper: #0b0b0b;
      --cream: #151515;
      --line: rgba(247,243,232,.32);
      --muted: #bdb8a6;
      --lime: #ffd400;
      --blue: #151515;
      --purple: #111111;
      --orange: #ffd400;
      --display: "Space Grotesk", sans-serif;
      --sans: "DM Sans", sans-serif;
      --mono: "DM Mono", monospace;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      overflow-x: hidden;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
    }
    a { color: inherit; text-decoration: none; }
    button, textarea { font: inherit; }
    ::selection { background: var(--lime); }

    .nav {
      width: min(1360px, calc(100% - 48px));
      height: 90px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--lime);
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font: 700 21px/1 var(--display);
      letter-spacing: -.075em;
    }
    .brand-mark {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 50%;
      background: var(--lime);
    }
    .brand-mark img {
      width: 34px;
      height: 34px;
      object-fit: contain;
    }
    .nav .brand-mark {
      position: relative;
      isolation: isolate;
      box-shadow: 0 0 0 rgba(255,212,0,0);
      transform-origin: center;
      animation: header-logo-float 4.6s ease-in-out infinite, header-logo-aura 3.8s ease-in-out infinite;
      will-change: transform, box-shadow;
      transition: filter .28s ease;
    }
    .nav .brand-mark::after {
      content: "";
      position: absolute;
      inset: -55%;
      z-index: 0;
      background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.7) 49%, rgba(255,212,0,.34) 52%, transparent 66%);
      opacity: .58;
      pointer-events: none;
      transform: translateX(-105%) rotate(18deg);
      animation: header-logo-shimmer 5.4s ease-in-out infinite;
    }
    .nav .brand-mark img {
      position: relative;
      z-index: 1;
      transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), filter .32s ease;
    }
    .nav .brand:hover .brand-mark, .nav .brand:focus-visible .brand-mark {
      filter: brightness(1.06) saturate(1.08);
    }
    .nav .brand:hover .brand-mark img, .nav .brand:focus-visible .brand-mark img {
      filter: drop-shadow(0 0 10px rgba(17,17,17,.24));
      transform: translateY(-2px) rotate(-5deg) scale(1.12);
    }
    @keyframes header-logo-float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      45% { transform: translateY(-5px) rotate(-2deg); }
      72% { transform: translateY(-2px) rotate(1.5deg); }
    }
    @keyframes header-logo-aura {
      0%, 100% { box-shadow: 0 0 0 rgba(255,212,0,0), 0 0 0 rgba(255,212,0,0); }
      45% { box-shadow: 0 0 24px rgba(255,212,0,.46), 0 0 0 5px rgba(255,212,0,.12); }
      72% { box-shadow: 0 0 15px rgba(255,212,0,.32), 0 0 0 2px rgba(255,212,0,.08); }
    }
    @keyframes header-logo-shimmer {
      0%, 58%, 100% { transform: translateX(-105%) rotate(18deg); opacity: 0; }
      68% { opacity: .62; }
      84% { transform: translateX(105%) rotate(18deg); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .nav .brand-mark, .nav .brand-mark::after,
      footer .brand-mark, footer .brand-mark::after {
        animation: none;
      }
    }
    .nav-links {
      display: flex;
      gap: 31px;
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 13px;
      font-weight: 600;
    }
    .nav-links a, .login {
      position: relative;
      isolation: isolate;
      outline: none;
      transition: color .24s ease, opacity .24s ease, transform .24s cubic-bezier(.2, .8, .2, 1), text-shadow .24s ease;
    }
    .nav-links a {
      display: inline-flex;
      align-items: center;
      padding-bottom: 5px;
    }
    .nav-links a::after, .login::after {
      content: "";
      height: 1px;
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 999px;
      background: var(--lime);
      box-shadow: 0 0 12px rgba(255,212,0,.34);
      opacity: 0;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .22s ease;
    }
    .login::after { bottom: -7px; }

    .nav-links a:hover, .nav-links a:focus-visible,
    .login:hover, .login:focus-visible, .login:active {
      color: var(--lime);
      opacity: 1;
      text-shadow: 0 0 14px rgba(255,212,0,.18);
      transform: translateY(-2px);
    }
    .nav-links a:hover::after, .nav-links a:focus-visible::after,
    .login:hover::after, .login:focus-visible::after, .login:active::after {
      opacity: 1;
      transform: scaleX(1);
      transform-origin: left;
    }
    .nav-links a:focus-visible, .login:focus-visible {
      outline: 2px solid rgba(255,212,0,.45);
      outline-offset: 7px;
      border-radius: 999px;
    }
    .nav-links a:active, .login:active { transform: translateY(0); }
    .mobile-menu { display: none; }
    .mobile-home {
      display: none;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.03);
      color: inherit;
      font: 700 12px/1 "DM Sans", sans-serif;
      letter-spacing: 0;
      text-decoration: none;
      white-space: nowrap;
      transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
    }
    .mobile-home:hover, .mobile-home:focus-visible {
      background: var(--lime);
      border-color: var(--lime);
      color: #111111;
      transform: translateY(-1px);
    }
    .mobile-home:focus-visible {
      outline: 2px solid rgba(255,212,0,.45);
      outline-offset: 3px;
    }
    .nav-actions { display: flex; align-items: center; gap: 22px; }
    .language-switch { position: relative; display: inline-block; margin-right: 14px; color: var(--ink); font: 600 10px "DM Mono", monospace; letter-spacing: .08em; white-space: nowrap; z-index: 20; }
    .language-switch summary { display: inline-flex; align-items: center; gap: 7px; min-width: 78px; height: 32px; box-sizing: border-box; padding: 0 9px; border: 1px solid rgba(247,243,232,.34); border-radius: 5px; background: rgba(247,243,232,.06); color: var(--ink); cursor: pointer; list-style: none; transition: border-color .2s ease, background .2s ease, color .2s ease; }
    .language-switch summary::-webkit-details-marker { display: none; }
    .language-switch summary::marker { display: none; }
    .language-switch summary:hover { border-color: var(--lime); background: rgba(255,212,0,.08); }
    .language-switch summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
    .language-switch .language-globe { display: inline-flex; width: 14px; height: 14px; color: var(--lime); line-height: 1; }
    .language-switch .language-globe svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .language-switch .language-chevron { margin-left: auto; color: var(--lime); font-size: 11px; line-height: 1; }
    .language-options { position: absolute; top: calc(100% + 7px); right: 0; display: grid; min-width: 118px; padding: 5px; border: 1px solid rgba(247,243,232,.3); border-radius: 5px; background: #151515; box-shadow: 0 10px 24px rgba(0,0,0,.32), 0 0 0 1px rgba(255,212,0,.08); }
    .language-options a { display: block; padding: 8px 9px; border-left: 2px solid transparent; border-radius: 3px; color: var(--ink); text-decoration: none; }
    .language-options a:hover, .language-options a:focus-visible { border-left-color: var(--lime); background: #242424; color: var(--lime); }
    .language-options a[aria-current="page"] { border-left-color: var(--lime); color: var(--lime); }
    @media (max-width: 900px) {
      .language-switch { display: inline-block; flex: 0 0 auto; margin-right: 0; }
      .language-switch summary { min-width: 72px; }
    }
    @media (max-width: 520px) {
      .language-switch summary { min-width: 64px; gap: 5px; padding: 0 7px; }
      .language-switch .language-globe, .language-switch .language-globe svg { width: 13px; height: 13px; }
    }
    @media (max-width: 360px) {
      .language-switch summary { min-width: 58px; gap: 4px; padding: 0 6px; }
      .language-switch .language-globe, .language-switch .language-globe svg { width: 12px; height: 12px; }
    }
    @media (min-width: 901px) {
      body.sweetduck-blog > header.nav { position: relative; }
      body.sweetduck-blog > header.nav > nav { position: absolute; left: 50%; transform: translateX(-50%); }
    }
    .login { display: inline-flex; align-items: center; gap: 5px; font: 600 13px/1 "DM Sans", sans-serif; letter-spacing: 0; text-transform: none; font-style: normal; font-kerning: normal; font-optical-sizing: auto; font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 18px;
      border: 1px solid var(--lime);
      border-radius: 999px;
      background: var(--lime);
      color: #111111;
      font: 700 13px/1 "DM Sans", sans-serif;
      letter-spacing: 0;
      text-transform: none;
      font-style: normal;
      font-kerning: normal;
      font-optical-sizing: auto;
      font-synthesis: none;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      transition: transform .2s ease, background .2s ease, color .2s ease;
    }
    .button:hover {
      background: #ffe34d;
      color: #111111;
      transform: translateY(-2px);
    }
    .nav-actions .button {
      transition: transform .24s cubic-bezier(.2, .8, .2, 1), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .24s ease;
    }
    .nav-actions .button:hover, .nav-actions .button:focus-visible {
      background: #ffe34d;
      color: #111111;
      box-shadow: 0 0 18px rgba(255,212,0,.22);
      transform: translateY(-2px);
    }
    .nav-actions .button:focus-visible {
      outline: 2px solid rgba(255,212,0,.45);
      outline-offset: 4px;
    }

    .hero {
      width: min(1360px, calc(100% - 48px));
      min-height: 685px;
      position: relative;
      overflow: hidden;
      margin: 24px auto 0;
      padding: 30px;
      border-radius: 24px;
      background: var(--blue);
    }


    .hero-grid {
      position: absolute;
      inset: 0;
      opacity: .32;
      background-image: linear-gradient(rgba(247,243,232,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(247,243,232,.3) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: linear-gradient(105deg, black 8%, transparent 73%);
    }
    .hero-top, .hero-content, .prompt-card, .hero-foot { position: relative; z-index: 1; }
    .hero-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font: 500 11px var(--mono);
      letter-spacing: .07em;
      text-transform: uppercase;
    }
    .status { display: inline-flex; align-items: center; gap: 8px; }
    .status i {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--orange);
    }
    .hero-content {
      max-width: 865px;
      margin: 25px auto 0;
      text-align: center;
    }
    h1, h2, h3, p { margin-top: 0; }
    h1, .hero-wordmark {
      margin-bottom: 23px;
      font: 700 clamp(61px, 8.1vw, 116px)/.89 var(--display);
      letter-spacing: -.09em;
    }
    h1 span, .hero-wordmark span, .cta h2 span, .showcase h3 span, .pricing-head h2 .scale-pill {
      display: inline-block;
      padding: 0 .11em .05em;
      border-radius: 999px;
      background: var(--lime);
      color: #111111;
      transform: rotate(-3deg);
    }
    .hero-duck-logo {
      width: .48em;
      height: .48em;
      margin: 0 -.04em 0 .02em;
      vertical-align: middle;
      object-fit: contain;
    }
    .hero-copy {
      max-width: 760px;
      margin: 68px auto 0;
      font: 700 clamp(16px, 1.65vw, 23px)/1.05 var(--display);
      letter-spacing: -.045em;
      text-wrap: balance;
    }
    .prompt-card {
      width: min(680px, 100%);
      margin: 68px auto 0;
      padding: 12px 12px 12px 21px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      border: 1px solid #111111;
      border-radius: 16px;
      background: #fff;
      box-shadow: 7px 7px 0 #111111;
    }
    .prompt-icon {
      width: 24px;
      height: 24px;
      display: grid;
      flex: 0 0 24px;
      place-items: center;
      border: 0;
      border-radius: 50%;
      background: var(--orange);
      color: #111111;
      cursor: pointer;
      font: 500 19px/1 var(--sans);
      line-height: 1;
      transform: translateY(0) scale(1);
      transition: transform .22s cubic-bezier(.2, .8, .2, 1), background .2s ease, color .2s ease, box-shadow .22s ease, filter .2s ease;
    }
    .prompt-icon:hover, .prompt-icon:focus-visible {
      background: #ffe34d;
      box-shadow: 0 0 0 4px rgba(255,212,0,.16), 0 0 14px rgba(255,212,0,.2);
      transform: translateY(-1px) scale(1.04);
    }
    .prompt-icon:focus-visible {
      outline: 2px solid rgba(255,212,0,.72);
      outline-offset: 3px;
    }
    .prompt-icon:active {
      box-shadow: 0 0 0 2px rgba(255,212,0,.18);
      transform: translateY(0) scale(.94);
    }
    .prompt-attach-button {
      position: relative;
    }
    @media (hover: hover) and (pointer: fine) {
      .prompt-attach-button::before,
      .prompt-attach-button::after {
        position: absolute;
        left: -8px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(4px);
        transition: opacity .18s ease, transform .18s ease;
      }
      .prompt-attach-button::before {
        content: "";
        bottom: calc(100% + 4px);
        border: 6px solid transparent;
        border-top-color: #111111;
      }
      .prompt-attach-button::after {
        content: "Attach an image or document from your device.";
        width: max-content;
        max-width: calc(100vw - 48px);
        bottom: calc(100% + 15px);
        padding: 8px 10px;
        border: 1px solid rgba(255,212,0,.55);
        border-radius: 9px;
        background: #111111;
        color: var(--ink);
        box-shadow: 4px 4px 0 rgba(0,0,0,.32), 0 0 18px rgba(255,212,0,.12);
        font: 600 11px/1.25 var(--sans);
        letter-spacing: -.01em;
        text-align: left;
        white-space: nowrap;
      }
      .prompt-attach-button:hover::before,
      .prompt-attach-button:hover::after {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .prompt-file-input { display: none; }
    .prompt-attachment-row {
      width: 100%;
      min-height: 20px;
      display: flex;
      flex: 0 0 100%;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: -2px 0 0 36px;
      color: #747574;
      font: 500 10px/1.35 var(--mono);
      letter-spacing: .025em;
    }
    .prompt-attachment-helper {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .prompt-file-chip {
      max-width: min(260px, 48%);
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 7px;
      padding: 4px 5px 4px 9px;
      border: 1px solid rgba(17,17,17,.16);
      border-radius: 999px;
      background: rgba(255,212,0,.18);
      color: #111111;
      font: 700 10px/1 var(--sans);
      letter-spacing: -.01em;
      text-align: left;
    }
    .prompt-file-chip[hidden] { display: none; }
    .prompt-file-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .prompt-file-remove {
      width: 18px;
      height: 18px;
      display: inline-flex;
      flex: 0 0 18px;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid rgba(17,17,17,.22);
      border-radius: 50%;
      background: #111111;
      color: var(--lime);
      cursor: pointer;
      font: 700 0/1 var(--sans);
      text-align: center;
      transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .prompt-file-remove::before {
      content: "×";
      display: block;
      font: 700 13px/1 var(--sans);
      line-height: 1;
    }
    .prompt-file-remove:hover, .prompt-file-remove:focus-visible {
      background: var(--lime);
      color: #111111;
      box-shadow: 0 0 0 3px rgba(255,212,0,.18);
      transform: scale(1.05);
    }
    .prompt-file-remove:focus-visible {
      outline: 2px solid rgba(17,17,17,.45);
      outline-offset: 2px;
    }
    .prompt-file-remove:active { transform: scale(.92); }
    .prompt-card textarea {
      min-width: 0;
      min-height: 40px;
      flex: 1;
      padding: 9px 0;
      border: 0;
      outline: 0;
      resize: none;
      background: transparent;
      color: #111111;
      font-size: 14px;
    }
    .prompt-card textarea::placeholder { color: #747574; opacity: 1; }
    .prompt-voice-button {
      width: 40px;
      height: 40px;
      position: relative;
      display: grid;
      flex: 0 0 40px;
      place-items: center;
      border: 1px solid rgba(17,17,17,.28);
      border-radius: 50%;
      background: #111111;
      color: var(--lime);
      cursor: pointer;
      box-shadow: 2px 2px 0 rgba(17,17,17,.18);
      transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
    }
    .prompt-voice-button svg {
      width: 18px;
      height: 18px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .prompt-voice-button:hover:not(:disabled), .prompt-voice-button:focus-visible {
      border-color: #111111;
      background: var(--lime);
      color: #111111;
      box-shadow: 3px 3px 0 rgba(17,17,17,.22), 0 0 16px rgba(255,212,0,.22);
      transform: translateY(-2px);
    }
    .prompt-voice-button:focus-visible {
      outline: 2px solid rgba(255,212,0,.65);
      outline-offset: 3px;
    }
    .prompt-voice-button[data-state="listening"] {
      border-color: #111111;
      background: var(--lime);
      color: #111111;
      box-shadow: 0 0 0 5px rgba(255,212,0,.2), 3px 3px 0 rgba(17,17,17,.24);
      animation: prompt-mic-pulse 1.15s ease-in-out infinite;
    }
    .prompt-voice-button[data-state="processing"] {
      background: #ffe34d;
      color: #111111;
    }
    .prompt-voice-button[data-state="error"], .prompt-voice-button[data-state="denied"], .prompt-voice-button[data-state="no-mic"] {
      background: #ff8a55;
      color: #111111;
    }
    .prompt-voice-button[data-state="unsupported"], .prompt-voice-button:disabled {
      opacity: .48;
      cursor: not-allowed;
      filter: grayscale(.25);
      transform: none;
    }
    @keyframes prompt-mic-pulse {
      50% { transform: translateY(-1px) scale(1.06); box-shadow: 0 0 0 8px rgba(255,212,0,.18), 3px 3px 0 rgba(17,17,17,.24); }
    }
    .prompt-voice-status {
      position: absolute;
      top: calc(100% + 9px);
      right: 138px;
      left: 56px;
      min-height: 14px;
      margin: 0;
      color: var(--muted);
      font: 500 10px/1.35 var(--mono);
      letter-spacing: .035em;
      pointer-events: none;
      text-align: left;
    }
    .prompt-voice-status[data-state="listening"], .prompt-voice-status[data-state="processing"], .prompt-voice-status[data-state="success"] {
      color: var(--lime);
    }
    .prompt-voice-status[data-state="denied"], .prompt-voice-status[data-state="no-mic"], .prompt-voice-status[data-state="error"] {
      color: #ff8a55;
    }
    .prompt-card .button { padding: 11px 15px; }
    @media (max-width: 1050px) {
      html.prompt-input-focused,
      body.prompt-input-focused {
        scroll-behavior: auto !important;
      }
      body.prompt-input-focused .hero {
        overflow: visible;
      }
      body.prompt-input-focused .hero-content,
      body.prompt-input-focused .prompt-card {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        translate: none !important;
        scale: 1 !important;
        animation: none !important;
      }
      body.prompt-input-focused .prompt-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        position: relative;
        z-index: 5;
        display: flex !important;
        flex-wrap: wrap;
        align-items: flex-start;
        align-content: flex-start;
        gap: 8px 9px;
        padding: 10px 11px;
        overflow: visible;
      }
      body.prompt-input-focused .prompt-icon {
        align-self: flex-start;
        margin-top: 6px;
      }
      body.prompt-input-focused .prompt-card textarea {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 72px !important;
        flex: 1 1 calc(100% - 38px);
        padding: 7px 0;
        overflow-y: auto;
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 16px;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: break-word;
      }
      body.prompt-input-focused .prompt-card .button {
        width: 100%;
        min-height: 42px;
        flex: 0 0 100%;
        margin-top: 0;
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .hero-foot {
      position: absolute;
      right: 30px;
      bottom: 27px;
      left: 30px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      font: 10px var(--mono);
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .hero-tags { display: flex; gap: 7px; margin: auto; transform: translateY(-30px); }
    .hero-tags span {
      padding: 7px 10px;
      border: 1px solid rgba(23,25,29,.55);
      border-radius: 999px;
    }

    .trusted {
      width: min(1160px, calc(100% - 48px));
      padding: 103px 0 110px;
      margin: auto;
    }
    .trusted .eyebrow, .intro .eyebrow { color: var(--lime); }
    .trusted .eyebrow {
      display: flex;
      align-items: center;
      gap: 9px;
    }
    .trusted .eyebrow::before {
      content: "";
      width: 22px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 18.2h6M9.6 21h4.8' stroke='%23111111' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M12 3.2c-3.1 0-5.6 2.35-5.6 5.35 0 1.9.92 3.25 2.2 4.45.78.73 1.18 1.56 1.18 2.58h4.44c0-1.02.4-1.85 1.18-2.58 1.28-1.2 2.2-2.55 2.2-4.45 0-3-2.5-5.35-5.6-5.35Z' stroke='%23111111' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M10.1 8.35c.36-1.15 1.13-1.86 2.3-2.12' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' opacity='.82'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
        var(--lime);
      color: #111111;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 12px rgba(255,212,0,.22);
    }
    .eyebrow {
      margin-bottom: 24px;
      color: var(--muted);
      font: 500 11px var(--mono);
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .logos {
      overflow: hidden;
      padding-top: 28px;
      padding-bottom: 28px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      font: 10px var(--mono);
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .logos-track {
      width: max-content;
      display: flex;
      align-items: center;
      gap: 70px;
      animation: logo-marquee 12s linear infinite;
    }
    .logos:hover .logos-track { animation-play-state: paused; }
    .logos-track span, .logos-track a {
      display: block;
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .logos-track a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .logos-track a::before {
      content: "";
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
      background: var(--lime);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9S14.5 18.5 12 21c-2.5-2.5-3.8-5.5-3.8-9S9.5 5.5 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9S14.5 18.5 12 21c-2.5-2.5-3.8-5.5-3.8-9S9.5 5.5 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    .logos-track a:hover { color: var(--lime); }
    @keyframes logo-marquee {
      to { transform: translateX(calc(-50% - 35px)); }
    }

    .intro {
      width: min(1160px, calc(100% - 48px));
      padding-bottom: 105px;
      margin: auto;
    }
    .intro-grid {
      display: grid;
      grid-template-columns: 1fr .79fr;
      gap: 110px;
      align-items: end;
    }
    h2 {
      margin-bottom: 0;
      font: 700 clamp(49px, 6.1vw, 83px)/.9 var(--display);
      letter-spacing: -.09em;
    }
    .intro-copy {
      max-width: 430px;
      margin-bottom: 5px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.47;
      letter-spacing: -.025em;
    }

    .showcase {
      width: min(1360px, calc(100% - 48px));
      min-height: 341px;
      position: relative;
      overflow: hidden;
      margin: auto;
      padding: 31px;
      border-radius: 24px;
      background: var(--lime);
      color: #111111;
    }

    .showcase-label, .showcase h3, .browser { position: relative; z-index: 1; }
    .showcase-label {
      display: flex;
      justify-content: space-between;
      font: 500 11px var(--mono);
      letter-spacing: .07em;
      text-transform: uppercase;
    }
    .showcase h3 {
      max-width: 460px;
      margin: 38px 0 0;
      font: 700 clamp(42px, 4.6vw, 64px)/.88 var(--display);
      letter-spacing: -.09em;
    }
    .brain-scene {
      width: min(360px, 36%);
      height: 200px;
      position: absolute;
      right: min(420px, calc(36% + 30px));
      bottom: 31px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid #111111;
      border-radius: 15px 15px 0 0;
      background: #ffffff;
      box-shadow: 8px 8px 0 #111111;
    }
    .brain-scene::before {
      content: "IDEAS IN MOTION";
      position: absolute;
      z-index: 5;
      top: 19px;
      right: 0;
      left: 0;
      text-align: center;
      color: #111111;
      font: 500 10px var(--mono);
      letter-spacing: .1em;
    }
    .brain-scene::after {
      content: "";
      width: 310px;
      height: 190px;
      position: absolute;
      z-index: 0;
      top: 54px;
      border: 1px dashed rgba(255,248,216,.38);
      border-radius: 50%;
    }
    .brain-art {
      width: 205px;
      position: relative;
      z-index: 3;
      margin-top: 22px;
      filter: drop-shadow(6px 7px 0 #111111);
      animation: brain-bob 2s ease-in-out infinite;
    }
    .satellite {
      position: absolute;
      z-index: 4;
      top: 54px;
      right: 58px;
      bottom: 18px;
      left: 58px;
      border: 1px solid rgba(255,248,216,.18);
      border-radius: 50%;
      animation: orbit 6s linear infinite;
    }
    .satellite-two {
      top: 73px;
      right: 92px;
      bottom: 35px;
      left: 92px;
      animation-duration: 4.5s;
      animation-direction: reverse;
    }
    .satellite-three {
      top: 42px;
      right: 31px;
      bottom: 8px;
      left: 31px;
      border-color: transparent;
      animation-duration: 7.5s;
    }
    .idea {
      width: 42px;
      height: 42px;
      position: absolute;
      display: grid;
      place-items: center;
      border: 1px solid #111111;
      border-radius: 50%;
      background: var(--lime);
      color: #111111;
      box-shadow: 3px 3px 0 rgba(0,0,0,.45);
      font: 700 19px/1 var(--display);
    }
    .satellite-one .idea { top: -21px; left: calc(50% - 21px); }
    .satellite-two .idea { right: -21px; bottom: calc(50% - 21px); background: #ff8a55; }
    .satellite-three .idea { bottom: -21px; left: calc(50% - 21px); background: #b8a6ff; }
    .business-scene {
      width: min(360px, 36%);
      height: 200px;
      position: absolute;
      right: 31px;
      bottom: 31px;
      overflow: hidden;
      padding: 20px;
      border: 1px solid #111111;
      border-radius: 15px 15px 0 0;
      background: #ffffff;
      color: #111111;
      box-shadow: 8px 8px 0 #111111;
    }
    .business-scene::before {
      content: "BUSINESS SUCCESS";
      position: absolute;
      top: 20px;
      right: 0;
      left: 0;
      text-align: center;
      color: #111111;
      font: 500 10px var(--mono);
      letter-spacing: .1em;
    }
    .business-stat {
      margin-top: 24px;
      font: 700 clamp(33px, 3vw, 48px)/.8 var(--display);
      letter-spacing: -.09em;
    }
    .business-stat small {
      margin-left: 4px;
      color: var(--lime);
      font: 700 17px var(--display);
    }
    .business-chart {
      height: 89px;
      position: absolute;
      right: 18px;
      bottom: 18px;
      left: 18px;
      border-bottom: 1px solid rgba(255,248,216,.4);
    }
    .business-chart i {
      width: 9px;
      position: absolute;
      bottom: 0;
      border-radius: 5px 5px 0 0;
      background: var(--lime);
      transform-origin: bottom;
      animation: chart-rise 1.6s ease-in-out infinite;
    }
    .business-chart i:nth-child(1) { left: 3%; height: 24%; animation-delay: -.9s; }
    .business-chart i:nth-child(2) { left: 25%; height: 43%; animation-delay: -.6s; }
    .business-chart i:nth-child(3) { left: 47%; height: 65%; animation-delay: -.3s; }
    .business-chart i:nth-child(4) { left: 69%; height: 89%; }
    .business-chart b {
      position: absolute;
      top: 4px;
      right: 0;
      color: #ff8a55;
      font: 700 22px/1 var(--display);
      animation: success-bounce 1.6s ease-in-out infinite;
    }
    .business-logo {
      width: 34px;
      height: 34px;
      position: absolute;
      z-index: 1;
      bottom: calc(89% + 6px);
      left: calc(69% - 12px);
      object-fit: contain;
      filter: drop-shadow(2px 3px 0 rgba(17,17,17,.22));
      animation: business-logo-bob 1.6s ease-in-out infinite;
    }
    @keyframes business-logo-bob {
      50% { transform: translateY(-18px) rotate(16deg) scale(1.15); }
    }
    @keyframes chart-rise { 50% { transform: scaleY(.48); } }
    @keyframes success-bounce { 50% { transform: translateY(-16px) rotate(16deg) scale(1.18); } }
    @keyframes brain-bob { 50% { transform: translateY(-22px) rotate(-5deg) scale(1.06); } }
    @keyframes float { 50% { transform: translateY(-15px) rotate(12deg); } }
    @keyframes orbit { to { transform: rotate(360deg); } }

    /* Integrated alternative motion scenes */
    .brain-scene::before {
      content: "IDEA CONSTELLATION";
    }
    .brain-scene::after { display: none; }
    .idea-map {
      position: absolute;
      inset: 38px 18px 15px;
      overflow: hidden;
      border-radius: 10px;
      background:
        radial-gradient(circle at 50% 48%, rgba(255,212,0,.28) 0 5px, transparent 6px),
        linear-gradient(rgba(17,17,17,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,17,17,.07) 1px, transparent 1px);
      background-size: auto, 22px 22px, 22px 22px;
    }
    .idea-map svg {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
      overflow: visible;
    }
    .idea-map path {
      fill: none;
      stroke: #111111;
      stroke-width: 1.5;
      stroke-dasharray: 5 5;
      animation: route-flow 2.8s linear infinite;
    }
    .map-core {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      display: grid;
      place-items: center;
      border: 1px solid #111111;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 3px 3px 0 #111111, 0 0 0 0 rgba(255,212,0,.24);
      transform: translate(-50%, -50%);
      transform-origin: center;
      animation: core-pulse 1.9s ease-in-out infinite;
    }
    .map-core img {
      width: 34px;
      height: 34px;
      display: block;
      object-fit: contain;
      filter: drop-shadow(1px 1px 0 rgba(17,17,17,.2));
    }
    .idea-node {
      position: absolute;
      z-index: 3;
      padding: 7px 9px;
      border: 1px solid #111111;
      border-radius: 7px;
      background: #fff;
      box-shadow: 3px 3px 0 #111111;
      font: 700 9px/1 var(--mono);
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .idea-node i {
      width: 7px;
      height: 7px;
      display: inline-block;
      margin-right: 5px;
      border-radius: 50%;
      background: var(--lime);
    }
    .idea-node.one { top: 12px; left: 10px; animation: node-one 2.7s ease-in-out infinite; }
    .idea-node.two { bottom: 12px; left: 18px; animation: node-three 2.9s ease-in-out infinite; }
    .idea-node.three { right: 20px; bottom: 12px; animation: node-four 3.1s ease-in-out infinite; }
    .idea-node.four { top: 12px; right: 14px; animation: node-two 3.2s ease-in-out infinite; }
    @keyframes route-flow { to { stroke-dashoffset: -40; } }
    @keyframes core-pulse {
      0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 3px 3px 0 #111111, 0 0 0 0 rgba(255,212,0,.16); }
      50% { transform: translate(-50%, -50%) scale(1.12); box-shadow: 3px 3px 0 #111111, 0 0 0 10px rgba(255,212,0,.18), 0 0 22px rgba(255,212,0,.2); }
    }
    @keyframes node-one { 50% { transform: translate(7px, -5px) rotate(-2deg); } }
    @keyframes node-two { 50% { transform: translate(-7px, 6px) rotate(2deg); } }
    @keyframes node-three { 50% { transform: translate(8px, -5px) rotate(-2deg); } }
    @keyframes node-four { 50% { transform: translate(-8px, -5px) rotate(2deg); } }

    .business-scene::before {
      content: "MOMENTUM LOOP";
      z-index: 2;
    }
    .business-scene::after {
      content: "";
      width: 118px;
      height: 118px;
      position: absolute;
      top: 45px;
      left: calc(50% - 59px);
      border: 15px solid #f0eee7;
      border-top-color: #b8a6ff;
      border-right-color: #ff8a55;
      border-bottom-color: var(--lime);
      border-radius: 50%;
      animation: momentum-spin 3.4s linear infinite;
    }
    .growth-loop {
      position: absolute;
      inset: 41px 0 18px;
      display: grid;
      place-items: center;
    }
    .growth-loop span {
      width: 58px;
      height: 58px;
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      border: 1px solid #111111;
      border-radius: 50%;
      background: #b8a6ff;
      color: #111111;
      box-shadow: 3px 3px 0 #ff8a55;
      font: 700 19px/1 var(--display);
      animation: loop-heart 1.7s ease-in-out infinite;
    }
    .loop-label {
      position: absolute;
      right: 12px;
      bottom: 2px;
      left: 12px;
      display: flex;
      justify-content: space-between;
      font: 700 8px var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .loop-label b { color: #7c7900; }
    @keyframes momentum-spin { to { transform: rotate(360deg); } }
    @keyframes loop-heart {
      50% { transform: scale(1.16) rotate(-8deg); box-shadow: 0 0 0 7px rgba(184,166,255,.28), 3px 3px 0 #ff8a55; }
    }

    .brain-scene {
      width: min(390px, 31%);
      height: 275px;
      right: min(31px, 2.3%);
    }
    .business-scene {
      width: min(270px, 22%);
      right: min(31px, 2.3%);
    }
    .bright-idea-scene {
      width: min(390px, 31%);
      height: 275px;
      position: absolute;
      right: min(460px, calc(34% - 24px));
      bottom: 31px;
      overflow: hidden;
      border: 1px solid #111111;
      border-radius: 15px 15px 0 0;
      background: #ffffff;
      color: #111111;
      box-shadow: 8px 8px 0 #111111;
    }
    .bright-idea-scene::before {
      content: "BRIGHT IDEA";
      position: absolute;
      z-index: 3;
      top: 19px;
      right: 0;
      left: 0;
      text-align: center;
      font: 500 10px var(--mono);
      letter-spacing: .1em;
    }
    .bright-idea-scene::after {
      content: "";
      width: 155px;
      height: 155px;
      position: absolute;
      top: 74px;
      left: calc(50% - 77px);
      border: 1px dashed rgba(17,17,17,.25);
      border-radius: 50%;
      animation: orbit 8s linear infinite;
    }
    .bright-brain {
      width: 170px;
      position: absolute;
      z-index: 2;
      top: 88px;
      bottom: auto;
      left: calc(50% - 85px);
      filter: drop-shadow(4px 5px 0 #111111);
      animation: bright-brain-bob 2.1s ease-in-out infinite;
    }
    .bright-spark {
      width: 31px;
      height: 31px;
      position: absolute;
      z-index: 4;
      display: grid;
      place-items: center;
      border: 1px solid #111111;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 2px 3px 0 #111111;
      font: 700 15px/1 var(--display);
      animation: bright-spark 1.8s ease-in-out infinite;
    }
    .bright-spark.one { top: 59px; left: 35px; animation-delay: -.3s; }
    .bright-spark.two { top: 50px; right: 31px; background: #ff8a55; animation-delay: -.9s; }
    .bright-spark.three { right: 21px; bottom: 36px; background: #b8a6ff; animation-delay: -1.3s; }
    .bright-spark.four { left: 28px; bottom: 45px; background: #ffffff; color: #111111; animation-delay: -.55s; }
    @keyframes bright-brain-bob { 50% { transform: translateY(-11px) rotate(-3deg); } }
    @keyframes bright-spark {
      50% { transform: translateY(-12px) rotate(16deg) scale(1.14); }
    }

    .notes {
      width: min(1160px, calc(100% - 48px));
      padding: 0 0 127px;
      margin: auto;
    }
    .notes-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 46px;
    }
    .notes-head h2 { max-width: 650px; }
    .notes-head p {
      max-width: 310px;
      margin: 0 0 5px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.5;
    }
    .notes-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }
    .notes-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin-top: 30px;
    }
    .notes-pagination button {
      min-width: 38px;
      height: 38px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font: 600 12px var(--sans);
      transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
    }
    .notes-pagination button:hover:not(:disabled) {
      border-color: var(--lime);
      background: var(--lime);
      color: #111111;
      transform: translateY(-2px);
    }
    .notes-pagination button[aria-current="page"] {
      border-color: var(--lime);
      background: var(--lime);
      color: #111111;
      box-shadow: 3px 3px 0 rgba(255,212,0,.2);
    }
    .notes-pagination button:disabled {
      opacity: .35;
      cursor: not-allowed;
    }
    .notes-pagination .notes-pagination-label {
      min-width: 38px;
    }
    .note-card {
      min-height: 330px;
      position: relative;
      padding: 25px;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--cream);
      transition: transform .25s ease, background .25s ease, color .25s ease;
    }
    .note-card::before {
      content: "";
      width: 62px;
      height: 15px;
      position: absolute;
      z-index: 3;
      top: -9px;
      left: calc(50% - 31px);
      border: 1px solid #111111;
      border-radius: 5px 5px 3px 3px;
      background:
        linear-gradient(90deg, transparent 46%, #111111 46% 54%, transparent 54%),
        linear-gradient(180deg, #ffe34d 0 45%, #ffd400 46% 100%);
      box-shadow: 2px 3px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.65);
      transform: rotate(-3deg);
    }
    .note-card::after {
      content: "";
      width: 13px;
      height: 20px;
      position: absolute;
      z-index: 4;
      top: -18px;
      left: calc(50% - 6px);
      border: 3px solid #353535;
      border-bottom: 0;
      border-radius: 9px 9px 0 0;
      box-shadow: inset 2px 0 0 rgba(255,255,255,.3), 1px 1px 1px rgba(0,0,0,.35);
      transform: rotate(-3deg);
    }
    .note-card:nth-child(2)::before, .note-card:nth-child(2)::after { transform: rotate(3deg); }
    .note-card:nth-child(3)::before, .note-card:nth-child(3)::after { transform: rotate(-1deg); }
    .note-card:hover::after { border-color: #111111; }
    .note-card:hover {
      background: var(--lime);
      color: #111111;
      transform: translateY(-7px) rotate(-1deg);
    }
    .note-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font: 500 10px var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .note-card:hover .note-meta { color: #5b5100; }
    .note-number {
      width: 28px;
      height: 28px;
      position: relative;
      display: grid;
      place-items: center;
      border: 1px solid currentColor;
      border-radius: 50%;
    }


    .note-card h3 {
      margin: auto 0 18px;
      font: 700 clamp(29px, 3vw, 38px)/.94 var(--display);
      letter-spacing: -.07em;
    }
    .note-card p {
      margin: 0 0 25px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }
    .note-card:hover p { color: #433b00; }
    .note-read {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--lime);
      font-size: 13px;
      font-weight: 700;
    }
    .note-read span {
      width: 29px;
      height: 29px;
      display: grid;
      place-items: center;
      border: 1px solid currentColor;
      border-radius: 50%;
      transition: transform .2s ease;
    }
    .note-card:hover .note-read span { transform: translateX(5px); }

    .services { padding: 127px 24px; }
    .wrap { width: min(1160px, 100%); margin: auto; }
    .service-top {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 51px;
    }
    .service-top h2 { max-width: 630px; }
    .service-top p {
      max-width: 320px;
      margin: 0 0 4px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.5;
    }
    .service-list { border-top: 1px solid var(--ink); }
    .service {
      display: grid;
      grid-template-columns: 84px 1fr .85fr 42px;
      align-items: center;
      gap: 25px;
      min-height: 130px;
      border-bottom: 1px solid var(--ink);
      transition: padding .2s ease, background .2s ease;
    }
    .service:hover { padding: 0 17px; background: var(--lime); color: #111111; }
    .service:hover p { color: #3d431d; }
    .service-no { font: 11px var(--mono); }
    .service h3 { margin: 0; font: 700 29px var(--display); letter-spacing: -.065em; }
    .service p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
    .arrow {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid var(--ink);
      border-radius: 50%;
      font-size: 20px;
    }

    .pricing {
      width: min(1160px, calc(100% - 48px));
      padding: 0 0 127px;
      margin: auto;
    }
    .pricing-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 46px;
    }
    .pricing-head h2 { max-width: 620px; }
    @media (min-width: 761px) {
      .pricing-head h2 { white-space: nowrap; }
    }
    .pricing-head p {
      max-width: 310px;
      margin: 0 0 5px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.5;
    }
    .currency-selector {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "label toggle"
        "helper toggle"
        "note note";
      align-items: center;
      column-gap: 16px;
      row-gap: 1px;
      margin: -10px 0 24px;
      padding: 8px 10px 8px 12px;
      border: 1px solid rgba(247,243,232,.18);
      border-left: 2px solid var(--lime);
      border-radius: 10px;
      background: rgba(21,21,21,.72);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }
    .currency-selector-label {
      grid-area: label;
      margin: 0;
      color: var(--ink);
      font: 700 13px/1.1 var(--sans);
      letter-spacing: -.02em;
    }
    .currency-selector-helper {
      grid-area: helper;
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.25;
    }
    .currency-toggle {
      grid-area: toggle;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      margin: 0;
      padding: 2px;
      border: 1px solid rgba(247,243,232,.18);
      border-radius: 999px;
      background: rgba(11,11,11,.72);
    }
    .currency-toggle button {
      min-width: 52px;
      padding: 6px 10px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font: 700 9.5px var(--mono);
      letter-spacing: .1em;
      transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .currency-toggle button[aria-pressed="true"] {
      border-color: var(--lime);
      background: var(--lime);
      color: #111111;
      box-shadow: 1px 1px 0 rgba(255,212,0,.22);
    }
    .currency-toggle button:hover { transform: translateY(-1px); }
    .currency-selector-note {
      grid-area: note;
      margin: 3px 0 0;
      color: var(--muted);
      font: 500 8.5px/1.25 var(--mono);
      letter-spacing: .035em;
      opacity: .78;
    }
=======
    /* Responsive pricing layout refinements */
    .currency-selector > * { min-width: 0; }
    .currency-toggle { justify-self: end; }
    .pricing-plans {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      align-items: stretch;
    }
    .plan {
      min-width: 0;
      min-height: 490px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--cream);
    }
    .plan-featured {
      border-color: var(--lime);
      background: var(--lime);
      color: #111111;
      box-shadow: 7px 7px 0 #111111;
    }
    .plan-kicker {
      margin-bottom: 19px;
      color: var(--muted);
      font: 500 10px var(--mono);
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .plan-featured .plan-kicker { color: #5b5100; }
    .plan h3 {
      margin: 0 0 12px;
      font: 700 32px/.95 var(--display);
      letter-spacing: -.07em;
    }
    .plan-title-icon {
      width: 26px;
      height: 26px;
      margin: -3px 7px 0 0;
      vertical-align: middle;
      object-fit: contain;
    }
    .plan-description {
      min-height: 48px;
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }
    .plan-featured .plan-description { color: #433b00; }
    .plan-price {
      margin: 32px 0 6px;
      font: 700 52px/.9 var(--display);
      letter-spacing: -.09em;
    }
    .plan-price small {
      font: 500 13px var(--sans);
      letter-spacing: -.02em;
    }
    .credit-picker {
      position: relative;
      margin: 0 0 14px;
    }
    .plan-credits {
      width: 1px;
      height: 1px;
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .credit-picker-toggle {
      width: 100%;
      min-height: 43px;
      padding: 9px 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto 15px;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #0b0b0b;
      color: var(--ink);
      cursor: pointer;
      font: 600 12px var(--sans);
      text-align: left;
    }
    .plan-featured .credit-picker-toggle {
      border-color: rgba(17,17,17,.38);
      background: rgba(17,17,17,.92);
      color: var(--ink);
    }
    .credit-picker-current {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .credit-picker-price {
      color: var(--muted);
      font: 500 11px var(--mono);
      white-space: nowrap;
    }
    .credit-picker-toggle::after {
      content: "⌄";
      color: var(--lime);
      font: 700 16px/1 var(--sans);
      text-align: center;
      transition: transform .2s ease;
    }
    .credit-picker[open] .credit-picker-toggle::after { transform: rotate(180deg); }
    .credit-picker-menu {
      width: 100%;
      position: absolute;
      z-index: 12;
      top: calc(100% + 7px);
      left: 0;
      display: none;
      padding: 5px;
      border: 1px solid rgba(247,243,232,.2);
      border-radius: 10px;
      background: #242424;
      box-shadow: 5px 6px 0 rgba(0,0,0,.42);
    }
    .credit-picker[open] .credit-picker-menu { display: grid; }
    .credit-picker-option {
      width: 100%;
      min-height: 38px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 9px;
      padding: 7px 8px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font: 500 12px var(--sans);
      text-align: left;
    }
    .credit-picker-option:hover, .credit-picker-option[aria-selected="true"] { background: rgba(255,212,0,.12); }
    .credit-picker-amount { font-weight: 700; white-space: nowrap; }
    .credit-picker-discount {
      padding: 3px 7px;
      border-radius: 999px;
      background: var(--lime);
      color: #111111;
      font: 500 10px/1 var(--sans);
      white-space: nowrap;
    }
    .credit-picker-option-price {
      color: #d4d0c5;
      font: 500 11px var(--mono);
      white-space: nowrap;
      text-align: right;
    }
    .credit-picker-toggle:focus-visible, .credit-picker-option:focus-visible {
      outline: 2px solid var(--lime);
      outline-offset: 2px;
    }
    @media (max-width: 390px) {
      .credit-picker-toggle { gap: 7px; }
      .credit-picker-option { gap: 6px; padding-right: 6px; padding-left: 6px; }
      .credit-picker-discount { padding: 3px 5px; font-size: 9px; }
      .credit-picker-option-price, .credit-picker-price { font-size: 10px; }
    }
    .plan-note {
      min-height: 19px;
      margin: 0 0 26px;
      color: var(--muted);
      font-size: 12px;
    }
    .plan-price + .plan-note {
      margin-top: 40px;
    }
    .pricing-plans .plan:first-child .plan-note {
      margin-top: 52px;
    }
    .plan-featured .plan-note { color: #5b5100; }
    .plan .button {
      width: 100%;
      margin-bottom: 26px;
      border-color: var(--ink);
      background: transparent;
      color: var(--ink);
    }
    .plan .button:hover { background: var(--ink); color: #111111; }
    .plan-featured .button { background: #111111; border-color: #111111; color: var(--lime); }
    .plan-featured .button:hover { background: #292929; color: var(--lime); }
    .plan-features {
      margin: auto 0 0;
      padding: 23px 0 0;
      border-top: 1px solid var(--line);
      list-style: none;
    }
    .plan-featured .plan-features { border-color: rgba(17,17,17,.32); }
    .plan-features li {
      margin-top: 12px;
      padding-left: 20px;
      position: relative;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }
    .plan-featured .plan-features li { color: #332d00; }
    .plan-features li::before {
      content: "✦";
      position: absolute;
      left: 0;
      color: var(--lime);
    }
    .plan-featured .plan-features li::before { color: #111111; }
    @media (min-width: 761px) and (max-width: 1050px) {
      .currency-selector {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 18px;
      }
      .pricing-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }
      .plan {
        min-height: 500px;
        padding: 26px;
      }
    }
    @media (max-width: 760px) {
      .pricing { width: calc(100% - 32px); padding-bottom: 77px; }
      .pricing-head { display: block; margin-bottom: 33px; }
      .pricing-head p { margin-top: 23px; }
      .currency-selector {
        grid-template-columns: 1fr;
        grid-template-areas:
          "label"
          "helper"
          "toggle"
          "note";
        gap: 7px;
        margin: -4px 0 22px;
        padding: 15px;
      }
      .currency-selector-helper { max-width: 360px; }
      .currency-toggle {
        justify-self: start;
        margin-top: 4px;
      }
      .currency-toggle button {
        min-width: 72px;
        min-height: 42px;
        padding: 9px 15px;
      }
      .currency-selector-note { margin-top: 4px; }
      .pricing-plans {
        grid-template-columns: 1fr;
        gap: 18px;
      }
      .plan {
        min-height: auto;
        padding: 25px;
      }
      .plan .button {
        min-height: 48px;
      }
    }

    .cta {
      width: min(1360px, calc(100% - 48px));
      min-height: 540px;
      position: relative;
      overflow: hidden;
      margin: 0 auto 24px;
      padding: 46px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 24px;
      background: var(--blue);
      color: white;
    }
    .cta::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .32;
      background-image: linear-gradient(rgba(247,243,232,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(247,243,232,.3) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: linear-gradient(105deg, black 8%, transparent 73%);
    }

    .cta > * { position: relative; z-index: 1; }
    .cta-top {
      display: flex;
      justify-content: space-between;
      font: 500 11px var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .cta-top span:first-child { color: var(--lime); }
    .cta-main {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .cta h2 { max-width: 750px; font-size: clamp(59px, 7.7vw, 110px); }
    .cta-matter-logo {
      width: .62em;
      height: .62em;
      margin-left: -.05em;
      margin-right: -.03em;
      vertical-align: middle;
      object-fit: contain;
      animation: matter-logo-bounce 1.5s cubic-bezier(.34, 1.56, .64, 1) infinite;
      filter: drop-shadow(5px 6px 0 rgba(0,0,0,.28));
      transform-origin: center;
    }
    @keyframes matter-logo-bounce {
      0%, 100% { transform: translateY(0) rotate(-8deg) scale(1); }
      45% { transform: translateY(-.3em) rotate(18deg) scale(1.25); }
      65% { transform: translateY(.08em) rotate(-6deg) scale(.9); }
    }
    .cta-copy { width: 100%; max-width: none; margin: 22px 0 27px; display: grid; gap: 11px; font-size: 17px; line-height: 1.5; text-align: justify; }
    .cta-copy-line, .cta-copy-support {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      align-items: start;
      column-gap: 10px;
    }
    .cta-copy-reference-text {
      text-align: left;
      text-wrap: balance;
    }
    .cta-copy-keep-together {
      white-space: nowrap;
    }
    .cta-copy-support {
      margin-top: 0;
      color: inherit;
      font-size: .94em;
      line-height: 1.45;
      letter-spacing: -.015em;
      text-align: left;
    }
    .cta-copy-icon {
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      color: var(--lime);
      transform-origin: center;
      filter: drop-shadow(0 0 8px rgba(255,212,0,.22));
      animation: cta-icon-float 3.8s ease-in-out infinite;
    }
    .cta-copy-icon svg {
      width: 20px;
      height: 20px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .cta-copy-line:nth-child(2) .cta-copy-icon { animation-delay: .35s; }
    .cta-copy-line:nth-child(3) .cta-copy-icon { animation-delay: .7s; }
    .cta-copy-support .cta-copy-icon { animation-delay: 1.05s; }
    @keyframes cta-icon-float {
      0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 7px rgba(255,212,0,.18)); }
      50% { transform: translateY(-3px) scale(1.04); filter: drop-shadow(0 0 13px rgba(255,212,0,.36)); }
    }
    .cta .button { border-color: var(--lime); background: var(--lime); color: #111111; }
    .cta .button:hover { background: #ffe34d; border-color: #ffe34d; }

    footer {
      width: min(1360px, calc(100% - 48px));
      min-height: 112px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 25px;
    }
    .copyright { color: var(--muted); font: 10px var(--mono); }
    .footer-links { display: flex; gap: 20px; font-size: 12px; font-weight: 700; }
    .footer-links a:hover { text-decoration: underline; }
    footer .brand-mark {
      position: relative;
      isolation: isolate;
      box-shadow: 0 0 0 rgba(255,212,0,0);
      transform-origin: center;
      animation: header-logo-float 4.6s ease-in-out infinite, header-logo-aura 3.8s ease-in-out infinite;
      will-change: transform, box-shadow;
      transition: filter .28s ease;
    }
    footer .brand-mark::after {
      content: "";
      position: absolute;
      inset: -55%;
      z-index: 0;
      background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.7) 49%, rgba(255,212,0,.34) 52%, transparent 66%);
      opacity: .58;
      pointer-events: none;
      transform: translateX(-105%) rotate(18deg);
      animation: header-logo-shimmer 5.4s ease-in-out infinite;
    }
    footer .brand-mark img {
      position: relative;
      z-index: 1;
      transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), filter .32s ease;
    }
    footer .brand:hover .brand-mark, footer .brand:focus-visible .brand-mark {
      filter: brightness(1.06) saturate(1.08);
    }
    footer .brand:hover .brand-mark img, footer .brand:focus-visible .brand-mark img {
      filter: drop-shadow(0 0 10px rgba(17,17,17,.24));
      transform: translateY(-2px) rotate(-5deg) scale(1.12);
    }

    @media (max-width: 760px) {
      .nav { width: calc(100% - 32px); height: 73px; position: relative; }
      .nav-links, .login { display: none; }
      .mobile-menu {
        display: block;
        position: relative;
      }
      .mobile-menu summary {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 50%;
        cursor: pointer;
        list-style: none;
        font: 700 23px/1 var(--display);
      }
      .mobile-menu summary::-webkit-details-marker { display: none; }
      .mobile-menu summary::before { content: "☰"; }
      .mobile-menu[open] summary::before { content: "×"; font-size: 29px; }
      .mobile-menu ul {
        width: 210px;
        position: absolute;
        z-index: 10;
        top: calc(100% + 12px);
        right: 0;
        margin: 0;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 15px;
        background: #151515;
        box-shadow: 6px 6px 0 var(--lime);
        list-style: none;
      }
      .mobile-menu a {
        display: block;
        padding: 12px 13px;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 700;
        transition: background .22s ease, color .22s ease;
      }
      .mobile-menu a:hover, .mobile-menu a:focus-visible { background: var(--lime); color: #111111; }
      .nav-actions { gap: 10px; }
      .nav-actions .button { padding: 10px 14px; font-size: 12px; }
      .hero { width: calc(100% - 32px); min-height: 610px; margin-top: 16px; padding: 21px; border-radius: 18px; }
      .hero::before { width: 350px; top: auto; right: -155px; bottom: -124px; }
      .hero::after { width: 150px; top: 475px; right: calc(50% - 75px); }
      .hero-top { flex-wrap: wrap; gap: 7px; }
      .hero-top span:last-child { flex-basis: 100%; display: block; }
      .hero-content { margin-top: 104px; }
      h1, .hero-wordmark { font-size: clamp(43px, 12.5vw, 58px); }
      .hero-copy {
        max-width: 320px;
        white-space: normal;
        font-size: clamp(15px, 4.3vw, 19px);
        line-height: 1.08;
        letter-spacing: -.045em;
      }
      .prompt-card { margin-top: 58px; padding-left: 12px; box-shadow: 5px 5px 0 var(--ink); }
      .prompt-card .button { padding: 10px 12px; font-size: 11px; }
      .hero-foot { right: 21px; bottom: 70px; left: 21px; display: block; }
      .hero-tags { margin-top: 12px; }
      .trusted { width: calc(100% - 32px); padding: 68px 0 76px; }
      .logos { flex-wrap: wrap; justify-content: center; gap: 17px 28px; padding-top: 22px; font-size: 10px; }
      .intro { width: calc(100% - 32px); padding-bottom: 70px; }
      .intro-grid { display: block; }
      .intro-copy { margin-top: 27px; font-size: 16px; }
      .showcase { width: calc(100% - 32px); min-height: 480px; padding: 22px; border-radius: 18px; }
      .showcase h3 { margin-top: 42px; font-size: 40px; }
      .brain-scene, .business-scene { display: none; }
      .bright-idea-scene {
        width: calc(100% - 44px);
        height: 250px;
        right: 22px;
        bottom: 38px;
        display: block;
        box-shadow: 5px 5px 0 var(--ink);
      }
      .bright-idea-scene::after {
        width: 175px;
        height: 175px;
        top: 71px;
        left: calc(50% - 87px);
        animation-duration: 6s;
      }
      .bright-brain {
        width: 185px;
        top: 89px;
        bottom: auto;
        left: calc(50% - 92.5px);
        animation-duration: 1.7s;
      }
      .bright-spark { width: 35px; height: 35px; font-size: 17px; }
      .bright-spark.one { top: 59px; left: 28px; }
      .bright-spark.two { top: 49px; right: 25px; }
      .bright-spark.three { right: 17px; bottom: 27px; }
      .bright-spark.four { left: 20px; bottom: 31px; }
      .brain-art { width: 175px; }
      .brain-scene::after { width: 270px; height: 270px; }
      .idea { width: 37px; height: 37px; font-size: 17px; }
      .idea-one { top: 43px; right: 47px; }
      .idea-two { right: 20px; bottom: 48px; }
      .idea-three { bottom: 14px; left: 40px; }
      .services { padding: 77px 16px; }
      .service-top { display: block; margin-bottom: 35px; }
      .service-top p { margin-top: 23px; }
      .service { grid-template-columns: 46px 1fr 38px; gap: 12px; padding: 20px 0; }
      .service:hover { padding: 20px 10px; }
      .service h3 { font-size: 23px; }
      .service p { grid-column: 2 / 4; }
      .cta { width: calc(100% - 32px); min-height: 455px; padding: 27px; border-radius: 18px; }
      .cta h2 { font-size: clamp(53px, 14vw, 75px); }
      .cta-copy { max-width: 280px; font-size: 15px; }
      footer { width: calc(100% - 32px); padding: 28px 0; align-items: flex-start; flex-direction: column; }
    }

    @media (min-width: 761px) and (max-width: 1050px) {
      .nav, .hero, .showcase, .cta, footer { width: min(100% - 48px, 900px); }
      .nav-links { gap: 18px; }
      .nav-actions { gap: 14px; }
      .hero { min-height: 635px; }
      .hero-content { margin-top: 55px; }
      .hero-copy { margin-top: 40px; }
      .prompt-card { margin-top: 52px; }
      .intro-grid { gap: 55px; }
      .showcase { min-height: 570px; }
      .showcase h3 { max-width: 600px; }
      .brain-scene {
        width: min(47%, 360px);
        height: 240px;
        right: 26px;
        bottom: 30px;
      }
      .bright-idea-scene {
        width: min(43%, 330px);
        height: 240px;
        right: calc(47% + 35px);
        bottom: 30px;
      }
      .business-scene { display: none; }
      .services { padding: 95px 24px; }
      .pricing-plans { grid-template-columns: repeat(2, 1fr); }
      .plan { min-height: 465px; }
      .cta { min-height: 485px; }
      .cta-copy { max-width: 680px; }
    }

    @media (max-width: 520px) {
      .brand { font-size: 19px; }
      .brand-mark { width: 41px; height: 41px; }
      .brand-mark img { width: 30px; height: 30px; }
      .hero { min-height: 635px; }
      .hero-content { margin-top: 80px; }
      .hero-copy { margin-top: 54px; }
      .prompt-card {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 48px;
        padding: 11px 12px;
      }
      .prompt-card textarea { flex-basis: calc(100% - 36px); }
      .prompt-card .button { width: 100%; }
      .hero-tags {
        width: 100%;
        margin: 0;
        transform: none;
      }
      .hero-tags span {
        width: 100%;
        text-align: center;
        font-size: 8px;
        line-height: 1.45;
      }
      .showcase { min-height: 500px; }
      .brain-scene {
        width: calc(100% - 44px);
        right: 22px;
        bottom: 48px;
      }
      .service { grid-template-columns: 38px 1fr 34px; }
      .arrow { width: 34px; height: 34px; }
      .plan { padding: 24px; }
      .cta { min-height: 510px; }
      .cta-top { gap: 14px; font-size: 9px; }
      .cta-copy { width: 100%; max-width: none; text-align: left; }
      .footer-links { flex-wrap: wrap; }
    }

    /* Refined tablet and mobile layout */
    @media (min-width: 761px) and (max-width: 1050px) {
      .nav { height: 82px; }
      .hero { min-height: 670px; padding: 28px; }
      .hero-content { max-width: 730px; margin-top: 62px; }
      .hero-copy { margin-top: 62px; }
      .prompt-card { width: min(620px, 100%); }
      .trusted, .intro, .notes, .pricing { width: min(100% - 48px, 820px); }
      .intro-grid { grid-template-columns: 1fr .72fr; gap: 42px; }
      .notes { padding-bottom: 95px; }
      .notes-head { gap: 28px; margin-bottom: 36px; }
      .notes-head h2 { max-width: 510px; }
      .notes-grid { grid-template-columns: repeat(2, 1fr); }
      .note-card { min-height: 300px; }
      .showcase { min-height: 560px; }
      .showcase h3 { max-width: 530px; }
      .bright-idea-scene { right: calc(50% + 12px); }
      .brain-scene { right: 28px; }
      .service { grid-template-columns: 64px 1fr .78fr 40px; gap: 18px; }
      .plan { padding: 25px; }
      .cta { min-height: 500px; }
      .cta-copy { max-width: 650px; text-align: center; }
    }

    @media (max-width: 760px) {
      body { overflow-x: clip; }
      .hero-content { width: 100%; }
      .hero-copy { margin-right: auto; margin-left: auto; }
      .prompt-card textarea { font-size: 16px; }
      .logos { padding: 22px 0; }
      .logos-track { gap: 42px; animation-duration: 16s; }
      .intro h2, .notes-head h2, .service-top h2, .pricing-head h2 { font-size: clamp(45px, 12vw, 65px); }
      .notes {
        width: calc(100% - 32px);
        padding-bottom: 77px;
      }
      .notes-head {
        display: block;
        margin-bottom: 33px;
      }
      .notes-head p {
        max-width: 330px;
        margin-top: 23px;
        font-size: 15px;
      }
      .notes-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }
      .note-card {
        min-height: 275px;
        padding: 22px;
      }
      .note-card h3 {
        max-width: 310px;
        font-size: clamp(30px, 9vw, 38px);
      }
      .showcase-label { font-size: 10px; }
      .showcase h3 { max-width: 100%; }
      .brain-scene { overflow: hidden; }
      .idea-map { inset: 38px 12px 13px; }
      .idea-node { padding: 6px 7px; font-size: 8px; }
      .idea-node.one { top: 10px; left: 7px; }
      .idea-node.four { top: 10px; right: 7px; }
      .idea-node.two { bottom: 9px; left: 8px; }
      .idea-node.three { right: 8px; bottom: 9px; }
      .map-core { width: 46px; height: 46px; }
      .map-core img { width: 31px; height: 31px; }
      .service-list { border-top-color: var(--line); }
      .service {
        border-bottom-color: var(--line);
        animation: service-mobile-reveal .65s both;
      }
      .service:nth-child(2) { animation-delay: .12s; }
      .service:nth-child(3) { animation-delay: .24s; }
      .service:nth-child(4) { animation-delay: .36s; }
      .service .arrow {
        animation: service-arrow-pulse 1.5s ease-in-out infinite;
      }
      .service:nth-child(2) .arrow { animation-delay: .15s; }
      .service:nth-child(3) .arrow { animation-delay: .3s; }
      .service:nth-child(4) .arrow { animation-delay: .45s; }
      @keyframes service-mobile-reveal {
        from { opacity: 0; transform: translateY(18px); }
        to { opacity: 1; transform: translateY(0); }
      }
      @keyframes service-arrow-pulse {
        50% { transform: translateX(6px); background: var(--lime); color: #111111; }
      }
      .service p { max-width: 290px; }
      .pricing-plans { gap: 18px; }
      .plan { border-radius: 16px; }
      .plan-price { font-size: 48px; }
      .cta-main { align-items: stretch; }
      .cta h2 { margin-bottom: .8em; text-align: center; transform: translateY(22px); }
      .cta-copy { gap: 12px; text-align: left; }
      .cta-copy-line { margin-bottom: 0; }
      .cta-copy-line:last-child { margin-bottom: 0; }
      .cta .button { align-self: center; }
      .button > span {
        width: 16px;
        display: inline-grid;
        place-items: center;
        font-size: 0;
      }
      .button > span::before {
        content: "→";
        font: 700 18px/1 var(--sans);
      }
      .arrow {
        font-size: 0;
      }
      .arrow::before {
        content: "→";
        font: 700 20px/1 var(--sans);
      }
      footer { align-items: center; text-align: center; gap: 18px; }
    }

    @media (max-width: 390px) {
      .nav { width: calc(100% - 24px); }
      .brand { gap: 7px; font-size: 18px; }
      .hero, .showcase, .cta { width: calc(100% - 24px); }
      .hero { padding: 18px; }
      h1, .hero-wordmark { font-size: 46px; }
      .hero-copy { font-size: clamp(15px, 4.6vw, 18px); }
      .prompt-card { margin-top: 40px; }
      .trusted, .intro, .pricing, footer { width: calc(100% - 24px); }
      .services { padding-right: 12px; padding-left: 12px; }
      .showcase h3 { font-size: 37px; }
      .brain-scene { width: calc(100% - 36px); right: 18px; }
      .cta { padding: 23px; }
      .cta h2 { font-size: 51px; }
    }
    .about-modal {
      width: min(620px, calc(100% - 32px));
      position: fixed;
      z-index: 100;
      top: 50%;
      left: 50%;
      display: none;
      padding: 36px;
      border: 1px solid var(--lime);
      border-radius: 22px;
      background: #151515;
      color: var(--ink);
      box-shadow: 10px 10px 0 var(--lime);
      transform: translate(-50%, -50%);
    }
    .about-modal[open] { display: block; }
    .about-modal-close {
      width: 38px;
      height: 38px;
      position: absolute;
      top: 15px;
      right: 15px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font: 500 25px/1 var(--sans);
    }
    .about-modal h2 {
      max-width: 480px;
      margin: 0 45px 20px 0;
      font-size: clamp(42px, 7vw, 62px);
    }
    .about-duck-logo {
      width: .7em;
      height: .7em;
      margin: 0 0 .03em .08em;
      vertical-align: middle;
      object-fit: contain;
      transform-origin: center bottom;
      animation: about-duck-run .7s steps(2, end) infinite;
    }
    @keyframes about-duck-run {
      0%, 100% { transform: translate(0, 0) rotate(-8deg) scaleX(1); }
      25% { transform: translate(6px, -5px) rotate(7deg) scaleX(1.08); }
      50% { transform: translate(0, 1px) rotate(-5deg) scaleX(.96); }
      75% { transform: translate(6px, -3px) rotate(8deg) scaleX(1.08); }
    }
    .about-modal p {
      max-width: 500px;
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.55;
    }
    .about-modal p strong { color: var(--lime); }
    .about-points {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 26px;
    }
    .about-points span {
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: var(--lime);
      font: 500 10px var(--mono);
      letter-spacing: .07em;
      text-align: center;
      text-transform: uppercase;
    }
    @media (max-width: 760px) {
      .about-modal {
        width: calc(100% - 32px);
        max-height: calc(100dvh - 32px);
        top: 16px;
        padding: 28px 22px;
        overflow-y: auto;
        transform: translateX(-50%);
        border-radius: 18px;
        box-shadow: 6px 6px 0 var(--lime);
      }
      .about-modal h2 { font-size: clamp(38px, 11vw, 52px); }
      .about-modal p { font-size: 15px; }
      .about-points { grid-template-columns: 1fr; }
      .about-modal-close {
        width: 34px;
        height: 34px;
        top: 12px;
        right: 12px;
        font-size: 22px;
      }
    }
    .contact-modal {
      width: min(520px, calc(100% - 32px));
      position: fixed;
      z-index: 100;
      top: 50%;
      left: 50%;
      display: none;
      padding: 30px;
      border: 1px solid var(--lime);
      border-radius: 22px;
      background: #151515;
      color: var(--ink);
      box-shadow: 10px 10px 0 var(--lime);
      transform: translate(-50%, -50%);
    }
    .contact-modal[open] { display: block; }
    .contact-modal-backdrop {
      position: fixed;
      z-index: 99;
      inset: 0;
      display: none;
      background: rgba(0,0,0,.76);
      backdrop-filter: blur(7px);
    }
    .contact-modal-backdrop[open] { display: block; }
    .contact-modal-close {
      width: 38px;
      height: 38px;
      position: absolute;
      top: 15px;
      right: 15px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font: 500 25px/1 var(--sans);
    }
    .contact-modal h2 {
      max-width: 390px;
      margin: 0 45px 12px 0;
      font-size: clamp(42px, 7vw, 58px);
    }
    .contact-duck-logo {
      width: .7em;
      height: .7em;
      margin: 0 0 0 .08em;
      vertical-align: middle;
      object-fit: contain;
      filter: drop-shadow(3px 4px 0 rgba(0,0,0,.28));
      transform-origin: center;
      animation: contact-duck-bounce 1.5s cubic-bezier(.34, 1.56, .64, 1) infinite;
    }
    @keyframes contact-duck-bounce {
      0%, 100% { transform: translateY(0) rotate(-8deg) scale(1); }
      45% { transform: translateY(-.25em) rotate(18deg) scale(1.2); }
      65% { transform: translateY(.06em) rotate(-6deg) scale(.92); }
    }
=======
    .contact-modal h2 {
      max-width: 390px;
      margin: 0 45px 12px 0;
      font-size: clamp(42px, 7vw, 58px);
    }
    .contact-duck-logo {
      width: .7em;
      height: .7em;
      margin: 0 0 0 .08em;
      vertical-align: middle;
      object-fit: contain;
      filter: drop-shadow(3px 4px 0 rgba(0,0,0,.28));
      transform-origin: center;
      animation: contact-duck-bounce 1.5s cubic-bezier(.34, 1.56, .64, 1) infinite;
    }
    @keyframes contact-duck-bounce {
      0%, 100% { transform: translateY(0) rotate(-8deg) scale(1); }
      45% { transform: translateY(-.25em) rotate(18deg) scale(1.2); }
      65% { transform: translateY(.06em) rotate(-6deg) scale(.92); }
    }
    .contact-modal p {
      margin-bottom: 25px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.5;
    }
    .contact-form {
      display: grid;
      gap: 13px;
    }
    .contact-form label {
      color: var(--muted);
      font: 500 10px var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .contact-form input, .contact-form textarea {
      width: 100%;
      padding: 13px 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      outline: none;
      background: #0b0b0b;
      color: var(--ink);
      font: 14px var(--sans);
    }
    .contact-form input:focus, .contact-form textarea:focus { border-color: var(--lime); }
    .contact-form textarea { min-height: 100px; resize: vertical; }
    .contact-form .button {
      margin-top: 5px;
      cursor: pointer;
    }
    @media (max-width: 760px) {
      .contact-modal {
        width: calc(100% - 32px);
        max-height: calc(100dvh - 32px);
        top: 16px;
        padding: 26px 22px;
        overflow-y: auto;
        transform: translateX(-50%);
        border-radius: 18px;
        box-shadow: 6px 6px 0 var(--lime);
      }
      .contact-modal h2 {
        margin-right: 42px;
        font-size: clamp(38px, 11vw, 52px);
      }
      .contact-modal p { margin-bottom: 20px; }
      .contact-modal-close {
        width: 34px;
        height: 34px;
        top: 12px;
        right: 12px;
        font-size: 22px;
      }
      .contact-form { gap: 10px; }
      .contact-form input, .contact-form textarea { padding: 11px 12px; }
      .contact-form textarea { min-height: 82px; }
    }
    @media (min-width: 761px) and (max-width: 1050px) {
      .contact-modal {
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
      }
    }
    @media (max-width: 390px) {
      .contact-modal {
        width: calc(100% - 24px);
        top: 12px;
        max-height: calc(100dvh - 24px);
        padding: 22px 18px;
      }
      .contact-modal h2 { font-size: 38px; }
      .contact-form textarea { min-height: 70px; }
    }

    .login-modal {
      width: min(440px, calc(100% - 32px));
      position: fixed;
      z-index: 100;
      top: 50%;
      left: 50%;
      display: none;
      padding: 32px;
      border: 1px solid var(--lime);
      border-radius: 22px;
      background: #151515;
      color: var(--ink);
      box-shadow: 10px 10px 0 var(--lime);
      transform: translate(-50%, -50%);
    }
    .login-modal[open] { display: block; }
    .login-modal-close {
      width: 38px;
      height: 38px;
      position: absolute;
      top: 15px;
      right: 15px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font: 400 25px/1 var(--sans);
      transition: background .2s ease, color .2s ease;
    }
    .login-modal-close:hover { background: var(--lime); color: #111111; }
    .login-modal-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 25px;
      color: var(--ink);
      font: 700 23px/1 var(--display);
      letter-spacing: -.075em;
    }
    .login-modal-mark {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--lime);
    }
    .login-modal-mark img {
      width: 34px;
      height: 34px;
      object-fit: contain;
    }
    .login-modal-kicker {
      margin: 0 0 5px;
      color: var(--lime);
      font: 500 11px var(--mono);
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .login-modal h2 {
      margin: 0 42px 25px 0;
      color: var(--ink);
      font: 700 32px/.95 var(--display);
      letter-spacing: -.07em;
    }
    .login-options {
      display: grid;
      gap: 9px;
    }
    .login-provider, .login-continue {
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #0b0b0b;
      color: var(--ink);
      cursor: pointer;
      font: 600 14px var(--sans);
      transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
    }
    .login-provider:hover {
      border-color: var(--lime);
      background: rgba(255,212,0,.1);
      color: var(--lime);
      transform: translateY(-1px);
    }
    .login-provider svg { width: 18px; height: 18px; }
    .login-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 18px 0;
      color: var(--muted);
      font: 10px var(--mono);
      letter-spacing: .08em;
    }
    .login-divider::before, .login-divider::after {
      content: "";
      height: 1px;
      flex: 1;
      background: var(--line);
    }
    .login-form { display: grid; gap: 11px; }
    .login-form input {
      width: 100%;
      min-height: 48px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      outline: none;
      background: #0b0b0b;
      color: var(--ink);
      font: 14px var(--sans);
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .login-form input::placeholder { color: var(--muted); opacity: .8; }
    .login-form input:focus {
      border-color: var(--lime);
      box-shadow: 0 0 0 3px rgba(255,212,0,.12);
    }
    .login-continue {
      margin-top: 2px;
      border-color: var(--lime);
      background: var(--lime);
      color: #111111;
      font-weight: 700;
      box-shadow: 3px 3px 0 rgba(255,212,0,.28);
    }
    .login-continue:hover {
      border-color: #ffe34d;
      background: #ffe34d;
      transform: translateY(-1px);
    }
    .login-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin: 21px 0 0;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }
    .login-note svg { width: 14px; height: 14px; flex: 0 0 auto; }
    .login-note a { text-decoration: underline; text-underline-offset: 2px; }
    @media (max-width: 760px) {
      .login-modal {
        width: calc(100% - 32px);
        padding: 28px 24px;
        border-radius: 18px;
        box-shadow: 6px 6px 0 var(--lime);
      }
      .login-modal-kicker { font-size: 10px; }
      .login-modal h2 { font-size: 25px; }
    }

    .deep-demo-modal {
      width: min(780px, calc(100% - 32px));
      max-height: calc(100dvh - 48px);
      position: fixed;
      z-index: 100;
      top: 50%;
      left: 50%;
      display: none;
      padding: 34px;
      overflow-y: auto;
      border: 1px solid var(--lime);
      border-radius: 22px;
      background: #151515;
      color: var(--ink);
      box-shadow: 10px 10px 0 var(--lime);
      transform: translate(-50%, -50%);
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .deep-demo-modal[open] { display: block; }
    .deep-demo-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 24px;
      color: var(--ink);
      font: 700 23px/1 var(--display);
      letter-spacing: -.075em;
    }
    .deep-demo-logo span {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--lime);
    }
    .deep-demo-logo img {
      width: 34px;
      height: 34px;
      object-fit: contain;
    }
    .deep-demo-close {
      width: 38px;
      height: 38px;
      position: absolute;
      top: 15px;
      right: 15px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font: 400 25px/1 var(--sans);
      transition: background .2s ease, color .2s ease;
    }
    .deep-demo-close:hover { background: var(--lime); color: #111111; }
    .deep-demo-modal h2 {
      max-width: none;
      margin: 0 45px 16px 0;
      color: var(--ink);
      font: 700 clamp(34px, 4vw, 44px)/.94 var(--display);
      letter-spacing: -.07em;
    }
    .deep-demo-intro {
      max-width: 550px;
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
    }
    .deep-demo-divider {
      height: 1px;
      margin: 25px 0 22px;
      background: var(--line);
    }
    .deep-demo-required {
      margin: 0 0 22px;
      color: var(--muted);
      font: 500 10px var(--mono);
      letter-spacing: .05em;
    }
    .deep-demo-form {
      display: grid;
      gap: 16px;
    }
    .deep-demo-name-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .deep-demo-field {
      display: grid;
      gap: 8px;
    }
    .deep-demo-field label {
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
    }
    .deep-demo-field input, .deep-demo-field textarea, .deep-demo-phone {
      width: 100%;
      min-height: 46px;
      padding: 12px 13px;
      border: 1px solid var(--line);
      border-radius: 10px;
      outline: none;
      background: #0b0b0b;
      color: var(--ink);
      font: 14px var(--sans);
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .deep-demo-field input::placeholder, .deep-demo-field textarea::placeholder { color: var(--muted); opacity: .8; }
    .deep-demo-field input:focus, .deep-demo-field textarea:focus, .deep-demo-phone:focus-within {
      border-color: var(--lime);
      box-shadow: 0 0 0 3px rgba(255,212,0,.12);
    }
    .deep-demo-field textarea {
      min-height: 104px;
      resize: vertical;
    }
    .deep-demo-phone {
      display: flex;
      align-items: center;
      padding: 0;
      overflow: hidden;
    }
    .deep-demo-country {
      height: 44px;
      padding: 0 10px;
      border: 0;
      border-right: 1px solid var(--line);
      outline: 0;
      background: #151515;
      color: var(--ink);
      cursor: pointer;
      font: 13px var(--sans);
    }
    .deep-demo-phone input {
      min-width: 0;
      flex: 1;
      min-height: 44px;
      padding: 12px 13px;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    .deep-demo-form .button {
      width: 100%;
      min-height: 48px;
      margin-top: 5px;
      cursor: pointer;
    }
    @media (max-width: 760px) {
      .deep-demo-modal {
        width: calc(100% - 32px);
        max-height: calc(100dvh - 32px);
        padding: 28px 22px;
        border-radius: 18px;
        box-shadow: 6px 6px 0 var(--lime);
      }
      .deep-demo-modal h2 {
        margin-right: 38px;
        font-size: clamp(34px, 10vw, 46px);
      }
      .deep-demo-logo {
        margin-bottom: 20px;
        font-size: 21px;
      }
      .deep-demo-name-row { grid-template-columns: 1fr; }
      .deep-demo-form { gap: 14px; }
      .deep-demo-field input, .deep-demo-field textarea, .deep-demo-phone { font-size: 16px; }
    }
    @media (max-width: 390px) {
      .deep-demo-modal {
        width: calc(100% - 24px);
        max-height: calc(100dvh - 24px);
        padding: 24px 18px;
      }
    }

    .signup-modal {
      width: min(440px, calc(100% - 32px));
      position: fixed;
      z-index: 100;
      top: 50%;
      left: 50%;
      display: none;
      padding: 32px;
      border: 1px solid var(--lime);
      border-radius: 22px;
      background: #151515;
      color: var(--ink);
      box-shadow: 10px 10px 0 var(--lime);
      transform: translate(-50%, -50%);
    }
    .signup-modal[open] { display: block; }
    .signup-modal-close {
      width: 38px;
      height: 38px;
      position: absolute;
      top: 15px;
      right: 15px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font: 400 25px/1 var(--sans);
      transition: background .2s ease, color .2s ease;
    }
    .signup-modal-close:hover { background: var(--lime); color: #111111; }
    .signup-modal-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 25px;
      color: var(--ink);
      font: 700 23px/1 var(--display);
      letter-spacing: -.075em;
    }
    .signup-modal-logo span {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--lime);
    }
    .signup-modal-logo img {
      width: 34px;
      height: 34px;
      object-fit: contain;
    }
    .signup-modal-kicker {
      margin: 0 0 5px;
      color: var(--lime);
      font: 500 11px var(--mono);
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .signup-modal h2 {
      margin: 0 42px 25px 0;
      color: var(--ink);
      font: 700 32px/.95 var(--display);
      letter-spacing: -.07em;
    }
    .signup-options {
      display: grid;
      gap: 9px;
    }
    .signup-provider, .signup-continue {
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #0b0b0b;
      color: var(--ink);
      cursor: pointer;
      font: 600 14px var(--sans);
      transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
    }
    .signup-provider:hover {
      border-color: var(--lime);
      background: rgba(255,212,0,.1);
      color: var(--lime);
      transform: translateY(-1px);
    }
    .signup-provider svg { width: 18px; height: 18px; }
    .signup-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 18px 0;
      color: var(--muted);
      font: 10px var(--mono);
      letter-spacing: .08em;
    }
    .signup-divider::before, .signup-divider::after {
      content: "";
      height: 1px;
      flex: 1;
      background: var(--line);
    }
    .signup-form { display: grid; gap: 11px; }
    .signup-form input {
      width: 100%;
      min-height: 48px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      outline: none;
      background: #0b0b0b;
      color: var(--ink);
      font: 14px var(--sans);
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .signup-form input::placeholder { color: var(--muted); opacity: .8; }
    .signup-form input:focus {
      border-color: var(--lime);
      box-shadow: 0 0 0 3px rgba(255,212,0,.12);
    }
    .signup-continue {
      margin-top: 2px;
      border-color: var(--lime);
      background: var(--lime);
      color: #111111;
      font-weight: 700;
      box-shadow: 3px 3px 0 rgba(255,212,0,.28);
    }
    .signup-continue:hover {
      border-color: #ffe34d;
      background: #ffe34d;
      transform: translateY(-1px);
    }
    .signup-login {
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      text-align: center;
    }
    .signup-login a {
      color: var(--lime);
      font-weight: 700;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    .signup-login a:hover { color: #ffe34d; }
    .signup-note {
      margin: 21px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      text-align: center;
    }
    .signup-note a {
      color: var(--ink);
      text-decoration: underline;
      text-decoration-color: var(--lime);
      text-underline-offset: 3px;
    }
    @media (max-width: 760px) {
      .signup-modal {
        width: calc(100% - 32px);
        padding: 28px 24px;
        border-radius: 18px;
        box-shadow: 6px 6px 0 var(--lime);
      }
      .signup-modal-kicker { font-size: 19px; }
      .signup-modal h2 { font-size: 25px; }
    }

    /* Responsive modal refinements */
    @media (max-width: 1050px) {
      .about-modal, .contact-modal {
        max-height: calc(100dvh - 40px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
    }
    @media (max-width: 760px) {
      .about-modal, .contact-modal {
        width: calc(100% - 32px);
        top: 50%;
        padding: 24px 20px;
        transform: translate(-50%, -50%);
      }
      .about-modal h2, .contact-modal h2 {
        margin-right: 38px;
        font-size: clamp(36px, 10vw, 50px);
      }
      .about-points {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 20px;
      }
      .contact-form input, .contact-form textarea {
        font-size: 16px;
      }
    }
    @media (max-width: 390px) {
      .about-modal, .contact-modal {
        width: calc(100% - 24px);
        max-height: calc(100dvh - 24px);
        padding: 21px 18px;
      }
    }

    .solution-modal {
      width: min(880px, calc(100% - 32px));
      max-height: calc(100dvh - 48px);
      position: fixed;
      z-index: 100;
      top: 50%;
      left: 50%;
      display: none;
      padding: 34px;
      overflow-x: hidden;
      overflow-y: auto;
      border: 1px solid var(--lime);
      border-radius: 22px;
      background: #151515;
      color: var(--ink);
      box-shadow: 10px 10px 0 var(--lime);
      transform: translate(-50%, -50%);
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .solution-modal[open] { display: block; }
    .solution-modal-close {
      width: 38px;
      height: 38px;
      position: absolute;
      top: 15px;
      right: 15px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font: 400 25px/1 var(--sans);
      transition: background .2s ease, color .2s ease;
    }
    .solution-modal-close:hover { background: var(--lime); color: #111111; }
    .solution-modal-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 24px;
      color: var(--ink);
      font: 700 23px/1 var(--display);
      letter-spacing: -.075em;
    }
    .solution-modal-logo span {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--lime);
    }
    .solution-modal-logo img {
      width: 34px;
      height: 34px;
      object-fit: contain;
    }
    .solution-modal-kicker {
      margin: 0 0 7px;
      color: var(--lime);
      font: 500 10px var(--mono);
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .solution-modal h2 {
      max-width: 690px;
      margin: 0 45px 15px 0;
      font: 700 clamp(37px, 5.4vw, 57px)/.93 var(--display);
      letter-spacing: -.075em;
    }
    .solution-modal-intro {
      max-width: 680px;
      margin: 0 0 28px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.52;
    }
    .solution-feature-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .solution-feature {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #0b0b0b;
      transition: border-color .2s ease, transform .2s ease;
    }
    .solution-feature:hover {
      border-color: var(--lime);
      transform: translateY(-2px);
    }
    .solution-feature h3 {
      margin: 0 0 12px;
      color: var(--ink);
      font: 700 19px/1 var(--display);
      letter-spacing: -.05em;
    }
    .solution-feature ul {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .solution-feature li {
      position: relative;
      padding-left: 16px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.38;
    }
    .solution-feature li::before {
      content: "✦";
      position: absolute;
      left: 0;
      color: var(--lime);
      font-size: 10px;
    }
    .model-selector {
      position: relative;
      margin: 0 0 16px;
    }
    .model-selector summary {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 13px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #151515;
      color: var(--ink);
      cursor: pointer;
      font: 600 12px var(--sans);
      list-style: none;
      transition: border-color .2s ease, background .2s ease;
    }
    .model-selector summary::-webkit-details-marker { display: none; }
    .model-selector summary::after {
      content: "⌄";
      color: var(--lime);
      font: 700 17px/1 var(--sans);
      transition: transform .2s ease;
    }
    .model-selector[open] summary {
      border-color: var(--lime);
      background: #0b0b0b;
    }
    .model-selector[open] summary::after { transform: rotate(180deg); }
    .model-selector-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin: 8px 0 0;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #0b0b0b;
      list-style: none;
    }
    .model-selector-list li {
      margin: 0;
      padding: 8px 9px;
      border: 1px solid rgba(247,243,232,.12);
      border-radius: 6px;
      background: #151515;
      color: var(--ink);
      font: 500 11px/1.3 var(--mono);
    }
    .model-selector-list li::before { content: none; }
    @media (max-width: 760px) {
      .model-selector-list { grid-template-columns: 1fr; }
    }
    .solution-modal-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-top: 22px;
      padding: 20px;
      border: 1px solid rgba(255,212,0,.45);
      border-radius: 14px;
      background: rgba(255,212,0,.08);
    }
    .solution-modal-cta-media {
      flex: 0 1 42%;
      min-width: 0;
    }
    .solution-modal-cta-duck {
      display: block;
      width: min(100%, 360px);
      height: auto;
      max-height: 220px;
      margin: 0 auto;
      object-fit: contain;
    }
    .solution-modal-cta-copy {
      flex: 1 1 0;
      min-width: 0;
    }
    .solution-modal-cta p {
      margin: 0;
      color: var(--ink);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -.02em;
    }
    .solution-modal-actions {
      display: flex;
      flex: 0 0 auto;
      flex-wrap: wrap;
      gap: 9px;
    }
    .solution-modal-actions .button { padding: 12px 16px; }
    .solution-modal-actions .button-secondary {
      border-color: var(--line);
      background: transparent;
      color: var(--ink);
    }
    .solution-modal-actions .button-secondary:hover {
      border-color: var(--ink);
      background: var(--ink);
      color: #111111;
    }
    @media (max-width: 760px) {
      .solution-modal {
        width: calc(100% - 24px);
        max-height: calc(100dvh - 24px);
        padding: 26px 20px;
        border-radius: 18px;
        box-shadow: 6px 6px 0 var(--lime);
      }
      .solution-modal-close {
        width: 40px;
        height: 40px;
        top: 10px;
        right: 10px;
      }
      .solution-modal-logo { margin-bottom: 17px; font-size: 21px; }
      .solution-modal h2 {
        margin-right: 38px;
        font-size: clamp(33px, 10vw, 48px);
      }
      .solution-modal-intro { margin-bottom: 21px; font-size: 15px; }
      .solution-feature-grid { grid-template-columns: 1fr; gap: 10px; }
      .solution-feature { padding: 16px; }
      .solution-modal-cta {
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
        padding: 17px;
      }
      .solution-modal-cta-media {
        flex-basis: auto;
      }
      .solution-modal-cta-duck {
        width: min(100%, 300px);
        max-height: 190px;
      }
      .solution-modal-actions { width: 100%; }
      .solution-modal-actions .button {
        min-height: 46px;
        flex: 1;
        padding: 11px 12px;
      }
    }

    /* Branded main page scrollbar */
    html {
      scrollbar-width: thin;
      scrollbar-color: #ffd400 #0b0b0b;
    }
    html::-webkit-scrollbar, body::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
      background: #0b0b0b;
    }
    html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
      border: 2px solid #0b0b0b;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffe34d 0%, #ffd400 100%);
    }
    html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #fff06a 0%, #ffe34d 100%);
    }

    /* Branded modal scrollbars */
    .about-modal, .contact-modal, .login-modal, .deep-demo-modal, .signup-modal, .solution-modal, .article-modal {
      scrollbar-width: thin;
      scrollbar-color: #ffd400 #0b0b0b;
    }
    .about-modal::-webkit-scrollbar, .contact-modal::-webkit-scrollbar, .login-modal::-webkit-scrollbar, .deep-demo-modal::-webkit-scrollbar, .signup-modal::-webkit-scrollbar, .solution-modal::-webkit-scrollbar, .article-modal::-webkit-scrollbar {
      width: 9px;
      height: 9px;
    }
    .about-modal::-webkit-scrollbar-track, .contact-modal::-webkit-scrollbar-track, .login-modal::-webkit-scrollbar-track, .deep-demo-modal::-webkit-scrollbar-track, .signup-modal::-webkit-scrollbar-track, .solution-modal::-webkit-scrollbar-track, .article-modal::-webkit-scrollbar-track {
      background: #0b0b0b;
      border-radius: 999px;
    }
    .about-modal::-webkit-scrollbar-thumb, .contact-modal::-webkit-scrollbar-thumb, .login-modal::-webkit-scrollbar-thumb, .deep-demo-modal::-webkit-scrollbar-thumb, .signup-modal::-webkit-scrollbar-thumb, .solution-modal::-webkit-scrollbar-thumb, .article-modal::-webkit-scrollbar-thumb {
      border: 2px solid #0b0b0b;
      border-radius: 999px;
      background: #ffd400;
    }
    .about-modal::-webkit-scrollbar-thumb:hover, .contact-modal::-webkit-scrollbar-thumb:hover, .login-modal::-webkit-scrollbar-thumb:hover, .deep-demo-modal::-webkit-scrollbar-thumb:hover, .signup-modal::-webkit-scrollbar-thumb:hover, .solution-modal::-webkit-scrollbar-thumb:hover, .article-modal::-webkit-scrollbar-thumb:hover {
      background: #ffe34d;
    }

    .article-modal {
      width: 100%;
      min-height: 100dvh;
      position: relative;
      z-index: 101;
      display: none;
      overflow: visible;
      background: var(--paper);
      color: var(--ink);
    }
    .article-modal[open] { display: block; }
    body.article-is-open {
      overflow-y: auto;
    }
    body.article-is-open > header.nav:not(.article-page-header),
    body.article-is-open > main,
    body.article-is-open > footer:not(.article-page-footer),
    body.article-is-open > .back-to-top {
      display: none;
    }
    .article-shell {
      width: min(920px, calc(100% - 48px));
      min-height: 100%;
      margin: auto;
      padding: 32px 0 90px;
    }
    .article-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 28px;
      border-bottom: 1px solid var(--line);
    }
    .article-back {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--lime);
      font: 600 12px var(--sans);
    }
    .article-back span {
      width: 31px;
      height: 31px;
      display: grid;
      place-items: center;
      border: 1px solid currentColor;
      border-radius: 50%;
      font-size: 17px;
    }
    .article-close {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font: 400 27px/1 var(--sans);
    }
    .article-header {
      max-width: 790px;
      padding: 50px 0 58px;
    }
    .article-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 25px;
      color: var(--lime);
      font: 500 11px var(--mono);
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .article-meta i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--lime);
    }
    .article-header h2 {
      margin: 0;
      font-size: clamp(54px, 8vw, 102px);
    }
    .article-lead {
      max-width: 590px;
      margin: 32px 0 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.48;
      letter-spacing: -.025em;
    }
    .article-lead.question-article-lead {
      max-width: none;
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: -.03em;
      white-space: nowrap;
    }
    .article-visual {
      height: auto;
      aspect-ratio: 3.5 / 1;
      position: relative;
      overflow: hidden;
      margin-bottom: 58px;
      border: 1px solid #111111;
      border-radius: 20px;
      background: var(--lime);
      color: #111111;
      box-shadow: 8px 8px 0 #111111;
      transform: translateY(-8px);
    }
    .article-visual::before {
      content: "SWEETDUCK NOTES";
      position: absolute;
      top: 24px;
      left: 26px;
      font: 500 10px var(--mono);
      letter-spacing: .1em;
    }

    @keyframes article-arrow-orbit {
      50% { transform: translateY(-18px) rotate(18deg) scale(1.08); }
    }
    .article-lightbulb {
      width: 82px;
      height: 82px;
      position: absolute;
      z-index: 2;
      left: 52%;
      bottom: 72px;
      filter: drop-shadow(5px 6px 0 #111111);
      transform: rotate(-12deg);
      animation: article-bulb-glow 1.8s ease-in-out infinite;
    }
    @keyframes article-bulb-glow {
      50% { transform: translateY(-8px) rotate(8deg) scale(1.08); filter: drop-shadow(5px 6px 0 #111111) drop-shadow(0 0 13px rgba(255,255,255,.9)); }
    }
    .article-spark {
      width: 46px;
      height: 46px;
      position: absolute;
      z-index: 3;
      top: 76px;
      right: 18%;
      display: grid;
      place-items: center;
      border: 2px solid #111111;
      border-radius: 50%;
      background: #ffffff;
      color: #111111;
      box-shadow: 4px 5px 0 #111111;
      font: 700 27px/1 var(--display);
      animation: article-spark-dance 1.7s ease-in-out infinite;
    }
    @keyframes article-spark-dance {
      50% { transform: translateY(-16px) rotate(24deg) scale(1.18); }
    }
    .article-money {
      position: absolute;
      z-index: 3;
      top: 58px;
      right: 34%;
      padding: 9px 12px;
      border: 2px solid #111111;
      border-radius: 9px;
      background: #ffffff;
      color: #111111;
      box-shadow: 4px 5px 0 #111111;
      font: 700 19px/1 var(--display);
      transform: rotate(-8deg);
      animation: article-money-float 2.1s ease-in-out infinite;
    }
    @keyframes article-money-float {
      50% { transform: translate(-12px, -19px) rotate(9deg) scale(1.13); }
    }
    .article-laptop {
      width: 122px;
      height: 78px;
      position: absolute;
      z-index: 3;
      right: 7%;
      bottom: 36px;
      border: 4px solid #111111;
      border-radius: 8px 8px 4px 4px;
      background: #ffffff;
      box-shadow: 5px 6px 0 #111111;
      transform: rotate(7deg);
      animation: article-laptop-float 2.3s ease-in-out infinite;
    }
    .article-laptop::before {
      content: "";
      position: absolute;
      top: 10px;
      right: 11px;
      bottom: 12px;
      left: 11px;
      border-radius: 3px;
      background:
        linear-gradient(90deg, transparent 48%, rgba(17,17,17,.14) 48% 52%, transparent 52%),
        linear-gradient(rgba(17,17,17,.14) 48%, transparent 48% 52%, rgba(17,17,17,.14) 52%),
        var(--lime);
      background-size: 18px 18px;
    }
    .article-laptop::after {
      content: "";
      width: 144px;
      height: 12px;
      position: absolute;
      right: -15px;
      bottom: -15px;
      border: 4px solid #111111;
      border-radius: 2px 2px 9px 9px;
      background: #ffffff;
    }
    @keyframes article-laptop-float {
      50% { transform: translateY(-13px) rotate(-4deg) scale(1.05); }
    }
    .article-visual-word {
      position: absolute;
      z-index: 1;
      bottom: 55px;
      left: 27px;
      max-width: 72%;
      font: 700 clamp(46px, 7vw, 82px)/.84 var(--display);
      letter-spacing: -.09em;
    }
    .article-visual-word.growth-visual { bottom: 75px; }
    .article-body {
      width: min(630px, 100%);
      margin: auto;
    }
    .article-body p {
      margin: 0 0 25px;
      color: #d6d1c4;
      font-size: 18px;
      line-height: 1.65;
      letter-spacing: -.015em;
    }
    .article-body h2 {
      margin: 57px 0 22px;
      font-size: clamp(38px, 5vw, 56px);
    }
    .article-pullquote {
      margin: 51px 0;
      padding: 23px 0 23px 27px;
      border-left: 3px solid var(--lime);
      color: var(--lime);
      font: 600 clamp(27px, 3.8vw, 40px)/1.04 var(--display);
      letter-spacing: -.055em;
    }
    .article-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 25px;
      margin-top: 65px;
      padding-top: 25px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font: 11px var(--mono);
      letter-spacing: .07em;
      text-transform: uppercase;
    }
    @media (min-width: 761px) and (max-width: 1050px) {
      .article-shell { width: min(720px, calc(100% - 48px)); }
      .article-visual-word { max-width: 56%; }
      .article-lightbulb { top: 42px; bottom: auto; left: 28%; }
      .article-spark { top: 67px; right: 8%; }
      .article-money { top: 78px; right: 20%; }
      .article-laptop {
        width: 104px;
        height: 67px;
        right: 6%;
        bottom: 34px;
      }
      .article-laptop::after { width: 124px; }
      .article-footer {
        flex-wrap: wrap;
        row-gap: 14px;
      }
    }
    @media (max-width: 760px) {
      .article-shell { width: calc(100% - 32px); padding-top: 18px; }
      .article-header { padding: 42px 0 42px; }
      .article-lead { font-size: clamp(14px, 4vw, 16px); }
      .article-lead.question-article-lead {
        white-space: normal;
      }
      .article-visual { height: auto; aspect-ratio: 2 / 1; margin-bottom: 43px; border-radius: 15px; box-shadow: 5px 5px 0 #111111; transform: translateY(-6px); }
      .article-lightbulb { width: 54px; height: 54px; top: 31px; bottom: auto; left: 68%; }
      .article-spark { width: 34px; height: 34px; top: 45px; right: 4%; font-size: 20px; box-shadow: 3px 4px 0 #111111; }
      .article-money { top: 73px; right: 11%; padding: 6px 8px; font-size: 15px; box-shadow: 3px 4px 0 #111111; }
      .article-laptop {
        width: 76px;
        height: 50px;
        right: 6%;
        bottom: 31px;
        border-width: 3px;
        box-shadow: 3px 4px 0 #111111;
      }
      .article-laptop::before { top: 7px; right: 7px; bottom: 8px; left: 7px; background-size: 13px 13px; }
      .article-laptop::after { width: 90px; height: 9px; right: -10px; bottom: -12px; border-width: 3px; }
      .article-visual-word { bottom: 43px; left: 20px; max-width: 54%; font-size: clamp(39px, 11vw, 54px); }
      .article-visual-word.growth-visual { bottom: 58px; }
      .article-body p { font-size: 17px; }
      .article-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        margin-top: 48px;
        font-size: 10px;
        line-height: 1.45;
      }
      .article-footer span { max-width: 100%; }
    }
    /* Universal modal responsiveness */
    .about-modal, .contact-modal, .login-modal, .deep-demo-modal, .signup-modal {
      max-width: calc(100vw - 32px);
      max-height: calc(100dvh - 32px);
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .about-modal-close, .contact-modal-close, .login-modal-close, .deep-demo-close, .signup-modal-close {
      min-width: 38px;
      min-height: 38px;
      touch-action: manipulation;
    }
    .contact-form input, .contact-form textarea, .login-form input, .signup-form input,
    .deep-demo-field input, .deep-demo-field textarea, .deep-demo-country {
      max-width: 100%;
    }
    .contact-form .button, .login-continue, .signup-continue, .deep-demo-form .button {
      min-height: 48px;
      touch-action: manipulation;
    }
    @media (min-width: 761px) and (max-width: 1050px) {
      .about-modal, .contact-modal, .login-modal, .signup-modal {
        width: min(500px, calc(100vw - 48px));
        padding: 30px;
      }
      .deep-demo-modal {
        width: min(720px, calc(100vw - 48px));
        padding: 30px;
      }
      .about-modal h2, .contact-modal h2 {
        font-size: clamp(38px, 5.5vw, 52px);
      }
      .deep-demo-modal h2 {
        margin-bottom: 14px;
        font-size: clamp(27px, 3.4vw, 38px);
        line-height: 1;
        letter-spacing: -.075em;
        white-space: nowrap;
      }
      .deep-demo-name-row { gap: 12px; }
      .deep-demo-form { gap: 14px; }
    }
    @media (max-width: 760px) {
      .about-modal, .contact-modal, .login-modal, .signup-modal {
        width: min(440px, calc(100vw - 24px));
        max-height: calc(100dvh - 24px);
        padding: 24px 20px;
      }
      .deep-demo-modal {
        width: min(560px, calc(100vw - 16px));
        max-height: calc(100dvh - 16px);
        padding: 22px 16px;
      }
      .about-modal-close, .contact-modal-close, .login-modal-close, .deep-demo-close, .signup-modal-close {
        width: 40px;
        height: 40px;
        top: 10px;
        right: 10px;
      }
      .about-modal h2, .contact-modal h2 {
        margin-bottom: 16px;
        font-size: clamp(34px, 10vw, 48px);
        line-height: .96;
      }
      .contact-modal p, .about-modal p {
        font-size: 15px;
        line-height: 1.48;
      }
      .contact-form, .deep-demo-form { gap: 11px; }
      .contact-form label { margin-top: 2px; }
      .contact-form input, .contact-form textarea,
      .login-form input, .signup-form input,
      .deep-demo-field input, .deep-demo-field textarea {
        min-height: 46px;
        padding: 11px 12px;
      }
      .contact-form textarea, .deep-demo-field textarea { min-height: 88px; }
      .login-modal, .signup-modal { padding: 25px 20px; }
      .login-modal-brand, .signup-modal-logo { margin-bottom: 17px; }
      .login-options, .signup-options { gap: 8px; }
      .login-provider, .signup-provider { min-height: 46px; }
      .login-divider, .signup-divider { margin: 14px 0; }
      .login-note, .signup-note { margin-top: 17px; }
      .deep-demo-logo {
        margin-bottom: 16px;
        font-size: 20px;
      }
      .deep-demo-modal h2 {
        margin: 0 38px 12px 0;
        font-size: clamp(18px, 5.1vw, 25px);
        line-height: 1;
        letter-spacing: -.075em;
        white-space: nowrap;
      }
      .deep-demo-intro {
        font-size: 14px;
        line-height: 1.45;
      }
      .deep-demo-divider { margin: 18px 0 16px; }
      .deep-demo-required { margin-bottom: 16px; }
      .deep-demo-name-row {
        grid-template-columns: 1fr;
        gap: 11px;
      }
      .deep-demo-field { gap: 6px; }
      .deep-demo-phone { min-height: 46px; }
      .deep-demo-country { height: 44px; }
    }
    @media (max-width: 340px) {
      .about-modal, .contact-modal, .login-modal, .signup-modal {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        padding: 21px 16px;
      }
      .deep-demo-modal {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
        padding: 19px 13px;
      }
      .deep-demo-modal h2 {
        margin-right: 34px;
        font-size: 17px;
        letter-spacing: -.09em;
      }
      .deep-demo-logo { margin-bottom: 13px; }
      .deep-demo-intro { font-size: 13px; }
    }

    @media (max-width: 1050px) {
      .note-read > span {
        flex: 0 0 29px;
        font-size: 0;
        line-height: 1;
      }
      .note-read > span::before {
        content: "→";
        font: 700 18px/1 var(--sans);
      }
    }

    /* Final responsive hardening */
    html, body {
      max-width: 100%;
      overflow-x: hidden;
    }
    body {
      min-width: 0;
    }
    main, header, footer, section, article, div, nav, form {
      min-width: 0;
    }
    img, svg, video, canvas {
      max-width: 100%;
    }
    h1, h2, h3, p, li, a, span {
      overflow-wrap: break-word;
    }
    .button, button, summary, input, textarea, select, .mobile-menu a, .footer-links a {
      touch-action: manipulation;
    }
    .button {
      max-width: 100%;
      white-space: nowrap;
    }
    .hero-wordmark, h1, h2, h3 {
      text-wrap: balance;
    }
    .prompt-card, .currency-selector, .plan, .note-card, .service, .solution-feature {
      max-width: 100%;
    }
    .article-lead.question-article-lead {
      white-space: normal;
    }

    @media (max-width: 1200px) {
      .nav-links {
        gap: 20px;
      }
      .nav-actions {
        gap: 14px;
      }
      .nav-actions .button {
        padding-right: 15px;
        padding-left: 15px;
      }
      .hero, .showcase, .cta, footer, .nav {
        width: min(100% - 40px, 1160px);
      }
      .trusted, .intro, .notes, .pricing {
        width: min(100% - 40px, 1040px);
      }
      .pricing-plans {
        gap: 10px;
      }
      .plan {
        padding: 20px;
      }
      .plan h3 {
        font-size: 29px;
      }
      .plan-price {
        font-size: 46px;
      }
      .plan-description {
        min-height: 58px;
      }
      .service {
        grid-template-columns: 68px minmax(0, 1fr) minmax(220px, .85fr) 42px;
      }
    }

    @media (min-width: 901px) and (max-width: 1050px) {
      .nav {
        height: 78px;
      }
      .brand {
        flex: 0 0 auto;
      }
      .nav-links {
        gap: 14px;
        font-size: 12px;
      }
      .nav-actions {
        flex: 0 0 auto;
        gap: 10px;
      }
      .login {
        font-size: 12px;
      }
      .nav-actions .button {
        padding: 11px 13px;
        font-size: 12px;
      }
      .hero, .showcase, .cta, footer, .nav {
        width: min(100% - 36px, 940px);
      }
      .trusted, .intro, .notes, .pricing {
        width: min(100% - 36px, 860px);
      }
      .hero {
        min-height: 640px;
      }
      .hero-content {
        max-width: 720px;
      }
      .hero-wordmark {
        font-size: clamp(56px, 8.6vw, 86px);
        line-height: .92;
      }
      .hero-copy {
        margin-top: 50px;
      }
      .prompt-card {
        width: min(620px, 100%);
      }
      .intro-grid {
        grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr);
        gap: 42px;
      }
      .notes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .service {
        grid-template-columns: 54px minmax(0, 1fr) minmax(190px, .75fr) 40px;
        gap: 16px;
      }
      .pricing-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }
      .plan {
        min-height: 470px;
        padding: 25px;
      }
      .plan-description {
        min-height: 48px;
      }
      .showcase {
        min-height: 540px;
      }
      .showcase h3 {
        max-width: 560px;
      }
      .bright-idea-scene {
        width: min(44%, 340px);
        right: calc(50% + 10px);
      }
      .brain-scene {
        width: min(44%, 340px);
        right: 28px;
      }
      .business-scene {
        display: none;
      }
      .article-shell {
        width: min(760px, calc(100% - 40px));
      }
      .article-header h2 {
        font-size: clamp(50px, 8vw, 78px);
      }
    }

    @media (max-width: 900px) {
      .nav {
        width: calc(100% - 32px);
        height: 74px;
        position: relative;
      }
      .nav-links, .login {
        display: none;
      }
      .mobile-home {
        display: inline-flex;
        min-height: 44px;
        padding: 0 14px;
      }
      .mobile-menu {
        display: block;
        position: relative;
        order: -1;
      }
      .mobile-menu summary {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        border-radius: 50%;
        cursor: pointer;
        list-style: none;
        font: 700 23px/1 var(--display);
      }
      .mobile-menu summary::-webkit-details-marker {
        display: none;
      }
      .mobile-menu summary::before {
        content: "☰";
      }
      .mobile-menu[open] summary::before {
        content: "×";
        font-size: 29px;
      }
      .mobile-menu ul {
        width: min(230px, calc(100vw - 24px));
        position: fixed;
        z-index: 80;
        top: 88px;
        right: 12px;
        left: auto;
        max-height: calc(100dvh - 104px);
        overflow: auto;
        margin: 0;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 15px;
        background: #151515;
        box-shadow: 6px 6px 0 var(--lime);
        list-style: none;
      }
      .mobile-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 11px 13px;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 700;
        transition: background .22s ease, color .22s ease;
      }
      .mobile-menu a:hover, .mobile-menu a:focus-visible {
        background: var(--lime);
        color: #111111;
      }
      .nav-actions {
        gap: 10px;
      }
      .nav-actions .button {
        min-height: 42px;
        padding: 10px 14px;
        font-size: 12px;
      }
      .brand {
        flex: 0 1 auto;
      }
      .brand-mark {
        flex: 0 0 auto;
      }
      .hero, .showcase, .cta, footer {
        width: calc(100% - 32px);
      }
      .trusted, .intro, .notes, .pricing {
        width: calc(100% - 32px);
      }
      .hero {
        min-height: 620px;
        padding: 24px;
        border-radius: 20px;
      }
      .hero-content {
        max-width: 650px;
        margin-top: 80px;
      }
      .hero-wordmark {
        font-size: clamp(48px, 10.5vw, 78px);
        line-height: .92;
      }
      .hero-copy {
        max-width: 560px;
        margin-top: 48px;
        font-size: clamp(17px, 3vw, 22px);
      }
      .prompt-card {
        width: min(620px, 100%);
        margin-top: 52px;
      }
      .hero-foot {
        right: 24px;
        bottom: 26px;
        left: 24px;
      }
      .hero-tags {
        width: 100%;
        justify-content: center;
        transform: translateY(-12px);
      }
      .hero-tags span {
        max-width: 100%;
        line-height: 1.45;
        text-align: center;
      }
      .trusted {
        padding-top: 76px;
        padding-bottom: 82px;
      }
      .logos-track {
        gap: 48px;
        animation-duration: 16s;
      }
      .intro {
        padding-bottom: 78px;
      }
      .intro-grid {
        display: block;
      }
      .intro-copy {
        max-width: 560px;
        margin-top: 26px;
      }
      .showcase {
        min-height: 540px;
      }
      .showcase h3 {
        max-width: 620px;
        font-size: clamp(40px, 8vw, 58px);
      }
      .bright-idea-scene {
        width: min(46%, 330px);
        height: 238px;
        right: calc(50% + 10px);
      }
      .brain-scene {
        width: min(46%, 330px);
        height: 238px;
        right: 24px;
      }
      .business-scene {
        display: none;
      }
      .notes {
        padding-bottom: 82px;
      }
      .notes-head, .service-top, .pricing-head {
        display: block;
      }
      .notes-head p, .service-top p, .pricing-head p {
        max-width: 520px;
        margin-top: 23px;
      }
      .notes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .services {
        padding: 86px 16px;
      }
      .service-list {
        border-top-color: var(--line);
      }
      .service {
        grid-template-columns: 48px minmax(0, 1fr) 40px;
        gap: 14px;
        padding: 21px 0;
        border-bottom-color: var(--line);
      }
      .service:hover {
        padding: 21px 10px;
      }
      .service p {
        grid-column: 2 / 4;
        max-width: 520px;
      }
      .pricing {
        padding-bottom: 84px;
      }
      .currency-selector {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "label"
          "helper"
          "toggle"
          "note";
        row-gap: 8px;
      }
      .currency-toggle {
        justify-self: start;
        margin-top: 4px;
      }
      .currency-toggle button {
        min-width: 72px;
        min-height: 42px;
      }
      .pricing-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }
      .plan {
        min-height: auto;
        padding: 25px;
      }
      .plan-description, .plan-note {
        min-height: 0;
      }
      .plan-price + .plan-note,
      .pricing-plans .plan:first-child .plan-note {
        margin-top: 0;
      }
      .credit-picker-menu {
        max-height: min(290px, 45vh);
        overflow-y: auto;
      }
      .cta {
        min-height: 500px;
        padding: 32px;
      }
      .cta h2 {
        font-size: clamp(54px, 11vw, 86px);
      }
      .cta-copy {
        width: 100%;
        max-width: 680px;
      }
      footer {
        min-height: 0;
        padding: 28px 0;
        flex-wrap: wrap;
      }
      .footer-links {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 12px;
      }
      .about-modal, .contact-modal, .login-modal, .deep-demo-modal, .signup-modal, .solution-modal {
        width: min(620px, calc(100vw - 24px));
        max-height: calc(100dvh - 24px);
      }
      .solution-feature-grid {
        grid-template-columns: 1fr;
      }
      .solution-feature[style*="grid-column"] {
        grid-column: auto !important;
      }
      .article-shell {
        width: calc(100% - 32px);
      }
      .article-header {
        padding-top: 40px;
        padding-bottom: 42px;
      }
      .article-header h2 {
        font-size: clamp(46px, 10vw, 72px);
      }
      .article-visual {
        aspect-ratio: 2.4 / 1;
      }
    }

    @media (max-width: 760px) {
      .brand {
        max-width: calc(100vw - 180px);
      }
      .nav-actions .button {
        padding-right: 12px;
        padding-left: 12px;
      }
      .hero {
        min-height: 635px;
        padding: 21px;
      }
      .hero-top {
        align-items: flex-start;
      }
      .hero-content {
        margin-top: 78px;
      }
      .hero-wordmark {
        font-size: clamp(43px, 12vw, 60px);
        line-height: .94;
      }
      .hero-duck-logo {
        width: .52em;
        height: .52em;
      }
      .hero-copy {
        max-width: 360px;
        margin-top: 50px;
        line-height: 1.12;
      }
      .prompt-card {
        margin-top: 46px;
        box-shadow: 5px 5px 0 #111111;
      }
      .prompt-card textarea {
        min-height: 44px;
      }
      .hero-foot {
        bottom: 96px;
      }
      .hero-tags {
        transform: none;
      }
      .intro h2, .notes-head h2, .service-top h2, .pricing-head h2 {
        font-size: clamp(43px, 11.5vw, 62px);
      }
      .showcase {
        min-height: 505px;
        padding: 22px;
      }
      .showcase h3 {
        margin-top: 38px;
        font-size: clamp(38px, 10vw, 46px);
      }
      .brain-scene {
        display: none;
      }
      .bright-idea-scene {
        width: calc(100% - 44px);
        height: 250px;
        right: 22px;
        bottom: 38px;
      }
      .notes-grid {
        grid-template-columns: 1fr;
      }
      .note-card {
        min-height: 270px;
      }
      .service h3 {
        font-size: clamp(23px, 6vw, 29px);
      }
      .pricing-plans {
        grid-template-columns: 1fr;
      }
      .plan {
        border-radius: 16px;
      }
      .plan h3 {
        font-size: 32px;
      }
      .plan-price {
        font-size: 48px;
      }
      .credit-picker-toggle {
        min-height: 46px;
      }
      .credit-picker-option {
        min-height: 42px;
      }
      .cta {
        min-height: 500px;
        padding: 27px;
      }
      .cta-top {
        gap: 14px;
      }
      .cta h2 {
        margin-bottom: .65em;
        font-size: clamp(50px, 13vw, 72px);
        line-height: .9;
      }
      .cta-copy {
        max-width: none;
        font-size: 15px;
        text-align: left;
      }
      .cta-copy-line, .cta-copy-support {
        grid-template-columns: 22px minmax(0, 1fr);
        column-gap: 9px;
      }
      .cta-copy-icon {
        width: 22px;
        height: 22px;
      }
      footer {
        align-items: center;
        flex-direction: column;
        text-align: center;
      }
      .footer-links {
        justify-content: center;
      }
      .about-modal, .contact-modal, .login-modal, .deep-demo-modal, .signup-modal, .solution-modal {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        padding: 24px 20px;
        transform: translate(-50%, -50%);
      }
      .about-modal h2, .contact-modal h2, .solution-modal h2 {
        margin-right: 42px;
      }
      .solution-modal-actions {
        flex-direction: column;
      }
      .solution-modal-actions .button {
        width: 100%;
      }
      .article-shell {
        width: calc(100% - 32px);
        padding-bottom: 68px;
      }
      .article-nav {
        padding-bottom: 20px;
      }
      .article-header h2 {
        font-size: clamp(42px, 13vw, 60px);
      }
      .article-lead {
        margin-top: 24px;
      }
      .article-visual {
        aspect-ratio: 2 / 1;
      }
      .article-body {
        width: 100%;
      }
      .article-body p {
        font-size: 16px;
        line-height: 1.62;
      }
    }

    @media (max-width: 520px) {
      .nav {
        width: calc(100% - 24px);
      }
      .brand {
        max-width: calc(100vw - 154px);
        gap: 7px;
        font-size: 18px;
      }
      .brand-mark {
        width: 40px;
        height: 40px;
      }
      .brand-mark img {
        width: 29px;
        height: 29px;
      }
      .nav-actions {
        gap: 8px;
      }
      .mobile-menu summary {
        width: 42px;
        height: 42px;
      }
      .mobile-home {
        min-height: 40px;
        padding: 0 12px;
        font-size: 11.5px;
      }
      .nav-actions .button {
        min-height: 40px;
        padding: 9px 11px;
      }
      .hero, .showcase, .cta {
        width: calc(100% - 24px);
        border-radius: 18px;
      }
      .trusted, .intro, .notes, .pricing, footer {
        width: calc(100% - 24px);
      }
      .hero {
        min-height: 650px;
        padding: 18px;
      }
      .hero-top {
        font-size: 9px;
        line-height: 1.35;
      }
      .hero-content {
        margin-top: 78px;
      }
      .hero-wordmark {
        margin-bottom: 18px;
        font-size: clamp(40px, 12.8vw, 54px);
      }
      .hero-copy {
        max-width: 310px;
        margin-top: 46px;
        font-size: clamp(15px, 4.5vw, 18px);
      }
      .prompt-card {
        flex-wrap: wrap;
        gap: 9px;
        padding: 11px 12px;
      }
      .prompt-card textarea {
        min-height: 44px;
        flex: 1 1 calc(100% - 38px);
        padding-top: 7px;
        padding-bottom: 7px;
        font-size: clamp(11.5px, 3.35vw, 14px);
        line-height: 1.25;
        letter-spacing: -.01em;
        white-space: nowrap;
        overflow-x: hidden;
        overflow-wrap: normal;
      }
      .prompt-card textarea::placeholder {
        white-space: nowrap;
        overflow-wrap: normal;
      }
      .prompt-card .button {
        width: 100%;
        min-height: 44px;
      }
      .hero-foot {
        right: 18px;
        bottom: 84px;
        left: 18px;
      }
      .hero-tags span {
        padding: 7px 8px;
        font-size: 8px;
      }
      .logos-track {
        gap: 36px;
      }
      .showcase {
        min-height: 500px;
      }
      .bright-idea-scene {
        width: calc(100% - 36px);
        right: 18px;
        box-shadow: 5px 5px 0 #111111;
      }
      .services {
        padding-right: 12px;
        padding-left: 12px;
      }
      .service {
        grid-template-columns: 36px minmax(0, 1fr) 34px;
        gap: 10px;
      }
      .arrow {
        width: 34px;
        height: 34px;
      }
      .currency-selector {
        padding: 14px;
      }
      .currency-toggle {
        width: 100%;
      }
      .currency-toggle button {
        flex: 1;
      }
      .plan {
        padding: 22px;
      }
      .credit-picker-toggle {
        grid-template-columns: minmax(0, 1fr) auto 13px;
        gap: 7px;
      }
      .credit-picker-option {
        grid-template-columns: minmax(0, 1fr) auto;
      }
      .credit-picker-option-price {
        grid-column: 1 / -1;
        text-align: left;
      }
      .cta {
        min-height: 525px;
        padding: 23px;
      }
      .cta-top {
        font-size: 9px;
        line-height: 1.35;
      }
      .cta h2 {
        font-size: clamp(48px, 14vw, 60px);
      }
      .cta-copy-keep-together {
        white-space: normal;
      }
      .footer-links {
        gap: 14px;
      }
      .article-header h2 {
        font-size: clamp(38px, 12.5vw, 52px);
      }
      .article-visual::before {
        top: 16px;
        left: 18px;
        font-size: 8px;
      }
      .article-visual-word {
        left: 17px;
        max-width: 58%;
        font-size: clamp(34px, 10vw, 46px);
      }
      .article-pullquote {
        margin: 38px 0;
        padding-left: 19px;
      }
      .about-modal, .contact-modal, .login-modal, .deep-demo-modal, .signup-modal, .solution-modal {
        width: calc(100vw - 18px);
        max-height: calc(100dvh - 18px);
        padding: 22px 17px;
      }
      .deep-demo-modal h2 {
        font-size: clamp(17px, 5vw, 23px);
      }
    }

    @media (max-width: 360px) {
      .brand {
        max-width: calc(100vw - 138px);
        font-size: 16px;
      }
      .brand-mark {
        width: 36px;
        height: 36px;
      }
      .brand-mark img {
        width: 26px;
        height: 26px;
      }
      .mobile-menu summary {
        width: 39px;
        height: 39px;
      }
      .mobile-home {
        min-height: 39px;
        padding: 0 10px;
        font-size: 11px;
      }
      .nav-actions .button {
        padding-right: 9px;
        padding-left: 9px;
        font-size: 11px;
      }
      .hero-wordmark {
        font-size: 39px;
      }
      .hero-copy {
        font-size: 15px;
      }
      .intro h2, .notes-head h2, .service-top h2, .pricing-head h2 {
        font-size: 40px;
      }
      .showcase h3 {
        font-size: 34px;
      }
      .plan-price {
        font-size: 42px;
      }
      .cta h2 {
        font-size: 44px;
      }
      .article-header h2 {
        font-size: 36px;
      }
    }

    /* Sleek currency selector refinements */
    @media (max-width: 900px) {
      .currency-selector {
        row-gap: 5px;
        margin: -6px 0 20px;
        padding: 10px 11px;
      }
      .currency-toggle button {
        min-width: 58px;
        min-height: 34px;
        padding: 7px 11px;
      }
      .currency-selector-note {
        margin-top: 2px;
      }
    }
    @media (max-width: 520px) {
      .currency-selector {
        padding: 10px;
        border-radius: 10px;
      }
      .currency-toggle {
        width: auto;
      }
      .currency-toggle button {
        flex: 0 0 auto;
        min-width: 56px;
        min-height: 34px;
        padding: 7px 10px;
      }
    }

    /* Blog article pages use the same landing chrome */
    .article-modal .article-page-header {
      position: relative;
      z-index: 2;
      margin-top: 0;
    }
    .article-modal .article-shell {
      min-height: auto;
      padding: 54px 0 74px;
    }
    .article-modal .article-nav {
      margin-bottom: 22px;
      padding-bottom: 0;
      border-bottom: 0;
    }
    .article-modal .article-back {
      transition: transform .22s ease, color .22s ease;
    }
    .article-modal .article-back:hover, .article-modal .article-back:focus-visible {
      color: #ffe34d;
      transform: translateX(-3px);
    }
    .article-modal .article-close {
      transition: background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease;
    }
    .article-modal .article-close:hover, .article-modal .article-close:focus-visible {
      border-color: var(--lime);
      background: var(--lime);
      color: #111111;
      transform: rotate(8deg) scale(1.04);
    }
    .article-modal .article-header {
      padding: 26px 0 58px;
    }
    .article-modal .article-page-footer {
      margin-top: 0;
    }
    @media (max-width: 900px) {
      .article-modal .article-shell {
        width: calc(100% - 32px);
        padding: 42px 0 60px;
      }
      .article-modal .article-nav {
        margin-bottom: 16px;
      }
      .article-modal .article-page-footer {
        width: calc(100% - 32px);
      }
    }
    @media (max-width: 760px) {
      .article-modal .article-shell {
        padding: 34px 0 54px;
      }
      .article-modal .article-header {
        padding: 24px 0 42px;
      }
      .article-modal .article-nav {
        align-items: center;
        gap: 16px;
      }
    }
    @media (max-width: 520px) {
      .article-modal .article-shell,
      .article-modal .article-page-footer {
        width: calc(100% - 24px);
      }
      .article-modal .article-shell {
        padding-top: 28px;
      }
    }

    .back-to-top {
      --back-to-top-footer-offset: 0px;
      width: 48px;
      height: 48px;
      position: fixed;
      right: max(18px, env(safe-area-inset-right));
      bottom: calc(max(18px, env(safe-area-inset-bottom)) + var(--back-to-top-footer-offset));
      z-index: 80;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,212,0,.7);
      border-radius: 50%;
      background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.5), transparent 31%),
        var(--lime);
      color: #111111;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      box-shadow: 5px 5px 0 rgba(0,0,0,.42), 0 0 24px rgba(255,212,0,.16);
      transform: translateY(14px) scale(.88);
      transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .2, 1), bottom .28s ease, background .22s ease, box-shadow .22s ease, filter .22s ease;
    }
    .back-to-top.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .back-to-top svg {
      width: 20px;
      height: 20px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform .22s ease;
    }
    .back-to-top:hover, .back-to-top:focus-visible {
      background: #ffe34d;
      box-shadow: 6px 6px 0 rgba(0,0,0,.52), 0 0 28px rgba(255,212,0,.24);
      filter: brightness(1.04);
      transform: translateY(-3px) scale(1.03);
    }
    .back-to-top:hover svg, .back-to-top:focus-visible svg {
      transform: translateY(-2px);
    }
    .back-to-top:focus-visible {
      outline: 2px solid rgba(255,212,0,.5);
      outline-offset: 5px;
    }
    .back-to-top:active {
      transform: translateY(0) scale(.97);
    }
    @media (max-width: 900px) {
      .back-to-top {
        width: 50px;
        height: 50px;
        right: max(16px, env(safe-area-inset-right));
        bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--back-to-top-footer-offset));
      }
    }
    @media (max-width: 520px) {
      .back-to-top {
        width: 46px;
        height: 46px;
        right: max(12px, env(safe-area-inset-right));
        bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--back-to-top-footer-offset));
        box-shadow: 4px 4px 0 rgba(0,0,0,.42), 0 0 20px rgba(255,212,0,.14);
      }
      .back-to-top svg {
        width: 19px;
        height: 19px;
      }
    }

    /* Polished footer contact/social center alignment */
    footer {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) max-content minmax(280px, 1fr);
      grid-template-areas: "brand copyright links";
      align-items: center;
      gap: 24px;
    }
    footer .footer-brand-group {
      grid-area: brand;
      justify-self: start;
      display: inline-flex;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap;
      min-width: 0;
    }
    footer .brand {
      justify-self: start;
      flex: 0 0 auto;
    }
    footer .footer-legal-links {
      display: inline-flex;
      align-items: center;
      gap: 10px 16px;
      flex-wrap: wrap;
      min-width: 0;
      color: var(--lime);
      font: 10px var(--mono);
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    footer .footer-legal-links a {
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      line-height: 1;
      text-decoration: none;
      transition: color .2s ease;
    }
    footer .footer-legal-links a:hover,
    footer .footer-legal-links a:focus-visible {
      color: var(--lime);
    }
    footer .footer-links {
      grid-area: links;
      justify-self: end;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px 20px;
      text-align: right;
      white-space: nowrap;
    }
    footer .footer-links a {
      align-items: center;
      line-height: 1;
    }
    footer .footer-links a[href^="mailto:"] {
      font-size: 10px;
      font-family: var(--mono);
      letter-spacing: .12em;
    }
    footer .copyright {
      grid-area: copyright;
      justify-self: center;
      text-align: center;
      white-space: nowrap;
    }
    @media (max-width: 900px) {
      footer {
        grid-template-columns: 1fr;
        grid-template-areas:
          "brand"
          "links"
          "legal"
          "copyright";
        justify-items: center;
        gap: 18px;
      }
      footer .footer-brand-group {
        display: contents;
      }
      footer .brand,
      footer .footer-links,
      footer .footer-legal-links,
      footer .copyright {
        justify-self: center;
      }
      footer .brand {
        grid-area: brand;
        order: 1;
      }
      footer .footer-links {
        grid-area: links;
        order: 2;
        max-width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
      }
      footer .footer-legal-links {
        grid-area: legal;
        order: 3;
        justify-content: center;
        text-align: center;
      }
      footer .copyright {
        order: 4;
        text-align: center;
        white-space: normal;
      }
    }
    @media (max-width: 520px) {
      footer .footer-brand-group,
      footer .footer-legal-links,
      footer .footer-links {
        gap: 13px 16px;
      }
    }

    /* Voice prompt responsive polish */
    @media (max-width: 1050px) {
      .prompt-voice-status {
        right: 126px;
        left: 56px;
        max-width: calc(100% - 182px);
        white-space: normal;
        overflow-wrap: anywhere;
      }
      body.prompt-input-focused .prompt-card textarea {
        flex: 1 1 calc(100% - 92px);
      }
      body.prompt-input-focused .prompt-voice-button {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        align-self: flex-start;
        margin-top: 5px;
      }
      body.prompt-input-focused .prompt-voice-status {
        position: static;
        order: 5;
        flex: 0 0 100%;
        max-width: none;
        min-height: 12px;
        margin: -2px 0 0;
        padding: 0 3px;
        text-align: left;
      }
    }
    @media (max-width: 760px) {
      .prompt-card {
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 9px;
      }
      .prompt-icon {
        order: 1;
      }
      .prompt-card textarea {
        order: 2;
        flex: 1 1 170px;
        min-width: 0;
      }
      .prompt-voice-button {
        order: 3;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
      }
      .prompt-card .button {
        order: 4;
        flex: 0 0 auto;
      }
      .prompt-voice-status {
        position: static;
        order: 5;
        flex: 0 0 100%;
        max-width: none;
        min-height: 12px;
        margin: -1px 0 0;
        padding: 0 4px;
        font-size: 9px;
        line-height: 1.35;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
      }
    }
    @media (max-width: 520px) {
      .prompt-card {
        gap: 8px 9px;
      }
      .prompt-card textarea {
        flex: 1 1 calc(100% - 84px);
        min-height: 42px;
        white-space: normal;
      }
      .prompt-voice-button {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
      }
      .prompt-card .button {
        width: 100%;
        min-height: 44px;
        flex: 0 0 100%;
      }
      .prompt-voice-status {
        margin-top: -2px;
        padding: 0 6px;
        line-height: 1.3;
        text-align: center;
      }
      body.prompt-input-focused .prompt-card textarea {
        flex: 1 1 calc(100% - 84px);
      }
      body.prompt-input-focused .prompt-voice-button {
        align-self: center;
        margin-top: 0;
      }
    }
    @media (max-width: 390px) {
      .prompt-card {
        gap: 7px 8px;
      }
      .prompt-voice-button {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
      }
      .prompt-card textarea {
        flex-basis: calc(100% - 80px);
      }
      body.prompt-input-focused .prompt-card textarea {
        flex-basis: calc(100% - 80px);
      }
    }

    /* Strict mobile/tablet prompt card layout */
    @media (max-width: 1050px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) 42px;
        grid-template-areas:
          "prompt-icon prompt-field prompt-mic"
          "prompt-create prompt-create prompt-create"
          "prompt-attachment prompt-attachment prompt-attachment"
          "prompt-status prompt-status prompt-status";
        align-items: center;
        align-content: start;
        gap: 8px 9px;
        padding: 10px 11px;
        overflow: visible;
      }
      .prompt-icon,
      body.prompt-input-focused .prompt-icon {
        grid-area: prompt-icon;
        width: 28px;
        height: 28px;
        align-self: center;
        margin: 0;
        flex: none;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        grid-area: prompt-field;
        width: 100%;
        height: 42px !important;
        min-width: 0;
        min-height: 42px !important;
        max-height: 68px !important;
        flex: none;
        padding: 10px 0;
        overflow-x: hidden;
        overflow-y: auto;
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 16px;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: break-word;
        resize: none;
      }
      .prompt-card textarea::placeholder {
        white-space: nowrap;
        overflow-wrap: normal;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        grid-area: prompt-mic;
        width: 42px;
        height: 42px;
        align-self: center;
        flex: none;
        margin: 0;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        grid-area: prompt-create;
        width: 100%;
        min-height: 43px;
        flex: none;
        margin: 0;
        padding: 10px 14px;
      }
      .prompt-attachment-row,
      body.prompt-input-focused .prompt-attachment-row {
        grid-area: prompt-attachment;
        width: 100%;
        min-height: 18px;
        margin: -1px 2px 0;
        flex: none;
      }
      .prompt-voice-status,
      body.prompt-input-focused .prompt-voice-status {
        grid-area: prompt-status;
        position: static;
        max-width: none;
        min-height: 0;
        order: initial;
        flex: none;
        margin: -2px 3px 0;
        padding: 0;
        color: #747574;
        font-size: 9.5px;
        line-height: 1.35;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
      }
      .prompt-voice-status[data-state="listening"],
      .prompt-voice-status[data-state="processing"],
      .prompt-voice-status[data-state="success"] {
        color: #7c7900;
      }
      .prompt-voice-status[data-state="denied"],
      .prompt-voice-status[data-state="no-mic"],
      .prompt-voice-status[data-state="error"] {
        color: #9b3b16;
      }
    }
    @media (max-width: 520px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 26px minmax(0, 1fr) 40px;
        gap: 7px 8px;
        padding: 10px;
      }
      .prompt-icon,
      body.prompt-input-focused .prompt-icon {
        width: 26px;
        height: 26px;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 64px !important;
        padding: 8px 0;
        font-size: 15px;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        width: 40px;
        height: 40px;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        min-height: 42px;
      }
      .prompt-voice-status,
      body.prompt-input-focused .prompt-voice-status {
        margin-top: -3px;
        padding: 0 2px;
        font-size: 9px;
        text-align: left;
      }
    }

    /* Final mobile/tablet hero prompt and tags refinement */
    @media (max-width: 1050px) {
      .hero {
        height: auto;
        padding-bottom: 28px;
      }
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        width: min(640px, 100%);
        margin-top: 44px;
        padding: 8px 10px 7px;
        grid-template-columns: 26px minmax(0, 1fr) 38px;
        grid-template-areas:
          "prompt-icon prompt-field prompt-mic"
          "prompt-create prompt-create prompt-create"
          "prompt-attachment prompt-attachment prompt-attachment"
          "prompt-status prompt-status prompt-status";
        gap: 5px 8px;
        align-items: center;
        border-radius: 14px;
        box-shadow: 5px 5px 0 #111111;
      }
      .prompt-icon,
      body.prompt-input-focused .prompt-icon {
        width: 26px;
        height: 26px;
        align-self: center;
        margin: 0;
        font-size: 18px;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        height: 36px !important;
        min-height: 36px !important;
        max-height: 48px !important;
        padding: 7px 0;
        font-size: 15px;
        line-height: 1.22;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        width: 38px;
        height: 38px;
        align-self: center;
        margin: 0;
      }
      .prompt-voice-button svg {
        width: 17px;
        height: 17px;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        min-height: 38px;
        margin: 1px 0 0;
        padding: 8px 12px;
      }
      .prompt-attachment-row,
      body.prompt-input-focused .prompt-attachment-row {
        min-height: 17px;
        margin: -2px 2px 0;
        font-size: 8.5px;
      }
      .prompt-file-chip {
        max-width: 46%;
        min-height: 22px;
        padding: 3px 4px 3px 8px;
        font-size: 9.5px;
      }
      .prompt-file-remove {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
      }
      .prompt-voice-status,
      body.prompt-input-focused .prompt-voice-status {
        min-height: 10px;
        margin: -1px 2px 0;
        font-size: 8.5px;
        line-height: 1.15;
        letter-spacing: .03em;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: .76;
      }
      .hero-foot {
        width: min(640px, 100%);
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        display: block;
        margin: 16px auto 0;
        font-size: 10px;
        line-height: 1.45;
      }
      .hero-tags {
        width: 100%;
        justify-content: center;
        gap: 0;
        margin: 0;
        transform: none;
      }
      .hero-tags span {
        width: 100%;
        padding: 8px 10px;
        border-color: rgba(247,243,232,.2);
        line-height: 1.45;
        text-align: center;
        white-space: normal;
      }
    }
    @media (max-width: 760px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        margin-top: 40px;
      }
      .hero-foot {
        margin-top: 18px;
      }
    }
    @media (max-width: 520px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 24px minmax(0, 1fr) 36px;
        gap: 5px 7px;
        padding: 8px 9px 6px;
      }
      .prompt-icon,
      body.prompt-input-focused .prompt-icon {
        width: 24px;
        height: 24px;
        font-size: 17px;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 44px !important;
        padding: 6px 0;
        font-size: clamp(13px, 3.45vw, 14px);
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        width: 36px;
        height: 36px;
      }
      .prompt-voice-button svg {
        width: 16px;
        height: 16px;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        min-height: 36px;
        padding: 7px 11px;
      }
      .prompt-attachment-row,
      body.prompt-input-focused .prompt-attachment-row {
        gap: 7px;
        margin-top: -2px;
        font-size: 8px;
      }
      .prompt-attachment-helper {
        max-width: 52%;
      }
      .prompt-file-chip {
        max-width: 48%;
      }
      .prompt-voice-status,
      body.prompt-input-focused .prompt-voice-status {
        min-height: 9px;
        margin-top: -2px;
        font-size: 8px;
        line-height: 1.1;
      }
      .hero-foot {
        margin-top: 14px;
      }
      .hero-tags span {
        padding: 7px 9px;
        font-size: 8.5px;
      }
    }

    .intro-copy,
    .service-top p,
    .notes-head p,
    .pricing-head p {
      font-size: 16px;
    }

    /* Mobile/tablet hero tags: keep inline desktop-style text, no chips */
    @media (max-width: 1050px) {
      .hero-tags {
        display: block;
        text-align: center;
      }
      .hero-tags span {
        width: auto;
        max-width: 100%;
        display: inline;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        line-height: 1.55;
        white-space: normal;
      }
    }

    /* Keep attach feedback from changing the main Ask Sweetduck control row */
    .prompt-card {
      flex-wrap: nowrap;
    }
    .prompt-card .button {
      flex: 0 0 auto;
    }
    .prompt-attachment-row {
      width: min(300px, calc(100% - 42px));
      min-height: 0;
      position: absolute;
      top: calc(100% + 25px);
      right: auto;
      left: 12px;
      z-index: 2;
      margin: 0;
      display: flex;
      justify-content: flex-start;
      text-align: left;
      pointer-events: none;
    }
    .prompt-attachment-row[data-state="empty"] {
      opacity: 0;
      visibility: hidden;
    }
    .prompt-attachment-helper {
      width: 1px;
      height: 1px;
      position: absolute;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .prompt-file-chip {
      max-width: 100%;
      pointer-events: auto;
    }
    .prompt-file-remove {
      pointer-events: auto;
    }
    .prompt-voice-status {
      right: 0;
      left: 0;
      text-align: center;
    }
    @media (max-width: 1050px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-areas:
          "prompt-icon prompt-field prompt-mic"
          "prompt-create prompt-create prompt-create"
          "prompt-status prompt-status prompt-status" !important;
      }
      .prompt-attachment-row,
      body.prompt-input-focused .prompt-attachment-row {
        width: min(260px, calc(100% - 20px));
        position: absolute;
        top: calc(100% + 4px);
        right: auto;
        left: 10px;
        margin: 0;
      }
      .prompt-voice-status,
      body.prompt-input-focused .prompt-voice-status {
        right: auto;
      }
    }
    @media (max-width: 520px) {
      .prompt-attachment-row,
      body.prompt-input-focused .prompt-attachment-row {
        width: min(220px, calc(100% - 18px));
        top: calc(100% + 3px);
        right: auto;
        left: 9px;
      }
    }

    /* Ask Sweetduck compact action row: keep mic and Create adjacent */
    @media (max-width: 1050px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 26px minmax(0, 1fr) 38px max-content;
        grid-template-areas:
          "prompt-icon prompt-field prompt-mic prompt-create"
          "prompt-status prompt-status prompt-status prompt-status" !important;
        align-items: center;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        width: auto;
        min-width: 86px;
        min-height: 38px;
        justify-self: end;
        margin: 0;
        padding: 8px 12px;
        white-space: nowrap;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        justify-self: end;
      }
    }
    @media (max-width: 520px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 24px minmax(0, 1fr) 36px max-content;
        gap: 5px 7px;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        width: auto;
        min-width: 80px;
        min-height: 36px;
        padding: 7px 10px;
      }
    }
    @media (max-width: 390px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 24px minmax(0, 1fr) 34px max-content;
        gap: 5px 6px;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        min-width: 76px;
        padding-right: 9px;
        padding-left: 9px;
      }
    }

    /* Mobile/tablet Ask Sweetduck prompt: roomy text row + grouped actions */
    @media (max-width: 1050px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        width: min(640px, 100%);
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) 40px max-content;
        grid-template-areas:
          "prompt-icon prompt-field prompt-field prompt-field"
          ". prompt-field prompt-mic prompt-create"
          "prompt-status prompt-status prompt-status prompt-status" !important;
        align-items: center;
        gap: 7px 8px;
        margin-top: 44px;
        padding: 10px 11px 8px;
        border-radius: 15px;
        overflow: visible;
      }
      .prompt-icon,
      body.prompt-input-focused .prompt-icon {
        grid-area: prompt-icon;
        width: 28px;
        height: 28px;
        align-self: start;
        margin: 4px 0 0;
        flex: none;
        font-size: 18px;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        grid-area: prompt-field;
        width: 100%;
        height: 42px !important;
        min-width: 0;
        min-height: 42px !important;
        max-height: 58px !important;
        flex: none;
        padding: 9px 0;
        overflow-x: hidden;
        overflow-y: auto;
        color: #111111;
        font-size: 16px;
        line-height: 1.28;
        white-space: normal;
        overflow-wrap: break-word;
      }
      .prompt-card textarea::placeholder {
        white-space: nowrap;
        overflow-wrap: normal;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        grid-area: prompt-mic;
        width: 40px;
        height: 40px;
        align-self: center;
        justify-self: end;
        flex: none;
        margin: 0;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        grid-area: prompt-create;
        width: auto;
        min-width: 88px;
        min-height: 40px;
        justify-self: start;
        margin: 0;
        padding: 9px 13px;
        white-space: nowrap;
      }
      .prompt-voice-status,
      body.prompt-input-focused .prompt-voice-status {
        grid-area: prompt-status;
        position: static;
        max-width: none;
        min-height: 12px;
        margin: -2px 3px 0;
        padding: 0;
        flex: none;
        color: #747574;
        font-size: 10px;
        line-height: 1.25;
        letter-spacing: .03em;
        text-align: center;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .prompt-attachment-row,
      body.prompt-input-focused .prompt-attachment-row {
        width: min(260px, calc(100% - 20px));
        position: absolute;
        top: calc(100% + 5px);
        right: auto;
        left: 10px;
        z-index: 3;
        margin: 0;
      }
      .prompt-file-chip {
        max-width: 100%;
      }
      .hero-foot {
        margin-top: 24px;
      }
    }
    @media (max-width: 520px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 26px minmax(0, 1fr) 38px max-content;
        gap: 6px 7px;
        padding: 9px 10px 7px;
      }
      .prompt-icon,
      body.prompt-input-focused .prompt-icon {
        width: 26px;
        height: 26px;
        margin-top: 4px;
        font-size: 17px;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 54px !important;
        padding: 8px 0;
        font-size: 15px;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        width: 38px;
        height: 38px;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        min-width: 82px;
        min-height: 38px;
        padding: 8px 11px;
      }
      .prompt-voice-status,
      body.prompt-input-focused .prompt-voice-status {
        margin-top: -3px;
        font-size: 9.5px;
      }
      .prompt-attachment-row,
      body.prompt-input-focused .prompt-attachment-row {
        width: min(230px, calc(100% - 18px));
        top: calc(100% + 4px);
        right: auto;
        left: 9px;
      }
      .hero-foot {
        margin-top: 22px;
      }
    }
    @media (max-width: 390px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 25px minmax(0, 1fr) 36px max-content;
        gap: 6px;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        font-size: 14px;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        width: 36px;
        height: 36px;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        min-width: 78px;
        min-height: 36px;
        padding-right: 9px;
        padding-left: 9px;
      }
    }

    /* Final Ask Sweetduck mobile/tablet prompt refinement */
    @media (max-width: 1050px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        width: min(640px, 100%);
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) 40px max-content;
        grid-template-areas:
          "prompt-icon prompt-field prompt-field prompt-field"
          ". . prompt-mic prompt-create"
          "prompt-status prompt-status prompt-status prompt-status" !important;
        align-items: center;
        gap: 10px 9px;
        margin-top: 44px;
        padding: 12px 13px 10px;
        border-radius: 16px;
      }
      .prompt-icon,
      body.prompt-input-focused .prompt-icon {
        grid-area: prompt-icon;
        width: 28px;
        height: 28px;
        align-self: start;
        justify-self: start;
        margin: 8px 0 0;
        flex: none;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        grid-area: prompt-field;
        width: 100%;
        height: 52px !important;
        min-width: 0;
        min-height: 52px !important;
        max-height: 84px !important;
        flex: none;
        padding: 5px 0 4px;
        overflow-x: hidden;
        overflow-y: auto;
        font-size: 16px;
        line-height: 1.28;
        white-space: normal;
        overflow-wrap: break-word;
      }
      .prompt-card textarea::placeholder {
        white-space: normal;
        overflow-wrap: normal;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        grid-area: prompt-mic;
        width: 40px;
        height: 40px;
        align-self: center;
        justify-self: end;
        flex: none;
        margin: -4px 0 0;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        grid-area: prompt-create;
        width: auto;
        min-width: 82px;
        min-height: 40px;
        justify-self: start;
        margin: -4px 0 0;
        padding: 8px 12px;
        white-space: nowrap;
      }
      .prompt-voice-status,
      body.prompt-input-focused .prompt-voice-status {
        grid-area: prompt-status;
        position: static;
        max-width: none;
        min-height: 10px;
        margin: -2px 3px 0;
        padding: 0;
        flex: none;
        font-size: 9px;
        line-height: 1.25;
        letter-spacing: .03em;
        text-align: center;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: .72;
      }
      .hero-foot {
        margin-top: 18px;
      }
      .prompt-card:has(.prompt-attachment-row[data-state="selected"]) + .hero-foot {
        margin-top: 40px;
      }
    }
    @media (max-width: 520px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 28px minmax(0, 1fr) 38px max-content;
        gap: 9px 8px;
        padding: 11px 12px 9px;
      }
      .prompt-icon,
      body.prompt-input-focused .prompt-icon {
        width: 26px;
        height: 26px;
        margin-top: 8px;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 78px !important;
        padding-right: 0;
        padding-left: 0;
        font-size: 15px;
        line-height: 1.3;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        width: 38px;
        height: 38px;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        min-width: 78px;
        min-height: 38px;
        padding: 8px 10px;
      }
      .prompt-voice-status,
      body.prompt-input-focused .prompt-voice-status {
        margin-top: -2px;
        font-size: 8.5px;
        line-height: 1.2;
      }
      .hero-foot {
        margin-top: 16px;
      }
    }
    @media (max-width: 390px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 27px minmax(0, 1fr) 36px max-content;
        gap: 8px 7px;
        padding: 10px 11px 8px;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 74px !important;
        font-size: 14px;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        width: 36px;
        height: 36px;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        min-width: 74px;
        min-height: 36px;
        padding-right: 9px;
        padding-left: 9px;
      }
    }

    /* Mobile Ask Sweetduck prompt: top controls + full-width Create action */
    @media (max-width: 1050px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 30px minmax(0, 1fr) 38px;
        grid-template-areas:
          "prompt-icon prompt-field prompt-mic"
          "prompt-create prompt-create prompt-create"
          "prompt-status prompt-status prompt-status" !important;
        gap: 8px 9px;
        padding: 11px 12px 9px;
        align-items: center;
      }
      .prompt-icon,
      body.prompt-input-focused .prompt-icon {
        align-self: center;
        margin: 0;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 64px !important;
        padding: 8px 0;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        width: 38px;
        height: 38px;
        align-self: center;
        justify-self: end;
        margin: 0;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        justify-self: stretch;
        margin: 0;
        padding: 8px 13px;
        border-radius: 999px;
      }
      .prompt-voice-status,
      body.prompt-input-focused .prompt-voice-status {
        margin: -1px 3px 0;
        text-align: center;
      }
    }
    @media (max-width: 520px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 28px minmax(0, 1fr) 36px;
        gap: 7px 8px;
        padding: 10px 11px 8px;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 58px !important;
        font-size: 15px;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        width: 36px;
        height: 36px;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        min-height: 37px;
        padding-top: 7px;
        padding-bottom: 7px;
      }
    }
    @media (max-width: 390px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 26px minmax(0, 1fr) 36px;
        gap: 7px;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 54px !important;
        font-size: 14px;
      }
      .prompt-card .button,
      body.prompt-input-focused .prompt-card .button {
        min-height: 36px;
      }
    }

    /* Mobile Ask Sweetduck prompt: keep the field sentence on one clean line */
    @media (max-width: 760px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 24px minmax(0, 1fr) 34px;
        gap: 5px;
        padding: 8px 8px 7px;
      }
      .prompt-icon,
      body.prompt-input-focused .prompt-icon {
        width: 24px;
        height: 24px;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 44px !important;
        min-width: 0;
        padding: 7px 0 6px;
        overflow-x: hidden;
        overflow-y: hidden;
        font-size: clamp(12.4px, 3.45vw, 14.6px);
        line-height: 1.2;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        text-overflow: ellipsis;
      }
      .prompt-card textarea::placeholder {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        text-overflow: ellipsis;
        opacity: 1;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        width: 34px;
        height: 34px;
      }
    }
    @media (max-width: 520px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 22px minmax(0, 1fr) 30px;
        gap: 4px;
        padding: 8px 7px 7px;
      }
      .prompt-icon,
      body.prompt-input-focused .prompt-icon {
        width: 22px;
        height: 22px;
        font-size: 15px;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 38px !important;
        padding: 6px 0 5px;
        font-size: clamp(11.2px, 3.35vw, 13.2px);
        letter-spacing: -.018em;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        width: 30px;
        height: 30px;
      }
      .prompt-voice-button svg {
        width: 14px;
        height: 14px;
      }
    }
    @media (max-width: 390px) {
      .prompt-card,
      body.prompt-input-focused .prompt-card {
        grid-template-columns: 21px minmax(0, 1fr) 30px;
        gap: 4px;
        padding: 7px 6px 7px;
      }
      .prompt-card textarea,
      body.prompt-input-focused .prompt-card textarea {
        font-size: clamp(11.2px, 3.25vw, 12.2px);
        letter-spacing: -.03em;
      }
      .prompt-voice-button,
      body.prompt-input-focused .prompt-voice-button {
        width: 30px;
        height: 30px;
      }
    }

/* 2026-08-31: hard-lock blog header buttons to homepage values */
body.sweetduck-blog > header.nav .login {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 13px/1 "DM Sans", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
body.sweetduck-blog > header.nav .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border: 1px solid var(--lime);
  border-radius: 999px;
  background: var(--lime);
  color: #111111;
  font: 700 13px/1 "DM Sans", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
body.sweetduck-blog > header.nav .button > span::before {
  color: #111111;
  font: 700 18px/1 "DM Sans", sans-serif;
}
@media (min-width: 901px) and (max-width: 1050px) {
  body.sweetduck-blog > header.nav .login {
    font: 600 12px/1 "DM Sans", sans-serif;
  }
  body.sweetduck-blog > header.nav .nav-actions .button {
    padding: 11px 13px;
    font: 700 12px/1 "DM Sans", sans-serif;
  }
}
@media (max-width: 900px) {
  body.sweetduck-blog > header.nav .login {
    display: none;
  }
  body.sweetduck-blog > header.nav .nav-actions .button {
    min-height: 42px;
    padding: 10px 14px;
    font: 700 12px/1 "DM Sans", sans-serif;
  }
}
@media (max-width: 760px) {
  body.sweetduck-blog > header.nav .nav-actions .button {
    padding-right: 12px;
    padding-left: 12px;
  }
}
@media (max-width: 520px) {
  body.sweetduck-blog > header.nav .nav-actions .button {
    min-height: 40px;
    padding: 9px 11px;
  }
}

/* 2026-09-04: keep the Spanish mobile login link yellow on every blog route. */
@media (max-width: 900px) {
  body.sweetduck-blog-es > header.nav #blog-es-mobile-nav a.mobile-login-link,
  body.sweetduck-blog-es > header.nav #blog-es-mobile-nav a.mobile-login-link:visited,
  body.sweetduck-blog-es > header.nav #blog-es-mobile-nav a.mobile-login-link:active {
    color: #ffd400 !important;
  }
}
@media (max-width: 390px) {
  body.sweetduck-blog > header.nav .nav-actions .button {
    padding-right: 9px;
    padding-left: 9px;
    font: 700 11px/1 "DM Sans", sans-serif;
  }
}
/* Hide the standalone Home label from the responsive header; desktop nav remains unchanged. */
@media (max-width: 900px) {
  body.sweetduck-blog > header.nav .nav-actions > a.mobile-home {
    display: none !important;
  }
}

    /* Homepage-matched Solution CTA */
    .solution-modal-cta {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      grid-template-areas:
        "image text"
        "image actions";
      align-items: center;
      gap: 7px 12px;
      margin-top: 16px;
      padding: 11px 13px;
      border: 1px solid rgba(255,212,0,.45);
      border-radius: 12px;
      background: rgba(255,212,0,.08);
    }
    .solution-modal-cta p {
      grid-area: text;
      margin: 0;
      color: var(--ink);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -.02em;
    }
    .solution-modal-cta-image {
      grid-area: image;
      width: 44px;
      height: 44px;
      display: block;
      object-fit: contain;
      border: 1px solid rgba(247,243,232,.18);
      border-radius: 8px;
      background: #0b0b0b;
      box-shadow: 2px 2px 0 rgba(0,0,0,.25);
    }
    .solution-modal-actions {
      grid-area: actions;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: center;
      gap: 7px;
      min-width: 0;
    }
    .solution-modal-actions .button {
      min-width: 0;
      min-height: 36px;
      padding: 8px 10px;
      font-size: 12px;
    }
    @media (max-width: 760px) {
      .solution-modal-cta {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "text image"
          "actions actions";
        gap: 9px 11px;
        margin-top: 14px;
        padding: 12px;
      }
      .solution-modal-cta-image { width: 38px; height: 38px; }
      .solution-modal-actions {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }
      .solution-modal-actions .button {
        min-height: 34px;
        padding: 7px 9px;
        font-size: 11px;
      }
    }

/* Spanish blog header/footer parity with the Spanish homepage */
body.sweetduck-blog-es > header.nav,
body.sweetduck-blog-es > footer { width: min(1360px, calc(100% - 48px)); }
body.sweetduck-blog-es > header.nav { margin-top: 0 !important; }
body.sweetduck-blog-es > footer { grid-template-areas: "left copyright links"; }
body.sweetduck-blog-es > footer .footer-left-group { grid-area: left; display: inline-flex; align-items: center; justify-self: start; gap: 18px; min-width: 0; }
body.sweetduck-blog-es > footer .footer-legal-links { gap: 10px; white-space: nowrap; }
body.sweetduck-blog-es > header.nav .mobile-menu-toggle { display: none; }
@media (max-width: 900px) {
  body.sweetduck-blog-es > header.nav .mobile-menu { display: block; position: relative; order: 0; flex: 0 0 auto; margin-left: 0; align-self: center; }
  body.sweetduck-blog-es > header.nav .mobile-menu-toggle { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; color: var(--ink); background: transparent; font: 700 22px/1 var(--display); }
  body.sweetduck-blog-es > header.nav .mobile-menu-toggle:focus-visible { outline: 2px solid rgba(255,212,0,.55); outline-offset: 3px; }
  body.sweetduck-blog-es > header.nav .mobile-menu.is-open .mobile-menu-toggle span { font-size: 29px; }
  body.sweetduck-blog-es > header.nav .mobile-menu > ul[hidden] { display: none !important; }
  body.sweetduck-blog-es > header.nav .mobile-menu.is-open > ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(230px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    left: auto;
    right: 12px;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  body.sweetduck-blog-es > header.nav .mobile-menu.is-open > ul li,
  body.sweetduck-blog-es > header.nav .mobile-menu.is-open > ul a {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
  }
  body.sweetduck-blog-es > footer { grid-template-areas: "left" "links" "legal" "copyright"; }
  body.sweetduck-blog-es > footer .footer-left-group { display: contents; }
  body.sweetduck-blog-es > footer .footer-legal-links { grid-area: legal; justify-self: center; white-space: normal; }
  body.sweetduck-blog-es > footer .brand { grid-area: left; max-width: none; width: max-content; justify-self: center; }
  body.sweetduck-blog-es > footer .footer-links { width: 249.5px; max-width: none; }
  body.sweetduck-blog-es > footer .footer-links a[href^="mailto:"] { font: 700 12px/12px var(--sans); letter-spacing: normal; }
  body.sweetduck-blog-es > footer .footer-legal-links { width: 133.2px; gap: 9px; font: 10px var(--mono); letter-spacing: normal; line-height: normal; }
  body.sweetduck-blog-es > footer .footer-legal-links a { line-height: normal; }
  body.sweetduck-blog-es > footer .copyright { width: 276px; max-width: none; }
}

/* Spanish blog inline link to the AI website builder landing. */
body.sweetduck-blog-es .blog-ai-web-link {
  color: var(--lime, #ffd400);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
body.sweetduck-blog-es .blog-ai-web-link:hover,
body.sweetduck-blog-es .blog-ai-web-link:focus-visible {
  color: var(--lime, #ffd400);
  text-decoration-thickness: 3px;
}
body.sweetduck-blog-es .blog-ai-web-link:focus-visible {
  outline: 2px solid var(--lime, #ffd400);
  outline-offset: 3px;
}

/* Keep the Spanish blog mobile header identical to the Spanish homepage. */
@media (max-width: 900px) {
  body.sweetduck-blog-es > header.nav .nav-actions {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
  }
  body.sweetduck-blog-es > header.nav .nav-actions > .mobile-menu {
    order: -1 !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    max-width: 44px !important;
    margin: 0 !important;
    align-self: center !important;
  }
  body.sweetduck-blog-es > header.nav .nav-actions > .mobile-menu .mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    border: 1px solid var(--line, rgba(247,243,232,.2)) !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--ink, #f7f3e8) !important;
    cursor: pointer !important;
    font: 700 22px/1 var(--display, "Space Grotesk", sans-serif) !important;
  }
}