:root{
  --orange:#FF6C08;
  --orange-2:#ff4a07;
  --orange-soft:#fff3eb;
  --ink:#11181f;
  --muted:#66717d;
  --line:#e8ecef;
  --soft:#f4f6f8;
  --white:#ffffff;
  --green:#087a56;
  --green-2:#006d4e;
  --green-soft:#edf8f3;
  --green-text:#0b6e50;
  --red-soft:#fdebea;
  --red:#c92b25;
  --yellow-soft:#fff4d7;
  --shadow:0 18px 40px rgba(15,23,42,.08);
  --radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Ubuntu",Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#f7f8fa 0%,#eef2f5 100%);
}
img{display:block;max-width:100%}
button,input{font:inherit}
button{cursor:pointer}

.app-wrap{max-width:1440px;margin:0 auto;padding:28px 20px 48px}



.screen-1-layout>*,.sim-grid>*,.results-grid>*,.tables>*,.panel,.cost-card,.calc-table,.hero-row>div:not(.hero-ico){min-width:0}
.hero-row>div:not(.hero-ico){flex:1 1 auto}
.screen{
  display:block;background:#fff;border:1px solid #ebeff2;border-radius:32px;
  box-shadow:var(--shadow);padding:28px;min-height:760px;
}

.header-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:12px}
.header-row .logo{justify-self:center}
.head-left,.head-right{min-width:46px}
.head-right{justify-self:end}

.header-row .logo{height:52px;width:auto}
.back-btn{
  text-decoration:none;cursor:pointer;
  border:1px solid var(--line);background:#fff;border-radius:14px;width:46px;height:46px;
  font-size:30px;line-height:1;color:#202a33;display:inline-flex;align-items:center;justify-content:center;
}
.head-left{display:flex;align-items:center;gap:12px}

h1,h2,h3,p{margin:0}
.title-xl{font-size:clamp(38px,4.8vw,72px);line-height:1.02;letter-spacing:-2px;font-weight:800;max-width:820px}
.title-lg{font-size:clamp(34px,4vw,58px);line-height:1.04;letter-spacing:-1.6px;font-weight:800}
.subtitle{font-size:clamp(18px,1.6vw,28px);line-height:1.45;color:var(--muted);max-width:760px;margin-top:14px}

