/* =========================================================
   URTA MARKETING PAGE
   ========================================================= */


   .urta-page {
    --urta-ink: #202025;
    --urta-muted: #898690;
  
    --urta-line:
      rgba(255, 255, 255, 0.78);
  
    --urta-glass:
      rgba(255, 255, 255, 0.50);
  
    --urta-glass-strong:
      rgba(255, 255, 255, 0.73);
  
    --urta-shadow:
      0 28px 80px
      rgba(62, 55, 78, 0.10);
  
    --urta-radius-xl: 42px;
    --urta-radius-lg: 30px;
    --urta-radius-md: 22px;
  
    background: #faf9f8;
    color: var(--urta-ink);
  }
  
  
  /* =========================================
     BACKGROUND
     ========================================= */
  
  .urta-page .urta-background {
    overflow: hidden;
  
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.92),
        rgba(250,249,248,.78)
      ),
      #faf9f8;
  }
  
  
  .urta-ambient {
    position: absolute;
  
    display: block;
  
    border-radius: 999px;
  
    filter: blur(95px);
  
    opacity: 0.44;
  }
  
  
  .urta-ambient-peach {
    width: 480px;
    height: 480px;
  
    top: 390px;
    left: -180px;
  
    background: #ffb994;
  }
  
  
  .urta-ambient-lilac {
    width: 560px;
    height: 560px;
  
    top: 80px;
    right: -170px;
  
    background: #d7e5ff;
  }
  
  
  .urta-ambient-pink {
    width: 520px;
    height: 520px;
  
    top: 1180px;
    right: 8%;
  
    background: #efc0d6;
  }
  
  
  .urta-ambient-cream {
    width: 520px;
    height: 520px;
  
    top: 2050px;
    left: 15%;
  
    background: #ffe0b8;
  }
  
  
  
  
  
  /* =========================================
     PAGE SHELL
     ========================================= */
  
  .urta-shell {
    position: relative;
  
    z-index: 2;
  
    width:
      min(
        1240px,
        calc(100% - 40px)
      );
  
    margin:
      0 auto;
  
    padding:
      70px 0 80px;
  }
  
  
  
  /* =========================================
     HERO
     ========================================= */
  
  .urta-hero {
    display: grid;
  
    grid-template-columns:
      minmax(0, .86fr)
      minmax(520px, 1.14fr);
  
    align-items: center;
  
    gap:
      clamp(
        42px,
        6vw,
        86px
      );
  
    min-height:
      calc(100vh - 145px);
  
    padding:
      34px 0 88px;
  }
  
  
  .urta-kicker,
  .urta-section-index {
    margin:
      0 0 19px;
  
    color: #696671;
  
    font-size: .72rem;
  
    font-weight: 650;
  
    letter-spacing: .17em;
  
    text-transform: uppercase;
  }
  
  
  .urta-wordmark {
    display: block;
  
    width: auto;
    height: 43px;
  
    margin:
      0 0 30px;
  
    object-fit: contain;
  }
  
  
  .urta-hero h1,
  .urta-problem h2,
  .urta-section-heading h2,
  .urta-final-cta h2 {
    margin: 0;
  
    font-weight: 500;
  
    letter-spacing: -.065em;
  
    line-height: .96;
  }
  
  
  .urta-hero h1 {
    max-width: 710px;
  
    font-size:
      clamp(
        3.25rem,
        5.2vw,
        5.8rem
      );
  }
  
  
  .urta-hero-description {
    max-width: 625px;
  
    margin:
      30px 0 0;
  
    color: #66636d;
  
    font-size:
      clamp(
        1.05rem,
        1.5vw,
        1.25rem
      );
  
    line-height: 1.62;
  }
  
  
  
  /* =========================================
     BUTTONS
     ========================================= */
  
  .urta-actions {
    display: flex;
  
    flex-wrap: wrap;
  
    gap: 12px;
  
    margin-top: 32px;
  }
  
  
  .urta-button {
    display: inline-flex;
  
    align-items: center;
    justify-content: center;
  
    min-height: 50px;
  
    padding:
      0 23px;
  
    border:
      1px solid
      rgba(255,255,255,.78);
  
    border-radius: 999px;
  
    font-size: .95rem;
  
    font-weight: 560;
  
    transition:
      transform 180ms ease,
      box-shadow 180ms ease,
      background 180ms ease;
  }
  
  
  .urta-button:hover {
    transform:
      translateY(-3px);
  }
  
  
  .urta-button-dark {
    border-color: #27262b;
  
    background: #29282d;
  
    color: #fff;
  
    box-shadow:
      0 14px 32px
      rgba(38,36,43,.18);
  }
  
  
  .urta-button-glass {
    background:
      rgba(255,255,255,.48);
  
    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.78);
  
    -webkit-backdrop-filter:
      blur(15px);
  
    backdrop-filter:
      blur(15px);
  }
  
  
  
  /* =========================================
     PRODUCT PREVIEW
     ========================================= */
  
  .urta-preview-wrap {
    min-width: 0;
  }
  
  
  .urta-preview-label,
  .urta-preview-footer {
    display: flex;
  
    align-items: center;
  
    justify-content:
      space-between;
  
    gap: 20px;
  
    color: #817e88;
  
    font-size: .72rem;
  }
  
  
  .urta-preview-label {
    margin:
      0 18px 12px;
  
    letter-spacing: .06em;
  
    text-transform: uppercase;
  }
  
  
  .urta-live-dot {
    display: inline-flex;
  
    align-items: center;
  
    gap: 7px;
  }
  
  
  .urta-live-dot::before {
    content: "";
  
    width: 7px;
    height: 7px;
  
    border-radius: 50%;
  
    background: #70bb88;
  
    box-shadow:
      0 0 0 5px
      rgba(112,187,136,.12);
  }
  
  
  .urta-app-preview {
    position: relative;
  
    display: grid;
  
    grid-template-columns:
      176px
      minmax(0, 1fr);
  
    height: 590px;
  
    overflow: hidden;
  
    border:
      1px solid
      rgba(255,255,255,.86);
  
    border-radius:
      var(--urta-radius-xl);
  
    background:
      rgba(255,255,255,.48);
  
    box-shadow:
      var(--urta-shadow),
      inset 0 1px 0
      rgba(255,255,255,.85);
  
    -webkit-backdrop-filter:
      blur(28px)
      saturate(110%);
  
    backdrop-filter:
      blur(28px)
      saturate(110%);
  }
  
  
  .urta-demo-sidebar {
    padding:
      28px 15px;
  
    border-right:
      1px solid
      rgba(255,255,255,.78);
  
    background:
      rgba(255,255,255,.28);
  }
  
  
  .urta-demo-heading {
    display: flex;
  
    justify-content:
      space-between;
  
    margin:
      0 8px 26px;
  
    font-size: .78rem;
  
    font-weight: 650;
  }
  
  
  .urta-demo-contact {
    display: grid;
  
    grid-template-columns:
      36px 1fr;
  
    align-items: center;
  
    gap: 10px;
  
    padding: 10px;
  
    margin-bottom: 6px;
  
    border-radius: 15px;
  }
  
  
  .urta-demo-contact.is-selected {
    border:
      1px solid
      rgba(255,255,255,.8);
  
    background:
      rgba(255,255,255,.62);
  
    box-shadow:
      0 7px 20px
      rgba(55,49,68,.07);
  }
  
  
  .urta-demo-contact strong,
  .urta-demo-chat-header strong {
    display: block;
  
    font-size: .75rem;
  }
  
  
  .urta-demo-contact small,
  .urta-demo-chat-header small {
    display: block;
  
    margin-top: 2px;
  
    color: #9b98a1;
  
    font-size: .63rem;
  }
  
  
  .urta-demo-avatar {
    display: block;
  
    width: 36px;
    height: 36px;
  
    border:
      1px solid
      rgba(255,255,255,.8);
  
    border-radius: 50%;
  
    box-shadow:
      inset 5px 6px 9px
      rgba(255,255,255,.3),
  
      0 5px 11px
      rgba(34,29,53,.12);
  }
  
  
  .avatar-lime {
    background:
      radial-gradient(
        circle at 32% 28%,
        rgba(255,255,255,.7),
        transparent 20%
      ),
  
      repeating-radial-gradient(
        circle at 45% 55%,
        #477210 0 2px,
        #c7f513 3px 7px
      );
  }
  
  
  .avatar-violet {
    background:
      radial-gradient(
        circle at 35% 25%,
        #c5aaff,
        transparent 20%
      ),
  
      conic-gradient(
        from 45deg,
        #160b4a,
        #755cff,
        #161041,
        #b29aff,
        #160b4a
      );
  }
  
  
  .urta-demo-chat {
    display: grid;
  
    grid-template-rows:
      auto
      1fr
      auto;
  
    min-width: 0;
  
    padding:
      0 22px 22px;
  }
  
  
  .urta-demo-chat-header {
    display: flex;
  
    align-items: center;
  
    gap: 10px;
  
    min-height: 83px;
  
    border-bottom:
      1px solid
      rgba(255,255,255,.75);
  }
  
  
  .urta-demo-messages {
    display: flex;
  
    flex-direction: column;
  
    justify-content: center;
  
    gap: 16px;
  
    padding:
      24px 0;
  }
  
  
  .urta-message {
    max-width: 82%;
  
    padding:
      15px 17px;
  
    border:
      1px solid
      rgba(255,255,255,.75);
  
    border-radius: 19px;
  
    background:
      rgba(255,255,255,.58);
  
    box-shadow:
      0 8px 22px
      rgba(61,55,73,.055);
  
    opacity: 0;
  
    transform:
      translateY(14px);
  }
  
  
  .urta-message p {
    margin:
      4px 0 0;
  
    font-size: .78rem;
  
    line-height: 1.5;
  }
  
  
  .urta-message-label {
    color: #a09ca5;
  
    font-size: .58rem;
  
    letter-spacing: .07em;
  
    text-transform: uppercase;
  }
  
  
  .urta-message-incoming {
    align-self: flex-start;
  
    animation:
      urta-message-in
      700ms
      350ms
      forwards;
  }
  
  
  .urta-message-outgoing {
    align-self: flex-end;
  
    animation:
      urta-message-in
      700ms
      1.65s
      forwards;
  }

  .urta-title {
    font-size: 5px; 
  }
  
  
  .urta-tone-chip {
    align-self: flex-start;
  
    display: inline-flex;
  
    align-items: center;
  
    gap: 8px;
  
    margin-left: 10px;
  
    color: #8a8690;
  
    font-size: .62rem;
  
    opacity: 0;
  
    animation:
      urta-message-in
      600ms
      1.05s
      forwards;
  }
  
  
  .urta-tone-chip span {
    width: 7px;
    height: 7px;
  
    border-radius: 50%;
  
    background: #f0aa8d;
  }
  
  
  .urta-demo-input {
    display: flex;
  
    align-items: center;
  
    justify-content:
      space-between;
  
    min-height: 60px;
  
    padding:
      0 17px;
  
    border:
      1px solid
      rgba(255,255,255,.84);
  
    border-radius: 20px;
  
    background:
      rgba(255,255,255,.62);
  
    color: #aaa6af;
  
    font-size: .72rem;
  }
  
  
  .urta-spark {
    display: grid;
  
    place-items: center;
  
    width: 31px;
    height: 31px;
  
    border-radius: 50%;
  
    background:
      rgba(255,255,255,.6);
  
    color: #8e8a94;
  
    animation:
      urta-spark-pulse
      2.4s
      ease-in-out
      infinite;
  }
  
  
  .urta-preview-sheen {
    position: absolute;
  
    inset: 0;
  
    pointer-events: none;
  
    background:
      linear-gradient(
        115deg,
        transparent 30%,
        rgba(255,255,255,.26) 48%,
        transparent 67%
      );
  
    transform:
      translateX(-100%);
  
    animation:
      urta-sheen
      7s
      ease-in-out
      infinite;
  }
  
  
  .urta-preview-footer {
    margin:
      12px 18px 0;
  }
  
  
  .urta-replay {
    padding: 0;
  
    border: 0;
  
    background: transparent;
  
    color: #55525b;
  
    cursor: pointer;
  }
  
  
  .urta-app-preview.is-replaying
  .urta-message,
  
  .urta-app-preview.is-replaying
  .urta-tone-chip {
    animation: none;
  
    opacity: 0;
  }
  
  
  
  /* =========================================
     PROBLEM
     ========================================= */
  
  .urta-problem {
    display: grid;
  
    grid-template-columns:
      200px
      minmax(0, 1fr);
  
    gap: 36px;
  
    margin-top: 80px;
  
    padding:
      clamp(
        40px,
        7vw,
        90px
      );
  
    border-radius:
      var(--urta-radius-xl);
  
    background:
      linear-gradient(
        145deg,
        #3d3f45,
        #34363b
      );
  
    color: #fff;
  
    box-shadow:
      0 24px 60px
      rgba(35,38,44,.11);
  }
  
  
  .urta-problem
  .urta-section-index {
    color:
      rgba(255,255,255,.47);
  }
  
  
  .urta-problem h2 {
    max-width: 890px;
  
    font-size:
      clamp(
        2.8rem,
        4.9vw,
        5.25rem
      );
  }
  
  
  .urta-problem div > p {
    max-width: 680px;
  
    margin:
      38px 0 0;
  
    color:
      rgba(255,255,255,.65);
  
    font-size: 1.08rem;
  
    line-height: 1.7;
  }
  
  
  
  /* =========================================
     VALUES
     ========================================= */
  
  .urta-values {
    display: grid;
  
    grid-template-columns:
      repeat(3, 1fr);
  
    gap: 18px;
  
    margin-top: 18px;
  }
  
  
  .urta-value-card,
  .urta-step {
    border:
      1px solid
      var(--urta-line);
  
    background:
      var(--urta-glass);
  
    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.78),
  
      0 18px 52px
      rgba(60,53,76,.065);
  
    -webkit-backdrop-filter:
      blur(24px)
      saturate(110%);
  
    backdrop-filter:
      blur(24px)
      saturate(110%);
  }
  
  
  .urta-value-card {
    min-height: 270px;
  
    padding: 29px;
  
    border-radius:
      var(--urta-radius-lg);
  }
  
  
  .urta-value-number,
  .urta-step-number {
    color: #aaa6af;
  
    font-size: .68rem;
  
    letter-spacing: .08em;
  }
  
  
  .urta-value-card h3 {
    margin:
      94px 0 10px;
  
    font-size: 1.5rem;
  
    font-weight: 530;
  
    letter-spacing: -.04em;
  }
  
  
  .urta-value-card p,
  .urta-step p {
    margin: 0;
  
    color: #77737d;
  
    line-height: 1.62;
  }
  
  
  
  /* =========================================
     HOW IT WORKS
     ========================================= */
  
  .urta-how,
  .urta-features {
    padding-top: 150px;
  }
  
  
  .urta-section-heading {
    display: grid;
  
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 430px);
  
    align-items: end;
  
    gap: 40px;
  
    margin-bottom: 44px;
  }
  
  
  .urta-section-heading
  .urta-kicker {
    grid-column:
      1 / -1;
  
    margin-bottom: -18px;
  }
  
  
  .urta-section-heading h2 {
    font-size:
      clamp(
        3.15rem,
        5.7vw,
        6rem
      );
  }
  
  
  .urta-section-heading
  > p:last-child {
    margin:
      0 0 7px;
  
    color: #77737d;
  
    line-height: 1.65;
  }
  
  
  .urta-steps {
    display: grid;
  
    grid-template-columns:
      repeat(3, 1fr);
  
    gap: 18px;
  }
  
  
  .urta-step {
    min-height: 460px;
  
    padding: 22px;
  
    border-radius:
      var(--urta-radius-lg);
  }
  
  
  .urta-step-visual {
    position: relative;
  
    display: grid;
  
    place-items: center;
  
    height: 215px;
  
    margin-bottom: 25px;
  
    overflow: hidden;
  
    border-radius: 22px;
  
    background:
      rgba(255,255,255,.38);
  }
  
  
  .urta-orb {
    position: absolute;
  
    width: 72px;
    height: 72px;
  
    border-radius: 50%;
  
    box-shadow:
      inset 8px 10px 18px
      rgba(255,255,255,.5),
  
      inset -9px -11px 18px
      rgba(47,40,68,.18),
  
      0 11px 24px
      rgba(56,49,74,.12);
  }
  
  
  .orb-one {
    left: 22%;
  
    background:
      linear-gradient(
        145deg,
        #ffbd9e,
        #ef88bb
      );
  }
  
  
  .orb-two {
    right: 22%;
  
    background:
      linear-gradient(
        145deg,
        #c9d0ff,
        #8e7df2
      );
  }
  
  
  .urta-connector {
    width: 36%;
  
    height: 2px;
  
    background:
      linear-gradient(
        90deg,
        #e89ea9,
        #9e96ed
      );
  }
  
  
  .urta-filter-visual {
    grid-template-columns:
      1fr
      55px
      1fr;
  
    gap: 11px;
  
    padding: 25px;
  
    color: #74717a;
  
    font-size: .72rem;
  }
  
  
  .urta-filter-line {
    height: 1px;
  
    background: #b8b3bf;
  }
  
  
  .urta-chat-visual {
    display: flex;
  
    flex-direction: column;
  
    justify-content: center;
  
    align-items: stretch;
  
    gap: 12px;
  
    padding: 28px;
  }
  
  
  .urta-chat-visual span {
    display: block;
  
    width: 74%;
  
    height: 35px;
  
    border:
      1px solid
      rgba(255,255,255,.8);
  
    border-radius: 15px;
  
    background:
      rgba(255,255,255,.68);
  }
  
  
  .urta-chat-visual
  span:nth-child(2) {
    width: 55%;
  
    align-self: flex-end;
  
    background:
      rgba(247,218,230,.65);
  }
  
  
  .urta-chat-visual
  span:nth-child(3) {
    width: 65%;
  }
  
  
  .urta-step h3 {
    margin:
      13px 0 11px;
  
    font-size: 1.45rem;
  
    font-weight: 540;
  
    letter-spacing: -.04em;
  }
  
  
  
  /* =========================================================
     FEATURES — SCROLL ART SEQUENCE
     ========================================================= */
  
  
  .urta-features
  .urta-section-heading {
    margin-bottom:
      clamp(
        110px,
        15vw,
        200px
      );
  }
  
  
  
  /*
     NOT A GRID.
  
     Each feature row takes up
     substantial vertical space.
  */
  
  .urta-feature-sequence {
    display: flex;
  
    flex-direction: column;
  
    gap: 0;
  
    width: 100%;
  }
  
  
  
  /*
     EACH FEATURE OCCUPIES ITS OWN ROW.
  
     This is what prevents
     side-by-side cards.
  */
  
  .urta-feature-row {
    display: flex;
  
    align-items: center;
  
    width: 100%;
  
    min-height:
      clamp(
        720px,
        92vh,
        980px
      );
  }
  
  
  
  /* =========================================
     ALTERNATING PLACEMENT
     ========================================= */
  
  
  /* 01 LEFT */
  
  .feature-row-01 {
    justify-content:
      flex-start;
  }
  
  
  /* 02 RIGHT */
  
  .feature-row-02 {
    justify-content:
      flex-end;
  }
  
  
  /* 03 LEFT, slightly indented */
  
  .feature-row-03 {
    justify-content:
      flex-start;
  
    padding-left:
      clamp(
        35px,
        8vw,
        125px
      );
  }
  
  
  /* 04 RIGHT, slightly indented */
  
  .feature-row-04 {
    justify-content:
      flex-end;
  
    padding-right:
      clamp(
        20px,
        5vw,
        75px
      );
  }
  
  
  
  /* =========================================
     BASE ART CUBE
     ========================================= */
  
  .urta-feature-cube {
    --reveal: 0;
  
    position: relative;
  
    isolation: isolate;
  
    overflow: hidden;
  
    flex: 0 0 auto;
  
    border-radius:
      clamp(
        24px,
        2.6vw,
        38px
      );
  
    background: #f1f1f1;
  
    box-shadow:
      0 30px 80px
      rgba(
        30,
        27,
        40,
        calc(
          .045 +
          var(--reveal) * .04
        )
      );
  }
  
  
  
  /* =========================================
     DIFFERENT SIZES
     ========================================= */
  
  
  /* 01 medium */
  
  .feature-row-01
  .urta-feature-cube {
    width:
      clamp(
        330px,
        36vw,
        470px
      );
  
    aspect-ratio:
      1 / 1;
  }
  
  
  /* 02 largest */
  
  .feature-row-02
  .urta-feature-cube {
    width:
      clamp(
        390px,
        43vw,
        560px
      );
  
    aspect-ratio:
      1.08 / 1;
  }
  
  
  /* 03 smallest */
  
  .feature-row-03
  .urta-feature-cube {
    width:
      clamp(
        300px,
        31vw,
        410px
      );
  
    aspect-ratio:
      .92 / 1;
  }
  
  
  /* 04 medium/wide */
  
  .feature-row-04
  .urta-feature-cube {
    width:
      clamp(
        350px,
        38vw,
        500px
      );
  
    aspect-ratio:
      1.12 / .94;
  }
  
  
  
  /* =========================================
     ART
     ========================================= */
  
  .urta-feature-cube-image {
    position: absolute;
  
    inset: 0;
  
    z-index: 0;
  
    width: 100%;
    height: 100%;
  
    object-fit: cover;
  
  
    /*
       Very subtle movement.
  
       It remains an image for
       most of the animation.
    */
  
    transform:
      scale(
        calc(
          1.025 -
          var(--reveal) * .025
        )
      );
  
  
    filter:
      saturate(
        calc(
          1 -
          var(--reveal) * .22
        )
      )
  
      brightness(
        calc(
          1 +
          var(--reveal) * .08
        )
      )
  
      contrast(
        calc(
          1 -
          var(--reveal) * .05
        )
      );
  }
  
  
  
  /* =========================================
     MATTE / FROSTED LAYER
     ========================================= */
  
  .urta-feature-cube::after {
    content: "";
  
    position: absolute;
  
    inset: 0;
  
    z-index: 1;
  
  
    /*
       Starts transparent.
  
       At full reveal it becomes
       almost an opaque white sheet.
    */
  
    background:
      rgba(
        248,
        248,
        247,
        calc(
          var(--reveal) * .90
        )
      );
  
  
    backdrop-filter:
      blur(
        calc(
          var(--reveal) * 18px
        )
      );
  
  
    -webkit-backdrop-filter:
      blur(
        calc(
          var(--reveal) * 18px
        )
      );
  
  
    pointer-events: none;
  }
  
  
  
  /* =========================================
     TEXT CONTENT
     ========================================= */
  
  .urta-feature-cube-content {
    position: absolute;
  
    inset: 0;
  
    z-index: 2;
  
    display: flex;
  
    flex-direction: column;
  
    justify-content:
      space-between;
  
  
    padding:
      clamp(
        25px,
        3.4vw,
        48px
      );
  
  
    /*
       Text waits until the artwork
       has already begun frosting.
    */
  
    opacity:
      clamp(
        0,
        calc(
          (
            var(--reveal) -
            .48
          ) * 2.5
        ),
        1
      );
  
  
    transform:
      translateY(
        calc(
          (
            1 -
            var(--reveal)
          ) * 20px
        )
      );
  
  
    pointer-events: none;
  }
  
  
  
  /* =========================================
     NUMBER
     ========================================= */
  
  .urta-feature-cube-number {
    color:
      rgba(
        30,
        30,
        35,
        .43
      );
  
    font-size:
      .7rem;
  
    letter-spacing:
      .1em;
  }
  
  
  
  /* =========================================
     FEATURE COPY
     ========================================= */
  
  .urta-feature-cube-copy {
    max-width:
      100%;
  }
  
  
  .urta-feature-cube
  .urta-feature-status {
    display: inline-flex;
  
    padding:
      6px 9px;
  
    margin-bottom:
      clamp(
        13px,
        1.6vw,
        20px
      );
  
    border:
      1px solid
      rgba(30,30,35,.08);
  
    border-radius:
      999px;
  
    background:
      rgba(255,255,255,.34);
  
    color:
      rgba(30,30,35,.48);
  
    font-size:
      .61rem;
  
    letter-spacing:
      .04em;
  }
  
  
  
  /* =========================================
     FEATURE TITLE
     ========================================= */
  
  .urta-feature-cube h3 {
    max-width: 100%;
  
    margin: 0;
  
    color: #202024;
  
    font-size:
      clamp(
        2rem,
        3.6vw,
        3.7rem
      );
  
    font-weight: 520;
  
    line-height: .95;
  
    letter-spacing:
      -.055em;
  }
  
  
  
  /* smaller cube gets smaller text */
  
  .feature-row-03
  .urta-feature-cube h3 {
    font-size:
      clamp(
        1.9rem,
        3.2vw,
        3.2rem
      );
  }
  
  
  
  /* =========================================
     FEATURE DESCRIPTION
     ========================================= */
  
  .urta-feature-cube p {
    max-width: 430px;
  
    margin:
      clamp(
        16px,
        2vw,
        24px
      )
      0
      0;
  
    color:
      rgba(
        30,
        30,
        35,
        .63
      );
  
    font-size:
      clamp(
        .87rem,
        1.2vw,
        1.02rem
      );
  
    line-height: 1.55;
  }
  
  
  
  /* =========================================
     CTA
     ========================================= */
  
  .urta-final-cta {
    margin-top: 110px;
  
    padding:
      clamp(
        44px,
        8vw,
        98px
      );
  
    overflow: hidden;
  
    border:
      1px solid
      rgba(255,255,255,.82);
  
    border-radius:
      var(--urta-radius-xl);
  
    background:
      radial-gradient(
        circle at 12% 90%,
        rgba(255,174,134,.42),
        transparent 34%
      ),
  
      radial-gradient(
        circle at 82% 15%,
        rgba(181,191,255,.45),
        transparent 32%
      ),
  
      rgba(255,255,255,.55);
  
    box-shadow:
      var(--urta-shadow),
      inset 0 1px 0
      rgba(255,255,255,.85);
  
    -webkit-backdrop-filter:
      blur(25px);
  
    backdrop-filter:
      blur(25px);
  }
  
  
  .urta-final-cta h2 {
    max-width: 900px;
  
    font-size:
      clamp(
        3.3rem,
        6.1vw,
        6.4rem
      );
  }
  
  
  .urta-final-cta
  > p:not(.urta-kicker) {
    margin:
      28px 0 0;
  
    color: #74717a;
  
    font-size: 1.03rem;
  }
  
  
  
  /* =========================================
     FOOTER
     ========================================= */
  
  .urta-page
  .urta-footer {
    align-items: center;
  
    padding-bottom: 36px;
  }
  
  
  .urta-footer div {
    display: flex;
  
    gap: 20px;
  }
  
  
  
  /* =========================================
     NORMAL REVEAL
     ========================================= */
  
  .urta-page .reveal {
    opacity: 0;
  
    transform:
      translateY(26px);
  
    transition:
      opacity 750ms ease,
  
      transform
      750ms
      cubic-bezier(
        .22,
        1,
        .36,
        1
      );
  }
  
  
  .urta-page
  .reveal.is-visible {
    opacity: 1;
  
    transform:
      translateY(0);
  }
  
  
  
  /* =========================================
     ANIMATIONS
     ========================================= */
  
  @keyframes urta-message-in {
  
    to {
      opacity: 1;
  
      transform:
        translateY(0);
    }
  
  }
  
  
  @keyframes urta-spark-pulse {
  
    0%,
    100% {
      transform:
        rotate(0)
        scale(1);
    }
  
    50% {
      transform:
        rotate(12deg)
        scale(1.08);
    }
  
  }
  
  
  @keyframes urta-sheen {
  
    0%,
    62% {
      transform:
        translateX(-100%);
    }
  
    80%,
    100% {
      transform:
        translateX(100%);
    }
  
  }
  
  
  
  /* =========================================
     RESPONSIVE
     ========================================= */
  
  @media
  (max-width: 1040px) {
  
    .urta-hero {
      grid-template-columns:
        1fr;
  
      min-height: 0;
    }
  
  
    .urta-hero-copy {
      max-width: 850px;
    }
  
  
    .urta-preview-wrap {
      width:
        min(
          850px,
          100%
        );
  
      margin-inline:
        auto;
    }
  
  
    .urta-problem {
      grid-template-columns:
        1fr;
    }
  
  }
  
  
  
  /* =========================================
     TABLET
     ========================================= */
  
  @media
  (max-width: 820px) {
  
    .urta-values,
    .urta-steps {
      grid-template-columns:
        1fr;
    }
  
  
    .urta-section-heading {
      grid-template-columns:
        1fr;
  
      gap: 24px;
    }
  
  
    .urta-section-heading
    .urta-kicker {
      margin-bottom: -8px;
    }
  
  
    /*
       Feature sequence remains
       one item per row.
    */
  
    .urta-feature-row {
      min-height:
        clamp(
          620px,
          85vh,
          760px
        );
    }
  
  
    .feature-row-01,
    .feature-row-02,
    .feature-row-03,
    .feature-row-04 {
      padding-left: 0;
      padding-right: 0;
    }
  
  
    .feature-row-01,
    .feature-row-03 {
      justify-content:
        flex-start;
    }
  
  
    .feature-row-02,
    .feature-row-04 {
      justify-content:
        flex-end;
    }
  
  
    .feature-row-01
    .urta-feature-cube,
  
    .feature-row-02
    .urta-feature-cube,
  
    .feature-row-03
    .urta-feature-cube,
  
    .feature-row-04
    .urta-feature-cube {
      width:
        min(
          78vw,
          460px
        );
    }
  
  }
  
  
  
  /* =========================================
     MOBILE
     ========================================= */
  
  @media
  (max-width: 720px) {
  
    .urta-page
    .site-header {
      top: 8px;
    }
  
  
    .urta-page
    .nav-links {
      background:
        rgba(250,249,248,.96);
  
      box-shadow:
        0 20px 45px
        rgba(51,46,62,.11);
  
      -webkit-backdrop-filter:
        blur(20px);
  
      backdrop-filter:
        blur(20px);
    }
  
  
    .urta-shell {
      width:
        min(
          100% - 24px,
          1240px
        );
  
      padding-top: 45px;
    }
  
  
    .urta-hero {
      padding-bottom: 58px;
    }
  
  
    .urta-hero h1 {
      font-size:
        clamp(
          3rem,
          13.5vw,
          4.7rem
        );
    }
  
  
    .urta-app-preview {
      grid-template-columns:
        1fr;
  
      height: 540px;
  
      border-radius: 30px;
    }
  
  
    .urta-demo-sidebar {
      display: none;
    }
  
  
    .urta-demo-chat {
      padding:
        0 15px 15px;
    }
  
  
    .urta-problem {
      margin-top: 54px;
  
      padding:
        36px 24px;
  
      border-radius: 30px;
    }
  
  
    .urta-problem h2 {
      font-size:
        clamp(
          2.45rem,
          11.5vw,
          4rem
        );
    }
  
  
    .urta-values {
      gap: 12px;
    }
  
  
    .urta-value-card {
      min-height: 220px;
    }
  
  
    .urta-value-card h3 {
      margin-top: 55px;
    }
  
  
    .urta-how,
    .urta-features {
      padding-top: 100px;
    }
  
  
    .urta-section-heading h2 {
      font-size:
        clamp(
          2.9rem,
          13vw,
          4.6rem
        );
    }
  
  
    .urta-step {
      min-height: 0;
    }
  
  
  
    /* FEATURE SECTION */
  
    .urta-features
    .urta-section-heading {
      margin-bottom: 80px;
    }
  
  
    .urta-feature-row {
      min-height:
        clamp(
          560px,
          82vh,
          690px
        );
    }
  
  
    .feature-row-01,
    .feature-row-02,
    .feature-row-03,
    .feature-row-04 {
      justify-content:
        center;
  
      padding: 0;
    }
  
  
    .feature-row-01
    .urta-feature-cube,
  
    .feature-row-02
    .urta-feature-cube,
  
    .feature-row-03
    .urta-feature-cube,
  
    .feature-row-04
    .urta-feature-cube {
      width:
        min(
          88vw,
          420px
        );
  
      aspect-ratio:
        1 / 1;
    }
  
  
    .urta-feature-cube-content {
      padding:
        26px;
    }
  
  
    .urta-feature-cube h3,
    .feature-row-03
    .urta-feature-cube h3 {
      font-size:
        clamp(
          2rem,
          9vw,
          3rem
        );
    }
  
  
  
    /* CTA */
  
    .urta-final-cta {
      margin-top: 80px;
  
      padding:
        45px 24px;
  
      border-radius: 30px;
    }
  
  
    .urta-final-cta h2 {
      font-size:
        clamp(
          3.5rem,
          16vw,
          5.6rem
        );
    }
  
  
    .urta-actions {
      align-items: stretch;
  
      flex-direction: column;
    }
  
  
    .urta-button {
      width: 100%;
    }
  
  
    .urta-page
    .urta-footer {
      align-items:
        flex-start;
  
      flex-direction:
        column;
  
      gap: 16px;
    }
  
  }
  
  
  
  /* =========================================
     REDUCED MOTION
     ========================================= */
  
  @media
  (prefers-reduced-motion: reduce) {
  
    .urta-page
    .reveal {
      opacity: 1;
  
      transform: none;
    }
  
  
    .urta-message,
    .urta-tone-chip {
      opacity: 1;
  
      transform: none;
  
      animation: none;
    }
  
  
    .urta-preview-sheen,
    .urta-spark {
      animation: none;
    }
  
  
    .urta-feature-cube-image {
      transform: none;
  
      filter: none;
    }
  
  }


  /* =========================================
   FEATURE ROWS
   ========================================= */

