/* Unwrap's site: warm white paper with one terracotta accent. Light only. */
:root {
  color-scheme: light;
  --bg: #FAF6EF; --card: #FFFCF7; --well: #F3EDE3; --tint: #F4ECDF;
  --ink: #231F1A; --ink2: #5C5449; --ink3: #74695D;
  --line: rgba(70, 45, 20, .10); --line2: rgba(70, 45, 20, .17);
  --accent: #B5522B; --accent-deep: #933F1D; --accent-soft: #F6E4D6; --on-accent: #FFFFFF;
  --fixed: #2E7A55; --broken: #A0661C;
  --term: #1C1915; --term-bar: #24201B; --term-ink: #EDE6DC; --term-dim: #8F857A;
  --btn-a: #2E2822; --btn-b: #1A1612; --btn-ink: #FFFCF7;
  --shadow: 0 1px 2px rgba(60, 35, 15, .05), 0 12px 32px -12px rgba(60, 35, 15, .16);
  --shadow-lg: 0 2px 6px rgba(60, 35, 15, .06), 0 40px 80px -30px rgba(80, 45, 20, .30);
  --glow: rgba(214, 120, 74, .17);
  --sel: rgba(232, 149, 107, .26);
  --r: 18px; --ease: cubic-bezier(.2, .8, .2, 1);
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; letter-spacing: -.025em; line-height: 1.15; font-weight: 650; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
code, kbd, pre { font-family: var(--mono); }
code { font-size: .88em; background: var(--well); border: 1px solid var(--line); border-radius: 6px; padding: .05em .35em; }
kbd { font-size: .82em; background: var(--card); border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 6px; padding: .05em .4em; white-space: nowrap; color: var(--ink); }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }


/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 20px; border-radius: 999px; font: 600 15px/1 var(--sans); border: 1px solid transparent; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s; white-space: nowrap; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn .ic { width: 17px; height: 17px; }
.btn-primary { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); color: var(--btn-ink); border-color: rgba(255, 255, 255, .08); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 8px 20px -8px rgba(40, 25, 10, .5); }
.btn-primary .ic { fill: currentColor; stroke: none; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13.5px; gap: 7px; }
.btn-sm .ic { width: 14px; height: 14px; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }

.chip { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px 0 18px; border-radius: 999px; background: var(--card); border: 1px solid var(--line2); color: var(--ink); cursor: pointer; font: inherit; box-shadow: var(--shadow); max-width: 100%; transition: border-color .2s; }
.chip:hover { border-color: var(--accent); }
.chip code { background: none; border: 0; padding: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip .dim { color: var(--ink3); }
.chip-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--well); color: var(--ink2); flex: none; }
.chip-ic .ic { width: 16px; height: 16px; grid-area: 1 / 1; transition: opacity .2s, transform .2s var(--ease); }
.chip .i-done { opacity: 0; transform: scale(.6); color: var(--fixed); }
.chip.copied .i-copy { opacity: 0; transform: scale(.6); }
.chip.copied .i-done { opacity: 1; transform: none; }

