Update index.html

index.html

@@ -9,23 +9,31 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
 <style>
   :root{
-    --bg:#f7f8fb;
-    --bg2:#eef7f3;
+    --bg:#fafbfc;
     --card:#ffffff;
-    --text:#122033;
-    --muted:#667085;
-    --muted2:#8a94a6;
-    --line:#e7ebf2;
-    --shadow: 0 20px 45px rgba(18,32,51,.08);
-    --shadow-soft: 0 10px 24px rgba(18,32,51,.06);
+    --text:#0f1a2e;
+    --text-soft:#3a4a63;
+    --muted:#6b7689;
+    --muted2:#9aa3b5;
+    --line:#eaedf3;
+    --line-soft:#f2f4f8;
+    --shadow-lg: 0 24px 60px -20px rgba(15,26,46,.18);
+    --shadow-md: 0 10px 30px -10px rgba(15,26,46,.10);
+    --shadow-sm: 0 2px 8px rgba(15,26,46,.04);
     --green:#3fb487;
-    --green-dark:#20936a;
+    --green-dark:#1f8d63;
+    --green-darker:#176b4a;
     --mint:#e8f8f1;
+    --mint-soft:#f3fbf7;
     --amber:#fff4de;
     --amber-text:#a86c0b;
     --blue:#eef3ff;
     --blue-text:#4057c7;
-    --radius: 24px;
+    --rose:#fcedef;
+    --rose-text:#bd4b60;
+    --radius-lg: 22px;
+    --radius-md: 16px;
+    --radius-sm: 12px;
   }
 
   * { box-sizing: border-box; }
@@ -34,420 +42,449 @@
     font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     color: var(--text);
     background:
-      radial-gradient(circle at top left, rgba(63,180,135,.12), transparent 30%),
-      radial-gradient(circle at top right, rgba(64,87,199,.10), transparent 26%),
-      linear-gradient(180deg, #fbfcfe 0%, var(--bg) 100%);
+      radial-gradient(1200px 600px at 10% -10%, rgba(63,180,135,.10), transparent 60%),
+      radial-gradient(900px 500px at 100% 0%, rgba(64,87,199,.07), transparent 55%),
+      var(--bg);
     min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
   }
 
   .shell{
-    max-width: 1220px;
+    max-width: 1180px;
     margin: 0 auto;
-    padding: 24px;
+    padding: 28px 24px 64px;
   }
 
+  /* ---------- Top bar ---------- */
   .topbar{
     display:flex;
     justify-content:space-between;
     align-items:center;
     gap:16px;
-    margin-bottom: 26px;
+    margin-bottom: 36px;
   }
-
   .brand{
     display:flex;
     align-items:center;
     gap:14px;
   }
   .brand-mark{
-    width: 46px;
-    height: 46px;
-    border-radius: 16px;
-    background:
-      linear-gradient(135deg, rgba(63,180,135,.18), rgba(64,87,199,.12)),
-      #fff;
-    border: 1px solid rgba(63,180,135,.18);
+    width: 44px;
+    height: 44px;
+    border-radius: 14px;
+    background: linear-gradient(135deg, #ffffff 0%, #f1f9f5 100%);
+    border: 1px solid rgba(63,180,135,.22);
     display:grid;
     place-items:center;
-    box-shadow: var(--shadow-soft);
-    font-size: 22px;
-  }
-  .brand-name{
-    line-height:1;
+    box-shadow: var(--shadow-sm);
+    font-size: 20px;
   }
   .brand-name h1{
     margin:0;
     font-family: "Playfair Display", serif;
-    font-size: 28px;
+    font-size: 26px;
     letter-spacing: -0.03em;
     font-weight: 700;
+    line-height: 1;
   }
   .brand-name span{
     display:block;
-    margin-top: 4px;
+    margin-top: 5px;
     color: var(--muted);
     font-size: 13px;
   }
-
   .top-pill{
     display:inline-flex;
     align-items:center;
     gap:8px;
-    padding: 11px 14px;
+    padding: 9px 14px;
     border-radius: 999px;
     border: 1px solid var(--line);
-    background: rgba(255,255,255,.85);
+    background: rgba(255,255,255,.7);
     color: var(--muted);
-    font-size: 13px;
-    box-shadow: 0 8px 20px rgba(18,32,51,.04);
+    font-size: 12.5px;
+    font-weight: 500;
+  }
+  .top-pill::before{
+    content:"";
+    width:7px; height:7px;
+    border-radius:50%;
+    background: var(--green);
+    box-shadow: 0 0 0 4px rgba(63,180,135,.15);
   }
 
+  /* ---------- Hero ---------- */
   .hero{
     display:grid;
-    grid-template-columns: 1.15fr .85fr;
-    gap: 22px;
-    align-items: stretch;
-    margin-bottom: 22px;
-  }
-
-  .hero-card, .panel, .section-card{
-    background: rgba(255,255,255,.92);
-    border: 1px solid rgba(231,235,242,.9);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow);
-    backdrop-filter: blur(14px);
-  }
-
-  .hero-card{
-    padding: 34px;
+    grid-template-columns: 1fr;
+    gap: 14px;
+    margin-bottom: 28px;
+    text-align: center;
   }
