:root { --bg:#f3f1eb; --surface:#ebe9e2; --paper:#fbfaf6; --ink:#202321; --muted:#747872; --line:rgba(32,35,33,.16); --orange:#ed704c; --teal:#2d6b6c; --blue:#c9dcdd; --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif; --sans:"Avenir Next","Helvetica Neue",Arial,sans-serif; --gutter:clamp(20px,5vw,76px); --max:1380px; }
* { box-sizing:border-box; }
:focus-visible { outline:3px solid var(--teal); outline-offset:4px; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:var(--sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; } button,input,select { font:inherit; } button { cursor:pointer; } svg { display:block; }
.site-header { height:76px; padding:0 var(--gutter); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:11px; width:max-content; font-size:12px; font-weight:700; letter-spacing:.12em; }
.brand-mark { width:28px; height:28px; display:grid; place-items:center; border:1.5px solid var(--ink); border-radius:50%; }
.brand-mark span { width:9px; height:9px; border-radius:50%; background:var(--orange); }
.nav { display:flex; gap:34px; color:var(--muted); font-size:12px; } .nav a:hover { color:var(--ink); }
.header-tools { justify-self:end; display:flex; align-items:center; gap:16px; } .privacy-pill { color:var(--teal); font-size:11px; letter-spacing:.04em; } .privacy-pill i,.tool-status i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#64a49b; }
.language-control select { min-height:28px; padding:0 5px; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:10px; letter-spacing:.06em; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero { max-width:var(--max); min-height:620px; margin:auto; padding:clamp(70px,10vw,142px) var(--gutter) 110px; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:60px; }
.eyebrow,.section-kicker { margin:0 0 25px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; } .eyebrow > span:first-child { display:inline-block; width:7px; height:7px; margin-right:8px; background:var(--orange); border-radius:50%; }
h1,h2,h3,p { margin-top:0; } h1 { max-width:790px; margin-bottom:34px; font-size:clamp(66px,9.6vw,136px); font-weight:500; line-height:.83; letter-spacing:-.055em; } h1 em,h2 em { font-family:var(--serif); font-weight:400; letter-spacing:-.04em; }
.lede { max-width:415px; margin-bottom:30px; color:var(--muted); font-size:16px; line-height:1.7; } .hero-link { display:inline-flex; gap:13px; align-items:center; min-height:42px; border-bottom:1px solid var(--ink); font-size:13px; } .hero-link span { color:var(--orange); font-size:19px; }
.hero-art { position:relative; min-height:360px; display:grid; place-items:center; } .art-grid { position:absolute; width:88%; height:88%; border:1px solid var(--line); background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:36px 36px; opacity:.55; transform:rotate(-8deg); }
.art-card { position:absolute; width:240px; height:190px; padding:20px; display:flex; flex-direction:column; border:1px solid var(--ink); background:var(--paper); box-shadow:12px 13px 0 var(--ink); } .art-card span { font-size:11px; letter-spacing:.1em; } .art-card b { width:100%; height:56px; margin-top:20px; background:var(--blue); } .art-card i { width:52%; height:7px; margin-top:12px; background:var(--ink); opacity:.7; } .art-card strong { margin-top:auto; color:var(--orange); font-size:11px; letter-spacing:.15em; } .art-card-back { margin:75px 0 0 70px; transform:rotate(10deg); background:#e0e9e6; box-shadow:9px 10px 0 var(--teal); } .art-card-front { margin:-55px 70px 0 0; transform:rotate(-7deg); } .art-stamp { position:absolute; right:5%; bottom:3%; width:55px; height:55px; display:grid; place-items:center; color:var(--orange); border:1px solid var(--orange); border-radius:50%; font-size:10px; font-weight:700; line-height:.9; text-align:center; transform:rotate(13deg); } .art-stamp small { font-size:8px; }
.compressor-section { padding:105px var(--gutter) 130px; background:var(--surface); border-top:1px solid var(--line); } .section-intro,.tool-shell,.why-heading,.principle-grid,.faq-section { max-width:var(--max); margin-left:auto; margin-right:auto; } .section-intro { margin-bottom:54px; } h2 { margin-bottom:0; font-size:clamp(44px,5.7vw,76px); font-weight:500; line-height:.9; letter-spacing:-.05em; } .tool-shell { overflow:hidden; background:var(--paper); border:1px solid var(--ink); }
.tool-topline { min-height:50px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.13em; } .tool-status { letter-spacing:.04em; font-weight:500; text-transform:none; }
.tool-grid { display:grid; grid-template-columns:minmax(310px,.8fr) 1.2fr; min-height:565px; } .controls { padding:40px; border-right:1px solid var(--line); } .control-block { margin-bottom:31px; } .control-label { display:block; margin-bottom:12px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.target-options { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } .target-options button { min-height:39px; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:12px; } .target-options button:hover,.target-options button.active { border-color:var(--ink); background:var(--ink); color:var(--paper); } .custom-target { display:flex; align-items:center; gap:9px; margin-top:9px; color:var(--muted); font-size:12px; } .custom-target input { width:100px; padding:8px 9px; border:1px solid var(--line); background:var(--paper); color:var(--ink); } [hidden] { display:none !important; }
.format-block select { width:100%; min-height:43px; padding:0 11px; border:1px solid var(--line); background:var(--paper); color:var(--ink); }
.dropzone { min-height:154px; padding:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed rgba(32,35,33,.4); background:#f5f3ee; text-align:center; cursor:pointer; } .dropzone:hover,.dropzone.dragover { border-color:var(--orange); background:#fff7f2; } .dropzone input { position:absolute; width:1px; height:1px; opacity:0; } .drop-icon { width:34px; height:34px; margin-bottom:11px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; } .drop-icon svg { width:17px; fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .dropzone strong { font-size:13px; font-weight:600; } .dropzone > span:not(.drop-icon) { color:var(--muted); font-size:12px; } .dropzone small { margin-top:11px; color:var(--muted); font-size:10px; }
.sample-button { width:100%; margin-top:10px; padding:0; border:0; background:transparent; color:var(--teal); font-size:11px; text-align:center; } .sample-button:hover { color:var(--orange); }
.primary-action { width:100%; min-height:52px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border:0; background:var(--orange); color:#fff; font-size:13px; font-weight:600; } .primary-action:hover:not(:disabled) { background:#d95e3c; } .primary-action:disabled { cursor:not-allowed; opacity:.35; } .primary-action > span:last-child { font-size:21px; } .reset-action { width:100%; margin-top:12px; border:0; background:transparent; color:var(--muted); font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.preview-panel { padding:29px; display:flex; flex-direction:column; background:#f0eee8; } .preview-head,.results-heading { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:11px; } .preview-head span:first-child { color:var(--ink); font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .preview-stage { min-height:390px; margin-top:16px; display:grid; place-items:center; border:1px solid var(--line); background:#e8e6df; overflow:hidden; } .preview-stage img { max-width:100%; max-height:390px; object-fit:contain; } .preview-empty { display:flex; flex-direction:column; align-items:center; color:var(--muted); text-align:center; } .empty-cross { width:42px; height:42px; margin-bottom:14px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--orange); font-family:var(--serif); font-size:24px; } .preview-empty strong { color:var(--ink); font-size:13px; font-weight:600; } .preview-empty small { margin-top:5px; font-size:11px; }
.preview-metrics { min-height:76px; margin-top:17px; display:grid; grid-template-columns:1fr 30px 1fr; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .preview-metrics > div:not(.metric-arrow) { display:flex; flex-direction:column; gap:2px; } .preview-metrics > div:last-child { text-align:right; align-items:flex-end; } .preview-metrics span,.preview-metrics small { color:var(--muted); font-size:10px; } .preview-metrics strong { font-size:18px; font-weight:600; } .metric-arrow { color:var(--orange); text-align:center; font-size:20px; }
.result-note { min-height:43px; margin-top:15px; padding:0 12px; display:flex; align-items:center; gap:9px; background:#dfeae4; color:#236055; font-size:12px; } .check-icon { width:20px; height:20px; display:grid; place-items:center; background:#4e9882; color:#fff; border-radius:50%; font-size:12px; }
.result-note[data-state="error"] { color:#8a3521; background:#f7e3d9; } .result-note[data-state="error"] .check-icon { background:#a14028; font-size:0; } .result-note[data-state="error"] .check-icon::after { content:"!"; font-size:12px; }
.compare-controls { display:flex; gap:6px; margin-top:15px; } .compare-controls button { padding:5px 11px; background:var(--paper); color:var(--ink); border:1px solid var(--line); font-size:11px; } .compare-controls button:disabled { opacity:.4; cursor:default; }
.size-guidance { margin:12px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.result-copy { min-width:0; } .result-row { grid-template-columns:44px minmax(0,1fr) auto auto; }
html:not([lang="en"]) h1 { font-size:clamp(54px,7vw,94px); line-height:1.15; letter-spacing:-.04em; } html:not([lang="en"]) h2 { line-height:1.2; }
.preview-metrics strong { font-variant-numeric:tabular-nums; }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
.results { padding:27px 40px 35px; border-top:1px solid var(--line); } .results-heading { margin-bottom:13px; } .results-heading > span { color:var(--ink); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .results-heading button { border:0; background:transparent; color:var(--orange); font-size:12px; } .result-row { min-height:62px; display:grid; grid-template-columns:52px 1fr auto auto; gap:14px; align-items:center; border-top:1px solid var(--line); } .result-thumb { width:44px; height:44px; object-fit:cover; background:#e2e0d9; } .result-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; } .result-detail { color:var(--muted); font-size:11px; } .result-download { border:0; background:transparent; color:var(--orange); font-size:12px; }
.why-section { padding:120px var(--gutter) 130px; } .why-heading { margin-bottom:72px; } .principle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,7vw,110px); } .principle-grid article { padding-top:21px; border-top:1px solid var(--line); } .principle-grid article > span { color:var(--orange); font-size:11px; } .principle-grid h3 { margin:72px 0 20px; font-family:var(--serif); font-size:clamp(32px,3.3vw,52px); font-weight:400; line-height:.95; } .principle-grid p { max-width:255px; margin-bottom:0; color:var(--muted); font-size:13px; line-height:1.7; }
.faq-section { padding:0 var(--gutter) 130px; display:grid; grid-template-columns:1fr 1fr; gap:70px; } .faq-list { border-top:1px solid var(--line); } details { border-bottom:1px solid var(--line); } summary { padding:22px 0; list-style:none; cursor:pointer; font-size:14px; } summary::-webkit-details-marker { display:none; } summary::after { content:"+"; float:right; color:var(--orange); font-size:20px; line-height:1; } details[open] summary::after { content:"-"; } details p { max-width:500px; margin:-5px 0 23px; color:var(--muted); font-size:13px; line-height:1.7; }
.site-footer { min-height:100px; padding:0 var(--gutter); display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); color:var(--muted); font-size:10px; letter-spacing:.08em; }
@media (max-width:800px) { .site-header { grid-template-columns:1fr auto; height:66px; } .nav { display:none; } .hero { min-height:auto; padding-top:88px; padding-bottom:90px; grid-template-columns:1fr; gap:55px; } h1 { font-size:clamp(62px,18vw,104px); } .hero-art { min-height:280px; } .art-card { width:200px; height:155px; } .compressor-section { padding-top:80px; } .tool-grid { grid-template-columns:1fr; } .controls { border-right:0; border-bottom:1px solid var(--line); } .preview-panel { min-height:500px; } .preview-stage { min-height:320px; } .principle-grid,.faq-section { grid-template-columns:1fr; } .principle-grid { gap:48px; } .principle-grid h3 { margin-top:42px; } .faq-section { gap:48px; } .site-footer { min-height:140px; flex-wrap:wrap; align-content:center; gap:8px 20px; } .site-footer span:nth-child(2) { order:3; flex-basis:100%; } }
@media (max-width:480px) { .privacy-pill { font-size:0; } .privacy-pill i { margin:0; } .controls,.preview-panel { padding:24px; } .tool-topline { padding:0 20px; } .target-options { grid-template-columns:repeat(2,1fr); } .preview-stage { min-height:250px; } .result-row { grid-template-columns:44px 1fr auto; gap:10px; } .result-detail { grid-column:2; } .result-download { grid-column:3; grid-row:1 / 3; } }
.footer-languages { padding:0 var(--gutter) 24px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; font-size:11px; }
@media (max-width:480px) { .privacy-pill { display:none; } .hero-art { display:none; } html:not([lang="en"]) h1 { font-size:clamp(46px,11.5vw,70px); } .result-row { grid-template-columns:36px minmax(0,1fr) auto; } .result-row > .result-detail { display:none; } .result-download { grid-row:auto; } .preview-head { gap:10px; flex-wrap:wrap; } }