@charset "utf-8";

@layer theme {
  :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --spacing: .25rem; --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); }
}

@layer base {
  *, ::after, ::before, ::backdrop { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
  ::file-selector-button { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
  html, :host { text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings,normal); font-variation-settings: var(--default-font-variation-settings,normal); -webkit-tap-highlight-color: transparent; }
  hr { height: 0px; color: inherit; border-top-width: 1px; }
  abbr:where([title]) { text-decoration: underline dotted; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  a { color: inherit; text-decoration: inherit; }
  b, strong { font-weight: bolder; }
  code, kbd, samp, pre { font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings,normal); font-variation-settings: var(--default-mono-font-variation-settings,normal); font-size: 1em; }
  small { font-size: 80%; }
  sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; }
  sub { bottom: -0.25em; }
  sup { top: -0.5em; }
  table { text-indent: 0px; border-color: inherit; border-collapse: collapse; }
  progress { vertical-align: baseline; }
  summary { display: list-item; }
  ol, ul, menu { list-style: none; }
  img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; }
  img, video { max-width: 100%; height: auto; }
  button, input, select, optgroup, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
  ::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
  :where(select:is([multiple], [size])) optgroup { font-weight: bolder; }
  :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }
  ::file-selector-button { margin-inline-end: 4px; }
  ::placeholder { opacity: 1; }
  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
  ::placeholder { color: currentcolor; }
  @supports (color:color-mix(in lab, red, red)) {
  ::placeholder { color: color-mix(currentcolor, transparent); }
}
}
  textarea { resize: vertical; }
  ::-webkit-search-decoration { appearance: none; }
  ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
  ::-webkit-datetime-edit { display: inline-flex; }
  ::-webkit-datetime-edit-fields-wrapper { padding: 0px; }
  ::-webkit-datetime-edit { padding-block: 0px; }
  ::-webkit-datetime-edit-year-field { padding-block: 0px; }
  ::-webkit-datetime-edit-month-field { padding-block: 0px; }
  ::-webkit-datetime-edit-day-field { padding-block: 0px; }
  ::-webkit-datetime-edit-hour-field { padding-block: 0px; }
  ::-webkit-datetime-edit-minute-field { padding-block: 0px; }
  ::-webkit-datetime-edit-second-field { padding-block: 0px; }
  ::-webkit-datetime-edit-millisecond-field { padding-block: 0px; }
  ::-webkit-datetime-edit-meridiem-field { padding-block: 0px; }
  ::-webkit-calendar-picker-indicator { line-height: 1; }
  button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; }
  ::file-selector-button { appearance: button; }
  ::-webkit-inner-spin-button { height: auto; }
  ::-webkit-outer-spin-button { height: auto; }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
}

@layer components;

@layer utilities {
  .visible { visibility: visible; }
  .relative { position: relative; }
  .start { inset-inline-start: var(--spacing); }
  .contents { display: contents; }
  .hidden { display: none; }
  .table { display: table; }
}

:root { --paper: #f6f0e9; --white: #fffdfb; --aubergine: #332331; --ink: #211c22; --coral: #e86f61; --coral-dark: #c9554d; --coral-pale: #f7d6cf; --blush: #fbf3f0; --taupe: #74686f; --line: #ded3ca; --green: #2f7457; --shadow: 0 18px 55px #33233117; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--paper); }

body { background: radial-gradient(circle at 72% 7%, #ffffffd9, transparent 31rem), linear-gradient(180deg, #faf6f1 0%, var(--paper) 52%, #f9f3ed 100%); color: var(--ink); -webkit-font-smoothing: antialiased; margin: 0px; font-family: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif; }

button, input, textarea, select { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; text-decoration: none; }

button:focus-visible, a:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 2px; outline: rgba(232, 111, 97, 0.28) solid 3px; }

.site-header { justify-content: space-between; align-items: center; gap: 30px; width: min(1240px, 100% - 48px); height: 76px; margin: 0px auto; display: flex; }

.brand { color: var(--aubergine); white-space: nowrap; align-items: center; display: inline-flex; }

.brand img { object-fit: contain; width: auto; height: 43px; display: block; }

.site-header nav { color: rgb(75, 65, 72); align-items: center; gap: clamp(24px, 4vw, 52px); font-size: 14px; font-weight: 650; display: flex; }

.site-header nav a { position: relative; }

.site-header nav a::after { content: ""; background: var(--coral); height: 1px; transition: right 0.18s; position: absolute; bottom: -6px; left: 0px; right: 100%; }

.site-header nav a:hover::after { right: 0px; }

.outline-button { border: 1px solid var(--coral); color: var(--coral-dark); border-radius: 8px; padding: 10px 19px; font-size: 14px; font-weight: 750; transition: 0.18s; }

.outline-button:hover { background: var(--coral); color: rgb(255, 255, 255); transform: translateY(-1px); }

.hero { width: min(1240px, 100% - 48px); margin: 24px auto 13px; }

.eyebrow, .kicker { color: var(--coral-dark); letter-spacing: 0.17em; margin: 0px 0px 10px; font-size: 11px; font-weight: 850; }

h1, .section h2, .pricing h2, .example-copy h2 { letter-spacing: -0.045em; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 500; }

h1 { max-width: 860px; color: var(--aubergine); margin: 0px; font-size: clamp(45px, 4.55vw, 66px); line-height: 0.99; }

.hero > p:not(.eyebrow) { max-width: 570px; color: var(--taupe); margin: 15px 0px 14px; font-size: 17px; line-height: 1.48; }

.hero-actions { align-items: center; gap: 17px; display: flex; }

.hero-actions > span { color: var(--taupe); font-size: 11px; }

.primary-button { background: var(--coral); color: rgb(255, 255, 255); cursor: pointer; border: 0px; border-radius: 8px; justify-content: center; align-items: center; gap: 9px; padding: 13px 21px; font-weight: 780; transition: 0.18s; display: inline-flex; box-shadow: rgba(232, 111, 97, 0.2) 0px 8px 20px; }

.primary-button:hover { background: var(--coral-dark); transform: translateY(-1px); box-shadow: rgba(202, 86, 77, 0.24) 0px 11px 25px; }

.primary-button:disabled { opacity: 0.68; cursor: wait; transform: none; }

.studio { border: 1px solid var(--line); width: min(1240px, 100% - 48px); box-shadow: var(--shadow); backdrop-filter: blur(12px); background: rgba(255, 253, 251, 0.9); border-radius: 17px; grid-template-columns: minmax(0px, 1.18fr) minmax(350px, 0.82fr); margin: 0px auto 38px; display: grid; overflow: hidden; }

.generator { padding: 24px; }

.panel-head { justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 16px; display: flex; }

.kicker { margin-bottom: 3px; font-size: 9px; display: block; }

.panel-head h2 { letter-spacing: -0.04em; margin: 0px; font-family: "Iowan Old Style", Georgia, serif; font-size: 29px; }

.steps { color: rgb(162, 151, 155); white-space: nowrap; margin: 4px 0px 0px; padding: 0px; font-size: 11px; list-style: none; display: flex; }

.steps li { border-bottom: 2px solid rgba(0, 0, 0, 0); padding: 7px 9px 8px; }

.steps li + li::before { content: "·"; color: rgb(199, 187, 181); margin-right: 14px; }

.steps .active { border-color: var(--coral); color: var(--coral-dark); }

.steps .done { color: var(--green); }

.field { margin-top: 12px; }

.field > label { margin-bottom: 6px; font-size: 12px; font-weight: 800; display: block; }

.upload { background: var(--white); width: 100%; min-height: 72px; color: var(--ink); text-align: left; cursor: pointer; border: 1px dashed rgb(203, 189, 181); border-radius: 9px; align-items: center; gap: 13px; padding: 9px 12px; transition: 0.18s; display: flex; }

.upload:hover { border-color: var(--coral); background: var(--blush); }

.upload > img { object-fit: contain; background: rgb(240, 231, 222); border-radius: 6px; width: 76px; height: 53px; }

.upload-icon { background: var(--coral-pale); width: 42px; height: 42px; color: var(--coral-dark); border-radius: 50%; flex: 0 0 42px; place-items: center; font-size: 24px; display: grid; }

.upload-copy { flex-direction: column; flex: 1 1 0%; min-width: 0px; display: flex; }

.upload-copy strong { text-overflow: ellipsis; white-space: nowrap; font-size: 13px; overflow: hidden; }

.upload-copy small, .style-card small, .script-box small { color: var(--taupe); font-size: 10px; }

.upload-link { color: var(--coral-dark); font-size: 11px; font-weight: 800; }

textarea, select { border: 1px solid var(--line); background: var(--white); width: 100%; color: var(--ink); border-radius: 8px; }

textarea { resize: vertical; min-height: 65px; padding: 10px 12px; font-size: 12px; line-height: 1.46; }

select { cursor: pointer; height: 40px; padding: 0px 11px; font-size: 12px; }

.field-meta { color: rgb(162, 151, 155); justify-content: space-between; align-items: center; min-height: 20px; font-size: 10px; display: flex; }

.field-meta button { color: var(--coral-dark); cursor: pointer; background: 0px 0px; border: 0px; padding: 4px 0px; font-size: 11px; font-weight: 800; }

.style-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; display: grid; }

.style-card { border: 1px solid var(--line); background: var(--white); min-height: 55px; color: var(--ink); text-align: left; cursor: pointer; border-radius: 8px; grid-template-columns: 30px 1fr 22px; align-items: center; gap: 8px; padding: 8px 9px; transition: 0.18s; display: grid; }

.style-card:hover { border-color: rgb(200, 183, 174); transform: translateY(-1px); }

.style-card.selected { border-color: var(--coral); background: var(--blush); }

.style-icon { border: 1px solid rgb(215, 202, 194); border-radius: 50%; place-items: center; width: 29px; height: 29px; display: grid; }

.style-card > span:nth-child(2) { flex-direction: column; display: flex; }

.style-card strong { font-size: 11px; }

.style-card i { background: var(--coral); color: rgb(255, 255, 255); border-radius: 50%; place-items: center; width: 21px; height: 21px; font-size: 11px; font-style: normal; font-weight: 900; display: grid; }

.two-fields { grid-template-columns: 1.15fr 1.15fr 0.7fr; gap: 13px; display: grid; }

.segmented { border: 1px solid var(--line); background: var(--white); border-radius: 8px; grid-template-columns: 1fr 1fr; height: 40px; display: grid; overflow: hidden; }

.segmented button { color: var(--taupe); cursor: pointer; background: 0px 0px; border: 0px; font-size: 12px; }

.segmented button:disabled { color: #aaa19d; cursor: not-allowed; background: #f2efed; }

.segmented button + button { border-left: 1px solid var(--line); }

.segmented .selected { background: var(--blush); color: var(--coral-dark); box-shadow: inset 0 0 0 1px var(--coral); font-weight: 850; }

.duration-field { margin-top: 13px; }

.duration-heading { justify-content: space-between; align-items: center; gap: 12px; display: flex; }

.duration-heading span { color: var(--green); letter-spacing: 0.03em; font-size: 9px; font-weight: 800; }

.duration-options { grid-template-columns: repeat(4, 1fr); gap: 8px; display: grid; }

.duration-options button { border: 1px solid var(--line); background: var(--white); min-height: 50px; color: var(--ink); cursor: pointer; border-radius: 8px; flex-direction: column; justify-content: center; align-items: center; display: flex; }

.duration-options button strong { font-size: 12px; }

.duration-options button.selected { border-color: var(--coral); background: var(--blush); color: var(--coral-dark); box-shadow: inset 0 0 0 1px var(--coral); }

.duration-options button:disabled { cursor: not-allowed; opacity: 0.45; }

.cloud-setup-page { min-height: 100vh; padding: 28px 5vw 64px; background: var(--cream); }

.cloud-setup-card { width: min(760px, 100%); margin: 44px auto 0; padding: clamp(26px, 4vw, 46px); border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: 0 20px 60px rgba(62, 34, 52, 0.08); }

.cloud-setup-card h1 { margin: 7px 0 10px; font-size: clamp(32px, 5vw, 48px); line-height: 1.02; }

.cloud-setup-card > div > p:last-child { color: var(--muted); line-height: 1.65; }

.cloud-steps { margin: 28px 0; padding: 22px 22px 22px 44px; border-radius: 14px; background: var(--blush); color: var(--ink); }

.cloud-steps li + li { margin-top: 10px; }

.cloud-steps a { color: var(--coral-dark); font-weight: 800; }

.cloud-setup-form { display: grid; gap: 18px; }

.cloud-setup-form label { display: grid; gap: 7px; }

.cloud-setup-form label > span { font-size: 13px; font-weight: 800; }

.cloud-setup-form input { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); color: var(--ink); font: inherit; }

.cloud-setup-form input[type="file"] { padding: 10px; }

.cloud-setup-form small { color: var(--muted); line-height: 1.45; }

.cloud-setup-form .primary-button { border: 0; justify-self: start; }

.cloud-setup-form .primary-button:disabled { cursor: wait; opacity: 0.6; }

.setup-message { margin: 0; padding: 12px 14px; border-radius: 10px; background: #fff0ee; color: #8b3028; }

.setup-message.success { background: #edf7ef; color: #21643a; }

.owner-setup { margin-top: 20px; border-color: rgba(34, 106, 64, 0.25); background: #f3faf4; }

.script-box { background: var(--blush); border: 1px solid rgb(234, 217, 210); border-radius: 9px; grid-template-columns: 145px 1fr; align-items: center; gap: 10px; margin-top: 12px; padding: 10px; display: grid; }

.script-box > div { flex-direction: column; gap: 3px; display: flex; }

.script-box > div > span { color: var(--coral-dark); letter-spacing: 0.12em; font-size: 9px; font-weight: 850; }

.script-box textarea { background: rgba(255, 255, 255, 0.82); min-height: 47px; }

.script-count { color: var(--taupe); text-align: right; grid-column: 2; margin-top: -8px; font-size: 10px; }

.generate-row { align-items: center; gap: 17px; margin-top: 12px; display: flex; }

.generate-button { min-width: 205px; }

.status { color: var(--taupe); align-items: center; gap: 8px; font-size: 11px; display: flex; }

.status i { border: 1px solid rgb(166, 154, 158); border-radius: 50%; width: 7px; height: 7px; }

.status i.pulse { background: var(--coral); border: 0px; animation: 1.4s ease-in-out 0s infinite normal none running pulse; }

.progress { background: rgb(238, 227, 221); border-radius: 99px; height: 3px; margin-top: 11px; overflow: hidden; }

.progress span { border-radius: inherit; background: var(--coral); height: 100%; transition: width 0.5s; display: block; }

.message { color: var(--green); background: rgb(237, 247, 241); border-radius: 7px; justify-content: space-between; align-items: center; gap: 12px; margin-top: 9px; padding: 8px 10px; font-size: 11px; line-height: 1.4; display: flex; }

.message.error { color: rgb(150, 60, 53); background: rgb(255, 240, 238); }

.message button { color: inherit; cursor: pointer; background: 0px 0px; border: 1px solid; border-radius: 6px; flex: 0 0 auto; padding: 5px 9px; font-size: 10px; font-weight: 850; }

.preview { border-left: 1px solid var(--line); background: radial-gradient(circle at 50% 14%, rgba(247, 214, 207, 0.48), rgba(0, 0, 0, 0) 18rem), rgba(255, 253, 251, 0.72); flex-direction: column; align-items: center; padding: 24px 26px 20px; display: flex; }

.preview-head { justify-content: space-between; align-items: flex-start; width: 100%; margin-bottom: 8px; display: flex; }

.preview-head > div { flex-direction: column; display: flex; }

.preview-head > div > span, .engine { color: var(--coral-dark); letter-spacing: 0.12em; font-size: 9px; font-weight: 850; }

.preview-head strong { margin-top: 3px; font-family: "Iowan Old Style", Georgia, serif; font-size: 19px; }

.engine { background: var(--coral-pale); border-radius: 99px; padding: 6px 9px; }

.engine.live { color: var(--green); background: rgb(232, 243, 237); }

.phone { background: rgb(17, 17, 17); border: 4px solid rgb(33, 30, 33); border-radius: 34px; flex-direction: column; width: 250px; height: 445px; padding: 8px 7px 9px; transition: width 0.22s; display: flex; position: relative; overflow: hidden; box-shadow: rgba(33, 28, 34, 0.19) 0px 18px 30px, rgb(59, 52, 57) 0px 0px 0px 1px inset; }

.phone.wide { border-radius: 28px; width: 360px; height: 255px; }

.dynamic-island { z-index: 7; background: rgb(23, 20, 23); border-radius: 99px; width: 63px; height: 17px; position: absolute; top: 12px; left: 50%; transform: translate(-50%); }

.phone video, .phone-still { background: rgb(215, 200, 189); border-radius: 24px 24px 3px 3px; flex: 1 1 0%; width: 100%; min-height: 0px; position: relative; overflow: hidden; }

.phone video { object-fit: cover; }

.phone-still > img { object-fit: cover; width: 100%; height: 100%; display: block; }

.product-chip { z-index: 3; backdrop-filter: blur(8px); background: rgba(255, 253, 251, 0.92); border-radius: 8px; width: 58px; padding: 4px; position: absolute; top: 31px; right: 9px; box-shadow: rgba(37, 26, 33, 0.18) 0px 5px 16px; }

.product-chip img { object-fit: contain; background: rgb(255, 255, 255); border-radius: 5px; width: 100%; height: 45px; }

.product-chip span { color: var(--aubergine); text-align: center; padding-top: 2px; font-size: 7px; font-weight: 850; display: block; }

.caption { z-index: 4; color: rgb(255, 255, 255); text-align: center; text-shadow: rgba(0, 0, 0, 0.74) 0px 2px 7px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin: 0px; font-size: 13px; font-weight: 850; line-height: 1.14; display: -webkit-box; position: absolute; bottom: 23px; left: 13px; right: 13px; overflow: hidden; }

.rendering { z-index: 6; color: rgb(255, 255, 255); backdrop-filter: blur(4px); background: rgba(38, 27, 36, 0.58); flex-direction: column; justify-content: center; align-items: center; display: flex; position: absolute; inset: 0px; }

.rendering i { border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.35); border-image: none; border-radius: 50%; width: 30px; height: 30px; animation: 0.9s linear 0s infinite normal none running spin; }

.rendering strong { margin-top: 9px; font-size: 20px; }

.rendering span { margin-top: 3px; font-size: 9px; }

.play { z-index: 6; width: 52px; height: 52px; color: var(--coral-dark); background: rgba(255, 253, 251, 0.92); border-radius: 50%; place-items: center; padding-left: 4px; display: grid; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: rgba(34, 24, 31, 0.24) 0px 7px 24px; }

.phone-controls { color: rgb(255, 255, 255); flex: 0 0 45px; grid-template-columns: 22px 1fr 32px; align-items: center; gap: 7px; height: 45px; padding: 0px 8px; font-size: 9px; display: grid; }

.phone-controls > i { background: rgb(97, 87, 93); border-radius: 99px; height: 3px; overflow: hidden; }

.phone-controls b { border-radius: inherit; background: var(--coral); height: 100%; transition: width 0.7s; display: block; }

.chips { flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; display: flex; }

.chips span { border: 1px solid var(--line); color: var(--taupe); background: rgba(255, 255, 255, 0.76); border-radius: 99px; padding: 5px 8px; font-size: 8px; font-weight: 750; }

.download { background: var(--aubergine); color: rgb(255, 255, 255); border-radius: 7px; margin-top: 10px; padding: 9px 15px; font-size: 10px; font-weight: 850; box-shadow: rgba(51, 35, 49, 0.15) 0px 7px 18px; }

.quality-lock { border-top: 1px solid var(--line); width: 100%; max-width: 340px; color: var(--taupe); justify-content: center; align-items: center; gap: 9px; margin-top: 11px; padding-top: 11px; display: flex; }

.quality-lock > span { width: 23px; height: 23px; color: var(--green); background: rgb(232, 243, 237); border-radius: 50%; flex: 0 0 23px; place-items: center; font-size: 11px; font-weight: 900; display: grid; }

.quality-lock p { max-width: 255px; margin: 0px; font-size: 9px; line-height: 1.4; }

.quality-lock strong { color: var(--aubergine); font-size: 10px; display: block; }

.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); width: min(1120px, 100% - 48px); color: var(--taupe); justify-content: space-between; align-items: center; gap: 28px; margin: 0px auto; padding: 18px 0px; font-size: 12px; display: flex; }

.trust strong { color: var(--aubergine); font-family: "Iowan Old Style", Georgia, serif; font-size: 16px; }

.section { width: min(1120px, 100% - 48px); margin: 100px auto; }

.section-heading { text-align: center; max-width: 660px; margin: 0px auto 38px; }

.section h2, .pricing h2, .example-copy h2 { color: var(--aubergine); margin: 0px; font-size: clamp(36px, 4vw, 52px); line-height: 1.02; }

.section-heading > p:last-child, .example-copy > p:not(.eyebrow) { color: var(--taupe); font-size: 15px; line-height: 1.65; }

.how-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; display: grid; }

