/* yapcuts.co: the iPhone app's homepage. One centred column on phones, hero side by side on desktop.
   Bold display type and pill buttons, with a violet band and an ink band breaking up the cream. */
:root {
  --cream: #fbf8f2;
  --paper: #ffffff;
  --ink: #1b1622;
  --ink-2: #453d52;
  --muted: #6b6377;
  --line: rgba(27, 22, 34, 0.1);
  --violet: #6243ea;
  --violet-2: #7c5cff;
  --violet-soft: #e9e3ff;
  --ok: #0d7a5f;
  --display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --shadow: 0 24px 50px -26px rgba(40, 26, 80, 0.45);
  --gutter: max(18px, env(safe-area-inset-left, 0px));
  --gutter-r: max(18px, env(safe-area-inset-right, 0px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 9vw, 5rem); font-weight: 800; line-height: 0.98; }
h2 { font-size: clamp(2rem, 6.4vw, 3.4rem); font-weight: 800; line-height: 1.02; }
h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em; }
p { margin: 0; }
section[id] { scroll-margin-top: 80px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.eyebrow { font: 700 .78rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--violet); }

/* A word in violet with a soft highlighter swipe under it */
.hl { color: var(--violet); background: linear-gradient(transparent 68%, var(--violet-soft) 68%, var(--violet-soft) 92%, transparent 92%); padding: 0 .06em; }

/* Buttons */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 700 1rem var(--display); letter-spacing: -0.01em; text-decoration: none; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, filter .2s; }
.pill:active { transform: scale(.97); }
.pill-ink { min-height: 42px; padding: 0 18px; font-size: .92rem; color: #fff; background: var(--ink); }
.pill-violet { color: #fff; background: linear-gradient(140deg, var(--violet-2), var(--violet)); box-shadow: 0 14px 30px -12px rgba(98, 67, 234, .8); }
.pill-violet:hover { filter: brightness(1.06); }
.pill:focus-visible, .store:focus-visible, .tabs button:focus-visible, summary:focus-visible { outline: 3px solid var(--violet-2); outline-offset: 3px; }
.store { display: inline-block; border-radius: 12px; }
.store img { width: 180px; height: auto; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gutter-r) 10px var(--gutter); background: rgba(251, 248, 242, .82); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-logo img { height: 40px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a:not(.pill) { display: none; padding: 8px 12px; font-weight: 600; font-size: .95rem; color: var(--ink-2); text-decoration: none; }
@media (min-width: 720px) { .nav-links a:not(.pill) { display: inline-block; } }

/* Hero */
.hero { display: grid; gap: 36px; max-width: 1080px; margin: 0 auto; padding: 28px var(--gutter-r) 24px var(--gutter); background: radial-gradient(70% 55% at 50% 30%, rgba(124, 92, 255, .14), transparent 70%); }
.hero-copy { display: grid; gap: 18px; justify-items: center; text-align: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--ink-2); background: var(--paper); border: 1px solid var(--violet-soft); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }
.lede { max-width: 34em; color: var(--ink-2); font-size: 1.1rem; text-wrap: pretty; }
.hero-cta { display: grid; gap: 8px; justify-items: center; }
.hero-note { font-size: .9rem; color: var(--muted); }
.hero-phone { position: relative; justify-self: center; width: min(78vw, 340px); }
.hero-phone .phone { width: 100%; filter: drop-shadow(0 40px 50px rgba(40, 26, 80, .35)); }
.float { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.float b { color: var(--violet); font-family: var(--display); font-size: 1.1rem; }
.float .tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--ok); font-size: .75rem; }
.float-a { top: 18%; left: -12%; }
.float-b { top: 46%; right: -14%; }
.float-c { bottom: 16%; left: -8%; }
@media (prefers-reduced-motion: no-preference) {
  .float { animation: bob 5s ease-in-out infinite; }
  .float-b { animation-delay: -1.6s; }
  .float-c { animation-delay: -3.2s; }
}
@keyframes bob { 50% { transform: translateY(-8px); } }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.15fr .85fr; align-items: center; padding-top: 56px; }
  .hero-copy { justify-items: start; text-align: left; }
  .hero-cta { justify-items: start; }
}

