:root {
      --color-primary: #B85235;
      --color-primary-hover: #9e4329;
      --color-bg: #F4F1EA;
      --color-card-bg: #FFFFFF;
      --color-sage: #98BBA2;
      --color-sage-light: #E7EFE9;
      --color-blue: #A2B9CE;
      --color-blue-light: #EBF1F6;
      --color-dark: #2A2725;
      --color-muted: #6B655F;
      --color-border: #E0DAD0;
      
      --font-heading: 'Playfair Display', Georgia, serif;
      --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      
      --header-height: 76px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--header-height);
      background-color: var(--color-bg);
      color: var(--color-dark);
      font-family: var(--font-body);
      line-height: 1.6;
    }

    body {
      padding-top: var(--header-height);
      background-color: var(--color-bg);
      background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
      background-size: 28px 28px;
      background-attachment: fixed;
    }

    /* Header */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--header-height);
      background: rgba(244, 241, 234, 0.94);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--color-border);
      z-index: 300;
      display: flex;
      align-items: center;
    }

    .header-container {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand-group {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      text-decoration: none;
      color: var(--color-dark);
    }

    .brand-logo {
      height: 42px;
      width: 42px;
      border-radius: 6px;
      object-fit: cover;
    }

    .brand-title {
      font-family: var(--font-heading);
      font-size: 1.4rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--color-dark);
    }

    .site-nav {
      display: flex;
      align-items: center;
      gap: 2rem;
    }

    .site-nav a {
      text-decoration: none;
      color: var(--color-dark);
      font-weight: 400;
      font-size: 0.95rem;
      transition: color 0.2s ease;
      position: relative;
    }

    .site-nav a:hover {
      color: var(--color-primary);
    }

    .header-cta-wrap {
      display: flex;
      align-items: center;
      gap: 0.9rem;
    }

    .parent-home-link {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.58rem 0.85rem;
      background: rgba(255, 255, 255, 0.55);
      border: 1px solid var(--color-border);
      border-radius: 4px;
      color: var(--color-dark);
      text-decoration: none;
      font-size: 0.84rem;
      font-weight: 700;
      letter-spacing: 0.015em;
      white-space: nowrap;
      transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    }

    .parent-home-link:hover {
      color: var(--color-primary);
      border-color: var(--color-primary);
      background: #FFFFFF;
      transform: translateY(-1px);
    }

    .parent-home-arrow {
      font-size: 1rem;
      line-height: 1;
      transition: transform 0.2s ease;
    }

    .parent-home-link:hover .parent-home-arrow {
      transform: translateX(-2px);
    }

    /* Standard Placeholder CTA Styling */
    .cta-placeholder-btn {
      display: inline-block;
      padding: 0.65rem 1.35rem;
      background-color: var(--color-primary);
      color: #FFFFFF;
      text-decoration: none;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 0.9rem;
      border-radius: 4px;
      border: 1px dashed #FFFFFF;
      outline: 2px solid var(--color-primary);
      transition: background-color 0.2s ease, transform 0.2s ease;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .cta-placeholder-btn:hover {
      background-color: var(--color-primary-hover);
      transform: translateY(-1px);
    }

    /* Layout Sections */
    section {
      padding: 5rem 2rem;
      position: relative;
    }

    .section-inner {
      max-width: 1240px;
      margin: 0 auto;
    }

    .section-label {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-weight: 700;
      color: var(--color-primary);
      margin-bottom: 0.75rem;
      background-color: rgba(184, 82, 53, 0.08);
      padding: 0.25rem 0.75rem;
      border-radius: 20px;
      border: 1px dashed var(--color-primary);
    }

    .section-title {
      font-family: var(--font-heading);
      font-size: 2.5rem;
      line-height: 1.25;
      font-weight: 700;
      color: var(--color-dark);
      margin-bottom: 1.25rem;
    }

    .section-subtitle {
      font-size: 1.15rem;
      color: var(--color-muted);
      max-width: 720px;
      margin-bottom: 3rem;
    }

    /* Parallax Section Dividers */
    .parallax-divider {
      position: relative;
      min-height: 320px;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 4.5rem 2rem;
      box-shadow: inset 0 12px 24px rgba(0, 0, 0, 0.18), inset 0 -12px 24px rgba(0, 0, 0, 0.18);
      border-top: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
    }

    .parallax-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(42, 39, 37, 0.75) 0%, rgba(28, 25, 23, 0.65) 100%);
      backdrop-filter: blur(2px);
      z-index: 1;
    }

    .parallax-content {
      position: relative;
      z-index: 2;
      max-width: 820px;
      color: #FFFFFF;
    }

    .parallax-badge {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-weight: 700;
      color: var(--color-sage-light);
      background-color: rgba(152, 187, 162, 0.2);
      border: 1px dashed var(--color-sage);
      padding: 0.3rem 0.85rem;
      border-radius: 20px;
      margin-bottom: 1rem;
    }

    .parallax-quote {
      font-family: var(--font-heading);
      font-size: 2.1rem;
      line-height: 1.3;
      font-weight: 600;
      font-style: italic;
      color: #F8F6F1;
      margin-bottom: 0.85rem;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    .parallax-subtext {
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 400;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-blue-light);
      opacity: 0.9;
    }

    /* Hero Section */
    .hero-section {
      padding: 4rem 2rem 5rem 2rem;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 3.5rem;
      align-items: center;
    }

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.85rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-primary);
      margin-bottom: 1.25rem;
    }

    .hero-tag-dot {
      width: 8px;
      height: 8px;
      background-color: var(--color-primary);
      border-radius: 50%;
    }

    .hero-headline {
      font-family: var(--font-heading);
      font-size: 3.1rem;
      line-height: 1.18;
      font-weight: 700;
      color: var(--color-dark);
      margin-bottom: 1.5rem;
      letter-spacing: -0.01em;
    }

    .hero-lead {
      font-size: 1.2rem;
      color: var(--color-muted);
      margin-bottom: 2.2rem;
      line-height: 1.65;
    }

    .hero-values-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 2rem;
    }

    .value-pill {
      background-color: var(--color-card-bg);
      border: 1px solid var(--color-border);
      padding: 0.4rem 0.9rem;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--color-dark);
      box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }

    /* Animated Infographic Component */
    .hero-infographic-card {
      background: var(--color-card-bg);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      box-shadow: 0 20px 45px rgba(42, 39, 37, 0.12);
      position: relative;
    }

    .infographic-window-bar {
      background: #EBE6DC;
      border-bottom: 1px solid var(--color-border);
      padding: 0.6rem 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 11px 11px 0 0;
    }

    .window-dots {
      display: flex;
      gap: 6px;
    }

    .window-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
    }
    .window-dot.red { background-color: #E56B55; }
    .window-dot.yellow { background-color: #E2B048; }
    .window-dot.green { background-color: #78B182; }

    .window-title {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--color-muted);
      text-transform: uppercase;
    }

    .window-badge {
      font-size: 0.65rem;
      font-weight: 700;
      background: rgba(184, 82, 53, 0.12);
      color: var(--color-primary);
      padding: 0.15rem 0.5rem;
      border-radius: 10px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* App Stage Area */
    .infographic-stage {
      position: relative;
      height: 440px;
      background: #F8F6F1;
      display: flex;
      overflow: hidden;
    }

    /* Dragged Paragraph Clip (Draft -> Canvas) */
    .dragged-paragraph-clip {
      position: absolute;
      width: 155px;
      background: #FFFFFF;
      border: 1.5px solid var(--color-primary);
      border-radius: 6px;
      padding: 6px 8px;
      box-shadow: 0 10px 25px rgba(184, 82, 53, 0.3);
      z-index: 60;
      pointer-events: none;
      opacity: 0;
      animation: dragParagraphToCanvas 14s infinite cubic-bezier(0.25, 1, 0.5, 1);
    }

    .dragged-paragraph-clip .drag-cursor {
      position: absolute;
      bottom: -10px;
      right: -8px;
      color: var(--color-dark);
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
    }

    @keyframes dragParagraphToCanvas {
      0%, 19% {
        opacity: 0;
        top: 75px;
        left: calc(55% + 20px);
        transform: scale(0.95);
      }
      22% {
        opacity: 0.95;
        top: 75px;
        left: calc(55% + 20px);
        transform: scale(1.02) translateY(-3px);
        box-shadow: 0 12px 28px rgba(184, 82, 53, 0.35);
      }
      28% {
        opacity: 1;
        top: 85px;
        left: calc(30% + 10px);
        transform: scale(1.04) rotate(-3deg);
      }
      34% {
        opacity: 1;
        top: 45px;
        left: calc(10% + 10px);
        transform: scale(1) rotate(0deg);
      }
      36% {
        opacity: 0;
        top: 45px;
        left: calc(10% + 10px);
        transform: scale(0.9);
      }
      37%, 100% {
        opacity: 0;
      }
    }

    /* 5 Scattered Documents Layer */
    .scattered-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 30;
    }

    .scat-doc {
      position: absolute;
      width: 95px;
      height: 125px;
      background: #FFFFFF;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      padding: 8px;
      box-shadow: 0 10px 22px rgba(0,0,0,0.1);
      animation: scatFlowIn 14s infinite cubic-bezier(0.4, 0, 0.2, 1);
    }

    .scat-doc-tab {
      height: 6px;
      border-radius: 3px;
      margin-bottom: 8px;
      width: 60%;
    }

    .scat-line {
      height: 4px;
      background: #E8E3D9;
      border-radius: 2px;
      margin-bottom: 6px;
    }
    .scat-line.short { width: 50%; }
    .scat-line.med { width: 75%; }
    .scat-line.long { width: 90%; }

    /* Positions and Delays for 5 Scattered Docs */
    .scat-doc-1 {
      top: -15px;
      left: 15px;
      transform: rotate(-18deg);
      animation-delay: 0s;
    }
    .scat-doc-1 .scat-doc-tab { background-color: var(--color-primary); }

    .scat-doc-2 {
      top: 50px;
      left: -25px;
      transform: rotate(22deg);
      animation-delay: 0.1s;
    }
    .scat-doc-2 .scat-doc-tab { background-color: var(--color-sage); }

    .scat-doc-3 {
      bottom: 25px;
      left: 10px;
      transform: rotate(-12deg);
      animation-delay: 0.2s;
    }
    .scat-doc-3 .scat-doc-tab { background-color: var(--color-blue); }

    .scat-doc-4 {
      top: 15px;
      left: 160px;
      transform: rotate(15deg);
      animation-delay: 0.15s;
    }
    .scat-doc-4 .scat-doc-tab { background-color: #5C554E; }

    .scat-doc-5 {
      bottom: 35px;
      left: 150px;
      transform: rotate(-25deg);
      animation-delay: 0.25s;
    }
    .scat-doc-5 .scat-doc-tab { background-color: #D98A5B; }

    @keyframes scatFlowIn {
      0%, 11% {
        opacity: 1;
      }
      19% {
        top: 8px;
        left: calc(55% + 15px);
        transform: rotate(0deg) scale(0.65);
        opacity: 0.9;
      }
      22%, 92% {
        opacity: 0;
        transform: rotate(0deg) scale(0.6);
        left: calc(55% + 15px);
      }
      96%, 100% {
        opacity: 0;
      }
    }

    /* Left Half: Canvas Area */
    .stage-left-canvas {
      width: 55%;
      height: 100%;
      border-right: 1px solid var(--color-border);
      position: relative;
      background-color: #FAF8F5;
      background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
      background-size: 16px 16px;
      padding: 12px;
    }

    .canvas-status-tag {
      position: absolute;
      top: 10px;
      left: 12px;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-muted);
      background: rgba(255, 255, 255, 0.85);
      padding: 2px 8px;
      border-radius: 4px;
      border: 1px solid var(--color-border);
      z-index: 5;
    }

    /* Text Stream Lines flowing into Canvas */
    .stream-lines-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 15;
    }

    .stream-line {
      position: absolute;
      height: 3px;
      border-radius: 2px;
      opacity: 0;
      animation: streamFlow 14s infinite ease-in-out;
    }

    .stream-line-1 {
      top: 120px;
      right: -20px;
      width: 140px;
      background: linear-gradient(to left, var(--color-primary), transparent);
      animation-delay: 4.2s;
    }

    .stream-line-2 {
      top: 180px;
      right: -20px;
      width: 160px;
      background: linear-gradient(to left, var(--color-sage), transparent);
      animation-delay: 4.5s;
    }

    .stream-line-3 {
      top: 250px;
      right: -20px;
      width: 130px;
      background: linear-gradient(to left, var(--color-blue), transparent);
      animation-delay: 4.8s;
    }

    .stream-line-4 {
      top: 310px;
      right: -20px;
      width: 150px;
      background: linear-gradient(to left, #5C554E, transparent);
      animation-delay: 5.1s;
    }

    @keyframes streamFlow {
      0%, 28% {
        opacity: 0;
        transform: translateX(0);
      }
      30% {
        opacity: 1;
        transform: translateX(-30px);
      }
      42% {
        opacity: 1;
        transform: translateX(-150px);
      }
      48%, 100% {
        opacity: 0;
        transform: translateX(-220px);
      }
    }

    /* Blank Canvas Indicator */
    .canvas-blank-notice {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #B5AFA6;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      border: 1px dashed #D6D0C4;
      padding: 12px 18px;
      border-radius: 8px;
      animation: blankNoticeFade 14s infinite;
    }

    @keyframes blankNoticeFade {
      0%, 30% {
        opacity: 1;
      }
      38%, 92% {
        opacity: 0;
      }
      98%, 100% {
        opacity: 1;
      }
    }

    /* 4 Canvas Cards Item Lifecycle: Form -> Move -> Stack into Single Document */
    .canvas-cards-container {
      position: absolute;
      inset: 32px 12px 12px 12px;
    }

    .canvas-card-item {
      position: absolute;
      background: #FFFFFF;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
      animation-duration: 14s;
      animation-iteration-count: infinite;
      animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    }

    .card-title-bar {
      height: 22px;
      padding: 0 8px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.62rem;
      font-weight: 700;
      color: #FFFFFF;
    }

    .card-title-bar.tb-1 { background-color: var(--color-primary); }
    .card-title-bar.tb-2 { background-color: var(--color-sage); color: #2C4733; }
    .card-title-bar.tb-3 { background-color: var(--color-blue); color: #233D54; }
    .card-title-bar.tb-4 { background-color: #5C554E; }

    .card-title-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255,255,255,0.8);
    }

    .card-body-lines {
      padding: 8px;
    }

    .card-body-lines .c-line {
      height: 4px;
      background: #EEEBE3;
      border-radius: 2px;
      margin-bottom: 5px;
    }
    .card-body-lines .c-line.w100 { width: 100%; }
    .card-body-lines .c-line.w80 { width: 80%; }
    .card-body-lines .c-line.w60 { width: 60%; }

    /* Card 1 Animation */
    .c-item-1 { animation-name: card1Anim; }
    @keyframes card1Anim {
      0%, 35% {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
        top: 10px; left: 10px; width: calc(50% - 15px); height: 80px;
      }
      40%, 58% {
        opacity: 1;
        transform: scale(1) translateY(0);
        top: 10px; left: 10px; width: calc(50% - 15px); height: 80px;
      }
      66%, 90% {
        opacity: 1;
        transform: scale(1) translateY(0);
        top: 10px; left: 15px; width: calc(100% - 30px); height: 75px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      }
      95%, 100% { opacity: 0; }
    }

    /* Card 2 Animation */
    .c-item-2 { animation-name: card2Anim; }
    @keyframes card2Anim {
      0%, 37% {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
        top: 10px; left: calc(50% + 5px); width: calc(50% - 15px); height: 80px;
      }
      42%, 58% {
        opacity: 1;
        transform: scale(1) translateY(0);
        top: 10px; left: calc(50% + 5px); width: calc(50% - 15px); height: 80px;
      }
      66%, 90% {
        opacity: 1;
        transform: scale(1) translateY(0);
        top: 90px; left: 15px; width: calc(100% - 30px); height: 75px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      }
      95%, 100% { opacity: 0; }
    }

    /* Card 3 Animation */
    .c-item-3 { animation-name: card3Anim; }
    @keyframes card3Anim {
      0%, 39% {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
        top: 105px; left: 10px; width: calc(50% - 15px); height: 80px;
      }
      44%, 58% {
        opacity: 1;
        transform: scale(1) translateY(0);
        top: 105px; left: 10px; width: calc(50% - 15px); height: 80px;
      }
      66%, 90% {
        opacity: 1;
        transform: scale(1) translateY(0);
        top: 170px; left: 15px; width: calc(100% - 30px); height: 75px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      }
      95%, 100% { opacity: 0; }
    }

    /* Card 4 Animation */
    .c-item-4 { animation-name: card4Anim; }
    @keyframes card4Anim {
      0%, 41% {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
        top: 105px; left: calc(50% + 5px); width: calc(50% - 15px); height: 80px;
      }
      46%, 58% {
        opacity: 1;
        transform: scale(1) translateY(0);
        top: 105px; left: calc(50% + 5px); width: calc(50% - 15px); height: 80px;
      }
      66%, 90% {
        opacity: 1;
        transform: scale(1) translateY(0);
        top: 250px; left: 15px; width: calc(100% - 30px); height: 75px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      }
      95%, 100% { opacity: 0; }
    }

    /* Stacked Document Outline Highlight Frame */
    .stacked-doc-frame {
      position: absolute;
      top: 5px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      border: 2px dashed var(--color-primary);
      border-radius: 8px;
      pointer-events: none;
      opacity: 0;
      animation: stackedFrameAnim 14s infinite;
    }

    .stacked-doc-badge {
      position: absolute;
      bottom: -12px;
      right: 15px;
      background: var(--color-primary);
      color: #FFFFFF;
      font-size: 0.65rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    @keyframes stackedFrameAnim {
      0%, 68% {
        opacity: 0;
        transform: scale(0.98);
      }
      72%, 90% {
        opacity: 1;
        transform: scale(1);
      }
      95%, 100% {
        opacity: 0;
      }
    }

    /* Right Half: Split Browser / Draft Pane with Top Tabs */
    .stage-right-pane {
      width: 45%;
      height: 100%;
      background: #FAF8F5;
      display: flex;
      flex-direction: column;
      border-left: 1px solid var(--color-border);
    }

    .right-pane-tabs-header {
      background: #E8E3D8;
      padding: 6px 6px 0 6px;
      border-bottom: 1px solid var(--color-border);
      display: flex;
      align-items: center;
      min-height: 29px;
    }

    .draft-tabs-bar {
      display: flex;
      gap: 3px;
      width: 100%;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .draft-tabs-bar::-webkit-scrollbar {
      display: none;
    }

    .draft-tab {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 5px 7px;
      background: #DCD6C9;
      border-radius: 5px 5px 0 0;
      border: 1px solid var(--color-border);
      border-bottom: none;
      font-size: 0.6rem;
      font-weight: 600;
      color: var(--color-muted);
      white-space: nowrap;
      flex: 1 1 0;
      min-width: 0;
      position: relative;
      transition: all 0.2s ease;
      opacity: 0;
      transform: translateY(-8px);
      animation: draftTabIn 14s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .draft-tab.dt-1 { animation-delay: 0.10s; }
    .draft-tab.dt-2 { animation-delay: 0.16s; }
    .draft-tab.dt-3 { animation-delay: 0.22s; }
    .draft-tab.dt-4 { animation-delay: 0.28s; }
    .draft-tab.dt-5 { animation-delay: 0.34s; }

    .draft-tab.active {
      background: #FFFFFF;
      color: var(--color-dark);
      font-weight: 700;
      border-color: var(--color-border);
    }

    .draft-tab.active::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background-color: var(--color-primary);
      border-radius: 5px 5px 0 0;
    }

    .tab-indicator-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .dot-terracotta { background-color: var(--color-primary); }
    .dot-sage { background-color: var(--color-sage); }
    .dot-blue { background-color: var(--color-blue); }
    .dot-dark { background-color: #5C554E; }
    .dot-amber { background-color: #D98A5B; }

    .tab-label-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @keyframes draftTabIn {
      0%, 13% {
        opacity: 0;
        transform: translateY(-8px);
      }
      20%, 90% {
        opacity: 1;
        transform: translateY(0);
      }
      95%, 100% {
        opacity: 0;
      }
    }

    .right-pane-doc-view {
      flex-grow: 1;
      background: #FFFFFF;
      padding: 10px;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .right-pane-doc-content {
      display: flex;
      flex-direction: column;
      gap: 8px;
      opacity: 0;
      animation: docViewIn 14s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    @keyframes docViewIn {
      0%, 13% {
        opacity: 0;
        transform: translateY(6px);
      }
      20%, 90% {
        opacity: 1;
        transform: translateY(0);
      }
      95%, 100% {
        opacity: 0;
        transform: translateY(6px);
      }
    }

    .doc-subbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--color-border);
    }

    .doc-url-path {
      font-family: monospace;
      font-size: 0.58rem;
      background: #F4F1EA;
      padding: 2px 6px;
      border-radius: 4px;
      color: #5C554E;
    }

    .doc-word-count {
      font-size: 0.6rem;
      font-weight: 700;
      color: var(--color-primary);
    }

    .doc-text-body {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .doc-text-paragraph {
      background: #FAFAFA;
      border: 1px solid var(--color-border);
      border-radius: 4px;
      padding: 6px 8px;
    }

    .doc-text-paragraph.highlighted {
      border-color: var(--color-primary);
      background: rgba(184, 82, 53, 0.04);
      animation: sourceParaPulse 14s infinite ease-in-out;
    }

    @keyframes sourceParaPulse {
      0%, 18% {
        border-color: var(--color-border);
        background: #FAFAFA;
      }
      20%, 35% {
        border-color: var(--color-primary);
        background: rgba(184, 82, 53, 0.08);
        box-shadow: 0 0 0 2px rgba(184, 82, 53, 0.15);
      }
      38%, 90% {
        border-color: var(--color-primary);
        background: rgba(184, 82, 53, 0.04);
        box-shadow: none;
      }
      95%, 100% {
        border-color: var(--color-border);
        background: #FAFAFA;
      }
    }

    .doc-para-label {
      font-size: 0.58rem;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .clip-badge {
      background: var(--color-primary);
      color: #FFFFFF;
      font-size: 0.52rem;
      padding: 1px 4px;
      border-radius: 3px;
      font-weight: 700;
    }

    .doc-line {
      height: 4px;
      background: #E2DDD3;
      border-radius: 2px;
      margin-bottom: 4px;
    }

    .doc-line:last-child {
      margin-bottom: 0;
    }

    .doc-line.w100 { width: 100%; }
    .doc-line.w85 { width: 85%; }
    .doc-line.w70 { width: 70%; }
    .doc-line.w50 { width: 50%; }

    .doc-line.highlight {
      background: var(--color-primary);
      opacity: 0.75;
    }

    /* Workflow Step Banner Legend below Infographic */
    .infographic-legend {
      background: #EDE8DF;
      border-top: 1px solid var(--color-border);
      padding: 0.85rem 1.25rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      border-radius: 0 0 11px 11px;
    }

    .legend-step {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.78rem;
      color: var(--color-dark);
      font-weight: 600;
    }

    .legend-step-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--color-primary);
      color: #FFFFFF;
      font-size: 0.7rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .legend-step-2 .legend-step-num { background: var(--color-sage); color: #2C4733; }
    .legend-step-3 .legend-step-num { background: var(--color-blue); color: #233D54; }

    /* Core Values Section */
    .values-section {
      background-color: #EDE8DF;
      border-top: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
    }

    .values-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }

    .value-card {
      background-color: var(--color-card-bg);
      padding: 2.5rem 2rem;
      border-radius: 8px;
      border: 1px solid var(--color-border);
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
      position: relative;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .value-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 24px rgba(0,0,0,0.06);
    }

    .value-card-number {
      font-family: var(--font-heading);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--color-primary);
      margin-bottom: 1rem;
      display: inline-block;
      border-bottom: 2px solid var(--color-sage);
      padding-bottom: 0.2rem;
    }

    .value-card-title {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
      color: var(--color-dark);
    }

    .value-card-desc {
      color: var(--color-muted);
      font-size: 0.98rem;
    }

    /* Interface Section */
    .interface-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 2rem;
      align-items: stretch;
    }

    .interface-card {
      background: var(--color-card-bg);
      border: 1px solid var(--color-border);
      border-radius: 10px;
      padding: 1.75rem;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 16px rgba(0,0,0,0.04);
      transition: transform 0.25s ease;
    }

    .interface-card:hover {
      transform: translateY(-4px);
    }

    .interface-card.col-7 {
      grid-column: span 7;
    }

    .interface-card.col-5 {
      grid-column: span 5;
    }

    .interface-card.col-12 {
      grid-column: span 12;
    }

    .card-header-badge {
      align-self: flex-start;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 0.2rem 0.6rem;
      border-radius: 4px;
      margin-bottom: 1rem;
    }

    .badge-terracotta {
      background-color: rgba(184, 82, 53, 0.12);
      color: var(--color-primary);
    }

    .badge-sage {
      background-color: var(--color-sage-light);
      color: #3b6146;
    }

    .badge-blue {
      background-color: var(--color-blue-light);
      color: #365878;
    }

    .interface-card h3 {
      font-family: var(--font-heading);
      font-size: 1.6rem;
      margin-bottom: 0.75rem;
      color: var(--color-dark);
    }

    .interface-card p {
      color: var(--color-muted);
      font-size: 0.98rem;
      margin-bottom: 1.5rem;
    }

    .interface-img-wrapper {
      margin-top: auto;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      background: #FAFAFA;
      position: relative;
    }

    .interface-img-wrapper img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 5px;
    }

    /* Workspace & Craft Section */
    .workspace-section {
      background-color: var(--color-card-bg);
      border-top: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
    }

    .workspace-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3.5rem;
      align-items: center;
    }

    .workspace-gallery {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }

    .gallery-item {
      border: 1px solid var(--color-border);
      border-radius: 8px;
      padding: 0.5rem;
      background: var(--color-bg);
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }

    .gallery-item img {
      width: 100%;
      height: 240px;
      object-fit: cover;
      border-radius: 4px;
      display: block;
    }

    .workspace-content h2 {
      font-family: var(--font-heading);
      font-size: 2.3rem;
      line-height: 1.25;
      margin-bottom: 1.25rem;
      color: var(--color-dark);
    }

    .workspace-content p {
      color: var(--color-muted);
      font-size: 1.05rem;
      margin-bottom: 1.5rem;
      line-height: 1.7;
    }

    .craft-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .craft-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.85rem;
      font-size: 1rem;
      color: var(--color-dark);
    }

    .craft-bullet {
      width: 20px;
      height: 20px;
      background-color: var(--color-sage-light);
      color: #3b6146;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      font-weight: bold;
      flex-shrink: 0;
      margin-top: 0.2rem;
    }

    /* Positioning Specs Section */
    .specs-section {
      padding: 5rem 2rem;
    }

    .specs-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }

    .spec-card {
      background-color: var(--color-card-bg);
      padding: 1.75rem;
      border-radius: 8px;
      border: 1px solid var(--color-border);
      border-left: 4px solid var(--color-primary);
    }

    .spec-card:nth-child(2) {
      border-left-color: var(--color-sage);
    }

    .spec-card:nth-child(3) {
      border-left-color: var(--color-blue);
    }

    .spec-card:nth-child(4) {
      border-left-color: var(--color-dark);
    }

    .spec-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-muted);
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    .spec-value {
      font-family: var(--font-heading);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--color-dark);
    }

    /* Beta & Hostinger Migration Guide Section */
    .hosting-section {
      background-color: var(--color-card-bg);
      border-top: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
      padding: 5rem 2rem;
    }

    .hosting-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }

    .hosting-card {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    }

    .hosting-card.col-span-3 {
      grid-column: span 3;
    }

    .hosting-card-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }

    .hosting-step-badge {
      background: var(--color-primary);
      color: #FFFFFF;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0.2rem 0.65rem;
      border-radius: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .hosting-card h3 {
      font-family: var(--font-heading);
      font-size: 1.35rem;
      color: var(--color-dark);
    }

    .hosting-list {
      list-style-type: none;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      font-size: 0.95rem;
      color: var(--color-muted);
    }

    .hosting-list li {
      position: relative;
      padding-left: 1.25rem;
    }

    .hosting-list li::before {
      content: '•';
      position: absolute;
      left: 0;
      color: var(--color-primary);
      font-weight: bold;
    }

    .hosting-list code {
      background: #E8E3D8;
      padding: 0.1rem 0.4rem;
      border-radius: 4px;
      font-family: monospace;
      color: var(--color-dark);
      font-size: 0.88em;
    }

    .hosting-card-text {
      font-size: 0.98rem;
      color: var(--color-muted);
      line-height: 1.6;
    }

    .parent-link-box {
      background: var(--color-sage-light);
      border: 1px dashed var(--color-sage);
      border-radius: 8px;
      padding: 1.75rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .parent-badge {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #3b6146;
      display: inline-block;
      margin-bottom: 0.25rem;
    }

    .parent-link-content h4 {
      font-family: var(--font-heading);
      font-size: 1.4rem;
      color: var(--color-dark);
      margin-bottom: 0.25rem;
    }

    .parent-link-content p {
      color: var(--color-muted);
      font-size: 0.95rem;
    }

    .parent-visit-btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      background-color: var(--color-dark);
      color: #FFFFFF;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.9rem;
      border-radius: 6px;
      transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .parent-visit-btn:hover {
      background-color: var(--color-primary);
      transform: translateY(-1px);
    }

    /* Support */
    .site-nav a[aria-current="page"] {
      color: var(--color-primary);
      font-weight: 700;
    }

    .support-section {
      min-height: calc(100vh - var(--header-height));
      display: flex;
      align-items: center;
      padding-top: 6rem;
      padding-bottom: 6rem;
    }

    .support-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(520px, 1.2fr);
      gap: 5rem;
      align-items: start;
    }

    .section-eyebrow {
      display: inline-block;
      margin-bottom: 1.25rem;
      padding: 0.45rem 0.9rem;
      border: 1px dashed var(--color-primary);
      border-radius: 999px;
      color: var(--color-primary);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .support-title {
      max-width: 560px;
      margin-bottom: 1.25rem;
      font-family: var(--font-heading);
      font-size: clamp(3rem, 6vw, 5.2rem);
      line-height: 0.98;
      letter-spacing: -0.045em;
    }

    .support-lead {
      max-width: 570px;
      margin-bottom: 2rem;
      color: var(--color-muted);
      font-size: 1.08rem;
      line-height: 1.75;
    }

    .support-detail-card {
      max-width: 520px;
      margin-bottom: 2rem;
      padding: 1.4rem 1.5rem;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid var(--color-border);
      border-left: 5px solid var(--color-sage);
      border-radius: 8px;
    }

    .support-detail-label {
      display: block;
      margin-bottom: 0.25rem;
      color: var(--color-muted);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .support-detail-card a {
      color: var(--color-dark);
      font-family: var(--font-heading);
      font-size: 1.35rem;
      font-weight: 700;
      text-decoration-color: var(--color-primary);
      text-underline-offset: 4px;
    }

    .support-detail-card p {
      margin-top: 0.45rem;
      color: var(--color-muted);
      font-size: 0.9rem;
    }

    .support-back-link {
      color: var(--color-primary);
      font-weight: 700;
      text-decoration: none;
    }

    .support-back-link:hover {
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .support-form-card {
      padding: clamp(1.5rem, 4vw, 2.75rem);
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid var(--color-border);
      border-top: 5px solid var(--color-primary);
      border-radius: 12px;
      box-shadow: 0 20px 55px rgba(42, 39, 37, 0.09);
    }

    .support-form {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

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

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }

    .form-field label {
      color: var(--color-dark);
      font-size: 0.83rem;
      font-weight: 700;
      letter-spacing: 0.035em;
    }

    .form-field label span {
      color: var(--color-muted);
      font-size: 0.72rem;
      font-weight: 400;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
      width: 100%;
      padding: 0.82rem 0.9rem;
      background: #FCFBF8;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      color: var(--color-dark);
      font: inherit;
      line-height: 1.4;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .form-field textarea {
      resize: vertical;
      min-height: 160px;
    }

    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(184, 82, 53, 0.13);
    }

    .form-help,
    .form-privacy {
      color: var(--color-muted);
      font-size: 0.78rem;
      line-height: 1.5;
    }

    .support-submit {
      align-self: flex-start;
      padding: 0.85rem 1.4rem;
      border: 0;
      border-radius: 6px;
      background: var(--color-primary);
      color: #FFFFFF;
      cursor: pointer;
      font: inherit;
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.025em;
      transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .support-submit:hover {
      background: var(--color-primary-hover);
      transform: translateY(-1px);
    }

    .form-status {
      margin-bottom: 1.25rem;
      padding: 0.9rem 1rem;
      border-radius: 6px;
      font-weight: 700;
    }

    .form-status.is-success {
      background: var(--color-sage-light);
      border: 1px solid var(--color-sage);
      color: #34513C;
    }

    .form-status.is-error {
      background: #F8EAE5;
      border: 1px solid #D9A18E;
      color: #7F3320;
    }

    .form-trap {
      position: absolute !important;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    /* Privacy Policy */
    .privacy-hero {
      padding-top: clamp(5rem, 9vw, 8rem);
      padding-bottom: clamp(4rem, 7vw, 6.5rem);
      overflow: hidden;
    }

    .privacy-hero::before {
      content: "";
      position: absolute;
      width: min(46vw, 640px);
      aspect-ratio: 1;
      right: -12vw;
      top: -24%;
      border: 1px solid rgba(184, 82, 53, 0.12);
      border-radius: 50%;
      box-shadow:
        0 0 0 54px rgba(184, 82, 53, 0.045),
        0 0 0 108px rgba(152, 187, 162, 0.045);
      pointer-events: none;
    }

    .privacy-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
      gap: clamp(3rem, 7vw, 7rem);
      align-items: center;
    }

    .privacy-title {
      max-width: 760px;
      margin-bottom: 1.4rem;
      font-family: var(--font-heading);
      font-size: clamp(3.8rem, 8vw, 7.2rem);
      line-height: 0.92;
      letter-spacing: -0.055em;
      text-wrap: balance;
    }

    .privacy-lead {
      max-width: 720px;
      color: var(--color-muted);
      font-size: clamp(1.08rem, 2vw, 1.35rem);
      line-height: 1.7;
    }

    .privacy-date {
      margin-top: 1.5rem;
      color: var(--color-muted);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.075em;
      text-transform: uppercase;
    }

    .privacy-promise {
      position: relative;
      padding: clamp(1.75rem, 4vw, 2.6rem);
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid var(--color-border);
      border-top: 5px solid var(--color-primary);
      border-radius: 12px;
      box-shadow: 0 22px 60px rgba(42, 39, 37, 0.1);
    }

    .privacy-promise-kicker,
    .privacy-index-label {
      display: block;
      margin-bottom: 1rem;
      color: var(--color-primary);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .privacy-promise p {
      margin-bottom: 1.35rem;
      font-family: var(--font-heading);
      font-size: 1.4rem;
      line-height: 1.4;
    }

    .privacy-promise ul {
      display: grid;
      gap: 0.65rem;
      list-style: none;
    }

    .privacy-promise li {
      position: relative;
      padding-left: 1.35rem;
      color: var(--color-muted);
      font-size: 0.9rem;
    }

    .privacy-promise li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.62em;
      width: 7px;
      height: 7px;
      background: var(--color-sage);
      border-radius: 50%;
    }

    .privacy-content-section {
      padding-top: clamp(3.5rem, 7vw, 6rem);
      padding-bottom: clamp(5rem, 9vw, 8rem);
      background: rgba(231, 239, 233, 0.64);
      border-top: 1px solid rgba(152, 187, 162, 0.35);
    }

    .privacy-layout {
      display: grid;
      grid-template-columns: 220px minmax(0, 820px);
      justify-content: center;
      gap: clamp(2.5rem, 6vw, 6rem);
      align-items: start;
    }

    .privacy-index {
      position: sticky;
      top: calc(var(--header-height) + 2.25rem);
      padding: 1.5rem 0;
    }

    .privacy-index nav {
      display: flex;
      flex-direction: column;
      border-left: 1px solid rgba(42, 39, 37, 0.17);
    }

    .privacy-index a {
      padding: 0.48rem 0 0.48rem 1.15rem;
      color: var(--color-muted);
      font-size: 0.86rem;
      text-decoration: none;
      transition: color 0.2s ease, transform 0.2s ease;
    }

    .privacy-index a:hover {
      color: var(--color-primary);
      transform: translateX(3px);
    }

    .privacy-document {
      padding: clamp(2rem, 5vw, 4.5rem);
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      box-shadow: 0 20px 55px rgba(42, 39, 37, 0.075);
    }

    .privacy-policy-section {
      scroll-margin-top: calc(var(--header-height) + 2rem);
    }

    .privacy-policy-section + .privacy-policy-section {
      margin-top: 3rem;
      padding-top: 3rem;
      border-top: 1px solid var(--color-border);
    }

    .privacy-section-number {
      display: block;
      margin-bottom: 0.45rem;
      color: var(--color-primary);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.16em;
    }

    .privacy-policy-section h2 {
      margin-bottom: 1.15rem;
      font-family: var(--font-heading);
      font-size: clamp(1.9rem, 4vw, 2.65rem);
      line-height: 1.1;
      letter-spacing: -0.025em;
    }

    .privacy-policy-section p,
    .privacy-policy-section li {
      color: #504B46;
      font-family: var(--font-heading);
      font-size: 1.04rem;
      line-height: 1.82;
    }

    .privacy-policy-section p + p {
      margin-top: 1.2rem;
    }

    .privacy-policy-section ul {
      margin: 1.15rem 0 1.25rem 1.2rem;
    }

    .privacy-policy-section li + li {
      margin-top: 1rem;
    }

    .privacy-policy-section code {
      padding: 0.08em 0.34em;
      background: var(--color-blue-light);
      border-radius: 3px;
      color: var(--color-dark);
      font-size: 0.88em;
    }

    .privacy-policy-section a {
      color: var(--color-primary);
      text-underline-offset: 3px;
    }

    .privacy-contact-section {
      padding: 2rem;
      background: var(--color-blue-light);
      border: 1px solid rgba(162, 185, 206, 0.6) !important;
      border-radius: 8px;
    }

    .privacy-contact-button {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 1.4rem;
      padding: 0.78rem 1.05rem;
      background: var(--color-dark);
      border-radius: 5px;
      color: #FFFFFF !important;
      font-family: var(--font-body);
      font-size: 0.86rem;
      font-weight: 700;
      text-decoration: none;
      transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .privacy-contact-button:hover {
      background: var(--color-primary);
      transform: translateY(-1px);
    }

    .form-privacy a {
      color: inherit;
      text-underline-offset: 2px;
    }

    /* Footer */
    .site-footer {
      background-color: #23201D;
      color: #E2DDD3;
      padding: 4rem 2rem 3rem 2rem;
      border-top: 1px solid var(--color-dark);
      position: relative;
    }

    .footer-container {
      max-width: 1240px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 3rem;
    }

    .footer-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 2rem;
    }

    .footer-brand {
      max-width: 400px;
    }

    .footer-logo-wrap {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }

    .footer-logo {
      height: 36px;
      width: 36px;
      border-radius: 4px;
    }

    .footer-title {
      font-family: var(--font-heading);
      font-size: 1.3rem;
      color: #FFFFFF;
      font-weight: 700;
    }

    .footer-desc {
      font-size: 0.95rem;
      color: #A39D95;
      line-height: 1.6;
    }

    .footer-nav {
      display: flex;
      gap: 3rem;
    }

    .footer-nav-col {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .footer-nav-col h4 {
      font-family: var(--font-body);
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #FFFFFF;
      margin-bottom: 0.25rem;
    }

    .footer-nav-col a {
      color: #A39D95;
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.2s ease;
    }

    .footer-nav-col a:hover {
      color: var(--color-blue);
    }

    .footer-bottom {
      border-top: 1px solid #36322F;
      padding-top: 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
      color: #7A746D;
    }

    /* Responsive Breakpoints */
    @media (max-width: 1180px) {
      .site-nav {
        gap: 0.85rem;
      }

      .parent-home-label {
        display: none;
      }

      .parent-home-link {
        padding-inline: 0.65rem;
      }

      .cta-placeholder-btn {
        padding-inline: 1rem;
        font-size: 0.82rem;
      }
    }

    @media (max-width: 992px) {
      .site-nav {
        gap: 1.15rem;
      }

      .parent-home-label {
        display: none;
      }

      .hero-grid, .workspace-split {
        grid-template-columns: 1fr;
        gap: 2.5rem;
      }

      .interface-card.col-7,
      .interface-card.col-5 {
        grid-column: span 12;
      }

      .values-grid {
        grid-template-columns: 1fr;
      }

      .specs-grid {
        grid-template-columns: 1fr 1fr;
      }

      .hosting-grid {
        grid-template-columns: 1fr;
      }

      .hosting-card.col-span-3 {
        grid-column: span 1;
      }

      .support-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

      .privacy-hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

      .privacy-layout {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 2.5rem;
      }
    }

    @media (max-width: 768px) {
      .site-nav {
        display: none;
      }

      .parent-home-label {
        display: inline;
      }

      .section-title {
        font-size: 2rem;
      }

      .hero-headline {
        font-size: 2.2rem;
      }

      .parallax-divider {
        min-height: 250px;
        padding: 3.5rem 1.5rem;
        background-attachment: scroll;
      }

      .parallax-quote {
        font-size: 1.5rem;
      }

      .infographic-stage {
        height: 380px;
      }

      .infographic-legend {
        grid-template-columns: 1fr;
        gap: 0.5rem;
      }

      .scat-doc {
        width: 70px;
        height: 95px;
      }

      .workspace-gallery {
        grid-template-columns: 1fr;
      }

      .specs-grid {
        grid-template-columns: 1fr;
      }

      .footer-top {
        flex-direction: column;
      }

      .support-section {
        padding: 4rem 1.25rem;
      }

      .form-row-two {
        grid-template-columns: 1fr;
      }

      .support-submit {
        width: 100%;
      }

      .privacy-layout {
        grid-template-columns: 1fr;
      }

      .privacy-index {
        position: static;
        padding: 0;
      }

      .privacy-index nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem 1rem;
        border-left: 0;
      }

      .privacy-index a {
        padding: 0.4rem 0;
        border-bottom: 1px solid rgba(42, 39, 37, 0.12);
      }

      .privacy-document {
        padding: 1.6rem;
      }

      .privacy-title {
        font-size: clamp(3.1rem, 15vw, 4.6rem);
      }
    }

    @media (max-width: 560px) {
      .header-container {
        padding: 0 1rem;
      }

      .brand-title {
        display: none;
      }

      .header-cta-wrap {
        gap: 0.65rem;
      }

      .parent-home-link {
        padding: 0.58rem 0.7rem;
      }

      .cta-placeholder-btn {
        padding: 0.6rem 0.9rem;
        max-width: 145px;
        font-size: 0.7rem;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
      }
    }

    @media (max-width: 360px) {
      .header-container {
        padding: 0 0.75rem;
      }

      .header-cta-wrap {
        gap: 0.45rem;
      }

      .parent-home-link {
        padding: 0.5rem 0.55rem;
        font-size: 0.72rem;
      }

      .cta-placeholder-btn {
        max-width: 125px;
        padding: 0.55rem 0.65rem;
        font-size: 0.64rem;
      }
    }
  

body { position: relative; }
div.ai-image-badge {
  position: absolute;
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2225%22%20height%3D%2225%22%20viewBox%3D%220%200%2025%2025%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%3E%0A%3Cmask%20id%3D%22path-2-inside-1_4816_19485%22%20fill%3D%22white%22%3E%0A%3Cpath%20d%3D%22M17.9651%2010.7604L16.8609%208.36458L14.4651%207.28125L16.8609%206.17708L17.9651%203.78125L19.0484%206.17708L21.4442%207.28125L19.0484%208.36458L17.9651%2010.7604ZM17.9651%2021.7604L16.8817%2019.3437L14.4651%2018.2604L16.8817%2017.1771L17.9651%2014.7604L19.0484%2017.1771L21.4651%2018.2604L19.0484%2019.3437L17.9651%2021.7604ZM10.9651%2019.2604L8.94423%2014.7812L4.46506%2012.7604L8.94423%2010.7396L10.9651%206.26042L12.9859%2010.7396L17.4651%2012.7604L12.9859%2014.7812L10.9651%2019.2604Z%22%2F%3E%0A%3C%2Fmask%3E%0A%3Cpath%20d%3D%22M17.9651%2010.7604L16.8609%208.36458L14.4651%207.28125L16.8609%206.17708L17.9651%203.78125L19.0484%206.17708L21.4442%207.28125L19.0484%208.36458L17.9651%2010.7604ZM17.9651%2021.7604L16.8817%2019.3437L14.4651%2018.2604L16.8817%2017.1771L17.9651%2014.7604L19.0484%2017.1771L21.4651%2018.2604L19.0484%2019.3437L17.9651%2021.7604ZM10.9651%2019.2604L8.94423%2014.7812L4.46506%2012.7604L8.94423%2010.7396L10.9651%206.26042L12.9859%2010.7396L17.4651%2012.7604L12.9859%2014.7812L10.9651%2019.2604Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M17.9651%2010.7604L17.511%2010.9697L17.9694%2011.9644L18.4206%2010.9664L17.9651%2010.7604ZM16.8609%208.36458L17.315%208.1553L17.2369%207.98586L17.0669%207.90899L16.8609%208.36458ZM14.4651%207.28125L14.2558%206.82715L13.2611%207.28558L14.2591%207.73684L14.4651%207.28125ZM16.8609%206.17708L17.0702%206.63118L17.2378%206.55394L17.315%206.38636L16.8609%206.17708ZM17.9651%203.78125L18.4206%203.57524L17.9694%202.57727L17.511%203.57197L17.9651%203.78125ZM19.0484%206.17708L18.5928%206.38309L18.6697%206.55309L18.8391%206.63118L19.0484%206.17708ZM21.4442%207.28125L21.6502%207.73684L22.6482%207.28558L21.6535%206.82715L21.4442%207.28125ZM19.0484%208.36458L18.8424%207.90899L18.6705%207.98671L18.5928%208.15858L19.0484%208.36458ZM17.9651%2021.7604L17.5088%2021.9649L17.9651%2022.9827L18.4213%2021.9649L17.9651%2021.7604ZM16.8817%2019.3438L17.338%2019.1392L17.2601%2018.9654L17.0863%2018.8875L16.8817%2019.3438ZM14.4651%2018.2604L14.2605%2017.8042L13.2427%2018.2604L14.2605%2018.7167L14.4651%2018.2604ZM16.8817%2017.1771L17.0863%2017.6333L17.2601%2017.5554L17.338%2017.3816L16.8817%2017.1771ZM17.9651%2014.7604L18.4213%2014.5559L17.9651%2013.5381L17.5088%2014.5559L17.9651%2014.7604ZM19.0484%2017.1771L18.5921%2017.3816L18.6701%2017.5554L18.8439%2017.6333L19.0484%2017.1771ZM21.4651%2018.2604L21.6696%2018.7167L22.6874%2018.2604L21.6696%2017.8042L21.4651%2018.2604ZM19.0484%2019.3438L18.8439%2018.8875L18.6701%2018.9654L18.5921%2019.1392L19.0484%2019.3438ZM10.9651%2019.2604L10.5093%2019.466L10.9651%2020.4762L11.4208%2019.466L10.9651%2019.2604ZM8.94423%2014.7812L9.39999%2014.5756L9.32222%2014.4033L9.14985%2014.3255L8.94423%2014.7812ZM4.46506%2012.7604L4.25944%2012.3047L3.24924%2012.7604L4.25944%2013.2162L4.46506%2012.7604ZM8.94423%2010.7396L9.14985%2011.1953L9.32222%2011.1176L9.39999%2010.9452L8.94423%2010.7396ZM10.9651%206.26042L11.4208%206.05479L10.9651%205.0446L10.5093%206.05479L10.9651%206.26042ZM12.9859%2010.7396L12.5301%2010.9452L12.6079%2011.1176L12.7803%2011.1953L12.9859%2010.7396ZM17.4651%2012.7604L17.6707%2013.2162L18.6809%2012.7604L17.6707%2012.3047L17.4651%2012.7604ZM12.9859%2014.7812L12.7803%2014.3255L12.6079%2014.4033L12.5301%2014.5756L12.9859%2014.7812ZM17.9651%2010.7604L18.4192%2010.5511L17.315%208.1553L16.8609%208.36458L16.4068%208.57386L17.511%2010.9697L17.9651%2010.7604ZM16.8609%208.36458L17.0669%207.90899L14.6711%206.82566L14.4651%207.28125L14.2591%207.73684L16.6549%208.82017L16.8609%208.36458ZM14.4651%207.28125L14.6743%207.73534L17.0702%206.63118L16.8609%206.17708L16.6516%205.72299L14.2558%206.82715L14.4651%207.28125ZM16.8609%206.17708L17.315%206.38636L18.4192%203.99053L17.9651%203.78125L17.511%203.57197L16.4068%205.9678L16.8609%206.17708ZM17.9651%203.78125L17.5095%203.98726L18.5928%206.38309L19.0484%206.17708L19.504%205.97108L18.4206%203.57524L17.9651%203.78125ZM19.0484%206.17708L18.8391%206.63118L21.2349%207.73534L21.4442%207.28125L21.6535%206.82715L19.2577%205.72299L19.0484%206.17708ZM21.4442%207.28125L21.2382%206.82566L18.8424%207.90899L19.0484%208.36458L19.2544%208.82017L21.6502%207.73684L21.4442%207.28125ZM19.0484%208.36458L18.5928%208.15858L17.5095%2010.5544L17.9651%2010.7604L18.4206%2010.9664L19.504%208.57059L19.0484%208.36458ZM17.9651%2021.7604L18.4213%2021.5559L17.338%2019.1392L16.8817%2019.3438L16.4255%2019.5483L17.5088%2021.9649L17.9651%2021.7604ZM16.8817%2019.3438L17.0863%2018.8875L14.6696%2017.8042L14.4651%2018.2604L14.2605%2018.7167L16.6772%2019.8L16.8817%2019.3438ZM14.4651%2018.2604L14.6696%2018.7167L17.0863%2017.6333L16.8817%2017.1771L16.6772%2016.7208L14.2605%2017.8042L14.4651%2018.2604ZM16.8817%2017.1771L17.338%2017.3816L18.4213%2014.9649L17.9651%2014.7604L17.5088%2014.5559L16.4255%2016.9726L16.8817%2017.1771ZM17.9651%2014.7604L17.5088%2014.9649L18.5921%2017.3816L19.0484%2017.1771L19.5046%2016.9726L18.4213%2014.5559L17.9651%2014.7604ZM19.0484%2017.1771L18.8439%2017.6333L21.2605%2018.7167L21.4651%2018.2604L21.6696%2017.8042L19.2529%2016.7208L19.0484%2017.1771ZM21.4651%2018.2604L21.2605%2017.8042L18.8439%2018.8875L19.0484%2019.3438L19.2529%2019.8L21.6696%2018.7167L21.4651%2018.2604ZM19.0484%2019.3438L18.5921%2019.1392L17.5088%2021.5559L17.9651%2021.7604L18.4213%2021.9649L19.5046%2019.5483L19.0484%2019.3438ZM10.9651%2019.2604L11.4208%2019.0548L9.39999%2014.5756L8.94423%2014.7812L8.48846%2014.9869L10.5093%2019.466L10.9651%2019.2604ZM8.94423%2014.7812L9.14985%2014.3255L4.67068%2012.3047L4.46506%2012.7604L4.25944%2013.2162L8.7386%2015.237L8.94423%2014.7812ZM4.46506%2012.7604L4.67068%2013.2162L9.14985%2011.1953L8.94423%2010.7396L8.7386%2010.2838L4.25944%2012.3047L4.46506%2012.7604ZM8.94423%2010.7396L9.39999%2010.9452L11.4208%206.46604L10.9651%206.26042L10.5093%206.05479L8.48846%2010.534L8.94423%2010.7396ZM10.9651%206.26042L10.5093%206.46604L12.5301%2010.9452L12.9859%2010.7396L13.4417%2010.534L11.4208%206.05479L10.9651%206.26042ZM12.9859%2010.7396L12.7803%2011.1953L17.2594%2013.2162L17.4651%2012.7604L17.6707%2012.3047L13.1915%2010.2838L12.9859%2010.7396ZM17.4651%2012.7604L17.2594%2012.3047L12.7803%2014.3255L12.9859%2014.7812L13.1915%2015.237L17.6707%2013.2162L17.4651%2012.7604ZM12.9859%2014.7812L12.5301%2014.5756L10.5093%2019.0548L10.9651%2019.2604L11.4208%2019.466L13.4417%2014.9869L12.9859%2014.7812Z%22%20fill%3D%22%23DDDDDD%22%20mask%3D%22url(%23path-2-inside-1_4816_19485)%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 200;
}