.how-grid article { border: 1px solid var(--line); background: rgba(255, 253, 251, 0.72); border-radius: 13px; min-height: 195px; padding: 24px; }

.how-grid article > span { color: var(--coral-dark); letter-spacing: 0.14em; font-size: 10px; font-weight: 850; }

.how-grid h3 { margin: 28px 0px 8px; font-family: "Iowan Old Style", Georgia, serif; font-size: 23px; }

.how-grid p { color: var(--taupe); margin: 0px; font-size: 13px; line-height: 1.58; }

.examples { grid-template-columns: 0.86fr 1.14fr; align-items: center; gap: 70px; display: grid; }

.example-visual { height: 560px; box-shadow: var(--shadow); border-radius: 18px; position: relative; overflow: hidden; }

.example-visual img { object-fit: cover; width: 100%; height: 100%; }

.example-visual span { color: rgb(255, 255, 255); letter-spacing: 0.14em; backdrop-filter: blur(9px); background: rgba(51, 35, 49, 0.82); border-radius: 8px; padding: 13px 15px; font-size: 9px; font-weight: 850; position: absolute; bottom: 18px; left: 18px; right: 18px; }

.example-copy ul { gap: 11px; margin: 25px 0px 0px; padding: 0px; list-style: none; display: grid; }

.example-copy li { border-top: 1px solid var(--line); padding-top: 11px; font-size: 13px; font-weight: 700; }

.example-copy li::before { content: "✓"; color: var(--coral-dark); margin-right: 9px; }

.pricing { text-align: center; width: min(1120px, 100% - 48px); margin: 100px auto; }

.pricing-heading { max-width: 720px; margin: 0px auto 38px; }

.pricing-heading > p:last-child { color: var(--taupe); margin: 15px 0px 0px; font-size: 14px; line-height: 1.6; }

.pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 15px; display: grid; }

.price-card { border: 1px solid var(--line); background: var(--white); color: var(--aubergine); text-align: left; border-radius: 17px; flex-direction: column; padding: 29px 27px 26px; display: flex; position: relative; box-shadow: rgba(51, 35, 49, 0.07) 0px 14px 42px; }

.price-card.featured { border-color: var(--coral); background: var(--aubergine); color: rgb(255, 255, 255); transform: translateY(-10px); box-shadow: rgba(51, 35, 49, 0.18) 0px 22px 55px; }

.popular-label { background: var(--coral); color: rgb(255, 255, 255); letter-spacing: 0.1em; white-space: nowrap; border-radius: 999px; padding: 6px 13px; font-size: 9px; font-weight: 900; position: absolute; top: -12px; left: 50%; transform: translate(-50%); }

.price-card > div > span { color: var(--coral-dark); letter-spacing: 0.15em; font-size: 10px; font-weight: 850; }

.price-card.featured > div > span { color: var(--coral-pale); }

.price-card h3 { margin: 9px 0px 3px; font-family: "Iowan Old Style", Georgia, serif; font-size: 36px; }

.price-card h3 small { color: var(--taupe); font-family: inherit; font-size: 13px; font-weight: 400; }

.price-card.featured h3 small { color: rgb(207, 197, 205); }

.price-card p { min-height: 58px; color: var(--taupe); margin: 0px; font-size: 12px; line-height: 1.55; }

.price-card.featured p { color: rgb(217, 207, 215); }

.price-card ul { color: var(--taupe); gap: 10px; margin: 23px 0px 26px; padding: 0px; font-size: 11px; list-style: none; display: grid; }

.price-card.featured ul { color: rgb(232, 223, 229); }

.price-card li::before { content: "✓"; color: var(--coral-dark); margin-right: 7px; }

.price-card.featured li::before { color: var(--coral); }

.price-button { border: 1px solid var(--line); width: 100%; color: var(--aubergine); text-align: center; border-radius: 8px; margin-top: auto; padding: 12px 15px; font-size: 12px; font-weight: 850; }

.featured-button { border-color: var(--coral); background: var(--coral); color: rgb(255, 255, 255); }

.pricing-note { color: var(--taupe); margin: 18px 0px 0px; font-size: 11px; }

footer { border-top: 1px solid var(--line); width: min(1240px, 100% - 48px); color: var(--taupe); justify-content: space-between; align-items: center; gap: 25px; margin: 0px auto; padding: 30px 0px 40px; font-size: 11px; display: flex; }

.account-shell { place-items: start center; min-height: 100vh; padding: 42px 24px 70px; display: grid; }

.account-logo { margin-bottom: 30px; display: inline-flex; }

.account-logo img { width: auto; height: 50px; }

.account-card { border: 1px solid var(--line); width: min(480px, 100%); box-shadow: var(--shadow); background: rgba(255, 253, 251, 0.94); border-radius: 18px; padding: clamp(28px, 5vw, 48px); }

.account-card h1 { color: var(--aubergine); letter-spacing: -0.05em; margin: 0px; font-size: clamp(30px, 6vw, 42px); }

.account-card > p:not(.eyebrow):not(.account-switch) { color: var(--taupe); margin: 12px 0px 26px; line-height: 1.6; }

.account-card form, .account-card label { gap: 8px; display: grid; }

.account-card form { gap: 17px; }

.account-card label { color: var(--aubergine); font-size: 13px; font-weight: 780; }

.account-card input, .account-card select { border: 1px solid var(--line); width: 100%; color: var(--ink); background: rgb(255, 255, 255); border-radius: 9px; outline: none; padding: 13px 14px; }

.account-card input:focus, .account-card select:focus { border-color: var(--coral); box-shadow: rgba(232, 111, 97, 0.13) 0px 0px 0px 3px; }

.account-card label small { color: var(--taupe); font-size: 10px; font-weight: 600; }

.account-submit { cursor: pointer; border: 0px; width: 100%; }

.account-submit:disabled { opacity: 0.65; }

.account-error { color: rgb(150, 60, 53); background: rgb(255, 240, 238); border-radius: 8px; padding: 11px 12px; font-size: 12px; }

.account-switch { color: var(--taupe); text-align: center; margin: 24px 0px 0px; font-size: 12px; }

.account-switch a { color: var(--coral-dark); font-weight: 800; }

.dashboard-loading { min-height: 100vh; color: var(--taupe); place-items: center; display: grid; }

.dashboard-shell { width: min(1180px, 100% - 48px); min-height: 100vh; margin: 0px auto; padding-bottom: 70px; }

.dashboard-header { justify-content: space-between; align-items: center; height: 88px; display: flex; }

.dashboard-header .account-logo { margin: 0px; }

.dashboard-header button { border: 1px solid var(--line); color: var(--taupe); cursor: pointer; background: 0px 0px; border-radius: 8px; padding: 9px 15px; }

.dashboard-welcome { background: var(--aubergine); color: rgb(255, 255, 255); border-radius: 20px; justify-content: space-between; align-items: center; gap: 30px; padding: clamp(28px, 5vw, 54px); display: flex; }

.dashboard-welcome h1 { letter-spacing: -0.05em; margin: 0px; font-size: clamp(34px, 5vw, 56px); }

.dashboard-welcome p:not(.eyebrow) { color: rgb(221, 208, 220); margin: 10px 0px 0px; }

.owner-badge, .plan-badge { white-space: nowrap; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; padding: 10px 15px; font-size: 12px; font-weight: 800; }

.owner-badge { color: rgb(255, 210, 204); border-color: rgba(232, 111, 97, 0.7); }

.dashboard-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; display: grid; }