/* Nav */
.nav { position: sticky; top: 12px; z-index: 50; padding: 0 16px; }
.nav-in { max-width: 1080px; margin: 0 auto; height: 56px; display: flex; align-items: center; gap: 20px; padding: 0 10px 0 16px; border-radius: 999px; background: color-mix(in srgb, var(--card) 78%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; font-size: 16.5px; letter-spacing: -.02em; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { border-radius: 7px; }
.nav-links { display: flex; gap: 2px; margin-right: auto; }
.nav-links a { color: var(--ink2); font-size: 14px; font-weight: 500; padding: 7px 11px; border-radius: 999px; }
.nav-links a:hover { color: var(--ink); background: var(--well); text-decoration: none; }
.nav-end { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--ink2); cursor: pointer; }
.icon-btn:hover { background: var(--well); color: var(--ink); }
.icon-btn .ic { width: 18px; height: 18px; }
a.icon-btn .ic { fill: currentColor; stroke: none; }

/* Hero */
.hero { position: relative; padding: 88px 0 40px; text-align: center; }
.hero-glow { position: absolute; inset: -120px 0 auto; height: 760px; pointer-events: none; z-index: -1;
  background: radial-gradient(50% 55% at 50% 30%, var(--glow), transparent 70%);
  mask: radial-gradient(70% 70% at 50% 35%, #000 40%, transparent 100%); }
.hero-glow::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--line2) 1px, transparent 1.4px); background-size: 22px 22px; mask: radial-gradient(55% 60% at 50% 35%, #000 10%, transparent 80%); opacity: .7; }
.hero h1 { font-size: clamp(40px, 6.6vw, 78px); letter-spacing: -.045em; line-height: 1.02; font-weight: 680; }
.grad { background: linear-gradient(100deg, var(--accent-deep), var(--accent) 55%, var(--accent-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { max-width: 640px; margin: 22px auto 0; font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.55; color: var(--ink2); }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 34px; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; list-style: none; padding: 0; margin: 26px 0 0; color: var(--ink3); font-size: 14px; }
.trust li { display: inline-flex; align-items: center; gap: 22px; }
.trust li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--ink3); margin-left: -12px; margin-right: -10px; opacity: .7; }
.trust a { color: inherit; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }

/* Hero demo: a terminal copy becoming a clean paste. One 9 s loop, all CSS. */
.demo { position: relative; display: grid; grid-template-columns: 1.08fr 1fr; gap: 22px; margin-top: 64px; text-align: left; }
.pane { position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; }
.bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.bar i:nth-child(2) { background: #FEBC2E; } .bar i:nth-child(3) { background: #28C840; }
.bar span { margin: 0 auto; transform: translateX(-24px); font-size: 12.5px; font-weight: 500; }
.term { background: var(--term); color: var(--term-ink); border-color: rgba(255, 255, 255, .08); }
.term .bar { background: var(--term-bar); color: var(--term-dim); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.term-body { position: relative; margin: 0; padding: 18px 20px 26px; font-size: clamp(11.5px, 1.02vw, 13px); line-height: 1.75; white-space: pre; overflow: hidden; }
.term-body .g { color: #E0AE5C; }
.term-body .nl, .term-body .pad { color: #E0AE5C; opacity: .75; }
.term-body .pad { letter-spacing: -.5px; }
.sel { position: absolute; left: 14px; top: 15px; height: calc(7 * 1.75em + 6px); width: calc(100% - 28px); background: var(--sel); border-radius: 4px; transform-origin: left top; animation: sel 9s var(--ease) infinite; }
.keycap { position: absolute; right: 18px; bottom: 16px; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 9px; background: #2E2822; color: #FFF8EE; border: 1px solid rgba(255, 240, 220, .16); border-bottom-width: 3px; animation: key 9s var(--ease) infinite; }
.editor { background: var(--card); }
.editor .bar { background: var(--well); color: var(--ink3); border-bottom: 1px solid var(--line); }
.ed-body { padding: 20px 22px 26px; font-family: var(--mono); font-size: clamp(11.5px, 1.02vw, 13px); line-height: 1.75; }
.ed-body .ln { margin: 0 0 12px; animation: line 9s var(--ease) infinite; }
.ed-body .li { margin-bottom: 2px; }
.ed-body .ln:nth-child(2) { animation-name: line2; }
.ed-body .ln:nth-child(3) { animation-name: line3; }
.ed-body .ln:nth-child(4) { animation-name: line4; }
.mk { color: var(--fixed); font-weight: 600; }
.hud { position: absolute; z-index: 3; left: 50%; top: -22px; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--line2); box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 13.5px; color: var(--ink2); white-space: nowrap; animation: hud 9s var(--ease) infinite; }
.hud img { border-radius: 6px; }
.hud b { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 999px; padding: 2px 9px 2px 7px; font-size: 12.5px; }
.hud b .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.demo-key { margin-top: 18px; font-size: 13px; color: var(--ink3); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.k-bad, .k-good { font-family: var(--mono); font-weight: 600; margin-right: 4px; }
.k-bad { color: var(--broken); } .k-good { color: var(--fixed); }

@keyframes sel { 0%, 4% { transform: scaleX(0); opacity: 1; } 16% { transform: scaleX(1); opacity: 1; } 86% { opacity: 1; transform: scaleX(1); } 94%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes key { 0%, 17% { opacity: 0; transform: translateY(8px) scale(.9); } 20% { opacity: 1; transform: translateY(0) scale(1.08); } 24% { transform: scale(1); } 34% { opacity: 1; } 40%, 100% { opacity: 0; transform: scale(1); } }
@keyframes hud { 0%, 24% { opacity: 0; transform: translate(-50%, -10px) scale(.96); } 30%, 88% { opacity: 1; transform: translate(-50%, 0) scale(1); } 95%, 100% { opacity: 0; transform: translate(-50%, -6px) scale(.98); } }
@keyframes line { 0%, 30% { opacity: 0; transform: translateY(6px); } 36%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes line2 { 0%, 34% { opacity: 0; transform: translateY(6px); } 40%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes line3 { 0%, 38% { opacity: 0; transform: translateY(6px); } 44%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes line4 { 0%, 42% { opacity: 0; transform: translateY(6px); } 48%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sel, .keycap, .hud, .ed-body .ln { animation: none !important; }
  .keycap { opacity: 0; }
  .hud { transform: translate(-50%, 0); }
  html { scroll-behavior: auto; }
}

/* Sections */
.sec { padding: 112px 0; }
.sec-tint { background: var(--tint); border-block: 1px solid var(--line); }
.sec h2 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.035em; max-width: 860px; }
.sec .sub { margin-top: 14px; max-width: 620px; font-size: 18px; color: var(--ink2); }
.small-print { margin-top: 26px; font-size: 14px; color: var(--ink3); }
.cards { display: grid; gap: 18px; margin-top: 48px; }
.three { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); }
.card h3 { display: flex; align-items: center; gap: 9px; font-size: 18px; margin-top: 20px; }
.card h3 .ic { color: var(--accent); }
.card p { margin-top: 8px; color: var(--ink2); font-size: 15px; }
.mini { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--term); color: var(--term-ink); font: 12.5px/1.6 var(--mono); white-space: pre; overflow: hidden; }
.mini em { font-style: normal; color: #E0AE5C; }
.mini-wrap span::after { content: "⏎"; color: #E0AE5C; opacity: .8; margin-left: 4px; }
.mini-wrap span:last-child::after { content: none; }
.mini-lost em { color: var(--term-dim); }

.steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.steps li { position: relative; padding: 26px 22px 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 650; font-size: 15px; }
.steps h3 { font-size: 19px; margin-top: 18px; }
.steps p { margin-top: 8px; color: var(--ink2); font-size: 15px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 10px; color: var(--ink2); font-size: 15.5px; }
.ticks .ic { color: var(--fixed); margin-top: 3px; stroke-width: 2.4; }
.shot { margin: 0; }
.shot img { border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.shot-menu { justify-self: center; max-width: 380px; }
.shot-menu img { border-radius: 20px; }
.shot-wide { margin-top: 72px; }
.shot figcaption { margin-top: 14px; text-align: center; color: var(--ink3); font-size: 14px; }
.shot-export { margin: 56px auto 0; max-width: 760px; }
.shot-export img { border-radius: 22px; border: 0; box-shadow: 0 30px 60px -36px rgba(70, 40, 15, .45); }

.works-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; margin-top: 44px; }
.wk { padding: 26px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.wk-best { background: linear-gradient(160deg, #FFF8F1, var(--card) 55%); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.wk-wide { grid-column: 1 / -1; }
.wk-head { display: flex; gap: 14px; align-items: flex-start; }
.wk-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.wk-ic .ic { width: 19px; height: 19px; stroke-width: 2.2; }
.wk h3 { font-size: 19px; letter-spacing: -.02em; }
.wk-head p { margin-top: 5px; color: var(--ink2); font-size: 15px; max-width: 560px; }
.apps { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.apps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--well) 70%, transparent); border: 1px solid var(--line); }
.app-ic { position: relative; flex: none; width: 48px; height: 48px; }
.app-ic img { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(60, 35, 15, .18)); }
.app-ic .mono { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 23%; background: linear-gradient(180deg, #3A332C, #1E1A16); color: #FFF8EE; font: 600 17px/1 var(--mono); box-shadow: 0 2px 4px rgba(60, 35, 15, .2), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.app-ic .badge { position: absolute; right: -4px; bottom: -3px; padding: 1px 4px; border-radius: 6px; background: #1E1A16; color: #FFF8EE; font: 600 9.5px/1.3 var(--mono); font-style: normal; border: 1.5px solid var(--card); }
.app-tx { display: grid; min-width: 0; }
.app-tx b { font-size: 15px; font-weight: 600; }
.app-tx small { font-size: 13px; color: var(--ink3); }
.tiles-wrap { display: grid; grid-template-columns: 2.2fr 1fr; gap: 28px; margin-top: 24px; }
.app-tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 14px 6px; }
.app-tiles li { display: grid; justify-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink2); text-align: center; }
.app-ic.sm { width: 44px; height: 44px; }
.app-ic.sm .mono { font-size: 16px; }

.tiles { grid-template-columns: repeat(3, 1fr); }
.tile { padding: 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile > .ic { width: 22px; height: 22px; color: var(--accent); }
.tile h3 { font-size: 17px; margin-top: 16px; }
.tile p { margin-top: 6px; font-size: 15px; color: var(--ink2); }

.privacy-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.privacy-list li { display: flex; gap: 16px; padding: 18px 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.privacy-list .ic { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.privacy-list h3 { font-size: 16px; letter-spacing: -.01em; }
.privacy-list p { margin-top: 3px; color: var(--ink2); font-size: 14.5px; }

.faq { margin-top: 36px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 2px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; color: var(--ink3); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2px 22px; color: var(--ink2); max-width: 640px; }

.final { text-align: center; padding-bottom: 128px; }
.final-in img { margin: 0 auto 22px; filter: drop-shadow(0 14px 22px rgba(60, 35, 15, .28)); }
.final h2 { margin: 0 auto; }

/* Inner pages */
.page { padding: 72px 24px 120px; }
.page h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -.04em; }
.page .lede { margin: 14px 0 0; }
.page h2 { font-size: 22px; margin-top: 44px; }
.page p, .page li { color: var(--ink2); }
.page p { margin-top: 12px; }
.page ul { padding-left: 20px; margin: 12px 0 0; display: grid; gap: 8px; }
.page b { color: var(--ink); }
.center { text-align: center; }
.center .lede { margin: 14px auto 0; }
.release { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line); }
.release h2 { margin-top: 0; }
.release h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-top: 22px; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 56px 0 36px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; }
.foot-brand p { margin-top: 12px; max-width: 300px; color: var(--ink2); }
.foot-brand small { display: block; margin-top: 10px; color: var(--ink3); }
.foot h4 { margin: 4px 0 12px; font-size: 13px; color: var(--ink); }
.foot-grid > div:not(.foot-brand) a { display: block; color: var(--ink2); padding: 3px 0; }
.foot-grid a:hover { color: var(--ink); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink3); font-size: 13px; }

/* Export showcase */
a.tile { display: block; color: var(--ink); }
a.tile:hover { text-decoration: none; }
.xp { display: grid; grid-template-columns: 300px 1fr; gap: 28px; margin-top: 44px; align-items: start; }
.xp-controls { display: grid; gap: 22px; padding: 22px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.xp-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink3); margin-bottom: 9px; }
.seg { display: flex; padding: 3px; border-radius: 11px; background: var(--well); border: 1px solid var(--line); }
.seg button { flex: 1; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--ink2); font: 500 13.5px/1 var(--sans); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(60, 35, 15, .12), 0 0 0 1px var(--line); }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatches button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); background: linear-gradient(135deg, var(--a), var(--b)); cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s; }
.swatches button:hover { transform: scale(1.08); }
.swatches button.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.swatches .sw-none { background: repeating-conic-gradient(#E6E0D6 0% 25%, #FFFCF7 0% 50%) 50% / 10px 10px; }
.muted { opacity: .4; pointer-events: none; }
.formats { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.formats li { padding: 4px 10px; border-radius: 999px; background: var(--well); border: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--ink2); }
.xp-preview { min-width: 0; }
.xp-stage { display: grid; place-items: center; min-height: 440px; padding: 48px; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; transition: background .3s; }
.xp-stage.xp-clear { background: repeating-conic-gradient(#EFE9DF 0% 25%, #FAF6EF 0% 50%) 50% / 18px 18px !important; }
.xp-surface { width: 100%; max-width: 640px; border: .5px solid; overflow: hidden; transition: background .25s, color .25s; }
.xp-window .xp-surface { border-radius: 12px; box-shadow: 0 16px 28px rgba(0, 0, 0, .32); }
.xp-card .xp-surface { border-radius: 18px; padding: 26px; box-shadow: 0 12px 24px rgba(0, 0, 0, .26); }
.xp-plain .xp-surface { border-radius: 4px; padding: 28px; box-shadow: 0 2px 10px rgba(0, 0, 0, .10); }
.xp-clear.xp-window .xp-surface { box-shadow: 0 16px 28px rgba(0, 0, 0, .18); }
.xp-bar { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 1px solid; }
.xp-bar i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); }
.xp-bar i:nth-child(2) { background: #FEBC2E; } .xp-bar i:nth-child(3) { background: #28C840; }
.xp-bar span { position: absolute; left: 70px; right: 70px; text-align: center; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-cardhead { font-size: 12.5px; font-weight: 600; margin-bottom: 14px; white-space: pre; }
.xp-window .xp-body { padding: 20px 24px 24px; }
.xp-code { margin: 0; font: 13.5px/1.75 var(--mono); white-space: pre; overflow-x: auto; }
.xp-row { display: block; }
.xp-diff .xp-row { padding: 0 6px; border-radius: 3px; }
.xp-prose { margin: 0; font-size: 15px; line-height: 1.7; }
.xp-prose code { font-size: 13px; border: 0; color: inherit; }
.xp-prose b { font-weight: 650; }
.xp-note { margin-top: 12px; font-size: 13.5px; color: var(--ink3); text-align: center; }

/* Coming soon */
.soon-icon { margin: 0 auto 26px; filter: drop-shadow(0 14px 22px rgba(60, 35, 15, .28)); }
.chip-link { height: 44px; padding: 0 20px; font-weight: 600; font-size: 15px; color: var(--ink); }
.chip-link:hover { text-decoration: none; }

/* Free tools */
.crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink3); margin-bottom: 14px; }
.crumb::before { content: "←"; }
.tool-page .lede { max-width: 680px; }
.tool-shell { margin-top: 36px; }
.tool { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tool-pane { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line); background: var(--well); }
.pane-head > span { font-size: 13px; font-weight: 600; color: var(--ink2); }
.acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.acts button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--ink); font: 500 13px/1 var(--sans); cursor: pointer; transition: background .15s, border-color .15s; }
.acts button:hover { border-color: var(--accent); }
.acts button .ic { width: 14px; height: 14px; }
.acts button.primary { background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); color: var(--btn-ink); border-color: transparent; }
.acts button.done { background: var(--fixed); color: #fff; }
.tool textarea, .paste-zone { flex: 1; width: 100%; min-height: 380px; margin: 0; padding: 16px; border: 0; resize: vertical; background: transparent; color: var(--ink); font: 13px/1.65 var(--mono); outline: none; white-space: pre; overflow: auto; tab-size: 4; }
.tool textarea[data-output] { white-space: pre-wrap; }
.tool textarea::placeholder { color: var(--ink3); }
.paste-zone { font-family: var(--sans); font-size: 14px; white-space: normal; cursor: text; min-height: 300px; }
.paste-zone:empty::before { content: "Click here and press ⌘V (Ctrl+V) to paste formatted text"; color: var(--ink3); }
.paste-note { color: var(--ink2); font-size: 14px; }
.source { border-top: 1px solid var(--line); }
.source summary { cursor: pointer; padding: 10px 16px; font-size: 13px; color: var(--ink2); }
.source textarea { min-height: 120px; border-top: 1px solid var(--line); }
.tool-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 14px; font-size: 14px; }
.tool-stats { color: var(--ink2); font-weight: 500; }
.tool-private { display: inline-flex; align-items: center; gap: 6px; color: var(--ink3); }
.tool-private .ic { width: 14px; height: 14px; }
.tool-preview table { margin-top: 24px; border-collapse: collapse; width: 100%; font-size: 14.5px; background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.tool-preview th, .tool-preview td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tool-preview th { background: var(--well); font-weight: 600; }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.tool-card { display: flex; flex-direction: column; padding: 22px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); color: var(--ink); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.tool-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line2); }
.tool-card h2 { font-size: 20px; margin-top: 20px; }
.tool-card p { margin-top: 8px; color: var(--ink2); font-size: 15px; flex: 1; }
.tool-mini { display: grid; gap: 1px; padding: 14px 16px; border-radius: 12px; background: var(--term); color: var(--term-ink); font: 12px/1.6 var(--mono); white-space: pre; overflow: hidden; }
.tool-mini em { font-style: normal; color: #E0AE5C; }
.tool-mini b { font-weight: 500; color: #9FD8B7; }
.tool-mini span + b { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255, 240, 220, .14); }
.tool-mini.rich span { font-family: var(--sans); }
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--accent); }
.more .ic { width: 15px; height: 15px; transition: transform .2s var(--ease); }
a:hover .more .ic { transform: translateX(3px); }
.cta-box { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 56px; padding: 28px 30px; border-radius: 22px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.cta-box h2 { font-size: 21px; letter-spacing: -.02em; margin: 0; }
.cta-box p { margin-top: 6px; color: var(--ink2); font-size: 15px; max-width: 520px; }

/* Long-form text: tool explanations and blog posts */
.prose { padding-top: 64px; padding-bottom: 96px; }
.prose h2 { font-size: 26px; letter-spacing: -.03em; margin-top: 48px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 19px; margin-top: 30px; }
.prose p, .prose li { color: var(--ink2); font-size: 17px; line-height: 1.7; }
.prose p { margin-top: 14px; }
.prose ul, .prose ol { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.prose b, .prose strong { color: var(--ink); font-weight: 600; }
.prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; }
.prose pre { margin: 18px 0 0; padding: 16px 18px; border-radius: 14px; background: var(--term); color: var(--term-ink); font-size: 13px; line-height: 1.65; overflow-x: auto; }
.prose pre .a { color: #E0AE5C; }
.prose pre .g { color: #9FD8B7; }
.prose blockquote { margin: 18px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); }
.prose blockquote p { margin: 0; color: var(--ink); }
.prose figure { margin: 22px 0 0; }
.prose figcaption { margin-top: 8px; font-size: 14px; color: var(--ink3); }
.prose table { margin-top: 18px; border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink2); }
.prose th { color: var(--ink); font-weight: 600; }
.post-head { padding-top: 64px; }
.post-head + .prose { padding-top: 36px; }
.post-head h1 { font-size: clamp(34px, 5vw, 54px); letter-spacing: -.04em; line-height: 1.06; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; color: var(--ink3); font-size: 14px; }
.post-meta a { color: var(--ink2); }
.post-list { display: grid; gap: 14px; margin-top: 40px; }
.post-card { display: block; padding: 24px 26px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); color: var(--ink); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.post-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.post-card time { font-size: 13px; color: var(--ink3); }
.post-card h2 { font-size: 22px; letter-spacing: -.025em; margin-top: 6px; }
.post-card p { margin-top: 8px; color: var(--ink2); max-width: 720px; }
.post-card .more { margin-top: 12px; }
.related { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.related h2 { font-size: 15px; letter-spacing: 0; text-transform: none; margin: 0; color: var(--ink3); }
.related ul { list-style: none; padding: 0; }
.related li a { font-weight: 600; }

/* Staging banner, stamped in by the worker */
.preview-bar { position: relative; z-index: 60; text-align: center; padding: 7px 16px; font-size: 13px; background: var(--accent); color: var(--on-accent); }

/* Responsive */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .demo { grid-template-columns: 1fr; gap: 16px; }
  .hud { top: auto; bottom: calc(50% - 10px); }
  .three, .steps, .tiles { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .works-grid, .tiles-wrap { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .tool, .tool-grid, .xp { grid-template-columns: 1fr; }
  .tool textarea, .paste-zone { min-height: 240px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .nav { top: 8px; padding: 0 10px; }
  .nav-in { gap: 10px; padding: 0 6px 0 12px; }
  .hero { padding: 56px 0 24px; }
  .hero h1 br { display: none; }
  .btn-lg { width: 100%; justify-content: center; }
  .chip { width: 100%; height: 48px; }
  .chip code { font-size: 12px; }
  .trust { gap: 4px 16px; font-size: 13px; }
  .trust li + li::before { display: none; }
  .demo { margin-top: 44px; }
  .term-body, .ed-body { font-size: 10.5px; padding: 14px; }
  .term-body { overflow-x: auto; }
  .hud { font-size: 12px; padding: 6px 12px 6px 7px; }
  .hud span { display: none; }
  .sec { padding: 76px 0; }
  .three, .steps, .tiles { grid-template-columns: 1fr; }
  .mini { font-size: 11.5px; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .page { padding: 48px 16px 88px; }
  .cta-box { flex-direction: column; align-items: flex-start; padding: 22px; }
  .xp-stage { padding: 20px 14px; min-height: 0; }
  .xp-code { font-size: 11px; }
  .xp-prose { font-size: 14px; }
  .xp-card .xp-surface, .xp-plain .xp-surface { padding: 18px; }
  .cta-box .btn { width: 100%; justify-content: center; }
  .prose p, .prose li { font-size: 16px; }
  .pane-head { flex-wrap: wrap; }
}

/* Pricing and the thanks page */
.center .sub { margin-left: auto; margin-right: auto; }
.price-card { max-width: 460px; margin: 36px auto 0; padding: 30px 30px 26px; background: var(--card); border: 1px solid var(--line2); border-radius: 24px; box-shadow: var(--shadow-lg); text-align: left; }
.price { display: flex; align-items: baseline; gap: 12px; }
.price .amount { font-size: 56px; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.price .per { color: var(--ink3); font-size: 15px; }
.price-ticks { margin: 22px 0 26px; }
.price-card .btn { width: 100%; justify-content: center; }
.price-card .small-print { margin-top: 14px; text-align: center; }
.thanks-steps { max-width: 460px; margin: 30px auto 6px; padding-left: 22px; text-align: left; color: var(--ink2); font-size: 16px; display: grid; gap: 10px; }
.thanks-steps b { color: var(--ink); }
@media (max-width: 640px) { .price-card { padding: 24px 20px 20px; } .price .amount { font-size: 48px; } }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line2); }
.btn-ghost:hover { border-color: var(--accent); }
.price-download { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--well); border: 1px solid var(--line); }
.price-download b { display: block; font-size: 15px; color: var(--ink); }
.price-download span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink3); }
.price-card .price-download .btn { width: auto; flex: none; }
.cta-note { margin-top: 14px; font-size: 14px; color: var(--ink3); text-align: center; }
.btn-ghost .ic { fill: none; stroke: currentColor; }
@media (max-width: 400px) { .nav-download .ic { display: none; } .nav-download { padding: 0 12px; } }
.launch-tag { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.price .was { font-size: 22px; color: var(--ink3); text-decoration-thickness: 2px; }
.trust s { opacity: .75; }