.urta-feature-row {
  display: flex;
  align-items: center;
  width: 100%;

  min-height:
    clamp(
      620px,
      78vh,
      840px
    );
}


/* 01 — left, but closer to center */

.feature-row-01 {
  justify-content: flex-start;

  padding-left:
    clamp(
      25px,
      5vw,
      70px
    );
}


/* 02 — right, but closer to center */

.feature-row-02 {
  justify-content: flex-end;

  padding-right:
    clamp(
      25px,
      5vw,
      70px
    );
}


/* 03 — left, slightly more centered */

.feature-row-03 {
  justify-content: flex-start;

  padding-left:
    clamp(
      55px,
      7vw,
      100px
    );
}


/* 04 — right, slightly more centered */

.feature-row-04 {
  justify-content: flex-end;

  padding-right:
    clamp(
      55px,
      7vw,
      100px
    );
}


/* =========================================
   LARGER CUBES
   ========================================= */

/* 01 */
.feature-row-01 .urta-feature-cube {
  width:
    clamp(
      420px,
      42vw,
      560px
    );

  aspect-ratio: 1 / 1;
}


/* 02 */
.feature-row-02 .urta-feature-cube {
  width:
    clamp(
      470px,
      47vw,
      620px
    );

  aspect-ratio: 1.08 / 1;
}


/* 03 */
.feature-row-03 .urta-feature-cube {
  width:
    clamp(
      390px,
      39vw,
      520px
    );

  aspect-ratio: .95 / 1;
}


/* 04 */
.feature-row-04 .urta-feature-cube {
  width:
    clamp(
      440px,
      44vw,
      590px
    );

  aspect-ratio: 1.08 / .96;
}


.urta-feature-cube-content {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding:
    clamp(
      25px,
      3.4vw,
      48px
    );

  opacity:
    clamp(
      0,
      calc(
        (var(--reveal) - .42) * 4
      ),
      1
    );

  transform:
    translateY(
      calc(
        (1 - var(--reveal)) * 12px
      )
    );

  pointer-events: none;
}

.urta-feature-cube-content {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding:
    clamp(
      25px,
      3.4vw,
      48px
    );

  opacity:
    clamp(
      0,
      calc(
        (var(--text-reveal) - .22) * 2.3
      ),
      1
    );

  transform:
    translateY(
      calc(
        (1 - var(--text-reveal)) * 12px
      )
    );

  pointer-events: none;
}

.urta-feature-cube {
  --reveal: 0;
  --text-reveal: 0;

  position: relative;
  isolation: isolate;
  overflow: hidden;
}


#model-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

#model-container canvas {
  width: 100%;
  height: 100%;
  display: block;
}


#model-container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#model-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}


/* =========================================================
   HERO REFINEMENTS — AUG 20 2026
   ========================================================= */

/* Overall hero: shorter and tighter so it fits comfortably in one screen */
.urta-page .urta-shell {
  padding-top: 34px;
}

.urta-page .urta-hero {
  min-height: auto;
  padding-top: 12px;
  padding-bottom: 54px;
  gap: clamp(36px, 4.5vw, 66px);
}

/* 1) Hero title slightly larger */
.urta-page .urta-hero h1 {
  max-width: 690px;
  font-size: clamp(3.7rem, 5.15vw, 5.7rem);
  line-height: 0.96;
}

/* Supporting text: a little finer / lighter */
.urta-page .urta-hero-description {
  max-width: 590px;
  margin-top: 24px;
  font-size: clamp(0.98rem, 1.25vw, 1.12rem);
  line-height: 1.62;
  font-weight: 400;
  color: #77737d;
}

/* Kicker slightly finer too */
.urta-page .urta-hero .urta-kicker {
  font-size: 0.68rem;
  font-weight: 560;
  letter-spacing: 0.15em;
  margin-bottom: 1px;
}

/* 2) Urta logo x2 */
.urta-page .urta-wordmark {
  height: 86px;
  margin-bottom: 18px;
}

/* Buttons: bigger, longer, more breathing room between them */
.urta-page .urta-actions {
  gap: 18px;
  margin-top: 30px;
}

.urta-page .urta-button {
  min-height: 56px;
  min-width: 150px;
  padding: 0 31px;
  font-size: 0.98rem;
}

/* 3) Interactive chat preview: shorter */
.urta-page .urta-app-preview {
  height: 500px;
  grid-template-columns: 188px minmax(0, 1fr);
}

/* Sidebar: more visually defined / organized */
.urta-page .urta-demo-sidebar {
  padding: 22px 14px;
  border-right: 1px solid rgba(104, 101, 115, 0.13);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.64),
      rgba(247,247,249,0.46)
    );
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,0.55);
}

.urta-page .urta-demo-heading {
  margin: 0 6px 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(104, 101, 115, 0.10);
  font-size: 0.74rem;
  color: #66636d;
}

.urta-page .urta-demo-contact {
  padding: 11px 10px;
  margin-bottom: 8px;
  border: 1px solid transparent;
}

.urta-page .urta-demo-contact.is-selected {
  border-color: rgba(108, 104, 118, 0.12);
  background: rgba(255,255,255,0.80);
  box-shadow:
    0 7px 18px rgba(55,49,68,0.055),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

/* Tighten chat internals slightly to match the reduced height */
.urta-page .urta-demo-chat-header {
  min-height: 70px;
}

.urta-page .urta-demo-messages {
  gap: 13px;
  padding: 18px 0;
}

.urta-page .urta-demo-input {
  min-height: 54px;
}

/* Keep hero compact on medium screens too */
@media (max-width: 1040px) {
  .urta-page .urta-shell {
    padding-top: 28px;
  }

  .urta-page .urta-hero {
    padding-top: 8px;
    padding-bottom: 46px;
  }

  .urta-page .urta-wordmark {
    height: 72px;
  }

  .urta-page .urta-app-preview {
    height: 470px;
  }
}

/* Mobile refinement */
@media (max-width: 720px) {
  .urta-page .urta-shell {
    padding-top: 26px;
  }

  .urta-page .urta-hero h1 {
    font-size: clamp(3.05rem, 13vw, 4.45rem);
  }

  .urta-page .urta-wordmark {
    height: 64px;
    margin-bottom: 18px;
  }

  .urta-page .urta-app-preview {
    height: 455px;
  }

  .urta-page .urta-button {
    min-height: 54px;
  }
}

/* =========================================================
   HERO COPY POSITION ONLY
   Move the LEFT column inward without resizing anything.
   ========================================================= */

@media (min-width: 1041px) {
  .urta-page .urta-hero-copy {
    position: relative;
    left: 58px;
  }
}

/* =========================================================
   FEATURES — SIDE COPY OVERRIDE
   add at END of urta.css
   ========================================================= */


/* ---------------------------------------------------------
   ROW LAYOUT

   Each row now contains:
   [ artwork cube ] + [ editorial text ]

   alternating automatically through the HTML order.
   --------------------------------------------------------- */

   .urta-page .urta-feature-row {
    display: grid;
  
    grid-template-columns:
      minmax(320px, 1fr)
      minmax(280px, 0.72fr);
  
    align-items: center;
  
    gap:
      clamp(
        70px,
        9vw,
        145px
      );
  
    width: 100%;
  
    min-height:
      clamp(
        680px,
        88vh,
        900px
      );
  
    padding-left: 0;
    padding-right: 0;
  }
  
  
  /* Rows where text comes first */
  
  .urta-page .feature-row-02,
  .urta-page .feature-row-04 {
    grid-template-columns:
      minmax(280px, 0.72fr)
      minmax(320px, 1fr);
  }
  
  
  
  /* ---------------------------------------------------------
     ART CUBE SIZING
     --------------------------------------------------------- */
  
  .urta-page
  .urta-feature-row
  .urta-feature-cube {
    justify-self: center;
  }
  
  
  /* 01 */
  
  .urta-page
  .feature-row-01
  .urta-feature-cube {
    width:
      clamp(
        390px,
        39vw,
        525px
      );
  
    aspect-ratio: 1 / 1;
  }
  
  
  /* 02 — biggest */
  
  .urta-page
  .feature-row-02
  .urta-feature-cube {
    width:
      clamp(
        430px,
        44vw,
        585px
      );
  
    aspect-ratio: 1.08 / 1;
  }
  
  
  /* 03 */
  
  .urta-page
  .feature-row-03
  .urta-feature-cube {
    width:
      clamp(
        360px,
        36vw,
        480px
      );
  
    aspect-ratio: .94 / 1;
  }
  
  
  /* 04 */
  
  .urta-page
  .feature-row-04
  .urta-feature-cube {
    width:
      clamp(
        400px,
        40vw,
        540px
      );
  
    aspect-ratio: 1.08 / .96;
  }
  
  
  
  /* ---------------------------------------------------------
     LESS WHITE / LESS MATTE
  
     OLD:
     opacity reached roughly .90 white
     blur reached 18px
  
     NEW:
     max white is ~.56
     blur max ~10px
  
     Artwork stays visible.
     --------------------------------------------------------- */
  
  .urta-page
  .urta-feature-cube::after {
    background:
      rgba(
        248,
        248,
        247,
        calc(
          var(--reveal) * .56
        )
      );
  
    backdrop-filter:
      blur(
        calc(
          var(--reveal) * 10px
        )
      );
  
    -webkit-backdrop-filter:
      blur(
        calc(
          var(--reveal) * 10px
        )
      );
  }
  
  
  /* Keep a bit more color in the image */
  
  .urta-page
  .urta-feature-cube-image {
    filter:
      saturate(
        calc(
          1 -
          var(--reveal) * .10
        )
      )
  
      brightness(
        calc(
          1 +
          var(--reveal) * .035
        )
      )
  
      contrast(
        calc(
          1 -
          var(--reveal) * .02
        )
      );
  }
  
  
  
  /* ---------------------------------------------------------
     CUBE CONTENT
     --------------------------------------------------------- */
  
  .urta-page
  .urta-feature-cube-content {
    padding:
      clamp(
        30px,
        4vw,
        54px
      );
  
    justify-content: space-between;
  
    opacity:
      clamp(
        0,
        calc(
          (
            var(--reveal) - .40
          ) * 2.5
        ),
        1
      );
  }
  
  
  /* number + status on one line */
  
  .urta-page
  .urta-feature-cube-top {
    display: flex;
  
    align-items: center;
  
    justify-content: space-between;
  
    gap: 20px;
  }
  
  
  .urta-page
  .urta-feature-cube
  .urta-feature-status {
    margin: 0;
  }
  
  
  
  /* ---------------------------------------------------------
     MUCH BIGGER TITLE INSIDE ART
     --------------------------------------------------------- */
  
  .urta-page
  .urta-feature-cube h3,
  .urta-page
  .feature-row-03
  .urta-feature-cube h3 {
    max-width: 95%;
  
    margin: auto 0 0;
  
    font-size:
      clamp(
        3rem,
        5.2vw,
        5.5rem
      );
  
    font-weight: 500;
  
    line-height: .88;
  
    letter-spacing: -.07em;
  
    text-wrap: balance;
  }
  
  
  /* remove the old cube paragraph layout
     in case any old p tags remain */
  
  .urta-page
  .urta-feature-cube p {
    display: none;
  }
  
  
  
  /* =========================================================
     SIDE EDITORIAL COPY
     ========================================================= */
  
  .urta-page
  .urta-feature-side-copy {
    width: 100%;
  
    max-width: 430px;
  
    opacity:
      clamp(
        0,
        calc(
          (
            var(--reveal) - .35
          ) * 2.3
        ),
        1
      );
  
    transform:
      translateY(
        calc(
          (
            1 - var(--reveal)
          ) * 28px
        )
      );
  }
  
  
  /* copy beside LEFT cubes */
  
  .urta-page
  .feature-row-01
  .urta-feature-side-copy,
  .urta-page
  .feature-row-03
  .urta-feature-side-copy {
    justify-self: start;
  }
  
  
  /* copy beside RIGHT cubes */
  
  .urta-page
  .feature-row-02
  .urta-feature-side-copy,
  .urta-page
  .feature-row-04
  .urta-feature-side-copy {
    justify-self: end;
  }
  
  
  
  /* little editorial label */
  
  .urta-page
  .urta-feature-side-label {
    display: block;
  
    margin-bottom: 24px;
  
    color:
      rgba(
        32,
        32,
        37,
        .43
      );
  
    font-size: .68rem;
  
    font-weight: 620;
  
    letter-spacing: .14em;
  
    text-transform: uppercase;
  }
  
  
  
  /* description */
  
  .urta-page
  .urta-feature-side-copy p {
    margin: 0;
  
    color: #65626b;
  
    font-size:
      clamp(
        1.02rem,
        1.35vw,
        1.18rem
      );
  
    line-height: 1.68;
  
    letter-spacing: -.015em;
  }
  
  
  .urta-page
  .urta-feature-side-copy p + p {
    margin-top: 20px;
  
    color: #85818a;
  }
  
  
  
  /* =========================================================
     MOBILE
     ========================================================= */
  
  @media (max-width: 820px) {
  
    .urta-page
    .urta-feature-row,
  
    .urta-page
    .feature-row-02,
  
    .urta-page
    .feature-row-04 {
      display: flex;
  
      flex-direction: column;
  
      align-items: stretch;
  
      gap: 34px;
  
      min-height: auto;
  
      padding:
        70px 0;
    }
  
  
    /* On mobile always artwork first */
  
    .urta-page
    .feature-row-02
    .urta-feature-cube,
  
    .urta-page
    .feature-row-04
    .urta-feature-cube {
      order: 1;
    }
  
  
    .urta-page
    .feature-row-02
    .urta-feature-side-copy,
  
    .urta-page
    .feature-row-04
    .urta-feature-side-copy {
      order: 2;
    }
  
  
    .urta-page
    .urta-feature-row
    .urta-feature-cube {
      width: 100%;
  
      max-width: 520px;
  
      justify-self: auto;
    }
  
  
    .urta-page
    .urta-feature-side-copy {
      max-width: 520px;
  
      padding:
        0 8px;
  
      justify-self: auto;
    }
  
  
    .urta-page
    .urta-feature-cube h3,
    .urta-page
    .feature-row-03
    .urta-feature-cube h3 {
      font-size:
        clamp(
          2.8rem,
          12vw,
          4.7rem
        );
    }
  
  }

  /* =========================================================
   FEATURE POSITIONING — TIGHTER VERSION
   ========================================================= */


/* Less vertical space between feature rows */

.urta-page .urta-feature-row {
  display: grid;

  grid-template-columns:
    minmax(320px, 1fr)
    minmax(280px, .72fr);

  align-items: center;

  /* WAS 70px–145px */
  gap:
    clamp(
      32px,
      4vw,
      58px
    );

  width: 100%;

  /* WAS 680px / 88vh / 900px */
  min-height:
    clamp(
      540px,
      68vh,
      690px
    );

  padding-left: 0;
  padding-right: 0;
}


.urta-page .feature-row-02,
.urta-page .feature-row-04 {
  grid-template-columns:
    minmax(280px, .72fr)
    minmax(320px, 1fr);
}


/* =========================================================
   MOVE SIDE TEXT TOWARD THE CUBE / CENTER
   ========================================================= */

.urta-page
.urta-feature-side-copy {
  width: 100%;
  max-width: 400px;
}


/* LEFT CUBE → text is on RIGHT
   Move text LEFT toward cube */

.urta-page
.feature-row-01
.urta-feature-side-copy,

.urta-page
.feature-row-03
.urta-feature-side-copy {
  justify-self: start;

  transform:
    translate(
      -18px,
      calc(
        (1 - var(--reveal)) * 28px
      )
    );
}


/* RIGHT CUBE → text is on LEFT
   Move text RIGHT toward cube */

.urta-page
.feature-row-02
.urta-feature-side-copy,

.urta-page
.feature-row-04
.urta-feature-side-copy {
  justify-self: end;

  transform:
    translate(
      18px,
      calc(
        (1 - var(--reveal)) * 28px
      )
    );
}

.urta-page
.urta-features
.urta-section-heading {
  margin-bottom:
    clamp(
      65px,
      8vw,
      100px
    );
}

.urta-page .urta-feature-row {
  min-height:
    clamp(
      620px,
      76vh,
      780px
    );
}

/* =========================================================
   PULL FEATURE TEXT TOWARD THE CUBES / CENTER
   ========================================================= */


/* Cube on LEFT → text is on RIGHT → move text LEFT */
.urta-page
.feature-row-01
.urta-feature-side-copy,
.urta-page
.feature-row-03
.urta-feature-side-copy {
  transform: translateX(-65px);
}


/* Cube on RIGHT → text is on LEFT → move text RIGHT */
.urta-page
.feature-row-02
.urta-feature-side-copy,
.urta-page
.feature-row-04
.urta-feature-side-copy {
  transform: translateX(65px);
}

/* =========================================================
   PUSH CUBES OUTWARD + PULL TEXT CLOSER TO THEM
   ========================================================= */


/* LEFT-side cube rows */
.urta-page
.feature-row-01
.urta-feature-cube,
.urta-page
.feature-row-03
.urta-feature-cube {
  transform: translateX(-55px);
}


/* RIGHT-side cube rows */
.urta-page
.feature-row-02
.urta-feature-cube,
.urta-page
.feature-row-04
.urta-feature-cube {
  transform: translateX(55px);
}


/* Text beside LEFT cube → move LEFT toward cube */
.urta-page
.feature-row-01
.urta-feature-side-copy,
.urta-page
.feature-row-03
.urta-feature-side-copy {
  transform:
    translateX(-105px)
    translateY(
      calc((1 - var(--reveal)) * 28px)
    );
}


/* Text beside RIGHT cube → move RIGHT toward cube */
.urta-page
.feature-row-02
.urta-feature-side-copy,
.urta-page
.feature-row-04
.urta-feature-side-copy {
  transform:
    translateX(105px)
    translateY(
      calc((1 - var(--reveal)) * 28px)
    );
}


/* =========================================================
   BACKGROUND — ORIGINAL ORANGE + MEDIUM VIOLET
   ========================================================= */


/* Keep the background wash airy */
.urta-page .urta-background {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.82),
      rgba(250, 249, 252, 0.68)
    ),
    #fbfaff;
}


/* ORANGE — restore the stronger version */
.urta-page .urta-ambient-peach {
  background: #ffbda3;
  opacity: 0.46;
  filter: blur(105px);
}


/* VIOLET — between the previous two versions */
.urta-page .urta-ambient-lilac {
  background: #aea3ff;
  opacity: 0.40;
  filter: blur(112px);
}


/* SECOND VIOLET — subtle support, not dusty pink */
.urta-page .urta-ambient-pink {
  background: #cabaff;
  opacity: 0.32;
  filter: blur(118px);
}


/* Keep lower warm area */
.urta-page .urta-ambient-cream {
  background: #ffd9b8;
  opacity: 0.38;
  filter: blur(110px);
}


/* =========================================================
   HOW IT WORKS — ABSTRACTION LEVEL DEMO
   ========================================================= */


/* make the 3 cards generally a little larger */

.urta-page .urta-step {
  min-height: 500px;
  padding: 24px;
}


/* middle one slightly more prominent */

.urta-page .urta-step-boundaries {
  min-height: 540px;
}



/* =========================================================
   INTERACTIVE ABSTRACTION PANEL
   ========================================================= */

.urta-page .urta-abstraction-demo {
  --mode-a: #f7b9a8;
  --mode-b: #e6bbdd;
  --mode-c: #b8b7ff;

  position: relative;

  height: 265px;

  margin-bottom: 28px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.74);

  border-radius: 25px;

  background:
    radial-gradient(
      circle at 18% 22%,
      var(--mode-a),
      transparent 42%
    ),

    radial-gradient(
      circle at 82% 25%,
      var(--mode-c),
      transparent 46%
    ),

    linear-gradient(
      135deg,
      var(--mode-a),
      var(--mode-b) 52%,
      var(--mode-c)
    );

  transition:
    background 700ms ease;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65);
}


/* soft moving colored texture */

.urta-page .urta-abstraction-glow {
  position: absolute;

  width: 220px;
  height: 220px;

  right: -35px;
  top: -55px;

  border-radius: 48% 52% 60% 40%;

  background:
    rgba(255,255,255,.22);

  filter: blur(3px);

  transform:
    rotate(22deg);

  transition:
    transform 800ms
    cubic-bezier(.22,1,.36,1),

    width 800ms ease,
    height 800ms ease;
}


.urta-page
.urta-abstraction-demo::before {

  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  left: -45px;
  bottom: -90px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.25);

  filter: blur(15px);
}



/* =========================================================
   TEXT INSIDE PANEL
   ========================================================= */

.urta-page .urta-abstraction-copy {
  position: relative;
  z-index: 2;

  max-width: 82%;

  padding:
    30px 30px 70px;
}


.urta-page .urta-abstraction-label {
  display: block;

  margin-bottom: 12px;

  color:
    rgba(32,32,37,.46);

  font-size: .62rem;

  font-weight: 650;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.urta-page .urta-abstraction-title {
  margin: 0 0 10px;

  color: #202025;

  font-size:
    clamp(
      2rem,
      3vw,
      2.65rem
    );

  font-weight: 520;

  line-height: .95;

  letter-spacing: -.055em;

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}


.urta-page
.urta-abstraction-description {
  max-width: 330px;

  margin: 0;

  color:
    rgba(32,32,37,.60);

  font-size: .78rem;

  line-height: 1.5;

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}



/* small transition while changing mode */

.urta-page
.urta-abstraction-demo.is-changing
.urta-abstraction-title,

.urta-page
.urta-abstraction-demo.is-changing
.urta-abstraction-description {
  opacity: 0;

  transform:
    translateY(6px);
}



/* =========================================================
   SWITCHES
   ========================================================= */

.urta-page .urta-abstraction-switches {
  position: absolute;

  z-index: 3;

  left: 30px;
  bottom: 24px;

  display: flex;

  align-items: center;

  gap: 10px;
}


.urta-page .urta-abstraction-switch {
  width: 11px;
  height: 11px;

  padding: 0;

  border:
    1px solid
    rgba(32,32,37,.24);

  border-radius: 50%;

  background:
    rgba(255,255,255,.36);

  cursor: pointer;

  transition:
    width 220ms ease,
    border-radius 220ms ease,
    background 220ms ease,
    transform 220ms ease;
}


.urta-page
.urta-abstraction-switch:hover {
  transform:
    scale(1.15);
}


.urta-page
.urta-abstraction-switch.is-active {
  width: 28px;

  border-radius: 999px;

  border-color:
    rgba(32,32,37,.68);

  background: #29282d;
}



/* =========================================================
   MODE COLORS
   ========================================================= */


/* DIRECT
   closest to original wording */

.urta-page
.urta-abstraction-demo[data-mode="direct"] {
  --mode-a: #ffd2be;
  --mode-b: #f7c4c8;
  --mode-c: #e5c6e1;
}


/* BALANCED */

.urta-page
.urta-abstraction-demo[data-mode="balanced"] {
  --mode-a: #f5b5c9;
  --mode-b: #d9b9ee;
  --mode-c: #aaa8ff;
}


/* ABSTRACT
   visually cooler / more distant */

.urta-page
.urta-abstraction-demo[data-mode="abstract"] {
  --mode-a: #b9d8ff;
  --mode-b: #b7c1ff;
  --mode-c: #998cff;
}



/* subtle shape changes per mode */

.urta-page
.urta-abstraction-demo[data-mode="direct"]
.urta-abstraction-glow {
  width: 180px;
  height: 180px;

  transform:
    rotate(8deg)
    translateX(15px);
}


.urta-page
.urta-abstraction-demo[data-mode="balanced"]
.urta-abstraction-glow {
  width: 225px;
  height: 225px;

  transform:
    rotate(30deg);
}


.urta-page
.urta-abstraction-demo[data-mode="abstract"]
.urta-abstraction-glow {
  width: 290px;
  height: 190px;

  transform:
    rotate(-12deg)
    translateX(-10px);
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .urta-page .urta-abstraction-demo {
    height: 245px;
  }

  .urta-page .urta-abstraction-copy {
    max-width: 95%;

    padding:
      26px 25px 65px;
  }

  .urta-page
  .urta-abstraction-switches {
    left: 25px;
    bottom: 22px;
  }

}


/* =========================================================
   PURE CSS ABSTRACTION DEMO
   ========================================================= */

   .urta-page .urta-abstraction-demo {
    position: relative;
  
    height: 270px;
  
    margin-bottom: 28px;
  
    overflow: hidden;
  
    border-radius: 25px;
  
    border:
      1px solid
      rgba(255,255,255,.72);
  
    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.72);
  }
  
  
  /* hide actual radios */
  
  .urta-page .urta-mode-radio {
    position: absolute;
  
    opacity: 0;
  
    pointer-events: none;
  }
  
  
  /* =========================================================
     BACKGROUND
     ========================================================= */
  
  .urta-page .urta-abstraction-background {
    position: absolute;
  
    inset: 0;
  
    z-index: 0;
  
    background:
      radial-gradient(
        circle at 20% 20%,
        #f5b5c9,
        transparent 42%
      ),
  
      radial-gradient(
        circle at 82% 24%,
        #aaa8ff,
        transparent 46%
      ),
  
      linear-gradient(
        135deg,
        #f5b5c9,
        #d9b9ee 52%,
        #aaa8ff
      );
  
    transition:
      opacity 650ms ease,
      filter 650ms ease;
  }
  
  
  /* decorative glow */
  
  .urta-page .urta-abstraction-glow {
    position: absolute;
  
    z-index: 1;
  
    width: 230px;
    height: 230px;
  
    right: -45px;
    top: -60px;
  
    border-radius:
      48% 52% 60% 40%;
  
    background:
      rgba(255,255,255,.24);
  
    filter:
      blur(3px);
  
    transform:
      rotate(28deg);
  
    transition:
      transform 700ms ease,
      width 700ms ease,
      height 700ms ease;
  }
  
  
  /* =========================================================
     COPY
     ========================================================= */
  
  .urta-page .urta-mode-copy {
    position: absolute;
  
    z-index: 2;
  
    top: 0;
    left: 0;
  
    max-width: 84%;
  
    padding:
      30px 30px 74px;
  
    opacity: 0;
  
    transform:
      translateY(8px);
  
    transition:
      opacity 260ms ease,
      transform 260ms ease;
  
    pointer-events: none;
  }
  
  
  .urta-page .urta-abstraction-label {
    display: block;
  
    margin-bottom: 12px;
  
    color:
      rgba(32,32,37,.45);
  
    font-size: .62rem;
  
    font-weight: 650;
  
    letter-spacing: .12em;
  
    text-transform: uppercase;
  }
  
  
  .urta-page .urta-mode-copy h4 {
    margin:
      0 0 10px;
  
    color: #202025;
  
    font-size:
      clamp(
        2rem,
        3vw,
        2.7rem
      );
  
    font-weight: 520;
  
    line-height: .95;
  
    letter-spacing: -.055em;
  }
  
  
  .urta-page .urta-mode-copy p {
    max-width: 330px;
  
    margin: 0;
  
    color:
      rgba(32,32,37,.60);
  
    font-size: .78rem;
  
    line-height: 1.5;
  }
  
  
  /* =========================================================
     SWITCHES
     ========================================================= */
  
  .urta-page .urta-abstraction-switches {
    position: absolute;
  
    z-index: 5;
  
    left: 30px;
    bottom: 24px;
  
    display: flex;
  
    gap: 10px;
  
    align-items: center;
  }
  
  
  .urta-page .urta-abstraction-switch {
    display: block;
  
    width: 11px;
    height: 11px;
  
    border-radius: 50%;
  
    border:
      1px solid
      rgba(32,32,37,.24);
  
    background:
      rgba(255,255,255,.40);
  
    cursor: pointer;
  
    transition:
      width 220ms ease,
      border-radius 220ms ease,
      background 220ms ease,
      transform 220ms ease;
  }
  
  
  .urta-page
  .urta-abstraction-switch:hover {
    transform:
      scale(1.15);
  }
  
  
  /* =========================================================
     ACTIVE COPY
     ========================================================= */
  
  #urta-mode-direct:checked
  ~ .urta-mode-copy-direct,
  
  #urta-mode-balanced:checked
  ~ .urta-mode-copy-balanced,
  
  #urta-mode-abstract:checked
  ~ .urta-mode-copy-abstract {
    opacity: 1;
  
    transform:
      translateY(0);
  }
  
  
  /* =========================================================
     ACTIVE SWITCH
     ========================================================= */
  
  #urta-mode-direct:checked
  ~ .urta-abstraction-switches
  label[for="urta-mode-direct"],
  
  #urta-mode-balanced:checked
  ~ .urta-abstraction-switches
  label[for="urta-mode-balanced"],
  
  #urta-mode-abstract:checked
  ~ .urta-abstraction-switches
  label[for="urta-mode-abstract"] {
  
    width: 29px;
  
    border-radius: 999px;
  
    border-color:
      rgba(32,32,37,.65);
  
    background:
      #29282d;
  }
  
  
  /* =========================================================
     MODE BACKGROUNDS
     ========================================================= */
  
  
  /* DIRECT */
  
  #urta-mode-direct:checked
  ~ .urta-abstraction-background {
  
    background:
      radial-gradient(
        circle at 20% 20%,
        #ffd4bf,
        transparent 42%
      ),
  
      radial-gradient(
        circle at 80% 25%,
        #eac6de,
        transparent 46%
      ),
  
      linear-gradient(
        135deg,
        #ffd4bf,
        #f7c3c7 52%,
        #e6c6e0
      );
  }
  
  
  /* BALANCED */
  
  #urta-mode-balanced:checked
  ~ .urta-abstraction-background {
  
    background:
      radial-gradient(
        circle at 20% 20%,
        #f6b7ca,
        transparent 42%
      ),
  
      radial-gradient(
        circle at 82% 24%,
        #aaa8ff,
        transparent 46%
      ),
  
      linear-gradient(
        135deg,
        #f6b7ca,
        #d9b9ee 52%,
        #aaa8ff
      );
  }
  
  
  /* ABSTRACT */
  
  #urta-mode-abstract:checked
  ~ .urta-abstraction-background {
  
    background:
      radial-gradient(
        circle at 20% 20%,
        #b9dbff,
        transparent 42%
      ),
  
      radial-gradient(
        circle at 82% 24%,
        #978cff,
        transparent 46%
      ),
  
      linear-gradient(
        135deg,
        #b9dbff,
        #b7c1ff 52%,
        #978cff
      );
  }
  
  
  /* =========================================================
     SHAPE CHANGES
     ========================================================= */
  
  #urta-mode-direct:checked
  ~ .urta-abstraction-glow {
  
    width: 180px;
    height: 180px;
  
    transform:
      rotate(8deg)
      translateX(10px);
  }
  
  
  #urta-mode-balanced:checked
  ~ .urta-abstraction-glow {
  
    width: 230px;
    height: 230px;
  
    transform:
      rotate(28deg);
  }
  
  
  #urta-mode-abstract:checked
  ~ .urta-abstraction-glow {
  
    width: 290px;
    height: 190px;
  
    transform:
      rotate(-12deg)
      translateX(-15px);
  }


  /* =========================================================
   HOW IT WORKS — ABSTRACTION DEMO
   BIGGER COLOR AREA + CENTERED DOTS + COLORFUL MODE NAMES
   ========================================================= */

