:root {
  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #f0f0f2;
  --surface-3: #e4e4e7;
  --ink: #171719;
  --muted: #6f7078;
  --muted-dark: #9b9ca4;
  --line: rgba(23, 23, 25, .12);
  --line-bright: rgba(23, 23, 25, .19);
  --red: #fe2c55;
  --red-dark: #e51f48;
  --violet: #817f8d;
  --cyan: #25f4ee;
  --yellow: #f4f4f5;
  --hero-orange-gradient: linear-gradient(135deg, #ff8b42 0%, #f56d30 48%, #e94d25 100%);
  --hero-orange-action: #ff7b3d;
  --display: "Manrope", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--display); }
body, button, input { font-family: var(--display); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.page-shell { min-height: 100vh; overflow: hidden; background: var(--bg); }
.site-header, main, .site-footer { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }
.site-header {
  position: relative;
  z-index: 5;
  width: min(1160px, calc(100% - 32px));
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 0 14px 0 22px;
  margin-top: 18px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 999px;
  color: #171717;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .10);
}
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.04em; }
.brand { flex: 0 0 auto; font-size: .98rem; }
.brand-text span { display: inline-block; margin-left: 5px; color: #667085; font-weight: 500; }
.brand-mark-image { display: block; width: 32px; height: 32px; flex: 0 0 auto; }
.brand-mark-image.small { width: 23px; height: 23px; }
.nav-links { display: flex; align-items: center; justify-content: flex-end; gap: 24px; color: #344054; font-size: .73rem; font-weight: 700; }
.nav-links a { transition: color .2s ease, transform .2s ease; }
.nav-links a:hover, .footer-links a:hover, .editorial-lede a:hover, .story-copy a:hover { color: var(--red-dark); }
.nav-links a:hover { transform: translateY(-1px); }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 17px; border: 0; border-radius: 999px; color: #fff; background: #171717; box-shadow: 0 5px 0 rgba(15, 23, 42, .12); }
.nav-cta:hover { color: #fff !important; background: #343434; }
.home-hero-stage {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  border-radius: 0 0 36px 36px;
  background: var(--hero-orange-gradient);
  box-shadow: 0 18px 60px -20px rgba(212, 69, 27, .48);
}
.home-hero-stage::before, .home-hero-stage::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.home-hero-stage::before { width: 470px; height: 470px; top: -250px; right: -85px; background: rgba(255, 255, 255, .13); filter: blur(52px); }
.home-hero-stage::after { width: 390px; height: 390px; bottom: -245px; left: -95px; background: rgba(112, 29, 11, .14); filter: blur(50px); }
.home-hero-stage .site-header {
  border-color: rgba(255, 255, 255, .48);
  color: #fff;
  background: rgba(255, 255, 255, .16);
  box-shadow: 0 12px 32px rgba(112, 29, 11, .16), inset 0 1px 0 rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.home-hero-stage .brand-text span { color: rgba(255, 255, 255, .78); }
.home-hero-stage .nav-links { color: rgba(255, 255, 255, .92); }
.home-hero-stage .nav-links a:hover { color: #fff; }
.home-hero-stage .nav-cta { color: #d95525; background: rgba(255, 255, 255, .96); box-shadow: 0 5px 0 rgba(112, 29, 11, .16); }
.home-hero-stage .nav-cta:hover { color: #c8481c !important; background: #fff; }
.skip-link { position: absolute; z-index: 10; top: 12px; left: 12px; padding: 10px 14px; border-radius: 7px; color: var(--bg); background: var(--cyan); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.mono-label { color: var(--muted-dark); font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); }
h1, h2 { letter-spacing: -.08em; }
h1 em, h2 em { color: var(--red); font-style: normal; }
.hero {
  position: relative;
  width: 100vw;
  min-height: 555px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 92px 20px 72px;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  text-align: center;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: var(--hero-orange-gradient);
}
.home-hero-stage .hero,
.tool-page-hero .hero { min-height: 724px; padding: 105px 20px 100px; }
.home-hero-stage .hero { width: 100%; margin-left: 0; border-bottom: 0; background: transparent; }
.home-hero-stage .hero::before, .home-hero-stage .hero::after { border-color: rgba(255, 255, 255, .2); }
.home-hero-stage .hero::after { border-color: rgba(112, 29, 11, .18); }
.hero::before, .hero::after { content: ""; position: absolute; border: 1px solid rgba(37, 244, 238, .15); border-radius: 50%; pointer-events: none; }
.hero::before { width: 710px; height: 710px; top: -440px; left: 50%; transform: translateX(-50%); }
.hero::after { width: 950px; height: 950px; right: -650px; bottom: -780px; border-color: rgba(254, 44, 85, .17); }
.hero-copy, .download-console { position: relative; z-index: 1; }
.hero h1 { max-width: 900px; margin: 0 auto 15px; color: #fff; font-size: clamp(2.55rem, 5.2vw, 4.45rem); line-height: .99; font-weight: 800; letter-spacing: -.075em; }
.hero h1 > span { display: block; }
.hero-title-subline { margin-top: 13px; color: #fff4e7; font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 800; letter-spacing: -.04em; }
.home-hero-stage .hero-title-subline { color: #fff4e7; }
.hero-lede { max-width: 650px; margin: 0 auto; color: #b8b8c0; font-size: .92rem; line-height: 1.7; }
.home-hero-stage .hero-lede { color: rgba(255, 255, 255, .86); }
.hero-disclaimer { max-width: 650px; margin: 14px auto 0; color: rgba(255, 255, 255, .72); font-size: .7rem; line-height: 1.5; }
.download-console { width: min(860px, 100%); margin-top: 29px; padding: 24px 26px 18px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; text-align: left; background: #151518; box-shadow: 0 22px 48px rgba(0, 0, 0, .34), 0 0 0 1px rgba(37, 244, 238, .04); }
.tool-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tool-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 8px; color: #d8d8df; background: #252529; font-size: .78rem; font-weight: 700; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.tool-tab svg, .paste-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.tool-tab:hover { border-color: rgba(37, 244, 238, .55); background: #303035; transform: translateY(-1px); }
.tool-tab.is-active { color: #080809; border-color: var(--cyan); background: var(--cyan); }
.home-hero-stage .tool-tab.is-active { color: #d95525; border-color: #fff; background: #fff; }
.download-form label { display: block; margin-bottom: 8px; color: #a9a9b2; font-family: var(--mono); font-size: .65rem; letter-spacing: .04em; }
.input-row { display: grid; grid-template-columns: minmax(0, 1fr) 155px; gap: 10px; padding: 0; border: 0; background: transparent; }
.tool-page-hero .input-row { grid-template-columns: minmax(0, 1fr) 200px; }
.input-with-action { display: flex; min-width: 0; align-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: #0e0e10; transition: border-color .2s ease, box-shadow .2s ease; }
.download-form input { min-width: 0; flex: 1; padding: 14px 16px; border: 0; outline: 0; color: #fff; background: transparent; font-size: .86rem; }
.download-form input::placeholder { color: #8f9098; }
.input-with-action:focus-within { border-color: var(--hero-orange-action); box-shadow: 0 0 0 2px rgba(255, 123, 61, .24); }
.download-form input:focus-visible { box-shadow: none; }
.paste-button { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 38px; margin-right: 5px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 8px; color: #e8e8ec; background: #252529; font-size: .72rem; font-weight: 700; }
.paste-button:hover { background: #303035; }
.download-form #submit-button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 50px; padding: 0 18px; border: 1px solid var(--red); border-radius: 10px; color: #fff; background: var(--red); font-weight: 800; white-space: nowrap; box-shadow: 0 8px 16px rgba(254, 44, 85, .23); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.download-form #submit-button:hover { background: var(--red-dark); box-shadow: 0 10px 20px rgba(254, 44, 85, .30); transform: translateY(-1px); }
.home-hero-stage .download-form #submit-button { border-color: var(--hero-orange-action); background: var(--hero-orange-action); box-shadow: 0 8px 16px rgba(112, 29, 11, .24); }
.home-hero-stage .download-form #submit-button:hover { background: #ff8c54; box-shadow: 0 10px 20px rgba(112, 29, 11, .3); }
.tool-page-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; border-radius: 36px; background: var(--hero-orange-gradient); box-shadow: 0 18px 60px -20px rgba(212, 69, 27, .48); }
.tool-page-hero::before, .tool-page-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.tool-page-hero::before { width: 470px; height: 470px; top: -250px; right: -85px; background: rgba(255, 255, 255, .13); filter: blur(52px); }
.tool-page-hero::after { width: 390px; height: 390px; bottom: -245px; left: -95px; background: rgba(112, 29, 11, .14); filter: blur(50px); }
.tool-page-hero .site-header { border-color: rgba(255, 255, 255, .48); color: #fff; background: rgba(255, 255, 255, .16); box-shadow: 0 12px 32px rgba(112, 29, 11, .16), inset 0 1px 0 rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.tool-page-hero .brand-text span { color: rgba(255, 255, 255, .78); }
.tool-page-hero .nav-links { color: rgba(255, 255, 255, .92); }
.tool-page-hero .nav-links a:hover { color: #fff; }
.tool-page-hero .nav-cta { color: #d95525; background: rgba(255, 255, 255, .96); box-shadow: 0 5px 0 rgba(112, 29, 11, .16); }
.tool-page-hero .nav-cta:hover { color: #c8481c !important; background: #fff; }
.tool-page-hero .hero { width: 100%; margin-left: 0; border-bottom: 0; background: transparent; }
.tool-page-hero .hero::before, .tool-page-hero .hero::after { border-color: rgba(255, 255, 255, .2); }
.tool-page-hero .hero::after { border-color: rgba(112, 29, 11, .18); }
.feature-kicker { display: block; margin-bottom: 18px; color: rgba(255, 255, 255, .72); font-family: var(--mono); font-size: .61rem; letter-spacing: .15em; }
.tool-page-hero .hero-lede { color: rgba(255, 255, 255, .86); }
.feature-content-section { padding: 96px 0 104px; }
.feature-content-intro { max-width: 760px; margin: 0 auto 43px; text-align: center; }
.feature-content-intro .mono-label { color: var(--hero-orange-action); }
.feature-content-intro h2 { margin: 14px 0 18px; color: var(--ink); font-size: clamp(2.3rem, 4.2vw, 4.1rem); line-height: .97; }
.feature-content-intro h2 em { color: var(--hero-orange-action); }
.feature-content-intro p { max-width: 670px; margin: 0 auto; color: var(--muted); font-size: .86rem; line-height: 1.78; }
.feature-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.feature-card-grid article { min-height: 186px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .58); box-shadow: 0 18px 34px -30px rgba(15, 23, 42, .46); }
.feature-card-grid article > span { color: var(--hero-orange-action); font-family: var(--mono); font-size: .61rem; font-weight: 700; letter-spacing: .08em; }
.feature-card-grid h3 { margin: 26px 0 9px; font-size: 1rem; letter-spacing: -.04em; }
.feature-card-grid p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.65; }
.feature-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 92px; padding: 0 0 120px; }
.feature-faq h2 { margin: 14px 0 0; font-size: clamp(2.7rem, 5vw, 4.8rem); line-height: .92; }
.feature-faq h2 em { color: var(--hero-orange-action); }
.roadmap-hero .hero-copy { max-width: 860px; }
.roadmap-hero .hero-lede { max-width: 650px; }
.roadmap-section { padding: 96px 0 120px; }
.roadmap-intro { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.roadmap-intro .mono-label { color: var(--hero-orange-action); }
.roadmap-intro h2 { margin: 14px 0 18px; color: var(--ink); font-size: clamp(2.8rem, 5vw, 4.8rem); line-height: .92; }
.roadmap-intro h2 em { color: var(--hero-orange-action); }
.roadmap-intro p { max-width: 650px; margin: 0 auto; color: var(--muted); font-size: .86rem; line-height: 1.78; }
.roadmap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.roadmap-card { min-height: 360px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 38px -32px rgba(15, 23, 42, .5); }
.roadmap-card-wide { grid-column: 1 / -1; min-height: 0; }
.roadmap-card-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.roadmap-status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid rgba(255, 123, 61, .35); border-radius: 999px; color: var(--hero-orange-action); background: #fff5ee; font-family: var(--mono); font-size: .55rem; font-weight: 700; letter-spacing: .1em; }
.roadmap-number { color: var(--muted-dark); font-family: var(--mono); font-size: .62rem; }
.roadmap-icon { display: grid; width: 54px; height: 54px; place-items: center; margin: 38px 0 22px; border-radius: 15px; color: #fff; background: var(--hero-orange-gradient); box-shadow: 5px 5px 0 #ffe0ce; font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .06em; }
.roadmap-card h3 { max-width: 450px; margin: 0 0 10px; color: var(--ink); font-size: 1.35rem; letter-spacing: -.05em; }
.roadmap-card p { max-width: 580px; margin: 0 0 18px; color: var(--muted); font-size: .78rem; line-height: 1.68; }
.roadmap-card ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; padding: 15px 0 0; margin: 0; border-top: 1px solid var(--line); list-style: none; }
.roadmap-card li { position: relative; padding-left: 15px; color: var(--ink); font-family: var(--mono); font-size: .59rem; line-height: 1.5; }
.roadmap-card li::before { position: absolute; top: .45em; left: 0; width: 6px; height: 6px; border-radius: 50%; content: ""; background: var(--hero-orange-action); }
.roadmap-note { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px 20px; margin-top: 18px; border: 1px solid rgba(255, 123, 61, .22); border-radius: 14px; background: #fff9f4; }
.roadmap-note > span { color: var(--hero-orange-action); font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .12em; }
.roadmap-note p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.roadmap-note a { color: var(--ink); font-size: .73rem; font-weight: 800; white-space: nowrap; }
.roadmap-note a:hover { color: var(--hero-orange-action); }
.download-form #submit-button:disabled { cursor: wait; opacity: .7; transform: none; }
.button-arrow { font-size: 1.2rem; }
.form-hint { margin: 10px 0 0; color: #94949c; font-family: var(--display); font-size: .74rem; line-height: 1.5; }
.content-section { padding: 92px 0 120px; }
.content-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 480px; column-gap: 72px; align-items: stretch; }
.content-panel { height: 480px; }
.content-copy-panel { display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(0px, 2vw, 28px) 0 0; color: var(--ink); }
.content-copy-panel .mono-label { color: var(--hero-orange-action); }
.content-copy-panel h2 { margin: 15px 0 22px; color: var(--ink); font-size: clamp(2.15rem, 3.8vw, 3.8rem); line-height: .98; }
.content-copy-panel h2 em { color: var(--hero-orange-action); font-style: normal; }
.content-copy-panel > p { max-width: 500px; margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.78; }
.content-copy-panel > p + p { margin-top: 19px; }
.content-copy-panel strong { color: var(--ink); font-weight: 800; }
.content-note { display: inline-flex; align-items: center; gap: 13px; width: fit-content; margin-top: 31px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .61rem; letter-spacing: .02em; }
.content-note span:first-child { color: var(--hero-orange-action); }
.content-image-panel { position: relative; overflow: hidden; margin: 0; background: transparent; }
.content-image-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(23, 23, 25, 0) 45%, rgba(23, 23, 25, .52) 100%); }
.content-image-panel img { display: block; width: 100%; height: 100%; border-radius: 22px; object-fit: cover; }
.content-image-panel figcaption { position: absolute; z-index: 1; right: 26px; bottom: 24px; left: 26px; color: #fff4e7; font-size: .72rem; font-weight: 700; letter-spacing: -.01em; }
.guide-section { padding: 4px 0 120px; }
.guide-heading { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.guide-heading h2 { margin: 14px 0 18px; color: var(--ink); font-size: clamp(2.1rem, 4vw, 3.65rem); line-height: .98; }
.guide-heading h2 em { color: var(--hero-orange-action); font-style: normal; }
.guide-heading p { max-width: 670px; margin: 0 auto; color: var(--muted); font-size: .88rem; line-height: 1.75; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }
.guide-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 16px 36px -30px rgba(15, 23, 42, .45); }
.guide-visual { position: relative; display: grid; height: 420px; place-items: center; overflow: hidden; background: linear-gradient(145deg, #f0f2f5 0%, #e4e8ed 100%); }
.guide-visual::before { position: absolute; right: 9%; bottom: 8%; left: 9%; height: 1px; content: ""; background: rgba(23, 23, 25, .08); }
.guide-tool-screenshot { position: relative; z-index: 1; display: block; width: auto; height: 386px; max-width: 92%; border-radius: 12px; box-shadow: 0 20px 30px rgba(15, 23, 42, .2); object-fit: contain; }
.guide-card-body { flex: 1; padding: 21px 22px 24px; }
.guide-step { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted-dark); font-family: var(--mono); font-size: .57rem; letter-spacing: .06em; }
.guide-step span:first-child { color: var(--hero-orange-action); font-weight: 700; }
.guide-card h3 { margin: 18px 0 10px; color: var(--ink); font-size: 1rem; letter-spacing: -.04em; }
.guide-card p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.72; }
.guide-card p strong { color: var(--ink); font-weight: 800; }
.reasons-section { padding: 0 0 124px; }
.reasons-intro { max-width: 790px; margin: 0 auto 45px; text-align: center; }
.reasons-intro .mono-label { color: var(--hero-orange-action); }
.reasons-intro h2 { margin: 14px 0 17px; color: var(--ink); font-size: clamp(2.25rem, 4.2vw, 3.7rem); line-height: .98; }
.reasons-intro h2 em { color: var(--hero-orange-action); font-style: normal; }
.reasons-intro p { max-width: 670px; margin: 0 auto; color: var(--muted); font-size: .88rem; line-height: 1.75; }
.reasons-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.reason-card { min-height: 292px; padding: 23px 23px 25px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: 0 17px 36px -31px rgba(15, 23, 42, .48); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.reason-card:hover { border-color: rgba(255, 123, 61, .46); box-shadow: 0 22px 40px -29px rgba(212, 69, 27, .28); transform: translateY(-3px); }
.reason-icon { display: grid; width: 55px; height: 55px; place-items: center; border-radius: 14px; color: #fff; background: #211e4a; box-shadow: 5px 5px 0 #ffe0ce; }
.reason-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.reason-number { margin-top: 27px; color: var(--hero-orange-action); font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .1em; }
.reason-card h3 { margin: 12px 0 10px; color: var(--ink); font-size: 1.06rem; letter-spacing: -.045em; }
.reason-card p { max-width: 350px; margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.72; }
.device-guide-section { padding: 0 0 132px; }
.device-guide-heading { max-width: 790px; margin: 0 auto 58px; text-align: center; }
.device-guide-heading .mono-label { color: var(--hero-orange-action); }
.device-guide-heading h2 { margin: 14px 0 18px; color: var(--ink); font-size: clamp(2.3rem, 4.3vw, 3.85rem); line-height: .96; }
.device-guide-heading h2 em { color: var(--hero-orange-action); font-style: normal; }
.device-guide-heading p { max-width: 690px; margin: 0 auto; color: var(--muted); font-size: .88rem; line-height: 1.75; }
.device-guide-row { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 72px; align-items: center; }
.device-guide-row + .device-guide-row { margin-top: 88px; }
.device-guide-row--desktop { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.device-guide-visual { position: relative; display: grid; min-height: 390px; place-items: center; overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, #f0f2f5 0%, #e5e8ee 100%); }
.device-guide-visual::before { position: absolute; right: 11%; bottom: 10%; left: 11%; height: 1px; content: ""; background: rgba(23, 23, 25, .09); }
.device-guide-visual figcaption { position: absolute; right: 22px; bottom: 18px; left: 22px; z-index: 2; color: var(--muted-dark); font-family: var(--mono); font-size: .55rem; letter-spacing: .02em; text-align: center; }
.device-phone-frame { position: relative; z-index: 1; width: min(58%, 256px); padding: 9px; border: 8px solid #1b1a24; border-radius: 29px; background: #11101a; box-shadow: 18px 22px 32px rgba(15, 23, 42, .24); transform: rotate(-4deg); }
.device-phone-frame::after { position: absolute; right: -17px; bottom: -17px; z-index: -1; width: 100%; height: 100%; border: 1px solid rgba(255, 123, 61, .42); border-radius: 29px; content: ""; background: #ffe6d8; }
.device-phone-speaker { position: absolute; z-index: 2; top: 5px; left: 50%; width: 48px; height: 5px; border-radius: 999px; background: #383544; transform: translateX(-50%); }
.device-phone-frame img { display: block; width: 100%; height: auto; border-radius: 18px; }
.device-guide-copy { min-width: 0; }
.device-guide-label { color: var(--hero-orange-action); font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .11em; }
.device-guide-copy h3 { max-width: 620px; margin: 13px 0 22px; color: var(--ink); font-size: clamp(1.55rem, 2.5vw, 2.15rem); letter-spacing: -.055em; }
.device-guide-list { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.device-guide-list li { position: relative; padding-left: 23px; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.device-guide-list li::before { position: absolute; top: .63em; left: 2px; width: 7px; height: 7px; border-radius: 50%; content: ""; background: var(--hero-orange-action); box-shadow: 0 0 0 4px #fff0e7; }
.device-guide-list strong { color: var(--ink); font-weight: 800; }
.device-guide-visual--laptop { min-height: 350px; }
.device-laptop-frame { position: relative; z-index: 1; width: min(86%, 520px); transform: rotate(2deg); }
.device-laptop-screen { padding: 9px 9px 0; border: 7px solid #1c1b28; border-bottom: 0; border-radius: 15px 15px 5px 5px; background: #11101a; box-shadow: 0 18px 25px rgba(15, 23, 42, .23); }
.device-browser-bar { display: flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; color: #8d8d98; background: #272536; font-family: var(--mono); font-size: .43rem; }
.device-browser-bar span { width: 5px; height: 5px; border-radius: 50%; background: #ff8761; }
.device-browser-bar span:nth-child(2) { background: #ffcf72; }.device-browser-bar span:nth-child(3) { background: #79c88e; }
.device-browser-bar b { overflow: hidden; margin-left: 5px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.device-laptop-screen img { display: block; width: 100%; height: 262px; object-fit: cover; object-position: top center; }
.device-laptop-base { display: block; width: 112%; height: 17px; margin-left: -6%; border-radius: 0 0 13px 13px; background: linear-gradient(#cdd0d5, #9fa4ad); box-shadow: 0 7px 8px rgba(15, 23, 42, .16); }
.device-guide-visual--laptop figcaption { right: auto; bottom: 8px; left: 50%; width: max-content; max-width: calc(100% - 36px); padding: 4px 8px; border-radius: 4px; background: rgba(255, 255, 255, .84); transform: translateX(-50%); }
.device-phone-frame--android { transform: rotate(4deg); }
.pros-cons-section, .comparison-section, .content-types-section, .faq-section-new { padding: 0 0 128px; }
.split-section-heading, .comparison-heading, .content-types-heading, .faq-new-heading { max-width: 790px; margin: 0 auto 48px; text-align: center; }
.split-section-heading .mono-label, .comparison-heading .mono-label, .content-types-heading .mono-label, .faq-new-heading .mono-label { color: var(--hero-orange-action); }
.split-section-heading h2, .comparison-heading h2, .content-types-heading h2, .faq-new-heading h2 { margin: 14px 0 18px; color: var(--ink); font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: .96; }
.split-section-heading h2 em, .content-types-heading h2 em { color: var(--hero-orange-action); font-style: normal; }
.split-section-heading p, .comparison-heading p, .content-types-heading p, .faq-new-heading p { max-width: 680px; margin: 0 auto; color: var(--muted); font-size: .87rem; line-height: 1.75; }
.pros-cons-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pros-cons-card { overflow: hidden; min-height: 390px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 38px -32px rgba(15, 23, 42, .46); }
.pros-cons-card-heading { display: flex; align-items: center; gap: 14px; min-height: 86px; padding: 18px 25px; color: #fff; }
.pros-card .pros-cons-card-heading { background: var(--hero-orange-gradient); }
.cons-card .pros-cons-card-heading { background: #211e4a; }
.pros-cons-symbol { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; font-size: 1.25rem; font-weight: 500; }
.pros-cons-card h3 { margin: 0; color: #fff; font-size: 1.2rem; letter-spacing: -.04em; }
.pros-cons-card ul { display: grid; gap: 18px; padding: 27px 29px 31px 51px; margin: 0; list-style: none; }
.pros-cons-card li { position: relative; color: var(--muted); font-size: .82rem; line-height: 1.62; }
.pros-cons-card li::before { position: absolute; top: .65em; left: -23px; width: 7px; height: 7px; border-radius: 50%; content: ""; background: var(--hero-orange-action); box-shadow: 0 0 0 4px #fff0e7; }
.cons-card li::before { background: #211e4a; box-shadow: 0 0 0 4px #ecebf4; }
.comparison-section { padding-top: 3px; }
.comparison-heading { max-width: 850px; margin-right: auto; margin-left: 0; text-align: left; }
.comparison-heading p { max-width: 730px; margin-left: 0; }
.comparison-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.comparison-card { min-height: 267px; padding: 23px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: 0 17px 36px -31px rgba(15, 23, 42, .48); }
.comparison-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; color: #fff; background: var(--hero-orange-action); box-shadow: 4px 4px 0 #ffe0ce; font-size: 1.45rem; font-weight: 800; }
.comparison-card h3 { margin: 27px 0 10px; color: var(--ink); font-size: 1.04rem; letter-spacing: -.045em; }
.comparison-card p { margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.72; }
.content-types-heading { max-width: 860px; }
.content-types-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.content-type-card { position: relative; display: flex; min-height: 255px; flex-direction: column; padding: 22px 23px 23px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: 0 17px 36px -31px rgba(15, 23, 42, .48); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.content-type-card:hover { border-color: rgba(255, 123, 61, .46); box-shadow: 0 22px 40px -29px rgba(212, 69, 27, .28); transform: translateY(-3px); }
.content-type-card--planned { background: linear-gradient(145deg, #fff, #fff8f3); }
.content-type-number { color: var(--hero-orange-action); font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .1em; }
.content-type-icon { display: grid; width: 51px; height: 51px; place-items: center; margin: 27px 0 19px; border-radius: 14px; color: #fff; background: #211e4a; box-shadow: 5px 5px 0 #ffe0ce; font-family: var(--mono); font-size: 1.1rem; }
.content-type-card h3 { margin: 0 0 9px; color: var(--ink); font-size: 1.03rem; letter-spacing: -.045em; }
.content-type-card p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.7; }
.content-type-link { margin-top: auto; padding-top: 18px; color: var(--hero-orange-action); font-family: var(--mono); font-size: .59rem; font-weight: 700; letter-spacing: .04em; }
.faq-section-new { padding-top: 2px; }
.faq-new-heading { max-width: 850px; }
.faq-new-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.faq-new-grid details { min-height: 75px; padding: 0; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 13px 30px -28px rgba(15, 23, 42, .52); }
.faq-new-grid summary { display: flex; min-height: 75px; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; color: var(--ink); font-size: .82rem; line-height: 1.35; }
.faq-new-grid summary::after { flex: 0 0 auto; float: none; color: var(--hero-orange-action); font-size: 1.1rem; }
.faq-new-grid details[open] { border-color: rgba(255, 123, 61, .42); }
.faq-new-grid details p { max-width: none; padding: 0 22px 21px; margin: -2px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.68; }
.disclaimer-section { display: grid; grid-template-columns: 64px 1fr; gap: 23px; align-items: start; padding: 24px 27px; margin-bottom: 88px; border: 1px solid rgba(255, 123, 61, .28); border-radius: 19px; background: #fff8f3; }
.disclaimer-mark { display: grid; width: 53px; height: 53px; place-items: center; border-radius: 15px; color: #fff; background: var(--hero-orange-gradient); box-shadow: 5px 5px 0 #ffe0ce; font-size: 1.4rem; font-weight: 800; transform: rotate(-5deg); }
.disclaimer-section .mono-label { color: var(--hero-orange-action); }
.disclaimer-section h2 { margin: 11px 0 9px; color: var(--ink); font-size: 1.25rem; letter-spacing: -.045em; }
.disclaimer-section p { max-width: 850px; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.75; }
.disclaimer-section a { color: #b5481c; font-weight: 800; }
.preview-section { padding: 50px 0 119px; }
.preview-topline { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 20px; margin-bottom: 15px; }
.preview-caption { color: var(--muted); text-align: center; font-size: .72rem; }
.preview-topline .mono-label:last-child { text-align: right; }
.preview-board { display: grid; grid-template-columns: 60px 1fr; min-height: 370px; overflow: hidden; border: 1px solid var(--line-bright); border-radius: 10px; background: var(--surface); }
.board-sidebar { display: flex; flex-direction: column; align-items: center; gap: 17px; padding: 20px 0; border-right: 1px solid var(--line); background: #fff4f5; }
.board-avatar { width: 26px; height: 26px; display: grid; place-items: center; margin-bottom: 28px; border-radius: 7px; color: var(--bg); background: var(--cyan); font-size: .68rem; font-weight: 800; }
.board-sidebar-line { width: 18px; height: 4px; border-radius: 4px; background: #d9c9ce; }
.board-sidebar-line.short { background: var(--red); }
.board-sidebar-line.tiny { width: 11px; margin-top: auto; }
.board-main { padding: 20px 25px 25px; }
.board-toolbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.board-check { color: var(--muted); font-family: var(--mono); font-size: .57rem; }
.board-check b { margin-left: 6px; color: var(--hero-orange-action); font-weight: 400; }
.board-content { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; max-width: 930px; padding: 28px 5%; margin: 0 auto; }
.board-visual { position: relative; min-height: 240px; overflow: hidden; border-radius: 7px; background: linear-gradient(140deg, #ef7b9b 0%, #b58afc 48%, #67d8cf 100%); }
.visual-shape { position: absolute; display: block; border-radius: 50%; }
.shape-a { width: 270px; height: 270px; right: -90px; bottom: -110px; border: 27px solid rgba(9,10,16,.58); }
.shape-b { width: 135px; height: 135px; left: -35px; top: -42px; border: 18px solid rgba(255,255,255,.72); }
.shape-c { width: 80px; height: 25px; left: 12%; bottom: 20%; border-radius: 3px; background: rgba(9,10,16,.77); transform: rotate(-12deg); }
.visual-tag { position: absolute; right: 14px; top: 14px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; color: var(--ink); background: rgba(255,255,255,.22); font-family: var(--mono); font-size: .52rem; line-height: 1.2; }
.board-details .mono-label { color: var(--red); }
.board-details h2 { margin: 15px 0 14px; font-size: clamp(2rem, 4vw, 3.8rem); line-height: .94; }
.board-details p { max-width: 300px; margin-bottom: 21px; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.board-file { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: .59rem; }
.file-type { color: var(--hero-orange-action); }
.file-arrow { color: var(--red); font-size: .85rem; }
.muted-file { color: var(--muted-dark); }
.result-section { padding: 48px 0 58px; scroll-margin-top: 24px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 25px; }
.section-heading h2 { margin: 12px 0 0; font-size: clamp(2.15rem, 4vw, 3.55rem); line-height: .92; }
.text-button { padding: 8px 0; border: 0; color: var(--muted); background: transparent; font-size: .72rem; }
.text-button:hover { color: var(--hero-orange-action); }
.text-button span { margin-left: 4px; color: var(--red); font-size: 1.2rem; vertical-align: -1px; }
.state-card, .empty-media { display: flex; align-items: center; gap: 16px; padding: 22px; border: 1px solid var(--line-bright); border-radius: 8px; background: var(--surface); }
.state-card p, .empty-media p { margin: 6px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.spinner { width: 22px; height: 22px; flex: 0 0 auto; border: 2px solid rgba(255,82,114,.3); border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.state-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,82,114,.4); border-radius: 5px; color: var(--red); background: rgba(255,82,114,.1); font-family: var(--mono); }
.error-card { border-color: rgba(255,82,114,.45); background: rgba(255,82,114,.07); }
.secondary-button { margin-top: 14px; padding: 9px 12px; border: 0; border-radius: 5px; color: var(--bg); background: var(--cyan); font-size: .72rem; font-weight: 800; }
.result-shell { padding: 18px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 20px 44px -32px rgba(15, 23, 42, .4); }
.result-layout { display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr); gap: 26px; align-items: stretch; }
.result-preview { position: relative; display: grid; min-height: 390px; max-height: 520px; place-items: center; overflow: hidden; border-radius: 16px; background: #101116; }
.result-preview img, .result-preview video { display: block; width: 100%; height: 100%; max-height: 520px; object-fit: contain; background: #101116; }
.result-preview-badge { position: absolute; top: 14px; left: 14px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.38); border-radius: 6px; color: #fff; background: rgba(23, 23, 25, .58); font-family: var(--mono); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; }
.result-preview-placeholder { display: grid; place-items: center; gap: 8px; color: #fff; }
.result-preview-placeholder span { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 16px; color: var(--ink); background: var(--hero-orange-action); font-size: 2rem; font-weight: 800; }
.result-preview-placeholder small { color: rgba(255,255,255,.68); font-family: var(--mono); font-size: .58rem; }
.result-panel { display: flex; min-width: 0; flex-direction: column; padding: 18px 12px 12px; }
.result-label { color: var(--hero-orange-action); font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.result-post h3 { overflow: hidden; margin: 10px 0 8px; font-size: clamp(1.35rem, 2.3vw, 1.8rem); letter-spacing: -.05em; text-overflow: ellipsis; white-space: nowrap; }
.source-link { color: var(--muted); font-family: var(--mono); font-size: .65rem; }
.source-link:hover { color: var(--hero-orange-action); }
.result-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 10px; margin: 25px 0 22px; }
.result-stats div { display: flex; min-height: 76px; flex-direction: column; justify-content: center; padding: 13px 12px; border-radius: 11px; background: #eef1f7; }
.result-stats span { color: var(--muted); font-family: var(--mono); font-size: .53rem; letter-spacing: .1em; }
.result-stats strong { margin-top: 7px; color: var(--ink); font-size: .9rem; letter-spacing: -.03em; }
.result-downloads { display: grid; gap: 10px; margin-top: auto; }
.result-download-button { display: flex; min-height: 53px; align-items: center; justify-content: space-between; gap: 18px; padding: 0 18px; border: 1px solid #34304f; border-radius: 10px; color: #fff; background: #1d1b38; font-size: .82rem; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.result-download-button:hover { color: #fff; background: #2a2750; transform: translateY(-1px); }
.result-download-button > span:last-child { color: #ff9a68; font-size: 1.15rem; }
.result-download-button.is-disabled { cursor: not-allowed; opacity: .48; }
.result-download-button.is-disabled:hover { background: #1d1b38; transform: none; }
.result-download-button--ad { border-color: #d78b21; background: linear-gradient(135deg, #302b63, #0f0c29); }
.result-download-button--ad:hover { background: linear-gradient(135deg, #403a7e, #17133d); }
.result-download-button--process { border-color: #57508b; background: linear-gradient(135deg, #28234f, #15122e); }
.result-download-button--process:hover { background: linear-gradient(135deg, #38316b, #1d1740); }
.result-download-button small { display: inline-flex; align-items: center; margin-left: 7px; padding: 3px 6px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; color: #fff; font-size: .52rem; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.action-note { margin: 10px 0 0; color: var(--muted-dark); font-family: var(--mono); font-size: .57rem; }
.ad-slot { margin-top: 12px; padding: 14px; border: 1px dashed var(--line-bright); border-radius: 10px; color: var(--muted); background: #faf7ef; font-size: .72rem; line-height: 1.5; }
.ad-slot strong { display: block; margin-bottom: 4px; color: var(--ink); }
.ad-slot p { margin: 0; }
.action-feedback { margin-top: 12px; padding: 10px 12px; border-radius: 9px; color: #365d4c; background: #e4f3e9; font-size: .7rem; line-height: 1.45; }
.action-feedback.is-error { color: #8d3d32; background: #ffebe6; }
.empty-media { align-items: flex-start; padding: 16px; }
.another-button { display: inline-flex; width: fit-content; min-height: 40px; align-items: center; justify-self: start; gap: 8px; margin-top: 0; padding: 0 4px; border: 0; border-radius: 8px; color: #b5481c; background: transparent; font-size: .72rem; font-weight: 800; transition: color .2s ease, background .2s ease; }
.another-button:hover { color: #8f3c1b; background: #fff3e7; }
.result-notice { margin: 17px 0 0; color: var(--muted-dark); font-family: var(--mono); font-size: .59rem; line-height: 1.6; }
.feature-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 92px; padding: 125px 0 135px; border-top: 1px solid var(--line); }
.section-intro h2, .how-heading h2, .faq-intro h2 { margin: 14px 0 21px; font-size: clamp(2.8rem, 5vw, 5rem); line-height: .92; }
.section-intro p, .faq-intro p { max-width: 260px; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.feature-list { border-top: 1px solid var(--line); }
.feature-row { display: grid; grid-template-columns: 35px 53px 1fr 24px; gap: 15px; align-items: center; min-height: 145px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.feature-index { align-self: start; padding-top: 4px; color: var(--red); font-family: var(--mono); font-size: .62rem; }
.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-bright); border-radius: 6px; color: var(--hero-orange-action); background: var(--surface); font-family: var(--mono); }
.icon-grid { display: grid; grid-template-columns: repeat(2, 7px); grid-template-rows: repeat(2, 7px); gap: 4px; }
.icon-grid span { border: 1px solid var(--cyan); }
.icon-wave { display: flex; align-items: center; justify-content: center; gap: 3px; }
.icon-wave span { width: 3px; border-radius: 3px; background: var(--cyan); }
.icon-wave span:nth-child(1) { height: 13px; }.icon-wave span:nth-child(2) { height: 24px; }.icon-wave span:nth-child(3) { height: 17px; }
.icon-lock { font-size: 1.25rem; }
.feature-row h3 { margin: 0 0 7px; font-size: .95rem; letter-spacing: -.04em; }
.feature-row p { max-width: 480px; margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.6; }
.feature-arrow { color: var(--red); font-size: 1.2rem; }
.how-section { padding: 0 0 135px; }
.how-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 38px; }
.how-heading h2 { margin-bottom: 0; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.step-card { min-height: 250px; padding: 20px; border: 1px solid var(--line-bright); border-radius: 7px; background: linear-gradient(145deg, var(--surface), rgba(255,255,255,.55)); transition: transform .2s ease, border-color .2s ease; }
.step-card:hover { border-color: var(--cyan); transform: translateY(-4px); }
.step-meta { display: flex; justify-content: space-between; color: var(--muted-dark); font-family: var(--mono); font-size: .59rem; }
.step-meta span:first-child { color: var(--red); }
.step-glyph { display: grid; width: 48px; height: 48px; place-items: center; margin: 62px 0 25px; border-radius: 50%; color: var(--bg); background: var(--cyan); font-size: 1.35rem; }
.step-card:nth-child(2) .step-glyph { color: var(--bg); background: var(--violet); }
.step-card:nth-child(3) .step-glyph { color: var(--bg); background: var(--red); }
.step-card h3 { margin-bottom: 8px; font-size: 1rem; letter-spacing: -.04em; }
.step-card p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.6; }
.faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 92px; padding: 0 0 126px; }
.faq-list { border-top: 1px solid var(--line); }
details { padding: 18px 0; border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; font-size: .84rem; font-weight: 700; letter-spacing: -.02em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--red); font-family: var(--mono); font-size: 1rem; font-weight: 400; }
details[open] summary::after { content: "−"; }
details p { max-width: 620px; margin: 12px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.7; }
.editorial-section { padding: 92px 0 120px; border-top: 1px solid var(--line); }
.editorial-intro { display: grid; grid-template-columns: .75fr 1.25fr; gap: 72px; align-items: start; }
.editorial-intro h2 { margin: 14px 0 0; font-size: clamp(2.8rem, 5vw, 5rem); line-height: .92; }
.editorial-lede { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; padding-top: 37px; }
.editorial-lede p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.8; }
.editorial-lede a, .story-copy a { color: var(--red); font-weight: 700; }
.editorial-story { display: grid; grid-template-columns: .92fr 1.08fr; gap: 72px; align-items: stretch; margin-top: 86px; }
.story-copy { padding-top: 18px; }
.story-copy h3 { max-width: 540px; margin: 14px 0 18px; font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: .95; }
.story-copy h3 em { color: var(--red); font-style: normal; }
.story-copy > p { max-width: 510px; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.8; }
.story-points { margin-top: 31px; border-top: 1px solid var(--line); }
.story-point { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.story-number { padding-top: 2px; color: var(--red); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; }
.story-point strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: .82rem; }
.story-point p { max-width: 430px; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.65; }
.media-dossier { position: relative; min-height: 430px; overflow: hidden; border-radius: 26px; background: linear-gradient(145deg, #ff9d5b 0%, #f46b30 58%, #ca3d22 100%); box-shadow: 0 24px 50px -28px rgba(164, 53, 24, .55); }
.media-dossier::before { content: ""; position: absolute; inset: 0; opacity: .3; background-image: radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }
.dossier-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.orb-a { width: 170px; height: 170px; top: -56px; right: -32px; background: rgba(255, 240, 209, .42); }
.orb-b { width: 125px; height: 125px; bottom: -58px; left: -38px; background: rgba(112, 29, 11, .2); }
.dossier-card { position: absolute; z-index: 1; top: 50%; left: 50%; width: min(78%, 370px); padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 19px; background: #171719; box-shadow: 0 24px 44px rgba(69, 24, 13, .34); transform: translate(-50%, -50%) rotate(-4deg); }
.dossier-toolbar, .dossier-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #aaaab2; font-family: var(--mono); font-size: .53rem; letter-spacing: .12em; }
.dossier-status { color: #ffb995; }
.dossier-status b { margin-left: 5px; color: #fff; font-weight: 400; }
.dossier-art { position: relative; min-height: 235px; margin: 13px 0; overflow: hidden; border-radius: 12px; background: linear-gradient(145deg, #ffd49f 0%, #ff8b46 53%, #ef5729 100%); }
.dossier-art::after { content: ""; position: absolute; right: -45px; bottom: -72px; width: 230px; height: 230px; border: 24px solid rgba(54, 24, 17, .28); border-radius: 50%; }
.dossier-sun { position: absolute; top: 28px; right: 33px; width: 66px; height: 66px; border-radius: 50%; background: rgba(255, 245, 218, .8); box-shadow: 0 0 0 13px rgba(255, 245, 218, .12); }
.dossier-ring { position: absolute; border: 1px solid rgba(255,255,255,.52); border-radius: 50%; }
.ring-one { width: 160px; height: 160px; left: -44px; bottom: -68px; }
.ring-two { width: 88px; height: 88px; left: 36px; top: 44px; border-width: 2px; opacity: .6; }
.dossier-play { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; width: 58px; height: 58px; place-items: center; padding-left: 3px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: #e85c2c; background: rgba(255,255,255,.88); box-shadow: 0 10px 20px rgba(112, 29, 11, .2); transform: translate(-50%, -50%); font-size: 1rem; }
.dossier-tag { position: absolute; left: 13px; bottom: 12px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.5); border-radius: 5px; color: #fff5e7; font-family: var(--mono); font-size: .5rem; line-height: 1.25; }
.dossier-meta span { display: block; margin-bottom: 5px; color: #898991; font-size: .49rem; }
.dossier-meta strong { color: #fff; font-family: var(--display); font-size: .72rem; letter-spacing: -.02em; }
.dossier-file-pill { padding: 5px 7px; border-radius: 5px; color: #e85c2c; background: #fff3e7; font-family: var(--mono); font-size: .56rem; }
.dossier-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.65); border-radius: 9px; color: #df5427; background: rgba(255, 250, 244, .92); box-shadow: 0 12px 22px rgba(112, 29, 11, .2); font-family: var(--mono); font-size: .59rem; font-weight: 700; }
.dossier-chip b { color: #aeaaa5; font-weight: 400; }
.chip-jpg { top: 21%; right: 5%; transform: rotate(8deg); }
.chip-mp4 { bottom: 18%; left: 5%; transform: rotate(-8deg); }
.site-footer { display: flex; align-items: center; gap: 22px; padding: 24px 0 31px; border-top: 1px solid var(--line); color: var(--muted-dark); font-family: var(--mono); font-size: .61rem; }
.footer-brand { color: var(--ink); font-family: var(--display); font-size: .75rem; }
.site-footer p { flex: 1; margin: 0; }
.footer-links { display: flex; gap: 17px; }
.site-footer {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  padding: 34px max(32px, calc((100vw - 1240px) / 2)) 38px;
  border-top: 0;
  color: rgba(255, 255, 255, .78);
  background: var(--hero-orange-gradient);
}
.footer-brand { color: #fff; }
.site-footer p { color: rgba(255, 255, 255, .78); }
.footer-links { flex-wrap: wrap; justify-content: flex-end; }
.footer-links a { color: rgba(255, 255, 255, .86); transition: color .2s ease, transform .2s ease; }
.footer-links a:hover { color: #fff !important; transform: translateY(-1px); }
.site-footer .brand-text span { color: rgba(255, 255, 255, .72); }
.site-footer .brand-mark.small { box-shadow: 3px 3px 0 rgba(255, 255, 255, .56); }
.legal-page { max-width: 760px; padding: 80px 0 120px; }
.legal-page > p:first-child { margin-bottom: 70px; color: var(--muted); font-family: var(--mono); font-size: .7rem; }
.legal-page > p:first-child a:hover { color: var(--hero-orange-action); }
.legal-page h1 { margin: 18px 0 30px; font-size: clamp(3rem, 8vw, 5.8rem); line-height: .9; }
.legal-page h2 { margin: 42px 0 12px; font-size: 1.35rem; }
.legal-page p { color: var(--muted); font-size: .83rem; line-height: 1.8; }
.legal-page a { color: #b5481c; font-weight: 600; }
.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; }

@media (max-width: 900px) {
  .site-header, main { width: min(calc(100% - 40px), 1240px); }
  .site-header { gap: 12px; padding-left: 16px; }
  .nav-links { gap: 12px; font-size: .68rem; }
  .nav-cta { padding: 10px 13px; }
  .hero { padding-top: 78px; }
  .home-hero-stage .hero,
  .tool-page-hero .hero { min-height: 650px; padding: 82px 20px 88px; }
  .feature-section, .faq-section, .feature-faq { grid-template-columns: 1fr; gap: 45px; }
  .feature-card-grid, .guide-grid, .reasons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pros-cons-grid { grid-template-columns: 1fr; }
  .comparison-grid, .content-types-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-new-grid { grid-template-columns: 1fr; }
  .content-container { grid-template-columns: 1fr; height: auto; gap: 45px; }
  .content-panel { height: auto; }
  .content-copy-panel { padding: 0; }
  .content-image-panel { height: min(72vw, 460px); }
  .guide-grid { gap: 12px; }
  .device-guide-row, .device-guide-row--desktop { grid-template-columns: 1fr; gap: 44px; }
  .device-guide-row + .device-guide-row { margin-top: 72px; }
  .device-guide-visual { min-height: 420px; }
  .site-footer { flex-wrap: wrap; }
  .site-footer p { min-width: min(100%, 240px); }
  .section-intro p, .faq-intro p { max-width: 500px; }
  .editorial-intro, .editorial-story { grid-template-columns: 1fr; gap: 45px; }
  .editorial-lede { max-width: 700px; }
}

@media (max-width: 680px) {
  .site-header, main, .site-footer { width: min(100% - 32px, 1240px); }
  .site-header { height: 64px; padding: 0 10px 0 16px; margin-bottom: 12px; }
  .nav-links { display: none; }
  .hero { min-height: 0; padding: 68px 16px 58px; }
  .home-hero-stage .hero,
  .tool-page-hero .hero { min-height: 0; padding: 54px 16px 58px; }
  .tool-page-hero { border-radius: 0 0 26px 26px; }
  .feature-kicker { font-size: .54rem; letter-spacing: .11em; }
  .hero::before { width: 390px; height: 390px; }
  .hero h1 { font-size: clamp(2.35rem, 11vw, 3.5rem); }
  .hero-lede { font-size: .88rem; }
  .download-console { margin-top: 25px; padding: 16px 12px 17px; }
  .content-section { padding: 70px 0 84px; }
  .content-container { gap: 36px; }
  .content-panel { height: auto; }
  .content-copy-panel { padding: 0; }
  .content-copy-panel > p { font-size: .84rem; }
  .content-copy-panel h2 { font-size: 2.65rem; }
  .content-image-panel { height: min(82vw, 380px); }
  .content-image-panel img { border-radius: 16px; }
  .content-image-panel figcaption { right: 20px; bottom: 19px; left: 20px; }
  .guide-section { padding-bottom: 84px; }
  .guide-heading { margin-bottom: 34px; }
  .guide-heading h2 { font-size: 2.35rem; }
  .guide-heading p { font-size: .84rem; }
  .guide-grid { grid-template-columns: 1fr; gap: 14px; }
  .guide-visual { height: min(112vw, 420px); }
  .guide-tool-screenshot { height: min(386px, 103vw); }
  .reasons-section { padding-bottom: 84px; }
  .reasons-intro { margin-bottom: 34px; }
  .reasons-intro h2 { font-size: 2.35rem; }
  .reasons-intro p { font-size: .84rem; }
  .reasons-grid { grid-template-columns: 1fr; gap: 12px; }
  .reason-card { min-height: 0; padding: 20px; }
  .device-guide-section { padding-bottom: 84px; }
  .device-guide-heading { margin-bottom: 34px; }
  .device-guide-heading h2 { font-size: 2.35rem; }
  .device-guide-heading p { font-size: .84rem; }
  .device-guide-row, .device-guide-row--desktop { grid-template-columns: 1fr; gap: 35px; }
  .device-guide-row + .device-guide-row { margin-top: 62px; }
  .device-guide-visual { min-height: 340px; }
  .device-phone-frame { width: min(58%, 244px); }
  .device-guide-copy h3 { margin-bottom: 18px; }
  .device-guide-list { gap: 10px; }
  .device-guide-list li { font-size: .78rem; }
  .device-guide-visual--laptop { min-height: 300px; }
  .device-laptop-screen img { height: 220px; }
  .pros-cons-section, .comparison-section, .content-types-section, .faq-section-new { padding-bottom: 84px; }
  .split-section-heading, .comparison-heading, .content-types-heading, .faq-new-heading { margin-bottom: 34px; }
  .split-section-heading h2, .comparison-heading h2, .content-types-heading h2, .faq-new-heading h2 { font-size: 2.35rem; }
  .split-section-heading p, .comparison-heading p, .content-types-heading p, .faq-new-heading p { font-size: .84rem; }
  .pros-cons-card { min-height: 0; }
  .pros-cons-card ul { gap: 14px; padding: 23px 22px 26px 46px; }
  .comparison-grid, .content-types-grid { grid-template-columns: 1fr; }
  .comparison-card, .content-type-card { min-height: 0; padding: 20px; }
  .faq-new-grid { gap: 10px; }
  .faq-new-grid summary { padding: 16px 18px; }
  .faq-new-grid details p { padding-right: 18px; padding-left: 18px; }
  .disclaimer-section { grid-template-columns: 1fr; gap: 14px; padding: 20px; margin-bottom: 62px; }
  .tool-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin-right: -2px; margin-left: -2px; padding-bottom: 2px; scrollbar-width: none; }
  .tool-tabs::-webkit-scrollbar { display: none; }
  .tool-tab { min-height: 44px; flex: 0 0 auto; padding: 9px 10px; font-size: .72rem; }
  .input-row, .tool-page-hero .input-row { grid-template-columns: 1fr; gap: 9px; }
  .download-form input { display: block; width: 100%; padding: 13px 11px; font-size: 1rem; }
  .paste-button { height: 44px; min-height: 44px; padding: 0 10px; }
  .download-form #submit-button { width: 100%; min-height: 48px; padding: 11px 13px; }
  .preview-section { padding: 37px 0 85px; }
  .preview-topline { grid-template-columns: 1fr 1fr; }
  .preview-caption { display: none; }
  .preview-topline .mono-label:last-child { text-align: right; }
  .preview-board { grid-template-columns: 42px 1fr; min-height: 0; }
  .board-sidebar { gap: 13px; padding-top: 16px; }
  .board-avatar { margin-bottom: 21px; }
  .board-main { padding: 15px 12px 18px; }
  .board-toolbar { align-items: start; gap: 10px; }
  .board-check { text-align: right; line-height: 1.4; }
  .board-content { grid-template-columns: 1fr; gap: 21px; padding: 18px 0 0; }
  .board-visual { min-height: 190px; }
  .board-details h2 { font-size: 2.5rem; }
  .result-section { padding: 35px 0 49px; }
  .section-heading { align-items: start; }
  .section-heading h2 { font-size: 2.7rem; }
  .result-shell { padding: 10px; border-radius: 18px; }
  .result-layout { grid-template-columns: 1fr; gap: 12px; }
  .result-preview { min-height: min(112vw, 390px); max-height: none; border-radius: 13px; }
  .result-preview img, .result-preview video { max-height: none; }
  .result-panel { padding: 15px 8px 8px; }
  .result-post h3 { white-space: normal; font-size: 1.2rem; }
  .result-stats { margin: 20px 0; }
  .steps-grid { grid-template-columns: 1fr; }
  .feature-section { padding: 86px 0 95px; }
  .feature-content-section { padding: 74px 0 84px; }
  .feature-content-intro { margin-bottom: 32px; }
  .feature-content-intro h2 { font-size: 2.45rem; }
  .feature-content-intro p { font-size: .84rem; }
  .feature-card-grid { gap: 10px; }
  .feature-card-grid article { min-height: 0; padding: 19px; }
  .feature-card-grid h3 { margin-top: 21px; }
  .roadmap-section { padding: 74px 0 84px; }
  .roadmap-intro { margin-bottom: 32px; }
  .roadmap-intro h2 { font-size: 2.7rem; }
  .roadmap-intro p { font-size: .84rem; }
  .roadmap-grid { grid-template-columns: 1fr; gap: 10px; }
  .roadmap-card, .roadmap-card-wide { grid-column: auto; min-height: 0; padding: 19px; }
  .roadmap-icon { margin-top: 29px; }
  .roadmap-card ul { gap: 8px 12px; }
  .roadmap-note { grid-template-columns: 1fr; gap: 9px; padding: 17px; }
  .roadmap-note a { white-space: normal; }
  .feature-row { grid-template-columns: 28px 46px 1fr; gap: 10px; min-height: 132px; }
  .feature-arrow { display: none; }
  .feature-row p { font-size: .7rem; }
  .how-section { padding-bottom: 95px; }
  .how-heading { display: block; margin-bottom: 31px; }
  .how-heading .mono-label { display: block; margin-bottom: 40px; }
  .step-card { min-height: 220px; }
  .step-glyph { margin-top: 42px; }
  .faq-section { padding-bottom: 90px; }
  .feature-faq { padding-bottom: 90px; }
  .legal-page { padding-top: 54px; }
  .legal-page > p:first-child { margin-bottom: 42px; }
  .editorial-section { padding: 76px 0 84px; }
  .editorial-lede { grid-template-columns: 1fr; gap: 16px; padding-top: 29px; }
  .editorial-story { gap: 35px; margin-top: 58px; }
  .media-dossier { min-height: 340px; border-radius: 20px; }
  .dossier-card { width: min(82%, 340px); }
  .dossier-art { min-height: 190px; }
  .site-footer { width: 100vw; margin-left: calc(50% - 50vw); display: grid; gap: 12px; padding: 30px 16px 34px; }
  .footer-links { justify-content: flex-start; gap: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* asset-mime-refresh */