-
   .eyebrow{
     display:inline-flex;
     align-items:center;
     gap:8px;
-    font-size: 12px;
+    font-size: 11.5px;
     font-weight: 700;
-    letter-spacing: .08em;
+    letter-spacing: .12em;
     text-transform: uppercase;
-    color: var(--green-dark);
+    color: var(--green-darker);
     background: var(--mint);
-    border: 1px solid rgba(63,180,135,.16);
-    padding: 8px 12px;
+    border: 1px solid rgba(63,180,135,.18);
+    padding: 7px 12px;
     border-radius: 999px;
-    margin-bottom: 18px;
+    margin: 0 auto;
   }
-
-  .hero-card h2{
+  .hero h2{
     margin: 0;
-    font-size: clamp(34px, 4.4vw, 58px);
+    font-size: clamp(36px, 5vw, 60px);
     line-height: 1.02;
-    letter-spacing: -0.05em;
+    letter-spacing: -0.045em;
+    font-weight: 700;
   }
-  .hero-card h2 em{
+  .hero h2 em{
     font-family: "Playfair Display", serif;
-    font-style: normal;
-    color: var(--green-dark);
+    font-style: italic;
+    color: var(--green-darker);
+    font-weight: 600;
   }
-  .hero-card p{
-    margin: 16px 0 0;
-    max-width: 62ch;
+  .hero p{
+    margin: 4px auto 0;
+    max-width: 58ch;
     font-size: 16px;
-    line-height: 1.7;
+    line-height: 1.65;
     color: var(--muted);
   }
 
-  .hero-grid{
-    display:grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 12px;
-    margin-top: 22px;
-  }
-  .mini-card{
-    border-radius: 18px;
-    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
+  /* ---------- Card ---------- */
+  .card{
+    background: var(--card);
     border: 1px solid var(--line);
-    padding: 16px;
-    min-height: 112px;
-  }
-  .mini-card .k{
-    display:inline-flex;
-    padding: 7px 10px;
-    border-radius: 999px;
-    font-size: 12px;
-    font-weight: 700;
-    margin-bottom: 10px;
-  }
-  .k-green{ background: var(--mint); color: var(--green-dark); }
-  .k-blue{ background: var(--blue); color: var(--blue-text); }
-  .k-amber{ background: var(--amber); color: var(--amber-text); }
-  .mini-card strong{
-    display:block;
-    font-size: 14px;
-    margin-bottom: 5px;
-  }
-  .mini-card span{
-    color: var(--muted);
-    font-size: 13px;
-    line-height: 1.5;
-  }
-
-  .side-card{
-    padding: 22px;
-    display:flex;
-    flex-direction:column;
-    gap: 16px;
-  }
-
-  .side-block{
-    border: 1px solid var(--line);
-    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
-    border-radius: 20px;
-    padding: 16px;
-  }
-
-  .side-title{
-    margin:0 0 8px;
-    font-size: 14px;
-    font-weight: 700;
-    color: #26344a;
-  }
-  .side-text{
-    margin:0;
-    color: var(--muted);
-    font-size: 13px;
-    line-height: 1.6;
-  }
-
-  .quick-tries{
-    display:flex;
-    flex-wrap:wrap;
-    gap:10px;
-    margin-top: 14px;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
   }
 
-  .chip{
-    appearance:none;
-    border: 1px solid var(--line);
-    background: #fff;
-    color: #344055;
-    border-radius: 999px;
-    padding: 10px 14px;
-    font-size: 13px;
-    font-weight: 600;
-    cursor:pointer;
-    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
-    box-shadow: 0 6px 16px rgba(18,32,51,.04);
-  }
-  .chip:hover{
-    transform: translateY(-1px);
-    border-color: rgba(63,180,135,.35);
-    box-shadow: 0 10px 20px rgba(18,32,51,.08);
-  }
-
-  .main{
-    display:grid;
-    grid-template-columns: 1fr;
-    gap: 22px;
-  }
-
-  .section-card{
-    padding: 22px;
+  /* ---------- Composer ---------- */
+  .composer{
+    padding: 26px;
+    margin-bottom: 22px;
   }
-
-  .section-head{
+  .composer-head{
     display:flex;
     justify-content:space-between;
-    align-items:flex-end;
-    gap: 14px;
-    margin-bottom: 16px;
+    align-items:center;
+    gap:14px;
+    margin-bottom: 18px;
+    flex-wrap:wrap;
   }
-
-  .section-head h3{
+  .composer-head h3{
     margin:0;
-    font-size: 18px;
-    letter-spacing: -0.03em;
+    font-size: 17px;
+    letter-spacing: -0.02em;
+    font-weight: 700;
   }
-  .section-head p{
-    margin:6px 0 0;
+  .composer-head p{
+    margin:4px 0 0;
     color: var(--muted);
-    font-size: 14px;
-    line-height: 1.5;
+    font-size: 13.5px;
   }
 
   .segmented{
     display:inline-flex;
-    gap: 8px;
-    padding: 6px;
+    gap: 4px;
+    padding: 4px;
     border-radius: 999px;
-    background: #f3f5f9;
+    background: var(--line-soft);
     border: 1px solid var(--line);
   }
-
   .diet-btn{
     border: 0;
     background: transparent;
     color: var(--muted);
-    padding: 10px 16px;
+    padding: 9px 16px;
     border-radius: 999px;
     font-size: 13px;
-    font-weight: 700;
+    font-weight: 600;
     cursor: pointer;
-    transition: all .15s ease;
+    transition: all .18s ease;
   }
-  .diet-btn.active-vegan{ background: var(--mint); color: var(--green-dark); box-shadow: inset 0 0 0 1px rgba(63,180,135,.16); }
-  .diet-btn.active-keto{ background: var(--amber); color: var(--amber-text); box-shadow: inset 0 0 0 1px rgba(166,108,11,.12); }
-  .diet-btn.active-both{ background: var(--blue); color: var(--blue-text); box-shadow: inset 0 0 0 1px rgba(64,87,199,.12); }
+  .diet-btn:hover{ color: var(--text); }
+  .diet-btn.active-vegan{ background: #fff; color: var(--green-darker); box-shadow: 0 1px 3px rgba(15,26,46,.08); }
+  .diet-btn.active-keto{ background: #fff; color: var(--amber-text); box-shadow: 0 1px 3px rgba(15,26,46,.08); }
+  .diet-btn.active-both{ background: #fff; color: var(--blue-text); box-shadow: 0 1px 3px rgba(15,26,46,.08); }
 
-  .editor{
-    display:grid;
-    grid-template-columns: 1.1fr .9fr;
-    gap: 18px;
-    align-items:start;
+  .textarea-wrap{
+    position: relative;
   }
-
   textarea{
     width: 100%;
-    min-height: 220px;
+    min-height: 180px;
     resize: vertical;
-    border-radius: 20px;
+    border-radius: var(--radius-md);
     border: 1px solid var(--line);
-    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
+    background: #fcfcfd;
     color: var(--text);
-    padding: 18px 18px 16px;
+    padding: 16px 18px;
     font: inherit;
     font-size: 15px;
-    line-height: 1.7;
+    line-height: 1.65;
     outline:none;
-    box-shadow: 0 8px 20px rgba(18,32,51,.03);
+    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
   }
   textarea:focus{
-    border-color: rgba(63,180,135,.35);
+    border-color: rgba(63,180,135,.45);
     box-shadow: 0 0 0 4px rgba(63,180,135,.10);
+    background: #fff;
+  }
+  textarea::placeholder{ color:#a3adbe; }
+
+  /* Quick try chips */
+  .tries-row{
+    display:flex;
+    align-items:center;
+    gap:10px;
+    margin-top: 14px;
+    flex-wrap:wrap;
+  }
+  .tries-label{
+    font-size: 12.5px;
+    font-weight: 600;
+    color: var(--muted);
   }
-  textarea::placeholder{
-    color:#97a3b5;
+  .chip{
+    appearance:none;
+    border: 1px solid var(--line);
+    background: #fff;
+    color: var(--text-soft);
+    border-radius: 999px;
+    padding: 8px 13px;
+    font-size: 12.5px;
+    font-weight: 600;
+    cursor:pointer;
+    transition: all .15s ease;
+    display:inline-flex;
+    align-items:center;
+    gap:6px;
+  }
+  .chip:hover{
+    border-color: rgba(63,180,135,.4);
+    background: var(--mint-soft);
+    color: var(--green-darker);
+    transform: translateY(-1px);
   }
+  .chip-icon{ font-size: 13px; }
 
   .input-actions{
-    margin-top: 14px;
+    margin-top: 18px;
     display:flex;
     flex-wrap:wrap;
     gap: 10px;
     align-items:center;
     justify-content:space-between;
   }
-
   .helper{
     display:flex;
     flex-wrap:wrap;
-    gap:8px;
+    gap:6px;
     color: var(--muted);
-    font-size: 13px;
+    font-size: 12.5px;
+    align-items:center;
+  }
+  .helper .step{
+    display:inline-flex;
+    align-items:center;
+    gap:6px;
   }
+  .step-num{
+    width:18px; height:18px;
+    border-radius:50%;
+    background: var(--mint);
+    color: var(--green-darker);
+    font-weight:700;
+    font-size: 11px;
+    display:grid;
+    place-items:center;
+  }
+  .helper .sep{ color: var(--muted2); }
 
   .action-row{
     display:flex;
     gap: 10px;
     align-items:center;
   }
-
   .primary{
     border: none;
-    border-radius: 16px;
-    padding: 14px 20px;
-    font-weight: 800;
+    border-radius: var(--radius-md);
+    padding: 13px 22px;
+    font-weight: 700;
     font-size: 14px;
     cursor:pointer;
     color:#fff;
-    background: linear-gradient(135deg, var(--green) 0%, #2ea274 100%);
-    box-shadow: 0 12px 26px rgba(63,180,135,.25);
-    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
+    background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
+    box-shadow: 0 8px 20px -4px rgba(63,180,135,.45);
+    transition: all .18s ease;
+    display:inline-flex;
+    align-items:center;
+    gap:8px;
   }
   .primary:hover{
     transform: translateY(-1px);
-    box-shadow: 0 16px 32px rgba(63,180,135,.28);
-    filter: brightness(1.01);
+    box-shadow: 0 12px 28px -4px rgba(63,180,135,.55);
   }
+  .primary:active{ transform: translateY(0); }
+  .primary:disabled{ cursor: not-allowed; }
 
   .ghost{
     border: 1px solid var(--line);
     background:#fff;
-    color:#334155;
-    border-radius: 16px;
-    padding: 14px 18px;
-    font-weight: 700;
+    color: var(--text-soft);
+    border-radius: var(--radius-md);
+    padding: 13px 18px;
+    font-weight: 600;
     font-size: 14px;
     cursor:pointer;
-    transition: background .15s ease, transform .15s ease;
+    transition: all .15s ease;
   }
   .ghost:hover{
-    transform: translateY(-1px);
-    background:#f8fafc;
+    background: var(--line-soft);
+    border-color: #d8dde6;
   }
 
+  .loading{
+    display:none;
+    margin-top: 14px;
+    align-items:center;
+    gap:10px;
+    font-size: 13px;
+    color: var(--muted);
+  }
+  .spinner{
+    width: 16px;
+    height: 16px;
+    border-radius: 999px;
+    border: 2px solid rgba(63,180,135,.18);
+    border-top-color: var(--green);
+    animation: spin .8s linear infinite;
+  }
+  @keyframes spin{ to { transform: rotate(360deg); } }
+
   .error{
     display:none;
-    margin-top: 12px;
-    border: 1px solid rgba(210,73,91,.18);
-    background: rgba(252,237,239,.85);
-    color: #a13a4d;
-    border-radius: 16px;
+    margin-top: 14px;
+    border: 1px solid rgba(189,75,96,.22);
+    background: var(--rose);
+    color: var(--rose-text);
+    border-radius: var(--radius-md);
     padding: 12px 14px;
     font-size: 13px;
+    font-weight: 500;
   }
 
+  /* ---------- Feature row (replaces hero mini-cards) ---------- */
+  .feature-row{
+    display:grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 14px;
+    margin-bottom: 28px;
+  }
+  .feature{
+    background: #fff;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    padding: 18px;
+    transition: transform .2s ease, box-shadow .2s ease;
+  }
+  .feature:hover{
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+  }
+  .feature-icon{
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    display:grid;
+    place-items:center;
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+  .feature-icon.g{ background: var(--mint); }
+  .feature-icon.b{ background: var(--blue); }
+  .feature-icon.a{ background: var(--amber); }
+  .feature h4{
+    margin: 0 0 4px;
+    font-size: 14px;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+  }
+  .feature p{
+    margin: 0;
+    color: var(--muted);
+    font-size: 13px;
+    line-height: 1.55;
+  }
+
+  /* ---------- Results ---------- */
   .results-wrap{
     display:none;
+    padding: 26px;
   }
-
   .stats{
     display:grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(3, 1fr);
     gap: 12px;
-    margin-bottom: 16px;
+    margin-bottom: 20px;
   }
   .stat{
     border: 1px solid var(--line);
-    background: #fff;
-    border-radius: 18px;
-    padding: 16px;
+    background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
+    border-radius: var(--radius-md);
+    padding: 16px 18px;
   }
   .stat .num{
-    font-size: 26px;
+    font-size: 28px;
     font-weight: 800;
     letter-spacing: -0.04em;
+    line-height: 1;
   }
   .stat .lbl{
     color: var(--muted);
-    font-size: 12px;
+    font-size: 11.5px;
     text-transform: uppercase;
     letter-spacing: .08em;
-    margin-top: 4px;
+    font-weight: 600;
+    margin-top: 6px;
   }
 
   .results-head{
     display:flex;
     justify-content:space-between;
-    align-items:center;
+    align-items:flex-start;
     gap:12px;
     margin-bottom: 16px;
+    flex-wrap:wrap;
   }
   .results-head h3{
     margin:0;
     font-size: 20px;
     letter-spacing: -0.03em;
+    font-weight: 700;
+  }
+  .results-head p{
+    margin:6px 0 0;
+    color: var(--muted);
+    font-size: 13.5px;
   }
   .badge{
     display:inline-flex;
     align-items:center;
     gap:8px;
     font-size: 12px;
-    font-weight: 800;
-    padding: 9px 12px;
+    font-weight: 700;
+    padding: 8px 12px;
     border-radius: 999px;
   }
-  .badge-vegan{ background: var(--mint); color: var(--green-dark); }
+  .badge-vegan{ background: var(--mint); color: var(--green-darker); }
   .badge-keto{ background: var(--amber); color: var(--amber-text); }
   .badge-both{ background: var(--blue); color: var(--blue-text); }
 
@@ -457,9 +494,14 @@
   }
   .item{
     overflow:hidden;
-    border-radius: 18px;
+    border-radius: var(--radius-md);
     border: 1px solid var(--line);
     background: #fff;
+    transition: border-color .15s ease, box-shadow .15s ease;
+  }
+  .item:hover{
+    border-color: #dde2eb;
+    box-shadow: var(--shadow-sm);
   }
   .item-top{
     display:flex;
@@ -468,6 +510,7 @@
     gap:12px;
     padding: 14px 16px;
     cursor:pointer;
+    user-select: none;
   }
   .item-left{
     display:flex;
@@ -476,115 +519,111 @@
     min-width: 0;
   }
   .dot{
-    width: 10px;
-    height: 10px;
+    width: 9px;
+    height: 9px;
     border-radius:999px;
     flex:0 0 auto;
+    position: relative;
+  }
+  .dot::after{
+    content:"";
+    position: absolute;
+    inset: -4px;
+    border-radius: 50%;
+    opacity: .25;
   }
   .dot-ok{ background: var(--green); }
+  .dot-ok::after{ background: var(--green); }
   .dot-swap{ background: #f0a84c; }
+  .dot-swap::after{ background: #f0a84c; }
   .dot-warn{ background: #f36f7f; }
+  .dot-warn::after{ background: #f36f7f; }
 
   .item-name{
-    font-weight: 700;
-    font-size: 14px;
+    font-weight: 600;
+    font-size: 14.5px;
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
   }
+  .item-right{
+    display:flex;
+    align-items:center;
+    gap:10px;
+    flex-shrink: 0;
+  }
   .item-status{
-    color: var(--muted2);
+    color: var(--muted);
     font-size: 12px;
-    white-space: nowrap;
+    font-weight: 500;
   }
+  .chevron{
+    width: 16px;
+    height: 16px;
+    color: var(--muted2);
+    transition: transform .2s ease;
+  }
+  .item-top.open .chevron{ transform: rotate(180deg); }
 
   .item-body{
     display:none;
     border-top: 1px solid var(--line);
-    background: linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
-    padding: 16px;
-  }
-  .item-body.open{
-    display:block;
+    background: #fcfcfd;
+    padding: 18px;
   }
+  .item-body.open{ display:block; }
 
   .label{
-    font-size: 11px;
+    font-size: 10.5px;
     text-transform: uppercase;
-    letter-spacing: .08em;
-    color: #94a0b5;
-    margin-bottom: 5px;
-    font-weight: 800;
+    letter-spacing: .1em;
+    color: var(--muted2);
+    margin-bottom: 6px;
+    font-weight: 700;
   }
   .value{
     font-size: 15px;
-    font-weight: 700;
-    color: #203045;
+    font-weight: 600;
+    color: var(--text);
     line-height: 1.55;
-    margin-bottom: 12px;
+    margin-bottom: 14px;
+  }
+  .value.soft{
+    font-weight: 500;
+    color: var(--text-soft);
+    font-size: 14px;
   }
   .meta{
-    font-size: 12px;
-    color: var(--muted2);
+    font-size: 11.5px;
+    color: var(--muted);
     display:flex;
     flex-wrap:wrap;
-    gap: 10px;
+    gap: 6px;
   }
   .meta span{
-    background:#f7f9fc;
+    background: #fff;
     border: 1px solid var(--line);
     border-radius: 999px;
-    padding: 7px 10px;
-  }
-
-  .loading{
-    display:none;
-    align-items:center;
-    gap:10px;
-    font-size: 13px;
-    color: var(--muted);
-  }
-  .spinner{
-    width: 16px;
-    height: 16px;
-    border-radius: 999px;
-    border: 2px solid rgba(63,180,135,.18);
-    border-top-color: var(--green);
-    animation: spin .8s linear infinite;
+    padding: 5px 10px;
+    font-weight: 500;
   }
-  @keyframes spin{ to { transform: rotate(360deg); } }
 
-  @media (max-width: 980px){
-    .hero, .editor{
-      grid-template-columns: 1fr;
-    }
-    .hero-grid, .stats{
-      grid-template-columns: 1fr;
-    }
-    .topbar{
-      align-items:flex-start;
-      flex-direction:column;
-    }
+  @media (max-width: 880px){
+    .feature-row, .stats{ grid-template-columns: 1fr; }
+    .topbar{ flex-direction: column; align-items:flex-start; }
+    .composer-head{ flex-direction: column; align-items:flex-start; }
   }
 
-  @media (max-width: 640px){
-    .shell{ padding: 14px; }
-    .hero-card, .side-card, .section-card{ padding: 18px; }
-    .hero-card h2{ font-size: 32px; }
-    .section-head, .results-head, .input-actions{
-      flex-direction:column;
-      align-items:flex-start;
-    }
-    .action-row{
-      width: 100%;
-      flex-direction:column;
-      align-items:stretch;
-    }
-    .action-row .primary,
-    .action-row .ghost{
-      width:100%;
+  @media (max-width: 560px){
+    .shell{ padding: 18px 14px 40px; }
+    .composer, .results-wrap{ padding: 20px; }
+    .input-actions{ flex-direction: column; align-items:stretch; }
+    .action-row{ width:100%; }
+    .action-row .primary, .action-row .ghost{
+      flex: 1;
       justify-content:center;
     }
+    .tries-row{ flex-direction: column; align-items: flex-start; }
   }
 </style>
 </head>
@@ -598,61 +637,38 @@
           <span>Recipe adaptation that feels simple.</span>
         </div>
       </div>
-      <div class="top-pill">Same-page workflow • Fast recipe swaps • Built for vegan and keto</div>
+      <div class="top-pill">Built for vegan and keto cooking</div>
     </div>
 
     <section class="hero">
-      <div class="hero-card">
-        <div class="eyebrow">Diet-friendly cooking, without the guesswork</div>
-        <h2>Turn any recipe into a <em>clear</em>, useful adaptation.</h2>
-        <p>
-          Paste a recipe, choose a diet, and get ingredient-by-ingredient substitutions with short instructions.
-        </p>
-
-        <div class="hero-grid">
-          <div class="mini-card">
-            <div class="k k-green">Swaps</div>
-            <strong>Ingredient-level results</strong>
-            <span>Each item gets its own card with the substitute and usage note.</span>
-          </div>
-          <div class="mini-card">
-            <div class="k k-blue">Context</div>
-            <strong>Recipe type</strong>
-            <span>Results can adapt to baking or cooking based on the recipe text.</span>
-          </div>
-          <div class="mini-card">
-            <div class="k k-amber">Review</div>
-            <strong>Clear output</strong>
-            <span>Open each card to see the substitute, instruction, and source.</span>
-          </div>
-        </div>
-      </div>
-
-      <aside class="hero-card side-card">
-        <div class="side-block">
-          <h3 class="side-title">Try a recipe</h3>
-          <p class="side-text">Pick a sample to test the adapter.</p>
-          <div class="quick-tries">
-            <button class="chip" onclick="fillExample('fettuccine alfredo')">Fettucine Alfredo</button>
-            <button class="chip" onclick="fillExample('pancakes')">Pancakes</button>
-            <button class="chip" onclick="fillExample('butter chicken')">Butter Chicken</button>
-          </div>
-        </div>
+      <span class="eyebrow">Diet-friendly cooking, without the guesswork</span>
+      <h2>Turn any recipe into a <em>clear</em> adaptation.</h2>
+      <p>Paste a recipe, choose a diet, and get ingredient-by-ingredient substitutions with short, practical instructions.</p>
+    </section>
 
-        <div class="side-block">
-          <h3 class="side-title">How it works</h3>
-          <p class="side-text">
-            Paste a recipe, choose a diet, and review the ingredient cards.
-          </p>
-        </div>
-      </aside>
+    <section class="feature-row">
+      <div class="feature">
+        <div class="feature-icon g">🔄</div>
+        <h4>Ingredient-level swaps</h4>
+        <p>Each item gets its own card with the substitute and a short usage note.</p>
+      </div>
+      <div class="feature">
+        <div class="feature-icon b">📖</div>
+        <h4>Context aware</h4>
+        <p>Results adapt to baking or cooking based on what you paste in.</p>
+      </div>
+      <div class="feature">
+        <div class="feature-icon a">✓</div>
+        <h4>Clear, reviewable output</h4>
+        <p>Open any card to inspect the substitute, instructions, and source.</p>
+      </div>
     </section>
 
-    <section class="section-card">
-      <div class="section-head">
+    <section class="card composer">
+      <div class="composer-head">
         <div>
           <h3>Adapt a recipe</h3>
-          <p>Paste a recipe, choose a diet, and review the ingredient cards.</p>
+          <p>Paste anything from a recipe post or notes app, then pick a diet.</p>
         </div>
         <div class="segmented" role="tablist" aria-label="Diet mode">
           <button class="diet-btn active-vegan" data-diet="vegan" onclick="setDiet(this)">Vegan</button>
@@ -661,40 +677,43 @@
         </div>
       </div>
 
-      <div class="editor">
-        <div>
-          <textarea id="recipeInput" placeholder="Paste your recipe here."></textarea>
-
-          <div class="input-actions">
-            <div class="helper" aria-live="polite">
-              <span>Paste a recipe</span>
-              <span>Choose a diet</span>
-              <span>Review the swaps</span>
-            </div>
-            <div class="action-row">
-              <button class="ghost" onclick="clearInput()">Clear</button>
-              <button class="primary" id="submitBtn" onclick="run()">Adapt recipe</button>
-            </div>
-          </div>
-
-          <div class="loading" id="loading">
-            <div class="spinner"></div>
-            <div>Adapting recipe…</div>
-          </div>
-
-          <div class="error" id="errBox"></div>
-        </div>
+      <div class="textarea-wrap">
+        <textarea id="recipeInput" placeholder="Paste your recipe here. For example: 2 cups flour, 2 eggs, 1/2 cup butter, 1 cup milk, vanilla extract..."></textarea>
+      </div>
 
-        <div class="side-block">
-          <h3 class="side-title">Results</h3>
-          <p class="side-text">
-            You will see a summary, then ingredient cards with the substitute, notes, and source.
-          </p>
+      <div class="tries-row">
+        <span class="tries-label">Try a sample:</span>
+        <button class="chip" onclick="fillExample('alfredo')"><span class="chip-icon">🍝</span>Fettuccine Alfredo</button>
+        <button class="chip" onclick="fillExample('pancakes')"><span class="chip-icon">🥞</span>Pancakes</button>
+        <button class="chip" onclick="fillExample('butter chicken')"><span class="chip-icon">🍛</span>Butter Chicken</button>
+      </div>
+
+      <div class="input-actions">
+        <div class="helper" aria-live="polite">
+          <span class="step"><span class="step-num">1</span>Paste recipe</span>
+          <span class="sep">·</span>
+          <span class="step"><span class="step-num">2</span>Choose diet</span>
+          <span class="sep">·</span>
+          <span class="step"><span class="step-num">3</span>Review swaps</span>
+        </div>
+        <div class="action-row">
+          <button class="ghost" onclick="clearInput()">Clear</button>
+          <button class="primary" id="submitBtn" onclick="run()">
+            <span>Adapt recipe</span>
+            <span aria-hidden="true">→</span>
+          </button>
         </div>
       </div>
+
+      <div class="loading" id="loading">
+        <div class="spinner"></div>
+        <div>Adapting recipe…</div>
+      </div>
+
+      <div class="error" id="errBox"></div>
     </section>
 
-    <section class="section-card results-wrap" id="resultsWrap">
+    <section class="card results-wrap" id="resultsWrap">
       <div class="stats">
         <div class="stat">
           <div class="num" id="statTotal">—</div>
@@ -713,7 +732,7 @@
       <div class="results-head">
         <div>
           <h3 id="resultTitle">Adapted recipe</h3>
-          <p id="resultSubtitle" style="margin:6px 0 0;color:var(--muted);font-size:14px;">Open any card to inspect the substitution, notes, and source.</p>
+          <p id="resultSubtitle">Review each ingredient and expand any card for details.</p>
         </div>
         <div class="badge" id="resultBadge"></div>
       </div>
@@ -733,12 +752,13 @@ function setDiet(btn) {
 
 function fillExample(name) {
   const examples = {
-    "fettuccine alfredo": "24 ounces fettuccine, 1 cup butter, 1 pint heavy cream, 1 cup grated Pecorino romano, 1 cup grated Parmesan",
+    "alfredo": "24 ounces fettuccine, 1 cup butter, 1 pint heavy cream, 1 cup grated Pecorino romano, 1 cup grated Parmesan",
     "pancakes": "1 cup all-purpose flour, 1 tbsp white sugar, 1 tsp baking powder, 1 cup milk, 2 tbsp melted butter",
-    "butter chicken": "450g Chicken Breast, 2 tbsp Butter, 1 cup Tomato Puree, half cup Heavy Cream, half cup Yogurt"
+    "butter chicken": "450g chicken breast, 2 tbsp butter, 1 cup tomato puree, 1/2 cup heavy cream, 1/2 cup yogurt"
   };
-  document.getElementById("recipeInput").value = examples[name] || "";
-  document.getElementById("recipeInput").focus();
+  const ta = document.getElementById("recipeInput");
+  ta.value = examples[name] || "";
+  ta.focus();
 }
 
 function clearInput() {
@@ -748,7 +768,9 @@ function clearInput() {
 
 function toggleCard(id) {
   const el = document.getElementById("body-" + id);
+  const top = document.getElementById("top-" + id);
   if (el) el.classList.toggle("open");
+  if (top) top.classList.toggle("open");
 }
 
 function normalizeResponse(data) {
@@ -785,9 +807,10 @@ function recipeTypeLabel(recipeType) {
 }
 
 function setLoading(on) {
-  document.getElementById("loading").style.display = on ? "inline-flex" : "none";
-  document.getElementById("submitBtn").disabled = on;
-  document.getElementById("submitBtn").style.opacity = on ? "0.78" : "1";
+  document.getElementById("loading").style.display = on ? "flex" : "none";
+  const btn = document.getElementById("submitBtn");
+  btn.disabled = on;
+  btn.style.opacity = on ? "0.7" : "1";
 }
 
 function run() {
@@ -850,24 +873,31 @@ function renderResults(data) {
   list.innerHTML = "";
 
   data.ingredients.forEach((r, i) => {
-    const dotClass = r.compliant ? "dot dot-ok" : (r.confidence && r.confidence < 0.6 ? "dot dot-warn" : "dot dot-swap");
-    const statusText = r.compliant ? "compatible" : "substitution suggested";
+    const dotClass = r.compliant
+      ? "dot dot-ok"
+      : (r.confidence && r.confidence < 0.6 ? "dot dot-warn" : "dot dot-swap");
+    const statusText = r.compliant ? "compatible" : "swap suggested";
+
+    const chevron = `<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>`;
 
     const item = document.createElement("div");
     item.className = "item";
     item.innerHTML = `
-      <div class="item-top" onclick="toggleCard(${i})">
+      <div class="item-top" id="top-${i}" onclick="toggleCard(${i})">
         <div class="item-left">
           <span class="${dotClass}"></span>
           <div class="item-name">${escapeHtml(r.original)}</div>
         </div>
-        <div class="item-status">${statusText}</div>
+        <div class="item-right">
+          <div class="item-status">${statusText}</div>
+          ${chevron}
+        </div>
       </div>
       <div class="item-body" id="body-${i}">
         <div class="label">${r.compliant ? "Result" : "Use instead"}</div>
         <div class="value">${escapeHtml(r.substitute || r.original)}</div>
         <div class="label">How to use</div>
-        <div class="value" style="font-weight:600;color:#435166">${escapeHtml(r.instructions || "No details provided.")}</div>
+        <div class="value soft">${escapeHtml(r.instructions || "No details provided.")}</div>
         <div class="meta">
           <span>Source: ${escapeHtml(r.source || "lookup")}</span>
           ${r.matched_ingredient ? `<span>Matched: ${escapeHtml(r.matched_ingredient)}</span>` : ""}