.urta-page .urta-step-boundaries {
  min-height: 560px;
  padding: 20px;
}


/* bigger colorful area */
.urta-page .urta-abstraction-demo {
  position: relative;

  height: 340px;

  margin-bottom: 24px;

  overflow: hidden;

  border-radius: 28px;

  border: 1px solid rgba(255,255,255,.72);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72);
}


/* hidden radios */
.urta-page .urta-mode-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.urta-page .urta-abstraction-background {
  position: absolute;
  inset: 0;

  z-index: 0;

  background:
    radial-gradient(
      circle at 18% 18%,
      #f5b5c9,
      transparent 43%
    ),

    radial-gradient(
      circle at 84% 20%,
      #aaa8ff,
      transparent 47%
    ),

    linear-gradient(
      135deg,
      #f5b5c9,
      #d9b9ee 52%,
      #aaa8ff
    );

  transition:
    opacity 500ms ease,
    filter 500ms ease;
}


.urta-page .urta-abstraction-glow {
  position: absolute;

  z-index: 1;

  width: 290px;
  height: 250px;

  right: -50px;
  top: -55px;

  border-radius:
    46% 54% 61% 39%;

  background:
    rgba(255,255,255,.22);

  filter:
    blur(5px);

  transform:
    rotate(25deg);

  transition:
    transform 700ms ease,
    width 700ms ease,
    height 700ms ease;
}


/* =========================================================
   MODE COPY
   ========================================================= */

.urta-page .urta-mode-copy {
  position: absolute;

  z-index: 2;

  top: 0;
  left: 0;

  width: 100%;

  max-width: 86%;

  padding:
    34px 36px 90px;

  opacity: 0;

  transform:
    translateY(8px);

  transition:
    opacity 240ms ease,
    transform 240ms ease;

  pointer-events: none;
}


.urta-page .urta-abstraction-label {
  display: block;

  margin-bottom: 14px;

  color:
    rgba(32,32,37,.42);

  font-size: .64rem;

  font-weight: 650;

  letter-spacing: .13em;

  text-transform: uppercase;
}


/* =========================================================
   MODE NAMES — COLORFUL
   ========================================================= */

.urta-page .urta-mode-copy h4 {
  margin:
    0 0 12px;

  font-size:
    clamp(
      2.8rem,
      4vw,
      4rem
    );

  font-weight: 540;

  line-height: .92;

  letter-spacing: -.065em;
}


/* Direct = warm coral */
.urta-page .urta-mode-copy-direct h4 {
  color: #010000;
}


/* Balanced = violet */
.urta-page .urta-mode-copy-balanced h4 {
  color: #010004;
}


/* Abstract = cool blue-violet */
.urta-page .urta-mode-copy-abstract h4 {
  color: #000103;
}


/* shorter description style */
.urta-page .urta-mode-copy p {
  max-width: 300px;

  margin: 0;

  color:
    rgba(32,32,37,.60);

  font-size: .82rem;

  line-height: 1.48;
}


/* =========================================================
   ACTIVE COPY
   ========================================================= */

#urta-mode-direct:checked
~ .urta-mode-copy-direct,

#urta-mode-balanced:checked
~ .urta-mode-copy-balanced,

#urta-mode-abstract:checked
~ .urta-mode-copy-abstract {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   DOTS — CENTERED
   ========================================================= */

.urta-page .urta-abstraction-switches {
  position: absolute;

  z-index: 5;

  left: 50%;
  bottom: 26px;

  transform:
    translateX(-50%);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 11px;
}


.urta-page .urta-abstraction-switch {
  display: block;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  border:
    1px solid
    rgba(32,32,37,.24);

  background:
    rgba(255,255,255,.52);

  cursor: pointer;

  transition:
    width 220ms ease,
    background 220ms ease,
    border-radius 220ms ease,
    transform 220ms ease;
}


.urta-page .urta-abstraction-switch:hover {
  transform:
    scale(1.12);
}


/* selected dot */

#urta-mode-direct:checked
~ .urta-abstraction-switches
label[for="urta-mode-direct"],

#urta-mode-balanced:checked
~ .urta-abstraction-switches
label[for="urta-mode-balanced"],

#urta-mode-abstract:checked
~ .urta-abstraction-switches
label[for="urta-mode-abstract"] {

  width: 34px;

  border-radius: 999px;

  border-color:
    rgba(32,32,37,.68);

  background:
    #29282d;
}


/* =========================================================
   MODE BACKGROUNDS
   ========================================================= */


/* DIRECT */

#urta-mode-direct:checked
~ .urta-abstraction-background {

  background:
    radial-gradient(
      circle at 18% 17%,
      #ffd3bd,
      transparent 43%
    ),

    radial-gradient(
      circle at 84% 20%,
      #efbed1,
      transparent 48%
    ),

    linear-gradient(
      135deg,
      #ffcbb7,
      #f3b5bf 50%,
      #e8bfd9
    );
}


/* BALANCED */

#urta-mode-balanced:checked
~ .urta-abstraction-background {

  background:
    radial-gradient(
      circle at 18% 18%,
      #f8b0c5,
      transparent 43%
    ),

    radial-gradient(
      circle at 84% 20%,
      #9f9aff,
      transparent 48%
    ),

    linear-gradient(
      135deg,
      #f4aec4,
      #d7afe8 50%,
      #a39cff
    );
}


/* ABSTRACT */

#urta-mode-abstract:checked
~ .urta-abstraction-background {

  background:
    radial-gradient(
      circle at 18% 18%,
      #b9e0ff,
      transparent 43%
    ),

    radial-gradient(
      circle at 84% 20%,
      #9388ff,
      transparent 48%
    ),

    linear-gradient(
      135deg,
      #b9dcff,
      #b5c3ff 50%,
      #9388ff
    );
}


/* =========================================================
   MODE SHAPE CHANGES
   ========================================================= */

#urta-mode-direct:checked
~ .urta-abstraction-glow {
  width: 230px;
  height: 230px;

  transform:
    rotate(8deg)
    translateX(12px);
}


#urta-mode-balanced:checked
~ .urta-abstraction-glow {
  width: 300px;
  height: 260px;

  transform:
    rotate(27deg);
}


#urta-mode-abstract:checked
~ .urta-abstraction-glow {
  width: 350px;
  height: 215px;

  transform:
    rotate(-12deg)
    translateX(-18px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .urta-page .urta-abstraction-demo {
    height: 315px;
  }

  .urta-page .urta-mode-copy {
    max-width: 95%;

    padding:
      30px 28px 85px;
  }

  .urta-page .urta-mode-copy h4 {
    font-size:
      clamp(
        2.5rem,
        11vw,
        3.5rem
      );
  }

}




/* =========================================================
   COMMUNICATE — FLOATING LETTER TRANSFORMATION
   ========================================================= */

   .urta-text-transform {
    position: relative;
  
    display: flex;
    flex-direction: column;
  
    justify-content: space-between;
  
    height: 215px;
  
    padding: 25px 27px 22px;
  
    overflow: hidden;
  
    border-radius: 22px;
  
    background:
      radial-gradient(
        circle at 20% 30%,
        rgba(255, 189, 211, .20),
        transparent 35%
      ),
      radial-gradient(
        circle at 85% 70%,
        rgba(164, 151, 255, .18),
        transparent 38%
      ),
      rgba(255,255,255,.34);
  }
  
  
  /* subtle moving color underneath */
  
  .urta-text-transform::before {
    content: "";
  
    position: absolute;
  
    width: 180px;
    height: 180px;
  
    left: 35%;
    top: 5%;
  
    border-radius: 50%;
  
    background:
      linear-gradient(
        135deg,
        rgba(248, 161, 191, .20),
        rgba(169, 146, 246, .19)
      );
  
    filter: blur(45px);
  
    animation:
      urta-transform-ambient
      8s
      ease-in-out
      infinite alternate;
  
    pointer-events: none;
  }
  
  
  .urta-transform-label {
    position: relative;
    z-index: 3;
  
    color: rgba(64, 59, 71, .45);
  
    font-size: .58rem;
    font-weight: 650;
  
    letter-spacing: .13em;
  
    text-transform: uppercase;
  }
  
  
  
  /* =========================================
     LETTER STAGE
     ========================================= */
  
  .urta-transform-stage {
    position: relative;
  
    z-index: 2;
  
    display: flex;
  
    align-items: center;
  
    width: 100%;
    min-height: 100px;
  }
  
  
  .urta-transform-text {
    position: relative;
  
    width: 100%;
  
    color: #29272e;
  
    font-size:
      clamp(
        .92rem,
        1.3vw,
        1.15rem
      );
  
    font-weight: 520;
  
    line-height: 1.45;
  
    letter-spacing: -.025em;
  }
  
  
  
  /* every individual character */
  
  .urta-transform-char {
    display: inline-block;
  
    will-change:
      transform,
      opacity,
      filter;
  
    transform-origin: center;
  
    transition:
      transform
        900ms
        cubic-bezier(.18,.82,.22,1),
  
      opacity
        520ms
        ease,
  
      filter
        700ms
        ease;
  }
  
  
  .urta-transform-char.space {
    width: .28em;
  }
  
  
  
  /* floating state */
  
  .urta-transform-char.is-floating {
    opacity: 0;
  
    filter: blur(5px);
  
    transform:
      translate(
        var(--float-x),
        var(--float-y)
      )
      rotate(
        var(--float-r)
      )
      scale(.84);
  }
  
  
  
  /* incoming state */
  
  .urta-transform-char.is-entering {
    opacity: 0;
  
    filter: blur(5px);
  
    transform:
      translate(
        var(--enter-x),
        var(--enter-y)
      )
      rotate(
        var(--enter-r)
      )
      scale(.86);
  }
  
  
  
  /* =========================================
     STATUS
     ========================================= */
  
  .urta-transform-status {
    position: relative;
    z-index: 3;
  
    display: flex;
  
    align-items: center;
  
    gap: 7px;
  
    color:
      rgba(72,68,80,.48);
  
    font-size: .58rem;
  
    letter-spacing: .02em;
  }
  
  
  .urta-transform-dot {
    width: 6px;
    height: 6px;
  
    border-radius: 50%;
  
    background:
      linear-gradient(
        135deg,
        #ef9bb8,
        #8f80e8
      );
  
    box-shadow:
      0 0 0 4px
      rgba(187,150,218,.08);
  
    animation:
      urta-transform-dot-pulse
      2.6s
      ease-in-out
      infinite;
  }
  
  
  
  /* =========================================
     BACKGROUND ANIMATION
     ========================================= */
  
  @keyframes urta-transform-ambient {
  
    0% {
      transform:
        translate(-25px, 8px)
        scale(.9);
    }
  
    50% {
      transform:
        translate(22px, -8px)
        scale(1.08);
    }
  
    100% {
      transform:
        translate(45px, 14px)
        scale(.96);
    }
  }
  
  
  @keyframes urta-transform-dot-pulse {
  
    0%,
    100% {
      opacity: .55;
      transform: scale(.9);
    }
  
    50% {
      opacity: 1;
      transform: scale(1.18);
    }
  }

  /* Urta navbar:
   same layout as other pages,
   but sticky + matte glass texture
*/

/*.urta-page .site-header {
.site-header {
  position: sticky;
  top: 14px;
  z-index: 1000;

  background:
    rgba(248, 248, 249, 0.72);

  border:
    1px solid
    rgba(255, 255, 255, 0.78);

  box-shadow:
    0 12px 36px
    rgba(50, 45, 65, 0.06);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(85%);

  backdrop-filter:
    blur(22px)
    saturate(85%);
}
*/
/*
.home-page .site-header {
  position: sticky;
  top: 14px;
  z-index: 1000;

  background:
    rgba(248, 248, 249, 0.72);

  border:
    1px solid
    rgba(255, 255, 255, 0.78);

  box-shadow:
    0 12px 36px
    rgba(50, 45, 65, 0.06);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(85%);

  backdrop-filter:
    blur(22px)
    saturate(85%);
}
*/


.urta-problem {
  --metal-light-x: 30%;
  --metal-light-y: 25%;
  --metal-angle: 112deg;
  --reflection-position: -80%;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: grid;
  grid-template-columns: minmax(130px, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(50px, 9vw, 150px);
  align-items: start;

  margin: clamp(50px, 8vw, 120px) auto;
  padding:
    clamp(55px, 8vw, 110px)
    clamp(35px, 7vw, 100px);

  max-width: 1380px;
  min-height: 620px;

  border-radius: 38px;
  color: #181818;

  /*
    Main stainless-steel surface.
    The first gradient is the movable light.
  */
  background:
    radial-gradient(
      circle at var(--metal-light-x) var(--metal-light-y),
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.48) 9%,
      rgba(255, 255, 255, 0.08) 24%,
      transparent 40%
    ),
    linear-gradient(
      var(--metal-angle),
      #d5d5d2 0%,
      #a8a8a5 13%,
      #e8e8e4 27%,
      #b2b2af 42%,
      #d9d8d4 58%,
      #969795 72%,
      #dededb 87%,
      #b3b3b0 100%
    );

  background-size:
    100% 100%,
    180% 180%;

  border: 1px solid rgba(255, 255, 255, 0.72);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(35, 35, 35, 0.20),
    inset 22px 0 70px rgba(255, 255, 255, 0.15),
    inset -25px 0 70px rgba(30, 30, 30, 0.08),
    0 35px 90px rgba(42, 34, 32, 0.18);
}

/* Fine brushed-steel texture */
.urta-problem::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.065) 0,
      rgba(255, 255, 255, 0.065) 1px,
      rgba(25, 25, 25, 0.025) 1.5px,
      transparent 3px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 4px
    );

  opacity: 0.78;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Large moving reflected-light streak */
.urta-problem::after {
  content: "";
  position: absolute;
  z-index: -1;

  top: -55%;
  left: var(--reflection-position);

  width: 55%;
  height: 210%;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 20%,
    rgba(255, 255, 255, 0.23) 39%,
    rgba(255, 255, 255, 0.78) 50%,
    rgba(255, 255, 255, 0.20) 63%,
    transparent 100%
  );

  filter: blur(22px);
  mix-blend-mode: screen;

  transform: rotate(14deg);
  will-change: left;

  pointer-events: none;
}

/* Keep all text above the metallic layers */
.urta-problem > * {
  position: relative;
  z-index: 2;
}

.urta-problem .urta-section-index {
  margin: 8px 0 0;

  color: rgba(20, 20, 20, 0.54);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.urta-problem h2 {
  max-width: 900px;
  margin: 0;

  color: #171717;
  font-size: clamp(2.5rem, 5vw, 5.4rem);
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: -0.058em;
}

.urta-problem div > p {
  max-width: 650px;
  margin: 36px 0 0;

  color: rgba(20, 20, 20, 0.67);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.65;
}

/* Stack the layout on smaller screens */
@media (max-width: 760px) {
  .urta-problem {
    grid-template-columns: 1fr;
    gap: 50px;

    min-height: 620px;
    margin-inline: 16px;
    padding: 48px 28px 60px;
    border-radius: 25px;
  }

  .urta-problem h2 {
    font-size: clamp(2.55rem, 12vw, 4rem);
  }

  .urta-problem div > p {
    margin-top: 28px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .urta-problem {
    --reflection-position: 20%;
  }
}

.urta-problem {
  --metal-light-x: 30%;
  --metal-light-y: 25%;
  --metal-angle: 112deg;
  --reflection-position: -80%;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: grid;
  grid-template-columns:
    minmax(130px, 0.55fr)
    minmax(0, 1.45fr);

  gap: clamp(45px, 8vw, 130px);
  align-items: start;

  max-width: 1380px;

  /* Reduced height */
  min-height: 470px;
  margin: clamp(45px, 7vw, 100px) auto;
  padding:
    clamp(52px, 6vw, 78px)
    clamp(35px, 7vw, 100px);

  border-radius: 38px;
  color: #181818;

  /*
    Cooler gray steel with restrained
    pink and lavender reflections
  */
  background:
    radial-gradient(
      circle at var(--metal-light-x) var(--metal-light-y),
      rgba(255, 255, 255, 0.94) 0%,
      rgba(247, 241, 248, 0.55) 10%,
      rgba(238, 226, 241, 0.13) 27%,
      transparent 42%
    ),

    radial-gradient(
      circle at 8% 80%,
      rgba(242, 188, 203, 0.24) 0%,
      rgba(231, 188, 206, 0.10) 24%,
      transparent 46%
    ),

    radial-gradient(
      circle at 96% 15%,
      rgba(183, 181, 229, 0.22) 0%,
      rgba(196, 188, 232, 0.08) 27%,
      transparent 48%
    ),

    linear-gradient(
      var(--metal-angle),
      #c8c9cd 0%,
      #9fa1a7 14%,
      #dddde1 28%,
      #afb0b6 42%,
      #d2ced5 57%,
      #9799a0 72%,
      #dbd9df 87%,
      #a7a8ae 100%
    );

  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    180% 180%;

  border: 1px solid rgba(255, 255, 255, 0.7);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(38, 38, 48, 0.20),
    inset 20px 0 65px rgba(236, 205, 218, 0.08),
    inset -24px 0 70px rgba(174, 169, 218, 0.08),
    0 28px 70px rgba(62, 52, 72, 0.16);
}

.urta-problem::after {
  content: "";
  position: absolute;
  z-index: -1;

  top: -55%;
  left: var(--reflection-position);

  width: 55%;
  height: 210%;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(221, 211, 232, 0.04) 20%,
    rgba(242, 211, 224, 0.20) 39%,
    rgba(255, 250, 255, 0.76) 50%,
    rgba(202, 199, 235, 0.20) 63%,
    transparent 100%
  );

  filter: blur(22px);
  mix-blend-mode: screen;
  transform: rotate(14deg);
  will-change: left;
  pointer-events: none;
}

@media (max-width: 760px) {
  .urta-problem {
    grid-template-columns: 1fr;
    gap: 36px;

    min-height: auto;
    margin-inline: 16px;
    padding: 44px 28px 52px;
    border-radius: 25px;
  }
}

.urta-problem {
  --metal-light-x: 30%;
  --metal-light-y: 25%;
  --reflection-position: -80%;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: grid;
  grid-template-columns:
    minmax(130px, 0.55fr)
    minmax(0, 1.45fr);

  gap: clamp(45px, 8vw, 130px);
  align-items: start;

  max-width: 1380px;

  /* Shorter panel */
  min-height: 390px;
  margin: clamp(40px, 6vw, 90px) auto;
  padding:
    clamp(42px, 4.5vw, 62px)
    clamp(35px, 7vw, 100px);

  border-radius: 38px;
  color: #151518;

  /*
    Darker cool-gray metal.

    The final linear gradient is now 90deg,
    creating straight vertical light and dark bands.
  */
  background:
    radial-gradient(
      circle at var(--metal-light-x) var(--metal-light-y),
      rgba(255, 255, 255, 0.64) 0%,
      rgba(235, 224, 239, 0.24) 12%,
      transparent 34%
    ),

    radial-gradient(
      circle at 4% 85%,
      rgba(218, 153, 181, 0.22) 0%,
      rgba(210, 158, 184, 0.08) 29%,
      transparent 50%
    ),

    radial-gradient(
      circle at 97% 10%,
      rgba(154, 151, 211, 0.20) 0%,
      rgba(163, 158, 213, 0.07) 30%,
      transparent 50%
    ),

    linear-gradient(
      90deg,
      #96979e 0%,
      #85868d 13%,
      #b5b4ba 27%,

      /* Wider straight dark reflection */
      #89898f 38%,
      #73747b 48%,
      #77777e 58%,

      #aaa7af 72%,
      #8a8b92 87%,
      #9c9da4 100%
    );

  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    180% 100%;

  border: 1px solid rgba(255, 255, 255, 0.50);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -1px 0 rgba(20, 20, 28, 0.28),
    inset 18px 0 55px rgba(230, 186, 207, 0.07),
    inset -20px 0 60px rgba(157, 151, 213, 0.08),
    0 25px 65px rgba(50, 42, 61, 0.20);
}



.urta-problem {
  --metal-light-x: 30%;
  --metal-light-y: 25%;
  --metal-angle: 112deg;
  --reflection-position: -90%;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: grid;
  grid-template-columns:
    minmax(130px, 0.55fr)
    minmax(0, 1.45fr);

  gap: clamp(45px, 8vw, 130px);
  align-items: start;

  max-width: 1380px;
  min-height: 390px;

  margin: clamp(40px, 6vw, 90px) auto;

  padding:
    clamp(42px, 4.5vw, 62px)
    clamp(35px, 7vw, 100px);

  border-radius: 38px;
  color: #151518;

  /*
    Neutral, cool-gray metallic base.
    No brown, beige, or warm gray.
  */
  background:
    radial-gradient(
      circle at var(--metal-light-x) var(--metal-light-y),
      rgba(246, 247, 250, 0.50) 0%,
      rgba(224, 226, 232, 0.18) 17%,
      transparent 42%
    ),

    radial-gradient(
      circle at 4% 90%,
      rgba(200, 184, 210, 0.09) 0%,
      transparent 43%
    ),

    radial-gradient(
      circle at 96% 8%,
      rgba(178, 181, 218, 0.10) 0%,
      transparent 44%
    ),

    linear-gradient(
      var(--metal-angle),
      #999ba2 0%,
      #8e9098 13%,
      #a7a9b0 27%,
      #95979f 39%,

      /* Wider, smoother dark metallic area */
      #83858d 49%,
      #7d7f87 57%,
      #888a92 65%,

      #a0a2a9 78%,
      #8d8f97 90%,
      #989aa2 100%
    );

  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    180% 180%;

  border: 1px solid rgba(246, 247, 250, 0.48);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(15, 18, 26, 0.30),
    inset 18px 0 60px rgba(216, 211, 227, 0.04),
    inset -22px 0 65px rgba(173, 178, 211, 0.05),
    0 25px 65px rgba(45, 46, 58, 0.20);
}


.urta-problem::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;

  /*
    Extremely subtle surface variation.
    No repeating lines.
  */
  background:
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.035),
      transparent 32%,
      rgba(30, 32, 41, 0.025) 64%,
      transparent
    );

  opacity: 0.7;
  pointer-events: none;
}

.urta-problem::after {
  content: "";
  position: absolute;
  z-index: -1;

  top: -70%;
  left: var(--reflection-position);

  /*
    Much wider reflection, so there is no
    obvious bright bar moving across it.
  */
  width: 78%;
  height: 240%;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(235, 237, 244, 0.015) 10%,
    rgba(239, 240, 246, 0.04) 24%,
    rgba(245, 245, 250, 0.10) 39%,
    rgba(250, 250, 253, 0.22) 50%,
    rgba(240, 241, 248, 0.10) 61%,
    rgba(222, 225, 238, 0.04) 76%,
    rgba(211, 215, 231, 0.015) 90%,
    transparent 100%
  );

  /* More blur creates a gradual reflection */
  filter: blur(38px);
  mix-blend-mode: screen;

  /* Return to diagonal */
  transform: rotate(13deg);

  will-change: left;
  pointer-events: none;
}



.urta-problem::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;

  /*
    Soft, irregular surface variation.
    No lines and no dot pattern.
  */
  background:
    radial-gradient(
      ellipse at 38% 105%,
      rgba(255, 255, 255, 0.15),
      transparent 38%
    ),
    radial-gradient(
      ellipse at 58% -15%,
      rgba(20, 22, 25, 0.10),
      transparent 42%
    ),
    linear-gradient(
      122deg,
      transparent 12%,
      rgba(255, 255, 255, 0.07) 31%,
      transparent 48%,
      rgba(25, 27, 30, 0.06) 68%,
      transparent 86%
    );

  filter: blur(10px);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.urta-problem {
  --metal-light-x: 30%;
  --metal-light-y: 25%;
  --metal-angle: 112deg;
  --reflection-position: -90%;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: grid;
  grid-template-columns:
    minmax(130px, 0.55fr)
    minmax(0, 1.45fr);

  gap: clamp(45px, 8vw, 130px);
  align-items: start;

  max-width: 1380px;
  min-height: 390px;

  margin: clamp(40px, 6vw, 90px) auto;

  padding:
    clamp(42px, 4.5vw, 62px)
    clamp(35px, 7vw, 100px);

  border-radius: 38px;
  color: #111215;

  background:
    /* Moving concentrated reflection */
    radial-gradient(
      ellipse at var(--metal-light-x) var(--metal-light-y),
      rgba(255, 255, 255, 0.72) 0%,
      rgba(237, 238, 240, 0.34) 12%,
      transparent 34%
    ),

    /* Irregular white reflected area */
    radial-gradient(
      ellipse at 13% 82%,
      rgba(248, 248, 247, 0.34) 0%,
      rgba(219, 220, 220, 0.13) 27%,
      transparent 48%
    ),

    /* Dark reflected shape */
    radial-gradient(
      ellipse at 75% 16%,
      rgba(42, 45, 49, 0.35) 0%,
      rgba(68, 71, 76, 0.15) 24%,
      transparent 48%
    ),

    /* Secondary dark reflection */
    radial-gradient(
      ellipse at 27% 30%,
      rgba(52, 55, 60, 0.20) 0%,
      transparent 35%
    ),

    /* Soft silver reflection at lower right */
    radial-gradient(
      ellipse at 86% 91%,
      rgba(238, 239, 239, 0.30) 0%,
      transparent 43%
    ),

    /* Main cool-silver metal */
    linear-gradient(
      var(--metal-angle),
      #a7a9aa 0%,
      #d5d6d5 12%,
      #999b9c 25%,
      #737678 38%,
      #bfc0bf 51%,
      #ececea 62%,
      #a0a2a3 73%,
      #626568 85%,
      #afb1b1 100%
    );

  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    185% 185%;

  border: 1px solid rgba(255, 255, 255, 0.68);

  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    inset 0 -2px 0 rgba(30, 32, 34, 0.38),
    inset 18px 0 55px rgba(255, 255, 255, 0.07),
    inset -22px 0 65px rgba(25, 27, 30, 0.10),
    0 26px 65px rgba(48, 50, 54, 0.20);
}

.urta-problem::after {
  content: "";
  position: absolute;
  z-index: -1;

  top: -75%;
  left: var(--reflection-position);

  width: 84%;
  height: 250%;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(235, 236, 237, 0.02) 10%,
    rgba(245, 245, 244, 0.07) 25%,
    rgba(255, 255, 253, 0.17) 39%,
    rgba(255, 255, 253, 0.34) 50%,
    rgba(245, 246, 246, 0.16) 62%,
    rgba(214, 216, 218, 0.06) 78%,
    transparent 100%
  );

  filter: blur(42px);
  mix-blend-mode: screen;
  transform: rotate(13deg);

  will-change: left;
  pointer-events: none;
}


.urta-problem {
  --metal-light-x: 30%;
  --metal-light-y: 25%;
  --metal-angle: 112deg;
  --reflection-position: -90%;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* Position the text intentionally */
  display: flex;
  align-items: center;
  justify-content: flex-end;

  max-width: 1380px;

  /* Much shorter */
  min-height: 315px;

  margin: clamp(40px, 6vw, 90px) auto;
  padding:
    clamp(34px, 4vw, 52px)
    clamp(42px, 7vw, 100px);

  border-radius: 38px;
  color: #101116;

  /*
    Cold silver:
    slightly blue-gray rather than beige-gray.
  */
  background:
    radial-gradient(
      ellipse at var(--metal-light-x) var(--metal-light-y),
      rgba(249, 252, 255, 0.70) 0%,
      rgba(222, 229, 237, 0.30) 13%,
      transparent 34%
    ),

    radial-gradient(
      ellipse at 10% 85%,
      rgba(230, 236, 242, 0.30) 0%,
      rgba(190, 199, 209, 0.11) 27%,
      transparent 49%
    ),

    radial-gradient(
      ellipse at 76% 10%,
      rgba(42, 48, 58, 0.31) 0%,
      rgba(59, 66, 77, 0.13) 25%,
      transparent 49%
    ),

    radial-gradient(
      ellipse at 87% 93%,
      rgba(225, 232, 239, 0.27) 0%,
      transparent 42%
    ),

    linear-gradient(
      var(--metal-angle),
      #969da5 0%,
      #cbd1d6 13%,
      #8d959e 26%,
      #69727c 39%,
      #adb5bd 51%,
      #e0e5e8 62%,
      #929ba4 74%,
      #545e69 86%,
      #a1a9b1 100%
    );

  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    185% 185%;

  border: 1px solid rgba(242, 247, 252, 0.68);

  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.70),
    inset 0 -2px 0 rgba(22, 28, 35, 0.40),
    inset 18px 0 55px rgba(229, 238, 247, 0.07),
    inset -22px 0 65px rgba(25, 32, 41, 0.11),
    0 25px 65px rgba(45, 51, 59, 0.20);
}

.urta-problem__content {
  position: relative;
  z-index: 2;

  width: min(68%, 900px);
  margin-right: clamp(10px, 2vw, 32px);
}

