.coffee-roast-finder{--bg: #f5f5f3;--panel: #ffffff;--line: rgba(0, 0, 0, .08);--text: #1c1c1e;--muted: #86868b;--accent: #8e735b;--glow: rgba(142, 115, 91, .15);--shadow: 0 4px 24px -8px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .02);--radius-xl: 24px;--radius-lg: 16px;--radius-md: 12px;--transition: .18s ease;--result-color: #c58d58;background:var(--bg);color:var(--text);display:block;padding-top:18px}.coffee-roast-finder *{box-sizing:border-box}.coffee-roast-finder .page{position:relative;z-index:1;width:min(1200px,calc(100% - 32px));margin:0 auto;padding:52px 0 56px}.coffee-roast-finder .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch;margin-top:24px}.coffee-roast-finder .layout{display:grid;grid-template-columns:1.02fr .98fr;gap:24px;align-items:start}.coffee-roast-finder .card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius-xl)}.coffee-roast-finder .hero-copy,.coffee-roast-finder .hero-preview,.coffee-roast-finder .panel{padding:36px}.coffee-roast-finder .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#f3f4f6;border:1px solid rgba(0,0,0,.04);color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.coffee-roast-finder h1{font-size:clamp(32px,4vw,44px);line-height:1.1;margin:18px 0 14px;letter-spacing:-.04em;max-width:none;white-space:nowrap}.coffee-roast-finder .lead{max-width:56ch;margin:0 0 32px;color:var(--muted);font-size:15px;line-height:1.8}.coffee-roast-finder .hero-metrics,.coffee-roast-finder .preview-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.coffee-roast-finder .hero-metrics{padding-top:28px;border-top:1px solid var(--line);gap:24px}.coffee-roast-finder .metric,.coffee-roast-finder .pill{padding:0;border-radius:0;background:transparent;border:0}.coffee-roast-finder .metric strong{display:block;font-size:24px;margin-bottom:6px}.coffee-roast-finder .metric span,.coffee-roast-finder .pill span,.coffee-roast-finder .preview-title,.coffee-roast-finder .field-tip,.coffee-roast-finder .range-scale,.coffee-roast-finder .chip span,.coffee-roast-finder .headline-card small,.coffee-roast-finder .footnote,.coffee-roast-finder .method-header span,.coffee-roast-finder .method-header p,.coffee-roast-finder .method-note,.coffee-roast-finder .method-product-copy{color:var(--muted)}.coffee-roast-finder .metric span{font-size:13px}.coffee-roast-finder .hero-preview{display:grid;grid-template-rows:auto 1fr auto;gap:28px}.coffee-roast-finder .preview-top,.coffee-roast-finder .field-head,.coffee-roast-finder .download-form{display:flex;justify-content:space-between;align-items:center;gap:12px}.coffee-roast-finder .preview-title{font-size:14px;margin:0}.coffee-roast-finder .swatch{width:80px;height:80px;border-radius:18px;background:var(--result-color);border:1px solid rgba(0,0,0,.04);box-shadow:inset 0 2px 10px #00000014,0 8px 20px #0000000f;flex-shrink:0;transition:background var(--transition)}.coffee-roast-finder .preview-spectrum,.coffee-roast-finder .range-wrap,.coffee-roast-finder .input-grid,.coffee-roast-finder .results-grid,.coffee-roast-finder .score-list,.coffee-roast-finder .method-points{display:grid;gap:24px}.coffee-roast-finder .preview-spectrum{gap:12px;align-content:center}.coffee-roast-finder .spectrum-labels,.coffee-roast-finder .mini-scale{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}.coffee-roast-finder .spectrum-bar{height:22px;border-radius:999px;background:linear-gradient(90deg,#e6d0b3,#d4a373 22%,#b07d46 45%,#8c5e35 65%,#59351f 82%,#36221a);position:relative;overflow:hidden}.coffee-roast-finder .spectrum-indicator{position:absolute;top:50%;left:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.12);transform:translate(-50%,-50%);box-shadow:0 2px 8px #00000026}.coffee-roast-finder .preview-foot{padding-top:24px;border-top:1px solid var(--line)}.coffee-roast-finder .pill span{display:block;font-size:12px;margin-bottom:4px}.coffee-roast-finder .pill strong{font-size:15px}.coffee-roast-finder .panel h2{margin:0 0 8px;font-size:22px;letter-spacing:-.03em}.coffee-roast-finder .field{padding:24px;border-radius:var(--radius-lg);background:#fafafa;border:1px solid var(--line)}.coffee-roast-finder .field label,.coffee-roast-finder .field-title{font-weight:700;font-size:15px}.coffee-roast-finder .field-head{align-items:baseline;margin-bottom:12px}.coffee-roast-finder input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;direction:rtl}.coffee-roast-finder .range-wrap{gap:10px}.coffee-roast-finder .range-scale{font-size:12px}.coffee-roast-finder .inline-inputs{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}.coffee-roast-finder input[type=number],.coffee-roast-finder input[type=text],.coffee-roast-finder input[type=email]{width:100%;border:1px solid var(--line);background:#fff;color:var(--text);border-radius:14px;padding:14px 16px;font-size:15px;outline:none;transition:border-color var(--transition),box-shadow var(--transition),background-color var(--transition);box-shadow:0 1px 2px #00000005}.coffee-roast-finder input[type=number]:focus,.coffee-roast-finder input[type=text]:focus,.coffee-roast-finder input[type=email]:focus{border-color:#9d5f2f85;box-shadow:0 0 0 4px var(--glow)}.coffee-roast-finder .input-addon{padding:9px 12px;border-radius:10px;background:#f3f4f6;color:var(--muted);font-size:11px;font-weight:600;white-space:nowrap}.coffee-roast-finder .palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.coffee-roast-finder .chip{-webkit-appearance:none;appearance:none;border:1px solid var(--line);background:#fff;border-radius:20px;cursor:pointer;padding:12px;text-align:left;color:inherit;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}.coffee-roast-finder .chip:hover,.coffee-roast-finder .chip:focus-visible{transform:translateY(-2px);box-shadow:0 8px 18px #0000000f;border-color:#00000029;outline:none}.coffee-roast-finder .chip.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.coffee-roast-finder .chip-color{width:100%;height:40px;border-radius:16px;margin-bottom:10px;box-shadow:inset 0 1px #ffffff2e}.coffee-roast-finder .chip strong,.coffee-roast-finder .chip span{display:block}.coffee-roast-finder .chip strong{font-size:14px;margin-bottom:4px}.coffee-roast-finder .chip span{font-size:11px}.coffee-roast-finder .headline-card,.coffee-roast-finder .score-card,.coffee-roast-finder .text-card,.coffee-roast-finder .cta-card{padding:22px;border-radius:24px;background:#fafafa;border:1px solid var(--line)}.coffee-roast-finder .headline-card{padding:24px}.coffee-roast-finder .headline-card small{display:block;font-size:12px;margin-bottom:12px;letter-spacing:.04em;text-transform:uppercase}.coffee-roast-finder .headline-card h3{margin:0 0 10px;font-size:32px;letter-spacing:-.04em}.coffee-roast-finder .headline-card p,.coffee-roast-finder .text-card p,.coffee-roast-finder .cta-card p{margin:0;color:var(--muted);line-height:1.75}.coffee-roast-finder .tag-row,.coffee-roast-finder .brew-list{display:flex;flex-wrap:wrap;gap:10px}.coffee-roast-finder .tag{padding:9px 12px;border-radius:999px;background:#f3f4f6;color:var(--text);font-size:13px}.coffee-roast-finder .score-card h4,.coffee-roast-finder .text-card h4,.coffee-roast-finder .cta-card h4{margin:0 0 16px;font-size:18px}.coffee-roast-finder .score-item{display:grid;grid-template-columns:92px 1fr 36px;gap:12px;align-items:center;font-size:14px}.coffee-roast-finder .score-item span:first-child{color:var(--muted)}.coffee-roast-finder .meter{height:10px;border-radius:999px;background:#0000000f;overflow:hidden;position:relative}.coffee-roast-finder .meter-fill{position:absolute;inset:0 auto 0 0;width:50%;border-radius:inherit;background:var(--text);transition:width var(--transition)}.coffee-roast-finder .brew-item{padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px}.coffee-roast-finder .cta-card{background:transparent;border:0;padding:24px 0 0;border-top:1px solid var(--line);border-radius:0}.coffee-roast-finder .button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:999px;text-decoration:none;font-weight:700;transition:transform var(--transition),box-shadow var(--transition)}.coffee-roast-finder .button:hover,.coffee-roast-finder .button:focus-visible{transform:translateY(-1px);box-shadow:0 4px 12px #0000001a;outline:none}.coffee-roast-finder .button-primary{background:var(--text);color:#fff}.coffee-roast-finder .button-secondary{background:transparent;color:var(--text);border:1px solid var(--line)}.coffee-roast-finder .download-form{gap:12px;margin-top:14px;align-items:stretch}.coffee-roast-finder .download-form input{flex:1 1 auto}.coffee-roast-finder .download-form .button{flex:0 0 auto;min-width:128px;width:auto;white-space:nowrap;line-height:1;padding-inline:18px}.coffee-roast-finder .download-feedback{margin-top:12px;padding:12px 14px;border-radius:var(--radius-md);font-size:13px;line-height:1.6;border:1px solid var(--line);background:#fafafa;color:var(--muted)}.coffee-roast-finder .download-feedback.is-success{background:#28a7450f;border-color:#28a74533;color:#1f6f3d}.coffee-roast-finder .download-feedback.is-error{background:#c43c3c0f;border-color:#c43c3c29;color:#9b2c2c}.coffee-roast-finder .download-feedback.is-loading{background:#8e735b14;border-color:#8e735b2e;color:#6f543d}.coffee-roast-finder .download-form .button[disabled]{opacity:.72;cursor:wait;transform:none;box-shadow:none}.coffee-roast-finder .footnote{margin-top:22px;font-size:12px;line-height:1.7}.coffee-roast-finder .method-card{margin:20px 0 24px;padding:28px}.coffee-roast-finder .method-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:stretch}.coffee-roast-finder .method-header{margin-bottom:16px}.coffee-roast-finder .method-header span{display:inline-block;margin-bottom:10px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.coffee-roast-finder .method-header h3{margin:0 0 10px;font-size:24px;line-height:1.08;letter-spacing:-.04em}.coffee-roast-finder .method-header p,.coffee-roast-finder .method-note,.coffee-roast-finder .method-product-copy{margin:0;font-size:13px;line-height:1.65}.coffee-roast-finder .method-points{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.coffee-roast-finder .method-point{padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fafafa}.coffee-roast-finder .method-point strong{display:block;margin-bottom:4px;font-size:14px}.coffee-roast-finder .method-point p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.coffee-roast-finder .method-note{margin-top:12px}.coffee-roast-finder .method-product{display:flex;flex-direction:column;justify-content:space-between;padding:18px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(180deg,#fff,#fafafa);min-height:100%}.coffee-roast-finder .method-product-visual{position:relative;min-height:210px;margin-bottom:16px;border-radius:20px;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.95),rgba(255,255,255,.75) 25%,transparent 26%),linear-gradient(135deg,#f3f3f1,#ecebe7);border:1px solid rgba(0,0,0,.05);overflow:hidden}.coffee-roast-finder .method-device{position:absolute;inset:44px 28px auto auto;width:164px;height:108px;border-radius:24px;background:linear-gradient(160deg,#2d2f33,#17181b);box-shadow:0 20px 32px #0000002e}.coffee-roast-finder .method-device:before{content:"";position:absolute;inset:18px auto auto 18px;width:64px;height:64px;border-radius:18px;background:linear-gradient(145deg,#f4f1eb,#ddd6ca);box-shadow:inset 0 0 0 1px #ffffff14}.coffee-roast-finder .method-device:after{content:"";position:absolute;inset:26px 18px auto auto;width:54px;height:12px;border-radius:999px;background:#ffffff1f;box-shadow:0 22px #ffffff14,0 44px #ffffff0f}.coffee-roast-finder .method-powder-tray{position:absolute;inset:auto auto 24px 88px;width:124px;height:80px;border-radius:24px;background:linear-gradient(180deg,#ffffffb8,#ffffff47);border:1px solid rgba(0,0,0,.05);box-shadow:inset 0 1px #fff9}.coffee-roast-finder .method-powder-tray:before{content:"";position:absolute;top:16px;right:14px;bottom:18px;left:14px;border-radius:18px;background:radial-gradient(circle at 28% 35%,rgba(255,255,255,.18),transparent 30%),radial-gradient(circle at 62% 58%,rgba(255,255,255,.14),transparent 28%),linear-gradient(160deg,#9c6a41,#7f4d2b);box-shadow:inset 0 10px 18px #ffffff14,inset 0 -10px 20px #0000001f}.coffee-roast-finder .method-powder{position:absolute;inset:auto auto 38px 198px;width:84px;height:38px;border-radius:999px;background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.18),transparent 38%),linear-gradient(180deg,#b98353,#8e5a31);box-shadow:0 10px 22px #7547252e,inset 0 6px 8px #ffffff1a}.coffee-roast-finder .method-scoop{position:absolute;inset:68px auto auto 22px;width:94px;height:22px;border-radius:999px;background:linear-gradient(180deg,#dad6cf,#bdb8b0);box-shadow:0 8px 16px #00000014;transform:rotate(-22deg);transform-origin:left center}.coffee-roast-finder .method-scoop:before{content:"";position:absolute;inset:-14px auto auto -2px;width:48px;height:34px;border-radius:999px;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.16),transparent 35%),linear-gradient(180deg,#a57044,#7f4d2b);box-shadow:inset 0 6px 8px #ffffff14}.coffee-roast-finder .method-flow{position:absolute;height:2px;border-radius:999px;background:linear-gradient(90deg,#8e735b2e,#8e735bad)}.coffee-roast-finder .method-flow:after{content:"";position:absolute;top:50%;right:-1px;width:10px;height:10px;border-top:2px solid rgba(142,115,91,.9);border-right:2px solid rgba(142,115,91,.9);transform:translateY(-50%) rotate(45deg)}.coffee-roast-finder .method-flow-one{inset:102px auto auto 98px;width:52px}.coffee-roast-finder .method-flow-two{inset:102px auto auto 236px;width:58px}.coffee-roast-finder .method-visual-label{position:absolute;display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#ffffffd1;border:1px solid rgba(28,28,30,.08);box-shadow:0 8px 18px #0000000d;font-size:12px;line-height:1;color:var(--muted);white-space:nowrap}.coffee-roast-finder .method-label-scoop{inset:18px auto auto 18px}.coffee-roast-finder .method-label-tray{inset:auto auto 12px 98px}.coffee-roast-finder .method-label-device{inset:18px 18px auto auto}.coffee-roast-finder .method-product h4{margin:0 0 10px;font-size:18px;line-height:1.2;letter-spacing:-.03em}.coffee-roast-finder .method-actions{display:flex;gap:12px;margin-top:18px}@media(max-width:980px){.coffee-roast-finder .hero,.coffee-roast-finder .layout,.coffee-roast-finder .method-grid,.coffee-roast-finder .method-points{grid-template-columns:1fr}.coffee-roast-finder .palette{grid-template-columns:repeat(2,minmax(0,1fr))}.coffee-roast-finder .method-flow-two{width:54px}}@media(max-width:640px){.coffee-roast-finder{padding-top:12px}.coffee-roast-finder .page{width:min(100% - 20px,1200px);padding-top:28px}.coffee-roast-finder .hero-copy,.coffee-roast-finder .hero-preview,.coffee-roast-finder .panel,.coffee-roast-finder .method-card{padding:22px}.coffee-roast-finder h1{white-space:normal}.coffee-roast-finder .hero-metrics,.coffee-roast-finder .preview-foot,.coffee-roast-finder .inline-inputs{grid-template-columns:1fr}.coffee-roast-finder .score-item{grid-template-columns:72px 1fr 30px;gap:8px}.coffee-roast-finder .method-actions,.coffee-roast-finder .download-form{flex-direction:column}.coffee-roast-finder .download-form .button{width:100%}.coffee-roast-finder .method-product-visual{min-height:238px}.coffee-roast-finder .method-device{inset:64px 18px auto auto;width:150px;height:104px}.coffee-roast-finder .method-device:before{width:58px;height:58px}.coffee-roast-finder .method-scoop{inset:86px auto auto 18px;width:84px}.coffee-roast-finder .method-powder-tray{inset:auto auto 34px 62px;width:122px;height:82px}.coffee-roast-finder .method-powder{inset:auto auto 50px 158px;width:78px;height:38px}.coffee-roast-finder .method-flow-one{inset:124px auto auto 86px;width:42px}.coffee-roast-finder .method-flow-two{inset:124px auto auto 214px;width:34px}.coffee-roast-finder .method-visual-label{font-size:11px;padding:5px 8px}.coffee-roast-finder .method-label-tray{inset:auto auto 16px 66px}.coffee-roast-finder .method-label-device{inset:24px 18px auto auto}}
/*# sourceMappingURL=/cdn/shop/t/58/assets/coffee-roast-finder.css.map */