/* Facts */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 760px; margin: 18px auto 0; padding: 22px var(--gutter-r) 0 var(--gutter); border-top: 1px solid var(--line); text-align: center; }
.facts div { display: grid; gap: 2px; padding: 0 6px; }
.facts div + div { border-left: 1px solid var(--line); }
.facts b { font: 800 clamp(1.5rem, 5.5vw, 2.2rem)/1.1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.facts span { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* Rounded bands */
.band-violet, .band-ink { margin-top: 64px; border-radius: 36px 36px 0 0; }
.band-violet { padding: 64px 0 72px; color: #fff; background: radial-gradient(80% 60% at 50% 0%, #8a6dff, transparent 70%), linear-gradient(180deg, #6a4cf0, #4f33cf); }
.band-violet .eyebrow { color: #d9cfff; }
.band-ink { margin-top: 0; padding: 64px 0 40px; color: #fff; background: radial-gradient(70% 40% at 50% 0%, rgba(124, 92, 255, .35), transparent 70%), var(--ink); }
.band-ink .eyebrow { color: #b8a8ff; }

/* Say it again */
.say .wrap { display: grid; gap: 22px; justify-items: center; text-align: center; }
.transcript { width: 100%; max-width: 620px; display: grid; gap: 10px; padding: 20px; border-radius: 24px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); text-align: left; }
.line { position: relative; padding: 12px 14px; border-radius: 14px; font: 600 1.05rem/1.4 var(--body); }
.line.keep { background: #fff; color: var(--ink); }
.line.cut { color: rgba(255, 255, 255, .78); background: rgba(27, 22, 34, .22); text-decoration: line-through; text-decoration-thickness: 2px; }
.line.pause { letter-spacing: .08em; }
.line .tag { display: inline-block; margin-right: 10px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--ink); background: #ffd8c9; vertical-align: 2px; }
.line.pause .tag { background: #cfe4ff; }
.say-note { max-width: 36em; color: rgba(255, 255, 255, .88); }
@media (prefers-reduced-motion: no-preference) {
  .line.cut { animation: strike 4.5s ease-in-out infinite; }
  .line.cut.pause { animation-delay: .6s; }
}
@keyframes strike { 0%, 18% { text-decoration-color: transparent; opacity: 1; } 34%, 100% { text-decoration-color: currentColor; opacity: .75; } }

/* Why */
.why { display: grid; gap: 16px; justify-items: center; text-align: center; padding-top: 72px; padding-bottom: 72px; background: var(--cream); }
.why p { max-width: 36em; color: var(--ink-2); font-size: 1.08rem; }
.why p b { color: var(--ink); }

/* Tour */
.tour .wrap { display: grid; gap: 20px; justify-items: center; text-align: center; }
.tabs { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .08); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; font: 600 .95rem var(--body); color: rgba(255, 255, 255, .75); background: transparent; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--ink); background: #fff; }
.tour-stage { display: grid; gap: 24px; justify-items: center; align-items: center; width: 100%; margin-top: 8px; }
.tour-stage .phone { width: min(70vw, 300px); filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .5)); transition: opacity .25s; }
.tour-copy { display: grid; gap: 10px; max-width: 30em; }
.tour-copy p { color: rgba(255, 255, 255, .78); }
@media (min-width: 900px) {
  .tour-stage { grid-template-columns: auto 1fr; gap: 56px; justify-content: center; text-align: left; }
  .tour-copy h3 { font-size: 2rem; }
}
.niches { display: grid; gap: 16px; justify-items: center; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); }
.marquee { width: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 10px; width: max-content; }
.marquee-track span { padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .marquee-track { animation: slide 40s linear infinite; } }
@keyframes slide { to { transform: translateX(calc(-50% - 5px)); } }

/* Steps */
.steps { display: grid; gap: 16px; justify-items: center; text-align: center; padding-top: 80px; padding-bottom: 24px; }
.steps ol { list-style: none; margin: 12px 0 8px; padding: 0; width: 100%; max-width: 980px; display: grid; gap: 12px; counter-reset: step; text-align: left; }
.steps li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 18px; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; top: -10px; left: -6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 .95rem var(--display); color: #fff; background: var(--violet); }
.steps li img { width: 64px; height: 64px; object-fit: contain; }
.steps li div { display: grid; gap: 4px; min-width: 0; }
.steps li b { font: 800 1.15rem var(--display); letter-spacing: -0.01em; }
.steps li span { color: var(--muted); }
@media (min-width: 900px) {
  .steps ol { grid-template-columns: repeat(3, 1fr); }
  .steps li { grid-template-columns: 1fr; justify-items: start; align-content: start; }
  .steps li img { width: 80px; height: 80px; }
}

/* Two ways */
.ways { display: grid; gap: 16px; justify-items: center; text-align: center; padding-top: 72px; }
.ways-grid { display: grid; gap: 12px; width: 100%; max-width: 860px; text-align: left; margin-top: 8px; }
@media (min-width: 720px) { .ways-grid { grid-template-columns: 1fr 1fr; } }
.way { padding: 22px; border-radius: 24px; }
.way ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.way li { position: relative; padding-left: 30px; }
.way li::before { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; }
.way-old { background: rgba(27, 22, 34, .05); color: var(--ink-2); }
.way-old li::before { content: "✕"; color: #a33a55; background: #f6dde3; }
.way-new { background: var(--paper); border: 2px solid var(--violet); box-shadow: var(--shadow); }
.way-new h3 { color: var(--violet); }
.way-new li::before { content: "✓"; color: #fff; background: var(--violet); }
.ways-note { max-width: 34em; color: var(--muted); }

/* FAQ */
.faq { display: grid; gap: 14px; justify-items: center; text-align: center; padding-top: 80px; }
.faq-list { width: 100%; max-width: 760px; display: grid; gap: 10px; margin-top: 8px; text-align: left; }
details { border-radius: 18px; background: var(--paper); border: 1px solid var(--line); padding: 0 20px; }
details[open] { box-shadow: var(--shadow); }
summary { list-style: none; cursor: pointer; position: relative; padding: 18px 40px 18px 0; font: 700 1.08rem var(--display); letter-spacing: -0.01em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; display: grid; place-items: center; color: var(--violet); background: var(--violet-soft); font-weight: 700; transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 0 18px; color: var(--ink-2); }

/* Final */
.final { padding-top: 80px; padding-bottom: 40px; }
.final-card { display: grid; gap: 24px; justify-items: center; text-align: center; padding: 48px 22px; border-radius: 32px; color: #fff; background: radial-gradient(80% 70% at 50% 0%, #8a6dff, transparent 70%), linear-gradient(180deg, #6a4cf0, #4f33cf); box-shadow: var(--shadow); }
.final-cta { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; }
.qr { display: none; margin: 0; gap: 6px; justify-items: center; }
.qr img { width: 112px; height: 112px; padding: 8px; border-radius: 14px; background: #fff; }
.qr figcaption { font-size: .82rem; color: rgba(255, 255, 255, .85); }
@media (min-width: 900px) and (hover: hover) { .qr { display: grid; } }

/* Footer */
.footer { display: grid; gap: 10px; justify-items: center; padding-top: 24px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 110px); text-align: center; color: var(--muted); font-size: .9rem; }
.footer img { height: 44px; width: auto; }
@media (min-width: 900px) { .footer { padding-bottom: 40px; } }

/* Sticky button on phones once the hero's App Store badge has scrolled away */
.dock { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 16px 34px -12px rgba(27, 22, 34, .6); position: fixed; z-index: 45; left: var(--gutter); right: var(--gutter-r); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); min-height: 56px; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .25s, transform .25s; }
.dock.show { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 900px) { .dock { display: none; } }