/* Tela 1 */
.screen-1-layout{display:grid;grid-template-columns:1.15fr .95fr;gap:24px;align-items:start;margin-top:26px}
.platform-list{display:grid;gap:16px}
.platform-card{
  border:1px solid var(--line);border-radius:28px;background:#fff;padding:20px;
  display:grid;grid-template-columns:112px 1fr 32px;gap:18px;align-items:center;box-shadow:0 10px 22px rgba(15,23,42,.06);
  transition:.2s ease;border:2px solid transparent;
}
.platform-card:hover{transform:translateY(-2px)}
.platform-card.selected{border-color:var(--orange)}
.platform-card img{width:96px;height:96px;border-radius:24px;object-fit:cover}
.platform-kicker{font-size:20px;color:#39434c}
.platform-name{font-size:clamp(34px,3vw,52px);font-weight:800;line-height:1.05;margin-top:2px}
.chip-commission{display:inline-block;margin-top:12px;padding:10px 14px;border-radius:12px;background:var(--red-soft);color:var(--red);font-weight:700;font-size:20px}
.platform-card[data-platform="99food"] .chip-commission{background:var(--yellow-soft);color:#ce5600}
.arrow{font-size:54px;color:var(--orange);font-weight:300}

.value-card{
  border-radius:28px;background:linear-gradient(135deg,#0b8a63 0%, #006b4c 100%);padding:24px;
  color:#fff;box-shadow:0 16px 34px rgba(0,111,79,.22);position:relative;overflow:hidden;min-height:100%;
}
.value-card:after{
  content:"↗";position:absolute;right:16px;top:-4px;font-size:170px;color:rgba(255,255,255,.08);font-weight:800;
}
.value-top{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800;position:relative;z-index:1}
.round-icon{
  width:42px;height:42px;border-radius:50%;border:2px solid #6af7cc;display:grid;place-items:center;font-size:24px
}
.value-big{font-size:clamp(52px,5vw,88px);line-height:1;letter-spacing:-2px;font-weight:850;margin:18px 0 18px;position:relative;z-index:1}
.value-big small{font-size:clamp(34px,2vw,48px);font-weight:700}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-top:1px solid rgba(255,255,255,.25);padding-top:14px;position:relative;z-index:1}
.benefit{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px 12px;text-align:center;font-size:18px;font-weight:700;min-height:96px;display:flex;align-items:center;justify-content:center}

.cta-main{
  border:0;background:linear-gradient(90deg,var(--orange),var(--orange-2));color:#fff;
  border-radius:18px;min-height:64px;padding:12px 24px;font-size:25px;font-weight:800;line-height:1.15;box-shadow:0 16px 26px rgba(255,108,8,.18);display:inline-flex;align-items:center;justify-content:center;text-align:center
}
.secure{
  display:flex;align-items:center;gap:10px;justify-content:center;color:#5f6a74;font-size:17px;margin-top:12px
}
.secure i{width:22px;height:24px;display:grid;place-items:center;background:#0c8d65;color:#fff;clip-path:polygon(50% 0,100% 18%,90% 78%,50% 100%,10% 78%,0 18%);font-style:normal;font-size:12px}

/* Tela 2 */
.page-title{font-size:clamp(34px,3.4vw,56px);font-weight:800;letter-spacing:-1px;margin-top:6px}
.tabs{display:grid;grid-template-columns:1fr 1fr;max-width:720px;border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:22px;box-shadow:0 8px 16px rgba(15,23,42,.05)}
.tab{height:64px;border:0;background:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;gap:12px;color:#25303a}
.tab.active{background:linear-gradient(90deg,var(--orange),var(--orange-2));color:#fff}
.tab img{width:38px;height:38px;border-radius:10px}
.helper{display:flex;align-items:center;gap:8px;color:#68737e;font-size:18px;margin:14px 0 18px}
.helper .info{width:22px;height:22px;border-radius:50%;border:1.6px solid #7b8791;display:grid;place-items:center;font-size:14px;font-weight:800}

.sim-grid{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:18px;align-items:start}
.panel{
  border:1px solid #ecf0f2;border-radius:24px;background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.05);padding:20px
}
.panel-title{display:flex;align-items:center;gap:10px;font-size:31px;font-weight:800;margin-bottom:10px;letter-spacing:-.5px}
.orange-icon{width:28px;height:28px;border:2px solid var(--orange);border-radius:8px;display:grid;place-items:center;color:var(--orange);font-size:14px;font-weight:800}
.field-row{display:grid;grid-template-columns:1fr 190px;gap:18px;align-items:center;min-height:66px;border-top:1px solid #edf1f4}
.field-row:first-of-type{border-top:0}
.field-row label{font-size:26px}
.control{height:52px;border:1px solid #d9dee3;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:24px;overflow:hidden}
.control input{width:100%;height:100%;border:0;outline:0;background:transparent;text-align:right;padding:0 16px;font-weight:700;font-size:24px;color:#111}
.stepper{display:grid;grid-template-columns:56px 1fr 56px}
.stepper button{border:0;background:#fff;color:var(--orange);font-size:36px;height:100%}
.stepper input{text-align:center;padding:0}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chip{height:52px;border-radius:14px;border:1px solid #d9dee3;background:#fff;font-weight:800;font-size:24px;color:#222}
.chip.active{background:linear-gradient(90deg,var(--orange),var(--orange-2));color:#fff;border-color:transparent}
.disclaimer{margin-top:12px;border:1px solid #f0d7bf;background:#fffaf5;border-radius:16px;padding:16px 18px;font-size:18px;color:#4f5962}
.disclaimer strong{color:#1f2830}
.action-wrap{margin-top:16px}

/* Tela 3 */
.hero{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;border-radius:28px;
  background:linear-gradient(135deg,#0b8a63 0%, #006b4c 100%);padding:22px;color:#fff;position:relative;overflow:hidden;margin-top:22px
}
.hero:after{content:"";position:absolute;right:24px;top:24px;width:180px;height:140px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));border-radius:24px}
.hero:before{content:"↗";position:absolute;right:22px;top:0;font-size:150px;color:rgba(255,255,255,.09);font-weight:800}
.hero-row{display:flex;align-items:center;gap:16px;position:relative;z-index:1}
.hero-ico{width:62px;height:62px;min-width:62px;flex:0 0 62px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:#0a7353;font-weight:900;font-size:28px;flex:0 0 auto}
.hero-label{font-size:26px;font-weight:700}
.hero-amount{font-size:clamp(34px,3.8vw,74px);overflow-wrap:anywhere;font-weight:850;line-height:1;letter-spacing:-1.6px;margin-top:8px}

.results-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;margin-top:18px}
.cost-card{border:1px solid #edf0f2;border-radius:24px;background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.05);padding:22px}
.cost-title{display:flex;align-items:center;gap:10px;font-size:31px;font-weight:800;margin-bottom:14px;letter-spacing:-.5px}
.bar-row{display:grid;grid-template-columns:200px 1fr 180px;gap:14px;align-items:center;margin:18px 0;font-size:24px}
.bar-track{height:22px;background:#f2f4f6;border-radius:999px;overflow:hidden}
.bar{height:100%;border-radius:999px}
.bar.competitor{background:linear-gradient(90deg,var(--orange),var(--orange-2))}
.bar.delmatch{background:linear-gradient(90deg,#0b8a63,#0a6f52)}
.bar-value{font-weight:800;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.saving-strip{margin-top:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #d7eadf;background:#f7fcf9;border-radius:16px;padding:14px 16px;font-size:24px}
.saving-strip strong{color:var(--green-text);white-space:nowrap}

.tables{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.calc-table{border:1px solid #edf0f2;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.05)}
.calc-head{background:#fff4ef;padding:18px 20px;font-size:25px;font-weight:800}
.calc-table.del .calc-head{background:#eef8f3}
.tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:14px 18px;border-top:1px solid #eef2f4;font-size:22px;align-items:center}
.tr span:first-child{min-width:0;overflow-wrap:normal;word-break:normal}
.tr span:last-child{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.tr.total{grid-template-columns:1fr;gap:4px;font-size:clamp(19px,1.5vw,26px);font-weight:800}
.tr.total span:first-child{font-size:.8em;color:#3a4550}
.tr.total span:last-child{text-align:left;font-size:1.15em}
.calc-table:not(.del) .tr.total span:last-child{color:#e23025}
.calc-table.del .tr.total span:last-child{color:#0b6e50}

.actions{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;margin-top:20px}
.secondary{
  border:2px solid #ffd7c2;background:#fff;color:var(--orange);border-radius:18px;min-height:62px;padding:10px 16px;font-weight:800;font-size:22px;line-height:1.15;text-align:center;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer
}

/* Responsive */
@media (max-width: 1280px){
  .screen-1-layout,.sim-grid,.results-grid{grid-template-columns:1fr}
  .actions{grid-template-columns:1fr 1fr 1fr}
  .hero{grid-template-columns:1fr}
}
@media (max-width: 980px){
  .screen{padding:22px;border-radius:26px;min-height:auto}
  .platform-card{grid-template-columns:88px 1fr 22px;padding:16px}
  .platform-card img{width:76px;height:76px;border-radius:18px}
  .platform-kicker{font-size:17px}
  .chip-commission{font-size:16px;padding:8px 10px}
  .benefits{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr 170px;min-height:58px}
  .field-row label,.bar-row,.tr,.saving-strip{font-size:18px}
  .tr.total{font-size:21px}
  .tr,.calc-head{padding-left:14px;padding-right:14px}
  .panel-title,.cost-title,.calc-head{font-size:24px}
  .bar-row{grid-template-columns:1fr;gap:8px}
  .tables,.actions{grid-template-columns:1fr}
  .hero-label{font-size:20px}
}
@media (max-width: 720px){
  .app-wrap{padding:18px 14px 36px}
  .title-xl,.title-lg,.page-title{letter-spacing:-1px}
  .subtitle{font-size:17px}
  .tab{font-size:20px;height:56px}
  .tab img{width:30px;height:30px}
  .field-row{grid-template-columns:1fr}
  .screen{padding:18px}
  .platform-card{grid-template-columns:68px 1fr 18px;gap:12px}
  .platform-card img{width:60px;height:60px;border-radius:16px}
  .arrow{font-size:36px}
  .chip-commission{font-size:14px}
  .secure{font-size:15px}
  .cta-main{height:58px;font-size:21px}
  .saving-strip{flex-direction:column;align-items:flex-start}
  .saving-strip strong{white-space:normal}
  .header-row .logo{height:40px}
  .back-btn{width:40px;height:40px;font-size:26px;border-radius:12px}
  .hero{padding:18px}
  .hero:before,.hero:after{display:none}
  .hero-ico{width:50px;height:50px;min-width:50px;flex:0 0 50px;font-size:22px}
  .hero-label{font-size:17px}
  .hero-amount{font-size:clamp(28px,8.5vw,44px)}
  .panel,.cost-card{padding:16px}
  .panel-title,.cost-title,.calc-head{font-size:21px}
  .calc-head{padding:14px}
  .field-row label{font-size:19px}
  .control,.chip{height:48px;font-size:20px}
  .control input{font-size:20px}
  .stepper button{font-size:30px}
  .secondary{font-size:19px;min-height:54px}
  .disclaimer,.helper{font-size:15px}
  .platform-name{font-size:clamp(26px,7vw,34px)}
  .platform-kicker{font-size:15px}
}
@media (max-width: 480px){
  .app-wrap{padding:12px 10px 28px}
  .screen{padding:14px;border-radius:20px}
  .tr{font-size:16px;padding:12px 12px;gap:8px}
  .tr.total{font-size:18px}
  .bar-row,.saving-strip{font-size:16px}
  .tabs{border-radius:14px}
  .tab{font-size:17px;height:50px;gap:8px}
  .tab img{width:26px;height:26px}
  .platform-card{grid-template-columns:52px 1fr 14px;gap:10px;padding:14px;border-radius:20px}
  .platform-card img{width:52px;height:52px;border-radius:14px}
  .chip-commission{font-size:13px;padding:6px 8px;margin-top:8px}
  .cta-main{font-size:18px;min-height:54px;padding:10px 16px}
  .title-xl{font-size:32px;letter-spacing:-.8px}
  .page-title{font-size:28px}
  .subtitle{font-size:16px}
}