/* PUBLIC SITE: original CSS copied verbatim in source order. */

/* ===== Original stylesheet: public_home.css ===== */
/* Extracted from index.html.erb — block 1; original order preserved. */
.public-site {

    --site-bg: #F8F3E8;

    --site-bg-soft: #F3EBDD;

    --site-surface: #FFFCF5;

    --site-surface-soft: #F6F0E4;

    --site-border: #E7D8B8;



    --brand-cyan: #F4B952;

    --brand-blue: #074C3E;

    --brand-purple: #074C3E;

    --brand-pink: #F4B952;

    --brand-orange: #F4B952;

    --brand-green: #074C3E;



    --text-primary: #10231F;

    --text-secondary: #58635D;

    --text-muted: #77796F;

  }



  .public-site p {

    text-wrap: pretty;

  }



  .public-site a {

    text-decoration: none;

  }



  .public-ambient {

    background:

      radial-gradient(

        circle at 15% 15%,

        rgba(244, 185, 82, 0.12),

        transparent 30%

      ),

      radial-gradient(

        circle at 82% 20%,

        rgba(7, 76, 62, 0.08),

        transparent 28%

      ),

      radial-gradient(

        circle at 55% 85%,

        rgba(7, 76, 62, 0.05),

        transparent 32%

      );

  }


  .public-color-section {
    position: relative;
    isolation: isolate;
  }

  .public-color-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.8;
  }

  .public-color-blue::before {
    background:
      radial-gradient(circle at 85% 20%, rgba(79, 124, 255, 0.10), transparent 26%),
      radial-gradient(circle at 10% 80%, rgba(1, 191, 192, 0.06), transparent 28%);
  }

  .public-color-purple::before {
    background:
      radial-gradient(circle at 15% 20%, rgba(7, 76, 62, 0.05), transparent 28%),
      radial-gradient(circle at 90% 85%, rgba(244, 185, 82, 0.05), transparent 25%);
  }

  .public-color-pink::before {
    background:
      radial-gradient(circle at 85% 15%, rgba(244, 185, 82, 0.07), transparent 26%),
      radial-gradient(circle at 20% 85%, rgba(244, 185, 82, 0.07), transparent 28%);
  }

  .public-color-orange::before {
    background:
      radial-gradient(circle at 80% 20%, rgba(244, 185, 82, 0.10), transparent 26%),
      radial-gradient(circle at 15% 85%, rgba(79, 124, 255, 0.06), transparent 28%);
  }

  .public-color-green::before {
    background:
      radial-gradient(circle at 80% 20%, rgba(7, 76, 62, 0.05), transparent 26%),
      radial-gradient(circle at 15% 80%, rgba(1, 191, 192, 0.06), transparent 28%);
  }

  .public-color-strip {
    background:
      linear-gradient(90deg,
        rgba(79, 124, 255, 0.10) 0%,
        rgba(139, 92, 246, 0.08) 25%,
        rgba(236, 72, 153, 0.08) 50%,
        rgba(245, 158, 11, 0.08) 75%,
        rgba(7, 76, 62, 0.04) 100%),
      #00231C;
  }


  /* TAVRÉ theme accessibility and section separation */
  .public-site .text-\[\#94A3B8\] {
  color: #94A3B8 !important;
}

.public-site .text-\[\#9AA8B8\] {
  color: #9AA8B8 !important;
}

.public-site .text-\[\#C7D4CD\] {
  color: #C7D4CD !important;
}

