/* Fonts are served from this site (static/fonts), latin and latin-ext subsets; the browser fetches only the ranges a page uses. */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-normal-latin-ext-500.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-normal-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400 600; font-display: swap; src: url(fonts/inter-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400 600; font-display: swap; src: url(fonts/inter-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/inter-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/inter-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/manrope-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/manrope-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(fonts/newsreader-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(fonts/newsreader-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/schibsted-grotesk-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/schibsted-grotesk-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --ink: #15141a;
  --body: #2a2930;
  --mute: #4a4852;
  --faint: #6b6975;
  --line: #e4e2e8;
  --line-soft: #f0eff3;
  --page: #f6f5f8;
  --card: #fff;
  --blue: #2e77d6;
  --ring: #2e3bd6;
  --green: #145c32;
  --green-deep: #1e7f46;
  --green-bg: #e2f2e8;
  --red: #c60d0d;
  --red-bg: #ffdfdf;
  --gold: #8a5a00;
  --gold-bg: #fff4d8;
  --gold-dot: #e0a100;
  --cream: #fffaec;
  --cream-line: #ebcb7a;
  --cream-label: #6b4700;
  --link: #6c6af3;
  --brings: #1f2aa8;
  --track-a: #ecebf0;
  --track-b: #c5d9f6;
  --track-c: #dcefe3;
  --serif: "Instrument Serif", Georgia, serif;
  --grotesk: "Schibsted Grotesk", "Avenir Next", sans-serif;
  --sans: Inter, "Avenir Next", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(880px 320px at 0% -10%, rgba(108, 106, 243, 0.05), transparent 60%),
    var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
}
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.top-inner, .wrap { width: min(1192px, calc(100% - 48px)); margin: 0 auto; }
.top-inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.word {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.5px;
  text-decoration: none;
}
.word img { display: block; height: 22px; width: auto; }
.word .by { font-weight: 400; font-style: normal; letter-spacing: 0; }
.top .styling { color: #d97757; font-style: italic; font-weight: 600; }
.top .score { color: #18181b; font-style: italic; font-weight: 600; }
.top .word { align-items: baseline; gap: 0; }
.top .by { margin-left: 0.3em; color: #303030; font-size: 12px; font-weight: 400; }  /* as on the landing: the word mark, a small "by iWAND", no icon */
.cancel { color: var(--mute); text-decoration: none; font-family: var(--grotesk); font-size: 14px; font-weight: 400; }
main { padding: 28px 0 80px; }
.wrap { display: flex; flex-direction: column; gap: 36px; }
.report { font-family: var(--sans); color: #1f1712; }
.rise { opacity: 0; transform: translateY(12px); }
.rise.in { animation: rise 700ms var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

.hero, .lead {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(21, 20, 26, 0.04);
}
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "copy shots" "score note";
  column-gap: 28px;
  row-gap: 12px;
  padding: 26px 28px;
  align-items: stretch;
}
.hero-copy { grid-area: copy; }
.shots { grid-area: shots; }
.scorebox { grid-area: score; }
.note { grid-area: note; }
.eyebrow { margin: 0 0 8px; color: var(--mute); font-family: var(--grotesk); font-size: 13px; font-weight: 400; }
.identity { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 20px; font-weight: 400; overflow: hidden; flex: none;
}
.mark:has(img) { background: #fff; box-shadow: inset 0 0 0 1px #e7e5ec; }
.mark img { width: 100%; height: 100%; padding: 5px; box-sizing: border-box; object-fit: contain; }
.brand { margin: 0; font-family: var(--grotesk); font-weight: 800; font-size: 20px; letter-spacing: 0; }
h1 {
  margin: 18px 0 0;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -1.26px;
}
.report h1 { font-weight: 700; line-height: 1.08; color: #1f1712; letter-spacing: -1.26px; }
h1 .more { color: #d97757; }
.track { position: relative; margin-top: 8px; padding-top: 22px; }
.bars { display: grid; grid-template-columns: 40fr 30fr 30fr; gap: 4px; height: 12px; }
.bars span:nth-child(1) { background: var(--track-a); border-radius: 999px 0 0 999px; }
.bars span:nth-child(2) { background: var(--track-b); }
.bars span:nth-child(3) { background: var(--track-c); border-radius: 0 999px 999px 0; }
.stylist-mark {
  position: absolute; top: 14px; width: 0; height: 28px;
  border-left: 2px dashed var(--green-deep);
}
.you {
  position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--grotesk); font-size: 13px; font-weight: 400;
}
.you i {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue); border: 4px solid #fff;
  box-shadow: 0 0 0 1px var(--ring);
}
.names { display: grid; grid-template-columns: 40fr 30fr 30fr; gap: 4px; margin-top: 8px; }
.names span { font-family: var(--grotesk); font-size: 13px; font-weight: 400; text-decoration: underline dotted #a9a7b3; text-underline-offset: 3px; }
.names span.here { font-weight: 600; }
.scorebox {
  margin: 0; background: #fafafa; border-radius: 16px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  height: 100%;
}
.points {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-bg); color: var(--green);
  border-radius: 999px; padding: 8px 14px;
  font-family: var(--grotesk); font-weight: 800; font-size: 14px;
}
.points img { display: block; }
.checked { margin: 0; font-weight: 500; font-size: 16px; line-height: 1.45; }

.shots {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kicker {
  margin: 0; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0.88px;
  color: #145c32; text-transform: uppercase;
}
.frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.frames figure { margin: 0; }
.plate { border-radius: 12px; overflow: hidden; background: var(--track-a); }
.plate img, .frames figure:empty {
  width: 100%; height: 267px; display: block; object-fit: cover; object-position: top; background: var(--track-a);
}
.frames figcaption {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: var(--faint);
}
.note { margin: 0; height: 100%; }
.shell { padding: 0; background: none; height: 100%; }
.core {
  background: var(--cream);
  border: 1px solid var(--cream-line);
  border-radius: 16px;
  padding: 16px 18px 18px;
  height: 100%;
}
.note .kicker { color: var(--cream-label); }
.summary { margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.summary p { margin: 0; color: var(--body); font-size: 16px; font-weight: 400; line-height: 24px; }

.stage-head, .panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.stage-head { margin: 0 4px; }
.stage-head p, .quiet { margin: 0; color: var(--mute); font-family: var(--grotesk); font-size: 13px; font-weight: 400; }
.stage-head h2 {
  margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.96px;
  font-weight: 500; color: var(--ink); text-transform: uppercase;
}
.tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 12px; }
.tab {
  text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 16px; min-height: 122px; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 10px 24px rgba(21, 20, 26, 0.03);
  transition: transform 500ms var(--ease), border-color 500ms var(--ease), box-shadow 500ms var(--ease);
}
.tab:hover { transform: translateY(-2px); }
.tab { border-width: 2px; }
.tab.on { background: #f8f0e5; border-color: #d97757; box-shadow: none; }
.tab .title-row { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.tab strong { font-size: 17px; font-weight: 700; letter-spacing: 0; }
.tab .sub { color: var(--mute); font-family: var(--grotesk); font-size: 12px; font-weight: 400; line-height: 1.35; min-height: 34px; }
.tab-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.lock { width: 14px; height: 14px; flex: none; color: var(--faint); }
.tier {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: #d6e5fa; color: #2c77d8;
}
.tier.Salesperson { background: #e6e5e9; color: #616163; }
.tier.Assistant { background: #d6e5fa; color: #2c77d8; }
.tier.Stylist { background: #ddffeb; color: #1e7f46; }
.tier.muted { background: var(--track-a); color: var(--mute); }
.dots { display: flex; gap: 4px; }
.dots i, .pill i {
  width: 12px; height: 12px; border-radius: 50%; display: block; box-sizing: border-box;
}
.dots i.done, .pill.done i { background: var(--green-deep); }
.dots i.halfway, .pill.halfway i {
  background: linear-gradient(90deg, #b47b00 50%, transparent 50%);
  border: 2px solid #b47b00;
}
.dots i.not_yet, .pill.not_yet i { background: #fff; border: 1.5px solid var(--red); }
.dots i.couldnt_check, .pill.couldnt_check i { background: #fff; border: 1.5px solid #b9b7c2; }
.dots i.not_applicable { background: #d9d7e0; }

.panel {
  margin-top: 12px; border: 1px solid #e4e2e8; border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 18px 40px rgba(21, 20, 26, 0.04);
}
.panel-head { padding: 20px 24px 8px; align-items: flex-start; background: #fbfbfc; }
.panel-head h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.33px; display: flex; gap: 10px; align-items: center; color: #15141a; }
.question { margin: 8px 0 0; color: #15141a; font-family: var(--sans); font-style: italic; font-weight: 400; font-size: 14px; line-height: 1.45; }
.tally { margin: 8px 0 0; color: #4a4852; font-family: var(--sans); font-size: 12px; font-weight: 400; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; color: #2a2930; font-family: var(--grotesk); font-size: 13px; font-weight: 400; padding-top: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.factor { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 22px 24px; border-top: 1px solid var(--line-soft); }
.factor-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.pill.not_yet { background: #ffdfdf; color: #c60d0d; }
.pill.halfway { background: #fbf0d4; color: #6b4700; font-family: var(--grotesk); }
.pill.done { background: #ddffeb; color: #1e7f46; }
.pill.couldnt_check, .pill.not_applicable { background: var(--track-a); color: var(--mute); }
.effort { color: var(--mute); font-size: 12px; font-weight: 500; }
.factor h4 { margin: 10px 0 0; font-size: 18px; font-weight: 700; letter-spacing: 0; }
.brings-label {
  margin: 12px 0 0; color: #a6421f; font-family: var(--grotesk);
  font-size: 11px; font-weight: 700; letter-spacing: 0;
}
.brings { margin: 4px 0 0; color: #2a2930; font-size: 14px; line-height: 1.5; font-weight: 400; }
.aside { display: flex; flex-direction: column; gap: 12px; background: #fffcf4; border-radius: 14px; padding: 16px; }
.story { background: none; padding: 0; }
.story h5 { margin: 0 0 6px; color: #6b6975; font-size: 11px; letter-spacing: 0; font-weight: 700; }
.story.finish h5 { color: #303030; }
.story p { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 400; color: #15141a; }
.story .line { color: #15141a; }
.story .gap { color: #15141a; }
.how { color: #d97757; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.how:hover { text-decoration: underline; }
.how-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid #efe6d3; padding-top: 14px; margin-top: 4px; }
.how-foot .effort { color: #303030; font-size: 13px; font-style: italic; font-weight: 400; }
.proofs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.proofs li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: baseline; }
.who { font-size: 12px; font-weight: 600; color: var(--mute); }
blockquote {
  margin: 0;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.steps { list-style: none; margin: 2px 0 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 8px; }
.steps li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.5; }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  width: 18px; flex: none;
  font-weight: 700; font-size: 14px; color: var(--green);
}

.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  padding: 32px;
  border: 2px solid transparent; border-radius: 22px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, #b96af3, #6c6af3, #e45ee9, #f2ac3e) border-box;
}
.compare-kicker {
  display: inline-flex; align-items: center; margin: 0; padding: 8px 12px; border-radius: 999px;
  background: #fdfbf6; font-family: Manrope, var(--sans); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #a6421f;
}
.compare h2 { margin: 12px 0 0; font-weight: 700; font-size: 38px; letter-spacing: -0.95px; line-height: 1.08; color: #15141a; }
.compare .intro { margin: 14px 0 0; color: #4a4852; font-size: 16px; font-weight: 400; line-height: 1.5; }
.compare label { font-size: 12px; font-weight: 600; color: #15141a; }
.compare input, .compare textarea { border-color: #d6d4dc; font-weight: 400; font-size: 15px; }
.ticks li span { font-size: 14px; color: #15141a; }
.pitch {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: center;
  padding: 36px 32px; border-radius: 22px; background: #151515; color: #fff;
}
.glow { position: absolute; border-radius: 50%; filter: blur(28px); pointer-events: none; }
.glow-a { width: 240px; height: 220px; background: #d97757; opacity: 0.45; top: -70px; right: 18%; }
.glow-b { width: 200px; height: 200px; background: #d9bd57; opacity: 0.4; bottom: -80px; left: 42%; }
.pitch-title { position: relative; margin: 0; font-weight: 600; font-size: 40px; letter-spacing: -1px; line-height: 1.12; color: #fff; }
.pitch-copy { position: relative; }
.pitch-copy p { margin: 14px 0 0; font-size: 16px; font-weight: 400; line-height: 1.55; color: #c9c7d0; }
.pitch .price { color: #f7ac94; font-weight: 600; font-size: 15px; }
.pitch-actions { position: relative; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.pitch-cta, .pitch-demo {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  border-radius: 999px; padding: 0 18px; text-decoration: none;
}
.pitch-cta { background: #fff; color: #15141a; font-weight: 800; font-size: 16px; }
.pitch-demo { border: 1px solid #4a4852; color: #fff; font-weight: 600; font-size: 14px; }
.toktam { position: relative; display: inline-block; margin-top: 14px; color: #d97757; font-weight: 600; font-size: 14px; text-decoration: none; }
.pitch-note { position: relative; font-family: var(--sans); font-style: italic; font-size: 12px; color: #c9c7d0; }
.pitch-fig { position: relative; margin: 0; }
.player {
  height: 420px; border-radius: 18px; background: #1b1b1b;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 18px #242424;
}
.play {
  width: 56px; height: 56px; border-radius: 50%; background: #fff;
  display: grid; place-items: center;
}
.play::before {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 14px solid #151515; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.pitch-fig figcaption { margin-top: 10px; font-family: var(--grotesk); font-size: 14px; font-weight: 400; color: #c9c7d0; }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks i { color: var(--green-deep); font-style: normal; font-weight: 700; }
.form {
  background: #f7f6f9; border-radius: 18px; padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.form h3 { margin: 0; font-size: 18px; font-weight: 700; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: inherit; }
input, textarea {
  border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px 16px; outline: none;
  font-weight: 500; letter-spacing: 0; text-transform: none;
  transition: border-color 400ms var(--ease);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus { border-color: var(--link); }
.form button {
  border: 0; border-radius: 999px; background: #d97757; color: #fff;
  font-weight: 700; font-size: 16px; min-height: 52px; padding: 0 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 500ms var(--ease);
}
.phone-only { display: none; }
.form button i {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.16);
  font-style: normal;
  transition: transform 500ms var(--ease);
}
.form button:hover i { transform: translateX(2px); }
.form button:active { transform: scale(0.985); }
.form button:disabled { opacity: 0.6; cursor: default; }
.private { margin: 0; text-align: center; color: var(--mute); font-size: 13px; font-weight: 400; }
.thanks { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; }
.foot {
  width: min(1152px, calc(100% - 48px)); margin: 8px auto 0; padding-top: 24px;
  border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px;
  color: var(--mute); font-size: 13px;
}
.foot b { color: var(--green-deep); }
.list { display: flex; flex-direction: column; gap: 10px; }
.list a {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; text-decoration: none;
  box-shadow: 0 10px 24px rgba(21, 20, 26, 0.03);
  transition: transform 500ms var(--ease);
}
.list a:hover { transform: translateY(-2px); }
.list a strong { font-weight: 700; font-size: 17px; }
.list a span { color: var(--mute); }
.empty, .warn { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.warn { border-color: #f0c8c8; }

@media (max-width: 980px) {
  .hero, .factor, .compare, .pitch, .tabs, .proofs li, .gate.wait { grid-template-columns: 1fr; }
  .pitch { grid-template-columns: 1fr; }
  .hero { grid-template-areas: "copy" "score" "shots" "note"; }
  .tabs { display: flex; overflow-x: auto; }
  .tab { min-width: 200px; }
  h1 { font-size: 34px; }
  .report h1 { font-size: 34px; }
  .plate img, .browser img, .shot-wait { height: 280px; }
  .panel-head, .stage-head, .foot { flex-direction: column; }
  .frames { grid-template-columns: 1fr; }
  .frames figure:nth-child(n + 2), .frames figcaption { display: none; }
  .scorebox .points { order: 2; }
  .scorebox .checked { order: 1; }
}
.acc { display: none; }
@media (max-width: 800px) {
  .tabs, .panel { display: none; }
  .acc { display: flex; }
}
.acc { flex-direction: column; gap: 12px; margin-top: 14px; }
.stage-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 24px rgba(21, 20, 26, 0.03); }
.stage-card > button {
  width: 100%; text-align: left; background: transparent; border: 0; padding: 16px;
  display: flex; justify-content: space-between; gap: 12px; align-items: center; cursor: pointer;
}
.stage-card .title-row { display: flex; align-items: center; gap: 8px; }
.stage-card .title-row strong { font-size: 19px; font-weight: 700; }
.stage-card .sub { display: block; color: #4a4852; font-family: var(--grotesk); font-style: normal; font-size: 12px; font-weight: 400; line-height: 1.35; margin-top: 4px; }
.stage-card .tab-foot { margin-top: 10px; }
.chev { width: 16px; height: 16px; color: var(--faint); flex: none; transition: transform 500ms var(--ease); }
.stage-card.open .chev { transform: rotate(180deg); }
.acc-body { padding: 0 16px 8px; }
.acc-body .factor { padding: 18px 0; }
@media (max-width: 800px) {
  .top-inner, .wrap, .foot { width: min(1192px, calc(100% - 32px)); }
  .report h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.7px; }
  .report .brand { font-size: 18px; }
  .report .eyebrow { font-size: 12px; }
  .report .names span { font-size: 12px; }
  .report .points { font-size: 13px; }
  .report .checked { font-size: 15px; font-weight: 600; }
  .report .kicker { font-size: 10px; letter-spacing: 0.8px; }
  .report .summary p { font-size: 15px; line-height: 1.5; }
  .report .stage-head h2 { font-size: 11px; }
  .factor h4 { font-size: 16px; font-weight: 800; }
  .brings { font-size: 14px; }
  .brings-label, .story h5 { font-size: 10px; }
  .story p, .steps li { font-size: 15px; }
  .compare h2 { font-size: 24px; letter-spacing: -0.5px; }
  .compare .intro, .ticks li { font-size: 14px; }
  .compare .form h3 { font-size: 16px; font-weight: 800; }
  .compare .form button { font-family: var(--grotesk); font-size: 15px; font-weight: 800; }
  .compare .private { font-size: 12px; }
  .pitch-title { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
  .pitch-copy p { font-size: 14px; }
  .pitch .price { font-weight: 500; }
  .pitch-cta { font-size: 15px; }
  .player { height: 280px; }
  .desk-only { display: none; }
  .phone-only { display: inline; }
}

.gate { width: min(1120px, calc(100% - 48px)); margin: 12px auto 0; display: flex; flex-direction: column; gap: 28px; }
.gate.wait { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; align-items: stretch; }
/* Two columns of one height: the email box sits at the foot of the copy, the homepage picture grows to fill the card. */
.gate.wait > * { min-width: 0; }  /* a long store address or the picture must not widen the column past the screen */
.gate.wait .gate-copy { display: flex; flex-direction: column; }
.gate.wait .hold { margin-top: auto; }
.gate.wait .segments { margin-bottom: 22px; }
.gate.wait .preview-card { display: flex; flex-direction: column; }
.gate.wait .browser { margin-top: 0; flex: 1; display: flex; flex-direction: column; min-height: 250px; }
.gate.wait .browser img, .gate.wait .shot-wait { flex: 1 1 0; height: 0; min-height: 0; }
.gate-copy h1 { font-size: clamp(36px, 4.4vw, 48px); letter-spacing: -1.1px; }
.eyebrow.accent { color: var(--link); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.lede { margin: 14px 0 0; max-width: 520px; color: var(--body); font-size: 16px; line-height: 1.55; }
.domain, .hold-row { display: flex; gap: 10px; margin-top: 22px; }
.domain input, .hold-row input {
  flex: 1; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 14px 18px; outline: none;
}
.domain button, .hold-row button {
  border: 0; border-radius: 999px; background: #6a5cff; color: #fff; font-weight: 700; padding: 0 18px; cursor: pointer;
}
.hold-row button { background: #eceaf1; color: var(--ink); }
.hold { margin-top: 22px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.hold h3 { margin: 0; font-size: 18px; }
.hold p { margin: 6px 0 0; color: var(--mute); font-size: 14px; }
.progress { display: flex; justify-content: space-between; margin-top: 26px; font-size: 14px; font-weight: 600; }
.segments { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.segments i { display: block; height: 6px; border-radius: 999px; background: #f6e4e0; }
.segments i.on { background: #e7b2a8; }
.preview-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 16px; box-shadow: 0 18px 40px rgba(21, 20, 26, 0.04); }
.preview-card .domain { margin: 0; color: var(--mute); font-size: 13px; }
.browser { margin-top: 14px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fafafa; }
.chrome { display: flex; align-items: center; gap: 6px; padding: 10px 12px; }
.chrome i { width: 8px; height: 8px; border-radius: 50%; background: #e4e2e8; }
.chrome span { margin-left: 8px; flex: 1; background: #fff; border-radius: 999px; padding: 6px 12px; color: var(--mute); font-size: 13px; }
.browser img, .shot-wait { width: 100%; height: 360px; object-fit: cover; object-position: top; display: block; background: #ecebf0; }
.shot-wait { display: grid; place-items: center; color: var(--mute); font-size: 14px; }
.walk { position: relative; height: 88px; margin: 14px 2px 2px; overflow: hidden; }
.walk-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.walk-line {
  position: absolute; left: 0; right: 0; height: 26px;
  display: flex; align-items: center; padding-left: 26px;
  font-size: 16px; font-weight: 400; letter-spacing: -0.02em; color: #5c5a64;
  white-space: nowrap; transform-origin: left center;
}
.walk-line b { font-weight: inherit; color: inherit; display: block; overflow: hidden; text-overflow: ellipsis; }
.walk-think { position: absolute; left: 0; top: 33px; width: 16px; height: 16px; }
.walk-think .ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, #B96AF3 74%, #6C6AF3 82%, #E45EE9 88%, #F2AC3E 94%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.3px));
  animation: walk-spin 1.6s linear infinite;
}
.walk-think .star { position: absolute; inset: 0; margin: auto; width: 11px; height: 11px; animation: walk-breathe 1.6s ease-in-out infinite; }
.walk-think .spark { position: absolute; width: 6px; height: 6px; top: -1px; right: -1px; animation: walk-twinkle 1.6s ease-in-out infinite; }
@keyframes walk-spin { to { transform: rotate(360deg); } }
@keyframes walk-breathe { 0%, 100% { transform: scale(0.78) rotate(-8deg); } 50% { transform: scale(1) rotate(12deg); } }
@keyframes walk-twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.6); } 45% { opacity: 1; transform: scale(1); } 70% { opacity: 0.2; transform: scale(0.7); } }
.reassure { grid-column: 1 / -1; margin: 8px 0 0; text-align: center; color: var(--faint); font-size: 13px; }
.wait-note { margin: 12px 0 0; color: var(--mute); font-size: 14px; line-height: 1.5; }
.wait-note.stopped { color: var(--red); }
.wait-note .retry { margin-left: 8px; padding: 6px 14px; border: 0; border-radius: 999px; background: #d97757; color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; }
.gate-error { color: var(--red); font-size: 14px; margin: 10px 0 0; }

body.landing { background: #fff; overflow-x: hidden; }
body.landing .top { display: none; }
body.landing main { padding: 0; }
.land { color: #1f1712; font-family: Inter, "Avenir Next", sans-serif; }
.land h2, .land h3, .land p, .land figure { margin: 0; }
.land-nav {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 6;
  width: min(1152px, calc(100% - 32px)); height: 74px; padding: 0 25px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: rgba(255, 255, 255, 0.8); border: 1px solid #e4e4e7;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); backdrop-filter: blur(6px);
}
.land-nav .word { display: inline-flex; align-items: baseline; gap: 0; text-decoration: none; font-size: 18.9px; line-height: 28px; letter-spacing: -0.5px; }
.land-nav nav { display: flex; gap: 32px; }
.land-nav nav a { color: #52525b; text-decoration: none; font-weight: 500; font-size: 13.8px; line-height: 20px; }
.nav-end { display: flex; align-items: center; }
.nav-site {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 32px;
  border: 1px solid #e4e4e7; border-radius: 9999px;
  color: #18181b; text-decoration: none; font-weight: 600; font-size: 15.5px; line-height: 24px; background: #fff; white-space: nowrap;
}
.burger { display: none; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.burger svg { display: block; }
.land .styling { color: #d97757; font-style: italic; font-weight: 600; }
.land .score { color: #18181b; font-style: italic; font-weight: 600; }
.land .by { margin-left: 0.3em; color: #303030; font-style: normal; font-weight: 400; font-size: 12px; letter-spacing: 0; }
.hero-land {
  position: relative; overflow: hidden; text-align: center; min-height: 752px; padding: 154px 24px 48px; box-sizing: border-box;
  background:
    radial-gradient(circle 460px at 1294px 145px, rgba(235, 195, 170, 0.75), rgba(240, 214, 196, 0.35) 55%, rgba(250, 246, 237, 0) 100%),
    linear-gradient(180deg, #f8efe4 0%, #faf6ed 100%);
}
.hero-inner { position: relative; width: min(1131px, 100%); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.land-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 999px; background: #fdfbf6;
  box-shadow: inset 0 0 0 1px #ebcdbe;
  color: #a6421f; font-family: Manrope, Inter, sans-serif; font-weight: 700; font-size: 10.5px; line-height: 16.8px;
  letter-spacing: 1.68px; text-transform: uppercase;
}
.land-badge svg { flex: none; }
.hero-land h1 { max-width: 671px; margin: 0; padding-top: 8px; font-size: 64px; font-weight: 700; line-height: 1.06; letter-spacing: 0; color: #1f1712; }
.hero-land h1 span { color: #d97757; }
.hero-lede { max-width: 589px; font-family: Manrope, Inter, sans-serif; font-weight: 500; font-size: 18px; line-height: 1.4; color: #6b5f55; }
.hero-form {
  width: min(672px, 100%); margin-top: 16px; box-sizing: border-box; background: #fff9f0;
  border-radius: 16px; padding: 24px; text-align: left;
}
.hero-field {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: #f8f1e8; border-radius: 16px;
}
.hero-input { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 44px; padding: 10px 0; box-sizing: border-box; cursor: text; }
.hero-input .globe { flex: none; }
.hero-input input {
  flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none;
  font-family: Arial, sans-serif; font-weight: 400; font-size: 16px; color: #2d2d2d;
}
.hero-input input::placeholder { color: #909090; }
.hero-field button, .inline-field button {
  flex: none; border: 0; background: #d97757; color: #fff; cursor: pointer; font-family: Inter, sans-serif;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
.hero-field button { gap: 8px; min-height: 40px; padding: 13px 20px; border-radius: 12px; font-weight: 600; font-size: 14px; line-height: 24px; }
.hero-form .fine { margin: 0; padding-top: 16px; text-align: center; font-style: italic; font-size: 12px; line-height: 16px; color: #2d2d2d; }
.stats { display: flex; justify-content: center; gap: 32px; width: 448px; max-width: 100%; list-style: none; margin: 0; padding: 0; }
.stats li { flex: 1 0 auto; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.stats li + li { flex: 0 0 auto; }
.stats b { font-size: 24px; line-height: 32px; font-weight: 700; color: #2d2d2d; white-space: nowrap; }
.stats span { font-size: 12px; line-height: 15px; color: #52525b; white-space: nowrap; }

.land-how { background: #faf6ed; padding: 96px 24px 101px; }
.how-head, .steps-grid { max-width: 1138px; margin-left: auto; margin-right: auto; }
.how-head { display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; }
.land-how h2, .offer h2 { font-size: 35.2px; font-weight: 700; line-height: 54.6px; letter-spacing: -1.04px; color: #1f1712; }
.how-head p { font-family: Manrope, Inter, sans-serif; font-size: 16px; line-height: 25.6px; color: #6b5f55; }
.steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.steps-grid article { display: flex; flex-direction: column; gap: 8px; background: #f5ecdf; border-radius: 24px; padding: 32px; text-align: left; }
.steps-grid span { color: #a6421f; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 1.2px; }
.steps-grid h3 { display: flex; align-items: center; min-height: 40px; margin: 0; font-size: 24px; font-weight: 600; line-height: 24px; color: #1f1712; }
.steps-grid p { font-size: 14px; line-height: 22.75px; color: #6b5f55; }

.journey { background: #151515; color: #fff; padding: 96px 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.journey-head { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.journey h2 { max-width: 592px; font-size: 30px; font-weight: 700; line-height: 36px; color: #fff; }
.journey-head p { max-width: 526px; font-size: 15px; line-height: 24.38px; color: #f0f0f0; }
.moments { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1000px; margin: 66px auto 0; }
.moment {
  display: flex; flex-direction: column; min-width: 0; background: #1b1b1b; border-radius: 22px; padding: 26px 26px 22px;
  box-shadow: inset 0 0 0 1px rgba(239, 230, 216, 0.09);
}
.moment header { display: flex; gap: 14px; align-items: center; min-width: 0; padding-bottom: 20px; }
.moment header > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #d97757; display: grid; place-items: center; }
.moment h3 { margin: 0; font-size: 24px; font-weight: 500; line-height: 25.2px; letter-spacing: -0.24px; color: #fbf4e9; }
.moment .sub { font-style: italic; font-size: 15px; line-height: 24px; color: #b3a696; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.pair > div { display: flex; flex-direction: column; gap: 3px; border-radius: 14px; padding: 12px 14px; }
.pair .sales { background: rgba(239, 230, 216, 0.04); box-shadow: inset 0 0 0 1px rgba(239, 230, 216, 0.08); }
.pair .stylebox { background: rgba(232, 183, 158, 0.1); box-shadow: inset 0 0 0 1px rgba(232, 183, 158, 0.28); }
.moment .role { font-size: 12px; font-weight: 700; line-height: 16.8px; letter-spacing: 1.68px; text-transform: uppercase; color: #efe6d8; }
.stylebox .role { color: #e8b79e; }
.moment p:not(.role, .tells) { font-size: 15px; line-height: 23.25px; color: #b3a696; }
.moment .said { color: #f3e9dc; }
.facts { display: flex; flex-direction: column; padding: 16px 0 14px; }
.facts .role { margin-bottom: 3px; }
.facts .role ~ .role { margin-top: 14px; }
.moment .tells {
  margin-top: auto; padding: 12.5px 16px; background: #f0e5d3; border-radius: 14px;
  font-size: 14.5px; line-height: 21px; color: #1f1712;
}
.tells b { font-weight: 700; }
.moment.ask {
  justify-content: center; gap: 0; padding: 86px 28px;
  background: linear-gradient(160deg, #1b1b1b 0%, rgba(48, 48, 48, 0.82) 100%);
  box-shadow: inset 0 0 0 1px rgba(232, 183, 158, 0.4);
}
.moment.ask h3 { font-size: 32px; font-weight: 500; line-height: 33.6px; letter-spacing: -0.64px; color: #fbf4e9; }
.moment.ask h3 span { color: #e8b79e; font-style: italic; }
.moment.ask > p { padding-top: 14px; font-size: 15px; line-height: 24px; }
.ask .inline-form { margin-top: 19px; }
.inline-form { display: flex; flex-direction: column; gap: 1px; }
.field-label { display: block; font-weight: 600; font-size: 14px; line-height: 22.4px; color: #efe6d8; text-align: left; }
.final .field-label { font-family: Manrope, Inter, sans-serif; }
.inline-field {
  display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 6px 6px 22px; background: #fdfbf6; border-radius: 999px;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}
.inline-field input { flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-weight: 400; outline: none; font-family: Inter, sans-serif; font-size: 14px; line-height: 22.4px; color: #1f1712; }
.inline-field input::placeholder { color: #6b5f55; }
.inline-field button {
  gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 600; font-size: 15.5px; line-height: 24.8px;
  box-shadow: 0 6px 16px -8px rgba(166, 66, 31, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.inline-form .fine { padding-top: 8px; font-family: Manrope, Inter, sans-serif; font-size: 13.5px; line-height: 21.6px; color: #b3a696; }
.final .inline-form .fine { padding-top: 12px; font-family: Inter, sans-serif; text-align: center; }

.offer { background: #faf6ed; padding: 96px 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.offer-wrap { max-width: 1084px; margin: 0 auto; }
.offer-kicker { color: #a6421f; font-size: 11.5px; font-weight: 700; line-height: 18.4px; letter-spacing: 1.84px; text-transform: uppercase; }
.offer-kicker + h2 { margin-top: 18px; max-width: 532px; }
.offer-card {
  margin-top: 48px; display: grid; grid-template-columns: 533px minmax(0, 1fr); gap: 24px; align-items: center;
  background: #fdfbf6; border: 3px solid #d97757; border-radius: 26px; padding: 34px;
}
.offer-card h3 { font-size: 40px; font-weight: 600; letter-spacing: -1.2px; line-height: 42.4px; color: #1f1712; }
.offer-copy > p { margin-top: 16px; font-size: 16px; line-height: 24.8px; color: #6b5f55; }
.offer-copy > .price { margin-top: 17px; color: #d97757; font-weight: 600; font-size: 15px; line-height: normal; }
.offer-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 21px; }
.offer-cta, .offer-demo { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; box-sizing: border-box; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.offer-cta { padding: 0 26px; background: #151515; color: #fff; font-weight: 800; font-size: 16px; }
.offer-demo { padding: 0 18px; border: 1px solid #4a4852; color: #151515; font-weight: 600; font-size: 14px; background: transparent; }
.offer-toktam { display: inline-flex; align-items: center; min-height: 32px; margin-top: 16px; color: #d97757; font-weight: 600; font-size: 14px; text-decoration: none; }
.offer-player { display: grid; height: 459px; box-sizing: border-box; padding: 18px; border-radius: 18px; background: #1b1b1b; }
.offer-player::before { content: ""; grid-area: 1 / 1; border-radius: 12px; background: #242424; }
.offer-player .play { grid-area: 1 / 1; place-self: center; }
.offer-card figcaption { margin-top: 4px; color: #4a4a4a; font-family: var(--grotesk); font-size: 14px; line-height: 20.3px; }
.promise-block { margin-top: 80px; }
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.promises article { display: flex; flex-direction: column; background: #fdfbf6; border-radius: 22px; padding: 24px; box-shadow: inset 0 0 0 1px #e9dfce; }
.promises svg { display: block; }
.promises h3 { margin: 17px 0 0; font-size: 21px; font-weight: 500; line-height: 22px; letter-spacing: -0.42px; color: #1f1712; }
.promises p { margin-top: 7px; font-size: 14.5px; line-height: 22.48px; color: #6b5f55; }
.trust { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr); grid-template-rows: minmax(388px, auto); gap: 56px; margin-top: 64px; align-items: start; scroll-margin-top: 48px; }
.toktam-note { display: flex; flex-direction: column; gap: 15px; background: #f0e5d3; border-radius: 26px; padding: 32px 30px; }
.avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 4px #fdfbf6; }
.toktam-note blockquote { margin: 0; padding-top: 8px; font-size: 21px; font-weight: 400; line-height: 30.45px; letter-spacing: -0.105px; color: #1f1712; }
.toktam-note figcaption { font-size: 13.5px; font-weight: 600; line-height: 21.6px; }
.faqs { border-top: 1px solid #e9dfce; }
.faqs details { border-bottom: 1px solid #e9dfce; padding: 8px 0; }
.faqs summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 16px; font-weight: 600; line-height: 25.6px; color: #1f1712; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary h3 { max-width: 543px; margin: 0; font: inherit; color: inherit; }
.faqs summary svg { flex: none; transform: scaleY(-1); }
.faqs details[open] summary svg { transform: none; }
.faqs details p { margin: 8px 0 0; max-width: 549px; font-size: 12px; line-height: 16px; color: #6b5f55; }

.final { background: #fff; padding: 96px 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.final-inner {
  max-width: 1138px; margin: 0 auto; box-sizing: border-box; border-radius: 36px;
  padding: 111px 48px 112px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center;
  background: radial-gradient(ellipse 40% 60% at 92% 10%, rgba(191, 79, 42, 0.5), rgba(191, 79, 42, 0) 70%), #151515;
}
.final h2 { max-width: 681px; font-weight: 500; font-size: 62px; line-height: 65px; letter-spacing: -1.55px; color: #fbf4e9; }
.final h2 span { color: #e8b79e; font-style: italic; }
.final .inline-form { width: min(560px, 100%); padding-top: 17px; }
.land-foot { width: min(1084px, calc(100% - 48px)); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; padding: 86px 0 35px; background: #fff; }
.foot-mark { font-family: Newsreader, Georgia, serif; font-weight: 600; font-size: 20px; line-height: 32px; letter-spacing: -0.4px; }
.land-foot nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; }
.land-foot a { color: #6b5f55; text-decoration: none; font-family: Manrope, Inter, sans-serif; font-size: 14px; line-height: 22.4px; }
.land-foot .foot-updated { flex-basis: 100%; color: #a09486; font-family: Manrope, Inter, sans-serif; font-size: 12px; line-height: 18px; text-align: right; }

@media (max-width: 980px) {
  .offer-card { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
  .trust { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  body.landing { background: #faf6ed; }
  .land-nav {
    top: 0; left: 0; transform: none; width: 100%; height: 80px; padding: 0 24px; box-sizing: border-box;
    border: 0; border-radius: 0; box-shadow: none; background: rgba(255, 255, 255, 0.8);
  }
  .land-nav nav {
    display: none; position: absolute; top: 80px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 24px 16px;
    background: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 16px -12px rgba(0, 0, 0, 0.3);
  }
  .land-nav.open nav { display: flex; }
  .land-nav nav a { padding: 10px 0; font-size: 15px; }
  .land .by { display: none; }
  .nav-site { height: 32px; padding: 0 24px; color: #303030; font-size: 13.3px; }
  .burger { display: block; margin-left: -1px; }
  .hero-land { min-height: 0; padding: 104px 20px 48px; background: #faf6ed; }
  .hero-inner { gap: 20px; }
  .land-badge { gap: 8px; max-width: 330px; padding: 8px 12px; box-shadow: none; font-size: 10px; line-height: 14px; letter-spacing: 1.4px; }
  .land-badge span { flex: 1; }
  .hero-land h1 { max-width: 330px; padding-top: 0; font-size: 38px; line-height: 41.04px; letter-spacing: -1px; }
  .hero-lede { max-width: 330px; font-size: 16px; line-height: 24px; }
  .hero-form { width: 100%; max-width: 330px; margin-top: 4px; padding: 0; background: none; border-radius: 0; }
  .hero-field {
    flex-direction: column; align-items: stretch; gap: 12px; padding: 16px;
    background: #fff9f0; border-radius: 20px; box-shadow: 0 0 0 1px rgba(166, 66, 31, 0.12);
  }
  .hero-input { min-height: 48px; padding: 0 16px; background: #f8f1e8; border-radius: 14px; }
  .hero-input input { font-family: Inter, sans-serif; }
  .hero-field button { min-height: 48px; padding: 0 20px; border-radius: 14px; font-size: 15px; line-height: 22.5px; box-shadow: 0 6px 8px rgba(166, 66, 31, 0.7); }
  .hero-form .fine { padding-top: 12px; }
  .stats { display: grid; grid-template-columns: 157px 157px; gap: 20px 16px; width: 330px; padding-top: 8px; }
  .stats span { line-height: 18px; }

  .land-how { padding: 56px 20px; }
  .how-head { gap: 8px; }
  .land-how h2, .offer h2 { font-size: 30px; line-height: 34.5px; letter-spacing: -0.9px; }
  .how-head p { font-size: 15px; line-height: 22.5px; }
  .steps-grid { grid-template-columns: 1fr; gap: 12px; }
  .steps-grid article { gap: 8px; padding: 24px; border-radius: 22px; }
  .steps-grid span { line-height: 18px; }
  .steps-grid h3 { min-height: 0; font-size: 20px; }
  .steps-grid p { line-height: 22.4px; }

  .journey { padding: 56px 20px; }
  .journey-head { gap: 16px; }
  .journey h2 { font-size: 26px; line-height: 31.2px; letter-spacing: -0.5px; }
  .journey-head p { line-height: 24px; }
  .moments { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .moment { padding: 20px; box-shadow: none; }
  .moment header { gap: 12px; padding-bottom: 20px; }
  .moment header > div { gap: 0; }
  .moment h3 { font-size: 21px; line-height: 25.2px; }
  .moment .sub { font-size: 14px; line-height: 19.6px; }
  .pair { align-items: stretch; }
  .pair > div { gap: 4px; padding: 12px; box-shadow: none !important; }
  .moment .role, .stylebox .role { font-family: Inter, sans-serif; font-size: 11px; line-height: 16.5px; letter-spacing: 1.5px; white-space: nowrap; }
  .pair p:not(.role) { font-size: 14px; line-height: 21px; }
  .facts { padding: 16px 0 20px; }
  .facts .role { margin-bottom: 4px; }
  .facts .role ~ .role { margin-top: 16px; }
  .facts p:not(.role) { font-size: 14px; line-height: 22.4px; }
  .moment .tells { padding: 12px 16px; font-size: 14px; }
  .moment.ask { padding: 24px; background: linear-gradient(130deg, #2a1a14 0%, #1b1b1b 100%); box-shadow: none; }
  .moment.ask h3 { font-size: 28px; font-weight: 700; line-height: 32.2px; letter-spacing: -0.6px; color: #fff; }
  .moment.ask h3 span { font-weight: 500; }
  .moment.ask > p { padding-top: 12px; font-size: 14px; line-height: 22.4px; }
  .ask .inline-form { margin-top: 20px; }
  .field-label { font-family: Manrope, Inter, sans-serif; line-height: 21px; }
  .inline-field {
    flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 6px; border-radius: 28px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.6);
  }
  .final .inline-field { padding: 12px 6px; }
  .inline-field input { height: 48px; padding: 0 16px; font-size: 16px; }
  .inline-field input::placeholder { color: #909090; }
  .inline-field button { padding: 0 20px; font-size: 15px; line-height: 22.5px; gap: 8px; box-shadow: 0 6px 8px rgba(166, 66, 31, 0.7); }
  .inline-form .fine, .final .inline-form .fine { padding-top: 12px; font-size: 13px; line-height: 19.5px; text-align: center; }

  .offer { padding: 57px 20px 56px; }
  .offer-kicker { font-size: 11px; line-height: 16.5px; letter-spacing: 1.8px; }
  .offer-kicker + h2 { margin-top: 12px; max-width: none; }
  .offer-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 24px; padding: 24px; }
  .offer-card figure { order: -1; }
  .offer-player { height: 207px; padding: 0; border-radius: 14px; background: #242424; }
  .offer-player::before { display: none; }
  .offer-card figcaption { margin-top: 8px; font-size: 13px; line-height: 19.5px; }
  .offer-card h3 { padding-top: 24px; font-size: 30px; line-height: 33px; letter-spacing: -0.9px; }
  .offer-copy > p { font-size: 15px; line-height: 24px; }
  .offer-copy > .price { margin-top: 16px; line-height: 22.5px; }
  .offer-actions { flex-direction: column; gap: 12px; margin-top: 20px; }
  .offer-cta, .offer-demo { width: 100%; padding: 0 24px; white-space: normal; text-align: center; }
  .offer-cta { font-size: 13px; line-height: 22.5px; }
  .offer-toktam { display: flex; justify-content: center; min-height: 0; margin-top: 12px; padding: 8px 0; line-height: 21px; }
  .promise-block { margin-top: 56px; }
  .promises { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .promises article { box-shadow: none; }
  .promises h3 { margin-top: 12px; line-height: 26px; letter-spacing: 0; }
  .promises p { margin-top: 8px; font-size: 14px; line-height: 22.5px; }
  .trust { grid-template-rows: none; gap: 32px; margin-top: 56px; }
  .toktam-note { gap: 0; padding: 24px; }
  .toktam-note blockquote { padding-top: 16px; font-size: 19px; line-height: 27.55px; letter-spacing: -0.1px; }
  .toktam-note figcaption { padding-top: 12px; line-height: 20.25px; }
  .faqs details { padding: 0; }
  .faqs summary { min-height: 64px; padding: 12px 0; box-sizing: border-box; line-height: 22.4px; }
  .faqs details p { margin: 0; padding-bottom: 16px; font-size: 14px; line-height: 22.4px; }

  .final { padding: 0 16px 40px; background: #faf6ed; border-top: 0; }
  .final-inner {
    gap: 0; padding: 48px 20px; border-radius: 28px;
    background: radial-gradient(ellipse 150% 120% at 92% 8%, rgba(191, 79, 42, 0.45), rgba(191, 79, 42, 0) 55%), #151515;
  }
  .final h2 { max-width: 298px; font-size: 34px; line-height: 37.4px; letter-spacing: -1px; }
  .final .inline-form { width: 100%; padding-top: 32px; }
  .land-foot { width: 100%; flex-direction: column; flex-wrap: nowrap; gap: 16px; padding: 8px 20px 48px; box-sizing: border-box; background: #faf6ed; }
  .foot-mark { font-size: 22px; line-height: 33px; }
  .land-foot nav { justify-content: center; gap: 8px 19px; max-width: 330px; }
  .land-foot a { line-height: 21px; }
  .land-foot .foot-updated { flex-basis: auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rise, .rise.in { animation: none; opacity: 1; transform: none; }
  .tab, .form button, .form button i, .list a { transition: none; }
  .walk-think .ring, .walk-think .star, .walk-think .spark { animation: none; }
}

/* Wait page on narrow screens: one column, the picture a fixed height again (after the two-column rules above). */
@media (max-width: 980px) {
  .gate.wait { grid-template-columns: 1fr; }
  .gate.wait .hold { margin-top: 22px; }
  .hold-row button { white-space: nowrap; }
  .hold-row input { min-width: 0; }
  .gate.wait .browser { min-height: 0; }
  .gate.wait .browser img, .gate.wait .shot-wait { flex: none; height: 280px; }
}

/* Video: a poster that becomes YouTube's player on click. Keeps each slot's size (.player, .offer-player). */
.yt { position: relative; width: 100%; border: 0; padding: 0; cursor: pointer; overflow: hidden; box-shadow: none; }
.yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt .play { position: relative; z-index: 1; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease; }
.yt:hover .play { transform: scale(1.06); }
.offer-player.yt { padding: 0; }
.offer-player.yt::before { display: none; }
.yt-on { display: block; width: 100%; border: 0; padding: 0; box-shadow: none; background: #000; }

/* Unlock card for the locked stages. */
.unlock-gate { display: grid; grid-template-columns: 1fr minmax(0, 1.05fr); gap: 24px 40px; align-items: start; margin-top: 18px; padding: 26px 28px; background: #fafafa; border: 1px solid var(--line); border-radius: 22px; }
.ug-copy h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; letter-spacing: -0.3px; }
.ug-copy h3 .lock { width: 18px; height: 18px; flex: none; }
.ug-copy p { margin: 10px 0 0; color: var(--body); font-size: 15px; line-height: 1.55; }
.ug-form label, #preview-form label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.ug-row { display: flex; gap: 10px; }
.ug-form input, #preview-form input { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; border: 1px solid #c9c7d0; border-radius: 14px; background: #fff; padding: 14px 16px; font: inherit; font-size: 15px; outline: none; }
.ug-form input:focus, #preview-form input:focus { border-color: #d97757; box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.16); }
.ug-form input.bad, #preview-form input.bad { border-color: #b9473a; }
.ug-form button, #preview-form button, .modal-done { border: 0; border-radius: 14px; background: #d97757; color: #fff; font: inherit; font-weight: 700; font-size: 15px; padding: 0 22px; cursor: pointer; white-space: nowrap; }
.ug-form button:disabled, #preview-form button:disabled { opacity: 0.7; cursor: default; }
.ug-error { margin: 10px 0 0; color: #b9473a; font-size: 14px; }

/* Free preview popup. */
.modal-back { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(21, 20, 26, 0.45); backdrop-filter: blur(3px); animation: fade-in 0.15s ease; }
.modal { position: relative; width: min(480px, 100%); box-sizing: border-box; padding: 30px 28px 24px; border-radius: 24px; background: #fffcf6; box-shadow: 0 30px 80px rgba(21, 20, 26, 0.25); animation: pop-in 0.18s ease; }
.modal-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1ece2; color: #4a4650; font-size: 20px; line-height: 1; cursor: pointer; }
.modal-kicker { margin: 0; color: #d97757; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.modal h3 { margin: 10px 0 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.5px; }
.modal-lede { margin: 10px 0 18px; color: var(--body); font-size: 15px; line-height: 1.55; }
#preview-form { display: flex; flex-direction: column; }
#preview-form input { margin-bottom: 14px; }
#preview-form button, .modal-done { height: 50px; margin-top: 4px; }
.modal-done { width: 100%; margin-top: 18px; }
.modal-note { margin: 12px 0 0; color: var(--mute); font-size: 12px; text-align: center; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

@media (max-width: 980px) {
  .unlock-gate { grid-template-columns: 1fr; padding: 20px; }
  .ug-row { flex-direction: column; }
  .ug-form button { height: 50px; }
}

/* "Fix 2 to Stylist": the fixes the chip counts, in its order, so the promise on the first screen can be checked here. */
.tier-step { padding: 3px 9px; border-radius: 999px; background: #eef4ff; color: #3b5bdb; font-size: 12px; font-weight: 600; }

/* The video takes its own shape (16:9) in both places, at every width: no letterbox bands, no fixed slot height.
   The 16:9 thumbnail fills it; the 4:3 fallback is cropped to the same frame. */
.player.yt, .player.yt-on, .offer-player.yt, .offer-player.yt-on { height: auto; aspect-ratio: 16 / 9; padding: 0; border-radius: 16px; box-shadow: none; background: #000; }
.offer-card figure, .pitch-fig { margin: 0; align-self: center; width: 100%; min-width: 0; }
.offer-card figcaption, .pitch-fig figcaption { margin-top: 10px; }