.urta-problem h2 {
  max-width: 900px;
  margin: 0;

  color: #101115;

  /* Slightly smaller so the section can be shorter */
  font-size: clamp(2.65rem, 4.25vw, 4.75rem);
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: -0.058em;
}

.urta-problem__content > p {
  max-width: 760px;
  margin: clamp(20px, 2.3vw, 30px) 0 0;

  color: rgba(22, 26, 32, 0.67);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  line-height: 1.55;
}

@media (max-width: 760px) {
  .urta-problem {
    min-height: auto;
    margin-inline: 16px;
    padding: 38px 26px 42px;
    border-radius: 25px;
  }

  .urta-problem__content {
    width: 100%;
    margin: 0;
  }

  .urta-problem h2 {
    font-size: clamp(2.4rem, 11vw, 3.7rem);
  }
}

.urta-problem {
  justify-content: flex-start;

  /* Slightly shorter again */
  min-height: 290px;

  padding:
    clamp(32px, 3.5vw, 46px)
    clamp(40px, 6vw, 82px);

  /* Softer shape */
  border-radius: 30px;

  /* Remove the obvious outlined boundary */
  border: none;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(22, 28, 35, 0.25),
    0 22px 58px rgba(45, 51, 59, 0.15);
}

.urta-problem__content {
  position: relative;
  z-index: 2;

  /* Use the panel width instead of leaving a huge empty column */
  width: min(100%, 1080px);
  margin: 0;
}

.urta-problem h2 {
  max-width: 880px;
  margin: 0;

  color: #101115;

  /* Smaller */
  font-size: clamp(2.3rem, 3.55vw, 4rem);
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.urta-problem__content > p {
  max-width: 780px;
  margin: clamp(18px, 2vw, 25px) 0 0;

  color: rgba(22, 27, 34, 0.67);
  font-size: clamp(0.98rem, 1.12vw, 1.12rem);
  line-height: 1.55;
}


.urta-problem::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;

  /*
    Several extremely fine scratch directions.
    The large spacing prevents them from looking
    like a regular striped pattern.
  */
  background:
    repeating-linear-gradient(
      98deg,
      transparent 0,
      transparent 17px,
      rgba(255, 255, 255, 0.13) 17.4px,
      transparent 18px,
      transparent 43px
    ),

    repeating-linear-gradient(
      86deg,
      transparent 0,
      transparent 31px,
      rgba(25, 31, 38, 0.11) 31.3px,
      transparent 31.8px,
      transparent 67px
    ),

    repeating-linear-gradient(
      104deg,
      transparent 0,
      transparent 53px,
      rgba(255, 255, 255, 0.09) 53.3px,
      transparent 53.7px,
      transparent 91px
    );

  /*
    Scratches are strongest around the center
    and fade out instead of covering the panel evenly.
  */
  -webkit-mask-image: radial-gradient(
    ellipse at var(--metal-light-x) var(--metal-light-y),
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.48) 28%,
    rgba(0, 0, 0, 0.12) 63%,
    transparent 88%
  );

  mask-image: radial-gradient(
    ellipse at var(--metal-light-x) var(--metal-light-y),
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.48) 28%,
    rgba(0, 0, 0, 0.12) 63%,
    transparent 88%
  );

  opacity: 0.34;
  mix-blend-mode: overlay;

  pointer-events: none;
}


@media (max-width: 760px) {
  .urta-problem {
    min-height: auto;
    margin-inline: 16px;
    padding: 34px 25px 38px;
    border-radius: 23px;
  }

  .urta-problem__content {
    width: 100%;
  }

  .urta-problem h2 {
    font-size: clamp(2.15rem, 10vw, 3.3rem);
  }
}

.urta-problem::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;

  /*
    Fine brushed-metal scratches.
    Multiple angles and spacing prevent a uniform pattern.
  */
  background-image:
    repeating-linear-gradient(
      94deg,
      transparent 0,
      transparent 22px,
      rgba(255, 255, 255, 0.20) 22px,
      rgba(255, 255, 255, 0.20) 22.6px,
      transparent 23px,
      transparent 61px
    ),

    repeating-linear-gradient(
      87deg,
      transparent 0,
      transparent 37px,
      rgba(30, 37, 45, 0.18) 37px,
      rgba(30, 37, 45, 0.18) 37.5px,
      transparent 38px,
      transparent 83px
    ),

    repeating-linear-gradient(
      102deg,
      transparent 0,
      transparent 51px,
      rgba(255, 255, 255, 0.15) 51px,
      rgba(255, 255, 255, 0.15) 51.5px,
      transparent 52px,
      transparent 107px
    );

  /*
    Vary the layers so they do not line up
    into a regular fabric-like texture.
  */
  background-size:
    137px 100%,
    191px 100%,
    263px 100%;

  background-position:
    7px 0,
    43px 0,
    91px 0;

  opacity: 0.48;
  mix-blend-mode: soft-light;

  pointer-events: none;
}

.urta-problem__content {
  position: relative;
  z-index: 2;
}

.urta-problem::after {
  content: "";
  position: absolute;
  z-index: 1;

  top: -75%;
  left: var(--reflection-position);

  width: 84%;
  height: 250%;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(239, 243, 247, 0.02) 10%,
    rgba(245, 248, 251, 0.07) 25%,
    rgba(255, 255, 255, 0.17) 39%,
    rgba(255, 255, 255, 0.30) 50%,
    rgba(241, 246, 250, 0.14) 63%,
    rgba(212, 220, 228, 0.05) 79%,
    transparent 100%
  );

  filter: blur(36px);
  mix-blend-mode: screen;
  transform: rotate(13deg);

  will-change: left;
  pointer-events: none;
}

.urta-problem::before,
.urta-problem::after {
  display: none;
}

.urta-metal-scratches {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;

  /*
    Fine light and dark scratches.
    These are intentionally not perfectly parallel.
  */
  background:
    repeating-linear-gradient(
      93deg,
      transparent 0,
      transparent 8px,
      rgba(255, 255, 255, 0.30) 8px,
      rgba(255, 255, 255, 0.30) 8.7px,
      transparent 9px,
      transparent 25px
    ),

    repeating-linear-gradient(
      88deg,
      transparent 0,
      transparent 13px,
      rgba(26, 33, 41, 0.24) 13px,
      rgba(26, 33, 41, 0.24) 13.65px,
      transparent 14px,
      transparent 39px
    ),

    repeating-linear-gradient(
      97deg,
      transparent 0,
      transparent 21px,
      rgba(255, 255, 255, 0.24) 21px,
      rgba(255, 255, 255, 0.24) 21.55px,
      transparent 22px,
      transparent 57px
    );

  background-size:
    113px 100%,
    179px 100%,
    251px 100%;

  background-position:
    0 0,
    39px 0,
    87px 0;

  opacity: 0.50;
  mix-blend-mode: hard-light;

  pointer-events: none;
}




.urta-metal-reflection {
  position: absolute;
  z-index: 3;

  top: -75%;
  left: var(--reflection-position);

  width: 88%;
  height: 250%;

  background: linear-gradient(
    90deg,
    transparent 0%,

    /* Dark reflected edge */
    rgba(25, 31, 38, 0.03) 12%,
    rgba(25, 31, 38, 0.15) 24%,

    /* Bright reflected light */
    rgba(224, 231, 237, 0.10) 34%,
    rgba(255, 255, 255, 0.32) 46%,
    rgba(255, 255, 255, 0.48) 52%,
    rgba(233, 239, 244, 0.19) 63%,

    /* Darker opposite edge */
    rgba(40, 47, 56, 0.11) 76%,
    transparent 100%
  );

  filter: blur(30px);
  mix-blend-mode: overlay;
  transform: rotate(13deg);

  will-change: left;
  pointer-events: none;
}


.urta-metal-scratches {
  position: absolute;
  z-index: 2;
  inset: 0;

  /*
    Very fine, nearly horizontal brushed-metal marks.
    These should read as surface grain, not large scratches.
  */
  background:
    repeating-linear-gradient(
      1.5deg,
      transparent 0,
      transparent 5px,
      rgba(255, 255, 255, 0.10) 5.2px,
      transparent 5.6px,
      transparent 12px
    ),

    repeating-linear-gradient(
      -1deg,
      transparent 0,
      transparent 9px,
      rgba(32, 39, 47, 0.08) 9.2px,
      transparent 9.6px,
      transparent 19px
    ),

    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 17px,
      rgba(255, 255, 255, 0.08) 17.25px,
      transparent 17.6px,
      transparent 31px
    );

  /*
    Keep the texture extremely restrained.
  */
  opacity: 0.24;
  mix-blend-mode: overlay;

  pointer-events: none;
}

.urta-metal-reflection {
  position: absolute;
  z-index: 3;

  top: -75%;
  left: var(--reflection-position);

  width: 92%;
  height: 250%;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(33, 39, 47, 0.04) 15%,
    rgba(34, 40, 48, 0.10) 26%,
    rgba(232, 238, 243, 0.08) 36%,
    rgba(255, 255, 255, 0.28) 49%,
    rgba(255, 255, 255, 0.34) 53%,
    rgba(233, 239, 244, 0.13) 65%,
    rgba(42, 49, 58, 0.07) 79%,
    transparent 100%
  );

  filter: blur(40px);
  mix-blend-mode: soft-light;
  transform: rotate(13deg);

  will-change: left;
  pointer-events: none;
}


/* FINAL METAL SCRATCH OVERRIDE — KEEP AT END OF FILE */

.urta-metal-scratches {
  display: block !important;

  position: absolute;
  z-index: 2;
  inset: 0;

  background-image:
    /* Fine bright scratches */
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 3px,
      rgba(255, 255, 255, 0.26) 3.2px,
      transparent 3.65px,
      transparent 9px
    ),

    /* Fine dark scratches */
    repeating-linear-gradient(
      89.4deg,
      transparent 0,
      transparent 7px,
      rgba(38, 45, 53, 0.22) 7.25px,
      transparent 7.8px,
      transparent 17px
    ),

    /* Less frequent brighter scratches */
    repeating-linear-gradient(
      90.7deg,
      transparent 0,
      transparent 19px,
      rgba(255, 255, 255, 0.31) 19.2px,
      transparent 19.75px,
      transparent 41px
    ),

    /* Less frequent, slightly wider dark scratches */
    repeating-linear-gradient(
      89.8deg,
      transparent 0,
      transparent 31px,
      rgba(27, 34, 43, 0.17) 31.25px,
      rgba(27, 34, 43, 0.08) 31.9px,
      transparent 32.4px,
      transparent 67px
    );

  background-size:
    79px 100%,
    137px 100%,
    211px 100%,
    307px 100%;

  background-position:
    3px 0,
    29px 0,
    71px 0,
    113px 0;

  opacity: 0.42;
  mix-blend-mode: soft-light;

  pointer-events: none;
}

.urta-metal-scratches {
  position: absolute;
  z-index: 2;
  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0.38;
  mix-blend-mode: soft-light;

  pointer-events: none;
}

.urta-metal-scratches {
  opacity: 0.09;
  mix-blend-mode: overlay;
}

.urta-metal-reflection {
  position: absolute;
  z-index: 3;

  top: -80%;
  left: var(--reflection-position);

  width: 94%;
  height: 270%;

  background: linear-gradient(
    90deg,

    transparent 0%,

    /* Broad dark reflected environment */
    rgba(18, 24, 31, 0.02) 8%,
    rgba(25, 31, 39, 0.16) 22%,
    rgba(35, 42, 51, 0.25) 31%,

    /* Quick transition into reflected light */
    rgba(181, 192, 201, 0.14) 39%,
    rgba(242, 247, 250, 0.34) 45%,
    rgba(255, 255, 255, 0.58) 50%,
    rgba(247, 250, 252, 0.38) 55%,

    /* Softer opposite side */
    rgba(168, 180, 190, 0.13) 65%,
    rgba(35, 42, 51, 0.14) 78%,

    transparent 100%
  );

  filter:
  blur(26px)
  saturate(5)
  contrast(1.12);
  mix-blend-mode: overlay;
  transform: rotate(13deg);

  will-change: left;
  pointer-events: none;
}

/*
.urta-metal-reflection::after {
  content: "";
  position: absolute;

  // Keep the color confined near the main reflection /
  top: 12%;
  bottom: 12%;
  left: 35%;
  width: 30%;

  background: linear-gradient(
    90deg,
    transparent 0%,

    rgba(109, 145, 175, 0.00) 10%,
    rgba(109, 145, 175, 0.14) 25%,

    rgba(157, 138, 177, 0.13) 38%,

    // Preserve the silver center 
    rgba(255, 255, 255, 0.17) 50%,

    rgba(190, 157, 139, 0.12) 62%,
    rgba(151, 177, 168, 0.11) 75%,

    transparent 100%
  );

  filter:
    blur(24px)
    saturate(1.35);

  opacity: 0.92;
  mix-blend-mode: soft-light;

  pointer-events: none;
}
*/

/* =========================================
   URTA VALUE CARDS
   ========================================= */

   .urta-values.feature-grid {
    /*
      Reduce the distance from the metal section.
      Use a small negative margin if an older rule
      is creating excessive spacing.
    */
    margin-top: 18px;
  
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
  }
  
  /*
    Remove old Urta-specific card styling that may
    override the shared feature-card appearance.
  */
  .urta-value-card.feature-card.glass-panel {
    min-height: 250px;
    margin: 0;
    padding: clamp(28px, 3vw, 40px);
  
    border-radius: 28px;
  
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.66),
        rgba(255, 255, 255, 0.34)
      );
  
    border: 1px solid rgba(255, 255, 255, 0.74);
  
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      0 22px 55px rgba(54, 49, 70, 0.09);
  
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }
  
  .urta-value-card .urta-value-number {
    display: block;
  
    color: rgba(32, 32, 37, 0.48);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
  }
  
  .urta-value-card h2 {
    margin: 20px 0 0;
  
    color: #202025;
    font-size: clamp(1.55rem, 2vw, 2.05rem);
    font-weight: 560;
    line-height: 1.05;
    letter-spacing: -0.045em;
  }
  
  .urta-value-card p {
    max-width: 360px;
    margin: 17px 0 0;
  
    color: #686570;
    font-size: 1rem;
    line-height: 1.58;
  }
  
  @media (hover: hover) {
    .urta-value-card.feature-card.glass-panel {
      transition:
        transform 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
    }
  
    .urta-value-card.feature-card.glass-panel:hover {
      transform: translateY(-5px);
  
      background:
        linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.76),
          rgba(255, 255, 255, 0.43)
        );
  
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 28px 65px rgba(54, 49, 70, 0.13);
    }
  }
  
  @media (max-width: 860px) {
    .urta-values.feature-grid {
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 14px;
    }
  
    .urta-value-card.feature-card.glass-panel {
      min-height: auto;
    }
  }

  .urta-problem {
    margin-bottom: 20px;
  }

  /* Make the entire metal component slightly lighter */
.urta-problem {
  background-color: #b8c0c8;
}

.urta-problem::before {
  content: "";
  display: block;

  position: absolute;
  z-index: 1;
  inset: 0;

  background: rgba(255, 255, 255, 0.10);

  pointer-events: none;
}

.urta-metal-lightener {
  position: absolute;
  z-index: 1;
  inset: 0;

  background: rgba(255, 255, 255, 0.11);

  pointer-events: none;
}

.urta-metal-scratches {
  z-index: 2;
}

.urta-metal-reflection {
  z-index: 3;
}

.urta-problem__content {
  position: relative;
  z-index: 4;
}


/* Smaller titles on the image cubes */

.urta-feature-cube h3 {
  max-width: 85%;
  margin: 0;

  font-size: clamp(2.1rem, 3.7vw, 4.2rem);
  font-weight: 520;
  line-height: 0.94;
  letter-spacing: -0.06em;
}

/* Larger descriptive text beside the cubes */

.urta-feature-side-copy > p {
  max-width: 570px;

  color: #66636d;
  font-size: clamp(1.08rem, 1.35vw, 1.24rem);
  line-height: 1.68;
}

.urta-feature-side-copy > p + p {
  margin-top: 22px;
}

/* Slightly larger side labels */

.urta-feature-side-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.urta-features > .urta-section-heading h2,
#features-title {
  max-width: 940px;

  font-size: clamp(3rem, 5.4vw, 6rem);
  line-height: 0.93;
  letter-spacing: -0.065em;
}

.urta-abstraction-demo .urta-mode-copy h4 {
  display: inline-block;

  margin: 12px 0 0;

  font-size: clamp(1.85rem, 2.7vw, 2.8rem);
  font-weight: 580;
  line-height: 1;
  letter-spacing: -0.055em;

  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

/* Direct */

.urta-mode-copy-direct h4 {
  background-image: linear-gradient(
    100deg,
    #5c626d,
    #a66f72
  );
}

/* Balanced */

.urta-mode-copy-balanced h4 {
  background-image: linear-gradient(
    100deg,
    #7b698c,
    #687daf,
    #718e82
  );
}

/* Observer */

.urta-mode-copy-abstract h4 {
  background-image: linear-gradient(
    100deg,
    #696d78,
    #887897,
    #647e88
  );
}


.urta-step-boundaries .urta-abstraction-demo {
  min-height: 390px;
}

.urta-abstraction-label {
  color: rgba(42, 40, 47, 0.49);

  font-size: 0.69rem;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.urta-mode-copy > p {
  max-width: 430px;
  margin: 14px 0 0;

  color: rgba(42, 40, 47, 0.72);
  font-size: clamp(0.96rem, 1.1vw, 1.06rem);
  line-height: 1.48;
}

.urta-mode-example {
  max-width: 430px;
  margin-top: 17px;
  padding: 13px 15px 14px;

  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.54);

  background: rgba(255, 255, 255, 0.29);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.47);

  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}

.urta-mode-example > span {
  display: block;

  color: rgba(42, 40, 47, 0.43);
  font-size: 0.61rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.urta-mode-example > p {
  margin: 7px 0 0;

  color: rgba(38, 37, 43, 0.77);
  font-size: clamp(0.86rem, 0.95vw, 0.96rem);
  line-height: 1.42;
}


.urta-step > h3 {
  max-width: 390px;

  font-size: clamp(1.75rem, 2.25vw, 2.45rem);
  line-height: 1;
  letter-spacing: -0.052em;
}

.urta-step > p {
  max-width: 390px;
  margin-top: 18px;

  color: #696671;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.58;
}


.urta-how > .urta-section-heading h2,
#how-title {
  font-size: clamp(3rem, 5.2vw, 5.8rem);
  line-height: 0.93;
  letter-spacing: -0.065em;
}

/* Smaller titles inside the Features image cubes only */

.urta-features .urta-feature-cube h3 {
  max-width: 88%;
  margin: 0;

  font-size: clamp(1.80rem, 3.1vw, 3.40rem);
  font-weight: 520;
  line-height: 0.96;
  letter-spacing: -0.055em;
}

/* Force the Feature 03 title to use the smaller size */

.urta-features
.feature-row-03
.urta-feature-cube
.urta-feature-cube-content
h3 {
  font-size: clamp(1.80rem, 3.1vw, 3.40rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
}


/* =========================================
   SHORTER FINAL CTA
   ========================================= */

   .urta-final-cta {
    min-height: auto;
  
    padding:
      clamp(55px, 6vw, 85px)
      clamp(35px, 7vw, 100px);
  
    border-radius: 36px;
  }
  
  .urta-final-cta .urta-kicker {
    margin-bottom: 20px;
  }
  
  .urta-final-cta h2 {
    max-width: 950px;
    margin: 0;
  
    font-size: clamp(2.45rem, 5.35vw, 5.7rem);
    line-height: 0.92;
    letter-spacing: -0.067em;
  }
  
  .urta-final-cta > p:not(.urta-kicker) {
    max-width: 570px;
    margin: 27px 0 0;
  
    font-size: clamp(1rem, 1.25vw, 1.16rem);
    line-height: 1.58;
  }
  
  .urta-final-cta .urta-actions {
    margin-top: 29px;
  }
  /* Smaller final CTA title */

.urta-final-cta h2 {
  max-width: 850px;

  font-size: clamp(2.35rem, 4.4vw, 4.8rem) !important;
  line-height: 0.96;
  letter-spacing: -0.058em;
}

/* Exact Urta navbar appearance on every page */

.site-header {
  position: sticky;
  top: 14px;
  z-index: 1000;

  background:
    rgba(248, 248, 249, 0.72);

  border:
    1px solid
    rgba(255, 255, 255, 0.78);

  box-shadow:
    0 12px 36px
    rgba(50, 45, 65, 0.06);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(85%);

  backdrop-filter:
    blur(22px)
    saturate(85%);
}


@media (max-width: 720px) {
  .site-header {
    top: 8px;
  }

  .nav-links {
    background:
      rgba(250, 249, 248, 0.96);

    box-shadow:
      0 20px 45px
      rgba(51, 46, 62, 0.11);

    -webkit-backdrop-filter:
      blur(20px);

    backdrop-filter:
      blur(20px);
  }
}

.site-header {
  position: sticky;
  top: 14px;
  z-index: 1000;

  background:
    rgba(248, 248, 249, 0.72);

  border:
    1px solid
    rgba(255, 255, 255, 0.78);

  box-shadow:
    0 12px 36px
    rgba(50, 45, 65, 0.06);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(85%);

  backdrop-filter:
    blur(22px)
    saturate(85%);
}

/* =========================================================
   HOW IT WORKS — CLEAN REDESIGN
   ========================================================= */

   .urta-page .urta-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
  }
  
  
  /* ---------------------------------------------------------
     ALL THREE CARDS
     --------------------------------------------------------- */
  
  .urta-page .urta-step,
  .urta-page .urta-step-boundaries,
  .urta-page .urta-step-liquid {
    position: relative;
  
    display: flex;
    flex-direction: column;
  
    width: 100%;
    min-width: 0;
    min-height: 545px;
  
    padding: 18px;
  
    aspect-ratio: auto !important;
  
    overflow: hidden;
  
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 32px !important;
  
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.66),
        rgba(250,248,252,.47)
      );
  
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 22px 55px rgba(59,51,74,.055);
  
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
  
  
  /* ---------------------------------------------------------
     SMALL TOP LABEL
     --------------------------------------------------------- */
  
  .urta-page .urta-step-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    padding: 3px 6px 14px;
  
    color: rgba(71,68,78,.47);
  
    font-size: .61rem;
    font-weight: 650;
  
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  
  
  /* ---------------------------------------------------------
     SAME VISUAL SIZE IN ALL THREE CARDS
     --------------------------------------------------------- */
  
  .urta-page .urta-step .urta-step-visual,
  .urta-page .urta-step .urta-abstraction-demo {
    position: relative;
  
    flex: 0 0 300px;
  
    width: 100%;
    height: 300px !important;
    min-height: 0;
  
    margin: 0 0 25px;
  
    overflow: hidden;
  
    border-radius: 24px;
  }
  
  
  /* ---------------------------------------------------------
     LOWER COPY
     --------------------------------------------------------- */
  
  .urta-page .urta-step-copy {
    display: flex;
    flex-direction: column;
  
    flex: 1;
  
    padding: 0 7px 7px;
  }
  
  .urta-page .urta-step-copy h3 {
    max-width: 330px;
  
    margin: 0 0 11px;
  
    color: #232228;
  
    font-size: clamp(1.55rem, 2.1vw, 1.9rem);
    font-weight: 540;
  
    line-height: 1.02;
    letter-spacing: -.055em;
  }
  
  .urta-page .urta-step-copy p {
    max-width: 325px;
  
    margin: 0;
  
    color: #77737d;
  
    font-size: .91rem;
    line-height: 1.56;
  }
  
  
  /* =========================================================
     01 — INVITE / WATER
     ========================================================= */
  
  .urta-page .urta-invite-visual {
    isolation: isolate;
  
    background:
      radial-gradient(
        circle at 20% 18%,
        rgba(248,210,222,.50),
        transparent 38%
      ),
      radial-gradient(
        circle at 87% 25%,
        rgba(204,199,248,.43),
        transparent 42%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.62),
        rgba(247,244,250,.34)
      );
  
    border:
      1px solid
      rgba(255,255,255,.68);
  }
  
  .urta-page .urta-liquid-canvas {
    position: absolute;
  
    inset: 0;
  
    z-index: 1;
  
    width: 100%;
    height: 100%;
  
    pointer-events: none;
  }
  
  .urta-page .urta-invite-visual-label {
    position: absolute;
  
    z-index: 3;
  
    top: 24px;
    left: 25px;
  
    color: rgba(58,55,65,.45);
  
    font-size: .58rem;
    font-weight: 650;
  
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  
  
  /* =========================================================
     02 — MESSAGE DISTANCE
     ========================================================= */
  
  .urta-page .urta-abstraction-demo {
    border:
      1px solid
      rgba(255,255,255,.7);
  
    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.65);
  }
  
  
  /* background less aggressively saturated */
  
  #urta-mode-direct:checked
  ~ .urta-abstraction-background {
    background:
      radial-gradient(
        circle at 18% 15%,
        rgba(255,210,194,.94),
        transparent 42%
      ),
      linear-gradient(
        135deg,
        #f7d4cb,
        #ead3df 52%,
        #d8d4ed
      );
  }
  
  #urta-mode-balanced:checked
  ~ .urta-abstraction-background {
    background:
      radial-gradient(
        circle at 15% 18%,
        rgba(246,194,213,.88),
        transparent 43%
      ),
      radial-gradient(
        circle at 84% 20%,
        rgba(180,174,246,.78),
        transparent 46%
      ),
      linear-gradient(
        135deg,
        #efc6d5,
        #d9cae7 52%,
        #bcb8ef
      );
  }
  
  #urta-mode-abstract:checked
  ~ .urta-abstraction-background {
    background:
      radial-gradient(
        circle at 20% 18%,
        rgba(205,222,246,.9),
        transparent 44%
      ),
      linear-gradient(
        135deg,
        #dbe6f2,
        #d4d8ef 52%,
        #bbb8e7
      );
  }
  
  
  /* copy */
  
  .urta-page .urta-mode-copy {
    position: absolute;
  
    z-index: 3;
  
    inset: 0;
  
    width: 100%;
    max-width: none;
  
    padding: 26px 27px 60px;
  
    opacity: 0;
  
    transform: translateY(6px);
  
    transition:
      opacity 240ms ease,
      transform 240ms ease;
  
    pointer-events: none;
  }
  
  
  /* labels */
  
  .urta-page .urta-abstraction-label {
    display: block;
  
    margin: 0 0 7px;
  
    color: rgba(41,39,46,.47);
  
    font-size: .58rem;
    font-weight: 700;
  
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  
  
  /* IMPORTANT: no script font */
  
  .urta-page .urta-mode-copy h4 {
    margin: 0 0 10px;
  
    color: #232228 !important;
  
    background: none !important;
  
    -webkit-text-fill-color: currentColor !important;
  
    font-family: inherit !important;
  
    font-size: clamp(2rem, 2.9vw, 2.65rem) !important;
    font-style: normal !important;
    font-weight: 560 !important;
  
    line-height: .98;
    letter-spacing: -.06em;
  }
  
  .urta-page .urta-mode-copy > p {
    max-width: 310px;
  
    margin: 0;
  
    color: rgba(43,40,49,.66);
  
    font-size: .76rem;
    line-height: 1.46;
  }
  
  
  /* example message */
  
  .urta-page .urta-mode-example {
    max-width: 290px;
  
    margin-top: 14px;
    padding: 10px 12px;
  
    border:
      1px solid
      rgba(255,255,255,.28) !important;
  
    border-radius: 14px;
  
    background:
      rgba(255,255,255,.18) !important;
  
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22) !important;
  
    color: rgba(46,42,52,.64);
  
    font-size: .7rem;
    line-height: 1.4;
  
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
  }
  
  .urta-page .urta-mode-example::before {
    display: none !important;
  }
  
  
  /* dots */
  
  .urta-page .urta-abstraction-switches {
    left: 50%;
    bottom: 19px;
  
    transform: translateX(-50%);
  
    gap: 8px;
  }
  
  .urta-page .urta-abstraction-switch {
    width: 8px;
    height: 8px;
  
    border:
      1px solid
      rgba(37,35,42,.20);
  
    background:
      rgba(255,255,255,.52);
  }
  
  #urta-mode-direct:checked
  ~ .urta-abstraction-switches
  label[for="urta-mode-direct"],
  
  #urta-mode-balanced:checked
  ~ .urta-abstraction-switches
  label[for="urta-mode-balanced"],
  
  #urta-mode-abstract:checked
  ~ .urta-abstraction-switches
  label[for="urta-mode-abstract"] {
  
    width: 25px;
  
    border-radius: 999px;
  
    background:
      rgba(42,40,47,.84);
  }
  
  
  /* =========================================================
     03 — MESSAGE REFINEMENT
     ========================================================= */
  
  .urta-page .urta-text-transform {
    display: grid;
  
    place-items: center;
  
    padding: 30px;
  
    background:
      radial-gradient(
        circle at 25% 30%,
        rgba(249,207,221,.34),
        transparent 38%
      ),
      radial-gradient(
        circle at 78% 55%,
        rgba(190,183,244,.32),
        transparent 42%
      ),
      rgba(255,255,255,.32);
  
    border:
      1px solid
      rgba(255,255,255,.65);
  }
  
  .urta-page .urta-text-transform::before {
    width: 190px;
    height: 190px;
  
    left: 32%;
    top: 20%;
  
    opacity: .75;
  }
  
  .urta-page .urta-transform-stage {
    display: flex;
  
    align-items: center;
    justify-content: center;
  
    width: 100%;
    height: 100%;
  
    min-height: 0;
  }
  
  .urta-page .urta-transform-text {
    width: min(100%, 290px);
  
    margin: auto;
  
    color: #29272e;
  
    text-align: center;
  
    font-size: clamp(.95rem, 1.25vw, 1.08rem);
    font-weight: 520;
  
    line-height: 1.5;
    letter-spacing: -.025em;
  
    word-break: normal;
    overflow-wrap: normal;
  }
  
  
  /*
    This is the important part:
    every WORD is one wrapping unit.
    The browser cannot break "space" into "sp" + "ace".
  */
  
  .urta-page .urta-transform-word {
    display: inline-block;
  
    white-space: nowrap;
  
    margin-right: .28em;
  
    transition:
      opacity 500ms ease,
      filter 650ms ease,
      transform 800ms cubic-bezier(.18,.82,.22,1);
  }
  
  .urta-page .urta-transform-word:last-child {
    margin-right: 0;
  }
  
  .urta-page .urta-transform-text.is-changing
  .urta-transform-word {
    opacity: 0;
  
    filter: blur(5px);
  
    transform:
      translate(
        var(--float-x),
        var(--float-y)
      )
      rotate(var(--float-r))
      scale(.93);
  }
  
  
  /* =========================================================
     RESPONSIVE
     ========================================================= */
  
  @media (max-width: 980px) {
  
    .urta-page .urta-steps {
      grid-template-columns: 1fr;
    }
  
    .urta-page .urta-step,
    .urta-page .urta-step-boundaries,
    .urta-page .urta-step-liquid {
      min-height: auto;
    }
  
    .urta-page .urta-step .urta-step-visual,
    .urta-page .urta-step .urta-abstraction-demo {
      flex-basis: 330px;
      height: 330px !important;
    }
  
  }
  
  
  @media (max-width: 560px) {
  
    .urta-page .urta-step {
      padding: 14px;
  
      border-radius: 26px !important;
    }
  
    .urta-page .urta-step .urta-step-visual,
    .urta-page .urta-step .urta-abstraction-demo {
      flex-basis: 295px;
      height: 295px !important;
    }
  
    .urta-page .urta-mode-copy {
      padding:
        24px 23px 58px;
    }
  
  }


