:root{--color-primary:#22543d;--color-primary-dark:#1a3626;--color-primary-light:#2f855a;--color-primary-subtle:#e6f4ea;--color-primary-border:#c6e2d0;--color-terracotta:#c05621;--color-terracotta-light:#feebc8;--color-terracotta-hover:#9c4221;--color-sun-gold:#d69e2e;--color-sun-subtle:#fefcbf;--color-bg-base:#f8faf7;--color-bg-surface:#fff;--color-bg-surface-elevated:#fff;--color-bg-muted:#f0f4ef;--color-text-main:#1c2822;--color-text-muted:#536b5f;--color-text-subtle:#7a9185;--color-text-inverse:#fff;--color-border-subtle:#e2e8e4;--color-border-medium:#cbd5ce;--color-border-active:#2f855a;--color-success:#2f855a;--color-success-bg:#e6f4ea;--color-success-border:#86efac;--color-success-text:#166534;--color-warning:#dd6b20;--color-warning-bg:#fffbeb;--color-warning-border:#fde68a;--color-warning-text:#92400e;--color-danger:#dc2626;--color-danger-bg:#fef2f2;--color-danger-border:#fca5a5;--color-danger-text:#991b1b;--color-info:#0284c7;--color-info-bg:#f0f9ff;--color-info-border:#bae6fd;--color-info-text:#0369a1;--color-neutral-bg:#f1f5f9;--color-neutral-border:#cbd5e1;--color-neutral-text:#475569;--focus-ring:0 0 0 3px #2f855a59;--touch-target-min:44px;--font-heading:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-body:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--shadow-sm:0 1px 2px #1c28220d;--shadow-md:0 4px 12px #1c282212, 0 2px 4px #1c282208;--shadow-lg:0 12px 28px #1c282217, 0 4px 10px #1c28220a;--shadow-glow:0 0 0 3px #2f855a33;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--max-content-width:1080px;--header-height:70px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-body);background-color:var(--color-bg-base);color:var(--color-text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:1.6;overflow-x:hidden}:focus-visible{outline:2px solid var(--color-primary-light);outline-offset:2px}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--color-text-main);font-weight:600;line-height:1.25}h1{letter-spacing:-.02em;font-size:2.25rem;font-weight:700}h2{letter-spacing:-.015em;font-size:1.75rem;font-weight:700}h3{font-size:1.25rem;font-weight:600}h4{font-size:1.05rem;font-weight:600}p{color:var(--color-text-muted)}a{color:var(--color-primary);text-decoration:none;transition:color .15s}a:hover{color:var(--color-primary-dark)}button{font-family:var(--font-body);cursor:pointer;background:0 0;border:none;font-size:.95rem;transition:all .18s cubic-bezier(.16,1,.3,1)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-primary-light);outline-offset:2px}.container{width:100%;max-width:var(--max-content-width);margin-left:auto;margin-right:auto;padding-left:1.25rem;padding-right:1.25rem}.app-layout{flex-direction:column;min-height:100vh;display:flex}.main-content{flex:1;padding-top:1.5rem;padding-bottom:5rem}@media (width>=768px){.main-content{padding-top:2.5rem;padding-bottom:3.5rem}}.btn{border-radius:var(--radius-md);border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.65rem 1.25rem;font-weight:600;transition:all .18s;display:inline-flex}.btn-primary{background-color:var(--color-primary);color:var(--color-text-inverse);box-shadow:0 2px 6px #22543d40}.btn-primary:hover{background-color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:0 4px 10px #22543d4d}.btn-secondary{background-color:var(--color-bg-surface);color:var(--color-primary);border:1px solid var(--color-border-medium)}.btn-secondary:hover{background-color:var(--color-primary-subtle);border-color:var(--color-primary-border)}.btn-terracotta{background-color:var(--color-terracotta);color:#fff}.btn-terracotta:hover{background-color:var(--color-terracotta-hover);transform:translateY(-1px)}.btn-ghost{color:var(--color-text-muted);background:0 0}.btn-ghost:hover{background-color:var(--color-bg-muted);color:var(--color-text-main)}.btn-sm{border-radius:var(--radius-sm);padding:.4rem .8rem;font-size:.85rem}.btn-lg{border-radius:var(--radius-lg);padding:.85rem 1.75rem;font-size:1.05rem}.badge{border-radius:var(--radius-full);align-items:center;gap:.35rem;padding:.25rem .65rem;font-size:.8rem;font-weight:600;line-height:1;display:inline-flex}.badge-green{background-color:var(--color-primary-subtle);color:var(--color-primary-dark);border:1px solid var(--color-primary-border)}.badge-clay{background-color:var(--color-terracotta-light);color:var(--color-terracotta)}.badge-gold{background-color:var(--color-sun-subtle);color:#975a16}.badge-neutral{background-color:var(--color-bg-muted);color:var(--color-text-muted);border:1px solid var(--color-border-subtle)}.badge-danger,.badge-error{background-color:var(--color-danger-bg);color:var(--color-danger-text);border:1px solid var(--color-danger-border)}.badge-info,.badge-blue{background-color:var(--color-info-bg);color:var(--color-info-text);border:1px solid var(--color-info-border)}.badge-verified{background-color:var(--color-success-bg);color:var(--color-success-text);border:1px solid var(--color-success-border)}.card{background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.5rem;transition:transform .18s,box-shadow .18s,border-color .18s}.card:hover{border-color:var(--color-border-medium);box-shadow:var(--shadow-md)}.card-interactive{cursor:pointer}.card-interactive:hover{border-color:var(--color-primary-light);transform:translateY(-2px)}.section-header{margin-bottom:2rem}.section-header h2{margin-bottom:.5rem}.section-header p{max-width:640px;font-size:1.05rem}.form-group{margin-bottom:1.25rem}.form-label{color:var(--color-text-main);margin-bottom:.4rem;font-size:.95rem;font-weight:600;display:block}.form-hint{color:var(--color-text-subtle);margin-top:.25rem;font-size:.825rem}.form-input,.form-select{width:100%;font-family:var(--font-body);border:1px solid var(--color-border-medium);border-radius:var(--radius-md);background-color:var(--color-bg-surface);color:var(--color-text-main);padding:.75rem 1rem;font-size:.95rem;transition:border-color .15s,box-shadow .15s}.form-input:focus,.form-select:focus{border-color:var(--color-primary-light);box-shadow:var(--shadow-glow)}.options-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem;display:grid}.option-tile{text-align:center;border:1.5px solid var(--color-border-subtle);border-radius:var(--radius-md);background-color:var(--color-bg-surface);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;padding:.9rem .75rem;transition:all .15s;display:flex}.option-tile:hover{border-color:var(--color-primary-border);background-color:var(--color-primary-subtle)}.option-tile.selected{border-color:var(--color-primary);background-color:var(--color-primary-subtle);box-shadow:0 0 0 2px var(--color-primary-light)}.option-tile-title{color:var(--color-text-main);margin-top:.35rem;font-size:.9rem;font-weight:600}.option-tile-subtitle{color:var(--color-text-subtle);font-size:.75rem}.header-nav{z-index:40;-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border-subtle);height:var(--header-height);background-color:#ffffffeb;align-items:center;display:flex;position:sticky;top:0}.header-container{justify-content:space-between;align-items:center;gap:.75rem;width:100%;min-width:0;display:flex}.brand-logo{font-family:var(--font-heading);color:var(--color-primary-dark);flex-shrink:0;align-items:center;gap:.6rem;font-size:1.35rem;font-weight:700;display:flex}.brand-badge{background-color:var(--color-terracotta-light);color:var(--color-terracotta);border-radius:var(--radius-full);letter-spacing:.02em;padding:.2rem .5rem;font-size:.7rem;font-weight:600}.desktop-nav-links{white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;flex:auto;align-items:center;gap:.25rem;min-width:0;padding:.25rem 0;display:none;overflow-x:auto}.desktop-nav-links::-webkit-scrollbar{display:none}@media (width>=900px){.desktop-nav-links{display:flex}}.nav-link{border-radius:var(--radius-md);color:var(--color-text-muted);white-space:nowrap;flex-shrink:0;align-items:center;gap:.35rem;padding:.45rem .75rem;font-size:.875rem;font-weight:600;transition:all .15s;display:flex}.nav-link:hover{color:var(--color-primary-dark);background-color:var(--color-bg-muted)}.nav-link.active{color:var(--color-primary-dark);background-color:var(--color-primary-subtle)}.nav-dropdown{display:inline-block;position:relative}.nav-dropdown-toggle{cursor:pointer;background:0 0;border:none;align-items:center;gap:.35rem;display:flex}.nav-dropdown-menu{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);z-index:60;background-color:#fff;flex-direction:column;gap:.2rem;min-width:260px;padding:.5rem;animation:.15s ease-out dropdownFadeIn;display:flex;position:absolute;top:calc(100% + .35rem);left:0;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000000d}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.nav-dropdown-item{border-radius:var(--radius-md);color:var(--color-text-main);text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;gap:.65rem;width:100%;padding:.55rem .75rem;font-size:.875rem;font-weight:500;transition:all .15s;display:flex}.nav-dropdown-item:hover,.nav-dropdown-item:focus{background-color:var(--color-bg-muted);color:var(--color-primary-dark);outline:none}.nav-dropdown-item.active{background-color:var(--color-primary-subtle);color:var(--color-primary-dark);font-weight:600}.nav-dropdown-item-featured{color:#047857;background:linear-gradient(135deg,#10b9811f,#04785714);border:1px solid #10b9814d;font-weight:600}.nav-dropdown-item-featured:hover,.nav-dropdown-item-featured:focus{color:#065f46;background:linear-gradient(135deg,#10b98133,#04785726)}.nav-dropdown-divider{background-color:var(--color-border-subtle);height:1px;margin:.35rem 0}.mobile-nav{z-index:50;-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--color-border-subtle);padding:.35rem .5rem calc(.35rem + env(safe-area-inset-bottom,0px));background:#fffffffa;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #1c282214}@media (width>=900px){.mobile-nav{display:none}}.mobile-nav-item{min-width:48px;min-height:48px;color:var(--color-text-muted);border-radius:var(--radius-md);cursor:pointer;background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:.15rem;padding:.35rem .65rem;font-size:.725rem;font-weight:600;text-decoration:none;transition:all .15s cubic-bezier(.16,1,.3,1);display:flex;position:relative}.mobile-nav-item:hover{color:var(--color-primary-dark);background-color:var(--color-bg-muted)}.mobile-nav-item.active{color:var(--color-primary-dark);background-color:var(--color-primary-subtle)}.mobile-nav-item:focus-visible{outline:2px solid var(--color-primary-light);outline-offset:-2px}.mobile-nav-item svg{flex-shrink:0;width:20px;height:20px}.mobile-badge{padding:.05rem .35rem;font-size:.625rem;position:absolute;top:4px;right:8px}.mobile-active-dot{border-radius:var(--radius-full);background-color:var(--color-primary);width:6px;height:6px;position:absolute;top:6px;right:12px}@media (width<=480px){.hide-on-compact{display:none}}.mobile-drawer-backdrop{z-index:100;-webkit-backdrop-filter:blur(4px);background-color:#14201a8c;justify-content:center;align-items:flex-end;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.mobile-drawer-content{background:var(--color-bg-surface);border-top-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl);flex-direction:column;width:100%;max-width:600px;max-height:85vh;animation:.25s cubic-bezier(.16,1,.3,1) slideUp;display:flex;box-shadow:0 -8px 30px #00000026}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.mobile-drawer-header{border-bottom:1px solid var(--color-border-subtle);justify-content:space-between;align-items:center;padding:1.15rem 1.25rem .85rem;display:flex}.mobile-drawer-body{-webkit-overflow-scrolling:touch;padding:1rem 1.25rem 2.5rem;overflow-y:auto}.mobile-drawer-group{margin-bottom:1.25rem}.mobile-drawer-group-title{text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-subtle);margin-bottom:.5rem;padding-left:.25rem;font-size:.775rem;font-weight:700}.mobile-drawer-group-list{flex-direction:column;gap:.4rem;display:flex}.mobile-drawer-item{border-radius:var(--radius-lg);border:1px solid var(--color-border-subtle);background-color:var(--color-bg-surface);text-align:left;cursor:pointer;align-items:center;gap:.85rem;min-height:52px;padding:.75rem .9rem;transition:all .15s;display:flex}.mobile-drawer-item:hover{background-color:var(--color-primary-subtle);border-color:var(--color-primary-border)}.mobile-drawer-item.active{background-color:var(--color-primary-subtle);border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.mobile-drawer-item-icon{border-radius:var(--radius-md);background-color:var(--color-bg-muted);width:36px;height:36px;color:var(--color-primary-dark);flex-shrink:0;justify-content:center;align-items:center;display:flex}.mobile-drawer-item.active .mobile-drawer-item-icon{background-color:var(--color-primary);color:#fff}.mobile-drawer-item-text{flex:1;min-width:0}.mobile-drawer-item-title{color:var(--color-text-main);margin-bottom:.15rem;font-size:.9rem;font-weight:600}.mobile-drawer-item-desc{color:var(--color-text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.775rem;overflow:hidden}.touch-grass-strip{border:1px solid var(--color-primary-border);border-radius:var(--radius-lg);background:linear-gradient(90deg,#e6f4ea 0%,#fef9e7 100%);justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;padding:.9rem 1.25rem;display:flex}.touch-grass-text{align-items:center;gap:.75rem;display:flex}.touch-grass-text strong{color:var(--color-primary-dark);font-size:.95rem}.touch-grass-text span{color:var(--color-text-muted);font-size:.85rem}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background-color:#14201a99;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-card{background:var(--color-bg-surface);border-radius:var(--radius-xl);width:100%;max-width:580px;max-height:90vh;box-shadow:var(--shadow-lg);border:1px solid var(--color-border-subtle);padding:2rem;animation:.2s cubic-bezier(.16,1,.3,1) modalPop;position:relative;overflow-y:auto}@keyframes modalPop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.empty-state{text-align:center;background:var(--color-bg-surface);border:1.5px dashed var(--color-border-medium);border-radius:var(--radius-xl);flex-direction:column;align-items:center;padding:3.5rem 1.5rem;display:flex}.empty-state-icon{border-radius:var(--radius-full);background-color:var(--color-primary-subtle);width:64px;height:64px;color:var(--color-primary);justify-content:center;align-items:center;margin-bottom:1.25rem;display:flex}.empty-state h3{margin-bottom:.5rem;font-size:1.25rem}.empty-state p{max-width:440px;margin-bottom:1.5rem;font-size:.95rem}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}