/* ============================================================
   app-previews.css — app-faithful module previews
   Adapted from the attached product-overview file.
   All rules scoped under .appui so the file's palette + component
   styles stay isolated from the rest of the landing site.
   ============================================================ */
.appui{ --forest:#1F3B1F;
      --sage:#7C9A7A;
      --sage-2:#2D5A2D;
      --sage-3:#A8C8A8;
      --mint:#EBF3EB;
      --mint-2:#F5FAF6;
      --paper:#FFFFFF;
      --canvas:#FAF7F2;
      --ink:#1A1A1A;
      --ink-2:#2B2B2B;
      --ink-3:#6B625B;
      --ink-4:#9A9188;
      --line:#E8E1D8;
      --line-2:#D8D2C8;
      --line-3:#F0EDE8;
      --amber:#B45309;
      --amber-bg:#FEF3C7;
      --terra:#C2522B;
      --rose:#B91C1C;
      --blue:#1D4ED8;
      --radius:18px;
      --shadow:0 18px 50px -34px rgba(31,59,31,.34);
      --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
      --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
      --serif:Georgia,"Times New Roman",serif;; font-family:var(--sans); color:var(--ink); }
.appui, .appui *{ box-sizing:border-box; }
.appui .screen{ margin:0 auto; }
.appui .page{max-width:1440px;margin:0 auto;padding:42px 34px 80px}.appui .hero{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:28px;align-items:end;margin-bottom:28px}.appui .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-2);font-weight:800}.appui .hero h1{font-size:48px;line-height:1.02;letter-spacing:-.04em;margin:12px 0 12px;max-width:850px}.appui .hero p{font-size:16px;line-height:1.65;color:var(--ink-3);max-width:760px;margin:0}.appui .hero-card{background:var(--forest);color:#fff;border-radius:24px;padding:24px;box-shadow:var(--shadow)}.appui .hero-card strong{font-size:42px;display:block;letter-spacing:-.04em}.appui .hero-card span{display:block;color:#DCEADD;font-size:13px;line-height:1.5;margin-top:5px}.appui .toc{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 34px}.appui .toc a{font-size:12px;font-weight:750;color:var(--ink-2);text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 12px}.appui .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.appui .feature{background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:var(--shadow);min-height:560px;display:flex;flex-direction:column}.appui .feature-head{padding:24px 24px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:18px}.appui .feature h2{font-size:24px;line-height:1.1;letter-spacing:-.025em;margin:6px 0 6px}.appui .feature p{margin:0;color:var(--ink-3);font-size:13.5px;line-height:1.55}.appui .badge{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:4px 10px;font-size:11px;font-weight:800;background:var(--mint);color:var(--sage-2);border:1px solid #CFE3CF;white-space:nowrap}.appui .canvas{flex:1;background:linear-gradient(180deg,#FBF8F3 0%,#F3EFE8 100%);padding:22px;display:flex;align-items:center;justify-content:center}.appui .screen{width:100%;height:100%;min-height:390px;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 20px 55px -38px rgba(31,59,31,.45)}.appui .bar{height:46px;background:var(--mint-2);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.appui .bar-title{font-size:13px;font-weight:850;color:var(--ink)}.appui .bar-sub{font-size:11px;color:var(--ink-4);margin-top:1px}.appui .btn{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:7px 11px;font-size:11.5px;font-weight:800;border:1px solid var(--line-2);background:#fff;color:var(--ink-2)}.appui .btn.primary{background:var(--forest);color:#fff;border-color:var(--forest)}.appui .content{padding:16px}.appui .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:14px}.appui .kpi{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}.appui .kpi span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);font-weight:800}.appui .kpi strong{display:block;font-size:22px;letter-spacing:-.03em;margin-top:5px}.appui .kpi em{display:block;font-style:normal;font-size:11px;color:var(--ink-3);margin-top:2px}.appui .pill{border-radius:99px;padding:3px 8px;font-size:10px;font-weight:800}.appui .green{background:#EBF3EB;color:var(--sage-2)}.appui .amber{background:#FEF3C7;color:#B45309}.appui .blue{background:#DBEAFE;color:#1D4ED8}.appui .terra{background:#FBEDE6;color:#C2522B}.appui .muted{color:var(--ink-4)}.appui .phone{width:236px;height:410px;border:10px solid #1f1f1f;border-radius:32px;background:#fff;overflow:hidden;box-shadow:0 24px 50px -30px rgba(0,0,0,.65)}.appui .phone-top{padding:18px 16px 14px;background:linear-gradient(135deg,#203820,#566E56);color:#fff}.appui .phone-top span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;opacity:.7;font-weight:800}.appui .phone-top h3{margin:6px 0 2px;font-size:22px;letter-spacing:-.03em}.appui .phone-body{padding:13px;background:#FBF8F3;height:100%;overflow:hidden}.appui .menu-row{display:flex;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px;margin-bottom:8px}.appui .dish-photo{width:54px;height:54px;border-radius:12px;background:linear-gradient(135deg,#E8B86D,#7C3F21)}.appui .dish-photo.greenish{background:linear-gradient(135deg,#A8C8A8,#315A31)}.appui .dish-photo.red{background:linear-gradient(135deg,#D87A4A,#5A1F16)}.appui .menu-row strong{font-size:12.5px}.appui .menu-row p{font-size:10.5px;line-height:1.3;margin:3px 0;color:var(--ink-4)}.appui .price{font-family:var(--mono);font-size:11px;font-weight:800}.appui .add{margin-left:auto;align-self:end;width:24px;height:24px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;font-weight:900}.appui .two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.appui .three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.appui .order-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.appui .lane{background:#F8F5EF;border:1px solid var(--line);border-radius:16px;padding:10px;min-height:285px}.appui .lane h4{font-size:12px;margin:0 0 8px}.appui .ticket{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;margin-bottom:8px;box-shadow:0 10px 22px -22px rgba(31,59,31,.4)}.appui .ticket-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.appui .ticket strong{font-size:12.5px}.appui .ticket p{font-size:11px;margin:2px 0;color:var(--ink-3)}.appui .ticket ul{margin:7px 0 0;padding-left:15px;font-size:11px;color:var(--ink-2);line-height:1.5}.appui .menu-admin{display:grid;grid-template-columns:210px 1fr;gap:12px}.appui .cat-list{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px}.appui .cat{padding:10px;border-radius:12px;font-size:12px;font-weight:800;display:flex;justify-content:space-between}.appui .cat.active{background:var(--forest);color:#fff}.appui .items{display:grid;gap:9px}.appui .item-card{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px}.appui .item-card strong{font-size:13px}.appui .item-card p{font-size:11px;margin:3px 0;color:var(--ink-4)}.appui .payment-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}.appui .toggle{width:38px;height:22px;background:var(--sage);border-radius:99px;position:relative;display:inline-block}.appui .toggle:after{content:"";position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff}.appui .pay-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-3);padding:12px 0}.appui .pay-row:last-child{border-bottom:0}.appui .res-timeline{display:grid;grid-template-columns:56px 1fr;gap:12px}.appui .hours{display:grid;gap:17px;font-size:11px;color:var(--ink-4);font-weight:800}.appui .timeline{position:relative;border-left:1px solid var(--line);height:260px}.appui .booking{position:absolute;left:12px;right:10px;background:#fff;border:1px solid #CFE3CF;border-left:4px solid var(--sage-2);border-radius:14px;padding:9px}.appui .booking strong{font-size:12px}.appui .booking p{font-size:11px;margin:3px 0 0;color:var(--ink-3)}.appui .delivery-live{display:grid;grid-template-columns:1fr 1fr;gap:12px}.appui .delivery-row{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:9px}.appui .code{font-family:var(--mono);font-size:10px;color:var(--ink-4);font-weight:900}.appui .eta{float:right;text-align:center}.appui .eta strong{font-size:24px;letter-spacing:-.04em}.appui .eta small{font-size:10px}.appui .stage{display:flex;gap:5px;margin:9px 0}.appui .stage i{height:5px;flex:1;border-radius:99px;background:var(--sage-3)}.appui .map{height:275px;border-radius:18px;background:radial-gradient(circle at 70% 20%,rgba(194,82,43,.22),transparent 20%),radial-gradient(circle at 30% 60%,rgba(45,90,45,.28),transparent 23%),linear-gradient(135deg,#F8F5EF,#EDE8E0);position:relative;border:1px solid var(--line);overflow:hidden}.appui .map:before{content:"";position:absolute;inset:28px;border:1px dashed rgba(45,90,45,.22);border-radius:50%}.appui .pin{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 6px rgba(194,82,43,.14)}.appui .site-preview{height:330px;background:#111;overflow:hidden}.appui .site-hero{height:165px;background:linear-gradient(rgba(31,59,31,.36),rgba(31,59,31,.36)),linear-gradient(135deg,#6D3F24,#1F3B1F);color:#fff;padding:24px}.appui .site-hero h3{font-family:var(--serif);font-size:34px;margin:18px 0 6px;font-weight:400}.appui .site-section{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:#fff;padding:14px}.appui .site-tile{border:1px solid var(--line);border-radius:14px;padding:10px;background:#FBF8F3}.appui .site-tile strong{font-size:12px}.appui .chart{height:180px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:end;gap:12px;padding:0 16px 12px}.appui .bar-col{flex:1;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--sage),var(--sage-2));min-height:30px}.appui .rank{display:grid;gap:8px}.appui .rank-row{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;font-size:12px}.appui .rank-line{height:6px;background:var(--line-3);border-radius:99px;overflow:hidden}.appui .rank-line span{display:block;height:100%;background:var(--sage-2);border-radius:99px}.appui .studio{background:linear-gradient(135deg,#1F3B1F,#14290E);color:#fff;min-height:390px;padding:28px;position:relative;overflow:hidden}.appui .studio h3{font-family:var(--serif);font-size:42px;font-weight:400;line-height:1.05;margin:14px 0 10px}.appui .prompt{margin-top:20px;background:#fff;border-radius:16px;padding:10px;display:flex;gap:8px;box-shadow:0 22px 48px -32px rgba(0,0,0,.65)}.appui .prompt span{flex:1;color:var(--ink-4);font-size:13px;padding:10px}.appui .floating{position:absolute;background:#fff;border:5px solid rgba(255,255,255,.95);box-shadow:0 26px 60px -30px rgba(0,0,0,.8);overflow:hidden}.appui .floating.one{right:160px;top:78px;width:125px;height:125px;transform:rotate(-7deg)}.appui .floating.two{right:46px;top:128px;width:92px;height:150px;transform:rotate(5deg)}.appui .ad-art{height:72%;background:linear-gradient(135deg,#D08B52,#5F2A18)}.appui .ad-copy{height:28%;padding:8px;background:#fff;color:#1A1A1A;font-family:var(--serif);font-size:15px}.appui .crm-table{width:100%;border-collapse:collapse;font-size:12px}.appui .crm-table th{background:var(--mint-2);text-align:left;padding:10px;color:var(--ink-4);font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase}.appui .crm-table td{padding:10px;border-top:1px solid var(--line-3)}.appui .guest{display:flex;gap:8px;align-items:center}.appui .avatar{width:30px;height:30px;border-radius:50%;background:var(--sage-2);color:#fff;display:grid;place-items:center;font-weight:900;font-size:11px}.appui .integration{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px}.appui .logo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:950;color:#fff}.appui .mini-note{margin-top:12px;border-radius:16px;background:linear-gradient(135deg,#F5FAF6,#EBF3EB);border:1px solid #C8E0C8;padding:14px;display:flex;gap:12px}.appui .wide{grid-column:1/-1}.appui .feature.wide{min-height:520px}.appui .overview-strip{display:grid;grid-template-columns:repeat(11,1fr);gap:8px;margin:0 0 26px}.appui .overview-strip span{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 8px;text-align:center;font-size:11px;font-weight:800;color:var(--ink-3)}@media(max-width:1100px){.appui .hero,.appui .grid{grid-template-columns:1fr}.appui .overview-strip{grid-template-columns:repeat(4,1fr)}}@media(max-width:720px){.appui .page{padding:24px 16px 50px}.appui .hero h1{font-size:36px}.appui .feature{min-height:auto}.appui .feature-head{flex-direction:column}.appui .canvas{padding:14px}.appui .two-col,.appui .three-col,.appui .order-board,.appui .menu-admin,.appui .delivery-live{grid-template-columns:1fr}.appui .kpis{grid-template-columns:repeat(2,1fr)}.appui .phone{width:220px}.appui .overview-strip{grid-template-columns:repeat(2,1fr)}}