/* =========================================================
   HOW IT WORKS — repaired cards + responsive page overrides
   ========================================================= */

   .urta-steps > .urta-step {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 16px;
  }
  
  .urta-step-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    color: rgba(32, 32, 37, .46);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  
  .urta-step-meta span:last-child {
    min-width: 0;
    text-align: right;
  }
  
  .urta-step-copy {
    min-width: 0;
  }
  
  .urta-step-copy h3 {
    margin: 0 0 10px;
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    line-height: 1.05;
    letter-spacing: -.045em;
  }
  
  .urta-step-copy p {
    margin: 0;
  }
  
  /* ---- 02 / Direct + Relay -------------------------------- */
  
  .urta-step-boundaries .urta-abstraction-demo {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 285px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 28px;
    background: rgba(255,255,255,.30);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      0 18px 40px rgba(52,47,69,.06);
  }
  
  .urta-mode-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  
  .urta-abstraction-background,
  .urta-abstraction-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  
  .urta-abstraction-background {
    z-index: 0;
    background:
      radial-gradient(circle at 18% 12%, rgba(255,225,211,.90), transparent 42%),
      radial-gradient(circle at 84% 85%, rgba(211,200,255,.86), transparent 48%),
      linear-gradient(145deg, rgba(255,246,242,.94), rgba(233,228,249,.96));
    transition: background 320ms ease, filter 320ms ease;
  }
  
  #urta-mode-relay:checked ~ .urta-abstraction-background {
    background:
      radial-gradient(circle at 82% 14%, rgba(213,226,255,.94), transparent 42%),
      radial-gradient(circle at 16% 88%, rgba(221,203,255,.90), transparent 48%),
      linear-gradient(145deg, rgba(244,246,255,.98), rgba(226,218,250,.97));
  }
  
  .urta-abstraction-glow {
    z-index: 1;
    inset: auto -12% -28% auto;
    width: 72%;
    height: 72%;
    border-radius: 50%;
    background: rgba(255,255,255,.28);
    filter: blur(22px);
    transition: transform 380ms ease;
  }
  
  #urta-mode-relay:checked ~ .urta-abstraction-glow {
    transform: translate(-34%, -18%) scale(1.08);
  }
  
  .urta-mode-copy {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 28px 28px 76px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
  }
  
  #urta-mode-direct:checked ~ .urta-mode-copy-direct,
  #urta-mode-relay:checked ~ .urta-mode-copy-relay {
    opacity: 1;
    transform: translateY(0);
  }
  
  .urta-mode-copy .urta-abstraction-label {
    display: block;
    margin: 0 0 5px;
    color: rgba(31,31,37,.48);
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  
  .urta-mode-copy h4 {
    margin: 0 0 11px;
    color: #111114 !important;
    -webkit-text-fill-color: #111114 !important;
    background: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: clamp(2.25rem, 3.4vw, 3.45rem);
    font-style: normal;
    font-weight: 650;
    line-height: .96;
    letter-spacing: -.055em;
  }
  
  .urta-mode-copy p {
    max-width: 310px;
    margin: 0;
    color: rgba(31,31,37,.68);
    font-size: .80rem;
    line-height: 1.48;
  }
  
  .urta-mode-example {
    position: relative;
    isolation: isolate;
    width: fit-content;
    max-width: 92%;
    margin-top: auto;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.62) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.42) !important;
    box-shadow: 0 10px 26px rgba(50,45,67,.055) !important;
    color: rgba(31,31,37,.76);
    font-size: .74rem;
    line-height: 1.45;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .urta-mode-example::before {
    display: none !important;
  }
  
  .urta-abstraction-switches {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: calc(100% - 28px);
    max-width: 250px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 999px;
    background: rgba(255,255,255,.38);
    transform: translateX(-50%);
    box-shadow: 0 8px 24px rgba(55,48,76,.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  
  .urta-abstraction-switch {
    display: grid;
    place-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    color: rgba(31,31,37,.57);
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition:
      background 180ms ease,
      color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }
  
  .urta-abstraction-switch:hover {
    color: rgba(31,31,37,.84);
  }
  
  #urta-mode-direct:checked
  ~ .urta-abstraction-switches
  label[for="urta-mode-direct"],
  #urta-mode-relay:checked
  ~ .urta-abstraction-switches
  label[for="urta-mode-relay"] {
    background: rgba(255,255,255,.92);
    color: #202024;
    box-shadow: 0 5px 14px rgba(44,40,57,.09);
  }
  
  /* ---- 03 / never split words in the middle ---------------- */
  
  .urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
  .urta-text-transform {
    min-height: 250px;
    margin: 0;
  }
  
  .urta-transform-stage {
    width: 100%;
    min-width: 0;
    padding: 0 clamp(18px, 3vw, 38px);
    overflow: visible;
  }
  
  .urta-transform-text {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: center;
    gap: .12em .28em;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-align: center;
    font-size: clamp(17px, 1.45vw, 23px);
    font-weight: 650;
    line-height: 1.36;
    letter-spacing: -.025em;
  }
  
  .urta-transform-word {
    display: inline-flex;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  
  .urta-transform-char {
    display: inline-block;
  }
  
  /* =========================================================
     TABLET / MOBILE — whole Urta page
     ========================================================= */
  
  @media (max-width: 900px) {
    .urta-steps {
      grid-template-columns: 1fr !important;
      gap: 16px;
    }
  
    .urta-steps > .urta-step {
      aspect-ratio: auto !important;
      min-height: 520px;
    }
  
    .urta-step-liquid .urta-step-visual,
    .urta-step-boundaries .urta-abstraction-demo,
    .urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
    .urta-text-transform {
      min-height: 330px;
      height: auto;
    }
  
    .urta-feature-row {
      grid-template-columns: 1fr !important;
    }
  }
  
  @media (max-width: 720px) {
    html,
    body {
      overflow-x: hidden;
    }
  
    .urta-page .site-header {
      width: calc(100% - 20px);
      margin-top: 10px;
      padding-inline: 16px;
    }
  
    .urta-page .site-header .logo img {
      max-width: min(150px, 42vw);
      height: auto;
    }
  
    .urta-page .nav-links {
      left: 0;
      right: 0;
      width: 100%;
    }
  
    .urta-shell {
      width: calc(100% - 24px) !important;
      max-width: none;
      padding-top: 30px !important;
    }
  
    .urta-hero {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 34px !important;
      min-height: 0 !important;
      padding: 8px 0 56px !important;
    }
  
    .urta-hero-copy {
      left: auto !important;
      width: 100%;
      max-width: 100% !important;
    }
  
    .urta-wordmark {
      width: min(210px, 62vw) !important;
      max-width: 100%;
      height: auto !important;
      margin-bottom: 18px !important;
    }
  
    .urta-hero h1 {
      max-width: 100%;
      font-size: clamp(2.9rem, 13vw, 4.45rem) !important;
      line-height: .94;
      letter-spacing: -.058em;
      overflow-wrap: normal;
      word-break: normal;
    }
  
    .urta-hero h1 br {
      display: none;
    }
  
    .urta-hero-description {
      max-width: 100%;
      margin-top: 22px;
      font-size: 1rem;
      line-height: 1.62;
    }
  
    .urta-actions {
      width: 100%;
      align-items: stretch !important;
      flex-direction: column !important;
    }
  
    .urta-button {
      width: 100% !important;
      min-height: 52px;
      justify-content: center;
    }
  
    .urta-preview-wrap {
      width: 100% !important;
      min-width: 0;
    }
  
    .urta-preview-label,
    .urta-preview-footer {
      gap: 10px;
      flex-wrap: wrap;
    }
  
    .urta-app-preview {
      grid-template-columns: minmax(0, 1fr) !important;
      width: 100%;
      height: 470px !important;
      min-width: 0;
      border-radius: 28px !important;
    }
  
    .urta-demo-sidebar {
      display: none !important;
    }
  
    .urta-demo-chat,
    .urta-demo-messages,
    .urta-message {
      min-width: 0;
      max-width: 100%;
    }
  
    .urta-demo-chat {
      padding: 0 14px 14px !important;
    }
  
    .urta-message p {
      overflow-wrap: break-word;
    }
  
    .urta-problem {
      grid-template-columns: minmax(0, 1fr) !important;
      margin-top: 52px !important;
      padding: 36px 22px !important;
      border-radius: 0 !important;
    }
  
    .urta-problem h2 {
      max-width: 100%;
      font-size: clamp(2.55rem, 11.5vw, 4rem) !important;
      overflow-wrap: normal;
      word-break: normal;
    }
  
    .urta-problem h2 br {
      display: none;
    }
  
    .urta-problem div > p {
      margin-top: 24px;
      font-size: 1rem;
    }
  
    .urta-values {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }
  
    .urta-value-card {
      min-height: 0 !important;
      padding: 24px !important;
    }
  
    .urta-value-card h2,
    .urta-value-card h3 {
      margin-top: 44px !important;
    }
  
    .urta-how,
    .urta-features {
      padding-top: 88px !important;
    }
  
    .urta-section-heading {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 18px !important;
      margin-bottom: 28px !important;
    }
  
    .urta-section-heading .urta-kicker {
      margin-bottom: 0 !important;
    }
  
    .urta-section-heading h2 {
      max-width: 100%;
      font-size: clamp(2.8rem, 13vw, 4.35rem) !important;
      line-height: .94;
      overflow-wrap: normal;
      word-break: normal;
    }
  
    .urta-section-heading > p:last-child {
      max-width: 100%;
      margin: 0;
    }
  
    .urta-steps > .urta-step {
      min-height: 0 !important;
      padding: 18px !important;
      border-radius: 28px !important;
    }
  
    .urta-step-meta {
      margin-bottom: 2px;
    }
  
    .urta-step-liquid .urta-step-visual,
    .urta-step-boundaries .urta-abstraction-demo,
    .urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
    .urta-text-transform {
      min-height: 300px !important;
    }
  
    .urta-step-copy h3 {
      font-size: 1.45rem;
    }
  
    .urta-mode-copy {
      padding: 24px 22px 74px;
    }
  
    .urta-mode-copy h4 {
      font-size: clamp(2.35rem, 12vw, 3.25rem);
    }
  
    .urta-mode-copy p {
      max-width: 92%;
      font-size: .82rem;
    }
  
    .urta-mode-example {
      max-width: 100%;
      font-size: .72rem;
    }
  
    .urta-abstraction-switches {
      width: calc(100% - 24px);
      bottom: 12px;
    }
  
    .urta-transform-stage {
      padding-inline: 14px;
    }
  
    .urta-transform-text {
      font-size: clamp(17px, 5vw, 21px);
      line-height: 1.38;
    }
  
    .urta-feature-sequence {
      width: 100%;
    }
  
    .urta-feature-row,
    .feature-row-01,
    .feature-row-02,
    .feature-row-03,
    .feature-row-04 {
      display: flex !important;
      flex-direction: column !important;
      width: 100%;
      min-height: 0 !important;
      gap: 24px !important;
      padding: 42px 0 !important;
    }
  
    .urta-feature-row .urta-feature-cube {
      order: 1;
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      max-width: 520px;
      min-width: 0;
      aspect-ratio: 1 / 1 !important;
      align-self: center;
      justify-self: auto !important;
    }
  
    .urta-feature-row .urta-feature-side-copy {
      order: 2;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0;
    }
  
    .urta-feature-cube-image {
      max-width: 100%;
      object-fit: cover;
    }
  
    .urta-feature-side-copy p {
      max-width: 100%;
    }
  
    .urta-access {
      padding: 88px 0 72px !important;
    }
  
    .urta-access-heading {
      margin-bottom: 30px !important;
    }
  
    .urta-access-heading h2,
    .urta-faq-heading h2 {
      font-size: clamp(2.9rem, 13vw, 4.5rem) !important;
    }
  
    .urta-access-heading h2 br {
      display: none;
    }
  
    .urta-access-heading > p:last-child {
      margin-top: 20px !important;
      font-size: 1rem !important;
    }
  
    .urta-access-card {
      padding: 26px 20px !important;
      border-radius: 30px !important;
    }
  
    .urta-access-card::before {
      width: 260px !important;
      height: 260px !important;
      right: -110px !important;
      top: -105px !important;
      opacity: .36 !important;
    }
  
    .urta-access-topline {
      align-items: flex-start !important;
      gap: 18px !important;
      margin-top: 20px !important;
    }
  
    .urta-access-price {
      font-size: clamp(4.9rem, 23vw, 7rem) !important;
    }
  
    .urta-access-copy {
      max-width: 100% !important;
      margin: 0 !important;
      font-size: 1rem !important;
    }
  
    .urta-access-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 22px 14px !important;
      margin: 34px 0 28px !important;
      padding-top: 0 !important;
    }
  
    .urta-access-stat b {
      font-size: 1.7rem !important;
    }
  
    .urta-access-features {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }
  
    .urta-faq {
      padding: 42px 0 88px !important;
    }
  
    .urta-faq-heading {
      margin-bottom: 28px !important;
    }
  
    .urta-faq-list summary {
      gap: 14px !important;
      font-size: 1rem !important;
    }
  
    .urta-final-cta {
      margin-top: 80px !important;
      padding: 40px 22px !important;
      border-radius: 30px !important;
    }
  
    .urta-final-cta h2 {
      max-width: 100%;
      font-size: clamp(2.9rem, 13vw, 4.4rem) !important;
      overflow-wrap: normal;
      word-break: normal;
    }
  
    .urta-final-cta h2 br {
      display: none;
    }
  
    .urta-page .urta-footer {
      width: calc(100% - 24px);
      align-items: flex-start !important;
      flex-direction: column !important;
      gap: 16px !important;
    }
  
    .urta-footer div {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 20px;
    }
  }
  
  @media (max-width: 430px) {
    .urta-shell {
      width: calc(100% - 18px) !important;
    }
  
    .urta-page .site-header {
      width: calc(100% - 14px);
      padding-inline: 13px;
    }
  
    .urta-hero h1 {
      font-size: clamp(2.65rem, 13.2vw, 3.75rem) !important;
    }
  
    .urta-app-preview {
      height: 440px !important;
    }
  
    .urta-steps > .urta-step {
      padding: 15px !important;
      border-radius: 24px !important;
    }
  
    .urta-step-liquid .urta-step-visual,
    .urta-step-boundaries .urta-abstraction-demo,
    .urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
    .urta-text-transform {
      min-height: 280px !important;
    }
  
    .urta-mode-copy {
      padding: 21px 18px 70px;
    }
  
    .urta-mode-copy p {
      max-width: 100%;
    }
  
    .urta-mode-example {
      padding: 10px 11px;
    }
  
    .urta-access-stats {
      grid-template-columns: 1fr 1fr !important;
    }
  
    .urta-access-card {
      padding: 23px 17px !important;
    }
  }
  /* =========================================================
   HOW IT WORKS — FINAL SIZE / ALIGNMENT REFINEMENT
   ========================================================= */


/* ---------------------------------------------------------
   Keep all 3 cards from becoming enormous.

   Change 440px here if you later want them slightly
   larger/smaller.
   --------------------------------------------------------- */

.urta-page .urta-steps {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  justify-items: center;
  align-items: start;

  gap: clamp(14px, 2vw, 24px);
}


.urta-page .urta-steps > .urta-step {
  width: min(100%, 440px);
  max-width: 440px;

  justify-self: center;
}



/* =========================================================
   THIRD CARD — KEEP TRANSFORM TEXT ACTUALLY CENTERED
   ========================================================= */

.urta-page
.urta-text-transform {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;
}


.urta-page
.urta-transform-stage {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100%;
  min-width: 0;

  padding:
    0
    clamp(
      18px,
      3vw,
      38px
    );

  box-sizing: border-box;
}


.urta-page
.urta-transform-text {
  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center;
  align-content: center;

  justify-content: center;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 auto;

  text-align: center;

  white-space: normal !important;

  word-break: normal !important;
  overflow-wrap: normal !important;

  font-size:
    clamp(
      17px,
      1.45vw,
      23px
    );

  line-height: 1.36;
}


.urta-page
.urta-transform-word {
  display: inline-flex;

  flex: 0 0 auto;

  white-space: nowrap;
}



/* =========================================================
   SECOND CARD — SIMPLE DOT CONTROLS
   ========================================================= */

.urta-page
.urta-abstraction-switches {
  position: absolute;

  z-index: 5;

  left: 50%;
  bottom: 18px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  width: auto;
  max-width: none;

  padding: 0;

  border: 0;

  border-radius: 0;

  background: transparent;

  box-shadow: none;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  transform:
    translateX(-50%);
}


.urta-page
.urta-abstraction-switch {
  display: block;

  width: 8px;
  height: 8px;

  min-width: 8px;
  min-height: 8px;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background:
    rgba(
      25,
      25,
      30,
      .22
    );

  color: transparent;

  font-size: 0;

  cursor: pointer;

  box-shadow: none;

  transform: none;

  transition:
    background 180ms ease,
    transform 180ms ease;
}


.urta-page
.urta-abstraction-switch:hover {
  background:
    rgba(
      25,
      25,
      30,
      .40
    );
}


.urta-page
#urta-mode-direct:checked
~ .urta-abstraction-switches
label[for="urta-mode-direct"],

.urta-page
#urta-mode-relay:checked
~ .urta-abstraction-switches
label[for="urta-mode-relay"] {

  background: #232327;

  transform:
    scale(1.22);

  box-shadow: none;
}



/* =========================================================
   MEDIUM SCREEN

   Stack them, but DO NOT let them become 700px wide.
   ========================================================= */

@media (max-width: 900px) {

  .urta-page .urta-steps {
    grid-template-columns:
      minmax(
        0,
        440px
      ) !important;

    justify-content: center;

    gap: 22px;
  }


  .urta-page
  .urta-steps
  > .urta-step {

    width: 100%;

    max-width: 440px;

    aspect-ratio:
      auto !important;
  }


  .urta-page
  .urta-step-liquid
  .urta-step-visual,

  .urta-page
  .urta-step-boundaries
  .urta-abstraction-demo,

  .urta-page
  .urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
  .urta-text-transform {

    min-height: 310px;

    height: auto;
  }


  .urta-page
  .urta-transform-stage {

    min-height: 310px;
  }

}



/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

  .urta-page .urta-steps {
    grid-template-columns: 1fr !important;
  }


  .urta-page
  .urta-steps
  > .urta-step {

    width: 100%;

    max-width: 100%;
  }


  .urta-page
  .urta-step-liquid
  .urta-step-visual,

  .urta-page
  .urta-step-boundaries
  .urta-abstraction-demo,

  .urta-page
  .urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
  .urta-text-transform {

    min-height: 270px;
  }


  .urta-page
  .urta-transform-stage {

    min-height: 270px;

    padding:
      0 20px;
  }


  .urta-page
  .urta-transform-text {

    font-size: 17px;
  }

}

/* =========================================================
   HOW IT WORKS — SMALL FINAL TWEAKS
   ========================================================= */


/* ---------------------------------------------------------
   03 — make animated text slightly smaller
   --------------------------------------------------------- */

   .urta-page .urta-transform-text {
    font-size: clamp(15.5px, 1.25vw, 20px) !important;
    line-height: 1.38;
  }
  
  
  /* keep it a little smaller on phones too */
  
  @media (max-width: 720px) {
    .urta-page .urta-transform-text {
      font-size: clamp(15px, 4.3vw, 18px) !important;
    }
  }
  
  
  
  /* ---------------------------------------------------------
     02 — larger inside text
     --------------------------------------------------------- */
  
  .urta-page .urta-mode-copy p {
    max-width: 330px;
    font-size: 0.9rem !important;
    line-height: 1.52;
  }
  
  
  .urta-page .urta-mode-example {
    font-size: 0.82rem !important;
    line-height: 1.48;
  }
  
  
  .urta-page .urta-mode-copy .urta-abstraction-label {
    font-size: 0.67rem !important;
  }
  
  
  
  /* ---------------------------------------------------------
     02 — FORCE BOTH CONTROLS TO BE SIMPLE ROUND DOTS
     --------------------------------------------------------- */
  
  .urta-page .urta-abstraction-switches {
    position: absolute;
  
    left: 50%;
    bottom: 16px;
  
    display: flex !important;
  
    align-items: center;
    justify-content: center;
  
    gap: 11px;
  
    width: auto !important;
    max-width: none !important;
  
    padding: 0 !important;
  
    border: 0 !important;
    border-radius: 0 !important;
  
    background: transparent !important;
  
    box-shadow: none !important;
  
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  
    transform: translateX(-50%);
  }
  
  
  .urta-page .urta-abstraction-switch {
    display: block !important;
  
    flex: 0 0 8px !important;
  
    width: 8px !important;
    height: 8px !important;
  
    min-width: 8px !important;
    min-height: 8px !important;
  
    max-width: 8px !important;
    max-height: 8px !important;
  
    aspect-ratio: 1 / 1 !important;
  
    padding: 0 !important;
    margin: 0 !important;
  
    border: 0 !important;
    border-radius: 50% !important;
  
    background: rgba(24, 24, 29, 0.22) !important;
  
    color: transparent !important;
  
    font-size: 0 !important;
    line-height: 0 !important;
  
    box-shadow: none !important;
  
    cursor: pointer;
  
    transform: none !important;
  
    transition:
      background 180ms ease,
      opacity 180ms ease !important;
  }
  
  
  .urta-page .urta-abstraction-switch:hover {
    background: rgba(24, 24, 29, 0.42) !important;
  }
  
  
  /* selected Direct dot */
  
  .urta-page
  #urta-mode-direct:checked
  ~ .urta-abstraction-switches
  label[for="urta-mode-direct"] {
    width: 8px !important;
    height: 8px !important;
  
    min-width: 8px !important;
    min-height: 8px !important;
  
    background: #202024 !important;
  
    border-radius: 50% !important;
  
    transform: none !important;
  
    box-shadow: none !important;
  }
  
  
  /* selected Relay dot */
  
  .urta-page
  #urta-mode-relay:checked
  ~ .urta-abstraction-switches
  label[for="urta-mode-relay"] {
    width: 8px !important;
    height: 8px !important;
  
    min-width: 8px !important;
    min-height: 8px !important;
  
    background: #202024 !important;
  
    border-radius: 50% !important;
  
    transform: none !important;
  
    box-shadow: none !important;
  }


  

/* 02 / Pull the oversized typography back into the layout */
.urta-page .urta-hero h1 {
  font-size: clamp(2.85rem, 4.35vw, 4.75rem) !important;
  line-height: .96 !important;
}

.urta-page .urta-problem h2 {
  font-size: clamp(2.35rem, 4vw, 4.25rem) !important;
  line-height: .97 !important;
}

.urta-page .urta-section-heading h2,
.urta-page #how-title,
.urta-page #features-title {
  font-size: clamp(2.5rem, 4.15vw, 4.55rem) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
}

.urta-page .urta-access-heading h2,
.urta-page .urta-faq-heading h2,
.urta-page .urta-final-cta h2 {
  font-size: clamp(2.35rem, 3.9vw, 4.2rem) !important;
  line-height: .97 !important;
  letter-spacing: -.055em !important;
}


/* 03 / More organic section rhythm */
.urta-page .urta-how,
.urta-page .urta-features {
  padding-top: clamp(96px, 10vw, 128px) !important;
}

.urta-page .urta-features {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.urta-page .urta-section-heading {
  margin-bottom: clamp(34px, 4vw, 54px) !important;
}


/* 04 / Early-access plan: centered instead of full-width */
.urta-page .urta-access {
  width: min(1040px, calc(100% - 40px));
  margin-inline: auto;
  padding: clamp(88px, 9vw, 118px) 0 clamp(76px, 8vw, 102px) !important;
}

.urta-page .urta-access-heading {
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 38px !important;
}

.urta-page .urta-access-card {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(32px, 4.5vw, 54px) !important;
}


/* 05 / FAQ: narrower, centered, comfortable side space */
.urta-page .urta-faq {
  width: min(900px, calc(100% - 64px));
  margin-inline: auto;
  padding: clamp(72px, 7vw, 96px) 0 clamp(88px, 8vw, 116px) !important;
}

.urta-page .urta-faq-heading,
.urta-page .urta-faq-list {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.urta-page .urta-faq-heading {
  margin-bottom: 30px !important;
}

.urta-page .urta-faq-list details {
  padding: 22px 4px !important;
}


/* 06 / Final CTA: centered, shorter, not edge-to-edge */
.urta-page .urta-final-cta {
  width: min(980px, calc(100% - 48px));
  margin: clamp(78px, 8vw, 110px) auto 0 !important;
  padding:
    clamp(44px, 5vw, 66px)
    clamp(30px, 5.5vw, 66px) !important;
  border-radius: 34px !important;
}

.urta-page .urta-final-cta h2 {
  max-width: 760px !important;
}

.urta-page .urta-final-cta > p:not(.urta-kicker) {
  max-width: 560px !important;
}


/* =========================================================
   FEATURES — FIX NARROW / TABLET OVERFLOW
   Old desktop rules translate cubes ±55px and copy ±105px.
   Reset those transforms before the layout gets narrow.
   ========================================================= */

@media (max-width: 980px) {

  .urta-page .urta-features {
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .urta-page .urta-feature-sequence {
    width: 100% !important;
    max-width: 100% !important;
  }

  .urta-page .urta-feature-row,
  .urta-page .feature-row-01,
  .urta-page .feature-row-02,
  .urta-page .feature-row-03,
  .urta-page .feature-row-04 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    gap: 24px !important;

    padding:
      clamp(34px, 6vw, 54px)
      0 !important;

    margin: 0 !important;
  }

  .urta-page .feature-row-03,
  .urta-page .feature-row-04 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .urta-page .urta-feature-row .urta-feature-cube,
  .urta-page .feature-row-01 .urta-feature-cube,
  .urta-page .feature-row-02 .urta-feature-cube,
  .urta-page .feature-row-03 .urta-feature-cube,
  .urta-page .feature-row-04 .urta-feature-cube {
    order: 1;

    width: min(100%, 470px) !important;
    max-width: 100% !important;
    min-width: 0 !important;

    aspect-ratio: 1 / 1 !important;

    margin-inline: auto !important;

    transform: none !important;
    translate: none !important;

    align-self: center !important;
    justify-self: center !important;
  }

  .urta-page .urta-feature-row .urta-feature-side-copy,
  .urta-page .feature-row-01 .urta-feature-side-copy,
  .urta-page .feature-row-02 .urta-feature-side-copy,
  .urta-page .feature-row-03 .urta-feature-side-copy,
  .urta-page .feature-row-04 .urta-feature-side-copy {
    order: 2;

    width: min(100%, 470px) !important;
    max-width: 470px !important;
    min-width: 0 !important;

    margin-inline: auto !important;
    padding: 0 4px !important;

    transform: none !important;
    translate: none !important;

    align-self: center !important;
    justify-self: center !important;
  }

  .urta-page .urta-feature-cube-content {
    padding: clamp(24px, 5vw, 38px) !important;
  }

  .urta-page .urta-feature-cube-image {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
  }
}


/* =========================================================
   MOBILE TYPE + WIDTH
   ========================================================= */

@media (max-width: 720px) {

  .urta-page .urta-hero h1 {
    font-size: clamp(2.45rem, 10.5vw, 3.45rem) !important;
  }

  .urta-page .urta-problem h2,
  .urta-page .urta-section-heading h2,
  .urta-page #how-title,
  .urta-page #features-title,
  .urta-page .urta-access-heading h2,
  .urta-page .urta-faq-heading h2,
  .urta-page .urta-final-cta h2 {
    font-size: clamp(2.15rem, 9vw, 3.05rem) !important;
    line-height: .98 !important;
    letter-spacing: -.05em !important;
  }

  .urta-page .urta-access {
    width: calc(100% - 12px);
    padding: 76px 0 64px !important;
  }

  .urta-page .urta-access-heading {
    width: calc(100% - 20px);
  }

  .urta-page .urta-access-card {
    width: 100%;
    max-width: 100%;
    padding: 26px 20px !important;
  }

  .urta-page .urta-faq {
    width: calc(100% - 20px);
    padding: 64px 0 78px !important;
  }

  .urta-page .urta-final-cta {
    width: calc(100% - 16px);
    margin-top: 68px !important;
    padding: 36px 22px !important;
    border-radius: 28px !important;
  }

  .urta-page .urta-feature-row,
  .urta-page .feature-row-01,
  .urta-page .feature-row-02,
  .urta-page .feature-row-03,
  .urta-page .feature-row-04 {
    padding: 32px 0 !important;
  }

  .urta-page .urta-feature-row .urta-feature-cube,
  .urta-page .urta-feature-row .urta-feature-side-copy {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .urta-page .urta-feature-cube {
    border-radius: 26px !important;
  }

  .urta-page .urta-feature-cube-content {
    padding: 24px !important;
  }

  .urta-page .urta-feature-cube h3,
  .urta-page .feature-row-03 .urta-feature-cube h3 {
    max-width: 90% !important;
    font-size: clamp(1.8rem, 9vw, 2.8rem) !important;
    line-height: .96 !important;
  }

  .urta-page .urta-feature-side-copy {
    padding-inline: 4px !important;
  }
}


@media (max-width: 430px) {

  .urta-page .urta-access,
  .urta-page .urta-faq,
  .urta-page .urta-final-cta {
    width: 100%;
  }

  .urta-page .urta-feature-cube-content {
    padding: 20px !important;
  }

  .urta-page .urta-feature-cube h3,
  .urta-page .feature-row-03 .urta-feature-cube h3 {
    font-size: clamp(1.7rem, 9.5vw, 2.45rem) !important;
  }
}

/* FIRST HOW-IT-WORKS CARD
   Background belongs ONLY inside the visual window */

   .urta-page
   .urta-step-liquid
   .urta-step-visual {
     position: relative;
   
     overflow: hidden;
   
     min-height: 310px;
   
     border-radius: 28px;
   
     background:
       radial-gradient(
         circle at 20% 15%,
         rgba(255, 222, 206, 0.78),
         transparent 40%
       ),
       radial-gradient(
         circle at 82% 76%,
         rgba(210, 213, 255, 0.72),
         transparent 46%
       ),
       linear-gradient(
         145deg,
         rgba(255, 246, 242, 0.96),
         rgba(235, 234, 248, 0.94)
       );
   
     box-shadow:
       inset 0 1px 0 rgba(255, 255, 255, 0.76),
       0 16px 34px rgba(54, 48, 70, 0.055);
   }
   
   
   /* the surrounding card stays glass / neutral */
   
   .urta-page
   .urta-step-liquid {
     background:
       rgba(255, 255, 255, 0.46) !important;
   }

   /* =========================================================
   HOW IT WORKS 01
   color ONLY inside the visual / water window
   ========================================================= */

.urta-page .urta-step-liquid {
  /* keep outer card consistent with the other two */
  background: var(--urta-glass) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 18px 52px rgba(60,53,76,.065) !important;
}


.urta-page
.urta-step-liquid
.urta-step-visual {
  position: relative;

  overflow: hidden;

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 18% 13%,
      rgba(255, 218, 198, .88),
      transparent 39%
    ),

    radial-gradient(
      circle at 83% 78%,
      rgba(196, 210, 255, .80),
      transparent 47%
    ),

    radial-gradient(
      circle at 66% 20%,
      rgba(255,255,255,.72),
      transparent 32%
    ),

    linear-gradient(
      150deg,
      #fff4ed 0%,
      #f3ecf8 48%,
      #e7edf7 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 14px 34px rgba(50,45,67,.055);
}


/* canvas stays on top of that background */

.urta-page
.urta-step-liquid
.urta-liquid-canvas {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 1;
}
/* =========================================================
   MOBILE — MORE OUTER SPACE
   ========================================================= */

   @media (max-width: 720px) {

    /*
     * Bottom sections:
     * Early Access / FAQ / final CTA
     */
  
    .urta-page .urta-access {
      width: calc(100% - 32px) !important;
      margin-inline: auto !important;
    }
  
  
    .urta-page .urta-access-heading {
      width: 100% !important;
    }
  
  
    .urta-page .urta-access-card {
      width: 100% !important;
  
      padding:
        30px
        24px !important;
    }
  
  
    .urta-page .urta-faq {
      width: calc(100% - 40px) !important;
  
      margin-inline: auto !important;
    }
  
  
    .urta-page .urta-final-cta {
      width: calc(100% - 32px) !important;
  
      margin-left: auto !important;
      margin-right: auto !important;
  
      padding:
        42px
        26px !important;
    }
  
  
  
    /*
     * DESIGNED AROUND DIFFICULT COMMUNICATION
     *
     * Give this section substantially more
     * side room than the rest of the page.
     */
  
    .urta-page .urta-features {
      width: calc(100% - 48px) !important;
  
      max-width: none !important;
  
      margin-left: auto !important;
      margin-right: auto !important;
    }
  
  
    .urta-page .urta-feature-sequence {
      width: 100% !important;
    }
  
  
    .urta-page .urta-feature-row,
    .urta-page .feature-row-01,
    .urta-page .feature-row-02,
    .urta-page .feature-row-03,
    .urta-page .feature-row-04 {
  
      width: 100% !important;
  
      padding:
        42px
        0 !important;
    }
  
  
    .urta-page
    .urta-feature-row
    .urta-feature-cube {
  
      width: 100% !important;
      max-width: 430px !important;
  
      margin-inline: auto !important;
  
      transform: none !important;
      translate: none !important;
    }
  
  
    .urta-page
    .urta-feature-side-copy {
  
      width: 100% !important;
      max-width: 430px !important;
  
      padding:
        0
        6px !important;
  
      margin-inline: auto !important;
    }
  
  }
  
  
  @media (max-width: 430px) {
  
    /*
     * Keep meaningful margins even on
     * very narrow phones.
     */
  
    .urta-page .urta-access {
      width: calc(100% - 26px) !important;
    }
  
  
    .urta-page .urta-faq {
      width: calc(100% - 30px) !important;
    }
  
  
    .urta-page .urta-final-cta {
      width: calc(100% - 26px) !important;
    }
  
  
    /*
     * 4 image boxes get especially generous
     * spacing from viewport edges.
     */
  
    .urta-page .urta-features {
      width: calc(100% - 38px) !important;
    }
  
  
    .urta-page
    .urta-feature-row
    .urta-feature-cube {
  
      width: 100% !important;
    }
  
  
    .urta-page
    .urta-feature-cube-content {
  
      padding: 24px !important;
    }
  
  }

  /* =========================================================
   HOW IT WORKS — FIRST CARD

   Outer card = normal glass card.
   Color exists ONLY inside the inner visual window.
   ========================================================= */


/* OUTER CARD — NO COLORED GRADIENT */

.urta-page .urta-step-liquid {
  background-image: none !important;

  background-color:
    var(--urta-glass) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 18px 52px rgba(60,53,76,.065)
    !important;
}


/* INNER VISUAL WINDOW ONLY */

.urta-page
.urta-step-liquid
.urta-invite-visual {

  position: relative;

  isolation: isolate;

  overflow: hidden;

  border-radius: 28px;

  border:
    1px solid
    rgba(255,255,255,.74);

  background-image:
    radial-gradient(
      circle at 17% 14%,
      rgba(255, 211, 190, .90),
      transparent 39%
    ),

    radial-gradient(
      circle at 84% 78%,
      rgba(195, 209, 255, .86),
      transparent 47%
    ),

    radial-gradient(
      circle at 66% 22%,
      rgba(255,255,255,.68),
      transparent 31%
    ),

    linear-gradient(
      145deg,
      #fff2eb 0%,
      #f1e9f5 48%,
      #e3ebf5 100%
    ) !important;

  background-color:
    transparent !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.82),

    0 15px 34px
      rgba(50,45,67,.055);
}


/* Water canvas belongs to this little window */

.urta-page
.urta-step-liquid
.urta-invite-visual
.urta-liquid-canvas {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 1;

  pointer-events: none;
}

/* =========================================================
   DIRECT / RELAY — SMOOTH AUTOMATIC TRANSITION
   ========================================================= */


/* ---------------------------------------------------------
   BACKGROUND

   Instead of replacing one gradient with another,
   keep both rendered and fade between them.
   --------------------------------------------------------- */

.urta-page
.urta-abstraction-background {

  overflow: hidden;

  background:
    transparent !important;
}


.urta-page
.urta-abstraction-background::before,

.urta-page
.urta-abstraction-background::after {

  content: "";

  position: absolute;

  inset: -4%;

  pointer-events: none;

  transition:
    opacity
      900ms
      cubic-bezier(.22, 1, .36, 1),

    transform
      1200ms
      cubic-bezier(.22, 1, .36, 1);
}


/* DIRECT background */

.urta-page
.urta-abstraction-background::before {

  opacity: 1;

  transform:
    scale(1.01);

  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255,225,211,.92),
      transparent 42%
    ),

    radial-gradient(
      circle at 84% 85%,
      rgba(211,200,255,.86),
      transparent 48%
    ),

    linear-gradient(
      145deg,
      rgba(255,246,242,.98),
      rgba(233,228,249,.97)
    );
}