.usage-card, .dashboard-action, .billing-action { border: 1px solid var(--line); background: var(--white); border-radius: 16px; box-shadow: rgba(51, 35, 49, 0.06) 0px 12px 35px; }

.usage-card { padding: 25px; }

.usage-card.featured { border-color: var(--coral); background: var(--blush); }

.usage-card > span { color: var(--taupe); letter-spacing: 0.12em; font-size: 10px; font-weight: 850; }

.usage-card strong { color: var(--aubergine); margin-top: 12px; font-size: 38px; display: block; }

.usage-card p { color: var(--taupe); margin: 7px 0px 0px; font-size: 12px; }

.dashboard-action, .billing-action { justify-content: space-between; align-items: center; gap: 25px; margin-top: 18px; padding: 30px; display: flex; }

.billing-action h2 { color: var(--aubergine); margin: 0px; font-size: 27px; }

.billing-action p:not(.eyebrow) { color: var(--taupe); margin: 7px 0px 0px; }

.billing-action .account-error { margin-top: 13px; }

.billing-action button { cursor: pointer; white-space: nowrap; border: 0px; }

.billing-action button:disabled { opacity: 0.6; cursor: not-allowed; }

.dashboard-action h2 { color: var(--aubergine); margin: 0px; font-size: 27px; }

.dashboard-action p:not(.eyebrow) { color: var(--taupe); margin: 7px 0px 0px; }

@keyframes spin { 
  100% { transform: rotate(360deg); }
}

@keyframes pulse { 
  50% { opacity: 0.5; }
}

@media (width <= 940px) {
  .site-header nav { display: none; }
  .studio { grid-template-columns: 1fr; }
  .preview { border-top: 1px solid var(--line); border-left: 0px; }
  .examples, .pricing { grid-template-columns: 1fr; gap: 38px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 22px; max-width: 520px; margin: 0px auto; }
  .price-card.featured { transform: none; }
  .example-visual { width: min(420px, 100%); height: 560px; margin: 0px auto; }
}

