:root {
        --bg: #f8f7fc;
        --paper: #fff;
        --ink: #171522;
        --muted: #716d82;
        --line: #e9e5f3;
        --violet: #6e4df6;
        --violet2: #9a61ff;
        --pink: #ff5ca8;
        --cyan: #4cc9f0;
        --gold: #f8b84e;
        --shadow: 0 22px 60px rgba(59, 42, 110, 0.1);
        --radius: 28px;
        --max: 1240px;
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          'Segoe UI',
          sans-serif;
        background:
          radial-gradient(circle at 8% 0%, #f2edff 0, transparent 34%),
          radial-gradient(circle at 100% 22%, #fff0f8 0, transparent 30%), var(--bg);
        color: var(--ink);
        line-height: 1.65;
      }
      .wrap {
        width: min(var(--max), calc(100% - 40px));
        margin: auto;
      }
      .sitebar {
        position: sticky;
        top: 0;
        z-index: 20;
        background: rgba(255, 255, 255, 0.86);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(232, 227, 243, 0.8);
      }
      .sitebar .inner {
        min-height: 68px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: var(--ink);
        font-weight: 850;
        letter-spacing: -0.02em;
      }
      .brand-mark {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 12px;
        color: #fff;
        background: linear-gradient(135deg, var(--violet), var(--pink));
        box-shadow: 0 8px 18px rgba(110, 77, 246, 0.28);
      }
      .navline {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }
      .nav-pill {
        font-size: 12px;
        font-weight: 800;
        padding: 8px 12px;
        border-radius: 999px;
        background: #f2efff;
        color: #6848db;
      }
      .hero {
        padding: 70px 0 44px;
      }
      .hero-grid {
        display: grid;
        grid-template-columns: 1.08fr 0.92fr;
        align-items: center;
        gap: 44px;
      }
      .eyebrow {
        display: inline-flex;
        gap: 8px;
        align-items: center;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--violet);
        background: #f0edff;
        border: 1px solid #e2dcff;
        padding: 8px 12px;
        border-radius: 999px;
      }
      .hero h1 {
        font-size: clamp(44px, 6vw, 78px);
        line-height: 0.98;
        letter-spacing: -0.06em;
        margin: 20px 0 20px;
        max-width: 820px;
      }
      .hero p {
        font-size: 18px;
        color: var(--muted);
        max-width: 760px;
      }
      .cta-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 26px;
      }
      .btn {
        appearance: none;
        border: 0;
        border-radius: 14px;
        padding: 14px 20px;
        font-weight: 900;
        font-size: 15px;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
        transition: 0.2s ease;
      }
      .btn-primary {
        background: linear-gradient(135deg, var(--violet), var(--violet2));
        color: #fff;
        box-shadow: 0 12px 28px rgba(110, 77, 246, 0.28);
      }
      .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 34px rgba(110, 77, 246, 0.34);
      }
      .btn-secondary {
        background: #fff;
        color: #2d2741;
        border: 1px solid var(--line);
      }
      .hero-stage {
        min-height: 460px;
        border-radius: 36px;
        background: linear-gradient(145deg, #1c1735, #432b6a 60%, #7c3d85);
        position: relative;
        overflow: hidden;
        box-shadow: 0 35px 80px rgba(42, 25, 77, 0.28);
      }
      .hero-stage:before,
      .hero-stage:after {
        content: '';
        position: absolute;
        inset: auto;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        filter: blur(40px);
        opacity: 0.55;
      }
      .hero-stage:before {
        background: #a264ff;
        left: -70px;
        top: -80px;
      }
      .hero-stage:after {
        background: #ff4f9a;
        right: -70px;
        bottom: -80px;
      }
      .stage-lines {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          110deg,
          transparent 0 15%,
          rgba(255, 255, 255, 0.06) 15.2% 15.7%,
          transparent 15.9% 39%,
          rgba(255, 255, 255, 0.05) 39.2% 39.6%,
          transparent 39.8%
        );
      }
      .hero-chibis {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 8px;
        padding: 40px 26px 26px;
      }
      .chibi-shell {
        width: 31%;
        max-width: 170px;
        filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.22));
        animation: floaty 4s ease-in-out infinite;
      }
      .chibi-shell:nth-child(2) {
        transform: translateY(-22px);
        animation-delay: -1s;
      }
      .chibi-shell:nth-child(3) {
        animation-delay: -2s;
      }
      @keyframes floaty {
        50% {
          transform: translateY(-8px);
        }
      }
      .section {
        padding: 42px 0;
      }
      .section h2 {
        font-size: clamp(28px, 4vw, 44px);
        letter-spacing: -0.04em;
        margin: 0 0 10px;
      }
      .lead {
        font-size: 17px;
        color: var(--muted);
        max-width: 840px;
      }
      .grid-4,
      .grid-3,
      .role-grid {
        display: grid;
        gap: 16px;
        margin-top: 24px;
      }
      .grid-4 {
        grid-template-columns: repeat(4, 1fr);
      }
      .grid-3 {
        grid-template-columns: repeat(3, 1fr);
      }
      .role-grid {
        grid-template-columns: repeat(4, 1fr);
      }
      .card {
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid var(--line);
        border-radius: 22px;
        padding: 22px;
        box-shadow: 0 10px 30px rgba(70, 54, 112, 0.06);
      }
      .card h3 {
        margin: 12px 0 6px;
        font-size: 18px;
      }
      .card p {
        color: var(--muted);
        margin: 0;
        font-size: 14px;
      }
      .icon-badge {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, #f1edff, #fff0f7);
        font-size: 23px;
      }
      .role-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 17px;
        display: flex;
        gap: 12px;
        align-items: center;
        min-height: 96px;
        transition: 0.2s ease;
      }
      .role-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 30px rgba(69, 49, 114, 0.08);
      }
      .mini-avatar {
        width: 54px;
        height: 54px;
        border-radius: 17px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, #f1ecff, #fff0f7);
        overflow: hidden;
        flex: 0 0 auto;
      }
      .role-card b {
        display: block;
        font-size: 15px;
      }
      .role-card span {
        display: block;
        color: var(--muted);
        font-size: 12px;
      }
      .info-band {
        border-radius: 28px;
        padding: 34px;
        background: linear-gradient(135deg, #241b45, #6041a3 60%, #8f4d8c);
        color: #fff;
        box-shadow: var(--shadow);
      }
      .info-band p {
        opacity: 0.86;
        margin: 0;
        max-width: 900px;
      }
      [data-ad-slot] {
        width: auto;
        height: auto;
        margin: 13px 0;
        text-align: center;
        position: relative;
      }
      [data-ad-slot]::before {
        content: 'Advertisement';
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        font-weight: 900;
        color: #9a95a7;
        margin-bottom: 6px;
        line-height: 1;
      }
      .page-hero {
        padding: 44px 0 24px;
      }
      .topic-strip {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }
      .topic {
        padding: 8px 11px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 850;
        background: #f1edff;
        color: #6546d8;
      }
      .progress {
        height: 8px;
        background: #ece8f5;
        border-radius: 999px;
        overflow: hidden;
        margin: 18px 0 0;
      }
      .progress > span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--violet), var(--pink));
        border-radius: 999px;
      }
      .content-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.55fr);
        gap: 24px;
        align-items: start;
      }
      .question-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 28px;
        padding: 30px;
        box-shadow: var(--shadow);
      }
      .question-kicker {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.13em;
        font-weight: 900;
        color: var(--violet);
      }
      .question-card h1 {
        font-size: clamp(34px, 5vw, 54px);
        line-height: 1.05;
        letter-spacing: -0.05em;
        margin: 10px 0;
      }
      .question-card .prompt {
        font-size: 18px;
        color: var(--muted);
        margin-bottom: 22px;
      }
      .answers {
        display: grid;
        gap: 12px;
      }
      .answer {
        width: 100%;
        border: 1px solid #e5e0f0;
        background: #fff;
        border-radius: 16px;
        min-height: 64px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 13px;
        text-align: left;
        font-size: 15px;
        font-weight: 800;
        color: var(--ink);
        cursor: pointer;
        transition: 0.18s ease;
      }
      .answer:hover,
      .answer:focus-visible {
        border-color: #bcaaff;
        box-shadow: 0 0 0 4px #f0ecff;
        transform: translateY(-1px);
        outline: none;
      }
      .answer .key {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        background: #f0ecff;
        color: var(--violet);
        display: grid;
        place-items: center;
        font-weight: 900;
        flex: 0 0 auto;
      }
      .insight {
        background: linear-gradient(180deg, #fff, #fbf9ff);
        border: 1px solid var(--line);
        border-radius: 22px;
        padding: 22px;
      }
      .insight h3 {
        margin-top: 0;
      }
      .insight p,
      .insight li {
        color: var(--muted);
        font-size: 14px;
      }
      .insight ul {
        padding-left: 18px;
        margin-bottom: 0;
      }
      .substantive {
        margin-top: 24px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 24px;
        padding: 26px;
      }
      .substantive h2 {
        font-size: 26px;
        margin-top: 0;
      }
      .substantive p {
        color: var(--muted);
      }
      .commerce-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
      }
      .commerce-item {
        padding: 15px;
        border-radius: 16px;
        background: #f9f7ff;
        border: 1px solid #ebe6f7;
      }
      .commerce-item b {
        display: block;
        font-size: 14px;
      }
      .commerce-item span {
        font-size: 12px;
        color: var(--muted);
      }
      .result-wrap {
        padding: 46px 0;
      }
      .result-hero {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        align-items: center;
        background: linear-gradient(135deg, #21193c, #59419a 62%, #943f78);
        color: #fff;
        padding: 34px;
        border-radius: 32px;
        box-shadow: 0 30px 70px rgba(43, 30, 82, 0.25);
      }
      .result-art {
        display: block;
        width: 100%;
        max-width: 330px;
        margin: 18px auto;
      }
      .result-chibi {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 24px;
        padding: 12px;
        min-height: 250px;
        display: flex;
        align-items: end;
      }
      .result-copy h1 {
        font-size: clamp(40px, 5vw, 64px);
        letter-spacing: -0.05em;
        line-height: 1;
        margin: 8px 0 14px;
      }
      .result-copy .tag {
        display: inline-flex;
        padding: 7px 11px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.13);
        font-size: 12px;
        font-weight: 900;
      }
      .result-copy p {
        opacity: 0.88;
      }
      .result-hero [data-ad-slot]::before {
        color: rgba(255, 255, 255, 0.7);
      }
      .metric-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 18px;
      }
      .metric {
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.11);
        font-size: 12px;
      }
      @media (min-width: 981px) {
        .result-copy {
          display: grid;
          grid-template-columns: minmax(330px, 0.82fr) minmax(0, 1.4fr);
          grid-template-areas:
            'art tag'
            'art title'
            'art ad'
            'art desc'
            'art metrics';
          column-gap: 58px;
          align-items: center;
        }
        .result-copy .tag {
          grid-area: tag;
          justify-self: start;
          align-self: end;
        }
        .result-copy h1 {
          grid-area: title;
        }
        #seattle-ad-result-10001 {
          grid-area: ad;
        }
        .result-copy > p {
          grid-area: desc;
          margin: 0;
        }
        .result-copy .result-art {
          grid-area: art;
          align-self: center;
          margin: 0 auto;
        }
        .result-copy .metric-row {
          grid-area: metrics;
          flex-wrap: nowrap;
          margin-top: 18px;
        }
        .result-copy .metric {
          flex: 1 1 0;
        }
      }
      .examples {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }
      .example-card {
        border-radius: 20px;
        padding: 18px;
        background: #fff;
        border: 1px solid var(--line);
      }
      .example-card b {
        display: block;
        margin-bottom: 6px;
      }
      .example-card span {
        color: var(--muted);
        font-size: 14px;
      }
      .faq details {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 16px 18px;
        margin: 10px 0;
      }
      .faq summary {
        cursor: pointer;
        font-weight: 850;
      }
      .faq p {
        color: var(--muted);
      }
      .footer {
        padding: 34px 0 54px;
        color: #8a8598;
        font-size: 12px;
        text-align: center;
      }
      .hidden {
        display: none !important;
      }
      .bonus-shell {
        max-width: 820px;
        margin: 30px auto;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 28px;
        padding: 30px;
        box-shadow: var(--shadow);
      }
      @media (max-width: 980px) {
        .hero-grid,
        .content-layout,
        .result-hero {
          grid-template-columns: 1fr;
        }
        .hero-stage {
          min-height: 410px;
        }
        .grid-4,
        .role-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .grid-3 {
          grid-template-columns: 1fr 1fr;
        }
        .result-art {
          max-width: 520px;
        }
      }

      
      #roleGuideSection.content-section {
        padding: 50px 0;
      }
      #roleGuideSection .shell {
        width: min(1120px, calc(100% - 32px));
        margin: auto;
      }
      #roleGuideSection .section-head {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 28px;
      }
      #roleGuideSection .section-head h2 {
        font-size: clamp(30px, 4vw, 46px);
        letter-spacing: -0.035em;
        margin: 0 0 10px;
      }
      #roleGuideSection .section-head p {
        color: var(--muted);
        margin: 0;
      }
      #roleGuideSection .guide-note {
        font-size: 13px;
        color: #817a90;
        text-align: center;
        margin: 0 auto 28px;
        max-width: 840px;
      }
      #roleGuideSection .role-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 0;
      }
      #roleGuideSection .role-grid [data-ad-slot] {
        grid-column: 1 / -1;
        margin: 12px 0;
      }
      #roleGuideSection .role-card {
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 18px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 18px;
        box-shadow: 0 8px 30px rgba(75, 54, 120, 0.06);
        align-items: center;
        min-height: 0;
      }
      #roleGuideSection .role-card:hover {
        transform: none;
        box-shadow: 0 8px 30px rgba(75, 54, 120, 0.06);
      }
      #roleGuideSection .role-art svg,
      #roleGuideSection .role-art img {
        width: 100%;
        height: auto;
        display: block;
      }
      #roleGuideSection .role-art img {
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 18px;
      }
      #roleGuideSection .role-copy h3 {
        font-size: 22px;
        margin: 2px 0 7px;
      }
      #roleGuideSection .role-copy p {
        font-size: 14px;
        color: #686174;
        margin: 0 0 14px;
      }
      #roleGuideSection .example-grid {
        display: grid;
        gap: 8px;
      }
      #roleGuideSection .example-grid > div {
        padding: 9px 11px;
        border-radius: 12px;
        background: #faf8ff;
        border: 1px solid #eee9fb;
      }
      #roleGuideSection .example-grid span {
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.075em;
        color: #8a8199;
        font-weight: 900;
      }
      #roleGuideSection .example-grid strong {
        font-size: 13px;
      }
      @media (max-width: 800px) {
        #roleGuideSection .role-grid {
          grid-template-columns: 1fr;
        }
        #roleGuideSection .role-card {
          grid-template-columns: 120px 1fr;
        }
      }
      @media (max-width: 520px) {
        #roleGuideSection .shell {
          width: min(100% - 4px, 1120px);
        }
        #roleGuideSection .role-card {
          grid-template-columns: 1fr;
          text-align: center;
        }
        #roleGuideSection .role-art {
          max-width: 170px;
          margin: auto;
        }
        #roleGuideSection .example-grid {
          text-align: left;
        }
      }

      
      .page-hero {
        display: none;
      }
      .bonus-shell {
        width: min(820px, calc(100% - 40px));
        margin: 12px auto 18px;
        padding: 26px 28px;
      }
      .bonus-shell #bonusHeading {
        font-size: 32px !important;
        line-height: 1.1;
      }
      .bonus-shell #bonusPrompt {
        font-size: 18px !important;
        line-height: 1.35;
      }
      .bonus-shell .answers {
        gap: 10px;
      }
      .bonus-shell .answer {
        min-height: 62px;
        padding: 13px 16px;
        gap: 12px;
        font-size: 14px;
        line-height: 1.3;
      }
      .bonus-shell .answer .key {
        width: 36px;
        height: 36px;
      }
      .result-wrap {
        padding: 30px 0 18px;
      }
      .footer {
        padding-top: 18px;
        padding-bottom: 36px;
      }
      .result-art {
        display: block;
        width: 100%;
        max-width: 330px;
        margin: 18px auto;
      }
      .result-role-image {
        display: block;
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 24px;
      }
      .bonus-context {
        width: min(820px, calc(100% - 40px));
        margin: 0 auto 18px;
        background: rgba(255, 255, 255, 0.88);
        border: 1px solid var(--line);
        border-radius: 24px;
        padding: 26px 28px;
        box-shadow: 0 14px 38px rgba(59, 42, 110, 0.07);
      }
      #bonusArea.hidden + .bonus-context {
        display: none;
      }
      #resultArea.hidden + #resultFooterAdWrap {
        display: none;
      }
      .bonus-context h2 {
        font-size: 28px;
        line-height: 1.15;
        letter-spacing: -0.03em;
        margin: 0 0 10px;
      }
      .bonus-context > .lead {
        font-size: 16px;
        line-height: 1.65;
        margin: 0;
      }
      .bonus-context-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-top: 20px;
      }
      .bonus-context-card {
        padding: 18px;
        border-radius: 18px;
        background: linear-gradient(180deg, #fff, #faf8ff);
        border: 1px solid var(--line);
      }
      .bonus-context-card b {
        display: block;
        font-size: 15px;
        margin-bottom: 6px;
      }
      .bonus-context-card p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.6;
      }
      .bonus-context-note {
        margin: 18px 0 0;
        color: #8f8a9d;
        font-size: 13px;
        line-height: 1.6;
      }
      @media (max-width: 640px) {
        .wrap {
          width: min(100% - 32px, var(--max));
        }
        .sitebar .inner {
          min-height: 54px;
        }
        .brand-mark {
          width: 32px;
          height: 32px;
          border-radius: 10px;
        }
        .navline {
          display: none;
        }
        .page-hero {
          padding: 18px 0 14px;
        }
        .topic-strip {
          gap: 6px;
          flex-wrap: nowrap;
          justify-content: flex-start;
        }
        .topic {
          padding: 6px 8px;
          font-size: 11px;
          white-space: nowrap;
        }
        .section {
          padding: 30px 0;
        }
        #resultArea .section {
          padding: 14px 0;
        }
        #resultArea #roleGuideSection.content-section {
          padding: 14px 0;
        }
        #resultArea .cta-row {
          margin-top: 0;
        }
        #resultArea .result-hero + .cta-row {
          margin-top: 14px;
        }
        #deepTitle,
        #roleGuideSection .section-head h2,
        #roleGuideSection + .section > h2 {
          font-size: 22px;
          line-height: 1.2;
          white-space: nowrap;
        }
        #deepTitle.is-long-role-title {
          font-size: 17px;
        }
        .grid-4,
        .grid-3,
        .role-grid,
        .commerce-grid,
        .examples {
          grid-template-columns: 1fr;
        }
        .bonus-shell {
          width: calc(100% - 32px);
          margin: 4px auto 12px;
          padding: 18px;
          border-radius: 20px;
        }
        .bonus-shell #bonusHeading {
          font-size: clamp(27px, 8.1vw, 32px) !important;
          line-height: 1.1;
          margin: 8px 0 14px !important;
        }
        .bonus-shell #bonusIntro {
          font-size: 16px;
          line-height: 1.55;
        }
        .bonus-shell #bonusPrompt {
          font-size: 18px !important;
          line-height: 1.35;
          margin: 18px 0 20px;
        }
        .bonus-shell .answers {
          gap: 10px;
        }
        .bonus-shell .answer {
          min-height: 54px;
          padding: 10px 12px;
          gap: 12px;
          font-size: 14px;
          line-height: 1.3;
        }
        .bonus-shell .answer .key {
          width: 34px;
          height: 34px;
          border-radius: 10px;
          font-size: 16px;
        }
        .bonus-context {
          width: calc(100% - 32px);
          margin: 0 auto 12px;
          padding: 18px;
          border-radius: 20px;
        }
        .bonus-context h2 {
          font-size: 24px;
        }
        .bonus-context-grid {
          grid-template-columns: 1fr;
          gap: 10px;
          margin-top: 16px;
        }
        .bonus-context-card {
          padding: 16px;
          border-radius: 16px;
        }
        .bonus-context-note {
          margin-top: 16px;
          font-size: 12px;
        }
        .result-wrap {
          padding: 8px 0 12px;
        }
        .result-hero {
          padding: 14px;
          border-radius: 20px;
          gap: 0;
        }
        .result-copy {
          display: grid;
          grid-template-columns: 132px minmax(0, 1fr);
          grid-template-areas:
            'tag tag'
            'title title'
            'ad ad'
            'desc desc'
            'art metrics';
          column-gap: 10px;
          row-gap: 7px;
          align-items: start;
        }
        .result-copy .tag {
          grid-area: tag;
          justify-self: start;
          padding: 5px 9px;
          font-size: 10px;
        }
        .result-copy h1 {
          grid-area: title;
          margin: 0;
          font-size: 28px;
          line-height: 1;
        }
        #seattle-ad-result-10001 {
          grid-area: ad;
          margin: 4px 0;
        }
        .result-copy > p {
          grid-area: desc;
          margin: 0 0 3px;
          font-size: 13px;
          line-height: 1.4;
        }
        .result-art {
          grid-area: art;
          width: 132px;
          max-width: none;
          margin: 0;
        }
        .result-role-image {
          border-radius: 15px;
        }
        .result-copy .metric-row {
          grid-area: metrics;
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          gap: 6px;
          margin: 0;
          align-self: stretch;
        }
        .result-copy .metric {
          flex: 1 1 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 7px 8px;
          border-radius: 10px;
          font-size: 10px;
          line-height: 1.35;
        }
        .cta-row > .btn {
          width: 100%;
        }
        [data-ad-slot] {
          width: auto;
          height: auto;
          margin: 13px 0;
        }
        .footer {
          padding-top: 18px;
          padding-bottom: calc(28px + env(safe-area-inset-bottom));
        }
      }