.public-site .text-\[\#B8C7C0\] {
  color: #B8C7C0 !important;
}
  .public-site { --site-bg:#E7E8E1; --site-bg-soft:#E1E5DE; --site-surface:#F7F3E9; --site-surface-soft:#ECEDE6; --site-border:#C9D1C7; --text-primary:#10231F; --text-secondary:#3F514A; --text-muted:#53635C; }
  .public-site p, .public-site li, .public-site small { font-size: 1rem; line-height: 1.7; }
  .public-site p { color: inherit; }
  .public-site .text-slate-400, .public-site .text-slate-500, .public-site .text-gray-400, .public-site .text-gray-500,
  .public-site h1 { font-size:clamp(2.6rem,5vw,4.6rem) !important; line-height:1.05 !important; }
  .public-site h2 { font-size:clamp(2rem,3.5vw,3.2rem) !important; line-height:1.12 !important; }
  .public-site h3 { font-size:1.25rem !important; line-height:1.35 !important; }
  .public-site .public-color-section { border-top:1px solid rgba(16,35,31,.12); border-bottom:1px solid rgba(16,35,31,.12); }
  .public-site .public-color-blue { background-color:#E2E6E0 !important; color:#10231F !important; }
  .public-site .public-color-purple { background-color:#123C32 !important; color:#F8F3E8 !important; }
  .public-site .public-color-pink { background-color:#F4EFE3 !important; color:#10231F !important; }
  .public-site .public-color-orange { background-color:#D9DFD6 !important; color:#10231F !important; }
  .public-site .public-color-green { background-color:#EAE6DA !important; color:#10231F !important; }
  .public-site .public-color-section h1, .public-site .public-color-section h2, .public-site .public-color-section h3,
  .public-site .public-color-section strong { color:inherit; }
  .public-site .public-color-purple p, .public-site .public-color-purple li,
  .public-site .public-color-purple .text-slate-400, .public-site .public-color-purple .text-slate-500,
  .public-site .public-color-purple .text-gray-400, .public-site .public-color-purple .text-gray-500 { color:#D9E3DC !important; }
  .public-site .public-color-section .rounded-xl, .public-site .public-color-section .rounded-2xl { border-color:rgba(7,76,62,.22); }
  .public-site .public-color-purple .rounded-xl, .public-site .public-color-purple .rounded-2xl { background-color:rgba(2,28,22,.62); border-color:rgba(244,185,82,.22); }
  .public-site .public-color-section a { text-underline-offset:3px; }
  @media (max-width: 640px) { .public-site p, .public-site li { font-size:1rem; } }

/* Extracted from index.html.erb — block 2; original order preserved. */
.home-product-preview {
        --preview-accent: #F4B952;
      }

      /* Dashboard screen — manually recreated from the supplied Dashboard reference */
      .home-preview-dashboard {
        padding: 34px 34px 42px;
        background:
          radial-gradient(circle at 84% 7%, rgba(1,191,192,.055), transparent 24%),
          linear-gradient(180deg, rgba(10,27,36,.22), transparent 58%);
      }
      .home-dashboard-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
      .home-dashboard-head .home-preview-eyebrow { display:flex; align-items:center; gap:8px; margin:0; }
      .home-dashboard-head .home-preview-eyebrow > i { display:inline-block; width:6px; height:6px; border-radius:999px; background:#F4B952; box-shadow:0 0 12px rgba(1,191,192,.65); }
      .home-dashboard-head .home-preview-eyebrow span { width:28px; margin:0 4px 0 2px; }
      .home-dashboard-head h3 { margin:16px 0 8px; color:#EDF3FB; font-size:clamp(27px,3.15vw,41px); font-weight:500; letter-spacing:-.055em; line-height:.98; }
      .home-dashboard-head .home-preview-subtitle { max-width:650px; font-size:12px; line-height:1.55; }
      .home-dashboard-operational { align-self:flex-end; margin-bottom:4px; white-space:nowrap; color:#8D9BA8; font-size:8px; font-weight:600; }
      .home-dashboard-operational i { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#55D6AE; box-shadow:0 0 12px rgba(85,214,174,.7); }
      .home-dashboard-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:22px; }
      .home-dashboard-action { position:relative; display:flex; align-items:center; min-height:62px; padding:11px 42px 11px 54px; border:1px solid #263B49; border-radius:15px; background:#11242D; box-sizing:border-box; }
      .home-dashboard-action-primary { border-color:#14535B; background:linear-gradient(135deg,#0B252C,#10242C); }
      .home-dashboard-action-icon { position:absolute; left:13px; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:9px; background:#19303B; color:#94A5B3; font-size:18px; }
      .home-dashboard-action small { display:block; color:#708291; font-size:7px; font-weight:800; letter-spacing:.18em; }
      .home-dashboard-action strong { display:block; margin-top:4px; color:#DCE6EF; font-size:11px; font-weight:700; }
      .home-dashboard-action em { position:absolute; right:14px; color:#738697; font-size:17px; font-style:normal; }
      .home-dashboard-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:17px; }
      .home-dashboard-kpi { position:relative; min-height:122px; padding:16px 15px 13px; border:1px solid #263B49; border-radius:16px; background:#101F28; box-sizing:border-box; overflow:hidden; }
      .home-dashboard-kpi::before { content:""; position:absolute; top:-1px; left:0; right:42%; height:2px; background:#5A7182; opacity:.9; }
      .home-dashboard-kpi-accent::before { background:#F4B952; right:38%; }
      .home-dashboard-kpi-icon { display:inline-flex; align-items:center; justify-content:center; width:29px; height:29px; margin-bottom:11px; border-radius:9px; background:#172F3B; color:#F4B952; font-size:10px; font-weight:800; }
      .home-dashboard-kpi small { display:block; position:absolute; top:19px; left:54px; color:#8796A3; font-size:7px; font-weight:800; letter-spacing:.17em; }
      .home-dashboard-kpi strong { display:block; color:#EDF3FB; font-size:27px; line-height:1; font-weight:600; }
      .home-dashboard-kpi em { display:block; margin-top:13px; color:#81909D; font-size:8px; font-style:normal; }
      .home-dashboard-money { margin-top:16px; padding:18px; border:1px solid #263B49; border-radius:17px; background:#101F28; }
      .home-dashboard-money-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
      .home-dashboard-money-head small { display:block; color:#81919F; font-size:7px; font-weight:800; letter-spacing:.17em; }
      .home-dashboard-money-head small b { margin-right:6px; color:#D7E0E8; font-size:9px; }
      .home-dashboard-money-head h4 { margin:5px 0 0; color:#E5EDF4; font-size:15px; font-weight:600; }
      .home-dashboard-money-head a { color:#8EA0AE; font-size:9px; white-space:nowrap; }
      .home-dashboard-money-grid { display:grid; grid-template-columns:1.45fr repeat(3,1fr); gap:9px; margin-top:15px; }
      .home-dashboard-money-grid > div { min-height:112px; padding:14px; border:1px solid #263C49; border-radius:14px; background:#142630; box-sizing:border-box; }
      .home-dashboard-billed { border-color:#16515A !important; background:linear-gradient(135deg,#122B34,#142630) !important; }
      .home-dashboard-billed > span { display:block; color:#D7E0E8; font-size:10px; }
      .home-dashboard-billed > span b { font-size:8px; }
      .home-dashboard-billed > strong { display:block; margin-top:15px; color:#A2B3BF; font-size:25px; font-weight:600; letter-spacing:-.04em; }
      .home-dashboard-billed > div { display:flex; gap:20px; margin-top:14px; padding-top:10px; border-top:1px solid #263A46; }
      .home-dashboard-billed > div small { color:#82929F; font-size:7px; }
      .home-dashboard-finance-card small { display:block; color:#8797A4; font-size:7px; font-weight:800; letter-spacing:.15em; }
      .home-dashboard-finance-card strong { display:block; margin-top:17px; color:#E3EAF0; font-size:20px; font-weight:600; }
      .home-dashboard-finance-card span { display:block; margin-top:12px; color:#7C8D9B; font-size:7px; line-height:1.4; }
      .home-dashboard-finance-card.customer strong { color:#E2A33C; }
      .home-dashboard-finance-card.vendor strong { color:#F07782; }
      .home-dashboard-finance-card.margin strong { color:#5CD6B0; }

      .home-preview-sidebar {
        background: linear-gradient(180deg, #0D1720 0%, #0A141D 100%);
      }

      .home-preview-nav-item.is-active {
        background: #EDF3FB;
        color: #DDA33D;
        box-shadow: inset 3px 0 0 #F4B952;
      }

      .home-preview-screens {
        position: relative;
        min-height: 540px;
      }

      .home-preview-screen {
        position: absolute;
        inset: 0;
        padding: 34px 34px 48px;
        opacity: 0;
        transform: translateX(18px);
        pointer-events: none;
        transition: opacity .65s ease, transform .65s ease;
      }

      .home-preview-screen.is-active {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
      }

      .home-preview-topline,
      .home-preview-page-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
      }

      .home-preview-eyebrow,
      .home-preview-page-head > div > small {
        margin: 0;
        color: #91A0AF;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .2em;
        text-transform: uppercase;
      }

      .home-preview-eyebrow span {
        display: inline-block;
        width: 26px;
        height: 1px;
        margin: 0 10px 3px;
        background: #334456;
      }

      .home-preview-topline h3,
      .home-preview-page-head h3 {
        margin: 14px 0 7px;
        color: #EDF3FB;
        font-size: clamp(25px, 3vw, 39px);
        line-height: 1;
        letter-spacing: -.04em;
        font-weight: 600;
      }

      .home-preview-page-head h3 b {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 27px;
        height: 27px;
        margin-left: 6px;
        border: 1px solid #285448;
        border-radius: 999px;
        color: #8FA0B1;
        font-size: 10px;
        vertical-align: middle;
      }

      .home-preview-subtitle,
      .home-preview-page-head p {
        max-width: 650px;
        margin: 0;
        color: #91A0AF;
        font-size: 12px;
        line-height: 1.7;
      }

      .home-preview-status {
        margin-top: 205px;
        white-space: nowrap;
        color: #91A0AF;
        font-size: 9px;
      }

      .home-preview-status i {
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-right: 7px;
        border-radius: 999px;
        background: #55D6AE;
        box-shadow: 0 0 12px rgba(85,214,174,.7);
      }

      .home-preview-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 24px;
      }

      .home-preview-actions > div {
        position: relative;
        min-height: 62px;
        padding: 11px 14px 10px 54px;
        border: 1px solid #23404A;
        border-radius: 14px;
        background: #0B2028;
      }

      .home-preview-actions b {
        position: absolute;
        left: 14px;
        top: 14px;
        color: #8EA1B1;
        font-size: 18px;
      }

      .home-preview-actions small,
      .home-preview-money small,
      .home-preview-kpis small,
      .home-preview-table-head,
      .home-preview-table-title small,
      .home-preview-report-grid small,
      .home-preview-finance-kpis small {
        display: block;
        color: #778899;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
      }

      .home-preview-actions strong {
        display: block;
        margin-top: 3px;
        color: #DCE6EF;
        font-size: 11px;
      }

      .home-preview-actions em {
        position: absolute;
        right: 14px;
        top: 19px;
        color: #708397;
        font-style: normal;
      }

      .home-preview-kpis {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin-top: 18px;
      }

      .home-preview-kpis > div,
      .home-preview-money,
      .home-preview-filter,
      .home-preview-table,
      .home-preview-report-grid > div,
      .home-preview-finance-callout,
      .home-preview-finance-kpis > div {
        border: 1px solid #263A49;
        background: #0E1D26;
        border-radius: 16px;
      }

      .home-preview-kpis > div {
        padding: 16px;
      }

      .home-preview-kpis strong {
        display: block;
        margin-top: 14px;
        color: #EDF3FB;
        font-size: 26px;
        line-height: 1;
      }

      .home-preview-kpis span {
        display: block;
        margin-top: 10px;
        color: #7F90A0;
        font-size: 8px;
      }

      .home-preview-money {
        margin-top: 16px;
        padding: 16px;
      }

      .home-preview-money h4 {
        margin: 5px 0 14px;
        color: #E5EDF4;
        font-size: 15px;
        font-weight: 600;
      }

      .home-preview-money-grid {
        display: grid;
        grid-template-columns: 1.45fr repeat(3, 1fr);
        gap: 8px;
      }

      .home-preview-money-grid > div {
        min-height: 91px;
        padding: 14px;
        border: 1px solid #253846;
        border-radius: 13px;
        background: #142630;
      }

      .home-preview-money-grid .featured {
        border-color: #18535A;
      }

      .home-preview-money-grid span,
      .home-preview-money-grid strong {
        display: block;
      }

      .home-preview-money-grid span {
        color: #D7E0E8;
        font-size: 10px;
      }

      .home-preview-money-grid strong {
        margin-top: 13px;
        color: #9FB0BD;
        font-size: 25px;
      }

      .home-preview-money-grid div:not(.featured) strong {
        color: #5CD6B0;
      }

      .home-preview-money-grid div:not(.featured) span:last-child {
        margin-top: 8px;
        color: #788A9A;
        font-size: 8px;
        line-height: 1.4;
      }

      .home-preview-page-head > button,
      .home-preview-report-grid button,
      .home-preview-finance-callout button {
        border: 0;
        border-radius: 999px;
        background: #F4B952;
        color: #062820;
        padding: 10px 17px;
        font-size: 10px;
        font-weight: 800;
        white-space: nowrap;
      }

      .home-preview-filter {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 170px 150px;
        gap: 10px;
        margin-top: 20px;
        padding: 12px;
      }

      .home-preview-filter > * {
        display: flex;
        align-items: center;
        min-height: 38px;
        padding: 0 14px;
        border: 1px solid #285448;
        border-radius: 10px;
        color: #8190A0;
        font-size: 10px;
        font-weight: 500;
      }

      .home-preview-table {
        overflow: hidden;
        margin-top: 20px;
      }

      .home-preview-table-title {
        position: relative;
        padding: 18px 20px 13px;
      }

      .home-preview-table-title strong {
        color: #E6EDF3;
        font-size: 14px;
      }

      .home-preview-table-title span {
        position: absolute;
        top: 18px;
        right: 20px;
        padding: 7px 11px;
        border: 1px solid #263C4B;
        border-radius: 999px;
        color: #8B9AA8;
        font-size: 8px;
        font-weight: 700;
      }

      .home-preview-table-title small {
        margin-top: 5px;
        letter-spacing: 0;
        text-transform: none;
        font-size: 9px;
        font-weight: 500;
      }

      .home-preview-table-head {
        display: grid;
        grid-template-columns: 2.1fr 1.25fr 1fr 1fr .65fr;
        gap: 12px;
        padding: 12px 20px;
        background: #132631;
      }

      .home-preview-table-row {
        display: grid;
        grid-template-columns: minmax(0, 2.1fr) minmax(62px, 1.25fr) minmax(68px, 1fr) minmax(90px, 1fr) minmax(132px, .95fr);
        gap: 12px;
        align-items: center;
        min-height: 57px;
        padding: 10px 20px;
        border-top: 1px solid #1C2C38;
        color: #C6D1DA;
        font-size: 9px;
        box-sizing: border-box;
      }

      /* Keep user-row actions together; never allow Edit/Delete to wrap or overlap. */
      .home-preview-table-row > span:last-child {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        min-width: 0;
        white-space: nowrap;
      }

      .home-preview-table-row > span:last-child em,
      .home-preview-table-row > span:last-child mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-height: 26px;
        padding: 5px 9px;
        border-radius: 8px;
        line-height: 1;
        text-decoration: none;
        box-sizing: border-box;
      }

      .home-preview-table-row > span:last-child em {
        background: #F4B952;
        color: #062820;
        font-style: normal;
        font-weight: 800;
      }

      .home-preview-table-row > span:last-child mark {
        background: rgba(229,87,103,.16);
        color: #F58C98;
      }

      .home-preview-table-row > span:first-child {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .home-preview-table-row i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        border: 1px solid #23606A;
        border-radius: 9px;
        color: #F4B952;
        font-size: 8px;
        font-style: normal;
        font-weight: 800;
        background: #102D35;
      }

      .home-preview-table-row strong {
        color: #E5EDF4;
        font-size: 10px;
        font-weight: 700;
      }

      .home-preview-table-row strong small,
      .home-preview-table-row > span > small {
        display: block;
        margin-top: 4px;
        color: #7E8D9B;
        font-size: 7px;
        font-weight: 500;
      }

      .home-preview-table-row b {
        display: inline-flex;
        width: fit-content;
        padding: 6px 8px;
        border: 1px solid #2C4553;
        border-radius: 8px;
        color: #92A2B0;
        font-size: 8px;
        font-weight: 700;
      }

      .home-preview-table-row b.green { border-color: #236352; color: #5CD6B0; background: rgba(53,184,139,.08); }
      .home-preview-table-row b.purple { border-color: #403C8D; color: #A7A5FF; background: rgba(93,82,221,.08); }

      .home-preview-table-row em {
        padding: 5px 7px;
        border-radius: 7px;
        background: #F4B952;
        color: #062820;
        font-style: normal;
        font-weight: 800;
      }

      .home-preview-table-row mark {
        padding: 5px 7px;
        border-radius: 7px;
        background: rgba(229,87,103,.2);
        color: #F58C98;
      }

      .home-preview-report-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 22px;
      }

      .home-preview-report-grid > div {
        padding: 18px;
        min-height: 148px;
      }

      .home-preview-report-grid h4 {
        margin: 11px 0 8px;
        color: #E6EDF3;
        font-size: 14px;
      }

      .home-preview-report-grid p {
        min-height: 31px;
        margin: 0 0 13px;
        color: #8B9AA8;
        font-size: 9px;
        line-height: 1.5;
      }

      .home-preview-report-grid b {
        display: inline-flex;
        margin-left: 5px;
        padding: 9px 11px;
        border: 1px solid #313B72;
        border-radius: 9px;
        color: #8190AE;
        font-size: 8px;
      }

      .home-preview-finance-callout {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 22px;
        padding: 14px 16px;
      }

      .home-preview-finance-callout strong,
      .home-preview-finance-callout small {
        display: block;
      }

      .home-preview-finance-callout strong {
        color: #E6EDF3;
        font-size: 12px;
      }

      .home-preview-finance-callout small {
        margin-top: 4px;
        color: #8392A1;
        font-size: 8px;
      }

      .home-preview-finance-kpis {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
      }

      .home-preview-finance-kpis > div {
        min-height: 93px;
        padding: 15px;
      }

      .home-preview-finance-kpis strong,
      .home-preview-finance-kpis span {
        display: block;
      }

      .home-preview-finance-kpis strong {
        margin-top: 13px;
        color: #E5EDF4;
        font-size: 18px;
      }

      .home-preview-finance-kpis span {
        margin-top: 6px;
        color: #7F8F9E;
        font-size: 7px;
      }

      .home-preview-progress {
        position: absolute;
        right: 18px;
        bottom: 16px;
        z-index: 5;
        display: flex;
        gap: 5px;
      }

      .home-preview-progress button {
        width: 5px;
        height: 5px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: #334555;
        transition: all .3s ease;
      }

      .home-preview-progress button.is-active {
        width: 20px;
        background: #F4B952;
        box-shadow: 0 0 12px rgba(1,191,192,.45);
      }

      @media (max-width: 1100px) {
        .home-preview-table-row {
          grid-template-columns: minmax(0, 1.7fr) minmax(58px, .8fr) minmax(62px, .8fr) minmax(78px, .9fr) minmax(126px, 1fr);
          gap: 8px;
          padding-right: 12px;
          padding-left: 12px;
        }

        .home-preview-table-row > span:last-child {
          gap: 4px;
        }

        .home-preview-table-row > span:last-child em,
        .home-preview-table-row > span:last-child mark {
          padding-right: 7px;
          padding-left: 7px;
        }
      }

      @media (max-width: 900px) {
        .home-preview-dashboard { padding:28px 24px 42px; }
        .home-dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
        .home-dashboard-money-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
        .home-dashboard-operational { display:none; }
      }

      @media (max-width: 900px) {
        .home-preview-screen {
          padding: 26px 22px 45px;
        }

        .home-preview-kpis,
        .home-preview-finance-kpis {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

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

        .home-preview-status {
          display: none;
        }

        .home-preview-table-head,
        .home-preview-table-row {
          grid-template-columns: 1.7fr 1fr 1fr;
        }

        .home-preview-table-head span:nth-child(n+4),
        .home-preview-table-row > span:nth-child(n+4),
        .home-preview-table-row > b:nth-child(n+3) {
          display: none;
        }
      }

      @media (max-width: 640px) {
        .home-preview-screens {
          min-height: 650px;
        }

        .home-preview-screen {
          padding: 22px 16px 42px;
        }

        .home-preview-topline,
        .home-preview-page-head,
        .home-preview-finance-callout {
          display: block;
        }

        .home-preview-page-head > button,
        .home-preview-finance-callout button {
          margin-top: 12px;
        }

        .home-preview-actions,
        .home-preview-report-grid {
          grid-template-columns: 1fr;
        }

        .home-preview-kpis,
        .home-preview-finance-kpis {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .home-preview-money-grid {
          grid-template-columns: 1fr;
        }

        .home-preview-filter {
          grid-template-columns: 1fr;
        }

        .home-preview-table {
          overflow-x: auto;
        }

        .home-preview-table-head,
        .home-preview-table-row {
          min-width: 620px;
        }
      }

/* Extracted from index.html.erb — block 3; original order preserved. */
:root{--tv-light:#E4E7E1;--tv-cream:#F4EFE3;--tv-ink:#102B25;--tv-muted:#40554D;--tv-dark:#082A23;--tv-dark2:#06372D;--tv-white:#F8F3E8;--tv-gold:#F4B952}
  body:has(.public-ambient) .public-site, body:has(.public-ambient){color:var(--tv-ink)}
  body:has(.public-ambient) section.public-ambient{background:linear-gradient(120deg,#E4E7E1,#F4EFE3 58%,#E1E5DE)!important;color:var(--tv-ink)!important}
  body:has(.public-ambient) section.public-color-strip{background:var(--tv-dark)!important;color:var(--tv-white)!important;border-color:#24594A!important}
  body:has(.public-ambient) #platform,body:has(.public-ambient) #media-planning,body:has(.public-ambient) #financials{background:var(--tv-light)!important;color:var(--tv-ink)!important;border-color:#C7D0C9!important}
  body:has(.public-ambient) #solutions,body:has(.public-ambient) #execution,body:has(.public-ambient) #reporting,body:has(.public-ambient) #contact{background:linear-gradient(125deg,#062820,#0A382E 58%,#062820)!important;color:var(--tv-white)!important;border-color:#24594A!important}
  body:has(.public-ambient) #platform p,body:has(.public-ambient) #media-planning p,body:has(.public-ambient) #financials p{color:var(--tv-muted)!important}
  body:has(.public-ambient) #solutions p,body:has(.public-ambient) #execution p,body:has(.public-ambient) #reporting p,body:has(.public-ambient) #contact p,body:has(.public-ambient) .public-color-strip p{color:#D7E2DB!important}
  body:has(.public-ambient) #platform h2,body:has(.public-ambient) #platform h3,body:has(.public-ambient) #media-planning h2,body:has(.public-ambient) #media-planning h3,body:has(.public-ambient) #financials h2,body:has(.public-ambient) #financials h3{color:var(--tv-ink)!important}
  body:has(.public-ambient) #solutions h2,body:has(.public-ambient) #solutions h3,body:has(.public-ambient) #execution h2,body:has(.public-ambient) #execution h3,body:has(.public-ambient) #reporting h2,body:has(.public-ambient) #reporting h3,body:has(.public-ambient) #contact h2,body:has(.public-ambient) #contact h3{color:var(--tv-white)!important}
  body:has(.public-ambient) #reporting .rounded-xl,body:has(.public-ambient) #reporting .rounded-2xl{background:#F7F3E9!important;border-color:#D8D0C1!important}
  body:has(.public-ambient) #reporting .rounded-xl p,body:has(.public-ambient) #reporting .rounded-2xl p,body:has(.public-ambient) #reporting .rounded-xl span,body:has(.public-ambient) #reporting .rounded-2xl span{color:#40554D!important}
  body:has(.public-ambient) #reporting .rounded-xl p.text-3xl,body:has(.public-ambient) #reporting .rounded-2xl p.text-3xl{color:#102B25!important}
  body:has(.public-ambient) #financials{border-bottom:4px solid var(--tv-gold)!important;margin-bottom:0!important}
  body:has(.public-ambient) #reporting{border-top:0!important;margin-top:0!important}
  /* Oversized, low-opacity abstract curves inspired by the Tavré emblem; never a small logo stamp. */
  body:has(.public-ambient) #solutions::after,body:has(.public-ambient) #execution::after,body:has(.public-ambient) #reporting::after{content:"";position:absolute;inset:-8% -3%;z-index:-1;pointer-events:none;opacity:.20;background:radial-gradient(ellipse at 0% 100%,transparent 0 20%,rgba(244,185,82,.34) 20.1% 20.25%,transparent 20.4% 27%,rgba(244,185,82,.22) 27.1% 27.25%,transparent 27.4%),radial-gradient(ellipse at 100% 0%,transparent 0 22%,rgba(244,185,82,.28) 22.1% 22.22%,transparent 22.4% 29%,rgba(244,185,82,.18) 29.1% 29.22%,transparent 29.4%)}
  body:has(.public-ambient) #solutions article,body:has(.public-ambient) #execution article{background:rgba(1,28,22,.66)!important;border-color:rgba(244,185,82,.18)!important}
  body:has(.public-ambient) p,body:has(.public-ambient) li{font-size:1.05rem;line-height:1.75}
  body:has(.public-ambient) #platform .text-\[9px\],body:has(.public-ambient) #platform .text-\[10px\],body:has(.public-ambient) #platform .text-\[11px\]{color:#40554D!important}
  body:has(.public-ambient) #platform .home-product-preview p,body:has(.public-ambient) #platform .home-product-preview span{color:#E4E7E1!important}
  @media(max-width:640px){body:has(.public-ambient) p,body:has(.public-ambient) li{font-size:1rem}}

/* Extracted from index.html.erb — block 4; original order preserved. */
/* Homepage-only finishing pass: keep the established alternating section rhythm. */
  body:has(.public-ambient) #platform {
    background: linear-gradient(135deg, #E4E7E1 0%, #F4EFE3 100%) !important;
    color: #102B25 !important;
  }
  body:has(.public-ambient) #platform h2,
  body:has(.public-ambient) #platform h3,
  body:has(.public-ambient) #platform p { color: #102B25 !important; }
  body:has(.public-ambient) #platform p { color: #40554D !important; }
  body:has(.public-ambient) #platform a[href="#execution"] { color: #93620A !important; }
  body:has(.public-ambient) #platform a[href="#execution"]:hover,
  body:has(.public-ambient) #platform a[href="#execution"]:focus-visible { color: #074C3E !important; }

  /* The product preview is intentionally dark; its identity and workspace labels must stay light. */
  body:has(.public-ambient) .home-product-preview .home-preview-sidebar p,
  body:has(.public-ambient) .home-product-preview .home-preview-sidebar [data-preview-nav],
  body:has(.public-ambient) .home-product-preview .home-preview-sidebar [data-preview-nav] span { color: #E8F0E9 !important; }
  body:has(.public-ambient) .home-product-preview .home-preview-sidebar p.text-\[9px\] { color: #C6D7CE !important; }
  body:has(.public-ambient) .home-product-preview .home-preview-sidebar p.text-\[13px\] { color: #FFF9EC !important; }
  body:has(.public-ambient) .home-product-preview .home-preview-sidebar [data-preview-nav] { background-color: transparent; }
  body:has(.public-ambient) .home-product-preview .home-preview-sidebar [data-preview-nav]:hover { background-color: rgba(244,185,82,.12); color: #F4B952 !important; }

  /* Alternate the final demo CTA to cream after the dark reporting section. */
  body:has(.public-ambient) #contact {
    background: linear-gradient(125deg, #F4EFE3 0%, #E4E7E1 55%, #F8F3E8 100%) !important;
    color: #102B25 !important;
    border-color: #D0D5C9 !important;
  }
  body:has(.public-ambient) #contact h2,
  body:has(.public-ambient) #contact h3 { color: #102B25 !important; }
  body:has(.public-ambient) #contact p { color: #40554D !important; }
  body:has(.public-ambient) #contact .border { border-color: #AAB9AD; }
  body:has(.public-ambient) #contact .text-\[\#C7D4CD\] { color: #40554D !important; }
  body:has(.public-ambient) #contact a[href^="mailto:"],
  body:has(.public-ambient) #contact a[href*="session"] { color: #102B25; }

/* Extracted from index.html.erb — block 5; original order preserved. */
/* Match the Product page: full-width Tavré gold/emerald borders at both section edges. */
  body:has(.public-ambient) section.public-ambient,
  body:has(.public-ambient) section.public-color-strip,
  body:has(.public-ambient) section.public-color-section {
    position: relative;
    isolation: isolate;
    border-top: 3px solid #F4B952 !important;
    border-bottom: 3px solid #F4B952 !important;
  }

  body:has(.public-ambient) section.public-ambient::before,
  body:has(.public-ambient) section.public-color-strip::before,
  body:has(.public-ambient) section.public-color-section::before {
    content: "";
    position: absolute;
    z-index: 20;
    top: -3px;
    left: 0;
    right: 0;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgba(121,185,154,.9) 0%,
      rgba(121,185,154,.75) 22%,
      #F4B952 50%,
      rgba(121,185,154,.75) 78%,
      rgba(121,185,154,.9) 100%);
    box-shadow: 0 0 10px rgba(244,185,82,.42), 0 0 22px rgba(121,185,154,.22);
  }

  @media (prefers-reduced-motion: reduce) {
    body:has(.public-ambient) section.public-ambient::before,
    body:has(.public-ambient) section.public-color-strip::before,
    body:has(.public-ambient) section.public-color-section::before {
      box-shadow: none;
    }
  }

.home-grid-texture {
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Homepage dashboard preview — improve heading contrast */
.home-dashboard-head .home-preview-eyebrow {
  color: #D9E5DE !important;
  opacity: 1 !important;
}

.home-dashboard-head .home-preview-eyebrow i {
  background-color: #F4B952 !important;
  opacity: 1 !important;
}

.home-dashboard-head h3 {
  color: #F3F7F5 !important;
  opacity: 1 !important;
}

.home-dashboard-head .home-preview-subtitle {
  color: #C5D7D1 !important;
  opacity: 1 !important;
}

.home-dashboard-head .home-dashboard-operational {
  color: #D9E5DE !important;
  opacity: 1 !important;
}

.home-dashboard-head .home-dashboard-operational i {
  opacity: 1 !important;
}
/* Homepage dashboard preview — improve heading contrast */
.home-dashboard-head .home-preview-eyebrow {
  color: #D9E5DE !important;
  opacity: 1 !important;
}

.home-dashboard-head .home-preview-eyebrow i {
  background-color: #F4B952 !important;
  opacity: 1 !important;
}

.home-dashboard-head h3 {
  color: #F3F7F5 !important;
  opacity: 1 !important;
}

.home-dashboard-head .home-preview-subtitle {
  color: #C5D7D1 !important;
  opacity: 1 !important;
}

.home-dashboard-head .home-dashboard-operational {
  color: #D9E5DE !important;
  opacity: 1 !important;
}

.home-dashboard-head .home-dashboard-operational i {
  opacity: 1 !important;
}

.text-404 {
  font-size: 100px !important;
}

/* ===== Original stylesheet: public_product.css ===== */
/* Extracted from product.html.erb — block 1; original order preserved. */
.product-page {
    --bg: #050A10;
    --bg-soft: #00231C;
    --surface: #00382D;
    --surface-soft: #0D1722;
    --border: #285448;
    --text: #EDF3FB;
    --muted: #C7D4CD;
    --faint: #C7D4CD;
    --cyan: #F4B952;
    --blue: #DDA33D;
    --purple: #DDA33D;
    --pink: #DDA33D;
    --orange: #F59E0B;
    --green: #22C55E;
  }

  .product-page .product-grid {
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 48px 48px;
  }

  .product-page .product-glow {
    background:
      radial-gradient(circle at 15% 15%, rgba(1,191,192,.12), transparent 28%),
      radial-gradient(circle at 85% 20%, rgba(79,124,255,.10), transparent 27%),
      radial-gradient(circle at 50% 90%, rgba(139,92,246,.08), transparent 30%);
  }

  .product-page [data-product-stage],
  .product-page [data-lifecycle-step] {
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
  }

  .product-page [data-product-stage]:hover,
  .product-page [data-lifecycle-step]:hover {
    transform: translateY(-1px);
  }

  /* Scroll-driven architecture walkthrough */
  .product-page .architecture-story { position: relative; }
  .product-page .architecture-story-grid { display: grid; gap: 56px; align-items: start; }
  .product-page .architecture-story-grid > .architecture-story-visual-wrap { align-self: start; min-width: 0; }
  .product-page .architecture-story-grid > .architecture-story-copy,
  .product-page .architecture-story-grid > .architecture-story-visual-wrap { min-width: 0; }
  .product-page .architecture-story-copy { position: relative; }
  .product-page .architecture-story-step { min-height: 72vh; display: flex; align-items: center; padding: 70px 0; opacity: .32; transform: translateY(24px); transition: opacity .45s ease, transform .45s ease; }
  .product-page .architecture-story-step.is-active { opacity: 1; transform: translateY(0); }
  .product-page .architecture-story-step-inner { max-width: 540px; }
  .product-page .architecture-step-number { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #334255; border-radius: 999px; color: #F4B952; background: #00231C; font-size: 11px; font-weight: 700; }
  .product-page .architecture-step-kicker { margin-top: 20px; color: #F4B952; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
  .product-page .architecture-step-title { margin-top: 13px; color: #EDF3FB; font-size: clamp(32px, 4vw, 54px); line-height: 1.02; font-weight: 600; letter-spacing: -.045em; }
  .product-page .architecture-step-copy { margin-top: 20px; max-width: 510px; color: #C7D4CD; font-size: 16px; line-height: 1.8; }
  .product-page .architecture-step-meta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
  .product-page .architecture-step-meta span { border: 1px solid #285448; border-radius: 999px; padding: 7px 11px; color: #C7D4CD; background: #00382D; font-size: 11px; }
  .product-page .architecture-story-visual-wrap { position: relative; top: auto; height: min(640px, calc(100vh - 156px)); display: block; align-self: start; z-index: 5; min-width: 0; }
  .product-page .architecture-story-visual-wrap.is-pinned { position: fixed; z-index: 30; }
  .product-page .architecture-story-visual-wrap.is-pinned-bottom { position: absolute; z-index: 5; }
  .product-page .architecture-story-visual { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; border: 1px solid #285448; border-radius: 26px; background: radial-gradient(circle at 50% 35%, rgba(1,191,192,.08), transparent 35%), #00231C; box-shadow: 0 35px 100px rgba(0,0,0,.28); }
  .product-page .architecture-story-visual::before { content: ''; position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: 42px 42px; pointer-events: none; }
  .product-page .architecture-visual-header { position: absolute; left: 28px; right: 28px; top: 24px; z-index: 4; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .product-page .architecture-visual-header small { color: #C7D4CD; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
  .product-page .architecture-visual-header strong { display: block; margin-top: 5px; color: #EDF3FB; font-size: 15px; }
  .product-page .architecture-visual-state { border: 1px solid rgba(1,191,192,.22); border-radius: 999px; background: rgba(1,191,192,.06); padding: 6px 9px; color: #61E0E1; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
  .product-page .architecture-flow { position: absolute; top: 88px; right: 48px; bottom: 72px; left: 48px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 5px; z-index: 2; overflow: visible; }
  .product-page .architecture-flow-node { position: relative; width: min(390px, 88%); height: 54px; min-height: 54px; flex: 0 0 54px; box-sizing: border-box; border: 1px solid #285448; border-radius: 14px; background: rgba(13,20,31,.94); padding: 5px 15px 4px; overflow: visible; transition: border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .35s ease, opacity .35s ease; }
  .product-page .architecture-flow-node:not(:last-child)::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 7px; background: linear-gradient(#405067, rgba(64,80,103,.18)); }
  .product-page .architecture-flow-node .node-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .product-page .architecture-flow-node .node-index { color: #69778A; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
  .product-page .architecture-flow-node .node-group { color: #596778; font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .product-page .architecture-flow-node .node-title { margin-top: 2px; color: #B7C3D1; font-size: 13px; line-height: 1.15; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .product-page .architecture-flow-node .node-detail { margin-top: 1px; color: #718094; font-size: 10px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .product-page .architecture-flow-node.is-active { border-color: rgba(1,191,192,.78); background: linear-gradient(90deg, rgba(1,191,192,.15), rgba(13,20,31,.97)); box-shadow: 0 0 0 1px rgba(1,191,192,.08), 0 0 38px rgba(1,191,192,.13); transform: translateX(5px); z-index: 4; }
  .product-page .architecture-flow-node.is-active .node-title { color: #EDF3FB; }
  .product-page .architecture-flow-node.is-complete { border-color: rgba(34,197,94,.25); }
  .product-page .architecture-flow-node.is-complete .node-index { color: #7BE59A; }
  .product-page .architecture-flow-node.is-complete .node-title { color: #B9C6D5; }
  .product-page .architecture-flow-progress { position: absolute; right: 20px; top: 50%; width: 3px; height: 250px; transform: translateY(-50%); border-radius: 999px; background: #285448; z-index: 3; }
  .product-page .architecture-flow-progress-bar { width: 100%; height: 0; border-radius: inherit; background: #F4B952; box-shadow: 0 0 14px rgba(1,191,192,.65); transition: height .45s ease; }
  .product-page .architecture-flow-footer { position: absolute; left: 28px; right: 28px; bottom: 18px; z-index: 4; display: flex; justify-content: space-between; gap: 16px; color: #596778; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
  @media (min-width: 1024px) {
    .product-page .architecture-story-grid { grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); align-items: start; }
  }
  /* Keep the final architecture card above the footer labels. The flow has a dedicated bottom reserve so the footer is never painted over by a node. */
  .product-page .architecture-flow-footer { pointer-events: none; }

  @media (max-width: 1023px) {
    .product-page .architecture-story-step { min-height: auto; padding: 54px 0 32px; }
    .product-page .architecture-story-visual-wrap { position: relative; top: auto; height: 620px; margin-top: 8px; }
    .product-page .architecture-story-visual { height: 620px; min-height: 0; }
    .product-page .architecture-flow { right: 32px; left: 32px; }
    .product-page .architecture-flow-node { width: min(360px, 92%); }
  }
  @media (max-width: 640px) {
    /* Mobile architecture: use a natural-height vertical flow instead of
       compressing eight cards into a fixed-height panel. */
    .product-page .architecture-story-grid { gap: 24px; }
    .product-page .architecture-story-step { min-height: auto; padding: 28px 0 20px; }
    .product-page .architecture-step-title { font-size: clamp(28px, 7vw, 36px); line-height: 1.08; overflow-wrap: anywhere; }
    .product-page .architecture-step-copy { font-size: 15px; line-height: 1.7; }

    .product-page .architecture-story-visual-wrap {
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      height: auto;
      min-height: 0;
      margin-top: 8px;
    }
    .product-page .architecture-story-visual {
      height: auto;
      min-height: 0;
      overflow: hidden;
      border-radius: 20px;
    }
    .product-page .architecture-visual-header {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      align-items: flex-start;
      padding: 18px 16px 16px;
      gap: 10px;
    }
    .product-page .architecture-visual-header > div { min-width: 0; }
    .product-page .architecture-visual-header small { font-size: 8px; line-height: 1.6; letter-spacing: .14em; }
    .product-page .architecture-visual-header strong { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
    .product-page .architecture-visual-state { flex: 0 0 auto; font-size: 8px; letter-spacing: .08em; padding: 6px 8px; }

    .product-page .architecture-flow {
      position: relative;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 8px;
      padding: 0 16px 20px;
      overflow: visible;
    }
    .product-page .architecture-flow-node {
      width: 100%;
      height: auto;
      min-height: 68px;
      flex: 0 0 auto;
      padding: 9px 12px;
      border-radius: 13px;
      overflow-wrap: anywhere;
    }
    .product-page .architecture-flow-node .node-top { align-items: flex-start; gap: 8px; }
    .product-page .architecture-flow-node .node-index { font-size: 10px; }
    .product-page .architecture-flow-node .node-group {
      max-width: 62%;
      font-size: 8px;
      line-height: 1.4;
      letter-spacing: .1em;
      text-align: right;
      white-space: normal;
    }
    .product-page .architecture-flow-node .node-title {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      font-size: 14px;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }
    .product-page .architecture-flow-node .node-detail {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      font-size: 11px;
      line-height: 1.4;
      overflow-wrap: anywhere;
    }
    .product-page .architecture-flow-node.is-active { transform: none; }
    .product-page .architecture-flow-progress { display: none; }
    .product-page .architecture-flow-footer {
      position: relative;
      left: auto;
      right: auto;
      bottom: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 0 16px 16px;
      font-size: 8px;
      line-height: 1.6;
      overflow-wrap: anywhere;
    }
  }


  /* Page sections and heading sizes are defined by their own section classes and responsive utilities. */
  .product-page { --bg:#E7E8E1; --bg-soft:#E1E5DE; --surface:#F7F3E9; --surface-soft:#ECEDE6; --border:#C9D1C7; --text:#10231F; --muted:#43564E; --faint:#53635C; }
  .product-page > section { border-top:1px solid rgba(16,35,31,.16); border-bottom:1px solid rgba(16,35,31,.12); }
  .product-page p, .product-page li { line-height:1.75; }
  .product-page .text-slate-400, .product-page .text-slate-500, .product-page .text-gray-400, .product-page .text-gray-500,
  .product-page .text-[#64748B], .product-page .text-[#94A3B8], .product-page .text-[#9AA8B8], .product-page .text-[#C7D4CD] { color:#53635C !important; }
  .product-page .product-glow .text-slate-400, .product-page .product-glow .text-slate-500,
  .product-page .product-glow .text-gray-400, .product-page .product-glow .text-gray-500,
  .product-page .product-glow .text-[#64748B], .product-page .product-glow .text-[#94A3B8], .product-page .product-glow .text-[#9AA8B8], .product-page .product-glow .text-[#C7D4CD],
  .product-page .architecture-story .text-slate-400, .product-page .architecture-story .text-slate-500,
  .product-page .architecture-story .text-gray-400, .product-page .architecture-story .text-gray-500,
  .product-page .architecture-story .text-[#64748B], .product-page .architecture-story .text-[#94A3B8], .product-page .architecture-story .text-[#9AA8B8], .product-page .architecture-story .text-[#C7D4CD] { color:#D9E3DC !important; }
  .product-page .rounded-xl, .product-page .rounded-2xl { border-color:rgba(7,76,62,.22); }
  .product-page .architecture-story .rounded-xl, .product-page .architecture-story .rounded-2xl { background-color:rgba(2,28,22,.58); border-color:rgba(244,185,82,.24); }


  /* Product page: match the homepage palette and alternate section surfaces consistently. */
  .product-page { background:#EEF2F6 !important; color:#062820 !important; }
  .product-page > section { border-color:rgba(7,76,62,.16) !important; }
  /* The architecture opens on the same soft, cool background as the homepage hero. */
  .product-page > #architecture-flow {
    background:
      radial-gradient(circle at 12% 18%, rgba(244,185,82,.12), transparent 28%),
      radial-gradient(circle at 88% 78%, rgba(7,76,62,.08), transparent 30%),
      #EEF2F6 !important;
    color:#062820 !important;
  }
  /* Alternate the remaining major sections between deep TAVRÉ green and warm light. */
  .product-page > #entry-paths,
  .product-page > #commercial-control,
  .product-page > #financial-closure {
    background:
      radial-gradient(circle at 10% 12%, rgba(244,185,82,.07), transparent 28%),
      radial-gradient(circle at 90% 85%, rgba(19,105,79,.18), transparent 34%),
      linear-gradient(135deg,#062820 0%,#074C3E 100%) !important;
    color:#F8F3E8 !important;
  }
  .product-page > #media-planning,
  .product-page > #execution-verification,
  .product-page > #reporting,
  .product-page > #product-cta {
    background:
      radial-gradient(circle at 88% 18%, rgba(244,185,82,.09), transparent 27%),
      #E7ECEF !important;
    color:#102D25 !important;
  }
  /* Dark sections must always use light foreground text, including inherited Tailwind colors. */
  .product-page > #entry-paths p, .product-page > #entry-paths li,
  .product-page > #commercial-control p, .product-page > #commercial-control li,
  .product-page > #financial-closure p, .product-page > #financial-closure li,
  .product-page > #entry-paths h1, .product-page > #entry-paths h2, .product-page > #entry-paths h3,
  .product-page > #commercial-control h1, .product-page > #commercial-control h2, .product-page > #commercial-control h3,
  .product-page > #financial-closure h1, .product-page > #financial-closure h2, .product-page > #financial-closure h3 {
    color:#F8F3E8 !important;
  }
  .product-page > #entry-paths .text-[#C7D4CD],
  .product-page > #commercial-control .text-[#C7D4CD],
  .product-page > #financial-closure .text-[#C7D4CD],
  .product-page > #entry-paths .text-slate-400, .product-page > #entry-paths .text-slate-500,
  .product-page > #commercial-control .text-slate-400, .product-page > #commercial-control .text-slate-500,
  .product-page > #financial-closure .text-slate-400, .product-page > #financial-closure .text-slate-500 {
    color:#D8E6DF !important;
  }
  /* Cards keep strong contrast on either section surface. */
  .product-page > #entry-paths article, .product-page > #commercial-control article,
  .product-page > #financial-closure article, .product-page > #entry-paths .rounded-xl,
  .product-page > #commercial-control .rounded-xl, .product-page > #financial-closure .rounded-xl {
    color:#F8F3E8;
  }
  .product-page > #media-planning p, .product-page > #media-planning li,
  .product-page > #execution-verification p, .product-page > #execution-verification li,
  .product-page > #reporting p, .product-page > #reporting li,
  .product-page > #product-cta p, .product-page > #product-cta li {
    color:#40554D !important;
  }
  .product-page > #media-planning h1, .product-page > #media-planning h2, .product-page > #media-planning h3,
  .product-page > #execution-verification h1, .product-page > #execution-verification h2, .product-page > #execution-verification h3,
  .product-page > #reporting h1, .product-page > #reporting h2, .product-page > #reporting h3,
  .product-page > #product-cta h1, .product-page > #product-cta h2, .product-page > #product-cta h3 {
    color:#062820 !important;
  }
  .product-page > #media-planning article, .product-page > #execution-verification article,
  .product-page > #reporting article, .product-page > #product-cta article {
    background:#F8F6EF !important;
    border-color:rgba(7,76,62,.18) !important;
    color:#102D25 !important;
  }
  .product-page > #media-planning article p, .product-page > #execution-verification article p,
  .product-page > #reporting article p, .product-page > #product-cta article p,
  .product-page > #media-planning article li, .product-page > #execution-verification article li,
  .product-page > #reporting article li, .product-page > #product-cta article li {
    color:#40554D !important;
  }
  .product-page > #architecture-flow h1, .product-page > #architecture-flow h2,
  .product-page > #architecture-flow h3 { color:#062820 !important; }
  /* Gradient belongs specifically to the System Architecture headline. */
  .product-page > #architecture-flow h2.architecture-gradient-heading {
    display: inline-block;
    background-image: linear-gradient(100deg, #075B46 0%, #0D8B68 28%, #55C9A0 52%, #168A69 76%, #064D3B 100%);
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
  .product-page > #architecture-flow p, .product-page > #architecture-flow li { color:#40554D !important; }
  .product-page > #architecture-flow .architecture-story { color:#062820 !important; }

/* Extracted from product.html.erb — block 2; original order preserved. */
.product-page{background:#E4E7E1!important;color:#102B25!important}
  .product-page #architecture-flow{background:linear-gradient(135deg,#0A211C 0%,#123A30 52%,#082A23 100%)!important;color:#F8F3E8!important;position:relative;isolation:isolate}
  .product-page #architecture-flow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.24;background:radial-gradient(ellipse at -5% 100%,transparent 0 23%,rgba(244,185,82,.38) 23.1% 23.22%,transparent 23.4% 30%,rgba(244,185,82,.22) 30.1% 30.22%,transparent 30.4%),radial-gradient(ellipse at 105% 0%,transparent 0 20%,rgba(244,185,82,.30) 20.1% 20.22%,transparent 20.4% 29%,rgba(244,185,82,.16) 29.1% 29.22%,transparent 29.4%)}
  .product-page #architecture-flow h2,.product-page #architecture-flow h3,.product-page #architecture-flow .architecture-step-title{color:#F8F3E8!important}
  .product-page #architecture-flow p,.product-page #architecture-flow li,.product-page #architecture-flow .architecture-step-copy{color:#D7E2DB!important}
  .product-page #architecture-flow .architecture-story-visual{background:linear-gradient(145deg,rgba(5,27,22,.98),rgba(7,54,43,.97))!important;border-color:rgba(244,185,82,.35)!important}
  .product-page #architecture-flow .architecture-flow-node{background:rgba(5,30,24,.96)!important;border-color:rgba(244,185,82,.24)!important}
  .product-page #architecture-flow .architecture-flow-node .node-title{color:#F8F3E8!important}
  .product-page #architecture-flow .architecture-flow-node .node-detail{color:#C4D4CB!important}
  .product-page #architecture-flow .architecture-flow-node .node-index,.product-page #architecture-flow .architecture-flow-node .node-group{color:#D0B16D!important}
  .product-page section:not(#architecture-flow){background-color:#E4E7E1!important;color:#102B25!important;border-color:#C5CEC6!important}
  .product-page section:not(#architecture-flow) h1,.product-page section:not(#architecture-flow) h2,.product-page section:not(#architecture-flow) h3,.product-page section:not(#architecture-flow) strong{color:#102B25!important}
  .product-page section:not(#architecture-flow) p,.product-page section:not(#architecture-flow) li{color:#40554D!important}
  .product-page section:not(#architecture-flow) article,.product-page section:not(#architecture-flow) .rounded-xl,.product-page section:not(#architecture-flow) .rounded-2xl{background:#F7F3E9!important;border-color:#C9D1C7!important}
  .product-page section:not(#architecture-flow) article p,.product-page section:not(#architecture-flow) .rounded-xl p,.product-page section:not(#architecture-flow) .rounded-2xl p{color:#40554D!important}
  .product-page section:not(#architecture-flow) .bg-\[\#00231C\],.product-page section:not(#architecture-flow) .bg-\[\#00382D\]{background:#F7F3E9!important}
  .product-page .text-\[\#F4B952\]{color:#9A6500!important}
  .product-page section:not(#architecture-flow) a.bg-\[\#F4B952\]{background:#F4B952!important;color:#10231F!important}
  .product-page #architecture-flow{background-image:none!important}

/* Extracted from product.html.erb — block 3; original order preserved. */
/* Content must remain readable even when scroll activation JavaScript is unavailable. */
  .product-page .architecture-story-step,.product-page .architecture-story-step:not(.is-active){opacity:1!important;transform:none!important}
  .product-page section:not(#architecture-flow) .text-\[\#C7D4CD\],.product-page section:not(#architecture-flow) .text-\[\#EDF3FB\],.product-page section:not(#architecture-flow) .text-\[\#9AA8B8\],.product-page section:not(#architecture-flow) .text-\[\#94A3B8\],.product-page section:not(#architecture-flow) .text-\[\#718195\],.product-page section:not(#architecture-flow) .text-\[\#8EABFF\],.product-page section:not(#architecture-flow) .text-\[\#7BE59A\]{color:#40554D!important}
  .product-page section:not(#architecture-flow) .text-\[\#EDF3FB\]{color:#102B25!important}
  .product-page section:not(#architecture-flow) .rounded-xl span,.product-page section:not(#architecture-flow) .rounded-2xl span{color:#40554D}
  .product-page section:not(#architecture-flow) a.bg-\[\#F4B952\],.product-page section:not(#architecture-flow) button.bg-\[\#F4B952\]{color:#10231F!important}
  @media(prefers-reduced-motion:reduce){.product-page .architecture-story-step{transition:none!important}}

/* Extracted from product.html.erb — block 4; original order preserved. */
/* Architecture section must match the homepage's soft hero background, not the long green treatment. */
  .product-page #architecture-flow {
    /* Match the Homepage / Contact light hero: warm cream with subtle gold and emerald ambient gradients. */
    background:
      radial-gradient(circle at 15% 15%, rgba(244, 185, 82, 0.12), transparent 30%),
      radial-gradient(circle at 82% 20%, rgba(7, 76, 62, 0.08), transparent 28%),
      radial-gradient(circle at 55% 85%, rgba(7, 76, 62, 0.05), transparent 32%),
      #F8F3E8 !important;
    color: #062820 !important;
    border-color: rgba(7,76,62,.16) !important;
  }
  .product-page #architecture-flow h1,
  .product-page #architecture-flow h2,
  .product-page #architecture-flow h3,
  .product-page #architecture-flow .architecture-step-title { color: #062820 !important; }
  .product-page #architecture-flow p,
  .product-page #architecture-flow li,
  .product-page #architecture-flow .architecture-step-copy { color: #40554D !important; }
  .product-page #architecture-flow .text-\\[\\#F4B952\\],
  .product-page #architecture-flow .text-\\[\\#61E0E1\\] { color: #9A6500 !important; }
  /* Keep the architecture's workflow illustration dark so its nodes remain distinct. */
  .product-page #architecture-flow .architecture-story-visual {
    background: linear-gradient(145deg, #061C18 0%, #07382D 100%) !important;
    border-color: rgba(7,76,62,.32) !important;
  }
  .product-page #architecture-flow .architecture-story-visual h1,
  .product-page #architecture-flow .architecture-story-visual h2,
  .product-page #architecture-flow .architecture-story-visual h3,
  .product-page #architecture-flow .architecture-story-visual p,
  .product-page #architecture-flow .architecture-story-visual span { color: #F8F3E8 !important; }
  .product-page #architecture-flow .architecture-flow-node {
    background: rgba(5,30,24,.97) !important;
    border-color: rgba(244,185,82,.28) !important;
  }
  .product-page #architecture-flow .architecture-flow-node .node-title { color: #F8F3E8 !important; }
  .product-page #architecture-flow .architecture-flow-node .node-detail { color: #D8E6DF !important; }
  /* Repeat the homepage's alternating light / deep-green section rhythm. */
  .product-page #entry-paths,
  .product-page #commercial-control,
  .product-page #financial-closure {
    background:
      radial-gradient(ellipse at 8% 8%, rgba(244,185,82,.07), transparent 30%),
      radial-gradient(ellipse at 92% 90%, rgba(19,105,79,.20), transparent 35%),
      linear-gradient(135deg, #062820 0%, #074C3E 100%) !important;
    color: #F8F3E8 !important;
    border-color: rgba(244,185,82,.18) !important;
  }
  .product-page #media-planning,
  .product-page #execution-verification,
  .product-page #reporting,
  .product-page #product-cta {
    background:
      radial-gradient(ellipse at 12% 12%, rgba(7,76,62,.06), transparent 32%),
      radial-gradient(ellipse at 90% 85%, rgba(244,185,82,.10), transparent 32%),
      linear-gradient(135deg, #EEF0E9 0%, #F4EFE3 100%) !important;
    color: #102B25 !important;
    border-color: rgba(7,76,62,.16) !important;
  }
  .product-page #entry-paths h1,.product-page #entry-paths h2,.product-page #entry-paths h3,
  .product-page #commercial-control h1,.product-page #commercial-control h2,.product-page #commercial-control h3,
  .product-page #financial-closure h1,.product-page #financial-closure h2,.product-page #financial-closure h3,
  .product-page #entry-paths strong,.product-page #commercial-control strong,.product-page #financial-closure strong { color: #F8F3E8 !important; }
  .product-page #entry-paths p,.product-page #entry-paths li,
  .product-page #commercial-control p,.product-page #commercial-control li,
  .product-page #financial-closure p,.product-page #financial-closure li { color: #D8E6DF !important; }
  .product-page #entry-paths article,.product-page #commercial-control article,.product-page #financial-closure article,
  .product-page #entry-paths .rounded-xl,.product-page #commercial-control .rounded-xl,.product-page #financial-closure .rounded-xl,
  .product-page #entry-paths .rounded-2xl,.product-page #commercial-control .rounded-2xl,.product-page #financial-closure .rounded-2xl {
    background: rgba(2,32,25,.72) !important;
    border-color: rgba(244,185,82,.22) !important;
    color: #F8F3E8 !important;
  }
  .product-page #entry-paths article p,.product-page #commercial-control article p,.product-page #financial-closure article p,
  .product-page #entry-paths article li,.product-page #commercial-control article li,.product-page #financial-closure article li { color: #D8E6DF !important; }
  .product-page #media-planning h1,.product-page #media-planning h2,.product-page #media-planning h3,
  .product-page #execution-verification h1,.product-page #execution-verification h2,.product-page #execution-verification h3,
  .product-page #reporting h1,.product-page #reporting h2,.product-page #reporting h3,
  .product-page #product-cta h1,.product-page #product-cta h2,.product-page #product-cta h3 { color: #062820 !important; }
  .product-page #media-planning p,.product-page #media-planning li,
  .product-page #execution-verification p,.product-page #execution-verification li,
  .product-page #reporting p,.product-page #reporting li,
  .product-page #product-cta p,.product-page #product-cta li { color: #40554D !important; }
  .product-page #media-planning article,.product-page #execution-verification article,
  .product-page #reporting article,.product-page #product-cta article {
    background: #FBF8F0 !important;
    border-color: rgba(7,76,62,.18) !important;
    color: #102B25 !important;
  }
  .product-page #media-planning article p,.product-page #execution-verification article p,
  .product-page #reporting article p,.product-page #product-cta article p,
  .product-page #media-planning article li,.product-page #execution-verification article li,
  .product-page #reporting article li,.product-page #product-cta article li { color: #40554D !important; }

/* Extracted from product.html.erb — block 5; original order preserved. */
/* Final, high-specificity override: match the homepage hero's warm, pale background. */
  body:has(.product-page) .product-page > section#architecture-flow {
    background:
      radial-gradient(ellipse at 15% 12%, rgba(7,76,62,.055), transparent 34%),
      radial-gradient(ellipse at 88% 82%, rgba(244,185,82,.10), transparent 34%),
      linear-gradient(135deg, #EEF0E9 0%, #F4EFE3 100%) !important;
    background-color: #EEF0E9 !important;
    background-image:
      radial-gradient(ellipse at 15% 12%, rgba(7,76,62,.055), transparent 34%),
      radial-gradient(ellipse at 88% 82%, rgba(244,185,82,.10), transparent 34%),
      linear-gradient(135deg, #EEF0E9 0%, #F4EFE3 100%) !important;
    color: #102B25 !important;
    border-color: rgba(7,76,62,.16) !important;
  }
  body:has(.product-page) .product-page > section#architecture-flow > div,
  body:has(.product-page) .product-page > section#architecture-flow .architecture-story-copy {
    color: #102B25 !important;
  }
  body:has(.product-page) .product-page > section#architecture-flow h1,
  body:has(.product-page) .product-page > section#architecture-flow h2,
  body:has(.product-page) .product-page > section#architecture-flow h3,
  body:has(.product-page) .product-page > section#architecture-flow .architecture-step-title {
    color: #062820 !important;
  }
  body:has(.product-page) .product-page > section#architecture-flow p,
  body:has(.product-page) .product-page > section#architecture-flow li,
  body:has(.product-page) .product-page > section#architecture-flow .architecture-step-copy,
  body:has(.product-page) .product-page > section#architecture-flow .architecture-step-meta span {
    color: #40554D !important;
  }
  body:has(.product-page) .product-page > section#architecture-flow .architecture-step-number {
    color: #946000 !important;
    border-color: rgba(7,76,62,.22) !important;
    background: #F7F3E9 !important;
  }
  body:has(.product-page) .product-page > section#architecture-flow .architecture-step-kicker,
  body:has(.product-page) .product-page > section#architecture-flow .architecture-step-meta span {
    border-color: rgba(7,76,62,.18) !important;
  }
  /* Preserve the dark workflow illustration and its light, readable labels. */
  body:has(.product-page) .product-page > section#architecture-flow .architecture-story-visual {
    background: linear-gradient(145deg, #061C18 0%, #07382D 100%) !important;
    border-color: rgba(7,76,62,.32) !important;
    color: #F8F3E8 !important;
  }
  body:has(.product-page) .product-page > section#architecture-flow .architecture-story-visual h1,
  body:has(.product-page) .product-page > section#architecture-flow .architecture-story-visual h2,
  body:has(.product-page) .product-page > section#architecture-flow .architecture-story-visual h3,
  body:has(.product-page) .product-page > section#architecture-flow .architecture-story-visual p,
  body:has(.product-page) .product-page > section#architecture-flow .architecture-story-visual span {
    color: #F8F3E8 !important;
  }
  body:has(.product-page) .product-page > section#architecture-flow .architecture-flow-node {
    background: rgba(5,30,24,.97) !important;
    border-color: rgba(244,185,82,.28) !important;
  }
  body:has(.product-page) .product-page > section#architecture-flow .architecture-flow-node .node-title { color: #F8F3E8 !important; }
  body:has(.product-page) .product-page > section#architecture-flow .architecture-flow-node .node-detail { color: #D8E6DF !important; }
  body:has(.product-page) .product-page > section#architecture-flow .architecture-flow-node .node-index,
  body:has(.product-page) .product-page > section#architecture-flow .architecture-flow-node .node-group { color: #D0B16D !important; }

/* Extracted from product.html.erb — block 6; original order preserved. */
/* Keep the explanatory architecture steps dark on the light homepage-style surface. */
  body:has(.product-page) .product-page #architecture-flow .architecture-story-step,
  body:has(.product-page) .product-page #architecture-flow .architecture-story-step:not(.is-active) {
    opacity: 1 !important;
    color: #102B25 !important;
  }
  body:has(.product-page) .product-page #architecture-flow .architecture-story-step .architecture-step-number {
    color: #805500 !important;
    background: #F7F3E9 !important;
    border-color: #C9D1C7 !important;
  }
  body:has(.product-page) .product-page #architecture-flow .architecture-story-step .architecture-step-kicker {
    color: #52665D !important;
  }
  body:has(.product-page) .product-page #architecture-flow .architecture-story-step .architecture-step-title {
    color: #062820 !important;
  }
  body:has(.product-page) .product-page #architecture-flow .architecture-story-step .architecture-step-copy {
    color: #40554D !important;
  }
  body:has(.product-page) .product-page #architecture-flow .architecture-story-step .architecture-step-meta span {
    color: #23483D !important;
    background: #E2E8E0 !important;
    border-color: #C5CEC6 !important;
  }
  /* Keep the architecture illustration intentionally dark; only the left-side story text changes. */
  body:has(.product-page) .product-page #architecture-flow .architecture-story-visual,
  body:has(.product-page) .product-page #architecture-flow .architecture-story-visual * {
    /* Its existing dedicated dark-card rules remain in effect. */
  }

/* Extracted from product.html.erb — block 7; original order preserved. */
/* Match the homepage's deep, atmospheric TAVRÉ green rather than the flat/saturated green. */
  body:has(.product-page) .product-page > section#entry-paths,
  body:has(.product-page) .product-page > section#commercial-control,
  body:has(.product-page) .product-page > section#financial-closure,
  body:has(.product-page) .product-page > section:not([id]) {
    background-color: #062820 !important;
    background-image:
      radial-gradient(ellipse at 12% 8%, rgba(244,185,82,.075), transparent 32%),
      radial-gradient(ellipse at 88% 18%, rgba(7,76,62,.34), transparent 38%),
      radial-gradient(ellipse at 55% 115%, rgba(7,76,62,.30), transparent 48%),
      repeating-linear-gradient(115deg, transparent 0, transparent 78px, rgba(244,185,82,.018) 79px, transparent 81px),
      linear-gradient(135deg, #062820 0%, #05251F 52%, #07382D 100%) !important;
    color: #F8F3E8 !important;
    border-color: rgba(244,185,82,.16) !important;
  }
  body:has(.product-page) .product-page > section#entry-paths h1,
  body:has(.product-page) .product-page > section#entry-paths h2,
  body:has(.product-page) .product-page > section#entry-paths h3,
  body:has(.product-page) .product-page > section#commercial-control h1,
  body:has(.product-page) .product-page > section#commercial-control h2,
  body:has(.product-page) .product-page > section#commercial-control h3,
  body:has(.product-page) .product-page > section#financial-closure h1,
  body:has(.product-page) .product-page > section#financial-closure h2,
  body:has(.product-page) .product-page > section#financial-closure h3,
  body:has(.product-page) .product-page > section:not([id]) h1,
  body:has(.product-page) .product-page > section:not([id]) h2,
  body:has(.product-page) .product-page > section:not([id]) h3 {
    color: #F8F3E8 !important;
  }
  body:has(.product-page) .product-page > section#entry-paths p,
  body:has(.product-page) .product-page > section#entry-paths li,
  body:has(.product-page) .product-page > section#commercial-control p,
  body:has(.product-page) .product-page > section#commercial-control li,
  body:has(.product-page) .product-page > section#financial-closure p,
  body:has(.product-page) .product-page > section#financial-closure li,
  body:has(.product-page) .product-page > section:not([id]) p,
  body:has(.product-page) .product-page > section:not([id]) li {
    color: #D8E6DF !important;
  }

/* Extracted from product.html.erb — block 8; original order preserved. */
/* Cream cards inside the homepage-matched green sections need dark, high-contrast text. */
  body:has(.product-page) .product-page > section#entry-paths article,
  body:has(.product-page) .product-page > section#entry-paths .rounded-xl,
  body:has(.product-page) .product-page > section#entry-paths .rounded-2xl,
  body:has(.product-page) .product-page > section#commercial-control article,
  body:has(.product-page) .product-page > section#commercial-control .rounded-xl,
  body:has(.product-page) .product-page > section#commercial-control .rounded-2xl,
  body:has(.product-page) .product-page > section#financial-closure article,
  body:has(.product-page) .product-page > section#financial-closure .rounded-xl,
  body:has(.product-page) .product-page > section#financial-closure .rounded-2xl,
  body:has(.product-page) .product-page > section:not([id]) article,
  body:has(.product-page) .product-page > section:not([id]) .rounded-xl,
  body:has(.product-page) .product-page > section:not([id]) .rounded-2xl {
    background-color: #F7F3E9 !important;
    color: #102B25 !important;
    border-color: #D4D9CE !important;
  }

  body:has(.product-page) .product-page > section#entry-paths article h1,
  body:has(.product-page) .product-page > section#entry-paths article h2,
  body:has(.product-page) .product-page > section#entry-paths article h3,
  body:has(.product-page) .product-page > section#entry-paths article h4,
  body:has(.product-page) .product-page > section#entry-paths article h5,
  body:has(.product-page) .product-page > section#entry-paths article h6,
  body:has(.product-page) .product-page > section#entry-paths article p,
  body:has(.product-page) .product-page > section#entry-paths article li,
  body:has(.product-page) .product-page > section#entry-paths article span,
  body:has(.product-page) .product-page > section#entry-paths article strong,
  body:has(.product-page) .product-page > section#entry-paths .rounded-xl h1,
  body:has(.product-page) .product-page > section#entry-paths .rounded-xl h2,
  body:has(.product-page) .product-page > section#entry-paths .rounded-xl h3,
  body:has(.product-page) .product-page > section#entry-paths .rounded-xl h4,
  body:has(.product-page) .product-page > section#entry-paths .rounded-xl p,
  body:has(.product-page) .product-page > section#entry-paths .rounded-xl li,
  body:has(.product-page) .product-page > section#entry-paths .rounded-xl span,
  body:has(.product-page) .product-page > section#entry-paths .rounded-xl strong,
  body:has(.product-page) .product-page > section#entry-paths .rounded-2xl h1,
  body:has(.product-page) .product-page > section#entry-paths .rounded-2xl h2,
  body:has(.product-page) .product-page > section#entry-paths .rounded-2xl h3,
  body:has(.product-page) .product-page > section#entry-paths .rounded-2xl h4,
  body:has(.product-page) .product-page > section#entry-paths .rounded-2xl p,
  body:has(.product-page) .product-page > section#entry-paths .rounded-2xl li,
  body:has(.product-page) .product-page > section#entry-paths .rounded-2xl span,
  body:has(.product-page) .product-page > section#entry-paths .rounded-2xl strong,
  body:has(.product-page) .product-page > section#commercial-control article *,
  body:has(.product-page) .product-page > section#commercial-control .rounded-xl *,
  body:has(.product-page) .product-page > section#commercial-control .rounded-2xl *,
  body:has(.product-page) .product-page > section#financial-closure article *,
  body:has(.product-page) .product-page > section#financial-closure .rounded-xl *,
  body:has(.product-page) .product-page > section#financial-closure .rounded-2xl *,
  body:has(.product-page) .product-page > section:not([id]) article *,
  body:has(.product-page) .product-page > section:not([id]) .rounded-xl *,
  body:has(.product-page) .product-page > section:not([id]) .rounded-2xl * {
    color: #263F37 !important;
  }

  body:has(.product-page) .product-page > section#entry-paths article h1,
  body:has(.product-page) .product-page > section#entry-paths article h2,
  body:has(.product-page) .product-page > section#entry-paths article h3,
  body:has(.product-page) .product-page > section#entry-paths article h4,
  body:has(.product-page) .product-page > section#entry-paths article h5,
  body:has(.product-page) .product-page > section#entry-paths article h6,
  body:has(.product-page) .product-page > section#commercial-control article h1,
  body:has(.product-page) .product-page > section#commercial-control article h2,
  body:has(.product-page) .product-page > section#commercial-control article h3,
  body:has(.product-page) .product-page > section#commercial-control article h4,
  body:has(.product-page) .product-page > section#financial-closure article h1,
  body:has(.product-page) .product-page > section#financial-closure article h2,
  body:has(.product-page) .product-page > section#financial-closure article h3,
  body:has(.product-page) .product-page > section#financial-closure article h4 {
    color: #102B25 !important;
  }

/* Extracted from product.html.erb — block 9; original order preserved. */
/* Match the homepage's deep green sections, warm cream cards and gold accents. */
  .product-page > section#entry-paths,
  .product-page > section#commercial-control,
  .product-page > section#financial-closure,
  .product-page > section:not([id]) {
    background:
      radial-gradient(ellipse at 88% 12%, rgba(7,76,62,.42), transparent 32%),
      radial-gradient(ellipse at 8% 88%, rgba(244,185,82,.07), transparent 30%),
      linear-gradient(115deg, #00231C 0%, #073C30 55%, #064638 100%) !important;
    color: #F8F3E8 !important;
    border-color: rgba(244,185,82,.20) !important;
    position: relative;
    isolation: isolate;
  }

  .product-page > section#entry-paths::before,
  .product-page > section#commercial-control::before,
  .product-page > section#financial-closure::before,
  .product-page > section:not([id])::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .45;
    background-image:
      linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 48px 48px;
  }

  .product-page > section#entry-paths > div,
  .product-page > section#commercial-control > div,
  .product-page > section#financial-closure > div,
  .product-page > section:not([id]) > div {
    position: relative;
  }

  .product-page > section#entry-paths h1,
  .product-page > section#entry-paths h2,
  .product-page > section#entry-paths h3,
  .product-page > section#commercial-control h1,
  .product-page > section#commercial-control h2,
  .product-page > section#commercial-control h3,
  .product-page > section#financial-closure h1,
  .product-page > section#financial-closure h2,
  .product-page > section#financial-closure h3,
  .product-page > section:not([id]) h1,
  .product-page > section:not([id]) h2,
  .product-page > section:not([id]) h3 {
    color: #F8F3E8 !important;
  }

  .product-page > section#entry-paths > div > p,
  .product-page > section#commercial-control > div > p,
  .product-page > section#financial-closure > div > p,
  .product-page > section:not([id]) > div > p,
  .product-page > section#entry-paths > div > div > p,
  .product-page > section#commercial-control > div > div > p,
  .product-page > section#financial-closure > div > div > p,
  .product-page > section:not([id]) > div > div > p {
    color: #D8E4DC !important;
  }

  /* Cards use the homepage's warm cream surface, with dark, readable content. */
  .product-page > section#entry-paths article,
  .product-page > section#entry-paths .rounded-xl,
  .product-page > section#entry-paths .rounded-2xl,
  .product-page > section#commercial-control article,
  .product-page > section#commercial-control .rounded-xl,
  .product-page > section#commercial-control .rounded-2xl,
  .product-page > section#financial-closure article,
  .product-page > section#financial-closure .rounded-xl,
  .product-page > section#financial-closure .rounded-2xl,
  .product-page > section:not([id]) article,
  .product-page > section:not([id]) .rounded-xl,
  .product-page > section:not([id]) .rounded-2xl {
    background: #F7F3E9 !important;
    color: #102B25 !important;
    border-color: #D4D9CE !important;
    box-shadow: 0 16px 38px rgba(0,20,15,.12);
  }

  .product-page > section#entry-paths article *,
  .product-page > section#entry-paths .rounded-xl *,
  .product-page > section#entry-paths .rounded-2xl *,
  .product-page > section#commercial-control article *,
  .product-page > section#commercial-control .rounded-xl *,
  .product-page > section#commercial-control .rounded-2xl *,
  .product-page > section#financial-closure article *,
  .product-page > section#financial-closure .rounded-xl *,
  .product-page > section#financial-closure .rounded-2xl *,
  .product-page > section:not([id]) article *,
  .product-page > section:not([id]) .rounded-xl *,
  .product-page > section:not([id]) .rounded-2xl * {
    color: #40554D !important;
  }

  .product-page > section#entry-paths article h1,
  .product-page > section#entry-paths article h2,
  .product-page > section#entry-paths article h3,
  .product-page > section#entry-paths article h4,
  .product-page > section#commercial-control article h1,
  .product-page > section#commercial-control article h2,
  .product-page > section#commercial-control article h3,
  .product-page > section#commercial-control article h4,
  .product-page > section#financial-closure article h1,
  .product-page > section#financial-closure article h2,
  .product-page > section#financial-closure article h3,
  .product-page > section#financial-closure article h4,
  .product-page > section:not([id]) article h1,
  .product-page > section:not([id]) article h2,
  .product-page > section:not([id]) article h3,
  .product-page > section:not([id]) article h4,
  .product-page > section#entry-paths article strong,
  .product-page > section#commercial-control article strong,
  .product-page > section#financial-closure article strong,
  .product-page > section:not([id]) article strong {
    color: #102B25 !important;
  }

  .product-page > section#entry-paths article .text-\[\#F4B952\],
  .product-page > section#commercial-control article .text-\[\#F4B952\],
  .product-page > section#financial-closure article .text-\[\#F4B952\],
  .product-page > section:not([id]) article .text-\[\#F4B952\] {
    color: #9A6500 !important;
  }

  .product-page > section#entry-paths a.bg-\[\#F4B952\],
  .product-page > section#commercial-control a.bg-\[\#F4B952\],
  .product-page > section#financial-closure a.bg-\[\#F4B952\],
  .product-page > section:not([id]) a.bg-\[\#F4B952\] {
    background: #F4B952 !important;
    color: #10231F !important;
  }

  @media (max-width: 640px) {
    .product-page > section#entry-paths,
    .product-page > section#commercial-control,
    .product-page > section#financial-closure,
    .product-page > section:not([id]) { background-size: auto, auto, auto !important; }
  }

/* Extracted from product.html.erb — block 10; original order preserved. */
/* Homepage reference: deep evergreen base, restrained teal glow, fine grid, warm gold details. */
  .product-page > section#entry-paths,
  .product-page > section#commercial-control,
  .product-page > section#financial-closure {
    background:
      radial-gradient(ellipse at 82% 8%, rgba(7,76,62,.28), transparent 34%),
      radial-gradient(ellipse at 12% 92%, rgba(244,185,82,.055), transparent 31%),
      linear-gradient(112deg, #00231C 0%, #032C23 58%, #06372C 100%) !important;
    color: #F8F3E8 !important;
    border-color: rgba(244,185,82,.18) !important;
  }
  .product-page > section#entry-paths::before,
  .product-page > section#commercial-control::before,
  .product-page > section#financial-closure::before {
    opacity: .32 !important;
    background-image:
      linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
  }

  /* More visual hierarchy: larger architecture heading and body copy. */
  .product-page > section#architecture-flow .max-w-3xl > p:first-of-type {
    font-size: .82rem !important;
    letter-spacing: .24em !important;
    font-weight: 800 !important;
    color: #8A620C !important;
  }
  .product-page > section#architecture-flow .max-w-3xl > h2 {
    max-width: 1000px;
    font-size: clamp(2.8rem, 5.4vw, 5rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.055em !important;
  }
  .product-page > section#architecture-flow .max-w-3xl > p:last-child {
    max-width: 900px;
    font-size: clamp(1.08rem, 1.35vw, 1.25rem) !important;
    line-height: 1.8 !important;
  }
  .product-page .architecture-story-step { min-height: 76vh; }
  .product-page .architecture-step-number {
    width: 44px !important; height: 44px !important;
    border-color: rgba(154,101,0,.36) !important;
    background: linear-gradient(145deg,#FFFCF5,#F0E5CC) !important;
    color: #8A620C !important;
    box-shadow: 0 5px 16px rgba(16,43,37,.08);
  }
  .product-page .architecture-step-kicker { font-size:  .76rem !important; letter-spacing: .2em !important; }
  .product-page .architecture-step-title { font-size: clamp(2.4rem, 4.4vw, 4rem) !important; line-height: 1.04 !important; }
  .product-page .architecture-step-copy { font-size: clamp(1.05rem, 1.25vw, 1.2rem) !important; line-height: 1.85 !important; }
  .product-page .architecture-step-meta span {
    background: linear-gradient(135deg,#FFFCF5,#F1E8D7) !important;
    border-color: rgba(154,101,0,.22) !important;
    color: #334E44 !important;
    box-shadow: 0 3px 10px rgba(16,43,37,.05);
  }

  /* Cards on green sections: layered cream, a gold edge, richer depth and a subtle hover lift. */
  .product-page > section#entry-paths article,
  .product-page > section#commercial-control article,
  .product-page > section#financial-closure article,
  .product-page > section#entry-paths .rounded-xl,
  .product-page > section#entry-paths .rounded-2xl,
  .product-page > section#commercial-control .rounded-xl,
  .product-page > section#commercial-control .rounded-2xl,
  .product-page > section#financial-closure .rounded-xl,
  .product-page > section#financial-closure .rounded-2xl {
    background: linear-gradient(145deg, #FFFCF5 0%, #F4EEDF 100%) !important;
    border: 1px solid rgba(244,185,82,.42) !important;
    box-shadow: 0 18px 42px rgba(0,12,9,.22), inset 0 1px 0 rgba(255,255,255,.92) !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
  }
  .product-page > section#entry-paths article:hover,
  .product-page > section#commercial-control article:hover,
  .product-page > section#financial-closure article:hover {
    transform: translateY(-4px);
    border-color: rgba(244,185,82,.82) !important;
    box-shadow: 0 24px 48px rgba(0,12,9,.28), inset 0 1px 0 rgba(255,255,255,.96) !important;
  }
  .product-page > section#entry-paths article h3,
  .product-page > section#entry-paths article h4,
  .product-page > section#commercial-control article h3,
  .product-page > section#commercial-control article h4,
  .product-page > section#financial-closure article h3,
  .product-page > section#financial-closure article h4 {
    color: #102B25 !important;
    letter-spacing: -.025em;
  }
  .product-page > section#entry-paths article p,
  .product-page > section#commercial-control article p,
  .product-page > section#financial-closure article p,
  .product-page > section#entry-paths article li,
  .product-page > section#commercial-control article li,
  .product-page > section#financial-closure article li {
    color: #40554D !important;
  }
  .product-page > section#entry-paths article .text-\[\#F4B952\],
  .product-page > section#commercial-control article .text-\[\#F4B952\],
  .product-page > section#financial-closure article .text-\[\#F4B952\] {
    color: #946000 !important;
  }
  @media (max-width: 640px) {
    .product-page > section#architecture-flow .max-w-3xl > h2 { font-size: clamp(2.45rem, 10vw, 3.4rem) !important; }
    .product-page .architecture-story-step { min-height: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    .product-page > section#entry-paths article,
    .product-page > section#commercial-control article,
    .product-page > section#financial-closure article { transition: none !important; }
  }

/* Extracted from product.html.erb — block 11; original order preserved. */
/* One shared homepage-style evergreen gradient for every green product section. */
  .product-page #entry-paths,
  .product-page #commercial-control,
  .product-page #financial-closure {
    background:
      radial-gradient(ellipse at 0% 0%, rgba(244,185,82,.075), transparent 34%),
      radial-gradient(ellipse at 100% 100%, rgba(0,135,101,.20), transparent 38%),
      linear-gradient(125deg, #062820 0%, #07392F 48%, #074C3E 100%) !important;
    background-color: #062820 !important;
    color: #F8F3E8 !important;
    border-color: rgba(244,185,82,.22) !important;
  }

  /* Give the Entry Paths headline a clear gold-to-ivory gradient treatment. */
  .product-page #entry-paths > div > .max-w-3xl h2 {
    background: linear-gradient(100deg, #F8F3E8 0%, #F4B952 55%, #FFE0A0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
  }

  /* Cards across the whole page should feel designed, not flat: varied warm surfaces,
     restrained accent edges, deeper shadows, and clear text contrast. */
  .product-page article,
  .product-page .product-card,
  .product-page [data-product-stage],
  .product-page #entry-paths .rounded-xl,
  .product-page #commercial-control .rounded-xl,
  .product-page #financial-closure .rounded-xl,
  .product-page #media-planning .rounded-xl,
  .product-page #execution-verification .rounded-xl,
  .product-page #reporting .rounded-xl,
  .product-page #product-cta .rounded-xl,
  .product-page #entry-paths .rounded-2xl,
  .product-page #commercial-control .rounded-2xl,
  .product-page #financial-closure .rounded-2xl,
  .product-page #media-planning .rounded-2xl,
  .product-page #execution-verification .rounded-2xl,
  .product-page #reporting .rounded-2xl,
  .product-page #product-cta .rounded-2xl {
    box-shadow: 0 12px 28px rgba(7, 31, 25, .10), inset 0 1px 0 rgba(255,255,255,.72) !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
  }

  .product-page article:nth-child(4n + 1),
  .product-page [data-product-stage]:nth-child(4n + 1) {
    border-top: 3px solid #E5A93E !important;
    background-image: linear-gradient(145deg, rgba(255,246,222,.98), rgba(247,243,233,.98)) !important;
  }
  .product-page article:nth-child(4n + 2),
  .product-page [data-product-stage]:nth-child(4n + 2) {
    border-top: 3px solid #4B9B83 !important;
    background-image: linear-gradient(145deg, rgba(231,244,236,.98), rgba(247,243,233,.98)) !important;
  }
  .product-page article:nth-child(4n + 3),
  .product-page [data-product-stage]:nth-child(4n + 3) {
    border-top: 3px solid #6F9EAD !important;
    background-image: linear-gradient(145deg, rgba(231,241,245,.98), rgba(247,243,233,.98)) !important;
  }
  .product-page article:nth-child(4n + 4),
  .product-page [data-product-stage]:nth-child(4n + 4) {
    border-top: 3px solid #C78B68 !important;
    background-image: linear-gradient(145deg, rgba(249,235,224,.98), rgba(247,243,233,.98)) !important;
  }

  /* Cards inside evergreen sections stay warm and readable, with colored accents. */
  .product-page #entry-paths article,
  .product-page #commercial-control article,
  .product-page #financial-closure article,
  .product-page #entry-paths > div > .mt-5.rounded-xl,
  .product-page #commercial-control .rounded-xl,
  .product-page #financial-closure .rounded-xl,
  .product-page #entry-paths .rounded-2xl,
  .product-page #commercial-control .rounded-2xl,
  .product-page #financial-closure .rounded-2xl {
    color: #17352D !important;
    border-color: rgba(244,185,82,.42) !important;
  }
  .product-page #entry-paths article h3,
  .product-page #commercial-control article h3,
  .product-page #financial-closure article h3,
  .product-page #entry-paths article h4,
  .product-page #commercial-control article h4,
  .product-page #financial-closure article h4 {
    color: #17352D !important;
  }
  .product-page #entry-paths article p,
  .product-page #commercial-control article p,
  .product-page #financial-closure article p,
  .product-page #entry-paths article li,
  .product-page #commercial-control article li,
  .product-page #financial-closure article li {
    color: #40554D !important;
  }
  .product-page article:hover,
  .product-page [data-product-stage]:hover,
  .product-page #entry-paths .rounded-xl:hover,
  .product-page #commercial-control .rounded-xl:hover,
  .product-page #financial-closure .rounded-xl:hover,
  .product-page #media-planning .rounded-xl:hover,
  .product-page #execution-verification .rounded-xl:hover,
  .product-page #reporting .rounded-xl:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(7,31,25,.16), inset 0 1px 0 rgba(255,255,255,.8) !important;
  }

  /* Keep the small workflow chips distinct without turning them into oversized cards. */
  .product-page #entry-paths article .rounded-lg,
  .product-page #commercial-control article .rounded-lg,
  .product-page #financial-closure article .rounded-lg {
    border-color: rgba(7,76,62,.28) !important;
    background: rgba(255,255,255,.48) !important;
    color: #17352D !important;
    box-shadow: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .product-page article,
    .product-page [data-product-stage] { transition: none !important; }
  }

/* Extracted from product.html.erb — block 12; original order preserved. */
/* Keep the System Architecture walkthrough completely untouched. The contrasting
     card treatment below applies only to the other Product page sections. */
  .product-page > section:not(#architecture-flow) article,
  .product-page > section:not(#architecture-flow) .product-card,
  .product-page > section:not(#architecture-flow) [data-product-stage] {
    border-radius: 18px !important;
    box-shadow: 0 14px 30px rgba(2, 24, 19, .16), inset 0 1px 0 rgba(255,255,255,.78) !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
  }

  /* A restrained four-colour rotation for feature cards outside architecture. */
  .product-page > section:not(#architecture-flow) article:nth-child(4n + 1),
  .product-page > section:not(#architecture-flow) [data-product-stage]:nth-child(4n + 1) {
    background: linear-gradient(145deg, #FFF4D8 0%, #F7E9C9 100%) !important;
    border: 1px solid #E6BD68 !important;
    border-top: 3px solid #D99B25 !important;
  }
  .product-page > section:not(#architecture-flow) article:nth-child(4n + 2),
  .product-page > section:not(#architecture-flow) [data-product-stage]:nth-child(4n + 2) {
    background: linear-gradient(145deg, #E2F2E9 0%, #D2E9DD 100%) !important;
    border: 1px solid #9BCAB5 !important;
    border-top: 3px solid #39866B !important;
  }
  .product-page > section:not(#architecture-flow) article:nth-child(4n + 3),
  .product-page > section:not(#architecture-flow) [data-product-stage]:nth-child(4n + 3) {
    background: linear-gradient(145deg, #E5F0F6 0%, #D7E7F0 100%) !important;
    border: 1px solid #A7C8D8 !important;
    border-top: 3px solid #568CA7 !important;
  }
  .product-page > section:not(#architecture-flow) article:nth-child(4n + 4),
  .product-page > section:not(#architecture-flow) [data-product-stage]:nth-child(4n + 4) {
    background: linear-gradient(145deg, #F8E7DF 0%, #F0D8CC 100%) !important;
    border: 1px solid #DDB5A1 !important;
    border-top: 3px solid #BC7956 !important;
  }

  /* The entry-path cards, commercial cards and financial cards sit on dark green.
     Keep their surfaces light and all their copy dark for legibility. */
  .product-page #entry-paths article,
  .product-page #commercial-control article,
  .product-page #financial-closure article,
  .product-page #entry-paths > div > .mt-5.rounded-xl {
    color: #17352D !important;
  }
  .product-page #entry-paths article h1,
  .product-page #entry-paths article h2,
  .product-page #entry-paths article h3,
  .product-page #entry-paths article h4,
  .product-page #entry-paths article p,
  .product-page #entry-paths article span,
  .product-page #entry-paths article li,
  .product-page #commercial-control article h1,
  .product-page #commercial-control article h2,
  .product-page #commercial-control article h3,
  .product-page #commercial-control article h4,
  .product-page #commercial-control article p,
  .product-page #commercial-control article span,
  .product-page #commercial-control article li,
  .product-page #financial-closure article h1,
  .product-page #financial-closure article h2,
  .product-page #financial-closure article h3,
  .product-page #financial-closure article h4,
  .product-page #financial-closure article p,
  .product-page #financial-closure article span,
  .product-page #financial-closure article li {
    color: #29483D !important;
  }

  /* Restore the architecture story's step treatment: no card fills, colour rotation,
     card shadows or hover lift inside System Architecture. */
  .product-page #architecture-flow .architecture-story-step {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: translateY(24px);
  }
  .product-page #architecture-flow .architecture-story-step.is-active {
    transform: translateY(0);
  }
  .product-page #architecture-flow .architecture-story-step:hover {
    transform: translateY(24px);
    box-shadow: none !important;
  }
  .product-page #architecture-flow .architecture-story-step.is-active:hover {
    transform: translateY(0);
  }
  .product-page #architecture-flow .architecture-step-meta span {
    background: #00382D !important;
    border: 1px solid #285448 !important;
    color: #D9E3DC !important;
    box-shadow: none !important;
  }

  .product-page > section:not(#architecture-flow) article:hover,
  .product-page > section:not(#architecture-flow) [data-product-stage]:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 38px rgba(2,24,19,.20), inset 0 1px 0 rgba(255,255,255,.88) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .product-page > section:not(#architecture-flow) article,
    .product-page > section:not(#architecture-flow) [data-product-stage] {
      transition: none !important;
    }
  }

/* Extracted from product.html.erb — block 13; original order preserved. */
/* Product-page sections receive a visible gold/emerald accent at BOTH edges. */
  .product-page > section {
    position: relative;
    isolation: isolate;
    border-top: 3px solid #F4B952 !important;
    border-bottom: 3px solid #F4B952 !important;
  }
  .product-page > section::before,
  .product-page > section::after {
    pointer-events: none;
  }
  .product-page > section::before {
    content: "";
    position: absolute;
    z-index: 20;
    top: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
      rgba(121,185,154,.9) 0%,
      rgba(121,185,154,.75) 22%,
      #F4B952 50%,
      rgba(121,185,154,.75) 78%,
      rgba(121,185,154,.9) 100%);
    box-shadow: 0 0 10px rgba(244,185,82,.42), 0 0 22px rgba(121,185,154,.22);
  }
  /* Keep the existing section backgrounds; add only a subtle glow near their top edge. */
  .product-page > #architecture-flow::after,
  .product-page > #media-planning::after,
  .product-page > #execution-verification::after,
  .product-page > #entry-paths::after,
  .product-page > #commercial-control::after,
  .product-page > #financial-closure::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 3px;
    height: 130px;
  }
  .product-page > #architecture-flow::after,
  .product-page > #media-planning::after,
  .product-page > #execution-verification::after {
    background: linear-gradient(180deg, rgba(82,151,117,.12), transparent);
  }
  .product-page > #entry-paths::after,
  .product-page > #commercial-control::after,
  .product-page > #financial-closure::after {
    background: linear-gradient(180deg, rgba(244,185,82,.10), transparent);
  }
  @media (prefers-reduced-motion: reduce) {
    .product-page > section::before { box-shadow: none; }
  }

/* Extracted from product.html.erb — block 14; original order preserved. */
/* Preserve the original eight-step flow layout; reserve space for the header and footer. */
  @media (min-width: 1024px) {
    .product-page #architecture-flow .architecture-story-visual-wrap {
      height: min(720px, calc(100vh - 120px));
      min-height: 620px;
    }
    .product-page #architecture-flow .architecture-flow {
      top: 88px;
      bottom: 72px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
    }
    .product-page #architecture-flow .architecture-flow-node {
      width: min(390px, 88%);
      height: 54px;
      min-height: 54px;
      max-height: 54px;
      flex: 0 0 54px;
      padding: 5px 15px 4px;
      overflow: visible;
    }
  }

/* Extracted from product.html.erb — block 15; original order preserved. */
/* Make the architecture intro pill clearly readable on the light section. */
  .product-page #architecture-flow .max-w-3xl > .mb-6.inline-flex {
    border: 1.5px solid #C18A2B !important;
    background: rgba(244, 185, 82, 0.20) !important;
    color: #063F32 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.20em !important;
    padding: 11px 22px !important;
    box-shadow: 0 2px 0 rgba(7, 76, 62, 0.08), 0 0 0 1px rgba(193, 138, 43, 0.08);
  }
  .product-page #architecture-flow .max-w-3xl > .mb-6.inline-flex > span {
    background-color: #C18A2B !important;
    box-shadow: 0 0 0 4px rgba(193, 138, 43, 0.14);
  }

/* Extracted from product.html.erb — block 16; original order preserved. */
/* Match the Contact/Homepage light cream hero background on System Architecture. */
  body:has(.product-page) .product-page > section#architecture-flow {
    background-color: #F8F3E8 !important;
    background-image:
      radial-gradient(circle at 15% 15%, rgba(244, 185, 82, 0.15), transparent 30%),
      radial-gradient(circle at 82% 20%, rgba(7, 76, 62, 0.09), transparent 28%),
      radial-gradient(circle at 55% 85%, rgba(7, 76, 62, 0.06), transparent 32%),
      linear-gradient(120deg, #F5F0E4 0%, #F8F3E8 52%, #F3EFE4 100%) !important;
    color: #102B25 !important;
    border-color: #E7D8B8 !important;
  }
  body:has(.product-page) .product-page > section#architecture-flow::before,
  body:has(.product-page) .product-page > section#architecture-flow::after {
    opacity: 0.35 !important;
    pointer-events: none;
  }
  body:has(.product-page) .product-page > section#architecture-flow .max-w-3xl > p:last-child {
    color: #40554D !important;
  }

.product-workflow-heading {
  color: #F8F3E8 !important;
  background: none !important;
  -webkit-text-fill-color: #F8F3E8 !important;
}

/* ===== Original stylesheet: public_pricing.css ===== */
/* Extracted from pricing.html.erb — block 1; original order preserved. */
body:has(.pricing-featured-card) main,body:has(.pricing-featured-card){background:#E4E7E1!important;color:#102B25!important}
  body:has(.pricing-featured-card) main section{background:#E4E7E1!important;color:#102B25!important;border-color:#C9D1C7!important}
  body:has(.pricing-featured-card) .pricing-side-card,body:has(.pricing-featured-card) .pricing-featured-card,body:has(.pricing-featured-card) article{background:#F7F3E9!important;color:#102B25!important;border-color:#C9D1C7!important;box-shadow:0 16px 42px rgba(16,43,37,.10)!important}
  body:has(.pricing-featured-card) h1,body:has(.pricing-featured-card) h2,body:has(.pricing-featured-card) h3,body:has(.pricing-featured-card) article span{color:#102B25!important}
  body:has(.pricing-featured-card) p,body:has(.pricing-featured-card) li,body:has(.pricing-featured-card) summary{color:#40554D!important}
  body:has(.pricing-featured-card) .text-\[\#F4B952\],body:has(.pricing-featured-card) .text-\[\#70E8E1\],body:has(.pricing-featured-card) .text-\[\#8CF0EA\],body:has(.pricing-featured-card) .text-\[\#4DDEDA\]{color:#946000!important}
  body:has(.pricing-featured-card) a.bg-\[\#F4B952\]{background:#F4B952!important;color:#10231F!important}
  body:has(.pricing-featured-card) .pricing-medallion{background:#074C3E!important;border-color:#F4B952!important;box-shadow:0 0 0 6px #E4E7E1!important}
  body:has(.pricing-featured-card) .pricing-medallion span{color:#F4B952!important}
  body:has(.pricing-featured-card) details{background:#F7F3E9!important;border-color:#C9D1C7!important}

/* Extracted from pricing.html.erb — block 2; original order preserved. */
.pricing-page{background:#E4E7E1!important;color:#102B25!important}
  .pricing-page h1,.pricing-page h2,.pricing-page h3{color:#102B25!important}
  .pricing-page p,.pricing-page li,.pricing-page summary{color:#40554D!important}
  .pricing-page .text-\[\#9AA8B8\],.pricing-page .text-\[\#718195\],.pricing-page .text-\[\#93A2B4\],.pricing-page .text-\[\#C7D4CD\],.pricing-page .text-\[\#EDF3FB\]{color:#40554D!important}
  .pricing-page .pricing-featured-card,.pricing-page .pricing-featured-card h1,.pricing-page .pricing-featured-card h2,.pricing-page .pricing-featured-card h3,.pricing-page .pricing-featured-card strong{color:#F8F3E8!important}
  .pricing-page .pricing-featured-card p,.pricing-page .pricing-featured-card li,.pricing-page .pricing-featured-card span{color:#D7E2DB!important}
  .pricing-page .pricing-featured-card{background:linear-gradient(145deg,#0A211C,#123A30)!important;border-color:#F4B952!important}
  .pricing-page a.bg-\[\#F4B952\],.pricing-page button.bg-\[\#F4B952\]{background:#F4B952!important;color:#10231F!important}

/* Extracted from pricing.html.erb — block 3; original order preserved. */
/* Match the Product page's section edge treatment and alternating public-page rhythm. */
  .pricing-page {
    --tavre-cream: #F8F3E8;
    --tavre-neutral: #E7E8E1;
    --tavre-green: #074C3E;
    --tavre-deep-green: #062820;
    --tavre-gold: #F4B952;
    background: var(--tavre-neutral) !important;
    color: #102B25 !important;
  }
  .pricing-page > section {
    position: relative;
    isolation: isolate;
    border-top: 3px solid #F4B952 !important;
    border-bottom: 3px solid #F4B952 !important;
    background: var(--tavre-neutral) !important;
    color: #102B25 !important;
  }
  .pricing-page > section::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 12% 0%, rgba(244,185,82,.08), transparent 34%),
                radial-gradient(ellipse at 88% 100%, rgba(7,76,62,.06), transparent 38%);
  }
  /* Explicit odd/even alternation; higher specificity prevents the older theme rules overriding it. */
  body:has(.pricing-page) .pricing-page > section:nth-of-type(odd) {
    background: #E7E8E1 !important;
    color: #102B25 !important;
  }
  body:has(.pricing-page) .pricing-page > section:nth-of-type(even) {
    background: linear-gradient(125deg,#062820 0%,#07392F 52%,#074C3E 100%) !important;
    color: #F8F3E8 !important;
    border-top-color: #F4B952 !important;
    border-bottom-color: #F4B952 !important;
  }
  body:has(.pricing-page) .pricing-page > section:nth-of-type(even)::before {
    background: repeating-linear-gradient(118deg, transparent 0 115px, rgba(244,185,82,.035) 116px 118px, transparent 119px 230px),
                radial-gradient(ellipse at 15% 0%, rgba(244,185,82,.10), transparent 36%),
                radial-gradient(ellipse at 90% 100%, rgba(1,191,192,.09), transparent 40%);
  }
  body:has(.pricing-page) .pricing-page > section:nth-of-type(odd) h1,
  body:has(.pricing-page) .pricing-page > section:nth-of-type(odd) h2,
  body:has(.pricing-page) .pricing-page > section:nth-of-type(odd) h3 { color: #102B25 !important; }
  body:has(.pricing-page) .pricing-page > section:nth-of-type(odd) p,
  body:has(.pricing-page) .pricing-page > section:nth-of-type(odd) li,
  body:has(.pricing-page) .pricing-page > section:nth-of-type(odd) summary { color: #40554D !important; }
  body:has(.pricing-page) .pricing-page > section:nth-of-type(even) h1,
  body:has(.pricing-page) .pricing-page > section:nth-of-type(even) h2,
  body:has(.pricing-page) .pricing-page > section:nth-of-type(even) h3 { color: #F8F3E8 !important; }
  body:has(.pricing-page) .pricing-page > section:nth-of-type(even) p,
  body:has(.pricing-page) .pricing-page > section:nth-of-type(even) li,
  body:has(.pricing-page) .pricing-page > section:nth-of-type(even) summary { color: #E0E9E3 !important; }

  /* Pricing cards stay readable regardless of the section behind them. */
  body:has(.pricing-page) .pricing-page .pricing-side-card,
  body:has(.pricing-page) .pricing-page .pricing-cards-shell > div.mt-16,
  body:has(.pricing-page) .pricing-page details,
  body:has(.pricing-page) .pricing-page article:not(.pricing-featured-card) {
    background: #F8F6EF !important;
    color: #102B25 !important;
    border-color: rgba(7,76,62,.28) !important;
    box-shadow: 0 16px 42px rgba(16,43,37,.10) !important;
  }
  body:has(.pricing-page) .pricing-page .pricing-side-card h1,
  body:has(.pricing-page) .pricing-page .pricing-side-card h2,
  body:has(.pricing-page) .pricing-page .pricing-side-card h3,
  body:has(.pricing-page) .pricing-page .pricing-side-card span,
  body:has(.pricing-page) .pricing-page article:not(.pricing-featured-card) h3,
  body:has(.pricing-page) .pricing-page details summary { color: #102B25 !important; }
  body:has(.pricing-page) .pricing-page .pricing-side-card p,
  body:has(.pricing-page) .pricing-page article:not(.pricing-featured-card) p,
  body:has(.pricing-page) .pricing-page article:not(.pricing-featured-card) li,
  body:has(.pricing-page) .pricing-page details p { color: #40554D !important; }
  body:has(.pricing-page) .pricing-page .pricing-featured-card {
    background: linear-gradient(145deg,#062820 0%,#07392F 54%,#074C3E 100%) !important;
    border: 1px solid #F4B952 !important;
    color: #F8F3E8 !important;
  }
  body:has(.pricing-page) .pricing-page .pricing-featured-card h1,
  body:has(.pricing-page) .pricing-page .pricing-featured-card h2,
  body:has(.pricing-page) .pricing-page .pricing-featured-card h3,
  body:has(.pricing-page) .pricing-page .pricing-featured-card strong,
  body:has(.pricing-page) .pricing-page .pricing-featured-card span { color: #F8F3E8 !important; }
  body:has(.pricing-page) .pricing-page .pricing-featured-card p,
  body:has(.pricing-page) .pricing-page .pricing-featured-card li { color: #E0E9E3 !important; }
  body:has(.pricing-page) .pricing-page .text-\[\#F4B952\],
  body:has(.pricing-page) .pricing-page .text-\[\#67DCD8\],
  body:has(.pricing-page) .pricing-page .text-\[\#6DE2DF\],
  body:has(.pricing-page) .pricing-page .text-\[\#4DDEDA\] { color: #946000 !important; }
  body:has(.pricing-page) .pricing-page .pricing-featured-card .text-\[\#F4B952\],
  body:has(.pricing-page) .pricing-page .pricing-featured-card .text-\[\#67DCD8\],
  body:has(.pricing-page) .pricing-page .pricing-featured-card .text-\[\#6DE2DF\],
  body:has(.pricing-page) .pricing-page .pricing-featured-card .text-\[\#4DDEDA\] { color: #F4B952 !important; }
  body:has(.pricing-page) .pricing-page a.bg-\[\#F4B952\],
  body:has(.pricing-page) .pricing-page button.bg-\[\#F4B952\] { background: #F4B952 !important; color: #10231F !important; }

  /* Footer matches the shared deep-emerald public-site footer. */
  body:has(.pricing-page) footer {
    background: linear-gradient(125deg,#062820 0%,#07392F 52%,#074C3E 100%) !important;
    color: #F8F3E8 !important;
    border-top: 3px solid #F4B952 !important;
  }
  body:has(.pricing-page) footer h1,
  body:has(.pricing-page) footer h2,
  body:has(.pricing-page) footer h3,
  body:has(.pricing-page) footer strong { color: #F8F3E8 !important; }
  body:has(.pricing-page) footer p,
  body:has(.pricing-page) footer li,
  body:has(.pricing-page) footer a:not(.bg-\[\#F4B952\]) { color: #D7E2DB !important; }
  body:has(.pricing-page) footer a:hover { color: #F4B952 !important; }
  @media (prefers-reduced-motion: reduce) { .pricing-page > section { scroll-behavior: auto; } }

/* Extracted from pricing.html.erb — block 4; original order preserved. */
/* Match the Product page's gradient headline and architecture label. */
  .pricing-page .pricing-hero-gradient {
    display: inline-block;
    background-image: linear-gradient(100deg, #075B46 0%, #0D8B68 28%, #55C9A0 52%, #168A69 76%, #064D3B 100%);
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
  body:has(.pricing-page) .pricing-page .pricing-stage-badge {
    display: inline-flex !important;
    align-items: center !important;
    color: #062820 !important;
    -webkit-text-fill-color: #062820 !important;
    opacity: 1 !important;
    border: 1px solid rgba(244,185,82,.55) !important;
    background: rgba(244,185,82,.10) !important;
  }
  .pricing-page .pricing-demo-notice {
    border-color: rgba(244,185,82,.42) !important;
    background: linear-gradient(120deg, #0B1C25 0%, #102B31 100%) !important;
  }
  body:has(.pricing-page) .pricing-page .pricing-demo-notice,
  body:has(.pricing-page) .pricing-page .pricing-demo-notice h2,
  body:has(.pricing-page) .pricing-page .pricing-demo-notice p,
  body:has(.pricing-page) .pricing-page .pricing-demo-notice span {
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  body:has(.pricing-page) .pricing-page .pricing-demo-notice h2 {
    color: #FFF8E9 !important;
    font-weight: 700 !important;
  }
  body:has(.pricing-page) .pricing-page .pricing-demo-notice p {
    color: #E4EEE8 !important;
  }
  body:has(.pricing-page) .pricing-page .pricing-demo-notice {
    background: linear-gradient(120deg, #0B1C25 0%, #102B31 100%) !important;
    border: 1px solid rgba(244,185,82,.58) !important;
  }

/* Extracted from pricing.html.erb — block 5; original order preserved. */
/* Use the Product page's exact pill-label treatment for the pricing eyebrow. */
  body:has(.pricing-page) .pricing-page .pricing-stage-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    padding: .5rem 1rem !important;
    border: 1px solid rgba(244,185,82,.40) !important;
    border-radius: 9999px !important;
    background: rgba(244,185,82,.08) !important;
    color: #062820 !important;
    -webkit-text-fill-color: #062820 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .22em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
  }
  body:has(.pricing-page) .pricing-page .pricing-demo-notice h2 {
    color: #FFF9EC !important;
    -webkit-text-fill-color: #FFF9EC !important;
    font-weight: 700 !important;
  }
  body:has(.pricing-page) .pricing-page .pricing-demo-notice p {
    color: #E8F0EA !important;
    -webkit-text-fill-color: #E8F0EA !important;
  }
  /* All plan actions use the shared Tavré gold CTA, not the old navy buttons. */
  body:has(.pricing-page) .pricing-page .pricing-side-card > a {
    background: #F4B952 !important;
    color: #10231F !important;
    -webkit-text-fill-color: #10231F !important;
    border: 1px solid #F4B952 !important;
    box-shadow: 0 8px 22px rgba(16,43,37,.12) !important;
  }
  body:has(.pricing-page) .pricing-page .pricing-side-card > a span {
    color: #075B46 !important;
    -webkit-text-fill-color: #075B46 !important;
  }
  body:has(.pricing-page) .pricing-page .pricing-side-card > a:hover {
    background: #E8AA3D !important;
    border-color: #E8AA3D !important;
    color: #10231F !important;
  }

/* Extracted from pricing.html.erb — block 6; original order preserved. */
/* Keep the pricing eyebrow in normal document flow, centered above the headline. */
  body:has(.pricing-page) .pricing-page .pricing-stage-badge {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    transform: none !important;
    display: flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 1.5rem !important;
    vertical-align: initial !important;
    z-index: 1 !important;
  }
  body:has(.pricing-page) .pricing-page .pricing-hero-gradient {
    display: block !important;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto !important;
  }

/* Extracted from pricing.html.erb — block 7; original order preserved. */
/*
   * Final pricing-only overrides. The Product page's architecture eyebrow
   * is styled in product.html.erb under #architecture-flow .max-w-3xl > .mb-6.inline-flex.
   * Mirror that treatment here with a page-specific selector so earlier
   * theme rules cannot wash it out.
   */
  html body:has(.pricing-page) .pricing-page .pricing-stage-badge {
    display: inline-flex !important;
    position: relative !important;
    inset: auto !important;
    float: none !important;
    transform: none !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 1.5rem !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem !important;
    padding: 11px 22px !important;
    border: 1.5px solid #C18A2B !important;
    border-radius: 9999px !important;
    background: rgba(244, 185, 82, 0.20) !important;
    color: #063F32 !important;
    -webkit-text-fill-color: #063F32 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.20em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
    box-shadow: 0 2px 0 rgba(7, 76, 62, 0.08), 0 0 0 1px rgba(193, 138, 43, 0.08) !important;
    z-index: 2 !important;
  }

  html body:has(.pricing-page) .pricing-page .pricing-stage-badge > span {
    flex: 0 0 auto !important;
    width: .375rem !important;
    height: .375rem !important;
    border-radius: 9999px !important;
    background: #C18A2B !important;
    box-shadow: 0 0 0 4px rgba(193, 138, 43, 0.14) !important;
  }

  /* Keep the “built to scale” caption light against the dark featured plan card. */
  html body:has(.pricing-page) .pricing-page .pricing-side-card p.pricing-scale-caption,
  html body:has(.pricing-page) .pricing-page .pricing-featured-card p.pricing-scale-caption {
    color: #D7F5EB !important;
    -webkit-text-fill-color: #D7F5EB !important;
    opacity: 1 !important;
  }

/* Extracted from pricing.html.erb — block 8; original order preserved. */
/* Match the light, premium pastel card treatment used on the Product page. */
  html body:has(.pricing-page) .pricing-page .pricing-workflow-cards > .pricing-workflow-card {
    min-height: 250px !important;
    border-radius: 24px !important;
    border-width: 1px !important;
    border-style: solid !important;
    color: #29483D !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
  }
  html body:has(.pricing-page) .pricing-page .pricing-workflow-cards > .pricing-workflow-card:nth-child(4n + 1) {
    background: linear-gradient(145deg, #FFF4D8 0%, #F7E9C9 100%) !important;
    border-color: #E6BD68 !important;
    border-top: 3px solid #D99B25 !important;
  }
  html body:has(.pricing-page) .pricing-page .pricing-workflow-cards > .pricing-workflow-card:nth-child(4n + 2) {
    background: linear-gradient(145deg, #E2F2E9 0%, #D2E9DD 100%) !important;
    border-color: #9BCAB5 !important;
    border-top: 3px solid #39866B !important;
  }
  html body:has(.pricing-page) .pricing-page .pricing-workflow-cards > .pricing-workflow-card:nth-child(4n + 3) {
    background: linear-gradient(145deg, #E5F0F6 0%, #D7E7F0 100%) !important;
    border-color: #A7C8D8 !important;
    border-top: 3px solid #568CA7 !important;
  }
  html body:has(.pricing-page) .pricing-page .pricing-workflow-cards > .pricing-workflow-card:nth-child(4n + 4) {
    background: linear-gradient(145deg, #F8E7DF 0%, #F0D8CC 100%) !important;
    border-color: #DDB5A1 !important;
    border-top: 3px solid #BC7956 !important;
  }
  html body:has(.pricing-page) .pricing-page .pricing-workflow-cards > .pricing-workflow-card h3 {
    color: #203F35 !important;
    -webkit-text-fill-color: #203F35 !important;
  }
  html body:has(.pricing-page) .pricing-page .pricing-workflow-cards > .pricing-workflow-card p {
    color: #40594F !important;
    -webkit-text-fill-color: #40594F !important;
  }
  html body:has(.pricing-page) .pricing-page .pricing-workflow-cards > .pricing-workflow-card > span {
    color: #29483D !important;
    -webkit-text-fill-color: #29483D !important;
  }
  html body:has(.pricing-page) .pricing-page .pricing-workflow-cards > .pricing-workflow-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 38px rgba(2,24,19,.20), inset 0 1px 0 rgba(255,255,255,.88) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    html body:has(.pricing-page) .pricing-page .pricing-workflow-cards > .pricing-workflow-card { transition: none !important; }
  }

/* Extracted from pricing.html.erb — block 9; original order preserved. */
/* FAQ uses an explicit measured height so opening and closing follow the same smooth curve. */
  html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-item {
    overflow: hidden;
    transition: transform .24s ease, box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
  }
  html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(16,43,37,.14) !important;
    border-color: rgba(244,185,82,.72) !important;
  }
  html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-item.is-open {
    border-color: #F4B952 !important;
    box-shadow: 0 18px 38px rgba(16,43,37,.12) !important;
  }
  html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-question {
    position: relative;
    transition: color .22s ease, padding-left .22s ease;
  }
  html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-question:hover { padding-left: 4px; }
  html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-question:focus-visible {
    outline: 2px solid #F4B952; outline-offset: 5px; border-radius: 4px;
  }
  html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-icon {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: 9999px;
    background: rgba(244,185,82,.12);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), background-color .25s ease;
  }
  html body:has(.pricing-page) .pricing-page #pricing-faq .is-open .pricing-faq-icon {
    transform: rotate(45deg); background: rgba(244,185,82,.22);
  }
  html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-answer {
    height: 0; opacity: 0; overflow: hidden;
    transition: height .34s cubic-bezier(.22,.61,.36,1), opacity .22s ease;
    will-change: height;
  }
  html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-answer-inner { padding-top: 1rem; }
  @media (prefers-reduced-motion: reduce) {
    html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-item,
    html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-question,
    html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-icon,
    html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-answer { transition: none !important; transform: none !important; }
  }

/* Extracted from pricing.html.erb — block 10; original order preserved. */
/* Keep FAQ answer text readable on the dark accordion panels despite global theme overrides. */
  html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-answer,
  html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-answer-inner,
  html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-answer p {
    color: #D5E2DC !important;
    -webkit-text-fill-color: #D5E2DC !important;
  }
  html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-icon {
    color: #F4B952 !important;
    -webkit-text-fill-color: #F4B952 !important;
    background: rgba(244,185,82,.18) !important;
  }
  html body:has(.pricing-page) .pricing-page #pricing-faq .is-open .pricing-faq-icon {
    background: rgba(244,185,82,.26) !important;
  }

/* Extracted from pricing.html.erb — block 11; original order preserved. */
/* Only the pricing hero/first section: match the Product architecture light background.
     Put the gradients on the section itself so later pseudo-elements cannot hide them. */
  html body:has(.pricing-page) .pricing-page > section:first-of-type {
    background-color: #E7E8E1 !important;
    background-image:
      radial-gradient(ellipse at 12% 8%, rgba(244,185,82,.16) 0%, rgba(244,185,82,0) 38%),
      radial-gradient(ellipse at 88% 22%, rgba(7,76,62,.10) 0%, rgba(7,76,62,0) 42%),
      linear-gradient(118deg, #F3F0E6 0%, #E7E8E1 48%, #F1EBDD 100%) !important;
    background-repeat: no-repeat !important;
    color: #102B25 !important;
  }
  html body:has(.pricing-page) .pricing-page > section:first-of-type > div[aria-hidden="true"] {
    background: transparent !important;
  }

/* Selectable billing-term cards: monthly, half-yearly and yearly. */
.pricing-page .pricing-term-grid { align-items: stretch; }
.pricing-page .pricing-term-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 2rem;
  border: 1px solid #C9D1C7;
  border-radius: 1.5rem;
  background: linear-gradient(145deg, #FFFDF7 0%, #F2F2E9 100%);
  color: #17382F;
  text-align: left;
  box-shadow: 0 16px 42px rgba(16, 43, 37, .09);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.pricing-page .pricing-term-card:hover { transform: translateY(-4px); border-color: #C8942F; box-shadow: 0 22px 48px rgba(16,43,37,.14); }
.pricing-page .pricing-term-card:focus-visible { outline: 3px solid #C8942F; outline-offset: 4px; }
.pricing-page .pricing-term-card.is-active {
  z-index: 1;
  border: 2px solid #F4B952;
  background: linear-gradient(155deg, #0B3028 0%, #075342 100%);
  color: #F8F3E8;
  box-shadow: 0 24px 62px rgba(3, 42, 33, .28), 0 0 0 5px rgba(244,185,82,.13);
  transform: translateY(-10px);
}
.pricing-page .pricing-term-eyebrow { display: block; color: #8A641D; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.pricing-page .pricing-term-name { display: block; margin-top: 1rem; color: #17382F; font-size: 1.45rem; font-weight: 750; letter-spacing: -.035em; line-height: 1.2; }
.pricing-page .pricing-term-price { display: block; margin-top: 1.5rem; color: #102D25; font-size: clamp(1.8rem, 2.4vw, 2.5rem); font-weight: 750; letter-spacing: -.055em; line-height: 1.1; }
.pricing-page .pricing-term-period { display: block; margin-top: .55rem; color: #64766D; font-size: .82rem; }
.pricing-page .pricing-term-divider { display: block; width: 100%; margin: 1.5rem 0; border-top: 1px solid #D7DDD2; }
.pricing-page .pricing-term-description { display: block; min-height: 3.5rem; color: #52665D; font-size: .9rem; line-height: 1.65; }
.pricing-page .pricing-term-action { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: 1.75rem; padding: .85rem 1rem; border-radius: .8rem; background: #F4B952; color: #102B25; font-size: .84rem; font-weight: 800; }
.pricing-page .pricing-term-recommended { display: none; }
.pricing-page .pricing-term-card.is-active .pricing-term-eyebrow { color: #F4B952; }
.pricing-page .pricing-term-card.is-active .pricing-term-name,
.pricing-page .pricing-term-card.is-active .pricing-term-price { color: #FFF8EA; }
.pricing-page .pricing-term-card.is-active .pricing-term-period,
.pricing-page .pricing-term-card.is-active .pricing-term-description { color: #D7E8DF; }
.pricing-page .pricing-term-card.is-active .pricing-term-divider { border-color: rgba(248,243,232,.22); }
.pricing-page .pricing-term-card.is-active .pricing-term-action { background: #F4B952; color: #102B25; }
.pricing-page .pricing-term-card.is-active .pricing-term-recommended { display: inline-flex; position: absolute; top: -.8rem; right: 1.25rem; padding: .4rem .65rem; border: 1px solid #F4B952; border-radius: 999px; background: #F4B952; color: #102B25; font-size: .6rem; font-weight: 900; letter-spacing: .12em; }
@media (max-width: 767px) {
  .pricing-page .pricing-term-card { padding: 1.5rem; }
  .pricing-page .pricing-term-card.is-active { transform: none; }
  .pricing-page .pricing-term-description { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-page .pricing-term-card { transition: none; }
}


/* TAVRÉ pricing page repair: keep styles scoped to this page. */
html body:has(.pricing-page) .pricing-page {
  color: #102B25 !important;
  background: #E7E8E1 !important;
  overflow: clip;
}
html body:has(.pricing-page) .pricing-page > section:first-of-type {
  color: #102B25 !important;
  background-color: #E7E8E1 !important;
  background-image:
    radial-gradient(ellipse at 12% 8%, rgba(244,185,82,.16), transparent 38%),
    radial-gradient(ellipse at 88% 22%, rgba(7,76,62,.10), transparent 42%),
    linear-gradient(118deg, #F3F0E6 0%, #E7E8E1 48%, #F1EBDD 100%) !important;
}
html body:has(.pricing-page) .pricing-page > section:nth-of-type(2) {
  background: linear-gradient(125deg, #062D25 0%, #074C3E 58%, #06372E 100%) !important;
  color: #F8F3E8 !important;
  border-color: rgba(244,185,82,.28) !important;
}
html body:has(.pricing-page) .pricing-page > section:nth-of-type(2) h2,
html body:has(.pricing-page) .pricing-page > section:nth-of-type(2) h3,
html body:has(.pricing-page) .pricing-page > section:nth-of-type(2) p,
html body:has(.pricing-page) .pricing-page > section:nth-of-type(2) span {
  color: #F8F3E8 !important;
  -webkit-text-fill-color: #F8F3E8 !important;
}
html body:has(.pricing-page) .pricing-page > section:nth-of-type(2) .text-\[\#F4B952\] {
  color: #F4B952 !important;
  -webkit-text-fill-color: #F4B952 !important;
}
html body:has(.pricing-page) .pricing-page > section:nth-of-type(2) .pricing-workflow-card {
  background: rgba(255,253,247,.07) !important;
  border-color: rgba(248,243,232,.18) !important;
  color: #F8F3E8 !important;
  box-shadow: none !important;
}
html body:has(.pricing-page) .pricing-page > section:nth-of-type(3) {
  background: #E7E8E1 !important;
  color: #102B25 !important;
  border-color: #D0D7CC !important;
}
html body:has(.pricing-page) .pricing-page > section:nth-of-type(3) h2,
html body:has(.pricing-page) .pricing-page > section:nth-of-type(3) p {
  color: #29443B !important;
  -webkit-text-fill-color: #29443B !important;
}
html body:has(.pricing-page) .pricing-page > section:nth-of-type(3) .text-\[\#F4B952\] {
  color: #94620A !important;
  -webkit-text-fill-color: #94620A !important;
}
html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-item {
  background: #FFFEFA !important;
  border-color: #CCD5CA !important;
  color: #102B25 !important;
}
html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-question,
html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-question span:first-child {
  color: #17382F !important;
  -webkit-text-fill-color: #17382F !important;
}
html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-answer,
html body:has(.pricing-page) .pricing-page #pricing-faq .pricing-faq-answer p {
  color: #52665D !important;
  -webkit-text-fill-color: #52665D !important;
}
html body:has(.pricing-page) .pricing-page .pricing-demo-notice {
  background: #0C2428 !important;
  border-color: rgba(244,185,82,.55) !important;
  color: #F8F3E8 !important;
}
html body:has(.pricing-page) .pricing-page .pricing-demo-notice-title {
  margin: 0 !important;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
  color: #FFF8EA !important;
  -webkit-text-fill-color: #FFF8EA !important;
}
html body:has(.pricing-page) .pricing-page .pricing-demo-notice p {
  margin-top: .5rem !important;
  color: #D7E2DB !important;
  -webkit-text-fill-color: #D7E2DB !important;
  font-size: .875rem !important;
  line-height: 1.65 !important;
}
.pricing-page .pricing-term-card { min-height: 100%; padding: 1.65rem; }
.pricing-page .pricing-term-description { min-height: 5rem; }
.pricing-page .pricing-term-includes-label {
  display: block; margin-top: 1.2rem; margin-bottom: .65rem;
  color: #8A641D; font-size: .62rem; font-weight: 850;
  letter-spacing: .13em; line-height: 1.4; text-transform: uppercase;
}
.pricing-page .pricing-term-includes {
  display: flex; width: 100%; align-items: flex-start; gap: .55rem;
  margin-top: .45rem; color: #40554D; font-size: .78rem; line-height: 1.45;
}
.pricing-page .pricing-term-includes > span {
  flex: 0 0 auto; color: #087F68; font-weight: 900;
}
.pricing-page .pricing-term-card.is-active .pricing-term-includes-label { color: #F4B952; }
.pricing-page .pricing-term-card.is-active .pricing-term-includes,
.pricing-page .pricing-term-card.is-active .pricing-term-includes > span {
  color: #E5F0E9;
}
@media (max-width: 767px) {
  .pricing-page .pricing-term-card { padding: 1.25rem; }
  .pricing-page .pricing-term-description { min-height: 0; }
}

/* ===== Original stylesheet: public_about.css ===== */
/* Extracted from about.html.erb — block 1; original order preserved. */
.about-page { background:#00231C !important; color:#F8F3E8; }
  .about-page > section { width:100%; max-width:none; position:relative; isolation:isolate; border-top:3px solid #F4B952 !important; border-bottom:3px solid #F4B952 !important; }
  .about-page > section::before { content:""; position:absolute; z-index:2; top:-3px; left:0; right:0; height:3px; pointer-events:none; background:linear-gradient(90deg,#79B99A 0%,#79B99A 18%,#F4B952 50%,#79B99A 82%,#79B99A 100%); box-shadow:0 0 12px rgba(244,185,82,.45); }
  .about-page .about-hero { background:#E7E8E1 !important; color:#10231F !important; padding-left:clamp(24px,5.5vw,88px); padding-right:clamp(24px,5.5vw,88px); }
  /* Match the prominent Product-page “See how TAVRÉ OS works” badge exactly. */
  .about-page .about-hero .about-eyebrow {
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:12px 24px !important;
    border:2px solid #C88920 !important;
    border-radius:9999px !important;
    background:rgba(244,185,82,.14) !important;
    color:#063F32 !important;
    font-size:12px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    letter-spacing:.22em !important;
    text-transform:uppercase !important;
    box-shadow:0 2px 0 rgba(120,78,12,.16), inset 0 0 0 1px rgba(255,255,255,.24) !important;
  }
  .about-page .about-hero .about-eyebrow > span {
    flex:0 0 10px !important;
    width:10px !important;
    height:10px !important;
    border-radius:50% !important;
    background:#C88920 !important;
    box-shadow:0 0 0 6px rgba(200,137,32,.16) !important;
  }
  @media (max-width:640px) {
    .about-page .about-hero .about-eyebrow {
      gap:8px !important;
      padding:10px 16px !important;
      font-size:11px !important;
      letter-spacing:.16em !important;
      border-width:2px !important;
    }
    .about-page .about-hero .about-eyebrow > span {
      flex-basis:8px !important;
      width:8px !important;
      height:8px !important;
      box-shadow:0 0 0 5px rgba(200,137,32,.16) !important;
    }
  }
  .about-page .about-hero h1 { color:#10231F !important; max-width:1050px; }
  .about-page .about-title-gradient { background:linear-gradient(100deg,#074C3E 0%,#16856B 42%,#C48A25 76%,#F4B952 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .about-page .about-hero > div:first-child { max-width:1100px; }
  .about-page .about-hero > div:first-child > p { color:#354A42 !important; }
  .about-page .about-hero > div:first-child a + a { background:#173A32 !important; color:#F8F3E8 !important; border-color:#52766A !important; }
  .about-page .about-hero > .grid { max-width:1400px; }
  .about-page .about-hero article { background:#F7F3E9 !important; border:1px solid rgba(7,76,62,.28) !important; box-shadow:0 8px 24px rgba(16,35,31,.05); }
  .about-page .about-hero article h2 { color:#10231F !important; }
  .about-page .about-hero article p { color:#3F514A !important; }
  .about-page .about-approach { background:#074C3E !important; color:#F8F3E8 !important; padding-left:clamp(24px,5.5vw,88px); padding-right:clamp(24px,5.5vw,88px); }
  .about-page .about-approach h2,.about-page .about-approach p { color:#F8F3E8 !important; }
  .about-page .about-approach h2 span { color:#D8E8DF !important; }
  .about-page .about-cta { background:#E7E8E1 !important; color:#10231F !important; padding-left:clamp(24px,5.5vw,88px); padding-right:clamp(24px,5.5vw,88px); }
  .about-page .about-cta > div { border-color:rgba(7,76,62,.35) !important; background:linear-gradient(120deg,#082E27 0%,#102A35 55%,#10231F 100%) !important; box-shadow:0 14px 40px rgba(7,76,62,.12); }
  .about-page .about-cta h2 { color:#F8F3E8 !important; }
  .about-page .about-cta p { color:#D7E2DB !important; }
  .about-page .about-cta p.text-\[\#F8CE7A\] { color:#F4B952 !important; }
  .about-page .about-cta a[href^="mailto:"] { color:#F8F3E8 !important; }
  .about-page .about-extra { padding:clamp(56px,7vw,104px) clamp(24px,5.5vw,88px); }
  .about-page .about-extra-inner { max-width:1400px; margin:0 auto; }
  .about-page .about-extra-light { background:#E7E8E1 !important; color:#10231F !important; }
  .about-page .about-extra-dark { background:#074C3E !important; color:#F8F3E8 !important; }
  .about-page .about-extra h2 { font-size:clamp(1.8rem,3vw,3rem); line-height:1.15; letter-spacing:-.035em; font-weight:650; }
  .about-page .about-extra .about-kicker { color:#B17B1E; font-size:.72rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
  .about-page .about-extra-dark .about-kicker { color:#F4B952; }
  .about-page .about-info-card { border:1px solid rgba(7,76,62,.25); border-radius:20px; padding:26px; background:#F7F3E9; }
  .about-page .about-info-card h3 { color:#10231F; font-size:1.1rem; font-weight:650; }
  .about-page .about-info-card p { color:#43574F; line-height:1.8; }
  .about-page .about-extra-dark .about-info-card { background:rgba(0,35,28,.45); border-color:rgba(244,185,82,.32); }
  .about-page .about-extra-dark .about-info-card h3,.about-page .about-extra-dark .about-info-card p { color:#F8F3E8; }
  @media (prefers-reduced-motion: reduce) { .about-page > section::before { box-shadow:none; } }

/* Extracted from about.html.erb — block 2; original order preserved. */
/* Match the homepage's deep emerald, warm neutral and cream text palette. */
  .about-page { background-color:#074C3E !important; color:#F8F3E8 !important; }
  .about-page .about-hero,
  .about-page .about-extra-light,
  .about-page .about-cta { background-color:#E7E8E1 !important; color:#10231F !important; }
  .about-page .about-approach,
  .about-page .about-extra-dark { background-color:#074C3E !important; color:#F8F3E8 !important; }
  .about-page .about-approach h2,
  .about-page .about-approach p,
  .about-page .about-extra-dark h2,
  .about-page .about-extra-dark p { color:#F8F3E8 !important; }
  .about-page .about-approach h2 span { color:#D7E2DB !important; }
  .about-page .about-hero article .flex.h-11.w-11 { color:#074C3E !important; background:rgba(244,185,82,.20); }
  .about-page .about-hero article h2,
  .about-page .about-info-card h3 { color:#10231F !important; }
  .about-page .about-hero article p,
  .about-page .about-info-card p { color:#43574F !important; }
  .about-page .about-extra-dark .about-info-card { background:rgba(0,35,28,.35) !important; border-color:rgba(244,185,82,.32) !important; }
  .about-page .about-extra-dark .about-info-card h3,
  .about-page .about-extra-dark .about-info-card p { color:#F8F3E8 !important; }
  .about-page .about-kicker { color:#A87518 !important; }
  .about-page .about-extra-dark .about-kicker,
  .about-page .about-approach .text-xs { color:#F4B952 !important; }

/* Extracted from about.html.erb — block 3; original order preserved. */
/* Match the deep-green sections used on the homepage and Product page. */
  .about-page > section.about-approach,
  .about-page > section.about-extra-dark {
    background:
      radial-gradient(ellipse at 0% 0%, rgba(244,185,82,.075), transparent 34%),
      radial-gradient(ellipse at 100% 100%, rgba(0,135,101,.20), transparent 38%),
      linear-gradient(125deg, #062820 0%, #07392F 48%, #074C3E 100%) !important;
    background-color: #062820 !important;
    color: #F8F3E8 !important;
    border-color: rgba(244,185,82,.22) !important;
  }
  .about-page > section.about-approach h2,
  .about-page > section.about-approach p,
  .about-page > section.about-extra-dark h2,
  .about-page > section.about-extra-dark p {
    color: #F8F3E8 !important;
  }
  .about-page > section.about-approach .about-kicker,
  .about-page > section.about-extra-dark .about-kicker {
    color: #F4B952 !important;
  }
  .about-page > section.about-extra-dark .about-info-card {
    background: rgba(7, 76, 62, 0.42) !important;
    border-color: rgba(244, 185, 82, 0.32) !important;
  }
  .about-page > section.about-extra-dark .about-info-card h3,
  .about-page > section.about-extra-dark .about-info-card p {
    color: #D8E6DF !important;
  }

/* Extracted from about.html.erb — block 4; original order preserved. */
/* Match the Product page's Commercial Control section background treatment. */
  .about-page > section.about-approach,
  .about-page > section.about-extra-dark {
    background-color: #062820 !important;
    background-image:
      radial-gradient(ellipse at 0% 0%, rgba(244,185,82,.075), transparent 34%),
      radial-gradient(ellipse at 100% 100%, rgba(0,135,101,.20), transparent 38%),
      repeating-linear-gradient(115deg, transparent 0, transparent 118px, rgba(244,185,82,.025) 119px, transparent 121px),
      linear-gradient(125deg, #062820 0%, #07392F 48%, #074C3E 100%) !important;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
    background-size: cover !important;
    color: #F8F3E8 !important;
  }
  .about-page > section.about-approach h2,
  .about-page > section.about-approach p,
  .about-page > section.about-extra-dark h2,
  .about-page > section.about-extra-dark p { color: #F8F3E8 !important; }
  .about-page > section.about-approach .about-kicker,
  .about-page > section.about-extra-dark .about-kicker { color: #F4B952 !important; }

/* Extracted from about.html.erb — block 5; original order preserved. */
/* Why Choose is intentionally a light section, like the Product page's light sections. */
  .about-page .about-why-choose {
    background: #E7E8E1 !important;
    color: #10231F !important;
  }
  .about-page .about-why-choose .about-kicker { color: #A87518 !important; }
  .about-page .about-why-choose h2 { color: #10231F !important; }
  .about-page .about-why-choose > .about-extra-inner > p:not(.about-kicker) { color: #43574F !important; }
  .about-page .about-why-choose .about-info-card {
    background: #F7F3E9 !important;
    border-color: rgba(7,76,62,.25) !important;
  }
  .about-page .about-why-choose .about-info-card h3 { color: #10231F !important; }
  .about-page .about-why-choose .about-info-card p { color: #43574F !important; }

/* Extracted from about.html.erb — block 6; original order preserved. */
/* Give Why Choose the same visible top-and-bottom section framing as the other pages. */
  .about-page > section.about-why-choose {
    position: relative !important;
    border-top: 3px solid #F4B952 !important;
    border-bottom: 3px solid #F4B952 !important;
    box-shadow: inset 0 1px 0 rgba(121,185,154,.75), inset 0 -1px 0 rgba(121,185,154,.75);
  }
  .about-page > section.about-why-choose::before {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    top: -3px !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, #79B99A 0%, #79B99A 18%, #F4B952 50%, #79B99A 82%, #79B99A 100%) !important;
    box-shadow: 0 0 12px rgba(244,185,82,.45) !important;
  }
  .about-page > section.about-why-choose::after {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    bottom: -3px !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, #79B99A 0%, #79B99A 18%, #F4B952 50%, #79B99A 82%, #79B99A 100%) !important;
    box-shadow: 0 0 12px rgba(244,185,82,.45) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .about-page > section.about-why-choose::before,
    .about-page > section.about-why-choose::after { box-shadow: none !important; }
  }

/* Extracted from about.html.erb — block 7; original order preserved. */
/* Only the first (hero) section receives the homepage/Product light background. */
  .about-page > section.about-hero {
    background-color: #E7E8E1 !important;
    background-image:
      radial-gradient(ellipse at 12% 8%, rgba(7,76,62,.075) 0%, transparent 38%),
      radial-gradient(ellipse at 88% 12%, rgba(244,185,82,.13) 0%, transparent 40%),
      linear-gradient(115deg, #E7E8E1 0%, #F3EEE1 52%, #E7E8E1 100%) !important;
    color: #10231F !important;
  }

.about-grid-texture {
  background-image: linear-gradient(rgba(148,163,184,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.14) 1px, transparent 1px);
  background-size: 64px 64px;
}
.about-copy-light { color: #43574F; }
.about-copy-dark { color: #D8E6DF; }

/* About page: keep the three feature-card headings compact */
.about-page > .about-hero > div.grid > article > h2 {
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em;
}

/* ===== Original stylesheet: public_contact.css ===== */
/* Extracted from contact.html.erb — block 1; original order preserved. */
/* Full-width page background */
html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #E8E9E1;
}

.contact-page {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  background: #E8E9E1;
  color: #102B25;
  box-sizing: border-box;
}

.contact-page *,
.contact-page *::before,
.contact-page *::after {
  box-sizing: border-box;
}

/* Full-width cream hero */
.contact-page .contact-hero {
  width: 100%;
  max-width: none;
  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(244, 185, 82, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 82% 20%,
      rgba(7, 76, 62, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 55% 85%,
      rgba(7, 76, 62, 0.05),
      transparent 32%
    ),
    #F8F3E8;
  border-color: #E7D8B8;
}

.contact-page .contact-hero-glow {
  background: transparent;
  opacity: 0;
}

.contact-page .contact-connect-pill {
  border: 2px solid #C58A22;
  background: #EEE3C8;
  color: #064538;
  font-size: 12px !important;
  box-shadow:
    0 2px 0 rgba(6, 69, 56, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  line-height: 1.25;
}

.contact-page .contact-connect-dot {
  background: #C58A22;
  box-shadow: 0 0 0 6px rgba(197, 138, 34, 0.15);
}

.contact-page .contact-heading-accent {
  color: #08AEB0;
  background: linear-gradient(95deg, #0B9C8E 0%, #08B9B8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Continuous background across the complete content section */
.contact-page .contact-content-section {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  background-color: #E8E9E1;
  background-image:
    radial-gradient(
      ellipse at 85% 12%,
      rgba(18, 113, 88, 0.07) 0%,
      transparent 42%
    ),
    radial-gradient(
      ellipse at 8% 88%,
      rgba(244, 185, 82, 0.07) 0%,
      transparent 45%
    );
  border-color: #D5D8CC;
}

.contact-page .contact-content {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
}

/* Contact information card */
.contact-page .contact-info-card {
  background: linear-gradient(135deg, #F9EBCB 0%, #F7F3E9 100%);
  border-color: #D8C89F;
  color: #29443B;
  box-shadow: 0 16px 42px rgba(16, 43, 37, 0.07);
}

.contact-page .contact-info-card h2,
.contact-page .contact-info-card p {
  color: #29443B;
}

.contact-page .contact-method {
  background: rgba(255, 255, 255, 0.58);
  border-color: #D0D8CD;
  color: #29443B;
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease,
    background-color 0.24s ease;
}

.contact-page .contact-method:hover {
  transform: translateY(-2px);
  border-color: #C8942F;
  box-shadow: 0 10px 24px rgba(16, 43, 37, 0.09);
}

.contact-page .contact-explore-card {
  background: linear-gradient(135deg, #DDEFE5 0%, #F7F3E9 100%);
  border-color: #C1D6C8;
  color: #29443B;
}

/* Contact form card */
.contact-page .contact-form-card {
  background: linear-gradient(145deg, #F8F5EB 0%, #EAF1E9 100%);
  border-color: #C5D3C7;
  box-shadow: 0 24px 70px rgba(16, 43, 37, 0.09);
}

.contact-page .contact-field {
  width: 100%;
  min-width: 0;
  background: #FFFEFA;
  color: #102B25;
  border-color: #C7D3C8;
  box-shadow: 0 8px 22px rgba(16, 43, 37, 0.035);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}

.contact-page .contact-field::placeholder {
  color: #9BAA9F;
}

.contact-page .contact-field:focus {
  border-color: #C8942F;
  box-shadow: 0 0 0 3px rgba(244, 185, 82, 0.2);
}

.contact-page select option {
  background: #FFFEFA;
  color: #102B25;
}

.contact-page .contact-hero {
  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(244, 185, 82, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 82% 20%,
      rgba(7, 76, 62, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 55% 85%,
      rgba(7, 76, 62, 0.05),
      transparent 32%
    ),
    #F8F3E8 !important;

  color: #102B25 !important;
  border-color: #E7D8B8 !important;
}

.contact-page .contact-submit {
  background: #F4B952;
  color: #102B25;
  box-shadow: 0 6px 18px rgba(244, 185, 82, 0.12);
}

.contact-page .contact-submit:hover {
  background: #FFD27B;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(244, 185, 82, 0.18);
}

.contact-page button:focus-visible,
.contact-page a:focus-visible {
  outline: 2px solid #94620A;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .contact-page .contact-connect-pill {
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    font-size: 12px;
    letter-spacing: 0.22em;
  }

  .contact-page .contact-content {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .contact-page .contact-info-card,
  .contact-page .contact-form-card {
    border-radius: 1.25rem;
  }
}

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

/* Contact page: reduce oversized headings */
.contact-page h1 {
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em;
}

.contact-page h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem) !important;
  line-height: 1.15 !important;
}

.contact-page h3 {
  font-size: 1.125rem !important;
  line-height: 1.35 !important;
}

@media (max-width: 640px) {
  .contact-page h1 {
    font-size: 2rem !important;
  }

  .contact-page h2 {
    font-size: 1.5rem !important;
  }
}

/* ===== Original stylesheet: public_theme_consistency.css ===== */
/* Extracted from _public_theme_consistency.html.erb — block 1; original order preserved. */
:root{--tavre-emerald:#074c3e;--tavre-emerald-deep:#052d25;--tavre-emerald-mid:#0b3b30;--tavre-gold:#f4b952;--tavre-cream:#f3efe3;--tavre-cream-2:#e7e8de;--tavre-ink:#102d25;--tavre-muted:#40574e;--tavre-border:#cbd4ca}
  /* Consistent header/footer regardless of which public page is open. */
  header, .public-header, #public-header{background:rgba(5,45,37,.97)!important;border-color:rgba(244,185,82,.18)!important;color:#f8f3e8!important;backdrop-filter:blur(16px)}
  /* header a,.public-header a,#public-header a{color:#f4efe3!important}
  header a:hover,.public-header a:hover,#public-header a:hover{color:#f4b952!important} */
  footer,.public-footer,#public-footer{background:radial-gradient(ellipse at 15% 15%,rgba(244,185,82,.07),transparent 35%),linear-gradient(120deg,#052d25,#074c3e)!important;color:#f3efe3!important;border-color:rgba(244,185,82,.2)!important}
  footer p,footer li,footer span,footer a,.public-footer p,.public-footer li,.public-footer span,.public-footer a,#public-footer p,#public-footer li,#public-footer span,#public-footer a{color:#d8e2d8!important}
  footer a:hover,.public-footer a:hover,#public-footer a:hover{color:#f4b952!important}
  /* Section backgrounds, section typography and card surfaces belong to each page stylesheet.
     Keep this file limited to genuinely shared public-site components. */
  :is(.product-page,.pricing-page) a[class*="bg-[#F4B952]"],
  :is(.product-page,.pricing-page) button[class*="bg-[#F4B952]"] {
    background: #f4b952 !important;
    color: #102d25 !important;
    border-color: #f4b952 !important;
  }
  /* Product architecture flow is intentionally a dedicated, rich emerald section with an oversized abstract watermark. */
  .product-page>section#architecture-flow{background:radial-gradient(ellipse at 12% 10%,rgba(244,185,82,.12),transparent 35%),radial-gradient(ellipse at 100% 75%,rgba(11,111,86,.22),transparent 42%),linear-gradient(135deg,#041f1a,#074c3e 62%,#052d25)!important;color:#f8f3e8!important;position:relative;isolation:isolate}
  .product-page>section#architecture-flow:before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0;background:repeating-radial-gradient(ellipse at 0% 0%,transparent 0 48px,rgba(244,185,82,.045) 49px 50px,transparent 51px 70px);opacity:.9}
  .product-page>section#architecture-flow :is(h1,h2,h3,h4){color:#f8f3e8!important}
  .product-page>section#architecture-flow :is(p,li,small,span){color:#d5e1d9}
  /* Keep finance and reporting visually separate. */
  .product-page>#financial-closure{border-top:4px solid #f4b952!important}
  .product-page>#execution-verification{border-top:4px solid rgba(244,185,82,.72)!important}
  /* Forms remain dark, with legible labels and field values. */
  main input::placeholder,main textarea::placeholder{color:#b8c9bf!important;opacity:1!important}
  main input:focus,main select:focus,main textarea:focus{outline:2px solid rgba(244,185,82,.55)!important;outline-offset:1px}
  /* Legal pages use one continuous dark emerald canvas and readable content panels. */
  /* body:has(section .max-w-4xl h1) section.relative.overflow-hidden{background:radial-gradient(ellipse at 90% 0%,rgba(244,185,82,.08),transparent 38%),linear-gradient(135deg,#052d25,#074c3e)!important;color:#f8f3e8!important}
  body:has(section .max-w-4xl h1) section.relative.overflow-hidden :is(h1,h2,h3,h4){color:#f8f3e8!important}
  body:has(section .max-w-4xl h1) section.relative.overflow-hidden :is(p,li,span,td,th){color:#d8e2d8!important} */
  @media(max-width:767px){.product-page>section,.pricing-page>section,.product-page>section:nth-of-type(even) :is(h1,h2),.pricing-page>section:nth-of-type(even) :is(h1,h2){overflow-wrap:anywhere}}
  @media(prefers-reduced-motion:reduce){.product-page *, .pricing-page *{scroll-behavior:auto!important;transition:none!important}}

/* ===== Original stylesheet: documentation.css ===== */
/* TAVRÉ OS public documentation — shared emerald, cream and gold theme.
   Dedicated stylesheet: preserves documentation layout and interactions while
   matching the active public Homepage/About/Pricing/Product visual system. */
/* =========================================================
   Public Documentation — Product theme
   The public navbar remains the site's existing component.
   Documentation owns only the content experience below it.
   ========================================================= */
.docs-site {
  position: relative;
  --docs-bg: #052D25;
  --docs-bg-soft: #0B3B30;
  --docs-surface: #074C3E;
  --docs-surface-soft: #0B3B30;
  --docs-border: rgba(244,185,82,.22);
  --docs-text: #F8F3E8;
  --docs-muted: #D8E2D8;
  --docs-faint: #AABCB2;
  --docs-accent: #F4B952;
  min-height: calc(100vh - 84px);
  overflow: clip;
  background: #052D25;
  color: var(--docs-text);
}

.docs-site::before {
  content: "";
  position: fixed;
  inset: 84px 0 0;
  pointer-events: none;
  opacity: .38;
  background-image:
    linear-gradient(rgba(244,185,82,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,185,82,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.docs-layout {
  position: relative;
  overflow: visible;
  display: block;
  padding-top: 42px;
}

.docs-sidebar {
  position: fixed;
  top: 104px;
  left: max(24px, calc(50% - 640px));
  width: 255px;
  height: calc(100vh - 124px);
  max-height: calc(100vh - 124px);
  min-height: 0;
  overflow: hidden;
  z-index: 20;
}

.docs-sidebar-inner {
  height: 100%;
  max-height: calc(100vh - 124px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 12px 42px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(244,185,82,.28) transparent;
}

.docs-sidebar-inner::-webkit-scrollbar { width: 5px; }
.docs-sidebar-inner::-webkit-scrollbar-track { background: transparent; }
.docs-sidebar-inner::-webkit-scrollbar-thumb { background: rgba(244,185,82,.28); border-radius: 999px; }
.docs-sidebar-label { margin-bottom: 22px; color: #F8F3E8; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.docs-nav-group { margin-bottom: 27px; }
.docs-nav-group-title { margin-bottom: 8px; color: #B8C9BF; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.docs-nav-link { position: relative; display: block; border-left: 2px solid transparent; border-radius: 0 9px 9px 0; padding: 9px 12px 9px 13px; color: #C7D4CD; font-size: 13px; line-height: 1.4; text-decoration: none; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }
.docs-nav-link:hover { color: #F8F3E8; background: rgba(255,255,255,.025); }
.docs-nav-link.is-active { border-left-color: #F4B952; color: #F8F3E8; background: linear-gradient(90deg, rgba(244,185,82,.13), rgba(244,185,82,.035)); box-shadow: inset 0 0 24px rgba(244,185,82,.025); font-weight: 600; }
.docs-nav-link.is-active::after { content: ""; position: absolute; right: 9px; top: 50%; width: 5px; height: 5px; border-radius: 999px; background: #F4B952; box-shadow: 0 0 12px rgba(1,191,192,.75); transform: translateY(-50%); }

.docs-index-content,
.docs-article {
  min-width: 0;
  width: min(820px, calc(100% - 327px));
  margin-left: 327px;
  padding: 0 0 70px;
  position: relative;
  z-index: 1;
}

.docs-inline-header {
  position: relative;
  padding: 12px 0 42px;
  border-bottom: 1px solid rgba(38,52,69,.9);
}

.docs-inline-header h1 {
  max-width: 850px;
  margin-top: 15px;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.03;
  font-weight: 600;
  letter-spacing: -.045em;
}

.docs-inline-header > p:not(.docs-eyebrow) {
  max-width: 760px;
  margin-top: 17px;
  color: var(--docs-muted);
  font-size: 17px;
  line-height: 1.75;
}

.docs-inline-header .docs-search-shell {
  margin-top: 28px;
  max-width: 820px;
}

.docs-article-header { padding-bottom: 38px; }
.docs-article-header h1 { max-width: 760px; }
.docs-article-header > .docs-eyebrow { margin-top: 22px; }

.docs-eyebrow {
  margin: 0;
  color: #F4B952;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.docs-breadcrumbs { display: flex; flex-wrap: wrap; gap: 7px; color: #AABCB2; font-size: 11px; }
.docs-breadcrumbs a { color: #D8E2D8; text-decoration: none; }
.docs-breadcrumbs a:hover { color: #F4B952; }

.docs-search-shell { position: relative; }
.docs-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 12px 0 18px;
  border: 1px solid rgba(244, 185, 82, 0.28);
  border-radius: 14px;
  background: #052D25;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.docs-search:focus-within {
  border-color: rgba(244, 185, 82, 0.6);
  box-shadow: 0 0 0 3px rgba(244, 185, 82, 0.07);
}

.docs-search-icon {
  flex: 0 0 22px;
  width: 22px;
  text-align: center;
  color: #B8C9BF;
  font-size: 22px;
}

.docs-search input {
  display: block;
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #F8F3E8;
  font-size: 15px;
  line-height: 1.5;
  appearance: none;
}

.docs-search input:focus,
.docs-search input:focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.docs-search input::placeholder {
  color: #AABCB2;
  opacity: 1;
}

.docs-search kbd {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid rgba(244, 185, 82, 0.28);
  border-radius: 7px;
  padding: 6px 8px;
  color: #D8E2D8;
  background: #0B3B30;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.docs-search-results { position: absolute; z-index: 70; top: calc(100% + 10px); left: 0; right: 0; display: none; max-height: min(460px, 60vh); overflow: auto; padding: 8px; border: 1px solid rgba(244,185,82,.22); border-radius: 14px; background: #074C3E; box-shadow: 0 25px 80px rgba(0,0,0,.5); }
.docs-search-results.is-open { display: block; }
.docs-search-result { display: block; border-radius: 10px; padding: 12px 13px; color: inherit; text-decoration: none; }
.docs-search-result:hover, .docs-search-result.is-selected { background: rgba(244,185,82,.08); }
.docs-search-result small { display: block; color: #F4B952; font-size: 10px; text-transform: uppercase; letter-spacing: .15em; }
.docs-search-result strong { display: block; margin-top: 4px; font-size: 14px; }
.docs-search-result p { margin-top: 3px; color: #AABCB2; font-size: 12px; line-height: 1.5; }
.docs-search-empty { padding: 22px 14px; color: #AABCB2; text-align: center; font-size: 13px; }

.docs-intro-panel {
  display: grid;
  gap: 28px;
  margin: 38px 0 48px;
  padding: 28px;
  border: 1px solid rgba(244,185,82,.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(11,59,48,.95), rgba(7,76,62,.92));
  box-shadow: 0 20px 70px rgba(0,0,0,.18);
}
.docs-intro-panel h2 { margin-top: 10px; font-size: 25px; letter-spacing: -.03em; }
.docs-intro-panel > div:first-child > p:last-child { max-width: 760px; margin-top: 10px; color: #D8E2D8; font-size: 14px; line-height: 1.75; }

.docs-mini-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.docs-mini-flow-item { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(244,185,82,.22); border-radius: 9px; background: #052D25; }
.docs-mini-flow-item span { color: #F4B952; font-size: 9px; font-weight: 700; }
.docs-mini-flow-item strong { font-size: 11px; color: #F8F3E8; }
.docs-mini-flow > i { color: #F4B952; font-style: normal; font-size: 12px; }
.docs-mini-flow.vertical { display: grid; justify-items: center; }

.docs-section-heading { max-width: 700px; }
.docs-section-heading h2 { margin-top: 13px; font-size: 34px; line-height: 1.1; letter-spacing: -.035em; }
.docs-section-heading > p:last-child { margin-top: 14px; color: #D8E2D8; font-size: 15px; line-height: 1.8; }
.docs-card-grid { display: grid; gap: 34px; margin-top: 8px; }
.docs-topic-group { min-width: 0; }
.docs-topic-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; color: #AABCB2; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.docs-topic-list { display: grid; gap: 8px; }
.docs-topic-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; border: 1px solid rgba(244,185,82,.22); border-radius: 14px; padding: 17px 18px; background: #074C3E; color: inherit; text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.docs-topic-card:hover { transform: translateY(-1px); border-color: rgba(244,185,82,.38); background: #0B3B30; }
.docs-topic-card h3 { font-size: 15px; font-weight: 600; }
.docs-topic-card p { max-width: 720px; margin-top: 5px; color: #AABCB2; font-size: 12px; line-height: 1.55; }
.docs-arrow { flex: 0 0 auto; color: #F4B952; font-size: 18px; }

.docs-article { padding-top: 0; }
.docs-prose { max-width: 820px; padding-top: 42px; color: #D8E2D8; font-size: 15px; line-height: 1.85; }
.docs-prose h2 { margin: 46px 0 14px; color: #F8F3E8; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; }
.docs-prose h2:first-child { margin-top: 0; }
.docs-prose h3 { color: #F8F3E8; font-size: 15px; }
.docs-prose p { margin: 0 0 18px; }
.docs-prose a { color: #F8CE7A; text-decoration: none; }
.docs-prose a:hover { text-decoration: underline; }
.docs-prose ul, .docs-prose ol { margin: 0 0 20px; padding-left: 22px; }
.docs-prose li { margin: 7px 0; padding-left: 4px; }
.docs-callout { margin: 28px 0; border: 1px solid rgba(244,185,82,.22); border-left: 3px solid #F4B952; border-radius: 12px; padding: 18px 19px; background: rgba(244,185,82,.055); color: #D8E2D8; }
.docs-callout strong { color: #F8F3E8; }

.docs-architecture { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 24px 0 34px; }
.docs-architecture-card { min-height: 118px; border: 1px solid rgba(244,185,82,.22); border-radius: 13px; padding: 15px; background: #074C3E; }
.docs-architecture-card span { color: #F4B952; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.docs-architecture-card strong { display: block; margin-top: 10px; color: #F8F3E8; font-size: 14px; }
.docs-architecture-card p { margin-top: 5px; color: #AABCB2; font-size: 12px; line-height: 1.5; }
.docs-architecture > i { display: none; }

.docs-diagram { margin: 24px 0 32px; padding: 20px; border: 1px solid rgba(244,185,82,.22); border-radius: 15px; background: #052D25; overflow: auto; }
.docs-diagram-title { margin-bottom: 16px; color: #B8C9BF; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.docs-diagram-row { display: flex; align-items: center; gap: 10px; min-width: max-content; }
.docs-diagram-row > b { color: #F4B952; font-weight: 500; }
.docs-diagram-branch { display: grid; grid-template-columns: repeat(5, minmax(120px,1fr)); gap: 8px; margin-top: 10px; padding-left: 48px; }
.docs-diagram-branch > div { padding: 10px; border: 1px dashed rgba(244,185,82,.28); border-radius: 9px; color: #C7D4CD; background: #074C3E; font-size: 11px; text-align: center; }
.docs-diagram-caption { margin-top: 13px; color: #B8C9BF; font-size: 11px; }
.docs-node { min-width: 130px; border: 1px solid rgba(244,185,82,.22); border-radius: 10px; padding: 11px 13px; background: #074C3E; color: #F8F3E8; font-size: 12px; text-align: center; }
.docs-node.is-accent { border-color: rgba(244,185,82,.42); box-shadow: inset 0 0 0 1px rgba(244,185,82,.08); }
.docs-node strong, .docs-node small { display: block; }
.docs-node strong { margin-top: 4px; color: #D8E2D8; font-size: 10px; font-weight: 500; }
.docs-node small { margin-top: 3px; color: #AABCB2; font-size: 10px; }
.docs-relationship { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 24px 0 32px; overflow-x: auto; padding: 5px; }
.docs-relationship > span { color: #F4B952; }

.docs-stepper { display: grid; gap: 10px; margin: 24px 0 32px; }
.docs-step { display: flex; gap: 15px; padding: 16px; border: 1px solid rgba(244,185,82,.22); border-radius: 12px; background: #074C3E; }
.docs-step > span { display: flex; align-items: center; justify-content: center; flex: 0 0 34px; height: 34px; border-radius: 9px; background: rgba(244,185,82,.08); color: #F8CE7A; font-size: 10px; font-weight: 700; }
.docs-step strong { color: #F8F3E8; font-size: 14px; }
.docs-step p { margin: 4px 0 0; color: #AABCB2; font-size: 12px; line-height: 1.55; }
.docs-stepper.compact { grid-template-columns: repeat(2, minmax(0,1fr)); }

.docs-comparison { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 24px 0 32px; }
.docs-comparison > div { border: 1px solid rgba(244,185,82,.22); border-radius: 14px; padding: 18px; background: #074C3E; }
.docs-comparison h3 { margin-bottom: 7px; }
.docs-comparison p { color: #C7D4CD; font-size: 13px; }

.docs-status-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 32px; }
.docs-status-flow span { border-radius: 999px; padding: 8px 12px; font-size: 11px; font-weight: 600; }
.docs-status-flow b { color: #B8C9BF; }
.docs-status-flow .planned { border: 1px solid rgba(244,185,82,.28); background: #052D25; color: #D8E2D8; }
.docs-status-flow .recorded { border: 1px solid rgba(245,158,11,.28); background: rgba(245,158,11,.08); color: #F8C86B; }
.docs-status-flow .verified { border: 1px solid rgba(34,197,94,.28); background: rgba(34,197,94,.08); color: #7BE59A; }
.docs-status-flow .financial { border: 1px solid rgba(244,185,82,.28); background: rgba(244,185,82,.08); color: #F8CE7A; }

.docs-table-wrap { margin: 24px 0 32px; overflow-x: auto; border: 1px solid rgba(244,185,82,.22); border-radius: 13px; }
.docs-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.docs-table th, .docs-table td { padding: 13px 15px; border-bottom: 1px solid #1D2A38; text-align: left; vertical-align: top; }
.docs-table th { color: #AABCB2; background: #052D25; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }
.docs-table td { color: #D8E2D8; font-size: 12px; }
.docs-table td:first-child { color: #F8F3E8; font-weight: 600; }
.docs-table tr:last-child td { border-bottom: 0; }

.docs-check-grid, .docs-example-grid, .docs-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 24px 0 32px; }
.docs-check-grid > div, .docs-example-grid > div, .docs-role-grid > div { border: 1px solid rgba(244,185,82,.22); border-radius: 12px; padding: 16px; background: #074C3E; }
.docs-check-grid strong, .docs-example-grid strong, .docs-role-grid strong { color: #F8F3E8; font-size: 13px; }
.docs-check-grid p, .docs-example-grid p, .docs-role-grid p { margin-top: 5px; color: #AABCB2; font-size: 12px; line-height: 1.6; }

.docs-lifecycle { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 24px 0 34px; }
.docs-lifecycle-item { display: flex; gap: 12px; border: 1px solid rgba(244,185,82,.22); border-radius: 11px; padding: 13px; background: #074C3E; }
.docs-lifecycle-item > span { color: #F4B952; font-size: 9px; font-weight: 700; }
.docs-lifecycle-item strong { color: #F8F3E8; font-size: 13px; }
.docs-lifecycle-item p { margin-top: 3px; color: #AABCB2; font-size: 11px; line-height: 1.5; }

.docs-glossary-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 24px 0 32px; }
.docs-glossary-grid > div { border: 1px solid rgba(244,185,82,.22); border-radius: 12px; padding: 15px; background: #074C3E; }
.docs-glossary-grid dt { color: #F8F3E8; font-weight: 700; font-size: 13px; }
.docs-glossary-grid dd { margin: 5px 0 0; color: #C7D4CD; font-size: 12px; line-height: 1.6; }

.docs-troubleshoot { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 24px 0 32px; }
.docs-troubleshoot > div { border: 1px solid rgba(244,185,82,.22); border-radius: 12px; padding: 15px; background: #074C3E; }
.docs-troubleshoot span { color: #F4B952; font-size: 9px; font-weight: 700; }
.docs-troubleshoot strong { display: block; margin-top: 8px; color: #F8F3E8; font-size: 13px; }
.docs-troubleshoot p { margin-top: 5px; color: #AABCB2; font-size: 11px; line-height: 1.55; }
.docs-faq-list { display: grid; gap: 8px; margin: 24px 0 32px; }
.docs-faq-list details { border: 1px solid rgba(244,185,82,.22); border-radius: 12px; background: #074C3E; }
.docs-faq-list summary { cursor: pointer; padding: 15px 16px; color: #F8F3E8; font-size: 13px; font-weight: 600; }
.docs-faq-list p { padding: 0 16px 16px; color: #C7D4CD; font-size: 12px; }

.docs-next-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 820px; margin-top: 70px; padding-top: 22px; border-top: 1px solid rgba(244,185,82,.22); }
.docs-next-card { display: block; min-height: 76px; border: 1px solid rgba(244,185,82,.22); border-radius: 12px; padding: 13px 15px; background: #074C3E; color: inherit; text-decoration: none; transition: border-color .16s ease, background .16s ease; }
.docs-next-card:hover { border-color: rgba(244,185,82,.4); background: #0B3B30; }
.docs-next-card span { display: block; color: #AABCB2; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; }
.docs-next-card strong { display: block; margin-top: 8px; color: #F8F3E8; font-size: 13px; }
.docs-next-card-right { text-align: right; }

@media (max-width: 1100px) {
  .docs-index-content,
  .docs-article {
    width: calc(100% - 260px);
    margin-left: 260px;
  }
  .docs-sidebar { left: 24px; width: 220px; }
  .docs-architecture { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .docs-troubleshoot { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 767px) {
  .docs-layout { display: block; padding-top: 28px; }
  .docs-index-content,
  .docs-article {
    width: auto;
    margin-left: 0;
  }
  .docs-sidebar { position: relative; top: auto; left: auto; width: auto; height: auto; max-height: none; overflow: visible; margin-bottom: 24px; background: transparent; }
  .docs-sidebar-inner { max-height: 250px; padding: 0 0 12px; border-bottom: 1px solid rgba(244,185,82,.22); }
  .docs-inline-header { padding-top: 8px; }
  .docs-inline-header h1 { font-size: 42px; }
  .docs-inline-header > p:not(.docs-eyebrow) { font-size: 15px; }
  .docs-intro-panel { padding: 20px; }
  .docs-architecture, .docs-comparison, .docs-check-grid, .docs-example-grid, .docs-role-grid, .docs-glossary-grid, .docs-lifecycle, .docs-stepper.compact, .docs-troubleshoot { grid-template-columns: 1fr; }
  .docs-architecture > i { display: none; }
  .docs-next-nav { grid-template-columns: 1fr; }
  .docs-next-card-right { text-align: left; }
  .docs-relationship { justify-content: flex-start; }
}

/* Fixed documentation navigation is released inside the documentation
   layout before the public footer enters the viewport. JavaScript supplies
   the exact left/top geometry because the sidebar is viewport-fixed while
   reading. */
.docs-sidebar.is-docs-fixed {
  position: fixed;
}

.docs-sidebar.is-bottom-locked {
  position: absolute;
}

@media (max-width: 767px) {
  .docs-sidebar.is-docs-fixed,
  .docs-sidebar.is-bottom-locked {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: auto;
    height: auto;
    max-height: none;
  }
}

/* Documentation search stays available while the article scrolls.
   It is a sibling of the header so sticky positioning is constrained by
   the documentation article/index region rather than the header itself. */
.docs-sticky-search {
  position: sticky;
  top: 84px;
  z-index: 40;
  padding: 12px 0 14px;
  margin: 0 0 4px;
  background: #052D25;
}

.docs-sticky-search .docs-search-shell {
  max-width: 820px;
}

.docs-sticky-search .docs-search {
  box-shadow: 0 14px 45px rgba(0,0,0,.34);
}

@media (max-width: 767px) {
  .docs-sticky-search {
    top: 84px;
    padding-top: 8px;
    padding-bottom: 12px;
  }
}

/* Mobile documentation navigation: compact burger + slide-in sidebar. */
.docs-mobile-menu-toggle,
.docs-sidebar-mobile-heading,
.docs-mobile-backdrop {
  display: none;
}

.docs-mobile-menu-toggle {
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid rgba(244, 185, 82, .28);
  border-radius: 10px;
  padding: 9px 12px;
  background: rgba(5, 45, 37, .92);
  color: #F8F3E8;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.docs-mobile-menu-icon {
  display: grid;
  gap: 4px;
  width: 18px;
}
.docs-mobile-menu-icon i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #F4B952;
}

@media (max-width: 767px) {
  .docs-layout { padding-top: 16px; }

  .docs-mobile-menu-toggle {
    display: inline-flex;
    position: relative;
    z-index: 31;
    margin: 0 0 14px;
  }

  .docs-mobile-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    z-index: 80;
    inset: 0;
    background: rgba(1, 14, 11, .72);
    backdrop-filter: blur(3px);
  }

  .docs-sidebar {
    position: fixed !important;
    z-index: 90 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(86vw, 340px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    overflow: hidden !important;
    border-right: 1px solid rgba(244, 185, 82, .24);
    background: #052D25 !important;
    box-shadow: 24px 0 70px rgba(0, 0, 0, .35);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .24s ease, visibility .24s ease;
  }

  .docs-sidebar.is-mobile-open {
    transform: translateX(0);
    visibility: visible;
  }

  .docs-sidebar-mobile-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 22px;
    color: #F8F3E8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  .docs-mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(244, 185, 82, .25);
    border-radius: 9px;
    background: #0B3B30;
    color: #F8F3E8;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
  }

  .docs-sidebar-inner {
    height: calc(100% - 54px) !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 0 4px 24px 0 !important;
    border-bottom: 0 !important;
  }

  .docs-sidebar-label { margin-bottom: 18px; }
  .docs-nav-group { margin-bottom: 22px; }

  .docs-breadcrumbs {
    gap: 5px 7px;
    font-size: 11px;
    line-height: 1.6;
  }

  .docs-inline-header { padding-top: 4px; }
  .docs-inline-header h1 {
    margin-top: 12px;
    font-size: clamp(32px, 9vw, 42px);
    line-height: 1.08;
  }

  body.docs-menu-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-sidebar { transition: none; }
}

/* Keep the documentation heading transparent; the page owns the background. */
.docs-inline-header,
.docs-article-header {
  background: transparent !important;
  box-shadow: none !important;
}

.docs-sticky-search {
  background: #052D25;
}


/* TAVRE product preview — reference-matched screens (kept in existing public.css) */
.home-product-preview {
  background: #07191a !important;
  border-color: #1d5947 !important;
  color: #f4f0df;
}
.home-preview-sidebar {
  background: linear-gradient(160deg,#0b211d 0%,#061619 100%) !important;
  border-color: #1d5947 !important;
}
.home-preview-sidebar nav { display:grid; gap:5px; }
.home-preview-nav-item { position:relative; min-height:38px; color:#9aaeb0 !important; padding-left:17px !important; font-size:11px !important; }
.home-preview-nav-item.is-active { color:#05c4c0 !important; background:rgba(1,191,192,.08); }
.home-preview-nav-item.is-active:before { content:""; position:absolute; left:0; top:5px; bottom:5px; width:4px; border-radius:8px; background:#efb944; }
.home-preview-screens { min-height:620px !important; background:#081719; }
.home-preview-screen { padding:30px 30px 48px !important; }
.home-preview-page-head { align-items:center !important; margin-bottom:24px; }
.home-preview-page-head h3 { color:#f5f0df !important; font-size:clamp(29px,3vw,43px) !important; font-weight:800 !important; letter-spacing:-.055em !important; }
.home-preview-page-head p { color:#a9bbb4 !important; font-size:13px !important; }
.home-preview-page-head > div > small, .home-preview-report-hero > div > small, .home-preview-finance-hero > small { color:#f1b83f !important; }
.home-preview-head-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.home-preview-head-actions > span, .home-preview-table-title > span { border:1px solid #205b49; border-radius:30px; padding:10px 15px; color:#b0c4bc; font-size:11px; font-weight:700; white-space:nowrap; }
.home-preview-head-actions button, .home-preview-page-head button, .home-preview-report-grid button, .home-preview-finance-callout button {
  border:0 !important; border-radius:15px !important; background:#efbd50 !important; color:#08211b !important;
  padding:13px 18px !important; font-size:12px !important; font-weight:800 !important; white-space:nowrap;
}
.home-preview-filter { display:grid !important; grid-template-columns:minmax(0,1fr) 180px 180px !important; gap:10px; padding:13px !important; margin:0 0 18px !important; background:#103c30 !important; border-color:#1d5947 !important; }
.home-preview-filter span, .home-preview-filter b { padding:12px 14px; border:1px solid #276653; border-radius:12px; background:#10232a; color:#d5dfd9; font-size:12px; font-weight:500; }
.home-preview-filter small { grid-column:1/-1; color:#f0b83e; font-size:11px; }
.home-preview-table, .home-preview-report-grid > div, .home-preview-finance-callout, .home-preview-finance-kpis > div {
  background:#151719 !important; border-color:#263b37 !important; border-radius:0 !important; overflow:hidden;
}
.home-preview-table-title { position:relative; padding:18px 20px 14px !important; background:#104334; border-bottom:1px solid #205c48; }
.home-preview-table-title strong { color:#f4f0df !important; font-size:17px !important; }
.home-preview-table-title small { margin-top:5px; color:#afc1b8 !important; font-size:11px !important; letter-spacing:0 !important; text-transform:none !important; }
.home-preview-table-title > span { position:absolute; right:18px; top:16px; }
.home-preview-table-head, .home-preview-table-row { display:grid !important; align-items:center; gap:12px; }
.home-preview-table-head { min-height:42px; padding:0 18px !important; background:#17191b; border-bottom:1px solid #303538; color:#a9bcb3 !important; }
.home-preview-table-head span { color:#a9bcb3 !important; font-size:9px !important; font-weight:800; letter-spacing:.17em; }
.home-preview-table-row { min-height:67px; padding:12px 18px !important; border-bottom:1px solid #2a3031 !important; color:#f1eee3 !important; font-size:12px !important; }
.home-preview-table-row:last-child { border-bottom:0 !important; }
.home-preview-table-row > span:first-child { display:flex; align-items:center; gap:12px; min-width:0; }
.home-preview-table-row i { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 42px; border:1px solid #5e7743; border-radius:15px; background:#254b39; color:#f2bd4d; font-size:12px; font-style:normal; font-weight:800; }
.home-preview-table-row strong { color:#b4b7ff !important; font-size:13px !important; line-height:1.35; }
.home-preview-table-row small { display:block; margin-top:4px; color:#a9bbb4 !important; font-size:11px !important; line-height:1.45; font-weight:500; }
.home-preview-table-row .green { display:inline-flex; width:max-content; padding:7px 11px; border:1px solid #17876b; border-radius:20px; background:#104a3b; color:#2bc59b !important; font-size:10px; white-space:nowrap; }
.home-preview-users-table .home-preview-table-head, .home-preview-users-table .home-preview-table-row { grid-template-columns:2fr .65fr .7fr 1fr 1.1fr; }
.home-preview-users-table .home-preview-table-title { background:#104334; }
.home-preview-users-table .home-preview-table-title small { color:#a9bbb4 !important; }
.preview-row-actions { white-space:nowrap; color:#b4b7ff; }
.preview-row-actions em { display:inline-block; padding:8px 11px; margin:0 4px; border-radius:10px; background:#efbd50; color:#10251d; font-style:normal; font-weight:700; }
.preview-row-actions mark { padding:8px 10px; border:1px solid #984b53; border-radius:10px; background:#352125; color:#ff8c91; }
.home-preview-tall .home-preview-table-head, .home-preview-tall .home-preview-table-row { grid-template-columns:2.1fr 1.1fr .8fr .8fr .8fr; }
[data-preview-screen="campaigns"] .home-preview-table-head,
[data-preview-screen="campaigns"] .home-preview-table-row { grid-template-columns:2fr 1fr .8fr .35fr .7fr .65fr; }
[data-preview-screen="advertisements"] .home-preview-table-head,
[data-preview-screen="advertisements"] .home-preview-table-row { grid-template-columns:2.1fr 1fr .7fr .8fr .6fr; }
.preview-type { display:inline-block; width:max-content; padding:7px 10px; border:1px solid #286b56; border-radius:10px; background:#123d31; color:#abc5b9; font-size:10px; }
.home-preview-report-hero, .home-preview-finance-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:25px 28px; margin-bottom:22px; border:1px solid #21614c; border-radius:22px; background:linear-gradient(115deg,#104333,#0a281f); }
.home-preview-report-hero h3, .home-preview-finance-hero h3 { margin:8px 0 5px; color:#f5f0df; font-size:34px; font-weight:800; letter-spacing:-.05em; }
.home-preview-report-hero p, .home-preview-finance-hero p { margin:0; color:#afc1b8; font-size:12px; }
.home-preview-report-hero > span { padding:13px 16px; border:1px solid #276653; border-radius:13px; color:#a9bcb3; font-size:9px; letter-spacing:.14em; font-weight:800; white-space:nowrap; }
.home-preview-report-hero > span strong { display:block; margin-top:7px; color:#b8c9c0; font-size:12px; letter-spacing:0; }
.home-preview-report-intro { margin:4px 0 13px; }
.home-preview-report-intro small { color:#efbd50; font-size:9px; font-weight:800; letter-spacing:.2em; }
.home-preview-report-intro h4 { margin:5px 0; color:#f4f0df; font-size:18px; font-weight:800; }
.home-preview-report-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px !important; }
.home-preview-report-grid > div { padding:19px !important; border-radius:20px !important; background:#09271f !important; border-color:#205b49 !important; }
.home-preview-report-grid small { color:#a9bcb3 !important; }
.home-preview-report-grid h4 { margin:9px 0; color:#f3efdf; font-size:15px; font-weight:800; }
.home-preview-report-grid p { min-height:34px; color:#a9bbb4; font-size:10px; line-height:1.5; }
.home-preview-report-grid button { margin-top:12px; padding:10px 14px !important; }
.home-preview-report-grid b { display:inline-block; margin:12px 0 0 7px; padding:10px 12px; border:1px solid #286653; border-radius:12px; background:#142e2d; color:#e5eee8; font-size:10px; }
.home-preview-finance-hero { display:block; padding:20px 24px; margin-bottom:14px; }
.home-preview-finance-hero h3 { margin:5px 0; font-size:32px; }
.home-preview-finance-callout { display:flex !important; align-items:center; justify-content:space-between; gap:20px; padding:14px 18px !important; margin-bottom:14px; border-radius:18px !important; background:#104333 !important; border-color:#205b49 !important; }
.home-preview-finance-callout strong { display:block; color:#f4f0df; font-size:12px; }
.home-preview-finance-callout small { display:block; margin-top:4px; color:#a9bbb4; font-size:10px; }
.home-preview-finance-kpis { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px !important; }
.home-preview-finance-kpis > div { padding:17px !important; min-height:96px; border-radius:18px !important; background:#104333 !important; border-color:#205b49 !important; }
.home-preview-finance-kpis > div:nth-child(n+5) { grid-column:span 1; }
.home-preview-finance-kpis strong { display:block; margin:10px 0 5px; color:#f4f0df; font-size:20px; font-weight:800; white-space:nowrap; }
.home-preview-finance-kpis span { color:#9bb5a8; font-size:9px; }
.home-preview-finance-ledgers { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.home-preview-finance-ledgers > div { padding:18px; border:1px solid #205b49; border-radius:18px; background:#0d3026; }
.home-preview-finance-ledgers small { color:#9db5a9; font-size:9px; font-weight:800; letter-spacing:.18em; }
.home-preview-finance-ledgers h4 { display:flex; justify-content:space-between; margin:7px 0 16px; color:#f4f0df; font-size:18px; font-weight:800; }
.home-preview-finance-ledgers h4 b { padding:5px 12px; border:1px solid #286653; border-radius:30px; font-size:11px; }
.home-preview-finance-ledgers p { color:#9db5a9; font-size:9px; letter-spacing:.13em; }
.home-preview-finance-ledgers span { color:#a9bbb4; font-size:10px; }
@media (max-width: 900px) {
  .home-preview-screen { padding:22px 18px 44px !important; }
  .home-preview-head-actions { flex-wrap:wrap; justify-content:flex-end; }
  .home-preview-filter { grid-template-columns:1fr 1fr !important; }
  .home-preview-filter span { grid-column:1/-1; }
  .home-preview-finance-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .home-preview-report-grid, .home-preview-finance-ledgers { grid-template-columns:1fr; }
  .home-preview-page-head { align-items:flex-start !important; flex-direction:column; }
  .home-preview-head-actions { justify-content:flex-start; }
  .home-preview-table { overflow-x:auto !important; }
  .home-preview-table-head, .home-preview-table-row { min-width:650px; }
}

/* -------------------------------------------------------------------------
   TAVRÉ OS animated product preview — final isolated layout contract.
   Cream presentation mat + persistent app shell + fixed-height screen stage.
   ------------------------------------------------------------------------- */
.home-product-preview {
  --preview-stage-height: clamp(620px, 52vw, 760px);
  width: 100%;
  box-sizing: border-box;
  padding: clamp(12px, 2.2vw, 28px);
  overflow: visible !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: #e9e7dd !important;
  box-shadow: 0 28px 70px rgba(4, 17, 17, .18);
}
.home-product-preview .home-preview-app-shell {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100%;
  min-height: var(--preview-stage-height) !important;
  height: calc(var(--preview-stage-height) + 1px);
  overflow: hidden;
  border: 1px solid #1d5947;
  border-radius: 22px;
  background: #071719;
  box-shadow: 0 18px 48px rgba(4, 17, 17, .24);
}
.home-product-preview .home-preview-sidebar {
  display: block !important;
  flex: 0 0 218px;
  width: 218px !important;
  min-width: 218px;
  height: 100%;
  box-sizing: border-box;
  padding: 28px 18px !important;
  border-right: 1px solid #1d5947 !important;
  background: linear-gradient(160deg, #0b211d 0%, #061619 100%) !important;
}
.home-product-preview .home-preview-sidebar nav { display: grid; gap: 5px; }
.home-product-preview .home-preview-nav-item {
  min-height: 38px;
  padding: 0 12px 0 17px !important;
  border-radius: 9px;
  color: #c2d0ca !important;
  font-size: 11px !important;
  line-height: 1;
  cursor: pointer;
}
.home-product-preview .home-preview-nav-item.is-active {
  color: #f4bd4e !important;
  background: rgba(244, 185, 82, .11) !important;
  box-shadow: inset 4px 0 0 #efb944;
}
.home-product-preview .home-preview-screens {
  position: relative !important;
  display: block !important;
  width: 100%;
  height: var(--preview-stage-height) !important;
  min-height: var(--preview-stage-height) !important;
  max-height: var(--preview-stage-height) !important;
  overflow: hidden !important;
  isolation: isolate;
  contain: layout paint;
  background: #071719 !important;
}
.home-product-preview .home-preview-screen {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  box-sizing: border-box;
  padding: 30px 30px 36px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(14px, 0, 0);
  pointer-events: none;
  z-index: 0;
  transition: opacity 560ms ease, transform 560ms ease, visibility 0s linear 560ms;
}
.home-product-preview .home-preview-screen::-webkit-scrollbar { display: none; }
.home-product-preview .home-preview-screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  z-index: 1;
  transition: opacity 560ms ease, transform 560ms ease, visibility 0s;
}
.home-product-preview .home-preview-page-head {
  min-height: 126px;
  margin: 0 0 24px !important;
  align-items: center !important;
  gap: 20px;
}
.home-product-preview .home-preview-page-head > div:first-child { min-width: 0; }
.home-product-preview .home-preview-page-head h3 {
  margin: 12px 0 8px !important;
  color: #f5f0df !important;
  font-size: clamp(30px, 3vw, 43px) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -.055em !important;
}
.home-product-preview .home-preview-page-head p {
  max-width: 650px;
  color: #a9bbb4 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.home-product-preview .home-preview-head-actions { flex: 0 0 auto; }
.home-product-preview .home-preview-table { width: 100%; }
.home-product-preview .home-preview-table-head,
.home-product-preview .home-preview-table-row { box-sizing: border-box; }
.home-product-preview .home-preview-table-row { min-height: 72px; }
.home-product-preview .home-preview-table-title { min-height: 88px; box-sizing: border-box; }
.home-product-preview .home-preview-dashboard { padding: 30px !important; }
.home-product-preview .home-dashboard-head { min-height: 112px; }
.home-product-preview .home-dashboard-head h3 { font-size: clamp(28px, 2.8vw, 40px); }
.home-product-preview .home-dashboard-kpi { min-height: 122px; }
.home-product-preview .home-dashboard-money { margin-top: 16px; }
.home-product-preview .home-preview-report-hero { min-height: 150px; box-sizing: border-box; }
.home-product-preview .home-preview-report-grid > div { min-height: 185px; box-sizing: border-box; }
.home-product-preview .home-preview-finance-hero { min-height: 110px; box-sizing: border-box; }
.home-product-preview .home-preview-finance-kpis > div { min-height: 112px; box-sizing: border-box; }
@media (max-width: 900px) {
  .home-product-preview { --preview-stage-height: 700px; }
  .home-product-preview .home-preview-sidebar { flex-basis: 174px; width: 174px !important; min-width: 174px; padding: 22px 12px !important; }
  .home-product-preview .home-preview-screen { padding: 24px 20px 32px !important; }
  .home-product-preview .home-preview-dashboard { padding: 24px 20px 32px !important; }
  .home-product-preview .home-preview-table { overflow-x: auto !important; }
  .home-product-preview .home-preview-table-head,
  .home-product-preview .home-preview-table-row { min-width: 650px; }
}
@media (max-width: 640px) {
  .home-product-preview { --preview-stage-height: 640px; padding: 8px; border-radius: 18px !important; }
  .home-product-preview .home-preview-app-shell { height: calc(var(--preview-stage-height) + 1px); border-radius: 14px; }
  .home-product-preview .home-preview-sidebar { display: none !important; }
  .home-product-preview .home-preview-screens { width: 100%; }
  .home-product-preview .home-preview-screen { padding: 20px 14px 28px !important; }
  .home-product-preview .home-preview-dashboard { padding: 20px 14px 28px !important; }
  .home-product-preview .home-preview-page-head { min-height: 0; align-items: flex-start !important; flex-direction: column; }
  .home-product-preview .home-preview-head-actions { justify-content: flex-start; flex-wrap: wrap; }
  .home-product-preview .home-preview-filter { grid-template-columns: 1fr 1fr !important; }
  .home-product-preview .home-preview-filter span { grid-column: 1 / -1; }
  .home-product-preview .home-preview-report-grid,
  .home-product-preview .home-preview-finance-ledgers { grid-template-columns: 1fr; }
  .home-product-preview .home-preview-finance-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .home-product-preview .home-preview-screen,
  .home-product-preview .home-preview-screen.is-active {
    transition: none !important;
    transform: none !important;
  }
}


/* ========================================================================
   PUBLIC HOMEPAGE — TAVRÉ OS PRODUCT PREVIEW REBUILD
   These styles apply only to the animated preview inside home/index.html.erb.
   They do not affect the authenticated organization dashboard.
   ======================================================================== */
.home-product-preview {
  --preview-stage-height: clamp(700px, 58vw, 850px);
  width: 100%;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f4f0df;
}
.home-product-preview .home-preview-app-shell {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: clamp(20px, 2.4vw, 40px);
  width: 100%;
  height: calc(var(--preview-stage-height) + 36px);
  min-height: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.home-product-preview .home-preview-sidebar {
  display: block !important;
  flex: 0 0 clamp(250px, 21vw, 340px);
  width: clamp(250px, 21vw, 340px) !important;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 34px 24px !important;
  border: 1px solid #205b49 !important;
  border-radius: 30px;
  background: linear-gradient(160deg, #0b211c 0%, #061817 100%) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.16);
}
.home-product-preview .home-preview-sidebar > div:first-child { margin-bottom: 42px !important; }
.home-product-preview .home-preview-sidebar > p {
  color: #c0d0c8 !important;
  font-size: 13px !important;
  letter-spacing: .22em !important;
}
.home-product-preview .home-preview-sidebar nav { display: grid; gap: 8px; margin-top: 18px !important; }
.home-product-preview .home-preview-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px 0 24px !important;
  border-radius: 12px;
  color: #a7b7b2 !important;
  font-size: 14px !important;
  line-height: 1.2;
  cursor: pointer;
  transition: color .22s ease, background .22s ease;
}
.home-product-preview .home-preview-nav-item:hover { color: #f4f0df !important; background: rgba(255,255,255,.035); }
.home-product-preview .home-preview-nav-item.is-active {
  color: #04c4c0 !important;
  background: rgba(244,185,82,.10) !important;
  box-shadow: none !important;
}
.home-product-preview .home-preview-nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 5px;
  border-radius: 8px;
  background: #f4b952;
}
.home-product-preview .home-preview-sidebar > div:last-child {
  margin-top: 36px !important;
  padding-top: 24px !important;
  border-color: #285448 !important;
}
.home-product-preview .home-preview-main-frame {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 32px 26px 26px;
  box-sizing: border-box;
  overflow: hidden !important;
  border: 1px solid #205b49;
  border-radius: 32px;
  background: #061719;
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
}
.home-product-preview .home-preview-screens {
  position: relative !important;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  isolation: isolate;
  contain: layout paint;
  background: transparent !important;
}
.home-product-preview .home-preview-screen {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  padding: 0 0 34px !important;
  box-sizing: border-box;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(18px,0,0);
  pointer-events: none;
  z-index: 0;
  transition: opacity 520ms ease, transform 520ms ease, visibility 0s linear 520ms;
}
.home-product-preview .home-preview-screen::-webkit-scrollbar { display: none; }
.home-product-preview .home-preview-screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0,0,0);
  pointer-events: auto;
  z-index: 1;
  transition: opacity 520ms ease, transform 520ms ease, visibility 0s;
}
/* List-page title banners: distinct page identity inside the same app shell. */
.home-product-preview .home-preview-page-head {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 24px;
  min-height: 190px;
  margin: 0 0 34px !important;
  padding: 34px 42px !important;
  overflow: hidden;
  border: 1px solid #22614d;
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% -12%, transparent 0 185px, rgba(244,185,82,.10) 186px 187px, transparent 188px 211px, rgba(244,185,82,.055) 212px 231px, transparent 232px),
    linear-gradient(112deg,#104333 0%,#0d352b 54%,#09271f 100%);
}
.home-product-preview .home-preview-page-head > div { position: relative; z-index: 1; }
.home-product-preview .home-preview-page-head > div > small,
.home-product-preview .home-preview-report-hero > div > small,
.home-product-preview .home-preview-finance-hero > small {
  display: block;
  color: #f4b952 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .24em !important;
}
.home-product-preview .home-preview-page-head h3 {
  margin: 14px 0 8px !important;
  color: #f5f0df !important;
  font-size: clamp(34px,3.5vw,58px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.06em !important;
}
.home-product-preview .home-preview-page-head p {
  max-width: 720px;
  margin: 0 !important;
  color: #b6c9c0 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}
.home-product-preview .home-preview-head-actions { display:flex; align-items:center; gap:14px; flex:0 0 auto; position:relative; z-index:1; }
.home-product-preview .home-preview-head-actions > span {
  padding: 14px 20px;
  border: 1px solid #286a54;
  border-radius: 28px;
  color: #c1d0c8;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.home-product-preview .home-preview-head-actions button,
.home-product-preview .home-preview-report-grid button,
.home-product-preview .home-preview-finance-callout button {
  border: 0 !important;
  border-radius: 16px !important;
  padding: 16px 23px !important;
  background: #f2bd50 !important;
  color: #09231c !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(244,185,82,.08);
}
/* Directory and register panels. */
.home-product-preview .home-preview-filter {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 230px 230px !important;
  gap: 12px;
  margin: 0 0 26px !important;
  padding: 20px !important;
  border: 1px solid #22614d !important;
  border-radius: 24px !important;
  background: #104333 !important;
}
.home-product-preview .home-preview-filter > span,
.home-product-preview .home-preview-filter > b {
  display: flex;
  align-items: center;
  min-height: 58px;
  box-sizing: border-box;
  padding: 0 20px;
  border: 1px solid #2b715b;
  border-radius: 16px;
  background: #10252a;
  color: #d2ded7;
  font-size: 15px;
  font-weight: 500;
}
.home-product-preview .home-preview-filter small { grid-column: 1/-1; padding: 13px 20px; border: 1px solid #28614e; border-radius: 14px; color: #f4b952; font-size: 13px; }
.home-product-preview .home-preview-table {
  width: 100%;
  overflow: hidden;
  border: 1px solid #263b37 !important;
  border-radius: 0 !important;
  background: #151719 !important;
}
.home-product-preview .home-preview-table-title {
  position: relative;
  min-height: 112px;
  padding: 24px 28px 18px !important;
  box-sizing: border-box;
  border-bottom: 1px solid #28634f;
  background: #104333 !important;
}
.home-product-preview .home-preview-table-title strong { display:block; color:#f4f0df !important; font-size:23px !important; font-weight:800; }
.home-product-preview .home-preview-table-title small { display:block; margin-top:7px; color:#b3c6bd !important; font-size:14px !important; letter-spacing:0 !important; text-transform:none !important; }
.home-product-preview .home-preview-table-title > span { position:absolute; top:22px; right:24px; padding:13px 20px; border:1px solid #286a54; border-radius:28px; color:#bfd0c7; font-size:14px; font-weight:700; white-space:nowrap; }
.home-product-preview .home-preview-table-head,
.home-product-preview .home-preview-table-row { display:grid !important; align-items:center; gap:14px; box-sizing:border-box; }
.home-product-preview .home-preview-table-head { min-height:56px; padding:0 24px !important; border-bottom:1px solid #303638; background:#17191b; }
.home-product-preview .home-preview-table-head span { color:#a9bcb3 !important; font-size:11px !important; font-weight:800; letter-spacing:.20em; }
.home-product-preview .home-preview-table-row { min-height:92px; padding:16px 24px !important; border-bottom:1px solid #2b3233 !important; color:#eeeade !important; font-size:15px !important; }
.home-product-preview .home-preview-table-row:last-child { border-bottom:0 !important; }
.home-product-preview .home-preview-table-row > span:first-child { display:flex; align-items:center; gap:16px; min-width:0; }
.home-product-preview .home-preview-table-row i { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; flex:0 0 56px; border:1px solid #647c49; border-radius:19px; background:#254b39; color:#f4bd4e; font-size:16px; font-style:normal; font-weight:800; }
.home-product-preview .home-preview-table-row strong { color:#b5b8ff !important; font-size:17px !important; font-weight:800; line-height:1.35; }
.home-product-preview .home-preview-table-row small { display:block; margin-top:5px; color:#afc0b8 !important; font-size:14px !important; line-height:1.45; font-weight:500; }
.home-product-preview .home-preview-table-row b.green { display:inline-flex; width:max-content; padding:9px 14px; border:1px solid #187b63; border-radius:24px; background:#104a3b; color:#2bc59b !important; font-size:13px; white-space:nowrap; }
.home-product-preview .home-preview-users-table .home-preview-table-head,
.home-product-preview .home-preview-users-table .home-preview-table-row { grid-template-columns:2fr .7fr .75fr 1fr 1.2fr; }
.home-product-preview .home-preview-tall .home-preview-table-head,
.home-product-preview .home-preview-tall .home-preview-table-row { grid-template-columns:2.1fr 1.05fr .9fr .8fr .9fr; }
.home-product-preview [data-preview-screen="campaigns"] .home-preview-table-head,
.home-product-preview [data-preview-screen="campaigns"] .home-preview-table-row { grid-template-columns:2.1fr 1fr .8fr .35fr .7fr .6fr; }
.home-product-preview [data-preview-screen="advertisements"] .home-preview-table-head,
.home-product-preview [data-preview-screen="advertisements"] .home-preview-table-row { grid-template-columns:2.1fr 1fr .7fr .8fr .6fr; }
.home-product-preview .preview-row-actions { white-space:nowrap; color:#b5b8ff; }
.home-product-preview .preview-row-actions em { display:inline-block; padding:9px 13px; margin:0 5px; border-radius:11px; background:#f2bd50; color:#10251d; font-style:normal; font-weight:800; }
.home-product-preview .preview-row-actions mark { padding:9px 12px; border:1px solid #984b53; border-radius:11px; background:#352125; color:#ff8c91; }
.home-product-preview .preview-type { display:inline-block; width:max-content; padding:9px 13px; border:1px solid #286b56; border-radius:11px; background:#123d31; color:#abc5b9; font-size:13px; }
/* Dashboard is its own command-centre composition, not a list-page header. */
.home-product-preview .home-preview-dashboard { padding: 0 0 36px !important; }
.home-product-preview .home-dashboard-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) 270px;
  gap: 28px;
  min-height: 280px;
  padding: 34px 40px 28px;
  box-sizing: border-box;
  border: 1px solid #4b6e45;
  border-radius: 30px;
  background:
    radial-gradient(circle at 60% 110%, transparent 0 88px, rgba(244,185,82,.08) 89px 90px, transparent 91px),
    radial-gradient(circle at 76% -20%, transparent 0 210px, rgba(244,185,82,.09) 211px 212px, transparent 213px 235px, rgba(244,185,82,.05) 236px 256px, transparent 257px),
    linear-gradient(112deg,#123f31,#0b3027 62%,#09251f);
}
.home-product-preview .home-dashboard-head .home-preview-eyebrow { display:flex; align-items:center; gap:12px; margin:0; color:#c0d1c8; font-size:14px; font-weight:800; letter-spacing:.22em; }
.home-product-preview .home-dashboard-head .home-preview-eyebrow > i { display:inline-block; width:9px; height:9px; border-radius:50%; background:#f4b952; }
.home-product-preview .home-dashboard-head .home-preview-eyebrow span { display:inline-block; width:48px; height:1px; margin:0 4px; background:#426b59; }
.home-product-preview .home-dashboard-head .home-preview-eyebrow b { color:#f4b952; }
.home-product-preview .home-dashboard-head h3 { margin:30px 0 12px; color:#f6f0df; font-size:clamp(34px,4.1vw,64px); font-weight:800; line-height:1; letter-spacing:-.065em; }
.home-product-preview .home-dashboard-head h3 span { color:#f4b952; }
.home-product-preview .home-dashboard-head .home-preview-subtitle { max-width:760px; color:#b6c9c0; font-size:16px; line-height:1.65; }
.home-product-preview .home-dashboard-operational { align-self:stretch; display:block; padding:12px 0 0 28px; border-left:1px solid #28604d; color:#b8c9c0; font-size:11px; white-space:normal; }
.home-product-preview .home-dashboard-operational small { display:block; margin-top:26px; color:#b5c8bd; font-size:10px; font-weight:800; letter-spacing:.18em; }
.home-product-preview .home-dashboard-operational strong { display:inline-block; margin:10px 12px 0 0; color:#f4f0df; font-size:62px; line-height:1; }
.home-product-preview .home-dashboard-operational span { display:inline-block; max-width:80px; color:#b6c9c0; font-size:11px; }
.home-product-preview .home-dashboard-operational hr { margin:20px 0 12px; border-color:#285a49; }
.home-product-preview .home-dashboard-operational small:last-child { margin:0; letter-spacing:0; font-weight:500; }
.home-product-preview .home-dashboard-operational small b { float:right; color:#f4f0df; }
.home-product-preview .home-dashboard-actions { display:flex; gap:14px; margin:18px 28px 0; }
.home-product-preview .home-dashboard-action { flex:0 1 290px; min-height:76px; padding-left:76px; border:1px solid #28634f; border-radius:18px; background:#0b2b23; }
.home-product-preview .home-dashboard-action-primary { border-color:#8b8740; background:rgba(244,185,82,.09); }
.home-product-preview .home-dashboard-action-icon { left:18px; width:42px; height:42px; border:1px solid #286b55; border-radius:13px; background:#10382e; color:#f4b952; font-size:22px; }
.home-product-preview .home-dashboard-action small { color:#9fb5aa; font-size:9px; }
.home-product-preview .home-dashboard-action strong { color:#f3efdf; font-size:14px; }
.home-product-preview .home-dashboard-action em { right:18px; color:#f4b952; font-size:22px; }
.home-product-preview .home-dashboard-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0 0; }
.home-product-preview .home-dashboard-kpi { min-height:182px; padding:22px 20px 18px; border:1px solid #24604b; border-radius:22px; background:#09271f; }
.home-product-preview .home-dashboard-kpi::before { left:0; top:0; right:0; height:3px; background:#23664e; }
.home-product-preview .home-dashboard-kpi-accent::before { background:#f4b952; }
.home-product-preview .home-dashboard-kpi-icon { width:42px; height:42px; margin-bottom:20px; border:1px solid #476b44; border-radius:13px; background:#0e352a; font-size:17px; }
.home-product-preview .home-dashboard-kpi small { top:29px; left:76px; color:#afc2b8; font-size:10px; letter-spacing:.18em; }
.home-product-preview .home-dashboard-kpi strong { color:#f5f0df; font-size:42px; }
.home-product-preview .home-dashboard-kpi em { margin-top:20px; color:#b0c4b9; font-size:12px; }
.home-product-preview .home-dashboard-money { margin-top:18px; padding:26px 28px; border:1px solid #24604b; border-radius:24px; background:linear-gradient(120deg,#103b2f,#092a22); }
.home-product-preview .home-dashboard-money-head h4 { color:#f4f0df; font-size:24px; }
.home-product-preview .home-dashboard-money-head p { color:#b0c4b9; font-size:13px; }
.home-product-preview .home-dashboard-money-head small { color:#b0c4b9; font-size:10px; }
.home-product-preview .home-dashboard-money-head a { padding:10px 14px; border:1px solid #63713d; border-radius:12px; color:#f4b952; font-size:11px; }
.home-product-preview .home-dashboard-money-grid { grid-template-columns:1.45fr repeat(3,1fr); gap:12px; }
.home-product-preview .home-dashboard-money-grid > div { min-height:140px; border-color:#28634f; border-radius:18px; background:#0b2b23; }
.home-product-preview .home-dashboard-billed { background:linear-gradient(135deg,#27422b,#15372c) !important; border-color:#7b793c !important; }
.home-product-preview .home-dashboard-billed > strong { color:#f3efdf; font-size:29px; }
/* Finance and reporting scenes. */
.home-product-preview .home-preview-report-hero,
.home-product-preview .home-preview-finance-hero {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:190px;
  margin:0 0 28px;
  padding:32px 36px;
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid #22614d;
  border-radius:28px;
  background:
    radial-gradient(circle at 82% -20%, transparent 0 190px, rgba(244,185,82,.09) 191px 192px, transparent 193px 215px, rgba(244,185,82,.05) 216px 236px, transparent 237px),
    linear-gradient(112deg,#104333,#0a281f);
}
.home-product-preview .home-preview-report-hero h3,
.home-product-preview .home-preview-finance-hero h3 { margin:14px 0 8px; color:#f5f0df; font-size:clamp(34px,3.5vw,56px); font-weight:800; line-height:1; letter-spacing:-.06em; }
.home-product-preview .home-preview-report-hero p,
.home-product-preview .home-preview-finance-hero p { margin:0; color:#b6c9c0; font-size:16px; }
.home-product-preview .home-preview-report-hero > span { padding:16px 20px; border:1px solid #286a54; border-radius:15px; color:#b6c9c0; font-size:11px; letter-spacing:.16em; font-weight:800; white-space:nowrap; }
.home-product-preview .home-preview-report-hero > span strong { display:block; margin-top:8px; color:#c6d4cb; font-size:15px; letter-spacing:0; }
.home-product-preview .home-preview-report-intro { margin:4px 0 18px; }
.home-product-preview .home-preview-report-intro small { color:#f4b952; font-size:11px; font-weight:800; letter-spacing:.22em; }
.home-product-preview .home-preview-report-intro h4 { margin:8px 0; color:#f4f0df; font-size:24px; font-weight:800; }
.home-product-preview .home-preview-report-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px !important; }
.home-product-preview .home-preview-report-grid > div { min-height:205px; padding:24px !important; border:1px solid #23634e !important; border-radius:22px !important; background:#09271f !important; }
.home-product-preview .home-preview-report-grid small { color:#a9c0b4 !important; font-size:11px; letter-spacing:.18em; }
.home-product-preview .home-preview-report-grid h4 { margin:12px 0; color:#f3efdf; font-size:20px; font-weight:800; }
.home-product-preview .home-preview-report-grid p { min-height:38px; color:#b1c4b9; font-size:13px; line-height:1.5; }
.home-product-preview .home-preview-report-grid button { margin-top:16px; padding:13px 18px !important; }
.home-product-preview .home-preview-report-grid b { display:inline-block; margin:16px 0 0 8px; padding:12px 15px; border:1px solid #286653; border-radius:13px; background:#142e2d; color:#e5eee8; font-size:12px; }
.home-product-preview .home-preview-finance-hero { display:block; min-height:172px; margin-bottom:28px; }
.home-product-preview .home-preview-finance-hero h3 { font-size:48px; }
.home-product-preview .home-preview-finance-callout { display:flex !important; align-items:center; justify-content:space-between; gap:20px; min-height:94px; margin:0 0 18px; padding:18px 24px !important; border:1px solid #23634e !important; border-radius:24px !important; background:#104333 !important; }
.home-product-preview .home-preview-finance-callout strong { display:block; color:#f4f0df; font-size:16px; }
.home-product-preview .home-preview-finance-callout small { display:block; margin-top:6px; color:#b1c4b9; font-size:12px; }
.home-product-preview .home-preview-finance-kpis { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px !important; }
.home-product-preview .home-preview-finance-kpis > div { position:relative; min-height:142px; padding:24px !important; overflow:hidden; border:1px solid #23634e !important; border-radius:26px !important; background:#103b2f !important; }
.home-product-preview .home-preview-finance-kpis > div::after { content:""; position:absolute; width:170px; height:170px; right:-65px; bottom:-95px; border:1px solid rgba(244,185,82,.10); border-radius:50%; box-shadow:0 0 0 20px rgba(244,185,82,.025),0 0 0 40px rgba(244,185,82,.02); }
.home-product-preview .home-preview-finance-kpis small { color:#b2c6bb !important; font-size:13px !important; font-weight:700; }
.home-product-preview .home-preview-finance-kpis strong { position:relative; z-index:1; display:block; margin:16px 0 8px; color:#f4f0df; font-size:28px; font-weight:800; letter-spacing:-.04em; white-space:nowrap; }
.home-product-preview .home-preview-finance-kpis span { position:relative; z-index:1; color:#9db5a9; font-size:12px; }
.home-product-preview .home-preview-finance-kpis > div:nth-child(n+5) { grid-column:span 1; }
.home-product-preview .home-preview-finance-ledgers { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px; }
.home-product-preview .home-preview-finance-ledgers > div { padding:26px 28px; border:1px solid #23634e; border-radius:24px; background:#0d3026; }
.home-product-preview .home-preview-finance-ledgers small { color:#a8c0b4; font-size:11px; font-weight:800; letter-spacing:.2em; }
.home-product-preview .home-preview-finance-ledgers h4 { display:flex; justify-content:space-between; margin:10px 0 20px; color:#f4f0df; font-size:26px; font-weight:800; }
.home-product-preview .home-preview-finance-ledgers h4 b { padding:8px 14px; border:1px solid #286653; border-radius:30px; font-size:14px; }
.home-product-preview .home-preview-finance-ledgers p { color:#a5bdb1; font-size:11px; letter-spacing:.14em; }
.home-product-preview .home-preview-finance-ledgers span { display:block; padding-top:14px; border-top:1px solid #245744; color:#b6c9c0; font-size:13px; }
@media (max-width: 1100px) {
  .home-product-preview { --preview-stage-height: 760px; }
  .home-product-preview .home-preview-sidebar { flex-basis:220px; width:220px !important; padding:26px 16px !important; }
  .home-product-preview .home-preview-nav-item { min-height:43px; font-size:12px !important; }
  .home-product-preview .home-preview-main-frame { padding:22px 18px; }
  .home-product-preview .home-preview-page-head { min-height:160px; padding:26px !important; }
  .home-product-preview .home-preview-table-head,
  .home-product-preview .home-preview-table-row { min-width:720px; }
  .home-product-preview .home-preview-table { overflow-x:auto; }
  .home-product-preview .home-dashboard-head { grid-template-columns:minmax(0,1fr) 210px; padding:28px; }
  .home-product-preview .home-dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-product-preview .home-dashboard-money-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-product-preview .home-preview-finance-kpis { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 700px) {
  .home-product-preview { --preview-stage-height: 690px; }
  .home-product-preview .home-preview-app-shell { display:block !important; height:var(--preview-stage-height); }
  .home-product-preview .home-preview-sidebar { display:none !important; }
  .home-product-preview .home-preview-main-frame { height:100%; padding:14px; border-radius:20px; }
  .home-product-preview .home-preview-page-head { align-items:flex-start !important; flex-direction:column; min-height:0; padding:24px !important; margin-bottom:18px !important; }
  .home-product-preview .home-preview-head-actions { flex-wrap:wrap; justify-content:flex-start; }
  .home-product-preview .home-preview-filter { grid-template-columns:1fr !important; padding:12px !important; }
  .home-product-preview .home-preview-filter small { grid-column:auto; }
  .home-product-preview .home-dashboard-head { display:block; min-height:0; padding:24px; }
  .home-product-preview .home-dashboard-operational { display:none; }
  .home-product-preview .home-dashboard-actions { flex-direction:column; margin:16px 0 0; }
  .home-product-preview .home-dashboard-action { flex:1 1 auto; }
  .home-product-preview .home-dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-product-preview .home-dashboard-money { padding:18px; }
  .home-product-preview .home-dashboard-money-grid { grid-template-columns:1fr; }
  .home-product-preview .home-preview-report-hero { align-items:flex-start; flex-direction:column; padding:24px; }
  .home-product-preview .home-preview-report-grid,
  .home-product-preview .home-preview-finance-ledgers { grid-template-columns:1fr; }
  .home-product-preview .home-preview-finance-callout { align-items:flex-start; flex-direction:column; }
  .home-product-preview .home-preview-finance-kpis { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .home-product-preview .home-preview-finance-kpis strong { font-size:20px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-product-preview .home-preview-screen,
  .home-product-preview .home-preview-screen.is-active { transition:none !important; transform:none !important; }
}


/* ========================================================================
   PUBLIC HOMEPAGE PRODUCT PREVIEW — FINAL COMPOSITION CORRECTIONS
   Keep this scoped to the public homepage preview only.
   ======================================================================== */
.home-preview-scale-stage {
  container-type: inline-size;
  width: 100%;
}
.home-product-preview {
  /* Keep the original 1320px design canvas, then scale the entire interface
     proportionally into its max-w-6xl (1152px) homepage container. */
  --preview-scale: .872727;
  width: 1320px;
  max-width: none;
  margin-inline: 0;
  transform: scale(var(--preview-scale));
  transform-origin: top left;
  margin-bottom: -92px;
  --preview-stage-height: 720px;
}
/* Scale down the complete 1320px canvas in proportion to the available
   max-w-6xl container. Every child (sidebar, typography, cards and tables)
   scales together, so no individual layout has to be squeezed independently. */
@container (max-width: 1100px) {
  .home-product-preview { --preview-scale: .80; margin-bottom: -130px; }
}
@container (max-width: 1000px) {
  .home-product-preview { --preview-scale: .74; margin-bottom: -169px; }
}
@container (max-width: 900px) {
  .home-product-preview { --preview-scale: .67; margin-bottom: -214px; }
}
@container (max-width: 800px) {
  .home-product-preview { --preview-scale: .60; margin-bottom: -260px; }
}
@container (max-width: 760px) {
  .home-product-preview { --preview-scale: .56; margin-bottom: -246px; }
}
@container (max-width: 700px) {
  .home-product-preview { --preview-scale: .52; margin-bottom: -269px; }
}
@container (max-width: 600px) {
  .home-product-preview { --preview-scale: .44; margin-bottom: -314px; }
}
@container (max-width: 500px) {
  .home-product-preview { --preview-scale: .36; margin-bottom: -358px; }
}
.home-product-preview .home-preview-app-shell {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 0 !important;
  width: 100%;
  height: var(--preview-stage-height) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid #205b49 !important;
  border-radius: 28px !important;
  background: #061719 !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.16) !important;
}
.home-product-preview .home-preview-sidebar {
  flex: 0 0 250px !important;
  width: 250px !important;
  height: 100% !important;
  padding: 30px 20px !important;
  border: 0 !important;
  border-right: 1px solid #205b49 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.home-product-preview .home-preview-sidebar > div:first-child { margin-bottom: 34px !important; }
.home-product-preview .home-preview-sidebar nav { gap: 5px !important; margin-top: 14px !important; }
.home-product-preview .home-preview-nav-item { min-height: 42px !important; padding-inline: 16px !important; font-size: 13px !important; }
.home-product-preview .home-preview-sidebar > div:last-child { margin-top: 28px !important; padding-top: 20px !important; }
.home-product-preview .home-preview-main-frame {
  flex: 1 1 auto;
  width: calc(100% - 250px);
  height: 100% !important;
  min-width: 0;
  padding: 28px 24px 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.home-product-preview .home-preview-screens {
  height: 100% !important;
  overflow: hidden !important;
}
.home-product-preview .home-preview-screen,
.home-product-preview .home-preview-screen.is-active {
  height: 100% !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}
.home-product-preview .home-preview-screen::-webkit-scrollbar { display: none !important; }
.home-product-preview .home-preview-screen { padding-bottom: 0 !important; }

/* Dashboard: actions belong to the Command Centre hero. */
.home-product-preview .home-preview-dashboard { padding: 0 !important; }
.home-product-preview .home-dashboard-head {
  grid-template-columns: minmax(0,1fr) 235px !important;
  gap: 24px !important;
  min-height: 292px !important;
  padding: 28px 32px 24px !important;
  border-radius: 26px !important;
}
.home-product-preview .home-dashboard-copy { min-width: 0; }
.home-product-preview .home-dashboard-head h3 {
  margin: 22px 0 10px !important;
  font-size: clamp(40px,3.5vw,56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.065em !important;
}
.home-product-preview .home-dashboard-head .home-preview-subtitle {
  max-width: 690px;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}
.home-product-preview .home-dashboard-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;
  margin: 20px 0 0 !important;
}
.home-product-preview .home-dashboard-action {
  flex: 0 1 260px !important;
  min-height: 66px !important;
  padding-left: 66px !important;
  border-radius: 16px !important;
}
.home-product-preview .home-dashboard-action-icon { left: 14px !important; width: 38px !important; height: 38px !important; }
.home-product-preview .home-dashboard-action em { right: 14px !important; }
.home-product-preview .home-dashboard-operational { padding-left: 22px !important; }
.home-product-preview .home-dashboard-operational small { margin-top: 20px !important; }
.home-product-preview .home-dashboard-operational strong { font-size: 56px !important; }
.home-product-preview .home-dashboard-kpis { gap: 12px !important; margin-top: 16px !important; }
.home-product-preview .home-dashboard-kpi { min-height: 150px !important; padding: 17px 16px 14px !important; border-radius: 20px !important; }
.home-product-preview .home-dashboard-kpi-icon { width: 36px !important; height: 36px !important; margin-bottom: 14px !important; }
.home-product-preview .home-dashboard-kpi small { top: 25px !important; left: 64px !important; font-size: 9px !important; }
.home-product-preview .home-dashboard-kpi strong { font-size: 36px !important; }
.home-product-preview .home-dashboard-kpi em { margin-top: 12px !important; font-size: 11px !important; }
.home-product-preview .home-dashboard-money { margin-top: 16px !important; padding: 20px 22px !important; border-radius: 22px !important; }
.home-product-preview .home-dashboard-money-head h4 { font-size: 21px !important; }
.home-product-preview .home-dashboard-money-head p { font-size: 12px !important; }
.home-product-preview .home-dashboard-money-grid { gap: 10px !important; }
.home-product-preview .home-dashboard-money-grid > div { min-height: 118px !important; }

/* Rounded directory/table cards, consistent across all preview scenes. */
.home-product-preview .home-preview-table {
  border-radius: 22px !important;
  overflow: hidden !important;
}
.home-product-preview .home-preview-table-title { min-height: 88px !important; padding: 20px 24px 14px !important; }
.home-product-preview .home-preview-table-title strong { font-size: 21px !important; }
.home-product-preview .home-preview-table-title small { font-size: 13px !important; }
.home-product-preview .home-preview-table-title > span { top: 17px !important; right: 18px !important; }
.home-product-preview .home-preview-table-head { min-height: 48px !important; padding-inline: 20px !important; }
.home-product-preview .home-preview-table-row { min-height: 76px !important; padding: 12px 20px !important; }
.home-product-preview .home-preview-table-row i { width: 48px !important; height: 48px !important; flex-basis: 48px !important; border-radius: 16px !important; }
.home-product-preview .home-preview-table-row strong { font-size: 15px !important; }
.home-product-preview .home-preview-table-row small { font-size: 12px !important; }
.home-product-preview .home-preview-page-head {
  min-height: 150px !important;
  margin-bottom: 20px !important;
  padding: 26px 30px !important;
  border-radius: 24px !important;
}
.home-product-preview .home-preview-page-head h3 { font-size: clamp(34px,3.2vw,48px) !important; }
.home-product-preview .home-preview-page-head p { font-size: 14px !important; }
.home-product-preview .home-preview-filter { margin-bottom: 20px !important; padding: 16px !important; border-radius: 22px !important; }
.home-product-preview .home-preview-filter > span,
.home-product-preview .home-preview-filter > b { min-height: 50px !important; font-size: 13px !important; }
.home-product-preview .home-preview-filter small { padding: 10px 16px !important; font-size: 12px !important; }
.home-product-preview .home-preview-report-hero,
.home-product-preview .home-preview-finance-hero { border-radius: 24px !important; }
.home-product-preview .home-preview-report-grid > div,
.home-product-preview .home-preview-finance-ledgers > div { border-radius: 20px !important; }

@media (max-width: 1100px) {
  .home-product-preview { --preview-stage-height: 650px; }
  .home-product-preview .home-preview-sidebar { flex-basis: 205px !important; width: 205px !important; padding: 24px 14px !important; }
  .home-product-preview .home-preview-main-frame { width: calc(100% - 205px); padding: 20px 16px !important; }
  .home-product-preview .home-dashboard-head { grid-template-columns:minmax(0,1fr) 185px !important; padding: 22px !important; }
  .home-product-preview .home-dashboard-head h3 { font-size: 38px !important; }
  .home-product-preview .home-dashboard-action { flex-basis: 220px !important; }
  .home-product-preview .home-dashboard-kpis { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  .home-product-preview .home-dashboard-kpi { padding: 14px 12px !important; }
  .home-product-preview .home-dashboard-kpi strong { font-size: 30px !important; }
}
@media (max-width: 760px) {
  .home-product-preview { --preview-stage-height: 560px; }
  .home-product-preview .home-preview-app-shell { display:block !important; height:var(--preview-stage-height) !important; }
  .home-product-preview .home-preview-sidebar { display:none !important; }
  .home-product-preview .home-preview-main-frame { width:100%; height:100% !important; padding:14px !important; }
  .home-product-preview .home-dashboard-head { display:block !important; min-height:0 !important; padding:20px !important; }
  .home-product-preview .home-dashboard-head h3 { font-size:34px !important; }
  .home-product-preview .home-dashboard-operational { display:none !important; }
  .home-product-preview .home-dashboard-actions { gap:8px !important; margin-top:14px !important; }
  .home-product-preview .home-dashboard-action { flex:1 1 100% !important; min-height:54px !important; }
  .home-product-preview .home-dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .home-product-preview .home-dashboard-money { padding:14px !important; }
  .home-product-preview .home-dashboard-money-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .home-product-preview .home-preview-page-head { min-height:0 !important; align-items:flex-start !important; flex-direction:column !important; padding:20px !important; }
  .home-product-preview .home-preview-head-actions { flex-wrap:wrap; }
  .home-product-preview .home-preview-filter { grid-template-columns:1fr !important; }
  .home-product-preview .home-preview-report-grid,
  .home-product-preview .home-preview-finance-ledgers { grid-template-columns:1fr !important; }
}


/* TAVRÉ OS public homepage — scroll reveal motion */
.public-scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 620ms cubic-bezier(.2, .7, .2, 1),
    transform 620ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.public-scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.public-scroll-reveal-item {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 560ms cubic-bezier(.2, .7, .2, 1),
    transform 560ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.public-scroll-reveal-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .public-scroll-reveal,
  .public-scroll-reveal-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}