*{box-sizing:border-box} :root{--paper:#E8ECE5;--deep:#e2dbcf;--ink:#211e1a;--muted:#6e675e;--line:rgba(33,30,26,.16);--accent:#9a4527;--dark:#211e1a}
html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,"Times New Roman",serif;line-height:1.55}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(rgba(30,25,20,.35) .55px,transparent .7px),radial-gradient(rgba(255,255,255,.45) .55px,transparent .7px);background-size:7px 7px,11px 11px;background-position:0 0,3px 4px;mix-blend-mode:multiply;z-index:20}
a{color:inherit}.nav{max-width:1180px;margin:auto;padding:28px 30px;display:flex;justify-content:space-between;align-items:center;font:13px Arial,sans-serif}.wordmark{font-size:19px;font-weight:700;text-decoration:none;letter-spacing:-.03em}.nav-links{display:flex;gap:24px}.nav-links a{text-decoration:none;opacity:.72}.nav-links a:hover{opacity:1}
.hero{min-height:100vh;padding-bottom:100px}.hero-copy{max-width:940px;margin:90px auto 72px;padding:0 30px}.eyebrow,.section-label{font:700 11px/1.2 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}.eyebrow{color:var(--accent)}
h1,h2,h3,p{margin-top:0}h1{font-size:clamp(48px,7vw,88px);line-height:.98;letter-spacing:-.055em;font-weight:500;margin:18px 0 32px}h1 em,h2 em{font-style:italic;font-weight:400}
.lede{max-width:680px;font-size:20px;color:var(--muted)}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0}.button{display:inline-block;padding:13px 19px;border:1px solid var(--ink);border-radius:2px;font:700 12px Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em;text-decoration:none}.button.primary{background:var(--ink);color:var(--paper)}.badges{display:flex;flex-wrap:wrap;gap:8px;font:11px Arial,sans-serif}.badges span{border:1px solid var(--line);padding:6px 9px}
.hero-shot{max-width:1280px;margin:auto;padding:0 30px}.hero-shot img,.compare-grid img,.tray-shot img{width:100%;display:block}.hero-shot img{box-shadow:0 25px 60px rgba(40,32,24,.16)}
.section{max-width:1180px;margin:auto;padding:125px 30px;border-top:1px solid var(--line)}.section-label{color:var(--muted);margin-bottom:45px}.intro{display:grid;grid-template-columns:1fr 2fr;gap:60px}h2{font-size:clamp(38px,5vw,66px);line-height:1;letter-spacing:-.045em;font-weight:500;margin-bottom:28px}.intro p,.contrast p,.preset-heading p,.technical p,.tray p{max-width:650px;font-size:18px;color:var(--muted)}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.compare-grid img{aspect-ratio:16/9;object-fit:cover}figure{margin:0}figcaption{padding:12px 0;font:700 11px Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em}
.contrast{background:var(--dark);color:var(--paper);max-width:none;padding-left:max(30px,calc((100vw - 1120px)/2));padding-right:max(30px,calc((100vw - 1120px)/2))}.contrast .section-label{color:#a9a096}.contrast-grid,.technical-grid,.tray-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.contrast p{color:#c0b8ae}.contrast-cards{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(238,233,223,.2);margin-top:45px}.contrast-cards div{padding:20px 20px 0 0}.contrast-cards strong,.contrast-cards span{display:block}.contrast-cards strong{font:700 11px Arial,sans-serif;letter-spacing:.12em;margin-bottom:7px}.contrast-cards span{color:#c0b8ae;font-size:15px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.feature-grid article{background:var(--paper);padding:28px;min-height:190px}.feature-grid article span{font:11px Arial,sans-serif;color:var(--accent)}.feature-grid h3{font-size:25px;font-weight:500;margin:32px 0 8px}.feature-grid p{color:var(--muted);margin:0}
.preset-heading{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:45px}.preset-heading h2{max-width:600px;margin:0}.preset-heading p{max-width:360px;margin:0}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.swatches+.swatches{margin-top:12px}.swatch{min-height:130px;padding:14px;display:flex;align-items:end;position:relative;overflow:hidden;border:1px solid var(--line);background:#D9DED6}.swatch:before{content:"";position:absolute;inset:0;opacity:.55;background-image:radial-gradient(rgba(40,30,20,.45) .5px,transparent .7px);background-size:5px 5px}.swatch span{position:relative;font:700 11px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}.amber{background:#c2a177}.kraft{background:#b99b75}.plum{background:#9e8190}.rose{background:#c9a7a8}.sage{background:#9da990}.sky{background:#9eb0b8}
.technical{background:var(--deep);max-width:none;padding-left:max(30px,calc((100vw - 1120px)/2));padding-right:max(30px,calc((100vw - 1120px)/2))}.steps>div{display:grid;grid-template-columns:50px 1fr;gap:20px;border-top:1px solid var(--line);padding:22px 0}.steps b{font:12px Arial,sans-serif;color:var(--accent)}.steps h3{margin:0 0 5px;font-size:23px;font-weight:500}.steps p{margin:0;font-size:16px}.tray-grid{align-items:center}.tray-shot{max-width:620px}.shortcuts{margin-top:35px;font:12px Arial,sans-serif!important}kbd{border:1px solid var(--line);padding:4px 7px;font:700 11px Arial,sans-serif}
.download{border-top:0;padding-top:80px}.download-box{background:var(--dark);color:var(--paper);text-align:center;padding:90px 30px}.download-box h2{max-width:760px;margin:16px auto 18px}.download-box p{color:#c0b8ae;font-size:18px}.download-box small{font:11px Arial,sans-serif;color:#a9a096}.download-box .button.primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}.download-box .button.secondary{border-color:#8c847a;color:var(--paper)}
footer{max-width:1180px;margin:auto;padding:35px 30px 50px;display:flex;justify-content:space-between;gap:20px;font:12px Arial,sans-serif;color:var(--muted)}
@media(max-width:800px){.nav-links{display:none}.hero-copy{margin-top:60px}.section{padding-top:85px;padding-bottom:85px}.intro,.contrast-grid,.technical-grid,.tray-grid{grid-template-columns:1fr;gap:35px}.compare-grid{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}.swatches{grid-template-columns:repeat(2,1fr)}.preset-heading{display:block}.preset-heading p{margin-top:25px}footer{display:block}footer div+div{margin-top:10px}}

/* Before / after comparison */
.before-after{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#D9DED6;
  box-shadow:0 25px 60px rgba(40,32,24,.16);
  user-select:none;
}
.before-after > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.before-after .after-image{
  clip-path:inset(0 0 0 50%);
}
.before-after .comparison-handle{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(33,30,26,.16);
  pointer-events:none;
}
.before-after .comparison-knob{
  position:absolute;
  left:50%;
  top:50%;
  width:48px;
  height:48px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(33,30,26,.22);
  border-radius:50%;
  background:var(--paper);
  box-shadow:0 5px 18px rgba(33,30,26,.18);
  display:grid;
  place-items:center;
  color:var(--ink);
  font:700 18px/1 Arial,sans-serif;
  pointer-events:none;
}
.before-after .comparison-knob::before{
  content:"‹  ›";
  letter-spacing:-2px;
  transform:translateY(-1px);
}
.before-after input[type="range"]{
  position:absolute;
  inset:-1px;
  width:calc(100% + 2px);
  height:calc(100% + 2px);
  margin:0;
  opacity:0;
  cursor:ew-resize;
}
.before-after .comparison-label{
  position:absolute;
  bottom:14px;
  padding:8px 11px;
  background:rgba(33,30,26,.82);
  color:var(--paper);
  font:700 10px/1 Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  pointer-events:none;
}
.before-after .label-before{left:14px}
.before-after .label-after{right:14px}
@media(max-width:800px){
  .before-after .comparison-knob{width:42px;height:42px}
}