@media (width <= 700px) {
  .site-header, .hero, .studio, .trust, .section, .pricing, footer { width: min(100% - 28px, 1240px); }
  .site-header { height: 68px; }
  .outline-button { padding: 8px 12px; font-size: 12px; }
  h1 { font-size: clamp(39px, 12vw, 52px); }
  .hero { margin-top: 26px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 9px; }
  .studio { margin-top: 28px; }
  .generator, .preview { padding: 20px 15px; }
  .panel-head { flex-direction: column; }
  .steps { justify-content: space-between; width: 100%; }
  .style-grid, .two-fields, .script-box { grid-template-columns: 1fr; }
  .generate-row { flex-direction: column; align-items: flex-start; }
  .generate-button { width: 100%; }
  .phone, .phone.wide { width: 248px; }
  .phone.wide { height: 178px; }
  .trust { flex-direction: column; align-items: flex-start; gap: 9px; padding: 19px 0px; }
  .section, .pricing { margin: 72px auto; }
  .how-grid { grid-template-columns: 1fr; }
  .how-grid article { min-height: 155px; }
  .price-card { grid-template-columns: 1fr; }
  .price-card .primary-button { grid-column: auto; }
  footer, .dashboard-welcome, .dashboard-action, .billing-action { flex-direction: column; align-items: flex-start; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-action .primary-button { text-align: center; width: 100%; }
  .billing-action .primary-button { width: 100%; }
}

.result-page { min-height: 100vh; place-items: center; padding: 42px 24px; display: grid; }
.result-page > .brand { position: absolute; top: 28px; left: 5vw; }
.result-card { border: 1px solid var(--line); background: rgba(255, 253, 251, 0.94); width: min(560px, 100%); text-align: center; border-radius: 17px; padding: 48px 38px; box-shadow: var(--shadow); }
.result-card h1 { color: var(--aubergine); margin: 10px 0 14px; font-family: "Iowan Old Style", Georgia, serif; font-size: clamp(38px, 6vw, 54px); line-height: 1; }
.result-card > p:not(.eyebrow) { color: var(--taupe); margin: 0 auto 25px; line-height: 1.6; }
.result-icon { background: rgb(232, 243, 237); color: var(--green); width: 56px; height: 56px; border-radius: 50%; place-items: center; margin: 0 auto 20px; font-size: 25px; font-weight: 900; display: grid; }

.auth-page { min-height: 100vh; place-items: center; padding: 80px 24px 42px; display: grid; }
.auth-page > .brand { position: absolute; top: 28px; left: 5vw; }
.auth-card { border: 1px solid var(--line); background: rgba(255, 253, 251, 0.95); width: min(470px, 100%); border-radius: 17px; padding: 38px; box-shadow: var(--shadow); }
.auth-card h1, .dashboard-welcome h1 { color: var(--aubergine); margin: 5px 0 10px; font-family: "Iowan Old Style", Georgia, serif; font-size: clamp(36px, 5vw, 50px); line-height: 1; }
.auth-card > p:not(.eyebrow) { color: var(--taupe); margin-bottom: 25px; line-height: 1.5; }
.auth-form label { margin-bottom: 15px; font-size: 12px; font-weight: 800; display: block; }
.auth-form input { border: 1px solid var(--line); background: var(--white); width: 100%; height: 44px; border-radius: 8px; margin-top: 6px; padding: 0 12px; }
.auth-form .primary-button { width: 100%; margin-top: 5px; }
.auth-message { border-radius: 8px; margin: 0 0 14px; padding: 10px; font-size: 12px; }
.auth-message.error { background: rgb(255, 240, 238); color: rgb(150, 60, 53); }
.auth-message.success { background: rgb(232, 243, 237); color: var(--green); }
.auth-switch { color: var(--taupe); text-align: center; margin-top: 18px; font-size: 12px; display: block; }
.auth-switch a { color: var(--coral-dark); font-weight: 800; }
.dashboard-page { width: min(1180px, 100% - 40px); min-height: 100vh; margin: auto; padding-bottom: 70px; }
.dashboard-header { height: 86px; justify-content: space-between; align-items: center; display: flex; }
.dashboard-header-actions { align-items: center; gap: 10px; display: flex; }
.dashboard-header form { margin: 0; }
.dashboard-welcome { color: white; background: linear-gradient(125deg, var(--aubergine), #533247); border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; justify-content: space-between; align-items: center; gap: 28px; padding: clamp(30px, 5vw, 48px); display: flex; box-shadow: 0 24px 60px rgba(55, 34, 50, .17); }
.dashboard-welcome .eyebrow { color: #ffb3a8; }
.dashboard-welcome h1 { color: white; margin: 5px 0 10px; font-family: "Iowan Old Style", Georgia, serif; font-size: clamp(38px, 5vw, 54px); line-height: 1; }
.dashboard-welcome > div > p:last-child { color: #e5d9e2; margin: 0; }
.dashboard-profile { align-items: flex-end; gap: 10px; display: flex; flex-direction: column; }
.dashboard-profile small { color: #d8cbd4; }
.account-active, .account-inactive { border-radius: 99px; padding: 9px 13px; font-size: 11px; font-weight: 850; }
.account-active { background: #e8f3ed; color: var(--green); }
.account-inactive { background: var(--coral-pale); color: var(--coral-dark); }
.dashboard-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0; display: grid; }
.dashboard-grid article { min-height: 150px; border: 1px solid var(--line); background: rgba(255, 253, 251, .96); border-radius: 16px; padding: 24px; box-shadow: 0 12px 34px rgba(51, 35, 49, .05); }
.dashboard-grid article > span { color: var(--coral-dark); letter-spacing: .12em; font-size: 9px; font-weight: 850; }
.dashboard-grid strong { color: var(--aubergine); margin: 14px 0 7px; font-family: "Iowan Old Style", Georgia, serif; font-size: 32px; display: block; }
.dashboard-grid p { color: var(--taupe); margin: 0; font-size: 12px; line-height: 1.5; }
.dashboard-recovery { border: 1px solid rgba(232, 111, 97, .35); background: var(--blush); border-radius: 16px; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 22px; padding: 24px; display: flex; }
.dashboard-recovery h2 { color: var(--aubergine); margin: 4px 0 6px; font-family: "Iowan Old Style", Georgia, serif; font-size: 26px; }
.dashboard-recovery p:not(.eyebrow) { color: var(--taupe); margin: 0; font-size: 13px; }
.dashboard-content { grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 18px; display: grid; }
.video-library, .plan-panel { border: 1px solid var(--line); background: rgba(255, 253, 251, .96); border-radius: 17px; box-shadow: 0 14px 38px rgba(51, 35, 49, .06); }
.video-library { padding: 26px; }
.dashboard-section-head { justify-content: space-between; align-items: flex-start; gap: 20px; display: flex; }
.dashboard-section-head h2, .plan-panel h2 { color: var(--aubergine); margin: 4px 0 0; font-family: "Iowan Old Style", Georgia, serif; font-size: 28px; }
.dashboard-section-head > a { color: var(--coral-dark); font-size: 12px; font-weight: 850; }
.video-list { margin-top: 20px; display: grid; }
.video-row { border-top: 1px solid var(--line); grid-template-columns: 42px 1fr auto; align-items: center; gap: 13px; min-height: 76px; display: grid; }
.video-file-icon { color: white; background: var(--aubergine); border-radius: 11px; place-items: center; width: 38px; height: 38px; padding-left: 2px; font-size: 11px; display: grid; }
.video-row > div { min-width: 0; display: grid; gap: 4px; }
.video-row strong { color: var(--aubergine); font-size: 13px; }
.video-row small { color: var(--taupe); font-size: 11px; }
.video-row > a { color: var(--coral-dark); border: 1px solid var(--coral); border-radius: 8px; padding: 8px 10px; font-size: 11px; font-weight: 850; }
.video-empty { text-align: center; place-items: center; min-height: 260px; padding: 25px; display: grid; align-content: center; }
.video-empty > span { color: var(--coral-dark); background: var(--coral-pale); border-radius: 50%; place-items: center; width: 48px; height: 48px; padding-left: 3px; display: grid; }
.video-empty h3 { color: var(--aubergine); margin: 14px 0 4px; font-family: "Iowan Old Style", Georgia, serif; font-size: 24px; }
.video-empty p { color: var(--taupe); margin: 0 0 18px; font-size: 12px; }
.plan-panel { align-self: start; padding: 26px; }
.plan-panel > p:not(.eyebrow) { color: var(--taupe); min-height: 44px; margin: 10px 0 22px; font-size: 12px; line-height: 1.55; }
.plan-panel dl { border-top: 1px solid var(--line); margin: 0 0 22px; }
.plan-panel dl > div { border-bottom: 1px solid var(--line); justify-content: space-between; gap: 15px; padding: 12px 0; font-size: 12px; display: flex; }
.plan-panel dt { color: var(--taupe); }
.plan-panel dd { color: var(--aubergine); margin: 0; font-weight: 800; }
.plan-panel .primary-button, .plan-panel .price-button { width: 100%; }
@media (width <= 820px) {
  .dashboard-content { grid-template-columns: 1fr; }
}
@media (width <= 700px) {
  .auth-card { padding: 30px 22px; }
  .dashboard-page { width: min(100% - 28px, 1180px); }
  .dashboard-header .brand img { width: 165px; height: auto; }
  .dashboard-header-actions > .primary-button { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-welcome, .dashboard-recovery { align-items: flex-start; flex-direction: column; }
  .dashboard-profile { align-items: flex-start; }
  .video-row { grid-template-columns: 42px 1fr; padding: 12px 0; }
  .video-row > a { grid-column: 2; justify-self: start; }
}

/* Professional customer dashboard */
.dashboard-app {
  --dashboard-bg: #f7f4f1;
  --dashboard-card: #fffefd;
  min-height: 100vh;
  background:
    radial-gradient(circle at 92% 4%, rgba(232, 111, 97, .08), transparent 25rem),
    var(--dashboard-bg);
  grid-template-columns: 248px minmax(0, 1fr);
  display: grid;
}

.dashboard-sidebar {
  z-index: 10;
  border-right: 1px solid #e7ddd6;
  background: rgba(255, 253, 251, .96);
  flex-direction: column;
  min-height: 100vh;
  padding: 28px 20px 22px;
  display: flex;
  position: sticky;
  top: 0;
}

.dashboard-brand {
  align-items: center;
  height: 50px;
  margin: 0 10px 42px;
  display: flex;
}

.dashboard-brand img {
  object-fit: contain;
  width: auto;
  height: 40px;
}

.dashboard-nav {
  gap: 7px;
  display: grid;
}

.dashboard-nav a,
.dashboard-logout {
  color: #71666d;
  border: 1px solid transparent;
  border-radius: 11px;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 720;
  transition: .18s ease;
  display: flex;
}

.dashboard-nav a:hover,
.dashboard-logout:hover {
  color: var(--aubergine);
  background: #fbf4f1;
}

.dashboard-nav a.active {
  color: var(--coral-dark);
  border-color: rgba(232, 111, 97, .14);
  background: linear-gradient(90deg, rgba(232, 111, 97, .13), rgba(232, 111, 97, .05));
  box-shadow: inset 3px 0 var(--coral);
}

.dashboard-nav svg,
.dashboard-logout svg,
.dashboard-section-head a svg,
.dashboard-command-button svg,
.video-row > a svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
}

.dashboard-sidebar-bottom {
  border-top: 1px solid #ebe2dc;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  display: grid;
}

.dashboard-account-card {
  min-width: 0;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  display: grid;
}

.dashboard-avatar {
  color: white;
  background: linear-gradient(135deg, var(--coral), #b74c61);
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 13px;
  font-weight: 850;
  display: grid;
  box-shadow: 0 7px 18px rgba(176, 77, 91, .18);
}

.dashboard-account-card > div {
  min-width: 0;
  display: grid;
}

.dashboard-account-card strong {
  color: var(--aubergine);
  font-size: 12px;
}

.dashboard-account-card small {
  color: #94888f;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  font-size: 9px;
  overflow: hidden;
}

.dashboard-sidebar-bottom form {
  margin: 0;
}

.dashboard-logout {
  cursor: pointer;
  background: transparent;
  width: 100%;
}

.dashboard-main {
  width: min(1320px, 100%);
  min-width: 0;
  margin: 0 auto;
  padding: 31px clamp(24px, 4vw, 54px) 70px;
}

.dashboard-topbar {
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  margin-bottom: 28px;
  display: flex;
}

.dashboard-topbar .eyebrow {
  margin-bottom: 5px;
  font-size: 9px;
}

.dashboard-topbar h1 {
  color: var(--aubergine);
  letter-spacing: -.035em;
  margin: 0;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  font-size: clamp(27px, 3vw, 36px);
  font-weight: 760;
  line-height: 1.08;
}

.dashboard-billing-message {
  color: #8b3028;
  background: #fff0ee;
  border: 1px solid rgba(139, 48, 40, .14);
  border-radius: 11px;
  margin: -8px 0 18px;
  padding: 11px 14px;
  font-size: 11px;
}

.dashboard-billing-message.success {
  color: #21643a;
  background: #edf7ef;
  border-color: rgba(33, 100, 58, .13);
}

.dashboard-profile {
  align-items: center;
  gap: 12px;
  display: flex;
  flex-direction: row;
}

.account-active,
.account-inactive {
  white-space: nowrap;
  border-radius: 99px;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 820;
  display: inline-flex;
}

.account-active i,
.account-inactive i,
.video-ready i {
  border-radius: 50%;
  width: 6px;
  height: 6px;
  display: block;
}

.account-active i,
.video-ready i {
  background: #3c916b;
  box-shadow: 0 0 0 3px rgba(60, 145, 107, .12);
}

.account-inactive i {
  background: var(--coral-dark);
}

.dashboard-command {
  min-height: 252px;
  color: white;
  background:
    radial-gradient(circle at 77% 12%, rgba(255, 187, 178, .26), transparent 18rem),
    linear-gradient(125deg, #2f202d 4%, #4d3043 62%, #69394a);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  grid-template-columns: minmax(0, 1fr) 270px;
  align-items: center;
  gap: 36px;
  padding: clamp(30px, 4.5vw, 48px);
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 58px rgba(51, 35, 49, .16);
}

.dashboard-command > div:first-child {
  z-index: 2;
  max-width: 650px;
  position: relative;
}

.dashboard-command .eyebrow {
  color: #ffb0a4;
}

.dashboard-command h2 {
  letter-spacing: -.045em;
  margin: 4px 0 11px;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.02;
}

.dashboard-command p:not(.eyebrow) {
  max-width: 560px;
  color: #e8dfe5;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.dashboard-command-button {
  color: white;
  background: var(--coral);
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 23px;
  padding: 12px 17px;
  font-size: 12px;
  font-weight: 820;
  transition: .18s ease;
  display: flex;
  box-shadow: 0 10px 24px rgba(232, 111, 97, .25);
}

.dashboard-command-button:hover {
  background: #f07b6d;
  transform: translateY(-1px);
}

.dashboard-command-visual {
  place-items: center;
  min-height: 170px;
  display: grid;
  position: relative;
}

.command-orbit {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  position: absolute;
}

.command-orbit-one {
  width: 220px;
  height: 220px;
}

.command-orbit-two {
  border-color: rgba(255, 178, 167, .24);
  width: 155px;
  height: 155px;
}

.command-phone {
  z-index: 2;
  color: white;
  background: linear-gradient(155deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 24px;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  width: 94px;
  height: 158px;
  padding: 10px;
  display: grid;
  transform: rotate(7deg);
  box-shadow: 0 20px 44px rgba(20, 12, 19, .24);
  backdrop-filter: blur(7px);
}

.command-phone i {
  background: rgba(255, 255, 255, .6);
  border-radius: 99px;
  width: 26px;
  height: 4px;
}

.command-phone b {
  color: #ffd1ca;
  letter-spacing: .11em;
  font-size: 18px;
}

.command-phone small {
  color: #e8dfe5;
  font-size: 8px;
}

.dashboard-app .dashboard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
  display: grid;
}

.dashboard-app .dashboard-grid article {
  border: 1px solid #e5dcd5;
  background: rgba(255, 254, 253, .96);
  border-radius: 16px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  min-height: 128px;
  padding: 20px;
  display: grid;
  box-shadow: 0 10px 28px rgba(51, 35, 49, .045);
}

.dashboard-metric-icon {
  color: var(--coral-dark);
  background: linear-gradient(145deg, #fff1ed, #fae3dd);
  border: 1px solid rgba(232, 111, 97, .13);
  border-radius: 12px;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
}

.dashboard-metric-icon svg {
  width: 20px;
  height: 20px;
}

.dashboard-app .dashboard-grid article > div {
  min-width: 0;
}

.dashboard-app .dashboard-grid small {
  color: #9a8d94;
  letter-spacing: .09em;
  font-size: 8px;
  font-weight: 850;
}

.dashboard-app .dashboard-grid strong {
  color: var(--aubergine);
  letter-spacing: -.03em;
  margin: 5px 0 0;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  font-size: 25px;
  line-height: 1;
  display: block;
}

.dashboard-app .dashboard-grid p {
  color: var(--taupe);
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.4;
}

.dashboard-app .dashboard-recovery {
  border: 1px solid rgba(232, 111, 97, .28);
  background: linear-gradient(90deg, #fff4f0, #fffaf8);
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  padding: 22px 24px;
  display: flex;
  box-shadow: 0 9px 26px rgba(232, 111, 97, .06);
}

.dashboard-app .dashboard-recovery h2 {
  margin: 3px 0 5px;
  font-size: 23px;
}

.dashboard-content {
  grid-template-columns: minmax(0, 1.7fr) minmax(290px, .72fr);
  align-items: start;
  gap: 18px;
  display: grid;
}

.dashboard-app .video-library,
.dashboard-app .plan-panel {
  border: 1px solid #e5dcd5;
  background: rgba(255, 254, 253, .97);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(51, 35, 49, .055);
}

.dashboard-app .video-library {
  min-width: 0;
  padding: 27px;
}

.dashboard-section-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  display: flex;
}

.dashboard-section-head h2,
.dashboard-app .plan-panel h2 {
  color: var(--aubergine);
  letter-spacing: -.035em;
  margin: 3px 0 0;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  font-size: 23px;
  font-weight: 760;
}

.dashboard-section-head > div > p:last-child {
  color: var(--taupe);
  margin: 7px 0 0;
  font-size: 11px;
}

.dashboard-section-head > a {
  color: var(--coral-dark);
  background: #fff5f2;
  border: 1px solid rgba(232, 111, 97, .23);
  border-radius: 9px;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 850;
  display: flex;
}

.dashboard-section-head > a svg {
  width: 15px;
  height: 15px;
}

.video-list {
  margin-top: 23px;
  display: grid;
}

.video-list-labels {
  color: #a0959a;
  grid-template-columns: minmax(220px, 1fr) 90px 104px;
  gap: 14px;
  padding: 0 7px 9px 58px;
  font-size: 8px;
  font-weight: 820;
  display: grid;
}

.video-list-labels span:last-child {
  text-align: right;
}

.dashboard-app .video-row {
  border-top: 1px solid #eee6e1;
  grid-template-columns: 42px minmax(160px, 1fr) 90px auto;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  display: grid;
}

.dashboard-app .video-file-icon {
  color: white;
  background: linear-gradient(145deg, var(--aubergine), #594052);
  border-radius: 11px;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
  box-shadow: 0 7px 17px rgba(51, 35, 49, .13);
}

.dashboard-app .video-file-icon svg {
  width: 17px;
  height: 17px;
}

.video-row-copy {
  min-width: 0;
  gap: 4px;
  display: grid;
}

.dashboard-app .video-row strong {
  color: var(--aubergine);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.dashboard-app .video-row small {
  color: #94888f;
  font-size: 9px;
}

.video-ready {
  color: var(--green);
  align-items: center;
  gap: 7px;
  font-size: 9px;
  font-weight: 800;
  display: flex;
}

.dashboard-app .video-row > a {
  color: var(--coral-dark);
  border: 1px solid rgba(232, 111, 97, .48);
  border-radius: 9px;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 9px;
  font-weight: 850;
  display: flex;
}

.dashboard-app .video-row > a svg {
  width: 14px;
  height: 14px;
}

.dashboard-app .video-empty > span svg {
  width: 21px;
  height: 21px;
}

.dashboard-app .plan-panel {
  align-self: start;
  padding: 25px;
}

.plan-panel-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  display: flex;
}

.dashboard-app .plan-panel > p:not(.eyebrow):not(.dashboard-top-plan) {
  color: var(--taupe);
  min-height: 0;
  margin: 9px 0 20px;
  font-size: 11px;
  line-height: 1.55;
}

.dashboard-app .plan-panel dl {
  border-top: 1px solid #eee6e1;
  margin: 0 0 20px;
}

.dashboard-app .plan-panel dl > div {
  border-bottom: 1px solid #eee6e1;
  justify-content: space-between;
  gap: 13px;
  padding: 11px 0;
  font-size: 10px;
  display: flex;
}

.dashboard-upgrades {
  border: 1px solid rgba(232, 111, 97, .22);
  background: #fff7f4;
  border-radius: 12px;
  gap: 8px;
  margin-bottom: 17px;
  padding: 13px;
  display: grid;
}

.dashboard-upgrades > div {
  margin-bottom: 2px;
  display: grid;
}

.dashboard-upgrades > div > strong {
  color: var(--aubergine);
  font-size: 11px;
}

.dashboard-upgrades > div > small {
  color: var(--taupe);
  margin-top: 3px;
  font-size: 8px;
}

.dashboard-upgrades form {
  margin: 0;
}

.dashboard-upgrades button {
  color: var(--aubergine);
  background: white;
  border: 1px solid #e7d8d2;
  border-radius: 8px;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 9px;
  font-weight: 820;
  display: flex;
  transition: .17s ease;
}

.dashboard-upgrades button:hover {
  color: var(--coral-dark);
  border-color: var(--coral);
  transform: translateY(-1px);
}

.dashboard-upgrades button small {
  color: var(--coral-dark);
  white-space: nowrap;
  font-size: 8px;
}

.dashboard-top-plan {
  color: var(--green);
  background: #eff8f3;
  border-radius: 9px;
  margin: 0 0 17px;
  padding: 10px 11px;
  font-size: 9px;
}

.dashboard-app .plan-panel .primary-button,
.dashboard-app .plan-panel .price-button {
  width: 100%;
  min-height: 43px;
}

@media (width <= 1080px) {
  .dashboard-app {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  .dashboard-sidebar {
    padding-inline: 14px;
  }
  .dashboard-command {
    grid-template-columns: minmax(0, 1fr) 190px;
  }
  .dashboard-content {
    grid-template-columns: 1fr;
  }
}

@media (width <= 820px) {
  .dashboard-app {
    display: block;
  }
  .dashboard-sidebar {
    border-right: 0;
    border-bottom: 1px solid #e7ddd6;
    min-height: 0;
    padding: 13px 18px;
    position: static;
  }
  .dashboard-brand {
    height: 42px;
    margin: 0 0 11px;
  }
  .dashboard-brand img {
    height: 34px;
  }
  .dashboard-nav {
    grid-template-columns: repeat(4, auto);
    gap: 5px;
    overflow-x: auto;
  }
  .dashboard-nav a {
    white-space: nowrap;
    justify-content: center;
    min-height: 38px;
    padding: 0 10px;
    font-size: 10px;
  }
  .dashboard-nav a svg {
    width: 16px;
    height: 16px;
  }
  .dashboard-sidebar-bottom {
    display: none;
  }
  .dashboard-main {
    padding: 25px 18px 55px;
  }
}

@media (width <= 700px) {
  .dashboard-topbar {
    margin-bottom: 20px;
  }
  .dashboard-profile > .account-active,
  .dashboard-profile > .account-inactive {
    display: none;
  }
  .dashboard-command {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 29px 23px;
  }
  .dashboard-command-visual {
    display: none;
  }
  .dashboard-app .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-app .dashboard-grid article {
    min-height: 100px;
  }
  .dashboard-app .dashboard-recovery {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-app .video-library,
  .dashboard-app .plan-panel {
    padding: 21px 17px;
  }
  .video-list-labels {
    display: none;
  }
  .dashboard-app .video-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px 0;
  }
  .video-ready {
    display: none;
  }
  .dashboard-app .video-row > a {
    grid-column: 3;
    grid-row: 1;
    padding: 8px;
  }
  .dashboard-app .video-row > a span {
    display: none;
  }
}

/* Marketing site */
.marketing-header {
  border-bottom: 1px solid rgba(222, 211, 202, 0.78);
  background: rgba(255, 253, 251, 0.9);
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(18px);
}

.marketing-header-inner {
  width: min(1240px, calc(100% - 48px));
  min-height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.marketing-header .brand img {
  height: 42px;
}

.marketing-header nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3.2vw, 44px);
  color: #62575e;
  font-size: 13px;
  font-weight: 700;
}

.marketing-header nav a {
  padding: 28px 0 25px;
  position: relative;
  transition: color 0.18s ease;
}

.marketing-header nav a:hover,
.marketing-header nav a.active {
  color: var(--aubergine);
}

.marketing-header nav a::after {
  content: "";
  background: var(--coral);
  height: 2px;
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  transition: right 0.18s ease;
}

.marketing-header nav a:hover::after,
.marketing-header nav a.active::after {
  right: 0;
}

.marketing-header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 12px;
  font-weight: 800;
}

.marketing-login {
  color: #665b61;
}

.marketing-header-cta {
  background: var(--aubergine);
  color: #fff;
  border-radius: 9px;
  padding: 11px 17px;
  transition: 0.18s ease;
  box-shadow: 0 7px 20px rgba(51, 35, 49, 0.12);
}

.marketing-header-cta:hover {
  background: var(--coral);
  transform: translateY(-1px);
}

.sales-hero {
  width: min(1240px, calc(100% - 48px));
  min-height: 660px;
  margin: 0 auto;
  padding: clamp(72px, 8vw, 112px) 0 82px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.82fr);
  align-items: center;
  gap: clamp(56px, 8vw, 112px);
}

.sales-hero-copy h1,
.marketing-page-hero h1 {
  max-width: 760px;
  font-size: clamp(50px, 5.5vw, 78px);
  line-height: 0.98;
}

.sales-hero-lead {
  max-width: 660px;
  color: var(--taupe);
  margin: 25px 0 30px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.58;
}

.sales-hero-actions,
.sales-cta > div:last-child {
  display: flex;
  align-items: center;
  gap: 22px;
}

.sales-primary {
  min-height: 52px;
  padding-inline: 25px;
}

.sales-secondary,
.sales-text-link {
  color: var(--aubergine);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 850;
}

.sales-secondary span,
.sales-text-link span {
  color: var(--coral);
  font-size: 18px;
  transition: transform 0.18s ease;
}

.sales-secondary:hover span,
.sales-text-link:hover span {
  transform: translateX(4px);
}

.sales-proof-row {
  color: #645960;
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 11px;
  font-weight: 750;
}

.sales-proof-row span::first-letter {
  color: var(--green);
}

.sales-hero-visual {
  min-height: 490px;
  position: relative;
  display: grid;
  place-items: center;
}

.sales-hero-visual::before {
  content: "";
  width: min(520px, 100%);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 33% 28%, rgba(255,255,255,0.92), transparent 28%),
    linear-gradient(145deg, #f7d8d2, #f4e4da 52%, #eaded7);
  border-radius: 50%;
  position: absolute;
  filter: drop-shadow(0 28px 55px rgba(51, 35, 49, 0.08));
}

.sales-video-card {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: #fffdfb;
  width: min(320px, 80%);
  border-radius: 24px;
  padding: 10px;
  position: relative;
  z-index: 2;
  box-shadow: 0 32px 75px rgba(51, 35, 49, 0.2);
  transform: rotate(1.8deg);
}

.sales-video-top,
.sales-video-bottom {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  color: #786b73;
  font-size: 9px;
  font-weight: 750;
}

.sales-video-top b {
  background: var(--blush);
  color: var(--coral-dark);
  border-radius: 999px;
  padding: 5px 8px;
}

.sales-video-image {
  height: 414px;
  border-radius: 17px;
  overflow: hidden;
  position: relative;
  background: #dfd3ca;
}

.sales-video-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sales-video-image::after {
  content: "";
  background: linear-gradient(180deg, transparent 54%, rgba(28, 20, 27, 0.72));
  position: absolute;
  inset: 0;
}

.sales-play {
  background: rgba(255, 255, 255, 0.9);
  color: var(--aubergine);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-left: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 24px rgba(31, 22, 30, 0.2);
}

.sales-video-caption {
  color: #fff;
  text-align: center;
  padding: 0 20px;
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  z-index: 2;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.sales-video-bottom i {
  background: #45a77a;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  display: inline-block;
}

.sales-floating-badge {
  border: 1px solid rgba(222, 211, 202, 0.8);
  background: rgba(255, 253, 251, 0.94);
  border-radius: 13px;
  min-width: 150px;
  padding: 13px 15px;
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 2px;
  box-shadow: 0 16px 40px rgba(51, 35, 49, 0.12);
  backdrop-filter: blur(12px);
}

.sales-floating-badge strong {
  color: var(--aubergine);
  font-size: 11px;
}

.sales-floating-badge span {
  color: var(--taupe);
  font-size: 9px;
}

.sales-badge-one {
  top: 108px;
  left: 0;
}

.sales-badge-two {
  right: 0;
  bottom: 68px;
}

.sales-trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  width: min(1240px, calc(100% - 48px));
  min-height: 86px;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  color: #4e434a;
  font-size: 11px;
}

.sales-trust span {
  color: var(--coral-dark);
  letter-spacing: 0.13em;
  font-size: 9px;
  font-weight: 900;
}

.sales-trust strong {
  font-weight: 750;
}

.sales-problem,
.studio-intro {
  width: min(1120px, calc(100% - 48px));
  margin: 112px auto 52px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: end;
  gap: clamp(50px, 9vw, 130px);
}

.sales-problem h2,
.studio-intro h2,
.sales-quality h2,
.sales-cta h2,
.pricing-comparison h2,
.marketing-faq h2,
.how-process h2,
.how-quality h2 {
  color: var(--aubergine);
  letter-spacing: -0.045em;
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.02;
}

.sales-problem > p,
.studio-intro > p {
  color: var(--taupe);
  margin: 0 0 5px;
  font-size: 15px;
  line-height: 1.7;
}

.sales-benefits {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto 120px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.sales-benefits article {
  border: 1px solid var(--line);
  background: rgba(255, 253, 251, 0.84);
  border-radius: 16px;
  min-height: 240px;
  padding: 28px;
  box-shadow: 0 14px 38px rgba(51, 35, 49, 0.045);
}

.sales-benefits article > span {
  color: var(--coral-dark);
  letter-spacing: 0.16em;
  font-size: 10px;
  font-weight: 900;
}

.sales-benefits h3,
.how-quality-grid h3 {
  color: var(--aubergine);
  margin: 48px 0 10px;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.12;
}

.sales-benefits p,
.how-quality-grid p {
  color: var(--taupe);
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}

.studio-intro {
  margin-top: 0;
}

.studio-intro + .studio {
  margin-top: 0;
}

.sales-quality {
  width: min(1120px, calc(100% - 48px));
  margin: 120px auto;
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) 1fr;
  align-items: center;
  gap: clamp(50px, 8vw, 108px);
}

.sales-quality-image {
  min-height: 540px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 26px 65px rgba(51, 35, 49, 0.16);
}

.sales-quality-image img {
  width: 100%;
  height: 540px;
  object-fit: cover;
}

.sales-quality-image::after {
  content: "";
  background: linear-gradient(180deg, transparent 65%, rgba(33, 24, 32, 0.72));
  position: absolute;
  inset: 0;
}

.sales-quality-image span {
  color: #fff;
  letter-spacing: 0.15em;
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  z-index: 2;
  font-size: 9px;
  font-weight: 900;
}

.sales-quality > div:last-child > p:not(.eyebrow) {
  color: var(--taupe);
  margin: 22px 0 24px;
  font-size: 15px;
  line-height: 1.72;
}

.sales-quality ul {
  margin: 0 0 28px;
  display: grid;
  gap: 12px;
  color: #51464d;
  font-size: 13px;
  font-weight: 750;
}

.sales-quality li span {
  color: var(--green);
  margin-right: 7px;
}

.sales-cta {
  background:
    radial-gradient(circle at 88% 12%, rgba(232,111,97,0.23), transparent 22rem),
    var(--aubergine);
  color: #fff;
  width: min(1240px, calc(100% - 48px));
  min-height: 250px;
  border-radius: 24px;
  margin: 0 auto 110px;
  padding: clamp(36px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  box-shadow: 0 25px 70px rgba(51, 35, 49, 0.18);
}

.sales-cta h2 {
  max-width: 700px;
  color: #fff;
}

.sales-cta .eyebrow {
  color: var(--coral-pale);
}

.sales-cta > div:last-child {
  flex-shrink: 0;
}

.sales-cta > div:last-child > a:last-child {
  color: #eee5ec;
  font-size: 12px;
  font-weight: 800;
}

.sales-cta.compact {
  min-height: 220px;
  margin-top: 90px;
  margin-bottom: 90px;
}

.marketing-footer {
  border-top: 1px solid var(--line);
  width: 100%;
  color: var(--taupe);
  margin: 0;
  padding: 58px max(24px, calc((100% - 1240px) / 2)) 24px;
  display: block;
  background: rgba(255, 253, 251, 0.6);
}

.marketing-footer-main {
  display: grid;
  grid-template-columns: 1.7fr 0.7fr 0.7fr;
  gap: 60px;
}

.marketing-footer-main > div {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
}

.marketing-footer-main > div:first-child p {
  max-width: 390px;
  font-size: 12px;
  line-height: 1.65;
}

.marketing-footer-main strong {
  color: var(--aubergine);
  margin-bottom: 5px;
  font-size: 11px;
}

.marketing-footer-main a:not(.brand) {
  font-size: 11px;
}

.marketing-footer-main a:not(.brand):hover {
  color: var(--coral-dark);
}

.marketing-footer-bottom {
  border-top: 1px solid var(--line);
  margin-top: 42px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  font-size: 10px;
}

.marketing-page {
  min-height: 70vh;
}

.marketing-page-hero {
  text-align: center;
  width: min(900px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(82px, 9vw, 130px) 0 54px;
}

.marketing-page-hero h1 {
  margin-inline: auto;
}

.marketing-page-hero > p:not(.eyebrow) {
  max-width: 690px;
  color: var(--taupe);
  margin: 23px auto 0;
  font-size: 17px;
  line-height: 1.65;
}

.marketing-page-hero > .primary-button {
  margin-top: 30px;
}

.pricing-assurance {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  color: #655a60;
  font-size: 11px;
  font-weight: 750;
}

.pricing-page-grid {
  margin: 30px auto 110px;
}

.pricing-page-grid .price-card {
  min-height: 450px;
  padding: 34px 31px 30px;
}

.pricing-page-grid .price-card h3 {
  font-size: 41px;
}

.pricing-page-grid .price-card p {
  min-height: 70px;
  font-size: 13px;
}

.pricing-page-grid .price-card ul {
  font-size: 12px;
  line-height: 1.55;
}

.pricing-page-grid .price-button {
  min-height: 47px;
  display: grid;
  place-items: center;
  transition: 0.18s ease;
}

.pricing-page-grid .price-button:hover {
  border-color: var(--coral);
  color: var(--coral-dark);
  transform: translateY(-1px);
}

.pricing-page-grid .featured-button:hover {
  background: #f17b6d;
  color: #fff;
}

.pricing-comparison {
  width: min(960px, calc(100% - 48px));
  margin: 0 auto 120px;
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  align-items: start;
  gap: 80px;
}

.comparison-list {
  border: 1px solid var(--line);
  background: rgba(255, 253, 251, 0.82);
  border-radius: 17px;
  padding: 8px 24px;
  box-shadow: 0 18px 46px rgba(51, 35, 49, 0.06);
}

.comparison-list > div {
  border-bottom: 1px solid var(--line);
  min-height: 61px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
}

.comparison-list > div:last-child {
  border-bottom: 0;
}

.comparison-list strong {
  color: var(--green);
  text-align: right;
  font-size: 11px;
}

.marketing-faq {
  width: min(960px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  align-items: start;
  gap: 80px;
}

.marketing-faq details {
  border-top: 1px solid var(--line);
  padding: 19px 0;
}

.marketing-faq details:last-child {
  border-bottom: 1px solid var(--line);
}

.marketing-faq summary {
  color: var(--aubergine);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

.marketing-faq details p {
  color: var(--taupe);
  margin: 11px 25px 0 0;
  font-size: 12px;
  line-height: 1.65;
}

.how-hero {
  padding-bottom: 86px;
}

.how-process {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto 120px;
}

.how-process article {
  border-top: 1px solid var(--line);
  min-height: 390px;
  padding: 62px 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(260px, 0.72fr);
  align-items: center;
  gap: 38px;
}

.how-process article:last-child {
  border-bottom: 1px solid var(--line);
}

.how-number {
  align-self: start;
  color: var(--coral-dark);
  letter-spacing: 0.16em;
  padding-top: 7px;
  font-size: 11px;
  font-weight: 900;
}

.how-process article > div:nth-child(2) > p:not(.eyebrow) {
  max-width: 560px;
  color: var(--taupe);
  margin: 18px 0;
  font-size: 14px;
  line-height: 1.7;
}

.how-process ul {
  display: grid;
  gap: 8px;
  color: #5b5056;
  font-size: 12px;
  font-weight: 700;
}

.how-process li::before {
  content: "✓";
  color: var(--green);
  margin-right: 8px;
}

.how-demo {
  border: 1px solid rgba(222, 211, 202, 0.8);
  background: rgba(255, 253, 251, 0.9);
  border-radius: 18px;
  min-height: 230px;
  padding: 30px;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: 0 18px 48px rgba(51, 35, 49, 0.07);
}

.how-demo strong {
  color: var(--aubergine);
  margin: 10px 0 3px;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 23px;
}

.how-demo small,
.how-demo > span:not(:first-child) {
  color: var(--taupe);
  font-size: 10px;
}

.upload-demo > span:first-child,
.delivery-demo > span:first-child {
  background: var(--blush);
  color: var(--coral-dark);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin: 0 auto;
  display: grid;
  place-items: center;
  font-size: 27px;
}

.delivery-demo > span:first-child {
  background: #eaf5ef;
  color: var(--green);
  font-size: 20px;
}

.settings-demo {
  text-align: left;
  place-content: center stretch;
  gap: 6px;
}

.settings-demo strong {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 11px;
}

.how-quality {
  background: var(--aubergine);
  color: #fff;
  width: min(1240px, calc(100% - 48px));
  border-radius: 24px;
  margin: 0 auto 120px;
  padding: clamp(46px, 6vw, 76px);
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 70px;
}

.how-quality h2 {
  color: #fff;
}

.how-quality .eyebrow {
  color: var(--coral-pale);
}

.how-quality-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.how-quality-grid article {
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.055);
  border-radius: 13px;
  padding: 23px;
}

.how-quality-grid article > span {
  color: var(--coral);
}

.how-quality-grid h3 {
  color: #fff;
  margin: 22px 0 8px;
  font-size: 20px;
}

.how-quality-grid p {
  color: #d7ccd4;
  font-size: 11px;
}

@media (width <= 980px) {
  .marketing-header nav {
    display: none;
  }

  .sales-hero {
    grid-template-columns: 1fr 0.78fr;
    gap: 40px;
  }

  .sales-badge-one {
    left: -16px;
  }

  .sales-badge-two {
    right: -16px;
  }

  .pricing-comparison,
  .marketing-faq {
    gap: 45px;
  }

  .how-process article {
    grid-template-columns: 55px 1fr;
  }

  .how-demo {
    grid-column: 2;
    min-height: 190px;
  }

  .how-quality {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (width <= 760px) {
  .marketing-header-inner {
    width: min(100% - 28px, 1240px);
    min-height: 68px;
    gap: 12px;
  }

  .marketing-header .brand img {
    height: 34px;
  }

  .marketing-header-actions {
    gap: 10px;
  }

  .marketing-login {
    display: none;
  }

  .marketing-header-cta {
    padding: 10px 13px;
    font-size: 10px;
  }

  .sales-hero {
    width: min(100% - 28px, 1240px);
    min-height: 0;
    padding: 62px 0 55px;
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .sales-hero-copy h1,
  .marketing-page-hero h1 {
    font-size: clamp(43px, 12vw, 58px);
  }

  .sales-hero-lead {
    margin: 20px 0 25px;
    font-size: 16px;
  }

  .sales-hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .sales-hero-visual {
    min-height: 500px;
  }

  .sales-video-card {
    width: 270px;
  }

  .sales-video-image {
    height: 372px;
  }

  .sales-badge-one {
    top: 76px;
    left: 0;
  }

  .sales-badge-two {
    right: 0;
    bottom: 50px;
  }

  .sales-trust {
    width: min(100% - 28px, 1240px);
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .sales-trust span {
    width: 100%;
  }

  .sales-problem,
  .studio-intro,
  .sales-quality,
  .pricing-comparison,
  .marketing-faq {
    width: min(100% - 28px, 1120px);
    margin-top: 78px;
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .sales-benefits {
    width: min(100% - 28px, 1120px);
    margin-bottom: 82px;
    grid-template-columns: 1fr;
  }

  .sales-benefits article {
    min-height: 190px;
  }

  .sales-benefits h3 {
    margin-top: 32px;
  }

  .studio-intro {
    margin-top: 0;
  }

  .sales-quality {
    margin-bottom: 80px;
  }

  .sales-quality-image,
  .sales-quality-image img {
    min-height: 440px;
    height: 440px;
  }

  .sales-cta,
  .sales-cta.compact {
    width: min(100% - 28px, 1240px);
    margin-bottom: 70px;
    padding: 34px 25px;
    flex-direction: column;
    align-items: flex-start;
  }

  .sales-cta > div:last-child {
    align-items: flex-start;
    flex-direction: column;
  }

  .marketing-footer {
    padding: 45px 20px 22px;
  }

  .marketing-footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 35px 22px;
  }

  .marketing-footer-main > div:first-child {
    grid-column: 1 / -1;
  }

  .marketing-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .marketing-page-hero {
    width: min(100% - 28px, 900px);
    padding: 62px 0 38px;
    text-align: left;
  }

  .marketing-page-hero > p:not(.eyebrow) {
    font-size: 15px;
  }

  .pricing-assurance {
    justify-content: flex-start;
  }

  .pricing-page-grid {
    margin: 30px auto 82px;
  }

  .pricing-page-grid .price-card {
    min-height: auto;
  }

  .pricing-comparison,
  .marketing-faq {
    margin-bottom: 82px;
  }

  .how-hero {
    padding-bottom: 60px;
  }

  .how-process {
    width: min(100% - 28px, 1120px);
    margin-bottom: 82px;
  }

  .how-process article {
    min-height: 0;
    padding: 48px 0;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .how-number {
    padding-top: 0;
  }

  .how-demo {
    grid-column: auto;
  }

  .how-quality {
    width: min(100% - 28px, 1240px);
    margin-bottom: 82px;
    padding: 38px 24px;
  }

  .how-quality-grid {
    grid-template-columns: 1fr;
  }
}

@media (width <= 420px) {
  .sales-badge-one {
    left: -5px;
  }

  .sales-badge-two {
    right: -5px;
  }

  .sales-floating-badge {
    min-width: 133px;
    padding: 11px 12px;
  }
}

/* Premium conversion system */
.marketing-announcement {
  background: var(--aubergine);
  color: #f8f1f5;
  width: 100%;
}

.marketing-announcement > div {
  width: min(1240px, calc(100% - 48px));
  min-height: 37px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  font-size: 10px;
}

.marketing-announcement span {
  background: var(--coral);
  color: #fff;
  border-radius: 999px;
  padding: 4px 8px;
  letter-spacing: 0.12em;
  font-size: 8px;
  font-weight: 900;
}

.marketing-announcement p {
  margin: 0;
  color: #eadfe7;
  font-weight: 650;
}

.marketing-announcement a {
  color: #fff;
  font-weight: 850;
}

.marketing-announcement b {
  color: var(--coral);
  margin-left: 3px;
}

.marketing-header {
  box-shadow: 0 5px 24px rgba(51, 35, 49, 0.035);
}

.marketing-header-inner {
  min-height: 76px;
}

.marketing-header-cta {
  background: var(--coral);
  min-width: 103px;
  text-align: center;
  box-shadow: 0 9px 25px rgba(232, 111, 97, 0.2);
}

.marketing-header-cta:hover {
  background: var(--coral-dark);
}

.sales-hero {
  min-height: 715px;
  padding-top: clamp(70px, 7vw, 98px);
  padding-bottom: 76px;
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  gap: clamp(55px, 7vw, 94px);
}

.sales-hero-copy {
  position: relative;
  z-index: 3;
}

.sales-hero-label {
  border: 1px solid #eadfd8;
  background: rgba(255, 253, 251, 0.8);
  color: #675b62;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 21px;
  padding: 7px 12px;
  font-size: 9px;
  font-weight: 800;
  box-shadow: 0 8px 25px rgba(51, 35, 49, 0.04);
}

.sales-hero-label span {
  color: var(--green);
  margin-right: 6px;
}

.sales-hero-copy h1 {
  max-width: 675px;
  font-size: clamp(50px, 5vw, 72px);
  line-height: 0.98;
}

.sales-hero-copy h1 em {
  color: var(--coral-dark);
  font-weight: 500;
}

.sales-hero-lead {
  max-width: 610px;
  margin: 24px 0 29px;
  font-size: 17px;
}

.sales-primary span {
  font-size: 17px;
}

.sales-play-small {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--coral-dark) !important;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-left: 2px;
  font-size: 9px !important;
  box-shadow: 0 7px 18px rgba(51, 35, 49, 0.07);
}

.sales-price-note {
  color: #8a7d84;
  margin: 13px 0 0;
  font-size: 10px;
  font-weight: 650;
}

.sales-proof-row {
  border-top: 1px solid var(--line);
  margin-top: 25px;
  padding-top: 19px;
}

.sales-proof-row span {
  color: #5c5157;
}

.sales-proof-row b {
  color: var(--green);
  margin-right: 4px;
}

.sales-hero-visual {
  min-height: 545px;
  place-items: center end;
}

.sales-hero-visual::before {
  width: 570px;
  max-width: 100%;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,0.95), transparent 24%),
    linear-gradient(145deg, #f9dad3 0%, #f2e5dc 49%, #eaded8 100%);
  border-radius: 46% 54% 58% 42% / 47% 42% 58% 53%;
  right: -10px;
}

.sales-workspace {
  border: 1px solid rgba(222, 211, 202, 0.9);
  background: rgba(255, 253, 251, 0.97);
  width: min(590px, 100%);
  border-radius: 20px;
  padding: 8px;
  position: relative;
  z-index: 2;
  box-shadow: 0 38px 90px rgba(51, 35, 49, 0.2);
  transform: rotate(0.8deg);
}

.sales-workspace-bar {
  min-height: 40px;
  padding: 0 9px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: #887a82;
  font-size: 8px;
  font-weight: 750;
}

.sales-workspace-bar > div {
  display: flex;
  gap: 5px;
}

.sales-workspace-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
  background: #e6d9d1;
}

.sales-workspace-bar i:first-child {
  background: var(--coral);
}

.sales-workspace-bar b {
  color: var(--green);
  justify-self: end;
  letter-spacing: 0.1em;
  font-size: 7px;
}

.sales-workspace-body {
  background: #f8f3ee;
  border-radius: 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: 0.76fr 1fr;
  gap: 14px;
}

.sales-workspace-video {
  min-height: 410px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #d8ccc4;
  box-shadow: 0 14px 34px rgba(51, 35, 49, 0.13);
}

.sales-workspace-video::after {
  content: "";
  background: linear-gradient(180deg, transparent 58%, rgba(31, 23, 30, 0.78));
  position: absolute;
  inset: 0;
}

.sales-workspace-video img {
  width: 100%;
  height: 410px;
  object-fit: cover;
}

.sales-workspace-format {
  background: rgba(255,255,255,0.9);
  color: var(--aubergine);
  border-radius: 999px;
  padding: 5px 8px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 8px;
  font-weight: 850;
}

.sales-workspace-play {
  background: rgba(255,255,255,0.9);
  color: var(--aubergine);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-left: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  font-size: 11px;
}

.sales-workspace-video p {
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 0 13px;
  position: absolute;
  right: 0;
  bottom: 16px;
  left: 0;
  z-index: 2;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

.sales-workspace-panel {
  padding: 18px 11px 13px 7px;
}

.sales-workspace-panel > .eyebrow {
  font-size: 7px;
}

.sales-workspace-panel h3 {
  color: var(--aubergine);
  margin: 0 0 20px;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.05;
}

.sales-workspace-panel > div:not(.workspace-ready) {
  border-bottom: 1px solid #e3d8d0;
  min-height: 48px;
  padding: 9px 0;
  display: grid;
  gap: 2px;
}

.sales-workspace-panel > div > span {
  color: #92848c;
  font-size: 7px;
  font-weight: 700;
}

.sales-workspace-panel > div > strong {
  color: #4d4149;
  font-size: 9px;
}

.workspace-ready {
  background: #eaf5ef;
  border-radius: 9px;
  margin: 18px 0 11px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.workspace-ready > i {
  background: var(--green);
  color: #fff;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 9px;
  font-style: normal;
}

.workspace-ready > span {
  display: grid;
}

.workspace-ready strong {
  color: #2a604a;
  font-size: 8px;
}

.workspace-ready small {
  color: #60806f;
  font-size: 6px;
}

.sales-workspace-panel button {
  background: var(--coral);
  color: #fff;
  width: 100%;
  border-radius: 8px;
  padding: 10px;
  font-size: 8px;
  font-weight: 850;
}

.sales-floating-badge {
  min-width: 172px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.sales-floating-badge > i {
  background: #e7f4ec;
  color: var(--green);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 11px;
  font-style: normal;
}

.sales-floating-badge > span {
  display: grid;
}

.sales-floating-badge small {
  color: var(--taupe);
  font-size: 8px;
}

.sales-badge-one {
  top: 80px;
  left: -27px;
}

.sales-badge-two {
  right: -12px;
  bottom: 44px;
  display: grid;
  gap: 1px;
}

.sales-badge-two strong {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 20px;
}

.sales-trust {
  min-height: 76px;
  justify-content: center;
  gap: clamp(16px, 3vw, 42px);
}

.sales-trust i {
  background: #cfc1c9;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  display: block;
}

.sales-outcomes {
  width: min(1120px, calc(100% - 48px));
  margin: 92px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--line);
  box-shadow: 0 18px 50px rgba(51, 35, 49, 0.055);
}

.sales-outcomes article {
  background: rgba(255, 253, 251, 0.94);
  min-height: 150px;
  padding: 26px 24px;
}

.sales-outcomes strong {
  color: var(--coral-dark);
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 36px;
  font-weight: 600;
}

.sales-outcomes span {
  color: var(--aubergine);
  margin-left: 7px;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
}

.sales-outcomes p {
  color: var(--taupe);
  margin: 13px 0 0;
  font-size: 10px;
  line-height: 1.5;
}

.sales-problem {
  margin-top: 120px;
}

.sales-comparison {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.sales-comparison article {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 31px;
}

.sales-comparison article > div:first-child {
  border-bottom: 1px solid var(--line);
  padding-bottom: 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.sales-comparison article > div:first-child span {
  letter-spacing: 0.14em;
  font-size: 8px;
  font-weight: 900;
}

.sales-comparison article > div:first-child b {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 8px;
}

.comparison-old {
  background: rgba(255, 253, 251, 0.65);
  color: #7d7078;
}

.comparison-old > div:first-child span {
  color: #8c7e86;
}

.comparison-old > div:first-child b {
  background: #eee5e2;
  color: #756870;
}

.comparison-new {
  background:
    radial-gradient(circle at 90% 0, rgba(232,111,97,0.15), transparent 14rem),
    var(--aubergine);
  color: #fff;
  border-color: var(--aubergine) !important;
  box-shadow: 0 22px 60px rgba(51, 35, 49, 0.15);
}

.comparison-new > div:first-child {
  border-color: rgba(255,255,255,0.12) !important;
}

.comparison-new > div:first-child span {
  color: var(--coral-pale);
}

.comparison-new > div:first-child b {
  background: rgba(232,111,97,0.17);
  color: #ffc8be;
}

.sales-comparison ul {
  margin: 26px 0 3px;
  display: grid;
  gap: 20px;
}

.sales-comparison li {
  display: flex;
  align-items: center;
  gap: 13px;
}

.sales-comparison li > i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-style: normal;
  font-size: 11px;
}

.comparison-old li > i {
  background: #eee5e2;
  color: #9a8689;
}

.comparison-new li > i {
  background: rgba(80,169,124,0.18);
  color: #8ee0b5;
}

.sales-comparison li > span {
  display: grid;
  gap: 2px;
}

.sales-comparison li strong {
  font-size: 11px;
}

.sales-comparison li small {
  color: #968990;
  font-size: 9px;
}

.comparison-new li small {
  color: #c9bcc6;
}

.sales-benefits {
  margin-top: 16px;
}

.sales-benefits article {
  min-height: 225px;
}

.sales-benefits .benefit-icon {
  border: 1px solid #efddd7;
  background: var(--blush);
  color: var(--coral-dark);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
}

.sales-benefits h3 {
  margin-top: 31px;
}

.sales-usecases {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto 120px;
}

.sales-usecases > .section-heading {
  max-width: 710px;
  margin-bottom: 43px;
}

.sales-usecases h2,
.sales-faq h2 {
  color: var(--aubergine);
  letter-spacing: -0.045em;
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.02;
}

.sales-usecases > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.sales-usecases article {
  border-top: 1px solid var(--line);
  padding: 25px 3px 0;
}

.sales-usecases article > span {
  color: var(--coral-dark);
  letter-spacing: 0.15em;
  font-size: 9px;
  font-weight: 900;
}

.sales-usecases h3 {
  color: var(--aubergine);
  margin: 30px 0 9px;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 23px;
  font-weight: 600;
}

.sales-usecases article p {
  color: var(--taupe);
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
}

.sales-faq {
  width: min(960px, calc(100% - 48px));
  margin: 0 auto 115px;
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  align-items: start;
  gap: 80px;
}

.sales-faq > div:first-child .sales-text-link {
  margin-top: 25px;
}

.sales-faq details {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}

.sales-faq details:last-child {
  border-bottom: 1px solid var(--line);
}

.sales-faq summary {
  color: var(--aubergine);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

.sales-faq details p {
  color: var(--taupe);
  margin: 11px 20px 0 0;
  font-size: 12px;
  line-height: 1.65;
}

.sales-cta > div:first-child > p:not(.eyebrow) {
  color: #d5c9d2;
  max-width: 600px;
  margin: 16px 0 0;
  font-size: 12px;
}

@media (width <= 1080px) {
  .sales-hero {
    grid-template-columns: minmax(0, 0.86fr) minmax(450px, 1.14fr);
    gap: 36px;
  }

  .sales-workspace-panel {
    padding-right: 4px;
  }

  .sales-badge-one {
    left: -10px;
  }
}

@media (width <= 860px) {
  .sales-hero {
    grid-template-columns: 1fr;
  }

  .sales-hero-copy {
    max-width: 720px;
  }

  .sales-hero-visual {
    width: min(640px, 100%);
    margin: 0 auto;
  }

  .sales-outcomes {
    grid-template-columns: repeat(2, 1fr);
  }

  .sales-comparison {
    grid-template-columns: 1fr;
  }

  .sales-faq {
    gap: 44px;
  }
}

@media (width <= 760px) {
  .marketing-announcement > div {
    width: min(100% - 28px, 1240px);
    min-height: 34px;
    justify-content: flex-start;
  }

  .marketing-announcement p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .marketing-announcement a {
    display: none;
  }

  .sales-hero {
    padding-top: 53px;
    gap: 42px;
  }

  .sales-hero-copy h1 {
    font-size: clamp(43px, 12vw, 58px);
  }

  .sales-workspace-body {
    grid-template-columns: 0.83fr 1fr;
    padding: 10px;
    gap: 10px;
  }

  .sales-workspace-video,
  .sales-workspace-video img {
    min-height: 345px;
    height: 345px;
  }

  .sales-workspace-panel {
    padding-top: 12px;
  }

  .sales-workspace-panel h3 {
    margin-bottom: 12px;
    font-size: 20px;
  }

  .sales-workspace-panel > div:not(.workspace-ready) {
    min-height: 42px;
  }

  .workspace-ready {
    margin-top: 12px;
  }

  .sales-badge-one {
    top: 62px;
    left: -3px;
  }

  .sales-badge-two {
    right: -3px;
    bottom: 27px;
  }

  .sales-trust {
    justify-content: flex-start;
  }

  .sales-trust i {
    display: none;
  }

  .sales-outcomes {
    width: min(100% - 28px, 1120px);
    margin-top: 68px;
  }

  .sales-outcomes article {
    min-height: 135px;
    padding: 22px 18px;
  }

  .sales-outcomes strong {
    font-size: 30px;
  }

  .sales-outcomes span {
    margin-left: 4px;
    font-size: 15px;
  }

  .sales-problem {
    margin-top: 82px;
  }

  .sales-comparison,
  .sales-usecases,
  .sales-faq {
    width: min(100% - 28px, 1120px);
  }

  .sales-comparison article {
    padding: 24px 20px;
  }

  .sales-usecases {
    margin-bottom: 82px;
  }

  .sales-usecases > div:last-child {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .sales-faq {
    margin-bottom: 80px;
    grid-template-columns: 1fr;
    gap: 35px;
  }
}

@media (width <= 520px) {
  .sales-hero-visual {
    min-height: 485px;
  }

  .sales-workspace-body {
    grid-template-columns: 1fr;
  }

  .sales-workspace-video {
    min-height: 405px;
  }

  .sales-workspace-video img {
    min-height: 405px;
    height: 405px;
  }

  .sales-workspace-panel {
    display: none;
  }

  .sales-badge-one {
    top: 75px;
  }

  .sales-badge-two {
    bottom: 4px;
  }

  .sales-outcomes {
    grid-template-columns: 1fr;
  }
}

/* Direct-response commerce homepage */
.commerce-home {
  background: #f8f5f1;
  color: #241f22;
  overflow: hidden;
}

.commerce-home h1,
.commerce-home h2,
.commerce-home h3 {
  font-family: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  font-style: normal;
}

.commerce-kicker {
  color: var(--coral-dark);
  letter-spacing: 0.16em;
  margin: 0 0 17px;
  font-size: 10px;
  font-weight: 900;
}

.commerce-hero {
  border-bottom: 1px solid #d9d0c9;
  width: min(1440px, 100%);
  min-height: 660px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 0.78fr);
  background: #f8f5f1;
}

.commerce-hero-copy {
  padding: clamp(72px, 8vw, 112px) clamp(40px, 7vw, 105px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.commerce-hero h1 {
  max-width: 760px;
  color: #211c20;
  letter-spacing: -0.055em;
  margin: 0;
  font-size: clamp(52px, 5.6vw, 82px);
  font-weight: 820;
  line-height: 0.97;
}

.commerce-lead {
  max-width: 650px;
  color: #625a5f;
  margin: 28px 0 31px;
  font-size: 17px;
  line-height: 1.62;
}

.commerce-actions {
  display: flex;
  align-items: center;
  gap: 23px;
}

.commerce-primary {
  background: var(--coral);
  color: #fff;
  min-height: 54px;
  padding: 0 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 12px 28px rgba(232, 111, 97, 0.2);
  transition: 0.18s ease;
}

.commerce-primary:hover {
  background: var(--coral-dark);
  transform: translateY(-1px);
}

.commerce-primary span {
  font-size: 17px;
}

.commerce-secondary {
  border-bottom: 1px solid #8f8188;
  color: #3c3439;
  padding: 7px 0 5px;
  font-size: 12px;
  font-weight: 800;
}

.commerce-secondary:hover {
  border-color: var(--coral);
  color: var(--coral-dark);
}

.commerce-assurance {
  border-top: 1px solid #d9d0c9;
  margin-top: 34px;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 11px 24px;
  color: #62585e;
  font-size: 10px;
  font-weight: 750;
}

.commerce-assurance span::first-letter {
  color: var(--green);
}

.commerce-hero-media {
  min-height: 660px;
  overflow: hidden;
  position: relative;
  background: #c9b8ad;
}

.commerce-hero-media::after {
  content: "";
  background: linear-gradient(180deg, rgba(24, 18, 23, 0.03) 40%, rgba(24, 18, 23, 0.68));
  position: absolute;
  inset: 0;
}

.commerce-hero-media > img {
  width: 100%;
  height: 100%;
  min-height: 660px;
  object-fit: cover;
}

.commerce-play {
  border: 1px solid rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.9);
  color: var(--aubergine);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-left: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 14px 35px rgba(33, 25, 31, 0.2);
}

.commerce-media-top {
  color: #fff;
  position: absolute;
  top: 25px;
  right: 27px;
  left: 27px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 0.12em;
  font-size: 9px;
  font-weight: 900;
}

.commerce-media-top strong {
  border: 1px solid rgba(255,255,255,0.6);
  padding: 5px 7px;
  font-size: 8px;
}

.commerce-media-bottom {
  color: #fff;
  position: absolute;
  right: 28px;
  bottom: 27px;
  left: 28px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.commerce-media-bottom > div {
  display: grid;
  gap: 4px;
}

.commerce-media-bottom span {
  color: #eadce5;
  letter-spacing: 0.14em;
  font-size: 8px;
  font-weight: 900;
}

.commerce-media-bottom strong {
  font-size: 14px;
}

.commerce-media-bottom a {
  border-bottom: 1px solid rgba(255,255,255,0.65);
  padding-bottom: 4px;
  font-size: 10px;
  font-weight: 800;
}

.commerce-proof {
  background: #262125;
  color: #fff;
  width: 100%;
  min-height: 92px;
  padding: 20px max(24px, calc((100% - 1240px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
}

.commerce-proof > p {
  color: #ef8c80;
  letter-spacing: 0.13em;
  margin: 0;
  flex: 0 0 auto;
  font-size: 8px;
  font-weight: 900;
}

.commerce-proof > div {
  width: min(760px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.commerce-proof span {
  color: #e3dae0;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
}

.commerce-pitch {
  width: min(1120px, calc(100% - 48px));
  margin: 120px auto 88px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: start;
  gap: clamp(65px, 10vw, 145px);
}

.commerce-pitch h2,
.commerce-process h2,
.commerce-generator-intro h2,
.commerce-quality h2,
.commerce-faq h2,
.commerce-close h2 {
  color: #241f22;
  letter-spacing: -0.05em;
  margin: 0;
  font-size: clamp(40px, 4.5vw, 62px);
  font-weight: 820;
  line-height: 1;
}

.commerce-pitch-copy {
  color: #675e63;
  padding-top: 24px;
}

.commerce-pitch-copy p {
  margin: 0 0 17px;
  font-size: 14px;
  line-height: 1.72;
}

.commerce-pitch-copy a,
.commerce-quality-copy > a {
  border-bottom: 1px solid var(--coral);
  color: var(--coral-dark);
  width: fit-content;
  margin-top: 12px;
  padding-bottom: 5px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: 11px;
  font-weight: 850;
}

.commerce-benefits {
  border-top: 1px solid #d9d0c9;
  border-bottom: 1px solid #d9d0c9;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto 120px;
}

.commerce-benefits article {
  border-bottom: 1px solid #d9d0c9;
  min-height: 150px;
  padding: 30px 0;
  display: grid;
  grid-template-columns: 95px minmax(0, 1fr);
  align-items: center;
}

.commerce-benefits article:last-child {
  border-bottom: 0;
}

.commerce-benefits article > span {
  color: var(--coral-dark);
  letter-spacing: 0.15em;
  font-size: 10px;
  font-weight: 900;
}

.commerce-benefits article > div {
  display: grid;
  grid-template-columns: 0.62fr 1fr;
  align-items: center;
  gap: 55px;
}

.commerce-benefits h3 {
  color: #292328;
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}

.commerce-benefits p {
  color: #6d6469;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}

.commerce-process {
  background: #2f2630;
  color: #fff;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto 120px;
  padding: clamp(46px, 6vw, 76px);
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: clamp(55px, 9vw, 125px);
}

.commerce-process h2 {
  max-width: 500px;
  color: #fff;
}

.commerce-process .commerce-kicker {
  color: #ff9b90;
}

.commerce-process ol {
  border-top: 1px solid rgba(255,255,255,0.16);
}

.commerce-process li {
  border-bottom: 1px solid rgba(255,255,255,0.16);
  min-height: 112px;
  display: grid;
  grid-template-columns: 55px 1fr;
  align-items: center;
  gap: 18px;
}

.commerce-process li > span {
  color: #ff9b90;
  font-size: 11px;
  font-weight: 900;
}

.commerce-process li > div {
  display: grid;
  gap: 6px;
}

.commerce-process li strong {
  color: #fff;
  font-size: 14px;
}

.commerce-process li p {
  color: #c9bec6;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

.commerce-generator-intro {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto 45px;
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  align-items: end;
  gap: 80px;
}

.commerce-generator-intro > p {
  color: #6d6469;
  margin: 0 0 5px;
  font-size: 13px;
  line-height: 1.65;
}

.commerce-generator-intro + .studio {
  margin-top: 0;
}

.commerce-home .studio {
  border-radius: 0;
  box-shadow: 0 22px 65px rgba(51, 35, 49, 0.1);
}

.commerce-home .generator,
.commerce-home .preview {
  border-radius: 0;
}

.commerce-quality {
  width: min(1120px, calc(100% - 48px));
  margin: 120px auto;
  display: grid;
  grid-template-columns: 1fr 0.88fr;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid #d9d0c9;
}

.commerce-quality-copy {
  padding: clamp(40px, 6vw, 75px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.commerce-quality-copy > p:not(.commerce-kicker) {
  color: #6b6267;
  margin: 24px 0 23px;
  font-size: 14px;
  line-height: 1.7;
}

.commerce-quality ul {
  margin: 0 0 25px;
  display: grid;
  gap: 12px;
  color: #4d4549;
  font-size: 12px;
  font-weight: 750;
}

.commerce-quality li span {
  color: var(--green);
  margin-right: 7px;
}

.commerce-quality-media {
  min-height: 610px;
  overflow: hidden;
  position: relative;
  background: #c8b7ad;
}

.commerce-quality-media::after {
  content: "";
  background: linear-gradient(180deg, transparent 58%, rgba(25,19,24,0.7));
  position: absolute;
  inset: 0;
}

.commerce-quality-media img {
  width: 100%;
  height: 100%;
  min-height: 610px;
  object-fit: cover;
}

.commerce-quality-media > div {
  color: #fff;
  position: absolute;
  right: 25px;
  bottom: 24px;
  left: 25px;
  z-index: 2;
  display: grid;
  gap: 5px;
}

.commerce-quality-media span {
  color: #ffb1a7;
  letter-spacing: 0.14em;
  font-size: 8px;
  font-weight: 900;
}

.commerce-quality-media strong {
  font-size: 13px;
}

.commerce-faq {
  width: min(960px, calc(100% - 48px));
  margin: 0 auto 120px;
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  align-items: start;
  gap: 85px;
}

.commerce-faq details {
  border-top: 1px solid #d9d0c9;
  padding: 21px 0;
}

.commerce-faq details:last-child {
  border-bottom: 1px solid #d9d0c9;
}

.commerce-faq summary {
  color: #2c262a;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

.commerce-faq details p {
  color: #6d6469;
  margin: 12px 24px 0 0;
  font-size: 12px;
  line-height: 1.65;
}

.commerce-close {
  background: var(--coral);
  color: #fff;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto 100px;
  padding: clamp(48px, 7vw, 82px);
}

.commerce-close > p {
  letter-spacing: 0.15em;
  margin: 0 0 18px;
  font-size: 9px;
  font-weight: 900;
}

.commerce-close h2 {
  max-width: 890px;
  color: #fff;
}

.commerce-close > div {
  margin-top: 35px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.commerce-close a {
  background: #2c232c;
  color: #fff;
  min-height: 52px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 17px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 850;
}

.commerce-close small {
  color: #fff2ef;
  font-size: 10px;
}

.commerce-home + .marketing-footer {
  background: #f8f5f1;
}

@media (width <= 980px) {
  .commerce-hero {
    grid-template-columns: 1fr 0.72fr;
  }

  .commerce-hero-copy {
    padding-inline: 38px;
  }

  .commerce-hero h1 {
    font-size: clamp(47px, 6.6vw, 68px);
  }

  .commerce-proof {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
    padding-block: 24px;
  }

  .commerce-proof > div {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .commerce-pitch,
  .commerce-process,
  .commerce-faq {
    gap: 50px;
  }
}

@media (width <= 760px) {
  .marketing-announcement > div {
    justify-content: center;
  }

  .marketing-announcement a {
    display: inline;
    white-space: nowrap;
  }

  .commerce-hero {
    grid-template-columns: 1fr;
  }

  .commerce-hero-copy {
    padding: 58px 20px 52px;
  }

  .commerce-hero h1 {
    font-size: clamp(44px, 12vw, 61px);
  }

  .commerce-lead {
    font-size: 15px;
  }

  .commerce-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 17px;
  }

  .commerce-assurance {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .commerce-hero-media,
  .commerce-hero-media > img {
    min-height: 570px;
  }

  .commerce-media-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .commerce-proof > div {
    gap: 10px 20px;
  }

  .commerce-pitch,
  .commerce-generator-intro,
  .commerce-quality,
  .commerce-faq {
    width: min(100% - 28px, 1120px);
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .commerce-pitch {
    margin: 82px auto 58px;
  }

  .commerce-pitch-copy {
    padding-top: 0;
  }

  .commerce-benefits {
    width: min(100% - 28px, 1120px);
    margin-bottom: 82px;
  }

  .commerce-benefits article {
    grid-template-columns: 45px 1fr;
  }

  .commerce-benefits article > div {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .commerce-process {
    width: min(100% - 28px, 1240px);
    margin-bottom: 82px;
    padding: 40px 24px;
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .commerce-generator-intro {
    margin-bottom: 32px;
  }

  .commerce-quality {
    margin-top: 82px;
    margin-bottom: 82px;
  }

  .commerce-quality-copy {
    padding: 38px 24px;
  }

  .commerce-quality-media,
  .commerce-quality-media img {
    min-height: 500px;
  }

  .commerce-faq {
    margin-bottom: 82px;
  }

  .commerce-close {
    width: min(100% - 28px, 1240px);
    margin-bottom: 70px;
    padding: 40px 24px;
  }

  .commerce-close > div {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (width <= 480px) {
  .marketing-announcement p {
    font-size: 8px;
  }

  .marketing-announcement a {
    display: none;
  }

  .commerce-media-top {
    top: 18px;
    right: 18px;
    left: 18px;
  }

  .commerce-media-bottom {
    right: 19px;
    bottom: 20px;
    left: 19px;
  }

  .commerce-proof span {
    white-space: normal;
    width: calc(50% - 12px);
  }
}

/* Conversion, legal and SEO launch refinements */
.mobile-buybar {
  display: none;
}

.marketing-footer-main {
  grid-template-columns: 1.45fr repeat(3, 0.7fr);
}

.marketing-footer-main address {
  color: #756a70;
  margin-top: 3px;
  font-size: 10px;
  font-style: normal;
  line-height: 1.7;
}

.marketing-footer-main address a,
.marketing-footer-bottom a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.commerce-offer {
  border: 1px solid #d9d0c9;
  background: #fff;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto 120px;
  display: grid;
  grid-template-columns: 1fr 0.72fr;
}

.commerce-offer-copy {
  padding: clamp(45px, 6vw, 78px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.commerce-offer-copy h2 {
  color: #241f22;
  letter-spacing: -0.05em;
  margin: 0;
  max-width: 650px;
  font-family: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(38px, 4.2vw, 58px);
  font-weight: 820;
  line-height: 1.02;
}

.commerce-offer-copy > p:not(.commerce-kicker) {
  color: #6b6267;
  max-width: 610px;
  margin: 25px 0 0;
  font-size: 14px;
  line-height: 1.7;
}

.commerce-offer-proof {
  border-top: 1px solid #e0d8d2;
  margin-top: 30px;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  color: #62585e;
  font-size: 10px;
  font-weight: 750;
}

.commerce-offer-proof span::before {
  content: "✓";
  color: var(--green);
  margin-right: 7px;
}

.commerce-offer-card {
  background: #2f2630;
  color: #fff;
  padding: clamp(38px, 5vw, 62px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.commerce-offer-card > span {
  color: #ff9b90;
  letter-spacing: 0.15em;
  font-size: 9px;
  font-weight: 900;
}

.commerce-offer-card > p {
  color: #d9cfd6;
  margin: 14px 0 25px;
  font-size: 12px;
}

.commerce-offer-card > p strong {
  color: #fff;
  letter-spacing: -0.04em;
  font-size: 37px;
}

.commerce-offer-card ul {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 0 0 28px;
}

.commerce-offer-card li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  color: #e9e1e6;
  padding: 13px 0;
  font-size: 11px;
  line-height: 1.5;
}

.commerce-offer-card li::before {
  content: "✓";
  color: #ff9b90;
  margin-right: 10px;
  font-weight: 900;
}

.commerce-offer-card > a:first-of-type {
  background: var(--coral);
  color: #fff;
  min-height: 52px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 850;
}

.commerce-offer-card > a:last-of-type {
  color: #e9e1e6;
  margin: 15px auto 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 4px;
  font-size: 10px;
  font-weight: 750;
}

.legal-page {
  background: #f8f5f1;
  min-height: 70vh;
  color: #2b2529;
  padding-bottom: 95px;
}

.legal-hero {
  border-bottom: 1px solid #d9d0c9;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(70px, 8vw, 110px) 0 45px;
}

.legal-hero h1 {
  color: #241f22;
  letter-spacing: -0.055em;
  margin: 0;
  font-size: clamp(48px, 6vw, 78px);
  line-height: 0.98;
}

.legal-hero > p:not(.eyebrow) {
  color: #6b6267;
  max-width: 720px;
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.7;
}

.legal-meta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  color: #7a6f75;
  font-size: 10px;
  font-weight: 750;
}

.legal-layout {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  gap: 85px;
}

.legal-layout > aside {
  height: fit-content;
  padding-top: 58px;
  position: sticky;
  top: 120px;
  display: grid;
  gap: 11px;
}

.legal-layout > aside strong {
  color: var(--coral-dark);
  letter-spacing: 0.13em;
  margin-bottom: 7px;
  font-size: 9px;
}

.legal-layout > aside a {
  color: #6d6469;
  font-size: 11px;
  line-height: 1.4;
}

.legal-layout > aside a:hover {
  color: var(--coral-dark);
}

.legal-content > section {
  border-bottom: 1px solid #d9d0c9;
  padding: 55px 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 24px;
  scroll-margin-top: 125px;
}

.legal-content > section > span {
  color: var(--coral-dark);
  letter-spacing: 0.12em;
  padding-top: 7px;
  font-size: 9px;
  font-weight: 900;
}

.legal-content h2 {
  color: #2b2529;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  font-size: clamp(25px, 3vw, 35px);
}

.legal-content p,
.legal-content li {
  color: #655d62;
  font-size: 13px;
  line-height: 1.78;
}

.legal-content p {
  margin: 0 0 14px;
}

.legal-content p:last-child {
  margin-bottom: 0;
}

.legal-content ul {
  padding-left: 18px;
  list-style: disc;
}

.legal-content a {
  color: var(--coral-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-table {
  border: 1px solid #d9d0c9;
  margin: 23px 0;
}

.legal-table > div {
  border-bottom: 1px solid #d9d0c9;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 20px;
  font-size: 11px;
}

.legal-table > div:last-child {
  border-bottom: 0;
}

.legal-table > div:first-child {
  background: #eee9e4;
  color: #3b3338;
}

.legal-contact {
  background: #2f2630;
  color: #fff;
  width: min(1120px, calc(100% - 48px));
  margin: 75px auto 0;
  padding: clamp(36px, 5vw, 58px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
}

.legal-contact h2 {
  color: #fff;
  margin: 0;
}

.legal-contact .eyebrow {
  color: #ff9b90;
}

.legal-contact > div:last-child {
  display: grid;
  gap: 5px;
  min-width: 250px;
  color: #d9cfd6;
  font-size: 11px;
  line-height: 1.5;
}

.legal-contact > div:last-child strong,
.legal-contact a {
  color: #fff;
}

.legal-contact a {
  margin-top: 5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-related {
  width: min(1120px, calc(100% - 48px));
  margin: 28px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.legal-related a {
  color: #6c6368;
  border-bottom: 1px solid #b9aeb4;
  padding-bottom: 3px;
  font-size: 10px;
  font-weight: 750;
}

@media (width <= 980px) {
  .marketing-footer-main {
    grid-template-columns: 1.3fr repeat(3, 0.7fr);
    gap: 30px;
  }

  .commerce-offer {
    grid-template-columns: 1fr 0.8fr;
  }

  .legal-layout {
    gap: 48px;
  }
}

@media (width <= 760px) {
  body {
    padding-bottom: 62px;
  }

  .mobile-buybar {
    border-top: 1px solid rgba(47, 38, 48, 0.2);
    background: rgba(255, 253, 251, 0.97);
    min-height: 62px;
    padding: 8px 14px;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 -8px 28px rgba(39, 30, 37, 0.1);
    backdrop-filter: blur(10px);
  }

  .mobile-buybar span {
    color: #62585e;
    font-size: 10px;
  }

  .mobile-buybar strong {
    color: #2f2630;
  }

  .mobile-buybar a {
    background: var(--coral);
    color: #fff;
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 850;
  }

  .marketing-footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 38px 24px;
  }

  .marketing-footer-main > div:first-child {
    grid-column: 1 / -1;
  }

  .commerce-offer {
    width: min(100% - 28px, 1120px);
    margin-bottom: 82px;
    grid-template-columns: 1fr;
  }

  .commerce-offer-copy,
  .commerce-offer-card {
    padding: 38px 24px;
  }

  .legal-hero,
  .legal-layout,
  .legal-contact,
  .legal-related {
    width: min(100% - 28px, 1120px);
  }

  .legal-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .legal-layout > aside {
    border-bottom: 1px solid #d9d0c9;
    padding: 28px 0;
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  .legal-layout > aside strong {
    grid-column: 1 / -1;
  }

  .legal-content > section {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    padding: 40px 0;
  }

  .legal-contact {
    align-items: flex-start;
    flex-direction: column;
  }

  .legal-table > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}
<!doctype html><html lang="da"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Priser · UGCFlow</title><meta name="description" content="Vælg UGCFlow-abonnement til danske UGC-videoer."><link rel="canonical" href="https://ugcflow.dk/priser"><meta property="og:title" content="Priser · UGCFlow"><meta property="og:description" content="Vælg UGCFlow-abonnement til danske UGC-videoer."><meta property="og:type" content="website"><link rel="icon" href="/assets/favicon.svg"><link rel="stylesheet" href="/assets/style.css?v=1"><link rel="stylesheet" href="/assets/simply.css?v=1"></head><body class=""><header class="marketing-header"><a class="marketing-logo" href="/"><img src="/assets/ugcflow-logo.png" alt="UGCFlow"></a><nav><a href="/">Forside</a><a href="/saadan-virker-det">Sådan virker det</a><a class="active" href="/priser">Priser</a></nav><div class="marketing-actions"><a href="/dashboard">Dashboard</a><a class="marketing-cta" href="/priser">Kom i gang</a></div></header><main class="price-page"><section class="page-hero"><p class="commerce-kicker">ENKLE ABONNEMENTER</p><h1>Vælg plads til de annoncer, du vil teste.</h1><p>Fast månedlig betaling. Ingen binding. Alle pakker inkluderer dansk tale, læbesynkronisering og MP4-download.</p></section><div class="price-grid"><article class="price-card "><p class="eyebrow">Start</p><h2><strong>299 kr.</strong><small>/md.</small></h2><p>Til dig, der vil teste UGC</p><ul><li>✓ 1 video på 15 sek. eller 2 videoer på 8 sek.</li><li>✓ Dansk tale og læbesynkronisering</li><li>✓ 9:16 og 16:9 MP4</li><li>✓ Opsig når som helst</li></ul><a class="price-button" href="/api/billing/checkout?plan=start">Vælg Start →</a></article><article class="price-card featured"><span class="popular">MEST POPULÆR</span><p class="eyebrow">Growth</p><h2><strong>599 kr.</strong><small>/md.</small></h2><p>Til webshops med løbende annoncer</p><ul><li>✓ 1 video på op til 45 sek. plus korte varianter</li><li>✓ Dansk tale og læbesynkronisering</li><li>✓ 9:16 og 16:9 MP4</li><li>✓ Opsig når som helst</li></ul><a class="price-button" href="/api/billing/checkout?plan=growth">Vælg Growth →</a></article><article class="price-card "><p class="eyebrow">Pro</p><h2><strong>999 kr.</strong><small>/md.</small></h2><p>Til virksomheder med flere kampagner</p><ul><li>✓ 2 videoer på op til 45 sek. plus flere korte varianter</li><li>✓ Dansk tale og læbesynkronisering</li><li>✓ 9:16 og 16:9 MP4</li><li>✓ Opsig når som helst</li></ul><a class="price-button" href="/api/billing/checkout?plan=pro">Vælg Pro →</a></article></div><section class="commerce-faq"><div><p class="commerce-kicker">GODT AT VIDE</p><h2>Abonnementet</h2></div><div><details open><summary>Hvornår nulstilles min pakke?</summary><p>Din videopakke nulstilles automatisk hver måned.</p></details><details><summary>Kan jeg opgradere?</summary><p>Ja, direkte fra dit dashboard.</p></details><details><summary>Kan jeg opsige?</summary><p>Ja, kontakt os når som helst.</p></details></div></section></main><footer class="marketing-footer"><div><img src="/assets/ugcflow-logo.png" alt="UGCFlow"><p>Danske UGC-videoer til webshops — fra produktbillede til annonceklar MP4.</p></div><div><strong>Produkt</strong><a href="/saadan-virker-det">Sådan virker det</a><a href="/priser">Priser</a><a href="/login">Log ind</a></div><div><strong>Juridisk</strong><a href="/handelsbetingelser">Handelsbetingelser</a><a href="/abonnementsvilkaar">Abonnementsvilkår</a><a href="/privatlivspolitik">Privatlivspolitik</a><a href="/cookiepolitik">Cookiepolitik</a></div><div><strong>Virksomhed</strong><p>DK Handel<br>CVR 41329548<br>Mågevej 21<br>7680 Thyborøn</p><a href="mailto:kontakt@ugcflow.dk">kontakt@ugcflow.dk</a></div><small>© 2026 UGCFlow · DK Handel</small></footer><script src="/assets/app.js?v=1" defer></script></body></html>