/* RELAY background */

.urta-page
.urta-abstraction-background::after {

  opacity: 0;

  transform:
    scale(1.055);

  background:
    radial-gradient(
      circle at 82% 14%,
      rgba(213,226,255,.95),
      transparent 42%
    ),

    radial-gradient(
      circle at 16% 88%,
      rgba(221,203,255,.92),
      transparent 48%
    ),

    linear-gradient(
      145deg,
      rgba(244,246,255,.99),
      rgba(226,218,250,.98)
    );
}



/* ---------------------------------------------------------
   RELAY ACTIVE
   --------------------------------------------------------- */

.urta-page
#urta-mode-relay:checked
~ .urta-abstraction-background::before {

  opacity: 0;

  transform:
    scale(1.055);
}


.urta-page
#urta-mode-relay:checked
~ .urta-abstraction-background::after {

  opacity: 1;

  transform:
    scale(1.01);
}



/* ---------------------------------------------------------
   DIRECT ACTIVE
   --------------------------------------------------------- */

.urta-page
#urta-mode-direct:checked
~ .urta-abstraction-background::before {

  opacity: 1;

  transform:
    scale(1.01);
}


.urta-page
#urta-mode-direct:checked
~ .urta-abstraction-background::after {

  opacity: 0;

  transform:
    scale(1.055);
}



/* =========================================================
   COPY CROSSFADE
   ========================================================= */

.urta-page
.urta-mode-copy {

  opacity: 0;

  transform:
    translate3d(
      0,
      10px,
      0
    )
    scale(.992);

  filter:
    blur(2.5px);

  transition:
    opacity
      650ms
      cubic-bezier(.22, 1, .36, 1),

    transform
      760ms
      cubic-bezier(.22, 1, .36, 1),

    filter
      520ms
      ease;

  will-change:
    opacity,
    transform,
    filter;
}


.urta-page
#urta-mode-direct:checked
~ .urta-mode-copy-direct,

.urta-page
#urta-mode-relay:checked
~ .urta-mode-copy-relay {

  opacity: 1;

  transform:
    translate3d(
      0,
      0,
      0
    )
    scale(1);

  filter:
    blur(0);
}



/* =========================================================
   MOVING GLOW
   ========================================================= */

.urta-page
.urta-abstraction-glow {

  transition:
    transform
      1100ms
      cubic-bezier(.22, 1, .36, 1),

    opacity
      800ms
      ease !important;
}


.urta-page
#urta-mode-direct:checked
~ .urta-abstraction-glow {

  transform:
    translate(
      0,
      0
    )
    scale(1);

  opacity: .78;
}


.urta-page
#urta-mode-relay:checked
~ .urta-abstraction-glow {

  transform:
    translate(
      -34%,
      -18%
    )
    scale(1.09);

  opacity: 1;
}



/* =========================================================
   DOTS — subtle smooth state
   ========================================================= */

.urta-page
.urta-abstraction-switch {

  transition:
    background-color 450ms ease,
    opacity 450ms ease
    !important;
}

/* outer first card stays neutral */
.urta-page .urta-step-liquid {
  background-image: none !important;
  background-color: var(--urta-glass) !important;
}


/* inner first-card window gets EXACTLY the same background as box 3 */
.urta-page
.urta-step-liquid
.urta-invite-visual {

  position: relative;
  overflow: hidden;
  border-radius: 28px;

  background:
    radial-gradient(
      circle at 25% 30%,
      rgba(249,207,221,.34),
      transparent 38%
    ),
    radial-gradient(
      circle at 78% 55%,
      rgba(190,183,244,.32),
      transparent 42%
    ),
    rgba(255,255,255,.32)
    !important;

  border:
    1px solid
    rgba(255,255,255,.65);
}

/* =========================================================
   URTA PRODUCT SCREENSHOT SHOWCASE
   ========================================================= */

   .urta-showcase {
    width: min(1080px, 100%);
  
    margin-inline: auto;
  
    padding:
      clamp(105px, 11vw, 145px)
      0
      clamp(90px, 9vw, 125px);
  }
  
  
  /* ---------------------------------------------------------
     HEADING
     --------------------------------------------------------- */
  
  .urta-showcase-heading {
    display: grid;
  
    grid-template-columns:
      minmax(0, 1fr)
      minmax(250px, 390px);
  
    align-items: end;
  
    gap:
      clamp(26px, 4vw, 58px);
  
    margin-bottom:
      clamp(35px, 5vw, 58px);
  }
  
  
  .urta-showcase-heading .urta-kicker {
    grid-column: 1 / -1;
  
    margin-bottom: -15px;
  }
  
  
  .urta-showcase-heading h2 {
    max-width: 650px;
  
    margin: 0;
  
    color: #202025;
  
    font-size:
      clamp(
        2.45rem,
        4.2vw,
        4.5rem
      );
  
    font-weight: 520;
  
    line-height: .97;
  
    letter-spacing: -.055em;
  }
  
  
  .urta-showcase-heading > p:last-child {
    margin: 0 0 5px;
  
    color: #77737d;
  
    font-size: .98rem;
  
    line-height: 1.65;
  }
  
  
  
  /* =========================================================
     CAROUSEL
     ========================================================= */
  
  .urta-showcase-carousel {
    position: relative;
  
    width: 100%;
  
    min-width: 0;
  
    outline: none;
  }
  
  
  .urta-showcase-viewport {
    position: relative;
  
    overflow: hidden;
  
    width: 100%;
  
    border-radius:
      clamp(
        26px,
        3.2vw,
        42px
      );
  }
  
  
  .urta-showcase-track {
    display: flex;
  
    width: 100%;
  
    transition:
      transform
      850ms
      cubic-bezier(.22, 1, .36, 1);
  
    will-change: transform;
  }
  
  
  .urta-showcase-slide {
    flex:
      0 0 100%;
  
    min-width: 0;
  
    padding: 0 1px;
  }
  
  
  
  /* =========================================================
     SCREENSHOT FRAME
     ========================================================= */
  
  .urta-shot-frame {
    position: relative;
  
    isolation: isolate;
  
    overflow: hidden;
  
    width: 100%;
  
    border:
      1px solid
      rgba(255,255,255,.86);
  
    border-radius:
      clamp(
        24px,
        3vw,
        40px
      );
  
    background:
      rgba(255,255,255,.46);
  
    box-shadow:
      0 34px 90px
        rgba(43,38,55,.10),
  
      inset 0 1px 0
        rgba(255,255,255,.92);
  }
  
  
  .urta-shot-image {
    display: block;
  
    width: 100%;
    height: auto;
  
    object-fit: contain;
  }
  
  
  
  /* =========================================================
     GIF / ANIMATED OVERLAY
     ========================================================= */
  
  .urta-shot-motion {
    position: absolute;
  
    /*
     * Each of these comes from the inline custom variables
     * on the image.
     */
    left: var(--motion-left);
    top: var(--motion-top);
  
    width: var(--motion-width);
  
    height: auto;
  
    z-index: 2;
  
    border-radius:
      var(
        --motion-radius,
        0px
      );
  
    transform:
      translate(
        -50%,
        -50%
      );
  
    object-fit: contain;
  
    pointer-events: none;
  
    /*
     * Helps it blend into the real screenshot rather than
     * looking pasted over it.
     */
    filter:
      drop-shadow(
        0 4px 12px
        rgba(30,25,40,.04)
      );
  }
  
  
  
  /* =========================================================
     CAPTION
     ========================================================= */
  
  .urta-showcase-caption {
    display: grid;
  
    grid-template-columns:
      36px
      minmax(0, 1fr);
  
    gap: 16px;
  
    width:
      min(
        720px,
        calc(100% - 30px)
      );
  
    margin:
      25px auto 0;
  }
  
  
  .urta-showcase-caption > span {
    padding-top: 5px;
  
    color:
      rgba(32,32,37,.38);
  
    font-size: .68rem;
  
    font-weight: 700;
  
    letter-spacing: .08em;
  }
  
  
  .urta-showcase-caption h3 {
    margin:
      0 0 6px;
  
    color: #202025;
  
    font-size:
      clamp(
        1.25rem,
        2vw,
        1.55rem
      );
  
    font-weight: 570;
  
    line-height: 1.08;
  
    letter-spacing: -.04em;
  }
  
  
  .urta-showcase-caption p {
    max-width: 620px;
  
    margin: 0;
  
    color: #77737d;
  
    font-size: .9rem;
  
    line-height: 1.6;
  }
  
  
  
  /* =========================================================
     CONTROLS
     ========================================================= */
  
  .urta-showcase-controls {
    display: flex;
  
    align-items: center;
    justify-content: space-between;
  
    gap: 20px;
  
    width:
      min(
        720px,
        calc(100% - 30px)
      );
  
    margin:
      26px auto 0;
  }
  
  
  .urta-showcase-dots {
    display: flex;
  
    align-items: center;
  
    gap: 9px;
  }
  
  
  .urta-showcase-dot {
    width: 7px;
    height: 7px;
  
    padding: 0;
  
    border: 0;
  
    border-radius: 50%;
  
    background:
      rgba(32,32,37,.18);
  
    cursor: pointer;
  
    transition:
      transform 260ms ease,
      background 260ms ease;
  }
  
  
  .urta-showcase-dot.is-active {
    background:
      rgba(32,32,37,.78);
  
    transform:
      scale(1.25);
  }
  
  
  .urta-showcase-arrows {
    display: flex;
  
    gap: 8px;
  }
  
  
  .urta-showcase-arrow {
    display: grid;
  
    place-items: center;
  
    width: 42px;
    height: 42px;
  
    padding: 0;
  
    border:
      1px solid
      rgba(32,32,37,.09);
  
    border-radius: 50%;
  
    background:
      rgba(255,255,255,.55);
  
    color: #343239;
  
    font-size: 1rem;
  
    cursor: pointer;
  
    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.80);
  
    transition:
      transform 180ms ease,
      background 180ms ease;
  }
  
  
  .urta-showcase-arrow:hover {
    transform:
      translateY(-2px);
  
    background:
      rgba(255,255,255,.85);
  }
  
  
  
  /* =========================================================
     MOBILE
     ========================================================= */
  
  @media (max-width: 720px) {
  
    .urta-showcase {
      width:
        calc(
          100% - 28px
        );
  
      padding:
        85px
        0
        78px;
    }
  
  
    .urta-showcase-heading {
      grid-template-columns: 1fr;
  
      gap: 16px;
  
      margin-bottom: 30px;
    }
  
  
    .urta-showcase-heading .urta-kicker {
      margin-bottom: 0;
    }
  
  
    .urta-showcase-heading h2 {
      font-size:
        clamp(
          2.15rem,
          9vw,
          3.05rem
        );
    }
  
  
    .urta-showcase-heading > p:last-child {
      max-width: 92%;
    }
  
  
    .urta-shot-frame {
      border-radius: 24px;
    }
  
  
    .urta-showcase-caption {
      grid-template-columns:
        28px
        1fr;
  
      width:
        calc(
          100% - 14px
        );
  
      margin-top: 19px;
    }
  
  
    .urta-showcase-controls {
      width:
        calc(
          100% - 14px
        );
  
      margin-top: 22px;
    }
  
  
    .urta-showcase-arrow {
      width: 39px;
      height: 39px;
    }
  
  }

  /* =========================================================
   URTA PRODUCT SCREENSHOT SHOWCASE
   ========================================================= */

.urta-showcase {
  width: min(940px, calc(100% - 48px));
  margin-inline: auto;
  padding: 88px 0 92px;
}


/* =========================================================
   CAROUSEL
   ========================================================= */

.urta-showcase-carousel {
  position: relative;
  width: 100%;
  min-width: 0;
  outline: none;
  padding-inline: 56px;
}


.urta-showcase-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 30px;
}


.urta-showcase-track {
  display: flex;
  width: 100%;
  transition:
    transform 850ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}


.urta-showcase-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0;
}



/* =========================================================
   SCREENSHOT FRAME
   ========================================================= */

.urta-shot-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 30px;
  background: rgba(255,255,255,.46);
  box-shadow:
    0 28px 70px rgba(43,38,55,.08),
    inset 0 1px 0 rgba(255,255,255,.92);
}


.urta-shot-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}


/* =========================================================
   GIF OVERLAY
   ========================================================= */

.urta-shot-motion {
  position: absolute;
  left: var(--motion-left);
  top: var(--motion-top);
  width: var(--motion-width);
  height: auto;
  z-index: 2;
  border-radius: var(--motion-radius, 0px);
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(30,25,40,.04));
}



/* =========================================================
   PROFILE TAB ANIMATION
   ========================================================= */

.urta-profile-sequence {
  position: relative;
  width: 100%;
}


.urta-shot-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 420ms ease;
}


.urta-shot-layer:first-child {
  position: relative;
}


.urta-shot-layer.is-active {
  opacity: 1;
  z-index: 1;
}



/* =========================================================
   DOTS
   ========================================================= */

.urta-showcase-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
}


.urta-showcase-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(32,32,37,.18);
  cursor: pointer;
  transition:
    transform 260ms ease,
    background 260ms ease;
}


.urta-showcase-dot.is-active {
  background: rgba(32,32,37,.78);
  transform: scale(1.25);
}



/* =========================================================
   SIDE ARROWS
   ========================================================= */

.urta-showcase-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(32,32,37,.09);
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  color: #343239;
  font-size: 1rem;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80);
  transform: translateY(-50%);
  transition:
    transform 180ms ease,
    background 180ms ease,
    opacity 180ms ease;
}


.urta-showcase-arrow:hover {
  background: rgba(255,255,255,.92);
}


.urta-showcase-arrow-prev {
  left: 0;
}


.urta-showcase-arrow-next {
  right: 0;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .urta-showcase {
    width: calc(100% - 24px);
    padding: 70px 0 74px;
  }

  .urta-showcase-carousel {
    padding-inline: 40px;
  }

  .urta-showcase-viewport,
  .urta-shot-frame {
    border-radius: 24px;
  }

  .urta-showcase-arrow {
    width: 36px;
    height: 36px;
    font-size: .92rem;
  }

  .urta-shot-motion {
    width: calc(var(--motion-width) * 1.06);
  }
}

/* =========================================================
   URTA PRODUCT SCREENSHOT SHOWCASE
   ========================================================= */

   .urta-showcase {
    width: min(900px, calc(100% - 56px));
    margin-inline: auto;
    padding: 82px 0 88px;
  }
  
  
  /* =========================================================
     CAROUSEL
     ========================================================= */
  
  .urta-showcase-carousel {
    position: relative;
    width: 100%;
    min-width: 0;
    outline: none;
    padding-inline: 58px;
  }
  
  
  .urta-showcase-viewport {
    position: relative;
    width: 100%;
    overflow: visible;
    border-radius: 28px;
  }
  
  
  /* -----------------------------------------
     CROSSFADE STACK
     ----------------------------------------- */
  
  .urta-showcase-track {
    position: relative;
    width: 100%;
    aspect-ratio: 1668 / 895;
  }
  
  
  .urta-showcase-slide {
    position: absolute;
    inset: 0;
  
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  
    transform: translateY(8px) scale(.992);
  
    transition:
      opacity 520ms ease,
      transform 700ms cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear 700ms;
  }
  
  
  .urta-showcase-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  
    transform: translateY(0) scale(1);
  
    transition:
      opacity 520ms ease,
      transform 700ms cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear 0s;
  
    z-index: 2;
  }
  
  
  
  /* =========================================================
     SCREENSHOT FRAME
     ========================================================= */
  
  .urta-shot-frame {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    height: 100%;
  
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 28px;
  
    background: rgba(255,255,255,.26);
  
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.82);
  }
  
  
  /* softer veil to reduce over-bright colorful backgrounds */
  
  .urta-shot-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  
    background:
      radial-gradient(
        ellipse at center,
        rgba(255,255,255,0) 52%,
        rgba(255,255,255,.16) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.10) 0%,
        rgba(255,255,255,.04) 18%,
        rgba(255,255,255,.06) 82%,
        rgba(255,255,255,.12) 100%
      );
  }
  
  
  .urta-shot-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
  }
  
  
  
  /* =========================================================
     GIF OVERLAY
     ========================================================= */
  
  .urta-shot-motion {
    position: absolute;
    left: var(--motion-left);
    top: var(--motion-top);
  
    width: var(--motion-width);
    height: auto;
  
    z-index: 4;
  
    border-radius: var(--motion-radius, 0px);
  
    transform: translate(-50%, -50%);
  
    object-fit: contain;
    pointer-events: none;
  
    display: block;
  }
  
  
  /* makes the homepage gif more clearly visible */
  .urta-shot-motion-home {
    opacity: .96;
    filter:
      drop-shadow(0 4px 10px rgba(35,30,45,.06));
  }
  
  
  
  /* =========================================================
     PROFILE TAB ANIMATION
     ========================================================= */
  
  .urta-profile-sequence {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  
  .urta-shot-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 340ms ease;
  }
  
  
  .urta-shot-layer:first-child {
    position: relative;
  }
  
  
  .urta-shot-layer.is-active {
    opacity: 1;
    z-index: 1;
  }
  
  
  
  /* =========================================================
     DOTS
     ========================================================= */
  
  .urta-showcase-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 18px;
  }
  
  
  .urta-showcase-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(32,32,37,.16);
    cursor: pointer;
    transition:
      transform 240ms ease,
      background 240ms ease,
      opacity 240ms ease;
  }
  
  
  .urta-showcase-dot.is-active {
    background: rgba(32,32,37,.72);
    transform: scale(1.22);
  }
  
  
  
  /* =========================================================
     SIDE ARROWS
     ========================================================= */
  
  .urta-showcase-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
  
    display: grid;
    place-items: center;
  
    width: 40px;
    height: 40px;
    padding: 0;
  
    border: 1px solid rgba(32,32,37,.08);
    border-radius: 50%;
  
    background: rgba(255,255,255,.68);
    color: #343239;
    font-size: .96rem;
  
    cursor: pointer;
  
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.80);
  
    transform: translateY(-50%);
  
    transition:
      background 180ms ease,
      opacity 180ms ease;
  }
  
  
  .urta-showcase-arrow:hover {
    background: rgba(255,255,255,.90);
  }
  
  
  .urta-showcase-arrow-prev {
    left: 0;
  }
  
  
  .urta-showcase-arrow-next {
    right: 0;
  }
  
  
  
  /* =========================================================
     MOBILE
     ========================================================= */
  
  @media (max-width: 720px) {
  
    .urta-showcase {
      width: calc(100% - 24px);
      padding: 68px 0 72px;
    }
  
    .urta-showcase-carousel {
      padding-inline: 38px;
    }
  
    .urta-showcase-viewport,
    .urta-shot-frame {
      border-radius: 22px;
    }
  
    .urta-showcase-arrow {
      width: 36px;
      height: 36px;
      font-size: .92rem;
    }
  
    .urta-showcase-track {
      aspect-ratio: 1668 / 895;
    }
  
    .urta-shot-motion-home {
      width: calc(var(--motion-width) * 1.04);
    }
  }

  .urta-showcase {
    width: min(1000px, calc(100% - 44px));
    margin-inline: auto;
  
    padding:
      76px
      0
      32px;
  }

  /* =========================================================
   SHOWCASE TITLE
   ========================================================= */

.urta-showcase-heading {
  width: 100%;
  margin: 0 auto 34px;
  text-align: center;
}


.urta-showcase-heading h2 {
  margin: 0;

  color: #202025;

  font-size:
    clamp(
      2.35rem,
      4.1vw,
      3.9rem
    );

  font-weight: 500;

  line-height: .98;

  letter-spacing: -.055em;
}



/* =========================================================
   SHOWCASE CTA
   ========================================================= */

.urta-showcase-action {
  display: flex;
  justify-content: center;

  margin-top: 28px;
}


.urta-showcase-action .urta-button {
  min-width: 136px;
}

/* Pull How it works closer to screenshot showcase */

.urta-page
.urta-showcase
+
.urta-how {
  padding-top:
    clamp(
      42px,
      5vw,
      62px
    )
    !important;
}

.urta-spark {
  display: grid;
  place-items: center;

  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.60);

  animation: none;
}


.urta-spark img {
  display: block;

  width: 17px;
  height: 17px;

  object-fit: contain;

  filter:
    grayscale(1)
    saturate(0)
    brightness(.72);

  opacity: .68;
}

/* =========================================================
   SCREENSHOT SHOWCASE HEADING
   ========================================================= */

   .urta-showcase-heading {
    width: min(720px, calc(100% - 32px));
  
    margin:
      0 auto 34px;
  
    text-align: center;
  }
  
  
  .urta-showcase-heading h2 {
    margin: 0;
  
    color: #202025;
  
    font-size:
      clamp(
        2.35rem,
        4.1vw,
        3.9rem
      );
  
    font-weight: 500;
  
    line-height: .98;
  
    letter-spacing: -.055em;
  }
  
  
  .urta-showcase-heading p {
    max-width: 650px;
  
    margin:
      18px auto 0;
  
    color:
      rgba(74,71,80,.66);
  
    font-size:
      .96rem;
  
    line-height: 1.62;
  }
  
  
  
  /* =========================================================
     MAGNETIC SIDE ARROWS
     ========================================================= */

  
  
 
  
  
  
  /* =========================================================
     SHOWCASE CTA
     ========================================================= */
  
  .urta-showcase-action {
    display: flex;
  
    justify-content: center;
    align-items: center;
  
    width: 100%;
  
    margin-top: 28px;
  }
  
  
  .urta-showcase-action .urta-button {
    width: auto;
  
    min-width: 138px;
  
    padding-inline: 23px;
  }

  @media (max-width: 720px) {

    .urta-showcase-heading {
      width:
        calc(
          100% - 22px
        );
  
      margin-bottom: 24px;
    }
  
  
    .urta-showcase-heading h2 {
      font-size:
        clamp(
          2rem,
          9vw,
          2.8rem
        );
    }
  
  
    .urta-showcase-heading p {
      max-width: 520px;
  
      margin-top: 14px;
  
      font-size: .88rem;
  
      line-height: 1.58;
    }
  
  
    .urta-showcase-action {
      margin-top: 22px;
    }
  
  
    /*
     * Your general mobile button rule makes buttons 100% wide.
     * Override that specifically for this CTA.
     */
    .urta-showcase-action .urta-button {
      width: auto !important;
  
      min-width: 0;
  
      min-height: 46px;
  
      padding:
        0 22px
        !important;
  
      margin-inline: auto;
    }
  
  }

  /* =========================================================
   MAGNETIC SIDE ARROWS
   ========================================================= */

.urta-showcase-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;

  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  padding: 0;

  border:
    1px solid
    rgba(32,32,37,.08);

  border-radius: 50%;

  background:
    rgba(255,255,255,.68);

  color: #343239;

  font-size: .96rem;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.80);

  /*
   * The ENTIRE round button now moves.
   *
   * -50% keeps it vertically centered.
   * magnetic X/Y gets added on top.
   */
  transform:
    translate3d(
      var(--arrow-magnet-x, 0px),
      calc(
        -50% +
        var(--arrow-magnet-y, 0px)
      ),
      0
    );

  transition:
    transform
      150ms
      cubic-bezier(.22, 1, .36, 1),

    background
      180ms
      ease,

    border-color
      180ms
      ease,

    box-shadow
      180ms
      ease;

  will-change: transform;
}


.urta-showcase-arrow:hover {
  background:
    rgba(255,255,255,.91);

  border-color:
    rgba(32,32,37,.11);
}


.urta-showcase-arrow-prev {
  left: 0;
}


.urta-showcase-arrow-next {
  right: 0;
}


/* arrow itself does NOT move separately */

.urta-showcase-arrow-icon {
  display: block;
  pointer-events: none;
}

.urta-showcase-arrow {
  transform:
    translate3d(
      var(--arrow-magnet-x, 0px),
      calc(
        -50% +
        var(--arrow-magnet-y, 0px)
      ),
      0
    );

  transition:
    transform
      160ms
      cubic-bezier(.22, 1, .36, 1),

    background
      180ms
      ease,

    border-color
      180ms
      ease;

  will-change: transform;
}


.urta-showcase-arrow:hover {
  background:
    rgba(255,255,255,.91);
}


.urta-showcase-arrow-icon {
  display: block;
  pointer-events: none;
  transform: none;
}

/* =========================================================
   FINAL SCREENSHOT SHOWCASE OVERRIDES
   ========================================================= */


