:root {
      --ink: #f6efd8;
      --paper: #151312;
      --paper-2: #1d1a18;
      --panel: #211d1a;
      --muted: #a79d8b;
      --line: rgba(246, 239, 216, .14);
      --red: #ef4938;
      --red-deep: #cd3327;
      --red-soft: #ffe0da;
      --green: #246a4b;
      --green-soft: #dff2e7;
      --shadow: 0 24px 70px rgba(0, 0, 0, .34);
      --radius-xl: 32px;
      --radius-lg: 22px;
      --radius-md: 14px;
      --max: 1200px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 78% 8%, rgba(255, 73, 56, .07), transparent 28rem),
        var(--paper);
      font-family: "DM Sans", sans-serif;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    button, input, select, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    a { color: inherit; text-decoration: none; }
    .wrap { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
    .mono { font-family: "IBM Plex Mono", monospace; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 30;
      border-bottom: 1px solid transparent;
      background: rgba(21,19,18,.86);
      backdrop-filter: blur(16px);
    }
    .site-header.scrolled { border-color: var(--line); }
    .header-inner {
      min-height: 76px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 24px;
    }
    .nav { display: flex; gap: 22px; font-size: .9rem; font-weight: 700; }
    .nav a { color: #d7cdb6; }
    .nav a:hover { color: var(--red-deep); }
    .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; }
    .brand-mark {
      width: 28px; height: 28px; border-radius: 9px; background: #2a2522; position: relative;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
    }
    .brand-mark::before,
    .brand-mark::after { content: ""; position: absolute; background: var(--red); border-radius: 999px; }
    .brand-mark::before { width: 13px; height: 4px; left: 7px; top: 8px; }
    .brand-mark::after { width: 8px; height: 4px; left: 7px; top: 16px; }
    .header-actions { display: flex; justify-content: flex-end; gap: 10px; }

    .button {
      min-height: 48px;
      padding: 0 20px;
      border: 1px solid transparent;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-weight: 800;
      font-size: .9rem;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    }
    .button:hover { transform: translateY(-2px); }
    .button:disabled {
      cursor: wait;
      opacity: .72;
      transform: none;
      box-shadow: none;
    }
    .button.is-loading { pointer-events: none; }
    .button-spinner {
      width: 15px;
      height: 15px;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: button-spin .75s linear infinite;
    }
    @keyframes button-spin {
      to { transform: rotate(360deg); }
    }
    .button-primary { color: #fff; background: var(--red); box-shadow: 0 12px 26px rgba(239,73,56,.22); }
    .button-primary:hover { background: var(--red-deep); box-shadow: 0 16px 32px rgba(239,73,56,.28); }
    .button-secondary { color: var(--ink); background: transparent; border-color: var(--line); }
    .button-secondary:hover { background: rgba(255,255,255,.035); border-color: rgba(246,239,216,.3); }
    .button-dark { color: #151312; background: var(--ink); }
    .button-dark:hover { background: #fff8e6; }

    .hero { padding: 76px 0 70px; }
    .hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 64px; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
      color: var(--red-deep); font: 600 .72rem/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2 { font-family: "Manrope", sans-serif; }
    h1 { max-width: 650px; margin-bottom: 24px; font-size: clamp(3.5rem, 6.7vw, 6.6rem); line-height: .94; letter-spacing: -.072em; font-weight: 800; }
    h1 em { color: var(--red); font-style: normal; }
    .hero-copy { max-width: 580px; margin-bottom: 30px; color: #d7cdb6; font-size: 1.12rem; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .micro-proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; color: var(--muted); font-size: .8rem; font-weight: 600; }
    .micro-proof span { display: inline-flex; align-items: center; gap: 7px; }
    .micro-proof span::before { content: "✓"; color: var(--green); font-weight: 800; }

    .product-shell {
      position: relative;
      padding: 0;
      border-radius: 30px;
      background: transparent;
      border: 0;
      box-shadow: none;
      transform: none;
      isolation: isolate;
    }
    .product-shell::before {
      content: "";
      position: absolute;
      inset: 13% -7% -10% 8%;
      z-index: -1;
      border-radius: 50%;
      background: rgba(255, 73, 56, .18);
      filter: blur(55px);
    }
    .app-preview {
      overflow: hidden;
      border: 1px solid rgba(19, 17, 15, .14);
      border-radius: 22px;
      background: #f8f5ef;
      color: #201d1a;
      box-shadow: 0 30px 70px rgba(0,0,0,.42), 0 0 0 8px rgba(255,255,255,.025);
      transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
    }
    .app-topbar { height: 52px; display:flex; align-items:center; justify-content:space-between; padding:0 17px; border-bottom:1px solid #e7e0d6; background:#fffdf9; }
    .app-brand { display:flex; align-items:center; gap:8px; font-weight:800; font-size:.76rem; }
    .app-brand-dot { width:18px; height:18px; border-radius:6px; display:grid; place-items:center; color:white; background:var(--red); font-size:.62rem; }
    .app-user { width:25px; height:25px; border-radius:50%; background:#ece5dc; display:grid; place-items:center; color:#685f56; font-size:.64rem; font-weight:800; }
    .app-layout { display:grid; grid-template-columns:132px 1fr; min-height:430px; }
    .app-sidebar { padding:18px 12px; border-right:1px solid #e7e0d6; background:#f3efe9; }
    .app-nav { display:grid; gap:5px; }
    .app-nav a { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; color:#766e66; font-size:.67rem; font-weight:700; }
    .app-nav a.active { color:#231f1b; background:#e8e1d8; }
    .app-nav-icon { width:16px; text-align:center; color:#978b7f; }
    .app-account { margin-top:150px; padding:9px; display:flex; gap:8px; align-items:center; border-top:1px solid #e3dbd0; }
    .app-avatar { width:26px; height:26px; border-radius:50%; background:linear-gradient(145deg,#ef4938,#ffd2c8); }
    .app-account strong { display:block; font-size:.62rem; }
    .app-account span { display:block; color:#94897e; font-size:.52rem; }
    .app-content { padding:20px; background:#fbf9f5; }
    .app-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:15px; }
    .app-heading h3 { margin:0; font-size:1rem; }
    .app-new { border:0; border-radius:7px; padding:8px 11px; color:white; background:var(--red); font-size:.6rem; font-weight:800; }
    .app-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
    .app-stat { padding:11px; border:1px solid #ebe4db; border-radius:10px; background:#fff; }
    .app-stat span { display:block; color:#978c80; font-size:.53rem; }
    .app-stat strong { display:block; margin:4px 0 2px; font-size:.95rem; }
    .app-stat small { color:#27845c; font-size:.48rem; font-weight:800; }
    .activity { margin-top:13px; padding:13px; border:1px solid #ebe4db; border-radius:12px; background:#fff; }
    .activity-title { margin-bottom:10px; font-size:.67rem; font-weight:800; }
    .activity-head, .activity-row { display:grid; grid-template-columns:1.45fr .75fr .9fr .55fr; gap:8px; align-items:center; }
    .activity-head { padding:0 7px 7px; color:#9b9186; font-size:.46rem; border-bottom:1px solid #eee8e0; }
    .activity-row { padding:9px 7px; border-bottom:1px solid #f0ebe4; font-size:.54rem; }
    .activity-row:last-child { border-bottom:0; }
    .status { font-weight:800; }
    .status.waiting { color:#d66a35; }
    .status.replied { color:#27845c; }
    .status.opened { color:#7b68a7; }
    .app-float { position:absolute; right:-24px; bottom:28px; width:165px; padding:14px; border:1px solid #dfd6ca; border-radius:14px; background:#fffdf9; color:#2b2621; box-shadow:0 20px 45px rgba(0,0,0,.24); }
    .app-float small { display:block; color:#978b80; font-size:.48rem; }
    .app-float strong { display:block; margin:4px 0 7px; font-size:.73rem; }
    .app-float p { margin:0; color:#6f665d; font-size:.55rem; line-height:1.45; }

    .hero-app-image-wrap { position: relative; }
    .hero-app-image {
      display:block;
      width:100%;
      height:auto;
      border-radius: 24px;
      box-shadow: 0 28px 75px rgba(0,0,0,.38);
    }



    .strengths {
      padding: 88px 0 96px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: #f3eee5;
      color: #191614;
    }
    .strengths-head {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      align-items: end;
      gap: 52px;
      margin-bottom: 38px;
    }
    .strengths .section-label { color: #d43b2f; }
    .strengths-head h2 {
      margin: 0;
      max-width: 760px;
      color: #191614;
      font-size: clamp(2.45rem, 4.8vw, 4.9rem);
      line-height: .96;
      letter-spacing: -.06em;
    }
    .strengths-head p {
      max-width: 540px;
      margin: 0 0 6px auto;
      color: #655d55;
      font-size: 1rem;
    }
    .strengths-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }
    .strength-card {
      position: relative;
      min-height: 250px;
      padding: 26px 28px 24px;
      overflow: hidden;
      border: 1px solid #26211e;
      border-radius: 24px;
      background: #fbf8f2;
      box-shadow: 0 5px 0 #26211e;
      color: #191614;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .strength-card:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #26211e; }
    .strength-card:nth-child(2),
    .strength-card:nth-child(3) {
      background: #231f1d;
      color: #f8f0dc;
    }
    .strength-card.featured {
      background: var(--red);
      color: white;
    }
    .strength-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 42px;
    }
    .strength-title {
      display: inline;
      padding: .08em .22em .12em;
      border-radius: 5px;
      background: #fff;
      color: #191614;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
      font: 800 1.35rem/1.08 "Manrope", sans-serif;
      letter-spacing: -.035em;
    }
    .strength-card.featured .strength-title { background: #191614; color: white; }
    .strength-card:nth-child(2) .strength-title,
    .strength-card:nth-child(3) .strength-title { background: #f8f0dc; color: #191614; }
    .strength-visual {
      width: 150px;
      height: 90px;
      flex: 0 0 150px;
      position: relative;
      opacity: .95;
    }
    .strength-visual::before,
    .strength-visual::after { content:""; position:absolute; border:1.5px solid currentColor; }
    .visual-follow::before { width:72px; height:46px; right:16px; top:14px; border-radius:10px; transform:rotate(6deg); }
    .visual-follow::after { width:52px; height:30px; right:54px; top:40px; border-radius:8px; transform:rotate(-8deg); box-shadow: 26px -22px 0 -10px currentColor; }
    .visual-choice::before { width:88px; height:52px; right:8px; top:17px; border-radius:9px; }
    .visual-choice::after { width:12px; height:12px; border-radius:50%; right:68px; top:38px; box-shadow: 24px 0 0 -1px currentColor,48px 0 0 -1px currentColor; background:transparent; }
    .visual-track::before { width:88px; height:54px; right:10px; top:18px; border-radius:10px; transform:rotate(-4deg); }
    .visual-track::after { width:38px; height:38px; right:73px; top:7px; border-radius:50%; box-shadow: 18px 33px 0 -10px currentColor, 42px 12px 0 -12px currentColor; }
    .visual-library::before { width:84px; height:16px; right:14px; top:16px; border-radius:4px; box-shadow: -18px 23px 0 -1px transparent, -18px 23px 0 0 currentColor, 8px 46px 0 -1px transparent, 8px 46px 0 0 currentColor; }
    .visual-library::after { width:14px; height:14px; border-radius:50%; right:98px; top:53px; }
    .strength-card h3 { margin: 0; }
    .strength-card > p {
      position: relative;
      z-index: 1;
      margin: 0 0 22px;
      max-width: 520px;
      color: #655d55;
      font-size: .92rem;
    }
    .strength-card.featured > p,
    .strength-card:nth-child(2) > p,
    .strength-card:nth-child(3) > p { color: rgba(255,255,255,.78); }
    .strength-list {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: inherit;
      font-size: .8rem;
      font-weight: 700;
    }
    .strength-list li { display:flex; align-items:flex-start; gap:8px; }
    .strength-list li::before { content:"↗"; flex:0 0 auto; font-weight:900; }


    .complaints { padding: 68px 0 0; }
    .complaints-head { max-width: 760px; margin-bottom: 24px; }
    .complaints-head h2 { font-size: clamp(2.4rem,4.5vw,4.3rem); }
    .complaints-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
    .complaint-card {
      position:relative;
      min-height:245px;
      padding:30px 26px 24px;
      border-radius:24px;
      border:1px solid rgba(246,239,216,.14);
      background:
        radial-gradient(circle at 88% 10%, rgba(255,73,56,.10), transparent 32%),
        linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
      overflow:hidden;
      box-shadow:0 18px 45px rgba(0,0,0,.16);
    }
    .complaint-card::after {
      content:"“";
      position:absolute;
      right:18px;
      bottom:-38px;
      color:rgba(255,73,56,.10);
      font-family:"Libre Caslon Display", Georgia, serif;
      font-size:11rem;
      line-height:1;
      pointer-events:none;
    }
    .complaint-card:nth-child(2) {
      background:
        radial-gradient(circle at 88% 10%, rgba(255,73,56,.18), transparent 34%),
        linear-gradient(160deg, #2a211d, #1b1715);
      border-color:rgba(255,73,56,.35);
      transform:translateY(-8px);
    }
    .quote-mark {
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      margin-bottom:28px;
      border-radius:50%;
      background:var(--red);
      color:#fff;
      font-family:Georgia,serif;
      font-size:2rem;
      font-weight:800;
      line-height:1;
      box-shadow:0 12px 28px rgba(255,73,56,.24);
    }
    .complaint-card blockquote {
      position:relative;
      z-index:1;
      margin:0;
      max-width:28ch;
      font:400 clamp(1.12rem,1.5vw,1.38rem)/1.38 "Libre Caslon Display",Georgia,serif;
      letter-spacing:-.02em;
      color:var(--cream);
    }
    .quote-source {
      position:relative;
      z-index:1;
      display:flex;
      align-items:center;
      gap:10px;
      margin-top:26px;
      padding-top:18px;
      border-top:1px solid rgba(246,239,216,.11);
    }
    .source-avatar {
      width:34px;
      height:34px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:var(--red-soft);
      color:#ff9d8e;
      font:800 .72rem/1 "IBM Plex Mono",monospace;
    }
    .quote-source strong { display:block; color:var(--cream); font-size:.8rem; }
    .quote-source > div > span { display:block; margin-top:2px; color:var(--muted); font-size:.69rem; }
    .source-avatar { flex:0 0 36px; width:36px; height:36px; border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px rgba(255,255,255,.08); }

    section.content { padding: 105px 0; }
    .section-head { max-width: 760px; margin-bottom: 45px; }
    .kicker { margin-bottom: 13px; color: var(--red-deep); font: 600 .7rem/1 "IBM Plex Mono", monospace; letter-spacing: .11em; text-transform: uppercase; }
    .section-head h2,
    .faq > div > h2 {
      margin-bottom: 18px;
      font-size: clamp(2.7rem, 5.2vw, 5rem);
      line-height: .99;
      letter-spacing: -.04em;
      text-wrap: balance;
    }
    .section-head p { max-width: 650px; color: #d7cdb6; font-size: 1.05rem; }

    .problem-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; }
    .loss-card, .solution-card { border-radius: var(--radius-xl); overflow: hidden; }
    .loss-card {
      position: relative;
      padding: 34px;
      border: 1px solid rgba(239,73,56,.42);
      background:
        linear-gradient(145deg, rgba(116,35,29,.34), rgba(48,24,22,.92)),
        var(--paper-2);
      box-shadow: inset 0 3px 0 rgba(239,73,56,.75);
    }
    .loss-card::after {
      content: "";
      position: absolute;
      width: 190px;
      height: 190px;
      right: -75px;
      bottom: -90px;
      border-radius: 50%;
      background: rgba(239,73,56,.09);
      border: 1px solid rgba(239,73,56,.16);
    }
    .loss-card .kicker { color: #ff8c81; }
    .loss-card .big {
      max-width: 430px;
      margin: 34px 0 14px;
      color: #fff1e8;
      font: 800 clamp(2rem, 4vw, 3.25rem)/1.03 "Manrope", sans-serif;
      letter-spacing: -.045em;
    }
    .loss-card p { position: relative; z-index: 1; color: #c9aaa3; }
    .loss-list { position: relative; z-index: 1; display: grid; gap: 12px; margin-top: 28px; }
    .loss-list div { display: flex; gap: 10px; color: #ead1ca; font-size: .9rem; }
    .loss-list div::before { content: "×"; color: #ff6f61; font-weight: 800; }
    .solution-card {
      padding: 12px;
      border: 1px solid rgba(78,183,128,.42);
      background: #0d1712;
      color: var(--ink);
      box-shadow: inset 0 3px 0 rgba(78,183,128,.72), 0 20px 50px rgba(0,0,0,.18);
    }
    .solution-inner { height: 100%; padding: 30px; border: 1px solid rgba(126,211,166,.13); border-radius: 22px; background: linear-gradient(145deg, #1b241e, #111713); }
    .solution-card .kicker { color: #7ed3a6; }
    .solution-top { display: flex; justify-content: space-between; gap: 20px; }
    .solution-top p { max-width: 500px; color: #b6aa9d; }
    .workflow { display: grid; gap: 11px; margin-top: 28px; }
    .workflow-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
    .workflow-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: rgba(239,73,56,.14); color: #ff7c6f; font-weight: 800; }
    .workflow-row strong { display: block; font-size: .9rem; }
    .workflow-row span { color: #8f8278; font-size: .72rem; }
    .workflow-state { color: #7ed3a6 !important; font: 600 .59rem/1 "IBM Plex Mono", monospace; }

    .steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
    .step-card { min-height: 305px; padding: 28px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--paper-2); position: relative; overflow: hidden; }
    .step-card::after { content: attr(data-step); position: absolute; right: 14px; top: -32px; color: rgba(246,239,216,.05); font: 800 9rem/1 "Manrope", sans-serif; }
    .step-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; background: var(--red-soft); color: var(--red-deep); font-weight: 800; }
    .step-card h3 { margin: 90px 0 10px; font: 800 1.25rem/1.2 "Manrope", sans-serif; letter-spacing: -.03em; }
    .step-card p { color: var(--muted); font-size: .92rem; }

    .control-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; padding: 44px; border-radius: var(--radius-xl); background: #f3ede3; color: #211d1a; border: 1px solid #d8cbbb; box-shadow: 0 26px 70px rgba(0,0,0,.18); }
    .control-panel h2 { font-size: clamp(2.5rem,4.5vw,4.3rem); color:#1d1916; }
    .control-panel .kicker { color:#b9362a; }
    .control-panel .token { color:#8f271f; background:#f7d9d3; border-color:#e8b9b0; }
    .control-copy p { color: #5f554c; }
    .control-list { display: grid; gap: 12px; margin-top: 26px; }
    .control-list div { display: flex; gap: 12px; color: #342e29; font-weight: 650; }
    .control-list div::before { content: "✓"; color: #cf3f31; font-weight: 900; }
    .rule-builder { padding: 24px; border-radius: 20px; background: #fffdfa; border: 1px solid #d9cec1; box-shadow: 0 18px 38px rgba(65,48,35,.10); color: #211d1a; }
    .rule-builder h3 { margin-bottom: 18px; font-size: 1rem; color: #211d1a; }
    .rule-line { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: #5a5048; font-size: .85rem; }
    .token { padding: 9px 11px; border-radius: 9px; color: #f7efdc; background: #1b1715; border: 1px solid rgba(255,255,255,.1); }
    .email-box { margin-top: 20px; padding: 18px; border-radius: 14px; background: #f7f1e8; border: 1px solid #ddd1c3; }
    .email-box small { color: #75685d; font-weight: 800; letter-spacing: .08em; }
    .email-box p { margin: 12px 0 0; color: #3d3630; font-size: .82rem; }

    .pricing-wrap { display: grid; grid-template-columns: 1.08fr .92fr; gap: 18px; }
    .price-card, .validation-card { border-radius: var(--radius-xl); }
    .price-card { padding: 42px; background: var(--red); color: white; box-shadow: 0 24px 65px rgba(239,73,56,.25); }
    .price-card .kicker { color: #ffd3ce; }
    .price-card h2 { max-width: 650px; font-size: clamp(2.15rem,3.5vw,3.45rem); }
    .price-line { display: flex; align-items: end; gap: 12px; margin: 28px 0 8px; }
    .price { font: 800 4.15rem/.82 "Manrope", sans-serif; letter-spacing: -.065em; }
    .price-detail { padding-bottom: 5px; color: #ffd9d5; font-size: .78rem; font-weight: 700; }
    .benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 20px; margin: 28px 0; padding: 0; list-style: none; }
    .benefits li { font-size: .88rem; }
    .benefits li::before { content: "✓"; margin-right: 8px; }
    .price-card .button-dark { width: 100%; }
    .savings-box {
      margin: 24px 0 18px;
      padding: 20px;
      border: 1px solid rgba(255,255,255,.24);
      border-radius: 18px;
      background: rgba(89,16,10,.22);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    }
    .savings-box > strong {
      display: block;
      color: #fff7ee;
      font-size: 1.08rem;
      line-height: 1.25;
    }
    .savings-subcopy {
      margin: 6px 0 15px;
      color: #ffe2dc;
      font-size: .82rem;
    }
    .savings-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .saving-option {
      padding: 14px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 13px;
      background: rgba(255,255,255,.10);
    }
    .saving-option small {
      display: block;
      color: #ffd0c9;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .saving-option strong {
      display: block;
      margin: 5px 0 2px;
      color: white;
      font-size: 1rem;
    }
    .saving-option span {
      display: block;
      color: #ffe7df;
      font-size: .78rem;
      line-height: 1.4;
    }
    .saving-total {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,.16);
      color: #fff;
      font-size: .85rem;
      font-weight: 800;
      text-align: center;
    }
    .terms-note { margin-top: 12px; color: #ffe0dc; font-size: .75rem; text-align: center; }
    .validation-card { padding: 40px; background: rgba(255,250,240,.6); border: 1px solid var(--line); }
    .validation-card h3 { margin-bottom: 13px; font: 800 2rem/1.05 "Manrope", sans-serif; letter-spacing: -.05em; }
    .validation-card > p { color: var(--muted); }
    .questions { display: grid; gap: 10px; margin: 25px 0; }
    .question { padding: 14px; border-radius: 12px; background: rgba(255,255,255,.42); border: 1px solid var(--line); }
    .question strong { display: block; font-size: .86rem; }
    .question span { color: var(--muted); font-size: .76rem; }
    .validation-card .button { width: 100%; }

    .section-band { position:relative; }
    .section-band::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)); border-top:1px solid rgba(246,239,216,.08); border-bottom:1px solid rgba(246,239,216,.06); }
    .section-label { display:flex; align-items:center; gap:14px; margin-bottom:20px; color:var(--red); font:600 .69rem/1 "IBM Plex Mono",monospace; letter-spacing:.11em; text-transform:uppercase; }
    .section-label::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(239,73,56,.45),transparent); }
    .validation-card { background:linear-gradient(145deg,#29231f,#201b18); border-color:rgba(246,239,216,.15); box-shadow:inset 0 1px rgba(255,255,255,.03); }
    .validation-card .kicker { color:#ff9a8f; }
    .validation-card h3 { color:var(--ink); }
    .validation-card > p { color:#c2b6a7; }
    .question { background:rgba(255,255,255,.035); border-color:rgba(246,239,216,.11); }
    .question strong { color:var(--ink); }
    .question span { color:#9f9387; }
    .validation-card .button-secondary { color:var(--ink); border-color:rgba(246,239,216,.26); }

    .faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: 50px; }
    .faq-list { border-top: 1px solid var(--line); }
    details { border-bottom: 1px solid var(--line); }
    summary {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 20px 42px 20px 4px;
      cursor: pointer;
      font-weight: 800;
      list-style: none;
    }
    summary::-webkit-details-marker { display: none; }
    summary::before,
    summary::after {
      content: "";
      position: absolute;
      right: 4px;
      top: 50%;
      width: 16px;
      height: 2px;
      border-radius: 999px;
      background: var(--red);
      transform: translateY(-50%);
      transition: transform .18s ease;
    }
    summary::after { transform: translateY(-50%) rotate(90deg); }
    details[open] summary::after { transform: translateY(-50%) rotate(0deg); }
    details p { padding: 0 35px 20px 4px; color: var(--muted); font-size: .9rem; }

    .contact-strip { padding: 0 0 72px; }
    .contact-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:28px 32px; border:1px solid var(--line); border-radius:22px; background:rgba(246,239,216,.045); text-align:center; }
    .contact-card h2 { margin:0 0 8px; font-size:clamp(1.35rem, 2vw, 1.8rem); }
    .contact-card p { margin:0; max-width:680px; color:var(--muted); line-height:1.65; }
    .contact-card .button { flex:0 0 auto; align-self:center; }
    footer { padding: 34px 0 45px; border-top: 1px solid var(--line); }
    .footer-inner { display: flex; justify-content: space-between; gap: 24px; color: var(--muted); font-size: .8rem; }

    .footer-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
    .footer-link { appearance:none; border:0; padding:0; background:none; color:var(--muted); font:inherit; cursor:pointer; text-decoration:none; }
    .footer-link:hover, .footer-link:focus-visible { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
    .footer-separator { color:rgba(246,239,216,.28); }
    .policy-modal { width:min(720px, calc(100% - 24px)); }
    .policy-content {
      display:grid;
      gap:22px;
      max-width: 800px;
      color:#d7cdb6;
      font-size:1rem;
      line-height:1.72;
    }
    .policy-content section {
      display:grid;
      gap:8px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
    }
    .policy-content section:first-child {
      padding-top: 0;
      border-top: 0;
    }
    .policy-content h2,
    .policy-content h4 {
      margin:0;
      color:var(--ink);
      font: 800 clamp(1.25rem, 2vw, 1.65rem)/1.18 "Manrope", sans-serif;
      letter-spacing: -.015em;
      text-wrap: balance;
    }
    .policy-content p { margin:0; }
    .policy-content ul { margin:0; padding-left:20px; }
    .policy-content li + li { margin-top:5px; }
    .policy-page .section-head {
      max-width: 820px;
      margin-bottom: 42px;
    }
    .policy-page .section-head h1 {
      max-width: 820px;
      margin-bottom: 18px;
      font-size: clamp(2.85rem, 6vw, 5.4rem);
      line-height: .98;
      letter-spacing: -.045em;
      text-wrap: balance;
    }
    .policy-page .section-head p {
      max-width: 720px;
      color: #d7cdb6;
      font-size: 1.08rem;
      line-height: 1.65;
    }

    body.dialog-open { overflow: hidden; }
    .dialog-backdrop {
      position: fixed;
      inset: 0;
      z-index: 60;
      background: rgba(20,16,14,.65);
      backdrop-filter: blur(5px);
    }
    dialog {
      position: fixed;
      inset: 50% auto auto 50%;
      z-index: 70;
      width: min(650px, calc(100% - 24px));
      max-height: calc(100vh - 24px);
      margin: 0;
      overflow: auto;
      border: 0;
      padding: 0;
      border-radius: 24px;
      color: var(--ink);
      background: var(--panel);
      box-shadow: 0 30px 100px rgba(0,0,0,.35);
      transform: translate(-50%, -50%);
    }
    dialog::backdrop { display: none; }
    .modal { padding: 30px; }
    .modal-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
    .modal h3 { margin: 0 0 7px; font: 800 2rem/1.05 "Manrope", sans-serif; letter-spacing: -.05em; }
    .modal-head p { margin: 0; color: var(--muted); }
    .close { width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid rgba(246,239,216,.18); border-radius: 10px; background: #2b2521; color: #fff8eb; cursor: pointer; font-size: 1.2rem; line-height: 1; font-weight: 700; }
    .close:hover { background: #3a302a; }
    .founder-return { margin: 24px 0 22px; padding: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(91,24,18,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
    .founder-return > strong { display:block; margin-bottom: 14px; color:#fff4df; font-size:.96rem; font-weight:800; letter-spacing:-.01em; }
    .founder-return-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
    .founder-return-item { position:relative; padding-left:20px; color:#eadfcb; font-size:.80rem; line-height:1.55; font-weight:400; }
    .founder-return-item::before { content:"✓"; position:absolute; left:0; top:0; color:var(--paper); font-weight:900; }
    .modal-benefits { margin: 2px 0 20px; }
    .modal-benefits h4 { margin:0 0 12px; font-size:.92rem; }
    .modal-benefits ul { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
    .modal-benefits li { position:relative; padding-left:24px; color:#8b8076; font-size:.82rem; line-height:1.5; font-weight:400; }
    .modal-benefits li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--red); font-weight:900; }
    .modal-benefits li strong { color:#6d6258; font-weight:700; }

    .form-grid { display: grid; gap: 14px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    label { display: grid; gap: 7px; font-size: .84rem; font-weight: 700; }
    input, select, textarea { width: 100%; padding: 12px 13px; border: 1px solid #d7ccb8; border-radius: 10px; color: #211d1a; background: #fffdf8; outline: none; }
    input::placeholder, textarea::placeholder, select:required:invalid { color: #757575; opacity: 1; }
    select option { color: #211d1a; }
    input:focus, select:focus, textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,73,56,.12); }
    textarea { min-height: 95px; resize: vertical; }
    .form-note { color: var(--muted); font-size: .75rem; }

    .toast-dialog {
      position: fixed;
      inset: auto 24px 24px auto;
      z-index: 100;
      display: none;
      width: min(440px, calc(100% - 48px));
      max-width: none;
      pointer-events: none;
    }
    .toast-dialog.is-visible { display: block; }
    .toast-root {
      width: 100%;
      pointer-events: none;
    }
    .toast {
      padding: 14px 16px;
      border: 1px solid transparent;
      border-radius: 12px;
      box-shadow: 0 18px 45px rgba(0,0,0,.24);
      color: #151312;
      font-size: .9rem;
      font-weight: 800;
      line-height: 1.45;
    }
    .toast-success {
      border-color: rgba(36,106,75,.18);
      background: var(--green-soft);
      color: var(--green);
    }
    .toast-error {
      border-color: rgba(239,73,56,.22);
      background: var(--red-soft);
      color: var(--red-deep);
    }


    /* Complaints moved directly after hero and visually separated with a warm light band. */
    .complaints {
      padding: 88px 0 92px;
      background:
        radial-gradient(circle at 12% 10%, rgba(239,73,56,.10), transparent 27%),
        linear-gradient(180deg, #f5eee3 0%, #eadfce 100%);
      color: #211d1a;
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid #d9cbb8;
    }
    .complaints .section-label { color: #b9362a; }
    .complaints-head { margin-bottom: 34px; }
    .complaints-head h2 { color: #211d1a; max-width: 900px; }
    .complaint-card {
      border-color: #d9cbbb;
      background: rgba(255,253,249,.84);
      box-shadow: 0 18px 42px rgba(73,50,34,.11);
    }
    .complaint-card::after { color: rgba(207,63,49,.08); }
    .complaint-card blockquote { color: #2c2621; }
    .complaint-card .quote-source { border-top-color: #e1d5c5; }
    .complaint-card .quote-source strong { color: #332b25; }
    .complaint-card .quote-source > div > span { color: #75695e; }
    .complaint-card .source-avatar {
      background: #f4d5cf;
      border-color: #e4b7ae;
      color: #a83228;
      box-shadow: none;
    }
    .complaint-card:nth-child(2) {
      background: linear-gradient(150deg, #4a211c, #291815);
      border-color: #8f3b32;
      box-shadow: 0 22px 50px rgba(74,33,28,.23);
    }
    .complaint-card:nth-child(2) blockquote,
    .complaint-card:nth-child(2) .quote-source strong { color: #fff4e9; }
    .complaint-card:nth-child(2) .quote-source { border-top-color: rgba(255,255,255,.13); }
    .complaint-card:nth-child(2) .quote-source > div > span { color: #cdb6a9; }
    .complaint-card:nth-child(2) .source-avatar {
      background: rgba(255,105,88,.18);
      border-color: rgba(255,140,126,.3);
      color: #ffb4aa;
    }
    @media (max-width: 960px) {
      .header-inner { grid-template-columns: auto 1fr; }
      .nav { display: none; }
      .brand { justify-self: start; }
      .hero-grid, .problem-grid, .control-panel, .pricing-wrap, .faq { grid-template-columns: 1fr; }
      .strengths-head { grid-template-columns: 1fr; gap: 18px; }
      .strengths-head p { margin-left: 0; }
      .strengths-grid { grid-template-columns: 1fr; }
      .complaints-grid { grid-template-columns: 1fr; }
      .complaint-card:nth-child(2) { transform:none; }
      .hero-grid { gap: 44px; }
      .product-shell { max-width: 720px; }
      .steps-grid { grid-template-columns: 1fr; }
      .step-card { min-height: 230px; }
      .step-card h3 { margin-top: 55px; }
    }
    @media (max-width: 680px) {
      .wrap { width: min(var(--max), calc(100% - 24px)); }
      .site-header { position: relative; }
      .toast-dialog {
        inset: auto 12px 12px 12px;
        width: auto;
      }
      .header-inner { min-height: 68px; }
      .header-actions .button-secondary { display: none; }
      .header-actions .button { min-height: 42px; padding: 0 14px; }
      .hero { padding-top: 48px; }
      .strengths { padding: 62px 0 68px; }
      .strength-card { min-height: auto; padding: 23px; }
      .strength-list { grid-template-columns: 1fr; }
      h1 { font-size: 3.75rem; }
      .hero-actions { flex-direction: column; }
      .hero-actions .button { width: 100%; }
      .app-body { grid-template-columns: 1fr; min-height: 430px; }
      .app-side { display: none; }
      .app-main { padding: 17px; }
      .product-shell { transform: none; }
      .app-preview { transform:none; }
      .app-layout { grid-template-columns:1fr; min-height:auto; }
      .app-sidebar { display:none; }
      .app-stats { grid-template-columns:1fr 1fr; }
      .app-float { display:none; }
      .activity-head, .activity-row { grid-template-columns:1.2fr .7fr .8fr; }
      .activity-head span:last-child, .activity-row span:last-child { display:none; }
      section.content { padding: 78px 0; }
      .loss-card, .control-panel, .price-card, .validation-card { padding: 28px; }
      .workflow-row { grid-template-columns: 38px 1fr; }
      .workflow-state { grid-column: 2; }
      .benefits { grid-template-columns: 1fr; }
      .price { font-size: 4.2rem; }
      .form-row { grid-template-columns: 1fr; }
      .contact-card { align-items:center; flex-direction:column; padding:24px; }
      .contact-card .button { width:100%; }
      .footer-inner { flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }