/* OneTapCut website: the app's v11 look (matte, flat, 1 px lines), Paper light and Night dark. Fonts self-hosted (OFL). */
@font-face { font-family: "Rubik"; src: url("/fonts/Rubik-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("/fonts/Rubik-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #F7F3EE; --sf: #FFFFFF; --sf2: #EDE7DF; --ink: #1A1714; --mu: #5E574F; --ln: rgba(26, 23, 20, 0.12);
  --sig: #FF6A1A; --sig-dn: #E85A0C; --sig-ink: #1A1714; --ok: #0F8B8D;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14110F; --sf: #201C19; --sf2: #2E2925; --ink: #F7F3EE; --mu: #B3AA9F; --ln: rgba(247, 243, 238, 0.14);
          --sig: #FF7A2E; --sig-dn: #EE6A1E; --sig-ink: #14110F; --ok: #3CC4C6; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.55 "Atkinson Hyperlegible", system-ui, sans-serif; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sig-dn); }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
       max-width: 960px; margin: 0 auto; padding: 18px 20px; border-bottom: 1px solid var(--ln); }
.brand { display: flex; align-items: center; gap: 10px; font: 800 22px "Rubik", system-ui, sans-serif; letter-spacing: -0.02em; text-decoration: none; }
.brand img { border-radius: 9px; }
nav { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 700; font-size: 17px; }
nav a { text-decoration: none; }
nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

main { max-width: 960px; margin: 0 auto; padding: 0 20px 48px; }
.hero { text-align: center; padding: 56px 0 32px; }
.hero .icon { border-radius: 26px; }
h1 { font: 800 clamp(34px, 6vw, 56px)/1.08 "Rubik", system-ui, sans-serif; letter-spacing: -0.025em; margin: 20px 0 14px; }
.lead { font-size: 20px; color: var(--mu); max-width: 620px; margin: 0 auto 28px; }
.badge { display: inline-block; background: var(--sig); color: var(--sig-ink); font: 700 18px "Atkinson Hyperlegible", sans-serif;
         padding: 14px 26px; border-radius: 999px; }

.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 16px 0 24px; }
.card { background: var(--sf); border: 1px solid var(--ln); border-radius: 18px; padding: 22px; }
.card h2 { font: 800 22px/1.2 "Rubik", system-ui, sans-serif; margin: 0 0 8px; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--mu); }

.doc { max-width: 720px; margin: 0 auto; padding-top: 24px; }
.doc h1 { font-size: clamp(32px, 5vw, 44px); }
.doc h2 { font: 800 22px/1.25 "Rubik", system-ui, sans-serif; margin: 32px 0 8px; }
.doc .meta { color: var(--mu); margin-top: 0; }
.doc li { margin: 6px 0; }
.summary { background: var(--sf); border: 1px solid var(--ln); border-radius: 18px; padding: 4px 22px 10px; margin: 20px 0; }
.summary h2 { margin-top: 16px; }

.faq details { background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; padding: 14px 18px; margin: 10px 0; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin: 10px 0 2px; color: var(--mu); }

footer { max-width: 960px; margin: 0 auto; padding: 20px; border-top: 1px solid var(--ln); color: var(--mu); font-size: 16px; text-align: center; }