/* ---------------------------------------------------------
   SECTION / HEADING
   --------------------------------------------------------- */

   .urta-page .urta-showcase {
    width: 100% !important;
    max-width: none !important;
  
    margin-inline: 0 !important;
  
    padding:
      76px
      0
      32px;
  }
  
  
  /*
   * Same left indentation as the other
   * major section headings.
   */
  .urta-page .urta-showcase-heading {
    display: block !important;
  
    width: 100% !important;
    max-width: 760px !important;
  
    margin:
      0 0 38px
      !important;
  
    text-align: left !important;
  }
  
  
  .urta-page .urta-showcase-heading h2 {
    margin: 0 !important;
  
    color: #202025;
  
    font-size:
      clamp(
        2.5rem,
        4.15vw,
        4.55rem
      )
      !important;
  
    font-weight: 500;
  
    line-height:
      .96
      !important;
  
    letter-spacing:
      -.055em
      !important;
  }
  
  
  /*
   * Paragraph is now definitely BELOW
   * the title rather than beside/centered.
   */
  .urta-page .urta-showcase-heading p {
    display: block !important;
  
    width: 100% !important;
    max-width: 680px !important;
  
    margin:
      20px 0 0
      !important;
  
    color:
      rgba(
        74,
        71,
        80,
        .66
      );
  
    font-size:
      .98rem;
  
    line-height:
      1.62;
  
    text-align: left !important;
  }
  
  
  /*
   * Keep only the gallery itself narrower
   * and centered.
   */
  .urta-page .urta-showcase-carousel {
    width:
      min(
        1000px,
        100%
      );
  
    margin-inline:
      auto;
  }
  
  
  
  /* ---------------------------------------------------------
     ARROWS
  
     JS handles transform smoothing now.
     Do NOT additionally animate transform in CSS.
     --------------------------------------------------------- */
  
  .urta-page .urta-showcase-arrow {
    transition:
      background 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease
      !important;
  
    will-change:
      transform;
  }
  
  
  .urta-page .urta-showcase-arrow:hover {
    background:
      rgba(
        255,
        255,
        255,
        .91
      );
  
    border-color:
      rgba(
        32,
        32,
        37,
        .11
      );
  }
  
  
  .urta-page .urta-showcase-arrow-icon {
    transform:
      none
      !important;
  
    pointer-events:
      none;
  }
  
  
  
  /* ---------------------------------------------------------
     MOBILE
     --------------------------------------------------------- */
  
  @media (
    max-width: 720px
  ) {
  
    .urta-page
    .urta-showcase {
      width:
        100%
        !important;
  
      padding:
        58px
        0
        24px;
    }
  
  
    .urta-page
    .urta-showcase-heading {
      width:
        100%
        !important;
  
      max-width:
        none
        !important;
  
      margin:
        0 0 28px
        !important;
  
      text-align:
        left
        !important;
    }
  
  
    .urta-page
    .urta-showcase-heading h2 {
      font-size:
        clamp(
          2.8rem,
          13vw,
          4.35rem
        )
        !important;
    }
  
  
    .urta-page
    .urta-showcase-heading p {
      max-width:
        100%
        !important;
  
      margin-top:
        16px
        !important;
  
      font-size:
        .9rem;
    }
  
  
    .urta-page
    .urta-showcase-carousel {
      width:
        100%;
    }
  
  }

  /* =========================================================
   EARLY ACCESS — Nebu-like ambient background
   ========================================================= */

.urta-access-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  width: 100%;
  padding: clamp(34px, 5vw, 64px);

  border: 1px solid rgba(255,255,255,.8);
  border-radius: 46px;

  background:
    radial-gradient(
      circle at 50% 58%,
      rgba(255, 196, 142, 0.42) 0%,
      rgba(255, 196, 142, 0.22) 16%,
      rgba(255, 196, 142, 0.00) 34%
    ),
    radial-gradient(
      circle at 18% 22%,
      rgba(202, 225, 255, 0.42) 0%,
      rgba(202, 225, 255, 0.00) 34%
    ),
    radial-gradient(
      circle at 84% 78%,
      rgba(210, 204, 255, 0.34) 0%,
      rgba(210, 204, 255, 0.00) 32%
    ),
    radial-gradient(
      circle at 78% 18%,
      rgba(176, 223, 255, 0.22) 0%,
      rgba(176, 223, 255, 0.00) 28%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.78) 0%,
      rgba(252,249,247,.74) 40%,
      rgba(246,246,252,.76) 72%,
      rgba(243,241,250,.78) 100%
    );

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  box-shadow:
    0 35px 80px rgba(38,38,55,.07),
    inset 0 1px 0 rgba(255,255,255,.72);
}


/* remove the old yellow/green blob */
.urta-access-card::before {
  display: none !important;
}


/* optional extra soft haze for depth */
.urta-access-card::after {
  content: "";
  position: absolute;
  inset: -10% -8% auto -8%;
  height: 88%;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      circle at 50% 56%,
      rgba(255, 181, 120, 0.18) 0%,
      rgba(255, 181, 120, 0.00) 32%
    ),
    radial-gradient(
      circle at 22% 28%,
      rgba(141, 203, 255, 0.16) 0%,
      rgba(141, 203, 255, 0.00) 34%
    ),
    radial-gradient(
      circle at 82% 74%,
      rgba(196, 191, 255, 0.14) 0%,
      rgba(196, 191, 255, 0.00) 30%
    );

  filter: blur(26px);
  opacity: .95;
}


.urta-access-card > * {
  position: relative;
  z-index: 1;
}
.urta-page .urta-access-art-logo {
  position: absolute;
  left: 50%;
  top: 58%;

  width: min(68%, 640px);
  aspect-ratio: 3.2 / 1;

  transform: translate(-50%, -50%);

  background:
    radial-gradient(
      circle at 18% 72%,
      rgba(255, 183, 156, .95) 0%,
      rgba(255, 183, 156, .72) 22%,
      transparent 46%
    ),
    radial-gradient(
      circle at 48% 24%,
      rgba(220, 192, 255, .96) 0%,
      rgba(220, 192, 255, .76) 26%,
      transparent 52%
    ),
    radial-gradient(
      circle at 80% 40%,
      rgba(174, 216, 255, .95) 0%,
      rgba(174, 216, 255, .76) 24%,
      transparent 48%
    ),
    linear-gradient(
      90deg,
      rgba(255, 190, 162, .96) 0%,
      rgba(243, 194, 224, .92) 35%,
      rgba(205, 191, 255, .92) 66%,
      rgba(176, 219, 255, .92) 100%
    );

  -webkit-mask-image: url("images/urta-logo.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("images/urta-logo.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  opacity: .82;

  /* this is the actual blur */
  filter: blur(16px) saturate(1.06);
}

.urta-page .urta-access-art-logo::after {
  content: "";
  position: absolute;
  inset: 0;

  background: inherit;

  -webkit-mask-image: url("images/urta-logo.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("images/urta-logo.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  filter: blur(34px);
  opacity: .42;

  transform: scale(1.08);
}

.urta-page .urta-access-art-matte {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 24% 68%,
      rgba(255, 208, 190, .16) 0%,
      transparent 34%
    ),
    radial-gradient(
      circle at 70% 28%,
      rgba(205, 194, 255, .14) 0%,
      transparent 34%
    ),
    radial-gradient(
      circle at 82% 46%,
      rgba(183, 216, 255, .14) 0%,
      transparent 28%
    ),
    linear-gradient(
      180deg,
      rgba(250,250,251,.96) 0%,
      rgba(246,246,248,.96) 100%
    );
}
  

/* =========================================================
   FIX EARLY ACCESS ART LAYER
   ========================================================= */

.urta-page
.urta-access-card
> .urta-access-art {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  z-index: 0 !important;

  overflow: hidden;

  pointer-events: none;
}


/* matte neutral background */

.urta-page
.urta-access-art-matte {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(250,250,251,.96),
      rgba(246,246,248,.97)
    );
}


/* =========================================================
   BLURRED COLORED URTA LOGO
   ========================================================= */

.urta-page
.urta-access-art-logo {
  position: absolute !important;

  left: 50% !important;
  top: 54% !important;

  width:
    min(
      72%,
      680px
    ) !important;

  height:
    260px !important;

  transform:
    translate(-50%, -50%);

  background:
    linear-gradient(
      90deg,

      #ffb99a 0%,

      #efbad9 30%,

      #c9baff 57%,

      #a9d8ff 78%,

      #ffd0a8 100%
    );

  -webkit-mask:
    url("images/urta-logo.png")
    center / contain
    no-repeat;

  mask:
    url("images/urta-logo.png")
    center / contain
    no-repeat;

  filter:
    blur(18px)
    saturate(1.08);

  opacity: .82;
}


/* second soft blur behind logo */

.urta-page
.urta-access-art-logo::after {
  content: "";

  position: absolute;

  inset: -12%;

  background:
    inherit;

  -webkit-mask:
    url("images/urta-logo.png")
    center / contain
    no-repeat;

  mask:
    url("images/urta-logo.png")
    center / contain
    no-repeat;

  filter:
    blur(32px);

  opacity: .38;
}


/* =========================================================
   KEEP REAL CONTENT ABOVE ART
   ========================================================= */

.urta-page
.urta-access-card
> *:not(.urta-access-art) {
  position: relative !important;
  z-index: 2 !important;
}/* =========================================================
   HEAVILY BLURRED COLORED URTA LOGO
   ========================================================= */
/* =========================================================
   EARLY ACCESS — CLEAN MATTE + ACTUALLY BLURRED LOGO
   ========================================================= */

   .urta-page .urta-access-card {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
  
    background: #f6f5f4 !important;
  
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  
  /* full decorative layer */
  
  .urta-page
  .urta-access-card
  > .urta-access-art {
    position: absolute !important;
    inset: 0 !important;
  
    width: 100% !important;
    height: 100% !important;
  
    z-index: 0 !important;
  
    overflow: hidden;
  
    pointer-events: none;
  }
  
  
  /* plain matte background */
  
  .urta-page .urta-access-art-matte {
    position: absolute !important;
    inset: 0 !important;
  
    background:
      #f6f5f4 !important;
  
    opacity: 1 !important;
  
    filter: none !important;
  }
  
  
  /* =========================================================
     THIS WRAPPER DOES THE BLUR
     ========================================================= */
  
  .urta-page .urta-access-logo-blur {
    position: absolute;
  
    left: 50%;
    top: 56%;
  
    width: min(80%, 780px);
    height: 340px;
  
    transform:
      translate(-50%, -50%)
      scale(1.12);
  
    /*
     * IMPORTANT:
     * blur happens AFTER the masked child
     * has already been rendered.
     */
    filter:
      blur(30px)
      saturate(.95);
  
    -webkit-filter:
      blur(30px)
      saturate(.95);
  
    opacity: .72;
  }
  
  
  /* =========================================================
     SHARP MASK INSIDE BLURRED WRAPPER
     ========================================================= */
  
  .urta-page .urta-access-art-logo {
    position: absolute;
  
    inset: 0;
  
    background:
      linear-gradient(
        100deg,
  
        #f4b5a0 0%,
  
        #e9bed5 28%,
  
        #cbbcf1 55%,
  
        #afd1ed 78%,
  
        #edc7aa 100%
      );
  
    -webkit-mask:
      url("images/urta-logo.png")
      center / contain
      no-repeat;
  
    mask:
      url("images/urta-logo.png")
      center / contain
      no-repeat;
  
    /*
     * NO blur here.
     * Parent wrapper handles blur.
     */
    filter: none !important;
  }
  
  
  /* keep all content above the art */
  
  .urta-page
  .urta-access-card
  > *:not(.urta-access-art) {
    position: relative !important;
    z-index: 2 !important;
  }

  /* =========================================================
   EARLY ACCESS — BLURRED URTA ART
   ========================================================= */

.urta-page .urta-access-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  background:
    rgba(248, 247, 247, .92)
    !important;
}


/* kill all older decoration */
.urta-page .urta-access-card::before,
.urta-page .urta-access-card::after {
  display: none !important;
}


/* full decorative layer */
.urta-page .urta-access-art {
  position: absolute !important;
  inset: 0 !important;

  z-index: 0 !important;

  overflow: hidden;

  pointer-events: none;
}


/* page-palette "rainbow" glow */
.urta-page .urta-access-art-glow {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 82%;
  height: 78%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    conic-gradient(
      from 205deg,

      rgba(255, 173, 137, .92),

      rgba(242, 179, 211, .86),

      rgba(193, 179, 255, .90),

      rgba(164, 211, 255, .88),

      rgba(255, 205, 166, .90),

      rgba(255, 173, 137, .92)
    );

  filter:
    blur(42px);

  opacity: .72;

  transform:
    translate(-50%, -50%)
    scale(1.08);
}


/* actual Urta logo */
.urta-page .urta-access-art-logo {
  position: absolute;

  left: 50%;
  top: 50%;

  width:
    min(
      72%,
      650px
    );

  height: auto;

  transform:
    translate(-50%, -50%)
    scale(1.08);

  opacity: .42;

  filter:
    grayscale(1)
    brightness(.24)
    contrast(1.35)
    blur(13px);

  object-fit: contain;
}


/*
 * soft dark aura immediately around logo
 */
.urta-page .urta-access-art::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 68%;
  height: 54%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    rgba(20, 20, 24, .19);

  filter:
    blur(48px);

  mix-blend-mode:
    multiply;
}


/* actual card content stays above art */
.urta-page
.urta-access-card
> *:not(.urta-access-art) {
  position: relative !important;
  z-index: 2 !important;
}

/* =========================================================
   URTA — FINAL MOBILE / BOTTOM / ACCESS CLEANUP
   Keep this as the LAST block in urta.css.
   ========================================================= */


/* =========================================================
   1. MOBILE BUTTONS — DO NOT STRETCH FULL WIDTH
   ========================================================= */

@media (max-width: 720px) {

  .urta-page .urta-actions {
    width: 100% !important;

    flex-direction: column !important;

    align-items:
      flex-start !important;

    gap:
      10px !important;
  }


  .urta-page .urta-button {
    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    min-height:
      46px !important;

    padding:
      0 18px !important;

    align-self:
      flex-start !important;

    justify-content:
      center;

    white-space:
      nowrap;
  }


  /*
   * Screenshot-section CTA is centered.
   */

  .urta-page
  .urta-showcase-action {
    justify-content:
      center !important;
  }


  .urta-page
  .urta-showcase-action
  .urta-button {
    align-self:
      center !important;

    margin-inline:
      auto !important;
  }

}


/* Extra-small phones */

@media (max-width: 390px) {

  .urta-page .urta-button {
    min-height:
      44px !important;

    padding:
      0 16px !important;

    font-size:
      .9rem !important;
  }

}


/* =========================================================
   2. REDUCE SPACING IN LOWER HALF OF PAGE
   ========================================================= */

@media (max-width: 720px) {

  /*
   * Screenshot section
   */

  .urta-page .urta-showcase {
    padding-top:
      46px !important;

    padding-bottom:
      18px !important;
  }


  .urta-page
  .urta-showcase-action {
    margin-top:
      18px !important;
  }


  /*
   * Early Access
   */

  .urta-page .urta-access {
    padding:
      46px 0 38px
      !important;
  }


  .urta-page
  .urta-access-heading {
    margin-bottom:
      22px !important;
  }


  /*
   * FAQ
   */

  .urta-page .urta-faq {
    padding:
      38px 0 44px
      !important;
  }


  .urta-page
  .urta-faq-heading {
    margin-bottom:
      22px !important;
  }


  /*
   * Final CTA
   */

  .urta-page
  .urta-final-cta {
    margin-top:
      38px !important;

    padding:
      32px 20px !important;
  }


  .urta-page
  .urta-final-cta
  .urta-actions {
    margin-top:
      22px !important;
  }

}


/* =========================================================
   3. EARLY ACCESS — REMOVE BACKGROUND COMPLETELY
   ========================================================= */

.urta-page
.urta-access-card {
  background:
    transparent !important;

  background-image:
    none !important;

  border:
    0 !important;

  box-shadow:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  border-radius:
    0 !important;

  overflow:
    visible !important;
}


/*
 * Kill every old decoration.
 */

.urta-page
.urta-access-card::before,

.urta-page
.urta-access-card::after {
  display:
    none !important;

  content:
    none !important;
}


/*
 * Hide the old logo/glow artwork entirely.
 * You can leave the HTML in place for now.
 */

.urta-page
.urta-access-art,

.urta-page
.urta-access-art-glow,

.urta-page
.urta-access-art-logo,

.urta-page
.urta-access-art-matte,

.urta-page
.urta-access-logo-blur {
  display:
    none !important;
}


/*
 * Slightly tighten internal Early Access spacing too.
 */

.urta-page
.urta-access-topline {
  margin-bottom:
    14px !important;
}


.urta-page
.urta-access-stats {
  margin:
    32px 0 24px
    !important;
}


.urta-page
.urta-access-features {
  margin-bottom:
    24px !important;
}


.urta-page
.urta-access-card
> .urta-actions {
  margin-top:
    0 !important;
}

/* =========================================================
   URTA — TIGHTER OVERALL SECTION RHYTHM
   Keep this at the VERY BOTTOM of urta.css
   ========================================================= */


/* ---------------------------------------------------------
   FEATURES — reduce the huge empty vertical gaps
   --------------------------------------------------------- */

   .urta-page .urta-feature-row {
    min-height:
      clamp(
        470px,
        58vh,
        610px
      )
      !important;
  }
  
  
  /*
   * Less space before the Features section itself
   */
  
  .urta-page .urta-features {
    padding-top:
      clamp(
        68px,
        7vw,
        88px
      )
      !important;
  }
  
  
  /*
   * Heading → first feature
   */
  
  .urta-page
  .urta-features
  .urta-section-heading {
    margin-bottom:
      clamp(
        24px,
        3vw,
        36px
      )
      !important;
  }
  
  
  /* ---------------------------------------------------------
     SCREENSHOT SHOWCASE
     --------------------------------------------------------- */
  
  .urta-page .urta-showcase {
    padding-top:
      clamp(
        72px,
        8vw,
        96px
      )
      !important;
  
    padding-bottom:
      clamp(
        48px,
        5vw,
        66px
      )
      !important;
  }
  
  
  .urta-page
  .urta-showcase-heading {
    margin-bottom:
      clamp(
        26px,
        3vw,
        38px
      )
      !important;
  }
  
  
  /* ---------------------------------------------------------
     SHOWCASE → HOW IT WORKS
     --------------------------------------------------------- */
  
  .urta-page
  .urta-showcase
  +
  .urta-how {
    padding-top:
      clamp(
        38px,
        4vw,
        52px
      )
      !important;
  }
  
  
  /* ---------------------------------------------------------
     HOW IT WORKS
     --------------------------------------------------------- */
  
  .urta-page .urta-how {
    padding-top:
      clamp(
        62px,
        6vw,
        80px
      )
      !important;
  }
  
  
  .urta-page
  .urta-how
  .urta-section-heading {
    margin-bottom:
      28px
      !important;
  }
  
  
  /* ---------------------------------------------------------
     EARLY ACCESS
     --------------------------------------------------------- */
  
  .urta-page .urta-access {
    padding:
      clamp(
        58px,
        6vw,
        78px
      )
      0
      clamp(
        46px,
        5vw,
        66px
      )
      !important;
  }
  
  
  .urta-page
  .urta-access-heading {
    margin-bottom:
      24px
      !important;
  }
  
  
  /* ---------------------------------------------------------
     FAQ
     --------------------------------------------------------- */
  
  .urta-page .urta-faq {
    padding:
      42px
      0
      58px
      !important;
  }
  
  
  .urta-page
  .urta-faq-heading {
    margin-bottom:
      26px
      !important;
  }
  
  
  /* ---------------------------------------------------------
     FINAL CTA
     --------------------------------------------------------- */
  
  .urta-page .urta-final-cta {
    margin-top:
      clamp(
        48px,
        5vw,
        66px
      )
      !important;
  }
  
  
  /* ---------------------------------------------------------
     MOBILE — even tighter
     --------------------------------------------------------- */
  
  @media (max-width: 720px) {
  
    .urta-page
    .urta-feature-row {
      min-height:
        0
        !important;
  
      padding:
        30px
        0
        !important;
  
      gap:
        20px
        !important;
    }
  
  
    .urta-page
    .urta-how,
  
    .urta-page
    .urta-features {
      padding-top:
        54px
        !important;
    }
  
  
    .urta-page
    .urta-showcase {
      padding:
        52px
        0
        34px
        !important;
    }
  
  
    .urta-page
    .urta-access {
      padding:
        48px
        0
        34px
        !important;
    }
  
  
    .urta-page
    .urta-faq {
      padding:
        34px
        0
        42px
        !important;
    }
  
  
    .urta-page
    .urta-final-cta {
      margin-top:
        38px
        !important;
    }
  
  }

  /* =========================================================
   PRIVACY + SECURITY
   ========================================================= */

.urta-page .urta-trust {
  width:
    min(
      1080px,
      calc(100% - 40px)
    );

  margin-inline: auto;

  padding:
    clamp(58px, 7vw, 86px)
    0;
}


.urta-trust-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 410px);

  align-items: end;

  gap:
    clamp(28px, 5vw, 64px);

  margin-bottom:
    34px;
}


.urta-trust-heading .urta-kicker {
  grid-column:
    1 / -1;

  margin-bottom:
    -10px;
}


.urta-trust-heading h2 {
  max-width:
    720px;

  margin:
    0;

  font-size:
    clamp(
      2.5rem,
      4.5vw,
      4.8rem
    );

  font-weight:
    520;

  line-height:
    .96;

  letter-spacing:
    -.06em;
}


.urta-trust-heading > p:last-child {
  margin:
    0 0 4px;

  color:
    #74717a;

  font-size:
    .98rem;

  line-height:
    1.65;
}


.urta-trust-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    14px;
}


.urta-trust-card {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  min-height:
    300px;

  padding:
    clamp(
      26px,
      3.5vw,
      38px
    );

  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.82);

  border-radius:
    30px;

  background:
    rgba(255,255,255,.48);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.80),
    0 18px 48px
    rgba(48,43,62,.055);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


.urta-trust-index {
  color:
    rgba(32,32,37,.38);

  font-size:
    .66rem;

  font-weight:
    750;

  letter-spacing:
    .12em;
}


.urta-trust-icon {
  display:
    grid;

  place-items:
    center;

  width:
    48px;

  height:
    48px;

  margin-top:
    36px;

  border:
    1px solid
    rgba(32,32,37,.07);

  border-radius:
    50%;

  background:
    rgba(255,255,255,.58);

  color:
    #57545e;

  font-size:
    1.15rem;
}


.urta-trust-card h3 {
  margin:
    22px 0 10px;

  font-size:
    1.4rem;

  font-weight:
    570;

  letter-spacing:
    -.04em;
}


.urta-trust-card p {
  max-width:
    440px;

  margin:
    0;

  color:
    #74717a;

  font-size:
    .92rem;

  line-height:
    1.62;
}


.urta-trust-detail {
  display:
    inline-flex;

  width:
    fit-content;

  margin-top:
    auto;

  padding-top:
    24px;

  color:
    rgba(32,32,37,.45);

  font-size:
    .69rem;

  font-weight:
    700;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.urta-trust-disclosure {
  display:
    grid;

  grid-template-columns:
    190px
    minmax(0, 1fr);

  gap:
    28px;

  margin-top:
    14px;

  padding:
    24px 28px;

  border:
    1px solid
    rgba(32,32,37,.06);

  border-radius:
    22px;

  background:
    rgba(247,246,246,.68);
}


.urta-trust-disclosure-label {
  color:
    #62606a;

  font-size:
    .72rem;

  font-weight:
    750;

  letter-spacing:
    .09em;

  text-transform:
    uppercase;
}


.urta-trust-disclosure p {
  max-width:
    720px;

  margin:
    0;

  color:
    #74717a;

  font-size:
    .88rem;

  line-height:
    1.6;
}


@media (max-width: 720px) {

  .urta-page .urta-trust {
    width:
      calc(100% - 24px);

    padding:
      46px 0;
  }


  .urta-trust-heading {
    grid-template-columns:
      1fr;

    gap:
      18px;

    margin-bottom:
      24px;
  }


  .urta-trust-heading .urta-kicker {
    margin-bottom:
      0;
  }


  .urta-trust-heading h2 {
    font-size:
      clamp(
        2.35rem,
        11vw,
        3.3rem
      );
  }


  .urta-trust-grid {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }


  .urta-trust-card {
    min-height:
      0;

    padding:
      25px;
  }


  .urta-trust-icon {
    margin-top:
      26px;
  }


  .urta-trust-disclosure {
    grid-template-columns:
      1fr;

    gap:
      10px;

    padding:
      22px;
  }

}


/* =========================================================
   CONTEXT SIGNALS
   ========================================================= */

   .urta-page .urta-signals {
    width:
      min(
        1080px,
        calc(100% - 40px)
      );
  
    margin-inline:
      auto;
  
    padding:
      clamp(60px, 7vw, 88px)
      0
      clamp(48px, 6vw, 72px);
  }
  
  
  .urta-signals-heading {
    display:
      grid;
  
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 400px);
  
    align-items:
      end;
  
    gap:
      clamp(30px, 5vw, 64px);
  
    margin-bottom:
      30px;
  }
  
  
  .urta-signals-heading .urta-kicker {
    grid-column:
      1 / -1;
  
    margin-bottom:
      -10px;
  }
  
  
  .urta-signals-heading h2 {
    max-width:
      700px;
  
    margin:
      0;
  
    font-size:
      clamp(
        2.6rem,
        4.6vw,
        4.9rem
      );
  
    font-weight:
      520;
  
    line-height:
      .95;
  
    letter-spacing:
      -.062em;
  }
  
  
  .urta-signals-heading > p:last-child {
    margin:
      0 0 5px;
  
    color:
      #74717a;
  
    font-size:
      .98rem;
  
    line-height:
      1.65;
  }
  
  
  .urta-signals-layout {
    display:
      grid;
  
    grid-template-columns:
      1.08fr
      .92fr;
  
    gap:
      14px;
  }
  
  
  .urta-signal-panel {
    min-width:
      0;
  
    padding:
      clamp(
        28px,
        4vw,
        44px
      );
  
    border:
      1px solid
      rgba(255,255,255,.82);
  
    border-radius:
      32px;
  
    background:
      rgba(255,255,255,.48);
  
    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.8),
      0 18px 50px
      rgba(48,43,62,.055);
  
    backdrop-filter:
      blur(18px);
  
    -webkit-backdrop-filter:
      blur(18px);
  }
  
  
  .urta-signal-panel-header {
    display:
      flex;
  
    justify-content:
      space-between;
  
    gap:
      16px;
  
    color:
      rgba(32,32,37,.42);
  
    font-size:
      .66rem;
  
    font-weight:
      750;
  
    letter-spacing:
      .10em;
  
    text-transform:
      uppercase;
  }
  
  
  .urta-signal-panel h3 {
    max-width:
      480px;
  
    margin:
      54px 0 13px;
  
    font-size:
      clamp(
        1.75rem,
        3vw,
        2.65rem
      );
  
    font-weight:
      540;
  
    line-height:
      1;
  
    letter-spacing:
      -.055em;
  }
  
  
  .urta-signal-description {
    max-width:
      520px;
  
    margin:
      0;
  
    color:
      #77737d;
  
    font-size:
      .92rem;
  
    line-height:
      1.62;
  }
  
  
  /* MOODS */
  
  .urta-mood-spectrum {
    display:
      flex;
  
    flex-wrap:
      wrap;
  
    gap:
      9px;
  
    margin-top:
      42px;
  }
  
  
  .urta-mood-chip {
    display:
      inline-flex;
  
    align-items:
      center;
  
    gap:
      8px;
  
    padding:
      10px 14px;
  
    border:
      1px solid
      rgba(32,32,37,.07);
  
    border-radius:
      999px;
  
    background:
      rgba(255,255,255,.62);
  
    color:
      #55525b;
  
    font-size:
      .78rem;
  
    font-weight:
      650;
  }
  
  
  .urta-mood-chip i {
    width:
      8px;
  
    height:
      8px;
  
    border-radius:
      50%;
  }
  
  
  .mood-caring i {
    background:
      #e5a7be;
  }
  
  
  .mood-calm i {
    background:
      #9cb9dc;
  }
  
  
  .mood-neutral i {
    background:
      #aaa8ae;
  }
  
  
  .mood-upset i {
    background:
      #c7a6d7;
  }
  
  
  .mood-agitated i {
    background:
      #dd9d82;
  }
  
  
  /* WARNINGS */
  
  .urta-warning-list {
    display:
      grid;
  
    gap:
      9px;
  
    margin-top:
      34px;
  }
  
  
  .urta-warning-chip {
    display:
      grid;
  
    grid-template-columns:
      38px
      minmax(0, 1fr);
  
    align-items:
      center;
  
    gap:
      12px;
  
    padding:
      13px 15px;
  
    border:
      1px solid
      rgba(32,32,37,.065);
  
    border-radius:
      18px;
  
    background:
      rgba(255,255,255,.55);
  }
  
  
  .urta-warning-symbol {
    display:
      grid;
  
    place-items:
      center;
  
    width:
      34px;
  
    height:
      34px;
  
    border-radius:
      50%;
  
    background:
      rgba(227,155,130,.14);
  
    color:
      #9e6755;
  
    font-size:
      .8rem;
  
    font-weight:
      800;
  }
  
  
  .urta-warning-chip strong {
    display:
      block;
  
    color:
      #343239;
  
    font-size:
      .82rem;
  
    font-weight:
      700;
  }
  
  
  .urta-warning-chip small {
    display:
      block;
  
    margin-top:
      3px;
  
    color:
      #88848d;
  
    font-size:
      .70rem;
  
    line-height:
      1.35;
  }
  
  
  .urta-signals-note {
    max-width:
      760px;
  
    margin:
      18px 0 0;
  
    color:
      rgba(32,32,37,.46);
  
    font-size:
      .76rem;
  
    line-height:
      1.55;
  }
  
  
  @media (max-width: 720px) {
  
    .urta-page .urta-signals {
      width:
        calc(100% - 24px);
  
      padding:
        46px 0 38px;
    }
  
  
    .urta-signals-heading {
      grid-template-columns:
        1fr;
  
      gap:
        18px;
  
      margin-bottom:
        24px;
    }
  
  
    .urta-signals-heading .urta-kicker {
      margin-bottom:
        0;
    }
  
  
    .urta-signals-heading h2 {
      font-size:
        clamp(
          2.35rem,
          11vw,
          3.35rem
        );
    }
  
  
    .urta-signals-layout {
      grid-template-columns:
        1fr;
  
      gap:
        12px;
    }
  
  
    .urta-signal-panel {
      padding:
        25px;
    }
  
  
    .urta-signal-panel h3 {
      margin-top:
        38px;
    }
  
  
    .urta-mood-spectrum {
      margin-top:
        30px;
    }
  
  }


/* =========================================================
   HOW IT WORKS — VIOLET-ONLY BACKGROUNDS FOR CARDS 01 + 03
   Keep everything else unchanged.
   ========================================================= */

/* 01 — Water / invite:
   one soft violet concentration in the middle, no pink/peach */
.urta-page .urta-invite-visual {
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(188, 176, 244, .42) 0%,
      rgba(213, 206, 249, .24) 34%,
      rgba(255,255,255,.34) 72%
    ) !important;
}

/* 03 — Message refinement:
   one soft violet concentration in the middle, no pink */
.urta-page .urta-text-transform {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(188, 176, 244, .38) 0%,
      rgba(216, 209, 249, .22) 35%,
      rgba(255,255,255,.32) 72%
    ) !important;
}

/* The third card also has a moving ambient pseudo-element.
   Keep the motion, but make it violet-only too. */
.urta-page .urta-text-transform::before {
  background:
    rgba(176, 158, 242, .20) !important;
}


/* =========================================================
   HOW IT WORKS — PINK-ONLY BACKGROUNDS + EQUAL HEIGHTS
   ========================================================= */

/* Make all three cards the same overall height */
.urta-page .urta-steps {
  align-items: stretch !important;
}

.urta-page .urta-steps > .urta-step {
  height: 545px !important;
  min-height: 545px !important;
  max-height: 545px !important;
}

/* Keep all three visual windows equal too */
.urta-page .urta-step-liquid .urta-step-visual,
.urta-page .urta-step-boundaries .urta-abstraction-demo,
.urta-page
.urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
.urta-text-transform {
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  flex: 0 0 300px !important;
}

/* 01 — first card: one pink concentration in the middle */
.urta-page .urta-invite-visual {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(244, 184, 208, .42) 0%,
      rgba(248, 211, 225, .24) 36%,
      rgba(255,255,255,.34) 72%
    ) !important;
}

/* 03 — third card: one pink concentration in the middle */
.urta-page .urta-text-transform {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(244, 184, 208, .40) 0%,
      rgba(248, 211, 225, .22) 36%,
      rgba(255,255,255,.32) 72%
    ) !important;
}

/* Remove the violet/pink mix from the moving ambient layer.
   Keep the animation, but make it pink-only. */
.urta-page .urta-text-transform::before {
  background:
    rgba(239, 171, 200, .18) !important;
}

/* Responsive: don't force fixed desktop card height on stacked layout */
@media (max-width: 900px) {
  .urta-page .urta-steps > .urta-step {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .urta-page .urta-step-liquid .urta-step-visual,
  .urta-page .urta-step-boundaries .urta-abstraction-demo,
  .urta-page
  .urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
  .urta-text-transform {
    height: 310px !important;
    min-height: 310px !important;
    max-height: 310px !important;
    flex-basis: 310px !important;
  }
}

@media (max-width: 520px) {
  .urta-page .urta-step-liquid .urta-step-visual,
  .urta-page .urta-step-boundaries .urta-abstraction-demo,
  .urta-page
  .urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
  .urta-text-transform {
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
    flex-basis: 270px !important;
  }
}

/* =========================================================
   HOW IT WORKS — SHORTER CARDS + MATCH 01 TO 03 BACKGROUND
   ========================================================= */

/* shorter cards / less empty space at the bottom */
.urta-page .urta-steps > .urta-step {
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
}

/* keep all three visual areas equal */
.urta-page .urta-step-liquid .urta-step-visual,
.urta-page .urta-step-boundaries .urta-abstraction-demo,
.urta-page
.urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
.urta-text-transform {
  height: 285px !important;
  min-height: 285px !important;
  max-height: 285px !important;
  flex: 0 0 285px !important;
}


/* EXACT SAME BACKGROUND FOR 1ST AND 3RD VISUAL BOXES */
.urta-page .urta-invite-visual,
.urta-page .urta-text-transform {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(244, 184, 208, .40) 0%,
      rgba(248, 211, 225, .22) 36%,
      rgba(255,255,255,.32) 72%
    ) !important;
}

/* third card has an extra animated layer;
   make it use the same single pink family */
.urta-page .urta-text-transform::before {
  background:
    rgba(239, 171, 200, .18) !important;
}


/* responsive */
@media (max-width: 900px) {
  .urta-page .urta-steps > .urta-step {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .urta-page .urta-step-liquid .urta-step-visual,
  .urta-page .urta-step-boundaries .urta-abstraction-demo,
  .urta-page
  .urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
  .urta-text-transform {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    flex-basis: 300px !important;
  }
}

@media (max-width: 520px) {
  .urta-page .urta-step-liquid .urta-step-visual,
  .urta-page .urta-step-boundaries .urta-abstraction-demo,
  .urta-page
  .urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
  .urta-text-transform {
    height: 265px !important;
    min-height: 265px !important;
    max-height: 265px !important;
    flex-basis: 265px !important;
  }
}

/* =========================================================
   HOW IT WORKS — SINGLE PINK BACKGROUND
   01 + 03
   ========================================================= */

/* FIRST BOX */
.urta-page
.urta-step-liquid
.urta-invite-visual {
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(244, 184, 208, .46) 0%,
      rgba(247, 207, 223, .28) 34%,
      rgba(255,255,255,.32) 72%
    ) !important;

  background-color: transparent !important;
}


/* THIRD BOX */
.urta-page
.urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
.urta-text-transform {
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(244, 184, 208, .46) 0%,
      rgba(247, 207, 223, .28) 34%,
      rgba(255,255,255,.32) 72%
    ) !important;

  background-color: transparent !important;
}


/* third-box moving glow = pink only */
.urta-page .urta-text-transform::before {
  background: rgba(239, 171, 200, .18) !important;
}


/* shorter/equal cards */
.urta-page .urta-steps > .urta-step {
  height: 485px !important;
  min-height: 485px !important;
  max-height: 485px !important;
}

.urta-page .urta-step-liquid .urta-step-visual,
.urta-page .urta-step-boundaries .urta-abstraction-demo,
.urta-page
.urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
.urta-text-transform {
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  flex: 0 0 280px !important;
}

/* =========================================================
   HOW IT WORKS — 01 + 03 EXACT SAME PINK BACKGROUND
   ========================================================= */

   .urta-page .urta-invite-visual,
   .urta-page
   .urta-step:not(.urta-step-liquid):not(.urta-step-boundaries)
   .urta-text-transform {
   
     background:
       radial-gradient(
         circle 145px at 50% 50%,
         rgba(244, 184, 208, .46) 0%,
         rgba(248, 211, 225, .25) 46%,
         rgba(255,255,255,.32) 100%
       ) !important;
   
     background-color: rgba(255,255,255,.32) !important;
   }
   
   
   /* IMPORTANT:
      remove the extra glow that was making box 03
      look like it had a larger pink gradient */
   .urta-page .urta-text-transform::before {
     display: none !important;
   }

   /* HOW IT WORKS — reduce empty space under text */

.urta-page .urta-steps > .urta-step {
  height: 465px !important;
  min-height: 465px !important;
  max-height: 465px !important;
}

.urta-page .urta-step-copy {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.urta-page .urta-step-copy p {
  margin-bottom: 0 !important;
}

/* =========================================================
   MATCH PRIVACY + CONTEXT HEADINGS TO MAIN SECTION HEADINGS
   ========================================================= */

/* same title size/style as How it works / Features */
.urta-page .urta-trust-heading h2,
.urta-page .urta-signals-heading h2 {
  max-width: 940px !important;

  margin: 0 !important;

  font-size: clamp(2.5rem, 4.15vw, 4.55rem) !important;
  font-weight: 500 !important;

  line-height: .96 !important;
  letter-spacing: -.055em !important;
}


/* same paragraph styling as the other section heading copy */
.urta-page .urta-trust-heading > p:last-child,
.urta-page .urta-signals-heading > p:last-child {
  max-width: 430px !important;

  margin: 0 0 7px !important;

  color: #77737d !important;

  font-size: 1rem !important;
  line-height: 1.65 !important;
}


/* keep heading layout consistent too */
.urta-page .urta-trust-heading,
.urta-page .urta-signals-heading {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 430px) !important;

  align-items: end !important;

  gap: 40px !important;
}


/* same kicker spacing */
.urta-page .urta-trust-heading .urta-kicker,
.urta-page .urta-signals-heading .urta-kicker {
  grid-column: 1 / -1 !important;
  margin-bottom: -18px !important;
}


/* mobile */
@media (max-width: 720px) {

  .urta-page .urta-trust-heading,
  .urta-page .urta-signals-heading {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .urta-page .urta-trust-heading .urta-kicker,
  .urta-page .urta-signals-heading .urta-kicker {
    margin-bottom: 0 !important;
  }

  .urta-page .urta-trust-heading h2,
  .urta-page .urta-signals-heading h2 {
    max-width: 100% !important;

    font-size: clamp(2.8rem, 13vw, 4.35rem) !important;
    line-height: .94 !important;
  }

  .urta-page .urta-trust-heading > p:last-child,
  .urta-page .urta-signals-heading > p:last-child {
    max-width: 100% !important;
    margin: 0 !important;
  }

}

/* =========================================================
   UNIFY SECTION HEADINGS
   Same alignment as "Designed around difficult communication"
   Paragraphs always underneath
   ========================================================= */

/* Main heading containers */
.urta-page .urta-section-heading,
.urta-page .urta-trust-heading,
.urta-page .urta-signals-heading,
.urta-page .urta-access-heading,
.urta-page .urta-faq-heading {
  display: block !important;

  width: 100% !important;
  max-width: 940px !important;

  margin-left: 0 !important;
  margin-right: auto !important;

  text-align: left !important;
}


/* Kickers / labels */
.urta-page .urta-section-heading .urta-kicker,
.urta-page .urta-trust-heading .urta-kicker,
.urta-page .urta-signals-heading .urta-kicker {
  display: block !important;

  margin: 0 0 18px !important;

  font-size: .72rem !important;
  font-weight: 650 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
}


/* ALL section titles */
.urta-page .urta-section-heading h2,
.urta-page .urta-trust-heading h2,
.urta-page .urta-signals-heading h2,
.urta-page .urta-access-heading h2,
.urta-page .urta-faq-heading h2 {
  display: block !important;

  width: 100% !important;
  max-width: 940px !important;

  margin: 0 !important;

  font-size: clamp(2.5rem, 4.15vw, 4.55rem) !important;
  font-weight: 500 !important;

  line-height: .96 !important;
  letter-spacing: -.055em !important;

  text-align: left !important;
}


/* ALL intro paragraphs directly underneath titles */
.urta-page .urta-section-heading > p:last-child,
.urta-page .urta-trust-heading > p:last-child,
.urta-page .urta-signals-heading > p:last-child,
.urta-page .urta-access-heading > p:last-child,
.urta-page .urta-faq-heading > p:last-child {
  display: block !important;

  width: 100% !important;
  max-width: 680px !important;

  margin: 24px 0 0 !important;

  color: #77737d !important;

  font-size: 1rem !important;
  font-weight: 400 !important;

  line-height: 1.65 !important;

  text-align: left !important;
}


/* Remove any old side-by-side grid behavior */
.urta-page .urta-section-heading,
.urta-page .urta-trust-heading,
.urta-page .urta-signals-heading {
  grid-template-columns: none !important;
  gap: 0 !important;
  align-items: initial !important;
}


/* Mobile */
@media (max-width: 720px) {

  .urta-page .urta-section-heading,
  .urta-page .urta-trust-heading,
  .urta-page .urta-signals-heading,
  .urta-page .urta-access-heading,
  .urta-page .urta-faq-heading {
    max-width: 100% !important;
  }

  .urta-page .urta-section-heading h2,
  .urta-page .urta-trust-heading h2,
  .urta-page .urta-signals-heading h2,
  .urta-page .urta-access-heading h2,
  .urta-page .urta-faq-heading h2 {
    max-width: 100% !important;

    font-size: clamp(2.8rem, 13vw, 4.35rem) !important;
    line-height: .94 !important;
  }

  .urta-page .urta-section-heading > p:last-child,
  .urta-page .urta-trust-heading > p:last-child,
  .urta-page .urta-signals-heading > p:last-child,
  .urta-page .urta-access-heading > p:last-child,
  .urta-page .urta-faq-heading > p:last-child {
    max-width: 100% !important;

    margin-top: 20px !important;

    font-size: 1rem !important;
    font-weight: 400 !important;
  }

}

/* =========================================================
   GLOBAL SECTION TITLE ALIGNMENT
   Match "Designed around difficult communication"
   ========================================================= */

/* Use the FEATURES section's left edge as the reference */

.urta-page .urta-how,
.urta-page .urta-features,
.urta-page .urta-trust,
.urta-page .urta-signals,
.urta-page .urta-access,
.urta-page .urta-faq,
.urta-page .urta-showcase {
  width: min(1120px, calc(100% - 40px)) !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* Every heading block begins at the same exact left edge */

.urta-page .urta-section-heading,
.urta-page .urta-trust-heading,
.urta-page .urta-signals-heading,
.urta-page .urta-access-heading,
.urta-page .urta-faq-heading {
  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  transform: none !important;
  translate: none !important;

  text-align: left !important;
}


/* Titles themselves — absolutely no extra indentation */

.urta-page .urta-section-heading h2,
.urta-page .urta-trust-heading h2,
.urta-page .urta-signals-heading h2,
.urta-page .urta-access-heading h2,
.urta-page .urta-faq-heading h2 {
  margin-left: 0 !important;
  padding-left: 0 !important;

  transform: none !important;
  translate: none !important;
}


/* Labels / kickers also line up */

.urta-page .urta-section-heading .urta-kicker,
.urta-page .urta-trust-heading .urta-kicker,
.urta-page .urta-signals-heading .urta-kicker,
.urta-page .urta-access-heading .urta-kicker,
.urta-page .urta-faq-heading .urta-kicker {
  margin-left: 0 !important;
  padding-left: 0 !important;
}


/* Paragraphs underneath start from the same edge too */

.urta-page .urta-section-heading > p:last-child,
.urta-page .urta-trust-heading > p:last-child,
.urta-page .urta-signals-heading > p:last-child,
.urta-page .urta-access-heading > p:last-child,
.urta-page .urta-faq-heading > p:last-child {
  margin-left: 0 !important;
  padding-left: 0 !important;
}


/* MOBILE — same shared indentation */
@media (max-width: 720px) {

  .urta-page .urta-how,
  .urta-page .urta-features,
  .urta-page .urta-trust,
  .urta-page .urta-signals,
  .urta-page .urta-access,
  .urta-page .urta-faq,
  .urta-page .urta-showcase {
    width: calc(100% - 32px) !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }

}

/* =========================================================
   EARLY ACCESS — MATCH FINAL CTA GLASS BACKGROUND
   ========================================================= */

   .urta-page .urta-access-card {
    border:
      1px solid
      rgba(255,255,255,.82) !important;
  
    background:
      radial-gradient(
        circle at 12% 90%,
        rgba(255,174,134,.42),
        transparent 34%
      ),
  
      radial-gradient(
        circle at 82% 15%,
        rgba(181,191,255,.45),
        transparent 32%
      ),
  
      rgba(255,255,255,.55) !important;
  
    box-shadow:
      var(--urta-shadow),
      inset 0 1px 0
      rgba(255,255,255,.85) !important;
  
    -webkit-backdrop-filter:
      blur(25px) !important;
  
    backdrop-filter:
      blur(25px) !important;
  }
  
  
  /* remove the old Early Access ambient overlays */
  .urta-page .urta-access-card::before,
  .urta-page .urta-access-card::after {
    display: none !important;
  }

  /* EARLY ACCESS — same glass + same rounded corners as final CTA */

.urta-page .urta-access-card {
  overflow: hidden !important;

  border:
    1px solid
    rgba(255,255,255,.82) !important;

  border-radius: 36px !important;

  background:
    radial-gradient(
      circle at 12% 90%,
      rgba(255,174,134,.42),
      transparent 34%
    ),

    radial-gradient(
      circle at 82% 15%,
      rgba(181,191,255,.45),
      transparent 32%
    ),

    rgba(255,255,255,.55) !important;

  box-shadow:
    var(--urta-shadow),
    inset 0 1px 0 rgba(255,255,255,.85) !important;

  -webkit-backdrop-filter: blur(25px) !important;
  backdrop-filter: blur(25px) !important;
}


/* remove old Early Access decorative overlays */
.urta-page .urta-access-card::before,
.urta-page .urta-access-card::after {
  display: none !important;
}

/* =========================================================
   SECTION HEADING INDENTATION
   ========================================================= */

   .urta-page {
    --section-heading-indent: 48px;
  }
  .urta-showcase-title h2 {
    --section-heading-indent: 48px;
  }
  
  
  /* move titles + their paragraphs inward together */
  .urta-page .urta-section-heading,
  .urta-page .urta-trust-heading,
  .urta-page .urta-signals-heading,
  .urta-page .urta-access-heading,
  .urta-showcase-title h2,
  .urta-page .urta-faq-heading {
    padding-left: var(--section-heading-indent) !important;
    padding-right: var(--section-heading-indent) !important;
  }
  
  
  /* make sure title and paragraph share the exact same start */
  .urta-page .urta-section-heading h2,
  .urta-page .urta-trust-heading h2,
  .urta-page .urta-signals-heading h2,
  .urta-page .urta-access-heading h2,
  .urta-page .urta-faq-heading h2,
  .urta-showcase-title h2,
  
  .urta-page .urta-section-heading > p:last-child,
  .urta-page .urta-trust-heading > p:last-child,
  .urta-page .urta-signals-heading > p:last-child,
  .urta-page .urta-access-heading > p:last-child,
  .urta-page .urta-faq-heading > p:last-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* make "See Urta in action" use the same indentation */

.urta-page .urta-showcase-heading {
  padding-left: var(--section-heading-indent) !important;
  padding-right: var(--section-heading-indent) !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  width: 100% !important;
  max-width: none !important;
}


/* title + paragraph start from same exact line */

.urta-page .urta-showcase-heading h2,
.urta-page .urta-showcase-heading > p:last-child {
  margin-left: 0 !important;
  padding-left: 0 !important;
}




/* CONTEXT SIGNALS — soft luminous pastels matched to the Urta UI */
.urta-page .urta-mood-chip {
  background: rgba(255,255,255,.79);
  border: 1px solid rgba(255,255,255,.94);
  color: #5b5865;
  box-shadow: 0 5px 16px rgba(100,84,123,.035), inset 0 1px 0 rgba(255,255,255,.96);
}
.urta-page .urta-mood-chip i {
  width: 11px;
  height: 11px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.75), 0 0 0 3px rgba(255,255,255,.85);
}
.urta-page .mood-caring i { background: #f4a7c9; }
.urta-page .mood-calm i { background: #c5fca2; }
.urta-page .mood-neutral i { background: #c7c3d7; }
.urta-page .mood-upset i { background: #c5a8f4; }
.urta-page .mood-agitated i { background: #ffb08f; }

.urta-page .urta-warning-chip {
  background: rgba(255,255,255,.77);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 7px 20px rgba(104,77,102,.035), inset 0 1px 0 #fff;
}
/* Translucent coral glass warning icon: same rounded 3D shape, less saturated */
.urta-page .urta-warning-symbol {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22tube%22%20x1%3D%22.12%22%20y1%3D%22.08%22%20x2%3D%22.87%22%20y2%3D%22.92%22%3E%3Cstop%20stop-color%3D%22%23f8b2a8%22%20stop-opacity%3D%22.83%22%2F%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%23f4a198%22%20stop-opacity%3D%22.83%22%2F%3E%3Cstop%20offset%3D%22.52%22%20stop-color%3D%22%23f29b93%22%20stop-opacity%3D%22.73%22%2F%3E%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22%23ed948d%22%20stop-opacity%3D%22.77%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f7aca3%22%20stop-opacity%3D%22.82%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22mark%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23f6afa6%22%20stop-opacity%3D%22.9%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%23f2a097%22%20stop-opacity%3D%22.82%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ee968e%22%20stop-opacity%3D%22.85%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M35.4%2012.5%20Q40%204.7%2044.6%2012.5%20L72.2%2060.5%20Q76.8%2069%2067.1%2069%20H12.9%20Q3.2%2069%207.8%2060.5%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23f1a39a%22%20stroke-opacity%3D%22.2%22%20stroke-width%3D%2212%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M35.4%2012.5%20Q40%204.7%2044.6%2012.5%20L72.2%2060.5%20Q76.8%2069%2067.1%2069%20H12.9%20Q3.2%2069%207.8%2060.5%20Z%22%20fill%3D%22none%22%20stroke%3D%22url%28%23tube%29%22%20stroke-width%3D%2210%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M35.4%2012.5%20Q40%204.7%2044.6%2012.5%20L72.2%2060.5%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-opacity%3D%22.68%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13.7%2065.3%20H66.3%22%20fill%3D%22none%22%20stroke%3D%22%23fff9f6%22%20stroke-opacity%3D%22.58%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M35.9%2030.5%20Q35.7%2026.9%2040%2026.9%20Q44.3%2026.9%2044.1%2030.5%20L42.8%2047%20Q42.5%2050.5%2040%2050.5%20Q37.5%2050.5%2037.2%2047%20Z%22%20fill%3D%22url%28%23mark%29%22%2F%3E%3Cpath%20d%3D%22M37.2%2030.8%20Q37.5%2028.6%2039.2%2028.4%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-opacity%3D%22.75%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2258%22%20r%3D%224.1%22%20fill%3D%22url%28%23mark%29%22%2F%3E%3Ccircle%20cx%3D%2238.8%22%20cy%3D%2256.8%22%20r%3D%221.15%22%20fill%3D%22white%22%20fill-opacity%3D%22.65%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  color: transparent;
  font-size: 0;
  box-shadow: none;
}
.urta-page .urta-warning-chip strong { color: #47414d; }
.urta-page .urta-warning-chip small { color: #898390; }

.urta-page .urta-warning-symbol {
  width: 20px;
  height: 20px;
}
.urta-page .urta-warning-chip {
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 9px;
}

.urta-signals-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.urta-signals-layout > * {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Center the white components inside each panel */

.urta-page .urta-mood-spectrum {
  justify-content: center;
}

.urta-page .urta-warning-list {
  justify-items: center;
}

.urta-page .urta-warning-chip {
  width: min(100%, 360px);
}

.urta-page .urta-mood-spectrum {
  gap: 22px;
}

.urta-page .urta-warning-list {
  gap: 20px;
}

/* Early Access — softer bullet colors */
.urta-page .urta-access-features li::before {
  background: #c5fca2 !important;
  border-color: #c5fca2 !important;
}

.urta-page .urta-access-features li {
  background: #c5fca2 !important;
  border-color: #c5fca2 !important;
}

.urta-page .urta-signals-layout {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(20px);
}

.urta-page .urta-signal-panel {
  width: 100%;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.urta-page .urta-signal-panel-mood {
  padding-bottom: 32px;
  border-bottom: 0px solid rgba(40, 40, 50, 0.1) !important;
}

.urta-page .urta-signal-panel-warning {
  padding-top: 32px;
}

.urta-page .urta-signals-layout .urta-signal-panel {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.urta-page .urta-signals-layout {
  padding: 12px 18px !important;
}

.urta-page .urta-signal-panel-mood {
  padding-bottom: 12px !important;
}

.urta-page .urta-signal-panel-warning {
  padding-top: 12px !important;
}

.urta-page .urta-signals-layout {
  padding: 18px 24px !important;
  gap: 12px !important;
}

.urta-page .urta-signals-layout .urta-signal-panel {
  padding: 8px 0 !important;
  min-height: 0 !important;
}

.urta-page .urta-signals-layout .urta-signal-panel h3 {
  margin-top: 16px !important;
}

.urta-page .urta-signals-layout .urta-mood-spectrum {
  margin-top: 16px !important;
}

@media (min-width: 721px) {
  .urta-page .urta-signals-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    padding: 24px !important;
    align-items: start;
  }

  .urta-page .urta-signals-layout .urta-signal-panel {
    padding: 0 !important;
  }
}

.urta-page .urta-signals-layout {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding: 12px 20px !important;
}

.urta-page .urta-signals-layout .urta-signal-panel {
  min-height: 0 !important;
  padding: 4px 0 !important;
  margin: 0 !important;
}

.urta-page .urta-signals-layout .urta-signal-panel h3 {
  margin: 6px 0 10px !important;
}

.urta-page .urta-signal-panel-mood {
  padding-bottom: 8px !important;
}

.urta-page .urta-signal-panel-warning {
  padding-top: 8px !important;
}

.urta-page .urta-signals-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 16px 20px !important;
  justify-items: center;
}

.urta-page .urta-signals-layout .urta-signal-panel {
  width: 100% !important;
  max-width: 650px !important;
  min-height: 0 !important;
  padding: 6px 0 !important;
  margin: 0 !important;
}

.urta-page .urta-signals-layout {
  width: min(100%, 760px) !important;
  margin-inline: auto !important;
  grid-template-columns: 1fr !important;
  padding: 20px 24px !important;
  gap: 12px !important;
}

/* Outer component: balanced spacing */
.urta-page .urta-signals-layout {
  padding: 30px 28px 34px !important;
  gap: 26px !important;
}

/* Keep both sections aligned */
.urta-page .urta-signals-layout .urta-signal-panel {
  width: 100% !important;
  max-width: 650px !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* Smaller titles */
.urta-page .urta-signals-layout .urta-signal-panel h3 {
  font-size: clamp(1.65rem, 2.5vw, 2.2rem) !important;
  line-height: 1.12 !important;
  margin: 10px 0 12px !important;
}

/* Description text */
.urta-page .urta-signals-layout .urta-signal-panel > p {
  margin: 0 0 18px !important;
  line-height: 1.55 !important;
}

/* Mood labels: more visible against white */
.urta-page .urta-signals-layout .urta-mood-chip {
  box-shadow:
    0 5px 18px rgba(55, 48, 70, 0.11),
    0 1px 4px rgba(55, 48, 70, 0.05) !important;
}

/* Warning labels: same subtle shadow */
.urta-page .urta-signals-layout .urta-warning-chip {
  box-shadow:
    0 5px 18px rgba(55, 48, 70, 0.09),
    0 1px 4px rgba(55, 48, 70, 0.04) !important;
}

.urta-page .urta-signals-intro {
  width: min(100%, 760px);
  margin-inline: auto;
}


/* Align heading and description with the card */
.urta-page .urta-signals-heading {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin-inline: auto !important;
}

/* One compact, vertically stacked card */
.urta-page .urta-signals-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  height: auto !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: 26px 30px 30px !important;
  gap: 28px !important;
  box-sizing: border-box;
}

/* Remove remaining inner spacing */
.urta-page .urta-signals-layout > .urta-signal-panel {
  width: 100% !important;
  max-width: 650px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Smaller section titles */
.urta-page .urta-signals-layout .urta-signal-panel h3 {
  font-size: 1.85rem !important;
  line-height: 1.12 !important;
  margin: 10px 0 12px !important;
}

/* Description spacing */
.urta-page .urta-signals-layout .urta-signal-description {
  margin: 0 0 16px !important;
}

/* Remove excessive space above labels */
.urta-page .urta-signals-layout .urta-mood-spectrum {
  margin-top: 14px !important;
}

/* More visible labels on white */
.urta-page .urta-signals-layout .urta-mood-chip,
.urta-page .urta-signals-layout .urta-warning-chip {
  box-shadow:
    0 5px 18px rgba(45, 40, 60, 0.15),
    0 1px 4px rgba(45, 40, 60, 0.07) !important;
}

@media (max-width: 720px) {
  .urta-page .urta-signals-layout {
    padding: 22px 18px 26px !important;
    gap: 24px !important;
  }

  .urta-page .urta-signals-layout .urta-signal-panel h3 {
    font-size: 1.65rem !important;
  }
}


.urta-page .urta-signals .urta-signals-heading {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
}

.urta-page .urta-signals .urta-signals-layout {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  grid-template-columns: 1fr !important;
  padding: 22px 28px !important;
  gap: 18px !important;
  margin: 0 auto !important;
}

.urta-page .urta-signals .urta-signals-layout > .urta-signal-panel {
  padding: 0 !important;
  margin: 0 auto !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.urta-page #context-signals .urta-signals-layout {
  display: flex !important;
  flex-direction: column !important;
  width: min(100%, 760px) !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  margin: 0 auto !important;
}

.urta-page #context-signals .urta-signals-layout > article {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.urta-page #context-signals .urta-signal-panel h3 {
  margin: 4px 0 8px !important;
}

.urta-page #context-signals .urta-mood-spectrum {
  margin-top: 8px !important;
}

/* Align the heading with the card */
.urta-page #context-signals .urta-signals-heading {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  display: block !important;
}

/* Compact single container */
.urta-page #context-signals .urta-signals-layout {
  width: min(100%, 760px) !important;
  padding: 20px 24px !important;
  gap: 16px !important;
}

/* Center content within both stacked sections */
.urta-page #context-signals .urta-signal-panel {
  align-items: center !important;
  text-align: center !important;
}

.urta-page #context-signals .urta-signal-panel-header {
  justify-content: center !important;
}

.urta-page #context-signals .urta-signal-panel > p {
  margin-bottom: 12px !important;
}

.urta-page #context-signals .urta-warning-list {
  margin-top: 12px !important;
  gap: 12px !important;
}

.urta-page .urta-signals-note {
  width: min(100%, 760px) !important;
  margin: 24px auto 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box;
}



/* Top and bottom padding of the rounded container */
.urta-page #context-signals .urta-signals-layout {
  padding: 45px 18px 40px !important;
  gap: 70px !important;
}

/* Remove competing spacing from the inner sections */
.urta-page #context-signals .urta-signal-panel-mood,
.urta-page #context-signals .urta-signal-panel-warning {
  padding: 0 !important;
  margin: 0 !important;
}



/* Center the text below the container */
.urta-page #context-signals .urta-signals-note {
  text-align: center !important;
}

/* Larger gaps between titles and descriptions */
.urta-page #context-signals .urta-signal-panel h3 {
  margin-bottom: 22px !important;
}

/* Right-align warning labels instead of centering them */
.urta-page #context-signals .urta-warning-list {
  justify-items: end !important;
}

.urta-page #context-signals .urta-warning-chip {
  text-align: left !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.urta-page #context-signals .urta-signals-layout {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.urta-page #context-signals .urta-signals-layout > .urta-signal-panel {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* =========================================
   MOBILE — SECTION SPACING & SCREENSHOTS
   ========================================= */

   @media (max-width: 720px) {

    /* 1. Reduce side padding for section headings
       and their descriptions */
    .urta-page {
      --section-heading-indent: 8px;
    }
  
    .urta-page .urta-section-heading,
    .urta-page .urta-trust-heading,
    .urta-page .urta-signals-heading,
    .urta-page #context-signals .urta-section-heading,
    .urta-page .urta-access-heading,
    .urta-page .urta-faq-heading,
    .urta-page .urta-showcase-heading {
      padding-left: 8px !important;
      padding-right: 8px !important;
      box-sizing: border-box !important;
    }
  
    /* 2. Let descriptions use the available width */
    .urta-page .urta-section-heading > p,
    .urta-page .urta-showcase-heading > p,
    .urta-page .urta-access-heading > p,
    .urta-page .urta-trust-heading > p,
    .urta-page .urta-faq-heading > p {
      width: 100% !important;
      max-width: 100% !important;
    }
  
    /* 3. Hide screenshot navigation arrows */
    .urta-page .urta-showcase-arrow {
      display: none !important;
    }
  
    /* 4. Minimize screenshot gallery side spacing */
    .urta-page .urta-showcase-carousel {
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 2px !important;
      padding-right: 2px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      box-sizing: border-box !important;
    }
  }

  /* How it works — square inner windows only */
.urta-page .urta-steps .urta-step-visual,
.urta-page .urta-steps .urta-abstraction-demo,
.urta-page .urta-steps .urta-text-transform {
  border-radius: 0 !important;
}
/* How it works — more space above inner windows */
.urta-page .urta-steps > .urta-step {
  padding-top: 38px !important;
}

/* How it works — extra top spacing without clipping text */
.urta-page .urta-steps > .urta-step {
  padding-top: 42px !important;
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 500px !important;
  overflow: hidden;
  grid-template-rows: auto minmax(0, auto) auto !important;
}

.urta-page .urta-step-boundaries .urta-abstraction-demo {
  height: 300px !important;
  min-height: 0 !important;
}

.urta-page .urta-steps .urta-step-visual,
.urta-page .urta-steps .urta-text-transform {
  height: 300px !important;
  min-height: 0 !important;
}